@dotss/ui 1.2.0 → 1.2.1

package/Snackbar/Snackbar.cjs

@@ -37,4 +37,4 @@
   margin: -8px -8px -8px 0;
 
   ${({theme:{palette:{grey:e}},variant:c})=>{let s={"& svg":{color:e.white}};return c==="secondary"&&(s={"& svg":{color:"inherit"}}),s}}
-`,D=r.forwardRef(function({children:c,open:s,onClose:n,hideClose:y,bottom:q=96,icon:h,action:$,severity:v,variant:x="primary",transitionDuration:T=200,autoHideDuration:b=3e3,containerRef:u,inlineCSS:I,role:_="alert",ariaLive:z="assertive",focusable:a=!1,...O},W){const f=r.useRef(null),g=r.useRef(null),[S,j]=r.useState(!1),[R,k]=r.useState(!0),[F,P]=r.useState(0),[B,A]=r.useState(0),[H,M]=r.useState(0),d=r.useRef(),m=r.useRef(),o=r.useRef(),C=!!h||["success","error"].includes(v),N=!!(u!=null&&u.current),G=t=>t.stopPropagation();return r.useEffect(()=>{s&&(a&&(g.current=document.activeElement),o.current&&clearTimeout(o.current),m.current&&clearTimeout(m.current),k(!1),d.current=setTimeout(()=>{var t;if(j(!0),a&&f.current){const i=(t=f.current.parentElement)==null?void 0:t.querySelector('button, [tabindex]:not([tabindex="-1"])');i==null||i.focus()}},100))},[s,a]),r.useEffect(()=>{s||(o.current&&clearTimeout(o.current),d.current&&clearTimeout(d.current),j(!1),m.current=setTimeout(()=>{k(!0),a&&g.current&&(g.current.focus(),g.current=null)},T))},[s,T,a]),r.useEffect(()=>{S&&b&&(o.current&&clearTimeout(o.current),o.current=setTimeout(()=>{typeof n=="function"&&n()},b))},[S,n,b]),r.useEffect(()=>{const t=i=>{var p,E;f.current&&((E=(p=f.current)==null?void 0:p.parentNode)!=null&&E.contains(i.target)||typeof n=="function"&&n())};return window.addEventListener("mousedown",t),()=>{window.removeEventListener("mousedown",t)}},[n]),r.useEffect(()=>{const t=u==null?void 0:u.current,i=()=>{var p;t&&(P((t==null?void 0:t.offsetTop)||0),A(((p=t.getBoundingClientRect())==null?void 0:p.left)||0),M((t==null?void 0:t.offsetWidth)||0))};return t&&(i(),window.addEventListener("resize",i)),()=>{t&&window.removeEventListener("resize",i)}},[u]),r.useEffect(()=>()=>{d.current&&clearTimeout(d.current),m.current&&clearTimeout(m.current),o.current&&clearTimeout(o.current)},[]),R?null:J.createPortal(l.jsxs(V,{ref:W,open:S,variant:x,bottom:q,transitionDuration:T,onClick:G,hasContainer:N,containerTop:F,containerLeft:B,containerWidth:H,role:_,"aria-live":z,...O,css:I,children:[C&&l.jsxs(Y,{children:[!h&&v==="success"&&l.jsx(L.default,{name:"CompleteFill",color:"green.70"}),!h&&v==="error"&&l.jsx(L.default,{name:"AlertFill",color:"etc.red"}),h]}),l.jsx(X,{ref:f,variant:x,hasIcon:C,tabIndex:a?-1:void 0,children:c}),!y&&!$&&l.jsx(Z,{variant:x,children:l.jsx(K.default,{name:"CloseLine",color:x==="primary"?"tertiary":"primary",onClick:n,"aria-label":"닫기"})}),$]}),document.body)});exports.default=D;
+`,D=r.forwardRef(function({children:c,open:s,onClose:n,hideClose:y,bottom:q=96,icon:h,action:$,severity:T,variant:x="primary",transitionDuration:b=200,autoHideDuration:v=3e3,containerRef:u,inlineCSS:I,role:_="status",ariaLive:z="polite",focusable:a=!1,...O},W){const f=r.useRef(null),g=r.useRef(null),[S,j]=r.useState(!1),[R,k]=r.useState(!0),[F,P]=r.useState(0),[B,A]=r.useState(0),[H,M]=r.useState(0),d=r.useRef(),m=r.useRef(),o=r.useRef(),C=!!h||["success","error"].includes(T),N=!!(u!=null&&u.current),G=t=>t.stopPropagation();return r.useEffect(()=>{s&&(a&&(g.current=document.activeElement),o.current&&clearTimeout(o.current),m.current&&clearTimeout(m.current),k(!1),d.current=setTimeout(()=>{var t;if(j(!0),a&&f.current){const i=(t=f.current.parentElement)==null?void 0:t.querySelector('button, [tabindex]:not([tabindex="-1"])');i==null||i.focus()}},100))},[s,a]),r.useEffect(()=>{s||(o.current&&clearTimeout(o.current),d.current&&clearTimeout(d.current),j(!1),m.current=setTimeout(()=>{k(!0),a&&g.current&&(g.current.focus(),g.current=null)},b))},[s,b,a]),r.useEffect(()=>{S&&v&&(o.current&&clearTimeout(o.current),o.current=setTimeout(()=>{typeof n=="function"&&n()},v))},[S,n,v]),r.useEffect(()=>{const t=i=>{var p,E;f.current&&((E=(p=f.current)==null?void 0:p.parentNode)!=null&&E.contains(i.target)||typeof n=="function"&&n())};return window.addEventListener("mousedown",t),()=>{window.removeEventListener("mousedown",t)}},[n]),r.useEffect(()=>{const t=u==null?void 0:u.current,i=()=>{var p;t&&(P((t==null?void 0:t.offsetTop)||0),A(((p=t.getBoundingClientRect())==null?void 0:p.left)||0),M((t==null?void 0:t.offsetWidth)||0))};return t&&(i(),window.addEventListener("resize",i)),()=>{t&&window.removeEventListener("resize",i)}},[u]),r.useEffect(()=>()=>{d.current&&clearTimeout(d.current),m.current&&clearTimeout(m.current),o.current&&clearTimeout(o.current)},[]),R?null:J.createPortal(l.jsxs(V,{ref:W,open:S,variant:x,bottom:q,transitionDuration:b,onClick:G,hasContainer:N,containerTop:F,containerLeft:B,containerWidth:H,role:_,"aria-live":z,...O,css:I,children:[C&&l.jsxs(Y,{children:[!h&&T==="success"&&l.jsx(L.default,{name:"CompleteFill",color:"green.70"}),!h&&T==="error"&&l.jsx(L.default,{name:"AlertFill",color:"etc.red"}),h]}),l.jsx(X,{ref:f,variant:x,hasIcon:C,tabIndex:a?-1:void 0,children:c}),!y&&!$&&l.jsx(Z,{variant:x,children:l.jsx(K.default,{name:"CloseLine",color:x==="primary"?"tertiary":"primary",onClick:n,"aria-label":"닫기"})}),$]}),document.body)});exports.default=D;

package/Snackbar/Snackbar.es.js

@@ -13,12 +13,12 @@ const M = T.div`
   hasContainer: o,
   containerTop: n,
   containerLeft: r,
-  containerWidth: v
+  containerWidth: b
 }) => o ? {
   left: r,
   bottom: n,
   // 32: 좌우 너비
-  width: v - e.layout(4)
+  width: b - e.layout(4)
 } : {
   left: 0,
   width: "calc(100% - 32px)"
@@ -102,22 +102,22 @@ const M = T.div`
   children: o,
   open: n,
   onClose: r,
-  hideClose: v,
+  hideClose: b,
   bottom: E = 96,
   icon: g,
   action: S,
-  severity: b,
+  severity: v,
   variant: x = "primary",
   transitionDuration: $ = 200,
   autoHideDuration: k = 3e3,
   containerRef: s,
   inlineCSS: F,
-  role: B = "alert",
-  ariaLive: P = "assertive",
+  role: B = "status",
+  ariaLive: P = "polite",
   focusable: u = !1,
   ...q
 }, A) {
-  const a = h(null), y = h(null), [C, L] = w(!1), [H, I] = w(!0), [N, G] = w(0), [J, K] = w(0), [Q, U] = w(0), d = h(), m = h(), i = h(), z = !!g || ["success", "error"].includes(b), V = !!(s != null && s.current), X = (t) => t.stopPropagation();
+  const a = h(null), y = h(null), [C, L] = w(!1), [H, I] = w(!0), [N, G] = w(0), [J, K] = w(0), [Q, U] = w(0), d = h(), m = h(), i = h(), z = !!g || ["success", "error"].includes(v), V = !!(s != null && s.current), X = (t) => t.stopPropagation();
   return l(() => {
     n && (u && (y.current = document.activeElement), i.current && clearTimeout(i.current), m.current && clearTimeout(m.current), I(!1), d.current = setTimeout(() => {
       var t;
@@ -174,8 +174,8 @@ const M = T.div`
         css: F,
         children: [
           z && /* @__PURE__ */ O(D, { children: [
-            !g && b === "success" && /* @__PURE__ */ p(W, { name: "CompleteFill", color: "green.70" }),
-            !g && b === "error" && /* @__PURE__ */ p(W, { name: "AlertFill", color: "etc.red" }),
+            !g && v === "success" && /* @__PURE__ */ p(W, { name: "CompleteFill", color: "green.70" }),
+            !g && v === "error" && /* @__PURE__ */ p(W, { name: "AlertFill", color: "etc.red" }),
             g
           ] }),
           /* @__PURE__ */ p(
@@ -188,7 +188,7 @@ const M = T.div`
               children: o
             }
           ),
-          !v && !S && /* @__PURE__ */ p(ee, { variant: x, children: /* @__PURE__ */ p(
+          !b && !S && /* @__PURE__ */ p(ee, { variant: x, children: /* @__PURE__ */ p(
             _,
             {
               name: "CloseLine",

package/Tooltip/Tooltip.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@emotion/react/jsx-runtime"),s=require("react"),y=require("../Flexbox/Flexbox.cjs"),j=require("../Icon/Icon.cjs"),X=require("../Typography/Typography.cjs"),N=require("../hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs"),F=require("@emotion/styled"),H=t=>t&&t.__esModule?t:{default:t},q=H(F),V=q.default.div`
   position: relative;
   display: inline-block;
-  &[open] > .tooltip {
+  &[open] > [role='dialog'] {
     display: flex;
   }
 `,W=q.default.div`

package/Tooltip/Tooltip.es.js

@@ -8,7 +8,7 @@ import z from "@emotion/styled";
 const _ = z.div`
   position: relative;
   display: inline-block;
-  &[open] > .tooltip {
+  &[open] > [role='dialog'] {
     display: flex;
   }
 `, A = z.div`

package/package.json

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