@bbl-digital/snorre 2.4.24 → 2.4.28

package/lib/core/DatepickerRange/index.js

@@ -1,15 +1,23 @@
 /** @jsxImportSource @emotion/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 { Input, Wrapper, styles, Label, ErrorMessage, DividerLine } from './styles';
+// import { useRef, useState, useEffect } from 'react'
+// import { Modifier, Modifiers } from 'react-day-picker'
+// 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 { 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 FORMAT = 'dd.MM.yyyy'
+// const PLACEHOLDER = 'dd.mm.åååå'
 const DatePickerRange = ({
   value,
   label,
@@ -24,117 +32,67 @@ const DatePickerRange = ({
   maxWidth = 550,
   minWidth = 550
 }) => {
-  const isMobile = useIsMobile();
-  const fromPickerRef = useRef(null);
-  const toPickerRef = useRef(null);
-  const currentYear = new Date().getFullYear();
-  const maxDateAvailable = maxDate ? new Date(maxDate) : new Date(currentYear + 5, 11, 31);
-  const [dates, setDates] = useState({
-    to: undefined,
-    from: undefined
-  });
-  useEffect(() => {
-    if (isMobile && fromPickerRef) fromPickerRef.current.input.readOnly = true;
-  }, [isMobile, fromPickerRef]);
-  useEffect(() => {
-    if (isMobile && toPickerRef) toPickerRef.current.input.readOnly = true;
-  }, [isMobile, toPickerRef]);
-  const modifiers = {
-    start: dates.from,
-    end: dates.to
-  };
-  const pickerPropsDefault = {
-    locale: 'no',
-    months: MONTHS,
-    weekdaysLong: WEEKDAYS_LONG,
-    weekdaysShort: WEEKDAYS_SHORT,
-    firstDayOfWeek: 1,
-    // custom
-    modifiers,
-    numberOfMonths: 2,
-    selectedDays: [dates.from, {
-      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,
-      [key]: date
-    }));
-    onChange({ ...dates,
-      [key]: date
-    });
-  };
-
-  return _jsxs(Wrapper, {
+  // const isMobile = useIsMobile()
+  // const fromPickerRef = useRef<DayPickerInput>(null)
+  // const toPickerRef = useRef<DayPickerInput>(null)
+  // const currentYear = new Date().getFullYear()
+  // const maxDateAvailable = maxDate
+  //   ? new Date(maxDate)
+  //   : new Date(currentYear + 5, 11, 31)
+  // const [dates, setDates] = useState<{ to?: Date; from?: Date }>({
+  //   to: undefined,
+  //   from: undefined,
+  // })
+  // useEffect(() => {
+  //   if (isMobile && fromPickerRef)
+  //     (fromPickerRef as any).current.input.readOnly = true
+  // }, [isMobile, fromPickerRef])
+  // useEffect(() => {
+  //   if (isMobile && toPickerRef)
+  //     (toPickerRef.current as any).input.readOnly = true
+  // }, [isMobile, toPickerRef])
+  // const modifiers: Partial<Modifiers> = { start: dates.from, end: dates.to }
+  // const pickerPropsDefault = {
+  //   locale: 'no',
+  //   months: MONTHS,
+  //   weekdaysLong: WEEKDAYS_LONG,
+  //   weekdaysShort: WEEKDAYS_SHORT,
+  //   firstDayOfWeek: 1,
+  //   // custom
+  //   modifiers,
+  //   numberOfMonths: 2,
+  //   selected: [dates.from, { from: dates.from, to: dates.to }],
+  // }
+  // const toDayProps = {
+  //   ...pickerPropsDefault,
+  //   disabled: { before: dates.from } as Modifier,
+  //   month: dates.from,
+  //   fromMonth: dates.from,
+  // }
+  // const fromDayProps = {
+  //   ...pickerPropsDefault,
+  //   disabled: { after: dates.to } as Modifier,
+  //   toMonth: dates.to,
+  //   onDayClick: () => toPickerRef.current?.getInput().focus(),
+  // }
+  // const handleChange = (key: 'to' | 'from') => (date: Date) => {
+  //   setDates((prev) => ({ ...prev, [key]: date }))
+  //   onChange({ ...dates, [key]: date })
+  // }
+  return _jsx(Wrapper, {
     css: () => [styles.wrapper(maxWidth, minWidth), css && css],
-    children: [_jsxs(Input, {
+    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/NoticeCard/privateComponents/NoticeMetaInfo/index.js

@@ -30,7 +30,7 @@ const NoticeMetaInfo = ({
         semibold: true,
         size: "14px",
         primary: true,
-        children: [created && getFormattedDate(created, ddmmyyyy), updated && updated !== created && ` (Oppdatert: ${getFormattedDate(updated, ddmmyyyy)}${updatedBy ? ` av ${updatedBy})` : ''} `]
+        children: [created && getFormattedDate(created, ddmmyyyy), updated && updated !== created && ` (Oppdatert: ${getFormattedDate(updated, ddmmyyyy)}${updatedBy ? ` av ${updatedBy})` : ')'} `]
       })]
     }), (hasAttachment || hasEvent) && /*#__PURE__*/_jsxs(Group, {
       children: [hasAttachment && /*#__PURE__*/_jsx(Div, {

package/lib/hooks/useScreenOrientation.d.ts

@@ -1,3 +1,3 @@
-export declare const useScreenOrientation: () => "portrait-primary" | "landscape-primary" | "landscape-secondary" | "portrait-secondary";
+export declare const useScreenOrientation: () => "landscape-primary" | "landscape-secondary" | "portrait-primary" | "portrait-secondary";
 export default useScreenOrientation;
 //# sourceMappingURL=useScreenOrientation.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "2.4.24",
+  "version": "2.4.28",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",
@@ -20,8 +20,10 @@
   "author": "bbl-digital",
   "dependencies": {
     "@tinymce/tinymce-react": "^3.14.0",
+    "date-fns": "^2.28.0",
     "focus-trap-react": "^9.0.1",
-    "react-day-picker": "^7.4.8",
+    "react-day-picker": "^8.0.7",
+    "react-popper": "^2.3.0",
     "recharts": "2.1.5"
   },
   "peerDependencies": {

package/esm/core/DatepickerRange/YearMonthForm.js

@@ -1,56 +0,0 @@
-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/YearMonthForm.d.ts

@@ -1,10 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,56 +0,0 @@
-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;