pixelize-design-library 2.2.39 → 2.2.41

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -33,6 +33,23 @@ function ButtonGroupIcon(_a) {
     rightIconDropdown = _a.rightIconDropdown, menulistStyle = _a.menulistStyle, menuItemStyle = _a.menuItemStyle, isLoading = _a.isLoading, _d = _a.divider, divider = _d === void 0 ? true : _d;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _e = (0, react_1.useState)(false), isDropdownOpen = _e[0], setIsDropdownOpen = _e[1];
+    var textRef = (0, react_1.useRef)(null);
+    var _f = (0, react_1.useState)(false), isTextTruncated = _f[0], setIsTextTruncated = _f[1];
+    (0, react_1.useEffect)(function () {
+        var checkTruncation = function () {
+            if (textRef.current) {
+                var isTruncated = textRef.current.scrollWidth > textRef.current.clientWidth;
+                setIsTextTruncated(isTruncated);
+            }
+        };
+        // Use setTimeout to ensure DOM is fully rendered
+        var timeoutId = setTimeout(checkTruncation, 0);
+        window.addEventListener("resize", checkTruncation);
+        return function () {
+            clearTimeout(timeoutId);
+            window.removeEventListener("resize", checkTruncation);
+        };
+    }, [buttonText]);
     var handleRightIconClick = function () {
         setIsDropdownOpen(!isDropdownOpen);
         if (onRightIconClick) {
@@ -53,12 +70,14 @@ function ButtonGroupIcon(_a) {
                     backgroundColor: theme.colors.primary[400],
                 },
             } })),
-        react_1.default.createElement(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, sx: {
-                backgroundColor: theme.colors.primary[500],
-                "&:hover": {
-                    backgroundColor: theme.colors.primary[400],
-                },
-            }, borderLeft: "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), borderRight: "1px solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]) }, buttonText),
+        react_1.default.createElement(react_2.Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated },
+            react_1.default.createElement(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, sx: {
+                    backgroundColor: theme.colors.primary[500],
+                    "&:hover": {
+                        backgroundColor: theme.colors.primary[400],
+                    },
+                }, borderLeft: "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), borderRight: "1px solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), maxW: "200px" },
+                react_1.default.createElement(react_2.Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%" }, buttonText))),
         rightIcon && rightIconDropdown ? (react_1.default.createElement(react_2.Menu, { isOpen: isDropdownOpen, onClose: function () { return setIsDropdownOpen(false); } },
             react_1.default.createElement(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
                     backgroundColor: theme.colors.primary[500],

package/dist/Components/Editor/Editor.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { EditorProps } from "./EditorProps";
-export default function Editor({ value, config, editorRef, className, onChange, onBlur, }: EditorProps): React.JSX.Element;
+export default function Editor({ value, key, config, editorRef, className, onChange, onBlur, }: EditorProps): React.JSX.Element;

package/dist/Components/Editor/Editor.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var jodit_react_1 = __importDefault(require("jodit-react"));
 function Editor(_a) {
-    var value = _a.value, config = _a.config, editorRef = _a.editorRef, className = _a.className, onChange = _a.onChange, onBlur = _a.onBlur;
-    return (react_1.default.createElement(jodit_react_1.default, { config: config, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }));
+    var value = _a.value, key = _a.key, config = _a.config, editorRef = _a.editorRef, className = _a.className, onChange = _a.onChange, onBlur = _a.onBlur;
+    return (react_1.default.createElement(jodit_react_1.default, { key: key, config: config, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }));
 }
 exports.default = Editor;

package/dist/Components/Editor/EditorProps.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
-import { IJoditEditorProps } from "jodit-react";
-export type EditorProps = Pick<IJoditEditorProps, "value" | "config" | "className" | "onChange" | "onBlur"> & {
+import JoditEditor from "jodit-react";
+import type { ComponentProps } from "react";
+export type EditorProps = Pick<ComponentProps<typeof JoditEditor>, "value" | "config" | "className" | "onChange" | "onBlur"> & {
     editorRef?: React.RefObject<any>;
+    key?: string | number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.39",
+  "version": "2.2.41",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -9,15 +9,15 @@
     "@chakra-ui/react": "^2.8.2",
     "@hello-pangea/dnd": "^18.0.1",
     "framer-motion": "^11.2.2",
-    "jodit-react": "^4.1.2",
+    "jodit-react": "^5.2.38",
     "lucide-react": "^0.487.0",
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
+    "react-dropzone": "^14.3.8",
     "react-scripts": "^5.0.1",
-    "react-window": "^1.8.11",
-    "react-dropzone": "^14.3.8"
+    "react-window": "^1.8.11"
   },
   "scripts": {
     "start": "react-scripts start",