@zohodesk/components 1.0.0-temp-192.1 → 1.0.0-temp-195

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 (248) hide show
  1. package/.cli/propValidation_report.html +1 -1
  2. package/es/Accordion/Accordion.js +2 -2
  3. package/es/Accordion/AccordionItem.js +4 -4
  4. package/es/Accordion/index.js +2 -2
  5. package/es/Animation/Animation.js +3 -3
  6. package/es/Animation/utils.js +1 -1
  7. package/es/AppContainer/AppContainer.js +19 -18
  8. package/es/Avatar/Avatar.js +9 -10
  9. package/es/Avatar/__tests__/Avatar.spec.js +1 -1
  10. package/es/AvatarTeam/AvatarTeam.js +11 -11
  11. package/es/AvatarTeam/__tests__/AvatarTeam.spec.js +1 -1
  12. package/es/Button/Button.js +9 -10
  13. package/es/Button/__tests__/Button.spec.js +1 -1
  14. package/es/Button/index.js +2 -2
  15. package/es/Button/props/defaultProps.js +1 -1
  16. package/es/Buttongroup/Buttongroup.js +3 -3
  17. package/es/Buttongroup/__tests__/Buttongroup.spec.js +1 -1
  18. package/es/Card/Card.js +5 -7
  19. package/es/Card/index.js +4 -4
  20. package/es/CheckBox/CheckBox.js +14 -14
  21. package/es/DateTime/CalendarView.js +6 -6
  22. package/es/DateTime/DateTime.js +15 -15
  23. package/es/DateTime/DateTimePopupFooter.js +5 -5
  24. package/es/DateTime/DateTimePopupHeader.js +4 -4
  25. package/es/DateTime/DateWidget.js +17 -17
  26. package/es/DateTime/DaysRow.js +3 -3
  27. package/es/DateTime/Time.js +5 -5
  28. package/es/DateTime/YearView.js +6 -6
  29. package/es/DateTime/dateFormatUtils/dateFormat.js +4 -4
  30. package/es/DateTime/dateFormatUtils/dayChange.js +2 -2
  31. package/es/DateTime/dateFormatUtils/index.js +3 -3
  32. package/es/DateTime/dateFormatUtils/monthChange.js +2 -2
  33. package/es/DateTime/dateFormatUtils/timeChange.js +2 -2
  34. package/es/DateTime/dateFormatUtils/yearChange.js +2 -2
  35. package/es/DateTime/index.js +1 -1
  36. package/es/DateTime/props/propTypes.js +1 -1
  37. package/es/DateTime/validator.js +2 -2
  38. package/es/DropBox/DropBox.js +19 -20
  39. package/es/DropBox/DropBoxElement/DropBoxElement.js +6 -6
  40. package/es/DropBox/DropBoxElement/css/cssJSLogic.js +1 -1
  41. package/es/DropBox/DropBoxElement/useDropboxPosCalc.js +1 -1
  42. package/es/DropBox/css/cssJSLogic.js +1 -1
  43. package/es/DropBox/props/defaultProps.js +1 -1
  44. package/es/DropBox/props/propTypes.js +1 -1
  45. package/es/DropBox/utils/isMobilePopover.js +1 -1
  46. package/es/DropDown/DropDown.js +6 -5
  47. package/es/DropDown/DropDownHeading.js +3 -3
  48. package/es/DropDown/DropDownItem.js +3 -3
  49. package/es/DropDown/DropDownSearch.js +4 -4
  50. package/es/DropDown/DropDownSeparator.js +2 -2
  51. package/es/DropDown/index.js +7 -7
  52. package/es/DropDown/props/propTypes.js +1 -1
  53. package/es/Heading/Heading.js +3 -3
  54. package/es/Label/Label.js +4 -4
  55. package/es/Label/__tests__/Label.spec.js +1 -1
  56. package/es/Layout/Box.js +4 -4
  57. package/es/Layout/Container.js +4 -4
  58. package/es/Layout/index.js +2 -2
  59. package/es/ListItem/ListContainer.js +12 -11
  60. package/es/ListItem/ListItem.js +11 -12
  61. package/es/ListItem/ListItem.module.css +18 -85
  62. package/es/ListItem/ListItemWithAvatar.js +14 -15
  63. package/es/ListItem/ListItemWithCheckBox.js +10 -11
  64. package/es/ListItem/ListItemWithIcon.js +11 -12
  65. package/es/ListItem/ListItemWithRadio.js +10 -11
  66. package/es/ListItem/index.js +6 -6
  67. package/es/Modal/Modal.js +7 -8
  68. package/es/MultiSelect/AdvancedGroupMultiSelect.js +20 -26
  69. package/es/MultiSelect/AdvancedMultiSelect.js +31 -28
  70. package/es/MultiSelect/EmptyState.js +3 -3
  71. package/es/MultiSelect/MobileHeader/MobileHeader.js +5 -5
  72. package/es/MultiSelect/MultiSelect.js +23 -29
  73. package/es/MultiSelect/MultiSelectHeader.js +4 -4
  74. package/es/MultiSelect/MultiSelectWithAvatar.js +20 -21
  75. package/es/MultiSelect/SelectedOptions.js +11 -13
  76. package/es/MultiSelect/Suggestions.js +16 -22
  77. package/es/MultiSelect/index.js +4 -4
  78. package/es/MultiSelect/props/defaultProps.js +8 -10
  79. package/es/MultiSelect/props/propTypes.js +5 -7
  80. package/es/PopOver/PopOver.js +6 -6
  81. package/es/PopOver/index.js +3 -3
  82. package/es/Popup/Popup.js +6 -7
  83. package/es/Provider/AvatarSize.js +1 -1
  84. package/es/Provider/CssProvider.js +1 -1
  85. package/es/Provider/IdProvider.js +2 -2
  86. package/es/Provider/LibraryContext.js +2 -2
  87. package/es/Provider/ZindexProvider.js +2 -2
  88. package/es/Provider/index.js +4 -4
  89. package/es/Radio/Radio.js +13 -13
  90. package/es/Radio/__tests__/Radio.spec.js +1 -1
  91. package/es/Responsive/CustomResponsive.js +7 -7
  92. package/es/Responsive/ResizeComponent.js +2 -2
  93. package/es/Responsive/Responsive.js +6 -6
  94. package/es/Responsive/index.js +3 -3
  95. package/es/Responsive/utils/index.js +1 -1
  96. package/es/Responsive/windowResizeObserver.js +1 -1
  97. package/es/ResponsiveDropBox/ResponsiveDropBox.js +8 -10
  98. package/es/ResponsiveDropBox/props/propTypes.js +1 -1
  99. package/es/Ribbon/Ribbon.js +3 -3
  100. package/es/Ribbon/__tests__/Ribbon.spec.js +1 -1
  101. package/es/RippleEffect/RippleEffect.js +4 -4
  102. package/es/RippleEffect/__tests__/RippleEffect.spec.js +1 -1
  103. package/es/Select/GroupSelect.js +19 -25
  104. package/es/Select/Select.js +20 -21
  105. package/es/Select/SelectWithAvatar.js +20 -26
  106. package/es/Select/SelectWithIcon.js +16 -22
  107. package/es/Select/index.js +4 -4
  108. package/es/Select/props/defaultProps.js +4 -7
  109. package/es/Select/props/propTypes.js +3 -6
  110. package/es/Stencils/Stencils.js +3 -3
  111. package/es/Stencils/__tests__/Stencils.spec.js +1 -1
  112. package/es/Switch/Switch.js +13 -13
  113. package/es/Switch/__tests__/Switch.spec.js +1 -1
  114. package/es/Tab/Tab.js +9 -10
  115. package/es/Tab/TabContent.js +4 -4
  116. package/es/Tab/TabContentWrapper.js +7 -8
  117. package/es/Tab/TabWrapper.js +5 -7
  118. package/es/Tab/Tabs.js +28 -28
  119. package/es/Tab/index.js +5 -5
  120. package/es/Tag/Tag.js +7 -7
  121. package/es/TextBox/TextBox.js +8 -8
  122. package/es/TextBoxIcon/TextBoxIcon.js +8 -10
  123. package/es/TextBoxIcon/props/propTypes.js +1 -1
  124. package/es/Textarea/Textarea.js +7 -9
  125. package/es/Tooltip/Tooltip.js +5 -5
  126. package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +3 -3
  127. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +7 -8
  128. package/es/VelocityAnimation/index.js +2 -2
  129. package/es/css.js +37 -37
  130. package/es/deprecated/PortalLayer/PortalLayer.js +11 -9
  131. package/es/index.js +39 -39
  132. package/es/semantic/Button/Button.js +3 -3
  133. package/es/semantic/index.js +1 -1
  134. package/es/utils/Common.js +1 -1
  135. package/es/utils/ContextOptimizer.js +1 -1
  136. package/es/utils/datetime/common.js +1 -1
  137. package/es/utils/dropDownUtils.js +1 -1
  138. package/es/utils/index.js +1 -1
  139. package/es/v1/Accordion/Accordion.js +2 -2
  140. package/es/v1/Accordion/AccordionItem.js +4 -4
  141. package/es/v1/Accordion/index.js +2 -2
  142. package/es/v1/Animation/Animation.js +3 -3
  143. package/es/v1/Animation/utils.js +1 -1
  144. package/es/v1/AppContainer/AppContainer.js +19 -18
  145. package/es/v1/Avatar/Avatar.js +9 -10
  146. package/es/v1/AvatarTeam/AvatarTeam.js +11 -11
  147. package/es/v1/Button/Button.js +9 -10
  148. package/es/v1/Button/props/defaultProps.js +1 -1
  149. package/es/v1/Buttongroup/Buttongroup.js +3 -3
  150. package/es/v1/Card/Card.js +5 -5
  151. package/es/v1/Card/index.js +4 -4
  152. package/es/v1/CheckBox/CheckBox.js +14 -14
  153. package/es/v1/DateTime/CalendarView.js +7 -7
  154. package/es/v1/DateTime/DateTime.js +15 -15
  155. package/es/v1/DateTime/DateTimePopupFooter.js +5 -5
  156. package/es/v1/DateTime/DateTimePopupHeader.js +4 -4
  157. package/es/v1/DateTime/DateWidget.js +17 -17
  158. package/es/v1/DateTime/DaysRow.js +3 -3
  159. package/es/v1/DateTime/Time.js +5 -5
  160. package/es/v1/DateTime/YearView.js +6 -6
  161. package/es/v1/DateTime/index.js +1 -1
  162. package/es/v1/DateTime/props/propTypes.js +1 -1
  163. package/es/v1/DropBox/DropBox.js +19 -20
  164. package/es/v1/DropBox/DropBoxElement/DropBoxElement.js +6 -6
  165. package/es/v1/DropBox/props/defaultProps.js +1 -1
  166. package/es/v1/DropBox/props/propTypes.js +1 -1
  167. package/es/v1/DropBox/utils/isMobilePopover.js +1 -1
  168. package/es/v1/DropDown/DropDown.js +6 -5
  169. package/es/v1/DropDown/DropDownHeading.js +3 -3
  170. package/es/v1/DropDown/DropDownItem.js +3 -3
  171. package/es/v1/DropDown/DropDownSearch.js +4 -4
  172. package/es/v1/DropDown/DropDownSeparator.js +2 -2
  173. package/es/v1/DropDown/props/propTypes.js +1 -1
  174. package/es/v1/Heading/Heading.js +3 -3
  175. package/es/v1/Label/Label.js +4 -4
  176. package/es/v1/Layout/Box.js +4 -4
  177. package/es/v1/Layout/Container.js +4 -4
  178. package/es/v1/Layout/index.js +2 -2
  179. package/es/v1/ListItem/ListContainer.js +12 -11
  180. package/es/v1/ListItem/ListItem.js +9 -10
  181. package/es/v1/ListItem/ListItemWithAvatar.js +11 -12
  182. package/es/v1/ListItem/ListItemWithCheckBox.js +10 -11
  183. package/es/v1/ListItem/ListItemWithIcon.js +9 -10
  184. package/es/v1/ListItem/ListItemWithRadio.js +10 -11
  185. package/es/v1/ListItem/index.js +6 -6
  186. package/es/v1/Modal/Modal.js +7 -8
  187. package/es/v1/MultiSelect/AdvancedGroupMultiSelect.js +17 -17
  188. package/es/v1/MultiSelect/AdvancedMultiSelect.js +25 -26
  189. package/es/v1/MultiSelect/EmptyState.js +3 -3
  190. package/es/v1/MultiSelect/MobileHeader/MobileHeader.js +5 -5
  191. package/es/v1/MultiSelect/MultiSelect.js +19 -19
  192. package/es/v1/MultiSelect/MultiSelectHeader.js +4 -4
  193. package/es/v1/MultiSelect/MultiSelectWithAvatar.js +20 -21
  194. package/es/v1/MultiSelect/SelectedOptions.js +11 -13
  195. package/es/v1/MultiSelect/Suggestions.js +12 -14
  196. package/es/v1/MultiSelect/index.js +4 -4
  197. package/es/v1/MultiSelect/props/defaultProps.js +1 -1
  198. package/es/v1/PopOver/PopOver.js +6 -6
  199. package/es/v1/Popup/Popup.js +6 -7
  200. package/es/v1/Radio/Radio.js +13 -13
  201. package/es/v1/ResponsiveDropBox/ResponsiveDropBox.js +8 -10
  202. package/es/v1/ResponsiveDropBox/props/propTypes.js +1 -1
  203. package/es/v1/Ribbon/Ribbon.js +3 -3
  204. package/es/v1/RippleEffect/RippleEffect.js +4 -4
  205. package/es/v1/Select/GroupSelect.js +16 -16
  206. package/es/v1/Select/Select.js +20 -21
  207. package/es/v1/Select/SelectWithAvatar.js +17 -17
  208. package/es/v1/Select/SelectWithIcon.js +13 -13
  209. package/es/v1/Select/index.js +4 -4
  210. package/es/v1/Select/props/defaultProps.js +1 -1
  211. package/es/v1/Stencils/Stencils.js +3 -3
  212. package/es/v1/Switch/Switch.js +13 -13
  213. package/es/v1/Tab/Tab.js +9 -10
  214. package/es/v1/Tab/TabContent.js +4 -4
  215. package/es/v1/Tab/TabContentWrapper.js +7 -8
  216. package/es/v1/Tab/TabWrapper.js +5 -7
  217. package/es/v1/Tab/Tabs.js +28 -28
  218. package/es/v1/Tab/index.js +5 -5
  219. package/es/v1/Tag/Tag.js +7 -7
  220. package/es/v1/TextBox/TextBox.js +8 -8
  221. package/es/v1/TextBoxIcon/TextBoxIcon.js +8 -10
  222. package/es/v1/TextBoxIcon/props/propTypes.js +1 -1
  223. package/es/v1/Textarea/Textarea.js +7 -9
  224. package/es/v1/Tooltip/Tooltip.js +5 -5
  225. package/es/v1/Typography/Typography.js +4 -4
  226. package/es/v1/Typography/css/cssJSLogic.js +1 -1
  227. package/es/v1/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +3 -3
  228. package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +7 -8
  229. package/es/v1/semantic/Button/Button.js +3 -3
  230. package/es/v1/semantic/index.js +1 -1
  231. package/lib/Card/Card.js +0 -3
  232. package/lib/ListItem/ListItem.js +2 -2
  233. package/lib/ListItem/ListItem.module.css +18 -85
  234. package/lib/ListItem/ListItemWithAvatar.js +3 -3
  235. package/lib/ListItem/ListItemWithIcon.js +2 -2
  236. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +3 -7
  237. package/lib/MultiSelect/AdvancedMultiSelect.js +5 -2
  238. package/lib/MultiSelect/MultiSelect.js +3 -8
  239. package/lib/MultiSelect/Suggestions.js +4 -8
  240. package/lib/MultiSelect/props/defaultProps.js +7 -9
  241. package/lib/MultiSelect/props/propTypes.js +8 -9
  242. package/lib/Select/GroupSelect.js +3 -8
  243. package/lib/Select/SelectWithAvatar.js +3 -8
  244. package/lib/Select/SelectWithIcon.js +3 -8
  245. package/lib/Select/props/defaultProps.js +3 -5
  246. package/lib/Select/props/propTypes.js +3 -6
  247. package/package.json +3 -3
  248. package/result.json +1 -1
@@ -1,32 +1,30 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
1
  /**** Libraries ****/
4
2
  import React from 'react';
5
- import { AdvancedMultiSelect_propTypes } from './props/propTypes';
6
- import { AdvancedMultiSelect_defaultProps } from './props/defaultProps';
3
+ import { AdvancedMultiSelect_propTypes } from "./props/propTypes";
4
+ import { AdvancedMultiSelect_defaultProps } from "./props/defaultProps";
7
5
  /**** Components ****/
8
6
 
9
- import { MultiSelectComponent } from './MultiSelect';
10
- import SelectedOptions from './SelectedOptions';
11
- import Suggestions from './Suggestions';
12
- import EmptyState from './EmptyState';
13
- import MultiSelectHeader from './MultiSelectHeader';
14
- import Popup from '../Popup/Popup';
15
- import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
16
- import { Container, Box } from '../Layout';
17
- import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
7
+ import { MultiSelectComponent } from "./MultiSelect";
8
+ import SelectedOptions from "./SelectedOptions";
9
+ import Suggestions from "./Suggestions";
10
+ import EmptyState from "./EmptyState";
11
+ import MultiSelectHeader from "./MultiSelectHeader";
12
+ import Popup from "../Popup/Popup";
13
+ import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
14
+ import { Container, Box } from "../Layout";
15
+ import Card, { CardContent, CardHeader, CardFooter } from "../Card/Card";
18
16
  import { Icon } from '@zohodesk/icons';
19
- import { getUniqueId } from '../Provider/IdProvider';
20
- import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
21
- import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
17
+ import { getUniqueId } from "../Provider/IdProvider";
18
+ import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
19
+ import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
22
20
  import Loader from '@zohodesk/svg/lib/Loader/Loader';
23
21
  /**** CSS ****/
24
22
 
25
- import style from './MultiSelect.module.css';
23
+ import style from "./MultiSelect.module.css";
26
24
  /**** Methods ****/
27
25
 
28
- import { getIsEmptyValue, getSearchString } from '../utils/Common.js';
29
- import { filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
26
+ import { getIsEmptyValue, getSearchString } from "../utils/Common.js";
27
+ import { filterSelectedOptions, makeGetIsShowClearIcon } from "../utils/dropDownUtils";
30
28
  /* eslint-disable react/sort-prop-types */
31
29
 
32
30
  /* eslint-disable react/no-unused-prop-types */
@@ -369,12 +367,16 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
369
367
  needEffect,
370
368
  disabledOptions,
371
369
  isLoading,
372
- dataSelectorId
370
+ dataSelectorId,
371
+ customClass
373
372
  } = this.props;
374
373
  let {
375
374
  SuggestionsProps = {},
376
375
  DropBoxProps = {}
377
376
  } = customProps;
377
+ let {
378
+ containerClass = ''
379
+ } = customClass;
378
380
  const {
379
381
  clearText = 'Clear all'
380
382
  } = i18nKeys;
@@ -409,7 +411,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
409
411
  });
410
412
  let isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
411
413
  return /*#__PURE__*/React.createElement("div", {
412
- className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
414
+ className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${containerClass}`,
413
415
  "data-id": dataIdMultiSelectComp,
414
416
  "data-test-id": dataIdMultiSelectComp,
415
417
  "data-title": isDisabled ? title : null,
@@ -488,7 +490,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
488
490
  let {
489
491
  tabletMode
490
492
  } = _ref2;
491
- return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
493
+ return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
492
494
  animationStyle: animationStyle,
493
495
  boxPosition: position || `${defaultDropBoxPosition}Center`,
494
496
  getRef: getContainerRef,
@@ -502,11 +504,11 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
502
504
  a11y: {
503
505
  role: 'listbox',
504
506
  ariaMultiselectable: true
505
- }
506
- }, DropBoxProps, {
507
+ },
508
+ ...DropBoxProps,
507
509
  alignBox: "row",
508
510
  isResponsivePadding: getFooter ? false : true
509
- }), isLoading ? /*#__PURE__*/React.createElement(Container, {
511
+ }, isLoading ? /*#__PURE__*/React.createElement(Container, {
510
512
  align: "both",
511
513
  className: style.loader
512
514
  }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
@@ -523,7 +525,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
523
525
  shrink: true,
524
526
  customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
525
527
  eleRef: this.suggestionContainerRef
526
- }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
528
+ }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
527
529
  suggestions: suggestions,
528
530
  selectedOptions: allselectedOptionIds,
529
531
  getRef: this.suggestionItemRef,
@@ -534,8 +536,9 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
534
536
  listItemSize: listItemSize,
535
537
  a11y: {
536
538
  role: 'option'
537
- }
538
- }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
539
+ },
540
+ ...SuggestionsProps
541
+ }) : /*#__PURE__*/React.createElement(EmptyState, {
539
542
  isLoading: isFetchingOptions,
540
543
  options: options,
541
544
  searchString: searchStr,
@@ -1,10 +1,10 @@
1
1
  /**** Libraries ****/
2
2
  import React from 'react';
3
- import { EmptyState_propTypes } from './props/propTypes';
4
- import { EmptyState_defaultProps } from './props/defaultProps';
3
+ import { EmptyState_propTypes } from "./props/propTypes";
4
+ import { EmptyState_defaultProps } from "./props/defaultProps";
5
5
  /**** CSS ****/
6
6
 
7
- import style from './MultiSelect.module.css';
7
+ import style from "./MultiSelect.module.css";
8
8
  export default class EmptyState extends React.PureComponent {
9
9
  render() {
10
10
  let {
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
- import Button from '../../Button/Button';
3
- import { Container, Box } from '../../Layout';
4
- import { defaultProps } from './props/defaultProps';
5
- import { propTypes } from './props/propTypes';
6
- import style from './MobileHeader.module.css';
2
+ import Button from "../../Button/Button";
3
+ import { Container, Box } from "../../Layout";
4
+ import { defaultProps } from "./props/defaultProps";
5
+ import { propTypes } from "./props/propTypes";
6
+ import style from "./MobileHeader.module.css";
7
7
  export default function MobileHeader(props) {
8
8
  let {
9
9
  i18nKeys,
@@ -1,37 +1,35 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
1
  /**** Libraries ****/
4
2
  import React from 'react';
5
- import { MultiSelect_propTypes } from './props/propTypes';
6
- import { MultiSelect_defaultProps } from './props/defaultProps';
7
- import { defaultProps as MobileHeader_defaultProps } from './MobileHeader/props/defaultProps';
3
+ import { MultiSelect_propTypes } from "./props/propTypes";
4
+ import { MultiSelect_defaultProps } from "./props/defaultProps";
5
+ import { defaultProps as MobileHeader_defaultProps } from "./MobileHeader/props/defaultProps";
8
6
  /**** Components ****/
9
7
 
10
- import Popup from '../Popup/Popup';
11
- import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
12
- import { Container, Box } from '../Layout';
13
- import Card, { CardContent, CardFooter, CardHeader } from '../Card/Card';
14
- import SelectedOptions from './SelectedOptions';
15
- import Suggestions from './Suggestions';
16
- import EmptyState from './EmptyState';
17
- import CssProvider from '../Provider/CssProvider';
18
- import { getUniqueId } from '../Provider/IdProvider';
19
- import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox'; // import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
20
-
21
- import MultiSelectHeader from './MultiSelectHeader';
8
+ import Popup from "../Popup/Popup";
9
+ import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
10
+ import { Container, Box } from "../Layout";
11
+ import Card, { CardContent, CardFooter, CardHeader } from "../Card/Card";
12
+ import SelectedOptions from "./SelectedOptions";
13
+ import Suggestions from "./Suggestions";
14
+ import EmptyState from "./EmptyState";
15
+ import CssProvider from "../Provider/CssProvider";
16
+ import { getUniqueId } from "../Provider/IdProvider";
17
+ import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox"; // import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
18
+
19
+ import MultiSelectHeader from "./MultiSelectHeader";
22
20
  import Loader from '@zohodesk/svg/lib/Loader/Loader';
23
- import isMobilePopover from '../DropBox/utils/isMobilePopover';
21
+ import isMobilePopover from "../DropBox/utils/isMobilePopover";
24
22
  /**** Icons ****/
25
23
 
26
24
  import { Icon } from '@zohodesk/icons';
27
25
  /**** CSS ****/
28
26
 
29
- import style from './MultiSelect.module.css';
27
+ import style from "./MultiSelect.module.css";
30
28
  /**** Methods ****/
31
29
 
32
- import { debounce, scrollTo, bind, getIsEmptyValue, getSearchString, findScrollEnd } from '../utils/Common.js';
33
- import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions, makeGetIsShowClearIcon } from '../utils/dropDownUtils';
34
- import MobileHeader from './MobileHeader/MobileHeader';
30
+ import { debounce, scrollTo, bind, getIsEmptyValue, getSearchString, findScrollEnd } from "../utils/Common.js";
31
+ import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions, makeGetIsShowClearIcon } from "../utils/dropDownUtils";
32
+ import MobileHeader from "./MobileHeader/MobileHeader";
35
33
  /* eslint-disable react/forbid-component-props */
36
34
 
37
35
  /* eslint-disable react/no-unused-prop-types */
@@ -992,12 +990,8 @@ export class MultiSelectComponent extends React.Component {
992
990
  boxSize,
993
991
  isLoading,
994
992
  selectAllText,
995
- needSelectAll,
996
- customProps
993
+ needSelectAll
997
994
  } = this.props;
998
- const {
999
- suggestionsProps = {}
1000
- } = customProps;
1001
995
  const {
1002
996
  selectedOptions,
1003
997
  searchStr,
@@ -1070,7 +1064,7 @@ export class MultiSelectComponent extends React.Component {
1070
1064
  eleRef: this.suggestionContainerRef
1071
1065
  }, isSearching ? /*#__PURE__*/React.createElement("div", {
1072
1066
  className: style[palette]
1073
- }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
1067
+ }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
1074
1068
  suggestions: suggestions,
1075
1069
  getRef: this.suggestionItemRef,
1076
1070
  hoverOption: hoverOption,
@@ -1083,7 +1077,7 @@ export class MultiSelectComponent extends React.Component {
1083
1077
  a11y: {
1084
1078
  role: 'option'
1085
1079
  }
1086
- }, suggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
1080
+ }) : /*#__PURE__*/React.createElement(EmptyState, {
1087
1081
  isLoading: isFetchingOptions,
1088
1082
  options: options,
1089
1083
  searchString: searchStr,
@@ -1,13 +1,13 @@
1
1
  /**** Libraries ****/
2
2
  import React from 'react';
3
- import { MultiSelectHeader_propTypes } from './props/propTypes';
4
- import { MultiSelectHeader_defaultProps } from './props/defaultProps';
3
+ import { MultiSelectHeader_propTypes } from "./props/propTypes";
4
+ import { MultiSelectHeader_defaultProps } from "./props/defaultProps";
5
5
  /**** Icons ****/
6
6
 
7
- import ListItemWithIcon from '../ListItem/ListItemWithIcon';
7
+ import ListItemWithIcon from "../ListItem/ListItemWithIcon";
8
8
  /**** CSS ****/
9
9
 
10
- import style from './MultiSelect.module.css';
10
+ import style from "./MultiSelect.module.css";
11
11
  export default class MultiSelectHeader extends React.PureComponent {
12
12
  render() {
13
13
  let {
@@ -1,29 +1,27 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
1
  /**** Libraries ****/
4
2
  import React from 'react';
5
- import { MultiSelectWithAvatar_propTypes } from './props/propTypes';
6
- import { MultiSelectWithAvatar_defaultProps } from './props/defaultProps';
7
- import { defaultProps as MobileHeader_defaultProps } from './MobileHeader/props/defaultProps';
3
+ import { MultiSelectWithAvatar_propTypes } from "./props/propTypes";
4
+ import { MultiSelectWithAvatar_defaultProps } from "./props/defaultProps";
5
+ import { defaultProps as MobileHeader_defaultProps } from "./MobileHeader/props/defaultProps";
8
6
  /**** Components ****/
9
7
 
10
- import { MultiSelectComponent } from './MultiSelect';
11
- import Popup from '../Popup/Popup';
12
- import { Container, Box } from '../Layout';
13
- import Card, { CardContent, CardHeader } from '../Card/Card';
14
- import Suggestions from './Suggestions';
15
- import EmptyState from './EmptyState';
16
- import CssProvider from '../Provider/CssProvider';
17
- import { getUniqueId } from '../Provider/IdProvider';
18
- import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox'; // import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
8
+ import { MultiSelectComponent } from "./MultiSelect";
9
+ import Popup from "../Popup/Popup";
10
+ import { Container, Box } from "../Layout";
11
+ import Card, { CardContent, CardHeader } from "../Card/Card";
12
+ import Suggestions from "./Suggestions";
13
+ import EmptyState from "./EmptyState";
14
+ import CssProvider from "../Provider/CssProvider";
15
+ import { getUniqueId } from "../Provider/IdProvider";
16
+ import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox"; // import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
19
17
 
20
18
  import Loader from '@zohodesk/svg/lib/Loader/Loader';
21
- import MultiSelectHeader from './MultiSelectHeader';
22
- import isMobilePopover from '../DropBox/utils/isMobilePopover';
19
+ import MultiSelectHeader from "./MultiSelectHeader";
20
+ import isMobilePopover from "../DropBox/utils/isMobilePopover";
23
21
  /**** CSS ****/
24
22
 
25
- import style from './MultiSelect.module.css';
26
- import MobileHeader from './MobileHeader/MobileHeader';
23
+ import style from "./MultiSelect.module.css";
24
+ import MobileHeader from "./MobileHeader/MobileHeader";
27
25
  /*eslint-disable react/sort-prop-types*/
28
26
 
29
27
  /* eslint-disable react/forbid-component-props */
@@ -157,7 +155,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
157
155
  shrink: true,
158
156
  customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
159
157
  eleRef: this.suggestionContainerRef
160
- }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
158
+ }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
161
159
  needTick: keepSelectedOptions,
162
160
  suggestions: suggestions,
163
161
  getRef: this.suggestionItemRef,
@@ -170,8 +168,9 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
170
168
  selectedOptions: selectedOptionIds,
171
169
  a11y: {
172
170
  role: 'option'
173
- }
174
- }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
171
+ },
172
+ ...SuggestionsProps
173
+ }) : /*#__PURE__*/React.createElement(EmptyState, {
175
174
  isLoading: isFetchingOptions,
176
175
  options: options,
177
176
  searchString: searchStr,
@@ -1,16 +1,14 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
1
  /**** Libraries ****/
4
2
  import React from 'react';
5
- import { SelectedOptions_propTypes } from './props/propTypes';
6
- import { SelectedOptions_defaultProps } from './props/defaultProps';
3
+ import { SelectedOptions_propTypes } from "./props/propTypes";
4
+ import { SelectedOptions_defaultProps } from "./props/defaultProps";
7
5
  /**** Components ****/
8
6
 
9
- import Tag from '../Tag/Tag';
10
- import { Box } from '../Layout';
7
+ import Tag from "../Tag/Tag";
8
+ import { Box } from "../Layout";
11
9
  /**** Style ****/
12
10
 
13
- import style from './SelectedOptions.module.css';
11
+ import style from "./SelectedOptions.module.css";
14
12
  /* eslint-disable react/forbid-component-props */
15
13
 
16
14
  export default class SelectedOptions extends React.PureComponent {
@@ -52,28 +50,28 @@ export default class SelectedOptions extends React.PureComponent {
52
50
  return /*#__PURE__*/React.createElement(Box, {
53
51
  className: `${style.tag} ${style[size]}`,
54
52
  key: `${id}photoTag`
55
- }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
53
+ }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
56
54
  active: highLightedSelectOptions.indexOf(id) >= 0,
57
55
  hasAvatar: true,
58
56
  imageURL: photoURL
59
- })));
57
+ }));
60
58
  } else if (optionType === 'icon') {
61
59
  return /*#__PURE__*/React.createElement(Box, {
62
60
  className: `${style.tag} ${style[size]}`,
63
61
  key: `${id}iconTag`
64
- }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
62
+ }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
65
63
  active: highLightedSelectOptions.indexOf(id) >= 0,
66
64
  iconName: icon,
67
65
  iconSize: iconSize
68
- })));
66
+ }));
69
67
  }
70
68
 
71
69
  return /*#__PURE__*/React.createElement(Box, {
72
70
  className: `${style.tag} ${style[size]}`,
73
71
  key: `${id}tag`
74
- }, /*#__PURE__*/React.createElement(Tag, _extends({}, commonProps, {
72
+ }, /*#__PURE__*/React.createElement(Tag, { ...commonProps,
75
73
  active: highLightedSelectOptions.indexOf(id) >= 0
76
- })));
74
+ }));
77
75
  }));
78
76
  }
79
77
 
@@ -1,15 +1,13 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
1
  /**** Libraries ****/
4
2
  import React from 'react';
5
- import { Suggestions_propTypes } from './props/propTypes';
6
- import { Suggestions_defaultProps } from './props/defaultProps';
3
+ import { Suggestions_propTypes } from "./props/propTypes";
4
+ import { Suggestions_defaultProps } from "./props/defaultProps";
7
5
  /**** Components ****/
8
6
 
9
- import ListItem from '../ListItem/ListItem';
10
- import ListItemWithAvatar from '../ListItem/ListItemWithAvatar';
11
- import ListItemWithIcon from '../ListItem/ListItemWithIcon';
12
- import { Container, Box } from '../Layout';
7
+ import ListItem from "../ListItem/ListItem";
8
+ import ListItemWithAvatar from "../ListItem/ListItemWithAvatar";
9
+ import ListItemWithIcon from "../ListItem/ListItemWithIcon";
10
+ import { Container, Box } from "../Layout";
13
11
  export default class Suggestions extends React.PureComponent {
14
12
  render() {
15
13
  const {
@@ -29,8 +27,7 @@ export default class Suggestions extends React.PureComponent {
29
27
  avatarPalette,
30
28
  palette,
31
29
  htmlId,
32
- a11y,
33
- needMultiLineText
30
+ a11y
34
31
  } = this.props;
35
32
  const {
36
33
  ariaParentRole,
@@ -77,7 +74,7 @@ export default class Suggestions extends React.PureComponent {
77
74
  }
78
75
 
79
76
  if (optionType === 'avatar') {
80
- return /*#__PURE__*/React.createElement(ListItemWithAvatar, _extends({}, commonProps, {
77
+ return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
81
78
  autoHover: false,
82
79
  getRef: getRef,
83
80
  highlight: isHighlight,
@@ -95,11 +92,10 @@ export default class Suggestions extends React.PureComponent {
95
92
  size: listItemSize,
96
93
  avatarPalette: avatarPalette,
97
94
  palette: palette,
98
- a11y: list_a11y,
99
- needMultiLineText: needMultiLineText
100
- }));
95
+ a11y: list_a11y
96
+ });
101
97
  } else if (optionType === 'icon') {
102
- return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({}, commonProps, {
98
+ return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
103
99
  autoHover: false,
104
100
  getRef: getRef,
105
101
  highlight: isHighlight,
@@ -116,12 +112,11 @@ export default class Suggestions extends React.PureComponent {
116
112
  iconSize: iconSize,
117
113
  size: listItemSize,
118
114
  palette: palette,
119
- a11y: list_a11y,
120
- needMultiLineText: needMultiLineText
121
- }));
115
+ a11y: list_a11y
116
+ });
122
117
  }
123
118
 
124
- return /*#__PURE__*/React.createElement(ListItem, _extends({}, commonProps, {
119
+ return /*#__PURE__*/React.createElement(ListItem, { ...commonProps,
125
120
  autoHover: false,
126
121
  getRef: getRef,
127
122
  highlight: isHighlight,
@@ -136,9 +131,8 @@ export default class Suggestions extends React.PureComponent {
136
131
  active: isActive,
137
132
  size: listItemSize,
138
133
  palette: palette,
139
- a11y: list_a11y,
140
- needMultiLineText: needMultiLineText
141
- }));
134
+ a11y: list_a11y
135
+ });
142
136
  })));
143
137
  }
144
138
 
@@ -1,4 +1,4 @@
1
- export { default as MultiSelect } from './MultiSelect';
2
- export { default as MultiSelectWithAvatar } from './MultiSelectWithAvatar';
3
- export { default as AdvancedMultiSelect } from './AdvancedMultiSelect';
4
- export { default as AdvancedGroupMultiSelect } from './AdvancedGroupMultiSelect';
1
+ export { default as MultiSelect } from "./MultiSelect";
2
+ export { default as MultiSelectWithAvatar } from "./MultiSelectWithAvatar";
3
+ export { default as AdvancedMultiSelect } from "./AdvancedMultiSelect";
4
+ export { default as AdvancedGroupMultiSelect } from "./AdvancedGroupMultiSelect";
@@ -1,4 +1,4 @@
1
- import { getLibraryConfig } from '../../Provider/Config';
1
+ import { getLibraryConfig } from "../../Provider/Config";
2
2
  export const AdvancedGroupMultiSelect_defaultProps = {
3
3
  animationStyle: 'bounce',
4
4
  autoComplete: getLibraryConfig('autoComplete'),
@@ -35,8 +35,7 @@ export const AdvancedGroupMultiSelect_defaultProps = {
35
35
  needEffect: true,
36
36
  palette: 'default',
37
37
  isLoading: false,
38
- dataSelectorId: 'advancedGroupMultiSelect',
39
- customProps: {}
38
+ dataSelectorId: 'advancedGroupMultiSelect'
40
39
  };
41
40
  export const AdvancedMultiSelect_defaultProps = {
42
41
  animationStyle: 'bounce',
@@ -67,7 +66,8 @@ export const AdvancedMultiSelect_defaultProps = {
67
66
  customProps: {},
68
67
  needEffect: true,
69
68
  isLoading: false,
70
- dataSelectorId: 'advancedMultiSelect'
69
+ dataSelectorId: 'advancedMultiSelect',
70
+ customClass: {}
71
71
  };
72
72
  export const EmptyState_defaultProps = {
73
73
  dataId: 'empty',
@@ -111,8 +111,7 @@ export const MultiSelect_defaultProps = {
111
111
  keepSelectedOptions: false,
112
112
  selectedOptionsCount: 0,
113
113
  cardHeaderName: '',
114
- needResponsive: true,
115
- customProps: {}
114
+ needResponsive: true
116
115
  };
117
116
  export const MultiSelectHeader_defaultProps = {
118
117
  dataId: 'MultiSelectHeader'
@@ -146,13 +145,12 @@ export const MultiSelectWithAvatar_defaultProps = {
146
145
  isLoading: false,
147
146
  dataSelectorId: 'multiSelectWithAvatar',
148
147
  keepSelectedOptions: false,
149
- needResponsive: true,
150
- customProps: {}
148
+ customProps: {},
149
+ needResponsive: true
151
150
  };
152
151
  export const SelectedOptions_defaultProps = {
153
152
  size: 'medium'
154
153
  };
155
154
  export const Suggestions_defaultProps = {
156
- a11y: {},
157
- needMultiLineText: false
155
+ a11y: {}
158
156
  };
@@ -104,8 +104,7 @@ export const MultiSelect_propTypes = {
104
104
  needSelectAll: PropTypes.bool,
105
105
  selectAllText: PropTypes.string,
106
106
  setAriaId: PropTypes.string,
107
- ariaErrorId: PropTypes.string,
108
- customProps: PropTypes.string
107
+ ariaErrorId: PropTypes.string
109
108
  };
110
109
  export const MultiSelectHeader_propTypes = {
111
110
  dataId: PropTypes.string,
@@ -169,8 +168,7 @@ export const Suggestions_propTypes = {
169
168
  logo: PropTypes.string,
170
169
  optionType: PropTypes.string,
171
170
  listItemProps: PropTypes.object
172
- })),
173
- needMultiLineText: PropTypes.bool
171
+ }))
174
172
  };
175
173
  export const AdvancedGroupMultiSelect_propTypes = {
176
174
  animationStyle: PropTypes.string,
@@ -236,8 +234,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
236
234
  needToCloseOnSelect: PropTypes.func,
237
235
  searchStr: PropTypes.string,
238
236
  children: PropTypes.node,
239
- dataSelectorId: PropTypes.string,
240
- customProps: PropTypes.string
237
+ dataSelectorId: PropTypes.string
241
238
  };
242
239
  export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
243
240
  selectedOptionDetails: PropTypes.string,
@@ -311,5 +308,6 @@ export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
311
308
  DropBoxProps: PropTypes.object
312
309
  }),
313
310
  isLoading: PropTypes.bool,
314
- dataSelectorId: PropTypes.string
311
+ dataSelectorId: PropTypes.string,
312
+ customClass: PropTypes.object
315
313
  };
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
- import { PopOver_defaultProps, PopOverContainer_defaultProps } from './props/defaultProps';
3
- import { PopOver_propTypes, PopOverTarget_propTypes, PopOverContainer_propTypes } from './props/propTypes';
4
- import Popup from '../Popup/Popup';
5
- import { Box } from '../Layout';
6
- import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
7
- import style from './PopOver.module.css';
2
+ import { PopOver_defaultProps, PopOverContainer_defaultProps } from "./props/defaultProps";
3
+ import { PopOver_propTypes, PopOverTarget_propTypes, PopOverContainer_propTypes } from "./props/propTypes";
4
+ import Popup from "../Popup/Popup";
5
+ import { Box } from "../Layout";
6
+ import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
7
+ import style from "./PopOver.module.css";
8
8
 
9
9
  class PopOver extends React.Component {
10
10
  constructor(props) {
@@ -1,3 +1,3 @@
1
- export { default as PopOver } from './PopOver';
2
- export { PopOverTarget } from './PopOver';
3
- export { PopOverContainer } from './PopOver';
1
+ export { default as PopOver } from "./PopOver";
2
+ export { PopOverTarget } from "./PopOver";
3
+ export { PopOverContainer } from "./PopOver";
package/es/Popup/Popup.js CHANGED
@@ -1,14 +1,12 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
1
  /**** Libraries ****/
4
2
  import React from 'react';
5
3
  import PropTypes from 'prop-types';
6
4
  import hoistStatics from 'hoist-non-react-statics';
7
5
  /**** Methods ****/
8
6
 
9
- import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from '../utils/Common.js';
10
- import viewPort from './viewPort';
11
- import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from './PositionMapping.json';
7
+ import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from "../utils/Common.js";
8
+ import viewPort from "./viewPort";
9
+ import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from "./PositionMapping.json";
12
10
  import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
13
11
  let lastOpenedGroup = [];
14
12
  let popups = {};
@@ -623,14 +621,15 @@ const Popup = function (Component) {
623
621
  isPopupOpen
624
622
  } = this.state;
625
623
  const localState = isPopupReady ? this.state : {};
626
- return /*#__PURE__*/React.createElement(Component, _extends({}, this.props, this.state, {
624
+ return /*#__PURE__*/React.createElement(Component, { ...this.props,
625
+ ...this.state,
627
626
  openPopupOnly: this.openPopupOnly,
628
627
  closePopupOnly: this.closePopupOnly,
629
628
  togglePopup: this.togglePopup,
630
629
  removeClose: this.removeClose,
631
630
  getTargetRef: this.getTargetRef,
632
631
  getContainerRef: this.getContainerRef
633
- }));
632
+ });
634
633
  }
635
634
 
636
635
  }
@@ -1,4 +1,4 @@
1
- import style from '../common/avatarsizes.module.css';
1
+ import style from "../common/avatarsizes.module.css";
2
2
  let styleList = {
3
3
  small: style.small,
4
4
  xsmall: style.xsmall,