From b7e86d551aa29f8c372b2f560f3a9dc3c44548ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Mon, 9 Nov 2020 14:05:18 +0100 Subject: [PATCH] feat: rename getters (#362) --- .../src/createAutocomplete.ts | 8 ++--- .../autocomplete-core/src/getDefaultProps.ts | 2 +- .../autocomplete-core/src/getPropGetters.ts | 36 +++++++++---------- packages/autocomplete-core/src/onInput.ts | 6 ++-- packages/autocomplete-core/src/onKeyDown.ts | 2 +- .../autocomplete-core/src/stateReducer.ts | 6 ++-- packages/autocomplete-core/src/types/api.ts | 10 +++--- .../autocomplete-core/src/types/getters.ts | 10 +++--- packages/autocomplete-js/src/autocomplete.ts | 36 +++++++++---------- ...itionStyle.ts => getPanelPositionStyle.ts} | 8 ++--- packages/autocomplete-js/src/types/index.ts | 6 ++-- packages/website/docs/autocomplete-js.md | 4 +-- packages/website/docs/createAutocomplete.md | 2 +- packages/website/docs/creating-a-renderer.md | 28 +++++++-------- .../docs/partials/createAutocomplete-props.md | 8 ++--- packages/website/docs/prop-getters.md | 10 +++--- packages/website/docs/state.md | 4 +-- 17 files changed, 93 insertions(+), 93 deletions(-) rename packages/autocomplete-js/src/{getDropdownPositionStyle.ts => getPanelPositionStyle.ts} (89%) diff --git a/packages/autocomplete-core/src/createAutocomplete.ts b/packages/autocomplete-core/src/createAutocomplete.ts index 4414a2a1c..99a3c1b83 100644 --- a/packages/autocomplete-core/src/createAutocomplete.ts +++ b/packages/autocomplete-core/src/createAutocomplete.ts @@ -31,8 +31,8 @@ export function createAutocomplete< getFormProps, getLabelProps, getInputProps, - getDropdownProps, - getMenuProps, + getPanelProps, + getListProps, getItemProps, } = getPropGetters({ store, @@ -77,8 +77,8 @@ export function createAutocomplete< getFormProps, getInputProps, getLabelProps, - getDropdownProps, - getMenuProps, + getPanelProps, + getListProps, getItemProps, refresh, }; diff --git a/packages/autocomplete-core/src/getDefaultProps.ts b/packages/autocomplete-core/src/getDefaultProps.ts index 928056f19..3b90970fb 100644 --- a/packages/autocomplete-core/src/getDefaultProps.ts +++ b/packages/autocomplete-core/src/getDefaultProps.ts @@ -25,7 +25,7 @@ export function getDefaultProps( defaultSelectedItemId: null, stallThreshold: 300, environment, - shouldDropdownShow: ({ state }) => getItemsCount(state) > 0, + shouldPanelShow: ({ state }) => getItemsCount(state) > 0, ...props, // Since `generateAutocompleteId` triggers a side effect (it increments // and internal counter), we don't want to execute it if unnecessary. diff --git a/packages/autocomplete-core/src/getPropGetters.ts b/packages/autocomplete-core/src/getPropGetters.ts index 7f006068e..3e17743df 100644 --- a/packages/autocomplete-core/src/getPropGetters.ts +++ b/packages/autocomplete-core/src/getPropGetters.ts @@ -5,13 +5,13 @@ import { AutocompleteSetters, AutocompleteStore, AutocompleteRefresh, - GetDropdownProps, + GetPanelProps, GetEnvironmentProps, GetFormProps, GetInputProps, GetItemProps, GetLabelProps, - GetMenuProps, + GetListProps, GetRootProps, } from './types'; import { getSelectedItem, isOrContainsNode } from './utils'; @@ -36,7 +36,7 @@ export function getPropGetters({ const getEnvironmentProps: GetEnvironmentProps = (getterProps) => { return { // On touch devices, we do not rely on the native `blur` event of the - // input to close the dropdown, but rather on a custom `touchstart` event + // input to close the panel, but rather on a custom `touchstart` event // outside of the autocomplete elements. // This ensures a working experience on mobile because we blur the input // on touch devices when the user starts scrolling (`touchmove`). @@ -50,7 +50,7 @@ export function getPropGetters({ const isTargetWithinAutocomplete = [ getterProps.searchBoxElement, - getterProps.dropdownElement, + getterProps.panelElement, ].some((contextNode) => { return ( contextNode && @@ -69,7 +69,7 @@ export function getPropGetters({ // When scrolling on touch devices (mobiles, tablets, etc.), we want to // mimic the native platform behavior where the input is blurred to // hide the virtual keyboard. This gives more vertical space to - // discover all the suggestions showing up in the dropdown. + // discover all the suggestions showing up in the panel. onTouchMove(event: TouchEvent) { if ( store.getState().isOpen === false || @@ -90,7 +90,7 @@ export function getPropGetters({ role: 'combobox', 'aria-expanded': store.getState().isOpen, 'aria-haspopup': 'listbox', - 'aria-owns': store.getState().isOpen ? `${props.id}-menu` : undefined, + 'aria-owns': store.getState().isOpen ? `${props.id}-list` : undefined, 'aria-labelledby': `${props.id}-label`, ...rest, }; @@ -156,7 +156,7 @@ export function getPropGetters({ ) => { function onFocus(event: TEvent) { // We want to trigger a query when `openOnFocus` is true - // because the dropdown should open with the current query. + // because the panel should open with the current query. if (props.openOnFocus || store.getState().query.length > 0) { onInput({ query: store.getState().completion || store.getState().query, @@ -185,7 +185,7 @@ export function getPropGetters({ store.getState().isOpen && store.getState().selectedItemId !== null ? `${props.id}-item-${store.getState().selectedItemId}` : undefined, - 'aria-controls': store.getState().isOpen ? `${props.id}-menu` : undefined, + 'aria-controls': store.getState().isOpen ? `${props.id}-list` : undefined, 'aria-labelledby': `${props.id}-label`, value: store.getState().completion || store.getState().query, id: `${props.id}-input`, @@ -236,13 +236,13 @@ export function getPropGetters({ } }, onClick: (event) => { - // When the dropdown is closed and you click on the input while + // When the panel is closed and you click on the input while // the input is focused, the `onFocus` event is not triggered // (default browser behavior). - // In an autocomplete context, it makes sense to open the menu in this + // In an autocomplete context, it makes sense to open the panel in this // case. // We mimic this event by catching the `onClick` event which - // triggers the `onFocus` for the dropdown to open. + // triggers the `onFocus` for the panel to open. if ( providedProps.inputElement === props.environment.document.activeElement && @@ -263,21 +263,21 @@ export function getPropGetters({ }; }; - const getMenuProps: GetMenuProps = (rest) => { + const getListProps: GetListProps = (rest) => { return { role: 'listbox', 'aria-labelledby': `${props.id}-label`, - id: `${props.id}-menu`, + id: `${props.id}-list`, ...rest, }; }; - const getDropdownProps: GetDropdownProps = (rest) => { + const getPanelProps: GetPanelProps = (rest) => { return { onMouseDown(event) { - // Prevents the `activeElement` from being changed to the dropdown so + // Prevents the `activeElement` from being changed to the panel so // that the blur event is not triggered, otherwise it closes the - // dropdown. + // panel. ((event as unknown) as MouseEvent).preventDefault(); }, onMouseLeave() { @@ -391,8 +391,8 @@ export function getPropGetters({ getFormProps, getLabelProps, getInputProps, - getDropdownProps, - getMenuProps, + getPanelProps, + getListProps, getItemProps, }; } diff --git a/packages/autocomplete-core/src/onInput.ts b/packages/autocomplete-core/src/onInput.ts index 7f09c0b2d..a829243fa 100644 --- a/packages/autocomplete-core/src/onInput.ts +++ b/packages/autocomplete-core/src/onInput.ts @@ -19,7 +19,7 @@ interface OnInputParams extends AutocompleteSetters { * * This is useful when we call `onInput` in a different scenario than an * actual input. For example, we use `onInput` when we click on an item, - * but we want to close the dropdown in that case. + * but we want to close the panel in that case. */ nextState?: Partial>; refresh: AutocompleteRefresh; @@ -71,7 +71,7 @@ export function onInput({ })) ); setIsOpen( - nextState.isOpen ?? props.shouldDropdownShow({ state: store.getState() }) + nextState.isOpen ?? props.shouldPanelShow({ state: store.getState() }) ); return Promise.resolve(); @@ -127,7 +127,7 @@ export function onInput({ setIsOpen( nextState.isOpen ?? ((query.length === 0 && props.openOnFocus) || - props.shouldDropdownShow({ state: store.getState() })) + props.shouldPanelShow({ state: store.getState() })) ); const highlightedItem = getSelectedItem({ diff --git a/packages/autocomplete-core/src/onKeyDown.ts b/packages/autocomplete-core/src/onKeyDown.ts index 98653c026..46122d713 100644 --- a/packages/autocomplete-core/src/onKeyDown.ts +++ b/packages/autocomplete-core/src/onKeyDown.ts @@ -70,7 +70,7 @@ export function onKeyDown({ } else if (event.key === 'Escape') { // This prevents the default browser behavior on `input[type="search"]` // to remove the query right away because we first want to close the - // dropdown. + // panel. event.preventDefault(); store.send(event.key, null); diff --git a/packages/autocomplete-core/src/stateReducer.ts b/packages/autocomplete-core/src/stateReducer.ts index d9d2cdfc7..1c9a101d2 100644 --- a/packages/autocomplete-core/src/stateReducer.ts +++ b/packages/autocomplete-core/src/stateReducer.ts @@ -114,15 +114,15 @@ export const stateReducer: Reducer = (state, action) => { return { ...state, selectedItemId: - // Since we open the menu on reset when openOnFocus=true + // Since we open the panel on reset when openOnFocus=true // we need to restore the highlighted index to the defaultSelectedItemId. (DocSearch use-case) - // Since we close the menu when openOnFocus=false + // Since we close the panel when openOnFocus=false // we lose track of the highlighted index. (Query-suggestions use-case) action.props.openOnFocus === true ? action.props.defaultSelectedItemId : null, - isOpen: action.props.openOnFocus, // @TODO: Check with UX team if we want to close the menu on reset. + isOpen: action.props.openOnFocus, // @TODO: Check with UX team if we want to close the panel on reset. status: 'idle', query: '', }; diff --git a/packages/autocomplete-core/src/types/api.ts b/packages/autocomplete-core/src/types/api.ts index 37883a94c..1027b4a3c 100644 --- a/packages/autocomplete-core/src/types/api.ts +++ b/packages/autocomplete-core/src/types/api.ts @@ -163,7 +163,7 @@ export interface AutocompleteOptions { * Whether to consider the experience in debug mode. * * The debug mode is useful when developing because it doesn't close - * the dropdown when the blur event occurs. + * the panel when the blur event occurs. * * @default false */ @@ -198,7 +198,7 @@ export interface AutocompleteOptions { */ defaultSelectedItemId?: number | null; /** - * Whether to open the dropdown on focus when there's no query. + * Whether to open the panel on focus when there's no query. * * @default false */ @@ -233,9 +233,9 @@ export interface AutocompleteOptions { */ navigator?: Partial>; /** - * The function called to determine whether the dropdown should open. + * The function called to determine whether the panel should open. */ - shouldDropdownShow?(params: { state: AutocompleteState }): boolean; + shouldPanelShow?(params: { state: AutocompleteState }): boolean; /** * The function called when the autocomplete form is submitted. */ @@ -272,7 +272,7 @@ export interface InternalAutocompleteOptions environment: Environment; navigator: Navigator; plugins: Array>; - shouldDropdownShow(params: { state: AutocompleteState }): boolean; + shouldPanelShow(params: { state: AutocompleteState }): boolean; onSubmit(params: OnSubmitParams): void; onInput?(params: OnInputParams): void | Promise; } diff --git a/packages/autocomplete-core/src/types/getters.ts b/packages/autocomplete-core/src/types/getters.ts index 5003bd658..f03405dc9 100644 --- a/packages/autocomplete-core/src/types/getters.ts +++ b/packages/autocomplete-core/src/types/getters.ts @@ -11,15 +11,15 @@ export interface AutocompleteAccessibilityGetters< getFormProps: GetFormProps; getLabelProps: GetLabelProps; getInputProps: GetInputProps; - getDropdownProps: GetDropdownProps; - getMenuProps: GetMenuProps; + getPanelProps: GetPanelProps; + getListProps: GetListProps; getItemProps: GetItemProps; } export type GetEnvironmentProps = (props: { [key: string]: unknown; searchBoxElement: HTMLElement; - dropdownElement: HTMLElement; + panelElement: HTMLElement; inputElement: HTMLInputElement; }) => { onTouchStart(event: TouchEvent): void; @@ -89,14 +89,14 @@ export type GetInputProps = (props: { onClick(event: TMouseEvent): void; }; -export type GetDropdownProps = (props?: { +export type GetPanelProps = (props?: { [key: string]: unknown; }) => { onMouseDown(event: TMouseEvent): void; onMouseLeave(): void; }; -export type GetMenuProps = (props?: { +export type GetListProps = (props?: { [key: string]: unknown; }) => { role: string; diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts index e186786f2..24db00422 100644 --- a/packages/autocomplete-js/src/autocomplete.ts +++ b/packages/autocomplete-js/src/autocomplete.ts @@ -5,8 +5,8 @@ import { import { concatClassNames } from './concatClassNames'; import { debounce } from './debounce'; -import { getDropdownPositionStyle } from './getDropdownPositionStyle'; import { getHTMLElement } from './getHTMLElement'; +import { getPanelPositionStyle } from './getPanelPositionStyle'; import { resetIcon, searchIcon } from './icons'; import { renderTemplate } from './renderTemplate'; import { setProperties, setPropertiesWithoutEvents } from './setProperties'; @@ -24,8 +24,8 @@ function defaultRender({ root, sections }) { export function autocomplete({ container, - render: renderDropdown = defaultRender, - dropdownPlacement = 'input-wrapper-width', + render: renderPanel = defaultRender, + panelPlacement = 'input-wrapper-width', classNames = {}, ...props }: AutocompleteOptions): AutocompleteApi { @@ -52,14 +52,14 @@ export function autocomplete({ const onResize = debounce(() => { if (!panel.hasAttribute('hidden')) { - setDropdownPosition(); + setPanelPosition(); } }, 100); - function setDropdownPosition() { + function setPanelPosition() { setProperties(panel, { - style: getDropdownPositionStyle({ - dropdownPlacement, + style: getPanelPositionStyle({ + panelPlacement, container: root, inputWrapper, environment: props.environment, @@ -70,7 +70,7 @@ export function autocomplete({ setProperties(window as any, { ...autocomplete.getEnvironmentProps({ searchBoxElement: form, - dropdownElement: panel, + panelElement: panel, inputElement: input, }), onResize, @@ -103,7 +103,7 @@ export function autocomplete({ innerHTML: resetIcon, }); setProperties(panel, { - ...autocomplete.getDropdownProps(), + ...autocomplete.getPanelProps(), hidden: true, class: concatClassNames(['aa-Panel', classNames.panel]), }); @@ -156,13 +156,13 @@ export function autocomplete({ } if (items.length > 0) { - const menu = document.createElement('ul'); - setProperties(menu, { - ...autocomplete.getMenuProps(), + const list = document.createElement('ul'); + setProperties(list, { + ...autocomplete.getListProps(), class: concatClassNames(['aa-List', classNames.list]), }); - const menuItems = items.map((item) => { + const listItems = items.map((item) => { const li = document.createElement('li'); setProperties(li, { ...autocomplete.getItemProps({ item, source }), @@ -173,11 +173,11 @@ export function autocomplete({ return li; }); - for (const menuItem of menuItems) { - menu.appendChild(menuItem); + for (const listItem of listItems) { + list.appendChild(listItem); } - section.appendChild(menu); + section.appendChild(list); } if (source.templates.footer) { @@ -195,7 +195,7 @@ export function autocomplete({ return section; }); - renderDropdown({ root: panel, sections, state }); + renderPanel({ root: panel, sections, state }); } inputWrapper.appendChild(input); @@ -206,7 +206,7 @@ export function autocomplete({ root.appendChild(panel); containerElement.appendChild(root); - setDropdownPosition(); + setPanelPosition(); function destroy() { containerElement.innerHTML = ''; diff --git a/packages/autocomplete-js/src/getDropdownPositionStyle.ts b/packages/autocomplete-js/src/getPanelPositionStyle.ts similarity index 89% rename from packages/autocomplete-js/src/getDropdownPositionStyle.ts rename to packages/autocomplete-js/src/getPanelPositionStyle.ts index d6c503bb5..35c705205 100644 --- a/packages/autocomplete-js/src/getDropdownPositionStyle.ts +++ b/packages/autocomplete-js/src/getPanelPositionStyle.ts @@ -1,7 +1,7 @@ import { AutocompleteOptions } from './types'; -export function getDropdownPositionStyle({ - dropdownPlacement, +export function getPanelPositionStyle({ + panelPlacement, container, inputWrapper, environment = window, @@ -12,7 +12,7 @@ export function getDropdownPositionStyle({ const containerRect = container.getBoundingClientRect(); const top = containerRect.top + containerRect.height; - switch (dropdownPlacement) { + switch (panelPlacement) { case 'start': { return { top, @@ -59,7 +59,7 @@ export function getDropdownPositionStyle({ default: { throw new Error( - `The \`dropdownPlacement\` value "${dropdownPlacement}" is not valid.` + `The \`panelPlacement\` value "${panelPlacement}" is not valid.` ); } } diff --git a/packages/autocomplete-js/src/types/index.ts b/packages/autocomplete-js/src/types/index.ts index 2c9709ab2..bdcf6d6f4 100644 --- a/packages/autocomplete-js/src/types/index.ts +++ b/packages/autocomplete-js/src/types/index.ts @@ -12,7 +12,7 @@ type Template = (params: TParams) => string | void; export type SourceTemplates = { /** - * Templates to display in the autocomplete dropdown. + * Templates to display in the autocomplete panel. * * A template can either return a string, or perform DOM mutations (manipulating DOM elements with JavaScript and attaching events) without returning a string. */ @@ -64,11 +64,11 @@ export interface AutocompleteOptions container: string | HTMLElement; getSources: GetSources; /** - * The dropdown horizontal position. + * The panel horizontal position. * * @default "input-wrapper-width" */ - dropdownPlacement?: 'start' | 'end' | 'full-width' | 'input-wrapper-width'; + panelPlacement?: 'start' | 'end' | 'full-width' | 'input-wrapper-width'; /** * The class names to inject in each created DOM element. * diff --git a/packages/website/docs/autocomplete-js.md b/packages/website/docs/autocomplete-js.md index 3e2b77cff..5ead80a5b 100644 --- a/packages/website/docs/autocomplete-js.md +++ b/packages/website/docs/autocomplete-js.md @@ -69,11 +69,11 @@ import CreateAutocompleteProps from './partials/createAutocomplete-props.md' -### `dropdownPlacement` +### `panelPlacement` > `"start" | "end" | "full-width" | "input-wrapper-width" | defaults to `"input-wrapper-width"` -The dropdown horizontal position. +The panel horizontal position. ### `classNames` diff --git a/packages/website/docs/createAutocomplete.md b/packages/website/docs/createAutocomplete.md index 57af7d793..8b3eabb6a 100644 --- a/packages/website/docs/createAutocomplete.md +++ b/packages/website/docs/createAutocomplete.md @@ -59,7 +59,7 @@ const { getInputProps, getItemProps, getLabelProps, - getMenuProps, + getListProps, setSelectedItemId, setQuery, setCollections, diff --git a/packages/website/docs/creating-a-renderer.md b/packages/website/docs/creating-a-renderer.md index f304365cc..b24a6a30b 100644 --- a/packages/website/docs/creating-a-renderer.md +++ b/packages/website/docs/creating-a-renderer.md @@ -88,7 +88,7 @@ function Autocomplete() { return (
-
+
{autocompleteState.isOpen && autocompleteState.collections.map((collection, index) => { const { source, items } = collection; @@ -99,7 +99,7 @@ function Autocomplete() { className="algolia-autocomplete-suggestions" > {items.length > 0 && ( -
    +
      {items.map((item, index) => { return (
    • {/* ... */}
@@ -248,7 +248,7 @@ function Autocomplete() { } ``` -You could for example create a `.autocomplete-dropdown--stalled` CSS class that lowers the opacity to hint users that the search is currently stuck. +You could for example create a `.autocomplete-panel--stalled` CSS class that lowers the opacity to hint users that the search is currently stuck. ![Image](https://user-images.githubusercontent.com/6137112/83759558-034cbf80-a674-11ea-86ca-6728b4c2d6f7.png) @@ -268,18 +268,18 @@ function Autocomplete() { const inputRef = React.useRef(null); const searchBoxRef = React.useRef(null); - const dropdownRef = React.useRef(null); + const panelRef = React.useRef(null); const { getEnvironmentProps } = autocomplete; React.useEffect(() => { - if (!(searchBoxRef.current && dropdownRef.current && inputRef.current)) { + if (!(searchBoxRef.current && panelRef.current && inputRef.current)) { return; } const { onTouchStart, onTouchMove } = getEnvironmentProps({ searchBoxElement: searchBoxRef.current, - dropdownElement: dropdownRef.current, + panelElement: panelRef.current, inputElement: inputRef.current, }); @@ -290,7 +290,7 @@ function Autocomplete() { window.removeEventListener('touchstart', onTouchStart); window.removeEventListener('touchmove', onTouchMove); }; - }, [getEnvironmentProps, searchBoxRef, dropdownRef, inputRef]); + }, [getEnvironmentProps, searchBoxRef, panelRef, inputRef]); return (
@@ -308,15 +308,15 @@ function Autocomplete() { {autocompleteState.isOpen && (
{/* ... */}
diff --git a/packages/website/docs/partials/createAutocomplete-props.md b/packages/website/docs/partials/createAutocomplete-props.md index 5234819f0..662ddad41 100644 --- a/packages/website/docs/partials/createAutocomplete-props.md +++ b/packages/website/docs/partials/createAutocomplete-props.md @@ -40,7 +40,7 @@ We recommend using `0` when the query typed aims at opening suggestion links, wi > `boolean` | defaults to `false` -Whether to open the dropdown on focus when there's no query. +Whether to open the panel on focus when there's no query. ### `stallThreshold` @@ -70,11 +70,11 @@ Navigator API to redirect the user when a link should be opened. Learn more on the [Navigator API](/docs/keyboard-navigation) documentation. -### `shouldDropdownShow` +### `shouldPanelShow` > `(params: { state: AutocompleteState }) => boolean` -The function called to determine whether the dropdown should open. +The function called to determine whether the panel should open. By default, it opens when there are items in the state. @@ -96,4 +96,4 @@ This turns the experience in controlled mode, leaving you in charge of updating > `boolean` | defaults to `false` -Whether to consider the experience in debug mode. It is useful when developing because it doesn't close the dropdown when the blur event occurs. +Whether to consider the experience in debug mode. It is useful when developing because it doesn't close the panel when the blur event occurs. diff --git a/packages/website/docs/prop-getters.md b/packages/website/docs/prop-getters.md index 641e283ed..b7149afcf 100644 --- a/packages/website/docs/prop-getters.md +++ b/packages/website/docs/prop-getters.md @@ -11,13 +11,13 @@ The prop getters are functions that returns the data to create accessible and in Returns the props to attach to the [environment](#environment). -You need to pass `searchBoxElement`, `dropdownElement` and `inputElement` so that the library creates the correct touch events for touch devices. +You need to pass `searchBoxElement`, `panelElement` and `inputElement` so that the library creates the correct touch events for touch devices. ```ts type GetEnvironmentProps = (props: { [key: string]: unknown; searchBoxElement: HTMLElement; - dropdownElement: HTMLElement; + panelElement: HTMLElement; inputElement: HTMLInputElement; }) => { onTouchStart(event: TouchEvent): void; @@ -122,12 +122,12 @@ type GetLabelProps = (props?: { }; ``` -## `getMenuProps` +## `getListProps` -Returns the props to attach to the menu. +Returns the props to attach to the list. ```ts -type GetMenuProps = (props?: { +type GetListProps = (props?: { [key: string]: unknown; }) => { role: string; diff --git a/packages/website/docs/state.md b/packages/website/docs/state.md index 68c8723f8..69af85fa6 100644 --- a/packages/website/docs/state.md +++ b/packages/website/docs/state.md @@ -63,7 +63,7 @@ The completion of the input. > `boolean` | defaults to `false` -Whether the dropdown is opened. +Whether the panel is opened. ### `collections` @@ -103,7 +103,7 @@ Sets the query. > `(value: boolean) => void` -Sets the open state of the dropdown. +Sets the open state of the panel. ### `setStatus`