@basic-ui/core 0.0.38 → 0.0.39

package/src/ComboBox/Combobox.tsx

@@ -1,15 +1,13 @@
 import { forwardRef, useRef, useMemo, useId } from 'react';
-import type * as React from 'react';
-import {
-  stateChart,
-  comboboxReducer,
-  isVisible,
-  INIT,
-  ActionTypes,
-} from './hooks';
-import { ComboBoxProvider, ComboBoxContextProps } from './context';
+import * as React from 'react';
+
+import type { ActionTypes } from './hooks';
+import { stateChart, comboboxReducer, isVisible, INIT } from './hooks';
+import type { ComboBoxContextProps } from './context';
+import { ComboBoxProvider } from './context';
 import { useReducerMachine } from '../hooks/useReducerMachine';
-import { Scope, getScope } from '../hooks';
+import type { Scope } from '../hooks';
+import { getScope } from '../hooks';
 
 export type SelectEventHandler = (
   text: string,

package/src/ComboBox/ComboboxButton.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useComboBoxContext } from './context';
 import { useKeyDown, IDLE, OPEN_WITH_BUTTON, CLOSE_WITH_BUTTON } from './hooks';
 import { wrapEvent } from '../utils/wrapEvent';
@@ -21,14 +22,8 @@ export const ComboboxButton = forwardRef<
   { as: Comp = 'button', innerAs, onClick, onKeyDown, ...props },
   ref
 ) {
-  const {
-    transition,
-    data,
-    state,
-    buttonRef,
-    listboxIdRef,
-    isVisible,
-  } = useComboBoxContext();
+  const { transition, data, state, buttonRef, listboxIdRef, isVisible } =
+    useComboBoxContext();
 
   const handleKeyDown = useKeyDown();
 

package/src/ComboBox/ComboboxInput.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useEffect, useRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import {
   useBlur,
   CLEAR,

package/src/ComboBox/ComboboxLabel.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useComboBoxContext } from './context';
 
 export interface ComboboxLabelProps

package/src/ComboBox/ComboboxList.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useRef, useEffect } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useComboBoxContext } from './context';
 import { getScope } from '../hooks';
 import { assignMultipleRefs } from '../utils';

package/src/ComboBox/ComboboxOption.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { forwardRef, useEffect, useRef } from 'react';
+import * as React 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';

package/src/ComboBox/ComboboxPopover.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useKeyDown, useBlur } from './hooks';
 import { wrapEvent } from '../utils/wrapEvent';
 import { assignMultipleRefs } from '../utils/assignRef';

package/src/ComboBox/context.ts

@@ -1,7 +1,8 @@
 import { createContext, useContext } from 'react';
-import { ActionTypes, StateTypes, ReducerState } from './hooks';
-import { SelectEventHandler } from './Combobox';
-import { Scope } from '../hooks';
+
+import type { ActionTypes, StateTypes, ReducerState } from './hooks';
+import type { SelectEventHandler } from './Combobox';
+import type { Scope } from '../hooks';
 
 export interface ComboBoxContextProps {
   data: Omit<ReducerState, 'state'>;

package/src/ComboBox/hooks.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable default-case */
 import { useEffect } from 'react';
-import {
+
+import type {
   StateChart as GenericStateChart,
   StateMachineState,
 } from '../hooks/useReducerMachine';
@@ -357,10 +358,8 @@ export function useKeyDown() {
       }
       case 'Enter': {
         if (state === NAVIGATING && navigationItem !== '') {
-          const {
-            value: navigationValue,
-            text: navigationText,
-          } = optionsRef.current[navigationItem];
+          const { value: navigationValue, text: navigationText } =
+            optionsRef.current[navigationItem];
 
           // don't want to submit forms
           event.preventDefault();
@@ -408,10 +407,8 @@ export function useBlur() {
             transition(BLUR, { text: stateText, item: '' });
           } else {
             // select the currently selected item
-            const {
-              value: navigationValue,
-              text: navigationText,
-            } = optionsRef.current[navigationItem];
+            const { value: navigationValue, text: navigationText } =
+              optionsRef.current[navigationItem];
 
             onSelect &&
               onSelect(navigationText, navigationItem, navigationValue);

package/src/FocusLock/FocusLock.tsx

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useFocusLock } from './useFocusLock';
 
 export interface FocusLockProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/FocusLock/useFocusLock.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+
 import { focusOnChildNode } from './tabUtils';
 
 export interface FocusLockOptions {

package/src/List/List.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 
 export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
   as?: React.ElementType<any>;

package/src/List/ListItem.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 
 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
   as?: React.ElementType<any>;

package/src/Menu/Menu.story.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
-import type * as React from 'react';
-import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from './';
+import * as React from 'react';
 import { animated, useSpring } from 'react-spring';
+
+import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from './';
 import './styles.css';
 
 export default {
@@ -91,10 +92,10 @@ const MenuControlledWithAnimation = () => {
         <MenuList
           as={animated.ul}
           style={{
-            opacity: (opacity as unknown) as number,
-            transform: (scale.to(
+            opacity: opacity as unknown as number,
+            transform: scale.to(
               (x) => `scale(${x}, ${x * x})`
-            ) as unknown) as string,
+            ) as unknown as string,
           }}
         >
           <MenuItem>Dog</MenuItem>

package/src/Menu/Menu.tsx

@@ -1,6 +1,8 @@
 import { forwardRef, useRef, Fragment, useId } from 'react';
-import type * as React from 'react';
-import { MenuProvider, MenuContextProps } from './context';
+import * as React from 'react';
+
+import type { MenuContextProps } from './context';
+import { MenuProvider } from './context';
 import { useControlledState } from '../hooks';
 
 export interface MenuProps {

package/src/Menu/MenuButton.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useId } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useMenuContext } from './context';
 import { wrapEvent } from '../utils/wrapEvent';
 
@@ -23,13 +24,8 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
       disabled,
       ...otherProps
     } = props;
-    const {
-      menuListIdRef,
-      openWithArrowKeyRef,
-      open,
-      buttonRef,
-      onChange,
-    } = useMenuContext();
+    const { menuListIdRef, openWithArrowKeyRef, open, buttonRef, onChange } =
+      useMenuContext();
 
     const buttonIdGenerated = useId();
     const buttonId = preferredId || buttonIdGenerated;

package/src/Menu/MenuItem.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useRef, useId } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useMenuContext, useMenuListContext } from './context';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { wrapEvent } from '../utils';

package/src/Menu/MenuList.tsx

@@ -5,7 +5,8 @@ import {
   useState,
   useLayoutEffect,
 } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useMenuContext, MenuListProvider } from './context';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { useOnClickOutside } from '../hooks/useOnClickOutside';
@@ -32,13 +33,8 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       ...otherProps
     } = props;
 
-    const {
-      menuListIdRef,
-      buttonRef,
-      onChange,
-      openWithArrowKeyRef,
-      open,
-    } = useMenuContext();
+    const { menuListIdRef, buttonRef, onChange, openWithArrowKeyRef, open } =
+      useMenuContext();
 
     const [navigationItem, setNavigationItem] = useState<
       HTMLElement | undefined

package/src/Menu/MenuPopover.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Popper, PopperProps } from '../Popper';
+import * as React from 'react';
+
+import type { PopperProps } from '../Popper';
+import { Popper } from '../Popper';
 import { useMenuContext } from './context';
 
 export interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {

package/src/Menu/context.ts

@@ -1,4 +1,5 @@
-import { createContext, useContext, MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
+import { createContext, useContext } from 'react';
 
 export type ItemObject = { text: string; value: any; id: string | undefined };
 

package/src/Modal/Modal.story.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useSpring, animated } from 'react-spring';
+
 import { Modal, ModalBackdrop } from './';
 import { Portal } from '../Portal';
 import './styles.css';

package/src/Modal/Modal.tsx

@@ -1,5 +1,7 @@
-import { ReactNode, forwardRef, useRef } from 'react';
-import type * as React from 'react';
+import type { ReactNode } from 'react';
+import { forwardRef, useRef } from 'react';
+import * as React from 'react';
+
 import { useAutoFocus, useFocusReturn, useRemoveBodyScroll } from '../hooks';
 import { FocusLock } from '../FocusLock';
 import { assignMultipleRefs } from '../utils';

package/src/Modal/ModalBackdrop.tsx

@@ -1,5 +1,6 @@
 import { useRef, forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { assignMultipleRefs } from '../utils/assignRef';
 import { wrapEvent } from '../utils/wrapEvent';
 

package/src/Modal/NavDrawer.story.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useSpring, animated } from 'react-spring';
+
 import { Modal, ModalBackdrop } from './';
 import { Portal } from '../Portal';
 import './styles.css';
@@ -65,9 +66,8 @@ const Wrapper = ({ children }) => {
 
 const SimpleModalControlledAnimated = () => {
   const [open, setOpen] = useState(false);
-  const [pointerEvents, setPointerEvents] = useState<PointerEventsProperty>(
-    'none'
-  );
+  const [pointerEvents, setPointerEvents] =
+    useState<PointerEventsProperty>('none');
   const [{ transformX, opacity }, set] = useSpring(() => ({
     transformX: -120,
     opacity: 0,

package/src/Popper/Popper.story.tsx

@@ -1,5 +1,6 @@
 import { useRef, useState, useEffect } from 'react';
 import { useSpring, animated } from 'react-spring';
+
 import { Popper } from './Popper';
 import { PopperArrow } from './PopperArrow';
 import './styles.css';
@@ -160,9 +161,7 @@ function Menu() {
   );
 }
 
-const PopperFixedExample = ({ showAll = false, showArrow = false }) => {
-  const ref = useRef<any>(null);
-
+const PopperFixedExample = () => {
   return (
     <>
       <div
@@ -259,6 +258,6 @@ export const AllPointsWithArrow = () => (
   <PopperExample showAll={true} showArrow={true} />
 );
 
-export const FixedPopperAllPoints = () => <PopperFixedExample showAll={true} />;
+export const FixedPopperAllPoints = () => <PopperFixedExample />;
 export const RerenderingPopper = () => <RerenderingPopperExample />;
 export const JumpingPopper = () => <JumpingPopperExample />;

package/src/Popper/Popper.tsx

@@ -6,22 +6,23 @@ import {
   useMemo,
   memo,
 } from 'react';
-import type * as React from 'react';
-import { assignMultipleRefs } from '../utils/assignRef';
-import { PopperProvider, PopperContextProps } from './context';
-import { Portal } from '../Portal';
-
-import {
+import * as React from 'react';
+import type {
   Placement,
   Modifier,
   PositioningStrategy,
   Instance,
   Rect,
-  createPopper,
 } from '@popperjs/core';
+import { createPopper } from '@popperjs/core';
 import type { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';
 import type { ArrowModifier } from '@popperjs/core/lib/modifiers/arrow';
 
+import { assignMultipleRefs } from '../utils/assignRef';
+import type { PopperContextProps } from './context';
+import { PopperProvider } from './context';
+import { Portal } from '../Portal';
+
 const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 

package/src/Popper/PopperArrow.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { usePopperContext } from './context';
 import { assignRef } from '../utils/assignRef';
 

package/src/Popper/context.ts

@@ -1,4 +1,5 @@
-import { createContext, MutableRefObject, useContext } from 'react';
+import type { MutableRefObject } from 'react';
+import { createContext, useContext } from 'react';
 
 export interface PopperContextProps {
   arrowRef: MutableRefObject<HTMLSpanElement | null>;

package/src/Portal/Portal.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
 export interface PortalProps {

package/src/RadioButton/RadioButton.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { RadioButton, RadioGroup } from './';
 // import './styles.css';
 

package/src/RadioButton/RadioButton.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { RadioValue, useRadioGroupContext } from './context';
+import * as React from 'react';
+
+import type { RadioValue } from './context';
+import { useRadioGroupContext } from './context';
 import { wrapEvent } from '../utils';
 
 export interface RadioButtonProps

package/src/RadioButton/RadioGroup.tsx

@@ -1,6 +1,8 @@
 import { forwardRef, useId } from 'react';
-import type * as React from 'react';
-import { RadioGroupProvider, RadioValue } from './context';
+import * as React from 'react';
+
+import type { RadioValue } from './context';
+import { RadioGroupProvider } from './context';
 import { useControlledState } from '../hooks';
 
 export interface RadioGroupProps

package/src/SkipNav/SkipNav.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 
 export interface SkipNavProps extends React.HTMLAttributes<HTMLDivElement> {
   as?: React.ElementType<any>;

package/src/Spinner/Spinner.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Spinner, SpinnerButton } from './';
 import './styles.css';
 

package/src/Spinner/Spinner.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useState, useRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { SpinnerProvider } from './context';
 import { clamp as clampFunc } from '../utils/clamp';
 import { wrapEvent, assignMultipleRefs } from '../utils';

package/src/Spinner/SpinnerButton.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useSpinnerContext } from './context';
 import { wrapEvent } from '../utils';
 

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,6 @@
 import { forwardRef, useRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useTabsContext, useTabListContext } from './context';
 import { assignMultipleRefs, getCircularIndex, wrapEvent } from '../utils';
 import { scopeQuery } from './scopeQuery';
@@ -59,9 +60,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(

package/src/Tabs/TabList.tsx

@@ -6,7 +6,8 @@ import {
   cloneElement,
   useId,
 } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { TabListProvider, useTabsContext } from './context';
 import { useScope } from '../hooks';
 import { assignMultipleRefs } from '../utils';

package/src/Tabs/TabPanel.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { useTabsContext } from './context';
 
 export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/Tabs/TabPanels.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, Fragment, Children, cloneElement } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 
 export interface TabPanelsProps {
   as?: React.ElementType<any>;

package/src/Tabs/Tabs.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, Fragment, useState } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { TabsProvider } from './context';
 import { useControlledState } from '../hooks';
 

package/src/Tabs/context.ts

@@ -1,5 +1,6 @@
 import { createContext, useContext } from 'react';
-import { Scope } from '../hooks/useScope';
+
+import type { Scope } from '../hooks/useScope';
 
 // Tabs Component
 export interface TabsContextProps {

package/src/Tooltip/Tooltip.story.tsx

@@ -1,7 +1,8 @@
 import React, { 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,10 +1,6 @@
-import React, {
-  forwardRef,
-  cloneElement,
-  Children,
-  ReactElement,
-  RefAttributes,
-} from 'react';
+import type { ReactElement, RefAttributes } from 'react';
+import React, { forwardRef, cloneElement, Children } from 'react';
+
 import { useTooltip } from './useTooltip';
 export type { InjectedTooltipProps } from './useTooltip';
 

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,6 @@
-import { useRef, RefAttributes, useEffect, useState, useId } from 'react';
+import type { RefAttributes } from 'react';
+import { useRef, useEffect, useState, useId } from 'react';
+
 import { assignMultipleRefs } from '../utils/assignRef';
 import { wrapEvent } from '../utils/wrapEvent';
 import {

package/src/hooks/useAutoFocus.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+
 import { focusOnChildNode } from '../FocusLock/tabUtils';
 
 export function useAutoFocus(

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,5 +1,7 @@
 import { useRef, useState } from 'react';
-import { wrapEvent, CustomEventHandler } from '../utils';
+
+import type { CustomEventHandler } from '../utils';
+import { wrapEvent } from '../utils';
 
 export function useControlledState<
   V,