@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.
- package/dist/cjs/components/modal/modalControlled.js +1 -1
- package/dist/cjs/components/tooltip/tooltipControlled.js +1 -1
- package/dist/cjs/components/tooltip/tooltipUnControlled.js +1 -1
- package/dist/cjs/lib/hooks/useClickOutside/useClickOutside.js +1 -1
- package/dist/cjs/lib/hooks/useManageState/useManageState.js +1 -1
- package/dist/cjs/lib/hooks/useScrollDetection/useScrollDetection.js +1 -0
- package/dist/cjs/lib/hooks/useScrollEffect/useScrollEffect.js +1 -1
- package/dist/cjs/lib/hooks/useSwipeDown/useSwipeDown.js +1 -1
- package/dist/esm/components/modal/modalControlled.js +1 -1
- package/dist/esm/components/tooltip/tooltipControlled.js +1 -1
- package/dist/esm/components/tooltip/tooltipUnControlled.js +1 -1
- package/dist/esm/lib/hooks/useClickOutside/useClickOutside.js +1 -1
- package/dist/esm/lib/hooks/useManageState/useManageState.js +1 -1
- package/dist/esm/lib/hooks/useScrollDetection/useScrollDetection.js +1 -0
- package/dist/esm/lib/hooks/useScrollEffect/useScrollEffect.js +1 -1
- package/dist/esm/lib/hooks/useSwipeDown/useSwipeDown.js +1 -1
- package/package.json +10 -10
- package/dist/cjs/lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js +0 -1
- package/dist/esm/lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js +0 -1
|
@@ -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/
|
|
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"),
|
|
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"),
|
|
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
|
|
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:
|
|
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:
|
|
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
|
|
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
|
|
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{
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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.
|
|
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.
|
|
145
|
+
"@storybook/addon-a11y": "^10.1.11",
|
|
146
146
|
"@storybook/addon-coverage": "^3.0.0",
|
|
147
|
-
"@storybook/addon-docs": "^10.1.
|
|
148
|
-
"@storybook/addon-links": "^10.1.
|
|
149
|
-
"@storybook/react-vite": "^10.1.
|
|
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.
|
|
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.
|
|
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.
|
|
174
|
+
"storybook": "^10.1.11",
|
|
175
175
|
"storybook-addon-deep-controls": "^0.10.0",
|
|
176
|
-
"storybook-addon-pseudo-states": "^10.1.
|
|
176
|
+
"storybook-addon-pseudo-states": "^10.1.11",
|
|
177
177
|
"terser": "^5.44.1",
|
|
178
178
|
"typescript": "^5.9.3",
|
|
179
|
-
"typescript-eslint": "^8.
|
|
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",
|
package/dist/cjs/lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js
DELETED
|
@@ -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}};
|
package/dist/esm/lib/hooks/useScrollDetectionWithAutoFocus/useScrollDetectionWithAutoFocus.js
DELETED
|
@@ -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};
|