@popsure/dirty-swan 0.30.1 → 0.30.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/cjs/index.js +22 -3
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/lib/components/dateSelector/index.test.d.ts +1 -0
  4. package/dist/cjs/lib/hooks/useOnClickOutside.d.ts +2 -0
  5. package/dist/cjs/lib/scss/public/demo.d.ts +1 -0
  6. package/dist/esm/components/comparisonTable/components/TableInfoButton/index.js +2 -2
  7. package/dist/esm/components/comparisonTable/components/TableInfoButton/index.js.map +1 -1
  8. package/dist/esm/components/dateSelector/index.js +21 -2
  9. package/dist/esm/components/dateSelector/index.js.map +1 -1
  10. package/dist/esm/components/dateSelector/index.test.js +65 -0
  11. package/dist/esm/components/dateSelector/index.test.js.map +1 -0
  12. package/dist/esm/lib/components/dateSelector/index.test.d.ts +1 -0
  13. package/dist/esm/lib/hooks/useOnClickOutside.d.ts +2 -0
  14. package/dist/esm/lib/scss/public/demo.d.ts +1 -0
  15. package/dist/esm/scss/public/demo.js +7 -1
  16. package/dist/esm/scss/public/demo.js.map +1 -1
  17. package/dist/index.css +19 -3
  18. package/dist/index.css.map +1 -1
  19. package/dist/lib/scss/index.scss +2 -0
  20. package/dist/lib/scss/private/components/_buttons.scss +6 -3
  21. package/dist/lib/scss/public/demo.tsx +31 -0
  22. package/dist/lib/scss/public/shadows.scss +20 -0
  23. package/dist/shadows.scss +1 -0
  24. package/package.json +1 -1
  25. package/src/lib/components/comparisonTable/components/TableInfoButton/index.tsx +1 -0
  26. package/src/lib/components/comparisonTable/components/TableInfoButton/style.module.scss +5 -0
  27. package/src/lib/components/dateSelector/index.test.tsx +53 -0
  28. package/src/lib/components/dateSelector/index.tsx +10 -2
  29. package/src/lib/hooks/useOnClickOutside.ts +21 -0
  30. package/src/lib/scss/index.scss +2 -0
  31. package/src/lib/scss/private/components/_buttons.scss +6 -3
  32. package/src/lib/scss/public/demo.tsx +31 -0
  33. package/src/lib/scss/public/shadows.scss +20 -0
  34. package/src/lib/scss/public/shadows.stories.mdx +44 -0
  35. package/src/shadows.scss +1 -0
@@ -0,0 +1,2 @@
1
+ import { RefObject } from 'react';
2
+ export declare const useOnClickOutside: (ref: RefObject<HTMLDivElement | null>, callback: (e: Event) => void) => void;
@@ -1 +1,2 @@
1
1
  export declare const Colors: () => JSX.Element;
2
+ export declare const BoxShadows: () => JSX.Element;
@@ -2,13 +2,13 @@ import { _ as __assign } from '../../../../tslib.es6-5bc94358.js';
2
2
  import { jsx, jsxs } from 'react/jsx-runtime';
3
3
  import { s as styleInject } from '../../../../style-inject.es-1f59c1d0.js';
4
4
 
5
- var css_248z = ".style-module_button__3TkNT {\n padding: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n vertical-align: bottom;\n width: 24px;\n height: 24px;\n transition: all 0.3s ease;\n}\n.style-module_button__3TkNT:hover, .style-module_button__3TkNT:focus {\n background-color: #f7f7ff;\n}\n.style-module_button__3TkNT:hover svg, .style-module_button__3TkNT:focus svg {\n fill: #b1b0f5;\n}\n.style-module_button__3TkNT svg {\n fill: #e6e5ff;\n transition: all 0.3s ease;\n}";
5
+ var css_248z = ".style-module_button__3TkNT {\n padding: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n vertical-align: bottom;\n border-radius: 12px;\n width: 24px;\n height: 24px;\n transition: all 0.3s ease;\n}\n.style-module_button__3TkNT:hover, .style-module_button__3TkNT:focus {\n background-color: #f7f7ff;\n}\n.style-module_button__3TkNT:hover svg, .style-module_button__3TkNT:focus svg {\n fill: #b1b0f5;\n}\n.style-module_button__3TkNT svg {\n fill: #e6e5ff;\n transition: all 0.3s ease;\n}\n.style-module_button__3TkNT:focus-visible {\n box-shadow: 0 0 0 2px #8e8cee;\n}";
6
6
  var styles = {"button":"style-module_button__3TkNT"};
7
7
  styleInject(css_248z);
8
8
 
9
9
  var TableInfoButton = function (_a) {
10
10
  var onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b;
11
- return (jsx("span", __assign({ role: "button", className: "p-btn--secondary " + styles.button + " " + className, onClick: onClick }, { children: jsxs("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2.66667C5.94991 2.66667 2.66667 5.94991 2.66667 10C2.66667 14.0501 5.94991 17.3333 10 17.3333C14.0501 17.3333 17.3333 14.0501 17.3333 10C17.3333 5.94991 14.0501 2.66667 10 2.66667ZM0.666667 10C0.666667 4.84534 4.84534 0.666667 10 0.666667C15.1547 0.666667 19.3333 4.84534 19.3333 10C19.3333 15.1547 15.1547 19.3333 10 19.3333C4.84534 19.3333 0.666667 15.1547 0.666667 10Z" }, void 0),
11
+ return (jsx("span", __assign({ role: "button", className: "p-btn--secondary " + styles.button + " " + className, onClick: onClick, tabIndex: 0 }, { children: jsxs("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2.66667C5.94991 2.66667 2.66667 5.94991 2.66667 10C2.66667 14.0501 5.94991 17.3333 10 17.3333C14.0501 17.3333 17.3333 14.0501 17.3333 10C17.3333 5.94991 14.0501 2.66667 10 2.66667ZM0.666667 10C0.666667 4.84534 4.84534 0.666667 10 0.666667C15.1547 0.666667 19.3333 4.84534 19.3333 10C19.3333 15.1547 15.1547 19.3333 10 19.3333C4.84534 19.3333 0.666667 15.1547 0.666667 10Z" }, void 0),
12
12
  jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 9C10.5523 9 11 9.44772 11 10V13.3333C11 13.8856 10.5523 14.3333 10 14.3333C9.44772 14.3333 9 13.8856 9 13.3333V10C9 9.44772 9.44772 9 10 9Z" }, void 0),
13
13
  jsx("path", { d: "M10.8333 6.66667C10.8333 7.1269 10.4602 7.5 10 7.5C9.53976 7.5 9.16667 7.1269 9.16667 6.66667C9.16667 6.20643 9.53976 5.83333 10 5.83333C10.4602 5.83333 10.8333 6.20643 10.8333 6.66667Z" }, void 0)] }), void 0) }), void 0));
14
14
  };
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableInfoButton/index.tsx"],"sourcesContent":["import styles from './style.module.scss';\n\nconst TableInfoButton = ({\n onClick,\n className = '',\n}: {\n onClick: () => void;\n className?: string;\n}) => (\n <span\n role=\"button\"\n className={`p-btn--secondary ${styles.button} ${className}`}\n onClick={onClick}\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M10 2.66667C5.94991 2.66667 2.66667 5.94991 2.66667 10C2.66667 14.0501 5.94991 17.3333 10 17.3333C14.0501 17.3333 17.3333 14.0501 17.3333 10C17.3333 5.94991 14.0501 2.66667 10 2.66667ZM0.666667 10C0.666667 4.84534 4.84534 0.666667 10 0.666667C15.1547 0.666667 19.3333 4.84534 19.3333 10C19.3333 15.1547 15.1547 19.3333 10 19.3333C4.84534 19.3333 0.666667 15.1547 0.666667 10Z\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M10 9C10.5523 9 11 9.44772 11 10V13.3333C11 13.8856 10.5523 14.3333 10 14.3333C9.44772 14.3333 9 13.8856 9 13.3333V10C9 9.44772 9.44772 9 10 9Z\"\n />\n <path d=\"M10.8333 6.66667C10.8333 7.1269 10.4602 7.5 10 7.5C9.53976 7.5 9.16667 7.1269 9.16667 6.66667C9.16667 6.20643 9.53976 5.83333 10 5.83333C10.4602 5.83333 10.8333 6.20643 10.8333 6.66667Z\" />\n </svg>\n </span>\n);\n\nexport default TableInfoButton;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;IAEM,eAAe,GAAG,UAAC,EAMxB;QALC,OAAO,aAAA,EACP,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA;IAIV,QACJA,uBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,sBAAoB,MAAM,CAAC,MAAM,SAAI,SAAW,EAC3D,OAAO,EAAE,OAAO,gBAEhBC,uBACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,iBAElCD,cACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yXAAyX,WAC3X;gBACFA,cACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,iJAAiJ,WACnJ;gBACFA,cAAM,CAAC,EAAC,2LAA2L,WAAG,aAClM,YACD;AAzBH;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../../../src/lib/components/comparisonTable/components/TableInfoButton/index.tsx"],"sourcesContent":["import styles from './style.module.scss';\n\nconst TableInfoButton = ({\n onClick,\n className = '',\n}: {\n onClick: () => void;\n className?: string;\n}) => (\n <span\n role=\"button\"\n className={`p-btn--secondary ${styles.button} ${className}`}\n onClick={onClick}\n tabIndex={0}\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M10 2.66667C5.94991 2.66667 2.66667 5.94991 2.66667 10C2.66667 14.0501 5.94991 17.3333 10 17.3333C14.0501 17.3333 17.3333 14.0501 17.3333 10C17.3333 5.94991 14.0501 2.66667 10 2.66667ZM0.666667 10C0.666667 4.84534 4.84534 0.666667 10 0.666667C15.1547 0.666667 19.3333 4.84534 19.3333 10C19.3333 15.1547 15.1547 19.3333 10 19.3333C4.84534 19.3333 0.666667 15.1547 0.666667 10Z\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M10 9C10.5523 9 11 9.44772 11 10V13.3333C11 13.8856 10.5523 14.3333 10 14.3333C9.44772 14.3333 9 13.8856 9 13.3333V10C9 9.44772 9.44772 9 10 9Z\"\n />\n <path d=\"M10.8333 6.66667C10.8333 7.1269 10.4602 7.5 10 7.5C9.53976 7.5 9.16667 7.1269 9.16667 6.66667C9.16667 6.20643 9.53976 5.83333 10 5.83333C10.4602 5.83333 10.8333 6.20643 10.8333 6.66667Z\" />\n </svg>\n </span>\n);\n\nexport default TableInfoButton;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;IAEM,eAAe,GAAG,UAAC,EAMxB;QALC,OAAO,aAAA,EACP,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA;IAIV,QACJA,uBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,sBAAoB,MAAM,CAAC,MAAM,SAAI,SAAW,EAC3D,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,gBAEXC,uBACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,iBAElCD,cACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yXAAyX,WAC3X;gBACFA,cACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,iJAAiJ,WACnJ;gBACFA,cAAM,CAAC,EAAC,2LAA2L,WAAG,aAClM,YACD;AA1BH;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { _ as __assign } from '../../tslib.es6-5bc94358.js';
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
- import React__default, { useState, useEffect } from 'react';
3
+ import React__default, { useEffect, useState, useRef } from 'react';
4
4
  import { c as commonjsGlobal, a as getDefaultExportFromCjs } from '../../_commonjsHelpers-e7f67fd8.js';
5
5
  import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
6
6
 
@@ -2033,6 +2033,23 @@ styleInject(css_248z);
2033
2033
 
2034
2034
  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";
2035
2035
 
2036
+ var useOnClickOutside = function (ref, callback) {
2037
+ useEffect(function () {
2038
+ var listener = function (event) {
2039
+ if (!ref.current || ref.current.contains(event.target)) {
2040
+ return;
2041
+ }
2042
+ callback(event);
2043
+ };
2044
+ document.addEventListener('mousedown', listener);
2045
+ document.addEventListener('touchstart', listener);
2046
+ return function () {
2047
+ document.removeEventListener('mousedown', listener);
2048
+ document.removeEventListener('touchstart', listener);
2049
+ };
2050
+ }, [ref, callback]);
2051
+ };
2052
+
2036
2053
  dayjs.extend(localeData);
2037
2054
  var COLLECTABLE_DATE_FORMAT = 'YYYY-MM-DD';
2038
2055
  /*
@@ -2082,6 +2099,7 @@ var DateSelector = function (_a) {
2082
2099
  var availableMonths = localizedMonthsShort;
2083
2100
  var _f = useState(calendarDateValue !== null && calendarDateValue !== void 0 ? calendarDateValue : {}), date = _f[0], setDate = _f[1];
2084
2101
  var _g = useState(false), openCalendar = _g[0], setOpenCalendar = _g[1];
2102
+ var calendarContainerRef = useRef(null);
2085
2103
  var calendarDefaultDate = dayjs().year() >= yearBoundaries.min && dayjs().year() <= yearBoundaries.max
2086
2104
  ? dayjs().toDate()
2087
2105
  : dayjs().set('year', yearBoundaries.max).toDate();
@@ -2094,6 +2112,7 @@ var DateSelector = function (_a) {
2094
2112
  var dateCalendarToMonth = dayjs(String(yearBoundaries.max))
2095
2113
  .endOf('year')
2096
2114
  .toDate();
2115
+ useOnClickOutside(calendarContainerRef, function () { return setOpenCalendar(false); });
2097
2116
  useEffect(function () {
2098
2117
  if (calendarDateValue) {
2099
2118
  setDate(calendarDateValue);
@@ -2142,7 +2161,7 @@ var DateSelector = function (_a) {
2142
2161
  handleOnChange('year', parseInt(e.target.value, 10));
2143
2162
  } }, { children: [jsx("option", __assign({ value: "", disabled: true }, { children: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.year) || 'Year' }), void 0),
2144
2163
  availableYears.map(function (year) { return (jsx("option", __assign({ value: year }, { children: year }), year)); })] }), void 0)] }), void 0),
2145
- 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),
2164
+ 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),
2146
2165
  openCalendar && (jsx(DayPicker, { month: selectedDateInDateType, showOutsideDays: true, fromMonth: dateCalendarFromMonth, toMonth: dateCalendarToMonth, selectedDays: selectedDateInDateType, onDayClick: function (date) {
2147
2166
  if (dayjs(date).isAfter(dateCalendarFromMonth) ||
2148
2167
  dayjs(date).isBefore(dateCalendarToMonth)) {