@mtes-mct/monitor-ui 12.0.2 → 12.1.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [12.0.3](https://github.com/MTES-MCT/monitor-ui/compare/v12.0.2...v12.0.3) (2024-02-27)
+
+
+### Styles
+
+* **fields:** fix MultiCheckbox options margin when isInline ([d98f1a5](https://github.com/MTES-MCT/monitor-ui/commit/d98f1a549ac2b7ffb0b82c67435c39f0a6fd9ea8))
+
+## [12.0.2](https://github.com/MTES-MCT/monitor-ui/compare/v12.0.1...v12.0.2) (2024-02-27)
+
+
+### Styles
+
+* **fields:** fix MultiRadio options margin when isInline ([9c7e15b](https://github.com/MTES-MCT/monitor-ui/commit/9c7e15bdc8dac946d16e06cc7336e4cc2802cbb7))
+* **fields:** fix pickers border color when isTransparent ([b10ac28](https://github.com/MTES-MCT/monitor-ui/commit/b10ac286201610cba620291cb525167a01c0d659))
+
 ## [12.0.1](https://github.com/MTES-MCT/monitor-ui/compare/v12.0.0...v12.0.1) (2024-02-27)
 
 

package/cypress/index.js

@@ -126,6 +126,13 @@ function findElementParentBySelector(element, parentSelector, index = 0) {
 }
 
 function checkCheckbox(fieldElement, value, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'checkCheckbox'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -144,6 +151,13 @@ function checkCheckbox(fieldElement, value, _label) {
 }
 
 function checkMultiCheckboxOptions(fieldsetElement, values, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldsetElement,
+                Elements: 1
+            }),
+        name: 'checkMultiCheckboxOptions'
+    });
     cy.wrap(fieldsetElement).scrollIntoView({
         offset: {
             left: 0,
@@ -166,13 +180,19 @@ function checkMultiCheckboxOptions(fieldsetElement, values, _label) {
 }
 
 function checkMultiRadioOption(fieldsetElement, value, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldsetElement,
+                Elements: 1
+            }),
+        name: 'checkMultiRadioOption'
+    });
     cy.wrap(fieldsetElement).scrollIntoView({
         offset: {
             left: 0,
             top: -100
         }
     }).find('label').contains(value).forceClick().wait(250);
-    return fieldsetElement;
 }
 
 function throwError(message) {
@@ -180,6 +200,13 @@ function throwError(message) {
 }
 
 function fillDatePicker(fieldsetElement, dateOrDateWithTimeTuple, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldsetElement,
+                Elements: 1
+            }),
+        name: 'fillDatePicker'
+    });
     const inputElements = fieldsetElement.querySelectorAll('input');
     if (inputElements.length !== 4 && inputElements.length !== 6) {
         throwError(`Expected to find 4 or 6 inputs within in DatePicker but found ${inputElements.length}.`);
@@ -220,11 +247,21 @@ function fillDatePicker(fieldsetElement, dateOrDateWithTimeTuple, _label) {
     cy.wait(250);
     // Close the calendar & ranged time picker popup by pressing the escape key
     cy.get('body').type('{esc}');
-    cy.wrap(fieldsetElement).find('.Field-DatePicker__CalendarPicker').should('not.be.visible');
-    cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangedTimePicker').should('not.exist');
+    // TODO Create a util to handle the `fieldsetElement` re-creation cases.
+    // We to use a `wait` as a temporary fix to handle `fieldsetElement` re-creation cases.
+    cy.wait(250);
+// cy.wrap(fieldsetElement).find('.Field-DatePicker__CalendarPicker').should('not.be.visible')
+// cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangedTimePicker').should('not.exist')
 }
 
 function fillDateRangePicker(fieldsetElement, dateOrDateWithTimeTupleRange, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldsetElement,
+                Elements: 1
+            }),
+        name: 'fillDateRangePicker'
+    });
     const inputElements = fieldsetElement.querySelectorAll('input');
     if (inputElements.length !== 7 && inputElements.length !== 11) {
         throwError(`Expected to find 7 or 11 inputs within in DatePicker but found ${inputElements.length}.`);
@@ -288,11 +325,21 @@ function fillDateRangePicker(fieldsetElement, dateOrDateWithTimeTupleRange, _lab
     cy.wait(250);
     // Close the range calendar & ranged time picker popup by pressing the escape key
     cy.get('body').type('{esc}');
-    cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangeCalendarPicker').should('not.be.visible');
-    cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangedTimePicker').should('not.exist');
+    // TODO Create a util to handle the `fieldsetElement` re-creation cases.
+    // We to use a `wait` as a temporary fix to handle `fieldsetElement` re-creation cases.
+    cy.wait(250);
+// cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangeCalendarPicker').should('not.be.visible')
+// cy.wrap(fieldsetElement).find('.Field-DateRangePicker__RangedTimePicker').should('not.exist')
 }
 
 function fillNumberInput(fieldElement, value, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'fillNumberInput'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -312,6 +359,13 @@ function fillNumberInput(fieldElement, value, _label) {
 }
 
 function fillTextarea(fieldElement, value, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'fillTextarea'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -331,6 +385,13 @@ function fillTextarea(fieldElement, value, _label) {
 }
 
 function fillTextInput(fieldElement, value, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'fillTextInput'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -350,6 +411,13 @@ function fillTextInput(fieldElement, value, _label) {
 }
 
 function pickCheckPickerOptions(fieldElement, values, label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'pickCheckPickerOptions'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -383,11 +451,21 @@ function pickCheckPickerOptions(fieldElement, values, label) {
         });
         // Close the picker popup by pressing the escape key
         cy.get('body').type('{esc}');
-        cy.wrap(fieldElement).find('.rs-picker-popup').should('not.exist');
+        // TODO Create a util to handle the `fieldElement` re-creation cases.
+        // We to use a `wait` as a temporary fix to handle `fieldElement` re-creation cases.
+        cy.wait(250);
+    // cy.wrap(fieldElement).find('.rs-picker-popup').should('not.exist')
     });
 }
 
 function pickMultiSelectOptions(fieldElement, values, label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'pickMultiSelectOptions'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -421,11 +499,21 @@ function pickMultiSelectOptions(fieldElement, values, label) {
         });
         // Close the picker popup by pressing the escape key
         cy.get('body').type('{esc}');
-        cy.wrap(fieldElement).find('.rs-picker-popup').should('not.exist');
+        // TODO Create a util to handle the `fieldElement` re-creation cases.
+        // We to use a `wait` as a temporary fix to handle `fieldElement` re-creation cases.
+        cy.wait(250);
+    // cy.wrap(fieldElement).find('.rs-picker-popup').should('not.exist')
     });
 }
 
 function pickSearchOption(fieldElement, value, _label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'pickSearchOption'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -453,6 +541,13 @@ function pickSearchOption(fieldElement, value, _label) {
 }
 
 function pickSelectOption(fieldElement, value, label) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Applied to': fieldElement,
+                Elements: 1
+            }),
+        name: 'pickSelectOption'
+    });
     cy.wrap(fieldElement).scrollIntoView({
         offset: {
             left: 0,
@@ -541,6 +636,13 @@ function assertStringArrayOrUndefined(value, component) {
 
 const RETRIES = 5;
 function fill(label, value, leftRetries = RETRIES) {
+    Cypress.log({
+        consoleProps: ()=>({
+                'Left Retries': leftRetries
+            }),
+        message: `Filling field with label/legend "${label}" with value "${JSON.stringify(value)}".`,
+        name: 'fill'
+    });
     try {
         // =========================================================================
         // If it's a field labelled by a `<label />` element

package/cypress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/index.js

@@ -68571,13 +68571,9 @@ const ChecboxesBox = styled.div`
   display: flex;
   flex-direction: ${(p)=>p.$isInline ? 'row' : 'column'};
 
-  ${(p)=>!p.$isInline && css`
-      > div:not(:first-child) {
-        > .rs-checkbox {
-          margin: 8px 0 0 0;
-        }
-      }
-    `}
+  > .Field-Checkbox:not(:first-child) {
+    margin: ${(p)=>p.$isInline ? '0 0 0 16px' : '8px 0 0 0'};
+  }
 `;
 
 /**