@bbl-digital/snorre 2.4.9 → 2.4.10

Sign up to get free protection for your applications and to get access to all the features.
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",