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

package/src/Ripple/useRippleSurface.ts

@@ -1,4 +1,9 @@
-import type { CSSProperties } from 'react';
+import type {
+  CSSProperties,
+  KeyboardEventHandler,
+  PointerEventHandler,
+} from 'react';
+import { useMemo } from 'react';
 import { get } from '@styled-system/css';
 import { wrapEvent } from '@basic-ui/core';
 
@@ -15,14 +20,15 @@ export interface UseRippleSurfaceOptions<T extends HTMLElement> {
   rippleColor?: string;
   rippleEnabled?: boolean;
   center?: boolean;
+  mouseFocus?: boolean;
   disabled?: boolean;
   style?: CSSProperties;
-  onPointerDown?: React.PointerEventHandler<T>;
-  onKeyDown?: React.KeyboardEventHandler<T>;
+  onPointerDown?: PointerEventHandler<T>;
+  onKeyDown?: KeyboardEventHandler<T>;
 }
 
 export function useRippleSurface<T extends HTMLElement>(
-  opts: UseRippleSurfaceOptions<T>
+  opts: UseRippleSurfaceOptions<T> = {}
 ) {
   let {
     // eslint-disable-next-line prefer-const
@@ -31,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,
@@ -62,67 +70,81 @@ export function useRippleSurface<T extends HTMLElement>(
     ...rippleProps,
   });
 
-  const css: SxStyleProp = {
-    overflow: 'hidden',
-    position: 'relative',
-    cursor: 'pointer',
-    // fix overflow: hidden + borderRadius in Safari
-    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
-    willChange: 'transform,opacity',
-    WebkitTapHighlightColor: 'transparent',
-    // ripple overlay
-    '&::before': {
-      backgroundColor: rippleColor,
-      boxSizing: 'content-box',
-      position: 'absolute',
-      content: '""',
-      opacity: baseOpacity,
-      pointerEvents: 'none',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
-      transition: 'opacity 75ms linear',
-    },
-    '&:hover::before': {
-      opacity: hoverOpacity,
-    },
-    '&:focus-visible::before': {
-      opacity: focusOpacity,
-    },
-    ...(!rippleEnabled && {
-      '&:active::before': {
-        opacity: pressedOpacity,
+  const focusPseudoClass = mouseFocus ? 'focus' : 'focus-visible';
+
+  const css: SxStyleProp = useMemo(
+    () => ({
+      overflow: 'hidden',
+      position: 'relative',
+      cursor: 'pointer',
+      // fix overflow: hidden + borderRadius in Safari
+      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
+      willChange: 'transform,opacity',
+      WebkitTapHighlightColor: 'transparent',
+      // ripple overlay
+      '&::before': {
+        backgroundColor: rippleColor,
+        boxSizing: 'content-box',
+        position: 'absolute',
+        content: '""',
+        opacity: baseOpacity,
+        pointerEvents: 'none',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        transition: 'opacity 75ms linear',
       },
-    }),
-    '&[aria-pressed="true"]::before': {
-      opacity: baseOpacity + pressedOpacity,
-    },
-    '&[aria-pressed="true"]:hover::before': {
-      opacity: pressedOpacity + hoverOpacity,
-    },
-    '&[aria-pressed="true"]:focus-visible::before': {
-      opacity: pressedOpacity + focusOpacity,
-    },
-    ...(!rippleEnabled && {
-      '&[aria-pressed="true"]:active::before': {
-        opacity: pressedOpacity + pressedOpacity,
+      '&:hover::before': {
+        opacity: hoverOpacity,
       },
-    }),
-    ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +
-    '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +
-    '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']:
-      {
-        opacity: 0,
+      [`&:${focusPseudoClass}::before`]: {
+        opacity: focusOpacity,
+      },
+      ...(!rippleEnabled && {
+        '&:active::before': {
+          opacity: pressedOpacity,
+        },
+      }),
+      '&[aria-pressed="true"]::before': {
+        opacity: baseOpacity + pressedOpacity,
       },
-    '&:disabled,&[data-disabled]': {
-      cursor: 'default',
-    },
-    // ripple
-    ...(rippleEnabled && {
-      '&::after': { ...rippleStyle({ animation }) },
+      '&[aria-pressed="true"]:hover::before': {
+        opacity: pressedOpacity + hoverOpacity,
+      },
+      [`&[aria-pressed="true"]:${focusPseudoClass}::before`]: {
+        opacity: pressedOpacity + focusOpacity,
+      },
+      ...(!rippleEnabled && {
+        '&[aria-pressed="true"]:active::before': {
+          opacity: pressedOpacity + pressedOpacity,
+        },
+      }),
+      ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +
+      '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +
+      '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']:
+        {
+          opacity: 0,
+        },
+      '&:disabled,&[data-disabled]': {
+        cursor: 'default',
+      },
+      // ripple
+      ...(rippleEnabled && {
+        '&::after': { ...rippleStyle({ animation }) },
+      }),
     }),
-  };
+    [
+      animation,
+      baseOpacity,
+      focusOpacity,
+      focusPseudoClass,
+      hoverOpacity,
+      pressedOpacity,
+      rippleColor,
+      rippleEnabled,
+    ]
+  );
 
   return {
     style: { ...animationStyle, ...style },

package/src/Select/CustomContainerExample.tsx

@@ -0,0 +1,59 @@
+import { forwardRef } from 'react';
+
+import { alpha } from '../color';
+import { Box } from '../Box';
+import type { FilledContainerProps } from '../';
+import { FilledContainerOverlay } from '../';
+
+export const CustomContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
+  function CustomContainer(props, forwardedRef) {
+    const {
+      label,
+      labelIsFloating,
+      inputId,
+      hasFocus,
+      color: colorProp,
+      children,
+      error = false,
+      disabled = false,
+      forceActive = false,
+      leadingIcon,
+      ...otherProps
+    } = props;
+
+    const active = hasFocus || forceActive;
+
+    return (
+      <Box
+        ref={forwardedRef}
+        disabled={disabled}
+        active={active || error}
+        __css={{
+          variant: 'text.label-small',
+          position: 'relative',
+          lineHeight: 0,
+          width: '100%',
+          height: 32,
+          overflow: 'hidden',
+          boxSizing: 'border-box',
+          borderRadius: 'full',
+          color: alpha('on.surface-variant', 0.87),
+          ...(disabled && {
+            backgroundColor: alpha('on.surface-variant', 0.08),
+            color: alpha('on.surface-variant', 0.38),
+          }),
+          ...(active && { color: 'primary' }),
+          '& > [role="button"]': {
+            variant: 'text.label-medium',
+            minHeight: 32,
+            py: 0,
+          },
+        }}
+        {...otherProps}
+      >
+        {children}
+        <FilledContainerOverlay forceActive={active} />
+      </Box>
+    );
+  }
+);

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

@@ -1,16 +1,18 @@
 import { useState } from 'react';
 
+import type { SelectProps } from './';
 import { Select } from './';
 import { SelectItem } from '../SelectItem';
 import { Box } from '../Box';
 import { CheckBox } from '../CheckBox';
+import { CustomContainer as CustomContainerExample } from './CustomContainerExample';
 // import './styles.css';
 
 export default {
   title: 'components/Select',
 };
 
-const SearchIcon = (props) => (
+const SearchIcon = (props: any) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     height={24}
@@ -23,50 +25,74 @@ const SearchIcon = (props) => (
   </svg>
 );
 
-const Example = ({ variant, native = false }) => {
+type OptionType =
+  | ''
+  | '10'
+  | '20'
+  | '30'
+  | '40'
+  | '50'
+  | '60'
+  | '70'
+  | '80'
+  | '90'
+  | '100'
+  | '110'
+  | '120'
+  | '130';
+
+const Example = ({
+  variant,
+  native = false,
+  CustomContainer: Container = undefined,
+}: {
+  variant?: 'outlined' | 'filled';
+  native?: boolean;
+  CustomContainer?: SelectProps<OptionType>['CustomContainer'];
+}) => {
   const [error, setError] = useState<boolean | string>(false);
   const [color, setColor] = useState<'primary' | 'secondary'>('primary');
 
   /* eslint-disable react/no-children-prop */
   const children = [
-    <SelectItem key={0} aria-label="None" value=""></SelectItem>,
-    <SelectItem key={1} value={10}>
+    <SelectItem<OptionType> key={0} aria-label="None" value=""></SelectItem>,
+    <SelectItem<OptionType> key={1} value={'10'}>
       Ten
     </SelectItem>,
-    <SelectItem key={2} value={20}>
+    <SelectItem<OptionType> key={2} value={'20'}>
       Twenty
     </SelectItem>,
-    <SelectItem key={3} value={30}>
+    <SelectItem<OptionType> key={3} value={'30'}>
       Thirty
     </SelectItem>,
-    <SelectItem key={4} value={40}>
+    <SelectItem<OptionType> key={4} value={'40'}>
       Fourty
     </SelectItem>,
-    <SelectItem key={5} value={50}>
+    <SelectItem<OptionType> key={5} value={'50'}>
       Fifty
     </SelectItem>,
-    <SelectItem key={6} value={60}>
+    <SelectItem<OptionType> key={6} value={'60'}>
       Sixty
     </SelectItem>,
-    <SelectItem key={7} value={70}>
+    <SelectItem<OptionType> key={7} value={'70'}>
       Seventy
     </SelectItem>,
-    <SelectItem key={8} value={80}>
+    <SelectItem<OptionType> key={8} value={'80'}>
       Eighty
     </SelectItem>,
-    <SelectItem key={9} value={90}>
+    <SelectItem<OptionType> key={9} value={'90'}>
       Ninety
     </SelectItem>,
-    <SelectItem key={10} value={100}>
+    <SelectItem<OptionType> key={10} value={'100'}>
       One Hundred
     </SelectItem>,
-    <SelectItem key={11} value={110}>
+    <SelectItem<OptionType> key={11} value={'110'}>
       One Hundred Ten
     </SelectItem>,
-    <SelectItem key={12} value={120}>
+    <SelectItem<OptionType> key={12} value={'120'}>
       One Hundred Twenty
     </SelectItem>,
-    <SelectItem key={13} value={130}>
+    <SelectItem<OptionType> key={13} value={'130'}>
       One Hundred Thirty
     </SelectItem>,
   ];
@@ -82,60 +108,23 @@ const Example = ({ variant, native = false }) => {
         Has Error
       </CheckBox>
       <Box width={230} display="inline-block">
-        <Select
+        <Select<'primary' | 'secondary'>
           value={color}
-          onChange={(e, value) => setColor(value as 'primary' | 'secondary')}
+          onChange={(e, value) => setColor(value)}
           label="Color"
+          CustomContainer={Container}
         >
-          <SelectItem value="primary">Primary</SelectItem>
-          <SelectItem value="secondary">Secondary</SelectItem>
+          <SelectItem<'primary' | 'secondary'> value="primary">
+            Primary
+          </SelectItem>
+          <SelectItem<'primary' | 'secondary'> value="secondary">
+            Secondary
+          </SelectItem>
         </Select>
       </Box>
-      <select defaultValue="">
-        <option key={0} aria-label="None" value="" disabled />
-        <option key={1} value={10}>
-          Ten
-        </option>
-        <option key={2} value={20}>
-          Twenty
-        </option>
-        <option key={3} value={30}>
-          Thirty
-        </option>
-        <option key={4} value={40}>
-          Fourty
-        </option>
-        <option key={5} value={50}>
-          Fifty
-        </option>
-        <option key={6} value={60}>
-          Sixty
-        </option>
-        <option key={7} value={70}>
-          Seventy
-        </option>
-        <option key={8} value={80}>
-          Eighty
-        </option>
-        <option key={9} value={90}>
-          Ninety
-        </option>
-        <option key={10} value={100}>
-          One Hundred
-        </option>
-        <option key={11} value={110}>
-          One Hundred Ten
-        </option>
-        <option key={12} value={120}>
-          One Hundred Twenty
-        </option>
-        <option key={13} value={130}>
-          One Hundred Thirty
-        </option>
-      </select>
       <Box m={3} bg="surface">
         <Box mb={3} width={230}>
-          <Select
+          <Select<OptionType>
             error={error}
             color={color}
             native={native}
@@ -144,10 +133,11 @@ const Example = ({ variant, native = false }) => {
             helperText="Helper text"
             children={children}
             placeholder="Empty"
+            CustomContainer={Container}
           />
         </Box>
         <Box mb={3} width={230}>
-          <Select
+          <Select<OptionType>
             error={error}
             color={color}
             native={native}
@@ -156,20 +146,22 @@ const Example = ({ variant, native = false }) => {
             defaultValue="20"
             helperText="Helper text"
             children={children}
+            CustomContainer={Container}
           />
         </Box>
         <Box mb={3} width={230}>
-          <Select
+          <Select<OptionType>
             error={error}
             color={color}
             native={native}
             variant={variant}
             label="Standard"
             children={children}
+            CustomContainer={Container}
           />
         </Box>
         <Box mb={3} width={230}>
-          <Select
+          <Select<OptionType>
             error={error}
             color={color}
             native={native}
@@ -178,10 +170,11 @@ const Example = ({ variant, native = false }) => {
             helperText="Helper text"
             disabled
             children={children}
+            CustomContainer={Container}
           />
         </Box>
         <Box mb={3} width={230}>
-          <Select
+          <Select<OptionType>
             error={error}
             color={color}
             native={native}
@@ -189,10 +182,11 @@ const Example = ({ variant, native = false }) => {
             label=""
             helperText="Helper text"
             children={children}
+            CustomContainer={Container}
           />
         </Box>
         <Box mb={3} width={230}>
-          <Select
+          <Select<OptionType>
             error={error}
             color={color}
             native={native}
@@ -201,10 +195,11 @@ const Example = ({ variant, native = false }) => {
             helperText="Helper text"
             children={children}
             leadingIcon={<SearchIcon />}
+            CustomContainer={Container}
           />
         </Box>
         <Box mb={3} width={230}>
-          <Select
+          <Select<OptionType>
             error={error}
             color={color}
             native={native}
@@ -213,6 +208,7 @@ const Example = ({ variant, native = false }) => {
             helperText="Helper text"
             children={children}
             leadingIcon={<SearchIcon />}
+            CustomContainer={Container}
           />
         </Box>
       </Box>
@@ -221,6 +217,9 @@ const Example = ({ variant, native = false }) => {
 };
 
 export const Filled = () => <Example variant="filled" />;
+export const CustomContainer = () => (
+  <Example CustomContainer={CustomContainerExample} />
+);
 export const Outlined = () => <Example variant="outlined" />;
 export const FilledNative = () => <Example variant="filled" native />;
 export const OutlinedNative = () => <Example variant="outlined" native />;