@smwb/ui-react 2.6.3 → 2.8.0

package/dist/headless/components/dataDisplay/thumbCard/thumbCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumbCard.js","sources":["../../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { LazyImage } from \"../lazyImage\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface ThumbCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  caption?: React.ReactNode;\n  selected?: boolean;\n  /** Makes the card a selectable button (keyboard + `aria-pressed`). */\n  onSelect?: () => void;\n  /** Shown in place of the image when `src` is missing / fails. */\n  fallback?: React.ReactNode;\n  /** A larger preview shown in a floating popup after a hover delay. */\n  hoverPreview?: React.ReactNode | string;\n  /** Top-left overlay slot (e.g. a favourite star). */\n  topStart?: React.ReactNode;\n  /** Top-right overlay slot (e.g. a kebab menu). */\n  topEnd?: React.ReactNode;\n  lazy?: boolean;\n  disabled?: boolean;\n  /** Delay (ms) before the hover preview appears. Default 350. */\n  hoverDelay?: number;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport const ThumbCard = forwardRef<HTMLDivElement, ThumbCardProps>(function ThumbCard(\n  {\n    src,\n    caption,\n    selected,\n    onSelect,\n    fallback,\n    hoverPreview,\n    topStart,\n    topEnd,\n    lazy = true,\n    disabled,\n    hoverDelay = 350,\n    className,\n    ...rest\n  },\n  ref\n) {\n  const cardRef = useRef<HTMLDivElement | null>(null);\n  const setRefs = useForkRef(ref, cardRef);\n  const [preview, setPreview] = useState<{ top: number; left: number } | null>(null);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const clearTimer = (): void => {\n    if (timer.current) {\n      clearTimeout(timer.current);\n      timer.current = null;\n    }\n  };\n  const onEnter = (): void => {\n    if (hoverPreview == null || disabled) return;\n    clearTimer();\n    timer.current = setTimeout(() => {\n      const rect = cardRef.current?.getBoundingClientRect();\n      if (rect) setPreview({ top: rect.top, left: rect.right + 8 });\n    }, hoverDelay);\n  };\n  const onLeave = (): void => {\n    clearTimer();\n    setPreview(null);\n  };\n  useEffect(() => clearTimer, []);\n\n  const interactive = !!onSelect && !disabled;\n  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (interactive && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={setRefs}\n      className={cn(\"smwb-thumb-card\", className, {\n        \"smwb-thumb-card--selected\": selected,\n        \"smwb-thumb-card--disabled\": disabled,\n        \"smwb-thumb-card--interactive\": interactive,\n      })}\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      aria-pressed={onSelect ? (selected ?? false) : undefined}\n      aria-disabled={disabled || undefined}\n      onClick={interactive ? () => onSelect?.() : undefined}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div className=\"smwb-thumb-card__media\">\n        <LazyImage src={src} lazy={lazy} fallback={fallback} />\n        {topStart ? <div className=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{topStart}</div> : null}\n        {topEnd ? <div className=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{topEnd}</div> : null}\n      </div>\n      {caption ? <div className=\"smwb-thumb-card__caption\">{caption}</div> : null}\n      {preview && typeof document !== \"undefined\"\n        ? createPortal(\n            <div\n              className=\"smwb-thumb-card__preview\"\n              style={{ position: \"fixed\", top: preview.top, left: preview.left }}\n            >\n              {typeof hoverPreview === \"string\" ? <img src={hoverPreview} alt=\"\" /> : hoverPreview}\n            </div>,\n            document.body\n          )\n        : null}\n    </div>\n  );\n});\n\nexport default ThumbCard;\n"],"names":["ThumbCard","forwardRef","src","caption","selected","onSelect","fallback","hoverPreview","topStart","topEnd","lazy","disabled","hoverDelay","className","rest","ref","cardRef","useRef","setRefs","useForkRef","preview","setPreview","useState","timer","clearTimer","onEnter","rect","_a","onLeave","useEffect","interactive","onKeyDown","event","jsxs","cn","jsx","LazyImage","createPortal"],"mappings":"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"}
+{"version":3,"file":"thumbCard.js","sources":["../../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport cn from \"clsx\";\nimport { LazyImage } from \"../lazyImage\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport { splitControlProps } from \"../../../utils/controlProps\";\n\nexport interface ThumbCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /**\n   * Class name(s) for the root `<div>`, the card's box. `style`, `id`, `data-*`, `aria-hidden`, `ref` and event\n   * handlers go to the root too, but `role`, `tabIndex`, `onFocus`, `onBlur` and the other `aria-*` attributes go to\n   * the card's content, `.smwb-thumb-card__content` (the image and the caption): that is the card's button when it has\n   * `onSelect`, and the element to focus.\n   */\n  className?: string;\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  /**\n   * Text under the image. With `onSelect` it is part of the card's button and names it, so keep controls out of it:\n   * they go in `topStart` / `topEnd`.\n   */\n  caption?: React.ReactNode;\n  /** Outlines the image; with `onSelect`, the card's button is also `aria-pressed=\"true\"`. */\n  selected?: boolean;\n  /**\n   * Makes the card selectable: its content (the image and the caption) becomes a toggle button with `aria-pressed`,\n   * selected by a click and by Enter / Space. The corner slots are not part of that button but its siblings, laid over\n   * the image, so their controls keep their own names, clicks and keys.\n   *\n   * A click selects the card unless it lands in a control in a slot (button, link, input, anything focusable) or in a\n   * portal opened from the card. Slot content that is not a control keeps its click from selecting the card by calling\n   * `preventDefault()` on it.\n   */\n  onSelect?: () => void;\n  /**\n   * Runs on each click on the card, before `onSelect`, but not while the card is `disabled`.\n   * A click on a control in a slot runs it too, without selecting the card.\n   * Enter / Space select the card without a click, so they call only `onSelect`.\n   */\n  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n  /** Shown in place of the image when `src` is missing / fails. */\n  fallback?: React.ReactNode;\n  /** A larger preview shown in a floating popup after a hover delay. */\n  hoverPreview?: React.ReactNode | string;\n  /**\n   * Top-left overlay slot (e.g. a favourite star). It sits over the image, outside the card's button, so controls here\n   * keep their own names, clicks and keys; see `onSelect`.\n   */\n  topStart?: React.ReactNode;\n  /**\n   * Top-right overlay slot (e.g. a kebab menu). It sits over the image, outside the card's button, so controls here\n   * keep their own names, clicks and keys; see `onSelect`.\n   */\n  topEnd?: React.ReactNode;\n  lazy?: boolean;\n  /**\n   * Dims the card and ignores clicks on it: neither `onClick` nor `onSelect` runs.\n   * Keys do not select it either, and there is no hover preview. With `onSelect`\n   * the card is still a button, `aria-disabled` and out of the tab order.\n   */\n  disabled?: boolean;\n  /** Delay (ms) before the hover preview appears. Default 350. */\n  hoverDelay?: number;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n *\n * The root is a box around the card's content (the image and the caption, the\n * card's button when it is selectable) and the corner slots, which are laid\n * over the image beside that button rather than inside it.\n */\nexport const ThumbCard = forwardRef<HTMLDivElement, ThumbCardProps>(function ThumbCard(\n  {\n    src,\n    caption,\n    selected,\n    onSelect,\n    fallback,\n    hoverPreview,\n    topStart,\n    topEnd,\n    lazy = true,\n    disabled,\n    hoverDelay = 350,\n    className,\n    // The card sets these on its root too; its own handlers call the caller's.\n    onClick: onClickProp,\n    onKeyDown: onKeyDownProp,\n    onMouseEnter: onMouseEnterProp,\n    onMouseLeave: onMouseLeaveProp,\n    ...rest\n  },\n  ref\n) {\n  // What the card is to the keyboard and to assistive tech goes to its\n  // content, the element that is its button; the rest stays on the root.\n  const [control, box] = splitControlProps(rest);\n  const cardRef = useRef<HTMLDivElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const setRefs = useForkRef(ref, cardRef);\n  const [preview, setPreview] = useState<{ top: number; left: number } | null>(null);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const clearTimer = (): void => {\n    if (timer.current) {\n      clearTimeout(timer.current);\n      timer.current = null;\n    }\n  };\n  const onEnter = (event: React.MouseEvent<HTMLDivElement>): void => {\n    onMouseEnterProp?.(event);\n    if (hoverPreview == null || disabled) return;\n    clearTimer();\n    timer.current = setTimeout(() => {\n      const rect = cardRef.current?.getBoundingClientRect();\n      if (rect) setPreview({ top: rect.top, left: rect.right + 8 });\n    }, hoverDelay);\n  };\n  const onLeave = (event: React.MouseEvent<HTMLDivElement>): void => {\n    onMouseLeaveProp?.(event);\n    clearTimer();\n    setPreview(null);\n  };\n  useEffect(() => clearTimer, []);\n\n  const interactive = !!onSelect && !disabled;\n  // A disabled card ignores clicks, the caller's onClick included: it says\n  // aria-disabled, and its styles turn pointer events off. The caller's onClick\n  // sees every other click, those in the slots too, but only clicks on the\n  // card's content and on what is not a control in a slot select it: not one\n  // on a control in a slot, nor one in a portal opened from the card. That is\n  // settled before onClick runs, so what onClick does to the event or the DOM\n  // does not change it.\n  const onClick = (event: React.MouseEvent<HTMLDivElement>): void => {\n    if (disabled) return;\n    const selects = isOwnClick(event, contentRef.current);\n    onClickProp?.(event);\n    if (selects) onSelect?.();\n  };\n  // Keys pressed on a control in a slot bubble up here too; only the keys of\n  // the card's button select it.\n  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    onKeyDownProp?.(event);\n    if (!interactive || event.target !== contentRef.current) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...box}\n      ref={setRefs}\n      className={cn(\"smwb-thumb-card\", className, {\n        \"smwb-thumb-card--selected\": selected,\n        \"smwb-thumb-card--disabled\": disabled,\n        \"smwb-thumb-card--interactive\": interactive,\n      })}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div\n        {...control}\n        ref={contentRef}\n        className=\"smwb-thumb-card__content\"\n        // With onSelect the content is the card's button and says whether it is\n        // pressed, and a disabled card says so: these win over the caller's, and\n        // where the card sets none, the caller's stay. Its tabIndex is a\n        // default: the caller's wins, e.g. for roving focus.\n        role={onSelect ? \"button\" : control.role}\n        tabIndex={control.tabIndex ?? (interactive ? 0 : undefined)}\n        aria-pressed={onSelect ? (selected ?? false) : control[\"aria-pressed\"]}\n        aria-disabled={disabled || control[\"aria-disabled\"]}\n      >\n        <div className=\"smwb-thumb-card__media\">\n          <LazyImage src={src} lazy={lazy} fallback={fallback} />\n        </div>\n        {caption ? <div className=\"smwb-thumb-card__caption\">{caption}</div> : null}\n      </div>\n      {/* Beside the button, not in it: controls here keep their names and input. */}\n      {topStart ? <div className=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{topStart}</div> : null}\n      {topEnd ? <div className=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{topEnd}</div> : null}\n      {preview && typeof document !== \"undefined\"\n        ? createPortal(\n            <div\n              className=\"smwb-thumb-card__preview\"\n              style={{ position: \"fixed\", top: preview.top, left: preview.left }}\n            >\n              {typeof hoverPreview === \"string\" ? <img src={hoverPreview} alt=\"\" /> : hoverPreview}\n            </div>,\n            document.body\n          )\n        : null}\n    </div>\n  );\n});\n\nexport default ThumbCard;\n"],"names":["ThumbCard","forwardRef","src","caption","selected","onSelect","fallback","hoverPreview","topStart","topEnd","lazy","disabled","hoverDelay","className","onClickProp","onKeyDownProp","onMouseEnterProp","onMouseLeaveProp","rest","ref","control","box","splitControlProps","cardRef","useRef","contentRef","setRefs","useForkRef","preview","setPreview","useState","timer","clearTimer","onEnter","event","rect","_a","onLeave","useEffect","interactive","onClick","selects","isOwnClick","onKeyDown","jsxs","cn","jsx","LazyImage","createPortal"],"mappings":"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"}

package/dist/headless/components/dataDisplay/timeline/timeline.js

@@ -0,0 +1,42 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import r from "react";
+import c from "clsx";
+import { Icon as w } from "../../base/icon/icon.js";
+const h = r.forwardRef(function({ className: s, dense: n, stickyLabels: m, children: l, ...i }, t) {
+  return /* @__PURE__ */ e(
+    "ol",
+    {
+      ...i,
+      ref: t,
+      className: c(
+        "smwb-timeline",
+        { "smwb-timeline_dense": n, "smwb-timeline_sticky-labels": m },
+        s
+      ),
+      children: l
+    }
+  );
+}), v = r.forwardRef(
+  function({ className: s, label: n, children: m, ...l }, i) {
+    return /* @__PURE__ */ a("li", { ...l, ref: i, className: c("smwb-timeline__group", s), children: [
+      /* @__PURE__ */ e("div", { className: "smwb-timeline__label", children: n }),
+      /* @__PURE__ */ e("ol", { className: "smwb-timeline__items", children: m })
+    ] });
+  }
+), T = r.forwardRef(function({ className: s, title: n, meta: m, time: l, icon: i, tone: t = "neutral", children: o, ...d }, b) {
+  return /* @__PURE__ */ a("li", { ...d, ref: b, className: c("smwb-timeline__item", `smwb-timeline__item_tone-${t}`, s), children: [
+    /* @__PURE__ */ e("span", { className: "smwb-timeline__mark", "aria-hidden": "true", children: i ? typeof i == "string" ? /* @__PURE__ */ e(w, { name: i, size: 16 }) : i : /* @__PURE__ */ e("span", { className: "smwb-timeline__dot" }) }),
+    /* @__PURE__ */ a("div", { className: "smwb-timeline__body", children: [
+      /* @__PURE__ */ e("div", { className: "smwb-timeline__title", children: n }),
+      m ? /* @__PURE__ */ e("div", { className: "smwb-timeline__meta", children: m }) : null,
+      o ? /* @__PURE__ */ e("div", { className: "smwb-timeline__content", children: o }) : null
+    ] }),
+    l ? /* @__PURE__ */ e("div", { className: "smwb-timeline__time", children: l }) : null
+  ] });
+});
+export {
+  h as Timeline,
+  v as TimelineGroup,
+  T as TimelineItem
+};
+//# sourceMappingURL=timeline.js.map

package/dist/headless/components/dataDisplay/timeline/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sources":["../../../../../src/components/dataDisplay/timeline/timeline.tsx"],"sourcesContent":["import React, { HTMLAttributes, LiHTMLAttributes, OlHTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type TimelineTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface TimelineProps extends OlHTMLAttributes<HTMLOListElement> {\n  className?: string;\n  /** Tighter rows, for side panels. */\n  dense?: boolean;\n  /** Keep a group's label in view while its events scroll past (in a scrolling container). */\n  stickyLabels?: boolean;\n}\n\nexport interface TimelineGroupProps extends Omit<LiHTMLAttributes<HTMLLIElement>, \"title\"> {\n  className?: string;\n  /** What groups the events — a day, a week, a stage. */\n  label: ReactNode;\n}\n\nexport interface TimelineItemProps extends Omit<HTMLAttributes<HTMLLIElement>, \"title\"> {\n  className?: string;\n  /** The event itself: a line of text, usually a link. */\n  title: ReactNode;\n  /** A second line: who, what kind, where. */\n  meta?: ReactNode;\n  /** When: a time or a date, at the end of the row. */\n  time?: ReactNode;\n  /** The event's mark on the line: a Material Symbols name or an element. A dot without it. */\n  icon?: string | ReactNode;\n  /** Colour of the mark. */\n  tone?: TimelineTone;\n}\n\n/**\n * Events on a line, newest or oldest first as given: TimelineItem children,\n * optionally grouped by TimelineGroup (a day, a week).\n */\nexport const Timeline = React.forwardRef<HTMLOListElement, PropsWithChildren<TimelineProps>>(function Timeline(\n  { className, dense, stickyLabels, children, ...rest },\n  ref\n) {\n  return (\n    <ol\n      {...rest}\n      ref={ref}\n      className={cn(\n        \"smwb-timeline\",\n        { \"smwb-timeline_dense\": dense, \"smwb-timeline_sticky-labels\": stickyLabels },\n        className\n      )}\n    >\n      {children}\n    </ol>\n  );\n});\n\n/** A labelled run of events: the label, then its TimelineItem children on the line. */\nexport const TimelineGroup = React.forwardRef<HTMLLIElement, PropsWithChildren<TimelineGroupProps>>(\n  function TimelineGroup({ className, label, children, ...rest }, ref) {\n    return (\n      <li {...rest} ref={ref} className={cn(\"smwb-timeline__group\", className)}>\n        <div className=\"smwb-timeline__label\">{label}</div>\n        <ol className=\"smwb-timeline__items\">{children}</ol>\n      </li>\n    );\n  }\n);\n\n/** One event: its mark on the line, the title and meta lines, the time; children below. */\nexport const TimelineItem = React.forwardRef<HTMLLIElement, PropsWithChildren<TimelineItemProps>>(function TimelineItem(\n  { className, title, meta, time, icon, tone = \"neutral\", children, ...rest },\n  ref\n) {\n  return (\n    <li {...rest} ref={ref} className={cn(\"smwb-timeline__item\", `smwb-timeline__item_tone-${tone}`, className)}>\n      <span className=\"smwb-timeline__mark\" aria-hidden=\"true\">\n        {icon ? (\n          typeof icon === \"string\" ? (\n            <Icon name={icon} size={16} />\n          ) : (\n            icon\n          )\n        ) : (\n          <span className=\"smwb-timeline__dot\" />\n        )}\n      </span>\n      <div className=\"smwb-timeline__body\">\n        <div className=\"smwb-timeline__title\">{title}</div>\n        {meta ? <div className=\"smwb-timeline__meta\">{meta}</div> : null}\n        {children ? <div className=\"smwb-timeline__content\">{children}</div> : null}\n      </div>\n      {time ? <div className=\"smwb-timeline__time\">{time}</div> : null}\n    </li>\n  );\n});\n\nexport default Timeline;\n"],"names":["Timeline","React","className","dense","stickyLabels","children","rest","ref","jsx","cn","TimelineGroup","label","jsxs","TimelineItem","title","meta","time","icon","tone","Icon"],"mappings":";;;;AAsCO,MAAMA,IAAWC,EAAM,WAA+D,SAC3F,EAAE,WAAAC,GAAW,OAAAC,GAAO,cAAAC,GAAc,UAAAC,GAAU,GAAGC,EAAA,GAC/CC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA,EAAE,uBAAuBN,GAAO,+BAA+BC,EAAA;AAAA,QAC/DF;AAAA,MAAA;AAAA,MAGD,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC,GAGYK,IAAgBT,EAAM;AAAA,EACjC,SAAuB,EAAE,WAAAC,GAAW,OAAAS,GAAO,UAAAN,GAAU,GAAGC,EAAA,GAAQC,GAAK;AACnE,WACE,gBAAAK,EAAC,QAAI,GAAGN,GAAM,KAAAC,GAAU,WAAWE,EAAG,wBAAwBP,CAAS,GACrE,UAAA;AAAA,MAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,wBAAwB,UAAAG,GAAM;AAAA,MAC7C,gBAAAH,EAAC,MAAA,EAAG,WAAU,wBAAwB,UAAAH,EAAA,CAAS;AAAA,IAAA,GACjD;AAAA,EAEJ;AACF,GAGaQ,IAAeZ,EAAM,WAAgE,SAChG,EAAE,WAAAC,GAAW,OAAAY,GAAO,MAAAC,GAAM,MAAAC,GAAM,MAAAC,GAAM,MAAAC,IAAO,WAAW,UAAAb,GAAU,GAAGC,EAAA,GACrEC,GACA;AACA,SACE,gBAAAK,EAAC,MAAA,EAAI,GAAGN,GAAM,KAAAC,GAAU,WAAWE,EAAG,uBAAuB,4BAA4BS,CAAI,IAAIhB,CAAS,GACxG,UAAA;AAAA,IAAA,gBAAAM,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAAS,IACC,OAAOA,KAAS,WACd,gBAAAT,EAACW,KAAK,MAAMF,GAAM,MAAM,GAAA,CAAI,IAE5BA,IAGF,gBAAAT,EAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB,EAAA,CAEzC;AAAA,IACA,gBAAAI,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,MAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,wBAAwB,UAAAM,GAAM;AAAA,MAC5CC,IAAO,gBAAAP,EAAC,OAAA,EAAI,WAAU,uBAAuB,aAAK,IAAS;AAAA,MAC3DH,IAAW,gBAAAG,EAAC,OAAA,EAAI,WAAU,0BAA0B,UAAAH,GAAS,IAAS;AAAA,IAAA,GACzE;AAAA,IACCW,IAAO,gBAAAR,EAAC,OAAA,EAAI,WAAU,uBAAuB,aAAK,IAAS;AAAA,EAAA,GAC9D;AAEJ,CAAC;"}

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

@@ -1,12 +1,12 @@
-import { jsx as n, jsxs as b } from "react/jsx-runtime";
-import { forwardRef as v, useState as D, useRef as I, useMemo as ee } from "react";
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { forwardRef as I, useState as D, useRef as ee, useMemo as se } from "react";
 import O from "clsx";
 import { Icon as N } from "../../base/icon/icon.js";
 import { useControllableState as K } from "../../../hooks/useControllableState.js";
-const ie = v(function({
+const oe = I(function({
   className: M,
   listIcon: k = "draft",
-  nodeIcon: a = { closed: "folder", opened: "folder_open" },
+  nodeIcon: n = { closed: "folder", opened: "folder_open" },
   data: x = [],
   expanded: P,
   defaultExpanded: S = [],
@@ -18,20 +18,21 @@ const ie = v(function({
   checkboxes: u = !1,
   renderLabel: m,
   loadChildren: _,
-  ...G
-}, H) {
-  const [o, J] = D({}), [y, L] = D([]), [z, C] = K({
+  "data-testid": G = "tree-view",
+  ...H
+}, J) {
+  const [o, Q] = D({}), [y, L] = D([]), [z, C] = K({
     value: P,
     defaultValue: S,
     onChange: q
-  }), h = I(), [p, Q] = K({
+  }), h = ee(), [p, U] = K({
     value: B,
     defaultValue: F,
     onChange: (e) => {
       const t = h.current;
       h.current = void 0, d == null || d(e, t);
     }
-  }), U = (e) => {
+  }), W = (e) => {
     C((t) => t.includes(e) ? t.filter((s) => s !== e) : [...t, e]);
   }, R = (e, t) => {
     C((s) => {
@@ -39,18 +40,18 @@ const ie = v(function({
       return t && !l ? [...s, e] : !t && l ? s.filter((w) => w !== e) : s;
     });
   }, V = (e) => {
-    h.current = { id: e, selected: !p.includes(e) }, Q((t) => t.includes(e) ? t.filter((s) => s !== e) : [...t, e]);
+    h.current = { id: e, selected: !p.includes(e) }, U((t) => t.includes(e) ? t.filter((s) => s !== e) : [...t, e]);
   }, E = (e, t) => {
     !_ || o[t] || e.children && e.children.length > 0 || (L((s) => s.includes(t) ? s : [...s, t]), _(e, t).then((s) => {
-      J((l) => ({ ...l, [t]: s }));
+      Q((l) => ({ ...l, [t]: s }));
     }).finally(() => {
       L((s) => s.filter((l) => l !== t));
     }));
   }, T = (e, t) => {
     var j, A;
-    const s = (j = e.id) != null ? j : t, l = (A = e.children) != null ? A : o[s], w = !!_ && (e.hasChildren || !!o[s]), i = !!l && l.length > 0 || w, c = z.includes(s), g = p.includes(s), X = y.includes(s), $ = () => {
-      i && (c || E(e, s), U(s)), f && V(s);
-    }, Y = (r) => {
+    const s = (j = e.id) != null ? j : t, l = (A = e.children) != null ? A : o[s], w = !!_ && (e.hasChildren || !!o[s]), i = !!l && l.length > 0 || w, c = z.includes(s), g = p.includes(s), Y = y.includes(s), $ = () => {
+      i && (c || E(e, s), W(s)), f && V(s);
+    }, Z = (r) => {
       r.key === "Enter" || r.key === " " ? (r.preventDefault(), $()) : r.key === "ArrowRight" && i ? (E(e, s), R(s, !0)) : r.key === "ArrowLeft" && i && R(s, !1);
     };
     return /* @__PURE__ */ b(
@@ -66,11 +67,11 @@ const ie = v(function({
             {
               className: "smwb-tree__node__content",
               onClick: $,
-              onKeyDown: Y,
+              onKeyDown: Z,
               tabIndex: 0,
               role: "button",
               children: [
-                u && /* @__PURE__ */ n(
+                u && /* @__PURE__ */ a(
                   "input",
                   {
                     type: "checkbox",
@@ -82,18 +83,18 @@ const ie = v(function({
                   }
                 ),
                 /* @__PURE__ */ b("span", { className: "smwb-tree__node__label", children: [
-                  i && c ? /* @__PURE__ */ n(N, { name: a == null ? void 0 : a.opened, fill: 1, size: 20 }) : i ? /* @__PURE__ */ n(N, { name: a == null ? void 0 : a.closed, fill: 1, size: 20 }) : /* @__PURE__ */ n(N, { name: k, size: 20 }),
+                  i && c ? /* @__PURE__ */ a(N, { name: n == null ? void 0 : n.opened, fill: 1, size: 20 }) : i ? /* @__PURE__ */ a(N, { name: n == null ? void 0 : n.closed, fill: 1, size: 20 }) : /* @__PURE__ */ a(N, { name: k, size: 20 }),
                   m ? m(e, s) : e.label
                 ] })
               ]
             }
           ),
-          i && c && /* @__PURE__ */ n("div", { role: "group", children: X && !l ? /* @__PURE__ */ n("div", { className: "smwb-tree__node__loading", role: "status", children: "Загрузка…" }) : l == null ? void 0 : l.map((r, Z) => T(r, `${t}.${Z}`)) })
+          i && c && /* @__PURE__ */ a("div", { role: "group", children: Y && !l ? /* @__PURE__ */ a("div", { className: "smwb-tree__node__loading", role: "status", children: "Загрузка…" }) : l == null ? void 0 : l.map((r, v) => T(r, `${t}.${v}`)) })
         ]
       },
       s
     );
-  }, W = ee(
+  }, X = se(
     () => x.map((e, t) => T(e, `${t}`)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -103,16 +104,16 @@ const ie = v(function({
       f,
       u,
       k,
-      a,
+      n,
       m,
       o,
       y
     ]
   );
-  return /* @__PURE__ */ n("div", { "data-testid": "tree-view", ...G, ref: H, role: "tree", className: O("smwb-tree", M), children: W.map((e, t) => /* @__PURE__ */ n("div", { className: "smwb-tree__wrapper", role: "presentation", children: e }, t)) });
+  return /* @__PURE__ */ a("div", { "data-testid": G, ...H, ref: J, role: "tree", className: O("smwb-tree", M), children: X.map((e, t) => /* @__PURE__ */ a("div", { className: "smwb-tree__wrapper", role: "presentation", children: e }, t)) });
 });
 export {
-  ie as TreeView,
-  ie as default
+  oe as TreeView,
+  oe as default
 };
 //# sourceMappingURL=treeView.js.map

package/dist/headless/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\";\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  /** 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    renderLabel,\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  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={dataTestId} {...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","dataTestId","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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"}

package/dist/headless/components/dataDisplay/typography/typography.js

@@ -1,44 +1,61 @@
-import { jsx as e } from "react/jsx-runtime";
-import m from "react";
-import f from "clsx";
-const u = {
+import { jsx as d } from "react/jsx-runtime";
+import f from "react";
+import l from "clsx";
+const n = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
   h4: "h4",
   h5: "h5",
   h6: "h6",
-  subtitle1: "h6",
-  subtitle2: "h6",
+  // A subtitle is not a heading: as h6 it would break the page's outline.
+  subtitle1: "p",
+  subtitle2: "p",
   body1: "p",
   body2: "p",
   caption: "span",
   overline: "span",
   button: "span"
-}, _ = m.forwardRef(function({ variant: t = "body1", color: p = "inherit", align: r, gutterBottom: a, noWrap: o, component: h, className: y, children: s, ...b }, g) {
-  const i = h != null ? h : u[t];
-  return /* @__PURE__ */ e(
-    i,
+}, x = f.forwardRef(function({
+  variant: a = "body1",
+  color: r = "inherit",
+  align: h,
+  gutterBottom: s,
+  noWrap: b,
+  lines: p,
+  tabularNums: m,
+  component: t,
+  className: g,
+  style: y,
+  children: i,
+  ...w
+}, e) {
+  const u = t != null ? t : n[a], o = p !== void 0 && p > 0;
+  return /* @__PURE__ */ d(
+    u,
     {
-      ref: g,
-      className: f(
+      ref: e,
+      className: l(
         "smwb-typography",
-        `smwb-typography_${t}`,
-        p !== "inherit" && `smwb-typography_color-${p}`,
-        r && `smwb-typography_align-${r}`,
+        `smwb-typography_${a}`,
+        r !== "inherit" && `smwb-typography_color-${r}`,
+        h && `smwb-typography_align-${h}`,
         {
-          "smwb-typography_gutter": a,
-          "smwb-typography_nowrap": o
+          "smwb-typography_gutter": s,
+          "smwb-typography_nowrap": b,
+          "smwb-typography_clamp": o,
+          "smwb-typography_tabular-nums": m
         },
-        y
+        g
       ),
-      ...b,
-      children: s
+      style: o ? { ...y, "--smwb-typography-lines": p } : y,
+      ...w,
+      children: i
     }
   );
 });
 export {
-  _ as Typography,
-  _ as default
+  x as Typography,
+  x as default
 };
 //# sourceMappingURL=typography.js.map

package/dist/headless/components/dataDisplay/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","sources":["../../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport type TypographyVariant =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"subtitle1\"\n  | \"subtitle2\"\n  | \"body1\"\n  | \"body2\"\n  | \"caption\"\n  | \"overline\"\n  | \"button\";\n\nexport type TypographyColor =\n  | \"inherit\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"textPrimary\"\n  | \"textSecondary\"\n  | \"disabled\";\n\nconst defaultTag: Record<TypographyVariant, keyof JSX.IntrinsicElements> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n  h6: \"h6\",\n  subtitle1: \"h6\",\n  subtitle2: \"h6\",\n  body1: \"p\",\n  body2: \"p\",\n  caption: \"span\",\n  overline: \"span\",\n  button: \"span\",\n};\n\nexport interface TypographyProps extends HTMLAttributes<HTMLElement> {\n  variant?: TypographyVariant;\n  color?: TypographyColor;\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Add a bottom margin (block rhythm). */\n  gutterBottom?: boolean;\n  /** Truncate with an ellipsis on a single line. */\n  noWrap?: boolean;\n  /** Render as a different element/component. */\n  component?: keyof JSX.IntrinsicElements;\n  className?: string;\n}\n\nexport const Typography = React.forwardRef<HTMLElement, PropsWithChildren<TypographyProps>>(function Typography(\n  { variant = \"body1\", color = \"inherit\", align, gutterBottom, noWrap, component, className, children, ...rest },\n  ref\n) {\n  const Tag = (component ?? defaultTag[variant]) as \"p\";\n  return (\n    <Tag\n      ref={ref as React.Ref<HTMLParagraphElement>}\n      className={cn(\n        \"smwb-typography\",\n        `smwb-typography_${variant}`,\n        color !== \"inherit\" && `smwb-typography_color-${color}`,\n        align && `smwb-typography_align-${align}`,\n        {\n          \"smwb-typography_gutter\": gutterBottom,\n          \"smwb-typography_nowrap\": noWrap,\n        },\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nexport default Typography;\n"],"names":["defaultTag","Typography","React","variant","color","align","gutterBottom","noWrap","component","className","children","rest","ref","Tag","jsx","cn"],"mappings":";;;AA8BA,MAAMA,IAAqE;AAAA,EACzE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AACV,GAeaC,IAAaC,EAAM,WAA4D,SAC1F,EAAE,SAAAC,IAAU,SAAS,OAAAC,IAAQ,WAAW,OAAAC,GAAO,cAAAC,GAAc,QAAAC,GAAQ,WAAAC,GAAW,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GACxGC,GACA;AACA,QAAMC,IAAOL,KAAA,OAAAA,IAAaR,EAAWG,CAAO;AAC5C,SACE,gBAAAW;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACA,mBAAmBZ,CAAO;AAAA,QAC1BC,MAAU,aAAa,yBAAyBA,CAAK;AAAA,QACrDC,KAAS,yBAAyBA,CAAK;AAAA,QACvC;AAAA,UACE,0BAA0BC;AAAA,UAC1B,0BAA0BC;AAAA,QAAA;AAAA,QAE5BE;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"typography.js","sources":["../../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport type TypographyVariant =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"subtitle1\"\n  | \"subtitle2\"\n  | \"body1\"\n  | \"body2\"\n  | \"caption\"\n  | \"overline\"\n  | \"button\";\n\nexport type TypographyColor =\n  | \"inherit\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"textPrimary\"\n  | \"textSecondary\"\n  | \"disabled\";\n\nconst defaultTag: Record<TypographyVariant, keyof JSX.IntrinsicElements> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n  h6: \"h6\",\n  // A subtitle is not a heading: as h6 it would break the page's outline.\n  subtitle1: \"p\",\n  subtitle2: \"p\",\n  body1: \"p\",\n  body2: \"p\",\n  caption: \"span\",\n  overline: \"span\",\n  button: \"span\",\n};\n\nexport interface TypographyProps extends HTMLAttributes<HTMLElement> {\n  variant?: TypographyVariant;\n  color?: TypographyColor;\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Add a bottom margin (block rhythm). */\n  gutterBottom?: boolean;\n  /** Truncate with an ellipsis on a single line. */\n  noWrap?: boolean;\n  /** Truncate with an ellipsis after this many lines. */\n  lines?: number;\n  /** Digits of equal width (`tabular-nums`), so figures line up in KPIs and tables. */\n  tabularNums?: boolean;\n  /** Render as a different element/component. */\n  component?: keyof JSX.IntrinsicElements;\n  className?: string;\n}\n\nexport const Typography = React.forwardRef<HTMLElement, PropsWithChildren<TypographyProps>>(function Typography(\n  {\n    variant = \"body1\",\n    color = \"inherit\",\n    align,\n    gutterBottom,\n    noWrap,\n    lines,\n    tabularNums,\n    component,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const Tag = (component ?? defaultTag[variant]) as \"p\";\n  const clamped = lines !== undefined && lines > 0;\n  return (\n    <Tag\n      ref={ref as React.Ref<HTMLParagraphElement>}\n      className={cn(\n        \"smwb-typography\",\n        `smwb-typography_${variant}`,\n        color !== \"inherit\" && `smwb-typography_color-${color}`,\n        align && `smwb-typography_align-${align}`,\n        {\n          \"smwb-typography_gutter\": gutterBottom,\n          \"smwb-typography_nowrap\": noWrap,\n          \"smwb-typography_clamp\": clamped,\n          \"smwb-typography_tabular-nums\": tabularNums,\n        },\n        className\n      )}\n      style={clamped ? ({ ...style, \"--smwb-typography-lines\": lines } as CSSProperties) : style}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nexport default Typography;\n"],"names":["defaultTag","Typography","React","variant","color","align","gutterBottom","noWrap","lines","tabularNums","component","className","style","children","rest","ref","Tag","clamped","jsx","cn"],"mappings":";;;AA8BA,MAAMA,IAAqE;AAAA,EACzE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA;AAAA,EAEJ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AACV,GAmBaC,IAAaC,EAAM,WAA4D,SAC1F;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAON,KAAA,OAAAA,IAAaV,EAAWG,CAAO,GACtCc,IAAUT,MAAU,UAAaA,IAAQ;AAC/C,SACE,gBAAAU;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWI;AAAA,QACT;AAAA,QACA,mBAAmBhB,CAAO;AAAA,QAC1BC,MAAU,aAAa,yBAAyBA,CAAK;AAAA,QACrDC,KAAS,yBAAyBA,CAAK;AAAA,QACvC;AAAA,UACE,0BAA0BC;AAAA,UAC1B,0BAA0BC;AAAA,UAC1B,yBAAyBU;AAAA,UACzB,gCAAgCR;AAAA,QAAA;AAAA,QAElCE;AAAA,MAAA;AAAA,MAEF,OAAOM,IAAW,EAAE,GAAGL,GAAO,2BAA2BJ,MAA4BI;AAAA,MACpF,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

@@ -0,0 +1,35 @@
+import { jsxs as y, jsx as s } from "react/jsx-runtime";
+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 } }, m = (t) => t != null && t !== !1 && t !== "" && !(Array.isArray(t) && t.length === 0), E = _.forwardRef(function({
+  className: d,
+  title: a,
+  icon: e,
+  actions: r,
+  variant: i = "block",
+  size: l = "medium",
+  children: n,
+  "data-testid": p = "empty-state",
+  ...o
+}, c) {
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      "data-testid": p,
+      ...o,
+      ref: c,
+      className: b("smwb-empty-state", `smwb-empty-state_${i}`, `smwb-empty-state_${l}`, d),
+      children: [
+        m(e) ? /* @__PURE__ */ s("span", { className: "smwb-empty-state__icon", "aria-hidden": "true", children: typeof e == "string" ? /* @__PURE__ */ s(f, { name: e, size: w[i][l] }) : e }) : null,
+        m(a) ? /* @__PURE__ */ s("div", { className: "smwb-empty-state__title", children: a }) : null,
+        m(n) ? /* @__PURE__ */ s("div", { className: "smwb-empty-state__description", children: n }) : null,
+        m(r) ? /* @__PURE__ */ s("div", { className: "smwb-empty-state__actions", children: r }) : null
+      ]
+    }
+  );
+});
+export {
+  E as EmptyState
+};
+//# sourceMappingURL=emptyState.js.map

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

@@ -0,0 +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  /** 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":";;;;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;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/headless/components/feedBack/message/message.js

@@ -1,31 +1,42 @@
-import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import f from "clsx";
-import { Icon as p } from "../../base/icon/icon.js";
-const w = b(
-  ({ className: e, children: m, type: t, severity: s, variant: l = "filled", onClose: r, closeAriaLabel: n = "Close", ...c }, i) => {
-    const a = s != null ? s : t, d = f("smwb-message", `smwb-message_${l}`, e, {
-      [`smwb-message_${a}`]: !!a
+import { jsxs as w, jsx as o } from "react/jsx-runtime";
+import { forwardRef as _ } from "react";
+import u from "clsx";
+import { Icon as h } from "../../base/icon/icon.js";
+const j = _(
+  ({
+    className: e,
+    children: n,
+    type: i,
+    severity: s,
+    variant: c = "filled",
+    onClose: r,
+    closeAriaLabel: d = "Close",
+    "data-testid": g = "message",
+    ...a
+  }, b) => {
+    var m, l;
+    const t = s != null ? s : i, f = u("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",
-        ...c,
-        className: d,
-        ref: i,
+        "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(p, { name: "close", weight: 1e3 }) })
+          n,
+          r && /* @__PURE__ */ o("button", { className: "smwb-message__close-btn", onClick: r, "aria-label": d, type: "button", children: /* @__PURE__ */ o(h, { name: "close", weight: 1e3 }) })
         ]
       }
     );
   }
-), _ = ({ children: e }) => /* @__PURE__ */ o("div", { className: "smwb-message__header", children: e }), C = Object.assign(w, { Header: _ });
+), p = ({ children: e }) => /* @__PURE__ */ o("div", { className: "smwb-message__header", children: e }), M = Object.assign(j, { Header: p });
 export {
-  w as MessageContainer,
-  C as default
+  j as MessageContainer,
+  M as default
 };
 //# sourceMappingURL=message.js.map

package/dist/headless/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":";;;;AAkBO,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":";;;;AAoBO,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;"}