@zohodesk/components 1.6.31 → 1.6.34

package/es/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap

@@ -1,22 +1,174 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`AccordionItem rendering the defult props 1`] = `
+exports[`AccordionItem Render with a11y role 1`] = `
 <DocumentFragment>
   <div
     class=""
     data-id="AccordionItem"
     data-selector-id="accordionItem"
     data-test-id="AccordionItem"
+    role="tab"
   >
     <div
       class=""
     >
       <div>
-         Accordin list 
+        Header
       </div>
     </div>
     <div>
-       Accordin list2 
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AccordionItem Render with className 1`] = `
+<DocumentFragment>
+  <div
+    class="accordion-item-class"
+    data-id="AccordionItem"
+    data-selector-id="accordionItem"
+    data-test-id="AccordionItem"
+  >
+    <div
+      class=""
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div>
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AccordionItem Render with dataId and dataSelectorId 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="accordion-item-custom-id"
+    data-selector-id="accordion-item-custom-selector-id"
+    data-test-id="accordion-item-custom-id"
+  >
+    <div
+      class=""
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div>
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AccordionItem Render with default props 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="AccordionItem"
+    data-selector-id="accordionItem"
+    data-test-id="AccordionItem"
+  >
+    <div
+      class=""
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div>
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AccordionItem Render with equalityCheck override on mismatched selection 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="AccordionItem"
+    data-selector-id="accordionItem"
+    data-test-id="AccordionItem"
+  >
+    <div
+      class=""
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div>
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AccordionItem Render with innerClass 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="AccordionItem"
+    data-selector-id="accordionItem"
+    data-test-id="AccordionItem"
+  >
+    <div
+      class="accordion-item-inner-class"
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div>
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AccordionItem Render with unMountItem=false overriding unMount=true 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="AccordionItem"
+    data-selector-id="accordionItem"
+    data-test-id="AccordionItem"
+  >
+    <div
+      class=""
+    >
+      <div>
+        Header
+      </div>
+    </div>
+    <div>
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AccordionItem Render with unMountItem=true and mismatched selection 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="AccordionItem"
+    data-selector-id="accordionItem"
+    data-test-id="AccordionItem"
+  >
+    <div
+      class=""
+    >
+      <div>
+        Header
+      </div>
     </div>
   </div>
 </DocumentFragment>

package/es/Animation/__tests__/Animation.spec.js

@@ -1,14 +1,38 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import Animation from "../Animation";
 describe('Animation', () => {
-  test('rendering the defult props', () => {
+  afterEach(() => cleanup());
+  test('Render with default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Animation, null, /*#__PURE__*/React.createElement("div", null, "Animation Content")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isActive=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Animation, {
+      isActive: true
+    }, /*#__PURE__*/React.createElement("div", null, "Animation Content")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with unmountOnExit=false and isActive=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Animation, {
+      unmountOnExit: false
+    }, /*#__PURE__*/React.createElement("div", null, "Animation Content")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const names = ['zoomIn', 'scaleIn', 'fadeIn', 'slideLeft', 'slideDown', 'skewIn', 'default', 'none'];
+  test.each(names)('Render with name as %s', name => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Animation, {
       isActive: true,
-      name: "zoomIn"
-    }, /*#__PURE__*/React.createElement("div", null, " Test Animation")));
+      name: name
+    }, /*#__PURE__*/React.createElement("div", null, "Animation Content")));
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/es/Animation/__tests__/__snapshots__/Animation.spec.js.snap

@@ -1,11 +1,101 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Animation rendering the defult props 1`] = `
+exports[`Animation Render with default props 1`] = `<DocumentFragment />`;
+
+exports[`Animation Render with isActive=true 1`] = `
+<DocumentFragment>
+  <div
+    class="fadeInEnter fadeInEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as default 1`] = `
+<DocumentFragment>
+  <div
+    class="defaultEnter defaultEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as fadeIn 1`] = `
+<DocumentFragment>
+  <div
+    class="fadeInEnter fadeInEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as none 1`] = `
+<DocumentFragment>
+  <div
+    class="noneEnter noneEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as scaleIn 1`] = `
+<DocumentFragment>
+  <div
+    class="scaleInEnter scaleInEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as skewIn 1`] = `
+<DocumentFragment>
+  <div
+    class="skewInEnter skewInEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as slideDown 1`] = `
+<DocumentFragment>
+  <div
+    class="slideDownEnter slideDownEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as slideLeft 1`] = `
+<DocumentFragment>
+  <div
+    class="slideLeftEnter slideLeftEnterActive"
+  >
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with name as zoomIn 1`] = `
 <DocumentFragment>
   <div
     class="zoomInEnter zoomInEnterActive"
   >
-     Test Animation
+    Animation Content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Animation Render with unmountOnExit=false and isActive=false 1`] = `
+<DocumentFragment>
+  <div>
+    Animation Content
   </div>
 </DocumentFragment>
 `;

package/es/Button/css/Button.module.css

@@ -544,7 +544,7 @@
   }
 }
 .successstate {
-  position: absolute;
+  composes: d-absolute from global;
   top: 50% ;
   left: 50% ;
   transform: translate(-50%, -50%);
@@ -554,8 +554,8 @@
 }
 
 .tickElement {
+  composes: d-relative d-border-solid from global;
   height: var(--zd_size15) ;
-  position: relative;
   top: calc( var(--zd_size2) * -1 ) ;
   width: var(--zd_size6) ;
   transform: scaleX(-1) rotate(135deg);
@@ -563,7 +563,6 @@
   -webkit-transform: scaleX(-1) rotate(135deg);
   transform-origin: center;
   border-width: 2px 2px 0 0;
-  border-style: solid;
   border-color: var(--button_success_border_color);
   animation: tick var(--zd_no_transition3) ease 0s forwards;
 }

package/es/CheckBox/CheckBox.js

@@ -128,7 +128,7 @@ export default class CheckBox extends React.Component {
     })), checked ? /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 44 44",
-      className: cn(`${style.tick} ${style[`${size}tick`]}  ${disabled ? CssProvider('isDisabled') : ''} ${customTickSize}`)
+      className: cn(`${disabled ? CssProvider('isDisabled') : ''} ${style.tick} ${style[`${size}tick`]}   ${customTickSize}`)
     }, /*#__PURE__*/React.createElement("polyline", {
       points: "12.56 19 19.61 26.06 40.39 5.28",
       className: cn(`${style.tickPath} ${style.checkedtickPath}`)

package/es/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/es/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/es/DateTime/__tests__/CalendarView.spec.js

@@ -1,12 +1,79 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import CalendarView from "../CalendarView";
+const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const dayNamesShort = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 describe('CalendarView', () => {
-  test('rendering the defult props', () => {
+  afterEach(() => cleanup()); // dayNames/dayNamesShort are read unconditionally in render; year/month given real values for a deterministic grid
+
+  test('Render with default props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(CalendarView, {
-      dayNames: []
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      year: 2024,
+      month: 0
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needBorder=false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CalendarView, {
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      year: 2024,
+      month: 0,
+      needBorder: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with weekStartDay=1', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CalendarView, {
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      year: 2024,
+      month: 0,
+      weekStartDay: 1
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with holidays', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CalendarView, {
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      year: 2024,
+      month: 0,
+      holidays: [1, 5]
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with date selected', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CalendarView, {
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      year: 2024,
+      month: 0,
+      date: 15
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CalendarView, {
+      dayNames: dayNames,
+      dayNamesShort: dayNamesShort,
+      year: 2024,
+      month: 0,
+      dataId: "customCalendar"
     }));
     expect(asFragment()).toMatchSnapshot();
   });

package/es/DateTime/__tests__/DateTime.spec.js

@@ -1,21 +1,104 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import DateTime from "../DateTime";
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import DateTime from "../DateTime"; // 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
+
+import { cn } from "@dot-system/css-utility";
+jest.mock('@zohodesk/virtualizer', () => {
+  const React = require('react');
+
+  return {
+    Virtualizer: function MockVirtualizer({
+      elementRenderer,
+      elementsCount,
+      className,
+      dataId
+    }) {
+      const count = Math.min(elementsCount, 3);
+      const items = [];
+
+      for (let index = 0; index < count; index++) {
+        items.push( /*#__PURE__*/React.createElement(React.Fragment, {
+          key: index
+        }, elementRenderer({
+          index,
+          style: {},
+          ref: () => {}
+        })));
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn(className),
+        "data-id": dataId
+      }, items);
+    }
+  };
+});
 describe('DateTime', () => {
-  test('rendering the defult props', () => {
+  afterEach(() => cleanup()); // isReady defaults to falsy and isDefaultPosition defaults to false, so DateTime renders nothing by default
+
+  test('Render with default props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(DateTime, null));
     expect(asFragment()).toMatchSnapshot();
+  }); // isDefaultPosition bypasses the ResponsiveDropBox/isReady gate and renders the calendar content directly
+
+  test('Render with isDefaultPosition', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DateTime, {
+      isDefaultPosition: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDefaultPosition and value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DateTime, {
+      isDefaultPosition: true,
+      value: "2024-01-15T10:20:00.000"
+    }));
+    expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the isActive is true and isDefaultPosition is true', () => {
+  test('Render with isDefaultPosition and is24Hour', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DateTime, {
+      isDefaultPosition: true,
+      is24Hour: true
+    }));
+    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', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DateTime, {
+      isDefaultPosition: true,
+      needAction: false
+    }));
+    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', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(DateTime, {
-      isActive: true,
       isDefaultPosition: true,
-      value: "2023-07-29T20:20:20.000"
+      isDateTimeField: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // clicking the month/year heading toggles the internal isYearView state, revealing the YearView section
+
+  test('Render after opening the year view', () => {
+    const {
+      asFragment,
+      container
+    } = render( /*#__PURE__*/React.createElement(DateTime, {
+      isDefaultPosition: true
     }));
+    fireEvent.click(container.querySelector('[data-id="selectYear"]'));
     expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,11 +1,29 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import DateTimePopupFooter from "../DateTimePopupFooter";
 describe('DateTimePopupFooter', () => {
-  test('rendering the defult props', () => {
+  afterEach(() => cleanup());
+  test('Render with default props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(DateTimePopupFooter, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with submitText and cancelText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DateTimePopupFooter, {
+      submitText: "Save",
+      cancelText: "Cancel"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DateTimePopupFooter, {
+      dataId: "customFooter"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -1,11 +1,38 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import DateTimePopupHeader from "../DateTimePopupHeader";
 describe('DateTimePopupHeader', () => {
-  test('rendering the defult props', () => {
+  afterEach(() => cleanup());
+  test('Render with default props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(DateTimePopupHeader, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('Render with showMonthTxt', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DateTimePopupHeader, {
+      showMonthTxt: "January 2024"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // nav arrows render only when isYearView is falsy; isYearView=true is the negative case
+
+  test('Render with isYearView=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DateTimePopupHeader, {
+      isYearView: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with prevMonthTitleText and nextMonthTitleText', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(DateTimePopupHeader, {
+      prevMonthTitleText: "Previous Month",
+      nextMonthTitleText: "Next Month"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });