@smwb/ui-react 2.4.0 → 2.5.0

package/README.md

@@ -44,6 +44,92 @@ function App() {
 In ESM builds each imported component **pulls in its own CSS automatically** (tree-shakeable) —
 nothing else to import for the default theme.
 
+## Icons
+
+`<Icon>` renders one of two icon sets under the **same name**, so switching sets never touches
+component code:
+
+- **smwb SVG set** — ~250 contour icons shipped inside the package, one ES module each.
+- **Google Material Symbols** — the webfont this library has always used (`<link>` it yourself).
+
+```tsx
+import { Icon } from "@smwb/ui-react";
+
+<Icon name="arrow_right_alt" size={24} color="primary" />;
+```
+
+Names are the canonical Material Symbols names, and lookup is forgiving: `arrow_right_alt`,
+`arrowRightAlt` and `arrow-right-alt` all resolve, as do per-icon aliases (`trash` → `delete`,
+`cog` → `settings`, `magnifier` → `search`).
+
+### Bundling only the icons you use
+
+Icons are **not** registered by default. Register the handful you render — every other icon is
+dropped by your bundler:
+
+```ts
+import { registerIcons } from "@smwb/ui-react";
+import { add, close, search } from "@smwb/ui-react/icons";
+
+registerIcons([add, close, search]);
+```
+
+Three icons in, three icons bundled (~0.4 kB). Or skip the registry entirely and pass the
+definition straight to the prop:
+
+```tsx
+import { arrowRightAlt } from "@smwb/ui-react/icons";
+
+<Icon name={arrowRightAlt} />;
+```
+
+Deep imports work too (`@smwb/ui-react/icons/arrowRightAlt`), and `@smwb/ui-react/icons/all` exports
+`registerAllIcons()` for docs sites and icon pickers — that one pulls in the whole set on purpose.
+
+### Choosing the source
+
+| `source` | Behaviour |
+| --- | --- |
+| `auto` (default) | smwb SVG when the name is registered, Material Symbols otherwise. |
+| `smwb` | Always the SVG set; an unregistered name renders an empty box and warns. |
+| `google` | Always the Material Symbols font. |
+
+Set it per icon (`<Icon source="google" …>`), per subtree, or app-wide:
+
+```tsx
+import { configureIcons, IconProvider } from "@smwb/ui-react";
+import { add, close } from "@smwb/ui-react/icons";
+
+configureIcons({ source: "smwb" });          // app-wide default
+
+<IconProvider source="smwb" icons={[add, close]}>
+  <App />
+</IconProvider>;
+```
+
+Because `auto` falls back to the font, upgrading changes nothing until you register icons.
+
+### Appearance
+
+`size` takes a pixel number or any CSS length (`size="1.5rem"`). `color` takes a semantic token
+(`primary`, `error`, …) and otherwise inherits `currentColor`. For the SVG set `weight` maps to
+the stroke width (400 → 2px, 700 → 3px); `fill` and `grade` are Material Symbols axes and are
+ignored by the contour set.
+
+### Custom and overridden icons
+
+An icon is plain data, so your own artwork registers the same way — and re-registering a shipped
+name replaces it everywhere:
+
+```ts
+registerIcons({ name: "logo", body: '<circle cx="12" cy="12" r="9"/>' });
+registerIcons({ name: "delete", body: "<path d='…'/>" }); // overrides the shipped one
+```
+
+Browse the whole set in [Storybook](https://summerweb.ru/ui-react/) under **UI/Base/Icon → All Icons** — click any
+icon to copy its name. The set is generated from `icons/data/*.json` in the repo
+(`npm run icons:generate`).
+
 ## Styles
 
 Three ways to get the CSS, pick one:

package/dist/assets/styles/less/components/icon/icon.entry.css

@@ -1 +1 @@
-.smwb-icon__wrapper{display:inline-flex;align-items:center;justify-content:center}.smwb-icon__wrapper.smwb-icon_color-primary{color:var(--smui-primaryColor)}.smwb-icon__wrapper.smwb-icon_color-secondary{color:var(--smui-secondaryColor)}.smwb-icon__wrapper.smwb-icon_color-error{color:var(--smui-errorColor)}.smwb-icon__wrapper.smwb-icon_color-success{color:var(--smui-successColor)}.smwb-icon__wrapper.smwb-icon_color-warning{color:var(--smui-warningColor)}.smwb-icon__wrapper.smwb-icon_color-info{color:var(--smui-infoColor)}.smwb-icon__wrapper.smwb-icon_color-disabled{color:var(--smui-disabledTextColor)}
+.smwb-icon__wrapper{display:inline-flex;align-items:center;justify-content:center}.smwb-icon__wrapper .smwb-icon__svg{display:block;flex-shrink:0}.smwb-icon__wrapper.smwb-icon_color-primary{color:var(--smui-primaryColor)}.smwb-icon__wrapper.smwb-icon_color-secondary{color:var(--smui-secondaryColor)}.smwb-icon__wrapper.smwb-icon_color-error{color:var(--smui-errorColor)}.smwb-icon__wrapper.smwb-icon_color-success{color:var(--smui-successColor)}.smwb-icon__wrapper.smwb-icon_color-warning{color:var(--smui-warningColor)}.smwb-icon__wrapper.smwb-icon_color-info{color:var(--smui-infoColor)}.smwb-icon__wrapper.smwb-icon_color-disabled{color:var(--smui-disabledTextColor)}

package/dist/components/base/icon/icon.d.ts

@@ -1,16 +1,32 @@
 import { HTMLAttributes } from "react";
+import type { IconDefinition, IconSource } from "../../../icons/types";
 export type IconColor = "inherit" | "primary" | "secondary" | "error" | "success" | "warning" | "info" | "disabled";
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
     /**
-     * Icon name from https://fonts.google.com/icons
-     * Пример: name={"arrow_right_alt"}
+     * Icon name — the Google Material Symbols name, e.g. `"arrow_right_alt"`.
+     * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as
+     * do an icon's aliases.
+     *
+     * An {@link IconDefinition} may be passed instead, which skips the registry
+     * entirely and is the most bundle-friendly form:
+     *
+     * ```tsx
+     * import { arrowRightAlt } from "@smwb/ui-react/icons";
+     * <Icon name={arrowRightAlt} />
+     * ```
      */
-    name: string;
+    name: string | IconDefinition;
     className?: string;
+    /**
+     * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the
+     * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.
+     */
     weight?: number;
+    /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */
     fill?: 0 | 1;
     /** Pixel number or any CSS length (e.g. "1.5rem"). */
     size?: number | string;
+    /** Material Symbols GRAD axis. Not used by the smwb SVG set. */
     grade?: number;
     /**
      * Semantic color token; `inherit` (default) keeps the text color.
@@ -23,6 +39,8 @@ export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
      * `role="img"`; otherwise it is `aria-hidden` (decorative).
      */
     title?: string;
+    /** Overrides the icon source for this icon only. See {@link IconSource}. */
+    source?: IconSource;
 }
 export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Icon;

package/dist/components/base/icon/icon.js

@@ -1,27 +1,61 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/icon/icon.entry.css';/* empty css                                                   */
-import { forwardRef as p } from "react";
-import u from "clsx";
-const g = p(function({ className: s, weight: t = 400, fill: c = 0, size: o = 20, grade: d = 100, name: l, color: r = "inherit", title: n, ...i }, m) {
-  const a = n === void 0, f = r && ["primary", "secondary", "error", "success", "warning", "info", "disabled"].includes(r) ? `smwb-icon_color-${r}` : null;
-  return /* @__PURE__ */ e(
+import { forwardRef as L, useSyncExternalStore as C } from "react";
+import N from "clsx";
+import { getIcon as O } from "../../../icons/registry.js";
+import { getIconConfig as R } from "../../../icons/config.js";
+import { subscribeIcons as j } from "../../../icons/store.js";
+import { useIconSource as B } from "./iconProvider.js";
+const E = ["primary", "secondary", "error", "success", "warning", "info", "disabled"], y = /* @__PURE__ */ new Set();
+function T(r) {
+  !R().warnOnMissing || y.has(r) || (y.add(r), console.warn(
+    `[smwb] Icon "${r}" is not registered. Register it (import { ${r} } from "@smwb/ui-react/icons") or use source="auto" to fall back to Material Symbols.`
+  ));
+}
+const W = L(function({ className: S, weight: a = 400, fill: v = 0, size: n = 20, grade: I = 100, name: o, color: e = "inherit", title: i, source: _, ...u }, x) {
+  var w, b;
+  const d = B(_), g = typeof o == "string" ? o : null, m = () => {
+    var h;
+    return g === null ? null : (h = O(g)) != null ? h : null;
+  }, M = C(j, m, m), s = typeof o == "object" ? o : M, p = typeof o == "string" ? o : o.name, t = d === "google" ? "google" : s ? "smwb" : d === "smwb" ? "missing" : "google";
+  t === "missing" && T(p);
+  const f = i === void 0, $ = e && E.includes(e) ? `smwb-icon_color-${e}` : null, c = typeof n == "number" ? `${n}px` : n, k = Math.round(Math.min(3, Math.max(1, a / 200)) * 100) / 100;
+  return /* @__PURE__ */ l(
     "span",
     {
-      ...i,
-      ref: m,
+      ...u,
+      ref: x,
       "data-testid": "icon",
-      role: a ? void 0 : "img",
-      "aria-hidden": a ? !0 : void 0,
-      "aria-label": n,
-      title: n,
-      style: { ...i.style, fontVariationSettings: `'FILL' ${c}, 'wght' ${t}, 'GRAD' ${d}, 'opsz' 48` },
-      className: u("smwb-icon__wrapper", f, s),
-      children: /* @__PURE__ */ e("span", { className: "material-symbols-outlined", style: { fontSize: typeof o == "number" ? `${o}px` : o }, children: l })
+      "data-icon-source": t,
+      role: f ? void 0 : "img",
+      "aria-hidden": f ? !0 : void 0,
+      "aria-label": i,
+      title: i,
+      style: {
+        ...u.style,
+        ...t === "google" ? { fontVariationSettings: `'FILL' ${v}, 'wght' ${a}, 'GRAD' ${I}, 'opsz' 48` } : null
+      },
+      className: N("smwb-icon__wrapper", $, S),
+      children: t === "google" ? /* @__PURE__ */ l("span", { className: "material-symbols-outlined", style: { fontSize: c }, children: p }) : /* @__PURE__ */ l(
+        "svg",
+        {
+          className: "smwb-icon__svg",
+          viewBox: (w = s == null ? void 0 : s.viewBox) != null ? w : "0 0 24 24",
+          style: { width: c, height: c },
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: k,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          dangerouslySetInnerHTML: { __html: (b = s == null ? void 0 : s.body) != null ? b : "" }
+        }
+      )
     }
   );
 });
 export {
-  g as Icon,
-  g as default
+  W as Icon,
+  W as default
 };
 //# sourceMappingURL=icon.js.map

package/dist/components/base/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name from https://fonts.google.com/icons\n   * Пример: name={\"arrow_right_alt\"}\n   */\n  name: string;\n  className?: string;\n  weight?: number;\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color.\n   * Any string is accepted for backward compatibility, but only known\n   * {@link IconColor} tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as\n   * `role=\"img\"`; otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n}\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { className, weight = 400, fill = 0, size = 20, grade = 100, name, color = \"inherit\", title, ...props },\n  ref\n) {\n  const decorative = title === undefined;\n  const colorClass =\n    color && [\"primary\", \"secondary\", \"error\", \"success\", \"warning\", \"info\", \"disabled\"].includes(color)\n      ? `smwb-icon_color-${color}`\n      : null;\n  return (\n    <span\n      {...props}\n      ref={ref}\n      data-testid=\"icon\"\n      role={decorative ? undefined : \"img\"}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={title}\n      title={title}\n      style={{ ...props.style, fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' 48` }}\n      className={cn(\"smwb-icon__wrapper\", colorClass, className)}\n    >\n      <span className=\"material-symbols-outlined\" style={{ fontSize: typeof size === \"number\" ? `${size}px` : size }}>\n        {name}\n      </span>\n    </span>\n  );\n});\n\nexport default Icon;\n"],"names":["Icon","forwardRef","className","weight","fill","size","grade","name","color","title","props","ref","decorative","colorClass","jsx","cn"],"mappings":";;;;AA+BO,MAAMA,IAAOC,EAAuC,SACzD,EAAE,WAAAC,GAAW,QAAAC,IAAS,KAAK,MAAAC,IAAO,GAAG,MAAAC,IAAO,IAAI,OAAAC,IAAQ,KAAK,MAAAC,GAAM,OAAAC,IAAQ,WAAW,OAAAC,GAAO,GAAGC,EAAA,GAChGC,GACA;AACA,QAAMC,IAAaH,MAAU,QACvBI,IACJL,KAAS,CAAC,WAAW,aAAa,SAAS,WAAW,WAAW,QAAQ,UAAU,EAAE,SAASA,CAAK,IAC/F,mBAAmBA,CAAK,KACxB;AACN,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,MAAMC,IAAa,SAAY;AAAA,MAC/B,eAAaA,IAAa,KAAO;AAAA,MACjC,cAAYH;AAAA,MACZ,OAAAA;AAAA,MACA,OAAO,EAAE,GAAGC,EAAM,OAAO,uBAAuB,UAAUN,CAAI,YAAYD,CAAM,YAAYG,CAAK,cAAA;AAAA,MACjG,WAAWS,EAAG,sBAAsBF,GAAYX,CAAS;AAAA,MAEzD,UAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,6BAA4B,OAAO,EAAE,UAAU,OAAOT,KAAS,WAAW,GAAGA,CAAI,OAAOA,EAAA,GACrG,UAAAE,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"icon.js","sources":["../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useSyncExternalStore } from \"react\";\nimport cn from \"clsx\";\nimport { getIcon } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport { subscribeIcons } from \"../../../icons/store\";\nimport type { IconDefinition, IconSource } from \"../../../icons/types\";\nimport { useIconSource } from \"./iconProvider\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS = [\"primary\", \"secondary\", \"error\", \"success\", \"warning\", \"info\", \"disabled\"];\n\nconst warned = new Set<string>();\n\nfunction warnMissing(name: string): void {\n  if (!getIconConfig().warnOnMissing || warned.has(name)) return;\n  warned.add(name);\n  // eslint-disable-next-line no-console -- a missing icon is silent otherwise\n  console.warn(\n    `[smwb] Icon \"${name}\" is not registered. Register it (import { ${name} } from \"@smwb/ui-react/icons\") ` +\n      `or use source=\"auto\" to fall back to Material Symbols.`\n  );\n}\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name — the Google Material Symbols name, e.g. `\"arrow_right_alt\"`.\n   * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as\n   * do an icon's aliases.\n   *\n   * An {@link IconDefinition} may be passed instead, which skips the registry\n   * entirely and is the most bundle-friendly form:\n   *\n   * ```tsx\n   * import { arrowRightAlt } from \"@smwb/ui-react/icons\";\n   * <Icon name={arrowRightAlt} />\n   * ```\n   */\n  name: string | IconDefinition;\n  className?: string;\n  /**\n   * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the\n   * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.\n   */\n  weight?: number;\n  /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  /** Material Symbols GRAD axis. Not used by the smwb SVG set. */\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color.\n   * Any string is accepted for backward compatibility, but only known\n   * {@link IconColor} tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as\n   * `role=\"img\"`; otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n  /** Overrides the icon source for this icon only. See {@link IconSource}. */\n  source?: IconSource;\n}\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { className, weight = 400, fill = 0, size = 20, grade = 100, name, color = \"inherit\", title, source, ...props },\n  ref\n) {\n  const resolvedSource = useIconSource(source);\n  const lookup = typeof name === \"string\" ? name : null;\n  // Subscribing keeps late registrations (lazy chunks, Storybook HMR) from\n  // leaving a mounted icon blank. getIcon returns the same object for the same\n  // registration, so the snapshot is stable.\n  const getSnapshot = () => (lookup === null ? null : (getIcon(lookup) ?? null));\n  const registered = useSyncExternalStore(subscribeIcons, getSnapshot, getSnapshot);\n  const definition = typeof name === \"object\" ? name : registered;\n  const glyph = typeof name === \"string\" ? name : name.name;\n\n  const mode =\n    resolvedSource === \"google\" ? \"google\" : definition ? \"smwb\" : resolvedSource === \"smwb\" ? \"missing\" : \"google\";\n  if (mode === \"missing\") warnMissing(glyph);\n\n  const decorative = title === undefined;\n  const colorClass = color && COLOR_TOKENS.includes(color) ? `smwb-icon_color-${color}` : null;\n  const cssSize = typeof size === \"number\" ? `${size}px` : size;\n  const strokeWidth = Math.round(Math.min(3, Math.max(1, weight / 200)) * 100) / 100;\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      data-testid=\"icon\"\n      data-icon-source={mode}\n      role={decorative ? undefined : \"img\"}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={title}\n      title={title}\n      style={{\n        ...props.style,\n        ...(mode === \"google\"\n          ? { fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' 48` }\n          : null),\n      }}\n      className={cn(\"smwb-icon__wrapper\", colorClass, className)}\n    >\n      {mode === \"google\" ? (\n        <span className=\"material-symbols-outlined\" style={{ fontSize: cssSize }}>\n          {glyph}\n        </span>\n      ) : (\n        <svg\n          className=\"smwb-icon__svg\"\n          viewBox={definition?.viewBox ?? \"0 0 24 24\"}\n          style={{ width: cssSize, height: cssSize }}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n          dangerouslySetInnerHTML={{ __html: definition?.body ?? \"\" }}\n        />\n      )}\n    </span>\n  );\n});\n\nexport default Icon;\n"],"names":["COLOR_TOKENS","warned","warnMissing","name","getIconConfig","Icon","forwardRef","className","weight","fill","size","grade","color","title","source","props","ref","resolvedSource","useIconSource","lookup","getSnapshot","_a","getIcon","registered","useSyncExternalStore","subscribeIcons","definition","glyph","mode","decorative","colorClass","cssSize","strokeWidth","jsx","cn","_b"],"mappings":";;;;;;;;AAWA,MAAMA,IAAe,CAAC,WAAW,aAAa,SAAS,WAAW,WAAW,QAAQ,UAAU,GAEzFC,wBAAa,IAAA;AAEnB,SAASC,EAAYC,GAAoB;AACvC,EAAI,CAACC,EAAA,EAAgB,iBAAiBH,EAAO,IAAIE,CAAI,MACrDF,EAAO,IAAIE,CAAI,GAEf,QAAQ;AAAA,IACN,gBAAgBA,CAAI,8CAA8CA,CAAI;AAAA,EAAA;AAG1E;AA4CO,MAAME,IAAOC,EAAuC,SACzD,EAAE,WAAAC,GAAW,QAAAC,IAAS,KAAK,MAAAC,IAAO,GAAG,MAAAC,IAAO,IAAI,OAAAC,IAAQ,KAAK,MAAAR,GAAM,OAAAS,IAAQ,WAAW,OAAAC,GAAO,QAAAC,GAAQ,GAAGC,EAAA,GACxGC,GACA;;AACA,QAAMC,IAAiBC,EAAcJ,CAAM,GACrCK,IAAS,OAAOhB,KAAS,WAAWA,IAAO,MAI3CiB,IAAc,MAAA;;AAAO,WAAAD,MAAW,OAAO,QAAQE,IAAAC,EAAQH,CAAM,MAAd,OAAAE,IAAmB;AAAA,KAClEE,IAAaC,EAAqBC,GAAgBL,GAAaA,CAAW,GAC1EM,IAAa,OAAOvB,KAAS,WAAWA,IAAOoB,GAC/CI,IAAQ,OAAOxB,KAAS,WAAWA,IAAOA,EAAK,MAE/CyB,IACJX,MAAmB,WAAW,WAAWS,IAAa,SAAST,MAAmB,SAAS,YAAY;AACzG,EAAIW,MAAS,aAAW1B,EAAYyB,CAAK;AAEzC,QAAME,IAAahB,MAAU,QACvBiB,IAAalB,KAASZ,EAAa,SAASY,CAAK,IAAI,mBAAmBA,CAAK,KAAK,MAClFmB,IAAU,OAAOrB,KAAS,WAAW,GAAGA,CAAI,OAAOA,GACnDsB,IAAc,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGxB,IAAS,GAAG,CAAC,IAAI,GAAG,IAAI;AAE/E,SACE,gBAAAyB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGlB;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,oBAAkBY;AAAA,MAClB,MAAMC,IAAa,SAAY;AAAA,MAC/B,eAAaA,IAAa,KAAO;AAAA,MACjC,cAAYhB;AAAA,MACZ,OAAAA;AAAA,MACA,OAAO;AAAA,QACL,GAAGE,EAAM;AAAA,QACT,GAAIa,MAAS,WACT,EAAE,uBAAuB,UAAUnB,CAAI,YAAYD,CAAM,YAAYG,CAAK,cAAA,IAC1E;AAAA,MAAA;AAAA,MAEN,WAAWuB,EAAG,sBAAsBJ,GAAYvB,CAAS;AAAA,MAExD,UAAAqB,MAAS,WACR,gBAAAK,EAAC,QAAA,EAAK,WAAU,6BAA4B,OAAO,EAAE,UAAUF,EAAA,GAC5D,UAAAJ,EAAA,CACH,IAEA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAASZ,IAAAK,KAAA,gBAAAA,EAAY,YAAZ,OAAAL,IAAuB;AAAA,UAChC,OAAO,EAAE,OAAOU,GAAS,QAAQA,EAAA;AAAA,UACjC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAAC;AAAA,UACA,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,eAAY;AAAA,UACZ,yBAAyB,EAAE,SAAQG,IAAAT,KAAA,gBAAAA,EAAY,SAAZ,OAAAS,IAAoB,GAAA;AAAA,QAAG;AAAA,MAAA;AAAA,IAC5D;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/base/icon/iconProvider.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import { type IconInput } from "../../../icons/registry";
+import type { IconSource } from "../../../icons/types";
+export interface IconContextValue {
+    /** Icon artwork for this subtree. Falls back to {@link configureIcons}. */
+    source?: IconSource;
+}
+export declare const IconContext: import("react").Context<IconContextValue | null>;
+export interface IconProviderProps extends IconContextValue {
+    /**
+     * Icons to make available to `<Icon name="...">` inside this subtree.
+     *
+     * ```tsx
+     * import { add, close, search } from "@smwb/ui-react/icons";
+     *
+     * <IconProvider source="smwb" icons={[add, close, search]}>
+     *   <App />
+     * </IconProvider>
+     * ```
+     *
+     * Registration is process-wide (the registry is a module singleton), so the
+     * prop is a convenience for apps that would otherwise call `registerIcons`
+     * at startup — not a scoping mechanism.
+     */
+    icons?: IconInput;
+    children?: ReactNode;
+}
+/**
+ * Sets the icon source — and optionally registers icons — for a subtree.
+ * `<Icon source>` still wins over the provider, and the provider wins over the
+ * app-wide {@link configureIcons} default.
+ */
+export declare function IconProvider({ source, icons, children }: IconProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Resolves the icon source the way `<Icon>` does: explicit prop, then the
+ * nearest {@link IconProvider}, then the app-wide config (`"auto"` by default).
+ */
+export declare function useIconSource(override?: IconSource): IconSource;
+export default IconProvider;

package/dist/components/base/icon/iconProvider.js

@@ -0,0 +1,25 @@
+import { jsx as s } from "react/jsx-runtime";
+import { createContext as f, useMemo as e, useContext as m, useSyncExternalStore as i } from "react";
+import { registerIcons as g } from "../../../icons/registry.js";
+import { getIconConfig as p } from "../../../icons/config.js";
+import { subscribeIcons as I } from "../../../icons/store.js";
+const u = f(null);
+function b({ source: t, icons: o, children: r }) {
+  e(() => {
+    o && g(o);
+  }, [o]);
+  const n = e(() => ({ source: t }), [t]);
+  return /* @__PURE__ */ s(u.Provider, { value: n, children: r });
+}
+const c = () => p().source;
+function P(t) {
+  var n;
+  const o = m(u), r = i(I, c, c);
+  return (n = t != null ? t : o == null ? void 0 : o.source) != null ? n : r;
+}
+export {
+  u as IconContext,
+  b as IconProvider,
+  P as useIconSource
+};
+//# sourceMappingURL=iconProvider.js.map

package/dist/components/base/icon/iconProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconProvider.js","sources":["../../../../src/components/base/icon/iconProvider.tsx"],"sourcesContent":["import { createContext, useContext, useMemo, useSyncExternalStore, type ReactNode } from \"react\";\nimport { registerIcons, type IconInput } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport { subscribeIcons } from \"../../../icons/store\";\nimport type { IconSource } from \"../../../icons/types\";\n\nexport interface IconContextValue {\n  /** Icon artwork for this subtree. Falls back to {@link configureIcons}. */\n  source?: IconSource;\n}\n\nexport const IconContext = createContext<IconContextValue | null>(null);\n\nexport interface IconProviderProps extends IconContextValue {\n  /**\n   * Icons to make available to `<Icon name=\"...\">` inside this subtree.\n   *\n   * ```tsx\n   * import { add, close, search } from \"@smwb/ui-react/icons\";\n   *\n   * <IconProvider source=\"smwb\" icons={[add, close, search]}>\n   *   <App />\n   * </IconProvider>\n   * ```\n   *\n   * Registration is process-wide (the registry is a module singleton), so the\n   * prop is a convenience for apps that would otherwise call `registerIcons`\n   * at startup — not a scoping mechanism.\n   */\n  icons?: IconInput;\n  children?: ReactNode;\n}\n\n/**\n * Sets the icon source — and optionally registers icons — for a subtree.\n * `<Icon source>` still wins over the provider, and the provider wins over the\n * app-wide {@link configureIcons} default.\n */\nexport function IconProvider({ source, icons, children }: IconProviderProps) {\n  // Icons have to be in the registry before the subtree's first paint, so this\n  // cannot wait for an effect. registerIcons is idempotent, which keeps it safe\n  // under StrictMode's double render.\n  useMemo(() => {\n    if (icons) registerIcons(icons);\n  }, [icons]);\n\n  const value = useMemo<IconContextValue>(() => ({ source }), [source]);\n  return <IconContext.Provider value={value}>{children}</IconContext.Provider>;\n}\n\nconst getConfiguredSource = (): IconSource => getIconConfig().source;\n\n/**\n * Resolves the icon source the way `<Icon>` does: explicit prop, then the\n * nearest {@link IconProvider}, then the app-wide config (`\"auto\"` by default).\n */\nexport function useIconSource(override?: IconSource): IconSource {\n  const context = useContext(IconContext);\n  const configured = useSyncExternalStore(subscribeIcons, getConfiguredSource, getConfiguredSource);\n  return override ?? context?.source ?? configured;\n}\n\nexport default IconProvider;\n"],"names":["IconContext","createContext","IconProvider","source","icons","children","useMemo","value","jsx","getConfiguredSource","getIconConfig","useIconSource","override","context","useContext","configured","useSyncExternalStore","subscribeIcons","_a"],"mappings":";;;;;AAWO,MAAMA,IAAcC,EAAuC,IAAI;AA2B/D,SAASC,EAAa,EAAE,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,KAA+B;AAI3E,EAAAC,EAAQ,MAAM;AACZ,IAAIF,OAAqBA,CAAK;AAAA,EAChC,GAAG,CAACA,CAAK,CAAC;AAEV,QAAMG,IAAQD,EAA0B,OAAO,EAAE,QAAAH,MAAW,CAACA,CAAM,CAAC;AACpE,SAAO,gBAAAK,EAACR,EAAY,UAAZ,EAAqB,OAAAO,GAAe,UAAAF,EAAA,CAAS;AACvD;AAEA,MAAMI,IAAsB,MAAkBC,EAAA,EAAgB;AAMvD,SAASC,EAAcC,GAAmC;;AAC/D,QAAMC,IAAUC,EAAWd,CAAW,GAChCe,IAAaC,EAAqBC,GAAgBR,GAAqBA,CAAmB;AAChG,UAAOS,IAAAN,KAAA,OAAAA,IAAYC,KAAA,gBAAAA,EAAS,WAArB,OAAAK,IAA+BH;AACxC;"}

package/dist/components/base/icon/index.d.ts

@@ -1,2 +1,4 @@
 export { default as Icon } from "./icon";
 export type { IconProps, IconColor } from "./icon";
+export { IconProvider, IconContext, useIconSource } from "./iconProvider";
+export type { IconProviderProps, IconContextValue } from "./iconProvider";

package/dist/components/clickAwayListener/clickAwayListener.js

@@ -1,30 +1,31 @@
-import { jsx as g, Fragment as k } from "react/jsx-runtime";
-import P, { useRef as a, useEffect as p } from "react";
-import { useForkRef as y } from "../../hooks/useForkRef.js";
+import { jsx as T, Fragment as k } from "react/jsx-runtime";
+import y, { useRef as a, useEffect as p } from "react";
+import { useForkRef as P } from "../../hooks/useForkRef.js";
 import { useEventCallback as C } from "../../hooks/useEventCallback.js";
+import { isEventInForeignOverlay as M } from "../../utils/overlayLayer.js";
 function E(t) {
   return t.substring(2).toLowerCase();
 }
-function M(t, s) {
-  return s.documentElement.clientWidth < t.clientX || s.documentElement.clientHeight < t.clientY;
+function b(t, u) {
+  return u.documentElement.clientWidth < t.clientX || u.documentElement.clientHeight < t.clientY;
 }
 function A({
   children: t,
-  disableReactTree: s = !1,
+  disableReactTree: u = !1,
   mouseEvent: n = "onMouseUp",
   onClickAway: L,
   touchEvent: r = "onTouchEnd",
   enabled: v = !0
 }) {
-  const f = a(!1), u = a(null), l = a(!1), d = a(!1);
+  const f = a(!1), s = a(null), l = a(!1), d = a(!1);
   p(() => (setTimeout(() => {
     l.current = !0;
   }, 0), () => {
     l.current = !1;
   }), []);
-  const T = y(t.ref, u), o = C((e) => {
+  const g = P(t.ref, s), o = C((e) => {
     const c = d.current;
-    if (d.current = !1, !v || !l.current || !u.current || "clientX" in e && M(e, document))
+    if (d.current = !1, !v || !l.current || !s.current || "clientX" in e && b(e, document))
       return;
     if (f.current) {
       f.current = !1;
@@ -32,17 +33,21 @@ function A({
     }
     let i;
     if (e.composedPath)
-      i = e.composedPath().indexOf(u.current) > -1;
+      i = e.composedPath().indexOf(s.current) > -1;
     else {
       const R = e.target;
-      i = !document.documentElement.contains(R) || u.current.contains(R);
+      i = !document.documentElement.contains(R) || s.current.contains(R);
+    }
+    if (!i && (u || !c)) {
+      if (M(e, s.current))
+        return;
+      L(e);
     }
-    !i && (s || !c) && L(e);
   }), h = (e) => (c) => {
     d.current = !0;
     const i = t.props[e];
     i && i(c);
-  }, m = { ref: T };
+  }, m = { ref: g };
   return r !== !1 && (m[r] = h(r)), p(() => {
     if (r !== !1) {
       const e = E(r), c = () => {
@@ -59,7 +64,7 @@ function A({
         document.removeEventListener(e, o);
       };
     }
-  }, [o, n]), /* @__PURE__ */ g(k, { children: P.cloneElement(t, m) });
+  }, [o, n]), /* @__PURE__ */ T(k, { children: y.cloneElement(t, m) });
 }
 export {
   A as ClickAwayListener

package/dist/components/clickAwayListener/clickAwayListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"clickAwayListener.js","sources":["../../../src/components/clickAwayListener/clickAwayListener.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { useEventCallback } from \"../../hooks/useEventCallback\";\n\ntype ClickAwayMouseEventHandler = \"onClick\" | \"onMouseDown\" | \"onMouseUp\" | \"onPointerDown\" | \"onPointerUp\";\ntype ClickAwayTouchEventHandler = \"onTouchStart\" | \"onTouchEnd\";\n\nfunction mapEventPropToEvent(eventProp: ClickAwayMouseEventHandler | ClickAwayTouchEventHandler) {\n  return eventProp.substring(2).toLowerCase() as\n    | \"click\"\n    | \"mousedown\"\n    | \"mouseup\"\n    | \"touchstart\"\n    | \"touchend\"\n    | \"pointerdown\"\n    | \"pointerup\";\n}\n\nfunction clickedRootScrollbar(event: MouseEvent, doc: Document) {\n  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;\n}\n\nexport interface ClickAwayListenerProps {\n  children: React.ReactElement;\n  disableReactTree?: boolean;\n  mouseEvent?: ClickAwayMouseEventHandler | false;\n  onClickAway: (event: MouseEvent | TouchEvent) => void;\n  touchEvent?: ClickAwayTouchEventHandler | false;\n  /** When false, the listener is inert without unmounting the child. */\n  enabled?: boolean;\n}\n\nexport function ClickAwayListener({\n  children,\n  disableReactTree = false,\n  mouseEvent = \"onMouseUp\",\n  onClickAway,\n  touchEvent = \"onTouchEnd\",\n  enabled = true,\n}: ClickAwayListenerProps) {\n  const movedRef = useRef(false);\n  const nodeRef = useRef<Element>(null);\n  const activatedRef = useRef(false);\n  const syntheticEventRef = useRef(false);\n\n  useEffect(() => {\n    // https://github.com/facebook/react/issues/20074\n    setTimeout(() => {\n      activatedRef.current = true;\n    }, 0);\n    return () => {\n      activatedRef.current = false;\n    };\n  }, []);\n\n  const handleRef = useForkRef((children as React.ReactElement & { ref: React.Ref<Element> }).ref, nodeRef);\n\n  const handleClickAway = useEventCallback((event: MouseEvent | TouchEvent) => {\n    const insideReactTree = syntheticEventRef.current;\n    syntheticEventRef.current = false;\n\n    if (\n      !enabled ||\n      !activatedRef.current ||\n      !nodeRef.current ||\n      (\"clientX\" in event && clickedRootScrollbar(event, document))\n    ) {\n      return;\n    }\n\n    if (movedRef.current) {\n      movedRef.current = false;\n      return;\n    }\n\n    let insideDOM;\n\n    if (event.composedPath) {\n      insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;\n    } else {\n      const target = event.target as HTMLElement;\n\n      insideDOM = !document.documentElement.contains(target) || nodeRef.current.contains(target);\n    }\n\n    if (!insideDOM && (disableReactTree || !insideReactTree)) {\n      onClickAway(event);\n    }\n  });\n\n  const createHandleSynthetic = (handlerName: string) => (event: React.SyntheticEvent) => {\n    syntheticEventRef.current = true;\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access\n    const childrenPropsHandler = children.props[handlerName];\n\n    if (childrenPropsHandler) {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      childrenPropsHandler(event);\n    }\n  };\n\n  const childrenProps: { ref: React.Ref<Element> } & Pick<\n    React.DOMAttributes<Element>,\n    ClickAwayMouseEventHandler | ClickAwayTouchEventHandler\n  > = { ref: handleRef };\n\n  if (touchEvent !== false) {\n    childrenProps[touchEvent] = createHandleSynthetic(touchEvent);\n  }\n\n  useEffect(() => {\n    if (touchEvent !== false) {\n      const mappedTouchEvent = mapEventPropToEvent(touchEvent);\n\n      const handleTouchMove = () => {\n        movedRef.current = true;\n      };\n\n      document.addEventListener(mappedTouchEvent, handleClickAway);\n      document.addEventListener(\"touchmove\", handleTouchMove);\n\n      return () => {\n        document.removeEventListener(mappedTouchEvent, handleClickAway);\n        document.removeEventListener(\"touchmove\", handleTouchMove);\n      };\n    }\n\n    return undefined;\n  }, [handleClickAway, touchEvent]);\n\n  if (mouseEvent !== false) {\n    childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);\n  }\n\n  useEffect(() => {\n    if (mouseEvent !== false) {\n      const mappedMouseEvent = mapEventPropToEvent(mouseEvent);\n\n      document.addEventListener(mappedMouseEvent, handleClickAway);\n\n      return () => {\n        document.removeEventListener(mappedMouseEvent, handleClickAway);\n      };\n    }\n\n    return undefined;\n  }, [handleClickAway, mouseEvent]);\n\n  return <>{React.cloneElement(children, childrenProps)}</>;\n}\n"],"names":["mapEventPropToEvent","eventProp","clickedRootScrollbar","event","doc","ClickAwayListener","children","disableReactTree","mouseEvent","onClickAway","touchEvent","enabled","movedRef","useRef","nodeRef","activatedRef","syntheticEventRef","useEffect","handleRef","useForkRef","handleClickAway","useEventCallback","insideReactTree","insideDOM","target","createHandleSynthetic","handlerName","childrenPropsHandler","childrenProps","mappedTouchEvent","handleTouchMove","mappedMouseEvent","jsx","Fragment","React"],"mappings":";;;;AAOA,SAASA,EAAoBC,GAAoE;AAC/F,SAAOA,EAAU,UAAU,CAAC,EAAE,YAAA;AAQhC;AAEA,SAASC,EAAqBC,GAAmBC,GAAe;AAC9D,SAAOA,EAAI,gBAAgB,cAAcD,EAAM,WAAWC,EAAI,gBAAgB,eAAeD,EAAM;AACrG;AAYO,SAASE,EAAkB;AAAA,EAChC,UAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,YAAAC,IAAa;AAAA,EACb,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU;AACZ,GAA2B;AACzB,QAAMC,IAAWC,EAAO,EAAK,GACvBC,IAAUD,EAAgB,IAAI,GAC9BE,IAAeF,EAAO,EAAK,GAC3BG,IAAoBH,EAAO,EAAK;AAEtC,EAAAI,EAAU,OAER,WAAW,MAAM;AACf,IAAAF,EAAa,UAAU;AAAA,EACzB,GAAG,CAAC,GACG,MAAM;AACX,IAAAA,EAAa,UAAU;AAAA,EACzB,IACC,CAAA,CAAE;AAEL,QAAMG,IAAYC,EAAYb,EAA8D,KAAKQ,CAAO,GAElGM,IAAkBC,EAAiB,CAAClB,MAAmC;AAC3E,UAAMmB,IAAkBN,EAAkB;AAG1C,QAFAA,EAAkB,UAAU,IAG1B,CAACL,KACD,CAACI,EAAa,WACd,CAACD,EAAQ,WACR,aAAaX,KAASD,EAAqBC,GAAO,QAAQ;AAE3D;AAGF,QAAIS,EAAS,SAAS;AACpB,MAAAA,EAAS,UAAU;AACnB;AAAA,IACF;AAEA,QAAIW;AAEJ,QAAIpB,EAAM;AACR,MAAAoB,IAAYpB,EAAM,aAAA,EAAe,QAAQW,EAAQ,OAAO,IAAI;AAAA,SACvD;AACL,YAAMU,IAASrB,EAAM;AAErB,MAAAoB,IAAY,CAAC,SAAS,gBAAgB,SAASC,CAAM,KAAKV,EAAQ,QAAQ,SAASU,CAAM;AAAA,IAC3F;AAEA,IAAI,CAACD,MAAchB,KAAoB,CAACe,MACtCb,EAAYN,CAAK;AAAA,EAErB,CAAC,GAEKsB,IAAwB,CAACC,MAAwB,CAACvB,MAAgC;AACtF,IAAAa,EAAkB,UAAU;AAG5B,UAAMW,IAAuBrB,EAAS,MAAMoB,CAAW;AAEvD,IAAIC,KAEFA,EAAqBxB,CAAK;AAAA,EAE9B,GAEMyB,IAGF,EAAE,KAAKV,EAAA;AAEX,SAAIR,MAAe,OACjBkB,EAAclB,CAAU,IAAIe,EAAsBf,CAAU,IAG9DO,EAAU,MAAM;AACd,QAAIP,MAAe,IAAO;AACxB,YAAMmB,IAAmB7B,EAAoBU,CAAU,GAEjDoB,IAAkB,MAAM;AAC5B,QAAAlB,EAAS,UAAU;AAAA,MACrB;AAEA,sBAAS,iBAAiBiB,GAAkBT,CAAe,GAC3D,SAAS,iBAAiB,aAAaU,CAAe,GAE/C,MAAM;AACX,iBAAS,oBAAoBD,GAAkBT,CAAe,GAC9D,SAAS,oBAAoB,aAAaU,CAAe;AAAA,MAC3D;AAAA,IACF;AAAA,EAGF,GAAG,CAACV,GAAiBV,CAAU,CAAC,GAE5BF,MAAe,OACjBoB,EAAcpB,CAAU,IAAIiB,EAAsBjB,CAAU,IAG9DS,EAAU,MAAM;AACd,QAAIT,MAAe,IAAO;AACxB,YAAMuB,IAAmB/B,EAAoBQ,CAAU;AAEvD,sBAAS,iBAAiBuB,GAAkBX,CAAe,GAEpD,MAAM;AACX,iBAAS,oBAAoBW,GAAkBX,CAAe;AAAA,MAChE;AAAA,IACF;AAAA,EAGF,GAAG,CAACA,GAAiBZ,CAAU,CAAC,GAEzB,gBAAAwB,EAAAC,GAAA,EAAG,UAAAC,EAAM,aAAa5B,GAAUsB,CAAa,GAAE;AACxD;"}
+{"version":3,"file":"clickAwayListener.js","sources":["../../../src/components/clickAwayListener/clickAwayListener.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { useEventCallback } from \"../../hooks/useEventCallback\";\nimport { isEventInForeignOverlay } from \"../../utils/overlayLayer\";\n\ntype ClickAwayMouseEventHandler = \"onClick\" | \"onMouseDown\" | \"onMouseUp\" | \"onPointerDown\" | \"onPointerUp\";\ntype ClickAwayTouchEventHandler = \"onTouchStart\" | \"onTouchEnd\";\n\nfunction mapEventPropToEvent(eventProp: ClickAwayMouseEventHandler | ClickAwayTouchEventHandler) {\n  return eventProp.substring(2).toLowerCase() as\n    | \"click\"\n    | \"mousedown\"\n    | \"mouseup\"\n    | \"touchstart\"\n    | \"touchend\"\n    | \"pointerdown\"\n    | \"pointerup\";\n}\n\nfunction clickedRootScrollbar(event: MouseEvent, doc: Document) {\n  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;\n}\n\nexport interface ClickAwayListenerProps {\n  children: React.ReactElement;\n  disableReactTree?: boolean;\n  mouseEvent?: ClickAwayMouseEventHandler | false;\n  onClickAway: (event: MouseEvent | TouchEvent) => void;\n  touchEvent?: ClickAwayTouchEventHandler | false;\n  /** When false, the listener is inert without unmounting the child. */\n  enabled?: boolean;\n}\n\nexport function ClickAwayListener({\n  children,\n  disableReactTree = false,\n  mouseEvent = \"onMouseUp\",\n  onClickAway,\n  touchEvent = \"onTouchEnd\",\n  enabled = true,\n}: ClickAwayListenerProps) {\n  const movedRef = useRef(false);\n  const nodeRef = useRef<Element>(null);\n  const activatedRef = useRef(false);\n  const syntheticEventRef = useRef(false);\n\n  useEffect(() => {\n    // https://github.com/facebook/react/issues/20074\n    setTimeout(() => {\n      activatedRef.current = true;\n    }, 0);\n    return () => {\n      activatedRef.current = false;\n    };\n  }, []);\n\n  const handleRef = useForkRef((children as React.ReactElement & { ref: React.Ref<Element> }).ref, nodeRef);\n\n  const handleClickAway = useEventCallback((event: MouseEvent | TouchEvent) => {\n    const insideReactTree = syntheticEventRef.current;\n    syntheticEventRef.current = false;\n\n    if (\n      !enabled ||\n      !activatedRef.current ||\n      !nodeRef.current ||\n      (\"clientX\" in event && clickedRootScrollbar(event, document))\n    ) {\n      return;\n    }\n\n    if (movedRef.current) {\n      movedRef.current = false;\n      return;\n    }\n\n    let insideDOM;\n\n    if (event.composedPath) {\n      insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;\n    } else {\n      const target = event.target as HTMLElement;\n\n      insideDOM = !document.documentElement.contains(target) || nodeRef.current.contains(target);\n    }\n\n    if (!insideDOM && (disableReactTree || !insideReactTree)) {\n      // Interactions inside a portaled overlay layer above the child (modal,\n      // dropdown, picker…) are not \"away\" from the child.\n      if (isEventInForeignOverlay(event, nodeRef.current)) {\n        return;\n      }\n      onClickAway(event);\n    }\n  });\n\n  const createHandleSynthetic = (handlerName: string) => (event: React.SyntheticEvent) => {\n    syntheticEventRef.current = true;\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access\n    const childrenPropsHandler = children.props[handlerName];\n\n    if (childrenPropsHandler) {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      childrenPropsHandler(event);\n    }\n  };\n\n  const childrenProps: { ref: React.Ref<Element> } & Pick<\n    React.DOMAttributes<Element>,\n    ClickAwayMouseEventHandler | ClickAwayTouchEventHandler\n  > = { ref: handleRef };\n\n  if (touchEvent !== false) {\n    childrenProps[touchEvent] = createHandleSynthetic(touchEvent);\n  }\n\n  useEffect(() => {\n    if (touchEvent !== false) {\n      const mappedTouchEvent = mapEventPropToEvent(touchEvent);\n\n      const handleTouchMove = () => {\n        movedRef.current = true;\n      };\n\n      document.addEventListener(mappedTouchEvent, handleClickAway);\n      document.addEventListener(\"touchmove\", handleTouchMove);\n\n      return () => {\n        document.removeEventListener(mappedTouchEvent, handleClickAway);\n        document.removeEventListener(\"touchmove\", handleTouchMove);\n      };\n    }\n\n    return undefined;\n  }, [handleClickAway, touchEvent]);\n\n  if (mouseEvent !== false) {\n    childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);\n  }\n\n  useEffect(() => {\n    if (mouseEvent !== false) {\n      const mappedMouseEvent = mapEventPropToEvent(mouseEvent);\n\n      document.addEventListener(mappedMouseEvent, handleClickAway);\n\n      return () => {\n        document.removeEventListener(mappedMouseEvent, handleClickAway);\n      };\n    }\n\n    return undefined;\n  }, [handleClickAway, mouseEvent]);\n\n  return <>{React.cloneElement(children, childrenProps)}</>;\n}\n"],"names":["mapEventPropToEvent","eventProp","clickedRootScrollbar","event","doc","ClickAwayListener","children","disableReactTree","mouseEvent","onClickAway","touchEvent","enabled","movedRef","useRef","nodeRef","activatedRef","syntheticEventRef","useEffect","handleRef","useForkRef","handleClickAway","useEventCallback","insideReactTree","insideDOM","target","isEventInForeignOverlay","createHandleSynthetic","handlerName","childrenPropsHandler","childrenProps","mappedTouchEvent","handleTouchMove","mappedMouseEvent","jsx","Fragment","React"],"mappings":"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"}

package/dist/components/dataDisplay/treeView/treeView.d.ts

@@ -24,8 +24,11 @@ export interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     selected?: string[];
     /** Initially selected node ids (uncontrolled). */
     defaultSelected?: string[];
-    /** Called with the next selected ids. */
-    onSelectedChange?: (selected: string[]) => void;
+    /** Called with the next selected ids plus, for user toggles, the node that just changed. */
+    onSelectedChange?: (selected: string[], changed?: {
+        id: string;
+        selected: boolean;
+    }) => void;
     /** Enables label click selection. */
     selectable?: boolean;
     /** Renders a checkbox per node bound to selection. */