@storefront-ui/shared - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

dist/index.d.ts

@@ -5,2 +5,3 @@ export * from './scrollable';
 export * from './trapFocus';
+export * from './focusVisibleManager';
 //# sourceMappingURL=index.d.ts.map

dist/index.umd.js

@@ -1,1 +0,1 @@
-(function(n,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(n=typeof globalThis<"u"?globalThis:n||self,l(n["storefront-ui-shared"]={}))})(this,function(n){"use strict";var ot=Object.defineProperty;var lt=(n,l,a)=>l in n?ot(n,l,{enumerable:!0,configurable:!0,writable:!0,value:a}):n[l]=a;var o=(n,l,a)=>(lt(n,typeof l!="symbol"?l+"":l,a),a);const l={reduceMotion:!1,snap:!1,drag:void 0,vertical:!1},a="sf-scrollable__container--dragging";class ${constructor(e,s){o(this,"container");o(this,"options");o(this,"debounceId");o(this,"isDragged");o(this,"dragScrollX");o(this,"dragScrollLeft");o(this,"dragScrollY");o(this,"dragScrollTop");o(this,"scrollListenerInstance",()=>{});o(this,"resizeListenerInstance",()=>{});o(this,"mouseDownListenerInstance",()=>{});o(this,"mouseUpListenerInstance",()=>{});o(this,"mouseMoveListenerInstance",()=>{});o(this,"mouseLeaveListenerInstance",()=>{});if(!(e instanceof HTMLElement))throw new Error(`SfScrollable: Container is not a HTMLElement! Received: ${e}`);this.container=e,this.options={...l,...s},this.dragScrollX=0,this.dragScrollLeft=0,this.dragScrollY=0,this.dragScrollTop=0,this.init()}init(){this.addListeners(),this.onScrollHandler()}update(e){this.options={...l,...e},this.removeListeners(),this.init()}destroy(){this.removeListeners()}prev(){const{container:e,options:s}=this;s.vertical?this.scrollTo({top:e.scrollTop-e.clientHeight}):this.scrollTo({left:e.scrollLeft-e.clientWidth})}next(){const{container:e,options:s}=this;s.vertical?this.scrollTo({top:e.scrollTop+e.clientHeight}):this.scrollTo({left:e.scrollLeft+e.clientWidth})}scrollToIndex(e){const s=this.children();if(s[e]){const{container:r}=this,i=s[e].getBoundingClientRect(),c=i.left-r.getBoundingClientRect().left,h=i.top-r.getBoundingClientRect().top,d=r.clientWidth/2-i.width/2,it=r.clientHeight/2-i.height/2;this.options.vertical?this.scrollTo({top:r.scrollTop+h-it}):this.scrollTo({left:r.scrollLeft+c-d})}}refresh(e){requestAnimationFrame(()=>{const s=this.calculate();e==null||e(s)})}onMouseUp(){this.isDragged=!1,setTimeout(()=>{this.container.classList.remove(a)},50)}onMouseLeave(){this.isDragged=!1,this.container.classList.remove(a)}onMouseDown(e){e.preventDefault();const{container:s,options:r}=this;this.isDragged=!0,s.classList.add(a),r.vertical?(this.dragScrollY=e.pageY-s.offsetTop,this.dragScrollTop=s.scrollTop):(this.dragScrollX=e.pageX-s.offsetLeft,this.dragScrollLeft=s.scrollLeft)}onMouseMove(e){var c;if(!this.isDragged)return;e.preventDefault();const s=((c=this.options.drag)==null?void 0:c.sensitivity)??4,{container:r,options:i}=this;if(i.vertical){const d=(e.pageY-r.offsetTop-this.dragScrollY)*s;r.scrollTop=this.dragScrollTop-d}else{const d=(e.pageX-r.offsetLeft-this.dragScrollX)*s;r.scrollLeft=this.dragScrollLeft-d}}addListeners(){this.scrollListenerInstance=this.onScroll.bind(this),this.resizeListenerInstance=this.onResize.bind(this),this.container.addEventListener("scroll",this.scrollListenerInstance,{passive:!0}),window.addEventListener("resize",this.resizeListenerInstance),this.options.drag&&(this.mouseDownListenerInstance=this.onMouseDown.bind(this),this.mouseUpListenerInstance=this.onMouseUp.bind(this),this.mouseMoveListenerInstance=this.onMouseMove.bind(this),this.mouseLeaveListenerInstance=this.onMouseLeave.bind(this),this.container.addEventListener("mousedown",this.mouseDownListenerInstance,{passive:!1}),this.container.addEventListener("mouseup",this.mouseUpListenerInstance,{passive:!0}),this.container.addEventListener("mousemove",this.mouseMoveListenerInstance,{passive:!1}),this.container.addEventListener("mouseleave",this.mouseLeaveListenerInstance,{passive:!0}))}removeListeners(){this.container.removeEventListener("scroll",this.scrollListenerInstance),window.removeEventListener("resize",this.resizeListenerInstance),this.options.drag||(this.container.removeEventListener("mousedown",this.mouseDownListenerInstance),this.container.removeEventListener("mouseup",this.mouseUpListenerInstance),this.container.removeEventListener("mousemove",this.mouseMoveListenerInstance),this.container.removeEventListener("mouseleave",this.mouseLeaveListenerInstance))}children(){return this.container.children}scrollTo({left:e,top:s}){const r=this.options.reduceMotion?"auto":"smooth";this.container.scrollTo({left:e,top:s,behavior:r})}onScroll(){this.container&&(clearTimeout(this.debounceId),this.debounceId=setTimeout(this.onScrollHandler.bind(this),50))}onResize(){this.container&&this.refresh(s=>{var r,i;return(i=(r=this.options).onScroll)==null?void 0:i.call(r,s)})}onScrollHandler(){this.refresh(e=>{var s,r;return(r=(s=this.options).onScroll)==null?void 0:r.call(s,e)})}calculate(){const{container:e,options:s}=this;function r(){return s.vertical?e.scrollHeight>Math.ceil(e.scrollTop)+e.clientHeight:e.scrollWidth>Math.ceil(e.scrollLeft)+e.clientWidth}function i(){return s.vertical?!!e.scrollTop:!!e.scrollLeft}return{left:e.scrollLeft,width:e.clientWidth,scrollWidth:e.scrollWidth,hasPrev:i(),hasNext:r()}}}const L=typeof window<"u",K=L&&(window==null?void 0:window.matchMedia("(prefers-reduced-motion: reduce)").matches),f=L&&/^((?!chrome|android).)*safari/i.test(navigator==null?void 0:navigator.userAgent);let J=-1;const Q=t=>`sf-${t}--${++J}`,Z=t=>t.key==="Tab"&&t.shiftKey,k=t=>t.key==="Tab"&&!t.shiftKey,V=()=>{};function P(t,e,s){return Math.min(Math.max(t,e),s)}function z(t,e){return Math.round(t/e)*e}function v(t,e){if(t===e)return!0;const s=typeof t;if(s!==typeof e)return!1;if(s==="object"&&t!==null&&e!==null){if(t.length!==e.length||Object.getOwnPropertyNames(t).length!==Object.getOwnPropertyNames(e).length)return!1;for(const i in t)if(!v(t[i],e[i]))return!1}else return s==="function"?t.toString()===e.toString():!1;return!0}var b=(t=>(t.neutral="neutral",t.secondary="secondary",t.positive="positive",t.warning="warning",t.error="error",t))(b||{}),p=(t=>(t.temporary="temporary",t.persistent="persistent",t))(p||{}),I=(t=>(t.sm="sm",t.base="base",t.lg="lg",t))(I||{}),T=(t=>(t.primary="primary",t.secondary="secondary",t.tertiary="tertiary",t))(T||{}),x=(t=>(t.sm="sm",t.base="base",t))(x||{}),y=(t=>(t["3xs"]="3xs",t["2xs"]="2xs",t.xs="xs",t.sm="sm",t.base="base",t.lg="lg",t))(y||{}),M=(t=>(t.top="top",t.bottom="bottom",t.left="left",t.right="right",t))(M||{}),w=(t=>(t.sm="sm",t.base="base",t.lg="lg",t))(w||{}),E=(t=>(t.xs="xs",t.sm="sm",t.base="base",t.lg="lg",t.xl="xl",t["2xl"]="2xl",t["3xl"]="3xl",t["4xl"]="4xl",t))(E||{}),F=(t=>(t.primary="primary",t.secondary="secondary",t))(F||{}),N=(t=>(t.sm="sm",t.base="base",t.lg="lg",t))(N||{}),D=(t=>(t.xs="xs",t.sm="sm",t.base="base",t.lg="lg",t.xl="xl",t["2xl"]="2xl",t["3xl"]="3xl",t["4xl"]="4xl",t))(D||{}),O=(t=>(t.xs="xs",t.sm="sm",t.base="base",t.lg="lg",t.xl="xl",t["2xl"]="2xl",t["3xl"]="3xl",t["4xl"]="4xl",t))(O||{}),H=(t=>(t.xs="xs",t.sm="sm",t.base="base",t.lg="lg",t.xl="xl",t))(H||{}),W=(t=>(t.sm="sm",t.base="base",t.lg="lg",t))(W||{}),C=(t=>(t.sm="sm",t.base="base",t.lg="lg",t.xl="xl",t))(C||{}),R=(t=>(t["top-start"]="top-start",t.top="top",t["top-end"]="top-end",t["bottom-start"]="bottom-start",t.bottom="bottom",t["bottom-end"]="bottom-end",t["left-start"]="left-start",t.left="left",t["left-end"]="left-end",t["right-start"]="right-start",t.right="right",t["right-end"]="right-end",t))(R||{}),U=(t=>(t.fixed="fixed",t.absolute="absolute",t))(U||{});const m=(t,e)=>e.findIndex(s=>s===t),X=(t,e)=>{const s=m(t,e);return e[s+1]},Y=(t,e)=>{const s=m(t,e);return e[s-1]},u=({focusables:t,event:e})=>{e==null||e.preventDefault();const s=t[0];return s==null||s.focus(),s},g=({focusables:t,event:e})=>{e==null||e.preventDefault();const s=t[t.length-1];return s==null||s.focus(),s},j=(t,e)=>{const s=X(t,e);return s==null||s.focus(),s},G=(t,e)=>{const s=Y(t,e);return s==null||s.focus(),s},q=(t,e)=>m(t,e)===0,A=(t,e)=>m(t,e)===e.length-1,S=(t,e,s)=>{const r=[...s].reverse(),i=r.findIndex(c=>c===t);return r.find((c,h)=>{var d;if(h>i&&c.closest(e)&&t.closest(e)!==c.closest(e)&&((d=r[h+1])==null?void 0:d.closest(e))!==c.closest(e))return c})},tt=(t,e,s)=>{const r=s.findIndex(i=>i===t);return s.find((i,c)=>{if(c>r&&i.closest(e)&&t.closest(e)!==i.closest(e))return i})},et=({current:t,focusables:e,arrowFocusGroupSelector:s})=>{if(!t)return u({focusables:e});const r=tt(t,s,e);return t&&r?(r==null||r.focus(),r):u({focusables:e})},st=({current:t,focusables:e,arrowFocusGroupSelector:s})=>{if(!t)return u({focusables:e});const r=S(t,s,e);return t&&r?(r==null||r.focus(),r):g({focusables:e})},B=({current:t,focusables:e,event:s})=>{if(f&&(s==null||s.preventDefault()),t){if(A(t,e))return u({focusables:e,event:s});if(f||!s)return j(t,e)}else return u({focusables:e,event:s})},_=({current:t,focusables:e,event:s})=>{if(f&&(s==null||s.preventDefault()),t){if(q(t,e))return g({focusables:e,event:s});if(f||!s)return G(t,e)}else return g({focusables:e,event:s})},nt=({current:t,event:e,focusables:s,arrowFocusGroupSelector:r})=>r?et({current:t,focusables:s,arrowFocusGroupSelector:r}):B({current:t,focusables:s,event:e}),rt=({current:t,focusables:e,event:s,arrowFocusGroupSelector:r})=>r?st({current:t,focusables:e,arrowFocusGroupSelector:r}):_({current:t,focusables:e,event:s});n.SFScrollable=$,n.SfAlertType=p,n.SfAlertVariant=b,n.SfButtonSize=I,n.SfButtonVariant=T,n.SfChipSize=x,n.SfCounterSize=y,n.SfDrawerPlacement=M,n.SfIconSize=E,n.SfInputSize=w,n.SfLinkVariant=F,n.SfListItemSize=N,n.SfLoaderSize=D,n.SfPopoverPlacement=R,n.SfPopoverStrategy=U,n.SfProgressSize=O,n.SfRatingSize=H,n.SfSelectSize=W,n.SfThumbnailSize=C,n.clamp=P,n.equal=v,n.findCurrentFocusableIndex=m,n.findNextFocusable=X,n.findPrevFocusable=Y,n.focusFirstElement=u,n.focusLastElement=g,n.focusNext=nt,n.focusNextElement=j,n.focusNextOrFirst=B,n.focusPrev=rt,n.focusPrevElement=G,n.focusPrevOrLast=_,n.generateId=Q,n.isBrowser=L,n.isCurrentFirstElement=q,n.isCurrentLastElement=A,n.isReduceMotionEnabled=K,n.isSafari=f,n.isTab=k,n.isTabAndShift=Z,n.noop=V,n.roundToNearest=z,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+(function(r,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(r=typeof globalThis<"u"?globalThis:r||self,l(r["storefront-ui-shared"]={}))})(this,function(r){"use strict";var Lt=Object.defineProperty;var Et=(r,l,u)=>l in r?Lt(r,l,{enumerable:!0,configurable:!0,writable:!0,value:u}):r[l]=u;var d=(r,l,u)=>(Et(r,typeof l!="symbol"?l+"":l,u),u);var l=(t=>(t.vertical="vertical",t.horizontal="horizontal",t))(l||{}),u=(t=>(t.none="none",t.floating="floating",t.block="block",t))(u||{});const T=typeof window<"u",M=T&&(window==null?void 0:window.matchMedia("(prefers-reduced-motion: reduce)").matches);function nt(t){var e;return typeof window<"u"&&window.navigator!=null?t.test(((e=window.navigator.userAgentData)==null?void 0:e.platform)||window.navigator.platform):!1}function x(t){var e;return typeof window>"u"||window.navigator==null?!1:((e=window.navigator.userAgentData)==null?void 0:e.brands.some(n=>t.test(n.brand)))||t.test(window.navigator.userAgent)}const D=nt(/^Mac/i),F=x(/Android/i),m=x(/^((?!chrome|android).)*safari/i);let rt=-1;const st=t=>`sf-${t}--${++rt}`,it=t=>t.key==="Tab"&&t.shiftKey,ot=t=>t.key==="Tab"&&!t.shiftKey,lt=()=>{};function at(t,e,n){return Math.min(Math.max(t,e),n)}function ct(t,e){return Math.round(t/e)*e}function N(t,e){if(t===e)return!0;const n=typeof t;if(n!==typeof e)return!1;if(n==="object"&&t!==null&&e!==null){if(t.length!==e.length||Object.getOwnPropertyNames(t).length!==Object.getOwnPropertyNames(e).length)return!1;for(const i in t)if(!N(t[i],e[i]))return!1}else return n==="function"?t.toString()===e.toString():!1;return!0}const k={reduceMotion:M,direction:l.horizontal};class dt{constructor(e,n){d(this,"container");d(this,"options");d(this,"debounceId");d(this,"dragScrollX");d(this,"dragScrollLeft");d(this,"dragScrollY");d(this,"dragScrollTop");d(this,"isDraggedPreviously",!1);if(!(e instanceof HTMLElement))throw new Error(`SfScrollable: Container is not a HTMLElement! Received: ${e}`);this.container=e,this.options={...n,reduceMotion:(n==null?void 0:n.reduceMotion)??k.reduceMotion,direction:(n==null?void 0:n.direction)??k.direction},this.dragScrollX=0,this.dragScrollLeft=0,this.dragScrollY=0,this.dragScrollTop=0}get isDragged(){return this.isDraggedPreviously}set isDragged(e){var n,s;e!==this.isDraggedPreviously&&(this.isDraggedPreviously=e,(s=(n=this.options).onDragChange)==null||s.call(n,{isDragged:this.isDraggedPreviously}))}register(){const e=this.addListeners();return this.onScrollHandler(),e}addListeners(){const e=this.onScroll.bind(this),n=this.onResize.bind(this);if(this.container.addEventListener("scroll",e,{passive:!0}),this.container.addEventListener("resize",n,{passive:!0}),this.options.drag){const s=this.onMouseDown.bind(this),i=this.onMouseUp.bind(this),o=this.onMouseMove.bind(this),c=this.onMouseLeave.bind(this);return this.container.addEventListener("mousedown",s,{passive:!1}),this.container.addEventListener("mouseup",i,{passive:!0}),this.container.addEventListener("mousemove",o,{passive:!1}),this.container.addEventListener("mouseleave",c,{passive:!0}),()=>{this.container.removeEventListener("scroll",e),this.container.removeEventListener("resize",n),this.container.removeEventListener("mousedown",s),this.container.removeEventListener("mouseup",i),this.container.removeEventListener("mousemove",o),this.container.removeEventListener("mouseleave",c)}}return()=>{this.container.removeEventListener("scroll",e),this.container.removeEventListener("resize",n)}}prev(){var i,o;let e=!1;if((o=(i=this.options)==null?void 0:i.onPrev)==null||o.call(i,{preventDefault:()=>e=!0}),e)return;const{container:n,options:s}=this;s.direction===l.vertical?this.scrollTo({top:n.scrollTop-n.clientHeight}):this.scrollTo({left:n.scrollLeft-n.clientWidth})}next(){var i,o;let e=!1;if((o=(i=this.options)==null?void 0:i.onNext)==null||o.call(i,{preventDefault:()=>e=!0}),e)return;const{container:n,options:s}=this;s.direction===l.vertical?this.scrollTo({top:n.scrollTop+n.clientHeight}):this.scrollTo({left:n.scrollLeft+n.clientWidth})}scrollToIndex(e){const n=this.container.children;if(n[e]){const{container:s}=this,{top:i,left:o}=s.getBoundingClientRect(),{top:c,left:f,width:h,height:E}=n[e].getBoundingClientRect();if(this.options.direction===l.vertical){const p=c-i,y=(s.clientHeight-E)/2;this.scrollTo({top:s.scrollTop+p-y})}else{const p=f-o,y=(s.clientWidth-h)/2;this.scrollTo({left:s.scrollLeft+p-y})}}}refresh(e){e&&requestAnimationFrame(()=>{e(this.calculate())})}onMouseUp(){this.isDragged=!1}onMouseLeave(){this.isDragged=!1}onMouseDown(e){e.preventDefault();const{container:n,options:s}=this;this.isDragged=!0,s.direction===l.vertical?(this.dragScrollY=e.pageY-n.offsetTop,this.dragScrollTop=n.scrollTop):(this.dragScrollX=e.pageX-n.offsetLeft,this.dragScrollLeft=n.scrollLeft)}onMouseMove(e){if(!this.isDragged)return;e.preventDefault();const n=typeof this.options.drag=="object"?this.options.drag.sensitivity:4,{container:s,options:i}=this;if(i.direction===l.vertical){const c=(e.pageY-s.offsetTop-this.dragScrollY)*n;s.scrollTop=this.dragScrollTop-c}else{const c=(e.pageX-s.offsetLeft-this.dragScrollX)*n;s.scrollLeft=this.dragScrollLeft-c}}scrollTo({left:e,top:n}){const s=this.options.reduceMotion?"auto":"smooth";this.container.scrollTo({left:e,top:n,behavior:s})}onScroll(){this.container&&(clearTimeout(this.debounceId),this.debounceId=setTimeout(this.onScrollHandler.bind(this),50))}onResize(){this.container&&this.refresh(this.options.onScroll)}onScrollHandler(){this.refresh(this.options.onScroll)}get hasNext(){return this.options.direction===l.vertical?this.container.scrollHeight>this.container.scrollTop+this.container.clientHeight:this.container.scrollWidth>this.container.scrollLeft+this.container.clientWidth}get hasPrev(){return this.options.direction===l.vertical?!!this.container.scrollTop:!!this.container.scrollLeft}calculate(){return{left:this.container.scrollLeft,width:this.container.clientWidth,scrollWidth:this.container.scrollWidth,hasPrev:this.hasPrev,hasNext:this.hasNext}}}var H=(t=>(t.neutral="neutral",t.secondary="secondary",t.positive="positive",t.warning="warning",t.error="error",t))(H||{}),I=(t=>(t.temporary="temporary",t.persistent="persistent",t))(I||{}),W=(t=>(t.sm="sm",t.base="base",t.lg="lg",t))(W||{}),C=(t=>(t.primary="primary",t.secondary="secondary",t.tertiary="tertiary",t))(C||{}),K=(t=>(t.sm="sm",t.base="base",t))(K||{}),A=(t=>(t["3xs"]="3xs",t["2xs"]="2xs",t.xs="xs",t.sm="sm",t.base="base",t.lg="lg",t))(A||{}),j=(t=>(t.top="top",t.bottom="bottom",t.left="left",t.right="right",t))(j||{}),R=(t=>(t.sm="sm",t.base="base",t.lg="lg",t))(R||{}),X=(t=>(t.xs="xs",t.sm="sm",t.base="base",t.lg="lg",t.xl="xl",t["2xl"]="2xl",t["3xl"]="3xl",t["4xl"]="4xl",t))(X||{}),Y=(t=>(t.primary="primary",t.secondary="secondary",t))(Y||{}),G=(t=>(t.sm="sm",t.base="base",t.lg="lg",t))(G||{}),B=(t=>(t.xs="xs",t.sm="sm",t.base="base",t.lg="lg",t.xl="xl",t["2xl"]="2xl",t["3xl"]="3xl",t["4xl"]="4xl",t))(B||{}),U=(t=>(t.xs="xs",t.sm="sm",t.base="base",t.lg="lg",t.xl="xl",t["2xl"]="2xl",t["3xl"]="3xl",t["4xl"]="4xl",t))(U||{}),q=(t=>(t.xs="xs",t.sm="sm",t.base="base",t.lg="lg",t.xl="xl",t))(q||{}),$=(t=>(t.sm="sm",t.base="base",t.lg="lg",t))($||{}),O=(t=>(t.sm="sm",t.base="base",t.lg="lg",t.xl="xl",t))(O||{}),V=(t=>(t["top-start"]="top-start",t.top="top",t["top-end"]="top-end",t["bottom-start"]="bottom-start",t.bottom="bottom",t["bottom-end"]="bottom-end",t["left-start"]="left-start",t.left="left",t["left-end"]="left-end",t["right-start"]="right-start",t.right="right",t["right-end"]="right-end",t))(V||{}),J=(t=>(t.fixed="fixed",t.absolute="absolute",t))(J||{});const v=(t,e)=>e.findIndex(n=>n===t),Q=(t,e)=>{const n=v(t,e);return e[n+1]},Z=(t,e)=>{const n=v(t,e);return e[n-1]},g=({focusables:t,event:e})=>{e==null||e.preventDefault();const n=t[0];return n==null||n.focus(),n},b=({focusables:t,event:e})=>{e==null||e.preventDefault();const n=t[t.length-1];return n==null||n.focus(),n},_=(t,e)=>{const n=Q(t,e);return n==null||n.focus(),n},P=(t,e)=>{const n=Z(t,e);return n==null||n.focus(),n},z=(t,e)=>v(t,e)===0,S=(t,e)=>v(t,e)===e.length-1,ut=(t,e,n)=>{const s=[...n].reverse(),i=s.findIndex(o=>o===t);return s.find((o,c)=>{var f;if(c>i&&o.closest(e)&&t.closest(e)!==o.closest(e)&&((f=s[c+1])==null?void 0:f.closest(e))!==o.closest(e))return o})},ht=(t,e,n)=>{const s=n.findIndex(i=>i===t);return n.find((i,o)=>{if(o>s&&i.closest(e)&&t.closest(e)!==i.closest(e))return i})},ft=({current:t,focusables:e,arrowFocusGroupSelector:n})=>{if(!t)return g({focusables:e});const s=ht(t,n,e);return t&&s?(s==null||s.focus(),s):g({focusables:e})},gt=({current:t,focusables:e,arrowFocusGroupSelector:n})=>{if(!t)return g({focusables:e});const s=ut(t,n,e);return t&&s?(s==null||s.focus(),s):b({focusables:e})},tt=({current:t,focusables:e,event:n})=>{if(m&&(n==null||n.preventDefault()),t){if(S(t,e))return g({focusables:e,event:n});if(m||!n)return _(t,e)}else return g({focusables:e,event:n})},et=({current:t,focusables:e,event:n})=>{if(m&&(n==null||n.preventDefault()),t){if(z(t,e))return b({focusables:e,event:n});if(m||!n)return P(t,e)}else return b({focusables:e,event:n})},mt=({current:t,event:e,focusables:n,arrowFocusGroupSelector:s})=>s?ft({current:t,focusables:n,arrowFocusGroupSelector:s}):tt({current:t,focusables:n,event:e}),vt=({current:t,focusables:e,event:n,arrowFocusGroupSelector:s})=>s?gt({current:t,focusables:e,arrowFocusGroupSelector:s}):et({current:t,focusables:e,event:n});function pt(t){return t.mozInputSource===0&&t.isTrusted?!0:F&&t.pointerType?t.type==="click"&&t.buttons===1:t.detail===0&&!t.pointerType}function yt(t){return!(t.metaKey||!D&&t.altKey||t.ctrlKey||t.key==="Control"||t.key==="Shift"||t.key==="Meta")}const bt=()=>{let t=null;const e=new Set;let n=!1,s=!1,i=!1;const o=()=>t!=="pointer",c=(a,w)=>{for(const L of e)L(a,w)},f=a=>{s=!0,yt(a)&&(t="keyboard",c("keyboard",a))},h=a=>{t="pointer",(a.type==="mousedown"||a.type==="pointerdown")&&(s=!0,c("pointer",a))},E=a=>{pt(a)&&(s=!0,t="virtual")},p=a=>{a.target===window||a.target===document||(!s&&!i&&(t="virtual",c("virtual",a)),s=!1,i=!1)},y=()=>{s=!1,i=!0};return{isFocusVisible:o,changeHandlers:e,setupGlobalFocusEvents:()=>{if(typeof window>"u"||n)return;const a=HTMLElement.prototype.focus;HTMLElement.prototype.focus=function(){s=!0,a.apply(this,arguments)},document.addEventListener("keydown",f,!0),document.addEventListener("keyup",f,!0),document.addEventListener("click",E,!0),window.addEventListener("focus",p,!0),window.addEventListener("blur",y,!1),typeof PointerEvent<"u"?(document.addEventListener("pointerdown",h,!0),document.addEventListener("pointermove",h,!0),document.addEventListener("pointerup",h,!0)):(document.addEventListener("mousedown",h,!0),document.addEventListener("mousemove",h,!0),document.addEventListener("mouseup",h,!0)),n=!0},isKeyboardFocusEvent:(a,w,L)=>!(a&&w==="keyboard"&&L instanceof KeyboardEvent&&!["Tab","Escape"].includes(L.key))}};r.Scrollable=dt,r.SfAlertType=I,r.SfAlertVariant=H,r.SfButtonSize=W,r.SfButtonVariant=C,r.SfChipSize=K,r.SfCounterSize=A,r.SfDrawerPlacement=j,r.SfIconSize=X,r.SfInputSize=R,r.SfLinkVariant=Y,r.SfListItemSize=G,r.SfLoaderSize=B,r.SfPopoverPlacement=V,r.SfPopoverStrategy=J,r.SfProgressSize=U,r.SfRatingSize=q,r.SfScrollableButtonsPlacement=u,r.SfScrollableDirection=l,r.SfSelectSize=$,r.SfThumbnailSize=O,r.clamp=at,r.equal=N,r.findCurrentFocusableIndex=v,r.findNextFocusable=Q,r.findPrevFocusable=Z,r.focusFirstElement=g,r.focusLastElement=b,r.focusNext=mt,r.focusNextElement=_,r.focusNextOrFirst=tt,r.focusPrev=vt,r.focusPrevElement=P,r.focusPrevOrLast=et,r.focusVisibleManager=bt,r.generateId=st,r.isAndroid=F,r.isBrowser=T,r.isCurrentFirstElement=z,r.isCurrentLastElement=S,r.isMac=D,r.isReduceMotionEnabled=M,r.isSafari=m,r.isTab=ot,r.isTabAndShift=it,r.noop=lt,r.roundToNearest=ct,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

dist/scrollable/index.d.ts

@@ -1,4 +0,4 @@
-import SFScrollable from './scrollable';
+import Scrollable from './scrollable';
 export * from './types';
-export { SFScrollable };
+export { Scrollable };
 //# sourceMappingURL=index.d.ts.map

dist/scrollable/scrollable.d.ts

@@ -1,7 +0,6 @@
-import type { SfScrollableOptions, SfScrollableCallbackData } from './types';
-export default class SFScrollable {
+import { type ScrollableOptions, type SfScrollableOnScrollData } from './types';
+export default class Scrollable {
     container: HTMLElement;
     private options;
     private debounceId?;
-    private isDragged?;
     private dragScrollX;
@@ -11,16 +10,12 @@ private dragScrollLeft;
     private dragScrollTop;
-    private scrollListenerInstance;
-    private resizeListenerInstance;
-    private mouseDownListenerInstance;
-    private mouseUpListenerInstance;
-    private mouseMoveListenerInstance;
-    private mouseLeaveListenerInstance;
-    constructor(container: Element, SfScrollableOptions?: Partial<SfScrollableOptions>);
-    init(): void;
-    update(SfScrollableOptions?: Partial<SfScrollableOptions>): void;
-    destroy(): void;
+    private isDraggedPreviously;
+    get isDragged(): boolean;
+    set isDragged(newValue: boolean);
+    constructor(container: Element, ScrollableOptions?: Partial<ScrollableOptions>);
+    register(): () => void;
+    private addListeners;
     prev(): void;
     next(): void;
     scrollToIndex(index: number): void;
-    refresh(callback?: (data: SfScrollableCallbackData) => void): void;
+    refresh(callback?: (data: SfScrollableOnScrollData) => void): void;
     private onMouseUp;
@@ -30,5 +25,2 @@ private onMouseLeave;
     private onMouseMove;
-    private addListeners;
-    private removeListeners;
-    private children;
     private scrollTo;
@@ -38,4 +30,6 @@ private onScroll;
     private onScrollHandler;
+    private get hasNext();
+    private get hasPrev();
     private calculate;
 }
 //# sourceMappingURL=scrollable.d.ts.map

dist/scrollable/types.d.ts

@@ -1,11 +0,14 @@
-export type SfScrollableOptions = {
-    reduceMotion?: boolean;
-    snap?: boolean;
-    drag?: {
-        sensitivity: number;
-    };
-    vertical?: boolean;
-    onScroll?: (data: SfScrollableCallbackData) => void;
+export declare enum SfScrollableDirection {
+    vertical = "vertical",
+    horizontal = "horizontal"
+}
+export declare enum SfScrollableButtonsPlacement {
+    none = "none",
+    floating = "floating",
+    block = "block"
+}
+export type SfScrollableOnDragChangeData = {
+    isDragged: boolean;
 };
-export type SfScrollableCallbackData = {
+export type SfScrollableOnScrollData = {
     left: number;
@@ -17,2 +20,17 @@ width: number;
 };
+export type SfScrollableOnPrevData = {
+    preventDefault: () => void;
+};
+export type SfScrollableOnNextData = SfScrollableOnPrevData;
+export type ScrollableOptions = {
+    reduceMotion?: boolean;
+    drag?: {
+        sensitivity: number;
+    } | boolean;
+    direction?: `${SfScrollableDirection}`;
+    onDragChange?: (data: SfScrollableOnDragChangeData) => void;
+    onScroll?: (data: SfScrollableOnScrollData) => void;
+    onPrev?: (data: SfScrollableOnPrevData) => void;
+    onNext?: (data: SfScrollableOnNextData) => void;
+};
 //# sourceMappingURL=types.d.ts.map

dist/utils/browser.d.ts

 export declare const isBrowser: boolean;
 export declare const isReduceMotionEnabled: boolean;
+declare global {
+    interface Navigator {
+        userAgentData?: {
+            platform: string;
+            brands: {
+                brand: string;
+                version: string;
+            }[];
+        };
+    }
+}
+export declare const isMac: boolean;
+export declare const isAndroid: boolean;
 export declare const isSafari: boolean;
 //# sourceMappingURL=browser.d.ts.map

package.json

 {
   "name": "@storefront-ui/shared",
   "description": "Shared set of utils and typings used by `@storefront-ui/*` packages",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "sideEffects": false,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51618

increased by16.41%

Number of package files

69

increased by9.52%

Lines of code

714

increased by16.67%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes