@basic-ui/core 0.0.28 → 0.0.32

package/src/ComboBox/ComboboxInput.tsx

@@ -0,0 +1,178 @@
+import { forwardRef, useEffect, useRef } from 'react';
+import type * as React 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 React.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?: React.MouseEventHandler<HTMLInputElement>;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  as?: React.ElementType<any>;
+  innerAs?: React.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: React.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

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+import type * as React from 'react';
+import { useComboBoxContext } from './context';
+
+export interface ComboboxLabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.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

@@ -0,0 +1,47 @@
+import { forwardRef, useRef, useEffect } from 'react';
+import type * as React from 'react';
+import { useComboBoxContext } from './context';
+import { getScope } from '../hooks';
+import { assignMultipleRefs } from '../utils';
+
+export interface ComboboxListProps
+  extends React.HTMLAttributes<HTMLUListElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  persistSelection?: boolean;
+  children?: React.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}
+      />
+    );
+  }
+);

package/src/ComboBox/ComboboxOption.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { forwardRef, useEffect, useRef } from 'react';
+
+import type * as React from 'react';
+import { SELECT_WITH_CLICK, CLEAR_SELECTION } from './hooks';
+import { wrapEvent } from '../utils/wrapEvent';
+import { useComboBoxContext } from './context';
+import { makeHash } from './makeHash';
+
+export interface ComboboxOptionProps
+  extends React.LiHTMLAttributes<HTMLLIElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  id: string;
+  value: any;
+  text?: string;
+  onClick?: React.MouseEventHandler<HTMLLIElement>;
+  children?: React.ReactNode;
+}
+
+export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(
+  function ComboboxOption(
+    {
+      children,
+      id: idProp,
+      value: valueProp,
+      text: textProp,
+      onClick,
+      as: Comp = 'li',
+      innerAs,
+      ...props
+    },
+    ref
+  ) {
+    const {
+      onSelect,
+      data: { navigationItem },
+      transition,
+      optionsRef,
+    } = useComboBoxContext();
+    const transitionCleanupRef = useRef(transition);
+    const isActiveRef = useRef(false);
+
+    const value: any = valueProp;
+    let text: string = textProp ? textProp : '';
+
+    if (text.length === 0) {
+      if (typeof valueProp === 'string' && valueProp.length > 0) {
+        text = valueProp;
+      } else {
+        throw new Error('Missing text for <ComboboxOption />');
+      }
+    }
+
+    const id = String(makeHash(idProp));
+
+    useEffect(() => {
+      const opts = optionsRef.current;
+      opts[id] = { value, text };
+
+      return () => {
+        delete opts[id];
+      };
+    }, [optionsRef, id, text, value]);
+
+    // Keep updating this ref with the current
+    // function pointer for transition, so it can
+    // be used by the unmount effect below.
+    transitionCleanupRef.current = transition;
+    isActiveRef.current = navigationItem === id;
+
+    useEffect(() => {
+      return () => {
+        if (isActiveRef.current === true) {
+          // clean up selections if this option is getting
+          // unmounted and it was the currently selected item
+          transitionCleanupRef.current(CLEAR_SELECTION);
+        }
+      };
+    }, []);
+
+    const handleClick = () => {
+      onSelect && onSelect(text, id, value);
+      transition(SELECT_WITH_CLICK, { text, item: id });
+    };
+
+    return (
+      <Comp
+        {...props}
+        as={innerAs}
+        data-reach-combobox-option=""
+        ref={ref}
+        id={id}
+        role="option"
+        aria-selected={isActiveRef.current}
+        data-highlighted={isActiveRef.current ? '' : undefined}
+        // without this the menu will close from `onBlur`, but with it the
+        // element can be `document.activeElement` and then our focus checks in
+        // onBlur will work as intended
+        tabIndex="-1"
+        onClick={wrapEvent(onClick, handleClick)}
+      >
+        {children || text}
+      </Comp>
+    );
+  }
+);

package/src/ComboBox/ComboboxPopover.tsx

@@ -0,0 +1,58 @@
+import { forwardRef } from 'react';
+import type * as React from 'react';
+import { useKeyDown, useBlur } from './hooks';
+import { wrapEvent } from '../utils/wrapEvent';
+import { assignMultipleRefs } from '../utils/assignRef';
+import { useComboBoxContext } from './context';
+
+export interface ComboboxPopoverProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  onBlur?: React.FocusEventHandler<HTMLDivElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  children?: React.ReactNode;
+}
+
+export const ComboboxPopover = forwardRef<HTMLDivElement, ComboboxPopoverProps>(
+  function ComboboxPopover(
+    {
+      // wrapped events
+      onKeyDown,
+      onBlur,
+
+      as: Comp = 'div',
+      innerAs,
+      ...props
+    },
+    forwardedRef
+  ) {
+    const { popoverRef, isVisible } = useComboBoxContext();
+    const handleKeyDown = useKeyDown();
+    const handleBlur = useBlur();
+
+    // Instead of conditionally rendering the popover we use the `hidden` prop
+    // because we don't want to unmount on close (from escape or onSelect).  If
+    // we unmounted, then we'd lose the optionsRef and the user wouldn't be able
+    // to use the arrow keys to pop the list back open. However, the developer
+    // can conditionally render the ComboboxPopover if they do want to cause
+    // mount/unmount based on the app's own data (like results.length or
+    // whatever).
+    const hidden = !isVisible;
+
+    return (
+      <Comp
+        {...props}
+        as={innerAs}
+        data-reach-combobox-popover=""
+        ref={assignMultipleRefs(popoverRef, forwardedRef)}
+        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+        onBlur={wrapEvent(onBlur, handleBlur)}
+        hidden={hidden}
+        // Allow the user to click empty space inside the popover without causing
+        // to close from useBlur
+        tabIndex="-1"
+      />
+    );
+  }
+);