@zohodesk/components 1.0.0-temp-352 → 1.0.0-temp-666

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/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;
@@ -178,4 +177,13 @@
 }
 .search{
   padding: 0px 20px;
+}
+.more {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_multiselect_more_text);
+  cursor: pointer;
+  margin-top: var(--zd_size5);
+  font-family: inherit;
+  background-color: var(--zdt_multiselect_delete_bg);
+  border: 0;
 }

package/es/Responsive/ResizeComponent.js

@@ -25,7 +25,8 @@ export default class ResizeComponent extends React.Component {
     this.isAnimating = false;
     this.state = {
       responsiveHook: true,
-      validListCount: this.props.childrenList ? this.props.childrenList.length : 0
+      validListCount: this.props.childrenList ? this.props.childrenList.length : 0,
+      emptyDataCount: this.props.childrenList ? this.props.childrenList.length : 0
     };
   }
 
@@ -109,6 +110,7 @@ export default class ResizeComponent extends React.Component {
   }
 
   reset() {
+    this.forceUpdate = true;
     this.childrenCurrentList = [];
     this.tabsObserver.disconnect();
     this.tabObserver && this.tabObserver.disconnect();
@@ -146,9 +148,12 @@ export default class ResizeComponent extends React.Component {
   onResize(size) {
     if (size) {
       window.requestAnimationFrame(() => {
-        if (this.height !== size.height || this.width !== size.width && !this.isAnimating) {
+        if (this.forceUpdate || (this.height !== size.height || this.width !== size.width || this.scrollWidth !== size.scrollWidth || this.scrollHeight !== size.scrollHeight) && !this.isAnimating) {
+          this.forceUpdate = false;
           this.height = size.height;
           this.width = size.width;
+          this.scrollHeight = size.scrollHeight;
+          this.scrollWidth = size.scrollWidth;
           this.childrenCurrentList = [];
           this.constructChildren(0, false);
         }
@@ -180,7 +185,7 @@ export default class ResizeComponent extends React.Component {
       let dataCount = 0;
       this.noSpaceForChildren = false;
 
-      if (totalWidth <= moreWidth) {
+      if (totalWidth + moreWidth <= moreWidth) {
         this.noSpaceForChildren = true;
       } else {
         for (let i = 0; i < childrenWidthList.length; i++) {
@@ -199,6 +204,8 @@ export default class ResizeComponent extends React.Component {
             }
 
             break;
+          } else {
+            dataCount++;
           }
         }
       }
@@ -219,23 +226,28 @@ export default class ResizeComponent extends React.Component {
     // let responsive = arguments.length > 1 ? arguments[1] : undefined;
     //let isResize = arguments.length > 2 ? arguments[2] : false;
 
-    dataCount = dataCount || childrenList && childrenList.length; // dataCount = responsive ? dataCount : dataCount || (childrenList && childrenList.length);
+    dataCount = dataCount || childrenList && childrenList.length;
+    let rederElementCount = this.querySelector().length;
+    let emptyCount = childrenList.length - rederElementCount; // dataCount = responsive ? dataCount : dataCount || (childrenList && childrenList.length);
     //dataCount = !isResize ? dataCount : dataCount || (childrenList && childrenList.length);
 
     this.setState({
       responsiveHook: responsive,
-      validListCount: this.noSpaceForChildren ? 0 : dataCount
+      validListCount: this.noSpaceForChildren ? 0 : dataCount,
+      emptyDataCount: emptyCount
     });
   }
 
   render() {
     let {
       responsiveHook,
-      validListCount
+      validListCount,
+      emptyDataCount
     } = this.state;
     return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children({
       responsiveHook,
-      validListCount
+      validListCount,
+      emptyDataCount
     }));
   }
 

package/es/Responsive/ResizeObserver.js

@@ -8,12 +8,16 @@ const mutationObserverOptions = {
 function getSize(element) {
   let {
     offsetHeight,
-    offsetWidth
+    offsetWidth,
+    scrollHeight,
+    scrollWidth
   } = element; // const { height, width } = element.getBoundingClientRect();
 
   return {
     height: offsetHeight,
-    width: offsetWidth
+    width: offsetWidth,
+    scrollHeight: scrollHeight,
+    scrollWidth: scrollWidth
   };
 }
 

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/deprecated/AdvancedMultiSelect.module.css

@@ -0,0 +1,113 @@
+.wrapper {
+  position: relative;
+}
+.disabled,
+.readOnly {
+  cursor: not-allowed;
+}
+.container {
+  max-height: var(--zd_size120);
+  composes: oflowy from '../common/common.module.css';
+}
+.hasBorder {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  transition: border var(--zd_transition2) linear 0s;
+}
+.borderColor_transparent {
+  border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
+}
+.effect .borderColor_transparent:hover {
+  border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
+}
+.effect .borderColor_transparent.active {
+  border-bottom-color: var(--zdt_advancedmultiselect_transparent_active_border);
+}
+.borderColor_default {
+  border-bottom-color: var(--zdt_advancedmultiselect_default_border);
+}
+.effect .borderColor_default:hover {
+  border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
+}
+.effect .borderColor_default.active {
+  border-bottom-color: var(--zdt_advancedmultiselect_default_active_border);
+}
+.borderColor_dark {
+  border-bottom-color: var(--zdt_advancedmultiselect_dark_border);
+}
+.effect .borderColor_dark:hover {
+  border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
+}
+.effect .borderColor_dark.active {
+  border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
+}
+.container.medium {
+  padding: 0 var(--zd_size34) var(--zd_size7) 0;
+}
+.container.xmedium {
+  padding: 0 var(--zd_size34) var(--zd_size1) 0;
+  min-height: var(--zd_size30);
+}
+
+.delete {
+  position: absolute;
+  bottom: 0;
+  right: var(--zd_size15);
+  padding-bottom: var(--zd_size10);
+  color: var(--zdt_advancedmultiselect_delete_text);
+  cursor: pointer;
+  background-color: var(--zdt_advancedmultiselect_delete_bg);
+  border: 0;
+}
+
+.delete:hover {
+  color: var(--zdt_advancedmultiselect_delete_hover_text);
+}
+.transparentContainer .delete {
+  opacity: 0;
+  visibility: hidden;
+}
+.transparentContainer:hover .delete {
+  opacity: 1;
+  visibility: visible;
+}
+
+.box {
+  background: var(--zdt_advancedmultiselect_box_bg);
+}
+
+.small {
+  max-height: var(--zd_size200);
+}
+
+.medium {
+  max-height: var(--zd_size350);
+}
+
+.large {
+  max-height: var(--zd_size400);
+}
+
+.dropContainer {
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: var(--zd_size5);
+}
+
+.dropPopup {
+  font-size: var(--zd_font_size13);
+}
+
+.dropPopup :global .toggleDropIcon {
+  color: var(--zdt_advancedmultiselect_droppopup_text);
+}
+
+.more {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_advancedmultiselect_more_text);
+  cursor: pointer;
+  margin-top: var(--zd_size5);
+  font-family: inherit;
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-352",
+  "version": "1.0.0-temp-666",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -72,4 +72,4 @@
       "hasRTL": true
     }
   }
-}
+}