@laerdal/life-react-components 1.9.0 → 1.9.1

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 (5) hide show
  1. package/dist/InputFields/DatepickerField.cjs +13 -23
  2. package/dist/InputFields/DatepickerField.cjs.map +1 -1
  3. package/dist/InputFields/DatepickerField.js +13 -23
  4. package/dist/InputFields/DatepickerField.js.map +1 -1
  5. package/package.json +1 -1
package/dist/InputFields/DatepickerField.cjs CHANGED
@@ -107,7 +107,9 @@ var DatepickerField = function DatepickerField(_ref) {
107
107
  var _React$useState5 = React.useState(null),
108
108
  _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
109
109
  openAt = _React$useState6[0],
110
- setOpenAt = _React$useState6[1];
110
+ setOpenAt = _React$useState6[1]; // 'open' flag is used only for tracking current state of the dropdown,
111
+ // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'
112
+
111
113
 
112
114
  var _React$useState7 = React.useState(false),
113
115
  _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
@@ -139,23 +141,19 @@ var DatepickerField = function DatepickerField(_ref) {
139
141
  datepickerRef.current.setOpen(true); //setOpenAt(null);
140
142
  }
141
143
  }, [openAt]);
142
- React.useEffect(function () {
143
- if (!open) {
144
- var _inputRef$current;
145
144
 
146
- (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
147
- }
148
- }, [open]);
145
+ var handleCalendarClose = function handleCalendarClose() {
146
+ var _inputRef$current;
147
+
148
+ (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
149
+ setOpen(false);
150
+ };
149
151
 
150
152
  var handleCalendarOpen = function handleCalendarOpen() {
151
153
  if (openAt) setOpenAt(null);
152
154
  setOpen(true);
153
155
  };
154
156
 
155
- var handleCalendarClose = function handleCalendarClose() {
156
- setOpen(false);
157
- };
158
-
159
157
  var maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());
160
158
  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate !== null && yearsAfterCurrentDate !== void 0 ? yearsAfterCurrentDate : 50)); //itemsNumber - controls number of year select options generated in the dropdown
161
159
  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5
@@ -164,9 +162,7 @@ var DatepickerField = function DatepickerField(_ref) {
164
162
  var itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate !== null && yearsBeforeCurrentDate !== void 0 ? yearsBeforeCurrentDate : 15)) / 5);
165
163
 
166
164
  var handleKeyDown = function handleKeyDown(e) {
167
- if (e.key === 'Escape' || e.key === 'Esc') {
168
- setOpen(false);
169
- }
165
+ if (e.key === 'Escape' || e.key === 'Esc') datepickerRef.current.setOpen(false);
170
166
  };
171
167
 
172
168
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -177,17 +173,11 @@ var DatepickerField = function DatepickerField(_ref) {
177
173
  ref: datepickerRef,
178
174
  onCalendarOpen: handleCalendarOpen,
179
175
  onCalendarClose: handleCalendarClose,
180
- open: open,
181
176
  onKeyDown: handleKeyDown,
182
177
  onClickOutside: function onClickOutside() {
183
- return setOpen(false);
184
- },
185
- onInputClick: function onInputClick() {
186
- return !disabled && !readOnly && setOpen(!open);
178
+ return datepickerRef.current.setOpen(false);
187
179
  },
188
180
  onChange: function onChange(e) {
189
- setOpen(false);
190
-
191
181
  if (_onChange) {
192
182
  if (yearPickerMode) {
193
183
  var newDate = new Date();
@@ -232,9 +222,9 @@ var DatepickerField = function DatepickerField(_ref) {
232
222
  type: "text",
233
223
  name: "datepicker",
234
224
  onKeyDown: function onKeyDown(e) {
235
- return e.key === 'Enter' && setOpen(true);
225
+ return e.key === 'Enter' && datepickerRef.current.setOpen(true);
236
226
  },
237
- className: (invalid ? 'invalid' : '') + (open ? ' open' : ''),
227
+ className: invalid ? 'invalid' : '' + (open ? ' open' : ''),
238
228
  tabIndex: disabled || readOnly ? -1 : 0,
239
229
  onFocus: function onFocus(e) {
240
230
  var _inputRef$current2;
package/dist/InputFields/DatepickerField.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentTextStyle","Bold","neutral_600","Size","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","id","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","datepickerRef","React","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","blur","handleCalendarOpen","handleCalendarClose","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport { Calendar, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { DatepickerFieldHeader, DatepickerFieldHeaderParams } from './DatepickerFieldHeader';\nimport { ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { ErrorMessage, InputFieldStyling, InputWrapper } from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport { ComponentMStyling, ComponentSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { useFocusVisibleRef } from '../common/FocusVisible';\nimport { Size } from '../types';\nimport { defaultOnMouseDownHandler } from '../common';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n id: string;\n disabled?: boolean;\n readOnly?: boolean;\n onChange?: (date: Date) => void;\n invalid?: boolean;\n value?: Date;\n dateFormat?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n yearPicker?: boolean;\n yearsBeforeCurrentDate?: number;\n yearsAfterCurrentDate?: number;\n margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n .react-datepicker-popper {\n z-index: ${Z_INDEXES.dropdown};\n }\n\n > div {\n display: block;\n\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 32px;\n width: 32px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ${COLORS.primary_20};\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n ${focusStyles}\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: 336px;\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ${COLORS.neutral_20};\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ${COLORS.neutral_200};\n background: ${COLORS.neutral_20};\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n padding-top: 0px;\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n\n .react-datepicker__year-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__year-text--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n }\n\n .react-datepicker__day {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__day--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ${COLORS.neutral_700};\n background: ${COLORS.neutral_100};\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n }\n }\n`;\n\nconst IconWrapper = styled.div`\n pointer-events: none;\n position: absolute;\n right: 16px;\n width: 24px;\n height: 24px;\n z-index: ${Z_INDEXES.focus + 1};\n color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n &::placeholder {\n color: ${COLORS.neutral_500};\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n ::placeholder {\n color: ${COLORS.primary_700};\n }\n\n cursor: pointer;\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active,\n &.open {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n background-color: ${COLORS.white};\n }\n\n &:hover ~ ${IconWrapper} {\n color: ${COLORS.primary_700};\n }\n\n &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n color: ${COLORS.primary_800};\n }\n\n &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n color: ${COLORS.neutral_300};\n }\n`;\n\nconst DatepickerField = ({\n id,\n disabled,\n readOnly,\n onChange,\n invalid,\n value,\n validationMessage,\n dateFormat,\n autoComplete,\n placeholder,\n required,\n yearPicker,\n yearsBeforeCurrentDate,\n yearsAfterCurrentDate,\n margin,\n}: DatepickerFieldProps) => {\n // Globally used variables within the component\n const inputRef = useFocusVisibleRef();\n const datepickerRef = React.useRef<any>(null);\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n const [openAt, setOpenAt] = React.useState<Date | null>(null);\n const [open, setOpen] = React.useState<boolean>(false);\n\n /**\n * Format the date in a specific way.\n */\n React.useEffect(() => {\n if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n }, [value]);\n\n React.useEffect(() => {\n if (yearPickerMode) {\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n //we have to touch DOM directly\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n const dropdownParent = selectedDate?.parentElement?.parentElement;\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n }\n }, [yearPickerMode]);\n\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n //otherwise after year selection datepicker will show January month of the selected year\n React.useEffect(() => {\n if (openAt) {\n datepickerRef.current.setOpen(true);\n //setOpenAt(null);\n }\n }, [openAt]);\n\n React.useEffect(() => {\n if (!open) {\n inputRef.current?.blur();\n }\n }, [open]);\n\n const handleCalendarOpen = () => {\n if (openAt) setOpenAt(null);\n setOpen(true);\n };\n\n const handleCalendarClose = () => {\n setOpen(false);\n };\n\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n //itemsNumber - controls number of year select options generated in the dropdown\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape' || e.key === 'Esc') {\n setOpen(false);\n }\n };\n\n return (\n <>\n {/* Let's render the input itself */}\n <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onCalendarClose={handleCalendarClose}\n open={open}\n onKeyDown={handleKeyDown}\n onClickOutside={() => setOpen(false)}\n onInputClick={() => !disabled && !readOnly && setOpen(!open)}\n onChange={(e: any) => {\n setOpen(false);\n if (onChange) {\n if (yearPickerMode) {\n const newDate = new Date();\n newDate.setFullYear(e.getFullYear());\n newDate.setMonth(activeMonthPage);\n setOpenAt(newDate);\n } else onChange(e);\n }\n if (yearPickerMode) setYearPickerMode(false);\n }}\n disabled={disabled || readOnly}\n locale={en}\n showYearPicker={yearPickerMode}\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n maxDate={yearPickerMode ? maxDate : undefined}\n selected={value}\n openToDate={openAt ?? undefined}\n preventOpenOnFocus={true}\n shouldCloseOnSelect={true}\n renderCustomHeader={\n yearPicker\n ? (params: DatepickerFieldHeaderParams) =>\n React.createElement(\n DatepickerFieldHeader,\n {\n ...params,\n setActiveMonthPage,\n customHeaderCount: 0,\n yearPickerMode: yearPickerMode,\n setYearPickerMode: setYearPickerMode,\n },\n null,\n )\n : undefined\n }\n customInput={\n <InputWrapper disabled={disabled} readOnly={readOnly}>\n <div style={{ display: 'block', margin: '4px 0px' }}>\n <DatepickerRow>\n <StyledInputFieldStyling\n id={id}\n ref={inputRef}\n type=\"text\"\n name=\"datepicker\"\n onKeyDown={(e) => e.key === 'Enter' && setOpen(true)}\n className={(invalid ? 'invalid' : '') + (open ? ' open' : '')}\n tabIndex={disabled || readOnly ? -1 : 0}\n onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={true}\n suppressReadOnlyStyles={!readOnly}\n required={required}\n />\n <IconWrapper>\n <Calendar size=\"24\" />\n </IconWrapper>\n </DatepickerRow>\n </div>\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/* If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400} />\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.cjs"}
1
+ {"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentTextStyle","Bold","neutral_600","Size","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","id","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","datepickerRef","React","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport { Calendar, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { DatepickerFieldHeader, DatepickerFieldHeaderParams } from './DatepickerFieldHeader';\nimport { ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { ErrorMessage, InputFieldStyling, InputWrapper } from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport { ComponentMStyling, ComponentSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { useFocusVisibleRef } from '../common/FocusVisible';\nimport { Size } from '../types';\nimport { defaultOnMouseDownHandler } from '../common';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n id: string;\n disabled?: boolean;\n readOnly?: boolean;\n onChange?: (date: Date) => void;\n invalid?: boolean;\n value?: Date;\n dateFormat?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n yearPicker?: boolean;\n yearsBeforeCurrentDate?: number;\n yearsAfterCurrentDate?: number;\n margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n .react-datepicker-popper {\n z-index: ${Z_INDEXES.dropdown};\n }\n\n > div {\n display: block;\n\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 32px;\n width: 32px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ${COLORS.primary_20};\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n ${focusStyles}\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: 336px;\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ${COLORS.neutral_20};\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ${COLORS.neutral_200};\n background: ${COLORS.neutral_20};\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n padding-top: 0px;\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n\n .react-datepicker__year-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__year-text--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n }\n\n .react-datepicker__day {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__day--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ${COLORS.neutral_700};\n background: ${COLORS.neutral_100};\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n }\n }\n`;\n\nconst IconWrapper = styled.div`\n pointer-events: none;\n position: absolute;\n right: 16px;\n width: 24px;\n height: 24px;\n z-index: ${Z_INDEXES.focus + 1};\n color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n &::placeholder {\n color: ${COLORS.neutral_500};\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n ::placeholder {\n color: ${COLORS.primary_700};\n }\n\n cursor: pointer;\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active,\n &.open {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n background-color: ${COLORS.white};\n }\n\n &:hover ~ ${IconWrapper} {\n color: ${COLORS.primary_700};\n }\n\n &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n color: ${COLORS.primary_800};\n }\n\n &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n color: ${COLORS.neutral_300};\n }\n`;\n\nconst DatepickerField = ({\n id,\n disabled,\n readOnly,\n onChange,\n invalid,\n value,\n validationMessage,\n dateFormat,\n autoComplete,\n placeholder,\n required,\n yearPicker,\n yearsBeforeCurrentDate,\n yearsAfterCurrentDate,\n margin,\n}: DatepickerFieldProps) => {\n // Globally used variables within the component\n const inputRef = useFocusVisibleRef();\n const datepickerRef = React.useRef<any>(null);\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n const [openAt, setOpenAt] = React.useState<Date | null>(null);\n // 'open' flag is used only for tracking current state of the dropdown,\n // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n const [open, setOpen] = React.useState<boolean>(false);\n\n /**\n * Format the date in a specific way.\n */\n React.useEffect(() => {\n if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n }, [value]);\n\n React.useEffect(() => {\n if (yearPickerMode) {\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n //we have to touch DOM directly\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n const dropdownParent = selectedDate?.parentElement?.parentElement;\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n }\n }, [yearPickerMode]);\n\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n //otherwise after year selection datepicker will show January month of the selected year\n React.useEffect(() => {\n if (openAt) { \n datepickerRef.current.setOpen(true);\n //setOpenAt(null);\n }\n }, [openAt]);\n\n const handleCalendarClose = () => {\n inputRef.current?.blur();\n setOpen(false);\n };\n\n const handleCalendarOpen = () => {\n if (openAt) setOpenAt(null);\n setOpen(true);\n };\n\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n //itemsNumber - controls number of year select options generated in the dropdown\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape' || e.key === 'Esc')\n datepickerRef.current.setOpen(false);\n };\n\n return (\n <>\n {/* Let's render the input itself */}\n <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onCalendarClose={handleCalendarClose}\n onKeyDown={handleKeyDown}\n \n onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n onChange={(e: any) => {\n if (onChange) {\n if (yearPickerMode) {\n const newDate = new Date();\n newDate.setFullYear(e.getFullYear());\n newDate.setMonth(activeMonthPage);\n setOpenAt(newDate);\n } else onChange(e);\n }\n if (yearPickerMode) setYearPickerMode(false);\n }}\n disabled={disabled || readOnly}\n locale={en}\n showYearPicker={yearPickerMode}\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n maxDate={yearPickerMode ? maxDate : undefined}\n selected={value}\n openToDate={openAt ?? undefined}\n preventOpenOnFocus={true}\n shouldCloseOnSelect={true}\n renderCustomHeader={\n yearPicker\n ? (params: DatepickerFieldHeaderParams) =>\n React.createElement(\n DatepickerFieldHeader,\n {\n ...params,\n setActiveMonthPage,\n customHeaderCount: 0,\n yearPickerMode: yearPickerMode,\n setYearPickerMode: setYearPickerMode,\n },\n null,\n )\n : undefined\n }\n customInput={\n <InputWrapper disabled={disabled} readOnly={readOnly}>\n <div style={{ display: 'block', margin: '4px 0px' }}>\n <DatepickerRow>\n <StyledInputFieldStyling\n id={id}\n ref={inputRef}\n type=\"text\"\n name=\"datepicker\"\n onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n tabIndex={disabled || readOnly ? -1 : 0}\n onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={true}\n suppressReadOnlyStyles={!readOnly}\n required={required}\n />\n <IconWrapper>\n <Calendar size=\"24\" />\n </IconWrapper>\n </DatepickerRow>\n </div>\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/* If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400} />\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.cjs"}
package/dist/InputFields/DatepickerField.js CHANGED
@@ -88,7 +88,9 @@ var DatepickerField = function DatepickerField(_ref) {
88
88
  var _React$useState5 = React.useState(null),
89
89
  _React$useState6 = _slicedToArray(_React$useState5, 2),
90
90
  openAt = _React$useState6[0],
91
- setOpenAt = _React$useState6[1];
91
+ setOpenAt = _React$useState6[1]; // 'open' flag is used only for tracking current state of the dropdown,
92
+ // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'
93
+
92
94
 
93
95
  var _React$useState7 = React.useState(false),
94
96
  _React$useState8 = _slicedToArray(_React$useState7, 2),
@@ -120,23 +122,19 @@ var DatepickerField = function DatepickerField(_ref) {
120
122
  datepickerRef.current.setOpen(true); //setOpenAt(null);
121
123
  }
122
124
  }, [openAt]);
123
- React.useEffect(function () {
124
- if (!open) {
125
- var _inputRef$current;
126
125
 
127
- (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
128
- }
129
- }, [open]);
126
+ var handleCalendarClose = function handleCalendarClose() {
127
+ var _inputRef$current;
128
+
129
+ (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
130
+ setOpen(false);
131
+ };
130
132
 
131
133
  var handleCalendarOpen = function handleCalendarOpen() {
132
134
  if (openAt) setOpenAt(null);
133
135
  setOpen(true);
134
136
  };
135
137
 
136
- var handleCalendarClose = function handleCalendarClose() {
137
- setOpen(false);
138
- };
139
-
140
138
  var maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());
141
139
  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate !== null && yearsAfterCurrentDate !== void 0 ? yearsAfterCurrentDate : 50)); //itemsNumber - controls number of year select options generated in the dropdown
142
140
  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5
@@ -145,9 +143,7 @@ var DatepickerField = function DatepickerField(_ref) {
145
143
  var itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate !== null && yearsBeforeCurrentDate !== void 0 ? yearsBeforeCurrentDate : 15)) / 5);
146
144
 
147
145
  var handleKeyDown = function handleKeyDown(e) {
148
- if (e.key === 'Escape' || e.key === 'Esc') {
149
- setOpen(false);
150
- }
146
+ if (e.key === 'Escape' || e.key === 'Esc') datepickerRef.current.setOpen(false);
151
147
  };
152
148
 
153
149
  return /*#__PURE__*/_jsxs(_Fragment, {
@@ -158,17 +154,11 @@ var DatepickerField = function DatepickerField(_ref) {
158
154
  ref: datepickerRef,
159
155
  onCalendarOpen: handleCalendarOpen,
160
156
  onCalendarClose: handleCalendarClose,
161
- open: open,
162
157
  onKeyDown: handleKeyDown,
163
158
  onClickOutside: function onClickOutside() {
164
- return setOpen(false);
165
- },
166
- onInputClick: function onInputClick() {
167
- return !disabled && !readOnly && setOpen(!open);
159
+ return datepickerRef.current.setOpen(false);
168
160
  },
169
161
  onChange: function onChange(e) {
170
- setOpen(false);
171
-
172
162
  if (_onChange) {
173
163
  if (yearPickerMode) {
174
164
  var newDate = new Date();
@@ -213,9 +203,9 @@ var DatepickerField = function DatepickerField(_ref) {
213
203
  type: "text",
214
204
  name: "datepicker",
215
205
  onKeyDown: function onKeyDown(e) {
216
- return e.key === 'Enter' && setOpen(true);
206
+ return e.key === 'Enter' && datepickerRef.current.setOpen(true);
217
207
  },
218
- className: (invalid ? 'invalid' : '') + (open ? ' open' : ''),
208
+ className: invalid ? 'invalid' : '' + (open ? ' open' : ''),
219
209
  tabIndex: disabled || readOnly ? -1 : 0,
220
210
  onFocus: function onFocus(e) {
221
211
  var _inputRef$current2;
package/dist/InputFields/DatepickerField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","id","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","blur","handleCalendarOpen","handleCalendarClose","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport { Calendar, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { DatepickerFieldHeader, DatepickerFieldHeaderParams } from './DatepickerFieldHeader';\nimport { ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { ErrorMessage, InputFieldStyling, InputWrapper } from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport { ComponentMStyling, ComponentSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { useFocusVisibleRef } from '../common/FocusVisible';\nimport { Size } from '../types';\nimport { defaultOnMouseDownHandler } from '../common';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n id: string;\n disabled?: boolean;\n readOnly?: boolean;\n onChange?: (date: Date) => void;\n invalid?: boolean;\n value?: Date;\n dateFormat?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n yearPicker?: boolean;\n yearsBeforeCurrentDate?: number;\n yearsAfterCurrentDate?: number;\n margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n .react-datepicker-popper {\n z-index: ${Z_INDEXES.dropdown};\n }\n\n > div {\n display: block;\n\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 32px;\n width: 32px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ${COLORS.primary_20};\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n ${focusStyles}\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: 336px;\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ${COLORS.neutral_20};\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ${COLORS.neutral_200};\n background: ${COLORS.neutral_20};\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n padding-top: 0px;\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n\n .react-datepicker__year-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__year-text--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n }\n\n .react-datepicker__day {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__day--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ${COLORS.neutral_700};\n background: ${COLORS.neutral_100};\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n }\n }\n`;\n\nconst IconWrapper = styled.div`\n pointer-events: none;\n position: absolute;\n right: 16px;\n width: 24px;\n height: 24px;\n z-index: ${Z_INDEXES.focus + 1};\n color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n &::placeholder {\n color: ${COLORS.neutral_500};\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n ::placeholder {\n color: ${COLORS.primary_700};\n }\n\n cursor: pointer;\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active,\n &.open {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n background-color: ${COLORS.white};\n }\n\n &:hover ~ ${IconWrapper} {\n color: ${COLORS.primary_700};\n }\n\n &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n color: ${COLORS.primary_800};\n }\n\n &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n color: ${COLORS.neutral_300};\n }\n`;\n\nconst DatepickerField = ({\n id,\n disabled,\n readOnly,\n onChange,\n invalid,\n value,\n validationMessage,\n dateFormat,\n autoComplete,\n placeholder,\n required,\n yearPicker,\n yearsBeforeCurrentDate,\n yearsAfterCurrentDate,\n margin,\n}: DatepickerFieldProps) => {\n // Globally used variables within the component\n const inputRef = useFocusVisibleRef();\n const datepickerRef = React.useRef<any>(null);\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n const [openAt, setOpenAt] = React.useState<Date | null>(null);\n const [open, setOpen] = React.useState<boolean>(false);\n\n /**\n * Format the date in a specific way.\n */\n React.useEffect(() => {\n if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n }, [value]);\n\n React.useEffect(() => {\n if (yearPickerMode) {\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n //we have to touch DOM directly\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n const dropdownParent = selectedDate?.parentElement?.parentElement;\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n }\n }, [yearPickerMode]);\n\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n //otherwise after year selection datepicker will show January month of the selected year\n React.useEffect(() => {\n if (openAt) {\n datepickerRef.current.setOpen(true);\n //setOpenAt(null);\n }\n }, [openAt]);\n\n React.useEffect(() => {\n if (!open) {\n inputRef.current?.blur();\n }\n }, [open]);\n\n const handleCalendarOpen = () => {\n if (openAt) setOpenAt(null);\n setOpen(true);\n };\n\n const handleCalendarClose = () => {\n setOpen(false);\n };\n\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n //itemsNumber - controls number of year select options generated in the dropdown\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape' || e.key === 'Esc') {\n setOpen(false);\n }\n };\n\n return (\n <>\n {/* Let's render the input itself */}\n <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onCalendarClose={handleCalendarClose}\n open={open}\n onKeyDown={handleKeyDown}\n onClickOutside={() => setOpen(false)}\n onInputClick={() => !disabled && !readOnly && setOpen(!open)}\n onChange={(e: any) => {\n setOpen(false);\n if (onChange) {\n if (yearPickerMode) {\n const newDate = new Date();\n newDate.setFullYear(e.getFullYear());\n newDate.setMonth(activeMonthPage);\n setOpenAt(newDate);\n } else onChange(e);\n }\n if (yearPickerMode) setYearPickerMode(false);\n }}\n disabled={disabled || readOnly}\n locale={en}\n showYearPicker={yearPickerMode}\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n maxDate={yearPickerMode ? maxDate : undefined}\n selected={value}\n openToDate={openAt ?? undefined}\n preventOpenOnFocus={true}\n shouldCloseOnSelect={true}\n renderCustomHeader={\n yearPicker\n ? (params: DatepickerFieldHeaderParams) =>\n React.createElement(\n DatepickerFieldHeader,\n {\n ...params,\n setActiveMonthPage,\n customHeaderCount: 0,\n yearPickerMode: yearPickerMode,\n setYearPickerMode: setYearPickerMode,\n },\n null,\n )\n : undefined\n }\n customInput={\n <InputWrapper disabled={disabled} readOnly={readOnly}>\n <div style={{ display: 'block', margin: '4px 0px' }}>\n <DatepickerRow>\n <StyledInputFieldStyling\n id={id}\n ref={inputRef}\n type=\"text\"\n name=\"datepicker\"\n onKeyDown={(e) => e.key === 'Enter' && setOpen(true)}\n className={(invalid ? 'invalid' : '') + (open ? ' open' : '')}\n tabIndex={disabled || readOnly ? -1 : 0}\n onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={true}\n suppressReadOnlyStyles={!readOnly}\n required={required}\n />\n <IconWrapper>\n <Calendar size=\"24\" />\n </IconWrapper>\n </DatepickerRow>\n </div>\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/* If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400} />\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}
1
+ {"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","id","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport { Calendar, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { DatepickerFieldHeader, DatepickerFieldHeaderParams } from './DatepickerFieldHeader';\nimport { ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { ErrorMessage, InputFieldStyling, InputWrapper } from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport { ComponentMStyling, ComponentSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { useFocusVisibleRef } from '../common/FocusVisible';\nimport { Size } from '../types';\nimport { defaultOnMouseDownHandler } from '../common';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n id: string;\n disabled?: boolean;\n readOnly?: boolean;\n onChange?: (date: Date) => void;\n invalid?: boolean;\n value?: Date;\n dateFormat?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n yearPicker?: boolean;\n yearsBeforeCurrentDate?: number;\n yearsAfterCurrentDate?: number;\n margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n .react-datepicker-popper {\n z-index: ${Z_INDEXES.dropdown};\n }\n\n > div {\n display: block;\n\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 32px;\n width: 32px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ${COLORS.primary_20};\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n ${focusStyles}\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: 336px;\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ${COLORS.neutral_20};\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ${COLORS.neutral_200};\n background: ${COLORS.neutral_20};\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n padding-top: 0px;\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n\n .react-datepicker__year-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__year-text--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n }\n\n .react-datepicker__day {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.react-datepicker__day--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ${COLORS.neutral_700};\n background: ${COLORS.neutral_100};\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n }\n }\n`;\n\nconst IconWrapper = styled.div`\n pointer-events: none;\n position: absolute;\n right: 16px;\n width: 24px;\n height: 24px;\n z-index: ${Z_INDEXES.focus + 1};\n color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n &::placeholder {\n color: ${COLORS.neutral_500};\n }\n\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n ::placeholder {\n color: ${COLORS.primary_700};\n }\n\n cursor: pointer;\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active,\n &.open {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n background-color: ${COLORS.white};\n }\n\n &:hover ~ ${IconWrapper} {\n color: ${COLORS.primary_700};\n }\n\n &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n color: ${COLORS.primary_800};\n }\n\n &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n color: ${COLORS.neutral_300};\n }\n`;\n\nconst DatepickerField = ({\n id,\n disabled,\n readOnly,\n onChange,\n invalid,\n value,\n validationMessage,\n dateFormat,\n autoComplete,\n placeholder,\n required,\n yearPicker,\n yearsBeforeCurrentDate,\n yearsAfterCurrentDate,\n margin,\n}: DatepickerFieldProps) => {\n // Globally used variables within the component\n const inputRef = useFocusVisibleRef();\n const datepickerRef = React.useRef<any>(null);\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n const [openAt, setOpenAt] = React.useState<Date | null>(null);\n // 'open' flag is used only for tracking current state of the dropdown,\n // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n const [open, setOpen] = React.useState<boolean>(false);\n\n /**\n * Format the date in a specific way.\n */\n React.useEffect(() => {\n if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n }, [value]);\n\n React.useEffect(() => {\n if (yearPickerMode) {\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n //we have to touch DOM directly\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n const dropdownParent = selectedDate?.parentElement?.parentElement;\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n }\n }, [yearPickerMode]);\n\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n //otherwise after year selection datepicker will show January month of the selected year\n React.useEffect(() => {\n if (openAt) { \n datepickerRef.current.setOpen(true);\n //setOpenAt(null);\n }\n }, [openAt]);\n\n const handleCalendarClose = () => {\n inputRef.current?.blur();\n setOpen(false);\n };\n\n const handleCalendarOpen = () => {\n if (openAt) setOpenAt(null);\n setOpen(true);\n };\n\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n //itemsNumber - controls number of year select options generated in the dropdown\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape' || e.key === 'Esc')\n datepickerRef.current.setOpen(false);\n };\n\n return (\n <>\n {/* Let's render the input itself */}\n <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onCalendarClose={handleCalendarClose}\n onKeyDown={handleKeyDown}\n \n onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n onChange={(e: any) => {\n if (onChange) {\n if (yearPickerMode) {\n const newDate = new Date();\n newDate.setFullYear(e.getFullYear());\n newDate.setMonth(activeMonthPage);\n setOpenAt(newDate);\n } else onChange(e);\n }\n if (yearPickerMode) setYearPickerMode(false);\n }}\n disabled={disabled || readOnly}\n locale={en}\n showYearPicker={yearPickerMode}\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n maxDate={yearPickerMode ? maxDate : undefined}\n selected={value}\n openToDate={openAt ?? undefined}\n preventOpenOnFocus={true}\n shouldCloseOnSelect={true}\n renderCustomHeader={\n yearPicker\n ? (params: DatepickerFieldHeaderParams) =>\n React.createElement(\n DatepickerFieldHeader,\n {\n ...params,\n setActiveMonthPage,\n customHeaderCount: 0,\n yearPickerMode: yearPickerMode,\n setYearPickerMode: setYearPickerMode,\n },\n null,\n )\n : undefined\n }\n customInput={\n <InputWrapper disabled={disabled} readOnly={readOnly}>\n <div style={{ display: 'block', margin: '4px 0px' }}>\n <DatepickerRow>\n <StyledInputFieldStyling\n id={id}\n ref={inputRef}\n type=\"text\"\n name=\"datepicker\"\n onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n tabIndex={disabled || readOnly ? -1 : 0}\n onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={true}\n suppressReadOnlyStyles={!readOnly}\n required={required}\n />\n <IconWrapper>\n <Calendar size=\"24\" />\n </IconWrapper>\n </DatepickerRow>\n </div>\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/* If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400} />\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.9.0",
3
+ "version": "1.9.1",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [