@smwb/ui-solid 0.12.1 → 0.13.0

package/dist/headless/source/components/inputs/selectField/dropdownMenu.jsx

@@ -1,20 +1,69 @@
-import { For, Show, createEffect, createSignal, onCleanup } from "solid-js";
+import { For, Show, createEffect, createSignal, onCleanup, splitProps } from "solid-js";
 import { Portal, isServer } from "solid-js/web";
-import { Menu, MenuDivider, MenuItem } from "../../navigation/menu";
+import cn from "clsx";
+import { Menu, MenuDivider } from "../../navigation/menu";
 import { TextField } from "../textField";
 import { ProgressIndicator } from "../../feedBack/progressIndicator";
+import { Ripple } from "../../base/ripple";
 import { createVirtualList } from "../../../primitives/createVirtualList";
+import { callHandler } from "../../../primitives/callHandler";
+function dropdownOptionId(listboxId, index) {
+  return `${listboxId}-option-${index}`;
+}
+function keepInView(element, root) {
+  for (let box = element.parentElement; box; box = box.parentElement) {
+    if (box.scrollHeight > box.clientHeight) {
+      const outer = box.getBoundingClientRect();
+      const inner = element.getBoundingClientRect();
+      if (inner.top < outer.top) box.scrollTop -= outer.top - inner.top;
+      else if (inner.bottom > outer.bottom) box.scrollTop += inner.bottom - outer.bottom;
+    }
+    if (box === root) break;
+  }
+}
+function DropdownOption(props) {
+  const [local, rest] = splitProps(props, [
+    "children",
+    "class",
+    "disabled",
+    "selected",
+    "value",
+    "onClick",
+    "optionRenderer",
+    "ref"
+  ]);
+  let rippleActions;
+  return <li
+    {...rest}
+    class={cn("smwb-menu__item", local.class, {
+      "smwb-menu__item--disabled": local.disabled,
+      "smwb-menu__item--selected": local.selected
+    })}
+    data-value={local.value}
+    onClick={(event) => callHandler(local.onClick, event)}
+    onPointerDown={(event) => {
+      if (!local.disabled) rippleActions?.onRipple(event);
+    }}
+  >
+      <span class="smwb-menu__item-inner">{local.children}</span>
+      <Ripple actionRef={(actions) => rippleActions = actions} />
+    </li>;
+}
 function DropdownMenu(props) {
   const valueArray = () => Array.isArray(props.value) ? props.value : [props.value];
   const hasGroups = () => props.items.some((i) => !!i.group);
   const itemHeight = () => props.itemHeight ?? 40;
   const viewportHeight = () => props.menuMaxHeight || 240;
   const useVirtual = () => !!props.virtualized && !hasGroups() && !props.isLoading && props.items.length > 0;
+  const optionCount = () => props.items.length + (props.createOption ? 1 : 0);
+  const activeIndex = () => props.activeIndex ?? -1;
   const virtual = createVirtualList({
     itemCount: () => useVirtual() ? props.items.length : 0,
     itemHeight,
     viewportHeight
   });
+  let menuEl;
+  let scrollerEl;
   const [menuMinWidth, setMenuMinWidth] = createSignal();
   createEffect(() => {
     const anchor = props.anchorElement();
@@ -23,59 +72,147 @@ function DropdownMenu(props) {
   createEffect(() => {
     if (!props.isOpen) return;
     const onKeyDown = (event) => {
-      if (event.key === "Escape") props.onClose();
+      if (event.key === "Escape" && !event.defaultPrevented) props.onClose();
     };
     document.addEventListener("keydown", onKeyDown);
     onCleanup(() => document.removeEventListener("keydown", onKeyDown));
   });
+  createEffect(() => {
+    const index = activeIndex();
+    const listboxId = props.listboxId;
+    if (!props.isOpen || !props.showActive || index < 0 || !listboxId) return;
+    if (useVirtual() && scrollerEl && index < props.items.length) {
+      const top = index * itemHeight();
+      const height = scrollerEl.clientHeight || viewportHeight();
+      const scrollTop = top < scrollerEl.scrollTop ? top : top + itemHeight() > scrollerEl.scrollTop + height ? top + itemHeight() - height : scrollerEl.scrollTop;
+      if (scrollTop !== scrollerEl.scrollTop) {
+        scrollerEl.scrollTop = scrollTop;
+        virtual.onScroll({ currentTarget: { scrollTop } });
+      }
+    }
+    const option = document.getElementById(dropdownOptionId(listboxId, index));
+    if (option) keepInView(option, menuEl);
+  });
+  const optionProps = (index, selected, disabled, own) => ({
+    get id() {
+      return props.listboxId ? dropdownOptionId(props.listboxId, index()) : void 0;
+    },
+    role: "option",
+    get "aria-selected"() {
+      return selected();
+    },
+    "aria-disabled": disabled || void 0,
+    // With a virtual list only a window of the options exists.
+    get "aria-setsize"() {
+      return useVirtual() ? optionCount() : void 0;
+    },
+    get "aria-posinset"() {
+      return useVirtual() ? index() + 1 : void 0;
+    },
+    // The virtual list places its rows at itemHeight: a row takes that height.
+    get style() {
+      return useVirtual() && index() < props.items.length ? { height: `${itemHeight()}px` } : void 0;
+    },
+    disabled,
+    get selected() {
+      return selected();
+    },
+    get class() {
+      return cn(
+        "smwb-select-field__option",
+        own.class,
+        props.showActive && index() === activeIndex() && "smwb-select-field__option--active"
+      );
+    },
+    value: own.value,
+    onClick: own.onClick,
+    optionRenderer: own.optionRenderer,
+    children: own.children
+  });
+  const renderItem = (el, index) => {
+    const option = optionProps(index, () => valueArray().some((v) => v === el.value), el.disabled, {
+      value: el.value,
+      onClick: (e) => {
+        if (!el.disabled) props.onItemClick(e, el);
+      },
+      optionRenderer: props.optionRenderer,
+      children: <>
+          {el.text}
+          <Show when={el.helperText}>
+            <span class="smwb-select-field__option__helper-text">{el.helperText}</span>
+          </Show>
+        </>
+    });
+    return <Show when={props.optionRenderer} fallback={<DropdownOption {...option} />}>
+        {(renderer) => renderer()(option)}
+      </Show>;
+  };
   const toRows = (list) => {
-    const out = [];
+    if (!hasGroups()) return list.map((item, index) => ({ kind: "item", item, index }));
+    const rows = [];
     let lastGroup;
-    for (const el of list) {
-      if (hasGroups() && el.group !== lastGroup) {
-        lastGroup = el.group;
-        out.push({ kind: "group", group: el.group });
+    let run;
+    list.forEach((item, index) => {
+      if (!run || item.group !== lastGroup) {
+        lastGroup = item.group;
+        run = { kind: "group", group: item.group, start: index, items: [] };
+        rows.push(run);
       }
-      out.push({ kind: "item", item: el });
+      run.items.push(item);
+    });
+    return rows;
+  };
+  const renderRow = (row) => {
+    if (row.kind === "item") return renderItem(row.item, () => row.index);
+    if (row.group === void 0) {
+      return <>
+          <Show when={row.start > 0}>
+            <li class="smwb-select-field__group-label" role="presentation" />
+          </Show>
+          <For each={row.items}>{(item, i) => renderItem(item, () => row.start + i())}</For>
+        </>;
     }
-    return out;
+    const labelId = `${props.listboxId}-group-${row.start}`;
+    return <li role="group" aria-labelledby={labelId} class="smwb-select-field__group">
+        <div id={labelId} class="smwb-select-field__group-label">
+          {row.group}
+        </div>
+        <ul role="presentation" class="smwb-select-field__group-options">
+          <For each={row.items}>{(item, i) => renderItem(item, () => row.start + i())}</For>
+        </ul>
+      </li>;
   };
-  const renderItem = (el) => <MenuItem
-    value={el.value}
-    disabled={el.disabled}
-    selected={!!valueArray().find((v) => v === el.value)}
-    onClick={(e) => {
-      if (!el.disabled) props.onItemClick(e, el);
-    }}
-    optionRenderer={props.optionRenderer}
-  >
-      {el.text}
-      <Show when={el.helperText}>
-        <span class="smwb-select-field__option__helper-text">{el.helperText}</span>
-      </Show>
-    </MenuItem>;
-  const renderRow = (row) => row.kind === "group" ? <li class="smwb-select-field__group-label" role="presentation">
-        {row.group}
-      </li> : renderItem(row.item);
   const menuStyle = () => ({
     ...menuMinWidth() ? { "min-width": `${menuMinWidth()}px` } : {},
     ...props.menuMaxHeight ? { "max-height": `${props.menuMaxHeight}px`, "overflow-y": "auto" } : {}
   });
   return <Portal mount={isServer ? void 0 : props.container ?? document.body}>
       <Menu
+    ref={(el) => {
+      menuEl = el;
+      props.menuRef?.(el);
+    }}
     isOpen={props.isOpen}
     onClose={() => props.onClose()}
     anchorElement={props.anchorElement()}
     middleware={props.menuMiddleware}
     style={menuStyle()}
     data-smwb-overlay-layer
+    listRole="presentation"
+    tabIndex={-1}
+    onMouseDown={(event) => {
+      if (!(event.target instanceof HTMLInputElement)) event.preventDefault();
+    }}
   >
         <Show when={props.search}>
           <li class="smwb-select-field__menu-search">
             <TextField
+    {...props.searchInputProps}
+    ref={(el) => props.searchInputRef?.(el)}
     class="smwb-select-field__menu-search-input"
     type="text"
     placeholder="Найти..."
+    autocomplete="off"
     value={props.searchValue}
     onChange={(e) => props.onSearchInputChange?.(e)}
     fullWidth
@@ -85,51 +222,74 @@ function DropdownMenu(props) {
         </Show>
 
         <Show when={props.isLoading}>
-          <div class="smwb-select-field__menu-loading">
+          <li class="smwb-select-field__menu-loading">
             <ProgressIndicator type="indeterminate" variant="circular" class="smwb-select-field__menu__loader" />
-          </div>
+          </li>
         </Show>
 
-        <Show when={!props.isLoading}>
-          <Show
-    when={useVirtual()}
-    fallback={<Show
-      when={props.items.length > 0}
-      fallback={<Show when={!props.createOption}>
-                    <li class="smwb-select-field__empty-items">{props.menuNoItemsMessage || "\u041E\u043F\u0446\u0438\u0439 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E."}</li>
-                  </Show>}
-    >
-                <For each={toRows(props.items)}>{(row) => renderRow(row)}</For>
-              </Show>}
+        <li>
+          <ul
+    id={props.listboxId}
+    role="listbox"
+    class="smwb-select-field__listbox"
+    aria-labelledby={props.labelledBy}
+    aria-label={props.label}
+    aria-multiselectable={props.multiple || void 0}
+    aria-busy={props.isLoading || void 0}
   >
-            <li role="presentation" class="smwb-select-field__virtual-viewport">
-              <div
+            <Show when={!props.isLoading}>
+              <Show when={useVirtual()} fallback={<For each={toRows(props.items)}>{(row) => renderRow(row)}</For>}>
+                <li role="presentation" class="smwb-select-field__virtual-viewport">
+                  <div
+    ref={(el) => scrollerEl = el}
     class="smwb-select-field__virtual-scroller"
+    tabIndex={-1}
     style={{ "max-height": `${viewportHeight()}px`, "overflow-y": "auto" }}
     onScroll={virtual.onScroll}
   >
-                <div style={{ height: `${virtual.totalHeight()}px`, position: "relative" }}>
-                  <ul
+                    <div style={{ height: `${virtual.totalHeight()}px`, position: "relative" }}>
+                      <ul
     role="presentation"
     class="smwb-select-field__virtual-list"
-    style={{ transform: `translateY(${virtual.offsetY()}px)`, "list-style": "none", margin: "0", padding: "0" }}
+    style={{
+      transform: `translateY(${virtual.offsetY()}px)`,
+      "list-style": "none",
+      margin: "0",
+      padding: "0"
+    }}
   >
-                    <For each={props.items.slice(virtual.startIndex(), virtual.endIndex())}>{(el) => renderItem(el)}</For>
-                  </ul>
-                </div>
-              </div>
-            </li>
-          </Show>
-        </Show>
+                        <For each={props.items.slice(virtual.startIndex(), virtual.endIndex())}>
+                          {(el, i) => renderItem(el, () => virtual.startIndex() + i())}
+                        </For>
+                      </ul>
+                    </div>
+                  </div>
+                </li>
+              </Show>
+            </Show>
 
-        <Show when={props.createOption}>
-          {(createOption) => <MenuItem
-    value="__create__"
-    onClick={(e) => createOption().onCreate(e)}
-    class="smwb-select-field__create-option"
-  >
-              {createOption().text}
-            </MenuItem>}
+            <Show when={props.createOption}>
+              {(createOption) => <DropdownOption
+    {...optionProps(
+      () => props.items.length,
+      () => false,
+      false,
+      {
+        value: "__create__",
+        class: "smwb-select-field__create-option",
+        onClick: (e) => createOption().onCreate(e),
+        get children() {
+          return createOption().text;
+        }
+      }
+    )}
+  />}
+            </Show>
+          </ul>
+        </li>
+
+        <Show when={!props.isLoading && props.items.length === 0 && !props.createOption}>
+          <li class="smwb-select-field__empty-items">{props.menuNoItemsMessage || "\u041E\u043F\u0446\u0438\u0439 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E."}</li>
         </Show>
       </Menu>
     </Portal>;
@@ -137,6 +297,7 @@ function DropdownMenu(props) {
 var dropdownMenu_default = DropdownMenu;
 export {
   DropdownMenu,
-  dropdownMenu_default as default
+  dropdownMenu_default as default,
+  dropdownOptionId
 };
 //# sourceMappingURL=dropdownMenu.jsx.map

package/dist/headless/source/components/inputs/selectField/dropdownMenu.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/inputs/selectField/dropdownMenu.tsx"],"sourcesContent":["import { type Accessor, type JSX, For, Show, createEffect, createSignal, onCleanup } from \"solid-js\";\nimport { Portal, isServer } 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={(isServer ? undefined : (props.container ?? document.body)) as Node}>\n      <Menu\n        isOpen={props.isOpen}\n        onClose={() => props.onClose()}\n        anchorElement={props.anchorElement()}\n        middleware={props.menuMiddleware}\n        style={menuStyle()}\n        data-smwb-overlay-layer\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"],"mappings":"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","names":[],"file":"dropdownMenu.jsx"}
+{"version":3,"sources":["../../../../../../src/components/inputs/selectField/dropdownMenu.tsx"],"sourcesContent":["import { type Accessor, type JSX, For, Show, createEffect, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport type { Middleware } from \"@floating-ui/dom\";\nimport cn from \"clsx\";\nimport { Menu, MenuDivider, type MenuItemProps } from \"../../navigation/menu\";\nimport { TextField } from \"../textField\";\nimport { ProgressIndicator } from \"../../feedBack/progressIndicator\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { createVirtualList } from \"../../../primitives/createVirtualList\";\nimport { callHandler } from \"../../../primitives/callHandler\";\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: 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  /** Id of the listbox; the options' ids follow from it (`dropdownOptionId`). */\n  listboxId?: string | undefined;\n  /** Ids of the elements that name the listbox and the search box in the menu. */\n  labelledBy?: string | undefined;\n  /** Names the listbox and the search box in the menu when no element does. */\n  label?: string | undefined;\n  /** Several options can be selected (`aria-multiselectable`). */\n  multiple?: boolean | undefined;\n  /** Index of the active option, counting `items` and then the create option; -1 for none. */\n  activeIndex?: number | undefined;\n  /** Marks the active option and keeps it in view: the keyboard moved to it. */\n  showActive?: boolean | undefined;\n  /** Attributes and handlers of the search box in the menu, which the field makes a combobox. */\n  searchInputProps?: (JSX.AriaAttributes & Pick<JSX.InputHTMLAttributes<HTMLInputElement>, \"onKeyDown\">) | undefined;\n  searchInputRef?: ((element: HTMLInputElement) => void) | undefined;\n  /** The menu's root element. */\n  menuRef?: ((element: HTMLDivElement) => void) | undefined;\n}\n\n/** Id of the option at `index` in the listbox `listboxId`. */\nexport function dropdownOptionId(listboxId: string, index: number): string {\n  return `${listboxId}-option-${index}`;\n}\n\n// Scrolls each scrolling box from the element up to `root` so the element shows.\nfunction keepInView(element: HTMLElement, root: HTMLElement | undefined): void {\n  for (let box = element.parentElement; box; box = box.parentElement) {\n    if (box.scrollHeight > box.clientHeight) {\n      const outer = box.getBoundingClientRect();\n      const inner = element.getBoundingClientRect();\n      if (inner.top < outer.top) box.scrollTop -= outer.top - inner.top;\n      else if (inner.bottom > outer.bottom) box.scrollTop += inner.bottom - outer.bottom;\n    }\n    if (box === root) break;\n  }\n}\n\n// An option of the listbox. It takes no focus: the field keeps it and points at\n// the active option with aria-activedescendant.\nfunction DropdownOption(props: MenuItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"disabled\",\n    \"selected\",\n    \"value\",\n    \"onClick\",\n    \"optionRenderer\",\n    \"ref\",\n  ]);\n  let rippleActions: RippleActionsRef | undefined;\n\n  return (\n    <li\n      {...rest}\n      class={cn(\"smwb-menu__item\", local.class, {\n        \"smwb-menu__item--disabled\": local.disabled,\n        \"smwb-menu__item--selected\": local.selected,\n      })}\n      data-value={local.value as string | number | undefined}\n      onClick={(event) => callHandler(local.onClick, event)}\n      onPointerDown={(event) => {\n        if (!local.disabled) rippleActions?.onRipple(event);\n      }}\n    >\n      <span class=\"smwb-menu__item-inner\">{local.children}</span>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </li>\n  );\n}\n\ntype Row =\n  | { kind: \"group\"; group?: string | undefined; start: number; items: DropdownItem[] }\n  | { kind: \"item\"; item: DropdownItem; index: number };\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  const optionCount = (): number => props.items.length + (props.createOption ? 1 : 0);\n  const activeIndex = (): number => props.activeIndex ?? -1;\n\n  const virtual = createVirtualList({\n    itemCount: () => (useVirtual() ? props.items.length : 0),\n    itemHeight,\n    viewportHeight,\n  });\n\n  let menuEl: HTMLDivElement | undefined;\n  let scrollerEl: HTMLDivElement | undefined;\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  // An Escape the field did not take (the focus is elsewhere) still closes the menu.\n  createEffect(() => {\n    if (!props.isOpen) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\" && !event.defaultPrevented) props.onClose();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  // The keyboard's active option stays in view. In a virtual list it may not\n  // exist yet: scroll the window to it first.\n  createEffect(() => {\n    const index = activeIndex();\n    const listboxId = props.listboxId;\n    if (!props.isOpen || !props.showActive || index < 0 || !listboxId) return;\n    if (useVirtual() && scrollerEl && index < props.items.length) {\n      const top = index * itemHeight();\n      const height = scrollerEl.clientHeight || viewportHeight();\n      const scrollTop =\n        top < scrollerEl.scrollTop\n          ? top\n          : top + itemHeight() > scrollerEl.scrollTop + height\n            ? top + itemHeight() - height\n            : scrollerEl.scrollTop;\n      if (scrollTop !== scrollerEl.scrollTop) {\n        scrollerEl.scrollTop = scrollTop;\n        virtual.onScroll({ currentTarget: { scrollTop } });\n      }\n    }\n    const option = document.getElementById(dropdownOptionId(listboxId, index));\n    if (option) keepInView(option, menuEl);\n  });\n\n  // The props of the option at `index`, which an optionRenderer gets too: its\n  // element needs the id, role and ARIA state for the field to point at it.\n  // Getters: the selection, the active mark and a virtual row's place follow\n  // the field without the row being rebuilt.\n  const optionProps = (\n    index: Accessor<number>,\n    selected: Accessor<boolean>,\n    disabled: boolean | undefined,\n    own: MenuItemProps\n  ): MenuItemProps =>\n    ({\n      get id() {\n        return props.listboxId ? dropdownOptionId(props.listboxId, index()) : undefined;\n      },\n      role: \"option\",\n      get \"aria-selected\"() {\n        return selected();\n      },\n      \"aria-disabled\": disabled || undefined,\n      // With a virtual list only a window of the options exists.\n      get \"aria-setsize\"() {\n        return useVirtual() ? optionCount() : undefined;\n      },\n      get \"aria-posinset\"() {\n        return useVirtual() ? index() + 1 : undefined;\n      },\n      // The virtual list places its rows at itemHeight: a row takes that height.\n      get style() {\n        return useVirtual() && index() < props.items.length ? { height: `${itemHeight()}px` } : undefined;\n      },\n      disabled,\n      get selected() {\n        return selected();\n      },\n      get class() {\n        return cn(\n          \"smwb-select-field__option\",\n          own.class,\n          props.showActive && index() === activeIndex() && \"smwb-select-field__option--active\"\n        );\n      },\n      value: own.value,\n      onClick: own.onClick,\n      optionRenderer: own.optionRenderer,\n      children: own.children,\n    }) as MenuItemProps;\n\n  const renderItem = (el: DropdownItem, index: Accessor<number>): JSX.Element => {\n    const option = optionProps(index, () => valueArray().some((v) => v === el.value), el.disabled, {\n      value: el.value,\n      onClick: (e: MouseEvent) => {\n        if (!el.disabled) props.onItemClick(e as unknown as ItemEvent, el);\n      },\n      optionRenderer: props.optionRenderer,\n      children: (\n        <>\n          {el.text}\n          <Show when={el.helperText}>\n            <span class=\"smwb-select-field__option__helper-text\">{el.helperText}</span>\n          </Show>\n        </>\n      ),\n    } as MenuItemProps);\n    return (\n      <Show when={props.optionRenderer} fallback={<DropdownOption {...option} />}>\n        {(renderer) => renderer()(option)}\n      </Show>\n    );\n  };\n\n  // Consecutive items of one group sit in a `group` named by its header. Items\n  // without a group before the first one stay loose; after a group, they get an\n  // empty header, as they always did.\n  const toRows = (list: DropdownItem[]): Row[] => {\n    if (!hasGroups()) return list.map((item, index) => ({ kind: \"item\", item, index }));\n    const rows: Row[] = [];\n    let lastGroup: string | undefined;\n    let run: { kind: \"group\"; group?: string | undefined; start: number; items: DropdownItem[] } | undefined;\n    list.forEach((item, index) => {\n      if (!run || item.group !== lastGroup) {\n        lastGroup = item.group;\n        run = { kind: \"group\", group: item.group, start: index, items: [] };\n        rows.push(run);\n      }\n      run.items.push(item);\n    });\n    return rows;\n  };\n\n  const renderRow = (row: Row): JSX.Element => {\n    if (row.kind === \"item\") return renderItem(row.item, () => row.index);\n    if (row.group === undefined) {\n      return (\n        <>\n          <Show when={row.start > 0}>\n            <li class=\"smwb-select-field__group-label\" role=\"presentation\" />\n          </Show>\n          <For each={row.items}>{(item, i) => renderItem(item, () => row.start + i())}</For>\n        </>\n      );\n    }\n    const labelId = `${props.listboxId}-group-${row.start}`;\n    return (\n      <li role=\"group\" aria-labelledby={labelId} class=\"smwb-select-field__group\">\n        <div id={labelId} class=\"smwb-select-field__group-label\">\n          {row.group}\n        </div>\n        <ul role=\"presentation\" class=\"smwb-select-field__group-options\">\n          <For each={row.items}>{(item, i) => renderItem(item, () => row.start + i())}</For>\n        </ul>\n      </li>\n    );\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={(isServer ? undefined : (props.container ?? document.body)) as Node}>\n      <Menu\n        ref={(el) => {\n          menuEl = el;\n          props.menuRef?.(el);\n        }}\n        isOpen={props.isOpen}\n        onClose={() => props.onClose()}\n        anchorElement={props.anchorElement()}\n        middleware={props.menuMiddleware}\n        style={menuStyle()}\n        data-smwb-overlay-layer\n        // The menu is a surface: the options are a listbox of their own inside,\n        // with the search box and the messages beside it.\n        listRole=\"presentation\"\n        // A menu that scrolls, with nothing in it that takes the focus, would be a\n        // tab stop of its own (browsers make such scrollers one): Tab from the field\n        // would land in the closing menu and drop to the page.\n        tabIndex={-1}\n        // The field keeps the focus while the menu is used with the pointer; only\n        // the search box in the menu takes it.\n        onMouseDown={(event) => {\n          if (!(event.target instanceof HTMLInputElement)) event.preventDefault();\n        }}\n      >\n        <Show when={props.search}>\n          <li class=\"smwb-select-field__menu-search\">\n            <TextField\n              {...props.searchInputProps}\n              ref={(el) => props.searchInputRef?.(el)}\n              class=\"smwb-select-field__menu-search-input\"\n              type=\"text\"\n              placeholder=\"Найти...\"\n              autocomplete=\"off\"\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          <li class=\"smwb-select-field__menu-loading\">\n            <ProgressIndicator type=\"indeterminate\" variant=\"circular\" class=\"smwb-select-field__menu__loader\" />\n          </li>\n        </Show>\n\n        <li>\n          <ul\n            id={props.listboxId}\n            role=\"listbox\"\n            class=\"smwb-select-field__listbox\"\n            aria-labelledby={props.labelledBy}\n            aria-label={props.label}\n            aria-multiselectable={props.multiple || undefined}\n            aria-busy={props.isLoading || undefined}\n          >\n            <Show when={!props.isLoading}>\n              <Show when={useVirtual()} fallback={<For each={toRows(props.items)}>{(row) => renderRow(row)}</For>}>\n                <li role=\"presentation\" class=\"smwb-select-field__virtual-viewport\">\n                  <div\n                    ref={(el) => (scrollerEl = el)}\n                    class=\"smwb-select-field__virtual-scroller\"\n                    tabIndex={-1}\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={{\n                          transform: `translateY(${virtual.offsetY()}px)`,\n                          \"list-style\": \"none\",\n                          margin: \"0\",\n                          padding: \"0\",\n                        }}\n                      >\n                        <For each={props.items.slice(virtual.startIndex(), virtual.endIndex())}>\n                          {(el, i) => renderItem(el, () => virtual.startIndex() + i())}\n                        </For>\n                      </ul>\n                    </div>\n                  </div>\n                </li>\n              </Show>\n            </Show>\n\n            <Show when={props.createOption}>\n              {(createOption) => (\n                <DropdownOption\n                  {...optionProps(\n                    () => props.items.length,\n                    () => false,\n                    false,\n                    {\n                      value: \"__create__\",\n                      class: \"smwb-select-field__create-option\",\n                      onClick: (e: MouseEvent) => createOption().onCreate(e as unknown as ItemEvent),\n                      get children() {\n                        return createOption().text;\n                      },\n                    } as MenuItemProps\n                  )}\n                />\n              )}\n            </Show>\n          </ul>\n        </li>\n\n        <Show when={!props.isLoading && props.items.length === 0 && !props.createOption}>\n          <li class=\"smwb-select-field__empty-items\">{props.menuNoItemsMessage || \"Опций не найдено.\"}</li>\n        </Show>\n      </Menu>\n    </Portal>\n  );\n}\n\nexport default DropdownMenu;\n"],"mappings":"AAAA,SAAkC,KAAK,MAAM,cAAc,cAAc,WAAW,kBAAkB;AACtG,SAAS,QAAQ,gBAAgB;AAEjC,OAAO,QAAQ;AACf,SAAS,MAAM,mBAAuC;AACtD,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAClC,SAAS,cAAqC;AAC9C,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAsDrB,SAAS,iBAAiB,WAAmB,OAAuB;AACzE,SAAO,GAAG,SAAS,WAAW,KAAK;AACrC;AAGA,SAAS,WAAW,SAAsB,MAAqC;AAC7E,WAAS,MAAM,QAAQ,eAAe,KAAK,MAAM,IAAI,eAAe;AAClE,QAAI,IAAI,eAAe,IAAI,cAAc;AACvC,YAAM,QAAQ,IAAI,sBAAsB;AACxC,YAAM,QAAQ,QAAQ,sBAAsB;AAC5C,UAAI,MAAM,MAAM,MAAM,IAAK,KAAI,aAAa,MAAM,MAAM,MAAM;AAAA,eACrD,MAAM,SAAS,MAAM,OAAQ,KAAI,aAAa,MAAM,SAAS,MAAM;AAAA,IAC9E;AACA,QAAI,QAAQ,KAAM;AAAA,EACpB;AACF;AAIA,SAAS,eAAe,OAAmC;AACzD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,MAAI;AAEJ,SACE,CAAC;AAAA,QACK;AAAA,IACJ,OAAO,GAAG,mBAAmB,MAAM,OAAO;AAAA,MACxC,6BAA6B,MAAM;AAAA,MACnC,6BAA6B,MAAM;AAAA,IACrC,CAAC;AAAA,IACD,YAAY,MAAM;AAAA,IAClB,SAAS,CAAC,UAAU,YAAY,MAAM,SAAS,KAAK;AAAA,IACpD,eAAe,CAAC,UAAU;AACxB,UAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,IACpD;AAAA,GACD;AAAA,MACC,CAAC,KAAK,MAAM,yBAAyB,MAAM,SAAS,EAAnD,KAA0D;AAAA,MAC3D,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,EAAE;AAAA,IAC/D,EAdC;AAgBL;AAMO,SAAS,aAAa,OAAuC;AAClE,QAAM,aAAa,MACjB,MAAM,QAAQ,MAAM,KAAK,IAAI,MAAM,QAAQ,CAAC,MAAM,KAAK;AACzD,QAAM,YAAY,MAAe,MAAM,MAAM,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK;AAClE,QAAM,aAAa,MAAc,MAAM,cAAc;AACrD,QAAM,iBAAiB,MAAc,MAAM,iBAAiB;AAC5D,QAAM,aAAa,MAAe,CAAC,CAAC,MAAM,eAAe,CAAC,UAAU,KAAK,CAAC,MAAM,aAAa,MAAM,MAAM,SAAS;AAClH,QAAM,cAAc,MAAc,MAAM,MAAM,UAAU,MAAM,eAAe,IAAI;AACjF,QAAM,cAAc,MAAc,MAAM,eAAe;AAEvD,QAAM,UAAU,kBAAkB;AAAA,IAChC,WAAW,MAAO,WAAW,IAAI,MAAM,MAAM,SAAS;AAAA,IACtD;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AACJ,MAAI;AACJ,QAAM,CAAC,cAAc,eAAe,IAAI,aAAqB;AAE7D,eAAa,MAAM;AACjB,UAAM,SAAS,MAAM,cAAc;AACnC,QAAI,MAAM,UAAU,OAAQ,iBAAgB,OAAO,WAAW;AAAA,EAChE,CAAC;AAGD,eAAa,MAAM;AACjB,QAAI,CAAC,MAAM,OAAQ;AACnB,UAAM,YAAY,CAAC,UAA+B;AAChD,UAAI,MAAM,QAAQ,YAAY,CAAC,MAAM,iBAAkB,OAAM,QAAQ;AAAA,IACvE;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,cAAU,MAAM,SAAS,oBAAoB,WAAW,SAAS,CAAC;AAAA,EACpE,CAAC;AAID,eAAa,MAAM;AACjB,UAAM,QAAQ,YAAY;AAC1B,UAAM,YAAY,MAAM;AACxB,QAAI,CAAC,MAAM,UAAU,CAAC,MAAM,cAAc,QAAQ,KAAK,CAAC,UAAW;AACnE,QAAI,WAAW,KAAK,cAAc,QAAQ,MAAM,MAAM,QAAQ;AAC5D,YAAM,MAAM,QAAQ,WAAW;AAC/B,YAAM,SAAS,WAAW,gBAAgB,eAAe;AACzD,YAAM,YACJ,MAAM,WAAW,YACb,MACA,MAAM,WAAW,IAAI,WAAW,YAAY,SAC1C,MAAM,WAAW,IAAI,SACrB,WAAW;AACnB,UAAI,cAAc,WAAW,WAAW;AACtC,mBAAW,YAAY;AACvB,gBAAQ,SAAS,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC;AAAA,MACnD;AAAA,IACF;AACA,UAAM,SAAS,SAAS,eAAe,iBAAiB,WAAW,KAAK,CAAC;AACzE,QAAI,OAAQ,YAAW,QAAQ,MAAM;AAAA,EACvC,CAAC;AAMD,QAAM,cAAc,CAClB,OACA,UACA,UACA,SAEC;AAAA,IACC,IAAI,KAAK;AACP,aAAO,MAAM,YAAY,iBAAiB,MAAM,WAAW,MAAM,CAAC,IAAI;AAAA,IACxE;AAAA,IACA,MAAM;AAAA,IACN,IAAI,kBAAkB;AACpB,aAAO,SAAS;AAAA,IAClB;AAAA,IACA,iBAAiB,YAAY;AAAA;AAAA,IAE7B,IAAI,iBAAiB;AACnB,aAAO,WAAW,IAAI,YAAY,IAAI;AAAA,IACxC;AAAA,IACA,IAAI,kBAAkB;AACpB,aAAO,WAAW,IAAI,MAAM,IAAI,IAAI;AAAA,IACtC;AAAA;AAAA,IAEA,IAAI,QAAQ;AACV,aAAO,WAAW,KAAK,MAAM,IAAI,MAAM,MAAM,SAAS,EAAE,QAAQ,GAAG,WAAW,CAAC,KAAK,IAAI;AAAA,IAC1F;AAAA,IACA;AAAA,IACA,IAAI,WAAW;AACb,aAAO,SAAS;AAAA,IAClB;AAAA,IACA,IAAI,QAAQ;AACV,aAAO;AAAA,QACL;AAAA,QACA,IAAI;AAAA,QACJ,MAAM,cAAc,MAAM,MAAM,YAAY,KAAK;AAAA,MACnD;AAAA,IACF;AAAA,IACA,OAAO,IAAI;AAAA,IACX,SAAS,IAAI;AAAA,IACb,gBAAgB,IAAI;AAAA,IACpB,UAAU,IAAI;AAAA,EAChB;AAEF,QAAM,aAAa,CAAC,IAAkB,UAAyC;AAC7E,UAAM,SAAS,YAAY,OAAO,MAAM,WAAW,EAAE,KAAK,CAAC,MAAM,MAAM,GAAG,KAAK,GAAG,GAAG,UAAU;AAAA,MAC7F,OAAO,GAAG;AAAA,MACV,SAAS,CAAC,MAAkB;AAC1B,YAAI,CAAC,GAAG,SAAU,OAAM,YAAY,GAA2B,EAAE;AAAA,MACnE;AAAA,MACA,gBAAgB,MAAM;AAAA,MACtB,UACE,EAAE;AAAA,WACC,GAAG,KAAK;AAAA,UACT,CAAC,KAAK,MAAM,GAAG,YAAY;AAAA,YACzB,CAAC,KAAK,MAAM,0CAA0C,GAAG,WAAW,EAAnE,KAA0E;AAAA,UAC7E,EAFC,KAEM;AAAA,QACT;AAAA,IAEJ,CAAkB;AAClB,WACE,CAAC,KAAK,MAAM,MAAM,gBAAgB,UAAU,CAAC,mBAAmB,QAAQ,IAAI;AAAA,SACzE,CAAC,aAAa,SAAS,EAAE,MAAM,EAAE;AAAA,MACpC,EAFC;AAAA,EAIL;AAKA,QAAM,SAAS,CAAC,SAAgC;AAC9C,QAAI,CAAC,UAAU,EAAG,QAAO,KAAK,IAAI,CAAC,MAAM,WAAW,EAAE,MAAM,QAAQ,MAAM,MAAM,EAAE;AAClF,UAAM,OAAc,CAAC;AACrB,QAAI;AACJ,QAAI;AACJ,SAAK,QAAQ,CAAC,MAAM,UAAU;AAC5B,UAAI,CAAC,OAAO,KAAK,UAAU,WAAW;AACpC,oBAAY,KAAK;AACjB,cAAM,EAAE,MAAM,SAAS,OAAO,KAAK,OAAO,OAAO,OAAO,OAAO,CAAC,EAAE;AAClE,aAAK,KAAK,GAAG;AAAA,MACf;AACA,UAAI,MAAM,KAAK,IAAI;AAAA,IACrB,CAAC;AACD,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,CAAC,QAA0B;AAC3C,QAAI,IAAI,SAAS,OAAQ,QAAO,WAAW,IAAI,MAAM,MAAM,IAAI,KAAK;AACpE,QAAI,IAAI,UAAU,QAAW;AAC3B,aACE,EAAE;AAAA,UACA,CAAC,KAAK,MAAM,IAAI,QAAQ,GAAG;AAAA,YACzB,CAAC,GAAG,MAAM,iCAAiC,KAAK,eAAe,EAAE;AAAA,UACnE,EAFC,KAEM;AAAA,UACP,CAAC,IAAI,MAAM,IAAI,QAAQ,CAAC,MAAM,MAAM,WAAW,MAAM,MAAM,IAAI,QAAQ,EAAE,CAAC,EAAE,EAA3E,IAAiF;AAAA,QACpF;AAAA,IAEJ;AACA,UAAM,UAAU,GAAG,MAAM,SAAS,UAAU,IAAI,KAAK;AACrD,WACE,CAAC,GAAG,KAAK,QAAQ,iBAAiB,SAAS,MAAM,2BAA2B;AAAA,QAC1E,CAAC,IAAI,IAAI,SAAS,MAAM,iCAAiC;AAAA,WACtD,IAAI,MAAM;AAAA,QACb,EAFC,IAEK;AAAA,QACN,CAAC,GAAG,KAAK,eAAe,MAAM,mCAAmC;AAAA,UAC/D,CAAC,IAAI,MAAM,IAAI,QAAQ,CAAC,MAAM,MAAM,WAAW,MAAM,MAAM,IAAI,QAAQ,EAAE,CAAC,EAAE,EAA3E,IAAiF;AAAA,QACpF,EAFC,GAEI;AAAA,MACP,EAPC;AAAA,EASL;AAEA,QAAM,YAAY,OAA0B;AAAA,IAC1C,GAAI,aAAa,IAAI,EAAE,aAAa,GAAG,aAAa,CAAC,KAAK,IAAI,CAAC;AAAA,IAC/D,GAAI,MAAM,gBAAgB,EAAE,cAAc,GAAG,MAAM,aAAa,MAAM,cAAc,OAAO,IAAI,CAAC;AAAA,EAClG;AAEA,SACE,CAAC,OAAO,OAAQ,WAAW,SAAa,MAAM,aAAa,SAAS,MAAgB;AAAA,MAClF,CAAC;AAAA,IACC,KAAK,CAAC,OAAO;AACX,eAAS;AACT,YAAM,UAAU,EAAE;AAAA,IACpB;AAAA,IACA,QAAQ,MAAM;AAAA,IACd,SAAS,MAAM,MAAM,QAAQ;AAAA,IAC7B,eAAe,MAAM,cAAc;AAAA,IACnC,YAAY,MAAM;AAAA,IAClB,OAAO,UAAU;AAAA,IACjB;AAAA,IAGA,SAAS;AAAA,IAIT,UAAU;AAAA,IAGV,aAAa,CAAC,UAAU;AACtB,UAAI,EAAE,MAAM,kBAAkB,kBAAmB,OAAM,eAAe;AAAA,IACxE;AAAA,GACD;AAAA,QACC,CAAC,KAAK,MAAM,MAAM,QAAQ;AAAA,UACxB,CAAC,GAAG,MAAM,iCAAiC;AAAA,YACzC,CAAC;AAAA,QACK,MAAM;AAAA,IACV,KAAK,CAAC,OAAO,MAAM,iBAAiB,EAAE;AAAA,IACtC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,OAAO,MAAM;AAAA,IACb,UAAU,CAAC,MAAM,MAAM,sBAAsB,CAAgB;AAAA,IAC7D;AAAA,EACF,EAAE;AAAA,UACJ,EAZC,GAYI;AAAA,UACL,CAAC,YAAY,EAAE;AAAA,QACjB,EAfC,KAeM;AAAA;AAAA,QAEP,CAAC,KAAK,MAAM,MAAM,WAAW;AAAA,UAC3B,CAAC,GAAG,MAAM,kCAAkC;AAAA,YAC1C,CAAC,kBAAkB,KAAK,gBAAgB,QAAQ,WAAW,MAAM,kCAAkC,EAAE;AAAA,UACvG,EAFC,GAEI;AAAA,QACP,EAJC,KAIM;AAAA;AAAA,QAEP,CAAC,GAAG;AAAA,UACF,CAAC;AAAA,IACC,IAAI,MAAM;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,iBAAiB,MAAM;AAAA,IACvB,YAAY,MAAM;AAAA,IAClB,sBAAsB,MAAM,YAAY;AAAA,IACxC,WAAW,MAAM,aAAa;AAAA,GAC/B;AAAA,YACC,CAAC,KAAK,MAAM,CAAC,MAAM,WAAW;AAAA,cAC5B,CAAC,KAAK,MAAM,WAAW,GAAG,UAAU,CAAC,IAAI,MAAM,OAAO,MAAM,KAAK,IAAI,CAAC,QAAQ,UAAU,GAAG,EAAE,EAAxD,MAAgE;AAAA,gBACnG,CAAC,GAAG,KAAK,eAAe,MAAM,sCAAsC;AAAA,kBAClE,CAAC;AAAA,IACC,KAAK,CAAC,OAAQ,aAAa;AAAA,IAC3B,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO,EAAE,cAAc,GAAG,eAAe,CAAC,MAAM,cAAc,OAAO;AAAA,IACrE,UAAU,QAAQ;AAAA,GACnB;AAAA,oBACC,CAAC,IAAI,OAAO,EAAE,QAAQ,GAAG,QAAQ,YAAY,CAAC,MAAM,UAAU,WAAW,GAAG;AAAA,sBAC1E,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,MACL,WAAW,cAAc,QAAQ,QAAQ,CAAC;AAAA,MAC1C,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,SAAS;AAAA,IACX;AAAA,GACD;AAAA,wBACC,CAAC,IAAI,MAAM,MAAM,MAAM,MAAM,QAAQ,WAAW,GAAG,QAAQ,SAAS,CAAC,GAAG;AAAA,2BACrE,CAAC,IAAI,MAAM,WAAW,IAAI,MAAM,QAAQ,WAAW,IAAI,EAAE,CAAC,EAAE;AAAA,wBAC/D,EAFC,IAEK;AAAA,sBACR,EAbC,GAaI;AAAA,oBACP,EAfC,IAeK;AAAA,kBACR,EAvBC,IAuBK;AAAA,gBACR,EAzBC,GAyBI;AAAA,cACP,EA3BC,KA2BM;AAAA,YACT,EA7BC,KA6BM;AAAA;AAAA,YAEP,CAAC,KAAK,MAAM,MAAM,cAAc;AAAA,eAC7B,CAAC,iBACA,CAAC;AAAA,QACK;AAAA,MACF,MAAM,MAAM,MAAM;AAAA,MAClB,MAAM;AAAA,MACN;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,OAAO;AAAA,QACP,SAAS,CAAC,MAAkB,aAAa,EAAE,SAAS,CAAyB;AAAA,QAC7E,IAAI,WAAW;AACb,iBAAO,aAAa,EAAE;AAAA,QACxB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GACA;AAAA,YACJ,EAlBC,KAkBM;AAAA,UACT,EA3DC,GA2DI;AAAA,QACP,EA7DC,GA6DI;AAAA;AAAA,QAEL,CAAC,KAAK,MAAM,CAAC,MAAM,aAAa,MAAM,MAAM,WAAW,KAAK,CAAC,MAAM,cAAc;AAAA,UAC/E,CAAC,GAAG,MAAM,kCAAkC,MAAM,sBAAsB,0FAAoB,EAA3F,GAAgG;AAAA,QACnG,EAFC,KAEM;AAAA,MACT,EAjHC,KAiHM;AAAA,IACT,EAnHC;AAqHL;AAEA,IAAO,uBAAQ;","names":[],"file":"dropdownMenu.jsx"}

package/dist/headless/source/components/inputs/selectField/optionNavigation.js

@@ -0,0 +1,51 @@
+function firstOption(count, isEnabled) {
+  for (let index = 0; index < count; index++) {
+    if (isEnabled(index)) {
+      return index;
+    }
+  }
+  return -1;
+}
+function lastOption(count, isEnabled) {
+  for (let index = count - 1; index >= 0; index--) {
+    if (isEnabled(index)) {
+      return index;
+    }
+  }
+  return -1;
+}
+function moveOption(count, isEnabled, from, steps) {
+  if (from < 0) {
+    return steps > 0 ? firstOption(count, isEnabled) : lastOption(count, isEnabled);
+  }
+  const direction = steps > 0 ? 1 : -1;
+  let result = from;
+  let left = Math.abs(steps);
+  for (let index = from + direction; index >= 0 && index < count && left > 0; index += direction) {
+    if (isEnabled(index)) {
+      result = index;
+      left--;
+    }
+  }
+  return result;
+}
+function matchOption(texts, isEnabled, typed, from) {
+  const query = typed.toLowerCase();
+  const repeated = Array.from(query).every((char) => char === query.charAt(0));
+  const prefix = repeated ? query.charAt(0) : query;
+  const start = repeated ? from + 1 : Math.max(from, 0);
+  for (let step = 0; step < texts.length; step++) {
+    const index = (start + step) % texts.length;
+    if (isEnabled(index) && texts[index]?.toLowerCase().startsWith(prefix)) {
+      return index;
+    }
+  }
+  return -1;
+}
+export {
+  firstOption,
+  lastOption,
+  matchOption,
+  moveOption
+};
+//# sourceMappingURL=optionNavigation.js.map

package/dist/headless/source/components/inputs/selectField/optionNavigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/inputs/selectField/optionNavigation.ts"],
+  "sourcesContent": ["// Moves of the active option over a select's options, by index in the order\n// they are drawn. A disabled option is passed over, as in a native select.\n\nexport type IsOptionEnabled = (index: number) => boolean;\n\n/** The first enabled option, or -1. */\nexport function firstOption(count: number, isEnabled: IsOptionEnabled): number {\n  for (let index = 0; index < count; index++) {\n    if (isEnabled(index)) {\n      return index;\n    }\n  }\n  return -1;\n}\n\n/** The last enabled option, or -1. */\nexport function lastOption(count: number, isEnabled: IsOptionEnabled): number {\n  for (let index = count - 1; index >= 0; index--) {\n    if (isEnabled(index)) {\n      return index;\n    }\n  }\n  return -1;\n}\n\n/**\n * The enabled option `steps` options after `from` (before it for a negative\n * count), stopping at the first or the last one. With no active option, a move\n * down starts at the first option and a move up at the last.\n */\nexport function moveOption(count: number, isEnabled: IsOptionEnabled, from: number, steps: number): number {\n  if (from < 0) {\n    return steps > 0 ? firstOption(count, isEnabled) : lastOption(count, isEnabled);\n  }\n  const direction = steps > 0 ? 1 : -1;\n  let result = from;\n  let left = Math.abs(steps);\n  for (let index = from + direction; index >= 0 && index < count && left > 0; index += direction) {\n    if (isEnabled(index)) {\n      result = index;\n      left--;\n    }\n  }\n  return result;\n}\n\n/**\n * Type-ahead: the next enabled option whose text starts with what was typed.\n * One character typed again and again (\"ttt\") steps through the options that\n * start with it; a longer string keeps the current option while it matches.\n */\nexport function matchOption(texts: string[], isEnabled: IsOptionEnabled, typed: string, from: number): number {\n  const query = typed.toLowerCase();\n  const repeated = Array.from(query).every((char) => char === query.charAt(0));\n  const prefix = repeated ? query.charAt(0) : query;\n  const start = repeated ? from + 1 : Math.max(from, 0);\n  for (let step = 0; step < texts.length; step++) {\n    const index = (start + step) % texts.length;\n    if (isEnabled(index) && texts[index]?.toLowerCase().startsWith(prefix)) {\n      return index;\n    }\n  }\n  return -1;\n}\n"],
+  "mappings": "AAMO,SAAS,YAAY,OAAe,WAAoC;AAC7E,WAAS,QAAQ,GAAG,QAAQ,OAAO,SAAS;AAC1C,QAAI,UAAU,KAAK,GAAG;AACpB,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,WAAW,OAAe,WAAoC;AAC5E,WAAS,QAAQ,QAAQ,GAAG,SAAS,GAAG,SAAS;AAC/C,QAAI,UAAU,KAAK,GAAG;AACpB,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAOO,SAAS,WAAW,OAAe,WAA4B,MAAc,OAAuB;AACzG,MAAI,OAAO,GAAG;AACZ,WAAO,QAAQ,IAAI,YAAY,OAAO,SAAS,IAAI,WAAW,OAAO,SAAS;AAAA,EAChF;AACA,QAAM,YAAY,QAAQ,IAAI,IAAI;AAClC,MAAI,SAAS;AACb,MAAI,OAAO,KAAK,IAAI,KAAK;AACzB,WAAS,QAAQ,OAAO,WAAW,SAAS,KAAK,QAAQ,SAAS,OAAO,GAAG,SAAS,WAAW;AAC9F,QAAI,UAAU,KAAK,GAAG;AACpB,eAAS;AACT;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAOO,SAAS,YAAY,OAAiB,WAA4B,OAAe,MAAsB;AAC5G,QAAM,QAAQ,MAAM,YAAY;AAChC,QAAM,WAAW,MAAM,KAAK,KAAK,EAAE,MAAM,CAAC,SAAS,SAAS,MAAM,OAAO,CAAC,CAAC;AAC3E,QAAM,SAAS,WAAW,MAAM,OAAO,CAAC,IAAI;AAC5C,QAAM,QAAQ,WAAW,OAAO,IAAI,KAAK,IAAI,MAAM,CAAC;AACpD,WAAS,OAAO,GAAG,OAAO,MAAM,QAAQ,QAAQ;AAC9C,UAAM,SAAS,QAAQ,QAAQ,MAAM;AACrC,QAAI,UAAU,KAAK,KAAK,MAAM,KAAK,GAAG,YAAY,EAAE,WAAW,MAAM,GAAG;AACtE,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;",
+  "names": []
+}