@mtes-mct/monitor-ui 4.1.0 → 5.1.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [5.0.0](https://github.com/MTES-MCT/monitor-ui/compare/v4.1.0...v5.0.0) (2023-04-11)
+
+
+* fix!: handle DST correctly in date-related utils & fields ([377450b](https://github.com/MTES-MCT/monitor-ui/commit/377450bca0f2c90d7cf1331da3e9f8a50042bb33))
+* fix(fields)!: make DatePicker & DateRangePicker onChange value undefined when cleared ([b8a0f09](https://github.com/MTES-MCT/monitor-ui/commit/b8a0f09aae3638bebccced2c8c3a0f39d5caa8ab))
+
+
+### Features
+
+* **fields:** add isEndDate prop to DatePicker ([418290e](https://github.com/MTES-MCT/monitor-ui/commit/418290e94f8f7eea9a282ac2d610b57761af2c8b))
+
+
+### BREAKING CHANGES
+
+* `dayjs` export is now named `customDayjs`.
+* rsuite-override.css doesn't include calendar-related CSS anymore.
+* DatePicker & DateRangePicker onChange() value can now
+be undefined.
+
+# [4.1.0](https://github.com/MTES-MCT/monitor-ui/compare/v4.0.7...v4.1.0) (2023-04-05)
+
+
+### Features
+
+* **fields:** Add isAddButtonDisabled to MultiZoneEditor ([3457bc5](https://github.com/MTES-MCT/monitor-ui/commit/3457bc5114de8f040b77daf78678eb8655448737))
+
 ## [4.0.7](https://github.com/MTES-MCT/monitor-ui/compare/v4.0.6...v4.0.7) (2023-04-03)
 
 

package/assets/stylesheets/rsuite-override.css

@@ -514,30 +514,6 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
   border-color: transparent var(--slateGray) transparent transparent;
 }
 
-.rs-calendar-table-cell-is-today .rs-calendar-table-cell-content {
-  border: 1px solid var(--slateGray) !important;
-}
-
-.rs-calendar,
-.rs-calendar-header,
-.rs-calendar-table-cell-content {
-  box-sizing: border-box !important;
-}
-
-.rs-calendar-table-cell-content {
-  border-radius: 2px !important;
-}
-
-.rs-calendar-table-cell-selected .rs-calendar-table-cell-content {
-  color: #f0f0f0;
-  border-color: var(--charcoal);
-  background-color: var(--charcoal);
-}
-
-.rs-calendar-table-cell-in-range::before {
-  background-color: #e0e0e0;
-}
-
 .rs-picker-toolbar-right-btn-ok {
   padding: 5px 10px;
   font-size: 13px;

package/cypress/commands/fill/fillDatePicker.d.ts

@@ -0,0 +1 @@
+export declare function fillDatePicker(fieldsetElement: HTMLElement, dateOrDateWithTimeTuple: Cypress.DateTuple | Cypress.DateWithTimeTuple | undefined): void;

package/cypress/commands/fill/fillDateRangePicker.d.ts

@@ -1 +1 @@
-export declare function fillDateRangePicker(label: string, startDate: Date, endDate: Date): void;
+export declare function fillDateRangePicker(fieldsetElement: HTMLElement, dateOrDateWithTimeTupleRange: [Cypress.DateTuple, Cypress.DateTuple] | [Cypress.DateWithTimeTuple, Cypress.DateWithTimeTuple] | undefined): void;

package/cypress/commands/fill/index.d.ts

@@ -1 +1 @@
-export declare function fill(label: string | undefined, value: boolean | number | string | string[] | undefined, leftRetries?: number): void;
+export declare function fill(label: string | undefined, value: boolean | number | string | string[] | (Cypress.DateTuple | Cypress.DateWithTimeTuple) | ([Cypress.DateTuple, Cypress.DateTuple] | [Cypress.DateWithTimeTuple, Cypress.DateWithTimeTuple]) | undefined, leftRetries?: number): void;

package/cypress/index.d.ts

@@ -10,9 +10,22 @@ declare namespace Cypress {
       }>
     ): Chainable<JQuery<HTMLButtonElement>>
     clickLink(linkText: string): Chainable<JQuery<HTMLAnchorElement>>
-    clickOutside(xPosition?: number, yPosition?: number): Chainable<JQuery<HTMLBodyElement>>
-    fill(label: string, value: boolean | number | string | string[] | undefined): Chainable<Element>
+    clickOutside(xPosition?: number, yPosition?: number): void
+    fill(
+      label: string,
+      value:
+        | boolean
+        | number
+        | string
+        | string[]
+        | (DateTuple | DateWithTimeTuple)
+        | ([Cypress.DateTuple, Cypress.DateTuple] | [Cypress.DateWithTimeTuple, Cypress.DateWithTimeTuple])
+        | undefined
+    ): Chainable<Element>
     forceClick(): Chainable<JQuery<HTMLElement>>
     getDataCy(dataCy: string): Chainable<JQuery<HTMLElement>>
   }
+
+  type DateTuple = [number, number, number]
+  type DateWithTimeTuple = [number, number, number, number, number]
 }

package/cypress/index.js

@@ -674,6 +674,114 @@ function checkMultiRadioOption(fieldsetElement, value) {
     return fieldsetElement;
 }
 
+function fillDatePicker(fieldsetElement, dateOrDateWithTimeTuple) {
+    const inputElements = fieldsetElement.querySelectorAll('input');
+    if (inputElements.length !== 4 && inputElements.length !== 6) {
+        throw new Error(`Expected to find 4 or 6 inputs within in DatePicker but found ${inputElements.length}.`);
+    }
+    const hasTimeInput = inputElements.length !== 4;
+    const fieldsetElementOffsetLeft = fieldsetElement.offsetLeft
+        ? fieldsetElement.offsetLeft
+        : (() => {
+            if (!fieldsetElement.offsetParent) {
+                throw new Error('`fieldsetElement.offsetParent` is undefined.');
+            }
+            return fieldsetElement.offsetParent.offsetLeft;
+        })();
+    const fieldsetElementOffsetTop = fieldsetElement.offsetTop !== 0
+        ? fieldsetElement.offsetTop
+        : (() => {
+            if (!fieldsetElement.offsetParent) {
+                throw new Error('`fieldsetElement.offsetParent` is undefined.');
+            }
+            return fieldsetElement.offsetParent.offsetTop;
+        })();
+    if (!dateOrDateWithTimeTuple) {
+        cy.wrap(fieldsetElement).get('[aria-label="Jour"]').clear();
+        cy.wrap(fieldsetElement).get('[aria-label="Mois"]').clear();
+        cy.wrap(fieldsetElement).get('[aria-label="Année"]').clear();
+        if (hasTimeInput) {
+            cy.wrap(fieldsetElement).get('[aria-label="Heure"]').clear();
+            cy.wrap(fieldsetElement).get('[aria-label="Minute"]').clear();
+        }
+        cy.clickOutside(fieldsetElementOffsetLeft, fieldsetElementOffsetTop - 1);
+        cy.wait(250);
+        return;
+    }
+    const [year, month, day, hour, minute] = dateOrDateWithTimeTuple;
+    cy.wrap(fieldsetElement).get('[aria-label="Jour"]').type(String(day).padStart(2, '0'));
+    cy.wrap(fieldsetElement).get('[aria-label="Mois"]').type(String(month).padStart(2, '0'));
+    cy.wrap(fieldsetElement).get('[aria-label="Année"]').type(String(year));
+    if (hasTimeInput) {
+        cy.wrap(fieldsetElement).get('[aria-label="Heure"]').type(String(hour).padStart(2, '0'));
+        cy.wrap(fieldsetElement).get('[aria-label="Minute"]').type(String(minute).padStart(2, '0'));
+    }
+    cy.clickOutside(fieldsetElementOffsetLeft, fieldsetElementOffsetTop - 1);
+    cy.wait(250);
+}
+
+function fillDateRangePicker(fieldsetElement, dateOrDateWithTimeTupleRange) {
+    const inputElements = fieldsetElement.querySelectorAll('input');
+    if (inputElements.length !== 7 && inputElements.length !== 11) {
+        throw new Error(`Expected to find 7 or 11 inputs within in DatePicker but found ${inputElements.length}.`);
+    }
+    const hasTimeInput = inputElements.length !== 7;
+    const fieldsetElementOffsetLeft = fieldsetElement.offsetLeft
+        ? fieldsetElement.offsetLeft
+        : (() => {
+            if (!fieldsetElement.offsetParent) {
+                throw new Error('`fieldsetElement.offsetParent` is undefined.');
+            }
+            return fieldsetElement.offsetParent.offsetLeft;
+        })();
+    const fieldsetElementOffsetTop = fieldsetElement.offsetTop !== 0
+        ? fieldsetElement.offsetTop
+        : (() => {
+            if (!fieldsetElement.offsetParent) {
+                throw new Error('`fieldsetElement.offsetParent` is undefined.');
+            }
+            return fieldsetElement.offsetParent.offsetTop;
+        })();
+    if (!dateOrDateWithTimeTupleRange) {
+        cy.wrap(fieldsetElement).get('[aria-label="Jour de début"]').clear();
+        cy.wrap(fieldsetElement).get('[aria-label="Mois de début"]').clear();
+        cy.wrap(fieldsetElement).get('[aria-label="Année de début"]').clear();
+        if (hasTimeInput) {
+            cy.wrap(fieldsetElement).get('[aria-label="Heure de début"]').clear();
+            cy.wrap(fieldsetElement).get('[aria-label="Minute de début"]').clear();
+        }
+        cy.wrap(fieldsetElement).get('[aria-label="Jour de fin"]').clear();
+        cy.wrap(fieldsetElement).get('[aria-label="Mois de fin"]').clear();
+        cy.wrap(fieldsetElement).get('[aria-label="Année de fin"]').clear();
+        if (hasTimeInput) {
+            cy.wrap(fieldsetElement).get('[aria-label="Heure de fin"]').clear();
+            cy.wrap(fieldsetElement).get('[aria-label="Minute de fin"]').clear();
+        }
+        cy.clickOutside(fieldsetElementOffsetLeft, fieldsetElementOffsetTop - 1);
+        cy.wait(250);
+        return;
+    }
+    const [startDateOrDateWithTimeTuple, endDateOrDateWithTimeTuple] = dateOrDateWithTimeTupleRange;
+    const [startYear, startMonth, startDay, startHour, startMinute] = startDateOrDateWithTimeTuple;
+    const [endYear, endMonth, endDay, endHour, endMinute] = endDateOrDateWithTimeTuple;
+    cy.wrap(fieldsetElement).get('[aria-label="Jour de début"]').type(String(startDay).padStart(2, '0'));
+    cy.wrap(fieldsetElement).get('[aria-label="Mois de début"]').type(String(startMonth).padStart(2, '0'));
+    cy.wrap(fieldsetElement).get('[aria-label="Année de début"]').type(String(startYear));
+    if (hasTimeInput) {
+        cy.wrap(fieldsetElement).get('[aria-label="Heure de début"]').type(String(startHour).padStart(2, '0'));
+        cy.wrap(fieldsetElement).get('[aria-label="Minute de début"]').type(String(startMinute).padStart(2, '0'));
+    }
+    cy.wrap(fieldsetElement).get('[aria-label="Jour de fin"]').type(String(endDay).padStart(2, '0'));
+    cy.wrap(fieldsetElement).get('[aria-label="Mois de fin"]').type(String(endMonth).padStart(2, '0'));
+    cy.wrap(fieldsetElement).get('[aria-label="Année de fin"]').type(String(endYear));
+    if (hasTimeInput) {
+        cy.wrap(fieldsetElement).get('[aria-label="Heure de fin"]').type(String(endHour).padStart(2, '0'));
+        cy.wrap(fieldsetElement).get('[aria-label="Minute de fin"]').type(String(endMinute).padStart(2, '0'));
+    }
+    cy.clickOutside(fieldsetElementOffsetLeft, fieldsetElementOffsetTop - 1);
+    cy.wait(250);
+}
+
 function fillTextarea(textareaElement, value) {
     if (value) {
         cy.wrap(textareaElement).scrollIntoView().type(value, { delay: 1, force: true });
@@ -697,6 +805,22 @@ function pickMultiSelectOptions(cypressMultiSelectInputElement, values) {
         if (!fieldElement) {
             throw new Error('`fieldElement` is undefined.');
         }
+        const fieldElementOffsetLeft = fieldElement.offsetLeft
+            ? fieldElement.offsetLeft
+            : (() => {
+                if (!fieldElement.offsetParent) {
+                    throw new Error('`fieldElement.offsetParent` is undefined.');
+                }
+                return fieldElement.offsetParent.offsetLeft;
+            })();
+        const fieldElementOffsetTop = fieldElement.offsetTop !== 0
+            ? fieldElement.offsetTop
+            : (() => {
+                if (!fieldElement.offsetParent) {
+                    throw new Error('`fieldElement.offsetParent` is undefined.');
+                }
+                return fieldElement.offsetParent.offsetTop;
+            })();
         cy.wrap(fieldElement).scrollIntoView();
         const maybeCleanButton = fieldElement.querySelector('.rs-picker-toggle-clean');
         if (maybeCleanButton) {
@@ -705,7 +829,7 @@ function pickMultiSelectOptions(cypressMultiSelectInputElement, values) {
         if (!values) {
             return;
         }
-        cy.wrap(fieldElement).find('.rs-picker-toggle-caret').forceClick();
+        cy.wrap(fieldElement).find('.rs-picker-toggle').forceClick();
         cy.get('.rs-picker-picker-check-menu').then(([multiSelectMenuElement]) => {
             if (!multiSelectMenuElement) {
                 throw new Error('`multiSelectMenuElement` is undefined.');
@@ -721,24 +845,8 @@ function pickMultiSelectOptions(cypressMultiSelectInputElement, values) {
                     .scrollIntoView()
                     .forceClick();
             });
-            const offsetLeft = fieldElement.offsetLeft
-                ? fieldElement.offsetLeft
-                : (() => {
-                    if (!fieldElement.offsetParent) {
-                        throw new Error('`fieldElement.offsetParent` is undefined.');
-                    }
-                    return fieldElement.offsetParent.offsetLeft;
-                })();
-            const offsetTop = fieldElement.offsetTop !== 0
-                ? fieldElement.offsetTop
-                : (() => {
-                    if (!fieldElement.offsetParent) {
-                        throw new Error('`fieldElement.offsetParent` is undefined.');
-                    }
-                    return fieldElement.offsetParent.offsetTop;
-                })();
             // TODO Investigate that (this should be -1).
-            cy.clickOutside(offsetLeft, offsetTop - 16);
+            cy.clickOutside(fieldElementOffsetLeft, fieldElementOffsetTop - 16);
             cy.wait(250);
         });
     });
@@ -760,7 +868,7 @@ function pickSelectOption(cypressSelectInputElement, value) {
         if (!value) {
             return;
         }
-        cy.wrap(fieldElement).find('.rs-picker-toggle-caret').click();
+        cy.wrap(fieldElement).find('.rs-picker-toggle').forceClick();
         cy.get('.rs-picker-select-menu').then(([selectMenuElement]) => {
             if (!selectMenuElement) {
                 throw new Error('`selectMenuElement` is undefined.');
@@ -919,6 +1027,26 @@ function fill(label, value, leftRetries = RETRIES) {
             if (!fieldsetElement || fieldsetElement.tagName !== 'FIELDSET') {
                 throw new Error(`Could not find parent fieldset of legend element with text "${label}".`);
             }
+            if (fieldsetElement.classList.contains('Field-DatePicker')) {
+                if ((!Array.isArray(value) || (value.length !== 3 && value.length !== 5) || typeof value[0] !== 'number') &&
+                    value !== undefined) {
+                    throw new Error('`value` should be of type `[number, number, number]`, `[number, number, number, number, number]` or `undefined`.');
+                }
+                fillDatePicker(fieldsetElement, value);
+                return;
+            }
+            if (fieldsetElement.classList.contains('Field-DateRangePicker')) {
+                if ((!Array.isArray(value) ||
+                    value.length !== 2 ||
+                    !Array.isArray(value[0]) ||
+                    (value[0].length !== 3 && value[0].length !== 5) ||
+                    (value[1].length !== 3 && value[1].length !== 5)) &&
+                    value !== undefined) {
+                    throw new Error('`value` should be of type `[[number, number, number], [number, number, number]]` or ``[[number, number, number, number, number], [number, number, number, number, number]]`` or `undefined`.');
+                }
+                fillDateRangePicker(fieldsetElement, value);
+                return;
+            }
             const isMultiCheckbox = Boolean(fieldsetElement.querySelector('input[type="checkbox"]'));
             const isMultiRadio = Boolean(fieldsetElement.querySelector('input[type="radio"]'));
             if (isMultiCheckbox) {