[ { "tags": { "param": "props.state The current state of the SearchInput. This can be none, or loading.\nprops.darkMode determines whether or not the component appears in dark theme.\nprops.size determines the size of the text and the height of the input." }, "description": "# SearchInput\n\nSearchInput component", "methods": [], "displayName": "SearchInput", "props": { "BaseSearchInputProps": { "state": { "name": "state", "defaultValue": { "value": "unset" }, "description": "The current state of the SearchInput. This can be none, or loading.", "required": false, "type": { "name": "enum", "raw": "State", "value": [ { "value": "\"unset\"" }, { "value": "\"loading\"" } ] }, "tags": {} }, "size": { "name": "size", "defaultValue": { "value": "Size.Default" }, "description": "Determines the font size, padding and spacing.", "required": false, "type": { "name": "enum", "raw": "Size", "value": [ { "value": "\"small\"" }, { "value": "\"xsmall\"" }, { "value": "\"default\"" }, { "value": "\"large\"" } ] }, "tags": {} }, "disabled": { "name": "disabled", "defaultValue": null, "description": "Determines whether the field is currently disabled.\nDefault: false", "required": false, "type": { "name": "enum", "raw": "boolean", "value": [ { "value": "false" }, { "value": "true" } ] }, "tags": {} }, "value": { "name": "value", "defaultValue": null, "description": "The current value of the text box", "required": false, "type": { "name": "string" }, "tags": {} }, "onChange": { "name": "onChange", "defaultValue": null, "description": "Callback fired when the input value changes.\nUse this callback to filter the `SearchResult` options", "required": false, "type": { "name": "ChangeEventHandler" }, "tags": {} }, "onSubmit": { "name": "onSubmit", "defaultValue": null, "description": "Callback fired when a search result is clicked,\nor the enter key is pressed.", "required": false, "type": { "name": "FormEventHandler" }, "tags": {} }, "placeholder": { "name": "placeholder", "defaultValue": { "value": "Search" }, "description": "The placeholder text shown in the input field before the user begins typing.", "required": false, "type": { "name": "string" }, "tags": {} } }, "DarkModeProps": { "darkMode": { "name": "darkMode", "defaultValue": { "value": "false" }, "description": "Renders the component with dark mode styles.", "required": false, "type": { "name": "enum", "raw": "boolean", "value": [ { "value": "false" }, { "value": "true" } ] }, "tags": { "default": "false" } } }, "HTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes", "FormHTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form", "AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes", "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes" } }, { "tags": {}, "description": "", "methods": [], "displayName": "SearchResult", "props": { "SearchResultProps": { "as": { "name": "as", "defaultValue": null, "description": "The element or component to render as", "required": false, "type": { "name": "enum", "raw": "PolymorphicAs", "value": [ { "value": "\"symbol\"" }, { "value": "\"object\"" }, { "value": "\"form\"" }, { "value": "\"a\"" }, { "value": "\"abbr\"" }, { "value": "\"address\"" }, { "value": "\"area\"" }, { "value": "\"article\"" }, { "value": "\"aside\"" }, { "value": "\"audio\"" }, { "value": "\"b\"" }, { "value": "\"base\"" }, { "value": "\"bdi\"" }, { "value": "\"bdo\"" }, { "value": "\"big\"" }, { "value": "\"blockquote\"" }, { "value": "\"body\"" }, { "value": "\"br\"" }, { "value": "\"button\"" }, { "value": "\"canvas\"" }, { "value": "\"caption\"" }, { "value": "\"center\"" }, { "value": "\"cite\"" }, { "value": "\"code\"" }, { "value": "\"col\"" }, { "value": "\"colgroup\"" }, { "value": "\"data\"" }, { "value": "\"datalist\"" }, { "value": "\"dd\"" }, { "value": "\"del\"" }, { "value": "\"details\"" }, { "value": "\"dfn\"" }, { "value": "\"dialog\"" }, { "value": "\"div\"" }, { "value": "\"dl\"" }, { "value": "\"dt\"" }, { "value": "\"em\"" }, { "value": "\"embed\"" }, { "value": "\"fieldset\"" }, { "value": "\"figcaption\"" }, { "value": "\"figure\"" }, { "value": "\"footer\"" }, { "value": "\"h1\"" }, { "value": "\"h2\"" }, { "value": "\"h3\"" }, { "value": "\"h4\"" }, { "value": "\"h5\"" }, { "value": "\"h6\"" }, { "value": "\"head\"" }, { "value": "\"header\"" }, { "value": "\"hgroup\"" }, { "value": "\"hr\"" }, { "value": "\"html\"" }, { "value": "\"i\"" }, { "value": "\"iframe\"" }, { "value": "\"img\"" }, { "value": "\"input\"" }, { "value": "\"ins\"" }, { "value": "\"kbd\"" }, { "value": "\"keygen\"" }, { "value": "\"label\"" }, { "value": "\"legend\"" }, { "value": "\"li\"" }, { "value": "\"link\"" }, { "value": "\"main\"" }, { "value": "\"map\"" }, { "value": "\"mark\"" }, { "value": "\"menu\"" }, { "value": "\"menuitem\"" }, { "value": "\"meta\"" }, { "value": "\"meter\"" }, { "value": "\"nav\"" }, { "value": "\"noindex\"" }, { "value": "\"noscript\"" }, { "value": "\"ol\"" }, { "value": "\"optgroup\"" }, { "value": "\"option\"" }, { "value": "\"output\"" }, { "value": "\"p\"" }, { "value": "\"param\"" }, { "value": "\"picture\"" }, { "value": "\"pre\"" }, { "value": "\"progress\"" }, { "value": "\"q\"" }, { "value": "\"rp\"" }, { "value": "\"rt\"" }, { "value": "\"ruby\"" }, { "value": "\"s\"" }, { "value": "\"samp\"" }, { "value": "\"search\"" }, { "value": "\"slot\"" }, { "value": "\"script\"" }, { "value": "\"section\"" }, { "value": "\"select\"" }, { "value": "\"small\"" }, { "value": "\"source\"" }, { "value": "\"span\"" }, { "value": "\"strong\"" }, { "value": "\"style\"" }, { "value": "\"sub\"" }, { "value": "\"summary\"" }, { "value": "\"sup\"" }, { "value": "\"table\"" }, { "value": "\"template\"" }, { "value": "\"tbody\"" }, { "value": "\"td\"" }, { "value": "\"textarea\"" }, { "value": "\"tfoot\"" }, { "value": "\"th\"" }, { "value": "\"thead\"" }, { "value": "\"time\"" }, { "value": "\"title\"" }, { "value": "\"tr\"" }, { "value": "\"track\"" }, { "value": "\"u\"" }, { "value": "\"ul\"" }, { "value": "\"var\"" }, { "value": "\"video\"" }, { "value": "\"wbr\"" }, { "value": "\"webview\"" }, { "value": "\"svg\"" }, { "value": "\"animate\"" }, { "value": "\"animateMotion\"" }, { "value": "\"animateTransform\"" }, { "value": "\"circle\"" }, { "value": "\"clipPath\"" }, { "value": "\"defs\"" }, { "value": "\"desc\"" }, { "value": "\"ellipse\"" }, { "value": "\"feBlend\"" }, { "value": "\"feColorMatrix\"" }, { "value": "\"feComponentTransfer\"" }, { "value": "\"feComposite\"" }, { "value": "\"feConvolveMatrix\"" }, { "value": "\"feDiffuseLighting\"" }, { "value": "\"feDisplacementMap\"" }, { "value": "\"feDistantLight\"" }, { "value": "\"feDropShadow\"" }, { "value": "\"feFlood\"" }, { "value": "\"feFuncA\"" }, { "value": "\"feFuncB\"" }, { "value": "\"feFuncG\"" }, { "value": "\"feFuncR\"" }, { "value": "\"feGaussianBlur\"" }, { "value": "\"feImage\"" }, { "value": "\"feMerge\"" }, { "value": "\"feMergeNode\"" }, { "value": "\"feMorphology\"" }, { "value": "\"feOffset\"" }, { "value": "\"fePointLight\"" }, { "value": "\"feSpecularLighting\"" }, { "value": "\"feSpotLight\"" }, { "value": "\"feTile\"" }, { "value": "\"feTurbulence\"" }, { "value": "\"filter\"" }, { "value": "\"foreignObject\"" }, { "value": "\"g\"" }, { "value": "\"image\"" }, { "value": "\"line\"" }, { "value": "\"linearGradient\"" }, { "value": "\"marker\"" }, { "value": "\"mask\"" }, { "value": "\"metadata\"" }, { "value": "\"mpath\"" }, { "value": "\"path\"" }, { "value": "\"pattern\"" }, { "value": "\"polygon\"" }, { "value": "\"polyline\"" }, { "value": "\"radialGradient\"" }, { "value": "\"rect\"" }, { "value": "\"stop\"" }, { "value": "\"switch\"" }, { "value": "\"text\"" }, { "value": "\"textPath\"" }, { "value": "\"tspan\"" }, { "value": "\"use\"" }, { "value": "\"view\"" }, { "value": "ComponentClass", "description": "", "fullComment": "", "tags": {} }, { "value": "FunctionComponent", "description": "", "fullComment": "", "tags": {} } ] }, "tags": {} }, "description": { "name": "description", "defaultValue": null, "description": "Optional description text", "required": false, "type": { "name": "enum", "raw": "ReactNode", "value": [ { "value": "string" }, { "value": "number" }, { "value": "false" }, { "value": "true" }, { "value": "ReactElement>", "description": "", "fullComment": "", "tags": {} }, { "value": "Iterable", "description": "", "fullComment": "", "tags": {} }, { "value": "ReactPortal", "description": "", "fullComment": "", "tags": {} } ] }, "tags": {} } }, "HTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes", "AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes", "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes", "DarkModeProps": { "darkMode": { "name": "darkMode", "defaultValue": { "value": "false" }, "description": "Renders the component with dark mode styles.", "required": false, "type": { "name": "enum", "raw": "boolean", "value": [ { "value": "false" }, { "value": "true" } ] }, "tags": { "default": "false" } } }, "BaseInputOptionProps": { "disabled": { "name": "disabled", "defaultValue": { "value": "false" }, "description": "Prevents the option from being selectable.", "required": false, "type": { "name": "enum", "raw": "boolean", "value": [ { "value": "false" }, { "value": "true" } ] }, "tags": { "default": "false" } }, "highlighted": { "name": "highlighted", "defaultValue": { "value": "false" }, "description": "Defines the currently highlighted option,\nand applies the relevant highlight styles and `aria-selected` attribute\n(either )\n\nFunctionally similar to `:focus` state, however `highlight` behaviors are not always implemented with true browser focus state\n(e.g. some components maintain the browser focus on the trigger element,\nand identify the \"highlighted\" option with only the `aria-selected` attribute).\n\nNot to be confused with `checked`, which identifies the currently active/selected option.", "required": false, "type": { "name": "enum", "raw": "boolean", "value": [ { "value": "false" }, { "value": "true" } ] }, "tags": { "default": "false" } }, "checked": { "name": "checked", "defaultValue": null, "description": "Defines the currently selected/active element, regardless of interaction state.\n\nFunctionally similar to a checkbox/radio's `checked` attribute,\nthis identifies an option as currently selected.\n\nNote: There are no styling changes applied by this prop.\n`Checked` styles must be applied by the implementing component", "required": false, "type": { "name": "enum", "raw": "boolean", "value": [ { "value": "false" }, { "value": "true" } ] }, "tags": {} } } } }, { "tags": {}, "description": "", "methods": [], "displayName": "SearchResultGroup", "props": { "SearchResultGroupProps": { "label": { "name": "label", "defaultValue": null, "description": "Title for the group of options", "required": true, "type": { "name": "string" }, "tags": {} }, "children": { "name": "children", "defaultValue": null, "description": "Must be or ", "required": true, "type": { "name": "enum", "raw": "ReactNode", "value": [ { "value": "string" }, { "value": "number" }, { "value": "false" }, { "value": "true" }, { "value": "ReactElement>", "description": "", "fullComment": "", "tags": {} }, { "value": "Iterable", "description": "", "fullComment": "", "tags": {} }, { "value": "ReactPortal", "description": "", "fullComment": "", "tags": {} } ] }, "tags": {} } }, "HTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes", "AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes", "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes" } } ]