@zohodesk/components 1.6.27 → 1.6.29

package/es/DividerLine/css/DividerLine.module.css

@@ -0,0 +1,52 @@
+.wrapper {
+  flex-shrink: 0;
+  border: none;
+  margin: 0 ;
+}
+
+.horizontal {
+  inline-size: 100% ;
+  block-size: 0 ;
+  border-block-start-width: 1px;
+}
+
+.vertical {
+  inline-size: 0 ;
+  block-size: 100% ;
+  border-inline-start-width: 1px;
+}
+
+.solid {
+  border-block-start-style: solid;
+  border-inline-start-style: solid;
+}
+
+.dashed {
+  border-block-start-style: dashed;
+  border-inline-start-style: dashed;
+}
+
+.dotted {
+  border-block-start-style: dotted;
+  border-inline-start-style: dotted;
+}
+
+.colorDefault {
+  border-block-start-color: var(--zd-border-primary);
+  border-inline-start-color: var(--zd-border-primary);
+}
+
+.colorSecondary {
+  border-block-start-color: var(--zd-border-secondary);
+  border-inline-start-color: var(--zd-border-secondary);
+}
+
+.colorTertiary {
+  border-block-start-color: var(--zd-border-tertiary);
+  border-inline-start-color: var(--zd-border-tertiary);
+}
+
+.colorBrand {
+  border-block-start-color: var(--zd-border-brand);
+  border-inline-start-color: var(--zd-border-brand);
+}

package/es/DividerLine/css/cssJSLogic.js

@@ -0,0 +1 @@
+export { dividerLine_cva as default } from "./dividerLine.cva";

package/es/DividerLine/css/dividerLine.cva.js

@@ -0,0 +1,42 @@
+import { cva } from '@dot-system/css-utility';
+import { DUMMY_OBJECT } from '@zohodesk/utils/es/constantProps/constant';
+import style from "./DividerLine.module.css";
+import { LINE_STYLE_CLASS_MAP, COLOR_CLASS_MAP, DEFAULT_ORIENTATION, DEFAULT_LINE_STYLE, DEFAULT_COLOR } from "../constants";
+
+const resolveClassVariants = classMap => Object.keys(classMap).reduce((acc, key) => {
+  acc[key] = style[classMap[key]];
+  return acc;
+}, {});
+
+const wrapperVariants = cva(style.wrapper, {
+  variants: {
+    orientation: {
+      horizontal: style.horizontal,
+      vertical: style.vertical
+    },
+    lineStyle: resolveClassVariants(LINE_STYLE_CLASS_MAP),
+    color: resolveClassVariants(COLOR_CLASS_MAP)
+  }
+});
+export function dividerLine_cva({
+  props
+}) {
+  const {
+    orientation = DEFAULT_ORIENTATION,
+    lineStyle = DEFAULT_LINE_STYLE,
+    color = DEFAULT_COLOR,
+    customClass = DUMMY_OBJECT
+  } = props;
+  const {
+    wrapper: wrapperCustomClass = ''
+  } = customClass;
+  const wrapperClass = wrapperVariants({
+    orientation,
+    lineStyle,
+    color,
+    className: wrapperCustomClass
+  });
+  return {
+    wrapperClass
+  };
+}

package/es/DividerLine/props/defaultProps.js

@@ -0,0 +1,11 @@
+import { DEFAULT_ORIENTATION, DEFAULT_LINE_STYLE, DEFAULT_COLOR } from "../constants";
+import { DUMMY_OBJECT } from '@zohodesk/utils/es/constantProps/constant';
+const defaultProps = {
+  orientation: DEFAULT_ORIENTATION,
+  lineStyle: DEFAULT_LINE_STYLE,
+  color: DEFAULT_COLOR,
+  customClass: DUMMY_OBJECT,
+  customAttributes: DUMMY_OBJECT,
+  a11yAttributes: DUMMY_OBJECT
+};
+export default defaultProps;

package/es/DividerLine/props/propTypes.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import { ORIENTATION, LINE_STYLE, COLOR } from "../constants";
+const propTypes = {
+  customId: PropTypes.string,
+  testId: PropTypes.string,
+  orientation: PropTypes.oneOf(Object.values(ORIENTATION)),
+  lineStyle: PropTypes.oneOf(Object.values(LINE_STYLE)),
+  color: PropTypes.oneOf(Object.values(COLOR)),
+  customClass: PropTypes.shape({
+    wrapper: PropTypes.string
+  }),
+  customAttributes: PropTypes.shape({
+    wrapper: PropTypes.object
+  }),
+  a11yAttributes: PropTypes.shape({
+    wrapper: PropTypes.object
+  })
+};
+export default propTypes;

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

@@ -4,15 +4,15 @@
 }
 
 .container {
-    position: absolute;
+    composes: d-absolute from global;
 }
 
 .fixedContainer {
-    position: fixed;
+    composes: d-fixed from global;
 }
 
 .subContainer {
-    position: relative;
+    composes: d-relative from global;
     border-radius: var(--dropbox_border_radius);
     padding: var(--dropbox_padding);
     box-shadow: var(--dropbox_box_shadow);
@@ -74,7 +74,7 @@
 }
 
 .default {
-    width: 100% ;
+    composes: d-w-full from global;
 }
 
 /* shadow */
@@ -411,9 +411,8 @@
 }
 
 .responsive {
-    position: absolute;
+    composes: d-absolute d-w-full from global;
     bottom: 0 ;
-    width: 100% ;
     max-height: 90% ;
 }
 
@@ -426,6 +425,7 @@
 }
 
 .closeBar {
+    composes: d-cursor-pointer from global;
     /*  Variable:Ignore  */
     height: 6px;
     /*css:theme-validation:ignore*/
@@ -434,7 +434,6 @@
     margin-inline:auto ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);
-    cursor: pointer;
 }
 
 .boxPadding {

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

@@ -15,7 +15,7 @@
 
 .activateInDelay {
   composes: modeForward from '../../common/animation.module.css';
-  pointer-events: none;
+  composes: d-pointer-events-none from global;
 }
 
 [dir=ltr] .activateInDelay {
@@ -31,10 +31,10 @@
 }
 
 .freezeLayer {
-  position: absolute;
   top: 0 ;
   bottom: 0 ;
   composes: activateInDelay;
+  composes: d-absolute from global;
 }
 
 [dir=ltr] .freezeLayer {
@@ -49,7 +49,7 @@
 
 .freeze {
   composes: varClass;
-  background: var(--dropbox_mob_bg_color);
+  background-color: var(--dropbox_mob_bg_color);
 }
 
 @keyframes activateInDelay {

package/es/DropDown/DropDownHeading.module.css

@@ -14,7 +14,7 @@
 .default {
   composes: dotted semibold from '../common/common.module.css';
   composes: varClass;
-  position: relative;
+  composes: d-relative from global;
   font-size: var(--zd_font_size11) ;
   letter-spacing: 0.6px;
   text-transform: var(--dropdownheading_text_transform);

package/es/DropDown/DropDownItem.module.css

@@ -17,13 +17,11 @@
 .list {
   composes: varClass;
   composes: dflex alignVertical from '../common/common.module.css';
-  position: relative;
+  composes: d-relative d-border-solid d-cursor-pointer from global;
   color: var(--zdt_dropdown_default_text);
   font-size: var(--zd_font_size13) ;
   padding: var(--dropdownitem-padding);
-  border-style: solid;
   border-color: var(--dropdownitem-border-color);
-  cursor: pointer;
   background-color: var(--dropdownitem-bg-color);
 }
 [dir=ltr] .list {
@@ -50,8 +48,8 @@
 }
 
 .children {
+  composes: d-inline-block from global;
   margin-inline-end: var(--zd_size10) ;
-  display: inline-block;
   font-size: 0 ;
 }
 
@@ -61,11 +59,9 @@
 
 .user {
   composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
-  position: absolute;
+  composes: d-absolute d-invisible d-opacity-0 from global;
   top: 0 ;
   bottom: 0 ;
-  opacity: 0;
-  visibility: hidden;
   width: var(--dropdownitem-user-width);
   border-width: var(--dropdownitem-user-border-width);
   border-style: var(--dropdownitem-user-border-style);

package/es/DropDown/DropDownSeparator.js

@@ -1,14 +1,19 @@
 import React from 'react';
+import DividerLine from "../DividerLine/DividerLine";
 import { DropDownSeparator_propTypes } from "./props/propTypes";
-import { cn } from "@dot-system/css-utility";
 import style from "./DropDownSeparator.module.css";
 export default class DropDownSeparator extends React.Component {
   render() {
-    let {
+    const {
       customClass = ''
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn(`${style.separator} ${customClass}`)
+    return /*#__PURE__*/React.createElement(DividerLine, {
+      orientation: "horizontal",
+      lineStyle: "solid",
+      color: "secondary",
+      customClass: {
+        wrapper: `${style.separator} ${customClass}`
+      }
     });
   }
 

package/es/DropDown/DropDownSeparator.module.css

@@ -1,8 +1,4 @@
 .separator {
-  height: var(--zd_size1) ;
   margin-block: var(--zd_size5) ;
   margin-inline: 0 ;
-  border-width: 0 0 1px 0;
-  border-style: solid;
-  border-color: var(--zdt_dropdown_user_default_border);
 }

package/es/DropDown/__tests__/DropDownSeparator.spec.js

@@ -8,4 +8,12 @@ describe('DropDownSeparator', () => {
     } = render( /*#__PURE__*/React.createElement(DropDownSeparator, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering the custom class', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DropDownSeparator, {
+      customClass: "my-custom-class"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -1,9 +1,19 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`DropDownSeparator rendering the custom class 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorSecondary separator my-custom-class"
+  />
+</DocumentFragment>
+`;
+
 exports[`DropDownSeparator rendering the defult props 1`] = `
 <DocumentFragment>
-  <div
-    class="separator"
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorSecondary separator"
   />
 </DocumentFragment>
 `;

package/es/Label/Label.module.css

@@ -9,7 +9,7 @@
 /* css:lineheight-validation:ignore */
 .label {
   composes: varClass;
-  vertical-align: middle;
+  composes: d-align-middle from global;
   line-height: var(--label_line_height);
   font-size: var(--label_font_size);
   color: var(--label_text_color);
@@ -40,10 +40,10 @@
   --label_cursor: default;
 }
 .title {
-  display: block;
+  composes: d-block from global;
 }
 .subtitle {
-  display: inline-block;
+  composes: d-inline-block from global;
 }
 .font_default {
   --label_font_weight: var(--zd-fw-normal);

package/es/ListItem/ListItem.module.css

@@ -28,7 +28,7 @@
 }
 .list {
   composes: varClass;
-  position: relative;
+  composes: d-relative d-border-solid d-cursor-pointer from global;
   list-style: none;
   color: var(--listitem_text_color);
   font-size: var(--listitem_font_size);
@@ -37,9 +37,7 @@
   text-decoration: none;
   padding: var(--listitem_padding);
   border-width: var(--listitem_border_width);
-  border-style: solid;
   border-color: var(--listitem_border_color);
-  cursor: pointer;
 }
 .list, .default, .secondary {
   background-color: var(--listitem_bg_color);
@@ -93,9 +91,9 @@
   composes: dflex from '../common/common.module.css';
 }
 .iconBox {
+  composes: d-text-center from global;
   width: var(--zd_size20) ;
   margin-inline-end: var(--zd_size10) ;
-  text-align: center;
 }
 .iconBox,
 .leftAvatar {
@@ -126,22 +124,21 @@
   composes: justifyFend from '../common/common.module.css';
 }
 .selfAlign_center{
-  align-self: center;
+  composes: d-self-center from global;
 }
 
 .contentWrapper {
   composes: dflex flexrow from '../common/common.module.css';
-  align-items: stretch;
-  width: 100% ;
+  composes: d-items-stretch d-w-full from global;
 }
 .alignLhsBox_end {
-  align-items: flex-end;
+  composes: d-items-end from global;
 }
 .alignLhsBox_center {
-  align-items: center;
+  composes: d-items-center from global;
 }
 .lhsBoxInner{
-  height: 100% ;
+  composes: d-h-full from global;
   max-height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
 }
 .defaultHover, .primaryHover, .dangerHover, .secondaryHover, .darkHover {
@@ -225,7 +222,7 @@
 .tickIcon,
 .defaultTick,
 .darkTick {
-  position: absolute;
+  composes: d-absolute from global;
   color: var(--listitem_tickicon_color);
   top:50% ;
   font-size: 0 ;
@@ -281,5 +278,5 @@
 }
 
 .titleBox {
-  align-items: stretch;
+  composes: d-items-stretch from global;
 }

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -945,6 +945,7 @@ class AdvancedGroupMultiSelect extends React.Component {
       selectedOptions: formatSelectedOptions,
       highLightedSelectOptions: highLightedSelectOptions,
       isReadOnly: isReadOnly,
+      isDisabled: isDisabled,
       getRef: this.selectedOptionRef,
       onRemove: this.handleRemoveOption,
       onSelect: this.handleClickSelectedOption,

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -453,6 +453,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       selectedOptions: selectedOptions,
       highLightedSelectOptions: highLightedSelectOptions,
       isReadOnly: isReadOnly,
+      isDisabled: isDisabled,
       getRef: this.selectedOptionRef,
       onRemove: this.handleRemoveOption,
       onSelect: this.handleClickSelectedOption,

package/es/MultiSelect/MobileHeader/MobileHeader.module.css

@@ -13,5 +13,5 @@
   .buttonText{
     font-size: var(--zd_font_size15) ;
     composes: dotted from '../../common/common.module.css';
-    padding: 0  
+    composes: d-p-0 from global;
   }

package/es/MultiSelect/MultiSelect.module.css

@@ -1,8 +1,9 @@
 .wrapper {
-  position: relative;
+  composes: d-relative from global;
 }
-.disabled, .readOnly {
-  cursor: not-allowed;
+.disabled,
+.readOnly {
+  composes: d-cursor-not-allowed from global;
 }
 .container {
   max-height: var(--zd_size120) ;
@@ -51,10 +52,10 @@
 }
 
 .delete {
+  composes: d-cursor-pointer from global;
   padding-block: var(--zd_size2) ;
   padding-inline:var(--zd_size6) ;
   font: inherit;
-  cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
 }
@@ -83,7 +84,7 @@
 }
 
 .tag {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 
 .container.xmedium .tag {
@@ -96,10 +97,10 @@
   margin-inline:0 var(--zd_size10) ;
 }
 .responsiveParent{
-  width: 100% ;
+  composes: d-w-full from global;
 }
 .box {
-  background: var(--zdt_multiselect_box_bg);
+  background-color: var(--zdt_multiselect_box_bg);
 }
 
 .selectAll:hover {
@@ -137,21 +138,14 @@
   color: var(--zdt_multiselect_darkmsg_text);
 }
 .dark, .darkBox {
-  background: var(--zdt_multiselect_darkmsg_bg);
+  background-color: var(--zdt_multiselect_darkmsg_bg);
 }
 
 .hide {
   composes: vishidden from '../common/common.module.css';
 }
 .custmSpan {
-  display: inline-block;
-  vertical-align: middle;
-  opacity: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100% ;
-  visibility: hidden;
+  composes: d-inline-block d-invisible d-max-w-full d-align-middle d-opacity-0 d-truncate from global;
 }
 .custmSpanMedium {
   height: var(--zd_size35) ;
@@ -160,9 +154,8 @@
   height: var(--zd_size28) ;
 }
 .custmInputWrapper {
-  position: absolute;
+  composes: d-absolute d-w-full from global;
   top: 0 ;
-  width: 100% ;
 }
 [dir=ltr] .custmInputWrapper {
   left: 0 ;
@@ -188,16 +181,16 @@
 }
 
 .more {
+  composes: d-cursor-pointer from global;
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
   margin-block-start: var(--zd_size5) ;
   font-weight: var(--zd-fw-normal);
   margin-inline-end:var(--zd_size3) ;
-  cursor: pointer;
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0
 }
 
 .rightPlaceholder{
-  height: 100% ;
+  composes: d-h-full from global;
 }

package/es/MultiSelect/SelectedOptions.js

@@ -44,8 +44,8 @@ export default class SelectedOptions extends React.PureComponent {
         isDisabled
       } = option;
       const commonProps = {
-        disabled: isDisabled,
-        onRemove: isDisabled || isReadOnly ? null : onRemove,
+        disabled: isDisabled || isInputDisabled,
+        onRemove: isDisabled || isInputDisabled || isReadOnly ? null : onRemove,
         text: value,
         palette: isDarkPalette,
         onSelectTag: isReadOnly ? null : onSelect,
@@ -81,7 +81,7 @@ export default class SelectedOptions extends React.PureComponent {
           key: `${id}customTag`,
           dataId: dataId
         }, typeof renderCustomSelectedValue == 'function' ? renderCustomSelectedValue({
-          onRemove: isDisabled || isReadOnly ? null : onRemove,
+          onRemove: isDisabled || isInputDisabled || isReadOnly ? null : onRemove,
           palette: isDarkPalette,
           onSelectTag: isReadOnly ? null : onSelect,
           getRef: getRef,

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,5 +1,5 @@
 .tag {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 .xmedium {
   margin-block: 0 var(--zd_size2) ;

package/es/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js

@@ -2,6 +2,38 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import AdvancedGroupMultiSelect from "../AdvancedGroupMultiSelect";
 describe('AdvancedGroupMultiSelect', () => {
+  const options = [{
+    id: 'Group1',
+    name: 'Group 1',
+    options: [{
+      id: 'group11',
+      value: 'Option 1'
+    }, {
+      id: 'group12',
+      value: 'Option 2'
+    }],
+    textField: 'value',
+    valueField: 'id'
+  }, {
+    id: 'Group2',
+    name: 'Group 2',
+    options: [{
+      id: 'group21',
+      value: 'Group2 Option 1'
+    }, {
+      id: 'group22',
+      value: 'Group2 Option 2'
+    }],
+    textField: 'value',
+    valueField: 'id'
+  }];
+  const selectedGroupOptions = [{
+    groupId: 'Group1',
+    id: 'group11'
+  }, {
+    groupId: 'Group2',
+    id: 'group22'
+  }];
   test('rendering the defult props', () => {
     const mockOnChange = jest.fn();
     const {
@@ -9,4 +41,14 @@ describe('AdvancedGroupMultiSelect', () => {
     } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render as disabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, {
+      options: options,
+      selectedGroupOptions: selectedGroupOptions,
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js

@@ -44,4 +44,14 @@ describe('AdvancedMultiSelect', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render as disabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, {
+      options: options,
+      selectedOptions: ['Apple'],
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/MultiSelect/__tests__/MultiSelect.spec.js

@@ -71,4 +71,14 @@ describe('MultiSelect', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render as disabled', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(MultiSelect, {
+      options: options,
+      selectedOptions: testSelectedData,
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });