@smwb/ui-solid 0.12.1 → 0.13.0

package/dist/components/inputs/textField/textFieldWrapper.js

@@ -1,16 +1,20 @@
-import { spread as T, mergeProps as k, insert as l, createComponent as r, effect as _, className as v, setAttribute as C, memo as m, addEventListener as S, template as d, delegateEvents as W } from "solid-js/web";
-import { splitProps as D, children as u, Show as s } from "solid-js";
-import c from "clsx";
-import { TextFieldAdornment as x } from "./textFieldAdornment.js";
-var E = /* @__PURE__ */ d("<label>"), H = /* @__PURE__ */ d("<span>"), M = /* @__PURE__ */ d("<fieldset><legend>"), N = /* @__PURE__ */ d("<p class=smwb-text-field__helper-line><span class=smwb-text-field__helper-text>"), P = /* @__PURE__ */ d("<div><div class=smwb-text-field__input-holder>"), B = /* @__PURE__ */ d("<span class=smwb-notranslate>&#8203;");
-function y(g) {
-  const [e, $] = D(g, ["label", "helperText", "variant", "disabled", "class", "error", "fullWidth", "isFilledState", "isFocused", "for", "shrink", "children", "onHolderMouseDown", "startAdornment", "endAdornment", "inline"]), A = u(() => e.inline ? void 0 : e.helperText), h = u(() => e.startAdornment), f = u(() => e.endAdornment), b = () => A() ?? " ", F = () => e.variant === "filled", w = () => !!e.label && (!!e.isFilledState || !!e.isFocused || !!e.shrink);
+import { spread as C, mergeProps as I, insert as r, createComponent as n, effect as c, setAttribute as u, className as $, memo as h, template as o, delegateEvents as D } from "solid-js/web";
+import { splitProps as M, children as f, Show as s } from "solid-js";
+import b from "clsx";
+import { TextFieldAdornment as A } from "./textFieldAdornment.js";
+import { hasHelperText as S } from "../../../primitives/createHelperText.js";
+import { callHandler as W } from "../../../primitives/callHandler.js";
+var N = /* @__PURE__ */ o("<label>"), P = /* @__PURE__ */ o("<span>"), B = /* @__PURE__ */ o("<fieldset><legend>"), E = /* @__PURE__ */ o("<p class=smwb-text-field__helper-line><span class=smwb-text-field__helper-text>"), V = /* @__PURE__ */ o("<div><div class=smwb-text-field__input-holder>"), j = /* @__PURE__ */ o("<span class=smwb-notranslate>&#8203;");
+function L(F) {
+  const [e, T] = M(F, ["label", "helperText", "helperTextId", "variant", "disabled", "class", "error", "fullWidth", "isFilledState", "isFocused", "for", "labelId", "shrink", "children", "onHolderMouseDown", "startAdornment", "endAdornment", "inline", "data-testid"]), m = f(() => e.inline ? void 0 : e.helperText), p = f(() => e.startAdornment), w = f(() => e.endAdornment), _ = () => m() === void 0 ? " " : m(), H = () => e.variant === "filled", v = () => !!e.label && (!!e.isFilledState || !!e.isFocused || !!e.shrink), k = (i) => {
+    W(e.onHolderMouseDown, i);
+  };
   return (() => {
-    var o = P(), i = o.firstChild;
-    return T(o, k($, {
+    var i = V(), d = i.firstChild;
+    return C(i, I(T, {
       get class() {
-        return c(e.class, "smwb-text-field", {
-          "smwb-text-field--filled": !e.inline && F(),
+        return b(e.class, "smwb-text-field", {
+          "smwb-text-field--filled": !e.inline && H(),
           "smwb-text-field--inline": e.inline,
           "smwb-text-field--focused": !e.inline && e.isFocused,
           "smwb-text-field--error": e.error,
@@ -18,29 +22,32 @@ function y(g) {
           "smwb-text-field--full-width": e.fullWidth
         });
       },
-      "data-testid": "text-field"
-    }), !1, !0), l(o, r(s, {
+      get "data-testid"() {
+        return e["data-testid"] ?? "text-field";
+      }
+    }), !1, !0), r(i, n(s, {
       get when() {
-        return m(() => !e.inline)() && e.label;
+        return h(() => !e.inline)() && e.label;
       },
       get children() {
-        var t = E();
-        return l(t, () => e.label), _((n) => {
-          var a = c("smwb-text-field__label", {
-            "smwb-text-field__label--shrink": w()
-          }), p = e.for || "";
-          return a !== n.e && v(t, n.e = a), p !== n.t && C(t, "for", n.t = p), n;
+        var t = N();
+        return r(t, () => e.label), c((l) => {
+          var a = e.labelId, x = b("smwb-text-field__label", {
+            "smwb-text-field__label--shrink": v()
+          }), g = e.for;
+          return a !== l.e && u(t, "id", l.e = a), x !== l.t && $(t, l.t = x), g !== l.a && u(t, "for", l.a = g), l;
         }, {
           e: void 0,
-          t: void 0
+          t: void 0,
+          a: void 0
         }), t;
       }
-    }), i), S(i, "mousedown", e.onHolderMouseDown, !0), l(i, r(s, {
+    }), d), d.$$mousedown = k, r(d, n(s, {
       get when() {
-        return h();
+        return p();
       },
       get children() {
-        return r(x, {
+        return n(A, {
           get variant() {
             return e.variant;
           },
@@ -49,57 +56,57 @@ function y(g) {
           },
           position: "start",
           get children() {
-            return h();
+            return p();
           }
         });
       }
-    }), null), l(i, () => e.children, null), l(i, r(s, {
+    }), null), r(d, () => e.children, null), r(d, n(s, {
       get when() {
-        return f();
+        return w();
       },
       get children() {
-        return r(x, {
+        return n(A, {
           position: "end",
           get children() {
-            return f();
+            return w();
           }
         });
       }
-    }), null), l(i, r(s, {
+    }), null), r(d, n(s, {
       get when() {
-        return m(() => !e.inline)() && e.variant === "outlined";
+        return h(() => !e.inline)() && e.variant === "outlined";
       },
       get children() {
-        var t = M(), n = t.firstChild;
-        return l(n, r(s, {
+        var t = B(), l = t.firstChild;
+        return r(l, n(s, {
           get when() {
             return e.label;
           },
           get fallback() {
-            return B();
+            return j();
           },
           get children() {
-            var a = H();
-            return l(a, () => e.label), a;
+            var a = P();
+            return r(a, () => e.label), a;
           }
-        })), _(() => v(t, c("smwb-text-field__notched", {
+        })), c(() => $(t, b("smwb-text-field__notched", {
           "smwb-text-field__notched--with-label": e.label,
-          "smwb-text-field__notched--active": w()
+          "smwb-text-field__notched--active": v()
         }))), t;
       }
-    }), null), l(o, r(s, {
+    }), null), r(i, n(s, {
       get when() {
-        return m(() => !e.inline)() && b();
+        return h(() => !e.inline)() && _();
       },
       get children() {
-        var t = N(), n = t.firstChild;
-        return l(n, b), t;
+        var t = E(), l = t.firstChild;
+        return r(l, _), c(() => u(l, "id", S(m(), e.inline) ? e.helperTextId : void 0)), t;
       }
-    }), null), o;
+    }), null), i;
   })();
 }
-W(["mousedown"]);
+D(["mousedown"]);
 export {
-  y as TextFieldWrapper
+  L as TextFieldWrapper
 };
 //# sourceMappingURL=textFieldWrapper.js.map

package/dist/components/inputs/textField/textFieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"textFieldWrapper.js","sources":["../../../../src/components/inputs/textField/textFieldWrapper.tsx"],"sourcesContent":["import { type JSX, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldAdornment } from \"./textFieldAdornment\";\nimport type { TextFieldVariant } from \"./types\";\n\nexport interface TextFieldWrapperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  variant?: TextFieldVariant | undefined;\n  disabled?: boolean | undefined;\n  error?: boolean | undefined;\n  fullWidth?: boolean | undefined;\n  isFilledState?: boolean | undefined;\n  isFocused?: boolean | undefined;\n  for?: string | undefined;\n  shrink?: boolean | undefined;\n  onHolderMouseDown?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  inline?: boolean | undefined;\n  children?: JSX.Element;\n}\n\nexport function TextFieldWrapper(props: TextFieldWrapperProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"label\",\n    \"helperText\",\n    \"variant\",\n    \"disabled\",\n    \"class\",\n    \"error\",\n    \"fullWidth\",\n    \"isFilledState\",\n    \"isFocused\",\n    \"for\",\n    \"shrink\",\n    \"children\",\n    \"onHolderMouseDown\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  // The helper text is read only where it is drawn: not for an inline field.\n  const helper = children(() => (local.inline ? undefined : local.helperText));\n  const startAdornment = children(() => local.startAdornment);\n  const endAdornment = children(() => local.endAdornment);\n  const helperText = (): JSX.Element => helper() ?? \" \";\n  const isFilledVariant = (): boolean => local.variant === \"filled\";\n  const isNotchedActive = (): boolean =>\n    !!local.label && (!!local.isFilledState || !!local.isFocused || !!local.shrink);\n\n  return (\n    <div\n      {...rest}\n      class={cn(local.class, \"smwb-text-field\", {\n        \"smwb-text-field--filled\": !local.inline && isFilledVariant(),\n        \"smwb-text-field--inline\": local.inline,\n        \"smwb-text-field--focused\": !local.inline && local.isFocused,\n        \"smwb-text-field--error\": local.error,\n        \"smwb-text-field--disabled\": local.disabled,\n        \"smwb-text-field--full-width\": local.fullWidth,\n      })}\n      data-testid=\"text-field\"\n    >\n      <Show when={!local.inline && local.label}>\n        <label\n          class={cn(\"smwb-text-field__label\", { \"smwb-text-field__label--shrink\": isNotchedActive() })}\n          for={local.for || \"\"}\n        >\n          {local.label}\n        </label>\n      </Show>\n      <div class=\"smwb-text-field__input-holder\" onMouseDown={local.onHolderMouseDown}>\n        <Show when={startAdornment()}>\n          <TextFieldAdornment variant={local.variant} inline={Boolean(local.inline)} position=\"start\">\n            {startAdornment()}\n          </TextFieldAdornment>\n        </Show>\n        {local.children}\n        <Show when={endAdornment()}>\n          <TextFieldAdornment position=\"end\">{endAdornment()}</TextFieldAdornment>\n        </Show>\n        <Show when={!local.inline && local.variant === \"outlined\"}>\n          <fieldset\n            class={cn(\"smwb-text-field__notched\", {\n              \"smwb-text-field__notched--with-label\": local.label,\n              \"smwb-text-field__notched--active\": isNotchedActive(),\n            })}\n          >\n            <legend>\n              <Show when={local.label} fallback={<span class=\"smwb-notranslate\">&#8203;</span>}>\n                <span>{local.label}</span>\n              </Show>\n            </legend>\n          </fieldset>\n        </Show>\n      </div>\n      <Show when={!local.inline && helperText()}>\n        <p class=\"smwb-text-field__helper-line\">\n          <span class=\"smwb-text-field__helper-text\">{helperText()}</span>\n        </p>\n      </Show>\n    </div>\n  );\n}\n\nexport default TextFieldWrapper;\n"],"names":["TextFieldWrapper","props","local","rest","splitProps","helper","children","inline","undefined","helperText","startAdornment","endAdornment","isFilledVariant","variant","isNotchedActive","label","isFilledState","isFocused","shrink","_el$","_tmpl$5","_el$3","firstChild","_$spread","_$mergeProps","cn","class","error","disabled","fullWidth","_$insert","_$createComponent","Show","when","_$memo","_el$2","_tmpl$","_$effect","_p$","_v$","_v$2","for","e","_$className","t","_$setAttribute","_$addEventListener","onHolderMouseDown","TextFieldAdornment","Boolean","position","_el$4","_tmpl$3","_el$5","fallback","_tmpl$6","_el$6","_tmpl$2","_el$7","_tmpl$4","_el$8","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"textFieldWrapper.js","sources":["../../../../src/components/inputs/textField/textFieldWrapper.tsx"],"sourcesContent":["import { type JSX, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldAdornment } from \"./textFieldAdornment\";\nimport { hasHelperText } from \"../../../primitives/createHelperText\";\nimport type { TextFieldVariant } from \"./types\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface TextFieldWrapperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  /**\n   * Id of the helper text, for the control's `aria-describedby`. Only shown helper text takes it: not the blank line\n   * drawn without helper text, and an inline field shows none.\n   */\n  helperTextId?: string | undefined;\n  variant?: TextFieldVariant | undefined;\n  disabled?: boolean | undefined;\n  error?: boolean | undefined;\n  fullWidth?: boolean | undefined;\n  isFilledState?: boolean | undefined;\n  isFocused?: boolean | undefined;\n  /** Id of the control the label names. Without it, the label names nothing. */\n  for?: string | undefined;\n  /**\n   * Id of the `<label>`. A control that `for` cannot label (one that is not a\n   * form element, such as SelectField's `role=\"button\"`) points\n   * `aria-labelledby` at it.\n   */\n  labelId?: string | undefined;\n  shrink?: boolean | undefined;\n  onHolderMouseDown?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  inline?: boolean | undefined;\n  /** Test id of the root `<div>`; `text-field` unless given. */\n  \"data-testid\"?: string | undefined;\n  children?: JSX.Element;\n}\n\nexport function TextFieldWrapper(props: TextFieldWrapperProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"label\",\n    \"helperText\",\n    \"helperTextId\",\n    \"variant\",\n    \"disabled\",\n    \"class\",\n    \"error\",\n    \"fullWidth\",\n    \"isFilledState\",\n    \"isFocused\",\n    \"for\",\n    \"labelId\",\n    \"shrink\",\n    \"children\",\n    \"onHolderMouseDown\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n    \"data-testid\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  // The helper text is read only where it is drawn: not for an inline field.\n  const helper = children(() => (local.inline ? undefined : local.helperText));\n  const startAdornment = children(() => local.startAdornment);\n  const endAdornment = children(() => local.endAdornment);\n  // Without helper text a blank line holds its place; `null` draws no line.\n  const helperText = (): JSX.Element => (helper() === undefined ? \" \" : helper());\n  const isFilledVariant = (): boolean => local.variant === \"filled\";\n  const isNotchedActive = (): boolean =>\n    !!local.label && (!!local.isFilledState || !!local.isFocused || !!local.shrink);\n\n  // Reads the prop on each press: Solid binds event handlers once.\n  const onHolderMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    callHandler(local.onHolderMouseDown, event);\n  };\n\n  return (\n    <div\n      {...rest}\n      class={cn(local.class, \"smwb-text-field\", {\n        \"smwb-text-field--filled\": !local.inline && isFilledVariant(),\n        \"smwb-text-field--inline\": local.inline,\n        \"smwb-text-field--focused\": !local.inline && local.isFocused,\n        \"smwb-text-field--error\": local.error,\n        \"smwb-text-field--disabled\": local.disabled,\n        \"smwb-text-field--full-width\": local.fullWidth,\n      })}\n      data-testid={local[\"data-testid\"] ?? \"text-field\"}\n    >\n      <Show when={!local.inline && local.label}>\n        <label\n          id={local.labelId}\n          class={cn(\"smwb-text-field__label\", { \"smwb-text-field__label--shrink\": isNotchedActive() })}\n          for={local.for}\n        >\n          {local.label}\n        </label>\n      </Show>\n      <div class=\"smwb-text-field__input-holder\" onMouseDown={onHolderMouseDown}>\n        <Show when={startAdornment()}>\n          <TextFieldAdornment variant={local.variant} inline={Boolean(local.inline)} position=\"start\">\n            {startAdornment()}\n          </TextFieldAdornment>\n        </Show>\n        {local.children}\n        <Show when={endAdornment()}>\n          <TextFieldAdornment position=\"end\">{endAdornment()}</TextFieldAdornment>\n        </Show>\n        <Show when={!local.inline && local.variant === \"outlined\"}>\n          <fieldset\n            class={cn(\"smwb-text-field__notched\", {\n              \"smwb-text-field__notched--with-label\": local.label,\n              \"smwb-text-field__notched--active\": isNotchedActive(),\n            })}\n          >\n            <legend>\n              <Show when={local.label} fallback={<span class=\"smwb-notranslate\">&#8203;</span>}>\n                <span>{local.label}</span>\n              </Show>\n            </legend>\n          </fieldset>\n        </Show>\n      </div>\n      <Show when={!local.inline && helperText()}>\n        <p class=\"smwb-text-field__helper-line\">\n          <span\n            class=\"smwb-text-field__helper-text\"\n            id={hasHelperText(helper(), local.inline) ? local.helperTextId : undefined}\n          >\n            {helperText()}\n          </span>\n        </p>\n      </Show>\n    </div>\n  );\n}\n\nexport default TextFieldWrapper;\n"],"names":["TextFieldWrapper","props","local","rest","splitProps","helper","children","inline","undefined","helperText","startAdornment","endAdornment","isFilledVariant","variant","isNotchedActive","label","isFilledState","isFocused","shrink","onHolderMouseDown","event","callHandler","_el$","_tmpl$5","_el$3","firstChild","_$spread","_$mergeProps","cn","class","error","disabled","fullWidth","_$insert","_$createComponent","Show","when","_$memo","_el$2","_tmpl$","_$effect","_p$","_v$","labelId","_v$2","_v$3","for","e","_$setAttribute","t","_$className","a","$$mousedown","TextFieldAdornment","Boolean","position","_el$4","_tmpl$3","_el$5","fallback","_tmpl$6","_el$6","_tmpl$2","_el$7","_tmpl$4","_el$8","hasHelperText","helperTextId","_$delegateEvents"],"mappings":"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"}

package/dist/components/inputs/timePicker/timePicker.js

@@ -1,70 +1,81 @@
-import { createComponent as i, mergeProps as L, Portal as M, use as O, insert as $, effect as I, style as R, setAttribute as q, isServer as j, template as x } from "solid-js/web";
+import { createComponent as i, mergeProps as B, Portal as M, use as $, insert as I, effect as R, style as q, setAttribute as K, isServer as j, template as x } from "solid-js/web";
 import '../../../assets/styles/less/components/timePicker/timePicker.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                               */
-import { splitProps as z, createSignal as l, createEffect as y, onCleanup as G, Show as H } from "solid-js";
-import { buildFloatingMiddleware as J, resolvePlacement as K } from "../../../utils/floating.js";
+import { splitProps as z, createSignal as s, createEffect as p, onCleanup as T, Show as G } from "solid-js";
+import { buildFloatingMiddleware as H, resolvePlacement as J } from "../../../utils/floating.js";
 import { createFloating as N } from "../../../primitives/createFloating.js";
-import { TimePickerInput as Q } from "./timePickerInput.js";
-import { TimePickerColumns as U } from "./timePickerColumns.js";
-import { isValidTimeDate as T } from "./timeUtils.js";
-import { mergeRefs as A } from "../../../primitives/mergeRefs.js";
-import { ClickAwayListener as W } from "../../clickAwayListener/clickAwayListener.js";
-var X = /* @__PURE__ */ x('<div class="smwb-date-picker smwb-time-picker"data-testid=time-picker data-smwb-overlay-layer role=dialog aria-modal=false style="transition:opacity 150ms ease-in-out"><div class=smwb-date-picker__inner>');
-const Y = 150;
-function me(u) {
-  const [e, P] = z(u, ["value", "onChange", "placement", "disabled", "disableClock", "clockAriaLabel", "format", "onBlur", "ref"]), s = () => e.value === void 0 ? void 0 : new Date(e.value), [F, f] = l(T(s()) ? s() : /* @__PURE__ */ new Date()), [S, c] = l(!1);
-  let g, v;
-  const p = () => K(e.placement ?? "bottom-start"), m = N({
-    placement: () => p().placement,
-    middleware: () => J(p())
+import { isTopOverlayLayer as Q } from "../../../primitives/overlayLayer.js";
+import { TimePickerInput as U } from "./timePickerInput.js";
+import { TimePickerColumns as W } from "./timePickerColumns.js";
+import { isValidTimeDate as A } from "./timeUtils.js";
+import { mergeRefs as E } from "../../../primitives/mergeRefs.js";
+import { ClickAwayListener as X } from "../../clickAwayListener/clickAwayListener.js";
+var Y = /* @__PURE__ */ x('<div class="smwb-date-picker smwb-time-picker"data-testid=time-picker data-smwb-overlay-layer role=dialog aria-modal=false style="transition:opacity 150ms ease-in-out"><div class=smwb-date-picker__inner>');
+const Z = 150;
+function ue(g) {
+  const [t, P] = z(g, ["value", "onChange", "placement", "disabled", "disableClock", "clockAriaLabel", "format", "onBlur", "ref"]), c = () => t.value === void 0 ? void 0 : new Date(t.value), [D, b] = s(A(c()) ? c() : /* @__PURE__ */ new Date()), [F, l] = s(!1);
+  let m, d;
+  const w = () => J(t.placement ?? "bottom-start"), u = N({
+    placement: () => w().placement,
+    middleware: () => H(w())
   });
-  y(() => {
-    if (e.disabled) return;
-    const t = s();
-    f(T(t) ? t : /* @__PURE__ */ new Date());
+  p(() => {
+    if (t.disabled) return;
+    const e = c();
+    b(A(e) ? e : /* @__PURE__ */ new Date());
   });
-  const b = () => S() && !e.disabled && !e.disableClock, [C, h] = l(b()), [_, w] = l(!1);
-  let d, a;
-  y(() => {
-    b() ? (a !== void 0 && clearTimeout(a), h(!0), d = requestAnimationFrame(() => w(!0))) : (w(!1), C() && (a = setTimeout(() => h(!1), Y)));
-  }), G(() => {
-    d !== void 0 && cancelAnimationFrame(d), a !== void 0 && clearTimeout(a);
+  const f = () => F() && !t.disabled && !t.disableClock, [k, y] = s(f()), [L, C] = s(!1);
+  let v, a;
+  p(() => {
+    f() ? (a !== void 0 && clearTimeout(a), y(!0), v = requestAnimationFrame(() => C(!0))) : (C(!1), k() && (a = setTimeout(() => y(!1), Z)));
+  }), T(() => {
+    v !== void 0 && cancelAnimationFrame(v), a !== void 0 && clearTimeout(a);
+  }), p(() => {
+    if (!f()) return;
+    const e = (r) => {
+      const n = d;
+      if (r.key !== "Escape" || !n || !Q(n)) return;
+      l(!1);
+      const o = document.activeElement;
+      (!o || o === document.body || n.contains(o)) && m?.focus();
+    };
+    document.addEventListener("keydown", e), T(() => document.removeEventListener("keydown", e));
   });
-  const D = () => {
-    e.disabled || c((t) => !t);
-  }, E = (t) => {
-    const r = t.target;
-    v?.contains(r) || g?.contains(r) || c(!1);
-  }, V = (t) => {
-    f(t), e.onChange?.(void 0, t, u);
+  const S = () => {
+    t.disabled || l((e) => !e);
+  }, _ = (e) => {
+    const r = e.target;
+    d?.contains(r) || m?.contains(r) || l(!1);
+  }, O = (e) => {
+    b(e), t.onChange?.(void 0, e, g);
   };
-  return [i(Q, L({
-    ref(t) {
-      var r = A(e.ref, m.setReference, (n) => g = n);
-      typeof r == "function" && r(t);
+  return [i(U, B({
+    ref(e) {
+      var r = E(t.ref, u.setReference, (n) => m = n);
+      typeof r == "function" && r(e);
     },
     get value() {
-      return e.value;
+      return t.value;
     },
     get onChange() {
-      return e.onChange;
+      return t.onChange;
     },
     get onBlur() {
-      return e.onBlur;
+      return t.onBlur;
     },
-    onToggle: D,
+    onToggle: S,
     get disabled() {
-      return e.disabled;
+      return t.disabled;
     },
     get disableClock() {
-      return e.disableClock;
+      return t.disableClock;
     },
     get format() {
-      return e.format;
+      return t.format;
     }
-  }, P)), i(H, {
+  }, P)), i(G, {
     get when() {
-      return C();
+      return k();
     },
     get children() {
       return i(M, {
@@ -72,31 +83,31 @@ function me(u) {
           return j ? void 0 : document.body;
         },
         get children() {
-          return i(W, {
-            onClickAway: E,
+          return i(X, {
+            onClickAway: _,
             get children() {
-              var t = X(), r = t.firstChild, n = A(m.setFloating, (o) => v = o);
-              return typeof n == "function" && O(n, t), $(r, i(U, {
+              var e = Y(), r = e.firstChild, n = E(u.setFloating, (o) => d = o);
+              return typeof n == "function" && $(n, e), I(r, i(W, {
                 get value() {
-                  return F();
+                  return D();
                 },
                 get format() {
-                  return e.format;
+                  return t.format;
                 },
-                onChange: V,
+                onChange: O,
                 onComplete: () => {
-                  c(!1);
+                  l(!1);
                 }
-              })), I((o) => {
-                var B = {
-                  ...m.floatingStyles(),
-                  opacity: _() ? 1 : 0
-                }, k = e.clockAriaLabel ?? "Choose time";
-                return o.e = R(t, B, o.e), k !== o.t && q(t, "aria-label", o.t = k), o;
+              })), R((o) => {
+                var V = {
+                  ...u.floatingStyles(),
+                  opacity: L() ? 1 : 0
+                }, h = t.clockAriaLabel ?? "Choose time";
+                return o.e = q(e, V, o.e), h !== o.t && K(e, "aria-label", o.t = h), o;
               }, {
                 e: void 0,
                 t: void 0
-              }), t;
+              }), e;
             }
           });
         }
@@ -105,6 +116,6 @@ function me(u) {
   })];
 }
 export {
-  me as TimePicker
+  ue as TimePicker
 };
 //# sourceMappingURL=timePicker.js.map

package/dist/components/inputs/timePicker/timePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"timePicker.js","sources":["../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, 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 { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { TextFieldProps } from \"../textField\";\n\nexport interface TimePickerProps\n  extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n  /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n  format?: string | undefined;\n  placement?: Placement | undefined;\n  disableClock?: boolean | undefined;\n  label?: string | undefined;\n  clockAriaLabel?: string | undefined;\n  value?: Date | string | undefined;\n  clockIcon?: JSX.Element;\n  onChange?: ((event?: Event, value?: Date, data?: TimePickerProps) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date, data?: TimePickerProps) => void) | undefined;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function TimePicker(props: TimePickerProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onChange\",\n    \"placement\",\n    \"disabled\",\n    \"disableClock\",\n    \"clockAriaLabel\",\n    \"format\",\n    \"onBlur\",\n    \"ref\",\n  ]);\n\n  const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n  const [viewValue, setViewValue] = createSignal<Date>(isValidTimeDate(value()) ? (value() as Date) : new Date());\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  let anchorEl: HTMLElement | undefined;\n  let clockEl: HTMLElement | undefined;\n\n  const resolved = () => 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(isValidTimeDate(v) ? v : new Date());\n  });\n\n  const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableClock;\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 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 (clockEl?.contains(target) || anchorEl?.contains(target)) return;\n    setIsOpen(false);\n  };\n\n  const onTimeChange = (next: Date): void => {\n    setViewValue(next);\n    local.onChange?.(undefined, next, props);\n  };\n\n  return (\n    <>\n      <TimePickerInput\n        ref={mergeRefs(local.ref, floating.setReference, (el) => (anchorEl = el as HTMLElement))}\n        value={local.value}\n        onChange={local.onChange}\n        onBlur={local.onBlur}\n        onToggle={onToggle}\n        disabled={local.disabled}\n        disableClock={local.disableClock}\n        format={local.format}\n        {...rest}\n      />\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) => (clockEl = el as HTMLElement))}\n              class=\"smwb-date-picker smwb-time-picker\"\n              style={{ ...floating.floatingStyles(), transition: `opacity ${FADE_MS}ms ease-in-out`, opacity: shown() ? 1 : 0 }}\n              data-testid=\"time-picker\"\n              data-smwb-overlay-layer\n              role=\"dialog\"\n              aria-modal=\"false\"\n              aria-label={local.clockAriaLabel ?? \"Choose time\"}\n            >\n              <div class=\"smwb-date-picker__inner\">\n                <TimePickerColumns\n                  value={viewValue()}\n                  format={local.format}\n                  onChange={onTimeChange}\n                  onComplete={() => {\n                    setIsOpen(false);\n                  }}\n                />\n              </div>\n            </div>\n          </ClickAwayListener>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport default TimePicker;\n"],"names":["FADE_MS","TimePicker","props","local","rest","splitProps","value","undefined","Date","viewValue","setViewValue","createSignal","isValidTimeDate","isOpen","setIsOpen","anchorEl","clockEl","resolved","resolvePlacement","placement","floating","createFloating","middleware","buildFloatingMiddleware","createEffect","disabled","v","shouldOpen","disableClock","mounted","setMounted","shown","setShown","raf","timer","clearTimeout","requestAnimationFrame","setTimeout","onCleanup","cancelAnimationFrame","onToggle","prev","onClickAway","event","target","contains","onTimeChange","next","onChange","_$createComponent","TimePickerInput","_$mergeProps","ref","r$","_ref$","mergeRefs","setReference","el","onBlur","format","Show","when","children","Portal","mount","isServer","document","body","ClickAwayListener","_el$","_tmpl$","_el$2","firstChild","_ref$2","setFloating","_$use","_$insert","TimePickerColumns","onComplete","_$effect","_p$","_v$","floatingStyles","opacity","_v$2","clockAriaLabel","e","_$style","t","_$setAttribute"],"mappings":"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"}
+{"version":3,"file":"timePicker.js","sources":["../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, 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 { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { TextFieldProps } from \"../textField\";\n\nexport interface TimePickerProps\n  extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n  /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n  format?: string | undefined;\n  placement?: Placement | undefined;\n  disableClock?: boolean | undefined;\n  label?: string | undefined;\n  clockAriaLabel?: string | undefined;\n  value?: Date | string | undefined;\n  clockIcon?: JSX.Element;\n  onChange?: ((event?: Event, value?: Date, data?: TimePickerProps) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date, data?: TimePickerProps) => void) | undefined;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function TimePicker(props: TimePickerProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onChange\",\n    \"placement\",\n    \"disabled\",\n    \"disableClock\",\n    \"clockAriaLabel\",\n    \"format\",\n    \"onBlur\",\n    \"ref\",\n  ]);\n\n  const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n  const [viewValue, setViewValue] = createSignal<Date>(isValidTimeDate(value()) ? (value() as Date) : new Date());\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  let anchorEl: HTMLElement | undefined;\n  let clockEl: HTMLElement | undefined;\n\n  const resolved = () => 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(isValidTimeDate(v) ? v : new Date());\n  });\n\n  const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableClock;\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  // Escape closes the panel while it is the topmost overlay layer, so the next one\n  // reaches a Modal or Sheet around the picker. Focus left in the panel (or on\n  // <body> after a click there) goes back to the input rather than being lost.\n  createEffect(() => {\n    if (!shouldOpen()) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      const panel = clockEl;\n      if (event.key !== \"Escape\" || !panel || !isTopOverlayLayer(panel)) return;\n      setIsOpen(false);\n      const active = document.activeElement;\n      if (!active || active === document.body || panel.contains(active)) anchorEl?.focus();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\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 (clockEl?.contains(target) || anchorEl?.contains(target)) return;\n    setIsOpen(false);\n  };\n\n  const onTimeChange = (next: Date): void => {\n    setViewValue(next);\n    local.onChange?.(undefined, next, props);\n  };\n\n  return (\n    <>\n      <TimePickerInput\n        ref={mergeRefs(local.ref, floating.setReference, (el) => (anchorEl = el as HTMLElement))}\n        value={local.value}\n        onChange={local.onChange}\n        onBlur={local.onBlur}\n        onToggle={onToggle}\n        disabled={local.disabled}\n        disableClock={local.disableClock}\n        format={local.format}\n        {...rest}\n      />\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) => (clockEl = el as HTMLElement))}\n              class=\"smwb-date-picker smwb-time-picker\"\n              style={{ ...floating.floatingStyles(), transition: `opacity ${FADE_MS}ms ease-in-out`, opacity: shown() ? 1 : 0 }}\n              data-testid=\"time-picker\"\n              data-smwb-overlay-layer\n              role=\"dialog\"\n              aria-modal=\"false\"\n              aria-label={local.clockAriaLabel ?? \"Choose time\"}\n            >\n              <div class=\"smwb-date-picker__inner\">\n                <TimePickerColumns\n                  value={viewValue()}\n                  format={local.format}\n                  onChange={onTimeChange}\n                  onComplete={() => {\n                    setIsOpen(false);\n                  }}\n                />\n              </div>\n            </div>\n          </ClickAwayListener>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport default TimePicker;\n"],"names":["FADE_MS","TimePicker","props","local","rest","splitProps","value","undefined","Date","viewValue","setViewValue","createSignal","isValidTimeDate","isOpen","setIsOpen","anchorEl","clockEl","resolved","resolvePlacement","placement","floating","createFloating","middleware","buildFloatingMiddleware","createEffect","disabled","v","shouldOpen","disableClock","mounted","setMounted","shown","setShown","raf","timer","clearTimeout","requestAnimationFrame","setTimeout","onCleanup","cancelAnimationFrame","onKeyDown","event","panel","key","isTopOverlayLayer","active","document","activeElement","body","contains","focus","addEventListener","removeEventListener","onToggle","prev","onClickAway","target","onTimeChange","next","onChange","_$createComponent","TimePickerInput","_$mergeProps","ref","r$","_ref$","mergeRefs","setReference","el","onBlur","format","Show","when","children","Portal","mount","isServer","ClickAwayListener","_el$","_tmpl$","_el$2","firstChild","_ref$2","setFloating","_$use","_$insert","TimePickerColumns","onComplete","_$effect","_p$","_v$","floatingStyles","opacity","_v$2","clockAriaLabel","e","_$style","t","_$setAttribute"],"mappings":"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"}

package/dist/components/inputs/toggle/toggle.d.ts

@@ -3,6 +3,10 @@ import { type Ref } from "../../../primitives/mergeRefs";
 import type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from "../checkbox/checkbox";
 export interface ToggleProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> {
     disabled?: boolean;
+    /**
+     * Keeps the switch as it is: clicks on it or its label and Space change nothing, and `onChange` is not called.
+     * It stays focusable, and its input tells assistive technology it is read-only (`aria-readonly`).
+     */
     readOnly?: boolean;
     required?: boolean;
     checked?: boolean;

package/dist/components/inputs/toggle/toggle.js

@@ -1,26 +1,31 @@
-import { createComponent as c, insert as g, setAttribute as m, use as w, spread as v, mergeProps as k, effect as x, className as b, template as u } from "solid-js/web";
+import { createComponent as g, insert as m, setAttribute as b, use as k, spread as v, mergeProps as x, effect as C, className as p, template as h } from "solid-js/web";
 import '../../../assets/styles/less/components/toggle/toggle.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import { mergeProps as y, splitProps as $, Show as C } from "solid-js";
-import p from "clsx";
-import { TextFieldWrapper as P } from "../textField/textFieldWrapper.js";
-import { createId as T } from "../../../primitives/createId.js";
-import { mergeRefs as q } from "../../../primitives/mergeRefs.js";
-var z = /* @__PURE__ */ u("<label class=smwb-toggle__label>"), O = /* @__PURE__ */ u("<span><label><input type=checkbox class=smwb-toggle__checkbox role=switch><span class=smwb-toggle__track></span><span class=smwb-toggle__thumb>");
-function j(o) {
-  const h = y({
+import { mergeProps as $, splitProps as T, Show as P } from "solid-js";
+import u from "clsx";
+import { TextFieldWrapper as O } from "../textField/textFieldWrapper.js";
+import { createHelperText as q } from "../../../primitives/createHelperText.js";
+import { createId as z } from "../../../primitives/createId.js";
+import { mergeRefs as B } from "../../../primitives/mergeRefs.js";
+import { callHandler as H } from "../../../primitives/callHandler.js";
+var I = /* @__PURE__ */ h("<label class=smwb-toggle__label>"), A = /* @__PURE__ */ h("<span><label><input type=checkbox class=smwb-toggle__checkbox role=switch><span class=smwb-toggle__track></span><span class=smwb-toggle__thumb>");
+function K(i) {
+  const f = $({
     size: "medium",
     color: "primary"
-  }, o), [e, f] = $(h, ["disabled", "readOnly", "required", "checked", "class", "id", "label", "labelPlacement", "size", "color", "helperText", "error", "onChange", "ref"]), s = T(e.id), _ = (t) => {
-    if (e.readOnly) {
-      t.preventDefault();
-      return;
-    }
-    e.onChange?.(t, t.currentTarget.checked, o);
+  }, i), [e, _] = T(f, ["disabled", "readOnly", "onClick", "required", "checked", "class", "id", "label", "labelPlacement", "size", "color", "helperText", "error", "onChange", "aria-describedby", "ref"]), s = z(e.id), l = q(() => e.helperText, {
+    describedBy: () => e["aria-describedby"]
+  }), w = (r) => {
+    H(e.onClick, r), e.readOnly && r.preventDefault();
+  }, y = (r) => {
+    e.readOnly || e.onChange?.(r, r.currentTarget.checked, i);
   };
-  return c(P, {
+  return g(O, {
     get helperText() {
-      return e.helperText;
+      return l.text();
+    },
+    get helperTextId() {
+      return l.id;
     },
     get disabled() {
       return e.disabled;
@@ -30,18 +35,18 @@ function j(o) {
     },
     class: "smwb-text-field-checkbox",
     get children() {
-      var t = O(), l = t.firstChild, a = l.firstChild;
-      g(t, c(C, {
+      var r = A(), a = r.firstChild, o = a.firstChild;
+      m(r, g(P, {
         get when() {
           return e.label;
         },
         get children() {
-          var r = z();
-          return m(r, "for", s), g(r, () => e.label), r;
+          var t = I();
+          return b(t, "for", s), m(t, () => e.label), t;
         }
-      }), l);
-      var i = q(e.ref);
-      return typeof i == "function" && w(i, a), m(a, "id", s), v(a, k({
+      }), a);
+      var d = B(e.ref);
+      return typeof d == "function" && k(d, o), b(o, "id", s), v(o, x({
         get "aria-checked"() {
           return e.checked;
         },
@@ -51,6 +56,9 @@ function j(o) {
         get "aria-required"() {
           return e.required || void 0;
         },
+        get "aria-describedby"() {
+          return l.describedBy();
+        },
         get checked() {
           return e.checked;
         },
@@ -63,22 +71,26 @@ function j(o) {
         get required() {
           return e.required;
         }
-      }, f, {
-        onChange: _
-      }), !1, !1), x((r) => {
-        var n = p("smwb-toggle__wrapper", e.labelPlacement && `smwb-toggle__wrapper_label-${e.labelPlacement}`), d = p("smwb-toggle", `smwb-toggle_size-${e.size}`, `smwb-toggle_color-${e.color}`, e.class, {
+      }, _, {
+        get "aria-readonly"() {
+          return e.readOnly || void 0;
+        },
+        onChange: y,
+        onClick: w
+      }), !1, !1), C((t) => {
+        var n = u("smwb-toggle__wrapper", e.labelPlacement && `smwb-toggle__wrapper_label-${e.labelPlacement}`), c = u("smwb-toggle", `smwb-toggle_size-${e.size}`, `smwb-toggle_color-${e.color}`, e.class, {
           "smwb-disabled": e.disabled,
           "smwb-readonly": e.readOnly
         });
-        return n !== r.e && b(t, r.e = n), d !== r.t && b(l, r.t = d), r;
+        return n !== t.e && p(r, t.e = n), c !== t.t && p(a, t.t = c), t;
       }, {
         e: void 0,
         t: void 0
-      }), t;
+      }), r;
     }
   });
 }
 export {
-  j as Toggle
+  K as Toggle
 };
 //# sourceMappingURL=toggle.js.map