@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
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
// src/components/SearchList.tsx
|
|
2
2
|
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
3
|
-
import { CaretDown } from "@phosphor-icons/react";
|
|
4
3
|
import { createContext } from "@radix-ui/react-context";
|
|
5
4
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
6
5
|
import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from "cmdk";
|
|
7
6
|
import React, { forwardRef, useCallback } from "react";
|
|
8
|
-
import { Button, useDensityContext, useElevationContext, useId, useThemeContext } from "@dxos/react-ui";
|
|
9
|
-
import {
|
|
7
|
+
import { Button, Icon, useDensityContext, useElevationContext, useId, useThemeContext } from "@dxos/react-ui";
|
|
8
|
+
import { mx, staticPlaceholderText } from "@dxos/react-ui-theme";
|
|
10
9
|
var COMBOBOX_NAME = "Combobox";
|
|
11
10
|
var COMBOBOX_TRIGGER_NAME = "ComboboxTrigger";
|
|
12
11
|
var SEARCHLIST_NAME = "SearchList";
|
|
@@ -25,7 +24,7 @@ var SearchListRoot = /* @__PURE__ */ forwardRef(({ children, classNames, ...prop
|
|
|
25
24
|
}
|
|
26
25
|
});
|
|
27
26
|
SearchListRoot.displayName = SEARCHLIST_NAME;
|
|
28
|
-
var SearchListInput = /* @__PURE__ */ forwardRef(({
|
|
27
|
+
var SearchListInput = /* @__PURE__ */ forwardRef(({ classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
|
|
29
28
|
var _effect = _useSignals();
|
|
30
29
|
try {
|
|
31
30
|
const { hasIosKeyboard } = useThemeContext();
|
|
@@ -73,6 +72,8 @@ var SearchListEmpty = /* @__PURE__ */ forwardRef(({ children, classNames, ...pro
|
|
|
73
72
|
_effect.f();
|
|
74
73
|
}
|
|
75
74
|
});
|
|
75
|
+
var commandItem = "flex items-center overflow-hidden";
|
|
76
|
+
var searchListItem = "plb-1 pli-2 rounded-sm select-none cursor-pointer data-[selected]:bg-hoverOverlay hover:bg-hoverOverlay";
|
|
76
77
|
var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, onSelect, ...props }, forwardedRef) => {
|
|
77
78
|
var _effect = _useSignals();
|
|
78
79
|
try {
|
|
@@ -89,7 +90,7 @@ var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, onSelec
|
|
|
89
90
|
return /* @__PURE__ */ React.createElement(CommandItem, {
|
|
90
91
|
...props,
|
|
91
92
|
onSelect: handleSelect,
|
|
92
|
-
className: mx(
|
|
93
|
+
className: mx(searchListItem, classNames),
|
|
93
94
|
ref: forwardedRef
|
|
94
95
|
}, children);
|
|
95
96
|
} finally {
|
|
@@ -146,9 +147,9 @@ var ComboboxTrigger = /* @__PURE__ */ forwardRef(({ children, onClick, ...props
|
|
|
146
147
|
ref: forwardedRef
|
|
147
148
|
}, children ?? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
|
|
148
149
|
className: mx("font-normal text-start flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
|
|
149
|
-
}, value || placeholder), /* @__PURE__ */ React.createElement(
|
|
150
|
-
|
|
151
|
-
|
|
150
|
+
}, value || placeholder), /* @__PURE__ */ React.createElement(Icon, {
|
|
151
|
+
icon: "ph--caret-down--bold",
|
|
152
|
+
size: 3
|
|
152
153
|
})));
|
|
153
154
|
} finally {
|
|
154
155
|
_effect.f();
|
|
@@ -168,24 +169,155 @@ var Combobox = {
|
|
|
168
169
|
useComboboxContext
|
|
169
170
|
};
|
|
170
171
|
|
|
171
|
-
// src/
|
|
172
|
+
// src/components/Listbox.tsx
|
|
172
173
|
import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
|
|
174
|
+
import { useArrowNavigationGroup } from "@fluentui/react-tabster";
|
|
175
|
+
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
176
|
+
import { createContextScope } from "@radix-ui/react-context";
|
|
173
177
|
import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
|
|
174
|
-
import React2, { forwardRef as forwardRef2 } from "react";
|
|
178
|
+
import React2, { forwardRef as forwardRef2, useCallback as useCallback2, useEffect, useRef } from "react";
|
|
179
|
+
import { Icon as Icon2 } from "@dxos/react-ui";
|
|
180
|
+
import { mx as mx2 } from "@dxos/react-ui-theme";
|
|
181
|
+
var LISTBOX_NAME = "Listbox";
|
|
182
|
+
var LISTBOX_OPTION_NAME = "ListboxOption";
|
|
183
|
+
var LISTBOX_OPTION_LABEL_NAME = "ListboxOptionLabel";
|
|
184
|
+
var LISTBOX_OPTION_INDICATOR_NAME = "ListboxOptionIndicator";
|
|
185
|
+
var [createListboxContext, createListboxScope] = createContextScope(LISTBOX_NAME, []);
|
|
186
|
+
var [createListboxOptionContext, createListboxOptionScope] = createContextScope(LISTBOX_OPTION_NAME, [
|
|
187
|
+
createListboxScope
|
|
188
|
+
]);
|
|
189
|
+
var [ListboxProvider, useListboxContext] = createListboxContext(LISTBOX_NAME);
|
|
190
|
+
var [ListboxOptionProvider, useListboxOptionContext] = createListboxOptionContext(LISTBOX_OPTION_NAME);
|
|
191
|
+
var ListboxRoot = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
|
|
192
|
+
var _effect = _useSignals2();
|
|
193
|
+
try {
|
|
194
|
+
const { __listboxScope, children, classNames, value: propsValue, defaultValue, onValueChange, autoFocus, ...rootProps } = props;
|
|
195
|
+
const arrowGroup = useArrowNavigationGroup({
|
|
196
|
+
axis: "vertical"
|
|
197
|
+
});
|
|
198
|
+
const ref = useRef(null);
|
|
199
|
+
const rootRef = useComposedRefs(ref, forwardedRef);
|
|
200
|
+
const [selectedValue, setSelectedValue] = useControllableState2({
|
|
201
|
+
prop: propsValue,
|
|
202
|
+
defaultProp: defaultValue,
|
|
203
|
+
onChange: onValueChange
|
|
204
|
+
});
|
|
205
|
+
const handleValueChange = (value) => {
|
|
206
|
+
setSelectedValue(value);
|
|
207
|
+
};
|
|
208
|
+
useEffect(() => {
|
|
209
|
+
ref.current?.querySelector('[aria-selected="true"]')?.focus();
|
|
210
|
+
}, [
|
|
211
|
+
autoFocus
|
|
212
|
+
]);
|
|
213
|
+
return /* @__PURE__ */ React2.createElement(ListboxProvider, {
|
|
214
|
+
scope: __listboxScope,
|
|
215
|
+
selectedValue,
|
|
216
|
+
onValueChange: handleValueChange
|
|
217
|
+
}, /* @__PURE__ */ React2.createElement("ul", {
|
|
218
|
+
role: "listbox",
|
|
219
|
+
...rootProps,
|
|
220
|
+
className: mx2("p-cardSpacingChrome", classNames),
|
|
221
|
+
ref: rootRef,
|
|
222
|
+
...arrowGroup
|
|
223
|
+
}, children));
|
|
224
|
+
} finally {
|
|
225
|
+
_effect.f();
|
|
226
|
+
}
|
|
227
|
+
});
|
|
228
|
+
ListboxRoot.displayName = LISTBOX_NAME;
|
|
229
|
+
var ListboxOption = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
|
|
230
|
+
var _effect = _useSignals2();
|
|
231
|
+
try {
|
|
232
|
+
const { __listboxScope, children, classNames, value, ...rootProps } = props;
|
|
233
|
+
const { selectedValue, onValueChange } = useListboxContext(LISTBOX_OPTION_NAME, __listboxScope);
|
|
234
|
+
const isSelected = selectedValue === value;
|
|
235
|
+
const handleSelect = useCallback2(() => {
|
|
236
|
+
onValueChange(value);
|
|
237
|
+
}, [
|
|
238
|
+
value,
|
|
239
|
+
onValueChange
|
|
240
|
+
]);
|
|
241
|
+
return /* @__PURE__ */ React2.createElement(ListboxOptionProvider, {
|
|
242
|
+
scope: __listboxScope,
|
|
243
|
+
value,
|
|
244
|
+
isSelected
|
|
245
|
+
}, /* @__PURE__ */ React2.createElement("li", {
|
|
246
|
+
role: "option",
|
|
247
|
+
...rootProps,
|
|
248
|
+
"aria-selected": isSelected,
|
|
249
|
+
tabIndex: 0,
|
|
250
|
+
className: mx2("dx-focus-ring", commandItem, searchListItem, classNames),
|
|
251
|
+
onClick: handleSelect,
|
|
252
|
+
onKeyDown: ({ key }) => {
|
|
253
|
+
if ([
|
|
254
|
+
"Enter",
|
|
255
|
+
" "
|
|
256
|
+
].includes(key)) {
|
|
257
|
+
handleSelect();
|
|
258
|
+
}
|
|
259
|
+
},
|
|
260
|
+
ref: forwardedRef
|
|
261
|
+
}, children));
|
|
262
|
+
} finally {
|
|
263
|
+
_effect.f();
|
|
264
|
+
}
|
|
265
|
+
});
|
|
266
|
+
ListboxOption.displayName = LISTBOX_OPTION_NAME;
|
|
267
|
+
var ListboxOptionLabel = /* @__PURE__ */ forwardRef2(({ children, classNames, ...rootProps }, forwardedRef) => {
|
|
268
|
+
var _effect = _useSignals2();
|
|
269
|
+
try {
|
|
270
|
+
return /* @__PURE__ */ React2.createElement("span", {
|
|
271
|
+
...rootProps,
|
|
272
|
+
className: mx2("grow truncate", classNames),
|
|
273
|
+
ref: forwardedRef
|
|
274
|
+
}, children);
|
|
275
|
+
} finally {
|
|
276
|
+
_effect.f();
|
|
277
|
+
}
|
|
278
|
+
});
|
|
279
|
+
ListboxOptionLabel.displayName = LISTBOX_OPTION_LABEL_NAME;
|
|
280
|
+
var ListboxOptionIndicator = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
|
|
281
|
+
var _effect = _useSignals2();
|
|
282
|
+
try {
|
|
283
|
+
const { __listboxOptionScope, classNames, ...rootProps } = props;
|
|
284
|
+
const { isSelected } = useListboxOptionContext(LISTBOX_OPTION_INDICATOR_NAME, __listboxOptionScope);
|
|
285
|
+
return /* @__PURE__ */ React2.createElement(Icon2, {
|
|
286
|
+
icon: "ph--check--regular",
|
|
287
|
+
...rootProps,
|
|
288
|
+
classNames: mx2(!isSelected && "invisible", classNames),
|
|
289
|
+
ref: forwardedRef
|
|
290
|
+
});
|
|
291
|
+
} finally {
|
|
292
|
+
_effect.f();
|
|
293
|
+
}
|
|
294
|
+
});
|
|
295
|
+
ListboxOptionIndicator.displayName = LISTBOX_OPTION_INDICATOR_NAME;
|
|
296
|
+
var Listbox = {
|
|
297
|
+
Root: ListboxRoot,
|
|
298
|
+
Option: ListboxOption,
|
|
299
|
+
OptionLabel: ListboxOptionLabel,
|
|
300
|
+
OptionIndicator: ListboxOptionIndicator
|
|
301
|
+
};
|
|
302
|
+
|
|
303
|
+
// src/composites/PopoverCombobox.tsx
|
|
304
|
+
import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
|
|
305
|
+
import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
|
|
306
|
+
import React3, { forwardRef as forwardRef3 } from "react";
|
|
175
307
|
import { Popover } from "@dxos/react-ui";
|
|
176
308
|
var PopoverComboboxRoot = ({ modal, children, open: propsOpen, onOpenChange: propsOnOpenChange, defaultOpen, ...props }) => {
|
|
177
|
-
var _effect =
|
|
309
|
+
var _effect = _useSignals3();
|
|
178
310
|
try {
|
|
179
|
-
const [open, onOpenChange] =
|
|
311
|
+
const [open, onOpenChange] = useControllableState3({
|
|
180
312
|
prop: propsOpen,
|
|
181
313
|
onChange: propsOnOpenChange,
|
|
182
314
|
defaultProp: defaultOpen
|
|
183
315
|
});
|
|
184
|
-
return /* @__PURE__ */
|
|
316
|
+
return /* @__PURE__ */ React3.createElement(Combobox.Root, {
|
|
185
317
|
open,
|
|
186
318
|
onOpenChange,
|
|
187
319
|
...props
|
|
188
|
-
}, /* @__PURE__ */
|
|
320
|
+
}, /* @__PURE__ */ React3.createElement(Popover.Root, {
|
|
189
321
|
open,
|
|
190
322
|
onOpenChange,
|
|
191
323
|
modal
|
|
@@ -195,11 +327,11 @@ var PopoverComboboxRoot = ({ modal, children, open: propsOpen, onOpenChange: pro
|
|
|
195
327
|
}
|
|
196
328
|
};
|
|
197
329
|
var POPOVER_COMBOBOX_CONTENT_NAME = "PopoverComboboxContent";
|
|
198
|
-
var PopoverComboboxContent = /* @__PURE__ */
|
|
199
|
-
var _effect =
|
|
330
|
+
var PopoverComboboxContent = /* @__PURE__ */ forwardRef3(({ side = "bottom", collisionPadding = 48, sideOffset, align, alignOffset, avoidCollisions, collisionBoundary, arrowPadding, sticky, hideWhenDetached, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, forceMount, children, classNames, ...props }, forwardedRef) => {
|
|
331
|
+
var _effect = _useSignals3();
|
|
200
332
|
try {
|
|
201
333
|
const { modalId } = Combobox.useComboboxContext(POPOVER_COMBOBOX_CONTENT_NAME);
|
|
202
|
-
return /* @__PURE__ */
|
|
334
|
+
return /* @__PURE__ */ React3.createElement(Popover.Content, {
|
|
203
335
|
side,
|
|
204
336
|
sideOffset,
|
|
205
337
|
align,
|
|
@@ -217,25 +349,28 @@ var PopoverComboboxContent = /* @__PURE__ */ forwardRef2(({ side = "bottom", col
|
|
|
217
349
|
onFocusOutside,
|
|
218
350
|
onInteractOutside,
|
|
219
351
|
forceMount,
|
|
220
|
-
classNames
|
|
352
|
+
classNames: [
|
|
353
|
+
"is-[--radix-popover-trigger-width] max-bs-[--radix-popover-content-available-height] grid grid-rows-[min-content_1fr]",
|
|
354
|
+
classNames
|
|
355
|
+
],
|
|
221
356
|
id: modalId,
|
|
222
357
|
ref: forwardedRef
|
|
223
|
-
}, /* @__PURE__ */
|
|
358
|
+
}, /* @__PURE__ */ React3.createElement(SearchList.Root, {
|
|
224
359
|
...props,
|
|
225
|
-
classNames: "contents",
|
|
360
|
+
classNames: "contents density-fine",
|
|
226
361
|
role: "none"
|
|
227
|
-
}, children))
|
|
362
|
+
}, children));
|
|
228
363
|
} finally {
|
|
229
364
|
_effect.f();
|
|
230
365
|
}
|
|
231
366
|
});
|
|
232
367
|
PopoverComboboxContent.displayName = POPOVER_COMBOBOX_CONTENT_NAME;
|
|
233
|
-
var PopoverComboboxTrigger = /* @__PURE__ */
|
|
234
|
-
var _effect =
|
|
368
|
+
var PopoverComboboxTrigger = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
|
|
369
|
+
var _effect = _useSignals3();
|
|
235
370
|
try {
|
|
236
|
-
return /* @__PURE__ */
|
|
371
|
+
return /* @__PURE__ */ React3.createElement(Popover.Trigger, {
|
|
237
372
|
asChild: true
|
|
238
|
-
}, /* @__PURE__ */
|
|
373
|
+
}, /* @__PURE__ */ React3.createElement(Combobox.Trigger, {
|
|
239
374
|
...props,
|
|
240
375
|
ref: forwardedRef
|
|
241
376
|
}));
|
|
@@ -244,22 +379,51 @@ var PopoverComboboxTrigger = /* @__PURE__ */ forwardRef2((props, forwardedRef) =
|
|
|
244
379
|
}
|
|
245
380
|
});
|
|
246
381
|
var PopoverComboboxVirtualTrigger = Popover.VirtualTrigger;
|
|
247
|
-
var PopoverComboboxInput =
|
|
248
|
-
var
|
|
249
|
-
var _effect = _useSignals2();
|
|
382
|
+
var PopoverComboboxInput = /* @__PURE__ */ forwardRef3(({ classNames, ...props }, forwardedRef) => {
|
|
383
|
+
var _effect = _useSignals3();
|
|
250
384
|
try {
|
|
251
|
-
return /* @__PURE__ */
|
|
252
|
-
constrainInline,
|
|
253
|
-
constrainBlock
|
|
254
|
-
}, /* @__PURE__ */ React2.createElement(SearchList.Content, {
|
|
385
|
+
return /* @__PURE__ */ React3.createElement(SearchList.Input, {
|
|
255
386
|
...props,
|
|
387
|
+
classNames: [
|
|
388
|
+
"mli-cardSpacingChrome mbs-cardSpacingChrome mbe-0 is-[calc(100%-2*var(--dx-cardSpacingChrome))]",
|
|
389
|
+
classNames
|
|
390
|
+
],
|
|
256
391
|
ref: forwardedRef
|
|
257
|
-
})
|
|
392
|
+
});
|
|
393
|
+
} finally {
|
|
394
|
+
_effect.f();
|
|
395
|
+
}
|
|
396
|
+
});
|
|
397
|
+
var PopoverComboboxList = /* @__PURE__ */ forwardRef3(({ classNames, ...props }, forwardedRef) => {
|
|
398
|
+
var _effect = _useSignals3();
|
|
399
|
+
try {
|
|
400
|
+
return /* @__PURE__ */ React3.createElement(SearchList.Content, {
|
|
401
|
+
...props,
|
|
402
|
+
classNames: [
|
|
403
|
+
"min-bs-0 overflow-y-auto plb-cardSpacingChrome",
|
|
404
|
+
classNames
|
|
405
|
+
],
|
|
406
|
+
ref: forwardedRef
|
|
407
|
+
});
|
|
408
|
+
} finally {
|
|
409
|
+
_effect.f();
|
|
410
|
+
}
|
|
411
|
+
});
|
|
412
|
+
var PopoverComboboxItem = /* @__PURE__ */ forwardRef3(({ classNames, ...props }, forwardedRef) => {
|
|
413
|
+
var _effect = _useSignals3();
|
|
414
|
+
try {
|
|
415
|
+
return /* @__PURE__ */ React3.createElement(SearchList.Item, {
|
|
416
|
+
...props,
|
|
417
|
+
classNames: [
|
|
418
|
+
"mli-cardSpacingChrome pli-cardSpacingChrome",
|
|
419
|
+
classNames
|
|
420
|
+
],
|
|
421
|
+
ref: forwardedRef
|
|
422
|
+
});
|
|
258
423
|
} finally {
|
|
259
424
|
_effect.f();
|
|
260
425
|
}
|
|
261
426
|
});
|
|
262
|
-
var PopoverComboboxItem = SearchList.Item;
|
|
263
427
|
var PopoverComboboxArrow = Popover.Arrow;
|
|
264
428
|
var PopoverComboboxEmpty = SearchList.Empty;
|
|
265
429
|
var PopoverCombobox = {
|
|
@@ -285,9 +449,14 @@ var translations = [
|
|
|
285
449
|
];
|
|
286
450
|
export {
|
|
287
451
|
Combobox,
|
|
452
|
+
Listbox,
|
|
288
453
|
PopoverCombobox,
|
|
289
454
|
SearchList,
|
|
455
|
+
commandItem,
|
|
456
|
+
createListboxScope,
|
|
457
|
+
searchListItem,
|
|
290
458
|
translationKey,
|
|
291
|
-
translations
|
|
459
|
+
translations,
|
|
460
|
+
useListboxContext
|
|
292
461
|
};
|
|
293
462
|
//# 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/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":31535},"dist/lib/browser/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":15451}}}
|