@basic-ui/core 0.0.29 → 0.0.33

package/src/ComboBox/context.ts

@@ -0,0 +1,33 @@
+import { createContext, useContext } from 'react';
+import { ActionTypes, StateTypes, ReducerState } from './hooks';
+import { SelectEventHandler } from './Combobox';
+import { Scope } from '../hooks';
+
+export interface ComboBoxContextProps {
+  data: Omit<ReducerState, 'state'>;
+  inputRef: React.MutableRefObject<HTMLInputElement | null>;
+  popoverRef: React.MutableRefObject<HTMLDivElement | null>;
+  buttonRef: React.MutableRefObject<HTMLButtonElement | null>;
+  onSelect?: SelectEventHandler;
+  optionsRef: React.MutableRefObject<{
+    [itemId: string]: {
+      value: string | unknown;
+      text: string;
+    };
+  }>;
+  listScope: Scope<HTMLElement>;
+  state: StateTypes;
+  transition: (action: ActionTypes, payload?: any) => void;
+  listboxIdRef: React.MutableRefObject<string | undefined>;
+  labelIdRef: React.MutableRefObject<string | undefined>;
+  autocompletePropRef: React.MutableRefObject<boolean>;
+  persistSelectionRef: React.MutableRefObject<boolean>;
+  clearOnEscapeRef: React.MutableRefObject<boolean>;
+  isVisible: boolean;
+  openOnFocus: boolean;
+  selectOnBlur: boolean;
+}
+
+const comboboxContext = createContext<ComboBoxContextProps>(null as any);
+export const { Provider: ComboBoxProvider } = comboboxContext;
+export const useComboBoxContext = () => useContext(comboboxContext);

package/src/ComboBox/hooks.tsx

@@ -0,0 +1,428 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/* eslint-disable default-case */
+import { useEffect } from 'react';
+import {
+  StateChart as GenericStateChart,
+  StateMachineState,
+} from '../hooks/useReducerMachine';
+import { getCircularIndex } from '../utils/getCircularIndex';
+import { useComboBoxContext } from './context';
+import { scopeQuery } from './scopeQuery';
+
+////////////////////////////////////////////////////////////////////////////////
+// States
+
+// Nothing going on, waiting for the user to type or use the arrow keys
+export const IDLE = 'IDLE';
+
+// The component is suggesting options as the user types
+const SUGGESTING = 'SUGGESTING';
+
+// The user is using the keyboard to navigate the list, not typing
+export const NAVIGATING = 'NAVIGATING';
+
+export type StateTypes = typeof IDLE | typeof SUGGESTING | typeof NAVIGATING;
+
+////////////////////////////////////////////////////////////////////////////////
+// Actions:
+
+// Used to sync the state with controlled state, right after mounting
+export const INIT = 'INIT';
+
+// User cleared the value w/ backspace, but input still has focus
+export const CLEAR = 'CLEAR';
+
+// User cleared the value w/ backspace, but input still has focus
+export const CLEAR_SELECTION = 'CLEAR_SELECTION';
+
+// User is typing
+export const CHANGE = 'CHANGE';
+
+// User is navigating w/ the keyboard
+export const NAVIGATE = 'NAVIGATE';
+
+// User can be navigating with keyboard and then click instead, we want the
+// value from the click, not the current nav item
+const SELECT_WITH_KEYBOARD = 'SELECT_WITH_KEYBOARD';
+export const SELECT_WITH_CLICK = 'SELECT_WITH_CLICK';
+
+// Pretty self-explanatory, user can hit escape or blur to close the popover
+const ESCAPE = 'ESCAPE';
+const BLUR = 'BLUR';
+
+export const FOCUS = 'FOCUS';
+
+export const OPEN_WITH_BUTTON = 'OPEN_WITH_BUTTON';
+
+export const CLOSE_WITH_BUTTON = 'CLOSE_WITH_BUTTON';
+
+export type ActionTypes =
+  | typeof CLEAR
+  | typeof CLEAR_SELECTION
+  | typeof CHANGE
+  | typeof INIT
+  | typeof NAVIGATE
+  | typeof SELECT_WITH_KEYBOARD
+  | typeof SELECT_WITH_CLICK
+  | typeof ESCAPE
+  | typeof BLUR
+  | typeof FOCUS
+  | typeof OPEN_WITH_BUTTON
+  | typeof CLOSE_WITH_BUTTON;
+
+////////////////////////////////////////////////////////////////////////////////
+export const stateChart: GenericStateChart<StateTypes, ActionTypes> = {
+  initial: IDLE,
+  states: {
+    [IDLE]: {
+      on: {
+        [BLUR]: IDLE,
+        [CLEAR]: IDLE,
+        [INIT]: IDLE,
+        [CLEAR_SELECTION]: IDLE,
+        [CHANGE]: SUGGESTING,
+        [FOCUS]: SUGGESTING,
+        [NAVIGATE]: NAVIGATING,
+        [OPEN_WITH_BUTTON]: SUGGESTING,
+      },
+    },
+    [SUGGESTING]: {
+      on: {
+        [CHANGE]: SUGGESTING,
+        [FOCUS]: SUGGESTING,
+        [INIT]: SUGGESTING,
+        [NAVIGATE]: NAVIGATING,
+        [CLEAR]: IDLE,
+        [CLEAR_SELECTION]: SUGGESTING,
+        [ESCAPE]: IDLE,
+        [BLUR]: IDLE,
+        [SELECT_WITH_CLICK]: IDLE,
+        [CLOSE_WITH_BUTTON]: IDLE,
+      },
+    },
+    [NAVIGATING]: {
+      on: {
+        [CHANGE]: SUGGESTING,
+        [FOCUS]: SUGGESTING,
+        [INIT]: NAVIGATING,
+        [CLEAR]: IDLE,
+        [CLEAR_SELECTION]: NAVIGATING,
+        [BLUR]: IDLE,
+        [ESCAPE]: IDLE,
+        [NAVIGATE]: NAVIGATING,
+        [SELECT_WITH_KEYBOARD]: IDLE,
+        [SELECT_WITH_CLICK]: IDLE,
+        [CLOSE_WITH_BUTTON]: IDLE,
+      },
+    },
+  },
+};
+
+export interface ReducerState
+  extends StateMachineState<StateTypes, ActionTypes> {
+  item: string;
+  navigationItem: string;
+  text: string;
+}
+
+interface ActionObject {
+  type: ActionTypes;
+  state: StateTypes;
+  nextState: StateTypes;
+  [rest: string]: any;
+}
+
+export function comboboxReducer(
+  data: Readonly<ReducerState>,
+  action: ActionObject
+): ReducerState {
+  const nextState = {
+    ...data,
+    state: action.nextState,
+    lastActionType: action.type,
+  };
+
+  switch (action.type) {
+    case INIT:
+    case CHANGE:
+      return {
+        ...nextState,
+        text: action.text,
+        navigationItem: '',
+        item: '',
+      };
+    case NAVIGATE:
+    case OPEN_WITH_BUTTON:
+      if (action.persistSelection) {
+        return {
+          ...nextState,
+          navigationItem: data.item,
+        };
+      }
+
+      return {
+        ...nextState,
+        navigationItem: action.item,
+      };
+    case CLEAR_SELECTION:
+      return {
+        ...nextState,
+        navigationItem: '',
+      };
+    case CLEAR:
+      return {
+        ...nextState,
+        text: '',
+        navigationItem: '',
+        item: '',
+      };
+    case BLUR:
+      return {
+        ...nextState,
+        text: action.text,
+        navigationItem: '',
+        item: action.item,
+      };
+    case CLOSE_WITH_BUTTON:
+    case ESCAPE:
+      return {
+        ...nextState,
+        navigationItem: '',
+        item: '',
+      };
+    case SELECT_WITH_CLICK:
+    case SELECT_WITH_KEYBOARD:
+      return {
+        ...nextState,
+        text: action.text,
+        item: action.item,
+        navigationItem: '',
+      };
+    case FOCUS:
+      return {
+        ...nextState,
+        navigationItem: action.item,
+      };
+
+    default:
+      throw new Error(`Unknown action ${action.type}`);
+  }
+}
+
+const visibleStates = [SUGGESTING, NAVIGATING];
+export const isVisible = (state: any) => visibleStates.indexOf(state) >= 0;
+
+////////////////////////////////////////////////////////////////////////////////
+// The rest is all implementation details
+
+// Move focus back to the input if we start navigating w/ the
+// keyboard after focus has moved to any focusable content in
+// the popup.
+export function useFocusManagement(
+  lastActionType: ActionTypes,
+  inputRef: React.MutableRefObject<HTMLInputElement | null>
+) {
+  // useEffect so that the cursor goes to the end of the input instead
+  // of awkwardly at the beginning, unclear to me why ...
+  useEffect(() => {
+    if (
+      lastActionType === NAVIGATE ||
+      lastActionType === ESCAPE ||
+      lastActionType === SELECT_WITH_CLICK ||
+      lastActionType === OPEN_WITH_BUTTON
+    ) {
+      inputRef.current && inputRef.current.focus();
+    }
+  });
+}
+
+function getNextItem(
+  currentItem: string,
+  incr: number,
+  optionsItems: HTMLElement[],
+  autocomplete: boolean
+): string {
+  const index =
+    currentItem === ''
+      ? -1
+      : optionsItems.findIndex((n) => String(n.id) === currentItem);
+
+  const optionsLen = optionsItems.length;
+
+  // Nothing selected, either go to start, or end
+  if (index < 0) {
+    if (incr > 0) {
+      // Go to start
+      return optionsItems[0].id;
+    } else {
+      // Go to end
+      return optionsItems[optionsLen - 1].id;
+    }
+  } else if (autocomplete) {
+    const nextIndex = index + incr;
+
+    if (nextIndex < 0 || nextIndex >= optionsLen) {
+      // Next is outside the bounds of list, return nothing selected
+      return '';
+    }
+  }
+
+  // I'm sure it won't be null, we already check optionsLen above
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return optionsItems[getCircularIndex(index + incr, optionsLen)!].id;
+}
+
+// We want the same events when the input or the popup have focus (HOW COOL ARE
+// HOOKS BTW?) This is probably the hairiest piece but it's not bad.
+export function useKeyDown() {
+  const {
+    data: { text, navigationItem },
+    onSelect,
+    optionsRef,
+    inputRef,
+    state,
+    transition,
+    autocompletePropRef,
+    clearOnEscapeRef,
+    persistSelectionRef,
+    listScope,
+  } = useComboBoxContext();
+
+  return function handleKeyDown(event: React.KeyboardEvent<any>) {
+    const optionNodes = listScope.current.queryAllNodes(scopeQuery);
+
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown': {
+        // Don't scroll the page
+        event.preventDefault();
+
+        const optionsLen = optionNodes.length;
+
+        // If the developer didn't render any options, there's no point in
+        // trying to navigate--but seriously what the heck? Give us some
+        // options fam.
+        if (optionsLen === 0) {
+          return;
+        }
+
+        if (state === IDLE) {
+          // Opening a closed list
+          transition(NAVIGATE, {
+            persistSelection: persistSelectionRef.current,
+          });
+        } else {
+          // ArrowUp decreases index, ArrowDown increases
+          const incr = event.key === 'ArrowUp' ? -1 : 1;
+
+          // When autocompletting, we'll not cycle through the list directly
+          const autocomplete = autocompletePropRef.current;
+
+          // Get next selected item
+          const nextItem = getNextItem(
+            navigationItem,
+            incr,
+            optionNodes,
+            autocomplete
+          );
+
+          const value =
+            nextItem !== '' ? optionsRef.current[nextItem].text : null;
+
+          transition(NAVIGATE, { value, item: nextItem });
+        }
+        break;
+      }
+      case 'Escape': {
+        if (state !== IDLE) {
+          transition(ESCAPE);
+        } else if (state === IDLE && text !== '') {
+          if (!inputRef.current || !clearOnEscapeRef.current) {
+            break;
+          }
+
+          // emulate a inputRef change event, might not work in future versions of React
+          const lastValue = inputRef.current.value;
+          inputRef.current.value = '';
+
+          const tracker = (inputRef.current as any)._valueTracker;
+          if (tracker) {
+            tracker.setValue(lastValue);
+          }
+
+          const event = new Event('change', { bubbles: true });
+          inputRef.current.dispatchEvent(event);
+        }
+        break;
+      }
+      case 'Enter': {
+        if (state === NAVIGATING && navigationItem !== '') {
+          const {
+            value: navigationValue,
+            text: navigationText,
+          } = optionsRef.current[navigationItem];
+
+          // don't want to submit forms
+          event.preventDefault();
+          onSelect && onSelect(navigationText, navigationItem, navigationValue);
+          transition(SELECT_WITH_KEYBOARD, {
+            text: navigationText,
+            item: navigationItem,
+          });
+        }
+        break;
+      }
+    }
+  };
+}
+
+export function useBlur() {
+  const {
+    data: { navigationItem, text: stateText },
+    transition,
+    optionsRef,
+    popoverRef,
+    inputRef,
+    buttonRef,
+    onSelect,
+    selectOnBlur, // not implemented yet
+  } = useComboBoxContext();
+
+  return function handleBlur() {
+    requestAnimationFrame(() => {
+      // we on want to close only if focus rests outside the combobox
+      if (
+        document.activeElement !== inputRef.current &&
+        document.activeElement !== buttonRef.current &&
+        popoverRef.current
+      ) {
+        if (popoverRef.current.contains(document.activeElement)) {
+          // focus landed inside the combobox, keep it open
+          // in the future, we can make it not close, select, or anything
+          // this way we can have like... checkboxes available in the
+          // menu item, etc.
+        } else {
+          // focus landed outside the combobox, close it.
+          if (!selectOnBlur || navigationItem === '') {
+            // we don't wanna select on blur, or navigationIndex is invalid
+            transition(BLUR, { text: stateText, item: '' });
+          } else {
+            // select the currently selected item
+            const {
+              value: navigationValue,
+              text: navigationText,
+            } = optionsRef.current[navigationItem];
+
+            onSelect &&
+              onSelect(navigationText, navigationItem, navigationValue);
+
+            transition(BLUR, {
+              text: navigationText,
+              item: navigationItem,
+            });
+          }
+        }
+      }
+    });
+  };
+}

package/src/ComboBox/index.ts

@@ -0,0 +1,8 @@
+export * from './Combobox';
+export * from './ComboboxButton';
+export * from './ComboboxInput';
+export * from './ComboboxLabel';
+export * from './ComboboxList';
+export * from './ComboboxOption';
+export * from './ComboboxPopover';
+export * from './context';

package/src/ComboBox/makeHash.ts

@@ -0,0 +1,19 @@
+// We don't want to track the active descendant with indexes because nothing is
+// more annoying in a combobox than having it change values RIGHT AS YOU HIT
+// ENTER. That only happens if you use the index as your data, rather than
+// *your data as your data*. We use this to generate a unique ID based on the
+// value of each item.  This function is short, sweet, and good enough™ (I also
+// don't know how it works, tbqh)
+// https://stackoverflow.com/questions/6122571/simple-non-secure-hash-function-for-javascript
+export function makeHash(str: string) {
+  let hash = 0;
+  if (str.length === 0) {
+    return hash;
+  }
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return hash;
+}

package/src/ComboBox/scopeQuery.ts

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

package/src/ComboBox/styles.css

@@ -0,0 +1,30 @@
+[data-reach-combobox] {
+  position: relative;
+}
+
+[data-reach-combobox-input] {
+  width: 400px;
+  font-size: 100%;
+  padding: 0.33rem;
+}
+
+[data-reach-combobox-popover] {
+  position: absolute;
+  top: 100%;
+  left: 0px;
+  width: auto;
+  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.15);
+  border: none;
+}
+
+[data-reach-combobox-list] {
+  padding: 0 8px;
+}
+
+[data-reach-combobox-option] {
+  list-style: none;
+}
+
+[data-reach-combobox-option][data-highlighted] {
+  background-color: #f1f2f4;
+}

package/src/FocusLock/FocusLock.tsx

@@ -0,0 +1,59 @@
+import { useRef } from 'react';
+import type * as React from 'react';
+import { useFocusLock } from './useFocusLock';
+
+export interface FocusLockProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+  childRef: React.MutableRefObject<HTMLElement | null>;
+  enabled?: boolean;
+}
+
+export const FocusLock: React.FC<FocusLockProps> = function FocusLock(props) {
+  const {
+    as: Comp = 'div',
+    childRef,
+    enabled = false,
+    style = {},
+    children,
+    ...otherProps
+  } = props;
+  const lockStartRef = useRef<HTMLElement>(null);
+  const lockEndRef = useRef<HTMLElement>(null);
+
+  useFocusLock(childRef, { enabled, lockStartRef, lockEndRef });
+
+  const lockStyle = {
+    width: 1,
+    height: 0,
+    padding: 0,
+    overflow: 'hidden',
+    position: 'fixed',
+    top: 1,
+    left: 1,
+    ...style,
+  };
+
+  return (
+    <>
+      <Comp
+        ref={lockStartRef}
+        data-focus-lock-start=""
+        aria-hidden={true}
+        tabIndex={0}
+        style={lockStyle}
+        {...otherProps}
+      />
+      {children}
+      <Comp
+        ref={lockEndRef}
+        data-focus-lock-end=""
+        aria-hidden={true}
+        tabIndex={0}
+        style={lockStyle}
+        {...otherProps}
+      />
+    </>
+  );
+};

package/src/FocusLock/index.ts

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

package/src/FocusLock/tabUtils.ts

@@ -0,0 +1,28 @@
+export const tabblable = [
+  'button:enabled:not([readonly])',
+  'select:enabled:not([readonly])',
+  'textarea:enabled:not([readonly])',
+  'input:enabled:not([readonly])',
+
+  'a[href]',
+  'area[href]',
+
+  'iframe',
+  'object',
+  'embed',
+
+  '[tabindex]',
+  '[contenteditable]',
+  '[autofocus]',
+].join(',');
+
+/* This is naive and will not consider tabIndex */
+export const getTabblableNodes = (
+  parentNode: HTMLElement | null
+): HTMLElement[] => {
+  if (!parentNode) {
+    return [];
+  }
+
+  return Array.from(parentNode.querySelectorAll(tabblable));
+};

package/src/FocusLock/useFocusLock.ts

@@ -0,0 +1,61 @@
+import { useEffect } from 'react';
+import { getTabblableNodes } from './tabUtils';
+
+export interface FocusLockOptions {
+  enabled: boolean;
+  lockStartRef: React.MutableRefObject<HTMLElement | null>;
+  lockEndRef: React.MutableRefObject<HTMLElement | null>;
+}
+
+const focusLockStack: HTMLElement[] = [];
+export function useFocusLock(
+  ref: React.MutableRefObject<HTMLElement | null>,
+  opts: FocusLockOptions
+) {
+  const { enabled = true, lockStartRef, lockEndRef } = opts;
+
+  useEffect(() => {
+    const rootEl = ref.current;
+    if (enabled && rootEl) {
+      focusLockStack.push(rootEl);
+
+      const listener = (event: FocusEvent) => {
+        const isActiveFocusLock =
+          focusLockStack[focusLockStack.length - 1] === rootEl;
+        if (!isActiveFocusLock) {
+          // Not the currently focused lock. Forget about it.
+          return;
+        }
+
+        if (event.target === lockEndRef.current) {
+          rootEl.focus();
+        } else if (event.target === lockStartRef.current) {
+          const nodes = getTabblableNodes(rootEl);
+
+          if (nodes.length > 0) {
+            const nodeToFocus = nodes.length - 1;
+            nodes[nodeToFocus].focus();
+          } else {
+            rootEl.focus();
+          }
+        } else if (
+          document !== event.target &&
+          rootEl !== event.target &&
+          !rootEl.contains(event.target as any)
+        ) {
+          event.preventDefault();
+          rootEl.focus();
+        }
+      };
+
+      document.addEventListener('focusin', listener);
+      return () => {
+        document.removeEventListener('focusin', listener);
+
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        focusLockStack.pop();
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled]);
+}

package/src/List/List.story.tsx

@@ -0,0 +1,17 @@
+import { List, ListItem } from './';
+import { storiesOf } from '@storybook/react';
+// import './styles.css';
+
+const Example = () => {
+  return (
+    <List>
+      <ListItem>Item 1</ListItem>
+      <ListItem>Item 2</ListItem>
+      <ListItem>Item 3</ListItem>
+    </List>
+  );
+};
+
+const stories = storiesOf('Components/List', module);
+
+stories.add('controlled', () => <Example />);