@zohodesk/components 1.0.0-alpha-257 → 1.0.0-alpha-259

package/lib/Select/props/propTypes.js

@@ -91,7 +91,8 @@ var Select_propTypes = {
     listItemProps: _propTypes["default"].object,
     SuggestionsProps: _propTypes["default"].object
   }),
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {
@@ -169,7 +170,8 @@ var GroupSelect_propTypes = {
     noMoreText: _propTypes["default"].string,
     searchEmptyText: _propTypes["default"].string
   }),
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.GroupSelect_propTypes = GroupSelect_propTypes;
 var SelectWithAvatar_propTypes = {
@@ -228,7 +230,8 @@ var SelectWithAvatar_propTypes = {
   valueField: _propTypes["default"].string,
   htmlId: _propTypes["default"].string,
   needEffect: _propTypes["default"].bool,
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.SelectWithAvatar_propTypes = SelectWithAvatar_propTypes;
 var SelectWithIcon_propTypes = {
@@ -275,6 +278,7 @@ var SelectWithIcon_propTypes = {
   togglePopup: _propTypes["default"].func,
   valueKey: _propTypes["default"].string,
   htmlId: _propTypes["default"].string,
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_propTypes;

package/lib/Switch/Switch.js

@@ -58,6 +58,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         title = _this$props2.title,
         disableTitle = _this$props2.disableTitle,
         dataId = _this$props2.dataId,
+        dataSelectorId = _this$props2.dataSelectorId,
         customClass = _this$props2.customClass,
         customProps = _this$props2.customProps;
       var _customProps$SwitchPr = customProps.SwitchProps,
@@ -82,7 +83,8 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         "data-title": disabled ? disableTitle : title,
         "aria-checked": checked,
         role: "switch",
-        tabIndex: isReadOnly || disabled ? '-1' : '0'
+        tabIndex: isReadOnly || disabled ? '-1' : '0',
+        dataSelectorId: dataSelectorId
       }, SwitchProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_SwitchModule["default"][size], " ").concat(customSwitchSize)
       }, /*#__PURE__*/_react["default"].createElement("input", {

package/lib/Switch/props/defaultProps.js

@@ -12,6 +12,7 @@ var defaultProps = {
   size: 'medium',
   isReadOnly: false,
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'switch'
 };
 exports.defaultProps = defaultProps;

package/lib/Switch/props/propTypes.js

@@ -9,6 +9,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var propTypes = {
   checked: _propTypes["default"].bool,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disableTitle: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   id: _propTypes["default"].string.isRequired,

package/lib/Tab/Tab.js

@@ -36,6 +36,7 @@ function Tab(_ref) {
     children = _ref.children,
     className = _ref.className,
     dataId = _ref.dataId,
+    dataSelectorId = _ref.dataSelectorId,
     title = _ref.title,
     titlePosition = _ref.titlePosition,
     activeClass = _ref.activeClass,
@@ -93,7 +94,8 @@ function Tab(_ref) {
     "aria-controls": id,
     "aria-selected": isActive ? true : false,
     tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
-    "aria-label": text ? text : null
+    "aria-label": text ? text : null,
+    dataSelectorId: dataSelectorId
   }, customProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: "row",
     align: "both",

package/lib/Tab/TabContent.js

@@ -16,7 +16,8 @@ var TabContent = function TabContent(_ref) {
   var children = _ref.children,
     scroll = _ref.scroll,
     dataId = _ref.dataId,
-    id = _ref.id;
+    id = _ref.id,
+    dataSelectorId = _ref.dataSelectorId;
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     className: _TabContentModule["default"].container,
     scroll: scroll,
@@ -24,7 +25,8 @@ var TabContent = function TabContent(_ref) {
     isScrollAttribute: true,
     "aria-labelledby": id,
     tabindex: "-1",
-    role: "tabpanel"
+    role: "tabpanel",
+    dataSelectorId: dataSelectorId
   }, children);
 };
 TabContent.defaultProps = _defaultProps.TabContent_defaultProps;

package/lib/Tab/TabContentWrapper.js

@@ -16,13 +16,15 @@ var TabContentWrapper = function TabContentWrapper(_ref) {
     children = _ref.children,
     dataId = _ref.dataId,
     selectedTab = _ref.selectedTab,
-    onScroll = _ref.onScroll;
+    onScroll = _ref.onScroll,
+    dataSelectorId = _ref.dataSelectorId;
   return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     flexible: true,
     style: style,
     dataId: dataId,
     className: className,
-    onScroll: onScroll
+    onScroll: onScroll,
+    dataSelectorId: dataSelectorId
   }, _react["default"].Children.map(children, function (child) {
     return /*#__PURE__*/_react["default"].isValidElement(child) && child.props.id === selectedTab ? child : null;
   }));

package/lib/Tab/TabWrapper.js

@@ -30,7 +30,8 @@ function TabWrapper(_ref) {
     needAppearance = _ref.needAppearance,
     align = _ref.align,
     dataId = _ref.dataId,
-    children = _ref.children;
+    children = _ref.children,
+    dataSelectorId = _ref.dataSelectorId;
   var _useState = (0, _react.useState)(!hookToDisableInternalState ? defaultTab || 0 : null),
     _useState2 = _slicedToArray(_useState, 2),
     selectedTabInternal = _useState2[0],
@@ -43,7 +44,8 @@ function TabWrapper(_ref) {
   }, [hookToDisableInternalState, onSelect]);
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: align === 'vertical' ? 'column' : 'row',
-    dataId: dataId
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
   }, _react["default"].Children.map(children, function (child) {
     var TabsChild = child.type;
     var selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;

package/lib/Tab/Tabs.js

@@ -424,7 +424,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         getTargetRef = _this$props8.getTargetRef,
         position = _this$props8.position,
         customProps = _this$props8.customProps,
-        getCustomDropBoxHeaderPlaceHolder = _this$props8.getCustomDropBoxHeaderPlaceHolder;
+        getCustomDropBoxHeaderPlaceHolder = _this$props8.getCustomDropBoxHeaderPlaceHolder,
+        dataSelectorId = _this$props8.dataSelectorId;
       var _customProps$DropBoxP = customProps.DropBoxProps,
         DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP,
         _customProps$ListItem = customProps.ListItemProps,
@@ -458,7 +459,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           isVirtual: isVirtual
         }, classProps));
       }), _react["default"].Children.count(moreTabs) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_TabsModule["default"].menu, " ")
+        className: "".concat(_TabsModule["default"].menu, " "),
+        dataSelectorId: "".concat(dataSelectorId, "_moreIcon")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(moreButtonClass, " ").concat(isPopupOpen ? moreButtonActiveClass : ''),
         align: "both",
@@ -545,7 +547,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         align = _this$props9.align,
         needAppearance = _this$props9.needAppearance,
         children = _this$props9.children,
-        containerClass = _this$props9.containerClass;
+        containerClass = _this$props9.containerClass,
+        dataSelectorId = _this$props9.dataSelectorId;
       var _this$state2 = this.state,
         totalDimension = _this$state2.totalDimension,
         tabDimensions = _this$state2.tabDimensions,
@@ -558,7 +561,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       var tabsClass = (0, _Common.cs)([_TabsModule["default"].tab, className, needAppearance && appearanceClass]);
       var hlClass = (0, _Common.cs)([_TabsModule["default"].highlight, highlightClass, isAnimate && _TabsModule["default"].lineAnimate]);
       return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: containerClass
+        className: containerClass,
+        dataSelectorId: dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: align === 'vertical' ? 'row' : 'column',
         className: tabsClass,

package/lib/Tab/props/defaultProps.js

@@ -6,15 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.Tabs_defaultProps = exports.Tab_defaultProps = exports.TabWrapper_defaultProps = exports.TabContent_defaultProps = exports.TabContentWrapper_defaultProps = void 0;
 var Tab_defaultProps = {
   dataId: 'tabMenu',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'tab'
 };
 exports.Tab_defaultProps = Tab_defaultProps;
 var TabContent_defaultProps = {
-  dataId: 'tabContent'
+  dataId: 'tabContent',
+  dataSelectorId: 'tabContent'
 };
 exports.TabContent_defaultProps = TabContent_defaultProps;
 var TabContentWrapper_defaultProps = {
-  children: []
+  children: [],
+  dataSelectorId: 'tabContentWrapper'
 };
 exports.TabContentWrapper_defaultProps = TabContentWrapper_defaultProps;
 var Tabs_defaultProps = {
@@ -34,7 +37,8 @@ var Tabs_defaultProps = {
   iconName: 'ZD-TB-menu',
   iconSize: '7',
   containerClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'tabs'
 };
 exports.Tabs_defaultProps = Tabs_defaultProps;
 var TabWrapper_defaultProps = {
@@ -45,6 +49,7 @@ var TabWrapper_defaultProps = {
   needTabBorder: false,
   type: 'alpha',
   align: 'vertical',
-  needAppearance: true
+  needAppearance: true,
+  dataSelectorId: 'tabWrapper'
 };
 exports.TabWrapper_defaultProps = TabWrapper_defaultProps;

package/lib/Tab/props/propTypes.js

@@ -30,14 +30,16 @@ var Tab_propTypes = {
   tourId: _propTypes["default"].string,
   type: _propTypes["default"].string,
   customProps: _propTypes["default"].object,
-  isVirtual: _propTypes["default"].bool
+  isVirtual: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.Tab_propTypes = Tab_propTypes;
 var TabContent_propTypes = {
   children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
   id: _propTypes["default"].string,
-  scroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both', 'none'])
+  scroll: _propTypes["default"].oneOf(['vertical', 'horizontal', 'both', 'none']),
+  dataSelectorId: _propTypes["default"].string
 };
 exports.TabContent_propTypes = TabContent_propTypes;
 var TabContentWrapper_propTypes = {
@@ -46,7 +48,8 @@ var TabContentWrapper_propTypes = {
   dataId: _propTypes["default"].string,
   onScroll: _propTypes["default"].func,
   selectedTab: _propTypes["default"].string,
-  style: _propTypes["default"].object
+  style: _propTypes["default"].object,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.TabContentWrapper_propTypes = TabContentWrapper_propTypes;
 var Tabs_propTypes = {
@@ -94,7 +97,8 @@ var Tabs_propTypes = {
     ListItemProps: _propTypes["default"].object,
     MoreButtonProps: _propTypes["default"].object
   }),
-  getCustomDropBoxHeaderPlaceHolder: _propTypes["default"].func
+  getCustomDropBoxHeaderPlaceHolder: _propTypes["default"].func,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.Tabs_propTypes = Tabs_propTypes;
 var TabWrapper_propTypes = {
@@ -109,6 +113,7 @@ var TabWrapper_propTypes = {
   needPadding: _propTypes["default"].bool,
   needTabBorder: _propTypes["default"].bool,
   onSelect: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'zeta'])
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'zeta']),
+  dataSelectorId: _propTypes["default"].string
 };
 exports.TabWrapper_propTypes = TabWrapper_propTypes;

package/lib/Tag/Tag.js

@@ -99,6 +99,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         onSelectTag = _this$props4.onSelectTag,
         closeTitle = _this$props4.closeTitle,
         dataId = _this$props4.dataId,
+        dataSelectorId = _this$props4.dataSelectorId,
         iconName = _this$props4.iconName,
         iconSize = _this$props4.iconSize,
         tooltip = _this$props4.tooltip,
@@ -127,7 +128,8 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         ref: this.getRef,
         "data-title": tooltip ? tooltip : text,
         tabIndex: disabled ? '-1' : '0',
-        "aria-labelledby": getAriaId
+        "aria-labelledby": getAriaId,
+        "data-selector-id": dataSelectorId
       }, hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _TagModule["default"].avatar
       }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {

package/lib/Tag/props/defaultProps.js

@@ -15,6 +15,7 @@ var defaultProps = {
   customClass: {},
   a11y: {},
   needEffect: true,
-  isReadOnly: false
+  isReadOnly: false,
+  dataSelectorId: 'tag'
 };
 exports.defaultProps = defaultProps;

package/lib/Tag/props/propTypes.js

@@ -37,6 +37,7 @@ var propTypes = {
     clearLabel: _propTypes["default"].string
   }),
   needEffect: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool
+  isReadOnly: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/TextBox/TextBox.js

@@ -113,7 +113,8 @@ var Textbox = /*#__PURE__*/function (_React$PureComponent) {
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
         isFocus = _this$props4.isFocus,
-        customProps = _this$props4.customProps;
+        customProps = _this$props4.customProps,
+        dataSelectorId = _this$props4.dataSelectorId;
       var ariaLabel = a11y.ariaLabel,
         ariaAutocomplete = a11y.ariaAutocomplete,
         ariaControls = a11y.ariaControls,
@@ -160,6 +161,7 @@ var Textbox = /*#__PURE__*/function (_React$PureComponent) {
         "aria-multiselectable": ariaMultiselectable,
         className: "".concat(isReadOnly && needReadOnlyStyle ? _TextBoxModule["default"].readonly : '', " ").concat(isClickable ? _TextBoxModule["default"].pointer : '', " ").concat(classList, " ").concat(_TextBoxModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass ? customClass : ''),
         "data-id": "".concat(dataId),
+        "data-selector-id": dataSelectorId,
         id: htmlId || id,
         maxLength: maxLength,
         name: name,

package/lib/TextBox/props/defaultProps.js

@@ -21,6 +21,7 @@ var defaultProps = {
   borderColor: 'default',
   a11y: {},
   isFocus: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'textBox'
 };
 exports.defaultProps = defaultProps;

package/lib/TextBox/props/propTypes.js

@@ -53,5 +53,5 @@ var propTypes = (_propTypes = {
   ariaActivedescendant: _propTypes2["default"].string,
   ariaReadonly: _propTypes2["default"].bool,
   ariaMultiselectable: _propTypes2["default"].bool
-})), _defineProperty(_propTypes, "isFocus", _propTypes2["default"].bool), _defineProperty(_propTypes, "customProps", _propTypes2["default"].object), _propTypes);
+})), _defineProperty(_propTypes, "isFocus", _propTypes2["default"].bool), _defineProperty(_propTypes, "customProps", _propTypes2["default"].object), _defineProperty(_propTypes, "dataSelectorId", _propTypes2["default"].string), _propTypes);
 exports.propTypes = propTypes;

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -87,6 +87,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
         onChange = _this$props2.onChange,
         title = _this$props2.title,
         dataId = _this$props2.dataId,
+        dataSelectorId = _this$props2.dataSelectorId,
         needReadOnlyStyle = _this$props2.needReadOnlyStyle,
         isClickable = _this$props2.isClickable,
         needEffect = _this$props2.needEffect,
@@ -118,6 +119,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
         alignBox: "row",
         isCover: false,
         className: "".concat(_TextBoxIconModule["default"].container, " ").concat(isDisabled ? _TextBoxIconModule["default"].disabled : isReadOnly ? needEffect ? _TextBoxIconModule["default"].effect : _TextBoxIconModule["default"].readonly : _TextBoxIconModule["default"].effect, " ").concat(isActive || isFocus ? _TextBoxIconModule["default"].effectFocused : '', " ").concat(customTBoxWrap, " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverStyle : ''),
+        dataSelectorId: dataSelectorId,
         "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true

package/lib/TextBoxIcon/props/defaultProps.js

@@ -23,6 +23,7 @@ var defaultProps = {
   customClass: {},
   iconOnHover: false,
   isFocus: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'textBoxIcon'
 };
 exports.defaultProps = defaultProps;

package/lib/TextBoxIcon/props/propTypes.js

@@ -10,6 +10,7 @@ var propTypes = {
   borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'error']),
   children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   htmlId: _propTypes["default"].string,
   i18nKeys: _propTypes["default"].shape({
     clearText: _propTypes["default"].string

package/lib/Textarea/Textarea.js

@@ -69,6 +69,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         getRef = _this$props.getRef,
         onFocus = _this$props.onFocus,
         dataId = _this$props.dataId,
+        dataSelectorId = _this$props.dataSelectorId,
         isReadOnly = _this$props.isReadOnly,
         needAppearance = _this$props.needAppearance,
         needReadOnlyStyle = _this$props.needReadOnlyStyle,
@@ -111,7 +112,8 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         onBlur: this.onBlur,
         ref: getRef,
         value: text,
-        id: htmlId
+        id: htmlId,
+        "data-selector-id": dataSelectorId
       }));
     }
   }]);

package/lib/Textarea/props/defaultProps.js

@@ -18,6 +18,7 @@ var defaultProps = {
   needEffect: true,
   autoFocus: false,
   customClass: '',
-  a11y: {}
+  a11y: {},
+  dataSelectorId: 'textarea'
 };
 exports.defaultProps = defaultProps;

package/lib/Textarea/props/propTypes.js

@@ -12,6 +12,7 @@ var propTypes = {
   borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   htmlId: _propTypes["default"].string,
   isDisabled: _propTypes["default"].bool,

package/lib/common/avatarsizes.module.css

@@ -9,7 +9,8 @@
 .medium,
 .xmedium,
 .large,
-.xlarge {
+.xlarge,
+.xxsmall {
   composes: varClass;
   width: var(--avatar_width);
   height: var(--avatar_height);
@@ -18,7 +19,10 @@
   --avatar_height: var(--zd_size22);
   --avatar_width: var(--zd_size22);
 }
-
+.xxsmall {
+  --avatar_height: var(--zd_size18);
+  --avatar_width: var(--zd_size18);
+}
 .xsmall {
   --avatar_height: var(--zd_size30);
   --avatar_width: var(--zd_size30);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-257",
+  "version": "1.0.0-alpha-259",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -48,7 +48,7 @@
   "devDependencies": {
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/variables": "1.0.0-beta.29",
-    "@zohodesk/icons": "1.0.0-beta.109",
+    "@zohodesk/icons": "1.0.0-beta.116",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
@@ -62,7 +62,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.0-beta.109",
+    "@zohodesk/icons": "1.0.0-beta.116",
     "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/svg": "1.0.0-beta.49",
     "@zohodesk/virtualizer": "1.0.3",