@smwb/ui-solid 0.8.0 → 0.9.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/primitives/overlayLayer.d.ts

@@ -0,0 +1,13 @@
+/** Attribute marking the root of a portaled overlay layer (modal, sheet wrapper, dropdown, …). */
+export declare const OVERLAY_LAYER_ATTR = "data-smwb-overlay-layer";
+/**
+ * True when `event` happened inside an overlay layer that does NOT contain
+ * `node` — i.e. `node` sits underneath that layer, so the interaction is not
+ * a "click away" from `node`.
+ */
+export declare const isEventInForeignOverlay: (event: Event, node: Element) => boolean;
+/**
+ * True when `el` belongs to the topmost open overlay layer (or no layers are
+ * open). Used to make Escape close only the top layer instead of every layer.
+ */
+export declare const isTopOverlayLayer: (el: Element | undefined) => boolean;

package/dist/primitives/overlayLayer.js

@@ -0,0 +1,11 @@
+const e = "data-smwb-overlay-layer", r = () => typeof document > "u" ? [] : Array.from(document.querySelectorAll(`[${e}]`)), a = (n, o) => typeof n.composedPath != "function" ? !1 : n.composedPath().some((t) => t instanceof Element && t.hasAttribute(e) && !t.contains(o)), s = (n) => {
+  if (!n) return !0;
+  const o = r(), t = o[o.length - 1];
+  return !t || t === n || t.contains(n) || n.contains(t);
+};
+export {
+  e as OVERLAY_LAYER_ATTR,
+  a as isEventInForeignOverlay,
+  s as isTopOverlayLayer
+};
+//# sourceMappingURL=overlayLayer.js.map

package/dist/primitives/overlayLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayLayer.js","sources":["../../src/primitives/overlayLayer.ts"],"sourcesContent":["/** Attribute marking the root of a portaled overlay layer (modal, sheet wrapper, dropdown, …). */\nexport const OVERLAY_LAYER_ATTR = \"data-smwb-overlay-layer\";\n\n/** All open overlay layers in document order (last = topmost). */\nconst overlayLayers = (): Element[] =>\n  typeof document === \"undefined\" ? [] : Array.from(document.querySelectorAll(`[${OVERLAY_LAYER_ATTR}]`));\n\n/**\n * True when `event` happened inside an overlay layer that does NOT contain\n * `node` — i.e. `node` sits underneath that layer, so the interaction is not\n * a \"click away\" from `node`.\n */\nexport const isEventInForeignOverlay = (event: Event, node: Element): boolean => {\n  if (typeof event.composedPath !== \"function\") return false;\n  return event\n    .composedPath()\n    .some((el) => el instanceof Element && el.hasAttribute(OVERLAY_LAYER_ATTR) && !el.contains(node));\n};\n\n/**\n * True when `el` belongs to the topmost open overlay layer (or no layers are\n * open). Used to make Escape close only the top layer instead of every layer.\n */\nexport const isTopOverlayLayer = (el: Element | undefined): boolean => {\n  if (!el) return true;\n  const all = overlayLayers();\n  const top = all[all.length - 1];\n  return !top || top === el || top.contains(el) || el.contains(top);\n};\n"],"names":["OVERLAY_LAYER_ATTR","overlayLayers","isEventInForeignOverlay","event","node","el","isTopOverlayLayer","all","top"],"mappings":"AACO,MAAMA,IAAqB,2BAG5BC,IAAgB,MACpB,OAAO,WAAa,MAAc,CAAA,IAAK,MAAM,KAAK,SAAS,iBAAiB,IAAID,CAAkB,GAAG,CAAC,GAO3FE,IAA0B,CAACC,GAAcC,MAChD,OAAOD,EAAM,gBAAiB,aAAmB,KAC9CA,EACJ,aAAA,EACA,KAAK,CAACE,MAAOA,aAAc,WAAWA,EAAG,aAAaL,CAAkB,KAAK,CAACK,EAAG,SAASD,CAAI,CAAC,GAOvFE,IAAoB,CAACD,MAAqC;AACrE,MAAI,CAACA,EAAI,QAAO;AAChB,QAAME,IAAMN,EAAA,GACNO,IAAMD,EAAIA,EAAI,SAAS,CAAC;AAC9B,SAAO,CAACC,KAAOA,MAAQH,KAAMG,EAAI,SAASH,CAAE,KAAKA,EAAG,SAASG,CAAG;AAClE;"}

package/dist/source/components/base/icon/icon.jsx

@@ -1,7 +1,10 @@
 import "@smwb/ui-styles/less/components/icon/icon.entry.less";
-import { mergeProps, splitProps } from "solid-js";
+import { mergeProps, splitProps, useContext } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { getIcon } from "../../../icons/registry";
+import { getIconConfig } from "../../../icons/config";
+import { createIconVersion, IconContext } from "./iconProvider";
 const COLOR_TOKENS = [
   "primary",
   "secondary",
@@ -11,6 +14,14 @@ const COLOR_TOKENS = [
   "info",
   "disabled"
 ];
+const warned = /* @__PURE__ */ new Set();
+function warnMissing(name) {
+  if (!getIconConfig().warnOnMissing || warned.has(name)) return;
+  warned.add(name);
+  console.warn(
+    `[smwb] Icon "${name}" is not registered. Register it (import { ${name} } from "@smwb/ui-solid/icons") or use source="auto" to fall back to Material Symbols.`
+  );
+}
 function Icon(props) {
   const merged = mergeProps(
     { weight: 400, fill: 0, size: 20, grade: 100, color: "inherit" },
@@ -26,31 +37,66 @@ function Icon(props) {
     "color",
     "title",
     "style",
+    "source",
     "ref"
   ]);
+  const context = useContext(IconContext);
+  const version = createIconVersion();
+  const source = () => {
+    version();
+    return local.source ?? context?.source ?? getIconConfig().source;
+  };
+  const definition = () => {
+    version();
+    return typeof local.name === "object" ? local.name : getIcon(local.name);
+  };
+  const glyph = () => typeof local.name === "string" ? local.name : local.name.name;
+  const mode = () => {
+    const resolved = source();
+    if (resolved === "google") return "google";
+    if (definition()) return "smwb";
+    if (resolved === "smwb") {
+      warnMissing(glyph());
+      return "missing";
+    }
+    return "google";
+  };
   const decorative = () => local.title === void 0;
   const colorClass = () => typeof local.color === "string" && COLOR_TOKENS.includes(local.color) ? `smwb-icon_color-${local.color}` : void 0;
   const styleObject = () => typeof local.style === "object" && local.style ? local.style : {};
+  const cssSize = () => typeof local.size === "number" ? `${local.size}px` : local.size;
+  const strokeWidth = () => Math.round(Math.min(3, Math.max(1, local.weight / 200)) * 100) / 100;
   return <span
     {...rest}
     ref={mergeRefs(local.ref)}
     data-testid="icon"
+    data-icon-source={mode()}
     role={decorative() ? void 0 : "img"}
     aria-hidden={decorative() ? true : void 0}
     aria-label={local.title}
     title={local.title}
     style={{
       ...styleObject(),
-      "font-variation-settings": `'FILL' ${local.fill}, 'wght' ${local.weight}, 'GRAD' ${local.grade}, 'opsz' 48`
+      ...mode() === "google" ? {
+        "font-variation-settings": `'FILL' ${local.fill}, 'wght' ${local.weight}, 'GRAD' ${local.grade}, 'opsz' 48`
+      } : null
     }}
     class={cn("smwb-icon__wrapper", colorClass(), local.class)}
   >
-      <span
-    class="material-symbols-outlined"
-    style={{ "font-size": typeof local.size === "number" ? `${local.size}px` : local.size }}
-  >
-        {local.name}
-      </span>
+      {mode() === "google" ? <span class="material-symbols-outlined" style={{ "font-size": cssSize() }}>
+          {glyph()}
+        </span> : <svg
+    class="smwb-icon__svg"
+    viewBox={definition()?.viewBox ?? "0 0 24 24"}
+    style={{ width: cssSize(), height: cssSize() }}
+    fill="none"
+    stroke="currentColor"
+    stroke-width={strokeWidth()}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    innerHTML={definition()?.body ?? ""}
+  />}
     </span>;
 }
 var icon_default = Icon;

package/dist/source/components/base/icon/icon.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/icon/icon.entry.less\";\nimport { type JSX, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS: ReadonlyArray<string> = [\n  \"primary\",\n  \"secondary\",\n  \"error\",\n  \"success\",\n  \"warning\",\n  \"info\",\n  \"disabled\",\n];\n\nexport interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name from https://fonts.google.com/icons\n   * Example: name={\"arrow_right_alt\"}\n   */\n  name: 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. Any string\n   * is accepted for backward compatibility, but only known {@link IconColor}\n   * tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as `role=\"img\"`;\n   * otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Icon(props: IconProps): JSX.Element {\n  const merged = mergeProps(\n    { weight: 400, fill: 0 as 0 | 1, size: 20 as number | string, grade: 100, color: \"inherit\" as IconProps[\"color\"] },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"weight\",\n    \"fill\",\n    \"size\",\n    \"grade\",\n    \"name\",\n    \"color\",\n    \"title\",\n    \"style\",\n    \"ref\",\n  ]);\n\n  const decorative = (): boolean => local.title === undefined;\n  const colorClass = (): string | undefined =>\n    typeof local.color === \"string\" && COLOR_TOKENS.includes(local.color) ? `smwb-icon_color-${local.color}` : undefined;\n  const styleObject = (): JSX.CSSProperties => (typeof local.style === \"object\" && local.style ? local.style : {});\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"icon\"\n      role={decorative() ? undefined : \"img\"}\n      aria-hidden={decorative() ? true : undefined}\n      aria-label={local.title}\n      title={local.title}\n      style={{\n        ...styleObject(),\n        \"font-variation-settings\": `'FILL' ${local.fill}, 'wght' ${local.weight}, 'GRAD' ${local.grade}, 'opsz' 48`,\n      }}\n      class={cn(\"smwb-icon__wrapper\", colorClass(), local.class)}\n    >\n      <span\n        class=\"material-symbols-outlined\"\n        style={{ \"font-size\": typeof local.size === \"number\" ? `${local.size}px` : local.size }}\n      >\n        {local.name}\n      </span>\n    </span>\n  );\n}\n\nexport default Icon;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,YAAY,kBAAkB;AACjD,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAIpC,MAAM,eAAsC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA2BO,SAAS,KAAK,OAA+B;AAClD,QAAM,SAAS;AAAA,IACb,EAAE,QAAQ,KAAK,MAAM,GAAY,MAAM,IAAuB,OAAO,KAAK,OAAO,UAAgC;AAAA,IACjH;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,MAAe,MAAM,UAAU;AAClD,QAAM,aAAa,MACjB,OAAO,MAAM,UAAU,YAAY,aAAa,SAAS,MAAM,KAAK,IAAI,mBAAmB,MAAM,KAAK,KAAK;AAC7G,QAAM,cAAc,MAA0B,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAE9G,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,MAAM,WAAW,IAAI,SAAY;AAAA,IACjC,aAAa,WAAW,IAAI,OAAO;AAAA,IACnC,YAAY,MAAM;AAAA,IAClB,OAAO,MAAM;AAAA,IACb,OAAO;AAAA,MACL,GAAG,YAAY;AAAA,MACf,2BAA2B,UAAU,MAAM,IAAI,YAAY,MAAM,MAAM,YAAY,MAAM,KAAK;AAAA,IAChG;AAAA,IACA,OAAO,GAAG,sBAAsB,WAAW,GAAG,MAAM,KAAK;AAAA,GAC1D;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,OAAO,EAAE,aAAa,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,KAAK;AAAA,GACvF;AAAA,SACE,MAAM,KAAK;AAAA,MACd,EALC,KAKM;AAAA,IACT,EApBC;AAsBL;AAEA,IAAO,eAAQ;","names":[],"file":"icon.jsx"}
+{"version":3,"sources":["../../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/icon/icon.entry.less\";\n/* eslint-disable solid/no-innerhtml -- icon bodies are static SVG geometry\n   generated from icons/data into src/icons/svg; nothing user-supplied reaches\n   this attribute, and an <svg> assembled from JSX children cannot be handed to\n   a consumer as plain data. */\nimport { type JSX, mergeProps, splitProps, useContext } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { getIcon } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport type { IconDefinition, IconSource } from \"../../../icons/types\";\nimport { createIconVersion, IconContext } from \"./iconProvider\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS: ReadonlyArray<string> = [\n  \"primary\",\n  \"secondary\",\n  \"error\",\n  \"success\",\n  \"warning\",\n  \"info\",\n  \"disabled\",\n];\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  console.warn(\n    `[smwb] Icon \"${name}\" is not registered. Register it (import { ${name} } from \"@smwb/ui-solid/icons\") ` +\n      `or use source=\"auto\" to fall back to Material Symbols.`\n  );\n}\n\nexport interface IconProps extends JSX.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-solid/icons\";\n   * <Icon name={arrowRightAlt} />\n   * ```\n   */\n  name: string | IconDefinition;\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. Any string\n   * is accepted for backward compatibility, but only known {@link IconColor}\n   * tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as `role=\"img\"`;\n   * 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  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Icon(props: IconProps): JSX.Element {\n  const merged = mergeProps(\n    { weight: 400, fill: 0 as 0 | 1, size: 20 as number | string, grade: 100, color: \"inherit\" as IconProps[\"color\"] },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"weight\",\n    \"fill\",\n    \"size\",\n    \"grade\",\n    \"name\",\n    \"color\",\n    \"title\",\n    \"style\",\n    \"source\",\n    \"ref\",\n  ]);\n\n  const context = useContext(IconContext);\n  // Re-reads the registry when icons are registered late (lazy chunks, HMR).\n  const version = createIconVersion();\n\n  const source = (): IconSource => {\n    version();\n    return local.source ?? context?.source ?? getIconConfig().source;\n  };\n  const definition = (): IconDefinition | undefined => {\n    version();\n    return typeof local.name === \"object\" ? local.name : getIcon(local.name);\n  };\n  const glyph = (): string => (typeof local.name === \"string\" ? local.name : local.name.name);\n\n  const mode = (): \"google\" | \"smwb\" | \"missing\" => {\n    const resolved = source();\n    if (resolved === \"google\") return \"google\";\n    if (definition()) return \"smwb\";\n    if (resolved === \"smwb\") {\n      warnMissing(glyph());\n      return \"missing\";\n    }\n    return \"google\";\n  };\n\n  const decorative = (): boolean => local.title === undefined;\n  const colorClass = (): string | undefined =>\n    typeof local.color === \"string\" && COLOR_TOKENS.includes(local.color) ? `smwb-icon_color-${local.color}` : undefined;\n  const styleObject = (): JSX.CSSProperties => (typeof local.style === \"object\" && local.style ? local.style : {});\n  const cssSize = (): string => (typeof local.size === \"number\" ? `${local.size}px` : local.size);\n  const strokeWidth = (): number => Math.round(Math.min(3, Math.max(1, local.weight / 200)) * 100) / 100;\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"icon\"\n      data-icon-source={mode()}\n      role={decorative() ? undefined : \"img\"}\n      aria-hidden={decorative() ? true : undefined}\n      aria-label={local.title}\n      title={local.title}\n      style={{\n        ...styleObject(),\n        ...(mode() === \"google\"\n          ? {\n              \"font-variation-settings\": `'FILL' ${local.fill}, 'wght' ${local.weight}, 'GRAD' ${local.grade}, 'opsz' 48`,\n            }\n          : null),\n      }}\n      class={cn(\"smwb-icon__wrapper\", colorClass(), local.class)}\n    >\n      {mode() === \"google\" ? (\n        <span class=\"material-symbols-outlined\" style={{ \"font-size\": cssSize() }}>\n          {glyph()}\n        </span>\n      ) : (\n        <svg\n          class=\"smwb-icon__svg\"\n          viewBox={definition()?.viewBox ?? \"0 0 24 24\"}\n          style={{ width: cssSize(), height: cssSize() }}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width={strokeWidth()}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          innerHTML={definition()?.body ?? \"\"}\n        />\n      )}\n    </span>\n  );\n}\n\nexport default Icon;\n"],"mappings":"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","names":[],"file":"icon.jsx"}

package/dist/source/components/base/icon/iconProvider.jsx

@@ -0,0 +1,40 @@
+import { createContext, createSignal, onCleanup, onMount, useContext } from "solid-js";
+import { registerIcons } from "../../../icons/registry";
+import { getIconConfig } from "../../../icons/config";
+import { getIconVersion, subscribeIcons } from "../../../icons/store";
+const IconContext = createContext();
+function IconProvider(props) {
+  if (props.icons) registerIcons(props.icons);
+  const value = {
+    get source() {
+      return props.source;
+    }
+  };
+  return <IconContext.Provider value={value}>{props.children}</IconContext.Provider>;
+}
+function createIconVersion() {
+  const [version, setVersion] = createSignal(getIconVersion());
+  onMount(() => {
+    setVersion(getIconVersion());
+    const unsubscribe = subscribeIcons(() => setVersion(getIconVersion()));
+    onCleanup(unsubscribe);
+  });
+  return version;
+}
+function useIconSource(override) {
+  const context = useContext(IconContext);
+  const version = createIconVersion();
+  return () => {
+    version();
+    return override?.() ?? context?.source ?? getIconConfig().source;
+  };
+}
+var iconProvider_default = IconProvider;
+export {
+  IconContext,
+  IconProvider,
+  createIconVersion,
+  iconProvider_default as default,
+  useIconSource
+};
+//# sourceMappingURL=iconProvider.jsx.map

package/dist/source/components/base/icon/iconProvider.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/base/icon/iconProvider.tsx"],"sourcesContent":["import { createContext, createSignal, onCleanup, onMount, useContext, type JSX } from \"solid-js\";\nimport { registerIcons, type IconInput } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport { getIconVersion, 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 | undefined;\n}\n\nexport const IconContext = createContext<IconContextValue>();\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-solid/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. It is read once, on creation.\n   */\n  icons?: IconInput;\n  children?: JSX.Element;\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(props: IconProviderProps): JSX.Element {\n  // Registered in the component body, not an effect: icons must be in the\n  // registry before children render, on the server as well as the client.\n  if (props.icons) registerIcons(props.icons);\n\n  const value: IconContextValue = {\n    get source() {\n      return props.source;\n    },\n  };\n  return <IconContext.Provider value={value}>{props.children}</IconContext.Provider>;\n}\n\n/**\n * Tracks registry/config changes. Subscribing in `onMount` keeps the server\n * render side-effect free — nothing registers between `renderToString` and\n * hydration that the mount-time re-read below would miss.\n */\nexport function createIconVersion(): () => number {\n  const [version, setVersion] = createSignal(getIconVersion());\n  onMount(() => {\n    setVersion(getIconVersion());\n    const unsubscribe = subscribeIcons(() => setVersion(getIconVersion()));\n    onCleanup(unsubscribe);\n  });\n  return version;\n}\n\n/**\n * Resolves the icon source the way `<Icon>` does: explicit override, then the\n * nearest {@link IconProvider}, then the app-wide config (`\"auto\"` by default).\n */\nexport function useIconSource(override?: () => IconSource | undefined): () => IconSource {\n  const context = useContext(IconContext);\n  const version = createIconVersion();\n  return () => {\n    version();\n    return override?.() ?? context?.source ?? getIconConfig().source;\n  };\n}\n\nexport default IconProvider;\n"],"mappings":"AAAA,SAAS,eAAe,cAAc,WAAW,SAAS,kBAA4B;AACtF,SAAS,qBAAqC;AAC9C,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB,sBAAsB;AAQxC,MAAM,cAAc,cAAgC;AA2BpD,SAAS,aAAa,OAAuC;AAGlE,MAAI,MAAM,MAAO,eAAc,MAAM,KAAK;AAE1C,QAAM,QAA0B;AAAA,IAC9B,IAAI,SAAS;AACX,aAAO,MAAM;AAAA,IACf;AAAA,EACF;AACA,SAAO,CAAC,YAAY,SAAS,OAAO,QAAQ,MAAM,SAAS,EAAnD,YAAY;AACtB;AAOO,SAAS,oBAAkC;AAChD,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,eAAe,CAAC;AAC3D,UAAQ,MAAM;AACZ,eAAW,eAAe,CAAC;AAC3B,UAAM,cAAc,eAAe,MAAM,WAAW,eAAe,CAAC,CAAC;AACrE,cAAU,WAAW;AAAA,EACvB,CAAC;AACD,SAAO;AACT;AAMO,SAAS,cAAc,UAA2D;AACvF,QAAM,UAAU,WAAW,WAAW;AACtC,QAAM,UAAU,kBAAkB;AAClC,SAAO,MAAM;AACX,YAAQ;AACR,WAAO,WAAW,KAAK,SAAS,UAAU,cAAc,EAAE;AAAA,EAC5D;AACF;AAEA,IAAO,uBAAQ;","names":[],"file":"iconProvider.jsx"}

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

@@ -1,6 +1,11 @@
 import { Icon, default as default2 } from "./icon";
+import { IconProvider, IconContext, useIconSource, createIconVersion } from "./iconProvider";
 export {
   Icon,
-  default2 as default
+  IconContext,
+  IconProvider,
+  createIconVersion,
+  default2 as default,
+  useIconSource
 };
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/base/icon/index.ts"],
-  "sourcesContent": ["export { Icon, default } from \"./icon\";\nexport type { IconProps, IconColor } from \"./icon\";\n"],
-  "mappings": "AAAA,SAAS,MAAM,WAAAA,gBAAe;",
+  "sourcesContent": ["export { Icon, default } from \"./icon\";\nexport type { IconProps, IconColor } from \"./icon\";\nexport { IconProvider, IconContext, useIconSource, createIconVersion } from \"./iconProvider\";\nexport type { IconProviderProps, IconContextValue } from \"./iconProvider\";\n"],
+  "mappings": "AAAA,SAAS,MAAM,WAAAA,gBAAe;AAE9B,SAAS,cAAc,aAAa,eAAe,yBAAyB;",
   "names": ["default"]
 }

package/dist/source/components/clickAwayListener/clickAwayListener.jsx

@@ -1,4 +1,5 @@
 import { children as resolveChildren, createEffect, mergeProps, onCleanup, onMount } from "solid-js";
+import { isEventInForeignOverlay } from "../../primitives/overlayLayer";
 function mapEventPropToEvent(eventProp) {
   return eventProp.substring(2).toLowerCase();
 }
@@ -41,6 +42,7 @@ function ClickAwayListener(props) {
       insideDOM = !document.documentElement.contains(target) || node.contains(target);
     }
     if (!insideDOM) {
+      if (isEventInForeignOverlay(event, node)) return;
       merged.onClickAway(event);
     }
   };

package/dist/source/components/clickAwayListener/clickAwayListener.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/clickAwayListener/clickAwayListener.tsx"],"sourcesContent":["import { type JSX, children as resolveChildren, createEffect, mergeProps, onCleanup, onMount } from \"solid-js\";\n\ntype ClickAwayMouseEventHandler = \"onClick\" | \"onMouseDown\" | \"onMouseUp\" | \"onPointerDown\" | \"onPointerUp\";\ntype ClickAwayTouchEventHandler = \"onTouchStart\" | \"onTouchEnd\";\n\ntype MappedEvent = \"click\" | \"mousedown\" | \"mouseup\" | \"touchstart\" | \"touchend\" | \"pointerdown\" | \"pointerup\";\n\nfunction mapEventPropToEvent(eventProp: ClickAwayMouseEventHandler | ClickAwayTouchEventHandler): MappedEvent {\n  return eventProp.substring(2).toLowerCase() as MappedEvent;\n}\n\nfunction clickedRootScrollbar(event: MouseEvent, doc: Document): boolean {\n  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;\n}\n\nexport interface ClickAwayListenerProps {\n  children: JSX.Element;\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\n/**\n * Solid redesign of MUI's ClickAwayListener. React's version cloned the child\n * to inject a ref + synthetic handlers; Solid resolves the child to its DOM\n * node and uses `composedPath`/`contains` containment checks against document\n * listeners — no element cloning.\n */\nexport function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element {\n  const merged = mergeProps(\n    { mouseEvent: \"onMouseUp\" as ClickAwayMouseEventHandler, touchEvent: \"onTouchEnd\" as ClickAwayTouchEventHandler, enabled: true },\n    props\n  );\n  const resolved = resolveChildren(() => merged.children);\n\n  const getNode = (): Element | undefined => {\n    const c = resolved();\n    const el = Array.isArray(c) ? c.find((x) => x instanceof Element) : c;\n    return el instanceof Element ? el : undefined;\n  };\n\n  let activated = false;\n  let moved = false;\n\n  onMount(() => {\n    // Defer activation a tick so the opening interaction doesn't immediately\n    // trigger a click-away (see facebook/react#20074).\n    const timer = setTimeout(() => {\n      activated = true;\n    }, 0);\n    onCleanup(() => clearTimeout(timer));\n  });\n\n  const handleClickAway = (event: MouseEvent | TouchEvent): void => {\n    const node = getNode();\n    if (!merged.enabled || !activated || !node || (\"clientX\" in event && clickedRootScrollbar(event, document))) {\n      return;\n    }\n    if (moved) {\n      moved = false;\n      return;\n    }\n    let insideDOM: boolean;\n    if (event.composedPath) {\n      insideDOM = event.composedPath().indexOf(node) > -1;\n    } else {\n      const target = event.target as HTMLElement;\n      insideDOM = !document.documentElement.contains(target) || node.contains(target);\n    }\n    if (!insideDOM) {\n      merged.onClickAway(event);\n    }\n  };\n\n  createEffect(() => {\n    const handleTouchMove = (): void => {\n      moved = true;\n    };\n    if (merged.touchEvent !== false) {\n      const mapped = mapEventPropToEvent(merged.touchEvent);\n      document.addEventListener(mapped, handleClickAway as EventListener);\n      document.addEventListener(\"touchmove\", handleTouchMove);\n      onCleanup(() => {\n        document.removeEventListener(mapped, handleClickAway as EventListener);\n        document.removeEventListener(\"touchmove\", handleTouchMove);\n      });\n    }\n    if (merged.mouseEvent !== false) {\n      const mapped = mapEventPropToEvent(merged.mouseEvent);\n      document.addEventListener(mapped, handleClickAway as EventListener);\n      onCleanup(() => document.removeEventListener(mapped, handleClickAway as EventListener));\n    }\n  });\n\n  return <>{resolved()}</>;\n}\n\nexport default ClickAwayListener;\n"],"mappings":"AAAA,SAAmB,YAAY,iBAAiB,cAAc,YAAY,WAAW,eAAe;AAOpG,SAAS,oBAAoB,WAAiF;AAC5G,SAAO,UAAU,UAAU,CAAC,EAAE,YAAY;AAC5C;AAEA,SAAS,qBAAqB,OAAmB,KAAwB;AACvE,SAAO,IAAI,gBAAgB,cAAc,MAAM,WAAW,IAAI,gBAAgB,eAAe,MAAM;AACrG;AAiBO,SAAS,kBAAkB,OAA4C;AAC5E,QAAM,SAAS;AAAA,IACb,EAAE,YAAY,aAA2C,YAAY,cAA4C,SAAS,KAAK;AAAA,IAC/H;AAAA,EACF;AACA,QAAM,WAAW,gBAAgB,MAAM,OAAO,QAAQ;AAEtD,QAAM,UAAU,MAA2B;AACzC,UAAM,IAAI,SAAS;AACnB,UAAM,KAAK,MAAM,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,aAAa,OAAO,IAAI;AACpE,WAAO,cAAc,UAAU,KAAK;AAAA,EACtC;AAEA,MAAI,YAAY;AAChB,MAAI,QAAQ;AAEZ,UAAQ,MAAM;AAGZ,UAAM,QAAQ,WAAW,MAAM;AAC7B,kBAAY;AAAA,IACd,GAAG,CAAC;AACJ,cAAU,MAAM,aAAa,KAAK,CAAC;AAAA,EACrC,CAAC;AAED,QAAM,kBAAkB,CAAC,UAAyC;AAChE,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,OAAO,WAAW,CAAC,aAAa,CAAC,QAAS,aAAa,SAAS,qBAAqB,OAAO,QAAQ,GAAI;AAC3G;AAAA,IACF;AACA,QAAI,OAAO;AACT,cAAQ;AACR;AAAA,IACF;AACA,QAAI;AACJ,QAAI,MAAM,cAAc;AACtB,kBAAY,MAAM,aAAa,EAAE,QAAQ,IAAI,IAAI;AAAA,IACnD,OAAO;AACL,YAAM,SAAS,MAAM;AACrB,kBAAY,CAAC,SAAS,gBAAgB,SAAS,MAAM,KAAK,KAAK,SAAS,MAAM;AAAA,IAChF;AACA,QAAI,CAAC,WAAW;AACd,aAAO,YAAY,KAAK;AAAA,IAC1B;AAAA,EACF;AAEA,eAAa,MAAM;AACjB,UAAM,kBAAkB,MAAY;AAClC,cAAQ;AAAA,IACV;AACA,QAAI,OAAO,eAAe,OAAO;AAC/B,YAAM,SAAS,oBAAoB,OAAO,UAAU;AACpD,eAAS,iBAAiB,QAAQ,eAAgC;AAClE,eAAS,iBAAiB,aAAa,eAAe;AACtD,gBAAU,MAAM;AACd,iBAAS,oBAAoB,QAAQ,eAAgC;AACrE,iBAAS,oBAAoB,aAAa,eAAe;AAAA,MAC3D,CAAC;AAAA,IACH;AACA,QAAI,OAAO,eAAe,OAAO;AAC/B,YAAM,SAAS,oBAAoB,OAAO,UAAU;AACpD,eAAS,iBAAiB,QAAQ,eAAgC;AAClE,gBAAU,MAAM,SAAS,oBAAoB,QAAQ,eAAgC,CAAC;AAAA,IACxF;AAAA,EACF,CAAC;AAED,SAAO,GAAG,SAAS,EAAE;AACvB;AAEA,IAAO,4BAAQ;","names":[],"file":"clickAwayListener.jsx"}
+{"version":3,"sources":["../../../../src/components/clickAwayListener/clickAwayListener.tsx"],"sourcesContent":["import { type JSX, children as resolveChildren, createEffect, mergeProps, onCleanup, onMount } from \"solid-js\";\nimport { isEventInForeignOverlay } from \"../../primitives/overlayLayer\";\n\ntype ClickAwayMouseEventHandler = \"onClick\" | \"onMouseDown\" | \"onMouseUp\" | \"onPointerDown\" | \"onPointerUp\";\ntype ClickAwayTouchEventHandler = \"onTouchStart\" | \"onTouchEnd\";\n\ntype MappedEvent = \"click\" | \"mousedown\" | \"mouseup\" | \"touchstart\" | \"touchend\" | \"pointerdown\" | \"pointerup\";\n\nfunction mapEventPropToEvent(eventProp: ClickAwayMouseEventHandler | ClickAwayTouchEventHandler): MappedEvent {\n  return eventProp.substring(2).toLowerCase() as MappedEvent;\n}\n\nfunction clickedRootScrollbar(event: MouseEvent, doc: Document): boolean {\n  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;\n}\n\nexport interface ClickAwayListenerProps {\n  children: JSX.Element;\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\n/**\n * Solid redesign of MUI's ClickAwayListener. React's version cloned the child\n * to inject a ref + synthetic handlers; Solid resolves the child to its DOM\n * node and uses `composedPath`/`contains` containment checks against document\n * listeners — no element cloning.\n */\nexport function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element {\n  const merged = mergeProps(\n    { mouseEvent: \"onMouseUp\" as ClickAwayMouseEventHandler, touchEvent: \"onTouchEnd\" as ClickAwayTouchEventHandler, enabled: true },\n    props\n  );\n  const resolved = resolveChildren(() => merged.children);\n\n  const getNode = (): Element | undefined => {\n    const c = resolved();\n    const el = Array.isArray(c) ? c.find((x) => x instanceof Element) : c;\n    return el instanceof Element ? el : undefined;\n  };\n\n  let activated = false;\n  let moved = false;\n\n  onMount(() => {\n    // Defer activation a tick so the opening interaction doesn't immediately\n    // trigger a click-away (see facebook/react#20074).\n    const timer = setTimeout(() => {\n      activated = true;\n    }, 0);\n    onCleanup(() => clearTimeout(timer));\n  });\n\n  const handleClickAway = (event: MouseEvent | TouchEvent): void => {\n    const node = getNode();\n    if (!merged.enabled || !activated || !node || (\"clientX\" in event && clickedRootScrollbar(event, document))) {\n      return;\n    }\n    if (moved) {\n      moved = false;\n      return;\n    }\n    let insideDOM: boolean;\n    if (event.composedPath) {\n      insideDOM = event.composedPath().indexOf(node) > -1;\n    } else {\n      const target = event.target as HTMLElement;\n      insideDOM = !document.documentElement.contains(target) || node.contains(target);\n    }\n    if (!insideDOM) {\n      // Interactions inside a portaled overlay layer above the child (modal,\n      // dropdown, picker…) are not \"away\" from the child.\n      if (isEventInForeignOverlay(event, node)) return;\n      merged.onClickAway(event);\n    }\n  };\n\n  createEffect(() => {\n    const handleTouchMove = (): void => {\n      moved = true;\n    };\n    if (merged.touchEvent !== false) {\n      const mapped = mapEventPropToEvent(merged.touchEvent);\n      document.addEventListener(mapped, handleClickAway as EventListener);\n      document.addEventListener(\"touchmove\", handleTouchMove);\n      onCleanup(() => {\n        document.removeEventListener(mapped, handleClickAway as EventListener);\n        document.removeEventListener(\"touchmove\", handleTouchMove);\n      });\n    }\n    if (merged.mouseEvent !== false) {\n      const mapped = mapEventPropToEvent(merged.mouseEvent);\n      document.addEventListener(mapped, handleClickAway as EventListener);\n      onCleanup(() => document.removeEventListener(mapped, handleClickAway as EventListener));\n    }\n  });\n\n  return <>{resolved()}</>;\n}\n\nexport default ClickAwayListener;\n"],"mappings":"AAAA,SAAmB,YAAY,iBAAiB,cAAc,YAAY,WAAW,eAAe;AACpG,SAAS,+BAA+B;AAOxC,SAAS,oBAAoB,WAAiF;AAC5G,SAAO,UAAU,UAAU,CAAC,EAAE,YAAY;AAC5C;AAEA,SAAS,qBAAqB,OAAmB,KAAwB;AACvE,SAAO,IAAI,gBAAgB,cAAc,MAAM,WAAW,IAAI,gBAAgB,eAAe,MAAM;AACrG;AAiBO,SAAS,kBAAkB,OAA4C;AAC5E,QAAM,SAAS;AAAA,IACb,EAAE,YAAY,aAA2C,YAAY,cAA4C,SAAS,KAAK;AAAA,IAC/H;AAAA,EACF;AACA,QAAM,WAAW,gBAAgB,MAAM,OAAO,QAAQ;AAEtD,QAAM,UAAU,MAA2B;AACzC,UAAM,IAAI,SAAS;AACnB,UAAM,KAAK,MAAM,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,aAAa,OAAO,IAAI;AACpE,WAAO,cAAc,UAAU,KAAK;AAAA,EACtC;AAEA,MAAI,YAAY;AAChB,MAAI,QAAQ;AAEZ,UAAQ,MAAM;AAGZ,UAAM,QAAQ,WAAW,MAAM;AAC7B,kBAAY;AAAA,IACd,GAAG,CAAC;AACJ,cAAU,MAAM,aAAa,KAAK,CAAC;AAAA,EACrC,CAAC;AAED,QAAM,kBAAkB,CAAC,UAAyC;AAChE,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,OAAO,WAAW,CAAC,aAAa,CAAC,QAAS,aAAa,SAAS,qBAAqB,OAAO,QAAQ,GAAI;AAC3G;AAAA,IACF;AACA,QAAI,OAAO;AACT,cAAQ;AACR;AAAA,IACF;AACA,QAAI;AACJ,QAAI,MAAM,cAAc;AACtB,kBAAY,MAAM,aAAa,EAAE,QAAQ,IAAI,IAAI;AAAA,IACnD,OAAO;AACL,YAAM,SAAS,MAAM;AACrB,kBAAY,CAAC,SAAS,gBAAgB,SAAS,MAAM,KAAK,KAAK,SAAS,MAAM;AAAA,IAChF;AACA,QAAI,CAAC,WAAW;AAGd,UAAI,wBAAwB,OAAO,IAAI,EAAG;AAC1C,aAAO,YAAY,KAAK;AAAA,IAC1B;AAAA,EACF;AAEA,eAAa,MAAM;AACjB,UAAM,kBAAkB,MAAY;AAClC,cAAQ;AAAA,IACV;AACA,QAAI,OAAO,eAAe,OAAO;AAC/B,YAAM,SAAS,oBAAoB,OAAO,UAAU;AACpD,eAAS,iBAAiB,QAAQ,eAAgC;AAClE,eAAS,iBAAiB,aAAa,eAAe;AACtD,gBAAU,MAAM;AACd,iBAAS,oBAAoB,QAAQ,eAAgC;AACrE,iBAAS,oBAAoB,aAAa,eAAe;AAAA,MAC3D,CAAC;AAAA,IACH;AACA,QAAI,OAAO,eAAe,OAAO;AAC/B,YAAM,SAAS,oBAAoB,OAAO,UAAU;AACpD,eAAS,iBAAiB,QAAQ,eAAgC;AAClE,gBAAU,MAAM,SAAS,oBAAoB,QAAQ,eAAgC,CAAC;AAAA,IACxF;AAAA,EACF,CAAC;AAED,SAAO,GAAG,SAAS,EAAE;AACvB;AAEA,IAAO,4BAAQ;","names":[],"file":"clickAwayListener.jsx"}

package/dist/source/components/dataDisplay/treeView/treeView.jsx

@@ -109,10 +109,15 @@ function TreeView(props) {
     defaultValue: local.defaultExpanded,
     onChange: (next) => local.onExpandedChange?.(next)
   });
+  let lastToggled;
   const [selectedIds, setSelectedIds] = createControllableState({
     value: () => local.selected,
     defaultValue: local.defaultSelected,
-    onChange: (next) => local.onSelectedChange?.(next)
+    onChange: (next) => {
+      const changed = lastToggled;
+      lastToggled = void 0;
+      local.onSelectedChange?.(next, changed);
+    }
   });
   const toggleExpanded = (id) => setExpandedIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]);
   const setOpen = (id, open) => setExpandedIds((prev) => {
@@ -121,7 +126,10 @@ function TreeView(props) {
     if (!open && has) return prev.filter((x) => x !== id);
     return prev;
   });
-  const toggleSelected = (id) => setSelectedIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]);
+  const toggleSelected = (id) => {
+    lastToggled = { id, selected: !selectedIds().includes(id) };
+    setSelectedIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]);
+  };
   const ensureLoaded = (item, nodeId) => {
     if (!local.loadChildren || loadedChildren()[nodeId] || item.children && item.children.length > 0) return;
     setLoadingIds((prev) => prev.includes(nodeId) ? prev : [...prev, nodeId]);

package/dist/source/components/dataDisplay/treeView/treeView.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/treeView/treeView.entry.less\";\nimport { type Accessor, type JSX, For, Show, createContext, createSignal, mergeProps, splitProps, useContext } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ITreeNodeItem {\n  /** Stable identifier. Falls back to the positional path when omitted. */\n  id?: string;\n  label: string;\n  children?: ITreeNodeItem[];\n  /** Hint that the node is expandable even before its children are loaded. */\n  hasChildren?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  nodeIcon?: { opened?: string; closed?: string };\n  listIcon?: string;\n  data: ITreeNodeItem[];\n  expanded?: string[];\n  defaultExpanded?: string[];\n  onExpandedChange?: (expanded: string[]) => void;\n  selected?: string[];\n  defaultSelected?: string[];\n  onSelectedChange?: (selected: string[]) => void;\n  selectable?: boolean;\n  checkboxes?: boolean;\n  renderLabel?: (item: ITreeNodeItem, nodeId: string) => JSX.Element;\n  loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface TreeContextValue {\n  expandedIds: Accessor<string[]>;\n  selectedIds: Accessor<string[]>;\n  loadedChildren: Accessor<Record<string, ITreeNodeItem[]>>;\n  loadingIds: Accessor<string[]>;\n  toggleExpanded: (id: string) => void;\n  setOpen: (id: string, open: boolean) => void;\n  toggleSelected: (id: string) => void;\n  ensureLoaded: (item: ITreeNodeItem, nodeId: string) => void;\n  selectable: boolean;\n  checkboxes: boolean;\n  nodeIcon: { opened?: string; closed?: string };\n  listIcon: string;\n  renderLabel: ((item: ITreeNodeItem, nodeId: string) => JSX.Element) | undefined;\n  hasLoader: boolean;\n}\n\nconst TreeContext = createContext<TreeContextValue>();\n\nfunction TreeNode(props: { item: ITreeNodeItem; path: string }): JSX.Element {\n  const ctx = useContext(TreeContext)!;\n  const nodeId = (): string => props.item.id ?? props.path;\n  const resolvedChildren = (): ITreeNodeItem[] | undefined => props.item.children ?? ctx.loadedChildren()[nodeId()];\n  const isLazy = (): boolean => ctx.hasLoader && (!!props.item.hasChildren || !!ctx.loadedChildren()[nodeId()]);\n  const hasChildNodes = (): boolean => (!!resolvedChildren() && (resolvedChildren()?.length ?? 0) > 0) || isLazy();\n  const isOpen = (): boolean => ctx.expandedIds().includes(nodeId());\n  const isSelected = (): boolean => ctx.selectedIds().includes(nodeId());\n  const isLoading = (): boolean => ctx.loadingIds().includes(nodeId());\n\n  const onLabelClick = (): void => {\n    if (hasChildNodes()) {\n      if (!isOpen()) ctx.ensureLoaded(props.item, nodeId());\n      ctx.toggleExpanded(nodeId());\n    }\n    if (ctx.selectable) ctx.toggleSelected(nodeId());\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onLabelClick();\n    } else if (event.key === \"ArrowRight\" && hasChildNodes()) {\n      ctx.ensureLoaded(props.item, nodeId());\n      ctx.setOpen(nodeId(), true);\n    } else if (event.key === \"ArrowLeft\" && hasChildNodes()) {\n      ctx.setOpen(nodeId(), false);\n    }\n  };\n\n  return (\n    <div\n      class={cn(\"smwb-tree__node\", { \"smwb-tree__node_selected\": isSelected() })}\n      role=\"treeitem\"\n      aria-expanded={hasChildNodes() ? isOpen() : undefined}\n      aria-selected={ctx.selectable || ctx.checkboxes ? isSelected() : undefined}\n    >\n      <span class=\"smwb-tree__node__content\" onClick={onLabelClick} onKeyDown={onKeyDown} tabindex={0} role=\"button\">\n        <Show when={ctx.checkboxes}>\n          <input\n            type=\"checkbox\"\n            class=\"smwb-tree__node__checkbox\"\n            checked={isSelected()}\n            onClick={(e) => e.stopPropagation()}\n            onChange={() => ctx.toggleSelected(nodeId())}\n            aria-label={props.item.label}\n          />\n        </Show>\n        <span class=\"smwb-tree__node__label\">\n          <Show when={hasChildNodes()} fallback={<Icon name={ctx.listIcon} size={20} />}>\n            <Icon name={isOpen() ? ctx.nodeIcon.opened ?? \"folder_open\" : ctx.nodeIcon.closed ?? \"folder\"} fill={1} size={20} />\n          </Show>\n          {ctx.renderLabel ? ctx.renderLabel(props.item, nodeId()) : props.item.label}\n        </span>\n      </span>\n      <Show when={hasChildNodes() && isOpen()}>\n        <div role=\"group\">\n          <Show\n            when={!(isLoading() && !resolvedChildren())}\n            fallback={\n              <div class=\"smwb-tree__node__loading\" role=\"status\">\n                Загрузка…\n              </div>\n            }\n          >\n            <For each={resolvedChildren() ?? []}>\n              {(child, idx) => <TreeNode item={child} path={`${props.path}.${idx()}`} />}\n            </For>\n          </Show>\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport function TreeView(props: TreeViewProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      listIcon: \"draft\",\n      nodeIcon: { closed: \"folder\", opened: \"folder_open\" } as { opened?: string; closed?: string },\n      data: [] as ITreeNodeItem[],\n      defaultExpanded: [] as string[],\n      defaultSelected: [] as string[],\n      selectable: false,\n      checkboxes: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"listIcon\",\n    \"nodeIcon\",\n    \"data\",\n    \"expanded\",\n    \"defaultExpanded\",\n    \"onExpandedChange\",\n    \"selected\",\n    \"defaultSelected\",\n    \"onSelectedChange\",\n    \"selectable\",\n    \"checkboxes\",\n    \"renderLabel\",\n    \"loadChildren\",\n    \"ref\",\n  ]);\n\n  const [loadedChildren, setLoadedChildren] = createSignal<Record<string, ITreeNodeItem[]>>({});\n  const [loadingIds, setLoadingIds] = createSignal<string[]>([]);\n  const [expandedIds, setExpandedIds] = createControllableState<string[]>({\n    value: () => local.expanded,\n    defaultValue: local.defaultExpanded,\n    onChange: (next) => local.onExpandedChange?.(next),\n  });\n  const [selectedIds, setSelectedIds] = createControllableState<string[]>({\n    value: () => local.selected,\n    defaultValue: local.defaultSelected,\n    onChange: (next) => local.onSelectedChange?.(next),\n  });\n\n  const toggleExpanded = (id: string): void =>\n    setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n\n  const setOpen = (id: string, open: boolean): void =>\n    setExpandedIds((prev) => {\n      const has = prev.includes(id);\n      if (open && !has) return [...prev, id];\n      if (!open && has) return prev.filter((x) => x !== id);\n      return prev;\n    });\n\n  const toggleSelected = (id: string): void =>\n    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n\n  const ensureLoaded = (item: ITreeNodeItem, nodeId: string): void => {\n    if (!local.loadChildren || loadedChildren()[nodeId] || (item.children && item.children.length > 0)) return;\n    setLoadingIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]));\n    void local\n      .loadChildren(item, nodeId)\n      .then((children) => setLoadedChildren((prev) => ({ ...prev, [nodeId]: children })))\n      .finally(() => setLoadingIds((prev) => prev.filter((x) => x !== nodeId)));\n  };\n\n  const contextValue: TreeContextValue = {\n    expandedIds,\n    selectedIds,\n    loadedChildren,\n    loadingIds,\n    toggleExpanded,\n    setOpen,\n    toggleSelected,\n    ensureLoaded,\n    get selectable() {\n      return local.selectable;\n    },\n    get checkboxes() {\n      return local.checkboxes;\n    },\n    get nodeIcon() {\n      return local.nodeIcon;\n    },\n    get listIcon() {\n      return local.listIcon;\n    },\n    get renderLabel() {\n      return local.renderLabel;\n    },\n    get hasLoader() {\n      return !!local.loadChildren;\n    },\n  };\n\n  return (\n    <TreeContext.Provider value={contextValue}>\n      <div {...rest} data-testid=\"tree-view\" ref={mergeRefs(local.ref)} role=\"tree\" class={cn(\"smwb-tree\", local.class)}>\n        <For each={local.data}>\n          {(node, idx) => (\n            <div class=\"smwb-tree__wrapper\" role=\"presentation\">\n              <TreeNode item={node} path={`${idx()}`} />\n            </div>\n          )}\n        </For>\n      </div>\n    </TreeContext.Provider>\n  );\n}\n\nexport default TreeView;\n"],"mappings":"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","names":[],"file":"treeView.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/treeView/treeView.entry.less\";\nimport { type Accessor, type JSX, For, Show, createContext, createSignal, mergeProps, splitProps, useContext } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ITreeNodeItem {\n  /** Stable identifier. Falls back to the positional path when omitted. */\n  id?: string;\n  label: string;\n  children?: ITreeNodeItem[];\n  /** Hint that the node is expandable even before its children are loaded. */\n  hasChildren?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  nodeIcon?: { opened?: string; closed?: string };\n  listIcon?: string;\n  data: ITreeNodeItem[];\n  expanded?: string[];\n  defaultExpanded?: string[];\n  onExpandedChange?: (expanded: string[]) => void;\n  selected?: string[];\n  defaultSelected?: string[];\n  /** Reports the full selection plus, for user toggles, the node that just changed. */\n  onSelectedChange?: (selected: string[], changed?: { id: string; selected: boolean }) => void;\n  selectable?: boolean;\n  checkboxes?: boolean;\n  renderLabel?: (item: ITreeNodeItem, nodeId: string) => JSX.Element;\n  loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface TreeContextValue {\n  expandedIds: Accessor<string[]>;\n  selectedIds: Accessor<string[]>;\n  loadedChildren: Accessor<Record<string, ITreeNodeItem[]>>;\n  loadingIds: Accessor<string[]>;\n  toggleExpanded: (id: string) => void;\n  setOpen: (id: string, open: boolean) => void;\n  toggleSelected: (id: string) => void;\n  ensureLoaded: (item: ITreeNodeItem, nodeId: string) => void;\n  selectable: boolean;\n  checkboxes: boolean;\n  nodeIcon: { opened?: string; closed?: string };\n  listIcon: string;\n  renderLabel: ((item: ITreeNodeItem, nodeId: string) => JSX.Element) | undefined;\n  hasLoader: boolean;\n}\n\nconst TreeContext = createContext<TreeContextValue>();\n\nfunction TreeNode(props: { item: ITreeNodeItem; path: string }): JSX.Element {\n  const ctx = useContext(TreeContext)!;\n  const nodeId = (): string => props.item.id ?? props.path;\n  const resolvedChildren = (): ITreeNodeItem[] | undefined => props.item.children ?? ctx.loadedChildren()[nodeId()];\n  const isLazy = (): boolean => ctx.hasLoader && (!!props.item.hasChildren || !!ctx.loadedChildren()[nodeId()]);\n  const hasChildNodes = (): boolean => (!!resolvedChildren() && (resolvedChildren()?.length ?? 0) > 0) || isLazy();\n  const isOpen = (): boolean => ctx.expandedIds().includes(nodeId());\n  const isSelected = (): boolean => ctx.selectedIds().includes(nodeId());\n  const isLoading = (): boolean => ctx.loadingIds().includes(nodeId());\n\n  const onLabelClick = (): void => {\n    if (hasChildNodes()) {\n      if (!isOpen()) ctx.ensureLoaded(props.item, nodeId());\n      ctx.toggleExpanded(nodeId());\n    }\n    if (ctx.selectable) ctx.toggleSelected(nodeId());\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onLabelClick();\n    } else if (event.key === \"ArrowRight\" && hasChildNodes()) {\n      ctx.ensureLoaded(props.item, nodeId());\n      ctx.setOpen(nodeId(), true);\n    } else if (event.key === \"ArrowLeft\" && hasChildNodes()) {\n      ctx.setOpen(nodeId(), false);\n    }\n  };\n\n  return (\n    <div\n      class={cn(\"smwb-tree__node\", { \"smwb-tree__node_selected\": isSelected() })}\n      role=\"treeitem\"\n      aria-expanded={hasChildNodes() ? isOpen() : undefined}\n      aria-selected={ctx.selectable || ctx.checkboxes ? isSelected() : undefined}\n    >\n      <span class=\"smwb-tree__node__content\" onClick={onLabelClick} onKeyDown={onKeyDown} tabindex={0} role=\"button\">\n        <Show when={ctx.checkboxes}>\n          <input\n            type=\"checkbox\"\n            class=\"smwb-tree__node__checkbox\"\n            checked={isSelected()}\n            onClick={(e) => e.stopPropagation()}\n            onChange={() => ctx.toggleSelected(nodeId())}\n            aria-label={props.item.label}\n          />\n        </Show>\n        <span class=\"smwb-tree__node__label\">\n          <Show when={hasChildNodes()} fallback={<Icon name={ctx.listIcon} size={20} />}>\n            <Icon name={isOpen() ? ctx.nodeIcon.opened ?? \"folder_open\" : ctx.nodeIcon.closed ?? \"folder\"} fill={1} size={20} />\n          </Show>\n          {ctx.renderLabel ? ctx.renderLabel(props.item, nodeId()) : props.item.label}\n        </span>\n      </span>\n      <Show when={hasChildNodes() && isOpen()}>\n        <div role=\"group\">\n          <Show\n            when={!(isLoading() && !resolvedChildren())}\n            fallback={\n              <div class=\"smwb-tree__node__loading\" role=\"status\">\n                Загрузка…\n              </div>\n            }\n          >\n            <For each={resolvedChildren() ?? []}>\n              {(child, idx) => <TreeNode item={child} path={`${props.path}.${idx()}`} />}\n            </For>\n          </Show>\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport function TreeView(props: TreeViewProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      listIcon: \"draft\",\n      nodeIcon: { closed: \"folder\", opened: \"folder_open\" } as { opened?: string; closed?: string },\n      data: [] as ITreeNodeItem[],\n      defaultExpanded: [] as string[],\n      defaultSelected: [] as string[],\n      selectable: false,\n      checkboxes: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"listIcon\",\n    \"nodeIcon\",\n    \"data\",\n    \"expanded\",\n    \"defaultExpanded\",\n    \"onExpandedChange\",\n    \"selected\",\n    \"defaultSelected\",\n    \"onSelectedChange\",\n    \"selectable\",\n    \"checkboxes\",\n    \"renderLabel\",\n    \"loadChildren\",\n    \"ref\",\n  ]);\n\n  const [loadedChildren, setLoadedChildren] = createSignal<Record<string, ITreeNodeItem[]>>({});\n  const [loadingIds, setLoadingIds] = createSignal<string[]>([]);\n  const [expandedIds, setExpandedIds] = createControllableState<string[]>({\n    value: () => local.expanded,\n    defaultValue: local.defaultExpanded,\n    onChange: (next) => local.onExpandedChange?.(next),\n  });\n  let lastToggled: { id: string; selected: boolean } | undefined;\n  const [selectedIds, setSelectedIds] = createControllableState<string[]>({\n    value: () => local.selected,\n    defaultValue: local.defaultSelected,\n    onChange: (next) => {\n      // createControllableState calls onChange synchronously from the setter,\n      // so lastToggled still refers to the toggle that caused this change.\n      const changed = lastToggled;\n      lastToggled = undefined;\n      local.onSelectedChange?.(next, changed);\n    },\n  });\n\n  const toggleExpanded = (id: string): void =>\n    setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n\n  const setOpen = (id: string, open: boolean): void =>\n    setExpandedIds((prev) => {\n      const has = prev.includes(id);\n      if (open && !has) return [...prev, id];\n      if (!open && has) return prev.filter((x) => x !== id);\n      return prev;\n    });\n\n  const toggleSelected = (id: string): void => {\n    lastToggled = { id, selected: !selectedIds().includes(id) };\n    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n  };\n\n  const ensureLoaded = (item: ITreeNodeItem, nodeId: string): void => {\n    if (!local.loadChildren || loadedChildren()[nodeId] || (item.children && item.children.length > 0)) return;\n    setLoadingIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]));\n    void local\n      .loadChildren(item, nodeId)\n      .then((children) => setLoadedChildren((prev) => ({ ...prev, [nodeId]: children })))\n      .finally(() => setLoadingIds((prev) => prev.filter((x) => x !== nodeId)));\n  };\n\n  const contextValue: TreeContextValue = {\n    expandedIds,\n    selectedIds,\n    loadedChildren,\n    loadingIds,\n    toggleExpanded,\n    setOpen,\n    toggleSelected,\n    ensureLoaded,\n    get selectable() {\n      return local.selectable;\n    },\n    get checkboxes() {\n      return local.checkboxes;\n    },\n    get nodeIcon() {\n      return local.nodeIcon;\n    },\n    get listIcon() {\n      return local.listIcon;\n    },\n    get renderLabel() {\n      return local.renderLabel;\n    },\n    get hasLoader() {\n      return !!local.loadChildren;\n    },\n  };\n\n  return (\n    <TreeContext.Provider value={contextValue}>\n      <div {...rest} data-testid=\"tree-view\" ref={mergeRefs(local.ref)} role=\"tree\" class={cn(\"smwb-tree\", local.class)}>\n        <For each={local.data}>\n          {(node, idx) => (\n            <div class=\"smwb-tree__wrapper\" role=\"presentation\">\n              <TreeNode item={node} path={`${idx()}`} />\n            </div>\n          )}\n        </For>\n      </div>\n    </TreeContext.Provider>\n  );\n}\n\nexport default TreeView;\n"],"mappings":"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","names":[],"file":"treeView.jsx"}

package/dist/source/components/feedBack/modal/modal.jsx

@@ -4,6 +4,7 @@ import { Dynamic, Portal, isServer } from "solid-js/web";
 import cn from "clsx";
 import { createCssTransition } from "../../../primitives/createCssTransition";
 import { createFocusTrap } from "../../../primitives/createFocusTrap";
+import { isTopOverlayLayer } from "../../../primitives/overlayLayer";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 const OVERLAY_CLASSNAMES = {
   appear: "smwb-modal__overlay-appear",
@@ -45,6 +46,7 @@ function ModalBase(props) {
     "ref"
   ]);
   let contentEl;
+  let overlayEl;
   const transition = createCssTransition({
     in: () => local.open,
     timeout: { appear: 225, enter: 225, exit: 150 },
@@ -55,7 +57,7 @@ function ModalBase(props) {
   createEffect(() => {
     if (!local.open || !local.closeOnEsc || !local.onClose) return;
     const onKeyDown = (event) => {
-      if (event.key === "Escape") local.onClose?.();
+      if (event.key === "Escape" && isTopOverlayLayer(overlayEl)) local.onClose?.();
     };
     document.addEventListener("keydown", onKeyDown);
     onCleanup(() => document.removeEventListener("keydown", onKeyDown));
@@ -63,6 +65,8 @@ function ModalBase(props) {
   return <Show when={transition.mounted()}>
       <Portal mount={isServer ? void 0 : document.body}>
         <div
+    ref={(el) => overlayEl = el}
+    data-smwb-overlay-layer
     class={cn("smwb-modal__overlay", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}
     onClick={local.closeOnOutsideClick && local.onClose ? () => local.onClose?.() : void 0}
   >

package/dist/source/components/feedBack/modal/modal.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/modal/modal.entry.less\";\nimport { type JSX, type ParentProps, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Dynamic, Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createFocusTrap } from \"../../../primitives/createFocusTrap\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  class?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst OVERLAY_CLASSNAMES = {\n  appear: \"smwb-modal__overlay-appear\",\n  appearActive: \"smwb-modal__overlay-appear-active\",\n  appearDone: \"smwb-modal__overlay-appear-done\",\n  enter: \"smwb-modal__overlay-enter\",\n  enterActive: \"smwb-modal__overlay-enter-active\",\n  enterDone: \"smwb-modal__overlay-enter-done\",\n  exit: \"smwb-modal__overlay-exit\",\n  exitActive: \"smwb-modal__overlay-exit-active\",\n};\n\nfunction ModalBase(props: ParentProps<ModalProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      animation: \"fade\" as const,\n      backdrop: \"dark\" as const,\n      size: \"large\" as const,\n      closeOnOutsideClick: true,\n      asForm: false,\n      disableAppearAnimation: false,\n      role: \"dialog\" as const,\n      closeOnEsc: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"onClose\",\n    \"open\",\n    \"class\",\n    \"animation\",\n    \"backdrop\",\n    \"size\",\n    \"closeOnOutsideClick\",\n    \"asForm\",\n    \"disableAppearAnimation\",\n    \"role\",\n    \"closeOnEsc\",\n    \"ref\",\n  ]);\n\n  let contentEl: HTMLDivElement | undefined;\n\n  const transition = createCssTransition({\n    in: () => local.open,\n    timeout: { appear: 225, enter: 225, exit: 150 },\n    classNames: OVERLAY_CLASSNAMES,\n    appear: !local.disableAppearAnimation,\n  });\n\n  createFocusTrap({ active: () => local.open && transition.mounted(), container: () => contentEl });\n\n  createEffect(() => {\n    if (!local.open || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div\n          class={cn(\"smwb-modal__overlay\", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}\n          onClick={local.closeOnOutsideClick && local.onClose ? () => local.onClose?.() : undefined}\n        >\n          <Dynamic\n            component={local.asForm ? \"form\" : \"div\"}\n            {...rest}\n            ref={mergeRefs(local.ref, (el) => (contentEl = el as HTMLDivElement))}\n            class={cn(\"smwb-modal\", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}\n            onClick={(event: MouseEvent) => event.stopPropagation()}\n            role={local.role}\n            aria-modal=\"true\"\n          >\n            {local.children}\n          </Dynamic>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport interface ModalSlotProps {\n  class?: string;\n}\n\nexport function Header(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__header\", props.class)}>{props.children}</div>;\n}\n\nexport function Content(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__content\", props.class)}>{props.children}</div>;\n}\n\nexport function Footer(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__footer\", props.class)}>{props.children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, { Footer, Header, Content });\n\nexport default Modal;\n"],"mappings":"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","names":[],"file":"modal.jsx"}
+{"version":3,"sources":["../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/modal/modal.entry.less\";\nimport { type JSX, type ParentProps, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Dynamic, Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createFocusTrap } from \"../../../primitives/createFocusTrap\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  class?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst OVERLAY_CLASSNAMES = {\n  appear: \"smwb-modal__overlay-appear\",\n  appearActive: \"smwb-modal__overlay-appear-active\",\n  appearDone: \"smwb-modal__overlay-appear-done\",\n  enter: \"smwb-modal__overlay-enter\",\n  enterActive: \"smwb-modal__overlay-enter-active\",\n  enterDone: \"smwb-modal__overlay-enter-done\",\n  exit: \"smwb-modal__overlay-exit\",\n  exitActive: \"smwb-modal__overlay-exit-active\",\n};\n\nfunction ModalBase(props: ParentProps<ModalProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      animation: \"fade\" as const,\n      backdrop: \"dark\" as const,\n      size: \"large\" as const,\n      closeOnOutsideClick: true,\n      asForm: false,\n      disableAppearAnimation: false,\n      role: \"dialog\" as const,\n      closeOnEsc: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"onClose\",\n    \"open\",\n    \"class\",\n    \"animation\",\n    \"backdrop\",\n    \"size\",\n    \"closeOnOutsideClick\",\n    \"asForm\",\n    \"disableAppearAnimation\",\n    \"role\",\n    \"closeOnEsc\",\n    \"ref\",\n  ]);\n\n  let contentEl: HTMLDivElement | undefined;\n  let overlayEl: HTMLDivElement | undefined;\n\n  const transition = createCssTransition({\n    in: () => local.open,\n    timeout: { appear: 225, enter: 225, exit: 150 },\n    classNames: OVERLAY_CLASSNAMES,\n    appear: !local.disableAppearAnimation,\n  });\n\n  createFocusTrap({ active: () => local.open && transition.mounted(), container: () => contentEl });\n\n  createEffect(() => {\n    if (!local.open || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // Only the topmost overlay layer reacts to Escape.\n      if (event.key === \"Escape\" && isTopOverlayLayer(overlayEl)) local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div\n          ref={(el) => (overlayEl = el)}\n          data-smwb-overlay-layer\n          class={cn(\"smwb-modal__overlay\", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}\n          onClick={local.closeOnOutsideClick && local.onClose ? () => local.onClose?.() : undefined}\n        >\n          <Dynamic\n            component={local.asForm ? \"form\" : \"div\"}\n            {...rest}\n            ref={mergeRefs(local.ref, (el) => (contentEl = el as HTMLDivElement))}\n            class={cn(\"smwb-modal\", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}\n            onClick={(event: MouseEvent) => event.stopPropagation()}\n            role={local.role}\n            aria-modal=\"true\"\n          >\n            {local.children}\n          </Dynamic>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport interface ModalSlotProps {\n  class?: string;\n}\n\nexport function Header(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__header\", props.class)}>{props.children}</div>;\n}\n\nexport function Content(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__content\", props.class)}>{props.children}</div>;\n}\n\nexport function Footer(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__footer\", props.class)}>{props.children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, { Footer, Header, Content });\n\nexport default Modal;\n"],"mappings":"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","names":[],"file":"modal.jsx"}

package/dist/source/components/inputs/datePicker/datePicker.jsx

@@ -212,6 +212,7 @@ function DatePicker(props) {
       opacity: shown() ? 1 : 0
     }}
     data-testid="date-picker"
+    data-smwb-overlay-layer
     role="dialog"
     aria-modal="false"
     aria-label={local.calendarAriaLabel ?? "Choose date"}

package/dist/source/components/inputs/datePicker/datePicker.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePicker.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/datePicker/dataPicker.entry.less\";\nimport { type JSX, Show, createEffect, createMemo, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { TextField, type TextFieldProps } from \"../textField\";\nimport { DataPickerHeader } from \"./dataPickerHeader\";\nimport { DataPickerDays } from \"./dataPickerDays\";\nimport { DatePickerList } from \"./datePickerList\";\nimport { DataPickerInput } from \"./dataPickerInput\";\nimport { DatePickerIconButton } from \"./datePickerIconButton\";\nimport { OpenView } from \"./openView\";\nimport {\n  type WeekStart,\n  getDisplayDate,\n  getMonths,\n  getYears,\n  isValidDate,\n  setMonth,\n  setYear,\n} from \"./dateUtils\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport { OpenView } from \"./openView\";\n\nexport interface DatePickerProps\n  extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n  showDaysOutsideMonth?: boolean | undefined;\n  disablePast?: boolean | undefined;\n  disableFuture?: boolean | undefined;\n  /** Earliest selectable date (inclusive). */\n  minDate?: Date | undefined;\n  /** Latest selectable date (inclusive). */\n  maxDate?: Date | undefined;\n  /** Predicate to disable arbitrary days. */\n  isDateDisabled?: ((day: Date) => boolean) | undefined;\n  weekStartsOn?: WeekStart | undefined;\n  /** BCP-47 locale for calendar labels (day/month/year names). */\n  locale?: string | undefined;\n  /** Input format pattern with tokens dd, MM, yyyy, e.g. \"dd/MM/yyyy\". */\n  format?: string | undefined;\n  /** Enables date-range selection. */\n  range?: boolean | undefined;\n  /** Controlled range value `[start, end]`. */\n  rangeValue?: [Date | undefined, Date | undefined] | undefined;\n  /** Called when the range changes. */\n  onRangeChange?: ((range: [Date | undefined, Date | undefined]) => void) | undefined;\n  placement?: Placement | undefined;\n  disableCalendar?: boolean | undefined;\n  label?: string | undefined;\n  /** Accessible label for the calendar popup dialog. */\n  calendarAriaLabel?: string | undefined;\n  value?: Date | string | undefined;\n  calendarIcon?: JSX.Element;\n  onChange?: ((event?: Event, value?: Date, data?: DatePickerProps) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date, data?: DatePickerProps) => void) | undefined;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function DatePicker(props: DatePickerProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onChange\",\n    \"showDaysOutsideMonth\",\n    \"disablePast\",\n    \"disableFuture\",\n    \"weekStartsOn\",\n    \"placement\",\n    \"disabled\",\n    \"disableCalendar\",\n    \"calendarAriaLabel\",\n    \"minDate\",\n    \"maxDate\",\n    \"isDateDisabled\",\n    \"locale\",\n    \"format\",\n    \"range\",\n    \"rangeValue\",\n    \"onRangeChange\",\n    \"calendarIcon\",\n    \"onBlur\",\n    \"ref\",\n  ]);\n\n  const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n  const isRangeControlled = (): boolean => local.rangeValue !== undefined;\n  const [rangeState, setRangeState] = createSignal<[Date | undefined, Date | undefined]>([undefined, undefined]);\n  const currentRange = (): [Date | undefined, Date | undefined] =>\n    isRangeControlled() && local.rangeValue ? local.rangeValue : rangeState();\n\n  const initialValue = value();\n  const [viewValue, setViewValue] = createSignal<Date>(isValidDate(initialValue) ? initialValue : new Date());\n  const [openView, setOpenView] = createSignal<OpenView>(OpenView.days);\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  let anchorEl: HTMLElement | undefined;\n  let calendarEl: HTMLElement | undefined;\n\n  const resolved = (): ReturnType<typeof resolvePlacement> => resolvePlacement(local.placement ?? \"bottom-start\");\n  const floating = createFloating({\n    placement: () => resolved().placement,\n    middleware: () => buildFloatingMiddleware(resolved()),\n  });\n\n  createEffect(() => {\n    if (local.disabled) return;\n    const v = value();\n    setViewValue(isValidDate(v) ? v : new Date());\n  });\n\n  const weekStartsOn = (): WeekStart => local.weekStartsOn ?? 1;\n\n  const onViewValueChange = (v: Date): void => {\n    setViewValue(v);\n  };\n\n  const onMonthLabelClick = (): void => {\n    setOpenView(openView() === OpenView.months ? OpenView.days : OpenView.months);\n  };\n\n  const onYearLabelClick = (): void => {\n    setOpenView(openView() === OpenView.years ? OpenView.days : OpenView.years);\n  };\n\n  const onMonthChange = (month: number): void => {\n    setViewValue(setMonth(viewValue(), month));\n    setOpenView(OpenView.days);\n  };\n\n  const onYearChange = (year: number): void => {\n    setViewValue(setYear(viewValue(), year));\n    setOpenView(OpenView.days);\n  };\n\n  const onChange = (event?: Event, date?: Date): void => {\n    if (local.range) {\n      if (!date) return;\n      const [start, end] = currentRange();\n      let next: [Date | undefined, Date | undefined];\n      if (!start || (start && end)) {\n        next = [date, undefined];\n      } else {\n        next = isValidDate(start) && date.getTime() < start.getTime() ? [date, start] : [start, date];\n      }\n      if (!isRangeControlled()) setRangeState(next);\n      local.onRangeChange?.(next);\n      if (next[0] && next[1]) setIsOpen(false);\n      return;\n    }\n    local.onChange?.(event, date, props);\n    setIsOpen(false);\n  };\n\n  const onToggle = (): void => {\n    if (!local.disabled) setIsOpen((prev) => !prev);\n  };\n\n  const onClickAway = (event: MouseEvent | TouchEvent): void => {\n    const target = event.target as HTMLElement;\n    if (calendarEl?.contains(target) || anchorEl?.contains(target)) return;\n    setIsOpen(false);\n  };\n\n  const months = createMemo(() => getMonths(local.locale));\n  const years = getYears(new Date().getFullYear(), 100);\n\n  const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableCalendar;\n  const [mounted, setMounted] = createSignal(shouldOpen());\n  const [shown, setShown] = createSignal(false);\n  let raf: number | undefined;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  createEffect(() => {\n    if (shouldOpen()) {\n      if (timer !== undefined) clearTimeout(timer);\n      setMounted(true);\n      raf = requestAnimationFrame(() => setShown(true));\n    } else {\n      setShown(false);\n      if (mounted()) timer = setTimeout(() => setMounted(false), FADE_MS);\n    }\n  });\n  onCleanup(() => {\n    if (raf !== undefined) cancelAnimationFrame(raf);\n    if (timer !== undefined) clearTimeout(timer);\n  });\n\n  const view = (): JSX.Element => {\n    switch (openView()) {\n      case OpenView.months:\n        return <DatePickerList value={viewValue().getMonth()} items={months()} onChange={onMonthChange} />;\n      case OpenView.years:\n        return <DatePickerList value={viewValue().getFullYear()} items={years} onChange={onYearChange} />;\n      default:\n        return (\n          <DataPickerDays\n            viewValue={viewValue()}\n            value={value()}\n            showDaysOutsideMonth={local.showDaysOutsideMonth}\n            onChange={onChange}\n            disablePast={local.disablePast}\n            disableFuture={local.disableFuture}\n            weekStartsOn={weekStartsOn()}\n            minDate={local.minDate}\n            maxDate={local.maxDate}\n            isDateDisabled={local.isDateDisabled}\n            locale={local.locale}\n            range={local.range}\n            rangeStart={currentRange()[0]}\n            rangeEnd={currentRange()[1]}\n          />\n        );\n    }\n  };\n\n  const rangeDisplay = (): string =>\n    local.range && (currentRange()[0] || currentRange()[1])\n      ? `${getDisplayDate(currentRange()[0], local.format)} – ${getDisplayDate(currentRange()[1], local.format)}`\n      : \"\";\n\n  const anchorRef = mergeRefs(local.ref, floating.setReference, (el) => (anchorEl = el as HTMLElement));\n\n  return (\n    <>\n      <Show\n        when={local.range}\n        fallback={\n          <DataPickerInput\n            ref={anchorRef}\n            value={local.value}\n            onChange={local.onChange}\n            onBlur={local.onBlur}\n            onToggle={onToggle}\n            disabled={local.disabled}\n            disableCalendar={local.disableCalendar}\n            format={local.format}\n            calendarIcon={local.calendarIcon}\n            {...rest}\n          />\n        }\n      >\n        <TextField\n          ref={anchorRef}\n          value={rangeDisplay()}\n          readOnly\n          onChange={() => undefined}\n          disabled={Boolean(local.disabled)}\n          {...(local.format ? { placeholder: `${local.format} – ${local.format}` } : {})}\n          endAdornment={\n            <Show when={!local.disableCalendar}>\n              <DatePickerIconButton\n                edge=\"end\"\n                onClick={onToggle}\n                disabled={Boolean(local.disabled)}\n                data-testid=\"date-picker-icon-button\"\n              >\n                <Show\n                  when={local.calendarIcon}\n                  fallback={<Icon name=\"calendar_today\" fill={1} weight={500} size={24} />}\n                >\n                  {local.calendarIcon}\n                </Show>\n              </DatePickerIconButton>\n            </Show>\n          }\n          {...rest}\n        />\n      </Show>\n      <Show when={mounted()}>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>\n          <ClickAwayListener onClickAway={onClickAway}>\n            <div\n              ref={mergeRefs(floating.setFloating, (el) => (calendarEl = el as HTMLElement))}\n              class=\"smwb-date-picker\"\n              style={{\n                ...floating.floatingStyles(),\n                transition: `opacity ${FADE_MS}ms ease-in-out`,\n                opacity: shown() ? 1 : 0,\n              }}\n              data-testid=\"date-picker\"\n              role=\"dialog\"\n              aria-modal=\"false\"\n              aria-label={local.calendarAriaLabel ?? \"Choose date\"}\n            >\n              <div class=\"smwb-date-picker__inner\">\n                <DataPickerHeader\n                  viewValue={viewValue()}\n                  locale={local.locale}\n                  openView={openView()}\n                  onChange={onViewValueChange}\n                  onMonthLabelClick={onMonthLabelClick}\n                  onYearLabelClick={onYearLabelClick}\n                />\n                <div class=\"smwb-date-picker__body\">{view()}</div>\n              </div>\n            </div>\n          </ClickAwayListener>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport default DatePicker;\n"],"mappings":"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","names":["OpenView"],"file":"datePicker.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePicker.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/datePicker/dataPicker.entry.less\";\nimport { type JSX, Show, createEffect, createMemo, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { TextField, type TextFieldProps } from \"../textField\";\nimport { DataPickerHeader } from \"./dataPickerHeader\";\nimport { DataPickerDays } from \"./dataPickerDays\";\nimport { DatePickerList } from \"./datePickerList\";\nimport { DataPickerInput } from \"./dataPickerInput\";\nimport { DatePickerIconButton } from \"./datePickerIconButton\";\nimport { OpenView } from \"./openView\";\nimport {\n  type WeekStart,\n  getDisplayDate,\n  getMonths,\n  getYears,\n  isValidDate,\n  setMonth,\n  setYear,\n} from \"./dateUtils\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport { OpenView } from \"./openView\";\n\nexport interface DatePickerProps\n  extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n  showDaysOutsideMonth?: boolean | undefined;\n  disablePast?: boolean | undefined;\n  disableFuture?: boolean | undefined;\n  /** Earliest selectable date (inclusive). */\n  minDate?: Date | undefined;\n  /** Latest selectable date (inclusive). */\n  maxDate?: Date | undefined;\n  /** Predicate to disable arbitrary days. */\n  isDateDisabled?: ((day: Date) => boolean) | undefined;\n  weekStartsOn?: WeekStart | undefined;\n  /** BCP-47 locale for calendar labels (day/month/year names). */\n  locale?: string | undefined;\n  /** Input format pattern with tokens dd, MM, yyyy, e.g. \"dd/MM/yyyy\". */\n  format?: string | undefined;\n  /** Enables date-range selection. */\n  range?: boolean | undefined;\n  /** Controlled range value `[start, end]`. */\n  rangeValue?: [Date | undefined, Date | undefined] | undefined;\n  /** Called when the range changes. */\n  onRangeChange?: ((range: [Date | undefined, Date | undefined]) => void) | undefined;\n  placement?: Placement | undefined;\n  disableCalendar?: boolean | undefined;\n  label?: string | undefined;\n  /** Accessible label for the calendar popup dialog. */\n  calendarAriaLabel?: string | undefined;\n  value?: Date | string | undefined;\n  calendarIcon?: JSX.Element;\n  onChange?: ((event?: Event, value?: Date, data?: DatePickerProps) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date, data?: DatePickerProps) => void) | undefined;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function DatePicker(props: DatePickerProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onChange\",\n    \"showDaysOutsideMonth\",\n    \"disablePast\",\n    \"disableFuture\",\n    \"weekStartsOn\",\n    \"placement\",\n    \"disabled\",\n    \"disableCalendar\",\n    \"calendarAriaLabel\",\n    \"minDate\",\n    \"maxDate\",\n    \"isDateDisabled\",\n    \"locale\",\n    \"format\",\n    \"range\",\n    \"rangeValue\",\n    \"onRangeChange\",\n    \"calendarIcon\",\n    \"onBlur\",\n    \"ref\",\n  ]);\n\n  const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n  const isRangeControlled = (): boolean => local.rangeValue !== undefined;\n  const [rangeState, setRangeState] = createSignal<[Date | undefined, Date | undefined]>([undefined, undefined]);\n  const currentRange = (): [Date | undefined, Date | undefined] =>\n    isRangeControlled() && local.rangeValue ? local.rangeValue : rangeState();\n\n  const initialValue = value();\n  const [viewValue, setViewValue] = createSignal<Date>(isValidDate(initialValue) ? initialValue : new Date());\n  const [openView, setOpenView] = createSignal<OpenView>(OpenView.days);\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  let anchorEl: HTMLElement | undefined;\n  let calendarEl: HTMLElement | undefined;\n\n  const resolved = (): ReturnType<typeof resolvePlacement> => resolvePlacement(local.placement ?? \"bottom-start\");\n  const floating = createFloating({\n    placement: () => resolved().placement,\n    middleware: () => buildFloatingMiddleware(resolved()),\n  });\n\n  createEffect(() => {\n    if (local.disabled) return;\n    const v = value();\n    setViewValue(isValidDate(v) ? v : new Date());\n  });\n\n  const weekStartsOn = (): WeekStart => local.weekStartsOn ?? 1;\n\n  const onViewValueChange = (v: Date): void => {\n    setViewValue(v);\n  };\n\n  const onMonthLabelClick = (): void => {\n    setOpenView(openView() === OpenView.months ? OpenView.days : OpenView.months);\n  };\n\n  const onYearLabelClick = (): void => {\n    setOpenView(openView() === OpenView.years ? OpenView.days : OpenView.years);\n  };\n\n  const onMonthChange = (month: number): void => {\n    setViewValue(setMonth(viewValue(), month));\n    setOpenView(OpenView.days);\n  };\n\n  const onYearChange = (year: number): void => {\n    setViewValue(setYear(viewValue(), year));\n    setOpenView(OpenView.days);\n  };\n\n  const onChange = (event?: Event, date?: Date): void => {\n    if (local.range) {\n      if (!date) return;\n      const [start, end] = currentRange();\n      let next: [Date | undefined, Date | undefined];\n      if (!start || (start && end)) {\n        next = [date, undefined];\n      } else {\n        next = isValidDate(start) && date.getTime() < start.getTime() ? [date, start] : [start, date];\n      }\n      if (!isRangeControlled()) setRangeState(next);\n      local.onRangeChange?.(next);\n      if (next[0] && next[1]) setIsOpen(false);\n      return;\n    }\n    local.onChange?.(event, date, props);\n    setIsOpen(false);\n  };\n\n  const onToggle = (): void => {\n    if (!local.disabled) setIsOpen((prev) => !prev);\n  };\n\n  const onClickAway = (event: MouseEvent | TouchEvent): void => {\n    const target = event.target as HTMLElement;\n    if (calendarEl?.contains(target) || anchorEl?.contains(target)) return;\n    setIsOpen(false);\n  };\n\n  const months = createMemo(() => getMonths(local.locale));\n  const years = getYears(new Date().getFullYear(), 100);\n\n  const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableCalendar;\n  const [mounted, setMounted] = createSignal(shouldOpen());\n  const [shown, setShown] = createSignal(false);\n  let raf: number | undefined;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  createEffect(() => {\n    if (shouldOpen()) {\n      if (timer !== undefined) clearTimeout(timer);\n      setMounted(true);\n      raf = requestAnimationFrame(() => setShown(true));\n    } else {\n      setShown(false);\n      if (mounted()) timer = setTimeout(() => setMounted(false), FADE_MS);\n    }\n  });\n  onCleanup(() => {\n    if (raf !== undefined) cancelAnimationFrame(raf);\n    if (timer !== undefined) clearTimeout(timer);\n  });\n\n  const view = (): JSX.Element => {\n    switch (openView()) {\n      case OpenView.months:\n        return <DatePickerList value={viewValue().getMonth()} items={months()} onChange={onMonthChange} />;\n      case OpenView.years:\n        return <DatePickerList value={viewValue().getFullYear()} items={years} onChange={onYearChange} />;\n      default:\n        return (\n          <DataPickerDays\n            viewValue={viewValue()}\n            value={value()}\n            showDaysOutsideMonth={local.showDaysOutsideMonth}\n            onChange={onChange}\n            disablePast={local.disablePast}\n            disableFuture={local.disableFuture}\n            weekStartsOn={weekStartsOn()}\n            minDate={local.minDate}\n            maxDate={local.maxDate}\n            isDateDisabled={local.isDateDisabled}\n            locale={local.locale}\n            range={local.range}\n            rangeStart={currentRange()[0]}\n            rangeEnd={currentRange()[1]}\n          />\n        );\n    }\n  };\n\n  const rangeDisplay = (): string =>\n    local.range && (currentRange()[0] || currentRange()[1])\n      ? `${getDisplayDate(currentRange()[0], local.format)} – ${getDisplayDate(currentRange()[1], local.format)}`\n      : \"\";\n\n  const anchorRef = mergeRefs(local.ref, floating.setReference, (el) => (anchorEl = el as HTMLElement));\n\n  return (\n    <>\n      <Show\n        when={local.range}\n        fallback={\n          <DataPickerInput\n            ref={anchorRef}\n            value={local.value}\n            onChange={local.onChange}\n            onBlur={local.onBlur}\n            onToggle={onToggle}\n            disabled={local.disabled}\n            disableCalendar={local.disableCalendar}\n            format={local.format}\n            calendarIcon={local.calendarIcon}\n            {...rest}\n          />\n        }\n      >\n        <TextField\n          ref={anchorRef}\n          value={rangeDisplay()}\n          readOnly\n          onChange={() => undefined}\n          disabled={Boolean(local.disabled)}\n          {...(local.format ? { placeholder: `${local.format} – ${local.format}` } : {})}\n          endAdornment={\n            <Show when={!local.disableCalendar}>\n              <DatePickerIconButton\n                edge=\"end\"\n                onClick={onToggle}\n                disabled={Boolean(local.disabled)}\n                data-testid=\"date-picker-icon-button\"\n              >\n                <Show\n                  when={local.calendarIcon}\n                  fallback={<Icon name=\"calendar_today\" fill={1} weight={500} size={24} />}\n                >\n                  {local.calendarIcon}\n                </Show>\n              </DatePickerIconButton>\n            </Show>\n          }\n          {...rest}\n        />\n      </Show>\n      <Show when={mounted()}>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>\n          <ClickAwayListener onClickAway={onClickAway}>\n            <div\n              ref={mergeRefs(floating.setFloating, (el) => (calendarEl = el as HTMLElement))}\n              class=\"smwb-date-picker\"\n              style={{\n                ...floating.floatingStyles(),\n                transition: `opacity ${FADE_MS}ms ease-in-out`,\n                opacity: shown() ? 1 : 0,\n              }}\n              data-testid=\"date-picker\"\n              data-smwb-overlay-layer\n              role=\"dialog\"\n              aria-modal=\"false\"\n              aria-label={local.calendarAriaLabel ?? \"Choose date\"}\n            >\n              <div class=\"smwb-date-picker__inner\">\n                <DataPickerHeader\n                  viewValue={viewValue()}\n                  locale={local.locale}\n                  openView={openView()}\n                  onChange={onViewValueChange}\n                  onMonthLabelClick={onMonthLabelClick}\n                  onYearLabelClick={onYearLabelClick}\n                />\n                <div class=\"smwb-date-picker__body\">{view()}</div>\n              </div>\n            </div>\n          </ClickAwayListener>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport default DatePicker;\n"],"mappings":"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","names":["OpenView"],"file":"datePicker.jsx"}

package/dist/source/components/inputs/dateTimePicker/dateTimePicker.jsx

@@ -168,6 +168,7 @@ function DateTimePicker(props) {
       opacity: shown() ? 1 : 0
     }}
     data-testid="date-time-picker"
+    data-smwb-overlay-layer
     role="dialog"
     aria-modal="false"
     aria-label={local.calendarAriaLabel ?? "Choose date and time"}