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

package/build/cjs/index.js

@@ -502,8 +502,8 @@ const theme = {
   styles: {
     root: {
       body: {
-        fontFamily: 'body',
-        fontWeight: 'body',
+        fontFamily: 'body1',
+        fontWeight: 'body1',
         lineHeight: 'body',
         backgroundColor: 'surface',
         color: 'on.surface'
@@ -4143,7 +4143,8 @@ const SelectButton = /*#__PURE__*/react$1.forwardRef(({
 const selectContext = /*#__PURE__*/react$1.createContext({
   native: false,
   onSelect: () => {// noop
-  }
+  },
+  multiple: false
 });
 const {
   Provider: SelectProvider
@@ -4186,16 +4187,41 @@ const makeDefaultRender = children => val => {
     for (let i = 0; i < allChildren.length; i++) {
       const child = allChildren[i];
 
-      if ( /*#__PURE__*/react$1.isValidElement(child)) {
-        if (String(child.props.value) === val) {
-          return child.props.children;
-        }
+      if ( /*#__PURE__*/react$1.isValidElement(child) && String(child.props.value) === val) {
+        return child.props.children;
       }
     }
   }
 
   return val || undefined;
 };
+const makeDefaultMultipleRender = children => val => {
+  const ret = [];
+
+  if (children && val !== undefined && val.length > 0) {
+    const set = new Set(val);
+    const allChildren = react$1.Children.toArray(children);
+
+    for (let i = 0; i < allChildren.length; i++) {
+      const child = allChildren[i];
+
+      if ( /*#__PURE__*/react$1.isValidElement(child) && set.has(String(child.props.value))) {
+        ret.push(child.props.children);
+      }
+    }
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(Box, {
+    as: "span",
+    sx: {
+      maxWidth: '100%',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    },
+    children: ret.join(', ')
+  });
+};
 
 const componentMap = {
   outlined: OutlinedContainer,
@@ -4208,7 +4234,7 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
     variant = 'outlined',
     color = 'primary',
     value: valueProp,
-    defaultValue = '',
+    defaultValue = props.multiple ? [] : '',
     disabled,
     error = false,
     label = null,
@@ -4218,6 +4244,7 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
     onFocus,
     onBlur,
     native = false,
+    multiple = false,
     children,
     renderValue: renderValueProp,
     leadingIcon = null,
@@ -4227,6 +4254,11 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
   const [value, onChange] = core.useControlledState(valueProp, onChangeProp, defaultValue, setState => (e, v) => {
     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] = react$1.useState(false);
   const buttonRef = react$1.useRef();
   const [open, setOpen] = react$1.useState(false);
@@ -4247,7 +4279,23 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
   };
 
   const handleOnChange = e => {
-    onChange && onChange(e, 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, value.filter(c => c !== selectedValue));
+      } else {
+        onChange && onChange(e, [...value, selectedValue]);
+      }
+
+      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, selectedValue);
+    }
   };
 
   const hasError = Boolean(error);
@@ -4255,8 +4303,18 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
   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 defaultRenderFn = react$1.useMemo(() => multiple ? makeDefaultMultipleRender(children) : makeDefaultRender(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 = native ? Select$1 : SelectButton;
   react$1.useEffect(() => {
     // right after mounting, if the default value in the select element
@@ -4271,7 +4329,8 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
     value: {
       native,
       onSelect: handleOnChange,
-      value
+      value,
+      multiple
     },
     children: /*#__PURE__*/jsxRuntime.jsxs(Box, {
       display: "inline-flex",
@@ -4314,6 +4373,7 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
             hasLabel: !!label,
             leadingIcon: Boolean(leadingIcon),
             name: native ? name : undefined,
+            multiple: native ? multiple : undefined,
             trailingIcon: true,
             ...otherProps,
             children: native ? children : renderValue(value)
@@ -4362,12 +4422,14 @@ const SelectItem = /*#__PURE__*/react$1.forwardRef(function SelectItem(props, fo
     children,
     value: valueProp,
     disabled,
+    onKeyDown,
     ...otherProps
   } = props;
   const {
     native,
     onSelect,
-    value: selectedValue
+    value: selectedValue,
+    multiple
   } = useSelectContext();
   const value = valueProp !== undefined && valueProp !== null ? String(valueProp) : children;
 
@@ -4385,7 +4447,14 @@ const SelectItem = /*#__PURE__*/react$1.forwardRef(function SelectItem(props, fo
     return null;
   }
 
-  const selected = value === String(selectedValue);
+  let selected = false;
+
+  if (multiple && Array.isArray(selectedValue)) {
+    selected = Boolean(selectedValue.find(v => v === value));
+  } else {
+    selected = value === String(selectedValue);
+  }
+
   return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     as: MenuItem,
     onSelect: core.wrapEvent(onSelectProp, onSelect),