qlu-20-ui-library 1.10.16 → 1.10.18

package/dist/components/CreditsManagementDropdownButton/CreditsManagementDropdownButton/index.d.ts

@@ -6,7 +6,7 @@ interface DropDownButtonProps {
     width?: string;
     disabled?: boolean;
     dataCy?: string;
-    whiteListedRef?: React.RefObject<HTMLDivElement>;
+    whiteListedRef?: React.RefObject<HTMLDivElement | null>;
     isOpen?: boolean;
     handleOpen?: (isOpen: boolean) => void;
     customRootElem?: HTMLDivElement;

package/dist/types/components/Charts/AreaChart/AreaChart.js

@@ -65,7 +65,7 @@ function AreaChart({ values, valuesFormatter = formatterForUSD, xStepSize, yStep
                     },
                     label: function (context) {
                         const label = context.parsed.y;
-                        return formatterForUSD.format(label);
+                        return label ? formatterForUSD.format(label) : "$0";
                     },
                 },
                 bodyColor: "#FF8D4E",

package/dist/types/components/Charts/BarLineChart/BarLineChart.js

@@ -9,7 +9,7 @@ function BarLineChart({ values, view = "both", showLegend = true, valuesFormatte
     transformedValues.forEach((value) => {
         transformedLabels.push([value.key.split("\n")]);
     });
-    const maxValue = Math.max(...transformedValues.map(v => v.value));
+    const maxValue = Math.max(...transformedValues.map((v) => v.value));
     const minVisiblePercentage = 0.07;
     const options = {
         responsive: true,
@@ -107,12 +107,12 @@ function BarLineChart({ values, view = "both", showLegend = true, valuesFormatte
                         if (context.dataset.type === "bar") {
                             const barDataset = context.dataset;
                             const realValue = barDataset.realData?.[context.dataIndex] ?? context.parsed.y;
-                            return valuesFormatter.format(realValue);
+                            return realValue ? valuesFormatter.format(realValue) : "$0";
                         }
                         if (context.dataset.type === "line") {
                             const lineDataset = context.dataset;
                             const realValue = lineDataset.realData?.[context.dataIndex] ?? context.parsed.y;
-                            return valuesFormatter.format(realValue);
+                            return realValue ? valuesFormatter.format(realValue) : "$0";
                         }
                     },
                 },
@@ -146,13 +146,13 @@ function BarLineChart({ values, view = "both", showLegend = true, valuesFormatte
     };
     const lineData = {
         type: "line",
-        data: transformedValues.map(val => {
+        data: transformedValues.map((val) => {
             const actualValue = val.value;
             return actualValue < maxValue * minVisiblePercentage && actualValue !== 0
                 ? maxValue * minVisiblePercentage
                 : actualValue;
         }),
-        realData: transformedValues.map(val => val.value),
+        realData: transformedValues.map((val) => val.value),
         pointBackgroundColor: "#331C10",
         pointRadius: (context) => {
             if (startsFromZeroVariant) {
@@ -191,14 +191,14 @@ function BarLineChart({ values, view = "both", showLegend = true, valuesFormatte
     };
     const barData = {
         type: "bar",
-        data: transformedValues.map(val => {
+        data: transformedValues.map((val) => {
             const actualValue = val.value;
             // If the value is very small compared to max, boost it to minimum visible height
             return actualValue < maxValue * minVisiblePercentage && actualValue !== 0
                 ? maxValue * minVisiblePercentage
                 : actualValue;
         }),
-        realData: transformedValues.map(val => val.value),
+        realData: transformedValues.map((val) => val.value),
         label: "",
         borderWidth: 1,
         backgroundColor: (context) => {

package/dist/types/components/CreditsManagementDropdownButton/CreditsManagementDatePicker/CustomDayContent.js

@@ -4,15 +4,15 @@ import clsx from "clsx";
 const CustomDayContent = (props) => {
     const event = props.eventsData?.find((entry) => {
         const date = new Date(entry.date);
-        return (date.getDate() === props.date.getDate() &&
-            date.getMonth() === props.date.getMonth() &&
-            date.getFullYear() === props.date.getFullYear());
+        return (date.getDate() === props.day.date.getDate() &&
+            date.getMonth() === props.day.date.getMonth() &&
+            date.getFullYear() === props.day.date.getFullYear());
     });
-    const isDisabled = props.date.getTime() > new Date().getTime();
+    const isDisabled = props.day.date.getTime() > new Date().getTime();
     const dayCellClasses = clsx({
         "daypicker-day-cell-content": true,
         disabled: isDisabled,
     });
-    return (_jsx(Tooltip, { content: event?.name || "", toolTipPosition: "top", isDisabled: !event, children: _jsxs("span", { className: dayCellClasses, children: [props.date.getDate(), !!event && _jsx("span", { className: "event-dot" })] }) }));
+    return (_jsx(Tooltip, { content: event?.name || "", toolTipPosition: "top", isDisabled: !event, children: _jsxs("span", { className: dayCellClasses, children: [props.day.date.getDate(), !!event && _jsx("span", { className: "event-dot" })] }) }));
 };
 export default CustomDayContent;

package/dist/types/components/CreditsManagementDropdownButton/CreditsManagementDatePicker/index.js

@@ -26,14 +26,15 @@ function DatePicker({ onDateSelected, initialValue, eventsData, timezone, custom
         newDate.setMonth(selectedMonth.getMonth() + 1);
         setSelectedMonth(newDate);
     };
-    const formatCaption = (date) => {
-        const months = date.toLocaleString("en-US", { month: "long" });
-        return (_jsxs("div", { className: "datePicker-customCaption", children: [_jsx("span", { className: "datePicker-prevMonthArrow", onClick: handlePrevMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowLeft", iconSize: "32" }) }), months, " ", date.getFullYear(), _jsx("span", { className: "datePicker-nextMonthArrow", onClick: handleNextMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowRight", iconSize: "32" }) })] }));
-    };
     const formatWeekday = (date) => {
         const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
         return weekdays[date.getDay()];
     };
+    const CustomCaption = ({ calendarMonth, displayIndex, ...props }) => {
+        const displayMonth = calendarMonth.date;
+        const months = displayMonth.toLocaleString("en-US", { month: "long" });
+        return (_jsxs("div", { className: "datePicker-customCaption", ...props, children: [_jsx("span", { className: "datePicker-prevMonthArrow", onClick: handlePrevMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowLeft", iconSize: "32" }) }), months, " ", displayMonth.getFullYear(), _jsx("span", { className: "datePicker-nextMonthArrow", onClick: handleNextMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowRight", iconSize: "32" }) })] }));
+    };
     const [dropdownPosition, setDropdownPosition] = useState({ x: 0, y: 0, direction: "top" });
     const dropdownRef = useRef(null);
     const mainRef = useRef(null);
@@ -105,8 +106,9 @@ function DatePicker({ onDateSelected, initialValue, eventsData, timezone, custom
                                 setSelectedDate(props[0]);
                                 onDateSelected(props[0]);
                             }
-                        }, footer: footer, formatters: { formatCaption, formatWeekdayName: formatWeekday }, showOutsideDays: true, components: {
-                            DayContent: (props) => (_jsx(CustomDayContent, { date: props.date, displayMonth: props.displayMonth, eventsData: eventsData })),
+                        }, footer: footer, formatters: { formatWeekdayName: formatWeekday }, showOutsideDays: true, components: {
+                            MonthCaption: CustomCaption,
+                            Day: (props) => (_jsx(CustomDayContent, { day: props.day, modifiers: props.modifiers, eventsData: eventsData })),
                         }, classNames: { day: "datepicker-day-cell" } }) }), customRootElem || document.body)] }));
 }
 export default DatePicker;

package/dist/types/components/CreditsManagementDropdownButton/CreditsManagementDropdownButton/index.d.ts

@@ -7,7 +7,7 @@ interface DropDownButtonProps {
     width?: string;
     disabled?: boolean;
     dataCy?: string;
-    whiteListedRef?: React.RefObject<HTMLDivElement>;
+    whiteListedRef?: React.RefObject<HTMLDivElement | null>;
     isOpen?: boolean;
     handleOpen?: (isOpen: boolean) => void;
     customRootElem?: HTMLDivElement;

package/dist/types/components/DatePicker/CustomDayContent.js

@@ -3,10 +3,10 @@ import Tooltip from "../Tooltip";
 const CustomDayContent = (props) => {
     const event = props.eventsData?.find((entry) => {
         const date = new Date(entry.date);
-        return (date.getDate() === props.date.getDate() &&
-            date.getMonth() === props.date.getMonth() &&
-            date.getFullYear() === props.date.getFullYear());
+        return (date.getDate() === props.day.date.getDate() &&
+            date.getMonth() === props.day.date.getMonth() &&
+            date.getFullYear() === props.day.date.getFullYear());
     });
-    return (_jsx(Tooltip, { content: event?.name || "", toolTipPosition: "top", isDisabled: !event, children: _jsxs("span", { className: "daypicker-day-cell-content", children: [props.date.getDate(), !!event && _jsx("span", { className: "event-dot" })] }) }));
+    return (_jsx(Tooltip, { content: event?.name || "", toolTipPosition: "top", isDisabled: !event, children: _jsxs("span", { className: "daypicker-day-cell-content", children: [props.day.date.getDate(), !!event && _jsx("span", { className: "event-dot" })] }) }));
 };
 export default CustomDayContent;

package/dist/types/components/DatePicker/index.js

@@ -26,9 +26,10 @@ const DatePicker = ({ disabledUntil, disableWeekends = false, onDateSelected, in
         newDate.setMonth(selectedMonth.getMonth() + 1);
         setSelectedMonth(newDate);
     };
-    const formatCaption = (date) => {
-        const months = date.toLocaleString("en-US", { month: "long" });
-        return (_jsxs("div", { className: "datePicker-customCaption", children: [_jsx("span", { className: "datePicker-prevMonthArrow", onClick: handlePrevMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowLeft", iconSize: "32" }) }), months, " ", date.getFullYear(), _jsx("span", { className: "datePicker-nextMonthArrow", onClick: handleNextMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowRight", iconSize: "32" }) })] }));
+    const CustomCaption = ({ calendarMonth, displayIndex, ...props }) => {
+        const displayMonth = calendarMonth.date;
+        const months = displayMonth.toLocaleString("en-US", { month: "long" });
+        return (_jsxs("div", { className: "datePicker-customCaption", ...props, children: [_jsx("span", { className: "datePicker-prevMonthArrow", onClick: handlePrevMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowLeft", iconSize: "32" }) }), months, " ", displayMonth.getFullYear(), _jsx("span", { className: "datePicker-nextMonthArrow", onClick: handleNextMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowRight", iconSize: "32" }) })] }));
     };
     const formatWeekday = (date) => {
         const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
@@ -120,8 +121,9 @@ const DatePicker = ({ disabledUntil, disableWeekends = false, onDateSelected, in
                         }, selected: selectedDate, onSelect: (...props) => {
                             props?.[3]?.stopPropagation?.();
                             setSelectedDate(props[0]);
-                        }, footer: footer, formatters: { formatCaption, formatWeekdayName: formatWeekday }, showOutsideDays: true, components: {
-                            DayContent: (props) => (_jsx(CustomDayContent, { date: props.date, displayMonth: props.displayMonth, eventsData: eventsData })),
+                        }, footer: footer, formatters: { formatWeekdayName: formatWeekday }, showOutsideDays: true, components: {
+                            MonthCaption: CustomCaption,
+                            Day: (props) => (_jsx(CustomDayContent, { day: props.day, modifiers: props.modifiers, eventsData: eventsData })),
                         }, classNames: { day: "datepicker-day-cell" } }) }), customRootElem || rootElem.current)] }));
 };
 export default DatePicker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qlu-20-ui-library",
-  "version": "1.10.16",
+  "version": "1.10.18",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -9,7 +9,7 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "local": "rimraf dist && tsc && vite build && npm pack",
+    "local": "tsc && vite build && npm pack",
     "deployment": "rm -rf dist/* && tsc && vite build",
     "changeset": "changeset"
   },
@@ -36,22 +36,22 @@
     "chart.js": "^4.3.0",
     "react-chartjs-2": "^5.2.0",
     "react-datepicker": "^7.5.0",
-    "react-day-picker": "^8.8.1",
+    "react-day-picker": "^9.11.3",
     "react-flags-select": "^2.2.3",
-    "react-loader-spinner": "^6.1.6",
+    "react-loader-spinner": "^8.0.0",
     "react-modal": "^3.16.3",
     "react-table": "^7.8.0",
-    "react-toastify": "^10.0.6",
-    "react-tooltip": "^5.28.0",
-    "recharts": "^2.13.3",
+    "react-toastify": "10.0.6",
+    "react-tooltip": "^5.30.0",
+    "recharts": "^2.15.0",
     "sass": "^1.89.2",
     "tiptap-extension-font-size": "^1.2.0",
     "uuid": "^11.0.3",
     "vite-plugin-dts": "^2.3.0"
   },
   "peerDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.5",