@basic-ui/core 0.0.31 → 0.0.34

package/src/hooks/useControlledState.ts

@@ -0,0 +1,37 @@
+import { useRef, useState } from 'react';
+import { wrapEvent, CustomEventHandler } from '../utils';
+
+export function useControlledState<
+  V,
+  E extends React.SyntheticEvent<any>,
+  H extends unknown[]
+>(
+  valueProp: V | undefined,
+  onChangeProp: CustomEventHandler<E, H> | undefined,
+  defaultValue: V,
+  defaultOnChange: (
+    setValue: React.Dispatch<React.SetStateAction<V>>
+  ) => CustomEventHandler<E, H>
+): [
+  V,
+  CustomEventHandler<E, H> | undefined,
+  React.Dispatch<React.SetStateAction<V>>
+] {
+  const isControlled = useRef(valueProp !== undefined);
+  const [valueState, setValueState] = useState<V>(defaultValue);
+
+  if (isControlled.current) {
+    if (valueProp === undefined) {
+      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
+    valueState!,
+    wrapEvent(onChangeProp, defaultOnChange(setValueState)),
+    setValueState,
+  ];
+}

package/src/hooks/useFocusReturn.ts

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+
+export function useFocusReturn(open: boolean) {
+  const previousFocusRef = useRef<Element | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      // once opened, keep track of the element that triggered
+      // the Modal opening
+      previousFocusRef.current = document.activeElement;
+    }
+
+    return () => {
+      // on unmount, return focus to that element
+      const previousFocus = previousFocusRef.current;
+      requestAnimationFrame(() => {
+        if (previousFocus) {
+          (previousFocus as HTMLElement).focus();
+        }
+      });
+    };
+  }, [open]);
+}

package/src/hooks/useFocusState.ts

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import { wrapEvent } from '../utils/wrapEvent';
+
+export function useFocusState<T>(
+  props: {
+    onFocus?: React.FocusEventHandler<T>;
+    onBlur?: React.FocusEventHandler<T>;
+  } = {}
+) {
+  const { onFocus, onBlur } = props;
+  const [hasFocus, setHasFocus] = useState(false);
+
+  const handleFocus = () => {
+    setHasFocus(true);
+  };
+
+  const handleBlur = () => {
+    setHasFocus(false);
+  };
+
+  return {
+    bind: {
+      onFocus: wrapEvent(onFocus, handleFocus),
+      onBlur: wrapEvent(onBlur, handleBlur),
+    },
+    hasFocus,
+  };
+}

package/src/hooks/useGestureHandlers.ts

@@ -0,0 +1,253 @@
+import { useRef } from 'react';
+import type * as React from 'react';
+
+export interface GestureHandlersState {
+  target: null | EventTarget;
+  x: number;
+  xDelta: number;
+  xDeltaPercent: number;
+  xInitial: number;
+  xPrev: number;
+  xVelocity: number;
+  y: number;
+  yDelta: number;
+  yDeltaPercent: number;
+  yInitial: number;
+  yPrev: number;
+  yVelocity: number;
+  startTime: number;
+  down: boolean;
+}
+
+type SetStateFunc<S> = (
+  state: (prevState: Readonly<S>) => S,
+  callback?: () => void
+) => void;
+
+export interface GestureHandlersReturn {
+  onMouseDown: (e: React.MouseEvent<HTMLElement>) => void;
+  onTouchStart: (e: React.TouchEvent<HTMLElement>) => void;
+}
+
+export interface GestureHandlerOptions {
+  ensureTargetIsContainer?: boolean;
+}
+
+export const initialGestureHandlersState: GestureHandlersState = {
+  target: null,
+  x: 0,
+  xDelta: 0,
+  xDeltaPercent: 0,
+  xInitial: 0,
+  xPrev: 0,
+  xVelocity: 0,
+  y: 0,
+  yDelta: 0,
+  yDeltaPercent: 0,
+  yInitial: 0,
+  yPrev: 0,
+  yVelocity: 0,
+  startTime: 0,
+  down: false,
+};
+
+const FRAMERATE_CONST = 1000 / 60; // 60 fps
+const VELOCITY_DEPR_FACTOR = FRAMERATE_CONST * 2;
+
+export function gestureHandlers(
+  set: SetStateFunc<GestureHandlersState>,
+  containerRef?: React.MutableRefObject<HTMLElement | null>,
+  options: GestureHandlerOptions = {}
+): GestureHandlersReturn {
+  const { ensureTargetIsContainer = false } = options;
+
+  // Common handlers
+  const handleUp = () => {
+    set((state: GestureHandlersState) => {
+      const deltaTime = Date.now() - state.startTime;
+      const xDelta = state.x - state.xInitial;
+      const yDelta = state.y - state.yInitial;
+      const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);
+      const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
+      const newState: GestureHandlersState = {
+        ...state,
+        xVelocity,
+        yVelocity,
+        target: null,
+        down: false,
+      };
+
+      return newState;
+    });
+  };
+
+  const handleDown = (e: MouseEvent) => {
+    const { target, pageX, pageY } = e;
+
+    set((state: GestureHandlersState) => {
+      const newState = {
+        ...state,
+        target,
+        x: pageX,
+        xDelta: 0,
+        xDeltaPercent: 0,
+        xVelocity: 0,
+        xInitial: pageX,
+        xPrev: pageX,
+        y: pageY,
+        yDelta: 0,
+        yDeltaPercent: 0,
+        yVelocity: 0,
+        yInitial: pageY,
+        yPrev: pageY,
+        startTime: Date.now(),
+        down: true,
+      };
+
+      return newState;
+    });
+  };
+
+  function calcVelocity(
+    deltaSpace: number,
+    deltaTime: number,
+    prevVelocity: number
+  ) {
+    if (deltaTime < 1) {
+      deltaTime = 1;
+    }
+    const speed = deltaSpace / deltaTime;
+    const depr = 0.5 + Math.min(deltaTime / VELOCITY_DEPR_FACTOR, 0.5);
+    return speed * depr + prevVelocity * (1 - depr);
+  }
+
+  function handleMove(e: MouseEvent) {
+    const { pageX, pageY } = e;
+    if (e.cancelable) {
+      // prevent drag & drop behaviour from browser
+      e.preventDefault && e.preventDefault();
+    }
+
+    set((state: GestureHandlersState) => {
+      const target =
+        (containerRef && containerRef.current) || (e as any).target;
+
+      const deltaTime = Date.now() - state.startTime;
+
+      const width = target ? target.offsetWidth : NaN;
+      const xDelta = pageX - state.xInitial;
+      const xDeltaPercent = (xDelta * 100) / width;
+      const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);
+
+      const height = target ? target.offsetHeight : NaN;
+      const yDelta = pageY - state.yInitial;
+      const yDeltaPercent = (yDelta * 100) / height;
+      const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
+
+      const newState = {
+        ...state,
+        xDelta,
+        xDeltaPercent,
+        x: pageX,
+        xPrev: state.x,
+        xVelocity,
+        yDelta,
+        yDeltaPercent,
+        y: pageY,
+        yPrev: state.y,
+        yVelocity,
+      };
+
+      return newState;
+    });
+  }
+
+  // Touch handlers
+
+  /* eslint-disable @typescript-eslint/no-use-before-define */
+  function handleTouchMove(e: TouchEvent) {
+    if (e.cancelable) {
+      // prevent drag & drop behaviour from browser
+      e.preventDefault();
+    }
+    handleMove(e.touches.item(0) as any);
+  }
+
+  function handleTouchStart(e: React.TouchEvent<HTMLElement>) {
+    // making sure we're not dragging the element when more than one finger press the screen
+    const { touches } = e;
+    if (touches.length > 1) {
+      return;
+    }
+
+    if (
+      ensureTargetIsContainer &&
+      containerRef &&
+      e.target !== containerRef.current
+    ) {
+      return;
+    }
+
+    window.addEventListener('touchmove', handleTouchMove, { passive: false });
+    window.addEventListener('touchend', handleTouchEnd);
+    window.addEventListener('touchcancel', handleTouchEnd);
+    handleDown(e.touches.item(0) as any);
+  }
+
+  function handleTouchEnd() {
+    window.removeEventListener('touchmove', handleTouchMove);
+    window.removeEventListener('touchend', handleTouchEnd);
+    window.removeEventListener('touchcancel', handleTouchEnd);
+    handleUp();
+  }
+
+  // Mouse handlers
+  function handleMouseDown(e: React.MouseEvent<HTMLElement>) {
+    if (
+      ensureTargetIsContainer &&
+      containerRef &&
+      e.target !== containerRef.current
+    ) {
+      return;
+    }
+
+    if (e.button === 0) {
+      window.addEventListener('mousemove', handleMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      handleDown(e as any);
+    }
+  }
+
+  function handleMouseUp() {
+    window.removeEventListener('mousemove', handleMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+    handleUp();
+  }
+  /* eslint-enable @typescript-eslint/no-use-before-define */
+
+  return {
+    onMouseDown: handleMouseDown,
+    onTouchStart: handleTouchStart,
+  };
+}
+
+export const useGestureHandlers = (
+  containerRef: React.MutableRefObject<HTMLElement | null> | undefined,
+  onGesture: (e: GestureHandlersState) => void,
+  options: GestureHandlerOptions = {}
+) => {
+  const state = useRef({ ...initialGestureHandlersState });
+
+  const set = (
+    cb: (prevState: GestureHandlersState) => GestureHandlersState
+  ) => {
+    state.current = cb(state.current);
+    onGesture && onGesture(state.current);
+
+    return state.current;
+  };
+
+  const handlers = gestureHandlers(set, containerRef, options);
+
+  return { state: state.current, handlers };
+};

package/src/hooks/useId.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+// Could use UUID but if we hit 9,007,199,254,740,991 unique components over
+// the lifetime of the app before it gets reloaded, I mean ... come on.
+// I don't even know what xillion that is.
+// /me googles
+// Oh duh, quadrillion. Nine quadrillion components. I think we're okay.
+let id = 0;
+const genId = () => `${++id}`;
+
+export function useId(): string | undefined;
+export function useId(preferredId: string): string;
+export function useId(preferredId: string | undefined): string | undefined;
+export function useId(preferredId?: string): string | undefined {
+  const [id, setId] = useState<string | undefined>(preferredId);
+  useEffect(() => setId(genId()), []);
+  return id;
+}

package/src/hooks/useMeasure.ts

@@ -0,0 +1,33 @@
+import { useRef, useState, useEffect } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+export function useMeasure(ref: React.MutableRefObject<HTMLElement | null>) {
+  const ro = useRef<ResizeObserver | null>(null);
+  const [bounds, setBounds] = useState({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    if (ro.current === null) {
+      ro.current = new ResizeObserver((entries: any) => {
+        const entry = entries[0];
+        setBounds(entry.contentRect);
+      });
+    }
+
+    if (ref.current) {
+      ro.current.observe(ref.current);
+    }
+
+    return () => {
+      if (ro.current) {
+        ro.current.disconnect();
+      }
+    };
+  }, [ref]);
+
+  return bounds;
+}

package/src/hooks/useOnClickOutside.ts

@@ -0,0 +1,32 @@
+import { useEffect, useCallback } from 'react';
+import type * as React from 'react';
+
+export function useOnClickOutside(
+  ref: React.RefObject<any>,
+  handler: (e: PointerEvent) => void,
+  active = true
+) {
+  const listener = useCallback(
+    (event: PointerEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+
+      handler && handler(event);
+    },
+    [ref, handler]
+  );
+
+  useEffect(() => {
+    if (active) {
+      document.addEventListener('pointerup', listener);
+
+      return () => {
+        document.removeEventListener('pointerup', listener);
+      };
+    }
+
+    return;
+  }, [listener, active]);
+}

package/src/hooks/useOnKeyDown.ts

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

package/src/hooks/useReducerMachine.ts

@@ -0,0 +1,59 @@
+import { useReducer, Reducer } from 'react';
+
+export interface StateChart<STypes extends string, ATypes extends string> {
+  initial: STypes;
+  states: {
+    [state in STypes]?: {
+      enter?: (prevState: STypes, payload: any) => void;
+      leave?: (nextState: STypes, payload: any) => void;
+      on: { [action in ATypes]?: STypes };
+    };
+  };
+}
+
+export interface StateMachineState<STypes, ATypes> {
+  state: STypes;
+  lastActionType: ATypes;
+}
+
+export interface StateMachineAction<STypes, ATypes> {
+  type: ATypes;
+  nextState: STypes;
+}
+
+type TransitionType<ATypes extends string> = (
+  action: ATypes,
+  payload: any
+) => void;
+
+// This manages transitions between states with a built in reducer to manage
+// the data that goes with those transitions.
+export function useReducerMachine<
+  S extends StateMachineState<STypes, ATypes>,
+  A extends StateMachineAction<STypes, ATypes>,
+  STypes extends string,
+  ATypes extends string
+>(
+  chart: StateChart<STypes, ATypes>,
+  reducer: Reducer<S, A>,
+  initialData: S
+): [STypes, Omit<S, 'state'>, TransitionType<ATypes>] {
+  const [reducerState, dispatch] = useReducer(reducer, initialData);
+  const { state, ...data } = reducerState;
+
+  const transition: TransitionType<ATypes> = (action, payload = {}) => {
+    const currentState = chart.states[state];
+    if (!currentState) {
+      throw new Error(`Unknown currentState "${state}"`);
+    }
+
+    const nextState: STypes | undefined = currentState.on[action];
+    if (!nextState) {
+      throw new Error(`Unknown action "${action}" for state "${state}"`);
+    }
+
+    dispatch({ type: action, nextState, ...payload } as any);
+  };
+
+  return [state, data, transition];
+}

package/src/hooks/useRemoveBodyScroll.ts

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+
+export function useRemoveBodyScroll(open: boolean) {
+  useEffect(() => {
+    if (open) {
+      const locksCount = ((window as any).__SCROLL_BODY_COUNT__ || 0) + 1;
+
+      // calculate scrollbar width if mounting the first scroll lock
+      let scrollBarWidth = 0;
+      if (locksCount === 1) {
+        scrollBarWidth = window.innerWidth - document.body.clientWidth;
+      }
+
+      document.body.style.overflow = 'hidden';
+      if (scrollBarWidth > 0) {
+        document.body.style.paddingRight = `${scrollBarWidth}px`;
+      }
+
+      // save current lock count in global object
+      (window as any).__SCROLL_BODY_COUNT__ = locksCount;
+    }
+
+    return () => {
+      if (open) {
+        const locksCount = (window as any).__SCROLL_BODY_COUNT__ - 1;
+
+        if (locksCount === 0) {
+          document.body.style.overflow = '';
+          document.body.style.paddingRight = '';
+        }
+
+        // save current lock count in global object
+        (window as any).__SCROLL_BODY_COUNT__ = locksCount;
+      }
+    };
+  }, [open]);
+}

package/src/hooks/useScope.ts

@@ -0,0 +1,51 @@
+import { useRef, MutableRefObject } from 'react';
+
+export type ScopeMatcherFn = (
+  nodeType: string,
+  props: {
+    [key: string]: string;
+  },
+  instance: Element
+) => boolean;
+
+export type Scope<T extends HTMLElement> = MutableRefObject<{
+  queryAllNodes: (matcherFn: ScopeMatcherFn) => T[];
+}>;
+
+export function getScope<T extends HTMLElement, R extends HTMLElement>(
+  rootRef: MutableRefObject<R | undefined | null>
+) {
+  const queryAllNodes = (matcherFn: ScopeMatcherFn) => {
+    if (!rootRef.current) {
+      return [];
+    }
+
+    const allNodes = rootRef.current.querySelectorAll('*');
+
+    const filtered: T[] = [];
+    allNodes.forEach((node) => {
+      const props = {};
+      const { attributes } = node;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes[i];
+        props[attr.name] = attr.value;
+      }
+
+      if (matcherFn(node.tagName.toLowerCase(), props, node)) {
+        filtered.push(node as T);
+      }
+    });
+
+    return filtered;
+  };
+
+  return { queryAllNodes };
+}
+
+export function useScope<T extends HTMLElement, R extends HTMLElement>(
+  rootRef: MutableRefObject<R | undefined | null>
+): Scope<T> {
+  const scope: Scope<T> = useRef(getScope(rootRef));
+
+  return scope;
+}

package/src/hooks/useThrottle.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect, useRef } from 'react';
+
+export function useThrottle<T>(value: T, limit: number) {
+  const [throttledValue, setThrottledValue] = useState(value);
+  const lastRan = useRef(Date.now());
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setThrottledValue(value);
+      lastRan.current = Date.now();
+    }, limit - (Date.now() - lastRan.current));
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, limit]);
+
+  return throttledValue;
+}

package/src/index.ts

@@ -0,0 +1,19 @@
+// Components
+export * from './Accordion';
+export * from './CheckBox';
+export * from './ComboBox';
+export * from './FocusLock';
+export * from './Menu';
+export * from './Modal';
+export * from './Popper';
+export * from './Portal';
+export * from './RadioButton';
+export * from './Spinner';
+export * from './Tabs';
+export * from './Tooltip';
+
+// General React utilities
+export * from './utils';
+
+// Hooks
+export * from './hooks';

package/src/utils/assignRef.ts

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

package/src/utils/clamp.ts

@@ -0,0 +1,3 @@
+export function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}

package/src/utils/createSubscription.ts

@@ -0,0 +1,16 @@
+export function createSubscription() {
+  const subscriptions: (() => void)[] = [];
+
+  function subscribe(fn: () => void) {
+    subscriptions.push(fn);
+    return () => {
+      subscriptions.splice(subscriptions.indexOf(fn), 1);
+    };
+  }
+
+  function notify() {
+    subscriptions.forEach((fn) => fn());
+  }
+
+  return { subscribe, notify };
+}

package/src/utils/getCircularIndex.ts

@@ -0,0 +1,7 @@
+export function getCircularIndex(index: number, maxLength: number) {
+  if (maxLength < 0) {
+    return null;
+  }
+
+  return ((index % maxLength) + maxLength) % maxLength;
+}