@zohodesk/components 1.0.0-alpha-243 → 1.0.0-alpha-246

package/es/LightNightMode/docs/AlternativeColors.docs.js

@@ -24,7 +24,10 @@ export default class AlternativeColors extends React.Component {
     }, "Light Mode Colors"), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.rgt
-    }, "Alternate Night Mode Colors")), /*#__PURE__*/React.createElement(Container, {
+    }, "Alternate Night Mode Colors"), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.rgt
+    }, "Alternate Pure Dark Mode Colors")), /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       className: style.content
     }, /*#__PURE__*/React.createElement(Box, {
@@ -62,6 +65,23 @@ export default class AlternativeColors extends React.Component {
         onClick: () => navigator.clipboard.writeText(clrValue),
         "data-title": `Copy ${clrValue}`
       }, clrValue));
+    })), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: style.rgt
+    }, index.equalPureDarkColors.toString().split(", ").map((clrValue, j) => {
+      return /*#__PURE__*/React.createElement("div", {
+        className: style.nestedDiv,
+        key: j
+      }, /*#__PURE__*/React.createElement("span", {
+        style: {
+          backgroundColor: `${clrValue}`
+        },
+        className: `${style.rect} ${style.gold}`
+      }), /*#__PURE__*/React.createElement("span", {
+        className: style.colorvalue,
+        onClick: () => navigator.clipboard.writeText(clrValue),
+        "data-title": `Copy ${clrValue}`
+      }, clrValue));
     }))))))));
   }
 

package/es/ListItem/ListItem.module.css

@@ -106,26 +106,30 @@
 }
 
 .defaultHover,
-.defaultEffect:hover,
-.defaultEffect:focus {
+.defaultEffect:hover
+/* .defaultEffect:focus  */
+{
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
 .primaryHover,
-.primaryEffect:hover,
-.primaryEffect:focus {
+.primaryEffect:hover
+/* .primaryEffect:focus */
+ {
   --listitem_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
 }
 .secondaryHover,
-.secondaryEffect:hover,
-.secondaryEffect:focus {
+.secondaryEffect:hover
+/* .secondaryEffect:focus  */
+{
   --listitem_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
 .darkHover,
-.darkEffect:hover,
-.darkEffect:focus {
+.darkEffect:hover
+/* .darkEffect:focus */
+ {
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import Loader from '@zohodesk/svg/lib/svg/Loader';
 import Popup from '../Popup/Popup';
-import TextBox from '../TextBox/TextBox';
+import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
 import DropDownHeading from '../DropDown/DropDownHeading';
 import MultiSelectHeader from '../MultiSelect/MultiSelectHeader';
@@ -897,6 +897,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     } = this.handleFilterSuggestions();
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
+    const isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -927,8 +928,9 @@ class AdvancedGroupMultiSelect extends React.Component {
       adjust: true,
       shrink: true
     }, /*#__PURE__*/React.createElement("span", {
-      className: ` ${style.custmSpan} ${textBoxSize == 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} `
-    }, searchStr), /*#__PURE__*/React.createElement(TextBox, {
+      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+              `
+    }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
       needBorder: false,
@@ -943,7 +945,9 @@ class AdvancedGroupMultiSelect extends React.Component {
       variant: variant,
       dataId: `${dataId}_textBox`,
       isReadOnly: isReadOnly,
-      customClass: style.custmInputWrapper,
+      customClass: {
+        customTBoxWrap: style.custmInputWrapper
+      },
       tabindex: isDisabled && '-1',
       htmlId: htmlId,
       a11y: {
@@ -955,8 +959,11 @@ class AdvancedGroupMultiSelect extends React.Component {
         ariaDescribedby: ariaErrorId
       },
       autoComplete: autoComplete
-    })), !isReadOnly && !isDisabled && selectedGroupOptions.length > 1 ? /*#__PURE__*/React.createElement(Box, {
-      className: style.delete,
+    }, isShowClearIcon ? /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: `${style.delete} ${style[`${palette}Delete`]}`,
       dataId: `${dataId}_clearIcon`,
       "data-title": clearText,
       onClick: this.handleDeselectAll,
@@ -965,7 +972,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-delete",
       size: "15"
-    })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    }))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -11,7 +11,7 @@ import Suggestions from './Suggestions';
 import EmptyState from './EmptyState';
 import MultiSelectHeader from './MultiSelectHeader';
 import Popup from '../Popup/Popup';
-import Textbox from '../TextBox/TextBox';
+import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
 import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -20,7 +20,7 @@ import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
-import style from './AdvancedMultiSelect.module.css';
+import style from './MultiSelect.module.css';
 /**** Methods ****/
 
 import { getIsEmptyValue, getSearchString } from '../utils/Common.js';
@@ -428,8 +428,14 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       onClick: this.handleMoreClick,
       tagName: "button"
     }, `+ ${moreCount} More`) : null, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Textbox, {
+      flexible: true,
+      className: style.wrapper,
+      adjust: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement("span", {
+      className: ` ${style.custmSpan} ${textBoxSize === 'xmedium' ? style.custmSpanXmedium : style.custmSpanMedium} ${isShowClearIcon ? style.clearIconSpace : ''}
+              `
+    }, searchStr), /*#__PURE__*/React.createElement(TextBoxIcon, {
       isDisabled: isDisabled,
       inputRef: this.searchInputRef,
       needBorder: false,
@@ -444,6 +450,9 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       variant: variant,
       isReadOnly: isReadOnly,
       tabindex: isDisabled && '-1',
+      customClass: {
+        customTBoxWrap: style.custmInputWrapper
+      },
       htmlId: htmlId,
       a11y: {
         role: 'combobox',
@@ -454,8 +463,11 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         ariaDescribedby: ariaErrorId
       },
       autoComplete: false
-    })), isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
-      className: style.delete,
+    }, isShowClearIcon ? /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: `${style.delete}`,
       dataId: dataIdClearIcon,
       "data-title": clearText,
       onClick: this.handleDeselectAll,
@@ -464,7 +476,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-delete",
       size: "15"
-    })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    }))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
     }, _ref2 => {

package/es/MultiSelect/MultiSelect.module.css

@@ -1,7 +1,6 @@
 .wrapper {
   position: relative;
 }
-
 .disabled, .readOnly {
   cursor: not-allowed;
 }
@@ -195,4 +194,13 @@
 }
 .search{
   padding: 0px 20px;
+}
+.more {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_multiselect_more_text);
+  font-family: inherit;
+  cursor: pointer;
+  margin-top: var(--zd_size5);
+  background-color: var(--zdt_multiselect_delete_bg);
+  border: 0;
 }

package/es/Radio/Radio.module.css

@@ -67,14 +67,16 @@
   animation: circleAnimate var(--zd_transition3) ease forwards;
 }
 .rdBoxprimary,
-.hoverEfffect:hover .hoverprimary,
-.hoverEfffect:focus .hoverprimary {
+.hoverEfffect:hover .hoverprimary
+/* .hoverEfffect:focus .hoverprimary  */
+{
   --radio_stroke_color: var(--zdt_radio_primary_stroke);
 }
 
 .rdBoxdanger,
-.hoverEfffect:hover .hoverdanger,
-.hoverEfffect:focus .hoverdanger {
+.hoverEfffect:hover .hoverdanger
+/* .hoverEfffect:focus .hoverdanger */
+ {
   --radio_stroke_color: var(--zdt_radio_danger_stroke);
 }
 
@@ -86,13 +88,13 @@
 }
 
 .active:hover .primaryLabel,
-.active:focus .primaryLabel,
+/* .active:focus .primaryLabel, */
 .primarycheckedActive {
   --label_text_color: var(--zdt_radio_label_primary_text);
 }
 
 .active:hover .dangerLabel,
-.active:focus .dangerLabel,
+/* .active:focus .dangerLabel, */
 .dangercheckedActive {
   --label_text_color: var(--zdt_radio_label_danger_text);
 }

package/es/RippleEffect/RippleEffect.module.css

@@ -8,43 +8,61 @@
 .default.defaultHover {
   border-color: var(--zdt_rippleeffect_hover_border);
 }
-.hoverEffect:hover.primary.defaultHover, .hoverEffect:focus.primary.defaultHover, .hoverEffect:hover.primary.borderHover, .hoverEffect:focus.primary.borderHover {
+.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 {
+.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 {
+.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 {
+.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 {
+.hoverEffect:hover.default.defaultHover
+/* .hoverEffect:focus.default.defaultHover */
+ {
   border-color: var(--zdt_rippleeffect_slate_border);
 }
-.hoverEffect:hover.default.borderHover, .hoverEffect:focus.default.borderHover {
+.hoverEffect:hover.default.borderHover
+/* .hoverEffect:focus.default.borderHover */
+ {
   border-color: var(--zdt_rippleeffect_navy_border);
 }
-.hoverEffect:hover.default.bgHover, .hoverEffect:focus.default.bgHover {
+.hoverEffect:hover.default.bgHover
+/* .hoverEffect:focus.default.bgHover */
+ {
   background-color: var(--zdt_rippleeffect_hover_bg);
 }
-.hoverEffect:hover.primaryLight.bgHover, .hoverEffect:focus.primaryLight.bgHover {
+.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, .hoverEffect:focus.primaryFilled, .primaryFilled.active {
+.hoverEffect:hover.primaryFilled, .primaryFilled.active {
   background-color: var(--zdt_rippleeffect_primaryfilled_bg);
 }
-.hoverEffect:hover.green.bgHover, .hoverEffect:focus.green.bgHover {
+.hoverEffect:hover.green.bgHover
+/* .hoverEffect:focus.green.bgHover */
+ {
   background-color: var(--zdt_rippleeffect_green_bg);
 }
-.default.active, .hoverEffect:hover.default.active, .hoverEffect:focus.default.active, .primaryLight.active, .primaryDark.active {
+.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, .hoverEffect:focus.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
+.default.active.border, .hoverEffect:hover.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
   border-color: var(--zdt_rippleeffect_primary_light_border);
 }
 .green.active {
@@ -56,13 +74,17 @@
 .primary.active {
   background-color: var(--zdt_rippleeffect_primary_bg);
 }
-.danger.defaultHover, .hoverEffect:hover.danger.borderHover, .hoverEffect:focus.danger.borderHover {
+.danger.defaultHover, .hoverEffect:hover.danger.borderHover
+/* .hoverEffect:focus.danger.borderHover */
+ {
   border-color: var(--zdt_rippleeffect_danger_border);
 }
-.hoverEffect:hover.danger.bgHover, .hoverEffect:focus.danger.bgHover, .danger.active {
+.hoverEffect:hover.danger.bgHover, .danger.active {
   background-color: var(--zdt_rippleeffect_danger_bg);
 }
-.hoverEffect:hover.primaryDark.bgHover, .hoverEffect:focus.primaryDark.bgHover {
+.hoverEffect:hover.primaryDark.bgHover
+/* .hoverEffect:focus.primaryDark.bgHover */
+ {
   background-color: var(--zdt_rippleeffect_primary_dark_bg);
 }
 .notAllowed {

package/es/Switch/Switch.module.css

@@ -26,8 +26,9 @@
   border-radius: 20px;
   cursor: pointer;
 }
-.effect:hover .label,
-.effect:focus .label {
+.effect:hover .label
+/* .effect:focus .label */
+ {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
 .label:after {

package/es/css.js

@@ -25,7 +25,6 @@ import './Tab/TabContent.module.css';
 import './TextBoxIcon/TextBoxIcon.module.css';
 import './Ribbon/Ribbon.module.css';
 import './MultiSelect/MultiSelect.module.css';
-import './MultiSelect/AdvancedMultiSelect.module.css';
 import './Select/Select.module.css';
 import './ListItem/ListItem.module.css';
 import './Tag/Tag.module.css';

package/es/{MultiSelect → deprecated}/AdvancedMultiSelect.module.css

@@ -124,4 +124,4 @@
   margin-top: var(--zd_size5);
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
-}
+}

package/es/deprecated/advancedMultiSelectVariableJson.js

@@ -0,0 +1,80 @@
+const componentAppearanceVariables = [{
+  "comment": "advanced multiselect",
+  "data": {
+    "zdt_advancedmultiselect_default_border": {
+      'light': ['var(--dot_inputLine)'],
+      'dark': ['var(--dot_inputLine)'],
+      'pureDark': ['var(--dot_inputLine)']
+    },
+    "zdt_advancedmultiselect_transparent_border": {
+      'light': ['var(--dot_mirror)'],
+      'dark': ['var(--dot_mirror)'],
+      'pureDark': ['var(--dot_mirror)']
+    },
+    "zdt_advancedmultiselect_dark_border": {
+      'light': ['var(--dot_mulledwine)'],
+      'dark': ['var(--dot_mulledwine)'],
+      'pureDark': ['var(--dot_mulledwine)']
+    },
+    "zdt_advancedmultiselect_default_hover_border": {
+      'light': ['var(--dot_inputLineHover)'],
+      'dark': ['var(--dot_inputLineHover)'],
+      'pureDark': ['var(--dot_inputLineHover)']
+    },
+    "zdt_advancedmultiselect_transparent_hover_border": {
+      'light': ['var(--dot_inputLineHover)'],
+      'dark': ['var(--dot_inputLineHover)'],
+      'pureDark': ['var(--dot_inputLineHover)']
+    },
+    "zdt_advancedmultiselect_dark_hover_border": {
+      'light': ['var(--dot_stardust)'],
+      'dark': ['var(--dot_stardust)'],
+      'pureDark': ['var(--dot_stardust)']
+    },
+    "zdt_advancedmultiselect_default_active_border": {
+      'light': ['var(--dot_inputLineFocus)'],
+      'dark': ['var(--dot_inputLineFocus)'],
+      'pureDark': ['var(--dot_inputLineFocus)']
+    },
+    "zdt_advancedmultiselect_transparent_active_border": {
+      'light': ['var(--dot_inputLineFocus)'],
+      'dark': ['var(--dot_inputLineFocus)'],
+      'pureDark': ['var(--dot_inputLineFocus)']
+    },
+    "zdt_advancedmultiselect_dark_active_border": {
+      'light': ['var(--dot_stardust)'],
+      'dark': ['var(--dot_stardust)'],
+      'pureDark': ['var(--dot_stardust)']
+    },
+    "zdt_advancedmultiselect_delete_text": {
+      'light': ['var(--dot_shuttleGrey)'],
+      'dark': ['var(--dot_cadetblue)'],
+      'pureDark': ['#999']
+    },
+    "zdt_advancedmultiselect_delete_hover_text": {
+      'light': ['var(--dot_black)'],
+      'dark': ['var(--dot_platinum)'],
+      'pureDark': ['var(--dot_platinum)']
+    },
+    "zdt_advancedmultiselect_delete_bg": {
+      'light': ['var(--dot_mirror)'],
+      'dark': ['var(--dot_mirror)'],
+      'pureDark': ['var(--dot_mirror)']
+    },
+    "zdt_advancedmultiselect_box_bg": {
+      'light': ['var(--dot_white)'],
+      'dark': ['var(--dot_ebonyclay)'],
+      'pureDark': ['#212121']
+    },
+    "zdt_advancedmultiselect_droppopup_text": {
+      'light': ['var(--dot_slateGrey)'],
+      'dark': ['var(--dot_oslogrey)'],
+      'pureDark': ['var(--dot_oslogrey)']
+    },
+    "zdt_advancedmultiselect_more_text": {
+      'light': ['var(--zdt_cta_primary_text)'],
+      'dark': ['var(--zdt_cta_primary_text)'],
+      'pureDark': ['var(--zdt_cta_primary_text)']
+    }
+  }
+}];

package/lib/CheckBox/CheckBox.module.css

@@ -101,15 +101,17 @@
 .checkeddanger {
   stroke: var(--checkbox_checked_stroke_color);
 }
-.primary:hover,
-.primary:focus {
+.primary:hover
+/* .primary:focus  */
+{
   --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
 }
 .checkedprimary {
   --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
 }
-.danger:hover,
-.danger:focus {
+.danger:hover
+/* .danger:focus */
+ {
   --checkbox_stroke_color: var(--zdt_checkbox_danger_stroke_border);
 }
 .checkeddanger {
@@ -120,15 +122,17 @@
 .checkeddangerLabel {
   color: var(--checkbox_checked_active_color);
 }
-.activeprimaryLabel:hover,
-.activeprimaryLabel:focus {
+.activeprimaryLabel:hover
+/* .activeprimaryLabel:focus  */
+{
   --label_text_color: var(--zdt_checkbox_label_primary_text);
 }
 .checkedprimaryLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
 }
-.activedangerLabel:hover,
-.activedangerLabel:focus {
+.activedangerLabel:hover
+/* .activedangerLabel:focus  */
+{
   --label_text_color: var(--zdt_checkbox_label_danger_text);
 }
 .checkeddangerLabel {