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