@onesy/ui-react 1.0.202 → 1.0.204

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/AutoComplete/AutoComplete.d.ts +2 -0
  2. package/AutoComplete/AutoComplete.js +33 -24
  3. package/AutoCompleteCountry/AutoCompleteCountry.js +1 -0
  4. package/AutoCompleteCurrency/AutoCompleteCurrency.js +1 -0
  5. package/Select/Select.d.ts +1 -0
  6. package/Select/Select.js +23 -16
  7. package/esm/AutoComplete/AutoComplete.js +32 -23
  8. package/esm/AutoCompleteCountry/AutoCompleteCountry.js +1 -0
  9. package/esm/AutoCompleteCurrency/AutoCompleteCurrency.js +1 -0
  10. package/esm/Select/Select.js +22 -15
  11. package/esm/index.js +1 -1
  12. package/index.js +1 -1
  13. package/package.json +1 -1
package/AutoComplete/AutoComplete.d.ts CHANGED
@@ -47,6 +47,7 @@ export declare type IAutoComplete = Omit<ITextField, 'onChange'> & {
47
47
  selectOnFocus?: boolean;
48
48
  clearOnBlur?: boolean;
49
49
  noInputValue?: boolean;
50
+ portal?: boolean;
50
51
  IconClear?: IElementReference;
51
52
  IconDropdown?: IElementReference;
52
53
  WrapperProps?: IPropsAny;
@@ -56,6 +57,7 @@ export declare type IAutoComplete = Omit<ITextField, 'onChange'> & {
56
57
  IconButtonProps?: IPropsAny;
57
58
  InputProps?: IPropsAny;
58
59
  IconProps?: IPropsAny;
60
+ TextFieldProps?: IPropsAny;
59
61
  };
60
62
  declare const AutoComplete: React.FC<IAutoComplete>;
61
63
  export default AutoComplete;
package/AutoComplete/AutoComplete.js CHANGED
@@ -24,7 +24,7 @@ var _ListSubheader = _interopRequireDefault(require("../ListSubheader"));
24
24
  var _Line = _interopRequireDefault(require("../Line"));
25
25
  var _utils2 = require("../utils");
26
26
  var _jsxRuntime = require("react/jsx-runtime");
27
- const _excluded = ["ref", "tonal", "color", "size", "version", "valueInput", "valueInputDefault", "onChangeInput", "value", "valueDefault", "onChange", "options", "label", "multiple", "prefix", "sufix", "start", "end", "autoWidth", "readOnly", "getLabel", "renderValues", "renderChip", "renderOption", "equal", "equalInput", "filter", "clear", "loading", "autoSelectOnBlur", "blurOnSelect", "noOptions", "noOptionsObject", "startOptionsObject", "noOptionsElement", "startOptionsElement", "endOptionsElement", "endOptionsObject", "openOnFocus", "closeOnSelect", "clearOnEscape", "groupBy", "limit", "openOnInputUpdate", "filterOutSelectedOptions", "selectOnFocus", "clearOnBlur", "clearInputOnSelect", "chip", "fullWidth", "noInputValue", "disabled", "IconClear", "IconDropdown", "WrapperProps", "ChipProps", "ListProps", "MenuProps", "IconButtonProps", "InputProps", "IconProps", "className", "style", "children"];
27
+ const _excluded = ["ref", "tonal", "color", "size", "version", "valueInput", "valueInputDefault", "onChangeInput", "value", "valueDefault", "onChange", "options", "label", "multiple", "prefix", "sufix", "start", "end", "autoWidth", "readOnly", "getLabel", "renderValues", "renderChip", "renderOption", "equal", "equalInput", "filter", "clear", "loading", "autoSelectOnBlur", "blurOnSelect", "noOptions", "noOptionsObject", "startOptionsObject", "noOptionsElement", "startOptionsElement", "endOptionsElement", "endOptionsObject", "openOnFocus", "closeOnSelect", "clearOnEscape", "groupBy", "limit", "openOnInputUpdate", "filterOutSelectedOptions", "selectOnFocus", "clearOnBlur", "clearInputOnSelect", "chip", "fullWidth", "noInputValue", "disabled", "portal", "IconClear", "IconDropdown", "WrapperProps", "ChipProps", "ListProps", "MenuProps", "IconButtonProps", "InputProps", "IconProps", "TextFieldProps", "className", "style", "children"];
28
28
  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; }
29
29
  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; }
30
30
  const useStyle = (0, _styleReact.style)(theme => ({
@@ -116,7 +116,7 @@ const getText = value => {
116
116
  };
117
117
  const getValue = value => (value === null || value === void 0 ? void 0 : value.value) !== undefined ? value.value : value;
118
118
  const AutoComplete = props_ => {
119
- var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0;
119
+ var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _props$MenuProps$port, _props$MenuProps, _TextFieldProps$Input, _MenuProps$ListProps, _MenuProps$ListProps2;
120
120
  const theme = (0, _styleReact.useOnesyTheme)();
121
121
  const l = theme.l;
122
122
  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.onesyAutoComplete) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -183,6 +183,7 @@ const AutoComplete = props_ => {
183
183
  fullWidth,
184
184
  noInputValue,
185
185
  disabled,
186
+ portal = (_props$MenuProps$port = (_props$MenuProps = props.MenuProps) === null || _props$MenuProps === void 0 ? void 0 : _props$MenuProps.portal) !== null && _props$MenuProps$port !== void 0 ? _props$MenuProps$port : true,
186
187
  IconClear = _IconMaterialCloseW.default,
187
188
  IconDropdown = _IconMaterialArrowDropDownW.default,
188
189
  WrapperProps,
@@ -192,6 +193,7 @@ const AutoComplete = props_ => {
192
193
  IconButtonProps,
193
194
  InputProps,
194
195
  IconProps,
196
+ TextFieldProps,
195
197
  className,
196
198
  style,
197
199
  children: children_
@@ -228,7 +230,7 @@ const AutoComplete = props_ => {
228
230
  root: {},
229
231
  menu: {}
230
232
  };
231
- if (MenuProps !== null && MenuProps !== void 0 && MenuProps.portal && autoWidth) {
233
+ if (portal && autoWidth) {
232
234
  var _refs$wrapper$current;
233
235
  styles.menu.width = (_refs$wrapper$current = refs.wrapper.current) === null || _refs$wrapper$current === void 0 ? void 0 : _refs$wrapper$current.clientWidth;
234
236
  }
@@ -594,7 +596,7 @@ const AutoComplete = props_ => {
594
596
  fullWidth: fullWidth
595
597
  }, WrapperProps), {}, {
596
598
  className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('AutoComplete', theme) && ['onesy-AutoComplete-wrapper', fullWidth && 'onesy-full-width'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, classes.wrapper]),
597
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextField, _objectSpread(_objectSpread({
599
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextField, _objectSpread(_objectSpread(_objectSpread({
598
600
  ref: refs.input,
599
601
  rootRef: item_11 => {
600
602
  if (ref) {
@@ -629,21 +631,22 @@ const AutoComplete = props_ => {
629
631
  "aria-labelledby": label,
630
632
  "aria-disabled": disabled,
631
633
  fullWidth: fullWidth,
632
- disabled: disabled,
633
- InputWrapperProps: {
634
- className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('AutoComplete', theme) && ['onesy-AutoComplete-input-wrapper'], classes.inputWrapper, multiple && [classes.multiple, classes[`inputWrapper_multiple_size_${size}`]], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]),
634
+ disabled: disabled
635
+ }, TextFieldProps), {}, {
636
+ InputWrapperProps: _objectSpread(_objectSpread({}, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputWrapperProps), {}, {
637
+ className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('AutoComplete', theme) && ['onesy-AutoComplete-input-wrapper'], TextFieldProps === null || TextFieldProps === void 0 || (_TextFieldProps$Input = TextFieldProps.InputWrapperProps) === null || _TextFieldProps$Input === void 0 ? void 0 : _TextFieldProps$Input.className, classes.inputWrapper, multiple && [classes.multiple, classes[`inputWrapper_multiple_size_${size}`]], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]),
635
638
  onMouseDown,
636
639
  onMouseUp,
637
640
  onClick,
638
641
  onKeyDown: onEnterKeyDown
639
- },
640
- inputProps: _objectSpread(_objectSpread({
642
+ }),
643
+ inputProps: _objectSpread(_objectSpread(_objectSpread({}, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.inputProps), {}, {
641
644
  disabled: multiple,
642
645
  readOnly: multiple
643
646
  }, InputProps), {}, {
644
647
  className: (0, _styleReact.classNames)([InputProps === null || InputProps === void 0 ? void 0 : InputProps.className, multiple && classes.input_])
645
648
  }),
646
- style: _objectSpread(_objectSpread({}, styles.root), style)
649
+ style: _objectSpread(_objectSpread(_objectSpread({}, styles.root), TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.style), style)
647
650
  }, other), {}, {
648
651
  children: [!noInputValue && multiple && !chip && !!value.length && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
649
652
  ref: refs.value,
@@ -659,7 +662,9 @@ const AutoComplete = props_ => {
659
662
  ref: refs.menu,
660
663
  open: open && !!(menuItems !== null && menuItems !== void 0 && menuItems.length),
661
664
  autoSelectOnBlur: autoSelectOnBlur,
662
- portal: true,
665
+ portal: portal,
666
+ includeQueries: ['.onesy-more'],
667
+ includeParentQueries: ['.onesy-more'],
663
668
  onClose: () => onClose(false),
664
669
  anchorElement: refs.root.current,
665
670
  onExited: onExited,
@@ -667,27 +672,31 @@ const AutoComplete = props_ => {
667
672
  transformOrigin: "center top",
668
673
  transformOriginSwitch: "center bottom",
669
674
  maxWidth: "unset",
670
- AppendProps: {
675
+ ignoreNonExisting: true
676
+ }, MenuProps), {}, {
677
+ AppendProps: _objectSpread({
671
678
  alignment: 'start'
672
- },
673
- ModalProps: {
674
- // focus: !MenuProps.portal
675
-
679
+ }, MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.AppendProps),
680
+ ModalProps: _objectSpread({
676
681
  freezeScroll: false
677
- },
678
- ListProps: _objectSpread(_objectSpread({
682
+ }, MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.ModalProps),
683
+ ListProps: _objectSpread(_objectSpread(_objectSpread({
679
684
  menu: true,
680
685
  paddingVertical: (0, _utils.is)('function', groupBy) && !!options.length ? 'none' : undefined,
681
686
  size,
682
687
  role: 'listbox',
683
688
  id: refs.ids.list,
684
689
  'aria-label': label
685
- }, ListProps), {}, {
686
- className: (0, _styleReact.classNames)([ListProps === null || ListProps === void 0 ? void 0 : ListProps.className, classes.list])
687
- })
688
- }, MenuProps), {}, {
689
- style: _objectSpread(_objectSpread({}, styles.menu), MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.menu),
690
- className: (0, _styleReact.classNames)([MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.className])
690
+ }, MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.ListProps), ListProps), {}, {
691
+ className: (0, _styleReact.classNames)([MenuProps === null || MenuProps === void 0 || (_MenuProps$ListProps = MenuProps.ListProps) === null || _MenuProps$ListProps === void 0 ? void 0 : _MenuProps$ListProps.className, ListProps === null || ListProps === void 0 ? void 0 : ListProps.className, classes.list]),
692
+ style: _objectSpread(_objectSpread({
693
+ maxHeight: 250,
694
+ overflow: 'hidden auto',
695
+ overscrollBehavior: 'contain'
696
+ }, MenuProps === null || MenuProps === void 0 || (_MenuProps$ListProps2 = MenuProps.ListProps) === null || _MenuProps$ListProps2 === void 0 ? void 0 : _MenuProps$ListProps2.style), ListProps === null || ListProps === void 0 ? void 0 : ListProps.style)
697
+ }),
698
+ style: _objectSpread(_objectSpread({}, styles.menu), MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.style),
699
+ className: (0, _styleReact.classNames)(['onesy-Select-Menu', MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.className])
691
700
  }))]
692
701
  }));
693
702
  };
package/AutoCompleteCountry/AutoCompleteCountry.js CHANGED
@@ -66,6 +66,7 @@ const AutoCompleteCountry = props_ => {
66
66
  return valueInputDefault_ !== undefined ? valueInputDefault_ : (_options$find = options.find(item_0 => item_0.value === (value !== undefined ? value : valueDefault))) === null || _options$find === void 0 ? void 0 : _options$find.name;
67
67
  }, []);
68
68
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AutoComplete, _objectSpread({
69
+ name: l('Select a country'),
69
70
  valueInputDefault: valueInputDefault,
70
71
  valueDefault: valueDefault,
71
72
  value: value,
package/AutoCompleteCurrency/AutoCompleteCurrency.js CHANGED
@@ -60,6 +60,7 @@ const AutoCompleteCurrency = props_ => {
60
60
  return valueInputDefault_ !== undefined ? valueInputDefault_ : (_options$find = options.find(item_0 => item_0.value === (other.value !== undefined ? other.value : other.valueDefault))) === null || _options$find === void 0 ? void 0 : _options$find.name;
61
61
  }, []);
62
62
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AutoComplete, _objectSpread({
63
+ name: l('Select a currency'),
63
64
  valueInputDefault: valueInputDefault,
64
65
  options: options,
65
66
  size: size,
package/Select/Select.d.ts CHANGED
@@ -14,6 +14,7 @@ export declare type ISelect = ITextField & {
14
14
  chip?: boolean;
15
15
  clear?: boolean;
16
16
  noSelectText?: any;
17
+ portal?: boolean;
17
18
  renderValues?: (value: string | string[]) => IElement;
18
19
  renderChip?: (item: any, value: any, props: IPropsAny) => IElement;
19
20
  IconClear?: any;
package/Select/Select.js CHANGED
@@ -22,7 +22,7 @@ var _IconButton = _interopRequireDefault(require("../IconButton"));
22
22
  var _Line = _interopRequireDefault(require("../Line"));
23
23
  var _utils2 = require("../utils");
24
24
  var _jsxRuntime = require("react/jsx-runtime");
25
- 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"];
25
+ 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", "portal", "renderValues", "renderChip", "IconClear", "IconDropdown", "inputProps", "InputWrapperProps", "WrapperProps", "ChipProps", "ChiProps", "ListProps", "MenuProps", "ListItemProps", "ListItemTypeProps", "ListItemTypePrimaryProps", "ListItemTypeSecondaryProps", "IconButtonProps", "IconProps", "className", "style", "children"];
26
26
  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; }
27
27
  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; }
28
28
  const useStyle = (0, _styleReact.style)(theme => ({
@@ -121,7 +121,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
121
121
  });
122
122
  const getValue = value => (value === null || value === void 0 ? void 0 : value.value) !== undefined ? value.value : value;
123
123
  const Select = props_ => {
124
- var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8;
124
+ var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _props$MenuProps$port, _props$MenuProps, _MenuProps$ListProps, _MenuProps$ListProps2;
125
125
  const theme = (0, _styleReact.useOnesyTheme)();
126
126
  const l = theme.l;
127
127
  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_);
@@ -158,6 +158,7 @@ const Select = props_ => {
158
158
  readOnly,
159
159
  noSelectText,
160
160
  disabled,
161
+ portal = (_props$MenuProps$port = (_props$MenuProps = props.MenuProps) === null || _props$MenuProps === void 0 ? void 0 : _props$MenuProps.portal) !== null && _props$MenuProps$port !== void 0 ? _props$MenuProps$port : true,
161
162
  renderValues: renderValues_,
162
163
  renderChip,
163
164
  IconClear = _IconMaterialCloseW.default,
@@ -167,13 +168,7 @@ const Select = props_ => {
167
168
  WrapperProps,
168
169
  ChipProps,
169
170
  ChiProps,
170
- ListProps = {
171
- style: {
172
- maxHeight: 250,
173
- overflowY: 'auto',
174
- overflowX: 'hidden'
175
- }
176
- },
171
+ ListProps,
177
172
  MenuProps: MenuPropsProps,
178
173
  ListItemProps,
179
174
  ListItemTypeProps,
@@ -213,7 +208,7 @@ const Select = props_ => {
213
208
  const MenuProps = _objectSpread({
214
209
  portal: true
215
210
  }, MenuPropsProps);
216
- if (MenuProps !== null && MenuProps !== void 0 && MenuProps.portal && autoWidth) {
211
+ if (portal && autoWidth) {
217
212
  var _refs$wrapper$current;
218
213
  styles.menu.width = (_refs$wrapper$current = refs.wrapper.current) === null || _refs$wrapper$current === void 0 ? void 0 : _refs$wrapper$current.clientWidth;
219
214
  }
@@ -438,7 +433,9 @@ const Select = props_ => {
438
433
  })), (!!items.length || children) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, _objectSpread(_objectSpread({
439
434
  ref: refs.menu,
440
435
  open: open,
441
- portal: false,
436
+ portal: portal,
437
+ includeQueries: ['.onesy-more'],
438
+ includeParentQueries: ['.onesy-more'],
442
439
  onClose: () => onClose(false),
443
440
  anchorElement: refs.root.current,
444
441
  transformOrigin: "center top",
@@ -489,21 +486,31 @@ const Select = props_ => {
489
486
  if (!multiple) setOpen(false);
490
487
  }
491
488
  });
492
- })
489
+ }),
490
+ ignoreNonExisting: true
493
491
  }, MenuProps), {}, {
494
492
  AppendProps: _objectSpread({
495
493
  alignment: 'start'
496
494
  }, MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.AppendProps),
497
- ModalProps: _objectSpread({}, MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.ModalProps),
498
- ListProps: _objectSpread(_objectSpread({
495
+ ModalProps: _objectSpread({
496
+ freezeScroll: false
497
+ }, MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.ModalProps),
498
+ ListProps: _objectSpread(_objectSpread(_objectSpread({
499
499
  menu: true,
500
500
  size: (ListProps === null || ListProps === void 0 ? void 0 : ListProps.size) || (MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.size) || size,
501
501
  role: 'listbox',
502
502
  id: refs.ids.list,
503
503
  'aria-label': name
504
- }, ListProps), MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.ListProps),
504
+ }, MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.ListProps), ListProps), {}, {
505
+ className: (0, _styleReact.classNames)([MenuProps === null || MenuProps === void 0 || (_MenuProps$ListProps = MenuProps.ListProps) === null || _MenuProps$ListProps === void 0 ? void 0 : _MenuProps$ListProps.className, ListProps === null || ListProps === void 0 ? void 0 : ListProps.className]),
506
+ style: _objectSpread(_objectSpread({
507
+ maxHeight: 250,
508
+ overflow: 'hidden auto',
509
+ overscrollBehavior: 'contain'
510
+ }, MenuProps === null || MenuProps === void 0 || (_MenuProps$ListProps2 = MenuProps.ListProps) === null || _MenuProps$ListProps2 === void 0 ? void 0 : _MenuProps$ListProps2.style), ListProps === null || ListProps === void 0 ? void 0 : ListProps.style)
511
+ }),
505
512
  style: _objectSpread(_objectSpread({}, styles.menu), MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.style),
506
- className: (0, _styleReact.classNames)([MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.className])
513
+ className: (0, _styleReact.classNames)(['onesy-Select-Menu', MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.className])
507
514
  }))]
508
515
  }));
509
516
  };
package/esm/AutoComplete/AutoComplete.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
- const _excluded = ["ref", "tonal", "color", "size", "version", "valueInput", "valueInputDefault", "onChangeInput", "value", "valueDefault", "onChange", "options", "label", "multiple", "prefix", "sufix", "start", "end", "autoWidth", "readOnly", "getLabel", "renderValues", "renderChip", "renderOption", "equal", "equalInput", "filter", "clear", "loading", "autoSelectOnBlur", "blurOnSelect", "noOptions", "noOptionsObject", "startOptionsObject", "noOptionsElement", "startOptionsElement", "endOptionsElement", "endOptionsObject", "openOnFocus", "closeOnSelect", "clearOnEscape", "groupBy", "limit", "openOnInputUpdate", "filterOutSelectedOptions", "selectOnFocus", "clearOnBlur", "clearInputOnSelect", "chip", "fullWidth", "noInputValue", "disabled", "IconClear", "IconDropdown", "WrapperProps", "ChipProps", "ListProps", "MenuProps", "IconButtonProps", "InputProps", "IconProps", "className", "style", "children"];
3
+ const _excluded = ["ref", "tonal", "color", "size", "version", "valueInput", "valueInputDefault", "onChangeInput", "value", "valueDefault", "onChange", "options", "label", "multiple", "prefix", "sufix", "start", "end", "autoWidth", "readOnly", "getLabel", "renderValues", "renderChip", "renderOption", "equal", "equalInput", "filter", "clear", "loading", "autoSelectOnBlur", "blurOnSelect", "noOptions", "noOptionsObject", "startOptionsObject", "noOptionsElement", "startOptionsElement", "endOptionsElement", "endOptionsObject", "openOnFocus", "closeOnSelect", "clearOnEscape", "groupBy", "limit", "openOnInputUpdate", "filterOutSelectedOptions", "selectOnFocus", "clearOnBlur", "clearInputOnSelect", "chip", "fullWidth", "noInputValue", "disabled", "portal", "IconClear", "IconDropdown", "WrapperProps", "ChipProps", "ListProps", "MenuProps", "IconButtonProps", "InputProps", "IconProps", "TextFieldProps", "className", "style", "children"];
4
4
  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; }
5
5
  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; }
6
6
  import React from 'react';
@@ -175,6 +175,7 @@ const AutoComplete = props_ => {
175
175
  fullWidth,
176
176
  noInputValue,
177
177
  disabled,
178
+ portal = props.MenuProps?.portal ?? true,
178
179
  IconClear = IconMaterialClose,
179
180
  IconDropdown = IconMaterialArrowDropDown,
180
181
  WrapperProps,
@@ -184,6 +185,7 @@ const AutoComplete = props_ => {
184
185
  IconButtonProps,
185
186
  InputProps,
186
187
  IconProps,
188
+ TextFieldProps,
187
189
  className,
188
190
  style,
189
191
  children: children_
@@ -220,7 +222,7 @@ const AutoComplete = props_ => {
220
222
  root: {},
221
223
  menu: {}
222
224
  };
223
- if (MenuProps?.portal && autoWidth) {
225
+ if (portal && autoWidth) {
224
226
  styles.menu.width = refs.wrapper.current?.clientWidth;
225
227
  }
226
228
  React.useEffect(() => {
@@ -574,7 +576,7 @@ const AutoComplete = props_ => {
574
576
  fullWidth: fullWidth
575
577
  }, WrapperProps), {}, {
576
578
  className: classNames([staticClassName('AutoComplete', theme) && ['onesy-AutoComplete-wrapper', fullWidth && 'onesy-full-width'], WrapperProps?.className, classes.wrapper]),
577
- children: [/*#__PURE__*/_jsxs(TextField, _objectSpread(_objectSpread({
579
+ children: [/*#__PURE__*/_jsxs(TextField, _objectSpread(_objectSpread(_objectSpread({
578
580
  ref: refs.input,
579
581
  rootRef: item_11 => {
580
582
  if (ref) {
@@ -609,21 +611,22 @@ const AutoComplete = props_ => {
609
611
  "aria-labelledby": label,
610
612
  "aria-disabled": disabled,
611
613
  fullWidth: fullWidth,
612
- disabled: disabled,
613
- InputWrapperProps: {
614
- className: classNames([staticClassName('AutoComplete', theme) && ['onesy-AutoComplete-input-wrapper'], classes.inputWrapper, multiple && [classes.multiple, classes[`inputWrapper_multiple_size_${size}`]], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]),
614
+ disabled: disabled
615
+ }, TextFieldProps), {}, {
616
+ InputWrapperProps: _objectSpread(_objectSpread({}, TextFieldProps?.InputWrapperProps), {}, {
617
+ className: classNames([staticClassName('AutoComplete', theme) && ['onesy-AutoComplete-input-wrapper'], TextFieldProps?.InputWrapperProps?.className, classes.inputWrapper, multiple && [classes.multiple, classes[`inputWrapper_multiple_size_${size}`]], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]),
615
618
  onMouseDown,
616
619
  onMouseUp,
617
620
  onClick,
618
621
  onKeyDown: onEnterKeyDown
619
- },
620
- inputProps: _objectSpread(_objectSpread({
622
+ }),
623
+ inputProps: _objectSpread(_objectSpread(_objectSpread({}, TextFieldProps?.inputProps), {}, {
621
624
  disabled: multiple,
622
625
  readOnly: multiple
623
626
  }, InputProps), {}, {
624
627
  className: classNames([InputProps?.className, multiple && classes.input_])
625
628
  }),
626
- style: _objectSpread(_objectSpread({}, styles.root), style)
629
+ style: _objectSpread(_objectSpread(_objectSpread({}, styles.root), TextFieldProps?.style), style)
627
630
  }, other), {}, {
628
631
  children: [!noInputValue && multiple && !chip && !!value.length && /*#__PURE__*/_jsx("div", {
629
632
  ref: refs.value,
@@ -639,7 +642,9 @@ const AutoComplete = props_ => {
639
642
  ref: refs.menu,
640
643
  open: open && !!menuItems?.length,
641
644
  autoSelectOnBlur: autoSelectOnBlur,
642
- portal: true,
645
+ portal: portal,
646
+ includeQueries: ['.onesy-more'],
647
+ includeParentQueries: ['.onesy-more'],
643
648
  onClose: () => onClose(false),
644
649
  anchorElement: refs.root.current,
645
650
  onExited: onExited,
@@ -647,27 +652,31 @@ const AutoComplete = props_ => {
647
652
  transformOrigin: "center top",
648
653
  transformOriginSwitch: "center bottom",
649
654
  maxWidth: "unset",
650
- AppendProps: {
655
+ ignoreNonExisting: true
656
+ }, MenuProps), {}, {
657
+ AppendProps: _objectSpread({
651
658
  alignment: 'start'
652
- },
653
- ModalProps: {
654
- // focus: !MenuProps.portal
655
-
659
+ }, MenuProps?.AppendProps),
660
+ ModalProps: _objectSpread({
656
661
  freezeScroll: false
657
- },
658
- ListProps: _objectSpread(_objectSpread({
662
+ }, MenuProps?.ModalProps),
663
+ ListProps: _objectSpread(_objectSpread(_objectSpread({
659
664
  menu: true,
660
665
  paddingVertical: is('function', groupBy) && !!options.length ? 'none' : undefined,
661
666
  size,
662
667
  role: 'listbox',
663
668
  id: refs.ids.list,
664
669
  'aria-label': label
665
- }, ListProps), {}, {
666
- className: classNames([ListProps?.className, classes.list])
667
- })
668
- }, MenuProps), {}, {
669
- style: _objectSpread(_objectSpread({}, styles.menu), MenuProps?.menu),
670
- className: classNames([MenuProps?.className])
670
+ }, MenuProps?.ListProps), ListProps), {}, {
671
+ className: classNames([MenuProps?.ListProps?.className, ListProps?.className, classes.list]),
672
+ style: _objectSpread(_objectSpread({
673
+ maxHeight: 250,
674
+ overflow: 'hidden auto',
675
+ overscrollBehavior: 'contain'
676
+ }, MenuProps?.ListProps?.style), ListProps?.style)
677
+ }),
678
+ style: _objectSpread(_objectSpread({}, styles.menu), MenuProps?.style),
679
+ className: classNames(['onesy-Select-Menu', MenuProps?.className])
671
680
  }))]
672
681
  }));
673
682
  };
package/esm/AutoCompleteCountry/AutoCompleteCountry.js CHANGED
@@ -57,6 +57,7 @@ const AutoCompleteCountry = props_ => {
57
57
  return valueInputDefault_ !== undefined ? valueInputDefault_ : options.find(item_0 => item_0.value === (value !== undefined ? value : valueDefault))?.name;
58
58
  }, []);
59
59
  return /*#__PURE__*/_jsx(AutoComplete, _objectSpread({
60
+ name: l('Select a country'),
60
61
  valueInputDefault: valueInputDefault,
61
62
  valueDefault: valueDefault,
62
63
  value: value,
package/esm/AutoCompleteCurrency/AutoCompleteCurrency.js CHANGED
@@ -51,6 +51,7 @@ const AutoCompleteCurrency = props_ => {
51
51
  return valueInputDefault_ !== undefined ? valueInputDefault_ : options.find(item_0 => item_0.value === (other.value !== undefined ? other.value : other.valueDefault))?.name;
52
52
  }, []);
53
53
  return /*#__PURE__*/_jsx(AutoComplete, _objectSpread({
54
+ name: l('Select a currency'),
54
55
  valueInputDefault: valueInputDefault,
55
56
  options: options,
56
57
  size: size,
package/esm/Select/Select.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
- 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"];
3
+ 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", "portal", "renderValues", "renderChip", "IconClear", "IconDropdown", "inputProps", "InputWrapperProps", "WrapperProps", "ChipProps", "ChiProps", "ListProps", "MenuProps", "ListItemProps", "ListItemTypeProps", "ListItemTypePrimaryProps", "ListItemTypeSecondaryProps", "IconButtonProps", "IconProps", "className", "style", "children"];
4
4
  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; }
5
5
  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; }
6
6
  import React from 'react';
@@ -150,6 +150,7 @@ const Select = props_ => {
150
150
  readOnly,
151
151
  noSelectText,
152
152
  disabled,
153
+ portal = props.MenuProps?.portal ?? true,
153
154
  renderValues: renderValues_,
154
155
  renderChip,
155
156
  IconClear = IconMaterialClose,
@@ -159,13 +160,7 @@ const Select = props_ => {
159
160
  WrapperProps,
160
161
  ChipProps,
161
162
  ChiProps,
162
- ListProps = {
163
- style: {
164
- maxHeight: 250,
165
- overflowY: 'auto',
166
- overflowX: 'hidden'
167
- }
168
- },
163
+ ListProps,
169
164
  MenuProps: MenuPropsProps,
170
165
  ListItemProps,
171
166
  ListItemTypeProps,
@@ -205,7 +200,7 @@ const Select = props_ => {
205
200
  const MenuProps = _objectSpread({
206
201
  portal: true
207
202
  }, MenuPropsProps);
208
- if (MenuProps?.portal && autoWidth) {
203
+ if (portal && autoWidth) {
209
204
  styles.menu.width = refs.wrapper.current?.clientWidth;
210
205
  }
211
206
  React.useEffect(() => {
@@ -425,7 +420,9 @@ const Select = props_ => {
425
420
  })), (!!items.length || children) && /*#__PURE__*/_jsx(Menu, _objectSpread(_objectSpread({
426
421
  ref: refs.menu,
427
422
  open: open,
428
- portal: false,
423
+ portal: portal,
424
+ includeQueries: ['.onesy-more'],
425
+ includeParentQueries: ['.onesy-more'],
429
426
  onClose: () => onClose(false),
430
427
  anchorElement: refs.root.current,
431
428
  transformOrigin: "center top",
@@ -471,21 +468,31 @@ const Select = props_ => {
471
468
  if (is('function', item_9.props?.onClick)) item_9.props?.onClick(event_10);
472
469
  if (!multiple) setOpen(false);
473
470
  }
474
- })))
471
+ }))),
472
+ ignoreNonExisting: true
475
473
  }, MenuProps), {}, {
476
474
  AppendProps: _objectSpread({
477
475
  alignment: 'start'
478
476
  }, MenuProps?.AppendProps),
479
- ModalProps: _objectSpread({}, MenuProps?.ModalProps),
480
- ListProps: _objectSpread(_objectSpread({
477
+ ModalProps: _objectSpread({
478
+ freezeScroll: false
479
+ }, MenuProps?.ModalProps),
480
+ ListProps: _objectSpread(_objectSpread(_objectSpread({
481
481
  menu: true,
482
482
  size: ListProps?.size || MenuProps?.size || size,
483
483
  role: 'listbox',
484
484
  id: refs.ids.list,
485
485
  'aria-label': name
486
- }, ListProps), MenuProps?.ListProps),
486
+ }, MenuProps?.ListProps), ListProps), {}, {
487
+ className: classNames([MenuProps?.ListProps?.className, ListProps?.className]),
488
+ style: _objectSpread(_objectSpread({
489
+ maxHeight: 250,
490
+ overflow: 'hidden auto',
491
+ overscrollBehavior: 'contain'
492
+ }, MenuProps?.ListProps?.style), ListProps?.style)
493
+ }),
487
494
  style: _objectSpread(_objectSpread({}, styles.menu), MenuProps?.style),
488
- className: classNames([MenuProps?.className])
495
+ className: classNames(['onesy-Select-Menu', MenuProps?.className])
489
496
  }))]
490
497
  }));
491
498
  };
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license UiReact v1.0.201
1
+ /** @license UiReact v1.0.203
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license UiReact v1.0.201
1
+ /** @license UiReact v1.0.203
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onesy/ui-react",
3
- "version": "1.0.202",
3
+ "version": "1.0.204",
4
4
  "description": "UI for React",
5
5
  "repository": "https://github.com/onesy-me/onesy.git",
6
6
  "author": "Lazar Erić <lazareric1@proton.me>",