@smwb/ui-react 2.7.0 → 2.9.0

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

@@ -1,138 +1,291 @@
-import { jsxs as f, Fragment as K, jsx as t } from "react/jsx-runtime";
-import x, { useState as S, useEffect as q } from "react";
-import { useVirtualList as z } from "../../../hooks/useVirtualList.js";
-import { useSafeLayoutEffect as B } from "../../../hooks/useSafeLayoutEffect.js";
-import { ProgressIndicator as J } from "../../feedBack/progressIndicator/progressIndicator.js";
-import { createPortal as Q } from "react-dom";
-import { Menu as R } from "../../navigation/menu/menu.js";
-import { TextField as U } from "../textField/textField.js";
-import { MenuDivider as X } from "../../navigation/menu/menuDivider.js";
-import { MenuItem as N } from "../../navigation/menu/menuItem.js";
-function ae({
-  menuMaxHeight: d,
-  menuMiddleware: k,
-  search: M,
-  onSearchInputChange: n,
-  items: l,
-  searchValue: W,
-  isOpen: s,
-  onClose: m,
-  anchorElementRef: i,
-  value: c,
-  onItemClick: D,
-  isLoading: p,
-  optionRenderer: E,
-  menuNoItemsMessage: Y,
-  container: o,
-  createOption: a,
-  virtualized: A,
-  itemHeight: L = 40
-}) {
-  const T = Array.isArray(c) ? c : [c], _ = l.some((e) => !!e.group);
-  let h;
-  const v = !!A && !_ && !p && l.length > 0, w = d || 240, { startIndex: j, endIndex: F, totalHeight: G, offsetY: H, onScroll: P } = z({
-    itemCount: v ? l.length : 0,
-    itemHeight: L,
-    viewportHeight: w
-  }), y = (e) => {
-    var g;
-    const r = [];
-    return _ && e.group !== h && (h = e.group, r.push(
-      /* @__PURE__ */ t("li", { className: "smwb-select-field__group-label", role: "presentation", children: e.group }, `group-${(g = e.group) != null ? g : "ungrouped"}`)
-    )), r.push(
-      /* @__PURE__ */ f(
-        N,
+import { jsx as o, jsxs as y, Fragment as H } from "react/jsx-runtime";
+import C, { useRef as E, useState as L, useEffect as me } from "react";
+import q from "clsx";
+import { useVirtualList as fe } from "../../../hooks/useVirtualList.js";
+import { useSafeLayoutEffect as z } from "../../../hooks/useSafeLayoutEffect.js";
+import { useForkRef as J } from "../../../hooks/useForkRef.js";
+import { ProgressIndicator as pe } from "../../feedBack/progressIndicator/progressIndicator.js";
+import { Ripple as _e } from "../../base/ripple/ripple.js";
+import { createPortal as he } from "react-dom";
+import { Menu as be } from "../../navigation/menu/menu.js";
+import { MenuDivider as we } from "../../navigation/menu/menuDivider.js";
+import { TextFieldWrapper as ge } from "../textField/textFieldWrapper.js";
+function A(c, m) {
+  return `${c}-option-${m}`;
+}
+function ve(c, m) {
+  for (let n = c.parentElement; n; n = n.parentElement) {
+    if (n.scrollHeight > n.clientHeight) {
+      const l = n.getBoundingClientRect(), r = c.getBoundingClientRect();
+      r.top < l.top ? n.scrollTop -= l.top - r.top : r.bottom > l.bottom && (n.scrollTop += r.bottom - l.bottom);
+    }
+    if (n === m)
+      break;
+  }
+}
+function K(c) {
+  const { children: m, className: n, disabled: l, selected: r, value: N, onClick: u, optionRenderer: p, ..._ } = c, i = E(null);
+  return /* @__PURE__ */ y(
+    "li",
+    {
+      ..._,
+      className: q("smwb-menu__item", n, {
+        "smwb-menu__item--disabled": l,
+        "smwb-menu__item--selected": r
+      }),
+      "data-value": N,
+      onClick: u,
+      onPointerDown: (f) => {
+        var h;
+        return (h = i.current) == null ? void 0 : h.onRipple(f);
+      },
+      children: [
+        /* @__PURE__ */ o("span", { className: "smwb-menu__item-inner", children: m }),
+        /* @__PURE__ */ o(_e, { actionRef: i })
+      ]
+    }
+  );
+}
+function ye(c) {
+  const { value: m, onChange: n, inputProps: l, inputRef: r } = c, [N, u] = L(!1), p = E(null), _ = J(r, p);
+  return /* @__PURE__ */ o(
+    ge,
+    {
+      className: "smwb-select-field__menu-search-input",
+      variant: "outlined",
+      fullWidth: !0,
+      isFilledState: !!m,
+      isFocused: N,
+      onHolderMouseDown: (i) => {
+        p.current && i.currentTarget === i.target && (i.preventDefault(), p.current.focus());
+      },
+      children: /* @__PURE__ */ o(
+        "input",
         {
-          value: e.value,
-          disabled: e.disabled,
-          selected: !!T.find((u) => u === e.value),
-          onClick: (u) => {
-            e.disabled || D(u, e);
+          ...l,
+          ref: _,
+          type: "text",
+          className: "smwb-text-field__input smwb-text-field__input--show-placeholder",
+          placeholder: "Найти...",
+          autoComplete: "off",
+          value: m,
+          onChange: n,
+          onFocus: (i) => {
+            var f;
+            u(!0), (f = l == null ? void 0 : l.onFocus) == null || f.call(l, i);
           },
-          optionRenderer: E,
-          children: [
-            e.text,
-            e.helperText ? /* @__PURE__ */ t("span", { className: "smwb-select-field__option__helper-text", children: e.helperText }) : null
-          ]
-        },
-        e.key || e.value
+          onBlur: (i) => {
+            var f;
+            u(!1), (f = l == null ? void 0 : l.onBlur) == null || f.call(l, i);
+          }
+        }
       )
-    ), r;
-  }, [V, $] = x.useState(), [b, I] = S();
-  return B(() => {
-    I(o != null ? o : document.body);
-  }, [o]), q(() => {
-    s && i.current && $(i.current.clientWidth);
-  }, [i, s]), x.useEffect(() => {
-    const e = (r) => {
-      s && r.key === "Escape" && m();
+    }
+  );
+}
+function Ye({
+  menuMaxHeight: c,
+  menuMiddleware: m,
+  search: n,
+  onSearchInputChange: l,
+  items: r,
+  searchValue: N,
+  isOpen: u,
+  onClose: p,
+  anchorElementRef: _,
+  value: i,
+  onItemClick: f,
+  isLoading: h,
+  optionRenderer: F,
+  menuNoItemsMessage: Q,
+  container: k,
+  createOption: R,
+  virtualized: U,
+  itemHeight: g = 40,
+  listboxId: b,
+  labelledBy: X,
+  label: Z,
+  multiple: P,
+  activeIndex: v = -1,
+  showActive: M,
+  searchInputProps: I,
+  searchInputRef: O,
+  menuRef: ee
+}) {
+  const te = Array.isArray(i) ? i : [i], Y = r.some((e) => !!e.group), le = r.length + (R ? 1 : 0), w = !!U && !Y && !h && r.length > 0, D = c || 240, { startIndex: x, endIndex: oe, totalHeight: re, offsetY: se, onScroll: $ } = fe({
+    itemCount: w ? r.length : 0,
+    itemHeight: g,
+    viewportHeight: D
+  }), G = E(null), ne = J(ee, G), S = E(null), V = (e, s, t, d) => ({
+    id: b ? A(b, e) : void 0,
+    role: "option",
+    "aria-selected": s,
+    "aria-disabled": t || void 0,
+    // With a virtual list only a window of the options exists.
+    "aria-setsize": w ? le : void 0,
+    "aria-posinset": w ? e + 1 : void 0,
+    // The virtual list places its rows at itemHeight: a row takes that height.
+    style: w && e < r.length ? { height: g } : void 0,
+    disabled: t,
+    selected: s,
+    ...d,
+    className: q(
+      "smwb-select-field__option",
+      d.className,
+      M && e === v && "smwb-select-field__option--active"
+    )
+  }), B = (e, s) => {
+    var a, T;
+    const t = V(
+      s,
+      te.some((W) => W === e.value),
+      e.disabled,
+      {
+        value: e.value,
+        onClick: (W) => {
+          e.disabled || f(W, e);
+        },
+        optionRenderer: F,
+        children: /* @__PURE__ */ y(H, { children: [
+          e.text,
+          e.helperText ? /* @__PURE__ */ o("span", { className: "smwb-select-field__option__helper-text", children: e.helperText }) : null
+        ] })
+      }
+    ), d = (T = (a = e.key) != null ? a : e.value) != null ? T : s;
+    return F ? /* @__PURE__ */ o(C.Fragment, { children: F(t) }, d) : /* @__PURE__ */ o(K, { ...t }, d);
+  }, ie = () => {
+    const e = [];
+    let s, t;
+    const d = () => {
+      if (t)
+        if (t.group === void 0)
+          t.start > 0 && e.push(/* @__PURE__ */ o("li", { className: "smwb-select-field__group-label", role: "presentation" }, `group-${t.start}`)), e.push(...t.options);
+        else {
+          const a = `${b}-group-${t.start}`;
+          e.push(
+            /* @__PURE__ */ y("li", { role: "group", "aria-labelledby": a, className: "smwb-select-field__group", children: [
+              /* @__PURE__ */ o("div", { id: a, className: "smwb-select-field__group-label", children: t.group }),
+              /* @__PURE__ */ o("ul", { role: "presentation", className: "smwb-select-field__group-options", children: t.options })
+            ] }, `group-${t.start}`)
+          );
+        }
+    };
+    return r.forEach((a, T) => {
+      (!t || a.group !== s) && (d(), s = a.group, t = { group: a.group, start: T, options: [] }), t.options.push(B(a, T));
+    }), d(), e;
+  }, [ae, ce] = C.useState(), [j, ue] = L();
+  if (z(() => {
+    ue(k != null ? k : document.body);
+  }, [k]), me(() => {
+    u && _.current && ce(_.current.clientWidth);
+  }, [_, u]), C.useEffect(() => {
+    const e = (s) => {
+      u && s.key === "Escape" && !s.defaultPrevented && p();
     };
     return document.addEventListener("keydown", e), () => {
       document.removeEventListener("keydown", e);
     };
-  }, [s, m]), b ? Q(
-    /* @__PURE__ */ f(
-      R,
+  }, [u, p]), z(() => {
+    if (!u || !M || v < 0 || !b)
+      return;
+    const e = S.current;
+    if (w && e && v < r.length) {
+      const t = v * g, d = e.clientHeight || D, a = t < e.scrollTop ? t : t + g > e.scrollTop + d ? t + g - d : e.scrollTop;
+      a !== e.scrollTop && (e.scrollTop = a, $({ currentTarget: { scrollTop: a } }));
+    }
+    const s = document.getElementById(A(b, v));
+    s && ve(s, G.current);
+  }, [u, M, v, b, w, r.length, g, D, $]), !j)
+    return null;
+  const de = R ? /* @__PURE__ */ o(
+    K,
+    {
+      ...V(r.length, !1, !1, {
+        value: "__create__",
+        className: "smwb-select-field__create-option",
+        onClick: (e) => R.onCreate(e),
+        children: R.text
+      })
+    },
+    "__create__"
+  ) : null;
+  return he(
+    /* @__PURE__ */ y(
+      be,
       {
-        isOpen: s,
-        onClose: m,
-        anchorElement: i.current,
-        middleware: k,
+        ref: ne,
+        isOpen: u,
+        onClose: p,
+        anchorElement: _.current,
+        middleware: m,
         "data-smwb-overlay-layer": "",
+        listRole: "presentation",
+        tabIndex: -1,
+        onMouseDown: (e) => {
+          e.target instanceof HTMLInputElement || e.preventDefault();
+        },
         style: {
-          minWidth: V,
-          maxHeight: d || void 0,
-          overflowY: d ? "auto" : void 0
+          minWidth: ae,
+          maxHeight: c || void 0,
+          overflowY: c ? "auto" : void 0
         },
         children: [
-          M && /* @__PURE__ */ f(K, { children: [
-            /* @__PURE__ */ t("li", { className: "smwb-select-field__menu-search", children: /* @__PURE__ */ t(
-              U,
+          n && /* @__PURE__ */ y(H, { children: [
+            /* @__PURE__ */ o("li", { className: "smwb-select-field__menu-search", children: /* @__PURE__ */ o(
+              ye,
               {
-                className: "smwb-select-field__menu-search-input",
-                type: "text",
-                placeholder: "Найти...",
-                value: W,
-                onChange: (e, r) => n == null ? void 0 : n(e, r.value),
-                fullWidth: !0
+                value: N,
+                onChange: (e) => l == null ? void 0 : l(e, e.target.value),
+                inputProps: I,
+                inputRef: O
               }
             ) }),
-            /* @__PURE__ */ t(X, {})
+            /* @__PURE__ */ o(we, {})
           ] }),
-          p ? /* @__PURE__ */ t("div", { className: "smwb-select-field__menu-loading", children: /* @__PURE__ */ t(J, { type: "indeterminate", variant: "circular", className: "smwb-select-field__menu__loader" }) }) : v ? /* @__PURE__ */ t("li", { role: "presentation", className: "smwb-select-field__virtual-viewport", children: /* @__PURE__ */ t(
-            "div",
+          h ? /* @__PURE__ */ o("li", { className: "smwb-select-field__menu-loading", children: /* @__PURE__ */ o(pe, { type: "indeterminate", variant: "circular", className: "smwb-select-field__menu__loader" }) }) : null,
+          /* @__PURE__ */ o("li", { children: /* @__PURE__ */ y(
+            "ul",
             {
-              className: "smwb-select-field__virtual-scroller",
-              style: { maxHeight: w, overflowY: "auto" },
-              onScroll: P,
-              children: /* @__PURE__ */ t("div", { style: { height: G, position: "relative" }, children: /* @__PURE__ */ t(
-                "ul",
-                {
-                  role: "presentation",
-                  className: "smwb-select-field__virtual-list",
-                  style: { transform: `translateY(${H}px)`, listStyle: "none", margin: 0, padding: 0 },
-                  children: l.slice(j, F).map((e) => y(e))
-                }
-              ) })
+              id: b,
+              role: "listbox",
+              className: "smwb-select-field__listbox",
+              "aria-labelledby": X,
+              "aria-label": Z,
+              "aria-multiselectable": P || void 0,
+              "aria-busy": h || void 0,
+              children: [
+                h ? null : w ? /* @__PURE__ */ o("li", { role: "presentation", className: "smwb-select-field__virtual-viewport", children: /* @__PURE__ */ o(
+                  "div",
+                  {
+                    ref: S,
+                    className: "smwb-select-field__virtual-scroller",
+                    tabIndex: -1,
+                    style: { maxHeight: D, overflowY: "auto" },
+                    onScroll: $,
+                    children: /* @__PURE__ */ o("div", { style: { height: re, position: "relative" }, children: /* @__PURE__ */ o(
+                      "ul",
+                      {
+                        role: "presentation",
+                        className: "smwb-select-field__virtual-list",
+                        style: { transform: `translateY(${se}px)`, listStyle: "none", margin: 0, padding: 0 },
+                        children: r.slice(x, oe).map((e, s) => B(e, x + s))
+                      }
+                    ) })
+                  }
+                ) }) : Y ? ie() : r.map((e, s) => B(e, s)),
+                de
+              ]
             }
-          ) }) : l.length ? l.map((e) => y(e)) : a ? null : /* @__PURE__ */ t("li", { className: "smwb-select-field__empty-items", children: Y || "Опций не найдено." }),
-          a ? /* @__PURE__ */ t(
-            N,
-            {
-              value: "__create__",
-              onClick: (e) => a.onCreate(e),
-              className: "smwb-select-field__create-option",
-              children: a.text
-            },
-            "__create__"
-          ) : null
+          ) }),
+          !h && !r.length && !R ? /* @__PURE__ */ o("li", { className: "smwb-select-field__empty-items", children: Q || "Опций не найдено." }) : null
         ]
       }
     ),
-    b
-  ) : null;
+    j
+  );
 }
 export {
-  ae as DropdownMenu
+  Ye as DropdownMenu,
+  A as dropdownOptionId
 };
 //# sourceMappingURL=dropdownMenu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdownMenu.js","sources":["../../../../src/components/inputs/selectField/dropdownMenu.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useVirtualList } from \"../../../hooks/useVirtualList\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { Menu, MenuDivider, MenuItem, MenuItemProps } from \"../../navigation/menu\";\nimport { TextField } from \"../textField\";\nimport ProgressIndicator from \"../../feedBack/progressIndicator/progressIndicator\";\nimport { createPortal } from \"react-dom\";\nimport { MenuFloatingProps } from \"../../navigation/menu/menuFloating\";\n\nexport interface DropdownItem {\n  key?: string | number;\n  text: string;\n  value: string | number | undefined | null;\n  helperText?: string;\n  /** Disables selection of this option. */\n  disabled?: boolean;\n  /** Optional group label; consecutive items sharing it get a group header. */\n  group?: string;\n}\n\nexport interface DropdownItemProps<T extends HTMLElement = HTMLElement> {\n  menuMaxHeight?: number;\n  menuMiddleware?: MenuFloatingProps[\"middleware\"];\n  menuNoItemsMessage?: React.ReactNode;\n  search?: boolean;\n  onSearchInputChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string | number | undefined) => void;\n  items: DropdownItem[];\n  searchValue?: string | number;\n  isOpen: boolean;\n  onClose: () => void;\n  anchorElementRef: React.RefObject<T>;\n  value?: undefined | null | string | number | (undefined | null | string | number)[];\n  onItemClick: (event: React.SyntheticEvent, item: DropdownItem) => void;\n  isLoading?: boolean;\n  optionRenderer?: (args: MenuItemProps) => React.ReactNode;\n  container?: HTMLElement;\n  /** Renders a trailing \"create\" affordance (used by `creatable` SelectField). */\n  createOption?: { text: React.ReactNode; onCreate: (event: React.SyntheticEvent) => void };\n  /** Windows the option list for large datasets (fixed row height). */\n  virtualized?: boolean;\n  /** Row height (px) used when `virtualized`. */\n  itemHeight?: number;\n}\n\nexport function DropdownMenu<T extends HTMLElement>({\n  menuMaxHeight,\n  menuMiddleware,\n  search,\n  onSearchInputChange,\n  items,\n  searchValue,\n  isOpen,\n  onClose,\n  anchorElementRef,\n  value,\n  onItemClick,\n  isLoading,\n  optionRenderer,\n  menuNoItemsMessage,\n  container,\n  createOption,\n  virtualized,\n  itemHeight = 40,\n}: DropdownItemProps<T>) {\n  const valueArray = Array.isArray(value) ? value : [value];\n  const hasGroups = items.some((i) => !!i.group);\n  let lastGroup: string | undefined;\n\n  const useVirtual = !!virtualized && !hasGroups && !isLoading && items.length > 0;\n  const viewportHeight = menuMaxHeight || 240;\n  const { startIndex, endIndex, totalHeight, offsetY, onScroll } = useVirtualList({\n    itemCount: useVirtual ? items.length : 0,\n    itemHeight,\n    viewportHeight,\n  });\n\n  const renderItem = (el: DropdownItem) => {\n    const node: React.ReactNode[] = [];\n    if (hasGroups && el.group !== lastGroup) {\n      lastGroup = el.group;\n      node.push(\n        <li key={`group-${el.group ?? \"ungrouped\"}`} className=\"smwb-select-field__group-label\" role=\"presentation\">\n          {el.group}\n        </li>\n      );\n    }\n    node.push(\n      <MenuItem\n        key={el.key || el.value}\n        value={el.value}\n        disabled={el.disabled}\n        selected={!!valueArray.find((v) => v === el.value)}\n        onClick={(e: React.SyntheticEvent) => {\n          if (!el.disabled) {\n            onItemClick(e, el);\n          }\n        }}\n        optionRenderer={optionRenderer}\n      >\n        {el.text}\n        {el.helperText ? <span className=\"smwb-select-field__option__helper-text\">{el.helperText}</span> : null}\n      </MenuItem>\n    );\n    return node;\n  };\n  const [menuMinWidth, setMenuMinWidth] = React.useState<number>();\n  // The menu is portalled: its target is resolved in the browser only. A server\n  // render (no document) and the first client render emit nothing here, so the\n  // select renders and hydrates on a server-rendered page.\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n  useSafeLayoutEffect(() => {\n    setDomRoot(container ?? document.body);\n  }, [container]);\n\n  useEffect(() => {\n    if (isOpen && anchorElementRef.current) {\n      setMenuMinWidth(anchorElementRef.current.clientWidth);\n    }\n  }, [anchorElementRef, isOpen]);\n\n  React.useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (isOpen && event.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [isOpen, onClose]);\n\n  if (!domRoot) {\n    return null;\n  }\n\n  return createPortal(\n    <Menu\n      isOpen={isOpen}\n      onClose={onClose}\n      anchorElement={anchorElementRef.current}\n      middleware={menuMiddleware}\n      data-smwb-overlay-layer=\"\"\n      style={{\n        minWidth: menuMinWidth,\n        maxHeight: menuMaxHeight || undefined,\n        overflowY: menuMaxHeight ? \"auto\" : undefined,\n      }}\n    >\n      {search && (\n        <>\n          <li className=\"smwb-select-field__menu-search\">\n            <TextField\n              className=\"smwb-select-field__menu-search-input\"\n              type=\"text\"\n              placeholder=\"Найти...\"\n              value={searchValue}\n              onChange={(e, data) => onSearchInputChange?.(e, data.value)}\n              fullWidth\n            />\n          </li>\n          <MenuDivider />\n        </>\n      )}\n      {isLoading ? (\n        <div className=\"smwb-select-field__menu-loading\">\n          <ProgressIndicator type=\"indeterminate\" variant=\"circular\" className=\"smwb-select-field__menu__loader\" />\n        </div>\n      ) : useVirtual ? (\n        <li role=\"presentation\" className=\"smwb-select-field__virtual-viewport\">\n          <div\n            className=\"smwb-select-field__virtual-scroller\"\n            style={{ maxHeight: viewportHeight, overflowY: \"auto\" }}\n            onScroll={onScroll}\n          >\n            <div style={{ height: totalHeight, position: \"relative\" }}>\n              <ul\n                role=\"presentation\"\n                className=\"smwb-select-field__virtual-list\"\n                style={{ transform: `translateY(${offsetY}px)`, listStyle: \"none\", margin: 0, padding: 0 }}\n              >\n                {items.slice(startIndex, endIndex).map((el) => renderItem(el))}\n              </ul>\n            </div>\n          </div>\n        </li>\n      ) : items.length ? (\n        items.map((el) => renderItem(el))\n      ) : !createOption ? (\n        <li className=\"smwb-select-field__empty-items\">{menuNoItemsMessage || \"Опций не найдено.\"}</li>\n      ) : null}\n      {createOption ? (\n        <MenuItem\n          key=\"__create__\"\n          value=\"__create__\"\n          onClick={(e: React.SyntheticEvent) => createOption.onCreate(e)}\n          className=\"smwb-select-field__create-option\"\n        >\n          {createOption.text}\n        </MenuItem>\n      ) : null}\n    </Menu>,\n    domRoot\n  );\n}\n"],"names":["DropdownMenu","menuMaxHeight","menuMiddleware","search","onSearchInputChange","items","searchValue","isOpen","onClose","anchorElementRef","value","onItemClick","isLoading","optionRenderer","menuNoItemsMessage","container","createOption","virtualized","itemHeight","valueArray","hasGroups","i","lastGroup","useVirtual","viewportHeight","startIndex","endIndex","totalHeight","offsetY","onScroll","useVirtualList","renderItem","el","node","jsx","_a","jsxs","MenuItem","v","e","menuMinWidth","setMenuMinWidth","React","domRoot","setDomRoot","useState","useSafeLayoutEffect","useEffect","onKeyDown","event","createPortal","Menu","Fragment","TextField","data","MenuDivider","ProgressIndicator"],"mappings":"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"}
+{"version":3,"file":"dropdownMenu.js","sources":["../../../../src/components/inputs/selectField/dropdownMenu.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useVirtualList } from \"../../../hooks/useVirtualList\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { Menu, MenuDivider, MenuItemProps } from \"../../navigation/menu\";\nimport { TextFieldWrapper } from \"../textField\";\nimport ProgressIndicator from \"../../feedBack/progressIndicator/progressIndicator\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport { createPortal } from \"react-dom\";\nimport { MenuFloatingProps } from \"../../navigation/menu/menuFloating\";\n\nexport interface DropdownItem {\n  key?: string | number;\n  text: string;\n  value: string | number | undefined | null;\n  helperText?: string;\n  /** Disables selection of this option. */\n  disabled?: boolean;\n  /** Optional group label; consecutive items sharing it get a group header. */\n  group?: string;\n}\n\nexport interface DropdownItemProps<T extends HTMLElement = HTMLElement> {\n  menuMaxHeight?: number;\n  menuMiddleware?: MenuFloatingProps[\"middleware\"];\n  menuNoItemsMessage?: React.ReactNode;\n  search?: boolean;\n  onSearchInputChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string | number | undefined) => void;\n  items: DropdownItem[];\n  searchValue?: string | number;\n  isOpen: boolean;\n  onClose: () => void;\n  anchorElementRef: React.RefObject<T>;\n  value?: undefined | null | string | number | (undefined | null | string | number)[];\n  onItemClick: (event: React.SyntheticEvent, item: DropdownItem) => void;\n  isLoading?: boolean;\n  optionRenderer?: (args: MenuItemProps) => React.ReactNode;\n  container?: HTMLElement;\n  /** Renders a trailing \"create\" affordance (used by `creatable` SelectField). */\n  createOption?: { text: React.ReactNode; onCreate: (event: React.SyntheticEvent) => void };\n  /** Windows the option list for large datasets (fixed row height). */\n  virtualized?: boolean;\n  /** Row height (px) used when `virtualized`. */\n  itemHeight?: number;\n  /** Id of the listbox; the options' ids follow from it (`dropdownOptionId`). */\n  listboxId?: string;\n  /** Ids of the elements that name the listbox and the search box in the menu. */\n  labelledBy?: string;\n  /** Names the listbox and the search box in the menu when no element does. */\n  label?: string;\n  /** Several options can be selected (`aria-multiselectable`). */\n  multiple?: boolean;\n  /** Index of the active option, counting `items` and then the create option; -1 for none. */\n  activeIndex?: number;\n  /** Marks the active option and keeps it in view: the keyboard moved to it. */\n  showActive?: boolean;\n  /** Attributes and handlers of the search box in the menu, which the field makes a combobox. */\n  searchInputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  searchInputRef?: React.Ref<HTMLInputElement>;\n  /** The menu's root element. */\n  menuRef?: React.Ref<HTMLDivElement>;\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 | null) {\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) {\n        box.scrollTop -= outer.top - inner.top;\n      } else if (inner.bottom > outer.bottom) {\n        box.scrollTop += inner.bottom - outer.bottom;\n      }\n    }\n    if (box === root) {\n      break;\n    }\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) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { children, className, disabled, selected, value, onClick, optionRenderer, ...rest } = props;\n  const rippleRef = useRef<RippleActionsRef>(null);\n\n  return (\n    <li\n      {...rest}\n      className={cn(\"smwb-menu__item\", className, {\n        \"smwb-menu__item--disabled\": disabled,\n        \"smwb-menu__item--selected\": selected,\n      })}\n      data-value={value}\n      onClick={onClick}\n      onPointerDown={(event) => rippleRef.current?.onRipple(event)}\n    >\n      <span className=\"smwb-menu__item-inner\">{children}</span>\n      <Ripple actionRef={rippleRef} />\n    </li>\n  );\n}\n\n// The search box at the top of the menu: drawn as a TextField, with the input\n// in the field's hands (TextField puts ARIA attributes on its wrapper).\nfunction MenuSearchInput(props: {\n  value?: string | number;\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  inputRef?: React.Ref<HTMLInputElement>;\n}) {\n  const { value, onChange, inputProps, inputRef } = props;\n  const [isFocused, setIsFocused] = useState(false);\n  const ownRef = useRef<HTMLInputElement>(null);\n  const ref = useForkRef<HTMLInputElement>(inputRef, ownRef);\n\n  return (\n    <TextFieldWrapper\n      className=\"smwb-select-field__menu-search-input\"\n      variant=\"outlined\"\n      fullWidth\n      isFilledState={Boolean(value)}\n      isFocused={isFocused}\n      onHolderMouseDown={(event) => {\n        if (ownRef.current && event.currentTarget === event.target) {\n          event.preventDefault();\n          ownRef.current.focus();\n        }\n      }}\n    >\n      <input\n        {...inputProps}\n        ref={ref}\n        type=\"text\"\n        className=\"smwb-text-field__input smwb-text-field__input--show-placeholder\"\n        placeholder=\"Найти...\"\n        autoComplete=\"off\"\n        value={value}\n        onChange={onChange}\n        onFocus={(event) => {\n          setIsFocused(true);\n          inputProps?.onFocus?.(event);\n        }}\n        onBlur={(event) => {\n          setIsFocused(false);\n          inputProps?.onBlur?.(event);\n        }}\n      />\n    </TextFieldWrapper>\n  );\n}\n\nexport function DropdownMenu<T extends HTMLElement>({\n  menuMaxHeight,\n  menuMiddleware,\n  search,\n  onSearchInputChange,\n  items,\n  searchValue,\n  isOpen,\n  onClose,\n  anchorElementRef,\n  value,\n  onItemClick,\n  isLoading,\n  optionRenderer,\n  menuNoItemsMessage,\n  container,\n  createOption,\n  virtualized,\n  itemHeight = 40,\n  listboxId,\n  labelledBy,\n  label,\n  multiple,\n  activeIndex = -1,\n  showActive,\n  searchInputProps,\n  searchInputRef,\n  menuRef,\n}: DropdownItemProps<T>) {\n  const valueArray = Array.isArray(value) ? value : [value];\n  const hasGroups = items.some((i) => !!i.group);\n  const optionCount = items.length + (createOption ? 1 : 0);\n\n  const useVirtual = !!virtualized && !hasGroups && !isLoading && items.length > 0;\n  const viewportHeight = menuMaxHeight || 240;\n  const { startIndex, endIndex, totalHeight, offsetY, onScroll } = useVirtualList({\n    itemCount: useVirtual ? items.length : 0,\n    itemHeight,\n    viewportHeight,\n  });\n  const menuElementRef = useRef<HTMLDivElement>(null);\n  const forkedMenuRef = useForkRef<HTMLDivElement>(menuRef, menuElementRef);\n  const scrollerRef = useRef<HTMLDivElement>(null);\n\n  // Props of the option at `index`, as an optionRenderer gets them too: its\n  // element needs the id, role and ARIA state for the field to point at it.\n  const optionProps = (\n    index: number,\n    selected: boolean,\n    disabled: boolean | undefined,\n    extra: MenuItemProps\n  ): MenuItemProps => ({\n    id: listboxId ? dropdownOptionId(listboxId, index) : undefined,\n    role: \"option\",\n    \"aria-selected\": selected,\n    \"aria-disabled\": disabled || undefined,\n    // With a virtual list only a window of the options exists.\n    \"aria-setsize\": useVirtual ? optionCount : undefined,\n    \"aria-posinset\": useVirtual ? index + 1 : undefined,\n    // The virtual list places its rows at itemHeight: a row takes that height.\n    style: useVirtual && index < items.length ? { height: itemHeight } : undefined,\n    disabled,\n    selected,\n    ...extra,\n    className: cn(\n      \"smwb-select-field__option\",\n      extra.className,\n      showActive && index === activeIndex && \"smwb-select-field__option--active\"\n    ),\n  });\n\n  const renderItem = (el: DropdownItem, index: number) => {\n    const props = optionProps(\n      index,\n      valueArray.some((v) => v === el.value),\n      el.disabled,\n      {\n        value: el.value,\n        onClick: (e: React.SyntheticEvent) => {\n          if (!el.disabled) {\n            onItemClick(e, el);\n          }\n        },\n        optionRenderer,\n        children: (\n          <>\n            {el.text}\n            {el.helperText ? <span className=\"smwb-select-field__option__helper-text\">{el.helperText}</span> : null}\n          </>\n        ),\n      }\n    );\n    const key = el.key ?? el.value ?? index;\n\n    return optionRenderer ? (\n      <React.Fragment key={key}>{optionRenderer(props)}</React.Fragment>\n    ) : (\n      <DropdownOption key={key} {...props} />\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 renderGroups = () => {\n    const nodes: React.ReactNode[] = [];\n    let lastGroup: string | undefined;\n    let run: { group?: string; start: number; options: React.ReactNode[] } | undefined;\n    const flush = () => {\n      if (!run) {\n        return;\n      }\n      if (run.group === undefined) {\n        if (run.start > 0) {\n          nodes.push(<li key={`group-${run.start}`} className=\"smwb-select-field__group-label\" role=\"presentation\" />);\n        }\n        nodes.push(...run.options);\n      } else {\n        const labelId = `${listboxId}-group-${run.start}`;\n        nodes.push(\n          <li key={`group-${run.start}`} role=\"group\" aria-labelledby={labelId} className=\"smwb-select-field__group\">\n            <div id={labelId} className=\"smwb-select-field__group-label\">\n              {run.group}\n            </div>\n            <ul role=\"presentation\" className=\"smwb-select-field__group-options\">\n              {run.options}\n            </ul>\n          </li>\n        );\n      }\n    };\n    items.forEach((el, index) => {\n      if (!run || el.group !== lastGroup) {\n        flush();\n        lastGroup = el.group;\n        run = { group: el.group, start: index, options: [] };\n      }\n      run.options.push(renderItem(el, index));\n    });\n    flush();\n    return nodes;\n  };\n\n  const [menuMinWidth, setMenuMinWidth] = React.useState<number>();\n  // The menu is portalled: its target is resolved in the browser only. A server\n  // render (no document) and the first client render emit nothing here, so the\n  // select renders and hydrates on a server-rendered page.\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n  useSafeLayoutEffect(() => {\n    setDomRoot(container ?? document.body);\n  }, [container]);\n\n  useEffect(() => {\n    if (isOpen && anchorElementRef.current) {\n      setMenuMinWidth(anchorElementRef.current.clientWidth);\n    }\n  }, [anchorElementRef, isOpen]);\n\n  // An Escape the field did not take (the focus is elsewhere) still closes the menu.\n  React.useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (isOpen && event.key === \"Escape\" && !event.defaultPrevented) {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [isOpen, onClose]);\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  useSafeLayoutEffect(() => {\n    if (!isOpen || !showActive || activeIndex < 0 || !listboxId) {\n      return;\n    }\n    const scroller = scrollerRef.current;\n    if (useVirtual && scroller && activeIndex < items.length) {\n      const top = activeIndex * itemHeight;\n      const height = scroller.clientHeight || viewportHeight;\n      const scrollTop =\n        top < scroller.scrollTop\n          ? top\n          : top + itemHeight > scroller.scrollTop + height\n            ? top + itemHeight - height\n            : scroller.scrollTop;\n      if (scrollTop !== scroller.scrollTop) {\n        scroller.scrollTop = scrollTop;\n        onScroll({ currentTarget: { scrollTop } });\n      }\n    }\n    const option = document.getElementById(dropdownOptionId(listboxId, activeIndex));\n    if (option) {\n      keepInView(option, menuElementRef.current);\n    }\n  }, [isOpen, showActive, activeIndex, listboxId, useVirtual, items.length, itemHeight, viewportHeight, onScroll]);\n\n  if (!domRoot) {\n    return null;\n  }\n\n  const createNode = createOption ? (\n    <DropdownOption\n      key=\"__create__\"\n      {...optionProps(items.length, false, false, {\n        value: \"__create__\",\n        className: \"smwb-select-field__create-option\",\n        onClick: (e: React.SyntheticEvent) => createOption.onCreate(e),\n        children: createOption.text,\n      })}\n    />\n  ) : null;\n\n  return createPortal(\n    <Menu\n      ref={forkedMenuRef}\n      isOpen={isOpen}\n      onClose={onClose}\n      anchorElement={anchorElementRef.current}\n      middleware={menuMiddleware}\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)) {\n          event.preventDefault();\n        }\n      }}\n      style={{\n        minWidth: menuMinWidth,\n        maxHeight: menuMaxHeight || undefined,\n        overflowY: menuMaxHeight ? \"auto\" : undefined,\n      }}\n    >\n      {search && (\n        <>\n          <li className=\"smwb-select-field__menu-search\">\n            <MenuSearchInput\n              value={searchValue}\n              onChange={(e) => onSearchInputChange?.(e, e.target.value)}\n              inputProps={searchInputProps}\n              inputRef={searchInputRef}\n            />\n          </li>\n          <MenuDivider />\n        </>\n      )}\n      {isLoading ? (\n        <li className=\"smwb-select-field__menu-loading\">\n          <ProgressIndicator type=\"indeterminate\" variant=\"circular\" className=\"smwb-select-field__menu__loader\" />\n        </li>\n      ) : null}\n      <li>\n        <ul\n          id={listboxId}\n          role=\"listbox\"\n          className=\"smwb-select-field__listbox\"\n          aria-labelledby={labelledBy}\n          aria-label={label}\n          aria-multiselectable={multiple || undefined}\n          aria-busy={isLoading || undefined}\n        >\n          {isLoading ? null : useVirtual ? (\n            <li role=\"presentation\" className=\"smwb-select-field__virtual-viewport\">\n              <div\n                ref={scrollerRef}\n                className=\"smwb-select-field__virtual-scroller\"\n                tabIndex={-1}\n                style={{ maxHeight: viewportHeight, overflowY: \"auto\" }}\n                onScroll={onScroll}\n              >\n                <div style={{ height: totalHeight, position: \"relative\" }}>\n                  <ul\n                    role=\"presentation\"\n                    className=\"smwb-select-field__virtual-list\"\n                    style={{ transform: `translateY(${offsetY}px)`, listStyle: \"none\", margin: 0, padding: 0 }}\n                  >\n                    {items.slice(startIndex, endIndex).map((el, i) => renderItem(el, startIndex + i))}\n                  </ul>\n                </div>\n              </div>\n            </li>\n          ) : hasGroups ? (\n            renderGroups()\n          ) : (\n            items.map((el, index) => renderItem(el, index))\n          )}\n          {createNode}\n        </ul>\n      </li>\n      {!isLoading && !items.length && !createOption ? (\n        <li className=\"smwb-select-field__empty-items\">{menuNoItemsMessage || \"Опций не найдено.\"}</li>\n      ) : null}\n    </Menu>,\n    domRoot\n  );\n}\n"],"names":["dropdownOptionId","listboxId","index","keepInView","element","root","box","outer","inner","DropdownOption","props","children","className","disabled","selected","value","onClick","optionRenderer","rest","rippleRef","useRef","jsxs","cn","event","_a","jsx","Ripple","MenuSearchInput","onChange","inputProps","inputRef","isFocused","setIsFocused","useState","ownRef","ref","useForkRef","TextFieldWrapper","DropdownMenu","menuMaxHeight","menuMiddleware","search","onSearchInputChange","items","searchValue","isOpen","onClose","anchorElementRef","onItemClick","isLoading","menuNoItemsMessage","container","createOption","virtualized","itemHeight","labelledBy","label","multiple","activeIndex","showActive","searchInputProps","searchInputRef","menuRef","valueArray","hasGroups","i","optionCount","useVirtual","viewportHeight","startIndex","endIndex","totalHeight","offsetY","onScroll","useVirtualList","menuElementRef","forkedMenuRef","scrollerRef","optionProps","extra","renderItem","el","v","e","Fragment","key","_b","React","renderGroups","nodes","lastGroup","run","flush","labelId","menuMinWidth","setMenuMinWidth","domRoot","setDomRoot","useSafeLayoutEffect","useEffect","onKeyDown","scroller","top","height","scrollTop","option","createNode","createPortal","Menu","MenuDivider","ProgressIndicator"],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+export type IsOptionEnabled = (index: number) => boolean;
+/** The first enabled option, or -1. */
+export declare function firstOption(count: number, isEnabled: IsOptionEnabled): number;
+/** The last enabled option, or -1. */
+export declare function lastOption(count: number, isEnabled: IsOptionEnabled): number;
+/**
+ * The enabled option `steps` options after `from` (before it for a negative
+ * count), stopping at the first or the last one. With no active option, a move
+ * down starts at the first option and a move up at the last.
+ */
+export declare function moveOption(count: number, isEnabled: IsOptionEnabled, from: number, steps: number): number;
+/**
+ * Type-ahead: the next enabled option whose text starts with what was typed.
+ * One character typed again and again ("ttt") steps through the options that
+ * start with it; a longer string keeps the current option while it matches.
+ */
+export declare function matchOption(texts: string[], isEnabled: IsOptionEnabled, typed: string, from: number): number;

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

@@ -0,0 +1,38 @@
+function h(r, e) {
+  for (let t = 0; t < r; t++)
+    if (e(t))
+      return t;
+  return -1;
+}
+function s(r, e) {
+  for (let t = r - 1; t >= 0; t--)
+    if (e(t))
+      return t;
+  return -1;
+}
+function p(r, e, t, i) {
+  if (t < 0)
+    return i > 0 ? h(r, e) : s(r, e);
+  const n = i > 0 ? 1 : -1;
+  let f = t, c = Math.abs(i);
+  for (let o = t + n; o >= 0 && o < r && c > 0; o += n)
+    e(o) && (f = o, c--);
+  return f;
+}
+function x(r, e, t, i) {
+  var l;
+  const n = t.toLowerCase(), f = Array.from(n).every((a) => a === n.charAt(0)), c = f ? n.charAt(0) : n, o = f ? i + 1 : Math.max(i, 0);
+  for (let a = 0; a < r.length; a++) {
+    const u = (o + a) % r.length;
+    if (e(u) && ((l = r[u]) != null && l.toLowerCase().startsWith(c)))
+      return u;
+  }
+  return -1;
+}
+export {
+  h as firstOption,
+  s as lastOption,
+  x as matchOption,
+  p as moveOption
+};
+//# sourceMappingURL=optionNavigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"optionNavigation.js","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"],"names":["firstOption","count","isEnabled","index","lastOption","moveOption","from","steps","direction","result","left","matchOption","texts","typed","_a","query","repeated","char","prefix","start","step"],"mappings":"AAMO,SAASA,EAAYC,GAAeC,GAAoC;AAC7E,WAASC,IAAQ,GAAGA,IAAQF,GAAOE;AACjC,QAAID,EAAUC,CAAK;AACjB,aAAOA;AAGX,SAAO;AACT;AAGO,SAASC,EAAWH,GAAeC,GAAoC;AAC5E,WAASC,IAAQF,IAAQ,GAAGE,KAAS,GAAGA;AACtC,QAAID,EAAUC,CAAK;AACjB,aAAOA;AAGX,SAAO;AACT;AAOO,SAASE,EAAWJ,GAAeC,GAA4BI,GAAcC,GAAuB;AACzG,MAAID,IAAO;AACT,WAAOC,IAAQ,IAAIP,EAAYC,GAAOC,CAAS,IAAIE,EAAWH,GAAOC,CAAS;AAEhF,QAAMM,IAAYD,IAAQ,IAAI,IAAI;AAClC,MAAIE,IAASH,GACTI,IAAO,KAAK,IAAIH,CAAK;AACzB,WAASJ,IAAQG,IAAOE,GAAWL,KAAS,KAAKA,IAAQF,KAASS,IAAO,GAAGP,KAASK;AACnF,IAAIN,EAAUC,CAAK,MACjBM,IAASN,GACTO;AAGJ,SAAOD;AACT;AAOO,SAASE,EAAYC,GAAiBV,GAA4BW,GAAeP,GAAsB;AA7CvG,MAAAQ;AA8CL,QAAMC,IAAQF,EAAM,YAAA,GACdG,IAAW,MAAM,KAAKD,CAAK,EAAE,MAAM,CAACE,MAASA,MAASF,EAAM,OAAO,CAAC,CAAC,GACrEG,IAASF,IAAWD,EAAM,OAAO,CAAC,IAAIA,GACtCI,IAAQH,IAAWV,IAAO,IAAI,KAAK,IAAIA,GAAM,CAAC;AACpD,WAASc,IAAO,GAAGA,IAAOR,EAAM,QAAQQ,KAAQ;AAC9C,UAAMjB,KAASgB,IAAQC,KAAQR,EAAM;AACrC,QAAIV,EAAUC,CAAK,OAAKW,IAAAF,EAAMT,CAAK,MAAX,QAAAW,EAAc,cAAc,WAAWI;AAC7D,aAAOf;AAAA,EAEX;AACA,SAAO;AACT;"}

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

@@ -5,6 +5,13 @@ import { MenuItemProps } from "../../navigation/menu";
 export type OnSelectChange = (e: SyntheticEvent, data: SelectFieldProps) => void;
 export interface SelectFieldProps {
     className?: string;
+    /**
+     * The selected value, or the values of a `multiple` field. Any value but
+     * `undefined` makes the field controlled: it shows this value and nothing
+     * else, and a pick, a chip delete or a clear only asks for a change through
+     * `onChange`. `null` means nothing is selected. While `value` is `undefined`,
+     * the field keeps its own value, starting from `defaultValue`.
+     */
     value?: null | string | number | (string | number | undefined | null)[];
     defaultValue?: null | string | number | (string | number)[];
     onChange?: OnSelectChange;
@@ -16,11 +23,21 @@ export interface SelectFieldProps {
     menuMiddleware?: DropdownItemProps["menuMiddleware"];
     menuNoItemsMessage?: React.ReactNode;
     menuContainer?: HTMLElement;
+    /**
+     * A search box for the options: `true` puts it in the field, where it takes
+     * the focus and is the combobox; `"menu"` puts it at the top of the menu,
+     * which moves the focus into it when it opens.
+     */
     search?: true | false | "menu";
     chips?: boolean;
     isFocused?: boolean;
     error?: boolean;
     items: DropdownItem[];
+    /**
+     * Visible label, drawn above the field (an `inline` field draws none). It
+     * names the combobox, whose value is the selected text: "Country", "Russia".
+     * With `chips` the chips' texts follow it in the name: "Labels Backend Docs".
+     */
     label?: string;
     variant?: "outlined" | "filled";
     /** Height of the field, as for TextField: `small` (40px, for toolbars), `medium` (default) or `large`. */
@@ -33,6 +50,12 @@ export interface SelectFieldProps {
     inline?: boolean;
     endAdornment?: React.ReactNode;
     hideSelectArrowIcon?: boolean;
+    /**
+     * Draws an option in place of the default one. It gets the option's props
+     * and returns its `<li>`: pass `id`, `role`, `aria-selected`, `aria-disabled`,
+     * `className` and `onClick` on to it, so the option can be reached from the
+     * keyboard, read out and picked.
+     */
     optionRenderer?: (args: MenuItemProps) => React.ReactNode;
     /** Shows a clear button to reset the selection. */
     clearable?: boolean;
@@ -44,8 +67,15 @@ export interface SelectFieldProps {
     virtualized?: boolean;
     /** Row height (px) used when `virtualized`. */
     itemHeight?: number;
-    /** Accessible label for the combobox control. */
+    /**
+     * Accessible name of the combobox. Replaces the name the visible `label`
+     * gives it; a field without a drawn label needs it.
+     */
     "aria-label"?: string;
+    /**
+     * Id of the control, the part of the field that holds the selected text. It is
+     * the combobox, unless `search` puts a search box in it: then the box is.
+     */
     id?: string;
 }
 export declare const SelectField: React.ForwardRefExoticComponent<SelectFieldProps & React.RefAttributes<HTMLSpanElement>>;