@onesy/ui-react 1.0.171 → 1.0.173

package/Select/Select.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -22,7 +21,8 @@ var _TextField = _interopRequireDefault(require("../TextField"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _utils2 = require("../utils");
-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"];
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -120,7 +120,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Select'
 });
 const getValue = value => (value === null || value === void 0 ? void 0 : value.value) !== undefined ? value.value : value;
-const Select = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Select = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -134,6 +134,7 @@ const Select = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const TextField = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.TextField) || _TextField.default;
   const IconButton = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.IconButton) || _IconButton.default;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       size = 'regular',
@@ -316,28 +317,31 @@ const Select = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const renderValues = renderValues_ || ((value__ = value) => {
     if (multiple) {
       if (chip) {
-        return /*#__PURE__*/_react.default.createElement(Chips, (0, _extends2.default)({
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Chips, _objectSpread(_objectSpread({
           wrap: "wrap",
           size: size,
           className: (0, _styleReact.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 ((0, _utils.is)('function', renderChip)) return renderChip(item_3, renderValue(item_3), other_);
-          return /*#__PURE__*/_react.default.createElement(Chip, (0, _extends2.default)({
-            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 ((0, _utils.is)('function', renderChip)) return renderChip(item_3, renderValue(item_3), other_);
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, _objectSpread(_objectSpread(_objectSpread({
+              size: "small"
+            }, other_), ChipProps), {}, {
+              children: renderValue(item_3)
+            }), item_3);
+          })
         }));
       }
       const valuesAll = value.map(item_4 => renderValue(item_4));
@@ -346,154 +350,162 @@ const Select = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }
     return renderValue(value);
   });
-  const endIcons = [end, clear && !!(multiple ? value.length : ![undefined, null].includes(value)) && /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+  const endIcons = [end, clear && !!(multiple ? value.length : ![undefined, null].includes(value)) && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
     onClick: onClear,
     size: "small",
     "aria-label": l('Input clear')
-  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconClear, IconProps)), ...(!readOnly ? [/*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    key: 1,
+  }, IconButtonProps), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconClear, _objectSpread({}, IconProps))
+  })), ...(!readOnly ? [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
     size: "regular",
     onClick: onClickArrowDown,
     "aria-expanded": open,
     "aria-controls": refs.ids.list
-  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconDropdown, (0, _extends2.default)({
-    size: "large"
-  }, IconProps, {
-    className: (0, _styleReact.classNames)([IconProps === null || IconProps === void 0 ? void 0 : IconProps.className, classes.arrow, open && classes.arrow_open])
-  })))] : [])];
+  }, IconButtonProps), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDropdown, _objectSpread(_objectSpread({
+      size: "large"
+    }, IconProps), {}, {
+      className: (0, _styleReact.classNames)([IconProps === null || IconProps === void 0 ? void 0 : IconProps.className, classes.arrow, open && classes.arrow_open])
+    }))
+  }), 1)] : [])];
   const sizeListItem = (MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.size) || size;
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
     gap: 0,
     direction: "column",
     fullWidth: fullWidth
-  }, WrapperProps, {
+  }, WrapperProps), {}, {
     ref: item_6 => {
       if (WrapperProps !== null && WrapperProps !== void 0 && WrapperProps.ref) {
         if ((0, _utils.is)('function', WrapperProps.ref)) WrapperProps.ref(item_6);else WrapperProps.ref.current = item_6;
       }
       refs.wrapper.current = item_6;
     },
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Select', theme) && ['onesy-Select-wrapper', fullWidth && 'onesy-full-width'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, classes.wrapper])
-  }), /*#__PURE__*/_react.default.createElement(TextField, (0, _extends2.default)({
-    ref: refs.input,
-    rootRef: item_7 => {
-      if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item_7);else ref.current = item_7;
-      }
-      refs.root.current = item_7;
-    },
-    onBlur: onBlur,
-    onFocus: onFocus,
-    enabled: open || focus || mouseDown || !!((0, _utils.is)('array', value) ? value.length : ![undefined, null].includes(value)),
-    focus: open || focus || mouseDown,
-    className: (0, _styleReact.classNames)([(0, _utils2.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Select', theme) && ['onesy-Select-input-wrapper'], InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : 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.default.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    className: (0, _styleReact.classNames)([(0, _utils2.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.default.createElement(Menu, (0, _extends2.default)({
-    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.default.createElement(ListItem, (0, _extends2.default)({
-      key: index,
-      role: 'option',
-      selected: item_8.selected !== undefined ? item_8.selected : multiple ? value.includes(item_8 === null || item_8 === void 0 ? void 0 : item_8.value) : value === (item_8 === null || item_8 === void 0 ? void 0 : item_8.value),
-      preselected: item_8.preselected !== undefined ? item_8.preselected : !(multiple ? value.includes(item_8 === null || item_8 === void 0 ? void 0 : item_8.value) : value === (item_8 === null || item_8 === void 0 ? void 0 : item_8.value)),
-      onMouseUp: onMouseUp,
-      onMouseDown: onMouseDown,
-      primary: getOptionName ? getOptionName(item_8.name, item_8, index) : /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-        version: sizeListItem === 'large' ? 'b1' : sizeListItem === 'regular' ? 'b2' : 'b3'
-      }, ListItemTypeProps, ListItemTypePrimaryProps, {
-        className: (0, _styleReact.classNames)([ListItemTypeProps === null || ListItemTypeProps === void 0 ? void 0 : ListItemTypeProps.className, ListItemTypePrimaryProps === null || ListItemTypePrimaryProps === void 0 ? void 0 : 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 ? (0, _utils.is)('string', item_8.description) ? /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-        version: sizeListItem === 'large' ? 'b1' : sizeListItem === 'regular' ? 'b2' : 'b3'
-      }, ListItemTypeProps, ListItemTypeSecondaryProps, {
-        className: (0, _styleReact.classNames)([ListItemTypeProps === null || ListItemTypeProps === void 0 ? void 0 : ListItemTypeProps.className, ListItemTypeSecondaryProps === null || ListItemTypeSecondaryProps === void 0 ? void 0 : ListItemTypeSecondaryProps.className, 'onesy-Select-option', 'onesy-Select-option-secondary'])
-      }), item_8.description) : item_8.description : null,
-      value: item_8.value,
-      size: (MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.size) || size,
-      button: true
-    }, ListItemProps, item_8.props, {
-      onClick: event_9 => {
-        var _item_8$props, _item_8$props2;
-        if (multiple && value.includes(item_8 === null || item_8 === void 0 ? void 0 : item_8.value)) onUnselect(item_8 === null || item_8 === void 0 ? void 0 : item_8.value);else onSelect(item_8 === null || item_8 === void 0 ? void 0 : item_8.value);
-        if ((0, _utils.is)('function', (_item_8$props = item_8.props) === null || _item_8$props === void 0 ? void 0 : _item_8$props.onClick)) (_item_8$props2 = item_8.props) === null || _item_8$props2 === void 0 || _item_8$props2.onClick(event_9);
-        if (!multiple) setOpen(false);
-      }
-    }))) : children.map((item_9, index_0) => {
-      var _item_9$props, _item_9$props2, _item_9$props3, _item_9$props4;
-      return /*#__PURE__*/_react.default.cloneElement(item_9, {
-        key: index_0,
-        role: 'option',
-        selected: item_9.props.selected !== undefined ? item_9.props.selected : multiple ? value.includes((_item_9$props = item_9.props) === null || _item_9$props === void 0 ? void 0 : _item_9$props.value) : value === ((_item_9$props2 = item_9.props) === null || _item_9$props2 === void 0 ? void 0 : _item_9$props2.value),
-        preselected: item_9.props.preselected !== undefined ? item_9.props.preselected : !(multiple ? value.includes((_item_9$props3 = item_9.props) === null || _item_9$props3 === void 0 ? void 0 : _item_9$props3.value) : value === ((_item_9$props4 = item_9.props) === null || _item_9$props4 === void 0 ? void 0 : _item_9$props4.value)),
-        onMouseUp,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Select', theme) && ['onesy-Select-wrapper', fullWidth && 'onesy-full-width'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, classes.wrapper]),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, _objectSpread(_objectSpread({
+      ref: refs.input,
+      rootRef: item_7 => {
+        if (ref) {
+          if ((0, _utils.is)('function', ref)) ref(item_7);else ref.current = item_7;
+        }
+        refs.root.current = item_7;
+      },
+      onBlur: onBlur,
+      onFocus: onFocus,
+      enabled: open || focus || mouseDown || !!((0, _utils.is)('array', value) ? value.length : ![undefined, null].includes(value)),
+      focus: open || focus || mouseDown,
+      className: (0, _styleReact.classNames)([(0, _utils2.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,
-        onClick: event_10 => {
-          var _item_9$props5, _item_9$props6, _item_9$props7, _item_9$props8, _item_9$props9;
-          if (multiple && value.includes((_item_9$props5 = item_9.props) === null || _item_9$props5 === void 0 ? void 0 : _item_9$props5.value)) onUnselect((_item_9$props6 = item_9.props) === null || _item_9$props6 === void 0 ? void 0 : _item_9$props6.value);else onSelect((_item_9$props7 = item_9.props) === null || _item_9$props7 === void 0 ? void 0 : _item_9$props7.value);
-          if ((0, _utils.is)('function', (_item_9$props8 = item_9.props) === null || _item_9$props8 === void 0 ? void 0 : _item_9$props8.onClick)) (_item_9$props9 = item_9.props) === null || _item_9$props9 === void 0 || _item_9$props9.onClick(event_10);
+        onMouseUp,
+        onClick,
+        onKeyDown: onEnterKeyDown
+      }, InputWrapperProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Select', theme) && ['onesy-Select-input-wrapper'], InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : 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__*/(0, _jsxRuntime.jsx)(Line, {
+        gap: 0,
+        direction: "row",
+        className: (0, _styleReact.classNames)([(0, _utils2.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread(_objectSpread(_objectSpread({
+        role: 'option',
+        selected: item_8.selected !== undefined ? item_8.selected : multiple ? value.includes(item_8 === null || item_8 === void 0 ? void 0 : item_8.value) : value === (item_8 === null || item_8 === void 0 ? void 0 : item_8.value),
+        preselected: item_8.preselected !== undefined ? item_8.preselected : !(multiple ? value.includes(item_8 === null || item_8 === void 0 ? void 0 : item_8.value) : value === (item_8 === null || item_8 === void 0 ? void 0 : item_8.value)),
+        onMouseUp: onMouseUp,
+        onMouseDown: onMouseDown,
+        primary: getOptionName ? getOptionName(item_8.name, item_8, index) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread(_objectSpread({
+          version: sizeListItem === 'large' ? 'b1' : sizeListItem === 'regular' ? 'b2' : 'b3'
+        }, ListItemTypeProps), ListItemTypePrimaryProps), {}, {
+          className: (0, _styleReact.classNames)([ListItemTypeProps === null || ListItemTypeProps === void 0 ? void 0 : ListItemTypeProps.className, ListItemTypePrimaryProps === null || ListItemTypePrimaryProps === void 0 ? void 0 : 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 ? (0, _utils.is)('string', item_8.description) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread(_objectSpread({
+          version: sizeListItem === 'large' ? 'b1' : sizeListItem === 'regular' ? 'b2' : 'b3'
+        }, ListItemTypeProps), ListItemTypeSecondaryProps), {}, {
+          className: (0, _styleReact.classNames)([ListItemTypeProps === null || ListItemTypeProps === void 0 ? void 0 : ListItemTypeProps.className, ListItemTypeSecondaryProps === null || ListItemTypeSecondaryProps === void 0 ? void 0 : ListItemTypeSecondaryProps.className, 'onesy-Select-option', 'onesy-Select-option-secondary']),
+          children: item_8.description
+        })) : item_8.description : null,
+        value: item_8.value,
+        size: (MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.size) || size,
+        button: true
+      }, ListItemProps), item_8.props), {}, {
+        onClick: event_9 => {
+          var _item_8$props, _item_8$props2;
+          if (multiple && value.includes(item_8 === null || item_8 === void 0 ? void 0 : item_8.value)) onUnselect(item_8 === null || item_8 === void 0 ? void 0 : item_8.value);else onSelect(item_8 === null || item_8 === void 0 ? void 0 : item_8.value);
+          if ((0, _utils.is)('function', (_item_8$props = item_8.props) === null || _item_8$props === void 0 ? void 0 : _item_8$props.onClick)) (_item_8$props2 = item_8.props) === null || _item_8$props2 === void 0 || _item_8$props2.onClick(event_9);
           if (!multiple) setOpen(false);
         }
-      });
-    })
-  }, MenuProps, {
-    AppendProps: _objectSpread({
-      alignment: 'start'
-    }, MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.AppendProps),
-    ModalProps: _objectSpread({}, MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.ModalProps),
-    ListProps: _objectSpread(_objectSpread({
-      menu: true,
-      size: (ListProps === null || ListProps === void 0 ? void 0 : ListProps.size) || (MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.size) || size,
-      role: 'listbox',
-      id: refs.ids.list,
-      'aria-label': name
-    }, ListProps), MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.ListProps),
-    style: _objectSpread(_objectSpread({}, styles.menu), MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.style),
-    className: (0, _styleReact.classNames)([MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.className])
-  })));
-});
+      }), index)) : children.map((item_9, index_0) => {
+        var _item_9$props, _item_9$props2, _item_9$props3, _item_9$props4;
+        return /*#__PURE__*/_react.default.cloneElement(item_9, {
+          key: index_0,
+          role: 'option',
+          selected: item_9.props.selected !== undefined ? item_9.props.selected : multiple ? value.includes((_item_9$props = item_9.props) === null || _item_9$props === void 0 ? void 0 : _item_9$props.value) : value === ((_item_9$props2 = item_9.props) === null || _item_9$props2 === void 0 ? void 0 : _item_9$props2.value),
+          preselected: item_9.props.preselected !== undefined ? item_9.props.preselected : !(multiple ? value.includes((_item_9$props3 = item_9.props) === null || _item_9$props3 === void 0 ? void 0 : _item_9$props3.value) : value === ((_item_9$props4 = item_9.props) === null || _item_9$props4 === void 0 ? void 0 : _item_9$props4.value)),
+          onMouseUp,
+          onMouseDown,
+          onClick: event_10 => {
+            var _item_9$props5, _item_9$props6, _item_9$props7, _item_9$props8, _item_9$props9;
+            if (multiple && value.includes((_item_9$props5 = item_9.props) === null || _item_9$props5 === void 0 ? void 0 : _item_9$props5.value)) onUnselect((_item_9$props6 = item_9.props) === null || _item_9$props6 === void 0 ? void 0 : _item_9$props6.value);else onSelect((_item_9$props7 = item_9.props) === null || _item_9$props7 === void 0 ? void 0 : _item_9$props7.value);
+            if ((0, _utils.is)('function', (_item_9$props8 = item_9.props) === null || _item_9$props8 === void 0 ? void 0 : _item_9$props8.onClick)) (_item_9$props9 = item_9.props) === null || _item_9$props9 === void 0 || _item_9$props9.onClick(event_10);
+            if (!multiple) setOpen(false);
+          }
+        });
+      })
+    }, MenuProps), {}, {
+      AppendProps: _objectSpread({
+        alignment: 'start'
+      }, MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.AppendProps),
+      ModalProps: _objectSpread({}, MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.ModalProps),
+      ListProps: _objectSpread(_objectSpread({
+        menu: true,
+        size: (ListProps === null || ListProps === void 0 ? void 0 : ListProps.size) || (MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.size) || size,
+        role: 'listbox',
+        id: refs.ids.list,
+        'aria-label': name
+      }, ListProps), MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.ListProps),
+      style: _objectSpread(_objectSpread({}, styles.menu), MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.style),
+      className: (0, _styleReact.classNames)([MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.className])
+    }))]
+  }));
+};
 Select.displayName = 'onesy-Select';
 var _default = exports.default = Select;