@bbl-digital/snorre 2.4.10 → 2.4.13

package/lib/core/DatepickerRange/YearMonthForm.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface IProps {
+    date: Date;
+    onChange: (e: Date) => void;
+    fromDate: Date;
+    toDate: Date;
+}
+declare const YearMonthForm: React.FC<IProps>;
+export default YearMonthForm;
+//# sourceMappingURL=YearMonthForm.d.ts.map

package/lib/core/DatepickerRange/YearMonthForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YearMonthForm.d.ts","sourceRoot":"","sources":["../../../src/packages/core/DatepickerRange/YearMonthForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,UAAU,MAAM;IACd,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;IAC3B,QAAQ,EAAE,IAAI,CAAA;IACd,MAAM,EAAE,IAAI,CAAA;CACb;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAmDnC,CAAA;AAED,eAAe,aAAa,CAAA"}

package/lib/core/DatepickerRange/YearMonthForm.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { MONTHS } from '../../utils/dates';
+import { StyledSelect, Div } from './styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const YearMonthForm = ({
+  onChange,
+  date,
+  fromDate,
+  toDate
+}) => {
+  const months = MONTHS;
+  const years = [];
+
+  for (let i = fromDate.getFullYear(); i <= toDate.getFullYear(); i += 1) {
+    years.push(i);
+  }
+
+  const changeMonth = e => {
+    let newDate = date;
+    newDate.setMonth(e.target.value);
+    if (newDate > toDate) newDate = toDate;
+    onChange(newDate);
+  };
+
+  const changeYear = e => {
+    let newDate = date;
+    newDate.setFullYear(e.target.value);
+    if (newDate > toDate) newDate = toDate;
+    onChange(newDate);
+  };
+
+  return /*#__PURE__*/_jsxs(Div, {
+    className: "DayPicker-Caption",
+    children: [/*#__PURE__*/_jsx(StyledSelect, {
+      name: "month",
+      onChange: changeMonth,
+      value: date.getMonth(),
+      children: months.map((month, i) => /*#__PURE__*/_jsx("option", {
+        value: i,
+        children: month
+      }, month))
+    }), /*#__PURE__*/_jsx(StyledSelect, {
+      name: "year",
+      onChange: changeYear,
+      value: date.getFullYear(),
+      children: years.map(year => /*#__PURE__*/_jsx("option", {
+        value: year,
+        children: year
+      }, year))
+    })]
+  });
+};
+
+export default YearMonthForm;

package/lib/core/DatepickerRange/index.d.ts

@@ -31,8 +31,6 @@ interface IProps {
         to?: string;
         from?: string;
     };
-    /** With month and year selects, defaults to true */
-    withYearMonthForm?: boolean;
     /** On change callback, returns date */
     onChange: (value: {
         to?: Date;

package/lib/core/DatepickerRange/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/DatepickerRange/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAwBjD,UAAU,MAAM;IACd,0BAA0B;IAC1B,KAAK,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACtC,6BAA6B;IAC7B,KAAK,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAA;KAAE,CAAA;IAClC,0BAA0B;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sBAAsB;IACtB,cAAc,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/C,2BAA2B;IAC3B,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,OAAO,CAAC;QAAC,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAA;IAC3C,6BAA6B;IAC7B,aAAa,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC9C,oDAAoD;IACpD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,uCAAuC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,EAAE,CAAC,EAAE,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAA;KAAE,KAAK,IAAI,CAAA;IACrD,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,uCAAuC;IACvC,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAID,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAyKrC,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/DatepickerRange/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAsBjD,UAAU,MAAM;IACd,0BAA0B;IAC1B,KAAK,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACtC,6BAA6B;IAC7B,KAAK,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAA;KAAE,CAAA;IAClC,0BAA0B;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sBAAsB;IACtB,cAAc,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/C,2BAA2B;IAC3B,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,OAAO,CAAC;QAAC,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAA;IAC3C,6BAA6B;IAC7B,aAAa,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC9C,uCAAuC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,EAAE,CAAC,EAAE,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAA;KAAE,KAAK,IAAI,CAAA;IACrD,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,uCAAuC;IACvC,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAKD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAyIrC,CAAA;AAED,eAAe,eAAe,CAAA"}

package/lib/core/DatepickerRange/index.js

@@ -1,15 +1,14 @@
 /** @jsxImportSource @emotion/react */
-import FocusTrap from 'focus-trap-react';
-import { useRef, useState, useEffect, useMemo } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import { useIsMobile } from '../..';
 import IconErrorOutline from '../../icons/General/IconErrorOutline';
 import { formatDate, MONTHS, parseDate, WEEKDAYS_LONG, WEEKDAYS_SHORT } from '../../utils/dates';
-import YearMonthForm from '../Datepicker/yearMonthForm';
 import { Input, Wrapper, styles, Label, ErrorMessage, DividerLine } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const FORMAT = 'dd.MM.yyyy';
+const PLACEHOLDER = 'dd.mm.åååå';
 
 const DatePickerRange = ({
   value,
@@ -19,62 +18,37 @@ const DatePickerRange = ({
   maxDate,
   disabled,
   disabledTitle,
-  withYearMonthForm = true,
   onChange,
   onBlur,
   css,
   maxWidth = 550,
-  minWidth = 400
+  minWidth = 550
 }) => {
   const isMobile = useIsMobile();
   const fromPickerRef = useRef(null);
   const toPickerRef = useRef(null);
   const currentYear = new Date().getFullYear();
-  const minDateAvailable = new Date(currentYear - 100, 0);
-  const maxDateAvailable = maxDate ? new Date(maxDate) : new Date(currentYear, 11, 31);
+  const maxDateAvailable = maxDate ? new Date(maxDate) : new Date(currentYear + 5, 11, 31);
   const [dates, setDates] = useState({
     to: undefined,
     from: undefined
   });
-
-  const showFromMonth = () => {
-    if (!dates.from) return;
-    const toMonth = dates.from.getMonth() + 1;
-    const fromMonth = dates.from.getMonth() + 1;
-
-    if (fromMonth - toMonth < 2) {
-      toPickerRef.current?.getDayPicker().showMonth(dates.from);
-    }
-  };
-
   useEffect(() => {
     if (isMobile && fromPickerRef) fromPickerRef.current.input.readOnly = true;
   }, [isMobile, fromPickerRef]);
   useEffect(() => {
     if (isMobile && toPickerRef) toPickerRef.current.input.readOnly = true;
   }, [isMobile, toPickerRef]);
-  const modifiers = useMemo(() => ({
+  const modifiers = {
     start: dates.from,
     end: dates.to
-  }), [dates.from, dates.to]);
-
-  const pickerPropsDefault = key => ({
+  };
+  const pickerPropsDefault = {
     locale: 'no',
     months: MONTHS,
     weekdaysLong: WEEKDAYS_LONG,
     weekdaysShort: WEEKDAYS_SHORT,
     firstDayOfWeek: 1,
-    captionElement: withYearMonthForm ? _jsx(YearMonthForm, {
-      date: dates[key] || new Date(),
-      fromDate: minDateAvailable,
-      toDate: maxDateAvailable,
-      onChange: e => {
-        setDates(prev => ({ ...prev,
-          [key]: e
-        }));
-        showFromMonth();
-      }
-    }) : undefined,
     // custom
     modifiers,
     numberOfMonths: 2,
@@ -82,7 +56,21 @@ const DatePickerRange = ({
       from: dates.from,
       to: dates.to
     }]
-  });
+  };
+  const toDayProps = { ...pickerPropsDefault,
+    disabledDays: {
+      before: dates.from
+    },
+    month: dates.from,
+    fromMonth: dates.from
+  };
+  const fromDayProps = { ...pickerPropsDefault,
+    disabledDays: {
+      after: dates.to
+    },
+    toMonth: dates.to,
+    onDayClick: () => toPickerRef.current?.getInput().focus()
+  };
 
   const handleChange = key => date => {
     setDates(prev => ({ ...prev,
@@ -93,78 +81,60 @@ const DatePickerRange = ({
     });
   };
 
-  return _jsx(FocusTrap, {
-    active: true,
-    focusTrapOptions: {
-      initialFocus: false,
-      allowOutsideClick: true,
-      clickOutsideDeactivates: true
-    },
-    children: _jsxs(Wrapper, {
-      css: () => [styles.wrapper(maxWidth, minWidth), css && css],
-      children: [_jsxs(Input, {
-        title: disabled?.from && disabledTitle?.from ? disabledTitle?.from : undefined,
-        css: theme => [styles.default(theme), validation && styles.validation, invalidMessage && styles.invalid(theme)],
-        children: [label?.from && _jsx(Label, {
-          children: label.from
-        }), _jsx(DayPickerInput, {
-          ref: fromPickerRef,
-          keepFocus: false,
-          format: FORMAT,
-          formatDate: formatDate,
-          parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDateAvailable),
-          onDayChange: handleChange('from'),
-          dayPickerProps: { ...pickerPropsDefault('from'),
-            disabledDays: {
-              after: dates.to
-            },
-            toMonth: dates.to,
-            onDayClick: () => toPickerRef.current?.getInput().focus()
-          },
-          placeholder: 'dd.mm.åååå',
-          onDayPickerHide: onBlur,
-          value: value?.from,
-          inputProps: {
-            disabled: disabled?.from
-          }
-        }), invalidMessage?.from && _jsx(IconErrorOutline, {
-          size: "16px"
-        }), invalidMessage && _jsx(ErrorMessage, {
-          children: invalidMessage.from
-        })]
-      }), _jsx(DividerLine, {
-        children: "-"
-      }), _jsxs(Input, {
-        css: theme => [styles.default(theme), validation && styles.validation, invalidMessage && styles.invalid(theme)],
-        title: disabled?.to && disabledTitle?.to ? disabledTitle.to : undefined,
-        children: [label?.to && _jsx(Label, {
-          children: label.to
-        }), _jsx(DayPickerInput, {
-          ref: toPickerRef,
-          format: FORMAT,
-          formatDate: formatDate,
-          parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDate),
-          onDayChange: handleChange('to'),
-          dayPickerProps: { ...pickerPropsDefault('to'),
-            disabledDays: {
-              before: dates.from
-            },
-            month: dates.from,
-            fromMonth: dates.from
-          },
-          placeholder: 'dd.mm.åååå',
-          onDayPickerHide: onBlur,
-          value: value?.to,
-          inputProps: {
-            disabled: disabled?.to
-          }
-        }), invalidMessage?.to && _jsx(IconErrorOutline, {
-          size: "16px"
-        }), invalidMessage && _jsx(ErrorMessage, {
-          children: invalidMessage?.to
-        })]
+  return _jsxs(Wrapper, {
+    css: () => [styles.wrapper(maxWidth, minWidth), css && css],
+    children: [_jsxs(Input, {
+      className: "InputFromTo",
+      title: disabled?.from && disabledTitle?.from ? disabledTitle?.from : undefined,
+      css: theme => [styles.default(theme), validation && styles.validation, invalidMessage && styles.invalid(theme)],
+      children: [label?.from && _jsx(Label, {
+        children: label.from
+      }), _jsx(DayPickerInput, {
+        ref: fromPickerRef,
+        keepFocus: false,
+        format: FORMAT,
+        formatDate: formatDate,
+        parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDateAvailable),
+        onDayChange: handleChange('from'),
+        dayPickerProps: fromDayProps,
+        placeholder: PLACEHOLDER,
+        onDayPickerHide: onBlur,
+        value: value?.from,
+        inputProps: {
+          disabled: disabled?.from
+        }
+      }), invalidMessage?.from && _jsx(IconErrorOutline, {
+        size: "16px"
+      }), invalidMessage && _jsx(ErrorMessage, {
+        children: invalidMessage.from
+      })]
+    }), _jsx(DividerLine, {
+      children: "-"
+    }), _jsxs(Input, {
+      className: "InputFromTo-to",
+      css: theme => [styles.default(theme), validation && styles.validation, invalidMessage && styles.invalid(theme)],
+      title: disabled?.to && disabledTitle?.to ? disabledTitle.to : undefined,
+      children: [label?.to && _jsx(Label, {
+        children: label.to
+      }), _jsx(DayPickerInput, {
+        ref: toPickerRef,
+        format: FORMAT,
+        formatDate: formatDate,
+        parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDate),
+        onDayChange: handleChange('to'),
+        dayPickerProps: toDayProps,
+        placeholder: PLACEHOLDER,
+        onDayPickerHide: onBlur,
+        value: value?.to,
+        inputProps: {
+          disabled: disabled?.to
+        }
+      }), invalidMessage?.to && _jsx(IconErrorOutline, {
+        size: "16px"
+      }), invalidMessage && _jsx(ErrorMessage, {
+        children: invalidMessage?.to
       })]
-    })
+    })]
   });
 };
 

package/lib/core/DatepickerRange/styles.d.ts

@@ -12,6 +12,14 @@ export declare const Label: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Div: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSelect: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, {}>;
 export declare const DividerLine: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/lib/core/DatepickerRange/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/DatepickerRange/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEjD,eAAO,MAAM,OAAO;;;yGAAe,CAAA;AAEnC,eAAO,MAAM,KAAK;;;yGAAe,CAAA;AAEjC,eAAO,MAAM,KAAK;;;2GAAgB,CAAA;AAElC,eAAO,MAAM,WAAW;;;2GAIvB,CAAA;AAED,eAAO,MAAM,YAAY;;;2GAOxB,CAAA;AAED,eAAO,MAAM,MAAM;wBACG,MAAM,YAAY,MAAM;qBAS3B,SAAS;;qBAiET,SAAS;CAqB3B,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/DatepickerRange/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAGjD,eAAO,MAAM,OAAO;;;yGAAe,CAAA;AAEnC,eAAO,MAAM,KAAK;;;yGAAe,CAAA;AAEjC,eAAO,MAAM,KAAK;;;2GAAgB,CAAA;AAElC,eAAO,MAAM,GAAG;;;yGAAe,CAAA;AAE/B,eAAO,MAAM,YAAY;;;qHAKxB,CAAA;AAED,eAAO,MAAM,WAAW;;;2GAQvB,CAAA;AAED,eAAO,MAAM,YAAY;;;2GAOxB,CAAA;AAED,eAAO,MAAM,MAAM;wBACG,MAAM,YAAY,MAAM;qBAuD3B,SAAS;;qBAoET,SAAS;CAqB3B,CAAA"}