@basic-ui/core 0.0.53 → 0.0.54

package/src/ComboBox/Combobox.tsx

@@ -1,148 +1,148 @@
-import type { HTMLAttributes, ReactNode, ElementType } from 'react';
-import { forwardRef, useRef, useMemo, useId } from 'react';
-
-import type { ActionTypes } from './hooks';
-import { stateChart, comboboxReducer, isVisible, INIT } from './hooks';
-import type { ComboBoxContextProps } from './context';
-import { ComboBoxProvider } from './context';
-import { useReducerMachine } from '../hooks/useReducerMachine';
-import type { Scope } from '../hooks';
-import { getScope } from '../hooks';
-
-export type SelectEventHandler = (
-  text: string,
-  itemId: string,
-  obj: any
-) => void;
-
-export type ComboboxProps = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
-  onSelect?: SelectEventHandler;
-  openOnFocus?: boolean;
-  selectOnBlur?: boolean;
-  children?: ReactNode;
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-};
-
-export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
-  function Combobox(
-    {
-      // Called whenever the user selects an item from the list
-      onSelect,
-
-      // opens the list when the input receives focused (but only if there are
-      // items in the list)
-      openOnFocus = false,
-
-      // if set to true, it will select an item after blurring
-      selectOnBlur = false,
-
-      children,
-      as: Comp = 'div',
-      innerAs,
-      ...rest
-    }: ComboboxProps,
-    ref
-  ) {
-    // We store the values of all the ComboboxOptions on this ref. This makes it
-    // possible to perform the keyboard navigation from the input on the list. We
-    // manipulate this array through context so that we don't have to enforce a
-    // parent/child relationship between ComboboxList and ComboboxOption.
-    const optionsRef = useRef<{
-      [itemId: string]: {
-        value: string | unknown;
-        text: string;
-      };
-    }>({});
-
-    const listScope: Scope<HTMLElement> = useRef(getScope({ current: null }));
-
-    // Need this to focus it
-    const inputRef = useRef<HTMLInputElement>(null);
-
-    const popoverRef = useRef<HTMLDivElement>(null);
-
-    const buttonRef = useRef<HTMLButtonElement>(null);
-
-    // When <ComboboxInput autocomplete={false} /> we don't want cycle back to
-    // the user's value while navigating (because it's always the user's value),
-    // but we need to know this in useKeyDown which is far away from the prop
-    // here, so we do something sneaky and write it to this ref on context so we
-    // can use it anywhere else 😛. Another new trick for me and I'm excited
-    // about this one too!
-    const autocompletePropRef = useRef<boolean>(false);
-
-    const persistSelectionRef = useRef<boolean>(false);
-
-    const clearOnEscapeRef = useRef<boolean>(false);
-
-    const listboxIdRef = useRef<string | undefined>();
-
-    const labelIdRef = useRef<string | undefined>();
-
-    const defaultData = {
-      // initial state
-      state: stateChart.initial,
-      // the value the user has typed, we derived this also when the developer is
-      // controlling the value of ComboboxInput
-      text: '',
-      // the index the user has typed, we derived this also when the developer is
-      // controlling the value of ComboboxInput
-      item: '',
-      // the hash of the currently navigated item
-      navigationItem: '',
-      // the last submitted action
-      lastActionType: INIT as ActionTypes,
-    };
-
-    const [state, data, transition] = useReducerMachine(
-      stateChart,
-      comboboxReducer,
-      defaultData
-    );
-
-    listboxIdRef.current = useId();
-
-    labelIdRef.current = useId();
-
-    const context = useMemo(
-      (): ComboBoxContextProps => ({
-        data,
-        inputRef,
-        popoverRef,
-        buttonRef,
-        onSelect,
-        optionsRef,
-        listScope,
-        state,
-        transition,
-        listboxIdRef,
-        labelIdRef,
-        autocompletePropRef,
-        persistSelectionRef,
-        clearOnEscapeRef,
-        isVisible: isVisible(state),
-        openOnFocus,
-        selectOnBlur,
-      }),
-      [data, onSelect, listScope, state, transition, openOnFocus, selectOnBlur]
-    );
-
-    return (
-      <ComboBoxProvider value={context}>
-        <Comp
-          {...rest}
-          as={innerAs}
-          data-reach-combobox=""
-          ref={ref}
-          role="combobox"
-          aria-haspopup="listbox"
-          aria-owns={listboxIdRef.current}
-          aria-expanded={context.isVisible}
-        >
-          {children}
-        </Comp>
-      </ComboBoxProvider>
-    );
-  }
-);
+import type { HTMLAttributes, ReactNode, ElementType } from 'react';
+import { forwardRef, useRef, useMemo, useId } from 'react';
+
+import type { ActionTypes } from './hooks';
+import { stateChart, comboboxReducer, isVisible, INIT } from './hooks';
+import type { ComboBoxContextProps } from './context';
+import { ComboBoxProvider } from './context';
+import { useReducerMachine } from '../hooks/useReducerMachine';
+import type { Scope } from '../hooks';
+import { getScope } from '../hooks';
+
+export type SelectEventHandler = (
+  text: string,
+  itemId: string,
+  obj: any
+) => void;
+
+export type ComboboxProps = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
+  onSelect?: SelectEventHandler;
+  openOnFocus?: boolean;
+  selectOnBlur?: boolean;
+  children?: ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+};
+
+export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
+  function Combobox(
+    {
+      // Called whenever the user selects an item from the list
+      onSelect,
+
+      // opens the list when the input receives focused (but only if there are
+      // items in the list)
+      openOnFocus = false,
+
+      // if set to true, it will select an item after blurring
+      selectOnBlur = false,
+
+      children,
+      as: Comp = 'div',
+      innerAs,
+      ...rest
+    }: ComboboxProps,
+    ref
+  ) {
+    // We store the values of all the ComboboxOptions on this ref. This makes it
+    // possible to perform the keyboard navigation from the input on the list. We
+    // manipulate this array through context so that we don't have to enforce a
+    // parent/child relationship between ComboboxList and ComboboxOption.
+    const optionsRef = useRef<{
+      [itemId: string]: {
+        value: string | unknown;
+        text: string;
+      };
+    }>({});
+
+    const listScope: Scope<HTMLElement> = useRef(getScope({ current: null }));
+
+    // Need this to focus it
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const popoverRef = useRef<HTMLDivElement>(null);
+
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    // When <ComboboxInput autocomplete={false} /> we don't want cycle back to
+    // the user's value while navigating (because it's always the user's value),
+    // but we need to know this in useKeyDown which is far away from the prop
+    // here, so we do something sneaky and write it to this ref on context so we
+    // can use it anywhere else 😛. Another new trick for me and I'm excited
+    // about this one too!
+    const autocompletePropRef = useRef<boolean>(false);
+
+    const persistSelectionRef = useRef<boolean>(false);
+
+    const clearOnEscapeRef = useRef<boolean>(false);
+
+    const listboxIdRef = useRef<string | undefined>();
+
+    const labelIdRef = useRef<string | undefined>();
+
+    const defaultData = {
+      // initial state
+      state: stateChart.initial,
+      // the value the user has typed, we derived this also when the developer is
+      // controlling the value of ComboboxInput
+      text: '',
+      // the index the user has typed, we derived this also when the developer is
+      // controlling the value of ComboboxInput
+      item: '',
+      // the hash of the currently navigated item
+      navigationItem: '',
+      // the last submitted action
+      lastActionType: INIT as ActionTypes,
+    };
+
+    const [state, data, transition] = useReducerMachine(
+      stateChart,
+      comboboxReducer,
+      defaultData
+    );
+
+    listboxIdRef.current = useId();
+
+    labelIdRef.current = useId();
+
+    const context = useMemo(
+      (): ComboBoxContextProps => ({
+        data,
+        inputRef,
+        popoverRef,
+        buttonRef,
+        onSelect,
+        optionsRef,
+        listScope,
+        state,
+        transition,
+        listboxIdRef,
+        labelIdRef,
+        autocompletePropRef,
+        persistSelectionRef,
+        clearOnEscapeRef,
+        isVisible: isVisible(state),
+        openOnFocus,
+        selectOnBlur,
+      }),
+      [data, onSelect, listScope, state, transition, openOnFocus, selectOnBlur]
+    );
+
+    return (
+      <ComboBoxProvider value={context}>
+        <Comp
+          {...rest}
+          as={innerAs}
+          data-reach-combobox=""
+          ref={ref}
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-owns={listboxIdRef.current}
+          aria-expanded={context.isVisible}
+        >
+          {children}
+        </Comp>
+      </ComboBoxProvider>
+    );
+  }
+);

package/src/ComboBox/ComboboxButton.tsx

@@ -1,61 +1,61 @@
-import type {
-  ButtonHTMLAttributes,
-  ElementType,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  ReactNode,
-} from 'react';
-import { forwardRef } from 'react';
-
-import { useComboBoxContext } from './context';
-import { useKeyDown, IDLE, OPEN_WITH_BUTTON, CLOSE_WITH_BUTTON } from './hooks';
-import { wrapEvent } from '../utils/wrap-event';
-import { assignMultipleRefs } from '../utils/assign-ref';
-
-export interface ComboboxButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
-  children?: ReactNode;
-}
-
-export const ComboboxButton = forwardRef<
-  HTMLButtonElement,
-  ComboboxButtonProps
->(function ComboboxButton(
-  { as: Comp = 'button', innerAs, onClick, onKeyDown, ...props },
-  ref
-) {
-  const { transition, data, state, buttonRef, listboxIdRef, isVisible } =
-    useComboBoxContext();
-
-  const handleKeyDown = useKeyDown();
-
-  const handleClick = () => {
-    const payload = {
-      item: data.navigationItem,
-    };
-
-    if (state === IDLE) {
-      transition(OPEN_WITH_BUTTON, payload);
-    } else {
-      transition(CLOSE_WITH_BUTTON, payload);
-    }
-  };
-
-  return (
-    <Comp
-      as={innerAs}
-      data-reach-combobox-button=""
-      aria-controls={listboxIdRef.current}
-      aria-haspopup="listbox"
-      aria-expanded={isVisible}
-      ref={assignMultipleRefs(ref, buttonRef)}
-      onClick={wrapEvent(onClick, handleClick)}
-      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
-      {...props}
-    />
-  );
-});
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactNode,
+} from 'react';
+import { forwardRef } from 'react';
+
+import { useComboBoxContext } from './context';
+import { useKeyDown, IDLE, OPEN_WITH_BUTTON, CLOSE_WITH_BUTTON } from './hooks';
+import { wrapEvent } from '../utils/wrap-event';
+import { assignMultipleRefs } from '../utils/assign-ref';
+
+export interface ComboboxButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+  children?: ReactNode;
+}
+
+export const ComboboxButton = forwardRef<
+  HTMLButtonElement,
+  ComboboxButtonProps
+>(function ComboboxButton(
+  { as: Comp = 'button', innerAs, onClick, onKeyDown, ...props },
+  ref
+) {
+  const { transition, data, state, buttonRef, listboxIdRef, isVisible } =
+    useComboBoxContext();
+
+  const handleKeyDown = useKeyDown();
+
+  const handleClick = () => {
+    const payload = {
+      item: data.navigationItem,
+    };
+
+    if (state === IDLE) {
+      transition(OPEN_WITH_BUTTON, payload);
+    } else {
+      transition(CLOSE_WITH_BUTTON, payload);
+    }
+  };
+
+  return (
+    <Comp
+      as={innerAs}
+      data-reach-combobox-button=""
+      aria-controls={listboxIdRef.current}
+      aria-haspopup="listbox"
+      aria-expanded={isVisible}
+      ref={assignMultipleRefs(ref, buttonRef)}
+      onClick={wrapEvent(onClick, handleClick)}
+      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+      {...props}
+    />
+  );
+});