@bbl-digital/snorre 2.4.9 → 2.4.10

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/bundle.js +74 -70
  2. package/esm/core/DatepickerRange/index.js +76 -71
  3. package/lib/core/DatepickerRange/index.d.ts.map +1 -1
  4. package/lib/core/DatepickerRange/index.js +76 -71
  5. package/package.json +1 -1
package/dist/bundle.js CHANGED
@@ -26109,8 +26109,7 @@
26109
26109
  });
26110
26110
 
26111
26111
  const showFromMonth = () => {
26112
- if (!dates.from) return; // Check if dates.to and dates.from have 2 months between them
26113
-
26112
+ if (!dates.from) return;
26114
26113
  const toMonth = dates.from.getMonth() + 1;
26115
26114
  const fromMonth = dates.from.getMonth() + 1;
26116
26115
 
@@ -26125,10 +26124,10 @@
26125
26124
  React.useEffect(() => {
26126
26125
  if (isMobile && toPickerRef) toPickerRef.current.input.readOnly = true;
26127
26126
  }, [isMobile, toPickerRef]);
26128
- const modifiers = {
26127
+ const modifiers = React.useMemo(() => ({
26129
26128
  start: dates.from,
26130
26129
  end: dates.to
26131
- };
26130
+ }), [dates.from, dates.to]);
26132
26131
 
26133
26132
  const pickerPropsDefault = key => ({
26134
26133
  locale: 'no',
@@ -26156,21 +26155,6 @@
26156
26155
  }]
26157
26156
  });
26158
26157
 
26159
- const fromPickerProps = { ...pickerPropsDefault('from'),
26160
- disabledDays: {
26161
- after: dates.to
26162
- },
26163
- toMonth: dates.to,
26164
- onDayClick: () => toPickerRef.current?.getInput().focus()
26165
- };
26166
- const toPickerProps = { ...pickerPropsDefault('to'),
26167
- disabledDays: {
26168
- before: dates.from
26169
- },
26170
- month: dates.from,
26171
- fromMonth: dates.from
26172
- };
26173
-
26174
26158
  const handleChange = key => date => {
26175
26159
  setDates(prev => ({ ...prev,
26176
26160
  [key]: date
@@ -26180,58 +26164,78 @@
26180
26164
  });
26181
26165
  };
26182
26166
 
26183
- return jsxRuntime$1.jsxs(Wrapper$t, {
26184
- css: () => [styles$d.wrapper(maxWidth, minWidth), css && css],
26185
- children: [jsxRuntime$1.jsxs(Input, {
26186
- title: disabled?.from && disabledTitle?.from ? disabledTitle?.from : undefined,
26187
- css: theme => [styles$d.default(theme), validation && styles$d.validation, invalidMessage && styles$d.invalid(theme)],
26188
- children: [label?.from && jsxRuntime$1.jsx(Label$3, {
26189
- children: label.from
26190
- }), jsxRuntime$1.jsx(DayPickerInput__default["default"], {
26191
- ref: fromPickerRef,
26192
- keepFocus: false,
26193
- format: FORMAT,
26194
- formatDate: formatDate,
26195
- parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDateAvailable),
26196
- onDayChange: handleChange('from'),
26197
- dayPickerProps: fromPickerProps,
26198
- placeholder: 'dd.mm.åååå',
26199
- onDayPickerHide: onBlur,
26200
- value: value?.from,
26201
- inputProps: {
26202
- disabled: disabled?.from
26203
- }
26204
- }), invalidMessage?.from && jsxRuntime$1.jsx(IconErrorOutline$1, {
26205
- size: "16px"
26206
- }), invalidMessage && jsxRuntime$1.jsx(ErrorMessage$3, {
26207
- children: invalidMessage.from
26208
- })]
26209
- }), jsxRuntime$1.jsx(DividerLine, {
26210
- children: "-"
26211
- }), jsxRuntime$1.jsxs(Input, {
26212
- css: theme => [styles$d.default(theme), validation && styles$d.validation, invalidMessage && styles$d.invalid(theme)],
26213
- title: disabled?.to && disabledTitle?.to ? disabledTitle.to : undefined,
26214
- children: [label?.to && jsxRuntime$1.jsx(Label$3, {
26215
- children: label.to
26216
- }), jsxRuntime$1.jsx(DayPickerInput__default["default"], {
26217
- ref: toPickerRef,
26218
- format: FORMAT,
26219
- formatDate: formatDate,
26220
- parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDate),
26221
- onDayChange: handleChange('to'),
26222
- dayPickerProps: toPickerProps,
26223
- placeholder: 'dd.mm.åååå',
26224
- onDayPickerHide: onBlur,
26225
- value: value?.to,
26226
- inputProps: {
26227
- disabled: disabled?.to
26228
- }
26229
- }), invalidMessage?.to && jsxRuntime$1.jsx(IconErrorOutline$1, {
26230
- size: "16px"
26231
- }), invalidMessage && jsxRuntime$1.jsx(ErrorMessage$3, {
26232
- children: invalidMessage?.to
26167
+ return jsxRuntime$1.jsx(FocusTrap__default["default"], {
26168
+ active: true,
26169
+ focusTrapOptions: {
26170
+ initialFocus: false,
26171
+ allowOutsideClick: true,
26172
+ clickOutsideDeactivates: true
26173
+ },
26174
+ children: jsxRuntime$1.jsxs(Wrapper$t, {
26175
+ css: () => [styles$d.wrapper(maxWidth, minWidth), css && css],
26176
+ children: [jsxRuntime$1.jsxs(Input, {
26177
+ title: disabled?.from && disabledTitle?.from ? disabledTitle?.from : undefined,
26178
+ css: theme => [styles$d.default(theme), validation && styles$d.validation, invalidMessage && styles$d.invalid(theme)],
26179
+ children: [label?.from && jsxRuntime$1.jsx(Label$3, {
26180
+ children: label.from
26181
+ }), jsxRuntime$1.jsx(DayPickerInput__default["default"], {
26182
+ ref: fromPickerRef,
26183
+ keepFocus: false,
26184
+ format: FORMAT,
26185
+ formatDate: formatDate,
26186
+ parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDateAvailable),
26187
+ onDayChange: handleChange('from'),
26188
+ dayPickerProps: { ...pickerPropsDefault('from'),
26189
+ disabledDays: {
26190
+ after: dates.to
26191
+ },
26192
+ toMonth: dates.to,
26193
+ onDayClick: () => toPickerRef.current?.getInput().focus()
26194
+ },
26195
+ placeholder: 'dd.mm.åååå',
26196
+ onDayPickerHide: onBlur,
26197
+ value: value?.from,
26198
+ inputProps: {
26199
+ disabled: disabled?.from
26200
+ }
26201
+ }), invalidMessage?.from && jsxRuntime$1.jsx(IconErrorOutline$1, {
26202
+ size: "16px"
26203
+ }), invalidMessage && jsxRuntime$1.jsx(ErrorMessage$3, {
26204
+ children: invalidMessage.from
26205
+ })]
26206
+ }), jsxRuntime$1.jsx(DividerLine, {
26207
+ children: "-"
26208
+ }), jsxRuntime$1.jsxs(Input, {
26209
+ css: theme => [styles$d.default(theme), validation && styles$d.validation, invalidMessage && styles$d.invalid(theme)],
26210
+ title: disabled?.to && disabledTitle?.to ? disabledTitle.to : undefined,
26211
+ children: [label?.to && jsxRuntime$1.jsx(Label$3, {
26212
+ children: label.to
26213
+ }), jsxRuntime$1.jsx(DayPickerInput__default["default"], {
26214
+ ref: toPickerRef,
26215
+ format: FORMAT,
26216
+ formatDate: formatDate,
26217
+ parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDate),
26218
+ onDayChange: handleChange('to'),
26219
+ dayPickerProps: { ...pickerPropsDefault('to'),
26220
+ disabledDays: {
26221
+ before: dates.from
26222
+ },
26223
+ month: dates.from,
26224
+ fromMonth: dates.from
26225
+ },
26226
+ placeholder: 'dd.mm.åååå',
26227
+ onDayPickerHide: onBlur,
26228
+ value: value?.to,
26229
+ inputProps: {
26230
+ disabled: disabled?.to
26231
+ }
26232
+ }), invalidMessage?.to && jsxRuntime$1.jsx(IconErrorOutline$1, {
26233
+ size: "16px"
26234
+ }), invalidMessage && jsxRuntime$1.jsx(ErrorMessage$3, {
26235
+ children: invalidMessage?.to
26236
+ })]
26233
26237
  })]
26234
- })]
26238
+ })
26235
26239
  });
26236
26240
  };
26237
26241
 
package/esm/core/DatepickerRange/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  /** @jsxImportSource @emotion/react */
2
- import { useRef, useState, useEffect } from 'react';
2
+ import FocusTrap from 'focus-trap-react';
3
+ import { useRef, useState, useEffect, useMemo } from 'react';
3
4
  import DayPickerInput from 'react-day-picker/DayPickerInput';
4
5
  import { useIsMobile } from '../..';
5
6
  import IconErrorOutline from '../../icons/General/IconErrorOutline';
@@ -37,8 +38,7 @@ const DatePickerRange = ({
37
38
  });
38
39
 
39
40
  const showFromMonth = () => {
40
- if (!dates.from) return; // Check if dates.to and dates.from have 2 months between them
41
-
41
+ if (!dates.from) return;
42
42
  const toMonth = dates.from.getMonth() + 1;
43
43
  const fromMonth = dates.from.getMonth() + 1;
44
44
 
@@ -53,10 +53,10 @@ const DatePickerRange = ({
53
53
  useEffect(() => {
54
54
  if (isMobile && toPickerRef) toPickerRef.current.input.readOnly = true;
55
55
  }, [isMobile, toPickerRef]);
56
- const modifiers = {
56
+ const modifiers = useMemo(() => ({
57
57
  start: dates.from,
58
58
  end: dates.to
59
- };
59
+ }), [dates.from, dates.to]);
60
60
 
61
61
  const pickerPropsDefault = key => ({
62
62
  locale: 'no',
@@ -84,21 +84,6 @@ const DatePickerRange = ({
84
84
  }]
85
85
  });
86
86
 
87
- const fromPickerProps = { ...pickerPropsDefault('from'),
88
- disabledDays: {
89
- after: dates.to
90
- },
91
- toMonth: dates.to,
92
- onDayClick: () => toPickerRef.current?.getInput().focus()
93
- };
94
- const toPickerProps = { ...pickerPropsDefault('to'),
95
- disabledDays: {
96
- before: dates.from
97
- },
98
- month: dates.from,
99
- fromMonth: dates.from
100
- };
101
-
102
87
  const handleChange = key => date => {
103
88
  setDates(prev => ({ ...prev,
104
89
  [key]: date
@@ -108,58 +93,78 @@ const DatePickerRange = ({
108
93
  });
109
94
  };
110
95
 
111
- return _jsxs(Wrapper, {
112
- css: () => [styles.wrapper(maxWidth, minWidth), css && css],
113
- children: [_jsxs(Input, {
114
- title: disabled?.from && disabledTitle?.from ? disabledTitle?.from : undefined,
115
- css: theme => [styles.default(theme), validation && styles.validation, invalidMessage && styles.invalid(theme)],
116
- children: [label?.from && _jsx(Label, {
117
- children: label.from
118
- }), _jsx(DayPickerInput, {
119
- ref: fromPickerRef,
120
- keepFocus: false,
121
- format: FORMAT,
122
- formatDate: formatDate,
123
- parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDateAvailable),
124
- onDayChange: handleChange('from'),
125
- dayPickerProps: fromPickerProps,
126
- placeholder: 'dd.mm.åååå',
127
- onDayPickerHide: onBlur,
128
- value: value?.from,
129
- inputProps: {
130
- disabled: disabled?.from
131
- }
132
- }), invalidMessage?.from && _jsx(IconErrorOutline, {
133
- size: "16px"
134
- }), invalidMessage && _jsx(ErrorMessage, {
135
- children: invalidMessage.from
136
- })]
137
- }), _jsx(DividerLine, {
138
- children: "-"
139
- }), _jsxs(Input, {
140
- css: theme => [styles.default(theme), validation && styles.validation, invalidMessage && styles.invalid(theme)],
141
- title: disabled?.to && disabledTitle?.to ? disabledTitle.to : undefined,
142
- children: [label?.to && _jsx(Label, {
143
- children: label.to
144
- }), _jsx(DayPickerInput, {
145
- ref: toPickerRef,
146
- format: FORMAT,
147
- formatDate: formatDate,
148
- parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDate),
149
- onDayChange: handleChange('to'),
150
- dayPickerProps: toPickerProps,
151
- placeholder: 'dd.mm.åååå',
152
- onDayPickerHide: onBlur,
153
- value: value?.to,
154
- inputProps: {
155
- disabled: disabled?.to
156
- }
157
- }), invalidMessage?.to && _jsx(IconErrorOutline, {
158
- size: "16px"
159
- }), invalidMessage && _jsx(ErrorMessage, {
160
- children: invalidMessage?.to
96
+ return _jsx(FocusTrap, {
97
+ active: true,
98
+ focusTrapOptions: {
99
+ initialFocus: false,
100
+ allowOutsideClick: true,
101
+ clickOutsideDeactivates: true
102
+ },
103
+ children: _jsxs(Wrapper, {
104
+ css: () => [styles.wrapper(maxWidth, minWidth), css && css],
105
+ children: [_jsxs(Input, {
106
+ title: disabled?.from && disabledTitle?.from ? disabledTitle?.from : undefined,
107
+ css: theme => [styles.default(theme), validation && styles.validation, invalidMessage && styles.invalid(theme)],
108
+ children: [label?.from && _jsx(Label, {
109
+ children: label.from
110
+ }), _jsx(DayPickerInput, {
111
+ ref: fromPickerRef,
112
+ keepFocus: false,
113
+ format: FORMAT,
114
+ formatDate: formatDate,
115
+ parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDateAvailable),
116
+ onDayChange: handleChange('from'),
117
+ dayPickerProps: { ...pickerPropsDefault('from'),
118
+ disabledDays: {
119
+ after: dates.to
120
+ },
121
+ toMonth: dates.to,
122
+ onDayClick: () => toPickerRef.current?.getInput().focus()
123
+ },
124
+ placeholder: 'dd.mm.åååå',
125
+ onDayPickerHide: onBlur,
126
+ value: value?.from,
127
+ inputProps: {
128
+ disabled: disabled?.from
129
+ }
130
+ }), invalidMessage?.from && _jsx(IconErrorOutline, {
131
+ size: "16px"
132
+ }), invalidMessage && _jsx(ErrorMessage, {
133
+ children: invalidMessage.from
134
+ })]
135
+ }), _jsx(DividerLine, {
136
+ children: "-"
137
+ }), _jsxs(Input, {
138
+ css: theme => [styles.default(theme), validation && styles.validation, invalidMessage && styles.invalid(theme)],
139
+ title: disabled?.to && disabledTitle?.to ? disabledTitle.to : undefined,
140
+ children: [label?.to && _jsx(Label, {
141
+ children: label.to
142
+ }), _jsx(DayPickerInput, {
143
+ ref: toPickerRef,
144
+ format: FORMAT,
145
+ formatDate: formatDate,
146
+ parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDate),
147
+ onDayChange: handleChange('to'),
148
+ dayPickerProps: { ...pickerPropsDefault('to'),
149
+ disabledDays: {
150
+ before: dates.from
151
+ },
152
+ month: dates.from,
153
+ fromMonth: dates.from
154
+ },
155
+ placeholder: 'dd.mm.åååå',
156
+ onDayPickerHide: onBlur,
157
+ value: value?.to,
158
+ inputProps: {
159
+ disabled: disabled?.to
160
+ }
161
+ }), invalidMessage?.to && _jsx(IconErrorOutline, {
162
+ size: "16px"
163
+ }), invalidMessage && _jsx(ErrorMessage, {
164
+ children: invalidMessage?.to
165
+ })]
161
166
  })]
162
- })]
167
+ })
163
168
  });
164
169
  };
165
170
 
package/lib/core/DatepickerRange/index.d.ts.map CHANGED
@@ -1 +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;AAuBjD,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,CA+JrC,CAAA;AAED,eAAe,eAAe,CAAA"}
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"}
package/lib/core/DatepickerRange/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  /** @jsxImportSource @emotion/react */
2
- import { useRef, useState, useEffect } from 'react';
2
+ import FocusTrap from 'focus-trap-react';
3
+ import { useRef, useState, useEffect, useMemo } from 'react';
3
4
  import DayPickerInput from 'react-day-picker/DayPickerInput';
4
5
  import { useIsMobile } from '../..';
5
6
  import IconErrorOutline from '../../icons/General/IconErrorOutline';
@@ -37,8 +38,7 @@ const DatePickerRange = ({
37
38
  });
38
39
 
39
40
  const showFromMonth = () => {
40
- if (!dates.from) return; // Check if dates.to and dates.from have 2 months between them
41
-
41
+ if (!dates.from) return;
42
42
  const toMonth = dates.from.getMonth() + 1;
43
43
  const fromMonth = dates.from.getMonth() + 1;
44
44
 
@@ -53,10 +53,10 @@ const DatePickerRange = ({
53
53
  useEffect(() => {
54
54
  if (isMobile && toPickerRef) toPickerRef.current.input.readOnly = true;
55
55
  }, [isMobile, toPickerRef]);
56
- const modifiers = {
56
+ const modifiers = useMemo(() => ({
57
57
  start: dates.from,
58
58
  end: dates.to
59
- };
59
+ }), [dates.from, dates.to]);
60
60
 
61
61
  const pickerPropsDefault = key => ({
62
62
  locale: 'no',
@@ -84,21 +84,6 @@ const DatePickerRange = ({
84
84
  }]
85
85
  });
86
86
 
87
- const fromPickerProps = { ...pickerPropsDefault('from'),
88
- disabledDays: {
89
- after: dates.to
90
- },
91
- toMonth: dates.to,
92
- onDayClick: () => toPickerRef.current?.getInput().focus()
93
- };
94
- const toPickerProps = { ...pickerPropsDefault('to'),
95
- disabledDays: {
96
- before: dates.from
97
- },
98
- month: dates.from,
99
- fromMonth: dates.from
100
- };
101
-
102
87
  const handleChange = key => date => {
103
88
  setDates(prev => ({ ...prev,
104
89
  [key]: date
@@ -108,58 +93,78 @@ const DatePickerRange = ({
108
93
  });
109
94
  };
110
95
 
111
- return _jsxs(Wrapper, {
112
- css: () => [styles.wrapper(maxWidth, minWidth), css && css],
113
- children: [_jsxs(Input, {
114
- title: disabled?.from && disabledTitle?.from ? disabledTitle?.from : undefined,
115
- css: theme => [styles.default(theme), validation && styles.validation, invalidMessage && styles.invalid(theme)],
116
- children: [label?.from && _jsx(Label, {
117
- children: label.from
118
- }), _jsx(DayPickerInput, {
119
- ref: fromPickerRef,
120
- keepFocus: false,
121
- format: FORMAT,
122
- formatDate: formatDate,
123
- parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDateAvailable),
124
- onDayChange: handleChange('from'),
125
- dayPickerProps: fromPickerProps,
126
- placeholder: 'dd.mm.åååå',
127
- onDayPickerHide: onBlur,
128
- value: value?.from,
129
- inputProps: {
130
- disabled: disabled?.from
131
- }
132
- }), invalidMessage?.from && _jsx(IconErrorOutline, {
133
- size: "16px"
134
- }), invalidMessage && _jsx(ErrorMessage, {
135
- children: invalidMessage.from
136
- })]
137
- }), _jsx(DividerLine, {
138
- children: "-"
139
- }), _jsxs(Input, {
140
- css: theme => [styles.default(theme), validation && styles.validation, invalidMessage && styles.invalid(theme)],
141
- title: disabled?.to && disabledTitle?.to ? disabledTitle.to : undefined,
142
- children: [label?.to && _jsx(Label, {
143
- children: label.to
144
- }), _jsx(DayPickerInput, {
145
- ref: toPickerRef,
146
- format: FORMAT,
147
- formatDate: formatDate,
148
- parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDate),
149
- onDayChange: handleChange('to'),
150
- dayPickerProps: toPickerProps,
151
- placeholder: 'dd.mm.åååå',
152
- onDayPickerHide: onBlur,
153
- value: value?.to,
154
- inputProps: {
155
- disabled: disabled?.to
156
- }
157
- }), invalidMessage?.to && _jsx(IconErrorOutline, {
158
- size: "16px"
159
- }), invalidMessage && _jsx(ErrorMessage, {
160
- children: invalidMessage?.to
96
+ return _jsx(FocusTrap, {
97
+ active: true,
98
+ focusTrapOptions: {
99
+ initialFocus: false,
100
+ allowOutsideClick: true,
101
+ clickOutsideDeactivates: true
102
+ },
103
+ children: _jsxs(Wrapper, {
104
+ css: () => [styles.wrapper(maxWidth, minWidth), css && css],
105
+ children: [_jsxs(Input, {
106
+ title: disabled?.from && disabledTitle?.from ? disabledTitle?.from : undefined,
107
+ css: theme => [styles.default(theme), validation && styles.validation, invalidMessage && styles.invalid(theme)],
108
+ children: [label?.from && _jsx(Label, {
109
+ children: label.from
110
+ }), _jsx(DayPickerInput, {
111
+ ref: fromPickerRef,
112
+ keepFocus: false,
113
+ format: FORMAT,
114
+ formatDate: formatDate,
115
+ parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDateAvailable),
116
+ onDayChange: handleChange('from'),
117
+ dayPickerProps: { ...pickerPropsDefault('from'),
118
+ disabledDays: {
119
+ after: dates.to
120
+ },
121
+ toMonth: dates.to,
122
+ onDayClick: () => toPickerRef.current?.getInput().focus()
123
+ },
124
+ placeholder: 'dd.mm.åååå',
125
+ onDayPickerHide: onBlur,
126
+ value: value?.from,
127
+ inputProps: {
128
+ disabled: disabled?.from
129
+ }
130
+ }), invalidMessage?.from && _jsx(IconErrorOutline, {
131
+ size: "16px"
132
+ }), invalidMessage && _jsx(ErrorMessage, {
133
+ children: invalidMessage.from
134
+ })]
135
+ }), _jsx(DividerLine, {
136
+ children: "-"
137
+ }), _jsxs(Input, {
138
+ css: theme => [styles.default(theme), validation && styles.validation, invalidMessage && styles.invalid(theme)],
139
+ title: disabled?.to && disabledTitle?.to ? disabledTitle.to : undefined,
140
+ children: [label?.to && _jsx(Label, {
141
+ children: label.to
142
+ }), _jsx(DayPickerInput, {
143
+ ref: toPickerRef,
144
+ format: FORMAT,
145
+ formatDate: formatDate,
146
+ parseDate: (date, format, locale) => parseDate(date, format, locale, undefined, maxDate),
147
+ onDayChange: handleChange('to'),
148
+ dayPickerProps: { ...pickerPropsDefault('to'),
149
+ disabledDays: {
150
+ before: dates.from
151
+ },
152
+ month: dates.from,
153
+ fromMonth: dates.from
154
+ },
155
+ placeholder: 'dd.mm.åååå',
156
+ onDayPickerHide: onBlur,
157
+ value: value?.to,
158
+ inputProps: {
159
+ disabled: disabled?.to
160
+ }
161
+ }), invalidMessage?.to && _jsx(IconErrorOutline, {
162
+ size: "16px"
163
+ }), invalidMessage && _jsx(ErrorMessage, {
164
+ children: invalidMessage?.to
165
+ })]
161
166
  })]
162
- })]
167
+ })
163
168
  });
164
169
  };
165
170
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbl-digital/snorre",
3
- "version": "2.4.9",
3
+ "version": "2.4.10",
4
4
  "description": "Design library for BBL Digital",
5
5
  "license": "MIT",
6
6
  "main": "./lib/index.js",