@zohodesk/components 1.6.27 → 1.6.29

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dividerLine_cva = dividerLine_cva;
+
+var _cssUtility = require("@dot-system/css-utility");
+
+var _constant = require("@zohodesk/utils/es/constantProps/constant");
+
+var _DividerLineModule = _interopRequireDefault(require("./DividerLine.module.css"));
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var resolveClassVariants = function resolveClassVariants(classMap) {
+  return Object.keys(classMap).reduce(function (acc, key) {
+    acc[key] = _DividerLineModule["default"][classMap[key]];
+    return acc;
+  }, {});
+};
+
+var wrapperVariants = (0, _cssUtility.cva)(_DividerLineModule["default"].wrapper, {
+  variants: {
+    orientation: {
+      horizontal: _DividerLineModule["default"].horizontal,
+      vertical: _DividerLineModule["default"].vertical
+    },
+    lineStyle: resolveClassVariants(_constants.LINE_STYLE_CLASS_MAP),
+    color: resolveClassVariants(_constants.COLOR_CLASS_MAP)
+  }
+});
+
+function dividerLine_cva(_ref) {
+  var props = _ref.props;
+  var _props$orientation = props.orientation,
+      orientation = _props$orientation === void 0 ? _constants.DEFAULT_ORIENTATION : _props$orientation,
+      _props$lineStyle = props.lineStyle,
+      lineStyle = _props$lineStyle === void 0 ? _constants.DEFAULT_LINE_STYLE : _props$lineStyle,
+      _props$color = props.color,
+      color = _props$color === void 0 ? _constants.DEFAULT_COLOR : _props$color,
+      _props$customClass = props.customClass,
+      customClass = _props$customClass === void 0 ? _constant.DUMMY_OBJECT : _props$customClass;
+  var _customClass$wrapper = customClass.wrapper,
+      wrapperCustomClass = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
+  var wrapperClass = wrapperVariants({
+    orientation: orientation,
+    lineStyle: lineStyle,
+    color: color,
+    className: wrapperCustomClass
+  });
+  return {
+    wrapperClass: wrapperClass
+  };
+}

package/lib/DividerLine/props/defaultProps.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _constants = require("../constants");
+
+var _constant = require("@zohodesk/utils/es/constantProps/constant");
+
+var defaultProps = {
+  orientation: _constants.DEFAULT_ORIENTATION,
+  lineStyle: _constants.DEFAULT_LINE_STYLE,
+  color: _constants.DEFAULT_COLOR,
+  customClass: _constant.DUMMY_OBJECT,
+  customAttributes: _constant.DUMMY_OBJECT,
+  a11yAttributes: _constant.DUMMY_OBJECT
+};
+var _default = defaultProps;
+exports["default"] = _default;

package/lib/DividerLine/props/propTypes.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  customId: _propTypes["default"].string,
+  testId: _propTypes["default"].string,
+  orientation: _propTypes["default"].oneOf(Object.values(_constants.ORIENTATION)),
+  lineStyle: _propTypes["default"].oneOf(Object.values(_constants.LINE_STYLE)),
+  color: _propTypes["default"].oneOf(Object.values(_constants.COLOR)),
+  customClass: _propTypes["default"].shape({
+    wrapper: _propTypes["default"].string
+  }),
+  customAttributes: _propTypes["default"].shape({
+    wrapper: _propTypes["default"].object
+  }),
+  a11yAttributes: _propTypes["default"].shape({
+    wrapper: _propTypes["default"].object
+  })
+};
+var _default = propTypes;
+exports["default"] = _default;

package/lib/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/lib/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/lib/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/lib/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/lib/DropDown/DropDownSeparator.js

@@ -9,9 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("./props/propTypes");
+var _DividerLine = _interopRequireDefault(require("../DividerLine/DividerLine"));
 
-var _cssUtility = require("@dot-system/css-utility");
+var _propTypes = require("./props/propTypes");
 
 var _DropDownSeparatorModule = _interopRequireDefault(require("./DropDownSeparator.module.css"));
 
@@ -53,8 +53,13 @@ var DropDownSeparator = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props$customCla = this.props.customClass,
           customClass = _this$props$customCla === void 0 ? '' : _this$props$customCla;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _cssUtility.cn)("".concat(_DropDownSeparatorModule["default"].separator, " ").concat(customClass))
+      return /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+        orientation: "horizontal",
+        lineStyle: "solid",
+        color: "secondary",
+        customClass: {
+          wrapper: "".concat(_DropDownSeparatorModule["default"].separator, " ").concat(customClass)
+        }
       });
     }
   }]);

package/lib/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/lib/DropDown/__tests__/DropDownSeparator.spec.js

@@ -15,4 +15,12 @@ describe('DropDownSeparator', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering the custom class', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], {
+      customClass: "my-custom-class"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/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/lib/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/lib/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/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1043,6 +1043,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         selectedOptions: formatSelectedOptions,
         highLightedSelectOptions: highLightedSelectOptions,
         isReadOnly: isReadOnly,
+        isDisabled: isDisabled,
         getRef: this.selectedOptionRef,
         onRemove: this.handleRemoveOption,
         onSelect: this.handleClickSelectedOption,

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -523,6 +523,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         selectedOptions: selectedOptions,
         highLightedSelectOptions: highLightedSelectOptions,
         isReadOnly: isReadOnly,
+        isDisabled: isDisabled,
         getRef: this.selectedOptionRef,
         onRemove: this.handleRemoveOption,
         onSelect: this.handleClickSelectedOption,

package/lib/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/lib/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/lib/MultiSelect/SelectedOptions.js

@@ -84,8 +84,8 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
             iconSize = option.iconSize,
             isDisabled = option.isDisabled;
         var 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,
@@ -121,7 +121,7 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
             key: "".concat(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/lib/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/lib/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js

@@ -9,6 +9,38 @@ var _AdvancedGroupMultiSelect = _interopRequireDefault(require("../AdvancedGroup
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('AdvancedGroupMultiSelect', function () {
+  var 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'
+  }];
+  var selectedGroupOptions = [{
+    groupId: 'Group1',
+    id: 'group11'
+  }, {
+    groupId: 'Group2',
+    id: 'group22'
+  }];
   test('rendering the defult props', function () {
     var mockOnChange = jest.fn();
 
@@ -17,4 +49,14 @@ describe('AdvancedGroupMultiSelect', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render as disabled', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AdvancedGroupMultiSelect["default"], {
+      options: options,
+      selectedGroupOptions: selectedGroupOptions,
+      isDisabled: true
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -53,4 +53,14 @@ describe('AdvancedMultiSelect', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render as disabled', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AdvancedMultiSelect["default"], {
+      options: options,
+      selectedOptions: ['Apple'],
+      isDisabled: true
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/MultiSelect/__tests__/MultiSelect.spec.js

@@ -80,4 +80,14 @@ describe('MultiSelect', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Should render as disabled', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], {
+      options: options,
+      selectedOptions: testSelectedData,
+      isDisabled: true
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });