@smwb/ui-solid 0.12.1 → 0.14.0

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

@@ -1,14 +1,25 @@
-import { For, Show, createEffect, createMemo, createSignal, splitProps } from "solid-js";
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, splitProps } from "solid-js";
 import cn from "clsx";
-import { DropdownMenu } from "./dropdownMenu";
+import { DropdownMenu, dropdownOptionId } from "./dropdownMenu";
+import { firstOption, lastOption, matchOption, moveOption } from "./optionNavigation";
 import { Chip } from "../../dataDisplay/chip";
 import { TextFieldWrapper } from "../textField";
+import { createHelperText } from "../../../primitives/createHelperText";
 import { Icon } from "../../base/icon";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { createId } from "../../../primitives/createId";
 function stopEvent(event) {
   event.preventDefault();
   event.stopPropagation();
 }
+function filterItems(items, searchText) {
+  if (!searchText) return items;
+  const pattern = new RegExp(searchText.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i");
+  return items.filter((el) => el.text.search(pattern) !== -1);
+}
+function isPrintableKey(event) {
+  return event.key.length === 1 && event.key !== " " && !event.altKey && !event.ctrlKey && !event.metaKey;
+}
 function SelectField(props) {
   const [local] = splitProps(props, [
     "class",
@@ -50,15 +61,40 @@ function SelectField(props) {
     "ref"
   ]);
   const variant = () => local.variant ?? "outlined";
+  const helper = createHelperText(() => local.helperText, { inline: () => local.inline });
   const [isOpen, setIsOpen] = createSignal(false);
   const [valueState, setValueState] = createSignal(local.defaultValue);
   const [searchValue, setSearchValue] = createSignal("");
-  const isControlled = local.value != null;
+  const [activeIndex, setActiveIndex] = createSignal(-1);
+  const [showActive, setShowActive] = createSignal(false);
+  const typeaheadState = { text: "" };
+  onCleanup(() => clearTimeout(typeaheadState.timer));
+  const isControlled = () => local.value !== void 0;
   let anchorEl;
+  let controlEl;
   let searchWrapperEl;
   let searchInputEl;
-  const value = () => isControlled ? local.value : valueState();
+  let menuEl;
+  let menuSearchInputEl;
+  const value = () => isControlled() ? local.value : valueState();
   const isFocused = () => !!local.isFocused || isOpen();
+  const baseId = createId();
+  const labelId = `${baseId}-label`;
+  const valueId = `${baseId}-value`;
+  const listboxId = `${baseId}-listbox`;
+  const valueIds = () => local.chips ? selectedItems().map((_, index) => `${valueId}-${index}`) : [valueId];
+  const controlLabelledBy = () => {
+    if (local["aria-label"]) return void 0;
+    const chipIds = local.chips ? valueIds() : [];
+    if (local.label && !local.inline) return [labelId, ...chipIds].join(" ");
+    if (chipIds.length > 0) return chipIds.join(" ");
+    return !local.chips && selectedItems().length > 0 ? valueId : void 0;
+  };
+  const labelledBy = () => {
+    if (local["aria-label"]) return void 0;
+    if (local.label && !local.inline) return [labelId, ...valueIds()].join(" ");
+    return local.chips && valueIds().length > 0 ? valueIds().join(" ") : void 0;
+  };
   const selectedItems = createMemo(() => {
     const v = value();
     if (Array.isArray(v)) return local.items.filter((item2) => v.includes(item2.value));
@@ -66,40 +102,65 @@ function SelectField(props) {
     const item = local.items.find((i) => i.value === v);
     return item ? [item] : [];
   });
+  const hasSearchInput = () => local.search === true && !local.readOnly;
+  const displayedItems = createMemo(() => local.onSearch ? local.items : filterItems(local.items, searchValue()));
+  const createOption = () => {
+    const sv = searchValue();
+    if (local.creatable && sv && !local.items.some((i) => i.text.toLowerCase() === sv.toLowerCase())) {
+      return {
+        text: `\u0421\u043E\u0437\u0434\u0430\u0442\u044C "${sv}"`,
+        onCreate: (event) => {
+          local.onCreate?.(sv, event);
+          setSearchValue("");
+          closeMenu();
+        }
+      };
+    }
+    return void 0;
+  };
+  const createIndex = () => createOption() ? displayedItems().length : -1;
+  const optionCount = () => displayedItems().length + (createOption() ? 1 : 0);
+  const isOptionEnabled = (index) => index >= 0 && (index === createIndex() || !local.isLoading && index < displayedItems().length && !displayedItems()[index]?.disabled);
+  const currentActive = () => isOpen() && isOptionEnabled(activeIndex()) ? activeIndex() : -1;
+  const activeDescendant = () => showActive() && currentActive() >= 0 ? dropdownOptionId(listboxId, currentActive()) : void 0;
+  const isItemSelected = (item) => {
+    const v = value();
+    return Array.isArray(v) ? v.includes(item.value) : v != null && v !== "" && v === item.value;
+  };
+  const initialActive = () => {
+    const selected = displayedItems().findIndex(isItemSelected);
+    return isOptionEnabled(selected) ? selected : firstOption(optionCount(), isOptionEnabled);
+  };
+  const pointerActive = () => {
+    const selected = displayedItems().findIndex(isItemSelected);
+    return isOptionEnabled(selected) ? selected : -1;
+  };
+  const openMenu = (active, byKeyboard) => {
+    setActiveIndex(active);
+    setShowActive(byKeyboard);
+    setIsOpen(true);
+  };
+  const closeMenu = () => {
+    if (menuEl?.contains(menuEl.ownerDocument.activeElement)) controlEl?.focus();
+    setIsOpen(false);
+    setActiveIndex(-1);
+    setShowActive(false);
+  };
   const updateValue = (event, next) => {
     local.onChange?.(event, { ...props, value: next, name: local.name || void 0 });
-    setValueState(next);
+    if (!isControlled()) setValueState(next);
   };
   const onMouseDown = (event) => {
-    if (event.button !== 0) return;
+    if (local.disabled || local.readOnly || event.button !== 0) return;
     event.preventDefault();
-    anchorEl?.focus();
-    setIsOpen(!isOpen());
-  };
-  const onClose = () => {
-    setIsOpen(false);
-    anchorEl?.focus();
+    controlEl?.focus();
+    if (isOpen()) closeMenu();
+    else openMenu(pointerActive(), false);
   };
   const onFocus = () => {
-    if (local.search === true) searchInputEl?.focus();
-  };
-  const onKeyDown = (event) => {
-    if (!local.readOnly && [" ", "ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
-      event.preventDefault();
-      setIsOpen(!isOpen());
-    }
+    if (hasSearchInput()) searchInputEl?.focus();
   };
-  createEffect(() => {
-    if (!isFocused() || local.search === "menu" && !isOpen()) {
-      setSearchValue("");
-      local.resetSearch?.();
-    }
-  });
-  createEffect(() => {
-    value();
-    if (searchWrapperEl) searchWrapperEl.scrollLeft = searchWrapperEl.scrollWidth;
-  });
-  const onItemClick = (event, item) => {
+  const chooseItem = (event, item, toggleOff) => {
     let next;
     if (local.multiple) {
       const current = value();
@@ -109,53 +170,151 @@ function SelectField(props) {
       if (idx === -1) next.push(item.value);
       else next.splice(idx, 1);
     } else {
+      if (value() === item.value && !toggleOff) return;
       next = value() === item.value ? "" : item.value;
     }
     if (searchValue()) setSearchValue("");
-    if (!local.multiple) {
-      setIsOpen(false);
-      anchorEl?.focus();
-    }
     updateValue(event, next);
   };
+  const onItemClick = (event, item) => {
+    chooseItem(event, item, true);
+    if (local.multiple) {
+      setActiveIndex(local.items.indexOf(item));
+    } else {
+      closeMenu();
+      controlEl?.focus();
+    }
+  };
+  const chooseActive = (event) => {
+    if (!showActive()) return;
+    const active = currentActive();
+    if (active >= 0 && active === createIndex()) {
+      createOption()?.onCreate(event);
+    } else {
+      const item = displayedItems()[active];
+      if (!item) return;
+      const searching = !!searchValue();
+      chooseItem(event, item, false);
+      if (local.multiple) setActiveIndex(searching ? local.items.indexOf(item) : active);
+      else closeMenu();
+    }
+  };
+  const moveActive = (event, index) => {
+    event.preventDefault();
+    if (index >= 0) setActiveIndex(index);
+    setShowActive(true);
+  };
+  const typeahead = (key) => {
+    clearTimeout(typeaheadState.timer);
+    typeaheadState.text += key;
+    typeaheadState.timer = setTimeout(() => {
+      typeaheadState.text = "";
+    }, 500);
+    const texts = displayedItems().map((item) => item.text);
+    return matchOption(texts, isOptionEnabled, typeaheadState.text, currentActive());
+  };
+  const onComboboxKeyDown = (event, kind) => {
+    const { key } = event;
+    if (local.disabled || local.readOnly || event.ctrlKey || event.metaKey) return;
+    const isControl = kind === "control";
+    const count = optionCount();
+    if (!isOpen()) {
+      if (key === "ArrowDown" || key === "ArrowUp" || key === "Enter" || isControl && key === " ") {
+        event.preventDefault();
+        openMenu(initialActive(), true);
+      } else if (isControl && (key === "Home" || key === "End")) {
+        event.preventDefault();
+        openMenu(key === "Home" ? firstOption(count, isOptionEnabled) : lastOption(count, isOptionEnabled), true);
+      } else if (isControl && !local.search && isPrintableKey(event)) {
+        event.preventDefault();
+        const match = typeahead(key);
+        openMenu(match >= 0 ? match : initialActive(), true);
+      }
+      return;
+    }
+    if (key === "ArrowDown") {
+      moveActive(event, event.altKey ? currentActive() : moveOption(count, isOptionEnabled, currentActive(), 1));
+    } else if (key === "ArrowUp" && event.altKey) {
+      event.preventDefault();
+      if (!local.multiple) chooseActive(event);
+      closeMenu();
+    } else if (key === "ArrowUp") {
+      moveActive(event, moveOption(count, isOptionEnabled, currentActive(), -1));
+    } else if (key === "PageDown" || key === "PageUp") {
+      moveActive(event, moveOption(count, isOptionEnabled, currentActive(), key === "PageDown" ? 10 : -10));
+    } else if (isControl && (key === "Home" || key === "End")) {
+      moveActive(event, key === "Home" ? firstOption(count, isOptionEnabled) : lastOption(count, isOptionEnabled));
+    } else if (key === "Enter" || isControl && key === " ") {
+      event.preventDefault();
+      const active = currentActive();
+      chooseActive(event);
+      setShowActive(true);
+      if (!local.multiple && active < 0 && isControl) closeMenu();
+    } else if (key === "Escape") {
+      event.preventDefault();
+      closeMenu();
+    } else if (key === "Tab") {
+      if (kind === "menuSearch") event.preventDefault();
+      else if (isControl && !local.multiple) chooseActive(event);
+      closeMenu();
+    } else if (isControl && !local.search && isPrintableKey(event)) {
+      moveActive(event, typeahead(key));
+    }
+  };
+  const onKeyDown = (event) => {
+    if (event.target !== event.currentTarget || hasSearchInput()) return;
+    onComboboxKeyDown(event, "control");
+  };
+  createEffect(() => {
+    if (local.readOnly && isOpen()) setIsOpen(false);
+  });
+  createEffect(() => {
+    if (!isFocused() || local.search === "menu" && !isOpen()) {
+      setSearchValue("");
+      local.resetSearch?.();
+    }
+  });
+  createEffect(() => {
+    if (local.disabled && isOpen()) setIsOpen(false);
+  });
+  createEffect(() => {
+    if (isOpen() && local.search === "menu") queueMicrotask(() => menuSearchInputEl?.focus());
+  });
+  createEffect(() => {
+    value();
+    if (searchWrapperEl) searchWrapperEl.scrollLeft = searchWrapperEl.scrollWidth;
+  });
   const onSearchInputChange = (event) => {
-    setSearchValue(event.currentTarget.value);
+    const text = event.currentTarget.value;
+    setSearchValue(text);
     local.onSearch?.(event);
+    const kept = filterItems(local.items, text);
+    const canCreate = local.creatable && text && !local.items.some((i) => i.text.toLowerCase() === text.toLowerCase());
+    const count = local.onSearch ? 0 : kept.length + (canCreate ? 1 : 0);
+    setActiveIndex(firstOption(count, (index) => index >= kept.length || !kept[index]?.disabled));
+    setShowActive(true);
     if (!isOpen()) setIsOpen(true);
   };
+  const hasFocus = (event) => event.currentTarget.contains(event.currentTarget.ownerDocument.activeElement);
   const onDeleteChip = (currentValue) => (event) => {
     const current = value();
     if (Array.isArray(current)) {
+      const refocus = hasFocus(event);
       updateValue(event, current.filter((v) => currentValue !== v));
+      if (refocus) controlEl?.focus();
     }
   };
   const onResetSelected = (event) => {
+    const refocus = hasFocus(event);
     updateValue(event, []);
-  };
-  const filteredItems = () => {
-    if (local.onSearch) return local.items;
-    const sv = searchValue();
-    if (sv) return local.items.filter((el) => el.text.search(new RegExp(sv, "i")) !== -1);
-    return local.items;
-  };
-  const createOption = () => {
-    const sv = searchValue();
-    if (local.creatable && sv && !local.items.some((i) => i.text.toLowerCase() === sv.toLowerCase())) {
-      return {
-        text: `\u0421\u043E\u0437\u0434\u0430\u0442\u044C "${sv}"`,
-        onCreate: (event) => {
-          local.onCreate?.(sv, event);
-          setSearchValue("");
-          setIsOpen(false);
-        }
-      };
-    }
-    return void 0;
+    if (refocus) controlEl?.focus();
   };
   return <>
       <TextFieldWrapper
+    labelId={labelId}
     label={local.label}
-    helperText={local.helperText}
+    helperText={helper.text()}
+    helperTextId={helper.id}
     variant={variant()}
     disabled={local.disabled}
     class={cn(local.class, local.size && local.size !== "medium" && `smwb-text-field_size-${local.size}`)}
@@ -165,74 +324,112 @@ function SelectField(props) {
     isFocused={isFocused()}
     inline={local.inline}
   >
+        {
+    /* The field: a press anywhere in it opens the menu, which lines up
+       under it. The control, the part that is the combobox, sits inside,
+       with the chips and the clear button beside it: nested in it, they
+       would be read into its name. */
+  }
         <span
-    ref={mergeRefs(local.ref, (el) => anchorEl = el)}
-    id={local.id}
+    ref={(el) => anchorEl = el}
     class={cn("smwb-select-field", local.class, {
       "smwb-select-field--filled": variant() === "filled" && local.label,
       "smwb-select-field--disabled": local.disabled,
       "smwb-select-field--search": local.search,
       "smwb-select-field--inline": local.inline
     })}
-    tabindex={local.disabled ? void 0 : 0}
-    role="button"
-    aria-haspopup="listbox"
-    aria-expanded={isOpen()}
-    aria-disabled={local.disabled || void 0}
-    aria-label={local["aria-label"]}
-    onMouseDown={local.disabled || local.readOnly ? void 0 : onMouseDown}
-    onFocus={onFocus}
-    onKeyDown={onKeyDown}
-    data-testid="select-field"
+    onMouseDown={onMouseDown}
   >
           <span class="smwb-select-field__search-wrapper" ref={(el) => searchWrapperEl = el}>
-            <Show
-    when={local.chips}
-    fallback={<span class="smwb-select-field__values">{selectedItems().map((el) => el.text).join(", ")}</span>}
-  >
+            <Show when={local.chips}>
               <span class="smwb-select-field__values">
                 <For each={selectedItems()}>
-                  {(item) => <Chip
+                  {(item, index) => <Chip
     label={item.text}
+    labelId={`${valueId}-${index()}`}
+    deleteAriaLabel={`Remove ${item.text}`}
     size={local.size === "small" ? "small" : "medium"}
-    onDelete={onDeleteChip(item.value)}
+    onDelete={local.readOnly ? void 0 : onDeleteChip(item.value)}
     onDeleteMouseDown={stopEvent}
+    disabled={!!local.disabled}
   />}
                 </For>
               </span>
             </Show>
-            <Show when={local.search && typeof local.search === "boolean" && !local.readOnly}>
-              <span class="smwb-select-field__search">
-                <span class="smwb-select-field__search-text">{searchValue()}</span>
-                <input
+            {
+    /* The combobox, unless the search box in it takes that part. */
+  }
+            <span
+    ref={mergeRefs(local.ref, (el) => controlEl = el)}
+    id={local.id}
+    class="smwb-select-field__control"
+    tabindex={local.disabled ? void 0 : hasSearchInput() ? -1 : 0}
+    role={hasSearchInput() ? void 0 : "combobox"}
+    aria-labelledby={hasSearchInput() ? void 0 : controlLabelledBy()}
+    aria-haspopup={hasSearchInput() ? void 0 : "listbox"}
+    aria-expanded={hasSearchInput() ? void 0 : isOpen()}
+    aria-controls={hasSearchInput() || !isOpen() ? void 0 : listboxId}
+    aria-activedescendant={hasSearchInput() || local.search === "menu" ? void 0 : activeDescendant()}
+    aria-disabled={hasSearchInput() ? void 0 : local.disabled || void 0}
+    aria-readonly={hasSearchInput() ? void 0 : local.readOnly || void 0}
+    aria-describedby={hasSearchInput() ? void 0 : helper.describedBy()}
+    aria-label={hasSearchInput() ? void 0 : local["aria-label"]}
+    onFocus={onFocus}
+    onKeyDown={onKeyDown}
+    data-testid="select-field"
+  >
+              <Show when={!local.chips}>
+                <span id={valueId} class="smwb-select-field__values">
+                  {selectedItems().map((el) => el.text).join(", ")}
+                </span>
+              </Show>
+              <Show when={local.search && typeof local.search === "boolean" && !local.readOnly}>
+                <span class="smwb-select-field__search">
+                  <span class="smwb-select-field__search-text">{searchValue()}</span>
+                  <input
     class="smwb-select-field__search-input"
     ref={(el) => searchInputEl = el}
     type="text"
+    disabled={local.disabled}
     value={searchValue()}
+    role="combobox"
+    aria-haspopup="listbox"
+    aria-expanded={isOpen()}
+    aria-controls={isOpen() ? listboxId : void 0}
+    aria-autocomplete="list"
+    aria-activedescendant={activeDescendant()}
+    autocomplete="off"
+    aria-label={local["aria-label"]}
+    aria-labelledby={labelledBy()}
+    aria-describedby={helper.describedBy()}
     onInput={onSearchInputChange}
     onMouseDown={(event) => {
       event.stopPropagation();
-      setIsOpen(true);
+      if (!isOpen()) openMenu(pointerActive(), false);
+    }}
+    onKeyDown={(event) => {
+      onComboboxKeyDown(event, "search");
+      if (event.key !== "Escape") event.stopPropagation();
     }}
-    onKeyDown={(event) => event.stopPropagation()}
     data-testid="search-input"
   />
-              </span>
-            </Show>
+                </span>
+              </Show>
+            </span>
           </span>
           <span class="smwb-select-field__actions">
             <Show
-    when={(Array.isArray(value()) && value().length > 0 || local.clearable && selectedItems().length > 0) && !local.disabled}
+    when={(Array.isArray(value()) && value().length > 0 || local.clearable && selectedItems().length > 0) && !local.disabled && !local.readOnly}
   >
-              <Icon
-    name="close"
-    size={20}
+              <button
+    type="button"
+    class="smwb-select-field__clear"
+    aria-label="Clear selection"
     onClick={onResetSelected}
     onMouseDown={stopEvent}
-    class={cn("smwb-select-field__icon", "smwb-select-field__icon--close")}
-    aria-label="Clear selection"
-    role="button"
-  />
+  >
+                <Icon name="close" size={20} class={cn("smwb-select-field__icon", "smwb-select-field__icon--close")} />
+              </button>
             </Show>
             {local.endAdornment}
             <Show when={!local.hideSelectArrowIcon}>
@@ -250,15 +447,38 @@ function SelectField(props) {
       </TextFieldWrapper>
       <DropdownMenu
     anchorElement={() => anchorEl ?? null}
+    menuRef={(el) => menuEl = el}
     menuMaxHeight={local.menuMaxHeight}
     menuMiddleware={local.menuMiddleware}
     search={local.search === "menu"}
     onSearchInputChange={onSearchInputChange}
+    searchInputRef={(el) => menuSearchInputEl = el}
+    searchInputProps={{
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      get "aria-expanded"() {
+        return isOpen();
+      },
+      get "aria-controls"() {
+        return isOpen() ? listboxId : void 0;
+      },
+      "aria-autocomplete": "list",
+      get "aria-activedescendant"() {
+        return activeDescendant();
+      },
+      get "aria-labelledby"() {
+        return controlLabelledBy();
+      },
+      get "aria-label"() {
+        return local["aria-label"];
+      },
+      onKeyDown: (event) => onComboboxKeyDown(event, "menuSearch")
+    }}
     optionRenderer={local.optionRenderer}
-    items={filteredItems()}
+    items={displayedItems()}
     searchValue={searchValue()}
     isOpen={isOpen()}
-    onClose={onClose}
+    onClose={closeMenu}
     onItemClick={onItemClick}
     value={value()}
     isLoading={local.isLoading}
@@ -267,6 +487,12 @@ function SelectField(props) {
     virtualized={local.virtualized}
     itemHeight={local.itemHeight}
     createOption={createOption()}
+    listboxId={listboxId}
+    labelledBy={local["aria-label"] ? void 0 : local.label && !local.inline ? labelId : controlLabelledBy()}
+    label={local["aria-label"]}
+    multiple={local.multiple}
+    activeIndex={currentActive()}
+    showActive={showActive()}
   />
     </>;
 }