atlas-react-kit 0.11.0 → 0.11.1

package/README.md

@@ -8,7 +8,7 @@ React 19, Tailwind 4, and Node >=20.19 are required. Next 16 is needed only
 when using `next/tabs-nav-link`.
 
 ```sh
-npm install --save-exact atlas-react-kit@0.11.0
+npm install --save-exact atlas-react-kit@0.11.1
 ```
 
 Import components by subpath:
@@ -128,7 +128,7 @@ artifact with the package owner's npm login:
 ```sh
 mkdir -p release-artifacts
 npm pack --pack-destination release-artifacts
-npm publish ./release-artifacts/atlas-react-kit-0.11.0.tgz --access public
+npm publish ./release-artifacts/atlas-react-kit-0.11.1.tgz --access public
 ```
 
 Pin an exact package version in consuming applications. Roll back an upgrade by

package/dist/calendar.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { DayPicker, getDefaultClassNames, } from "react-day-picker";
+import { DayPicker, getDefaultClassNames, useDayPicker, } from "react-day-picker";
 import { cn } from "./utils.js";
 import { Button, buttonVariants } from "./button.js";
 import { ariaDisabledState } from "./internal/styles.js";
@@ -14,6 +14,27 @@ const chevronIcons = {
     up: ChevronUpIcon,
     down: ChevronDownIcon,
 };
+function CalendarRoot({ className, rootRef, ...props }) {
+    return (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props }));
+}
+function CalendarChevron({ className, orientation = "down", ...props }) {
+    const Icon = chevronIcons[orientation];
+    return _jsx(Icon, { className: cn("size-4", className), ...props });
+}
+function CalendarDayAdapter(props) {
+    const { dayPickerProps: { locale }, } = useDayPicker();
+    return _jsx(CalendarDayButton, { locale: locale, ...props });
+}
+function CalendarWeekNumber({ children, ...props }) {
+    return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
+}
+// Stable component types keep the calendar DOM and focus on parent updates.
+const calendarComponents = {
+    Root: CalendarRoot,
+    Chevron: CalendarChevron,
+    DayButton: CalendarDayAdapter,
+    WeekNumber: CalendarWeekNumber,
+};
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, labels, components, ...props }) {
     const defaultClassNames = getDefaultClassNames();
     const navButton = cn(buttonVariants({ variant: buttonVariant }), navButtonClassName);
@@ -72,17 +93,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             hidden: cn("invisible", defaultClassNames.hidden),
             ...classNames,
         }, components: {
-            Root: ({ className, rootRef, ...props }) => {
-                return (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props }));
-            },
-            Chevron: ({ className, orientation = "down", ...props }) => {
-                const Icon = chevronIcons[orientation];
-                return _jsx(Icon, { className: cn("size-4", className), ...props });
-            },
-            DayButton: ({ ...props }) => (_jsx(CalendarDayButton, { locale: locale, ...props })),
-            WeekNumber: ({ children, ...props }) => {
-                return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
-            },
+            ...calendarComponents,
             ...components,
         }, ...props }));
 }

package/dist/combobox.js

@@ -1,15 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { ChevronDownIcon } from "lucide-react";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { formControlTriggerClassName } from "./internal/form-control.js";
 import { foldSearchText, handleListboxKey, listboxOptionId, } from "./internal/listbox-navigation.js";
-import { ListboxEmptyStatus, ListboxOption } from "./internal/listbox-option.js";
+import { ListboxEmptyStatus, PickerOption } from "./internal/listbox-option.js";
+import { createSearchIndex, filterSearchIndex, normalizeSearchQuery, } from "./internal/search.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn, onInputChange } from "./utils.js";
 const CREATE_OPTION_KEY = "__atlas-combobox-create";
+const getOptionLabel = (option) => option.label;
 /**
  * Trimmed query, or `null` when there is nothing to create.
  */
@@ -28,7 +30,7 @@ function defaultCreateLabel(value) {
  * rejected by `normalize`, or already in the list (value or label,
  * ignoring case and accents). Domain catalogs stay with the caller.
  */
-function resolveCreateValue(query, options, normalize) {
+function resolveCreateValue(query, existingValues, normalize) {
     const created = normalize(query);
     if (created == null)
         return null;
@@ -36,9 +38,7 @@ function resolveCreateValue(query, options, normalize) {
     if (!value)
         return null;
     const needle = foldSearchText(value);
-    const exists = options.some((option) => foldSearchText(option.value) === needle ||
-        foldSearchText(option.label) === needle);
-    return exists ? null : value;
+    return existingValues.has(needle) ? null : value;
 }
 /**
  * Searchable single-select built from Button, Popover, and Input.
@@ -67,18 +67,27 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
         return [...options, { value, label: value }];
     }, [creatable, options, value]);
     const selected = resolvedOptions.find((option) => option.value === value);
+    const searchIndex = React.useMemo(() => createSearchIndex(resolvedOptions, getOptionLabel), [resolvedOptions]);
+    const existingValues = React.useMemo(() => new Set(creatable
+        ? searchIndex.flatMap(({ item, label }) => [
+            foldSearchText(item.value),
+            label,
+        ])
+        : []), [creatable, searchIndex]);
     const filtered = React.useMemo(() => {
-        const needle = foldSearchText(query.trim());
+        const needle = normalizeSearchQuery(query);
         if (!needle)
             return resolvedOptions;
-        return resolvedOptions.filter((option) => foldSearchText(option.label).includes(needle));
-    }, [resolvedOptions, query]);
-    const createValue = creatable
-        ? resolveCreateValue(query, resolvedOptions, normalizeCreateValue)
-        : null;
-    const createOption = createValue
-        ? { value: createValue, label: createLabel(createValue) }
-        : null;
+        return filterSearchIndex(searchIndex, needle);
+    }, [resolvedOptions, searchIndex, query]);
+    const createOption = React.useMemo(() => {
+        const createValue = creatable
+            ? resolveCreateValue(query, existingValues, normalizeCreateValue)
+            : null;
+        return createValue
+            ? { value: createValue, label: createLabel(createValue) }
+            : null;
+    }, [creatable, query, existingValues, normalizeCreateValue, createLabel]);
     const list = createOption ? [...filtered, createOption] : filtered;
     const onOpenChange = (next) => {
         setOpen(next);
@@ -105,11 +114,11 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
     // Closing from here does not go through Radix's onOpenChange, so clear the
     // query too. A stale query would filter the next open while the highlight
     // is computed against the full list, and Enter would pick the wrong option.
-    const selectValue = (next) => {
-        onValueChange(next);
+    const selectOption = React.useCallback((option) => {
+        onValueChange(option.value);
         setOpen(false);
         setQuery("");
-    };
+    }, [onValueChange]);
     const activeOption = list[highlight];
     const empty = list.length === 0;
     // APG combobox: ArrowDown, ArrowUp, and Alt+ArrowDown open the list from
@@ -128,7 +137,7 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
             onEnter: (index) => {
                 const option = list[index];
                 if (option)
-                    selectValue(option.value);
+                    selectOption(option);
             },
         });
     };
@@ -137,6 +146,6 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
                             : cn("max-h-60 overflow-y-auto p-1", listClassName), children: list.map((option, index) => {
                             const isCreate = createOption != null && option === createOption;
                             const isSelected = option.value === value && !isCreate;
-                            return (_jsxs(ListboxOption, { "data-slot": "combobox-option", listId: listId, index: index, active: index === highlight, selected: isSelected, className: "pr-8", onMouseEnter: () => setHighlight(index), onClick: () => selectValue(option.value), children: [_jsx("span", { className: "truncate", children: option.label }), isSelected ? (_jsx(CheckIcon, { className: "pointer-events-none absolute right-2 size-3.5" })) : null] }, isCreate ? CREATE_OPTION_KEY : option.value));
+                            return (_jsx(PickerOption, { "data-slot": "combobox-option", listId: listId, index: index, active: index === highlight, selected: isSelected, showCheck: true, item: option, getLabel: getOptionLabel, onHighlight: setHighlight, onSelect: selectOption }, isCreate ? CREATE_OPTION_KEY : option.value));
                         }) }), _jsx(ListboxEmptyStatus, { empty: empty, children: emptyText })] })] }));
 }

package/dist/internal/listbox-option.d.ts

@@ -14,6 +14,22 @@ type ListboxOptionProps = Omit<React.ComponentProps<"button">, "id" | "role" | "
  * component's right padding and indicator.
  */
 export declare function ListboxOption({ listId, index, active, selected, className, ...props }: ListboxOptionProps): React.JSX.Element;
+type PickerOptionProps<T> = {
+    item: T;
+    getLabel: (item: T) => string;
+    onSelect: (item: T) => void;
+    onHighlight: (index: number) => void;
+    listId: string;
+    index: number;
+    active: boolean;
+    selected: boolean;
+    disabled?: boolean;
+    showCheck?: boolean;
+    "data-slot": string;
+};
+/** Only the old and new active rows rerender during keyboard navigation. */
+declare function PickerOptionInner<T>({ item, getLabel, onSelect, onHighlight, showCheck, ...props }: PickerOptionProps<T>): React.JSX.Element;
+export declare const PickerOption: typeof PickerOptionInner;
 /**
  * The "No results" status. It sits outside the listbox, which may own only
  * options, and stays mounted (sr-only when not empty) so screen readers

package/dist/internal/listbox-option.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { CheckIcon } from "lucide-react";
 import { cn } from "../utils.js";
 import { listboxOptionId, scrollOptionIntoView } from "./listbox-navigation.js";
 import { optionRow } from "./overlay-styles.js";
@@ -13,6 +14,11 @@ import { listboxEmpty, optionState } from "./styles.js";
 export function ListboxOption({ listId, index, active, selected, className, ...props }) {
     return (_jsx("li", { role: "none", children: _jsx("button", { ref: active ? scrollOptionIntoView : undefined, id: listboxOptionId(listId, index), type: "button", role: "option", tabIndex: -1, "aria-selected": selected, className: cn(optionRow, selected && optionState.selected, active && optionState.active, className), ...props }) }));
 }
+/** Only the old and new active rows rerender during keyboard navigation. */
+function PickerOptionInner({ item, getLabel, onSelect, onHighlight, showCheck, ...props }) {
+    return (_jsxs(ListboxOption, { ...props, className: showCheck ? "pr-8" : "pr-3", onMouseEnter: () => onHighlight(props.index), onClick: () => onSelect(item), children: [_jsx("span", { className: "truncate", children: getLabel(item) }), showCheck && props.selected ? (_jsx(CheckIcon, { className: "pointer-events-none absolute right-2 size-3.5" })) : null] }));
+}
+export const PickerOption = React.memo(PickerOptionInner);
 /**
  * The "No results" status. It sits outside the listbox, which may own only
  * options, and stays mounted (sr-only when not empty) so screen readers

package/dist/internal/search.d.ts

@@ -0,0 +1,8 @@
+/** Fold the query once; item labels are folded when their catalog changes. */
+export declare function normalizeSearchQuery(query: string): string;
+export declare function matchesSearchLabel(label: string, needle: string): boolean;
+export declare function createSearchIndex<T>(items: T[], getLabel: (item: T) => string): {
+    item: T;
+    label: string;
+}[];
+export declare function filterSearchIndex<T>(index: ReturnType<typeof createSearchIndex<T>>, needle: string): T[];

package/dist/internal/search.js

@@ -0,0 +1,16 @@
+import { foldSearchText } from "./listbox-navigation.js";
+/** Fold the query once; item labels are folded when their catalog changes. */
+export function normalizeSearchQuery(query) {
+    return foldSearchText(query.trim());
+}
+export function matchesSearchLabel(label, needle) {
+    return label.includes(needle);
+}
+export function createSearchIndex(items, getLabel) {
+    return items.map((item) => ({ item, label: foldSearchText(getLabel(item)) }));
+}
+export function filterSearchIndex(index, needle) {
+    return index
+        .filter(({ label }) => matchesSearchLabel(label, needle))
+        .map(({ item }) => item);
+}

package/dist/search-picker.js

@@ -4,17 +4,18 @@ import * as React from "react";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
 import { foldSearchText, handleListboxKey, listboxOptionId, } from "./internal/listbox-navigation.js";
-import { ListboxEmptyStatus, ListboxOption } from "./internal/listbox-option.js";
+import { ListboxEmptyStatus, PickerOption } from "./internal/listbox-option.js";
+import { createSearchIndex, filterSearchIndex, matchesSearchLabel, normalizeSearchQuery, } from "./internal/search.js";
 import { cn } from "./utils.js";
 export { foldSearchText };
 /**
  * Default SearchPicker filter: the folded label includes the folded query.
  */
 export function defaultSearchFilter(item, query, getLabel) {
-    const needle = foldSearchText(query.trim());
+    const needle = normalizeSearchQuery(query);
     if (!needle)
         return true;
-    return foldSearchText(getLabel(item)).includes(needle);
+    return matchesSearchLabel(foldSearchText(getLabel(item)), needle);
 }
 /** Frame shared by the listbox and the empty state that replaces it. */
 const listFrame = "border border-input bg-background";
@@ -28,16 +29,14 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
     const listId = React.useId();
     const inputId = React.useId();
     const normalizedItems = React.useMemo(() => filter === defaultSearchFilter
-        ? items.map((item) => [item, foldSearchText(getLabel(item))])
+        ? createSearchIndex(items, getLabel)
         : null, [filter, getLabel, items]);
-    const foldedQuery = filter === defaultSearchFilter ? foldSearchText(query.trim()) : "";
+    const foldedQuery = filter === defaultSearchFilter ? normalizeSearchQuery(query) : "";
     const filtered = React.useMemo(() => {
         if (normalizedItems) {
             if (!foldedQuery)
                 return items;
-            return normalizedItems
-                .filter(([, label]) => label.includes(foldedQuery))
-                .map(([item]) => item);
+            return filterSearchIndex(normalizedItems, foldedQuery);
         }
         return items.filter((item) => filter(item, query, getLabel));
     }, [items, filter, foldedQuery, getLabel, normalizedItems, query]);
@@ -45,6 +44,7 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
         const index = filtered.findIndex((item) => getValue(item) === value);
         return index >= 0 ? index : 0;
     }, [filtered, getValue, value]);
+    const rows = React.useMemo(() => filtered.map((item) => ({ item, value: getValue(item) })), [filtered, getValue]);
     const [highlight, setHighlight] = React.useState(selectedIndex);
     // Reset the highlight while rendering, not in an effect, when the query or
     // the selected row changes: an effect commits every keystroke twice, once
@@ -60,10 +60,10 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
     }
     const active = filtered[highlight];
     const empty = filtered.length === 0;
-    const selectItem = (item) => {
+    const selectItem = React.useCallback((item) => {
         onSelect(item);
         setQuery("");
-    };
+    }, [onSelect]);
     const onKeyDown = (event) => {
         const handled = handleListboxKey(event, {
             highlight,
@@ -86,9 +86,6 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
     };
     return (_jsxs("div", { "data-slot": "search-picker", className: cn("flex flex-col gap-1.5", className), ...props, children: [_jsx(Label, { htmlFor: inputId, children: label }), _jsx(Input, { id: inputId, role: "combobox", "aria-expanded": true, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": active ? listboxOptionId(listId, highlight) : undefined, value: query, disabled: disabled, placeholder: placeholder, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown }), _jsx("ul", { id: listId, role: "listbox", "aria-label": listLabel ?? label, className: empty
                     ? "sr-only"
-                    : cn("max-h-60 overflow-y-auto", listFrame, listClassName), children: filtered.map((item, index) => {
-                    const itemValue = getValue(item);
-                    return (_jsx(ListboxOption, { "data-slot": "search-picker-option", listId: listId, index: index, active: index === highlight, selected: itemValue === value, disabled: disabled, className: "pr-3", onMouseEnter: () => setHighlight(index), onClick: () => selectItem(item), children: _jsx("span", { className: "truncate", children: getLabel(item) }) }, itemValue));
-                }) }), _jsx(ListboxEmptyStatus, { "data-slot": "search-picker-empty", empty: empty, className: listFrame, children: emptyText })] }));
+                    : cn("max-h-60 overflow-y-auto", listFrame, listClassName), children: rows.map(({ item, value: itemValue }, index) => (_jsx(PickerOption, { "data-slot": "search-picker-option", listId: listId, index: index, active: index === highlight, selected: itemValue === value, disabled: disabled, item: item, getLabel: getLabel, onHighlight: setHighlight, onSelect: selectItem }, itemValue))) }), _jsx(ListboxEmptyStatus, { "data-slot": "search-picker-empty", empty: empty, className: listFrame, children: emptyText })] }));
 }
 export { SearchPicker };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",