@mtes-mct/monitor-ui 23.0.0 → 23.1.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [23.0.0](https://github.com/MTES-MCT/monitor-ui/compare/v22.1.0...v23.0.0) (2024-09-12)
+
+
+### ⚠ BREAKING CHANGES
+
+* **elements:** - `disabled` is renamed `$isDisabled` in `Legend` props.
+- `hasError` is renamed `$hasError` in `Legend` props.
+- `isHidden` is renamed `$isHidden` in `Legend` props.
+
+### Bug Fixes
+
+* **elements:** prefix styled component props in Legend ([ef4284a](https://github.com/MTES-MCT/monitor-ui/commit/ef4284a50dee68cdb6c65308d2ae42da2798efdf))
+* **fields:** prefix styled components props in DateRangePicker ([3572267](https://github.com/MTES-MCT/monitor-ui/commit/3572267c6e285d87f7c9efd006bf7c0daf592a5e))
+
+
+### Buid System & Dependencies
+
+* **deps:** bump express from 4.19.2 to 4.21.0 ([46d1134](https://github.com/MTES-MCT/monitor-ui/commit/46d113401e48191f59f9c8e309761ba2e44ccbb0))
+
 ## [22.1.0](https://github.com/MTES-MCT/monitor-ui/compare/v22.0.1...v22.1.0) (2024-09-12)
 
 

package/fields/NumberInput.d.ts

@@ -14,7 +14,8 @@ export type NumberInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | '
     name: string;
     onChange?: (nextValue: number | undefined) => Promisable<void>;
     readOnly?: boolean | undefined;
+    unit?: string | undefined;
     value?: number | undefined;
 };
-export declare function NumberInput({ areArrowsHidden, className, disabled, error, isErrorMessageHidden, isLabelHidden, isLight, isRequired, isTransparent, isUndefinedWhenDisabled, label, name, onBlur, onChange, onFocus, readOnly, style, value, ...originalProps }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumberInput({ areArrowsHidden, className, disabled, error, isErrorMessageHidden, isLabelHidden, isLight, isRequired, isTransparent, isUndefinedWhenDisabled, label, name, onBlur, onChange, onFocus, readOnly, style, unit, value, ...originalProps }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NumberInput.d.ts.map

package/fields/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/fields/NumberInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAiB/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,cAAc,GAAG,IAAI,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG;IAC9G,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1C,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,uBAAuB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,KAAK,UAAU,CAAC,IAAI,CAAC,CAAA;IAC9D,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC3B,CAAA;AACD,wBAAgB,WAAW,CAAC,EAC1B,eAAuB,EACvB,SAAS,EACT,QAAgB,EAChB,KAAK,EACL,oBAA4B,EAC5B,aAAqB,EACrB,OAAe,EACf,UAAkB,EAClB,aAAqB,EACrB,uBAA+B,EAC/B,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,KAAK,EACL,KAAK,EACL,GAAG,aAAa,EACjB,EAAE,gBAAgB,2CA+ElB"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/fields/NumberInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAiB/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,cAAc,GAAG,IAAI,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG;IAC9G,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1C,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,uBAAuB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,KAAK,UAAU,CAAC,IAAI,CAAC,CAAA;IAC9D,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC3B,CAAA;AACD,wBAAgB,WAAW,CAAC,EAC1B,eAAuB,EACvB,SAAS,EACT,QAAgB,EAChB,KAAK,EACL,oBAA4B,EAC5B,aAAqB,EACrB,OAAe,EACf,UAAkB,EAClB,aAAqB,EACrB,uBAA+B,EAC/B,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,GAAG,aAAa,EACjB,EAAE,gBAAgB,2CA6FlB"}

package/index.js

@@ -68598,7 +68598,7 @@ const Link = styled.a`
   }
 `;
 
-function NumberInput({ areArrowsHidden = false, className, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isRequired = false, isTransparent = false, isUndefinedWhenDisabled = false, label, name, onBlur, onChange, onFocus, readOnly = false, style, value, ...originalProps }) {
+function NumberInput({ areArrowsHidden = false, className, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isRequired = false, isTransparent = false, isUndefinedWhenDisabled = false, label, name, onBlur, onChange, onFocus, readOnly = false, style, unit, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const inputRef = useRef(null);
     const controlledClassname = useMemo(()=>classnames('Field-NumberInput', className), [
@@ -68645,6 +68645,24 @@ function NumberInput({ areArrowsHidden = false, className, disabled = false, err
         preventWheelEvent
     ]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && !!disabled, onChange);
+    const commonInputProps = {
+        $areArrowsHidden: areArrowsHidden,
+        $hasError: hasError,
+        $isDisabled: disabled,
+        $isLight: isLight,
+        $isReadOnly: readOnly,
+        $isTransparent: isTransparent,
+        disabled,
+        id: name,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        onFocus: handleFocus,
+        readOnly,
+        ref: inputRef,
+        type: 'number',
+        value: value ?? '',
+        ...originalProps
+    };
     return /*#__PURE__*/ jsxs(Field$2, {
         className: controlledClassname,
         style: style,
@@ -68656,23 +68674,21 @@ function NumberInput({ areArrowsHidden = false, className, disabled = false, err
                 htmlFor: name,
                 children: label
             }),
-            /*#__PURE__*/ jsx(StyledInput, {
-                ref: inputRef,
-                $areArrowsHidden: areArrowsHidden,
+            !unit && /*#__PURE__*/ jsx(InputWithoutUnit, {
+                ...commonInputProps
+            }, key),
+            !!unit && /*#__PURE__*/ jsxs(InputBoxWithUnit, {
                 $hasError: hasError,
                 $isDisabled: disabled,
                 $isLight: isLight,
                 $isReadOnly: readOnly,
                 $isTransparent: isTransparent,
-                disabled: disabled,
-                id: name,
-                onBlur: handleBlur,
-                onChange: handleChange,
-                onFocus: handleFocus,
-                readOnly: readOnly,
-                type: "number",
-                value: value ?? '',
-                ...originalProps
+                children: [
+                    /*#__PURE__*/ jsx(InputWithUnit, {
+                        ...commonInputProps
+                    }),
+                    unit
+                ]
             }, key),
             !isErrorMessageHidden && hasError && /*#__PURE__*/ jsx(FieldError, {
                 children: controlledError
@@ -68680,9 +68696,7 @@ function NumberInput({ areArrowsHidden = false, className, disabled = false, err
         ]
     });
 }
-const StyledInput = styled(Input)`
-  background-color: ${getFieldBackgroundColorFactory()};
-  border: solid 1px ${getFieldBorderColorFactoryForState('default')};
+const BaseInput = styled(Input)`
   border-radius: 0;
   color: ${(p)=>p.theme.color.gunMetal};
   ${(p)=>p.$isReadOnly && `cursor: default;`}
@@ -68707,9 +68721,6 @@ const StyledInput = styled(Input)`
   }
 
   &:hover {
-    background-color: ${getFieldBackgroundColorFactory()};
-    border: solid 1px ${getFieldBorderColorFactoryForState('hover')} !important;
-
     &::placeholder {
       color: ${getFieldPlaceholderColorFactoryForState('hover')};
     }
@@ -68717,8 +68728,6 @@ const StyledInput = styled(Input)`
 
   &:active,
   &:focus {
-    background-color: ${getFieldBackgroundColorFactory()};
-    border: solid 1px ${getFieldBorderColorFactoryForState('focus')} !important;
     outline: 0;
 
     &::placeholder {
@@ -68726,6 +68735,49 @@ const StyledInput = styled(Input)`
     }
   }
 `;
+const InputWithoutUnit = styled(BaseInput)`
+  background-color: ${getFieldBackgroundColorFactory()};
+  border: solid 1px ${getFieldBorderColorFactoryForState('default')};
+
+  &:hover {
+    background-color: ${getFieldBackgroundColorFactory()};
+    border: solid 1px ${getFieldBorderColorFactoryForState('hover')} !important;
+  }
+
+  &:active,
+  &:focus {
+    background-color: ${getFieldBackgroundColorFactory()};
+    border: solid 1px ${getFieldBorderColorFactoryForState('focus')} !important;
+  }
+`;
+const InputBoxWithUnit = styled.div`
+  align-items: center;
+  background-color: ${getFieldBackgroundColorFactory()};
+  border: solid 1px ${getFieldBorderColorFactoryForState('default')};
+  color: ${(p)=>p.theme.color.slateGray};
+  display: flex;
+  font-size: 13px;
+  line-height: 19px;
+  padding-right: 8px;
+  user-select: none;
+  width: 100%;
+
+  &:hover {
+    background-color: ${getFieldBackgroundColorFactory()};
+    border: solid 1px ${getFieldBorderColorFactoryForState('hover')} !important;
+  }
+
+  &:active,
+  &:focus {
+    background-color: ${getFieldBackgroundColorFactory()};
+    border: solid 1px ${getFieldBorderColorFactoryForState('focus')} !important;
+  }
+`;
+const InputWithUnit = styled(BaseInput)`
+  background-color: transparent;
+  border: none;
+  flex-grow: 1;
+`;
 
 const PADDING = {
     [Size.LARGE]: '8px 16px 10px',

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": "23.0.0",
+  "version": "23.1.0",
   "license": "AGPL-3.0",
   "type": "module",
   "engines": {