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

package/es/RippleEffect/docs/RippleEffect__default.docs.js

@@ -0,0 +1,435 @@
+import React from 'react';
+import RippleEffect from '../RippleEffect';
+export default class RippleEffect__default extends React.Component {
+  render() {
+    let style = {
+      margin: '20px 20px 0'
+    },
+        boxStyle = {
+      border: '1px solid #e3e6eb',
+      padding: '15px 20px 25px',
+      marginBottom: '10px'
+    },
+        titleStyle = {
+      fontSize: '13px',
+      paddingBottom: '25px',
+      textTransform: 'upperCase'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Hover Default"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer'
+      }
+    }, "Default"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primary"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_hover_text)'
+      }
+    }, "Primary"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryLight"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_text)'
+      }
+    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryFilled"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_secondary_text)'
+      }
+    }, "Primary Filled"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "green"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--dot_strongGreen)'
+      }
+    }, "Green"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "danger"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--dot_brightRed)'
+      }
+    }, "Danger")))), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Hover Border"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      hoverType: "border"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer'
+      }
+    }, "Default"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primary",
+      hoverType: "border"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_hover_text)'
+      }
+    }, "Primary"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryLight",
+      hoverType: "border"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_text)'
+      }
+    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "green",
+      hoverType: "border"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--dot_strongGreen)'
+      }
+    }, "Green"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "danger",
+      hoverType: "border"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--dot_brightRed)'
+      }
+    }, "Danger")))), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Hover Bg Color"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      hoverType: "bg"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px'
+      }
+    }, "Default"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryLight",
+      hoverType: "bg"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_text)'
+      }
+    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "green",
+      hoverType: "bg"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--dot_strongGreen)'
+      }
+    }, "Green"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "danger",
+      hoverType: "bg"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--dot_brightRed)'
+      }
+    }, "Danger"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryDark",
+      hoverType: "bg"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_text)'
+      }
+    }, "Primary Dark")))), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Disabled"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      isDisabled: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px'
+      }
+    }, "Default"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primary",
+      isDisabled: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_hover_text)'
+      }
+    }, "Primary"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryLight",
+      isDisabled: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_text)'
+      }
+    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryFilled",
+      isDisabled: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_secondary_text)'
+      }
+    }, "Primary Filled"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "green",
+      isDisabled: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        color: 'var(--dot_strongGreen)'
+      }
+    }, "Green")))), /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Active"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      isActive: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer'
+      }
+    }, "Default"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primary",
+      isActive: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_secondary_text)'
+      }
+    }, "Primary"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryLight",
+      isActive: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_text)'
+      }
+    }, "Primary Light"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryFilled",
+      isActive: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_secondary_text)'
+      }
+    }, "Primary Filled"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "green",
+      isActive: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--dot_strongGreen)'
+      }
+    }, "Green"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: '20px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: "primaryDark",
+      isActive: true
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '13px',
+        padding: '4px 9px 7px',
+        cursor: 'pointer',
+        color: 'var(--zdt_cta_primary_text)'
+      }
+    }, "Primary Dark")))));
+  }
+
+}
+
+if (false) {
+  RippleEffect__default.docs = {
+    componentGroup: 'RippleEffect',
+    folderName: 'Style Guide'
+  };
+}

package/es/Select/GroupSelect.js

@@ -13,7 +13,7 @@ import Icon from '@zohodesk/icons/lib/Icon';
 import DropDownHeading from '../DropDown/DropDownHeading';
 import { Container, Box } from '../Layout';
 import { getUniqueId } from '../Provider/IdProvider';
-import ResponsiveDropbox from '../ResponsiveDropbox/ResponsiveDropbox';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import style from './Select.module.css';
 /**** Methods ****/
@@ -690,7 +690,7 @@ export class GroupSelectComponent extends PureComponent {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropbox, {
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         animationStyle: animationStyle,
         boxPosition: position || `${defaultDropBoxPosition}Center`,
         getRef: getContainerRef,
@@ -699,9 +699,11 @@ export class GroupSelectComponent extends PureComponent {
         isArrow: false,
         onClick: removeClose,
         needResponsive: needResponsive,
-        isPadding: false
+        isPadding: false,
+        isResponsivePadding: getFooter ? false : true,
+        alignBox: "row"
       }, /*#__PURE__*/React.createElement(Box, {
-        className: style.responsiveParent
+        flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
         customClass: style.box,
         onScroll: this.handleScroll
@@ -723,6 +725,7 @@ export class GroupSelectComponent extends PureComponent {
         },
         autoComplete: false
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
+        shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
       }, suggestionGroups.length ? suggestionGroups.map(group => {

package/es/Select/Select.js

@@ -14,7 +14,7 @@ import Suggestions from '../MultiSelect/Suggestions';
 import EmptyState from '../MultiSelect/EmptyState';
 import { getUniqueId } from '../Provider/IdProvider';
 import Icon from '@zohodesk/icons/lib/Icon';
-import ResponsiveDropbox from '../ResponsiveDropbox/ResponsiveDropbox';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** Methods ****/
 
@@ -854,7 +854,7 @@ export class SelectComponent extends Component {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropbox, {
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         animationStyle: animationStyle,
         boxPosition: position || `${defaultDropBoxPosition}`,
         getRef: getContainerRef,
@@ -866,10 +866,10 @@ export class SelectComponent extends Component {
         dataId: `${dataId}_suggestions`,
         size: boxSize,
         isPadding: false,
-        isResponsivePadding: true,
+        isResponsivePadding: getFooter ? false : true,
         alignBox: "row"
       }, !getChildren ? /*#__PURE__*/React.createElement(Box, {
-        className: style.responsiveParent
+        flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
         onScroll: this.handleScroll
       }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
@@ -895,6 +895,7 @@ export class SelectComponent extends Component {
           TextBoxProps: DropdownSearchTextBoxProps
         }
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
+        shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
       }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
@@ -924,7 +925,9 @@ export class SelectComponent extends Component {
         getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
         i18nKeys: i18nKeys,
         htmlId: ariaErrorId
-      })), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : getChildren());
+      })), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, getChildren()));
     }) : null);
   }
 

package/es/Select/Select.module.css

@@ -49,9 +49,6 @@
 .responsivelistItemContainer {
   padding: var(--zd_size10) 0 0;
 }
-.responsiveParent{
-  width: 100%;
-}
 .readonly {
   --textboxicon_icon_cursor: not-allowed;
 }
@@ -81,6 +78,9 @@
 .dropBoxList {
   padding: var(--zd_size10) 0;
 }
+.responsivedropBoxList{
+  padding: var(--zd_size10) 0 0 0;
+}
 .rotate {
   transform: rotateX(180deg);
 }

package/es/Select/SelectWithAvatar.js

@@ -14,7 +14,7 @@ import Suggestions from '../MultiSelect/Suggestions';
 import EmptyState from '../MultiSelect/EmptyState';
 import DropDownHeading from '../DropDown/DropDownHeading';
 import { getUniqueId } from '../Provider/IdProvider';
-import ResponsiveDropbox from '../ResponsiveDropbox/ResponsiveDropbox';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
@@ -239,7 +239,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropbox, {
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         animationStyle: animationStyle,
         boxPosition: position || `${defaultDropBoxPosition}Center`,
         getRef: getContainerRef,
@@ -249,9 +249,10 @@ class SelectWithAvatarComponent extends SelectComponent {
         onClick: removeClose,
         needResponsive: needResponsive,
         isPadding: false,
-        isResponsivePadding: true
+        isResponsivePadding: true,
+        alignBox: "row"
       }, /*#__PURE__*/React.createElement(Box, {
-        className: style.responsiveParent
+        flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
         onScroll: this.handleScroll
       }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
@@ -273,6 +274,7 @@ class SelectWithAvatarComponent extends SelectComponent {
         },
         autoComplete: false
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
+        shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
       }, groupName ? /*#__PURE__*/React.createElement("div", {

package/es/Select/SelectWithIcon.js

@@ -11,7 +11,7 @@ import Card, { CardHeader, CardContent } from '../Card/Card';
 import EmptyState from '../MultiSelect/EmptyState';
 import { Container, Box } from '../Layout';
 import { getUniqueId } from '../Provider/IdProvider';
-import ResponsiveDropbox from '../ResponsiveDropbox/ResponsiveDropbox';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** Methods ****/
 
@@ -365,7 +365,7 @@ class SelectWithIcon extends Component {
       let {
         tabletMode
       } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropbox, {
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         animationStyle: animationStyle,
         boxPosition: position,
         isActive: isPopupReady,
@@ -377,9 +377,10 @@ class SelectWithIcon extends Component {
         dataId: `${dataId}_suggestions`,
         size: boxSize,
         isPadding: false,
-        isResponsivePadding: true
+        isResponsivePadding: true,
+        alignBox: "row"
       }, /*#__PURE__*/React.createElement(Box, {
-        className: style.responsiveParent
+        flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
         onScroll: this.handleScroll,
         htmlId: setAriaId,
@@ -403,7 +404,8 @@ class SelectWithIcon extends Component {
         },
         autoComplete: false
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
-        customClass: `${style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''}`,
+        customClass: `${tabletMode ? style.responsivedropBoxList : style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''}`,
+        shrink: true,
         eleRef: this.scrollContentRef
       }, options.length ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((options, i) => {
         let {