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

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/theme/theme.ts

@@ -486,8 +486,8 @@ export const theme = {
   styles: {
     root: {
       body: {
-        fontFamily: 'body',
-        fontWeight: 'body',
+        fontFamily: 'body1',
+        fontWeight: 'body1',
         lineHeight: 'body',
         backgroundColor: 'surface',
         color: 'on.surface',

package/src/Select/defaultRender.ts

@@ -1,19 +0,0 @@
-import type { ReactNode } from 'react';
-import { Children, isValidElement } from 'react';
-
-export const makeDefaultRender =
-  (children?: ReactNode) =>
-  (val?: string): string | undefined => {
-    if (children && val !== undefined) {
-      const allChildren = Children.toArray(children);
-      for (let i = 0; i < allChildren.length; i++) {
-        const child = allChildren[i];
-        if (isValidElement(child)) {
-          if (String(child.props.value) === val) {
-            return child.props.children;
-          }
-        }
-      }
-    }
-    return val || undefined;
-  };