@smwb/ui-solid 0.1.0

package/dist/components/inputs/radioButton/radioButton.js

@@ -0,0 +1,89 @@
+import { createComponent as g, setAttribute as p, use as y, spread as $, mergeProps as C, insert as f, effect as q, className as s, template as _ } from "solid-js/web";
+import '../../../assets/styles/less/components/radioButton/radioButton.entry.css';/* empty css                                                                 */
+import { mergeProps as T, splitProps as z, Show as O } from "solid-js";
+import l from "clsx";
+import { TextFieldWrapper as P } from "../textField/textFieldWrapper.js";
+import { createId as S } from "../../../primitives/createId.js";
+import { mergeRefs as k } from "../../../primitives/mergeRefs.js";
+var R = /* @__PURE__ */ _("<span class=smwb-radio__label>"), A = /* @__PURE__ */ _("<label><span class=smwb-radio__wrapper><input type=radio data-testid=radio><span></span><span>");
+function E(t) {
+  const v = T({
+    size: "medium",
+    color: "primary"
+  }, t), [e, h] = z(v, ["label", "disabled", "readOnly", "required", "name", "id", "size", "color", "helperText", "error", "onChange", "class", "ref"]), n = S(e.id), w = (a) => {
+    if (e.readOnly) {
+      a.preventDefault();
+      return;
+    }
+    const d = t.value !== void 0 ? t.value : a.currentTarget.checked;
+    e.onChange?.(a, d, t);
+  };
+  return g(P, {
+    get helperText() {
+      return e.helperText;
+    },
+    get disabled() {
+      return e.disabled;
+    },
+    get error() {
+      return e.error;
+    },
+    class: "smwb-text-field-checkbox",
+    get children() {
+      var a = A(), d = a.firstChild, i = d.firstChild, o = i.nextSibling, x = o.nextSibling;
+      p(a, "for", n);
+      var m = k(e.ref);
+      return typeof m == "function" && y(m, i), p(i, "id", n), $(i, C({
+        get name() {
+          return e.name;
+        },
+        get disabled() {
+          return e.disabled;
+        },
+        get readonly() {
+          return e.readOnly;
+        },
+        get required() {
+          return e.required;
+        },
+        get "aria-invalid"() {
+          return e.error || void 0;
+        },
+        get "aria-required"() {
+          return e.required || void 0;
+        },
+        get class() {
+          return l("smwb-radio__input", e.class);
+        }
+      }, h, {
+        onChange: w
+      }), !1, !1), f(a, g(O, {
+        get when() {
+          return e.label;
+        },
+        get children() {
+          var r = R();
+          return f(r, () => e.label), r;
+        }
+      }), null), q((r) => {
+        var b = l("smwb-radio", `smwb-radio_size-${e.size}`, `smwb-radio_color-${e.color}`, {
+          "smwb-disabled": e.disabled,
+          "smwb-readonly": e.readOnly
+        }), u = l("smwb-radio__btn", {
+          "smwb-disabled": e.disabled
+        }), c = l("smwb-radio__bg", {
+          "smwb-disabled": e.disabled
+        });
+        return b !== r.e && s(a, r.e = b), u !== r.t && s(o, r.t = u), c !== r.a && s(x, r.a = c), r;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0
+      }), a;
+    }
+  });
+}
+export {
+  E as RadioButton
+};
+//# sourceMappingURL=radioButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radioButton.js","sources":["../../../../src/components/inputs/radioButton/radioButton.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface RadioButtonProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  checked?: boolean;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  helperText?: JSX.Element;\n  error?: boolean;\n  /** Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state). */\n  onChange?: (\n    event: SelectionChangeEvent,\n    value: string | number | string[] | boolean | undefined,\n    data: RadioButtonProps\n  ) => void;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function RadioButton(props: RadioButtonProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n  const [local, args] = splitProps(merged, [\n    \"label\",\n    \"disabled\",\n    \"readOnly\",\n    \"required\",\n    \"name\",\n    \"id\",\n    \"size\",\n    \"color\",\n    \"helperText\",\n    \"error\",\n    \"onChange\",\n    \"class\",\n    \"ref\",\n  ]);\n  const id = createId(local.id);\n\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n    if (local.readOnly) {\n      event.preventDefault();\n      return;\n    }\n    const value = props.value !== undefined ? (props.value as string | number | string[]) : event.currentTarget.checked;\n    local.onChange?.(event, value, props);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={local.helperText}\n      disabled={local.disabled}\n      error={local.error}\n      class=\"smwb-text-field-checkbox\"\n    >\n      <label\n        for={id}\n        class={cn(\"smwb-radio\", `smwb-radio_size-${local.size}`, `smwb-radio_color-${local.color}`, {\n          \"smwb-disabled\": local.disabled,\n          \"smwb-readonly\": local.readOnly,\n        })}\n      >\n        <span class=\"smwb-radio__wrapper\">\n          <input\n            id={id}\n            name={local.name}\n            disabled={local.disabled}\n            readonly={local.readOnly}\n            required={local.required}\n            aria-invalid={local.error || undefined}\n            aria-required={local.required || undefined}\n            class={cn(\"smwb-radio__input\", local.class)}\n            type=\"radio\"\n            data-testid=\"radio\"\n            ref={mergeRefs(local.ref)}\n            {...args}\n            onChange={handleChange}\n          />\n          <span class={cn(\"smwb-radio__btn\", { \"smwb-disabled\": local.disabled })} />\n          <span class={cn(\"smwb-radio__bg\", { \"smwb-disabled\": local.disabled })} />\n        </span>\n        <Show when={local.label}>\n          <span class=\"smwb-radio__label\">{local.label}</span>\n        </Show>\n      </label>\n    </TextFieldWrapper>\n  );\n}\n\nexport default RadioButton;\n"],"names":["RadioButton","props","merged","mergeProps","size","color","local","args","splitProps","id","createId","handleChange","event","readOnly","preventDefault","value","undefined","currentTarget","checked","onChange","_$createComponent","TextFieldWrapper","helperText","disabled","error","children","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_$setAttribute","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","name","readonly","required","cn","class","_$insert","Show","when","label","_el$6","_tmpl$","_$effect","_p$","_v$","_v$2","_v$3","e","_$className","t","a"],"mappings":"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"}

package/dist/components/inputs/rating/index.d.ts

@@ -0,0 +1,2 @@
+export { Rating, default } from "./rating";
+export type { RatingProps, RatingColor } from "./rating";

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

@@ -0,0 +1,33 @@
+import { type JSX } from "solid-js";
+import { type Ref } from "../../../primitives/mergeRefs";
+export type RatingColor = "primary" | "secondary" | "error" | "success" | "warning" | "info";
+export interface RatingProps {
+    class?: string;
+    /** Controlled value. */
+    value?: number;
+    /** Uncontrolled initial value. */
+    defaultValue?: number;
+    /** Number of icons. */
+    max?: number;
+    /** Smallest selectable increment: 1 (whole) or 0.5 (half). */
+    precision?: 1 | 0.5;
+    readOnly?: boolean;
+    disabled?: boolean;
+    size?: number;
+    /** Filled icon. */
+    icon?: JSX.Element;
+    /** Empty icon. */
+    emptyIcon?: JSX.Element;
+    name?: string;
+    /** Color of the filled icons. */
+    color?: RatingColor;
+    /** Renders the control in an error state. */
+    error?: boolean;
+    /** Supporting text shown below the control. */
+    helperText?: JSX.Element;
+    id?: string;
+    onChange?: (value: number) => void;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function Rating(props: RatingProps): JSX.Element;
+export default Rating;

package/dist/components/inputs/rating/rating.js

@@ -0,0 +1,108 @@
+import { addEventListener as w, use as L, insert as s, createComponent as u, effect as f, setStyleProperty as p, setAttribute as v, className as C, memo as P, template as h, delegateEvents as F } from "solid-js/web";
+import '../../../assets/styles/less/components/rating/rating.entry.css';/* empty css                                                       */
+import { mergeProps as B, splitProps as K, createSignal as N, For as U, Show as A } from "solid-js";
+import D from "clsx";
+import { createControllableState as X } from "../../../primitives/createControllableState.js";
+import { mergeRefs as j } from "../../../primitives/mergeRefs.js";
+import { Icon as S } from "../../base/icon/icon.js";
+var q = /* @__PURE__ */ h("<input type=hidden>"), G = /* @__PURE__ */ h("<span>"), J = /* @__PURE__ */ h("<span data-testid=rating role=img>"), Q = /* @__PURE__ */ h('<span class=smwb-rating__item><span class="smwb-rating__icon smwb-rating__icon_empty"></span><span class="smwb-rating__icon smwb-rating__icon_filled">');
+function ae(R) {
+  const T = B({
+    defaultValue: 0,
+    max: 5,
+    precision: 1,
+    readOnly: !1,
+    disabled: !1,
+    size: 28,
+    color: "primary"
+  }, R), [e] = K(T, ["class", "value", "defaultValue", "max", "precision", "readOnly", "disabled", "size", "icon", "emptyIcon", "name", "color", "error", "helperText", "id", "onChange", "ref"]), [m, y] = X({
+    value: () => e.value,
+    defaultValue: e.defaultValue,
+    onChange: (r) => e.onChange?.(r)
+  }), [E, _] = N(null), I = () => E() ?? m(), i = () => !e.readOnly && !e.disabled, b = (r, l) => {
+    if (e.precision === 1)
+      return l + 1;
+    const {
+      left: t,
+      width: o
+    } = r.currentTarget.getBoundingClientRect(), n = r.clientX - t < o / 2;
+    return l + (n ? 0.5 : 1);
+  }, M = (r, l) => {
+    i() && y(b(r, l));
+  }, g = (r) => {
+    y(Math.max(0, Math.min(e.max, r)));
+  }, O = (r) => {
+    i() && (r.key === "ArrowRight" || r.key === "ArrowUp" ? (r.preventDefault(), g(m() + e.precision)) : r.key === "ArrowLeft" || r.key === "ArrowDown" ? (r.preventDefault(), g(m() - e.precision)) : r.key === "Home" ? (r.preventDefault(), g(0)) : r.key === "End" && (r.preventDefault(), g(e.max)));
+  }, V = () => e.icon ?? u(S, {
+    name: "star",
+    fill: 1,
+    get size() {
+      return e.size;
+    }
+  }), H = () => e.emptyIcon ?? u(S, {
+    name: "star",
+    get size() {
+      return e.size;
+    }
+  });
+  return (() => {
+    var r = J();
+    w(r, "keydown", i() ? O : void 0, !0);
+    var l = j(e.ref);
+    return typeof l == "function" && L(l, r), s(r, u(U, {
+      get each() {
+        return Array.from({
+          length: e.max
+        }, (t, o) => o);
+      },
+      children: (t) => {
+        const o = () => Math.max(0, Math.min(1, I() - t));
+        return (() => {
+          var n = Q(), c = n.firstChild, d = c.nextSibling;
+          return w(n, "mouseleave", i() ? () => _(null) : void 0), w(n, "mousemove", i() ? (a) => _(e.precision === 0.5 ? b(a, t) : t + 1) : void 0, !0), n.$$click = (a) => M(a, t), s(c, H), s(d, V), f((a) => {
+            var x = `${e.size}px`, k = `${e.size}px`, $ = i() ? "pointer" : "default", z = `${o() * 100}%`;
+            return x !== a.e && p(n, "width", a.e = x), k !== a.t && p(n, "height", a.t = k), $ !== a.a && p(n, "cursor", a.a = $), z !== a.o && p(d, "width", a.o = z), a;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+          }), n;
+        })();
+      }
+    }), null), s(r, u(A, {
+      get when() {
+        return e.name;
+      },
+      get children() {
+        var t = q();
+        return f(() => v(t, "name", e.name)), f(() => t.value = m()), t;
+      }
+    }), null), s(r, u(A, {
+      get when() {
+        return P(() => e.helperText != null)() && e.helperText !== !1;
+      },
+      get children() {
+        var t = G();
+        return s(t, () => e.helperText), f(() => C(t, D("smwb-rating__helper", e.error && "smwb-rating__helper_error"))), t;
+      }
+    }), null), f((t) => {
+      var o = e.id, n = D("smwb-rating", {
+        "smwb-rating_readonly": e.readOnly,
+        "smwb-rating_disabled": e.disabled,
+        "smwb-rating_error": e.error
+      }, e.color !== "primary" && `smwb-rating_color-${e.color}`, e.class), c = `${m()} of ${e.max}`, d = i() ? 0 : void 0;
+      return o !== t.e && v(r, "id", t.e = o), n !== t.t && C(r, t.t = n), c !== t.a && v(r, "aria-label", t.a = c), d !== t.o && v(r, "tabindex", t.o = d), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), r;
+  })();
+}
+F(["keydown", "click", "mousemove"]);
+export {
+  ae as Rating
+};
+//# sourceMappingURL=rating.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating.js","sources":["../../../../src/components/inputs/rating/rating.tsx"],"sourcesContent":["import { type JSX, For, Show, createSignal, mergeProps, splitProps } 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 type RatingColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface RatingProps {\n  class?: string;\n  /** Controlled value. */\n  value?: number;\n  /** Uncontrolled initial value. */\n  defaultValue?: number;\n  /** Number of icons. */\n  max?: number;\n  /** Smallest selectable increment: 1 (whole) or 0.5 (half). */\n  precision?: 1 | 0.5;\n  readOnly?: boolean;\n  disabled?: boolean;\n  size?: number;\n  /** Filled icon. */\n  icon?: JSX.Element;\n  /** Empty icon. */\n  emptyIcon?: JSX.Element;\n  name?: string;\n  /** Color of the filled icons. */\n  color?: RatingColor;\n  /** Renders the control in an error state. */\n  error?: boolean;\n  /** Supporting text shown below the control. */\n  helperText?: JSX.Element;\n  id?: string;\n  onChange?: (value: number) => void;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Rating(props: RatingProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      defaultValue: 0,\n      max: 5,\n      precision: 1 as 1 | 0.5,\n      readOnly: false,\n      disabled: false,\n      size: 28,\n      color: \"primary\" as RatingColor,\n    },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"value\",\n    \"defaultValue\",\n    \"max\",\n    \"precision\",\n    \"readOnly\",\n    \"disabled\",\n    \"size\",\n    \"icon\",\n    \"emptyIcon\",\n    \"name\",\n    \"color\",\n    \"error\",\n    \"helperText\",\n    \"id\",\n    \"onChange\",\n    \"ref\",\n  ]);\n\n  const [current, setCurrent] = createControllableState<number>({\n    value: () => local.value,\n    defaultValue: local.defaultValue,\n    onChange: (next) => local.onChange?.(next),\n  });\n  const [hover, setHover] = createSignal<number | null>(null);\n\n  const display = (): number => hover() ?? current();\n  const interactive = (): boolean => !local.readOnly && !local.disabled;\n\n  const valueFromEvent = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): number => {\n    if (local.precision === 1) {\n      return starIndex + 1;\n    }\n    const { left, width } = event.currentTarget.getBoundingClientRect();\n    const isLeftHalf = event.clientX - left < width / 2;\n    return starIndex + (isLeftHalf ? 0.5 : 1);\n  };\n\n  const handleSelect = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): void => {\n    if (!interactive()) return;\n    setCurrent(valueFromEvent(event, starIndex));\n  };\n\n  const commit = (next: number): void => {\n    setCurrent(Math.max(0, Math.min(local.max, next)));\n  };\n\n  const handleKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (!interactive()) return;\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      commit(current() + local.precision);\n    } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n      event.preventDefault();\n      commit(current() - local.precision);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      commit(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      commit(local.max);\n    }\n  };\n\n  const filledIcon = (): JSX.Element => local.icon ?? <Icon name=\"star\" fill={1} size={local.size} />;\n  const blankIcon = (): JSX.Element => local.emptyIcon ?? <Icon name=\"star\" size={local.size} />;\n\n  return (\n    <span\n      ref={mergeRefs(local.ref)}\n      id={local.id}\n      class={cn(\n        \"smwb-rating\",\n        { \"smwb-rating_readonly\": local.readOnly, \"smwb-rating_disabled\": local.disabled, \"smwb-rating_error\": local.error },\n        local.color !== \"primary\" && `smwb-rating_color-${local.color}`,\n        local.class\n      )}\n      data-testid=\"rating\"\n      role=\"img\"\n      aria-label={`${current()} of ${local.max}`}\n      tabindex={interactive() ? 0 : undefined}\n      onKeyDown={interactive() ? handleKeyDown : undefined}\n    >\n      <For each={Array.from({ length: local.max }, (_, index) => index)}>\n        {(index) => {\n          const fillRatio = (): number => Math.max(0, Math.min(1, display() - index));\n          return (\n            <span\n              class=\"smwb-rating__item\"\n              style={{ width: `${local.size}px`, height: `${local.size}px`, cursor: interactive() ? \"pointer\" : \"default\" }}\n              onClick={(event) => handleSelect(event, index)}\n              onMouseMove={\n                interactive()\n                  ? (event) => setHover(local.precision === 0.5 ? valueFromEvent(event, index) : index + 1)\n                  : undefined\n              }\n              onMouseLeave={interactive() ? () => setHover(null) : undefined}\n            >\n              <span class=\"smwb-rating__icon smwb-rating__icon_empty\">{blankIcon()}</span>\n              <span class=\"smwb-rating__icon smwb-rating__icon_filled\" style={{ width: `${fillRatio() * 100}%` }}>\n                {filledIcon()}\n              </span>\n            </span>\n          );\n        }}\n      </For>\n      <Show when={local.name}>\n        <input type=\"hidden\" name={local.name} value={current()} />\n      </Show>\n      <Show when={local.helperText != null && (local.helperText as unknown) !== false}>\n        <span class={cn(\"smwb-rating__helper\", local.error && \"smwb-rating__helper_error\")}>{local.helperText}</span>\n      </Show>\n    </span>\n  );\n}\n\nexport default Rating;\n"],"names":["Rating","props","merged","mergeProps","defaultValue","max","precision","readOnly","disabled","size","color","local","splitProps","current","setCurrent","createControllableState","value","onChange","next","hover","setHover","createSignal","display","interactive","valueFromEvent","event","starIndex","left","width","currentTarget","getBoundingClientRect","isLeftHalf","clientX","handleSelect","commit","Math","min","handleKeyDown","key","preventDefault","filledIcon","icon","_$createComponent","Icon","name","fill","blankIcon","emptyIcon","_el$","_tmpl$3","_$addEventListener","undefined","_ref$","mergeRefs","ref","_$use","_$insert","For","each","Array","from","length","_","index","children","fillRatio","_el$4","_tmpl$4","_el$5","firstChild","_el$6","nextSibling","$$click","_$effect","_p$","_v$5","_v$6","_v$7","_v$8","e","_$setStyleProperty","t","a","o","Show","when","_el$2","_tmpl$","_$setAttribute","_$memo","helperText","_el$3","_tmpl$2","_$className","cn","error","_v$","id","_v$2","class","_v$3","_v$4","_$delegateEvents"],"mappings":"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"}

package/dist/components/inputs/selectField/dropdownMenu.d.ts

@@ -0,0 +1,43 @@
+import { type Accessor, type JSX } from "solid-js";
+import type { Middleware } from "@floating-ui/dom";
+export interface DropdownItem {
+    key?: string | number;
+    text: string;
+    value: string | number | undefined | null;
+    helperText?: string;
+    disabled?: boolean;
+    /** Optional group label; consecutive items sharing it get a group header. */
+    group?: string;
+}
+type SearchEvent = Event & {
+    currentTarget: HTMLInputElement;
+};
+type ItemEvent = Event & {
+    currentTarget: Element;
+    target: Element;
+};
+export interface DropdownItemProps {
+    menuMaxHeight?: number | undefined;
+    menuMiddleware?: Middleware[] | undefined;
+    menuNoItemsMessage?: JSX.Element;
+    search?: boolean | undefined;
+    onSearchInputChange?: ((event: SearchEvent) => void) | undefined;
+    items: DropdownItem[];
+    searchValue?: string | number | undefined;
+    isOpen: boolean;
+    onClose: () => void;
+    anchorElement: Accessor<HTMLElement | null>;
+    value?: undefined | null | string | number | (undefined | null | string | number)[];
+    onItemClick: (event: ItemEvent, item: DropdownItem) => void;
+    isLoading?: boolean | undefined;
+    optionRenderer?: ((args: import("../../navigation/menu").MenuItemProps) => JSX.Element) | undefined;
+    container?: HTMLElement | undefined;
+    createOption?: {
+        text: JSX.Element;
+        onCreate: (event: ItemEvent) => void;
+    } | undefined;
+    virtualized?: boolean | undefined;
+    itemHeight?: number | undefined;
+}
+export declare function DropdownMenu(props: DropdownItemProps): JSX.Element;
+export default DropdownMenu;

package/dist/components/inputs/selectField/dropdownMenu.js

@@ -0,0 +1,202 @@
+import { createComponent as r, Portal as L, insert as u, addEventListener as S, effect as O, setStyleProperty as d, template as o, memo as R } from "solid-js/web";
+import { createSignal as W, createEffect as x, onCleanup as A, Show as l, For as b } from "solid-js";
+import { createVirtualList as D } from "../../../primitives/createVirtualList.js";
+import { Menu as P } from "../../navigation/menu/menu.js";
+import { TextField as T } from "../textField/textField.js";
+import { MenuDivider as V } from "../../navigation/menu/menuDivider.js";
+import { ProgressIndicator as F } from "../../feedBack/progressIndicator/progressIndicator.js";
+import { MenuItem as $ } from "../../navigation/menu/menuItem.js";
+var G = /* @__PURE__ */ o("<span class=smwb-select-field__option__helper-text>"), Y = /* @__PURE__ */ o("<li class=smwb-select-field__group-label role=presentation>"), z = /* @__PURE__ */ o("<li class=smwb-select-field__menu-search>"), K = /* @__PURE__ */ o("<div class=smwb-select-field__menu-loading>"), N = /* @__PURE__ */ o("<li role=presentation class=smwb-select-field__virtual-viewport><div class=smwb-select-field__virtual-scroller style=overflow-y:auto><div style=position:relative><ul role=presentation class=smwb-select-field__virtual-list style=list-style:none;margin:0;padding:0>"), j = /* @__PURE__ */ o("<li class=smwb-select-field__empty-items>");
+function ee(t) {
+  const C = () => Array.isArray(t.value) ? t.value : [t.value], m = () => t.items.some((e) => !!e.group), M = () => t.itemHeight ?? 40, h = () => t.menuMaxHeight || 240, g = () => !!t.virtualized && !m() && !t.isLoading && t.items.length > 0, s = D({
+    itemCount: () => g() ? t.items.length : 0,
+    itemHeight: M,
+    viewportHeight: h
+  }), [f, k] = W();
+  x(() => {
+    const e = t.anchorElement();
+    t.isOpen && e && k(e.clientWidth);
+  }), x(() => {
+    if (!t.isOpen) return;
+    const e = (n) => {
+      n.key === "Escape" && t.onClose();
+    };
+    document.addEventListener("keydown", e), A(() => document.removeEventListener("keydown", e));
+  });
+  const E = (e) => {
+    const n = [];
+    let c;
+    for (const a of e)
+      m() && a.group !== c && (c = a.group, n.push({
+        kind: "group",
+        group: a.group
+      })), n.push({
+        kind: "item",
+        item: a
+      });
+    return n;
+  }, v = (e) => r($, {
+    get value() {
+      return e.value;
+    },
+    get disabled() {
+      return e.disabled;
+    },
+    get selected() {
+      return !!C().find((n) => n === e.value);
+    },
+    onClick: (n) => {
+      e.disabled || t.onItemClick(n, e);
+    },
+    get optionRenderer() {
+      return t.optionRenderer;
+    },
+    get children() {
+      return [R(() => e.text), r(l, {
+        get when() {
+          return e.helperText;
+        },
+        get children() {
+          var n = G();
+          return u(n, () => e.helperText), n;
+        }
+      })];
+    }
+  }), I = (e) => e.kind === "group" ? (() => {
+    var n = Y();
+    return u(n, () => e.group), n;
+  })() : v(e.item), H = () => ({
+    ...f() ? {
+      "min-width": `${f()}px`
+    } : {},
+    ...t.menuMaxHeight ? {
+      "max-height": `${t.menuMaxHeight}px`,
+      "overflow-y": "auto"
+    } : {}
+  });
+  return r(L, {
+    get mount() {
+      return t.container ?? document.body;
+    },
+    get children() {
+      return r(P, {
+        get isOpen() {
+          return t.isOpen;
+        },
+        onClose: () => t.onClose(),
+        get anchorElement() {
+          return t.anchorElement();
+        },
+        get middleware() {
+          return t.menuMiddleware;
+        },
+        get style() {
+          return H();
+        },
+        get children() {
+          return [r(l, {
+            get when() {
+              return t.search;
+            },
+            get children() {
+              return [(() => {
+                var e = z();
+                return u(e, r(T, {
+                  class: "smwb-select-field__menu-search-input",
+                  type: "text",
+                  placeholder: "Найти...",
+                  get value() {
+                    return t.searchValue;
+                  },
+                  onChange: (n) => t.onSearchInputChange?.(n),
+                  fullWidth: !0
+                })), e;
+              })(), r(V, {})];
+            }
+          }), r(l, {
+            get when() {
+              return t.isLoading;
+            },
+            get children() {
+              var e = K();
+              return u(e, r(F, {
+                type: "indeterminate",
+                variant: "circular",
+                class: "smwb-select-field__menu__loader"
+              })), e;
+            }
+          }), r(l, {
+            get when() {
+              return !t.isLoading;
+            },
+            get children() {
+              return r(l, {
+                get when() {
+                  return g();
+                },
+                get fallback() {
+                  return r(l, {
+                    get when() {
+                      return t.items.length > 0;
+                    },
+                    get fallback() {
+                      return r(l, {
+                        get when() {
+                          return !t.createOption;
+                        },
+                        get children() {
+                          var e = j();
+                          return u(e, () => t.menuNoItemsMessage || "Опций не найдено."), e;
+                        }
+                      });
+                    },
+                    get children() {
+                      return r(b, {
+                        get each() {
+                          return E(t.items);
+                        },
+                        children: (e) => I(e)
+                      });
+                    }
+                  });
+                },
+                get children() {
+                  var e = N(), n = e.firstChild, c = n.firstChild, a = c.firstChild;
+                  return S(n, "scroll", s.onScroll), u(a, r(b, {
+                    get each() {
+                      return t.items.slice(s.startIndex(), s.endIndex());
+                    },
+                    children: (i) => v(i)
+                  })), O((i) => {
+                    var _ = `${h()}px`, w = `${s.totalHeight()}px`, y = `translateY(${s.offsetY()}px)`;
+                    return _ !== i.e && d(n, "max-height", i.e = _), w !== i.t && d(c, "height", i.t = w), y !== i.a && d(a, "transform", i.a = y), i;
+                  }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0
+                  }), e;
+                }
+              });
+            }
+          }), r(l, {
+            get when() {
+              return t.createOption;
+            },
+            children: (e) => r($, {
+              value: "__create__",
+              onClick: (n) => e().onCreate(n),
+              class: "smwb-select-field__create-option",
+              get children() {
+                return e().text;
+              }
+            })
+          })];
+        }
+      });
+    }
+  });
+}
+export {
+  ee as DropdownMenu
+};
+//# sourceMappingURL=dropdownMenu.js.map

package/dist/components/inputs/selectField/dropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdownMenu.js","sources":["../../../../src/components/inputs/selectField/dropdownMenu.tsx"],"sourcesContent":["import { type Accessor, type JSX, For, Show, createEffect, createSignal, onCleanup } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport type { Middleware } from \"@floating-ui/dom\";\nimport { Menu, MenuDivider, MenuItem } from \"../../navigation/menu\";\nimport { TextField } from \"../textField\";\nimport { ProgressIndicator } from \"../../feedBack/progressIndicator\";\nimport { createVirtualList } from \"../../../primitives/createVirtualList\";\n\nexport interface DropdownItem {\n  key?: string | number;\n  text: string;\n  value: string | number | undefined | null;\n  helperText?: string;\n  disabled?: boolean;\n  /** Optional group label; consecutive items sharing it get a group header. */\n  group?: string;\n}\n\ntype SearchEvent = Event & { currentTarget: HTMLInputElement };\ntype ItemEvent = Event & { currentTarget: Element; target: Element };\n\nexport interface DropdownItemProps {\n  menuMaxHeight?: number | undefined;\n  menuMiddleware?: Middleware[] | undefined;\n  menuNoItemsMessage?: JSX.Element;\n  search?: boolean | undefined;\n  onSearchInputChange?: ((event: SearchEvent) => void) | undefined;\n  items: DropdownItem[];\n  searchValue?: string | number | undefined;\n  isOpen: boolean;\n  onClose: () => void;\n  anchorElement: Accessor<HTMLElement | null>;\n  value?: undefined | null | string | number | (undefined | null | string | number)[];\n  onItemClick: (event: ItemEvent, item: DropdownItem) => void;\n  isLoading?: boolean | undefined;\n  optionRenderer?: ((args: import(\"../../navigation/menu\").MenuItemProps) => JSX.Element) | undefined;\n  container?: HTMLElement | undefined;\n  createOption?: { text: JSX.Element; onCreate: (event: ItemEvent) => void } | undefined;\n  virtualized?: boolean | undefined;\n  itemHeight?: number | undefined;\n}\n\ntype Row = { kind: \"group\"; group?: string | undefined } | { kind: \"item\"; item: DropdownItem };\n\nexport function DropdownMenu(props: DropdownItemProps): JSX.Element {\n  const valueArray = (): Array<string | number | undefined | null> =>\n    Array.isArray(props.value) ? props.value : [props.value];\n  const hasGroups = (): boolean => props.items.some((i) => !!i.group);\n  const itemHeight = (): number => props.itemHeight ?? 40;\n  const viewportHeight = (): number => props.menuMaxHeight || 240;\n  const useVirtual = (): boolean => !!props.virtualized && !hasGroups() && !props.isLoading && props.items.length > 0;\n\n  const virtual = createVirtualList({\n    itemCount: () => (useVirtual() ? props.items.length : 0),\n    itemHeight,\n    viewportHeight,\n  });\n\n  const [menuMinWidth, setMenuMinWidth] = createSignal<number>();\n\n  createEffect(() => {\n    const anchor = props.anchorElement();\n    if (props.isOpen && anchor) setMenuMinWidth(anchor.clientWidth);\n  });\n\n  createEffect(() => {\n    if (!props.isOpen) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") props.onClose();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const toRows = (list: DropdownItem[]): Row[] => {\n    const out: Row[] = [];\n    let lastGroup: string | undefined;\n    for (const el of list) {\n      if (hasGroups() && el.group !== lastGroup) {\n        lastGroup = el.group;\n        out.push({ kind: \"group\", group: el.group });\n      }\n      out.push({ kind: \"item\", item: el });\n    }\n    return out;\n  };\n\n  const renderItem = (el: DropdownItem): JSX.Element => (\n    <MenuItem\n      value={el.value}\n      disabled={el.disabled}\n      selected={!!valueArray().find((v) => v === el.value)}\n      onClick={(e) => {\n        if (!el.disabled) props.onItemClick(e as ItemEvent, el);\n      }}\n      optionRenderer={props.optionRenderer}\n    >\n      {el.text}\n      <Show when={el.helperText}>\n        <span class=\"smwb-select-field__option__helper-text\">{el.helperText}</span>\n      </Show>\n    </MenuItem>\n  );\n\n  const renderRow = (row: Row): JSX.Element =>\n    row.kind === \"group\" ? (\n      <li class=\"smwb-select-field__group-label\" role=\"presentation\">\n        {row.group}\n      </li>\n    ) : (\n      renderItem(row.item)\n    );\n\n  const menuStyle = (): JSX.CSSProperties => ({\n    ...(menuMinWidth() ? { \"min-width\": `${menuMinWidth()}px` } : {}),\n    ...(props.menuMaxHeight ? { \"max-height\": `${props.menuMaxHeight}px`, \"overflow-y\": \"auto\" } : {}),\n  });\n\n  return (\n    <Portal mount={props.container ?? document.body}>\n      <Menu\n        isOpen={props.isOpen}\n        onClose={() => props.onClose()}\n        anchorElement={props.anchorElement()}\n        middleware={props.menuMiddleware}\n        style={menuStyle()}\n      >\n        <Show when={props.search}>\n          <li class=\"smwb-select-field__menu-search\">\n            <TextField\n              class=\"smwb-select-field__menu-search-input\"\n              type=\"text\"\n              placeholder=\"Найти...\"\n              value={props.searchValue}\n              onChange={(e) => props.onSearchInputChange?.(e as SearchEvent)}\n              fullWidth\n            />\n          </li>\n          <MenuDivider />\n        </Show>\n\n        <Show when={props.isLoading}>\n          <div class=\"smwb-select-field__menu-loading\">\n            <ProgressIndicator type=\"indeterminate\" variant=\"circular\" class=\"smwb-select-field__menu__loader\" />\n          </div>\n        </Show>\n\n        <Show when={!props.isLoading}>\n          <Show\n            when={useVirtual()}\n            fallback={\n              <Show\n                when={props.items.length > 0}\n                fallback={\n                  <Show when={!props.createOption}>\n                    <li class=\"smwb-select-field__empty-items\">{props.menuNoItemsMessage || \"Опций не найдено.\"}</li>\n                  </Show>\n                }\n              >\n                <For each={toRows(props.items)}>{(row) => renderRow(row)}</For>\n              </Show>\n            }\n          >\n            <li role=\"presentation\" class=\"smwb-select-field__virtual-viewport\">\n              <div\n                class=\"smwb-select-field__virtual-scroller\"\n                style={{ \"max-height\": `${viewportHeight()}px`, \"overflow-y\": \"auto\" }}\n                onScroll={virtual.onScroll}\n              >\n                <div style={{ height: `${virtual.totalHeight()}px`, position: \"relative\" }}>\n                  <ul\n                    role=\"presentation\"\n                    class=\"smwb-select-field__virtual-list\"\n                    style={{ transform: `translateY(${virtual.offsetY()}px)`, \"list-style\": \"none\", margin: \"0\", padding: \"0\" }}\n                  >\n                    <For each={props.items.slice(virtual.startIndex(), virtual.endIndex())}>{(el) => renderItem(el)}</For>\n                  </ul>\n                </div>\n              </div>\n            </li>\n          </Show>\n        </Show>\n\n        <Show when={props.createOption}>\n          {(createOption) => (\n            <MenuItem\n              value=\"__create__\"\n              onClick={(e) => createOption().onCreate(e as ItemEvent)}\n              class=\"smwb-select-field__create-option\"\n            >\n              {createOption().text}\n            </MenuItem>\n          )}\n        </Show>\n      </Menu>\n    </Portal>\n  );\n}\n\nexport default DropdownMenu;\n"],"names":["DropdownMenu","props","valueArray","Array","isArray","value","hasGroups","items","some","i","group","itemHeight","viewportHeight","menuMaxHeight","useVirtual","virtualized","isLoading","length","virtual","createVirtualList","itemCount","menuMinWidth","setMenuMinWidth","createSignal","createEffect","anchor","anchorElement","isOpen","clientWidth","onKeyDown","event","key","onClose","document","addEventListener","onCleanup","removeEventListener","toRows","list","out","lastGroup","el","push","kind","item","renderItem","_$createComponent","MenuItem","disabled","selected","find","v","onClick","e","onItemClick","optionRenderer","children","_$memo","text","Show","when","helperText","_el$","_tmpl$","_$insert","renderRow","row","_el$2","_tmpl$2","menuStyle","Portal","mount","container","body","Menu","middleware","menuMiddleware","style","search","_el$3","_tmpl$3","TextField","type","placeholder","searchValue","onChange","onSearchInputChange","fullWidth","MenuDivider","_el$4","_tmpl$4","ProgressIndicator","variant","fallback","createOption","_el$9","_tmpl$6","menuNoItemsMessage","For","each","_el$5","_tmpl$5","_el$6","firstChild","_el$7","_el$8","_$addEventListener","onScroll","slice","startIndex","endIndex","_$effect","_p$","_v$","_v$2","totalHeight","_v$3","offsetY","_$setStyleProperty","t","a","undefined","onCreate"],"mappings":"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"}

package/dist/components/inputs/selectField/index.d.ts

@@ -0,0 +1,4 @@
+export { SelectField, default } from "./selectField";
+export type { SelectFieldProps, OnSelectChange } from "./selectField";
+export { DropdownMenu } from "./dropdownMenu";
+export type { DropdownItem, DropdownItemProps } from "./dropdownMenu";

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

@@ -0,0 +1,53 @@
+import { type JSX } from "solid-js";
+import { type DropdownItem, type DropdownItemProps } from "./dropdownMenu";
+import type { MenuItemProps } from "../../navigation/menu";
+import { type Ref } from "../../../primitives/mergeRefs";
+type SelectEvent = Event & {
+    currentTarget: Element;
+    target: Element;
+};
+type SearchEvent = Event & {
+    currentTarget: HTMLInputElement;
+};
+type SelectValue = null | string | number | (string | number | undefined | null)[];
+export type OnSelectChange = (e: SelectEvent, data: SelectFieldProps) => void;
+export interface SelectFieldProps {
+    class?: string;
+    value?: SelectValue | undefined;
+    defaultValue?: null | string | number | (string | number)[];
+    onChange?: OnSelectChange;
+    disabled?: boolean;
+    readOnly?: boolean;
+    name?: string | undefined;
+    multiple?: boolean;
+    menuMaxHeight?: number;
+    menuMiddleware?: DropdownItemProps["menuMiddleware"];
+    menuNoItemsMessage?: JSX.Element;
+    menuContainer?: HTMLElement;
+    search?: true | false | "menu";
+    chips?: boolean;
+    isFocused?: boolean;
+    error?: boolean;
+    items: DropdownItem[];
+    label?: string;
+    variant?: "outlined" | "filled";
+    fullWidth?: boolean;
+    helperText?: JSX.Element;
+    onSearch?: (e: SearchEvent) => void;
+    isLoading?: boolean;
+    resetSearch?: () => void;
+    inline?: boolean;
+    endAdornment?: JSX.Element;
+    hideSelectArrowIcon?: boolean;
+    optionRenderer?: (args: MenuItemProps) => JSX.Element;
+    clearable?: boolean;
+    creatable?: boolean;
+    onCreate?: (inputValue: string, event: SelectEvent) => void;
+    virtualized?: boolean;
+    itemHeight?: number;
+    "aria-label"?: string;
+    id?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function SelectField(props: SelectFieldProps): JSX.Element;
+export default SelectField;