@onesy/ui-react 1.0.172 → 1.0.173

package/esm/Select/Select.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "size", "version", "value", "valueDefault", "onChange", "options", "name", "multiple", "prefix", "sufix", "start", "end", "autoWidth", "getLabel", "getOptionName", "fullWidth", "chip", "clear", "readOnly", "noSelectText", "disabled", "renderValues", "renderChip", "IconClear", "IconDropdown", "inputProps", "InputWrapperProps", "WrapperProps", "ChipProps", "ChiProps", "ListProps", "MenuProps", "ListItemProps", "ListItemTypeProps", "ListItemTypePrimaryProps", "ListItemTypeSecondaryProps", "IconButtonProps", "IconProps", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "size", "version", "value", "valueDefault", "onChange", "options", "name", "multiple", "prefix", "sufix", "start", "end", "autoWidth", "getLabel", "getOptionName", "fullWidth", "chip", "clear", "readOnly", "noSelectText", "disabled", "renderValues", "renderChip", "IconClear", "IconDropdown", "inputProps", "InputWrapperProps", "WrapperProps", "ChipProps", "ChiProps", "ListProps", "MenuProps", "ListItemProps", "ListItemTypeProps", "ListItemTypePrimaryProps", "ListItemTypeSecondaryProps", "IconButtonProps", "IconProps", "className", "style", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -18,6 +17,7 @@ import TextFieldElement from '../TextField';
 import IconButtonElement from '../IconButton';
 import LineElement from '../Line';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     flex: 'unset',
@@ -113,7 +113,7 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Select'
 });
 const getValue = value => value?.value !== undefined ? value.value : value;
-const Select = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Select = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySelect?.props?.default), props_);
@@ -126,6 +126,7 @@ const Select = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const TextField = theme?.elements?.TextField || TextFieldElement;
   const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       size = 'regular',
@@ -303,28 +304,31 @@ const Select = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const renderValues = renderValues_ || ((value__ = value) => {
     if (multiple) {
       if (chip) {
-        return /*#__PURE__*/React.createElement(Chips, _extends({
+        return /*#__PURE__*/_jsx(Chips, _objectSpread(_objectSpread({
           wrap: "wrap",
           size: size,
           className: classNames([classes.chipGroup, version !== 'outlined' && classes.chipGroup_padding])
-        }, ChiProps), value__.map(item_3 => {
-          const other_ = {
-            onClick: event_7 => {
-              event_7.preventDefault();
-              event_7.stopPropagation();
-            },
-            onRemove: event_8 => {
-              event_8.preventDefault();
-              event_8.stopPropagation();
-              onUnselect(item_3);
-            },
-            input: true
-          };
-          if (is('function', renderChip)) return renderChip(item_3, renderValue(item_3), other_);
-          return /*#__PURE__*/React.createElement(Chip, _extends({
-            key: item_3,
-            size: "small"
-          }, other_, ChipProps), renderValue(item_3));
+        }, ChiProps), {}, {
+          children: value__.map(item_3 => {
+            const other_ = {
+              onClick: event_7 => {
+                event_7.preventDefault();
+                event_7.stopPropagation();
+              },
+              onRemove: event_8 => {
+                event_8.preventDefault();
+                event_8.stopPropagation();
+                onUnselect(item_3);
+              },
+              input: true
+            };
+            if (is('function', renderChip)) return renderChip(item_3, renderValue(item_3), other_);
+            return /*#__PURE__*/_jsx(Chip, _objectSpread(_objectSpread(_objectSpread({
+              size: "small"
+            }, other_), ChipProps), {}, {
+              children: renderValue(item_3)
+            }), item_3);
+          })
         }));
       }
       const valuesAll = value.map(item_4 => renderValue(item_4));
@@ -333,149 +337,157 @@ const Select = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
     return renderValue(value);
   });
-  const endIcons = [end, clear && !!(multiple ? value.length : ![undefined, null].includes(value)) && /*#__PURE__*/React.createElement(IconButton, _extends({
+  const endIcons = [end, clear && !!(multiple ? value.length : ![undefined, null].includes(value)) && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
     onClick: onClear,
     size: "small",
     "aria-label": l('Input clear')
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconClear, IconProps)), ...(!readOnly ? [/*#__PURE__*/React.createElement(IconButton, _extends({
-    key: 1,
+  }, IconButtonProps), {}, {
+    children: /*#__PURE__*/_jsx(IconClear, _objectSpread({}, IconProps))
+  })), ...(!readOnly ? [/*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
     size: "regular",
     onClick: onClickArrowDown,
     "aria-expanded": open,
     "aria-controls": refs.ids.list
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconDropdown, _extends({
-    size: "large"
-  }, IconProps, {
-    className: classNames([IconProps?.className, classes.arrow, open && classes.arrow_open])
-  })))] : [])];
+  }, IconButtonProps), {}, {
+    children: /*#__PURE__*/_jsx(IconDropdown, _objectSpread(_objectSpread({
+      size: "large"
+    }, IconProps), {}, {
+      className: classNames([IconProps?.className, classes.arrow, open && classes.arrow_open])
+    }))
+  }), 1)] : [])];
   const sizeListItem = MenuProps?.size || size;
-  return /*#__PURE__*/React.createElement(Line, _extends({
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     gap: 0,
     direction: "column",
     fullWidth: fullWidth
-  }, WrapperProps, {
+  }, WrapperProps), {}, {
     ref: item_6 => {
       if (WrapperProps?.ref) {
         if (is('function', WrapperProps.ref)) WrapperProps.ref(item_6);else WrapperProps.ref.current = item_6;
       }
       refs.wrapper.current = item_6;
     },
-    className: classNames([staticClassName('Select', theme) && ['onesy-Select-wrapper', fullWidth && 'onesy-full-width'], WrapperProps?.className, classes.wrapper])
-  }), /*#__PURE__*/React.createElement(TextField, _extends({
-    ref: refs.input,
-    rootRef: item_7 => {
-      if (ref) {
-        if (is('function', ref)) ref(item_7);else ref.current = item_7;
-      }
-      refs.root.current = item_7;
-    },
-    onBlur: onBlur,
-    onFocus: onFocus,
-    enabled: open || focus || mouseDown || !!(is('array', value) ? value.length : ![undefined, null].includes(value)),
-    focus: open || focus || mouseDown,
-    className: classNames([staticClassName('Select', theme) && ['onesy-Select-root', `onesy-Select-version-${version}`, `onesy-Select-size-${size}`, open && `onesy-Select-open`, mouseDown && `onesy-Select-mouse-down`, focus && `onesy-Select-focus`], className, classes.root, open && classes.open, disabled && classes.disabled]),
-    tonal: tonal,
-    color: color,
-    size: size,
-    version: version,
-    name: name,
-    prefix: prefix,
-    sufix: sufix,
-    start: start,
-    end: endIcons,
-    readOnly: readOnly,
-    endVerticalAlign: "center",
-    role: "combobox",
-    "aria-multiselectable": multiple,
-    "aria-controls": refs.ids.list,
-    "aria-expanded": open,
-    "aria-haspopup": "listbox",
-    "aria-labelledby": name,
-    "aria-disabled": disabled,
-    fullWidth: fullWidth,
-    disabled: disabled,
-    InputWrapperProps: _objectSpread(_objectSpread({
-      onMouseDown,
-      onMouseUp,
-      onClick,
-      onKeyDown: onEnterKeyDown
-    }, InputWrapperProps), {}, {
-      className: classNames([staticClassName('Select', theme) && ['onesy-Select-input-wrapper'], InputWrapperProps?.className, classes.inputWrapper, chip && [classes.chip, classes[`inputWrapper_chip_size_${size}`]], open && classes.open, readOnly && classes.readOnly])
-    }),
-    inputProps: _objectSpread({
-      disabled: true,
-      readOnly: true
-    }, inputProps),
-    style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, other), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    className: classNames([staticClassName('Select', theme) && ['onesy-Select-input'], classes.input, classes[`input_size_${size}`], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]),
-    justify: other.align
-  }, renderValues(value))), (!!items.length || children) && /*#__PURE__*/React.createElement(Menu, _extends({
-    ref: refs.menu,
-    open: open,
-    portal: false,
-    onClose: () => onClose(false),
-    anchorElement: refs.root.current,
-    transformOrigin: "center top",
-    transformOriginSwitch: "center bottom",
-    maxWidth: "unset",
-    size: size,
-    menuItems: !!items.length ? items.map((item_8, index) => /*#__PURE__*/React.createElement(ListItem, _extends({
-      key: index,
-      role: 'option',
-      selected: item_8.selected !== undefined ? item_8.selected : multiple ? value.includes(item_8?.value) : value === item_8?.value,
-      preselected: item_8.preselected !== undefined ? item_8.preselected : !(multiple ? value.includes(item_8?.value) : value === item_8?.value),
-      onMouseUp: onMouseUp,
-      onMouseDown: onMouseDown,
-      primary: getOptionName ? getOptionName(item_8.name, item_8, index) : /*#__PURE__*/React.createElement(Type, _extends({
-        version: sizeListItem === 'large' ? 'b1' : sizeListItem === 'regular' ? 'b2' : 'b3'
-      }, ListItemTypeProps, ListItemTypePrimaryProps, {
-        className: classNames([ListItemTypeProps?.className, ListItemTypePrimaryProps?.className, 'onesy-Select-option', 'onesy-Select-option-primary', !(item_8.description || item_8.secondary || item_8.tertiary) && 'onesy-Select-option-primary-only'])
-      }), item_8.name),
-      secondary: item_8.description ? is('string', item_8.description) ? /*#__PURE__*/React.createElement(Type, _extends({
-        version: sizeListItem === 'large' ? 'b1' : sizeListItem === 'regular' ? 'b2' : 'b3'
-      }, ListItemTypeProps, ListItemTypeSecondaryProps, {
-        className: classNames([ListItemTypeProps?.className, ListItemTypeSecondaryProps?.className, 'onesy-Select-option', 'onesy-Select-option-secondary'])
-      }), item_8.description) : item_8.description : null,
-      value: item_8.value,
-      size: MenuProps?.size || size,
-      button: true
-    }, ListItemProps, item_8.props, {
-      onClick: event_9 => {
-        if (multiple && value.includes(item_8?.value)) onUnselect(item_8?.value);else onSelect(item_8?.value);
-        if (is('function', item_8.props?.onClick)) item_8.props?.onClick(event_9);
-        if (!multiple) setOpen(false);
-      }
-    }))) : children.map((item_9, index_0) => (/*#__PURE__*/React.cloneElement(item_9, {
-      key: index_0,
-      role: 'option',
-      selected: item_9.props.selected !== undefined ? item_9.props.selected : multiple ? value.includes(item_9.props?.value) : value === item_9.props?.value,
-      preselected: item_9.props.preselected !== undefined ? item_9.props.preselected : !(multiple ? value.includes(item_9.props?.value) : value === item_9.props?.value),
-      onMouseUp,
-      onMouseDown,
-      onClick: event_10 => {
-        if (multiple && value.includes(item_9.props?.value)) onUnselect(item_9.props?.value);else onSelect(item_9.props?.value);
-        if (is('function', item_9.props?.onClick)) item_9.props?.onClick(event_10);
-        if (!multiple) setOpen(false);
-      }
-    })))
-  }, MenuProps, {
-    AppendProps: _objectSpread({
-      alignment: 'start'
-    }, MenuProps?.AppendProps),
-    ModalProps: _objectSpread({}, MenuProps?.ModalProps),
-    ListProps: _objectSpread(_objectSpread({
-      menu: true,
-      size: ListProps?.size || MenuProps?.size || size,
-      role: 'listbox',
-      id: refs.ids.list,
-      'aria-label': name
-    }, ListProps), MenuProps?.ListProps),
-    style: _objectSpread(_objectSpread({}, styles.menu), MenuProps?.style),
-    className: classNames([MenuProps?.className])
-  })));
-});
+    className: classNames([staticClassName('Select', theme) && ['onesy-Select-wrapper', fullWidth && 'onesy-full-width'], WrapperProps?.className, classes.wrapper]),
+    children: [/*#__PURE__*/_jsx(TextField, _objectSpread(_objectSpread({
+      ref: refs.input,
+      rootRef: item_7 => {
+        if (ref) {
+          if (is('function', ref)) ref(item_7);else ref.current = item_7;
+        }
+        refs.root.current = item_7;
+      },
+      onBlur: onBlur,
+      onFocus: onFocus,
+      enabled: open || focus || mouseDown || !!(is('array', value) ? value.length : ![undefined, null].includes(value)),
+      focus: open || focus || mouseDown,
+      className: classNames([staticClassName('Select', theme) && ['onesy-Select-root', `onesy-Select-version-${version}`, `onesy-Select-size-${size}`, open && `onesy-Select-open`, mouseDown && `onesy-Select-mouse-down`, focus && `onesy-Select-focus`], className, classes.root, open && classes.open, disabled && classes.disabled]),
+      tonal: tonal,
+      color: color,
+      size: size,
+      version: version,
+      name: name,
+      prefix: prefix,
+      sufix: sufix,
+      start: start,
+      end: endIcons,
+      readOnly: readOnly,
+      endVerticalAlign: "center",
+      role: "combobox",
+      "aria-multiselectable": multiple,
+      "aria-controls": refs.ids.list,
+      "aria-expanded": open,
+      "aria-haspopup": "listbox",
+      "aria-labelledby": name,
+      "aria-disabled": disabled,
+      fullWidth: fullWidth,
+      disabled: disabled,
+      InputWrapperProps: _objectSpread(_objectSpread({
+        onMouseDown,
+        onMouseUp,
+        onClick,
+        onKeyDown: onEnterKeyDown
+      }, InputWrapperProps), {}, {
+        className: classNames([staticClassName('Select', theme) && ['onesy-Select-input-wrapper'], InputWrapperProps?.className, classes.inputWrapper, chip && [classes.chip, classes[`inputWrapper_chip_size_${size}`]], open && classes.open, readOnly && classes.readOnly])
+      }),
+      inputProps: _objectSpread({
+        disabled: true,
+        readOnly: true
+      }, inputProps),
+      style: _objectSpread(_objectSpread({}, style), styles.root)
+    }, other), {}, {
+      children: /*#__PURE__*/_jsx(Line, {
+        gap: 0,
+        direction: "row",
+        className: classNames([staticClassName('Select', theme) && ['onesy-Select-input'], classes.input, classes[`input_size_${size}`], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]),
+        justify: other.align,
+        children: renderValues(value)
+      })
+    })), (!!items.length || children) && /*#__PURE__*/_jsx(Menu, _objectSpread(_objectSpread({
+      ref: refs.menu,
+      open: open,
+      portal: false,
+      onClose: () => onClose(false),
+      anchorElement: refs.root.current,
+      transformOrigin: "center top",
+      transformOriginSwitch: "center bottom",
+      maxWidth: "unset",
+      size: size,
+      menuItems: !!items.length ? items.map((item_8, index) => /*#__PURE__*/_jsx(ListItem, _objectSpread(_objectSpread(_objectSpread({
+        role: 'option',
+        selected: item_8.selected !== undefined ? item_8.selected : multiple ? value.includes(item_8?.value) : value === item_8?.value,
+        preselected: item_8.preselected !== undefined ? item_8.preselected : !(multiple ? value.includes(item_8?.value) : value === item_8?.value),
+        onMouseUp: onMouseUp,
+        onMouseDown: onMouseDown,
+        primary: getOptionName ? getOptionName(item_8.name, item_8, index) : /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread(_objectSpread({
+          version: sizeListItem === 'large' ? 'b1' : sizeListItem === 'regular' ? 'b2' : 'b3'
+        }, ListItemTypeProps), ListItemTypePrimaryProps), {}, {
+          className: classNames([ListItemTypeProps?.className, ListItemTypePrimaryProps?.className, 'onesy-Select-option', 'onesy-Select-option-primary', !(item_8.description || item_8.secondary || item_8.tertiary) && 'onesy-Select-option-primary-only']),
+          children: item_8.name
+        })),
+        secondary: item_8.description ? is('string', item_8.description) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread(_objectSpread({
+          version: sizeListItem === 'large' ? 'b1' : sizeListItem === 'regular' ? 'b2' : 'b3'
+        }, ListItemTypeProps), ListItemTypeSecondaryProps), {}, {
+          className: classNames([ListItemTypeProps?.className, ListItemTypeSecondaryProps?.className, 'onesy-Select-option', 'onesy-Select-option-secondary']),
+          children: item_8.description
+        })) : item_8.description : null,
+        value: item_8.value,
+        size: MenuProps?.size || size,
+        button: true
+      }, ListItemProps), item_8.props), {}, {
+        onClick: event_9 => {
+          if (multiple && value.includes(item_8?.value)) onUnselect(item_8?.value);else onSelect(item_8?.value);
+          if (is('function', item_8.props?.onClick)) item_8.props?.onClick(event_9);
+          if (!multiple) setOpen(false);
+        }
+      }), index)) : children.map((item_9, index_0) => (/*#__PURE__*/React.cloneElement(item_9, {
+        key: index_0,
+        role: 'option',
+        selected: item_9.props.selected !== undefined ? item_9.props.selected : multiple ? value.includes(item_9.props?.value) : value === item_9.props?.value,
+        preselected: item_9.props.preselected !== undefined ? item_9.props.preselected : !(multiple ? value.includes(item_9.props?.value) : value === item_9.props?.value),
+        onMouseUp,
+        onMouseDown,
+        onClick: event_10 => {
+          if (multiple && value.includes(item_9.props?.value)) onUnselect(item_9.props?.value);else onSelect(item_9.props?.value);
+          if (is('function', item_9.props?.onClick)) item_9.props?.onClick(event_10);
+          if (!multiple) setOpen(false);
+        }
+      })))
+    }, MenuProps), {}, {
+      AppendProps: _objectSpread({
+        alignment: 'start'
+      }, MenuProps?.AppendProps),
+      ModalProps: _objectSpread({}, MenuProps?.ModalProps),
+      ListProps: _objectSpread(_objectSpread({
+        menu: true,
+        size: ListProps?.size || MenuProps?.size || size,
+        role: 'listbox',
+        id: refs.ids.list,
+        'aria-label': name
+      }, ListProps), MenuProps?.ListProps),
+      style: _objectSpread(_objectSpread({}, styles.menu), MenuProps?.style),
+      className: classNames([MenuProps?.className])
+    }))]
+  }));
+};
 Select.displayName = 'onesy-Select';
 export default Select;