@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.51

package/src/Menu/Menu.tsx

@@ -1,110 +1,124 @@
-import type { FC } from 'react';
-import { forwardRef } from 'react';
-import * as React from 'react';
-import type {
-  MenuButtonProps as MenuButtonPropsCore,
-  MenuListProps as MenuListPropsCore,
-  MenuItemProps as MenuItemPropsCore,
-  MenuPopoverProps as MenuPopoverPropsCore,
-  MenuProps as MenuPropsCore,
-} from '@basic-ui/core';
-import {
-  MenuButton as MenuButtonCore,
-  MenuList as _MenuListCore,
-  MenuItem as MenuItemCore,
-  MenuPopover as _MenuPopoverCore,
-} from '@basic-ui/core';
-import { rem } from 'polished';
-
-import { List } from '../List';
-import type { ListItemProps } from '../ListItem';
-import { ListItem } from '../ListItem';
-import type { ButtonProps } from '../Button';
-import { Button } from '../Button';
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { growAnimation } from './animation';
-import type { PaperProps } from '../Paper';
-
-/////////////////////////////////////////////////////
-// MenuList
-
-export type MenuListProps = MenuListPropsCore &
-  PaperProps &
-  BoxProps<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>;
-
-const MenuListCore: FC<MenuListProps> = _MenuListCore as any;
-
-export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
-  ({ as = 'ul', __css, ...props }, ref) => (
-    <MenuListCore
-      as={List}
-      innerAs={as}
-      ref={ref as any}
-      elevation={2}
-      darkThemeBackgroundOverlay={2}
-      outlined={false}
-      variant="default"
-      __css={{
-        minWidth: rem(112),
-        maxWidth: rem(280),
-        maxHeight: rem(300),
-        borderRadius: 'default',
-        overflowY: 'auto',
-        '[data-popper-placement="top"] &': {
-          transformOrigin: 'bottom center',
-        },
-        '[data-popper-placement="bottom"] &': {
-          transformOrigin: 'top center',
-        },
-        animation: `${growAnimation} .12s cubic-bezier(0,0,0.2,1)`,
-        ...__css,
-      }}
-      {...props}
-    />
-  )
-);
-
-/////////////////////////////////////////////////////
-// MenuItem
-
-export type MenuItemProps = MenuItemPropsCore & ListItemProps;
-
-export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
-  ({ as = 'li', ...props }, ref) => (
-    <MenuItemCore as={ListItem} innerAs={as} ref={ref} {...props} />
-  )
-);
-
-/////////////////////////////////////////////////////
-// MenuButton
-
-export type MenuButtonProps = ButtonProps & MenuButtonPropsCore;
-
-export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
-  ({ as = 'button', ...props }, ref) => (
-    <MenuButtonCore as={Button} innerAs={as} ref={ref} {...props} />
-  )
-);
-
-/////////////////////////////////////////////////////
-// MenuPopover
-
-export type MenuPopoverProps = BoxProps & MenuPopoverPropsCore;
-
-const MenuPopoverCore: FC<MenuPopoverProps> = _MenuPopoverCore as any;
-
-export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
-  ({ as, __css, ...props }, ref) => (
-    <MenuPopoverCore
-      as={Box}
-      innerAs={as}
-      ref={ref}
-      __css={{ zIndex: 'tooltip', ...__css }}
-      {...props}
-    />
-  )
-);
-
-export type MenuProps = MenuPropsCore;
-export { Menu } from '@basic-ui/core';
+import type { FC, HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import type {
+  MenuButtonProps as MenuButtonPropsCore,
+  MenuListProps as MenuListPropsCore,
+  MenuItemProps as MenuItemPropsCore,
+  MenuPopoverProps as MenuPopoverPropsCore,
+  MenuProps as MenuPropsCore,
+  ContextMenuTriggerProps as ContextMenuTriggerPropsCore,
+} from '@basic-ui/core';
+import {
+  MenuButton as MenuButtonCore,
+  MenuList as _MenuListCore,
+  MenuItem as MenuItemCore,
+  MenuPopover as _MenuPopoverCore,
+  ContextMenuTrigger as ContextMenuTriggerCore,
+} from '@basic-ui/core';
+import { rem } from 'polished';
+
+import { List } from '../List';
+import type { ListItemProps } from '../ListItem';
+import { ListItem } from '../ListItem';
+import type { ButtonProps } from '../Button';
+import { Button } from '../Button';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { growAnimation } from './animation';
+import type { PaperProps } from '../Paper';
+import { EASING_STANDARD } from '../motion';
+
+/////////////////////////////////////////////////////
+// MenuList
+
+export type MenuListProps = MenuListPropsCore &
+  PaperProps &
+  BoxProps<HTMLUListElement, HTMLAttributes<HTMLUListElement>>;
+
+const MenuListCore: FC<MenuListProps> = _MenuListCore as any;
+
+export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
+  ({ as = 'ul', __css, ...props }, ref) => (
+    <MenuListCore
+      as={List}
+      innerAs={as}
+      ref={ref as any}
+      elevation={2}
+      darkThemeBackgroundOverlay={2}
+      outlined={false}
+      variant="default"
+      __css={{
+        minWidth: rem(112),
+        maxWidth: rem(280),
+        maxHeight: rem(300),
+        borderRadius: 'extra-small',
+        overflowY: 'auto',
+        '[data-popper-placement="top"] &': {
+          transformOrigin: 'bottom center',
+        },
+        '[data-popper-placement="bottom"] &': {
+          transformOrigin: 'top center',
+        },
+        animation: `${growAnimation} .12s ${EASING_STANDARD}`,
+        ...__css,
+      }}
+      {...props}
+    />
+  )
+);
+
+/////////////////////////////////////////////////////
+// MenuItem
+
+export type MenuItemProps = MenuItemPropsCore & ListItemProps;
+
+export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
+  ({ as = 'li', ...props }, ref) => (
+    <MenuItemCore as={ListItem} innerAs={as} ref={ref} {...props} />
+  )
+);
+
+/////////////////////////////////////////////////////
+// MenuButton
+
+export type MenuButtonProps = ButtonProps & MenuButtonPropsCore;
+
+export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
+  ({ as = 'button', ...props }, ref) => (
+    <MenuButtonCore as={Button} innerAs={as} ref={ref} {...props} />
+  )
+);
+
+/////////////////////////////////////////////////////
+// ContextMenuTrigger
+
+export type ContextMenuTriggerProps = BoxProps & ContextMenuTriggerPropsCore;
+
+export const ContextMenuTrigger = forwardRef<
+  HTMLElement,
+  ContextMenuTriggerProps
+>(({ as = 'div', ...props }, ref) => (
+  <ContextMenuTriggerCore as={Box} innerAs={as} ref={ref} {...props} />
+));
+
+/////////////////////////////////////////////////////
+// MenuPopover
+
+export type MenuPopoverProps = BoxProps & MenuPopoverPropsCore;
+
+const MenuPopoverCore: FC<MenuPopoverProps> = _MenuPopoverCore as any;
+
+export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
+  ({ as, __css, ...props }, ref) => (
+    <MenuPopoverCore
+      as={Box}
+      innerAs={as}
+      ref={ref}
+      __css={{ zIndex: 'tooltip', ...__css }}
+      {...props}
+    />
+  )
+);
+
+export type MenuProps = MenuPropsCore;
+export { Menu } from '@basic-ui/core';

package/src/Menu/animation.ts

@@ -1,16 +1,16 @@
-import { keyframes } from '@emotion/react';
-import type { Keyframes } from '@emotion/serialize';
-
-export const growAnimation: Keyframes = keyframes({
-  '0%': {
-    opacity: 0,
-    transform: `scale(0.8)`,
-  },
-  '30%': {
-    opacity: 1,
-  },
-  '100%': {
-    opacity: 1,
-    transform: `scale(1)`,
-  },
-});
+import { keyframes } from '@emotion/react';
+import type { Keyframes } from '@emotion/serialize';
+
+export const growAnimation: Keyframes = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: `scale(0.8)`,
+  },
+  '30%': {
+    opacity: 1,
+  },
+  '100%': {
+    opacity: 1,
+    transform: `scale(1)`,
+  },
+});

package/src/Menu/index.ts

@@ -1 +1,2 @@
-export * from './Menu';
+export * from './Menu';
+export * from './animation';

package/src/NavRail/NavRail.story.tsx

@@ -0,0 +1,146 @@
+import { rem } from 'polished';
+import { forwardRef, useState } from 'react';
+
+import { Box } from '../Box';
+import { NavRailItem, NavRailIndicator, NavRailLabel } from './';
+import type { NavRailLabelProps } from './';
+import { EASING_STANDARD } from '../motion';
+import { KitchenIcon, ListIcon, MenuIcon } from './icons/test-icons';
+// import './styles.css';
+
+export default {
+  title: 'components/NavRail',
+};
+
+export const Default = () => {
+  const [selectedItem, setSelectedItem] = useState('0');
+
+  return (
+    <Box
+      bg="surface"
+      width="80px"
+      position="fixed"
+      top="0"
+      bottom="0"
+      left="0"
+      py={rem(80)}
+      display="flex"
+      flexDirection="column"
+    >
+      <NavRailItem
+        selected={selectedItem === '0'}
+        onClick={() => setSelectedItem('0')}
+      >
+        <NavRailIndicator>
+          <MenuIcon />
+        </NavRailIndicator>
+        <NavRailLabel>Menu</NavRailLabel>
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '1'}
+        onClick={() => setSelectedItem('1')}
+      >
+        <NavRailIndicator>
+          <KitchenIcon />
+        </NavRailIndicator>
+        <NavRailLabel>Kitchen</NavRailLabel>
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '2'}
+        onClick={() => setSelectedItem('2')}
+      >
+        <NavRailIndicator>
+          <ListIcon />
+        </NavRailIndicator>
+        <NavRailLabel>Orders</NavRailLabel>
+      </NavRailItem>
+    </Box>
+  );
+};
+
+const DisappearingNavRailLabel = forwardRef<
+  HTMLDivElement,
+  NavRailLabelProps & { selected: boolean }
+>(function AnimatedNavRailLabel({ selected, height = '28px', ...props }, ref) {
+  const transitionDuration = '0.2s';
+  const transitionTimingFunction = EASING_STANDARD;
+  return (
+    <Box
+      ref={ref}
+      style={{
+        height: selected ? height : '0px',
+      }}
+      sx={{
+        transition: `height ${transitionDuration} ${transitionTimingFunction}`,
+      }}
+    >
+      <NavRailLabel
+        style={{
+          transform: selected
+            ? 'scale(1) translateY(0)'
+            : `scale(0.8, 0.64) translateY(calc(${height} * -0.5 * 0.64))`,
+          opacity: selected ? '1' : '0',
+        }}
+        sx={{
+          transformOrigin: 'center top',
+          transition:
+            `transform ${transitionDuration} ${transitionTimingFunction}, ` +
+            `opacity ${transitionDuration} ${transitionTimingFunction}`,
+        }}
+        {...props}
+      />
+    </Box>
+  );
+});
+
+export const WithHiddenLabels = () => {
+  const [selectedItem, setSelectedItem] = useState('0');
+
+  return (
+    <Box
+      bg="surface"
+      width="80px"
+      position="fixed"
+      top="0"
+      bottom="0"
+      left="0"
+      py={rem(80)}
+      display="flex"
+      flexDirection="column"
+    >
+      <NavRailItem
+        selected={selectedItem === '0'}
+        onClick={() => setSelectedItem('0')}
+      >
+        <NavRailIndicator>
+          <MenuIcon />
+        </NavRailIndicator>
+        <DisappearingNavRailLabel selected={selectedItem === '0'}>
+          Menu
+        </DisappearingNavRailLabel>
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '1'}
+        onClick={() => setSelectedItem('1')}
+      >
+        <NavRailIndicator>
+          <KitchenIcon />
+        </NavRailIndicator>
+        <DisappearingNavRailLabel selected={selectedItem === '1'}>
+          Kitchen
+        </DisappearingNavRailLabel>
+      </NavRailItem>
+      <NavRailItem
+        selected={selectedItem === '2'}
+        onClick={() => setSelectedItem('2')}
+      >
+        <NavRailIndicator>
+          <ListIcon />
+        </NavRailIndicator>
+        <DisappearingNavRailLabel selected={selectedItem === '2'}>
+          Orders
+        </DisappearingNavRailLabel>
+      </NavRailItem>
+    </Box>
+  );
+};

package/src/NavRail/NavRailItem.tsx

@@ -0,0 +1,175 @@
+import type { ElementType, ReactNode } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { rem } from 'polished';
+import { get } from 'styled-system';
+
+import type { BoxProps, SxStyleProp } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
+import { Text } from '../Text';
+import type { TextProps } from '../Text';
+import { useRippleSurface } from '../Ripple';
+import { EASING_STANDARD } from '../motion';
+
+export interface NavRailItemProps extends Omit<BoxProps, 'color'> {
+  as?: ElementType<any>;
+  children?: ReactNode;
+  disabled?: boolean;
+  selected?: boolean;
+  color?: string;
+}
+
+export type NavRailIndicatorProps = BoxProps;
+
+export const NavRailIndicator = forwardRef<
+  HTMLDivElement,
+  NavRailIndicatorProps
+>(function NavRailIndicator(props, forwardedRef) {
+  const { as = 'div', children, __css, ...otherProps } = props;
+
+  return (
+    <Box
+      color="currentColor"
+      ref={forwardedRef}
+      as={as}
+      data-nav-rail-item-indicator=""
+      {...otherProps}
+      __css={{
+        height: '100%',
+        width: [rem(64), rem(56)],
+        maxWidth: [rem(64), rem(56)],
+        maxHeight: [rem(64), rem(56)],
+        borderRadius: 'full',
+        bg: 'var(--indicator-background-color)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: rem(32),
+        transition: `background-color .2s ${EASING_STANDARD}`,
+        pointerEvents: 'none',
+        ...__css,
+      }}
+    >
+      {children}
+    </Box>
+  );
+});
+
+export type NavRailLabelProps = TextProps;
+
+export const NavRailLabel = forwardRef<HTMLDivElement, NavRailLabelProps>(
+  function NavRailLabel(props, forwardedRef) {
+    const { as = 'div', children, __css, ...otherProps } = props;
+
+    return (
+      <Text
+        ref={forwardedRef}
+        as={as}
+        variant="label-small"
+        lineHeight={1}
+        {...otherProps}
+        __css={{
+          pt: rem(4),
+          pb: rem(12),
+          color: 'inherit',
+          pointerEvents: 'none',
+          ...__css,
+        }}
+      >
+        {children}
+      </Text>
+    );
+  }
+);
+
+export const NavRailItem = forwardRef<HTMLDivElement, NavRailItemProps>(
+  function NavRailItem(props, forwardedRef) {
+    const {
+      as = 'button',
+      children,
+      color = 'primary-container',
+      selected = false,
+      disabled = false,
+      style,
+      onKeyDown,
+      onPointerDown,
+      __css,
+      ...otherProps
+    } = props;
+    const theme = useTheme();
+    const baseOpacity = 0,
+      hoverOpacity = 0.04,
+      focusOpacity = 0.12,
+      pressedOpacity = 0.12;
+    const ripple = useRippleSurface({
+      rippleColor: 'currentColor',
+      onKeyDown,
+      onPointerDown,
+      baseOpacity,
+      hoverOpacity,
+      focusOpacity,
+      pressedOpacity,
+    });
+
+    // Apply ripple from nav item to nav indicator
+    const rippleCss = useMemo(() => {
+      const ret: SxStyleProp = {};
+      const keys = Object.keys(ripple.__css);
+      for (const key of keys) {
+        if (!key.startsWith('&')) {
+          ret['& [data-nav-rail-item-indicator]'] =
+            ret['& [data-nav-rail-item-indicator]'] || {};
+          ret['& [data-nav-rail-item-indicator]'][key] = ripple.__css[key];
+          continue;
+        }
+
+        const newKey = key.replace(
+          /(.+?)::(before|after)/g,
+          '$1 [data-nav-rail-item-indicator]::$2'
+        );
+        ret[newKey] = ripple.__css[key];
+      }
+      return ret;
+    }, [ripple.__css]);
+
+    return (
+      <Box
+        ref={forwardedRef}
+        as={as}
+        {...otherProps}
+        onPointerDown={ripple.onPointerDown}
+        onKeyDown={ripple.onKeyDown}
+        aria-pressed={selected}
+        type="button"
+        style={{ ...ripple.style, ...style }}
+        disabled={disabled}
+        __css={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          transition: `color .2s ${EASING_STANDARD}`,
+          color: selected ? `on.${color}` : 'on.surface-variant',
+          '--indicator-background-color': selected
+            ? get(theme, `colors.${color}`)
+            : 'transparent',
+          border: 'none',
+          ':focus': {
+            outline: 'none',
+          },
+          backgroundColor: 'transparent',
+          margin: 0,
+          padding: 0,
+          minHeight: rem(60),
+          height: rem(60),
+          cursor: 'pointer',
+          textDecoration: 'none',
+          WebkitTapHighlightColor: 'transparent',
+          ...rippleCss,
+          ...__css,
+        }}
+      >
+        {children}
+      </Box>
+    );
+  }
+);

package/src/NavRail/icons/test-icons.tsx

@@ -0,0 +1,46 @@
+import type { SVGAttributes } from 'react';
+
+export const ListIcon = (props: SVGAttributes<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={16}
+    width={16}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M8 17q.425 0 .713-.288Q9 16.425 9 16t-.287-.713Q8.425 15 8 15t-.713.287Q7 15.575 7 16t.287.712Q7.575 17 8 17Zm0-4q.425 0 .713-.288Q9 12.425 9 12t-.287-.713Q8.425 11 8 11t-.713.287Q7 11.575 7 12t.287.712Q7.575 13 8 13Zm0-4q.425 0 .713-.288Q9 8.425 9 8t-.287-.713Q8.425 7 8 7t-.713.287Q7 7.575 7 8t.287.712Q7.575 9 8 9Zm3 8h6v-2h-6Zm0-4h6v-2h-6Zm0-4h6V7h-6ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z"
+    />
+  </svg>
+);
+
+export const KitchenIcon = (props: SVGAttributes<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={16}
+    width={16}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M8 8V5h2v3Zm0 9v-5h2v5Zm-2 5q-.825 0-1.412-.587Q4 20.825 4 20V4q0-.825.588-1.413Q5.175 2 6 2h12q.825 0 1.413.587Q20 3.175 20 4v16q0 .825-.587 1.413Q18.825 22 18 22Zm0-2h12v-9H6v9ZM6 9h12V4H6Z"
+    />
+  </svg>
+);
+
+export const MenuIcon = (props: SVGAttributes<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={16}
+    width={16}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M17 22v-8h-3V7q0-2.075 1.463-3.537Q16.925 2 19 2v20ZM7 22v-9.15q-1.275-.35-2.137-1.4Q4 10.4 4 9V2h2v7h1V2h2v7h1V2h2v7q0 1.4-.863 2.45-.862 1.05-2.137 1.4V22Z"
+    />
+  </svg>
+);

package/src/NavRail/index.ts

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