@mtes-mct/monitor-ui 18.4.1 → 18.5.0

package/components/Dropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAA;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAAK,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,QAAQ,CAAA;AAElE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,MAAM,CAAC,GAAG;IACrE,IAAI,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC5B,CAAA;AA2HD,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAAC,GAAG;IACxD,IAAI,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CAG1C,CAAA;AAEF,OAAO,EAAE,KAAK,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAA;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAAK,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,QAAQ,CAAA;AAElE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,MAAM,CAAC,GAAG;IACrE,IAAI,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC5B,CAAA;AAkND,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAAC,GAAG;IACxD,IAAI,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CAG1C,CAAA;AAEF,OAAO,EAAE,KAAK,iBAAiB,EAAE,CAAA"}

package/elements/Label.d.ts

@@ -1,14 +1,14 @@
 import type { LabelHTMLAttributes } from 'react';
 export type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
+    $isHidden?: boolean | undefined;
     $isRequired?: boolean | undefined;
     disabled?: boolean | undefined;
     hasError?: boolean | undefined;
-    isHidden?: boolean | undefined;
 };
 export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, LabelHTMLAttributes<HTMLLabelElement> & {
+    $isHidden?: boolean | undefined;
     $isRequired?: boolean | undefined;
     disabled?: boolean | undefined;
     hasError?: boolean | undefined;
-    isHidden?: boolean | undefined;
-}, "disabled" | keyof LabelHTMLAttributes<HTMLLabelElement> | "isHidden" | "$isRequired" | "hasError">;
+}, "disabled" | keyof LabelHTMLAttributes<HTMLLabelElement> | "$isHidden" | "$isRequired" | "hasError">;
 //# sourceMappingURL=Label.d.ts.map

package/elements/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/elements/Label.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAEhD,MAAM,MAAM,UAAU,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAC/D,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B,CAAA;AACD,eAAO,MAAM,KAAK;kBALF,OAAO,GAAG,SAAS;eACtB,OAAO,GAAG,SAAS;eACnB,OAAO,GAAG,SAAS;eACnB,OAAO,GAAG,SAAS;sGAmB/B,CAAA"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/elements/Label.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAEhD,MAAM,MAAM,UAAU,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAC/D,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B,CAAA;AACD,eAAO,MAAM,KAAK;gBALJ,OAAO,GAAG,SAAS;kBACjB,OAAO,GAAG,SAAS;eACtB,OAAO,GAAG,SAAS;eACnB,OAAO,GAAG,SAAS;uGA4B/B,CAAA"}

package/fields/PhoneInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../src/fields/PhoneInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAIvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,KAAK,UAAU,CAAC,IAAI,CAAC,CAAA;IAC7D,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;CAC1B,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAA;AAWvD;;GAEG;AACH,eAAO,MAAM,UAAU,2HA4DtB,CAAA"}
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../src/fields/PhoneInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAIvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,KAAK,UAAU,CAAC,IAAI,CAAC,CAAA;IAC7D,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;CAC1B,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAA;AAgBvD;;GAEG;AACH,eAAO,MAAM,UAAU,2HAgEtB,CAAA"}

package/index.js

@@ -21780,7 +21780,7 @@ const PrimaryDropdownItem = styled(Dropdown$1.Item)`
   }
 `;
 
-function RawDropdown({ accent, className, Icon, ...originalProps }) {
+function RawDropdown({ accent, className, Icon, title, ...originalProps }) {
     const controlledClassName = classnames('Component-Dropdow', className);
     const icon = useMemo(()=>Icon ? /*#__PURE__*/ jsx(Icon, {
             size: 20
@@ -21791,18 +21791,31 @@ function RawDropdown({ accent, className, Icon, ...originalProps }) {
         Icon
     ]);
     switch(accent){
+        case Accent.TERTIARY:
+            return /*#__PURE__*/ jsx(TertiaryDropdown, {
+                $hasIcon: hasIcon,
+                $hasTitle: !!title,
+                className: controlledClassName,
+                icon: icon,
+                title: title,
+                ...originalProps
+            });
         case Accent.SECONDARY:
             return /*#__PURE__*/ jsx(SecondaryDropdown, {
                 $hasIcon: hasIcon,
+                $hasTitle: !!title,
                 className: controlledClassName,
                 icon: icon,
+                title: title,
                 ...originalProps
             });
         default:
             return /*#__PURE__*/ jsx(PrimaryDropdown, {
                 $hasIcon: hasIcon,
+                $hasTitle: !!title,
                 className: controlledClassName,
                 icon: icon,
+                title: title,
                 ...originalProps
             });
     }
@@ -21817,7 +21830,7 @@ const PrimaryDropdown = styled(Dropdown$1)`
     color: ${(p)=>p.theme.color.gainsboro};
     display: flex;
     font-size: 13px;
-    padding: 3px 12px ${(p)=>p.$hasIcon ? '4px' : '5px'};
+    padding: 3px ${(p)=>p.$hasTitle ? 12 : 6}px ${(p)=>p.$hasIcon ? '4px' : '5px'};
 
     :hover {
       background-color: ${(p)=>p.theme.color.blueYonder};
@@ -21838,7 +21851,7 @@ const PrimaryDropdown = styled(Dropdown$1)`
     }
 
     > .Element-IconBox {
-      margin: 1px 8px 0 0;
+      margin: 1px ${(p)=>p.$hasTitle ? 8 : 0}px 0 0;
     }
 
     > svg {
@@ -21860,7 +21873,7 @@ const SecondaryDropdown = styled(Dropdown$1)`
   .rs-btn {
     align-items: center;
     display: flex;
-    padding: 3px 12px ${(p)=>p.$hasIcon ? '4px' : '5px'};
+    padding: 3px ${(p)=>p.$hasTitle ? 12 : 6}px ${(p)=>p.$hasIcon ? '4px' : '5px'};
 
     border-radius: 0;
     background-color: transparent;
@@ -21889,7 +21902,58 @@ const SecondaryDropdown = styled(Dropdown$1)`
     }
 
     > .Element-IconBox {
-      margin: 1px 8px 0 0;
+      margin: 1px ${(p)=>p.$hasTitle ? 8 : 0}px 0 0;
+    }
+
+    > svg {
+      display: none;
+    }
+  }
+
+  > .rs-dropdown-menu {
+    border-radius: 0;
+    padding: 0;
+  }
+
+  svg.rs-dropdown-item-menu-icon {
+    vertical-align: middle;
+    margin-right: 10px;
+  }
+`;
+const TertiaryDropdown = styled(Dropdown$1)`
+  .rs-btn {
+    align-items: center;
+    display: flex;
+    padding: 3px ${(p)=>p.$hasTitle ? 13 : 7}px ${(p)=>p.$hasIcon ? '4px' : '5px'};
+
+    border-radius: 0;
+    background-color: transparent;
+    border: unset;
+    color: ${(p)=>p.theme.color.charcoal};
+
+    &:hover,
+    &._hover {
+      background-color: ${(p)=>p.theme.color.blueYonder25};
+      border: unset;
+      color: ${(p)=>p.theme.color.blueYonder};
+    }
+
+    &:active,
+    &._active {
+      background-color: ${(p)=>p.theme.color.blueGray25};
+      border: unset;
+      color: ${(p)=>p.theme.color.blueGray};
+    }
+
+    &:disabled,
+    &._disabled {
+      background-color: transparent;
+      border: unset;
+      color: ${(p)=>p.theme.color.lightGray};
+    }
+
+    > .Element-IconBox {
+      margin: 1px ${(p)=>p.$hasTitle ? 8 : 0}px 0 0;
     }
 
     > svg {
@@ -54170,7 +54234,6 @@ const Label = styled.label.attrs((props)=>({
     }))`
   color: ${(p)=>// eslint-disable-next-line no-nested-ternary
     p.disabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p.theme.color.slateGray};
-  display: ${(p)=>p.isHidden ? 'none' : 'block'};
   font-size: 13px;
   line-height: 1.3846;
   margin-bottom: 4px;
@@ -54179,6 +54242,14 @@ const Label = styled.label.attrs((props)=>({
         content:" *";
         color: ${p.theme.color.maximumRed};
       }`}
+  ${(p)=>p.$isHidden && `
+    position:absolute;
+    left:-10000px;
+    top:auto;
+    width:1px;
+    height:1px;
+    overflow:hidden;
+    `}
 `;
 
 const Link$1 = styled.a`
@@ -55113,10 +55184,10 @@ function CheckPicker({ className, customSearch, customSearchMinQueryLength = 1,
         style: style,
         children: [
             /*#__PURE__*/ jsx(Label, {
+                $isHidden: isLabelHidden,
                 $isRequired: isRequired,
                 disabled: disabled,
                 htmlFor: originalProps.name,
-                isHidden: isLabelHidden,
                 children: label
             }),
             /*#__PURE__*/ jsx(StyledRsuitePickerBox, {
@@ -67676,10 +67747,10 @@ function MultiCascader({ className, disabled = false, error, isErrorMessageHidde
         style: style,
         children: [
             /*#__PURE__*/ jsx(Label, {
+                $isHidden: isLabelHidden,
                 $isRequired: isRequired,
                 disabled: disabled,
                 htmlFor: originalProps.name,
-                isHidden: isLabelHidden,
                 children: label
             }),
             /*#__PURE__*/ jsx(Box$1, {
@@ -67809,10 +67880,10 @@ function MultiSelect({ className, customSearch, customSearchMinQueryLength = 1,
         style: style,
         children: [
             /*#__PURE__*/ jsx(Label, {
+                $isHidden: isLabelHidden,
                 $isRequired: isRequired,
                 disabled: disabled,
                 htmlFor: originalProps.name,
-                isHidden: isLabelHidden,
                 children: label
             }),
             /*#__PURE__*/ jsx(Box, {
@@ -68347,10 +68418,10 @@ function NumberInput({ className, disabled = false, error, isErrorMessageHidden
         style: style,
         children: [
             /*#__PURE__*/ jsx(Label, {
+                $isHidden: isLabelHidden,
                 $isRequired: isRequired,
                 disabled: disabled,
                 htmlFor: name,
-                isHidden: isLabelHidden,
                 children: label
             }),
             /*#__PURE__*/ jsx(StyledInput, {
@@ -68493,6 +68564,12 @@ const internationalFormat = {
     },
     mask: '`@@ #[00] 000 000 000 000'
 };
+const internationalFrenchFormat = {
+    definitions: {
+        '@': /0/
+    },
+    mask: '`@@ 00 00 00 00 00'
+};
 const frenchFormat = {
     definitions: {
         '#': /[1-9]/,
@@ -68515,10 +68592,10 @@ const defaultFormat = {
         className: "Field-PhoneInput",
         children: [
             /*#__PURE__*/ jsx(Label, {
+                $isHidden: isLabelHidden,
                 $isRequired: isRequired,
                 disabled: disabled,
                 htmlFor: name,
-                isHidden: isLabelHidden,
                 children: label
             }),
             /*#__PURE__*/ jsx(StyledIMaskInput, {
@@ -68529,18 +68606,22 @@ const defaultFormat = {
                 $isTransparent: isTransparent,
                 disabled: disabled,
                 dispatch: (appended, dynamicMasked)=>{
-                    const phoneNumber = dynamicMasked.unmaskedValue + appended;
+                    const phoneNumber = (dynamicMasked.unmaskedValue + appended).replace(/\s+/g, '');
                     if (phoneNumber.startsWith('00')) {
+                        if (value && value.length === 12 && phoneNumber === value) {
+                            return dynamicMasked.compiledMasks[1];
+                        }
                         return dynamicMasked.compiledMasks[0];
                     }
                     if (phoneNumber.startsWith('0') && value && value.length <= 10 && phoneNumber === value) {
-                        return dynamicMasked.compiledMasks[1];
+                        return dynamicMasked.compiledMasks[2];
                     }
-                    return dynamicMasked.compiledMasks[2];
+                    return dynamicMasked.compiledMasks[3];
                 },
                 id: name,
                 mask: [
                     internationalFormat,
+                    internationalFrenchFormat,
                     frenchFormat,
                     defaultFormat
                 ],
@@ -68779,10 +68860,10 @@ function Search({ className, customSearch = undefined, customSearchMinQueryLengt
         style: style,
         children: [
             /*#__PURE__*/ jsx(Label, {
+                $isHidden: isLabelHidden,
                 $isRequired: isRequired,
                 disabled: disabled,
                 htmlFor: originalProps.name,
-                isHidden: isLabelHidden,
                 children: label
             }),
             /*#__PURE__*/ jsxs(StyledInputBox, {
@@ -68943,10 +69024,10 @@ function Select({ className, customSearch, customSearchMinQueryLength = 1, disab
         style: style,
         children: [
             /*#__PURE__*/ jsx(Label, {
+                $isHidden: isLabelHidden,
                 $isRequired: isRequired,
                 disabled: disabled,
                 htmlFor: originalProps.name,
-                isHidden: isLabelHidden,
                 children: label
             }),
             /*#__PURE__*/ jsx(StyledRsuitePickerBox, {
@@ -69018,10 +69099,10 @@ function Textarea({ className, disabled = false, error, isErrorMessageHidden = f
         style: style,
         children: [
             /*#__PURE__*/ jsx(Label, {
+                $isHidden: isLabelHidden,
                 $isRequired: isRequired,
                 disabled: disabled,
                 htmlFor: originalProps.name,
-                isHidden: isLabelHidden,
                 children: label
             }),
             /*#__PURE__*/ jsx(StyledRsuiteInput, {
@@ -69121,10 +69202,10 @@ function TextInput({ className, disabled = false, error, Icon, isErrorMessageHid
         style: style,
         children: [
             /*#__PURE__*/ jsx(Label, {
+                $isHidden: isLabelHidden,
                 $isRequired: isRequired,
                 disabled: disabled,
                 htmlFor: name,
-                isHidden: isLabelHidden,
                 children: label
             }),
             /*#__PURE__*/ jsxs(StyledInputBox, {
@@ -69277,10 +69358,10 @@ function Toggle({ checked = false, className, dataCy, disabled = false, error, i
         style: style,
         children: [
             /*#__PURE__*/ jsx(Label, {
+                $isHidden: isLabelHidden,
                 $isRequired: isRequired,
                 disabled: disabled,
                 htmlFor: originalProps.name,
-                isHidden: isLabelHidden,
                 children: label
             }),
             /*#__PURE__*/ jsx(StyledToggle, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mtes-mct/monitor-ui",
   "description": "Common React components, hooks, utilities and CSS stylesheets for MonitorFish, MonitorEnv and RapportNav.",
-  "version": "18.4.1",
+  "version": "18.5.0",
   "license": "AGPL-3.0",
   "type": "module",
   "engines": {