@dotss/ui 1.4.0 → 1.5.0

package/Tab/Tab.cjs

@@ -1,18 +1,18 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("@emotion/react/jsx-runtime"),i=require("react"),Q=require("@emotion/styled"),Z=o=>o&&o.__esModule?o:{default:o},M=Z(Q),B=M.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("@emotion/react/jsx-runtime"),c=require("react"),st=require("@emotion/styled"),it=o=>o&&o.__esModule?o:{default:o},R=it(st),ct=R.default.div`
   width: 100%;
   background-color: ${({theme:o})=>o.palette.grey.white};
-  ${({scrollable:o})=>o?{overflow:"hidden"}:{}}
-`,tt=M.default.div`
+  ${({scrollable:o})=>o?{overflow:"hidden",cursor:"grab",'& [role="tab"]':{flex:"0 0 auto"}}:{}}
+`,ot=R.default.div`
   display: flex;
   position: relative;
   background: ${({theme:o})=>o.palette.grey.white};
-  ${({theme:o,isChipped:l})=>l?{gap:o.spacing.content(2)}:{}}
-`,et=M.default.div`
+  ${({theme:o,isChipped:m})=>m?{gap:o.spacing.content(2)}:{}}
+`,at=R.default.div`
   position: absolute;
   height: 2px;
   bottom: 0;
-  background: ${({theme:o,disabled:l})=>l?o.palette.brand.primary.disableLine:o.palette.brand.primary.main};
+  background: ${({theme:o,disabled:m})=>m?o.palette.brand.primary.disableLine:o.palette.brand.primary.main};
   transition: all 0.2s ease-in-out;
   transition-property: transform, width;
   ${({isChipped:o})=>o?{display:"none"}:{}}
-`,S=3,nt=i.forwardRef(function({value:l,scrollable:d=!1,disabled:_=!1,onChange:R,size:w="medium",inlineCSS:I,wrapperProps:m,children:E,...j},F){const s=i.useRef(null),f=i.useRef(),b=i.useRef(0),N=i.useRef(!0),x=i.useRef(!1),g=i.useRef(!1),u=i.useRef(!1),[H,O]=i.useState(!1),[D,P]=i.useState(0),[T,V]=i.useState(0),[L,K]=i.useState(0),$=_,W=i.Children.toArray(E).every(t=>i.isValidElement(t)&&i.Children.toArray(t.props.children).every(n=>i.isValidElement(n)&&!Array.isArray(n.props.children))),z=t=>n=>{d&&!x.current||(R(t,n.currentTarget),x.current=!1)},U=t=>{if(!s.current)return;const n=s.current.querySelectorAll('[role="tab"]:not([disabled])'),a=Array.from(n).findIndex(e=>e===document.activeElement);if(t.key==="ArrowLeft"){t.preventDefault();const e=a<=0?n.length-1:a-1,r=n[e];r&&!r.getAttribute("disabled")&&r.focus()}else if(t.key==="ArrowRight"){t.preventDefault();const e=a>=n.length-1?0:a+1,r=n[e];r&&!r.getAttribute("disabled")&&r.focus()}else if(t.key==="Home"){t.preventDefault();const e=n[0];e&&!e.getAttribute("disabled")&&e.focus()}else if(t.key==="End"){t.preventDefault();const e=n[n.length-1];e&&!e.getAttribute("disabled")&&e.focus()}else if(t.key===" "||t.key==="Enter"){t.preventDefault();const e=n[a];if(e&&!e.getAttribute("disabled")){const r=e.getAttribute("value");if(r){R(r,e);const c=s.current.querySelector(".indicator");c&&(c.style.width=`${e.clientWidth}px`,c.style.transform=`translate3d(${e.offsetLeft}px, 0px, 0px)`,g.current?c.style.transition="all 0.2s ease-in-out":(c.style.transition="unset",g.current=!0))}}}},Y=(t,n)=>{P(t),V(n),K(b.current)},X=(t,n)=>{if(!u.current)return;u.current=!1;const a=D-t,e=T-n;t&&Math.abs(a)<S&&Math.abs(e)<S*2&&(x.current=!0),f.current&&(cancelAnimationFrame(f.current),f.current=void 0)},G=t=>{d&&(u.current=!0,Y(t.clientX,t.clientY))},J=t=>{d&&Y(t.touches[0].clientX,t.touches[0].clientY)},k=t=>X(t.changedTouches[0].clientX,t.changedTouches[0].clientY),q=t=>X(t.clientX,t.clientY);return i.useEffect(()=>{const t=()=>{var n;if(s.current){const a=s.current.querySelector(".indicator"),e=(n=s.current)==null?void 0:n.querySelectorAll('[role="tab"][data-selected="true"]')[0];if(e&&a&&(a.style.width=`${e.clientWidth}px`,a.style.transform=`translate3d(${e.offsetLeft}px, 0px, 0px)`,g.current?a.style.transition="all 0.2s ease-in-out":(a.style.transition="unset",g.current=!0),O(e.getAttribute("data-disabled")==="true")),e&&d){const r=e.offsetLeft,c=e.offsetLeft+e.clientWidth,p=b.current,y=b.current+s.current.clientWidth;if(r<p||c>y){const v=Math.min(r,Math.max(s.current.scrollWidth-s.current.clientWidth,s.current.scrollWidth-y));s.current.style.transition="all 0.2s ease-in-out",s.current.style.transform=`translate3d(-${v}px, 0px, 0px)`,b.current=v}}}};return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[d,l,w]),i.useEffect(()=>{const t=s.current,n=(r,c,p)=>{if(!s.current)return;const y=D-r,v=T-c;if(u.current=u.current||Math.abs(y)>S&&Math.abs(v)<S*2,u.current&&p.cancelable&&(p.preventDefault(),p.stopPropagation()),u.current){let h=L+y;const C=s.current.scrollWidth-s.current.clientWidth;h<0?h=0:h>C&&(h=C),s.current&&(f.current&&cancelAnimationFrame(f.current),f.current=requestAnimationFrame(()=>{s.current&&(s.current.style.transition="unset",s.current.style.transform=`translate3d(-${h}px, 0px, 0px)`,b.current=h,N.current=!1)}))}},a=r=>{u.current&&n(r.clientX,r.clientY,r)},e=r=>{n(r.touches[0].clientX,r.touches[0].clientY,r)};return t==null||t.addEventListener("mousemove",a),t==null||t.addEventListener("touchmove",e),()=>{t==null||t.removeEventListener("mousemove",a),t==null||t.removeEventListener("touchmove",e)}},[D,T,L]),A.jsx(B,{className:"tab-wrapper",ref:F,scrollable:d,...m,css:m==null?void 0:m.inlineCSS,children:A.jsxs(tt,{className:"tab-list",role:"tablist",ref:s,isChipped:W,css:I,...j,onMouseDown:G,onMouseUp:q,onMouseLeave:q,onTouchStart:J,onTouchEnd:k,onTouchCancel:k,children:[i.Children.map(E,(t,n)=>{var r,c;if(!i.isValidElement(t))return null;const a=l===t.props.value,e=$||((r=t.props)==null?void 0:r.disabled);return i.cloneElement(t,{...t.props,className:`tab-block-${n}`,selected:a,"aria-selected":a,tabIndex:a?0:-1,onClick:(c=t.props)!=null&&c.disabled?void 0:z(t.props.value),onKeyDown:U,disabled:e,size:w})}),A.jsx(et,{className:"indicator",disabled:$||H,isChipped:W})]})})});exports.default=nt;
+`,A=3,g=Object.freeze({FRICTION:.85,MIN_VELOCITY:.01,MAX_VELOCITY:1.62,STOP_VELOCITY:.02,SAMPLE_DURATION:100}),ut=c.forwardRef(function({value:m,scrollable:h=!1,disabled:k=!1,onChange:w,size:I="medium",inlineCSS:V,wrapperProps:M,children:C,...q},X){const s=c.useRef(null),u=c.useRef(),b=c.useRef(0),j=c.useRef(!0),S=c.useRef(!1),T=c.useRef(!1),l=c.useRef(!1),v=c.useRef([]),[U,H]=c.useState(!1),[E,z]=c.useState(0),[D,K]=c.useState(0),[O,G]=c.useState(0),_=k,Y=c.Children.toArray(C).every(t=>c.isValidElement(t)&&c.Children.toArray(t.props.children).every(r=>c.isValidElement(r)&&!Array.isArray(r.props.children))),J=t=>r=>{h&&!S.current||(w(t,r.currentTarget),S.current=!1)},Q=t=>{if(!s.current)return;const r=s.current.querySelectorAll('[role="tab"]:not([disabled])'),i=Array.from(r).findIndex(e=>e===document.activeElement);if(t.key==="ArrowLeft"){t.preventDefault();const e=i<=0?r.length-1:i-1,n=r[e];n&&!n.getAttribute("disabled")&&n.focus()}else if(t.key==="ArrowRight"){t.preventDefault();const e=i>=r.length-1?0:i+1,n=r[e];n&&!n.getAttribute("disabled")&&n.focus()}else if(t.key==="Home"){t.preventDefault();const e=r[0];e&&!e.getAttribute("disabled")&&e.focus()}else if(t.key==="End"){t.preventDefault();const e=r[r.length-1];e&&!e.getAttribute("disabled")&&e.focus()}else if(t.key===" "||t.key==="Enter"){t.preventDefault();const e=r[i];if(e&&!e.getAttribute("disabled")){const n=e.getAttribute("value");if(n){w(n,e);const a=s.current.querySelector(".indicator");a&&(a.style.width=`${e.clientWidth}px`,a.style.transform=`translate3d(${e.offsetLeft}px, 0px, 0px)`,T.current?a.style.transition="all 0.2s ease-in-out":(a.style.transition="unset",T.current=!0))}}}},Z=t=>{if(t.length<2)return 0;const r=t[0],i=t[t.length-1],e=i.time-r.time,n=i.x-r.x;if(e===0)return 0;const a=n/e;return Math.max(-g.MAX_VELOCITY,Math.min(g.MAX_VELOCITY,a))},p=c.useCallback(t=>{const r=s.current?s.current.scrollWidth-s.current.clientWidth:0;return Math.max(0,Math.min(t,r))},[]),x=c.useCallback(t=>{if(!s.current)return;const r=p(t);s.current.style.transition="unset",s.current.style.transform=`translate3d(-${r}px, 0px, 0px)`,b.current=r},[p]),B=c.useCallback(t=>{u.current&&cancelAnimationFrame(u.current);let r=t*-1,i=b.current,e=performance.now();const n=a=>{if(!s.current)return;const d=a-e;e=a,i=p(i+r*d);const f=i<=0,y=i>=s.current.scrollWidth-s.current.clientWidth;(f&&r<0||y&&r>0)&&(r=0),r*=g.FRICTION,x(i),Math.abs(r)>g.STOP_VELOCITY?u.current=requestAnimationFrame(n):u.current=void 0};u.current=requestAnimationFrame(n)},[p,x]),$=(t,r)=>{u.current&&(cancelAnimationFrame(u.current),u.current=void 0),S.current=!1,z(t),K(r),G(b.current),v.current=[{time:performance.now(),x:t}]},F=(t,r)=>{if(!l.current||!s.current)return;l.current=!1,s.current.style.cursor="grab";const i=E-t,e=D-r;t&&Math.abs(i)<A&&Math.abs(e)<A*2&&(S.current=!0);const n=Z(v.current);v.current=[],u.current&&(cancelAnimationFrame(u.current),u.current=void 0),!S.current&&Math.abs(n)>=g.MIN_VELOCITY&&B(n)},tt=t=>{h&&(l.current=!0,$(t.clientX,t.clientY))},et=t=>{h&&$(t.touches[0].clientX,t.touches[0].clientY)},N=t=>F(t.changedTouches[0].clientX,t.changedTouches[0].clientY),P=t=>F(t.clientX,t.clientY);return c.useEffect(()=>{const t=()=>{var r;if(s.current){const i=s.current.querySelector(".indicator"),e=(r=s.current)==null?void 0:r.querySelectorAll('[role="tab"][data-selected="true"]')[0];if(e&&i&&(i.style.width=`${e.clientWidth}px`,i.style.transform=`translate3d(${e.offsetLeft}px, 0px, 0px)`,T.current?i.style.transition="all 0.2s ease-in-out":(i.style.transition="unset",T.current=!0),H(e.getAttribute("data-disabled")==="true")),e&&h){const n=e.offsetLeft,a=e.offsetLeft+e.clientWidth,d=b.current,f=b.current+s.current.clientWidth;if(n<d||a>f){const y=Math.min(n,Math.max(s.current.scrollWidth-s.current.clientWidth,s.current.scrollWidth-f));s.current.style.transition="all 0.2s ease-in-out",s.current.style.transform=`translate3d(-${y}px, 0px, 0px)`,b.current=y}}}};return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[h,m,I]),c.useEffect(()=>{const t=s.current,r=(n,a,d)=>{if(!s.current)return;const f=E-n,y=D-a;if(l.current=l.current||Math.abs(f)>A&&Math.abs(y)<A*2,l.current&&d.cancelable&&(d.preventDefault(),d.stopPropagation()),l.current){const rt=p(O+f),W=performance.now();v.current=[...v.current,{time:W,x:n}].filter(nt=>W-nt.time<=g.SAMPLE_DURATION),s.current&&(u.current&&cancelAnimationFrame(u.current),u.current=requestAnimationFrame(()=>{s.current&&(x(rt),s.current.style.cursor="grabbing",j.current=!1)}))}},i=n=>{l.current&&r(n.clientX,n.clientY,n)},e=n=>{n.stopPropagation(),r(n.touches[0].clientX,n.touches[0].clientY,n)};return t==null||t.addEventListener("mousemove",i),t==null||t.addEventListener("touchmove",e),()=>{t==null||t.removeEventListener("mousemove",i),t==null||t.removeEventListener("touchmove",e)}},[p,E,D,O,x]),c.useEffect(()=>()=>{u.current&&cancelAnimationFrame(u.current)},[]),L.jsx(ct,{className:"tab-wrapper",ref:X,scrollable:h,...M,css:M==null?void 0:M.inlineCSS,children:L.jsxs(ot,{className:"tab-list",role:"tablist",ref:s,isChipped:Y,css:V,...q,onMouseDown:tt,onMouseUp:P,onMouseLeave:P,onTouchStart:et,onTouchEnd:N,onTouchCancel:N,children:[c.Children.map(C,(t,r)=>{var n,a;if(!c.isValidElement(t))return null;const i=m===t.props.value,e=_||((n=t.props)==null?void 0:n.disabled);return c.cloneElement(t,{...t.props,className:`tab-block-${r}`,selected:i,"aria-selected":i,tabIndex:i?0:-1,onClick:(a=t.props)!=null&&a.disabled?void 0:J(t.props.value),onKeyDown:Q,disabled:e,size:I})}),L.jsx(at,{className:"indicator",disabled:_||U,isChipped:Y})]})})});exports.default=ut;

package/Tab/Tab.es.js

@@ -1,47 +1,57 @@
-import { jsx as N, jsxs as et } from "@emotion/react/jsx-runtime";
-import { forwardRef as rt, useRef as l, useState as x, Children as w, isValidElement as M, useEffect as H, cloneElement as nt } from "react";
-import L from "@emotion/styled";
-const st = L.div`
+import { jsx as U, jsxs as ut } from "@emotion/react/jsx-runtime";
+import { forwardRef as lt, useRef as l, useState as M, Children as w, isValidElement as I, useCallback as O, useEffect as C, cloneElement as dt } from "react";
+import Y from "@emotion/styled";
+const ft = Y.div`
   width: 100%;
-  background-color: ${({ theme: o }) => o.palette.grey.white};
-  ${({ scrollable: o }) => o ? {
-  overflow: "hidden"
+  background-color: ${({ theme: a }) => a.palette.grey.white};
+  ${({ scrollable: a }) => a ? {
+  overflow: "hidden",
+  cursor: "grab",
+  '& [role="tab"]': {
+    flex: "0 0 auto"
+  }
 } : {}}
-`, it = L.div`
+`, mt = Y.div`
   display: flex;
   position: relative;
-  background: ${({ theme: o }) => o.palette.grey.white};
-  ${({ theme: o, isChipped: u }) => u ? {
-  gap: o.spacing.content(2)
+  background: ${({ theme: a }) => a.palette.grey.white};
+  ${({ theme: a, isChipped: m }) => m ? {
+  gap: a.spacing.content(2)
 } : {}}
-`, ot = L.div`
+`, ht = Y.div`
   position: absolute;
   height: 2px;
   bottom: 0;
-  background: ${({ theme: o, disabled: u }) => u ? o.palette.brand.primary.disableLine : o.palette.brand.primary.main};
+  background: ${({ theme: a, disabled: m }) => m ? a.palette.brand.primary.disableLine : a.palette.brand.primary.main};
   transition: all 0.2s ease-in-out;
   transition-property: transform, width;
-  ${({ isChipped: o }) => o ? {
+  ${({ isChipped: a }) => a ? {
   display: "none"
 } : {}}
-`, S = 3, ut = rt(function({
-  value: u,
-  scrollable: d = !1,
+`, L = 3, g = Object.freeze({
+  FRICTION: 0.85,
+  MIN_VELOCITY: 0.01,
+  MAX_VELOCITY: 1.62,
+  STOP_VELOCITY: 0.02,
+  SAMPLE_DURATION: 100
+}), gt = lt(function({
+  value: m,
+  scrollable: h = !1,
   disabled: j = !1,
-  onChange: E,
+  onChange: R,
   size: $ = "medium",
-  inlineCSS: K,
-  wrapperProps: m,
-  children: R,
-  ...O
-}, P) {
-  const s = l(null), f = l(), p = l(0), z = l(!0), D = l(!1), g = l(!1), c = l(!1), [U, V] = x(!1), [T, _] = x(0), [A, G] = x(0), [W, J] = x(0), Y = j, X = w.toArray(R).every((t) => M(t) && w.toArray(t.props.children).every(
-    (r) => M(r) && !Array.isArray(r.props.children)
-  )), Q = (t) => (r) => {
-    d && !D.current || (E(t, r.currentTarget), D.current = !1);
-  }, Z = (t) => {
-    if (!s.current) return;
-    const r = s.current.querySelectorAll(
+  inlineCSS: H,
+  wrapperProps: v,
+  children: F,
+  ...z
+}, K) {
+  const o = l(null), c = l(), p = l(0), G = l(!0), S = l(!1), x = l(!1), u = l(!1), T = l([]), [J, Q] = M(!1), [D, Z] = M(0), [E, B] = M(0), [N, tt] = M(0), W = j, P = w.toArray(F).every((t) => I(t) && w.toArray(t.props.children).every(
+    (r) => I(r) && !Array.isArray(r.props.children)
+  )), et = (t) => (r) => {
+    h && !S.current || (R(t, r.currentTarget), S.current = !1);
+  }, rt = (t) => {
+    if (!o.current) return;
+    const r = o.current.querySelectorAll(
       '[role="tab"]:not([disabled])'
     ), i = Array.from(r).findIndex((e) => e === document.activeElement);
     if (t.key === "ArrowLeft") {
@@ -66,42 +76,77 @@ const st = L.div`
       if (e && !e.getAttribute("disabled")) {
         const n = e.getAttribute("value");
         if (n) {
-          E(n, e);
-          const a = s.current.querySelector(".indicator");
-          a && (a.style.width = `${e.clientWidth}px`, a.style.transform = `translate3d(${e.offsetLeft}px, 0px, 0px)`, g.current ? a.style.transition = "all 0.2s ease-in-out" : (a.style.transition = "unset", g.current = !0));
+          R(n, e);
+          const s = o.current.querySelector(".indicator");
+          s && (s.style.width = `${e.clientWidth}px`, s.style.transform = `translate3d(${e.offsetLeft}px, 0px, 0px)`, x.current ? s.style.transition = "all 0.2s ease-in-out" : (s.style.transition = "unset", x.current = !0));
         }
       }
     }
-  }, k = (t, r) => {
-    _(t), G(r), J(p.current);
-  }, I = (t, r) => {
-    if (!c.current) return;
-    c.current = !1;
-    const i = T - t, e = A - r;
-    t && Math.abs(i) < S && Math.abs(e) < S * 2 && (D.current = !0), f.current && (cancelAnimationFrame(f.current), f.current = void 0);
-  }, B = (t) => {
-    d && (c.current = !0, k(t.clientX, t.clientY));
-  }, tt = (t) => {
-    d && k(t.touches[0].clientX, t.touches[0].clientY);
-  }, C = (t) => I(t.changedTouches[0].clientX, t.changedTouches[0].clientY), q = (t) => I(t.clientX, t.clientY);
-  return H(() => {
+  }, nt = (t) => {
+    if (t.length < 2) return 0;
+    const r = t[0], i = t[t.length - 1], e = i.time - r.time, n = i.x - r.x;
+    if (e === 0) return 0;
+    const s = n / e;
+    return Math.max(
+      -g.MAX_VELOCITY,
+      Math.min(g.MAX_VELOCITY, s)
+    );
+  }, b = O((t) => {
+    const r = o.current ? o.current.scrollWidth - o.current.clientWidth : 0;
+    return Math.max(0, Math.min(t, r));
+  }, []), A = O(
+    (t) => {
+      if (!o.current) return;
+      const r = b(t);
+      o.current.style.transition = "unset", o.current.style.transform = `translate3d(-${r}px, 0px, 0px)`, p.current = r;
+    },
+    [b]
+  ), ot = O(
+    (t) => {
+      c.current && cancelAnimationFrame(c.current);
+      let r = t * -1, i = p.current, e = performance.now();
+      const n = (s) => {
+        if (!o.current) return;
+        const d = s - e;
+        e = s, i = b(i + r * d);
+        const f = i <= 0, y = i >= o.current.scrollWidth - o.current.clientWidth;
+        (f && r < 0 || y && r > 0) && (r = 0), r *= g.FRICTION, A(i), Math.abs(r) > g.STOP_VELOCITY ? c.current = requestAnimationFrame(n) : c.current = void 0;
+      };
+      c.current = requestAnimationFrame(n);
+    },
+    [b, A]
+  ), _ = (t, r) => {
+    c.current && (cancelAnimationFrame(c.current), c.current = void 0), S.current = !1, Z(t), B(r), tt(p.current), T.current = [{ time: performance.now(), x: t }];
+  }, X = (t, r) => {
+    if (!u.current || !o.current) return;
+    u.current = !1, o.current.style.cursor = "grab";
+    const i = D - t, e = E - r;
+    t && Math.abs(i) < L && Math.abs(e) < L * 2 && (S.current = !0);
+    const n = nt(T.current);
+    T.current = [], c.current && (cancelAnimationFrame(c.current), c.current = void 0), !S.current && Math.abs(n) >= g.MIN_VELOCITY && ot(n);
+  }, it = (t) => {
+    h && (u.current = !0, _(t.clientX, t.clientY));
+  }, st = (t) => {
+    h && _(t.touches[0].clientX, t.touches[0].clientY);
+  }, k = (t) => X(t.changedTouches[0].clientX, t.changedTouches[0].clientY), V = (t) => X(t.clientX, t.clientY);
+  return C(() => {
     const t = () => {
       var r;
-      if (s.current) {
-        const i = s.current.querySelector(".indicator"), e = (r = s.current) == null ? void 0 : r.querySelectorAll(
+      if (o.current) {
+        const i = o.current.querySelector(".indicator"), e = (r = o.current) == null ? void 0 : r.querySelectorAll(
           '[role="tab"][data-selected="true"]'
         )[0];
-        if (e && i && (i.style.width = `${e.clientWidth}px`, i.style.transform = `translate3d(${e.offsetLeft}px, 0px, 0px)`, g.current ? i.style.transition = "all 0.2s ease-in-out" : (i.style.transition = "unset", g.current = !0), V(e.getAttribute("data-disabled") === "true")), e && d) {
-          const n = e.offsetLeft, a = e.offsetLeft + e.clientWidth, b = p.current, y = p.current + s.current.clientWidth;
-          if (n < b || a > y) {
-            const v = Math.min(
+        if (e && i && (i.style.width = `${e.clientWidth}px`, i.style.transform = `translate3d(${e.offsetLeft}px, 0px, 0px)`, x.current ? i.style.transition = "all 0.2s ease-in-out" : (i.style.transition = "unset", x.current = !0), Q(e.getAttribute("data-disabled") === "true")), e && h) {
+          const n = e.offsetLeft, s = e.offsetLeft + e.clientWidth, d = p.current, f = p.current + o.current.clientWidth;
+          if (n < d || s > f) {
+            const y = Math.min(
               n,
               Math.max(
-                s.current.scrollWidth - s.current.clientWidth,
-                s.current.scrollWidth - y
+                o.current.scrollWidth - o.current.clientWidth,
+                o.current.scrollWidth - f
               )
             );
-            s.current.style.transition = "all 0.2s ease-in-out", s.current.style.transform = `translate3d(-${v}px, 0px, 0px)`, p.current = v;
+            o.current.style.transition = "all 0.2s ease-in-out", o.current.style.transform = `translate3d(-${y}px, 0px, 0px)`, p.current = y;
           }
         }
       }
@@ -109,72 +154,76 @@ const st = L.div`
     return t(), window.addEventListener("resize", t), () => {
       window.removeEventListener("resize", t);
     };
-  }, [d, u, $]), H(() => {
-    const t = s.current, r = (n, a, b) => {
-      if (!s.current) return;
-      const y = T - n, v = A - a;
-      if (c.current = c.current || Math.abs(y) > S && Math.abs(v) < S * 2, c.current && b.cancelable && (b.preventDefault(), b.stopPropagation()), c.current) {
-        let h = W + y;
-        const F = s.current.scrollWidth - s.current.clientWidth;
-        h < 0 ? h = 0 : h > F && (h = F), s.current && (f.current && cancelAnimationFrame(f.current), f.current = requestAnimationFrame(() => {
-          s.current && (s.current.style.transition = "unset", s.current.style.transform = `translate3d(-${h}px, 0px, 0px)`, p.current = h, z.current = !1);
+  }, [h, m, $]), C(() => {
+    const t = o.current, r = (n, s, d) => {
+      if (!o.current) return;
+      const f = D - n, y = E - s;
+      if (u.current = u.current || Math.abs(f) > L && Math.abs(y) < L * 2, u.current && d.cancelable && (d.preventDefault(), d.stopPropagation()), u.current) {
+        const ct = b(N + f), q = performance.now();
+        T.current = [
+          ...T.current,
+          { time: q, x: n }
+        ].filter((at) => q - at.time <= g.SAMPLE_DURATION), o.current && (c.current && cancelAnimationFrame(c.current), c.current = requestAnimationFrame(() => {
+          o.current && (A(ct), o.current.style.cursor = "grabbing", G.current = !1);
         }));
       }
     }, i = (n) => {
-      c.current && r(n.clientX, n.clientY, n);
+      u.current && r(n.clientX, n.clientY, n);
     }, e = (n) => {
-      r(n.touches[0].clientX, n.touches[0].clientY, n);
+      n.stopPropagation(), r(n.touches[0].clientX, n.touches[0].clientY, n);
     };
     return t == null || t.addEventListener("mousemove", i), t == null || t.addEventListener("touchmove", e), () => {
       t == null || t.removeEventListener("mousemove", i), t == null || t.removeEventListener("touchmove", e);
     };
-  }, [T, A, W]), /* @__PURE__ */ N(
-    st,
+  }, [b, D, E, N, A]), C(() => () => {
+    c.current && cancelAnimationFrame(c.current);
+  }, []), /* @__PURE__ */ U(
+    ft,
     {
       className: "tab-wrapper",
-      ref: P,
-      scrollable: d,
-      ...m,
-      css: m == null ? void 0 : m.inlineCSS,
-      children: /* @__PURE__ */ et(
-        it,
+      ref: K,
+      scrollable: h,
+      ...v,
+      css: v == null ? void 0 : v.inlineCSS,
+      children: /* @__PURE__ */ ut(
+        mt,
         {
           className: "tab-list",
           role: "tablist",
-          ref: s,
-          isChipped: X,
-          css: K,
-          ...O,
-          onMouseDown: B,
-          onMouseUp: q,
-          onMouseLeave: q,
-          onTouchStart: tt,
-          onTouchEnd: C,
-          onTouchCancel: C,
+          ref: o,
+          isChipped: P,
+          css: H,
+          ...z,
+          onMouseDown: it,
+          onMouseUp: V,
+          onMouseLeave: V,
+          onTouchStart: st,
+          onTouchEnd: k,
+          onTouchCancel: k,
           children: [
-            w.map(R, (t, r) => {
-              var n, a;
-              if (!M(t))
+            w.map(F, (t, r) => {
+              var n, s;
+              if (!I(t))
                 return null;
-              const i = u === t.props.value, e = Y || ((n = t.props) == null ? void 0 : n.disabled);
-              return nt(t, {
+              const i = m === t.props.value, e = W || ((n = t.props) == null ? void 0 : n.disabled);
+              return dt(t, {
                 ...t.props,
                 className: `tab-block-${r}`,
                 selected: i,
                 "aria-selected": i,
                 tabIndex: i ? 0 : -1,
-                onClick: (a = t.props) != null && a.disabled ? void 0 : Q(t.props.value),
-                onKeyDown: Z,
+                onClick: (s = t.props) != null && s.disabled ? void 0 : et(t.props.value),
+                onKeyDown: rt,
                 disabled: e,
                 size: $
               });
             }),
-            /* @__PURE__ */ N(
-              ot,
+            /* @__PURE__ */ U(
+              ht,
               {
                 className: "indicator",
-                disabled: Y || U,
-                isChipped: X
+                disabled: W || J,
+                isChipped: P
               }
             )
           ]
@@ -184,5 +233,5 @@ const st = L.div`
   );
 });
 export {
-  ut as default
+  gt as default
 };

package/Tab/TabBlock/TabBlock.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@emotion/react/jsx-runtime"),d=require("react"),p=require("../../Chip/Chip.cjs"),h=require("@emotion/styled"),b=e=>e&&e.__esModule?e:{default:e},x=b(h),y=x.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("@emotion/react/jsx-runtime"),d=require("react"),m=require("../../Chip/Chip.cjs"),p=require("@emotion/styled"),x=t=>t&&t.__esModule?t:{default:t},h=x(p),y=h.default.div`
   display: flex;
   flex: 1;
   justify-content: center;
   align-items: center;
-  padding: ${({theme:{spacing:e},size:t})=>t==="small"?`${e.content(2)}px ${e.content(3)}px`:`${e.content(3)}px ${e.content(4)}px`};
-  border-bottom: ${({theme:e})=>`1px solid ${e.palette.grey[10]}`};
-  cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
+  padding: ${({theme:{spacing:t},size:r})=>r==="small"?`${t.content(2)}px ${t.content(3)}px`:`${t.content(3)}px ${t.content(4)}px`};
+  border-bottom: ${({theme:t})=>`1px solid ${t.palette.grey[10]}`};
+  cursor: ${({disabled:t})=>t?"not-allowed":"pointer"};
 
-  ${({theme:{typography:e,palette:t},size:r,selected:o,disabled:i})=>{if(o){const{size:n,weight:s,lineHeight:g,letterSpacing:m}=e[r==="medium"?"h4B":"h5B"];return{fontSize:n,fontWeight:s,lineHeight:g,letterSpacing:m,color:i?t.grey[30]:t.grey[100]}}const{size:f,weight:a,lineHeight:l,letterSpacing:u}=e[r==="medium"?"b2R":"b4R"];return{fontSize:f,fontWeight:a,lineHeight:l,letterSpacing:u,color:i?t.grey[30]:t.grey[70]}}}}
-`,$=d.forwardRef(function({size:t="medium",selected:r,disabled:o=!1,inlineCSS:i,children:f,onClick:a,...l},u){return c.jsx(c.Fragment,{children:d.Children.map(f,n=>{var s;return d.isValidElement(n)&&!Array.isArray((s=n==null?void 0:n.props)==null?void 0:s.children)?c.jsx(p.default,{tag:"button",role:"tab",ref:u,"data-shape":"chip","data-selected":r,disabled:o,variant:r?"filled":"outlined",selected:r,onClick:a,inlineCSS:i,...n.props,...l}):c.jsx(y,{as:"button",role:"tab",ref:u,size:t,disabled:o,selected:r,"data-selected":r,"data-disabled":o,onClick:a,css:i,...l,children:n})})})});exports.default=$;
+  ${({theme:{typography:t,palette:r},size:e,selected:o,disabled:a})=>{if(o){const{size:g,weight:n,lineHeight:c,letterSpacing:b}=t[e==="medium"?"h4B":"h5B"];return{fontSize:g,fontWeight:n,lineHeight:c,letterSpacing:b,color:a?r.grey[30]:r.grey[100]}}const{size:i,weight:u,lineHeight:l,letterSpacing:s}=t[e==="medium"?"b2R":"b4R"];return{fontSize:i,fontWeight:u,lineHeight:l,letterSpacing:s,color:a?r.grey[30]:r.grey[70]}}}}
+`,$=d.forwardRef(function({size:r="medium",selected:e,disabled:o=!1,inlineCSS:a,children:i,onClick:u,...l},s){var g;return((g=d.Children.toArray(i))==null?void 0:g.length)!==1?f.jsx(y,{as:"button",role:"tab",ref:s,size:r,disabled:o,selected:e,"data-selected":e,"data-disabled":o,onClick:u,css:a,...l,children:i}):f.jsx(f.Fragment,{children:d.Children.map(i,n=>{var c;return d.isValidElement(n)&&n.type===m.default&&!Array.isArray((c=n==null?void 0:n.props)==null?void 0:c.children)?f.jsx(m.default,{tag:"button",role:"tab",ref:s,"data-shape":"chip","data-selected":e,disabled:o,variant:e?"filled":"outlined",selected:e,onClick:u,inlineCSS:a,...n.props,...l}):f.jsx(y,{as:"button",role:"tab",ref:s,size:r,disabled:o,selected:e,"data-selected":e,"data-disabled":o,onClick:u,css:a,...l,children:n})})})});exports.default=$;

package/Tab/TabBlock/TabBlock.es.js

@@ -1,84 +1,101 @@
-import { jsx as u, Fragment as c } from "@emotion/react/jsx-runtime";
-import { forwardRef as d, Children as h, isValidElement as b } from "react";
-import x from "../../Chip/Chip.es.js";
-import y from "@emotion/styled";
-const $ = y.div`
+import { jsx as p, Fragment as h } from "@emotion/react/jsx-runtime";
+import { forwardRef as x, Children as s, isValidElement as $ } from "react";
+import y from "../../Chip/Chip.es.js";
+import d from "@emotion/styled";
+const b = d.div`
   display: flex;
   flex: 1;
   justify-content: center;
   align-items: center;
-  padding: ${({ theme: { spacing: t }, size: e }) => e === "small" ? `${t.content(2)}px ${t.content(3)}px` : `${t.content(3)}px ${t.content(4)}px`};
+  padding: ${({ theme: { spacing: t }, size: r }) => r === "small" ? `${t.content(2)}px ${t.content(3)}px` : `${t.content(3)}px ${t.content(4)}px`};
   border-bottom: ${({ theme: t }) => `1px solid ${t.palette.grey[10]}`};
   cursor: ${({ disabled: t }) => t ? "not-allowed" : "pointer"};
 
-  ${({ theme: { typography: t, palette: e }, size: r, selected: o, disabled: i }) => {
-  if (o) {
+  ${({ theme: { typography: t, palette: r }, size: e, selected: n, disabled: a }) => {
+  if (n) {
     const {
-      size: n,
-      weight: f,
-      lineHeight: p,
-      letterSpacing: s
-    } = t[r === "medium" ? "h4B" : "h5B"];
+      size: u,
+      weight: o,
+      lineHeight: l,
+      letterSpacing: c
+    } = t[e === "medium" ? "h4B" : "h5B"];
     return {
-      fontSize: n,
-      fontWeight: f,
-      lineHeight: p,
-      letterSpacing: s,
-      color: i ? e.grey[30] : e.grey[100]
+      fontSize: u,
+      fontWeight: o,
+      lineHeight: l,
+      letterSpacing: c,
+      color: a ? r.grey[30] : r.grey[100]
     };
   }
   const {
-    size: g,
-    weight: a,
-    lineHeight: l,
-    letterSpacing: m
-  } = t[r === "medium" ? "b2R" : "b4R"];
+    size: i,
+    weight: m,
+    lineHeight: f,
+    letterSpacing: g
+  } = t[e === "medium" ? "b2R" : "b4R"];
   return {
-    fontSize: g,
-    fontWeight: a,
-    lineHeight: l,
-    letterSpacing: m,
-    color: i ? e.grey[30] : e.grey[70]
+    fontSize: i,
+    fontWeight: m,
+    lineHeight: f,
+    letterSpacing: g,
+    color: a ? r.grey[30] : r.grey[70]
   };
 }}}
-`, H = d(function({ size: e = "medium", selected: r, disabled: o = !1, inlineCSS: i, children: g, onClick: a, ...l }, m) {
-  return /* @__PURE__ */ u(c, { children: h.map(g, (n) => {
-    var f;
-    return b(n) && !Array.isArray((f = n == null ? void 0 : n.props) == null ? void 0 : f.children) ? /* @__PURE__ */ u(
-      x,
+`, z = x(function({ size: r = "medium", selected: e, disabled: n = !1, inlineCSS: a, children: i, onClick: m, ...f }, g) {
+  var u;
+  return ((u = s.toArray(i)) == null ? void 0 : u.length) !== 1 ? /* @__PURE__ */ p(
+    b,
+    {
+      as: "button",
+      role: "tab",
+      ref: g,
+      size: r,
+      disabled: n,
+      selected: e,
+      "data-selected": e,
+      "data-disabled": n,
+      onClick: m,
+      css: a,
+      ...f,
+      children: i
+    }
+  ) : /* @__PURE__ */ p(h, { children: s.map(i, (o) => {
+    var l;
+    return $(o) && o.type === y && !Array.isArray((l = o == null ? void 0 : o.props) == null ? void 0 : l.children) ? /* @__PURE__ */ p(
+      y,
       {
         tag: "button",
         role: "tab",
-        ref: m,
+        ref: g,
         "data-shape": "chip",
-        "data-selected": r,
-        disabled: o,
-        variant: r ? "filled" : "outlined",
-        selected: r,
-        onClick: a,
-        inlineCSS: i,
-        ...n.props,
-        ...l
+        "data-selected": e,
+        disabled: n,
+        variant: e ? "filled" : "outlined",
+        selected: e,
+        onClick: m,
+        inlineCSS: a,
+        ...o.props,
+        ...f
       }
-    ) : /* @__PURE__ */ u(
-      $,
+    ) : /* @__PURE__ */ p(
+      b,
       {
         as: "button",
         role: "tab",
-        ref: m,
-        size: e,
-        disabled: o,
-        selected: r,
-        "data-selected": r,
-        "data-disabled": o,
-        onClick: a,
-        css: i,
-        ...l,
-        children: n
+        ref: g,
+        size: r,
+        disabled: n,
+        selected: e,
+        "data-selected": e,
+        "data-disabled": n,
+        onClick: m,
+        css: a,
+        ...f,
+        children: o
       }
     );
   }) });
 });
 export {
-  H as default
+  z as default
 };