@basic-ui/core 0.0.38 → 0.0.41

package/src/Spinner/SpinnerButton.tsx

@@ -1,13 +1,19 @@
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  MouseEvent,
+  ReactNode,
+} from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
+
 import { useSpinnerContext } from './context';
 import { wrapEvent } from '../utils';
 
 export interface SpinnerButtonProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   type: 'next' | 'previous';
 }
 
@@ -20,7 +26,7 @@ export const SpinnerButton = forwardRef<HTMLButtonElement, SpinnerButtonProps>(
       throw new Error('Missing <Spinner /> in component tree');
     }
 
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
       const delta = type === 'next' ? 1 : -1;
 
       spinnerContext.onChange &&

package/src/Spinner/context.ts

@@ -1,3 +1,4 @@
+import type { KeyboardEvent, MouseEvent } from 'react';
 import { createContext, useContext } from 'react';
 
 // Spinner Component
@@ -7,9 +8,7 @@ export interface SpinnerContextProps {
   maxValue: number;
   stepSize: number;
   onChange?: (
-    e:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLDivElement>,
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLDivElement>,
     value: number
   ) => void;
   clamp: (value: number) => number;

package/src/Tabs/Tab.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Tab, TabPanel, TabPanels, Tabs, TabList } from './';
 import './styles.css';
 

package/src/Tabs/Tab.tsx

@@ -1,5 +1,12 @@
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+} from 'react';
 import { forwardRef, useRef } from 'react';
-import type * as React from 'react';
+
 import { useTabsContext, useTabListContext } from './context';
 import { assignMultipleRefs, getCircularIndex, wrapEvent } from '../utils';
 import { scopeQuery } from './scopeQuery';
@@ -23,11 +30,10 @@ function getNextIndex(
   return null;
 }
 
-export interface TabProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
@@ -50,7 +56,7 @@ export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
     throw new Error('Missing <Tabs /> or <TabList /> in the component tree');
   }
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
     const right = tabListContext.vertical ? 'ArrowDown' : 'ArrowRight';
     const left = tabListContext.vertical ? 'ArrowUp' : 'ArrowLeft';
     const first = 'Home';
@@ -59,9 +65,8 @@ export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
     const navigateIndex = (desiredIndex: number, isLast: boolean) => {
       const delta = e.key === right || e.key === first ? 1 : -1;
 
-      const allTabs = tabListContext.tabsScope.current.queryAllNodes(
-        scopeQuery
-      );
+      const allTabs =
+        tabListContext.tabsScope.current.queryAllNodes(scopeQuery);
       const currentIndex = ref.current ? allTabs.indexOf(ref.current) : -1;
 
       const nextIndex = getNextIndex(
@@ -94,7 +99,7 @@ export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
     }
   };
 
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
     const allTabs = tabListContext.tabsScope.current.queryAllNodes(scopeQuery);
     const currentIndex = ref.current ? allTabs.indexOf(ref.current) : -1;
 

package/src/Tabs/TabList.tsx

@@ -1,3 +1,4 @@
+import type { HTMLAttributes, ElementType, ReactNode } from 'react';
 import {
   forwardRef,
   useRef,
@@ -6,17 +7,17 @@ import {
   cloneElement,
   useId,
 } from 'react';
-import type * as React from 'react';
+
 import { TabListProvider, useTabsContext } from './context';
 import { useScope } from '../hooks';
 import { assignMultipleRefs } from '../utils';
 
-export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   manualActivation?: boolean;
   vertical?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const TabList = forwardRef<HTMLDivElement, TabListProps>(

package/src/Tabs/TabPanel.tsx

@@ -1,11 +1,12 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
+
 import { useTabsContext } from './context';
 
-export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   lazy?: boolean;
 }
 

package/src/Tabs/TabPanels.tsx

@@ -1,11 +1,11 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef, Fragment, Children, cloneElement } from 'react';
-import type * as React from 'react';
 
 export interface TabPanelsProps {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   lazy?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const TabPanels = forwardRef<HTMLDivElement, TabPanelsProps>(

package/src/Tabs/Tabs.tsx

@@ -1,16 +1,15 @@
+import type { ElementType, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { forwardRef, Fragment, useState } from 'react';
-import type * as React from 'react';
+
 import { TabsProvider } from './context';
 import { useControlledState } from '../hooks';
 
 export interface TabsProps {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   onChange?: (
-    e:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>,
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>,
     value: number
   ) => void;
   index?: number;

package/src/Tabs/context.ts

@@ -1,13 +1,13 @@
+import type { KeyboardEvent, MouseEvent } from 'react';
 import { createContext, useContext } from 'react';
-import { Scope } from '../hooks/useScope';
+
+import type { Scope } from '../hooks/useScope';
 
 // Tabs Component
 export interface TabsContextProps {
   currentIndex: number;
   onChange?: (
-    e:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>,
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>,
     value: number
   ) => void;
   tabListId: string | null;

package/src/Tooltip/Tooltip.story.tsx

@@ -1,7 +1,8 @@
-import React, { useRef, forwardRef } from 'react';
+import { useRef, forwardRef } from 'react';
+
 import { Tooltip } from './';
 import { Popper } from '../Popper/Popper';
-import { InjectedTooltipProps } from './useTooltip';
+import type { InjectedTooltipProps } from './useTooltip';
 import './styles.css';
 
 export default {

package/src/Tooltip/Tooltip.tsx

@@ -1,18 +1,20 @@
-import React, {
-  forwardRef,
-  cloneElement,
-  Children,
+import type {
+  ElementType,
+  HTMLAttributes,
   ReactElement,
+  ReactNode,
   RefAttributes,
 } from 'react';
+import { forwardRef, cloneElement, Children } from 'react';
+
 import { useTooltip } from './useTooltip';
 export type { InjectedTooltipProps } from './useTooltip';
 
-export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
-  label: React.ReactNode;
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  label: ReactNode;
   disabled?: boolean;
 }
 

package/src/Tooltip/stateMachine.ts

@@ -1,5 +1,5 @@
 import { createSubscription } from '../utils/createSubscription';
-import { StateChart as GenericStateChart } from '../hooks/useReducerMachine';
+import type { StateChart as GenericStateChart } from '../hooks/useReducerMachine';
 
 ////////////////////////////////////////////////////////////////////////////////
 // Timeouts:

package/src/Tooltip/useTooltip.ts

@@ -1,4 +1,13 @@
-import { useRef, RefAttributes, useEffect, useState, useId } from 'react';
+import type {
+  HTMLAttributes,
+  KeyboardEvent,
+  ReactNode,
+  Ref,
+  RefAttributes,
+  RefObject,
+} from 'react';
+import { useRef, useEffect, useState, useId } from 'react';
+
 import { assignMultipleRefs } from '../utils/assignRef';
 import { wrapEvent } from '../utils/wrapEvent';
 import {
@@ -16,20 +25,19 @@ import {
   Visible,
 } from './stateMachine';
 
-export type ChildProps = React.HTMLAttributes<HTMLElement> &
+export type ChildProps = HTMLAttributes<HTMLElement> &
   RefAttributes<HTMLElement>;
 
-export interface InjectedTooltipProps
-  extends React.HTMLAttributes<HTMLElement> {
-  anchorEl: React.RefObject<HTMLElement>;
+export interface InjectedTooltipProps extends HTMLAttributes<HTMLElement> {
+  anchorEl: RefObject<HTMLElement>;
   visible: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export function useTooltip(
   childProps: ChildProps,
-  childRef: React.Ref<HTMLElement> | undefined,
-  tooltipProps: React.HTMLAttributes<HTMLElement> & { label?: React.ReactNode }
+  childRef: Ref<HTMLElement> | undefined,
+  tooltipProps: HTMLAttributes<HTMLElement> & { label?: ReactNode }
 ): [ChildProps, InjectedTooltipProps] {
   const {
     onMouseEnter,
@@ -84,7 +92,7 @@ export function useTooltip(
     }
   }
 
-  function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+  function handleKeyDown(event: KeyboardEvent<HTMLElement>) {
     if (event.key === 'Enter' || event.key === ' ') {
       send(SelectWithKeyboard);
     }
@@ -103,7 +111,8 @@ export function useTooltip(
     {
       ...childProps,
       ref: assignMultipleRefs(childRef, anchorEl),
-      ...(visible && { 'aria-describedby': tooltipId }),
+      ...(visible &&
+        !childProps['aria-label'] && { 'aria-describedby': tooltipId }),
       onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),
       onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),
       onMouseMove: wrapEvent(onMouseMove, handleMouseMove),

package/src/hooks/useAutoFocus.ts

@@ -1,9 +1,11 @@
+import type { MutableRefObject } from 'react';
 import { useEffect } from 'react';
+
 import { focusOnChildNode } from '../FocusLock/tabUtils';
 
 export function useAutoFocus(
   open: boolean,
-  elementRef: React.MutableRefObject<HTMLElement | null>
+  elementRef: MutableRefObject<HTMLElement | null>
 ) {
   useEffect(() => {
     if (open) {

package/src/hooks/useChildrenCounter.ts

@@ -1,4 +1,5 @@
-import { MutableRefObject, useEffect } from 'react';
+import type { MutableRefObject } from 'react';
+import { useEffect } from 'react';
 
 export function useChildrenCounterParent<T>(
   itemsRef: MutableRefObject<T[] & { isNewRender?: boolean }>

package/src/hooks/useControlledState.ts

@@ -1,22 +1,21 @@
+import type { Dispatch, SetStateAction, SyntheticEvent } from 'react';
 import { useRef, useState } from 'react';
-import { wrapEvent, CustomEventHandler } from '../utils';
+
+import type { CustomEventHandler } from '../utils';
+import { wrapEvent } from '../utils';
 
 export function useControlledState<
   V,
-  E extends React.SyntheticEvent<any>,
+  E extends SyntheticEvent<any>,
   H extends unknown[]
 >(
   valueProp: V | undefined,
   onChangeProp: CustomEventHandler<E, H> | undefined,
   defaultValue: V,
   defaultOnChange: (
-    setValue: React.Dispatch<React.SetStateAction<V>>
+    setValue: Dispatch<SetStateAction<V>>
   ) => CustomEventHandler<E, H>
-): [
-  V,
-  CustomEventHandler<E, H> | undefined,
-  React.Dispatch<React.SetStateAction<V>>
-] {
+): [V, CustomEventHandler<E, H> | undefined, Dispatch<SetStateAction<V>>] {
   const isControlled = useRef(valueProp !== undefined);
   const [valueState, setValueState] = useState<V>(defaultValue);
 

package/src/hooks/useFocusReturn.ts

@@ -1,4 +1,5 @@
-import { MutableRefObject, useEffect, useRef } from 'react';
+import type { MutableRefObject } from 'react';
+import { useEffect, useRef } from 'react';
 
 export function useFocusReturn(
   open: boolean,

package/src/hooks/useFocusState.ts

@@ -1,10 +1,12 @@
+import type { FocusEventHandler } from 'react';
 import { useState } from 'react';
+
 import { wrapEvent } from '../utils/wrapEvent';
 
 export function useFocusState<T>(
   props: {
-    onFocus?: React.FocusEventHandler<T>;
-    onBlur?: React.FocusEventHandler<T>;
+    onFocus?: FocusEventHandler<T>;
+    onBlur?: FocusEventHandler<T>;
   } = {}
 ) {
   const { onFocus, onBlur } = props;

package/src/hooks/useGestureHandlers.ts

@@ -1,5 +1,9 @@
+import type {
+  MutableRefObject,
+  MouseEvent as ReactMouseEvent,
+  TouchEvent as ReactTouchEvent,
+} from 'react';
 import { useRef } from 'react';
-import type * as React from 'react';
 
 export interface GestureHandlersState {
   target: null | EventTarget;
@@ -26,8 +30,8 @@ type SetStateFunc<S> = (
 ) => void;
 
 export interface GestureHandlersReturn {
-  onMouseDown: (e: React.MouseEvent<HTMLElement>) => void;
-  onTouchStart: (e: React.TouchEvent<HTMLElement>) => void;
+  onMouseDown: (e: ReactMouseEvent<HTMLElement>) => void;
+  onTouchStart: (e: ReactTouchEvent<HTMLElement>) => void;
 }
 
 export interface GestureHandlerOptions {
@@ -59,7 +63,7 @@ const VELOCITY_DEPR_FACTOR = FRAMERATE_CONST * 2;
 
 export function gestureHandlers(
   set: SetStateFunc<GestureHandlersState>,
-  containerRef?: React.MutableRefObject<HTMLElement | null>,
+  containerRef?: MutableRefObject<HTMLElement | null>,
   options: GestureHandlerOptions = {}
 ): GestureHandlersReturn {
   const { ensureTargetIsContainer = false, minTouchDelta = 0 } = options;
@@ -192,7 +196,7 @@ export function gestureHandlers(
     handleMove(e.touches.item(0) as any);
   }
 
-  function handleTouchStart(e: React.TouchEvent<HTMLElement>) {
+  function handleTouchStart(e: ReactTouchEvent<HTMLElement>) {
     // making sure we're not dragging the element when more than one finger press the screen
     const { touches } = e;
     if (touches.length > 1) {
@@ -221,7 +225,7 @@ export function gestureHandlers(
   }
 
   // Mouse handlers
-  function handleMouseDown(e: React.MouseEvent<HTMLElement>) {
+  function handleMouseDown(e: ReactMouseEvent<HTMLElement>) {
     if (
       ensureTargetIsContainer &&
       containerRef &&
@@ -251,7 +255,7 @@ export function gestureHandlers(
 }
 
 export const useGestureHandlers = (
-  containerRef: React.MutableRefObject<HTMLElement | null> | undefined,
+  containerRef: MutableRefObject<HTMLElement | null> | undefined,
   onGesture: (e: GestureHandlersState) => void,
   options: GestureHandlerOptions = {}
 ) => {

package/src/hooks/useMeasure.ts

@@ -1,7 +1,8 @@
+import type { MutableRefObject } from 'react';
 import { useRef, useState, useEffect } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
-export function useMeasure(ref: React.MutableRefObject<HTMLElement | null>) {
+export function useMeasure(ref: MutableRefObject<HTMLElement | null>) {
   const ro = useRef<ResizeObserver | null>(null);
   const [bounds, setBounds] = useState({
     left: 0,

package/src/hooks/useOnClickOutside.ts

@@ -1,8 +1,8 @@
+import type { RefObject } from 'react';
 import { useEffect, useCallback } from 'react';
-import type * as React from 'react';
 
 export function useOnClickOutside(
-  ref: React.RefObject<any>,
+  ref: RefObject<any>,
   handler: (e: PointerEvent) => void,
   active = true
 ) {

package/src/hooks/useReducerMachine.ts

@@ -1,4 +1,5 @@
-import { useReducer, Reducer } from 'react';
+import type { Reducer } from 'react';
+import { useReducer } from 'react';
 
 export interface StateChart<STypes extends string, ATypes extends string> {
   initial: STypes;

package/src/hooks/useScope.ts

@@ -1,4 +1,5 @@
-import { useRef, MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
+import { useRef } from 'react';
 
 export type ScopeMatcherFn = (
   nodeType: string,

package/src/utils/assignRef.ts

@@ -1,4 +1,4 @@
-import { LegacyRef, MutableRefObject, Ref, RefCallback } from 'react';
+import type { LegacyRef, MutableRefObject, Ref, RefCallback } from 'react';
 
 export function assignRef<T>(
   ref: LegacyRef<T> | MutableRefObject<T> | Ref<T> | null | undefined,

package/src/utils/wrapEvent.ts

@@ -1,12 +1,11 @@
+import type { SyntheticEvent } from 'react';
+
 export type CustomEventHandler<
-  E extends React.SyntheticEvent<any>,
+  E extends SyntheticEvent<any>,
   H extends unknown[]
 > = (e: E, ...args: H) => void;
 
-export function wrapEvent<
-  E extends React.SyntheticEvent<any>,
-  H extends unknown[]
->(
+export function wrapEvent<E extends SyntheticEvent<any>, H extends unknown[]>(
   theirHandler: CustomEventHandler<E, H> | undefined,
   ourHandler: CustomEventHandler<E, H>
 ): CustomEventHandler<E, H> {