@onesy/ui-react/Select/Select.js

UI for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconMaterialCloseW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloseW100"));
var _IconMaterialArrowDropDownW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowDropDownW100"));
var _ListItem = _interopRequireDefault(require("../ListItem"));
var _Type = _interopRequireDefault(require("../Type"));
var _Menu = _interopRequireDefault(require("../Menu"));
var _Chip = _interopRequireDefault(require("../Chip"));
var _Chips = _interopRequireDefault(require("../Chips"));
var _TextField = _interopRequireDefault(require("../TextField"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Line = _interopRequireDefault(require("../Line"));
var _utils2 = require("../utils");
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 => ({
  root: {
    flex: 'unset',
    minWidth: '184px',
    '& .onesy-TextField-input': {
      position: 'absolute',
      left: '0',
      bottom: '0',
      pointerEvents: 'none',
      opacity: '0'
    },
    '& .onesy-TextField-input-wrapper': {
      cursor: 'pointer'
    }
  },
  wrapper: {
    position: 'relative'
  },
  inputWrapper: {
    overflow: 'hidden',
    cursor: 'pointer',
    '&.onesy-TextField-input-wrapper': {
      cursor: 'pointer'
    }
  },
  inputWrapper_chip_size_small: {
    minHeight: '48px'
  },
  inputWrapper_chip_size_regular: {
    minHeight: '56px'
  },
  inputWrapper_chip_size_large: {
    minHeight: '64px'
  },
  input: {
    display: 'flex',
    alignItems: 'center',
    minHeight: 20,
    margin: '0',
    border: '0',
    color: theme.palette.text.default.primary,
    background: 'transparent',
    '-webkit-tap-highlight-color': 'transparent',
    textAlign: 'start',
    borderRadius: `${theme.shape.radius.unit / 2}px ${theme.shape.radius.unit / 2}px 0 0`,
    cursor: 'pointer',
    pointerEvents: 'none',
    // overflow
    width: '100%',
    overflow: 'hidden',
    whiteSpace: 'pre',
    textOverflow: 'ellipsis'
  },
  input_size_small: _objectSpread({}, theme.typography.values.b2),
  input_size_regular: _objectSpread({}, theme.typography.values.b2),
  input_size_large: _objectSpread({}, theme.typography.values.b1),
  chip: {
    '&.onesy-TextField-input-wrapper': {
      height: 'unset'
    }
  },
  chipGroup: {
    pointerEvents: 'auto'
  },
  chipGroup_padding: {
    paddingTop: theme.methods.space.value(0.5, 'px')
  },
  arrow: {
    transition: theme.methods.transitions.make('transform')
  },
  arrow_open: {
    transform: 'rotate(-180deg)'
  },
  open: {
    '&.onesy-TextField-root': {
      cursor: 'default'
    }
  },
  fullWidth: {
    width: '100%'
  },
  readOnly: {
    '&.onesy-TextField-root': {
      cursor: 'default'
    }
  },
  disabled: {
    '&.onesy-TextField-root': {
      cursor: 'default'
    }
  }
}), {
  name: 'onesy-Select'
});
const getValue = value => (value === null || value === void 0 ? void 0 : value.value) !== undefined ? value.value : value;
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;
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesySelect) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
  const ListItem = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.ListItem) || _ListItem.default;
  const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
  const Menu = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Menu) || _Menu.default;
  const Chip = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Chip) || _Chip.default;
  const Chips = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Chips) || _Chips.default;
  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',
      version = 'filled',
      value: value_,
      valueDefault,
      onChange: onChange_,
      options,
      name,
      multiple,
      prefix,
      sufix,
      start,
      end,
      autoWidth = true,
      getLabel: getLabel_,
      getOptionName,
      fullWidth,
      chip,
      clear,
      readOnly,
      noSelectText,
      disabled,
      renderValues: renderValues_,
      renderChip,
      IconClear = _IconMaterialCloseW.default,
      IconDropdown = _IconMaterialArrowDropDownW.default,
      inputProps,
      InputWrapperProps,
      WrapperProps,
      ChipProps,
      ChiProps,
      ListProps = {
        style: {
          maxHeight: 250,
          overflowY: 'auto',
          overflowX: 'hidden'
        }
      },
      MenuProps: MenuPropsProps,
      ListItemProps,
      ListItemTypeProps,
      ListItemTypePrimaryProps,
      ListItemTypeSecondaryProps,
      IconButtonProps,
      IconProps,
      className,
      style,
      children: children_
    } = props,
    other = (0, _objectWithoutProperties2.default)(props, _excluded);
  const children = _react.default.Children.toArray(children_);
  const [value, setValue] = _react.default.useState(() => {
    const values = valueDefault !== undefined ? valueDefault : value_;
    return multiple ? ((0, _utils.is)('array', values) ? values : [values]).filter(Boolean) : values;
  });
  const [open, setOpen] = _react.default.useState(false);
  const [mouseDown, setMouseDown] = _react.default.useState(false);
  const [focus, setFocus] = _react.default.useState(false);
  const {
    classes
  } = useStyle();
  const refs = {
    root: _react.default.useRef(undefined),
    wrapper: _react.default.useRef(undefined),
    menu: _react.default.useRef(undefined),
    input: _react.default.useRef(undefined),
    ids: {
      list: _react.default.useId()
    }
  };
  const styles = {
    root: {},
    menu: {}
  };
  const MenuProps = _objectSpread({
    portal: true
  }, MenuPropsProps);
  if (MenuProps !== null && MenuProps !== void 0 && MenuProps.portal && autoWidth) {
    var _refs$wrapper$current;
    styles.menu.width = (_refs$wrapper$current = refs.wrapper.current) === null || _refs$wrapper$current === void 0 ? void 0 : _refs$wrapper$current.clientWidth;
  }
  _react.default.useEffect(() => {
    var _refs$root$current;
    const method = event => {
      if (event.key === 'Escape') onClose();
    };
    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
    rootDocument.addEventListener('keydown', method);
    return () => {
      // Clean up
      rootDocument.removeEventListener('keydown', method);
    };
  }, []);
  _react.default.useEffect(() => {
    if (value_ !== undefined && value_ !== value) setValue(value_);
  }, [value_]);
  const onMouseDown = event_0 => {
    if (!disabled && !readOnly) setMouseDown(true);
  };
  const onMouseUp = event_1 => {
    if (!disabled && !readOnly) setMouseDown(false);
  };
  const onFocus = event_2 => {
    if (!disabled && !readOnly) setFocus(true);
  };
  const onBlur = event_3 => {
    if (!disabled && !readOnly) setFocus(false);
  };
  const onClick = event_4 => {
    if (!disabled && !readOnly) setOpen(open_ => {
      if (open_) setFocus(false);
      return !open_;
    });
  };
  const onClickArrowDown = event_5 => {
    if (!disabled && !readOnly) setOpen(open__0 => !open__0);
  };
  const onEnterKeyDown = event_6 => {
    if (event_6.key === 'Enter' && !disabled && !readOnly) setOpen(open__1 => {
      if (open__1) refs.input.current.focus();
      return !open__1;
    });
  };
  const onClose = (refocus = true) => {
    if (!disabled && !readOnly) {
      setOpen(open__2 => {
        if (open__2 && refocus) refs.input.current.focus();
        return false;
      });
    }
  };
  const onChange = valueNew => {
    // Inner controlled value
    if (!props.hasOwnProperty('value')) setValue(valueNew);
    if ((0, _utils.is)('function', onChange_)) onChange_(valueNew);
  };
  const onSelect = newValue => {
    let values_0 = multiple ? (0, _utils.is)('array', value) ? value : [value] : value;
    values_0 = multiple ? (0, _utils.unique)([...values_0, newValue]) : newValue;
    onChange(values_0);
  };
  const onUnselect = itemValue => {
    if (multiple) {
      let values_1 = (0, _utils.is)('array', value) ? value : [value];
      values_1 = values_1.filter(item => item !== itemValue);
      onChange(values_1);
    }
  };
  const onClear = (refocus_0 = false) => {
    if (!disabled && !readOnly) {
      onChange(multiple ? [] : null);
      if (refocus_0) refs.input.current.focus();
    }
  };
  const items = _react.default.useMemo(() => {
    return (options || []).map(item_0 => _objectSpread(_objectSpread({}, item_0), {}, {
      name: String((item_0 === null || item_0 === void 0 ? void 0 : item_0.name) !== undefined ? item_0 === null || item_0 === void 0 ? void 0 : item_0.name : (item_0 === null || item_0 === void 0 ? void 0 : item_0.value) !== undefined ? item_0.value : item_0),
      value: (item_0 === null || item_0 === void 0 ? void 0 : item_0.value) !== undefined ? item_0 === null || item_0 === void 0 ? void 0 : item_0.value : item_0
    }));
  }, [options]);
  const getLabel = (item_1, propsOther) => {
    if ((0, _utils.is)('function', getLabel_)) return getLabel_(item_1, propsOther);
    const properties = ['name', 'label', 'primary', 'secondary', 'tertiary', 'value', 'children'];
    const objects = [item_1, item_1 === null || item_1 === void 0 ? void 0 : item_1.props].filter(Boolean);
    for (const itemObject of objects) {
      if ((0, _utils.is)('simple', itemObject)) return itemObject;
      const valueItem = (0, _utils.getObjectValue)(itemObject, ...properties);
      if (valueItem !== undefined) return valueItem;
    }
    return l(noSelectText) || l('Select an option');
  };
  const renderValue = (itemValue_0 = value) => {
    const item_2 = !!(items !== null && items !== void 0 && items.length) ? items.find(item_ => getValue(item_) === getValue(itemValue_0)) : children.find(item__0 => {
      var _item__0$props;
      return getValue((_item__0$props = item__0.props) === null || _item__0$props === void 0 ? void 0 : _item__0$props.value) === getValue(itemValue_0);
    });
    return item_2 ? getLabel(item_2, props) : getLabel(itemValue_0, props) || '';
  };
  const renderValues = renderValues_ || ((value__ = value) => {
    if (multiple) {
      if (chip) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Chips, _objectSpread(_objectSpread({
          wrap: "wrap",
          size: size,
          className: (0, _styleReact.classNames)([classes.chipGroup, version !== 'outlined' && classes.chipGroup_padding])
        }, 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));
      if (valuesAll.every(item_5 => (0, _utils.is)('simple', item_5))) return valuesAll.join(', ');
      return value !== null && value !== void 0 && value.length ? valuesAll : noSelectText || name;
    }
    return renderValue(value);
  });
  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), {}, {
    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), {}, {
    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__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
    gap: 0,
    direction: "column",
    fullWidth: fullWidth
  }, 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]),
    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,
        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);
        }
      }), 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;