@smwb/ui-react 2.7.0 → 2.9.0

package/dist/components/dataDisplay/treeView/treeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"treeView.js","sources":["../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import React, { forwardRef, KeyboardEvent, ReactNode, useMemo, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\n\nexport interface ITreeNodeItem {\n  /** Stable identifier. Falls back to the positional path when omitted. */\n  id?: string;\n  label: string;\n  children?: ITreeNodeItem[];\n  /** Hint that the node is expandable even before its children are loaded. */\n  hasChildren?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  nodeIcon?: {\n    opened?: string;\n    closed?: string;\n  };\n  listIcon?: string;\n  data: ITreeNodeItem[];\n  /** Controlled list of expanded node ids. */\n  expanded?: string[];\n  /** Initially expanded node ids (uncontrolled). */\n  defaultExpanded?: string[];\n  /** Called with the next expanded ids. */\n  onExpandedChange?: (expanded: string[]) => void;\n  /** Controlled list of selected node ids. */\n  selected?: string[];\n  /** Initially selected node ids (uncontrolled). */\n  defaultSelected?: string[];\n  /** Called with the next selected ids plus, for user toggles, the node that just changed. */\n  onSelectedChange?: (selected: string[], changed?: { id: string; selected: boolean }) => void;\n  /** Enables label click selection. */\n  selectable?: boolean;\n  /** Renders a checkbox per node bound to selection. */\n  checkboxes?: boolean;\n  /** Custom node renderer. */\n  renderLabel?: (item: ITreeNodeItem, nodeId: string) => ReactNode;\n  /** Lazily resolves children the first time a node is expanded. */\n  loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;\n}\n\nexport const TreeView = forwardRef<HTMLDivElement, TreeViewProps>(function TreeView(\n  {\n    className,\n    listIcon = \"draft\",\n    nodeIcon = { closed: \"folder\", opened: \"folder_open\" },\n    data = [],\n    expanded,\n    defaultExpanded = [],\n    onExpandedChange,\n    selected,\n    defaultSelected = [],\n    onSelectedChange,\n    selectable = false,\n    checkboxes = false,\n    renderLabel,\n    loadChildren,\n    ...props\n  },\n  ref\n) {\n  const [loadedChildren, setLoadedChildren] = useState<Record<string, ITreeNodeItem[]>>({});\n  const [loadingIds, setLoadingIds] = useState<string[]>([]);\n  const [expandedIds, setExpandedIds] = useControllableState<string[]>({\n    value: expanded,\n    defaultValue: defaultExpanded,\n    onChange: onExpandedChange,\n  });\n  const lastToggledRef = useRef<{ id: string; selected: boolean }>();\n  const [selectedIds, setSelectedIds] = useControllableState<string[]>({\n    value: selected,\n    defaultValue: defaultSelected,\n    onChange: (next) => {\n      // useControllableState calls onChange synchronously from the setter,\n      // so lastToggledRef still refers to the toggle that caused this change.\n      const changed = lastToggledRef.current;\n      lastToggledRef.current = undefined;\n      onSelectedChange?.(next, changed);\n    },\n  });\n\n  const toggleExpanded = (id: string) => {\n    setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n  };\n\n  const setOpen = (id: string, open: boolean) => {\n    setExpandedIds((prev) => {\n      const has = prev.includes(id);\n      if (open && !has) return [...prev, id];\n      if (!open && has) return prev.filter((x) => x !== id);\n      return prev;\n    });\n  };\n\n  const toggleSelected = (id: string) => {\n    lastToggledRef.current = { id, selected: !selectedIds.includes(id) };\n    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n  };\n\n  const ensureLoaded = (item: ITreeNodeItem, nodeId: string) => {\n    if (!loadChildren || loadedChildren[nodeId] || (item.children && item.children.length > 0)) {\n      return;\n    }\n    setLoadingIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]));\n    void loadChildren(item, nodeId)\n      .then((children) => {\n        setLoadedChildren((prev) => ({ ...prev, [nodeId]: children }));\n      })\n      .finally(() => {\n        setLoadingIds((prev) => prev.filter((x) => x !== nodeId));\n      });\n  };\n\n  const renderNode = (item: ITreeNodeItem, path: string): ReactNode => {\n    const nodeId = item.id ?? path;\n    const resolvedChildren = item.children ?? loadedChildren[nodeId];\n    const isLazy = !!loadChildren && (item.hasChildren || !!loadedChildren[nodeId]);\n    const hasChildNodes = (!!resolvedChildren && resolvedChildren.length > 0) || isLazy;\n    const isOpen = expandedIds.includes(nodeId);\n    const isSelected = selectedIds.includes(nodeId);\n    const isLoading = loadingIds.includes(nodeId);\n\n    const onLabelClick = () => {\n      if (hasChildNodes) {\n        if (!isOpen) {\n          ensureLoaded(item, nodeId);\n        }\n        toggleExpanded(nodeId);\n      }\n      if (selectable) {\n        toggleSelected(nodeId);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        onLabelClick();\n      } else if (event.key === \"ArrowRight\" && hasChildNodes) {\n        ensureLoaded(item, nodeId);\n        setOpen(nodeId, true);\n      } else if (event.key === \"ArrowLeft\" && hasChildNodes) {\n        setOpen(nodeId, false);\n      }\n    };\n\n    return (\n      <div\n        className={cn(\"smwb-tree__node\", { \"smwb-tree__node_selected\": isSelected })}\n        role=\"treeitem\"\n        aria-expanded={hasChildNodes ? isOpen : undefined}\n        aria-selected={selectable || checkboxes ? isSelected : undefined}\n        key={nodeId}\n      >\n        <span\n          className=\"smwb-tree__node__content\"\n          onClick={onLabelClick}\n          onKeyDown={onKeyDown}\n          tabIndex={0}\n          role=\"button\"\n        >\n          {checkboxes && (\n            <input\n              type=\"checkbox\"\n              className=\"smwb-tree__node__checkbox\"\n              checked={isSelected}\n              onClick={(e) => e.stopPropagation()}\n              onChange={() => toggleSelected(nodeId)}\n              aria-label={item.label}\n            />\n          )}\n          <span className=\"smwb-tree__node__label\">\n            {hasChildNodes && isOpen ? (\n              <Icon name={nodeIcon?.opened as string} fill={1} size={20} />\n            ) : hasChildNodes ? (\n              <Icon name={nodeIcon?.closed as string} fill={1} size={20} />\n            ) : (\n              <Icon name={listIcon} size={20} />\n            )}\n            {renderLabel ? renderLabel(item, nodeId) : item.label}\n          </span>\n        </span>\n        {hasChildNodes && isOpen && (\n          <div role=\"group\">\n            {isLoading && !resolvedChildren ? (\n              <div className=\"smwb-tree__node__loading\" role=\"status\">\n                Загрузка…\n              </div>\n            ) : (\n              resolvedChildren?.map((c, idx) => renderNode(c, `${path}.${idx}`))\n            )}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  const tree = useMemo(\n    () => data.map((d, idx) => renderNode(d, `${idx}`)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      data,\n      expandedIds,\n      selectedIds,\n      selectable,\n      checkboxes,\n      listIcon,\n      nodeIcon,\n      renderLabel,\n      loadedChildren,\n      loadingIds,\n    ]\n  );\n\n  return (\n    <div data-testid=\"tree-view\" {...props} ref={ref} role=\"tree\" className={cn(\"smwb-tree\", className)}>\n      {tree.map((node, idx) => (\n        <div className=\"smwb-tree__wrapper\" key={idx} role=\"presentation\">\n          {node}\n        </div>\n      ))}\n    </div>\n  );\n});\n\nexport default TreeView;\n"],"names":["TreeView","forwardRef","className","listIcon","nodeIcon","data","expanded","defaultExpanded","onExpandedChange","selected","defaultSelected","onSelectedChange","selectable","checkboxes","renderLabel","loadChildren","props","ref","loadedChildren","setLoadedChildren","useState","loadingIds","setLoadingIds","expandedIds","setExpandedIds","useControllableState","lastToggledRef","useRef","selectedIds","setSelectedIds","next","changed","toggleExpanded","id","prev","x","setOpen","open","has","toggleSelected","ensureLoaded","item","nodeId","children","renderNode","path","_a","resolvedChildren","_b","isLazy","hasChildNodes","isOpen","isSelected","isLoading","onLabelClick","onKeyDown","event","jsxs","cn","jsx","e","Icon","c","idx","tree","useMemo","d","node"],"mappings":"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"}
+{"version":3,"file":"treeView.js","sources":["../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import React, { forwardRef, KeyboardEvent, ReactNode, useMemo, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { useId } from \"../../../hooks/useId\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\n\nexport interface ITreeNodeItem {\n  /** Stable identifier. Falls back to the positional path when omitted. */\n  id?: string;\n  label: string;\n  children?: ITreeNodeItem[];\n  /** Hint that the node is expandable even before its children are loaded. */\n  hasChildren?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  nodeIcon?: {\n    opened?: string;\n    closed?: string;\n  };\n  listIcon?: string;\n  data: ITreeNodeItem[];\n  /** Controlled list of expanded node ids. */\n  expanded?: string[];\n  /** Initially expanded node ids (uncontrolled). */\n  defaultExpanded?: string[];\n  /** Called with the next expanded ids. */\n  onExpandedChange?: (expanded: string[]) => void;\n  /** Controlled list of selected node ids. */\n  selected?: string[];\n  /** Initially selected node ids (uncontrolled). */\n  defaultSelected?: string[];\n  /** Called with the next selected ids plus, for user toggles, the node that just changed. */\n  onSelectedChange?: (selected: string[], changed?: { id: string; selected: boolean }) => void;\n  /**\n   * Enables row selection: a click, Enter or Space on a row toggles its selection. The chevron and the\n   * Left/Right keys never change it.\n   */\n  selectable?: boolean;\n  /** Renders a checkbox per node bound to selection. */\n  checkboxes?: boolean;\n  /**\n   * Whether a click, Enter or Space on a row also expands or collapses its children. The chevron and the\n   * Right/Left keys always do. Defaults to `true` while the tree is not `selectable` (a row has nothing else to\n   * do) and to `false` otherwise, so that selecting a row leaves it open or closed.\n   */\n  toggleOnRowClick?: boolean;\n  /** Custom node renderer. */\n  renderLabel?: (item: ITreeNodeItem, nodeId: string) => ReactNode;\n  /**\n   * Per-node actions (buttons, a menu trigger), drawn at the end of the row. They sit beside the row's\n   * button, not inside it, so they take their own clicks, Enter and Space, focus and accessible names.\n   */\n  renderActions?: (item: ITreeNodeItem, nodeId: string) => ReactNode;\n  /** Text shown while `loadChildren` is pending; \"Loading…\" unless given. */\n  loadingText?: string;\n  /** Lazily resolves children the first time a node is expanded. */\n  loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;\n  /** Test id of the root `<div>`; `tree-view` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const TreeView = forwardRef<HTMLDivElement, TreeViewProps>(function TreeView(\n  {\n    className,\n    listIcon = \"draft\",\n    nodeIcon = { closed: \"folder\", opened: \"folder_open\" },\n    data = [],\n    expanded,\n    defaultExpanded = [],\n    onExpandedChange,\n    selected,\n    defaultSelected = [],\n    onSelectedChange,\n    selectable = false,\n    checkboxes = false,\n    toggleOnRowClick = !selectable,\n    renderLabel,\n    renderActions,\n    loadingText = \"Loading…\",\n    loadChildren,\n    \"data-testid\": dataTestId = \"tree-view\",\n    ...props\n  },\n  ref\n) {\n  const [loadedChildren, setLoadedChildren] = useState<Record<string, ITreeNodeItem[]>>({});\n  const [loadingIds, setLoadingIds] = useState<string[]>([]);\n  // Base of every node's label id: one tree on a page must not collide with another.\n  const uid = useId();\n  const [expandedIds, setExpandedIds] = useControllableState<string[]>({\n    value: expanded,\n    defaultValue: defaultExpanded,\n    onChange: onExpandedChange,\n  });\n  const lastToggledRef = useRef<{ id: string; selected: boolean }>();\n  const [selectedIds, setSelectedIds] = useControllableState<string[]>({\n    value: selected,\n    defaultValue: defaultSelected,\n    onChange: (next) => {\n      // useControllableState calls onChange synchronously from the setter,\n      // so lastToggledRef still refers to the toggle that caused this change.\n      const changed = lastToggledRef.current;\n      lastToggledRef.current = undefined;\n      onSelectedChange?.(next, changed);\n    },\n  });\n\n  const toggleExpanded = (id: string) => {\n    setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n  };\n\n  const setOpen = (id: string, open: boolean) => {\n    setExpandedIds((prev) => {\n      const has = prev.includes(id);\n      if (open && !has) return [...prev, id];\n      if (!open && has) return prev.filter((x) => x !== id);\n      return prev;\n    });\n  };\n\n  const toggleSelected = (id: string) => {\n    lastToggledRef.current = { id, selected: !selectedIds.includes(id) };\n    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n  };\n\n  const ensureLoaded = (item: ITreeNodeItem, nodeId: string) => {\n    if (!loadChildren || loadedChildren[nodeId] || (item.children && item.children.length > 0)) {\n      return;\n    }\n    setLoadingIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]));\n    void loadChildren(item, nodeId)\n      .then((children) => {\n        setLoadedChildren((prev) => ({ ...prev, [nodeId]: children }));\n      })\n      .finally(() => {\n        setLoadingIds((prev) => prev.filter((x) => x !== nodeId));\n      });\n  };\n\n  const renderNode = (item: ITreeNodeItem, path: string): ReactNode => {\n    const nodeId = item.id ?? path;\n    // Names the treeitem: its own content would drag the actions and the checkbox into the node's name.\n    const labelId = `${uid}-${nodeId}`;\n    const resolvedChildren = item.children ?? loadedChildren[nodeId];\n    const isLazy = !!loadChildren && (item.hasChildren || !!loadedChildren[nodeId]);\n    const hasChildNodes = (!!resolvedChildren && resolvedChildren.length > 0) || isLazy;\n    const isOpen = expandedIds.includes(nodeId);\n    const isSelected = selectedIds.includes(nodeId);\n    const isLoading = loadingIds.includes(nodeId);\n\n    const toggleNode = () => {\n      if (!isOpen) {\n        ensureLoaded(item, nodeId);\n      }\n      toggleExpanded(nodeId);\n    };\n\n    const activateRow = () => {\n      if (toggleOnRowClick && hasChildNodes) {\n        toggleNode();\n      }\n      if (selectable) {\n        toggleSelected(nodeId);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {\n      // Keys from controls a custom label draws are theirs.\n      if (event.target !== event.currentTarget) return;\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        activateRow();\n      } else if (event.key === \"ArrowRight\" && hasChildNodes) {\n        ensureLoaded(item, nodeId);\n        setOpen(nodeId, true);\n      } else if (event.key === \"ArrowLeft\" && hasChildNodes) {\n        setOpen(nodeId, false);\n      }\n    };\n\n    return (\n      <div\n        className={cn(\"smwb-tree__node\", { \"smwb-tree__node_selected\": isSelected })}\n        role=\"treeitem\"\n        aria-labelledby={labelId}\n        aria-expanded={hasChildNodes ? isOpen : undefined}\n        aria-selected={selectable || checkboxes ? isSelected : undefined}\n        key={nodeId}\n      >\n        <div className=\"smwb-tree__node__row\">\n          {/*\n            A pointer shortcut: the keyboard expands with ArrowRight/ArrowLeft on the row, so the chevron is\n            decorative, unnamed and no Tab stop. If it ever becomes a real <button>, `aria-hidden` must go with\n            it (a focusable element inside `aria-hidden` is an ARIA violation) and it then needs a name plus\n            `aria-expanded`.\n          */}\n          <span className=\"smwb-tree__node__toggle\" aria-hidden=\"true\" onClick={hasChildNodes ? toggleNode : undefined}>\n            {hasChildNodes && <Icon name={isOpen ? \"expand_more\" : \"chevron_right\"} size={20} />}\n          </span>\n          {checkboxes && (\n            <input\n              type=\"checkbox\"\n              className=\"smwb-tree__node__checkbox\"\n              checked={isSelected}\n              onChange={() => toggleSelected(nodeId)}\n              aria-label={item.label}\n            />\n          )}\n          <span\n            className=\"smwb-tree__node__content\"\n            onClick={(event) => {\n              if (isOwnClick(event)) activateRow();\n            }}\n            onKeyDown={onKeyDown}\n            tabIndex={0}\n            role=\"button\"\n          >\n            <span className=\"smwb-tree__node__label\" id={labelId}>\n              {hasChildNodes && isOpen ? (\n                <Icon name={nodeIcon?.opened as string} fill={1} size={20} />\n              ) : hasChildNodes ? (\n                <Icon name={nodeIcon?.closed as string} fill={1} size={20} />\n              ) : (\n                <Icon name={listIcon} size={20} />\n              )}\n              {renderLabel ? renderLabel(item, nodeId) : item.label}\n            </span>\n          </span>\n          {renderActions && <span className=\"smwb-tree__node__actions\">{renderActions(item, nodeId)}</span>}\n        </div>\n        {hasChildNodes && isOpen && (\n          <div role=\"group\">\n            {isLoading && !resolvedChildren ? (\n              <div className=\"smwb-tree__node__loading\" role=\"status\">\n                {loadingText}\n              </div>\n            ) : (\n              resolvedChildren?.map((c, idx) => renderNode(c, `${path}.${idx}`))\n            )}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  const tree = useMemo(\n    () =>\n      data.map((d, idx) => (\n        // Keyed by node id, not position: a node that moves or gains a sibling keeps its DOM and focus.\n        <div className=\"smwb-tree__wrapper\" key={d.id ?? `${idx}`} role=\"presentation\">\n          {renderNode(d, `${idx}`)}\n        </div>\n      )),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      data,\n      uid,\n      expandedIds,\n      selectedIds,\n      selectable,\n      checkboxes,\n      toggleOnRowClick,\n      listIcon,\n      nodeIcon,\n      renderLabel,\n      renderActions,\n      loadingText,\n      loadedChildren,\n      loadingIds,\n    ]\n  );\n\n  return (\n    <div data-testid={dataTestId} {...props} ref={ref} role=\"tree\" className={cn(\"smwb-tree\", className)}>\n      {tree}\n    </div>\n  );\n});\n\nexport default TreeView;\n"],"names":["TreeView","forwardRef","className","listIcon","nodeIcon","data","expanded","defaultExpanded","onExpandedChange","selected","defaultSelected","onSelectedChange","selectable","checkboxes","toggleOnRowClick","renderLabel","renderActions","loadingText","loadChildren","dataTestId","props","ref","loadedChildren","setLoadedChildren","useState","loadingIds","setLoadingIds","uid","useId","expandedIds","setExpandedIds","useControllableState","lastToggledRef","useRef","selectedIds","setSelectedIds","next","changed","toggleExpanded","id","prev","x","setOpen","open","has","toggleSelected","ensureLoaded","item","nodeId","children","renderNode","path","_a","labelId","resolvedChildren","_b","isLazy","hasChildNodes","isOpen","isSelected","isLoading","toggleNode","activateRow","onKeyDown","event","jsxs","cn","jsx","Icon","isOwnClick","c","idx","tree","useMemo","d"],"mappings":"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"}

package/dist/components/feedBack/emptyState/emptyState.d.ts

@@ -15,6 +15,8 @@ export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "t
     variant?: "block" | "inline";
     /** `small`: tighter, for a narrow column or a card. */
     size?: "small" | "medium";
+    /** Test id of the root `<div>`; `empty-state` unless given. */
+    "data-testid"?: string;
 }
 /**
  * What a list, a table or a panel shows when it has nothing: an icon, a title,

package/dist/components/feedBack/emptyState/emptyState.js

@@ -1,19 +1,29 @@
-import { jsxs as c, jsx as m } from "react/jsx-runtime";
+import { jsxs as y, jsx as m } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/emptyState/emptyState.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                               */
-import y from "react";
-import _ from "clsx";
-import { Icon as b } from "../../base/icon/icon.js";
-const f = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } }, e = (t) => t != null && t !== !1 && t !== "" && !(Array.isArray(t) && t.length === 0), I = y.forwardRef(function({ className: p, title: a, icon: s, actions: r, variant: i = "block", size: l = "medium", children: n, ...o }, d) {
-  return /* @__PURE__ */ c(
+import _ from "react";
+import b from "clsx";
+import { Icon as f } from "../../base/icon/icon.js";
+const w = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } }, e = (t) => t != null && t !== !1 && t !== "" && !(Array.isArray(t) && t.length === 0), S = _.forwardRef(function({
+  className: p,
+  title: a,
+  icon: s,
+  actions: r,
+  variant: i = "block",
+  size: l = "medium",
+  children: n,
+  "data-testid": o = "empty-state",
+  ...d
+}, c) {
+  return /* @__PURE__ */ y(
     "div",
     {
-      "data-testid": "empty-state",
-      ...o,
-      ref: d,
-      className: _("smwb-empty-state", `smwb-empty-state_${i}`, `smwb-empty-state_${l}`, p),
+      "data-testid": o,
+      ...d,
+      ref: c,
+      className: b("smwb-empty-state", `smwb-empty-state_${i}`, `smwb-empty-state_${l}`, p),
       children: [
-        e(s) ? /* @__PURE__ */ m("span", { className: "smwb-empty-state__icon", "aria-hidden": "true", children: typeof s == "string" ? /* @__PURE__ */ m(b, { name: s, size: f[i][l] }) : s }) : null,
+        e(s) ? /* @__PURE__ */ m("span", { className: "smwb-empty-state__icon", "aria-hidden": "true", children: typeof s == "string" ? /* @__PURE__ */ m(f, { name: s, size: w[i][l] }) : s }) : null,
         e(a) ? /* @__PURE__ */ m("div", { className: "smwb-empty-state__title", children: a }) : null,
         e(n) ? /* @__PURE__ */ m("div", { className: "smwb-empty-state__description", children: n }) : null,
         e(r) ? /* @__PURE__ */ m("div", { className: "smwb-empty-state__actions", children: r }) : null
@@ -22,6 +32,6 @@ const f = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 }
   );
 });
 export {
-  I as EmptyState
+  S as EmptyState
 };
 //# sourceMappingURL=emptyState.js.map

package/dist/components/feedBack/emptyState/emptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"emptyState.js","sources":["../../../../src/components/feedBack/emptyState/emptyState.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  className?: string;\n  /** What is empty, e.g. \"No works yet\". */\n  title?: ReactNode;\n  /** An icon name, or an icon element. Decorative: the title and the message say it all. */\n  icon?: ReactNode | string;\n  /** What the reader can do about it: buttons or links. */\n  actions?: ReactNode;\n  /**\n   * `block` (default): centred, for an empty page, panel or card.\n   * `inline`: a muted line of text, for a list, a table or a column that came\n   * out empty; an action follows the last word.\n   */\n  variant?: \"block\" | \"inline\";\n  /** `small`: tighter, for a narrow column or a card. */\n  size?: \"small\" | \"medium\";\n}\n\nconst ICON_SIZE = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } } as const;\n\nconst present = (value: ReactNode): boolean =>\n  value !== undefined &&\n  value !== null &&\n  value !== false &&\n  value !== \"\" &&\n  !(Array.isArray(value) && value.length === 0);\n\n/**\n * What a list, a table or a panel shows when it has nothing: an icon, a title,\n * the message (the children) and actions.\n */\nexport const EmptyState = React.forwardRef<HTMLDivElement, PropsWithChildren<EmptyStateProps>>(function EmptyState(\n  { className, title, icon, actions, variant = \"block\", size = \"medium\", children, ...rest },\n  ref\n) {\n  return (\n    <div\n      data-testid=\"empty-state\"\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-empty-state\", `smwb-empty-state_${variant}`, `smwb-empty-state_${size}`, className)}\n    >\n      {present(icon) ? (\n        <span className=\"smwb-empty-state__icon\" aria-hidden=\"true\">\n          {typeof icon === \"string\" ? <Icon name={icon} size={ICON_SIZE[variant][size]} /> : icon}\n        </span>\n      ) : null}\n      {present(title) ? <div className=\"smwb-empty-state__title\">{title}</div> : null}\n      {present(children) ? <div className=\"smwb-empty-state__description\">{children}</div> : null}\n      {present(actions) ? <div className=\"smwb-empty-state__actions\">{actions}</div> : null}\n    </div>\n  );\n});\n\nexport default EmptyState;\n"],"names":["ICON_SIZE","present","value","EmptyState","React","className","title","icon","actions","variant","size","children","rest","ref","jsxs","cn","jsx","Icon"],"mappings":";;;;;;AAwBA,MAAMA,IAAY,EAAE,OAAO,EAAE,QAAQ,IAAI,OAAO,MAAM,QAAQ,EAAE,QAAQ,IAAI,OAAO,KAAG,GAEhFC,IAAU,CAACC,MAEfA,KAAU,QACVA,MAAU,MACVA,MAAU,MACV,EAAE,MAAM,QAAQA,CAAK,KAAKA,EAAM,WAAW,IAMhCC,IAAaC,EAAM,WAA+D,SAC7F,EAAE,WAAAC,GAAW,OAAAC,GAAO,MAAAC,GAAM,SAAAC,GAAS,SAAAC,IAAU,SAAS,MAAAC,IAAO,UAAU,UAAAC,GAAU,GAAGC,EAAA,GACpFC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACX,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,oBAAoB,oBAAoBN,CAAO,IAAI,oBAAoBC,CAAI,IAAIL,CAAS;AAAA,MAErG,UAAA;AAAA,QAAAJ,EAAQM,CAAI,IACX,gBAAAS,EAAC,QAAA,EAAK,WAAU,0BAAyB,eAAY,QAClD,UAAA,OAAOT,KAAS,6BAAYU,GAAA,EAAK,MAAMV,GAAM,MAAMP,EAAUS,CAAO,EAAEC,CAAI,EAAA,CAAG,IAAKH,EAAA,CACrF,IACE;AAAA,QACHN,EAAQK,CAAK,IAAI,gBAAAU,EAAC,SAAI,WAAU,2BAA2B,aAAM,IAAS;AAAA,QAC1Ef,EAAQU,CAAQ,IAAI,gBAAAK,EAAC,SAAI,WAAU,iCAAiC,UAAAL,GAAS,IAAS;AAAA,QACtFV,EAAQO,CAAO,IAAI,gBAAAQ,EAAC,SAAI,WAAU,6BAA6B,aAAQ,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvF,CAAC;"}
+{"version":3,"file":"emptyState.js","sources":["../../../../src/components/feedBack/emptyState/emptyState.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  className?: string;\n  /** What is empty, e.g. \"No works yet\". */\n  title?: ReactNode;\n  /** An icon name, or an icon element. Decorative: the title and the message say it all. */\n  icon?: ReactNode | string;\n  /** What the reader can do about it: buttons or links. */\n  actions?: ReactNode;\n  /**\n   * `block` (default): centred, for an empty page, panel or card.\n   * `inline`: a muted line of text, for a list, a table or a column that came\n   * out empty; an action follows the last word.\n   */\n  variant?: \"block\" | \"inline\";\n  /** `small`: tighter, for a narrow column or a card. */\n  size?: \"small\" | \"medium\";\n  /** Test id of the root `<div>`; `empty-state` unless given. */\n  \"data-testid\"?: string;\n}\n\nconst ICON_SIZE = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } } as const;\n\nconst present = (value: ReactNode): boolean =>\n  value !== undefined &&\n  value !== null &&\n  value !== false &&\n  value !== \"\" &&\n  !(Array.isArray(value) && value.length === 0);\n\n/**\n * What a list, a table or a panel shows when it has nothing: an icon, a title,\n * the message (the children) and actions.\n */\nexport const EmptyState = React.forwardRef<HTMLDivElement, PropsWithChildren<EmptyStateProps>>(function EmptyState(\n  {\n    className,\n    title,\n    icon,\n    actions,\n    variant = \"block\",\n    size = \"medium\",\n    children,\n    \"data-testid\": dataTestId = \"empty-state\",\n    ...rest\n  },\n  ref\n) {\n  return (\n    <div\n      data-testid={dataTestId}\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-empty-state\", `smwb-empty-state_${variant}`, `smwb-empty-state_${size}`, className)}\n    >\n      {present(icon) ? (\n        <span className=\"smwb-empty-state__icon\" aria-hidden=\"true\">\n          {typeof icon === \"string\" ? <Icon name={icon} size={ICON_SIZE[variant][size]} /> : icon}\n        </span>\n      ) : null}\n      {present(title) ? <div className=\"smwb-empty-state__title\">{title}</div> : null}\n      {present(children) ? <div className=\"smwb-empty-state__description\">{children}</div> : null}\n      {present(actions) ? <div className=\"smwb-empty-state__actions\">{actions}</div> : null}\n    </div>\n  );\n});\n\nexport default EmptyState;\n"],"names":["ICON_SIZE","present","value","EmptyState","React","className","title","icon","actions","variant","size","children","dataTestId","rest","ref","jsxs","cn","jsx","Icon"],"mappings":";;;;;;AA0BA,MAAMA,IAAY,EAAE,OAAO,EAAE,QAAQ,IAAI,OAAO,MAAM,QAAQ,EAAE,QAAQ,IAAI,OAAO,KAAG,GAEhFC,IAAU,CAACC,MAEfA,KAAU,QACVA,MAAU,MACVA,MAAU,MACV,EAAE,MAAM,QAAQA,CAAK,KAAKA,EAAM,WAAW,IAMhCC,IAAaC,EAAM,WAA+D,SAC7F;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaH;AAAA,MACZ,GAAGC;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,oBAAoB,oBAAoBP,CAAO,IAAI,oBAAoBC,CAAI,IAAIL,CAAS;AAAA,MAErG,UAAA;AAAA,QAAAJ,EAAQM,CAAI,IACX,gBAAAU,EAAC,QAAA,EAAK,WAAU,0BAAyB,eAAY,QAClD,UAAA,OAAOV,KAAS,6BAAYW,GAAA,EAAK,MAAMX,GAAM,MAAMP,EAAUS,CAAO,EAAEC,CAAI,EAAA,CAAG,IAAKH,EAAA,CACrF,IACE;AAAA,QACHN,EAAQK,CAAK,IAAI,gBAAAW,EAAC,SAAI,WAAU,2BAA2B,aAAM,IAAS;AAAA,QAC1EhB,EAAQU,CAAQ,IAAI,gBAAAM,EAAC,SAAI,WAAU,iCAAiC,UAAAN,GAAS,IAAS;AAAA,QACtFV,EAAQO,CAAO,IAAI,gBAAAS,EAAC,SAAI,WAAU,6BAA6B,aAAQ,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvF,CAAC;"}

package/dist/components/feedBack/message/message.d.ts

@@ -10,6 +10,8 @@ export interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {
     severity?: MessageSeverity;
     /** Accessible label for the close button. */
     closeAriaLabel?: string;
+    /** Test id of the root `<div>`; `message` unless given. */
+    "data-testid"?: string;
 }
 export declare const MessageContainer: React.ForwardRefExoticComponent<MessageProps & {
     children?: React.ReactNode | undefined;

package/dist/components/feedBack/message/message.js

@@ -1,33 +1,44 @@
-import { jsxs as g, jsx as o } from "react/jsx-runtime";
+import { jsxs as w, jsx as o } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/message/message.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                         */
-import { forwardRef as b } from "react";
+import { forwardRef as _ } from "react";
 import p from "clsx";
-import { Icon as f } from "../../base/icon/icon.js";
-const w = b(
-  ({ className: e, children: m, type: t, severity: s, variant: l = "filled", onClose: r, closeAriaLabel: n = "Close", ...i }, c) => {
-    const a = s != null ? s : t, d = p("smwb-message", `smwb-message_${l}`, e, {
-      [`smwb-message_${a}`]: !!a
+import { Icon as u } from "../../base/icon/icon.js";
+const h = _(
+  ({
+    className: e,
+    children: i,
+    type: n,
+    severity: s,
+    variant: c = "filled",
+    onClose: r,
+    closeAriaLabel: d = "Close",
+    "data-testid": g = "message",
+    ...a
+  }, b) => {
+    var m, l;
+    const t = s != null ? s : n, f = p("smwb-message", `smwb-message_${c}`, e, {
+      [`smwb-message_${t}`]: !!t
     });
-    return /* @__PURE__ */ g(
+    return /* @__PURE__ */ w(
       "div",
       {
-        "data-testid": "message",
-        role: "alert",
-        "aria-live": a === "error" ? "assertive" : "polite",
-        ...i,
-        className: d,
-        ref: c,
+        "data-testid": g,
+        ...a,
+        role: (m = a.role) != null ? m : "alert",
+        "aria-live": (l = a["aria-live"]) != null ? l : t === "error" ? "assertive" : "polite",
+        className: f,
+        ref: b,
         children: [
-          m,
-          r && /* @__PURE__ */ o("button", { className: "smwb-message__close-btn", onClick: r, "aria-label": n, type: "button", children: /* @__PURE__ */ o(f, { name: "close", weight: 1e3 }) })
+          i,
+          r && /* @__PURE__ */ o("button", { className: "smwb-message__close-btn", onClick: r, "aria-label": d, type: "button", children: /* @__PURE__ */ o(u, { name: "close", weight: 1e3 }) })
         ]
       }
     );
   }
-), _ = ({ children: e }) => /* @__PURE__ */ o("div", { className: "smwb-message__header", children: e }), v = Object.assign(w, { Header: _ });
+), j = ({ children: e }) => /* @__PURE__ */ o("div", { className: "smwb-message__header", children: e }), k = Object.assign(h, { Header: j });
 export {
-  w as MessageContainer,
-  v as default
+  h as MessageContainer,
+  k as default
 };
 //# sourceMappingURL=message.js.map

package/dist/components/feedBack/message/message.js.map

@@ -1 +1 @@
-{"version":3,"file":"message.js","sources":["../../../../src/components/feedBack/message/message.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type MessageSeverity = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  variant?: \"outlined\" | \"filled\" | \"left-accent\";\n  onClose?: () => void; // или с событием, если нужно\n  /** @deprecated use `severity`. */\n  type?: MessageSeverity;\n  /** Semantic severity of the message. */\n  severity?: MessageSeverity;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n}\n\nexport const MessageContainer = forwardRef<HTMLDivElement, PropsWithChildren<MessageProps>>(\n  ({ className, children, type, severity, variant = \"filled\", onClose, closeAriaLabel = \"Close\", ...props }, ref) => {\n    const resolvedSeverity = severity ?? type;\n    const messageClassnames = cn(\"smwb-message\", `smwb-message_${variant}`, className, {\n      [`smwb-message_${resolvedSeverity}`]: Boolean(resolvedSeverity),\n    });\n\n    return (\n      <div\n        data-testid=\"message\"\n        role=\"alert\"\n        aria-live={resolvedSeverity === \"error\" ? \"assertive\" : \"polite\"}\n        {...props}\n        className={messageClassnames}\n        ref={ref}\n      >\n        {children}\n        {onClose && (\n          <button className=\"smwb-message__close-btn\" onClick={onClose} aria-label={closeAriaLabel} type=\"button\">\n            <Icon name=\"close\" weight={1000} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nconst Header = ({ children }: PropsWithChildren) => {\n  return <div className=\"smwb-message__header\">{children}</div>;\n};\n\nconst Message = Object.assign(MessageContainer, { Header });\n\nexport default Message;\n"],"names":["MessageContainer","forwardRef","className","children","type","severity","variant","onClose","closeAriaLabel","props","ref","resolvedSeverity","messageClassnames","cn","jsxs","jsx","Icon","Header","Message"],"mappings":";;;;;;AAoBO,MAAMA,IAAmBC;AAAA,EAC9B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,UAAAC,GAAU,SAAAC,IAAU,UAAU,SAAAC,GAAS,gBAAAC,IAAiB,SAAS,GAAGC,EAAA,GAASC,MAAQ;AACjH,UAAMC,IAAmBN,KAAA,OAAAA,IAAYD,GAC/BQ,IAAoBC,EAAG,gBAAgB,gBAAgBP,CAAO,IAAIJ,GAAW;AAAA,MACjF,CAAC,gBAAgBS,CAAgB,EAAE,GAAG,EAAQA;AAAA,IAAgB,CAC/D;AAED,WACE,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,aAAWH,MAAqB,UAAU,cAAc;AAAA,QACvD,GAAGF;AAAA,QACJ,WAAWG;AAAA,QACX,KAAAF;AAAA,QAEC,UAAA;AAAA,UAAAP;AAAA,UACAI,KACC,gBAAAQ,EAAC,UAAA,EAAO,WAAU,2BAA0B,SAASR,GAAS,cAAYC,GAAgB,MAAK,UAC7F,UAAA,gBAAAO,EAACC,GAAA,EAAK,MAAK,SAAQ,QAAQ,KAAM,EAAA,CACnC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF,GAEMC,IAAS,CAAC,EAAE,UAAAd,QACT,gBAAAY,EAAC,OAAA,EAAI,WAAU,wBAAwB,UAAAZ,EAAA,CAAS,GAGnDe,IAAU,OAAO,OAAOlB,GAAkB,EAAE,QAAAiB,GAAQ;"}
+{"version":3,"file":"message.js","sources":["../../../../src/components/feedBack/message/message.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type MessageSeverity = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  variant?: \"outlined\" | \"filled\" | \"left-accent\";\n  onClose?: () => void; // или с событием, если нужно\n  /** @deprecated use `severity`. */\n  type?: MessageSeverity;\n  /** Semantic severity of the message. */\n  severity?: MessageSeverity;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n  /** Test id of the root `<div>`; `message` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const MessageContainer = forwardRef<HTMLDivElement, PropsWithChildren<MessageProps>>(\n  (\n    {\n      className,\n      children,\n      type,\n      severity,\n      variant = \"filled\",\n      onClose,\n      closeAriaLabel = \"Close\",\n      \"data-testid\": dataTestId = \"message\",\n      ...props\n    },\n    ref\n  ) => {\n    const resolvedSeverity = severity ?? type;\n    const messageClassnames = cn(\"smwb-message\", `smwb-message_${variant}`, className, {\n      [`smwb-message_${resolvedSeverity}`]: Boolean(resolvedSeverity),\n    });\n\n    return (\n      <div\n        data-testid={dataTestId}\n        {...props}\n        // Defaults: the caller's own role and aria-live win, and an explicit\n        // undefined keeps these.\n        role={props.role ?? \"alert\"}\n        aria-live={props[\"aria-live\"] ?? (resolvedSeverity === \"error\" ? \"assertive\" : \"polite\")}\n        className={messageClassnames}\n        ref={ref}\n      >\n        {children}\n        {onClose && (\n          <button className=\"smwb-message__close-btn\" onClick={onClose} aria-label={closeAriaLabel} type=\"button\">\n            <Icon name=\"close\" weight={1000} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nconst Header = ({ children }: PropsWithChildren) => {\n  return <div className=\"smwb-message__header\">{children}</div>;\n};\n\nconst Message = Object.assign(MessageContainer, { Header });\n\nexport default Message;\n"],"names":["MessageContainer","forwardRef","className","children","type","severity","variant","onClose","closeAriaLabel","dataTestId","props","ref","resolvedSeverity","messageClassnames","cn","jsxs","_a","_b","jsx","Icon","Header","Message"],"mappings":";;;;;;AAsBO,MAAMA,IAAmBC;AAAA,EAC9B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,eAAeC,IAAa;AAAA,IAC5B,GAAGC;AAAA,EAAA,GAELC,MACG;;AACH,UAAMC,IAAmBP,KAAA,OAAAA,IAAYD,GAC/BS,IAAoBC,EAAG,gBAAgB,gBAAgBR,CAAO,IAAIJ,GAAW;AAAA,MACjF,CAAC,gBAAgBU,CAAgB,EAAE,GAAG,EAAQA;AAAA,IAAgB,CAC/D;AAED,WACE,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAaN;AAAA,QACZ,GAAGC;AAAA,QAGJ,OAAMM,IAAAN,EAAM,SAAN,OAAAM,IAAc;AAAA,QACpB,cAAWC,IAAAP,EAAM,WAAW,MAAjB,OAAAO,IAAuBL,MAAqB,UAAU,cAAc;AAAA,QAC/E,WAAWC;AAAA,QACX,KAAAF;AAAA,QAEC,UAAA;AAAA,UAAAR;AAAA,UACAI,KACC,gBAAAW,EAAC,UAAA,EAAO,WAAU,2BAA0B,SAASX,GAAS,cAAYC,GAAgB,MAAK,UAC7F,UAAA,gBAAAU,EAACC,GAAA,EAAK,MAAK,SAAQ,QAAQ,KAAM,EAAA,CACnC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF,GAEMC,IAAS,CAAC,EAAE,UAAAjB,QACT,gBAAAe,EAAC,OAAA,EAAI,WAAU,wBAAwB,UAAAf,EAAA,CAAS,GAGnDkB,IAAU,OAAO,OAAOrB,GAAkB,EAAE,QAAAoB,GAAQ;"}

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

@@ -1,51 +1,71 @@
-import { jsx as o, Fragment as D } from "react/jsx-runtime";
+import { jsx as n, Fragment as D } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/modal/modal.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                     */
-import { forwardRef as L, useState as S, useRef as c, 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({
+import { forwardRef as L, useState as v, useRef as c, useInsertionEffect as M, useEffect as _, useCallback as $ } from "react";
+import { CSSTransition as O } from "react-transition-group";
+import { createPortal as P } from "react-dom";
+import m from "clsx";
+import { useFocusTrap as j } from "../../../hooks/useFocusTrap.js";
+import { useSafeLayoutEffect as I } from "../../../hooks/useSafeLayoutEffect.js";
+import { useForkRef as q } from "../../../hooks/useForkRef.js";
+import { isTopOverlayLayer as B } from "../../../utils/overlayLayer.js";
+import { restoreFocus as H } from "../../../utils/restoreFocus.js";
+function K(t) {
+  if (!t || typeof document == "undefined") return !0;
+  const e = document.querySelectorAll(".smwb-modal__overlay:not(.smwb-modal__overlay-exit)");
+  return e[e.length - 1] === t;
+}
+const G = L(function({
   children: e,
-  onClose: r,
-  open: m,
-  className: f,
-  animation: u = "fade",
-  backdrop: p = "dark",
+  onClose: a,
+  open: o,
+  className: b,
+  animation: w = "fade",
+  backdrop: y = "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);
-  if (F(() => {
-    x(document.body);
-  }, []), $(() => {
-    if (!m || !d || !r)
+  closeOnOutsideClick: E = !0,
+  asForm: x = !1,
+  disableAppearAnimation: k = !1,
+  role: R = "dialog",
+  closeOnEsc: u = !0,
+  ...g
+}, F) {
+  const [d, N] = v(), s = c(null), l = c(null), [S, T] = v(null), h = q(F, l, T);
+  I(() => {
+    N(document.body);
+  }, []);
+  const f = c(null);
+  M(() => {
+    var r;
+    o && (f.current = (r = l.current) != null && r.contains(document.activeElement) ? null : document.activeElement);
+  }, [o]), _(() => {
+    if (!o) return;
+    const r = f.current;
+    return () => {
+      H(r, l.current);
+    };
+  }, [o]);
+  const A = $(() => K(s.current), []);
+  if (j(l, { active: o && S !== null, restoreFocus: !1, isTopmost: A }), _(() => {
+    if (!o || !u || !a)
       return;
-    const n = (g) => {
-      g.key === "Escape" && O(s.current) && r();
+    const r = (p) => {
+      p.key === "Escape" && !p.defaultPrevented && B(s.current) && a();
     };
-    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
-  }, [m, d, r]), !l)
-    return /* @__PURE__ */ o(D, {});
-  const N = _ ? "form" : "div";
-  return A(
-    /* @__PURE__ */ o(
-      h,
+    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+  }, [o, u, a]), !d)
+    return /* @__PURE__ */ n(D, {});
+  const C = x ? "form" : "div";
+  return P(
+    /* @__PURE__ */ n(
+      O,
       {
         timeout: {
           appear: 225,
           enter: 225,
           exit: 150
         },
-        in: m,
+        in: o,
         classNames: {
           appear: "smwb-modal__overlay-appear",
           appearActive: "smwb-modal__overlay-appear-active",
@@ -56,26 +76,27 @@ const j = L(function({
           exit: "smwb-modal__overlay-exit",
           exitActive: "smwb-modal__overlay-exit-active"
         },
-        appear: !w,
+        appear: !k,
         mountOnEnter: !0,
         unmountOnExit: !0,
         nodeRef: s,
-        children: /* @__PURE__ */ o(
+        children: /* @__PURE__ */ n(
           "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: m("smwb-modal__overlay", `smwb-${y}`, `smwb-${i}`),
+            onClick: E && a ? a : void 0,
+            children: /* @__PURE__ */ n(
+              C,
               {
-                ref: E,
-                className: a("smwb-modal", `smwb-${i}`, `smwb-${u}`, f),
-                onClick: (n) => n.stopPropagation(),
-                role: b,
+                ref: h,
+                className: m("smwb-modal", `smwb-${i}`, `smwb-${w}`, b),
+                onClick: (r) => r.stopPropagation(),
+                tabIndex: -1,
+                role: R,
                 "aria-modal": "true",
-                ...y,
+                ...g,
                 children: e
               }
             )
@@ -83,28 +104,28 @@ const j = L(function({
         )
       }
     ),
-    l
+    d
   );
 });
-function C({ className: t, children: e }) {
-  return /* @__PURE__ */ o("div", { className: a("smwb-modal__header", t), children: e });
+function J({ className: t, children: e }) {
+  return /* @__PURE__ */ n("div", { className: m("smwb-modal__header", t), children: e });
 }
-function P({ className: t, children: e }) {
-  return /* @__PURE__ */ o("div", { className: a("smwb-modal__content", t), children: e });
+function Q({ className: t, children: e }) {
+  return /* @__PURE__ */ n("div", { className: m("smwb-modal__content", t), children: e });
 }
-function T({ className: t, children: e }) {
-  return /* @__PURE__ */ o("div", { className: a("smwb-modal__footer", t), children: e });
+function U({ className: t, children: e }) {
+  return /* @__PURE__ */ n("div", { className: m("smwb-modal__footer", t), children: e });
 }
-const W = Object.assign(j, {
-  Footer: T,
-  Header: C,
-  Content: P
+const me = Object.assign(G, {
+  Footer: U,
+  Header: J,
+  Content: Q
 });
 export {
-  P as Content,
-  T as Footer,
-  C as Header,
-  W as Modal,
-  W as default
+  Q as Content,
+  U as Footer,
+  J as Header,
+  me as Modal,
+  me as default
 };
 //# sourceMappingURL=modal.js.map

package/dist/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, {\n  forwardRef,\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useInsertionEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { useFocusTrap } from \"../../../hooks/useFocusTrap\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\nimport { restoreFocus } from \"../../../utils/restoreFocus\";\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\n/**\n * Whether `overlay` is the last open Modal overlay; a dialog stacked above it owns Tab. Fading-out\n * ones do not count. Not `isTopOverlayLayer`: menus, select dropdowns and pickers are overlay\n * layers too, and a select dropdown open inside a Modal must not switch the Modal's trap off.\n */\nfunction isTopModal(overlay: Element | null | undefined): boolean {\n  if (!overlay || typeof document === \"undefined\") return true;\n  const open = document.querySelectorAll(\".smwb-modal__overlay:not(.smwb-modal__overlay-exit)\");\n  return open[open.length - 1] === overlay;\n}\n\n/**\n * A modal dialog: portaled to `<body>`, animated, closed by Escape or a backdrop click.\n *\n * While open it traps Tab/Shift+Tab inside the dialog and moves the focus into it (the first tab\n * stop, else the dialog itself), unless a child has already focused itself. On close, and on\n * unmount while open, the focus goes back to the element that had it when the dialog opened —\n * unless the app has moved the focus elsewhere by then.\n * Of stacked dialogs only the topmost one handles Tab.\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  // The dialog element as state too: the content is portaled and appears a commit after `open`, and\n  // the trap only re-runs when `active` changes, so a plain ref that fills in later would never arm it.\n  const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null);\n  const forkedContentRef = useForkRef<HTMLDivElement>(ref, contentRef, setContentEl);\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  // The opener is captured in an insertion effect, which runs in the mutation phase of the open\n  // commit: before React focuses an `autoFocus` child (that happens in the layout phase, ahead of\n  // any layout effect of this component), before the children's passive effects (a CommandPalette\n  // focusing its input) and before the trap moves the focus into the dialog.\n  const openerRef = useRef<Element | null>(null);\n  useInsertionEffect(() => {\n    if (!open) return;\n    openerRef.current = contentRef.current?.contains(document.activeElement) ? null : document.activeElement;\n  }, [open]);\n\n  // The element focused when the dialog opens gets focus back when it closes or unmounts while open,\n  // unless the app has moved focus out of the dialog by then (see restoreFocus). The return runs in a\n  // passive cleanup, not in a layout one: React gives the focus back to whatever was focused when the\n  // commit started (resetAfterCommit -> restoreSelection), and a closing dialog is still in the\n  // document during its fade-out, so restoring inside that commit is undone. The palette relied on a\n  // setTimeout(0) for the same reason.\n  useEffect(() => {\n    if (!open) return;\n    const opener = openerRef.current;\n    return () => {\n      // The dialog is read here, not captured above: mounted with `open` it appears only a commit\n      // after this effect runs, so a capture would hold null and skip the return. On unmount the ref\n      // is already null, which is the \"root is gone\" case restoreFocus handles.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      restoreFocus(opener, contentRef.current);\n    };\n  }, [open]);\n\n  const isTopmost = useCallback(() => isTopModal(nodeRef.current), []);\n  useFocusTrap(contentRef, { active: open && contentEl !== null, restoreFocus: false, isTopmost });\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          tabIndex={-1}\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":["isTopModal","overlay","open","ModalBase","forwardRef","children","onClose","className","animation","backdrop","size","closeOnOutsideClick","asForm","disableAppearAnimation","role","closeOnEsc","rest","ref","domRoot","setDomRoot","useState","nodeRef","useRef","contentRef","contentEl","setContentEl","forkedContentRef","useForkRef","useSafeLayoutEffect","openerRef","useInsertionEffect","_a","useEffect","opener","restoreFocus","isTopmost","useCallback","useFocusTrap","onKeyDown","event","isTopOverlayLayer","jsx","Fragment","Component","createPortal","CSSTransition","cn","e","Header","Content","Footer","Modal"],"mappings":"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"}

package/dist/components/feedBack/skeleton/skeleton.d.ts

@@ -9,12 +9,20 @@ export interface SkeletonProps extends HTMLAttributes<HTMLElement> {
     height?: number | string;
     /** Shimmer animation; pass false to disable. */
     animation?: "pulse" | "wave" | false;
-    /** Render N stacked placeholders. */
+    /**
+     * Render N stacked placeholders. With `count` > 1 they sit in a group `<span>`, which takes the `ref` and the
+     * other HTML attributes; `className` and `style` go on each placeholder.
+     */
     count?: number;
     /** Stagger consecutive items by N ms (with `count`). */
     animationDelay?: number;
-    /** Root element. */
+    /** Element of each placeholder. */
     component?: "span" | "div";
+    /**
+     * Test id of the placeholder; `skeleton` unless given. With `count` > 1 it
+     * marks the group, and each placeholder keeps `skeleton`.
+     */
+    "data-testid"?: string;
 }
 export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLElement>>;
 export default Skeleton;

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

@@ -1,49 +1,52 @@
 import { jsx as l } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/skeleton/skeleton.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                           */
-import { forwardRef as u } from "react";
-import g from "clsx";
-const d = (e) => typeof e == "number" ? `${e}px` : e, C = u(function({
-  className: f,
-  variant: p = "text",
-  width: k,
-  height: c,
-  animation: o = "pulse",
-  count: t = 1,
-  animationDelay: r,
-  component: h = "span",
-  style: w,
-  ...m
-}, a) {
-  const b = g(
+import { forwardRef as S } from "react";
+import $ from "clsx";
+const w = (o) => typeof o == "number" ? `${o}px` : o, O = S(function({
+  className: c,
+  variant: d = "text",
+  width: b,
+  height: _,
+  animation: s = "pulse",
+  count: n = 1,
+  animationDelay: m,
+  component: g = "span",
+  style: e,
+  "data-testid": r,
+  ...a
+}, f) {
+  const u = $(
     "smwb-skeleton",
-    `smwb-skeleton_${p}`,
-    o === !1 ? "smwb-skeleton_no-animation" : `smwb-skeleton_${o}`,
-    f
-  ), _ = h, i = (s) => {
-    const n = {
-      ...w,
-      width: d(k),
-      height: d(c),
-      ...r ? { animationDelay: `${s * r}ms` } : {}
+    `smwb-skeleton_${d}`,
+    s === !1 ? "smwb-skeleton_no-animation" : `smwb-skeleton_${s}`,
+    c
+  ), x = g, h = (t) => {
+    var k, p;
+    const i = {
+      ...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: (p = w(_)) != null ? p : e == null ? void 0 : e.height,
+      ...m ? { animationDelay: `${t * m}ms` } : {}
     };
     return /* @__PURE__ */ l(
-      _,
+      x,
       {
-        ref: t === 1 ? a : void 0,
-        ...t === 1 ? m : {},
-        "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: i
       },
-      s
+      t
     );
   };
-  return t === 1 ? i(0) : /* @__PURE__ */ l("span", { ref: a, ...m, className: "smwb-skeleton__group", "aria-hidden": "true", children: Array.from({ length: t }, (s, n) => i(n)) });
+  return n === 1 ? h(0) : /* @__PURE__ */ l("span", { ref: f, ...a, "data-testid": r, className: "smwb-skeleton__group", "aria-hidden": "true", children: Array.from({ length: n }, (t, i) => h(i)) });
 });
 export {
-  C as Skeleton,
-  C as default
+  O as Skeleton,
+  O as default
 };
 //# sourceMappingURL=skeleton.js.map