@enigmax/primitives 0.22.0 → 0.24.0

package/src/react/palette/root.tsx

@@ -3,7 +3,7 @@
 import { Slot } from "@/react/slot";
 import { createPortal } from "react-dom";
 import { PaletteContext, usePaletteContext, type PaletteRow } from "@/react/palette/context";
-import { createSearch, subsequenceMatcher, type SearchInstance, type SearchMatch, type SearchOptions } from "@/core/search";
+import { createSearch, subsequenceMatcher, shortenQuery, type SearchInstance, type SearchMatch, type SearchOptions } from "@/core/search";
 import { createRecentStore, groupRows, moveActive, shortcutLabel, isPaletteShortcut, type RecentEntry, type PaletteKey } from "@/core/palette";
 import {
     useCallback, useEffect, useId, useMemo, useRef, useState,
@@ -576,7 +576,7 @@ export function PaletteList<Item>({ children, empty, heading, ...props }: Palett
             data-enigma-palette-list=""
         >
             {palette.rows.length === 0
-                ? empty ?? <p data-enigma-palette-empty="">{palette.query.trim() ? `Nothing matches "${palette.query.trim()}".` : "Type to search."}</p>
+                ? empty ?? <p data-enigma-palette-empty="">{palette.query.trim() ? `Nothing matches "${shortenQuery(palette.query)}".` : "Type to search."}</p>
                 : groups.map((group) => (
                     <div key={group.label} role="group" aria-label={group.label} data-enigma-palette-group="">
                         {heading !== null && (

package/src/react/select/context.ts

@@ -0,0 +1,56 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import type { ReactNode, RefObject } from "react";
+import type { SelectInstance, SelectOption, SelectState } from "@/core/select";
+
+/**
+ * One option, as React draws it. The core carries `icon` as `unknown` because it cannot
+ * know what a node is; here it is one.
+ */
+export interface SelectItem extends SelectOption {
+    icon?: ReactNode;
+}
+
+export interface SelectContextValue {
+    instance: SelectInstance;
+    state: SelectState;
+    /** Open or close the panel. React owns that flag; the instance follows it. */
+    setOpen: (open: boolean) => void;
+    disabled: boolean;
+    /** Whether the trigger offers a × that empties the selection. */
+    clearable: boolean;
+    searchable: boolean;
+    /**
+     * There is nothing to choose from at all - not a filter that matched nothing, an option
+     * list that is empty. The trigger says so and refuses to open, because a panel holding one
+     * line of apology is worse than a control that reads as unavailable.
+     */
+    empty: boolean;
+    /** The options have not arrived yet, which is a different thing from there being none. */
+    loading: boolean;
+    emptyLabel: ReactNode;
+    loadingLabel: ReactNode;
+    /** ids the parts need to point at each other. */
+    ids: { trigger: string; list: string; field: string; };
+    optionId: (index: number) => string;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    fieldRef: RefObject<HTMLInputElement | null>;
+    /** Close and put focus back where it came from - the trigger, always. */
+    close: () => void;
+    /** The keys the list answers to, shared by the trigger and the search field. */
+    onListKeyDown: (event: React.KeyboardEvent) => void;
+}
+
+/**
+ * Null rather than a default: a part rendered outside its Root is a mistake with an obvious
+ * fix, and a silent default would leave it half-working - a trigger that opens nothing, an
+ * option that selects into the void.
+ */
+export const SelectContext = createContext<SelectContextValue | null>(null);
+
+export function useSelectContext(part: string): SelectContextValue {
+    const value = useContext(SelectContext);
+    if (!value) throw new Error(`<${part}> must be rendered inside <Select.Root>.`);
+    return value;
+}

package/src/react/select/index.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import type { ReactNode } from "react";
+import * as parts from "@/react/select/root";
+import { useSelectContext } from "@/react/select/context";
+import type { SelectRootProps, SelectTriggerProps, SelectContentProps, SelectListProps } from "@/react/select/root";
+
+export type SelectProps = SelectRootProps & {
+    /** What the trigger says with nothing chosen. */
+    placeholder?: ReactNode;
+    searchPlaceholder?: string;
+    /** Removable tags instead of a comma-separated line. Default: on when `multiple`. */
+    tags?: boolean;
+    maxTags?: number;
+    /** Shown when the filter matches nothing. */
+    empty?: ReactNode;
+    /** Draw a row yourself: the icon, label, description and check are the default. */
+    renderOption?: SelectListProps["children"];
+    /** On the root, which is the element with a size. `triggerProps` dresses the button. */
+    className?: string;
+    triggerProps?: SelectTriggerProps;
+    contentProps?: SelectContentProps;
+};
+
+/**
+ * The select, assembled.
+ *
+ * ```tsx
+ * <Select
+ *     options={[{ value: "es", label: "Spain", icon: <Flag code="es" /> }]}
+ *     value={country}
+ *     onValueChange={setCountry}
+ * />
+ * ```
+ *
+ * Everything it renders is a part you can render yourself instead - see `Select.Root` for
+ * the anatomy. This is those parts in the order they belong in, not a different component.
+ *
+ * `multiple` changes the types with it: `value` and what the change reports are a list, and
+ * the compiler says so at the call site. A filter appears on its own once the list is long
+ * enough to need one, fuzzy if you hand over Fuse's constructor and plain otherwise.
+ */
+export function Select(props: SelectProps): ReactNode {
+    const {
+        placeholder = "Select",
+        searchPlaceholder = "Search",
+        tags,
+        maxTags,
+        empty,
+        renderOption,
+        className,
+        triggerProps,
+        contentProps,
+        children,
+        ...rest
+    } = props;
+
+    // The union survives as far as the props object; the rest spread flattens it, so the
+    // cast puts back what TypeScript dropped rather than widening anything.
+    const root = rest as SelectRootProps;
+
+    return (
+        <parts.SelectRoot {...root} className={className}>
+            <parts.SelectTrigger {...triggerProps}>
+                <parts.SelectValue placeholder={placeholder} tags={tags} maxTags={maxTags} />
+            </parts.SelectTrigger>
+            <parts.SelectContent {...contentProps}>
+                {/* Rendered on the root's own decision: `searchable="auto"` is a count, and
+                    the field has to appear on the same rule the keyboard follows. */}
+                <SearchSlot placeholder={searchPlaceholder} />
+                <parts.SelectList empty={empty}>{renderOption}</parts.SelectList>
+            </parts.SelectContent>
+            {children}
+        </parts.SelectRoot>
+    );
+}
+
+/** The filter, only where the root decided there is one. */
+function SearchSlot({ placeholder }: { placeholder: string; }): ReactNode {
+    const { searchable } = useSelectContext("Select");
+    return searchable ? <parts.SelectSearch placeholder={placeholder} /> : null;
+}
+
+Select.Root = parts.SelectRoot;
+Select.Trigger = parts.SelectTrigger;
+Select.Value = parts.SelectValue;
+Select.Content = parts.SelectContent;
+Select.Search = parts.SelectSearch;
+Select.List = parts.SelectList;
+Select.Option = parts.SelectOptionRow;
+
+export * from "@/react/select/root";
+export { useSelectContext, type SelectItem, type SelectContextValue } from "@/react/select/context";
+export { SELECT_STYLES } from "@/react/select/styles";
+export { createSelect, SELECT_SEARCH_KEYS } from "@/core/select";
+export type { SelectOption, SelectOptions, SelectState, SelectInstance, SelectMoveKey } from "@/core/select";