@simplysm/solid 13.0.75 → 13.0.77

package/src/components/disclosure/Dialog.tsx

@@ -10,33 +10,101 @@ import {
   Show,
   splitProps,
   useContext,
+  type Accessor,
+  type Component,
 } from "solid-js";
-import { Portal } from "solid-js/web";
+import { Portal, Dynamic } from "solid-js/web";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { IconX } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../hooks/createControllableSignal";
-import { createSlotSignal, type SlotAccessor } from "../../hooks/createSlotSignal";
 import { createMountTransition } from "../../hooks/createMountTransition";
 import { startPointerDrag } from "../../helpers/startPointerDrag";
-import { createSlotComponent } from "../../helpers/createSlotComponent";
+import { createSlot } from "../../helpers/createSlot";
 import { mergeStyles } from "../../helpers/mergeStyles";
-import { useI18n } from "../../providers/i18n/I18nContext";
+import { useI18n } from "../../providers/i18n/I18nProvider";
 import { Icon } from "../display/Icon";
-import { borderSubtle } from "../../styles/tokens.styles";
-import { DialogDefaultsContext } from "./DialogContext";
+import { bg, border } from "../../styles/base.styles";
 import { bringToFront, registerDialog, unregisterDialog, isTopmost } from "./dialogZIndex";
 import { Button } from "../form-control/Button";
 
-interface DialogSlotsContextValue {
-  setHeader: (content: SlotAccessor) => void;
-  setAction: (content: SlotAccessor) => void;
+//#region Dialog Context Types & Utilities
+
+/** Dialog default configuration */
+export interface DialogDefaults {
+  /** Allow closing via ESC key */
+  closeOnEscape?: boolean;
+  /** Allow closing via backdrop click */
+  closeOnInteractOutside?: boolean;
+}
+
+/** Dialog default configuration Context */
+export const DialogDefaultsContext = createContext<Accessor<DialogDefaults>>();
+
+/** Programmatic dialog options */
+export interface DialogShowOptions {
+  /** Dialog header */
+  header?: JSX.Element;
+  /** Show close button */
+  closable?: boolean;
+  /** Close on backdrop click */
+  closeOnInteractOutside?: boolean;
+  /** Close on ESC key */
+  closeOnEscape?: boolean;
+  /** Resizable */
+  resizable?: boolean;
+  /** Draggable */
+  draggable?: boolean;
+  /** Display mode */
+  mode?: "float" | "fill";
+  /** Initial width (px) */
+  width?: number;
+  /** Initial height (px) */
+  height?: number;
+  /** Minimum width (px) */
+  minWidth?: number;
+  /** Minimum height (px) */
+  minHeight?: number;
+  /** Floating position */
+  position?: "bottom-right" | "top-right";
+  /** Custom header style */
+  headerStyle?: JSX.CSSProperties | string;
+  /** Confirmation function before closing (return false to cancel) */
+  beforeClose?: () => boolean;
 }
 
-const DialogSlotsContext = createContext<DialogSlotsContextValue>();
+/** Extract result type from component's close prop */
+export type ExtractCloseResult<P> =
+  P extends { close?: (result?: infer T) => void } ? T : undefined;
+
+/** Programmatic dialog Context value */
+export interface DialogContextValue {
+  /** Open dialog and wait until closing, returns result */
+  show<P extends Record<string, any>>(
+    component: Component<P>,
+    props: "close" extends keyof P ? Omit<P, "close"> : never,
+    options?: DialogShowOptions,
+  ): Promise<ExtractCloseResult<P> | undefined>;
+}
+
+/** Programmatic dialog Context */
+export const DialogContext = createContext<DialogContextValue>();
+
+/**
+ * Hook to access programmatic dialogs
+ *
+ * @throws Throws error if DialogProvider is not present
+ */
+export function useDialog(): DialogContextValue {
+  const ctx = useContext(DialogContext);
+  if (!ctx) throw new Error("useDialog can only be used inside DialogProvider");
+  return ctx;
+}
+
+//#endregion
 
-const DialogHeader = createSlotComponent(DialogSlotsContext, (ctx) => ctx.setHeader);
-const DialogAction = createSlotComponent(DialogSlotsContext, (ctx) => ctx.setAction);
+const [DialogHeader, createHeaderSlotAccessor] = createSlot<{ children: JSX.Element }>();
+const [DialogAction, createActionSlotAccessor] = createSlot<{ children: JSX.Element }>();
 
 export interface DialogProps {
   /** Dialog open state */
@@ -46,17 +114,15 @@ export interface DialogProps {
   /** Show close button (default: true) */
   closable?: boolean;
   /** Close on backdrop click */
-  closeOnBackdrop?: boolean;
+  closeOnInteractOutside?: boolean;
   /** Close on Escape key (default: true) */
   closeOnEscape?: boolean;
   /** Resizable (default: false) */
   resizable?: boolean;
   /** Draggable (default: true) */
-  movable?: boolean;
-  /** Floating mode (no backdrop) */
-  float?: boolean;
-  /** Full-screen mode */
-  fill?: boolean;
+  draggable?: boolean;
+  /** Display mode */
+  mode?: "float" | "fill";
   /** Width */
   width?: number;
   /** Height */
@@ -70,7 +136,7 @@ export interface DialogProps {
   /** Header style */
   headerStyle?: JSX.CSSProperties | string;
   /** Confirmation function before closing */
-  canDeactivate?: () => boolean;
+  beforeClose?: () => boolean;
   /** Callback after close animation completes */
   onCloseComplete?: () => void;
   /** Additional CSS class */
@@ -109,8 +175,6 @@ const resizeCursorMap: Record<ResizeDirection, string> = {
   "bottom-right": "cursor-nwse-resize",
 };
 
-const dialogContentClass = clsx("flex-1", "overflow-auto");
-
 const resizePositionMap: Record<ResizeDirection, string> = {
   "left": clsx("left-0 top-0", "h-full w-1.5"),
   "right": clsx("right-0 top-0", "h-full w-1.5"),
@@ -139,12 +203,7 @@ const resizePositionMap: Record<ResizeDirection, string> = {
  * </Dialog>
  * ```
  */
-interface DialogComponent extends ParentComponent<DialogProps> {
-  Header: typeof DialogHeader;
-  Action: typeof DialogAction;
-}
-
-export const Dialog: DialogComponent = (props) => {
+const DialogInner: ParentComponent<DialogProps> = (props) => {
   const dialogDefaults = useContext(DialogDefaultsContext);
   const i18n = useI18n();
 
@@ -152,19 +211,18 @@ export const Dialog: DialogComponent = (props) => {
     "open",
     "onOpenChange",
     "closable",
-    "closeOnBackdrop",
+    "closeOnInteractOutside",
     "closeOnEscape",
     "resizable",
-    "movable",
-    "float",
-    "fill",
+    "draggable",
+    "mode",
     "width",
     "height",
     "minWidth",
     "minHeight",
     "position",
     "headerStyle",
-    "canDeactivate",
+    "beforeClose",
     "onCloseComplete",
     "class",
     "children",
@@ -172,8 +230,8 @@ export const Dialog: DialogComponent = (props) => {
 
   const headerId = "dialog-header-" + createUniqueId();
 
-  const [header, setHeader] = createSlotSignal();
-  const [action, setAction] = createSlotSignal();
+  const [header, HeaderProvider] = createHeaderSlotAccessor();
+  const [action, ActionProvider] = createActionSlotAccessor();
   const hasHeader = () => header() !== undefined;
 
   const [open, setOpen] = createControllableSignal({
@@ -216,8 +274,8 @@ export const Dialog: DialogComponent = (props) => {
   const [wrapperRef, setWrapperRef] = createSignal<HTMLDivElement>();
 
   const closeOnEscape = () => local.closeOnEscape ?? dialogDefaults?.().closeOnEscape ?? true;
-  const closeOnBackdrop = () =>
-    local.closeOnBackdrop ?? dialogDefaults?.().closeOnBackdrop ?? false;
+  const closeOnInteractOutside = () =>
+    local.closeOnInteractOutside ?? dialogDefaults?.().closeOnInteractOutside ?? false;
 
   // Detect Escape key
   createEffect(() => {
@@ -248,15 +306,15 @@ export const Dialog: DialogComponent = (props) => {
     onCleanup(() => unregisterDialog(el));
   });
 
-  // Attempt to close (check canDeactivate)
+  // Attempt to close (check beforeClose)
   const tryClose = () => {
-    if (local.canDeactivate && !local.canDeactivate()) return;
+    if (local.beforeClose && !local.beforeClose()) return;
     setOpen(false);
   };
 
   // Backdrop click handler
   const handleBackdropClick = () => {
-    if (!closeOnBackdrop()) return;
+    if (!closeOnInteractOutside()) return;
     tryClose();
   };
 
@@ -282,8 +340,8 @@ export const Dialog: DialogComponent = (props) => {
 
   // Dragging
   const handleHeaderPointerDown = (event: PointerEvent) => {
-    // movable default is true
-    if (local.movable === false) return;
+    // draggable default is true
+    if (local.draggable === false) return;
     const wrapperEl = wrapperRef();
     if (!dialogRef || !wrapperEl) return;
     // Do not treat events from interactive elements like close button as drag
@@ -387,7 +445,7 @@ export const Dialog: DialogComponent = (props) => {
   const dialogStyle = (): JSX.CSSProperties => {
     const style: JSX.CSSProperties = {};
 
-    if (local.fill) {
+    if (local.mode === "fill") {
       style.width = "100%";
       style.height = "100%";
     } else {
@@ -436,8 +494,8 @@ export const Dialog: DialogComponent = (props) => {
     clsx(
       "fixed bottom-0 left-0 right-0 top-0",
       "flex flex-col items-center",
-      !local.fill && "pt-[calc(3rem+0.5rem)]",
-      local.float && "pointer-events-none",
+      local.mode !== "fill" && "pt-[calc(3rem+0.5rem)]",
+      local.mode === "float" && "pointer-events-none",
     );
 
   // Backdrop class
@@ -459,29 +517,30 @@ export const Dialog: DialogComponent = (props) => {
       "relative",
       "mx-auto",
       "w-fit min-w-[200px]",
-      "bg-white dark:bg-base-800",
-      local.float
-        ? clsx("shadow-md dark:shadow-black/30", "border", borderSubtle)
+      bg.surface,
+      local.mode === "float"
+        ? clsx("shadow-md dark:shadow-black/30", "border", border.subtle)
         : "shadow-2xl dark:shadow-black/40",
-      local.fill ? "rounded-none border-none" : "rounded-lg",
+      local.mode === "fill" ? "rounded-none border-none" : "rounded-lg",
       "overflow-hidden",
       "flex flex-col",
       "focus:outline-none",
-      local.float && "pointer-events-auto",
+      local.mode === "float" && "pointer-events-auto",
       animationClass(),
     );
 
   // Header class
   const headerClass = () =>
-    clsx("flex items-center gap-2", "px-3 py-1", "select-none", "border-b", borderSubtle);
+    clsx("flex items-center gap-2", "px-3 py-1", "select-none", "border-b", border.subtle);
 
   return (
     <Show when={mounted()}>
       <Portal>
-        <DialogSlotsContext.Provider value={{ setHeader, setAction }}>
+        <HeaderProvider>
+          <ActionProvider>
           <div ref={setWrapperRef} data-dialog class={wrapperClass()}>
             {/* Backdrop */}
-            <Show when={!local.float}>
+            <Show when={local.mode !== "float"}>
               <div data-dialog-backdrop class={backdropClass()} onClick={handleBackdropClick} />
             </Show>
 
@@ -492,7 +551,7 @@ export const Dialog: DialogComponent = (props) => {
               }}
               data-dialog-panel
               role="dialog"
-              aria-modal={local.float ? undefined : true}
+              aria-modal={local.mode === "float" ? undefined : true}
               aria-labelledby={hasHeader() ? headerId : undefined}
               tabIndex={0}
               class={twMerge(dialogBaseClass(), local.class)}
@@ -513,9 +572,9 @@ export const Dialog: DialogComponent = (props) => {
                   onPointerDown={handleHeaderPointerDown}
                 >
                   <h5 id={headerId} class={clsx("flex-1 font-bold")}>
-                    {header()!()}
+                    {header()!.children}
                   </h5>
-                  <Show when={action()}>{action()!()}</Show>
+                  <Show when={action()}>{action()!.children}</Show>
                   <Show when={local.closable ?? true}>
                     <Button
                       data-dialog-close
@@ -531,7 +590,7 @@ export const Dialog: DialogComponent = (props) => {
               </Show>
 
               {/* Content */}
-              <div data-dialog-content class={dialogContentClass}>
+              <div data-dialog-content class="flex-1 overflow-auto">
                 {local.children}
               </div>
 
@@ -554,11 +613,147 @@ export const Dialog: DialogComponent = (props) => {
               </Show>
             </div>
           </div>
-        </DialogSlotsContext.Provider>
+          </ActionProvider>
+        </HeaderProvider>
       </Portal>
     </Show>
   );
 };
 
-Dialog.Header = DialogHeader;
-Dialog.Action = DialogAction;
+//#region Export
+export const Dialog = Object.assign(DialogInner, {
+  Header: DialogHeader,
+  Action: DialogAction,
+});
+//#endregion
+
+//#region DialogProvider
+
+interface DialogEntry {
+  id: string;
+  component: Component<any>;
+  props: Record<string, unknown>;
+  options: DialogShowOptions;
+  resolve: (result: unknown) => void;
+  open: Accessor<boolean>;
+  setOpen: (value: boolean) => void;
+  pendingResult?: unknown;
+}
+
+let nextId = 0;
+
+/**
+ * Programmatic dialog Provider
+ *
+ * Open dialogs with `useDialog().show(component, props, options)`,
+ * and close them with `props.close(result)` to resolve the Promise.
+ *
+ * @example
+ * ```tsx
+ * <DialogProvider>
+ *   <App />
+ * </DialogProvider>
+ * ```
+ */
+export interface DialogProviderProps extends DialogDefaults {}
+
+export const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {
+  const [local, _rest] = splitProps(props, ["closeOnEscape", "closeOnInteractOutside", "children"]);
+
+  const defaults = () => ({
+    closeOnEscape: local.closeOnEscape,
+    closeOnInteractOutside: local.closeOnInteractOutside,
+  });
+
+  const [entries, setEntries] = createSignal<DialogEntry[]>([]);
+
+  const show = <P extends Record<string, any>,>(
+    component: Component<P>,
+    componentProps: Record<string, any>,
+    options?: DialogShowOptions,
+  ): Promise<any> => {
+    return new Promise((resolve) => {
+      const id = String(nextId++);
+      const [open, setOpen] = createSignal(true);
+      const entry: DialogEntry = {
+        id,
+        component,
+        props: componentProps,
+        options: options ?? {},
+        resolve,
+        open,
+        setOpen,
+      };
+      setEntries((prev) => [...prev, entry]);
+    });
+  };
+
+  // Start close animation (set open to false)
+  const requestClose = (id: string, result?: unknown) => {
+    const entry = entries().find((e) => e.id === id);
+    if (entry) {
+      entry.pendingResult = result;
+      entry.setOpen(false);
+    }
+  };
+
+  // Actually remove after animation completes
+  const removeEntry = (id: string) => {
+    setEntries((prev) => {
+      const entry = prev.find((e) => e.id === id);
+      if (entry) {
+        entry.resolve(entry.pendingResult);
+      }
+      return prev.filter((e) => e.id !== id);
+    });
+  };
+
+  const contextValue: DialogContextValue = {
+    show,
+  };
+
+  return (
+    <DialogDefaultsContext.Provider value={defaults}>
+      <DialogContext.Provider value={contextValue}>
+        {local.children}
+        <For each={entries()}>
+          {(entry) => (
+            <Dialog
+              open={entry.open()}
+              onOpenChange={(open) => {
+                if (!open && entry.pendingResult === undefined) {
+                  requestClose(entry.id);
+                }
+              }}
+              onCloseComplete={() => removeEntry(entry.id)}
+              closable={entry.options.closable}
+              closeOnInteractOutside={entry.options.closeOnInteractOutside}
+              closeOnEscape={entry.options.closeOnEscape}
+              resizable={entry.options.resizable}
+              draggable={entry.options.draggable}
+              mode={entry.options.mode}
+              width={entry.options.width}
+              height={entry.options.height}
+              minWidth={entry.options.minWidth}
+              minHeight={entry.options.minHeight}
+              position={entry.options.position}
+              headerStyle={entry.options.headerStyle}
+              beforeClose={entry.options.beforeClose}
+            >
+              <Show when={entry.options.header !== undefined}>
+                <Dialog.Header>{entry.options.header}</Dialog.Header>
+              </Show>
+              <Dynamic
+                component={entry.component}
+                {...entry.props}
+                close={(result?: unknown) => requestClose(entry.id, result)}
+              />
+            </Dialog>
+          )}
+        </For>
+      </DialogContext.Provider>
+    </DialogDefaultsContext.Provider>
+  );
+};
+
+//#endregion

package/src/components/disclosure/Dropdown.tsx

@@ -3,40 +3,25 @@ import {
   type ParentComponent,
   createSignal,
   createEffect,
-  createContext,
   onCleanup,
   Show,
   splitProps,
 } from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
 import { createControllableSignal } from "../../hooks/createControllableSignal";
-import { createSlotSignal, type SlotAccessor } from "../../hooks/createSlotSignal";
 import { createMountTransition } from "../../hooks/createMountTransition";
 import { Portal } from "solid-js/web";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { mergeStyles } from "../../helpers/mergeStyles";
-import { createSlotComponent } from "../../helpers/createSlotComponent";
-import { borderSubtle } from "../../styles/tokens.styles";
+import { createSlot } from "../../helpers/createSlot";
+import { bg, border } from "../../styles/base.styles";
 import { tabbable } from "tabbable";
 
-// --- DropdownContext (internal) ---
+// --- DropdownTrigger / DropdownContent slots ---
 
-interface DropdownContextValue {
-  toggle: () => void;
-  setTrigger: (content: SlotAccessor) => void;
-  setContent: (content: SlotAccessor) => void;
-}
-
-const DropdownContext = createContext<DropdownContextValue>();
-
-// --- DropdownTrigger ---
-
-const DropdownTrigger = createSlotComponent(DropdownContext, (ctx) => ctx.setTrigger);
-
-// --- DropdownContent ---
-
-const DropdownContent = createSlotComponent(DropdownContext, (ctx) => ctx.setContent);
+const [DropdownTrigger, createTriggerSlotAccessor] = createSlot<{ children: JSX.Element }>();
+const [DropdownContent, createContentSlotAccessor] = createSlot<{ children: JSX.Element }>();
 
 // --- Dropdown ---
 
@@ -100,11 +85,6 @@ export interface DropdownProps {
   children: JSX.Element;
 }
 
-interface DropdownComponent extends ParentComponent<DropdownProps> {
-  Trigger: typeof DropdownTrigger;
-  Content: typeof DropdownContent;
-}
-
 /**
  * Dropdown popup component
  *
@@ -132,7 +112,7 @@ interface DropdownComponent extends ParentComponent<DropdownProps> {
  * </Dropdown>
  * ```
  */
-export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
+const DropdownInner: ParentComponent<DropdownProps> = (props: DropdownProps) => {
   const [local, rest] = splitProps(props, [
     "position",
     "open",
@@ -156,9 +136,9 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     setOpen(!open());
   };
 
-  // Slot registration signals
-  const [triggerSlot, setTrigger] = createSlotSignal();
-  const [contentSlot, setContent] = createSlotSignal();
+  // Slot accessors
+  const [trigger, TriggerProvider] = createTriggerSlotAccessor();
+  const [content, ContentProvider] = createContentSlotAccessor();
 
   // Trigger wrapper ref (needed for position calculation)
   let triggerRef: HTMLDivElement | undefined;
@@ -436,58 +416,64 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
   };
 
   return (
-    <DropdownContext.Provider value={{ toggle, setTrigger, setContent }}>
-      {local.children}
-
-      {/* Render trigger slot (attach click/keyboard handlers to wrapper div) */}
-      <Show when={triggerSlot()}>
-        <div
-          ref={(el) => {
-            triggerRef = el;
-          }}
-          tabIndex={-1}
-          data-dropdown-trigger
-          onClick={toggle}
-          onKeyDown={handleTriggerKeyDown}
-        >
-          {triggerSlot()!()}
-        </div>
-      </Show>
-
-      {/* Content slot: Portal + popup */}
-      <Show when={mounted()}>
-        <Portal>
+    <TriggerProvider>
+      <ContentProvider>
+        {local.children}
+
+        {/* Render trigger slot (attach click/keyboard handlers to wrapper div) */}
+        <Show when={trigger()}>
           <div
-            {...rest}
-            ref={setPopupRef}
-            data-dropdown
-            class={twMerge(
-              clsx(
-                "fixed",
-                "z-dropdown",
-                "bg-white dark:bg-base-800",
-                "border",
-                borderSubtle,
-                "shadow-lg dark:shadow-black/30",
-                "rounded-md",
-                "overflow-y-auto",
-                animationClass(),
-              ),
-              local.class,
-            )}
-            style={mergeStyles(computedStyle(), local.style, {
-              "max-height": `${maxHeight()}px`,
-            })}
-            onTransitionEnd={handleTransitionEnd}
-            onKeyDown={handlePopupKeyDown}
+            ref={(el) => {
+              triggerRef = el;
+            }}
+            tabIndex={-1}
+            data-dropdown-trigger
+            onClick={toggle}
+            onKeyDown={handleTriggerKeyDown}
           >
-            <Show when={contentSlot()}>{contentSlot()!()}</Show>
+            {trigger()!.children}
           </div>
-        </Portal>
-      </Show>
-    </DropdownContext.Provider>
+        </Show>
+
+        {/* Content slot: Portal + popup */}
+        <Show when={mounted()}>
+          <Portal>
+            <div
+              {...rest}
+              ref={setPopupRef}
+              data-dropdown
+              class={twMerge(
+                clsx(
+                  "fixed",
+                  "z-dropdown",
+                  bg.surface,
+                  "border",
+                  border.subtle,
+                  "shadow-lg dark:shadow-black/30",
+                  "rounded-md",
+                  "overflow-y-auto",
+                  animationClass(),
+                ),
+                local.class,
+              )}
+              style={mergeStyles(computedStyle(), local.style, {
+                "max-height": `${maxHeight()}px`,
+              })}
+              onTransitionEnd={handleTransitionEnd}
+              onKeyDown={handlePopupKeyDown}
+            >
+              <Show when={content()}>{content()!.children}</Show>
+            </div>
+          </Portal>
+        </Show>
+      </ContentProvider>
+    </TriggerProvider>
   );
-}) as DropdownComponent;
-
-Dropdown.Trigger = DropdownTrigger;
-Dropdown.Content = DropdownContent;
+};
+
+//#region Export
+export const Dropdown = Object.assign(DropdownInner, {
+  Trigger: DropdownTrigger,
+  Content: DropdownContent,
+});
+//#endregion