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

package/src/Select/Select.tsx

@@ -1,5 +1,13 @@
-import { forwardRef, useState, useRef, useEffect, useId } from 'react';
-import * as React from 'react';
+import type {
+  SelectHTMLAttributes,
+  ReactNode,
+  ChangeEvent,
+  ComponentType,
+  ForwardedRef,
+  ReactElement,
+  Ref,
+} from 'react';
+import { useMemo, forwardRef, useState, useRef, useEffect, useId } from 'react';
 import {
   wrapEvent,
   assignMultipleRefs,
@@ -9,51 +17,75 @@ 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';
+import { listItemStyle } from '../ListItem';
 
 const componentMap = {
   outlined: OutlinedContainer,
   filled: FilledContainer,
 };
 
-export interface SelectProps
+interface BaseSelectProps
   extends Omit<
-    BoxProps<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>,
+    BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>,
     'value' | 'defaultValue' | 'onChange'
   > {
   variant?: 'outlined' | 'filled';
   color?: 'primary' | 'secondary';
-  label?: React.ReactNode;
+  label?: ReactNode;
   helperText?: string;
-  defaultValue?: string;
-  value?: string;
   native?: boolean;
   theme?: Theme;
   error?: boolean | string;
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string) => void;
-  renderValue?: (value?: string) => string | undefined;
-  leadingIcon?: React.ReactNode;
+  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;
+      }
+    | {
+        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,
@@ -63,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);
@@ -97,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);
@@ -111,11 +169,25 @@ 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: React.ComponentType<any> = native
+  const Comp: ComponentType<any> = native
     ? (SelectComp as any)
     : (SelectButton as any);
 
@@ -124,14 +196,17 @@ 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
           theme={theme}
           label={label}
@@ -139,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)}
@@ -163,10 +238,12 @@ export const Select = forwardRef<
               aria-describedby={helperTextId}
               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>
@@ -176,6 +253,11 @@ export const Select = forwardRef<
                     minWidth: buttonRef?.current?.offsetWidth,
                   }}
                   role="listbox"
+                  __css={{
+                    '& [data-menu-item=""]': {
+                      ...listItemStyle('primary'),
+                    },
+                  }}
                 >
                   {children}
                 </MenuList>
@@ -194,4 +276,8 @@ export const Select = forwardRef<
       </Box>
     </SelectProvider>
   );
-});
+}) as <ValueType extends string>(
+  p: SelectProps<ValueType> & {
+    ref?: Ref<HTMLSelectElement | HTMLButtonElement>;
+  }
+) => ReactElement;

package/src/Select/SelectIcon.tsx

@@ -1,16 +1,16 @@
 import type { SVGAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { alpha } from '../color';
 import { PADDING_RIGHT_WITH_ICON } from '../TextField/consts';
+import { EASING_STANDARD } from '../motion';
 
 export type SelectIconProps = BoxProps<
   SVGElement,
-  React.SVGAttributes<SVGElement>
+  SVGAttributes<SVGElement>
 > & { open?: boolean };
 
 export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
@@ -32,8 +32,7 @@ export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
           color: open ? 'primary' : alpha('on.surface', 0.54),
           pointerEvents: 'none',
           transform: open ? 'rotate(180deg)' : undefined,
-          transition:
-            'transform .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1)',
+          transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`,
         }}
         {...otherProps}
       >

package/src/Select/SelectMultiple.story.tsx

@@ -0,0 +1,215 @@
+import { useState } from 'react';
+
+import { Select } from './';
+import { SelectItem } from '../SelectItem';
+import { Box } from '../Box';
+import { CheckBox } from '../CheckBox';
+
+export default {
+  title: 'components/Select/Multiple',
+};
+
+const SearchIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={24}
+    width={24}
+    viewBox="0 0 48 48"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" />
+  </svg>
+);
+
+type OptionType =
+  | ''
+  | '10'
+  | '20'
+  | '30'
+  | '40'
+  | '50'
+  | '60'
+  | '70'
+  | '80'
+  | '90'
+  | '100'
+  | '110'
+  | '120'
+  | '130';
+
+const Example = ({
+  variant,
+  native = false,
+}: {
+  variant?: 'outlined' | 'filled';
+  native?: boolean;
+}) => {
+  const [error, setError] = useState<boolean | string>(false);
+  const [color, setColor] = useState<'primary' | 'secondary'>('primary');
+
+  /* eslint-disable react/no-children-prop */
+  const children = [
+    <SelectItem<OptionType> key={1} value={'10'}>
+      Ten
+    </SelectItem>,
+    <SelectItem<OptionType> key={2} value={'20'}>
+      Twenty
+    </SelectItem>,
+    <SelectItem<OptionType> key={3} value={'30'}>
+      Thirty
+    </SelectItem>,
+    <SelectItem<OptionType> key={4} value={'40'}>
+      Fourty
+    </SelectItem>,
+    <SelectItem<OptionType> key={5} value={'50'}>
+      Fifty
+    </SelectItem>,
+    <SelectItem<OptionType> key={6} value={'60'}>
+      Sixty
+    </SelectItem>,
+    <SelectItem<OptionType> key={7} value={'70'}>
+      Seventy
+    </SelectItem>,
+    <SelectItem<OptionType> key={8} value={'80'}>
+      Eighty
+    </SelectItem>,
+    <SelectItem<OptionType> key={9} value={'90'}>
+      Ninety
+    </SelectItem>,
+    <SelectItem<OptionType> key={10} value={'100'}>
+      One Hundred
+    </SelectItem>,
+    <SelectItem<OptionType> key={11} value={'110'}>
+      One Hundred Ten
+    </SelectItem>,
+    <SelectItem<OptionType> key={12} value={'120'}>
+      One Hundred Twenty
+    </SelectItem>,
+    <SelectItem<OptionType> key={13} value={'130'}>
+      One Hundred Thirty
+    </SelectItem>,
+  ];
+
+  return (
+    <Box p={3}>
+      {/* <CheckBox
+        checked={Boolean(error)}
+        onChange={(e) =>
+          setError(e.target.checked ? 'This field is required' : false)
+        }
+      >
+        Has Error
+      </CheckBox>
+      <Box width={230} display="inline-block">
+        <Select<'primary' | 'secondary'>
+          value={color}
+          onChange={(e, value) => setColor(value)}
+          label="Color"
+        >
+          <SelectItem<'primary' | 'secondary'> value="primary">
+            Primary
+          </SelectItem>
+          <SelectItem<'primary' | 'secondary'> value="secondary">
+            Secondary
+          </SelectItem>
+        </Select>
+      </Box> */}
+      <Box m={3} bg="surface">
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            multiple
+            variant={variant}
+            label="Standard"
+            helperText="Helper text"
+            children={children}
+            placeholder="Empty"
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            multiple
+            variant={variant}
+            label="Standard"
+            defaultValue={['20']}
+            helperText="Helper text"
+            children={children}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            multiple
+            variant={variant}
+            label="Standard"
+            children={children}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            multiple
+            variant={variant}
+            label="Disabled"
+            helperText="Helper text"
+            disabled
+            children={children}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            multiple
+            variant={variant}
+            label=""
+            helperText="Helper text"
+            children={children}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            multiple
+            variant={variant}
+            label=""
+            helperText="Helper text"
+            children={children}
+            leadingIcon={<SearchIcon />}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            multiple
+            variant={variant}
+            label="Standard"
+            helperText="Helper text"
+            children={children}
+            leadingIcon={<SearchIcon />}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export const Filled = () => <Example variant="filled" />;
+export const Outlined = () => <Example variant="outlined" />;
+export const FilledNative = () => <Example variant="filled" native />;
+export const OutlinedNative = () => <Example variant="outlined" native />;

package/src/Select/context.ts

@@ -1,19 +1,22 @@
+import type { MouseEvent, KeyboardEvent } from 'react';
 import { useContext, createContext } from 'react';
 
 // Select Component
-export interface SelectContextProps {
+export interface SelectContextProps<ValueType extends string> {
   native: boolean;
-  value?: string;
+  value?: ValueType | ValueType[];
   onSelect: (
-    e: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>
+    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>
   ) => void;
+  multiple: boolean;
 }
 
-const selectContext = createContext<SelectContextProps>({
+const selectContext = createContext<SelectContextProps<string>>({
   native: false,
   onSelect: () => {
     // noop
   },
+  multiple: false,
 });
 export const { Provider: SelectProvider } = selectContext;
 export const useSelectContext = () => useContext(selectContext);

package/src/Select/defaultRender.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import { Children, isValidElement } from 'react';
+
+import { Box } from '../Box';
+
+export const makeDefaultRender =
+  <T extends string>(children?: ReactNode) =>
+  (val: T | '' | undefined): ReactNode => {
+    if (children && val !== undefined) {
+      const allChildren = Children.toArray(children);
+      for (let i = 0; i < allChildren.length; i++) {
+        const child = allChildren[i];
+        if (isValidElement(child) && String(child.props.value) === val) {
+          return child.props.children;
+        }
+      }
+    }
+    return val || undefined;
+  };
+
+export const makeDefaultMultipleRender =
+  <T extends string>(children?: ReactNode) =>
+  (val: T[] | undefined): ReactNode => {
+    const ret = [];
+    if (children && val !== undefined && val.length > 0) {
+      const set = new Set<string>(val);
+      const allChildren = Children.toArray(children);
+      for (let i = 0; i < allChildren.length; i++) {
+        const child = allChildren[i];
+        if (isValidElement(child) && set.has(String(child.props.value))) {
+          ret.push(child.props.children);
+        }
+      }
+    }
+
+    return (
+      <Box
+        as="span"
+        sx={{
+          maxWidth: '100%',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {ret.join(', ')}
+      </Box>
+    );
+  };

package/src/Select/styledComponents.tsx

@@ -1,14 +1,18 @@
+import type {
+  ElementType,
+  FC,
+  RefAttributes,
+  SelectHTMLAttributes,
+} from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import type { MenuButtonProps } from '@basic-ui/core';
 import { MenuButton as BaseMenuButton } from '@basic-ui/core';
 
 import type { Theme } from '../theme';
 import { Input } from '../TextField/Input';
 
-export interface SelectProps
-  extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  as?: React.ElementType<any>;
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  as?: ElementType<any>;
   variant?: 'filled' | 'outlined';
   hasLabel?: boolean;
   theme: Theme;
@@ -17,32 +21,18 @@ export interface SelectProps
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
   ({ as: asProp = 'select', ...props }, forwardedRef) => {
-    const InputSelect: React.FC<
-      SelectProps & React.RefAttributes<HTMLSelectElement>
-    > = Input as any;
+    const InputSelect: FC<SelectProps & RefAttributes<HTMLSelectElement>> =
+      Input as any;
 
     return <InputSelect as={asProp} ref={forwardedRef} {...props} />;
   }
 );
 
-const SelectButtonInner = forwardRef<
-  HTMLButtonElement,
-  SelectProps & { innerAs?: React.ElementType<any> }
->(({ innerAs = 'div', ...props }, forwardedRef) => {
-  const InputButton: React.FC<
-    SelectProps & React.RefAttributes<HTMLButtonElement>
-  > = Input as any;
-
-  return (
-    <InputButton as={innerAs} ref={forwardedRef} tabIndex={0} {...props} />
-  );
-});
-
 export const SelectButton = forwardRef<
   HTMLButtonElement,
   SelectProps & MenuButtonProps
->(({ as, children, ...props }, ref) => (
-  <BaseMenuButton as={SelectButtonInner} innerAs={as} ref={ref} {...props}>
+>(({ as = 'div', children, ...props }, ref) => (
+  <BaseMenuButton as={Input} innerAs={as} ref={ref} tabIndex={0} {...props}>
     {children}
   </BaseMenuButton>
 ));