@kosmeo-ui/react 0.2.0 → 1.0.0

package/src/components/inputs/searchList/index.tsx

@@ -5,16 +5,19 @@ import useDebouncedValue from "../../../hooks/useDebouncedValue.js";
 import useScrollIntoView from "../../../hooks/useScrollIntoView.js";
 import useListKeyboard from "../../../hooks/useListKeyboard.js";
 import useOutsideClick from "../../../hooks/useOutsideClick.js";
+import { useEffect, useId, useState, useRef } from "react";
 import { UseQueryResult } from "@tanstack/react-query";
 import Spinner from "../../feedback/spinner/index.js";
-import { useEffect, useState, useRef } from "react";
 import Portal from "../../overlays/portal/index.js";
 import { PropsWithSize } from "../../types.js";
 import Input from "../input/index.js";
 import "./styles.css";
 
 interface SearchListProps<T> extends PropsWithSize {
-  /** **_Optional_** the selected value for this component */
+  /**
+   * **_Optional_** the selected value, for a controlled SearchList (`null`
+   * for none). Leave it out and SearchList keeps track of the pick itself.
+   */
   value?: T | null;
   /** The useQuery function that is used to retrieve the data from the server */
   queryFn: (
@@ -63,11 +66,17 @@ const SearchList = <T,>(props: SearchListProps<T>) => {
     props.value ? String(props.value[props.labelKey]) : ""
   );
   const [searchValue, setSearchValue] = useState<string>("");
+  // Without a `value` prop, the pick is held here instead.
+  const isControlled = props.value !== undefined;
+  const [ownValue, setOwnValue] = useState<T | null>(null);
+  const selected = isControlled ? props.value : ownValue;
   const [isOpen, setIsOpen] = useState(false);
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const listRef = useRef<HTMLUListElement>(null);
   const optionRefs = useRef<(HTMLLIElement | null)[]>([]);
+  const listboxId = `${useId()}-listbox`;
+  const optionId = (index: number) => `${listboxId}-option-${index}`;
   const { anchorRef: inputWrapperRef, position: dropdownPos } =
     useFloatingPosition({ isOpen });
 
@@ -91,12 +100,13 @@ const SearchList = <T,>(props: SearchListProps<T>) => {
 
   useEffect(() => {
     if (inputValue.length === 0) {
+      setOwnValue(null);
       props.onSelect(null);
       if (!isOpen) setSearchValue("");
       return;
     }
     if (inputValue.length < 3) return;
-    if (props.value && inputValue === String(props.value[props.labelKey])) {
+    if (selected && inputValue === String(selected[props.labelKey])) {
       setSearchValue("");
       setIsOpen(false);
       return;
@@ -109,7 +119,7 @@ const SearchList = <T,>(props: SearchListProps<T>) => {
       setSearchValue("");
       return;
     }
-    if (props.value && debouncedInput === String(props.value[props.labelKey])) {
+    if (selected && debouncedInput === String(selected[props.labelKey])) {
       setSearchValue("");
       return;
     }
@@ -122,23 +132,32 @@ const SearchList = <T,>(props: SearchListProps<T>) => {
 
   const handleOptionClick = (option: T, event?: React.MouseEvent) => {
     setInputValue(String(option[props.labelKey]));
+    if (!isControlled) setOwnValue(option);
     props.onSelect(option, event);
     setIsOpen(false);
     setHighlightedIndex(-1);
   };
 
-  const activeOptions =
-    searchValue === "" && inputValue.length < 3
-      ? props.initialOptions
-      : query.data;
+  const isLoading = isTyping || query.isLoading;
+  const showsInitial = searchValue === "" && inputValue.length < 3;
+  // The options on screen; the keyboard works only through these, never
+  // through stale results hidden behind the spinner.
+  const options =
+    (isLoading
+      ? undefined
+      : showsInitial
+        ? props.initialOptions
+        : query.data) ?? [];
+  const showList = isOpen && !!dropdownPos;
+  const hasOptions = options.length > 0;
 
   const handleKeyDown = useListKeyboard({
-    isOpen: isOpen && !!activeOptions,
-    length: activeOptions?.length ?? 0,
+    isOpen: isOpen && hasOptions,
+    length: options.length,
     highlightedIndex,
     setHighlightedIndex,
     onSelect: (index) => {
-      if (activeOptions?.[index]) handleOptionClick(activeOptions[index]);
+      if (options[index]) handleOptionClick(options[index]);
     },
     onClose: () => setIsOpen(false),
   });
@@ -156,9 +175,9 @@ const SearchList = <T,>(props: SearchListProps<T>) => {
   const handleInputBlur = () => {
     setTimeout(() => {
       if (isOpen) return;
-      if (props.value) {
-        setInputValue(String(props.value[props.labelKey]));
-        props.onSelect(props.value);
+      if (selected) {
+        setInputValue(String(selected[props.labelKey]));
+        props.onSelect(selected);
       } else {
         setInputValue("");
       }
@@ -167,110 +186,93 @@ const SearchList = <T,>(props: SearchListProps<T>) => {
 
   optionRefs.current = [];
 
-  const dropdownList =
-    isOpen && dropdownPos ? (
-      <ul
-        ref={listRef}
-        className={`k-search-list-dropdown k-search-list-dropdown-portal ${
-          longDropDown
-            ? "k-search-list-dropdown-large"
-            : "k-search-list-dropdown-small"
-        }`}
-        style={{
-          position: "fixed",
-          top: dropdownPos.top,
-          left: dropdownPos.left,
-          width: dropdownPos.width,
-        }}
-      >
-        {isTyping || query.isLoading ? (
-          <li className="k-search-list-loading">
-            <Spinner size="sm" />
-          </li>
-        ) : searchValue === "" && inputValue.length < 3 ? (
-          props.initialOptions && props.initialOptions.length > 0 ? (
-            <>
-              {props.initialOptions.map((option, index) => {
-                const rendered = props.renderOption
-                  ? props.renderOption(option)
-                  : null;
-                return (
-                  <li
-                    ref={(el) => {
-                      optionRefs.current[index] = el;
-                    }}
-                    key={index}
-                    className={`k-search-list-option k-search-list-option-${size} ${
-                      index === highlightedIndex
-                        ? "k-search-list-option-highlighted"
-                        : ""
-                    }`}
-                    onMouseDown={(e) => {
-                      e.preventDefault();
-                      handleOptionClick(option, e);
-                    }}
-                    onMouseOver={() => setHighlightedIndex(index)}
-                  >
-                    {rendered ? rendered.node : String(option[props.labelKey])}
-                  </li>
-                );
-              })}
-              <li className={`k-search-list-info k-search-list-info-${size}`}>
-                Type to filter
+  const status = isLoading ? (
+    <Spinner size="sm" />
+  ) : showsInitial ? (
+    "Start typing to search"
+  ) : (
+    "No results found"
+  );
+
+  const dropdownList = showList ? (
+    <ul
+      ref={listRef}
+      // With no options the popup only holds a status message.
+      {...(hasOptions
+        ? {
+            id: listboxId,
+            role: "listbox",
+            "aria-label": props.label ?? props.placeholder ?? "Type to search",
+          }
+        : { role: "presentation" })}
+      className={`k-search-list-dropdown k-search-list-dropdown-portal ${
+        longDropDown
+          ? "k-search-list-dropdown-large"
+          : "k-search-list-dropdown-small"
+      }`}
+      style={{
+        position: "fixed",
+        top: dropdownPos.top,
+        left: dropdownPos.left,
+        width: dropdownPos.width,
+      }}
+    >
+      {hasOptions ? (
+        <>
+          {options.map((option, index) => {
+            const rendered = props.renderOption
+              ? props.renderOption(option)
+              : null;
+            return (
+              <li
+                ref={(el) => {
+                  optionRefs.current[index] = el;
+                }}
+                key={index}
+                id={optionId(index)}
+                role="option"
+                aria-selected={index === highlightedIndex}
+                className={`k-search-list-option k-search-list-option-${size} ${
+                  index === highlightedIndex
+                    ? "k-search-list-option-highlighted"
+                    : ""
+                }`}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  handleOptionClick(option, e);
+                }}
+                onMouseOver={() => setHighlightedIndex(index)}
+              >
+                {rendered ? rendered.node : String(option[props.labelKey])}
               </li>
-            </>
-          ) : (
-            <li
-              className={`k-search-list-no-results k-search-list-no-results-${size}`}
-            >
-              Start typing to search
-            </li>
-          )
-        ) : query.data && query.data.length > 0 ? (
-          <>
-            {query.data.map((option, index) => {
-              const rendered = props.renderOption
-                ? props.renderOption(option)
-                : null;
-              return (
-                <li
-                  ref={(el) => {
-                    optionRefs.current[index] = el;
-                  }}
-                  key={index}
-                  className={`k-search-list-option k-search-list-option-${size} ${
-                    index === highlightedIndex
-                      ? "k-search-list-option-highlighted"
-                      : ""
-                  }`}
-                  onMouseDown={(e) => {
-                    e.preventDefault();
-                    handleOptionClick(option, e);
-                  }}
-                  onMouseOver={() => setHighlightedIndex(index)}
-                >
-                  {rendered ? rendered.node : String(option[props.labelKey])}
-                </li>
-              );
-            })}
-            <li className={`k-search-list-info k-search-list-info-${size}`}>
-              Continue typing to filter
-            </li>
-          </>
-        ) : (
+            );
+          })}
+          {/* A visual hint; a listbox may only contain options. */}
           <li
-            className={`k-search-list-no-results k-search-list-no-results-${size}`}
+            className={`k-search-list-info k-search-list-info-${size}`}
+            aria-hidden="true"
           >
-            No results found
+            {showsInitial ? "Type to filter" : "Continue typing to filter"}
           </li>
-        )}
-      </ul>
-    ) : null;
+        </>
+      ) : isLoading ? (
+        <li className="k-search-list-loading">{status}</li>
+      ) : (
+        <li
+          role="status"
+          className={`k-search-list-no-results k-search-list-no-results-${size}`}
+        >
+          {status}
+        </li>
+      )}
+    </ul>
+  ) : null;
 
   return (
     <div className="k-search-list-container" ref={dropdownRef}>
       <div ref={inputWrapperRef}>
         <Input
+          id={props.id}
           label={props.label}
           required={required}
           disabled={disabled}
@@ -278,6 +280,7 @@ const SearchList = <T,>(props: SearchListProps<T>) => {
           onChange={(e) => {
             const newValue = e.target.value;
             setInputValue(newValue);
+            setHighlightedIndex(-1);
           }}
           onKeyDown={handleKeyDown}
           onFocus={handleInputFocus}
@@ -286,6 +289,15 @@ const SearchList = <T,>(props: SearchListProps<T>) => {
           dropDown={true}
           isOpen={isOpen}
           size={size}
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded={showList}
+          aria-controls={showList && hasOptions ? listboxId : undefined}
+          aria-activedescendant={
+            showList && hasOptions && highlightedIndex > -1
+              ? optionId(highlightedIndex)
+              : undefined
+          }
         />
       </div>
       <Portal>{dropdownList}</Portal>

package/src/components/inputs/searchList/styles.css

@@ -9,8 +9,8 @@
   left: 0;
   right: 0;
   z-index: 10000;
-  background-color: var(--background-color-light);
-  border: 0.0625rem solid var(--border-color);
+  background-color: var(--k-background-color-light);
+  border: 0.0625rem solid var(--k-border-color);
   border-top: none;
   border-radius: 0 0 0.25rem 0.25rem;
   overflow-y: auto;
@@ -19,14 +19,14 @@
   padding: 0;
   margin: 0;
   box-shadow:
-    0 0.25rem 0.375rem -0.0625rem var(--shadow-color),
-    0 0.125rem 0.25rem -0.125rem var(--shadow-color);
+    0 0.25rem 0.375rem -0.0625rem var(--k-shadow-color),
+    0 0.125rem 0.25rem -0.125rem var(--k-shadow-color);
 }
 
 .k-search-list-option {
   cursor: pointer;
   text-align: left;
-  color: var(--text-color);
+  color: var(--k-text-color);
 }
 .k-search-list-dropdown-large {
   max-height: 30rem;
@@ -38,77 +38,77 @@
 
 .k-search-list-option:hover,
 .k-search-list-option:focus {
-  background-color: var(--background-color-dark);
+  background-color: var(--k-background-color-dark);
 }
 
 .k-search-list-option-highlighted {
-  background-color: var(--background-color-dark);
+  background-color: var(--k-background-color-dark);
   cursor: pointer;
 }
 
 .k-search-list-option-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   padding: 0.5rem 0.75rem;
 }
 
 .k-search-list-option-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
   padding: 0.75rem 1rem;
 }
 
 .k-search-list-option-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
   padding: 1rem 1.25rem;
 }
 
 .k-search-list-loading {
   text-align: center;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   font-style: italic;
   padding: 0.75rem 1rem;
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-search-list-info {
   text-align: center;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   font-style: italic;
-  /* border-top: 0.0625rem solid var(--border-color); */
-  background-color: var(--background-color-light);
+  /* border-top: 0.0625rem solid var(--k-border-color); */
+  background-color: var(--k-background-color-light);
 }
 
 .k-search-list-info-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   padding: 0.5rem 0.75rem;
 }
 
 .k-search-list-info-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
   padding: 0.75rem 1rem;
 }
 
 .k-search-list-info-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
   padding: 1rem 1.25rem;
 }
 
 .k-search-list-no-results {
   text-align: center;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   font-style: italic;
 }
 
 .k-search-list-no-results-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   padding: 0.75rem 1rem;
 }
 
 .k-search-list-no-results-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
   padding: 1rem 1.25rem;
 }
 
 .k-search-list-no-results-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
   padding: 1.25rem 1.5rem;
 }

package/src/components/inputs/searchSelect/index.tsx

@@ -51,6 +51,7 @@ const SearchSelect = <T,>(props: SearchSelectProps<T>) => {
   const dropdownRef = useRef<HTMLDivElement>(null);
   const listRef = useRef<HTMLUListElement>(null);
   const optionRefs = useRef<(HTMLLIElement | null)[]>([]);
+  const blurTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const { anchorRef: inputWrapperRef, position: dropdownPos } =
     useFloatingPosition({ isOpen });
 
@@ -74,6 +75,7 @@ const SearchSelect = <T,>(props: SearchSelectProps<T>) => {
   };
 
   useOutsideClick([dropdownRef, listRef], restore);
+  useEffect(() => () => clearTimeout(blurTimerRef.current), []);
   useScrollIntoView(optionRefs, highlightedIndex, isOpen);
 
   const choose = (option: T) => {
@@ -156,11 +158,15 @@ const SearchSelect = <T,>(props: SearchSelectProps<T>) => {
             setInputValue(e.target.value);
             setFiltering(true);
             setIsOpen(true);
+            setHighlightedIndex(-1);
           }}
           onKeyDown={handleKeyDown}
-          onFocus={() => setIsOpen(true)}
+          onFocus={() => {
+            clearTimeout(blurTimerRef.current);
+            setIsOpen(true);
+          }}
           onBlur={() => {
-            setTimeout(restore, 100);
+            blurTimerRef.current = setTimeout(restore, 100);
           }}
           placeholder={props.placeholder || "Select..."}
           dropDown={true}

package/src/components/inputs/select/index.tsx

@@ -2,7 +2,7 @@
 
 import FieldShell from "../../forms/fieldShell/index.js";
 import { PropsWithSize } from "../../types.js";
-import { useLayoutEffect } from "react";
+import { useId, useLayoutEffect } from "react";
 import "./styles.css";
 
 export interface SelectOption<T = string> {
@@ -36,8 +36,8 @@ interface SelectProps<T = string> extends PropsWithSize {
 const Select = <T extends string = string>(props: SelectProps<T>) => {
   const { size = "md", disabled = false, required = false } = props;
 
-  const selectId =
-    props.id || `select-${Math.random().toString(36).substring(2, 9)}`;
+  const generatedId = useId();
+  const selectId = props.id || `select-${generatedId}`;
 
   const selectClasses = ["k-select", `k-select-${size}`]
     .filter(Boolean)

package/src/components/inputs/select/styles.css

@@ -10,57 +10,135 @@
 }
 
 .k-select {
-  border: 0.0625rem solid var(--border-color);
+  border: 0.0625rem solid var(--k-border-color);
   border-radius: 0.375rem;
-  color: var(--text-color);
+  color: var(--k-text-color);
   width: 100%;
   box-sizing: border-box;
   line-height: 1.5;
   transition:
     border-color 0.2s ease-in-out,
     box-shadow 0.2s ease-in-out;
-  background-color: var(--background-color-light);
+  background-color: var(--k-background-color-light);
   cursor: pointer;
 }
 
 .k-select-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   padding: 0.69rem 0.75rem;
 }
 
 .k-select-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
   padding: 0.84rem 1rem;
 }
 
 .k-select-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
   padding: 0.98rem 1.25rem;
 }
 
 .k-select:focus {
   outline: none;
-  border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px var(--border-shadow-color-active);
+  border-color: var(--k-primary-color);
+  box-shadow: 0 0 0 2px var(--k-border-shadow-color-active);
 }
 
 .k-select:disabled {
-  background-color: var(--background-color-disabled);
-  color: var(--text-color-disabled);
+  background-color: var(--k-background-color-disabled);
+  color: var(--k-text-color-disabled);
   cursor: not-allowed;
-  border-color: var(--border-color-disabled);
+  border-color: var(--k-border-color-disabled);
 }
 
 .k-select option {
-  color: var(--text-color);
-  background-color: var(--background-color);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color);
   padding: 0.5rem;
 }
 
 .k-select:invalid {
-  border-color: var(--danger-color);
+  border-color: var(--k-danger-color);
 }
 
 .k-select:hover:not(:disabled) {
-  border-color: var(--border-color-hover);
+  border-color: var(--k-border-color-hover);
+}
+
+/* A native picker opens wherever the OS puts it (macOS lays the selected
+   option over the field). Where customizable <select> is supported, the
+   picker opens below the field and takes the theme instead; elsewhere the
+   native picker remains. */
+@supports (appearance: base-select) {
+  .k-select,
+  .k-select::picker(select) {
+    appearance: base-select;
+  }
+
+  /* The browser's filled triangle, swapped for the chevron MultiSelect and
+     SearchSelect show (FontAwesome chevron-down), sized and colored alike. */
+  .k-select::picker-icon {
+    content: "";
+    align-self: center;
+    width: 0.875em;
+    height: 1em;
+    background-color: var(--k-text-color-secondary);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E")
+      center / contain no-repeat;
+    transition:
+      background-color 0.2s ease-in-out,
+      rotate 0.2s ease-in-out;
+  }
+
+  .k-select-sm::picker-icon {
+    font-size: 0.75rem;
+  }
+
+  .k-select-md::picker-icon {
+    font-size: 0.875rem;
+  }
+
+  .k-select-lg::picker-icon {
+    font-size: 1rem;
+  }
+
+  .k-select:hover:not(:disabled)::picker-icon {
+    background-color: var(--k-primary-color-text);
+  }
+
+  .k-select:open::picker-icon {
+    rotate: 180deg;
+  }
+
+  .k-select::picker(select) {
+    margin-top: 0.25rem;
+    padding: 0.25rem 0;
+    border: 0.0625rem solid var(--k-border-color);
+    border-radius: 0.375rem;
+    background-color: var(--k-background-color-light);
+    box-shadow:
+      0 0.25rem 0.375rem -0.0625rem var(--k-shadow-color),
+      0 0.125rem 0.25rem -0.125rem var(--k-shadow-color);
+  }
+
+  .k-select option {
+    padding: 0.5rem 1rem;
+    background-color: transparent;
+    cursor: pointer;
+  }
+
+  .k-select option:hover,
+  .k-select option:focus-visible {
+    outline: none;
+    background-color: var(--k-background-color-hover);
+  }
+
+  .k-select option:checked {
+    background-color: var(--k-primary-color-background-light);
+  }
+
+  .k-select option:disabled {
+    color: var(--k-text-color-disabled);
+    cursor: default;
+  }
 }

package/src/components/inputs/switch/index.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useId } from "react";
 import "./styles.css";
 
 interface SwitchProps {
@@ -21,8 +22,8 @@ const Switch = (props: SwitchProps) => {
     size = "md",
   } = props;
 
-  const inputId =
-    props.id || `switch-${Math.random().toString(36).substring(2, 9)}`;
+  const generatedId = useId();
+  const inputId = props.id || `switch-${generatedId}`;
 
   return (
     <div className={`k-switch-container k-switch-${labelLocation}`}>