colibri-ui 0.8.61 → 0.8.63

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 (61) hide show
  1. package/Button/Button.module.css +1 -0
  2. package/Calendar/components/Month/Month.d.ts +1 -3
  3. package/Calendar/components/Month/Month.js +26 -12
  4. package/Calendar/components/Month/index.module.css +7 -3
  5. package/Calendar/index.js +99 -12
  6. package/Calendar/index.module.css +1 -0
  7. package/Calendar/index.props.d.ts +1 -0
  8. package/Chip/index.js +1 -1
  9. package/ClickOutside/index.d.ts +1 -1
  10. package/ClickOutside/index.js +3 -1
  11. package/Icons/Close.js +1 -0
  12. package/Icons/Exit.js +1 -0
  13. package/Icons/Help.js +1 -0
  14. package/InputRadio/index.js +1 -1
  15. package/Modal/Modal.module.css +1 -1
  16. package/Modal/components/Close/Close.module.css +11 -1
  17. package/Modal/components/Close/index.d.ts +4 -2
  18. package/Modal/components/Close/index.js +11 -9
  19. package/Modal/components/Content/Content.module.css +1 -1
  20. package/Modal/components/Content/index.d.ts +1 -1
  21. package/Modal/components/Content/index.js +0 -1
  22. package/Modal/components/Title/Title.module.css +1 -1
  23. package/Modal/components/Title/index.d.ts +1 -1
  24. package/Modal/components/Title/index.js +0 -1
  25. package/Modal/index.js +2 -2
  26. package/MultiSelect/index.js +1 -3
  27. package/TextArea/TextArea.module.css +1 -2
  28. package/TextArea/index.props.d.ts +1 -1
  29. package/esm/Button/Button.module.css +1 -0
  30. package/esm/Calendar/components/Month/Month.d.ts +1 -3
  31. package/esm/Calendar/components/Month/Month.js +27 -13
  32. package/esm/Calendar/components/Month/index.module.css +7 -3
  33. package/esm/Calendar/index.js +99 -13
  34. package/esm/Calendar/index.module.css +1 -0
  35. package/esm/Calendar/index.props.d.ts +1 -0
  36. package/esm/Chip/index.js +1 -1
  37. package/esm/ClickOutside/index.d.ts +1 -1
  38. package/esm/ClickOutside/index.js +3 -1
  39. package/esm/Icons/Close.js +1 -0
  40. package/esm/Icons/Exit.js +1 -0
  41. package/esm/Icons/Help.js +1 -0
  42. package/esm/InputRadio/index.js +1 -1
  43. package/esm/Modal/Modal.module.css +1 -1
  44. package/esm/Modal/components/Close/Close.module.css +11 -1
  45. package/esm/Modal/components/Close/index.d.ts +4 -2
  46. package/esm/Modal/components/Close/index.js +11 -9
  47. package/esm/Modal/components/Content/Content.module.css +1 -1
  48. package/esm/Modal/components/Content/index.d.ts +1 -1
  49. package/esm/Modal/components/Content/index.js +0 -1
  50. package/esm/Modal/components/Title/Title.module.css +1 -1
  51. package/esm/Modal/components/Title/index.d.ts +1 -1
  52. package/esm/Modal/components/Title/index.js +0 -1
  53. package/esm/Modal/index.js +2 -2
  54. package/esm/MultiSelect/index.js +1 -3
  55. package/esm/TextArea/TextArea.module.css +1 -2
  56. package/esm/TextArea/index.props.d.ts +1 -1
  57. package/esm/libs/requestIdleCallback/index.d.ts +1 -1
  58. package/esm/libs/requestIdleCallback/index.js +0 -3
  59. package/libs/requestIdleCallback/index.d.ts +1 -1
  60. package/libs/requestIdleCallback/index.js +0 -3
  61. package/package.json +1 -1
@@ -62,6 +62,7 @@
62
62
  line-height: 36px;
63
63
  }
64
64
  .size_l {
65
+ border-radius: 1.5rem;
65
66
  font-size: 18px;
66
67
  height: 42px;
67
68
  line-height: 42px;
@@ -1,8 +1,5 @@
1
1
  import * as React from "react";
2
2
  import type { CalendarTitleSize } from "../../index.props";
3
- import type { FunctionComponent } from "react";
4
- export interface FCWithElements<T = {}> extends FunctionComponent<T> {
5
- }
6
3
  type Props = {
7
4
  today: string;
8
5
  startDate: Date;
@@ -13,6 +10,7 @@ type Props = {
13
10
  offsetLeft: number;
14
11
  availableDates?: string[];
15
12
  titleSize?: CalendarTitleSize;
13
+ focusedDate?: string;
16
14
  };
17
15
  declare const _default: React.NamedExoticComponent<Props>;
18
16
  export default _default;
@@ -38,8 +38,8 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
38
38
 
39
39
  var WEEK_DAYS = Array.from({
40
40
  length: 7
41
- }, function (_, idx) {
42
- var index$1 = idx + 1;
41
+ }, function (_, weekDayIndex) {
42
+ var index$1 = weekDayIndex + 1;
43
43
  return {
44
44
  index: index$1,
45
45
  name: index.getShortWeekDayNameByIndex(index$1),
@@ -77,21 +77,33 @@ var DayButton = /*#__PURE__*/React__namespace.memo(function (_ref2) {
77
77
  var day = _ref2.day,
78
78
  isActive = _ref2.isActive,
79
79
  isSelected = _ref2.isSelected,
80
+ isFocused = _ref2.isFocused,
80
81
  dateString = _ref2.dateString,
81
82
  onDayClick = _ref2.onDayClick;
83
+ var buttonRef = React.useRef(null);
84
+ React.useEffect(function () {
85
+ if (isFocused && buttonRef.current) {
86
+ buttonRef.current.focus({
87
+ preventScroll: true
88
+ });
89
+ }
90
+ }, [isFocused]);
82
91
  var handleClick = React.useCallback(function () {
83
92
  if (isActive) {
84
93
  onDayClick(dateString);
85
94
  }
86
95
  }, [isActive, dateString, onDayClick]);
87
- var dayInnerActive = isActive ? "day-inner-active" : "";
88
- var bgStyle = isSelected ? SELECTED_BG_STYLE : TRANSPARENT_BG_STYLE;
96
+ var dayInnerActiveClass = isActive ? "day-inner-active" : "";
97
+ var backgroundStyle = isSelected ? SELECTED_BG_STYLE : TRANSPARENT_BG_STYLE;
89
98
  return /*#__PURE__*/React__namespace.createElement("button", {
90
- className: clsx__default.default(styles__default.default["day-inner"], dayInnerActive),
91
- style: bgStyle,
92
- role: "button",
99
+ ref: buttonRef,
100
+ className: clsx__default.default(styles__default.default["day-inner"], dayInnerActiveClass, _defineProperty__default.default({}, styles__default.default["day-focused"], isFocused)),
101
+ style: backgroundStyle,
93
102
  type: "button",
94
- onClick: isActive ? handleClick : undefined
103
+ tabIndex: isFocused ? 0 : -1,
104
+ onClick: isActive ? handleClick : undefined,
105
+ "aria-label": dateString,
106
+ "aria-pressed": isSelected
95
107
  }, /*#__PURE__*/React__namespace.createElement(index$1.default, {
96
108
  size: "s",
97
109
  style: {
@@ -110,7 +122,8 @@ var Month = function Month(props) {
110
122
  selectedDate = props.selectedDate,
111
123
  selectedPeriod = props.selectedPeriod,
112
124
  activeDays = props.activeDays,
113
- availableDates = props.availableDates;
125
+ availableDates = props.availableDates,
126
+ focusedDate = props.focusedDate;
114
127
  var year = startDate.getFullYear();
115
128
  var month = React.useMemo(function () {
116
129
  return leadingZeros.leadingZeros(startDate.getMonth() + 1, 2);
@@ -159,11 +172,11 @@ var Month = function Month(props) {
159
172
  key: "week-".concat(weekIndex),
160
173
  className: styles__default.default.week
161
174
  }, days.map(function (day, dayIndex) {
162
- var key = "day-".concat(dayIndex);
175
+ var itemKey = "day-".concat(dayIndex);
163
176
  if (day.isDummy) {
164
177
  return /*#__PURE__*/React__namespace.createElement("li", {
165
178
  className: styles__default.default.day,
166
- key: key
179
+ key: itemKey
167
180
  });
168
181
  }
169
182
  var dateString = "".concat(year, "-").concat(month, "-").concat(leadingZeros.leadingZeros(day.day, 2));
@@ -172,11 +185,12 @@ var Month = function Month(props) {
172
185
  isEndOfSelection: day.isEndOfSelection,
173
186
  isSelected: day.isSelected,
174
187
  isInSelectedRange: day.isInSelectedRange,
175
- key: key
188
+ key: itemKey
176
189
  }, /*#__PURE__*/React__namespace.createElement(DayButton, {
177
190
  day: day.day,
178
191
  isActive: Boolean(day.isActive),
179
192
  isSelected: Boolean(day.isSelected),
193
+ isFocused: focusedDate === dateString,
180
194
  dateString: dateString,
181
195
  onDayClick: onDayClick
182
196
  }));
@@ -30,7 +30,6 @@
30
30
  min-height: 32px;
31
31
  position: relative;
32
32
  text-align: center;
33
- width: 32px;
34
33
  }
35
34
 
36
35
  .legend {
@@ -47,7 +46,6 @@
47
46
  height: 32px;
48
47
  position: relative;
49
48
  text-align: center;
50
- width: 32px;
51
49
  z-index: 0;
52
50
  }
53
51
  .selected-range-day:hover {
@@ -123,12 +121,13 @@
123
121
  border-radius: 6px;
124
122
  display: inline-block;
125
123
  height: 32px;
124
+ max-width: 32px;
126
125
  outline: 0;
127
126
  padding: 0;
128
127
  position: relative;
129
128
  text-align: center;
130
129
  transition: background 0.3s ease;
131
- width: 32px;
130
+ width: 100%;
132
131
  }
133
132
 
134
133
  .day-inner-active {
@@ -136,4 +135,9 @@
136
135
  }
137
136
  .day-inner-active:hover {
138
137
  background: var(--palette-bg-2);
138
+ }
139
+
140
+ .day-focused {
141
+ outline: 2px solid var(--palette-black, #000);
142
+ outline-offset: 2px;
139
143
  }
package/Calendar/index.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
6
+ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
6
7
  var React = require('react');
7
8
  var clsx = require('clsx');
8
9
  var index$1 = require('../libs/requestIdleCallback/index.js');
@@ -19,6 +20,7 @@ var ArrowNext = require('../Icons/ArrowNext.js');
19
20
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
20
21
 
21
22
  var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
23
+ var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
22
24
  var React__default = /*#__PURE__*/_interopDefault(React);
23
25
  var clsx__default = /*#__PURE__*/_interopDefault(clsx);
24
26
  var styles__default = /*#__PURE__*/_interopDefault(styles);
@@ -49,11 +51,21 @@ var calendarReducer = function calendarReducer(state, action) {
49
51
  return Object.assign(Object.assign({}, state), {
50
52
  isRangeCompleted: action.payload
51
53
  });
54
+ case "SET_FOCUSED_DATE":
55
+ return Object.assign(Object.assign({}, state), {
56
+ focusedDate: action.payload
57
+ });
58
+ case "NAVIGATE_KEYBOARD":
59
+ return Object.assign(Object.assign({}, state), {
60
+ focusedDate: action.payload.focusedDate,
61
+ currentMonthOffset: Math.max(0, action.payload.monthOffset)
62
+ });
52
63
  case "SELECT_DATE":
53
64
  return Object.assign(Object.assign({}, state), {
54
65
  selectedDate: action.payload.date,
55
66
  selectedPeriod: action.payload.period,
56
67
  isRangeCompleted: action.payload.rangeCompleted,
68
+ focusedDate: action.payload.date,
57
69
  currentMonthOffset: getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(action.payload.startMonth, action.payload.date)
58
70
  });
59
71
  case "INCREMENT_MONTH_OFFSET":
@@ -86,6 +98,7 @@ var Calendar = function Calendar(_ref) {
86
98
  activeDates = _ref.activeDates,
87
99
  datePresets = _ref.datePresets,
88
100
  availableDates = _ref.availableDates,
101
+ maxDate = _ref.maxDate,
89
102
  canSelectRange = _ref.canSelectRange,
90
103
  onChange = _ref.onChange,
91
104
  onCancel = _ref.onCancel,
@@ -96,11 +109,21 @@ var Calendar = function Calendar(_ref) {
96
109
  className = _ref.className,
97
110
  _ref$titleSize = _ref.titleSize,
98
111
  titleSize = _ref$titleSize === void 0 ? "h3" : _ref$titleSize;
99
- var $root = React.useRef(null);
112
+ var rootElementRef = React.useRef(null);
100
113
  var startMonth = getStartMonth.getStartMonth({
101
114
  today: today,
102
115
  activeDates: activeDates
103
116
  });
117
+ var maxMonthOffset = React.useMemo(function () {
118
+ var candidates = [];
119
+ if (maxDate) candidates.push(maxDate);
120
+ if (availableDates && availableDates.length > 0) {
121
+ candidates.push(_toConsumableArray__default.default(availableDates).sort().at(-1));
122
+ }
123
+ if (candidates.length === 0) return Infinity;
124
+ var lastDate = [].concat(candidates).sort().at(-1);
125
+ return getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, lastDate);
126
+ }, [maxDate, availableDates, startMonth]);
104
127
  var getInitialOffset = function getInitialOffset() {
105
128
  if (initialSelectedDate) {
106
129
  return getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, initialSelectedDate);
@@ -114,17 +137,32 @@ var Calendar = function Calendar(_ref) {
114
137
  selectedPeriod: initialSelectedPeriod,
115
138
  currentMonthOffset: getInitialOffset(),
116
139
  contentWidth: 0,
117
- isRangeCompleted: true
140
+ isRangeCompleted: true,
141
+ focusedDate: initialSelectedDate
118
142
  }),
119
143
  _useReducer2 = _slicedToArray__default.default(_useReducer, 2),
120
144
  state = _useReducer2[0],
121
145
  dispatch = _useReducer2[1];
122
146
  React.useEffect(function () {
123
- var _a;
147
+ var rootElement = rootElementRef.current;
148
+ if (!rootElement) return;
124
149
  dispatch({
125
150
  type: "SET_CONTENT_WIDTH",
126
- payload: ((_a = $root.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0
151
+ payload: rootElement.offsetWidth
152
+ });
153
+ var observer = new ResizeObserver(function () {
154
+ var width = rootElement.offsetWidth;
155
+ if (width) {
156
+ dispatch({
157
+ type: "SET_CONTENT_WIDTH",
158
+ payload: width
159
+ });
160
+ }
127
161
  });
162
+ observer.observe(rootElement);
163
+ return function () {
164
+ return observer.disconnect();
165
+ };
128
166
  }, []);
129
167
  var showPrevMonth = function showPrevMonth(event) {
130
168
  event.preventDefault();
@@ -208,21 +246,66 @@ var Calendar = function Calendar(_ref) {
208
246
  onCancel();
209
247
  }
210
248
  }, [onCancel]);
249
+ var shiftDate = React.useCallback(function (date, days) {
250
+ var shiftedDate = new Date(date);
251
+ shiftedDate.setDate(shiftedDate.getDate() + days);
252
+ var year = shiftedDate.getFullYear();
253
+ var month = String(shiftedDate.getMonth() + 1).padStart(2, "0");
254
+ var day = String(shiftedDate.getDate()).padStart(2, "0");
255
+ return "".concat(year, "-").concat(month, "-").concat(day);
256
+ }, []);
257
+ var handleKeyDown = React.useCallback(function (event) {
258
+ var _a, _b;
259
+ var baseDateForNavigation = (_b = (_a = state.focusedDate) !== null && _a !== void 0 ? _a : state.selectedDate) !== null && _b !== void 0 ? _b : today;
260
+ if (event.key === "ArrowRight" || event.key === "ArrowDown") {
261
+ event.preventDefault();
262
+ var nextDate = shiftDate(baseDateForNavigation, event.key === "ArrowRight" ? 1 : 7);
263
+ var nextMonthOffset = getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, nextDate);
264
+ if (nextMonthOffset <= maxMonthOffset) {
265
+ dispatch({
266
+ type: "NAVIGATE_KEYBOARD",
267
+ payload: {
268
+ focusedDate: nextDate,
269
+ monthOffset: nextMonthOffset
270
+ }
271
+ });
272
+ }
273
+ } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
274
+ event.preventDefault();
275
+ var prevDate = shiftDate(baseDateForNavigation, event.key === "ArrowLeft" ? -1 : -7);
276
+ var prevMonthOffset = getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, prevDate);
277
+ if (prevMonthOffset >= 0) {
278
+ dispatch({
279
+ type: "NAVIGATE_KEYBOARD",
280
+ payload: {
281
+ focusedDate: prevDate,
282
+ monthOffset: prevMonthOffset
283
+ }
284
+ });
285
+ }
286
+ } else if (event.key === "Enter" || event.key === " ") {
287
+ event.preventDefault();
288
+ if (baseDateForNavigation) {
289
+ handleDayClick(baseDateForNavigation);
290
+ }
291
+ }
292
+ }, [state.focusedDate, state.selectedDate, today, startMonth, maxMonthOffset, shiftDate, handleDayClick]);
211
293
  var getMonthStartDate = React.useCallback(function (shiftIndex) {
212
294
  var startDate = new Date(startMonth);
213
295
  startDate.setMonth(startDate.getMonth() + shiftIndex);
214
296
  return startDate;
215
297
  }, [startMonth]);
216
- var commonAttrs = React.useMemo(function () {
298
+ var commonMonthProps = React.useMemo(function () {
217
299
  return {
218
300
  selectedDate: state.selectedDate,
219
301
  selectedPeriod: state.selectedPeriod,
220
302
  activeDates: activeDates,
221
303
  availableDates: availableDates,
222
304
  isRangeCompleted: state.isRangeCompleted,
223
- onDayClick: handleDayClick
305
+ onDayClick: handleDayClick,
306
+ focusedDate: state.focusedDate
224
307
  };
225
- }, [state.selectedDate, state.selectedPeriod, activeDates, availableDates, state.isRangeCompleted, handleDayClick]);
308
+ }, [state.selectedDate, state.selectedPeriod, activeDates, availableDates, state.isRangeCompleted, handleDayClick, state.focusedDate]);
226
309
  React.useEffect(function () {
227
310
  dispatch({
228
311
  type: "SYNC_INITIAL_STATE",
@@ -239,7 +322,11 @@ var Calendar = function Calendar(_ref) {
239
322
  minWidth: "".concat(minWidth, "px")
240
323
  },
241
324
  "data-testid": "calendar",
242
- ref: $root
325
+ ref: rootElementRef,
326
+ role: "application",
327
+ "aria-label": "Calendar",
328
+ tabIndex: 0,
329
+ onKeyDown: handleKeyDown
243
330
  }, /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, state.contentWidth ? (/*#__PURE__*/React__default.default.createElement("div", {
244
331
  "data-component": "Months",
245
332
  className: styles__default.default.months,
@@ -249,12 +336,12 @@ var Calendar = function Calendar(_ref) {
249
336
  }, [state.currentMonthOffset - 1, state.currentMonthOffset, state.currentMonthOffset + 1].filter(function (index) {
250
337
  return index >= 0;
251
338
  }).map(function (index) {
252
- var attrs = Object.assign(Object.assign({}, commonAttrs), {
339
+ var monthProps = Object.assign(Object.assign({}, commonMonthProps), {
253
340
  today: today,
254
341
  startDate: getMonthStartDate(index),
255
342
  offsetLeft: index * state.contentWidth
256
343
  });
257
- return /*#__PURE__*/React__default.default.createElement(Month.default, Object.assign({}, attrs, {
344
+ return /*#__PURE__*/React__default.default.createElement(Month.default, Object.assign({}, monthProps, {
258
345
  titleSize: titleSize,
259
346
  key: "month-".concat(index)
260
347
  }));
@@ -263,7 +350,7 @@ var Calendar = function Calendar(_ref) {
263
350
  today: today,
264
351
  startDate: getMonthStartDate(state.currentMonthOffset),
265
352
  offsetLeft: 0
266
- }, commonAttrs))), /*#__PURE__*/React__default.default.createElement("button", {
353
+ }, commonMonthProps))), /*#__PURE__*/React__default.default.createElement("button", {
267
354
  className: clsx__default.default(styles__default.default["month-control"], styles__default.default["month-control-prev"]),
268
355
  onClick: showPrevMonth,
269
356
  disabled: state.currentMonthOffset <= 0,
@@ -275,7 +362,7 @@ var Calendar = function Calendar(_ref) {
275
362
  })), /*#__PURE__*/React__default.default.createElement("button", {
276
363
  className: clsx__default.default(styles__default.default["month-control"], styles__default.default["month-control-next"]),
277
364
  onClick: showNextMonth,
278
- disabled: state.currentMonthOffset >= 11,
365
+ disabled: state.currentMonthOffset >= maxMonthOffset,
279
366
  type: "button",
280
367
  role: "button",
281
368
  "aria-label": "Next"
@@ -90,4 +90,5 @@
90
90
  .months > div {
91
91
  position: absolute;
92
92
  top: 0;
93
+ width: 100%;
93
94
  }
@@ -12,6 +12,7 @@ export type CalendarProps = {
12
12
  activeDates?: string[];
13
13
  datePresets?: Preset[];
14
14
  availableDates?: string[];
15
+ maxDate?: string;
15
16
  onChange?: (payload: CalendarPayload) => void;
16
17
  onCancel?: () => void;
17
18
  withContinueButton?: boolean;
package/Chip/index.js CHANGED
@@ -42,7 +42,7 @@ var Chip = function Chip(_a) {
42
42
  className: styles__default.default["content-inner"]
43
43
  }, children)), iconEnd && (
44
44
  /*#__PURE__*/
45
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
45
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events
46
46
  React__default.default.createElement("span", {
47
47
  className: styles__default.default["icon-right"],
48
48
  role: "button",
@@ -1,6 +1,6 @@
1
1
  import { type FC, type PropsWithChildren } from "react";
2
2
  type ClickOutsideProps = {
3
- onClick: (e: MouseEvent | TouchEvent) => void;
3
+ onClick: (event: MouseEvent | TouchEvent) => void;
4
4
  };
5
5
  declare const ClickOutside: FC<PropsWithChildren<ClickOutsideProps>>;
6
6
  export default ClickOutside;
@@ -18,6 +18,7 @@ function useMergedRefs() {
18
18
  if (!ref) continue;
19
19
  if (typeof ref === "function") ref(node);else ref.current = node;
20
20
  }
21
+ // eslint-disable-next-line react-hooks/exhaustive-deps
21
22
  }, refs);
22
23
  }
23
24
  var ClickOutside = function ClickOutside(_ref) {
@@ -26,8 +27,9 @@ var ClickOutside = function ClickOutside(_ref) {
26
27
  var _a;
27
28
  var localRef = React.useRef(null);
28
29
  index.default(localRef, onClick);
30
+ var childRef = /*#__PURE__*/React.isValidElement(children) ? (_a = children.props) === null || _a === void 0 ? void 0 : _a.ref : undefined;
31
+ var mergedRef = useMergedRefs(localRef, childRef);
29
32
  if (! /*#__PURE__*/React.isValidElement(children)) return null;
30
- var mergedRef = useMergedRefs(localRef, (_a = children.props) === null || _a === void 0 ? void 0 : _a.ref);
31
33
  return /*#__PURE__*/React.cloneElement(children, {
32
34
  ref: mergedRef
33
35
  });
package/Icons/Close.js CHANGED
@@ -20,6 +20,7 @@ var CloseIcon = (function (_a) {
20
20
  xmlns: "http://www.w3.org/2000/svg",
21
21
  width: width,
22
22
  height: height,
23
+ viewBox: "0 0 24 24",
23
24
  ref: ref
24
25
  }, props, {
25
26
  fill: "none"
package/Icons/Exit.js CHANGED
@@ -22,6 +22,7 @@ var Exit = (function (_a) {
22
22
  xmlns: "http://www.w3.org/2000/svg",
23
23
  width: width,
24
24
  height: height,
25
+ viewBox: "0 0 24 24",
25
26
  ref: ref
26
27
  }, props, {
27
28
  fill: "none"
package/Icons/Help.js CHANGED
@@ -20,6 +20,7 @@ var Help = (function (_a) {
20
20
  xmlns: "http://www.w3.org/2000/svg",
21
21
  width: width,
22
22
  height: height,
23
+ viewBox: "0 0 24 24",
23
24
  ref: ref
24
25
  }, props, {
25
26
  fill: "none"
@@ -38,7 +38,7 @@ var InputRadio = /*#__PURE__*/React.memo(function (_a) {
38
38
  rest = tslib.__rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "testid"]);
39
39
  return (
40
40
  /*#__PURE__*/
41
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
41
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events
42
42
  React__default.default.createElement("label", {
43
43
  className: clsx__default.default(styles__default.default.label, className),
44
44
  htmlFor: id,
@@ -12,7 +12,7 @@
12
12
  border-bottom: 1px solid var(--palette-bg-2);
13
13
  display: flex;
14
14
  justify-content: space-between;
15
- padding-right: 20px;
15
+ padding: 16px 20px;
16
16
  }
17
17
 
18
18
  .close-wrapper {
@@ -1,3 +1,13 @@
1
- .close {
1
+ .close-button {
2
+ align-items: center;
3
+ background: none;
4
+ border: none;
5
+ box-sizing: content-box;
2
6
  cursor: pointer;
7
+ display: flex;
8
+ flex-shrink: 0;
9
+ justify-content: center;
10
+ line-height: 0;
11
+ outline: none;
12
+ padding: 8px;
3
13
  }
@@ -1,5 +1,7 @@
1
1
  import type { FC } from "react";
2
- declare const Close: FC<{
2
+ type CloseButtonProps = {
3
3
  onClick?: () => void;
4
- }>;
4
+ "aria-label"?: string;
5
+ };
6
+ declare const Close: FC<CloseButtonProps>;
5
7
  export default Close;
@@ -13,15 +13,17 @@ var React__default = /*#__PURE__*/_interopDefault(React);
13
13
  var styles__default = /*#__PURE__*/_interopDefault(styles);
14
14
 
15
15
  var Close = function Close(_ref) {
16
- var onClick = _ref.onClick;
17
- return (
18
- /*#__PURE__*/
19
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
20
- React__default.default.createElement(Close$1.default, {
21
- className: styles__default.default.close,
22
- onClick: onClick
23
- })
24
- );
16
+ var onClick = _ref.onClick,
17
+ ariaLabel = _ref["aria-label"];
18
+ return /*#__PURE__*/React__default.default.createElement("button", {
19
+ type: "button",
20
+ onClick: onClick,
21
+ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Close",
22
+ className: styles__default.default["close-button"]
23
+ }, /*#__PURE__*/React__default.default.createElement(Close$1.default, {
24
+ width: 18,
25
+ height: 18
26
+ }));
25
27
  };
26
28
 
27
29
  exports.default = Close;
@@ -2,5 +2,5 @@
2
2
  display: flex;
3
3
  min-height: 100%;
4
4
  overflow-y: auto;
5
- padding: 10px;
5
+ padding: 16px 20px;
6
6
  }
@@ -1,3 +1,3 @@
1
1
  import type { FC, PropsWithChildren } from "react";
2
- declare const Content: FC<PropsWithChildren<{}>>;
2
+ declare const Content: FC<PropsWithChildren>;
3
3
  export default Content;
@@ -10,7 +10,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
10
10
  var React__default = /*#__PURE__*/_interopDefault(React);
11
11
  var styles__default = /*#__PURE__*/_interopDefault(styles);
12
12
 
13
- // eslint-disable-next-line @typescript-eslint/ban-types
14
13
  var Content = function Content(_ref) {
15
14
  var children = _ref.children;
16
15
  return /*#__PURE__*/React__default.default.createElement("div", {
@@ -1,9 +1,9 @@
1
1
  .wrapper {
2
2
  display: flex;
3
- padding: 16px;
4
3
  }
5
4
 
6
5
  .title {
7
6
  margin: 0;
7
+ min-width: 0;
8
8
  padding: 0;
9
9
  }
@@ -1,3 +1,3 @@
1
1
  import type { FC, PropsWithChildren } from "react";
2
- declare const Title: FC<PropsWithChildren<{}>>;
2
+ declare const Title: FC<PropsWithChildren>;
3
3
  export default Title;
@@ -11,7 +11,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
11
11
  var React__default = /*#__PURE__*/_interopDefault(React);
12
12
  var styles__default = /*#__PURE__*/_interopDefault(styles);
13
13
 
14
- // eslint-disable-next-line @typescript-eslint/ban-types
15
14
  var Title = function Title(_ref) {
16
15
  var children = _ref.children;
17
16
  return /*#__PURE__*/React__default.default.createElement(index.default, {
package/Modal/index.js CHANGED
@@ -35,8 +35,8 @@ var Modal = function Modal(_ref) {
35
35
  var handleClose = React.useCallback(function () {
36
36
  onClose === null || onClose === void 0 ? void 0 : onClose();
37
37
  }, [onClose]);
38
- var handleOverlayClick = React.useCallback(function (e) {
39
- if (e.target === e.currentTarget) {
38
+ var handleOverlayClick = React.useCallback(function (event) {
39
+ if (event.target === event.currentTarget) {
40
40
  handleClose();
41
41
  }
42
42
  }, [handleClose]);
@@ -89,9 +89,7 @@ var MultiSelect = function MultiSelect(_ref2) {
89
89
  return preparedGroups.flatMap(function (_ref3) {
90
90
  var groupVal = _ref3.value,
91
91
  options = _ref3.options;
92
- return options
93
- // eslint-disable-next-line @typescript-eslint/no-shadow
94
- .filter(function (_ref4) {
92
+ return options.filter(function (_ref4) {
95
93
  var selected = _ref4.selected;
96
94
  return selected;
97
95
  }).map(
@@ -1,14 +1,13 @@
1
1
  .textarea {
2
2
  background: transparent;
3
3
  border: none;
4
+ color: inherit;
4
5
  flex: 1;
5
6
  font: inherit;
6
7
  outline: none;
7
- overflow: auto;
8
8
  overflow: hidden;
9
9
  padding: 7px 0;
10
10
  resize: none;
11
- text-overflow: unset;
12
11
  text-overflow: ellipsis;
13
12
  }
14
13
  .textarea::placeholder {
@@ -7,7 +7,7 @@ export interface ITextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
7
7
  hint?: ReactNode;
8
8
  hasError?: boolean;
9
9
  required?: boolean;
10
- onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
10
+ onChange?: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;
11
11
  inputRef?: ForwardedRef<HTMLTextAreaElement>;
12
12
  ref?: React.Ref<HTMLDivElement>;
13
13
  }
@@ -62,6 +62,7 @@
62
62
  line-height: 36px;
63
63
  }
64
64
  .size_l {
65
+ border-radius: 1.5rem;
65
66
  font-size: 18px;
66
67
  height: 42px;
67
68
  line-height: 42px;
@@ -1,8 +1,5 @@
1
1
  import * as React from "react";
2
2
  import type { CalendarTitleSize } from "../../index.props";
3
- import type { FunctionComponent } from "react";
4
- export interface FCWithElements<T = {}> extends FunctionComponent<T> {
5
- }
6
3
  type Props = {
7
4
  today: string;
8
5
  startDate: Date;
@@ -13,6 +10,7 @@ type Props = {
13
10
  offsetLeft: number;
14
11
  availableDates?: string[];
15
12
  titleSize?: CalendarTitleSize;
13
+ focusedDate?: string;
16
14
  };
17
15
  declare const _default: React.NamedExoticComponent<Props>;
18
16
  export default _default;