@zohodesk/components 1.0.0-temp-196 → 1.0.0-temp-197

package/es/Tab/Tabs.module.css

@@ -31,7 +31,7 @@
   bottom: 0 ;
   height: var(--zd_size10) ;
   border-radius: 100px / 5px;
-  box-shadow: var(--zd_bs_tabs_shadow);
+  box-shadow: var(--zd_bs_contrast_outline, 0 -2px 9px var(--zdt_tabs_alpha_box_shadow));
 }
 
 [dir=ltr] .alpha::after {
@@ -123,13 +123,13 @@
 .bottomRightToLeft,
 .topRightToLeft,
 .bottomCenterToLeft {
-  right: calc(var(--tab_position_gap) * -1); 
+  right: calc(var(--tab_position_gap) * -1);
 }
 
 .bottomLeftToRight,
 .topLeftToRight,
 .bottomCenterToRight {
-  left: calc(var(--tab_position_gap) * -1); 
+  left: calc(var(--tab_position_gap) * -1);
 }
 
 .hidden {

package/es/Tag/Tag.js

@@ -7,16 +7,16 @@ import { Container } from '../Layout';
 import Button from '../semantic/Button/Button';
 import { getUniqueId } from '../Provider/IdProvider';
 import style from './Tag.module.css';
-/*
- * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
- * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
- * 'pureDotted', 'primaryDotted'] }]
+/*
+ * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
+ * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
+ * 'pureDotted', 'primaryDotted'] }]
  */
 
-/*
- * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
- * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
- * 'pureDotted', 'primaryDotted'] }]
+/*
+ * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
+ * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
+ * 'pureDotted', 'primaryDotted'] }]
  */
 
 export default class Tag extends PureComponent {
@@ -80,7 +80,6 @@ export default class Tag extends PureComponent {
       tooltip,
       avatarPalette,
       customClass,
-      customAttributes,
       a11y,
       needEffect,
       isReadOnly
@@ -106,8 +105,7 @@ export default class Tag extends PureComponent {
       "data-title": tooltip ? tooltip : text,
       tabIndex: disabled ? '-1' : '0',
       "aria-labelledby": getAriaId,
-      "data-selector-id": dataSelectorId,
-      ...customAttributes
+      "data-selector-id": dataSelectorId
     }, hasAvatar ? /*#__PURE__*/React.createElement("div", {
       className: style.avatar
     }, /*#__PURE__*/React.createElement(Avatar, {

package/es/Tag/props/defaultProps.js

@@ -7,7 +7,6 @@ export const defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
-  customAttributes: {},
   a11y: {},
   needEffect: true,
   isReadOnly: false,

package/es/Tag/props/propTypes.js

@@ -26,7 +26,6 @@ export const propTypes = {
     customTagIcon: PropTypes.string,
     customAvatar: PropTypes.string
   }),
-  customAttributes: PropTypes.object,
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
   }),

package/es/Tooltip/Tooltip.module.css

@@ -3,6 +3,7 @@
   z-index: 9999999;
   /*Hook for editor alert*/
   pointer-events: none;
+  /*css:validation:ignore*/
   box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
   border-radius: var(--zd_size4);
 }[dir=ltr] .tooltiptext {
@@ -51,6 +52,7 @@
   border-left: solid 6px var(--zdt_tooltip_default_bg);
   border-right: solid 6px transparent;
   border-bottom: solid 6px transparent;
+  /*css:validation:ignore*/
   box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
   z-index: -1;
 }
@@ -71,6 +73,7 @@
   border-left: solid 6px var(--zdt_tooltip_default_bg);
   border-right: solid 6px transparent;
   border-bottom: solid 6px transparent;
+  /*css:validation:ignore*/
   box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
   z-index: -1;
 }

package/es/v1/AppContainer/AppContainer.js

@@ -12,7 +12,6 @@ import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import '../../common/a11y.module.css';
-import '../../common/boxShadow.module.css';
 import style from '../../AppContainer/AppContainer.module.css';
 import { getLibraryConfig, setLibraryConfig } from '../../Provider/Config';
 export default function AppContainer(props) {

package/es/v1/Avatar/Avatar.js

@@ -5,11 +5,11 @@ import { propTypes } from './props/propTypes';
 import { getInitial } from '../../utils/getInitial';
 import AvatarSize from '../../Provider/AvatarSize';
 import style from '../../Avatar/Avatar.module.css';
-/*
-1. need to change name into firstName lastName
-2. pattern support via context as well as props
-3. prop high priority to arrange firstName lastName
-4. team pass name as lastName and pass pattern via prop
+/*
+1. need to change name into firstName lastName
+2. pattern support via context as well as props
+3. prop high priority to arrange firstName lastName
+4. team pass name as lastName and pass pattern via prop
 */
 
 function Avatar(props) {

package/es/v1/AvatarTeam/AvatarTeam.js

@@ -3,10 +3,10 @@ import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import Avatar from '../Avatar/Avatar';
 import style from '../../AvatarTeam/AvatarTeam.module.css';
-/* once avatar support firstname lastname and pattern
-pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
-
-Not going to export to external then can kept inside supportapp
+/* once avatar support firstname lastname and pattern
+pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
+
+Not going to export to external then can kept inside supportapp
 */
 
 export default function AvatarTeam(props) {

package/es/v1/Button/Button.js

@@ -4,10 +4,10 @@ import { propTypes } from './props/propTypes';
 import cssJSLogic from '../../Button/css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
 import style from '../../Button/css/Button.module.css';
-/*
-Button text and children props?
-use children for both cases
-toLowerCase check needed?
+/*
+Button text and children props?
+use children for both cases
+toLowerCase check needed?
 */
 
 export default function Button(props) {

package/es/v1/Card/Card.js

@@ -7,10 +7,10 @@ import { getLibraryConfig } from '../../Provider/Config';
 import style from '../../Card/Card.module.css';
 /* eslint-disable react/forbid-component-props */
 
-/*
-isscroll header border change use ref
-scroll logic remove from here
-scroll logic move to virtualizer list
+/*
+isscroll header border change use ref
+scroll logic remove from here
+scroll logic move to virtualizer list
 */
 
 /* performance handling pending in card component moving to ref instead of setState */

package/es/v1/MultiSelect/AdvancedGroupMultiSelect.js

@@ -409,8 +409,8 @@ class AdvancedGroupMultiSelect extends React.Component {
     if (suggestionsLen && isPopupOpen && keyCode === 38) {
       //up arrow
 
-      /*if (hoverOption === 0) { //disable first to last option higlight
-        !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
+      /*if (hoverOption === 0) { //disable first to last option higlight
+        !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
       }*/
       if (hoverIndex) {
         this.setState({
@@ -420,9 +420,9 @@ class AdvancedGroupMultiSelect extends React.Component {
     } else if (suggestionsLen && isPopupOpen && keyCode === 40) {
       //down arrow
 
-      /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
-        //disable last to first option higlight
-        !isNextOptions && this.setState({ hoverOption: 0 });
+      /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
+        //disable last to first option higlight
+        !isNextOptions && this.setState({ hoverOption: 0 });
       }*/
       if (isNextOptions && suggestionsLen >= 5 && hoverIndex === suggestionsLen - 3) {
         getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);

package/es/v1/MultiSelect/MultiSelect.js

@@ -321,8 +321,8 @@ export class MultiSelectComponent extends React.Component {
     if (suggestionsLen && isPopupOpen && keyCode === 38) {
       //up arrow
 
-      /*if (hoverOption === 0) { //disable first to last option higlight
-        !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
+      /*if (hoverOption === 0) { //disable first to last option higlight
+        !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
       }*/
       if (hoverOption) {
         this.setState({
@@ -332,9 +332,9 @@ export class MultiSelectComponent extends React.Component {
     } else if (suggestionsLen && isPopupOpen && keyCode === 40) {
       //down arrow
 
-      /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
-        //disable last to first option higlight
-        !isNextOptions && this.setState({ hoverOption: 0 });
+      /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
+        //disable last to first option higlight
+        !isNextOptions && this.setState({ hoverOption: 0 });
       }*/
       if (isNextOptions && suggestionsLen >= 5 && hoverOption === suggestionsLen - 3) {
         getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);

package/es/v1/Tab/Tabs.js

@@ -121,9 +121,9 @@ const Tabs = props => {
 
   useEffectCallOnlyAfterState(() => {
     if (children) {
-      /**
-       * To recalculate the dimensions of tabs we are checking the children length.
-       * and also checking the tab id and their order.
+      /**
+       * To recalculate the dimensions of tabs we are checking the children length.
+       * and also checking the tab id and their order.
        */
       let newTabKeys = [];
       React.Children.toArray(children).forEach(child => {
@@ -264,14 +264,14 @@ const Tabs = props => {
       });
 
       if (selectedTabDimension > totalDimension) {
-        /* let { align } = this.props;
-        let newDim = `${remConvert(totalDimension)}rem`;
-        let newTabs;
-        if (align === 'vertical') {
-          newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxWidth: newDim } }));
-        } else {
-          newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
-        }
+        /* let { align } = this.props;
+        let newDim = `${remConvert(totalDimension)}rem`;
+        let newTabs;
+        if (align === 'vertical') {
+          newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxWidth: newDim } }));
+        } else {
+          newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
+        }
         mainTabs = newTabs; */
         setMaxDim(totalDimension);
       }

package/es/v1/Tab/v1Tabs.module.css

@@ -31,7 +31,7 @@
   bottom: 0 ;
   height: var(--zd_size10) ;
   border-radius: 100px / 5px;
-  box-shadow: var(--zd_bs_tabs_shadow);
+  box-shadow: var(--zd_bs_contrast_outline, 0 -2px 9px var(--zdt_tabs_alpha_box_shadow));
 }
 
 [dir=ltr] .alpha::after {
@@ -123,13 +123,13 @@
 .bottomRightToLeft,
 .topRightToLeft,
 .bottomCenterToLeft {
-  right: calc(var(--tab_position_gap) * -1); 
+  right: calc(var(--tab_position_gap) * -1);
 }
 
 .bottomLeftToRight,
 .topLeftToRight,
 .bottomCenterToRight {
-  left: calc(var(--tab_position_gap) * -1); 
+  left: calc(var(--tab_position_gap) * -1);
 }
 
 .hidden {

package/es/v1/Tag/Tag.js

@@ -7,16 +7,16 @@ import { Container } from '../Layout';
 import Button from '../semantic/Button/Button';
 import { useUniqueId } from '../../Provider/IdProvider';
 import style from '../../Tag/Tag.module.css';
-/*
- * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
- * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
- * 'pureDotted', 'primaryDotted'] }]
+/*
+ * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
+ * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
+ * 'pureDotted', 'primaryDotted'] }]
  */
 
-/*
- * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
- * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
- * 'pureDotted', 'primaryDotted'] }]
+/*
+ * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
+ * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',
+ * 'pureDotted', 'primaryDotted'] }]
  */
 
 function Tag(props) {
@@ -41,7 +41,6 @@ function Tag(props) {
     tooltip,
     avatarPalette,
     customClass,
-    customAttributes,
     a11y,
     needEffect,
     isReadOnly,
@@ -91,8 +90,7 @@ function Tag(props) {
     "data-title": tooltip ? tooltip : text,
     tabIndex: disabled ? '-1' : '0',
     "aria-labelledby": getAriaId,
-    "data-selector-id": dataSelectorId,
-    ...customAttributes
+    "data-selector-id": dataSelectorId
   }, hasAvatar ? /*#__PURE__*/React.createElement("div", {
     className: style.avatar
   }, /*#__PURE__*/React.createElement(Avatar, {

package/es/v1/Tag/props/defaultProps.js

@@ -7,7 +7,6 @@ export const defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
-  customAttributes: {},
   a11y: {},
   needEffect: true,
   isReadOnly: false,

package/es/v1/Tag/props/propTypes.js

@@ -26,7 +26,6 @@ export const propTypes = {
     customTagIcon: PropTypes.string,
     customAvatar: PropTypes.string
   }),
-  customAttributes: PropTypes.object,
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
   }),

package/lib/AppContainer/AppContainer.js

@@ -35,8 +35,6 @@ require("@zohodesk/variables/assets/no_transitionVariables.module.css");
 
 require("../common/a11y.module.css");
 
-require("../common/boxShadow.module.css");
-
 var _AppContainerModule = _interopRequireDefault(require("./AppContainer.module.css"));
 
 var _Config = require("../Provider/Config");

package/lib/Avatar/Avatar.js

@@ -55,17 +55,17 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-/*
-1. need to change name into firstName lastName
-2. pattern support via context as well as props
-3. prop high priority to arrange firstName lastName
-4. team pass name as lastName and pass pattern via prop
+/*
+1. need to change name into firstName lastName
+2. pattern support via context as well as props
+3. prop high priority to arrange firstName lastName
+4. team pass name as lastName and pass pattern via prop
 */
 
-/*
-eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
-'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
-"info","default"] }]
+/*
+eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
+'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
+"info","default"] }]
 */
 var Avatar = /*#__PURE__*/function (_React$Component) {
   _inherits(Avatar, _React$Component);

package/lib/Avatar/Avatar.module.css

@@ -53,11 +53,11 @@
 }
 
 .shadow.black {
-  box-shadow: var(--zd_bs_avatar_black);
+  box-shadow: var(--zd_bs_contrast_outline, inset 0px 0px 5px var(--avatar_boxshadow));
 }
 
 .shadow.white {
-  box-shadow: var(--zd_bs_avatar_white);
+  box-shadow: var(--zd_bs_contrast_outline, inset 0px 0px 11px var(--avatar_boxshadow));
 }
 
 .avatar, .circle {