@basic-ui/core 0.0.28 → 0.0.32

package/src/Tabs/TabPanels.tsx

@@ -0,0 +1,30 @@
+import { forwardRef, Fragment, Children, cloneElement } from 'react';
+import type * as React from 'react';
+
+export interface TabPanelsProps {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  lazy?: boolean;
+  children?: React.ReactNode;
+}
+
+export const TabPanels = forwardRef<HTMLDivElement, TabPanelsProps>(
+  function TabPanels(props, forwardedRef) {
+    const {
+      as: Comp = Fragment,
+      children: childrenProps,
+      lazy,
+      ...otherProps
+    } = props;
+
+    const children = Children.map(childrenProps, (node, index) =>
+      cloneElement(node as any, { index, lazy })
+    );
+
+    return (
+      <Comp ref={forwardedRef} {...otherProps}>
+        {children}
+      </Comp>
+    );
+  }
+);

package/src/Tabs/Tabs.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, Fragment, useState } from 'react';
+import type * 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;
+  onChange?: (
+    e:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
+    value: number
+  ) => void;
+  index?: number;
+  defaultIndex?: number;
+}
+
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
+  props,
+  forwardedRef
+) {
+  const {
+    as: Comp = Fragment,
+    index: indexProp,
+    onChange: onChangeProp,
+    defaultIndex = 0,
+    ...otherProps
+  } = props;
+  const [index, onChange] = useControlledState(
+    indexProp,
+    onChangeProp,
+    defaultIndex,
+    (setState) => (e, idx) => setState(idx)
+  );
+
+  const [tabListId, setTabListId] = useState<string | null>(null);
+
+  return (
+    <TabsProvider
+      value={{ currentIndex: index || 0, onChange, tabListId, setTabListId }}
+    >
+      <Comp ref={forwardedRef} {...otherProps} />
+    </TabsProvider>
+  );
+});

package/src/Tabs/context.ts

@@ -0,0 +1,30 @@
+import { createContext, useContext } from 'react';
+import { Scope } from '../hooks/useScope';
+
+// Tabs Component
+export interface TabsContextProps {
+  currentIndex: number;
+  onChange?: (
+    e:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>,
+    value: number
+  ) => void;
+  tabListId: string | null;
+  setTabListId: (v: string | null) => void;
+}
+
+const tabsContext = createContext<TabsContextProps | null>(null);
+export const { Provider: TabsProvider } = tabsContext;
+export const useTabsContext = () => useContext(tabsContext);
+
+// TabList Component
+export interface TabListContextProps {
+  tabsScope: Scope<HTMLElement>;
+  manualActivation: boolean;
+  vertical: boolean;
+}
+
+const tablistContext = createContext<TabListContextProps | null>(null);
+export const { Provider: TabListProvider } = tablistContext;
+export const useTabListContext = () => useContext(tablistContext);

package/src/Tabs/index.tsx

@@ -0,0 +1,5 @@
+export * from './Tabs';
+export * from './Tab';
+export * from './TabList';
+export * from './TabPanels';
+export * from './TabPanel';

package/src/Tabs/scopeQuery.ts

@@ -0,0 +1,6 @@
+export function scopeQuery(
+  nodeType: string,
+  props: Record<string, unknown>
+): boolean {
+  return props['data-tab'] === '';
+}

package/src/Tooltip/Tooltip.story.tsx

@@ -0,0 +1,43 @@
+import React, { useRef, forwardRef } from 'react';
+import { Tooltip } from './';
+import { storiesOf } from '@storybook/react';
+import { Popper } from '../Popper/Popper';
+import { InjectedTooltipProps } from './useTooltip';
+// import './styles.css';
+
+const StyledTooltip = forwardRef<HTMLDivElement, InjectedTooltipProps>(
+  ({ children, anchorEl, ...props }, ref) => {
+    return (
+      <Popper ref={ref} anchorEl={anchorEl} distance={10}>
+        <div
+          style={{
+            backgroundColor: '#fff',
+            boxShadow: '0 0 4px 1px rgba(187,187,187,0.7)',
+            padding: 8,
+          }}
+          {...props}
+        >
+          {children}
+        </div>
+      </Popper>
+    );
+  }
+);
+
+const Example = () => {
+  const buttonRef = useRef();
+  return (
+    <div style={{ margin: 100, display: 'flex' }}>
+      <Tooltip label={'Im groot'} as={StyledTooltip}>
+        <button ref={buttonRef}>Hello</button>
+      </Tooltip>
+      <Tooltip label={'Nice'} as={StyledTooltip}>
+        <button ref={buttonRef}>Hello</button>
+      </Tooltip>
+    </div>
+  );
+};
+
+const stories = storiesOf('Components/Tooltip', module);
+
+stories.add('controlled', () => <Example />);

package/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,48 @@
+import React, {
+  forwardRef,
+  cloneElement,
+  Children,
+  ReactElement,
+  RefAttributes,
+} 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;
+  disabled?: boolean;
+}
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  function Tooltip(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      innerAs,
+      children,
+      disabled = false,
+      ...otherProps
+    } = props;
+    const child: ReactElement & RefAttributes<any> = Children.only(
+      children
+    ) as any;
+    const [childProps, { visible, ...tooltipProps }] = useTooltip(
+      child.props,
+      child.ref,
+      otherProps
+    );
+
+    if (disabled) {
+      return <>{child}</>;
+    }
+
+    return (
+      <>
+        {cloneElement(child, childProps)}
+        {visible && <Comp as={innerAs} ref={forwardedRef} {...tooltipProps} />}
+      </>
+    );
+  }
+);

package/src/Tooltip/index.ts

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

package/src/Tooltip/stateMachine.ts

@@ -0,0 +1,185 @@
+import { createSubscription } from '../utils/createSubscription';
+import { StateChart as GenericStateChart } from '../hooks/useReducerMachine';
+
+////////////////////////////////////////////////////////////////////////////////
+// Timeouts:
+
+// 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;
+function startRestTimer() {
+  window.clearTimeout(restTimeout);
+  restTimeout = window.setTimeout(() => {
+    send(TooltipEventTypes.Rest, undefined);
+  }, 200);
+}
+
+function clearRestTimer() {
+  window.clearTimeout(restTimeout);
+}
+
+// Manages the delay to hide the tooltip after rest leaves.
+let leavingVisibleTimer: number;
+
+function startLeavingVisibleTimer() {
+  window.clearTimeout(leavingVisibleTimer);
+  leavingVisibleTimer = window.setTimeout(
+    () => send(TooltipEventTypes.TimeComplete, undefined),
+    100
+  );
+}
+
+function clearLeavingVisibleTimer() {
+  window.clearTimeout(leavingVisibleTimer);
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// State machine
+
+export enum TooltipStates {
+  // Nothing goin' on
+  Idle = 'IDLE',
+
+  // We're considering showing the tooltip, but we're gonna wait a sec
+  Focused = 'FOCUSED',
+
+  // It's on!
+  Visible = 'VISIBLE',
+
+  // Focus has left, but we want to keep it visible for a sec
+  LeavingVisible = 'LEAVING_VISIBLE',
+
+  // The user clicked the tool, so we want to hide the thing, we can't just use
+  // IDLE because we need to ignore mousemove, etc.
+  Dismissed = 'DISMISSED',
+}
+
+export enum TooltipEventTypes {
+  Blur = 'BLUR',
+  Focus = 'FOCUS',
+  GlobalMouseMove = 'GLOBAL_MOUSE_MOVE',
+  MouseDown = 'MOUSE_DOWN',
+  MouseEnter = 'MOUSE_ENTER',
+  MouseLeave = 'MOUSE_LEAVE',
+  MouseMove = 'MOUSE_MOVE',
+  Rest = 'REST',
+  SelectWithKeyboard = 'SELECT_WITH_KEYBOARD',
+  TimeComplete = 'TIME_COMPLETE',
+}
+
+export const subscription = createSubscription();
+export const state = {
+  current: {
+    state: TooltipStates.Idle,
+    id: '',
+  },
+};
+
+function clearContextId() {
+  state.current.id = '';
+}
+
+const chart: GenericStateChart<TooltipStates, TooltipEventTypes> = {
+  initial: TooltipStates.Idle,
+  states: {
+    [TooltipStates.Idle]: {
+      enter: () => {
+        clearContextId();
+      },
+      on: {
+        [TooltipEventTypes.MouseEnter]: TooltipStates.Focused,
+        [TooltipEventTypes.Focus]: TooltipStates.Visible,
+      },
+    },
+    [TooltipStates.Focused]: {
+      enter: startRestTimer,
+      leave: clearRestTimer,
+      on: {
+        [TooltipEventTypes.MouseMove]: TooltipStates.Focused,
+        [TooltipEventTypes.MouseLeave]: TooltipStates.Idle,
+        [TooltipEventTypes.MouseDown]: TooltipStates.Dismissed,
+        [TooltipEventTypes.Blur]: TooltipStates.Idle,
+        [TooltipEventTypes.Rest]: TooltipStates.Visible,
+      },
+    },
+    [TooltipStates.Visible]: {
+      on: {
+        [TooltipEventTypes.Focus]: TooltipStates.Focused,
+        [TooltipEventTypes.MouseEnter]: TooltipStates.Focused,
+        [TooltipEventTypes.MouseLeave]: TooltipStates.LeavingVisible,
+        [TooltipEventTypes.Blur]: TooltipStates.LeavingVisible,
+        [TooltipEventTypes.MouseDown]: TooltipStates.Dismissed,
+        [TooltipEventTypes.SelectWithKeyboard]: TooltipStates.Dismissed,
+        [TooltipEventTypes.GlobalMouseMove]: TooltipStates.LeavingVisible,
+      },
+    },
+    [TooltipStates.LeavingVisible]: {
+      enter: () => {
+        startLeavingVisibleTimer();
+      },
+      leave: () => {
+        clearLeavingVisibleTimer();
+        clearContextId();
+      },
+      on: {
+        [TooltipEventTypes.MouseEnter]: TooltipStates.Visible,
+        [TooltipEventTypes.Focus]: TooltipStates.Visible,
+        [TooltipEventTypes.TimeComplete]: TooltipStates.Idle,
+      },
+    },
+    [TooltipStates.Dismissed]: {
+      leave: () => {
+        clearContextId();
+      },
+      on: {
+        [TooltipEventTypes.MouseLeave]: TooltipStates.Idle,
+        [TooltipEventTypes.Blur]: TooltipStates.Idle,
+      },
+    },
+  },
+};
+
+function transition(
+  currentState: typeof state['current'],
+  event: TooltipEventTypes,
+  payload?: Omit<typeof state['current'], 'state'>
+): typeof state['current'] {
+  const currentStateValue = currentState.state;
+  const stateDef = chart.states[currentState.state];
+  const nextState = stateDef?.on?.[event];
+
+  // Really useful for debugging
+  // console.log({
+  //   event,
+  //   state: state.current.state,
+  //   id: state.current.id,
+  //   nextState,
+  // });
+
+  if (!nextState) {
+    return currentState;
+  }
+
+  if (stateDef && stateDef.leave) {
+    stateDef.leave(currentStateValue, payload);
+  }
+
+  const nextStateValue = nextState;
+  const nextDef = chart.states[nextStateValue];
+  if (nextDef && nextDef.enter) {
+    nextDef.enter(nextStateValue, payload);
+  }
+
+  return { ...currentState, ...payload, state: nextStateValue };
+}
+
+export function send<T extends TooltipEventTypes>(
+  event: T,
+  payload?: Omit<typeof state['current'], 'state'>
+) {
+  const nextState = transition(state.current, event, payload);
+  if (state.current !== nextState) {
+    state.current = nextState;
+    subscription.notify();
+  }
+}

package/src/Tooltip/useTooltip.ts

@@ -0,0 +1,121 @@
+import React, { useRef, RefAttributes, useEffect, useState } from 'react';
+import { assignMultipleRefs } from '../utils/assignRef';
+import { wrapEvent } from '../utils/wrapEvent';
+import { useId } from '../hooks/useId';
+import {
+  send,
+  state,
+  subscription,
+  TooltipEventTypes,
+  TooltipStates,
+} from './stateMachine';
+
+export type ChildProps = React.HTMLAttributes<HTMLElement> &
+  RefAttributes<HTMLElement>;
+
+export interface InjectedTooltipProps
+  extends React.HTMLAttributes<HTMLElement> {
+  anchorEl: React.RefObject<HTMLElement>;
+  visible: boolean;
+  children?: React.ReactNode;
+}
+
+export function useTooltip(
+  childProps: ChildProps,
+  childRef: React.Ref<HTMLElement> | undefined,
+  tooltipProps: React.HTMLAttributes<HTMLElement> & { label?: React.ReactNode }
+): [ChildProps, InjectedTooltipProps] {
+  const {
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+    onMouseDown,
+    onKeyDown,
+    onFocus,
+    onBlur,
+  } = childProps;
+  const anchorEl = useRef<HTMLElement>(null);
+  const [visible, setVisible] = useState(false);
+  const id = useId('');
+
+  useEffect(() => {
+    subscription.subscribe(() => {
+      setVisible(
+        (state.current.state === TooltipStates.Visible ||
+          state.current.state === TooltipStates.LeavingVisible) &&
+          state.current.id === id
+      );
+    });
+  }, [id]);
+
+  function handleMouseEnter() {
+    send(TooltipEventTypes.MouseEnter, { id });
+  }
+
+  function handleMouseMove() {
+    send(TooltipEventTypes.MouseMove, { id });
+  }
+
+  function handleMouseLeave() {
+    send(TooltipEventTypes.MouseLeave);
+  }
+
+  function handleMouseDown() {
+    // Allow quick click from one tool to another
+    if (state.current.id === id) {
+      send(TooltipEventTypes.MouseDown);
+    }
+  }
+
+  function handleFocus() {
+    send(TooltipEventTypes.Focus, { id });
+  }
+
+  function handleBlur() {
+    // Allow quick click from one tool to another
+    if (state.current.id === id) {
+      send(TooltipEventTypes.Blur, undefined);
+    }
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      send(TooltipEventTypes.SelectWithKeyboard);
+    }
+  }
+
+  const {
+    label: children,
+    onMouseEnter: tooltipOnMouseEnter,
+    onMouseLeave: tooltipOnMouseLeave,
+    onMouseMove: tooltipOnMouseMove,
+    ...otherTooltipProps
+  } = tooltipProps;
+
+  const tooltipId = `tooltip-${id}`;
+  return [
+    {
+      ...childProps,
+      ref: assignMultipleRefs(childRef, anchorEl),
+      ...(visible && { 'aria-describedby': tooltipId }),
+      onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),
+      onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),
+      onMouseMove: wrapEvent(onMouseMove, handleMouseMove),
+      onMouseDown: wrapEvent(onMouseDown, handleMouseDown),
+      onFocus: wrapEvent(onFocus, handleFocus),
+      onBlur: wrapEvent(onBlur, handleBlur),
+      onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
+    },
+    {
+      id: tooltipId,
+      anchorEl,
+      visible,
+      children,
+      onMouseEnter: wrapEvent(tooltipOnMouseEnter, handleMouseEnter),
+      onMouseLeave: wrapEvent(tooltipOnMouseLeave, handleMouseLeave),
+      onMouseMove: wrapEvent(tooltipOnMouseMove, handleMouseMove),
+      role: 'tooltip',
+      ...otherTooltipProps,
+    },
+  ];
+}

package/src/hooks/index.ts

@@ -0,0 +1,14 @@
+export * from './useAutoFocus';
+export * from './useControlledState';
+export * from './useChildrenCounter';
+export * from './useFocusReturn';
+export * from './useFocusState';
+export * from './useId';
+export * from './useOnClickOutside';
+export * from './useOnKeyDown';
+export * from './useReducerMachine';
+export * from './useRemoveBodyScroll';
+export * from './useThrottle';
+export * from './useMeasure';
+export * from './useGestureHandlers';
+export * from './useScope';

package/src/hooks/useAutoFocus.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+export function useAutoFocus(
+  open: boolean,
+  elementRef: React.MutableRefObject<HTMLElement | null>
+) {
+  useEffect(() => {
+    if (open) {
+      elementRef.current && elementRef.current.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+}

package/src/hooks/useChildrenCounter.ts

@@ -0,0 +1,50 @@
+import { MutableRefObject, useEffect } from 'react';
+
+export function useChildrenCounterParent<T>(
+  itemsRef: MutableRefObject<T[] & { isNewRender?: boolean }>
+) {
+  // Reset the options ref every render so that they are always
+  // accurate and ready for keyboard navigation handlers. Using layout
+  // effect to schedule this effect before the ComboboxOptions push into
+  // the array
+  itemsRef.current = [];
+  itemsRef.current.isNewRender = true;
+
+  useEffect(() => {
+    // Rendering is finished. Meaning any children can now rerender,
+    // and they should not push any new items to our array, because
+    // it is not a new render
+    itemsRef.current.isNewRender = false;
+  });
+
+  useEffect(() => {
+    // When we are unmounting, it means there are no children anymore.
+    // Clear out our items array
+    return () => {
+      itemsRef.current = [];
+    };
+  }, [itemsRef]);
+}
+
+export function useChildrenCounterChild<T>(
+  itemsRef: MutableRefObject<T[] & { isNewRender?: boolean }> | undefined,
+  itemIndexRef: MutableRefObject<number>,
+  obj: T | ((idx: number) => T),
+  disabled = false
+) {
+  if (itemsRef && itemsRef.current.isNewRender) {
+    if (disabled) {
+      itemIndexRef.current = -1;
+      return;
+    }
+
+    // push this option to the optionsRef array
+    itemIndexRef.current = itemsRef.current.length;
+
+    if (obj instanceof Function) {
+      itemsRef.current.push(obj(itemIndexRef.current));
+    } else {
+      itemsRef.current.push(obj);
+    }
+  }
+}

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]);
+}