@simplysm/solid 13.0.74 → 13.0.76

package/src/components/form-control/select/Select.tsx

@@ -1,122 +1,240 @@
 import {
   children,
+  createContext,
   createEffect,
   createMemo,
   createSignal,
   For,
+  type Accessor,
   type JSX,
   type ParentComponent,
   onCleanup,
   Show,
   splitProps,
+  useContext,
 } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { IconChevronDown } from "@tabler/icons-solidjs";
+import { IconChevronDown, IconCheck } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
 import { Dropdown } from "../../disclosure/Dropdown";
 import { List } from "../../data/list/List";
-import { SelectContext, type SelectContextValue } from "./SelectContext";
-import { useSelectContext } from "./SelectContext";
-import { SelectItem } from "./SelectItem";
+import { Collapse } from "../../disclosure/Collapse";
 import { ripple } from "../../../directives/ripple";
-import {
-  borderDefault,
-  borderSubtle,
-  type ComponentSize,
-  textMuted,
-} from "../../../styles/tokens.styles";
+import { bg, border, text } from "../../../styles/base.styles";
+import { type ComponentSize, pad } from "../../../styles/control.styles";
+import { themeTokens } from "../../../styles/theme.styles";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { createSlotSignal } from "../../../hooks/createSlotSignal";
+import { createSlot } from "../../../helpers/createSlot";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
 import { Invalid } from "../Invalid";
 import { TextInput } from "../field/TextInput";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
+import {
+  listItemBaseClass,
+  listItemSelectedClass,
+  listItemDisabledClass,
+  listItemIndentGuideClass,
+  listItemContentClass,
+  getListItemSelectedIconClass,
+} from "../../data/list/ListItem.styles";
 
 void ripple;
 
-// Select-specific styles
-const multiTagClass = clsx("rounded", "bg-base-200 px-1", "dark:bg-base-600");
-const selectedValueClass = clsx("flex-1", "whitespace-nowrap");
+//#region Module-level slots
 
-// Search input styles (override TextInput wrapper)
-const searchInputClass = clsx(
-  "w-full",
-  "rounded-none",
-  "border-0 border-b",
-  borderSubtle
-);
+const [SelectHeader, createHeaderSlotAccessor] = createSlot<{ children: JSX.Element }>();
+const [SelectItemChildren, createItemChildrenSlotAccessor] = createSlot<{ children: JSX.Element }>();
 
-// Select all/deselect all button area styles
-const selectAllBarClass = clsx("flex gap-2", "border-b", borderSubtle, "px-2 py-1", "text-xs");
+//#endregion
 
-// Select all/deselect all button styles
-const selectAllBtnClass = clsx(
-  "text-primary-500",
-  "hover:text-primary-600 dark:hover:text-primary-400",
-  "cursor-pointer",
-);
+//#region SelectContext
 
-/**
- * Select right-side action sub-component
- */
-interface SelectActionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {}
+export interface SelectContextValue<TValue = unknown> {
+  /** Whether multiple select mode is enabled */
+  multiple: Accessor<boolean>;
+
+  /** Check if value is selected */
+  isSelected: (value: TValue) => boolean;
+
+  /** Toggle value selection/deselection */
+  toggleValue: (value: TValue) => void;
+
+  /** Close dropdown */
+  closeDropdown: () => void;
+
+  /** Register item template */
+  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
+}
+
+export const SelectContext = createContext<SelectContextValue>();
+const SelectCtx = SelectContext;
+
+function useSelectContext<TValue = unknown>(): SelectContextValue<TValue> {
+  const context = useContext(SelectCtx);
+  if (!context) {
+    throw new Error("useSelectContext can only be used inside Select component");
+  }
+  return context as SelectContextValue<TValue>;
+}
+
+//#endregion
+
+//#region SelectAction
 
-const SelectAction: ParentComponent<SelectActionProps> = (props) => {
+interface SelectActionProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+  children?: JSX.Element;
+}
+
+const [SelectActionSlot, createActionSlotAccessor] = createSlot<{ children: JSX.Element }>();
+
+const SelectAction = (props: SelectActionProps) => {
   const [local, rest] = splitProps(props, ["children", "class"]);
-  const ctx = useSelectContext();
 
-  ctx.setAction(() => (
-    <button
-      {...rest}
-      type="button"
-      data-select-action
-      use:ripple
-      class={twMerge(
-        clsx(
-          "border",
-          borderDefault,
-          "px-1.5",
-          "font-bold text-primary-500",
-          "hover:bg-base-100 dark:hover:bg-base-700",
-          "group-focus-within:border-y-primary-400",
-          "last:group-focus-within:border-r-primary-400",
-          "dark:group-focus-within:border-y-primary-400",
-          "dark:last:group-focus-within:border-r-primary-400",
-          "focus:relative focus:z-10 focus:border-primary-400",
-          "dark:focus:border-primary-400",
-        ),
-        local.class,
-      )}
-    >
-      {local.children}
-    </button>
-  ));
-  onCleanup(() => ctx.setAction(undefined));
-  return null;
-};
+  const handleClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (e) => {
+    if (typeof rest.onClick === "function") {
+      rest.onClick(e);
+    } else if (rest.onClick && typeof rest.onClick === "object") {
+      rest.onClick[0](rest.onClick[1], e);
+    }
+  };
 
-/**
- * Dropdown top custom area sub-component
- */
-const SelectHeader: ParentComponent = (props) => {
-  const ctx = useSelectContext();
-  // eslint-disable-next-line solid/reactivity -- Save as slot accessor, called from JSX tracked scope
-  ctx.setHeader(() => props.children);
-  onCleanup(() => ctx.setHeader(undefined));
-  return null;
+  return (
+    <SelectActionSlot>
+      <button
+        {...rest}
+        type="button"
+        onClick={handleClick}
+        class={twMerge("p-2", themeTokens.base.hoverBg, local.class)}
+        data-select-action
+      >
+        {local.children}
+      </button>
+    </SelectActionSlot>
+  );
 };
 
+//#endregion
+
+const selectAllBtnClass = clsx(
+  "text-primary-500",
+  "hover:text-primary-600 dark:hover:text-primary-400",
+  "cursor-pointer",
+);
+
 const SelectItemTemplate = <TArgs extends unknown[]>(props: {
   children: (...args: TArgs) => JSX.Element;
 }) => {
   const ctx = useSelectContext();
-  // eslint-disable-next-line solid/reactivity -- Store render function in signal, called from JSX tracked scope
   ctx.setItemTemplate(props.children as (...args: unknown[]) => JSX.Element);
   onCleanup(() => ctx.setItemTemplate(undefined));
   return null;
 };
 
+//#region SelectItem
+
+export interface SelectItemProps<TValue = unknown> extends Omit<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "value" | "onClick"
+> {
+  /** Item value */
+  value: TValue;
+
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+interface SelectItemComponent<TValue = unknown> extends ParentComponent<SelectItemProps<TValue>> {
+  Children: typeof SelectItemChildren;
+}
+
+/**
+ * Selectable item within Select dropdown
+ *
+ * @example
+ * ```tsx
+ * <Select.Item value={item}>{item.name}</Select.Item>
+ *
+ * // Nested items
+ * <Select.Item value={parent}>
+ *   {parent.name}
+ *   <Select.Item.Children>
+ *     <Select.Item value={child}>{child.name}</Select.Item>
+ *   </Select.Item.Children>
+ * </Select.Item>
+ * ```
+ */
+const SelectItem: SelectItemComponent = <T,>(
+  props: SelectItemProps<T> & { children?: JSX.Element },
+) => {
+  const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
+
+  const context = useSelectContext<T>();
+
+  const [childrenSlot, ItemChildrenProvider] = createItemChildrenSlotAccessor();
+  const hasChildren = () => childrenSlot() !== undefined;
+  const isSelected = () => context.isSelected(local.value);
+  const useRipple = () => !local.disabled;
+
+  const handleClick = () => {
+    if (local.disabled) return;
+
+    context.toggleValue(local.value);
+
+    // Close dropdown only in single select mode
+    if (!context.multiple()) {
+      context.closeDropdown();
+    }
+  };
+
+  const getClassName = () =>
+    twMerge(
+      listItemBaseClass,
+      isSelected() && listItemSelectedClass,
+      local.disabled && listItemDisabledClass,
+      local.class,
+    );
+
+  const getCheckIconClass = () => getListItemSelectedIconClass(isSelected());
+
+  return (
+    <ItemChildrenProvider>
+      <button
+        {...rest}
+        type="button"
+        use:ripple={useRipple()}
+        class={getClassName()}
+        data-select-item
+        data-list-item
+        role="option"
+        aria-selected={isSelected() || undefined}
+        aria-disabled={local.disabled || undefined}
+        tabIndex={local.disabled ? -1 : 0}
+        onClick={handleClick}
+      >
+        <Show when={context.multiple() && !hasChildren()}>
+          <Icon icon={IconCheck} class={getCheckIconClass()} />
+        </Show>
+        <span class={listItemContentClass}>{local.children}</span>
+      </button>
+      <Show when={hasChildren()}>
+        <Collapse open={true}>
+          <div class="flex">
+            <div class={listItemIndentGuideClass} />
+            <List inset class="flex-1">
+              {childrenSlot()!.children}
+            </List>
+          </div>
+        </Collapse>
+      </Show>
+    </ItemChildrenProvider>
+  );
+};
+
+SelectItem.Children = SelectItemChildren;
+
+//#endregion
+
 // Props definition
 
 // Common Props (except value, onValueChange, multiple)
@@ -143,10 +261,10 @@ interface SelectCommonProps<TValue = unknown> {
   touchMode?: boolean;
 
   /** Search text extraction function (shows search input when set) */
-  getSearchText?: (item: TValue) => string;
+  itemSearchText?: (item: TValue) => string;
 
   /** Function to determine if item is hidden */
-  getIsHidden?: (item: TValue) => boolean;
+  isItemHidden?: (item: TValue) => boolean;
 
   /** Custom class */
   class?: string;
@@ -194,7 +312,7 @@ interface SelectMultipleBaseProps<TValue> extends SelectCommonProps<TValue> {
 // items mode
 interface SelectWithItemsPropsBase<TValue> {
   items: TValue[];
-  getChildren?: (item: TValue, index: number, depth: number) => TValue[] | undefined;
+  itemChildren?: (item: TValue, index: number, depth: number) => TValue[] | undefined;
   renderValue?: (value: TValue) => JSX.Element;
   children?: JSX.Element;
 }
@@ -202,7 +320,7 @@ interface SelectWithItemsPropsBase<TValue> {
 // children mode
 interface SelectWithChildrenPropsBase<TValue> {
   items?: never;
-  getChildren?: never;
+  itemChildren?: never;
   renderValue: (value: TValue) => JSX.Element;
   children: JSX.Element;
 }
@@ -240,7 +358,7 @@ interface SelectComponent {
  * </Select>
  * ```
  */
-export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
+const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
   const [local, rest] = splitProps(props as SelectProps<T> & { children?: JSX.Element }, [
     "children",
     "class",
@@ -256,12 +374,12 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     "multiDisplayDirection",
     "hideSelectAll",
     "items",
-    "getChildren",
+    "itemChildren",
     "renderValue",
     "validate",
     "touchMode",
-    "getSearchText",
-    "getIsHidden",
+    "itemSearchText",
+    "isItemHidden",
   ]);
 
   const i18n = useI18n();
@@ -301,12 +419,12 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
       const current = (value() as T[] | undefined) ?? [];
       const idx = current.indexOf(itemValue);
       if (idx >= 0) {
-        setValue([...current.slice(0, idx), ...current.slice(idx + 1)] as T[]);
+        setValue([...current.slice(0, idx), ...current.slice(idx + 1)]);
       } else {
-        setValue([...current, itemValue] as T[]);
+        setValue([...current, itemValue]);
       }
     } else {
-      setValue(itemValue);
+      setValue(itemValue as any);
     }
   };
 
@@ -315,9 +433,9 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     setOpen(false);
   };
 
-  // Slot signals
-  const [header, setHeader] = createSlotSignal();
-  const [action, setAction] = createSlotSignal();
+  // Slot accessors
+  const [header, HeaderProvider] = createHeaderSlotAccessor();
+  const [action, ActionProvider] = createActionSlotAccessor();
   const [itemTemplate, _setItemTemplate] = createSignal<
     ((...args: unknown[]) => JSX.Element) | undefined
   >();
@@ -330,8 +448,6 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     isSelected,
     toggleValue,
     closeDropdown,
-    setHeader,
-    setAction,
     setItemTemplate,
   };
 
@@ -365,19 +481,19 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
   // Search filtering (supports hierarchical structure)
   const filteredItems = createMemo((): T[] | undefined => {
     if (!local.items) return undefined;
-    if (!local.getSearchText || !searchText()) return local.items;
+    if (!local.itemSearchText || !searchText()) return local.items;
 
     const terms = searchText().trim().split(" ").filter(Boolean);
     if (terms.length === 0) return local.items;
 
     // Include parent when child matches in hierarchical structure
     const matchesSearch = (item: T): boolean => {
-      const text = local.getSearchText!(item).toLowerCase();
-      if (terms.every((t) => text.includes(t.toLowerCase()))) return true;
+      const itemText = local.itemSearchText!(item).toLowerCase();
+      if (terms.every((t) => itemText.includes(t.toLowerCase()))) return true;
 
       // Show parent if any child matches
-      if (local.getChildren) {
-        const itemChildren = local.getChildren(item, 0, 0);
+      if (local.itemChildren) {
+        const itemChildren = local.itemChildren(item, 0, 0);
         if (itemChildren?.some((child) => matchesSearch(child))) return true;
       }
 
@@ -390,11 +506,11 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
   // Items with hidden filter applied
   const visibleItems = createMemo((): T[] | undefined => {
     const items = filteredItems();
-    if (!items || !local.getIsHidden) return items;
+    if (!items || !local.isItemHidden) return items;
 
     return items.filter((item) => {
       // Show hidden item if selected (with strikethrough)
-      if (local.getIsHidden!(item)) {
+      if (local.isItemHidden!(item)) {
         return isSelected(item);
       }
       return true;
@@ -414,7 +530,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
   };
 
   // Inner component: resolve children inside Provider to trigger slot registration
-  const SelectInner: ParentComponent = (innerProps) => {
+  const SelectInnerRender: ParentComponent = (innerProps) => {
     // Resolve children() to trigger sub-component registration (Header, Action, ItemTemplate return null)
     const resolved = children(() => innerProps.children);
 
@@ -431,17 +547,17 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
       return (
         <For each={itemList}>
           {(item, index) => {
-            const hidden = () => local.getIsHidden?.(item) ?? false;
+            const hidden = () => local.isItemHidden?.(item) ?? false;
             return (
               <SelectItem value={item} class={hidden() ? "line-through opacity-60" : undefined}>
                 {tpl ? tpl(item, index(), depth) : String(item)}
-                <Show when={local.getChildren?.(item, index(), depth)} keyed>
+                <Show when={local.itemChildren?.(item, index(), depth)} keyed>
                   {(itemChildren) => {
                     // Apply hidden filter to child list
                     const visibleChildren = () => {
-                      if (!local.getIsHidden) return itemChildren;
+                      if (!local.isItemHidden) return itemChildren;
                       return itemChildren.filter((child) => {
-                        if (local.getIsHidden!(child)) return isSelected(child);
+                        if (local.isItemHidden!(child)) return isSelected(child);
                         return true;
                       });
                     };
@@ -478,14 +594,14 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
       const current = value();
 
       if (current === undefined || (Array.isArray(current) && current.length === 0)) {
-        return <span class={textMuted}>{local.placeholder ?? ""}</span>;
+        return <span class={text.muted}>{local.placeholder ?? ""}</span>;
       }
 
       if (local.multiple && Array.isArray(current)) {
         const direction = local.multiDisplayDirection ?? "horizontal";
         return (
           <div class={clsx("flex gap-1", direction === "vertical" ? "flex-col" : "flex-wrap")}>
-            <For each={current}>{(v) => <span class={multiTagClass}>{renderValue(v)}</span>}</For>
+            <For each={current}>{(v) => <span class={clsx("rounded px-1", bg.subtle)}>{renderValue(v)}</span>}</For>
           </div>
         );
       }
@@ -523,26 +639,26 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
               style={local.style}
               onKeyDown={handleTriggerKeyDown}
             >
-              <div class={selectedValueClass}>{renderSelectedValue()}</div>
+              <div class="flex-1 whitespace-nowrap">{renderSelectedValue()}</div>
               <div class={chevronWrapperClass}>
                 <Icon icon={IconChevronDown} size="1em" />
               </div>
             </div>
           </Dropdown.Trigger>
           <Dropdown.Content>
-            <Show when={header()}>{header()!()}</Show>
+            <Show when={header()}>{header()!.children}</Show>
             {/* Search input */}
-            <Show when={local.getSearchText && local.items}>
+            <Show when={local.itemSearchText && local.items}>
               <TextInput
                 value={searchText()}
                 onValueChange={setSearchText}
                 placeholder={i18n.t("select.searchPlaceholder")}
-                class={searchInputClass}
+                class={clsx("w-full rounded-none border-0 border-b", border.subtle)}
               />
             </Show>
             {/* Select all/deselect buttons */}
             <Show when={showSelectAllBar()}>
-              <div class={selectAllBarClass}>
+              <div class={clsx("flex gap-2 border-b", border.subtle, pad.default, "text-xs")}>
                 <button
                   type="button"
                   data-select-all
@@ -566,7 +682,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
                 {/* Unset item */}
                 <Show when={showUnsetItem()}>
                   <SelectItem value={undefined as T}>
-                    <span class={textMuted}>{i18n.t("select.unset")}</span>
+                    <span class={text.muted}>{i18n.t("select.unset")}</span>
                   </SelectItem>
                 </Show>
                 {renderItems(visibleItems() ?? [], 0)}
@@ -582,7 +698,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
               "[&>[data-select-action]+[data-select-action]]:-ml-px",
             )}
           >
-            {action()!()}
+            {action()!.children}
           </div>
         </Show>
       </div>
@@ -591,14 +707,22 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
 
   return (
     <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
-      <SelectContext.Provider value={contextValue as SelectContextValue}>
-        <SelectInner>{local.children}</SelectInner>
-      </SelectContext.Provider>
+      <SelectCtx.Provider value={contextValue as SelectContextValue}>
+        <HeaderProvider>
+          <ActionProvider>
+            <SelectInnerRender>{local.children}</SelectInnerRender>
+          </ActionProvider>
+        </HeaderProvider>
+      </SelectCtx.Provider>
     </Invalid>
   );
 };
 
-Select.Item = SelectItem;
-Select.Action = SelectAction;
-Select.Header = SelectHeader;
-Select.ItemTemplate = SelectItemTemplate;
+//#region Export
+export const Select = Object.assign(SelectInnerComponent, {
+  Item: SelectItem,
+  Header: SelectHeader,
+  Action: SelectAction,
+  ItemTemplate: SelectItemTemplate,
+}) as SelectComponent;
+//#endregion