@zohodesk/components 1.6.31 → 1.6.34

package/lib/CheckBox/CheckBox.js

@@ -181,7 +181,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
       })), checked ? /*#__PURE__*/_react["default"].createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 44 44",
-        className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].tick, " ").concat(_CheckBoxModule["default"]["".concat(size, "tick")], "  ").concat(disabled ? (0, _CssProvider["default"])('isDisabled') : '', " ").concat(customTickSize))
+        className: (0, _cssUtility.cn)("".concat(disabled ? (0, _CssProvider["default"])('isDisabled') : '', " ").concat(_CheckBoxModule["default"].tick, " ").concat(_CheckBoxModule["default"]["".concat(size, "tick")], "   ").concat(customTickSize))
       }, /*#__PURE__*/_react["default"].createElement("polyline", {
         points: "12.56 19 19.61 26.06 40.39 5.28",
         className: (0, _cssUtility.cn)("".concat(_CheckBoxModule["default"].tickPath, " ").concat(_CheckBoxModule["default"].checkedtickPath))

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

@@ -34,7 +34,7 @@ exports[`CheckBox component Should be disable 1`] = `
           />
         </svg>
         <svg
-          class="tick mediumtick disabled"
+          class="disabled tick mediumtick"
           viewBox="0 0 44 44"
           xmlns="http://www.w3.org/2000/svg"
         >

package/lib/DateTime/DateTime.module.css

@@ -1,5 +1,5 @@
 .semibold {
-  font-weight: var(--zd-fw-semibold);
+  composes: d-font-semibold from global;
 }
 
 .boxPadding {
@@ -23,7 +23,7 @@
 }
 
 .datesStr {
-  font-weight: var(--zd-fw-normal);
+  composes: d-font-normal from global;
 }
 
 .grid {

package/lib/DateTime/__tests__/CalendarView.spec.js

@@ -8,13 +8,82 @@ var _CalendarView = _interopRequireDefault(require("../CalendarView"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+var dayNamesShort = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 describe('CalendarView', function () {
-  test('rendering the defult props', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  }); // dayNames/dayNamesShort are read unconditionally in render; year/month given real values for a deterministic grid
+
+  test('Render with default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CalendarView["default"], {
-      dayNames: []
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      year: 2024,
+      month: 0
     })),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with needBorder=false', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CalendarView["default"], {
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      year: 2024,
+      month: 0,
+      needBorder: false
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with weekStartDay=1', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CalendarView["default"], {
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      year: 2024,
+      month: 0,
+      weekStartDay: 1
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with holidays', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CalendarView["default"], {
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      year: 2024,
+      month: 0,
+      holidays: [1, 5]
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with date selected', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CalendarView["default"], {
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      year: 2024,
+      month: 0,
+      date: 15
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CalendarView["default"], {
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      year: 2024,
+      month: 0,
+      dataId: "customCalendar"
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/DateTime/__tests__/DateTime.spec.js

@@ -6,23 +6,109 @@ var _react2 = require("@testing-library/react");
 
 var _DateTime = _interopRequireDefault(require("../DateTime"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+// the real Virtualizer measures DOM size (0 in jsdom) and the year range spans 1850-9999;
+// mocked to render only the first few rows so the YearView branch stays small and deterministic
+jest.mock('@zohodesk/virtualizer', function () {
+  var React = require('react');
+
+  return {
+    Virtualizer: function MockVirtualizer(_ref) {
+      var elementRenderer = _ref.elementRenderer,
+          elementsCount = _ref.elementsCount,
+          className = _ref.className,
+          dataId = _ref.dataId;
+      var count = Math.min(elementsCount, 3);
+      var items = [];
+
+      for (var index = 0; index < count; index++) {
+        items.push( /*#__PURE__*/React.createElement(React.Fragment, {
+          key: index
+        }, elementRenderer({
+          index: index,
+          style: {},
+          ref: function ref() {}
+        })));
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: (0, _cssUtility.cn)(className),
+        "data-id": dataId
+      }, items);
+    }
+  };
+});
 describe('DateTime', function () {
-  test('rendering the defult props', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  }); // isReady defaults to falsy and isDefaultPosition defaults to false, so DateTime renders nothing by default
+
+  test('Render with default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateTime["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the isActive is true and isDefaultPosition is true', function () {
+  }); // isDefaultPosition bypasses the ResponsiveDropBox/isReady gate and renders the calendar content directly
+
+  test('Render with isDefaultPosition', function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {
-      isActive: true,
-      isDefaultPosition: true,
-      value: "2023-07-29T20:20:20.000"
+      isDefaultPosition: true
     })),
         asFragment = _render2.asFragment;
 
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDefaultPosition and value', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {
+      isDefaultPosition: true,
+      value: "2024-01-15T10:20:00.000"
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDefaultPosition and is24Hour', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {
+      isDefaultPosition: true,
+      is24Hour: true
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // the footer renders only when needAction is truthy (default); needAction=false is the negative case
+
+  test('Render with isDefaultPosition and needAction=false', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {
+      isDefaultPosition: true,
+      needAction: false
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // the Time section renders only when isDateTimeField is truthy (default); isDateTimeField=false is the negative case
+
+  test('Render with isDefaultPosition and isDateTimeField=false', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {
+      isDefaultPosition: true,
+      isDateTimeField: false
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // clicking the month/year heading toggles the internal isYearView state, revealing the YearView section
+
+  test('Render after opening the year view', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {
+      isDefaultPosition: true
+    })),
+        asFragment = _render7.asFragment,
+        container = _render7.container;
+
+    _react2.fireEvent.click(container.querySelector('[data-id="selectYear"]'));
+
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/lib/DateTime/__tests__/DateTimePopupFooter.spec.js

@@ -9,10 +9,30 @@ var _DateTimePopupFooter = _interopRequireDefault(require("../DateTimePopupFoote
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('DateTimePopupFooter', function () {
-  test('rendering the defult props', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
+  test('Render with default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateTimePopupFooter["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with submitText and cancelText', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateTimePopupFooter["default"], {
+      submitText: "Save",
+      cancelText: "Cancel"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateTimePopupFooter["default"], {
+      dataId: "customFooter"
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/DateTime/__tests__/DateTimePopupHeader.spec.js

@@ -9,10 +9,39 @@ var _DateTimePopupHeader = _interopRequireDefault(require("../DateTimePopupHeade
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('DateTimePopupHeader', function () {
-  test('rendering the defult props', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
+  test('Render with default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateTimePopupHeader["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with showMonthTxt', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateTimePopupHeader["default"], {
+      showMonthTxt: "January 2024"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // nav arrows render only when isYearView is falsy; isYearView=true is the negative case
+
+  test('Render with isYearView=true', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateTimePopupHeader["default"], {
+      isYearView: true
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with prevMonthTitleText and nextMonthTitleText', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateTimePopupHeader["default"], {
+      prevMonthTitleText: "Previous Month",
+      nextMonthTitleText: "Next Month"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/DateTime/__tests__/DateWidget.spec.js

@@ -9,10 +9,44 @@ var _DateWidget = _interopRequireDefault(require("../DateWidget"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('DateWidget', function () {
-  test('rendering the defult props', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  });
+  test('Render with default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with value', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], {
+      value: "2024-01-15T10:00:00.000"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], {
+      isDisabled: true
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isReadOnly', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], {
+      isReadOnly: true
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // a custom trigger element replaces the built-in TextBoxIcon when children are supplied
+
+  test('Render with children', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], null, /*#__PURE__*/_react["default"].createElement("span", null, "Custom Trigger"))),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/DateTime/__tests__/DaysRow.spec.js

@@ -8,13 +8,31 @@ var _DaysRow = _interopRequireDefault(require("../DaysRow"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+var dayNamesShort = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 describe('DaysRow', function () {
-  test('rendering the defult props', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  }); // dayNames/dayNamesShort/holidays are read unconditionally in render, so every case supplies all three
+
+  test('Render with default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DaysRow["default"], {
-      dayNames: []
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      holidays: []
     })),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with holidays', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DaysRow["default"], {
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      holidays: [0, 6]
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/DateTime/__tests__/Time.spec.js

@@ -8,11 +8,60 @@ var _Time = _interopRequireDefault(require("../Time"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var hourSuggestions = ['01', '02', '03'];
+var minSuggestions = ['00', '01', '02'];
+var ampmSuggestions = ['AM', 'PM'];
 describe('Time', function () {
-  test('rendering the defult props', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Time["default"], null)),
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  }); // the Select children call options.forEach unconditionally, so every case supplies the suggestion arrays
+
+  test('Render with default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Time["default"], {
+      timeText: "Time",
+      hourSuggestions: hourSuggestions,
+      minSuggestions: minSuggestions,
+      ampmSuggestions: ampmSuggestions,
+      hours: "01",
+      mins: "00",
+      amPm: "AM"
+    })),
         asFragment = _render.asFragment;
 
+    expect(asFragment()).toMatchSnapshot();
+  }); // the AmPm select renders only when is24Hour is falsy; is24Hour=true is the negative case
+
+  test('Render with is24Hour=true', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Time["default"], {
+      timeText: "Time",
+      hourSuggestions: hourSuggestions,
+      minSuggestions: minSuggestions,
+      ampmSuggestions: ampmSuggestions,
+      hours: "01",
+      mins: "00",
+      is24Hour: true
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps overriding the hour Select dataId', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Time["default"], {
+      timeText: "Time",
+      hourSuggestions: hourSuggestions,
+      minSuggestions: minSuggestions,
+      ampmSuggestions: ampmSuggestions,
+      hours: "01",
+      mins: "00",
+      amPm: "AM",
+      customProps: {
+        HourSelectProps: {
+          dataId: 'customHourField'
+        }
+      }
+    })),
+        asFragment = _render3.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/lib/DateTime/__tests__/YearView.spec.js

@@ -6,12 +6,71 @@ var _react2 = require("@testing-library/react");
 
 var _YearView = _interopRequireDefault(require("../YearView"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var monthNamesShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // the real Virtualizer measures DOM size (0 in jsdom) and the year range spans 1850-9999;
+// mocked to render only the first few rows so the output stays small and deterministic
+
+jest.mock('@zohodesk/virtualizer', function () {
+  var React = require('react');
+
+  return {
+    Virtualizer: function MockVirtualizer(_ref) {
+      var elementRenderer = _ref.elementRenderer,
+          elementsCount = _ref.elementsCount,
+          className = _ref.className,
+          dataId = _ref.dataId;
+      var count = Math.min(elementsCount, 3);
+      var items = [];
+
+      for (var index = 0; index < count; index++) {
+        items.push( /*#__PURE__*/React.createElement(React.Fragment, {
+          key: index
+        }, elementRenderer({
+          index: index,
+          style: {},
+          ref: function ref() {}
+        })));
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: (0, _cssUtility.cn)(className),
+        "data-id": dataId
+      }, items);
+    }
+  };
+});
 describe('YearView', function () {
-  test('rendering the defult props', function () {
+  afterEach(function () {
+    return (0, _react2.cleanup)();
+  }); // Year's isActive is derived from viewedYear === year, not a direct prop; viewedYear unset parses to 0, so isActive=false here
+
+  test('Render with default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_YearView["default"], null)),
-        asFragment = _render.asFragment; // expect(asFragment()).toMatchSnapshot();
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // 1850 is the first rendered year (range start); matching it sets the Year row's derived isActive=true
+
+  test('Render with viewedYear matching the rendered year', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_YearView["default"], {
+      viewedYear: "1850"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  }); // the month grid renders only when isMonthOpen is true for the matching year; monthNamesShort is then required
+
+  test('Render with viewedYear matching and isMonthOpen=true', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_YearView["default"], {
+      viewedYear: "1850",
+      isMonthOpen: true,
+      monthNamesShort: monthNamesShort
+    })),
+        asFragment = _render3.asFragment;
 
+    expect(asFragment()).toMatchSnapshot();
   });
 });