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

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

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/SelectItem/SelectItem.tsx

@@ -1,3 +1,4 @@
+import type { ForwardedRef, ReactElement, Ref } from 'react';
 import { forwardRef } from 'react';
 import { wrapEvent, MenuItem as MenuItemCore } from '@basic-ui/core';
 import type { MenuItemProps as MenuItemPropsCore } from '@basic-ui/core';
@@ -14,57 +15,78 @@ const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
   )
 );
 
-export type SelectItemProps = MenuItemProps;
+export interface SelectItemProps<ValueType extends string>
+  extends MenuItemProps {
+  value: ValueType;
+}
 
 const ZERO_WIDTH_SPACE = '\u200b';
-export const SelectItem = forwardRef<HTMLLIElement, MenuItemProps>(
-  function SelectItem(props, forwardedRef) {
-    const {
-      as: Comp = MenuItem,
-      onSelect: onSelectProp,
-      children,
-      value: valueProp,
-      disabled,
-      ...otherProps
-    } = props;
-    const { native, onSelect, value: selectedValue } = useSelectContext();
-    const value =
-      valueProp !== undefined && valueProp !== null
-        ? String(valueProp)
-        : (children as string);
+export const SelectItem = forwardRef(function SelectItem<
+  ValueType extends string
+>(
+  props: SelectItemProps<ValueType>,
+  forwardedRef: ForwardedRef<HTMLLIElement>
+) {
+  const {
+    as: Comp = MenuItem,
+    onSelect: onSelectProp,
+    children,
+    value: valueProp,
+    disabled,
+    onKeyDown,
+    ...otherProps
+  } = props;
+  const {
+    native,
+    onSelect,
+    value: selectedValue,
+    multiple,
+  } = useSelectContext();
+  const value =
+    valueProp !== undefined && valueProp !== null
+      ? String(valueProp)
+      : (children as string);
 
-    if (native) {
-      return (
-        <option
-          ref={forwardedRef}
-          value={value}
-          disabled={disabled}
-          {...(otherProps as any)}
-        >
-          {children}
-        </option>
-      );
-    }
-
-    if (children === undefined && disabled) {
-      return null;
-    }
-
-    const selected = value === String(selectedValue);
+  if (native) {
     return (
-      <Comp
-        as={MenuItem}
-        onSelect={wrapEvent(onSelectProp, onSelect as any)}
-        data-value={value}
-        disabled={disabled}
+      <option
         ref={forwardedRef}
-        role="option"
-        aria-selected={selected ? 'true' : undefined}
-        selected={selected}
-        {...otherProps}
+        value={value}
+        disabled={disabled}
+        {...(otherProps as any)}
       >
-        {children || ZERO_WIDTH_SPACE}
-      </Comp>
+        {children}
+      </option>
     );
   }
-);
+
+  if (children === undefined && disabled) {
+    return null;
+  }
+
+  let selected = false;
+  if (multiple && Array.isArray(selectedValue)) {
+    selected = Boolean(selectedValue.find((v) => v === value));
+  } else {
+    selected = value === String(selectedValue);
+  }
+  return (
+    <Comp
+      as={MenuItem}
+      onSelect={wrapEvent(onSelectProp, onSelect as any)}
+      data-value={value}
+      disabled={disabled}
+      ref={forwardedRef}
+      role="option"
+      aria-selected={selected ? 'true' : undefined}
+      selected={selected}
+      {...otherProps}
+    >
+      {children || ZERO_WIDTH_SPACE}
+    </Comp>
+  );
+}) as <ValueType extends string>(
+  p: SelectItemProps<ValueType> & {
+    ref?: Ref<HTMLLIElement>;
+  }
+) => ReactElement;

package/src/TextField/FilledContainer.tsx

@@ -24,9 +24,10 @@ const makeSelector = (
   `input:${state} ~ &,` +
   `select:${state} ~ &,` +
   `button:${state} ~ &,` +
-  `textarea:${state} ~ &`;
+  `textarea:${state} ~ &,` +
+  `[role="button"]:${state} ~ &`;
 
-const Overlay = (props: { forceActive?: boolean }) => {
+export const FilledContainerOverlay = (props: { forceActive?: boolean }) => {
   const { forceActive } = props;
   const theme = useTheme();
 
@@ -60,7 +61,7 @@ const Overlay = (props: { forceActive?: boolean }) => {
   );
 };
 
-const BorderBottom = () => (
+const FilledContainerBorderBottom = () => (
   <Box
     __css={{
       position: 'absolute',
@@ -163,8 +164,8 @@ export const FilledContainer = forwardRef<HTMLDivElement, FilledContainerProps>(
 
         {children}
 
-        <Overlay forceActive={active} />
-        <BorderBottom />
+        <FilledContainerOverlay forceActive={active} />
+        <FilledContainerBorderBottom />
         <LineRipple active={active || error} color={color} />
       </Box>
     );

package/src/ThemeExplorer/ThemeBuilder.tsx

@@ -1,9 +1,10 @@
 import type { ComponentType } from 'react';
 import { useState, useMemo, useEffect } from 'react';
 import {
-  CorePalette,
   argbFromHex,
   hexFromArgb,
+  TonalPalette,
+  HCT,
 } from '@material/material-color-utilities';
 import type { Color } from '@basic-ui/color-picker';
 import { toColor } from '@basic-ui/color-picker';
@@ -98,10 +99,20 @@ const ThemeBuilderImpl = (props: ThemeBuilderProps) => {
     'primary'
   );
 
-  const { a1, a2, a3, error, n1, n2 } = useMemo(
-    () => CorePalette.of(argbFromHex(primaryColor.hex)),
-    [primaryColor.hex]
-  );
+  const { a1, a2, a3, error, n1, n2 } = useMemo(() => {
+    /* This is from CorePalette.of(...) */
+    const argb = argbFromHex(primaryColor.hex);
+    const hct = HCT.fromInt(argb);
+    const hue = hct.hue;
+    return {
+      a1: TonalPalette.fromHueAndChroma(hue, Math.max(48, hct.chroma)),
+      a2: TonalPalette.fromHueAndChroma(hue, 16),
+      a3: TonalPalette.fromHueAndChroma(hue + 60, 24),
+      n1: TonalPalette.fromHueAndChroma(hue, 6),
+      n2: TonalPalette.fromHueAndChroma(hue, 8),
+      error: TonalPalette.fromHueAndChroma(25, 84),
+    };
+  }, [primaryColor.hex]);
 
   const [secondaryColor, secondaryColorTonal, setSecondaryColor] =
     useDeferredColor('secondary', a2);

package/src/ThemeExplorer/ThemeColors.tsx

@@ -43,33 +43,57 @@ export const ThemeColors = memo(
         <ColorRow
           colors={[
             {
-              token: `background`,
-              bg: scheme.background,
-              color: scheme.on.background,
+              token: `surface-dim`,
+              bg: scheme['surface-dim'],
+              color: scheme.on['surface'],
             },
             {
-              token: `on.background`,
-              bg: scheme.on.background,
-              color: scheme.background,
+              token: `surface`,
+              bg: scheme['surface'],
+              color: scheme.on['surface'],
             },
             {
-              token: `surface`,
-              bg: scheme.surface,
-              color: scheme.on.surface,
+              token: `surface-bright`,
+              bg: scheme['surface-bright'],
+              color: scheme.on['surface'],
             },
+          ]}
+        />
+        <ColorRow
+          colors={[
             {
-              token: `on.surface`,
-              bg: scheme.on.surface,
-              color: scheme.surface,
+              token: `surface-container-lowest`,
+              bg: scheme['surface-container-lowest'],
+              color: scheme.on['surface'],
+            },
+            {
+              token: `surface-container-low`,
+              bg: scheme['surface-container-low'],
+              color: scheme.on['surface'],
+            },
+            {
+              token: `surface-container`,
+              bg: scheme['surface-container'],
+              color: scheme.on['surface'],
+            },
+            {
+              token: `surface-container-high`,
+              bg: scheme['surface-container-high'],
+              color: scheme.on['surface'],
+            },
+            {
+              token: `surface-container-highest`,
+              bg: scheme['surface-container-highest'],
+              color: scheme.on['surface'],
             },
           ]}
         />
         <ColorRow
           colors={[
             {
-              token: `surface-variant`,
-              bg: scheme['surface-variant'],
-              color: scheme.on['surface-variant'],
+              token: `on.surface`,
+              bg: scheme.on['surface'],
+              color: scheme['surface'],
             },
             {
               token: `on.surface-variant`,

package/src/ThemeExplorer/components.tsx

@@ -10,9 +10,9 @@ export const ColorItem = memo(
     token: string;
     style: CSSProperties;
     height?: number;
-    width: string;
+    flex: number;
   }) => {
-    const { token, style, width, height = '100%' } = props;
+    const { token, style, flex, height = '100%' } = props;
     const [computedColor, setComputedColor] = useState<string>();
     const hslColor = computedColor
       ? parseToHsl(computedColor)
@@ -43,7 +43,7 @@ export const ColorItem = memo(
       >
         <Text
           as="div"
-          variant="body-small"
+          variant="body-medium"
           style={style}
           ref={(ref: HTMLDivElement | null) => {
             if (ref) {
@@ -51,12 +51,10 @@ export const ColorItem = memo(
             }
           }}
           sx={{
-            width,
+            flex,
             height,
-            px: '10px',
-            py: '10px',
-            fontSize: '11px',
-            lineHeight: '11px',
+            px: '12px',
+            py: '12px',
             textOverflow: 'ellipsis',
             overflow: 'hidden',
           }}
@@ -80,27 +78,21 @@ export const ColorRow = memo(
         display="flex"
         sx={{
           ':first-of-type': {
-            borderTopLeftRadius: 'extra-large',
-            borderTopRightRadius: 'extra-large',
+            borderTopLeftRadius: 'large',
+            borderTopRightRadius: 'large',
             overflow: 'hidden',
           },
           ':last-of-type': {
-            borderBottomLeftRadius: 'extra-large',
-            borderBottomRightRadius: 'extra-large',
+            borderBottomLeftRadius: 'large',
+            borderBottomRightRadius: 'large',
             overflow: 'hidden',
           },
           height,
         }}
       >
-        {colors.map(({ token, bg, color }, idx) => (
+        {colors.map(({ token, bg, color }) => (
           <ColorItem
-            width={
-              colors.length % 2 === 1
-                ? idx === colors.length - 1
-                  ? '50%'
-                  : '25%'
-                : '33.33%'
-            }
+            flex={1}
             key={token}
             token={token}
             style={{ backgroundColor: bg, color: color }}