funda-ui 4.7.740 → 4.7.743

package/EventCalendarTimeline/index.js

@@ -4238,10 +4238,45 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
   //================================================================
   // Weekly calendar
   //================================================================
+  var hasInitializedRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+
+  // Helper function to calculate offset from a specific date
+  var calculateWeekOffset = function calculateWeekOffset(targetDate) {
+    var _curDate = typeof targetDate === 'undefined' ? date : targetDate;
+
+    // 1. Get the current selected date (from customTodayDate or user selection)
+    var selected = new Date(_curDate.getFullYear(), _curDate.getMonth(), _curDate.getDate());
+
+    // 2. Get the reference Monday of the "actual current week" (offset 0)
+    var currentWeekDates = (0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.getWeekDatesFromMon)(0);
+    var currentMonday = new Date(currentWeekDates[0]);
+    currentMonday.setHours(0, 0, 0, 0);
+
+    // 3. Calculate the difference in days
+    var diffTime = selected.getTime() - currentMonday.getTime();
+    var diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));
+
+    // 4. Update the week offset automatically
+    var offset = Math.floor(diffDays / 7);
+    setWeekOffset(offset);
+  };
+  // Initialize weekOffset based on customTodayDate instead of default 0
   var _useState39 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),
     _useState40 = _slicedToArray(_useState39, 2),
     weekOffset = _useState40[0],
     setWeekOffset = _useState40[1];
+
+  // Sync weekOffset whenever date changes or mode switches to 'week'
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    if (!hasInitializedRef.current) {
+      var customDateValid = (0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.isValidDate)(customTodayDate);
+      if (customDateValid) {
+        calculateWeekOffset(new Date(customTodayDate));
+        setDate(new Date(customTodayDate));
+        hasInitializedRef.current = true;
+      }
+    }
+  }, [date, appearanceMode, customTodayDate]);
   var handleNextWeek = function handleNextWeek() {
     setWeekOffset(weekOffset + 1);
     return weekOffset + 1;
@@ -5071,7 +5106,8 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     var _mode = e.target.dataset.mode;
     setAppearanceMode(_mode);
 
-    //
+    // The useEffect above will handle the weekOffset calculation 
+    // as soon as appearanceMode becomes 'week'
     onChangeAppearanceMode === null || onChangeAppearanceMode === void 0 ? void 0 : onChangeAppearanceMode(_mode);
   }
   function handleShowWinYear() {
@@ -5161,8 +5197,11 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
               colSpan: 1,
               "data-date": _dateShow,
               "data-day": _dateDayShow,
-              "data-week": weekDay,
-              style: {
+              "data-week": weekDay
+
+              // FIX: In 'week' mode, we don't want a hardcoded minWidth 
+              ,
+              style: appearanceMode === 'week' ? undefined : {
                 minWidth: CELL_MIN_W + 'px'
               },
               onMouseEnter: function onMouseEnter(e) {

package/lib/cjs/EventCalendarTimeline/index.js

@@ -4238,10 +4238,45 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
   //================================================================
   // Weekly calendar
   //================================================================
+  var hasInitializedRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+
+  // Helper function to calculate offset from a specific date
+  var calculateWeekOffset = function calculateWeekOffset(targetDate) {
+    var _curDate = typeof targetDate === 'undefined' ? date : targetDate;
+
+    // 1. Get the current selected date (from customTodayDate or user selection)
+    var selected = new Date(_curDate.getFullYear(), _curDate.getMonth(), _curDate.getDate());
+
+    // 2. Get the reference Monday of the "actual current week" (offset 0)
+    var currentWeekDates = (0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.getWeekDatesFromMon)(0);
+    var currentMonday = new Date(currentWeekDates[0]);
+    currentMonday.setHours(0, 0, 0, 0);
+
+    // 3. Calculate the difference in days
+    var diffTime = selected.getTime() - currentMonday.getTime();
+    var diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));
+
+    // 4. Update the week offset automatically
+    var offset = Math.floor(diffDays / 7);
+    setWeekOffset(offset);
+  };
+  // Initialize weekOffset based on customTodayDate instead of default 0
   var _useState39 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),
     _useState40 = _slicedToArray(_useState39, 2),
     weekOffset = _useState40[0],
     setWeekOffset = _useState40[1];
+
+  // Sync weekOffset whenever date changes or mode switches to 'week'
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    if (!hasInitializedRef.current) {
+      var customDateValid = (0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.isValidDate)(customTodayDate);
+      if (customDateValid) {
+        calculateWeekOffset(new Date(customTodayDate));
+        setDate(new Date(customTodayDate));
+        hasInitializedRef.current = true;
+      }
+    }
+  }, [date, appearanceMode, customTodayDate]);
   var handleNextWeek = function handleNextWeek() {
     setWeekOffset(weekOffset + 1);
     return weekOffset + 1;
@@ -5071,7 +5106,8 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     var _mode = e.target.dataset.mode;
     setAppearanceMode(_mode);
 
-    //
+    // The useEffect above will handle the weekOffset calculation 
+    // as soon as appearanceMode becomes 'week'
     onChangeAppearanceMode === null || onChangeAppearanceMode === void 0 ? void 0 : onChangeAppearanceMode(_mode);
   }
   function handleShowWinYear() {
@@ -5161,8 +5197,11 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
               colSpan: 1,
               "data-date": _dateShow,
               "data-day": _dateDayShow,
-              "data-week": weekDay,
-              style: {
+              "data-week": weekDay
+
+              // FIX: In 'week' mode, we don't want a hardcoded minWidth 
+              ,
+              style: appearanceMode === 'week' ? undefined : {
                 minWidth: CELL_MIN_W + 'px'
               },
               onMouseEnter: function onMouseEnter(e) {

package/lib/esm/EventCalendarTimeline/index.tsx

@@ -14,7 +14,6 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 import getOs from 'funda-utils//dist/cjs/os';
 
 
-
 export interface EventsValueConfig {
     id: string | number;
     date: string,
@@ -324,6 +323,8 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         return tableCellMinWidth;
     }, [tableCellMinWidth, appearanceMode, headerShowWeek]);
 
+    
+
     const findMondayAndTruncate = (dates: string[]) => {
         const _res = dates.map((s: string) => new Date(s));
         // Find the first Monday in the sequence
@@ -389,7 +390,45 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     //================================================================
     // Weekly calendar
     //================================================================
+    const hasInitializedRef = useRef<boolean>(false);
+
+    // Helper function to calculate offset from a specific date
+    const calculateWeekOffset = (targetDate?: Date) => {
+        const _curDate = typeof targetDate === 'undefined' ? date : targetDate;
+
+        // 1. Get the current selected date (from customTodayDate or user selection)
+        const selected = new Date(_curDate.getFullYear(), _curDate.getMonth(), _curDate.getDate());
+        
+        // 2. Get the reference Monday of the "actual current week" (offset 0)
+        const currentWeekDates = getWeekDatesFromMon(0);
+        const currentMonday = new Date(currentWeekDates[0]);
+        currentMonday.setHours(0, 0, 0, 0);
+
+        // 3. Calculate the difference in days
+        const diffTime = selected.getTime() - currentMonday.getTime();
+        const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));
+
+        // 4. Update the week offset automatically
+        const offset = Math.floor(diffDays / 7);
+        setWeekOffset(offset);
+    }
+    // Initialize weekOffset based on customTodayDate instead of default 0
     const [weekOffset, setWeekOffset] = useState<number>(0);
+
+    // Sync weekOffset whenever date changes or mode switches to 'week'
+    useEffect(() => {
+        if (!hasInitializedRef.current) {
+            const customDateValid = isValidDate(customTodayDate as never);
+            if (customDateValid) {
+                calculateWeekOffset(new Date(customTodayDate as string));
+                setDate(new Date(customTodayDate as string));
+                hasInitializedRef.current = true;
+            }
+        } 
+    }, [date, appearanceMode, customTodayDate]);
+
+
+
     const handleNextWeek = () => {
         setWeekOffset(weekOffset + 1);
         return weekOffset + 1;
@@ -1169,7 +1208,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
 
     }
-    function handleDayChange(e: React.MouseEvent, currentDay: number) {
+    function handleDayChange(e: React.MouseEvent | null, currentDay: number) {
         // Avoid triggering a full table re-render when the clicked cell is already
         // the active day; this becomes expensive with large datasets.
         if (
@@ -1260,14 +1299,14 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     function handleAppearanceChange(e: React.MouseEvent) {
         const _mode = (e.target as any).dataset.mode;
         setAppearanceMode(_mode);
-
-        //
+        
+        // The useEffect above will handle the weekOffset calculation 
+        // as soon as appearanceMode becomes 'week'
         onChangeAppearanceMode?.(_mode);
     }
 
 
 
-
     function handleShowWinYear() {
         setWinYear((prevState: boolean) => !prevState);
     }
@@ -1356,7 +1395,9 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                             data-date={_dateShow}
                             data-day={_dateDayShow}
                             data-week={weekDay}
-                            style={{ minWidth: CELL_MIN_W + 'px' }}
+
+                            // FIX: In 'week' mode, we don't want a hardcoded minWidth 
+                            style={appearanceMode === 'week' ? undefined : { minWidth: CELL_MIN_W + 'px' }}  
                             onMouseEnter={(e: React.MouseEvent) => {
                                 onCellMouseEnter?.(e);
                             }}
@@ -2242,6 +2283,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     }
 
+
     // Dual RAF survival test
     /*
         A single RAF only guarantees "moving to the next frame." 

package/package.json

@@ -1 +1 @@
-{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.740","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}
+{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.743","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}