@moduix/solid 1.0.0

package/dist/components/command-palette/CommandPalette.js

@@ -0,0 +1,583 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Combobox } from "@ark-ui/solid/combobox";
+import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
+import { ark } from "@ark-ui/solid/factory";
+import { isHotKey } from "@zag-js/hotkeys";
+import { clsx } from "clsx";
+import { children, createEffect, onCleanup, splitProps } from "solid-js";
+import { CheckIcon, CloseIcon } from "../../internal/icons/ui/Icons.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
+import CloseButton_module from "../close-button/CloseButton.module.js";
+import { Kbd } from "../kbd/index.js";
+import { ScrollArea } from "../scroll-area/index.js";
+import CommandPalette_module from "./CommandPalette.module.js";
+const DEFAULT_CLEAR_TRIGGER_LABEL = 'Clear search';
+const DEFAULT_SEARCH_INPUT_LABEL = 'Search commands';
+function CommandPaletteRoot(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'shortcut',
+        'lazyMount',
+        'onExitComplete',
+        'portalled',
+        'present',
+        'portalRef',
+        'skipAnimationOnMount',
+        'unmountOnExit'
+    ]);
+    const dialog = useDialog(others);
+    createEffect(()=>{
+        const shortcut = local.shortcut;
+        if (!shortcut) return;
+        const handleKeyDown = (event)=>{
+            const currentDialog = dialog();
+            if (event.defaultPrevented || event.repeat || event.isComposing || !isHotKey(shortcut, event, {
+                enableOnContentEditable: currentDialog.open,
+                enableOnFormTags: currentDialog.open
+            })) return;
+            event.preventDefault();
+            currentDialog.setOpen(!currentDialog.open);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        onCleanup(()=>document.removeEventListener('keydown', handleKeyDown));
+    });
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Dialog.RootProvider, {
+                value: dialog,
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get onExitComplete () {
+                    return local.onExitComplete;
+                },
+                get present () {
+                    return local.present;
+                },
+                get skipAnimationOnMount () {
+                    return local.skipAnimationOnMount;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                },
+                get children () {
+                    return local.children;
+                }
+            });
+        }
+    });
+}
+function CommandPaletteRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'lazyMount',
+        'portalled',
+        'portalRef',
+        'unmountOnExit'
+    ]);
+    return createComponent(OverlayPortalProvider, {
+        get portalled () {
+            return local.portalled;
+        },
+        get portalRef () {
+            return local.portalRef;
+        },
+        get children () {
+            return createComponent(Dialog.RootProvider, mergeProps({
+                get lazyMount () {
+                    return local.lazyMount ?? true;
+                },
+                get unmountOnExit () {
+                    return local.unmountOnExit ?? true;
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function CommandPaletteTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class'
+    ]);
+    return createComponent(Dialog.Trigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "command-palette-trigger",
+        get ["class"] () {
+            return clsx(!local.asChild && CommandPalette_module.trigger, local.class);
+        }
+    }, others));
+}
+function CommandPaletteBackdrop(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Dialog.Backdrop, mergeProps({
+                "data-slot": "command-palette-backdrop",
+                get ["class"] () {
+                    return clsx(CommandPalette_module.backdrop, local.class);
+                }
+            }, others));
+        }
+    });
+}
+function CommandPalettePositioner(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(OverlayPortal, {
+        get children () {
+            return createComponent(Dialog.Positioner, mergeProps({
+                "data-slot": "command-palette-positioner",
+                get ["class"] () {
+                    return clsx(CommandPalette_module.positioner, local.class);
+                }
+            }, others));
+        }
+    });
+}
+function CommandPaletteContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Content, mergeProps({
+        "data-slot": "command-palette-content",
+        get ["class"] () {
+            return clsx(CommandPalette_module.content, local.class);
+        }
+    }, others));
+}
+function CommandPalettePanel(props) {
+    const [local, others] = splitProps(props, [
+        'children'
+    ]);
+    return [
+        createComponent(CommandPaletteBackdrop, {}),
+        createComponent(CommandPalettePositioner, {
+            get children () {
+                return createComponent(CommandPaletteContent, mergeProps(others, {
+                    get children () {
+                        return createComponent(CommandPaletteBody, {
+                            get children () {
+                                return local.children;
+                            }
+                        });
+                    }
+                }));
+            }
+        })
+    ];
+}
+function CommandPaletteTitle(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Title, mergeProps({
+        "data-slot": "command-palette-title",
+        get ["class"] () {
+            return clsx(CommandPalette_module.title, local.class);
+        }
+    }, others));
+}
+function CommandPaletteDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Dialog.Description, mergeProps({
+        "data-slot": "command-palette-description",
+        get ["class"] () {
+            return clsx(CommandPalette_module.description, local.class);
+        }
+    }, others));
+}
+function CommandPaletteHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "command-palette-header",
+        get ["class"] () {
+            return clsx(CommandPalette_module.header, local.class);
+        }
+    }, others));
+}
+function CommandPaletteBody(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "command-palette-body",
+        get ["class"] () {
+            return clsx(CommandPalette_module.body, local.class);
+        }
+    }, others));
+}
+const CommandPalette_CommandPaletteCombobox = function(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class',
+        'open',
+        'inputBehavior',
+        'selectionBehavior',
+        'closeOnSelect',
+        'disableLayer',
+        'onSelect'
+    ]);
+    const dialog = useDialogContext();
+    const handleSelect = (details)=>{
+        local.onSelect?.(details);
+        if (local.closeOnSelect ?? true) dialog().setOpen(false);
+    };
+    return createComponent(Combobox.Root, mergeProps({
+        "data-slot": "command-palette-combobox",
+        get ["class"] () {
+            return clsx(CommandPalette_module.combobox, local.class);
+        },
+        get open () {
+            return local.open ?? true;
+        },
+        get inputBehavior () {
+            return local.inputBehavior ?? 'autohighlight';
+        },
+        get selectionBehavior () {
+            return local.selectionBehavior ?? 'preserve';
+        },
+        get closeOnSelect () {
+            return local.closeOnSelect ?? true;
+        },
+        get disableLayer () {
+            return local.disableLayer ?? true;
+        },
+        onSelect: handleSelect
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+};
+function CommandPaletteControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.Control, mergeProps({
+        "data-slot": "command-palette-control",
+        get ["class"] () {
+            return clsx(CommandPalette_module.control, local.class);
+        }
+    }, others));
+}
+function CommandPaletteInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.Input, mergeProps({
+        "data-slot": "command-palette-input",
+        get ["class"] () {
+            return clsx(CommandPalette_module.input, local.class);
+        }
+    }, others));
+}
+function CommandPaletteSearch(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby'
+    ]);
+    return createComponent(CommandPaletteControl, {
+        get children () {
+            return [
+                createComponent(CommandPaletteInput, mergeProps({
+                    get ["aria-label"] () {
+                        return local['aria-label'] ?? (null == local['aria-labelledby'] ? DEFAULT_SEARCH_INPUT_LABEL : void 0);
+                    },
+                    get ["aria-labelledby"] () {
+                        return local['aria-labelledby'];
+                    }
+                }, others)),
+                createComponent(CommandPaletteClearTrigger, {})
+            ];
+        }
+    });
+}
+function CommandPaletteClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'children',
+        'onClick',
+        'onPointerDown',
+        'aria-label',
+        'aria-labelledby'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Combobox.Context, {
+        children: (combobox)=>createComponent(Combobox.ClearTrigger, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                },
+                "data-slot": "command-palette-clear-trigger",
+                get hidden () {
+                    return 0 === combobox().inputValue.length;
+                },
+                get ["aria-label"] () {
+                    return local['aria-label'] ?? (local.asChild || null != local.children || null != local['aria-labelledby'] ? void 0 : DEFAULT_CLEAR_TRIGGER_LABEL);
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get ["class"] () {
+                    return clsx(CloseButton_module.root, CommandPalette_module.clearTrigger, local.class);
+                },
+                onClick: (event)=>{
+                    local.onClick?.(event);
+                    if (!event.defaultPrevented) combobox().setInputValue('');
+                },
+                onPointerDown: (event)=>{
+                    local.onPointerDown?.(event);
+                    if (0 === event.button) {
+                        event.preventDefault();
+                        combobox().setInputValue('');
+                    }
+                }
+            }, others, {
+                get children () {
+                    return resolvedChildren() ?? createComponent(CloseIcon, {});
+                }
+            }))
+    });
+}
+function CommandPaletteList(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'children'
+    ]);
+    return createComponent(Combobox.Content, mergeProps({
+        "data-slot": "command-palette-list",
+        get ["class"] () {
+            return clsx(CommandPalette_module.list, local.class);
+        }
+    }, others, {
+        get children () {
+            return createComponent(ScrollArea, {
+                "data-slot": "command-palette-scroll-area",
+                get ["class"] () {
+                    return CommandPalette_module.scrollArea;
+                },
+                get children () {
+                    return createComponent(ScrollArea.Viewport, {
+                        "data-slot": "command-palette-scroll-viewport",
+                        get ["class"] () {
+                            return CommandPalette_module.scrollViewport;
+                        },
+                        get children () {
+                            return createComponent(ScrollArea.Content, {
+                                "data-slot": "command-palette-scroll-content",
+                                get ["class"] () {
+                                    return CommandPalette_module.scrollContent;
+                                },
+                                get children () {
+                                    return local.children;
+                                }
+                            });
+                        }
+                    });
+                }
+            });
+        }
+    }));
+}
+function CommandPaletteEmpty(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.Empty, mergeProps({
+        "data-slot": "command-palette-empty",
+        get ["class"] () {
+            return clsx(CommandPalette_module.empty, local.class);
+        }
+    }, others));
+}
+function CommandPaletteItemGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.ItemGroup, mergeProps({
+        "data-slot": "command-palette-item-group",
+        get ["class"] () {
+            return clsx(CommandPalette_module.itemGroup, local.class);
+        }
+    }, others));
+}
+function CommandPaletteItemGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.ItemGroupLabel, mergeProps({
+        "data-slot": "command-palette-item-group-label",
+        get ["class"] () {
+            return clsx(CommandPalette_module.itemGroupLabel, local.class);
+        }
+    }, others));
+}
+function CommandPaletteItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.Item, mergeProps({
+        "data-slot": "command-palette-item",
+        get ["class"] () {
+            return clsx(CommandPalette_module.item, local.class);
+        }
+    }, others));
+}
+function CommandPaletteItemText(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Combobox.ItemText, mergeProps({
+        "data-slot": "command-palette-item-text",
+        get ["class"] () {
+            return clsx(CommandPalette_module.itemText, local.class);
+        }
+    }, others));
+}
+function CommandPaletteItemIndicator(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'children'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(Combobox.ItemIndicator, mergeProps({
+        "data-slot": "command-palette-item-indicator",
+        get ["class"] () {
+            return clsx(CommandPalette_module.itemIndicator, local.class);
+        }
+    }, others, {
+        get children () {
+            return resolvedChildren() ?? createComponent(CheckIcon, {});
+        }
+    }));
+}
+function CommandPaletteItemIcon(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "command-palette-item-icon",
+        get ["class"] () {
+            return clsx(CommandPalette_module.itemIcon, local.class);
+        }
+    }, others));
+}
+function CommandPaletteItemLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "command-palette-item-label",
+        get ["class"] () {
+            return clsx(CommandPalette_module.itemLabel, local.class);
+        }
+    }, others));
+}
+function CommandPaletteItemDescription(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "command-palette-item-description",
+        get ["class"] () {
+            return clsx(CommandPalette_module.itemDescription, local.class);
+        }
+    }, others));
+}
+function CommandPaletteItemMeta(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps({
+        "data-slot": "command-palette-item-meta",
+        get ["class"] () {
+            return clsx(CommandPalette_module.itemMeta, local.class);
+        }
+    }, others));
+}
+function CommandPaletteSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        role: "separator",
+        "data-slot": "command-palette-separator",
+        get ["class"] () {
+            return clsx(CommandPalette_module.separator, local.class);
+        }
+    }, others));
+}
+function CommandPaletteFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        "data-slot": "command-palette-footer",
+        get ["class"] () {
+            return clsx(CommandPalette_module.footer, local.class);
+        }
+    }, others));
+}
+function CommandPaletteKbd(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(Kbd.Root, mergeProps({
+        "data-slot": "command-palette-kbd",
+        get ["class"] () {
+            return clsx(CommandPalette_module.kbd, local.class);
+        }
+    }, others));
+}
+const CommandPalette = Object.assign(CommandPaletteRoot, {
+    Root: CommandPaletteRoot,
+    RootProvider: CommandPaletteRootProvider,
+    Trigger: CommandPaletteTrigger,
+    Backdrop: CommandPaletteBackdrop,
+    Positioner: CommandPalettePositioner,
+    Content: CommandPaletteContent,
+    Panel: CommandPalettePanel,
+    Title: CommandPaletteTitle,
+    Description: CommandPaletteDescription,
+    Header: CommandPaletteHeader,
+    Body: CommandPaletteBody,
+    Combobox: CommandPalette_CommandPaletteCombobox,
+    Control: CommandPaletteControl,
+    Input: CommandPaletteInput,
+    Search: CommandPaletteSearch,
+    ClearTrigger: CommandPaletteClearTrigger,
+    List: CommandPaletteList,
+    Empty: CommandPaletteEmpty,
+    ItemGroup: CommandPaletteItemGroup,
+    ItemGroupLabel: CommandPaletteItemGroupLabel,
+    Item: CommandPaletteItem,
+    ItemText: CommandPaletteItemText,
+    ItemIndicator: CommandPaletteItemIndicator,
+    ItemIcon: CommandPaletteItemIcon,
+    ItemLabel: CommandPaletteItemLabel,
+    ItemDescription: CommandPaletteItemDescription,
+    ItemMeta: CommandPaletteItemMeta,
+    Separator: CommandPaletteSeparator,
+    Footer: CommandPaletteFooter,
+    Kbd: CommandPaletteKbd
+});
+export { CommandPalette };