@dotss/ui 1.0.7 → 1.0.9

package/Backdrop/Backdrop.cjs

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("@emotion/react/jsx-runtime"),r=require("react"),L=require("react-dom"),B=require("@emotion/styled"),H=e=>e&&e.__esModule?e:{default:e},p=H(B),M=p.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("@emotion/react/jsx-runtime"),s=require("react"),M=require("react-dom"),O=require("@emotion/styled"),W=e=>e&&e.__esModule?e:{default:e},S=W(O),_=S.default.div`
   position: fixed;
 
-  ${({hasContainer:e,containerTop:u,containerLeft:o,containerWidth:d,containerHeight:i})=>e?{top:u,left:o,width:d,height:i}:{top:0,left:0,width:"100%",height:"100%"}};
+  ${({hasContainer:e,containerTop:o,containerLeft:u,containerWidth:d,containerHeight:i})=>e?{top:o,left:u,width:d,height:i}:{top:0,left:0,width:"100%",height:"100%"}};
 
   z-index: 100000;
 
   background-color: ${({theme:{palette:{etc:e}}})=>e.dimmed01};
   transition: opacity ${({transitionDuration:e})=>e}ms;
   opacity: ${({open:e})=>e?1:0};
-`,O=p.default.div`
+`,k=S.default.div`
   position: relative;
 
-  ${({theme:{spacing:e},fullScreen:u})=>u?{width:"100%",height:"100%"}:{width:`calc(100% - ${e.content(10)}px)`,height:`calc(100% - ${e.content(10)}px)`,margin:e.content(5)}};
+  ${({theme:{spacing:e},fullScreen:o})=>o?{width:"100%",height:"100%"}:{width:`calc(100% - ${e.content(10)}px)`,height:`calc(100% - ${e.content(10)}px)`,margin:e.content(5)}};
   
   ${({centered:e})=>e?{display:"flex",alignItems:"center",justifyContent:"center"}:null}}
-`,W=r.forwardRef(function({children:u,open:o,onClose:d,transitionDuration:i=200,fullScreen:y,centered:g,containerRef:s,inlineCSS:T,...v},w){const[C,f]=r.useState(!1),[b,a]=r.useState(!0),[x,S]=r.useState(0),[$,_]=r.useState(0),[j,k]=r.useState(0),[q,z]=r.useState(0),n=r.useRef(),c=r.useRef(),I=!!(s!=null&&s.current);return r.useEffect(()=>{o&&(c.current&&clearTimeout(c.current),document.body.style.overflow="hidden",a(!1),n.current=setTimeout(()=>{f(!0)},100))},[o]),r.useEffect(()=>{o||(n.current&&clearTimeout(n.current),document.body.removeAttribute("style"),f(!1),c.current=setTimeout(()=>{a(!0)},i))},[o,i]),r.useEffect(()=>{const t=s==null?void 0:s.current,l=()=>{var h;t&&(S((t==null?void 0:t.offsetTop)||0),_(((h=t.getBoundingClientRect())==null?void 0:h.left)||0),k((t==null?void 0:t.offsetWidth)||0),z((t==null?void 0:t.offsetHeight)||0))};return t&&(l(),window.addEventListener("resize",l)),()=>{t&&window.removeEventListener("resize",l)}},[s]),r.useEffect(()=>()=>{document.body.removeAttribute("style"),n.current&&clearTimeout(n.current),c.current&&clearTimeout(c.current)},[]),b?null:L.createPortal(m.jsx(M,{ref:w,open:C,transitionDuration:i,onClick:d,hasContainer:I,containerTop:x,containerLeft:$,containerWidth:j,containerHeight:q,...v,css:T,children:m.jsx(O,{fullScreen:y,centered:g,children:u})}),document.body)});exports.default=W;
+`,A=s.forwardRef(function({children:o,open:u,onClose:d,transitionDuration:i=200,fullScreen:a,centered:h,containerRef:r,inlineCSS:m,disablePortal:q=!1,...p},y){const[g,T]=s.useState(!1),[z,v]=s.useState(!0),[w,I]=s.useState(0),[x,L]=s.useState(0),[b,B]=s.useState(0),[C,H]=s.useState(0),c=s.useRef(),n=s.useRef(),$=!!(r!=null&&r.current);return s.useEffect(()=>{u&&(n.current&&clearTimeout(n.current),document.body.style.overflow="hidden",v(!1),c.current=setTimeout(()=>{T(!0)},100))},[u]),s.useEffect(()=>{u||(c.current&&clearTimeout(c.current),document.body.removeAttribute("style"),T(!1),n.current=setTimeout(()=>{v(!0)},i))},[u,i]),s.useEffect(()=>{const t=r==null?void 0:r.current,l=()=>{var j;t&&(I((t==null?void 0:t.offsetTop)||0),L(((j=t.getBoundingClientRect())==null?void 0:j.left)||0),B((t==null?void 0:t.offsetWidth)||0),H((t==null?void 0:t.offsetHeight)||0))};return t&&(l(),window.addEventListener("resize",l)),()=>{t&&window.removeEventListener("resize",l)}},[r]),s.useEffect(()=>()=>{document.body.removeAttribute("style"),c.current&&clearTimeout(c.current),n.current&&clearTimeout(n.current)},[]),z?null:q?f.jsx(_,{ref:y,open:g,transitionDuration:i,onClick:d,hasContainer:$,containerTop:w,containerLeft:x,containerWidth:b,containerHeight:C,...p,css:m,children:f.jsx(k,{fullScreen:a,centered:h,children:o})}):M.createPortal(f.jsx(_,{ref:y,open:g,transitionDuration:i,onClick:d,hasContainer:$,containerTop:w,containerLeft:x,containerWidth:b,containerHeight:C,...p,css:m,children:f.jsx(k,{fullScreen:a,centered:h,children:o})}),document.body)});exports.default=A;

package/Backdrop/Backdrop.d.ts

@@ -8,6 +8,7 @@ export interface BackdropProps extends GeneralComponentProps<HTMLAttributes<HTML
     fullScreen?: boolean;
     centered?: boolean;
     containerRef?: RefObject<HTMLElement>;
+    disablePortal?: boolean;
 }
 declare const Backdrop: import('react').ForwardRefExoticComponent<BackdropProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Backdrop;

package/Backdrop/Backdrop.es.js

@@ -1,15 +1,15 @@
-import { jsx as a } from "@emotion/react/jsx-runtime";
-import { forwardRef as O, useState as i, useRef as y, useEffect as d } from "react";
-import { createPortal as P } from "react-dom";
-import T from "@emotion/styled";
-const S = T.div`
+import { jsx as f } from "@emotion/react/jsx-runtime";
+import { forwardRef as F, useState as n, useRef as I, useEffect as l } from "react";
+import { createPortal as G } from "react-dom";
+import H from "@emotion/styled";
+const L = H.div`
   position: fixed;
 
-  ${({ hasContainer: t, containerTop: s, containerLeft: o, containerWidth: f, containerHeight: n }) => t ? {
-  top: s,
-  left: o,
-  width: f,
-  height: n
+  ${({ hasContainer: t, containerTop: o, containerLeft: i, containerWidth: d, containerHeight: s }) => t ? {
+  top: o,
+  left: i,
+  width: d,
+  height: s
 } : {
   top: 0,
   left: 0,
@@ -26,10 +26,10 @@ const S = T.div`
 }) => t.dimmed01};
   transition: opacity ${({ transitionDuration: t }) => t}ms;
   opacity: ${({ open: t }) => t ? 1 : 0};
-`, q = T.div`
+`, B = H.div`
   position: relative;
 
-  ${({ theme: { spacing: t }, fullScreen: s }) => s ? {
+  ${({ theme: { spacing: t }, fullScreen: o }) => o ? {
   width: "100%",
   height: "100%"
 } : {
@@ -43,57 +43,74 @@ const S = T.div`
   alignItems: "center",
   justifyContent: "center"
 } : null}}
-`, K = O(function({
-  children: s,
-  open: o,
-  onClose: f,
-  transitionDuration: n = 200,
-  fullScreen: g,
-  centered: w,
+`, Q = F(function({
+  children: o,
+  open: i,
+  onClose: d,
+  transitionDuration: s = 200,
+  fullScreen: h,
+  centered: p,
   containerRef: r,
-  inlineCSS: C,
-  ...v
-}, $) {
-  const [b, m] = i(!1), [x, h] = i(!0), [k, z] = i(0), [I, L] = i(0), [B, H] = i(0), [W, j] = i(0), c = y(), u = y(), A = !!(r != null && r.current);
-  return d(() => {
-    o && (u.current && clearTimeout(u.current), document.body.style.overflow = "hidden", h(!1), c.current = setTimeout(() => {
-      m(!0);
+  inlineCSS: a,
+  disablePortal: W = !1,
+  ...y
+}, T) {
+  const [g, w] = n(!1), [j, v] = n(!0), [C, A] = n(0), [$, O] = n(0), [b, P] = n(0), [x, q] = n(0), c = I(), u = I(), k = !!(r != null && r.current);
+  return l(() => {
+    i && (u.current && clearTimeout(u.current), document.body.style.overflow = "hidden", v(!1), c.current = setTimeout(() => {
+      w(!0);
     }, 100));
-  }, [o]), d(() => {
-    o || (c.current && clearTimeout(c.current), document.body.removeAttribute("style"), m(!1), u.current = setTimeout(() => {
-      h(!0);
-    }, n));
-  }, [o, n]), d(() => {
-    const e = r == null ? void 0 : r.current, l = () => {
-      var p;
-      e && (z((e == null ? void 0 : e.offsetTop) || 0), L(((p = e.getBoundingClientRect()) == null ? void 0 : p.left) || 0), H((e == null ? void 0 : e.offsetWidth) || 0), j((e == null ? void 0 : e.offsetHeight) || 0));
+  }, [i]), l(() => {
+    i || (c.current && clearTimeout(c.current), document.body.removeAttribute("style"), w(!1), u.current = setTimeout(() => {
+      v(!0);
+    }, s));
+  }, [i, s]), l(() => {
+    const e = r == null ? void 0 : r.current, m = () => {
+      var z;
+      e && (A((e == null ? void 0 : e.offsetTop) || 0), O(((z = e.getBoundingClientRect()) == null ? void 0 : z.left) || 0), P((e == null ? void 0 : e.offsetWidth) || 0), q((e == null ? void 0 : e.offsetHeight) || 0));
     };
-    return e && (l(), window.addEventListener("resize", l)), () => {
-      e && window.removeEventListener("resize", l);
+    return e && (m(), window.addEventListener("resize", m)), () => {
+      e && window.removeEventListener("resize", m);
     };
-  }, [r]), d(() => () => {
+  }, [r]), l(() => () => {
     document.body.removeAttribute("style"), c.current && clearTimeout(c.current), u.current && clearTimeout(u.current);
-  }, []), x ? null : P(
-    /* @__PURE__ */ a(
-      S,
+  }, []), j ? null : W ? /* @__PURE__ */ f(
+    L,
+    {
+      ref: T,
+      open: g,
+      transitionDuration: s,
+      onClick: d,
+      hasContainer: k,
+      containerTop: C,
+      containerLeft: $,
+      containerWidth: b,
+      containerHeight: x,
+      ...y,
+      css: a,
+      children: /* @__PURE__ */ f(B, { fullScreen: h, centered: p, children: o })
+    }
+  ) : G(
+    /* @__PURE__ */ f(
+      L,
       {
-        ref: $,
-        open: b,
-        transitionDuration: n,
-        onClick: f,
-        hasContainer: A,
-        containerTop: k,
-        containerLeft: I,
-        containerWidth: B,
-        containerHeight: W,
-        ...v,
-        css: C,
-        children: /* @__PURE__ */ a(q, { fullScreen: g, centered: w, children: s })
+        ref: T,
+        open: g,
+        transitionDuration: s,
+        onClick: d,
+        hasContainer: k,
+        containerTop: C,
+        containerLeft: $,
+        containerWidth: b,
+        containerHeight: x,
+        ...y,
+        css: a,
+        children: /* @__PURE__ */ f(B, { fullScreen: h, centered: p, children: o })
       }
     ),
     document.body
   );
 });
 export {
-  K as default
+  Q as default
 };

package/ChainPicker/ChainPicker.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("@emotion/react/jsx-runtime"),l=require("react"),B=require("@emotion/styled"),G=require("../hooks/useCheckHasFocus/useCheckHasFocus.cjs"),J=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),Q=require("../hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs"),X=s=>s&&s.__esModule?s:{default:s},H=X(B),Z=H.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("@emotion/react/jsx-runtime"),c=require("react"),oe=require("@emotion/styled"),se=require("../hooks/useCheckHasFocus/useCheckHasFocus.cjs"),ae=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),ce=require("../hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs"),le=l=>l&&l.__esModule?l:{default:l},C=le(oe),ue=C.default.div`
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -8,7 +8,7 @@
   position: relative;
   cursor: grab;
   transition: transform 0.3s ease-out;
-`,ee=H.default.div`
+`,de=C.default.div`
   position: relative;
   width: auto;
   height: fit-content;
@@ -33,14 +33,14 @@
 
   @supports selector(:has(:focus-visible)) {
     &:has(:focus-visible) {
-      outline: ${({theme:s})=>s.palette.grey[100]} solid 2px;
+      outline: ${({theme:l})=>l.palette.grey[100]} solid 2px;
     }
   }
 
   @supports not selector(:has(:focus-visible)) {
-    ${({focusWithin:s,theme:t})=>s?{outline:`${t.palette.grey[100]} solid 2px`}:{}}
+    ${({focusWithin:l,theme:i})=>l?{outline:`${i.palette.grey[100]} solid 2px`}:{}}
   }
-`,m=H.default.div`
+`,w=C.default.div`
   height: 54px;
   display: flex;
   align-items: center;
@@ -48,7 +48,7 @@
   scroll-snap-align: start;
   position: relative;
 
-  ${({theme:{palette:{grey:s},typography:{h2M:t},spacing:{content:r}}})=>({fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing,color:s[100],padding:r(3)})};
+  ${({theme:{palette:{grey:l},typography:{h2M:i},spacing:{content:u}}})=>({fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,color:l[100],padding:u(3)})};
 
-  ${({selected:s,theme:{palette:{grey:t},typography:{h4M:r}}})=>s?{"&, & *":{color:`${t[100]} !important`}}:{color:`${t[30]} !important`,fontSize:`${r.size} !important`,fontWeight:`${r.weight} !important`,lineHeight:`${r.lineHeight} !important`,letterSpacing:`${r.letterSpacing} !important`,"& *":{color:`${t[30]} !important`}}}
-`,_=3,te=l.forwardRef(function({column:t,value:r=t[0].value,onChange:y,renderLabel:k,inlineCSS:C,wrapperProps:g,thumbProps:R,...j},q){const T=t.findIndex(i=>i.value===r),p=l.useRef(T),o=l.useRef(null),[f,S]=l.useState(T*54),[w,P]=l.useState(!1),[D,E]=l.useState(0),[L,O]=l.useState(0),Y=l.useId(),{isHoverPossible:N}=J.default(),{isKeyboardMode:W}=Q.default(),{hasFocus:F}=G.default({ref:o}),I=i=>{P(!0),O(i),E(f)},M=i=>{if(!w)return;const e=L-i;let n=D+e;const a=54*(t.length-1);n<0?n=0:n>a&&(n=a),S(n),o.current&&(o.current.children[0].scrollTop=n)},z=i=>{var n,a;i.stopPropagation();let e=p.current;i.key==="ArrowUp"?(e+=1,e>t.length-1&&(e=0)):i.key==="ArrowDown"?(e-=1,e<0&&(e=t.length-1)):i.key==="PageUp"?(e+=5,e>t.length-1&&(e=0)):i.key==="PageDown"?(e-=5,e<0&&(e=t.length-1)):i.key==="Home"?e=0:i.key==="End"&&(e=t.length-1),y(t[e].value),p.current=e,(a=(n=o.current)==null?void 0:n.querySelector(`.chain-picker-item[data-index="${p.current}"]`))==null||a.focus()},A=i=>I(i.clientY),K=i=>I(i.touches[0].clientY),U=i=>M(i.clientY),V=i=>M(i.touches[0].clientY),v=i=>{if(!w||(P(!1),!N&&i.type==="mouseup"))return;if(Math.abs(D-f)<_){const u=i.target.closest("[data-index]");if(u){const x=Number(u.dataset.index);if(t[x]&&o.current){const b=o.current.children[0];b.scrollTo({top:x*54,behavior:"smooth"});const $=()=>{Math.abs(b.scrollTop-x*54)<1&&(y(t[x].value),b.removeEventListener("scroll",$))};b.addEventListener("scroll",$)}}return}let e=Math.round(f/54),n=e*54;const a=54*(t.length-1);n<0?(n=0,e=0):n>a&&(n=a,e=t.length-1),p.current=e;const c=d=>{if(Math.abs(d-n)<1)S(n),o.current&&(o.current.children[0].scrollTop=n);else{const u=d+(n-d)/5;S(u),o.current&&(o.current.children[0].scrollTop=u),requestAnimationFrame(()=>c(u))}};requestAnimationFrame(()=>c(f)),t[e]&&y(t[e].value)};return l.useLayoutEffect(()=>{const e=t.findIndex(n=>n.value===r)*54;S(e),o.current&&(o.current.children[0].scrollTop=e)},[r,t,54]),h.jsx(ee,{ref:o,...g,css:g==null?void 0:g.inlineCSS,focusWithin:W&&F,children:h.jsx(Z,{role:"group",ref:q,css:C,...j,onMouseDown:A,onMouseMove:U,onMouseUp:v,onMouseLeave:v,onTouchStart:K,onTouchMove:V,onTouchEnd:v,onTouchCancel:v,children:t.map((i,e)=>{const n=t.findIndex(d=>d.value===r),a=n===0?0:Math.round(f/54),c=e===a;return h.jsxs(l.Fragment,{children:[e===0&&h.jsx(m,{className:"chain-picker-item","data-index":e-1,selected:!1,distance:(n+1)*-1}),h.jsx(m,{className:"chain-picker-item","data-index":e,"data-selected":c,selected:c,distance:e-n,role:"spinbutton",tabIndex:c?0:-1,"aria-hidden":c?"false":"true","aria-valuenow":i.value,"aria-valuetext":i.ariaValueText??i.label,"aria-valuemin":t[0].value,"aria-valuemax":t[t.length-1].value,...R,onKeyDown:z,children:k?k(i,c):i.label}),e===t.length-1&&h.jsx(m,{className:"chain-picker-item","data-index":e+1,selected:!1,distance:t.length-n})]},`${Y}_${i.label}`)})})})});exports.SCROLL_POSITION_THRESHOLD=_;exports.default=te;
+  ${({selected:l,theme:{palette:{grey:i},typography:{h4M:u}}})=>l?{"&, & *":{color:`${i[100]} !important`}}:{color:`${i[30]} !important`,fontSize:`${u.size} !important`,fontWeight:`${u.weight} !important`,lineHeight:`${u.lineHeight} !important`,letterSpacing:`${u.letterSpacing} !important`,"& *":{color:`${i[30]} !important`}}}
+`,f=Object.freeze({FRICTION:.95,SNAP_FORCE:.2,SNAP_VELOCITY_THRESHOLD:.04,MIN_VELOCITY:.01,MAX_VELOCITY:1.62,NEAR_ZERO_VELOCITY:.2,BOUNDARY_PX:4}),he=c.forwardRef(function({column:i,value:u=i[0].value,onChange:b,renderLabel:O,inlineCSS:R,wrapperProps:m,thumbProps:L,...Y},F){const A=i.findIndex(e=>e.value===u),S=c.useRef(A),s=c.useRef(null),[E,g]=c.useState(A*54),[y,D]=c.useState(!1),[I,$]=c.useState(0),[M,V]=c.useState(0),[T,H]=c.useState(!1),[q,P]=c.useState([]),j=c.useId(),d=c.useRef(null),{isHoverPossible:U}=ae.default(),{isKeyboardMode:W}=ce.default(),{hasFocus:z}=se.default({ref:s}),X=e=>{if(e.length<2)return 0;const t=e[0],n=e[e.length-1],r=n.time-t.time,a=n.y-t.y;if(r===0)return 0;const o=a/r;return Math.max(-f.MAX_VELOCITY,Math.min(f.MAX_VELOCITY,o))},K=e=>{d.current&&cancelAnimationFrame(d.current),H(!0);let t=e*-1,n=E,r=performance.now();const a=54*(i.length-1),o=h=>{const x=h-r;r=h,n+=t*x,n<0?(n=0,t=0):n>a&&(n=a,t=0),t*=f.FRICTION,g(n),s.current&&(s.current.children[0].scrollTop=n);const _=Math.round(n/54)*54,te=Math.abs(n-_),ne=Math.abs(t)<=f.NEAR_ZERO_VELOCITY,ie=Math.abs(t)<=f.SNAP_VELOCITY_THRESHOLD,re=te<=f.BOUNDARY_PX;ne&&re||ie?(H(!1),B(n)):d.current=requestAnimationFrame(o)};d.current=requestAnimationFrame(o)},B=e=>{d.current&&cancelAnimationFrame(d.current);const t=Math.max(0,Math.min(Math.round(e/54),i.length-1)),n=t*54;S.current=t;const r=a=>{if(Math.abs(a-n)<1)g(n),s.current&&(s.current.children[0].scrollTop=n),i[t]&&b(i[t].value);else{const o=a+(n-a)*f.SNAP_FORCE;g(o),s.current&&(s.current.children[0].scrollTop=o),d.current=requestAnimationFrame(()=>r(o))}};d.current=requestAnimationFrame(()=>r(e))},N=e=>{D(!0),V(e),$(E),H(!1),P([{time:performance.now(),y:e}])},Z=e=>{if(!y||T)return;const t=M-e;let n=I+t;const r=54*(i.length-1);n<0?n=0:n>r&&(n=r),g(n),s.current&&(s.current.children[0].scrollTop=n);const a=performance.now();P(o=>[...o,{time:a,y:e}].filter(h=>a-h.time<=100))},G=e=>{var n,r;e.stopPropagation();let t=S.current;e.key==="ArrowUp"?(t+=1,t>i.length-1&&(t=0)):e.key==="ArrowDown"?(t-=1,t<0&&(t=i.length-1)):e.key==="PageUp"?(t+=5,t>i.length-1&&(t=0)):e.key==="PageDown"?(t-=5,t<0&&(t=i.length-1)):e.key==="Home"?t=0:e.key==="End"&&(t=i.length-1),b(i[t].value),S.current=t,(r=(n=s.current)==null?void 0:n.querySelector(`.chain-picker-item[data-index="${S.current}"]`))==null||r.focus()},J=e=>{e.preventDefault(),e.stopPropagation(),N(e.clientY)},Q=e=>N(e.touches[0].clientY),ee=e=>{e.preventDefault(),e.stopPropagation(),Z(e.clientY)},v=e=>{if(!y||(D(!1),!U&&e.type==="mouseup"))return;const t=X(q);if(Math.abs(t)<f.MIN_VELOCITY){const r=e.target.closest("[data-index]");if(r){const a=Number(r.dataset.index);if(i[a]&&s.current){const o=s.current.children[0];o.scrollTo({top:a*54,behavior:"smooth"});const h=()=>{Math.abs(o.scrollTop-a*54)<1&&(b(i[a].value),o.removeEventListener("scroll",h))};o.addEventListener("scroll",h)}}return}K(t)};return c.useLayoutEffect(()=>{const t=i.findIndex(n=>n.value===u)*54;g(t),s.current&&(s.current.children[0].scrollTop=t)},[u,i,54]),c.useLayoutEffect(()=>()=>{d.current&&cancelAnimationFrame(d.current)},[]),c.useEffect(()=>{const e=s.current;if(!e)return;const t=n=>{const r=n;if(r.preventDefault(),r.stopPropagation(),!y||T)return;const a=M-r.touches[0].clientY;let o=I+a;const h=54*(i.length-1);o<0?o=0:o>h&&(o=h),g(o),s.current&&(s.current.children[0].scrollTop=o);const x=performance.now();P(k=>[...k,{time:x,y:r.touches[0].clientY}].filter(_=>x-_.time<=100))};return e.addEventListener("touchmove",t,{passive:!1}),()=>{e.removeEventListener("touchmove",t)}},[y,T,M,I,54,i.length]),p.jsx(de,{ref:s,...m,css:m==null?void 0:m.inlineCSS,focusWithin:W&&z,children:p.jsx(ue,{role:"group",ref:F,css:R,...Y,onMouseDown:J,onMouseMove:ee,onMouseUp:v,onMouseLeave:v,onTouchStart:Q,onTouchEnd:v,onTouchCancel:v,children:i.map((e,t)=>{const n=Math.round(E/54),r=t===n;return p.jsxs(c.Fragment,{children:[t===0&&p.jsx(w,{className:"chain-picker-item","data-index":t-1,selected:!1,distance:-1}),p.jsx(w,{className:"chain-picker-item","data-index":t,"data-selected":r,selected:r,distance:t-n,role:"spinbutton",tabIndex:r?0:-1,"aria-hidden":r?"false":"true","aria-valuenow":e.value,"aria-valuetext":e.ariaValueText??e.label,"aria-valuemin":i[0].value,"aria-valuemax":i[i.length-1].value,...L,onKeyDown:G,children:O?O(e,r):e.label}),t===i.length-1&&p.jsx(w,{className:"chain-picker-item","data-index":t+1,selected:!1,distance:i.length-n})]},`${j}_${e.label}`)})})})});exports.default=he;

package/ChainPicker/ChainPicker.d.ts

@@ -1,7 +1,10 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { GeneralComponentProps } from '../typings/component';
 
-export declare const SCROLL_POSITION_THRESHOLD = 3;
+export interface VelocitySample {
+    time: number;
+    y: number;
+}
 export interface ChainPickerItem {
     label: string;
     value: number;

package/ChainPicker/ChainPicker.es.js

@@ -1,10 +1,10 @@
-import { jsx as f, jsxs as B } from "@emotion/react/jsx-runtime";
-import { forwardRef as G, useRef as C, useState as b, useId as J, useLayoutEffect as Q, Fragment as X } from "react";
-import H from "@emotion/styled";
-import Z from "../hooks/useCheckHasFocus/useCheckHasFocus.es.js";
-import ee from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
-import te from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
-const ie = H.div`
+import { jsx as m, jsxs as ae } from "@emotion/react/jsx-runtime";
+import { forwardRef as ce, useRef as C, useState as g, useId as le, useLayoutEffect as L, useEffect as he, Fragment as ue } from "react";
+import O from "@emotion/styled";
+import de from "../hooks/useCheckHasFocus/useCheckHasFocus.es.js";
+import fe from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import ge from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+const me = O.div`
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -14,7 +14,7 @@ const ie = H.div`
   position: relative;
   cursor: grab;
   transition: transform 0.3s ease-out;
-`, ne = H.div`
+`, pe = O.div`
   position: relative;
   width: auto;
   height: fit-content;
@@ -39,16 +39,16 @@ const ie = H.div`
 
   @supports selector(:has(:focus-visible)) {
     &:has(:focus-visible) {
-      outline: ${({ theme: a }) => a.palette.grey[100]} solid 2px;
+      outline: ${({ theme: u }) => u.palette.grey[100]} solid 2px;
     }
   }
 
   @supports not selector(:has(:focus-visible)) {
-    ${({ focusWithin: a, theme: t }) => a ? {
-  outline: `${t.palette.grey[100]} solid 2px`
+    ${({ focusWithin: u, theme: i }) => u ? {
+  outline: `${i.palette.grey[100]} solid 2px`
 } : {}}
   }
-`, y = H.div`
+`, A = O.div`
   height: 54px;
   display: flex;
   align-items: center;
@@ -58,162 +58,227 @@ const ie = H.div`
 
   ${({
   theme: {
-    palette: { grey: a },
-    typography: { h2M: t },
-    spacing: { content: r }
+    palette: { grey: u },
+    typography: { h2M: i },
+    spacing: { content: c }
   }
 }) => ({
-  fontSize: t.size,
-  fontWeight: t.weight,
-  lineHeight: t.lineHeight,
-  letterSpacing: t.letterSpacing,
-  color: a[100],
-  padding: r(3)
+  fontSize: i.size,
+  fontWeight: i.weight,
+  lineHeight: i.lineHeight,
+  letterSpacing: i.letterSpacing,
+  color: u[100],
+  padding: c(3)
 })};
 
   ${({
-  selected: a,
+  selected: u,
   theme: {
-    palette: { grey: t },
-    typography: { h4M: r }
+    palette: { grey: i },
+    typography: { h4M: c }
   }
-}) => a ? {
+}) => u ? {
   "&, & *": {
-    color: `${t[100]} !important`
+    color: `${i[100]} !important`
   }
 } : {
-  color: `${t[30]} !important`,
-  fontSize: `${r.size} !important`,
-  fontWeight: `${r.weight} !important`,
-  lineHeight: `${r.lineHeight} !important`,
-  letterSpacing: `${r.letterSpacing} !important`,
+  color: `${i[30]} !important`,
+  fontSize: `${c.size} !important`,
+  fontWeight: `${c.weight} !important`,
+  lineHeight: `${c.lineHeight} !important`,
+  letterSpacing: `${c.letterSpacing} !important`,
   "& *": {
-    color: `${t[30]} !important`
+    color: `${i[30]} !important`
   }
 }}
-`, oe = 3, fe = G(function({
-  column: t,
-  value: r = t[0].value,
-  onChange: x,
-  renderLabel: k,
-  inlineCSS: E,
-  wrapperProps: g,
-  thumbProps: Y,
-  ...L
-}, W) {
-  const w = t.findIndex((i) => i.value === r), u = C(w), o = C(null), [h, p] = b(w * 54), [P, T] = b(!1), [$, F] = b(0), [N, R] = b(0), z = J(), { isHoverPossible: A } = ee(), { isKeyboardMode: K } = te(), { hasFocus: O } = Z({ ref: o }), D = (i) => {
-    T(!0), R(i), F(h);
-  }, I = (i) => {
-    if (!P) return;
-    const e = N - i;
-    let n = $ + e;
-    const s = 54 * (t.length - 1);
-    n < 0 ? n = 0 : n > s && (n = s), p(n), o.current && (o.current.children[0].scrollTop = n);
-  }, j = (i) => {
-    var n, s;
-    i.stopPropagation();
-    let e = u.current;
-    i.key === "ArrowUp" ? (e += 1, e > t.length - 1 && (e = 0)) : i.key === "ArrowDown" ? (e -= 1, e < 0 && (e = t.length - 1)) : i.key === "PageUp" ? (e += 5, e > t.length - 1 && (e = 0)) : i.key === "PageDown" ? (e -= 5, e < 0 && (e = t.length - 1)) : i.key === "Home" ? e = 0 : i.key === "End" && (e = t.length - 1), x(t[e].value), u.current = e, (s = (n = o.current) == null ? void 0 : n.querySelector(`.chain-picker-item[data-index="${u.current}"]`)) == null || s.focus();
-  }, q = (i) => D(i.clientY), U = (i) => D(i.touches[0].clientY), _ = (i) => I(i.clientY), V = (i) => I(i.touches[0].clientY), m = (i) => {
-    if (!P || (T(!1), !A && i.type === "mouseup")) return;
-    if (Math.abs($ - h) < oe) {
-      const d = i.target.closest("[data-index]");
-      if (d) {
-        const S = Number(d.dataset.index);
-        if (t[S] && o.current) {
-          const v = o.current.children[0];
-          v.scrollTo({
-            top: S * 54,
+`, d = Object.freeze({
+  FRICTION: 0.95,
+  // 마찰 계수
+  SNAP_FORCE: 0.2,
+  // 스냅 강도: 최종값 결정시 얼마나 빠르게 값을 결정할 것인지?
+  SNAP_VELOCITY_THRESHOLD: 0.04,
+  // 0.1px/frame
+  MIN_VELOCITY: 0.01,
+  MAX_VELOCITY: 1.62,
+  // px/ms 단위 (27px/frame = 1.619px/ms, 한 프레임에 요소의 최대 절반까지 이동 가능, 60fps 기준)
+  NEAR_ZERO_VELOCITY: 0.2,
+  // px/ms 이 값 이하이면 '거의 멈춤'으로 판단
+  BOUNDARY_PX: 4
+  // px 아이템 경계(정렬 위치)와의 거리 허용치
+}), Te = ce(function({
+  column: i,
+  value: c = i[0].value,
+  onChange: b,
+  renderLabel: N,
+  inlineCSS: F,
+  wrapperProps: p,
+  thumbProps: R,
+  ...$
+}, V) {
+  const k = i.findIndex((e) => e.value === c), S = C(k), s = C(null), [E, f] = g(k * 54), [y, D] = g(!1), [x, U] = g(0), [T, W] = g(0), [M, H] = g(!1), [q, w] = g([]), z = le(), l = C(null), { isHoverPossible: X } = fe(), { isKeyboardMode: j } = ge(), { hasFocus: K } = de({ ref: s }), B = (e) => {
+    if (e.length < 2) return 0;
+    const t = e[0], n = e[e.length - 1], r = n.time - t.time, a = n.y - t.y;
+    if (r === 0) return 0;
+    const o = a / r;
+    return Math.max(
+      -d.MAX_VELOCITY,
+      Math.min(d.MAX_VELOCITY, o)
+    );
+  }, Z = (e) => {
+    l.current && cancelAnimationFrame(l.current), H(!0);
+    let t = e * -1, n = E, r = performance.now();
+    const a = 54 * (i.length - 1), o = (h) => {
+      const I = h - r;
+      r = h, n += t * I, n < 0 ? (n = 0, t = 0) : n > a && (n = a, t = 0), t *= d.FRICTION, f(n), s.current && (s.current.children[0].scrollTop = n);
+      const P = Math.round(n / 54) * 54, ie = Math.abs(n - P), re = Math.abs(t) <= d.NEAR_ZERO_VELOCITY, oe = Math.abs(t) <= d.SNAP_VELOCITY_THRESHOLD, se = ie <= d.BOUNDARY_PX;
+      re && se || oe ? (H(!1), G(n)) : l.current = requestAnimationFrame(o);
+    };
+    l.current = requestAnimationFrame(o);
+  }, G = (e) => {
+    l.current && cancelAnimationFrame(l.current);
+    const t = Math.max(0, Math.min(Math.round(e / 54), i.length - 1)), n = t * 54;
+    S.current = t;
+    const r = (a) => {
+      if (Math.abs(a - n) < 1)
+        f(n), s.current && (s.current.children[0].scrollTop = n), i[t] && b(i[t].value);
+      else {
+        const o = a + (n - a) * d.SNAP_FORCE;
+        f(o), s.current && (s.current.children[0].scrollTop = o), l.current = requestAnimationFrame(() => r(o));
+      }
+    };
+    l.current = requestAnimationFrame(() => r(e));
+  }, _ = (e) => {
+    D(!0), W(e), U(E), H(!1), w([{ time: performance.now(), y: e }]);
+  }, J = (e) => {
+    if (!y || M) return;
+    const t = T - e;
+    let n = x + t;
+    const r = 54 * (i.length - 1);
+    n < 0 ? n = 0 : n > r && (n = r), f(n), s.current && (s.current.children[0].scrollTop = n);
+    const a = performance.now();
+    w(
+      (o) => [...o, { time: a, y: e }].filter((h) => a - h.time <= 100)
+    );
+  }, Q = (e) => {
+    var n, r;
+    e.stopPropagation();
+    let t = S.current;
+    e.key === "ArrowUp" ? (t += 1, t > i.length - 1 && (t = 0)) : e.key === "ArrowDown" ? (t -= 1, t < 0 && (t = i.length - 1)) : e.key === "PageUp" ? (t += 5, t > i.length - 1 && (t = 0)) : e.key === "PageDown" ? (t -= 5, t < 0 && (t = i.length - 1)) : e.key === "Home" ? t = 0 : e.key === "End" && (t = i.length - 1), b(i[t].value), S.current = t, (r = (n = s.current) == null ? void 0 : n.querySelector(`.chain-picker-item[data-index="${S.current}"]`)) == null || r.focus();
+  }, ee = (e) => {
+    e.preventDefault(), e.stopPropagation(), _(e.clientY);
+  }, te = (e) => _(e.touches[0].clientY), ne = (e) => {
+    e.preventDefault(), e.stopPropagation(), J(e.clientY);
+  }, v = (e) => {
+    if (!y || (D(!1), !X && e.type === "mouseup")) return;
+    const t = B(q);
+    if (Math.abs(t) < d.MIN_VELOCITY) {
+      const r = e.target.closest("[data-index]");
+      if (r) {
+        const a = Number(r.dataset.index);
+        if (i[a] && s.current) {
+          const o = s.current.children[0];
+          o.scrollTo({
+            top: a * 54,
             behavior: "smooth"
           });
-          const M = () => {
-            Math.abs(v.scrollTop - S * 54) < 1 && (x(t[S].value), v.removeEventListener("scroll", M));
+          const h = () => {
+            Math.abs(o.scrollTop - a * 54) < 1 && (b(i[a].value), o.removeEventListener("scroll", h));
           };
-          v.addEventListener("scroll", M);
+          o.addEventListener("scroll", h);
         }
       }
       return;
     }
-    let e = Math.round(h / 54), n = e * 54;
-    const s = 54 * (t.length - 1);
-    n < 0 ? (n = 0, e = 0) : n > s && (n = s, e = t.length - 1), u.current = e;
-    const l = (c) => {
-      if (Math.abs(c - n) < 1)
-        p(n), o.current && (o.current.children[0].scrollTop = n);
-      else {
-        const d = c + (n - c) / 5;
-        p(d), o.current && (o.current.children[0].scrollTop = d), requestAnimationFrame(() => l(d));
-      }
-    };
-    requestAnimationFrame(() => l(h)), t[e] && x(t[e].value);
+    Z(t);
   };
-  return Q(() => {
-    const e = t.findIndex((n) => n.value === r) * 54;
-    p(e), o.current && (o.current.children[0].scrollTop = e);
-  }, [r, t, 54]), /* @__PURE__ */ f(
-    ne,
+  return L(() => {
+    const t = i.findIndex((n) => n.value === c) * 54;
+    f(t), s.current && (s.current.children[0].scrollTop = t);
+  }, [c, i, 54]), L(() => () => {
+    l.current && cancelAnimationFrame(l.current);
+  }, []), he(() => {
+    const e = s.current;
+    if (!e) return;
+    const t = (n) => {
+      const r = n;
+      if (r.preventDefault(), r.stopPropagation(), !y || M) return;
+      const a = T - r.touches[0].clientY;
+      let o = x + a;
+      const h = 54 * (i.length - 1);
+      o < 0 ? o = 0 : o > h && (o = h), f(o), s.current && (s.current.children[0].scrollTop = o);
+      const I = performance.now();
+      w(
+        (Y) => [...Y, { time: I, y: r.touches[0].clientY }].filter(
+          (P) => I - P.time <= 100
+        )
+      );
+    };
+    return e.addEventListener("touchmove", t, { passive: !1 }), () => {
+      e.removeEventListener("touchmove", t);
+    };
+  }, [y, M, T, x, 54, i.length]), /* @__PURE__ */ m(
+    pe,
     {
-      ref: o,
-      ...g,
-      css: g == null ? void 0 : g.inlineCSS,
-      focusWithin: K && O,
-      children: /* @__PURE__ */ f(
-        ie,
+      ref: s,
+      ...p,
+      css: p == null ? void 0 : p.inlineCSS,
+      focusWithin: j && K,
+      children: /* @__PURE__ */ m(
+        me,
         {
           role: "group",
-          ref: W,
-          css: E,
-          ...L,
-          onMouseDown: q,
-          onMouseMove: _,
-          onMouseUp: m,
-          onMouseLeave: m,
-          onTouchStart: U,
-          onTouchMove: V,
-          onTouchEnd: m,
-          onTouchCancel: m,
-          children: t.map((i, e) => {
-            const n = t.findIndex((c) => c.value === r), s = n === 0 ? 0 : Math.round(h / 54), l = e === s;
-            return /* @__PURE__ */ B(X, { children: [
-              e === 0 && /* @__PURE__ */ f(
-                y,
+          ref: V,
+          css: F,
+          ...$,
+          onMouseDown: ee,
+          onMouseMove: ne,
+          onMouseUp: v,
+          onMouseLeave: v,
+          onTouchStart: te,
+          onTouchEnd: v,
+          onTouchCancel: v,
+          children: i.map((e, t) => {
+            const n = Math.round(E / 54), r = t === n;
+            return /* @__PURE__ */ ae(ue, { children: [
+              t === 0 && /* @__PURE__ */ m(
+                A,
                 {
                   className: "chain-picker-item",
-                  "data-index": e - 1,
+                  "data-index": t - 1,
                   selected: !1,
-                  distance: (n + 1) * -1
+                  distance: -1
                 }
               ),
-              /* @__PURE__ */ f(
-                y,
+              /* @__PURE__ */ m(
+                A,
                 {
                   className: "chain-picker-item",
-                  "data-index": e,
-                  "data-selected": l,
-                  selected: l,
-                  distance: e - n,
+                  "data-index": t,
+                  "data-selected": r,
+                  selected: r,
+                  distance: t - n,
                   role: "spinbutton",
-                  tabIndex: l ? 0 : -1,
-                  "aria-hidden": l ? "false" : "true",
-                  "aria-valuenow": i.value,
-                  "aria-valuetext": i.ariaValueText ?? i.label,
-                  "aria-valuemin": t[0].value,
-                  "aria-valuemax": t[t.length - 1].value,
-                  ...Y,
-                  onKeyDown: j,
-                  children: k ? k(i, l) : i.label
+                  tabIndex: r ? 0 : -1,
+                  "aria-hidden": r ? "false" : "true",
+                  "aria-valuenow": e.value,
+                  "aria-valuetext": e.ariaValueText ?? e.label,
+                  "aria-valuemin": i[0].value,
+                  "aria-valuemax": i[i.length - 1].value,
+                  ...R,
+                  onKeyDown: Q,
+                  children: N ? N(e, r) : e.label
                 }
               ),
-              e === t.length - 1 && /* @__PURE__ */ f(
-                y,
+              t === i.length - 1 && /* @__PURE__ */ m(
+                A,
                 {
                   className: "chain-picker-item",
-                  "data-index": e + 1,
+                  "data-index": t + 1,
                   selected: !1,
-                  distance: t.length - n
+                  distance: i.length - n
                 }
               )
-            ] }, `${z}_${i.label}`);
+            ] }, `${z}_${e.label}`);
           })
         }
       )
@@ -221,6 +286,5 @@ const ie = H.div`
   );
 });
 export {
-  oe as SCROLL_POSITION_THRESHOLD,
-  fe as default
+  Te as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotss/ui",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "React UI components for Dotss",
   "type": "module",
   "main": "./index.cjs",