@zohodesk/components 1.0.0-temp-203.2 → 1.0.0-temp-204

package/es/Tab/Tabs.js

@@ -8,6 +8,7 @@
     }]
 */
 import React from 'react';
+import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
 import Tab from './Tab';
 import { Tabs_defaultProps } from './props/defaultProps';
 import { Tabs_propTypes } from './props/propTypes';
@@ -18,6 +19,7 @@ import ListItem from '../ListItem/ListItem';
 import { Icon } from '@zohodesk/icons';
 import tabsStyle from './Tabs.module.css';
 import Popup from '../Popup/Popup';
+import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import btnstyle from '../semantic/Button/semanticButton.module.css';
@@ -30,9 +32,10 @@ class Tabs extends React.Component {
       tabDimensions: {},
       highlightInitialDimension: null,
       renderVirtualTabs: true,
-      tabKeys: []
+      tabKeys: [],
+      searchValue: ''
     };
-    bind.apply(this, ['moreTabSelect', 'onResize', 'onTabResize', 'getHighlightRef', 'getTabsRef', 'getTabRef', 'getHighlightDim', 'onSizeChange', 'onScroll', 'togglePopup', 'setMaxDim']);
+    bind.apply(this, ['moreTabSelect', 'onResize', 'onTabResize', 'getHighlightRef', 'getTabsRef', 'getTabRef', 'getHighlightDim', 'onSizeChange', 'onScroll', 'togglePopup', 'setMaxDim', 'handleChange', 'handleSearchValueClear', 'getMoreList', 'renderEmptyState']);
     this.tabsObserver = new ResizeObserver(this.onResize);
     this.tabObserver = {};
   }
@@ -130,12 +133,14 @@ class Tabs extends React.Component {
     let {
       children,
       selectedTab,
-      childType
+      childType,
+      isPopupOpen
     } = this.props;
     let {
       tabDimensions,
       totalDimension,
-      tabKeys
+      tabKeys,
+      searchValue
     } = this.state;
 
     if (prevProps.children && children) {
@@ -169,6 +174,10 @@ class Tabs extends React.Component {
       if (prevProps.selectedTab !== selectedTab || newTabKeys.length === 1) {
         this.moveHighlight();
       }
+
+      if (prevProps.isPopupOpen != isPopupOpen && searchValue.length) {
+        this.handleSearchValueClear();
+      }
     }
   }
 
@@ -373,6 +382,7 @@ class Tabs extends React.Component {
 
     e.preventDefault();
     onSelect(tab);
+    this.togglePopup();
   }
 
   onScroll(e) {
@@ -407,6 +417,69 @@ class Tabs extends React.Component {
     };
   }
 
+  handleChange(value, e) {
+    this.setState({
+      searchValue: value
+    });
+  }
+
+  handleSearchValueClear(e) {
+    this.setState({
+      searchValue: ''
+    });
+  }
+
+  getMoreList(_ref2) {
+    let {
+      moreTabs
+    } = _ref2;
+    const valideElements = [];
+    {
+      React.Children.map(moreTabs, child => {
+        const isValidElement = /*#__PURE__*/React.isValidElement(child);
+
+        if (isValidElement) {
+          valideElements.push(child.props);
+        }
+      });
+    }
+    return valideElements;
+  }
+
+  handleFilterSuggestions(_ref3) {
+    let {
+      moreTabs
+    } = _ref3;
+    const {
+      searchValue
+    } = this.state;
+    const options = this.getMoreList({
+      moreTabs
+    });
+    const filteredOptions = options.filter(list => {
+      const {
+        id = ''
+      } = list;
+      const value = id;
+      return value.toLowerCase().includes(searchValue);
+    });
+    return filteredOptions;
+  }
+
+  renderEmptyState() {
+    const {
+      searchErrorText
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: tabsStyle.emptyStateContainer
+    }, /*#__PURE__*/React.createElement(EmptySearch, {
+      size: "small"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: tabsStyle.emptyStateTitle
+    }, searchErrorText));
+    return ''; // return <EmptySearch size='small' />;
+  }
+
   renderTabs(mainTabs, moreTabs, isVirtual) {
     let {
       selectedTab,
@@ -434,14 +507,26 @@ class Tabs extends React.Component {
       customProps,
       getCustomDropBoxHeaderPlaceHolder,
       dataSelectorId,
-      dataId
+      dataId,
+      placeHolderText,
+      searchBoxSize,
+      ariaTitleId,
+      TextBoxIconProps,
+      removeClose
     } = this.props;
+    const {
+      searchValue
+    } = this.state;
     let {
       DropBoxProps = {},
       ListItemProps = {},
       MoreButtonProps = {}
     } = customProps;
     let popupClass = align === 'vertical' ? tabsStyle[position] ? tabsStyle[position] : '' : '';
+    const listItemArray = this.handleFilterSuggestions({
+      moreTabs
+    });
+    const isSearch = moreTabs.length > 4;
     return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.map(mainTabs, child => {
       if (!child) {
         return null;
@@ -491,10 +576,10 @@ class Tabs extends React.Component {
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref2 => {
+    }, _ref4 => {
       let {
         tabletMode
-      } = _ref2;
+      } = _ref4;
       return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         isActive: isPopupReady,
         isAnimate: true,
@@ -504,25 +589,44 @@ class Tabs extends React.Component {
         },
         boxPosition: position,
         getRef: getContainerRef,
-        isBoxPaddingNeed: true,
+        isBoxPaddingNeed: false,
         isArrow: false,
         ...DropBoxProps,
         isResponsivePadding: true,
         needFocusScope: true,
-        onClose: this.togglePopup,
-        dataId: `${dataId}_dropbox`
-      }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
+        dataId: `${dataId}_dropbox`,
+        onClick: removeClose
+      }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), isSearch ? /*#__PURE__*/React.createElement(Box, {
+        className: tabsStyle.search
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+        placeHolder: placeHolderText,
+        onChange: this.handleChange,
+        value: searchValue,
+        onClear: this.handleSearchValueClear,
+        size: searchBoxSize,
+        customProps: {
+          TextBoxProps: {
+            'data-a11y-autofocus': true
+          }
+        } //search
+        ,
+        dataId: `${dataId}_search`,
+        a11y: {
+          role: 'combobox',
+          ariaOwns: ariaTitleId,
+          ariaAutocomplete: 'list',
+          ariaHaspopup: true,
+          ariaExpanded: true
+        },
+        ...TextBoxIconProps
+      })) : null, /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         shrink: true,
         scroll: "vertical",
-        className: `${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
+        className: `${tabsStyle.listWrapper} ${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
         onScroll: this.onScroll,
         dataId: `${dataId}_Tabs`
-      }, React.Children.map(moreTabs, child => {
-        if (!child) {
-          return null;
-        }
-
+      }, listItemArray.length ? listItemArray.map(data => {
         let {
           text,
           id,
@@ -531,9 +635,9 @@ class Tabs extends React.Component {
           href,
           children,
           dataId
-        } = child.props;
+        } = data;
         const value = text ? text : showTitleInMoreOptions ? title : null;
-        return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, {
+        return /*#__PURE__*/React.createElement(ListItem, {
           key: id,
           value: value,
           onClick: this.moreTabSelect,
@@ -549,7 +653,7 @@ class Tabs extends React.Component {
           dataId: `${dataId}_Tab`,
           ...ListItemProps
         }, !showTitleInMoreOptions ? children : null);
-      })));
+      }) : this.renderEmptyState()));
     })) : null);
   }
 

package/es/Tab/Tabs.module.css

@@ -123,15 +123,46 @@
 .bottomRightToLeft,
 .topRightToLeft,
 .bottomCenterToLeft {
-  right: calc(var(--tab_position_gap) * -1); 
+  right: calc(var(--tab_position_gap) * -1);
 }
 
 .bottomLeftToRight,
 .topLeftToRight,
 .bottomCenterToRight {
-  left: calc(var(--tab_position_gap) * -1); 
+  left: calc(var(--tab_position_gap) * -1);
 }
 
 .hidden {
   visibility: hidden;
+}
+
+.search {
+  padding: 0 var(--zd_size20) 0 ;
+}
+
+.emptyStateContainer {
+  padding-bottom: var(--zd_size25);
+}
+
+.emptyStateTitle {
+  font-family: var(--zd_semibold);
+  color: var(--zdt_commonEmptyState_default_title);
+  word-wrap: break-word;
+  font-size: var(--zd_font_size16) ;
+  max-width: var(--zd_size430) ;
+  text-align: center;
+}
+
+[dir=ltr] .emptyStateTitle {
+  margin-left: auto ;
+  margin-right: auto ;
+}
+
+[dir=rtl] .emptyStateTitle {
+  margin-right: auto ;
+  margin-left: auto ;
+}
+
+.listWrapper {
+  padding: var(--zd_size10) 0 ;
 }

package/es/Tab/props/defaultProps.js

@@ -30,7 +30,9 @@ export const Tabs_defaultProps = {
   iconSize: '7',
   containerClass: '',
   customProps: {},
-  dataSelectorId: 'tabs'
+  dataSelectorId: 'tabs',
+  searchBoxSize: 'small',
+  searchErrorText: 'No results'
 };
 export const TabWrapper_defaultProps = {
   hookToDisableInternalState: false,

package/es/Tab/props/propTypes.js

@@ -89,7 +89,12 @@ export const Tabs_propTypes = {
     MoreButtonProps: PropTypes.object
   }),
   getCustomDropBoxHeaderPlaceHolder: PropTypes.func,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  placeHolderText: PropTypes.string,
+  searchBoxSize: PropTypes.string,
+  ariaTitleId: PropTypes.string,
+  TextBoxIconProps: PropTypes.object,
+  searchErrorText: PropTypes.string
 };
 export const TabWrapper_propTypes = {
   align: PropTypes.oneOf(['vertical', 'horizontal']),

package/es/Tag/Tag.js

@@ -80,6 +80,7 @@ export default class Tag extends PureComponent {
       tooltip,
       avatarPalette,
       customClass,
+      customAttributes,
       a11y,
       needEffect,
       isReadOnly
@@ -105,7 +106,8 @@ export default class Tag extends PureComponent {
       "data-title": tooltip ? tooltip : text,
       tabIndex: disabled ? '-1' : '0',
       "aria-labelledby": getAriaId,
-      "data-selector-id": dataSelectorId
+      "data-selector-id": dataSelectorId,
+      ...customAttributes
     }, hasAvatar ? /*#__PURE__*/React.createElement("div", {
       className: style.avatar
     }, /*#__PURE__*/React.createElement(Avatar, {

package/es/Tag/__tests__/Tag.spec.js

@@ -232,4 +232,14 @@ describe('Tag component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with customAttributes prop', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Tag, {
+      customAttributes: {
+        'data-custom-attribute': 'true'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -3052,3 +3052,23 @@ exports[`Tag component rendering the Custom class 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Tag component rendering with customAttributes prop 1`] = `
+<DocumentFragment>
+  <div
+    aria-labelledby="1"
+    class="container effect    medium lgRadius default   "
+    data-custom-attribute="true"
+    data-id="tag_Tag"
+    data-selector-id="tag"
+    data-test-id="tag_Tag"
+    tabindex="0"
+  >
+    <div
+      aria-hidden="true"
+      class="text mediumtext"
+      id="1"
+    />
+  </div>
+</DocumentFragment>
+`;

package/es/Tag/props/defaultProps.js

@@ -7,6 +7,7 @@ export const defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
+  customAttributes: {},
   a11y: {},
   needEffect: true,
   isReadOnly: false,

package/es/Tag/props/propTypes.js

@@ -26,6 +26,7 @@ export const propTypes = {
     customTagIcon: PropTypes.string,
     customAvatar: PropTypes.string
   }),
+  customAttributes: PropTypes.object,
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
   }),

package/es/TextBoxIcon/TextBoxIcon.js

@@ -18,6 +18,7 @@ export default class TextBoxIcon extends React.Component {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleRef = this.handleRef.bind(this);
     this.handleClear = this.handleClear.bind(this);
+    this.handleInputFocusOnClick = this.handleInputFocusOnClick.bind(this);
   }
 
   handleRef(ele) {
@@ -63,6 +64,12 @@ export default class TextBoxIcon extends React.Component {
     onBlur && onBlur(e);
   }
 
+  handleInputFocusOnClick() {
+    this.inputEle && this.inputEle.focus({
+      preventScroll: true
+    });
+  }
+
   render() {
     const {
       type,
@@ -100,7 +107,9 @@ export default class TextBoxIcon extends React.Component {
       isFocus,
       onClearMouseDown,
       isScrollPrevent,
-      customProps
+      customProps,
+      needInputFocusOnWrapperClick,
+      renderRightPlaceholderNode
     } = this.props;
     const {
       isActive
@@ -122,7 +131,8 @@ export default class TextBoxIcon extends React.Component {
       isCover: false,
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : style.readonly : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       dataSelectorId: dataSelectorId,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      onClick: needInputFocusOnWrapperClick && !isDisabled ? this.handleInputFocusOnClick : null
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(TextBox, { ...this.props,
@@ -172,7 +182,7 @@ export default class TextBoxIcon extends React.Component {
       size: "14"
     }))) : null, children ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.icon} ${iconRotated ? style.rotated : ''}`
-    }, children) : null)), needBorder && /*#__PURE__*/React.createElement("div", {
+    }, children) : null, renderRightPlaceholderNode ? /*#__PURE__*/React.createElement(Box, null, renderRightPlaceholderNode) : null)), needBorder && /*#__PURE__*/React.createElement("div", {
       className: `${style.line} ${style[`borderColor_${borderColor}`]} ${customTBoxLine}`
     }));
   }

package/es/TextBoxIcon/props/defaultProps.js

@@ -10,6 +10,7 @@ export const defaultProps = {
   needReadOnlyStyle: true,
   isClickable: false,
   needEffect: true,
+  needInputFocusOnWrapperClick: false,
   dataId: 'textBoxIcon',
   borderColor: 'default',
   showClearIcon: false,

package/es/TextBoxIcon/props/propTypes.js

@@ -20,6 +20,7 @@ export const propTypes = { ...TextBox_propTypes,
   needBorder: PropTypes.bool,
   needEffect: PropTypes.bool,
   needReadOnlyStyle: PropTypes.bool,
+  needInputFocusOnWrapperClick: PropTypes.bool,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   onClear: PropTypes.func,
@@ -48,5 +49,6 @@ export const propTypes = { ...TextBox_propTypes,
   isScrollPrevent: PropTypes.bool,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object
-  })
+  }),
+  renderRightPlaceholderNode: PropTypes.node
 };

package/es/{Select → select}/Select.js

@@ -749,7 +749,8 @@ export class SelectComponent extends Component {
     let {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
-      SuggestionsProps = {}
+      SuggestionsProps = {},
+      TextBoxIconProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${isParentBased || isReadOnly || isDisabled ? style.container : ''} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
@@ -803,14 +804,15 @@ export class SelectComponent extends Component {
           'data-title': title || selected,
           ...TextBoxProps
         }
-      }
+      },
+      ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
+      isInline: true,
+      isCover: false,
       alignBox: "row",
-      align: "both"
-    }, children ? /*#__PURE__*/React.createElement(Box, {
-      className: isPopupOpen ? style.rotate : '',
-      dataId: `${dataId}_children`
-    }, children) : null, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: style.rightPlaceholder
+    }, /*#__PURE__*/React.createElement(Container, {
       align: "both",
       dataId: `${dataId}_downIcon`,
       "aria-hidden": true,
@@ -818,7 +820,10 @@ export class SelectComponent extends Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down",
       size: "7"
-    })))) : /*#__PURE__*/React.createElement(Textbox, {
+    })), children ? /*#__PURE__*/React.createElement(Box, {
+      className: isPopupOpen ? style.rotate : '',
+      dataId: `${dataId}_children`
+    }, children) : null)) : /*#__PURE__*/React.createElement(Textbox, {
       a11y: {
         role: 'Menuitem',
         ariaLabel: TextBox_ally_label,

package/es/{Select → select}/Select.module.css

@@ -117,6 +117,9 @@
 .rotate {
   transform: rotateX(180deg);
 }
+.rightPlaceholder{
+  height: 100% ;
+}
 
 .iconOnHoverStyle .arrowIcon,
 .iconOnHoverReadonly .arrowIcon,

package/es/{Select → select}/SelectWithIcon.js

@@ -345,7 +345,8 @@ class SelectWithIcon extends Component {
       i18nKeys,
       htmlId,
       isLoading,
-      dataSelectorId
+      dataSelectorId,
+      customProps
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -359,6 +360,11 @@ class SelectWithIcon extends Component {
     } = this.state;
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
+    let {
+      TextBoxProps = {},
+      DropdownSearchTextBoxProps = {},
+      TextBoxIconProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-title": isDisabled ? title : null,
@@ -413,10 +419,21 @@ class SelectWithIcon extends Component {
       needEffect: isReadOnly || isDisabled ? false : true,
       borderColor: borderColor,
       autoComplete: false,
-      isFocus: isPopupReady
+      isFocus: isPopupReady,
+      customProps: {
+        TextBoxProps: {
+          'data-title': title || selectedValue,
+          ...TextBoxProps
+        }
+      },
+      ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
+      isInline: true,
+      isCover: false,
       align: "both",
-      dataId: `${dataId}_downIcon`
+      dataId: `${dataId}_downIcon`,
+      alignBox: "both",
+      className: style.rightPlaceholder
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down",
       size: "7"
@@ -467,7 +484,10 @@ class SelectWithIcon extends Component {
         a11y: {
           ariaDescribedby: ariaErrorId
         },
-        autoComplete: false
+        autoComplete: false,
+        customProps: {
+          TextBoxProps: DropdownSearchTextBoxProps
+        }
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         customClass: `${tabletMode ? style.responsivedropBoxList : style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''}`,
         shrink: true,

package/es/{Select → select}/__tests__/__snapshots__/Select.spec.js.snap

@@ -62,7 +62,7 @@ exports[`Select rendering the defult props 1`] = `
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir both"
+                class="rightPlaceholder inflex rowdir both"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"

package/{lib/Select → es/select}/__tests__/__snapshots__/SelectWithIcon.spec.js.snap

@@ -79,7 +79,7 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover coldir both"
+                    class="rightPlaceholder inflex both"
                     data-id="selectWithIcon_downIcon"
                     data-selector-id="container"
                     data-test-id="selectWithIcon_downIcon"

package/es/{Select → select}/props/defaultProps.js

@@ -116,5 +116,6 @@ export const SelectWithIcon_defaultProps = {
   needIcon: true,
   iconSize: '14',
   i18nKeys: {},
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };

package/es/{Select → select}/props/propTypes.js

@@ -80,6 +80,7 @@ export const Select_propTypes = {
   iconOnHover: PropTypes.bool,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
+    TextBoxIconProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
     listItemProps: PropTypes.object,
     SuggestionsProps: PropTypes.object
@@ -284,5 +285,10 @@ export const SelectWithIcon_propTypes = {
   searchBoxSize: PropTypes.string,
   needResponsive: PropTypes.bool,
   boxSize: PropTypes.string,
-  emptyMessage: PropTypes.string
+  emptyMessage: PropTypes.string,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object,
+    DropdownSearchTextBoxProps: PropTypes.object,
+    TextBoxIconProps: PropTypes.object
+  })
 };

package/es/v1/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import useDropboxPosCalc from '../../../DropBox/DropBoxElement/useDropboxPosCalc';
 import cssJSLogic from '../../../DropBox/DropBoxElement/css/cssJSLogic';
-import { positionMapping } from '../../../DropBox/DropBoxPositionMapping.json';
+import { positionMapping } from '../../../DropBox/DropBoxPositionMapping.js';
 import { DropBoxElementDefaultProps } from './props/defaultProps';
 import { DropBoxElementPropTypes } from './props/propTypes';
 import { mergeStyle } from '@zohodesk/utils';