@basic-ui/core 0.0.52 → 0.0.53

package/src/Tooltip/useTooltip.ts

@@ -1,136 +1,136 @@
-import type {
-  HTMLAttributes,
-  KeyboardEvent,
-  ReactNode,
-  Ref,
-  RefAttributes,
-  RefObject,
-} from 'react';
-import { useRef, useEffect, useState, useId } from 'react';
-
-import { assignMultipleRefs } from '../utils/assign-ref';
-import { wrapEvent } from '../utils/wrap-event';
-import {
-  send,
-  state,
-  subscription,
-  Blur,
-  Focus,
-  LeavingVisible,
-  MouseDown,
-  MouseEnter,
-  MouseLeave,
-  MouseMove,
-  SelectWithKeyboard,
-  Visible,
-} from './stateMachine';
-
-export type ChildProps = HTMLAttributes<HTMLElement> &
-  RefAttributes<HTMLElement>;
-
-export interface InjectedTooltipProps extends HTMLAttributes<HTMLElement> {
-  anchorEl: RefObject<HTMLElement>;
-  visible: boolean;
-  children?: ReactNode;
-}
-
-export function useTooltip(
-  childProps: ChildProps,
-  childRef: Ref<HTMLElement> | undefined,
-  tooltipProps: HTMLAttributes<HTMLElement> & { label?: ReactNode }
-): [ChildProps, InjectedTooltipProps] {
-  const {
-    onMouseEnter,
-    onMouseLeave,
-    onMouseMove,
-    onMouseDown,
-    onKeyDown,
-    onFocus,
-    onBlur,
-  } = childProps;
-  const anchorEl = useRef<HTMLElement>(null);
-  const [visible, setVisible] = useState(false);
-  const id = useId();
-
-  useEffect(() => {
-    subscription.subscribe(() => {
-      setVisible(
-        (state.current.state === Visible ||
-          state.current.state === LeavingVisible) &&
-          state.current.id === id
-      );
-    });
-  }, [id]);
-
-  function handleMouseEnter() {
-    send(MouseEnter, { id });
-  }
-
-  function handleMouseMove() {
-    send(MouseMove, { id });
-  }
-
-  function handleMouseLeave() {
-    send(MouseLeave);
-  }
-
-  function handleMouseDown() {
-    // Allow quick click from one tool to another
-    if (state.current.id === id) {
-      send(MouseDown);
-    }
-  }
-
-  function handleFocus() {
-    send(Focus, { id });
-  }
-
-  function handleBlur() {
-    // Allow quick click from one tool to another
-    if (state.current.id === id) {
-      send(Blur, undefined);
-    }
-  }
-
-  function handleKeyDown(event: KeyboardEvent<HTMLElement>) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      send(SelectWithKeyboard);
-    }
-  }
-
-  const {
-    label: children,
-    onMouseEnter: tooltipOnMouseEnter,
-    onMouseLeave: tooltipOnMouseLeave,
-    onMouseMove: tooltipOnMouseMove,
-    ...otherTooltipProps
-  } = tooltipProps;
-
-  const tooltipId = `tooltip-${id}`;
-  return [
-    {
-      ...childProps,
-      ref: assignMultipleRefs(childRef, anchorEl),
-      ...(visible &&
-        !childProps['aria-label'] && { 'aria-describedby': tooltipId }),
-      onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),
-      onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),
-      onMouseMove: wrapEvent(onMouseMove, handleMouseMove),
-      onMouseDown: wrapEvent(onMouseDown, handleMouseDown),
-      onFocus: wrapEvent(onFocus, handleFocus),
-      onBlur: wrapEvent(onBlur, handleBlur),
-      onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    },
-    {
-      id: tooltipId,
-      anchorEl,
-      visible,
-      children,
-      onMouseEnter: wrapEvent(tooltipOnMouseEnter, handleMouseEnter),
-      onMouseLeave: wrapEvent(tooltipOnMouseLeave, handleMouseLeave),
-      onMouseMove: wrapEvent(tooltipOnMouseMove, handleMouseMove),
-      role: 'tooltip',
-      ...otherTooltipProps,
-    },
-  ];
-}
+import type {
+  HTMLAttributes,
+  KeyboardEvent,
+  ReactNode,
+  Ref,
+  RefAttributes,
+  RefObject,
+} from 'react';
+import { useRef, useEffect, useState, useId } from 'react';
+
+import { assignMultipleRefs } from '../utils/assign-ref';
+import { wrapEvent } from '../utils/wrap-event';
+import {
+  send,
+  state,
+  subscription,
+  Blur,
+  Focus,
+  LeavingVisible,
+  MouseDown,
+  MouseEnter,
+  MouseLeave,
+  MouseMove,
+  SelectWithKeyboard,
+  Visible,
+} from './stateMachine';
+
+export type ChildProps = HTMLAttributes<HTMLElement> &
+  RefAttributes<HTMLElement>;
+
+export interface InjectedTooltipProps extends HTMLAttributes<HTMLElement> {
+  anchorEl: RefObject<HTMLElement>;
+  visible: boolean;
+  children?: ReactNode;
+}
+
+export function useTooltip(
+  childProps: ChildProps,
+  childRef: Ref<HTMLElement> | undefined,
+  tooltipProps: HTMLAttributes<HTMLElement> & { label?: ReactNode }
+): [ChildProps, InjectedTooltipProps] {
+  const {
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+    onMouseDown,
+    onKeyDown,
+    onFocus,
+    onBlur,
+  } = childProps;
+  const anchorEl = useRef<HTMLElement>(null);
+  const [visible, setVisible] = useState(false);
+  const id = useId();
+
+  useEffect(() => {
+    subscription.subscribe(() => {
+      setVisible(
+        (state.current.state === Visible ||
+          state.current.state === LeavingVisible) &&
+          state.current.id === id
+      );
+    });
+  }, [id]);
+
+  function handleMouseEnter() {
+    send(MouseEnter, { id });
+  }
+
+  function handleMouseMove() {
+    send(MouseMove, { id });
+  }
+
+  function handleMouseLeave() {
+    send(MouseLeave);
+  }
+
+  function handleMouseDown() {
+    // Allow quick click from one tool to another
+    if (state.current.id === id) {
+      send(MouseDown);
+    }
+  }
+
+  function handleFocus() {
+    send(Focus, { id });
+  }
+
+  function handleBlur() {
+    // Allow quick click from one tool to another
+    if (state.current.id === id) {
+      send(Blur, undefined);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLElement>) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      send(SelectWithKeyboard);
+    }
+  }
+
+  const {
+    label: children,
+    onMouseEnter: tooltipOnMouseEnter,
+    onMouseLeave: tooltipOnMouseLeave,
+    onMouseMove: tooltipOnMouseMove,
+    ...otherTooltipProps
+  } = tooltipProps;
+
+  const tooltipId = `tooltip-${id}`;
+  return [
+    {
+      ...childProps,
+      ref: assignMultipleRefs(childRef, anchorEl),
+      ...(visible &&
+        !childProps['aria-label'] && { 'aria-describedby': tooltipId }),
+      onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),
+      onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),
+      onMouseMove: wrapEvent(onMouseMove, handleMouseMove),
+      onMouseDown: wrapEvent(onMouseDown, handleMouseDown),
+      onFocus: wrapEvent(onFocus, handleFocus),
+      onBlur: wrapEvent(onBlur, handleBlur),
+      onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
+    },
+    {
+      id: tooltipId,
+      anchorEl,
+      visible,
+      children,
+      onMouseEnter: wrapEvent(tooltipOnMouseEnter, handleMouseEnter),
+      onMouseLeave: wrapEvent(tooltipOnMouseLeave, handleMouseLeave),
+      onMouseMove: wrapEvent(tooltipOnMouseMove, handleMouseMove),
+      role: 'tooltip',
+      ...otherTooltipProps,
+    },
+  ];
+}

package/src/hooks/index.ts

@@ -1,13 +1,13 @@
-export * from './useAutoFocus';
-export * from './useControlledState';
-export * from './useChildrenCounter';
-export * from './useFocusReturn';
-export * from './useFocusState';
-export * from './useOnClickOutside';
-export * from './useOnKeyDown';
-export * from './useReducerMachine';
-export * from './useRemoveBodyScroll';
-export * from './useThrottle';
-export * from './useMeasure';
-export * from './useGestureHandlers';
-export * from './useScope';
+export * from './useAutoFocus';
+export * from './useControlledState';
+export * from './useChildrenCounter';
+export * from './useFocusReturn';
+export * from './useFocusState';
+export * from './useOnClickOutside';
+export * from './useOnKeyDown';
+export * from './useReducerMachine';
+export * from './useRemoveBodyScroll';
+export * from './useThrottle';
+export * from './useMeasure';
+export * from './useGestureHandlers';
+export * from './useScope';

package/src/hooks/useAutoFocus.ts

@@ -1,22 +1,22 @@
-import type { MutableRefObject } from 'react';
-import { useEffect } from 'react';
-
-import { focusOnChildNode } from '../FocusLock/tabUtils';
-
-export function useAutoFocus(
-  open: boolean,
-  elementRef: MutableRefObject<HTMLElement | null>
-) {
-  useEffect(() => {
-    if (open) {
-      // We will only autoFocus on the first child if the currently active element isn't already trapped inside the modal
-      if (
-        elementRef.current &&
-        !elementRef.current.contains(document.activeElement)
-      ) {
-        focusOnChildNode(elementRef.current, 0);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-}
+import type { MutableRefObject } from 'react';
+import { useEffect } from 'react';
+
+import { focusOnChildNode } from '../FocusLock/tabUtils';
+
+export function useAutoFocus(
+  open: boolean,
+  elementRef: MutableRefObject<HTMLElement | null>
+) {
+  useEffect(() => {
+    if (open) {
+      // We will only autoFocus on the first child if the currently active element isn't already trapped inside the modal
+      if (
+        elementRef.current &&
+        !elementRef.current.contains(document.activeElement)
+      ) {
+        focusOnChildNode(elementRef.current, 0);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+}

package/src/hooks/useChildrenCounter.ts

@@ -1,51 +1,51 @@
-import type { MutableRefObject } from 'react';
-import { useEffect } from 'react';
-
-export function useChildrenCounterParent<T>(
-  itemsRef: MutableRefObject<T[] & { isNewRender?: boolean }>
-) {
-  // Reset the options ref every render so that they are always
-  // accurate and ready for keyboard navigation handlers. Using layout
-  // effect to schedule this effect before the ComboboxOptions push into
-  // the array
-  itemsRef.current = [];
-  itemsRef.current.isNewRender = true;
-
-  useEffect(() => {
-    // Rendering is finished. Meaning any children can now rerender,
-    // and they should not push any new items to our array, because
-    // it is not a new render
-    itemsRef.current.isNewRender = false;
-  });
-
-  useEffect(() => {
-    // When we are unmounting, it means there are no children anymore.
-    // Clear out our items array
-    return () => {
-      itemsRef.current = [];
-    };
-  }, [itemsRef]);
-}
-
-export function useChildrenCounterChild<T>(
-  itemsRef: MutableRefObject<T[] & { isNewRender?: boolean }> | undefined,
-  itemIndexRef: MutableRefObject<number>,
-  obj: T | ((idx: number) => T),
-  disabled = false
-) {
-  if (itemsRef && itemsRef.current.isNewRender) {
-    if (disabled) {
-      itemIndexRef.current = -1;
-      return;
-    }
-
-    // push this option to the optionsRef array
-    itemIndexRef.current = itemsRef.current.length;
-
-    if (obj instanceof Function) {
-      itemsRef.current.push(obj(itemIndexRef.current));
-    } else {
-      itemsRef.current.push(obj);
-    }
-  }
-}
+import type { MutableRefObject } from 'react';
+import { useEffect } from 'react';
+
+export function useChildrenCounterParent<T>(
+  itemsRef: MutableRefObject<T[] & { isNewRender?: boolean }>
+) {
+  // Reset the options ref every render so that they are always
+  // accurate and ready for keyboard navigation handlers. Using layout
+  // effect to schedule this effect before the ComboboxOptions push into
+  // the array
+  itemsRef.current = [];
+  itemsRef.current.isNewRender = true;
+
+  useEffect(() => {
+    // Rendering is finished. Meaning any children can now rerender,
+    // and they should not push any new items to our array, because
+    // it is not a new render
+    itemsRef.current.isNewRender = false;
+  });
+
+  useEffect(() => {
+    // When we are unmounting, it means there are no children anymore.
+    // Clear out our items array
+    return () => {
+      itemsRef.current = [];
+    };
+  }, [itemsRef]);
+}
+
+export function useChildrenCounterChild<T>(
+  itemsRef: MutableRefObject<T[] & { isNewRender?: boolean }> | undefined,
+  itemIndexRef: MutableRefObject<number>,
+  obj: T | ((idx: number) => T),
+  disabled = false
+) {
+  if (itemsRef && itemsRef.current.isNewRender) {
+    if (disabled) {
+      itemIndexRef.current = -1;
+      return;
+    }
+
+    // push this option to the optionsRef array
+    itemIndexRef.current = itemsRef.current.length;
+
+    if (obj instanceof Function) {
+      itemsRef.current.push(obj(itemIndexRef.current));
+    } else {
+      itemsRef.current.push(obj);
+    }
+  }
+}

package/src/hooks/useFocusReturn.ts

@@ -1,43 +1,43 @@
-import type { MutableRefObject } from 'react';
-import { useEffect, useRef } from 'react';
-
-export function useFocusReturn(
-  open: boolean,
-  rootEl: MutableRefObject<HTMLElement | null>
-) {
-  const previousFocusRef = useRef<HTMLElement | null>(
-    (() => {
-      if (
-        open &&
-        typeof document !== 'undefined' &&
-        document.activeElement instanceof HTMLElement
-      ) {
-        return document.activeElement;
-      }
-      return null;
-    })()
-  );
-
-  useEffect(() => {
-    if (open) {
-      // once opened, keep track of the element that triggered
-      // the Modal opening
-      if (
-        !previousFocusRef.current &&
-        document.activeElement instanceof HTMLElement &&
-        !rootEl.current?.contains(document.activeElement)
-      ) {
-        previousFocusRef.current = document.activeElement;
-      }
-
-      const rootElement = rootEl.current;
-      const previousElement = previousFocusRef.current;
-      return () => {
-        // on unmount, return focus to that element
-        if (previousElement && !rootElement?.contains(document.activeElement)) {
-          previousElement.focus({ preventScroll: true });
-        }
-      };
-    }
-  }, [open, rootEl]);
-}
+import type { MutableRefObject } from 'react';
+import { useEffect, useRef } from 'react';
+
+export function useFocusReturn(
+  open: boolean,
+  rootEl: MutableRefObject<HTMLElement | null>
+) {
+  const previousFocusRef = useRef<HTMLElement | null>(
+    (() => {
+      if (
+        open &&
+        typeof document !== 'undefined' &&
+        document.activeElement instanceof HTMLElement
+      ) {
+        return document.activeElement;
+      }
+      return null;
+    })()
+  );
+
+  useEffect(() => {
+    if (open) {
+      // once opened, keep track of the element that triggered
+      // the Modal opening
+      if (
+        !previousFocusRef.current &&
+        document.activeElement instanceof HTMLElement &&
+        !rootEl.current?.contains(document.activeElement)
+      ) {
+        previousFocusRef.current = document.activeElement;
+      }
+
+      const rootElement = rootEl.current;
+      const previousElement = previousFocusRef.current;
+      return () => {
+        // on unmount, return focus to that element
+        if (previousElement && !rootElement?.contains(document.activeElement)) {
+          previousElement.focus({ preventScroll: true });
+        }
+      };
+    }
+  }, [open, rootEl]);
+}

package/src/hooks/useFocusState.ts

@@ -1,30 +1,30 @@
-import type { FocusEventHandler } from 'react';
-import { useState } from 'react';
-
-import { wrapEvent } from '../utils/wrap-event';
-
-export function useFocusState<T>(
-  props: {
-    onFocus?: FocusEventHandler<T>;
-    onBlur?: FocusEventHandler<T>;
-  } = {}
-) {
-  const { onFocus, onBlur } = props;
-  const [hasFocus, setHasFocus] = useState(false);
-
-  const handleFocus = () => {
-    setHasFocus(true);
-  };
-
-  const handleBlur = () => {
-    setHasFocus(false);
-  };
-
-  return {
-    bind: {
-      onFocus: wrapEvent(onFocus, handleFocus),
-      onBlur: wrapEvent(onBlur, handleBlur),
-    },
-    hasFocus,
-  };
-}
+import type { FocusEventHandler } from 'react';
+import { useState } from 'react';
+
+import { wrapEvent } from '../utils/wrap-event';
+
+export function useFocusState<T>(
+  props: {
+    onFocus?: FocusEventHandler<T>;
+    onBlur?: FocusEventHandler<T>;
+  } = {}
+) {
+  const { onFocus, onBlur } = props;
+  const [hasFocus, setHasFocus] = useState(false);
+
+  const handleFocus = () => {
+    setHasFocus(true);
+  };
+
+  const handleBlur = () => {
+    setHasFocus(false);
+  };
+
+  return {
+    bind: {
+      onFocus: wrapEvent(onFocus, handleFocus),
+      onBlur: wrapEvent(onBlur, handleBlur),
+    },
+    hasFocus,
+  };
+}