@zohodesk/components 1.6.27 → 1.6.28

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.6.28
+
+- **DividerLine** - New component introduced
+- **DropDownSeparator** - Adopted `DividerLine` component
+- **SelectWithAvatar, SelectWithIcon** - `renderCustomSelectedValue` prop supported
+- **AdvancedMultiSelect, AdvancedGroupMultiSelect, SelectedOptions** - Fixed an issue where the remove option was displayed for selected values when disabled
+- **Tooltip** - Corrected the fallback behavior for nearby `data-title` attributes by ignoring empty values
+
 ## 1.6.27
 
 - **DateWidget** - RTL support: Date and time render order now correctly reversed in RTL direction for proper text flow alignment.

package/es/DividerLine/DividerLine.js

@@ -0,0 +1,40 @@
+import { cn } from "@dot-system/css-utility";
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import cssJSLogic from "./css/cssJSLogic";
+import defaultProps from "./props/defaultProps";
+import propTypes from "./props/propTypes";
+const DividerLine = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    customId,
+    testId,
+    orientation,
+    customAttributes,
+    a11yAttributes
+  } = props;
+  const {
+    wrapperClass
+  } = cssJSLogic({
+    props
+  });
+  const {
+    wrapper: wrapperTagAttrs
+  } = customAttributes;
+  const {
+    wrapper: wrapperA11yAttrs
+  } = a11yAttributes;
+  return /*#__PURE__*/React.createElement("hr", _extends({}, wrapperTagAttrs, {
+    "aria-orientation": orientation
+  }, wrapperA11yAttrs, {
+    ref: ref,
+    className: cn(wrapperClass),
+    "data-id": customId,
+    "data-test-id": testId
+  }));
+});
+DividerLine.displayName = 'DividerLine';
+DividerLine.defaultProps = defaultProps;
+DividerLine.propTypes = propTypes;
+export default DividerLine;

package/es/DividerLine/__tests__/DividerLine.spec.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import DividerLine from "../DividerLine";
+describe('DividerLine - Snapshot', () => {
+  afterEach(() => {
+    cleanup();
+  });
+  test('Render with default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['horizontal', 'vertical'])('Render with orientation as %s', orientation => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, {
+      orientation: orientation
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['solid', 'dashed', 'dotted'])('Render with lineStyle as %s', lineStyle => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, {
+      lineStyle: lineStyle
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(['default', 'secondary', 'tertiary', 'brand'])('Render with color as %s', color => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, {
+      color: color
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customId and testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, {
+      customId: "divider-line-customId",
+      testId: "divider-line-testId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, {
+      customAttributes: {
+        wrapper: {
+          'data-custom-attr': 'true'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11yAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, {
+      a11yAttributes: {
+        wrapper: {
+          'aria-label': 'Section divider'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DividerLine, {
+      customClass: {
+        wrapper: 'my-divider-line'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/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/es/DividerLine/constants/index.js

@@ -0,0 +1,29 @@
+export const ORIENTATION = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};
+export const LINE_STYLE = {
+  SOLID: 'solid',
+  DASHED: 'dashed',
+  DOTTED: 'dotted'
+};
+export const LINE_STYLE_CLASS_MAP = {
+  [LINE_STYLE.SOLID]: 'solid',
+  [LINE_STYLE.DASHED]: 'dashed',
+  [LINE_STYLE.DOTTED]: 'dotted'
+};
+export const COLOR = {
+  DEFAULT: 'default',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
+  BRAND: 'brand'
+};
+export const COLOR_CLASS_MAP = {
+  [COLOR.DEFAULT]: 'colorDefault',
+  [COLOR.SECONDARY]: 'colorSecondary',
+  [COLOR.TERTIARY]: 'colorTertiary',
+  [COLOR.BRAND]: 'colorBrand'
+};
+export const DEFAULT_ORIENTATION = ORIENTATION.HORIZONTAL;
+export const DEFAULT_LINE_STYLE = LINE_STYLE.SOLID;
+export const DEFAULT_COLOR = COLOR.DEFAULT;

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