@dxos/react-ui-searchlist 0.3.7-main.3ea49a6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +8 -0
- package/README.md +3 -0
- package/dist/lib/browser/index.mjs +74 -0
- package/dist/lib/browser/index.mjs.map +7 -0
- package/dist/lib/browser/meta.json +1 -0
- package/dist/types/src/components/SearchList.d.ts +21 -0
- package/dist/types/src/components/SearchList.d.ts.map +1 -0
- package/dist/types/src/components/SearchList.stories.d.ts +13 -0
- package/dist/types/src/components/SearchList.stories.d.ts.map +1 -0
- package/dist/types/src/components/index.d.ts +2 -0
- package/dist/types/src/components/index.d.ts.map +1 -0
- package/dist/types/src/index.d.ts +3 -0
- package/dist/types/src/index.d.ts.map +1 -0
- package/dist/types/src/translations.d.ts +8 -0
- package/dist/types/src/translations.d.ts.map +1 -0
- package/package.json +45 -0
- package/src/components/SearchList.stories.tsx +45 -0
- package/src/components/SearchList.tsx +124 -0
- package/src/components/index.ts +5 -0
- package/src/index.ts +6 -0
- package/src/translations.ts +13 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
Copyright (c) 2022 DXOS
|
|
3
|
+
|
|
4
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
5
|
+
|
|
6
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
7
|
+
|
|
8
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
// packages/ui/react-ui-searchlist/src/components/SearchList.tsx
|
|
2
|
+
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
|
+
var SearchListRoot = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
|
|
7
|
+
return /* @__PURE__ */ React.createElement(CommandRoot, {
|
|
8
|
+
...props,
|
|
9
|
+
className: mx("", classNames),
|
|
10
|
+
ref: forwardedRef
|
|
11
|
+
}, children);
|
|
12
|
+
});
|
|
13
|
+
var SearchListInput = /* @__PURE__ */ forwardRef(({ children, classNames, density: propsDensity, elevation: propsElevation, variant = "subdued", ...props }, forwardedRef) => {
|
|
14
|
+
const { hasIosKeyboard } = useThemeContext();
|
|
15
|
+
const { tx } = useThemeContext();
|
|
16
|
+
const density = useDensityContext(propsDensity);
|
|
17
|
+
const elevation = useElevationContext(propsElevation);
|
|
18
|
+
return /* @__PURE__ */ React.createElement(CommandInput, {
|
|
19
|
+
...props,
|
|
20
|
+
className: tx("input.input", "input", {
|
|
21
|
+
variant,
|
|
22
|
+
disabled: props.disabled,
|
|
23
|
+
density,
|
|
24
|
+
elevation
|
|
25
|
+
}, classNames),
|
|
26
|
+
...props.autoFocus && !hasIosKeyboard && {
|
|
27
|
+
autoFocus: true
|
|
28
|
+
},
|
|
29
|
+
ref: forwardedRef
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
var SearchListContent = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
|
|
33
|
+
return /* @__PURE__ */ React.createElement(CommandList, {
|
|
34
|
+
...props,
|
|
35
|
+
className: mx("p-1", classNames),
|
|
36
|
+
ref: forwardedRef
|
|
37
|
+
}, children);
|
|
38
|
+
});
|
|
39
|
+
var SearchListEmpty = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
|
|
40
|
+
return /* @__PURE__ */ React.createElement(CommandEmpty, {
|
|
41
|
+
...props,
|
|
42
|
+
className: mx("", classNames),
|
|
43
|
+
ref: forwardedRef
|
|
44
|
+
}, children);
|
|
45
|
+
});
|
|
46
|
+
var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
|
|
47
|
+
return /* @__PURE__ */ React.createElement(CommandItem, {
|
|
48
|
+
...props,
|
|
49
|
+
className: mx("p-1 rounded data-[selected]:bg-neutral-450/10 data-[selected]:hover:bg-25/10", classNames),
|
|
50
|
+
ref: forwardedRef
|
|
51
|
+
}, children);
|
|
52
|
+
});
|
|
53
|
+
var SearchList = {
|
|
54
|
+
Root: SearchListRoot,
|
|
55
|
+
Input: SearchListInput,
|
|
56
|
+
Content: SearchListContent,
|
|
57
|
+
Empty: SearchListEmpty,
|
|
58
|
+
Item: SearchListItem
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
// packages/ui/react-ui-searchlist/src/translations.ts
|
|
62
|
+
var translationKey = "searchlist";
|
|
63
|
+
var translations_default = [
|
|
64
|
+
{
|
|
65
|
+
"en-US": {
|
|
66
|
+
[translationKey]: {}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
];
|
|
70
|
+
export {
|
|
71
|
+
SearchList,
|
|
72
|
+
translations_default as translations
|
|
73
|
+
};
|
|
74
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
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"]
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-searchlist/src/components/SearchList.tsx":{"bytes":10294,"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":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/translations.ts":{"bytes":872,"imports":[],"format":"esm"},"packages/ui/react-ui-searchlist/src/index.ts":{"bytes":691,"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}}}
|
|
@@ -0,0 +1,21 @@
|
|
|
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';
|
|
4
|
+
type SearchListVariant = 'list' | 'menu' | 'listbox';
|
|
5
|
+
type SearchListRootProps = ThemedClassName<ComponentPropsWithRef<typeof CommandRoot>> & {
|
|
6
|
+
variant?: SearchListVariant;
|
|
7
|
+
};
|
|
8
|
+
type CommandInputPrimitiveProps = ComponentPropsWithRef<typeof CommandInput>;
|
|
9
|
+
type SearchListInputProps = Omit<TextInputProps, 'value' | 'defaultValue' | 'onChange'> & Pick<CommandInputPrimitiveProps, 'value' | 'onValueChange' | 'defaultValue'>;
|
|
10
|
+
type SearchListContentProps = ThemedClassName<ComponentPropsWithRef<typeof CommandList>>;
|
|
11
|
+
type SearchListEmptyProps = ThemedClassName<ComponentPropsWithRef<typeof CommandEmpty>>;
|
|
12
|
+
type SearchListItemProps = ThemedClassName<ComponentPropsWithRef<typeof CommandItem>>;
|
|
13
|
+
export declare const SearchList: {
|
|
14
|
+
Root: React.ForwardRefExoticComponent<Pick<SearchListRootProps, "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "shouldFilter" | "filter" | "value" | "onValueChange" | "loop" | "key" | "classNames" | "variant"> & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
+
Input: React.ForwardRefExoticComponent<Pick<SearchListInputProps, "list" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | "onValueChange" | "key" | "form" | "pattern" | "classNames" | "variant" | "type" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "step" | "width" | "asChild" | "density" | "elevation"> & React.RefAttributes<HTMLInputElement>>;
|
|
16
|
+
Content: React.ForwardRefExoticComponent<Pick<SearchListContentProps, "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>>;
|
|
17
|
+
Empty: React.ForwardRefExoticComponent<Pick<SearchListEmptyProps, "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "classNames"> & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
Item: React.ForwardRefExoticComponent<Pick<SearchListItemProps, "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | "key" | "classNames" | "disabled"> & React.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
};
|
|
20
|
+
export type { SearchListRootProps, SearchListInputProps, SearchListContentProps, SearchListEmptyProps, SearchListItemProps, };
|
|
21
|
+
//# sourceMappingURL=SearchList.d.ts.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import '@dxosTheme';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
type StoryItems = Record<string, string>;
|
|
4
|
+
declare const _default: {
|
|
5
|
+
component: React.FC<{
|
|
6
|
+
items: StoryItems;
|
|
7
|
+
}>;
|
|
8
|
+
};
|
|
9
|
+
export default _default;
|
|
10
|
+
export declare const Default: {
|
|
11
|
+
args: {};
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=SearchList.stories.d.ts.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,eAAe,CAAC;;;;;;AAE3C,wBAME"}
|
package/package.json
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@dxos/react-ui-searchlist",
|
|
3
|
+
"version": "0.3.7-main.3ea49a6",
|
|
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
|
+
"homepage": "https://dxos.org",
|
|
6
|
+
"bugs": "https://github.com/dxos/dxos/issues",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"author": "DXOS.org",
|
|
9
|
+
"main": "dist/lib/node/index.cjs",
|
|
10
|
+
"browser": {
|
|
11
|
+
"./dist/lib/node/index.cjs": "./dist/lib/browser/index.mjs"
|
|
12
|
+
},
|
|
13
|
+
"types": "dist/types/src/index.d.ts",
|
|
14
|
+
"files": [
|
|
15
|
+
"dist",
|
|
16
|
+
"src"
|
|
17
|
+
],
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"cmdk": "^0.2.0",
|
|
20
|
+
"@dxos/react-ui": "0.3.7-main.3ea49a6",
|
|
21
|
+
"@dxos/react-ui-theme": "0.3.7-main.3ea49a6"
|
|
22
|
+
},
|
|
23
|
+
"devDependencies": {
|
|
24
|
+
"@faker-js/faker": "^8.0.2",
|
|
25
|
+
"@phosphor-icons/react": "^2.0.5",
|
|
26
|
+
"@types/react": "^18.0.21",
|
|
27
|
+
"@types/react-dom": "^18.0.6",
|
|
28
|
+
"chromatic": "^7.5.0",
|
|
29
|
+
"react": "^18.2.0",
|
|
30
|
+
"react-dom": "^18.2.0",
|
|
31
|
+
"vite": "^4.3.9",
|
|
32
|
+
"vite-plugin-turbosnap": "^1.0.2"
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"@phosphor-icons/react": "^2.0.5",
|
|
36
|
+
"react": "^18.2.0",
|
|
37
|
+
"react-dom": "^18.2.0"
|
|
38
|
+
},
|
|
39
|
+
"publishConfig": {
|
|
40
|
+
"access": "public"
|
|
41
|
+
},
|
|
42
|
+
"scripts": {
|
|
43
|
+
"chromatic": "true"
|
|
44
|
+
}
|
|
45
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import '@dxosTheme';
|
|
6
|
+
|
|
7
|
+
import { faker } from '@faker-js/faker';
|
|
8
|
+
import React, { type FC } from 'react';
|
|
9
|
+
|
|
10
|
+
import { SearchList } from './SearchList';
|
|
11
|
+
|
|
12
|
+
type StoryItems = Record<string, string>;
|
|
13
|
+
|
|
14
|
+
const defaultItems: StoryItems = faker.helpers
|
|
15
|
+
.uniqueArray(faker.definitions.animal.fish, 100)
|
|
16
|
+
.sort()
|
|
17
|
+
.reduce((acc: StoryItems, label) => {
|
|
18
|
+
acc[faker.string.uuid()] = label;
|
|
19
|
+
return acc;
|
|
20
|
+
}, {});
|
|
21
|
+
|
|
22
|
+
const SearchListStory: FC<{ items: StoryItems }> = ({ items = defaultItems }) => {
|
|
23
|
+
return (
|
|
24
|
+
<SearchList.Root filter={(value, search) => (items[value].toLowerCase().includes(search.toLowerCase()) ? 1 : 0)}>
|
|
25
|
+
<SearchList.Input placeholder='Select...' />
|
|
26
|
+
<SearchList.Content>
|
|
27
|
+
{Object.entries(items).map(([value, label]) => (
|
|
28
|
+
<SearchList.Item key={value} value={value} onSelect={(value) => console.log('[item select]', value)}>
|
|
29
|
+
{label}
|
|
30
|
+
</SearchList.Item>
|
|
31
|
+
))}
|
|
32
|
+
</SearchList.Content>
|
|
33
|
+
</SearchList.Root>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export default {
|
|
38
|
+
component: SearchListStory,
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
// TODO(burdon): Test controlled and uncontrolled.
|
|
42
|
+
|
|
43
|
+
export const Default = {
|
|
44
|
+
args: {},
|
|
45
|
+
};
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from 'cmdk';
|
|
5
|
+
import React, { type ComponentPropsWithRef, forwardRef } from 'react';
|
|
6
|
+
|
|
7
|
+
import {
|
|
8
|
+
type TextInputProps,
|
|
9
|
+
type ThemedClassName,
|
|
10
|
+
useDensityContext,
|
|
11
|
+
useElevationContext,
|
|
12
|
+
useThemeContext,
|
|
13
|
+
} from '@dxos/react-ui';
|
|
14
|
+
import { mx } from '@dxos/react-ui-theme';
|
|
15
|
+
|
|
16
|
+
type SearchListVariant = 'list' | 'menu' | 'listbox';
|
|
17
|
+
|
|
18
|
+
type SearchListRootProps = ThemedClassName<ComponentPropsWithRef<typeof CommandRoot>> & {
|
|
19
|
+
variant?: SearchListVariant;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const SearchListRoot = forwardRef<HTMLDivElement, SearchListRootProps>(
|
|
23
|
+
({ children, classNames, ...props }, forwardedRef) => {
|
|
24
|
+
return (
|
|
25
|
+
<CommandRoot {...props} className={mx('', classNames)} ref={forwardedRef}>
|
|
26
|
+
{children}
|
|
27
|
+
</CommandRoot>
|
|
28
|
+
);
|
|
29
|
+
},
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
type CommandInputPrimitiveProps = ComponentPropsWithRef<typeof CommandInput>;
|
|
33
|
+
|
|
34
|
+
// TODO: Harmonize with other inputs’ `onChange` prop.
|
|
35
|
+
type SearchListInputProps = Omit<TextInputProps, 'value' | 'defaultValue' | 'onChange'> &
|
|
36
|
+
Pick<CommandInputPrimitiveProps, 'value' | 'onValueChange' | 'defaultValue'>;
|
|
37
|
+
|
|
38
|
+
const SearchListInput = forwardRef<HTMLInputElement, SearchListInputProps>(
|
|
39
|
+
(
|
|
40
|
+
{ children, classNames, density: propsDensity, elevation: propsElevation, variant = 'subdued', ...props },
|
|
41
|
+
forwardedRef,
|
|
42
|
+
) => {
|
|
43
|
+
// CHORE(thure): Keep this in-sync with `TextInput`, or submit a PR for `cmdk` to support `asChild` so we don’t have to.
|
|
44
|
+
const { hasIosKeyboard } = useThemeContext();
|
|
45
|
+
const { tx } = useThemeContext();
|
|
46
|
+
const density = useDensityContext(propsDensity);
|
|
47
|
+
const elevation = useElevationContext(propsElevation);
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<CommandInput
|
|
51
|
+
{...props}
|
|
52
|
+
className={tx(
|
|
53
|
+
'input.input',
|
|
54
|
+
'input',
|
|
55
|
+
{
|
|
56
|
+
variant,
|
|
57
|
+
disabled: props.disabled,
|
|
58
|
+
density,
|
|
59
|
+
elevation,
|
|
60
|
+
},
|
|
61
|
+
classNames,
|
|
62
|
+
)}
|
|
63
|
+
{...(props.autoFocus && !hasIosKeyboard && { autoFocus: true })}
|
|
64
|
+
ref={forwardedRef}
|
|
65
|
+
/>
|
|
66
|
+
);
|
|
67
|
+
},
|
|
68
|
+
);
|
|
69
|
+
|
|
70
|
+
type SearchListContentProps = ThemedClassName<ComponentPropsWithRef<typeof CommandList>>;
|
|
71
|
+
|
|
72
|
+
const SearchListContent = forwardRef<HTMLDivElement, SearchListContentProps>(
|
|
73
|
+
({ children, classNames, ...props }, forwardedRef) => {
|
|
74
|
+
return (
|
|
75
|
+
<CommandList {...props} className={mx('p-1', classNames)} ref={forwardedRef}>
|
|
76
|
+
{children}
|
|
77
|
+
</CommandList>
|
|
78
|
+
);
|
|
79
|
+
},
|
|
80
|
+
);
|
|
81
|
+
|
|
82
|
+
type SearchListEmptyProps = ThemedClassName<ComponentPropsWithRef<typeof CommandEmpty>>;
|
|
83
|
+
|
|
84
|
+
const SearchListEmpty = forwardRef<HTMLDivElement, SearchListEmptyProps>(
|
|
85
|
+
({ children, classNames, ...props }, forwardedRef) => {
|
|
86
|
+
return (
|
|
87
|
+
<CommandEmpty {...props} className={mx('', classNames)} ref={forwardedRef}>
|
|
88
|
+
{children}
|
|
89
|
+
</CommandEmpty>
|
|
90
|
+
);
|
|
91
|
+
},
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
type SearchListItemProps = ThemedClassName<ComponentPropsWithRef<typeof CommandItem>>;
|
|
95
|
+
|
|
96
|
+
const SearchListItem = forwardRef<HTMLDivElement, SearchListItemProps>(
|
|
97
|
+
({ children, classNames, ...props }, forwardedRef) => {
|
|
98
|
+
return (
|
|
99
|
+
<CommandItem
|
|
100
|
+
{...props}
|
|
101
|
+
className={mx('p-1 rounded data-[selected]:bg-neutral-450/10 data-[selected]:hover:bg-25/10', classNames)}
|
|
102
|
+
ref={forwardedRef}
|
|
103
|
+
>
|
|
104
|
+
{children}
|
|
105
|
+
</CommandItem>
|
|
106
|
+
);
|
|
107
|
+
},
|
|
108
|
+
);
|
|
109
|
+
|
|
110
|
+
export const SearchList = {
|
|
111
|
+
Root: SearchListRoot,
|
|
112
|
+
Input: SearchListInput,
|
|
113
|
+
Content: SearchListContent,
|
|
114
|
+
Empty: SearchListEmpty,
|
|
115
|
+
Item: SearchListItem,
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
export type {
|
|
119
|
+
SearchListRootProps,
|
|
120
|
+
SearchListInputProps,
|
|
121
|
+
SearchListContentProps,
|
|
122
|
+
SearchListEmptyProps,
|
|
123
|
+
SearchListItemProps,
|
|
124
|
+
};
|
package/src/index.ts
ADDED