@zohodesk/components 1.0.0-temp-199.9 → 1.0.0-temp-216.1

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -73,19 +73,19 @@
 }
 
 /* shadow */
-[data-box-direction="top"]>.shadow {
+.top_shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_top);
 }
 
-[data-box-direction="left"]>.shadow {
+.left_shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_left);
 }
 
-[data-box-direction="right"]>.shadow {
+.right_shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_right);
 }
 
-[data-box-direction="bottom"]>.shadow {
+.bottom_shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
 }
 
@@ -158,41 +158,41 @@
     transform: translateY(-50%);
 }
 
-/* space for arrow using data-box-direction attribute*/
-.arrow[data-box-direction="top"] {
+/* space for arrow */
+.arrowtop {
     padding-bottom: var(--zd_size10) ;
 }
 
-.arrow[data-box-direction="right"] {
+.arrowright {
     padding-left: var(--zd_size10) ;
 }
 
-.arrow[data-box-direction="left"] {
+.arrowleft {
     padding-right: var(--zd_size10) ;
 }
 
-.arrow[data-box-direction="bottom"] {
+.arrowbottom {
     padding-top: var(--zd_size10) ;
 }
 
-/* space from target using data-box-direction attribute*/
-.paddingSpace[data-box-direction="top"] {
+/* space from target */
+.paddingSpace_top {
     padding-bottom: var(--zd_size5) ;
 }
 
-.paddingSpace[data-box-direction="right"] {
+.paddingSpace_right {
     padding-left: var(--zd_size5) ;
 }
 
-.paddingSpace[data-box-direction="left"] {
+.paddingSpace_left {
     padding-right: var(--zd_size5) ;
 }
 
-.paddingSpace[data-box-direction="bottom"] {
+.paddingSpace_bottom {
     padding-top: var(--zd_size5) ;
 }
 
-.arrowBase {
+.arrow {
     position: absolute;
     height: var(--zd_size34) ;
     width: var(--zd_size34) ;
@@ -213,106 +213,107 @@
 }
 
 /* arrow placement styles */
-.arrowPosition {
-    composes: arrowBase;
+.start,
+.end,
+.mid {
+    composes: arrow;
 }
 
-.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="top"][data-arrow-position="end"] .arrowPosition,
-.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
+.top .start,
+.top .end,
+.top .mid {
     bottom: calc( var(--zd_size17) * -1 ) ;
 }
 
-.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition {
+.top .start {
     left: var(--zd_size28) ;
 }
 
-.boxDirection[data-box-direction="top"][data-arrow-position="end"] .arrowPosition {
+.top .end {
     right: var(--zd_size28) ;
     transform: rotate(180deg) translateX(-50%);
 }
 
-.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
+.top .mid {
     left: 50% ;
 }
 
-.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
+.top .start,
+.top .mid {
     transform: rotate(180deg) translateX(50%);
 }
 
-.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="bottom"][data-arrow-position="end"] .arrowPosition,
-.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition {
+.bottom .start,
+.bottom .end,
+.bottom .mid {
     top: calc( var(--zd_size17) * -1 ) ;
 }
 
-.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition {
+.bottom .start {
     left: var(--zd_size28) ;
 }
 
-.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition {
+.bottom .mid {
     left: 50% ;
 }
 
-.boxDirection[data-box-direction="bottom"][data-arrow-position="end"] .arrowPosition {
+.bottom .end {
     right: var(--zd_size28) ;
     transform: translateX(50%);
 }
 
-.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition,
-.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition {
+.bottom .mid,
+.bottom .start {
     transform: translateX(-50%);
 }
 
-.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition,
-.boxDirection[data-box-direction="left"][data-arrow-position="end"] .arrowPosition {
+.left .start,
+.left .mid,
+.left .end {
     right: calc( var(--zd_size17) * -1 ) ;
 }
 
-.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition {
+.left .start {
     top: var(--zd_size28) ;
 }
 
-.boxDirection[data-box-direction="left"][data-arrow-position="end"] .arrowPosition {
+.left .end {
     transform: rotate(90deg) translateX(50%);
     bottom: var(--zd_size28) ;
 }
 
-.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition {
+.left .mid {
     top: 50% ;
 }
 
-.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition {
+.left .start,
+.left .mid {
     transform: rotate(90deg) translateX(-50%);
 }
 
-.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition,
-.boxDirection[data-box-direction="right"][data-arrow-position="end"] .arrowPosition {
+.right .start,
+.right .mid,
+.right .end {
     left: calc( var(--zd_size17) * -1 ) ;
 }
 
-.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition {
+.right .start {
     top: var(--zd_size28) ;
 }
 
-.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition {
+.right .mid {
     top: 50% ;
 }
 
-.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition,
-.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition {
+.right .start,
+.right .mid {
     transform: rotate(-90deg) translateX(50%);
 }
 
-.boxDirection[data-box-direction="right"][data-arrow-position="end"] .arrowPosition {
+.right .end {
     bottom: var(--zd_size28) ;
     transform: rotate(-90deg) translateX(-50%);
 }
-[data-visible="hidden"],
 .hidden {
     visibility: hidden;
     opacity: 0;
@@ -320,7 +321,7 @@
     pointer-events: none;
 }
 
-[data-visible="hidden"] .subContainer, .hidden .subContainer {
+.hidden .subContainer {
     box-shadow: none;
 }
 
@@ -341,21 +342,17 @@
     composes: animationBasic;
     composes: fadeIn modeForward from '../../../common/animation.module.css';
 }
-
 .scaleIn {
     composes: animationBasic;
     composes: scaleIn from '../../../common/animation.module.css';
 }
-
 .bounce {
     composes: animationBasic;
 }
-
 [dir=ltr] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
 }
-
 [dir=rtl] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
@@ -417,7 +414,7 @@
 }
 
 .closeBar {
-    /*  Variable:Ignore  */
+  /*  Variable:Ignore  */
     height: 6px;
     width: 20% ;
     border-radius: 5px;

package/es/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -52,9 +52,9 @@ export default function cssJSLogic(_ref) {
     [style[boxPosition]]: isAbsolute && !isModel,
     [style.fixedContainer]: !isAbsolute && !isModel,
     [style[size]]: size && !isModel,
-    [style.boxDirection]: !isModel && isActive && isArrow,
-    [style.arrow]: !isModel && isActive && isArrow && isAbsolute,
-    [style.paddingSpace]: !isModel && isActive && !isArrow && isPadding
+    [style[boxDirection]]: !isModel && isActive && isArrow,
+    [style[`arrow${boxDirection}`]]: !isModel && isActive && isArrow && isAbsolute,
+    [style[`paddingSpace_${boxDirection}`]]: !isModel && isActive && !isArrow && isPadding
   });
   let subContainerClass = compileClassNames({
     [style.subContainer]: true,
@@ -62,7 +62,7 @@ export default function cssJSLogic(_ref) {
     [style.mobRadius]: !!isModel,
     [style.slideUp]: !!isModel && isActive,
     [customDropBox]: !isModel,
-    [style.shadow]: !isModel,
+    [style[`${boxDirection}_shadow`]]: !isModel,
     [style.boxPadding]: !isModel && isBoxPaddingNeed,
     [style.radius]: !isModel && isRadius,
     [style[animationValue]]: !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle

package/es/DropBox/__tests__/__snapshots__/DropBox.spec.js.snap

@@ -5,8 +5,6 @@ exports[`DropBox rendering the defult props 1`] = `
   <div
     class="main hidden container bottomStart default"
     data-a11y-focus-main-area="true"
-    data-arrow-position="end"
-    data-box-direction="bottom"
     data-id="dropBox"
     data-position="bottomStart"
     data-selector-id="dropBox"
@@ -14,14 +12,14 @@ exports[`DropBox rendering the defult props 1`] = `
     dot-ui-element="dropbox"
   >
     <div
-      class="subContainer shadow radius defaultPalette"
+      class="subContainer bottom_shadow radius defaultPalette"
       data-id="dropBox_subcontainer"
       data-selector-id="dropBox_subcontainer"
       data-test-id="dropBox_subcontainer"
       tabindex="-1"
     >
       <div
-        class="arrowPosition"
+        class="end"
         data-id="dropBox_arrow"
         data-selector-id="dropBox_arrow"
         data-test-id="dropBox_arrow"

package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap

@@ -15,8 +15,6 @@ exports[`DropDown rendering the defult props 1`] = `
     <div
       class="main hidden container bottomMid default"
       data-a11y-focus-main-area="true"
-      data-arrow-position="mid"
-      data-box-direction="bottom"
       data-id="dropBox"
       data-position="bottomMid"
       data-selector-id="dropBox"
@@ -24,7 +22,7 @@ exports[`DropDown rendering the defult props 1`] = `
       dot-ui-element="dropbox"
     >
       <div
-        class="subContainer shadow radius defaultPalette"
+        class="subContainer bottom_shadow radius defaultPalette"
         data-id="dropBox_subcontainer"
         data-selector-id="dropBox_subcontainer"
         data-test-id="dropBox_subcontainer"

package/es/ListItem/ListItem.js

@@ -100,7 +100,7 @@ export default class ListItem extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText ? style.txtAlignBaseLine + ' ' + style.autoHeight : ''} ${customListItem}`,
+      customClass: customListItem,
       dataId: dataIdString,
       dataSelectorId: `${dataSelectorId}`,
       isLink: isLink,
@@ -122,7 +122,7 @@ export default class ListItem extends React.Component {
       adjust: true,
       className: style.children
     }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
+      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItem.module.css

@@ -73,8 +73,8 @@
   line-height: 1.5385;
 }
 .multiLineValue{
-  composes: listItemClamp from '~@zohodesk/components/es/common/common.module.css';
-  --line-clamp-count: var(--list-line-clamp-count, 3);
+  word-break: break-word;
+  composes: clamp from '../common/common.module.css'
 }
 .iconBox {
   width: var(--zd_size20) ;
@@ -203,16 +203,3 @@
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }
-.autoHeight {
-  height: auto ;
-}
-.tickIconCenter {
-  top: 50% ;
-  transform: translateY(-50%);
-}
-.txtAlignBaseLine {
-  align-items: baseline;
-}
-.alignSelfTop {
-  align-self: start;
-}

package/es/ListItem/ListItemWithAvatar.js

@@ -107,7 +107,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText ? style.autoHeight : ''} ${customListItem}`,
+      customClass: customListItem,
       dataId: `${dataIdString}_ListItemWithAvatar`,
       dataSelectorId: `${dataSelectorId}`,
       onClick: this.handleClick,
@@ -118,7 +118,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps: ListItemProps,
       ...ContainerProps
     }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
-      className: `${needMultiLineText ? style.alignSelfTop : ''} ${style.leftAvatar}`
+      className: style.leftAvatar
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       size: "small",
@@ -147,7 +147,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
     }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
+      className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItemWithIcon.js

@@ -95,7 +95,7 @@ export default class ListItemWithIcon extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText ? style.autoHeight : ''} ${needMultiLineText && iconClass && !iconName ? style.txtAlignBaseLine : ''} ${customClass}`,
+      customClass: customClass,
       dataId: dataIdString,
       dataSelectorId: dataSelectorId,
       isLink: isLink,
@@ -125,7 +125,7 @@ export default class ListItemWithIcon extends React.Component {
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
     }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
+      className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -876,12 +876,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       needEffect,
       autoComplete,
       getTargetRef,
-      isFocus,
-      customProps
+      isFocus
     } = this.props;
-    const {
-      suggestionsProps
-    } = customProps;
     let {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -1061,8 +1057,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'option'
           },
-          dataId: `${dataId}_Options`,
-          ...suggestionsProps
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/MultiSelect/MultiSelect.js

@@ -1011,12 +1011,8 @@ export class MultiSelectComponent extends React.Component {
       boxSize,
       isLoading,
       selectAllText,
-      needSelectAll,
-      customProps
+      needSelectAll
     } = this.props;
-    const {
-      suggestionsProps = {}
-    } = customProps;
     const {
       selectedOptions,
       searchStr,
@@ -1106,8 +1102,7 @@ export class MultiSelectComponent extends React.Component {
       selectedOptions: selectedOptionIds,
       a11y: {
         role: 'option'
-      },
-      ...suggestionsProps
+      }
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/MultiSelect/Suggestions.js

@@ -27,24 +27,18 @@ export default class Suggestions extends React.PureComponent {
       avatarPalette,
       palette,
       htmlId,
-      a11y,
-      customClass,
-      needMultiLineText
+      a11y
     } = this.props;
     const {
       ariaParentRole,
       ariaMultiselectable
     } = a11y;
-    const {
-      containerClass
-    } = customClass;
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       role: ariaParentRole,
       id: htmlId,
       tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable,
-      className: containerClass
+      "aria-multiselectable": ariaMultiselectable
     }, /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}`,
       className: className ? className : ''
@@ -98,8 +92,7 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         });
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
@@ -119,8 +112,7 @@ export default class Suggestions extends React.PureComponent {
           iconSize: iconSize,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         });
       }
 
@@ -139,8 +131,7 @@ export default class Suggestions extends React.PureComponent {
         active: isActive,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y,
-        needMultiLineText: needMultiLineText
+        a11y: list_a11y
       });
     })));
   }

package/es/MultiSelect/props/defaultProps.js

@@ -37,8 +37,7 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   needEffect: true,
   palette: 'default',
   isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {}
+  dataSelectorId: 'advancedGroupMultiSelect'
 };
 export const AdvancedMultiSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -155,17 +154,13 @@ export const MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
-  needResponsive: true,
-  customProps: {}
+  customProps: {},
+  needResponsive: true
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium',
   dataId: 'selectedOptions'
 };
 export const Suggestions_defaultProps = {
-  a11y: {},
-  customClass: {
-    containerClass: ''
-  },
-  needMultiLineText: false
+  a11y: {}
 };

package/es/MultiSelect/props/propTypes.js

@@ -110,8 +110,7 @@ export const MultiSelect_propTypes = {
   setAriaId: PropTypes.string,
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
-    TextBoxIconProps: PropTypes.object,
-    suggestionsProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object
   }),
   isFocus: PropTypes.bool
 };
@@ -178,11 +177,7 @@ export const Suggestions_propTypes = {
     logo: PropTypes.string,
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
-  })),
-  customClass: PropTypes.shape({
-    containerClass: PropTypes.string
-  }),
-  needMultiLineText: PropTypes.bool
+  }))
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -253,8 +248,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
   searchStr: PropTypes.string,
   children: PropTypes.node,
   dataSelectorId: PropTypes.string,
-  isFocus: PropTypes.bool,
-  customProps: PropTypes.object
+  isFocus: PropTypes.bool
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,