@basic-ui/material 1.0.0-alpha.15 → 1.0.0-alpha.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.15",
+  "version": "1.0.0-alpha.18",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -27,8 +27,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.43",
-    "@basic-ui/dynamic-theme": "^0.0.5",
+    "@basic-ui/core": "^0.0.46",
+    "@basic-ui/dynamic-theme": "^0.0.7",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__css": "^5.0.14",
@@ -36,11 +36,11 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@basic-ui/color-picker": "^0.0.10",
+    "@basic-ui/color-picker": "^0.0.11",
     "@emotion/react": "11.9.0",
     "@emotion/styled": "11.8.1",
     "@material/material-color-utilities": "0.1.1",
-    "polished": "^4.1.1"
+    "polished": "^4.2.2"
   },
   "peerDependencies": {
     "@babel/runtime": "^7.0.0",
@@ -52,5 +52,5 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "1bf6a5a0f35cfa0ae1cfac346b0bb10d4d00931f"
+  "gitHead": "bf937e7d984c93ab477435f50a01c5653382bd13"
 }

package/src/Button/BaseButton.tsx

@@ -38,6 +38,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
           touchAction: 'manipulation',
           userSelect: 'none',
           minWidth: 'auto',
+          whiteSpace: 'nowrap',
           '&::-moz-focus-inner': {
             border: 0,
           },

package/src/Combobox/Combobox.tsx

@@ -30,7 +30,7 @@ import { TextField } from '../TextField';
 import type { ListProps } from '../List';
 import { List } from '../List';
 import type { ListItemProps } from '../ListItem';
-import { ListItem } from '../ListItem';
+import { listItemStyle } from '../ListItem';
 import type { TextProps } from '../Text';
 import { Text } from '../Text';
 import type { ButtonProps } from '../Button';
@@ -120,6 +120,9 @@ export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
           '[data-popper-placement="bottom"] &': {
             transformOrigin: 'top center',
           },
+          '& [data-reach-combobox-option=""]': {
+            ...listItemStyle('primary'),
+          },
           ...__css,
         }}
         {...otherProps}
@@ -189,7 +192,7 @@ export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(
     const { as = 'li', ...otherProps } = props;
     return (
       <ComboboxOptionCore
-        as={ListItem}
+        as={Box}
         ref={forwardedRef}
         innerAs={as}
         {...otherProps}

package/src/Link/Link.tsx

@@ -33,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',
         },
@@ -44,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/ListItem/ListItem.tsx

@@ -1,6 +1,7 @@
 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';
@@ -17,6 +18,52 @@ export interface ListItemProps extends BoxProps {
   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 {
@@ -35,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}
@@ -50,44 +93,7 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
         disabled={disabled}
         {...otherProps}
         __css={{
-          variant: 'text.label-large',
-          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',
+          ...listItemStyle(color),
           ...__css,
         }}
       >

package/src/Ripple/useRippleSurface.ts

@@ -20,6 +20,7 @@ export interface UseRippleSurfaceOptions<T extends HTMLElement> {
   rippleColor?: string;
   rippleEnabled?: boolean;
   center?: boolean;
+  mouseFocus?: boolean;
   disabled?: boolean;
   style?: CSSProperties;
   onPointerDown?: PointerEventHandler<T>;
@@ -36,6 +37,8 @@ export function useRippleSurface<T extends HTMLElement>(
     focusOpacity = 0.12,
     pressedOpacity = 0.12,
     rippleColor = 'on.surface',
+    // eslint-disable-next-line prefer-const
+    mouseFocus = false,
   } = opts;
   const {
     onKeyDown,
@@ -67,6 +70,8 @@ export function useRippleSurface<T extends HTMLElement>(
     ...rippleProps,
   });
 
+  const focusPseudoClass = mouseFocus ? 'focus' : 'focus-visible';
+
   const css: SxStyleProp = useMemo(
     () => ({
       overflow: 'hidden',
@@ -93,7 +98,7 @@ export function useRippleSurface<T extends HTMLElement>(
       '&:hover::before': {
         opacity: hoverOpacity,
       },
-      '&:focus-visible::before': {
+      [`&:${focusPseudoClass}::before`]: {
         opacity: focusOpacity,
       },
       ...(!rippleEnabled && {
@@ -107,7 +112,7 @@ export function useRippleSurface<T extends HTMLElement>(
       '&[aria-pressed="true"]:hover::before': {
         opacity: pressedOpacity + hoverOpacity,
       },
-      '&[aria-pressed="true"]:focus-visible::before': {
+      [`&[aria-pressed="true"]:${focusPseudoClass}::before`]: {
         opacity: pressedOpacity + focusOpacity,
       },
       ...(!rippleEnabled && {
@@ -133,6 +138,7 @@ export function useRippleSurface<T extends HTMLElement>(
       animation,
       baseOpacity,
       focusOpacity,
+      focusPseudoClass,
       hoverOpacity,
       pressedOpacity,
       rippleColor,

package/src/Select/PaymentMethodSelect.story.tsx

@@ -1,8 +1,9 @@
 import { forwardRef, useState } from 'react';
 import type { ReactElement, ComponentType } from 'react';
+import styled from '@emotion/styled';
 
 import type { SelectProps } from '../';
-import { Box, Select, SelectItem } from '../';
+import { Select, SelectItem } from '../';
 
 export default {
   title: 'components/Select/Complex',
@@ -176,25 +177,19 @@ export interface PaymentMethodSelectProps {
 
 const logoWidth = 32;
 const logoHeight = 24;
-const LogoWrapper = ({ children }: { children: ReactElement }) => (
-  <Box
-    sx={{
-      mr: 2,
-      borderRadius: '2px',
-      overflow: 'hidden',
-      width: logoWidth,
-      height: logoHeight,
-      minWidth: logoWidth,
-      minHeight: logoHeight,
-      '& > svg': { width: logoWidth, height: logoWidth },
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    }}
-  >
-    {children}
-  </Box>
-);
+const LogoWrapper = styled.div({
+  marginInlineEnd: '8px',
+  borderRadius: '2px',
+  overflow: 'hidden',
+  width: logoWidth,
+  height: logoHeight,
+  minWidth: logoWidth,
+  minHeight: logoHeight,
+  '& > svg': { width: logoWidth, height: logoWidth },
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
 
 function SelectItemContent(props: PaymentMethod): ReactElement {
   if (props.type === 'card') {
@@ -269,9 +264,7 @@ const PaymentMethodSelect = forwardRef<
     >
       {paymentMethods.map((m) => (
         <SelectItem value={m.id} key={m.id}>
-          <Box display="inline-flex" alignItems="center">
-            <SelectItemContent {...m} />
-          </Box>
+          <SelectItemContent {...m} />
         </SelectItem>
       ))}
     </Select>
@@ -300,7 +293,7 @@ export const PaymentMethodSelectControlled = () => {
     'visa',
     'unknown',
   ]) {
-    for (let i = 0; i < 10; i++) {
+    for (let i = 0; i < 50; i++) {
       paymentMethods.push({
         type: 'card',
         id: testCard + `_${i}`,

package/src/Select/Select.tsx

@@ -24,6 +24,7 @@ import { makeDefaultRender } from './defaultRender';
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { IconContainer } from '../TextField/IconContainer';
+import { listItemStyle } from '../ListItem';
 
 const componentMap = {
   outlined: OutlinedContainer,
@@ -181,6 +182,11 @@ export const Select = forwardRef<
                     minWidth: buttonRef?.current?.offsetWidth,
                   }}
                   role="listbox"
+                  __css={{
+                    '& [data-menu-item=""]': {
+                      ...listItemStyle('primary'),
+                    },
+                  }}
                 >
                   {children}
                 </MenuList>

package/src/SelectItem/SelectItem.tsx

@@ -1,9 +1,18 @@
 import { forwardRef } from 'react';
-import { wrapEvent } from '@basic-ui/core';
+import { wrapEvent, MenuItem as MenuItemCore } from '@basic-ui/core';
+import type { MenuItemProps as MenuItemPropsCore } from '@basic-ui/core';
 
-import type { MenuItemProps } from '../Menu';
-import { MenuItem } from '../Menu';
 import { useSelectContext } from '../Select/context';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+type MenuItemProps = MenuItemPropsCore & BoxProps;
+
+const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
+  ({ as = 'li', ...props }, ref) => (
+    <MenuItemCore as={Box} innerAs={as} ref={ref} {...props} />
+  )
+);
 
 export type SelectItemProps = MenuItemProps;
 
@@ -50,6 +59,7 @@ export const SelectItem = forwardRef<HTMLLIElement, MenuItemProps>(
         disabled={disabled}
         ref={forwardedRef}
         role="option"
+        aria-selected={selected ? 'true' : undefined}
         selected={selected}
         {...otherProps}
       >

package/src/Slider/Slider.story.tsx

@@ -0,0 +1,36 @@
+import { Slider, SliderMarker } from './';
+// import './styles.css';
+
+export default { title: 'components/Slider' };
+
+export const Uncontrolled = () => <Slider />;
+
+export const UncontrolledWithSteps = () => <Slider step={10} />;
+
+export const UncontrolledWithMarks = () => (
+  <Slider>
+    <SliderMarker value={10} />
+    <SliderMarker value={20} />
+    <SliderMarker value={30} />
+    <SliderMarker value={40} />
+    <SliderMarker value={50} />
+    <SliderMarker value={60} />
+    <SliderMarker value={70} />
+    <SliderMarker value={80} />
+    <SliderMarker value={90} />
+  </Slider>
+);
+
+export const UncontrolledWithMarksAndSteps = () => (
+  <Slider step={10}>
+    <SliderMarker value={10} />
+    <SliderMarker value={20} />
+    <SliderMarker value={30} />
+    <SliderMarker value={40} />
+    <SliderMarker value={50} />
+    <SliderMarker value={60} />
+    <SliderMarker value={70} />
+    <SliderMarker value={80} />
+    <SliderMarker value={90} />
+  </Slider>
+);