@zohodesk/components 1.6.27 → 1.6.28

package/lib/DividerLine/__tests__/DividerLine.spec.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _DividerLine = _interopRequireDefault(require("../DividerLine"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('DividerLine - Snapshot', function () {
+  afterEach(function () {
+    (0, _react2.cleanup)();
+  });
+  test('Render with default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['horizontal', 'vertical'])('Render with orientation as %s', function (orientation) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+      orientation: orientation
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['solid', 'dashed', 'dotted'])('Render with lineStyle as %s', function (lineStyle) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+      lineStyle: lineStyle
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['default', 'secondary', 'tertiary', 'brand'])('Render with color as %s', function (color) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+      color: color
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customId and testId', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+      customId: "divider-line-customId",
+      testId: "divider-line-testId"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customAttributes', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+      customAttributes: {
+        wrapper: {
+          'data-custom-attr': 'true'
+        }
+      }
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11yAttributes', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+      a11yAttributes: {
+        wrapper: {
+          'aria-label': 'Section divider'
+        }
+      }
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DividerLine["default"], {
+      customClass: {
+        wrapper: 'my-divider-line'
+      }
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/DividerLine/__tests__/__snapshots__/DividerLine.spec.js.snap

@@ -0,0 +1,131 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`DividerLine - Snapshot Render with a11yAttributes 1`] = `
+<DocumentFragment>
+  <hr
+    aria-label="Section divider"
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with color as brand 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorBrand"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with color as default 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with color as secondary 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorSecondary"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with color as tertiary 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorTertiary"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with customAttributes 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+    data-custom-attr="true"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with customClass 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault my-divider-line"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with customId and testId 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+    data-id="divider-line-customId"
+    data-test-id="divider-line-testId"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with default props 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with lineStyle as dashed 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal dashed colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with lineStyle as dotted 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal dotted colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with lineStyle as solid 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with orientation as horizontal 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="horizontal"
+    class="wrapper horizontal solid colorDefault"
+  />
+</DocumentFragment>
+`;
+
+exports[`DividerLine - Snapshot Render with orientation as vertical 1`] = `
+<DocumentFragment>
+  <hr
+    aria-orientation="vertical"
+    class="wrapper vertical solid colorDefault"
+  />
+</DocumentFragment>
+`;

package/lib/DividerLine/constants/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ORIENTATION = exports.LINE_STYLE_CLASS_MAP = exports.LINE_STYLE = exports.DEFAULT_ORIENTATION = exports.DEFAULT_LINE_STYLE = exports.DEFAULT_COLOR = exports.COLOR_CLASS_MAP = exports.COLOR = void 0;
+
+var _LINE_STYLE_CLASS_MAP, _COLOR_CLASS_MAP;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var ORIENTATION = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};
+exports.ORIENTATION = ORIENTATION;
+var LINE_STYLE = {
+  SOLID: 'solid',
+  DASHED: 'dashed',
+  DOTTED: 'dotted'
+};
+exports.LINE_STYLE = LINE_STYLE;
+var LINE_STYLE_CLASS_MAP = (_LINE_STYLE_CLASS_MAP = {}, _defineProperty(_LINE_STYLE_CLASS_MAP, LINE_STYLE.SOLID, 'solid'), _defineProperty(_LINE_STYLE_CLASS_MAP, LINE_STYLE.DASHED, 'dashed'), _defineProperty(_LINE_STYLE_CLASS_MAP, LINE_STYLE.DOTTED, 'dotted'), _LINE_STYLE_CLASS_MAP);
+exports.LINE_STYLE_CLASS_MAP = LINE_STYLE_CLASS_MAP;
+var COLOR = {
+  DEFAULT: 'default',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
+  BRAND: 'brand'
+};
+exports.COLOR = COLOR;
+var COLOR_CLASS_MAP = (_COLOR_CLASS_MAP = {}, _defineProperty(_COLOR_CLASS_MAP, COLOR.DEFAULT, 'colorDefault'), _defineProperty(_COLOR_CLASS_MAP, COLOR.SECONDARY, 'colorSecondary'), _defineProperty(_COLOR_CLASS_MAP, COLOR.TERTIARY, 'colorTertiary'), _defineProperty(_COLOR_CLASS_MAP, COLOR.BRAND, 'colorBrand'), _COLOR_CLASS_MAP);
+exports.COLOR_CLASS_MAP = COLOR_CLASS_MAP;
+var DEFAULT_ORIENTATION = ORIENTATION.HORIZONTAL;
+exports.DEFAULT_ORIENTATION = DEFAULT_ORIENTATION;
+var DEFAULT_LINE_STYLE = LINE_STYLE.SOLID;
+exports.DEFAULT_LINE_STYLE = DEFAULT_LINE_STYLE;
+var DEFAULT_COLOR = COLOR.DEFAULT;
+exports.DEFAULT_COLOR = DEFAULT_COLOR;

package/lib/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/lib/DividerLine/css/cssJSLogic.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _dividerLine.dividerLine_cva;
+  }
+});
+
+var _dividerLine = require("./dividerLine.cva");

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/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/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/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/__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();
+  });
 });