@basic-ui/core 0.0.50 → 0.0.52

package/src/hooks/useOnClickOutside.ts

@@ -1,32 +1,32 @@
-import type { RefObject } from 'react';
-import { useEffect, useCallback } from 'react';
-
-export function useOnClickOutside(
-  ref: 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]);
-}
+import type { RefObject } from 'react';
+import { useEffect, useCallback } from 'react';
+
+export function useOnClickOutside(
+  ref: 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

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

package/src/hooks/useReducerMachine.ts

@@ -1,60 +1,60 @@
-import type { Reducer } from 'react';
-import { useReducer } 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];
-}
+import type { Reducer } from 'react';
+import { useReducer } 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

@@ -1,39 +1,39 @@
-import type { RefObject } from 'react';
-import { useEffect } from 'react';
-
-import { getOwnerDocument } from '../utils';
-
-let scrollBodyCount = 0;
-export function useRemoveBodyScroll(
-  open: boolean,
-  elementRef: RefObject<HTMLElement | null>
-) {
-  useEffect(() => {
-    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 =
-          ownerWindow.innerWidth - ownerDocument.body.clientWidth;
-      }
-
-      ownerDocument.body.style.overflow = 'hidden';
-      if (scrollBarWidth > 0) {
-        ownerDocument.body.style.marginRight = `${scrollBarWidth}px`;
-      }
-
-      return () => {
-        scrollBodyCount -= 1;
-        if (scrollBodyCount === 0) {
-          ownerDocument.body.style.overflow = '';
-          ownerDocument.body.style.marginRight = '';
-        }
-      };
-    }
-  }, [elementRef, open]);
-}
+import type { RefObject } from 'react';
+import { useEffect } from 'react';
+
+import { getOwnerDocument } from '../utils';
+
+let scrollBodyCount = 0;
+export function useRemoveBodyScroll(
+  open: boolean,
+  elementRef: RefObject<HTMLElement | null>
+) {
+  useEffect(() => {
+    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 =
+          ownerWindow.innerWidth - ownerDocument.body.clientWidth;
+      }
+
+      ownerDocument.body.style.overflow = 'hidden';
+      if (scrollBarWidth > 0) {
+        ownerDocument.body.style.marginRight = `${scrollBarWidth}px`;
+      }
+
+      return () => {
+        scrollBodyCount -= 1;
+        if (scrollBodyCount === 0) {
+          ownerDocument.body.style.overflow = '';
+          ownerDocument.body.style.marginRight = '';
+        }
+      };
+    }
+  }, [elementRef, open]);
+}

package/src/hooks/useScope.ts

@@ -1,52 +1,52 @@
-import type { MutableRefObject } from 'react';
-import { useRef } 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;
-}
+import type { MutableRefObject } from 'react';
+import { useRef } 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

@@ -1,19 +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;
-}
+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

@@ -1,20 +1,20 @@
-// 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 './Slider';
-export * from './Spinner';
-export * from './Tabs';
-export * from './Tooltip';
-
-// General React utilities
-export * from './utils';
-
-// Hooks
-export * from './hooks';
+// 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 './Slider';
+export * from './Spinner';
+export * from './Tabs';
+export * from './Tooltip';
+
+// General React utilities
+export * from './utils';
+
+// Hooks
+export * from './hooks';

package/src/utils/assign-ref.ts

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

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

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

package/src/utils/clamp.ts

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

package/src/utils/context.tsx

@@ -1,48 +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];
-}
+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];
+}