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

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'
@@ -2193,9 +2193,9 @@ const LineRipple = /*#__PURE__*/react$1.forwardRef(function LineRipple(props, fo
   });
 });
 
-const makeSelector$1 = state => `input:${state} ~ &,` + `select:${state} ~ &,` + `button:${state} ~ &,` + `textarea:${state} ~ &`;
+const makeSelector$1 = state => `input:${state} ~ &,` + `select:${state} ~ &,` + `button:${state} ~ &,` + `textarea:${state} ~ &,` + `[role="button"]:${state} ~ &`;
 
-const Overlay = props => {
+const FilledContainerOverlay = props => {
   const {
     forceActive
   } = props;
@@ -2228,7 +2228,7 @@ const Overlay = props => {
   });
 };
 
-const BorderBottom = () => /*#__PURE__*/jsxRuntime.jsx(Box, {
+const FilledContainerBorderBottom = () => /*#__PURE__*/jsxRuntime.jsx(Box, {
   __css: {
     position: 'absolute',
     bottom: 0,
@@ -2298,9 +2298,9 @@ const FilledContainer = /*#__PURE__*/react$1.forwardRef(function FilledContainer
       htmlFor: inputId,
       color: active || error ? color : undefined,
       children: label
-    }), children, /*#__PURE__*/jsxRuntime.jsx(Overlay, {
+    }), children, /*#__PURE__*/jsxRuntime.jsx(FilledContainerOverlay, {
       forceActive: active
-    }), /*#__PURE__*/jsxRuntime.jsx(BorderBottom, {}), /*#__PURE__*/jsxRuntime.jsx(LineRipple, {
+    }), /*#__PURE__*/jsxRuntime.jsx(FilledContainerBorderBottom, {}), /*#__PURE__*/jsxRuntime.jsx(LineRipple, {
       active: active || error,
       color: color
     })]
@@ -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,20 +4244,27 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
     onFocus,
     onBlur,
     native = false,
+    multiple = false,
     children,
     renderValue: renderValueProp,
     leadingIcon = null,
+    CustomContainer: overwrittenContainer,
     ...otherProps
   } = props;
   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);
   const fallbackId = react$1.useId();
   const theme = useTheme();
-  const Container = componentMap[variant] || OutlinedContainer;
+  const Container = overwrittenContainer || componentMap[variant] || OutlinedContainer;
 
   const handleFocus = () => {
     setHasFocus(true);
@@ -4246,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);
@@ -4254,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
@@ -4270,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",
@@ -4287,7 +4347,7 @@ const Select = /*#__PURE__*/react$1.forwardRef(function Select(props, forwardedR
         labelIsFloating: labelIsFloating,
         inputId: inputId,
         hasFocus: hasFocus,
-        disabled: disabled,
+        disabled: disabled ?? false,
         forceActive: open,
         error: hasError,
         leadingIcon: Boolean(leadingIcon),
@@ -4313,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)
@@ -4361,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;
 
@@ -4384,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),
@@ -5831,6 +5901,7 @@ exports.EASING_STANDARD = EASING_STANDARD;
 exports.EASING_STANDARD_ACCELERATE = EASING_STANDARD_ACCELERATE;
 exports.EASING_STANDARD_DECELERATE = EASING_STANDARD_DECELERATE;
 exports.FilledContainer = FilledContainer;
+exports.FilledContainerOverlay = FilledContainerOverlay;
 exports.FloatingLabel = FloatingLabel;
 exports.HelperText = HelperText;
 exports.LineRipple = LineRipple;