@zohodesk/dot 1.0.0-temp-228.2 → 1.0.0-temp-229

package/lib/list/SecondaryText/SecondaryText.module.css

@@ -1,12 +1,9 @@
 .paidUserIcon {
+  margin-inline-end: var(--zd_size5) ;
   vertical-align: middle;
   bottom: var(--zd_size1) ;
   position: relative;
   font-size: var(--zd_font_size8) ;
-}[dir=ltr] .paidUserIcon {
-  margin-right: var(--zd_size5) ;
-}[dir=rtl] .paidUserIcon {
-  margin-left: var(--zd_size5) ;
 }
 
 .icon {
@@ -115,17 +112,11 @@
 
 .happinessImg {
   width: var(--zd_size13) ;
+  margin-block:0 ;
+  margin-inline:0 var(--zd_size4) ;
   vertical-align: middle;
 }
 
-[dir=ltr] .happinessImg {
-  margin: 0 var(--zd_size4) 0 0 ;
-}
-
-[dir=rtl] .happinessImg {
-  margin: 0 0 0 var(--zd_size4) ;
-}
-
 /* colors */
 .gray {
   color: var(--zdt_secondaryText_gray_text);
@@ -153,4 +144,4 @@
 
 .phonetxt {
   composes: ltr-dir from '~@zohodesk/components/es/common/common.module.css';
-}
+}

package/lib/list/SentimentStatus/SentimentStatus.module.css

@@ -1,10 +1,8 @@
 .container {
+  margin-inline: var(--zd_size5) 0 ;
+  margin-block:0 ;
   vertical-align: middle;
   font-size: var(--zd_font_size10) ;
-}[dir=ltr] .container {
-  margin: 0 0 0 var(--zd_size5) ;
-}[dir=rtl] .container {
-  margin: 0 var(--zd_size5) 0 0 ;
 }
 
 .sentimentIcon {

package/lib/list/TagNew/TagNew.module.css

@@ -3,6 +3,8 @@
   height: var(--zd_size28) ;
   font-size: var(--zd_font_size13) ;
   color: var(--zdt_tagnew_default_text);
+  padding-inline: var(--zd_size15) ;
+  padding-block:0 ;
   composes: inlineFlex from '../listCommon.module.css';
   composes: alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
   transition: all var(--zd_transition2) ease 0s;
@@ -11,7 +13,6 @@
   border-radius: 14px;
   background-color: var(--zdt_tagnew_default_bg);
   box-shadow: var(--zd_bs_tagnew_shadow);
-  padding: 0 var(--zd_size15) ;
   transform: scale(0);
   cursor: pointer;
 }
@@ -114,4 +115,4 @@
     -webkit-transform: scale3d(1, 1, 1);
     transform: scale3d(1, 1, 1);
   }
-}
+}

package/lib/list/listCommon.module.css

@@ -7,12 +7,8 @@
   composes: dInflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
 }
 
-[dir=ltr] .avatarMargin {
-  margin-right: var(--zd_size25) ;
-}
-
-[dir=rtl] .avatarMargin {
-  margin-left: var(--zd_size25) ;
+.avatarMargin {
+  margin-inline-end: var(--zd_size25) ;
 }
 
 .subject {
@@ -76,4 +72,4 @@
 .hoveredStyle .superCompact .floatingIconContainer {
   opacity: 1;
   visibility: visible;
-}
+}

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

@@ -37,6 +37,8 @@ var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/es
 
 var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
 
+var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
+
 var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
 
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
@@ -87,6 +89,11 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
     _this.searchList = _this.searchList.bind(_assertThisInitialized(_this));
     _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
     _this.emptySearchSVG = _this.emptySearchSVG.bind(_assertThisInitialized(_this));
+    _this.getSearchA11y = _this.getSearchA11y.bind(_assertThisInitialized(_this));
+    _this.getHeadingA11y = _this.getHeadingA11y.bind(_assertThisInitialized(_this));
+    _this.getListItemA11y = _this.getListItemA11y.bind(_assertThisInitialized(_this));
+    _this.getTextBoxIconCustomProps = _this.getTextBoxIconCustomProps.bind(_assertThisInitialized(_this));
+    _this.handleListItemClick = _this.handleListItemClick.bind(_assertThisInitialized(_this));
     _this.getAriaId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
     return _this;
   }
@@ -187,10 +194,55 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
         }])
       };
     }
+  }, {
+    key: "getSearchA11y",
+    value: function getSearchA11y() {
+      return {
+        ariaHaspopup: this.props.isSearch ? 'listbox' : 'menu',
+        ariaExpanded: this.props.isPopupReady,
+        role: 'combobox',
+        ariaActivedescendant: this.props.isPopupReady ? this.props.value : '',
+        ariaOwns: this.getAriaId()
+      };
+    }
+  }, {
+    key: "getHeadingA11y",
+    value: function getHeadingA11y() {
+      return {
+        role: 'heading'
+      };
+    }
+  }, {
+    key: "getListItemA11y",
+    value: function getListItemA11y(isActive, listItemText) {
+      return {
+        role: this.props.isSearch ? 'option' : 'menuitem',
+        ariaSelected: isActive,
+        ariaLabel: listItemText
+      };
+    }
+  }, {
+    key: "getTextBoxIconCustomProps",
+    value: function getTextBoxIconCustomProps() {
+      return {
+        TextBoxProps: {
+          'data-a11y-autofocus': true
+        }
+      };
+    }
+  }, {
+    key: "handleListItemClick",
+    value: function handleListItemClick(item) {
+      var _this2 = this;
+
+      return function (e) {
+        _this2.onSelect(item, e);
+      };
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var options = this.state.options;
       var _this$props4 = this.props,
@@ -248,9 +300,12 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           renderFooterElement = _this$props4.renderFooterElement,
           _this$props4$a11y = _this$props4.a11y,
           a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y,
-          customClass = _this$props4.customClass;
+          customClass = _this$props4.customClass,
+          renderSuggestedStatus = _this$props4.renderSuggestedStatus;
       var _customClass$dropBoxC = customClass.dropBoxClass,
-          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
+          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC,
+          _customClass$suggeste = customClass.suggestedStatusWrapper,
+          suggestedStatusWrapper = _customClass$suggeste === void 0 ? '' : _customClass$suggeste;
       var _a11y$tabIndex = a11y.tabIndex,
           tabIndex = _a11y$tabIndex === void 0 ? 0 : _a11y$tabIndex,
           ariaLabelledby = a11y.ariaLabelledby,
@@ -259,6 +314,9 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
       var searchString = this.state.searchString;
       var containerClass = "".concat(className ? className : '', " ").concat(isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? _StatusDropdownModule["default"].hoverIcon : '', " ").concat(isDisabled ? _commonModule["default"].disabled : isReadOnly ? _StatusDropdownModule["default"].readOnly : !isEditable ? _StatusDropdownModule["default"].cursorDefault : !showOnHover ? "".concat(_StatusDropdownModule["default"].cursor, " ").concat(hoverStyle ? hoverStyle : '') : "".concat(hoverStyle ? hoverStyle : '', " ").concat(_StatusDropdownModule["default"].cursorDefault));
       var ariaTitleId = this.getAriaId();
+      var textBoxA11y = this.getSearchA11y();
+      var headingA11y = this.getHeadingA11y();
+      var textBoxIconCustomProps = this.getTextBoxIconCustomProps();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: _StatusDropdownModule["default"].posRel,
         onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
@@ -313,13 +371,13 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           isAnimate: true,
           getRef: getContainerRef,
           customClass: {
-            customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer,
-            customDropBox: dropBoxClass
+            customDropBoxWrap: "".concat(_StatusDropdownModule["default"].dropBoxContainer, " "),
+            customDropBox: "".concat(dropBoxClass, " ").concat(renderSuggestedStatus ? _StatusDropdownModule["default"].dropBoxWithSuggestedStatus : '')
           },
           needResponsive: needResponsive,
           isResponsivePadding: true,
           needFocusScope: true,
-          onClose: _this2.handleTogglePopup,
+          onClose: _this3.handleTogglePopup,
           dataId: "".concat(dataId, "_dropbox"),
           isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
           isRestrictScroll: isRestrictScroll,
@@ -332,81 +390,75 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
               isFetchingOptions: isFetchingOptions
             }
           }
-        }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          className: _StatusDropdownModule["default"].search
-        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
-          placeHolder: placeHolderText,
-          onChange: _this2.handleChange,
-          value: searchString,
-          onClear: _this2.onSearchClear,
-          size: searchBoxSize,
-          customProps: {
-            TextBoxProps: {
-              'data-a11y-autofocus': true
-            }
-          },
-          a11y: {
-            ariaHaspopup: isSearch ? 'listbox' : 'menu',
-            ariaExpanded: isPopupReady,
-            role: 'combobox',
-            ariaActivedescendant: isPopupReady ? value : '',
-            ariaOwns: ariaTitleId
-          },
-          dataId: "".concat(dataId, "_search")
-        })) : null, title && options.length != 0 && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          className: _StatusDropdownModule["default"].title
-        }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
-          htmlId: ariaTitleId,
-          text: title,
-          a11y: {
-            role: 'heading'
-          }
-        })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          scroll: "vertical",
-          flexible: true,
-          shrink: true,
-          dataId: "".concat(dataId, "_list"),
-          preventParentScroll: "vertical",
-          className: "".concat(tabletMode ? _StatusDropdownModule["default"].responsivemaxHgt : _StatusDropdownModule["default"].maxHgt),
-          onScroll: _this2.handleScroll,
-          role: isSearch ? 'listbox' : 'menu',
-          tabindex: "-1",
-          isScrollAttribute: true
-        }, options.length != 0 && isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (item, i) {
-          var listItemText = item[keyName];
-          var isActive = value === listItemText;
-          return /*#__PURE__*/_react["default"].createElement(_StatusListItem["default"], {
-            key: i,
-            dataId: "dataid_".concat(i),
-            value: listItemText,
-            id: item[idName],
-            active: isActive,
-            onClick: _this2.onSelect.bind(_this2, item),
-            index: i,
-            needTick: needTick,
-            needBorder: false,
-            bulletColor: item[statusColor],
-            title: listItemText,
-            needMultiLineText: needMultiLineText,
-            autoHover: true,
-            a11y: {
-              role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: isActive,
-              ariaLabel: listItemText
-            }
-          });
-        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-          isCover: false,
-          align: "both"
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
-          className: _StatusDropdownModule["default"].svgWrapper,
-          title: searchErrorText || 'No results',
-          description: searchEmptyHint,
-          size: "small",
-          getEmptyState: _this2.emptySearchSVG
-        }) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: _StatusDropdownModule["default"].loader
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), renderFooterElement ? renderFooterElement : null));
+        }, function () {
+          var dropdownContent = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+            className: _StatusDropdownModule["default"].search
+          }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+            placeHolder: placeHolderText,
+            onChange: _this3.handleChange,
+            value: searchString,
+            onClear: _this3.onSearchClear,
+            size: searchBoxSize,
+            customProps: textBoxIconCustomProps,
+            a11y: textBoxA11y,
+            dataId: "".concat(dataId, "_search")
+          })) : null, title && options.length != 0 && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+            className: _StatusDropdownModule["default"].title
+          }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
+            htmlId: ariaTitleId,
+            text: title,
+            a11y: headingA11y
+          })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+            scroll: "vertical",
+            flexible: true,
+            shrink: true,
+            dataId: "".concat(dataId, "_list"),
+            preventParentScroll: "vertical",
+            className: "".concat(tabletMode ? _StatusDropdownModule["default"].responsivemaxHgt : _StatusDropdownModule["default"].maxHgt),
+            onScroll: _this3.handleScroll,
+            role: isSearch ? 'listbox' : 'menu',
+            tabindex: "-1",
+            isScrollAttribute: true
+          }, options.length != 0 && isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (item, i) {
+            var listItemText = item[keyName];
+            var isActive = value === listItemText;
+            return /*#__PURE__*/_react["default"].createElement(_StatusListItem["default"], {
+              key: item[idName] || i,
+              dataId: "dataid_".concat(i),
+              value: listItemText,
+              id: item[idName],
+              active: isActive,
+              onClick: _this3.handleListItemClick(item),
+              index: i,
+              needTick: needTick,
+              needBorder: false,
+              bulletColor: item[statusColor],
+              title: listItemText,
+              needMultiLineText: needMultiLineText,
+              autoHover: true,
+              a11y: _this3.getListItemA11y(isActive, listItemText)
+            });
+          }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+            isCover: false,
+            align: "both"
+          }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
+            className: _StatusDropdownModule["default"].svgWrapper,
+            title: searchErrorText || 'No results',
+            description: searchEmptyHint,
+            size: "small",
+            getEmptyState: _this3.emptySearchSVG
+          }) : /*#__PURE__*/_react["default"].createElement("div", {
+            className: _StatusDropdownModule["default"].loader
+          }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), renderFooterElement ? renderFooterElement : null);
+
+          return renderSuggestedStatus ? /*#__PURE__*/_react["default"].createElement("div", {
+            className: _StatusDropdownModule["default"].dropBoxListContainer
+          }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+            $ui_className: "".concat(suggestedStatusWrapper, " ").concat(_StatusDropdownModule["default"].suggestedStatusContainer)
+          }, renderSuggestedStatus), /*#__PURE__*/_react["default"].createElement("div", {
+            className: _StatusDropdownModule["default"].dropdownOptions
+          }, dropdownContent)) : dropdownContent;
+        }());
       }) : null);
     }
   }]);

package/lib/list/status/StatusDropdown/StatusDropdown.module.css

@@ -1,83 +1,130 @@
 .container {
   max-width: 100% ;
 }
+
+.dropBoxListContainer {
+  border-radius: 7px;
+  padding: var(--zd_size10) ;
+  border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
+  background: var(--zdt_statusdropdown_wrapper_container_bg);
+  box-shadow: var(--zd_bs_statusdropdown_wrapper_container);
+}
+
+.dropdownOptions {
+  padding-inline: var(--zd_size1) ;
+  padding-block: var(--zd_size1) ;
+  background-color: var(--zdt_commentList_normal_bg);
+  border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
+  border-radius: 7px;
+}
+
 .posRel {
   position: relative;
 }
+
 .maxHgt {
   max-height: var(--zd_size265) ;
-  padding: var(--zd_size10) 0 ;
+  padding-block: var(--zd_size10) ;
+  padding-inline: 0 ;
 }
-.responsivemaxHgt{
-  padding: var(--zd_size10) 0 0 ;
+
+.responsivemaxHgt {
+  padding-block: var(--zd_size10) 0 ;
+  padding-inline: 0 ;
 }
+
 .title {
-  padding-top: var(--zd_size6) ;
+  padding-block-start: var(--zd_size6) ;
 }
-[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
-  padding: 0 0 0 var(--zd_size5) ;
-}
-[dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
-  padding: 0 var(--zd_size5) 0 0 ;
+
+.default_arrow,
+.overlay_arrow {
+  padding-inline: var(--zd_size5) 0 ;
+  padding-block: 0 ;
 }
+
 .overlay_arrow {
   position: absolute;
   top: 50% ;
   transform: translateY(-50%) perspective(1px);
 }
+
 [dir=ltr] .overlay_arrow {
   left: 100% ;
 }
+
 [dir=rtl] .overlay_arrow {
   right: 100% ;
 }
+
 .hoverIcon .arrow {
   opacity: 0;
   visibility: hidden;
 }
+
 .hoverIcon:hover .arrow {
   opacity: 1;
   visibility: visible;
 }
+
 .value {
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
+
 .search {
-  padding: var(--zd_size6) var(--zd_size20) 0 ;
+  padding-block: var(--zd_size6) 0 ;
+  padding-inline: var(--zd_size20) ;
 }
+
 .svgWrapper {
-  padding-bottom: var(--zd_size25) ;
+  padding-block-end: var(--zd_size25) ;
 }
+
 .readOnly {
   cursor: no-drop;
 }
+
 .cursorDefault {
   cursor: default;
 }
+
 .cursor {
   cursor: pointer;
 }
+
 [dir=ltr] .dropBoxContainer {
   text-align: left;
 }
+
 [dir=rtl] .dropBoxContainer {
   text-align: right;
 }
-[dir=ltr] .iconBox {
-  margin-right: var(--zd_size4) ;
-}
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size4) ;
+
+.iconBox {
+  margin-inline-end: var(--zd_size4) ;
 }
-.iconBox > i {
+
+.iconBox>i {
   display: block;
 }
+
 .loader {
   width: var(--zd_size40) ;
   margin: 0 auto ;
 }
+
 .seperatedLine {
   height: var(--zd_size1) ;
+  margin-block: var(--zd_size9) var(--zd_size10) ;
+  margin-inline: 0 ;
   border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
-  margin: var(--zd_size9) 0 var(--zd_size10) ;
+}
+
+.suggestedStatusContainer {
+  margin-block-end: var(--zd_size6) ;
+  margin-inline: var(--zd_size1) ;
+}
+
+.dropBoxWithSuggestedStatus {
+  border-radius: 7px;
 }

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

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

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

@@ -30,7 +30,7 @@ var propTypes = (_propTypes = {
   idName: _propTypes2["default"].string,
   isArrow: _propTypes2["default"].bool,
   isDataLoaded: _propTypes2["default"].bool
-}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _defineProperty(_propTypes, "isAbsolutePositioningNeeded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isRestrictScroll", _propTypes2["default"].bool), _defineProperty(_propTypes, "positionsOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "renderTargetElement", _propTypes2["default"].func), _defineProperty(_propTypes, "renderFooterElement", _propTypes2["default"].node), _defineProperty(_propTypes, "targetOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "customClass", _propTypes2["default"].shape({
+}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _defineProperty(_propTypes, "isAbsolutePositioningNeeded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isRestrictScroll", _propTypes2["default"].bool), _defineProperty(_propTypes, "positionsOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "renderTargetElement", _propTypes2["default"].func), _defineProperty(_propTypes, "renderFooterElement", _propTypes2["default"].node), _defineProperty(_propTypes, "renderSuggestedStatus", _propTypes2["default"].node), _defineProperty(_propTypes, "targetOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "customClass", _propTypes2["default"].shape({
   dropBoxClass: _propTypes2["default"].string
 })), _propTypes);
 exports.propTypes = propTypes;

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

@@ -19,24 +19,19 @@
 [dir=rtl] .withBorder {
   border-right: 1px solid var(--zdt_statuslistitem_default_border);
 }
-[dir=ltr] .small {
-  padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5) ;
-}
-[dir=rtl] .small {
-  padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3) ;
+.small {
+  padding-block: var(--zd_size7) ;
+  padding-inline:var(--zd_size3) var(--zd_size5) ;
 }
 .medium {
-  padding: var(--zd_size7) var(--zd_size20) ;
+  padding-block: var(--zd_size7) ;
+  padding-inline:var(--zd_size20) ;
 }
 .large {
+  padding-block: var(--zd_size10) ;
+  padding-inline:var(--zd_size25) var(--zd_size3) ;
   --statuslistitem_min_height: var(--zd_size48);
 }
-[dir=ltr] .large {
-  padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
-}
-[dir=rtl] .large {
-  padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3) ;
-}
 .value,.multiLineValue {
   line-height: 1.5385;
 }
@@ -88,11 +83,8 @@
 .tickIcon > i {
   display: block;
 }
-[dir=ltr] .active.withTick {
-  padding-right: var(--zd_size39) ;
-}
-[dir=rtl] .active.withTick {
-  padding-left: var(--zd_size39) ;
+.active.withTick {
+  padding-inline-end: var(--zd_size39) ;
 }
 .contentWrapper {
   composes: dflex flexrow alignVertical from '~@zohodesk/components/es/common/common.module.css';
@@ -129,4 +121,4 @@
 }
 .green.statusType::after {
   background-color: var(--zdt_statuslistitem_green_bg);
-}
+}

package/lib/lookup/EmptyPage/LookupEmptyPage.module.css

@@ -3,12 +3,13 @@
 }
 
 .image {
-  margin: var(--zd_size20) auto ;
+  margin-block: var(--zd_size20) ;
+  margin-inline:auto ;
 }
 
 .contentDiv {
   font-size: var(--zd_font_size20) ;
   font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
-  margin-top: var(--zd_size15) ;
-}
+  margin-block-start: var(--zd_size15) ;
+}

package/lib/lookup/Lookup/Lookup.module.css

@@ -8,8 +8,8 @@
 }
 
 .container {
+  padding-block-end: var(--zd_size10) ;
   font-size: var(--zd_font_size16) ;
-  padding-bottom: var(--zd_size10) ;
 }
 
 .box {
@@ -46,4 +46,4 @@
 
 .fullSize {
   max-width: 90% ;
-}
+}