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

package/es/ListItem/docs/ListItemWithIcon__default.docs.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import ListItemWithIcon from '../ListItemWithIcon';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class ListItemWithIcon__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      autoHover: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      highlight: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem",
+      iconName: "ZD-teams2",
+      active: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      value: "ListItem disabled",
+      isDisabled: true,
+      iconName: "ZD-teams2",
+      active: true
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithIcon__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithRadio__custom.docs.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import ListItemWithRadio from '../ListItemWithRadio';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class ListItemWithRadio__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      id: "11"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      autoHover: true,
+      id: "12"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      highlight: true,
+      checked: true,
+      id: "13"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      value: "ListItem",
+      active: true,
+      checked: true,
+      id: "14"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      customClass: {
+        customListItem: style.listItem,
+        customRadio: style.listRadio,
+        customRadioWrap: style.listRadioWrap
+      },
+      isDisabled: true,
+      value: "ListItem disabled",
+      active: true,
+      checked: true,
+      id: "14"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithRadio__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItemWithRadio__default.docs.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import ListItemWithRadio from '../ListItemWithRadio';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class ListItemWithRadio__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      id: "11"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      autoHover: true,
+      id: "12"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      highlight: true,
+      checked: true,
+      id: "13"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      value: "ListItem",
+      active: true,
+      checked: true,
+      id: "14"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      isDisabled: true,
+      value: "ListItem disabled",
+      active: true,
+      checked: true,
+      id: "14"
+    }))));
+  }
+
+}
+
+if (false) {
+  ListItemWithRadio__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItem__custom.docs.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import ListItem from '../ListItem';
+import style from '../../common/docStyle.module.css';
+export default class ListItem__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      isLink: true,
+      href: "https://zoho.com",
+      disableTitle: "Disabled list",
+      palette: "default"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      autoHover: true,
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      highlight: true,
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      autoHover: true,
+      active: true,
+      disableTitle: "Disabled list",
+      title: "ListItem title"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem",
+      active: true,
+      needTick: true,
+      disableTitle: "disabled list",
+      palette: "dark"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      value: "ListItem disabled",
+      palette: "secondary",
+      autoHover: true,
+      isDisabled: true,
+      disableTitle: "disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      customClass: {
+        customListItem: style.listItem,
+        customTickIcon: style.listTick
+      },
+      autoHover: true,
+      active: true,
+      value: "ListItemListItemListItemListItemListItem"
+    }, "ChildrenChildrenChildren ChildrenChildrenChildrenChildren")));
+  }
+
+}
+
+if (false) {
+  ListItem__custom.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/ListItem/docs/ListItem__default.docs.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import ListItem from '../ListItem';
+export default class ListItem__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '250px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      isLink: true,
+      href: "https://zoho.com",
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      autoHover: true,
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      highlight: true,
+      disableTitle: "Disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      active: true,
+      disableTitle: "Disabled list",
+      title: "ListItem title"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem",
+      active: true,
+      needTick: true,
+      disableTitle: "disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      value: "ListItem disabled",
+      palette: "secondary",
+      autoHover: true,
+      isDisabled: true,
+      disableTitle: "disabled list"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(ListItem, {
+      autoHover: true,
+      active: true,
+      value: "ListItemListItemListItemListItemListItem"
+    }, "ChildrenChildrenChildren ChildrenChildrenChildrenChildren")));
+  }
+
+}
+
+if (false) {
+  ListItem__default.docs = {
+    componentGroup: 'Molecule',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -13,7 +13,7 @@ import Suggestions from '../MultiSelect/Suggestions';
 import EmptyState from '../MultiSelect/EmptyState';
 import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
 import { getUniqueId } from '../Provider/IdProvider';
-import ResponsiveDropbox from '../ResponsiveDropbox/ResponsiveDropbox';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** Icons ****/
 
@@ -844,7 +844,7 @@ class AdvancedGroupMultiSelect extends React.Component {
       isPopupReady,
       defaultDropBoxPosition,
       removeClose,
-      needResponsive = false,
+      needResponsive,
       animationStyle,
       needSelectAll,
       selectAllText,
@@ -972,7 +972,7 @@ class AdvancedGroupMultiSelect extends React.Component {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropbox, {
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         animationStyle: animationStyle,
         boxPosition: position || `${defaultDropBoxPosition}Center`,
         getRef: getContainerRef,
@@ -987,9 +987,10 @@ class AdvancedGroupMultiSelect extends React.Component {
         a11y: {
           role: 'listbox',
           ariaMultiselectable: true
-        }
+        },
+        alignBox: "row"
       }, /*#__PURE__*/React.createElement(Box, {
-        className: style.responsiveParent
+        flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
         customClass: `${style.box} ${style[`${palette}Box`]}`,
         onScroll: this.handleScroll
@@ -1000,6 +1001,7 @@ class AdvancedGroupMultiSelect extends React.Component {
         suggestions: suggestionOptionIds,
         dataId: dataId
       })), isDataLoaded ? /*#__PURE__*/React.createElement(CardContent, {
+        shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
       }, /*#__PURE__*/React.createElement(React.Fragment, {
@@ -1086,7 +1088,8 @@ AdvancedGroupMultiSelect.defaultProps = {
   i18nKeys: {},
   a11y: {},
   isSearchClearOnSelect: true,
-  needEffect: PropTypes.bool
+  needEffect: PropTypes.bool,
+  palette: 'default'
 };
 AdvancedGroupMultiSelect.propTypes = {
   animationStyle: PropTypes.string,

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -16,7 +16,7 @@ import { Container, Box } from '../Layout';
 import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { getUniqueId } from '../Provider/IdProvider';
-import ResponsiveDropbox from '../ResponsiveDropbox/ResponsiveDropbox';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
@@ -471,7 +471,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropbox, _extends({
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
         animationStyle: animationStyle,
         boxPosition: position || `${defaultDropBoxPosition}Center`,
         getRef: getContainerRef,
@@ -486,8 +486,11 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
           role: 'listbox',
           ariaMultiselectable: true
         }
-      }, DropBoxProps), /*#__PURE__*/React.createElement(Box, {
-        className: style.responsiveParent
+      }, DropBoxProps, {
+        alignBox: "row",
+        isResponsivePadding: getFooter ? false : true
+      }), /*#__PURE__*/React.createElement(Box, {
+        flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
         customClass: style.box,
         onScroll: this.handleScroll
@@ -498,6 +501,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         suggestions: suggestions,
         dataId: dataIdSelectAllEle
       })), /*#__PURE__*/React.createElement(CardContent, {
+        shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
       }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({

package/es/MultiSelect/AdvancedMultiSelect.module.css

@@ -14,9 +14,6 @@
   border-bottom-width: 1px;
   transition: border var(--zd_transition2) linear 0s;
 }
-.responsiveParent{
-  width: 100%;
-}
 .borderColor_transparent {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
 }

package/es/MultiSelect/MultiSelect.js

@@ -13,7 +13,7 @@ import EmptyState from './EmptyState';
 import MultiSelectHeader from './MultiSelectHeader';
 import CssProvider from '../Provider/CssProvider';
 import { getUniqueId } from '../Provider/IdProvider';
-import ResponsiveDropbox from '../ResponsiveDropbox/ResponsiveDropbox';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** Icons ****/
 
@@ -997,7 +997,7 @@ export class MultiSelectComponent extends React.Component {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropbox, {
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         animationStyle: animationStyle,
         boxPosition: position || `${defaultDropBoxPosition}`,
         getRef: getContainerRef,
@@ -1015,9 +1015,10 @@ export class MultiSelectComponent extends React.Component {
           ariaMultiselectable: true
         },
         size: boxSize,
-        alignBox: "row"
+        alignBox: "row",
+        isResponsivePadding: getFooter ? false : true
       }, /*#__PURE__*/React.createElement(Box, {
-        className: style.responsiveParent
+        flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
         customClass: `${style.box} ${style[`${palette}Box`]}`,
         onScroll: this.handleScroll
@@ -1028,6 +1029,7 @@ export class MultiSelectComponent extends React.Component {
         suggestions: suggestions,
         dataId: dataId
       })), /*#__PURE__*/React.createElement(CardContent, {
+        shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
       }, isSearching ? /*#__PURE__*/React.createElement("div", {

package/es/MultiSelect/MultiSelect.module.css

@@ -176,3 +176,6 @@
 .clearIconSpace {
   padding-right: var(--zd_size37)
 }
+.search{
+  padding: 0px 20px;
+}

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -14,7 +14,7 @@ import EmptyState from './EmptyState';
 import MultiSelectHeader from './MultiSelectHeader';
 import CssProvider from '../Provider/CssProvider';
 import { getUniqueId } from '../Provider/IdProvider';
-import ResponsiveDropbox from '../ResponsiveDropbox/ResponsiveDropbox';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** Icons ****/
 
@@ -208,7 +208,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropbox, {
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         animationStyle: animationStyle,
         boxPosition: position || `${defaultDropBoxPosition}Center`,
         getRef: getContainerRef,
@@ -225,9 +225,10 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
           ariaMultiselectable: true,
           role: 'listbox'
         },
-        isResponsivePadding: true
+        isResponsivePadding: true,
+        alignBox: "row"
       }, /*#__PURE__*/React.createElement(Box, {
-        className: style.responsiveParent
+        flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
         customClass: `${style.box} ${style[`${palette}Box`]}`,
         onScroll: this.handleScroll
@@ -238,6 +239,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         suggestions: suggestions,
         dataId: dataId
       })), /*#__PURE__*/React.createElement(CardContent, {
+        shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
       }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {