@connectif/ui-components 5.4.2 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [5.5.0] - 2026-03-02
+
+### Fixed
+
+- Fixed issue with `TimeField` component where input events were not working properly.
+- Updated input components styles when `disabled` is true.
+
 ## [5.4.2] - 2026-02-26
 
 ### Fixed

package/dist/index.js

@@ -19093,13 +19093,13 @@ var TextFieldContainer = React49.forwardRef(function TextFieldContainer2({
         display: "flex",
         alignItems: multiline ? "start" : "center",
         gap: "8px",
-        backgroundColor: variant === "default" ? palette2.common.white : "transparent",
+        backgroundColor: variant === "default" ? disabled ? palette2.grey[50] : palette2.common.white : "transparent",
         width: "100%",
         minHeight: "36px",
         overflow: "hidden",
         border: variant === "default" ? `1px solid ${palette2.grey[200]}` : "none",
         borderRadius: variant === "default" ? "4px" : 0,
-        color: isFocused ? effectiveActiveColor : palette2.grey[400],
+        color: disabled ? palette2.grey[500] : isFocused ? effectiveActiveColor : palette2.grey[400],
         padding: variant === "default" ? "1px 1px 1px 7px" : "2px 2px 2px 8px",
         boxSizing: "border-box",
         justifyContent: "end",
@@ -19111,9 +19111,6 @@ var TextFieldContainer = React49.forwardRef(function TextFieldContainer2({
           borderColor: palette2.error.main,
           color: palette2.error.main
         },
-        ...disabled && {
-          opacity: 0.5
-        },
         ...highlighted && {
           backgroundColor: lighten(effectiveActiveColor, 0.6)
         },
@@ -19243,22 +19240,22 @@ import { Fragment as Fragment22, jsx as jsx101, jsxs as jsxs45 } from "react/jsx
 var commonInputStylesOptions = {
   shouldForwardProp: (prop) => prop !== "variant" && prop !== "typographyVariant"
 };
-function getCommonInputStyles({ palette: palette2 }, { disabled, typographyVariant }) {
+function getCommonInputStyles({ palette: palette2 }, { disabled, typographyVariant, readOnly }) {
   return {
     ...variants[typographyVariant ?? "body2"],
-    backgroundColor: "transparent",
+    backgroundColor: disabled || readOnly ? palette2.grey[50] : "transparent",
     display: "block",
     width: "0",
     minWidth: "64px",
     flexGrow: 1,
     border: "none",
-    color: disabled ? palette2.grey[600] : palette2.grey[800],
+    color: disabled ? palette2.grey[500] : palette2.grey[900],
     boxSizing: "border-box",
     outline: "none",
     padding: "6px 0",
     textOverflow: "ellipsis",
     "&::placeholder": {
-      color: palette2.grey[600]
+      color: palette2.grey[500]
     }
   };
 }
@@ -19362,7 +19359,7 @@ var TextField = React52.forwardRef(function TextField2({
       isError,
       multiline,
       sx: {
-        backgroundColor: readOnly ? palette2.grey[50] : "transparent",
+        backgroundColor: disabled || readOnly ? palette2.grey[50] : "transparent",
         ...sx
       },
       onClick: onContainerClick,
@@ -20214,7 +20211,7 @@ var ExtendedTextField = ({
   InputProps,
   error,
   ...rest
-}) => /* @__PURE__ */ jsx110(TextField_default, { ...inputProps, ...rest });
+}) => /* @__PURE__ */ jsx110(TextField_default, { ...rest, ...inputProps, readOnly: InputProps.readOnly });
 var TimeField = function TimeField2({
   onChange,
   value,
@@ -21265,6 +21262,16 @@ var BootstrapInput = styled7(InputBase, {
   backgroundColor: "white",
   cursor: "default",
   maxWidth: "100%",
+  "&.Mui-disabled": {
+    backgroundColor: palette2.grey[50],
+    ".MuiSelect-select": {
+      color: palette2.grey[500],
+      "-webkit-text-fill-color": palette2.grey[500],
+      span: {
+        color: "inherit !important"
+      }
+    }
+  },
   "& .MuiInputBase-input.MuiSelect-select": {
     ...variants["button-medium"],
     padding: "0 36px 0 12px !important",
@@ -21296,7 +21303,7 @@ var ChevronIcon = ({ disabled = false }) => {
       sx: {
         marginLeft: "-24px !important",
         transform: "translateX(-8px) !important",
-        color: disabled ? `${palette2.grey[400]} !important` : palette2.grey[800]
+        color: disabled ? `${palette2.grey[500]} !important` : palette2.grey[800]
       }
     }
   );