@basic-ui/core 0.0.29 → 0.0.33

package/src/RadioButton/RadioGroup.tsx

@@ -0,0 +1,56 @@
+import { forwardRef } from 'react';
+import type * as React from 'react';
+import { RadioGroupProvider, RadioValue } from './context';
+import { useControlledState, useId } from '../hooks';
+
+export interface RadioGroupProps
+  extends Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    'onChange' | 'value' | 'defaultValue'
+  > {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+  value?: RadioValue;
+  defaultValue?: RadioValue;
+  name?: string;
+  onChange?: (
+    e: React.ChangeEvent<HTMLInputElement>,
+    value: RadioValue
+  ) => void;
+}
+
+export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  function RadioGroup(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      onChange: onChangeProp,
+      value: valueProp,
+      name: nameProp,
+      defaultValue,
+      ...otherProps
+    } = props;
+    const [value, onChange] = useControlledState(
+      valueProp,
+      onChangeProp,
+      defaultValue,
+      (setValue) => (e, value) => {
+        setValue(value);
+      }
+    );
+
+    const fallbackId = useId();
+
+    return (
+      <RadioGroupProvider
+        value={{
+          value,
+          onChange,
+          name: nameProp || fallbackId,
+        }}
+      >
+        <Comp ref={forwardedRef} role="radiogroup" {...otherProps} />
+      </RadioGroupProvider>
+    );
+  }
+);

package/src/RadioButton/context.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+
+export type RadioValue = string | number | boolean;
+
+// RadioGroup Component
+export interface RadioGroupContextProps {
+  value: RadioValue | undefined;
+  onChange?: (
+    e: React.ChangeEvent<HTMLInputElement>,
+    value: RadioValue
+  ) => void;
+  name: string | undefined;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextProps | undefined>(
+  undefined
+);
+export const { Provider: RadioGroupProvider } = RadioGroupContext;
+export const useRadioGroupContext = () => useContext(RadioGroupContext);

package/src/RadioButton/index.ts

@@ -0,0 +1,2 @@
+export * from './RadioButton';
+export * from './RadioGroup';

package/src/SkipNav/SkipNav.tsx

@@ -0,0 +1,16 @@
+import { forwardRef } from 'react';
+import type * as React from 'react';
+
+export interface SkipNavProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+}
+
+export const SkipNav = forwardRef<HTMLDivElement, SkipNavProps>(
+  function SkipNav(props, forwardedRef) {
+    const { as: Comp = 'div', ...otherProps } = props;
+
+    return <Comp ref={forwardedRef} {...otherProps} />;
+  }
+);

package/src/SkipNav/index.tsx

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

package/src/Spinner/Spinner.story.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { Spinner, SpinnerButton } from './';
+import { storiesOf } from '@storybook/react';
+import './styles.css';
+
+const stories = storiesOf('Components/Spinner', module);
+
+const Example = ({ vertical = false }) => {
+  const [value, setValue] = useState(0);
+
+  return (
+    <Spinner
+      value={value}
+      minValue={0}
+      maxValue={5}
+      onChange={(e, value) => setValue(value)}
+      style={{
+        flexDirection: vertical ? 'column-reverse' : 'row',
+      }}
+    >
+      <SpinnerButton type="previous">-</SpinnerButton>
+      <div>{value}</div>
+      <SpinnerButton type="next">+</SpinnerButton>
+    </Spinner>
+  );
+};
+
+stories.add('horizontal', () => <Example />);
+
+stories.add('vertical', () => <Example vertical={true} />);

package/src/Spinner/Spinner.tsx

@@ -0,0 +1,112 @@
+import { forwardRef, useState, useRef } from 'react';
+import type * as React from 'react';
+import { SpinnerProvider } from './context';
+import { clamp as clampFunc } from '../utils/clamp';
+import { wrapEvent, assignMultipleRefs } from '../utils';
+
+export interface SpinnerProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+  value?: number;
+  minValue?: number;
+  maxValue?: number;
+  stepSize?: number;
+  onChange?: (
+    e:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLDivElement>,
+    value: number
+  ) => void;
+}
+
+export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
+  function Spinner(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      minValue = -1000,
+      maxValue = 1000,
+      stepSize = 10,
+      value = 0,
+      onChange,
+      onKeyDown,
+      onBlur,
+      onFocus,
+      ...otherProps
+    } = props;
+    const [spinnerHasFocus, setSpinnerHasFocus] = useState(false);
+    const ref = useRef<HTMLDivElement>();
+
+    const clamp = (value: number) => clampFunc(value, minValue, maxValue);
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      let nextValue = value;
+      switch (e.key) {
+        case 'ArrowUp':
+          nextValue += 1;
+          break;
+        case 'ArrowDown':
+          nextValue -= 1;
+          break;
+        case 'Home':
+          nextValue = minValue;
+          break;
+        case 'End':
+          nextValue = maxValue;
+          break;
+        case 'PageUp':
+          nextValue += stepSize;
+          break;
+        case 'PageDown':
+          nextValue -= stepSize;
+          break;
+        default:
+          return;
+      }
+
+      ref.current && ref.current.focus();
+      nextValue = clamp(nextValue);
+      if (nextValue !== value) {
+        e.preventDefault(); // prevent scrolling
+        onChange && onChange(e, nextValue);
+      }
+    };
+
+    const handleFocus = () => {
+      setSpinnerHasFocus(true);
+    };
+
+    const handleBlur = () => {
+      setSpinnerHasFocus(false);
+    };
+
+    return (
+      <SpinnerProvider
+        value={{
+          minValue,
+          value,
+          maxValue,
+          stepSize,
+          onChange,
+          clamp,
+          spinnerHasFocus,
+        }}
+      >
+        <Comp
+          ref={assignMultipleRefs(forwardedRef, ref)}
+          data-spinner-root=""
+          role="spinbutton"
+          aria-valuenow={value}
+          aria-valuemin={minValue}
+          aria-valuemax={maxValue}
+          tabIndex={0}
+          onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+          onFocus={wrapEvent(onFocus, handleFocus)}
+          onBlur={wrapEvent(onBlur, handleBlur)}
+          {...otherProps}
+        />
+      </SpinnerProvider>
+    );
+  }
+);

package/src/Spinner/SpinnerButton.tsx

@@ -0,0 +1,48 @@
+import { forwardRef } from 'react';
+import type * as React from 'react';
+import { useSpinnerContext } from './context';
+import { wrapEvent } from '../utils';
+
+export interface SpinnerButtonProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+  type: 'next' | 'previous';
+}
+
+export const SpinnerButton = forwardRef<HTMLButtonElement, SpinnerButtonProps>(
+  function SpinnerButton(props, forwardedRef) {
+    const { as: Comp = 'button', type, onClick, ...otherProps } = props;
+    const spinnerContext = useSpinnerContext();
+
+    if (!spinnerContext) {
+      throw new Error('Missing <Spinner /> in component tree');
+    }
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      const delta = type === 'next' ? 1 : -1;
+
+      spinnerContext.onChange &&
+        spinnerContext.onChange(e, spinnerContext.value + delta);
+    };
+
+    const disabled =
+      type === 'next'
+        ? spinnerContext.value + 1 > spinnerContext.maxValue
+        : spinnerContext.value - 1 < spinnerContext.minValue;
+
+    return (
+      <Comp
+        {...otherProps}
+        type="button"
+        ref={forwardedRef}
+        tabIndex={-1}
+        data-spinner-button=""
+        data-spinner-has-focus={spinnerContext.spinnerHasFocus ? '' : undefined}
+        disabled={disabled}
+        onClick={wrapEvent(onClick, handleClick)}
+      />
+    );
+  }
+);

package/src/Spinner/context.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react';
+
+// Spinner Component
+export interface SpinnerContextProps {
+  value: number;
+  minValue: number;
+  maxValue: number;
+  stepSize: number;
+  onChange?: (
+    e:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLDivElement>,
+    value: number
+  ) => void;
+  clamp: (value: number) => number;
+  spinnerHasFocus: boolean;
+}
+
+const spinbuttonContext = createContext<SpinnerContextProps | null>(null);
+export const { Provider: SpinnerProvider } = spinbuttonContext;
+export const useSpinnerContext = () => useContext(spinbuttonContext);

package/src/Spinner/index.ts

@@ -0,0 +1,2 @@
+export * from './Spinner';
+export * from './SpinnerButton';

package/src/Spinner/styles.css

@@ -0,0 +1,23 @@
+[data-spinner-root] {
+  display: inline-flex;
+}
+
+[data-spinner-root] > div {
+  padding: 4px;
+  text-align: center;
+  min-width: 25px;
+}
+
+[data-spinner-button] {
+  background-color: #ddd;
+  box-sizing: border-box;
+  border-width: 1px;
+  border-color: transparent;
+  border-radius: 4px;
+  border-style: solid;
+  width: 45px;
+}
+
+[data-spinner-button][data-spinner-has-focus]:not([disabled]) {
+  border-color: gray;
+}

package/src/Tabs/Tab.story.tsx

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { Tab, TabPanel, TabPanels, Tabs, TabList } from './';
+import { storiesOf } from '@storybook/react';
+import './styles.css';
+
+const stories = storiesOf('Components/Tab', module);
+
+export const ExampleHorizontal = ({ manualActivation = false }) => {
+  const [index, setIndex] = useState(0);
+  return (
+    <Tabs index={index} onChange={(e, idx) => setIndex(idx)}>
+      <TabList manualActivation={manualActivation}>
+        <Tab>One</Tab>
+        <Tab>Two</Tab>
+        <Tab>Three</Tab>
+      </TabList>
+
+      <TabPanels>
+        <TabPanel lazy>
+          <h1>one!</h1>
+          <button>yo</button>
+        </TabPanel>
+        <TabPanel lazy>
+          <h1>two!</h1>
+        </TabPanel>
+        <TabPanel lazy>
+          <h1>three!</h1>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export const ExampleVertical = ({ manualActivation = false }) => {
+  const [index, setIndex] = useState(0);
+  return (
+    <Tabs index={index} onChange={(e, idx) => setIndex(idx)}>
+      <div style={{ display: 'flex' }}>
+        <TabList
+          manualActivation={manualActivation}
+          vertical={true}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            marginRight: 16,
+          }}
+        >
+          <Tab>1</Tab>
+          <Tab>2</Tab>
+          <Tab>3</Tab>
+        </TabList>
+
+        <TabPanels>
+          <TabPanel>
+            <h1>one!</h1>
+            <button>yo</button>
+          </TabPanel>
+          <TabPanel>
+            <h1>two!</h1>
+          </TabPanel>
+          <TabPanel>
+            <h1>three!</h1>
+          </TabPanel>
+        </TabPanels>
+      </div>
+    </Tabs>
+  );
+};
+
+stories.add('horizontal, controlled', () => <ExampleHorizontal />);
+stories.add('horizontal, controlled, manual activation', () => (
+  <ExampleHorizontal manualActivation={true} />
+));
+
+stories.add('vertical, controlled', () => <ExampleVertical />);
+stories.add('vertical, controlled, manual activation', () => (
+  <ExampleVertical manualActivation={true} />
+));

package/src/Tabs/Tab.tsx

@@ -0,0 +1,131 @@
+import { forwardRef, useRef } from 'react';
+import type * as React from 'react';
+import { useTabsContext, useTabListContext } from './context';
+import { assignMultipleRefs, getCircularIndex, wrapEvent } from '../utils';
+import { scopeQuery } from './scopeQuery';
+
+function getNextIndex(
+  desiredIndex: number,
+  delta: number,
+  allTabs: HTMLButtonElement[]
+) {
+  for (let i = 0; i < allTabs.length; i++) {
+    const nextIndex = getCircularIndex(
+      desiredIndex + delta * i,
+      allTabs.length
+    );
+
+    if (nextIndex !== null && !allTabs[nextIndex].disabled) {
+      return nextIndex;
+    }
+  }
+
+  return null;
+}
+
+export interface TabProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+}
+
+export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
+  props,
+  forwardedRef
+) {
+  const {
+    as: Comp = 'button',
+    onKeyDown,
+    onClick,
+    index: tabIndex = -1,
+    ...otherProps
+  } = props as TabProps & { index: number };
+  const tabContext = useTabsContext();
+  const tabListContext = useTabListContext();
+
+  const ref = useRef<HTMLButtonElement | undefined>(undefined);
+
+  if (!tabContext || !tabListContext) {
+    throw new Error('Missing <Tabs /> or <TabList /> in the component tree');
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    const right = tabListContext.vertical ? 'ArrowDown' : 'ArrowRight';
+    const left = tabListContext.vertical ? 'ArrowUp' : 'ArrowLeft';
+    const first = 'Home';
+    const last = 'End';
+
+    const navigateIndex = (desiredIndex: number, isLast: boolean) => {
+      const delta = e.key === right || e.key === first ? 1 : -1;
+
+      const allTabs = tabListContext.tabsScope.current.queryAllNodes(
+        scopeQuery
+      );
+      const currentIndex = ref.current ? allTabs.indexOf(ref.current) : -1;
+
+      const nextIndex = getNextIndex(
+        isLast ? desiredIndex : currentIndex + desiredIndex,
+        delta,
+        allTabs as HTMLButtonElement[]
+      );
+
+      if (
+        nextIndex !== null &&
+        nextIndex !== currentIndex &&
+        tabContext.onChange
+      ) {
+        allTabs[nextIndex].focus();
+        !tabListContext.manualActivation && tabContext.onChange(e, nextIndex);
+      }
+    };
+
+    switch (e.key) {
+      case right:
+      case left: {
+        navigateIndex(e.key === right ? 1 : -1, false);
+        break;
+      }
+      case first: // Home / End
+      case last: {
+        navigateIndex(e.key === first ? 0 : -1, true);
+        break;
+      }
+    }
+  };
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const allTabs = tabListContext.tabsScope.current.queryAllNodes(scopeQuery);
+    const currentIndex = ref.current ? allTabs.indexOf(ref.current) : -1;
+
+    if (currentIndex >= 0) {
+      tabContext.onChange && tabContext.onChange(e, currentIndex);
+    }
+  };
+
+  const isSelected = tabIndex === tabContext.currentIndex;
+
+  return (
+    <Comp
+      {...otherProps}
+      ref={assignMultipleRefs(ref, forwardedRef)}
+      data-tab=""
+      id={
+        tabContext.tabListId !== null && tabIndex >= 0
+          ? `tab-${tabContext.tabListId}-${tabIndex}`
+          : undefined
+      }
+      aria-controls={
+        tabContext.tabListId !== null && tabIndex >= 0
+          ? `tabpanel-${tabContext.tabListId}-${tabIndex}`
+          : undefined
+      }
+      role="tab"
+      tabIndex={isSelected ? 0 : -1}
+      aria-selected={isSelected}
+      selected={isSelected}
+      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+      onClick={wrapEvent(onClick, handleClick)}
+    />
+  );
+});

package/src/Tabs/TabList.tsx

@@ -0,0 +1,63 @@
+import { forwardRef, useRef, useEffect, Children, cloneElement } from 'react';
+import type * as React from 'react';
+import { TabListProvider, useTabsContext } from './context';
+import { useScope, useId } from '../hooks';
+import { assignMultipleRefs } from '../utils';
+
+export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  manualActivation?: boolean;
+  vertical?: boolean;
+  children?: React.ReactNode;
+}
+
+export const TabList = forwardRef<HTMLDivElement, TabListProps>(
+  function TabList(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      manualActivation = false,
+      vertical = false,
+      children: childrenProps,
+      ...otherProps
+    } = props;
+
+    const ref = useRef();
+    const tabsScope = useScope(ref);
+    const tabsContext = useTabsContext();
+    const id = useId();
+
+    if (!tabsContext) {
+      throw new Error('Missing <Tabs /> in the component tree');
+    }
+
+    useEffect(() => {
+      if (id !== undefined) {
+        tabsContext.setTabListId(id);
+
+        return () => {
+          tabsContext.setTabListId(null);
+        };
+      }
+
+      return;
+    }, [id, tabsContext, tabsContext.setTabListId]);
+
+    const children = Children.map(childrenProps, (node, index) =>
+      cloneElement(node as any, { index })
+    );
+
+    return (
+      <TabListProvider value={{ tabsScope, manualActivation, vertical }}>
+        <Comp
+          ref={assignMultipleRefs(forwardedRef, ref)}
+          data-tab-list=""
+          role="tablist"
+          {...otherProps}
+        >
+          {children}
+        </Comp>
+      </TabListProvider>
+    );
+  }
+);

package/src/Tabs/TabPanel.tsx

@@ -0,0 +1,52 @@
+import { forwardRef } from 'react';
+import type * as React from 'react';
+import { useTabsContext } from './context';
+
+export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+  lazy?: boolean;
+}
+
+export const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
+  function TabPanel(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      index,
+      lazy = false,
+      children,
+      ...otherProps
+    } = props as TabPanelProps & { index: number };
+    const tabsContext = useTabsContext();
+
+    if (!tabsContext) {
+      throw new Error('Missing <Tabs /> in the component tree.');
+    }
+
+    const isSelected = tabsContext.currentIndex === index;
+
+    return (
+      <Comp
+        ref={forwardedRef}
+        data-tab-panel=""
+        role="tabpanel"
+        id={
+          tabsContext.tabListId !== null
+            ? `tabpanel-${tabsContext.tabListId}-${index}`
+            : undefined
+        }
+        aria-labelledby={
+          tabsContext.tabListId !== null
+            ? `tab-${tabsContext.tabListId}-${index}`
+            : undefined
+        }
+        hidden={isSelected ? undefined : 'hidden'}
+        tabIndex={0}
+        {...otherProps}
+      >
+        {(isSelected || !lazy) && children}
+      </Comp>
+    );
+  }
+);