@zohodesk/components 1.0.0-temp-250 → 1.0.0-temp-252

package/lib/RippleEffect/RippleEffect.module.css

@@ -1,109 +1,147 @@
 .effect {
   position: relative;
-  border-radius: var(--zd_size4);
+  border-radius: 4px;
 }
+
 .border {
   border: solid 1px var(--zdt_rippleeffect_default_border);
 }
+
 .default.defaultHover {
   border-color: var(--zdt_rippleeffect_hover_border);
 }
+
 .hoverEffect:hover.primary.defaultHover, .hoverEffect:hover.primary.borderHover
+
 /* .hoverEffect:focus.primary.borderHover  */
-{
+  {
   border-color: var(--zdt_rippleeffect_primary_border);
 }
+
 .primary.defaultHover, .hoverEffect:hover.primary.active.border
+
 /* .hoverEffect:focus.primary.active.border  */
-{
+  {
   border-color: var(--zdt_rippleeffect_primary_active_border);
 }
+
 .primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover
+
 /* .hoverEffect:focus.primaryLight.borderHover  */
-{
+  {
   border-color: var(--zdt_rippleeffect_primary_light_border);
 }
+
 .green.defaultHover, .hoverEffect:hover.green.borderHover
+
 /* .hoverEffect:focus.green.borderHover  */
-{
+  {
   border-color: var(--zdt_rippleeffect_green_border);
 }
+
 .hoverEffect:hover.default.defaultHover
+
 /* .hoverEffect:focus.default.defaultHover */
- {
+  {
   border-color: var(--zdt_rippleeffect_slate_border);
 }
+
 .hoverEffect:hover.default.borderHover
+
 /* .hoverEffect:focus.default.borderHover */
- {
+  {
   border-color: var(--zdt_rippleeffect_navy_border);
 }
+
 .hoverEffect:hover.default.bgHover
+
 /* .hoverEffect:focus.default.bgHover */
- {
+  {
   background-color: var(--zdt_rippleeffect_hover_bg);
 }
+
 .hoverEffect:hover.primaryLight.bgHover
+
 /* .hoverEffect:focus.primaryLight.bgHover  */
-{
+  {
   background-color: var(--zdt_rippleeffect_primary_light_bg);
 }
+
 .primaryFilled {
   background-color: var(--zdt_rippleeffect_primary_bg);
 }
+
 .hoverEffect:hover.primaryFilled, .primaryFilled.active {
   background-color: var(--zdt_rippleeffect_primaryfilled_bg);
 }
+
 .hoverEffect:hover.green.bgHover
+
 /* .hoverEffect:focus.green.bgHover */
- {
+  {
   background-color: var(--zdt_rippleeffect_green_bg);
 }
+
 .default.active, .hoverEffect:hover.default.active, .primaryLight.active, .primaryDark.active {
   background-color: var(--zdt_rippleeffect_primary_light_bg);
 }
+
 .default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
   border-color: var(--zdt_rippleeffect_primary_light_border);
 }
+
 .green.active {
   background-color: var(--zdt_rippleeffect_green_bg);
 }
+
 .green.active.border {
   border-color: var(--zdt_rippleeffect_green_border);
 }
+
 .primary.active {
   background-color: var(--zdt_rippleeffect_primary_bg);
 }
+
 .danger.defaultHover, .hoverEffect:hover.danger.borderHover
+
 /* .hoverEffect:focus.danger.borderHover */
- {
+  {
   border-color: var(--zdt_rippleeffect_danger_border);
 }
+
 .hoverEffect:hover.danger.bgHover, .danger.active {
   background-color: var(--zdt_rippleeffect_danger_bg);
 }
+
 .hoverEffect:hover.primaryDark.bgHover
+
 /* .hoverEffect:focus.primaryDark.bgHover */
- {
+  {
   background-color: var(--zdt_rippleeffect_primary_dark_bg);
 }
+
 .notAllowed {
   cursor: not-allowed;
 }
+
 .secondary.defaultHover, .hoverEffect:hover.secondary.borderHover
+
 /* .hoverEffect:focus.secondary.borderHover  */
-{
+  {
   border-color: var(--zdt_rippleeffect_secondary_border);
 }
+
 .hoverEffect:hover.secondary.bgHover
+
 /* .hoverEffect:focus.secondary.bgHover */
- {
+  {
   background-color: var(--zdt_rippleeffect_secondary_bg);
 }
+
 .secondary.active, .hoverEffect:hover.secondary.active.bgHover {
   background-color: var(--zdt_rippleeffect_secondary_active_bg);
 }
-.secondary.active.border
-.hoverEffect:hover.secondary.active.border {
+
+.secondary.active.border .hoverEffect:hover.secondary.active.border {
   border-color: var(--zdt_rippleeffect_secondary_active_border);
-}
+}

package/lib/Select/Select.js

@@ -860,7 +860,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent,
           renderCustomSelectedValue = _this$props11.renderCustomSelectedValue,
           inputFieldLineA11y = _this$props11.inputFieldLineA11y,
-          customClass = _this$props11.customClass;
+          customClass = _this$props11.customClass,
+          renderSuggestedStatus = _this$props11.renderSuggestedStatus;
       var _i18nKeys = i18nKeys,
           TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
           _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -893,7 +894,9 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       var _customClass$dropBox = customClass.dropBox,
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
-          cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
+          cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont,
+          _customClass$suggeste = customClass.suggestedStatusWrapper,
+          suggestedStatusWrapper = _customClass$suggeste === void 0 ? '' : _customClass$suggeste;
       var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
         setAriaId: setAriaId,
         isReadOnly: isReadOnly,
@@ -1065,80 +1068,89 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           isRestrictScroll: isRestrictScroll,
           portalId: dropBoxPortalId,
           customClass: {
-            customDropBox: dropBoxClass
+            customDropBox: "".concat(dropBoxClass, " ").concat(renderSuggestedStatus ? _SelectModule["default"].dropBoxWithSuggestedStatus : '')
           }
-        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-          align: "both",
-          className: _SelectModule["default"].loader
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          flexible: true
-        }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-          onScroll: _this7.handleScroll
-        }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
-        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
-          a11y: {
-            ariaControls: setAriaId,
-            ariaAutocomplete: 'list',
-            ariaDescribedby: ariaErrorId
-          },
-          inputRef: _this7.searchInputRef,
-          maxLength: maxLength,
-          onChange: _this7.handleSearch,
-          onKeyDown: _this7.handleKeyDown,
-          placeHolder: searchBoxPlaceHolder,
-          size: searchBoxSize,
-          value: searchStr,
-          onClear: _this7.handleClearSearch,
-          dataId: "".concat(dataId, "_search"),
-          i18nKeys: TextBoxIcon_i18n,
-          autoComplete: autoComplete,
-          customProps: {
-            TextBoxProps: DropdownSearchTextBoxProps
-          },
-          renderCustomClearComponent: renderCustomSearchClearComponent
-        }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
-          shrink: true,
-          customClass: "\n                              ".concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
-          eleRef: _this7.suggestionContainerRef
-        }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
-          key: searchStr.trim(),
-          activeId: selectedId,
-          isVirtualizerEnabled: isVirtualizerEnabled,
-          getVirtualizerPublicMethods: _this7.getVirtualizerPublicMethods,
-          setVirtualizerContainerRefFunction: _this7.setSuggestionsVirtualizerContainerRefFunction,
-          suggestions: suggestions,
-          getRef: _this7.suggestionItemRef,
-          hoverOption: hoverIndex,
-          onClick: _this7.handleChange,
-          onMouseEnter: _this7.handleMouseEnter,
-          dataId: "".concat(dataId, "_Options"),
-          needTick: needTick,
-          needBorder: needListBorder,
-          selectedOptions: [selectedId],
-          className: "".concat(tabletMode ? _SelectModule["default"].responsivelistItemContainer : _SelectModule["default"].listItemContainer),
-          listItemSize: listItemSize,
-          htmlId: setAriaId,
-          a11y: {
-            ariaParentRole: 'listbox',
-            role: 'option'
-          }
-        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
-          isLoading: isFetchingOptions,
-          options: options,
-          searchString: searchStr,
-          suggestions: suggestions,
-          dataId: dataId,
-          renderCustomEmptyState: renderCustomEmptyState,
-          getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
-          i18nKeys: i18nKeys,
-          htmlId: ariaErrorId
-        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-          isCover: false,
-          align: "both"
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          flexible: true
-        }, getChildren())));
+        }, function () {
+          var dropdownContent = isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+            align: "both",
+            className: _SelectModule["default"].loader
+          }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+            flexible: true
+          }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+            onScroll: _this7.handleScroll
+          }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
+            className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+          }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+            a11y: {
+              ariaControls: setAriaId,
+              ariaAutocomplete: 'list',
+              ariaDescribedby: ariaErrorId
+            },
+            inputRef: _this7.searchInputRef,
+            maxLength: maxLength,
+            onChange: _this7.handleSearch,
+            onKeyDown: _this7.handleKeyDown,
+            placeHolder: searchBoxPlaceHolder,
+            size: searchBoxSize,
+            value: searchStr,
+            onClear: _this7.handleClearSearch,
+            dataId: "".concat(dataId, "_search"),
+            i18nKeys: TextBoxIcon_i18n,
+            autoComplete: autoComplete,
+            customProps: {
+              TextBoxProps: DropdownSearchTextBoxProps
+            },
+            renderCustomClearComponent: renderCustomSearchClearComponent
+          }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+            shrink: true,
+            customClass: "\n                              ".concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
+            eleRef: _this7.suggestionContainerRef
+          }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+            key: searchStr.trim(),
+            activeId: selectedId,
+            isVirtualizerEnabled: isVirtualizerEnabled,
+            getVirtualizerPublicMethods: _this7.getVirtualizerPublicMethods,
+            setVirtualizerContainerRefFunction: _this7.setSuggestionsVirtualizerContainerRefFunction,
+            suggestions: suggestions,
+            getRef: _this7.suggestionItemRef,
+            hoverOption: hoverIndex,
+            onClick: _this7.handleChange,
+            onMouseEnter: _this7.handleMouseEnter,
+            dataId: "".concat(dataId, "_Options"),
+            needTick: needTick,
+            needBorder: needListBorder,
+            selectedOptions: [selectedId],
+            className: "".concat(tabletMode ? _SelectModule["default"].responsivelistItemContainer : _SelectModule["default"].listItemContainer),
+            listItemSize: listItemSize,
+            htmlId: setAriaId,
+            a11y: {
+              ariaParentRole: 'listbox',
+              role: 'option'
+            }
+          }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+            isLoading: isFetchingOptions,
+            options: options,
+            searchString: searchStr,
+            suggestions: suggestions,
+            dataId: dataId,
+            renderCustomEmptyState: renderCustomEmptyState,
+            getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
+            i18nKeys: i18nKeys,
+            htmlId: ariaErrorId
+          }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+            isCover: false,
+            align: "both"
+          }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+            flexible: true
+          }, getChildren()));
+          return renderSuggestedStatus ? /*#__PURE__*/_react["default"].createElement("div", {
+            className: _SelectModule["default"].dropBoxListContainer
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            className: "".concat(suggestedStatusWrapper, " ").concat(_SelectModule["default"].suggestedStatusContainer)
+          }, renderSuggestedStatus), /*#__PURE__*/_react["default"].createElement("div", {
+            className: _SelectModule["default"].dropdownOptions
+          }, dropdownContent)) : dropdownContent;
+        }());
       }) : null);
     }
   }]);

package/lib/Select/Select.module.css

@@ -21,11 +21,13 @@
 }
 
 .box_small .emptyState {
-  padding: var(--zd_size12) var(--zd_size6) ;
+  padding-block: var(--zd_size12) ;
+  padding-inline: var(--zd_size6) ;
 }
 
 .box_medium .emptyState {
-  padding: var(--zd_size12) var(--zd_size15) ;
+  padding-block: var(--zd_size12) ;
+  padding-inline: var(--zd_size15) ;
 }
 
 .hide {
@@ -35,6 +37,7 @@
 .container {
   position: relative;
 }
+
 /* css:lineheight-validation:ignore */
 .arrowIcon {
   height: var(--zd_size8) ;
@@ -42,27 +45,32 @@
 }
 
 .small.search {
-  padding: 0 var(--zd_size5) ;
+  padding-block: 0 ;
+  padding-inline: var(--zd_size5) ;
 }
 
 .medium.search {
-  padding: var(--zd_size3) var(--zd_size20) 0 ;
+  padding-block: var(--zd_size3) 0 ;
+  padding-inline: var(--zd_size20) ;
 }
 
 .title {
-  margin-bottom: var(--zd_size6) ;
+  margin-block-end: var(--zd_size6) ;
 }
 
 .groupTitle {
-  margin: var(--zd_size6) 0 ;
+  margin-block: var(--zd_size6) ;
+  margin-inline: 0 ;
 }
 
 .listItemContainer {
-  padding: var(--zd_size10) 0 ;
+  padding-block: var(--zd_size10) ;
+  padding-inline: 0 ;
 }
 
 .responsivelistItemContainer {
-  padding: var(--zd_size10) 0 0 ;
+  padding-block: var(--zd_size10) 0 ;
+  padding-inline: 0 ;
 }
 
 .readonly {
@@ -98,26 +106,25 @@
   right: 0 ;
 }
 
-[dir=ltr] .iconSelect {
-  padding-left: var(--zd_size30) ;
-}
-
-[dir=rtl] .iconSelect {
-  padding-right: var(--zd_size30) ;
+.iconSelect {
+  padding-inline-start: var(--zd_size30) ;
 }
 
 .dropBoxList {
-  padding: var(--zd_size10) 0 ;
+  padding-block: var(--zd_size10) ;
+  padding-inline: 0 ;
 }
 
 .responsivedropBoxList {
-  padding: var(--zd_size10) 0 0 0 ;
+  padding-block: var(--zd_size10) 0 ;
+  padding-inline: 0 ;
 }
 
 .rotate {
   transform: rotateX(180deg);
 }
-.rightPlaceholder{
+
+.rightPlaceholder {
   height: 100% ;
 }
 
@@ -135,4 +142,30 @@
 
 .loader {
   padding: var(--zd_size10) ;
+}
+
+.dropBoxWithSuggestedStatus {
+  border-radius: 7px;
+}
+
+.dropBoxListContainer {
+  width: 100% ;
+  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;
+}
+
+.suggestedStatusContainer {
+  margin-block-end: var(--zd_size6) ;
+  margin-inline: var(--zd_size1) ;
 }

package/lib/Select/props/defaultProps.js

@@ -50,7 +50,8 @@ var Select_defaultProps = {
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
   inputFieldLineA11y: {},
-  customClass: {}
+  customClass: {},
+  renderSuggestedStatus: null
 };
 exports.Select_defaultProps = Select_defaultProps;
 var GroupSelect_defaultProps = {

package/lib/Select/props/propTypes.js

@@ -124,7 +124,8 @@ var Select_propTypes = {
   customClass: _propTypes["default"].shape({
     dropBox: _propTypes["default"].string,
     cardContent: _propTypes["default"].string
-  })
+  }),
+  renderSuggestedStatus: _propTypes["default"].node
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {

package/lib/Stencils/Stencils.module.css

@@ -1,32 +1,37 @@
 .varClass {
   /* stencils default variables */
-  --stencil_height: 9px;
+  --stencil_height: var(--zd_size9);
   --stencil_width: 100%;
   --stencil_border_radius: 5px;
 }
+
 .container {
   composes: varClass;
   height: var(--stencil_height);
   width: var(--stencil_width);
   border-radius: var(--stencil_border_radius);
 }
+
 .stencil {
   background-size: 800px 1px;
 }
-[dir=ltr] .animate{
+
+[dir=ltr] .animate {
   animation-name:  placeHolderShimmer-ltr ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
 }
-[dir=rtl] .animate{
+
+[dir=rtl] .animate {
   animation-name:  placeHolderShimmer-rtl ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
 }
+
 @keyframes placeHolderShimmer-ltr {
   0% {
     background-position: calc(var(--zd_size468) * -1) 0;
@@ -36,6 +41,7 @@
     background-position: var(--zd_size468) 0;
   }
 }
+
 @keyframes placeHolderShimmer-rtl {
   0% {
     background-position: calc(100% - (var(--zd_size468) * -1)) 0;
@@ -48,53 +54,63 @@
 
 .rect {
   composes: stencil;
-  --stencil_height: 9px;
+  --stencil_height: var(--zd_size9);
   --stencil_border_radius: 5px;
 }
+
 .primary {
   background-color: var(--zdt_stencil_primary_bg);
   background-image: var(--zdt_stencil_primary_gradient_bg);
 }
+
 .secondary {
   background-color: var(--zdt_stencil_secondary_bg);
   background-image: var(--zdt_stencil_secondary_gradient_bg);
 }
+
 .dark {
   background-color: var(--zdt_stencil_dark_bg);
   background-image: var(--zdt_stencil_dark_gradient_bg);
 }
 
 .small {
-  --stencil_width: 110px;
+  --stencil_width: var(--zd_size110);
 }
+
 .default {
   --stencil_width: 100%;
 }
+
 .medium {
-  --stencil_width: 170px;
+  --stencil_width: var(--zd_size170);
 }
+
 .large {
-  --stencil_width: 220px;
+  --stencil_width: var(--zd_size220);
 }
 
 .circle {
   composes: stencil;
   --stencil_border_radius: 50%;
 }
+
 .square {
   composes: stencil;
   --stencil_border_radius: 4px;
 }
+
 .size_large {
-  --stencil_width: 42px;
-  --stencil_height: 42px;
+  --stencil_width: var(--zd_size42);
+  --stencil_height: var(--zd_size42);
 }
+
 .size_medium,
 .size_default {
-  --stencil_width: 30px;
-  --stencil_height: 30px;
+  --stencil_width: var(--zd_size30);
+  --stencil_height: var(--zd_size30);
 }
+
 .size_small {
-  --stencil_width: 20px;
-  --stencil_height: 20px;
-}
+  --stencil_width: var(--zd_size20);
+  --stencil_height: var(--zd_size20);
+}