@popsure/dirty-swan 0.30.1 → 0.30.2

package/dist/cjs/index.js

@@ -2179,6 +2179,23 @@ styleInject(css_248z$s);
 
 var calendarIcon = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2225%22%20viewBox%3D%220%200%2024%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%204.46118H5C3.89543%204.46118%203%205.35661%203%206.46118V20.4612C3%2021.5658%203.89543%2022.4612%205%2022.4612H19C20.1046%2022.4612%2021%2021.5658%2021%2020.4612V6.46118C21%205.35661%2020.1046%204.46118%2019%204.46118Z%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16%202.46118V6.46118%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%202.46118V6.46118%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%2010.4612H21%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
 
+var useOnClickOutside = function (ref, callback) {
+    require$$0.useEffect(function () {
+        var listener = function (event) {
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            callback(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return function () {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, callback]);
+};
+
 dayjs.extend(localeData);
 var COLLECTABLE_DATE_FORMAT = 'YYYY-MM-DD';
 /*
@@ -2228,6 +2245,7 @@ var DateSelector = function (_a) {
     var availableMonths = localizedMonthsShort;
     var _f = require$$0.useState(calendarDateValue !== null && calendarDateValue !== void 0 ? calendarDateValue : {}), date = _f[0], setDate = _f[1];
     var _g = require$$0.useState(false), openCalendar = _g[0], setOpenCalendar = _g[1];
+    var calendarContainerRef = require$$0.useRef(null);
     var calendarDefaultDate = dayjs().year() >= yearBoundaries.min && dayjs().year() <= yearBoundaries.max
         ? dayjs().toDate()
         : dayjs().set('year', yearBoundaries.max).toDate();
@@ -2240,6 +2258,7 @@ var DateSelector = function (_a) {
     var dateCalendarToMonth = dayjs(String(yearBoundaries.max))
         .endOf('year')
         .toDate();
+    useOnClickOutside(calendarContainerRef, function () { return setOpenCalendar(false); });
     require$$0.useEffect(function () {
         if (calendarDateValue) {
             setDate(calendarDateValue);
@@ -2288,7 +2307,7 @@ var DateSelector = function (_a) {
                             handleOnChange('year', parseInt(e.target.value, 10));
                         } }, { children: [jsxRuntime.jsx("option", __assign({ value: "", disabled: true }, { children: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.year) || 'Year' }), void 0),
                             availableYears.map(function (year) { return (jsxRuntime.jsx("option", __assign({ value: year }, { children: year }), year)); })] }), void 0)] }), void 0),
-            displayCalendar && (jsxRuntime.jsxs("div", __assign({ className: styles$r['date-calendar-container'] }, { children: [jsxRuntime.jsx("img", { className: "c-pointer", src: calendarIcon, alt: "calendar", onClick: function () { return setOpenCalendar(!openCalendar); } }, void 0),
+            displayCalendar && (jsxRuntime.jsxs("div", __assign({ className: styles$r['date-calendar-container'], ref: calendarContainerRef }, { children: [jsxRuntime.jsx("img", { className: "c-pointer", src: calendarIcon, alt: "calendar", onClick: function () { return setOpenCalendar(!openCalendar); } }, void 0),
                     openCalendar && (jsxRuntime.jsx(DayPicker, { month: selectedDateInDateType, showOutsideDays: true, fromMonth: dateCalendarFromMonth, toMonth: dateCalendarToMonth, selectedDays: selectedDateInDateType, onDayClick: function (date) {
                             if (dayjs(date).isAfter(dateCalendarFromMonth) ||
                                 dayjs(date).isBefore(dateCalendarToMonth)) {