@simplysm/solid 13.0.76 → 13.0.77

package/src/components/features/shared-data/SharedDataSelectList.tsx

@@ -75,13 +75,7 @@ export interface SharedDataSelectListProps<TItem> {
 
 // ─── Component ───────────────────────────────────────────
 
-export interface SharedDataSelectListComponent {
-  <TItem>(props: SharedDataSelectListProps<TItem>): JSX.Element;
-  ItemTemplate: typeof SharedDataSelectListItemTemplate;
-  Filter: typeof SharedDataSelectListFilter;
-}
-
-export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
+const SharedDataSelectListInner = (<TItem,>(
   props: SharedDataSelectListProps<TItem>,
 ): JSX.Element => {
   const [local, rest] = splitProps(props, [
@@ -274,7 +268,9 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
     </SharedDataSelectListContext.Provider>
     </FilterProvider>
   );
-}) as SharedDataSelectListComponent;
+});
 
-SharedDataSelectList.ItemTemplate = SharedDataSelectListItemTemplate;
-SharedDataSelectList.Filter = SharedDataSelectListFilter;
+export const SharedDataSelectList = Object.assign(SharedDataSelectListInner, {
+  ItemTemplate: SharedDataSelectListItemTemplate,
+  Filter: SharedDataSelectListFilter,
+});

package/src/components/feedback/notification/NotificationProvider.tsx

@@ -173,7 +173,15 @@ export const NotificationProvider: ParentComponent = (props) => {
       logger.error(err.stack ?? err.message);
       return;
     }
-    throw err;
+    if (typeof err === "string") {
+      danger(header ?? err, header != null ? err : undefined);
+      logger.error(err);
+      return;
+    }
+    danger(header ?? "Unknown error");
+    if (err != null) {
+      logger.error(String(err));
+    }
   };
 
   const update = (

package/src/components/feedback/print/Print.tsx

@@ -1,4 +1,4 @@
-import type { JSX, ParentProps } from "solid-js";
+import type { ParentProps } from "solid-js";
 
 // --- Print.Page ---
 
@@ -8,14 +8,10 @@ function PrintPage(props: ParentProps) {
 
 // --- Print ---
 
-interface PrintComponent {
-  (props: ParentProps): JSX.Element;
-  Page: typeof PrintPage;
-}
-
 const PrintInner = (props: ParentProps) => {
   return <>{props.children}</>;
 };
 
-export const Print = PrintInner as unknown as PrintComponent;
-Print.Page = PrintPage;
+export const Print = Object.assign(PrintInner, {
+  Page: PrintPage,
+});

package/src/components/feedback/print/PrintProvider.tsx

@@ -247,7 +247,8 @@ export const PrintProvider: ParentComponent = (props) => {
           sliceCanvas.width = canvas.width;
           sliceCanvas.height = Math.min(pageHeightPx, canvas.height - i * pageHeightPx);
 
-          const ctx = sliceCanvas.getContext("2d")!;
+          const ctx = sliceCanvas.getContext("2d");
+          if (!ctx) throw new Error("Failed to get 2D canvas context");
           ctx.drawImage(
             canvas,
             0,

package/src/components/form-control/Invalid.tsx

@@ -1,4 +1,4 @@
-import { children, createEffect, createSignal, onCleanup, type ParentComponent } from "solid-js";
+import { children, createEffect, createMemo, createSignal, onCleanup, type ParentComponent } from "solid-js";
 import clsx from "clsx";
 import "@simplysm/core-browser";
 
@@ -8,7 +8,7 @@ export interface InvalidProps {
   /** Visual indicator variant */
   variant?: "border" | "dot";
   /** When true, visual display only appears after target loses focus */
-  touchMode?: boolean;
+  lazyValidation?: boolean;
 }
 
 export const Invalid: ParentComponent<InvalidProps> = (props) => {
@@ -27,7 +27,11 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
 
   const resolved = children(() => props.children);
 
-  // Reactively update setCustomValidity when message changes (always, regardless of touchMode)
+  const targetEl = createMemo(() =>
+    resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement),
+  );
+
+  // Reactively update setCustomValidity when message changes (always, regardless of lazyValidation)
   createEffect(() => {
     const msg = props.message ?? "";
     hiddenInputEl.setCustomValidity(msg);
@@ -35,19 +39,19 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
 
   // Set target to relative + insert hidden input inside target
   createEffect(() => {
-    const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
-    if (!targetEl) return;
+    const el = targetEl();
+    if (!el) return;
 
-    const computedPosition = getComputedStyle(targetEl).position;
+    const computedPosition = getComputedStyle(el).position;
     if (computedPosition === "static") {
-      targetEl.style.position = "relative";
+      el.style.position = "relative";
     }
 
-    targetEl.appendChild(hiddenInputEl);
+    el.appendChild(hiddenInputEl);
 
     onCleanup(() => {
-      if (hiddenInputEl.parentElement === targetEl) {
-        targetEl.removeChild(hiddenInputEl);
+      if (hiddenInputEl.parentElement === el) {
+        el.removeChild(hiddenInputEl);
       }
     });
   });
@@ -56,28 +60,28 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
   createEffect(() => {
     const variant = props.variant ?? "dot";
     const message = props.message ?? "";
-    const touchMode = props.touchMode ?? false;
+    const lazyValidation = props.lazyValidation ?? false;
     const isTouched = touched();
 
-    const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
+    const el = targetEl();
 
-    if (!targetEl) return;
+    if (!el) return;
 
-    const shouldShow = message !== "" && (!touchMode || isTouched);
+    const shouldShow = message !== "" && (!lazyValidation || isTouched);
 
     if (variant === "border") {
       if (shouldShow) {
-        targetEl.classList.add("border-danger-500");
+        el.classList.add("border-danger-500");
       } else {
-        targetEl.classList.remove("border-danger-500");
+        el.classList.remove("border-danger-500");
       }
 
       onCleanup(() => {
-        targetEl.classList.remove("border-danger-500");
+        el.classList.remove("border-danger-500");
       });
     } else {
       // variant === "dot"
-      const existingDot = targetEl.querySelector("[data-invalid-dot]");
+      const existingDot = el.querySelector("[data-invalid-dot]");
       if (existingDot) {
         existingDot.remove();
       }
@@ -90,11 +94,11 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
           "size-1.5 rounded-full",
           "pointer-events-none bg-danger-500",
         );
-        targetEl.appendChild(dot);
+        el.appendChild(dot);
       }
 
       onCleanup(() => {
-        const dot = targetEl.querySelector("[data-invalid-dot]");
+        const dot = el.querySelector("[data-invalid-dot]");
         if (dot) {
           dot.remove();
         }
@@ -102,32 +106,32 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
     }
   });
 
-  // touchMode: register focusout event on target to track touched state
+  // lazyValidation: register focusout event on target to track touched state
   createEffect(() => {
-    if (!(props.touchMode ?? false)) return;
+    if (!(props.lazyValidation ?? false)) return;
 
-    const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
+    const el = targetEl();
 
-    if (!targetEl) return;
+    if (!el) return;
 
     const handleFocusOut = () => {
       setTouched(true);
     };
 
-    targetEl.addEventListener("focusout", handleFocusOut);
+    el.addEventListener("focusout", handleFocusOut);
 
     onCleanup(() => {
-      targetEl.removeEventListener("focusout", handleFocusOut);
+      el.removeEventListener("focusout", handleFocusOut);
     });
   });
 
   // Redirect hidden input focus to focusable child of target
   hiddenInputEl.addEventListener("focus", () => {
-    const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
+    const el = targetEl();
 
-    if (targetEl) {
+    if (el) {
       const focusable =
-        targetEl.findFirstFocusableChild() ?? (targetEl.tabIndex >= 0 ? targetEl : undefined);
+        el.findFirstFocusableChild() ?? (el.tabIndex >= 0 ? el : undefined);
       if (focusable && focusable !== hiddenInputEl) {
         focusable.focus();
       }

package/src/components/form-control/checkbox/Checkbox.tsx

@@ -13,7 +13,7 @@ export interface CheckboxProps {
   inline?: boolean;
   required?: boolean;
   validate?: (value: boolean) => string | undefined;
-  touchMode?: boolean;
+  lazyValidation?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
   children?: JSX.Element;

package/src/components/form-control/checkbox/CheckboxGroup.tsx

@@ -24,7 +24,7 @@ interface CheckboxGroupProps<TValue> {
   inset?: boolean;
   required?: boolean;
   validate?: (value: TValue[]) => string | undefined;
-  touchMode?: boolean;
+  lazyValidation?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
   children?: JSX.Element;
@@ -61,7 +61,7 @@ function CheckboxGroupInner<TValue = unknown>(props: CheckboxGroupProps<TValue>)
       isEmpty={(v) => (v as unknown[]).length === 0}
       validate={props.validate as ((value: any) => string | undefined) | undefined}
       required={props.required}
-      touchMode={props.touchMode}
+      lazyValidation={props.lazyValidation}
       class={props.class}
       style={props.style}
     >
@@ -98,15 +98,6 @@ function CheckboxGroupItem<TValue = unknown>(props: {
   );
 }
 
-interface CheckboxGroupComponent {
-  <TValue = unknown>(props: CheckboxGroupProps<TValue>): JSX.Element;
-  Item: <TValue = unknown>(props: {
-    value: TValue;
-    disabled?: boolean;
-    children?: JSX.Element;
-  }) => JSX.Element;
-}
-
 export const CheckboxGroup = Object.assign(CheckboxGroupInner, {
   Item: CheckboxGroupItem,
-}) as CheckboxGroupComponent;
+});

package/src/components/form-control/checkbox/Radio.tsx

@@ -11,7 +11,7 @@ export interface RadioProps {
   inline?: boolean;
   required?: boolean;
   validate?: (value: boolean) => string | undefined;
-  touchMode?: boolean;
+  lazyValidation?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
   children?: JSX.Element;

package/src/components/form-control/checkbox/RadioGroup.tsx

@@ -24,7 +24,7 @@ interface RadioGroupProps<TValue> {
   inset?: boolean;
   required?: boolean;
   validate?: (value: TValue | undefined) => string | undefined;
-  touchMode?: boolean;
+  lazyValidation?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
   children?: JSX.Element;
@@ -58,7 +58,7 @@ function RadioGroupInner<TValue = unknown>(props: RadioGroupProps<TValue>): JSX.
       isEmpty={(v) => v === undefined || v === null}
       validate={props.validate as ((value: any) => string | undefined) | undefined}
       required={props.required}
-      touchMode={props.touchMode}
+      lazyValidation={props.lazyValidation}
       class={props.class}
       style={props.style}
     >
@@ -95,15 +95,6 @@ function RadioGroupItem<TValue = unknown>(props: {
   );
 }
 
-interface RadioGroupComponent {
-  <TValue = unknown>(props: RadioGroupProps<TValue>): JSX.Element;
-  Item: <TValue = unknown>(props: {
-    value: TValue;
-    disabled?: boolean;
-    children?: JSX.Element;
-  }) => JSX.Element;
-}
-
 export const RadioGroup = Object.assign(RadioGroupInner, {
   Item: RadioGroupItem,
-}) as RadioGroupComponent;
+});

package/src/components/form-control/checkbox/SelectableBase.tsx

@@ -27,7 +27,7 @@ export interface SelectableBaseProps {
   inline?: boolean;
   required?: boolean;
   validate?: (value: boolean) => string | undefined;
-  touchMode?: boolean;
+  lazyValidation?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
   children?: JSX.Element;
@@ -50,7 +50,7 @@ export const SelectableBase: ParentComponent<SelectableBaseProps & { config: Sel
     "inline",
     "required",
     "validate",
-    "touchMode",
+    "lazyValidation",
     "class",
     "style",
     "children",
@@ -97,7 +97,7 @@ export const SelectableBase: ParentComponent<SelectableBaseProps & { config: Sel
   });
 
   return (
-    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
+    <Invalid message={errorMsg()} variant="border" lazyValidation={local.lazyValidation}>
       <div
         {...rest}
         use:ripple={!local.disabled}

package/src/components/form-control/checkbox/SelectionGroupBase.tsx

@@ -10,7 +10,7 @@ import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 export interface SelectionGroupBaseProps {
   required?: boolean;
-  touchMode?: boolean;
+  lazyValidation?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
   children?: JSX.Element;
@@ -34,7 +34,7 @@ export function SelectionGroupBase<TContextValue>(props: SelectionGroupBaseProps
     "isEmpty",
     "validate",
     "required",
-    "touchMode",
+    "lazyValidation",
     "class",
     "style",
     "children",
@@ -46,7 +46,7 @@ export function SelectionGroupBase<TContextValue>(props: SelectionGroupBaseProps
   });
 
   return (
-    <Invalid message={errorMsg()} variant="dot" touchMode={local.touchMode}>
+    <Invalid message={errorMsg()} variant="dot" lazyValidation={local.lazyValidation}>
       <local.context.Provider value={local.contextValue}>
         <div {...rest} class={twMerge("inline-flex", local.class)} style={local.style}>
           {local.children}

package/src/components/form-control/color-picker/ColorPicker.tsx

@@ -40,8 +40,8 @@ export interface ColorPickerProps {
   /** Custom validation function */
   validate?: (value: string | undefined) => string | undefined;
 
-  /** touchMode: show errors only after blur */
-  touchMode?: boolean;
+  /** lazyValidation: show errors only after blur */
+  lazyValidation?: boolean;
 
   /** Custom class */
   class?: string;
@@ -68,7 +68,7 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
     "inset",
     "required",
     "validate",
-    "touchMode",
+    "lazyValidation",
     "class",
     "style",
   ]);
@@ -104,7 +104,7 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
     <Invalid
       variant={local.inset ? "dot" : "border"}
       message={errorMsg()}
-      touchMode={local.touchMode}
+      lazyValidation={local.lazyValidation}
     >
       <input
         {...rest}

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

@@ -91,12 +91,12 @@ export interface ComboboxItemProps<TValue = unknown> extends Omit<
 /**
  * Selectable item in Combobox dropdown
  */
-const ComboboxItem: ParentComponent<ComboboxItemProps> = <T,>(
-  props: ComboboxItemProps<T> & { children?: JSX.Element },
+const ComboboxItem: ParentComponent<ComboboxItemProps> = <TValue,>(
+  props: ComboboxItemProps<TValue> & { children?: JSX.Element },
 ) => {
   const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
 
-  const context = useComboboxContext<T>();
+  const context = useComboboxContext<TValue>();
 
   const isSelected = () => context.isSelected(local.value);
   const useRipple = () => !local.disabled;
@@ -168,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;
@@ -220,8 +220,8 @@ export interface ComboboxProps<TValue = unknown> {
  * </Combobox>
  * ```
  */
-const ComboboxInner = <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",
@@ -238,7 +238,7 @@ const ComboboxInner = <T,>(props: ComboboxProps<T>) => {
     "size",
     "inset",
     "validate",
-    "touchMode",
+    "lazyValidation",
   ]);
 
   const i18n = useI18n();
@@ -246,14 +246,14 @@ const ComboboxInner = <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)
   const debounceQueue = new DebounceQueue(local.debounceMs ?? 300);
@@ -263,13 +263,13 @@ const ComboboxInner = <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) => {
+  const selectValue = (value: TValue) => {
     setInternalValue(value as any);
     setQuery("");
     setOpen(false);
@@ -288,7 +288,7 @@ const ComboboxInner = <T,>(props: ComboboxProps<T>) => {
     _setItemTemplate(() => fn);
 
   // Context value
-  const contextValue: ComboboxContextValue<T> = {
+  const contextValue: ComboboxContextValue<TValue> = {
     isSelected,
     selectValue,
     closeDropdown,
@@ -343,8 +343,13 @@ const ComboboxInner = <T,>(props: ComboboxProps<T>) => {
       setOpen(false);
     } 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);
+      }
     }
   };
 
@@ -399,7 +404,7 @@ const ComboboxInner = <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) {
@@ -427,7 +432,7 @@ const ComboboxInner = <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

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

@@ -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);
     }
   };