@connectif/ui-components 5.0.2 → 5.1.1

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;
@@ -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);
@@ -21638,6 +21651,7 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
   allowAlpha = false,
   popoverZIndex,
   inputWidthStyle = "150px",
+  mode = "auto",
   onChange
 }, ref) {
   const { t } = useTranslation();
@@ -21662,20 +21676,9 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
     setTextFieldValue(newValue);
     if (isValidColor(newValue) || allowEmpty && newValue === "") {
       setInternalPickerValue(newValue);
-      onChange(newValue);
+      onChange(mode === "hex" ? rgbToHex(newValue) : newValue);
     }
   };
-  const normalizeBlack = (color2) => {
-    const rgb = color2.match(/\d+/g);
-    if (!rgb) {
-      return color2;
-    }
-    const [r2, g, b] = rgb.map(Number);
-    if (r2 <= 1 && g <= 1 && b <= 1) {
-      return "rgb(0,0,0)";
-    }
-    return color2;
-  };
   const iconColor = /* @__PURE__ */ jsx117(
     IconButton_default,
     {
@@ -21688,15 +21691,15 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
     }
   );
   React62.useEffect(() => {
-    const handleColorChange = (color2) => {
+    const handleInternalColorChange = (color2) => {
       setPreviousColors((prev) => [color2, ...prev.slice(0, 17)]);
-      setTextFieldValue(rgbToHex(color2));
-      onChange(color2);
+      setTextFieldValue(mode === "hex" ? rgbToHex(color2) : color2);
+      onChange(mode === "hex" ? rgbToHex(color2) : color2);
       setValidPickerChange(false);
       setColorChangeOccurred(false);
     };
     if (colorChangeOccurred && (isValidPickerChange || isPopoverInputFocused) && internalPickerValue && internalPickerValue !== value) {
-      handleColorChange(internalPickerValue);
+      handleInternalColorChange(internalPickerValue);
     }
   }, [
     value,
@@ -21704,8 +21707,19 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
     onChange,
     isValidPickerChange,
     colorChangeOccurred,
-    isPopoverInputFocused
+    isPopoverInputFocused,
+    mode
   ]);
+  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 = () => {
@@ -21718,7 +21732,7 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
       const timeoutId = setTimeout(() => {
         if (containerRef.current) {
           inputs = containerRef.current.querySelectorAll(
-            "input#rbgcp-input, input#rbgcp-hex-input"
+            "input#rbgcp-R-input, input#rbgcp-G-input, input#rbgcp-B-input, input#rbgcp-hex-input"
           );
           inputs.forEach((input) => {
             input.addEventListener("focus", handleFocus);
@@ -21800,17 +21814,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(
@@ -21832,7 +21841,8 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
                 hideOpacity: !allowAlpha,
                 hideInputType: true,
                 hideColorTypeBtns: true,
-                hideGradientControls: true
+                hideGradientControls: true,
+                disableDarkMode: true
               }
             )
           }
@@ -21843,7 +21853,19 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
 });
 var ColorPicker_default = ColorPicker;
 var rgbToHex = (rgb) => {
-  const rgbValues = rgb.match(/\d+/g);
+  if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(rgb) || !rgb.startsWith("rgb")) {
+    return rgb;
+  }
+  if (rgb.includes("rgba")) {
+    const alphaMatch = rgb.match(
+      /rgba\(\d{1,3}, {0,1}\d{1,3}, {0,1}\d{1,3}, {0,1}([01]|0?\.\d+)\)/
+    );
+    if (alphaMatch && alphaMatch[1] === "0") {
+      return "transparent";
+    }
+  }
+  const normalized = normalizeBlack(rgb);
+  const rgbValues = normalized.match(/\d+/g);
   if (!rgbValues || rgbValues.length !== 3 && rgbValues.length !== 4) {
     return rgb;
   }
@@ -21852,6 +21874,17 @@ var rgbToHex = (rgb) => {
     return hex.length === 1 ? "0" + hex : hex;
   }).join("");
 };
+var normalizeBlack = (color2) => {
+  const rgb = color2.match(/\d+/g);
+  if (!rgb) {
+    return color2;
+  }
+  const [r2, g, b] = rgb.map(Number);
+  if (r2 <= 1 && g <= 1 && b <= 1) {
+    return "rgb(0,0,0)";
+  }
+  return color2;
+};
 
 // src/components/input/UploadClickableArea.tsx
 import { Box as Box3 } from "@mui/material";
@@ -25586,9 +25619,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;
@@ -26175,7 +26209,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) {
@@ -26753,7 +26787,7 @@ function SwipeableViews({
   ...rootProps
 }) {
   const containerRef = useRef27(null);
-  const scrollTimeout = useRef27();
+  const scrollTimeout = useRef27(null);
   const scrollingMethod = useRef27("none");
   const [previousIndex, setPreviousIndex] = useState34(index);
   const hideScrollAnimation = useRef27(true);
@@ -27391,7 +27425,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,
@@ -28179,7 +28215,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
@@ -28188,7 +28224,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