@dotss/ui 0.0.10 → 0.0.12

package/Autocomplete/Autocomplete.es.js

@@ -1,110 +1,265 @@
-import { jsxs as h, jsx as n, Fragment as D } from "@emotion/react/jsx-runtime";
-import { forwardRef as z, useRef as _, useImperativeHandle as E, useState as G, isValidElement as H, cloneElement as U } from "react";
-import W from "../CircularProgressIndicator/CircularProgressIndicator.es.js";
-import T from "../Flexbox/Flexbox.es.js";
-import p from "../Icon/Icon.es.js";
-import q from "../Menu/Menu.es.js";
-import v from "../Menu/MenuBlock/MenuBlock.es.js";
-import J from "../TextField/TextField.es.js";
-import K from "../Typography/Typography.es.js";
-const a = 100, re = z(function({
-  inputValue: l,
-  onInputChange: s,
-  menuValue: k,
-  onMenuChange: i,
-  inputProps: A,
-  minInputLengthForMenu: g = 0,
-  options: b = [],
-  isLoading: d = !1,
-  renderOptions: f,
-  renderEmpty: C,
-  filterOptions: x,
-  getOptionLabel: O
-}, N) {
-  const m = _(null);
-  E(N, () => m.current);
-  const [y, c] = G(!1), o = x ? x(b) : b.filter((e) => e.label.includes(l)), S = o.length > 0, u = l.length >= g, F = () => c((e) => !e), R = (e) => {
-    e.target.value.length > 0 ? c(!0) : i("", e, null), s(e.target.value, e);
-  }, P = () => {
-    u && c(!0);
-  }, j = (e, r) => {
-    var I;
-    if (e === void 0 || !r || !((I = r == null ? void 0 : r.target) != null && I.textContent))
+import { jsxs as C, jsx as p, Fragment as V } from "@emotion/react/jsx-runtime";
+import { forwardRef as ee, useRef as P, useId as te, useImperativeHandle as re, useState as H, useEffect as le, isValidElement as U, cloneElement as _ } from "react";
+import oe from "../CircularProgressIndicator/CircularProgressIndicator.es.js";
+import G from "../Flexbox/Flexbox.es.js";
+import ne from "../Icon/Icon.es.js";
+import ie from "../Menu/Menu.es.js";
+import A from "../Menu/MenuBlock/MenuBlock.es.js";
+import "../Menu/MenuButton/MenuButton.es.js";
+import se from "../TextField/TextField.es.js";
+import ce from "../Typography/Typography.es.js";
+import ae from "../core/useTheme.es.js";
+import W from "../utils/getSibling/getSibling.es.js";
+const S = 100, ge = ee(function({
+  inputValue: n,
+  onInputChange: u,
+  menuValue: T,
+  onMenuChange: y,
+  inputProps: J,
+  minInputLengthForMenu: q = 0,
+  options: E = [],
+  isLoading: g = !1,
+  renderOptions: D,
+  renderEmpty: F,
+  filterOptions: $,
+  getOptionLabel: h
+}, Q) {
+  const O = P(null), f = P(null), N = te(), { palette: R } = ae();
+  re(Q, () => O.current);
+  const [k, v] = H(!1), [d, m] = H(void 0), r = P(!1), x = $ ? $(E) : E.filter((e) => e.label.includes(n)), K = x.length > 0, w = n.length >= q, j = () => {
+    if (k && !T) {
+      v(!1), setTimeout(() => {
+        u("");
+      }, S);
       return;
-    const t = o.find((B) => B.value === e);
-    if (O) {
-      t && setTimeout(() => {
-        s(O(t), r), i(e.toString(), r, t);
-      }, a);
+    }
+    if (k && T) {
+      const e = x.find((l) => l.value === T);
+      if (e) {
+        const l = h ? h(e) : e.label;
+        v(!1), setTimeout(() => {
+          u(l);
+        });
+        return;
+      }
+    }
+    v((e) => !e);
+  }, X = (e) => {
+    e.target.value.length > 0 ? v(!0) : y("", e, null), u(e.target.value, e);
+  }, Y = () => {
+    w && v(!0);
+  }, Z = (e, l) => {
+    var c;
+    if (e === void 0 || !l || !((c = l == null ? void 0 : l.target) != null && c.textContent)) return;
+    const i = x.find((a) => a.value === e);
+    if (h) {
+      i && setTimeout(() => {
+        u(h(i), l), y(e.toString(), l, i);
+      }, S);
       return;
     }
     setTimeout(() => {
-      s(r.target.textContent || "", r), i(e.toString(), r, t || null);
-    }, a);
+      u(l.target.textContent || "", l), y(e.toString(), l, i || null);
+    }, S);
+  }, M = (e) => {
+    var l, i, c, a, I, b, z;
+    if (!r.current) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault(), e.stopPropagation(), r.current = !0;
+        const t = (l = f.current) == null ? void 0 : l.querySelector('li[role="option"]');
+        if (!d)
+          t && (m(t.id), t.scrollIntoView({ block: "end" }));
+        else {
+          const o = (i = f.current) == null ? void 0 : i.querySelector(
+            `#${CSS.escape(d)}`
+          );
+          if (!o) {
+            r.current = !1;
+            return;
+          }
+          const s = W(o, "next", { skipDisabled: !0 });
+          s && s.id && (m(s.id), s.scrollIntoView({ block: "end" })), s || (m(t.id), t.scrollIntoView({ block: "end" }));
+        }
+        setTimeout(() => {
+          r.current = !1;
+        }, 0);
+      }
+      if (e.key === "ArrowUp") {
+        if (e.preventDefault(), e.stopPropagation(), r.current = !0, !d) {
+          r.current = !1;
+          return;
+        }
+        const t = (c = f.current) == null ? void 0 : c.querySelector(
+          `#${CSS.escape(d)}`
+        );
+        if (!t) {
+          r.current = !1;
+          return;
+        }
+        const o = W(t, "prev", { skipDisabled: !0 });
+        if (o && o.id && (m(o.id), o.scrollIntoView({ block: "end" })), !o) {
+          const s = (a = f.current) == null ? void 0 : a.querySelector(
+            'li[role="option"]:last-child'
+          );
+          s && (m(s.id), s.scrollIntoView({ block: "end" }));
+        }
+        setTimeout(() => {
+          r.current = !1;
+        }, 0);
+      }
+      if (e.key === "Enter") {
+        if (e.preventDefault(), e.stopPropagation(), r.current = !0, !d) {
+          r.current = !1;
+          return;
+        }
+        const t = (I = f.current) == null ? void 0 : I.querySelector(
+          `#${CSS.escape(d)}`
+        );
+        if (!t) {
+          r.current = !1;
+          return;
+        }
+        const o = x.find(
+          (s) => s.value === t.dataset.value
+        );
+        v(!1), setTimeout(h && o ? () => {
+          u(h(o), e), y(t.dataset.value || "", e, o);
+        } : () => {
+          u(t.textContent || "", e), y(t.dataset.value || "", e, o || null);
+        }, S), setTimeout(() => {
+          r.current = !1;
+        }, 0);
+      }
+      if (e.key === "Home") {
+        e.preventDefault(), e.stopPropagation(), r.current = !0;
+        const t = (b = f.current) == null ? void 0 : b.querySelector('li[role="option"]');
+        t && (m(t.id), t.scrollIntoView({ block: "start" })), setTimeout(() => {
+          r.current = !1;
+        }, 0);
+      }
+      if (e.key === "End") {
+        e.preventDefault(), e.stopPropagation(), r.current = !0;
+        const t = (z = f.current) == null ? void 0 : z.querySelector(
+          'li[role="option"]:last-child'
+        );
+        t && (m(t.id), t.scrollIntoView({ block: "end" })), setTimeout(() => {
+          r.current = !1;
+        }, 0);
+      }
+      e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), r.current = !0, j(), setTimeout(() => {
+        r.current = !1;
+      }, 0));
+    }
+  }, B = (e) => {
+    v(!1), setTimeout(() => {
+      u("", e), y("", e, null);
+    }, S);
+  }, L = (e) => {
+    (e.key === "Enter" || e.key === " ") && B(e);
   };
-  return /* @__PURE__ */ h(T, { ref: m, inlineCSS: { position: "relative" }, children: [
-    /* @__PURE__ */ n(
-      J,
+  return le(() => {
+    k || m(void 0);
+  }, [k]), /* @__PURE__ */ C(G, { ref: O, inlineCSS: { position: "relative" }, children: [
+    /* @__PURE__ */ p(
+      se,
       {
-        value: l,
-        onChange: R,
-        onFocus: P,
+        value: n,
+        onChange: X,
+        onFocus: Y,
+        onKeyDown: M,
         fullWidth: !0,
-        endAdornment: l ? /* @__PURE__ */ n(
-          p,
+        autoComplete: "off",
+        role: "combobox",
+        "aria-expanded": k,
+        "aria-autocomplete": "list",
+        "aria-controls": N,
+        "aria-activedescendant": d,
+        "aria-busy": g,
+        "aria-haspopup": "listbox",
+        endAdornment: n ? /* @__PURE__ */ p(
+          ne,
           {
             name: "InvalidFill",
             color: "grey.50",
             size: "medium",
-            onClick: (e) => {
-              c(!1), setTimeout(() => {
-                s("", e), i("", e, null);
-              }, a);
-            },
+            role: "button",
+            onClick: B,
+            onKeyDown: L,
+            tabIndex: 0,
+            "aria-hidden": !1,
+            focusable: !0,
+            "aria-label": "지우기",
             inlineCSS: { cursor: "pointer" }
           }
         ) : null,
         inlineCSS: { "& svg": { flexShrink: 0 } },
-        ...A
+        ...J
       }
     ),
-    /* @__PURE__ */ h(
-      q,
+    /* @__PURE__ */ C(
+      ie,
       {
-        value: k,
-        anchorRef: m,
-        open: y && l.length >= g,
-        onClose: F,
-        onChange: j,
-        transitionDuration: a,
-        disablePadding: !u,
-        disableClickOutside: !l,
+        id: N,
+        value: T,
+        ref: f,
+        anchorRef: O,
+        open: k && n.length >= q,
+        onClose: j,
+        onChange: Z,
+        transitionDuration: S,
+        disablePadding: !w,
         children: [
-          d && /* @__PURE__ */ n(v, { value: "LOADING", disabled: !0, children: /* @__PURE__ */ n(T, { justifyContent: "center", children: /* @__PURE__ */ n(W, { size: "small", loop: !0 }) }) }),
-          !d && S && o.map((e, r) => {
-            if (f && typeof f == "function")
-              return f(e, r, o);
-            if (l && !e.label.includes(l) || !u)
-              return;
-            const t = e.label.indexOf(l);
-            return /* @__PURE__ */ n(v, { value: e.value, ...e == null ? void 0 : e.menuBlockProps, children: l ? /* @__PURE__ */ h(D, { children: [
-              e.label.slice(0, t),
-              /* @__PURE__ */ n(K, { tag: "span", variant: "h5B", color: "primary", children: e.label.slice(t, t + l.length) }),
-              e.label.slice(t + l.length)
-            ] }) : e.label }, e.value);
+          g && /* @__PURE__ */ p(A, { value: "LOADING", disabled: !0, children: /* @__PURE__ */ p(G, { justifyContent: "center", children: /* @__PURE__ */ p(oe, { size: "small", loop: !0 }) }) }),
+          !g && K && x.map((e, l) => {
+            const i = e.label.indexOf(n), c = `menu-option-${e.value}-${e.label}`, a = d === c, I = e.value === T;
+            if (D && typeof D == "function") {
+              const b = D(e, l, x);
+              return U(b) ? _(b, {
+                id: c,
+                key: e.value,
+                role: "option",
+                "aria-selected": a,
+                "data-value": e.value,
+                inlineCSS: {
+                  border: a ? `2px solid ${R.grey[100]}` : "2px solid transparent"
+                },
+                ...b.props
+              }) : b;
+            }
+            if (!(n && !e.label.includes(n)) && w)
+              return /* @__PURE__ */ p(
+                A,
+                {
+                  id: c,
+                  value: e.value,
+                  role: "option",
+                  "aria-selected": a,
+                  "data-value": e.value,
+                  inlineCSS: {
+                    border: a ? `2px solid ${R.grey[100]}` : "2px solid transparent"
+                  },
+                  ...e == null ? void 0 : e.menuBlockProps,
+                  children: n && !I ? /* @__PURE__ */ C(V, { children: [
+                    e.label.slice(0, i),
+                    /* @__PURE__ */ p(ce, { tag: "span", variant: "h5B", color: "primary", children: e.label.slice(i, i + n.length) }),
+                    e.label.slice(i + n.length)
+                  ] }) : e.label
+                },
+                e.value
+              );
           }),
-          !d && !S && (C ? (() => {
-            const e = C(l);
-            return H(e) ? U(e, {
+          !g && !K && (F ? (() => {
+            const e = F(n);
+            return U(e) ? _(e, {
               ...e.props,
               disabled: !0
             }) : e;
-          })() : /* @__PURE__ */ n(v, { value: "NO_OPTION", disabled: !0, children: "검색 결과가 없어요." }))
+          })() : /* @__PURE__ */ p(A, { value: "NO_OPTION", disabled: !0, children: "검색 결과가 없어요." }))
         ]
       }
     )
   ] });
 });
 export {
-  re as default
+  ge as default
 };

package/BottomSheet/BottomSheet.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("@emotion/react/jsx-runtime"),r=require("react"),q=require("../Backdrop/Backdrop.cjs"),B=require("../Flexbox/Flexbox.cjs"),O=require("@emotion/styled"),C=e=>e&&e.__esModule?e:{default:e},l=C(O),P=l.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("@emotion/react/jsx-runtime"),r=require("react"),K=require("../Backdrop/Backdrop.cjs"),U=require("../Flexbox/Flexbox.cjs"),z=require("../hooks/useFocusBoundary/useFocusBoundary.cjs"),G=require("@emotion/styled"),J=e=>e&&e.__esModule?e:{default:e},f=J(G),N=f.default.div`
   display: flex;
   justify-content: flex-end;
   flex-direction: column;
@@ -6,7 +6,7 @@
   height: 100%;
   cursor: ${({isDragging:e})=>e?"grabbing":"default"};
   overflow: hidden;
-`,A=l.default.div`
+`,Q=f.default.div`
   display: flex;
   flex-direction: column;
   max-height: 100%;
@@ -17,17 +17,17 @@
   box-shadow: ${({theme:{elevation:e}})=>e[4]};
   transition: transform ${({transitionDuration:e})=>e}ms;
   transform: translate3d(0, ${({open:e})=>e?0:"100%"}, 0);
-`,H=l.default.div`
+`,V=f.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
   padding: ${({theme:{spacing:e}})=>e.content(3)}px
     ${({theme:{spacing:e}})=>e.content(4)}px;
   cursor: ${({isDragging:e})=>e?"grabbing":"grab"};
-`,I=l.default.div`
+`,X=f.default.div`
   width: 32px;
   height: 4px;
   border-radius: 100px;
   background-color: ${({theme:{palette:{grey:e}}})=>e[60]};
   cursor: ${({isDragging:e})=>e?"grabbing":"grab"};
-`,L=r.forwardRef(function({children:y,open:a,onClose:n,transitionDuration:d=200,inlineCSS:b,enableDragCloseHandler:T,backdropProps:M,systemNavigationBarColor:S="#FFFFFF",hideSystemNavigationBar:$=!1,...w},k){const[D,g]=r.useState(!1),[o,f]=r.useState(!1),c=r.useRef(),h=r.useRef(0),u=r.useRef(0),j=t=>t.stopPropagation(),R=t=>{f(!1),o&&t.stopPropagation()},m=t=>()=>{f(!0),h.current=t},p=(t,i)=>()=>{o&&(u.current=t-h.current,!(u.current<0)&&(i.currentTarget.style.transitionDuration="0ms",i.currentTarget.style.transform=`translate3d(0, ${u.current}px, 0)`))},x=t=>{u.current>=20&&typeof n=="function"?(t.currentTarget.style.transitionDuration=`${d}ms`,t.currentTarget.style.transform="translate3d(0, 100%, 0)",n()):t.currentTarget.removeAttribute("style"),h.current=0,u.current=0,f(!1)},v=t=>{o&&t.currentTarget.removeAttribute("style")},E=t=>m(t.clientY)(),F=t=>p(t.clientY,t)(),_=t=>m(t.touches[0].clientY)(),Y=t=>p(t.touches[0].clientY,t)();return r.useEffect(()=>{a?(c.current&&clearTimeout(c.current),c.current=setTimeout(()=>{g(!0)},100)):g(!1)},[a]),r.useEffect(()=>{const t=i=>{i.key==="Escape"&&a&&n&&n()};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[a,n]),r.useEffect(()=>()=>{c.current&&clearTimeout(c.current)},[]),s.jsx(q.default,{open:a,onClose:n,transitionDuration:d,fullScreen:!0,...M,children:s.jsx(P,{isDragging:o,onClick:R,children:s.jsxs(A,{ref:k,open:D,transitionDuration:d,onClick:j,onMouseMove:F,onMouseUp:x,onMouseOut:v,onTouchMove:Y,onTouchEnd:x,onTouchCancel:v,...w,css:b,children:[T&&s.jsx(H,{isDragging:o,onMouseDown:E,onTouchStart:_,children:s.jsx(I,{isDragging:o})}),y,!$&&s.jsx(B.default,{inlineCSS:{minHeight:"var(--system-navigation-bar-height, 0px)",backgroundColor:S}})]})})})});exports.default=L;
+`,Z=r.forwardRef(function({children:$,open:n,onClose:o,transitionDuration:i=200,inlineCSS:w,enableDragCloseHandler:k,backdropProps:R,systemNavigationBarColor:j="#FFFFFF",hideSystemNavigationBar:D=!1,disableFocusBoundary:q=!1,returnFocus:E=!0,initialFocusId:F,..._},B){var v,T,S,M;const[Y,m]=r.useState(!1),[a,h]=r.useState(!1),l=r.useRef(null),c=r.useRef(),g=r.useRef(0),u=r.useRef(0);z.default({ref:l,active:n,delay:i,disabled:q,returnFocus:E,initialFocusId:F});const O=((T=(v=l.current)==null?void 0:v.querySelector('[id^="bottom-sheet-title"]'))==null?void 0:T.getAttribute("id"))||void 0,A=((M=(S=l.current)==null?void 0:S.querySelector('[id^="bottom-sheet-text"]'))==null?void 0:M.getAttribute("id"))||void 0,C=t=>t.stopPropagation(),I=t=>{h(!1),a&&t.stopPropagation()},p=t=>()=>{h(!0),g.current=t},b=(t,d)=>()=>{a&&(u.current=t-g.current,!(u.current<0)&&(d.currentTarget.style.transitionDuration="0ms",d.currentTarget.style.transform=`translate3d(0, ${u.current}px, 0)`))},x=t=>{u.current>=20&&typeof o=="function"?(t.currentTarget.style.transitionDuration=`${i}ms`,t.currentTarget.style.transform="translate3d(0, 100%, 0)",o()):t.currentTarget.removeAttribute("style"),g.current=0,u.current=0,h(!1)},y=t=>{a&&t.currentTarget.removeAttribute("style")},P=t=>p(t.clientY)(),H=t=>b(t.clientY,t)(),L=t=>p(t.touches[0].clientY)(),W=t=>b(t.touches[0].clientY,t)();return r.useEffect(()=>{n?(c.current&&clearTimeout(c.current),c.current=setTimeout(()=>{m(!0)},100)):m(!1)},[n]),r.useEffect(()=>{const t=d=>{d.key==="Escape"&&n&&o&&o()};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[n,o]),r.useEffect(()=>()=>{c.current&&clearTimeout(c.current)},[]),s.jsx(K.default,{open:n,onClose:o,transitionDuration:i,fullScreen:!0,...R,children:s.jsx(N,{ref:l,isDragging:a,onClick:I,children:s.jsxs(Q,{ref:B,open:Y,transitionDuration:i,onClick:C,onMouseMove:H,onMouseUp:x,onMouseOut:y,onTouchMove:W,onTouchEnd:x,onTouchCancel:y,role:"dialog","aria-modal":"true","aria-labelledby":O,"aria-describedby":A,..._,css:w,children:[k&&s.jsx(V,{isDragging:a,onMouseDown:P,onTouchStart:L,children:s.jsx(X,{isDragging:a})}),$,!D&&s.jsx(U.default,{inlineCSS:{minHeight:"var(--system-navigation-bar-height, 0px)",backgroundColor:j}})]})})})});exports.default=Z;

package/BottomSheet/BottomSheet.d.ts

@@ -10,6 +10,9 @@ export interface BottomSheetProps extends GeneralComponentProps<HTMLAttributes<H
     backdropProps?: BackdropProps;
     systemNavigationBarColor?: string;
     hideSystemNavigationBar?: boolean;
+    disableFocusBoundary?: boolean;
+    returnFocus?: boolean;
+    initialFocusId?: string;
 }
 declare const BottomSheet: import('react').ForwardRefExoticComponent<BottomSheetProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BottomSheet;

package/BottomSheet/BottomSheet.es.js

@@ -1,9 +1,10 @@
-import { jsx as s, jsxs as A } from "@emotion/react/jsx-runtime";
-import { forwardRef as H, useState as b, useRef as h, useEffect as m } from "react";
-import I from "../Backdrop/Backdrop.es.js";
-import L from "../Flexbox/Flexbox.es.js";
-import u from "@emotion/styled";
-const P = u.div`
+import { jsx as i, jsxs as G } from "@emotion/react/jsx-runtime";
+import { forwardRef as J, useState as k, useRef as d, useEffect as g } from "react";
+import N from "../Backdrop/Backdrop.es.js";
+import Q from "../Flexbox/Flexbox.es.js";
+import V from "../hooks/useFocusBoundary/useFocusBoundary.es.js";
+import f from "@emotion/styled";
+const X = f.div`
   display: flex;
   justify-content: flex-end;
   flex-direction: column;
@@ -11,7 +12,7 @@ const P = u.div`
   height: 100%;
   cursor: ${({ isDragging: t }) => t ? "grabbing" : "default"};
   overflow: hidden;
-`, W = u.div`
+`, Z = f.div`
   display: flex;
   flex-direction: column;
   max-height: 100%;
@@ -26,14 +27,14 @@ const P = u.div`
   box-shadow: ${({ theme: { elevation: t } }) => t[4]};
   transition: transform ${({ transitionDuration: t }) => t}ms;
   transform: translate3d(0, ${({ open: t }) => t ? 0 : "100%"}, 0);
-`, K = u.div`
+`, _ = f.div`
   display: flex;
   align-items: center;
   justify-content: center;
   padding: ${({ theme: { spacing: t } }) => t.content(3)}px
     ${({ theme: { spacing: t } }) => t.content(4)}px;
   cursor: ${({ isDragging: t }) => t ? "grabbing" : "grab"};
-`, U = u.div`
+`, ee = f.div`
   width: 32px;
   height: 4px;
   border-radius: 100px;
@@ -43,80 +44,97 @@ const P = u.div`
   }
 }) => t[60]};
   cursor: ${({ isDragging: t }) => t ? "grabbing" : "grab"};
-`, Q = H(function({
-  children: T,
-  open: o,
-  onClose: r,
-  transitionDuration: l = 200,
-  inlineCSS: $,
-  enableDragCloseHandler: w,
-  backdropProps: k,
-  systemNavigationBarColor: M = "#FFFFFF",
-  hideSystemNavigationBar: S = !1,
-  ...D
-}, F) {
-  const [E, g] = b(!1), [n, d] = b(!1), a = h(), f = h(0), c = h(0), Y = (e) => e.stopPropagation(), B = (e) => {
-    d(!1), n && e.stopPropagation();
-  }, p = (e) => () => {
-    d(!0), f.current = e;
-  }, x = (e, i) => () => {
-    n && (c.current = e - f.current, !(c.current < 0) && (i.currentTarget.style.transitionDuration = "0ms", i.currentTarget.style.transform = `translate3d(0, ${c.current}px, 0)`));
-  }, v = (e) => {
-    c.current >= 20 && typeof r == "function" ? (e.currentTarget.style.transitionDuration = `${l}ms`, e.currentTarget.style.transform = "translate3d(0, 100%, 0)", r()) : e.currentTarget.removeAttribute("style"), f.current = 0, c.current = 0, d(!1);
+`, ie = J(function({
+  children: M,
+  open: r,
+  onClose: n,
+  transitionDuration: s = 200,
+  inlineCSS: D,
+  enableDragCloseHandler: F,
+  backdropProps: B,
+  systemNavigationBarColor: E = "#FFFFFF",
+  hideSystemNavigationBar: R = !1,
+  disableFocusBoundary: Y = !1,
+  returnFocus: j = !0,
+  initialFocusId: A,
+  ...C
+}, I) {
+  var T, S, $, w;
+  const [O, p] = k(!1), [o, h] = k(!1), l = d(null), a = d(), m = d(0), c = d(0);
+  V({
+    ref: l,
+    active: r,
+    delay: s,
+    disabled: Y,
+    returnFocus: j,
+    initialFocusId: A
+  });
+  const q = ((S = (T = l.current) == null ? void 0 : T.querySelector('[id^="bottom-sheet-title"]')) == null ? void 0 : S.getAttribute("id")) || void 0, H = ((w = ($ = l.current) == null ? void 0 : $.querySelector('[id^="bottom-sheet-text"]')) == null ? void 0 : w.getAttribute("id")) || void 0, L = (e) => e.stopPropagation(), P = (e) => {
+    h(!1), o && e.stopPropagation();
+  }, b = (e) => () => {
+    h(!0), m.current = e;
+  }, x = (e, u) => () => {
+    o && (c.current = e - m.current, !(c.current < 0) && (u.currentTarget.style.transitionDuration = "0ms", u.currentTarget.style.transform = `translate3d(0, ${c.current}px, 0)`));
   }, y = (e) => {
-    n && e.currentTarget.removeAttribute("style");
-  }, R = (e) => p(e.clientY)(), j = (e) => x(e.clientY, e)(), C = (e) => p(e.touches[0].clientY)(), O = (e) => x(e.touches[0].clientY, e)();
-  return m(() => {
-    o ? (a.current && clearTimeout(a.current), a.current = setTimeout(() => {
-      g(!0);
-    }, 100)) : g(!1);
-  }, [o]), m(() => {
-    const e = (i) => {
-      i.key === "Escape" && o && r && r();
+    c.current >= 20 && typeof n == "function" ? (e.currentTarget.style.transitionDuration = `${s}ms`, e.currentTarget.style.transform = "translate3d(0, 100%, 0)", n()) : e.currentTarget.removeAttribute("style"), m.current = 0, c.current = 0, h(!1);
+  }, v = (e) => {
+    o && e.currentTarget.removeAttribute("style");
+  }, W = (e) => b(e.clientY)(), K = (e) => x(e.clientY, e)(), U = (e) => b(e.touches[0].clientY)(), z = (e) => x(e.touches[0].clientY, e)();
+  return g(() => {
+    r ? (a.current && clearTimeout(a.current), a.current = setTimeout(() => {
+      p(!0);
+    }, 100)) : p(!1);
+  }, [r]), g(() => {
+    const e = (u) => {
+      u.key === "Escape" && r && n && n();
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [o, r]), m(() => () => {
+  }, [r, n]), g(() => () => {
     a.current && clearTimeout(a.current);
-  }, []), /* @__PURE__ */ s(
-    I,
+  }, []), /* @__PURE__ */ i(
+    N,
     {
-      open: o,
-      onClose: r,
-      transitionDuration: l,
+      open: r,
+      onClose: n,
+      transitionDuration: s,
       fullScreen: !0,
-      ...k,
-      children: /* @__PURE__ */ s(P, { isDragging: n, onClick: B, children: /* @__PURE__ */ A(
-        W,
+      ...B,
+      children: /* @__PURE__ */ i(X, { ref: l, isDragging: o, onClick: P, children: /* @__PURE__ */ G(
+        Z,
         {
-          ref: F,
-          open: E,
-          transitionDuration: l,
-          onClick: Y,
-          onMouseMove: j,
-          onMouseUp: v,
-          onMouseOut: y,
-          onTouchMove: O,
-          onTouchEnd: v,
-          onTouchCancel: y,
-          ...D,
-          css: $,
+          ref: I,
+          open: O,
+          transitionDuration: s,
+          onClick: L,
+          onMouseMove: K,
+          onMouseUp: y,
+          onMouseOut: v,
+          onTouchMove: z,
+          onTouchEnd: y,
+          onTouchCancel: v,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": q,
+          "aria-describedby": H,
+          ...C,
+          css: D,
           children: [
-            w && /* @__PURE__ */ s(
-              K,
+            F && /* @__PURE__ */ i(
+              _,
               {
-                isDragging: n,
-                onMouseDown: R,
-                onTouchStart: C,
-                children: /* @__PURE__ */ s(U, { isDragging: n })
+                isDragging: o,
+                onMouseDown: W,
+                onTouchStart: U,
+                children: /* @__PURE__ */ i(ee, { isDragging: o })
               }
             ),
-            T,
-            !S && /* @__PURE__ */ s(
-              L,
+            M,
+            !R && /* @__PURE__ */ i(
+              Q,
               {
                 inlineCSS: {
                   minHeight: "var(--system-navigation-bar-height, 0px)",
-                  backgroundColor: M
+                  backgroundColor: E
                 }
               }
             )
@@ -127,5 +145,5 @@ const P = u.div`
   );
 });
 export {
-  Q as default
+  ie as default
 };

package/BottomSheet/BottomSheetText/BottomSheetText.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("@emotion/react/jsx-runtime"),u=require("react"),a=require("@emotion/styled"),c=e=>e&&e.__esModule?e:{default:e},g=c(a),f=g.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@emotion/react/jsx-runtime"),o=require("react"),a=require("@emotion/styled"),d=e=>e&&e.__esModule?e:{default:e},g=d(a),f=g.default.div`
   text-align: ${({textAlign:e})=>e};
 
   ${({theme:{palette:{grey:e},typography:{b2R:t,b4R:i}},type:n})=>n==="sub"?{fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,color:e[70]}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}}
-`,d=u.forwardRef(function({children:t,type:i="main",textAlign:n="center",inlineCSS:o,...r},l){return s.jsx(f,{ref:l,type:i,textAlign:n,...r,css:o,children:t})});exports.default=d;
+`,h=o.forwardRef(function({children:t,type:i="main",textAlign:n="center",inlineCSS:r,...l},s){const u=o.useId();return c.jsx(f,{ref:s,type:i,textAlign:n,id:`bottom-sheet-text-${u}`,...l,css:r,children:t})});exports.default=h;