@smwb/ui-react 2.7.0 → 2.9.0

package/dist/headless/components/dataDisplay/table/tableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableHeadCell.js","sources":["../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, ThHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /**\n   * Enables the interactive sort affordance with keyboard/aria support.\n   *\n   * The children sit inside the sort control, and controls among them keep\n   * their own input: Enter and Space sort only while the sort control itself\n   * has focus, and a click sorts unless it lands in a nested control (input,\n   * button, link, label, anything focusable) or in a portal. Content that is not\n   * a control, such as click-to-edit text, keeps its click from sorting by\n   * calling `preventDefault()` on it. A nested control's name, or its value,\n   * becomes part of the sort control's accessible name.\n   */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n}\n\n/**\n * Whatever takes a click of its own inside the sort control. The control\n * matches too (`role=\"button\"`), so it is the nearest match for a click on the\n * header's text or marker, and only then does the click sort.\n */\nconst INTERACTIVE = [\n  \"a[href]\",\n  \"button\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  \"label\",\n  \"summary\",\n  \"[tabindex]\",\n  \"[contenteditable]:not([contenteditable='false'])\",\n  ...[\n    \"button\",\n    \"link\",\n    \"checkbox\",\n    \"radio\",\n    \"switch\",\n    \"textbox\",\n    \"searchbox\",\n    \"combobox\",\n    \"spinbutton\",\n    \"slider\",\n    \"menuitem\",\n    \"menuitemcheckbox\",\n    \"menuitemradio\",\n    \"option\",\n    \"tab\",\n  ].map((role) => `[role='${role}']`),\n].join(\",\");\n\nconst TableHeadCell = ({\n  children,\n  className,\n  cellAlign = \"left\",\n  isSortedByAsc,\n  isSortedByDesc,\n  sortable,\n  sortDirection,\n  onSort,\n  ...props\n}: PropsWithChildren<TableHeadCellProps>) => {\n  const direction: SortDirection =\n    sortDirection !== undefined ? sortDirection : isSortedByAsc ? \"asc\" : isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = sortable\n    ? direction === \"asc\"\n      ? \"ascending\"\n      : direction === \"desc\"\n        ? \"descending\"\n        : \"none\"\n    : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = direction === \"asc\" ? \"expand_more\" : direction === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  // Keys typed into an input or pressed on a button inside bubble up here too;\n  // only the control's own keys sort.\n  const onKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    if (event.target !== event.currentTarget) return;\n    if (sortable && onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      onSort();\n    }\n  };\n\n  // A click sorts only when the control is the nearest thing that takes it. A\n  // click in a portal rendered inside fails that too: React delivers it here,\n  // though it landed outside the control.\n  const onClick = (event: React.MouseEvent<HTMLSpanElement>) => {\n    if (event.defaultPrevented) return;\n    if ((event.target as Element | null)?.closest(INTERACTIVE) !== event.currentTarget) return;\n    onSort?.();\n  };\n\n  return (\n    <th\n      {...props}\n      aria-sort={ariaSort}\n      className={cn(\"smwb-table__cell\", \"smwb-head-cell\", className, {\n        [`smwb-align_${cellAlign}`]: !!cellAlign,\n        \"smwb-head-cell_sortable\": sortable,\n        \"smwb-head-cell_sorted\": !!sortable && direction !== false,\n      })}\n    >\n      <span\n        className=\"smwb-head-cell__content\"\n        onClick={sortable ? onClick : undefined}\n        onKeyDown={sortable ? onKeyDown : undefined}\n        role={sortable ? \"button\" : undefined}\n        tabIndex={sortable ? 0 : undefined}\n      >\n        {children}\n        {sortable && <Icon className=\"smwb-head-cell__icon\" name={iconName} size={18} weight={800} />}\n      </span>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["INTERACTIVE","role","TableHeadCell","children","className","cellAlign","isSortedByAsc","isSortedByDesc","sortable","sortDirection","onSort","props","direction","ariaSort","iconName","onKeyDown","event","onClick","_a","jsx","cn","jsxs","Icon"],"mappings":";;;AAoCA,MAAMA,IAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACA,IAAI,CAACC,MAAS,UAAUA,CAAI,IAAI;AACpC,EAAE,KAAK,GAAG,GAEJC,IAAgB,CAAC;AAAA,EACrB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,MAA6C;AAC3C,QAAMC,IACJH,MAAkB,SAAYA,IAAgBH,IAAgB,QAAQC,IAAiB,SAAS,IAE5FM,IAAWL,IACbI,MAAc,QACZ,cACAA,MAAc,SACZ,eACA,SACJ,QASEE,IAAWF,MAAc,QAAQ,gBAAgBA,MAAc,SAAS,gBAAgB,eAIxFG,IAAY,CAACC,MAAgD;AACjE,IAAIA,EAAM,WAAWA,EAAM,iBACvBR,KAAYE,MAAWM,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SAChEA,EAAM,eAAA,GACNN,EAAA;AAAA,EAEJ,GAKMO,IAAU,CAACD,MAA6C;;AAC5D,IAAIA,EAAM,sBACLE,IAAAF,EAAM,WAAN,gBAAAE,EAAiC,QAAQlB,QAAiBgB,EAAM,kBACrEN,KAAA,QAAAA;AAAA,EACF;AAEA,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,aAAWE;AAAA,MACX,WAAWO,EAAG,oBAAoB,kBAAkBhB,GAAW;AAAA,QAC7D,CAAC,cAAcC,CAAS,EAAE,GAAG,CAAC,CAACA;AAAA,QAC/B,2BAA2BG;AAAA,QAC3B,yBAAyB,CAAC,CAACA,KAAYI,MAAc;AAAA,MAAA,CACtD;AAAA,MAED,UAAA,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASb,IAAWS,IAAU;AAAA,UAC9B,WAAWT,IAAWO,IAAY;AAAA,UAClC,MAAMP,IAAW,WAAW;AAAA,UAC5B,UAAUA,IAAW,IAAI;AAAA,UAExB,UAAA;AAAA,YAAAL;AAAA,YACAK,KAAY,gBAAAW,EAACG,GAAA,EAAK,WAAU,wBAAuB,MAAMR,GAAU,MAAM,IAAI,QAAQ,IAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC7F;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"tableHeadCell.js","sources":["../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, ReactNode, ThHTMLAttributes, useContext, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport Icon from \"../../base/icon/icon\";\nimport { useId } from \"../../../hooks/useId\";\nimport { TableColumnContext, TableHeadContext, TableLabelsContext, cellSpan, textOf } from \"./tableColumns\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /**\n   * Enables the interactive sort affordance with keyboard/aria support.\n   *\n   * The children sit inside the sort control, and controls among them keep\n   * their own input: Enter and Space sort only while the sort control itself\n   * has focus, and a click sorts unless it lands in a nested control (input,\n   * button, link, label, anything focusable) or in a portal. Content that is not\n   * a control, such as click-to-edit text, keeps its click from sorting by\n   * calling `preventDefault()` on it. A nested control's name, or its value,\n   * becomes part of the sort control's accessible name: put controls in\n   * `actions` instead.\n   */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  /**\n   * The column's controls — a filter field, a menu button, a column resizer —\n   * drawn after the sort control, outside it. Their names and values stay out\n   * of the sort control's accessible name, and their keys and clicks never\n   * reach it. Rendered whether or not the cell is sortable.\n   *\n   * The column header is then named after the children alone: the cell's\n   * `aria-labelledby` points at the sort control, unless the cell is given\n   * `aria-label` or `aria-labelledby`. Named from its content, the header would\n   * take in the controls' names and values too.\n   */\n  actions?: ReactNode;\n  /**\n   * The column's name for its body cells while the table stacks rows as cards\n   * (`Table stackBelow`). Without it, the text of the children is the name; give\n   * `label` where they hold no text of their own (an icon, a translated message\n   * component) or more than the name. An empty `label` leaves the column's cells\n   * unlabelled, so they fill the card's width.\n   */\n  label?: string;\n}\n\n/**\n * A head cell of a stacked table labels its column, for its own head row: the\n * lowest row's label wins. It writes the label while it renders, for the body\n * cells that render after it, and again from an effect: that also tells body\n * cells which rendered before a change.\n */\nfunction useColumnLabel(owner: string, colSpan: number | string | undefined, text: () => string): void {\n  const labels = useContext(TableLabelsContext);\n  const place = useContext(TableColumnContext);\n  const inHead = useContext(TableHeadContext);\n  const labelling = labels != null && place != null && inHead && cellSpan(colSpan) === 1;\n  const column = place?.column ?? -1;\n  const row = place?.row ?? -1;\n  const label = labelling ? text() || undefined : undefined;\n  // Written during render so the server markup has the labels: see ColumnLabels.\n  if (labelling) labels.set(column, row, owner, label);\n  useEffect(() => {\n    if (!labelling) return;\n    labels.set(column, row, owner, label);\n    labels.notify();\n    return () => {\n      labels.remove(column, row, owner);\n      labels.notify();\n    };\n  }, [labels, column, row, owner, labelling, label]);\n}\n\nconst TableHeadCell = ({\n  children,\n  className,\n  cellAlign = \"left\",\n  isSortedByAsc,\n  isSortedByDesc,\n  sortable,\n  sortDirection,\n  onSort,\n  actions,\n  label,\n  ...props\n}: PropsWithChildren<TableHeadCellProps>) => {\n  const id = useId();\n  useColumnLabel(id, props.colSpan, () => label ?? textOf(children));\n\n  const direction: SortDirection =\n    sortDirection !== undefined ? sortDirection : isSortedByAsc ? \"asc\" : isSortedByDesc ? \"desc\" : false;\n\n  // A sortable cell's sort state wins over the caller's aria-sort; a cell that\n  // is not sortable keeps the caller's.\n  const ariaSort = sortable\n    ? direction === \"asc\"\n      ? \"ascending\"\n      : direction === \"desc\"\n        ? \"descending\"\n        : \"none\"\n    : props[\"aria-sort\"];\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = direction === \"asc\" ? \"expand_more\" : direction === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  // Keys typed into an input or pressed on a button inside bubble up here too;\n  // only the control's own keys sort.\n  const onKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    if (event.target !== event.currentTarget) return;\n    if (sortable && onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      onSort();\n    }\n  };\n\n  // A click sorts only when the control is the nearest thing that takes it. A\n  // click in a portal rendered inside fails that too: React delivers it here,\n  // though it landed outside the control.\n  const onClick = (event: React.MouseEvent<HTMLSpanElement>) => {\n    if (!isOwnClick(event)) return;\n    onSort?.();\n  };\n\n  // With actions drawn, the column header is named after the content of its\n  // sort control, not after the whole cell: the controls' names and the text\n  // typed into them would join the header's name.\n  const labelId = `${id}-label`;\n  const labelled = !!actions && props[\"aria-label\"] == null && props[\"aria-labelledby\"] == null;\n\n  return (\n    <th\n      {...props}\n      aria-labelledby={labelled ? labelId : props[\"aria-labelledby\"]}\n      aria-sort={ariaSort}\n      className={cn(\"smwb-table__cell\", \"smwb-head-cell\", className, {\n        [`smwb-align_${cellAlign}`]: !!cellAlign,\n        \"smwb-head-cell_sortable\": sortable,\n        \"smwb-head-cell_sorted\": !!sortable && direction !== false,\n      })}\n    >\n      <span\n        id={labelled ? labelId : undefined}\n        className=\"smwb-head-cell__content\"\n        onClick={sortable ? onClick : undefined}\n        onKeyDown={sortable ? onKeyDown : undefined}\n        role={sortable ? \"button\" : undefined}\n        tabIndex={sortable ? 0 : undefined}\n      >\n        {children}\n        {sortable && <Icon className=\"smwb-head-cell__icon\" name={iconName} size={18} weight={800} />}\n      </span>\n      {actions ? <div className=\"smwb-head-cell__actions\">{actions}</div> : null}\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["useColumnLabel","owner","colSpan","text","labels","useContext","TableLabelsContext","place","TableColumnContext","inHead","TableHeadContext","labelling","cellSpan","column","_a","row","_b","label","useEffect","TableHeadCell","children","className","cellAlign","isSortedByAsc","isSortedByDesc","sortable","sortDirection","onSort","actions","props","id","useId","textOf","direction","ariaSort","iconName","onKeyDown","event","onClick","isOwnClick","labelId","labelled","jsxs","cn","jsx","Icon"],"mappings":"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"}

package/dist/headless/components/dataDisplay/table/tableRow.js

@@ -1,20 +1,32 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
+import { useContext as r } from "react";
 import w from "clsx";
-const s = ({ children: a, className: t, selected: r, expanded: o, ...b }) => /* @__PURE__ */ m(
-  "tr",
-  {
-    "data-testid": "table-row",
-    className: w("smwb-table__row", t, {
-      "smwb-table__row_selected": r,
-      "smwb-table__row_expanded": o
-    }),
-    "aria-selected": r != null ? r : void 0,
-    "aria-expanded": o != null ? o : void 0,
-    ...b,
-    children: a
-  }
-);
+import { TableLabelsContext as c, TableRowPlaceContext as _, useCellPlaces as u, withColumns as f } from "./tableColumns.js";
+const k = ({
+  children: e,
+  className: l,
+  selected: t,
+  expanded: a,
+  "data-testid": s = "table-row",
+  ...o
+}) => {
+  const m = r(c) != null, i = r(_), b = u();
+  return /* @__PURE__ */ n(
+    "tr",
+    {
+      "data-testid": s,
+      className: w("smwb-table__row", l, {
+        "smwb-table__row_selected": t,
+        "smwb-table__row_expanded": a
+      }),
+      ...o,
+      "aria-selected": t != null ? t : o["aria-selected"],
+      "aria-expanded": a != null ? a : o["aria-expanded"],
+      children: f(e, m, i, b)
+    }
+  );
+};
 export {
-  s as default
+  k as default
 };
 //# sourceMappingURL=tableRow.js.map

package/dist/headless/components/dataDisplay/table/tableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableRow.js","sources":["../../../../../src/components/dataDisplay/table/tableRow.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n  className?: string;\n  /** Marks the row as selected (adds aria-selected + styling). */\n  selected?: boolean;\n  /** Reflects expandable-row state (adds aria-expanded + styling). */\n  expanded?: boolean;\n}\n\nconst TableRow = ({ children, className, selected, expanded, ...props }: PropsWithChildren<TableRowProps>) => {\n  return (\n    <tr\n      data-testid=\"table-row\"\n      className={cn(\"smwb-table__row\", className, {\n        \"smwb-table__row_selected\": selected,\n        \"smwb-table__row_expanded\": expanded,\n      })}\n      aria-selected={selected ?? undefined}\n      aria-expanded={expanded ?? undefined}\n      {...props}\n    >\n      {children}\n    </tr>\n  );\n};\nexport default TableRow;\n"],"names":["TableRow","children","className","selected","expanded","props","jsx","cn"],"mappings":";;AAWA,MAAMA,IAAW,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,GAAGC,QAE5D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAWC,EAAG,mBAAmBL,GAAW;AAAA,MAC1C,4BAA4BC;AAAA,MAC5B,4BAA4BC;AAAA,IAAA,CAC7B;AAAA,IACD,iBAAeD,KAAA,OAAAA,IAAY;AAAA,IAC3B,iBAAeC,KAAA,OAAAA,IAAY;AAAA,IAC1B,GAAGC;AAAA,IAEH,UAAAJ;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"tableRow.js","sources":["../../../../../src/components/dataDisplay/table/tableRow.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, useContext } from \"react\";\nimport cn from \"clsx\";\nimport { TableLabelsContext, TableRowPlaceContext, useCellPlaces, withColumns } from \"./tableColumns\";\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n  className?: string;\n  /** Marks the row as selected (adds aria-selected + styling). */\n  selected?: boolean;\n  /** Reflects expandable-row state (adds aria-expanded + styling). */\n  expanded?: boolean;\n  /** Test id of the `<tr>`; `table-row` unless given. */\n  \"data-testid\"?: string;\n}\n\nconst TableRow = ({\n  children,\n  className,\n  selected,\n  expanded,\n  \"data-testid\": dataTestId = \"table-row\",\n  ...props\n}: PropsWithChildren<TableRowProps>) => {\n  // In a stacked table each cell learns its column, by which a body cell finds\n  // its label in the head.\n  const stacked = useContext(TableLabelsContext) != null;\n  const place = useContext(TableRowPlaceContext);\n  const keep = useCellPlaces();\n  return (\n    <tr\n      data-testid={dataTestId}\n      className={cn(\"smwb-table__row\", className, {\n        \"smwb-table__row_selected\": selected,\n        \"smwb-table__row_expanded\": expanded,\n      })}\n      {...props}\n      // `selected` and `expanded` win over the caller's aria-selected and\n      // aria-expanded; without them, the caller's stay.\n      aria-selected={selected ?? props[\"aria-selected\"]}\n      aria-expanded={expanded ?? props[\"aria-expanded\"]}\n    >\n      {withColumns(children, stacked, place, keep)}\n    </tr>\n  );\n};\nexport default TableRow;\n"],"names":["TableRow","children","className","selected","expanded","dataTestId","props","stacked","useContext","TableLabelsContext","place","TableRowPlaceContext","keep","useCellPlaces","jsx","cn","withColumns"],"mappings":";;;;AAcA,MAAMA,IAAW,CAAC;AAAA,EAChB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,MAAwC;AAGtC,QAAMC,IAAUC,EAAWC,CAAkB,KAAK,MAC5CC,IAAQF,EAAWG,CAAoB,GACvCC,IAAOC,EAAA;AACb,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaT;AAAA,MACb,WAAWU,EAAG,mBAAmBb,GAAW;AAAA,QAC1C,4BAA4BC;AAAA,QAC5B,4BAA4BC;AAAA,MAAA,CAC7B;AAAA,MACA,GAAGE;AAAA,MAGJ,iBAAeH,KAAA,OAAAA,IAAYG,EAAM,eAAe;AAAA,MAChD,iBAAeF,KAAA,OAAAA,IAAYE,EAAM,eAAe;AAAA,MAE/C,UAAAU,EAAYf,GAAUM,GAASG,GAAOE,CAAI;AAAA,IAAA;AAAA,EAAA;AAGjD;"}

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

@@ -1,71 +1,91 @@
-import { jsxs as p, jsx as s } from "react/jsx-runtime";
-import { forwardRef as L, useRef as _, useState as j, useEffect as D } from "react";
-import { createPortal as I } from "react-dom";
-import M from "clsx";
-import { useForkRef as z } from "../../../hooks/useForkRef.js";
-import { LazyImage as B } from "../lazyImage/lazyImage.js";
-const O = L(function({
-  src: w,
-  caption: c,
-  selected: a,
+import { jsxs as C, jsx as s } from "react/jsx-runtime";
+import { forwardRef as J, useRef as w, useState as L, useEffect as Q } from "react";
+import { createPortal as U } from "react-dom";
+import V from "clsx";
+import { useForkRef as W } from "../../../hooks/useForkRef.js";
+import { isOwnClick as X } from "../../../utils/ownClick.js";
+import { splitControlProps as Y } from "../../../utils/controlProps.js";
+import { LazyImage as Z } from "../lazyImage/lazyImage.js";
+const mt = J(function({
+  src: I,
+  caption: g,
+  selected: c,
   onSelect: r,
-  fallback: v,
-  hoverPreview: i,
-  topStart: d,
-  topEnd: l,
-  lazy: y = !0,
-  disabled: n,
-  hoverDelay: g = 350,
-  className: N,
-  ...R
-}, x) {
-  const f = _(null), T = z(x, f), [o, b] = j(null), u = _(null), e = () => {
-    u.current && (clearTimeout(u.current), u.current = null);
-  }, k = () => {
-    i == null || n || (e(), u.current = setTimeout(() => {
-      var h;
-      const t = (h = f.current) == null ? void 0 : h.getBoundingClientRect();
-      t && b({ top: t.top, left: t.right + 8 });
-    }, g));
-  }, C = () => {
-    e(), b(null);
+  fallback: j,
+  hoverPreview: u,
+  topStart: x,
+  topEnd: N,
+  lazy: k = !0,
+  disabled: m,
+  hoverDelay: v = 350,
+  className: z,
+  // The card sets these on its root too; its own handlers call the caller's.
+  onClick: l,
+  onKeyDown: d,
+  onMouseEnter: f,
+  onMouseLeave: e,
+  ...B
+}, F) {
+  var y;
+  const [a, O] = Y(B), R = w(null), b = w(null), q = W(F, R), [o, p] = L(null), n = w(null), h = () => {
+    n.current && (clearTimeout(n.current), n.current = null);
+  }, A = (t) => {
+    f == null || f(t), !(u == null || m) && (h(), n.current = setTimeout(() => {
+      var T;
+      const i = (T = R.current) == null ? void 0 : T.getBoundingClientRect();
+      i && p({ top: i.top, left: i.right + 8 });
+    }, v));
+  }, E = (t) => {
+    e == null || e(t), h(), p(null);
   };
-  D(() => e, []);
-  const m = !!r && !n, E = (t) => {
-    m && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), r == null || r());
+  Q(() => h, []);
+  const _ = !!r && !m, G = (t) => {
+    if (m) return;
+    const i = X(t, b.current);
+    l == null || l(t), i && (r == null || r());
+  }, H = (t) => {
+    d == null || d(t), !(!_ || t.target !== b.current) && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), r == null || r());
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ C(
     "div",
     {
-      ...R,
-      ref: T,
-      className: M("smwb-thumb-card", N, {
-        "smwb-thumb-card--selected": a,
-        "smwb-thumb-card--disabled": n,
-        "smwb-thumb-card--interactive": m
+      ...O,
+      ref: q,
+      className: V("smwb-thumb-card", z, {
+        "smwb-thumb-card--selected": c,
+        "smwb-thumb-card--disabled": m,
+        "smwb-thumb-card--interactive": _
       }),
-      role: m ? "button" : void 0,
-      tabIndex: m ? 0 : void 0,
-      "aria-pressed": r ? a != null ? a : !1 : void 0,
-      "aria-disabled": n || void 0,
-      onClick: m ? () => r == null ? void 0 : r() : void 0,
-      onKeyDown: E,
-      onMouseEnter: k,
-      onMouseLeave: C,
+      onClick: G,
+      onKeyDown: H,
+      onMouseEnter: A,
+      onMouseLeave: E,
       children: [
-        /* @__PURE__ */ p("div", { className: "smwb-thumb-card__media", children: [
-          /* @__PURE__ */ s(B, { src: w, lazy: y, fallback: v }),
-          d ? /* @__PURE__ */ s("div", { className: "smwb-thumb-card__slot smwb-thumb-card__slot--start", children: d }) : null,
-          l ? /* @__PURE__ */ s("div", { className: "smwb-thumb-card__slot smwb-thumb-card__slot--end", children: l }) : null
-        ] }),
-        c ? /* @__PURE__ */ s("div", { className: "smwb-thumb-card__caption", children: c }) : null,
-        o && typeof document != "undefined" ? I(
+        /* @__PURE__ */ C(
+          "div",
+          {
+            ...a,
+            ref: b,
+            className: "smwb-thumb-card__content",
+            role: r ? "button" : a.role,
+            tabIndex: (y = a.tabIndex) != null ? y : _ ? 0 : void 0,
+            "aria-pressed": r ? c != null ? c : !1 : a["aria-pressed"],
+            "aria-disabled": m || a["aria-disabled"],
+            children: [
+              /* @__PURE__ */ s("div", { className: "smwb-thumb-card__media", children: /* @__PURE__ */ s(Z, { src: I, lazy: k, fallback: j }) }),
+              g ? /* @__PURE__ */ s("div", { className: "smwb-thumb-card__caption", children: g }) : null
+            ]
+          }
+        ),
+        x ? /* @__PURE__ */ s("div", { className: "smwb-thumb-card__slot smwb-thumb-card__slot--start", children: x }) : null,
+        N ? /* @__PURE__ */ s("div", { className: "smwb-thumb-card__slot smwb-thumb-card__slot--end", children: N }) : null,
+        o && typeof document != "undefined" ? U(
           /* @__PURE__ */ s(
             "div",
             {
               className: "smwb-thumb-card__preview",
               style: { position: "fixed", top: o.top, left: o.left },
-              children: typeof i == "string" ? /* @__PURE__ */ s("img", { src: i, alt: "" }) : i
+              children: typeof u == "string" ? /* @__PURE__ */ s("img", { src: u, alt: "" }) : u
             }
           ),
           document.body
@@ -75,7 +95,7 @@ const O = L(function({
   );
 });
 export {
-  O as ThumbCard,
-  O as default
+  mt as ThumbCard,
+  mt as default
 };
 //# sourceMappingURL=thumbCard.js.map

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/treeView/treeView.js

@@ -1,118 +1,140 @@
-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 O from "clsx";
-import { Icon as N } from "../../base/icon/icon.js";
-import { useControllableState as K } from "../../../hooks/useControllableState.js";
-const ie = v(function({
-  className: M,
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
+import { forwardRef as le, useState as q, useRef as ne, useMemo as ie } from "react";
+import A from "clsx";
+import { Icon as u } from "../../base/icon/icon.js";
+import { useControllableState as B } from "../../../hooks/useControllableState.js";
+import { useId as oe } from "../../../hooks/useId.js";
+import { isOwnClick as de } from "../../../utils/ownClick.js";
+const ge = le(function({
+  className: F,
   listIcon: k = "draft",
-  nodeIcon: a = { closed: "folder", opened: "folder_open" },
+  nodeIcon: o = { closed: "folder", opened: "folder_open" },
   data: x = [],
-  expanded: P,
-  defaultExpanded: S = [],
-  onExpandedChange: q,
-  selected: B,
-  defaultSelected: F = [],
-  onSelectedChange: d,
-  selectable: f = !1,
-  checkboxes: u = !1,
-  renderLabel: m,
-  loadChildren: _,
-  ...G
-}, H) {
-  const [o, J] = D({}), [y, L] = D([]), [z, C] = K({
+  expanded: G,
+  defaultExpanded: H = [],
+  onExpandedChange: J,
+  selected: P,
+  defaultSelected: Q = [],
+  onSelectedChange: _,
+  selectable: c = !1,
+  checkboxes: m = !1,
+  toggleOnRowClick: $ = !c,
+  renderLabel: h,
+  renderActions: w,
+  loadingText: z = "Loading…",
+  loadChildren: p,
+  "data-testid": U = "tree-view",
+  ...W
+}, X) {
+  const [f, Y] = q({}), [L, R] = q([]), V = oe(), [C, E] = B({
+    value: G,
+    defaultValue: H,
+    onChange: J
+  }), g = ne(), [b, Z] = B({
     value: P,
-    defaultValue: S,
-    onChange: q
-  }), h = I(), [p, Q] = K({
-    value: B,
-    defaultValue: F,
-    onChange: (e) => {
-      const t = h.current;
-      h.current = void 0, d == null || d(e, t);
+    defaultValue: Q,
+    onChange: (s) => {
+      const t = g.current;
+      g.current = void 0, _ == null || _(s, t);
     }
-  }), U = (e) => {
-    C((t) => t.includes(e) ? t.filter((s) => s !== e) : [...t, e]);
-  }, R = (e, t) => {
-    C((s) => {
-      const l = s.includes(e);
-      return t && !l ? [...s, e] : !t && l ? s.filter((w) => w !== e) : s;
+  }), I = (s) => {
+    E((t) => t.includes(s) ? t.filter((e) => e !== s) : [...t, s]);
+  }, T = (s, t) => {
+    E((e) => {
+      const l = e.includes(s);
+      return t && !l ? [...e, s] : !t && l ? e.filter((i) => i !== s) : e;
     });
-  }, V = (e) => {
-    h.current = { id: e, selected: !p.includes(e) }, Q((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 }));
+  }, j = (s) => {
+    g.current = { id: s, selected: !b.includes(s) }, Z((t) => t.includes(s) ? t.filter((e) => e !== s) : [...t, s]);
+  }, D = (s, t) => {
+    !p || f[t] || s.children && s.children.length > 0 || (R((e) => e.includes(t) ? e : [...e, t]), p(s, t).then((e) => {
+      Y((l) => ({ ...l, [t]: e }));
     }).finally(() => {
-      L((s) => s.filter((l) => l !== t));
+      R((e) => e.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) => {
-      r.key === "Enter" || r.key === " " ? (r.preventDefault(), $()) : r.key === "ArrowRight" && i ? (E(e, s), R(s, !0)) : r.key === "ArrowLeft" && i && R(s, !1);
+  }, O = (s, t) => {
+    var M, S;
+    const e = (M = s.id) != null ? M : t, l = `${V}-${e}`, i = (S = s.children) != null ? S : f[e], se = !!p && (s.hasChildren || !!f[e]), n = !!i && i.length > 0 || se, d = C.includes(e), N = b.includes(e), te = L.includes(e), v = () => {
+      d || D(s, e), I(e);
+    }, K = () => {
+      $ && n && v(), c && j(e);
+    }, re = (a) => {
+      a.target === a.currentTarget && (a.key === "Enter" || a.key === " " ? (a.preventDefault(), K()) : a.key === "ArrowRight" && n ? (D(s, e), T(e, !0)) : a.key === "ArrowLeft" && n && T(e, !1));
     };
-    return /* @__PURE__ */ b(
+    return /* @__PURE__ */ y(
       "div",
       {
-        className: O("smwb-tree__node", { "smwb-tree__node_selected": g }),
+        className: A("smwb-tree__node", { "smwb-tree__node_selected": N }),
         role: "treeitem",
-        "aria-expanded": i ? c : void 0,
-        "aria-selected": f || u ? g : void 0,
+        "aria-labelledby": l,
+        "aria-expanded": n ? d : void 0,
+        "aria-selected": c || m ? N : void 0,
         children: [
-          /* @__PURE__ */ b(
-            "span",
-            {
-              className: "smwb-tree__node__content",
-              onClick: $,
-              onKeyDown: Y,
-              tabIndex: 0,
-              role: "button",
-              children: [
-                u && /* @__PURE__ */ n(
-                  "input",
-                  {
-                    type: "checkbox",
-                    className: "smwb-tree__node__checkbox",
-                    checked: g,
-                    onClick: (r) => r.stopPropagation(),
-                    onChange: () => V(s),
-                    "aria-label": e.label
-                  }
-                ),
-                /* @__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 }),
-                  m ? m(e, s) : e.label
+          /* @__PURE__ */ y("div", { className: "smwb-tree__node__row", children: [
+            /* @__PURE__ */ r("span", { className: "smwb-tree__node__toggle", "aria-hidden": "true", onClick: n ? v : void 0, children: n && /* @__PURE__ */ r(u, { name: d ? "expand_more" : "chevron_right", size: 20 }) }),
+            m && /* @__PURE__ */ r(
+              "input",
+              {
+                type: "checkbox",
+                className: "smwb-tree__node__checkbox",
+                checked: N,
+                onChange: () => j(e),
+                "aria-label": s.label
+              }
+            ),
+            /* @__PURE__ */ r(
+              "span",
+              {
+                className: "smwb-tree__node__content",
+                onClick: (a) => {
+                  de(a) && K();
+                },
+                onKeyDown: re,
+                tabIndex: 0,
+                role: "button",
+                children: /* @__PURE__ */ y("span", { className: "smwb-tree__node__label", id: l, children: [
+                  n && d ? /* @__PURE__ */ r(u, { name: o == null ? void 0 : o.opened, fill: 1, size: 20 }) : n ? /* @__PURE__ */ r(u, { name: o == null ? void 0 : o.closed, fill: 1, size: 20 }) : /* @__PURE__ */ r(u, { name: k, size: 20 }),
+                  h ? h(s, e) : s.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}`)) })
+              }
+            ),
+            w && /* @__PURE__ */ r("span", { className: "smwb-tree__node__actions", children: w(s, e) })
+          ] }),
+          n && d && /* @__PURE__ */ r("div", { role: "group", children: te && !i ? /* @__PURE__ */ r("div", { className: "smwb-tree__node__loading", role: "status", children: z }) : i == null ? void 0 : i.map((a, ae) => O(a, `${t}.${ae}`)) })
         ]
       },
-      s
+      e
     );
-  }, W = ee(
-    () => x.map((e, t) => T(e, `${t}`)),
+  }, ee = ie(
+    () => x.map((s, t) => {
+      var e;
+      return (
+        // Keyed by node id, not position: a node that moves or gains a sibling keeps its DOM and focus.
+        /* @__PURE__ */ r("div", { className: "smwb-tree__wrapper", role: "presentation", children: O(s, `${t}`) }, (e = s.id) != null ? e : `${t}`)
+      );
+    }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       x,
-      z,
-      p,
-      f,
-      u,
-      k,
-      a,
+      V,
+      C,
+      b,
+      c,
       m,
+      $,
+      k,
       o,
-      y
+      h,
+      w,
+      z,
+      f,
+      L
     ]
   );
-  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__ */ r("div", { "data-testid": U, ...W, ref: X, role: "tree", className: A("smwb-tree", F), children: ee });
 });
 export {
-  ie as TreeView,
-  ie as default
+  ge as TreeView,
+  ge as default
 };
 //# sourceMappingURL=treeView.js.map