@smwb/ui-solid 0.12.1 → 0.14.0

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

@@ -1 +1 @@
-{"version":3,"file":"rating.js","sources":["../../../../../src/components/inputs/rating/rating.tsx"],"sourcesContent":["import { type JSX, For, Show, children, 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  // Read once: markup passed as a prop is created anew on every read, and\n  // during hydration a copy the server never rendered has no DOM node.\n  const helperText = children(() => local.helperText);\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={helperText() != null && (helperText() as unknown) !== false}>\n        <span class={cn(\"smwb-rating__helper\", local.error && \"smwb-rating__helper_error\")}>{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","helperText","children","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","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","_el$3","_tmpl$2","_$className","cn","error","_v$","id","_v$2","class","_v$3","_v$4","_$delegateEvents"],"mappings":"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"}
+{"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 { createHelperText, hasHelperText } from \"../../../primitives/createHelperText\";\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 of the control: the slider, or the image of a read-only rating. */\n  id?: string;\n  /**\n   * What is rated: the accessible name of the slider, \"Rating\" by default. A read-only rating is an image named by\n   * its value (\"3 of 5\"), after this label.\n   */\n  \"aria-label\"?: string;\n  /** Ids of more elements that describe the control, after its helper text. */\n  \"aria-describedby\"?: string;\n  onChange?: (value: number) => void;\n  /** The control: the slider, or the image of a read-only rating. */\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    \"aria-label\",\n    \"aria-describedby\",\n    \"onChange\",\n    \"ref\",\n  ]);\n  // Reads the helper text once: markup passed as a prop is created anew on\n  // every read, and during hydration a copy the server never rendered has no DOM\n  // node. The rating draws any helper text it is given, so the read creates\n  // nothing that is not drawn.\n  const helper = createHelperText(() => local.helperText, { describedBy: () => local[\"aria-describedby\"] });\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  // Solid binds event handlers once, so they are always attached and check\n  // `interactive()` themselves (handleKeyDown too): a rating can turn read-only,\n  // or back, after it renders. Leaving always clears the preview, so a rating\n  // that turns read-only while hovered does not keep it.\n  const onStarMouseMove = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): void => {\n    if (!interactive()) return;\n    setHover(local.precision === 0.5 ? valueFromEvent(event, starIndex) : starIndex + 1);\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  const valueText = (): string => `${current()} of ${local.max}`;\n  // The slider is named by what is rated. An image has no value, so its name\n  // carries the value too.\n  const label = (): string => {\n    const rated = local[\"aria-label\"];\n    if (!local.readOnly) return rated || \"Rating\";\n    return rated ? `${rated} ${valueText()}` : valueText();\n  };\n\n  // The control is a slider, or an image named by its value when the rating is\n  // read-only. The helper text stays outside it: the children of a slider or an\n  // image are presentational, so assistive technology would never read it.\n  return (\n    <span\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    >\n      <span\n        ref={mergeRefs(local.ref)}\n        id={local.id}\n        class=\"smwb-rating__control\"\n        data-testid=\"rating\"\n        role={local.readOnly ? \"img\" : \"slider\"}\n        aria-label={label()}\n        aria-valuemin={local.readOnly ? undefined : 0}\n        aria-valuemax={local.readOnly ? undefined : local.max}\n        aria-valuenow={local.readOnly ? undefined : current()}\n        aria-valuetext={local.readOnly ? undefined : valueText()}\n        aria-disabled={!local.readOnly && local.disabled ? true : undefined}\n        aria-describedby={helper.describedBy()}\n        tabindex={interactive() ? 0 : undefined}\n        onKeyDown={handleKeyDown}\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={{\n                  width: `${local.size}px`,\n                  height: `${local.size}px`,\n                  cursor: interactive() ? \"pointer\" : \"default\",\n                }}\n                onClick={(event) => handleSelect(event, index)}\n                onMouseMove={(event) => onStarMouseMove(event, index)}\n                onMouseLeave={() => setHover(null)}\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      </span>\n      <Show when={local.name}>\n        <input type=\"hidden\" name={local.name} value={current()} />\n      </Show>\n      <Show when={hasHelperText(helper.text())}>\n        <span id={helper.id} class={cn(\"smwb-rating__helper\", local.error && \"smwb-rating__helper_error\")}>\n          {helper.text()}\n        </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","helper","createHelperText","helperText","describedBy","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","onStarMouseMove","filledIcon","icon","_$createComponent","Icon","name","fill","blankIcon","emptyIcon","valueText","label","rated","_el$","_tmpl$3","_el$2","firstChild","$$keydown","_ref$","mergeRefs","ref","_$use","_$insert","For","each","Array","from","length","_","index","children","fillRatio","_el$5","_tmpl$4","_el$6","_el$7","nextSibling","addEventListener","$$mousemove","$$click","_$effect","_p$","_v$12","_v$13","_v$14","_v$15","e","_$setStyleProperty","t","a","o","undefined","Show","when","_el$3","_tmpl$","_$setAttribute","hasHelperText","text","_el$4","_tmpl$2","_v$","id","_v$2","cn","error","_$className","_v$3","class","_v$4","_v$5","_v$6","_v$7","_v$8","_v$9","_v$0","_v$1","_v$10","_v$11","i","n","s","h","r","d","l","_$delegateEvents"],"mappings":"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"}

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

@@ -1,196 +1,320 @@
-import { createComponent as r, Portal as L, insert as u, addEventListener as S, effect as O, setStyleProperty as d, isServer as R, template as o, memo as W } from "solid-js/web";
-import { createSignal as A, createEffect as x, onCleanup as D, Show as l, For as b } from "solid-js";
-import { createVirtualList as P } from "../../../primitives/createVirtualList.js";
-import { Menu as T } from "../../navigation/menu/menu.js";
-import { TextField as V } from "../textField/textField.js";
-import { MenuDivider as F } from "../../navigation/menu/menuDivider.js";
-import { ProgressIndicator as G } from "../../feedBack/progressIndicator/progressIndicator.js";
-import { MenuItem as $ } from "../../navigation/menu/menuItem.js";
-var Y = /* @__PURE__ */ o("<span class=smwb-select-field__option__helper-text>"), z = /* @__PURE__ */ o("<li class=smwb-select-field__group-label role=presentation>"), K = /* @__PURE__ */ o("<li class=smwb-select-field__menu-search>"), N = /* @__PURE__ */ o("<div class=smwb-select-field__menu-loading>"), j = /* @__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>"), q = /* @__PURE__ */ o("<li class=smwb-select-field__empty-items>");
-function te(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 = P({
-    itemCount: () => g() ? t.items.length : 0,
-    itemHeight: M,
-    viewportHeight: h
-  }), [v, k] = A();
-  x(() => {
-    const e = t.anchorElement();
-    t.isOpen && e && k(e.clientWidth);
-  }), x(() => {
-    if (!t.isOpen) return;
-    const e = (n) => {
-      n.key === "Escape" && t.onClose();
+import { createComponent as r, Portal as F, insert as g, mergeProps as R, addEventListener as G, use as Y, effect as P, setStyleProperty as I, setAttribute as y, memo as S, isServer as K, template as f, spread as N } from "solid-js/web";
+import { createSignal as j, createEffect as k, onCleanup as q, Show as h, For as $, splitProps as J } from "solid-js";
+import p from "clsx";
+import { createVirtualList as Q } from "../../../primitives/createVirtualList.js";
+import { callHandler as U } from "../../../primitives/callHandler.js";
+import { Menu as X } from "../../navigation/menu/menu.js";
+import { TextField as Z } from "../textField/textField.js";
+import { MenuDivider as ee } from "../../navigation/menu/menuDivider.js";
+import { ProgressIndicator as te } from "../../feedBack/progressIndicator/progressIndicator.js";
+import { Ripple as ne } from "../../base/ripple/ripple.js";
+var le = /* @__PURE__ */ f("<li><span class=smwb-menu__item-inner>"), ie = /* @__PURE__ */ f("<span class=smwb-select-field__option__helper-text>"), re = /* @__PURE__ */ f("<li class=smwb-select-field__group-label role=presentation>"), oe = /* @__PURE__ */ f("<li role=group class=smwb-select-field__group><div class=smwb-select-field__group-label></div><ul role=presentation class=smwb-select-field__group-options>"), ae = /* @__PURE__ */ f("<li class=smwb-select-field__menu-search>"), se = /* @__PURE__ */ f("<li class=smwb-select-field__menu-loading>"), ce = /* @__PURE__ */ f("<li role=presentation class=smwb-select-field__virtual-viewport><div class=smwb-select-field__virtual-scroller tabindex=-1 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>"), ue = /* @__PURE__ */ f("<li><ul role=listbox class=smwb-select-field__listbox>"), de = /* @__PURE__ */ f("<li class=smwb-select-field__empty-items>");
+function A(e, u) {
+  return `${e}-option-${u}`;
+}
+function me(e, u) {
+  for (let c = e.parentElement; c; c = c.parentElement) {
+    if (c.scrollHeight > c.clientHeight) {
+      const d = c.getBoundingClientRect(), m = e.getBoundingClientRect();
+      m.top < d.top ? c.scrollTop -= d.top - m.top : m.bottom > d.bottom && (c.scrollTop += m.bottom - d.bottom);
+    }
+    if (c === u) break;
+  }
+}
+function D(e) {
+  const [u, c] = J(e, ["children", "class", "disabled", "selected", "value", "onClick", "optionRenderer", "ref"]);
+  let d;
+  return (() => {
+    var m = le(), v = m.firstChild;
+    return N(m, R(c, {
+      get class() {
+        return p("smwb-menu__item", u.class, {
+          "smwb-menu__item--disabled": u.disabled,
+          "smwb-menu__item--selected": u.selected
+        });
+      },
+      get "data-value"() {
+        return u.value;
+      },
+      onClick: (b) => U(u.onClick, b),
+      onPointerDown: (b) => {
+        u.disabled || d?.onRipple(b);
+      }
+    }), !1, !0), g(v, () => u.children), g(m, r(ne, {
+      actionRef: (b) => d = b
+    }), null), m;
+  })();
+}
+function $e(e) {
+  const u = () => Array.isArray(e.value) ? e.value : [e.value], c = () => e.items.some((t) => !!t.group), d = () => e.itemHeight ?? 40, m = () => e.menuMaxHeight || 240, v = () => !!e.virtualized && !c() && !e.isLoading && e.items.length > 0, b = () => e.items.length + (e.createOption ? 1 : 0), E = () => e.activeIndex ?? -1, w = Q({
+    itemCount: () => v() ? e.items.length : 0,
+    itemHeight: d,
+    viewportHeight: m
+  });
+  let M, _;
+  const [T, B] = j();
+  k(() => {
+    const t = e.anchorElement();
+    e.isOpen && t && B(t.clientWidth);
+  }), k(() => {
+    if (!e.isOpen) return;
+    const t = (i) => {
+      i.key === "Escape" && !i.defaultPrevented && e.onClose();
     };
-    document.addEventListener("keydown", e), D(() => document.removeEventListener("keydown", e));
+    document.addEventListener("keydown", t), q(() => document.removeEventListener("keydown", t));
+  }), k(() => {
+    const t = E(), i = e.listboxId;
+    if (!e.isOpen || !e.showActive || t < 0 || !i) return;
+    if (v() && _ && t < e.items.length) {
+      const n = t * d(), o = _.clientHeight || m(), s = n < _.scrollTop ? n : n + d() > _.scrollTop + o ? n + d() - o : _.scrollTop;
+      s !== _.scrollTop && (_.scrollTop = s, w.onScroll({
+        currentTarget: {
+          scrollTop: s
+        }
+      }));
+    }
+    const l = document.getElementById(A(i, t));
+    l && me(l, M);
   });
-  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;
-  }, f = (e) => r($, {
-    get value() {
-      return e.value;
+  const H = (t, i, l, n) => ({
+    get id() {
+      return e.listboxId ? A(e.listboxId, t()) : void 0;
     },
-    get disabled() {
-      return e.disabled;
+    role: "option",
+    get "aria-selected"() {
+      return i();
     },
-    get selected() {
-      return !!C().find((n) => n === e.value);
+    "aria-disabled": l || void 0,
+    // With a virtual list only a window of the options exists.
+    get "aria-setsize"() {
+      return v() ? b() : void 0;
     },
-    onClick: (n) => {
-      e.disabled || t.onItemClick(n, e);
+    get "aria-posinset"() {
+      return v() ? t() + 1 : void 0;
     },
-    get optionRenderer() {
-      return t.optionRenderer;
+    // The virtual list places its rows at itemHeight: a row takes that height.
+    get style() {
+      return v() && t() < e.items.length ? {
+        height: `${d()}px`
+      } : void 0;
     },
-    get children() {
-      return [W(() => e.text), r(l, {
+    disabled: l,
+    get selected() {
+      return i();
+    },
+    get class() {
+      return p("smwb-select-field__option", n.class, e.showActive && t() === E() && "smwb-select-field__option--active");
+    },
+    value: n.value,
+    onClick: n.onClick,
+    optionRenderer: n.optionRenderer,
+    children: n.children
+  }), C = (t, i) => {
+    const l = H(i, () => u().some((n) => n === t.value), t.disabled, {
+      value: t.value,
+      onClick: (n) => {
+        t.disabled || e.onItemClick(n, t);
+      },
+      optionRenderer: e.optionRenderer,
+      children: [S(() => t.text), r(h, {
+        get when() {
+          return t.helperText;
+        },
+        get children() {
+          var n = ie();
+          return g(n, () => t.helperText), n;
+        }
+      })]
+    });
+    return r(h, {
+      get when() {
+        return e.optionRenderer;
+      },
+      get fallback() {
+        return r(D, l);
+      },
+      children: (n) => n()(l)
+    });
+  }, V = (t) => {
+    if (!c()) return t.map((o, s) => ({
+      kind: "item",
+      item: o,
+      index: s
+    }));
+    const i = [];
+    let l, n;
+    return t.forEach((o, s) => {
+      (!n || o.group !== l) && (l = o.group, n = {
+        kind: "group",
+        group: o.group,
+        start: s,
+        items: []
+      }, i.push(n)), n.items.push(o);
+    }), i;
+  }, W = (t) => {
+    if (t.kind === "item") return C(t.item, () => t.index);
+    if (t.group === void 0)
+      return [r(h, {
         get when() {
-          return e.helperText;
+          return t.start > 0;
         },
         get children() {
-          var n = Y();
-          return u(n, () => e.helperText), n;
+          return re();
         }
+      }), r($, {
+        get each() {
+          return t.items;
+        },
+        children: (l, n) => C(l, () => t.start + n())
       })];
-    }
-  }), I = (e) => e.kind === "group" ? (() => {
-    var n = z();
-    return u(n, () => e.group), n;
-  })() : f(e.item), H = () => ({
-    ...v() ? {
-      "min-width": `${v()}px`
+    const i = `${e.listboxId}-group-${t.start}`;
+    return (() => {
+      var l = oe(), n = l.firstChild, o = n.nextSibling;
+      return y(l, "aria-labelledby", i), y(n, "id", i), g(n, () => t.group), g(o, r($, {
+        get each() {
+          return t.items;
+        },
+        children: (s, a) => C(s, () => t.start + a())
+      })), l;
+    })();
+  }, z = () => ({
+    ...T() ? {
+      "min-width": `${T()}px`
     } : {},
-    ...t.menuMaxHeight ? {
-      "max-height": `${t.menuMaxHeight}px`,
+    ...e.menuMaxHeight ? {
+      "max-height": `${e.menuMaxHeight}px`,
       "overflow-y": "auto"
     } : {}
   });
-  return r(L, {
+  return r(F, {
     get mount() {
-      return R ? void 0 : t.container ?? document.body;
+      return K ? void 0 : e.container ?? document.body;
     },
     get children() {
-      return r(T, {
+      return r(X, {
+        ref: (t) => {
+          M = t, e.menuRef?.(t);
+        },
         get isOpen() {
-          return t.isOpen;
+          return e.isOpen;
         },
-        onClose: () => t.onClose(),
+        onClose: () => e.onClose(),
         get anchorElement() {
-          return t.anchorElement();
+          return e.anchorElement();
         },
         get middleware() {
-          return t.menuMiddleware;
+          return e.menuMiddleware;
         },
         get style() {
-          return H();
+          return z();
         },
         "data-smwb-overlay-layer": !0,
+        listRole: "presentation",
+        tabIndex: -1,
+        onMouseDown: (t) => {
+          t.target instanceof HTMLInputElement || t.preventDefault();
+        },
         get children() {
-          return [r(l, {
+          return [r(h, {
             get when() {
-              return t.search;
+              return e.search;
             },
             get children() {
               return [(() => {
-                var e = K();
-                return u(e, r(V, {
+                var t = ae();
+                return g(t, r(Z, R(() => e.searchInputProps, {
+                  ref: (i) => e.searchInputRef?.(i),
                   class: "smwb-select-field__menu-search-input",
                   type: "text",
                   placeholder: "Найти...",
+                  autocomplete: "off",
                   get value() {
-                    return t.searchValue;
+                    return e.searchValue;
                   },
-                  onChange: (n) => t.onSearchInputChange?.(n),
+                  onChange: (i) => e.onSearchInputChange?.(i),
                   fullWidth: !0
-                })), e;
-              })(), r(F, {})];
+                }))), t;
+              })(), r(ee, {})];
             }
-          }), r(l, {
+          }), r(h, {
             get when() {
-              return t.isLoading;
+              return e.isLoading;
             },
             get children() {
-              var e = N();
-              return u(e, r(G, {
+              var t = se();
+              return g(t, r(te, {
                 type: "indeterminate",
                 variant: "circular",
                 class: "smwb-select-field__menu__loader"
-              })), e;
+              })), t;
             }
-          }), 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 = q();
-                          return u(e, () => t.menuNoItemsMessage || "Опций не найдено."), e;
-                        }
-                      });
-                    },
-                    get children() {
-                      return r(b, {
-                        get each() {
-                          return E(t.items);
-                        },
-                        children: (e) => I(e)
-                      });
-                    }
-                  });
-                },
+          }), (() => {
+            var t = ue(), i = t.firstChild;
+            return g(i, r(h, {
+              get when() {
+                return !e.isLoading;
+              },
+              get children() {
+                return r(h, {
+                  get when() {
+                    return v();
+                  },
+                  get fallback() {
+                    return r($, {
+                      get each() {
+                        return V(e.items);
+                      },
+                      children: (l) => W(l)
+                    });
+                  },
+                  get children() {
+                    var l = ce(), n = l.firstChild, o = n.firstChild, s = o.firstChild;
+                    return G(n, "scroll", w.onScroll), Y((a) => _ = a, n), g(s, r($, {
+                      get each() {
+                        return e.items.slice(w.startIndex(), w.endIndex());
+                      },
+                      children: (a, x) => C(a, () => w.startIndex() + x())
+                    })), P((a) => {
+                      var x = `${m()}px`, L = `${w.totalHeight()}px`, O = `translateY(${w.offsetY()}px)`;
+                      return x !== a.e && I(n, "max-height", a.e = x), L !== a.t && I(o, "height", a.t = L), O !== a.a && I(s, "transform", a.a = O), a;
+                    }, {
+                      e: void 0,
+                      t: void 0,
+                      a: void 0
+                    }), l;
+                  }
+                });
+              }
+            }), null), g(i, r(h, {
+              get when() {
+                return e.createOption;
+              },
+              children: (l) => r(D, R(() => H(() => e.items.length, () => !1, !1, {
+                value: "__create__",
+                class: "smwb-select-field__create-option",
+                onClick: (n) => l().onCreate(n),
                 get children() {
-                  var e = j(), 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) => f(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;
+                  return l().text;
                 }
-              });
-            }
-          }), r(l, {
+              })))
+            }), null), P((l) => {
+              var n = e.listboxId, o = e.labelledBy, s = e.label, a = e.multiple || void 0, x = e.isLoading || void 0;
+              return n !== l.e && y(i, "id", l.e = n), o !== l.t && y(i, "aria-labelledby", l.t = o), s !== l.a && y(i, "aria-label", l.a = s), a !== l.o && y(i, "aria-multiselectable", l.o = a), x !== l.i && y(i, "aria-busy", l.i = x), l;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0,
+              i: void 0
+            }), t;
+          })(), r(h, {
             get when() {
-              return t.createOption;
+              return S(() => !e.isLoading && e.items.length === 0)() && !e.createOption;
             },
-            children: (e) => r($, {
-              value: "__create__",
-              onClick: (n) => e().onCreate(n),
-              class: "smwb-select-field__create-option",
-              get children() {
-                return e().text;
-              }
-            })
+            get children() {
+              var t = de();
+              return g(t, () => e.menuNoItemsMessage || "Опций не найдено."), t;
+            }
           })];
         }
       });
@@ -198,6 +322,7 @@ function te(t) {
   });
 }
 export {
-  te as DropdownMenu
+  $e as DropdownMenu,
+  A as dropdownOptionId
 };
 //# sourceMappingURL=dropdownMenu.js.map