@basic-ui/core 0.0.41 → 0.0.44

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/Tooltip/Tooltip.story.tsx

@@ -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/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

@@ -8,8 +8,8 @@ import type {
 } 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,

package/src/hooks/useControlledState.ts

@@ -6,31 +6,34 @@ import { wrapEvent } from '../utils';
 
 export function useControlledState<
   V,
-  E extends 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: Dispatch<SetStateAction<V>>
   ) => CustomEventHandler<E, H>
-): [V, CustomEventHandler<E, H> | undefined, Dispatch<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,7 +1,7 @@
 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: {

package/src/hooks/useGestureHandlers.ts

@@ -5,6 +5,8 @@ import type {
 } from 'react';
 import { useRef } from 'react';
 
+import { getOwnerDocument } from '../utils';
+
 export interface GestureHandlersState {
   target: null | EventTarget;
   x: number;
@@ -211,16 +213,21 @@ export function gestureHandlers(
       return;
     }
 
-    window.addEventListener('touchmove', handleTouchMove, { passive: false });
-    window.addEventListener('touchend', handleTouchEnd);
-    window.addEventListener('touchcancel', handleTouchEnd);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const ownerDocument = getOwnerDocument(e.currentTarget)!;
+    const ownerWindow = ownerDocument.defaultView || window;
+    ownerWindow.addEventListener('touchmove', handleTouchMove, {
+      passive: false,
+    });
+    ownerWindow.addEventListener('touchend', handleTouchEnd);
+    ownerWindow.addEventListener('touchcancel', handleTouchEnd);
     handleDown(e.touches.item(0) as any);
   }
 
-  function handleTouchEnd() {
-    window.removeEventListener('touchmove', handleTouchMove);
-    window.removeEventListener('touchend', handleTouchEnd);
-    window.removeEventListener('touchcancel', handleTouchEnd);
+  function handleTouchEnd(this: Window) {
+    this.removeEventListener('touchmove', handleTouchMove);
+    this.removeEventListener('touchend', handleTouchEnd);
+    this.removeEventListener('touchcancel', handleTouchEnd);
     handleUp();
   }
 
@@ -234,16 +241,19 @@ export function gestureHandlers(
       return;
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const ownerDocument = getOwnerDocument(e.currentTarget)!;
+    const ownerWindow = ownerDocument.defaultView || window;
     if (e.button === 0) {
-      window.addEventListener('mousemove', handleMove);
-      window.addEventListener('mouseup', handleMouseUp);
+      ownerWindow.addEventListener('mousemove', handleMove);
+      ownerWindow.addEventListener('mouseup', handleMouseUp);
       handleDown(e as any);
     }
   }
 
-  function handleMouseUp() {
-    window.removeEventListener('mousemove', handleMove);
-    window.removeEventListener('mouseup', handleMouseUp);
+  function handleMouseUp(this: Window) {
+    this.removeEventListener('mousemove', handleMove);
+    this.removeEventListener('mouseup', handleMouseUp);
     handleUp();
   }
   /* eslint-enable @typescript-eslint/no-use-before-define */

package/src/hooks/useMeasure.ts

@@ -1,6 +1,5 @@
 import type { MutableRefObject } from 'react';
 import { useRef, useState, useEffect } from 'react';
-import ResizeObserver from 'resize-observer-polyfill';
 
 export function useMeasure(ref: MutableRefObject<HTMLElement | null>) {
   const ro = useRef<ResizeObserver | null>(null);

package/src/hooks/useOnKeyDown.ts

@@ -1,18 +1,19 @@
 import { useEffect } from 'react';
 
 export function useOnKeyDown(
+  ownerWindow: Window,
   handler: (e: KeyboardEvent) => void,
   active = true
 ) {
   useEffect(() => {
     if (active) {
-      window.addEventListener('keydown', handler);
+      ownerWindow.addEventListener('keydown', handler);
 
       return () => {
-        window.removeEventListener('keydown', handler);
+        ownerWindow.removeEventListener('keydown', handler);
       };
     }
 
     return;
-  }, [active, handler]);
+  }, [ownerWindow, active, handler]);
 }

package/src/hooks/useRemoveBodyScroll.ts

@@ -1,29 +1,39 @@
+import type { RefObject } from 'react';
 import { useEffect } from 'react';
 
+import { getOwnerDocument } from '../utils';
+
 let scrollBodyCount = 0;
-export function useRemoveBodyScroll(open: boolean) {
+export function useRemoveBodyScroll(
+  open: boolean,
+  elementRef: RefObject<HTMLElement | null>
+) {
   useEffect(() => {
-    if (open) {
+    if (open && elementRef.current) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const ownerDocument = getOwnerDocument(elementRef.current)!;
+      const ownerWindow = ownerDocument.defaultView || window;
       scrollBodyCount += 1;
 
       // calculate scrollbar width if mounting the first scroll lock
       let scrollBarWidth = 0;
       if (scrollBodyCount === 1) {
-        scrollBarWidth = window.innerWidth - document.body.clientWidth;
+        scrollBarWidth =
+          ownerWindow.innerWidth - ownerDocument.body.clientWidth;
       }
 
-      document.body.style.overflow = 'hidden';
+      ownerDocument.body.style.overflow = 'hidden';
       if (scrollBarWidth > 0) {
-        document.body.style.marginRight = `${scrollBarWidth}px`;
+        ownerDocument.body.style.marginRight = `${scrollBarWidth}px`;
       }
 
       return () => {
         scrollBodyCount -= 1;
         if (scrollBodyCount === 0) {
-          document.body.style.overflow = '';
-          document.body.style.marginRight = '';
+          ownerDocument.body.style.overflow = '';
+          ownerDocument.body.style.marginRight = '';
         }
       };
     }
-  }, [open]);
+  }, [elementRef, open]);
 }

package/src/index.ts

@@ -8,6 +8,7 @@ export * from './Modal';
 export * from './Popper';
 export * from './Portal';
 export * from './RadioButton';
+export * from './Slider';
 export * from './Spinner';
 export * from './Tabs';
 export * from './Tooltip';

package/src/utils/{assignRef.ts → assign-ref.ts}

@@ -1,7 +1,7 @@
-import type { LegacyRef, MutableRefObject, Ref, RefCallback } from 'react';
+import type { MutableRefObject, RefCallback } from 'react';
 
 export function assignRef<T>(
-  ref: LegacyRef<T> | MutableRefObject<T> | Ref<T> | null | undefined,
+  ref: MutableRefObject<T> | RefCallback<T> | null | undefined,
   value: T
 ) {
   if (ref == null) return;
@@ -9,7 +9,7 @@ export function assignRef<T>(
     ref(value);
   } else {
     try {
-      (ref as MutableRefObject<T>).current = value;
+      ref.current = value;
     } catch (error) {
       throw new Error(`Cannot assign value "${value}" to ref "${ref}"`);
     }
@@ -17,7 +17,7 @@ export function assignRef<T>(
 }
 
 export function assignMultipleRefs<T>(
-  ...refs: (LegacyRef<T> | MutableRefObject<T> | Ref<T> | null | undefined)[]
+  ...refs: (MutableRefObject<T> | RefCallback<T> | null | undefined)[]
 ): RefCallback<T> {
   return (node: T | null) => {
     refs.forEach((ref) => {

package/src/utils/can-use-dom.ts

@@ -0,0 +1,7 @@
+export function canUseDOM() {
+  return !!(
+    typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement
+  );
+}

package/src/utils/context.tsx

@@ -0,0 +1,48 @@
+import type { FC, PropsWithChildren } from 'react';
+import {
+  useMemo,
+  createContext as ReactCreateContext,
+  useContext as useReactContext,
+} from 'react';
+
+////////////////////////////////////////////////////////////////////////////////
+
+type ContextProvider<T> = FC<PropsWithChildren<T>>;
+
+export function createContext<ContextValueType extends object | null>(
+  rootName: string,
+  defaultContext?: ContextValueType
+): [
+  ContextProvider<ContextValueType>,
+  (childName: string) => ContextValueType
+] {
+  const Ctx = ReactCreateContext<ContextValueType | undefined>(defaultContext);
+
+  function Provider(props: PropsWithChildren<ContextValueType>) {
+    const { children, ...context } = props;
+    const value = useMemo(
+      () => context,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      Object.values(context)
+    ) as ContextValueType;
+    return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+  }
+
+  function useContext(childName: string) {
+    const context = useReactContext(Ctx);
+    if (context) {
+      return context;
+    }
+    if (defaultContext) {
+      return defaultContext;
+    }
+    throw Error(
+      `${childName} must be rendered inside of a ${rootName} component.`
+    );
+  }
+
+  Ctx.displayName = `${rootName}Context`;
+  Provider.displayName = `${rootName}Provider`;
+
+  return [Provider, useContext];
+}

package/src/utils/index.ts

@@ -1,4 +1,10 @@
-export * from './assignRef';
-export * from './wrapEvent';
-export * from './getCircularIndex';
-export * from './rubberBandClamp';
+export * from './assign-ref';
+export * from './can-use-dom';
+export * from './context';
+export * from './get-circular-index';
+export * from './is-right-click';
+export * from './owner-document';
+export * from './polymorphic';
+export * from './rubber-band-clamp';
+export * from './use-stable-callback';
+export * from './wrap-event';

package/src/utils/is-right-click.ts

@@ -0,0 +1,14 @@
+/**
+ * Detects right clicks
+ *
+ * @param nativeEvent
+ */
+export function isRightClick(
+  nativeEvent: MouseEvent | PointerEvent | TouchEvent
+) {
+  return 'which' in nativeEvent
+    ? nativeEvent.which === 3
+    : 'button' in nativeEvent
+    ? (nativeEvent as any).button === 2
+    : false;
+}

package/src/utils/owner-document.ts

@@ -0,0 +1,13 @@
+import { canUseDOM } from './can-use-dom';
+
+/**
+ * Get an element's owner document. Useful when components are used in iframes
+ * or other environments like dev tools.
+ *
+ * @param element
+ */
+export function getOwnerDocument<T extends Element>(
+  element: T | null | undefined
+) {
+  return canUseDOM() ? (element ? element.ownerDocument : document) : null;
+}

package/src/utils/polymorphic.ts

@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/ban-types */
+// adapted from https://github.com/radix-ui/primitives/blob/2f139a832ba0cdfd445c937ebf63c2e79e0ef7ed/packages/react/polymorphic/src/polymorphic.ts
+// Would have liked to use it directly instead of copying but they are
+// (rightfully) treating it as an internal utility, so copy/paste it is to
+// prevent any needless churn if they make breaking changes. Big thanks to Jenna
+// for the heavy lifting! https://github.com/jjenzz
+
+import type * as React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
+
+/**
+ * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
+ */
+export type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {};
+
+/**
+ * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
+ */
+export type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any>
+  ? I
+  : never;
+
+type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<
+  Merge<
+    E extends React.ElementType ? React.ComponentPropsWithRef<E> : never,
+    OwnProps & { as?: E }
+  >
+>;
+
+export interface ForwardRefComponent<
+  IntrinsicElementString,
+  OwnProps = {}
+  /*
+   * Extends original type to ensure built in React types play nice with
+   * polymorphic components still e.g. `React.ElementRef` etc.
+   */
+> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
+  /*
+   * When `as` prop is passed, use this overload. Merges original own props
+   * (without DOM props) and the inferred props from `as` element with the own
+   * props taking precendence.
+   *
+   * We explicitly avoid `React.ElementType` and manually narrow the prop types
+   * so that events are typed when using JSX.IntrinsicElements.
+   */
+  <As = IntrinsicElementString>(
+    props: As extends ''
+      ? { as: keyof JSX.IntrinsicElements }
+      : As extends React.ComponentType<infer P>
+      ? Merge<P, OwnProps & { as: As }>
+      : As extends keyof JSX.IntrinsicElements
+      ? Merge<JSX.IntrinsicElements[As], OwnProps & { as: As }>
+      : never
+  ): React.ReactElement | null;
+}
+
+export interface MemoComponent<IntrinsicElementString, OwnProps = {}>
+  extends React.MemoExoticComponent<
+    ForwardRefComponent<IntrinsicElementString, OwnProps>
+  > {
+  <As = IntrinsicElementString>(
+    props: As extends ''
+      ? { as: keyof JSX.IntrinsicElements }
+      : As extends React.ComponentType<infer P>
+      ? Merge<P, OwnProps & { as: As }>
+      : As extends keyof JSX.IntrinsicElements
+      ? Merge<JSX.IntrinsicElements[As], OwnProps & { as: As }>
+      : never
+  ): React.ReactElement | null;
+}