@kosmeo-ui/react 0.2.0 → 1.0.1

package/src/components/inputs/multiSelect/dropDown.tsx

@@ -5,7 +5,7 @@ import IconButton from "../../buttons/iconButton/index.js";
 import Tooltip from "../../feedback/tooltip/index.js";
 import { PropsWithSize } from "../../types.js";
 import Input from "../input/index.js";
-import { useMemo } from "react";
+import { itemKeys } from "./utils.js";
 import {
   faCheckDouble,
   faXmark,
@@ -23,46 +23,82 @@ interface DropDownProps<T> extends PropsWithSize {
   handleSelectAll: () => void;
   handleClearAll: () => void;
   handleOptionToggle: (optionValue: T) => void;
+  listboxId: string;
+  /** Id of the field's label, which also names the listbox. */
+  labelId?: string;
+  highlightedIndex: number;
+  optionRefs: React.RefObject<(HTMLLIElement | null)[]>;
+  onSearchKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
 }
 
+export const optionId = (listboxId: string, index: number) =>
+  `${listboxId}-option-${index}`;
+
 export const DropDownSection = <T,>(props: DropDownProps<T>) => {
   const { size = "md", value = [] } = props;
 
-  const list = useMemo(() => {
-    return props.filteredOptions.length > 0 ? (
-      props.filteredOptions.map((option) => {
-        const isSelected = value.find(
-          (v) => v[props.labelKey] === option[props.labelKey]
-        );
-        const key = Math.random().toString(36).slice(2);
-        return (
-          <li
-            key={key}
-            className={`k-multiselect-option k-multiselect-option-${size} ${
-              isSelected ? "k-multiselect-option-selected" : ""
-            }`}
-            onClick={(e) => {
-              e.stopPropagation();
-              props.handleOptionToggle(option);
-            }}
-          >
-            <span className="k-multiselect-option-label">
-              {String(option[props.labelKey])}
-            </span>
-            {isSelected && (
-              <FontAwesomeIcon icon={faCheck} className="k-multiselect-check" />
-            )}
-          </li>
-        );
-      })
+  const optionKeys = itemKeys(props.filteredOptions, props.labelKey);
+  const list =
+    props.filteredOptions.length > 0 ? (
+      <ul
+        id={props.listboxId}
+        role="listbox"
+        aria-multiselectable="true"
+        aria-labelledby={props.labelId}
+        className="k-multiselect-options-list"
+      >
+        {props.filteredOptions.map((option, index) => {
+          const isSelected = value.find(
+            (v) => v[props.labelKey] === option[props.labelKey]
+          );
+          return (
+            <li
+              key={optionKeys[index]}
+              ref={(el) => {
+                props.optionRefs.current[index] = el;
+              }}
+              id={optionId(props.listboxId, index)}
+              role="option"
+              aria-selected={!!isSelected}
+              className={`k-multiselect-option k-multiselect-option-${size} ${
+                isSelected ? "k-multiselect-option-selected" : ""
+              } ${
+                index === props.highlightedIndex
+                  ? "k-multiselect-option-highlighted"
+                  : ""
+              }`}
+              // Keeps focus, and so the keyboard, in the search box.
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={(e) => {
+                e.stopPropagation();
+                props.handleOptionToggle(option);
+              }}
+            >
+              <span className="k-multiselect-option-label">
+                {String(option[props.labelKey])}
+              </span>
+              {isSelected && (
+                <FontAwesomeIcon
+                  icon={faCheck}
+                  className="k-multiselect-check"
+                />
+              )}
+            </li>
+          );
+        })}
+      </ul>
     ) : (
-      <li className={`k-multiselect-no-results k-multiselect-option-${size}`}>
-        {props.options.length === 0
-          ? "No options available"
-          : "No options found"}
-      </li>
+      <div className="k-multiselect-options-list">
+        <div
+          role="status"
+          className={`k-multiselect-no-results k-multiselect-option-${size}`}
+        >
+          {props.options.length === 0
+            ? "No options available"
+            : "No options found"}
+        </div>
+      </div>
     );
-  }, [props.filteredOptions, value]);
 
   return (
     <div className={`k-multiselect-dropdown k-multiselect-dropdown-${size}`}>
@@ -79,11 +115,22 @@ export const DropDownSection = <T,>(props: DropDownProps<T>) => {
           onClick={(e: React.MouseEvent<HTMLInputElement>) =>
             e.stopPropagation()
           }
+          onKeyDown={props.onSearchKeyDown}
+          aria-label="Search options"
+          aria-controls={
+            props.filteredOptions.length > 0 ? props.listboxId : undefined
+          }
+          aria-activedescendant={
+            props.highlightedIndex > -1
+              ? optionId(props.listboxId, props.highlightedIndex)
+              : undefined
+          }
         />
         <div className="k-multiselect-bulk-actions">
           <Tooltip content="Select All">
             <IconButton
               icon={faCheckDouble}
+              aria-label="Select all"
               size={size}
               variant="success"
               onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
@@ -96,6 +143,7 @@ export const DropDownSection = <T,>(props: DropDownProps<T>) => {
           <Tooltip content="Clear All">
             <IconButton
               icon={faXmark}
+              aria-label="Clear all"
               size={size}
               variant="danger"
               onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
@@ -108,7 +156,7 @@ export const DropDownSection = <T,>(props: DropDownProps<T>) => {
         </div>
       </div>
 
-      <ul className="k-multiselect-options-list">{list}</ul>
+      {list}
     </div>
   );
 };

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

@@ -1,13 +1,16 @@
 "use client";
 
+import useScrollIntoView from "../../../hooks/useScrollIntoView.js";
 import DropdownArrowButton from "../dropdownArrowButton/index.js";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import useOutsideClick from "../../../hooks/useOutsideClick.js";
-import { useState, useRef, useEffect, useMemo } from "react";
+import useListKeyboard from "../../../hooks/useListKeyboard.js";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { useState, useRef, useEffect, useId } from "react";
 import FieldShell from "../../forms/fieldShell/index.js";
 import { DropDownSection } from "./dropDown.js";
 import { PropsWithSize } from "../../types.js";
+import { itemKeys } from "./utils.js";
 import "./styles.css";
 
 interface MultiSelectProps<T> extends PropsWithSize {
@@ -59,8 +62,13 @@ const MultiSelect = <T,>(props: MultiSelectProps<T>) => {
   const [filteredOptions, setFilteredOptions] = useState(props.options);
   const containerRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
-  const componentId =
-    props.id || `multiselect-${Math.random().toString(36).substring(2, 9)}`;
+  const comboboxRef = useRef<HTMLDivElement>(null);
+  const optionRefs = useRef<(HTMLLIElement | null)[]>([]);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const generatedId = useId();
+  const componentId = props.id || `multiselect-${generatedId}`;
+  const labelId = `${componentId}-label`;
+  const listboxId = `${componentId}-listbox`;
 
   // Filter options based on search term
   useEffect(() => {
@@ -74,6 +82,7 @@ const MultiSelect = <T,>(props: MultiSelectProps<T>) => {
     } else {
       setFilteredOptions(props.options);
     }
+    setHighlightedIndex(-1);
   }, [searchTerm, props.options]);
 
   useOutsideClick([containerRef], () => setIsOpen(false));
@@ -85,11 +94,35 @@ const MultiSelect = <T,>(props: MultiSelectProps<T>) => {
     }
   }, [isOpen]);
 
+  useScrollIntoView(optionRefs, highlightedIndex, isOpen);
+
   const handleToggleDropdown = () => {
     if (disabled) return;
     setIsOpen(!isOpen);
     if (!isOpen) {
       setSearchTerm("");
+      setHighlightedIndex(-1);
+    }
+  };
+
+  const close = () => {
+    setIsOpen(false);
+    comboboxRef.current?.focus();
+  };
+
+  // Closes when focus moves to something outside, such as on Tab. A null
+  // relatedTarget (a click on nothing focusable) is left to useOutsideClick,
+  // so a click inside the dropdown doesn't close it.
+  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+    const next = e.relatedTarget;
+    if (next && !containerRef.current?.contains(next)) setIsOpen(false);
+  };
+
+  const handleComboboxKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (disabled || isOpen) return;
+    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+      e.preventDefault();
+      handleToggleDropdown();
     }
   };
 
@@ -167,42 +200,61 @@ const MultiSelect = <T,>(props: MultiSelectProps<T>) => {
     props.onChange([]);
   };
 
-  const selectedItems = useMemo(() => {
-    return value.map((v) => {
-      const key = Math.random().toString(36).slice(2);
-      return (
-        <div key={key} className="k-multiselect-selected-item">
-          <span className="k-multiselect-selected-item-label">
-            {String(v[props.labelKey])}
-          </span>
-          {!disabled && (
-            <button
-              type="button"
-              className="k-multiselect-selected-item-remove"
-              aria-label={`Remove ${String(v[props.labelKey])}`}
-              onClick={(e) => {
-                e.stopPropagation();
-                handleOptionToggle(v);
-              }}
-            >
-              <FontAwesomeIcon icon={faXmark} />
-            </button>
-          )}
-        </div>
-      );
-    });
-  }, [value]);
+  const handleSearchKeyDown = useListKeyboard({
+    isOpen,
+    length: filteredOptions.length,
+    highlightedIndex,
+    setHighlightedIndex,
+    onSelect: (index) => handleOptionToggle(filteredOptions[index]),
+    onClose: close,
+  });
+
+  const selectedKeys = itemKeys(value, props.labelKey);
+  const selectedItems = value.map((v, index) => (
+    <div key={selectedKeys[index]} className="k-multiselect-selected-item">
+      <span className="k-multiselect-selected-item-label">
+        {String(v[props.labelKey])}
+      </span>
+      {/* Mouse-only: a combobox can't contain controls, so keyboard and
+          screen-reader users deselect from the listbox instead. */}
+      {!disabled && (
+        <button
+          type="button"
+          className="k-multiselect-selected-item-remove"
+          tabIndex={-1}
+          aria-hidden="true"
+          aria-label={`Remove ${String(v[props.labelKey])}`}
+          onClick={(e) => {
+            e.stopPropagation();
+            handleOptionToggle(v);
+          }}
+        >
+          <FontAwesomeIcon icon={faXmark} />
+        </button>
+      )}
+    </div>
+  ));
 
   return (
-    <div ref={containerRef}>
+    <div ref={containerRef} onBlur={handleBlur}>
       <FieldShell
         label={props.label}
         required={required}
-        htmlFor={componentId}
+        labelId={labelId}
         className="k-multiselect-container"
       >
         <div
+          ref={comboboxRef}
           id={componentId}
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-expanded={isOpen}
+          aria-controls={isOpen ? listboxId : undefined}
+          aria-labelledby={props.label ? labelId : undefined}
+          aria-label={props.label ? undefined : placeholder}
+          aria-required={required || undefined}
+          aria-disabled={disabled || undefined}
+          onKeyDown={handleComboboxKeyDown}
           className={`k-multiselect k-multiselect-${size} ${
             disabled ? "k-multiselect-disabled" : ""
           } ${isOpen ? "k-multiselect-open" : ""}`}
@@ -241,6 +293,11 @@ const MultiSelect = <T,>(props: MultiSelectProps<T>) => {
             handleSelectAll={handleSelectAll}
             handleClearAll={handleClearAll}
             handleOptionToggle={handleOptionToggle}
+            listboxId={listboxId}
+            labelId={props.label ? labelId : undefined}
+            highlightedIndex={highlightedIndex}
+            optionRefs={optionRefs}
+            onSearchKeyDown={handleSearchKeyDown}
           />
         )}
       </FieldShell>

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

@@ -8,19 +8,19 @@
   margin-bottom: 0.1rem;
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--text-color);
+  color: var(--k-text-color);
 }
 
 .k-multiselect {
-  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;
   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;
   display: flex;
   align-items: flex-start;
@@ -31,39 +31,39 @@
 
 /* Size variants */
 .k-multiselect-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   padding: 0.5rem 2.5rem 0.5rem 0.75rem;
 }
 
 .k-multiselect-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
   padding: 0.625rem 2.75rem 0.625rem 1rem;
 }
 
 .k-multiselect-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
   padding: 0.75rem 3rem 0.75rem 1.25rem;
 }
 
 /* States */
 .k-multiselect:hover:not(.k-multiselect-disabled) {
-  border-color: var(--primary-color);
+  border-color: var(--k-primary-color);
 }
 
 .k-multiselect:focus {
   outline: none;
-  border-color: var(--border-color-active);
-  box-shadow: 0 0 0 0.1875rem var(--border-shadow-color-active);
+  border-color: var(--k-border-color-active);
+  box-shadow: 0 0 0 0.1875rem var(--k-border-shadow-color-active);
 }
 
 .k-multiselect-open {
-  border-color: var(--border-color-active);
-  box-shadow: 0 0 0 0.1875rem var(--border-shadow-color-active);
+  border-color: var(--k-border-color-active);
+  box-shadow: 0 0 0 0.1875rem var(--k-border-shadow-color-active);
 }
 
 .k-multiselect-disabled {
-  background-color: var(--disabled-bg);
-  color: var(--disabled-text);
+  background-color: var(--k-background-color-disabled);
+  color: var(--k-text-color-disabled);
   cursor: not-allowed;
   opacity: 0.6;
 }
@@ -75,7 +75,7 @@
 }
 
 .k-multiselect-placeholder {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   opacity: 0.7;
 }
 
@@ -93,31 +93,31 @@
 
 /* Fixed height for 5 items based on size */
 .k-multiselect-sm .k-multiselect-selected-items {
-  max-height: calc(5 * (var(--text-size-sm) + 1.15rem));
+  max-height: calc(5 * (var(--k-text-size-sm) + 1.15rem));
 }
 
 .k-multiselect-md .k-multiselect-selected-items {
-  max-height: calc(5 * (var(--text-size-md) + 1.5rem));
+  max-height: calc(5 * (var(--k-text-size-md) + 1.5rem));
 }
 
 .k-multiselect-lg .k-multiselect-selected-items {
-  max-height: calc(5 * (var(--text-size-lg) + 1.8rem));
+  max-height: calc(5 * (var(--k-text-size-lg) + 1.8rem));
 }
 
 .k-multiselect-selected-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: var(--background-color-dark);
+  background-color: var(--k-background-color-dark);
   border-radius: 0.25rem;
 }
 
 .k-multiselect-selected-item:hover {
-  background-color: var(--background-color-hover);
+  background-color: var(--k-background-color-hover);
 }
 
 .k-multiselect-selected-item-label {
-  color: var(--text-color);
+  color: var(--k-text-color);
   flex: 1;
   text-align: left;
 }
@@ -125,17 +125,17 @@
 /* Size variants for selected items */
 .k-multiselect-sm .k-multiselect-selected-item {
   padding: 0.25rem 0.5rem;
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-multiselect-md .k-multiselect-selected-item {
   padding: 0.375rem 0.625rem;
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
 }
 
 .k-multiselect-lg .k-multiselect-selected-item {
   padding: 0.5rem 0.75rem;
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
 }
 
 .k-multiselect-selected-item-remove {
@@ -143,7 +143,7 @@
   border: none;
   padding: 0;
   cursor: pointer;
-  color: var(--text-color);
+  color: var(--k-text-color);
   transition: color 0.2s ease-in-out;
   display: flex;
   align-items: center;
@@ -153,19 +153,19 @@
 
 /* Size variants for remove button */
 .k-multiselect-sm .k-multiselect-selected-item-remove {
-  font-size: calc(var(--text-size-sm) * 0.85);
+  font-size: calc(var(--k-text-size-sm) * 0.85);
 }
 
 .k-multiselect-md .k-multiselect-selected-item-remove {
-  font-size: calc(var(--text-size-md) * 0.85);
+  font-size: calc(var(--k-text-size-md) * 0.85);
 }
 
 .k-multiselect-lg .k-multiselect-selected-item-remove {
-  font-size: calc(var(--text-size-lg) * 0.85);
+  font-size: calc(var(--k-text-size-lg) * 0.85);
 }
 
 .k-multiselect-selected-item-remove:hover {
-  color: var(--danger-color-text);
+  color: var(--k-danger-color-text);
 }
 
 /* Dropdown */
@@ -175,12 +175,12 @@
   left: 0;
   right: 0;
   margin-top: 0.25rem;
-  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-radius: 0.375rem;
   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);
   z-index: 1000;
   max-height: 20rem;
   display: flex;
@@ -190,16 +190,19 @@
 /* Search input */
 .k-multiselect-search-container {
   padding: 0.5rem;
-  border-bottom: 0.0625rem solid var(--border-color);
+  border-bottom: 0.0625rem solid var(--k-border-color);
   display: flex;
   gap: 0.5rem;
   align-items: center;
 }
 
 /* Bulk actions */
+/* Buttons allow min-width: 0, so without this the search input squeezes them
+   down to their padding and the icons render a few pixels wide. */
 .k-multiselect-bulk-actions {
   display: flex;
   gap: 0.25rem;
+  flex-shrink: 0;
 }
 
 /* Options list */
@@ -221,31 +224,31 @@
 }
 
 .k-multiselect-option-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   padding: 0.375rem 0.75rem;
 }
 
 .k-multiselect-option-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
   padding: 0.5rem 1rem;
 }
 
 .k-multiselect-option-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
   padding: 0.625rem 1.25rem;
 }
 
 .k-multiselect-option:hover {
-  background-color: var(--background-color-dark);
+  background-color: var(--k-background-color-dark);
 }
 
 .k-multiselect-option-selected {
-  background-color: var(--background-color-dark);
-  color: var(--text-color);
+  background-color: var(--k-background-color-dark);
+  color: var(--k-text-color);
 }
 
 .k-multiselect-option-selected:hover {
-  background-color: var(--background-color-hover);
+  background-color: var(--k-background-color-hover);
 }
 
 .k-multiselect-option-label {
@@ -253,13 +256,18 @@
 }
 
 .k-multiselect-check {
-  color: var(--text-color);
+  color: var(--k-text-color);
   font-size: 0.875rem;
 }
 
 .k-multiselect-no-results {
   text-align: center;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   font-style: italic;
   padding: 1rem;
 }
+
+.k-multiselect-option-highlighted {
+  background-color: var(--k-background-color-hover);
+  box-shadow: inset 0 0 0 0.125rem var(--k-border-color-active);
+}

package/src/components/inputs/multiSelect/utils.ts

@@ -0,0 +1,18 @@
+/**
+ * Stable React keys for a list of items: an item's `value` field when it has
+ * one, otherwise its label. Repeats get an occurrence suffix so keys stay
+ * unique.
+ */
+export const itemKeys = <T>(items: T[], labelKey: keyof T): string[] => {
+  const seen = new Map<string, number>();
+  return items.map((item) => {
+    const id =
+      typeof item === "object" && item !== null && "value" in item
+        ? (item as { value: unknown }).value
+        : item[labelKey];
+    const base = String(id);
+    const count = seen.get(base) ?? 0;
+    seen.set(base, count + 1);
+    return count === 0 ? base : `${base}#${count}`;
+  });
+};

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

@@ -81,6 +81,7 @@ const PhoneInput = (props: PhoneInputProps) => {
 
   useEffect(() => {
     if (value === lastEmittedRef.current) return;
+    lastEmittedRef.current = value;
     if (!value) {
       setDisplay("");
       return;
@@ -89,6 +90,8 @@ const PhoneInput = (props: PhoneInputProps) => {
     if (parsed?.country) {
       setCountry(parsed.country);
       setDisplay(parsed.formatNational());
+    } else if (parsed) {
+      setDisplay(parsed.formatNational());
     } else {
       const formatter = new AsYouType(country);
       setDisplay(formatter.input(value));
@@ -121,14 +124,18 @@ const PhoneInput = (props: PhoneInputProps) => {
     const formatter = new AsYouType(country);
     const formatted = formatter.input(raw);
     const nationalDigits = formatter.getNationalNumber();
+    const nextCountry = formatter.getCountry() ?? country;
+    setCountry(nextCountry);
     setDisplay(formatted);
-    emit(nationalDigits, country);
+    emit(nationalDigits, nextCountry);
   };
 
   const handleCountrySelect = (cc: CountryCode) => {
     setCountry(cc);
     setPickerOpen(false);
-    const digits = display.replace(/\D/g, "");
+    const current = new AsYouType(country);
+    current.input(display);
+    const digits = current.getNationalNumber();
     if (digits) {
       const formatter = new AsYouType(cc);
       const formatted = formatter.input(digits);
@@ -192,6 +199,7 @@ const PhoneInput = (props: PhoneInputProps) => {
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               placeholder="Search country or code"
+              aria-label="Search country or code"
             />
           </div>
           <ul className="k-phone-input-list" role="listbox">