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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.33",
+  "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": "475bece40050a72ea07ed47cf3f34eecd51d4484"
+  "gitHead": "5442c3e57c390b7f69adab60118d7d6df9f55df0"
 }

package/src/Select/Select.story.tsx

@@ -12,7 +12,7 @@ export default {
   title: 'components/Select',
 };
 
-const SearchIcon = (props) => (
+const SearchIcon = (props: any) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     height={24}
@@ -25,6 +25,22 @@ const SearchIcon = (props) => (
   </svg>
 );
 
+type OptionType =
+  | ''
+  | '10'
+  | '20'
+  | '30'
+  | '40'
+  | '50'
+  | '60'
+  | '70'
+  | '80'
+  | '90'
+  | '100'
+  | '110'
+  | '120'
+  | '130';
+
 const Example = ({
   variant,
   native = false,
@@ -32,51 +48,51 @@ const Example = ({
 }: {
   variant?: 'outlined' | 'filled';
   native?: boolean;
-  CustomContainer?: SelectProps['CustomContainer'];
+  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>,
   ];
@@ -92,61 +108,23 @@ const Example = ({
         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}
@@ -159,7 +137,7 @@ const Example = ({
           />
         </Box>
         <Box mb={3} width={230}>
-          <Select
+          <Select<OptionType>
             error={error}
             color={color}
             native={native}
@@ -172,7 +150,7 @@ const Example = ({
           />
         </Box>
         <Box mb={3} width={230}>
-          <Select
+          <Select<OptionType>
             error={error}
             color={color}
             native={native}
@@ -183,7 +161,7 @@ const Example = ({
           />
         </Box>
         <Box mb={3} width={230}>
-          <Select
+          <Select<OptionType>
             error={error}
             color={color}
             native={native}
@@ -196,7 +174,7 @@ const Example = ({
           />
         </Box>
         <Box mb={3} width={230}>
-          <Select
+          <Select<OptionType>
             error={error}
             color={color}
             native={native}
@@ -208,7 +186,7 @@ const Example = ({
           />
         </Box>
         <Box mb={3} width={230}>
-          <Select
+          <Select<OptionType>
             error={error}
             color={color}
             native={native}
@@ -221,7 +199,7 @@ const Example = ({
           />
         </Box>
         <Box mb={3} width={230}>
-          <Select
+          <Select<OptionType>
             error={error}
             color={color}
             native={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,
@@ -21,7 +24,7 @@ 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';
@@ -32,7 +35,7 @@ const componentMap = {
   filled: FilledContainer,
 };
 
-export interface SelectProps
+interface BaseSelectProps
   extends Omit<
     BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>,
     'value' | 'defaultValue' | 'onChange'
@@ -41,28 +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,
@@ -72,6 +95,7 @@ export const Select = forwardRef<
     onFocus,
     onBlur,
     native = false,
+    multiple = false,
     children,
     renderValue: renderValueProp,
     leadingIcon = null,
@@ -80,12 +104,21 @@ export const Select = forwardRef<
   } = 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);
@@ -108,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);
@@ -122,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)
@@ -135,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
@@ -176,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>
@@ -212,4 +276,8 @@ export const Select = forwardRef<
       </Box>
     </SelectProvider>
   );
-});
+}) as <ValueType extends string>(
+  p: SelectProps<ValueType> & {
+    ref?: Ref<HTMLSelectElement | HTMLButtonElement>;
+  }
+) => ReactElement;

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

@@ -2,19 +2,21 @@ 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: 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);