@basic-ui/core 0.0.28 → 0.0.32

package/src/Accordion/AccordionHeader.tsx

@@ -0,0 +1,165 @@
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import type * as React from 'react';
+import { wrapEvent, assignMultipleRefs, getCircularIndex } from '../utils';
+import { useAccordionContext, useAccordionItemContext } from './context';
+import { headerScopeQuery as scopeQuery } from './scopeQuery';
+
+export interface AccordionHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+}
+
+export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
+  function AccordionHeader(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      onKeyDown,
+      onClick: onClickProp,
+      onFocus,
+      onBlur,
+      ...otherProps
+    } = props;
+    const accordionContext = useAccordionContext();
+    const accordionItemContext = useAccordionItemContext();
+    const ref = useRef<HTMLDivElement>();
+    const [index, setIndex] = useState<number | undefined>();
+
+    if (!accordionItemContext) {
+      throw new Error('Missing parent <Accordion /> component');
+    }
+
+    useEffect(() => {
+      if (accordionContext) {
+        const allHeaders =
+          accordionContext.scope.current.queryAllNodes(scopeQuery) || [];
+
+        const index = allHeaders.findIndex((e) => e === ref.current);
+        setIndex(index);
+      }
+    }, [accordionContext]);
+
+    const onClick = wrapEvent(
+      onClickProp,
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        let index = 0;
+        if (accordionItemContext.expanded) {
+          index = -1;
+        } else if (accordionContext) {
+          const allHeaders =
+            accordionContext.scope.current.queryAllNodes(scopeQuery) || [];
+
+          index = allHeaders.findIndex((e) => e === ref.current);
+          if (index === accordionContext.expandedIndex) {
+            index = -1;
+          }
+          accordionContext.onChange && accordionContext.onChange(e, index);
+        }
+
+        accordionItemContext.onChange &&
+          accordionItemContext.onChange(e, index >= 0);
+      }
+    );
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      switch (e.key) {
+        case 'Enter':
+        case ' ': {
+          onClick((e as unknown) as React.MouseEvent<HTMLDivElement>);
+          e.preventDefault();
+          break;
+        }
+        case 'ArrowUp':
+        case 'ArrowDown':
+        case 'Home':
+        case 'End': {
+          if (!accordionContext) {
+            return;
+          }
+          const allHeaders = accordionContext.scope.current.queryAllNodes(
+            scopeQuery
+          );
+
+          e.preventDefault();
+
+          if (allHeaders.length === 0) {
+            return;
+          }
+
+          let nextIndex = allHeaders.findIndex((e) => e === ref.current);
+          switch (e.key) {
+            case 'ArrowUp':
+              nextIndex += -1;
+              break;
+            case 'ArrowDown':
+              nextIndex += +1;
+              break;
+            case 'Home':
+              nextIndex = 0;
+              break;
+            case 'End':
+              nextIndex = -1;
+              break;
+          }
+
+          // We're sure it will not be null, because we already checked for allHeaders.length > 0 above
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          nextIndex = getCircularIndex(nextIndex, allHeaders.length)!;
+          allHeaders[nextIndex] && allHeaders[nextIndex].focus();
+          break;
+        }
+        default:
+          return;
+      }
+    };
+
+    const handleFocus = () => {
+      if (accordionContext) {
+        if (!accordionContext.childrenHeaderHasFocus) {
+          // this is needed to avoid rerendering the parent and
+          // messing up with the internal count for children/parent count
+          accordionContext.setChildrenHeaderHasFocus(true);
+        }
+      }
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+      if (accordionContext) {
+        const allHeaders = accordionContext.scope.current.queryAllNodes(
+          scopeQuery
+        );
+        const newFocusIsHeader =
+          allHeaders.findIndex((header) => header === e.relatedTarget) >= 0;
+
+        // only remove focus flag if the focus went to some element
+        // that is not an accordion header
+        if (!newFocusIsHeader) {
+          accordionContext.setChildrenHeaderHasFocus(false);
+        }
+      }
+    };
+
+    const expanded = Boolean(
+      accordionItemContext.expanded ||
+        (accordionContext && accordionContext.expandedIndex === index)
+    );
+
+    return (
+      <Comp
+        ref={assignMultipleRefs(ref, forwardedRef)}
+        {...otherProps}
+        id={accordionItemContext.headerId}
+        aria-controls={accordionItemContext.bodyId}
+        role="button"
+        data-accordion-header=""
+        tabIndex="0"
+        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+        onFocus={wrapEvent(onFocus, handleFocus)}
+        onBlur={wrapEvent(onBlur, handleBlur)}
+        onClick={onClick}
+        aria-expanded={String(expanded)}
+      />
+    );
+  }
+);

package/src/Accordion/AccordionItem.tsx

@@ -0,0 +1,43 @@
+import { Fragment, forwardRef } from 'react';
+import type * as React from 'react';
+import { AccordionItemContextProps, AccordionItemProvider } from './context';
+import { useId } from '../hooks';
+
+export interface AccordionItemProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+  expanded?: boolean;
+  onChange?: (
+    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    value: boolean
+  ) => void;
+}
+
+export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
+  function AccordionItem(props, forwardedRef) {
+    const {
+      as: Comp = Fragment,
+      expanded = false,
+      onChange,
+      ...otherProps
+    } = props;
+    const id = useId();
+
+    const headerId = id ? `accordion-header-${id}` : undefined;
+    const bodyId = id ? `accordion-body-${id}` : undefined;
+    const contextValue: AccordionItemContextProps = {
+      headerId,
+      bodyId,
+      expanded,
+      onChange,
+    };
+
+    return (
+      <AccordionItemProvider value={contextValue}>
+        <Comp ref={forwardedRef} {...otherProps} />
+      </AccordionItemProvider>
+    );
+  }
+);

package/src/Accordion/context.ts

@@ -0,0 +1,35 @@
+import { useContext, createContext } from 'react';
+import { Scope } from '../hooks/useScope';
+
+// AccordionGroup Component
+export interface AccordionContextProps {
+  childrenHeaderHasFocus: boolean;
+  setChildrenHeaderHasFocus: (value: boolean) => void;
+  scope: Scope<HTMLElement>;
+  expandedIndex: number;
+  onChange?: (
+    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    index: number
+  ) => void;
+}
+
+const accordionContext = createContext<AccordionContextProps | null>(null);
+export const { Provider: AccordionProvider } = accordionContext;
+export const useAccordionContext = () => useContext(accordionContext);
+
+// Accordion Component
+export interface AccordionItemContextProps {
+  headerId: string | undefined;
+  bodyId: string | undefined;
+  expanded: boolean;
+  onChange?: (
+    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    value: boolean
+  ) => void;
+}
+
+const accordionItemContext = createContext<AccordionItemContextProps | null>(
+  null
+);
+export const { Provider: AccordionItemProvider } = accordionItemContext;
+export const useAccordionItemContext = () => useContext(accordionItemContext);

package/src/Accordion/index.ts

@@ -0,0 +1,4 @@
+export * from './Accordion';
+export * from './AccordionItem';
+export * from './AccordionHeader';
+export * from './AccordionBody';

package/src/Accordion/scopeQuery.ts

@@ -0,0 +1,7 @@
+export function headerScopeQuery(type: string, props: Record<string, unknown>) {
+  return props['data-accordion-header'] === '';
+}
+
+export function bodyScopeQuery(type: string, props: Record<string, unknown>) {
+  return props['data-accordion-body'] === '';
+}

package/src/Accordion/styles.css

@@ -0,0 +1,21 @@
+[data-accordion-root] {
+  box-sizing: border-box;
+  max-width: 300px;
+  padding: 32px;
+  border: solid 1px #aaa;
+  margin: 32px;
+}
+[data-accordion-root][data-children-has-focus='true'] {
+  border-color: red;
+}
+
+[data-accordion-body]:not([hidden]) {
+  box-sizing: border-box;
+  padding: 16px 0;
+  display: flex;
+  flex-direction: column;
+}
+
+[data-accordion-header] {
+  cursor: pointer;
+}

package/src/CheckBox/CheckBox.tsx

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react';
+import type * as React from 'react';
+import { useControlledState } from '../hooks';
+
+export interface CheckBoxProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+}
+
+export const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
+  function CheckBox(props, forwardedRef) {
+    const {
+      as: Comp = 'input',
+      checked: checkedProp,
+      defaultChecked = false,
+      onChange: onChangeProp,
+      ...otherProps
+    } = props;
+    const [checked, onChange] = useControlledState(
+      checkedProp,
+      onChangeProp,
+      defaultChecked,
+      (setValue) => (e) => {
+        setValue(e.target.checked);
+      }
+    );
+
+    return (
+      <Comp
+        ref={forwardedRef}
+        type="checkbox"
+        checked={checked}
+        aria-checked={checked}
+        onChange={onChange}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/CheckBox/index.ts

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

package/src/ComboBox/ComboBox.story.tsx

@@ -0,0 +1,118 @@
+import { useMemo, useState } from 'react';
+import type * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { ComboboxOption } from './ComboboxOption';
+import { ComboboxList } from './ComboboxList';
+import { ComboboxPopover } from './ComboboxPopover';
+import { ComboboxInput } from './ComboboxInput';
+import { ComboboxLabel } from './ComboboxLabel';
+import { Combobox } from './Combobox';
+import cities from './cities';
+import './styles.css';
+
+const stories = storiesOf('Components/Combobox', module);
+
+function useCityMatch(searchTerm: string) {
+  return useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return term === ''
+      ? []
+      : cities.filter(
+          (city) =>
+            city.city.toLowerCase().indexOf(term) !== -1 ||
+            city.state.toLowerCase().indexOf(term) !== -1
+        );
+  }, [searchTerm]);
+}
+
+export function UncontrolledClientSideExample({ initialValue = '' }) {
+  const [term, setTerm] = useState(initialValue);
+  const [selected, setSelected] = useState(initialValue);
+  const results = useCityMatch(term);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTerm(event.target.value);
+  };
+
+  const handleSelect = (value: string) => {
+    setSelected(value);
+  };
+
+  return (
+    <div>
+      <h2>Clientside Search</h2>
+      <p>Selection: {selected}</p>
+      <p>Term: {term}</p>
+      <Combobox onSelect={handleSelect} selectOnBlur>
+        <ComboboxLabel>Enter a city name</ComboboxLabel>
+        <br />
+        <ComboboxInput onChange={handleChange} defaultValue={initialValue} />
+        {results.length > 0 && (
+          <ComboboxPopover>
+            <ComboboxList persistSelection={true}>
+              {results.slice(0, 10).map((result, index) => (
+                <ComboboxOption
+                  key={`${result.city}, ${result.state}, ${index}`}
+                  id={`${result.city}, ${result.state}, ${index}`}
+                  text={`${result.city}, ${result.state}`}
+                  value={result}
+                />
+              ))}
+            </ComboboxList>
+          </ComboboxPopover>
+        )}
+      </Combobox>
+    </div>
+  );
+}
+
+export function ControlledClientSideExample({ initialValue = '' }) {
+  const [term, setTerm] = useState(initialValue);
+  const [selected, setSelected] = useState(initialValue);
+  const results = useCityMatch(term);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTerm(event.target.value);
+    setSelected('');
+  };
+
+  const handleSelect = (value: string) => {
+    setSelected(value);
+  };
+
+  return (
+    <div>
+      <h2>Clientside Search</h2>
+      <p>Selection: {selected}</p>
+      <p>Term: {term}</p>
+      <Combobox onSelect={handleSelect} selectOnBlur>
+        <ComboboxLabel>Enter a city name</ComboboxLabel>
+        <br />
+        <ComboboxInput onChange={handleChange} value={selected || term} />
+        {results.length > 0 && (
+          <ComboboxPopover>
+            <ComboboxList persistSelection={true}>
+              {results.slice(0, 10).map((result, index) => (
+                <ComboboxOption
+                  key={`${result.city}, ${result.state}, ${index}`}
+                  id={`${result.city}, ${result.state}, ${index}`}
+                  text={`${result.city}, ${result.state}`}
+                  value={result}
+                />
+              ))}
+            </ComboboxList>
+          </ComboboxPopover>
+        )}
+      </Combobox>
+    </div>
+  );
+}
+
+stories.add('Uncontrolled Clientside', () => <UncontrolledClientSideExample />);
+stories.add('Uncontrolled Clientside - Initial', () => (
+  <UncontrolledClientSideExample initialValue="Aberdeen" />
+));
+stories.add('Controlled Clientside', () => <ControlledClientSideExample />);
+stories.add('Controlled Clientside - Initial', () => (
+  <ControlledClientSideExample initialValue="Aberdeen" />
+));

package/src/ComboBox/Combobox.tsx

@@ -0,0 +1,153 @@
+import { forwardRef, useRef, useMemo } from 'react';
+import type * as React from 'react';
+import {
+  stateChart,
+  comboboxReducer,
+  isVisible,
+  INIT,
+  ActionTypes,
+} from './hooks';
+import { ComboBoxProvider, ComboBoxContextProps } from './context';
+import { useReducerMachine } from '../hooks/useReducerMachine';
+import { useId, Scope, getScope } from '../hooks';
+
+export type SelectEventHandler = (
+  text: string,
+  itemId: string,
+  obj: any
+) => void;
+
+export type ComboboxProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onSelect'
+> & {
+  onSelect?: SelectEventHandler;
+  openOnFocus?: boolean;
+  selectOnBlur?: boolean;
+  children?: React.ReactNode;
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+};
+
+export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
+  function Combobox(
+    {
+      // Called whenever the user selects an item from the list
+      onSelect,
+
+      // opens the list when the input receives focused (but only if there are
+      // items in the list)
+      openOnFocus = false,
+
+      // if set to true, it will select an item after blurring
+      selectOnBlur = false,
+
+      children,
+      as: Comp = 'div',
+      innerAs,
+      ...rest
+    }: ComboboxProps,
+    ref
+  ) {
+    // We store the values of all the ComboboxOptions on this ref. This makes it
+    // possible to perform the keyboard navigation from the input on the list. We
+    // manipulate this array through context so that we don't have to enforce a
+    // parent/child relationship between ComboboxList and ComboboxOption.
+    const optionsRef = useRef<{
+      [itemId: string]: {
+        value: string | unknown;
+        text: string;
+      };
+    }>({});
+
+    const listScope: Scope<HTMLElement> = useRef(getScope({ current: null }));
+
+    // Need this to focus it
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const popoverRef = useRef<HTMLDivElement>(null);
+
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    // When <ComboboxInput autocomplete={false} /> we don't want cycle back to
+    // the user's value while navigating (because it's always the user's value),
+    // but we need to know this in useKeyDown which is far away from the prop
+    // here, so we do something sneaky and write it to this ref on context so we
+    // can use it anywhere else 😛. Another new trick for me and I'm excited
+    // about this one too!
+    const autocompletePropRef = useRef<boolean>(false);
+
+    const persistSelectionRef = useRef<boolean>(false);
+
+    const clearOnEscapeRef = useRef<boolean>(false);
+
+    const listboxIdRef = useRef<string | undefined>();
+
+    const labelIdRef = useRef<string | undefined>();
+
+    const defaultData = {
+      // initial state
+      state: stateChart.initial,
+      // the value the user has typed, we derived this also when the developer is
+      // controlling the value of ComboboxInput
+      text: '',
+      // the index the user has typed, we derived this also when the developer is
+      // controlling the value of ComboboxInput
+      item: '',
+      // the hash of the currently navigated item
+      navigationItem: '',
+      // the last submitted action
+      lastActionType: INIT as ActionTypes,
+    };
+
+    const [state, data, transition] = useReducerMachine(
+      stateChart,
+      comboboxReducer,
+      defaultData
+    );
+
+    listboxIdRef.current = useId();
+
+    labelIdRef.current = useId();
+
+    const context = useMemo(
+      (): ComboBoxContextProps => ({
+        data,
+        inputRef,
+        popoverRef,
+        buttonRef,
+        onSelect,
+        optionsRef,
+        listScope,
+        state,
+        transition,
+        listboxIdRef,
+        labelIdRef,
+        autocompletePropRef,
+        persistSelectionRef,
+        clearOnEscapeRef,
+        isVisible: isVisible(state),
+        openOnFocus,
+        selectOnBlur,
+      }),
+      [data, onSelect, listScope, state, transition, openOnFocus, selectOnBlur]
+    );
+
+    return (
+      <ComboBoxProvider value={context}>
+        <Comp
+          {...rest}
+          as={innerAs}
+          data-reach-combobox=""
+          ref={ref}
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-owns={listboxIdRef.current}
+          aria-expanded={context.isVisible}
+        >
+          {children}
+        </Comp>
+      </ComboBoxProvider>
+    );
+  }
+);

package/src/ComboBox/ComboboxButton.tsx

@@ -0,0 +1,60 @@
+import { forwardRef } from 'react';
+import type * as React from 'react';
+import { useComboBoxContext } from './context';
+import { useKeyDown, IDLE, OPEN_WITH_BUTTON, CLOSE_WITH_BUTTON } from './hooks';
+import { wrapEvent } from '../utils/wrapEvent';
+import { assignMultipleRefs } from '../utils/assignRef';
+
+export interface ComboboxButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+  children?: React.ReactNode;
+}
+
+export const ComboboxButton = forwardRef<
+  HTMLButtonElement,
+  ComboboxButtonProps
+>(function ComboboxButton(
+  { as: Comp = 'button', innerAs, onClick, onKeyDown, ...props },
+  ref
+) {
+  const {
+    transition,
+    data,
+    state,
+    buttonRef,
+    listboxIdRef,
+    isVisible,
+  } = useComboBoxContext();
+
+  const handleKeyDown = useKeyDown();
+
+  const handleClick = () => {
+    const payload = {
+      item: data.navigationItem,
+    };
+
+    if (state === IDLE) {
+      transition(OPEN_WITH_BUTTON, payload);
+    } else {
+      transition(CLOSE_WITH_BUTTON, payload);
+    }
+  };
+
+  return (
+    <Comp
+      as={innerAs}
+      data-reach-combobox-button=""
+      aria-controls={listboxIdRef.current}
+      aria-haspopup="listbox"
+      aria-expanded={isVisible}
+      ref={assignMultipleRefs(ref, buttonRef)}
+      onClick={wrapEvent(onClick, handleClick)}
+      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+      {...props}
+    />
+  );
+});