bianic-ui 2.8.0-alpha.0 → 2.8.0

package/dist/cjs/types/components/Forms/DatePicker/PickerCalendar/components/PickerContent.d.ts

@@ -9,6 +9,7 @@ interface PickerContentProps {
     onPrevMonth?: () => void;
     onNextMonth?: () => void;
     onMonthSelect?: (month: number) => void;
+    onYearSelect?: (year: number) => void;
 }
 declare const PickerContent: React.FC<PickerContentProps>;
 export default PickerContent;

package/dist/cjs/types/components/Forms/DatePicker/PickerCalendar/components/RangePicker.d.ts

@@ -5,6 +5,7 @@ interface RangePickerProps {
     onClose: () => void;
     minDate: string | undefined;
     maxDate: string | undefined;
+    isPickerOpen: boolean;
 }
 declare const RangePicker: React.FC<RangePickerProps>;
 export default RangePicker;

package/dist/cjs/types/components/Modal/ModalNonCloseable.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function ModalNonCloseable(): React.JSX.Element;

package/dist/cjs/types/stories/Modal/ModalNonCloseable.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import Modal from '../../components/Modal/ModalNonCloseable';
+declare const meta: {
+    title: string;
+    component: typeof Modal;
+    parameters: {
+        layout: string;
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const NonCloseable: Story;

package/dist/esm/index.js

@@ -3148,7 +3148,7 @@ var areMonthsAdjacent = function (leftMonth, leftYear, rightMonth, rightYear) {
 
 var DateDisplay = function (_a) {
     var displayDays = _a.displayDays, viewMonthValue = _a.viewMonthValue, selectedDate = _a.selectedDate, onDateSelect = _a.onDateSelect, minDateValue = _a.minDateValue, maxDateValue = _a.maxDateValue;
-    var isRangeMode = Array.isArray(selectedDate);
+    var isRangeMode = Array.isArray(selectedDate) && selectedDate.length === 2;
     var startRangeDate = isRangeMode && (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[0]) ? new Date(selectedDate[0]) : null;
     var endRangeDate = isRangeMode && (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1]) ? new Date(selectedDate[1]) : null;
     return (React.createElement("div", null,
@@ -3457,7 +3457,7 @@ var useCalendarLogic = function (selectedDate, minDate, maxDate) {
 };
 
 var PickerContent = function (_a) {
-    var selectedDate = _a.selectedDate, onDateSelect = _a.onDateSelect, initialViewMonth = _a.initialViewMonth, initialViewYear = _a.initialViewYear, minDate = _a.minDate, maxDate = _a.maxDate, onPrevMonth = _a.onPrevMonth, onNextMonth = _a.onNextMonth, onMonthSelect = _a.onMonthSelect;
+    var selectedDate = _a.selectedDate, onDateSelect = _a.onDateSelect, initialViewMonth = _a.initialViewMonth, initialViewYear = _a.initialViewYear, minDate = _a.minDate, maxDate = _a.maxDate, onPrevMonth = _a.onPrevMonth, onNextMonth = _a.onNextMonth, onMonthSelect = _a.onMonthSelect, onYearSelect = _a.onYearSelect;
     var _b = useCalendarLogic(
     // use first selectedDate if array
     Array.isArray(selectedDate)
@@ -3486,7 +3486,10 @@ var PickerContent = function (_a) {
                 handlePickerMode('date');
             }, selectedDate: selectedDate, viewMonthValue: viewMonthValue, viewYearValue: viewYearValue })),
         pickerMode === 'year' && (React.createElement(YearDisplay, { maxDateValue: maxDateValue, minDateValue: minDateValue, onYearSelect: function (y) {
-                setViewYearValue(y);
+                if (onYearSelect)
+                    onYearSelect(y);
+                else
+                    setViewYearValue(y);
                 handlePickerMode('month');
             }, viewYearValue: viewYearValue, yearDisplayRange: yearDisplayRange }))));
 };
@@ -3503,117 +3506,168 @@ var SinglePicker = function (_a) {
 var RangePicker = function (_a) {
     var 
     // pickerMode,
-    selectedDate = _a.selectedDate, onDateChange = _a.onDateChange, onClose = _a.onClose, minDate = _a.minDate, maxDate = _a.maxDate;
+    selectedDate = _a.selectedDate, onDateChange = _a.onDateChange, onClose = _a.onClose, minDate = _a.minDate, maxDate = _a.maxDate, isPickerOpen = _a.isPickerOpen;
     // compute initial view month/year for left and right panels from current selection
     var leftInitDate = selectedDate && selectedDate[0] ? new Date(selectedDate[0]) : new Date();
+    var rightInitDate = selectedDate && selectedDate[1] ? new Date(selectedDate[1]) : new Date();
     var leftInitMonth = leftInitDate.getMonth();
     var leftInitYear = leftInitDate.getFullYear();
-    var rightInitMonth = leftInitMonth === 11 ? 0 : leftInitMonth + 1;
-    var rightInitYear = leftInitMonth === 11 ? leftInitYear + 1 : leftInitYear;
+    var rightInitMonth = rightInitDate
+        ? rightInitDate.getMonth()
+        : leftInitMonth === 11
+            ? 0
+            : leftInitMonth + 1;
+    var rightInitYear = rightInitDate
+        ? rightInitDate.getFullYear()
+        : leftInitMonth === 11
+            ? leftInitYear + 1
+            : leftInitYear;
     // State to track left and right panel month/year
     var _b = useState(leftInitMonth), leftMonth = _b[0], setLeftMonth = _b[1];
     var _c = useState(leftInitYear), leftYear = _c[0], setLeftYear = _c[1];
     var _d = useState(rightInitMonth), rightMonth = _d[0], setRightMonth = _d[1];
     var _e = useState(rightInitYear), rightYear = _e[0], setRightYear = _e[1];
     var _f = useState(selectedDate || []), tempSelectedDate = _f[0], setTempSelectedDate = _f[1];
-    // Sync state when initial selection changes
     useEffect(function () {
-        var initDate = selectedDate && selectedDate[0] ? new Date(selectedDate[0]) : new Date();
-        var initMonth = initDate.getMonth();
-        var initYear = initDate.getFullYear();
-        var nextMonth = initMonth === 11 ? 0 : initMonth + 1;
-        var nextYear = initMonth === 11 ? initYear + 1 : initYear;
-        setLeftMonth(initMonth);
-        setLeftYear(initYear);
-        setRightMonth(nextMonth);
-        setRightYear(nextYear);
-    }, [selectedDate]);
+        // If both dates are in the same month/year, advance right picker to next month
+        if (rightMonth === leftMonth && rightYear === leftYear) {
+            var tempRightMonth = leftMonth === 11 ? 0 : leftMonth + 1;
+            var tempRightYear = leftMonth === 11 ? leftYear + 1 : leftYear;
+            setRightMonth(tempRightMonth);
+            setRightYear(tempRightYear);
+        }
+    }, [leftMonth, leftYear, rightMonth, rightYear]);
+    useEffect(function () {
+        if (!isPickerOpen)
+            setTempSelectedDate(selectedDate || []);
+    }, [isPickerOpen]);
     var isAdjacent = useMemo(function () { return areMonthsAdjacent(leftMonth, leftYear, rightMonth, rightYear); }, [leftMonth, leftYear, rightMonth, rightYear]);
+    // Helper function to ensure left picker is always smaller than right picker
+    var ensureOrderedPickers = function (newLeftMonth, newLeftYear, newRightMonth, newRightYear) {
+        // If left year is greater than right year, swap them
+        if (newLeftYear > newRightYear) {
+            setLeftMonth(newRightMonth);
+            setLeftYear(newRightYear);
+            setRightMonth(newLeftMonth);
+            setRightYear(newLeftYear);
+        }
+        // If years are equal and left month is greater than or equal to right month, swap months
+        else if (newLeftYear === newRightYear && newLeftMonth >= newRightMonth) {
+            setLeftMonth(newRightMonth);
+            setRightMonth(newLeftMonth);
+        }
+        // Otherwise, keep the order as is
+        else {
+            setLeftMonth(newLeftMonth);
+            setLeftYear(newLeftYear);
+            setRightMonth(newRightMonth);
+            setRightYear(newRightYear);
+        }
+    };
     var handleLeftPrevMonth = function () {
         if (leftMonth === 0) {
-            setLeftMonth(11);
-            setLeftYear(function (prev) { return prev - 1; });
+            ensureOrderedPickers(11, leftYear - 1, rightMonth, rightYear);
         }
         else {
-            setLeftMonth(function (prev) { return prev - 1; });
+            ensureOrderedPickers(leftMonth - 1, leftYear, rightMonth, rightYear);
         }
     };
     var handleLeftNextMonth = function () {
+        var newLeftMonth = leftMonth;
+        var newLeftYear = leftYear;
+        var newRightMonth = rightMonth;
+        var newRightYear = rightYear;
         if (isAdjacent) {
-            // If adjacent, move both panels forward by 2 months
+            // If adjacent, move both panels forward
             if (leftMonth === 11) {
-                setLeftMonth(1);
-                setLeftYear(function (prev) { return prev + 2; });
+                newLeftMonth = 0;
+                newLeftYear = leftYear + 1;
             }
             else {
-                setLeftMonth(function (prev) { return prev + 2; });
+                newLeftMonth = leftMonth + 1;
             }
             if (rightMonth === 11) {
-                setRightMonth(1);
-                setRightYear(function (prev) { return prev + 2; });
+                newRightMonth = 0;
+                newRightYear = rightYear + 1;
             }
             else {
-                setRightMonth(function (prev) { return prev + 2; });
+                newRightMonth = rightMonth + 1;
             }
         }
         else {
-            // If not adjacent, move left panel forward by 1 month
             if (leftMonth === 11) {
-                setLeftMonth(0);
-                setLeftYear(function (prev) { return prev + 1; });
+                newLeftMonth = 0;
+                newLeftYear = leftYear + 1;
             }
             else {
-                setLeftMonth(function (prev) { return prev + 1; });
+                newLeftMonth = leftMonth + 1;
             }
         }
+        ensureOrderedPickers(newLeftMonth, newLeftYear, newRightMonth, newRightYear);
     };
     var handleRightPrevMonth = function () {
+        var newLeftMonth = leftMonth;
+        var newLeftYear = leftYear;
+        var newRightMonth = rightMonth;
+        var newRightYear = rightYear;
         if (isAdjacent) {
-            // If adjacent, move both panels backward by 2 months
+            // If adjacent, move both panels backward
             if (leftMonth === 0) {
-                setLeftMonth(10);
-                setLeftYear(function (prev) { return prev - 1; });
+                newLeftMonth = 11;
+                newLeftYear = leftYear - 1;
             }
             else {
-                setLeftMonth(function (prev) { return prev - 2; });
+                newLeftMonth = leftMonth - 1;
             }
             if (rightMonth === 0) {
-                setRightMonth(10);
-                setRightYear(function (prev) { return prev - 1; });
+                newRightMonth = 11;
+                newRightYear = rightYear - 1;
             }
             else {
-                setRightMonth(function (prev) { return prev - 2; });
+                newRightMonth = rightMonth - 1;
             }
         }
         else {
-            // If not adjacent, move right panel backward by 1 month
             if (rightMonth === 0) {
-                setRightMonth(11);
-                setRightYear(function (prev) { return prev - 1; });
+                newRightMonth = 11;
+                newRightYear = rightYear - 1;
             }
             else {
-                setRightMonth(function (prev) { return prev - 1; });
+                newRightMonth = rightMonth - 1;
             }
         }
+        ensureOrderedPickers(newLeftMonth, newLeftYear, newRightMonth, newRightYear);
     };
     var handleRightNextMonth = function () {
+        var newRightMonth = rightMonth;
+        var newRightYear = rightYear;
         if (rightMonth === 11) {
-            setRightMonth(0);
-            setRightYear(function (prev) { return prev + 1; });
+            newRightMonth = 0;
+            newRightYear = rightYear + 1;
         }
         else {
-            setRightMonth(function (prev) { return prev + 1; });
+            newRightMonth = rightMonth + 1;
         }
+        ensureOrderedPickers(leftMonth, leftYear, newRightMonth, newRightYear);
+    };
+    var handleYearSelectLeft = function (year) {
+        ensureOrderedPickers(leftMonth, year, rightMonth, rightYear);
+    };
+    var handleYearSelectRight = function (year) {
+        ensureOrderedPickers(leftMonth, leftYear, rightMonth, year);
     };
     var handleDateSelect = function (date) {
         if (tempSelectedDate.length >= 2) {
             setTempSelectedDate([dateToInputString(date)]);
         }
         else {
-            setTempSelectedDate(__spreadArray(__spreadArray([], tempSelectedDate, true), [dateToInputString(date)], false));
+            var newDates = __spreadArray(__spreadArray([], tempSelectedDate, true), [dateToInputString(date)], false);
+            if (newDates.length === 2)
+                newDates.sort();
+            setTempSelectedDate(newDates);
         }
     };
-    var handleMonthSelect = function (setMonth, dateIndex, initYear) {
+    var handleMonthSelect = function (dateIndex, initYear) {
         return function (val) {
             var selectedDates = Array.isArray(selectedDate)
                 ? selectedDate
@@ -3631,21 +3685,31 @@ var RangePicker = function (_a) {
                 }
                 var selectedMonth = parseInt(selectedDates[dateIndex].slice(5, 7)) - 1;
                 if (val === selectedMonth) {
-                    setMonth(selectedMonth);
+                    if (dateIndex === 0) {
+                        ensureOrderedPickers(selectedMonth, initYear, rightMonth, rightYear);
+                    }
+                    else {
+                        ensureOrderedPickers(leftMonth, leftYear, selectedMonth, initYear);
+                    }
                 }
                 else {
                     return;
                 }
             }
             else {
-                setMonth(val);
+                if (dateIndex === 0) {
+                    ensureOrderedPickers(val, initYear, rightMonth, rightYear);
+                }
+                else {
+                    ensureOrderedPickers(leftMonth, leftYear, val, initYear);
+                }
             }
         };
     };
     return (React.createElement("div", { className: "space-y-[30px]" },
         React.createElement("div", { className: "range-picker picker-body flex gap-x-[22px]" },
-            React.createElement(PickerContent, { selectedDate: tempSelectedDate, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, initialViewMonth: leftMonth, initialViewYear: leftYear, onPrevMonth: handleLeftPrevMonth, onNextMonth: handleLeftNextMonth, onMonthSelect: handleMonthSelect(setLeftMonth, 0, leftInitYear) }),
-            React.createElement(PickerContent, { selectedDate: tempSelectedDate, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, initialViewMonth: rightMonth, initialViewYear: rightYear, onPrevMonth: handleRightPrevMonth, onNextMonth: handleRightNextMonth, onMonthSelect: handleMonthSelect(setRightMonth, 1, rightInitYear) })),
+            React.createElement(PickerContent, { selectedDate: tempSelectedDate, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, initialViewMonth: leftMonth, initialViewYear: leftYear, onPrevMonth: handleLeftPrevMonth, onNextMonth: handleLeftNextMonth, onMonthSelect: handleMonthSelect(0, leftYear), onYearSelect: handleYearSelectLeft }),
+            React.createElement(PickerContent, { selectedDate: tempSelectedDate, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, initialViewMonth: rightMonth, initialViewYear: rightYear, onPrevMonth: handleRightPrevMonth, onNextMonth: handleRightNextMonth, onMonthSelect: handleMonthSelect(1, rightYear), onYearSelect: handleYearSelectRight })),
         React.createElement("div", { className: "flex justify-between" },
             React.createElement(Button, { label: "Reset", size: "sm", variant: "primary-outlined", iconLeft: React.createElement(TbRefresh, { className: "text-bia-blue", size: 14 }), onClick: function () { return setTempSelectedDate([]); } }),
             React.createElement("div", { className: "flex gap-x-2.5" },
@@ -3667,16 +3731,16 @@ var PickerCalendar = function (_a) {
         setIsPickerOpen(isOpen);
     }, [isOpen]);
     return createPortal(React.createElement("div", __assign({ className: "bianic-datepicker-calendar absolute rounded-b-radius-sm bg-bia-white px-1.5 pb-[17px] pt-[15px] text-bia-black shadow-md ".concat(className), ref: pickerCalendarRef, style: __assign(__assign({ zIndex: zIndex, display: isPickerOpen ? 'flex' : 'none' }, positionStyle), style) }, restProps),
-        React.createElement(PickerBody, { selectedDate: selectedDate, minDate: minDate, maxDate: maxDate, onDateChange: onDateChange, isPickerOpen: isPickerOpen, pickerVariant: pickerVariant, onClose: onClose })), document.body);
+        React.createElement(PickerBody, { selectedDate: selectedDate, minDate: minDate, maxDate: maxDate, onDateChange: onDateChange, isPickerOpen: isPickerOpen, pickerVariant: pickerVariant, onClose: onClose, isOpen: isOpen })), document.body);
 };
 var PickerBody = function (_a) {
-    var selectedDate = _a.selectedDate, minDate = _a.minDate, maxDate = _a.maxDate, onDateChange = _a.onDateChange, isPickerOpen = _a.isPickerOpen, _b = _a.pickerVariant, pickerVariant = _b === void 0 ? 'range' : _b, onClose = _a.onClose;
+    var selectedDate = _a.selectedDate, minDate = _a.minDate, maxDate = _a.maxDate, onDateChange = _a.onDateChange, isPickerOpen = _a.isPickerOpen, _b = _a.pickerVariant, pickerVariant = _b === void 0 ? 'range' : _b, onClose = _a.onClose, isOpen = _a.isOpen;
     useEffect(function () {
         if (!isPickerOpen) {
             onClose();
         }
     }, [isPickerOpen]);
-    return (React.createElement("div", { className: "picker-body flex gap-x-5" }, pickerVariant === 'single' ? (React.createElement(SinglePicker, { selectedDate: selectedDate, onDateChange: onDateChange, minDate: minDate, maxDate: maxDate })) : (React.createElement(RangePicker, { selectedDate: selectedDate, onDateChange: onDateChange, minDate: minDate, maxDate: maxDate, onClose: onClose }))));
+    return (React.createElement("div", { className: "picker-body flex gap-x-5" }, pickerVariant === 'single' ? (React.createElement(SinglePicker, { selectedDate: selectedDate, onDateChange: onDateChange, minDate: minDate, maxDate: maxDate })) : (React.createElement(RangePicker, { selectedDate: selectedDate, onDateChange: onDateChange, minDate: minDate, maxDate: maxDate, onClose: onClose, isPickerOpen: isOpen }))));
 };
 
 var monthMap = [
@@ -4000,7 +4064,10 @@ function Modal(_a) {
         modalSize = 'w-[540px]';
     }
     var handleClose = function (e) {
-        if (e && e.target && e.target.id === 'wrapper') {
+        if (onClose &&
+            e &&
+            e.target &&
+            e.target.id === 'wrapper') {
             onClose();
         }
     };
@@ -4011,7 +4078,7 @@ function Modal(_a) {
             React.createElement("div", { className: "bianic-modal flex flex-col gap-[20px] rounded-[5px] bg-white p-[20px] ".concat(modalSize), onClick: onClick },
                 React.createElement("div", { className: "bianic-modal-header flex justify-between" },
                     React.createElement("div", { className: " text-wrap text-left font-humnst777 text-[18px] font-bold leading-[21.85px] text-primary-black" }, title),
-                    React.createElement(Button, { variant: "subtle", radius: "full-rounded", iconLeft: React.createElement(TbX, { size: 14 }), size: "tn", onClick: function () { return onClose(); } })),
+                    onClose && (React.createElement(Button, { variant: "subtle", radius: "full-rounded", iconLeft: React.createElement(TbX, { size: 14 }), size: "tn", onClick: function () { return onClose(); } }))),
                 React.createElement("div", { className: "bianic-modal-content flex w-full flex-col items-start gap-[20px]" }, rest.children))), document.body));
     }
     return null;
@@ -4080,14 +4147,14 @@ function PaginationBar(_a) {
         setShowedPages(newPages);
     }, [startIndex, totalPages]);
     return (React.createElement("div", { className: "flex ".concat(positionConfig[position], " gap-[5px]") },
-        totalPages > 5 && (React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: handlePrevRange, className: showedPages[0] === 1 ? '' : 'cursor-pointer', iconLeft: React.createElement(TbChevronsLeft, { size: iconSize }), disabled: showedPages[0] === 1 })),
+        totalPages > 5 && (React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: handlePrevRange, className: showedPages[0] === 1 ? ' cursor-not-allowed' : 'cursor-pointer', iconLeft: React.createElement(TbChevronsLeft, { size: iconSize }), disabled: showedPages[0] === 1 })),
         React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: function () {
                 handlePageChange(currentPage - 1);
                 if (showedPages[0] === currentPage)
                     setStartIndex(function (old) { return old - 1; });
                 if (!showedPages.includes(currentPage))
                     setStartIndex(currentPage - 2);
-            }, className: currentPage === 1 ? '' : 'cursor-pointer', iconLeft: React.createElement(TbChevronLeft, { size: iconSize }), disabled: currentPage === 1 }),
+            }, className: currentPage === 1 ? 'cursor-not-allowed' : 'cursor-pointer', iconLeft: React.createElement(TbChevronLeft, { size: iconSize }), disabled: currentPage === 1 }),
         showedPages.map(function (page) {
             if (page === currentPage) {
                 return React.createElement(SelectedPage, { key: page, label: page.toString(), size: size });
@@ -4102,9 +4169,9 @@ function PaginationBar(_a) {
                     setStartIndex(function (old) { return old + 1; });
                 if (!showedPages.includes(currentPage))
                     setStartIndex(currentPage - 4);
-            }, className: currentPage === totalPages ? '' : 'cursor-pointer', iconLeft: React.createElement(TbChevronRight, { size: iconSize }), disabled: currentPage === totalPages }),
+            }, className: currentPage === totalPages ? 'cursor-not-allowed' : 'cursor-pointer', iconLeft: React.createElement(TbChevronRight, { size: iconSize }), disabled: currentPage === totalPages }),
         totalPages > 5 && (React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: handleNextRange, className: showedPages[showedPages.length - 1] === totalPages
-                ? ''
+                ? 'cursor-not-allowed'
                 : 'cursor-pointer', iconLeft: React.createElement(TbChevronsRight, { size: iconSize }), disabled: showedPages[showedPages.length - 1] === totalPages }))));
 }