@basic-ui/material 1.0.0-alpha.32 → 1.0.0-alpha.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.32",
+  "version": "1.0.0-alpha.34",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.50",
+    "@basic-ui/core": "^0.0.51",
     "@basic-ui/dynamic-theme": "^0.0.8",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
@@ -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": "42c1e44b1429227fe589e0f7a4bfeeb15b5e395a"
+  "gitHead": "5442c3e57c390b7f69adab60118d7d6df9f55df0"
 }

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/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 />;

package/src/Select/Select.tsx

@@ -3,8 +3,11 @@ import type {
   ReactNode,
   ChangeEvent,
   ComponentType,
+  ForwardedRef,
+  ReactElement,
+  Ref,
 } from 'react';
-import { forwardRef, useState, useRef, useEffect, useId } from 'react';
+import { useMemo, forwardRef, useState, useRef, useEffect, useId } from 'react';
 import {
   wrapEvent,
   assignMultipleRefs,
@@ -14,13 +17,14 @@ import {
 import type { Theme } from '../theme';
 import { useTheme } from '../theme';
 import { Select as SelectComp, SelectButton } from './styledComponents';
+import type { FilledContainerProps } from '../TextField/FilledContainer';
 import { FilledContainer } from '../TextField/FilledContainer';
 import { HelperText } from '../TextField/HelperText';
 import { OutlinedContainer } from '../TextField/OutlinedContainer';
 import { SelectProvider } from './context';
 import { Menu, MenuPopover, MenuList } from '../Menu';
 import { SelectIcon } from './SelectIcon';
-import { makeDefaultRender } from './defaultRender';
+import { makeDefaultMultipleRender, makeDefaultRender } from './defaultRender';
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { IconContainer } from '../TextField/IconContainer';
@@ -31,7 +35,7 @@ const componentMap = {
   filled: FilledContainer,
 };
 
-export interface SelectProps
+interface BaseSelectProps
   extends Omit<
     BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>,
     'value' | 'defaultValue' | 'onChange'
@@ -40,27 +44,48 @@ export interface SelectProps
   color?: 'primary' | 'secondary';
   label?: ReactNode;
   helperText?: string;
-  defaultValue?: string;
-  value?: string;
   native?: boolean;
   theme?: Theme;
   error?: boolean | string;
-  onChange?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;
-  renderValue?: (value?: string) => string | undefined;
   leadingIcon?: ReactNode;
+  CustomContainer?: ComponentType<FilledContainerProps>;
 }
 
-export const Select = forwardRef<
-  HTMLSelectElement | HTMLButtonElement,
-  SelectProps
->(function Select(props, forwardedRef) {
+export type SelectProps<ValueType extends string> = BaseSelectProps &
+  (
+    | {
+        multiple?: false | undefined;
+        value?: ValueType;
+        defaultValue?: ValueType;
+        onChange?: (
+          e: ChangeEvent<HTMLSelectElement>,
+          value: ValueType
+        ) => void;
+        renderValue?: (value?: ValueType | '') => ReactNode | undefined;
+      }
+    | {
+        multiple: true;
+        value?: ValueType[];
+        defaultValue?: ValueType[];
+        onChange?: (
+          e: ChangeEvent<HTMLSelectElement>,
+          value: ValueType[]
+        ) => void;
+        renderValue?: (value?: ValueType[]) => ReactNode[];
+      }
+  );
+
+export const Select = forwardRef(function Select<ValueType extends string>(
+  props: SelectProps<ValueType>,
+  forwardedRef: ForwardedRef<HTMLSelectElement | HTMLButtonElement>
+) {
   const {
     id: idProp,
     name,
     variant = 'outlined',
     color = 'primary',
     value: valueProp,
-    defaultValue = '',
+    defaultValue = props.multiple ? [] : ('' as const),
     disabled,
     error = false,
     label = null,
@@ -70,26 +95,38 @@ export const Select = forwardRef<
     onFocus,
     onBlur,
     native = false,
+    multiple = false,
     children,
     renderValue: renderValueProp,
     leadingIcon = null,
+    CustomContainer: overwrittenContainer,
     ...otherProps
   } = props;
   const [value, onChange] = useControlledState(
     valueProp,
-    onChangeProp,
+    onChangeProp as (
+      e: ChangeEvent<HTMLSelectElement>,
+      value: ValueType | ValueType[]
+    ) => void,
     defaultValue,
-    (setState) => (e, v) => {
+    (setState) => (e, v: ValueType | ValueType[]) => {
       setState(v);
     }
   );
+  if (multiple && !Array.isArray(value)) {
+    console.warn(
+      'Warning: The `value` prop supplied to <Select> must be an array if `multiple` is true.'
+    );
+  }
+
   const [hasFocus, setHasFocus] = useState(false);
   const buttonRef = useRef<HTMLButtonElement | HTMLSelectElement>();
   const [open, setOpen] = useState(false);
   const fallbackId = useId();
   const theme = useTheme();
 
-  const Container = componentMap[variant] || OutlinedContainer;
+  const Container =
+    overwrittenContainer || componentMap[variant] || OutlinedContainer;
 
   const handleFocus = () => {
     setHasFocus(true);
@@ -104,11 +141,25 @@ export const Select = forwardRef<
   };
 
   const handleOnChange = (e: any) => {
-    onChange &&
-      onChange(
-        e as any,
-        native ? e.target.value : e.currentTarget.dataset.value
-      );
+    const selectedValue = native
+      ? e.target.value
+      : e.currentTarget.dataset.value;
+
+    if (multiple && Array.isArray(value)) {
+      if (value.find((c) => c === selectedValue)) {
+        onChange &&
+          onChange(e as any, value.filter((c) => c !== selectedValue) as any);
+      } else {
+        onChange && onChange(e as any, [...value, selectedValue] as any);
+      }
+
+      const isMac = Boolean(/mac os|ios/i.test(navigator.userAgent));
+      if (e.key === ' ' || (isMac && e.metaKey) || (!isMac && e.ctrlKey)) {
+        e.preventDefault();
+      }
+    } else {
+      onChange && onChange(e as any, selectedValue);
+    }
   };
 
   const hasError = Boolean(error);
@@ -118,9 +169,23 @@ export const Select = forwardRef<
   const inputId = `${id}-text-field`;
   const helperTextId = helperText ? `${id}-helper-text` : undefined;
 
-  const renderValue = renderValueProp || makeDefaultRender(children);
+  const defaultRenderFn = useMemo(
+    () =>
+      multiple
+        ? makeDefaultMultipleRender(children)
+        : makeDefaultRender<ValueType>(children),
+    [children, multiple]
+  );
+  const renderValue = renderValueProp || defaultRenderFn;
 
-  const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;
+  function hasAnySelected() {
+    if (multiple) {
+      return value.length > 0;
+    } else {
+      return value !== '';
+    }
+  }
+  const labelIsFloating = hasFocus || open || hasAnySelected();
 
   const Comp: ComponentType<any> = native
     ? (SelectComp as any)
@@ -131,13 +196,15 @@ export const Select = forwardRef<
     // is different than the value we have stored in state we need to
     // update our state to reflect that.
     if (native && buttonRef.current && buttonRef.current.value !== value) {
-      onChange && onChange({} as any, buttonRef.current.value);
+      onChange && onChange({} as any, buttonRef.current.value as ValueType);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
-    <SelectProvider value={{ native, onSelect: handleOnChange, value }}>
+    <SelectProvider
+      value={{ native, onSelect: handleOnChange, value, multiple }}
+    >
       <Box display="inline-flex" flexDirection="column" width="100%">
         {!native && <input type="hidden" name={name} value={value} />}
         <Container
@@ -147,7 +214,7 @@ export const Select = forwardRef<
           labelIsFloating={labelIsFloating}
           inputId={inputId}
           hasFocus={hasFocus}
-          disabled={disabled}
+          disabled={disabled ?? false}
           forceActive={open}
           error={hasError}
           leadingIcon={Boolean(leadingIcon)}
@@ -172,10 +239,11 @@ export const Select = forwardRef<
               hasLabel={!!label}
               leadingIcon={Boolean(leadingIcon)}
               name={native ? name : undefined}
+              multiple={native ? multiple : undefined}
               trailingIcon={true}
               {...otherProps}
             >
-              {native ? children : renderValue(value)}
+              {native ? children : renderValue(value as any)}
             </Comp>
             {!native && (
               <MenuPopover usePortal>
@@ -208,4 +276,8 @@ export const Select = forwardRef<
       </Box>
     </SelectProvider>
   );
-});
+}) as <ValueType extends string>(
+  p: SelectProps<ValueType> & {
+    ref?: Ref<HTMLSelectElement | HTMLButtonElement>;
+  }
+) => ReactElement;