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

package/src/ListItem/ListItem.tsx

@@ -1,99 +1,104 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-import { rem } from 'polished';
-import { get } from '@styled-system/css';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { useTheme } from '../theme';
-import { alpha } from '../color';
-
-export interface ListItemProps extends BoxProps {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
-  disabled?: boolean;
-  selected?: boolean;
-  color?: string;
-  rippleColor?: string;
-}
-
-export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
-  function ListItem(props, forwardedRef) {
-    const {
-      as = 'div',
-      innerAs,
-      children,
-      selected: selectedProp = false,
-      'aria-selected': ariaSelectedProp = false,
-      disabled = false,
-      color: colorProp,
-      rippleColor,
-      __css,
-      ...otherProps
-    } = props;
-    const selected = ariaSelectedProp || selectedProp;
-    const color = rippleColor || colorProp || 'primary';
-    const theme = useTheme();
-
-    const baseOpacity = 0.12;
-    const hoverOpacity = 0.16;
-    const focusOpacity = 0.24;
-
-    return (
-      <Box
-        ref={forwardedRef}
-        as={innerAs || as}
-        theme={theme}
-        display="flex"
-        data-disabled={disabled ? '' : undefined}
-        aria-selected={selected ? 'true' : undefined}
-        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'),
-          ...__css,
-        }}
-      >
-        {children}
-      </Box>
-    );
-  }
-);
+import type { ElementType, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { rem } from 'polished';
+import type { SystemStyleObject } from '@styled-system/css';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
+import { alpha } from '../color';
+
+export interface ListItemProps extends BoxProps {
+  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 {
+      as = 'div',
+      innerAs,
+      children,
+      selected: selectedProp = false,
+      'aria-selected': ariaSelectedProp = false,
+      disabled = false,
+      color: colorProp,
+      rippleColor,
+      __css,
+      ...otherProps
+    } = props;
+    const selected = ariaSelectedProp || selectedProp;
+    const color = rippleColor || colorProp || 'primary';
+    const theme = useTheme();
+
+    return (
+      <Box
+        ref={forwardedRef}
+        as={innerAs || as}
+        theme={theme}
+        display="flex"
+        data-disabled={disabled ? '' : undefined}
+        aria-selected={selected ? 'true' : undefined}
+        disabled={disabled}
+        {...otherProps}
+        __css={{
+          ...listItemStyle(color),
+          ...__css,
+        }}
+      >
+        {children}
+      </Box>
+    );
+  }
+);

package/src/ListItem/ListItemText.tsx

@@ -1,36 +1,35 @@
-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 const ListItemText = forwardRef<HTMLDivElement, ListItemTextProps>(
-  function ListItemText(props, forwardedRef) {
-    const { as: Comp = 'div', text, secondaryText, ...otherProps } = props;
-
-    return (
-      <Comp ref={forwardedRef} {...otherProps}>
-        {text}
-        {secondaryText && (
-          <Text
-            as="span"
-            variant="body2"
-            display="block"
-            __css={{
-              color: 'currentColor',
-              opacity: 0.65,
-            }}
-          >
-            {secondaryText}
-          </Text>
-        )}
-      </Comp>
-    );
-  }
-);
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import { Text } from '../Text';
+
+export interface ListItemTextProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  text?: ReactNode;
+  secondaryText?: ReactNode;
+}
+
+export const ListItemText = forwardRef<HTMLDivElement, ListItemTextProps>(
+  function ListItemText(props, forwardedRef) {
+    const { as: Comp = 'div', text, secondaryText, ...otherProps } = props;
+
+    return (
+      <Comp ref={forwardedRef} {...otherProps}>
+        {text}
+        {secondaryText && (
+          <Text
+            as="span"
+            variant="body-small"
+            display="block"
+            __css={{
+              color: 'currentColor',
+              opacity: 0.65,
+            }}
+          >
+            {secondaryText}
+          </Text>
+        )}
+      </Comp>
+    );
+  }
+);

package/src/ListItem/index.ts

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

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.story.tsx

@@ -1,54 +1,54 @@
-import { Menu, MenuButton, MenuList, MenuItem, MenuPopover } from '.';
-import { Divider } from '../Divider';
-import { Box } from '../Box';
-// import './styles.css';
-
-export default {
-  title: 'components/Menu',
-};
-
-const MenuUncontrolled = ({ disabled }) => {
-  return (
-    <Box px={5}>
-      <Menu>
-        <MenuButton disabled={disabled}> Click me</MenuButton>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>Dog</MenuItem>
-            <MenuItem>Lion</MenuItem>
-            <MenuItem disabled={true}>Cat</MenuItem>
-            <Divider />
-            <MenuItem>Bear</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Box>
-  );
-};
-
-const MenuUncontrolledWithLinks = ({ disabled }) => {
-  return (
-    <Box px={5}>
-      <Menu>
-        <MenuButton disabled={disabled}> Click me</MenuButton>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem as="a" href="/">
-              Dog
-            </MenuItem>
-            <MenuItem>Lion</MenuItem>
-            <MenuItem disabled={true}>Cat</MenuItem>
-            <Divider />
-            <MenuItem>Bear</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Box>
-  );
-};
-
-export const Uncontrolled = () => <MenuUncontrolled disabled={undefined} />;
-export const UncontrolledWithLinks = () => (
-  <MenuUncontrolledWithLinks disabled={undefined} />
-);
-export const Disabled = () => <MenuUncontrolled disabled={true} />;
+import { Menu, MenuButton, MenuList, MenuItem, MenuPopover } from '.';
+import { Divider } from '../Divider';
+import { Box } from '../Box';
+// import './styles.css';
+
+export default {
+  title: 'components/Menu',
+};
+
+const MenuUncontrolled = ({ disabled }) => {
+  return (
+    <Box px={5}>
+      <Menu>
+        <MenuButton disabled={disabled}> Click me</MenuButton>
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>Dog</MenuItem>
+            <MenuItem>Lion</MenuItem>
+            <MenuItem disabled={true}>Cat</MenuItem>
+            <Divider />
+            <MenuItem>Bear</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </Box>
+  );
+};
+
+const MenuUncontrolledWithLinks = ({ disabled }) => {
+  return (
+    <Box px={5}>
+      <Menu>
+        <MenuButton disabled={disabled}> Click me</MenuButton>
+        <MenuPopover>
+          <MenuList>
+            <MenuItem as="a" href="/">
+              Dog
+            </MenuItem>
+            <MenuItem>Lion</MenuItem>
+            <MenuItem disabled={true}>Cat</MenuItem>
+            <Divider />
+            <MenuItem>Bear</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </Box>
+  );
+};
+
+export const Uncontrolled = () => <MenuUncontrolled disabled={undefined} />;
+export const UncontrolledWithLinks = () => (
+  <MenuUncontrolledWithLinks disabled={undefined} />
+);
+export const Disabled = () => <MenuUncontrolled disabled={true} />;