feat: rename getters (#362)

Author: francoischalifour

packages/autocomplete-core/src/createAutocomplete.ts

@@ -31,8 +31,8 @@ export function createAutocomplete<
     getFormProps,
     getLabelProps,
     getInputProps,
-    getDropdownProps,
-    getMenuProps,
+    getPanelProps,
+    getListProps,
     getItemProps,
   } = getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
     store,
@@ -77,8 +77,8 @@ export function createAutocomplete<
     getFormProps,
     getInputProps,
     getLabelProps,
-    getDropdownProps,
-    getMenuProps,
+    getPanelProps,
+    getListProps,
     getItemProps,
     refresh,
   };

packages/autocomplete-core/src/getDefaultProps.ts

@@ -25,7 +25,7 @@ export function getDefaultProps<TItem>(
     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.

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<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
   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<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
 
         const isTargetWithinAutocomplete = [
           getterProps.searchBoxElement,
-          getterProps.dropdownElement,
+          getterProps.panelElement,
         ].some((contextNode) => {
           return (
             contextNode &&
@@ -69,7 +69,7 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
       // 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<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
       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<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
   ) => {
     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<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
         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<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
         }
       },
       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<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
     };
   };
 
-  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<TMouseEvent> = (rest) => {
+  const getPanelProps: GetPanelProps<TMouseEvent> = (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<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
     getFormProps,
     getLabelProps,
     getInputProps,
-    getDropdownProps,
-    getMenuProps,
+    getPanelProps,
+    getListProps,
     getItemProps,
   };
 }

packages/autocomplete-core/src/onInput.ts

@@ -19,7 +19,7 @@ interface OnInputParams<TItem> extends AutocompleteSetters<TItem> {
    *
    * 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<AutocompleteState<TItem>>;
   refresh: AutocompleteRefresh;
@@ -71,7 +71,7 @@ export function onInput<TItem>({
       }))
     );
     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<TItem>({
           setIsOpen(
             nextState.isOpen ??
               ((query.length === 0 && props.openOnFocus) ||
-                props.shouldDropdownShow({ state: store.getState() }))
+                props.shouldPanelShow({ state: store.getState() }))
           );
 
           const highlightedItem = getSelectedItem({

packages/autocomplete-core/src/onKeyDown.ts

@@ -70,7 +70,7 @@ export function onKeyDown<TItem>({
   } 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);

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: '',
       };

packages/autocomplete-core/src/types/api.ts

@@ -163,7 +163,7 @@ export interface AutocompleteOptions<TItem> {
    * 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<TItem> {
    */
   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<TItem> {
    */
   navigator?: Partial<Navigator<TItem>>;
   /**
-   * The function called to determine whether the dropdown should open.
+   * The function called to determine whether the panel should open.
    */
-  shouldDropdownShow?(params: { state: AutocompleteState<TItem> }): boolean;
+  shouldPanelShow?(params: { state: AutocompleteState<TItem> }): boolean;
   /**
    * The function called when the autocomplete form is submitted.
    */
@@ -272,7 +272,7 @@ export interface InternalAutocompleteOptions<TItem>
   environment: Environment;
   navigator: Navigator<TItem>;
   plugins: Array<AutocompletePlugin<TItem, unknown>>;
-  shouldDropdownShow(params: { state: AutocompleteState<TItem> }): boolean;
+  shouldPanelShow(params: { state: AutocompleteState<TItem> }): boolean;
   onSubmit(params: OnSubmitParams<TItem>): void;
   onInput?(params: OnInputParams<TItem>): void | Promise<any>;
 }

packages/autocomplete-core/src/types/getters.ts

@@ -11,15 +11,15 @@ export interface AutocompleteAccessibilityGetters<
   getFormProps: GetFormProps<TEvent>;
   getLabelProps: GetLabelProps;
   getInputProps: GetInputProps<TEvent, TMouseEvent, TKeyboardEvent>;
-  getDropdownProps: GetDropdownProps<TMouseEvent>;
-  getMenuProps: GetMenuProps;
+  getPanelProps: GetPanelProps<TMouseEvent>;
+  getListProps: GetListProps;
   getItemProps: GetItemProps<TItem, TMouseEvent>;
 }
 
 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<TEvent, TMouseEvent, TKeyboardEvent> = (props: {
   onClick(event: TMouseEvent): void;
 };
 
-export type GetDropdownProps<TMouseEvent> = (props?: {
+export type GetPanelProps<TMouseEvent> = (props?: {
   [key: string]: unknown;
 }) => {
   onMouseDown(event: TMouseEvent): void;
   onMouseLeave(): void;
 };
 
-export type GetMenuProps = (props?: {
+export type GetListProps = (props?: {
   [key: string]: unknown;
 }) => {
   role: string;

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<TItem>({
   container,
-  render: renderDropdown = defaultRender,
-  dropdownPlacement = 'input-wrapper-width',
+  render: renderPanel = defaultRender,
+  panelPlacement = 'input-wrapper-width',
   classNames = {},
   ...props
 }: AutocompleteOptions<TItem>): AutocompleteApi<TItem> {
@@ -52,14 +52,14 @@ export function autocomplete<TItem>({
 
   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<TItem>({
   setProperties(window as any, {
     ...autocomplete.getEnvironmentProps({
       searchBoxElement: form,
-      dropdownElement: panel,
+      panelElement: panel,
       inputElement: input,
     }),
     onResize,
@@ -103,7 +103,7 @@ export function autocomplete<TItem>({
     innerHTML: resetIcon,
   });
   setProperties(panel, {
-    ...autocomplete.getDropdownProps(),
+    ...autocomplete.getPanelProps(),
     hidden: true,
     class: concatClassNames(['aa-Panel', classNames.panel]),
   });
@@ -156,13 +156,13 @@ export function autocomplete<TItem>({
       }
 
       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<TItem>({
           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<TItem>({
       return section;
     });
 
-    renderDropdown({ root: panel, sections, state });
+    renderPanel({ root: panel, sections, state });
   }
 
   inputWrapper.appendChild(input);
@@ -206,7 +206,7 @@ export function autocomplete<TItem>({
   root.appendChild(panel);
   containerElement.appendChild(root);
 
-  setDropdownPosition();
+  setPanelPosition();
 
   function destroy() {
     containerElement.innerHTML = '';