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.
Files changed (217) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +75 -0
  3. package/dist/_virtual/_rolldown/runtime.cjs +23 -0
  4. package/dist/components/alert-dialog/alert-dialog.cjs +4 -1
  5. package/dist/components/alert-dialog/alert-dialog.cjs.map +1 -1
  6. package/dist/components/alert-dialog/alert-dialog.d.cts +2 -2
  7. package/dist/components/alert-dialog/alert-dialog.d.ts +2 -2
  8. package/dist/components/alert-dialog/alert-dialog.js +4 -1
  9. package/dist/components/alert-dialog/alert-dialog.js.map +1 -1
  10. package/dist/components/carousel/carousel.cjs +342 -0
  11. package/dist/components/carousel/carousel.cjs.map +1 -0
  12. package/dist/components/carousel/carousel.d.cts +44 -0
  13. package/dist/components/carousel/carousel.d.ts +44 -0
  14. package/dist/components/carousel/carousel.js +330 -0
  15. package/dist/components/carousel/carousel.js.map +1 -0
  16. package/dist/components/carousel/index.d.cts +2 -0
  17. package/dist/components/carousel/index.d.ts +2 -0
  18. package/dist/components/code/code.cjs +32 -5
  19. package/dist/components/code/code.cjs.map +1 -1
  20. package/dist/components/code/code.d.cts +1 -0
  21. package/dist/components/code/code.d.ts +1 -0
  22. package/dist/components/code/code.js +34 -7
  23. package/dist/components/code/code.js.map +1 -1
  24. package/dist/components/color-picker/color-picker.cjs +4 -1
  25. package/dist/components/color-picker/color-picker.cjs.map +1 -1
  26. package/dist/components/color-picker/color-picker.d.cts +2 -2
  27. package/dist/components/color-picker/color-picker.d.ts +2 -2
  28. package/dist/components/color-picker/color-picker.js +4 -1
  29. package/dist/components/color-picker/color-picker.js.map +1 -1
  30. package/dist/components/color-swatch/color-swatch.cjs +33 -0
  31. package/dist/components/color-swatch/color-swatch.cjs.map +1 -0
  32. package/dist/components/color-swatch/color-swatch.d.cts +13 -0
  33. package/dist/components/color-swatch/color-swatch.d.ts +13 -0
  34. package/dist/components/color-swatch/color-swatch.js +33 -0
  35. package/dist/components/color-swatch/color-swatch.js.map +1 -0
  36. package/dist/components/color-swatch/index.d.cts +2 -0
  37. package/dist/components/color-swatch/index.d.ts +2 -0
  38. package/dist/components/combobox/combobox.cjs +4 -1
  39. package/dist/components/combobox/combobox.cjs.map +1 -1
  40. package/dist/components/combobox/combobox.d.cts +2 -2
  41. package/dist/components/combobox/combobox.d.ts +2 -2
  42. package/dist/components/combobox/combobox.js +4 -1
  43. package/dist/components/combobox/combobox.js.map +1 -1
  44. package/dist/components/command/command.cjs +76 -13
  45. package/dist/components/command/command.cjs.map +1 -1
  46. package/dist/components/command/command.d.cts +7 -1
  47. package/dist/components/command/command.d.ts +7 -1
  48. package/dist/components/command/command.js +76 -13
  49. package/dist/components/command/command.js.map +1 -1
  50. package/dist/components/command/index.d.cts +2 -2
  51. package/dist/components/command/index.d.ts +2 -2
  52. package/dist/components/context-menu/context-menu.cjs +4 -1
  53. package/dist/components/context-menu/context-menu.cjs.map +1 -1
  54. package/dist/components/context-menu/context-menu.d.cts +2 -2
  55. package/dist/components/context-menu/context-menu.d.ts +2 -2
  56. package/dist/components/context-menu/context-menu.js +4 -1
  57. package/dist/components/context-menu/context-menu.js.map +1 -1
  58. package/dist/components/date-picker/date-picker.cjs +4 -1
  59. package/dist/components/date-picker/date-picker.cjs.map +1 -1
  60. package/dist/components/date-picker/date-picker.d.cts +2 -2
  61. package/dist/components/date-picker/date-picker.d.ts +2 -2
  62. package/dist/components/date-picker/date-picker.js +4 -1
  63. package/dist/components/date-picker/date-picker.js.map +1 -1
  64. package/dist/components/date-range-picker/date-range-picker.cjs +4 -1
  65. package/dist/components/date-range-picker/date-range-picker.cjs.map +1 -1
  66. package/dist/components/date-range-picker/date-range-picker.d.cts +2 -2
  67. package/dist/components/date-range-picker/date-range-picker.d.ts +2 -2
  68. package/dist/components/date-range-picker/date-range-picker.js +4 -1
  69. package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
  70. package/dist/components/dialog/dialog.cjs +4 -1
  71. package/dist/components/dialog/dialog.cjs.map +1 -1
  72. package/dist/components/dialog/dialog.d.cts +2 -2
  73. package/dist/components/dialog/dialog.d.ts +2 -2
  74. package/dist/components/dialog/dialog.js +4 -1
  75. package/dist/components/dialog/dialog.js.map +1 -1
  76. package/dist/components/download-trigger/download-trigger.cjs +25 -0
  77. package/dist/components/download-trigger/download-trigger.cjs.map +1 -0
  78. package/dist/components/download-trigger/download-trigger.d.cts +12 -0
  79. package/dist/components/download-trigger/download-trigger.d.ts +12 -0
  80. package/dist/components/download-trigger/download-trigger.js +25 -0
  81. package/dist/components/download-trigger/download-trigger.js.map +1 -0
  82. package/dist/components/download-trigger/index.d.cts +2 -0
  83. package/dist/components/download-trigger/index.d.ts +2 -0
  84. package/dist/components/drawer/drawer.cjs +4 -1
  85. package/dist/components/drawer/drawer.cjs.map +1 -1
  86. package/dist/components/drawer/drawer.d.cts +2 -2
  87. package/dist/components/drawer/drawer.d.ts +2 -2
  88. package/dist/components/drawer/drawer.js +4 -1
  89. package/dist/components/drawer/drawer.js.map +1 -1
  90. package/dist/components/figure/figure.cjs +45 -36
  91. package/dist/components/figure/figure.cjs.map +1 -1
  92. package/dist/components/figure/figure.js +45 -36
  93. package/dist/components/figure/figure.js.map +1 -1
  94. package/dist/components/image/image.cjs +41 -32
  95. package/dist/components/image/image.cjs.map +1 -1
  96. package/dist/components/image/image.js +41 -32
  97. package/dist/components/image/image.js.map +1 -1
  98. package/dist/components/menu/menu.cjs +4 -1
  99. package/dist/components/menu/menu.cjs.map +1 -1
  100. package/dist/components/menu/menu.d.cts +2 -2
  101. package/dist/components/menu/menu.d.ts +2 -2
  102. package/dist/components/menu/menu.js +4 -1
  103. package/dist/components/menu/menu.js.map +1 -1
  104. package/dist/components/menubar/menubar.cjs +4 -1
  105. package/dist/components/menubar/menubar.cjs.map +1 -1
  106. package/dist/components/menubar/menubar.d.cts +2 -2
  107. package/dist/components/menubar/menubar.d.ts +2 -2
  108. package/dist/components/menubar/menubar.js +4 -1
  109. package/dist/components/menubar/menubar.js.map +1 -1
  110. package/dist/components/navigation/navigation.cjs +3 -1
  111. package/dist/components/navigation/navigation.cjs.map +1 -1
  112. package/dist/components/navigation/navigation.js +3 -1
  113. package/dist/components/navigation/navigation.js.map +1 -1
  114. package/dist/components/navigation-menu/navigation-menu.cjs +4 -1
  115. package/dist/components/navigation-menu/navigation-menu.cjs.map +1 -1
  116. package/dist/components/navigation-menu/navigation-menu.d.cts +2 -2
  117. package/dist/components/navigation-menu/navigation-menu.d.ts +2 -2
  118. package/dist/components/navigation-menu/navigation-menu.js +4 -1
  119. package/dist/components/navigation-menu/navigation-menu.js.map +1 -1
  120. package/dist/components/popover/popover.cjs +4 -1
  121. package/dist/components/popover/popover.cjs.map +1 -1
  122. package/dist/components/popover/popover.d.cts +2 -2
  123. package/dist/components/popover/popover.d.ts +2 -2
  124. package/dist/components/popover/popover.js +4 -1
  125. package/dist/components/popover/popover.js.map +1 -1
  126. package/dist/components/qr-code/index.d.cts +2 -0
  127. package/dist/components/qr-code/index.d.ts +2 -0
  128. package/dist/components/qr-code/qr-code.cjs +118 -0
  129. package/dist/components/qr-code/qr-code.cjs.map +1 -0
  130. package/dist/components/qr-code/qr-code.d.cts +17 -0
  131. package/dist/components/qr-code/qr-code.d.ts +17 -0
  132. package/dist/components/qr-code/qr-code.js +116 -0
  133. package/dist/components/qr-code/qr-code.js.map +1 -0
  134. package/dist/components/select/select.cjs +4 -1
  135. package/dist/components/select/select.cjs.map +1 -1
  136. package/dist/components/select/select.d.cts +2 -2
  137. package/dist/components/select/select.d.ts +2 -2
  138. package/dist/components/select/select.js +4 -1
  139. package/dist/components/select/select.js.map +1 -1
  140. package/dist/components/sidebar/sidebar.cjs +24 -17
  141. package/dist/components/sidebar/sidebar.cjs.map +1 -1
  142. package/dist/components/sidebar/sidebar.d.cts +4 -2
  143. package/dist/components/sidebar/sidebar.d.ts +4 -2
  144. package/dist/components/sidebar/sidebar.js +24 -17
  145. package/dist/components/sidebar/sidebar.js.map +1 -1
  146. package/dist/components/spacer/index.d.cts +2 -0
  147. package/dist/components/spacer/index.d.ts +2 -0
  148. package/dist/components/spacer/spacer.cjs +24 -0
  149. package/dist/components/spacer/spacer.cjs.map +1 -0
  150. package/dist/components/spacer/spacer.d.cts +10 -0
  151. package/dist/components/spacer/spacer.d.ts +10 -0
  152. package/dist/components/spacer/spacer.js +24 -0
  153. package/dist/components/spacer/spacer.js.map +1 -0
  154. package/dist/components/toast/toast.cjs +4 -1
  155. package/dist/components/toast/toast.cjs.map +1 -1
  156. package/dist/components/toast/toast.d.cts +1 -1
  157. package/dist/components/toast/toast.d.ts +1 -1
  158. package/dist/components/toast/toast.js +4 -1
  159. package/dist/components/toast/toast.js.map +1 -1
  160. package/dist/components/tooltip/tooltip.cjs +4 -1
  161. package/dist/components/tooltip/tooltip.cjs.map +1 -1
  162. package/dist/components/tooltip/tooltip.d.cts +2 -2
  163. package/dist/components/tooltip/tooltip.d.ts +2 -2
  164. package/dist/components/tooltip/tooltip.js +4 -1
  165. package/dist/components/tooltip/tooltip.js.map +1 -1
  166. package/dist/index.cjs +11 -0
  167. package/dist/index.cjs.map +1 -0
  168. package/dist/index.d.cts +12 -2
  169. package/dist/index.d.ts +12 -2
  170. package/dist/index.js +7 -1
  171. package/dist/index.js.map +1 -0
  172. package/dist/styled-system/recipes/carousel.cjs +48 -0
  173. package/dist/styled-system/recipes/carousel.cjs.map +1 -0
  174. package/dist/styled-system/recipes/carousel.js +48 -0
  175. package/dist/styled-system/recipes/carousel.js.map +1 -0
  176. package/dist/styled-system/recipes/code.cjs +4 -2
  177. package/dist/styled-system/recipes/code.cjs.map +1 -1
  178. package/dist/styled-system/recipes/code.js +4 -2
  179. package/dist/styled-system/recipes/code.js.map +1 -1
  180. package/dist/styled-system/recipes/color-swatch.cjs +37 -0
  181. package/dist/styled-system/recipes/color-swatch.cjs.map +1 -0
  182. package/dist/styled-system/recipes/color-swatch.js +37 -0
  183. package/dist/styled-system/recipes/color-swatch.js.map +1 -0
  184. package/dist/styled-system/recipes/command.cjs +3 -3
  185. package/dist/styled-system/recipes/command.cjs.map +1 -1
  186. package/dist/styled-system/recipes/command.js +3 -3
  187. package/dist/styled-system/recipes/command.js.map +1 -1
  188. package/dist/styled-system/recipes/download-trigger.cjs +39 -0
  189. package/dist/styled-system/recipes/download-trigger.cjs.map +1 -0
  190. package/dist/styled-system/recipes/download-trigger.js +39 -0
  191. package/dist/styled-system/recipes/download-trigger.js.map +1 -0
  192. package/dist/styled-system/recipes/figure.cjs +1 -0
  193. package/dist/styled-system/recipes/figure.cjs.map +1 -1
  194. package/dist/styled-system/recipes/figure.js +1 -0
  195. package/dist/styled-system/recipes/figure.js.map +1 -1
  196. package/dist/styled-system/recipes/image.cjs +1 -0
  197. package/dist/styled-system/recipes/image.cjs.map +1 -1
  198. package/dist/styled-system/recipes/image.js +1 -0
  199. package/dist/styled-system/recipes/image.js.map +1 -1
  200. package/dist/styled-system/recipes/layout-spacer.cjs +88 -0
  201. package/dist/styled-system/recipes/layout-spacer.cjs.map +1 -0
  202. package/dist/styled-system/recipes/layout-spacer.js +88 -0
  203. package/dist/styled-system/recipes/layout-spacer.js.map +1 -0
  204. package/dist/styled-system/recipes/qr-code.cjs +25 -0
  205. package/dist/styled-system/recipes/qr-code.cjs.map +1 -0
  206. package/dist/styled-system/recipes/qr-code.js +25 -0
  207. package/dist/styled-system/recipes/qr-code.js.map +1 -0
  208. package/dist/styles.css +662 -106
  209. package/dist/theme/theme-provider.cjs +46 -8
  210. package/dist/theme/theme-provider.cjs.map +1 -1
  211. package/dist/theme/theme-provider.js +46 -8
  212. package/dist/theme/theme-provider.js.map +1 -1
  213. package/dist/theme/theme-scope.cjs +21 -0
  214. package/dist/theme/theme-scope.cjs.map +1 -0
  215. package/dist/theme/theme-scope.js +19 -0
  216. package/dist/theme/theme-scope.js.map +1 -0
  217. 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 const ComboboxPortal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompletePortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
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: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompletePortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
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
- const ComboboxPortal = Combobox.Portal;
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 styles = require_command.command();
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)) item.onSelect?.(item.value);
54
- }, [matches]);
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") event.preventDefault();
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": "true",
146
- className: require_cx.cx(require_command.command().input, className),
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(require_command.command().list, className),
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 styles = command();
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)) item.onSelect?.(item.value);
54
- }, [matches]);
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") event.preventDefault();
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": "true",
146
- className: cx(command().input, className),
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(command().list, className),
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
  });