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

package/es/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/es/Select/Select.js

@@ -813,7 +813,8 @@ export class SelectComponent extends Component {
       renderCustomSearchClearComponent,
       renderCustomSelectedValue,
       inputFieldLineA11y,
-      customClass
+      customClass,
+      renderSuggestedStatus
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -844,7 +845,8 @@ export class SelectComponent extends Component {
     } = customProps;
     const {
       dropBox: dropBoxClass = '',
-      cardContent: cardContentClass = ''
+      cardContent: cardContentClass = '',
+      suggestedStatusWrapper = ''
     } = customClass;
     const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
       setAriaId,
@@ -1021,81 +1023,90 @@ export class SelectComponent extends Component {
         isRestrictScroll: isRestrictScroll,
         portalId: dropBoxPortalId,
         customClass: {
-          customDropBox: dropBoxClass
+          customDropBox: `${dropBoxClass} ${renderSuggestedStatus ? style.dropBoxWithSuggestedStatus : ''}`
         }
-      }, isLoading ? /*#__PURE__*/React.createElement(Container, {
-        align: "both",
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, !getChildren ? /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Card, {
-        onScroll: this.handleScroll
-      }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-        className: `${style.search} ${style[size]}`
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-        a11y: {
-          ariaControls: setAriaId,
-          ariaAutocomplete: 'list',
-          ariaDescribedby: ariaErrorId
-        },
-        inputRef: this.searchInputRef,
-        maxLength: maxLength,
-        onChange: this.handleSearch,
-        onKeyDown: this.handleKeyDown,
-        placeHolder: searchBoxPlaceHolder,
-        size: searchBoxSize,
-        value: searchStr,
-        onClear: this.handleClearSearch,
-        dataId: `${dataId}_search`,
-        i18nKeys: TextBoxIcon_i18n,
-        autoComplete: autoComplete,
-        customProps: {
-          TextBoxProps: DropdownSearchTextBoxProps
-        },
-        renderCustomClearComponent: renderCustomSearchClearComponent
-      }))) : null, /*#__PURE__*/React.createElement(CardContent, {
-        shrink: true,
-        customClass: `
+      }, (() => {
+        const dropdownContent = isLoading ? /*#__PURE__*/React.createElement(Container, {
+          align: "both",
+          className: style.loader
+        }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, !getChildren ? /*#__PURE__*/React.createElement(Box, {
+          flexible: true
+        }, /*#__PURE__*/React.createElement(Card, {
+          onScroll: this.handleScroll
+        }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
+          className: `${style.search} ${style[size]}`
+        }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+          a11y: {
+            ariaControls: setAriaId,
+            ariaAutocomplete: 'list',
+            ariaDescribedby: ariaErrorId
+          },
+          inputRef: this.searchInputRef,
+          maxLength: maxLength,
+          onChange: this.handleSearch,
+          onKeyDown: this.handleKeyDown,
+          placeHolder: searchBoxPlaceHolder,
+          size: searchBoxSize,
+          value: searchStr,
+          onClear: this.handleClearSearch,
+          dataId: `${dataId}_search`,
+          i18nKeys: TextBoxIcon_i18n,
+          autoComplete: autoComplete,
+          customProps: {
+            TextBoxProps: DropdownSearchTextBoxProps
+          },
+          renderCustomClearComponent: renderCustomSearchClearComponent
+        }))) : null, /*#__PURE__*/React.createElement(CardContent, {
+          shrink: true,
+          customClass: `
                               ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
-        eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
-        key: searchStr.trim(),
-        activeId: selectedId,
-        isVirtualizerEnabled: isVirtualizerEnabled,
-        getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
-        setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
-        suggestions: suggestions,
-        getRef: this.suggestionItemRef,
-        hoverOption: hoverIndex,
-        onClick: this.handleChange,
-        onMouseEnter: this.handleMouseEnter,
-        dataId: `${dataId}_Options`,
-        needTick: needTick,
-        needBorder: needListBorder,
-        selectedOptions: [selectedId],
-        className: `${tabletMode ? style.responsivelistItemContainer : style.listItemContainer}`,
-        listItemSize: listItemSize,
-        htmlId: setAriaId,
-        a11y: {
-          ariaParentRole: 'listbox',
-          role: 'option'
-        }
-      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchStr,
-        suggestions: suggestions,
-        dataId: dataId,
-        renderCustomEmptyState: renderCustomEmptyState,
-        getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, getChildren())));
+          eleRef: this.suggestionContainerRef
+        }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+          key: searchStr.trim(),
+          activeId: selectedId,
+          isVirtualizerEnabled: isVirtualizerEnabled,
+          getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
+          setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
+          suggestions: suggestions,
+          getRef: this.suggestionItemRef,
+          hoverOption: hoverIndex,
+          onClick: this.handleChange,
+          onMouseEnter: this.handleMouseEnter,
+          dataId: `${dataId}_Options`,
+          needTick: needTick,
+          needBorder: needListBorder,
+          selectedOptions: [selectedId],
+          className: `${tabletMode ? style.responsivelistItemContainer : style.listItemContainer}`,
+          listItemSize: listItemSize,
+          htmlId: setAriaId,
+          a11y: {
+            ariaParentRole: 'listbox',
+            role: 'option'
+          }
+        }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+          isLoading: isFetchingOptions,
+          options: options,
+          searchString: searchStr,
+          suggestions: suggestions,
+          dataId: dataId,
+          renderCustomEmptyState: renderCustomEmptyState,
+          getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
+          i18nKeys: i18nKeys,
+          htmlId: ariaErrorId
+        }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+          isCover: false,
+          align: "both"
+        }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : /*#__PURE__*/React.createElement(Box, {
+          flexible: true
+        }, getChildren()));
+        return renderSuggestedStatus ? /*#__PURE__*/React.createElement("div", {
+          className: style.dropBoxListContainer
+        }, /*#__PURE__*/React.createElement("div", {
+          className: `${suggestedStatusWrapper} ${style.suggestedStatusContainer}`
+        }, renderSuggestedStatus), /*#__PURE__*/React.createElement("div", {
+          className: style.dropdownOptions
+        }, dropdownContent)) : dropdownContent;
+      })());
     }) : null);
   }
 

package/es/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/es/Select/props/defaultProps.js

@@ -38,7 +38,8 @@ export const Select_defaultProps = {
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
   inputFieldLineA11y: {},
-  customClass: {}
+  customClass: {},
+  renderSuggestedStatus: null
 };
 export const GroupSelect_defaultProps = {
   animationStyle: 'bounce',

package/es/Select/props/propTypes.js

@@ -108,7 +108,8 @@ export const Select_propTypes = {
   customClass: PropTypes.shape({
     dropBox: PropTypes.string,
     cardContent: PropTypes.string
-  })
+  }),
+  renderSuggestedStatus: PropTypes.node
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({

package/es/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);
+}