@dxos/react-ui-searchlist 0.8.4-main.a4bbb77 → 0.8.4-main.ae835ea

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 (59) hide show
  1. package/dist/lib/browser/index.mjs +193 -216
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/node-esm/index.mjs +193 -216
  5. package/dist/lib/node-esm/index.mjs.map +4 -4
  6. package/dist/lib/node-esm/meta.json +1 -1
  7. package/dist/types/src/components/Combobox/Combobox.d.ts +44 -0
  8. package/dist/types/src/components/Combobox/Combobox.d.ts.map +1 -0
  9. package/dist/types/src/{composites/PopoverCombobox.stories.d.ts → components/Combobox/Combobox.stories.d.ts} +10 -1
  10. package/dist/types/src/components/Combobox/Combobox.stories.d.ts.map +1 -0
  11. package/dist/types/src/components/Combobox/index.d.ts +2 -0
  12. package/dist/types/src/components/Combobox/index.d.ts.map +1 -0
  13. package/dist/types/src/components/{Listbox.d.ts → Listbox/Listbox.d.ts} +6 -6
  14. package/dist/types/src/components/Listbox/Listbox.d.ts.map +1 -0
  15. package/dist/types/src/components/Listbox/Listbox.stories.d.ts +21 -0
  16. package/dist/types/src/components/Listbox/Listbox.stories.d.ts.map +1 -0
  17. package/dist/types/src/components/Listbox/index.d.ts +2 -0
  18. package/dist/types/src/components/Listbox/index.d.ts.map +1 -0
  19. package/dist/types/src/components/{SearchList.d.ts → SearchList/SearchList.d.ts} +5 -28
  20. package/dist/types/src/components/SearchList/SearchList.d.ts.map +1 -0
  21. package/dist/types/src/components/{SearchList.stories.d.ts → SearchList/SearchList.stories.d.ts} +9 -0
  22. package/dist/types/src/components/SearchList/SearchList.stories.d.ts.map +1 -0
  23. package/dist/types/src/components/SearchList/index.d.ts +2 -0
  24. package/dist/types/src/components/SearchList/index.d.ts.map +1 -0
  25. package/dist/types/src/components/index.d.ts +2 -1
  26. package/dist/types/src/components/index.d.ts.map +1 -1
  27. package/dist/types/src/index.d.ts +0 -1
  28. package/dist/types/src/index.d.ts.map +1 -1
  29. package/dist/types/src/translations.d.ts +3 -1
  30. package/dist/types/src/translations.d.ts.map +1 -1
  31. package/dist/types/tsconfig.tsbuildinfo +1 -1
  32. package/package.json +9 -9
  33. package/src/components/Combobox/Combobox.stories.tsx +57 -0
  34. package/src/components/Combobox/Combobox.tsx +335 -0
  35. package/src/components/Combobox/index.ts +5 -0
  36. package/src/components/Listbox/Listbox.stories.tsx +53 -0
  37. package/src/components/{Listbox.tsx → Listbox/Listbox.tsx} +33 -9
  38. package/src/components/Listbox/index.ts +5 -0
  39. package/src/components/{SearchList.stories.tsx → SearchList/SearchList.stories.tsx} +17 -8
  40. package/src/components/SearchList/SearchList.tsx +163 -0
  41. package/src/components/SearchList/index.ts +5 -0
  42. package/src/components/index.ts +2 -1
  43. package/src/index.ts +0 -1
  44. package/src/translations.ts +3 -1
  45. package/dist/types/src/components/Listbox.d.ts.map +0 -1
  46. package/dist/types/src/components/Listbox.stories.d.ts +0 -16
  47. package/dist/types/src/components/Listbox.stories.d.ts.map +0 -1
  48. package/dist/types/src/components/SearchList.d.ts.map +0 -1
  49. package/dist/types/src/components/SearchList.stories.d.ts.map +0 -1
  50. package/dist/types/src/composites/PopoverCombobox.d.ts +0 -32
  51. package/dist/types/src/composites/PopoverCombobox.d.ts.map +0 -1
  52. package/dist/types/src/composites/PopoverCombobox.stories.d.ts.map +0 -1
  53. package/dist/types/src/composites/index.d.ts +0 -2
  54. package/dist/types/src/composites/index.d.ts.map +0 -1
  55. package/src/components/Listbox.stories.tsx +0 -73
  56. package/src/components/SearchList.tsx +0 -251
  57. package/src/composites/PopoverCombobox.stories.tsx +0 -47
  58. package/src/composites/PopoverCombobox.tsx +0 -209
  59. package/src/composites/index.ts +0 -5
@@ -1,22 +1,42 @@
1
- // src/components/SearchList.tsx
2
- import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
1
+ // src/components/Combobox/Combobox.tsx
2
+ import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
3
3
  import { createContext } from "@radix-ui/react-context";
4
4
  import { useControllableState } from "@radix-ui/react-use-controllable-state";
5
+ import React2, { forwardRef as forwardRef2, useCallback } from "react";
6
+ import { Button, Icon, Popover } from "@dxos/react-ui";
7
+ import { useId } from "@dxos/react-ui";
8
+ import { mx as mx2, staticPlaceholderText } from "@dxos/react-ui-theme";
9
+
10
+ // src/components/SearchList/SearchList.tsx
11
+ import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
5
12
  import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from "cmdk";
6
- import React, { forwardRef, useCallback } from "react";
7
- import { Button, Icon, useDensityContext, useElevationContext, useId, useThemeContext } from "@dxos/react-ui";
8
- import { mx, staticPlaceholderText } from "@dxos/react-ui-theme";
9
- var COMBOBOX_NAME = "Combobox";
10
- var COMBOBOX_TRIGGER_NAME = "ComboboxTrigger";
13
+ import React, { forwardRef } from "react";
14
+ import { useDensityContext, useElevationContext, useThemeContext, useTranslation } from "@dxos/react-ui";
15
+ import { mx } from "@dxos/react-ui-theme";
16
+
17
+ // src/translations.ts
18
+ var translationKey = "react-ui-searchlist";
19
+ var translations = [
20
+ {
21
+ "en-US": {
22
+ [translationKey]: {
23
+ "search.placeholder": "Search..."
24
+ }
25
+ }
26
+ }
27
+ ];
28
+
29
+ // src/components/SearchList/SearchList.tsx
30
+ var commandItem = "flex items-center overflow-hidden";
31
+ var searchListItem = "plb-1 pli-2 rounded-sm select-none cursor-pointer data-[selected]:bg-hoverOverlay hover:bg-hoverOverlay";
11
32
  var SEARCHLIST_NAME = "SearchList";
12
33
  var SEARCHLIST_ITEM_NAME = "SearchListItem";
13
- var [ComboboxProvider, useComboboxContext] = createContext(COMBOBOX_NAME, {});
14
34
  var SearchListRoot = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
15
35
  var _effect = _useSignals();
16
36
  try {
17
37
  return /* @__PURE__ */ React.createElement(CommandRoot, {
18
38
  ...props,
19
- className: mx("", classNames),
39
+ className: mx(classNames),
20
40
  ref: forwardedRef
21
41
  }, children);
22
42
  } finally {
@@ -27,12 +47,15 @@ SearchListRoot.displayName = SEARCHLIST_NAME;
27
47
  var SearchListInput = /* @__PURE__ */ forwardRef(({ classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
28
48
  var _effect = _useSignals();
29
49
  try {
50
+ const { t } = useTranslation(translationKey);
51
+ const placeholder = props.placeholder ?? t("search.placeholder");
30
52
  const { hasIosKeyboard } = useThemeContext();
31
53
  const { tx } = useThemeContext();
32
54
  const density = useDensityContext(propsDensity);
33
55
  const elevation = useElevationContext(propsElevation);
34
56
  return /* @__PURE__ */ React.createElement(CommandInput, {
35
57
  ...props,
58
+ placeholder,
36
59
  className: tx("input.input", "input", {
37
60
  variant,
38
61
  disabled: props.disabled,
@@ -72,24 +95,11 @@ var SearchListEmpty = /* @__PURE__ */ forwardRef(({ children, classNames, ...pro
72
95
  _effect.f();
73
96
  }
74
97
  });
75
- var commandItem = "flex items-center overflow-hidden";
76
- var searchListItem = "plb-1 pli-2 rounded-sm select-none cursor-pointer data-[selected]:bg-hoverOverlay hover:bg-hoverOverlay";
77
- var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, onSelect, ...props }, forwardedRef) => {
98
+ var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
78
99
  var _effect = _useSignals();
79
100
  try {
80
- const { onValueChange, onOpenChange } = useComboboxContext(SEARCHLIST_ITEM_NAME);
81
- const handleSelect = useCallback((nextValue) => {
82
- onValueChange?.(nextValue);
83
- onOpenChange?.(false);
84
- onSelect?.(nextValue);
85
- }, [
86
- onValueChange,
87
- onOpenChange,
88
- onSelect
89
- ]);
90
101
  return /* @__PURE__ */ React.createElement(CommandItem, {
91
102
  ...props,
92
- onSelect: handleSelect,
93
103
  className: mx(searchListItem, classNames),
94
104
  ref: forwardedRef
95
105
  }, children);
@@ -98,8 +108,22 @@ var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, onSelec
98
108
  }
99
109
  });
100
110
  SearchListItem.displayName = SEARCHLIST_ITEM_NAME;
101
- var ComboboxRoot = ({ modalId: propsModalId, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, value: propsValue, defaultValue, onValueChange: propsOnValueChange, placeholder, children }) => {
102
- var _effect = _useSignals();
111
+ var SearchList = {
112
+ Root: SearchListRoot,
113
+ Input: SearchListInput,
114
+ Content: SearchListContent,
115
+ Empty: SearchListEmpty,
116
+ Item: SearchListItem
117
+ };
118
+
119
+ // src/components/Combobox/Combobox.tsx
120
+ var COMBOBOX_NAME = "Combobox";
121
+ var COMBOBOX_CONTENT_NAME = "ComboboxContent";
122
+ var COMBOBOX_ITEM_NAME = "ComboboxItem";
123
+ var COMBOBOX_TRIGGER_NAME = "ComboboxTrigger";
124
+ var [ComboboxProvider, useComboboxContext] = createContext(COMBOBOX_NAME, {});
125
+ var ComboboxRoot = ({ modal, modalId: propsModalId, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, value: propsValue, defaultValue, onValueChange: propsOnValueChange, placeholder, children }) => {
126
+ var _effect = _useSignals2();
103
127
  try {
104
128
  const modalId = useId(COMBOBOX_NAME, propsModalId);
105
129
  const [open = false, onOpenChange] = useControllableState({
@@ -112,22 +136,63 @@ var ComboboxRoot = ({ modalId: propsModalId, open: propsOpen, defaultOpen, onOpe
112
136
  onChange: propsOnValueChange,
113
137
  defaultProp: defaultValue
114
138
  });
115
- return /* @__PURE__ */ React.createElement(ComboboxProvider, {
139
+ return /* @__PURE__ */ React2.createElement(Popover.Root, {
140
+ open,
141
+ onOpenChange,
142
+ modal
143
+ }, /* @__PURE__ */ React2.createElement(ComboboxProvider, {
116
144
  isCombobox: true,
117
145
  modalId,
146
+ placeholder,
118
147
  open,
119
148
  onOpenChange,
120
149
  value,
121
- onValueChange,
122
- placeholder
123
- }, children);
150
+ onValueChange
151
+ }, children));
124
152
  } finally {
125
153
  _effect.f();
126
154
  }
127
155
  };
128
- ComboboxRoot.displayName = COMBOBOX_NAME;
129
- var ComboboxTrigger = /* @__PURE__ */ forwardRef(({ children, onClick, ...props }, forwardedRef) => {
130
- var _effect = _useSignals();
156
+ var ComboboxContent = /* @__PURE__ */ forwardRef2(({ side = "bottom", collisionPadding = 48, sideOffset, align, alignOffset, avoidCollisions, collisionBoundary, arrowPadding, sticky, hideWhenDetached, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, forceMount, children, classNames, ...props }, forwardedRef) => {
157
+ var _effect = _useSignals2();
158
+ try {
159
+ const { modalId } = useComboboxContext(COMBOBOX_CONTENT_NAME);
160
+ return /* @__PURE__ */ React2.createElement(Popover.Content, {
161
+ side,
162
+ sideOffset,
163
+ align,
164
+ alignOffset,
165
+ avoidCollisions,
166
+ collisionBoundary,
167
+ collisionPadding,
168
+ arrowPadding,
169
+ sticky,
170
+ hideWhenDetached,
171
+ onOpenAutoFocus,
172
+ onCloseAutoFocus,
173
+ onEscapeKeyDown,
174
+ onPointerDownOutside,
175
+ onFocusOutside,
176
+ onInteractOutside,
177
+ forceMount,
178
+ classNames: [
179
+ "is-[--radix-popover-trigger-width] max-bs-[--radix-popover-content-available-height] grid grid-rows-[min-content_1fr]",
180
+ classNames
181
+ ],
182
+ id: modalId,
183
+ ref: forwardedRef
184
+ }, /* @__PURE__ */ React2.createElement(SearchList.Root, {
185
+ ...props,
186
+ classNames: "contents density-fine",
187
+ role: "none"
188
+ }, children));
189
+ } finally {
190
+ _effect.f();
191
+ }
192
+ });
193
+ ComboboxContent.displayName = COMBOBOX_CONTENT_NAME;
194
+ var ComboboxTrigger = /* @__PURE__ */ forwardRef2(({ children, onClick, ...props }, forwardedRef) => {
195
+ var _effect = _useSignals2();
131
196
  try {
132
197
  const { modalId, open, onOpenChange, placeholder, value } = useComboboxContext(COMBOBOX_TRIGGER_NAME);
133
198
  const handleClick = useCallback((event) => {
@@ -137,7 +202,9 @@ var ComboboxTrigger = /* @__PURE__ */ forwardRef(({ children, onClick, ...props
137
202
  onClick,
138
203
  onOpenChange
139
204
  ]);
140
- return /* @__PURE__ */ React.createElement(Button, {
205
+ return /* @__PURE__ */ React2.createElement(Popover.Trigger, {
206
+ asChild: true
207
+ }, /* @__PURE__ */ React2.createElement(Button, {
141
208
  ...props,
142
209
  role: "combobox",
143
210
  "aria-expanded": open,
@@ -145,39 +212,98 @@ var ComboboxTrigger = /* @__PURE__ */ forwardRef(({ children, onClick, ...props
145
212
  "aria-haspopup": "dialog",
146
213
  onClick: handleClick,
147
214
  ref: forwardedRef
148
- }, children ?? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
149
- className: mx("font-normal text-start flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
150
- }, value || placeholder), /* @__PURE__ */ React.createElement(Icon, {
215
+ }, children ?? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", {
216
+ className: mx2("font-normal text-start flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
217
+ }, value || placeholder), /* @__PURE__ */ React2.createElement(Icon, {
151
218
  icon: "ph--caret-down--bold",
152
219
  size: 3
153
- })));
220
+ }))));
154
221
  } finally {
155
222
  _effect.f();
156
223
  }
157
224
  });
158
225
  ComboboxTrigger.displayName = COMBOBOX_TRIGGER_NAME;
159
- var SearchList = {
160
- Root: SearchListRoot,
161
- Input: SearchListInput,
162
- Content: SearchListContent,
163
- Empty: SearchListEmpty,
164
- Item: SearchListItem
165
- };
226
+ var ComboboxVirtualTrigger = Popover.VirtualTrigger;
227
+ var ComboboxInput = /* @__PURE__ */ forwardRef2(({ classNames, ...props }, forwardedRef) => {
228
+ var _effect = _useSignals2();
229
+ try {
230
+ return /* @__PURE__ */ React2.createElement(SearchList.Input, {
231
+ ...props,
232
+ classNames: [
233
+ "mli-cardSpacingChrome mbs-cardSpacingChrome mbe-0 is-[calc(100%-2*var(--dx-cardSpacingChrome))]",
234
+ classNames
235
+ ],
236
+ ref: forwardedRef
237
+ });
238
+ } finally {
239
+ _effect.f();
240
+ }
241
+ });
242
+ var ComboboxList = /* @__PURE__ */ forwardRef2(({ classNames, ...props }, forwardedRef) => {
243
+ var _effect = _useSignals2();
244
+ try {
245
+ return /* @__PURE__ */ React2.createElement(SearchList.Content, {
246
+ ...props,
247
+ classNames: [
248
+ "min-bs-0 overflow-y-auto plb-cardSpacingChrome",
249
+ classNames
250
+ ],
251
+ ref: forwardedRef
252
+ });
253
+ } finally {
254
+ _effect.f();
255
+ }
256
+ });
257
+ var ComboboxItem = /* @__PURE__ */ forwardRef2(({ classNames, onSelect, ...props }, forwardedRef) => {
258
+ var _effect = _useSignals2();
259
+ try {
260
+ const { onValueChange, onOpenChange } = useComboboxContext(COMBOBOX_ITEM_NAME);
261
+ const handleSelect = useCallback((nextValue) => {
262
+ onSelect?.(nextValue);
263
+ onValueChange?.(nextValue);
264
+ onOpenChange?.(false);
265
+ }, [
266
+ onSelect,
267
+ onValueChange,
268
+ onOpenChange
269
+ ]);
270
+ return /* @__PURE__ */ React2.createElement(SearchList.Item, {
271
+ ...props,
272
+ classNames: [
273
+ "mli-cardSpacingChrome pli-cardSpacingChrome",
274
+ classNames
275
+ ],
276
+ onSelect: handleSelect,
277
+ ref: forwardedRef
278
+ });
279
+ } finally {
280
+ _effect.f();
281
+ }
282
+ });
283
+ ComboboxItem.displayName = COMBOBOX_ITEM_NAME;
284
+ var ComboboxArrow = Popover.Arrow;
285
+ var ComboboxEmpty = SearchList.Empty;
166
286
  var Combobox = {
167
287
  Root: ComboboxRoot,
288
+ Content: ComboboxContent,
168
289
  Trigger: ComboboxTrigger,
169
- useComboboxContext
290
+ VirtualTrigger: ComboboxVirtualTrigger,
291
+ Input: ComboboxInput,
292
+ List: ComboboxList,
293
+ Item: ComboboxItem,
294
+ Arrow: ComboboxArrow,
295
+ Empty: ComboboxEmpty
170
296
  };
171
297
 
172
- // src/components/Listbox.tsx
173
- import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
298
+ // src/components/Listbox/Listbox.tsx
299
+ import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
174
300
  import { useArrowNavigationGroup } from "@fluentui/react-tabster";
175
301
  import { useComposedRefs } from "@radix-ui/react-compose-refs";
176
302
  import { createContextScope } from "@radix-ui/react-context";
177
303
  import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
178
- import React2, { forwardRef as forwardRef2, useCallback as useCallback2, useEffect, useRef } from "react";
304
+ import React3, { forwardRef as forwardRef3, useCallback as useCallback2, useEffect, useRef } from "react";
179
305
  import { Icon as Icon2 } from "@dxos/react-ui";
180
- import { mx as mx2 } from "@dxos/react-ui-theme";
306
+ import { mx as mx3 } from "@dxos/react-ui-theme";
181
307
  var LISTBOX_NAME = "Listbox";
182
308
  var LISTBOX_OPTION_NAME = "ListboxOption";
183
309
  var LISTBOX_OPTION_LABEL_NAME = "ListboxOptionLabel";
@@ -188,8 +314,8 @@ var [createListboxOptionContext, createListboxOptionScope] = createContextScope(
188
314
  ]);
189
315
  var [ListboxProvider, useListboxContext] = createListboxContext(LISTBOX_NAME);
190
316
  var [ListboxOptionProvider, useListboxOptionContext] = createListboxOptionContext(LISTBOX_OPTION_NAME);
191
- var ListboxRoot = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
192
- var _effect = _useSignals2();
317
+ var ListboxRoot = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
318
+ var _effect = _useSignals3();
193
319
  try {
194
320
  const { __listboxScope, children, classNames, value: propsValue, defaultValue, onValueChange, autoFocus, ...rootProps } = props;
195
321
  const arrowGroup = useArrowNavigationGroup({
@@ -210,14 +336,14 @@ var ListboxRoot = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
210
336
  }, [
211
337
  autoFocus
212
338
  ]);
213
- return /* @__PURE__ */ React2.createElement(ListboxProvider, {
339
+ return /* @__PURE__ */ React3.createElement(ListboxProvider, {
214
340
  scope: __listboxScope,
215
341
  selectedValue,
216
342
  onValueChange: handleValueChange
217
- }, /* @__PURE__ */ React2.createElement("ul", {
343
+ }, /* @__PURE__ */ React3.createElement("ul", {
218
344
  role: "listbox",
219
345
  ...rootProps,
220
- className: mx2("p-cardSpacingChrome", classNames),
346
+ className: mx3("is-full p-cardSpacingChrome", classNames),
221
347
  ref: rootRef,
222
348
  ...arrowGroup
223
349
  }, children));
@@ -226,8 +352,8 @@ var ListboxRoot = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
226
352
  }
227
353
  });
228
354
  ListboxRoot.displayName = LISTBOX_NAME;
229
- var ListboxOption = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
230
- var _effect = _useSignals2();
355
+ var ListboxOption = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
356
+ var _effect = _useSignals3();
231
357
  try {
232
358
  const { __listboxScope, children, classNames, value, ...rootProps } = props;
233
359
  const { selectedValue, onValueChange } = useListboxContext(LISTBOX_OPTION_NAME, __listboxScope);
@@ -238,16 +364,16 @@ var ListboxOption = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
238
364
  value,
239
365
  onValueChange
240
366
  ]);
241
- return /* @__PURE__ */ React2.createElement(ListboxOptionProvider, {
367
+ return /* @__PURE__ */ React3.createElement(ListboxOptionProvider, {
242
368
  scope: __listboxScope,
243
369
  value,
244
370
  isSelected
245
- }, /* @__PURE__ */ React2.createElement("li", {
371
+ }, /* @__PURE__ */ React3.createElement("li", {
246
372
  role: "option",
247
373
  ...rootProps,
248
374
  "aria-selected": isSelected,
249
375
  tabIndex: 0,
250
- className: mx2("dx-focus-ring", commandItem, searchListItem, classNames),
376
+ className: mx3("dx-focus-ring", commandItem, searchListItem, classNames),
251
377
  onClick: handleSelect,
252
378
  onKeyDown: ({ key }) => {
253
379
  if ([
@@ -264,12 +390,12 @@ var ListboxOption = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
264
390
  }
265
391
  });
266
392
  ListboxOption.displayName = LISTBOX_OPTION_NAME;
267
- var ListboxOptionLabel = /* @__PURE__ */ forwardRef2(({ children, classNames, ...rootProps }, forwardedRef) => {
268
- var _effect = _useSignals2();
393
+ var ListboxOptionLabel = /* @__PURE__ */ forwardRef3(({ children, classNames, ...rootProps }, forwardedRef) => {
394
+ var _effect = _useSignals3();
269
395
  try {
270
- return /* @__PURE__ */ React2.createElement("span", {
396
+ return /* @__PURE__ */ React3.createElement("span", {
271
397
  ...rootProps,
272
- className: mx2("grow truncate", classNames),
398
+ className: mx3("grow truncate", classNames),
273
399
  ref: forwardedRef
274
400
  }, children);
275
401
  } finally {
@@ -277,15 +403,15 @@ var ListboxOptionLabel = /* @__PURE__ */ forwardRef2(({ children, classNames, ..
277
403
  }
278
404
  });
279
405
  ListboxOptionLabel.displayName = LISTBOX_OPTION_LABEL_NAME;
280
- var ListboxOptionIndicator = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
281
- var _effect = _useSignals2();
406
+ var ListboxOptionIndicator = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
407
+ var _effect = _useSignals3();
282
408
  try {
283
409
  const { __listboxOptionScope, classNames, ...rootProps } = props;
284
410
  const { isSelected } = useListboxOptionContext(LISTBOX_OPTION_INDICATOR_NAME, __listboxOptionScope);
285
- return /* @__PURE__ */ React2.createElement(Icon2, {
411
+ return /* @__PURE__ */ React3.createElement(Icon2, {
286
412
  icon: "ph--check--regular",
287
413
  ...rootProps,
288
- classNames: mx2(!isSelected && "invisible", classNames),
414
+ classNames: mx3(!isSelected && "invisible", classNames),
289
415
  ref: forwardedRef
290
416
  });
291
417
  } finally {
@@ -299,158 +425,9 @@ var Listbox = {
299
425
  OptionLabel: ListboxOptionLabel,
300
426
  OptionIndicator: ListboxOptionIndicator
301
427
  };
302
-
303
- // src/composites/PopoverCombobox.tsx
304
- import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
305
- import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
306
- import React3, { forwardRef as forwardRef3 } from "react";
307
- import { Popover } from "@dxos/react-ui";
308
- var PopoverComboboxRoot = ({ modal, children, open: propsOpen, onOpenChange: propsOnOpenChange, defaultOpen, ...props }) => {
309
- var _effect = _useSignals3();
310
- try {
311
- const [open, onOpenChange] = useControllableState3({
312
- prop: propsOpen,
313
- onChange: propsOnOpenChange,
314
- defaultProp: defaultOpen
315
- });
316
- return /* @__PURE__ */ React3.createElement(Combobox.Root, {
317
- open,
318
- onOpenChange,
319
- ...props
320
- }, /* @__PURE__ */ React3.createElement(Popover.Root, {
321
- open,
322
- onOpenChange,
323
- modal
324
- }, children));
325
- } finally {
326
- _effect.f();
327
- }
328
- };
329
- var POPOVER_COMBOBOX_CONTENT_NAME = "PopoverComboboxContent";
330
- var PopoverComboboxContent = /* @__PURE__ */ forwardRef3(({ side = "bottom", collisionPadding = 48, sideOffset, align, alignOffset, avoidCollisions, collisionBoundary, arrowPadding, sticky, hideWhenDetached, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, forceMount, children, classNames, ...props }, forwardedRef) => {
331
- var _effect = _useSignals3();
332
- try {
333
- const { modalId } = Combobox.useComboboxContext(POPOVER_COMBOBOX_CONTENT_NAME);
334
- return /* @__PURE__ */ React3.createElement(Popover.Content, {
335
- side,
336
- sideOffset,
337
- align,
338
- alignOffset,
339
- avoidCollisions,
340
- collisionBoundary,
341
- collisionPadding,
342
- arrowPadding,
343
- sticky,
344
- hideWhenDetached,
345
- onOpenAutoFocus,
346
- onCloseAutoFocus,
347
- onEscapeKeyDown,
348
- onPointerDownOutside,
349
- onFocusOutside,
350
- onInteractOutside,
351
- forceMount,
352
- classNames: [
353
- "is-[--radix-popover-trigger-width] max-bs-[--radix-popover-content-available-height] grid grid-rows-[min-content_1fr]",
354
- classNames
355
- ],
356
- id: modalId,
357
- ref: forwardedRef
358
- }, /* @__PURE__ */ React3.createElement(SearchList.Root, {
359
- ...props,
360
- classNames: "contents density-fine",
361
- role: "none"
362
- }, children));
363
- } finally {
364
- _effect.f();
365
- }
366
- });
367
- PopoverComboboxContent.displayName = POPOVER_COMBOBOX_CONTENT_NAME;
368
- var PopoverComboboxTrigger = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
369
- var _effect = _useSignals3();
370
- try {
371
- return /* @__PURE__ */ React3.createElement(Popover.Trigger, {
372
- asChild: true
373
- }, /* @__PURE__ */ React3.createElement(Combobox.Trigger, {
374
- ...props,
375
- ref: forwardedRef
376
- }));
377
- } finally {
378
- _effect.f();
379
- }
380
- });
381
- var PopoverComboboxVirtualTrigger = Popover.VirtualTrigger;
382
- var PopoverComboboxInput = /* @__PURE__ */ forwardRef3(({ classNames, ...props }, forwardedRef) => {
383
- var _effect = _useSignals3();
384
- try {
385
- return /* @__PURE__ */ React3.createElement(SearchList.Input, {
386
- ...props,
387
- classNames: [
388
- "mli-cardSpacingChrome mbs-cardSpacingChrome mbe-0 is-[calc(100%-2*var(--dx-cardSpacingChrome))]",
389
- classNames
390
- ],
391
- ref: forwardedRef
392
- });
393
- } finally {
394
- _effect.f();
395
- }
396
- });
397
- var PopoverComboboxList = /* @__PURE__ */ forwardRef3(({ classNames, ...props }, forwardedRef) => {
398
- var _effect = _useSignals3();
399
- try {
400
- return /* @__PURE__ */ React3.createElement(SearchList.Content, {
401
- ...props,
402
- classNames: [
403
- "min-bs-0 overflow-y-auto plb-cardSpacingChrome",
404
- classNames
405
- ],
406
- ref: forwardedRef
407
- });
408
- } finally {
409
- _effect.f();
410
- }
411
- });
412
- var PopoverComboboxItem = /* @__PURE__ */ forwardRef3(({ classNames, ...props }, forwardedRef) => {
413
- var _effect = _useSignals3();
414
- try {
415
- return /* @__PURE__ */ React3.createElement(SearchList.Item, {
416
- ...props,
417
- classNames: [
418
- "mli-cardSpacingChrome pli-cardSpacingChrome",
419
- classNames
420
- ],
421
- ref: forwardedRef
422
- });
423
- } finally {
424
- _effect.f();
425
- }
426
- });
427
- var PopoverComboboxArrow = Popover.Arrow;
428
- var PopoverComboboxEmpty = SearchList.Empty;
429
- var PopoverCombobox = {
430
- Root: PopoverComboboxRoot,
431
- Content: PopoverComboboxContent,
432
- Trigger: PopoverComboboxTrigger,
433
- VirtualTrigger: PopoverComboboxVirtualTrigger,
434
- Input: PopoverComboboxInput,
435
- List: PopoverComboboxList,
436
- Item: PopoverComboboxItem,
437
- Arrow: PopoverComboboxArrow,
438
- Empty: PopoverComboboxEmpty
439
- };
440
-
441
- // src/translations.ts
442
- var translationKey = "react-ui-searchlist";
443
- var translations = [
444
- {
445
- "en-US": {
446
- [translationKey]: {}
447
- }
448
- }
449
- ];
450
428
  export {
451
429
  Combobox,
452
430
  Listbox,
453
- PopoverCombobox,
454
431
  SearchList,
455
432
  commandItem,
456
433
  createListboxScope,