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

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

@@ -1 +1 @@
-export * from './Select';
+export * from './Select';

package/src/Select/styledComponents.tsx

@@ -1,48 +1,38 @@
-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>;
-  variant?: 'filled' | 'outlined';
-  hasLabel?: boolean;
-  theme: Theme;
-  leadingIcon?: boolean;
-}
-
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  ({ as: asProp = 'select', ...props }, forwardedRef) => {
-    const InputSelect: React.FC<
-      SelectProps & React.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}>
-    {children}
-  </BaseMenuButton>
-));
+import type {
+  ElementType,
+  FC,
+  RefAttributes,
+  SelectHTMLAttributes,
+} from 'react';
+import { forwardRef } 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 SelectHTMLAttributes<HTMLSelectElement> {
+  as?: ElementType<any>;
+  variant?: 'filled' | 'outlined';
+  hasLabel?: boolean;
+  theme: Theme;
+  leadingIcon?: boolean;
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ as: asProp = 'select', ...props }, forwardedRef) => {
+    const InputSelect: FC<SelectProps & RefAttributes<HTMLSelectElement>> =
+      Input as any;
+
+    return <InputSelect as={asProp} ref={forwardedRef} {...props} />;
+  }
+);
+
+export const SelectButton = forwardRef<
+  HTMLButtonElement,
+  SelectProps & MenuButtonProps
+>(({ as = 'div', children, ...props }, ref) => (
+  <BaseMenuButton as={Input} innerAs={as} ref={ref} tabIndex={0} {...props}>
+    {children}
+  </BaseMenuButton>
+));

package/src/SelectItem/SelectItem.tsx

@@ -1,60 +1,92 @@
-import { forwardRef } from 'react';
-import { wrapEvent } from '@basic-ui/core';
-
-import type { MenuItemProps } from '../Menu';
-import { MenuItem } from '../Menu';
-import { useSelectContext } from '../Select/context';
-
-export type SelectItemProps = MenuItemProps;
-
-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);
-
-    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);
-    return (
-      <Comp
-        as={MenuItem}
-        onSelect={wrapEvent(onSelectProp, onSelect as any)}
-        data-value={value}
-        disabled={disabled}
-        ref={forwardedRef}
-        role="option"
-        selected={selected}
-        {...otherProps}
-      >
-        {children || ZERO_WIDTH_SPACE}
-      </Comp>
-    );
-  }
-);
+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';
+
+import { useSelectContext } from '../Select/context';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+type MenuItemProps = MenuItemPropsCore & BoxProps;
+
+const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
+  ({ as = 'li', ...props }, ref) => (
+    <MenuItemCore as={Box} innerAs={as} ref={ref} {...props} />
+  )
+);
+
+export interface SelectItemProps<ValueType extends string>
+  extends MenuItemProps {
+  value: ValueType;
+}
+
+const ZERO_WIDTH_SPACE = '\u200b';
+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;
+  }
+
+  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/SelectItem/index.ts

@@ -1 +1 @@
-export * from './SelectItem';
+export * from './SelectItem';

package/src/SelectionControl/SelectionControlLabel.tsx

@@ -1,37 +1,34 @@
-import type { LabelHTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-import * as React from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export interface SelectionControlLabelProps
-  extends BoxProps<
-    HTMLLabelElement,
-    React.LabelHTMLAttributes<HTMLLabelElement>
-  > {
-  as?: React.ElementType<any>;
-  children?: React.ReactNode;
-}
-
-export const SelectionControlLabel = forwardRef<
-  HTMLLabelElement,
-  SelectionControlLabelProps
->(function SelectionControlLabel(props, forwardedRef) {
-  const { as = 'label', __css, ...otherProps } = props;
-
-  return (
-    <Box<BoxProps<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>>>
-      ref={forwardedRef}
-      as={as}
-      __css={{
-        display: 'inline-flex',
-        position: 'relative',
-        alignItems: 'center',
-        WebkitTapHighlightColor: 'transparent',
-        ...__css,
-      }}
-      {...otherProps}
-    />
-  );
-});
+import type { ElementType, LabelHTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export interface SelectionControlLabelProps
+  extends BoxProps<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>> {
+  as?: ElementType<any>;
+  children?: ReactNode;
+}
+
+export const SelectionControlLabel = forwardRef<
+  HTMLLabelElement,
+  SelectionControlLabelProps
+>(function SelectionControlLabel(props, forwardedRef) {
+  const { as = 'label', __css, ...otherProps } = props;
+
+  return (
+    <Box<BoxProps<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>>>
+      ref={forwardedRef}
+      as={as}
+      __css={{
+        display: 'inline-flex',
+        position: 'relative',
+        alignItems: 'center',
+        WebkitTapHighlightColor: 'transparent',
+        gap: 1,
+        ...__css,
+      }}
+      {...otherProps}
+    />
+  );
+});