@kubit-ui-web/react-components 2.0.0-beta.10 → 2.0.0-beta.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),o=require("react"),s=require("../../lib/hooks/syncRefs/syncRefs.js"),r=require("../../lib/hooks/useClassName/useClassName.js"),t=require("../../lib/hooks/useContentVisibility/useContentVisibility.js"),l=require("../../lib/hooks/useMediaDevice/useMediaDevice.js"),n=require("../../lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js"),i=require("../../lib/hooks/useScrollEffect/useScrollEffect.js"),a=require("../../lib/hooks/useSwipeDown/useSwipeDown.js"),u=require("../portal/portal.js"),c=require("./modalStandAlone.js"),d=o.forwardRef(({additionalClasses:d,disableFocusableContent:f=!1,onClose:p,popover:S,portalId:b,variant:h,...j},C)=>{const m=r.useClassName({additionalClassNames:d,component:"MODAL",variant:h}),q=l.useMediaDevice(),y=o.useRef(null),{scrollableRef:R,shadowRef:v}=i.useScrollEffect({shadowStyles:"none"}),{handleContentVisibility:w}=t.useContentVisibility({}),{setDragIconRef:D}=a.useSwipeDown(void 0,()=>p?.()),{handleScrollDetection:x,hasScroll:k}=n.useScrollDetectionWithAutoFocus({disabled:f,parentElementRef:y}),A=o.useCallback(e=>{y.current=e,s.syncInnerAndForwardedRef({forwardedRef:C,innerRef:y});const o=y.current?.querySelector("[data-modal-header]"),r=y.current?.querySelector("[data-modal-content]"),t=y.current?.querySelector("[data-modal-draggable-icon]");v(o),w({container:y.current,content:r}),R(r),x(r),D(t)},[]),M=e.jsxRuntimeExports.jsx(c.ModalStandAlone,{...j,ref:A,contentHasScroll:k,cssClasses:m,device:q,popover:{...S},onPopoverCloseInternally:()=>{p?.()}});return b?e.jsxRuntimeExports.jsx(u.Portal,{wrapperId:b,children:M}):M});exports.ModalControlled=d;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),o=require("react"),s=require("../../lib/hooks/syncRefs/syncRefs.js"),r=require("../../lib/hooks/useClassName/useClassName.js"),t=require("../../lib/hooks/useContentVisibility/useContentVisibility.js"),l=require("../../lib/hooks/useMediaDevice/useMediaDevice.js"),n=require("../../lib/hooks/useScrollDetection/useScrollDetection.js"),i=require("../../lib/hooks/useScrollEffect/useScrollEffect.js"),a=require("../../lib/hooks/useSwipeDown/useSwipeDown.js"),u=require("../portal/portal.js"),c=require("./modalStandAlone.js"),d=o.forwardRef(({additionalClasses:d,disableFocusableContent:f=!1,onClose:S,popover:p,portalId:b,variant:j,...C},h)=>{const q=r.useClassName({additionalClassNames:d,component:"MODAL",variant:j}),y=l.useMediaDevice(),m=o.useRef(null),{scrollableRef:w,shadowRef:D}=i.useScrollEffect({shadowStyles:"none"}),{handleContentVisibility:R}=t.useContentVisibility({}),{setDragIconRef:v}=a.useSwipeDown({onClose:S}),{handleScrollDetection:x,hasScroll:k}=n.useScrollDetection({autoFocus:!f}),M=o.useCallback(e=>{m.current=e,s.syncInnerAndForwardedRef({forwardedRef:h,innerRef:m});const o=m.current?.querySelector("[data-modal-header]"),r=m.current?.querySelector("[data-modal-content]"),t=m.current?.querySelector("[data-modal-draggable-icon]");D(o),R({container:m.current,content:r}),w(r),x(r),t&&v(t)},[]),g=e.jsxRuntimeExports.jsx(c.ModalStandAlone,{...C,ref:M,contentHasScroll:k,cssClasses:q,device:y,popover:{...p},onPopoverCloseInternally:()=>{S?.()}});return b?e.jsxRuntimeExports.jsx(u.Portal,{wrapperId:b,children:g}):g});exports.ModalControlled=d;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../_virtual/jsx-runtime.js"),e=require("react"),t=require("../../lib/hooks/useClassName/useClassName.js"),s=require("../../lib/hooks/useMediaDevice/useMediaDevice.js"),l=require("../../lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js"),i=require("./hooks/useTooltipAsModal.js"),a=require("./hooks/useTooltipAsModalAriaLabel.js"),r=require("./tooltipStandAlone.js");exports.TooltipControlled=({additionalClasses:u,tooltipAriaLabel:n,tooltipAsModal:p,tooltipAsModal:c=!1,tooltipRef:d,variant:A,...M})=>{const T=t.useClassName({additionalClassNames:u,component:"TOOLTIP",variant:A}),j=s.useMediaDevice(),m=e.useRef(null),h=a.useTooltipAsModalAriaLabel(m),S=i.useTooltipAsModal({propTooltipAsModal:p,styleTooltipAsModal:c}),{handleScrollDetection:b,hasScroll:v}=l.useScrollDetectionWithAutoFocus({parentElementRef:m});return e.useImperativeHandle(d,()=>m.current,[]),o.jsxRuntimeExports.jsx(r.TooltipStandAlone,{...M,contentHasScroll:v,contentRef:b,cssClasses:T,mediaDevice:j,tooltipAriaLabel:n??h,tooltipAsModal:i.useTooltipAsModal({propTooltipAsModal:S,styleTooltipAsModal:c}),tooltipRef:m})};
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../_virtual/jsx-runtime.js"),e=require("react"),l=require("../../lib/hooks/useClassName/useClassName.js"),s=require("../../lib/hooks/useMediaDevice/useMediaDevice.js"),t=require("../../lib/hooks/useScrollDetection/useScrollDetection.js"),i=require("./hooks/useTooltipAsModal.js"),a=require("./hooks/useTooltipAsModalAriaLabel.js"),r=require("./tooltipStandAlone.js");exports.TooltipControlled=({additionalClasses:u,tooltipAriaLabel:n,tooltipAsModal:p,tooltipAsModal:d=!1,tooltipRef:c,variant:A,...M})=>{const T=l.useClassName({additionalClassNames:u,component:"TOOLTIP",variant:A}),j=s.useMediaDevice(),m=e.useRef(null),S=a.useTooltipAsModalAriaLabel(m),b=i.useTooltipAsModal({propTooltipAsModal:p,styleTooltipAsModal:d}),{handleScrollDetection:v,hasScroll:q}=t.useScrollDetection({autoFocus:!0});return e.useImperativeHandle(c,()=>m.current,[]),o.jsxRuntimeExports.jsx(r.TooltipStandAlone,{...M,contentHasScroll:q,contentRef:v,cssClasses:T,mediaDevice:j,tooltipAriaLabel:n??S,tooltipAsModal:i.useTooltipAsModal({propTooltipAsModal:b,styleTooltipAsModal:d}),tooltipRef:m})};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),o=require("react"),t=require("../../lib/hooks/useClassName/useClassName.js"),r=require("../../lib/hooks/useMediaDevice/useActiveBreakpoints.js"),s=require("../../lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js"),i=require("../../lib/hooks/useSwipeDown/useSwipeDown.js"),l=require("../../lib/hooks/useTrapFocus/useTrapFocus.js"),n=require("../../lib/utils/keyboard/keyboard.js"),a=require("./hooks/useTooltip.js"),u=require("./hooks/useTooltipAsModal.js"),p=require("./tooltipStandAlone.js"),c=o.forwardRef(function({additionalClasses:c,align:d,closeIcon:T,onOpenClose:v,popover:f,tooltipAriaLabel:g,tooltipAsModal:C,variant:b,...k},A){const D=t.useClassName({additionalClassNames:c,component:"TOOLTIP",variant:b}),{device:R,isDesktop:h,isMobile:j,isTablet:M}=r.useActiveBreakpoints(),S=h||M,m=o.useRef(null),q=o.useRef(null),w=u.useTooltipAsModal({propTooltipAsModal:C,styleTooltipAsModal:C});o.useImperativeHandle(A,()=>m.current);const{allowFocusOpenTooltip:F,hideTooltip:y,open:x,placement:I,showTooltip:O}=a.useTooltip({additionalClasses:c,align:d||"top",labelRef:m,onOpenClose:v,tooltipAsModal:w,tooltipRef:q,variant:b}),{handleScrollDetection:W,hasScroll:P}=s.useScrollDetectionWithAutoFocus({parentElementRef:q}),E=o.useRef(!1),{setDragIconRef:L,setPopoverRef:N}=i.useSwipeDown(void 0,y);return l.useTrapFocus({ref:q,trapFocus:x&&w}),e.jsxRuntimeExports.jsx(p.TooltipStandAlone,{...k,align:I,contentHasScroll:P,contentRef:W,cssClasses:D,dragIconRef:L,labelRef:m,mediaDevice:R,popover:{...f,popoverContainerRef:N},popoverOpen:x,tooltipAriaLabel:g,tooltipAsModal:w,tooltipRef:q,onCloseIconClick:e=>{T?.onClick?.(e),y()},onPopoverCloseInternally:()=>{f?.onClose?.(),y()},onTooltipFocus:e=>{w||(e.preventDefault(),e.stopPropagation())},onTriggerClick:e=>{if(S){if(!w)return;return x?void(q.current?.contains(e.target)||y()):void O()}x?q.current?.contains(e.target)||y():O()},onTriggerKeyDown:e=>{n.isKeyEnterPressed(e.key)&&!x&&(O(),e.preventDefault())},onTriggerMouseDown:()=>{E.current=!0},onTriggerMouseUp:()=>{E.current=!1},onWrapperBlur:e=>{w||e.currentTarget.contains(e.relatedTarget)||y()},onWrapperFocus:()=>{E.current||w||!F.current||j||O()},onWrapperMouseEnter:()=>{!w&&S&&O()},onWrapperMouseLeave:()=>{!w&&S&&y()}})});exports.Tooltip=c,exports.TooltipUnControlled=c;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),o=require("react"),r=require("../../lib/hooks/useClassName/useClassName.js"),s=require("../../lib/hooks/useMediaDevice/useActiveBreakpoints.js"),t=require("../../lib/hooks/useScrollDetection/useScrollDetection.js"),l=require("../../lib/hooks/useSwipeDown/useSwipeDown.js"),i=require("../../lib/hooks/useTrapFocus/useTrapFocus.js"),n=require("../../lib/utils/keyboard/keyboard.js"),a=require("./hooks/useTooltip.js"),u=require("./hooks/useTooltipAsModal.js"),p=require("./tooltipStandAlone.js"),c=o.forwardRef(function({additionalClasses:c,align:d,closeIcon:T,onOpenClose:v,popover:f,tooltipAriaLabel:g,tooltipAsModal:C,variant:b,...k},D){const j=r.useClassName({additionalClassNames:c,component:"TOOLTIP",variant:b}),{device:M,isDesktop:R,isMobile:A,isTablet:S}=s.useActiveBreakpoints(),h=R||S,m=o.useRef(null),q=o.useRef(null),w=u.useTooltipAsModal({propTooltipAsModal:C,styleTooltipAsModal:C});o.useImperativeHandle(D,()=>m.current);const{allowFocusOpenTooltip:y,hideTooltip:F,open:x,placement:I,showTooltip:O}=a.useTooltip({additionalClasses:c,align:d||"top",labelRef:m,onOpenClose:v,tooltipAsModal:w,tooltipRef:q,variant:b}),{handleScrollDetection:P,hasScroll:L}=t.useScrollDetection({autoFocus:!0}),N=o.useRef(!1),{setDragIconRef:W,setPopoverRef:B}=l.useSwipeDown({onClose:F});return i.useTrapFocus({ref:q,trapFocus:x&&w}),e.jsxRuntimeExports.jsx(p.TooltipStandAlone,{...k,align:I,contentHasScroll:L,contentRef:P,cssClasses:j,dragIconRef:W,labelRef:m,mediaDevice:M,popover:{...f,popoverContainerRef:B},popoverOpen:x,tooltipAriaLabel:g,tooltipAsModal:w,tooltipRef:q,onCloseIconClick:e=>{T?.onClick?.(e),F()},onPopoverCloseInternally:()=>{f?.onClose?.(),F()},onTooltipFocus:e=>{w||(e.preventDefault(),e.stopPropagation())},onTriggerClick:e=>{if(h){if(!w)return;return x?void(q.current?.contains(e.target)||F()):void O()}x?q.current?.contains(e.target)||F():O()},onTriggerKeyDown:e=>{n.isKeyEnterPressed(e.key)&&!x&&(O(),e.preventDefault())},onTriggerMouseDown:()=>{N.current=!0},onTriggerMouseUp:()=>{N.current=!1},onWrapperBlur:e=>{w||e.currentTarget.contains(e.relatedTarget)||F()},onWrapperFocus:()=>{N.current||w||!y.current||A||O()},onWrapperMouseEnter:()=>{!w&&h&&O()},onWrapperMouseLeave:()=>{!w&&h&&F()}})});exports.Tooltip=c,exports.TooltipUnControlled=c;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useClickOutside=(t,r,u=[])=>{e.useEffect(()=>{function e(e){const n=e.composedPath(),o=t.current&&n.includes(t.current),s=u.some(e=>e&&n.includes(e));!t.current||o||s||r(e)}return document.addEventListener("mouseup",e),()=>{document.removeEventListener("mouseup",e)}},[t,r,u])};
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useClickOutside=(t,r,u=[])=>{const n=e.useRef(r);e.useEffect(()=>{n.current=r},[r]),e.useEffect(()=>{function e(e){const r=e.composedPath(),c=t.current&&r.includes(t.current),s=u.some(e=>e&&r.includes(e));!t.current||c||s||n.current(e)}return document.addEventListener("mouseup",e,!0),()=>{document.removeEventListener("mouseup",e,!0)}},[t,u])};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../types/states/states.js");exports.useManageState=({active:n=!1,disabled:r=!1,loading:s=!1,ref:i,states:u})=>{const[S,E]=e.useState(!1),[o,d]=e.useState(!1),a=e.useRef(null);e.useImperativeHandle(i,()=>a?.current,[]);const c=()=>{E(!0)},T=()=>{E(!1)},l=()=>{d(!0)},v=()=>{d(!1)},A=()=>{d(!1)};return{setRef:e.useCallback(e=>{e?(a.current=e,u?.includes(t.STATES.PRESSED)&&(a?.current?.addEventListener("pointerdown",l),a?.current?.addEventListener("pointercancel",v),window.addEventListener("pointerup",A)),(()=>{if("undefined"!=typeof window&&window?.matchMedia)return!window.matchMedia("(hover: none)").matches;return!0})()&&u?.includes(t.STATES.HOVER)&&(a?.current?.addEventListener("mouseenter",c),a?.current?.addEventListener("mouseleave",T))):(a?.current?.removeEventListener("mouseenter",c),a?.current?.removeEventListener("mouseleave",T),a?.current?.removeEventListener("pointerdown",l),a?.current?.removeEventListener("pointercancel",v),window.removeEventListener("pointerup",A),a.current=e)},[]),states:e.useMemo(()=>u?.includes(t.STATES.LOADING)&&s?t.STATES.LOADING:u?.includes(t.STATES.DISABLED)&&r?t.STATES.DISABLED:u?.includes(t.STATES.ACTIVE)&&n?t.STATES.ACTIVE:u?.includes(t.STATES.PRESSED)&&o?t.STATES.PRESSED:u?.includes(t.STATES.HOVER)&&S?t.STATES.HOVER:t.STATES.DEFAULT,[u,r,s,n,S,o])}};
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../types/states/states.js");exports.useManageState=({active:n=!1,disabled:r=!1,loading:s=!1,ref:u,states:i})=>{const[o,a]=e.useState(!1),[c,E]=e.useState(!1),S=e.useRef(null);e.useImperativeHandle(u,()=>S?.current,[]);const d=e.useCallback(()=>{if("undefined"!=typeof window&&window?.matchMedia){return!window.matchMedia("(hover: none)").matches}return!0},[]),l=e.useCallback(()=>a(!0),[]),v=e.useCallback(()=>a(!1),[]),T=e.useCallback(()=>E(!0),[]),m=e.useCallback(()=>E(!1),[]),A=e.useCallback(()=>E(!1),[]),L=e.useCallback(e=>{S.current&&(S.current.removeEventListener("mouseenter",l),S.current.removeEventListener("mouseleave",v),S.current.removeEventListener("pointerdown",T),S.current.removeEventListener("pointercancel",m),window.removeEventListener("pointerup",A)),S.current=e,e&&(i?.includes(t.STATES.PRESSED)&&(e.addEventListener("pointerdown",T),e.addEventListener("pointercancel",m),window.addEventListener("pointerup",A)),d()&&i?.includes(t.STATES.HOVER)&&(e.addEventListener("mouseenter",l),e.addEventListener("mouseleave",v)))},[i,l,v,T,m,A,d]);e.useEffect(()=>()=>{S.current&&(S.current.removeEventListener("mouseenter",l),S.current.removeEventListener("mouseleave",v),S.current.removeEventListener("pointerdown",T),S.current.removeEventListener("pointercancel",m),window.removeEventListener("pointerup",A))},[l,v,T,m,A]);return{setRef:L,states:e.useMemo(()=>i?.includes(t.STATES.LOADING)&&s?t.STATES.LOADING:i?.includes(t.STATES.DISABLED)&&r?t.STATES.DISABLED:i?.includes(t.STATES.ACTIVE)&&n?t.STATES.ACTIVE:i?.includes(t.STATES.PRESSED)&&c?t.STATES.PRESSED:i?.includes(t.STATES.HOVER)&&o?t.STATES.HOVER:t.STATES.DEFAULT,[i,r,s,n,o,c])}};
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../../utils/resizeObserver/resizeObserver.js"),s=require("../../utils/scroll/hasScroll.js");exports.useScrollDetection=({autoFocus:t=!1}={})=>{const[c,o]=e.useState(!1),u=e.useRef(),l=e.useRef(!1);return{handleScrollDetection:e.useCallback(e=>{if(e){const c=e=>{const r=s.hasScroll(e);o(r),t&&r&&!l.current&&(e.focus(),l.current=!0)};c(e),u.current=new r.ResizeObserver(()=>{c(e)}),u.current.observe(e)}else u.current?.disconnect()},[t]),hasScroll:c}};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("./utils/scrollPercentage.js");exports.useScrollEffect=({conditional:t=!0,scrollCallback:c,shadowStyles:s,shadowVisible:l=1})=>{const n=e.useRef(null),u=e.useRef(null),a=e.useRef(null),o=e.useRef(0),i=e.useRef(0),p=e.useCallback(()=>{if(!n.current)return;const e=r.scrollPercentage(n.current,1.25);if(u.current){const r=e*o.current/100,t=e*i.current/100;[{cssPropertyName:"min-height",cssPropertyValue:`calc(${o.current}px - ${r}px)`},{cssPropertyName:"height",cssPropertyValue:`calc(${o.current}px - ${r}px)`},{cssPropertyName:"min-width",cssPropertyValue:`calc(${i.current}px - ${t}px)`},{cssPropertyName:"width",cssPropertyValue:`calc(${i.current}px - ${t}px)`}].forEach(({cssPropertyName:e,cssPropertyValue:r})=>{u.current?.style.setProperty(e,r)})}a.current&&(e>l?a.current.classList.add(...s.split(" ")):a.current.classList.remove(...s.split(" ")))},[t,s,l]),d=e.useCallback(e=>{e?(n.current=e,p(),n.current?.addEventListener("scroll",e=>{p(),c?.(e)})):(n.current?.removeEventListener("scroll",e=>{p(),c?.(e)}),n.current=null)},[p,c]);return{resizeRef:e.useCallback(e=>{const r=()=>{u.current&&(o.current=u.current.clientHeight,i.current=u.current.clientWidth)};e?(u.current=e,u.current?.addEventListener("load",r)):(u.current?.removeEventListener("load",r),u.current=null)},[]),scrollableRef:d,shadowRef:e.useCallback(e=>{a.current=e||null},[])}};
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("./utils/scrollPercentage.js");exports.useScrollEffect=({conditional:t=!0,scrollCallback:c,shadowStyles:n,shadowVisible:u=1})=>{const s=e.useRef(null),l=e.useRef(null),a=e.useRef(null),o=e.useRef(0),i=e.useRef(0),p=e.useRef(null),f=e.useRef(null),m=e.useRef(null),d=e.useCallback(()=>{if(!t||!s.current)return;const e=r.scrollPercentage(s.current,1.25);if(l.current&&o.current>0){const r=e*o.current/100,t=e*i.current/100;[{cssPropertyName:"min-height",cssPropertyValue:`calc(${o.current}px - ${r}px)`},{cssPropertyName:"height",cssPropertyValue:`calc(${o.current}px - ${r}px)`},{cssPropertyName:"min-width",cssPropertyValue:`calc(${i.current}px - ${t}px)`},{cssPropertyName:"width",cssPropertyValue:`calc(${i.current}px - ${t}px)`}].forEach(({cssPropertyName:e,cssPropertyValue:r})=>{l.current?.style.setProperty(e,r)})}if(a.current&&n){const r=n.split(" ");e>u?a.current.classList.add(...r):a.current.classList.remove(...r)}},[t,n,u]),y=e.useCallback(e=>{null!==p.current&&cancelAnimationFrame(p.current),p.current=requestAnimationFrame(()=>{d(),c?.(e),p.current=null})},[d,c]);e.useEffect(()=>{f.current=y},[y]);const P=e.useCallback(e=>{s.current&&f.current&&s.current.removeEventListener("scroll",f.current),s.current=e,e&&f.current&&(e.addEventListener("scroll",f.current),d())},[d]),h=e.useCallback(e=>{const r=()=>{l.current&&(o.current=l.current.clientHeight,i.current=l.current.clientWidth)};l.current&&m.current&&l.current.removeEventListener("load",m.current),m.current=r,l.current=e,e&&(e.addEventListener("load",r),r())},[]),v=e.useCallback(e=>{a.current=e},[]);return e.useEffect(()=>()=>{null!==p.current&&cancelAnimationFrame(p.current),s.current&&f.current&&s.current.removeEventListener("scroll",f.current),l.current&&m.current&&l.current.removeEventListener("load",m.current)},[]),{resizeRef:h,scrollableRef:P,shadowRef:v}};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("./utils/convertDurationToNumber.js");exports.useSwipeDown=(r,n)=>{const u=e.useRef(null),o=e.useRef(null),c=e.useCallback(e=>{u.current=e||null},[]),s=e.useRef(0),i=e.useRef(0),l=e.useRef(0),v=e.useRef(!1),a=e=>{const t=u?.current;t&&(e.preventDefault?.(),t.style.removeProperty("transition"),"touchstart"===e.type?i.current=e.touches[0].clientY:i.current=e.clientY,v.current=!0,l.current=null)},m=e=>{const t=u?.current;if(!v.current||!t)return;"touchmove"===e.type&&null!==l?l.current=e.touches[0].clientY:l.current=e.clientY;const r=i.current-l.current;l.current<i.current||(t.style.bottom=`${s.current+r}px`)},d=1e3*((t.convertDurationToNumber(r?.exitDuration)||t.convertDurationToNumber(r?.duration)||0)+(t.convertDurationToNumber(r?.delay)||0)),p=async()=>{const e=u?.current;if(!e||!l.current)return;if(v.current=!1,e.style.setProperty("transition",`bottom ${d}ms linear`),l.current<i.current+30)return void(e.style.bottom="0px");const t=s.current+e.scrollHeight;var r;e.style.bottom=`-${t}px`,await(r=d,new Promise(e=>setTimeout(e,r))),n?.()};return{setDragIconRef:e.useCallback(e=>{e?(o.current=e,o?.current?.addEventListener("mousedown",a),o?.current?.addEventListener("mousemove",m),o?.current?.addEventListener("mouseup",p),o?.current?.addEventListener("touchstart",a),o?.current?.addEventListener("touchmove",m),o?.current?.addEventListener("touchend",p)):(o?.current?.removeEventListener("mousedown",a),o?.current?.removeEventListener("mousemove",m),o?.current?.removeEventListener("mouseup",p),o?.current?.removeEventListener("touchstart",a),o?.current?.removeEventListener("touchmove",m),o?.current?.removeEventListener("touchend",p),o.current=null)},[]),setPopoverRef:c}};
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("./utils/convertDurationToNumber.js");exports.useSwipeDown=({animationOptions:r,distanceThreshold:n=30,enabled:o=!0,onClose:u}={})=>{const c=e.useRef(null),s=e.useRef(null),v=e.useRef(0),i=e.useRef(0),a=e.useRef(null),l=e.useRef(!1),m=e.useRef(null),d=1e3*((t.convertDurationToNumber(r?.exitDuration)||t.convertDurationToNumber(r?.duration)||0)+(t.convertDurationToNumber(r?.delay)||0)),f=e.useCallback(e=>new Promise(t=>{m.current=setTimeout(t,e)}),[]),M=e.useCallback(e=>{if(!o)return;const t=c?.current;t&&(e.preventDefault?.(),t.style.removeProperty("transition"),"touchstart"===e.type?i.current=e.touches[0].clientY:i.current=e.clientY,l.current=!0,a.current=null)},[o]),E=e.useCallback(e=>{if(!o)return;const t=c?.current;if(!l.current||!t)return;"touchmove"===e.type?a.current=e.touches[0].clientY:a.current=e.clientY;const r=i.current-a.current;a.current<i.current||(t.style.bottom=`${v.current+r}px`)},[o]),L=e.useCallback(async()=>{if(!o)return;const e=c?.current;if(!e||null===a.current)return;if(l.current=!1,e.style.setProperty("transition",`bottom ${d}ms linear`),a.current<i.current+n)return void(e.style.bottom="0px");const t=v.current+e.scrollHeight;e.style.bottom=`-${t}px`,await f(d),u?.()},[o,d,n,u,f]),b=e.useRef({currentMove:E,endMove:L,startMove:M});e.useEffect(()=>{b.current={currentMove:E,endMove:L,startMove:M}},[E,L,M]);const p=e.useCallback(e=>{c.current=e},[]),h=e.useCallback(e=>{if(s.current){const e=b.current;s.current.removeEventListener("mousedown",e.startMove),s.current.removeEventListener("mousemove",e.currentMove),s.current.removeEventListener("mouseup",e.endMove),s.current.removeEventListener("touchstart",e.startMove),s.current.removeEventListener("touchmove",e.currentMove),s.current.removeEventListener("touchend",e.endMove)}if(s.current=e,e&&o){const t=b.current;e.addEventListener("mousedown",t.startMove),e.addEventListener("mousemove",t.currentMove),e.addEventListener("mouseup",t.endMove),e.addEventListener("touchstart",t.startMove),e.addEventListener("touchmove",t.currentMove),e.addEventListener("touchend",t.endMove)}},[o]);return e.useEffect(()=>()=>{if(m.current&&clearTimeout(m.current),s.current){const e=b.current;s.current.removeEventListener("mousedown",e.startMove),s.current.removeEventListener("mousemove",e.currentMove),s.current.removeEventListener("mouseup",e.endMove),s.current.removeEventListener("touchstart",e.startMove),s.current.removeEventListener("touchmove",e.currentMove),s.current.removeEventListener("touchend",e.endMove)}},[]),{setDragIconRef:h,setPopoverRef:p}};
@@ -1 +1 @@
1
- import{j as o}from"../../_virtual/jsx-runtime.js";import{forwardRef as e,useRef as t,useCallback as r}from"react";import{syncInnerAndForwardedRef as s}from"../../lib/hooks/syncRefs/syncRefs.js";import{useClassName as l}from"../../lib/hooks/useClassName/useClassName.js";import{useContentVisibility as i}from"../../lib/hooks/useContentVisibility/useContentVisibility.js";import{useMediaDevice as n}from"../../lib/hooks/useMediaDevice/useMediaDevice.js";import{useScrollDetectionWithAutoFocus as a}from"../../lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js";import{useScrollEffect as c}from"../../lib/hooks/useScrollEffect/useScrollEffect.js";import{useSwipeDown as m}from"../../lib/hooks/useSwipeDown/useSwipeDown.js";import{Portal as d}from"../portal/portal.js";import{ModalStandAlone as u}from"./modalStandAlone.js";const p=e(({additionalClasses:e,disableFocusableContent:p=!1,onClose:f,popover:h,portalId:b,variant:j,...S},C)=>{const v=l({additionalClassNames:e,component:"MODAL",variant:j}),y=n(),D=t(null),{scrollableRef:w,shadowRef:R}=c({shadowStyles:"none"}),{handleContentVisibility:k}=i({}),{setDragIconRef:x}=m(void 0,()=>f?.()),{handleScrollDetection:A,hasScroll:I}=a({disabled:p,parentElementRef:D}),g=r(o=>{D.current=o,s({forwardedRef:C,innerRef:D});const e=D.current?.querySelector("[data-modal-header]"),t=D.current?.querySelector("[data-modal-content]"),r=D.current?.querySelector("[data-modal-draggable-icon]");R(e),k({container:D.current,content:t}),w(t),A(t),x(r)},[]),q=/* @__PURE__ */o.jsx(u,{...S,ref:g,contentHasScroll:I,cssClasses:v,device:y,popover:{...h},onPopoverCloseInternally:()=>{f?.()}});return b?/* @__PURE__ */o.jsx(d,{wrapperId:b,children:q}):q});export{p as ModalControlled};
1
+ import{j as o}from"../../_virtual/jsx-runtime.js";import{forwardRef as e,useRef as r,useCallback as s}from"react";import{syncInnerAndForwardedRef as t}from"../../lib/hooks/syncRefs/syncRefs.js";import{useClassName as l}from"../../lib/hooks/useClassName/useClassName.js";import{useContentVisibility as n}from"../../lib/hooks/useContentVisibility/useContentVisibility.js";import{useMediaDevice as a}from"../../lib/hooks/useMediaDevice/useMediaDevice.js";import{useScrollDetection as i}from"../../lib/hooks/useScrollDetection/useScrollDetection.js";import{useScrollEffect as c}from"../../lib/hooks/useScrollEffect/useScrollEffect.js";import{useSwipeDown as m}from"../../lib/hooks/useSwipeDown/useSwipeDown.js";import{Portal as d}from"../portal/portal.js";import{ModalStandAlone as u}from"./modalStandAlone.js";const p=e(({additionalClasses:e,disableFocusableContent:p=!1,onClose:f,popover:b,portalId:h,variant:j,...S},C)=>{const y=l({additionalClassNames:e,component:"MODAL",variant:j}),v=a(),D=r(null),{scrollableRef:w,shadowRef:k}=c({shadowStyles:"none"}),{handleContentVisibility:R}=n({}),{setDragIconRef:x}=m({onClose:f}),{handleScrollDetection:I,hasScroll:g}=i({autoFocus:!p}),q=s(o=>{D.current=o,t({forwardedRef:C,innerRef:D});const e=D.current?.querySelector("[data-modal-header]"),r=D.current?.querySelector("[data-modal-content]"),s=D.current?.querySelector("[data-modal-draggable-icon]");k(e),R({container:D.current,content:r}),w(r),I(r),s&&x(s)},[]),M=/* @__PURE__ */o.jsx(u,{...S,ref:q,contentHasScroll:g,cssClasses:y,device:v,popover:{...b},onPopoverCloseInternally:()=>{f?.()}});return h?/* @__PURE__ */o.jsx(d,{wrapperId:h,children:M}):M});export{p as ModalControlled};
@@ -1 +1 @@
1
- import{j as o}from"../../_virtual/jsx-runtime.js";import{useRef as t,useImperativeHandle as s}from"react";import{useClassName as l}from"../../lib/hooks/useClassName/useClassName.js";import{useMediaDevice as e}from"../../lib/hooks/useMediaDevice/useMediaDevice.js";import{useScrollDetectionWithAutoFocus as i}from"../../lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js";import{useTooltipAsModal as a}from"./hooks/useTooltipAsModal.js";import{useTooltipAsModalAriaLabel as r}from"./hooks/useTooltipAsModalAriaLabel.js";import{TooltipStandAlone as p}from"./tooltipStandAlone.js";const n=({additionalClasses:n,tooltipAriaLabel:m,tooltipAsModal:c,tooltipAsModal:d=!1,tooltipRef:u,variant:A,...f})=>{const M=l({additionalClassNames:n,component:"TOOLTIP",variant:A}),j=e(),h=t(null),T=r(h),b=a({propTooltipAsModal:c,styleTooltipAsModal:d}),{handleScrollDetection:v,hasScroll:D}=i({parentElementRef:h});return s(u,()=>h.current,[]),/* @__PURE__ */o.jsx(p,{...f,contentHasScroll:D,contentRef:v,cssClasses:M,mediaDevice:j,tooltipAriaLabel:m??T,tooltipAsModal:a({propTooltipAsModal:b,styleTooltipAsModal:d}),tooltipRef:h})};export{n as TooltipControlled};
1
+ import{j as o}from"../../_virtual/jsx-runtime.js";import{useRef as t,useImperativeHandle as s}from"react";import{useClassName as l}from"../../lib/hooks/useClassName/useClassName.js";import{useMediaDevice as e}from"../../lib/hooks/useMediaDevice/useMediaDevice.js";import{useScrollDetection as i}from"../../lib/hooks/useScrollDetection/useScrollDetection.js";import{useTooltipAsModal as a}from"./hooks/useTooltipAsModal.js";import{useTooltipAsModalAriaLabel as r}from"./hooks/useTooltipAsModalAriaLabel.js";import{TooltipStandAlone as p}from"./tooltipStandAlone.js";const m=({additionalClasses:m,tooltipAriaLabel:n,tooltipAsModal:c,tooltipAsModal:d=!1,tooltipRef:u,variant:A,...f})=>{const M=l({additionalClassNames:m,component:"TOOLTIP",variant:A}),j=e(),T=t(null),h=r(T),b=a({propTooltipAsModal:c,styleTooltipAsModal:d}),{handleScrollDetection:v,hasScroll:D}=i({autoFocus:!0});return s(u,()=>T.current,[]),/* @__PURE__ */o.jsx(p,{...f,contentHasScroll:D,contentRef:v,cssClasses:M,mediaDevice:j,tooltipAriaLabel:n??h,tooltipAsModal:a({propTooltipAsModal:b,styleTooltipAsModal:d}),tooltipRef:T})};export{m as TooltipControlled};
@@ -1 +1 @@
1
- import{j as o}from"../../_virtual/jsx-runtime.js";import{forwardRef as e,useRef as t,useImperativeHandle as r}from"react";import{useClassName as s}from"../../lib/hooks/useClassName/useClassName.js";import{useActiveBreakpoints as i}from"../../lib/hooks/useMediaDevice/useActiveBreakpoints.js";import{useScrollDetectionWithAutoFocus as l}from"../../lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js";import{useSwipeDown as n}from"../../lib/hooks/useSwipeDown/useSwipeDown.js";import{useTrapFocus as a}from"../../lib/hooks/useTrapFocus/useTrapFocus.js";import{isKeyEnterPressed as p}from"../../lib/utils/keyboard/keyboard.js";import{useTooltip as c}from"./hooks/useTooltip.js";import{useTooltipAsModal as u}from"./hooks/useTooltipAsModal.js";import{TooltipStandAlone as m}from"./tooltipStandAlone.js";const f=e(function({additionalClasses:e,align:f,closeIcon:d,onOpenClose:v,popover:T,tooltipAriaLabel:g,tooltipAsModal:k,variant:C,...b},h){const j=s({additionalClassNames:e,component:"TOOLTIP",variant:C}),{device:D,isDesktop:A,isMobile:M,isTablet:R}=i(),w=A||R,F=t(null),S=t(null),y=u({propTooltipAsModal:k,styleTooltipAsModal:k});r(h,()=>F.current);const{allowFocusOpenTooltip:I,hideTooltip:O,open:W,placement:L,showTooltip:P}=c({additionalClasses:e,align:f||"top",labelRef:F,onOpenClose:v,tooltipAsModal:y,tooltipRef:S,variant:C}),{handleScrollDetection:x,hasScroll:N}=l({parentElementRef:S}),B=t(!1),{setDragIconRef:E,setPopoverRef:H}=n(void 0,O);return a({ref:S,trapFocus:W&&y}),/* @__PURE__ */o.jsx(m,{...b,align:L,contentHasScroll:N,contentRef:x,cssClasses:j,dragIconRef:E,labelRef:F,mediaDevice:D,popover:{...T,popoverContainerRef:H},popoverOpen:W,tooltipAriaLabel:g,tooltipAsModal:y,tooltipRef:S,onCloseIconClick:o=>{d?.onClick?.(o),O()},onPopoverCloseInternally:()=>{T?.onClose?.(),O()},onTooltipFocus:o=>{y||(o.preventDefault(),o.stopPropagation())},onTriggerClick:o=>{if(w){if(!y)return;return W?void(S.current?.contains(o.target)||O()):void P()}W?S.current?.contains(o.target)||O():P()},onTriggerKeyDown:o=>{p(o.key)&&!W&&(P(),o.preventDefault())},onTriggerMouseDown:()=>{B.current=!0},onTriggerMouseUp:()=>{B.current=!1},onWrapperBlur:o=>{y||o.currentTarget.contains(o.relatedTarget)||O()},onWrapperFocus:()=>{B.current||y||!I.current||M||P()},onWrapperMouseEnter:()=>{!y&&w&&P()},onWrapperMouseLeave:()=>{!y&&w&&O()}})});export{f as Tooltip,f as TooltipUnControlled};
1
+ import{j as o}from"../../_virtual/jsx-runtime.js";import{forwardRef as e,useRef as t,useImperativeHandle as r}from"react";import{useClassName as s}from"../../lib/hooks/useClassName/useClassName.js";import{useActiveBreakpoints as l}from"../../lib/hooks/useMediaDevice/useActiveBreakpoints.js";import{useScrollDetection as i}from"../../lib/hooks/useScrollDetection/useScrollDetection.js";import{useSwipeDown as n}from"../../lib/hooks/useSwipeDown/useSwipeDown.js";import{useTrapFocus as a}from"../../lib/hooks/useTrapFocus/useTrapFocus.js";import{isKeyEnterPressed as p}from"../../lib/utils/keyboard/keyboard.js";import{useTooltip as c}from"./hooks/useTooltip.js";import{useTooltipAsModal as u}from"./hooks/useTooltipAsModal.js";import{TooltipStandAlone as m}from"./tooltipStandAlone.js";const f=e(function({additionalClasses:e,align:f,closeIcon:d,onOpenClose:T,popover:v,tooltipAriaLabel:g,tooltipAsModal:C,variant:k,...b},j){const D=s({additionalClassNames:e,component:"TOOLTIP",variant:k}),{device:M,isDesktop:h,isMobile:A,isTablet:R}=l(),w=h||R,S=t(null),F=t(null),y=u({propTooltipAsModal:C,styleTooltipAsModal:C});r(j,()=>S.current);const{allowFocusOpenTooltip:I,hideTooltip:O,open:L,placement:P,showTooltip:W}=c({additionalClasses:e,align:f||"top",labelRef:S,onOpenClose:T,tooltipAsModal:y,tooltipRef:F,variant:k}),{handleScrollDetection:x,hasScroll:N}=i({autoFocus:!0}),B=t(!1),{setDragIconRef:E,setPopoverRef:H}=n({onClose:O});return a({ref:F,trapFocus:L&&y}),/* @__PURE__ */o.jsx(m,{...b,align:P,contentHasScroll:N,contentRef:x,cssClasses:D,dragIconRef:E,labelRef:S,mediaDevice:M,popover:{...v,popoverContainerRef:H},popoverOpen:L,tooltipAriaLabel:g,tooltipAsModal:y,tooltipRef:F,onCloseIconClick:o=>{d?.onClick?.(o),O()},onPopoverCloseInternally:()=>{v?.onClose?.(),O()},onTooltipFocus:o=>{y||(o.preventDefault(),o.stopPropagation())},onTriggerClick:o=>{if(w){if(!y)return;return L?void(F.current?.contains(o.target)||O()):void W()}L?F.current?.contains(o.target)||O():W()},onTriggerKeyDown:o=>{p(o.key)&&!L&&(W(),o.preventDefault())},onTriggerMouseDown:()=>{B.current=!0},onTriggerMouseUp:()=>{B.current=!1},onWrapperBlur:o=>{y||o.currentTarget.contains(o.relatedTarget)||O()},onWrapperFocus:()=>{B.current||y||!I.current||A||W()},onWrapperMouseEnter:()=>{!y&&w&&W()},onWrapperMouseLeave:()=>{!y&&w&&O()}})});export{f as Tooltip,f as TooltipUnControlled};
@@ -1 +1 @@
1
- import{useEffect as e}from"react";const t=(t,n,r=[])=>{e(()=>{function e(e){const o=e.composedPath(),u=t.current&&o.includes(t.current),c=r.some(e=>e&&o.includes(e));!t.current||u||c||n(e)}return document.addEventListener("mouseup",e),()=>{document.removeEventListener("mouseup",e)}},[t,n,r])};export{t as useClickOutside};
1
+ import{useRef as e,useEffect as t}from"react";const n=(n,r,c=[])=>{const o=e(r);t(()=>{o.current=r},[r]),t(()=>{function e(e){const t=e.composedPath(),r=n.current&&t.includes(n.current),u=c.some(e=>e&&t.includes(e));!n.current||r||u||o.current(e)}return document.addEventListener("mouseup",e,!0),()=>{document.removeEventListener("mouseup",e,!0)}},[n,c])};export{n as useClickOutside};
@@ -1 +1 @@
1
- import{useState as e,useRef as n,useImperativeHandle as t,useCallback as r,useMemo as i}from"react";import{STATES as s}from"../../types/states/states.js";const o=({active:o=!1,disabled:d=!1,loading:c=!1,ref:u,states:E})=>{const[a,v]=e(!1),[m,l]=e(!1),L=n(null);t(u,()=>L?.current,[]);const p=()=>{v(!0)},w=()=>{v(!1)},D=()=>{l(!0)},S=()=>{l(!1)},f=()=>{l(!1)};return{setRef:r(e=>{e?(L.current=e,E?.includes(s.PRESSED)&&(L?.current?.addEventListener("pointerdown",D),L?.current?.addEventListener("pointercancel",S),window.addEventListener("pointerup",f)),(()=>{if("undefined"!=typeof window&&window?.matchMedia)return!window.matchMedia("(hover: none)").matches;return!0})()&&E?.includes(s.HOVER)&&(L?.current?.addEventListener("mouseenter",p),L?.current?.addEventListener("mouseleave",w))):(L?.current?.removeEventListener("mouseenter",p),L?.current?.removeEventListener("mouseleave",w),L?.current?.removeEventListener("pointerdown",D),L?.current?.removeEventListener("pointercancel",S),window.removeEventListener("pointerup",f),L.current=e)},[]),states:i(()=>E?.includes(s.LOADING)&&c?s.LOADING:E?.includes(s.DISABLED)&&d?s.DISABLED:E?.includes(s.ACTIVE)&&o?s.ACTIVE:E?.includes(s.PRESSED)&&m?s.PRESSED:E?.includes(s.HOVER)&&a?s.HOVER:s.DEFAULT,[E,d,c,o,a,m])}};export{o as useManageState};
1
+ import{useState as e,useRef as n,useImperativeHandle as t,useCallback as r,useEffect as i,useMemo as o}from"react";import{STATES as s}from"../../types/states/states.js";const c=({active:c=!1,disabled:d=!1,loading:u=!1,ref:v,states:E})=>{const[a,m]=e(!1),[L,l]=e(!1),p=n(null);t(v,()=>p?.current,[]);const w=r(()=>{if("undefined"!=typeof window&&window?.matchMedia){return!window.matchMedia("(hover: none)").matches}return!0},[]),D=r(()=>m(!0),[]),S=r(()=>m(!1),[]),f=r(()=>l(!0),[]),A=r(()=>l(!1),[]),R=r(()=>l(!1),[]),I=r(e=>{p.current&&(p.current.removeEventListener("mouseenter",D),p.current.removeEventListener("mouseleave",S),p.current.removeEventListener("pointerdown",f),p.current.removeEventListener("pointercancel",A),window.removeEventListener("pointerup",R)),p.current=e,e&&(E?.includes(s.PRESSED)&&(e.addEventListener("pointerdown",f),e.addEventListener("pointercancel",A),window.addEventListener("pointerup",R)),w()&&E?.includes(s.HOVER)&&(e.addEventListener("mouseenter",D),e.addEventListener("mouseleave",S)))},[E,D,S,f,A,R,w]);i(()=>()=>{p.current&&(p.current.removeEventListener("mouseenter",D),p.current.removeEventListener("mouseleave",S),p.current.removeEventListener("pointerdown",f),p.current.removeEventListener("pointercancel",A),window.removeEventListener("pointerup",R))},[D,S,f,A,R]);return{setRef:I,states:o(()=>E?.includes(s.LOADING)&&u?s.LOADING:E?.includes(s.DISABLED)&&d?s.DISABLED:E?.includes(s.ACTIVE)&&c?s.ACTIVE:E?.includes(s.PRESSED)&&L?s.PRESSED:E?.includes(s.HOVER)&&a?s.HOVER:s.DEFAULT,[E,d,u,c,a,L])}};export{c as useManageState};
@@ -0,0 +1 @@
1
+ import{useState as r,useRef as e,useCallback as o}from"react";import{ResizeObserver as t}from"../../utils/resizeObserver/resizeObserver.js";import{hasScroll as s}from"../../utils/scroll/hasScroll.js";const c=({autoFocus:c=!1}={})=>{const[n,l]=r(!1),u=e(),i=e(!1);return{handleScrollDetection:o(r=>{if(r){const e=r=>{const e=s(r);l(e),c&&e&&!i.current&&(r.focus(),i.current=!0)};e(r),u.current=new t(()=>{e(r)}),u.current.observe(r)}else u.current?.disconnect()},[c]),hasScroll:n}};export{c as useScrollDetection};
@@ -1 +1 @@
1
- import{useRef as r,useCallback as e}from"react";import{scrollPercentage as t}from"./utils/scrollPercentage.js";const c=({conditional:c=!0,scrollCallback:n,shadowStyles:s,shadowVisible:l=1})=>{const u=r(null),o=r(null),a=r(null),i=r(0),p=r(0),d=e(()=>{if(!u.current)return;const r=t(u.current,1.25);if(o.current){const e=r*i.current/100,t=r*p.current/100;[{cssPropertyName:"min-height",cssPropertyValue:`calc(${i.current}px - ${e}px)`},{cssPropertyName:"height",cssPropertyValue:`calc(${i.current}px - ${e}px)`},{cssPropertyName:"min-width",cssPropertyValue:`calc(${p.current}px - ${t}px)`},{cssPropertyName:"width",cssPropertyValue:`calc(${p.current}px - ${t}px)`}].forEach(({cssPropertyName:r,cssPropertyValue:e})=>{o.current?.style.setProperty(r,e)})}a.current&&(r>l?a.current.classList.add(...s.split(" ")):a.current.classList.remove(...s.split(" ")))},[c,s,l]),m=e(r=>{r?(u.current=r,d(),u.current?.addEventListener("scroll",r=>{d(),n?.(r)})):(u.current?.removeEventListener("scroll",r=>{d(),n?.(r)}),u.current=null)},[d,n]);return{resizeRef:e(r=>{const e=()=>{o.current&&(i.current=o.current.clientHeight,p.current=o.current.clientWidth)};r?(o.current=r,o.current?.addEventListener("load",e)):(o.current?.removeEventListener("load",e),o.current=null)},[]),scrollableRef:m,shadowRef:e(r=>{a.current=r||null},[])}};export{c as useScrollEffect};
1
+ import{useRef as r,useCallback as e,useEffect as t}from"react";import{scrollPercentage as n}from"./utils/scrollPercentage.js";const c=({conditional:c=!0,scrollCallback:u,shadowStyles:l,shadowVisible:s=1})=>{const o=r(null),a=r(null),i=r(null),p=r(0),m=r(0),d=r(null),y=r(null),h=r(null),P=e(()=>{if(!c||!o.current)return;const r=n(o.current,1.25);if(a.current&&p.current>0){const e=r*p.current/100,t=r*m.current/100;[{cssPropertyName:"min-height",cssPropertyValue:`calc(${p.current}px - ${e}px)`},{cssPropertyName:"height",cssPropertyValue:`calc(${p.current}px - ${e}px)`},{cssPropertyName:"min-width",cssPropertyValue:`calc(${m.current}px - ${t}px)`},{cssPropertyName:"width",cssPropertyValue:`calc(${m.current}px - ${t}px)`}].forEach(({cssPropertyName:r,cssPropertyValue:e})=>{a.current?.style.setProperty(r,e)})}if(i.current&&l){const e=l.split(" ");r>s?i.current.classList.add(...e):i.current.classList.remove(...e)}},[c,l,s]),v=e(r=>{null!==d.current&&cancelAnimationFrame(d.current),d.current=requestAnimationFrame(()=>{P(),u?.(r),d.current=null})},[P,u]);t(()=>{y.current=v},[v]);const f=e(r=>{o.current&&y.current&&o.current.removeEventListener("scroll",y.current),o.current=r,r&&y.current&&(r.addEventListener("scroll",y.current),P())},[P]),x=e(r=>{const e=()=>{a.current&&(p.current=a.current.clientHeight,m.current=a.current.clientWidth)};a.current&&h.current&&a.current.removeEventListener("load",h.current),h.current=e,a.current=r,r&&(r.addEventListener("load",e),e())},[]),L=e(r=>{i.current=r},[]);return t(()=>()=>{null!==d.current&&cancelAnimationFrame(d.current),o.current&&y.current&&o.current.removeEventListener("scroll",y.current),a.current&&h.current&&a.current.removeEventListener("load",h.current)},[]),{resizeRef:x,scrollableRef:f,shadowRef:L}};export{c as useScrollEffect};
@@ -1 +1 @@
1
- import{useRef as e,useCallback as t}from"react";import{convertDurationToNumber as r}from"./utils/convertDurationToNumber.js";const n=(n,u)=>{const o=e(null),c=e(null),s=t(e=>{o.current=e||null},[]),i=e(0),m=e(0),v=e(0),l=e(!1),a=e=>{const t=o?.current;t&&(e.preventDefault?.(),t.style.removeProperty("transition"),"touchstart"===e.type?m.current=e.touches[0].clientY:m.current=e.clientY,l.current=!0,v.current=null)},d=e=>{const t=o?.current;if(!l.current||!t)return;"touchmove"===e.type&&null!==v?v.current=e.touches[0].clientY:v.current=e.clientY;const r=m.current-v.current;v.current<m.current||(t.style.bottom=`${i.current+r}px`)},p=1e3*((r(n?.exitDuration)||r(n?.duration)||0)+(r(n?.delay)||0)),E=async()=>{const e=o?.current;if(!e||!v.current)return;if(l.current=!1,e.style.setProperty("transition",`bottom ${p}ms linear`),v.current<m.current+30)return void(e.style.bottom="0px");const t=i.current+e.scrollHeight;var r;e.style.bottom=`-${t}px`,await(r=p,new Promise(e=>setTimeout(e,r))),u?.()};return{setDragIconRef:t(e=>{e?(c.current=e,c?.current?.addEventListener("mousedown",a),c?.current?.addEventListener("mousemove",d),c?.current?.addEventListener("mouseup",E),c?.current?.addEventListener("touchstart",a),c?.current?.addEventListener("touchmove",d),c?.current?.addEventListener("touchend",E)):(c?.current?.removeEventListener("mousedown",a),c?.current?.removeEventListener("mousemove",d),c?.current?.removeEventListener("mouseup",E),c?.current?.removeEventListener("touchstart",a),c?.current?.removeEventListener("touchmove",d),c?.current?.removeEventListener("touchend",E),c.current=null)},[]),setPopoverRef:s}};export{n as useSwipeDown};
1
+ import{useRef as e,useCallback as t,useEffect as r}from"react";import{convertDurationToNumber as n}from"./utils/convertDurationToNumber.js";const o=({animationOptions:o,distanceThreshold:u=30,enabled:c=!0,onClose:s}={})=>{const v=e(null),i=e(null),m=e(0),a=e(0),d=e(null),l=e(!1),M=e(null),E=1e3*((n(o?.exitDuration)||n(o?.duration)||0)+(n(o?.delay)||0)),L=t(e=>new Promise(t=>{M.current=setTimeout(t,e)}),[]),h=t(e=>{if(!c)return;const t=v?.current;t&&(e.preventDefault?.(),t.style.removeProperty("transition"),"touchstart"===e.type?a.current=e.touches[0].clientY:a.current=e.clientY,l.current=!0,d.current=null)},[c]),p=t(e=>{if(!c)return;const t=v?.current;if(!l.current||!t)return;"touchmove"===e.type?d.current=e.touches[0].clientY:d.current=e.clientY;const r=a.current-d.current;d.current<a.current||(t.style.bottom=`${m.current+r}px`)},[c]),f=t(async()=>{if(!c)return;const e=v?.current;if(!e||null===d.current)return;if(l.current=!1,e.style.setProperty("transition",`bottom ${E}ms linear`),d.current<a.current+u)return void(e.style.bottom="0px");const t=m.current+e.scrollHeight;e.style.bottom=`-${t}px`,await L(E),s?.()},[c,E,u,s,L]),y=e({currentMove:p,endMove:f,startMove:h});r(()=>{y.current={currentMove:p,endMove:f,startMove:h}},[p,f,h]);const b=t(e=>{v.current=e},[]),w=t(e=>{if(i.current){const e=y.current;i.current.removeEventListener("mousedown",e.startMove),i.current.removeEventListener("mousemove",e.currentMove),i.current.removeEventListener("mouseup",e.endMove),i.current.removeEventListener("touchstart",e.startMove),i.current.removeEventListener("touchmove",e.currentMove),i.current.removeEventListener("touchend",e.endMove)}if(i.current=e,e&&c){const t=y.current;e.addEventListener("mousedown",t.startMove),e.addEventListener("mousemove",t.currentMove),e.addEventListener("mouseup",t.endMove),e.addEventListener("touchstart",t.startMove),e.addEventListener("touchmove",t.currentMove),e.addEventListener("touchend",t.endMove)}},[c]);return r(()=>()=>{if(M.current&&clearTimeout(M.current),i.current){const e=y.current;i.current.removeEventListener("mousedown",e.startMove),i.current.removeEventListener("mousemove",e.currentMove),i.current.removeEventListener("mouseup",e.endMove),i.current.removeEventListener("touchstart",e.startMove),i.current.removeEventListener("touchmove",e.currentMove),i.current.removeEventListener("touchend",e.endMove)}},[]),{setDragIconRef:w,setPopoverRef:b}};export{o as useSwipeDown};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kubit-ui-web/react-components",
3
- "version": "2.0.0-beta.10",
3
+ "version": "2.0.0-beta.11",
4
4
  "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
5
5
  "author": {
6
6
  "name": "Kubit",
@@ -142,16 +142,16 @@
142
142
  },
143
143
  "devDependencies": {
144
144
  "@figma/code-connect": "^1.3.12",
145
- "@storybook/addon-a11y": "^10.1.10",
145
+ "@storybook/addon-a11y": "^10.1.11",
146
146
  "@storybook/addon-coverage": "^3.0.0",
147
- "@storybook/addon-docs": "^10.1.10",
148
- "@storybook/addon-links": "^10.1.10",
149
- "@storybook/react-vite": "^10.1.10",
147
+ "@storybook/addon-docs": "^10.1.11",
148
+ "@storybook/addon-links": "^10.1.11",
149
+ "@storybook/react-vite": "^10.1.11",
150
150
  "@testing-library/dom": "^10.4.1",
151
151
  "@testing-library/jest-dom": "^6.9.1",
152
152
  "@testing-library/react": "^16.3.1",
153
153
  "@testing-library/user-event": "^14.6.1",
154
- "@trivago/prettier-plugin-sort-imports": "^6.0.0",
154
+ "@trivago/prettier-plugin-sort-imports": "^6.0.1",
155
155
  "@types/node": "^25.0.3",
156
156
  "@types/react": "^18.3.12",
157
157
  "@types/react-dom": "^18.3.1",
@@ -163,7 +163,7 @@
163
163
  "cssnano": "^7.1.2",
164
164
  "eslint": "^9.39.2",
165
165
  "eslint-config-kubit": "1.2.0",
166
- "eslint-plugin-storybook": "10.1.10",
166
+ "eslint-plugin-storybook": "10.1.11",
167
167
  "glob": "^13.0.0",
168
168
  "html-validate": "^10.5.0",
169
169
  "jsdom": "^27.4.0",
@@ -171,12 +171,12 @@
171
171
  "prettier": "^3.7.4",
172
172
  "react": "18.3.1",
173
173
  "react-dom": "18.3.1",
174
- "storybook": "^10.1.10",
174
+ "storybook": "^10.1.11",
175
175
  "storybook-addon-deep-controls": "^0.10.0",
176
- "storybook-addon-pseudo-states": "^10.1.10",
176
+ "storybook-addon-pseudo-states": "^10.1.11",
177
177
  "terser": "^5.44.1",
178
178
  "typescript": "^5.9.3",
179
- "typescript-eslint": "^8.50.1",
179
+ "typescript-eslint": "^8.51.0",
180
180
  "vite": "7.3.0",
181
181
  "vite-plugin-dts": "^4.5.4",
182
182
  "vite-tsconfig-paths": "^6.0.3",
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../utils/resizeObserver/resizeObserver.js"),r=require("../../utils/scroll/hasScroll.js");exports.useScrollDetectionWithAutoFocus=({disabled:s=!1,parentElementRef:c})=>{const[o,n]=e.useState(!1),l=e.useRef();return{handleScrollDetection:e.useCallback(e=>{if(e&&!s){const s=e=>{const t=r.hasScroll(e);n(t)},o=e=>{if(!r.hasScroll(e))return;const t=()=>{e.setAttribute("tabindex","0"),e.focus()};document.activeElement&&c?.current?.contains(document.activeElement)?e.compareDocumentPosition(document.activeElement)&Node.DOCUMENT_POSITION_FOLLOWING&&t():t()};s(e),o(e),l.current=new t.ResizeObserver(()=>{s(e)}),l.current.observe(e)}else l.current?.disconnect()},[s]),hasScroll:o}};
@@ -1 +0,0 @@
1
- import{useState as e,useRef as t,useCallback as r}from"react";import{ResizeObserver as n}from"../../utils/resizeObserver/resizeObserver.js";import{hasScroll as o}from"../../utils/scroll/hasScroll.js";const c=({disabled:c=!1,parentElementRef:s})=>{const[i,l]=e(!1),m=t();return{handleScrollDetection:r(e=>{if(e&&!c){const t=e=>{const t=o(e);l(t)},r=e=>{if(!o(e))return;const t=()=>{e.setAttribute("tabindex","0"),e.focus()};document.activeElement&&s?.current?.contains(document.activeElement)?e.compareDocumentPosition(document.activeElement)&Node.DOCUMENT_POSITION_FOLLOWING&&t():t()};t(e),r(e),m.current=new n(()=>{t(e)}),m.current.observe(e)}else m.current?.disconnect()},[c]),hasScroll:i}};export{c as useScrollDetectionWithAutoFocus};