@smwb/ui-react 2.7.0 → 2.8.0

package/dist/headless/components/feedBack/modal/modal.js

@@ -1,41 +1,41 @@
-import { jsx as o, Fragment as D } from "react/jsx-runtime";
-import { forwardRef as L, useState as S, useRef as c, useEffect as $ } from "react";
+import { jsx as t, Fragment as D } from "react/jsx-runtime";
+import { forwardRef as L, useState as S, useRef as f, useEffect as $ } from "react";
 import { CSSTransition as h } from "react-transition-group";
 import { createPortal as A } from "react-dom";
 import a from "clsx";
 import { useSafeLayoutEffect as F } from "../../../hooks/useSafeLayoutEffect.js";
 import { useForkRef as M } from "../../../hooks/useForkRef.js";
 import { isTopOverlayLayer as O } from "../../../utils/overlayLayer.js";
-const j = L(function({
+const P = L(function({
   children: e,
   onClose: r,
   open: m,
-  className: f,
-  animation: u = "fade",
-  backdrop: p = "dark",
-  size: i = "large",
-  closeOnOutsideClick: v = !0,
-  asForm: _ = !1,
-  disableAppearAnimation: w = !1,
-  role: b = "dialog",
-  closeOnEsc: d = !0,
-  ...y
-}, k) {
-  const [l, x] = S(), s = c(null), R = c(null), E = M(k, R);
+  className: u,
+  animation: p = "fade",
+  backdrop: v = "dark",
+  size: d = "large",
+  closeOnOutsideClick: _ = !0,
+  asForm: w = !1,
+  disableAppearAnimation: b = !1,
+  role: y = "dialog",
+  closeOnEsc: i = !0,
+  ...k
+}, x) {
+  const [l, R] = S(), s = f(null), E = f(null), N = M(x, E);
   if (F(() => {
-    x(document.body);
+    R(document.body);
   }, []), $(() => {
-    if (!m || !d || !r)
+    if (!m || !i || !r)
       return;
-    const n = (g) => {
-      g.key === "Escape" && O(s.current) && r();
+    const n = (c) => {
+      c.key === "Escape" && !c.defaultPrevented && O(s.current) && r();
     };
     return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
-  }, [m, d, r]), !l)
-    return /* @__PURE__ */ o(D, {});
-  const N = _ ? "form" : "div";
+  }, [m, i, r]), !l)
+    return /* @__PURE__ */ t(D, {});
+  const g = w ? "form" : "div";
   return A(
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ t(
       h,
       {
         timeout: {
@@ -54,26 +54,26 @@ const j = L(function({
           exit: "smwb-modal__overlay-exit",
           exitActive: "smwb-modal__overlay-exit-active"
         },
-        appear: !w,
+        appear: !b,
         mountOnEnter: !0,
         unmountOnExit: !0,
         nodeRef: s,
-        children: /* @__PURE__ */ o(
+        children: /* @__PURE__ */ t(
           "div",
           {
             ref: s,
             "data-smwb-overlay-layer": "",
-            className: a("smwb-modal__overlay", `smwb-${p}`, `smwb-${i}`),
-            onClick: v && r ? r : void 0,
-            children: /* @__PURE__ */ o(
-              N,
+            className: a("smwb-modal__overlay", `smwb-${v}`, `smwb-${d}`),
+            onClick: _ && r ? r : void 0,
+            children: /* @__PURE__ */ t(
+              g,
               {
-                ref: E,
-                className: a("smwb-modal", `smwb-${i}`, `smwb-${u}`, f),
+                ref: N,
+                className: a("smwb-modal", `smwb-${d}`, `smwb-${p}`, u),
                 onClick: (n) => n.stopPropagation(),
-                role: b,
+                role: y,
                 "aria-modal": "true",
-                ...y,
+                ...k,
                 children: e
               }
             )
@@ -84,24 +84,24 @@ const j = L(function({
     l
   );
 });
-function C({ className: t, children: e }) {
-  return /* @__PURE__ */ o("div", { className: a("smwb-modal__header", t), children: e });
+function j({ className: o, children: e }) {
+  return /* @__PURE__ */ t("div", { className: a("smwb-modal__header", o), children: e });
 }
-function P({ className: t, children: e }) {
-  return /* @__PURE__ */ o("div", { className: a("smwb-modal__content", t), children: e });
+function C({ className: o, children: e }) {
+  return /* @__PURE__ */ t("div", { className: a("smwb-modal__content", o), children: e });
 }
-function T({ className: t, children: e }) {
-  return /* @__PURE__ */ o("div", { className: a("smwb-modal__footer", t), children: e });
+function T({ className: o, children: e }) {
+  return /* @__PURE__ */ t("div", { className: a("smwb-modal__footer", o), children: e });
 }
-const U = Object.assign(j, {
+const U = Object.assign(P, {
   Footer: T,
-  Header: C,
-  Content: P
+  Header: j,
+  Content: C
 });
 export {
-  P as Content,
+  C as Content,
   T as Footer,
-  C as Header,
+  j as Header,
   U as Modal,
   U as default
 };

package/dist/headless/components/feedBack/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useEffect, useRef, useState } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  className?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n}\n\nconst ModalBase = forwardRef<HTMLDivElement, PropsWithChildren<ModalProps>>(function Modal(\n  {\n    children,\n    onClose,\n    open,\n    className,\n    animation = \"fade\",\n    backdrop = \"dark\",\n    size = \"large\",\n    closeOnOutsideClick = true,\n    asForm = false,\n    disableAppearAnimation = false,\n    role = \"dialog\",\n    closeOnEsc = true,\n    ...rest\n  },\n  ref\n) {\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const forkedContentRef = useForkRef<HTMLDivElement>(ref, contentRef);\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  useEffect(() => {\n    if (!open || !closeOnEsc || !onClose) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      // Only the topmost overlay layer reacts to Escape.\n      if (event.key === \"Escape\" && isTopOverlayLayer(nodeRef.current)) {\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [open, closeOnEsc, onClose]);\n\n  if (!domRoot) {\n    return <></>;\n  }\n\n  const Component = (asForm ? \"form\" : \"div\") as \"div\";\n\n  return createPortal(\n    <CSSTransition\n      timeout={{\n        appear: 225,\n        enter: 225,\n        exit: 150,\n      }}\n      in={open}\n      classNames={{\n        appear: \"smwb-modal__overlay-appear\",\n        appearActive: \"smwb-modal__overlay-appear-active\",\n        appearDone: \"smwb-modal__overlay-appear-done\",\n        enter: \"smwb-modal__overlay-enter\",\n        enterActive: \"smwb-modal__overlay-enter-active\",\n        enterDone: \"smwb-modal__overlay-enter-done\",\n        exit: \"smwb-modal__overlay-exit\",\n        exitActive: \"smwb-modal__overlay-exit-active\",\n      }}\n      appear={!disableAppearAnimation}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div\n        ref={nodeRef}\n        data-smwb-overlay-layer=\"\"\n        className={cn(\"smwb-modal__overlay\", `smwb-${backdrop}`, `smwb-${size}`)}\n        onClick={closeOnOutsideClick && onClose ? onClose : undefined}\n      >\n        <Component\n          ref={forkedContentRef}\n          className={cn(\"smwb-modal\", `smwb-${size}`, `smwb-${animation}`, className)}\n          onClick={(e) => e.stopPropagation()}\n          role={role}\n          aria-modal=\"true\"\n          {...rest}\n        >\n          {children}\n        </Component>\n      </div>\n    </CSSTransition>,\n    domRoot\n  );\n});\n\nexport interface HeaderProps {\n  className?: string;\n}\n\nexport function Header({ className, children }: PropsWithChildren<HeaderProps>) {\n  return <div className={cn(\"smwb-modal__header\", className)}>{children}</div>;\n}\n\nexport interface ContentProps {\n  className?: string;\n}\n\nexport function Content({ className, children }: PropsWithChildren<ContentProps>) {\n  return <div className={cn(\"smwb-modal__content\", className)}>{children}</div>;\n}\n\nexport interface FooterProps {\n  className?: string;\n}\n\nexport function Footer({ className, children }: PropsWithChildren<FooterProps>) {\n  return <div className={cn(\"smwb-modal__footer\", className)}>{children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, {\n  Footer,\n  Header,\n  Content,\n});\n\nexport default Modal;\n"],"names":["ModalBase","forwardRef","children","onClose","open","className","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","rest","ref","domRoot","setDomRoot","useState","nodeRef","useRef","contentRef","forkedContentRef","useForkRef","useSafeLayoutEffect","useEffect","onKeyDown","event","isTopOverlayLayer","jsx","Fragment","Component","createPortal","CSSTransition","cn","e","Header","Content","Footer","Modal"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useEffect, useRef, useState } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  className?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n}\n\nconst ModalBase = forwardRef<HTMLDivElement, PropsWithChildren<ModalProps>>(function Modal(\n  {\n    children,\n    onClose,\n    open,\n    className,\n    animation = \"fade\",\n    backdrop = \"dark\",\n    size = \"large\",\n    closeOnOutsideClick = true,\n    asForm = false,\n    disableAppearAnimation = false,\n    role = \"dialog\",\n    closeOnEsc = true,\n    ...rest\n  },\n  ref\n) {\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const forkedContentRef = useForkRef<HTMLDivElement>(ref, contentRef);\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  useEffect(() => {\n    if (!open || !closeOnEsc || !onClose) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      // Only the topmost overlay layer reacts to Escape, and not to one handled inside\n      // it, e.g. by a menu closing on it.\n      if (event.key === \"Escape\" && !event.defaultPrevented && isTopOverlayLayer(nodeRef.current)) {\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [open, closeOnEsc, onClose]);\n\n  if (!domRoot) {\n    return <></>;\n  }\n\n  const Component = (asForm ? \"form\" : \"div\") as \"div\";\n\n  return createPortal(\n    <CSSTransition\n      timeout={{\n        appear: 225,\n        enter: 225,\n        exit: 150,\n      }}\n      in={open}\n      classNames={{\n        appear: \"smwb-modal__overlay-appear\",\n        appearActive: \"smwb-modal__overlay-appear-active\",\n        appearDone: \"smwb-modal__overlay-appear-done\",\n        enter: \"smwb-modal__overlay-enter\",\n        enterActive: \"smwb-modal__overlay-enter-active\",\n        enterDone: \"smwb-modal__overlay-enter-done\",\n        exit: \"smwb-modal__overlay-exit\",\n        exitActive: \"smwb-modal__overlay-exit-active\",\n      }}\n      appear={!disableAppearAnimation}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div\n        ref={nodeRef}\n        data-smwb-overlay-layer=\"\"\n        className={cn(\"smwb-modal__overlay\", `smwb-${backdrop}`, `smwb-${size}`)}\n        onClick={closeOnOutsideClick && onClose ? onClose : undefined}\n      >\n        <Component\n          ref={forkedContentRef}\n          className={cn(\"smwb-modal\", `smwb-${size}`, `smwb-${animation}`, className)}\n          onClick={(e) => e.stopPropagation()}\n          role={role}\n          aria-modal=\"true\"\n          {...rest}\n        >\n          {children}\n        </Component>\n      </div>\n    </CSSTransition>,\n    domRoot\n  );\n});\n\nexport interface HeaderProps {\n  className?: string;\n}\n\nexport function Header({ className, children }: PropsWithChildren<HeaderProps>) {\n  return <div className={cn(\"smwb-modal__header\", className)}>{children}</div>;\n}\n\nexport interface ContentProps {\n  className?: string;\n}\n\nexport function Content({ className, children }: PropsWithChildren<ContentProps>) {\n  return <div className={cn(\"smwb-modal__content\", className)}>{children}</div>;\n}\n\nexport interface FooterProps {\n  className?: string;\n}\n\nexport function Footer({ className, children }: PropsWithChildren<FooterProps>) {\n  return <div className={cn(\"smwb-modal__footer\", className)}>{children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, {\n  Footer,\n  Header,\n  Content,\n});\n\nexport default Modal;\n"],"names":["ModalBase","forwardRef","children","onClose","open","className","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","rest","ref","domRoot","setDomRoot","useState","nodeRef","useRef","contentRef","forkedContentRef","useForkRef","useSafeLayoutEffect","useEffect","onKeyDown","event","isTopOverlayLayer","jsx","Fragment","Component","createPortal","CSSTransition","cn","e","Header","Content","Footer","Modal"],"mappings":"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"}

package/dist/headless/components/feedBack/skeleton/skeleton.js

@@ -1,47 +1,50 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import g from "clsx";
-const d = (e) => typeof e == "number" ? `${e}px` : e, $ = u(function({
-  className: f,
-  variant: k = "text",
-  width: c,
-  height: p,
-  animation: o = "pulse",
-  count: t = 1,
-  animationDelay: r,
-  component: h = "span",
-  style: w,
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import $ from "clsx";
+const w = (o) => typeof o == "number" ? `${o}px` : o, z = S(function({
+  className: c,
+  variant: d = "text",
+  width: b,
+  height: _,
+  animation: i = "pulse",
+  count: n = 1,
+  animationDelay: m,
+  component: g = "span",
+  style: e,
+  "data-testid": r,
   ...a
-}, l) {
-  const b = g(
+}, f) {
+  const u = $(
     "smwb-skeleton",
-    `smwb-skeleton_${k}`,
-    o === !1 ? "smwb-skeleton_no-animation" : `smwb-skeleton_${o}`,
-    f
-  ), _ = h, m = (s) => {
-    const n = {
-      ...w,
-      width: d(c),
-      height: d(p),
-      ...r ? { animationDelay: `${s * r}ms` } : {}
+    `smwb-skeleton_${d}`,
+    i === !1 ? "smwb-skeleton_no-animation" : `smwb-skeleton_${i}`,
+    c
+  ), x = g, h = (t) => {
+    var k, l;
+    const s = {
+      ...e,
+      // An unset prop keeps the width or height the caller set in `style`.
+      width: (k = w(b)) != null ? k : e == null ? void 0 : e.width,
+      height: (l = w(_)) != null ? l : e == null ? void 0 : e.height,
+      ...m ? { animationDelay: `${t * m}ms` } : {}
     };
-    return /* @__PURE__ */ i(
-      _,
+    return /* @__PURE__ */ p(
+      x,
       {
-        ref: t === 1 ? l : void 0,
-        ...t === 1 ? a : {},
-        "data-testid": "skeleton",
+        ref: n === 1 ? f : void 0,
+        ...n === 1 ? a : {},
+        "data-testid": n === 1 && r != null ? r : "skeleton",
         "aria-hidden": "true",
-        className: b,
-        style: n
+        className: u,
+        style: s
       },
-      s
+      t
     );
   };
-  return t === 1 ? m(0) : /* @__PURE__ */ i("span", { ref: l, ...a, className: "smwb-skeleton__group", "aria-hidden": "true", children: Array.from({ length: t }, (s, n) => m(n)) });
+  return n === 1 ? h(0) : /* @__PURE__ */ p("span", { ref: f, ...a, "data-testid": r, className: "smwb-skeleton__group", "aria-hidden": "true", children: Array.from({ length: n }, (t, s) => h(s)) });
 });
 export {
-  $ as Skeleton,
-  $ as default
+  z as Skeleton,
+  z as default
 };
 //# sourceMappingURL=skeleton.js.map

package/dist/headless/components/feedBack/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../../../../src/components/feedBack/skeleton/skeleton.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  /** Shape of the placeholder. */\n  variant?: \"text\" | \"circular\" | \"rounded\" | \"rectangular\";\n  /** Width — number (px) or any CSS length. */\n  width?: number | string;\n  /** Height — number (px) or any CSS length. */\n  height?: number | string;\n  /** Shimmer animation; pass false to disable. */\n  animation?: \"pulse\" | \"wave\" | false;\n  /** Render N stacked placeholders. */\n  count?: number;\n  /** Stagger consecutive items by N ms (with `count`). */\n  animationDelay?: number;\n  /** Root element. */\n  component?: \"span\" | \"div\";\n}\n\nconst toCssSize = (value?: number | string): string | undefined => (typeof value === \"number\" ? `${value}px` : value);\n\nexport const Skeleton = forwardRef<HTMLElement, SkeletonProps>(function Skeleton(\n  {\n    className,\n    variant = \"text\",\n    width,\n    height,\n    animation = \"pulse\",\n    count = 1,\n    animationDelay,\n    component = \"span\",\n    style,\n    ...props\n  },\n  ref\n) {\n  const skeletonClassName = cn(\n    \"smwb-skeleton\",\n    `smwb-skeleton_${variant}`,\n    animation === false ? \"smwb-skeleton_no-animation\" : `smwb-skeleton_${animation}`,\n    className\n  );\n\n  const Tag = component as \"span\";\n\n  const renderOne = (i: number) => {\n    const inlineStyle: CSSProperties = {\n      ...style,\n      width: toCssSize(width),\n      height: toCssSize(height),\n      ...(animationDelay ? { animationDelay: `${i * animationDelay}ms` } : {}),\n    };\n    return (\n      <Tag\n        key={i}\n        ref={count === 1 ? ref : undefined}\n        {...(count === 1 ? props : {})}\n        data-testid=\"skeleton\"\n        aria-hidden=\"true\"\n        className={skeletonClassName}\n        style={inlineStyle}\n      />\n    );\n  };\n\n  if (count === 1) {\n    return renderOne(0);\n  }\n\n  return (\n    <span ref={ref} {...props} className=\"smwb-skeleton__group\" aria-hidden=\"true\">\n      {Array.from({ length: count }, (_, i) => renderOne(i))}\n    </span>\n  );\n});\n\nexport default Skeleton;\n"],"names":["toCssSize","value","Skeleton","forwardRef","className","variant","width","height","animation","count","animationDelay","component","style","props","ref","skeletonClassName","cn","Tag","renderOne","i","inlineStyle","jsx","_"],"mappings":";;;AAqBA,MAAMA,IAAY,CAACC,MAAiD,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAElGC,IAAWC,EAAuC,SAC7D;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,gBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC;AAAA,IACxB;AAAA,IACA,iBAAiBX,CAAO;AAAA,IACxBG,MAAc,KAAQ,+BAA+B,iBAAiBA,CAAS;AAAA,IAC/EJ;AAAA,EAAA,GAGIa,IAAMN,GAENO,IAAY,CAACC,MAAc;AAC/B,UAAMC,IAA6B;AAAA,MACjC,GAAGR;AAAA,MACH,OAAOZ,EAAUM,CAAK;AAAA,MACtB,QAAQN,EAAUO,CAAM;AAAA,MACxB,GAAIG,IAAiB,EAAE,gBAAgB,GAAGS,IAAIT,CAAc,SAAS,CAAA;AAAA,IAAC;AAExE,WACE,gBAAAW;AAAA,MAACJ;AAAA,MAAA;AAAA,QAEC,KAAKR,MAAU,IAAIK,IAAM;AAAA,QACxB,GAAIL,MAAU,IAAII,IAAQ,CAAA;AAAA,QAC3B,eAAY;AAAA,QACZ,eAAY;AAAA,QACZ,WAAWE;AAAA,QACX,OAAOK;AAAA,MAAA;AAAA,MANFD;AAAA,IAAA;AAAA,EASX;AAEA,SAAIV,MAAU,IACLS,EAAU,CAAC,IAIlB,gBAAAG,EAAC,UAAK,KAAAP,GAAW,GAAGD,GAAO,WAAU,wBAAuB,eAAY,QACrE,UAAA,MAAM,KAAK,EAAE,QAAQJ,KAAS,CAACa,GAAGH,MAAMD,EAAUC,CAAC,CAAC,GACvD;AAEJ,CAAC;"}
+{"version":3,"file":"skeleton.js","sources":["../../../../../src/components/feedBack/skeleton/skeleton.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  /** Shape of the placeholder. */\n  variant?: \"text\" | \"circular\" | \"rounded\" | \"rectangular\";\n  /** Width — number (px) or any CSS length. */\n  width?: number | string;\n  /** Height — number (px) or any CSS length. */\n  height?: number | string;\n  /** Shimmer animation; pass false to disable. */\n  animation?: \"pulse\" | \"wave\" | false;\n  /**\n   * Render N stacked placeholders. With `count` > 1 they sit in a group `<span>`, which takes the `ref` and the\n   * other HTML attributes; `className` and `style` go on each placeholder.\n   */\n  count?: number;\n  /** Stagger consecutive items by N ms (with `count`). */\n  animationDelay?: number;\n  /** Element of each placeholder. */\n  component?: \"span\" | \"div\";\n  /**\n   * Test id of the placeholder; `skeleton` unless given. With `count` > 1 it\n   * marks the group, and each placeholder keeps `skeleton`.\n   */\n  \"data-testid\"?: string;\n}\n\nconst toCssSize = (value?: number | string): string | undefined => (typeof value === \"number\" ? `${value}px` : value);\n\nexport const Skeleton = forwardRef<HTMLElement, SkeletonProps>(function Skeleton(\n  {\n    className,\n    variant = \"text\",\n    width,\n    height,\n    animation = \"pulse\",\n    count = 1,\n    animationDelay,\n    component = \"span\",\n    style,\n    \"data-testid\": dataTestId,\n    ...props\n  },\n  ref\n) {\n  const skeletonClassName = cn(\n    \"smwb-skeleton\",\n    `smwb-skeleton_${variant}`,\n    animation === false ? \"smwb-skeleton_no-animation\" : `smwb-skeleton_${animation}`,\n    className\n  );\n\n  const Tag = component as \"span\";\n\n  const renderOne = (i: number) => {\n    const inlineStyle: CSSProperties = {\n      ...style,\n      // An unset prop keeps the width or height the caller set in `style`.\n      width: toCssSize(width) ?? style?.width,\n      height: toCssSize(height) ?? style?.height,\n      ...(animationDelay ? { animationDelay: `${i * animationDelay}ms` } : {}),\n    };\n    return (\n      <Tag\n        key={i}\n        ref={count === 1 ? ref : undefined}\n        {...(count === 1 ? props : {})}\n        data-testid={count === 1 ? (dataTestId ?? \"skeleton\") : \"skeleton\"}\n        aria-hidden=\"true\"\n        className={skeletonClassName}\n        style={inlineStyle}\n      />\n    );\n  };\n\n  if (count === 1) {\n    return renderOne(0);\n  }\n\n  return (\n    <span ref={ref} {...props} data-testid={dataTestId} className=\"smwb-skeleton__group\" aria-hidden=\"true\">\n      {Array.from({ length: count }, (_, i) => renderOne(i))}\n    </span>\n  );\n});\n\nexport default Skeleton;\n"],"names":["toCssSize","value","Skeleton","forwardRef","className","variant","width","height","animation","count","animationDelay","component","style","dataTestId","props","ref","skeletonClassName","cn","Tag","renderOne","i","inlineStyle","_a","_b","jsx","_"],"mappings":";;;AA6BA,MAAMA,IAAY,CAACC,MAAiD,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAElGC,IAAWC,EAAuC,SAC7D;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,gBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,eAAeC;AAAA,EACf,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC;AAAA,IACxB;AAAA,IACA,iBAAiBZ,CAAO;AAAA,IACxBG,MAAc,KAAQ,+BAA+B,iBAAiBA,CAAS;AAAA,IAC/EJ;AAAA,EAAA,GAGIc,IAAMP,GAENQ,IAAY,CAACC,MAAc;;AAC/B,UAAMC,IAA6B;AAAA,MACjC,GAAGT;AAAA;AAAA,MAEH,QAAOU,IAAAtB,EAAUM,CAAK,MAAf,OAAAgB,IAAoBV,KAAA,gBAAAA,EAAO;AAAA,MAClC,SAAQW,IAAAvB,EAAUO,CAAM,MAAhB,OAAAgB,IAAqBX,KAAA,gBAAAA,EAAO;AAAA,MACpC,GAAIF,IAAiB,EAAE,gBAAgB,GAAGU,IAAIV,CAAc,SAAS,CAAA;AAAA,IAAC;AAExE,WACE,gBAAAc;AAAA,MAACN;AAAA,MAAA;AAAA,QAEC,KAAKT,MAAU,IAAIM,IAAM;AAAA,QACxB,GAAIN,MAAU,IAAIK,IAAQ,CAAA;AAAA,QAC3B,eAAaL,MAAU,KAAKI,KAAA,OAAAA,IAA4B;AAAA,QACxD,eAAY;AAAA,QACZ,WAAWG;AAAA,QACX,OAAOK;AAAA,MAAA;AAAA,MANFD;AAAA,IAAA;AAAA,EASX;AAEA,SAAIX,MAAU,IACLU,EAAU,CAAC,IAIlB,gBAAAK,EAAC,UAAK,KAAAT,GAAW,GAAGD,GAAO,eAAaD,GAAY,WAAU,wBAAuB,eAAY,QAC9F,gBAAM,KAAK,EAAE,QAAQJ,EAAA,GAAS,CAACgB,GAAGL,MAAMD,EAAUC,CAAC,CAAC,EAAA,CACvD;AAEJ,CAAC;"}

package/dist/headless/components/feedBack/snackbar/snackbar.js

@@ -1,26 +1,26 @@
-import { jsx as k, jsxs as g } from "react/jsx-runtime";
-import F, { useState as L, useCallback as G, useContext as q, useRef as E, createContext as y, useEffect as z } from "react";
+import { jsx as f, jsxs as I } from "react/jsx-runtime";
+import F, { useState as L, useCallback as G, useContext as q, useRef as _, createContext as y, useEffect as z } from "react";
 import { v4 as H } from "uuid";
 import { createPortal as J } from "react-dom";
-import N from "clsx";
+import A from "clsx";
 import { TransitionGroup as K, CSSTransition as M } from "react-transition-group";
 import { useSnackbarsPortal as Q } from "./useSnackbarsPortal.js";
 import { useEventCallback as U } from "../../../hooks/useEventCallback.js";
 function V({
   snack: r,
-  position: l,
-  variant: f,
-  className: m,
-  component: v,
-  autoClose: S,
-  autoCloseTime: w,
-  snackRest: o,
-  onSnackRemove: u,
-  onClose: b
+  position: m,
+  variant: v,
+  className: u,
+  component: S,
+  autoClose: w,
+  autoCloseTime: C,
+  snackRest: c,
+  onSnackRemove: b,
+  onClose: d
 }) {
-  var d, a, n, i, C;
-  const c = E(null);
-  return /* @__PURE__ */ k(
+  var s, a, t, l, x;
+  const i = _(null);
+  return /* @__PURE__ */ f(
     M,
     {
       appear: !0,
@@ -36,27 +36,27 @@ function V({
       },
       unmountOnExit: !0,
       in: !0,
-      nodeRef: c,
-      children: /* @__PURE__ */ k(
+      nodeRef: i,
+      children: /* @__PURE__ */ f(
         W,
         {
-          ref: c,
-          component: (d = r.component) != null ? d : v,
+          ref: i,
+          component: (s = r.component) != null ? s : S,
           message: r.message,
-          position: (a = r.position) != null ? a : l,
-          variant: (n = r.variant) != null ? n : f,
-          onClick: u(r.id),
-          className: N(m, r.className),
-          isAutoClose: (i = r.autoClose) != null ? i : S,
-          autoCloseTime: (C = r.autoCloseTime) != null ? C : w,
-          onClose: b(r.id),
-          ...o
+          position: (a = r.position) != null ? a : m,
+          variant: (t = r.variant) != null ? t : v,
+          onClick: b(r.id),
+          className: A(u, r.className),
+          isAutoClose: (l = r.autoClose) != null ? l : w,
+          autoCloseTime: (x = r.autoCloseTime) != null ? x : C,
+          onClose: d(r.id),
+          ...c
         }
       )
     }
   );
 }
-const I = y({
+const $ = y({
   addSnackbar: () => "",
   clearAllSnackbars: () => {
   },
@@ -69,122 +69,123 @@ const I = y({
 });
 function se(r) {
   const {
-    position: l = "top-right",
-    variant: f = "dark",
-    className: m,
-    autoClose: v = !0,
-    autoCloseTime: S = 5e3,
-    closeOnClick: w = !0,
-    onClick: o,
-    component: u = "div",
-    children: b,
-    ...c
-  } = r, [d, a] = L([]), { snackbarDomRoot: n } = Q(), i = G((e) => {
-    const { key: t, ...s } = e, p = t != null ? t : H(), x = { id: p, ...s };
-    return a((T) => {
-      const A = T.findIndex((B) => B.id === p);
-      if (A === -1)
-        return [...T, x];
-      const P = [...T];
-      return P[A] = x, P;
-    }), p;
-  }, []), C = () => {
+    position: m = "top-right",
+    variant: v = "dark",
+    className: u,
+    autoClose: S = !0,
+    autoCloseTime: w = 5e3,
+    closeOnClick: C = !0,
+    onClick: c,
+    component: b = "div",
+    children: d,
+    ...i
+  } = r, [s, a] = L([]), { snackbarDomRoot: t } = Q(), l = G((e) => {
+    const { key: n, ...o } = e, k = n != null ? n : H(), h = { id: k, ...o };
+    return a((R) => {
+      const g = R.findIndex((B) => B.id === k);
+      if (g === -1)
+        return [...R, h];
+      const E = [...R];
+      return E[g] = h, E;
+    }), k;
+  }, []), x = () => {
     a([]);
-  }, _ = () => {
+  }, T = () => {
     a((e) => e.slice(1));
-  }, $ = () => {
+  }, N = () => {
     a((e) => e.slice(0, -1));
-  }, h = (e) => {
-    a((t) => t.filter((s) => s.id !== e));
-  }, j = (e) => (t) => {
-    o == null || o(t), w && h(e);
+  }, p = (e) => {
+    a((n) => n.filter((o) => o.id !== e));
+  }, j = (e) => (n) => {
+    c == null || c(n), C && p(e);
   }, D = (e) => () => {
-    h(e);
-  }, R = d.reduce(
-    (e, t) => {
-      var p, x;
-      const s = (p = t.position) != null ? p : l;
-      return e[s] = [...(x = e[s]) != null ? x : [], t], e;
+    p(e);
+  }, P = s.reduce(
+    (e, n) => {
+      var k, h;
+      const o = (k = n.position) != null ? k : m;
+      return e[o] = [...(h = e[o]) != null ? h : [], n], e;
     },
     {}
-  ), O = Object.keys(R).map((e) => {
-    const t = R[e];
-    return /* @__PURE__ */ k(
+  ), O = Object.keys(P).map((e) => {
+    const n = P[e];
+    return /* @__PURE__ */ f(
       K,
       {
-        className: N("smwb-snackbars", `smwb-${e}`),
+        className: A("smwb-snackbars", `smwb-${e}`),
         "data-testid": `snackbars-${e}`,
         appear: !0,
-        children: t.map((s) => /* @__PURE__ */ k(
+        children: n.map((o) => /* @__PURE__ */ f(
           V,
           {
-            snack: s,
-            position: l,
-            variant: f,
-            className: m,
-            component: u,
-            autoClose: v,
-            autoCloseTime: S,
-            snackRest: c,
+            snack: o,
+            position: m,
+            variant: v,
+            className: u,
+            component: b,
+            autoClose: S,
+            autoCloseTime: w,
+            snackRest: i,
             onSnackRemove: j,
             onClose: D
           },
-          s.id
+          o.id
         ))
       },
       e
     );
   });
-  return /* @__PURE__ */ g(
-    I.Provider,
+  return /* @__PURE__ */ I(
+    $.Provider,
     {
-      value: { addSnackbar: i, clearAllSnackbars: C, clearFirstSnackbar: _, clearLastSnackbar: $, clearByIdSnackbar: h },
+      value: { addSnackbar: l, clearAllSnackbars: x, clearFirstSnackbar: T, clearLastSnackbar: N, clearByIdSnackbar: p },
       children: [
-        b,
-        n && J(O, n)
+        d,
+        t && J(O, t)
       ]
     }
   );
 }
 const W = F.forwardRef(function({
-  className: l,
-  message: f,
-  variant: m = "dark",
-  position: v = "top-right",
-  onClick: S,
-  component: w = "div",
-  isAutoClose: o,
-  autoCloseTime: u,
-  onClose: b,
-  action: c,
-  ...d
+  className: m,
+  message: v,
+  variant: u = "dark",
+  position: S = "top-right",
+  onClick: w,
+  component: C = "div",
+  isAutoClose: c,
+  autoCloseTime: b,
+  onClose: d,
+  action: i,
+  ...s
 }, a) {
-  const n = E(), i = U(() => {
-    !b || !o || !u || (n.current && clearTimeout(n.current), n.current = setTimeout(() => {
-      b();
-    }, u));
+  var T, N, p;
+  const t = _(), l = U(() => {
+    !d || !c || !b || (t.current && clearTimeout(t.current), t.current = setTimeout(() => {
+      d();
+    }, b));
   });
-  return z(() => (i(), () => {
-    n.current && clearTimeout(n.current);
-  }), [i]), /* @__PURE__ */ g(
-    w,
+  return z(() => (l(), () => {
+    t.current && clearTimeout(t.current);
+  }), [l]), /* @__PURE__ */ I(
+    C,
     {
       ref: a,
-      className: N("smwb-snackbar", l, `smwb-${m}`, `smwb-${v}`),
-      onClick: S,
-      role: "alert",
-      "aria-live": m === "danger" ? "assertive" : "polite",
-      "aria-atomic": "true",
-      ...d,
+      className: A("smwb-snackbar", m, `smwb-${u}`, `smwb-${S}`),
+      onClick: w,
+      ...s,
+      role: (T = s.role) != null ? T : "alert",
+      "aria-live": (N = s["aria-live"]) != null ? N : u === "danger" ? "assertive" : "polite",
+      "aria-atomic": (p = s["aria-atomic"]) != null ? p : "true",
       children: [
-        /* @__PURE__ */ k("div", { className: "smwb-snackbar__body", children: f }),
-        c != null ? /* @__PURE__ */ k("div", { className: "smwb-snackbar__action", children: c }) : null
+        /* @__PURE__ */ f("div", { className: "smwb-snackbar__body", children: v }),
+        i != null ? /* @__PURE__ */ f("div", { className: "smwb-snackbar__action", children: i }) : null
       ]
     }
   );
 });
 function oe() {
-  return q(I);
+  return q($);
 }
 export {
   W as Snackbar,