@basic-ui/core 0.0.54 → 0.0.57

package/src/ComboBox/ComboboxOption.tsx

@@ -1,111 +1,110 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-import type {
-  ElementType,
-  LiHTMLAttributes,
-  MouseEventHandler,
-  ReactNode,
-} from 'react';
-import { forwardRef, useEffect, useRef } from 'react';
-
-import { SELECT_WITH_CLICK, CLEAR_SELECTION } from './hooks';
-import { wrapEvent } from '../utils/wrap-event';
-import { useComboBoxContext } from './context';
-import { makeHash } from './makeHash';
-
-export interface ComboboxOptionProps extends LiHTMLAttributes<HTMLLIElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  id: string;
-  value: any;
-  text?: string;
-  onClick?: MouseEventHandler<HTMLLIElement>;
-  children?: 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>
-    );
-  }
-);
+import type {
+  ElementType,
+  LiHTMLAttributes,
+  MouseEventHandler,
+  ReactNode,
+} from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
+
+import { SELECT_WITH_CLICK, CLEAR_SELECTION } from './hooks';
+import { wrapEvent } from '../utils/wrap-event';
+import { useComboBoxContext } from './context';
+import { makeHash } from './makeHash';
+
+export interface ComboboxOptionProps extends LiHTMLAttributes<HTMLLIElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  id: string;
+  value: any;
+  text?: string;
+  onClick?: MouseEventHandler<HTMLLIElement>;
+  children?: 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

@@ -1,64 +1,64 @@
-import type {
-  ElementType,
-  FocusEventHandler,
-  HTMLAttributes,
-  KeyboardEventHandler,
-  ReactNode,
-} from 'react';
-import { forwardRef } from 'react';
-
-import { useKeyDown, useBlur } from './hooks';
-import { wrapEvent } from '../utils/wrap-event';
-import { assignMultipleRefs } from '../utils/assign-ref';
-import { useComboBoxContext } from './context';
-
-export interface ComboboxPopoverProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  onBlur?: FocusEventHandler<HTMLDivElement>;
-  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
-  children?: 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"
-      />
-    );
-  }
-);
+import type {
+  ElementType,
+  FocusEventHandler,
+  HTMLAttributes,
+  KeyboardEventHandler,
+  ReactNode,
+} from 'react';
+import { forwardRef } from 'react';
+
+import { useKeyDown, useBlur } from './hooks';
+import { wrapEvent } from '../utils/wrap-event';
+import { assignMultipleRefs } from '../utils/assign-ref';
+import { useComboBoxContext } from './context';
+
+export interface ComboboxPopoverProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  onBlur?: FocusEventHandler<HTMLDivElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+  children?: 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"
+      />
+    );
+  }
+);