@simplysm/solid 13.0.75 → 13.0.77

package/src/components/form-control/combobox/Combobox.tsx

@@ -1,30 +1,67 @@
-import { createMemo, createSignal, For, type JSX, onCleanup, Show, splitProps } from "solid-js";
+import {
+  createContext,
+  createMemo,
+  createSignal,
+  For,
+  type JSX,
+  onCleanup,
+  Show,
+  splitProps,
+  useContext,
+  type ParentComponent,
+} from "solid-js";
 import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
 import { IconChevronDown, IconLoader2 } from "@tabler/icons-solidjs";
 import { DebounceQueue } from "@simplysm/core-common";
 import { Icon } from "../../display/Icon";
 import { Dropdown } from "../../disclosure/Dropdown";
 import { List } from "../../data/list/List";
-import { ComboboxContext, type ComboboxContextValue, useComboboxContext } from "./ComboboxContext";
-import { ComboboxItem } from "./ComboboxItem";
 import { ripple } from "../../../directives/ripple";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { type ComponentSize, textMuted } from "../../../styles/tokens.styles";
+import { text } from "../../../styles/base.styles";
+import { type ComponentSize, pad } from "../../../styles/control.styles";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
 import { Invalid } from "../Invalid";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
+import {
+  listItemBaseClass,
+  listItemSelectedClass,
+  listItemDisabledClass,
+  listItemContentClass,
+} from "../../data/list/ListItem.styles";
 
 void ripple;
 
-// Combobox-specific styles
-const selectedValueClass = clsx("flex-1", "whitespace-nowrap", "overflow-hidden");
-const inputClass = clsx(
-  "min-w-0 flex-1",
-  "bg-transparent outline-none",
-  "placeholder:text-base-400 dark:placeholder:text-base-500",
-);
+//#region ========== Context ==========
 
-const noResultsClass = clsx("px-3 py-2", textMuted);
+export interface ComboboxContextValue<TValue = unknown> {
+  /** Check if value is selected */
+  isSelected: (value: TValue) => boolean;
+
+  /** Select value */
+  selectValue: (value: TValue) => void;
+
+  /** Close dropdown */
+  closeDropdown: () => void;
+
+  /** Register item template */
+  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
+}
+
+export const ComboboxContext = createContext<ComboboxContextValue>();
+
+function useComboboxContext<TValue = unknown>(): ComboboxContextValue<TValue> {
+  const context = useContext(ComboboxContext);
+  if (!context) {
+    throw new Error("useComboboxContext can only be used inside the Combobox component");
+  }
+  return context as ComboboxContextValue<TValue>;
+}
+
+//#endregion
+
+const noResultsClass = clsx(pad.lg, text.muted);
 
 /**
  * Item template sub-component
@@ -33,12 +70,72 @@ const ComboboxItemTemplate = <TArgs extends unknown[]>(props: {
   children: (...args: TArgs) => JSX.Element;
 }) => {
   const ctx = useComboboxContext();
-  // 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 ========== ComboboxItem ==========
+
+export interface ComboboxItemProps<TValue = unknown> extends Omit<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "value" | "onClick"
+> {
+  /** Item value */
+  value: TValue;
+
+  /** Disabled */
+  disabled?: boolean;
+}
+
+/**
+ * Selectable item in Combobox dropdown
+ */
+const ComboboxItem: ParentComponent<ComboboxItemProps> = <TValue,>(
+  props: ComboboxItemProps<TValue> & { children?: JSX.Element },
+) => {
+  const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
+
+  const context = useComboboxContext<TValue>();
+
+  const isSelected = () => context.isSelected(local.value);
+  const useRipple = () => !local.disabled;
+
+  const handleClick = () => {
+    if (local.disabled) return;
+    context.selectValue(local.value);
+    context.closeDropdown();
+  };
+
+  const getClassName = () =>
+    twMerge(
+      listItemBaseClass,
+      isSelected() && listItemSelectedClass,
+      local.disabled && listItemDisabledClass,
+      local.class,
+    );
+
+  return (
+    <button
+      {...rest}
+      type="button"
+      use:ripple={useRipple()}
+      class={getClassName()}
+      data-combobox-item
+      data-list-item
+      role="option"
+      aria-selected={isSelected() || undefined}
+      aria-disabled={local.disabled || undefined}
+      tabIndex={local.disabled ? -1 : 0}
+      onClick={handleClick}
+    >
+      <span class={listItemContentClass}>{local.children}</span>
+    </button>
+  );
+};
+
+//#endregion
+
 // Props definition
 export interface ComboboxProps<TValue = unknown> {
   /** Currently selected value */
@@ -54,7 +151,7 @@ export interface ComboboxProps<TValue = unknown> {
   debounceMs?: number;
 
   /** Allow custom values */
-  allowCustomValue?: boolean;
+  allowsCustomValue?: boolean;
 
   /** Custom value parsing function */
   parseCustomValue?: (text: string) => TValue;
@@ -71,8 +168,8 @@ export interface ComboboxProps<TValue = unknown> {
   /** Custom validation function */
   validate?: (value: TValue | undefined) => string | undefined;
 
-  /** touchMode: show errors only after blur */
-  touchMode?: boolean;
+  /** lazyValidation: show errors only after blur */
+  lazyValidation?: boolean;
 
   /** Placeholder text */
   placeholder?: string;
@@ -93,12 +190,6 @@ export interface ComboboxProps<TValue = unknown> {
   children?: JSX.Element;
 }
 
-interface ComboboxComponent {
-  <TValue = unknown>(props: ComboboxProps<TValue>): JSX.Element;
-  Item: typeof ComboboxItem;
-  ItemTemplate: typeof ComboboxItemTemplate;
-}
-
 /**
  * Combobox component
  *
@@ -129,8 +220,8 @@ interface ComboboxComponent {
  * </Combobox>
  * ```
  */
-export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
-  const [local, rest] = splitProps(props as ComboboxProps<T> & { children?: JSX.Element }, [
+const ComboboxInner = <TValue,>(props: ComboboxProps<TValue>) => {
+  const [local, rest] = splitProps(props as ComboboxProps<TValue> & { children?: JSX.Element }, [
     "children",
     "class",
     "style",
@@ -138,7 +229,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     "onValueChange",
     "loadItems",
     "debounceMs",
-    "allowCustomValue",
+    "allowsCustomValue",
     "parseCustomValue",
     "renderValue",
     "disabled",
@@ -147,7 +238,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     "size",
     "inset",
     "validate",
-    "touchMode",
+    "lazyValidation",
   ]);
 
   const i18n = useI18n();
@@ -155,17 +246,16 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
   // State
   const [open, setOpen] = createSignal(false);
   const [query, setQuery] = createSignal("");
-  const [items, setItems] = createSignal<T[]>([]);
+  const [items, setItems] = createSignal<TValue[]>([]);
   const [busyCount, setBusyCount] = createSignal(0);
 
   // Selected value management (controlled/uncontrolled pattern)
-  const [getValue, setInternalValue] = createControllableSignal<T | undefined>({
+  const [getValue, setInternalValue] = createControllableSignal<TValue | undefined>({
     value: () => local.value,
     onChange: () => local.onValueChange,
-  } as Parameters<typeof createControllableSignal<T | undefined>>[0]);
+  } as Parameters<typeof createControllableSignal<TValue | undefined>>[0]);
 
   // Debounce queue (created once on mount, debounceMs only used as initial value)
-  // eslint-disable-next-line solid/reactivity -- Debounce queue created once with debounceMs from mount time
   const debounceQueue = new DebounceQueue(local.debounceMs ?? 300);
 
   onCleanup(() => {
@@ -173,14 +263,14 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
   });
 
   // Check if value is selected
-  const isSelected = (value: T): boolean => {
+  const isSelected = (value: TValue): boolean => {
     const current = getValue();
     return current === value;
   };
 
   // Select value
-  const selectValue = (value: T) => {
-    setInternalValue(value);
+  const selectValue = (value: TValue) => {
+    setInternalValue(value as any);
     setQuery("");
     setOpen(false);
   };
@@ -198,7 +288,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     _setItemTemplate(() => fn);
 
   // Context value
-  const contextValue: ComboboxContextValue<T> = {
+  const contextValue: ComboboxContextValue<TValue> = {
     isSelected,
     selectValue,
     closeDropdown,
@@ -251,10 +341,15 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     } else if (e.key === "Escape" && open()) {
       e.preventDefault();
       setOpen(false);
-    } else if (e.key === "Enter" && local.allowCustomValue && query().trim() !== "") {
+    } else if (e.key === "Enter" && local.allowsCustomValue && query().trim() !== "") {
       e.preventDefault();
-      const customValue = local.parseCustomValue ? local.parseCustomValue(query()) : (query() as T);
-      selectValue(customValue);
+      if (local.parseCustomValue) {
+        selectValue(local.parseCustomValue(query()));
+      } else {
+        setInternalValue(undefined as any);
+        setQuery("");
+        setOpen(false);
+      }
     }
   };
 
@@ -293,7 +388,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
             }
           }}
           type="text"
-          class={inputClass}
+          class={clsx("min-w-0 flex-1 bg-transparent outline-none", text.placeholder)}
           value={query()}
           placeholder={currentValue === undefined ? local.placeholder : undefined}
           disabled={local.disabled}
@@ -309,7 +404,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
 
   // Render items
   const renderItems = (): JSX.Element => {
-    const template = itemTemplate() as ((item: T, index: number) => JSX.Element) | undefined;
+    const template = itemTemplate() as ((item: TValue, index: number) => JSX.Element) | undefined;
 
     // Loading
     if (busyCount() > 0) {
@@ -337,7 +432,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
   };
 
   return (
-    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
+    <Invalid message={errorMsg()} variant="border" lazyValidation={local.lazyValidation}>
       <ComboboxContext.Provider value={contextValue as ComboboxContextValue}>
         <div {...rest} data-combobox class={local.inset ? "flex" : "inline-flex"}>
           <Dropdown
@@ -359,7 +454,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
                 style={local.style}
                 onKeyDown={handleTriggerKeyDown}
               >
-                <div class={selectedValueClass}>{renderDisplayContent()}</div>
+                <div class="flex-1 overflow-hidden whitespace-nowrap">{renderDisplayContent()}</div>
                 <div class={chevronWrapperClass}>
                   <Show
                     when={busyCount() > 0}
@@ -383,5 +478,9 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
   );
 };
 
-Combobox.Item = ComboboxItem;
-Combobox.ItemTemplate = ComboboxItemTemplate;
+//#region Export
+export const Combobox = Object.assign(ComboboxInner, {
+  Item: ComboboxItem,
+  ItemTemplate: ComboboxItemTemplate,
+});
+//#endregion

package/src/components/form-control/date-range-picker/DateRangePicker.tsx

@@ -4,14 +4,14 @@ import { twMerge } from "tailwind-merge";
 import { DateOnly } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { type FieldSize } from "../field/Field.styles";
+import { text } from "../../../styles/base.styles";
+import { gap } from "../../../styles/control.styles";
 import { DatePicker } from "../field/DatePicker";
 import { Select } from "../select/Select";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 export type DateRangePeriodType = "day" | "month" | "range";
 
-const baseClass = clsx("inline-flex items-center", "gap-1");
-
 export interface DateRangePickerProps {
   /** Period type */
   periodType?: DateRangePeriodType;
@@ -111,13 +111,13 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
   });
 
   // Handle period type change
-  const handlePeriodTypeChange = (newType: DateRangePeriodType | DateRangePeriodType[]) => {
-    const type = Array.isArray(newType) ? newType[0] : newType;
-    setPeriodType(type);
+  const handlePeriodTypeChange = (newType: DateRangePeriodType | undefined) => {
+    if (newType == null) return;
+    setPeriodType(newType);
 
     const currentFrom = from();
 
-    if (type === "month") {
+    if (newType === "month") {
       if (currentFrom) {
         const adjusted = currentFrom.setDay(1);
         setFrom(adjusted);
@@ -125,7 +125,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
       } else {
         setTo(undefined as DateOnly | undefined);
       }
-    } else if (type === "day") {
+    } else if (newType === "day") {
       setTo(currentFrom);
     }
   };
@@ -154,7 +154,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
   };
 
   // Wrapper CSS class
-  const getWrapperClass = () => twMerge(baseClass, local.class);
+  const getWrapperClass = () => twMerge(clsx("inline-flex items-center", gap.default), local.class);
 
   return (
     <div {...rest} data-date-range-picker class={getWrapperClass()} style={local.style}>
@@ -204,7 +204,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
           disabled={local.disabled}
           size={local.size}
         />
-        <span class="text-base-400">~</span>
+        <span class={text.muted}>~</span>
         <DatePicker
           unit="date"
           value={to()}