@dxos/react-ui-searchlist 0.3.7 → 0.3.8-main.0ae9c21

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.
@@ -1,8 +1,16 @@
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";
2
5
  import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from "cmdk";
3
- import React, { forwardRef } from "react";
4
- import { useDensityContext, useElevationContext, useThemeContext } from "@dxos/react-ui";
5
- import { mx } from "@dxos/react-ui-theme";
6
+ import React, { forwardRef, useCallback } from "react";
7
+ import { Button, useDensityContext, useElevationContext, useId, useThemeContext } from "@dxos/react-ui";
8
+ import { getSize, mx, staticPlaceholderText } from "@dxos/react-ui-theme";
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, {});
6
14
  var SearchListRoot = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
7
15
  return /* @__PURE__ */ React.createElement(CommandRoot, {
8
16
  ...props,
@@ -10,6 +18,7 @@ var SearchListRoot = /* @__PURE__ */ forwardRef(({ children, classNames, ...prop
10
18
  ref: forwardedRef
11
19
  }, children);
12
20
  });
21
+ SearchListRoot.displayName = SEARCHLIST_NAME;
13
22
  var SearchListInput = /* @__PURE__ */ forwardRef(({ children, classNames, density: propsDensity, elevation: propsElevation, variant = "subdued", ...props }, forwardedRef) => {
14
23
  const { hasIosKeyboard } = useThemeContext();
15
24
  const { tx } = useThemeContext();
@@ -43,13 +52,73 @@ var SearchListEmpty = /* @__PURE__ */ forwardRef(({ children, classNames, ...pro
43
52
  ref: forwardedRef
44
53
  }, children);
45
54
  });
46
- var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
55
+ var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, onSelect, ...props }, forwardedRef) => {
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
+ ]);
47
66
  return /* @__PURE__ */ React.createElement(CommandItem, {
48
67
  ...props,
49
- className: mx("p-1 rounded data-[selected]:bg-neutral-450/10 data-[selected]:hover:bg-25/10", classNames),
68
+ onSelect: handleSelect,
69
+ className: mx("p-1 rounded select-none cursor-pointer data-[selected]:bg-neutral-450/10 data-[selected]:hover:bg-25/10", classNames),
50
70
  ref: forwardedRef
51
71
  }, children);
52
72
  });
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;
53
122
  var SearchList = {
54
123
  Root: SearchListRoot,
55
124
  Input: SearchListInput,
@@ -57,6 +126,94 @@ var SearchList = {
57
126
  Empty: SearchListEmpty,
58
127
  Item: SearchListItem
59
128
  };
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
+ };
60
217
 
61
218
  // packages/ui/react-ui-searchlist/src/translations.ts
62
219
  var translationKey = "searchlist";
@@ -68,6 +225,8 @@ var translations_default = [
68
225
  }
69
226
  ];
70
227
  export {
228
+ Combobox,
229
+ PopoverCombobox,
71
230
  SearchList,
72
231
  translations_default as translations
73
232
  };
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
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"]
3
+ "sources": ["../../../src/components/SearchList.tsx", "../../../src/composites/PopoverCombobox.tsx", "../../../src/translations.ts"],
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,iBAAiB;AAC1B,SAASC,qBAAqB;AAC9B,SAASC,4BAA4B;AACrC,SAASC,cAAcC,cAAcC,aAAaC,aAAaC,mBAAmB;AAClF,OAAOC,SAAqCC,YAAoCC,mBAAmB;AAEnG,SACEC,QAIAC,mBACAC,qBACAC,OACAC,uBACK;AACP,SAASC,SAASC,IAAIC,6BAA6B;AAkBnD,IAAMC,gBAAgB;AACtB,IAAMC,wBAAwB;AAC9B,IAAMC,kBAAkB;AACxB,IAAMC,uBAAuB;AAE7B,IAAM,CAACC,kBAAkBC,kBAAAA,IAAsBC,cAA6CN,eAAe,CAAC,CAAA;AAM5G,IAAMO,iBAAiBC,2BACrB,CAAC,EAAEC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;AACnC,SACE,sBAAA,cAACC,aAAAA;IAAa,GAAGF;IAAOG,WAAWC,GAAG,IAAIL,UAAAA;IAAaM,KAAKJ;KACzDH,QAAAA;AAGP,CAAA;AAGFF,eAAeU,cAAcf;AAQ7B,IAAMgB,kBAAkBV,2BACtB,CACE,EAAEC,UAAUC,YAAYS,SAASC,cAAcC,WAAWC,gBAAgBC,UAAU,WAAW,GAAGZ,MAAAA,GAClGC,iBAAAA;AAGA,QAAM,EAAEY,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,GAAGlB;IACJG,WAAWY,GACT,eACA,SACA;MACEH;MACAO,UAAUnB,MAAMmB;MAChBX;MACAE;IACF,GACAX,UAAAA;IAED,GAAIC,MAAMoB,aAAa,CAACP,kBAAkB;MAAEO,WAAW;IAAK;IAC7Df,KAAKJ;;AAGX,CAAA;AAKF,IAAMoB,oBAAoBxB,2BACxB,CAAC,EAAEC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;AACnC,SACE,sBAAA,cAACqB,aAAAA;IAAa,GAAGtB;IAAOG,WAAWC,GAAG,OAAOL,UAAAA;IAAaM,KAAKJ;KAC5DH,QAAAA;AAGP,CAAA;AAKF,IAAMyB,kBAAkB1B,2BACtB,CAAC,EAAEC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;AACnC,SACE,sBAAA,cAACuB,cAAAA;IAAc,GAAGxB;IAAOG,WAAWC,GAAG,IAAIL,UAAAA;IAAaM,KAAKJ;KAC1DH,QAAAA;AAGP,CAAA;AAKF,IAAM2B,iBAAiB5B,2BACrB,CAAC,EAAEC,UAAUC,YAAY2B,UAAU,GAAG1B,MAAAA,GAASC,iBAAAA;AAC7C,QAAM,EAAE0B,eAAeC,aAAY,IAAKlC,mBAAmBF,oBAAAA;AAC3D,QAAMqC,eAAeC,YACnB,CAACC,cAAAA;AACCJ,oBAAgBI,SAAAA;AAChBH,mBAAe,KAAA;AACfF,eAAWK,SAAAA;EACb,GACA;IAACJ;IAAeC;IAAcF;GAAS;AAEzC,SACE,sBAAA,cAACM,aAAAA;IACE,GAAGhC;IACJ0B,UAAUG;IACV1B,WAAWC,GACT,2GACAL,UAAAA;IAEFM,KAAKJ;KAEJH,QAAAA;AAGP,CAAA;AAGF2B,eAAenB,cAAcd;AAE7B,IAAMyC,eAAe,CAAC,EACpBC,SAASC,cACTC,MAAMC,WACNC,aACAV,cAAcW,mBACdC,OAAOC,YACPC,cACAf,eAAegB,oBACfC,aACA9C,SAAQ,MACU;AAClB,QAAMoC,UAAUW,MAAMxD,eAAe8C,YAAAA;AACrC,QAAM,CAACC,OAAO,OAAOR,YAAAA,IAAgBkB,qBAAqB;IACxDC,MAAMV;IACNW,UAAUT;IACVU,aAAaX;EACf,CAAA;AACA,QAAM,CAACE,QAAQ,IAAIb,aAAAA,IAAiBmB,qBAAqB;IACvDC,MAAMN;IACNO,UAAUL;IACVM,aAAaP;EACf,CAAA;AACA,SACE,sBAAA,cAACjD,kBAAAA;IACCyD,YAAAA;IACAhB;IACAE;IACAR;IACAY;IACAb;IACAiB;KAEC9C,QAAAA;AAGP;AAEAmC,aAAa3B,cAAcjB;AAI3B,IAAM8D,kBAAkBtD,2BACtB,CAAC,EAAEC,UAAUsD,SAAS,GAAGpD,MAAAA,GAASC,iBAAAA;AAChC,QAAM,EAAEiC,SAASE,MAAMR,cAAcgB,aAAaJ,MAAK,IAAK9C,mBAAmBJ,qBAAAA;AAC/E,QAAM+D,cAAcvB,YAClB,CAACwB,UAAAA;AACCF,cAAUE,KAAAA;AACV1B,mBAAe,IAAA;EACjB,GACA;IAACwB;IAASxB;GAAa;AAEzB,SACE,sBAAA,cAAC2B,QAAAA;IACE,GAAGvD;IACJwD,MAAK;IACLC,iBAAerB;IACfsB,iBAAexB;IACfyB,iBAAc;IACdP,SAASC;IACThD,KAAKJ;KAEJH,YACC,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAAC8D,QAAAA;IACCzD,WAAWC,GAAG,yDAAyD,CAACoC,SAASqB,qBAAAA;KAEhFrB,SAASI,WAAAA,GAEZ,sBAAA,cAACkB,WAAAA;IAAUC,QAAO;IAAO5D,WAAW6D,QAAQ,CAAA;;AAKtD,CAAA;AAGFb,gBAAgB7C,cAAchB;AAEvB,IAAM2E,aAAa;EACxBC,MAAMtE;EACNuE,OAAO5D;EACP6D,SAAS/C;EACTgD,OAAO9C;EACP+C,MAAM7C;AACR;AAEO,IAAM8C,WAAW;EACtBL,MAAMjC;EACNuC,SAASrB;EACTzD;AACF;;;AC/OA,SAAS+E,wBAAAA,6BAA4B;AACrC,OAAOC,UAASC,cAAAA,mBAAkB;AAElC,SAASC,eAA4F;AAgBrG,IAAMC,sBAAsB,CAAC,EAC3BC,OACAC,UACAC,MAAMC,WACNC,cAAcC,mBACdC,aACA,GAAGC,MAAAA,MACsB;AACzB,QAAM,CAACL,MAAME,YAAAA,IAAgBI,sBAAqB;IAChDC,MAAMN;IACNO,UAAUL;IACVM,aAAaL;EACf,CAAA;AACA,SACE,gBAAAM,OAAA,cAACC,SAASC,MAAI;IAACZ;IAAYE;IAA6B,GAAGG;KACzD,gBAAAK,OAAA,cAACG,QAAQD,MAAI;IAACZ;IAAYE;IAA4BJ;KACnDC,QAAAA,CAAAA;AAIT;AAIA,IAAMe,gCAAgC;AAEtC,IAAMC,yBAAyBC,gBAAAA,YAC7B,CACE,EACEC,OAAO,UACPC,mBAAmB,IACnBC,YACAC,OACAC,aACAC,iBACAC,mBACAC,cACAC,QACAC,kBACAC,iBACAC,kBACAC,iBACAC,sBACAC,gBACAC,mBACAC,YACAlC,UACAmC,YACA,GAAG7B,MAAAA,GAEL8B,iBAAAA;AAEA,QAAM,EAAEC,QAAO,IAAKzB,SAAS0B,mBAAmBvB,6BAAAA;AAChD,SACE,gBAAAJ,OAAA,cAACG,QAAQyB,SAAO;IAEZrB;IACAE;IACAC;IACAC;IACAC;IACAC;IACAL;IACAM;IACAC;IACAC;IACAC;IACAC;IACAC;IACAC;IACAC;IACAC;IACAC;IACAC;IAEFK,IAAIH;IACJI,KAAKL;KAGL,gBAAAzB,OAAA,cAAC+B,WAAW7B,MAAI;IAAE,GAAGP;IAAO6B,YAAW;IAAWQ,MAAK;KACpD3C,QAAAA,CAAAA;AAIT,CAAA;AAGFgB,uBAAuB4B,cAAc7B;AAIrC,IAAM8B,yBAAyB5B,gBAAAA,YAA2D,CAACX,OAAO8B,iBAAAA;AAChG,SACE,gBAAAzB,OAAA,cAACG,QAAQgC,SAAO;IAACC,SAAAA;KACf,gBAAApC,OAAA,cAACC,SAASkC,SAAO;IAAE,GAAGxC;IAAOmC,KAAKL;;AAGxC,CAAA;AAIA,IAAMY,uBAAuBN,WAAWO;AAKxC,IAAMC,sBAAsBjC,gBAAAA,YAC1B,CAAC,EAAEkC,iBAAiBC,gBAAgB,GAAG9C,MAAAA,GAAS8B,iBAAAA;AAC9C,SACE,gBAAAzB,OAAA,cAACG,QAAQuC,UAAa;IAAEF;IAAiBC;EAAe,GACtD,gBAAAzC,OAAA,cAAC+B,WAAWH,SAAO;IAAE,GAAGjC;IAAOmC,KAAKL;;AAG1C,CAAA;AAKF,IAAMkB,sBAAsBZ,WAAWa;AAIvC,IAAMC,uBAAuB1C,QAAQ2C;AAIrC,IAAMC,uBAAuBhB,WAAWiB;AAEjC,IAAMC,kBAAkB;EAC7B/C,MAAMf;EACNyC,SAASvB;EACT8B,SAASD;EACTI,OAAOD;EACPa,MAAMX;EACNK,MAAMD;EACNG,OAAOD;EACPG,OAAOD;AACT;;;AC5JO,IAAMI,iBAAiB;AAE9B,IAAA,uBAAe;EACb;IACE,SAAS;MACP,CAACA,cAAAA,GAAiB,CAAC;IACrB;EACF;;",
6
+ "names": ["CaretDown", "createContext", "useControllableState", "CommandEmpty", "CommandInput", "CommandItem", "CommandList", "CommandRoot", "React", "forwardRef", "useCallback", "Button", "useDensityContext", "useElevationContext", "useId", "useThemeContext", "getSize", "mx", "staticPlaceholderText", "COMBOBOX_NAME", "COMBOBOX_TRIGGER_NAME", "SEARCHLIST_NAME", "SEARCHLIST_ITEM_NAME", "ComboboxProvider", "useComboboxContext", "createContext", "SearchListRoot", "forwardRef", "children", "classNames", "props", "forwardedRef", "CommandRoot", "className", "mx", "ref", "displayName", "SearchListInput", "density", "propsDensity", "elevation", "propsElevation", "variant", "hasIosKeyboard", "useThemeContext", "tx", "useDensityContext", "useElevationContext", "CommandInput", "disabled", "autoFocus", "SearchListContent", "CommandList", "SearchListEmpty", "CommandEmpty", "SearchListItem", "onSelect", "onValueChange", "onOpenChange", "handleSelect", "useCallback", "nextValue", "CommandItem", "ComboboxRoot", "modalId", "propsModalId", "open", "propsOpen", "defaultOpen", "propsOnOpenChange", "value", "propsValue", "defaultValue", "propsOnValueChange", "placeholder", "useId", "useControllableState", "prop", "onChange", "defaultProp", "isCombobox", "ComboboxTrigger", "onClick", "handleClick", "event", "Button", "role", "aria-expanded", "aria-controls", "aria-haspopup", "span", "staticPlaceholderText", "CaretDown", "weight", "getSize", "SearchList", "Root", "Input", "Content", "Empty", "Item", "Combobox", "Trigger", "useControllableState", "React", "forwardRef", "Popover", "PopoverComboboxRoot", "modal", "children", "open", "propsOpen", "onOpenChange", "propsOnOpenChange", "defaultOpen", "props", "useControllableState", "prop", "onChange", "defaultProp", "React", "Combobox", "Root", "Popover", "POPOVER_COMBOBOX_CONTENT_NAME", "PopoverComboboxContent", "forwardRef", "side", "collisionPadding", "sideOffset", "align", "alignOffset", "avoidCollisions", "collisionBoundary", "arrowPadding", "sticky", "hideWhenDetached", "onOpenAutoFocus", "onCloseAutoFocus", "onEscapeKeyDown", "onPointerDownOutside", "onFocusOutside", "onInteractOutside", "forceMount", "classNames", "forwardedRef", "modalId", "useComboboxContext", "Content", "id", "ref", "SearchList", "role", "displayName", "PopoverComboboxTrigger", "Trigger", "asChild", "PopoverComboboxInput", "Input", "PopoverComboboxList", "constrainInline", "constrainBlock", "Viewport", "PopoverComboboxItem", "Item", "PopoverComboboxArrow", "Arrow", "PopoverComboboxEmpty", "Empty", "PopoverCombobox", "List", "translationKey"]
7
7
  }
@@ -1 +1 @@
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
+ {"inputs":{"packages/ui/react-ui-searchlist/src/components/SearchList.tsx":{"bytes":21537,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"cmdk","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-searchlist/src/components/index.ts":{"bytes":488,"imports":[{"path":"packages/ui/react-ui-searchlist/src/components/SearchList.tsx","kind":"import-statement","original":"./SearchList"}],"format":"esm"},"packages/ui/react-ui-searchlist/src/composites/PopoverCombobox.tsx":{"bytes":13412,"imports":[{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-searchlist/src/components/index.ts","kind":"import-statement","original":"../components"}],"format":"esm"},"packages/ui/react-ui-searchlist/src/composites/index.ts":{"bytes":501,"imports":[{"path":"packages/ui/react-ui-searchlist/src/composites/PopoverCombobox.tsx","kind":"import-statement","original":"./PopoverCombobox"}],"format":"esm"},"packages/ui/react-ui-searchlist/src/translations.ts":{"bytes":872,"imports":[],"format":"esm"},"packages/ui/react-ui-searchlist/src/index.ts":{"bytes":785,"imports":[{"path":"packages/ui/react-ui-searchlist/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-searchlist/src/composites/index.ts","kind":"import-statement","original":"./composites"},{"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":19941},"packages/ui/react-ui-searchlist/dist/lib/browser/index.mjs":{"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"cmdk","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["Combobox","PopoverCombobox","SearchList","translations"],"entryPoint":"packages/ui/react-ui-searchlist/src/index.ts","inputs":{"packages/ui/react-ui-searchlist/src/components/SearchList.tsx":{"bytesInOutput":5026},"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/composites/PopoverCombobox.tsx":{"bytesInOutput":2936},"packages/ui/react-ui-searchlist/src/composites/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-searchlist/src/translations.ts":{"bytesInOutput":123}},"bytes":8408}}}
@@ -1,15 +1,30 @@
1
1
  import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from 'cmdk';
2
- import React, { type ComponentPropsWithRef } from 'react';
3
- import { type TextInputProps, type ThemedClassName } from '@dxos/react-ui';
2
+ import React, { type ComponentPropsWithRef, type PropsWithChildren } from 'react';
3
+ import { type ButtonProps, 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
+ }>>;
8
22
  type CommandInputPrimitiveProps = ComponentPropsWithRef<typeof CommandInput>;
9
23
  type SearchListInputProps = Omit<TextInputProps, 'value' | 'defaultValue' | 'onChange'> & Pick<CommandInputPrimitiveProps, 'value' | 'onValueChange' | 'defaultValue'>;
10
24
  type SearchListContentProps = ThemedClassName<ComponentPropsWithRef<typeof CommandList>>;
11
25
  type SearchListEmptyProps = ThemedClassName<ComponentPropsWithRef<typeof CommandEmpty>>;
12
26
  type SearchListItemProps = ThemedClassName<ComponentPropsWithRef<typeof CommandItem>>;
27
+ type ComboboxTriggerProps = ButtonProps;
13
28
  export declare const SearchList: {
14
29
  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>>;
15
30
  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>>;
@@ -17,5 +32,13 @@ export declare const SearchList: {
17
32
  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>>;
18
33
  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>>;
19
34
  };
20
- export type { SearchListRootProps, SearchListInputProps, SearchListContentProps, SearchListEmptyProps, SearchListItemProps, };
35
+ export declare const Combobox: {
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, };
21
44
  //# sourceMappingURL=SearchList.d.ts.map
@@ -1 +1 @@
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
+ {"version":3,"file":"SearchList.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchList.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AACzF,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,KAAK,iBAAiB,EAAe,MAAM,OAAO,CAAC;AAE3G,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,eAAe,EAKrB,MAAM,gBAAgB,CAAC;AAGxB,KAAK,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAErD,KAAK,mBAAmB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,WAAW,CAAC,CAAC,GAAG;IACtF,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,UAAU,EAAE,IAAI,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AASF,KAAK,iBAAiB,GAAG,iBAAiB,CACxC,OAAO,CAAC,oBAAoB,GAAG;IAAE,WAAW,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CACpG,CAAC;AAcF,KAAK,0BAA0B,GAAG,qBAAqB,CAAC,OAAO,YAAY,CAAC,CAAC;AAG7E,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,GACrF,IAAI,CAAC,0BAA0B,EAAE,OAAO,GAAG,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;AAsEtF,KAAK,oBAAoB,GAAG,WAAW,CAAC;AAuCxC,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;+LA5ElB,iBAAiB;;;;;CAgFnB,CAAC;AAEF,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,GACrB,CAAC"}
@@ -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;AAIF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}
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;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}
@@ -0,0 +1,27 @@
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
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,9 @@
1
+ import '@dxosTheme';
2
+ declare const _default: {
3
+ component: () => JSX.Element;
4
+ };
5
+ export default _default;
6
+ export declare const Default: {
7
+ args: {};
8
+ };
9
+ //# sourceMappingURL=PopoverCombobox.stories.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,2 @@
1
+ export * from './PopoverCombobox';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/composites/index.ts"],"names":[],"mappings":"AAIA,cAAc,mBAAmB,CAAC"}
@@ -1,3 +1,4 @@
1
1
  export * from './components';
2
+ export * from './composites';
2
3
  export { default as translations } from './translations';
3
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,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.8-main.0ae9c21",
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,9 +16,11 @@
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",
19
21
  "cmdk": "^0.2.0",
20
- "@dxos/react-ui": "0.3.7",
21
- "@dxos/react-ui-theme": "0.3.7"
22
+ "@dxos/react-ui": "0.3.8-main.0ae9c21",
23
+ "@dxos/react-ui-theme": "0.3.8-main.0ae9c21"
22
24
  },
23
25
  "devDependencies": {
24
26
  "@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].toLowerCase().includes(search.toLowerCase()) ? 1 : 0)}>
25
- <SearchList.Input placeholder='Select...' />
24
+ <SearchList.Root filter={(value, search) => (items[value].includes(search) ? 1 : 0)}>
25
+ <SearchList.Input placeholder='Search...' />
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,8 +38,6 @@ export default {
38
38
  component: SearchListStory,
39
39
  };
40
40
 
41
- // TODO(burdon): Test controlled and uncontrolled.
42
-
43
41
  export const Default = {
44
42
  args: {},
45
43
  };
@@ -1,17 +1,23 @@
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';
4
7
  import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from 'cmdk';
5
- import React, { type ComponentPropsWithRef, forwardRef } from 'react';
8
+ import React, { type ComponentPropsWithRef, forwardRef, type PropsWithChildren, useCallback } from 'react';
6
9
 
7
10
  import {
11
+ Button,
12
+ type ButtonProps,
8
13
  type TextInputProps,
9
14
  type ThemedClassName,
10
15
  useDensityContext,
11
16
  useElevationContext,
17
+ useId,
12
18
  useThemeContext,
13
19
  } from '@dxos/react-ui';
14
- import { mx } from '@dxos/react-ui-theme';
20
+ import { getSize, mx, staticPlaceholderText } from '@dxos/react-ui-theme';
15
21
 
16
22
  type SearchListVariant = 'list' | 'menu' | 'listbox';
17
23
 
@@ -19,6 +25,27 @@ type SearchListRootProps = ThemedClassName<ComponentPropsWithRef<typeof CommandR
19
25
  variant?: SearchListVariant;
20
26
  };
21
27
 
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
+
22
49
  const SearchListRoot = forwardRef<HTMLDivElement, SearchListRootProps>(
23
50
  ({ children, classNames, ...props }, forwardedRef) => {
24
51
  return (
@@ -29,6 +56,8 @@ const SearchListRoot = forwardRef<HTMLDivElement, SearchListRootProps>(
29
56
  },
30
57
  );
31
58
 
59
+ SearchListRoot.displayName = SEARCHLIST_NAME;
60
+
32
61
  type CommandInputPrimitiveProps = ComponentPropsWithRef<typeof CommandInput>;
33
62
 
34
63
  // TODO: Harmonize with other inputs’ `onChange` prop.
@@ -94,11 +123,24 @@ const SearchListEmpty = forwardRef<HTMLDivElement, SearchListEmptyProps>(
94
123
  type SearchListItemProps = ThemedClassName<ComponentPropsWithRef<typeof CommandItem>>;
95
124
 
96
125
  const SearchListItem = forwardRef<HTMLDivElement, SearchListItemProps>(
97
- ({ children, classNames, ...props }, forwardedRef) => {
126
+ ({ children, classNames, onSelect, ...props }, forwardedRef) => {
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
+ );
98
136
  return (
99
137
  <CommandItem
100
138
  {...props}
101
- className={mx('p-1 rounded data-[selected]:bg-neutral-450/10 data-[selected]:hover:bg-25/10', classNames)}
139
+ onSelect={handleSelect}
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
+ )}
102
144
  ref={forwardedRef}
103
145
  >
104
146
  {children}
@@ -107,6 +149,86 @@ const SearchListItem = forwardRef<HTMLDivElement, SearchListItemProps>(
107
149
  },
108
150
  );
109
151
 
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
+
110
232
  export const SearchList = {
111
233
  Root: SearchListRoot,
112
234
  Input: SearchListInput,
@@ -115,10 +237,18 @@ export const SearchList = {
115
237
  Item: SearchListItem,
116
238
  };
117
239
 
240
+ export const Combobox = {
241
+ Root: ComboboxRoot,
242
+ Trigger: ComboboxTrigger,
243
+ useComboboxContext,
244
+ };
245
+
118
246
  export type {
119
247
  SearchListRootProps,
120
248
  SearchListInputProps,
121
249
  SearchListContentProps,
122
250
  SearchListEmptyProps,
123
251
  SearchListItemProps,
252
+ ComboboxRootProps,
253
+ ComboboxTriggerProps,
124
254
  };
@@ -0,0 +1,38 @@
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
+ };
@@ -0,0 +1,172 @@
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
+ };
@@ -0,0 +1,5 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ export * from './PopoverCombobox';
package/src/index.ts CHANGED
@@ -3,4 +3,5 @@
3
3
  //
4
4
 
5
5
  export * from './components';
6
+ export * from './composites';
6
7
  export { default as translations } from './translations';