@dxos/react-ui-searchlist 0.8.4-main.84f28bd → 0.8.4-main.a4bbb77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +204 -35
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +204 -35
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/Listbox.d.ts +31 -0
- package/dist/types/src/components/Listbox.d.ts.map +1 -0
- package/dist/types/src/components/Listbox.stories.d.ts +16 -0
- package/dist/types/src/components/Listbox.stories.d.ts.map +1 -0
- package/dist/types/src/components/SearchList.d.ts +4 -1
- package/dist/types/src/components/SearchList.d.ts.map +1 -1
- package/dist/types/src/components/SearchList.stories.d.ts +10 -9
- package/dist/types/src/components/SearchList.stories.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +1 -0
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/composites/PopoverCombobox.d.ts +3 -3
- package/dist/types/src/composites/PopoverCombobox.d.ts.map +1 -1
- package/dist/types/src/composites/PopoverCombobox.stories.d.ts +6 -22
- package/dist/types/src/composites/PopoverCombobox.stories.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +17 -16
- package/src/components/Listbox.stories.tsx +73 -0
- package/src/components/Listbox.tsx +185 -0
- package/src/components/SearchList.stories.tsx +17 -9
- package/src/components/SearchList.tsx +13 -12
- package/src/components/index.ts +1 -0
- package/src/composites/PopoverCombobox.stories.tsx +10 -7
- package/src/composites/PopoverCombobox.tsx +39 -16
|
@@ -2,13 +2,12 @@ import { createRequire } from 'node:module';const require = createRequire(import
|
|
|
2
2
|
|
|
3
3
|
// src/components/SearchList.tsx
|
|
4
4
|
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
5
|
-
import { CaretDown } from "@phosphor-icons/react";
|
|
6
5
|
import { createContext } from "@radix-ui/react-context";
|
|
7
6
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
8
7
|
import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from "cmdk";
|
|
9
8
|
import React, { forwardRef, useCallback } from "react";
|
|
10
|
-
import { Button, useDensityContext, useElevationContext, useId, useThemeContext } from "@dxos/react-ui";
|
|
11
|
-
import {
|
|
9
|
+
import { Button, Icon, useDensityContext, useElevationContext, useId, useThemeContext } from "@dxos/react-ui";
|
|
10
|
+
import { mx, staticPlaceholderText } from "@dxos/react-ui-theme";
|
|
12
11
|
var COMBOBOX_NAME = "Combobox";
|
|
13
12
|
var COMBOBOX_TRIGGER_NAME = "ComboboxTrigger";
|
|
14
13
|
var SEARCHLIST_NAME = "SearchList";
|
|
@@ -27,7 +26,7 @@ var SearchListRoot = /* @__PURE__ */ forwardRef(({ children, classNames, ...prop
|
|
|
27
26
|
}
|
|
28
27
|
});
|
|
29
28
|
SearchListRoot.displayName = SEARCHLIST_NAME;
|
|
30
|
-
var SearchListInput = /* @__PURE__ */ forwardRef(({
|
|
29
|
+
var SearchListInput = /* @__PURE__ */ forwardRef(({ classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
|
|
31
30
|
var _effect = _useSignals();
|
|
32
31
|
try {
|
|
33
32
|
const { hasIosKeyboard } = useThemeContext();
|
|
@@ -75,6 +74,8 @@ var SearchListEmpty = /* @__PURE__ */ forwardRef(({ children, classNames, ...pro
|
|
|
75
74
|
_effect.f();
|
|
76
75
|
}
|
|
77
76
|
});
|
|
77
|
+
var commandItem = "flex items-center overflow-hidden";
|
|
78
|
+
var searchListItem = "plb-1 pli-2 rounded-sm select-none cursor-pointer data-[selected]:bg-hoverOverlay hover:bg-hoverOverlay";
|
|
78
79
|
var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, onSelect, ...props }, forwardedRef) => {
|
|
79
80
|
var _effect = _useSignals();
|
|
80
81
|
try {
|
|
@@ -91,7 +92,7 @@ var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, onSelec
|
|
|
91
92
|
return /* @__PURE__ */ React.createElement(CommandItem, {
|
|
92
93
|
...props,
|
|
93
94
|
onSelect: handleSelect,
|
|
94
|
-
className: mx(
|
|
95
|
+
className: mx(searchListItem, classNames),
|
|
95
96
|
ref: forwardedRef
|
|
96
97
|
}, children);
|
|
97
98
|
} finally {
|
|
@@ -148,9 +149,9 @@ var ComboboxTrigger = /* @__PURE__ */ forwardRef(({ children, onClick, ...props
|
|
|
148
149
|
ref: forwardedRef
|
|
149
150
|
}, children ?? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
|
|
150
151
|
className: mx("font-normal text-start flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
|
|
151
|
-
}, value || placeholder), /* @__PURE__ */ React.createElement(
|
|
152
|
-
|
|
153
|
-
|
|
152
|
+
}, value || placeholder), /* @__PURE__ */ React.createElement(Icon, {
|
|
153
|
+
icon: "ph--caret-down--bold",
|
|
154
|
+
size: 3
|
|
154
155
|
})));
|
|
155
156
|
} finally {
|
|
156
157
|
_effect.f();
|
|
@@ -170,24 +171,155 @@ var Combobox = {
|
|
|
170
171
|
useComboboxContext
|
|
171
172
|
};
|
|
172
173
|
|
|
173
|
-
// src/
|
|
174
|
+
// src/components/Listbox.tsx
|
|
174
175
|
import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
|
|
176
|
+
import { useArrowNavigationGroup } from "@fluentui/react-tabster";
|
|
177
|
+
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
178
|
+
import { createContextScope } from "@radix-ui/react-context";
|
|
175
179
|
import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
|
|
176
|
-
import React2, { forwardRef as forwardRef2 } from "react";
|
|
180
|
+
import React2, { forwardRef as forwardRef2, useCallback as useCallback2, useEffect, useRef } from "react";
|
|
181
|
+
import { Icon as Icon2 } from "@dxos/react-ui";
|
|
182
|
+
import { mx as mx2 } from "@dxos/react-ui-theme";
|
|
183
|
+
var LISTBOX_NAME = "Listbox";
|
|
184
|
+
var LISTBOX_OPTION_NAME = "ListboxOption";
|
|
185
|
+
var LISTBOX_OPTION_LABEL_NAME = "ListboxOptionLabel";
|
|
186
|
+
var LISTBOX_OPTION_INDICATOR_NAME = "ListboxOptionIndicator";
|
|
187
|
+
var [createListboxContext, createListboxScope] = createContextScope(LISTBOX_NAME, []);
|
|
188
|
+
var [createListboxOptionContext, createListboxOptionScope] = createContextScope(LISTBOX_OPTION_NAME, [
|
|
189
|
+
createListboxScope
|
|
190
|
+
]);
|
|
191
|
+
var [ListboxProvider, useListboxContext] = createListboxContext(LISTBOX_NAME);
|
|
192
|
+
var [ListboxOptionProvider, useListboxOptionContext] = createListboxOptionContext(LISTBOX_OPTION_NAME);
|
|
193
|
+
var ListboxRoot = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
|
|
194
|
+
var _effect = _useSignals2();
|
|
195
|
+
try {
|
|
196
|
+
const { __listboxScope, children, classNames, value: propsValue, defaultValue, onValueChange, autoFocus, ...rootProps } = props;
|
|
197
|
+
const arrowGroup = useArrowNavigationGroup({
|
|
198
|
+
axis: "vertical"
|
|
199
|
+
});
|
|
200
|
+
const ref = useRef(null);
|
|
201
|
+
const rootRef = useComposedRefs(ref, forwardedRef);
|
|
202
|
+
const [selectedValue, setSelectedValue] = useControllableState2({
|
|
203
|
+
prop: propsValue,
|
|
204
|
+
defaultProp: defaultValue,
|
|
205
|
+
onChange: onValueChange
|
|
206
|
+
});
|
|
207
|
+
const handleValueChange = (value) => {
|
|
208
|
+
setSelectedValue(value);
|
|
209
|
+
};
|
|
210
|
+
useEffect(() => {
|
|
211
|
+
ref.current?.querySelector('[aria-selected="true"]')?.focus();
|
|
212
|
+
}, [
|
|
213
|
+
autoFocus
|
|
214
|
+
]);
|
|
215
|
+
return /* @__PURE__ */ React2.createElement(ListboxProvider, {
|
|
216
|
+
scope: __listboxScope,
|
|
217
|
+
selectedValue,
|
|
218
|
+
onValueChange: handleValueChange
|
|
219
|
+
}, /* @__PURE__ */ React2.createElement("ul", {
|
|
220
|
+
role: "listbox",
|
|
221
|
+
...rootProps,
|
|
222
|
+
className: mx2("p-cardSpacingChrome", classNames),
|
|
223
|
+
ref: rootRef,
|
|
224
|
+
...arrowGroup
|
|
225
|
+
}, children));
|
|
226
|
+
} finally {
|
|
227
|
+
_effect.f();
|
|
228
|
+
}
|
|
229
|
+
});
|
|
230
|
+
ListboxRoot.displayName = LISTBOX_NAME;
|
|
231
|
+
var ListboxOption = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
|
|
232
|
+
var _effect = _useSignals2();
|
|
233
|
+
try {
|
|
234
|
+
const { __listboxScope, children, classNames, value, ...rootProps } = props;
|
|
235
|
+
const { selectedValue, onValueChange } = useListboxContext(LISTBOX_OPTION_NAME, __listboxScope);
|
|
236
|
+
const isSelected = selectedValue === value;
|
|
237
|
+
const handleSelect = useCallback2(() => {
|
|
238
|
+
onValueChange(value);
|
|
239
|
+
}, [
|
|
240
|
+
value,
|
|
241
|
+
onValueChange
|
|
242
|
+
]);
|
|
243
|
+
return /* @__PURE__ */ React2.createElement(ListboxOptionProvider, {
|
|
244
|
+
scope: __listboxScope,
|
|
245
|
+
value,
|
|
246
|
+
isSelected
|
|
247
|
+
}, /* @__PURE__ */ React2.createElement("li", {
|
|
248
|
+
role: "option",
|
|
249
|
+
...rootProps,
|
|
250
|
+
"aria-selected": isSelected,
|
|
251
|
+
tabIndex: 0,
|
|
252
|
+
className: mx2("dx-focus-ring", commandItem, searchListItem, classNames),
|
|
253
|
+
onClick: handleSelect,
|
|
254
|
+
onKeyDown: ({ key }) => {
|
|
255
|
+
if ([
|
|
256
|
+
"Enter",
|
|
257
|
+
" "
|
|
258
|
+
].includes(key)) {
|
|
259
|
+
handleSelect();
|
|
260
|
+
}
|
|
261
|
+
},
|
|
262
|
+
ref: forwardedRef
|
|
263
|
+
}, children));
|
|
264
|
+
} finally {
|
|
265
|
+
_effect.f();
|
|
266
|
+
}
|
|
267
|
+
});
|
|
268
|
+
ListboxOption.displayName = LISTBOX_OPTION_NAME;
|
|
269
|
+
var ListboxOptionLabel = /* @__PURE__ */ forwardRef2(({ children, classNames, ...rootProps }, forwardedRef) => {
|
|
270
|
+
var _effect = _useSignals2();
|
|
271
|
+
try {
|
|
272
|
+
return /* @__PURE__ */ React2.createElement("span", {
|
|
273
|
+
...rootProps,
|
|
274
|
+
className: mx2("grow truncate", classNames),
|
|
275
|
+
ref: forwardedRef
|
|
276
|
+
}, children);
|
|
277
|
+
} finally {
|
|
278
|
+
_effect.f();
|
|
279
|
+
}
|
|
280
|
+
});
|
|
281
|
+
ListboxOptionLabel.displayName = LISTBOX_OPTION_LABEL_NAME;
|
|
282
|
+
var ListboxOptionIndicator = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
|
|
283
|
+
var _effect = _useSignals2();
|
|
284
|
+
try {
|
|
285
|
+
const { __listboxOptionScope, classNames, ...rootProps } = props;
|
|
286
|
+
const { isSelected } = useListboxOptionContext(LISTBOX_OPTION_INDICATOR_NAME, __listboxOptionScope);
|
|
287
|
+
return /* @__PURE__ */ React2.createElement(Icon2, {
|
|
288
|
+
icon: "ph--check--regular",
|
|
289
|
+
...rootProps,
|
|
290
|
+
classNames: mx2(!isSelected && "invisible", classNames),
|
|
291
|
+
ref: forwardedRef
|
|
292
|
+
});
|
|
293
|
+
} finally {
|
|
294
|
+
_effect.f();
|
|
295
|
+
}
|
|
296
|
+
});
|
|
297
|
+
ListboxOptionIndicator.displayName = LISTBOX_OPTION_INDICATOR_NAME;
|
|
298
|
+
var Listbox = {
|
|
299
|
+
Root: ListboxRoot,
|
|
300
|
+
Option: ListboxOption,
|
|
301
|
+
OptionLabel: ListboxOptionLabel,
|
|
302
|
+
OptionIndicator: ListboxOptionIndicator
|
|
303
|
+
};
|
|
304
|
+
|
|
305
|
+
// src/composites/PopoverCombobox.tsx
|
|
306
|
+
import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
|
|
307
|
+
import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
|
|
308
|
+
import React3, { forwardRef as forwardRef3 } from "react";
|
|
177
309
|
import { Popover } from "@dxos/react-ui";
|
|
178
310
|
var PopoverComboboxRoot = ({ modal, children, open: propsOpen, onOpenChange: propsOnOpenChange, defaultOpen, ...props }) => {
|
|
179
|
-
var _effect =
|
|
311
|
+
var _effect = _useSignals3();
|
|
180
312
|
try {
|
|
181
|
-
const [open, onOpenChange] =
|
|
313
|
+
const [open, onOpenChange] = useControllableState3({
|
|
182
314
|
prop: propsOpen,
|
|
183
315
|
onChange: propsOnOpenChange,
|
|
184
316
|
defaultProp: defaultOpen
|
|
185
317
|
});
|
|
186
|
-
return /* @__PURE__ */
|
|
318
|
+
return /* @__PURE__ */ React3.createElement(Combobox.Root, {
|
|
187
319
|
open,
|
|
188
320
|
onOpenChange,
|
|
189
321
|
...props
|
|
190
|
-
}, /* @__PURE__ */
|
|
322
|
+
}, /* @__PURE__ */ React3.createElement(Popover.Root, {
|
|
191
323
|
open,
|
|
192
324
|
onOpenChange,
|
|
193
325
|
modal
|
|
@@ -197,11 +329,11 @@ var PopoverComboboxRoot = ({ modal, children, open: propsOpen, onOpenChange: pro
|
|
|
197
329
|
}
|
|
198
330
|
};
|
|
199
331
|
var POPOVER_COMBOBOX_CONTENT_NAME = "PopoverComboboxContent";
|
|
200
|
-
var PopoverComboboxContent = /* @__PURE__ */
|
|
201
|
-
var _effect =
|
|
332
|
+
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) => {
|
|
333
|
+
var _effect = _useSignals3();
|
|
202
334
|
try {
|
|
203
335
|
const { modalId } = Combobox.useComboboxContext(POPOVER_COMBOBOX_CONTENT_NAME);
|
|
204
|
-
return /* @__PURE__ */
|
|
336
|
+
return /* @__PURE__ */ React3.createElement(Popover.Content, {
|
|
205
337
|
side,
|
|
206
338
|
sideOffset,
|
|
207
339
|
align,
|
|
@@ -219,25 +351,28 @@ var PopoverComboboxContent = /* @__PURE__ */ forwardRef2(({ side = "bottom", col
|
|
|
219
351
|
onFocusOutside,
|
|
220
352
|
onInteractOutside,
|
|
221
353
|
forceMount,
|
|
222
|
-
classNames
|
|
354
|
+
classNames: [
|
|
355
|
+
"is-[--radix-popover-trigger-width] max-bs-[--radix-popover-content-available-height] grid grid-rows-[min-content_1fr]",
|
|
356
|
+
classNames
|
|
357
|
+
],
|
|
223
358
|
id: modalId,
|
|
224
359
|
ref: forwardedRef
|
|
225
|
-
}, /* @__PURE__ */
|
|
360
|
+
}, /* @__PURE__ */ React3.createElement(SearchList.Root, {
|
|
226
361
|
...props,
|
|
227
|
-
classNames: "contents",
|
|
362
|
+
classNames: "contents density-fine",
|
|
228
363
|
role: "none"
|
|
229
|
-
}, children))
|
|
364
|
+
}, children));
|
|
230
365
|
} finally {
|
|
231
366
|
_effect.f();
|
|
232
367
|
}
|
|
233
368
|
});
|
|
234
369
|
PopoverComboboxContent.displayName = POPOVER_COMBOBOX_CONTENT_NAME;
|
|
235
|
-
var PopoverComboboxTrigger = /* @__PURE__ */
|
|
236
|
-
var _effect =
|
|
370
|
+
var PopoverComboboxTrigger = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
|
|
371
|
+
var _effect = _useSignals3();
|
|
237
372
|
try {
|
|
238
|
-
return /* @__PURE__ */
|
|
373
|
+
return /* @__PURE__ */ React3.createElement(Popover.Trigger, {
|
|
239
374
|
asChild: true
|
|
240
|
-
}, /* @__PURE__ */
|
|
375
|
+
}, /* @__PURE__ */ React3.createElement(Combobox.Trigger, {
|
|
241
376
|
...props,
|
|
242
377
|
ref: forwardedRef
|
|
243
378
|
}));
|
|
@@ -246,22 +381,51 @@ var PopoverComboboxTrigger = /* @__PURE__ */ forwardRef2((props, forwardedRef) =
|
|
|
246
381
|
}
|
|
247
382
|
});
|
|
248
383
|
var PopoverComboboxVirtualTrigger = Popover.VirtualTrigger;
|
|
249
|
-
var PopoverComboboxInput =
|
|
250
|
-
var
|
|
251
|
-
var _effect = _useSignals2();
|
|
384
|
+
var PopoverComboboxInput = /* @__PURE__ */ forwardRef3(({ classNames, ...props }, forwardedRef) => {
|
|
385
|
+
var _effect = _useSignals3();
|
|
252
386
|
try {
|
|
253
|
-
return /* @__PURE__ */
|
|
254
|
-
constrainInline,
|
|
255
|
-
constrainBlock
|
|
256
|
-
}, /* @__PURE__ */ React2.createElement(SearchList.Content, {
|
|
387
|
+
return /* @__PURE__ */ React3.createElement(SearchList.Input, {
|
|
257
388
|
...props,
|
|
389
|
+
classNames: [
|
|
390
|
+
"mli-cardSpacingChrome mbs-cardSpacingChrome mbe-0 is-[calc(100%-2*var(--dx-cardSpacingChrome))]",
|
|
391
|
+
classNames
|
|
392
|
+
],
|
|
258
393
|
ref: forwardedRef
|
|
259
|
-
})
|
|
394
|
+
});
|
|
395
|
+
} finally {
|
|
396
|
+
_effect.f();
|
|
397
|
+
}
|
|
398
|
+
});
|
|
399
|
+
var PopoverComboboxList = /* @__PURE__ */ forwardRef3(({ classNames, ...props }, forwardedRef) => {
|
|
400
|
+
var _effect = _useSignals3();
|
|
401
|
+
try {
|
|
402
|
+
return /* @__PURE__ */ React3.createElement(SearchList.Content, {
|
|
403
|
+
...props,
|
|
404
|
+
classNames: [
|
|
405
|
+
"min-bs-0 overflow-y-auto plb-cardSpacingChrome",
|
|
406
|
+
classNames
|
|
407
|
+
],
|
|
408
|
+
ref: forwardedRef
|
|
409
|
+
});
|
|
410
|
+
} finally {
|
|
411
|
+
_effect.f();
|
|
412
|
+
}
|
|
413
|
+
});
|
|
414
|
+
var PopoverComboboxItem = /* @__PURE__ */ forwardRef3(({ classNames, ...props }, forwardedRef) => {
|
|
415
|
+
var _effect = _useSignals3();
|
|
416
|
+
try {
|
|
417
|
+
return /* @__PURE__ */ React3.createElement(SearchList.Item, {
|
|
418
|
+
...props,
|
|
419
|
+
classNames: [
|
|
420
|
+
"mli-cardSpacingChrome pli-cardSpacingChrome",
|
|
421
|
+
classNames
|
|
422
|
+
],
|
|
423
|
+
ref: forwardedRef
|
|
424
|
+
});
|
|
260
425
|
} finally {
|
|
261
426
|
_effect.f();
|
|
262
427
|
}
|
|
263
428
|
});
|
|
264
|
-
var PopoverComboboxItem = SearchList.Item;
|
|
265
429
|
var PopoverComboboxArrow = Popover.Arrow;
|
|
266
430
|
var PopoverComboboxEmpty = SearchList.Empty;
|
|
267
431
|
var PopoverCombobox = {
|
|
@@ -287,9 +451,14 @@ var translations = [
|
|
|
287
451
|
];
|
|
288
452
|
export {
|
|
289
453
|
Combobox,
|
|
454
|
+
Listbox,
|
|
290
455
|
PopoverCombobox,
|
|
291
456
|
SearchList,
|
|
457
|
+
commandItem,
|
|
458
|
+
createListboxScope,
|
|
459
|
+
searchListItem,
|
|
292
460
|
translationKey,
|
|
293
|
-
translations
|
|
461
|
+
translations,
|
|
462
|
+
useListboxContext
|
|
294
463
|
};
|
|
295
464
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/SearchList.tsx", "../../../src/composites/PopoverCombobox.tsx", "../../../src/translations.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { CaretDown } from '@phosphor-icons/react';\nimport { createContext } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from 'cmdk';\nimport React, { type ComponentPropsWithRef, forwardRef, type PropsWithChildren, useCallback } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n type TextInputProps,\n type ThemedClassName,\n useDensityContext,\n useElevationContext,\n useId,\n useThemeContext,\n} from '@dxos/react-ui';\nimport { getSize, mx, staticPlaceholderText } from '@dxos/react-ui-theme';\n\ntype SearchListVariant = 'list' | 'menu' | 'listbox';\n\ntype SearchListRootProps = ThemedClassName<ComponentPropsWithRef<typeof CommandRoot>> & {\n variant?: SearchListVariant;\n};\n\ntype ComboboxContextValue = {\n isCombobox: true;\n modalId: string;\n open: boolean;\n onOpenChange: (nextOpen: boolean) => void;\n value: string;\n onValueChange: (nextValue: string) => void;\n placeholder?: string;\n};\n\nconst COMBOBOX_NAME = 'Combobox';\nconst COMBOBOX_TRIGGER_NAME = 'ComboboxTrigger';\nconst SEARCHLIST_NAME = 'SearchList';\nconst SEARCHLIST_ITEM_NAME = 'SearchListItem';\n\nconst [ComboboxProvider, useComboboxContext] = createContext<Partial<ComboboxContextValue>>(COMBOBOX_NAME, {});\n\ntype ComboboxRootProps = PropsWithChildren<\n Partial<ComboboxContextValue & { defaultOpen: boolean; defaultValue: string; placeholder: string }>\n>;\n\nconst SearchListRoot = forwardRef<HTMLDivElement, SearchListRootProps>(\n ({ children, classNames, ...props }, forwardedRef) => {\n return (\n <CommandRoot {...props} className={mx('', classNames)} ref={forwardedRef}>\n {children}\n </CommandRoot>\n );\n },\n);\n\nSearchListRoot.displayName = SEARCHLIST_NAME;\n\ntype CommandInputPrimitiveProps = ComponentPropsWithRef<typeof CommandInput>;\n\n// TODO: Harmonize with other inputs’ `onChange` prop.\ntype SearchListInputProps = Omit<TextInputProps, 'value' | 'defaultValue' | 'onChange'> &\n Pick<CommandInputPrimitiveProps, 'value' | 'onValueChange' | 'defaultValue'>;\n\nconst SearchListInput = forwardRef<HTMLInputElement, SearchListInputProps>(\n ({ children, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {\n // CHORE(thure): Keep this in-sync with `TextInput`, or submit a PR for `cmdk` to support `asChild` so we don’t have to.\n const { hasIosKeyboard } = useThemeContext();\n const { tx } = useThemeContext();\n const density = useDensityContext(propsDensity);\n const elevation = useElevationContext(propsElevation);\n\n return (\n <CommandInput\n {...props}\n className={tx(\n 'input.input',\n 'input',\n {\n variant,\n disabled: props.disabled,\n density,\n elevation,\n },\n 'mbe-cardSpacingBlock',\n classNames,\n )}\n {...(props.autoFocus && !hasIosKeyboard && { autoFocus: true })}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype SearchListContentProps = ThemedClassName<ComponentPropsWithRef<typeof CommandList>>;\n\nconst SearchListContent = forwardRef<HTMLDivElement, SearchListContentProps>(\n ({ children, classNames, ...props }, forwardedRef) => {\n return (\n <CommandList {...props} className={mx(classNames)} ref={forwardedRef}>\n {children}\n </CommandList>\n );\n },\n);\n\ntype SearchListEmptyProps = ThemedClassName<ComponentPropsWithRef<typeof CommandEmpty>>;\n\nconst SearchListEmpty = forwardRef<HTMLDivElement, SearchListEmptyProps>(\n ({ children, classNames, ...props }, forwardedRef) => {\n return (\n <CommandEmpty {...props} className={mx(classNames)} ref={forwardedRef}>\n {children}\n </CommandEmpty>\n );\n },\n);\n\ntype SearchListItemProps = ThemedClassName<ComponentPropsWithRef<typeof CommandItem>>;\n\nconst SearchListItem = forwardRef<HTMLDivElement, SearchListItemProps>(\n ({ children, classNames, onSelect, ...props }, forwardedRef) => {\n const { onValueChange, onOpenChange } = useComboboxContext(SEARCHLIST_ITEM_NAME);\n const handleSelect = useCallback(\n (nextValue: string) => {\n onValueChange?.(nextValue);\n onOpenChange?.(false);\n onSelect?.(nextValue);\n },\n [onValueChange, onOpenChange, onSelect],\n );\n return (\n <CommandItem\n {...props}\n onSelect={handleSelect}\n className={mx('p-1 rounded select-none cursor-pointer data-[selected]:bg-hoverOverlay', classNames)}\n ref={forwardedRef}\n >\n {children}\n </CommandItem>\n );\n },\n);\n\nSearchListItem.displayName = SEARCHLIST_ITEM_NAME;\n\nconst ComboboxRoot = ({\n modalId: propsModalId,\n open: propsOpen,\n defaultOpen,\n onOpenChange: propsOnOpenChange,\n value: propsValue,\n defaultValue,\n onValueChange: propsOnValueChange,\n placeholder,\n children,\n}: ComboboxRootProps) => {\n const modalId = useId(COMBOBOX_NAME, propsModalId);\n const [open = false, onOpenChange] = useControllableState({\n prop: propsOpen,\n onChange: propsOnOpenChange,\n defaultProp: defaultOpen,\n });\n const [value = '', onValueChange] = useControllableState({\n prop: propsValue,\n onChange: propsOnValueChange,\n defaultProp: defaultValue,\n });\n return (\n <ComboboxProvider\n isCombobox\n modalId={modalId}\n open={open}\n onOpenChange={onOpenChange}\n value={value}\n onValueChange={onValueChange}\n placeholder={placeholder}\n >\n {children}\n </ComboboxProvider>\n );\n};\n\nComboboxRoot.displayName = COMBOBOX_NAME;\n\ntype ComboboxTriggerProps = ButtonProps;\n\nconst ComboboxTrigger = forwardRef<HTMLButtonElement, ComboboxTriggerProps>(\n ({ children, onClick, ...props }, forwardedRef) => {\n const { modalId, open, onOpenChange, placeholder, value } = useComboboxContext(COMBOBOX_TRIGGER_NAME);\n const handleClick = useCallback(\n (event: Parameters<Exclude<ButtonProps['onClick'], undefined>>[0]) => {\n onClick?.(event);\n onOpenChange?.(true);\n },\n [onClick, onOpenChange],\n );\n return (\n <Button\n {...props}\n role='combobox'\n aria-expanded={open}\n aria-controls={modalId}\n aria-haspopup='dialog'\n onClick={handleClick}\n ref={forwardedRef}\n >\n {children ?? (\n <>\n <span\n className={mx('font-normal text-start flex-1 min-is-0 truncate mie-2', !value && staticPlaceholderText)}\n >\n {value || placeholder}\n </span>\n <CaretDown weight='bold' className={getSize(3)} />\n </>\n )}\n </Button>\n );\n },\n);\n\nComboboxTrigger.displayName = COMBOBOX_TRIGGER_NAME;\n\nexport const SearchList = {\n Root: SearchListRoot,\n Input: SearchListInput,\n Content: SearchListContent,\n Empty: SearchListEmpty,\n Item: SearchListItem,\n};\n\nexport const Combobox = {\n Root: ComboboxRoot,\n Trigger: ComboboxTrigger,\n useComboboxContext,\n};\n\nexport type {\n SearchListRootProps,\n SearchListInputProps,\n SearchListContentProps,\n SearchListEmptyProps,\n SearchListItemProps,\n ComboboxRootProps,\n ComboboxTriggerProps,\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { forwardRef } from 'react';\n\nimport {\n Popover,\n type PopoverArrowProps,\n type PopoverContentProps,\n type PopoverViewportProps,\n type PopoverVirtualTriggerProps,\n} from '@dxos/react-ui';\n\nimport {\n Combobox,\n type ComboboxRootProps,\n type ComboboxTriggerProps,\n SearchList,\n type SearchListContentProps,\n type SearchListEmptyProps,\n type SearchListInputProps,\n type SearchListItemProps,\n type SearchListRootProps,\n} from '../components';\n\ntype PopoverComboboxRootProps = ComboboxRootProps & { modal?: boolean };\n\nconst PopoverComboboxRoot = ({\n modal,\n children,\n open: propsOpen,\n onOpenChange: propsOnOpenChange,\n defaultOpen,\n ...props\n}: PopoverComboboxRootProps) => {\n const [open, onOpenChange] = useControllableState({\n prop: propsOpen,\n onChange: propsOnOpenChange,\n defaultProp: defaultOpen,\n });\n return (\n <Combobox.Root open={open} onOpenChange={onOpenChange} {...props}>\n <Popover.Root open={open} onOpenChange={onOpenChange} modal={modal}>\n {children}\n </Popover.Root>\n </Combobox.Root>\n );\n};\n\ntype PopoverComboboxContentProps = SearchListRootProps & PopoverContentProps;\n\nconst POPOVER_COMBOBOX_CONTENT_NAME = 'PopoverComboboxContent';\n\nconst PopoverComboboxContent = forwardRef<HTMLDivElement, PopoverComboboxContentProps>(\n (\n {\n side = 'bottom',\n collisionPadding = 48,\n sideOffset,\n align,\n alignOffset,\n avoidCollisions,\n collisionBoundary,\n arrowPadding,\n sticky,\n hideWhenDetached,\n onOpenAutoFocus,\n onCloseAutoFocus,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n forceMount,\n children,\n classNames,\n ...props\n },\n forwardedRef,\n ) => {\n const { modalId } = Combobox.useComboboxContext(POPOVER_COMBOBOX_CONTENT_NAME);\n return (\n <Popover.Content\n {...{\n side,\n sideOffset,\n align,\n alignOffset,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n arrowPadding,\n sticky,\n hideWhenDetached,\n onOpenAutoFocus,\n onCloseAutoFocus,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n forceMount,\n classNames,\n }}\n id={modalId}\n ref={forwardedRef}\n >\n <Popover.Viewport>\n {/* TODO(thure): This skips over `Command`’s root component, which renders a DOM node probably unnecessarily without supporting `asChild`. */}\n <SearchList.Root {...props} classNames='contents' role='none'>\n {children}\n </SearchList.Root>\n </Popover.Viewport>\n </Popover.Content>\n );\n },\n);\n\nPopoverComboboxContent.displayName = POPOVER_COMBOBOX_CONTENT_NAME;\n\ntype PopoverComboboxTriggerProps = ComboboxTriggerProps;\n\nconst PopoverComboboxTrigger = forwardRef<HTMLButtonElement, PopoverComboboxTriggerProps>((props, forwardedRef) => {\n return (\n <Popover.Trigger asChild>\n <Combobox.Trigger {...props} ref={forwardedRef} />\n </Popover.Trigger>\n );\n});\n\ntype PopoverComboboxVirtualTriggerProps = PopoverVirtualTriggerProps;\n\nconst PopoverComboboxVirtualTrigger = Popover.VirtualTrigger;\n\ntype PopoverComboboxInputProps = SearchListInputProps;\n\nconst PopoverComboboxInput = SearchList.Input;\n\ntype PopoverComboboxListProps = SearchListContentProps &\n Pick<PopoverViewportProps, 'constrainBlock' | 'constrainInline'>;\n\nconst PopoverComboboxList = forwardRef<HTMLDivElement, PopoverComboboxListProps>(\n ({ constrainInline, constrainBlock, ...props }, forwardedRef) => {\n return (\n <Popover.Viewport {...{ constrainInline, constrainBlock }}>\n <SearchList.Content {...props} ref={forwardedRef} />\n </Popover.Viewport>\n );\n },\n);\n\ntype PopoverComboboxItemProps = SearchListItemProps;\n\nconst PopoverComboboxItem = SearchList.Item;\n\ntype PopoverComboboxArrowProps = PopoverArrowProps;\n\nconst PopoverComboboxArrow = Popover.Arrow;\n\ntype PopoverComboboxEmptyProps = SearchListEmptyProps;\n\nconst PopoverComboboxEmpty = SearchList.Empty;\n\nexport const PopoverCombobox = {\n Root: PopoverComboboxRoot,\n Content: PopoverComboboxContent,\n Trigger: PopoverComboboxTrigger,\n VirtualTrigger: PopoverComboboxVirtualTrigger,\n Input: PopoverComboboxInput,\n List: PopoverComboboxList,\n Item: PopoverComboboxItem,\n Arrow: PopoverComboboxArrow,\n Empty: PopoverComboboxEmpty,\n};\n\nexport type {\n PopoverComboboxRootProps,\n PopoverComboboxContentProps,\n PopoverComboboxTriggerProps,\n PopoverComboboxVirtualTriggerProps,\n PopoverComboboxInputProps,\n PopoverComboboxListProps,\n PopoverComboboxItemProps,\n PopoverComboboxArrowProps,\n PopoverComboboxEmptyProps,\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = 'react-ui-searchlist';\n\nexport const translations = [\n {\n 'en-US': {\n [translationKey]: {},\n },\n },\n] as const satisfies Resource[];\n"],
|
|
5
|
-
"mappings": ";;;;AAIA,SAASA,
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../src/components/SearchList.tsx", "../../../src/components/Listbox.tsx", "../../../src/composites/PopoverCombobox.tsx", "../../../src/translations.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { createContext } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from 'cmdk';\nimport React, { type ComponentPropsWithRef, type PropsWithChildren, forwardRef, useCallback } from 'react';\n\nimport {\n Button,\n type ButtonProps,\n Icon,\n type TextInputProps,\n type ThemedClassName,\n useDensityContext,\n useElevationContext,\n useId,\n useThemeContext,\n} from '@dxos/react-ui';\nimport { mx, staticPlaceholderText } from '@dxos/react-ui-theme';\n\ntype SearchListVariant = 'list' | 'menu' | 'listbox';\n\ntype SearchListRootProps = ThemedClassName<ComponentPropsWithRef<typeof CommandRoot>> & {\n variant?: SearchListVariant;\n};\n\ntype ComboboxContextValue = {\n isCombobox: true;\n modalId: string;\n open: boolean;\n onOpenChange: (nextOpen: boolean) => void;\n value: string;\n onValueChange: (nextValue: string) => void;\n placeholder?: string;\n};\n\nconst COMBOBOX_NAME = 'Combobox';\nconst COMBOBOX_TRIGGER_NAME = 'ComboboxTrigger';\nconst SEARCHLIST_NAME = 'SearchList';\nconst SEARCHLIST_ITEM_NAME = 'SearchListItem';\n\nconst [ComboboxProvider, useComboboxContext] = createContext<Partial<ComboboxContextValue>>(COMBOBOX_NAME, {});\n\ntype ComboboxRootProps = PropsWithChildren<\n Partial<ComboboxContextValue & { defaultOpen: boolean; defaultValue: string; placeholder: string }>\n>;\n\nconst SearchListRoot = forwardRef<HTMLDivElement, SearchListRootProps>(\n ({ children, classNames, ...props }, forwardedRef) => {\n return (\n <CommandRoot {...props} className={mx('', classNames)} ref={forwardedRef}>\n {children}\n </CommandRoot>\n );\n },\n);\n\nSearchListRoot.displayName = SEARCHLIST_NAME;\n\ntype CommandInputPrimitiveProps = ComponentPropsWithRef<typeof CommandInput>;\n\n// TODO: Harmonize with other inputs’ `onChange` prop.\ntype SearchListInputProps = Omit<TextInputProps, 'value' | 'defaultValue' | 'onChange'> &\n Pick<CommandInputPrimitiveProps, 'value' | 'defaultValue' | 'onValueChange'>;\n\nconst SearchListInput = forwardRef<HTMLInputElement, SearchListInputProps>(\n ({ classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {\n // CHORE(thure): Keep this in-sync with `TextInput`, or submit a PR for `cmdk` to support `asChild` so we don’t have to.\n const { hasIosKeyboard } = useThemeContext();\n const { tx } = useThemeContext();\n const density = useDensityContext(propsDensity);\n const elevation = useElevationContext(propsElevation);\n\n return (\n <CommandInput\n {...props}\n className={tx(\n 'input.input',\n 'input',\n {\n variant,\n disabled: props.disabled,\n density,\n elevation,\n },\n 'mbe-cardSpacingBlock',\n classNames,\n )}\n {...(props.autoFocus && !hasIosKeyboard && { autoFocus: true })}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype SearchListContentProps = ThemedClassName<ComponentPropsWithRef<typeof CommandList>>;\n\nconst SearchListContent = forwardRef<HTMLDivElement, SearchListContentProps>(\n ({ children, classNames, ...props }, forwardedRef) => {\n return (\n <CommandList {...props} className={mx(classNames)} ref={forwardedRef}>\n {children}\n </CommandList>\n );\n },\n);\n\ntype SearchListEmptyProps = ThemedClassName<ComponentPropsWithRef<typeof CommandEmpty>>;\n\nconst SearchListEmpty = forwardRef<HTMLDivElement, SearchListEmptyProps>(\n ({ children, classNames, ...props }, forwardedRef) => {\n return (\n <CommandEmpty {...props} className={mx(classNames)} ref={forwardedRef}>\n {children}\n </CommandEmpty>\n );\n },\n);\n\ntype SearchListItemProps = ThemedClassName<ComponentPropsWithRef<typeof CommandItem>>;\n\nconst commandItem = 'flex items-center overflow-hidden';\nconst searchListItem =\n 'plb-1 pli-2 rounded-sm select-none cursor-pointer data-[selected]:bg-hoverOverlay hover:bg-hoverOverlay';\n\nconst SearchListItem = forwardRef<HTMLDivElement, SearchListItemProps>(\n ({ children, classNames, onSelect, ...props }, forwardedRef) => {\n const { onValueChange, onOpenChange } = useComboboxContext(SEARCHLIST_ITEM_NAME);\n const handleSelect = useCallback(\n (nextValue: string) => {\n onValueChange?.(nextValue);\n onOpenChange?.(false);\n onSelect?.(nextValue);\n },\n [onValueChange, onOpenChange, onSelect],\n );\n return (\n <CommandItem {...props} onSelect={handleSelect} className={mx(searchListItem, classNames)} ref={forwardedRef}>\n {children}\n </CommandItem>\n );\n },\n);\n\nSearchListItem.displayName = SEARCHLIST_ITEM_NAME;\n\nconst ComboboxRoot = ({\n modalId: propsModalId,\n open: propsOpen,\n defaultOpen,\n onOpenChange: propsOnOpenChange,\n value: propsValue,\n defaultValue,\n onValueChange: propsOnValueChange,\n placeholder,\n children,\n}: ComboboxRootProps) => {\n const modalId = useId(COMBOBOX_NAME, propsModalId);\n const [open = false, onOpenChange] = useControllableState({\n prop: propsOpen,\n onChange: propsOnOpenChange,\n defaultProp: defaultOpen,\n });\n const [value = '', onValueChange] = useControllableState({\n prop: propsValue,\n onChange: propsOnValueChange,\n defaultProp: defaultValue,\n });\n return (\n <ComboboxProvider\n isCombobox\n modalId={modalId}\n open={open}\n onOpenChange={onOpenChange}\n value={value}\n onValueChange={onValueChange}\n placeholder={placeholder}\n >\n {children}\n </ComboboxProvider>\n );\n};\n\nComboboxRoot.displayName = COMBOBOX_NAME;\n\ntype ComboboxTriggerProps = ButtonProps;\n\nconst ComboboxTrigger = forwardRef<HTMLButtonElement, ComboboxTriggerProps>(\n ({ children, onClick, ...props }, forwardedRef) => {\n const { modalId, open, onOpenChange, placeholder, value } = useComboboxContext(COMBOBOX_TRIGGER_NAME);\n const handleClick = useCallback(\n (event: Parameters<Exclude<ButtonProps['onClick'], undefined>>[0]) => {\n onClick?.(event);\n onOpenChange?.(true);\n },\n [onClick, onOpenChange],\n );\n return (\n <Button\n {...props}\n role='combobox'\n aria-expanded={open}\n aria-controls={modalId}\n aria-haspopup='dialog'\n onClick={handleClick}\n ref={forwardedRef}\n >\n {children ?? (\n <>\n <span\n className={mx('font-normal text-start flex-1 min-is-0 truncate mie-2', !value && staticPlaceholderText)}\n >\n {value || placeholder}\n </span>\n <Icon icon='ph--caret-down--bold' size={3} />\n </>\n )}\n </Button>\n );\n },\n);\n\nComboboxTrigger.displayName = COMBOBOX_TRIGGER_NAME;\n\nexport const SearchList = {\n Root: SearchListRoot,\n Input: SearchListInput,\n Content: SearchListContent,\n Empty: SearchListEmpty,\n Item: SearchListItem,\n};\n\nexport const Combobox = {\n Root: ComboboxRoot,\n Trigger: ComboboxTrigger,\n useComboboxContext,\n};\n\nexport type {\n SearchListRootProps,\n SearchListInputProps,\n SearchListContentProps,\n SearchListEmptyProps,\n SearchListItemProps,\n ComboboxRootProps,\n ComboboxTriggerProps,\n};\n\nexport { commandItem, searchListItem };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type ComponentPropsWithRef, forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport { Icon, type IconProps, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { commandItem, searchListItem } from './SearchList';\n\nconst LISTBOX_NAME = 'Listbox';\nconst LISTBOX_OPTION_NAME = 'ListboxOption';\nconst LISTBOX_OPTION_LABEL_NAME = 'ListboxOptionLabel';\nconst LISTBOX_OPTION_INDICATOR_NAME = 'ListboxOptionIndicator';\n\ntype ListboxScopedProps<P> = P & { __listboxScope?: Scope };\ntype ListboxOptionScopedProps<P> = P & { __listboxOptionScope?: Scope };\n\ntype ListboxRootProps = ThemedClassName<ComponentPropsWithRef<'ul'>> & {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n autoFocus?: boolean;\n};\n\ntype ListboxOptionProps = ThemedClassName<ComponentPropsWithRef<'li'>> & {\n value: string;\n};\n\nconst [createListboxContext, createListboxScope] = createContextScope(LISTBOX_NAME, []);\nconst [createListboxOptionContext, createListboxOptionScope] = createContextScope(LISTBOX_OPTION_NAME, [\n createListboxScope,\n]);\n\ntype ListboxContextValue = {\n selectedValue: string | undefined;\n onValueChange: (value: string) => void;\n};\n\ntype ListboxOptionContextValue = {\n value: string;\n isSelected: boolean;\n};\n\nconst [ListboxProvider, useListboxContext] = createListboxContext<ListboxContextValue>(LISTBOX_NAME);\nconst [ListboxOptionProvider, useListboxOptionContext] =\n createListboxOptionContext<ListboxOptionContextValue>(LISTBOX_OPTION_NAME);\n\n// TODO(thure): Note that this overlaps significantly with the the `SelectableListbox` story of `List.tsx` in `react-ui`,\n// making this an exemplar of `List` specifying standard `role=\"listbox\"` interactivity, though it is here because it\n// coheres with SearchList’s styles and norms. This can be promoted to `react-ui`, but doing so should involve clearing\n// the technical- and design-debt in its `List` component.\nconst ListboxRoot = forwardRef<HTMLUListElement, ListboxRootProps>(\n (props: ListboxScopedProps<ListboxRootProps>, forwardedRef) => {\n const {\n __listboxScope,\n children,\n classNames,\n value: propsValue,\n defaultValue,\n onValueChange,\n autoFocus,\n ...rootProps\n } = props;\n\n const arrowGroup = useArrowNavigationGroup({ axis: 'vertical' });\n const ref = useRef<HTMLUListElement | null>(null);\n const rootRef = useComposedRefs<HTMLUListElement>(ref, forwardedRef);\n\n const [selectedValue, setSelectedValue] = useControllableState({\n prop: propsValue,\n defaultProp: defaultValue,\n onChange: onValueChange,\n });\n\n const handleValueChange = (value: string) => {\n setSelectedValue(value);\n };\n\n useEffect(() => {\n // Autofocus the selected option on mount using querySelector\n (ref.current?.querySelector('[aria-selected=\"true\"]') as HTMLLIElement)?.focus();\n }, [autoFocus]);\n\n return (\n <ListboxProvider scope={__listboxScope} selectedValue={selectedValue} onValueChange={handleValueChange}>\n <ul\n role='listbox'\n {...rootProps}\n className={mx('p-cardSpacingChrome', classNames)}\n ref={rootRef}\n {...arrowGroup}\n >\n {children}\n </ul>\n </ListboxProvider>\n );\n },\n);\n\nListboxRoot.displayName = LISTBOX_NAME;\n\nconst ListboxOption = forwardRef<HTMLLIElement, ListboxOptionProps>(\n (props: ListboxScopedProps<ListboxOptionProps>, forwardedRef) => {\n const { __listboxScope, children, classNames, value, ...rootProps } = props;\n const { selectedValue, onValueChange } = useListboxContext(LISTBOX_OPTION_NAME, __listboxScope);\n\n const isSelected = selectedValue === value;\n\n const handleSelect = useCallback(() => {\n onValueChange(value);\n }, [value, onValueChange]);\n\n return (\n <ListboxOptionProvider scope={__listboxScope} value={value} isSelected={isSelected}>\n <li\n role='option'\n {...rootProps}\n aria-selected={isSelected}\n tabIndex={0}\n className={mx('dx-focus-ring', commandItem, searchListItem, classNames)}\n onClick={handleSelect}\n onKeyDown={({ key }) => {\n if (['Enter', ' '].includes(key)) {\n handleSelect();\n }\n }}\n ref={forwardedRef}\n >\n {children}\n </li>\n </ListboxOptionProvider>\n );\n },\n);\n\nListboxOption.displayName = LISTBOX_OPTION_NAME;\n\nconst ListboxOptionLabel = forwardRef<HTMLDivElement, ThemedClassName<ComponentPropsWithRef<'div'>>>(\n ({ children, classNames, ...rootProps }, forwardedRef) => {\n return (\n <span {...rootProps} className={mx('grow truncate', classNames)} ref={forwardedRef}>\n {children}\n </span>\n );\n },\n);\n\nListboxOptionLabel.displayName = LISTBOX_OPTION_LABEL_NAME;\n\ntype ListboxOptionIndicatorProps = Omit<IconProps, 'icon'> & Partial<Pick<IconProps, 'icon'>>;\n\nconst ListboxOptionIndicator = forwardRef<SVGSVGElement, ListboxOptionIndicatorProps>(\n (props: ListboxOptionScopedProps<ListboxOptionIndicatorProps>, forwardedRef) => {\n const { __listboxOptionScope, classNames, ...rootProps } = props;\n const { isSelected } = useListboxOptionContext(LISTBOX_OPTION_INDICATOR_NAME, __listboxOptionScope);\n\n return (\n <Icon\n icon='ph--check--regular'\n {...rootProps}\n classNames={mx(!isSelected && 'invisible', classNames)}\n ref={forwardedRef}\n />\n );\n },\n);\n\nListboxOptionIndicator.displayName = LISTBOX_OPTION_INDICATOR_NAME;\n\nexport const Listbox = {\n Root: ListboxRoot,\n Option: ListboxOption,\n OptionLabel: ListboxOptionLabel,\n OptionIndicator: ListboxOptionIndicator,\n};\n\nexport { createListboxScope, useListboxContext };\n\nexport type { ListboxRootProps, ListboxOptionProps, ListboxScopedProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { forwardRef } from 'react';\n\nimport {\n Popover,\n type PopoverArrowProps,\n type PopoverContentProps,\n type PopoverVirtualTriggerProps,\n} from '@dxos/react-ui';\n\nimport {\n Combobox,\n type ComboboxRootProps,\n type ComboboxTriggerProps,\n SearchList,\n type SearchListContentProps,\n type SearchListEmptyProps,\n type SearchListInputProps,\n type SearchListItemProps,\n type SearchListRootProps,\n} from '../components';\n\ntype PopoverComboboxRootProps = ComboboxRootProps & { modal?: boolean };\n\nconst PopoverComboboxRoot = ({\n modal,\n children,\n open: propsOpen,\n onOpenChange: propsOnOpenChange,\n defaultOpen,\n ...props\n}: PopoverComboboxRootProps) => {\n const [open, onOpenChange] = useControllableState({\n prop: propsOpen,\n onChange: propsOnOpenChange,\n defaultProp: defaultOpen,\n });\n return (\n <Combobox.Root open={open} onOpenChange={onOpenChange} {...props}>\n <Popover.Root open={open} onOpenChange={onOpenChange} modal={modal}>\n {children}\n </Popover.Root>\n </Combobox.Root>\n );\n};\n\ntype PopoverComboboxContentProps = SearchListRootProps & PopoverContentProps;\n\nconst POPOVER_COMBOBOX_CONTENT_NAME = 'PopoverComboboxContent';\n\nconst PopoverComboboxContent = forwardRef<HTMLDivElement, PopoverComboboxContentProps>(\n (\n {\n side = 'bottom',\n collisionPadding = 48,\n sideOffset,\n align,\n alignOffset,\n avoidCollisions,\n collisionBoundary,\n arrowPadding,\n sticky,\n hideWhenDetached,\n onOpenAutoFocus,\n onCloseAutoFocus,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n forceMount,\n children,\n classNames,\n ...props\n },\n forwardedRef,\n ) => {\n const { modalId } = Combobox.useComboboxContext(POPOVER_COMBOBOX_CONTENT_NAME);\n return (\n <Popover.Content\n {...{\n side,\n sideOffset,\n align,\n alignOffset,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n arrowPadding,\n sticky,\n hideWhenDetached,\n onOpenAutoFocus,\n onCloseAutoFocus,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n forceMount,\n }}\n classNames={[\n 'is-[--radix-popover-trigger-width] max-bs-[--radix-popover-content-available-height] grid grid-rows-[min-content_1fr]',\n classNames,\n ]}\n id={modalId}\n ref={forwardedRef}\n >\n <SearchList.Root {...props} classNames='contents density-fine' role='none'>\n {children}\n </SearchList.Root>\n </Popover.Content>\n );\n },\n);\n\nPopoverComboboxContent.displayName = POPOVER_COMBOBOX_CONTENT_NAME;\n\ntype PopoverComboboxTriggerProps = ComboboxTriggerProps;\n\nconst PopoverComboboxTrigger = forwardRef<HTMLButtonElement, PopoverComboboxTriggerProps>((props, forwardedRef) => {\n return (\n <Popover.Trigger asChild>\n <Combobox.Trigger {...props} ref={forwardedRef} />\n </Popover.Trigger>\n );\n});\n\ntype PopoverComboboxVirtualTriggerProps = PopoverVirtualTriggerProps;\n\nconst PopoverComboboxVirtualTrigger = Popover.VirtualTrigger;\n\ntype PopoverComboboxInputProps = SearchListInputProps;\n\nconst PopoverComboboxInput = forwardRef<HTMLInputElement, PopoverComboboxInputProps>(\n ({ classNames, ...props }, forwardedRef) => {\n return (\n <SearchList.Input\n {...props}\n classNames={[\n 'mli-cardSpacingChrome mbs-cardSpacingChrome mbe-0 is-[calc(100%-2*var(--dx-cardSpacingChrome))]',\n classNames,\n ]}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype PopoverComboboxListProps = SearchListContentProps;\n\nconst PopoverComboboxList = forwardRef<HTMLDivElement, PopoverComboboxListProps>(\n ({ classNames, ...props }, forwardedRef) => {\n return (\n <SearchList.Content\n {...props}\n classNames={['min-bs-0 overflow-y-auto plb-cardSpacingChrome', classNames]}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype PopoverComboboxItemProps = SearchListItemProps;\n\nconst PopoverComboboxItem = forwardRef<HTMLDivElement, PopoverComboboxItemProps>(\n ({ classNames, ...props }, forwardedRef) => {\n return (\n <SearchList.Item\n {...props}\n classNames={['mli-cardSpacingChrome pli-cardSpacingChrome', classNames]}\n ref={forwardedRef}\n />\n );\n },\n);\n\ntype PopoverComboboxArrowProps = PopoverArrowProps;\n\nconst PopoverComboboxArrow = Popover.Arrow;\n\ntype PopoverComboboxEmptyProps = SearchListEmptyProps;\n\nconst PopoverComboboxEmpty = SearchList.Empty;\n\nexport const PopoverCombobox = {\n Root: PopoverComboboxRoot,\n Content: PopoverComboboxContent,\n Trigger: PopoverComboboxTrigger,\n VirtualTrigger: PopoverComboboxVirtualTrigger,\n Input: PopoverComboboxInput,\n List: PopoverComboboxList,\n Item: PopoverComboboxItem,\n Arrow: PopoverComboboxArrow,\n Empty: PopoverComboboxEmpty,\n};\n\nexport type {\n PopoverComboboxRootProps,\n PopoverComboboxContentProps,\n PopoverComboboxTriggerProps,\n PopoverComboboxVirtualTriggerProps,\n PopoverComboboxInputProps,\n PopoverComboboxListProps,\n PopoverComboboxItemProps,\n PopoverComboboxArrowProps,\n PopoverComboboxEmptyProps,\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = 'react-ui-searchlist';\n\nexport const translations = [\n {\n 'en-US': {\n [translationKey]: {},\n },\n },\n] as const satisfies Resource[];\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["createContext", "useControllableState", "CommandEmpty", "CommandInput", "CommandItem", "CommandList", "CommandRoot", "React", "forwardRef", "useCallback", "Button", "Icon", "useDensityContext", "useElevationContext", "useId", "useThemeContext", "mx", "staticPlaceholderText", "COMBOBOX_NAME", "COMBOBOX_TRIGGER_NAME", "SEARCHLIST_NAME", "SEARCHLIST_ITEM_NAME", "ComboboxProvider", "useComboboxContext", "createContext", "SearchListRoot", "forwardRef", "children", "classNames", "props", "forwardedRef", "CommandRoot", "className", "mx", "ref", "displayName", "SearchListInput", "density", "propsDensity", "elevation", "propsElevation", "variant", "hasIosKeyboard", "useThemeContext", "tx", "useDensityContext", "useElevationContext", "CommandInput", "disabled", "autoFocus", "SearchListContent", "CommandList", "SearchListEmpty", "CommandEmpty", "commandItem", "searchListItem", "SearchListItem", "onSelect", "onValueChange", "onOpenChange", "handleSelect", "useCallback", "nextValue", "CommandItem", "ComboboxRoot", "modalId", "propsModalId", "open", "propsOpen", "defaultOpen", "propsOnOpenChange", "value", "propsValue", "defaultValue", "propsOnValueChange", "placeholder", "useId", "useControllableState", "prop", "onChange", "defaultProp", "isCombobox", "ComboboxTrigger", "onClick", "handleClick", "event", "Button", "role", "aria-expanded", "aria-controls", "aria-haspopup", "span", "staticPlaceholderText", "Icon", "icon", "size", "SearchList", "Root", "Input", "Content", "Empty", "Item", "Combobox", "Trigger", "useArrowNavigationGroup", "useComposedRefs", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "useEffect", "useRef", "Icon", "mx", "LISTBOX_NAME", "LISTBOX_OPTION_NAME", "LISTBOX_OPTION_LABEL_NAME", "LISTBOX_OPTION_INDICATOR_NAME", "createListboxContext", "createListboxScope", "createContextScope", "createListboxOptionContext", "createListboxOptionScope", "ListboxProvider", "useListboxContext", "ListboxOptionProvider", "useListboxOptionContext", "ListboxRoot", "forwardRef", "props", "forwardedRef", "__listboxScope", "children", "classNames", "value", "propsValue", "defaultValue", "onValueChange", "autoFocus", "rootProps", "arrowGroup", "useArrowNavigationGroup", "axis", "ref", "useRef", "rootRef", "useComposedRefs", "selectedValue", "setSelectedValue", "useControllableState", "prop", "defaultProp", "onChange", "handleValueChange", "useEffect", "current", "querySelector", "focus", "React", "scope", "ul", "role", "className", "mx", "displayName", "ListboxOption", "isSelected", "handleSelect", "useCallback", "li", "aria-selected", "tabIndex", "commandItem", "searchListItem", "onClick", "onKeyDown", "key", "includes", "ListboxOptionLabel", "span", "ListboxOptionIndicator", "__listboxOptionScope", "Icon", "icon", "Listbox", "Root", "Option", "OptionLabel", "OptionIndicator", "useControllableState", "React", "forwardRef", "Popover", "PopoverComboboxRoot", "modal", "children", "open", "propsOpen", "onOpenChange", "propsOnOpenChange", "defaultOpen", "props", "useControllableState", "prop", "onChange", "defaultProp", "React", "Combobox", "Root", "Popover", "POPOVER_COMBOBOX_CONTENT_NAME", "PopoverComboboxContent", "forwardRef", "side", "collisionPadding", "sideOffset", "align", "alignOffset", "avoidCollisions", "collisionBoundary", "arrowPadding", "sticky", "hideWhenDetached", "onOpenAutoFocus", "onCloseAutoFocus", "onEscapeKeyDown", "onPointerDownOutside", "onFocusOutside", "onInteractOutside", "forceMount", "classNames", "forwardedRef", "modalId", "useComboboxContext", "Content", "id", "ref", "SearchList", "role", "displayName", "PopoverComboboxTrigger", "Trigger", "asChild", "PopoverComboboxVirtualTrigger", "VirtualTrigger", "PopoverComboboxInput", "Input", "PopoverComboboxList", "PopoverComboboxItem", "Item", "PopoverComboboxArrow", "Arrow", "PopoverComboboxEmpty", "Empty", "PopoverCombobox", "List", "translationKey", "translations"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/components/SearchList.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/components/SearchList.tsx":{"bytes":22736,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"cmdk","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/components/Listbox.tsx":{"bytes":19370,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"src/components/SearchList.tsx","kind":"import-statement","original":"./SearchList"}],"format":"esm"},"src/components/index.ts":{"bytes":562,"imports":[{"path":"src/components/SearchList.tsx","kind":"import-statement","original":"./SearchList"},{"path":"src/components/Listbox.tsx","kind":"import-statement","original":"./Listbox"}],"format":"esm"},"src/composites/PopoverCombobox.tsx":{"bytes":16778,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"src/components/index.ts","kind":"import-statement","original":"../components"}],"format":"esm"},"src/composites/index.ts":{"bytes":488,"imports":[{"path":"src/composites/PopoverCombobox.tsx","kind":"import-statement","original":"./PopoverCombobox"}],"format":"esm"},"src/translations.ts":{"bytes":1061,"imports":[],"format":"esm"},"src/index.ts":{"bytes":658,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/composites/index.ts","kind":"import-statement","original":"./composites"},{"path":"src/translations.ts","kind":"import-statement","original":"./translations"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":31537},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"cmdk","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["Combobox","Listbox","PopoverCombobox","SearchList","commandItem","createListboxScope","searchListItem","translationKey","translations","useListboxContext"],"entryPoint":"src/index.ts","inputs":{"src/components/SearchList.tsx":{"bytesInOutput":5829},"src/components/index.ts":{"bytesInOutput":0},"src/components/Listbox.tsx":{"bytesInOutput":4716},"src/index.ts":{"bytesInOutput":0},"src/composites/PopoverCombobox.tsx":{"bytesInOutput":4443},"src/composites/index.ts":{"bytesInOutput":0},"src/translations.ts":{"bytesInOutput":124}},"bytes":15544}}}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { type Scope } from '@radix-ui/react-context';
|
|
2
|
+
import React, { type ComponentPropsWithRef } from 'react';
|
|
3
|
+
import { type IconProps, type ThemedClassName } from '@dxos/react-ui';
|
|
4
|
+
type ListboxScopedProps<P> = P & {
|
|
5
|
+
__listboxScope?: Scope;
|
|
6
|
+
};
|
|
7
|
+
type ListboxRootProps = ThemedClassName<ComponentPropsWithRef<'ul'>> & {
|
|
8
|
+
value?: string;
|
|
9
|
+
defaultValue?: string;
|
|
10
|
+
onValueChange?: (value: string) => void;
|
|
11
|
+
autoFocus?: boolean;
|
|
12
|
+
};
|
|
13
|
+
type ListboxOptionProps = ThemedClassName<ComponentPropsWithRef<'li'>> & {
|
|
14
|
+
value: string;
|
|
15
|
+
};
|
|
16
|
+
declare const createListboxScope: import("@radix-ui/react-context").CreateScope;
|
|
17
|
+
type ListboxContextValue = {
|
|
18
|
+
selectedValue: string | undefined;
|
|
19
|
+
onValueChange: (value: string) => void;
|
|
20
|
+
};
|
|
21
|
+
declare const useListboxContext: (consumerName: string, scope: Scope<ListboxContextValue | undefined>) => ListboxContextValue;
|
|
22
|
+
type ListboxOptionIndicatorProps = Omit<IconProps, 'icon'> & Partial<Pick<IconProps, 'icon'>>;
|
|
23
|
+
export declare const Listbox: {
|
|
24
|
+
Root: React.ForwardRefExoticComponent<Omit<ListboxRootProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
|
|
25
|
+
Option: React.ForwardRefExoticComponent<Omit<ListboxOptionProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
|
|
26
|
+
OptionLabel: React.ForwardRefExoticComponent<Omit<ThemedClassName<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
27
|
+
OptionIndicator: React.ForwardRefExoticComponent<Omit<ListboxOptionIndicatorProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
|
28
|
+
};
|
|
29
|
+
export { createListboxScope, useListboxContext };
|
|
30
|
+
export type { ListboxRootProps, ListboxOptionProps, ListboxScopedProps };
|
|
31
|
+
//# sourceMappingURL=Listbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Listbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Listbox.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,KAAK,EAAsB,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAA8C,MAAM,OAAO,CAAC;AAEtG,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAU5E,KAAK,kBAAkB,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,cAAc,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAG5D,KAAK,gBAAgB,GAAG,eAAe,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,GAAG;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,KAAK,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,GAAG;IACvE,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAA6B,kBAAkB,+CAAwC,CAAC;AAKxF,KAAK,mBAAmB,GAAG;IACzB,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAOF,QAAA,MAAwB,iBAAiB,8FAA2D,CAAC;AA0GrG,KAAK,2BAA2B,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAoB9F,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,CAAC;AAEjD,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
declare const DefaultStory: () => React.JSX.Element;
|
|
4
|
+
declare const DefaultValueStory: () => React.JSX.Element;
|
|
5
|
+
declare const meta: {
|
|
6
|
+
title: string;
|
|
7
|
+
component: React.ForwardRefExoticComponent<Omit<import("./Listbox").ListboxRootProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
|
|
8
|
+
decorators: import("@storybook/react").Decorator[];
|
|
9
|
+
parameters: {
|
|
10
|
+
layout: string;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export default meta;
|
|
14
|
+
export declare const Default: StoryObj<typeof DefaultStory>;
|
|
15
|
+
export declare const DefaultValue: StoryObj<typeof DefaultValueStory>;
|
|
16
|
+
//# sourceMappingURL=Listbox.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Listbox.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Listbox.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,QAAA,MAAM,YAAY,yBAqBjB,CAAC;AAEF,QAAA,MAAM,iBAAiB,yBAmBtB,CAAC;AAEF,QAAA,MAAM,IAAI;;;;;;;CAO2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,YAAY,CAEjD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,OAAO,iBAAiB,CAE3D,CAAC"}
|
|
@@ -20,10 +20,12 @@ type ComboboxRootProps = PropsWithChildren<Partial<ComboboxContextValue & {
|
|
|
20
20
|
placeholder: string;
|
|
21
21
|
}>>;
|
|
22
22
|
type CommandInputPrimitiveProps = ComponentPropsWithRef<typeof CommandInput>;
|
|
23
|
-
type SearchListInputProps = Omit<TextInputProps, 'value' | 'defaultValue' | 'onChange'> & Pick<CommandInputPrimitiveProps, 'value' | '
|
|
23
|
+
type SearchListInputProps = Omit<TextInputProps, 'value' | 'defaultValue' | 'onChange'> & Pick<CommandInputPrimitiveProps, 'value' | 'defaultValue' | 'onValueChange'>;
|
|
24
24
|
type SearchListContentProps = ThemedClassName<ComponentPropsWithRef<typeof CommandList>>;
|
|
25
25
|
type SearchListEmptyProps = ThemedClassName<ComponentPropsWithRef<typeof CommandEmpty>>;
|
|
26
26
|
type SearchListItemProps = ThemedClassName<ComponentPropsWithRef<typeof CommandItem>>;
|
|
27
|
+
declare const commandItem = "flex items-center overflow-hidden";
|
|
28
|
+
declare const searchListItem = "plb-1 pli-2 rounded-sm select-none cursor-pointer data-[selected]:bg-hoverOverlay hover:bg-hoverOverlay";
|
|
27
29
|
type ComboboxTriggerProps = ButtonProps;
|
|
28
30
|
export declare const SearchList: {
|
|
29
31
|
Root: React.ForwardRefExoticComponent<Omit<SearchListRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -41,4 +43,5 @@ export declare const Combobox: {
|
|
|
41
43
|
useComboboxContext: (consumerName: string) => Partial<ComboboxContextValue>;
|
|
42
44
|
};
|
|
43
45
|
export type { SearchListRootProps, SearchListInputProps, SearchListContentProps, SearchListEmptyProps, SearchListItemProps, ComboboxRootProps, ComboboxTriggerProps, };
|
|
46
|
+
export { commandItem, searchListItem };
|
|
44
47
|
//# sourceMappingURL=SearchList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchList.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchList.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchList.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchList.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AACzF,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAE,KAAK,iBAAiB,EAA2B,MAAM,OAAO,CAAC;AAE3G,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,cAAc,EACnB,KAAK,eAAe,EAKrB,MAAM,gBAAgB,CAAC;AAGxB,KAAK,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAErD,KAAK,mBAAmB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,WAAW,CAAC,CAAC,GAAG;IACtF,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,UAAU,EAAE,IAAI,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AASF,KAAK,iBAAiB,GAAG,iBAAiB,CACxC,OAAO,CAAC,oBAAoB,GAAG;IAAE,WAAW,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CACpG,CAAC;AAcF,KAAK,0BAA0B,GAAG,qBAAqB,CAAC,OAAO,YAAY,CAAC,CAAC;AAG7E,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,GACrF,IAAI,CAAC,0BAA0B,EAAE,OAAO,GAAG,cAAc,GAAG,eAAe,CAAC,CAAC;AAgC/E,KAAK,sBAAsB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC;AAYzF,KAAK,oBAAoB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC;AAYxF,KAAK,mBAAmB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC;AAEtF,QAAA,MAAM,WAAW,sCAAsC,CAAC;AACxD,QAAA,MAAM,cAAc,4GACuF,CAAC;AA8D5G,KAAK,oBAAoB,GAAG,WAAW,CAAC;AAuCxC,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;+LA5ElB,iBAAiB;;;;;CAgFnB,CAAC;AAEF,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,GACrB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC"}
|