@basic-ui/core 0.0.31 → 0.0.32

package/src/List/List.tsx

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

package/src/List/ListItem.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react';
+import type * as React from 'react';
+
+export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+}
+
+export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
+  function ListItem(props, forwardedRef) {
+    const { as: Comp = 'li', ...otherProps } = props;
+
+    return (
+      <Comp
+        tabIndex={-1}
+        data-list-item=""
+        ref={forwardedRef}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/List/context.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+
+// List Component
+export interface ListContextProps {
+  id: string | undefined;
+}
+
+const ListContext = createContext<ListContextProps | null>(null);
+ListContext.displayName = 'ListContext';
+
+export const useListContext = (): ListContextProps => {
+  const ctx = useContext(ListContext);
+  if (!ctx) {
+    throw new Error(
+      'useListContext must be used within a ListContext.Provider'
+    );
+  }
+  return ctx;
+};

package/src/List/index.ts

@@ -0,0 +1,2 @@
+export * from './List';
+export * from './ListItem';

package/src/Menu/Menu.story.tsx

@@ -0,0 +1,158 @@
+import { useState } from 'react';
+import type * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from './';
+import { animated, useSpring } from 'react-spring';
+import './styles.css';
+
+const stories = storiesOf('Components/Menu', module);
+
+const noop = () => {
+  // noop function to be used on onRest, as a cleanup
+};
+
+const Wrapper = ({ children }) => {
+  const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    console.log('Clicked ' + e.currentTarget.innerText);
+    e.preventDefault();
+  };
+
+  return (
+    <div
+      style={{
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'flex-start',
+        padding: '85% 48px',
+        height: '150vh',
+        justifyContent: 'space-around',
+        width: '100%',
+        position: 'relative',
+      }}
+    >
+      <a href="#" onClick={handleLinkClick}>
+        Link 1
+      </a>
+      <div style={{ minHeight: 120, width: 100 }}>{children}</div>
+      <a href="#" onClick={handleLinkClick}>
+        Link 2
+      </a>
+    </div>
+  );
+};
+
+const MenuControlled = () => {
+  return (
+    <Menu>
+      <MenuButton>Click me</MenuButton>
+      <MenuPopover>
+        <MenuList>
+          <MenuItem>Dog</MenuItem>
+          <MenuItem>Lion</MenuItem>
+          <MenuItem>Tiger</MenuItem>
+          <MenuItem disabled>Cat</MenuItem>
+          <hr />
+          <MenuItem>Bear</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
+const MenuControlledWithAnimation = () => {
+  const [open, setOpen] = useState(false);
+
+  const [{ scale, opacity }, set] = useSpring(() => ({
+    scale: 0.75,
+    opacity: 0,
+    config: { mass: 1, tension: 750, friction: 50, clamp: true },
+  }));
+
+  const handleChange = (e: any, isOpen: boolean) => {
+    if (isOpen) {
+      set({ scale: 1, opacity: 1, onRest: noop });
+      setOpen(true);
+    } else {
+      set({
+        scale: 0.75,
+        opacity: 0,
+        onRest: () => {
+          setOpen(false);
+        },
+      });
+    }
+  };
+
+  return (
+    <Menu onChange={handleChange} open={open}>
+      <MenuButton>Click me</MenuButton>
+      <MenuPopover>
+        <MenuList
+          as={animated.ul}
+          style={{
+            opacity: (opacity as unknown) as number,
+            transform: (scale.to(
+              (x) => `scale(${x}, ${x * x})`
+            ) as unknown) as string,
+          }}
+        >
+          <MenuItem>Dog</MenuItem>
+          <MenuItem>Lion</MenuItem>
+          <MenuItem>Tiger</MenuItem>
+          <MenuItem disabled>Cat</MenuItem>
+          <hr />
+          <MenuItem>Bear</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
+const MenuWithMultipleButtons = () => {
+  return (
+    <Menu>
+      <div style={{ display: 'flex', gap: 32 }}>
+        <MenuButton>
+          <span>Click me</span>
+        </MenuButton>
+        <MenuButton>
+          <span>Click me</span>
+        </MenuButton>
+        <MenuButton>
+          <span>Click me</span>
+        </MenuButton>
+        <MenuButton>
+          <span>Click me</span>
+        </MenuButton>
+      </div>
+      <MenuPopover>
+        <MenuList>
+          <MenuItem>Dog</MenuItem>
+          <MenuItem>Lion</MenuItem>
+          <MenuItem>Tiger</MenuItem>
+          <MenuItem disabled>Cat</MenuItem>
+          <hr />
+          <MenuItem>Bear</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
+stories.add('Controlled', () => (
+  <Wrapper>
+    <MenuControlled />
+  </Wrapper>
+));
+
+stories.add('With animation, controlled', () => (
+  <Wrapper>
+    <MenuControlledWithAnimation />
+  </Wrapper>
+));
+
+stories.add('With multiple buttons', () => (
+  <Wrapper>
+    <MenuWithMultipleButtons />
+  </Wrapper>
+));

package/src/Menu/Menu.tsx

@@ -0,0 +1,60 @@
+import { forwardRef, useRef, Fragment } from 'react';
+import type * as React from 'react';
+import { MenuProvider, MenuContextProps } from './context';
+import { useId } from '../hooks/useId';
+import { useControlledState } from '../hooks';
+
+export interface MenuProps {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+  onChange?: (
+    e:
+      | React.KeyboardEvent<HTMLElement>
+      | React.MouseEvent<HTMLElement>
+      | React.PointerEvent<HTMLElement>,
+    isOpen: boolean
+  ) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+}
+
+export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
+  props,
+  forwardedRef
+) {
+  const {
+    as: Comp = Fragment,
+    open: openProp,
+    defaultOpen = false,
+    onChange: onChangeProp,
+    ...otherProps
+  } = props;
+  const menuListIdRef = useRef<string>();
+  const openWithArrowKeyRef = useRef<'ArrowUp' | 'ArrowDown' | null>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [open, onChange] = useControlledState(
+    openProp,
+    onChangeProp,
+    defaultOpen,
+    (setState) => (e, isOpen) => {
+      setState(isOpen);
+    }
+  );
+
+  menuListIdRef.current = useId();
+
+  const value: MenuContextProps = {
+    menuListIdRef,
+    openWithArrowKeyRef,
+    open,
+    onChange,
+    buttonRef,
+  };
+
+  return (
+    <MenuProvider value={value}>
+      <Comp ref={forwardedRef} {...otherProps} />
+    </MenuProvider>
+  );
+});

package/src/Menu/MenuButton.tsx

@@ -0,0 +1,83 @@
+import { forwardRef } from 'react';
+import type * as React from 'react';
+import { useMenuContext } from './context';
+import { wrapEvent } from '../utils/wrapEvent';
+import { useId } from '../hooks';
+
+export type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  onClick?: (
+    e:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>
+  ) => void;
+};
+
+export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
+  function MenuButton(props, forwardedRef) {
+    const {
+      as: Comp = 'button',
+      id: preferredId,
+      onClick,
+      onKeyDown,
+      disabled,
+      ...otherProps
+    } = props;
+    const {
+      menuListIdRef,
+      openWithArrowKeyRef,
+      open,
+      buttonRef,
+      onChange,
+    } = useMenuContext();
+
+    const buttonId = useId(preferredId);
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (disabled) {
+        return;
+      }
+      buttonRef.current = e.currentTarget;
+
+      const isArrowKey = () => ['ArrowUp', 'ArrowDown'].includes(e.key);
+      const isEnterKey = () => [' ', 'Enter'].includes(e.key);
+
+      const openedWithArrow = isArrowKey();
+      if (openedWithArrow || isEnterKey()) {
+        if (openedWithArrow) {
+          // Used to make it open at the end or begining of the list
+          openWithArrowKeyRef.current = e.key;
+        }
+        onChange && onChange(e, true);
+        e.preventDefault();
+      }
+    };
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (disabled) {
+        return;
+      }
+      buttonRef.current = e.currentTarget;
+
+      onChange && onChange(e, !open);
+    };
+
+    return (
+      <Comp
+        ref={forwardedRef}
+        id={buttonId}
+        role="button"
+        type="button"
+        aria-haspopup={true}
+        aria-controls={menuListIdRef.current}
+        aria-expanded={open ? true : undefined}
+        data-menu-button=""
+        onClick={wrapEvent(onClick, handleClick)}
+        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+        disabled={disabled}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Menu/MenuItem.tsx

@@ -0,0 +1,83 @@
+import { forwardRef, useRef } from 'react';
+import type * as React from 'react';
+import { useMenuContext, useMenuListContext } from './context';
+import { assignMultipleRefs } from '../utils/assignRef';
+import { wrapEvent } from '../utils';
+
+export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  onSelect?: (
+    e: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>
+  ) => void;
+  disabled?: boolean;
+}
+
+export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
+  props,
+  forwardedRef
+) {
+  const {
+    as: Comp = 'li',
+    disabled,
+    onSelect,
+    onClick,
+    onKeyDown,
+    ...otherProps
+  } = props;
+  const { menuListIdRef, onChange, buttonRef } = useMenuContext();
+  const { navigationItem, onNavigate } = useMenuListContext();
+  const ref = useRef<HTMLLIElement>();
+  const itemIndex = useRef(-1);
+
+  const isActive = ref.current && ref.current === navigationItem;
+
+  const handleSelect = wrapEvent(
+    onSelect,
+    (
+      e: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>
+    ) => {
+      onChange && onChange(e, false);
+      buttonRef.current?.focus();
+      e.preventDefault();
+    }
+  );
+
+  const handleClick = (e: React.MouseEvent<HTMLLIElement>) => {
+    if (!disabled) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      onNavigate && onNavigate(ref.current!);
+      handleSelect(e);
+    }
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler<HTMLLIElement> = (e) => {
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        if (!disabled) {
+          handleSelect(e);
+        }
+        break;
+    }
+  };
+
+  return (
+    <Comp
+      ref={assignMultipleRefs(ref, forwardedRef)}
+      id={
+        disabled ? undefined : `${menuListIdRef.current}_${itemIndex.current}`
+      }
+      data-menu-item=""
+      data-highlighted={isActive ? '' : undefined}
+      role="menuitem"
+      onClick={wrapEvent(onClick, handleClick)}
+      tabIndex={disabled ? -1 : 0}
+      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+      data-disabled={disabled ? '' : undefined}
+      aria-disabled={disabled ? '' : undefined}
+      disabled={disabled}
+      {...otherProps}
+    />
+  );
+});

package/src/Menu/MenuList.tsx

@@ -0,0 +1,201 @@
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  useLayoutEffect,
+} from 'react';
+import type * as React from 'react';
+import { useMenuContext, MenuListProvider } from './context';
+import { assignMultipleRefs } from '../utils/assignRef';
+import { useOnClickOutside } from '../hooks/useOnClickOutside';
+import { useScope } from '../hooks';
+import { queryScope } from './scope';
+import { getCircularIndex, wrapEvent } from '../utils';
+
+const useEnhancedEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export interface MenuListProps extends React.HTMLAttributes<HTMLUListElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  defaultActiveItemValue?: string;
+}
+
+export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
+  function MenuList(props, forwardedRef) {
+    const {
+      as: Comp = 'ul',
+      onKeyDown,
+      id: preferredId,
+      defaultActiveItemValue,
+      ...otherProps
+    } = props;
+
+    const {
+      menuListIdRef,
+      buttonRef,
+      onChange,
+      openWithArrowKeyRef,
+      open,
+    } = useMenuContext();
+
+    const [navigationItem, setNavigationItem] = useState<
+      HTMLElement | undefined
+    >();
+
+    const [mounted, setMounted] = useState(false);
+
+    const menuListRef = useRef<HTMLUListElement>();
+
+    const scope = useScope<HTMLLIElement, HTMLUListElement>(menuListRef);
+
+    const onNavigate = (el: HTMLElement) => {
+      el.focus();
+      setNavigationItem(el);
+    };
+
+    menuListIdRef.current = preferredId || menuListIdRef.current;
+
+    useEnhancedEffect(() => {
+      if (!mounted) {
+        const allItems = scope.current.queryAllNodes(queryScope);
+        let index = getCircularIndex(
+          openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0,
+          allItems.length
+        );
+
+        if (defaultActiveItemValue) {
+          for (let i = 0; i < allItems.length; i++) {
+            if (allItems[i].dataset.value === defaultActiveItemValue) {
+              index = i;
+              break;
+            }
+          }
+        }
+
+        if (index !== null) {
+          onNavigate && onNavigate(allItems[index]);
+        }
+      }
+
+      openWithArrowKeyRef.current = null;
+      setMounted(true);
+    }, [
+      mounted,
+      navigationItem,
+      onNavigate,
+      openWithArrowKeyRef,
+      scope,
+      defaultActiveItemValue,
+    ]);
+
+    useOnClickOutside(
+      menuListRef,
+      (e) => {
+        if (
+          e.target instanceof HTMLElement &&
+          e.target !== buttonRef.current &&
+          !buttonRef.current?.contains(e.target)
+        ) {
+          onChange && onChange(e as any, false);
+        }
+        e.preventDefault();
+      },
+      true
+    );
+
+    function handleKeyDown(e: React.KeyboardEvent<HTMLUListElement>) {
+      switch (e.key) {
+        case 'Escape':
+        case 'Tab': {
+          onChange && onChange(e, false);
+          e.preventDefault(); // prevents focusing on next element, because we will be handling it
+          buttonRef.current?.focus();
+          break;
+        }
+        case 'Home':
+        case 'End':
+        case 'ArrowDown':
+        case 'ArrowUp':
+          e.preventDefault();
+          const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
+          const currentIndex = allItems.findIndex((e) => e === navigationItem);
+          if (allItems.length === 0) {
+            return;
+          }
+          let nextIndex: number = currentIndex;
+          switch (e.key) {
+            case 'ArrowUp':
+              nextIndex += -1;
+              break;
+            case 'ArrowDown':
+              nextIndex += 1;
+              break;
+            case 'Home':
+              nextIndex = 0;
+              break;
+            case 'End':
+              nextIndex = -1;
+              break;
+          }
+          // We already checked if allItems.length = 0 above
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          nextIndex = getCircularIndex(nextIndex, allItems.length)!;
+          onNavigate && onNavigate(allItems[nextIndex]);
+          break;
+        default: {
+          if (e.key.length === 1) {
+            // A-Z
+            e.preventDefault();
+            const allItems = scope
+              ? scope.current.queryAllNodes(queryScope)
+              : [];
+            const currentIndex = allItems.findIndex(
+              (e) => e === navigationItem
+            );
+            const firstLetter = e.key.toLowerCase();
+            let nextIndex = -1;
+            for (let i = 1; i < allItems.length; i++) {
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              const idx = getCircularIndex(currentIndex + i, allItems.length)!;
+              const dom = allItems[idx];
+              const domText = dom.innerText.toLowerCase();
+              if (domText.length > 0 && domText.charAt(0) === firstLetter) {
+                nextIndex = idx;
+                break;
+              }
+            }
+            if (nextIndex >= 0 && nextIndex < allItems.length) {
+              onNavigate && onNavigate(allItems[nextIndex]);
+            }
+          }
+        }
+      }
+    }
+
+    if (!open) {
+      return null;
+    }
+
+    return (
+      <MenuListProvider
+        value={{
+          navigationItem,
+          onNavigate,
+        }}
+      >
+        <Comp
+          ref={assignMultipleRefs(forwardedRef, menuListRef)}
+          id={menuListIdRef.current}
+          role="menu"
+          aria-labelledby={buttonRef.current?.id}
+          data-menu-list=""
+          tabIndex="-1"
+          onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+          {...otherProps}
+        />
+      </MenuListProvider>
+    );
+  }
+);

package/src/Menu/MenuPopover.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+import type * as React from 'react';
+import { Popper, PopperProps } from '../Popper';
+import { useMenuContext } from './context';
+
+export interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+}
+
+export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
+  function MenuPopover(props, forwardedRef) {
+    const { as = 'div', ...otherProps } = props;
+    const { buttonRef, open } = useMenuContext();
+
+    if (!open) {
+      return null;
+    }
+
+    return (
+      <Popper as={as} ref={forwardedRef} anchorEl={buttonRef} {...otherProps} />
+    );
+  }
+);