@basic-ui/material 1.0.0-alpha.4 → 1.0.0-alpha.41

package/src/LineRipple/LineRipple.tsx

@@ -1,17 +1,17 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import { forwardRef, useState, useRef, useEffect } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import { useTheme } from '../theme';
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
 export interface LineRippleProps extends BoxProps {
   active?: boolean;
   transitionDuration?: number;
   posx?: number;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const LineRipple = forwardRef<HTMLDivElement, LineRippleProps>(
@@ -70,7 +70,7 @@ export const LineRipple = forwardRef<HTMLDivElement, LineRippleProps>(
           zIndex: 1,
           transform: 'scaleX(0)',
           transformOrigin: 'center center',
-          transition: `transform ${transitionDuration}ms cubic-bezier(.4,0,.2,1),opacity ${transitionDuration}ms cubic-bezier(.4,0,.2,1)`,
+          transition: `transform ${transitionDuration}ms ${EASING_STANDARD},opacity ${transitionDuration}ms ${EASING_STANDARD}`,
           opacity: 0,
           ...__css,
         }}

package/src/Link/Link.tsx

@@ -1,5 +1,5 @@
+import type { AnchorHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
@@ -7,10 +7,7 @@ import { Box } from '../Box';
 import { alpha } from '../color';
 
 export interface LinkProps
-  extends BoxProps<
-    HTMLAnchorElement,
-    React.AnchorHTMLAttributes<HTMLAnchorElement>
-  > {
+  extends BoxProps<HTMLAnchorElement, AnchorHTMLAttributes<HTMLAnchorElement>> {
   color?: string;
   // ReachRouter Props
   to?: string;
@@ -36,6 +33,12 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
         letterSpacing: 'inherit',
         color,
         textDecoration: 'underline',
+        background: 'none',
+        border: 'none',
+        borderRadius: 'extra-small',
+        'button&': {
+          cursor: 'pointer',
+        },
         '&:hover,&:focus': {
           textDecoration: 'none',
         },
@@ -47,6 +50,12 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
         '&:active': {
           bg: alpha(color, 0.16),
         },
+        '&[aria-disabled="true"],&:disabled': {
+          color: 'on.surface',
+          opacity: 0.38,
+          cursor: 'default',
+          pointerEvents: 'none',
+        },
         WebkitTapHighlightColor: 'transparent',
         ...__css,
       }}

package/src/List/List.tsx

@@ -1,13 +1,13 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import type { PaperProps } from '../Paper';
 import { Paper } from '../Paper';
 
 export interface ListProps extends PaperProps {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const List = forwardRef<HTMLDivElement, ListProps>(function List(

package/src/ListItem/ListItem.tsx

@@ -1,7 +1,7 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
-import { get } from '@styled-system/css';
+import type { SystemStyleObject } from '@styled-system/css';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
@@ -9,15 +9,61 @@ import { useTheme } from '../theme';
 import { alpha } from '../color';
 
 export interface ListItemProps extends BoxProps {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   disabled?: boolean;
   selected?: boolean;
   color?: string;
   rippleColor?: string;
 }
 
+export const listItemStyle = (
+  color: string,
+  hoverOpacity = 0.16,
+  focusOpacity = 0.24
+): SystemStyleObject => ({
+  variant: 'text.label-large',
+  px: 3,
+  py: rem(12),
+  transition: 'background-color 75ms linear',
+  backgroundColor: 'transparent',
+  color: alpha('on.surface', 0.87),
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  textDecoration: 'none',
+  ':hover': {
+    backgroundColor: alpha('on.surface', hoverOpacity),
+  },
+  ':focus': {
+    outline: 'none',
+    backgroundColor: alpha('on.surface', focusOpacity),
+  },
+  ':active': {
+    backgroundColor: alpha('on.surface', focusOpacity),
+  },
+  '&[aria-selected="true"]': {
+    backgroundColor: alpha(color, 0.08),
+    color,
+    ':hover': {
+      backgroundColor: alpha(color, hoverOpacity),
+    },
+    ':focus': {
+      outline: 'none',
+      backgroundColor: alpha(color, focusOpacity),
+    },
+    ':active': {
+      backgroundColor: alpha(color, focusOpacity),
+    },
+  },
+  '&[data-disabled]': {
+    color: alpha('on.surface', 0.6),
+    backgroundColor: 'transparent',
+    cursor: 'default',
+  },
+});
+
 export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
   function ListItem(props, forwardedRef) {
     const {
@@ -36,10 +82,6 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
     const color = rippleColor || colorProp || 'primary';
     const theme = useTheme();
 
-    const baseOpacity = 0.12;
-    const hoverOpacity = 0.16;
-    const focusOpacity = 0.24;
-
     return (
       <Box
         ref={forwardedRef}
@@ -51,44 +93,7 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
         disabled={disabled}
         {...otherProps}
         __css={{
-          px: 3,
-          py: rem(12),
-          transition: 'background-color 75ms linear',
-          backgroundColor: 'transparent',
-          color: alpha('on.surface', 0.87),
-          cursor: 'pointer',
-          ':hover': {
-            backgroundColor: alpha('on.surface', hoverOpacity),
-          },
-          ':focus': {
-            outline: 'none',
-            backgroundColor: alpha('on.surface', focusOpacity),
-          },
-          ':active': {
-            backgroundColor: alpha('on.surface', baseOpacity + 0.12),
-          },
-          '&[aria-selected="true"]': {
-            backgroundColor: alpha(color, baseOpacity + 0.12),
-            color,
-            ':hover': {
-              backgroundColor: alpha(color, hoverOpacity + 0.12),
-            },
-            ':focus': {
-              outline: 'none',
-              backgroundColor: alpha(color, focusOpacity + 0.12),
-            },
-            ':active': {
-              backgroundColor: alpha(color, baseOpacity + 0.24),
-            },
-          },
-          '&[data-disabled]': {
-            color: alpha('on.surface', 0.6),
-            backgroundColor: 'transparent',
-            cursor: 'default',
-          },
-          textDecoration: 'none',
-          WebkitTapHighlightColor: 'transparent',
-          ...get(theme, 'text.subtitle1'),
+          ...listItemStyle(color),
           ...__css,
         }}
       >

package/src/ListItem/ListItemText.tsx

@@ -1,13 +1,12 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import { Text } from '../Text';
 
-export interface ListItemTextProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  text?: React.ReactNode;
-  secondaryText?: React.ReactNode;
+export interface ListItemTextProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  text?: ReactNode;
+  secondaryText?: ReactNode;
 }
 
 export const ListItemText = forwardRef<HTMLDivElement, ListItemTextProps>(
@@ -20,7 +19,7 @@ export const ListItemText = forwardRef<HTMLDivElement, ListItemTextProps>(
         {secondaryText && (
           <Text
             as="span"
-            variant="body2"
+            variant="body-small"
             display="block"
             __css={{
               color: 'currentColor',

package/src/Menu/ContextMenu.story.tsx

@@ -0,0 +1,34 @@
+import { Menu, MenuList, MenuItem, MenuPopover, ContextMenuTrigger } from '.';
+import { Divider } from '../Divider';
+import { Box } from '../Box';
+// import './styles.css';
+
+export default {
+  title: 'components/Menu/ContextMenu',
+};
+
+const ContextMenuUncontrolled = ({ disabled }: { disabled?: boolean }) => {
+  return (
+    <Box px={5}>
+      <Menu>
+        <ContextMenuTrigger as="button" disabled={disabled}>
+          I only show menu on right click
+        </ContextMenuTrigger>
+        <MenuPopover usePortal>
+          <MenuList>
+            <MenuItem>Dog</MenuItem>
+            <MenuItem>Lion</MenuItem>
+            <MenuItem disabled={true}>Cat</MenuItem>
+            <Divider />
+            <MenuItem>Bear</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </Box>
+  );
+};
+
+export const Uncontrolled = () => (
+  <ContextMenuUncontrolled disabled={undefined} />
+);
+export const Disabled = () => <ContextMenuUncontrolled disabled={true} />;

package/src/Menu/Menu.tsx

@@ -1,18 +1,19 @@
-import type { FC } from 'react';
+import type { FC, HTMLAttributes } 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,
+  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';
 
@@ -25,13 +26,14 @@ 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, React.HTMLAttributes<HTMLUListElement>>;
+  BoxProps<HTMLUListElement, HTMLAttributes<HTMLUListElement>>;
 
 const MenuListCore: FC<MenuListProps> = _MenuListCore as any;
 
@@ -49,7 +51,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
         minWidth: rem(112),
         maxWidth: rem(280),
         maxHeight: rem(300),
-        borderRadius: 'default',
+        borderRadius: 'extra-small',
         overflowY: 'auto',
         '[data-popper-placement="top"] &': {
           transformOrigin: 'bottom center',
@@ -57,7 +59,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
         '[data-popper-placement="bottom"] &': {
           transformOrigin: 'top center',
         },
-        animation: `${growAnimation} .12s cubic-bezier(0,0,0.2,1)`,
+        animation: `${growAnimation} .12s ${EASING_STANDARD}`,
         ...__css,
       }}
       {...props}
@@ -87,6 +89,18 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
   )
 );
 
+/////////////////////////////////////////////////////
+// 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
 

package/src/Menu/index.ts

@@ -1 +1,2 @@
 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>
+    );
+  }
+);