@zohodesk/components 1.0.0-temp-217.5 → 1.0.0-temp-199.8

package/README.md

@@ -32,6 +32,15 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.57
+
+- **Popup**
+  - Fixed popup scroll behavior is now supported using the `isOutsideScrollBlocked` flag. When set to `false` (default).
+
+- **DropBoxElement**
+  - **Attributes Added**: The `data-box-direction` and `data-arrow-position` attributes have been added to facilitate the use of component-level CSS selectors.
+  - **CSS Selectors**: Added support for `arrow`, `paddingSpace`, `shadow`, and `boxdirection` to facilitate the behavior of the dropbox using CSS selectors.
+  
 # 1.2.56
 
 - **CheckBox** 

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -103,6 +103,8 @@ export default function DropBoxElement(props) {
     style: inlineStyle,
     "data-tour": tourId,
     "data-position": boxPosition,
+    "data-box-direction": boxDirection,
+    "data-arrow-position": arrowPosition,
     id: htmlId,
     role: role,
     "aria-multiselectable": ariaMultiselectable,
@@ -122,7 +124,7 @@ export default function DropBoxElement(props) {
   }, isModel ? /*#__PURE__*/React.createElement("div", {
     className: style.closeBar
   }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
-    className: style[arrowPosition],
+    className: style.arrowPosition,
     style: arrowstyle,
     "data-id": `${dataId}_arrow`,
     "data-test-id": `${dataId}_arrow`,

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

@@ -5,6 +5,8 @@ exports[`DropBoxElement 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"
@@ -12,14 +14,14 @@ exports[`DropBoxElement rendering the defult props 1`] = `
     dot-ui-element="dropbox"
   >
     <div
-      class="subContainer bottom_shadow radius defaultPalette"
+      class="subContainer shadow radius defaultPalette"
       data-id="dropBox_subcontainer"
       data-selector-id="dropBox_subcontainer"
       data-test-id="dropBox_subcontainer"
       tabindex="-1"
     >
       <div
-        class="end"
+        class="arrowPosition"
         data-id="dropBox_arrow"
         data-selector-id="dropBox_arrow"
         data-test-id="dropBox_arrow"

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

@@ -73,19 +73,19 @@
 }
 
 /* shadow */
-.top_shadow {
+[data-box-direction="top"]>.shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_top);
 }
 
-.left_shadow {
+[data-box-direction="left"]>.shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_left);
 }
 
-.right_shadow {
+[data-box-direction="right"]>.shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_right);
 }
 
-.bottom_shadow {
+[data-box-direction="bottom"]>.shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
 }
 
@@ -158,37 +158,37 @@
     transform: translateY(-50%);
 }
 
-/* space for arrow */
-.arrowtop {
+/* space for arrow using data-box-direction attribute*/
+.arrow[data-box-direction="top"] {
     padding-bottom: var(--zd_size10) ;
 }
 
-.arrowright {
+.arrow[data-box-direction="right"] {
     padding-left: var(--zd_size10) ;
 }
 
-.arrowleft {
+.arrow[data-box-direction="left"] {
     padding-right: var(--zd_size10) ;
 }
 
-.arrowbottom {
+.arrow[data-box-direction="bottom"] {
     padding-top: var(--zd_size10) ;
 }
 
-/* space from target */
-.paddingSpace_top {
+/* space from target using data-box-direction attribute*/
+.paddingSpace[data-box-direction="top"] {
     padding-bottom: var(--zd_size5) ;
 }
 
-.paddingSpace_right {
+.paddingSpace[data-box-direction="right"] {
     padding-left: var(--zd_size5) ;
 }
 
-.paddingSpace_left {
+.paddingSpace[data-box-direction="left"] {
     padding-right: var(--zd_size5) ;
 }
 
-.paddingSpace_bottom {
+.paddingSpace[data-box-direction="bottom"] {
     padding-top: var(--zd_size5) ;
 }
 
@@ -213,107 +213,106 @@
 }
 
 /* arrow placement styles */
-.start,
-.end,
-.mid {
+.arrowPosition {
     composes: arrow;
 }
 
-.top .start,
-.top .end,
-.top .mid {
+.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 {
     bottom: calc( var(--zd_size17) * -1 ) ;
 }
 
-.top .start {
+.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition {
     left: var(--zd_size28) ;
 }
 
-.top .end {
+.boxDirection[data-box-direction="top"][data-arrow-position="end"] .arrowPosition {
     right: var(--zd_size28) ;
     transform: rotate(180deg) translateX(-50%);
 }
 
-.top .mid {
+.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
     left: 50% ;
 }
 
-.top .start,
-.top .mid {
+.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
     transform: rotate(180deg) translateX(50%);
 }
 
-.bottom .start,
-.bottom .end,
-.bottom .mid {
+.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 {
     top: calc( var(--zd_size17) * -1 ) ;
 }
 
-.bottom .start {
+.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition {
     left: var(--zd_size28) ;
 }
 
-.bottom .mid {
+.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition {
     left: 50% ;
 }
 
-.bottom .end {
+.boxDirection[data-box-direction="bottom"][data-arrow-position="end"] .arrowPosition {
     right: var(--zd_size28) ;
     transform: translateX(50%);
 }
 
-.bottom .mid,
-.bottom .start {
+.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition,
+.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition {
     transform: translateX(-50%);
 }
 
-.left .start,
-.left .mid,
-.left .end {
+.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 {
     right: calc( var(--zd_size17) * -1 ) ;
 }
 
-.left .start {
+.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition {
     top: var(--zd_size28) ;
 }
 
-.left .end {
+.boxDirection[data-box-direction="left"][data-arrow-position="end"] .arrowPosition {
     transform: rotate(90deg) translateX(50%);
     bottom: var(--zd_size28) ;
 }
 
-.left .mid {
+.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition {
     top: 50% ;
 }
 
-.left .start,
-.left .mid {
+.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition {
     transform: rotate(90deg) translateX(-50%);
 }
 
-.right .start,
-.right .mid,
-.right .end {
+.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 {
     left: calc( var(--zd_size17) * -1 ) ;
 }
 
-.right .start {
+.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition {
     top: var(--zd_size28) ;
 }
 
-.right .mid {
+.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition {
     top: 50% ;
 }
 
-.right .start,
-.right .mid {
+.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition {
     transform: rotate(-90deg) translateX(50%);
 }
 
-.right .end {
+.boxDirection[data-box-direction="right"][data-arrow-position="end"] .arrowPosition {
     bottom: var(--zd_size28) ;
     transform: rotate(-90deg) translateX(-50%);
 }
+[data-visible="hidden"],
 .hidden {
     visibility: hidden;
     opacity: 0;
@@ -321,7 +320,7 @@
     pointer-events: none;
 }
 
-.hidden .subContainer {
+[data-visible="hidden"] .subContainer, .hidden .subContainer {
     box-shadow: none;
 }
 
@@ -342,17 +341,21 @@
     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);
@@ -414,7 +417,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${boxDirection}`]]: !isModel && isActive && isArrow && isAbsolute,
-    [style[`paddingSpace_${boxDirection}`]]: !isModel && isActive && !isArrow && isPadding
+    [style.boxDirection]: !isModel && isActive && isArrow,
+    [style.arrow]: !isModel && isActive && isArrow && isAbsolute,
+    [style.paddingSpace]: !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[`${boxDirection}_shadow`]]: !isModel,
+    [style.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,6 +5,8 @@ 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"
@@ -12,14 +14,14 @@ exports[`DropBox rendering the defult props 1`] = `
     dot-ui-element="dropbox"
   >
     <div
-      class="subContainer bottom_shadow radius defaultPalette"
+      class="subContainer shadow radius defaultPalette"
       data-id="dropBox_subcontainer"
       data-selector-id="dropBox_subcontainer"
       data-test-id="dropBox_subcontainer"
       tabindex="-1"
     >
       <div
-        class="end"
+        class="arrowPosition"
         data-id="dropBox_arrow"
         data-selector-id="dropBox_arrow"
         data-test-id="dropBox_arrow"

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

@@ -15,6 +15,8 @@ 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"
@@ -22,7 +24,7 @@ exports[`DropDown rendering the defult props 1`] = `
       dot-ui-element="dropbox"
     >
       <div
-        class="subContainer bottom_shadow radius defaultPalette"
+        class="subContainer 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: customListItem,
+      customClass: `${needMultiLineText ? style.txtAlignBaseLine + ' ' + style.autoHeight : ''} ${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}`,
+      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItem.module.css

@@ -73,8 +73,8 @@
   line-height: 1.5385;
 }
 .multiLineValue{
-  word-break: break-word;
-  composes: clamp from '../common/common.module.css'
+  composes: listItemClamp from '~@zohodesk/components/es/common/common.module.css';
+  --line-clamp-count: var(--list-line-clamp-count, 3);
 }
 .iconBox {
   width: var(--zd_size20) ;
@@ -203,3 +203,16 @@
   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: customListItem,
+      customClass: `${needMultiLineText ? style.autoHeight : ''} ${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: style.leftAvatar
+      className: `${needMultiLineText ? style.alignSelfTop : ''} ${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,
+      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
       "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: customClass,
+      customClass: `${needMultiLineText ? style.autoHeight : ''} ${needMultiLineText && iconClass && !iconName ? style.txtAlignBaseLine : ''} ${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,
+      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/MultiSelect/AdvancedGroupMultiSelect.js

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

package/es/MultiSelect/MultiSelect.js

@@ -1011,8 +1011,12 @@ export class MultiSelectComponent extends React.Component {
       boxSize,
       isLoading,
       selectAllText,
-      needSelectAll
+      needSelectAll,
+      customProps
     } = this.props;
+    const {
+      suggestionsProps = {}
+    } = customProps;
     const {
       selectedOptions,
       searchStr,
@@ -1102,7 +1106,8 @@ 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,18 +27,24 @@ export default class Suggestions extends React.PureComponent {
       avatarPalette,
       palette,
       htmlId,
-      a11y
+      a11y,
+      customClass,
+      needMultiLineText
     } = 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
+      "aria-multiselectable": ariaMultiselectable,
+      className: containerClass
     }, /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}`,
       className: className ? className : ''
@@ -92,7 +98,8 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          needMultiLineText: needMultiLineText
         });
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
@@ -112,7 +119,8 @@ export default class Suggestions extends React.PureComponent {
           iconSize: iconSize,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          needMultiLineText: needMultiLineText
         });
       }
 
@@ -131,7 +139,8 @@ export default class Suggestions extends React.PureComponent {
         active: isActive,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y
+        a11y: list_a11y,
+        needMultiLineText: needMultiLineText
       });
     })));
   }

package/es/MultiSelect/props/defaultProps.js

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

package/es/MultiSelect/props/propTypes.js

@@ -110,7 +110,8 @@ export const MultiSelect_propTypes = {
   setAriaId: PropTypes.string,
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
-    TextBoxIconProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object,
+    suggestionsProps: PropTypes.object
   }),
   isFocus: PropTypes.bool
 };
@@ -177,7 +178,11 @@ 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,
@@ -248,7 +253,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
   searchStr: PropTypes.string,
   children: PropTypes.node,
   dataSelectorId: PropTypes.string,
-  isFocus: PropTypes.bool
+  isFocus: PropTypes.bool,
+  customProps: PropTypes.object
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,