@connectif/ui-components 5.0.1 → 5.1.0

package/dist/index.js

@@ -841,9 +841,7 @@ var require_react_is_development2 = __commonJS({
           }
         }
       }
-      var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-      Symbol.for("react.provider");
-      var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_VIEW_TRANSITION_TYPE = Symbol.for("react.view_transition"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
+      var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_VIEW_TRANSITION_TYPE = Symbol.for("react.view_transition"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
       exports.ContextConsumer = REACT_CONSUMER_TYPE;
       exports.ContextProvider = REACT_CONTEXT_TYPE;
       exports.Element = REACT_ELEMENT_TYPE;
@@ -8081,7 +8079,9 @@ var ListItemText = ({
   slotProps,
   "data-testid": dataTestId
 }) => {
-  const textElementRef = React8.useRef(null);
+  const textElementRef = React8.useRef(
+    null
+  );
   return /* @__PURE__ */ jsx6(
     TextEllipsisTooltip_default,
     {
@@ -9595,7 +9595,9 @@ var TextEllipsis = ({
   sx,
   zIndex
 }) => {
-  const textElementRef = React17.useRef(null);
+  const textElementRef = React17.useRef(
+    null
+  );
   return /* @__PURE__ */ jsx32(
     TextEllipsisTooltip_default,
     {
@@ -9742,7 +9744,7 @@ var MenuIconButton = React19.forwardRef(function MenuIconButton2({
   const setButtonRef = (element) => {
     if (typeof ref === "function") {
       ref(element);
-    } else if (ref) {
+    } else if (ref && "current" in ref) {
       ref.current = element;
     }
     setAnchorEl(element);
@@ -10522,7 +10524,7 @@ var MenuButton = React24.forwardRef(function MenuButton2({
   const setButtonRef = (element) => {
     if (typeof ref === "function") {
       ref(element);
-    } else if (ref) {
+    } else if (ref && "current" in ref) {
       ref.current = element;
     }
     setAnchorEl(element);
@@ -11479,7 +11481,7 @@ var MenuChip = React29.forwardRef(function MenuChip2({
   const setChipRef = (element) => {
     if (typeof ref === "function") {
       ref(element);
-    } else if (ref) {
+    } else if (ref && "current" in ref) {
       ref.current = element;
     }
     setAnchorEl(element);
@@ -12055,11 +12057,19 @@ var EnhancedCard = React31.forwardRef(
         const getChildProps = () => typeof child.props === "object" ? child.props : {};
         switch (child.type) {
           case EnhancedCardTitle_default:
+            return React31.cloneElement(
+              child,
+              {
+                size: size === "S" ? "S" : "M",
+                dataTest,
+                cursor: cursor2,
+                ...getChildProps()
+              }
+            );
           case EnhancedCardSubtitle_default:
             return React31.cloneElement(
               child,
               {
-                size,
                 dataTest,
                 cursor: cursor2,
                 ...getChildProps()
@@ -12080,12 +12090,11 @@ var EnhancedCard = React31.forwardRef(
               child,
               {
                 titleProps: {
-                  size,
+                  size: size === "S" ? "S" : "M",
                   dataTest,
                   cursor: cursor2
                 },
                 subtitleProps: {
-                  size,
                   dataTest,
                   cursor: cursor2
                 },
@@ -18305,7 +18314,9 @@ var PhoneFormatter_default = PhoneFormatter;
 import * as React44 from "react";
 import { jsx as jsx92 } from "react/jsx-runtime";
 var HeaderTitle = ({ text }) => {
-  const textElementRef = React44.useRef(null);
+  const textElementRef = React44.useRef(
+    null
+  );
   return /* @__PURE__ */ jsx92(
     TextEllipsisTooltip_default,
     {
@@ -18331,7 +18342,9 @@ var HeaderTitle_default = HeaderTitle;
 import * as React45 from "react";
 import { jsx as jsx93 } from "react/jsx-runtime";
 var HeaderSubtitle = ({ text }) => {
-  const textElementRef = React45.useRef(null);
+  const textElementRef = React45.useRef(
+    null
+  );
   return typeof text === "string" ? /* @__PURE__ */ jsx93(
     TextEllipsisTooltip_default,
     {
@@ -18585,8 +18598,8 @@ var ImageEditor = ({
     TABS.FINETUNE,
     TABS.ANNOTATE
   ];
-  const updateStateRef = React46.useRef();
-  const getCurrentImgDataFnRef = React46.useRef();
+  const updateStateRef = React46.useRef(null);
+  const getCurrentImgDataFnRef = React46.useRef(null);
   const handleOnSave = React46.useCallback(
     (editedImageObject) => {
       const imageBase64 = editedImageObject.imageBase64;
@@ -18967,7 +18980,7 @@ var TextFieldContainer = React48.forwardRef(function TextFieldContainer2({
   onClick,
   className = "",
   sx,
-  "data-test": dataTest,
+  "data-testid": dataTestId,
   onMouseEnter,
   onMouseLeave
 }, ref) {
@@ -19017,8 +19030,8 @@ var TextFieldContainer = React48.forwardRef(function TextFieldContainer2({
         ...sx
       },
       ref,
-      ...dataTest && {
-        "data-test": dataTest
+      ...dataTestId && {
+        "data-testid": dataTestId
       },
       onMouseEnter,
       onMouseLeave,
@@ -19034,8 +19047,8 @@ import * as React52 from "react";
 // src/hooks/useDebouncedCallback.ts
 import { useEffect as useEffect10, useRef as useRef14 } from "react";
 function useDebouncedCallback(callback, wait) {
-  const argsRef = useRef14();
-  const timeout = useRef14();
+  const argsRef = useRef14(null);
+  const timeout = useRef14(null);
   function cleanup() {
     if (timeout.current) {
       clearTimeout(timeout.current);
@@ -19261,7 +19274,7 @@ var TextField = React51.forwardRef(function TextField2({
       ref: containerRef,
       className: `Cn-TextField ${className}`,
       ...dataTestId && {
-        "data-test": `${dataTestId}-container`
+        "data-testid": `${dataTestId}-container`
       },
       onMouseEnter,
       onMouseLeave,
@@ -21648,26 +21661,23 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
   const [internalPickerValue, setInternalPickerValue] = React62.useState(
     value || white
   );
-  const [textFieldValue, setTextFieldValue] = React62.useState(value ?? "");
+  const [textFieldValue, setTextFieldValue] = React62.useState(
+    value ? allowAlpha ? value : rgbToHex(value) : ""
+  );
+  const [isValidPickerChange, setValidPickerChange] = React62.useState(false);
+  const [colorChangeOccurred, setColorChangeOccurred] = React62.useState(false);
+  const [isPopoverInputFocused, setIsPopoverInputFocused] = React62.useState(false);
   const [anchorEl, setAnchorEl] = React62.useState();
+  const containerRef = React62.useRef(null);
   const handleTextFieldChange = (event) => {
     const newValue = event.target.value;
+    setValidPickerChange(false);
     setTextFieldValue(newValue);
     if (isValidColor(newValue) || allowEmpty && newValue === "") {
       setInternalPickerValue(newValue);
       onChange(newValue);
     }
   };
-  const rgbToHex = (rgb) => {
-    const rgbValues = rgb.match(/\d+/g);
-    if (!rgbValues || rgbValues.length !== 3 && rgbValues.length !== 4) {
-      return rgb;
-    }
-    return "#" + rgbValues.slice(0, 3).map((val) => {
-      const hex = parseInt(val, 10).toString(16);
-      return hex.length === 1 ? "0" + hex : hex;
-    }).join("");
-  };
   const normalizeBlack = (color2) => {
     const rgb = color2.match(/\d+/g);
     if (!rgb) {
@@ -21679,13 +21689,6 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
     }
     return color2;
   };
-  const commitColor = React62.useCallback(() => {
-    const finalValue = allowAlpha ? internalPickerValue : rgbToHex(internalPickerValue);
-    setInternalPickerValue(finalValue);
-    setTextFieldValue(finalValue);
-    setPreviousColors((prev) => [finalValue, ...prev.slice(0, 17)]);
-    onChange(finalValue);
-  }, [internalPickerValue, allowAlpha, onChange]);
   const iconColor = /* @__PURE__ */ jsx117(
     IconButton_default,
     {
@@ -21697,6 +21700,66 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
       sx: { color: value || grey600 }
     }
   );
+  React62.useEffect(() => {
+    const handleInternalColorChange = (color2) => {
+      setPreviousColors((prev) => [color2, ...prev.slice(0, 17)]);
+      setTextFieldValue(rgbToHex(color2));
+      onChange(color2);
+      setValidPickerChange(false);
+      setColorChangeOccurred(false);
+    };
+    if (colorChangeOccurred && (isValidPickerChange || isPopoverInputFocused) && internalPickerValue && internalPickerValue !== value) {
+      handleInternalColorChange(internalPickerValue);
+    }
+  }, [
+    value,
+    internalPickerValue,
+    onChange,
+    isValidPickerChange,
+    colorChangeOccurred,
+    isPopoverInputFocused
+  ]);
+  React62.useEffect(() => {
+    const handleExternalColorChange = (color2) => {
+      setPreviousColors((prev) => [color2, ...prev.slice(0, 17)]);
+      setTextFieldValue(rgbToHex(color2));
+      setInternalPickerValue(color2);
+    };
+    if (!colorChangeOccurred && internalPickerValue && value && internalPickerValue !== value) {
+      handleExternalColorChange(value || (allowEmpty ? "" : white));
+    }
+  }, [value, internalPickerValue, colorChangeOccurred, allowEmpty]);
+  React62.useEffect(() => {
+    if (anchorEl) {
+      const handleFocus = () => {
+        setIsPopoverInputFocused(true);
+      };
+      const handleBlur = () => {
+        setIsPopoverInputFocused(false);
+      };
+      let inputs;
+      const timeoutId = setTimeout(() => {
+        if (containerRef.current) {
+          inputs = containerRef.current.querySelectorAll(
+            "input#rbgcp-R-input, input#rbgcp-G-input, input#rbgcp-B-input, input#rbgcp-hex-input"
+          );
+          inputs.forEach((input) => {
+            input.addEventListener("focus", handleFocus);
+            input.addEventListener("blur", handleBlur);
+          });
+        }
+      }, 0);
+      return () => {
+        clearTimeout(timeoutId);
+        if (inputs) {
+          inputs.forEach((input) => {
+            input.removeEventListener("focus", handleFocus);
+            input.removeEventListener("blur", handleBlur);
+          });
+        }
+      };
+    }
+  }, [anchorEl]);
   return /* @__PURE__ */ jsxs53(Fragment23, { children: [
     /* @__PURE__ */ jsx117(
       TextField_default,
@@ -21729,11 +21792,13 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
         anchorEl,
         onClose: () => setAnchorEl(void 0),
         sx: { zIndex: popoverZIndex },
-        onMouseUp: commitColor,
+        onMouseUp: () => setValidPickerChange(true),
         children: /* @__PURE__ */ jsx117(
           Box_default2,
           {
+            ref: containerRef,
             className: "Cn-Color-Gradient-Box",
+            onMouseUp: () => setValidPickerChange(true),
             sx: {
               "&.Cn-Color-Gradient-Box": {
                 backgroundColor: "white !important",
@@ -21758,17 +21823,12 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
                 color: "black !important",
                 fontFamily: "Source Sans Pro, sans-serif"
               },
-              "#rbgcp-input": {
+              "#rbgcp-hex-input, #rbgcp-R-input, #rbgcp-G-input, #rbgcp-B-input": {
                 color: "black !important",
                 backgroundColor: "white !important",
-                border: "1px solid #bebebe",
-                fontFamily: "Source Sans Pro, sans-serif"
-              },
-              "#rbgcp-hex-input": {
-                color: "black !important",
-                backgroundColor: "white !important",
-                border: "1px solid #bebebe",
-                fontFamily: "Source Sans Pro, sans-serif"
+                border: "1px solid #bebebe !important",
+                fontFamily: "Source Sans Pro, sans-serif",
+                boxSizing: "border-box !important"
               }
             },
             children: /* @__PURE__ */ jsx117(
@@ -21783,14 +21843,15 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
                   const normalized = normalizeBlack(newColor);
                   const preview = allowAlpha ? normalized : rgbToHex(normalized);
                   setInternalPickerValue(preview);
-                  setTextFieldValue(preview);
+                  setColorChangeOccurred(true);
                 },
                 hideAdvancedSliders: true,
                 hideColorGuide: true,
                 hideOpacity: !allowAlpha,
                 hideInputType: true,
                 hideColorTypeBtns: true,
-                hideGradientControls: true
+                hideGradientControls: true,
+                disableDarkMode: true
               }
             )
           }
@@ -21800,6 +21861,16 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
   ] });
 });
 var ColorPicker_default = ColorPicker;
+var rgbToHex = (rgb) => {
+  const rgbValues = rgb.match(/\d+/g);
+  if (!rgbValues || rgbValues.length !== 3 && rgbValues.length !== 4) {
+    return rgb;
+  }
+  return "#" + rgbValues.slice(0, 3).map((val) => {
+    const hex = parseInt(val, 10).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  }).join("");
+};
 
 // src/components/input/UploadClickableArea.tsx
 import { Box as Box3 } from "@mui/material";
@@ -23009,8 +23080,7 @@ var AutocompleteInput = function AutocompleteInput2({
       ),
       autoComplete: "off",
       onMouseEnter: () => setIsHover(true),
-      onMouseLeave: () => setIsHover(false),
-      "data-testid": "autocomplete-input"
+      onMouseLeave: () => setIsHover(false)
     }
   ) });
 };
@@ -25535,9 +25605,10 @@ var renderChildrenWithMath = (children) => React80.Children.map(children, (child
     return renderWithMath(child);
   }
   if (React80.isValidElement(child)) {
-    return React80.cloneElement(child, {
-      ...child.props,
-      children: renderChildrenWithMath(child.props.children)
+    const element = child;
+    return React80.cloneElement(element, {
+      ...element.props,
+      children: renderChildrenWithMath(element.props.children)
     });
   }
   return child;
@@ -26124,7 +26195,7 @@ function Carousel({
   const [isRightArrowHidden, setRightArrowHidden] = React85.useState(true);
   const [paddingElement, setPaddingElement] = React85.useState();
   const [visibleCount, setVisibleCount] = React85.useState();
-  const showedElementsRef = React85.useRef();
+  const showedElementsRef = React85.useRef(void 0);
   const [showedElements, setShowedElements] = React85.useState();
   const updateArrows = React85.useCallback(() => {
     if (!showedElementsRef.current) {
@@ -26667,7 +26738,7 @@ import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
 import * as React87 from "react";
-import { useEffect as useEffect22, useRef as useRef26, useState as useState34 } from "react";
+import { useEffect as useEffect23, useRef as useRef27, useState as useState34 } from "react";
 import { jsx as jsx155 } from "react/jsx-runtime";
 var styles = {
   container: {
@@ -26701,12 +26772,12 @@ function SwipeableViews({
   disableScroll = false,
   ...rootProps
 }) {
-  const containerRef = useRef26(null);
-  const scrollTimeout = useRef26();
-  const scrollingMethod = useRef26("none");
+  const containerRef = useRef27(null);
+  const scrollTimeout = useRef27(null);
+  const scrollingMethod = useRef27("none");
   const [previousIndex, setPreviousIndex] = useState34(index);
-  const hideScrollAnimation = useRef26(true);
-  useEffect22(() => {
+  const hideScrollAnimation = useRef27(true);
+  useEffect23(() => {
     if (containerRef.current) {
       if (scrollingMethod.current === "manual") {
         scrollingMethod.current = "none";
@@ -27340,7 +27411,9 @@ var ToolbarTitle = React91.forwardRef(function ToolbarTitle2({
   hoverActions,
   color: color2 = grey900
 }, ref) {
-  const textElementRef = React91.useRef(null);
+  const textElementRef = React91.useRef(
+    null
+  );
   const [showHoverActions, setShowHoverActions] = useState37(false);
   return /* @__PURE__ */ jsx170(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx170(
     TextEllipsisTooltip_default,
@@ -27866,31 +27939,31 @@ var MinimizableWindow = React92.forwardRef(function MinimizableWindow2({
 var MinimizableWindow_default = MinimizableWindow;
 
 // src/hooks/useFormatters.ts
-import { useCallback as useCallback23, useContext as useContext16 } from "react";
+import { useCallback as useCallback22, useContext as useContext16 } from "react";
 var useFormatters = () => {
   const { locale, currency, timezone } = useContext16(IntlContext);
   return {
-    formatCompactNumber: useCallback23(
+    formatCompactNumber: useCallback22(
       (value) => formatCompactNumber(value, locale),
       [locale]
     ),
-    formatNumber: useCallback23(
+    formatNumber: useCallback22(
       (value, fractionSize) => formatNumber(value, locale, fractionSize),
       [locale]
     ),
-    formatPercentage: useCallback23(
+    formatPercentage: useCallback22(
       (value, fractionSize) => formatPercentage(value, locale, fractionSize),
       [locale]
     ),
-    formatCurrency: useCallback23(
+    formatCurrency: useCallback22(
       (value, notation) => formatCurrency(value, locale, currency, notation),
       [currency, locale]
     ),
-    formatDate: useCallback23(
+    formatDate: useCallback22(
       (date, format2) => formatDate(date, locale, timezone, format2),
       [locale, timezone]
     ),
-    formatPhone: useCallback23(
+    formatPhone: useCallback22(
       (phone, format2) => formatPhone(phone, format2),
       []
     )
@@ -28128,7 +28201,7 @@ react-is/cjs/react-is.development.js:
 
 @mui/styled-engine/esm/index.js:
   (**
-   * @mui/styled-engine v7.3.0
+   * @mui/styled-engine v7.3.7
    *
    * @license MIT
    * This source code is licensed under the MIT license found in the
@@ -28137,7 +28210,7 @@ react-is/cjs/react-is.development.js:
 
 @mui/system/esm/index.js:
   (**
-   * @mui/system v7.3.0
+   * @mui/system v7.3.7
    *
    * @license MIT
    * This source code is licensed under the MIT license found in the