@basic-ui/core 0.0.39 → 0.0.42

package/src/Slider/index.ts

@@ -0,0 +1 @@
+export * from './Slider';

package/src/Slider/styles.css

@@ -0,0 +1,131 @@
+:root {
+  --reach-slider: 1;
+}
+
+[data-reach-slider-input] {
+  max-width: 100%;
+}
+
+[data-reach-slider-input][data-orientation="horizontal"] {
+  height: 0.5rem;
+}
+
+[data-reach-slider-input][data-orientation="vertical"] {
+  width: 0.5rem;
+  /* the height is somewhat arbitrary but necessary for vertical sliders for
+  basic functionality */
+  height: 250px;
+  max-height: 100%;
+}
+
+[data-reach-slider-input][data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+[data-reach-slider-track] {
+  position: relative;
+  border-radius: 0.25rem;
+  background: hsl(0, 0%, 95%);
+}
+
+[data-reach-slider-track][data-orientation="horizontal"] {
+  width: 100%;
+  height: inherit;
+}
+
+[data-reach-slider-track][data-orientation="vertical"] {
+  width: inherit;
+  height: 100%;
+}
+
+/* This pseudo element provides an invisible area that increases the touch
+target size of the track */
+[data-reach-slider-track]::before {
+  content: "";
+  position: absolute;
+}
+
+[data-reach-slider-track][data-orientation="horizontal"]::before {
+  width: 100%;
+  height: 1.5rem;
+  top: calc(-0.5rem - 1px);
+  left: 0;
+}
+
+[data-reach-slider-track][data-orientation="vertical"]::before {
+  width: 1.5rem;
+  height: 100%;
+  top: 0;
+  left: calc(-0.5rem - 1px);
+}
+
+[data-reach-slider-handle] {
+  width: 16px;
+  height: 16px;
+  background: #1159a6;
+  border-radius: 10px;
+  z-index: 1;
+  transform-origin: center;
+}
+
+[data-reach-slider-handle][aria-orientation="horizontal"] {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+[data-reach-slider-handle][aria-orientation="horizontal"]:focus {
+  transform: translateY(-50%);
+}
+
+[data-reach-slider-handle][aria-orientation="vertical"] {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[data-reach-slider-range] {
+  border-radius: inherit;
+  background: #1159a6;
+  left: 0;
+  bottom: 0;
+}
+
+[data-reach-slider-range][data-orientation="horizontal"] {
+  height: 100%;
+}
+
+[data-reach-slider-range][data-orientation="vertical"] {
+  width: 100%;
+}
+
+[data-reach-slider-marker] {
+  background: hsl(0, 0%, 50%);
+  transform-origin: center;
+}
+
+[data-reach-slider-marker][data-orientation="horizontal"] {
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 3px;
+  height: 0.75rem;
+}
+
+[data-reach-slider-marker][data-orientation="vertical"] {
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.75rem;
+  height: 3px;
+}
+
+[data-reach-slider-marker][data-state="at-value"],
+[data-reach-slider-marker][data-state="under-value"] {
+  /* */
+}
+
+[data-reach-slider-track-highlight][data-orientation="horizontal"] {
+  height: 100%;
+}
+
+[data-reach-slider-track-highlight][data-orientation="vertical"] {
+  width: 100%;
+}

package/src/Spinner/Spinner.tsx

@@ -1,23 +1,27 @@
+import type {
+  HTMLAttributes,
+  ElementType,
+  ReactNode,
+  MouseEvent,
+  KeyboardEvent,
+} from 'react';
 import { forwardRef, useState, useRef } from 'react';
-import * as React from 'react';
 
 import { SpinnerProvider } from './context';
 import { clamp as clampFunc } from '../utils/clamp';
 import { wrapEvent, assignMultipleRefs } from '../utils';
 
 export interface SpinnerProps
-  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;
   value?: number;
   minValue?: number;
   maxValue?: number;
   stepSize?: number;
   onChange?: (
-    e:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLDivElement>,
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLDivElement>,
     value: number
   ) => void;
 }
@@ -41,7 +45,7 @@ export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
 
     const clamp = (value: number) => clampFunc(value, minValue, maxValue);
 
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
       let nextValue = value;
       switch (e.key) {
         case 'ArrowUp':

package/src/Spinner/SpinnerButton.tsx

@@ -1,14 +1,19 @@
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  MouseEvent,
+  ReactNode,
+} from 'react';
 import { forwardRef } from 'react';
-import * 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';
 }
 
@@ -21,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.tsx

@@ -1,5 +1,11 @@
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+} from 'react';
 import { forwardRef, useRef } from 'react';
-import * as React from 'react';
 
 import { useTabsContext, useTabListContext } from './context';
 import { assignMultipleRefs, getCircularIndex, wrapEvent } from '../utils';
@@ -24,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(
@@ -51,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';
@@ -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,18 +7,17 @@ import {
   cloneElement,
   useId,
 } from 'react';
-import * 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,12 +1,12 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * 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 * 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,17 +1,15 @@
+import type { ElementType, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { forwardRef, Fragment, useState } from 'react';
-import * 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,3 +1,4 @@
+import type { KeyboardEvent, MouseEvent } from 'react';
 import { createContext, useContext } from 'react';
 
 import type { Scope } from '../hooks/useScope';
@@ -6,9 +7,7 @@ import type { Scope } from '../hooks/useScope';
 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,4 +1,4 @@
-import React, { useRef, forwardRef } from 'react';
+import { useRef, forwardRef } from 'react';
 
 import { Tooltip } from './';
 import { Popper } from '../Popper/Popper';
@@ -29,7 +29,7 @@ const StyledTooltip = forwardRef<HTMLDivElement, InjectedTooltipProps>(
 );
 
 const Example = () => {
-  const buttonRef = useRef();
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
   return (
     <div style={{ margin: 100, display: 'flex' }}>
       <Tooltip label={'Im groot'} as={StyledTooltip}>
@@ -43,7 +43,7 @@ const Example = () => {
 };
 
 const ExampleWithHidingButton = () => {
-  const buttonRef = useRef();
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
   return (
     <ul style={{ margin: 100 }}>
       {Array.from({ length: 20 }).map((_, index) => (

package/src/Tooltip/Tooltip.tsx

@@ -1,14 +1,20 @@
-import type { ReactElement, RefAttributes } from 'react';
-import React, { forwardRef, cloneElement, Children } from 'react';
+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,4 +1,4 @@
-import { createSubscription } from '../utils/createSubscription';
+import { createSubscription } from '../utils/create-subscription';
 import type { StateChart as GenericStateChart } from '../hooks/useReducerMachine';
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -6,31 +6,27 @@ import type { StateChart as GenericStateChart } from '../hooks/useReducerMachine
 
 // Manages when the user "rests" on an element. Keeps the interface from being
 // flashing tooltips all the time as the user moves the mouse around the screen.
-let restTimeout: number;
+let restTimeout: NodeJS.Timeout;
 function startRestTimer() {
-  window.clearTimeout(restTimeout);
-  restTimeout = window.setTimeout(() => {
+  clearTimeout(restTimeout);
+  restTimeout = setTimeout(() => {
     send(Rest, undefined);
   }, 200);
 }
 
 function clearRestTimer() {
-  window.clearTimeout(restTimeout);
+  clearTimeout(restTimeout);
 }
 
 // Manages the delay to hide the tooltip after rest leaves.
-let leavingVisibleTimer: number;
-
+let leavingVisibleTimer: NodeJS.Timeout;
 function startLeavingVisibleTimer() {
-  window.clearTimeout(leavingVisibleTimer);
-  leavingVisibleTimer = window.setTimeout(
-    () => send(TimeComplete, undefined),
-    100
-  );
+  clearTimeout(leavingVisibleTimer);
+  leavingVisibleTimer = setTimeout(() => send(TimeComplete, undefined), 100);
 }
 
 function clearLeavingVisibleTimer() {
-  window.clearTimeout(leavingVisibleTimer);
+  clearTimeout(leavingVisibleTimer);
 }
 
 ////////////////////////////////////////////////////////////////////////////////

package/src/Tooltip/useTooltip.ts

@@ -1,8 +1,15 @@
-import type { RefAttributes } 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 { assignMultipleRefs } from '../utils/assign-ref';
+import { wrapEvent } from '../utils/wrap-event';
 import {
   send,
   state,
@@ -18,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,
@@ -86,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);
     }
@@ -105,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,10 +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/useControlledState.ts

@@ -1,3 +1,4 @@
+import type { Dispatch, SetStateAction, SyntheticEvent } from 'react';
 import { useRef, useState } from 'react';
 
 import type { CustomEventHandler } from '../utils';
@@ -5,35 +6,34 @@ import { wrapEvent } from '../utils';
 
 export function useControlledState<
   V,
-  E extends React.SyntheticEvent<any>,
+  E extends SyntheticEvent<any> | Event,
   H extends unknown[]
 >(
   valueProp: V | undefined,
   onChangeProp: CustomEventHandler<E, H> | undefined,
-  defaultValue: V,
+  defaultValue: V | (() => 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>>
-] {
-  const isControlled = useRef(valueProp !== undefined);
+): [V, CustomEventHandler<E, H>] {
+  const isControlled = valueProp !== undefined;
+  const wasControlled = useRef(isControlled);
   const [valueState, setValueState] = useState<V>(defaultValue);
 
-  if (isControlled.current) {
-    if (valueProp === undefined) {
+  if (isControlled) {
+    if (wasControlled.current && process.env.NODE_ENV !== 'production') {
       console.warn('Trying to change from controlled to uncontrolled.');
     }
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return [valueProp!, onChangeProp, setValueState];
+    return [
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      valueProp!,
+      wrapEvent(onChangeProp, defaultOnChange(setValueState)),
+    ];
   }
 
   return [
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     valueState!,
     wrapEvent(onChangeProp, defaultOnChange(setValueState)),
-    setValueState,
   ];
 }

package/src/hooks/useFocusState.ts

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