trotl-filter 1.0.7 → 1.0.9

package/dist/index.esm.js

@@ -8801,6 +8801,7 @@ function DateTimeInput({
   className = "",
   style = {},
   predefinedRanges = ["today", "yesterday"],
+  startWith = "sunday",
   ...rest
 }) {
   const paramKey = pushUrlParamObj || null;
@@ -8999,8 +9000,12 @@ function DateTimeInput({
   // Build calendar days (6 weeks grid)
   const buildDays = () => {
     const startOfMonth = new Date(monthCursor.getFullYear(), monthCursor.getMonth(), 1);
-    const dayOfWeek = startOfMonth.getDay(); // 0 Sun ... 6 Sat
-    // We start at Sunday of the week containing the 1st
+    let dayOfWeek = startOfMonth.getDay(); // 0 Sun ... 6 Sat
+    // Adjust for Monday start
+    if (startWith === "monday") {
+      dayOfWeek = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+    }
+    // We start at the first day of the week containing the 1st
     const firstGridDate = new Date(startOfMonth);
     firstGridDate.setDate(startOfMonth.getDate() - dayOfWeek);
     const days = [];
@@ -9237,7 +9242,7 @@ function DateTimeInput({
       marginBottom: 4,
       opacity: 0.8
     }
-  }, ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(d => /*#__PURE__*/React__default.createElement("div", {
+  }, (startWith === "monday" ? ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']).map(d => /*#__PURE__*/React__default.createElement("div", {
     key: d,
     style: {
       textAlign: 'center'
@@ -9349,6 +9354,7 @@ DateTimeInput.propTypes = {
  *   onChange: (startDate, endDate) => void
  *   time: boolean - if true, show time selectors
  *   timeStart, timeEnd: default times for start/end
+ *   startWith: "sunday" | "monday" - first day of week
  */
 function CalendarRangePicker({
   startDate,
@@ -9356,7 +9362,8 @@ function CalendarRangePicker({
   onChange,
   time = false,
   timeStart = "00:00",
-  timeEnd = "23:59"
+  timeEnd = "23:59",
+  startWith = "sunday"
 }) {
   // Current view months (show 2 months)
   const [leftMonth, setLeftMonth] = useState(() => {
@@ -9434,7 +9441,11 @@ function CalendarRangePicker({
     const monthIdx = month.getMonth();
     const firstDay = new Date(year, monthIdx, 1);
     const lastDay = new Date(year, monthIdx + 1, 0);
-    const startWeekday = firstDay.getDay(); // 0 = Sunday
+    let startWeekday = firstDay.getDay(); // 0 = Sunday
+    // Adjust for Monday start
+    if (startWith === "monday") {
+      startWeekday = startWeekday === 0 ? 6 : startWeekday - 1;
+    }
     const daysInMonth = lastDay.getDate();
     const days = [];
     // Padding days from previous month
@@ -9481,7 +9492,7 @@ function CalendarRangePicker({
         gridTemplateColumns: "repeat(7, 1fr)",
         gap: 2
       }
-    }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(day => /*#__PURE__*/React__default.createElement("div", {
+    }, (startWith === "monday" ? ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map(day => /*#__PURE__*/React__default.createElement("div", {
       key: day,
       style: {
         textAlign: "center",
@@ -9585,7 +9596,8 @@ CalendarRangePicker.propTypes = {
   onChange: PropTypes.func.isRequired,
   time: PropTypes.bool,
   timeStart: PropTypes.string,
-  timeEnd: PropTypes.string
+  timeEnd: PropTypes.string,
+  startWith: PropTypes.oneOf(["sunday", "monday"])
 };
 
 /**
@@ -9785,6 +9797,7 @@ function RangePicker({
   min,
   max,
   predefinedRanges = PREDEFINED_RANGES,
+  startWith = "sunday",
   ...rest
 }) {
   const paramKey = pushUrlParamObj || null;
@@ -9940,6 +9953,28 @@ function RangePicker({
     const newUrl = window.location.pathname + (params.toString() ? `?${params.toString()}` : "");
     window.history.replaceState({}, "", newUrl);
   }, [paramKey]);
+
+  // Extract HH:mm part from the current range value
+  const getTimeValue = useCallback(which => {
+    const val = which === 'start' ? range[0] : range[1];
+    if (val && val.includes('T')) {
+      return val.split('T')[1].slice(0, 5);
+    }
+    return which === 'start' ? timeStart || "" : timeEnd || "";
+  }, [range, timeStart, timeEnd]);
+
+  // Update time while keeping the selected date
+  const handleTimeChange = which => e => {
+    const newTime = e.target.value;
+    const currentVal = which === 'start' ? range[0] : range[1];
+    const datePart = currentVal && currentVal.split('T')[0] || formatDate(new Date(), false);
+    const newVal = `${datePart}T${newTime}`;
+    const newRange = which === 'start' ? [newVal, range[1]] : [range[0], newVal];
+    if (!controlledValue) setRange(newRange);
+    setUrlParam(newRange);
+    setSelectedRange("");
+    onChange?.(newRange);
+  };
   const handleClear = () => {
     if (!controlledValue) setRange(["", ""]);
     setUrlParam(["", ""]);
@@ -10118,8 +10153,53 @@ function RangePicker({
     },
     time: time,
     timeStart: timeStart,
-    timeEnd: timeEnd
-  }), processedRanges && processedRanges.length > 0 && /*#__PURE__*/React__default.createElement("div", {
+    timeEnd: timeEnd,
+    startWith: startWith
+  }), time && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '1fr 1fr',
+      columnGap: 16,
+      rowGap: 6,
+      marginTop: 16,
+      width: '99%',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      fontSize: 12,
+      color: '#555',
+      marginBottom: 6
+    }
+  }, "Start time"), /*#__PURE__*/React__default.createElement("input", {
+    type: "time",
+    value: getTimeValue('start'),
+    onChange: handleTimeChange('start'),
+    style: {
+      width: '100%',
+      padding: '4px 6px',
+      border: '1px solid #d1d5db',
+      borderRadius: 2,
+      fontSize: 12
+    }
+  })), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      fontSize: 12,
+      color: '#555',
+      marginBottom: 6
+    }
+  }, "End time"), /*#__PURE__*/React__default.createElement("input", {
+    type: "time",
+    value: getTimeValue('end'),
+    onChange: handleTimeChange('end'),
+    style: {
+      width: '100%',
+      padding: '4px 6px',
+      border: '1px solid #d1d5db',
+      borderRadius: 2,
+      fontSize: 12
+    }
+  }))), processedRanges && processedRanges.length > 0 && /*#__PURE__*/React__default.createElement("div", {
     style: {
       marginTop: 12,
       paddingTop: 12,
@@ -10206,6 +10286,7 @@ RangePicker.propTypes = {
   style: PropTypes.object,
   min: PropTypes.string,
   max: PropTypes.string,
+  startWith: PropTypes.oneOf(["sunday", "monday"]),
   predefinedRanges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string,
   // e.g., "today", "yesterday", "lastweek"
   PropTypes.number,