@zohodesk/components 1.0.0-temp-199.25 → 1.0.0-temp-250

package/es/MultiSelect/props/propTypes.js

@@ -0,0 +1,316 @@
+import PropTypes from 'prop-types';
+export const EmptyState_propTypes = {
+  dataId: PropTypes.string,
+  emptyMessage: PropTypes.string,
+  getCustomEmptyState: PropTypes.func,
+  renderCustomEmptyState: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  palette: PropTypes.oneOf(['default', 'dark']),
+  isLoading: PropTypes.bool,
+  noMoreOptionsMessage: PropTypes.string,
+  options: PropTypes.array,
+  searchEmptyMessage: PropTypes.string,
+  searchString: PropTypes.string,
+  suggestions: PropTypes.array,
+  htmlId: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string
+  })
+};
+export const MultiSelect_propTypes = {
+  animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
+  closePopupOnly: PropTypes.func,
+  dataId: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  disableAction: PropTypes.bool,
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  emptyMessage: PropTypes.string.isRequired,
+  isVirtualizerEnabled: PropTypes.bool,
+  getContainerRef: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getPublicMethods: PropTypes.func,
+  getRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    searchText: PropTypes.string,
+    clearText: PropTypes.string,
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string,
+    limitReachedMessage: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  searchFields: PropTypes.arrayOf(PropTypes.string),
+  isAnimate: PropTypes.bool,
+  isBoxPaddingNeed: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupOpenOnEnter: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isSearchClearOnClose: PropTypes.bool,
+  isSearching: PropTypes.bool,
+  needAutoFocus: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needLocalSearch: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  needToCloseOnSelect: PropTypes.bool,
+  //For Group multiSelect
+  noMoreOptionsMessage: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onDropBoxClose: PropTypes.func,
+  onDropBoxOpen: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSearch: PropTypes.func,
+  openPopupOnly: PropTypes.func,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }))]).isRequired,
+  palette: PropTypes.oneOf(['default', 'dark']),
+  placeHolder: PropTypes.string,
+  position: PropTypes.string,
+  prefixText: PropTypes.string,
+  removeClose: PropTypes.func,
+  renderCustomEmptyState: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  searchDebounceTime: PropTypes.number,
+  searchEmptyMessage: PropTypes.string,
+  selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxClass: PropTypes.string,
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  textField: PropTypes.string,
+  title: PropTypes.string,
+  togglePopup: PropTypes.func,
+  valueField: PropTypes.string,
+  variant: PropTypes.string,
+  htmlId: PropTypes.string,
+  isSearchClearOnSelect: PropTypes.bool,
+  children: PropTypes.node,
+  customChildrenClass: PropTypes.string,
+  disabledOptions: PropTypes.arrayOf(PropTypes.string),
+  getFooter: PropTypes.func,
+  needEffect: PropTypes.bool,
+  boxSize: PropTypes.string,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string,
+  keepSelectedOptions: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  selectAllText: PropTypes.string,
+  setAriaId: PropTypes.string,
+  ariaErrorId: PropTypes.string,
+  customProps: PropTypes.shape({
+    TextBoxIconProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object
+  }),
+  isFocus: PropTypes.bool,
+  allowValueFallback: PropTypes.bool,
+  renderCustomClearComponent: PropTypes.func,
+  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  renderCustomSelectedValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  limit: PropTypes.number,
+  secondaryField: PropTypes.string
+};
+export const MultiSelectHeader_propTypes = {
+  dataId: PropTypes.string,
+  onSelect: PropTypes.func,
+  selectAllText: PropTypes.string,
+  suggestions: PropTypes.array
+};
+export const MultiSelectWithAvatar_propTypes = {
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string
+  }))]).isRequired,
+  imageField: PropTypes.string,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object,
+    DropBoxProps: PropTypes.object
+  }),
+  ...MultiSelect_propTypes
+};
+export const SelectedOptions_propTypes = {
+  getRef: PropTypes.func,
+  highLightedSelectOptions: PropTypes.array,
+  isReadOnly: PropTypes.bool,
+  onRemove: PropTypes.func,
+  onSelect: PropTypes.func,
+  selectedOptions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string,
+    logo: PropTypes.string,
+    optionType: PropTypes.string
+  })),
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  palette: PropTypes.string,
+  dataId: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  renderCustomSelectedValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  limit: PropTypes.number
+};
+export const Suggestions_propTypes = {
+  a11y: PropTypes.shape({
+    ariaParentRole: PropTypes.string,
+    ariaMultiselectable: PropTypes.bool
+  }),
+  activeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  avatarPalette: PropTypes.string,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  isVirtualizerEnabled: PropTypes.bool,
+  setVirtualizerContainerRefFunction: PropTypes.func,
+  getVirtualizerPublicMethods: PropTypes.func,
+  getRef: PropTypes.func,
+  hoverId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  hoverOption: PropTypes.number,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  needBorder: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  palette: PropTypes.string,
+  selectedOptions: PropTypes.array,
+  htmlId: PropTypes.string,
+  needMultiLineText: PropTypes.bool,
+  suggestions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string,
+    logo: PropTypes.string,
+    optionType: PropTypes.string,
+    listItemProps: PropTypes.object
+  })),
+  renderBeforeChildren: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  limit: PropTypes.number,
+  limitReachedMessage: PropTypes.string,
+  customClass: PropTypes.shape({
+    containerClass: PropTypes.string
+  }),
+  needMultiLineText: PropTypes.bool
+};
+export const AdvancedGroupMultiSelect_propTypes = {
+  animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  emptyMessage: PropTypes.string.isRequired,
+  getContainerRef: PropTypes.func,
+  getFooter: PropTypes.func,
+  groupedOptions: PropTypes.array.isRequired,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string,
+    limitReachedMessage: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  isDataLoaded: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isPadding: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  needBorder: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  notifyPopupToggle: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSearch: PropTypes.func,
+  placeHolder: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  renderCustomEmptyState: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  searchDebounceTime: PropTypes.number,
+  searchEmptyMessage: PropTypes.string,
+  selectAllText: PropTypes.string,
+  selectedGroupOptions: PropTypes.array.isRequired,
+  selectedOptionDetails: PropTypes.object,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  title: PropTypes.string,
+  variant: PropTypes.string,
+  htmlId: PropTypes.string,
+  isSearchClearOnSelect: PropTypes.bool,
+  palette: PropTypes.oneOf(['default', 'dark']),
+  needEffect: true,
+  dataSelectorId: PropTypes.string,
+  valueField: PropTypes.string,
+  textField: PropTypes.string,
+  getTargetRef: PropTypes.func,
+  togglePopup: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
+  needLocalSearch: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  getNextOptions: PropTypes.func,
+  isPopupOpenOnEnter: PropTypes.bool,
+  onChange: PropTypes.func,
+  needToCloseOnSelect: PropTypes.func,
+  searchStr: PropTypes.string,
+  children: PropTypes.node,
+  dataSelectorId: PropTypes.string,
+  isFocus: PropTypes.bool,
+  allowValueFallback: PropTypes.bool,
+  limit: PropTypes.number,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object
+  })
+};
+export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
+  selectedOptionDetails: PropTypes.string,
+  iconSize: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string
+  }))]).isRequired,
+  selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
+  selectedOptionsLimit: PropTypes.number,
+  getSelectedOptionDetails: PropTypes.func,
+  imageField: PropTypes.string,
+  iconName: PropTypes.string,
+  prefixText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  //For grouping multiSelect
+  optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
+  dataIdClearIcon: PropTypes.string,
+  dataIdLoading: PropTypes.string,
+  dataIdMultiSelectComp: PropTypes.string,
+  dataIdSelectAllEle: PropTypes.string,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object,
+    DropBoxProps: PropTypes.object
+  }),
+  customClass: PropTypes.object
+};

package/es/PopOver/PopOver.js

@@ -0,0 +1,211 @@
+import React from 'react';
+import { PopOver_defaultProps, PopOverContainer_defaultProps } from "./props/defaultProps";
+import { PopOver_propTypes, PopOverTarget_propTypes, PopOverContainer_propTypes } from "./props/propTypes";
+import Popup from "../Popup/Popup";
+import { Box } from "../Layout";
+import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
+import style from "./PopOver.module.css";
+
+class PopOver extends React.Component {
+  constructor(props) {
+    super(props);
+    this.popOverTargetRef = this.popOverTargetRef.bind(this);
+    this.popOverContainerRef = this.popOverContainerRef.bind(this);
+    this.togglePopup = this.togglePopup.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    let {
+      isPopupOpen,
+      onPopupOpen,
+      onPopupClose
+    } = this.props;
+
+    if (prevProps.isPopupOpen !== isPopupOpen) {
+      isPopupOpen && onPopupOpen && onPopupOpen();
+      !isPopupOpen && onPopupClose && onPopupClose();
+    }
+  }
+
+  popOverTargetRef(el) {
+    this.popOverTarget = el;
+    let {
+      getTargetRef
+    } = this.props;
+    getTargetRef(el);
+  }
+
+  popOverContainerRef(el) {
+    this.popOverContainer = el;
+    let {
+      getContainerRef
+    } = this.props;
+    getContainerRef(el);
+  }
+
+  togglePopup(e) {
+    let {
+      togglePopup,
+      boxPosition
+    } = this.props;
+    togglePopup(e, boxPosition);
+  }
+
+  render() {
+    let {
+      children,
+      isPopupOpen,
+      removeClose,
+      right,
+      left,
+      top,
+      bottom,
+      arrowRight,
+      arrowLeft,
+      arrowTop,
+      arrowBottom,
+      isAnimate,
+      isArrow,
+      arrowPosition,
+      position,
+      size,
+      onClick,
+      isPopupReady
+    } = this.props;
+    let childrens = React.Children.map(children, (child, index) => {
+      let element = index === 1 ? /*#__PURE__*/React.cloneElement(child, {
+        isPopupOpen,
+        togglePopup: this.togglePopup,
+        removeClose,
+        right,
+        left,
+        top,
+        bottom,
+        arrowRight,
+        arrowLeft,
+        arrowTop,
+        arrowBottom,
+        boxPosition: position,
+        isAnimate,
+        isArrow,
+        arrowPosition,
+        size,
+        onClick,
+        getRef: this.popOverContainerRef,
+        isPopupReady
+      }) : /*#__PURE__*/React.cloneElement(child, {
+        isPopupOpen,
+        togglePopup: this.togglePopup,
+        removeClose,
+        getRef: this.popOverTargetRef
+      });
+      return element;
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.popup
+    }, childrens);
+  }
+
+}
+
+PopOver.defaultProps = PopOver_defaultProps;
+PopOver.propTypes = PopOver_propTypes;
+export default Popup(PopOver);
+export class PopOverTarget extends React.Component {
+  constructor(props) {
+    super(props);
+    this.getRef = this.getRef.bind(this);
+  }
+
+  getRef(el) {
+    let {
+      getRef
+    } = this.props;
+    getRef(el);
+  }
+
+  render() {
+    let {
+      children,
+      togglePopup
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.target,
+      onClick: togglePopup,
+      ref: this.getRef
+    }, children);
+  }
+
+}
+PopOverTarget.propTypes = PopOverTarget_propTypes;
+export class PopOverContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+    this.getRef = this.getRef.bind(this);
+  }
+
+  getRef(el) {
+    let {
+      getRef
+    } = this.props;
+    getRef && getRef(el);
+  }
+
+  handleClick(e) {
+    let {
+      onClick,
+      removeClose
+    } = this.props;
+    removeClose && removeClose(e);
+    onClick && onClick();
+  }
+
+  render() {
+    let {
+      children,
+      isPopupOpen,
+      isAnimate,
+      isArrow,
+      size,
+      arrowPosition,
+      boxPosition,
+      right,
+      left,
+      top,
+      bottom,
+      arrowRight,
+      arrowLeft,
+      arrowTop,
+      arrowBottom,
+      animationStyle,
+      getRef
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      animationStyle: animationStyle,
+      arrowBottom: arrowBottom,
+      arrowLeft: arrowLeft,
+      arrowPosition: arrowPosition,
+      arrowRight: arrowRight,
+      arrowTop: arrowTop,
+      bottom: bottom,
+      boxPosition: boxPosition,
+      getRef: getRef,
+      isActive: isPopupOpen,
+      isAnimate: isAnimate,
+      isArrow: isArrow,
+      left: left,
+      right: right,
+      size: size,
+      top: top,
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      scroll: "vertical"
+    }, children));
+  }
+
+}
+PopOverContainer.defaultProps = PopOverContainer_defaultProps;
+PopOverContainer.propTypes = PopOverContainer_propTypes;

package/es/PopOver/PopOver.module.css

@@ -0,0 +1,9 @@
+.popup {
+  position: relative;
+  background-color: var(--zdt_popover_default_bg);
+}
+
+.target {
+  composes: offSelection from '../common/common.module.css';
+  cursor: pointer;
+}

package/es/PopOver/__tests__/PopOver.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import PopOver from "../PopOver";
+describe('PopOver', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(PopOver, null, /*#__PURE__*/React.createElement("div", null, "Test")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/PopOver/__tests__/__snapshots__/PopOver.spec.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PopOver rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/PopOver/index.js

@@ -0,0 +1,3 @@
+export { default as PopOver } from "./PopOver";
+export { PopOverTarget } from "./PopOver";
+export { PopOverContainer } from "./PopOver";

package/es/PopOver/props/defaultProps.js

@@ -0,0 +1,7 @@
+export const PopOver_defaultProps = {
+  isAnimate: false,
+  isArrow: false
+};
+export const PopOverContainer_defaultProps = {
+  isArrow: false
+};

package/es/PopOver/props/propTypes.js

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+export const PopOver_propTypes = {
+  arrowBottom: PropTypes.string,
+  arrowLeft: PropTypes.string,
+  arrowPosition: PropTypes.string,
+  arrowRight: PropTypes.string,
+  arrowTop: PropTypes.string,
+  bottom: PropTypes.string,
+  boxPosition: PropTypes.string,
+  children: PropTypes.node,
+  getContainerRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  isAnimate: PropTypes.bool,
+  isArrow: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  left: PropTypes.string,
+  onClick: PropTypes.func,
+  onPopupClose: PropTypes.func,
+  onPopupOpen: PropTypes.func,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  right: PropTypes.string,
+  size: PropTypes.string,
+  togglePopup: PropTypes.func,
+  top: PropTypes.string
+};
+export const PopOverTarget_propTypes = {
+  children: PropTypes.node,
+  getRef: PropTypes.func,
+  togglePopup: PropTypes.func
+};
+export const PopOverContainer_propTypes = {
+  animationStyle: PropTypes.string,
+  arrowBottom: PropTypes.string,
+  arrowLeft: PropTypes.string,
+  arrowPosition: PropTypes.string,
+  arrowRight: PropTypes.string,
+  arrowTop: PropTypes.string,
+  bottom: PropTypes.string,
+  boxPosition: PropTypes.string,
+  children: PropTypes.node,
+  getRef: PropTypes.func,
+  isAnimate: PropTypes.bool,
+  isArrow: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  left: PropTypes.string,
+  onClick: PropTypes.func,
+  removeClose: PropTypes.func,
+  right: PropTypes.string,
+  size: PropTypes.string,
+  top: PropTypes.string
+};

package/es/Popup/Popup.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import DotkitPopup from '@zohodesk/dotkit/es/react/components/Popup/Popup';
+import { getLibraryConfig } from "../Provider/Config.js";
+import { DUMMY_ARRAY, DUMMY_OBJECT } from "./../utils/Common.js";
+import Registry from '@zohodesk/dotkit/es/react/components/Popup/Registry.js';
+global.closeGroupPopups = Registry.closeAllPopupsInGroup;
+
+const Popup = function (Component) {
+  let group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'global';
+  let needResizeHandling = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DUMMY_OBJECT;
+  const {
+    isAbsolutePositioningNeeded = true,
+    isArrow = false,
+    customOrder = DUMMY_ARRAY,
+    scrollDebounceTime = 0,
+    closeOnScroll = false,
+    isOutsideScrollBlocked = false
+  } = options;
+
+  const getRootElement = () => {
+    return getLibraryConfig('getRootElement');
+  };
+
+  const getMobileWidth = () => {
+    return getLibraryConfig('mobileWidth');
+  };
+
+  const middleware = {
+    useAbsolutePositioning: isAbsolutePositioningNeeded,
+    positionOrder: customOrder,
+    isArrow,
+    scrollDebounceTime,
+    closeOnScroll,
+    isOutsideScrollBlocked,
+    enableResizeHandling: needResizeHandling
+  };
+  const popupConfig = {
+    group,
+    getMobileWidth,
+    getRootElement,
+    middleware
+  };
+  return DotkitPopup(Component, popupConfig);
+};
+
+export default Popup;