@zohodesk/dot 1.0.0-temp-187.16 → 1.0.0-temp-211

package/README.md

@@ -2,6 +2,11 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.11
+
+- **ListStencils**
+  - `customId, testId` prop has beed added
+
 # 1.7.10
 
 - **Onboarding**

package/es/Onboarding/Onboarding.js

@@ -28,7 +28,7 @@ import useOnboarding from "./hooks/useOnboarding";
 import { DUMMY_OBJECT } from "../utils/General";
 /** style **/
 
-import defaultStyle from "./css/CardOnboarding.module.css";
+import defaultStyle from "./css/Onboarding.module.css";
 
 const Onboarding = _ref => {
   let {

package/es/VideoLookup/VideoLookup.js

@@ -11,7 +11,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Styles ****/
 
-import defaultStyle from "./css/VideoLookupStyles.module.css";
+import defaultStyle from "./css/VideoLookup.module.css";
 export default function VideoLookup(props) {
   const {
     isOpened,

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -717,7 +717,8 @@ export class ToggleDropDown extends Component {
             iconClass,
             title,
             disableTitle = '',
-            isDisabled = false
+            isDisabled = false,
+            secondaryValue
           } = item;
           listIndex += 1;
           return iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, {
@@ -747,6 +748,7 @@ export class ToggleDropDown extends Component {
               ariaSelected: selectedId === item[idName],
               ariaLabel: item[keyName]
             },
+            secondaryValue: secondaryValue,
             ...ListItemWithIconProps
           }) : /*#__PURE__*/React.createElement(ListItem, {
             key: listIndex,
@@ -772,6 +774,7 @@ export class ToggleDropDown extends Component {
               ariaSelected: selectedId === item[idName],
               ariaLabel: item[keyName]
             },
+            secondaryValue: secondaryValue,
             ...ListItemProps
           });
         }));
@@ -786,7 +789,8 @@ export class ToggleDropDown extends Component {
           title,
           needDivider,
           isDisabled = false,
-          disableTitle = ''
+          disableTitle = '',
+          secondaryValue
         } = item;
 
         if (!needDivider) {
@@ -824,6 +828,7 @@ export class ToggleDropDown extends Component {
             ariaSelected: selectedId === item[idName],
             ariaLabel: item[keyName]
           },
+          secondaryValue: secondaryValue,
           ...ListItemWithIconProps
         }) : /*#__PURE__*/React.createElement(ListItem, {
           key: listIndex,
@@ -849,6 +854,7 @@ export class ToggleDropDown extends Component {
             ariaSelected: selectedId === item[idName],
             ariaLabel: item[keyName]
           },
+          secondaryValue: secondaryValue,
           ...ListItemProps
         }));
       }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {

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

@@ -218,7 +218,3 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
-
-.lineClampPickListItem{
-  --line-clamp: var(--picklist-field-line-clamp,3);
-}

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -160,14 +160,12 @@ export default class TagsMultiSelect extends React.Component {
     let {
       tagCustomClass = '',
       listItemClass = '',
-      textBoxIconWrapperClass = '',
-      dropBoxClass = ''
+      textBoxIconWrapperClass = ''
     } = customClass;
     const {
       TextBoxIconProps = {},
       TagWrapperProps = {},
-      TagProps = {},
-      ListItemProps = {}
+      TagProps = {}
     } = customProps;
     const isEditable = !isReadOnly;
     return /*#__PURE__*/React.createElement("div", {
@@ -256,8 +254,7 @@ export default class TagsMultiSelect extends React.Component {
         boxPosition: boxPosition,
         isPadding: false,
         customClass: {
-          customDropBoxWrap: style.dropdown,
-          customDropBox: dropBoxClass
+          customDropBoxWrap: style.dropdown
         },
         dataId: `${dataId}_dropbox`,
         isResponsivePadding: true,
@@ -303,8 +300,7 @@ export default class TagsMultiSelect extends React.Component {
           getRef: this.getSelectedItemRef,
           isDisabled: listDisabled,
           customProps: listItemProps,
-          customClass: listItemClass,
-          ...ListItemProps
+          customClass: listItemClass
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

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

@@ -52,8 +52,7 @@ export const propTypes = {
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object,
     TagWrapperProps: PropTypes.object,
-    TagProps: PropTypes.object,
-    ListItemProps: PropTypes.object
+    TagProps: PropTypes.object
   }),
   isFocus: PropTypes.bool
 };

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -48,12 +48,8 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys,
-      customProps
+      i18nKeys
     } = this.props;
-    const {
-      ToggleDropDownProps = {}
-    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
@@ -88,8 +84,7 @@ class DepartmentDropDown extends Component {
       getNextOptions: getNextOptions,
       isNextOptions: isNextOptions,
       onSearch: onSearch,
-      needSearchFetching: needSearchFetching,
-      ...ToggleDropDownProps
+      needSearchFetching: needSearchFetching
     });
   }
 

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

@@ -3,6 +3,5 @@ export const defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {},
-  customProps: {}
+  i18nKeys: {}
 };

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

@@ -20,8 +20,5 @@ export const propTypes = {
     searchEmptyText: PropTypes.string,
     searchErrorText: PropTypes.string,
     placeholder: PropTypes.string
-  }),
-  customProps: PropTypes.shape({
-    ToggleDropDownProps: PropTypes.object
   })
 };

package/es/list/ListStencils/ListStencils.js

@@ -11,10 +11,15 @@ import style from "./ListStencils.module.css";
 export default class ListStencils extends Component {
   render() {
     let {
-      listType
+      listType,
+      testId,
+      customId
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${style[listType]}`
+      className: `${style.container} ${style[listType]}`,
+      "data-test-id": testId ? testId + '_listStencils' : null,
+      "data-id": customId ? customId + '_listStencils' : null,
+      "aria-hidden": "true"
     }, /*#__PURE__*/React.createElement("div", {
       className: style.innerContainer
     }, /*#__PURE__*/React.createElement("div", {

package/es/list/ListStencils/__tests__/ListStencils.spec.js

@@ -8,4 +8,13 @@ describe('ListStencils', () => {
     } = render( /*#__PURE__*/React.createElement(ListStencils, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('customId and testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListStencils, {
+      testId: "ticket",
+      customId: "contact"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/list/ListStencils/__tests__/__snapshots__/ListStencils.spec.js.snap

@@ -1,8 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ListStencils customId and testId 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="container classic"
+    data-id="contact_listStencils"
+    data-test-id="ticket_listStencils"
+  >
+    <div
+      class="innerContainer"
+    >
+      <div
+        class="avatar"
+      >
+        <div
+          class="container circle clarge primary "
+        />
+      </div>
+      <div
+        class="detailsColumn"
+      >
+        <div
+          class="detailsInnerColumn"
+        >
+          <div
+            class="primaryRow"
+          >
+            <div
+              class="container rectangular default primary "
+            />
+          </div>
+          <div
+            class="secondaryRow"
+          >
+            <div
+              class="container rectangular medium primary "
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`ListStencils rendering the defult props 1`] = `
 <DocumentFragment>
   <div
+    aria-hidden="true"
     class="container classic"
   >
     <div

package/es/list/ListStencils/props/propTypes.js

@@ -1,4 +1,6 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
-  listType: PropTypes.oneOf(['classic', 'compact', 'superCompact'])
+  listType: PropTypes.oneOf(['classic', 'compact', 'superCompact']),
+  customId: PropTypes.string,
+  testId: PropTypes.string
 };

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -178,12 +178,8 @@ export class StatusDropdown extends React.Component {
       targetOffset,
       renderTargetElement,
       renderFooterElement,
-      a11y = {},
-      customClass
+      a11y = {}
     } = this.props;
-    const {
-      dropBoxClass = ''
-    } = customClass;
     const {
       tabIndex = 0,
       ariaLabelledby,
@@ -251,8 +247,7 @@ export class StatusDropdown extends React.Component {
         isAnimate: true,
         getRef: getContainerRef,
         customClass: {
-          customDropBoxWrap: style.dropBoxContainer,
-          customDropBox: dropBoxClass
+          customDropBoxWrap: style.dropBoxContainer
         },
         needResponsive: needResponsive,
         isResponsivePadding: true,

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

@@ -18,6 +18,5 @@ export const defaultProps = {
   needMultiLineText: false,
   isFetchingOptions: false,
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false,
-  customClass: {}
+  isRestrictScroll: false
 };

package/es/list/status/StatusDropdown/props/propTypes.js

@@ -56,8 +56,5 @@ export const propTypes = {
   positionsOffset: PropTypes.object,
   renderTargetElement: PropTypes.func,
   renderFooterElement: PropTypes.node,
-  targetOffset: PropTypes.object,
-  customClass: PropTypes.shape({
-    dropBoxClass: PropTypes.string
-  })
+  targetOffset: PropTypes.object
 };

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -36,8 +36,9 @@
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-.multiLineValue {
-  composes: lineClamp from '~@zohodesk/components/lib/common/common.module.css';
+.multiLineValue{
+  word-break: break-word;
+  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -89,10 +90,6 @@
 }
 /* Status Type */
 .statusType {
-  --status_listitem_bullet_min_height: var(--zd_size8);
-  --status_listitem_bullet_min_width: var(--zd_size8);
-  min-height: var(--status_listitem_bullet_min_height);
-  min-width: var(--status_listitem_bullet_min_width);
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
   border-radius: 50%;

package/lib/Onboarding/Onboarding.js

@@ -41,7 +41,7 @@ var _useOnboarding2 = _interopRequireDefault(require("./hooks/useOnboarding"));
 
 var _General = require("../utils/General");
 
-var _CardOnboardingModule = _interopRequireDefault(require("./css/CardOnboarding.module.css"));
+var _OnboardingModule = _interopRequireDefault(require("./css/Onboarding.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -63,7 +63,7 @@ var Onboarding = function Onboarding(_ref) {
       onPrimaryButtonClick = _ref.onPrimaryButtonClick,
       onSecondaryButtonClick = _ref.onSecondaryButtonClick,
       customProps = _ref.customProps;
-  var style = (0, _useMergeStyle["default"])(_CardOnboardingModule["default"], customStyle);
+  var style = (0, _useMergeStyle["default"])(_OnboardingModule["default"], customStyle);
 
   var _useOnboarding = (0, _useOnboarding2["default"])(),
       state = _useOnboarding.state,

package/lib/VideoLookup/VideoLookup.js

@@ -23,7 +23,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _VideoLookupStylesModule = _interopRequireDefault(require("./css/VideoLookupStyles.module.css"));
+var _VideoLookupModule = _interopRequireDefault(require("./css/VideoLookup.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -46,7 +46,7 @@ function VideoLookup(props) {
       testId = props.testId,
       customId = props.customId,
       videoFormat = props.videoFormat;
-  var style = (0, _utils.mergeStyle)(_VideoLookupStylesModule["default"], customStyle);
+  var style = (0, _utils.mergeStyle)(_VideoLookupModule["default"], customStyle);
   var handleKeyPress = (0, _react.useCallback)(function (e) {
     if (e.keyCode == '27') {
       onClose(e);

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -783,7 +783,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
                 _item$disableTitle = item.disableTitle,
                 disableTitle = _item$disableTitle === void 0 ? '' : _item$disableTitle,
                 _item$isDisabled = item.isDisabled,
-                isDisabled = _item$isDisabled === void 0 ? false : _item$isDisabled;
+                isDisabled = _item$isDisabled === void 0 ? false : _item$isDisabled,
+                secondaryValue = item.secondaryValue;
             listIndex += 1;
             return iconName ? /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
               key: listIndex,
@@ -811,7 +812,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
                 role: isSearch ? 'option' : 'menuitem',
                 ariaSelected: selectedId === item[idName],
                 ariaLabel: item[keyName]
-              }
+              },
+              secondaryValue: secondaryValue
             }, ListItemWithIconProps)) : /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
               key: listIndex,
               dataId: item[keyName],
@@ -835,7 +837,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
                 role: isSearch ? 'option' : 'menuitem',
                 ariaSelected: selectedId === item[idName],
                 ariaLabel: item[keyName]
-              }
+              },
+              secondaryValue: secondaryValue
             }, ListItemProps));
           }));
         }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -850,7 +853,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               _item$isDisabled2 = item.isDisabled,
               isDisabled = _item$isDisabled2 === void 0 ? false : _item$isDisabled2,
               _item$disableTitle2 = item.disableTitle,
-              disableTitle = _item$disableTitle2 === void 0 ? '' : _item$disableTitle2;
+              disableTitle = _item$disableTitle2 === void 0 ? '' : _item$disableTitle2,
+              secondaryValue = item.secondaryValue;
 
           if (!needDivider) {
             listIndex += 1;
@@ -886,7 +890,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               role: isSearch ? 'option' : 'menuitem',
               ariaSelected: selectedId === item[idName],
               ariaLabel: item[keyName]
-            }
+            },
+            secondaryValue: secondaryValue
           }, ListItemWithIconProps)) : /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
             key: listIndex,
             dataId: item[keyName],
@@ -910,7 +915,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               role: isSearch ? 'option' : 'menuitem',
               ariaSelected: selectedId === item[idName],
               ariaLabel: item[keyName]
-            }
+            },
+            secondaryValue: secondaryValue
           }, ListItemProps)));
         }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,

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

@@ -218,7 +218,3 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
-
-.lineClampPickListItem{
-  --line-clamp: var(--picklist-field-line-clamp,3);
-}

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

@@ -222,17 +222,13 @@ 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,
-          _customClass$dropBoxC = customClass.dropBoxClass,
-          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
+          textBoxIconWrapperClass = _customClass$textBoxI === void 0 ? '' : _customClass$textBoxI;
       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,
-          _customProps$ListItem = customProps.ListItemProps,
-          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
+          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
       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),
@@ -310,8 +306,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           boxPosition: boxPosition,
           isPadding: false,
           customClass: {
-            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown,
-            customDropBox: dropBoxClass
+            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown
           },
           dataId: "".concat(dataId, "_dropbox"),
           isResponsivePadding: true,
@@ -343,7 +338,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           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"], _extends({
+          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"], {
             key: index,
             index: index,
             autoHover: true,
@@ -356,7 +351,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
             isDisabled: listDisabled,
             customProps: listItemProps,
             customClass: listItemClass
-          }, ListItemProps), 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,8 +62,7 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxIconProps: _propTypes["default"].object,
     TagWrapperProps: _propTypes["default"].object,
-    TagProps: _propTypes["default"].object,
-    ListItemProps: _propTypes["default"].object
+    TagProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool
 };

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -25,8 +25,6 @@ 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); } }
@@ -102,10 +100,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           onSearch = _this$props3.onSearch,
           needSearchFetching = _this$props3.needSearchFetching,
           searchStr = _this$props3.searchStr,
-          i18nKeys = _this$props3.i18nKeys,
-          customProps = _this$props3.customProps;
-      var _customProps$ToggleDr = customProps.ToggleDropDownProps,
-          ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr;
+          i18nKeys = _this$props3.i18nKeys;
       var _i18nKeys$title = i18nKeys.title,
           title = _i18nKeys$title === void 0 ? 'Move Department' : _i18nKeys$title,
           _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
@@ -114,7 +109,7 @@ 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"], _extends({
+      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {
         title: title,
         options: departmentList,
         value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, {
@@ -143,7 +138,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
         isNextOptions: isNextOptions,
         onSearch: onSearch,
         needSearchFetching: needSearchFetching
-      }, ToggleDropDownProps));
+      });
     }
   }]);
 

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

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

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

@@ -31,7 +31,5 @@ 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/ListStencils/ListStencils.js

@@ -57,9 +57,15 @@ var ListStencils = /*#__PURE__*/function (_Component) {
   _createClass(ListStencils, [{
     key: "render",
     value: function render() {
-      var listType = this.props.listType;
+      var _this$props = this.props,
+          listType = _this$props.listType,
+          testId = _this$props.testId,
+          customId = _this$props.customId;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_ListStencilsModule["default"].container, " ").concat(_ListStencilsModule["default"][listType])
+        className: "".concat(_ListStencilsModule["default"].container, " ").concat(_ListStencilsModule["default"][listType]),
+        "data-test-id": testId ? testId + '_listStencils' : null,
+        "data-id": customId ? customId + '_listStencils' : null,
+        "aria-hidden": "true"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: _ListStencilsModule["default"].innerContainer
       }, /*#__PURE__*/_react["default"].createElement("div", {

package/lib/list/ListStencils/__tests__/ListStencils.spec.js

@@ -15,4 +15,13 @@ describe('ListStencils', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('customId and testId', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListStencils["default"], {
+      testId: "ticket",
+      customId: "contact"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });