@dxos/react-ui-searchlist 0.3.7-main.ec7f1fc → 0.3.7
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 +5 -164
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/SearchList.d.ts +3 -26
- package/dist/types/src/components/SearchList.d.ts.map +1 -1
- package/dist/types/src/components/SearchList.stories.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/package.json +3 -5
- package/src/components/SearchList.stories.tsx +4 -2
- package/src/components/SearchList.tsx +4 -134
- package/src/index.ts +0 -1
- package/dist/types/src/composites/PopoverCombobox.d.ts +0 -27
- package/dist/types/src/composites/PopoverCombobox.d.ts.map +0 -1
- package/dist/types/src/composites/PopoverCombobox.stories.d.ts +0 -9
- 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/composites/PopoverCombobox.stories.tsx +0 -38
- package/src/composites/PopoverCombobox.tsx +0 -172
- package/src/composites/index.ts +0 -5
|
@@ -1,16 +1,8 @@
|
|
|
1
1
|
// packages/ui/react-ui-searchlist/src/components/SearchList.tsx
|
|
2
|
-
import { CaretDown } from "@phosphor-icons/react";
|
|
3
|
-
import { createContext } from "@radix-ui/react-context";
|
|
4
|
-
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
5
2
|
import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from "cmdk";
|
|
6
|
-
import React, { forwardRef
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
var COMBOBOX_NAME = "Combobox";
|
|
10
|
-
var COMBOBOX_TRIGGER_NAME = "ComboboxTrigger";
|
|
11
|
-
var SEARCHLIST_NAME = "SearchList";
|
|
12
|
-
var SEARCHLIST_ITEM_NAME = "SearchListItem";
|
|
13
|
-
var [ComboboxProvider, useComboboxContext] = createContext(COMBOBOX_NAME, {});
|
|
3
|
+
import React, { forwardRef } from "react";
|
|
4
|
+
import { useDensityContext, useElevationContext, useThemeContext } from "@dxos/react-ui";
|
|
5
|
+
import { mx } from "@dxos/react-ui-theme";
|
|
14
6
|
var SearchListRoot = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
|
|
15
7
|
return /* @__PURE__ */ React.createElement(CommandRoot, {
|
|
16
8
|
...props,
|
|
@@ -18,7 +10,6 @@ var SearchListRoot = /* @__PURE__ */ forwardRef(({ children, classNames, ...prop
|
|
|
18
10
|
ref: forwardedRef
|
|
19
11
|
}, children);
|
|
20
12
|
});
|
|
21
|
-
SearchListRoot.displayName = SEARCHLIST_NAME;
|
|
22
13
|
var SearchListInput = /* @__PURE__ */ forwardRef(({ children, classNames, density: propsDensity, elevation: propsElevation, variant = "subdued", ...props }, forwardedRef) => {
|
|
23
14
|
const { hasIosKeyboard } = useThemeContext();
|
|
24
15
|
const { tx } = useThemeContext();
|
|
@@ -52,73 +43,13 @@ var SearchListEmpty = /* @__PURE__ */ forwardRef(({ children, classNames, ...pro
|
|
|
52
43
|
ref: forwardedRef
|
|
53
44
|
}, children);
|
|
54
45
|
});
|
|
55
|
-
var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames,
|
|
56
|
-
const { onValueChange, onOpenChange } = useComboboxContext(SEARCHLIST_ITEM_NAME);
|
|
57
|
-
const handleSelect = useCallback((nextValue) => {
|
|
58
|
-
onValueChange?.(nextValue);
|
|
59
|
-
onOpenChange?.(false);
|
|
60
|
-
onSelect?.(nextValue);
|
|
61
|
-
}, [
|
|
62
|
-
onValueChange,
|
|
63
|
-
onOpenChange,
|
|
64
|
-
onSelect
|
|
65
|
-
]);
|
|
46
|
+
var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
|
|
66
47
|
return /* @__PURE__ */ React.createElement(CommandItem, {
|
|
67
48
|
...props,
|
|
68
|
-
|
|
69
|
-
className: mx("p-1 rounded select-none cursor-pointer data-[selected]:bg-neutral-450/10 data-[selected]:hover:bg-25/10", classNames),
|
|
49
|
+
className: mx("p-1 rounded data-[selected]:bg-neutral-450/10 data-[selected]:hover:bg-25/10", classNames),
|
|
70
50
|
ref: forwardedRef
|
|
71
51
|
}, children);
|
|
72
52
|
});
|
|
73
|
-
SearchListItem.displayName = SEARCHLIST_ITEM_NAME;
|
|
74
|
-
var ComboboxRoot = ({ modalId: propsModalId, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, value: propsValue, defaultValue, onValueChange: propsOnValueChange, placeholder, children }) => {
|
|
75
|
-
const modalId = useId(COMBOBOX_NAME, propsModalId);
|
|
76
|
-
const [open = false, onOpenChange] = useControllableState({
|
|
77
|
-
prop: propsOpen,
|
|
78
|
-
onChange: propsOnOpenChange,
|
|
79
|
-
defaultProp: defaultOpen
|
|
80
|
-
});
|
|
81
|
-
const [value = "", onValueChange] = useControllableState({
|
|
82
|
-
prop: propsValue,
|
|
83
|
-
onChange: propsOnValueChange,
|
|
84
|
-
defaultProp: defaultValue
|
|
85
|
-
});
|
|
86
|
-
return /* @__PURE__ */ React.createElement(ComboboxProvider, {
|
|
87
|
-
isCombobox: true,
|
|
88
|
-
modalId,
|
|
89
|
-
open,
|
|
90
|
-
onOpenChange,
|
|
91
|
-
value,
|
|
92
|
-
onValueChange,
|
|
93
|
-
placeholder
|
|
94
|
-
}, children);
|
|
95
|
-
};
|
|
96
|
-
ComboboxRoot.displayName = COMBOBOX_NAME;
|
|
97
|
-
var ComboboxTrigger = /* @__PURE__ */ forwardRef(({ children, onClick, ...props }, forwardedRef) => {
|
|
98
|
-
const { modalId, open, onOpenChange, placeholder, value } = useComboboxContext(COMBOBOX_TRIGGER_NAME);
|
|
99
|
-
const handleClick = useCallback((event) => {
|
|
100
|
-
onClick?.(event);
|
|
101
|
-
onOpenChange?.(true);
|
|
102
|
-
}, [
|
|
103
|
-
onClick,
|
|
104
|
-
onOpenChange
|
|
105
|
-
]);
|
|
106
|
-
return /* @__PURE__ */ React.createElement(Button, {
|
|
107
|
-
...props,
|
|
108
|
-
role: "combobox",
|
|
109
|
-
"aria-expanded": open,
|
|
110
|
-
"aria-controls": modalId,
|
|
111
|
-
"aria-haspopup": "dialog",
|
|
112
|
-
onClick: handleClick,
|
|
113
|
-
ref: forwardedRef
|
|
114
|
-
}, children ?? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
|
|
115
|
-
className: mx("font-normal text-start flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
|
|
116
|
-
}, value || placeholder), /* @__PURE__ */ React.createElement(CaretDown, {
|
|
117
|
-
weight: "bold",
|
|
118
|
-
className: getSize(3)
|
|
119
|
-
})));
|
|
120
|
-
});
|
|
121
|
-
ComboboxTrigger.displayName = COMBOBOX_TRIGGER_NAME;
|
|
122
53
|
var SearchList = {
|
|
123
54
|
Root: SearchListRoot,
|
|
124
55
|
Input: SearchListInput,
|
|
@@ -126,94 +57,6 @@ var SearchList = {
|
|
|
126
57
|
Empty: SearchListEmpty,
|
|
127
58
|
Item: SearchListItem
|
|
128
59
|
};
|
|
129
|
-
var Combobox = {
|
|
130
|
-
Root: ComboboxRoot,
|
|
131
|
-
Trigger: ComboboxTrigger,
|
|
132
|
-
useComboboxContext
|
|
133
|
-
};
|
|
134
|
-
|
|
135
|
-
// packages/ui/react-ui-searchlist/src/composites/PopoverCombobox.tsx
|
|
136
|
-
import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
|
|
137
|
-
import React2, { forwardRef as forwardRef2 } from "react";
|
|
138
|
-
import { Popover } from "@dxos/react-ui";
|
|
139
|
-
var PopoverComboboxRoot = ({ modal, children, open: propsOpen, onOpenChange: propsOnOpenChange, defaultOpen, ...props }) => {
|
|
140
|
-
const [open, onOpenChange] = useControllableState2({
|
|
141
|
-
prop: propsOpen,
|
|
142
|
-
onChange: propsOnOpenChange,
|
|
143
|
-
defaultProp: defaultOpen
|
|
144
|
-
});
|
|
145
|
-
return /* @__PURE__ */ React2.createElement(Combobox.Root, {
|
|
146
|
-
open,
|
|
147
|
-
onOpenChange,
|
|
148
|
-
...props
|
|
149
|
-
}, /* @__PURE__ */ React2.createElement(Popover.Root, {
|
|
150
|
-
open,
|
|
151
|
-
onOpenChange,
|
|
152
|
-
modal
|
|
153
|
-
}, children));
|
|
154
|
-
};
|
|
155
|
-
var POPOVER_COMBOBOX_CONTENT_NAME = "PopoverComboboxContent";
|
|
156
|
-
var PopoverComboboxContent = /* @__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
|
-
const { modalId } = Combobox.useComboboxContext(POPOVER_COMBOBOX_CONTENT_NAME);
|
|
158
|
-
return /* @__PURE__ */ React2.createElement(Popover.Content, {
|
|
159
|
-
side,
|
|
160
|
-
sideOffset,
|
|
161
|
-
align,
|
|
162
|
-
alignOffset,
|
|
163
|
-
avoidCollisions,
|
|
164
|
-
collisionBoundary,
|
|
165
|
-
collisionPadding,
|
|
166
|
-
arrowPadding,
|
|
167
|
-
sticky,
|
|
168
|
-
hideWhenDetached,
|
|
169
|
-
onOpenAutoFocus,
|
|
170
|
-
onCloseAutoFocus,
|
|
171
|
-
onEscapeKeyDown,
|
|
172
|
-
onPointerDownOutside,
|
|
173
|
-
onFocusOutside,
|
|
174
|
-
onInteractOutside,
|
|
175
|
-
forceMount,
|
|
176
|
-
classNames,
|
|
177
|
-
id: modalId,
|
|
178
|
-
ref: forwardedRef
|
|
179
|
-
}, /* @__PURE__ */ React2.createElement(SearchList.Root, {
|
|
180
|
-
...props,
|
|
181
|
-
classNames: "contents",
|
|
182
|
-
role: "none"
|
|
183
|
-
}, children));
|
|
184
|
-
});
|
|
185
|
-
PopoverComboboxContent.displayName = POPOVER_COMBOBOX_CONTENT_NAME;
|
|
186
|
-
var PopoverComboboxTrigger = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
|
|
187
|
-
return /* @__PURE__ */ React2.createElement(Popover.Trigger, {
|
|
188
|
-
asChild: true
|
|
189
|
-
}, /* @__PURE__ */ React2.createElement(Combobox.Trigger, {
|
|
190
|
-
...props,
|
|
191
|
-
ref: forwardedRef
|
|
192
|
-
}));
|
|
193
|
-
});
|
|
194
|
-
var PopoverComboboxInput = SearchList.Input;
|
|
195
|
-
var PopoverComboboxList = /* @__PURE__ */ forwardRef2(({ constrainInline, constrainBlock, ...props }, forwardedRef) => {
|
|
196
|
-
return /* @__PURE__ */ React2.createElement(Popover.Viewport, {
|
|
197
|
-
constrainInline,
|
|
198
|
-
constrainBlock
|
|
199
|
-
}, /* @__PURE__ */ React2.createElement(SearchList.Content, {
|
|
200
|
-
...props,
|
|
201
|
-
ref: forwardedRef
|
|
202
|
-
}));
|
|
203
|
-
});
|
|
204
|
-
var PopoverComboboxItem = SearchList.Item;
|
|
205
|
-
var PopoverComboboxArrow = Popover.Arrow;
|
|
206
|
-
var PopoverComboboxEmpty = SearchList.Empty;
|
|
207
|
-
var PopoverCombobox = {
|
|
208
|
-
Root: PopoverComboboxRoot,
|
|
209
|
-
Content: PopoverComboboxContent,
|
|
210
|
-
Trigger: PopoverComboboxTrigger,
|
|
211
|
-
Input: PopoverComboboxInput,
|
|
212
|
-
List: PopoverComboboxList,
|
|
213
|
-
Item: PopoverComboboxItem,
|
|
214
|
-
Arrow: PopoverComboboxArrow,
|
|
215
|
-
Empty: PopoverComboboxEmpty
|
|
216
|
-
};
|
|
217
60
|
|
|
218
61
|
// packages/ui/react-ui-searchlist/src/translations.ts
|
|
219
62
|
var translationKey = "searchlist";
|
|
@@ -225,8 +68,6 @@ var translations_default = [
|
|
|
225
68
|
}
|
|
226
69
|
];
|
|
227
70
|
export {
|
|
228
|
-
Combobox,
|
|
229
|
-
PopoverCombobox,
|
|
230
71
|
SearchList,
|
|
231
72
|
translations_default as translations
|
|
232
73
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/SearchList.tsx", "../../../src/
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\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 (\n { children, classNames, density: propsDensity, elevation: propsElevation, variant = 'subdued', ...props },\n forwardedRef,\n ) => {\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 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('p-1', 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(\n 'p-1 rounded select-none cursor-pointer data-[selected]:bg-neutral-450/10 data-[selected]:hover:bg-25/10',\n classNames,\n )}\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 { Popover, type PopoverArrowProps, type PopoverContentProps, type PopoverViewportProps } 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 {/* 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.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 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 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 PopoverComboboxInputProps,\n PopoverComboboxListProps,\n PopoverComboboxItemProps,\n PopoverComboboxArrowProps,\n PopoverComboboxEmptyProps,\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'searchlist';\n\nexport default [\n {\n 'en-US': {\n [translationKey]: {},\n },\n },\n];\n"],
|
|
5
|
-
"mappings": ";AAGA,SAASA,
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../src/components/SearchList.tsx", "../../../src/translations.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\nimport { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from 'cmdk';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport {\n type TextInputProps,\n type ThemedClassName,\n useDensityContext,\n useElevationContext,\n useThemeContext,\n} from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\ntype SearchListVariant = 'list' | 'menu' | 'listbox';\n\ntype SearchListRootProps = ThemedClassName<ComponentPropsWithRef<typeof CommandRoot>> & {\n variant?: SearchListVariant;\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\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 (\n { children, classNames, density: propsDensity, elevation: propsElevation, variant = 'subdued', ...props },\n forwardedRef,\n ) => {\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 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('p-1', 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, ...props }, forwardedRef) => {\n return (\n <CommandItem\n {...props}\n className={mx('p-1 rounded data-[selected]:bg-neutral-450/10 data-[selected]:hover:bg-25/10', classNames)}\n ref={forwardedRef}\n >\n {children}\n </CommandItem>\n );\n },\n);\n\nexport const SearchList = {\n Root: SearchListRoot,\n Input: SearchListInput,\n Content: SearchListContent,\n Empty: SearchListEmpty,\n Item: SearchListItem,\n};\n\nexport type {\n SearchListRootProps,\n SearchListInputProps,\n SearchListContentProps,\n SearchListEmptyProps,\n SearchListItemProps,\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'searchlist';\n\nexport default [\n {\n 'en-US': {\n [translationKey]: {},\n },\n },\n];\n"],
|
|
5
|
+
"mappings": ";AAGA,SAASA,cAAcC,cAAcC,aAAaC,aAAaC,mBAAmB;AAClF,OAAOC,SAAqCC,kBAAkB;AAE9D,SAGEC,mBACAC,qBACAC,uBACK;AACP,SAASC,UAAU;AAQnB,IAAMC,iBAAiBC,2BACrB,CAAC,EAAEC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;AACnC,SACE,sBAAA,cAACC,aAAAA;IAAa,GAAGF;IAAOG,WAAWC,GAAG,IAAIL,UAAAA;IAAaM,KAAKJ;KACzDH,QAAAA;AAGP,CAAA;AASF,IAAMQ,kBAAkBT,2BACtB,CACE,EAAEC,UAAUC,YAAYQ,SAASC,cAAcC,WAAWC,gBAAgBC,UAAU,WAAW,GAAGX,MAAAA,GAClGC,iBAAAA;AAGA,QAAM,EAAEW,eAAc,IAAKC,gBAAAA;AAC3B,QAAM,EAAEC,GAAE,IAAKD,gBAAAA;AACf,QAAMN,UAAUQ,kBAAkBP,YAAAA;AAClC,QAAMC,YAAYO,oBAAoBN,cAAAA;AAEtC,SACE,sBAAA,cAACO,cAAAA;IACE,GAAGjB;IACJG,WAAWW,GACT,eACA,SACA;MACEH;MACAO,UAAUlB,MAAMkB;MAChBX;MACAE;IACF,GACAV,UAAAA;IAED,GAAIC,MAAMmB,aAAa,CAACP,kBAAkB;MAAEO,WAAW;IAAK;IAC7Dd,KAAKJ;;AAGX,CAAA;AAKF,IAAMmB,oBAAoBvB,2BACxB,CAAC,EAAEC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;AACnC,SACE,sBAAA,cAACoB,aAAAA;IAAa,GAAGrB;IAAOG,WAAWC,GAAG,OAAOL,UAAAA;IAAaM,KAAKJ;KAC5DH,QAAAA;AAGP,CAAA;AAKF,IAAMwB,kBAAkBzB,2BACtB,CAAC,EAAEC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;AACnC,SACE,sBAAA,cAACsB,cAAAA;IAAc,GAAGvB;IAAOG,WAAWC,GAAG,IAAIL,UAAAA;IAAaM,KAAKJ;KAC1DH,QAAAA;AAGP,CAAA;AAKF,IAAM0B,iBAAiB3B,2BACrB,CAAC,EAAEC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;AACnC,SACE,sBAAA,cAACwB,aAAAA;IACE,GAAGzB;IACJG,WAAWC,GAAG,gFAAgFL,UAAAA;IAC9FM,KAAKJ;KAEJH,QAAAA;AAGP,CAAA;AAGK,IAAM4B,aAAa;EACxBC,MAAM/B;EACNgC,OAAOtB;EACPuB,SAAST;EACTU,OAAOR;EACPS,MAAMP;AACR;;;AC/GO,IAAMQ,iBAAiB;AAE9B,IAAA,uBAAe;EACb;IACE,SAAS;MACP,CAACA,cAAAA,GAAiB,CAAC;IACrB;EACF;;",
|
|
6
|
+
"names": ["CommandEmpty", "CommandInput", "CommandItem", "CommandList", "CommandRoot", "React", "forwardRef", "useDensityContext", "useElevationContext", "useThemeContext", "mx", "SearchListRoot", "forwardRef", "children", "classNames", "props", "forwardedRef", "CommandRoot", "className", "mx", "ref", "SearchListInput", "density", "propsDensity", "elevation", "propsElevation", "variant", "hasIosKeyboard", "useThemeContext", "tx", "useDensityContext", "useElevationContext", "CommandInput", "disabled", "autoFocus", "SearchListContent", "CommandList", "SearchListEmpty", "CommandEmpty", "SearchListItem", "CommandItem", "SearchList", "Root", "Input", "Content", "Empty", "Item", "translationKey"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-searchlist/src/components/SearchList.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-searchlist/src/components/SearchList.tsx":{"bytes":10289,"imports":[{"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"},"packages/ui/react-ui-searchlist/src/components/index.ts":{"bytes":483,"imports":[{"path":"packages/ui/react-ui-searchlist/src/components/SearchList.tsx","kind":"import-statement","original":"./SearchList"}],"format":"esm"},"packages/ui/react-ui-searchlist/src/translations.ts":{"bytes":867,"imports":[],"format":"esm"},"packages/ui/react-ui-searchlist/src/index.ts":{"bytes":686,"imports":[{"path":"packages/ui/react-ui-searchlist/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-searchlist/src/translations.ts","kind":"import-statement","original":"./translations"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-searchlist/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":6246},"packages/ui/react-ui-searchlist/dist/lib/browser/index.mjs":{"imports":[{"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}],"exports":["SearchList","translations"],"entryPoint":"packages/ui/react-ui-searchlist/src/index.ts","inputs":{"packages/ui/react-ui-searchlist/src/components/SearchList.tsx":{"bytesInOutput":2214},"packages/ui/react-ui-searchlist/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-searchlist/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-searchlist/src/translations.ts":{"bytesInOutput":123}},"bytes":2558}}}
|
|
@@ -1,30 +1,15 @@
|
|
|
1
1
|
import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from 'cmdk';
|
|
2
|
-
import React, { type ComponentPropsWithRef
|
|
3
|
-
import { type
|
|
2
|
+
import React, { type ComponentPropsWithRef } from 'react';
|
|
3
|
+
import { type TextInputProps, type ThemedClassName } from '@dxos/react-ui';
|
|
4
4
|
type SearchListVariant = 'list' | 'menu' | 'listbox';
|
|
5
5
|
type SearchListRootProps = ThemedClassName<ComponentPropsWithRef<typeof CommandRoot>> & {
|
|
6
6
|
variant?: SearchListVariant;
|
|
7
7
|
};
|
|
8
|
-
type ComboboxContextValue = {
|
|
9
|
-
isCombobox: true;
|
|
10
|
-
modalId: string;
|
|
11
|
-
open: boolean;
|
|
12
|
-
onOpenChange: (nextOpen: boolean) => void;
|
|
13
|
-
value: string;
|
|
14
|
-
onValueChange: (nextValue: string) => void;
|
|
15
|
-
placeholder?: string;
|
|
16
|
-
};
|
|
17
|
-
type ComboboxRootProps = PropsWithChildren<Partial<ComboboxContextValue & {
|
|
18
|
-
defaultOpen: boolean;
|
|
19
|
-
defaultValue: string;
|
|
20
|
-
placeholder: string;
|
|
21
|
-
}>>;
|
|
22
8
|
type CommandInputPrimitiveProps = ComponentPropsWithRef<typeof CommandInput>;
|
|
23
9
|
type SearchListInputProps = Omit<TextInputProps, 'value' | 'defaultValue' | 'onChange'> & Pick<CommandInputPrimitiveProps, 'value' | 'onValueChange' | 'defaultValue'>;
|
|
24
10
|
type SearchListContentProps = ThemedClassName<ComponentPropsWithRef<typeof CommandList>>;
|
|
25
11
|
type SearchListEmptyProps = ThemedClassName<ComponentPropsWithRef<typeof CommandEmpty>>;
|
|
26
12
|
type SearchListItemProps = ThemedClassName<ComponentPropsWithRef<typeof CommandItem>>;
|
|
27
|
-
type ComboboxTriggerProps = ButtonProps;
|
|
28
13
|
export declare const SearchList: {
|
|
29
14
|
Root: React.ForwardRefExoticComponent<Pick<SearchListRootProps, "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "shouldFilter" | "filter" | "value" | "onValueChange" | "loop" | "key" | "classNames" | "variant"> & React.RefAttributes<HTMLDivElement>>;
|
|
30
15
|
Input: React.ForwardRefExoticComponent<Pick<SearchListInputProps, "list" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | "onValueChange" | "key" | "form" | "pattern" | "classNames" | "variant" | "type" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "step" | "width" | "asChild" | "density" | "elevation"> & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -32,13 +17,5 @@ export declare const SearchList: {
|
|
|
32
17
|
Empty: React.ForwardRefExoticComponent<Pick<SearchListEmptyProps, "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "classNames"> & React.RefAttributes<HTMLDivElement>>;
|
|
33
18
|
Item: React.ForwardRefExoticComponent<Pick<SearchListItemProps, "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | "key" | "classNames" | "disabled"> & React.RefAttributes<HTMLDivElement>>;
|
|
34
19
|
};
|
|
35
|
-
export
|
|
36
|
-
Root: {
|
|
37
|
-
({ modalId: propsModalId, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, value: propsValue, defaultValue, onValueChange: propsOnValueChange, placeholder, children, }: ComboboxRootProps): JSX.Element;
|
|
38
|
-
displayName: string;
|
|
39
|
-
};
|
|
40
|
-
Trigger: React.ForwardRefExoticComponent<Pick<ButtonProps, "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | "key" | "form" | "classNames" | "variant" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "asChild" | "density" | "elevation"> & React.RefAttributes<HTMLButtonElement>>;
|
|
41
|
-
useComboboxContext: (consumerName: string) => Partial<ComboboxContextValue>;
|
|
42
|
-
};
|
|
43
|
-
export type { SearchListRootProps, SearchListInputProps, SearchListContentProps, SearchListEmptyProps, SearchListItemProps, ComboboxRootProps, ComboboxTriggerProps, };
|
|
20
|
+
export type { SearchListRootProps, SearchListInputProps, SearchListContentProps, SearchListEmptyProps, SearchListItemProps, };
|
|
44
21
|
//# sourceMappingURL=SearchList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchList.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchList.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchList.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AACzF,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAEtE,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,eAAe,EAIrB,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;AAYF,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,eAAe,GAAG,cAAc,CAAC,CAAC;AAkC/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;AAgBtF,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,GACpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchList.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchList.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAGpB,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;;;AAyBzC,wBAEE;
|
|
1
|
+
{"version":3,"file":"SearchList.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchList.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAGpB,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;;;AAyBzC,wBAEE;AAIF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-searchlist",
|
|
3
|
-
"version": "0.3.7
|
|
3
|
+
"version": "0.3.7",
|
|
4
4
|
"description": "A themed ⌘K-style combobox component, triggered by a button (or keyboard shortcut), where values are queried only within the invoked modal.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -16,11 +16,9 @@
|
|
|
16
16
|
"src"
|
|
17
17
|
],
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@radix-ui/react-context": "^1.0.0",
|
|
20
|
-
"@radix-ui/react-use-controllable-state": "^1.0.0",
|
|
21
19
|
"cmdk": "^0.2.0",
|
|
22
|
-
"@dxos/react-ui": "0.3.7
|
|
23
|
-
"@dxos/react-ui-theme": "0.3.7
|
|
20
|
+
"@dxos/react-ui": "0.3.7",
|
|
21
|
+
"@dxos/react-ui-theme": "0.3.7"
|
|
24
22
|
},
|
|
25
23
|
"devDependencies": {
|
|
26
24
|
"@faker-js/faker": "^8.0.2",
|
|
@@ -21,8 +21,8 @@ const defaultItems: StoryItems = faker.helpers
|
|
|
21
21
|
|
|
22
22
|
const SearchListStory: FC<{ items: StoryItems }> = ({ items = defaultItems }) => {
|
|
23
23
|
return (
|
|
24
|
-
<SearchList.Root filter={(value, search) => (items[value].includes(search) ? 1 : 0)}>
|
|
25
|
-
<SearchList.Input placeholder='
|
|
24
|
+
<SearchList.Root filter={(value, search) => (items[value].toLowerCase().includes(search.toLowerCase()) ? 1 : 0)}>
|
|
25
|
+
<SearchList.Input placeholder='Select...' />
|
|
26
26
|
<SearchList.Content>
|
|
27
27
|
{Object.entries(items).map(([value, label]) => (
|
|
28
28
|
<SearchList.Item key={value} value={value} onSelect={(value) => console.log('[item select]', value)}>
|
|
@@ -38,6 +38,8 @@ export default {
|
|
|
38
38
|
component: SearchListStory,
|
|
39
39
|
};
|
|
40
40
|
|
|
41
|
+
// TODO(burdon): Test controlled and uncontrolled.
|
|
42
|
+
|
|
41
43
|
export const Default = {
|
|
42
44
|
args: {},
|
|
43
45
|
};
|
|
@@ -1,23 +1,17 @@
|
|
|
1
1
|
//
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
|
-
import { CaretDown } from '@phosphor-icons/react';
|
|
5
|
-
import { createContext } from '@radix-ui/react-context';
|
|
6
|
-
import { useControllableState } from '@radix-ui/react-use-controllable-state';
|
|
7
4
|
import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from 'cmdk';
|
|
8
|
-
import React, { type ComponentPropsWithRef, forwardRef
|
|
5
|
+
import React, { type ComponentPropsWithRef, forwardRef } from 'react';
|
|
9
6
|
|
|
10
7
|
import {
|
|
11
|
-
Button,
|
|
12
|
-
type ButtonProps,
|
|
13
8
|
type TextInputProps,
|
|
14
9
|
type ThemedClassName,
|
|
15
10
|
useDensityContext,
|
|
16
11
|
useElevationContext,
|
|
17
|
-
useId,
|
|
18
12
|
useThemeContext,
|
|
19
13
|
} from '@dxos/react-ui';
|
|
20
|
-
import {
|
|
14
|
+
import { mx } from '@dxos/react-ui-theme';
|
|
21
15
|
|
|
22
16
|
type SearchListVariant = 'list' | 'menu' | 'listbox';
|
|
23
17
|
|
|
@@ -25,27 +19,6 @@ type SearchListRootProps = ThemedClassName<ComponentPropsWithRef<typeof CommandR
|
|
|
25
19
|
variant?: SearchListVariant;
|
|
26
20
|
};
|
|
27
21
|
|
|
28
|
-
type ComboboxContextValue = {
|
|
29
|
-
isCombobox: true;
|
|
30
|
-
modalId: string;
|
|
31
|
-
open: boolean;
|
|
32
|
-
onOpenChange: (nextOpen: boolean) => void;
|
|
33
|
-
value: string;
|
|
34
|
-
onValueChange: (nextValue: string) => void;
|
|
35
|
-
placeholder?: string;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
const COMBOBOX_NAME = 'Combobox';
|
|
39
|
-
const COMBOBOX_TRIGGER_NAME = 'ComboboxTrigger';
|
|
40
|
-
const SEARCHLIST_NAME = 'SearchList';
|
|
41
|
-
const SEARCHLIST_ITEM_NAME = 'SearchListItem';
|
|
42
|
-
|
|
43
|
-
const [ComboboxProvider, useComboboxContext] = createContext<Partial<ComboboxContextValue>>(COMBOBOX_NAME, {});
|
|
44
|
-
|
|
45
|
-
type ComboboxRootProps = PropsWithChildren<
|
|
46
|
-
Partial<ComboboxContextValue & { defaultOpen: boolean; defaultValue: string; placeholder: string }>
|
|
47
|
-
>;
|
|
48
|
-
|
|
49
22
|
const SearchListRoot = forwardRef<HTMLDivElement, SearchListRootProps>(
|
|
50
23
|
({ children, classNames, ...props }, forwardedRef) => {
|
|
51
24
|
return (
|
|
@@ -56,8 +29,6 @@ const SearchListRoot = forwardRef<HTMLDivElement, SearchListRootProps>(
|
|
|
56
29
|
},
|
|
57
30
|
);
|
|
58
31
|
|
|
59
|
-
SearchListRoot.displayName = SEARCHLIST_NAME;
|
|
60
|
-
|
|
61
32
|
type CommandInputPrimitiveProps = ComponentPropsWithRef<typeof CommandInput>;
|
|
62
33
|
|
|
63
34
|
// TODO: Harmonize with other inputs’ `onChange` prop.
|
|
@@ -123,24 +94,11 @@ const SearchListEmpty = forwardRef<HTMLDivElement, SearchListEmptyProps>(
|
|
|
123
94
|
type SearchListItemProps = ThemedClassName<ComponentPropsWithRef<typeof CommandItem>>;
|
|
124
95
|
|
|
125
96
|
const SearchListItem = forwardRef<HTMLDivElement, SearchListItemProps>(
|
|
126
|
-
({ children, classNames,
|
|
127
|
-
const { onValueChange, onOpenChange } = useComboboxContext(SEARCHLIST_ITEM_NAME);
|
|
128
|
-
const handleSelect = useCallback(
|
|
129
|
-
(nextValue: string) => {
|
|
130
|
-
onValueChange?.(nextValue);
|
|
131
|
-
onOpenChange?.(false);
|
|
132
|
-
onSelect?.(nextValue);
|
|
133
|
-
},
|
|
134
|
-
[onValueChange, onOpenChange, onSelect],
|
|
135
|
-
);
|
|
97
|
+
({ children, classNames, ...props }, forwardedRef) => {
|
|
136
98
|
return (
|
|
137
99
|
<CommandItem
|
|
138
100
|
{...props}
|
|
139
|
-
|
|
140
|
-
className={mx(
|
|
141
|
-
'p-1 rounded select-none cursor-pointer data-[selected]:bg-neutral-450/10 data-[selected]:hover:bg-25/10',
|
|
142
|
-
classNames,
|
|
143
|
-
)}
|
|
101
|
+
className={mx('p-1 rounded data-[selected]:bg-neutral-450/10 data-[selected]:hover:bg-25/10', classNames)}
|
|
144
102
|
ref={forwardedRef}
|
|
145
103
|
>
|
|
146
104
|
{children}
|
|
@@ -149,86 +107,6 @@ const SearchListItem = forwardRef<HTMLDivElement, SearchListItemProps>(
|
|
|
149
107
|
},
|
|
150
108
|
);
|
|
151
109
|
|
|
152
|
-
SearchListItem.displayName = SEARCHLIST_ITEM_NAME;
|
|
153
|
-
|
|
154
|
-
const ComboboxRoot = ({
|
|
155
|
-
modalId: propsModalId,
|
|
156
|
-
open: propsOpen,
|
|
157
|
-
defaultOpen,
|
|
158
|
-
onOpenChange: propsOnOpenChange,
|
|
159
|
-
value: propsValue,
|
|
160
|
-
defaultValue,
|
|
161
|
-
onValueChange: propsOnValueChange,
|
|
162
|
-
placeholder,
|
|
163
|
-
children,
|
|
164
|
-
}: ComboboxRootProps) => {
|
|
165
|
-
const modalId = useId(COMBOBOX_NAME, propsModalId);
|
|
166
|
-
const [open = false, onOpenChange] = useControllableState({
|
|
167
|
-
prop: propsOpen,
|
|
168
|
-
onChange: propsOnOpenChange,
|
|
169
|
-
defaultProp: defaultOpen,
|
|
170
|
-
});
|
|
171
|
-
const [value = '', onValueChange] = useControllableState({
|
|
172
|
-
prop: propsValue,
|
|
173
|
-
onChange: propsOnValueChange,
|
|
174
|
-
defaultProp: defaultValue,
|
|
175
|
-
});
|
|
176
|
-
return (
|
|
177
|
-
<ComboboxProvider
|
|
178
|
-
isCombobox
|
|
179
|
-
modalId={modalId}
|
|
180
|
-
open={open}
|
|
181
|
-
onOpenChange={onOpenChange}
|
|
182
|
-
value={value}
|
|
183
|
-
onValueChange={onValueChange}
|
|
184
|
-
placeholder={placeholder}
|
|
185
|
-
>
|
|
186
|
-
{children}
|
|
187
|
-
</ComboboxProvider>
|
|
188
|
-
);
|
|
189
|
-
};
|
|
190
|
-
|
|
191
|
-
ComboboxRoot.displayName = COMBOBOX_NAME;
|
|
192
|
-
|
|
193
|
-
type ComboboxTriggerProps = ButtonProps;
|
|
194
|
-
|
|
195
|
-
const ComboboxTrigger = forwardRef<HTMLButtonElement, ComboboxTriggerProps>(
|
|
196
|
-
({ children, onClick, ...props }, forwardedRef) => {
|
|
197
|
-
const { modalId, open, onOpenChange, placeholder, value } = useComboboxContext(COMBOBOX_TRIGGER_NAME);
|
|
198
|
-
const handleClick = useCallback(
|
|
199
|
-
(event: Parameters<Exclude<ButtonProps['onClick'], undefined>>[0]) => {
|
|
200
|
-
onClick?.(event);
|
|
201
|
-
onOpenChange?.(true);
|
|
202
|
-
},
|
|
203
|
-
[onClick, onOpenChange],
|
|
204
|
-
);
|
|
205
|
-
return (
|
|
206
|
-
<Button
|
|
207
|
-
{...props}
|
|
208
|
-
role='combobox'
|
|
209
|
-
aria-expanded={open}
|
|
210
|
-
aria-controls={modalId}
|
|
211
|
-
aria-haspopup='dialog'
|
|
212
|
-
onClick={handleClick}
|
|
213
|
-
ref={forwardedRef}
|
|
214
|
-
>
|
|
215
|
-
{children ?? (
|
|
216
|
-
<>
|
|
217
|
-
<span
|
|
218
|
-
className={mx('font-normal text-start flex-1 min-is-0 truncate mie-2', !value && staticPlaceholderText)}
|
|
219
|
-
>
|
|
220
|
-
{value || placeholder}
|
|
221
|
-
</span>
|
|
222
|
-
<CaretDown weight='bold' className={getSize(3)} />
|
|
223
|
-
</>
|
|
224
|
-
)}
|
|
225
|
-
</Button>
|
|
226
|
-
);
|
|
227
|
-
},
|
|
228
|
-
);
|
|
229
|
-
|
|
230
|
-
ComboboxTrigger.displayName = COMBOBOX_TRIGGER_NAME;
|
|
231
|
-
|
|
232
110
|
export const SearchList = {
|
|
233
111
|
Root: SearchListRoot,
|
|
234
112
|
Input: SearchListInput,
|
|
@@ -237,18 +115,10 @@ export const SearchList = {
|
|
|
237
115
|
Item: SearchListItem,
|
|
238
116
|
};
|
|
239
117
|
|
|
240
|
-
export const Combobox = {
|
|
241
|
-
Root: ComboboxRoot,
|
|
242
|
-
Trigger: ComboboxTrigger,
|
|
243
|
-
useComboboxContext,
|
|
244
|
-
};
|
|
245
|
-
|
|
246
118
|
export type {
|
|
247
119
|
SearchListRootProps,
|
|
248
120
|
SearchListInputProps,
|
|
249
121
|
SearchListContentProps,
|
|
250
122
|
SearchListEmptyProps,
|
|
251
123
|
SearchListItemProps,
|
|
252
|
-
ComboboxRootProps,
|
|
253
|
-
ComboboxTriggerProps,
|
|
254
124
|
};
|
package/src/index.ts
CHANGED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type PopoverArrowProps, type PopoverContentProps, type PopoverViewportProps } from '@dxos/react-ui';
|
|
3
|
-
import { type ComboboxRootProps, type ComboboxTriggerProps, type SearchListContentProps, type SearchListEmptyProps, type SearchListInputProps, type SearchListItemProps, type SearchListRootProps } from '../components';
|
|
4
|
-
type PopoverComboboxRootProps = ComboboxRootProps & {
|
|
5
|
-
modal?: boolean;
|
|
6
|
-
};
|
|
7
|
-
type PopoverComboboxContentProps = SearchListRootProps & PopoverContentProps;
|
|
8
|
-
type PopoverComboboxTriggerProps = ComboboxTriggerProps;
|
|
9
|
-
type PopoverComboboxInputProps = SearchListInputProps;
|
|
10
|
-
type PopoverComboboxListProps = SearchListContentProps & Pick<PopoverViewportProps, 'constrainBlock' | 'constrainInline'>;
|
|
11
|
-
type PopoverComboboxItemProps = SearchListItemProps;
|
|
12
|
-
type PopoverComboboxArrowProps = PopoverArrowProps;
|
|
13
|
-
type PopoverComboboxEmptyProps = SearchListEmptyProps;
|
|
14
|
-
export declare const PopoverCombobox: {
|
|
15
|
-
Root: ({ modal, children, open: propsOpen, onOpenChange: propsOnOpenChange, defaultOpen, ...props }: PopoverComboboxRootProps) => JSX.Element;
|
|
16
|
-
Content: React.ForwardRefExoticComponent<Pick<PopoverComboboxContentProps, "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "shouldFilter" | "filter" | "value" | "onValueChange" | "loop" | "key" | "classNames" | "variant" | "asChild" | "side" | "sideOffset" | "align" | "alignOffset" | "arrowPadding" | "collisionBoundary" | "collisionPadding" | "sticky" | "hideWhenDetached" | "avoidCollisions" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onOpenAutoFocus" | "onCloseAutoFocus" | "forceMount"> & React.RefAttributes<HTMLDivElement>>;
|
|
17
|
-
Trigger: React.ForwardRefExoticComponent<Pick<import("@dxos/react-ui/dist/types/src/components/Buttons/Button").ButtonProps, "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | "key" | "form" | "classNames" | "variant" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "asChild" | "density" | "elevation"> & React.RefAttributes<HTMLButtonElement>>;
|
|
18
|
-
Input: React.ForwardRefExoticComponent<Pick<SearchListInputProps, "list" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | "onValueChange" | "key" | "form" | "pattern" | "classNames" | "variant" | "type" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "step" | "width" | "asChild" | "density" | "elevation"> & React.RefAttributes<HTMLInputElement>>;
|
|
19
|
-
List: React.ForwardRefExoticComponent<Pick<PopoverComboboxListProps, "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "classNames" | "constrainBlock" | "constrainInline"> & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
-
Item: React.ForwardRefExoticComponent<Pick<SearchListItemProps, "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | "key" | "classNames" | "disabled"> & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
-
Arrow: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-popover").PopoverArrowProps, "className"> & {
|
|
22
|
-
classNames?: import("@dxos/react-ui").ClassNameValue;
|
|
23
|
-
} & React.RefAttributes<SVGSVGElement>>;
|
|
24
|
-
Empty: React.ForwardRefExoticComponent<Pick<SearchListEmptyProps, "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "classNames"> & React.RefAttributes<HTMLDivElement>>;
|
|
25
|
-
};
|
|
26
|
-
export type { PopoverComboboxRootProps, PopoverComboboxContentProps, PopoverComboboxTriggerProps, PopoverComboboxInputProps, PopoverComboboxListProps, PopoverComboboxItemProps, PopoverComboboxArrowProps, PopoverComboboxEmptyProps, };
|
|
27
|
-
//# sourceMappingURL=PopoverCombobox.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverCombobox.d.ts","sourceRoot":"","sources":["../../../../src/composites/PopoverCombobox.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAW,KAAK,iBAAiB,EAAE,KAAK,mBAAmB,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtH,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAEzB,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,eAAe,CAAC;AAEvB,KAAK,wBAAwB,GAAG,iBAAiB,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAwBxE,KAAK,2BAA2B,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AAmE7E,KAAK,2BAA2B,GAAG,oBAAoB,CAAC;AAUxD,KAAK,yBAAyB,GAAG,oBAAoB,CAAC;AAItD,KAAK,wBAAwB,GAAG,sBAAsB,GACpD,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,iBAAiB,CAAC,CAAC;AAYnE,KAAK,wBAAwB,GAAG,mBAAmB,CAAC;AAIpD,KAAK,yBAAyB,GAAG,iBAAiB,CAAC;AAInD,KAAK,yBAAyB,GAAG,oBAAoB,CAAC;AAItD,eAAO,MAAM,eAAe;yGAzHzB,wBAAwB;;;;;;;;;;CAkI1B,CAAC;AAEF,YAAY,EACV,wBAAwB,EACxB,2BAA2B,EAC3B,2BAA2B,EAC3B,yBAAyB,EACzB,wBAAwB,EACxB,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,GAC1B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverCombobox.stories.d.ts","sourceRoot":"","sources":["../../../../src/composites/PopoverCombobox.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;;;;AA2BpB,wBAEE;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/composites/index.ts"],"names":[],"mappings":"AAIA,cAAc,mBAAmB,CAAC"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2023 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import '@dxosTheme';
|
|
6
|
-
import { faker } from '@faker-js/faker';
|
|
7
|
-
import React from 'react';
|
|
8
|
-
|
|
9
|
-
import { PopoverCombobox } from './PopoverCombobox';
|
|
10
|
-
|
|
11
|
-
faker.seed(1234);
|
|
12
|
-
|
|
13
|
-
const storybookItems = faker.helpers.uniqueArray(faker.commerce.product, 16);
|
|
14
|
-
|
|
15
|
-
const ComboboxStory = () => {
|
|
16
|
-
return (
|
|
17
|
-
<PopoverCombobox.Root placeholder='Nothing selected'>
|
|
18
|
-
<PopoverCombobox.Trigger />
|
|
19
|
-
<PopoverCombobox.Content filter={(value, search) => (value.includes(search) ? 1 : 0)}>
|
|
20
|
-
<PopoverCombobox.Input placeholder='Search...' />
|
|
21
|
-
<PopoverCombobox.List>
|
|
22
|
-
{storybookItems.map((value) => (
|
|
23
|
-
<PopoverCombobox.Item key={value}>{value}</PopoverCombobox.Item>
|
|
24
|
-
))}
|
|
25
|
-
</PopoverCombobox.List>
|
|
26
|
-
<PopoverCombobox.Arrow />
|
|
27
|
-
</PopoverCombobox.Content>
|
|
28
|
-
</PopoverCombobox.Root>
|
|
29
|
-
);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
export default {
|
|
33
|
-
component: ComboboxStory,
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
export const Default = {
|
|
37
|
-
args: {},
|
|
38
|
-
};
|
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2023 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { useControllableState } from '@radix-ui/react-use-controllable-state';
|
|
6
|
-
import React, { forwardRef } from 'react';
|
|
7
|
-
|
|
8
|
-
import { Popover, type PopoverArrowProps, type PopoverContentProps, type PopoverViewportProps } from '@dxos/react-ui';
|
|
9
|
-
|
|
10
|
-
import {
|
|
11
|
-
Combobox,
|
|
12
|
-
type ComboboxRootProps,
|
|
13
|
-
type ComboboxTriggerProps,
|
|
14
|
-
SearchList,
|
|
15
|
-
type SearchListContentProps,
|
|
16
|
-
type SearchListEmptyProps,
|
|
17
|
-
type SearchListInputProps,
|
|
18
|
-
type SearchListItemProps,
|
|
19
|
-
type SearchListRootProps,
|
|
20
|
-
} from '../components';
|
|
21
|
-
|
|
22
|
-
type PopoverComboboxRootProps = ComboboxRootProps & { modal?: boolean };
|
|
23
|
-
|
|
24
|
-
const PopoverComboboxRoot = ({
|
|
25
|
-
modal,
|
|
26
|
-
children,
|
|
27
|
-
open: propsOpen,
|
|
28
|
-
onOpenChange: propsOnOpenChange,
|
|
29
|
-
defaultOpen,
|
|
30
|
-
...props
|
|
31
|
-
}: PopoverComboboxRootProps) => {
|
|
32
|
-
const [open, onOpenChange] = useControllableState({
|
|
33
|
-
prop: propsOpen,
|
|
34
|
-
onChange: propsOnOpenChange,
|
|
35
|
-
defaultProp: defaultOpen,
|
|
36
|
-
});
|
|
37
|
-
return (
|
|
38
|
-
<Combobox.Root open={open} onOpenChange={onOpenChange} {...props}>
|
|
39
|
-
<Popover.Root open={open} onOpenChange={onOpenChange} modal={modal}>
|
|
40
|
-
{children}
|
|
41
|
-
</Popover.Root>
|
|
42
|
-
</Combobox.Root>
|
|
43
|
-
);
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
type PopoverComboboxContentProps = SearchListRootProps & PopoverContentProps;
|
|
47
|
-
|
|
48
|
-
const POPOVER_COMBOBOX_CONTENT_NAME = 'PopoverComboboxContent';
|
|
49
|
-
|
|
50
|
-
const PopoverComboboxContent = forwardRef<HTMLDivElement, PopoverComboboxContentProps>(
|
|
51
|
-
(
|
|
52
|
-
{
|
|
53
|
-
side = 'bottom',
|
|
54
|
-
collisionPadding = 48,
|
|
55
|
-
sideOffset,
|
|
56
|
-
align,
|
|
57
|
-
alignOffset,
|
|
58
|
-
avoidCollisions,
|
|
59
|
-
collisionBoundary,
|
|
60
|
-
arrowPadding,
|
|
61
|
-
sticky,
|
|
62
|
-
hideWhenDetached,
|
|
63
|
-
onOpenAutoFocus,
|
|
64
|
-
onCloseAutoFocus,
|
|
65
|
-
onEscapeKeyDown,
|
|
66
|
-
onPointerDownOutside,
|
|
67
|
-
onFocusOutside,
|
|
68
|
-
onInteractOutside,
|
|
69
|
-
forceMount,
|
|
70
|
-
children,
|
|
71
|
-
classNames,
|
|
72
|
-
...props
|
|
73
|
-
},
|
|
74
|
-
forwardedRef,
|
|
75
|
-
) => {
|
|
76
|
-
const { modalId } = Combobox.useComboboxContext(POPOVER_COMBOBOX_CONTENT_NAME);
|
|
77
|
-
return (
|
|
78
|
-
<Popover.Content
|
|
79
|
-
{...{
|
|
80
|
-
side,
|
|
81
|
-
sideOffset,
|
|
82
|
-
align,
|
|
83
|
-
alignOffset,
|
|
84
|
-
avoidCollisions,
|
|
85
|
-
collisionBoundary,
|
|
86
|
-
collisionPadding,
|
|
87
|
-
arrowPadding,
|
|
88
|
-
sticky,
|
|
89
|
-
hideWhenDetached,
|
|
90
|
-
onOpenAutoFocus,
|
|
91
|
-
onCloseAutoFocus,
|
|
92
|
-
onEscapeKeyDown,
|
|
93
|
-
onPointerDownOutside,
|
|
94
|
-
onFocusOutside,
|
|
95
|
-
onInteractOutside,
|
|
96
|
-
forceMount,
|
|
97
|
-
classNames,
|
|
98
|
-
}}
|
|
99
|
-
id={modalId}
|
|
100
|
-
ref={forwardedRef}
|
|
101
|
-
>
|
|
102
|
-
{/* TODO(thure): This skips over `Command`’s root component, which renders a DOM node probably unnecessarily without supporting `asChild`. */}
|
|
103
|
-
<SearchList.Root {...props} classNames='contents' role='none'>
|
|
104
|
-
{children}
|
|
105
|
-
</SearchList.Root>
|
|
106
|
-
</Popover.Content>
|
|
107
|
-
);
|
|
108
|
-
},
|
|
109
|
-
);
|
|
110
|
-
|
|
111
|
-
PopoverComboboxContent.displayName = POPOVER_COMBOBOX_CONTENT_NAME;
|
|
112
|
-
|
|
113
|
-
type PopoverComboboxTriggerProps = ComboboxTriggerProps;
|
|
114
|
-
|
|
115
|
-
const PopoverComboboxTrigger = forwardRef<HTMLButtonElement, PopoverComboboxTriggerProps>((props, forwardedRef) => {
|
|
116
|
-
return (
|
|
117
|
-
<Popover.Trigger asChild>
|
|
118
|
-
<Combobox.Trigger {...props} ref={forwardedRef} />
|
|
119
|
-
</Popover.Trigger>
|
|
120
|
-
);
|
|
121
|
-
});
|
|
122
|
-
|
|
123
|
-
type PopoverComboboxInputProps = SearchListInputProps;
|
|
124
|
-
|
|
125
|
-
const PopoverComboboxInput = SearchList.Input;
|
|
126
|
-
|
|
127
|
-
type PopoverComboboxListProps = SearchListContentProps &
|
|
128
|
-
Pick<PopoverViewportProps, 'constrainBlock' | 'constrainInline'>;
|
|
129
|
-
|
|
130
|
-
const PopoverComboboxList = forwardRef<HTMLDivElement, PopoverComboboxListProps>(
|
|
131
|
-
({ constrainInline, constrainBlock, ...props }, forwardedRef) => {
|
|
132
|
-
return (
|
|
133
|
-
<Popover.Viewport {...{ constrainInline, constrainBlock }}>
|
|
134
|
-
<SearchList.Content {...props} ref={forwardedRef} />
|
|
135
|
-
</Popover.Viewport>
|
|
136
|
-
);
|
|
137
|
-
},
|
|
138
|
-
);
|
|
139
|
-
|
|
140
|
-
type PopoverComboboxItemProps = SearchListItemProps;
|
|
141
|
-
|
|
142
|
-
const PopoverComboboxItem = SearchList.Item;
|
|
143
|
-
|
|
144
|
-
type PopoverComboboxArrowProps = PopoverArrowProps;
|
|
145
|
-
|
|
146
|
-
const PopoverComboboxArrow = Popover.Arrow;
|
|
147
|
-
|
|
148
|
-
type PopoverComboboxEmptyProps = SearchListEmptyProps;
|
|
149
|
-
|
|
150
|
-
const PopoverComboboxEmpty = SearchList.Empty;
|
|
151
|
-
|
|
152
|
-
export const PopoverCombobox = {
|
|
153
|
-
Root: PopoverComboboxRoot,
|
|
154
|
-
Content: PopoverComboboxContent,
|
|
155
|
-
Trigger: PopoverComboboxTrigger,
|
|
156
|
-
Input: PopoverComboboxInput,
|
|
157
|
-
List: PopoverComboboxList,
|
|
158
|
-
Item: PopoverComboboxItem,
|
|
159
|
-
Arrow: PopoverComboboxArrow,
|
|
160
|
-
Empty: PopoverComboboxEmpty,
|
|
161
|
-
};
|
|
162
|
-
|
|
163
|
-
export type {
|
|
164
|
-
PopoverComboboxRootProps,
|
|
165
|
-
PopoverComboboxContentProps,
|
|
166
|
-
PopoverComboboxTriggerProps,
|
|
167
|
-
PopoverComboboxInputProps,
|
|
168
|
-
PopoverComboboxListProps,
|
|
169
|
-
PopoverComboboxItemProps,
|
|
170
|
-
PopoverComboboxArrowProps,
|
|
171
|
-
PopoverComboboxEmptyProps,
|
|
172
|
-
};
|