jaci-ui 0.4.0 → 0.6.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 (114) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +68 -0
  3. package/dist/components/command/command.cjs +55 -34
  4. package/dist/components/command/command.cjs.map +1 -1
  5. package/dist/components/command/command.d.cts +1 -0
  6. package/dist/components/command/command.d.ts +1 -0
  7. package/dist/components/command/command.js +55 -34
  8. package/dist/components/command/command.js.map +1 -1
  9. package/dist/components/data-toolbar/data-toolbar.cjs +141 -0
  10. package/dist/components/data-toolbar/data-toolbar.cjs.map +1 -0
  11. package/dist/components/data-toolbar/data-toolbar.d.cts +50 -0
  12. package/dist/components/data-toolbar/data-toolbar.d.ts +50 -0
  13. package/dist/components/data-toolbar/data-toolbar.js +132 -0
  14. package/dist/components/data-toolbar/data-toolbar.js.map +1 -0
  15. package/dist/components/data-toolbar/index.d.cts +2 -0
  16. package/dist/components/data-toolbar/index.d.ts +2 -0
  17. package/dist/components/data-view/data-view.cjs +33 -1
  18. package/dist/components/data-view/data-view.cjs.map +1 -1
  19. package/dist/components/data-view/data-view.d.cts +12 -1
  20. package/dist/components/data-view/data-view.d.ts +12 -1
  21. package/dist/components/data-view/data-view.js +31 -2
  22. package/dist/components/data-view/data-view.js.map +1 -1
  23. package/dist/components/data-view/index.d.cts +2 -2
  24. package/dist/components/data-view/index.d.ts +2 -2
  25. package/dist/components/list/list.cjs +3 -1
  26. package/dist/components/list/list.cjs.map +1 -1
  27. package/dist/components/list/list.d.cts +3 -1
  28. package/dist/components/list/list.d.ts +3 -1
  29. package/dist/components/list/list.js +3 -1
  30. package/dist/components/list/list.js.map +1 -1
  31. package/dist/components/navigation-menu/navigation-menu.cjs +3 -3
  32. package/dist/components/navigation-menu/navigation-menu.cjs.map +1 -1
  33. package/dist/components/navigation-menu/navigation-menu.js +3 -3
  34. package/dist/components/navigation-menu/navigation-menu.js.map +1 -1
  35. package/dist/components/pagination/index.d.cts +2 -2
  36. package/dist/components/pagination/index.d.ts +2 -2
  37. package/dist/components/pagination/pagination.cjs +122 -21
  38. package/dist/components/pagination/pagination.cjs.map +1 -1
  39. package/dist/components/pagination/pagination.d.cts +25 -13
  40. package/dist/components/pagination/pagination.d.ts +25 -13
  41. package/dist/components/pagination/pagination.js +122 -23
  42. package/dist/components/pagination/pagination.js.map +1 -1
  43. package/dist/components/sidebar/sidebar.cjs +59 -11
  44. package/dist/components/sidebar/sidebar.cjs.map +1 -1
  45. package/dist/components/sidebar/sidebar.d.cts +13 -0
  46. package/dist/components/sidebar/sidebar.d.ts +13 -0
  47. package/dist/components/sidebar/sidebar.js +59 -13
  48. package/dist/components/sidebar/sidebar.js.map +1 -1
  49. package/dist/components/stepper/index.d.cts +2 -0
  50. package/dist/components/stepper/index.d.ts +2 -0
  51. package/dist/components/stepper/stepper.cjs +341 -0
  52. package/dist/components/stepper/stepper.cjs.map +1 -0
  53. package/dist/components/stepper/stepper.d.cts +52 -0
  54. package/dist/components/stepper/stepper.d.ts +52 -0
  55. package/dist/components/stepper/stepper.js +330 -0
  56. package/dist/components/stepper/stepper.js.map +1 -0
  57. package/dist/components/table/index.d.cts +2 -2
  58. package/dist/components/table/index.d.ts +2 -2
  59. package/dist/components/table/table.cjs +265 -46
  60. package/dist/components/table/table.cjs.map +1 -1
  61. package/dist/components/table/table.d.cts +41 -8
  62. package/dist/components/table/table.d.ts +41 -8
  63. package/dist/components/table/table.js +264 -48
  64. package/dist/components/table/table.js.map +1 -1
  65. package/dist/components/toast/toast.cjs +3 -1
  66. package/dist/components/toast/toast.cjs.map +1 -1
  67. package/dist/components/toast/toast.js +3 -1
  68. package/dist/components/toast/toast.js.map +1 -1
  69. package/dist/components/tree-view/index.d.cts +2 -2
  70. package/dist/components/tree-view/index.d.ts +2 -2
  71. package/dist/components/tree-view/tree-view.cjs +60 -3
  72. package/dist/components/tree-view/tree-view.cjs.map +1 -1
  73. package/dist/components/tree-view/tree-view.d.cts +12 -1
  74. package/dist/components/tree-view/tree-view.d.ts +12 -1
  75. package/dist/components/tree-view/tree-view.js +58 -4
  76. package/dist/components/tree-view/tree-view.js.map +1 -1
  77. package/dist/index.cjs +35 -0
  78. package/dist/index.d.cts +9 -5
  79. package/dist/index.d.ts +9 -5
  80. package/dist/index.js +7 -5
  81. package/dist/styled-system/recipes/data-toolbar.cjs +40 -0
  82. package/dist/styled-system/recipes/data-toolbar.cjs.map +1 -0
  83. package/dist/styled-system/recipes/data-toolbar.js +40 -0
  84. package/dist/styled-system/recipes/data-toolbar.js.map +1 -0
  85. package/dist/styled-system/recipes/data-view.cjs +3 -0
  86. package/dist/styled-system/recipes/data-view.cjs.map +1 -1
  87. package/dist/styled-system/recipes/data-view.js +3 -0
  88. package/dist/styled-system/recipes/data-view.js.map +1 -1
  89. package/dist/styled-system/recipes/list.cjs +7 -1
  90. package/dist/styled-system/recipes/list.cjs.map +1 -1
  91. package/dist/styled-system/recipes/list.js +7 -1
  92. package/dist/styled-system/recipes/list.js.map +1 -1
  93. package/dist/styled-system/recipes/pagination.cjs +9 -1
  94. package/dist/styled-system/recipes/pagination.cjs.map +1 -1
  95. package/dist/styled-system/recipes/pagination.js +9 -1
  96. package/dist/styled-system/recipes/pagination.js.map +1 -1
  97. package/dist/styled-system/recipes/sidebar.cjs +3 -0
  98. package/dist/styled-system/recipes/sidebar.cjs.map +1 -1
  99. package/dist/styled-system/recipes/sidebar.js +3 -0
  100. package/dist/styled-system/recipes/sidebar.js.map +1 -1
  101. package/dist/styled-system/recipes/stepper.cjs +53 -0
  102. package/dist/styled-system/recipes/stepper.cjs.map +1 -0
  103. package/dist/styled-system/recipes/stepper.js +53 -0
  104. package/dist/styled-system/recipes/stepper.js.map +1 -0
  105. package/dist/styled-system/recipes/table.cjs +15 -2
  106. package/dist/styled-system/recipes/table.cjs.map +1 -1
  107. package/dist/styled-system/recipes/table.js +15 -2
  108. package/dist/styled-system/recipes/table.js.map +1 -1
  109. package/dist/styled-system/recipes/tree-view.cjs +4 -1
  110. package/dist/styled-system/recipes/tree-view.cjs.map +1 -1
  111. package/dist/styled-system/recipes/tree-view.js +4 -1
  112. package/dist/styled-system/recipes/tree-view.js.map +1 -1
  113. package/dist/styles.css +602 -18
  114. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 165083c: Improve navigation and overlay dismissal, focus, scroll-lock and responsive behavior, and add the accessible controlled `Stepper` component.
8
+
9
+ ## 0.5.0
10
+
11
+ ### Minor Changes
12
+
13
+ - 343c729: Add controlled data-display primitives for tables, views, lists and pagination, plus the new
14
+ DataToolbar composition. Command and TreeView gain more robust filtering, selection, keyboard
15
+ navigation and declarative loading states.
16
+
3
17
  ## 0.4.0
4
18
 
5
19
  ### Minor Changes
package/README.md CHANGED
@@ -135,6 +135,74 @@ auto-advance, password masking and native form submission:
135
135
  </PinInput.Root>
136
136
  ```
137
137
 
138
+ For data-heavy screens, compose `DataToolbar`, `DataView`, `Table` and `Pagination` explicitly.
139
+ The library does not fetch, filter or virtualize data for you, so the application remains the
140
+ source of truth for query, sort, selection and page state:
141
+
142
+ ```tsx
143
+ <DataToolbar.Root aria-label="Project tools">
144
+ <DataToolbar.Search value={search} onValueChange={setSearch} />
145
+ <DataToolbar.Sort value={sort} onValueChange={setSort}>
146
+ <option value="name">Name</option>
147
+ </DataToolbar.Sort>
148
+ <DataToolbar.Selection count={selected.length} onClear={() => setSelected([])}>
149
+ <DataToolbar.ClearSelection />
150
+ </DataToolbar.Selection>
151
+ </DataToolbar.Root>
152
+
153
+ <DataView.Root layout="table" status={loading ? "loading" : "ready"}>
154
+ <DataView.Content>
155
+ <Table.Root
156
+ selectionMode="multiple"
157
+ selectedRowIds={selected}
158
+ onSelectionChange={setSelected}
159
+ >
160
+ <Table.Header>{/* Table.Row, Table.SelectionHeader and Table.Head */}</Table.Header>
161
+ <Table.Body>{/* Table.Row and Table.Cell */}</Table.Body>
162
+ </Table.Root>
163
+ </DataView.Content>
164
+ <DataView.Footer>
165
+ <Pagination.Root page={page} pageCount={pageCount} onPageChange={setPage} />
166
+ </DataView.Footer>
167
+ </DataView.Root>
168
+ ```
169
+
170
+ `Table` supports controlled sorting (`sort`/`onSortChange`), single or multiple selection,
171
+ disabled rows, loading/empty/error states, compact density, alignment and responsive columns.
172
+ `List` remains a semantic `ul`/`ol`, and `Command` and `TreeView` expose their keyboard and
173
+ selection state without requiring a data engine.
174
+
175
+ Navigation overlays keep focus and dismissal behavior in the Base UI primitive. Dialog-like
176
+ surfaces lock page scroll, restore focus to their trigger, and close with Escape or an outside
177
+ press by default. Popovers and menus stay within the viewport and accept the native Base UI
178
+ `initialFocus`, `finalFocus`, `modal` and `disablePointerDismissal` options.
179
+
180
+ Use `Stepper` for linear or freely navigable workflows. Its public value is a string and it can
181
+ submit the current step through a native hidden field:
182
+
183
+ ```tsx
184
+ <Stepper.Root value={step} onValueChange={setStep} linear name="checkout-step">
185
+ <Stepper.List>
186
+ <Stepper.Item value="account">
187
+ <Stepper.Trigger>
188
+ <Stepper.Indicator />
189
+ <Stepper.Title>Account</Stepper.Title>
190
+ </Stepper.Trigger>
191
+ <Stepper.Content>Profile details</Stepper.Content>
192
+ </Stepper.Item>
193
+ <Stepper.Item value="payment">
194
+ <Stepper.Trigger>
195
+ <Stepper.Indicator />
196
+ <Stepper.Title>Payment</Stepper.Title>
197
+ </Stepper.Trigger>
198
+ <Stepper.Content>Billing information</Stepper.Content>
199
+ </Stepper.Item>
200
+ </Stepper.List>
201
+ <Stepper.Previous />
202
+ <Stepper.Next />
203
+ </Stepper.Root>
204
+ ```
205
+
138
206
  Small composition helpers keep common layouts consistent:
139
207
 
140
208
  ```tsx
@@ -17,7 +17,7 @@ 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 = "", 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, onKeyDown, onSearchChange, search: controlledSearch, shouldFilter = true, loopFocus = true, ...props }, ref) {
21
21
  const [uncontrolledSearch, setUncontrolledSearch] = (0, react.useState)(defaultSearch);
22
22
  const [highlighted, setHighlighted] = (0, react.useState)(null);
23
23
  const [, setVersion] = (0, react.useState)(0);
@@ -35,7 +35,7 @@ const CommandRoot = (0, react.forwardRef)(function CommandRoot({ children, class
35
35
  search,
36
36
  shouldFilter
37
37
  ]);
38
- const visibleItems = items.filter((item) => !item.disabled && matches(item));
38
+ const visibleItems = (0, react.useMemo)(() => items.filter((item) => !item.disabled && matches(item)), [items, matches]);
39
39
  const registerItem = (0, react.useCallback)((item) => {
40
40
  itemsRef.current.set(item.id, item);
41
41
  setVersion((current) => current + 1);
@@ -48,33 +48,43 @@ const CommandRoot = (0, react.forwardRef)(function CommandRoot({ children, class
48
48
  const item = itemsRef.current.get(id);
49
49
  if (item) item.element = element;
50
50
  }, []);
51
- const selectItem = (0, react.useCallback)((value) => {
52
- const item = itemsRef.current.get(value);
51
+ const selectItem = (0, react.useCallback)((id) => {
52
+ const item = itemsRef.current.get(id);
53
53
  if (item && !item.disabled && matches(item)) item.onSelect?.(item.value);
54
54
  }, [matches]);
55
55
  (0, react.useEffect)(() => {
56
- if (!visibleItems.some((item) => item.value === highlighted)) setHighlighted(visibleItems[0]?.value ?? null);
56
+ if (!visibleItems.some((item) => item.id === highlighted)) setHighlighted(visibleItems[0]?.id ?? null);
57
57
  }, [highlighted, visibleItems]);
58
- const handleKeyDown = (event) => {
58
+ const handleKeyDown = (0, react.useCallback)((event) => {
59
59
  onKeyDown?.(event);
60
60
  if (event.defaultPrevented) return;
61
- const currentIndex = visibleItems.findIndex((item) => item.value === highlighted);
61
+ if (disabled) return;
62
+ const currentIndex = visibleItems.findIndex((item) => item.id === highlighted);
62
63
  if ((event.key === "ArrowDown" || event.key === "ArrowUp") && visibleItems.length > 0) {
63
64
  event.preventDefault();
64
65
  let nextIndex = currentIndex + (event.key === "ArrowDown" ? 1 : -1);
65
66
  if (loopFocus) nextIndex = (nextIndex + visibleItems.length) % visibleItems.length;
66
- if (nextIndex >= 0 && nextIndex < visibleItems.length) setHighlighted(visibleItems[nextIndex]?.value ?? null);
67
+ if (nextIndex >= 0 && nextIndex < visibleItems.length) setHighlighted(visibleItems[nextIndex]?.id ?? null);
67
68
  } else if (event.key === "Home" || event.key === "End") {
68
69
  event.preventDefault();
69
- setHighlighted((event.key === "Home" ? visibleItems[0] : visibleItems.at(-1))?.value ?? null);
70
+ setHighlighted((event.key === "Home" ? visibleItems[0] : visibleItems.at(-1))?.id ?? null);
70
71
  } else if (event.key === "Enter" && highlighted) {
71
72
  event.preventDefault();
72
73
  selectItem(highlighted);
73
74
  } else if (event.key === "Escape") event.preventDefault();
74
- };
75
+ }, [
76
+ disabled,
77
+ highlighted,
78
+ loopFocus,
79
+ onKeyDown,
80
+ selectItem,
81
+ visibleItems
82
+ ]);
75
83
  const context = (0, react.useMemo)(() => ({
76
84
  search,
77
85
  setSearch,
86
+ disabled,
87
+ handleKeyDown,
78
88
  loading,
79
89
  shouldFilter,
80
90
  items,
@@ -87,6 +97,8 @@ const CommandRoot = (0, react.forwardRef)(function CommandRoot({ children, class
87
97
  selectItem
88
98
  }), [
89
99
  highlighted,
100
+ disabled,
101
+ handleKeyDown,
90
102
  items,
91
103
  listId,
92
104
  loading,
@@ -107,17 +119,16 @@ const CommandRoot = (0, react.forwardRef)(function CommandRoot({ children, class
107
119
  else if (ref) ref.current = node;
108
120
  },
109
121
  className: require_cx.cx(styles.root, className),
110
- "data-disabled": props["aria-disabled"] || void 0,
122
+ "data-disabled": disabled || void 0,
111
123
  "data-jaci-component": "command",
112
124
  "data-slot": "command",
113
- onKeyDown: handleKeyDown,
114
- role: "application",
125
+ "aria-disabled": disabled || void 0,
115
126
  children
116
127
  })
117
128
  });
118
129
  });
119
- const CommandInput = (0, react.forwardRef)(function CommandInput({ className, onChange, ...props }, ref) {
120
- const { highlighted, listId, search, setHighlighted, setSearch } = useCommandContext();
130
+ const CommandInput = (0, react.forwardRef)(function CommandInput({ className, onChange, onKeyDown, ...props }, ref) {
131
+ const { disabled, handleKeyDown, highlighted, listId, search, setHighlighted, setSearch } = useCommandContext();
121
132
  const handleChange = (event) => {
122
133
  onChange?.(event);
123
134
  const next = event.target.value;
@@ -127,43 +138,48 @@ const CommandInput = (0, react.forwardRef)(function CommandInput({ className, on
127
138
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
128
139
  ...props,
129
140
  ref,
130
- "aria-activedescendant": highlighted ? `command-item-${highlighted}` : void 0,
141
+ "aria-activedescendant": highlighted ?? void 0,
131
142
  "aria-controls": listId,
143
+ role: "combobox",
132
144
  "aria-haspopup": "listbox",
145
+ "aria-expanded": "true",
133
146
  className: require_cx.cx(require_command.command().input, className),
134
147
  "data-slot": "command-input",
148
+ disabled: disabled || props.disabled,
135
149
  onChange: (event) => {
136
150
  handleChange(event);
137
151
  },
152
+ onKeyDown: (event) => {
153
+ onKeyDown?.(event);
154
+ handleKeyDown(event);
155
+ },
138
156
  value: search
139
157
  });
140
158
  });
141
159
  const CommandList = (0, react.forwardRef)(function CommandList({ className, id, ...props }, ref) {
142
- const { items, listId, matches } = useCommandContext();
143
- const hasVisibleItems = items.some((item) => !item.disabled && matches(item));
160
+ const { listId } = useCommandContext();
144
161
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
145
162
  ...props,
146
163
  ref,
147
164
  id: id ?? listId,
148
165
  className: require_cx.cx(require_command.command().list, className),
149
166
  "data-slot": "command-list",
150
- role: hasVisibleItems ? "listbox" : void 0
167
+ role: "listbox"
151
168
  });
152
169
  });
153
170
  const CommandGroup = (0, react.forwardRef)(function CommandGroup({ children, className, heading, ...props }, ref) {
154
171
  const context = useCommandContext();
155
172
  const groupId = (0, react.useId)();
156
- const hasRegisteredItems = context.items.some((item) => item.groupId === groupId);
157
- const hasVisibleItems = context.items.some((item) => item.groupId === groupId && context.matches(item));
173
+ const hasVisibleItems = context.items.some((item) => item.groupId === groupId && !item.disabled && context.matches(item));
158
174
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandGroupContext.Provider, {
159
175
  value: groupId,
160
176
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
161
177
  ...props,
162
178
  ref,
163
- "aria-hidden": hasRegisteredItems && !hasVisibleItems ? true : void 0,
179
+ "aria-hidden": !hasVisibleItems || void 0,
164
180
  className: require_cx.cx(require_command.command().group, className),
165
181
  "data-slot": "command-group",
166
- hidden: hasRegisteredItems && !hasVisibleItems,
182
+ hidden: !hasVisibleItems,
167
183
  children: [heading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
168
184
  className: require_command.command().groupHeading,
169
185
  "data-slot": "command-group-heading",
@@ -175,14 +191,14 @@ const CommandGroup = (0, react.forwardRef)(function CommandGroup({ children, cla
175
191
  const CommandItem = (0, react.forwardRef)(function CommandItem({ children, className, disabled = false, keywords: itemKeywords, onClick, onMouseEnter, onSelect, value, ...props }, ref) {
176
192
  const context = useCommandContext();
177
193
  const groupId = (0, react.useContext)(CommandGroupContext);
178
- const id = `command-item-${value}`;
194
+ const id = `command-item-${(0, react.useId)().replace(/:/g, "")}`;
179
195
  const keywords = itemKeywords ?? EMPTY_KEYWORDS;
180
196
  const visible = context.matches({
181
197
  value,
182
198
  keywords
183
199
  });
184
200
  (0, react.useEffect)(() => context.registerItem({
185
- id: value,
201
+ id,
186
202
  value,
187
203
  keywords,
188
204
  disabled,
@@ -193,6 +209,7 @@ const CommandItem = (0, react.forwardRef)(function CommandItem({ children, class
193
209
  context.registerItem,
194
210
  disabled,
195
211
  groupId,
212
+ id,
196
213
  keywords,
197
214
  onSelect,
198
215
  value
@@ -206,29 +223,29 @@ const CommandItem = (0, react.forwardRef)(function CommandItem({ children, class
206
223
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
207
224
  ...props,
208
225
  ref: (node) => {
209
- context.setItemElement(value, node);
226
+ context.setItemElement(id, node);
210
227
  if (typeof ref === "function") ref(node);
211
228
  else if (ref) ref.current = node;
212
229
  },
213
230
  "aria-disabled": disabled || void 0,
214
- "aria-selected": context.highlighted === value,
231
+ "aria-selected": context.highlighted === id,
215
232
  className: require_cx.cx(require_command.command().item, className),
216
233
  "data-disabled": disabled || void 0,
217
- "data-highlighted": context.highlighted === value || void 0,
234
+ "data-highlighted": context.highlighted === id || void 0,
218
235
  "data-slot": "command-item",
219
236
  id,
220
237
  onClick: (event) => {
221
238
  onClick?.(event);
222
- if (!event.defaultPrevented && !disabled) context.selectItem(value);
239
+ if (!event.defaultPrevented && !disabled) context.selectItem(id);
223
240
  },
224
241
  onMouseEnter: (event) => {
225
242
  onMouseEnter?.(event);
226
- if (!disabled) context.setHighlighted(value);
243
+ if (!disabled) context.setHighlighted(id);
227
244
  },
228
245
  onKeyDown: (event) => {
229
246
  if ((event.key === "Enter" || event.key === " ") && !disabled) {
230
247
  event.preventDefault();
231
- context.selectItem(value);
248
+ context.selectItem(id);
232
249
  }
233
250
  },
234
251
  role: "option",
@@ -247,14 +264,16 @@ const CommandItemIndicator = (0, react.forwardRef)(function CommandItemIndicator
247
264
  });
248
265
  const CommandEmpty = (0, react.forwardRef)(function CommandEmpty({ className, ...props }, ref) {
249
266
  const context = useCommandContext();
250
- if (context.loading || context.items.length === 0 || context.items.some((item) => context.matches(item))) return null;
267
+ if (context.loading || context.items.some((item) => !item.disabled && context.matches(item))) return null;
251
268
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
252
269
  ...props,
253
270
  ref,
254
271
  className: require_cx.cx(require_command.command().empty, className),
255
272
  "aria-live": "polite",
273
+ "aria-disabled": "true",
256
274
  "data-slot": "command-empty",
257
- role: "presentation"
275
+ role: "option",
276
+ tabIndex: -1
258
277
  });
259
278
  });
260
279
  const CommandLoading = (0, react.forwardRef)(function CommandLoading({ className, ...props }, ref) {
@@ -264,8 +283,10 @@ const CommandLoading = (0, react.forwardRef)(function CommandLoading({ className
264
283
  ref,
265
284
  className: require_cx.cx(require_command.command().loading, className),
266
285
  "aria-live": "polite",
286
+ "aria-disabled": "true",
267
287
  "data-slot": "command-loading",
268
- role: "presentation"
288
+ role: "option",
289
+ tabIndex: -1
269
290
  });
270
291
  });
271
292
  const CommandSeparator = (0, react.forwardRef)(function CommandSeparator({ className, ...props }, ref) {
@@ -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 registerItem: (item: CommandItemRecord) => () => void;\n setItemElement: (id: string, element: HTMLDivElement | null) => void;\n setHighlighted: (value: string | null) => void;\n selectItem: (value: string) => void;\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 loading?: boolean;\n children?: ReactNode;\n}\n\nexport const CommandRoot = forwardRef<HTMLDivElement, CommandRootProps>(function CommandRoot(\n {\n children,\n className,\n defaultSearch = \"\",\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 = items.filter((item) => !item.disabled && matches(item));\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 (value: string) => {\n const item = itemsRef.current.get(value);\n if (item && !item.disabled && matches(item)) item.onSelect?.(item.value);\n },\n [matches],\n );\n\n useEffect(() => {\n if (!visibleItems.some((item) => item.value === highlighted)) {\n setHighlighted(visibleItems[0]?.value ?? null);\n }\n }, [highlighted, visibleItems]);\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n if (event.defaultPrevented) return;\n const currentIndex = visibleItems.findIndex((item) => item.value === 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]?.value ?? null);\n }\n } else if (event.key === \"Home\" || event.key === \"End\") {\n event.preventDefault();\n setHighlighted((event.key === \"Home\" ? visibleItems[0] : visibleItems.at(-1))?.value ?? 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\n const context = useMemo<CommandContextValue>(\n () => ({\n search,\n setSearch,\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 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={props[\"aria-disabled\"] || undefined}\n data-jaci-component=\"command\"\n data-slot=\"command\"\n onKeyDown={handleKeyDown}\n role=\"application\"\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, ...props },\n ref,\n) {\n const { highlighted, listId, search, setHighlighted, setSearch } = 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 ? `command-item-${highlighted}` : undefined}\n aria-controls={listId}\n aria-haspopup=\"listbox\"\n className={cx(command().input, className)}\n data-slot=\"command-input\"\n onChange={(event) => {\n handleChange(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 { items, listId, matches } = useCommandContext();\n const hasVisibleItems = items.some((item) => !item.disabled && matches(item));\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={hasVisibleItems ? \"listbox\" : undefined}\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 hasRegisteredItems = context.items.some((item) => item.groupId === groupId);\n const hasVisibleItems = context.items.some(\n (item) => item.groupId === groupId && context.matches(item),\n );\n return (\n <CommandGroupContext.Provider value={groupId}>\n <div\n {...props}\n ref={ref}\n aria-hidden={hasRegisteredItems && !hasVisibleItems ? true : undefined}\n className={cx(command().group, className)}\n data-slot=\"command-group\"\n hidden={hasRegisteredItems && !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-${value}`;\n const keywords = itemKeywords ?? EMPTY_KEYWORDS;\n const visible = context.matches({ value, keywords });\n\n useEffect(\n () =>\n context.registerItem({\n id: value,\n value,\n keywords,\n disabled,\n groupId,\n onSelect,\n element: null,\n }),\n [context.registerItem, disabled, groupId, 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(value, 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 === value}\n className={cx(command().item, className)}\n data-disabled={disabled || undefined}\n data-highlighted={context.highlighted === value || undefined}\n data-slot=\"command-item\"\n id={id}\n onClick={(event) => {\n onClick?.(event);\n if (!event.defaultPrevented && !disabled) context.selectItem(value);\n }}\n onMouseEnter={(event) => {\n onMouseEnter?.(event);\n if (!disabled) context.setHighlighted(value);\n }}\n onKeyDown={(event) => {\n if ((event.key === \"Enter\" || event.key === \" \") && !disabled) {\n event.preventDefault();\n context.selectItem(value);\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 (\n context.loading ||\n context.items.length === 0 ||\n context.items.some((item) => context.matches(item))\n )\n return null;\n return (\n <div\n {...props}\n ref={ref}\n className={cx(command().empty, className)}\n aria-live=\"polite\"\n data-slot=\"command-empty\"\n role=\"presentation\"\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 data-slot=\"command-loading\"\n role=\"presentation\"\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;\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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"}
@@ -8,6 +8,7 @@ interface CommandRootProps extends Omit<ComponentPropsWithoutRef<"div">, "childr
8
8
  filter?: CommandFilter;
9
9
  shouldFilter?: boolean;
10
10
  loopFocus?: boolean;
11
+ disabled?: boolean;
11
12
  loading?: boolean;
12
13
  children?: ReactNode;
13
14
  }
@@ -8,6 +8,7 @@ interface CommandRootProps extends Omit<ComponentPropsWithoutRef<"div">, "childr
8
8
  filter?: CommandFilter;
9
9
  shouldFilter?: boolean;
10
10
  loopFocus?: boolean;
11
+ disabled?: boolean;
11
12
  loading?: boolean;
12
13
  children?: ReactNode;
13
14
  }