jaci-ui 0.7.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/README.md +75 -0
- package/dist/_virtual/_rolldown/runtime.cjs +23 -0
- package/dist/components/alert-dialog/alert-dialog.cjs +4 -1
- package/dist/components/alert-dialog/alert-dialog.cjs.map +1 -1
- package/dist/components/alert-dialog/alert-dialog.d.cts +2 -2
- package/dist/components/alert-dialog/alert-dialog.d.ts +2 -2
- package/dist/components/alert-dialog/alert-dialog.js +4 -1
- package/dist/components/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/components/carousel/carousel.cjs +342 -0
- package/dist/components/carousel/carousel.cjs.map +1 -0
- package/dist/components/carousel/carousel.d.cts +44 -0
- package/dist/components/carousel/carousel.d.ts +44 -0
- package/dist/components/carousel/carousel.js +330 -0
- package/dist/components/carousel/carousel.js.map +1 -0
- package/dist/components/carousel/index.d.cts +2 -0
- package/dist/components/carousel/index.d.ts +2 -0
- package/dist/components/code/code.cjs +32 -5
- package/dist/components/code/code.cjs.map +1 -1
- package/dist/components/code/code.d.cts +1 -0
- package/dist/components/code/code.d.ts +1 -0
- package/dist/components/code/code.js +34 -7
- package/dist/components/code/code.js.map +1 -1
- package/dist/components/color-picker/color-picker.cjs +4 -1
- package/dist/components/color-picker/color-picker.cjs.map +1 -1
- package/dist/components/color-picker/color-picker.d.cts +2 -2
- package/dist/components/color-picker/color-picker.d.ts +2 -2
- package/dist/components/color-picker/color-picker.js +4 -1
- package/dist/components/color-picker/color-picker.js.map +1 -1
- package/dist/components/color-swatch/color-swatch.cjs +33 -0
- package/dist/components/color-swatch/color-swatch.cjs.map +1 -0
- package/dist/components/color-swatch/color-swatch.d.cts +13 -0
- package/dist/components/color-swatch/color-swatch.d.ts +13 -0
- package/dist/components/color-swatch/color-swatch.js +33 -0
- package/dist/components/color-swatch/color-swatch.js.map +1 -0
- package/dist/components/color-swatch/index.d.cts +2 -0
- package/dist/components/color-swatch/index.d.ts +2 -0
- package/dist/components/combobox/combobox.cjs +4 -1
- package/dist/components/combobox/combobox.cjs.map +1 -1
- package/dist/components/combobox/combobox.d.cts +2 -2
- package/dist/components/combobox/combobox.d.ts +2 -2
- package/dist/components/combobox/combobox.js +4 -1
- package/dist/components/combobox/combobox.js.map +1 -1
- package/dist/components/command/command.cjs +76 -13
- package/dist/components/command/command.cjs.map +1 -1
- package/dist/components/command/command.d.cts +7 -1
- package/dist/components/command/command.d.ts +7 -1
- package/dist/components/command/command.js +76 -13
- package/dist/components/command/command.js.map +1 -1
- package/dist/components/command/index.d.cts +2 -2
- package/dist/components/command/index.d.ts +2 -2
- package/dist/components/context-menu/context-menu.cjs +4 -1
- package/dist/components/context-menu/context-menu.cjs.map +1 -1
- package/dist/components/context-menu/context-menu.d.cts +2 -2
- package/dist/components/context-menu/context-menu.d.ts +2 -2
- package/dist/components/context-menu/context-menu.js +4 -1
- package/dist/components/context-menu/context-menu.js.map +1 -1
- package/dist/components/date-picker/date-picker.cjs +4 -1
- package/dist/components/date-picker/date-picker.cjs.map +1 -1
- package/dist/components/date-picker/date-picker.d.cts +2 -2
- package/dist/components/date-picker/date-picker.d.ts +2 -2
- package/dist/components/date-picker/date-picker.js +4 -1
- package/dist/components/date-picker/date-picker.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.cjs +4 -1
- package/dist/components/date-range-picker/date-range-picker.cjs.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.d.cts +2 -2
- package/dist/components/date-range-picker/date-range-picker.d.ts +2 -2
- package/dist/components/date-range-picker/date-range-picker.js +4 -1
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/dialog/dialog.cjs +4 -1
- package/dist/components/dialog/dialog.cjs.map +1 -1
- package/dist/components/dialog/dialog.d.cts +2 -2
- package/dist/components/dialog/dialog.d.ts +2 -2
- package/dist/components/dialog/dialog.js +4 -1
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/download-trigger/download-trigger.cjs +25 -0
- package/dist/components/download-trigger/download-trigger.cjs.map +1 -0
- package/dist/components/download-trigger/download-trigger.d.cts +12 -0
- package/dist/components/download-trigger/download-trigger.d.ts +12 -0
- package/dist/components/download-trigger/download-trigger.js +25 -0
- package/dist/components/download-trigger/download-trigger.js.map +1 -0
- package/dist/components/download-trigger/index.d.cts +2 -0
- package/dist/components/download-trigger/index.d.ts +2 -0
- package/dist/components/drawer/drawer.cjs +4 -1
- package/dist/components/drawer/drawer.cjs.map +1 -1
- package/dist/components/drawer/drawer.d.cts +2 -2
- package/dist/components/drawer/drawer.d.ts +2 -2
- package/dist/components/drawer/drawer.js +4 -1
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/figure/figure.cjs +45 -36
- package/dist/components/figure/figure.cjs.map +1 -1
- package/dist/components/figure/figure.js +45 -36
- package/dist/components/figure/figure.js.map +1 -1
- package/dist/components/image/image.cjs +41 -32
- package/dist/components/image/image.cjs.map +1 -1
- package/dist/components/image/image.js +41 -32
- package/dist/components/image/image.js.map +1 -1
- package/dist/components/menu/menu.cjs +4 -1
- package/dist/components/menu/menu.cjs.map +1 -1
- package/dist/components/menu/menu.d.cts +2 -2
- package/dist/components/menu/menu.d.ts +2 -2
- package/dist/components/menu/menu.js +4 -1
- package/dist/components/menu/menu.js.map +1 -1
- package/dist/components/menubar/menubar.cjs +4 -1
- package/dist/components/menubar/menubar.cjs.map +1 -1
- package/dist/components/menubar/menubar.d.cts +2 -2
- package/dist/components/menubar/menubar.d.ts +2 -2
- package/dist/components/menubar/menubar.js +4 -1
- package/dist/components/menubar/menubar.js.map +1 -1
- package/dist/components/navigation/navigation.cjs +3 -1
- package/dist/components/navigation/navigation.cjs.map +1 -1
- package/dist/components/navigation/navigation.js +3 -1
- package/dist/components/navigation/navigation.js.map +1 -1
- package/dist/components/navigation-menu/navigation-menu.cjs +4 -1
- package/dist/components/navigation-menu/navigation-menu.cjs.map +1 -1
- package/dist/components/navigation-menu/navigation-menu.d.cts +2 -2
- package/dist/components/navigation-menu/navigation-menu.d.ts +2 -2
- package/dist/components/navigation-menu/navigation-menu.js +4 -1
- package/dist/components/navigation-menu/navigation-menu.js.map +1 -1
- package/dist/components/popover/popover.cjs +4 -1
- package/dist/components/popover/popover.cjs.map +1 -1
- package/dist/components/popover/popover.d.cts +2 -2
- package/dist/components/popover/popover.d.ts +2 -2
- package/dist/components/popover/popover.js +4 -1
- package/dist/components/popover/popover.js.map +1 -1
- package/dist/components/qr-code/index.d.cts +2 -0
- package/dist/components/qr-code/index.d.ts +2 -0
- package/dist/components/qr-code/qr-code.cjs +118 -0
- package/dist/components/qr-code/qr-code.cjs.map +1 -0
- package/dist/components/qr-code/qr-code.d.cts +17 -0
- package/dist/components/qr-code/qr-code.d.ts +17 -0
- package/dist/components/qr-code/qr-code.js +116 -0
- package/dist/components/qr-code/qr-code.js.map +1 -0
- package/dist/components/select/select.cjs +4 -1
- package/dist/components/select/select.cjs.map +1 -1
- package/dist/components/select/select.d.cts +2 -2
- package/dist/components/select/select.d.ts +2 -2
- package/dist/components/select/select.js +4 -1
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/sidebar/sidebar.cjs +24 -17
- package/dist/components/sidebar/sidebar.cjs.map +1 -1
- package/dist/components/sidebar/sidebar.d.cts +4 -2
- package/dist/components/sidebar/sidebar.d.ts +4 -2
- package/dist/components/sidebar/sidebar.js +24 -17
- package/dist/components/sidebar/sidebar.js.map +1 -1
- package/dist/components/spacer/index.d.cts +2 -0
- package/dist/components/spacer/index.d.ts +2 -0
- package/dist/components/spacer/spacer.cjs +24 -0
- package/dist/components/spacer/spacer.cjs.map +1 -0
- package/dist/components/spacer/spacer.d.cts +10 -0
- package/dist/components/spacer/spacer.d.ts +10 -0
- package/dist/components/spacer/spacer.js +24 -0
- package/dist/components/spacer/spacer.js.map +1 -0
- package/dist/components/toast/toast.cjs +4 -1
- package/dist/components/toast/toast.cjs.map +1 -1
- package/dist/components/toast/toast.d.cts +1 -1
- package/dist/components/toast/toast.d.ts +1 -1
- package/dist/components/toast/toast.js +4 -1
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/tooltip/tooltip.cjs +4 -1
- package/dist/components/tooltip/tooltip.cjs.map +1 -1
- package/dist/components/tooltip/tooltip.d.cts +2 -2
- package/dist/components/tooltip/tooltip.d.ts +2 -2
- package/dist/components/tooltip/tooltip.js +4 -1
- package/dist/components/tooltip/tooltip.js.map +1 -1
- package/dist/index.cjs +11 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +12 -2
- package/dist/index.d.ts +12 -2
- package/dist/index.js +7 -1
- package/dist/index.js.map +1 -0
- package/dist/styled-system/recipes/carousel.cjs +48 -0
- package/dist/styled-system/recipes/carousel.cjs.map +1 -0
- package/dist/styled-system/recipes/carousel.js +48 -0
- package/dist/styled-system/recipes/carousel.js.map +1 -0
- package/dist/styled-system/recipes/code.cjs +4 -2
- package/dist/styled-system/recipes/code.cjs.map +1 -1
- package/dist/styled-system/recipes/code.js +4 -2
- package/dist/styled-system/recipes/code.js.map +1 -1
- package/dist/styled-system/recipes/color-swatch.cjs +37 -0
- package/dist/styled-system/recipes/color-swatch.cjs.map +1 -0
- package/dist/styled-system/recipes/color-swatch.js +37 -0
- package/dist/styled-system/recipes/color-swatch.js.map +1 -0
- package/dist/styled-system/recipes/command.cjs +3 -3
- package/dist/styled-system/recipes/command.cjs.map +1 -1
- package/dist/styled-system/recipes/command.js +3 -3
- package/dist/styled-system/recipes/command.js.map +1 -1
- package/dist/styled-system/recipes/download-trigger.cjs +39 -0
- package/dist/styled-system/recipes/download-trigger.cjs.map +1 -0
- package/dist/styled-system/recipes/download-trigger.js +39 -0
- package/dist/styled-system/recipes/download-trigger.js.map +1 -0
- package/dist/styled-system/recipes/figure.cjs +1 -0
- package/dist/styled-system/recipes/figure.cjs.map +1 -1
- package/dist/styled-system/recipes/figure.js +1 -0
- package/dist/styled-system/recipes/figure.js.map +1 -1
- package/dist/styled-system/recipes/image.cjs +1 -0
- package/dist/styled-system/recipes/image.cjs.map +1 -1
- package/dist/styled-system/recipes/image.js +1 -0
- package/dist/styled-system/recipes/image.js.map +1 -1
- package/dist/styled-system/recipes/layout-spacer.cjs +88 -0
- package/dist/styled-system/recipes/layout-spacer.cjs.map +1 -0
- package/dist/styled-system/recipes/layout-spacer.js +88 -0
- package/dist/styled-system/recipes/layout-spacer.js.map +1 -0
- package/dist/styled-system/recipes/qr-code.cjs +25 -0
- package/dist/styled-system/recipes/qr-code.cjs.map +1 -0
- package/dist/styled-system/recipes/qr-code.js +25 -0
- package/dist/styled-system/recipes/qr-code.js.map +1 -0
- package/dist/styles.css +662 -106
- package/dist/theme/theme-provider.cjs +46 -8
- package/dist/theme/theme-provider.cjs.map +1 -1
- package/dist/theme/theme-provider.js +46 -8
- package/dist/theme/theme-provider.js.map +1 -1
- package/dist/theme/theme-scope.cjs +21 -0
- package/dist/theme/theme-scope.cjs.map +1 -0
- package/dist/theme/theme-scope.js +19 -0
- package/dist/theme/theme-scope.js.map +1 -0
- package/package.json +10 -5
|
@@ -33,7 +33,7 @@ type ComboboxIconProps = ComponentPropsWithoutRef<typeof Combobox.Icon>;
|
|
|
33
33
|
declare const ComboboxIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
34
34
|
type ComboboxValueProps = ComponentPropsWithoutRef<typeof Combobox.Value>;
|
|
35
35
|
declare const ComboboxValue: typeof Combobox.Value;
|
|
36
|
-
declare
|
|
36
|
+
declare function ComboboxPortal(props: ComponentPropsWithoutRef<typeof Combobox.Portal>): import("react").JSX.Element;
|
|
37
37
|
type ComboboxPositionerProps = ComponentPropsWithoutRef<typeof Combobox.Positioner>;
|
|
38
38
|
declare const ComboboxPositioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompletePositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
39
39
|
type ComboboxPopupProps = ComponentPropsWithoutRef<typeof Combobox.Popup>;
|
|
@@ -66,7 +66,7 @@ declare const Combobox$1: {
|
|
|
66
66
|
Trigger: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
67
67
|
Icon: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
68
68
|
Value: typeof Combobox.Value;
|
|
69
|
-
Portal:
|
|
69
|
+
Portal: typeof ComboboxPortal;
|
|
70
70
|
Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompletePositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
71
71
|
Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompletePopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
72
72
|
List: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { cx } from "../../styled-system/css/cx.js";
|
|
3
3
|
import { withRecipeClassName } from "../base-ui.js";
|
|
4
4
|
import { combobox } from "../../styled-system/recipes/combobox.js";
|
|
5
|
+
import { useThemePortalProps } from "../../theme/theme-scope.js";
|
|
5
6
|
import { Field as Field$1 } from "../field/field.js";
|
|
6
7
|
import { createContext, forwardRef, useContext } from "react";
|
|
7
8
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -79,7 +80,9 @@ const ComboboxIcon = forwardRef(function ComboboxIcon({ children = "⌄", classN
|
|
|
79
80
|
});
|
|
80
81
|
});
|
|
81
82
|
const ComboboxValue = Combobox.Value;
|
|
82
|
-
|
|
83
|
+
function ComboboxPortal(props) {
|
|
84
|
+
return /* @__PURE__ */ jsx(Combobox.Portal, { ...useThemePortalProps(props) });
|
|
85
|
+
}
|
|
83
86
|
const ComboboxPositioner = forwardRef(function ComboboxPositioner({ className, ...props }, ref) {
|
|
84
87
|
return /* @__PURE__ */ jsx(Combobox.Positioner, {
|
|
85
88
|
...props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.js","names":["ComboboxRoot","Field","BaseCombobox","BaseField","Combobox"],"sources":["../../../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { Combobox as BaseCombobox } from \"@base-ui/react/combobox\";\nimport { forwardRef, createContext, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { ComboboxRoot as BaseComboboxRoot } from \"@base-ui/react/combobox\";\nimport { Field as BaseField } from \"@base-ui/react/field\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { combobox } from \"../../styled-system/recipes\";\nimport { Field } from \"../field\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type ComboboxSize = \"sm\" | \"md\" | \"lg\";\n\nconst ComboboxSizeContext = createContext<ComboboxSize>(\"md\");\n\nfunction useComboboxStyles() {\n return combobox({ size: useContext(ComboboxSizeContext) });\n}\n\nexport interface ComboboxRootProps<Value, Multiple extends boolean | undefined = false>\n extends Omit<BaseComboboxRoot.Props<Value, Multiple>, \"children\" | \"className\"> {\n /** Visual size shared by the input and trigger. */\n size?: ComboboxSize;\n /** Marks the field invalid when an external validator owns its state. */\n invalid?: boolean;\n /** Shows a loading state through the optional Loading slot. */\n loading?: boolean;\n /** Direct error content rendered through the surrounding Field context. */\n errors?: ReactNode | ReactNode[];\n children?: ReactNode;\n className?: string;\n}\n\n/**\n * A searchable Base UI combobox with Field integration. It supports the\n * controlled `value`/`onValueChange` and uncontrolled `defaultValue` APIs,\n * object values, grouped items, filtering and multiple selection.\n */\nexport function ComboboxRoot<Value = string, Multiple extends boolean | undefined = false>({\n children,\n className,\n errors,\n invalid,\n loading: _loading,\n name,\n size = \"md\",\n ...props\n}: ComboboxRootProps<Value, Multiple>) {\n const styles = combobox({ size });\n const fieldProps = {\n className: cx(styles.root, className),\n ...(errors === undefined ? {} : { errors }),\n ...(invalid === undefined ? {} : { invalid }),\n ...(name === undefined ? {} : { name }),\n };\n\n return (\n <ComboboxSizeContext.Provider value={size}>\n <Field {...fieldProps}>\n <BaseCombobox.Root {...props} {...(name === undefined ? {} : { name })}>\n {children}\n </BaseCombobox.Root>\n </Field>\n </ComboboxSizeContext.Provider>\n );\n}\n\nexport type ComboboxLabelProps = ComponentPropsWithoutRef<typeof BaseField.Label>;\n\nexport const ComboboxLabel = forwardRef<HTMLElement, ComboboxLabelProps>(function ComboboxLabel(\n { className, ...props },\n ref,\n) {\n return (\n <BaseField.Label\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().label, className)}\n data-slot=\"combobox-label\"\n />\n );\n});\n\nexport type ComboboxInputGroupProps = ComponentPropsWithoutRef<typeof BaseCombobox.InputGroup>;\n\nexport const ComboboxInputGroup = forwardRef<HTMLDivElement, ComboboxInputGroupProps>(\n function ComboboxInputGroup({ className, ...props }, ref) {\n return (\n <BaseCombobox.InputGroup\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().inputGroup, className)}\n data-slot=\"combobox-input-group\"\n />\n );\n },\n);\n\nexport type ComboboxInputProps = ComponentPropsWithoutRef<typeof BaseCombobox.Input>;\n\nexport const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(\n function ComboboxInput({ className, ...props }, ref) {\n return (\n <BaseCombobox.Input\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().input, className)}\n data-jaci-component=\"combobox\"\n data-slot=\"combobox-input\"\n />\n );\n },\n);\n\nexport type ComboboxTriggerProps = ComponentPropsWithoutRef<typeof BaseCombobox.Trigger>;\n\nexport const ComboboxTrigger = forwardRef<HTMLButtonElement, ComboboxTriggerProps>(\n function ComboboxTrigger({ className, ...props }, ref) {\n return (\n <BaseCombobox.Trigger\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().trigger, className)}\n data-slot=\"combobox-trigger\"\n />\n );\n },\n);\n\nexport type ComboboxIconProps = ComponentPropsWithoutRef<typeof BaseCombobox.Icon>;\n\nexport const ComboboxIcon = forwardRef<HTMLSpanElement, ComboboxIconProps>(function ComboboxIcon(\n { children = \"⌄\", className, ...props },\n ref,\n) {\n return (\n <BaseCombobox.Icon\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().icon, className)}\n data-slot=\"combobox-icon\"\n >\n {children}\n </BaseCombobox.Icon>\n );\n});\n\nexport type ComboboxValueProps = ComponentPropsWithoutRef<typeof BaseCombobox.Value>;\nexport const ComboboxValue = BaseCombobox.Value;\n\nexport const ComboboxPortal = BaseCombobox.Portal;\n\nexport type ComboboxPositionerProps = ComponentPropsWithoutRef<typeof BaseCombobox.Positioner>;\nexport const ComboboxPositioner = forwardRef<HTMLDivElement, ComboboxPositionerProps>(\n function ComboboxPositioner({ className, ...props }, ref) {\n return (\n <BaseCombobox.Positioner\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().positioner, className)}\n data-slot=\"combobox-positioner\"\n />\n );\n },\n);\n\nexport type ComboboxPopupProps = ComponentPropsWithoutRef<typeof BaseCombobox.Popup>;\nexport const ComboboxPopup = forwardRef<HTMLDivElement, ComboboxPopupProps>(function ComboboxPopup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseCombobox.Popup\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().popup, className)}\n data-slot=\"combobox-popup\"\n />\n );\n});\n\nexport type ComboboxListProps = ComponentPropsWithoutRef<typeof BaseCombobox.List>;\nexport const ComboboxList = forwardRef<HTMLDivElement, ComboboxListProps>(function ComboboxList(\n { className, ...props },\n ref,\n) {\n return (\n <BaseCombobox.List\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().list, className)}\n data-slot=\"combobox-list\"\n />\n );\n});\n\nexport type ComboboxItemProps = ComponentPropsWithoutRef<typeof BaseCombobox.Item>;\nexport const ComboboxItem = forwardRef<HTMLDivElement, ComboboxItemProps>(function ComboboxItem(\n { className, ...props },\n ref,\n) {\n return (\n <BaseCombobox.Item\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().item, className)}\n data-slot=\"combobox-item\"\n />\n );\n});\n\nexport type ComboboxItemIndicatorProps = ComponentPropsWithoutRef<\n typeof BaseCombobox.ItemIndicator\n>;\nexport const ComboboxItemIndicator = forwardRef<HTMLSpanElement, ComboboxItemIndicatorProps>(\n function ComboboxItemIndicator({ children = \"✓\", className, ...props }, ref) {\n return (\n <BaseCombobox.ItemIndicator\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().itemIndicator, className)}\n data-slot=\"combobox-item-indicator\"\n >\n {children}\n </BaseCombobox.ItemIndicator>\n );\n },\n);\n\nexport type ComboboxGroupProps = ComponentPropsWithoutRef<typeof BaseCombobox.Group>;\nexport const ComboboxGroup = forwardRef<HTMLDivElement, ComboboxGroupProps>(function ComboboxGroup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseCombobox.Group\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().group, className)}\n data-slot=\"combobox-group\"\n />\n );\n});\n\nexport type ComboboxGroupLabelProps = ComponentPropsWithoutRef<typeof BaseCombobox.GroupLabel>;\nexport const ComboboxGroupLabel = forwardRef<HTMLDivElement, ComboboxGroupLabelProps>(\n function ComboboxGroupLabel({ className, ...props }, ref) {\n return (\n <BaseCombobox.GroupLabel\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().groupLabel, className)}\n data-slot=\"combobox-group-label\"\n />\n );\n },\n);\n\nexport type ComboboxEmptyProps = ComponentPropsWithoutRef<typeof BaseCombobox.Empty>;\nexport const ComboboxEmpty = forwardRef<HTMLDivElement, ComboboxEmptyProps>(function ComboboxEmpty(\n { className, ...props },\n ref,\n) {\n return (\n <BaseCombobox.Empty\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().empty, className)}\n data-slot=\"combobox-empty\"\n />\n );\n});\n\nexport type ComboboxClearProps = ComponentPropsWithoutRef<typeof BaseCombobox.Clear>;\nexport const ComboboxClear = forwardRef<HTMLButtonElement, ComboboxClearProps>(\n function ComboboxClear({ children = \"×\", className, ...props }, ref) {\n return (\n <BaseCombobox.Clear\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().clear, className)}\n data-slot=\"combobox-clear\"\n aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n >\n {children}\n </BaseCombobox.Clear>\n );\n },\n);\n\nexport type ComboboxLoadingProps = ComponentPropsWithoutRef<\"div\">;\nexport const ComboboxLoading = forwardRef<HTMLDivElement, ComboboxLoadingProps>(\n function ComboboxLoading({ children = \"Loading…\", className, ...props }, ref) {\n return (\n <div\n {...props}\n ref={ref}\n aria-live=\"polite\"\n className={cx(useComboboxStyles().loading, className)}\n data-slot=\"combobox-loading\"\n >\n {children}\n </div>\n );\n },\n);\n\nexport type ComboboxStatusProps = ComponentPropsWithoutRef<typeof BaseCombobox.Status>;\nexport const ComboboxStatus = forwardRef<HTMLDivElement, ComboboxStatusProps>(\n function ComboboxStatus({ className, ...props }, ref) {\n return (\n <BaseCombobox.Status\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().status, className)}\n data-slot=\"combobox-status\"\n />\n );\n },\n);\n\nexport type ComboboxArrowProps = ComponentPropsWithoutRef<typeof BaseCombobox.Arrow>;\nexport const ComboboxArrow = forwardRef<HTMLDivElement, ComboboxArrowProps>(function ComboboxArrow(\n { className, ...props },\n ref,\n) {\n return (\n <BaseCombobox.Arrow\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().arrow, className)}\n data-slot=\"combobox-arrow\"\n />\n );\n});\n\nexport const Combobox = {\n Root: ComboboxRoot,\n Label: ComboboxLabel,\n InputGroup: ComboboxInputGroup,\n Input: ComboboxInput,\n Trigger: ComboboxTrigger,\n Icon: ComboboxIcon,\n Value: ComboboxValue,\n Portal: ComboboxPortal,\n Positioner: ComboboxPositioner,\n Popup: ComboboxPopup,\n List: ComboboxList,\n Item: ComboboxItem,\n ItemIndicator: ComboboxItemIndicator,\n Group: ComboboxGroup,\n GroupLabel: ComboboxGroupLabel,\n Empty: ComboboxEmpty,\n Loading: ComboboxLoading,\n Clear: ComboboxClear,\n Status: ComboboxStatus,\n Arrow: ComboboxArrow,\n useFilter: BaseCombobox.useFilter,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"combobox.js","names":["ComboboxRoot","Field","BaseCombobox","BaseField","Combobox"],"sources":["../../../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { Combobox as BaseCombobox } from \"@base-ui/react/combobox\";\nimport { forwardRef, createContext, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { ComboboxRoot as BaseComboboxRoot } from \"@base-ui/react/combobox\";\nimport { Field as BaseField } from \"@base-ui/react/field\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { combobox } from \"../../styled-system/recipes\";\nimport { Field } from \"../field\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport type ComboboxSize = \"sm\" | \"md\" | \"lg\";\n\nconst ComboboxSizeContext = createContext<ComboboxSize>(\"md\");\n\nfunction useComboboxStyles() {\n return combobox({ size: useContext(ComboboxSizeContext) });\n}\n\nexport interface ComboboxRootProps<Value, Multiple extends boolean | undefined = false>\n extends Omit<BaseComboboxRoot.Props<Value, Multiple>, \"children\" | \"className\"> {\n /** Visual size shared by the input and trigger. */\n size?: ComboboxSize;\n /** Marks the field invalid when an external validator owns its state. */\n invalid?: boolean;\n /** Shows a loading state through the optional Loading slot. */\n loading?: boolean;\n /** Direct error content rendered through the surrounding Field context. */\n errors?: ReactNode | ReactNode[];\n children?: ReactNode;\n className?: string;\n}\n\n/**\n * A searchable Base UI combobox with Field integration. It supports the\n * controlled `value`/`onValueChange` and uncontrolled `defaultValue` APIs,\n * object values, grouped items, filtering and multiple selection.\n */\nexport function ComboboxRoot<Value = string, Multiple extends boolean | undefined = false>({\n children,\n className,\n errors,\n invalid,\n loading: _loading,\n name,\n size = \"md\",\n ...props\n}: ComboboxRootProps<Value, Multiple>) {\n const styles = combobox({ size });\n const fieldProps = {\n className: cx(styles.root, className),\n ...(errors === undefined ? {} : { errors }),\n ...(invalid === undefined ? {} : { invalid }),\n ...(name === undefined ? {} : { name }),\n };\n\n return (\n <ComboboxSizeContext.Provider value={size}>\n <Field {...fieldProps}>\n <BaseCombobox.Root {...props} {...(name === undefined ? {} : { name })}>\n {children}\n </BaseCombobox.Root>\n </Field>\n </ComboboxSizeContext.Provider>\n );\n}\n\nexport type ComboboxLabelProps = ComponentPropsWithoutRef<typeof BaseField.Label>;\n\nexport const ComboboxLabel = forwardRef<HTMLElement, ComboboxLabelProps>(function ComboboxLabel(\n { className, ...props },\n ref,\n) {\n return (\n <BaseField.Label\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().label, className)}\n data-slot=\"combobox-label\"\n />\n );\n});\n\nexport type ComboboxInputGroupProps = ComponentPropsWithoutRef<typeof BaseCombobox.InputGroup>;\n\nexport const ComboboxInputGroup = forwardRef<HTMLDivElement, ComboboxInputGroupProps>(\n function ComboboxInputGroup({ className, ...props }, ref) {\n return (\n <BaseCombobox.InputGroup\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().inputGroup, className)}\n data-slot=\"combobox-input-group\"\n />\n );\n },\n);\n\nexport type ComboboxInputProps = ComponentPropsWithoutRef<typeof BaseCombobox.Input>;\n\nexport const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(\n function ComboboxInput({ className, ...props }, ref) {\n return (\n <BaseCombobox.Input\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().input, className)}\n data-jaci-component=\"combobox\"\n data-slot=\"combobox-input\"\n />\n );\n },\n);\n\nexport type ComboboxTriggerProps = ComponentPropsWithoutRef<typeof BaseCombobox.Trigger>;\n\nexport const ComboboxTrigger = forwardRef<HTMLButtonElement, ComboboxTriggerProps>(\n function ComboboxTrigger({ className, ...props }, ref) {\n return (\n <BaseCombobox.Trigger\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().trigger, className)}\n data-slot=\"combobox-trigger\"\n />\n );\n },\n);\n\nexport type ComboboxIconProps = ComponentPropsWithoutRef<typeof BaseCombobox.Icon>;\n\nexport const ComboboxIcon = forwardRef<HTMLSpanElement, ComboboxIconProps>(function ComboboxIcon(\n { children = \"⌄\", className, ...props },\n ref,\n) {\n return (\n <BaseCombobox.Icon\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().icon, className)}\n data-slot=\"combobox-icon\"\n >\n {children}\n </BaseCombobox.Icon>\n );\n});\n\nexport type ComboboxValueProps = ComponentPropsWithoutRef<typeof BaseCombobox.Value>;\nexport const ComboboxValue = BaseCombobox.Value;\n\nexport function ComboboxPortal(props: ComponentPropsWithoutRef<typeof BaseCombobox.Portal>) {\n return <BaseCombobox.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type ComboboxPositionerProps = ComponentPropsWithoutRef<typeof BaseCombobox.Positioner>;\nexport const ComboboxPositioner = forwardRef<HTMLDivElement, ComboboxPositionerProps>(\n function ComboboxPositioner({ className, ...props }, ref) {\n return (\n <BaseCombobox.Positioner\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().positioner, className)}\n data-slot=\"combobox-positioner\"\n />\n );\n },\n);\n\nexport type ComboboxPopupProps = ComponentPropsWithoutRef<typeof BaseCombobox.Popup>;\nexport const ComboboxPopup = forwardRef<HTMLDivElement, ComboboxPopupProps>(function ComboboxPopup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseCombobox.Popup\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().popup, className)}\n data-slot=\"combobox-popup\"\n />\n );\n});\n\nexport type ComboboxListProps = ComponentPropsWithoutRef<typeof BaseCombobox.List>;\nexport const ComboboxList = forwardRef<HTMLDivElement, ComboboxListProps>(function ComboboxList(\n { className, ...props },\n ref,\n) {\n return (\n <BaseCombobox.List\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().list, className)}\n data-slot=\"combobox-list\"\n />\n );\n});\n\nexport type ComboboxItemProps = ComponentPropsWithoutRef<typeof BaseCombobox.Item>;\nexport const ComboboxItem = forwardRef<HTMLDivElement, ComboboxItemProps>(function ComboboxItem(\n { className, ...props },\n ref,\n) {\n return (\n <BaseCombobox.Item\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().item, className)}\n data-slot=\"combobox-item\"\n />\n );\n});\n\nexport type ComboboxItemIndicatorProps = ComponentPropsWithoutRef<\n typeof BaseCombobox.ItemIndicator\n>;\nexport const ComboboxItemIndicator = forwardRef<HTMLSpanElement, ComboboxItemIndicatorProps>(\n function ComboboxItemIndicator({ children = \"✓\", className, ...props }, ref) {\n return (\n <BaseCombobox.ItemIndicator\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().itemIndicator, className)}\n data-slot=\"combobox-item-indicator\"\n >\n {children}\n </BaseCombobox.ItemIndicator>\n );\n },\n);\n\nexport type ComboboxGroupProps = ComponentPropsWithoutRef<typeof BaseCombobox.Group>;\nexport const ComboboxGroup = forwardRef<HTMLDivElement, ComboboxGroupProps>(function ComboboxGroup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseCombobox.Group\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().group, className)}\n data-slot=\"combobox-group\"\n />\n );\n});\n\nexport type ComboboxGroupLabelProps = ComponentPropsWithoutRef<typeof BaseCombobox.GroupLabel>;\nexport const ComboboxGroupLabel = forwardRef<HTMLDivElement, ComboboxGroupLabelProps>(\n function ComboboxGroupLabel({ className, ...props }, ref) {\n return (\n <BaseCombobox.GroupLabel\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().groupLabel, className)}\n data-slot=\"combobox-group-label\"\n />\n );\n },\n);\n\nexport type ComboboxEmptyProps = ComponentPropsWithoutRef<typeof BaseCombobox.Empty>;\nexport const ComboboxEmpty = forwardRef<HTMLDivElement, ComboboxEmptyProps>(function ComboboxEmpty(\n { className, ...props },\n ref,\n) {\n return (\n <BaseCombobox.Empty\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().empty, className)}\n data-slot=\"combobox-empty\"\n />\n );\n});\n\nexport type ComboboxClearProps = ComponentPropsWithoutRef<typeof BaseCombobox.Clear>;\nexport const ComboboxClear = forwardRef<HTMLButtonElement, ComboboxClearProps>(\n function ComboboxClear({ children = \"×\", className, ...props }, ref) {\n return (\n <BaseCombobox.Clear\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().clear, className)}\n data-slot=\"combobox-clear\"\n aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n >\n {children}\n </BaseCombobox.Clear>\n );\n },\n);\n\nexport type ComboboxLoadingProps = ComponentPropsWithoutRef<\"div\">;\nexport const ComboboxLoading = forwardRef<HTMLDivElement, ComboboxLoadingProps>(\n function ComboboxLoading({ children = \"Loading…\", className, ...props }, ref) {\n return (\n <div\n {...props}\n ref={ref}\n aria-live=\"polite\"\n className={cx(useComboboxStyles().loading, className)}\n data-slot=\"combobox-loading\"\n >\n {children}\n </div>\n );\n },\n);\n\nexport type ComboboxStatusProps = ComponentPropsWithoutRef<typeof BaseCombobox.Status>;\nexport const ComboboxStatus = forwardRef<HTMLDivElement, ComboboxStatusProps>(\n function ComboboxStatus({ className, ...props }, ref) {\n return (\n <BaseCombobox.Status\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().status, className)}\n data-slot=\"combobox-status\"\n />\n );\n },\n);\n\nexport type ComboboxArrowProps = ComponentPropsWithoutRef<typeof BaseCombobox.Arrow>;\nexport const ComboboxArrow = forwardRef<HTMLDivElement, ComboboxArrowProps>(function ComboboxArrow(\n { className, ...props },\n ref,\n) {\n return (\n <BaseCombobox.Arrow\n {...props}\n ref={ref}\n className={withRecipeClassName(useComboboxStyles().arrow, className)}\n data-slot=\"combobox-arrow\"\n />\n );\n});\n\nexport const Combobox = {\n Root: ComboboxRoot,\n Label: ComboboxLabel,\n InputGroup: ComboboxInputGroup,\n Input: ComboboxInput,\n Trigger: ComboboxTrigger,\n Icon: ComboboxIcon,\n Value: ComboboxValue,\n Portal: ComboboxPortal,\n Positioner: ComboboxPositioner,\n Popup: ComboboxPopup,\n List: ComboboxList,\n Item: ComboboxItem,\n ItemIndicator: ComboboxItemIndicator,\n Group: ComboboxGroup,\n GroupLabel: ComboboxGroupLabel,\n Empty: ComboboxEmpty,\n Loading: ComboboxLoading,\n Clear: ComboboxClear,\n Status: ComboboxStatus,\n Arrow: ComboboxArrow,\n useFilter: BaseCombobox.useFilter,\n};\n"],"mappings":"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"}
|
|
@@ -17,14 +17,28 @@ function defaultFilter(value, search, keywords) {
|
|
|
17
17
|
if (!query) return true;
|
|
18
18
|
return [value, ...keywords].some((candidate) => candidate.toLocaleLowerCase().includes(query));
|
|
19
19
|
}
|
|
20
|
-
const CommandRoot = (0, react.forwardRef)(function CommandRoot({ children, className, defaultSearch = "", disabled = false, filter = defaultFilter, loading = false, onKeyDown, onSearchChange, search: controlledSearch, shouldFilter = true, loopFocus = true, ...props }, ref) {
|
|
20
|
+
const CommandRoot = (0, react.forwardRef)(function CommandRoot({ children, className, defaultSearch = "", disabled = false, filter = defaultFilter, loading = false, mode = "default", open: controlledOpen, defaultOpen = false, onOpenChange, closeOnSelect = true, onKeyDown, onSearchChange, search: controlledSearch, shouldFilter = true, loopFocus = true, ...props }, ref) {
|
|
21
21
|
const [uncontrolledSearch, setUncontrolledSearch] = (0, react.useState)(defaultSearch);
|
|
22
|
+
const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(defaultOpen);
|
|
22
23
|
const [highlighted, setHighlighted] = (0, react.useState)(null);
|
|
23
24
|
const [, setVersion] = (0, react.useState)(0);
|
|
24
25
|
const itemsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
|
|
26
|
+
const rootElementRef = (0, react.useRef)(null);
|
|
25
27
|
const listId = (0, react.useId)();
|
|
26
28
|
const search = controlledSearch ?? uncontrolledSearch;
|
|
27
|
-
const
|
|
29
|
+
const open = mode === "default" ? true : controlledOpen ?? uncontrolledOpen;
|
|
30
|
+
const styles = require_command.command({ mode });
|
|
31
|
+
const setOpen = (0, react.useCallback)((nextOpen) => {
|
|
32
|
+
if (mode !== "dropdown" || disabled) return;
|
|
33
|
+
if (controlledOpen === void 0) setUncontrolledOpen(nextOpen);
|
|
34
|
+
onOpenChange?.(nextOpen);
|
|
35
|
+
}, [
|
|
36
|
+
controlledOpen,
|
|
37
|
+
disabled,
|
|
38
|
+
mode,
|
|
39
|
+
onOpenChange
|
|
40
|
+
]);
|
|
41
|
+
const close = (0, react.useCallback)(() => setOpen(false), [setOpen]);
|
|
28
42
|
const items = Array.from(itemsRef.current.values());
|
|
29
43
|
const setSearch = (0, react.useCallback)((next) => {
|
|
30
44
|
if (controlledSearch === void 0) setUncontrolledSearch(next);
|
|
@@ -50,8 +64,28 @@ const CommandRoot = (0, react.forwardRef)(function CommandRoot({ children, class
|
|
|
50
64
|
}, []);
|
|
51
65
|
const selectItem = (0, react.useCallback)((id) => {
|
|
52
66
|
const item = itemsRef.current.get(id);
|
|
53
|
-
if (item && !item.disabled && matches(item))
|
|
54
|
-
|
|
67
|
+
if (item && !item.disabled && matches(item)) {
|
|
68
|
+
item.onSelect?.(item.value);
|
|
69
|
+
if (closeOnSelect) close();
|
|
70
|
+
}
|
|
71
|
+
}, [
|
|
72
|
+
close,
|
|
73
|
+
closeOnSelect,
|
|
74
|
+
matches
|
|
75
|
+
]);
|
|
76
|
+
(0, react.useEffect)(() => {
|
|
77
|
+
if (mode !== "dropdown" || !open) return;
|
|
78
|
+
const handleOutsidePress = (event) => {
|
|
79
|
+
const target = event.target;
|
|
80
|
+
if (target instanceof Node && !rootElementRef.current?.contains(target)) close();
|
|
81
|
+
};
|
|
82
|
+
document.addEventListener("pointerdown", handleOutsidePress);
|
|
83
|
+
return () => document.removeEventListener("pointerdown", handleOutsidePress);
|
|
84
|
+
}, [
|
|
85
|
+
close,
|
|
86
|
+
mode,
|
|
87
|
+
open
|
|
88
|
+
]);
|
|
55
89
|
(0, react.useEffect)(() => {
|
|
56
90
|
if (!visibleItems.some((item) => item.id === highlighted)) setHighlighted(visibleItems[0]?.id ?? null);
|
|
57
91
|
}, [highlighted, visibleItems]);
|
|
@@ -71,8 +105,12 @@ const CommandRoot = (0, react.forwardRef)(function CommandRoot({ children, class
|
|
|
71
105
|
} else if (event.key === "Enter" && highlighted) {
|
|
72
106
|
event.preventDefault();
|
|
73
107
|
selectItem(highlighted);
|
|
74
|
-
} else if (event.key === "Escape")
|
|
108
|
+
} else if (event.key === "Escape") {
|
|
109
|
+
event.preventDefault();
|
|
110
|
+
close();
|
|
111
|
+
}
|
|
75
112
|
}, [
|
|
113
|
+
close,
|
|
76
114
|
disabled,
|
|
77
115
|
highlighted,
|
|
78
116
|
loopFocus,
|
|
@@ -94,7 +132,11 @@ const CommandRoot = (0, react.forwardRef)(function CommandRoot({ children, class
|
|
|
94
132
|
registerItem,
|
|
95
133
|
setItemElement,
|
|
96
134
|
setHighlighted,
|
|
97
|
-
selectItem
|
|
135
|
+
selectItem,
|
|
136
|
+
mode,
|
|
137
|
+
open,
|
|
138
|
+
setOpen,
|
|
139
|
+
closeOnSelect
|
|
98
140
|
}), [
|
|
99
141
|
highlighted,
|
|
100
142
|
disabled,
|
|
@@ -108,27 +150,35 @@ const CommandRoot = (0, react.forwardRef)(function CommandRoot({ children, class
|
|
|
108
150
|
selectItem,
|
|
109
151
|
setItemElement,
|
|
110
152
|
setSearch,
|
|
111
|
-
shouldFilter
|
|
153
|
+
shouldFilter,
|
|
154
|
+
mode,
|
|
155
|
+
open,
|
|
156
|
+
setOpen,
|
|
157
|
+
closeOnSelect
|
|
112
158
|
]);
|
|
113
159
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandContext.Provider, {
|
|
114
160
|
value: context,
|
|
115
161
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
116
162
|
...props,
|
|
117
163
|
ref: (node) => {
|
|
164
|
+
rootElementRef.current = node;
|
|
118
165
|
if (typeof ref === "function") ref(node);
|
|
119
166
|
else if (ref) ref.current = node;
|
|
120
167
|
},
|
|
121
168
|
className: require_cx.cx(styles.root, className),
|
|
122
169
|
"data-disabled": disabled || void 0,
|
|
123
170
|
"data-jaci-component": "command",
|
|
171
|
+
"data-mode": mode,
|
|
172
|
+
"data-open": open || void 0,
|
|
124
173
|
"data-slot": "command",
|
|
125
174
|
"aria-disabled": disabled || void 0,
|
|
126
175
|
children
|
|
127
176
|
})
|
|
128
177
|
});
|
|
129
178
|
});
|
|
130
|
-
const CommandInput = (0, react.forwardRef)(function CommandInput({ className, onChange, onKeyDown, ...props }, ref) {
|
|
131
|
-
const { disabled, handleKeyDown, highlighted, listId, search, setHighlighted, setSearch } = useCommandContext();
|
|
179
|
+
const CommandInput = (0, react.forwardRef)(function CommandInput({ className, onChange, onClick, onFocus, onKeyDown, ...props }, ref) {
|
|
180
|
+
const { disabled, handleKeyDown, highlighted, listId, mode, open, search, setHighlighted, setOpen, setSearch } = useCommandContext();
|
|
181
|
+
const styles = require_command.command({ mode });
|
|
132
182
|
const handleChange = (event) => {
|
|
133
183
|
onChange?.(event);
|
|
134
184
|
const next = event.target.value;
|
|
@@ -142,13 +192,22 @@ const CommandInput = (0, react.forwardRef)(function CommandInput({ className, on
|
|
|
142
192
|
"aria-controls": listId,
|
|
143
193
|
role: "combobox",
|
|
144
194
|
"aria-haspopup": "listbox",
|
|
145
|
-
"aria-expanded":
|
|
146
|
-
className: require_cx.cx(
|
|
195
|
+
"aria-expanded": open,
|
|
196
|
+
className: require_cx.cx(styles.input, className),
|
|
147
197
|
"data-slot": "command-input",
|
|
198
|
+
"data-mode": mode,
|
|
148
199
|
disabled: disabled || props.disabled,
|
|
149
200
|
onChange: (event) => {
|
|
150
201
|
handleChange(event);
|
|
151
202
|
},
|
|
203
|
+
onClick: (event) => {
|
|
204
|
+
onClick?.(event);
|
|
205
|
+
if (!event.defaultPrevented && mode === "dropdown" && !disabled && !props.disabled) setOpen(true);
|
|
206
|
+
},
|
|
207
|
+
onFocus: (event) => {
|
|
208
|
+
onFocus?.(event);
|
|
209
|
+
if (!event.defaultPrevented && mode === "dropdown" && !disabled && !props.disabled) setOpen(true);
|
|
210
|
+
},
|
|
152
211
|
onKeyDown: (event) => {
|
|
153
212
|
onKeyDown?.(event);
|
|
154
213
|
handleKeyDown(event);
|
|
@@ -157,13 +216,17 @@ const CommandInput = (0, react.forwardRef)(function CommandInput({ className, on
|
|
|
157
216
|
});
|
|
158
217
|
});
|
|
159
218
|
const CommandList = (0, react.forwardRef)(function CommandList({ className, id, ...props }, ref) {
|
|
160
|
-
const { listId } = useCommandContext();
|
|
219
|
+
const { listId, mode, open } = useCommandContext();
|
|
220
|
+
const styles = require_command.command({ mode });
|
|
161
221
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
162
222
|
...props,
|
|
163
223
|
ref,
|
|
164
224
|
id: id ?? listId,
|
|
165
|
-
className: require_cx.cx(
|
|
225
|
+
className: require_cx.cx(styles.list, className),
|
|
226
|
+
"aria-hidden": mode === "dropdown" && !open ? true : void 0,
|
|
227
|
+
"data-open": open || void 0,
|
|
166
228
|
"data-slot": "command-list",
|
|
229
|
+
hidden: mode === "dropdown" && !open ? true : void 0,
|
|
167
230
|
role: "listbox"
|
|
168
231
|
});
|
|
169
232
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command.cjs","names":["command","cx"],"sources":["../../../src/components/command/command.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type { ChangeEvent, ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\n\nimport { command } from \"../../styled-system/recipes\";\nimport { cx } from \"../../styled-system/css\";\n\nexport type CommandFilter = (value: string, search: string, keywords: readonly string[]) => boolean;\n\ninterface CommandItemRecord {\n id: string;\n value: string;\n keywords: readonly string[];\n disabled: boolean;\n groupId: string | undefined;\n onSelect: ((value: string) => void) | undefined;\n element: HTMLDivElement | null;\n}\n\ninterface CommandContextValue {\n search: string;\n setSearch: (search: string) => void;\n loading: boolean;\n shouldFilter: boolean;\n items: readonly CommandItemRecord[];\n highlighted: string | null;\n listId: string;\n matches: (item: Pick<CommandItemRecord, \"value\" | \"keywords\">) => boolean;\n handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;\n registerItem: (item: CommandItemRecord) => () => void;\n setItemElement: (id: string, element: HTMLDivElement | null) => void;\n setHighlighted: (value: string | null) => void;\n selectItem: (id: string) => void;\n disabled: boolean;\n}\n\nconst CommandContext = createContext<CommandContextValue | null>(null);\nconst CommandGroupContext = createContext<string | undefined>(undefined);\nconst EMPTY_KEYWORDS: readonly string[] = [];\n\nfunction useCommandContext() {\n const context = useContext(CommandContext);\n if (!context) throw new Error(\"Command parts must be rendered inside Command.Root.\");\n return context;\n}\n\nfunction defaultFilter(value: string, search: string, keywords: readonly string[]) {\n const query = search.trim().toLocaleLowerCase();\n if (!query) return true;\n return [value, ...keywords].some((candidate) => candidate.toLocaleLowerCase().includes(query));\n}\n\nexport interface CommandRootProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n search?: string;\n defaultSearch?: string;\n onSearchChange?: (search: string) => void;\n filter?: CommandFilter;\n shouldFilter?: boolean;\n loopFocus?: boolean;\n disabled?: boolean;\n loading?: boolean;\n children?: ReactNode;\n}\n\nexport const CommandRoot = forwardRef<HTMLDivElement, CommandRootProps>(function CommandRoot(\n {\n children,\n className,\n defaultSearch = \"\",\n disabled = false,\n filter = defaultFilter,\n loading = false,\n onKeyDown,\n onSearchChange,\n search: controlledSearch,\n shouldFilter = true,\n loopFocus = true,\n ...props\n },\n ref,\n) {\n const [uncontrolledSearch, setUncontrolledSearch] = useState(defaultSearch);\n const [highlighted, setHighlighted] = useState<string | null>(null);\n const [, setVersion] = useState(0);\n const itemsRef = useRef(new Map<string, CommandItemRecord>());\n const listId = useId();\n const search = controlledSearch ?? uncontrolledSearch;\n const styles = command();\n\n const items = Array.from(itemsRef.current.values());\n const setSearch = useCallback(\n (next: string) => {\n if (controlledSearch === undefined) setUncontrolledSearch(next);\n onSearchChange?.(next);\n },\n [controlledSearch, onSearchChange],\n );\n const matches = useCallback(\n (item: Pick<CommandItemRecord, \"value\" | \"keywords\">) =>\n !shouldFilter || filter(item.value, search, item.keywords),\n [filter, search, shouldFilter],\n );\n const visibleItems = useMemo(\n () => items.filter((item) => !item.disabled && matches(item)),\n [items, matches],\n );\n\n const registerItem = useCallback((item: CommandItemRecord) => {\n itemsRef.current.set(item.id, item);\n setVersion((current) => current + 1);\n return () => {\n itemsRef.current.delete(item.id);\n setVersion((current) => current + 1);\n };\n }, []);\n\n const setItemElement = useCallback((id: string, element: HTMLDivElement | null) => {\n const item = itemsRef.current.get(id);\n if (item) item.element = element;\n }, []);\n\n const selectItem = useCallback(\n (id: string) => {\n const item = itemsRef.current.get(id);\n if (item && !item.disabled && matches(item)) item.onSelect?.(item.value);\n },\n [matches],\n );\n\n useEffect(() => {\n if (!visibleItems.some((item) => item.id === highlighted)) {\n setHighlighted(visibleItems[0]?.id ?? null);\n }\n }, [highlighted, visibleItems]);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n onKeyDown?.(event as KeyboardEvent<HTMLDivElement>);\n if (event.defaultPrevented) return;\n if (disabled) return;\n const currentIndex = visibleItems.findIndex((item) => item.id === highlighted);\n if ((event.key === \"ArrowDown\" || event.key === \"ArrowUp\") && visibleItems.length > 0) {\n event.preventDefault();\n const direction = event.key === \"ArrowDown\" ? 1 : -1;\n let nextIndex = currentIndex + direction;\n if (loopFocus) nextIndex = (nextIndex + visibleItems.length) % visibleItems.length;\n if (nextIndex >= 0 && nextIndex < visibleItems.length) {\n setHighlighted(visibleItems[nextIndex]?.id ?? null);\n }\n } else if (event.key === \"Home\" || event.key === \"End\") {\n event.preventDefault();\n setHighlighted((event.key === \"Home\" ? visibleItems[0] : visibleItems.at(-1))?.id ?? null);\n } else if (event.key === \"Enter\" && highlighted) {\n event.preventDefault();\n selectItem(highlighted);\n } else if (event.key === \"Escape\") {\n event.preventDefault();\n }\n },\n [disabled, highlighted, loopFocus, onKeyDown, selectItem, visibleItems],\n );\n\n const context = useMemo<CommandContextValue>(\n () => ({\n search,\n setSearch,\n disabled,\n handleKeyDown,\n loading,\n shouldFilter,\n items,\n highlighted,\n listId,\n matches,\n registerItem,\n setItemElement,\n setHighlighted,\n selectItem,\n }),\n [\n highlighted,\n disabled,\n handleKeyDown,\n items,\n listId,\n loading,\n matches,\n registerItem,\n search,\n selectItem,\n setItemElement,\n setSearch,\n shouldFilter,\n ],\n );\n\n return (\n <CommandContext.Provider value={context}>\n <div\n {...props}\n ref={(node) => {\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n className={cx(styles.root, className)}\n data-disabled={disabled || undefined}\n data-jaci-component=\"command\"\n data-slot=\"command\"\n aria-disabled={disabled || undefined}\n >\n {children}\n </div>\n </CommandContext.Provider>\n );\n});\n\nexport type CommandInputProps = ComponentPropsWithoutRef<\"input\">;\nexport const CommandInput = forwardRef<HTMLInputElement, CommandInputProps>(function CommandInput(\n { className, onChange, onKeyDown, ...props },\n ref,\n) {\n const { disabled, handleKeyDown, highlighted, listId, search, setHighlighted, setSearch } =\n useCommandContext();\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n const next = event.target.value;\n setHighlighted(null);\n setSearch(next);\n };\n\n return (\n <input\n {...props}\n ref={ref}\n aria-activedescendant={highlighted ?? undefined}\n aria-controls={listId}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded=\"true\"\n className={cx(command().input, className)}\n data-slot=\"command-input\"\n disabled={disabled || props.disabled}\n onChange={(event) => {\n handleChange(event);\n }}\n onKeyDown={(event) => {\n onKeyDown?.(event);\n handleKeyDown(event);\n }}\n value={search}\n />\n );\n});\n\nexport type CommandListProps = ComponentPropsWithoutRef<\"div\">;\nexport const CommandList = forwardRef<HTMLDivElement, CommandListProps>(function CommandList(\n { className, id, ...props },\n ref,\n) {\n const { listId } = useCommandContext();\n return (\n <div\n {...props}\n ref={ref}\n id={id ?? listId}\n className={cx(command().list, className)}\n data-slot=\"command-list\"\n role=\"listbox\"\n />\n );\n});\n\nexport interface CommandGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n heading?: ReactNode;\n}\nexport const CommandGroup = forwardRef<HTMLDivElement, CommandGroupProps>(function CommandGroup(\n { children, className, heading, ...props },\n ref,\n) {\n const context = useCommandContext();\n const groupId = useId();\n const hasVisibleItems = context.items.some(\n (item) => item.groupId === groupId && !item.disabled && context.matches(item),\n );\n return (\n <CommandGroupContext.Provider value={groupId}>\n <div\n {...props}\n ref={ref}\n aria-hidden={!hasVisibleItems || undefined}\n className={cx(command().group, className)}\n data-slot=\"command-group\"\n hidden={!hasVisibleItems}\n >\n {heading ? (\n <div className={command().groupHeading} data-slot=\"command-group-heading\">\n {heading}\n </div>\n ) : null}\n {children}\n </div>\n </CommandGroupContext.Provider>\n );\n});\n\nexport interface CommandItemProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n value: string;\n keywords?: readonly string[];\n disabled?: boolean;\n onSelect?: (value: string) => void;\n}\nexport const CommandItem = forwardRef<HTMLDivElement, CommandItemProps>(function CommandItem(\n {\n children,\n className,\n disabled = false,\n keywords: itemKeywords,\n onClick,\n onMouseEnter,\n onSelect,\n value,\n ...props\n },\n ref,\n) {\n const context = useCommandContext();\n const groupId = useContext(CommandGroupContext);\n const id = `command-item-${useId().replace(/:/g, \"\")}`;\n const keywords = itemKeywords ?? EMPTY_KEYWORDS;\n const visible = context.matches({ value, keywords });\n\n useEffect(\n () =>\n context.registerItem({\n id,\n value,\n keywords,\n disabled,\n groupId,\n onSelect,\n element: null,\n }),\n [context.registerItem, disabled, groupId, id, keywords, onSelect, value],\n );\n\n if (!visible) {\n return <div aria-hidden=\"true\" hidden ref={ref} data-slot=\"command-item\" />;\n }\n\n return (\n <div\n {...props}\n ref={(node) => {\n context.setItemElement(id, node);\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n aria-disabled={disabled || undefined}\n aria-selected={context.highlighted === id}\n className={cx(command().item, className)}\n data-disabled={disabled || undefined}\n data-highlighted={context.highlighted === id || undefined}\n data-slot=\"command-item\"\n id={id}\n onClick={(event) => {\n onClick?.(event);\n if (!event.defaultPrevented && !disabled) context.selectItem(id);\n }}\n onMouseEnter={(event) => {\n onMouseEnter?.(event);\n if (!disabled) context.setHighlighted(id);\n }}\n onKeyDown={(event) => {\n if ((event.key === \"Enter\" || event.key === \" \") && !disabled) {\n event.preventDefault();\n context.selectItem(id);\n }\n }}\n role=\"option\"\n tabIndex={-1}\n >\n {children}\n </div>\n );\n});\n\nexport type CommandItemIndicatorProps = ComponentPropsWithoutRef<\"span\">;\nexport const CommandItemIndicator = forwardRef<HTMLSpanElement, CommandItemIndicatorProps>(\n function CommandItemIndicator({ children = \"✓\", className, ...props }, ref) {\n return (\n <span\n {...props}\n ref={ref}\n className={cx(command().itemIndicator, className)}\n data-slot=\"command-item-indicator\"\n >\n {children}\n </span>\n );\n },\n);\n\nexport type CommandEmptyProps = ComponentPropsWithoutRef<\"div\">;\nexport const CommandEmpty = forwardRef<HTMLDivElement, CommandEmptyProps>(function CommandEmpty(\n { className, ...props },\n ref,\n) {\n const context = useCommandContext();\n if (context.loading || context.items.some((item) => !item.disabled && context.matches(item)))\n return null;\n return (\n <div\n {...props}\n ref={ref}\n className={cx(command().empty, className)}\n aria-live=\"polite\"\n aria-disabled=\"true\"\n data-slot=\"command-empty\"\n role=\"option\"\n tabIndex={-1}\n />\n );\n});\n\nexport type CommandLoadingProps = ComponentPropsWithoutRef<\"div\">;\nexport const CommandLoading = forwardRef<HTMLDivElement, CommandLoadingProps>(\n function CommandLoading({ className, ...props }, ref) {\n const context = useCommandContext();\n if (!context.loading) return null;\n return (\n <div\n {...props}\n ref={ref}\n className={cx(command().loading, className)}\n aria-live=\"polite\"\n aria-disabled=\"true\"\n data-slot=\"command-loading\"\n role=\"option\"\n tabIndex={-1}\n />\n );\n },\n);\n\nexport type CommandSeparatorProps = ComponentPropsWithoutRef<\"hr\">;\nexport const CommandSeparator = forwardRef<HTMLHRElement, CommandSeparatorProps>(\n function CommandSeparator({ className, ...props }, ref) {\n return (\n <hr\n {...props}\n ref={ref}\n role=\"presentation\"\n className={cx(command().separator, className)}\n data-slot=\"command-separator\"\n />\n );\n },\n);\n\nexport const Command = {\n Root: CommandRoot,\n Input: CommandInput,\n List: CommandList,\n Group: CommandGroup,\n Item: CommandItem,\n ItemIndicator: CommandItemIndicator,\n Empty: CommandEmpty,\n Loading: CommandLoading,\n Separator: CommandSeparator,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"command.cjs","names":["command","cx"],"sources":["../../../src/components/command/command.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type { ChangeEvent, ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\n\nimport { command } from \"../../styled-system/recipes\";\nimport { cx } from \"../../styled-system/css\";\n\nexport type CommandFilter = (value: string, search: string, keywords: readonly string[]) => boolean;\nexport type CommandMode = \"default\" | \"dropdown\";\n\ninterface CommandItemRecord {\n id: string;\n value: string;\n keywords: readonly string[];\n disabled: boolean;\n groupId: string | undefined;\n onSelect: ((value: string) => void) | undefined;\n element: HTMLDivElement | null;\n}\n\ninterface CommandContextValue {\n search: string;\n setSearch: (search: string) => void;\n loading: boolean;\n shouldFilter: boolean;\n items: readonly CommandItemRecord[];\n highlighted: string | null;\n listId: string;\n matches: (item: Pick<CommandItemRecord, \"value\" | \"keywords\">) => boolean;\n handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;\n registerItem: (item: CommandItemRecord) => () => void;\n setItemElement: (id: string, element: HTMLDivElement | null) => void;\n setHighlighted: (value: string | null) => void;\n selectItem: (id: string) => void;\n disabled: boolean;\n mode: CommandMode;\n open: boolean;\n setOpen: (open: boolean) => void;\n closeOnSelect: boolean;\n}\n\nconst CommandContext = createContext<CommandContextValue | null>(null);\nconst CommandGroupContext = createContext<string | undefined>(undefined);\nconst EMPTY_KEYWORDS: readonly string[] = [];\n\nfunction useCommandContext() {\n const context = useContext(CommandContext);\n if (!context) throw new Error(\"Command parts must be rendered inside Command.Root.\");\n return context;\n}\n\nfunction defaultFilter(value: string, search: string, keywords: readonly string[]) {\n const query = search.trim().toLocaleLowerCase();\n if (!query) return true;\n return [value, ...keywords].some((candidate) => candidate.toLocaleLowerCase().includes(query));\n}\n\nexport interface CommandRootProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n search?: string;\n defaultSearch?: string;\n onSearchChange?: (search: string) => void;\n filter?: CommandFilter;\n shouldFilter?: boolean;\n loopFocus?: boolean;\n disabled?: boolean;\n loading?: boolean;\n mode?: CommandMode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n closeOnSelect?: boolean;\n children?: ReactNode;\n}\n\nexport const CommandRoot = forwardRef<HTMLDivElement, CommandRootProps>(function CommandRoot(\n {\n children,\n className,\n defaultSearch = \"\",\n disabled = false,\n filter = defaultFilter,\n loading = false,\n mode = \"default\",\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n closeOnSelect = true,\n onKeyDown,\n onSearchChange,\n search: controlledSearch,\n shouldFilter = true,\n loopFocus = true,\n ...props\n },\n ref,\n) {\n const [uncontrolledSearch, setUncontrolledSearch] = useState(defaultSearch);\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n const [highlighted, setHighlighted] = useState<string | null>(null);\n const [, setVersion] = useState(0);\n const itemsRef = useRef(new Map<string, CommandItemRecord>());\n const rootElementRef = useRef<HTMLDivElement | null>(null);\n const listId = useId();\n const search = controlledSearch ?? uncontrolledSearch;\n const open = mode === \"default\" ? true : (controlledOpen ?? uncontrolledOpen);\n const styles = command({ mode });\n\n const setOpen = useCallback(\n (nextOpen: boolean) => {\n if (mode !== \"dropdown\" || disabled) return;\n if (controlledOpen === undefined) setUncontrolledOpen(nextOpen);\n onOpenChange?.(nextOpen);\n },\n [controlledOpen, disabled, mode, onOpenChange],\n );\n const close = useCallback(() => setOpen(false), [setOpen]);\n\n const items = Array.from(itemsRef.current.values());\n const setSearch = useCallback(\n (next: string) => {\n if (controlledSearch === undefined) setUncontrolledSearch(next);\n onSearchChange?.(next);\n },\n [controlledSearch, onSearchChange],\n );\n const matches = useCallback(\n (item: Pick<CommandItemRecord, \"value\" | \"keywords\">) =>\n !shouldFilter || filter(item.value, search, item.keywords),\n [filter, search, shouldFilter],\n );\n const visibleItems = useMemo(\n () => items.filter((item) => !item.disabled && matches(item)),\n [items, matches],\n );\n\n const registerItem = useCallback((item: CommandItemRecord) => {\n itemsRef.current.set(item.id, item);\n setVersion((current) => current + 1);\n return () => {\n itemsRef.current.delete(item.id);\n setVersion((current) => current + 1);\n };\n }, []);\n\n const setItemElement = useCallback((id: string, element: HTMLDivElement | null) => {\n const item = itemsRef.current.get(id);\n if (item) item.element = element;\n }, []);\n\n const selectItem = useCallback(\n (id: string) => {\n const item = itemsRef.current.get(id);\n if (item && !item.disabled && matches(item)) {\n item.onSelect?.(item.value);\n if (closeOnSelect) close();\n }\n },\n [close, closeOnSelect, matches],\n );\n\n useEffect(() => {\n if (mode !== \"dropdown\" || !open) return;\n\n const handleOutsidePress = (event: PointerEvent) => {\n const target = event.target;\n if (target instanceof Node && !rootElementRef.current?.contains(target)) close();\n };\n\n document.addEventListener(\"pointerdown\", handleOutsidePress);\n return () => document.removeEventListener(\"pointerdown\", handleOutsidePress);\n }, [close, mode, open]);\n\n useEffect(() => {\n if (!visibleItems.some((item) => item.id === highlighted)) {\n setHighlighted(visibleItems[0]?.id ?? null);\n }\n }, [highlighted, visibleItems]);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n onKeyDown?.(event as KeyboardEvent<HTMLDivElement>);\n if (event.defaultPrevented) return;\n if (disabled) return;\n const currentIndex = visibleItems.findIndex((item) => item.id === highlighted);\n if ((event.key === \"ArrowDown\" || event.key === \"ArrowUp\") && visibleItems.length > 0) {\n event.preventDefault();\n const direction = event.key === \"ArrowDown\" ? 1 : -1;\n let nextIndex = currentIndex + direction;\n if (loopFocus) nextIndex = (nextIndex + visibleItems.length) % visibleItems.length;\n if (nextIndex >= 0 && nextIndex < visibleItems.length) {\n setHighlighted(visibleItems[nextIndex]?.id ?? null);\n }\n } else if (event.key === \"Home\" || event.key === \"End\") {\n event.preventDefault();\n setHighlighted((event.key === \"Home\" ? visibleItems[0] : visibleItems.at(-1))?.id ?? null);\n } else if (event.key === \"Enter\" && highlighted) {\n event.preventDefault();\n selectItem(highlighted);\n } else if (event.key === \"Escape\") {\n event.preventDefault();\n close();\n }\n },\n [close, disabled, highlighted, loopFocus, onKeyDown, selectItem, visibleItems],\n );\n\n const context = useMemo<CommandContextValue>(\n () => ({\n search,\n setSearch,\n disabled,\n handleKeyDown,\n loading,\n shouldFilter,\n items,\n highlighted,\n listId,\n matches,\n registerItem,\n setItemElement,\n setHighlighted,\n selectItem,\n mode,\n open,\n setOpen,\n closeOnSelect,\n }),\n [\n highlighted,\n disabled,\n handleKeyDown,\n items,\n listId,\n loading,\n matches,\n registerItem,\n search,\n selectItem,\n setItemElement,\n setSearch,\n shouldFilter,\n mode,\n open,\n setOpen,\n closeOnSelect,\n ],\n );\n\n return (\n <CommandContext.Provider value={context}>\n <div\n {...props}\n ref={(node) => {\n rootElementRef.current = node;\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n className={cx(styles.root, className)}\n data-disabled={disabled || undefined}\n data-jaci-component=\"command\"\n data-mode={mode}\n data-open={open || undefined}\n data-slot=\"command\"\n aria-disabled={disabled || undefined}\n >\n {children}\n </div>\n </CommandContext.Provider>\n );\n});\n\nexport type CommandInputProps = ComponentPropsWithoutRef<\"input\">;\nexport const CommandInput = forwardRef<HTMLInputElement, CommandInputProps>(function CommandInput(\n { className, onChange, onClick, onFocus, onKeyDown, ...props },\n ref,\n) {\n const {\n disabled,\n handleKeyDown,\n highlighted,\n listId,\n mode,\n open,\n search,\n setHighlighted,\n setOpen,\n setSearch,\n } = useCommandContext();\n const styles = command({ mode });\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n const next = event.target.value;\n setHighlighted(null);\n setSearch(next);\n };\n\n return (\n <input\n {...props}\n ref={ref}\n aria-activedescendant={highlighted ?? undefined}\n aria-controls={listId}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n className={cx(styles.input, className)}\n data-slot=\"command-input\"\n data-mode={mode}\n disabled={disabled || props.disabled}\n onChange={(event) => {\n handleChange(event);\n }}\n onClick={(event) => {\n onClick?.(event);\n if (!event.defaultPrevented && mode === \"dropdown\" && !disabled && !props.disabled)\n setOpen(true);\n }}\n onFocus={(event) => {\n onFocus?.(event);\n if (!event.defaultPrevented && mode === \"dropdown\" && !disabled && !props.disabled)\n setOpen(true);\n }}\n onKeyDown={(event) => {\n onKeyDown?.(event);\n handleKeyDown(event);\n }}\n value={search}\n />\n );\n});\n\nexport type CommandListProps = ComponentPropsWithoutRef<\"div\">;\nexport const CommandList = forwardRef<HTMLDivElement, CommandListProps>(function CommandList(\n { className, id, ...props },\n ref,\n) {\n const { listId, mode, open } = useCommandContext();\n const styles = command({ mode });\n return (\n <div\n {...props}\n ref={ref}\n id={id ?? listId}\n className={cx(styles.list, className)}\n aria-hidden={mode === \"dropdown\" && !open ? true : undefined}\n data-open={open || undefined}\n data-slot=\"command-list\"\n hidden={mode === \"dropdown\" && !open ? true : undefined}\n role=\"listbox\"\n />\n );\n});\n\nexport interface CommandGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n heading?: ReactNode;\n}\nexport const CommandGroup = forwardRef<HTMLDivElement, CommandGroupProps>(function CommandGroup(\n { children, className, heading, ...props },\n ref,\n) {\n const context = useCommandContext();\n const groupId = useId();\n const hasVisibleItems = context.items.some(\n (item) => item.groupId === groupId && !item.disabled && context.matches(item),\n );\n return (\n <CommandGroupContext.Provider value={groupId}>\n <div\n {...props}\n ref={ref}\n aria-hidden={!hasVisibleItems || undefined}\n className={cx(command().group, className)}\n data-slot=\"command-group\"\n hidden={!hasVisibleItems}\n >\n {heading ? (\n <div className={command().groupHeading} data-slot=\"command-group-heading\">\n {heading}\n </div>\n ) : null}\n {children}\n </div>\n </CommandGroupContext.Provider>\n );\n});\n\nexport interface CommandItemProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n value: string;\n keywords?: readonly string[];\n disabled?: boolean;\n onSelect?: (value: string) => void;\n}\nexport const CommandItem = forwardRef<HTMLDivElement, CommandItemProps>(function CommandItem(\n {\n children,\n className,\n disabled = false,\n keywords: itemKeywords,\n onClick,\n onMouseEnter,\n onSelect,\n value,\n ...props\n },\n ref,\n) {\n const context = useCommandContext();\n const groupId = useContext(CommandGroupContext);\n const id = `command-item-${useId().replace(/:/g, \"\")}`;\n const keywords = itemKeywords ?? EMPTY_KEYWORDS;\n const visible = context.matches({ value, keywords });\n\n useEffect(\n () =>\n context.registerItem({\n id,\n value,\n keywords,\n disabled,\n groupId,\n onSelect,\n element: null,\n }),\n [context.registerItem, disabled, groupId, id, keywords, onSelect, value],\n );\n\n if (!visible) {\n return <div aria-hidden=\"true\" hidden ref={ref} data-slot=\"command-item\" />;\n }\n\n return (\n <div\n {...props}\n ref={(node) => {\n context.setItemElement(id, node);\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n aria-disabled={disabled || undefined}\n aria-selected={context.highlighted === id}\n className={cx(command().item, className)}\n data-disabled={disabled || undefined}\n data-highlighted={context.highlighted === id || undefined}\n data-slot=\"command-item\"\n id={id}\n onClick={(event) => {\n onClick?.(event);\n if (!event.defaultPrevented && !disabled) context.selectItem(id);\n }}\n onMouseEnter={(event) => {\n onMouseEnter?.(event);\n if (!disabled) context.setHighlighted(id);\n }}\n onKeyDown={(event) => {\n if ((event.key === \"Enter\" || event.key === \" \") && !disabled) {\n event.preventDefault();\n context.selectItem(id);\n }\n }}\n role=\"option\"\n tabIndex={-1}\n >\n {children}\n </div>\n );\n});\n\nexport type CommandItemIndicatorProps = ComponentPropsWithoutRef<\"span\">;\nexport const CommandItemIndicator = forwardRef<HTMLSpanElement, CommandItemIndicatorProps>(\n function CommandItemIndicator({ children = \"✓\", className, ...props }, ref) {\n return (\n <span\n {...props}\n ref={ref}\n className={cx(command().itemIndicator, className)}\n data-slot=\"command-item-indicator\"\n >\n {children}\n </span>\n );\n },\n);\n\nexport type CommandEmptyProps = ComponentPropsWithoutRef<\"div\">;\nexport const CommandEmpty = forwardRef<HTMLDivElement, CommandEmptyProps>(function CommandEmpty(\n { className, ...props },\n ref,\n) {\n const context = useCommandContext();\n if (context.loading || context.items.some((item) => !item.disabled && context.matches(item)))\n return null;\n return (\n <div\n {...props}\n ref={ref}\n className={cx(command().empty, className)}\n aria-live=\"polite\"\n aria-disabled=\"true\"\n data-slot=\"command-empty\"\n role=\"option\"\n tabIndex={-1}\n />\n );\n});\n\nexport type CommandLoadingProps = ComponentPropsWithoutRef<\"div\">;\nexport const CommandLoading = forwardRef<HTMLDivElement, CommandLoadingProps>(\n function CommandLoading({ className, ...props }, ref) {\n const context = useCommandContext();\n if (!context.loading) return null;\n return (\n <div\n {...props}\n ref={ref}\n className={cx(command().loading, className)}\n aria-live=\"polite\"\n aria-disabled=\"true\"\n data-slot=\"command-loading\"\n role=\"option\"\n tabIndex={-1}\n />\n );\n },\n);\n\nexport type CommandSeparatorProps = ComponentPropsWithoutRef<\"hr\">;\nexport const CommandSeparator = forwardRef<HTMLHRElement, CommandSeparatorProps>(\n function CommandSeparator({ className, ...props }, ref) {\n return (\n <hr\n {...props}\n ref={ref}\n role=\"presentation\"\n className={cx(command().separator, className)}\n data-slot=\"command-separator\"\n />\n );\n },\n);\n\nexport const Command = {\n Root: CommandRoot,\n Input: CommandInput,\n List: CommandList,\n Group: CommandGroup,\n Item: CommandItem,\n ItemIndicator: CommandItemIndicator,\n Empty: CommandEmpty,\n Loading: CommandLoading,\n Separator: CommandSeparator,\n};\n"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, ReactNode } from "react";
|
|
2
2
|
//#region src/components/command/command.d.ts
|
|
3
3
|
type CommandFilter = (value: string, search: string, keywords: readonly string[]) => boolean;
|
|
4
|
+
type CommandMode = "default" | "dropdown";
|
|
4
5
|
interface CommandRootProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
|
|
5
6
|
search?: string;
|
|
6
7
|
defaultSearch?: string;
|
|
@@ -10,6 +11,11 @@ interface CommandRootProps extends Omit<ComponentPropsWithoutRef<"div">, "childr
|
|
|
10
11
|
loopFocus?: boolean;
|
|
11
12
|
disabled?: boolean;
|
|
12
13
|
loading?: boolean;
|
|
14
|
+
mode?: CommandMode;
|
|
15
|
+
open?: boolean;
|
|
16
|
+
defaultOpen?: boolean;
|
|
17
|
+
onOpenChange?: (open: boolean) => void;
|
|
18
|
+
closeOnSelect?: boolean;
|
|
13
19
|
children?: ReactNode;
|
|
14
20
|
}
|
|
15
21
|
declare const CommandRoot: import("react").ForwardRefExoticComponent<CommandRootProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -47,5 +53,5 @@ declare const Command: {
|
|
|
47
53
|
Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & import("react").RefAttributes<HTMLHRElement>>;
|
|
48
54
|
};
|
|
49
55
|
//#endregion
|
|
50
|
-
export { Command, CommandEmpty, CommandEmptyProps, CommandFilter, CommandGroup, CommandGroupProps, CommandInput, CommandInputProps, CommandItem, CommandItemIndicator, CommandItemProps, CommandList, CommandListProps, CommandLoading, CommandLoadingProps, CommandRoot, CommandRootProps, CommandSeparator, CommandSeparatorProps };
|
|
56
|
+
export { Command, CommandEmpty, CommandEmptyProps, CommandFilter, CommandGroup, CommandGroupProps, CommandInput, CommandInputProps, CommandItem, CommandItemIndicator, CommandItemProps, CommandList, CommandListProps, CommandLoading, CommandLoadingProps, CommandMode, CommandRoot, CommandRootProps, CommandSeparator, CommandSeparatorProps };
|
|
51
57
|
//# sourceMappingURL=command.d.cts.map
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, ReactNode } from "react";
|
|
2
2
|
//#region src/components/command/command.d.ts
|
|
3
3
|
type CommandFilter = (value: string, search: string, keywords: readonly string[]) => boolean;
|
|
4
|
+
type CommandMode = "default" | "dropdown";
|
|
4
5
|
interface CommandRootProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
|
|
5
6
|
search?: string;
|
|
6
7
|
defaultSearch?: string;
|
|
@@ -10,6 +11,11 @@ interface CommandRootProps extends Omit<ComponentPropsWithoutRef<"div">, "childr
|
|
|
10
11
|
loopFocus?: boolean;
|
|
11
12
|
disabled?: boolean;
|
|
12
13
|
loading?: boolean;
|
|
14
|
+
mode?: CommandMode;
|
|
15
|
+
open?: boolean;
|
|
16
|
+
defaultOpen?: boolean;
|
|
17
|
+
onOpenChange?: (open: boolean) => void;
|
|
18
|
+
closeOnSelect?: boolean;
|
|
13
19
|
children?: ReactNode;
|
|
14
20
|
}
|
|
15
21
|
declare const CommandRoot: import("react").ForwardRefExoticComponent<CommandRootProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -47,5 +53,5 @@ declare const Command: {
|
|
|
47
53
|
Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & import("react").RefAttributes<HTMLHRElement>>;
|
|
48
54
|
};
|
|
49
55
|
//#endregion
|
|
50
|
-
export { Command, CommandEmpty, CommandEmptyProps, CommandFilter, CommandGroup, CommandGroupProps, CommandInput, CommandInputProps, CommandItem, CommandItemIndicator, CommandItemProps, CommandList, CommandListProps, CommandLoading, CommandLoadingProps, CommandRoot, CommandRootProps, CommandSeparator, CommandSeparatorProps };
|
|
56
|
+
export { Command, CommandEmpty, CommandEmptyProps, CommandFilter, CommandGroup, CommandGroupProps, CommandInput, CommandInputProps, CommandItem, CommandItemIndicator, CommandItemProps, CommandList, CommandListProps, CommandLoading, CommandLoadingProps, CommandMode, CommandRoot, CommandRootProps, CommandSeparator, CommandSeparatorProps };
|
|
51
57
|
//# sourceMappingURL=command.d.ts.map
|
|
@@ -17,14 +17,28 @@ function defaultFilter(value, search, keywords) {
|
|
|
17
17
|
if (!query) return true;
|
|
18
18
|
return [value, ...keywords].some((candidate) => candidate.toLocaleLowerCase().includes(query));
|
|
19
19
|
}
|
|
20
|
-
const CommandRoot = forwardRef(function CommandRoot({ children, className, defaultSearch = "", disabled = false, filter = defaultFilter, loading = false, onKeyDown, onSearchChange, search: controlledSearch, shouldFilter = true, loopFocus = true, ...props }, ref) {
|
|
20
|
+
const CommandRoot = forwardRef(function CommandRoot({ children, className, defaultSearch = "", disabled = false, filter = defaultFilter, loading = false, mode = "default", open: controlledOpen, defaultOpen = false, onOpenChange, closeOnSelect = true, onKeyDown, onSearchChange, search: controlledSearch, shouldFilter = true, loopFocus = true, ...props }, ref) {
|
|
21
21
|
const [uncontrolledSearch, setUncontrolledSearch] = useState(defaultSearch);
|
|
22
|
+
const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
|
|
22
23
|
const [highlighted, setHighlighted] = useState(null);
|
|
23
24
|
const [, setVersion] = useState(0);
|
|
24
25
|
const itemsRef = useRef(/* @__PURE__ */ new Map());
|
|
26
|
+
const rootElementRef = useRef(null);
|
|
25
27
|
const listId = useId();
|
|
26
28
|
const search = controlledSearch ?? uncontrolledSearch;
|
|
27
|
-
const
|
|
29
|
+
const open = mode === "default" ? true : controlledOpen ?? uncontrolledOpen;
|
|
30
|
+
const styles = command({ mode });
|
|
31
|
+
const setOpen = useCallback((nextOpen) => {
|
|
32
|
+
if (mode !== "dropdown" || disabled) return;
|
|
33
|
+
if (controlledOpen === void 0) setUncontrolledOpen(nextOpen);
|
|
34
|
+
onOpenChange?.(nextOpen);
|
|
35
|
+
}, [
|
|
36
|
+
controlledOpen,
|
|
37
|
+
disabled,
|
|
38
|
+
mode,
|
|
39
|
+
onOpenChange
|
|
40
|
+
]);
|
|
41
|
+
const close = useCallback(() => setOpen(false), [setOpen]);
|
|
28
42
|
const items = Array.from(itemsRef.current.values());
|
|
29
43
|
const setSearch = useCallback((next) => {
|
|
30
44
|
if (controlledSearch === void 0) setUncontrolledSearch(next);
|
|
@@ -50,8 +64,28 @@ const CommandRoot = forwardRef(function CommandRoot({ children, className, defau
|
|
|
50
64
|
}, []);
|
|
51
65
|
const selectItem = useCallback((id) => {
|
|
52
66
|
const item = itemsRef.current.get(id);
|
|
53
|
-
if (item && !item.disabled && matches(item))
|
|
54
|
-
|
|
67
|
+
if (item && !item.disabled && matches(item)) {
|
|
68
|
+
item.onSelect?.(item.value);
|
|
69
|
+
if (closeOnSelect) close();
|
|
70
|
+
}
|
|
71
|
+
}, [
|
|
72
|
+
close,
|
|
73
|
+
closeOnSelect,
|
|
74
|
+
matches
|
|
75
|
+
]);
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
if (mode !== "dropdown" || !open) return;
|
|
78
|
+
const handleOutsidePress = (event) => {
|
|
79
|
+
const target = event.target;
|
|
80
|
+
if (target instanceof Node && !rootElementRef.current?.contains(target)) close();
|
|
81
|
+
};
|
|
82
|
+
document.addEventListener("pointerdown", handleOutsidePress);
|
|
83
|
+
return () => document.removeEventListener("pointerdown", handleOutsidePress);
|
|
84
|
+
}, [
|
|
85
|
+
close,
|
|
86
|
+
mode,
|
|
87
|
+
open
|
|
88
|
+
]);
|
|
55
89
|
useEffect(() => {
|
|
56
90
|
if (!visibleItems.some((item) => item.id === highlighted)) setHighlighted(visibleItems[0]?.id ?? null);
|
|
57
91
|
}, [highlighted, visibleItems]);
|
|
@@ -71,8 +105,12 @@ const CommandRoot = forwardRef(function CommandRoot({ children, className, defau
|
|
|
71
105
|
} else if (event.key === "Enter" && highlighted) {
|
|
72
106
|
event.preventDefault();
|
|
73
107
|
selectItem(highlighted);
|
|
74
|
-
} else if (event.key === "Escape")
|
|
108
|
+
} else if (event.key === "Escape") {
|
|
109
|
+
event.preventDefault();
|
|
110
|
+
close();
|
|
111
|
+
}
|
|
75
112
|
}, [
|
|
113
|
+
close,
|
|
76
114
|
disabled,
|
|
77
115
|
highlighted,
|
|
78
116
|
loopFocus,
|
|
@@ -94,7 +132,11 @@ const CommandRoot = forwardRef(function CommandRoot({ children, className, defau
|
|
|
94
132
|
registerItem,
|
|
95
133
|
setItemElement,
|
|
96
134
|
setHighlighted,
|
|
97
|
-
selectItem
|
|
135
|
+
selectItem,
|
|
136
|
+
mode,
|
|
137
|
+
open,
|
|
138
|
+
setOpen,
|
|
139
|
+
closeOnSelect
|
|
98
140
|
}), [
|
|
99
141
|
highlighted,
|
|
100
142
|
disabled,
|
|
@@ -108,27 +150,35 @@ const CommandRoot = forwardRef(function CommandRoot({ children, className, defau
|
|
|
108
150
|
selectItem,
|
|
109
151
|
setItemElement,
|
|
110
152
|
setSearch,
|
|
111
|
-
shouldFilter
|
|
153
|
+
shouldFilter,
|
|
154
|
+
mode,
|
|
155
|
+
open,
|
|
156
|
+
setOpen,
|
|
157
|
+
closeOnSelect
|
|
112
158
|
]);
|
|
113
159
|
return /* @__PURE__ */ jsx(CommandContext.Provider, {
|
|
114
160
|
value: context,
|
|
115
161
|
children: /* @__PURE__ */ jsx("div", {
|
|
116
162
|
...props,
|
|
117
163
|
ref: (node) => {
|
|
164
|
+
rootElementRef.current = node;
|
|
118
165
|
if (typeof ref === "function") ref(node);
|
|
119
166
|
else if (ref) ref.current = node;
|
|
120
167
|
},
|
|
121
168
|
className: cx(styles.root, className),
|
|
122
169
|
"data-disabled": disabled || void 0,
|
|
123
170
|
"data-jaci-component": "command",
|
|
171
|
+
"data-mode": mode,
|
|
172
|
+
"data-open": open || void 0,
|
|
124
173
|
"data-slot": "command",
|
|
125
174
|
"aria-disabled": disabled || void 0,
|
|
126
175
|
children
|
|
127
176
|
})
|
|
128
177
|
});
|
|
129
178
|
});
|
|
130
|
-
const CommandInput = forwardRef(function CommandInput({ className, onChange, onKeyDown, ...props }, ref) {
|
|
131
|
-
const { disabled, handleKeyDown, highlighted, listId, search, setHighlighted, setSearch } = useCommandContext();
|
|
179
|
+
const CommandInput = forwardRef(function CommandInput({ className, onChange, onClick, onFocus, onKeyDown, ...props }, ref) {
|
|
180
|
+
const { disabled, handleKeyDown, highlighted, listId, mode, open, search, setHighlighted, setOpen, setSearch } = useCommandContext();
|
|
181
|
+
const styles = command({ mode });
|
|
132
182
|
const handleChange = (event) => {
|
|
133
183
|
onChange?.(event);
|
|
134
184
|
const next = event.target.value;
|
|
@@ -142,13 +192,22 @@ const CommandInput = forwardRef(function CommandInput({ className, onChange, onK
|
|
|
142
192
|
"aria-controls": listId,
|
|
143
193
|
role: "combobox",
|
|
144
194
|
"aria-haspopup": "listbox",
|
|
145
|
-
"aria-expanded":
|
|
146
|
-
className: cx(
|
|
195
|
+
"aria-expanded": open,
|
|
196
|
+
className: cx(styles.input, className),
|
|
147
197
|
"data-slot": "command-input",
|
|
198
|
+
"data-mode": mode,
|
|
148
199
|
disabled: disabled || props.disabled,
|
|
149
200
|
onChange: (event) => {
|
|
150
201
|
handleChange(event);
|
|
151
202
|
},
|
|
203
|
+
onClick: (event) => {
|
|
204
|
+
onClick?.(event);
|
|
205
|
+
if (!event.defaultPrevented && mode === "dropdown" && !disabled && !props.disabled) setOpen(true);
|
|
206
|
+
},
|
|
207
|
+
onFocus: (event) => {
|
|
208
|
+
onFocus?.(event);
|
|
209
|
+
if (!event.defaultPrevented && mode === "dropdown" && !disabled && !props.disabled) setOpen(true);
|
|
210
|
+
},
|
|
152
211
|
onKeyDown: (event) => {
|
|
153
212
|
onKeyDown?.(event);
|
|
154
213
|
handleKeyDown(event);
|
|
@@ -157,13 +216,17 @@ const CommandInput = forwardRef(function CommandInput({ className, onChange, onK
|
|
|
157
216
|
});
|
|
158
217
|
});
|
|
159
218
|
const CommandList = forwardRef(function CommandList({ className, id, ...props }, ref) {
|
|
160
|
-
const { listId } = useCommandContext();
|
|
219
|
+
const { listId, mode, open } = useCommandContext();
|
|
220
|
+
const styles = command({ mode });
|
|
161
221
|
return /* @__PURE__ */ jsx("div", {
|
|
162
222
|
...props,
|
|
163
223
|
ref,
|
|
164
224
|
id: id ?? listId,
|
|
165
|
-
className: cx(
|
|
225
|
+
className: cx(styles.list, className),
|
|
226
|
+
"aria-hidden": mode === "dropdown" && !open ? true : void 0,
|
|
227
|
+
"data-open": open || void 0,
|
|
166
228
|
"data-slot": "command-list",
|
|
229
|
+
hidden: mode === "dropdown" && !open ? true : void 0,
|
|
167
230
|
role: "listbox"
|
|
168
231
|
});
|
|
169
232
|
});
|