@zohodesk/dot 1.9.5 → 1.9.7

package/README.md

@@ -2,7 +2,12 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
-# 1.9.5
+# 1.9.7
+
+- **Upload** => upload_overlay_bg color contrast fixed
+- **DepartmentDropDown** Added DepartmentTextProps support under customProps
+
+# 1.9.5, # 1.9.6
 
 - **listCommon.module.css**  A css active ignore comment has been added to fix the hover and click pseudo-class collision issue on iOS tablets.
 - **list/Subject** dataId and testId have been moved back to the parent element as they were earlier.

package/assets/Appearance/dark/mode/Dot_DarkMode.module.css

@@ -427,7 +427,7 @@
 	
 	/* upload */
 	--zdt_upload_default_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), calc(97.45% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_upload_overlay_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default)), calc( 0.2 + var(--zdc_alpha_high)));
+	--zdt_upload_overlay_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.2);
 	--zdt_upload_loader_default_bg:hsla(223, calc(var(--zd-saturation, 1) * 9.09%), calc(30.20% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_upload_attachsize_default_text:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_upload_uploadclose_default_bg:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/mode/Dot_LightMode.module.css

@@ -427,7 +427,7 @@
 	
 	/* upload */
 	--zdt_upload_default_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), calc(97.45% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_upload_overlay_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default)), calc( 0.2 + var(--zdc_alpha_high)));
+	--zdt_upload_overlay_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.2);
 	--zdt_upload_loader_default_bg:hsla(223, calc(var(--zd-saturation, 1) * 9.09%), calc(30.20% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_upload_attachsize_default_text:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_upload_uploadclose_default_bg:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css

@@ -427,7 +427,7 @@
 	
 	/* upload */
 	--zdt_upload_default_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), calc(97.45% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_upload_overlay_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default)), calc( 0.2 + var(--zdc_alpha_high)));
+	--zdt_upload_overlay_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.2);
 	--zdt_upload_loader_default_bg:hsla(223, calc(var(--zd-saturation, 1) * 9.09%), calc(30.20% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_upload_attachsize_default_text:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_upload_uploadclose_default_bg:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -54,7 +54,8 @@ class DepartmentDropDown extends Component {
       customProps
     } = this.props;
     const {
-      ToggleDropDownProps = {}
+      ToggleDropDownProps = {},
+      DepartmentTextProps = {}
     } = customProps;
     let {
       title = 'Move Department',
@@ -73,10 +74,10 @@ class DepartmentDropDown extends Component {
     }, ToggleDropDownProps, {
       title: title,
       options: departmentList,
-      value: /*#__PURE__*/React.createElement(DepartmentText, {
+      value: /*#__PURE__*/React.createElement(DepartmentText, _extends({}, DepartmentTextProps, {
         text: departmentName,
         dataTitle: departmentName
-      }),
+      })),
       onClick: this.onMoveDepartment,
       isEditable: isEditable,
       onSelectLabel: onSelectLabel,

package/es/list/DepartmentDropDown/props/propTypes.js

@@ -22,6 +22,7 @@ export const propTypes = {
     placeholder: PropTypes.string
   }),
   customProps: PropTypes.shape({
-    ToggleDropDownProps: PropTypes.object
+    ToggleDropDownProps: PropTypes.object,
+    DepartmentTextProps: PropTypes.object
   })
 };

package/es/list/Subject/Subject.js

@@ -48,8 +48,7 @@ export default class Subject extends Component {
       urlData: urlData,
       onClick: onClick,
       target: target,
-      customId: dataId,
-      testId: dataId
+      dataId: dataId
     }, LinkProps), children ? children : /*#__PURE__*/React.createElement(Typography, {
       $tagAttributes_text: linkTagAttributes,
       $i18n_dataTitle: text,

package/es/list/Subject/__tests__/Subject.spec.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Subject from "../Subject";
 describe('Subject', () => {
   test('rendering the defult props', () => {
@@ -26,4 +27,111 @@ describe('Subject', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('renders data attributes on link wrapper', () => {
+    const dataId = 'subject-id';
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      isLink: true,
+      dataId: dataId
+    }));
+    expect(container).toMatchSnapshot();
+    const anchor = container.querySelector('a');
+    expect(anchor.getAttribute('data-id')).toBe(dataId);
+    expect(anchor.getAttribute('data-test-id')).toBe(dataId);
+  });
+  test('renders text content', () => {
+    const text = 'Test Subject';
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      text: text
+    }));
+    expect(container.textContent).toContain(text);
+  });
+  test('renders with custom className', () => {
+    const customClass = 'custom-subject';
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      className: customClass
+    }));
+    expect(container.querySelector(`.${customClass}`)).not.toBeNull();
+  });
+  test('renders dotted text when isDotted is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      text: "Test",
+      isDotted: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders children when provided', () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      isLink: true
+    }, /*#__PURE__*/React.createElement("span", null, "Custom Child")));
+    expect(container.querySelector('span').textContent).toBe('Custom Child');
+  });
+  test('applies fontWeight prop', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      text: "Test",
+      fontWeight: "bold"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with href when isLink is true', () => {
+    const href = 'https://example.com';
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      isLink: true,
+      href: href
+    }));
+    expect(container.querySelector('a').getAttribute('href')).toBe(href);
+  });
+  test('calls onClick when link is clicked', () => {
+    const handleClick = jest.fn();
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      isLink: true,
+      onClick: handleClick
+    }));
+    container.querySelector('a').click();
+    expect(handleClick).toHaveBeenCalled();
+  });
+  test('renders as non-link when isLink is false', () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      text: "Test",
+      isLink: false
+    }));
+    expect(container.querySelector('a')).toBeNull();
+  });
+  test('applies custom className to non-link element', () => {
+    const customClass = 'test-class';
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      text: "Test",
+      className: customClass,
+      isLink: false
+    }));
+    expect(container.querySelector(`.${customClass}`)).not.toBeNull();
+  });
+  test('renders with target prop on link', () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(Subject, {
+      isLink: true,
+      target: "_blank"
+    }));
+    expect(container.querySelector('a').getAttribute('target')).toBe('_blank');
+  });
 });

package/es/list/Subject/__tests__/__snapshots__/Subject.spec.js.snap

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Subject applies fontWeight prop 1`] = `
+<DocumentFragment>
+  <div
+    class="dotted font_bold subject  whiteSpace_pre"
+    data-title="Test"
+    data-title-wrap="pre"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Subject rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -152,3 +164,32 @@ exports[`Subject rendering the whiteSpace of -pre-wrap 2`] = `
   </a>
 </DocumentFragment>
 `;
+
+exports[`Subject renders data attributes on link wrapper 1`] = `
+<div>
+  <a
+    class="container  "
+    data-id="subject-id"
+    data-test-id="subject-id"
+    href="javascript:void(0);"
+    rel="noopener noreferrer"
+  >
+    <div
+      class="dotted font_regular subject whiteSpace_pre  cursorPointer"
+      data-title-wrap="pre"
+    />
+  </a>
+</div>
+`;
+
+exports[`Subject renders dotted text when isDotted is true 1`] = `
+<DocumentFragment>
+  <div
+    class="dotted font_regular subject  whiteSpace_pre"
+    data-title="Test"
+    data-title-wrap="pre"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/es/list/Subject/props/defaultProps.js

@@ -1,10 +1,11 @@
+import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 export const defaultProps = {
   isLink: false,
   fontWeight: 'regular',
   className: '',
   isDotted: true,
-  customProps: {},
+  customProps: DUMMY_OBJECT,
   whiteSpace: 'pre',
   isHighlighted: false,
-  highlightData: {}
+  highlightData: DUMMY_OBJECT
 };

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -105,7 +105,9 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           i18nKeys = _this$props3.i18nKeys,
           customProps = _this$props3.customProps;
       var _customProps$ToggleDr = customProps.ToggleDropDownProps,
-          ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr;
+          ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr,
+          _customProps$Departme = customProps.DepartmentTextProps,
+          DepartmentTextProps = _customProps$Departme === void 0 ? {} : _customProps$Departme;
       var _i18nKeys$title = i18nKeys.title,
           title = _i18nKeys$title === void 0 ? 'Move Department' : _i18nKeys$title,
           _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
@@ -125,10 +127,10 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
       }, ToggleDropDownProps, {
         title: title,
         options: departmentList,
-        value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, {
+        value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, _extends({}, DepartmentTextProps, {
           text: departmentName,
           dataTitle: departmentName
-        }),
+        })),
         onClick: this.onMoveDepartment,
         isEditable: isEditable,
         onSelectLabel: onSelectLabel,

package/lib/list/DepartmentDropDown/props/propTypes.js

@@ -32,6 +32,7 @@ var propTypes = (_propTypes = {
   searchErrorText: _propTypes2["default"].string,
   placeholder: _propTypes2["default"].string
 })), _defineProperty(_propTypes, "customProps", _propTypes2["default"].shape({
-  ToggleDropDownProps: _propTypes2["default"].object
+  ToggleDropDownProps: _propTypes2["default"].object,
+  DepartmentTextProps: _propTypes2["default"].object
 })), _propTypes);
 exports.propTypes = propTypes;

package/lib/list/Subject/Subject.js

@@ -106,8 +106,7 @@ var Subject = /*#__PURE__*/function (_Component) {
         urlData: urlData,
         onClick: onClick,
         target: target,
-        customId: dataId,
-        testId: dataId
+        dataId: dataId
       }, LinkProps), children ? children : /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         $tagAttributes_text: linkTagAttributes,
         $i18n_dataTitle: text,

package/lib/list/Subject/__tests__/Subject.spec.js

@@ -4,6 +4,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+require("@testing-library/jest-dom");
+
 var _Subject = _interopRequireDefault(require("../Subject"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -33,4 +35,117 @@ describe('Subject', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('renders data attributes on link wrapper', function () {
+    var dataId = 'subject-id';
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      isLink: true,
+      dataId: dataId
+    })),
+        container = _render4.container;
+
+    expect(container).toMatchSnapshot();
+    var anchor = container.querySelector('a');
+    expect(anchor.getAttribute('data-id')).toBe(dataId);
+    expect(anchor.getAttribute('data-test-id')).toBe(dataId);
+  });
+  test('renders text content', function () {
+    var text = 'Test Subject';
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      text: text
+    })),
+        container = _render5.container;
+
+    expect(container.textContent).toContain(text);
+  });
+  test('renders with custom className', function () {
+    var customClass = 'custom-subject';
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      className: customClass
+    })),
+        container = _render6.container;
+
+    expect(container.querySelector(".".concat(customClass))).not.toBeNull();
+  });
+  test('renders dotted text when isDotted is true', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      text: "Test",
+      isDotted: true
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders children when provided', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      isLink: true
+    }, /*#__PURE__*/_react["default"].createElement("span", null, "Custom Child"))),
+        container = _render8.container;
+
+    expect(container.querySelector('span').textContent).toBe('Custom Child');
+  });
+  test('applies fontWeight prop', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      text: "Test",
+      fontWeight: "bold"
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with href when isLink is true', function () {
+    var href = 'https://example.com';
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      isLink: true,
+      href: href
+    })),
+        container = _render10.container;
+
+    expect(container.querySelector('a').getAttribute('href')).toBe(href);
+  });
+  test('calls onClick when link is clicked', function () {
+    var handleClick = jest.fn();
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      isLink: true,
+      onClick: handleClick
+    })),
+        container = _render11.container;
+
+    container.querySelector('a').click();
+    expect(handleClick).toHaveBeenCalled();
+  });
+  test('renders as non-link when isLink is false', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      text: "Test",
+      isLink: false
+    })),
+        container = _render12.container;
+
+    expect(container.querySelector('a')).toBeNull();
+  });
+  test('applies custom className to non-link element', function () {
+    var customClass = 'test-class';
+
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      text: "Test",
+      className: customClass,
+      isLink: false
+    })),
+        container = _render13.container;
+
+    expect(container.querySelector(".".concat(customClass))).not.toBeNull();
+  });
+  test('renders with target prop on link', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Subject["default"], {
+      isLink: true,
+      target: "_blank"
+    })),
+        container = _render14.container;
+
+    expect(container.querySelector('a').getAttribute('target')).toBe('_blank');
+  });
 });

package/lib/list/Subject/__tests__/__snapshots__/Subject.spec.js.snap

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Subject applies fontWeight prop 1`] = `
+<DocumentFragment>
+  <div
+    class="dotted font_bold subject  whiteSpace_pre"
+    data-title="Test"
+    data-title-wrap="pre"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Subject rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -152,3 +164,32 @@ exports[`Subject rendering the whiteSpace of -pre-wrap 2`] = `
   </a>
 </DocumentFragment>
 `;
+
+exports[`Subject renders data attributes on link wrapper 1`] = `
+<div>
+  <a
+    class="container  "
+    data-id="subject-id"
+    data-test-id="subject-id"
+    href="javascript:void(0);"
+    rel="noopener noreferrer"
+  >
+    <div
+      class="dotted font_regular subject whiteSpace_pre  cursorPointer"
+      data-title-wrap="pre"
+    />
+  </a>
+</div>
+`;
+
+exports[`Subject renders dotted text when isDotted is true 1`] = `
+<DocumentFragment>
+  <div
+    class="dotted font_regular subject  whiteSpace_pre"
+    data-title="Test"
+    data-title-wrap="pre"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/lib/list/Subject/props/defaultProps.js

@@ -4,14 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultProps = void 0;
+
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
+
 var defaultProps = {
   isLink: false,
   fontWeight: 'regular',
   className: '',
   isDotted: true,
-  customProps: {},
+  customProps: _constants.DUMMY_OBJECT,
   whiteSpace: 'pre',
   isHighlighted: false,
-  highlightData: {}
+  highlightData: _constants.DUMMY_OBJECT
 };
 exports.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.9.5",
+  "version": "1.9.7",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -68,26 +68,26 @@
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.8",
-    "@zohodesk/components": "1.6.3",
+    "@zohodesk/components": "1.6.5",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.2.4",
+    "@zohodesk/icons": "1.2.8",
     "@zohodesk/layout": "^3.1.0",
-    "@zohodesk/svg": "1.3.2",
+    "@zohodesk/svg": "1.3.3",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.2.0",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
-    "@zohodesk/dotkit": "1.0.7",
+    "@zohodesk/dotkit": "1.0.9",
     "@zohodesk/react-cli": "1.1.27",
     "@zohodesk/client_build_tool": "0.0.20"
   },
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.2.0",
-    "@zohodesk/components": "1.6.3",
-    "@zohodesk/icons": "1.2.4",
-    "@zohodesk/svg": "1.3.2",
+    "@zohodesk/components": "1.6.5",
+    "@zohodesk/icons": "1.2.8",
+    "@zohodesk/svg": "1.3.3",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.8",