pixelize-design-library 2.2.11 → 2.2.14

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -50,7 +50,6 @@ var ApexLineChart = function (_a) {
             data: Array.isArray(data) ? data : [],
         },
     ]), series = _h[0], setSeries = _h[1];
-    var chartRef = (0, react_1.useRef)(null);
     // 🔄 Handle realtime updates
     (0, react_1.useEffect)(function () {
         if (variant === "realtime") {
@@ -73,7 +72,7 @@ var ApexLineChart = function (_a) {
                 ? {
                     enabled: true,
                     speed: 1000,
-                    dynamicAnimation: { speed: 1000 }, // ✅ allowed
+                    dynamicAnimation: { speed: 1000 },
                 }
                 : { enabled: false },
             zoom: { enabled: true },
@@ -93,6 +92,6 @@ var ApexLineChart = function (_a) {
         dataLabels: { enabled: false },
     };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_apexcharts_1.default, { ref: chartRef, options: options, series: series, type: "line", height: height, width: width })));
+        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: series, type: "line", height: height, width: width })));
 };
 exports.default = ApexLineChart;

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ApexPieChartProps } from "./ApexPieChartProps";
-declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendStyle, variant, }: ApexPieChartProps) => React.JSX.Element;
+declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendPosition, legendStyle, variant, }: ApexPieChartProps) => React.JSX.Element;
 export default ApexPieChart;

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -23,12 +23,17 @@ var ApexPieChart = function (_a) {
         fontSize: "16px",
         fontWeight: 600,
         fontFamily: "Arial",
-    } : _g, _h = _a.legendStyle, legendStyle = _h === void 0 ? {
+    } : _g, _h = _a.legendPosition, legendPosition = _h === void 0 ? "bottom" : _h, _j = _a.legendStyle, legendStyle = _j === void 0 ? {
         colors: "#000",
-        position: "bottom",
         useSeriesColors: false,
-    } : _h, _j = _a.variant, variant = _j === void 0 ? "pie" : _j;
+        horizontalGap: 10,
+        verticalGap: 5,
+        markerSize: 8,
+        markerOffsetX: -5,
+        markerOffsetY: 0,
+    } : _j, _k = _a.variant, variant = _k === void 0 ? "pie" : _k;
     var extraOptions = {};
+    // Your switch cases for different variants
     switch (variant) {
         case "semi-donut":
             extraOptions = {
@@ -107,14 +112,35 @@ var ApexPieChart = function (_a) {
         default:
             break;
     }
+    // Validate and normalize legend position
+    var getValidLegendPosition = function (position) {
+        var validPositions = ["left", "right", "top", "bottom"];
+        if (validPositions.includes(position)) {
+            return position;
+        }
+        console.warn("Invalid legend position: ".concat(position, ". Defaulting to 'bottom'."));
+        return "bottom";
+    };
+    var validLegendPosition = getValidLegendPosition(legendPosition);
     var options = __assign({ chart: {
             type: variant.includes("pie") ? "pie" : "donut",
         }, labels: labels, colors: (_b = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _b !== void 0 ? _b : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"], legend: {
-            position: legendStyle.position,
+            position: validLegendPosition,
             labels: {
                 colors: legendStyle.colors,
                 useSeriesColors: legendStyle.useSeriesColors,
             },
+            markers: {
+                size: legendStyle.markerSize,
+                offsetX: legendStyle.markerOffsetX,
+                offsetY: legendStyle.markerOffsetY,
+                strokeWidth: 0,
+                shape: 'circle',
+            },
+            itemMargin: {
+                horizontal: legendStyle.horizontalGap,
+                vertical: legendStyle.verticalGap,
+            },
         }, title: {
             text: title,
             align: titlePosition,

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts

@@ -14,10 +14,15 @@ export type ApexPieChartProps = {
         fontWeight?: number | string;
         fontFamily?: string;
     };
+    legendPosition?: "left" | "right" | "top" | "bottom";
     legendStyle?: {
         colors?: string | string[];
         useSeriesColors?: boolean;
-        position?: "top" | "right" | "bottom" | "left";
+        horizontalGap?: number;
+        verticalGap?: number;
+        markerSize?: number;
+        markerOffsetX?: number;
+        markerOffsetY?: number;
     };
 };
 export type DonutPieVariant = "pie" | "donut" | "update-donut" | "monochrome-pie" | "gradient-donut" | "semi-donut" | "donut-with-pattern" | "pie-with-image";

package/dist/Components/Dropdown/DropDown.js

@@ -39,7 +39,7 @@ var react_2 = require("@chakra-ui/react");
 var framer_motion_1 = require("framer-motion");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
-var MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(react_2.Box, __assign({ ref: ref }, props))); }));
+var MotionBox = framer_motion_1.motion.create((0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(react_2.Box, __assign({ ref: ref }, props))); }));
 var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
     var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, DropdownIcon = _a.DropdownIcon, _c = _a.isVisibleIconShow, isVisibleIconShow = _c === void 0 ? true : _c, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle, _d = _a.optionsSize, optionsSize = _d === void 0 ? "lg" : _d, _e = _a.divider, divider = _e === void 0 ? false : _e;
     var theme = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/SideBar/components/OverflowTooltipText.js

@@ -58,6 +58,6 @@ var OverflowTooltipText = function (_a) {
     }, [children]);
     var shouldShowTooltip = isOverflowing && !isTooltipDisabled;
     return (react_1.default.createElement(ToolTip_1.default, { label: textContent, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true },
-        react_1.default.createElement(react_2.Box, { ref: contentRef, as: "div", display: "inline-block", maxWidth: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children)));
+        react_1.default.createElement(react_2.Box, { ref: contentRef, as: "span", display: "inline-block", maxWidth: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children)));
 };
 exports.default = OverflowTooltipText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.11",
+  "version": "2.2.14",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",