@basic-ui/core 0.0.39 → 0.0.42

package/src/Accordion/AccordionHeader.tsx

@@ -1,15 +1,21 @@
+import type {
+  HTMLAttributes,
+  ElementType,
+  ReactNode,
+  MouseEvent,
+  KeyboardEvent,
+  FocusEvent,
+} from 'react';
 import { forwardRef, useRef, useState, useEffect } from 'react';
-import * as React from 'react';
 
 import { wrapEvent, assignMultipleRefs, getCircularIndex } from '../utils';
 import { useAccordionContext, useAccordionItemContext } from './context';
 import { headerScopeQuery as scopeQuery } from './scopeQuery';
 
-export interface AccordionHeaderProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+export interface AccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
@@ -41,33 +47,30 @@ export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
       }
     }, [accordionContext]);
 
-    const onClick = wrapEvent(
-      onClickProp,
-      (e: React.MouseEvent<HTMLDivElement>) => {
-        let index = 0;
-        if (accordionItemContext.expanded) {
-          index = -1;
-        } else if (accordionContext) {
-          const allHeaders =
-            accordionContext.scope.current.queryAllNodes(scopeQuery) || [];
+    const onClick = wrapEvent(onClickProp, (e: MouseEvent<HTMLDivElement>) => {
+      let index = 0;
+      if (accordionItemContext.expanded) {
+        index = -1;
+      } else if (accordionContext) {
+        const allHeaders =
+          accordionContext.scope.current.queryAllNodes(scopeQuery) || [];
 
-          index = allHeaders.findIndex((e) => e === ref.current);
-          if (index === accordionContext.expandedIndex) {
-            index = -1;
-          }
-          accordionContext.onChange && accordionContext.onChange(e, index);
+        index = allHeaders.findIndex((e) => e === ref.current);
+        if (index === accordionContext.expandedIndex) {
+          index = -1;
         }
-
-        accordionItemContext.onChange &&
-          accordionItemContext.onChange(e, index >= 0);
+        accordionContext.onChange && accordionContext.onChange(e, index);
       }
-    );
 
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      accordionItemContext.onChange &&
+        accordionItemContext.onChange(e, index >= 0);
+    });
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
       switch (e.key) {
         case 'Enter':
         case ' ': {
-          onClick(e as unknown as React.MouseEvent<HTMLDivElement>);
+          onClick(e as unknown as MouseEvent<HTMLDivElement>);
           e.preventDefault();
           break;
         }
@@ -124,7 +127,7 @@ export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
       }
     };
 
-    const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+    const handleBlur = (e: FocusEvent<HTMLDivElement>) => {
       if (accordionContext) {
         const allHeaders =
           accordionContext.scope.current.queryAllNodes(scopeQuery);

package/src/Accordion/AccordionItem.tsx

@@ -1,17 +1,23 @@
+import type {
+  HTMLAttributes,
+  ElementType,
+  ReactNode,
+  KeyboardEvent,
+  MouseEvent,
+} from 'react';
 import { Fragment, forwardRef, useId } from 'react';
-import * as React from 'react';
 
 import type { AccordionItemContextProps } from './context';
 import { AccordionItemProvider } from './context';
 
 export interface AccordionItemProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   expanded?: boolean;
   onChange?: (
-    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
     value: boolean
   ) => void;
 }

package/src/Accordion/context.ts

@@ -1,3 +1,4 @@
+import type { KeyboardEvent, MouseEvent } from 'react';
 import { useContext, createContext } from 'react';
 
 import type { Scope } from '../hooks/useScope';
@@ -9,7 +10,7 @@ export interface AccordionContextProps {
   scope: Scope<HTMLElement>;
   expandedIndex: number;
   onChange?: (
-    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
     index: number
   ) => void;
 }
@@ -24,7 +25,7 @@ export interface AccordionItemContextProps {
   bodyId: string | undefined;
   expanded: boolean;
   onChange?: (
-    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
     value: boolean
   ) => void;
 }

package/src/CheckBox/CheckBox.tsx

@@ -1,13 +1,12 @@
+import type { ElementType, InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import { useControlledState } from '../hooks';
 
-export interface CheckBoxProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+export interface CheckBoxProps extends InputHTMLAttributes<HTMLInputElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(

package/src/ComboBox/ComboBox.story.tsx

@@ -1,5 +1,5 @@
+import type { ChangeEvent } from 'react';
 import { useMemo, useState } from 'react';
-import * as React from 'react';
 
 import { ComboboxOption } from './ComboboxOption';
 import { ComboboxList } from './ComboboxList';
@@ -32,7 +32,7 @@ export function UncontrolledClientSideExample({ initialValue = '' }) {
   const [selected, setSelected] = useState(initialValue);
   const results = useCityMatch(term);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setTerm(event.target.value);
   };
 
@@ -73,7 +73,7 @@ export function ControlledClientSideExample({ initialValue = '' }) {
   const [selected, setSelected] = useState(initialValue);
   const results = useCityMatch(term);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setTerm(event.target.value);
     setSelected('');
   };

package/src/ComboBox/Combobox.tsx

@@ -1,5 +1,5 @@
+import type { HTMLAttributes, ReactNode, ElementType } from 'react';
 import { forwardRef, useRef, useMemo, useId } from 'react';
-import * as React from 'react';
 
 import type { ActionTypes } from './hooks';
 import { stateChart, comboboxReducer, isVisible, INIT } from './hooks';
@@ -15,16 +15,13 @@ export type SelectEventHandler = (
   obj: any
 ) => void;
 
-export type ComboboxProps = Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  'onSelect'
-> & {
+export type ComboboxProps = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
   onSelect?: SelectEventHandler;
   openOnFocus?: boolean;
   selectOnBlur?: boolean;
-  children?: React.ReactNode;
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+  children?: ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
 };
 
 export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(

package/src/ComboBox/ComboboxButton.tsx

@@ -1,18 +1,24 @@
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactNode,
+} from 'react';
 import { forwardRef } 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';
-import { assignMultipleRefs } from '../utils/assignRef';
+import { wrapEvent } from '../utils/wrap-event';
+import { assignMultipleRefs } from '../utils/assign-ref';
 
 export interface ComboboxButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
-  children?: React.ReactNode;
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+  children?: ReactNode;
 }
 
 export const ComboboxButton = forwardRef<

package/src/ComboBox/ComboboxInput.tsx

@@ -1,5 +1,13 @@
+import type {
+  ChangeEvent,
+  ChangeEventHandler,
+  ElementType,
+  FocusEventHandler,
+  InputHTMLAttributes,
+  KeyboardEventHandler,
+  MouseEventHandler,
+} from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
-import * as React from 'react';
 
 import {
   useBlur,
@@ -16,7 +24,7 @@ import { assignMultipleRefs, wrapEvent } from '../utils';
 import { useComboBoxContext } from './context';
 
 export interface ComboboxInputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
+  extends InputHTMLAttributes<HTMLInputElement> {
   // clear on ESC
   clearOnEscape?: boolean;
   // highlights all the text in the box on click when true
@@ -27,13 +35,13 @@ export interface ComboboxInputProps
   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>;
+  onClick?: MouseEventHandler<HTMLInputElement>;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   id?: string;
 }
 
@@ -96,7 +104,7 @@ export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
     // [*]... 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>) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       // After the user started typing, lets forget the defaultValue
       hasStartedInteracting.current = true;
 

package/src/ComboBox/ComboboxLabel.tsx

@@ -1,12 +1,12 @@
+import type { ElementType, LabelHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import { useComboBoxContext } from './context';
 
 export interface ComboboxLabelProps
-  extends React.LabelHTMLAttributes<HTMLLabelElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+  extends LabelHTMLAttributes<HTMLLabelElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   id?: string;
 }
 

package/src/ComboBox/ComboboxList.tsx

@@ -1,16 +1,15 @@
+import type { HTMLAttributes, ElementType, ReactNode } from 'react';
 import { forwardRef, useRef, useEffect } from 'react';
-import * 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>;
+export interface ComboboxListProps extends HTMLAttributes<HTMLUListElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   persistSelection?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(

package/src/ComboBox/ComboboxOption.tsx

@@ -1,21 +1,25 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
+import type {
+  ElementType,
+  LiHTMLAttributes,
+  MouseEventHandler,
+  ReactNode,
+} from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
-import * as React from 'react';
 
 import { SELECT_WITH_CLICK, CLEAR_SELECTION } from './hooks';
-import { wrapEvent } from '../utils/wrapEvent';
+import { wrapEvent } from '../utils/wrap-event';
 import { useComboBoxContext } from './context';
 import { makeHash } from './makeHash';
 
-export interface ComboboxOptionProps
-  extends React.LiHTMLAttributes<HTMLLIElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface ComboboxOptionProps extends LiHTMLAttributes<HTMLLIElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   id: string;
   value: any;
   text?: string;
-  onClick?: React.MouseEventHandler<HTMLLIElement>;
-  children?: React.ReactNode;
+  onClick?: MouseEventHandler<HTMLLIElement>;
+  children?: ReactNode;
 }
 
 export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(

package/src/ComboBox/ComboboxPopover.tsx

@@ -1,18 +1,23 @@
+import type {
+  ElementType,
+  FocusEventHandler,
+  HTMLAttributes,
+  KeyboardEventHandler,
+  ReactNode,
+} from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import { useKeyDown, useBlur } from './hooks';
-import { wrapEvent } from '../utils/wrapEvent';
-import { assignMultipleRefs } from '../utils/assignRef';
+import { wrapEvent } from '../utils/wrap-event';
+import { assignMultipleRefs } from '../utils/assign-ref';
 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 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>(

package/src/ComboBox/context.ts

@@ -1,3 +1,4 @@
+import type { MutableRefObject } from 'react';
 import { createContext, useContext } from 'react';
 
 import type { ActionTypes, StateTypes, ReducerState } from './hooks';
@@ -6,11 +7,11 @@ import type { Scope } from '../hooks';
 
 export interface ComboBoxContextProps {
   data: Omit<ReducerState, 'state'>;
-  inputRef: React.MutableRefObject<HTMLInputElement | null>;
-  popoverRef: React.MutableRefObject<HTMLDivElement | null>;
-  buttonRef: React.MutableRefObject<HTMLButtonElement | null>;
+  inputRef: MutableRefObject<HTMLInputElement | null>;
+  popoverRef: MutableRefObject<HTMLDivElement | null>;
+  buttonRef: MutableRefObject<HTMLButtonElement | null>;
   onSelect?: SelectEventHandler;
-  optionsRef: React.MutableRefObject<{
+  optionsRef: MutableRefObject<{
     [itemId: string]: {
       value: string | unknown;
       text: string;
@@ -19,11 +20,11 @@ export interface ComboBoxContextProps {
   listScope: Scope<HTMLElement>;
   state: StateTypes;
   transition: (action: ActionTypes, payload?: any) => void;
-  listboxIdRef: React.MutableRefObject<string | undefined>;
-  labelIdRef: React.MutableRefObject<string | undefined>;
-  autocompletePropRef: React.MutableRefObject<boolean>;
-  persistSelectionRef: React.MutableRefObject<boolean>;
-  clearOnEscapeRef: React.MutableRefObject<boolean>;
+  listboxIdRef: MutableRefObject<string | undefined>;
+  labelIdRef: MutableRefObject<string | undefined>;
+  autocompletePropRef: MutableRefObject<boolean>;
+  persistSelectionRef: MutableRefObject<boolean>;
+  clearOnEscapeRef: MutableRefObject<boolean>;
   isVisible: boolean;
   openOnFocus: boolean;
   selectOnBlur: boolean;

package/src/ComboBox/hooks.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable default-case */
+import type { KeyboardEvent, MutableRefObject } from 'react';
 import { useEffect } from 'react';
 
 import type {
   StateChart as GenericStateChart,
   StateMachineState,
 } from '../hooks/useReducerMachine';
-import { getCircularIndex } from '../utils/getCircularIndex';
+import { getCircularIndex } from '../utils/get-circular-index';
 import { useComboBoxContext } from './context';
 import { scopeQuery } from './scopeQuery';
 
@@ -221,7 +222,7 @@ export const isVisible = (state: any) => visibleStates.indexOf(state) >= 0;
 // the popup.
 export function useFocusManagement(
   lastActionType: ActionTypes,
-  inputRef: React.MutableRefObject<HTMLInputElement | null>
+  inputRef: MutableRefObject<HTMLInputElement | null>
 ) {
   // useEffect so that the cursor goes to the end of the input instead
   // of awkwardly at the beginning, unclear to me why ...
@@ -289,7 +290,7 @@ export function useKeyDown() {
     listScope,
   } = useComboBoxContext();
 
-  return function handleKeyDown(event: React.KeyboardEvent<any>) {
+  return function handleKeyDown(event: KeyboardEvent<any>) {
     const optionNodes = listScope.current.queryAllNodes(scopeQuery);
 
     switch (event.key) {

package/src/FocusLock/FocusLock.tsx

@@ -1,17 +1,23 @@
+import type {
+  ElementType,
+  FC,
+  HTMLAttributes,
+  MutableRefObject,
+  ReactNode,
+} from 'react';
 import { useRef } from 'react';
-import * as React from 'react';
 
 import { useFocusLock } from './useFocusLock';
 
-export interface FocusLockProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
-  childRef: React.MutableRefObject<HTMLElement | null>;
+export interface FocusLockProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  childRef: MutableRefObject<HTMLElement | null>;
   enabled?: boolean;
 }
 
-export const FocusLock: React.FC<FocusLockProps> = function FocusLock(props) {
+export const FocusLock: FC<FocusLockProps> = function FocusLock(props) {
   const {
     as: Comp = 'div',
     childRef,

package/src/FocusLock/useFocusLock.ts

@@ -1,16 +1,17 @@
+import type { MutableRefObject } from 'react';
 import { useEffect } from 'react';
 
 import { focusOnChildNode } from './tabUtils';
 
 export interface FocusLockOptions {
   enabled: boolean;
-  lockStartRef: React.MutableRefObject<HTMLElement | null>;
-  lockEndRef: React.MutableRefObject<HTMLElement | null>;
+  lockStartRef: MutableRefObject<HTMLElement | null>;
+  lockEndRef: MutableRefObject<HTMLElement | null>;
 }
 
 const focusLockStack: HTMLElement[] = [];
 export function useFocusLock(
-  ref: React.MutableRefObject<HTMLElement | null>,
+  ref: MutableRefObject<HTMLElement | null>,
   opts: FocusLockOptions
 ) {
   const { enabled = true, lockStartRef, lockEndRef } = opts;

package/src/List/List.tsx

@@ -1,10 +1,10 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
-export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const List = forwardRef<HTMLUListElement, ListProps>(function List(

package/src/List/ListItem.tsx

@@ -1,10 +1,10 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
-export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+export interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(

package/src/Menu/Menu.story.tsx

@@ -1,5 +1,5 @@
+import type { MouseEvent } from 'react';
 import { useState } from 'react';
-import * as React from 'react';
 import { animated, useSpring } from 'react-spring';
 
 import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from './';
@@ -14,7 +14,7 @@ const noop = () => {
 };
 
 const Wrapper = ({ children }) => {
-  const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
     console.log('Clicked ' + e.currentTarget.innerText);
     e.preventDefault();
   };

package/src/Menu/Menu.tsx

@@ -1,19 +1,25 @@
+import type {
+  KeyboardEvent,
+  MouseEvent,
+  PointerEvent,
+  ReactNode,
+  ElementType,
+} from 'react';
 import { forwardRef, useRef, Fragment, useId } from 'react';
-import * as React from 'react';
 
 import type { MenuContextProps } from './context';
 import { MenuProvider } from './context';
 import { useControlledState } from '../hooks';
 
 export interface MenuProps {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   onChange?: (
     e:
-      | React.KeyboardEvent<HTMLElement>
-      | React.MouseEvent<HTMLElement>
-      | React.PointerEvent<HTMLElement>,
+      | KeyboardEvent<HTMLElement>
+      | MouseEvent<HTMLElement>
+      | PointerEvent<HTMLElement>,
     isOpen: boolean
   ) => void;
   open?: boolean;