@popsure/dirty-swan 0.30.1 → 0.30.2

package/dist/cjs/lib/components/dateSelector/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/lib/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useOnClickOutside: (ref: RefObject<HTMLDivElement | null>, callback: (e: Event) => void) => void;

package/dist/cjs/lib/scss/public/demo.d.ts

@@ -1 +1,2 @@
 export declare const Colors: () => JSX.Element;
+export declare const BoxShadows: () => JSX.Element;

package/dist/esm/components/dateSelector/index.js

@@ -1,6 +1,6 @@
 import { _ as __assign } from '../../tslib.es6-5bc94358.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useEffect } from 'react';
+import React__default, { useEffect, useState, useRef } from 'react';
 import { c as commonjsGlobal, a as getDefaultExportFromCjs } from '../../_commonjsHelpers-e7f67fd8.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 
@@ -2033,6 +2033,23 @@ styleInject(css_248z);
 
 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) {
+    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';
 /*
@@ -2082,6 +2099,7 @@ var DateSelector = function (_a) {
     var availableMonths = localizedMonthsShort;
     var _f = useState(calendarDateValue !== null && calendarDateValue !== void 0 ? calendarDateValue : {}), date = _f[0], setDate = _f[1];
     var _g = useState(false), openCalendar = _g[0], setOpenCalendar = _g[1];
+    var calendarContainerRef = useRef(null);
     var calendarDefaultDate = dayjs().year() >= yearBoundaries.min && dayjs().year() <= yearBoundaries.max
         ? dayjs().toDate()
         : dayjs().set('year', yearBoundaries.max).toDate();
@@ -2094,6 +2112,7 @@ var DateSelector = function (_a) {
     var dateCalendarToMonth = dayjs(String(yearBoundaries.max))
         .endOf('year')
         .toDate();
+    useOnClickOutside(calendarContainerRef, function () { return setOpenCalendar(false); });
     useEffect(function () {
         if (calendarDateValue) {
             setDate(calendarDateValue);
@@ -2142,7 +2161,7 @@ var DateSelector = function (_a) {
                             handleOnChange('year', parseInt(e.target.value, 10));
                         } }, { children: [jsx("option", __assign({ value: "", disabled: true }, { children: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.year) || 'Year' }), void 0),
                             availableYears.map(function (year) { return (jsx("option", __assign({ value: year }, { children: year }), year)); })] }), void 0)] }), void 0),
-            displayCalendar && (jsxs("div", __assign({ className: styles['date-calendar-container'] }, { children: [jsx("img", { className: "c-pointer", src: calendarIcon, alt: "calendar", onClick: function () { return setOpenCalendar(!openCalendar); } }, void 0),
+            displayCalendar && (jsxs("div", __assign({ className: styles['date-calendar-container'], ref: calendarContainerRef }, { children: [jsx("img", { className: "c-pointer", src: calendarIcon, alt: "calendar", onClick: function () { return setOpenCalendar(!openCalendar); } }, void 0),
                     openCalendar && (jsx(DayPicker, { month: selectedDateInDateType, showOutsideDays: true, fromMonth: dateCalendarFromMonth, toMonth: dateCalendarToMonth, selectedDays: selectedDateInDateType, onDayClick: function (date) {
                             if (dayjs(date).isAfter(dateCalendarFromMonth) ||
                                 dayjs(date).isBefore(dateCalendarToMonth)) {