@zohodesk/dot 1.9.2 → 1.9.3

package/es/lookup/Lookup/Lookup.js

@@ -1,3 +1,5 @@
+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); }
+
 /*** Libraries ***/
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
@@ -77,7 +79,7 @@ export default class Lookup extends Component {
       needFocusLoop = true,
       needEnterAction = true
     } = focusScopeProps;
-    const content = /*#__PURE__*/React.createElement("div", {
+    const content = /*#__PURE__*/React.createElement("div", _extends({
       ref: this.createRef,
       tabIndex: "-1",
       "data-a11y-need-focus-style": "false",
@@ -89,9 +91,8 @@ export default class Lookup extends Component {
       id: htmlId,
       className: `${style.box} ${style[`${size}Size`]} ${lookupClass ? lookupClass : ''}`,
       "data-id": dataId,
-      "data-test-id": dataId,
-      ...a11yAttributes
-    }, /*#__PURE__*/React.createElement(Container, {
+      "data-test-id": dataId
+    }, a11yAttributes), /*#__PURE__*/React.createElement(Container, {
       "data-drag-container": "true",
       isCover: false,
       className: `${isMinHeight ? style.wrapper : style.coverwrap} ${style.containerWidth} ${containerClass}`

package/es/lookup/header/Search/Search.js

@@ -1,3 +1,5 @@
+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); }
+
 /* eslint-disable react/forbid-component-props */
 
 /*** Libraries ***/
@@ -103,11 +105,7 @@ export default class Search extends Component {
       isArrow: false,
       isToggleStateNeeded: true,
       selectedId: selectedId
-    }, /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
-      ...searchUIExtraProps
-    })) : /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
-      ...searchUIExtraProps
-    });
+    }, /*#__PURE__*/React.createElement(SearchUI, _extends({}, this.props, searchUIExtraProps))) : /*#__PURE__*/React.createElement(SearchUI, _extends({}, this.props, searchUIExtraProps));
   }
 
 }

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -1,3 +1,5 @@
+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); }
+
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes, UI_propTypes, new_propTypes } from "./props/propTypes";
@@ -113,7 +115,7 @@ export default class GlobalNotification extends React.Component {
       closeTitle = 'Close'
     } = i18nKeys;
     const notificationData = this.getNotificationData();
-    return /*#__PURE__*/React.createElement(GlobalNotificationUI, { ...notificationData,
+    return /*#__PURE__*/React.createElement(GlobalNotificationUI, _extends({}, notificationData, {
       hideMessage: hideMessage,
       onClick: onClick,
       closeTitle: closeTitle,
@@ -123,7 +125,7 @@ export default class GlobalNotification extends React.Component {
       onClose: this.onClose,
       needShadow: shadowClose && needShadow,
       eleRef: eleRef
-    });
+    }));
   }
 
 }
@@ -158,7 +160,7 @@ export function GlobalNotificationUI(props) {
   let {
     ExtraProps = {}
   } = customProps;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({
     ref: eleRef,
     className: ` ${style.message} 
         ${needShadow && shadowCount >= 2 ? shadowCount > 2 ? `${style.stackShadowTwo} ${style.stackShadowOne}` : style.stackShadowOne : ''}
@@ -167,9 +169,8 @@ export function GlobalNotificationUI(props) {
     "data-id": `show_${type}_message`,
     "data-test-id": `show_${type}_message`,
     tabIndex: 0,
-    "data-selector-id": dataSelectorId,
-    ...ExtraProps
-  }, /*#__PURE__*/React.createElement(Container, {
+    "data-selector-id": dataSelectorId
+  }, ExtraProps), /*#__PURE__*/React.createElement(Container, {
     className: `${style.container}`,
     alignBox: "row",
     isCover: false,
@@ -201,8 +202,8 @@ export function GlobalNotificationUI(props) {
 }
 GlobalNotificationUI.propTypes = UI_propTypes;
 export function GlobalNotificationNew(props) {
-  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
     Element: GlobalNotificationUI
-  });
+  }));
 }
 GlobalNotificationNew.propTypes = new_propTypes;

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -1,3 +1,5 @@
+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); }
+
 /**** Libraries ****/
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
@@ -121,7 +123,7 @@ export default class AlertLookup extends Component {
       ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
       ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
     };
-    return /*#__PURE__*/React.createElement(Lookup, {
+    return /*#__PURE__*/React.createElement(Lookup, _extends({
       onClose: onEsc == 'close' ? onClose : onCancelClick,
       needFocusScope: true,
       isActive: isActive,
@@ -131,9 +133,8 @@ export default class AlertLookup extends Component {
       onClick: onLookupClick,
       customClass: containerClass,
       a11y: a11y,
-      childAnimationName: childAnimationName,
-      ...LookupProps
-    }, /*#__PURE__*/React.createElement(Container, {
+      childAnimationName: childAnimationName
+    }, LookupProps), /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: align,
       wrap: "wrap"
@@ -142,15 +143,14 @@ export default class AlertLookup extends Component {
       className: style.section
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "column"
-    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, {
+    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, _extends({
       htmlId: ariaTitleId,
       title: title,
       type: type,
       needIcon: needIcon,
       onClose: onClose,
-      breakChildren: wrapHeader,
-      ...AlertHeaderProps
-    }, headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
+      breakChildren: wrapHeader
+    }, AlertHeaderProps), headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement("div", {
       className: `${style.innerSection} ${style[`${scroll}Scroll`] ? style[`${scroll}Scroll`] : ''} ${sectionClass}`
@@ -169,30 +169,30 @@ export default class AlertLookup extends Component {
     }, /*#__PURE__*/React.createElement(FormAction, {
       size: "small",
       paddingLeftSize: "xmedium"
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Button, _extends({
       text: submitText,
       dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
       onClick: onSubmitClick,
       palette: buttonPalette,
       customProps: {
         'data-a11y-autofocus': isDefaultFocus
-      },
-      ...PrimaryButtonProps,
+      }
+    }, PrimaryButtonProps, {
       a11y: {
         'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaLeaveButtonId
       },
       id: ariaLeaveButtonId
-    }), cancelText && /*#__PURE__*/React.createElement(Button, {
+    })), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
       dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
       text: cancelText,
       onClick: onCancelClick,
-      palette: "secondary",
-      ...SecondaryButtonProps,
+      palette: "secondary"
+    }, SecondaryButtonProps, {
       a11y: {
         'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaStayButtonId
       },
       id: ariaStayButtonId
-    })))) : null))));
+    }))))) : null))));
   }
 
 }

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -1,3 +1,5 @@
+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); }
+
 import React, { useState } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes, DesktopNotificationUI_propTypes } from "./props/propTypes";
@@ -117,14 +119,13 @@ export function DesktopNotificationUI(props) {
     let {
       uptoTablet
     } = _ref2;
-    return /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, _extends({
       className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass}
             ${isShrinkView ? style.globalNotify : ''} ${containerClass}  ${uptoTablet ? style.tapWidth : style[`${size}`]}`,
       isCover: false,
       dataId: dataId,
-      isInline: uiVariantTwo,
-      ...ExtraProps
-    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
+      isInline: uiVariantTwo
+    }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
       type: type,
       title: title,
       variant: titleVariant,
@@ -177,9 +178,9 @@ export function DesktopNotificationUI(props) {
 }
 DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
 export default function DesktopNotification(props) {
-  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
     Element: DesktopNotificationUI
-  });
+  }));
 }
 DesktopNotification.propTypes = propTypes;
 DesktopNotification.defaultProps = defaultProps; // if (__DOCS__) {

package/lib/Separator/Separator.module.css

@@ -1,23 +1,23 @@
 .varClass {
-  --separator_fontSize: var(--zd_font_size15);
+  --separator_fontSize: 15px;
 }
 .separator {
   font-size: var(--separator_fontSize);
   margin: 0 var(--zd_size5) ;
 }
 .dot {
-  --separator_fontSize: var(--zd_font_size8);
+  --separator_fontSize: 8px;
 }
 .slash {
-  --separator_fontSize: var(--zd_font_size10);
+  --separator_fontSize: 10px;
   /* line-height: var(--zd_size10); */
 }
 .arrow {
-  --separator_fontSize: var(--zd_font_size8);
+  --separator_fontSize: 8px;
   /* line-height: var(--zd_size7); */
 }
 .comma {
-  --separator_fontSize: var(--zd_font_size15);
+  --separator_fontSize: 15px;
   /* line-height: var(--zd_size13); */
 }
 .none {

package/lib/TagWithIcon/TagWithIcon.module.css

@@ -2,8 +2,8 @@
   --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
   --tag_text_color: var(--zdt_tagWithIconGrey_text);
   --tag_border_color: var(--zdt_tagWithIconGrey_border);
-  --tag_small_fontSize: var(--zd_font_size10);
-  --tag_large_fontSize: var(--zd_font_size12);
+  --tag_small_fontSize: 10px;
+  --tag_large_fontSize: 12px;
 }
 
 .wrapper {

package/lib/dot_layer.module.css

@@ -1 +1 @@
-@layer dot-core, dot-core.ActionButton, dot-core.AlphabeticList, dot-core.Attachment, dot-core.AttachmentViewer, dot-core.ChannelIcon, dot-core.Drawer, dot-core.ExternalLink, dot-core.FlipCard, dot-core.FormAction, dot-core.css, dot-core.IconButton, dot-core.Image, dot-core.ImportantNotes, dot-core.Link, dot-core.Loader, dot-core.Message, dot-core.MessageBanner, dot-core.NewStar, dot-core.PlusIcon, dot-core.Separator, dot-core.TagWithIcon, dot-core.ToastMessage, dot-core.Upload, dot-core.AlertHeader, dot-core.AlertLookup, dot-core.AvatarClose, dot-core.AvatarCollision, dot-core.AvatarIcon, dot-core.AvatarStatus, dot-core.AvatarThread, dot-core.AvatarUser, dot-core.AvatarWithTeam, dot-core.common, dot-core.FreezeLayer, dot-core.SelectDropdown, dot-core.ToggleDropDown, dot-core.CommonEmptyState, dot-core.EditionPage, dot-core.errorstate, dot-core.Inconvenience, dot-core.LinkText, dot-core.NoRequestFound, dot-core.PermissionPlay, dot-core.RequestUrlNotFound, dot-core.UnableToProcess, dot-core.UnauthorizedLogin, dot-core.WillBack, dot-core.fields, dot-core.TagsMultiSelect, dot-core.TagsMultiSelectField, dot-core.TextEditor, dot-core.TextEditorWrapper, dot-core.ValidationMessage, dot-core.Field, dot-core.Section, dot-core.SetupDetailLayout, dot-core.SubtabLayout, dot-core.AvatarFlip, dot-core.BluePrintStatus, dot-core.Comment, dot-core.DepartmentDropDown, dot-core.Dot, dot-core.DotNew, dot-core.GridStencils, dot-core.Icons, dot-core.ListLayout, dot-core.ListStencils, dot-core.SecondaryText, dot-core.SecondryPanel, dot-core.SentimentStatus, dot-core.Subject, dot-core.TagNew, dot-core.Thread, dot-core.list, dot-core.StatusDropdown, dot-core.StatusListItem, dot-core.EmptyPage, dot-core.Lookup, dot-core.Close, dot-core.Search, dot-core.TicketHeader, dot-core.Title, dot-core.ViewDropDown, dot-core.header, dot-core.Button, dot-core.Views, dot-core.Description, dot-core.ListGroup, dot-core.TableData, dot-core.TableHead, dot-core.TableRow, dot-core.Text, dot-core.AlertClose, dot-core.GlobalNotification, dot-core.alertIcons, dot-core.lookup, dot-core.DesktopNotification, dot-core.DesktopNotificationHeader, dot-core.mode, dot-core.blue, dot-core.green, dot-core.orange, dot-core.red, dot-core.yellow;
+@layer dot-core, dot-core.theme, dot-core.core, dot-core.atom, dot-core.molecule, dot-core.organism, dot-core.page, dot-core.ActionButton, dot-core.AlphabeticList, dot-core.Attachment, dot-core.AttachmentViewer, dot-core.ChannelIcon, dot-core.Drawer, dot-core.ExternalLink, dot-core.FlipCard, dot-core.FormAction, dot-core.css, dot-core.IconButton, dot-core.Image, dot-core.ImportantNotes, dot-core.Link, dot-core.Loader, dot-core.Message, dot-core.MessageBanner, dot-core.NewStar, dot-core.PlusIcon, dot-core.Separator, dot-core.TagWithIcon, dot-core.ToastMessage, dot-core.Upload, dot-core.AlertHeader, dot-core.AlertLookup, dot-core.AvatarClose, dot-core.AvatarCollision, dot-core.AvatarIcon, dot-core.AvatarStatus, dot-core.AvatarThread, dot-core.AvatarUser, dot-core.AvatarWithTeam, dot-core.common, dot-core.FreezeLayer, dot-core.SelectDropdown, dot-core.ToggleDropDown, dot-core.CommonEmptyState, dot-core.EditionPage, dot-core.errorstate, dot-core.Inconvenience, dot-core.LinkText, dot-core.NoRequestFound, dot-core.PermissionPlay, dot-core.RequestUrlNotFound, dot-core.UnableToProcess, dot-core.UnauthorizedLogin, dot-core.WillBack, dot-core.fields, dot-core.TagsMultiSelect, dot-core.TagsMultiSelectField, dot-core.TextEditor, dot-core.TextEditorWrapper, dot-core.ValidationMessage, dot-core.Field, dot-core.Section, dot-core.SetupDetailLayout, dot-core.SubtabLayout, dot-core.AvatarFlip, dot-core.BluePrintStatus, dot-core.Comment, dot-core.DepartmentDropDown, dot-core.Dot, dot-core.DotNew, dot-core.GridStencils, dot-core.Icons, dot-core.ListLayout, dot-core.ListStencils, dot-core.SecondaryText, dot-core.SecondryPanel, dot-core.SentimentStatus, dot-core.Subject, dot-core.TagNew, dot-core.Thread, dot-core.list, dot-core.StatusDropdown, dot-core.StatusListItem, dot-core.EmptyPage, dot-core.Lookup, dot-core.Close, dot-core.Search, dot-core.TicketHeader, dot-core.Title, dot-core.ViewDropDown, dot-core.header, dot-core.Button, dot-core.Views, dot-core.Description, dot-core.ListGroup, dot-core.TableData, dot-core.TableHead, dot-core.TableRow, dot-core.Text, dot-core.AlertClose, dot-core.GlobalNotification, dot-core.alertIcons, dot-core.lookup, dot-core.DesktopNotification, dot-core.DesktopNotificationHeader;

package/lib/errorstate/Inconvenience/Inconvenience.js

@@ -130,7 +130,7 @@ exports["default"] = Inconvenience;
 Inconvenience.propTypes = _propTypes.propTypes;
 Inconvenience.defaultProps = _defaultProps.defaultProps;
 
-if (false) {
+if (__DOCS__) {
   Inconvenience.docs = {
     componentGroup: 'errorStates'
   };

package/lib/errorstate/UnableToProcess/UnableToProcess.js

@@ -130,7 +130,7 @@ exports["default"] = UnableToProcess;
 UnableToProcess.propTypes = _propTypes.propTypes;
 UnableToProcess.defaultProps = _defaultProps.defaultProps;
 
-if (false) {
+if (__DOCS__) {
   UnableToProcess.docs = {
     componentGroup: 'errorStates'
   };

package/lib/form/fields/Fields.module.css

@@ -226,7 +226,10 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
-   
 .phoneField{
   composes: ltr-zone  from '~@zohodesk/components/es/common/common.module.css';
+}
+
+.lineClampPickListItem{
+  --line-clamp: var(--picklist-field-line-clamp,3);
 }

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -222,13 +222,17 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           _customClass$listItem = customClass.listItemClass,
           listItemClass = _customClass$listItem === void 0 ? '' : _customClass$listItem,
           _customClass$textBoxI = customClass.textBoxIconWrapperClass,
-          textBoxIconWrapperClass = _customClass$textBoxI === void 0 ? '' : _customClass$textBoxI;
+          textBoxIconWrapperClass = _customClass$textBoxI === void 0 ? '' : _customClass$textBoxI,
+          _customClass$dropBoxC = customClass.dropBoxClass,
+          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
       var _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$TagWrapp = customProps.TagWrapperProps,
           TagWrapperProps = _customProps$TagWrapp === void 0 ? {} : _customProps$TagWrapp,
           _customProps$TagProps = customProps.TagProps,
-          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
+          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps,
+          _customProps$ListItem = customProps.ListItemProps,
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
       var isEditable = !isReadOnly;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder || isEditable && isFocus ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
@@ -306,7 +310,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           boxPosition: boxPosition,
           isPadding: false,
           customClass: {
-            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown
+            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown,
+            customDropBox: dropBoxClass
           },
           dataId: "".concat(dataId, "_dropbox"),
           isResponsivePadding: true,
@@ -337,8 +342,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         }, searchList.map(function (item, index) {
           var name = item.name,
               isNew = item.isNew,
-              listItemProps = item.listItemProps;
-          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+              listProps = item.listItemProps;
+          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({}, ListItemProps, {
             key: index,
             index: index,
             autoHover: true,
@@ -349,9 +354,9 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
             highlight: selectSearchIndex === index,
             getRef: _this3.getSelectedItemRef,
             isDisabled: listDisabled,
-            customProps: listItemProps,
+            customProps: listProps,
             customClass: listItemClass
-          }, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          }), isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
             alignBox: "row",
             align: "vertical"
           }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/form/fields/TagsMultiSelect/props/propTypes.js

@@ -62,7 +62,8 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxIconProps: _propTypes["default"].object,
     TagWrapperProps: _propTypes["default"].object,
-    TagProps: _propTypes["default"].object
+    TagProps: _propTypes["default"].object,
+    ListItemProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool
 };

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -25,6 +25,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -100,7 +102,10 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           onSearch = _this$props3.onSearch,
           needSearchFetching = _this$props3.needSearchFetching,
           searchStr = _this$props3.searchStr,
-          i18nKeys = _this$props3.i18nKeys;
+          i18nKeys = _this$props3.i18nKeys,
+          customProps = _this$props3.customProps;
+      var _customProps$ToggleDr = customProps.ToggleDropDownProps,
+          ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr;
       var _i18nKeys$title = i18nKeys.title,
           title = _i18nKeys$title === void 0 ? 'Move Department' : _i18nKeys$title,
           _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
@@ -109,36 +114,37 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           searchErrorText = _i18nKeys$searchError === void 0 ? 'No results' : _i18nKeys$searchError,
           _i18nKeys$placeholder = i18nKeys.placeholder,
           placeholder = _i18nKeys$placeholder === void 0 ? 'Search Department' : _i18nKeys$placeholder;
-      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], _extends({
+        keyName: "name",
+        idName: "id",
+        isArrow: false,
+        boxSize: "small",
+        isPadding: false,
+        isNeedEffect: false,
+        isSearch: departmentList.length > 5 || searchStr.length !== 0
+      }, ToggleDropDownProps, {
         title: title,
         options: departmentList,
         value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, {
           text: departmentName,
           dataTitle: departmentName
         }),
-        keyName: "name",
-        idName: "id",
         onClick: this.onMoveDepartment,
-        isArrow: false,
         isEditable: isEditable,
         onSelectLabel: onSelectLabel,
         isPopupActive: isPopupActive,
         needExternalPopupState: true,
-        isSearch: departmentList.length > 5 || searchStr.length !== 0,
-        boxSize: "small",
         dataId: dataId,
         isDataLoaded: !isFetching,
-        isPadding: false,
         searchErrorText: searchErrorText,
         searchEmptyHint: searchEmptyText,
-        isNeedEffect: false,
         className: _DepartmentDropDownModule["default"].departmentBox,
         placeHolderText: placeholder,
         getNextOptions: getNextOptions,
         isNextOptions: isNextOptions,
         onSearch: onSearch,
         needSearchFetching: needSearchFetching
-      });
+      }));
     }
   }]);
 

package/lib/list/DepartmentDropDown/props/defaultProps.js

@@ -9,6 +9,7 @@ var defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {}
+  i18nKeys: {},
+  customProps: {}
 };
 exports.defaultProps = defaultProps;

package/lib/list/DepartmentDropDown/props/propTypes.js

@@ -31,5 +31,7 @@ var propTypes = (_propTypes = {
   searchEmptyText: _propTypes2["default"].string,
   searchErrorText: _propTypes2["default"].string,
   placeholder: _propTypes2["default"].string
+})), _defineProperty(_propTypes, "customProps", _propTypes2["default"].shape({
+  ToggleDropDownProps: _propTypes2["default"].object
 })), _propTypes);
 exports.propTypes = propTypes;

package/lib/list/GridStencils/GridStencils.module.css

@@ -55,14 +55,14 @@
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-name:  placeHolderShimmer-ltr ;
   -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stenListBAr {
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-name:  placeHolderShimmer-rtl ;
   -webkit-animation-timing-function: linear;
 }
 .stenListBAr {
@@ -74,17 +74,17 @@
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-name:  placeHolderShimmer-ltr ;
   -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stenListBAr {
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-name:  placeHolderShimmer-rtl ;
   -webkit-animation-timing-function: linear;
 }
-@keyframes placeHolderShimmer {
+@keyframes placeHolderShimmer-ltr {
   0% {
     background-position: -468px 0;
   }
@@ -93,6 +93,15 @@
     background-position: 468px 0;
   }
 }
+@keyframes placeHolderShimmer-rtl {
+  0% {
+    background-position: right -468px top 0;
+  }
+
+  100% {
+    background-position: right 468px top 0;
+  }
+}
 .threeLayout .stenLoadbody::before {
   transform: scale(0.8);
 }

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -247,7 +247,10 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           renderTargetElement = _this$props4.renderTargetElement,
           renderFooterElement = _this$props4.renderFooterElement,
           _this$props4$a11y = _this$props4.a11y,
-          a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y;
+          a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y,
+          customClass = _this$props4.customClass;
+      var _customClass$dropBoxC = customClass.dropBoxClass,
+          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
       var _a11y$tabIndex = a11y.tabIndex,
           tabIndex = _a11y$tabIndex === void 0 ? 0 : _a11y$tabIndex,
           ariaLabelledby = a11y.ariaLabelledby,
@@ -310,7 +313,8 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           isAnimate: true,
           getRef: getContainerRef,
           customClass: {
-            customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer
+            customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer,
+            customDropBox: dropBoxClass
           },
           needResponsive: needResponsive,
           isResponsivePadding: true,

package/lib/list/status/StatusDropdown/props/defaultProps.js

@@ -24,6 +24,7 @@ var defaultProps = {
   needMultiLineText: false,
   isFetchingOptions: false,
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  customClass: {}
 };
 exports.defaultProps = defaultProps;