colibri-ui 0.8.62 → 0.8.63

package/Calendar/components/Month/Month.d.ts

@@ -1,8 +1,5 @@
 import * as React from "react";
 import type { CalendarTitleSize } from "../../index.props";
-import type { FunctionComponent } from "react";
-export interface FCWithElements<T = {}> extends FunctionComponent<T> {
-}
 type Props = {
     today: string;
     startDate: Date;
@@ -13,6 +10,7 @@ type Props = {
     offsetLeft: number;
     availableDates?: string[];
     titleSize?: CalendarTitleSize;
+    focusedDate?: string;
 };
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

package/Calendar/components/Month/Month.js

@@ -38,8 +38,8 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var WEEK_DAYS = Array.from({
   length: 7
-}, function (_, idx) {
-  var index$1 = idx + 1;
+}, function (_, weekDayIndex) {
+  var index$1 = weekDayIndex + 1;
   return {
     index: index$1,
     name: index.getShortWeekDayNameByIndex(index$1),
@@ -77,21 +77,33 @@ var DayButton = /*#__PURE__*/React__namespace.memo(function (_ref2) {
   var day = _ref2.day,
     isActive = _ref2.isActive,
     isSelected = _ref2.isSelected,
+    isFocused = _ref2.isFocused,
     dateString = _ref2.dateString,
     onDayClick = _ref2.onDayClick;
+  var buttonRef = React.useRef(null);
+  React.useEffect(function () {
+    if (isFocused && buttonRef.current) {
+      buttonRef.current.focus({
+        preventScroll: true
+      });
+    }
+  }, [isFocused]);
   var handleClick = React.useCallback(function () {
     if (isActive) {
       onDayClick(dateString);
     }
   }, [isActive, dateString, onDayClick]);
-  var dayInnerActive = isActive ? "day-inner-active" : "";
-  var bgStyle = isSelected ? SELECTED_BG_STYLE : TRANSPARENT_BG_STYLE;
+  var dayInnerActiveClass = isActive ? "day-inner-active" : "";
+  var backgroundStyle = isSelected ? SELECTED_BG_STYLE : TRANSPARENT_BG_STYLE;
   return /*#__PURE__*/React__namespace.createElement("button", {
-    className: clsx__default.default(styles__default.default["day-inner"], dayInnerActive),
-    style: bgStyle,
-    role: "button",
+    ref: buttonRef,
+    className: clsx__default.default(styles__default.default["day-inner"], dayInnerActiveClass, _defineProperty__default.default({}, styles__default.default["day-focused"], isFocused)),
+    style: backgroundStyle,
     type: "button",
-    onClick: isActive ? handleClick : undefined
+    tabIndex: isFocused ? 0 : -1,
+    onClick: isActive ? handleClick : undefined,
+    "aria-label": dateString,
+    "aria-pressed": isSelected
   }, /*#__PURE__*/React__namespace.createElement(index$1.default, {
     size: "s",
     style: {
@@ -110,7 +122,8 @@ var Month = function Month(props) {
     selectedDate = props.selectedDate,
     selectedPeriod = props.selectedPeriod,
     activeDays = props.activeDays,
-    availableDates = props.availableDates;
+    availableDates = props.availableDates,
+    focusedDate = props.focusedDate;
   var year = startDate.getFullYear();
   var month = React.useMemo(function () {
     return leadingZeros.leadingZeros(startDate.getMonth() + 1, 2);
@@ -159,11 +172,11 @@ var Month = function Month(props) {
       key: "week-".concat(weekIndex),
       className: styles__default.default.week
     }, days.map(function (day, dayIndex) {
-      var key = "day-".concat(dayIndex);
+      var itemKey = "day-".concat(dayIndex);
       if (day.isDummy) {
         return /*#__PURE__*/React__namespace.createElement("li", {
           className: styles__default.default.day,
-          key: key
+          key: itemKey
         });
       }
       var dateString = "".concat(year, "-").concat(month, "-").concat(leadingZeros.leadingZeros(day.day, 2));
@@ -172,11 +185,12 @@ var Month = function Month(props) {
         isEndOfSelection: day.isEndOfSelection,
         isSelected: day.isSelected,
         isInSelectedRange: day.isInSelectedRange,
-        key: key
+        key: itemKey
       }, /*#__PURE__*/React__namespace.createElement(DayButton, {
         day: day.day,
         isActive: Boolean(day.isActive),
         isSelected: Boolean(day.isSelected),
+        isFocused: focusedDate === dateString,
         dateString: dateString,
         onDayClick: onDayClick
       }));

package/Calendar/components/Month/index.module.css

@@ -30,7 +30,6 @@
   min-height: 32px;
   position: relative;
   text-align: center;
-  width: 32px;
 }
 
 .legend {
@@ -47,7 +46,6 @@
   height: 32px;
   position: relative;
   text-align: center;
-  width: 32px;
   z-index: 0;
 }
 .selected-range-day:hover {
@@ -123,12 +121,13 @@
   border-radius: 6px;
   display: inline-block;
   height: 32px;
+  max-width: 32px;
   outline: 0;
   padding: 0;
   position: relative;
   text-align: center;
   transition: background 0.3s ease;
-  width: 32px;
+  width: 100%;
 }
 
 .day-inner-active {
@@ -136,4 +135,9 @@
 }
 .day-inner-active:hover {
   background: var(--palette-bg-2);
+}
+
+.day-focused {
+  outline: 2px solid var(--palette-black, #000);
+  outline-offset: 2px;
 }

package/Calendar/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var React = require('react');
 var clsx = require('clsx');
 var index$1 = require('../libs/requestIdleCallback/index.js');
@@ -19,6 +20,7 @@ var ArrowNext = require('../Icons/ArrowNext.js');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
@@ -49,11 +51,21 @@ var calendarReducer = function calendarReducer(state, action) {
       return Object.assign(Object.assign({}, state), {
         isRangeCompleted: action.payload
       });
+    case "SET_FOCUSED_DATE":
+      return Object.assign(Object.assign({}, state), {
+        focusedDate: action.payload
+      });
+    case "NAVIGATE_KEYBOARD":
+      return Object.assign(Object.assign({}, state), {
+        focusedDate: action.payload.focusedDate,
+        currentMonthOffset: Math.max(0, action.payload.monthOffset)
+      });
     case "SELECT_DATE":
       return Object.assign(Object.assign({}, state), {
         selectedDate: action.payload.date,
         selectedPeriod: action.payload.period,
         isRangeCompleted: action.payload.rangeCompleted,
+        focusedDate: action.payload.date,
         currentMonthOffset: getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(action.payload.startMonth, action.payload.date)
       });
     case "INCREMENT_MONTH_OFFSET":
@@ -86,6 +98,7 @@ var Calendar = function Calendar(_ref) {
     activeDates = _ref.activeDates,
     datePresets = _ref.datePresets,
     availableDates = _ref.availableDates,
+    maxDate = _ref.maxDate,
     canSelectRange = _ref.canSelectRange,
     onChange = _ref.onChange,
     onCancel = _ref.onCancel,
@@ -96,11 +109,21 @@ var Calendar = function Calendar(_ref) {
     className = _ref.className,
     _ref$titleSize = _ref.titleSize,
     titleSize = _ref$titleSize === void 0 ? "h3" : _ref$titleSize;
-  var $root = React.useRef(null);
+  var rootElementRef = React.useRef(null);
   var startMonth = getStartMonth.getStartMonth({
     today: today,
     activeDates: activeDates
   });
+  var maxMonthOffset = React.useMemo(function () {
+    var candidates = [];
+    if (maxDate) candidates.push(maxDate);
+    if (availableDates && availableDates.length > 0) {
+      candidates.push(_toConsumableArray__default.default(availableDates).sort().at(-1));
+    }
+    if (candidates.length === 0) return Infinity;
+    var lastDate = [].concat(candidates).sort().at(-1);
+    return getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, lastDate);
+  }, [maxDate, availableDates, startMonth]);
   var getInitialOffset = function getInitialOffset() {
     if (initialSelectedDate) {
       return getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, initialSelectedDate);
@@ -114,17 +137,32 @@ var Calendar = function Calendar(_ref) {
       selectedPeriod: initialSelectedPeriod,
       currentMonthOffset: getInitialOffset(),
       contentWidth: 0,
-      isRangeCompleted: true
+      isRangeCompleted: true,
+      focusedDate: initialSelectedDate
     }),
     _useReducer2 = _slicedToArray__default.default(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
   React.useEffect(function () {
-    var _a;
+    var rootElement = rootElementRef.current;
+    if (!rootElement) return;
     dispatch({
       type: "SET_CONTENT_WIDTH",
-      payload: ((_a = $root.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0
+      payload: rootElement.offsetWidth
+    });
+    var observer = new ResizeObserver(function () {
+      var width = rootElement.offsetWidth;
+      if (width) {
+        dispatch({
+          type: "SET_CONTENT_WIDTH",
+          payload: width
+        });
+      }
     });
+    observer.observe(rootElement);
+    return function () {
+      return observer.disconnect();
+    };
   }, []);
   var showPrevMonth = function showPrevMonth(event) {
     event.preventDefault();
@@ -208,21 +246,66 @@ var Calendar = function Calendar(_ref) {
       onCancel();
     }
   }, [onCancel]);
+  var shiftDate = React.useCallback(function (date, days) {
+    var shiftedDate = new Date(date);
+    shiftedDate.setDate(shiftedDate.getDate() + days);
+    var year = shiftedDate.getFullYear();
+    var month = String(shiftedDate.getMonth() + 1).padStart(2, "0");
+    var day = String(shiftedDate.getDate()).padStart(2, "0");
+    return "".concat(year, "-").concat(month, "-").concat(day);
+  }, []);
+  var handleKeyDown = React.useCallback(function (event) {
+    var _a, _b;
+    var baseDateForNavigation = (_b = (_a = state.focusedDate) !== null && _a !== void 0 ? _a : state.selectedDate) !== null && _b !== void 0 ? _b : today;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      var nextDate = shiftDate(baseDateForNavigation, event.key === "ArrowRight" ? 1 : 7);
+      var nextMonthOffset = getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, nextDate);
+      if (nextMonthOffset <= maxMonthOffset) {
+        dispatch({
+          type: "NAVIGATE_KEYBOARD",
+          payload: {
+            focusedDate: nextDate,
+            monthOffset: nextMonthOffset
+          }
+        });
+      }
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      var prevDate = shiftDate(baseDateForNavigation, event.key === "ArrowLeft" ? -1 : -7);
+      var prevMonthOffset = getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, prevDate);
+      if (prevMonthOffset >= 0) {
+        dispatch({
+          type: "NAVIGATE_KEYBOARD",
+          payload: {
+            focusedDate: prevDate,
+            monthOffset: prevMonthOffset
+          }
+        });
+      }
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (baseDateForNavigation) {
+        handleDayClick(baseDateForNavigation);
+      }
+    }
+  }, [state.focusedDate, state.selectedDate, today, startMonth, maxMonthOffset, shiftDate, handleDayClick]);
   var getMonthStartDate = React.useCallback(function (shiftIndex) {
     var startDate = new Date(startMonth);
     startDate.setMonth(startDate.getMonth() + shiftIndex);
     return startDate;
   }, [startMonth]);
-  var commonAttrs = React.useMemo(function () {
+  var commonMonthProps = React.useMemo(function () {
     return {
       selectedDate: state.selectedDate,
       selectedPeriod: state.selectedPeriod,
       activeDates: activeDates,
       availableDates: availableDates,
       isRangeCompleted: state.isRangeCompleted,
-      onDayClick: handleDayClick
+      onDayClick: handleDayClick,
+      focusedDate: state.focusedDate
     };
-  }, [state.selectedDate, state.selectedPeriod, activeDates, availableDates, state.isRangeCompleted, handleDayClick]);
+  }, [state.selectedDate, state.selectedPeriod, activeDates, availableDates, state.isRangeCompleted, handleDayClick, state.focusedDate]);
   React.useEffect(function () {
     dispatch({
       type: "SYNC_INITIAL_STATE",
@@ -239,7 +322,11 @@ var Calendar = function Calendar(_ref) {
       minWidth: "".concat(minWidth, "px")
     },
     "data-testid": "calendar",
-    ref: $root
+    ref: rootElementRef,
+    role: "application",
+    "aria-label": "Calendar",
+    tabIndex: 0,
+    onKeyDown: handleKeyDown
   }, /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, state.contentWidth ? (/*#__PURE__*/React__default.default.createElement("div", {
     "data-component": "Months",
     className: styles__default.default.months,
@@ -249,12 +336,12 @@ var Calendar = function Calendar(_ref) {
   }, [state.currentMonthOffset - 1, state.currentMonthOffset, state.currentMonthOffset + 1].filter(function (index) {
     return index >= 0;
   }).map(function (index) {
-    var attrs = Object.assign(Object.assign({}, commonAttrs), {
+    var monthProps = Object.assign(Object.assign({}, commonMonthProps), {
       today: today,
       startDate: getMonthStartDate(index),
       offsetLeft: index * state.contentWidth
     });
-    return /*#__PURE__*/React__default.default.createElement(Month.default, Object.assign({}, attrs, {
+    return /*#__PURE__*/React__default.default.createElement(Month.default, Object.assign({}, monthProps, {
       titleSize: titleSize,
       key: "month-".concat(index)
     }));
@@ -263,7 +350,7 @@ var Calendar = function Calendar(_ref) {
     today: today,
     startDate: getMonthStartDate(state.currentMonthOffset),
     offsetLeft: 0
-  }, commonAttrs))), /*#__PURE__*/React__default.default.createElement("button", {
+  }, commonMonthProps))), /*#__PURE__*/React__default.default.createElement("button", {
     className: clsx__default.default(styles__default.default["month-control"], styles__default.default["month-control-prev"]),
     onClick: showPrevMonth,
     disabled: state.currentMonthOffset <= 0,
@@ -275,7 +362,7 @@ var Calendar = function Calendar(_ref) {
   })), /*#__PURE__*/React__default.default.createElement("button", {
     className: clsx__default.default(styles__default.default["month-control"], styles__default.default["month-control-next"]),
     onClick: showNextMonth,
-    disabled: state.currentMonthOffset >= 11,
+    disabled: state.currentMonthOffset >= maxMonthOffset,
     type: "button",
     role: "button",
     "aria-label": "Next"

package/Calendar/index.module.css

@@ -90,4 +90,5 @@
 .months > div {
   position: absolute;
   top: 0;
+  width: 100%;
 }

package/Calendar/index.props.d.ts

@@ -12,6 +12,7 @@ export type CalendarProps = {
     activeDates?: string[];
     datePresets?: Preset[];
     availableDates?: string[];
+    maxDate?: string;
     onChange?: (payload: CalendarPayload) => void;
     onCancel?: () => void;
     withContinueButton?: boolean;

package/Chip/index.js

@@ -42,7 +42,7 @@ var Chip = function Chip(_a) {
     className: styles__default.default["content-inner"]
   }, children)), iconEnd && (
   /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
   React__default.default.createElement("span", {
     className: styles__default.default["icon-right"],
     role: "button",

package/ClickOutside/index.d.ts

@@ -1,6 +1,6 @@
 import { type FC, type PropsWithChildren } from "react";
 type ClickOutsideProps = {
-    onClick: (e: MouseEvent | TouchEvent) => void;
+    onClick: (event: MouseEvent | TouchEvent) => void;
 };
 declare const ClickOutside: FC<PropsWithChildren<ClickOutsideProps>>;
 export default ClickOutside;

package/ClickOutside/index.js

@@ -18,6 +18,7 @@ function useMergedRefs() {
       if (!ref) continue;
       if (typeof ref === "function") ref(node);else ref.current = node;
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, refs);
 }
 var ClickOutside = function ClickOutside(_ref) {
@@ -26,8 +27,9 @@ var ClickOutside = function ClickOutside(_ref) {
   var _a;
   var localRef = React.useRef(null);
   index.default(localRef, onClick);
+  var childRef = /*#__PURE__*/React.isValidElement(children) ? (_a = children.props) === null || _a === void 0 ? void 0 : _a.ref : undefined;
+  var mergedRef = useMergedRefs(localRef, childRef);
   if (! /*#__PURE__*/React.isValidElement(children)) return null;
-  var mergedRef = useMergedRefs(localRef, (_a = children.props) === null || _a === void 0 ? void 0 : _a.ref);
   return /*#__PURE__*/React.cloneElement(children, {
     ref: mergedRef
   });

package/Icons/Close.js

@@ -20,6 +20,7 @@ var CloseIcon = (function (_a) {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
     height: height,
+    viewBox: "0 0 24 24",
     ref: ref
   }, props, {
     fill: "none"

package/Icons/Exit.js

@@ -22,6 +22,7 @@ var Exit = (function (_a) {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
     height: height,
+    viewBox: "0 0 24 24",
     ref: ref
   }, props, {
     fill: "none"

package/Icons/Help.js

@@ -20,6 +20,7 @@ var Help = (function (_a) {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
     height: height,
+    viewBox: "0 0 24 24",
     ref: ref
   }, props, {
     fill: "none"

package/InputRadio/index.js

@@ -38,7 +38,7 @@ var InputRadio = /*#__PURE__*/React.memo(function (_a) {
     rest = tslib.__rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "testid"]);
   return (
     /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     React__default.default.createElement("label", {
       className: clsx__default.default(styles__default.default.label, className),
       htmlFor: id,

package/Modal/Modal.module.css

@@ -12,7 +12,7 @@
   border-bottom: 1px solid var(--palette-bg-2);
   display: flex;
   justify-content: space-between;
-  padding-right: 20px;
+  padding: 16px 20px;
 }
 
 .close-wrapper {

package/Modal/components/Close/Close.module.css

@@ -1,3 +1,13 @@
-.close {
+.close-button {
+  align-items: center;
+  background: none;
+  border: none;
+  box-sizing: content-box;
   cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  line-height: 0;
+  outline: none;
+  padding: 8px;
 }

package/Modal/components/Close/index.d.ts

@@ -1,5 +1,7 @@
 import type { FC } from "react";
-declare const Close: FC<{
+type CloseButtonProps = {
     onClick?: () => void;
-}>;
+    "aria-label"?: string;
+};
+declare const Close: FC<CloseButtonProps>;
 export default Close;

package/Modal/components/Close/index.js

@@ -13,15 +13,17 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var Close = function Close(_ref) {
-  var onClick = _ref.onClick;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    React__default.default.createElement(Close$1.default, {
-      className: styles__default.default.close,
-      onClick: onClick
-    })
-  );
+  var onClick = _ref.onClick,
+    ariaLabel = _ref["aria-label"];
+  return /*#__PURE__*/React__default.default.createElement("button", {
+    type: "button",
+    onClick: onClick,
+    "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Close",
+    className: styles__default.default["close-button"]
+  }, /*#__PURE__*/React__default.default.createElement(Close$1.default, {
+    width: 18,
+    height: 18
+  }));
 };
 
 exports.default = Close;

package/Modal/components/Content/Content.module.css

@@ -2,5 +2,5 @@
   display: flex;
   min-height: 100%;
   overflow-y: auto;
-  padding: 10px;
+  padding: 16px 20px;
 }

package/Modal/components/Content/index.d.ts

@@ -1,3 +1,3 @@
 import type { FC, PropsWithChildren } from "react";
-declare const Content: FC<PropsWithChildren<{}>>;
+declare const Content: FC<PropsWithChildren>;
 export default Content;

package/Modal/components/Content/index.js

@@ -10,7 +10,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 var Content = function Content(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React__default.default.createElement("div", {

package/Modal/components/Title/Title.module.css

@@ -1,9 +1,9 @@
 .wrapper {
   display: flex;
-  padding: 16px;
 }
 
 .title {
   margin: 0;
+  min-width: 0;
   padding: 0;
 }

package/Modal/components/Title/index.d.ts

@@ -1,3 +1,3 @@
 import type { FC, PropsWithChildren } from "react";
-declare const Title: FC<PropsWithChildren<{}>>;
+declare const Title: FC<PropsWithChildren>;
 export default Title;

package/Modal/components/Title/index.js

@@ -11,7 +11,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 var Title = function Title(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React__default.default.createElement(index.default, {

package/Modal/index.js

@@ -35,8 +35,8 @@ var Modal = function Modal(_ref) {
   var handleClose = React.useCallback(function () {
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
-  var handleOverlayClick = React.useCallback(function (e) {
-    if (e.target === e.currentTarget) {
+  var handleOverlayClick = React.useCallback(function (event) {
+    if (event.target === event.currentTarget) {
       handleClose();
     }
   }, [handleClose]);

package/MultiSelect/index.js

@@ -89,9 +89,7 @@ var MultiSelect = function MultiSelect(_ref2) {
     return preparedGroups.flatMap(function (_ref3) {
       var groupVal = _ref3.value,
         options = _ref3.options;
-      return options
-      // eslint-disable-next-line @typescript-eslint/no-shadow
-      .filter(function (_ref4) {
+      return options.filter(function (_ref4) {
         var selected = _ref4.selected;
         return selected;
       }).map(

package/TextArea/TextArea.module.css

@@ -1,14 +1,13 @@
 .textarea {
   background: transparent;
   border: none;
+  color: inherit;
   flex: 1;
   font: inherit;
   outline: none;
-  overflow: auto;
   overflow: hidden;
   padding: 7px 0;
   resize: none;
-  text-overflow: unset;
   text-overflow: ellipsis;
 }
 .textarea::placeholder {

package/TextArea/index.props.d.ts

@@ -7,7 +7,7 @@ export interface ITextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
     hint?: ReactNode;
     hasError?: boolean;
     required?: boolean;
-    onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+    onChange?: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;
     inputRef?: ForwardedRef<HTMLTextAreaElement>;
     ref?: React.Ref<HTMLDivElement>;
 }

package/esm/Calendar/components/Month/Month.d.ts

@@ -1,8 +1,5 @@
 import * as React from "react";
 import type { CalendarTitleSize } from "../../index.props";
-import type { FunctionComponent } from "react";
-export interface FCWithElements<T = {}> extends FunctionComponent<T> {
-}
 type Props = {
     today: string;
     startDate: Date;
@@ -13,6 +10,7 @@ type Props = {
     offsetLeft: number;
     availableDates?: string[];
     titleSize?: CalendarTitleSize;
+    focusedDate?: string;
 };
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;