@basic-ui/core 0.0.54 → 0.0.57

package/src/ComboBox/ComboboxInput.tsx

@@ -1,187 +1,187 @@
-import type {
-  ChangeEvent,
-  ChangeEventHandler,
-  ElementType,
-  FocusEventHandler,
-  InputHTMLAttributes,
-  KeyboardEventHandler,
-  MouseEventHandler,
-} from 'react';
-import { forwardRef, useEffect, useRef } from 'react';
-
-import {
-  useBlur,
-  CLEAR,
-  CHANGE,
-  useKeyDown,
-  SELECT_WITH_CLICK,
-  FOCUS,
-  NAVIGATING,
-  INIT,
-  useFocusManagement,
-} from './hooks';
-import { assignMultipleRefs, wrapEvent } from '../utils';
-import { useComboBoxContext } from './context';
-
-export interface ComboboxInputProps
-  extends InputHTMLAttributes<HTMLInputElement> {
-  // clear on ESC
-  clearOnEscape?: boolean;
-  // highlights all the text in the box on click when true
-  selectOnClick?: boolean;
-  // updates the value in the input when navigating w/ the keyboard
-  autocomplete?: boolean;
-  // initial value for uncontrolled mode
-  defaultValue?: string;
-  // value for controlled mode
-  value?: string;
-  onClick?: MouseEventHandler<HTMLInputElement>;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  id?: string;
-}
-
-export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
-  function ComboboxInput(
-    {
-      as: Comp = 'input',
-      innerAs,
-      selectOnClick = false,
-      autocomplete = true,
-      clearOnEscape = false,
-
-      // wrapped events
-      onClick,
-      onChange,
-      onKeyDown,
-      onBlur,
-      onFocus,
-
-      id: preferredId,
-
-      defaultValue = '',
-
-      // might be controlled
-      value: controlledValue,
-      ...props
-    },
-    forwardedRef
-  ) {
-    const {
-      data: { navigationItem, text, lastActionType },
-      inputRef,
-      state,
-      transition,
-      listboxIdRef,
-      autocompletePropRef,
-      clearOnEscapeRef,
-      openOnFocus,
-      optionsRef,
-      labelIdRef,
-    } = useComboBoxContext();
-
-    // Keep focus on the input component
-    useFocusManagement(lastActionType, inputRef);
-
-    // Keep using the defaultValue until the user started interacting
-    const hasStartedInteracting = useRef(false);
-
-    // Because we close the List on blur, we need to track if the blur is
-    // caused by clicking inside the list, and if so, don't close the List.
-    const selectOnClickRef = useRef(false);
-
-    const handleBlur = useBlur();
-
-    // Update ref props
-    autocompletePropRef.current = autocomplete;
-    clearOnEscapeRef.current = clearOnEscape;
-    listboxIdRef.current = preferredId || listboxIdRef.current;
-
-    // [*]... and when controlled, we don't trigger handleValueChange as the user
-    // types, instead the developer controls it with the normal input onChange
-    // prop
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      // After the user started typing, lets forget the defaultValue
-      hasStartedInteracting.current = true;
-
-      const text = e.target.value;
-      if (text.trim() === '') {
-        transition(CLEAR);
-      } else {
-        transition(CHANGE, { text });
-      }
-    };
-
-    const handleKeyDown = useKeyDown();
-
-    const handleFocus = () => {
-      if (selectOnClick) {
-        selectOnClickRef.current = true;
-      }
-      // If we select an option with click, useFocusManagement will focus the
-      // input, in those cases we don't want to cause the menu to open back up,
-      // so we guard behind these states
-      if (openOnFocus && lastActionType !== SELECT_WITH_CLICK) {
-        transition(FOCUS, {
-          item: navigationItem,
-        });
-      }
-    };
-
-    const handleClick = () => {
-      if (selectOnClickRef.current) {
-        selectOnClickRef.current = false;
-        inputRef.current && inputRef.current.select();
-      }
-    };
-
-    const navigationText =
-      navigationItem !== ''
-        ? optionsRef.current[navigationItem].text
-        : undefined;
-
-    const fallbackValue = hasStartedInteracting.current ? '' : defaultValue;
-
-    const inputStrings =
-      // When idle, we don't have a navigationText on ArrowUp/Down
-      autocomplete && state === NAVIGATING
-        ? [navigationText, controlledValue, text, fallbackValue]
-        : [controlledValue, text, fallbackValue];
-
-    const inputValue = inputStrings.find((str) => str !== undefined);
-
-    // If they are controlling the value we still need to do our transitions, so
-    // we have this derived state to emulate onChange of the input as we receive
-    // new `value`s ...[*]
-    useEffect(() => {
-      transition(INIT, { text: inputValue, item: '' });
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    return (
-      <Comp
-        {...props}
-        as={innerAs}
-        data-reach-combobox-input=""
-        ref={assignMultipleRefs(inputRef, forwardedRef)}
-        value={inputValue}
-        onClick={wrapEvent(onClick, handleClick)}
-        onBlur={wrapEvent(onBlur, handleBlur)}
-        onFocus={wrapEvent(onFocus, handleFocus)}
-        onChange={wrapEvent(onChange, handleChange)}
-        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
-        aria-labelledby={labelIdRef.current}
-        id={listboxIdRef.current}
-        aria-autocomplete="both"
-        aria-activedescendant={
-          navigationItem !== '' ? navigationItem : undefined
-        }
-        autoComplete="off"
-      />
-    );
-  }
-);
+import type {
+  ChangeEvent,
+  ChangeEventHandler,
+  ElementType,
+  FocusEventHandler,
+  InputHTMLAttributes,
+  KeyboardEventHandler,
+  MouseEventHandler,
+} from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
+
+import {
+  useBlur,
+  CLEAR,
+  CHANGE,
+  useKeyDown,
+  SELECT_WITH_CLICK,
+  FOCUS,
+  NAVIGATING,
+  INIT,
+  useFocusManagement,
+} from './hooks';
+import { assignMultipleRefs, wrapEvent } from '../utils';
+import { useComboBoxContext } from './context';
+
+export interface ComboboxInputProps
+  extends InputHTMLAttributes<HTMLInputElement> {
+  // clear on ESC
+  clearOnEscape?: boolean;
+  // highlights all the text in the box on click when true
+  selectOnClick?: boolean;
+  // updates the value in the input when navigating w/ the keyboard
+  autocomplete?: boolean;
+  // initial value for uncontrolled mode
+  defaultValue?: string;
+  // value for controlled mode
+  value?: string;
+  onClick?: MouseEventHandler<HTMLInputElement>;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  id?: string;
+}
+
+export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
+  function ComboboxInput(
+    {
+      as: Comp = 'input',
+      innerAs,
+      selectOnClick = false,
+      autocomplete = true,
+      clearOnEscape = false,
+
+      // wrapped events
+      onClick,
+      onChange,
+      onKeyDown,
+      onBlur,
+      onFocus,
+
+      id: preferredId,
+
+      defaultValue = '',
+
+      // might be controlled
+      value: controlledValue,
+      ...props
+    },
+    forwardedRef
+  ) {
+    const {
+      data: { navigationItem, text, lastActionType },
+      inputRef,
+      state,
+      transition,
+      listboxIdRef,
+      autocompletePropRef,
+      clearOnEscapeRef,
+      openOnFocus,
+      optionsRef,
+      labelIdRef,
+    } = useComboBoxContext();
+
+    // Keep focus on the input component
+    useFocusManagement(lastActionType, inputRef);
+
+    // Keep using the defaultValue until the user started interacting
+    const hasStartedInteracting = useRef(false);
+
+    // Because we close the List on blur, we need to track if the blur is
+    // caused by clicking inside the list, and if so, don't close the List.
+    const selectOnClickRef = useRef(false);
+
+    const handleBlur = useBlur();
+
+    // Update ref props
+    autocompletePropRef.current = autocomplete;
+    clearOnEscapeRef.current = clearOnEscape;
+    listboxIdRef.current = preferredId || listboxIdRef.current;
+
+    // [*]... and when controlled, we don't trigger handleValueChange as the user
+    // types, instead the developer controls it with the normal input onChange
+    // prop
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      // After the user started typing, lets forget the defaultValue
+      hasStartedInteracting.current = true;
+
+      const text = e.target.value;
+      if (text.trim() === '') {
+        transition(CLEAR);
+      } else {
+        transition(CHANGE, { text });
+      }
+    };
+
+    const handleKeyDown = useKeyDown();
+
+    const handleFocus = () => {
+      if (selectOnClick) {
+        selectOnClickRef.current = true;
+      }
+      // If we select an option with click, useFocusManagement will focus the
+      // input, in those cases we don't want to cause the menu to open back up,
+      // so we guard behind these states
+      if (openOnFocus && lastActionType !== SELECT_WITH_CLICK) {
+        transition(FOCUS, {
+          item: navigationItem,
+        });
+      }
+    };
+
+    const handleClick = () => {
+      if (selectOnClickRef.current) {
+        selectOnClickRef.current = false;
+        inputRef.current && inputRef.current.select();
+      }
+    };
+
+    const navigationText =
+      navigationItem !== ''
+        ? optionsRef.current[navigationItem].text
+        : undefined;
+
+    const fallbackValue = hasStartedInteracting.current ? '' : defaultValue;
+
+    const inputStrings =
+      // When idle, we don't have a navigationText on ArrowUp/Down
+      autocomplete && state === NAVIGATING
+        ? [navigationText, controlledValue, text, fallbackValue]
+        : [controlledValue, text, fallbackValue];
+
+    const inputValue = inputStrings.find((str) => str !== undefined);
+
+    // If they are controlling the value we still need to do our transitions, so
+    // we have this derived state to emulate onChange of the input as we receive
+    // new `value`s ...[*]
+    useEffect(() => {
+      transition(INIT, { text: inputValue, item: '' });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+      <Comp
+        {...props}
+        as={innerAs}
+        data-reach-combobox-input=""
+        ref={assignMultipleRefs(inputRef, forwardedRef)}
+        value={inputValue}
+        onClick={wrapEvent(onClick, handleClick)}
+        onBlur={wrapEvent(onBlur, handleBlur)}
+        onFocus={wrapEvent(onFocus, handleFocus)}
+        onChange={wrapEvent(onChange, handleChange)}
+        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+        aria-labelledby={labelIdRef.current}
+        id={listboxIdRef.current}
+        aria-autocomplete="both"
+        aria-activedescendant={
+          navigationItem !== '' ? navigationItem : undefined
+        }
+        autoComplete="off"
+      />
+    );
+  }
+);

package/src/ComboBox/ComboboxLabel.tsx

@@ -1,33 +1,33 @@
-import type { ElementType, LabelHTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-import { useComboBoxContext } from './context';
-
-export interface ComboboxLabelProps
-  extends LabelHTMLAttributes<HTMLLabelElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  id?: string;
-}
-
-export const ComboboxLabel = forwardRef<HTMLLabelElement, ComboboxLabelProps>(
-  function ComboboxButton(
-    { as: Comp = 'label', innerAs, id: preferredId, ...props },
-    ref
-  ) {
-    const { listboxIdRef, labelIdRef } = useComboBoxContext();
-
-    labelIdRef.current = preferredId || labelIdRef.current;
-
-    return (
-      <Comp
-        as={innerAs}
-        data-reach-combobox-label=""
-        htmlFor={listboxIdRef.current}
-        id={labelIdRef.current}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
+import type { ElementType, LabelHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import { useComboBoxContext } from './context';
+
+export interface ComboboxLabelProps
+  extends LabelHTMLAttributes<HTMLLabelElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  id?: string;
+}
+
+export const ComboboxLabel = forwardRef<HTMLLabelElement, ComboboxLabelProps>(
+  function ComboboxButton(
+    { as: Comp = 'label', innerAs, id: preferredId, ...props },
+    ref
+  ) {
+    const { listboxIdRef, labelIdRef } = useComboBoxContext();
+
+    labelIdRef.current = preferredId || labelIdRef.current;
+
+    return (
+      <Comp
+        as={innerAs}
+        data-reach-combobox-label=""
+        htmlFor={listboxIdRef.current}
+        id={labelIdRef.current}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);

package/src/ComboBox/ComboboxList.tsx

@@ -1,47 +1,47 @@
-import type { HTMLAttributes, ElementType, ReactNode } from 'react';
-import { forwardRef, useRef, useEffect } from 'react';
-
-import { useComboBoxContext } from './context';
-import { getScope } from '../hooks';
-import { assignMultipleRefs } from '../utils';
-
-export interface ComboboxListProps extends HTMLAttributes<HTMLUListElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  persistSelection?: boolean;
-  children?: ReactNode;
-}
-
-export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
-  function ComboboxList(
-    {
-      // when true, and the list opens again, the option with a matching value will be
-      // automatically highleted.
-      persistSelection = false,
-      as: Comp = 'ul',
-      innerAs,
-      ...props
-    },
-    ref
-  ) {
-    const { persistSelectionRef, labelIdRef, listScope } = useComboBoxContext();
-
-    const listRef = useRef<HTMLUListElement>();
-    useEffect(() => {
-      listScope.current = getScope(listRef);
-    }, [listScope]);
-
-    persistSelectionRef.current = persistSelection;
-
-    return (
-      <Comp
-        {...props}
-        as={innerAs}
-        ref={assignMultipleRefs(ref, listRef)}
-        data-reach-combobox-list=""
-        role="listbox"
-        aria-labelledby={labelIdRef.current}
-      />
-    );
-  }
-);
+import type { HTMLAttributes, ElementType, ReactNode } from 'react';
+import { forwardRef, useRef, useEffect } from 'react';
+
+import { useComboBoxContext } from './context';
+import { getScope } from '../hooks';
+import { assignMultipleRefs } from '../utils';
+
+export interface ComboboxListProps extends HTMLAttributes<HTMLUListElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  persistSelection?: boolean;
+  children?: ReactNode;
+}
+
+export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
+  function ComboboxList(
+    {
+      // when true, and the list opens again, the option with a matching value will be
+      // automatically highleted.
+      persistSelection = false,
+      as: Comp = 'ul',
+      innerAs,
+      ...props
+    },
+    ref
+  ) {
+    const { persistSelectionRef, labelIdRef, listScope } = useComboBoxContext();
+
+    const listRef = useRef<HTMLUListElement | null>(null);
+    useEffect(() => {
+      listScope.current = getScope(listRef);
+    }, [listScope]);
+
+    persistSelectionRef.current = persistSelection;
+
+    return (
+      <Comp
+        {...props}
+        as={innerAs}
+        ref={assignMultipleRefs(ref, listRef)}
+        data-reach-combobox-list=""
+        role="listbox"
+        aria-labelledby={labelIdRef.current}
+      />
+    );
+  }
+);