@basic-ui/core 0.0.40 → 0.0.43

package/src/Menu/MenuList.tsx

@@ -1,3 +1,4 @@
+import type { HTMLAttributes, ElementType, KeyboardEvent } from 'react';
 import {
   forwardRef,
   useEffect,
@@ -5,10 +6,9 @@ import {
   useState,
   useLayoutEffect,
 } from 'react';
-import * as React from 'react';
 
 import { useMenuContext, MenuListProvider } from './context';
-import { assignMultipleRefs } from '../utils/assignRef';
+import { assignMultipleRefs } from '../utils/assign-ref';
 import { useOnClickOutside } from '../hooks/useOnClickOutside';
 import { useScope } from '../hooks';
 import { queryScope } from './scope';
@@ -17,9 +17,9 @@ import { getCircularIndex, wrapEvent } from '../utils';
 const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
-export interface MenuListProps extends React.HTMLAttributes<HTMLUListElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface MenuListProps extends HTMLAttributes<HTMLUListElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   defaultActiveItemValue?: string;
 }
 
@@ -101,7 +101,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       true
     );
 
-    function handleKeyDown(e: React.KeyboardEvent<HTMLUListElement>) {
+    function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {
       switch (e.key) {
         case 'Escape':
         case 'Tab': {

package/src/Menu/MenuPopover.tsx

@@ -1,14 +1,14 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-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'> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(

package/src/Menu/context.ts

@@ -1,4 +1,9 @@
-import type { MutableRefObject } from 'react';
+import type {
+  KeyboardEvent,
+  MouseEvent,
+  MutableRefObject,
+  PointerEvent,
+} from 'react';
 import { createContext, useContext } from 'react';
 
 export type ItemObject = { text: string; value: any; id: string | undefined };
@@ -10,9 +15,9 @@ export interface MenuContextProps {
   openWithArrowKeyRef: MutableRefObject<string | null>;
   onChange?: (
     e:
-      | React.KeyboardEvent<HTMLElement>
-      | React.MouseEvent<HTMLElement>
-      | React.PointerEvent<HTMLElement>,
+      | KeyboardEvent<HTMLElement>
+      | MouseEvent<HTMLElement>
+      | PointerEvent<HTMLElement>,
     isOpen: boolean
   ) => void;
   open: boolean;

package/src/Modal/Modal.tsx

@@ -1,16 +1,20 @@
-import type { ReactNode } from 'react';
+import type {
+  CSSProperties,
+  ElementType,
+  HTMLAttributes,
+  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';
 
-export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   children?: ReactNode;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   trapFocus?: boolean;
 }
 
@@ -22,7 +26,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
     const modalRef = useRef<HTMLDivElement>(null);
 
     useFocusReturn(trapFocus, modalRef);
-    useRemoveBodyScroll(trapFocus);
+    useRemoveBodyScroll(trapFocus, modalRef);
     useAutoFocus(trapFocus, modalRef);
 
     return (

package/src/Modal/ModalBackdrop.tsx

@@ -1,15 +1,20 @@
+import type {
+  HTMLAttributes,
+  ElementType,
+  CSSProperties,
+  MouseEvent,
+  KeyboardEvent,
+} from 'react';
 import { useRef, forwardRef } from 'react';
-import * as React from 'react';
 
-import { assignMultipleRefs } from '../utils/assignRef';
-import { wrapEvent } from '../utils/wrapEvent';
+import { assignMultipleRefs } from '../utils/assign-ref';
+import { wrapEvent } from '../utils/wrap-event';
 
-export interface ModalBackdropProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface ModalBackdropProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   onClose?: () => void;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   disableCloseOnClick?: boolean;
   disableEscapeKeyDown?: boolean;
 }
@@ -31,7 +36,7 @@ export const ModalBackdrop = forwardRef<HTMLDivElement, ModalBackdropProps>(
     const ref = useRef();
     const mouseDownTargetRef = useRef<EventTarget | null>(null);
 
-    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleClick = (e: MouseEvent<HTMLDivElement>) => {
       // Ignore the events not coming from the "backdrop"
       // We don't want to close the dialog when clicking the dialog content.
       if (e.target !== e.currentTarget) {
@@ -48,11 +53,11 @@ export const ModalBackdrop = forwardRef<HTMLDivElement, ModalBackdropProps>(
       e.stopPropagation();
     };
 
-    const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
       mouseDownTargetRef.current = e.target;
     };
 
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
       if (e.key === 'Escape') {
         !disableEscapeKeyDown && onClose?.();
         e.stopPropagation();

package/src/Popper/Popper.tsx

@@ -1,3 +1,4 @@
+import type { HTMLAttributes, ElementType, RefObject, ReactNode } from 'react';
 import {
   forwardRef,
   useRef,
@@ -6,7 +7,6 @@ import {
   useMemo,
   memo,
 } from 'react';
-import * as React from 'react';
 import type {
   Placement,
   Modifier,
@@ -18,7 +18,7 @@ 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 { assignMultipleRefs } from '../utils/assign-ref';
 import type { PopperContextProps } from './context';
 import { PopperProvider } from './context';
 import { Portal } from '../Portal';
@@ -32,11 +32,11 @@ export type OffsetsFunction = (arg0: {
   placement: Placement;
 }) => [number | null | undefined, number | null | undefined];
 
-export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  anchorEl: React.RefObject<HTMLElement>;
-  children?: React.ReactNode;
+export interface PopperProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  anchorEl: RefObject<HTMLElement>;
+  children?: ReactNode;
   placement?: Placement;
   strategy?: PositioningStrategy;
   modifiers?: Array<Partial<Modifier<any, any>>>;

package/src/Popper/PopperArrow.tsx

@@ -1,12 +1,12 @@
+import type { ElementType, HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import { usePopperContext } from './context';
-import { assignRef } from '../utils/assignRef';
+import { assignMultipleRefs } from '../utils/assign-ref';
 
-export interface PopperArrowProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface PopperArrowProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
 }
 
 export const PopperArrow = forwardRef<HTMLDivElement, PopperArrowProps>(
@@ -26,9 +26,7 @@ export const PopperArrow = forwardRef<HTMLDivElement, PopperArrowProps>(
               'You can only render one <PopperArrow /> per <Popper> component'
             );
           }
-
-          assignRef(ref, node);
-          assignRef(ctx.arrowRef, node);
+          assignMultipleRefs(ref, ctx.arrowRef)(node);
         }}
         data-popper-arrow=""
       />

package/src/RadioButton/RadioButton.tsx

@@ -1,15 +1,20 @@
+import type {
+  ChangeEvent,
+  ElementType,
+  InputHTMLAttributes,
+  ReactNode,
+} from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import type { RadioValue } from './context';
 import { useRadioGroupContext } from './context';
 import { wrapEvent } from '../utils';
 
 export interface RadioButtonProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   checked?: boolean;
   value: RadioValue;
 }
@@ -26,7 +31,7 @@ export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
     } = props;
     const radioGroupContext = useRadioGroupContext();
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       radioGroupContext?.onChange?.(e, valueProp);
     };
 

package/src/RadioButton/RadioGroup.tsx

@@ -1,5 +1,10 @@
+import type {
+  ChangeEvent,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+} from 'react';
 import { forwardRef, useId } from 'react';
-import * as React from 'react';
 
 import type { RadioValue } from './context';
 import { RadioGroupProvider } from './context';
@@ -7,19 +12,16 @@ import { useControlledState } from '../hooks';
 
 export interface RadioGroupProps
   extends Omit<
-    React.HTMLAttributes<HTMLDivElement>,
+    HTMLAttributes<HTMLDivElement>,
     'onChange' | 'value' | 'defaultValue'
   > {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   value?: RadioValue;
   defaultValue?: RadioValue;
   name?: string;
-  onChange?: (
-    e: React.ChangeEvent<HTMLInputElement>,
-    value: RadioValue
-  ) => void;
+  onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;
 }
 
 export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(

package/src/RadioButton/context.ts

@@ -1,3 +1,4 @@
+import type { ChangeEvent } from 'react';
 import { createContext, useContext } from 'react';
 
 export type RadioValue = string | number | boolean;
@@ -5,10 +6,7 @@ export type RadioValue = string | number | boolean;
 // RadioGroup Component
 export interface RadioGroupContextProps {
   value: RadioValue | undefined;
-  onChange?: (
-    e: React.ChangeEvent<HTMLInputElement>,
-    value: RadioValue
-  ) => void;
+  onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;
   name: string | undefined;
 }
 

package/src/SkipNav/SkipNav.tsx

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

package/src/Slider/Slider.story.tsx

@@ -0,0 +1,45 @@
+import { Slider, SliderMarker } from './';
+import './styles.css';
+import '../Tooltip/styles.css';
+
+export default { title: 'components/Slider' };
+
+export function Basic() {
+  return (
+    <div>
+      <Slider id="gee-whiz">
+        <SliderMarker value={10}>
+          <span>10</span>
+        </SliderMarker>
+        <SliderMarker value={90}>
+          <span>90</span>
+        </SliderMarker>
+      </Slider>
+      <br />
+      <br />
+      <br />
+      <Slider defaultValue={30} disabled />
+    </div>
+  );
+}
+
+export function WithSteps() {
+  const step = 20;
+  const min = 0;
+  const max = 120;
+  const range = max - min;
+  const steps = Array.from(Array(range / step + 1).keys());
+
+  return (
+    <Slider as="span" step={step} min={min} max={max}>
+      {steps.map((key) => {
+        const value = key * step;
+        return (
+          <SliderMarker key={key} value={value}>
+            <span>{value}</span>
+          </SliderMarker>
+        );
+      })}
+    </Slider>
+  );
+}