@moving-walls/design-system 1.0.24 → 2.0.1

package/dist/components/ui/DateRangePicker.d.ts

@@ -20,6 +20,10 @@ interface DateRangePickerProps {
         range: DateRange;
     }>;
     align?: 'left' | 'right';
+    enableApplyButton?: boolean;
+    applyButtonText?: string;
+    enableCancelButton?: boolean;
+    cancelButtonText?: string;
 }
-export declare function DateRangePicker({ value, onChange, placeholder, disabled, required, clearable, minDate, maxDate, numberOfMonths, className, format, presets, align }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
-export default DateRangePicker;
+export declare function DateRangePicker({ value, onChange, placeholder, disabled, required, clearable, minDate, maxDate, selectsRange, numberOfMonths, className, format, presets, align, enableApplyButton, applyButtonText, enableCancelButton, cancelButtonText }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.esm.js

@@ -36476,8 +36476,9 @@ function DateRangePicker(_ref3) {
     var _ref3$clearable = _ref3.clearable,
     clearable = _ref3$clearable === void 0 ? true : _ref3$clearable,
     minDate = _ref3.minDate,
-    maxDate = _ref3.maxDate,
-    _ref3$numberOfMonths = _ref3.numberOfMonths,
+    maxDate = _ref3.maxDate;
+    _ref3.selectsRange;
+    var _ref3$numberOfMonths = _ref3.numberOfMonths,
     numberOfMonths = _ref3$numberOfMonths === void 0 ? 1 : _ref3$numberOfMonths,
     className = _ref3.className,
     _ref3$format = _ref3.format,
@@ -36485,7 +36486,15 @@ function DateRangePicker(_ref3) {
     _ref3$presets = _ref3.presets,
     presets = _ref3$presets === void 0 ? defaultPresets$1 : _ref3$presets,
     _ref3$align = _ref3.align,
-    align = _ref3$align === void 0 ? 'left' : _ref3$align;
+    align = _ref3$align === void 0 ? 'left' : _ref3$align,
+    _ref3$enableApplyButt = _ref3.enableApplyButton,
+    enableApplyButton = _ref3$enableApplyButt === void 0 ? false : _ref3$enableApplyButt,
+    _ref3$applyButtonText = _ref3.applyButtonText,
+    applyButtonText = _ref3$applyButtonText === void 0 ? 'Apply' : _ref3$applyButtonText,
+    _ref3$enableCancelBut = _ref3.enableCancelButton,
+    enableCancelButton = _ref3$enableCancelBut === void 0 ? true : _ref3$enableCancelBut,
+    _ref3$cancelButtonTex = _ref3.cancelButtonText,
+    cancelButtonText = _ref3$cancelButtonTex === void 0 ? 'Cancel' : _ref3$cancelButtonTex;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -36497,71 +36506,111 @@ function DateRangePicker(_ref3) {
     _useState4 = _slicedToArray(_useState3, 2),
     selectedRange = _useState4[0],
     setSelectedRange = _useState4[1];
-  var _useState5 = useState(new Date()),
+  var _useState5 = useState(value || {
+      from: null,
+      to: null
+    }),
     _useState6 = _slicedToArray(_useState5, 2),
-    currentMonth = _useState6[0],
-    setCurrentMonth = _useState6[1];
-  var _useState7 = useState(true),
+    pendingRange = _useState6[0],
+    setPendingRange = _useState6[1];
+  var _useState7 = useState(new Date()),
     _useState8 = _slicedToArray(_useState7, 2),
-    selectingStart = _useState8[0],
-    setSelectingStart = _useState8[1];
+    currentMonth = _useState8[0],
+    setCurrentMonth = _useState8[1];
+  var _useState9 = useState(true),
+    _useState0 = _slicedToArray(_useState9, 2),
+    selectingStart = _useState0[0],
+    setSelectingStart = _useState0[1];
   var containerRef = useRef(null);
   useEffect(function () {
     if (value) {
       setSelectedRange(value);
+      setPendingRange(value);
     }
   }, [value]);
   useEffect(function () {
     function handleClickOutside(event) {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
+        // Reset pending to selected when closing without apply
+        setPendingRange(selectedRange);
       }
     }
     document.addEventListener('mousedown', handleClickOutside);
     return function () {
       return document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, []);
+  }, [selectedRange]);
   var handleDateSelect = function handleDateSelect(date) {
     var newRange;
-    if (selectingStart || !selectedRange.from) {
+    if (selectingStart || !pendingRange.from) {
       newRange = {
         from: date,
         to: null
       };
       setSelectingStart(false);
     } else {
-      if (date < selectedRange.from) {
+      if (date < pendingRange.from) {
         newRange = {
           from: date,
-          to: selectedRange.from
+          to: null
         };
-      } else {
+      } else if (date > pendingRange.from) {
         newRange = {
-          from: selectedRange.from,
+          from: pendingRange.from,
           to: date
         };
+        setSelectingStart(true);
+      } else {
+        newRange = {
+          from: date,
+          to: null
+        };
       }
-      setSelectingStart(true);
     }
-    setSelectedRange(newRange);
-    onChange === null || onChange === void 0 ? void 0 : onChange(newRange);
-    if (newRange.from && newRange.to) {
+    // Update pending range, don't call onChange yet
+    setPendingRange(newRange);
+    // Without Apply button, fire onChange immediately when full range selected
+    if (!enableApplyButton && newRange.from && newRange.to) {
+      setSelectedRange(newRange);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newRange);
       setIsOpen(false);
     }
   };
-  var handlePresetSelect = function handlePresetSelect(preset) {
-    setSelectedRange(preset.range);
-    onChange === null || onChange === void 0 ? void 0 : onChange(preset.range);
+  var handleApply = function handleApply() {
+    // Apply pending range and call onChange
+    setSelectedRange(pendingRange);
+    onChange === null || onChange === void 0 ? void 0 : onChange(pendingRange);
     setIsOpen(false);
   };
+  var handleCancel = function handleCancel() {
+    // Cancel: restore original selection, don't call onChange
+    setPendingRange(selectedRange);
+    setIsOpen(false);
+  };
+  var handlePresetSelect = function handlePresetSelect(preset) {
+    setPendingRange(preset.range);
+    // Navigate calendar to show the start month of the preset range
+    if (preset.range.from) {
+      setCurrentMonth(new Date(preset.range.from.getFullYear(), preset.range.from.getMonth(), 1));
+    }
+    setSelectingStart(true);
+    // If Apply button is enabled, keep calendar open so user can confirm
+    if (!enableApplyButton) {
+      setSelectedRange(preset.range);
+      onChange === null || onChange === void 0 ? void 0 : onChange(preset.range);
+      setIsOpen(false);
+    }
+  };
   var handleClear = function handleClear() {
     var clearedRange = {
       from: null,
       to: null
     };
     setSelectedRange(clearedRange);
+    setPendingRange(clearedRange);
     onChange === null || onChange === void 0 ? void 0 : onChange(clearedRange);
+    setIsOpen(false);
   };
   var formatDisplayValue = function formatDisplayValue() {
     if (!selectedRange.from && !selectedRange.to) return placeholder;
@@ -36577,19 +36626,31 @@ function DateRangePicker(_ref3) {
   return jsxs("div", {
     ref: containerRef,
     className: cn$p('relative', className),
-    children: [jsxs("button", {
-      type: "button",
+    children: [jsxs("div", {
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
       onClick: function onClick() {
-        return !disabled && setIsOpen(!isOpen);
+        if (!disabled) {
+          if (!isOpen) setPendingRange(selectedRange);
+          setIsOpen(!isOpen);
+          setSelectingStart(true);
+        }
       },
-      disabled: disabled,
-      className: cn$p('w-full flex items-center justify-between px-3 py-2 text-left', 'border border-mw-neutral-200 dark:border-mw-neutral-600 rounded-md', 'bg-white dark:bg-mw-neutral-800', 'text-mw-neutral-800 dark:text-white', 'hover:border-mw-neutral-300 dark:hover:border-mw-neutral-500', 'focus:outline-none focus:ring-2 focus:ring-mw-primary-500 focus:border-transparent', disabled && 'opacity-50 cursor-not-allowed', !selectedRange.from && !selectedRange.to && 'text-mw-neutral-500 dark:text-mw-neutral-400'),
+      onKeyDown: function onKeyDown(e) {
+        if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+          if (!isOpen) setPendingRange(selectedRange);
+          setIsOpen(!isOpen);
+          setSelectingStart(true);
+        }
+      },
+      className: cn$p('w-full flex items-center justify-between px-3 py-2 text-left cursor-pointer', 'border border-mw-neutral-200 dark:border-mw-neutral-600 rounded-md', 'bg-white dark:bg-mw-neutral-800', 'text-mw-neutral-800 dark:text-white', 'hover:border-mw-neutral-300 dark:hover:border-mw-neutral-500', 'focus:outline-none focus:ring-2 focus:ring-mw-primary-500 focus:border-transparent', disabled && 'opacity-50 cursor-not-allowed pointer-events-none', !selectedRange.from && !selectedRange.to && 'text-mw-neutral-500 dark:text-mw-neutral-400'),
       children: [jsx("span", {
         className: "truncate",
         children: formatDisplayValue()
       }), jsxs("div", {
         className: "flex items-center gap-1 ml-2",
         children: [clearable && (selectedRange.from || selectedRange.to) && jsx("button", {
+          type: "button",
           onClick: function onClick(e) {
             e.stopPropagation();
             handleClear();
@@ -36615,6 +36676,7 @@ function DateRangePicker(_ref3) {
             className: "space-y-0.5",
             children: presets.map(function (preset, index) {
               return jsx("button", {
+                type: "button",
                 onClick: function onClick() {
                   return handlePresetSelect(preset);
                 },
@@ -36627,7 +36689,7 @@ function DateRangePicker(_ref3) {
           className: "flex",
           children: [jsx(CalendarMonth, {
             currentMonth: currentMonth,
-            selectedRange: selectedRange,
+            selectedRange: pendingRange,
             onDateSelect: handleDateSelect,
             onMonthChange: setCurrentMonth,
             minDate: minDate,
@@ -36635,7 +36697,7 @@ function DateRangePicker(_ref3) {
             selectingStart: selectingStart
           }), numberOfMonths === 2 && jsx(CalendarMonth, {
             currentMonth: new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1),
-            selectedRange: selectedRange,
+            selectedRange: pendingRange,
             onDateSelect: handleDateSelect,
             onMonthChange: function onMonthChange(month) {
               var prevMonth = new Date(month);
@@ -36654,19 +36716,17 @@ function DateRangePicker(_ref3) {
           children: selectingStart ? 'Select start date' : 'Select end date'
         }), jsxs("div", {
           className: "flex gap-2 items-center",
-          children: [jsx("button", {
-            onClick: function onClick() {
-              return setIsOpen(false);
-            },
-            className: "px-2.5 py-1 text-xs text-mw-neutral-600 dark:text-mw-neutral-400 hover:text-mw-neutral-900 dark:hover:text-white",
-            children: "Cancel"
-          }), jsx("button", {
-            onClick: function onClick() {
-              return setIsOpen(false);
-            },
-            disabled: !selectedRange.from,
-            className: "px-3 py-1 text-xs bg-mw-primary-500 text-white rounded hover:bg-mw-primary-600 disabled:opacity-50 disabled:cursor-not-allowed",
-            children: "Apply"
+          children: [enableCancelButton && jsx("button", {
+            type: "button",
+            onClick: handleCancel,
+            className: "px-3 py-1.5 text-xs text-mw-neutral-600 dark:text-mw-neutral-400 hover:text-mw-neutral-900 dark:hover:text-white border border-mw-neutral-200 dark:border-mw-neutral-600 rounded",
+            children: cancelButtonText
+          }), enableApplyButton && jsx("button", {
+            type: "button",
+            onClick: handleApply,
+            disabled: !pendingRange.from || !pendingRange.to,
+            className: "px-3 py-1.5 text-xs bg-mw-primary-500 text-white rounded hover:bg-mw-primary-600 disabled:opacity-50 disabled:cursor-not-allowed",
+            children: applyButtonText
           })]
         })]
       })]