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

package/dist/cjs/lib/components/overlay/overlay.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../_virtual/jsx-runtime.js"),s=require("react"),a=require("../../hooks/useClassName/useClassName.js"),r=require("./overlayStandAlone.js"),t=s.forwardRef(({additionalClasses:s,variant:t,...o},l)=>{const n=a.useClassName({additionalClassNames:s,component:"OVERLAY",variant:t});return e.jsxRuntimeExports.jsx(r.OverlayStandAlone,{...o,ref:l,cssClasses:n})});exports.Overlay=t;

package/dist/cjs/lib/components/overlay/overlayStandAlone.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../_virtual/jsx-runtime.js"),e=require("react"),r=require("../../utils/pickCustomAttributes/pickCustomAttributes.js"),s=e.forwardRef(({cssClasses:e,...s},i)=>{const u=r.pickCustomAttributes(s);return t.jsxRuntimeExports.jsx("div",{ref:i,className:e?.overlay,"data-testid":"overlay",...s,...u,...u})});exports.OverlayStandAlone=s;

package/dist/cjs/lib/hooks/useClickOutside/useClickOutside.js

@@ -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])};
+"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])};

package/dist/cjs/lib/hooks/useContentVisibility/useContentVisibility.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../useContentVisibilityDetection/useContentVisibilityDetection.js");exports.useContentVisibility=({minVisibleHeight:n=100})=>{const i=e.useRef(null),o=e.useRef(null),{handleContentVisibilityDetection:r}=t.useContentVisibilityDetection({minVisibleHeight:n,onContentInvisible:()=>{const e=i.current,t=o.current;e&&t&&(e.style.overflowY="auto",t.style.overflowY="visible")},onContentVisible:()=>{const e=i.current,t=o.current;e&&t&&(e.style.overflowY="",t.style.overflowY="")}});return{handleContentVisibility:e.useCallback(({container:e,content:t})=>{i.current=e,o.current=t,r({container:e,content:t})},[r])}};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../utils/resizeObserver/resizeObserver.js"),r=require("./utils/contentVisibility.js");exports.useContentVisibility=({minVisibleHeight:n=100,onContentInvisible:s,onContentVisible:i})=>{const o=e.useRef(null),u=e.useRef(null),c=e.useRef(),l=e.useRef(),b=e.useRef(void 0),v=e.useCallback(()=>{const e=o.current,t=u.current;e&&t&&(i?i():(e.style.overflowY="",t.style.overflowY=""))},[i]),a=e.useCallback(()=>{const e=o.current,t=u.current;e&&t&&(s?s():(e.style.overflowY="auto",t.style.overflowY="visible"))},[s]);return{handleContentVisibility:e.useCallback(({container:e,content:s})=>{if(o.current=e,u.current=s,e&&s){const i=()=>{const t=r.isContentVisibleEnough({container:e,content:s,minVisibleHeight:n});t!==b.current&&(t?v():a()),b.current=t};i(),c.current=new t.ResizeObserver(()=>{i()}),l.current=new t.ResizeObserver(()=>{i()}),c.current.observe(s),c.current.observe(e)}else c.current?.disconnect(),l.current?.disconnect()},[n,v,a])}};

package/dist/cjs/lib/hooks/useManageState/useManageState.js

@@ -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])}};
+"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])}};

package/dist/cjs/lib/hooks/useScrollDetection/useScrollDetection.js

@@ -0,0 +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}};

package/dist/cjs/lib/hooks/useScrollEffect/useScrollEffect.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("../../utils/changeCssProperty/changeCssProperty.js"),t=require("./utils/scrollPercentage.js");exports.useScrollEffect=({conditional:c=!0,scrollCallback:s,shadowStyles:l,shadowVisible:n=1})=>{const u=e.useRef(null),a=e.useRef(null),o=e.useRef(null),i=e.useRef(0),p=e.useRef(0),d=e.useCallback(()=>{if(!u.current)return;const e=t.scrollPercentage(u.current,1.25);if(a.current){const t=e*i.current/100,c=e*p.current/100,s=[{cssPropertyName:"min-height",cssPropertyValue:`calc(${i.current}px - ${t}px)`},{cssPropertyName:"height",cssPropertyValue:`calc(${i.current}px - ${t}px)`},{cssPropertyName:"min-width",cssPropertyValue:`calc(${p.current}px - ${c}px)`},{cssPropertyName:"width",cssPropertyValue:`calc(${p.current}px - ${c}px)`}];r.changeCssProperty(a.current,s)}o.current&&(e>n?o.current.classList.add(...l.split(" ")):o.current.classList.remove(...l.split(" ")))},[c,l,n]),h=e.useCallback(e=>{e?(u.current=e,d(),u.current?.addEventListener("scroll",e=>{d(),s?.(e)})):(u.current?.removeEventListener("scroll",e=>{d(),s?.(e)}),u.current=null)},[d,s]);return{resizeRef:e.useCallback(e=>{const r=()=>{a.current&&(i.current=a.current.clientHeight,p.current=a.current.clientWidth)};e?(a.current=e,a.current?.addEventListener("load",r)):(a.current?.removeEventListener("load",r),a.current=null)},[]),scrollableRef:h,shadowRef:e.useCallback(e=>{o.current=e||null},[])}};
+"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}};

package/dist/cjs/lib/hooks/useSwipeDown/useSwipeDown.js

@@ -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}};
+"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}};

package/dist/cjs/lib/provider/cssProvider/provider.js

@@ -1 +1 @@
-import{cssThemes as e,cssClasses as t,cssVars as s,cssAvailableComponents as i,cssGlobalStyles as n,cssMediaQueries as h}from"./stats/stats";export class Provider{#e;#t;#s;#i;#n;#h;#r;#l;#m;#o=(e,t)=>{if("undefined"==typeof document)return;let s=document.getElementById(t);s||(s=document.createElement("link"),s.id=t,s.rel="stylesheet",document.head.appendChild(s)),s.href=e};#a=e=>{const{css:t,foreign:s}=e,i=s?.before||[],n=s?.after||[];i.forEach((e,t)=>{const s=`${this.#l}-foreign-before-${t+1}`;this.#o(e,s)}),this.#o(t,this.#l),n.forEach((e,t)=>{const s=`${this.#l}-foreign-after-${t+1}`;this.#o(e,s)})};#c=()=>{"undefined"!=typeof document&&document.querySelectorAll(`link[id^="${this.#l}"]`).forEach(e=>e.remove())};constructor({linkId:r,jsInCss:l}={}){this.#t=e,this.#s=s,this.#i=t,this.#n=i,this.#h=n,this.#r=h,this.#l=r||"kb-styled-link",this.#e=Object.keys(e)[0],this.#m=!!l,this.getComponentStyles=this.getComponentStyles.bind(this),"undefined"!=typeof window&&"undefined"!=typeof document&&this.#m&&(this.#c(),this.#a(this.#t[this.#e]))}get themeSelected(){return this.#e}set themeSelected(e){if(!(e in this.#t))throw new Error(`${e} is not exists`);this.#m&&(this.#c(),this.#a(this.#t[e])),this.#e=e}get allThemesNames(){return Object.keys(this.#t)}get allThemes(){return this.#t}get variables(){return this.#s[this.#e]}get classNames(){return this.#i[this.#e]}get components(){return this.#n[this.#e]}get globalStyles(){return this.#h[this.#e]}get mediaQueries(){return this.#r[this.#e]}getComponentStyles({variant:e,component:t,additionalClassNames:s}){const i=this.#i[this.#e][t.toLocaleUpperCase()];if(!i)return{};const n={},h=!!e&&`$_${e.toLocaleLowerCase().replace(/-/g,"_")}`;if(h&&h in i){const e=i[h];Object.entries(e).forEach(([e,t])=>{e in n||(n[e]=t)})}return Object.entries(i).forEach(([e,t])=>{e.startsWith("$_")||e in n||(n[e]=t)}),s&&Object.keys(s).length&&Object.entries(s).forEach(([e,t])=>{e in n||(n[e]=""),n[e]+=` ${t}`}),n}}
+import{cssThemes as e,cssClasses as t,cssVars as s,cssAvailableComponents as i,cssGlobalStyles as n,cssMediaQueries as h}from"./stats/stats";export class Provider{#e;#t;#s;#i;#n;#h;#r;#o;#a;#c=(e,t)=>{if("undefined"==typeof document)return;let s=document.getElementById(t);s||(s=document.createElement("link"),s.id=t,s.rel="stylesheet",document.head.appendChild(s)),s.href=e};#l=e=>{const{css:t,foreign:s}=e,i=s?.before||[],n=s?.after||[];i.forEach((e,t)=>{const s=`${this.#o}-foreign-before-${t+1}`;this.#c(e,s)}),this.#c(t,this.#o),n.forEach((e,t)=>{const s=`${this.#o}-foreign-after-${t+1}`;this.#c(e,s)})};#d=()=>{"undefined"!=typeof document&&document.querySelectorAll(`link[id^="${this.#o}"]`).forEach(e=>e.remove())};constructor({linkId:r,jsInCss:o}={}){this.#t=e,this.#s=s,this.#i=t,this.#n=i,this.#h=n,this.#r=h,this.#o=r||"kb-styled-link",this.#e=Object.keys(e)[0],this.#a=!!o,this.getComponentStyles=this.getComponentStyles.bind(this),"undefined"!=typeof window&&"undefined"!=typeof document&&this.#a&&(this.#d(),this.#l(this.#t[this.#e]))}get themeSelected(){return this.#e}set themeSelected(e){if(!(e in this.#t))throw new Error(`${e} is not exists`);this.#a&&(this.#d(),this.#l(this.#t[e])),this.#e=e}get allThemesNames(){return Object.keys(this.#t)}get allThemes(){return this.#t}get variables(){return this.#s[this.#e]}get classNames(){return this.#i[this.#e]}get components(){return this.#n[this.#e]}get globalStyles(){return this.#h[this.#e]}get mediaQueries(){return this.#r[this.#e]}getComponentStyles({variant:e,component:t,additionalClassNames:s}){const i=this.#i[this.#e][t.toLocaleUpperCase()];if(!i)return{};const n={},h=!!e&&`$_${e.toLocaleLowerCase().replace(/-/g,"_")}`;if(h&&h in i){const e=i[h];Object.entries(e).forEach(([e,t])=>{e in n||(n[e]=t)})}return Object.entries(i).forEach(([e,t])=>{e.startsWith("$_")||e in n||(n[e]=t)}),s&&Object.keys(s).length&&Object.entries(s).forEach(([e,t])=>{e in n||(n[e]=""),n[e]+=` ${t}`}),n}}