@basic-ui/core 0.0.29 → 0.0.33

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,59 @@
+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 ExampleWithHidingButton = () => {
+  const buttonRef = useRef();
+  return (
+    <ul style={{ margin: 100 }}>
+      {Array.from({ length: 20 }).map((_, index) => (
+        <li data-hide-child-buttons="" key={index}>
+          <Tooltip label={'Im groot'} as={StyledTooltip}>
+            <button ref={buttonRef}>Hello</button>
+          </Tooltip>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const stories = storiesOf('Components/Tooltip', module);
+
+stories.add('controlled', () => <Example />);
+stories.add('with hiding button', () => <ExampleWithHidingButton />);

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,196 @@
+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(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(TimeComplete, undefined),
+    100
+  );
+}
+
+function clearLeavingVisibleTimer() {
+  window.clearTimeout(leavingVisibleTimer);
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// State machine
+
+export type TooltipStates =
+  | 'IDLE'
+  | 'FOCUSED'
+  | 'VISIBLE'
+  | 'LEAVING_VISIBLE'
+  | 'DISMISSED';
+
+// Nothing goin' on
+export const Idle = 'IDLE' as const;
+// We're considering showing the tooltip, but we're gonna wait a sec
+export const Focused = 'FOCUSED' as const;
+// It's on!
+export const Visible = 'VISIBLE' as const;
+// Focus has left, but we want to keep it visible for a sec
+export const LeavingVisible = 'LEAVING_VISIBLE' as const;
+// 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.
+export const Dismissed = 'DISMISSED' as const;
+
+export type TooltipEventTypes =
+  | 'BLUR'
+  | 'FOCUS'
+  | 'GLOBAL_MOUSE_MOVE'
+  | 'MOUSE_DOWN'
+  | 'MOUSE_ENTER'
+  | 'MOUSE_LEAVE'
+  | 'MOUSE_MOVE'
+  | 'REST'
+  | 'SELECT_WITH_KEYBOARD'
+  | 'TIME_COMPLETE';
+
+export const Blur = 'BLUR' as const;
+export const Focus = 'FOCUS' as const;
+export const GlobalMouseMove = 'GLOBAL_MOUSE_MOVE' as const;
+export const MouseDown = 'MOUSE_DOWN' as const;
+export const MouseEnter = 'MOUSE_ENTER' as const;
+export const MouseLeave = 'MOUSE_LEAVE' as const;
+export const MouseMove = 'MOUSE_MOVE' as const;
+export const Rest = 'REST' as const;
+export const SelectWithKeyboard = 'SELECT_WITH_KEYBOARD' as const;
+export const TimeComplete = 'TIME_COMPLETE' as const;
+
+export const subscription = createSubscription();
+export const state = {
+  current: {
+    state: Idle as TooltipStates,
+    id: '',
+  },
+};
+
+function clearContextId() {
+  state.current.id = '';
+}
+
+const chart: GenericStateChart<TooltipStates, TooltipEventTypes> = {
+  initial: Idle,
+  states: {
+    [Idle]: {
+      enter: () => {
+        clearContextId();
+      },
+      on: {
+        [MouseEnter]: Focused,
+        [Focus]: Visible,
+      },
+    },
+    [Focused]: {
+      enter: startRestTimer,
+      leave: clearRestTimer,
+      on: {
+        [MouseMove]: Focused,
+        [MouseLeave]: Idle,
+        [MouseDown]: Dismissed,
+        [Blur]: Idle,
+        [Rest]: Visible,
+      },
+    },
+    [Visible]: {
+      on: {
+        [Focus]: Focused,
+        [MouseEnter]: Focused,
+        [MouseLeave]: LeavingVisible,
+        [Blur]: LeavingVisible,
+        [MouseDown]: Dismissed,
+        [SelectWithKeyboard]: Dismissed,
+        [GlobalMouseMove]: LeavingVisible,
+      },
+    },
+    [LeavingVisible]: {
+      enter: () => {
+        startLeavingVisibleTimer();
+      },
+      leave: () => {
+        clearLeavingVisibleTimer();
+        clearContextId();
+      },
+      on: {
+        [MouseEnter]: Visible,
+        [Focus]: Visible,
+        [TimeComplete]: Idle,
+      },
+    },
+    [Dismissed]: {
+      leave: () => {
+        clearContextId();
+      },
+      on: {
+        [MouseLeave]: Idle,
+        [Blur]: 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/styles.css

@@ -0,0 +1,17 @@
+[data-hide-child-buttons=""] {
+  background-color: #ddd;
+  display: flex;
+  padding: 20px;
+  min-height: 62px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #aaa;
+  justify-content: flex-end;
+}
+
+[data-hide-child-buttons=""] button {
+  display: none;
+}
+
+[data-hide-child-buttons=""]:hover button {
+  display: block;
+}

package/src/Tooltip/useTooltip.ts

@@ -0,0 +1,128 @@
+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,
+  Blur,
+  Focus,
+  LeavingVisible,
+  MouseDown,
+  MouseEnter,
+  MouseLeave,
+  MouseMove,
+  SelectWithKeyboard,
+  Visible,
+} 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 === Visible ||
+          state.current.state === LeavingVisible) &&
+          state.current.id === id
+      );
+    });
+  }, [id]);
+
+  function handleMouseEnter() {
+    send(MouseEnter, { id });
+  }
+
+  function handleMouseMove() {
+    send(MouseMove, { id });
+  }
+
+  function handleMouseLeave() {
+    send(MouseLeave);
+  }
+
+  function handleMouseDown() {
+    // Allow quick click from one tool to another
+    if (state.current.id === id) {
+      send(MouseDown);
+    }
+  }
+
+  function handleFocus() {
+    send(Focus, { id });
+  }
+
+  function handleBlur() {
+    // Allow quick click from one tool to another
+    if (state.current.id === id) {
+      send(Blur, undefined);
+    }
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      send(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);
+    }
+  }
+}