@dxos/react-ui-searchlist 0.8.4-main.67995b8 → 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 +175 -33
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +175 -33
- 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 +18 -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 +10 -9
- package/src/components/index.ts +1 -0
- package/src/composites/PopoverCombobox.stories.tsx +10 -7
- package/src/composites/PopoverCombobox.tsx +15 -14
|
@@ -26,7 +26,7 @@ var SearchListRoot = /* @__PURE__ */ forwardRef(({ children, classNames, ...prop
|
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
28
|
SearchListRoot.displayName = SEARCHLIST_NAME;
|
|
29
|
-
var SearchListInput = /* @__PURE__ */ forwardRef(({
|
|
29
|
+
var SearchListInput = /* @__PURE__ */ forwardRef(({ classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
|
|
30
30
|
var _effect = _useSignals();
|
|
31
31
|
try {
|
|
32
32
|
const { hasIosKeyboard } = useThemeContext();
|
|
@@ -74,6 +74,8 @@ var SearchListEmpty = /* @__PURE__ */ forwardRef(({ children, classNames, ...pro
|
|
|
74
74
|
_effect.f();
|
|
75
75
|
}
|
|
76
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";
|
|
77
79
|
var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, onSelect, ...props }, forwardedRef) => {
|
|
78
80
|
var _effect = _useSignals();
|
|
79
81
|
try {
|
|
@@ -90,7 +92,7 @@ var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, onSelec
|
|
|
90
92
|
return /* @__PURE__ */ React.createElement(CommandItem, {
|
|
91
93
|
...props,
|
|
92
94
|
onSelect: handleSelect,
|
|
93
|
-
className: mx(
|
|
95
|
+
className: mx(searchListItem, classNames),
|
|
94
96
|
ref: forwardedRef
|
|
95
97
|
}, children);
|
|
96
98
|
} finally {
|
|
@@ -169,24 +171,155 @@ var Combobox = {
|
|
|
169
171
|
useComboboxContext
|
|
170
172
|
};
|
|
171
173
|
|
|
172
|
-
// src/
|
|
174
|
+
// src/components/Listbox.tsx
|
|
173
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";
|
|
174
179
|
import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
|
|
175
|
-
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";
|
|
176
309
|
import { Popover } from "@dxos/react-ui";
|
|
177
310
|
var PopoverComboboxRoot = ({ modal, children, open: propsOpen, onOpenChange: propsOnOpenChange, defaultOpen, ...props }) => {
|
|
178
|
-
var _effect =
|
|
311
|
+
var _effect = _useSignals3();
|
|
179
312
|
try {
|
|
180
|
-
const [open, onOpenChange] =
|
|
313
|
+
const [open, onOpenChange] = useControllableState3({
|
|
181
314
|
prop: propsOpen,
|
|
182
315
|
onChange: propsOnOpenChange,
|
|
183
316
|
defaultProp: defaultOpen
|
|
184
317
|
});
|
|
185
|
-
return /* @__PURE__ */
|
|
318
|
+
return /* @__PURE__ */ React3.createElement(Combobox.Root, {
|
|
186
319
|
open,
|
|
187
320
|
onOpenChange,
|
|
188
321
|
...props
|
|
189
|
-
}, /* @__PURE__ */
|
|
322
|
+
}, /* @__PURE__ */ React3.createElement(Popover.Root, {
|
|
190
323
|
open,
|
|
191
324
|
onOpenChange,
|
|
192
325
|
modal
|
|
@@ -196,11 +329,11 @@ var PopoverComboboxRoot = ({ modal, children, open: propsOpen, onOpenChange: pro
|
|
|
196
329
|
}
|
|
197
330
|
};
|
|
198
331
|
var POPOVER_COMBOBOX_CONTENT_NAME = "PopoverComboboxContent";
|
|
199
|
-
var PopoverComboboxContent = /* @__PURE__ */
|
|
200
|
-
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();
|
|
201
334
|
try {
|
|
202
335
|
const { modalId } = Combobox.useComboboxContext(POPOVER_COMBOBOX_CONTENT_NAME);
|
|
203
|
-
return /* @__PURE__ */
|
|
336
|
+
return /* @__PURE__ */ React3.createElement(Popover.Content, {
|
|
204
337
|
side,
|
|
205
338
|
sideOffset,
|
|
206
339
|
align,
|
|
@@ -218,25 +351,28 @@ var PopoverComboboxContent = /* @__PURE__ */ forwardRef2(({ side = "bottom", col
|
|
|
218
351
|
onFocusOutside,
|
|
219
352
|
onInteractOutside,
|
|
220
353
|
forceMount,
|
|
221
|
-
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
|
+
],
|
|
222
358
|
id: modalId,
|
|
223
359
|
ref: forwardedRef
|
|
224
|
-
}, /* @__PURE__ */
|
|
360
|
+
}, /* @__PURE__ */ React3.createElement(SearchList.Root, {
|
|
225
361
|
...props,
|
|
226
362
|
classNames: "contents density-fine",
|
|
227
363
|
role: "none"
|
|
228
|
-
}, children))
|
|
364
|
+
}, children));
|
|
229
365
|
} finally {
|
|
230
366
|
_effect.f();
|
|
231
367
|
}
|
|
232
368
|
});
|
|
233
369
|
PopoverComboboxContent.displayName = POPOVER_COMBOBOX_CONTENT_NAME;
|
|
234
|
-
var PopoverComboboxTrigger = /* @__PURE__ */
|
|
235
|
-
var _effect =
|
|
370
|
+
var PopoverComboboxTrigger = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
|
|
371
|
+
var _effect = _useSignals3();
|
|
236
372
|
try {
|
|
237
|
-
return /* @__PURE__ */
|
|
373
|
+
return /* @__PURE__ */ React3.createElement(Popover.Trigger, {
|
|
238
374
|
asChild: true
|
|
239
|
-
}, /* @__PURE__ */
|
|
375
|
+
}, /* @__PURE__ */ React3.createElement(Combobox.Trigger, {
|
|
240
376
|
...props,
|
|
241
377
|
ref: forwardedRef
|
|
242
378
|
}));
|
|
@@ -245,13 +381,13 @@ var PopoverComboboxTrigger = /* @__PURE__ */ forwardRef2((props, forwardedRef) =
|
|
|
245
381
|
}
|
|
246
382
|
});
|
|
247
383
|
var PopoverComboboxVirtualTrigger = Popover.VirtualTrigger;
|
|
248
|
-
var PopoverComboboxInput = /* @__PURE__ */
|
|
249
|
-
var _effect =
|
|
384
|
+
var PopoverComboboxInput = /* @__PURE__ */ forwardRef3(({ classNames, ...props }, forwardedRef) => {
|
|
385
|
+
var _effect = _useSignals3();
|
|
250
386
|
try {
|
|
251
|
-
return /* @__PURE__ */
|
|
387
|
+
return /* @__PURE__ */ React3.createElement(SearchList.Input, {
|
|
252
388
|
...props,
|
|
253
389
|
classNames: [
|
|
254
|
-
"mli-cardSpacingChrome mbs-cardSpacingChrome is-[calc(100%-2*var(--dx-cardSpacingChrome))]",
|
|
390
|
+
"mli-cardSpacingChrome mbs-cardSpacingChrome mbe-0 is-[calc(100%-2*var(--dx-cardSpacingChrome))]",
|
|
255
391
|
classNames
|
|
256
392
|
],
|
|
257
393
|
ref: forwardedRef
|
|
@@ -260,24 +396,25 @@ var PopoverComboboxInput = /* @__PURE__ */ forwardRef2(({ classNames, ...props }
|
|
|
260
396
|
_effect.f();
|
|
261
397
|
}
|
|
262
398
|
});
|
|
263
|
-
var PopoverComboboxList = /* @__PURE__ */
|
|
264
|
-
var _effect =
|
|
399
|
+
var PopoverComboboxList = /* @__PURE__ */ forwardRef3(({ classNames, ...props }, forwardedRef) => {
|
|
400
|
+
var _effect = _useSignals3();
|
|
265
401
|
try {
|
|
266
|
-
return /* @__PURE__ */
|
|
267
|
-
constrainInline,
|
|
268
|
-
constrainBlock
|
|
269
|
-
}, /* @__PURE__ */ React2.createElement(SearchList.Content, {
|
|
402
|
+
return /* @__PURE__ */ React3.createElement(SearchList.Content, {
|
|
270
403
|
...props,
|
|
404
|
+
classNames: [
|
|
405
|
+
"min-bs-0 overflow-y-auto plb-cardSpacingChrome",
|
|
406
|
+
classNames
|
|
407
|
+
],
|
|
271
408
|
ref: forwardedRef
|
|
272
|
-
})
|
|
409
|
+
});
|
|
273
410
|
} finally {
|
|
274
411
|
_effect.f();
|
|
275
412
|
}
|
|
276
413
|
});
|
|
277
|
-
var PopoverComboboxItem = /* @__PURE__ */
|
|
278
|
-
var _effect =
|
|
414
|
+
var PopoverComboboxItem = /* @__PURE__ */ forwardRef3(({ classNames, ...props }, forwardedRef) => {
|
|
415
|
+
var _effect = _useSignals3();
|
|
279
416
|
try {
|
|
280
|
-
return /* @__PURE__ */
|
|
417
|
+
return /* @__PURE__ */ React3.createElement(SearchList.Item, {
|
|
281
418
|
...props,
|
|
282
419
|
classNames: [
|
|
283
420
|
"mli-cardSpacingChrome pli-cardSpacingChrome",
|
|
@@ -314,9 +451,14 @@ var translations = [
|
|
|
314
451
|
];
|
|
315
452
|
export {
|
|
316
453
|
Combobox,
|
|
454
|
+
Listbox,
|
|
317
455
|
PopoverCombobox,
|
|
318
456
|
SearchList,
|
|
457
|
+
commandItem,
|
|
458
|
+
createListboxScope,
|
|
459
|
+
searchListItem,
|
|
319
460
|
translationKey,
|
|
320
|
-
translations
|
|
461
|
+
translations,
|
|
462
|
+
useListboxContext
|
|
321
463
|
};
|
|
322
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 { 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 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' | '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 <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", "//\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 <SearchList.Root {...props} classNames='contents density-fine' 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 = forwardRef<HTMLInputElement, PopoverComboboxInputProps>(\n ({ classNames, ...props }, forwardedRef) => {\n return (\n <SearchList.Input\n {...props}\n classNames={[\n 'mli-cardSpacingChrome mbs-cardSpacingChrome is-[calc(100%-2*var(--dx-cardSpacingChrome))]',\n classNames,\n ]}\n ref={forwardedRef}\n />\n );\n },\n);\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 = 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": ";;;;AAIA,SAASA,qBAAqB;AAC9B,SAASC,4BAA4B;AACrC,SAASC,cAAcC,cAAcC,aAAaC,aAAaC,mBAAmB;AAClF,OAAOC,
|
|
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", "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", "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", "
|
|
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": ";;;;AAIA,SAASA,qBAAqB;AAC9B,SAASC,4BAA4B;AACrC,SAASC,cAAcC,cAAcC,aAAaC,aAAaC,mBAAmB;AAClF,OAAOC,SAA6DC,YAAYC,mBAAmB;AAEnG,SACEC,QAEAC,MAGAC,mBACAC,qBACAC,OACAC,uBACK;AACP,SAASC,IAAIC,6BAA6B;AAkB1C,IAAMC,gBAAgB;AACtB,IAAMC,wBAAwB;AAC9B,IAAMC,kBAAkB;AACxB,IAAMC,uBAAuB;AAE7B,IAAM,CAACC,kBAAkBC,kBAAAA,IAAsBC,cAA6CN,eAAe,CAAC,CAAA;AAM5G,IAAMO,iBAAiBC,2BACrB,CAAC,EAAEC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;;;AACnC,WACE,sBAAA,cAACC,aAAAA;MAAa,GAAGF;MAAOG,WAAWC,GAAG,IAAIL,UAAAA;MAAaM,KAAKJ;OACzDH,QAAAA;;;;AAGP,CAAA;AAGFF,eAAeU,cAAcf;AAQ7B,IAAMgB,kBAAkBV,2BACtB,CAAC,EAAEE,YAAYS,SAASC,cAAcC,WAAWC,gBAAgBC,SAAS,GAAGZ,MAAAA,GAASC,iBAAAA;;;AAEpF,UAAM,EAAEY,eAAc,IAAKC,gBAAAA;AAC3B,UAAM,EAAEC,GAAE,IAAKD,gBAAAA;AACf,UAAMN,UAAUQ,kBAAkBP,YAAAA;AAClC,UAAMC,YAAYO,oBAAoBN,cAAAA;AAEtC,WACE,sBAAA,cAACO,cAAAA;MACE,GAAGlB;MACJG,WAAWY,GACT,eACA,SACA;QACEH;QACAO,UAAUnB,MAAMmB;QAChBX;QACAE;MACF,GACA,wBACAX,UAAAA;MAED,GAAIC,MAAMoB,aAAa,CAACP,kBAAkB;QAAEO,WAAW;MAAK;MAC7Df,KAAKJ;;;;;AAGX,CAAA;AAKF,IAAMoB,oBAAoBxB,2BACxB,CAAC,EAAEC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;;;AACnC,WACE,sBAAA,cAACqB,aAAAA;MAAa,GAAGtB;MAAOG,WAAWC,GAAGL,UAAAA;MAAaM,KAAKJ;OACrDH,QAAAA;;;;AAGP,CAAA;AAKF,IAAMyB,kBAAkB1B,2BACtB,CAAC,EAAEC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;;;AACnC,WACE,sBAAA,cAACuB,cAAAA;MAAc,GAAGxB;MAAOG,WAAWC,GAAGL,UAAAA;MAAaM,KAAKJ;OACtDH,QAAAA;;;;AAGP,CAAA;AAKF,IAAM2B,cAAc;AACpB,IAAMC,iBACJ;AAEF,IAAMC,iBAAiB9B,2BACrB,CAAC,EAAEC,UAAUC,YAAY6B,UAAU,GAAG5B,MAAAA,GAASC,iBAAAA;;;AAC7C,UAAM,EAAE4B,eAAeC,aAAY,IAAKpC,mBAAmBF,oBAAAA;AAC3D,UAAMuC,eAAeC,YACnB,CAACC,cAAAA;AACCJ,sBAAgBI,SAAAA;AAChBH,qBAAe,KAAA;AACfF,iBAAWK,SAAAA;IACb,GACA;MAACJ;MAAeC;MAAcF;KAAS;AAEzC,WACE,sBAAA,cAACM,aAAAA;MAAa,GAAGlC;MAAO4B,UAAUG;MAAc5B,WAAWC,GAAGsB,gBAAgB3B,UAAAA;MAAaM,KAAKJ;OAC7FH,QAAAA;;;;AAGP,CAAA;AAGF6B,eAAerB,cAAcd;AAE7B,IAAM2C,eAAe,CAAC,EACpBC,SAASC,cACTC,MAAMC,WACNC,aACAV,cAAcW,mBACdC,OAAOC,YACPC,cACAf,eAAegB,oBACfC,aACAhD,SAAQ,MACU;;;AAClB,UAAMsC,UAAUW,MAAM1D,eAAegD,YAAAA;AACrC,UAAM,CAACC,OAAO,OAAOR,YAAAA,IAAgBkB,qBAAqB;MACxDC,MAAMV;MACNW,UAAUT;MACVU,aAAaX;IACf,CAAA;AACA,UAAM,CAACE,QAAQ,IAAIb,aAAAA,IAAiBmB,qBAAqB;MACvDC,MAAMN;MACNO,UAAUL;MACVM,aAAaP;IACf,CAAA;AACA,WACE,sBAAA,cAACnD,kBAAAA;MACC2D,YAAAA;MACAhB;MACAE;MACAR;MACAY;MACAb;MACAiB;OAEChD,QAAAA;;;;AAGP;AAEAqC,aAAa7B,cAAcjB;AAI3B,IAAMgE,kBAAkBxD,2BACtB,CAAC,EAAEC,UAAUwD,SAAS,GAAGtD,MAAAA,GAASC,iBAAAA;;;AAChC,UAAM,EAAEmC,SAASE,MAAMR,cAAcgB,aAAaJ,MAAK,IAAKhD,mBAAmBJ,qBAAAA;AAC/E,UAAMiE,cAAcvB,YAClB,CAACwB,UAAAA;AACCF,gBAAUE,KAAAA;AACV1B,qBAAe,IAAA;IACjB,GACA;MAACwB;MAASxB;KAAa;AAEzB,WACE,sBAAA,cAAC2B,QAAAA;MACE,GAAGzD;MACJ0D,MAAK;MACLC,iBAAerB;MACfsB,iBAAexB;MACfyB,iBAAc;MACdP,SAASC;MACTlD,KAAKJ;OAEJH,YACC,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACgE,QAAAA;MACC3D,WAAWC,GAAG,yDAAyD,CAACsC,SAASqB,qBAAAA;OAEhFrB,SAASI,WAAAA,GAEZ,sBAAA,cAACkB,MAAAA;MAAKC,MAAK;MAAuBC,MAAM;;;;;AAKlD,CAAA;AAGFb,gBAAgB/C,cAAchB;AAEvB,IAAM6E,aAAa;EACxBC,MAAMxE;EACNyE,OAAO9D;EACP+D,SAASjD;EACTkD,OAAOhD;EACPiD,MAAM7C;AACR;AAEO,IAAM8C,WAAW;EACtBL,MAAMjC;EACNuC,SAASrB;EACT3D;AACF;;;;AC1OA,SAASiF,+BAA+B;AACxC,SAASC,uBAAuB;AAChC,SAAqBC,0BAA0B;AAC/C,SAASC,wBAAAA,6BAA4B;AACrC,OAAOC,UAAqCC,cAAAA,aAAYC,eAAAA,cAAaC,WAAWC,cAAc;AAE9F,SAASC,QAAAA,aAAkD;AAC3D,SAASC,MAAAA,WAAU;AAInB,IAAMC,eAAe;AACrB,IAAMC,sBAAsB;AAC5B,IAAMC,4BAA4B;AAClC,IAAMC,gCAAgC;AAgBtC,IAAM,CAACC,sBAAsBC,kBAAAA,IAAsBC,mBAAmBN,cAAc,CAAA,CAAE;AACtF,IAAM,CAACO,4BAA4BC,wBAAAA,IAA4BF,mBAAmBL,qBAAqB;EACrGI;CACD;AAYD,IAAM,CAACI,iBAAiBC,iBAAAA,IAAqBN,qBAA0CJ,YAAAA;AACvF,IAAM,CAACW,uBAAuBC,uBAAAA,IAC5BL,2BAAsDN,mBAAAA;AAMxD,IAAMY,cAAcC,gBAAAA,YAClB,CAACC,OAA6CC,iBAAAA;;;AAC5C,UAAM,EACJC,gBACAC,UACAC,YACAC,OAAOC,YACPC,cACAC,eACAC,WACA,GAAGC,UAAAA,IACDV;AAEJ,UAAMW,aAAaC,wBAAwB;MAAEC,MAAM;IAAW,CAAA;AAC9D,UAAMC,MAAMC,OAAgC,IAAA;AAC5C,UAAMC,UAAUC,gBAAkCH,KAAKb,YAAAA;AAEvD,UAAM,CAACiB,eAAeC,gBAAAA,IAAoBC,sBAAqB;MAC7DC,MAAMf;MACNgB,aAAaf;MACbgB,UAAUf;IACZ,CAAA;AAEA,UAAMgB,oBAAoB,CAACnB,UAAAA;AACzBc,uBAAiBd,KAAAA;IACnB;AAEAoB,cAAU,MAAA;AAEPX,UAAIY,SAASC,cAAc,wBAAA,GAA6CC,MAAAA;IAC3E,GAAG;MAACnB;KAAU;AAEd,WACE,gBAAAoB,OAAA,cAACnC,iBAAAA;MAAgBoC,OAAO5B;MAAgBgB;MAA8BV,eAAegB;OACnF,gBAAAK,OAAA,cAACE,MAAAA;MACCC,MAAK;MACJ,GAAGtB;MACJuB,WAAWC,IAAG,uBAAuB9B,UAAAA;MACrCU,KAAKE;MACJ,GAAGL;OAEHR,QAAAA,CAAAA;;;;AAIT,CAAA;AAGFL,YAAYqC,cAAclD;AAE1B,IAAMmD,gBAAgBrC,gBAAAA,YACpB,CAACC,OAA+CC,iBAAAA;;;AAC9C,UAAM,EAAEC,gBAAgBC,UAAUC,YAAYC,OAAO,GAAGK,UAAAA,IAAcV;AACtE,UAAM,EAAEkB,eAAeV,cAAa,IAAKb,kBAAkBT,qBAAqBgB,cAAAA;AAEhF,UAAMmC,aAAanB,kBAAkBb;AAErC,UAAMiC,eAAeC,aAAY,MAAA;AAC/B/B,oBAAcH,KAAAA;IAChB,GAAG;MAACA;MAAOG;KAAc;AAEzB,WACE,gBAAAqB,OAAA,cAACjC,uBAAAA;MAAsBkC,OAAO5B;MAAgBG;MAAcgC;OAC1D,gBAAAR,OAAA,cAACW,MAAAA;MACCR,MAAK;MACJ,GAAGtB;MACJ+B,iBAAeJ;MACfK,UAAU;MACVT,WAAWC,IAAG,iBAAiBS,aAAaC,gBAAgBxC,UAAAA;MAC5DyC,SAASP;MACTQ,WAAW,CAAC,EAAEC,IAAG,MAAE;AACjB,YAAI;UAAC;UAAS;UAAKC,SAASD,GAAAA,GAAM;AAChCT,uBAAAA;QACF;MACF;MACAxB,KAAKb;OAEJE,QAAAA,CAAAA;;;;AAIT,CAAA;AAGFiC,cAAcD,cAAcjD;AAE5B,IAAM+D,qBAAqBlD,gBAAAA,YACzB,CAAC,EAAEI,UAAUC,YAAY,GAAGM,UAAAA,GAAaT,iBAAAA;;;AACvC,WACE,gBAAA4B,OAAA,cAACqB,QAAAA;MAAM,GAAGxC;MAAWuB,WAAWC,IAAG,iBAAiB9B,UAAAA;MAAaU,KAAKb;OACnEE,QAAAA;;;;AAGP,CAAA;AAGF8C,mBAAmBd,cAAchD;AAIjC,IAAMgE,yBAAyBpD,gBAAAA,YAC7B,CAACC,OAA8DC,iBAAAA;;;AAC7D,UAAM,EAAEmD,sBAAsBhD,YAAY,GAAGM,UAAAA,IAAcV;AAC3D,UAAM,EAAEqC,WAAU,IAAKxC,wBAAwBT,+BAA+BgE,oBAAAA;AAE9E,WACE,gBAAAvB,OAAA,cAACwB,OAAAA;MACCC,MAAK;MACJ,GAAG5C;MACJN,YAAY8B,IAAG,CAACG,cAAc,aAAajC,UAAAA;MAC3CU,KAAKb;;;;;AAGX,CAAA;AAGFkD,uBAAuBhB,cAAc/C;AAE9B,IAAMmE,UAAU;EACrBC,MAAM1D;EACN2D,QAAQrB;EACRsB,aAAaT;EACbU,iBAAiBR;AACnB;;;;AChLA,SAASS,wBAAAA,6BAA4B;AACrC,OAAOC,UAASC,cAAAA,mBAAkB;AAElC,SACEC,eAIK;AAgBP,IAAMC,sBAAsB,CAAC,EAC3BC,OACAC,UACAC,MAAMC,WACNC,cAAcC,mBACdC,aACA,GAAGC,MAAAA,MACsB;;;AACzB,UAAM,CAACL,MAAME,YAAAA,IAAgBI,sBAAqB;MAChDC,MAAMN;MACNO,UAAUL;MACVM,aAAaL;IACf,CAAA;AACA,WACE,gBAAAM,OAAA,cAACC,SAASC,MAAI;MAACZ;MAAYE;MAA6B,GAAGG;OACzD,gBAAAK,OAAA,cAACG,QAAQD,MAAI;MAACZ;MAAYE;MAA4BJ;OACnDC,QAAAA,CAAAA;;;;AAIT;AAIA,IAAMe,gCAAgC;AAEtC,IAAMC,yBAAyBC,gBAAAA,YAC7B,CACE,EACEC,OAAO,UACPC,mBAAmB,IACnBC,YACAC,OACAC,aACAC,iBACAC,mBACAC,cACAC,QACAC,kBACAC,iBACAC,kBACAC,iBACAC,sBACAC,gBACAC,mBACAC,YACAlC,UACAmC,YACA,GAAG7B,MAAAA,GAEL8B,iBAAAA;;;AAEA,UAAM,EAAEC,QAAO,IAAKzB,SAAS0B,mBAAmBvB,6BAAAA;AAChD,WACE,gBAAAJ,OAAA,cAACG,QAAQyB,SAAO;MAEZrB;MACAE;MACAC;MACAC;MACAC;MACAC;MACAL;MACAM;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MACAC;MAEFC,YAAY;QACV;QACAA;;MAEFK,IAAIH;MACJI,KAAKL;OAEL,gBAAAzB,OAAA,cAAC+B,WAAW7B,MAAI;MAAE,GAAGP;MAAO6B,YAAW;MAAwBQ,MAAK;OACjE3C,QAAAA,CAAAA;;;;AAIT,CAAA;AAGFgB,uBAAuB4B,cAAc7B;AAIrC,IAAM8B,yBAAyB5B,gBAAAA,YAA2D,CAACX,OAAO8B,iBAAAA;;;AAChG,WACE,gBAAAzB,OAAA,cAACG,QAAQgC,SAAO;MAACC,SAAAA;OACf,gBAAApC,OAAA,cAACC,SAASkC,SAAO;MAAE,GAAGxC;MAAOmC,KAAKL;;;;;AAGxC,CAAA;AAIA,IAAMY,gCAAgClC,QAAQmC;AAI9C,IAAMC,uBAAuBjC,gBAAAA,YAC3B,CAAC,EAAEkB,YAAY,GAAG7B,MAAAA,GAAS8B,iBAAAA;;;AACzB,WACE,gBAAAzB,OAAA,cAAC+B,WAAWS,OAAK;MACd,GAAG7C;MACJ6B,YAAY;QACV;QACAA;;MAEFM,KAAKL;;;;;AAGX,CAAA;AAKF,IAAMgB,sBAAsBnC,gBAAAA,YAC1B,CAAC,EAAEkB,YAAY,GAAG7B,MAAAA,GAAS8B,iBAAAA;;;AACzB,WACE,gBAAAzB,OAAA,cAAC+B,WAAWH,SAAO;MAChB,GAAGjC;MACJ6B,YAAY;QAAC;QAAkDA;;MAC/DM,KAAKL;;;;;AAGX,CAAA;AAKF,IAAMiB,sBAAsBpC,gBAAAA,YAC1B,CAAC,EAAEkB,YAAY,GAAG7B,MAAAA,GAAS8B,iBAAAA;;;AACzB,WACE,gBAAAzB,OAAA,cAAC+B,WAAWY,MAAI;MACb,GAAGhD;MACJ6B,YAAY;QAAC;QAA+CA;;MAC5DM,KAAKL;;;;;AAGX,CAAA;AAKF,IAAMmB,uBAAuBzC,QAAQ0C;AAIrC,IAAMC,uBAAuBf,WAAWgB;AAEjC,IAAMC,kBAAkB;EAC7B9C,MAAMf;EACNyC,SAASvB;EACT8B,SAASD;EACTI,gBAAgBD;EAChBG,OAAOD;EACPU,MAAMR;EACNE,MAAMD;EACNG,OAAOD;EACPG,OAAOD;AACT;;;AC9LO,IAAMI,iBAAiB;AAEvB,IAAMC,eAAe;EAC1B;IACE,SAAS;MACP,CAACD,cAAAA,GAAiB,CAAC;IACrB;EACF;;",
|
|
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":"AAMA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AACzF,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,
|
|
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"}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
import '@
|
|
1
|
+
import { type StoryObj } from '@storybook/react-vite';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
type StoryItems = Record<string, string>;
|
|
4
|
-
|
|
4
|
+
type StoryProps = {
|
|
5
|
+
items: StoryItems;
|
|
6
|
+
};
|
|
7
|
+
declare const meta: {
|
|
5
8
|
title: string;
|
|
6
|
-
component:
|
|
7
|
-
|
|
8
|
-
}>;
|
|
9
|
+
component: any;
|
|
10
|
+
render: ({ items }: StoryProps) => React.JSX.Element;
|
|
9
11
|
decorators: import("@storybook/react").Decorator[];
|
|
10
12
|
};
|
|
11
|
-
export default
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
};
|
|
13
|
+
export default meta;
|
|
14
|
+
type Story = StoryObj<typeof meta>;
|
|
15
|
+
export declare const Default: Story;
|
|
15
16
|
//# sourceMappingURL=SearchList.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchList.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchList.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"SearchList.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchList.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAUzC,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAiBF,QAAA,MAAM,IAAI;;eAEsB,GAAG;wBAjBa,UAAU;;CAoBrB,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}
|