@dotss/ui 1.0.8 → 1.0.10

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/hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),s=["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Enter"," ","Home","End","PageUp","PageDown"];function u(){const[r,e]=n.useState(!1);return n.useEffect(()=>{const o=d=>{s.includes(d.key)&&e(!0)},t=()=>{e(!1)};return document.addEventListener("keydown",o),document.addEventListener("mousedown",t),()=>{document.removeEventListener("keydown",o),document.removeEventListener("mousedown",t)}},[]),{isKeyboardMode:r}}exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),i=["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Enter"," ","Home","End","PageUp","PageDown"];function c(){const[u,t]=a.useState(!1);return a.useEffect(()=>{const o=r=>{var s;if(i.includes(r.key)){const e=r.target,d=(s=e==null?void 0:e.tagName)==null?void 0:s.toLowerCase();if(d==="input"||d==="textarea"||e.isContentEditable||(e==null?void 0:e.getAttribute("role"))==="textbox"){t(!1);return}t(!0)}},n=()=>{t(!1)};return document.addEventListener("keydown",o),document.addEventListener("mousedown",n),()=>{document.removeEventListener("keydown",o),document.removeEventListener("mousedown",n)}},[]),{isKeyboardMode:u}}exports.default=c;

package/hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js

@@ -1,5 +1,5 @@
-import { useState as d, useEffect as s } from "react";
-const u = [
+import { useState as i, useEffect as u } from "react";
+const c = [
   "Tab",
   "ArrowUp",
   "ArrowDown",
@@ -12,19 +12,27 @@ const u = [
   "PageUp",
   "PageDown"
 ];
-function c() {
-  const [t, e] = d(!1);
-  return s(() => {
+function E() {
+  const [a, t] = i(!1);
+  return u(() => {
     const o = (r) => {
-      u.includes(r.key) && e(!0);
+      var s;
+      if (c.includes(r.key)) {
+        const e = r.target, d = (s = e == null ? void 0 : e.tagName) == null ? void 0 : s.toLowerCase();
+        if (d === "input" || d === "textarea" || e.isContentEditable || (e == null ? void 0 : e.getAttribute("role")) === "textbox") {
+          t(!1);
+          return;
+        }
+        t(!0);
+      }
     }, n = () => {
-      e(!1);
+      t(!1);
     };
     return document.addEventListener("keydown", o), document.addEventListener("mousedown", n), () => {
       document.removeEventListener("keydown", o), document.removeEventListener("mousedown", n);
     };
-  }, []), { isKeyboardMode: t };
+  }, []), { isKeyboardMode: a };
 }
 export {
-  c as default
+  E as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotss/ui",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "React UI components for Dotss",
   "type": "module",
   "main": "./index.cjs",
@@ -60,22 +60,15 @@
     "ui"
   ],
   "devDependencies": {
-    "@chromatic-com/storybook": "^1",
+    "@chromatic-com/storybook": "^4.1.1",
     "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.1.4",
     "@emotion/styled": "^11.11.5",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-docs": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-viewport": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
+    "@storybook/addon-a11y": "^9.1.15",
+    "@storybook/addon-links": "^9.1.15",
+    "@storybook/react": "^9.1.15",
+    "@storybook/react-vite": "^9.1.15",
+    "@storybook/addon-docs": "^9.1.15",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -91,7 +84,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "storybook": "^8.6.14",
+    "storybook": "^9.1.15",
     "vite": "^6.3.3",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-svgr": "^4.2.0",