@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.51

package/src/Select/Select.tsx

@@ -1,197 +1,283 @@
-import { forwardRef, useState, useRef, useEffect, useId } from 'react';
-import * as React from 'react';
-import {
-  wrapEvent,
-  assignMultipleRefs,
-  useControlledState,
-} from '@basic-ui/core';
-
-import type { Theme } from '../theme';
-import { useTheme } from '../theme';
-import { Select as SelectComp, SelectButton } from './styledComponents';
-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 type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { IconContainer } from '../TextField/IconContainer';
-
-const componentMap = {
-  outlined: OutlinedContainer,
-  filled: FilledContainer,
-};
-
-export interface SelectProps
-  extends Omit<
-    BoxProps<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>,
-    'value' | 'defaultValue' | 'onChange'
-  > {
-  variant?: 'outlined' | 'filled';
-  color?: 'primary' | 'secondary';
-  label?: React.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;
-}
-
-export const Select = forwardRef<
-  HTMLSelectElement | HTMLButtonElement,
-  SelectProps
->(function Select(props, forwardedRef) {
-  const {
-    id: idProp,
-    variant = 'outlined',
-    color = 'primary',
-    value: valueProp,
-    defaultValue = '',
-    disabled,
-    error = false,
-    label = null,
-    placeholder,
-    helperText: helperTextProp,
-    onChange: onChangeProp,
-    onFocus,
-    onBlur,
-    native = false,
-    children,
-    renderValue: renderValueProp,
-    leadingIcon = null,
-    ...otherProps
-  } = props;
-  const [value, onChange] = useControlledState(
-    valueProp,
-    onChangeProp,
-    defaultValue,
-    (setState) => (e, v) => {
-      setState(v);
-    }
-  );
-  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 handleFocus = () => {
-    setHasFocus(true);
-  };
-
-  const handleBlur = () => {
-    setHasFocus(false);
-  };
-
-  const handleToggle = (e: unknown, isOpen: boolean) => {
-    setOpen(isOpen);
-  };
-
-  const handleOnChange = (e: any) => {
-    onChange &&
-      onChange(
-        e as any,
-        native ? e.target.value : e.currentTarget.dataset.value
-      );
-  };
-
-  const hasError = Boolean(error);
-  const helperText = typeof error === 'string' ? error : helperTextProp;
-
-  const id = idProp || fallbackId;
-  const inputId = `${id}-text-field`;
-  const helperTextId = helperText ? `${id}-helper-text` : undefined;
-
-  const renderValue = renderValueProp || makeDefaultRender(children);
-
-  const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;
-
-  const Comp: React.ComponentType<any> = native
-    ? (SelectComp as any)
-    : (SelectButton as any);
-
-  useEffect(() => {
-    // right after mounting, if the default value in the select element
-    // 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);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <SelectProvider value={{ native, onSelect: handleOnChange, value }}>
-      <Box display="inline-flex" flexDirection="column" width="100%">
-        <Container
-          theme={theme}
-          label={label}
-          color={color}
-          labelIsFloating={labelIsFloating}
-          inputId={inputId}
-          hasFocus={hasFocus}
-          disabled={disabled}
-          forceActive={open}
-          error={hasError}
-          leadingIcon={Boolean(leadingIcon)}
-        >
-          <Menu onChange={handleToggle} open={open}>
-            {leadingIcon && (
-              <IconContainer position="start">{leadingIcon}</IconContainer>
-            )}
-            <Comp
-              ref={assignMultipleRefs(forwardedRef, buttonRef)}
-              variant={variant}
-              id={inputId}
-              onFocus={wrapEvent(onFocus, handleFocus)}
-              onBlur={wrapEvent(onBlur, handleBlur)}
-              onChange={native ? handleOnChange : undefined}
-              value={native ? value : undefined}
-              theme={theme}
-              placeholder={placeholder}
-              disabled={disabled}
-              aria-disabled={disabled ? 'true' : undefined}
-              aria-describedby={helperTextId}
-              hasLabel={!!label}
-              leadingIcon={Boolean(leadingIcon)}
-              trailingIcon={true}
-              {...otherProps}
-            >
-              {native ? children : renderValue(value)}
-            </Comp>
-            {!native && (
-              <MenuPopover usePortal>
-                <MenuList
-                  defaultActiveItemValue={value}
-                  style={{
-                    minWidth: buttonRef?.current?.offsetWidth,
-                  }}
-                  role="listbox"
-                >
-                  {children}
-                </MenuList>
-              </MenuPopover>
-            )}
-          </Menu>
-          <SelectIcon open={open} />
-        </Container>
-
-        <HelperText
-          disabled={disabled}
-          id={helperTextId}
-          leftSide={helperText}
-          error={hasError}
-        />
-      </Box>
-    </SelectProvider>
-  );
-});
+import type {
+  SelectHTMLAttributes,
+  ReactNode,
+  ChangeEvent,
+  ComponentType,
+  ForwardedRef,
+  ReactElement,
+  Ref,
+} from 'react';
+import { useMemo, forwardRef, useState, useRef, useEffect, useId } from 'react';
+import {
+  wrapEvent,
+  assignMultipleRefs,
+  useControlledState,
+} from '@basic-ui/core';
+
+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 { 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,
+};
+
+interface BaseSelectProps
+  extends Omit<
+    BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>,
+    'value' | 'defaultValue' | 'onChange'
+  > {
+  variant?: 'outlined' | 'filled';
+  color?: 'primary' | 'secondary';
+  label?: ReactNode;
+  helperText?: string;
+  native?: boolean;
+  theme?: Theme;
+  error?: boolean | string;
+  leadingIcon?: ReactNode;
+  CustomContainer?: ComponentType<FilledContainerProps>;
+}
+
+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 = props.multiple ? [] : ('' as const),
+    disabled,
+    error = false,
+    label = null,
+    placeholder,
+    helperText: helperTextProp,
+    onChange: onChangeProp,
+    onFocus,
+    onBlur,
+    native = false,
+    multiple = false,
+    children,
+    renderValue: renderValueProp,
+    leadingIcon = null,
+    CustomContainer: overwrittenContainer,
+    ...otherProps
+  } = props;
+  const [value, onChange] = useControlledState(
+    valueProp,
+    onChangeProp as (
+      e: ChangeEvent<HTMLSelectElement>,
+      value: ValueType | ValueType[]
+    ) => void,
+    defaultValue,
+    (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 =
+    overwrittenContainer || componentMap[variant] || OutlinedContainer;
+
+  const handleFocus = () => {
+    setHasFocus(true);
+  };
+
+  const handleBlur = () => {
+    setHasFocus(false);
+  };
+
+  const handleToggle = (e: unknown, isOpen: boolean) => {
+    setOpen(isOpen);
+  };
+
+  const handleOnChange = (e: any) => {
+    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);
+  const helperText = typeof error === 'string' ? error : helperTextProp;
+
+  const id = idProp || fallbackId;
+  const inputId = `${id}-text-field`;
+  const helperTextId = helperText ? `${id}-helper-text` : undefined;
+
+  const defaultRenderFn = useMemo(
+    () =>
+      multiple
+        ? makeDefaultMultipleRender(children)
+        : makeDefaultRender<ValueType>(children),
+    [children, multiple]
+  );
+  const renderValue = renderValueProp || defaultRenderFn;
+
+  function hasAnySelected() {
+    if (multiple) {
+      return value.length > 0;
+    } else {
+      return value !== '';
+    }
+  }
+  const labelIsFloating = hasFocus || open || hasAnySelected();
+
+  const Comp: ComponentType<any> = native
+    ? (SelectComp as any)
+    : (SelectButton as any);
+
+  useEffect(() => {
+    // right after mounting, if the default value in the select element
+    // 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 as ValueType);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <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}
+          color={color}
+          labelIsFloating={labelIsFloating}
+          inputId={inputId}
+          hasFocus={hasFocus}
+          disabled={disabled ?? false}
+          forceActive={open}
+          error={hasError}
+          leadingIcon={Boolean(leadingIcon)}
+        >
+          <Menu onChange={handleToggle} open={open}>
+            {leadingIcon && (
+              <IconContainer position="start">{leadingIcon}</IconContainer>
+            )}
+            <Comp
+              ref={assignMultipleRefs(forwardedRef, buttonRef)}
+              variant={variant}
+              id={inputId}
+              onFocus={wrapEvent(onFocus, handleFocus)}
+              onBlur={wrapEvent(onBlur, handleBlur)}
+              onChange={native ? handleOnChange : undefined}
+              value={native ? value : undefined}
+              theme={theme}
+              placeholder={placeholder}
+              disabled={disabled}
+              aria-disabled={disabled ? 'true' : undefined}
+              aria-describedby={helperTextId}
+              hasLabel={!!label}
+              leadingIcon={Boolean(leadingIcon)}
+              name={native ? name : undefined}
+              multiple={native ? multiple : undefined}
+              trailingIcon={true}
+              {...otherProps}
+            >
+              {native ? children : renderValue(value as any)}
+            </Comp>
+            {!native && (
+              <MenuPopover usePortal>
+                <MenuList
+                  defaultActiveItemValue={value}
+                  style={{
+                    minWidth: buttonRef?.current?.offsetWidth,
+                  }}
+                  role="listbox"
+                  __css={{
+                    '& [data-menu-item=""]': {
+                      ...listItemStyle('primary'),
+                    },
+                  }}
+                >
+                  {children}
+                </MenuList>
+              </MenuPopover>
+            )}
+          </Menu>
+          <SelectIcon open={open} />
+        </Container>
+
+        <HelperText
+          disabled={disabled}
+          id={helperTextId}
+          leftSide={helperText}
+          error={hasError}
+        />
+      </Box>
+    </SelectProvider>
+  );
+}) as <ValueType extends string>(
+  p: SelectProps<ValueType> & {
+    ref?: Ref<HTMLSelectElement | HTMLButtonElement>;
+  }
+) => ReactElement;

package/src/Select/SelectIcon.tsx

@@ -1,44 +1,43 @@
-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';
-
-export type SelectIconProps = BoxProps<
-  SVGElement,
-  React.SVGAttributes<SVGElement>
-> & { open?: boolean };
-
-export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
-  function SelectIcon(props, forwardedRef) {
-    const { open, ...otherProps } = props;
-
-    return (
-      <Box<BoxProps<SVGElement, SVGAttributes<SVGElement>>>
-        ref={forwardedRef}
-        as="svg"
-        aria-hidden={true}
-        viewBox="0 0 24 24"
-        __css={{
-          position: 'absolute',
-          top: `calc(50% - ${rem(12)})`,
-          right: rem(PADDING_RIGHT_WITH_ICON),
-          width: rem(24),
-          height: rem(24),
-          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)',
-        }}
-        {...otherProps}
-      >
-        <path fill="currentColor" d="M7 10l5 5 5-5z" />
-      </Box>
-    );
-  }
-);
+import type { SVGAttributes } from 'react';
+import { forwardRef } 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,
+  SVGAttributes<SVGElement>
+> & { open?: boolean };
+
+export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
+  function SelectIcon(props, forwardedRef) {
+    const { open, ...otherProps } = props;
+
+    return (
+      <Box<BoxProps<SVGElement, SVGAttributes<SVGElement>>>
+        ref={forwardedRef}
+        as="svg"
+        aria-hidden={true}
+        viewBox="0 0 24 24"
+        __css={{
+          position: 'absolute',
+          top: `calc(50% - ${rem(12)})`,
+          right: rem(PADDING_RIGHT_WITH_ICON),
+          width: rem(24),
+          height: rem(24),
+          color: open ? 'primary' : alpha('on.surface', 0.54),
+          pointerEvents: 'none',
+          transform: open ? 'rotate(180deg)' : undefined,
+          transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`,
+        }}
+        {...otherProps}
+      >
+        <path fill="currentColor" d="M7 10l5 5 5-5z" />
+      </Box>
+    );
+  }
+);