@via-profit/ui-kit 0.3.0 → 0.4.0

package/Calendar/CalendarComponent.js

@@ -54,13 +54,35 @@ const CalendarIconPrev_1 = __importDefault(require("./CalendarIconPrev"));
 const CalendarIconNext_1 = __importDefault(require("./CalendarIconNext"));
 const CalendarWeekDaysBar_1 = __importDefault(require("./CalendarWeekDaysBar"));
 const use_calendar_1 = require("./use-calendar");
-const Swiper_1 = __importStar(require("../Swiper"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
 __exportStar(require("./use-calendar"), exports);
 __exportStar(require("./CalendarWeekDaysBar"), exports);
-const StyledSwiper = (0, styled_1.default)(Swiper_1.default) `
-  height: 100%;
+const viewAppear = (0, react_2.keyframes) `
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
 `;
+/**
+ * Only the active view is rendered: the hidden views are not focusable and not announced
+ */
+const ViewContainer = styled_1.default.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  animation: ${viewAppear} 0.2s ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+const dateKey = (date) => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
 const isRangeValue = (value) => {
     if (value instanceof Array) {
         return value.every(v => v instanceof Date || v === null);
@@ -80,21 +102,12 @@ const computeViews = (inputViews, range) => {
 const computeView = (inputParams) => {
     var _a;
     const { inputView, inputViews, inputInitialView } = inputParams;
-    if (typeof inputView === 'undefined' && inputViews) {
-        return inputViews[0];
-    }
-    if (typeof inputView === 'undefined' && inputViews) {
-        return inputViews[0];
-    }
-    if (inputViews && typeof inputView === 'string') {
-        if (!inputViews.includes(inputView)) {
-            throw new Error('Property views must be contained property initialView');
-        }
-    }
-    if (typeof inputView === 'string') {
-        return inputView;
+    const requested = inputView !== null && inputView !== void 0 ? inputView : inputInitialView;
+    if (requested && inputViews && !inputViews.includes(requested)) {
+        throw new Error(`The view «${requested}» must be one of the \`views\`: ${inputViews.join(', ')}`);
     }
-    return (_a = inputInitialView !== null && inputInitialView !== void 0 ? inputInitialView : inputView) !== null && _a !== void 0 ? _a : 'days';
+    // The requested view wins over the first of the views
+    return (_a = requested !== null && requested !== void 0 ? requested : inputViews === null || inputViews === void 0 ? void 0 : inputViews[0]) !== null && _a !== void 0 ? _a : 'days';
 };
 const computeCalendarDate = (params) => {
     const { inputValue, defaultValue } = params;
@@ -135,7 +148,7 @@ const computeCalendarDate = (params) => {
 };
 const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     var _a;
-    const { minDate: inputMinDate, maxDate: inputMaxDate, weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], markToday = true, weekDayLabelFormat = 'short', accentColor = 'primary', defaultValue, value: inputValue, initialView: inputInitialView, view: inputView, views: inputViews, resetButtonLabel, todayButtonLabel, heading, subheading, footer, overrides, range = false, } = props;
+    const { minDate: inputMinDate, maxDate: inputMaxDate, weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], markToday = true, weekDayLabelFormat = 'short', accentColor = 'primary', defaultValue, value: inputValue, initialView: inputInitialView, view: inputView, views: inputViews, resetButtonLabel, todayButtonLabel, heading, subheading, footer, overrides, range = false, prevButtonLabel = 'Previous', nextButtonLabel = 'Next', } = props;
     /**
      * Validations
      */
@@ -202,7 +215,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
         WeekRowButton: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekRowButton) || CalendarWeekRowButton_1.default,
         WeekDayWeekNumber: (overrides === null || overrides === void 0 ? void 0 : overrides.WeekDayWeekNumber) || CalendarWeekDayWeekNumber_1.default,
     }), [overrides]);
-    const swiperRef = react_1.default.useRef(null);
+    const dateContainerRef = react_1.default.useRef(null);
     /**
      * Inside date value
      */
@@ -214,7 +227,16 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
      * Selected value
      */
     const inputValueRef = react_1.default.useRef(inputValue);
-    const [value, setValue] = react_1.default.useState((_a = inputValue !== null && inputValue !== void 0 ? inputValue : defaultValue) !== null && _a !== void 0 ? _a : null);
+    const [internalValue, setValue] = react_1.default.useState((_a = inputValue !== null && inputValue !== void 0 ? inputValue : defaultValue) !== null && _a !== void 0 ? _a : null);
+    // Controlled: the value is always the `value` property, even if the parent did not accept the change
+    const value = typeof inputValue !== 'undefined'
+        ? inputValue
+        : internalValue;
+    /**
+     * The day with the keyboard focus in the days view (roving tabindex)
+     */
+    const [focusedDate, setFocusedDate] = react_1.default.useState(null);
+    const shouldMoveFocus = react_1.default.useRef(false);
     /**
      * Current view mode
      */
@@ -229,16 +251,11 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     const [views, setComputedViews] = react_1.default.useState(() => computeViews(inputViews, range));
     const setViews = react_1.default.useCallback((variants) => setComputedViews(variants), []);
     const selectView = react_1.default.useCallback((view) => {
-        var _a;
         const nextViews = views.includes(view) ? views : [...views, view];
         if (nextViews !== views) {
             setViews(nextViews);
         }
         setView(view);
-        const index = nextViews.findIndex(v => v === view);
-        if (index > -1) {
-            (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.goToIndex(index);
-        }
     }, [setViews, views]);
     /**
      * Controlled `view` property was changed
@@ -330,6 +347,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     }, [calendarDate, view]);
     const handleCellDateClick = react_1.default.useCallback((selectedDate) => () => {
         var _a;
+        setFocusedDate(selectedDate);
         const nextView = getNextAvailableView();
         if (nextView) {
             setView(nextView);
@@ -373,7 +391,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
                 setValue(selectedValue);
             }
         }
-    }, [calendarDate, getNextAvailableView, onChange, selectView, range, inputValue]);
+    }, [getNextAvailableView, onChange, selectView, range, inputValue]);
     /**
      * Handle of click on month item
      */
@@ -449,7 +467,97 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     const weeks = react_1.default.useMemo(() => getWeeks(calendarDate), [calendarDate, getWeeks]);
     const yearsRange = react_1.default.useMemo(() => getYearsRange(minDate, maxDate), [minDate, maxDate, getYearsRange]);
     const monthsRange = react_1.default.useMemo(() => getMonthsRange(minDate, maxDate, calendarDate.getFullYear()), [minDate, maxDate, getMonthsRange, calendarDate]);
-    const renderViewDays = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.DateContainer, null, getWeeks(calendarDate).map(week => (react_1.default.createElement(overridesMap.WeekRow, { key: week.weekNumber }, week.days.map(day => {
+    const minDay = react_1.default.useMemo(() => new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()), [minDate]);
+    const maxDay = react_1.default.useMemo(() => new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()), [maxDate]);
+    const dayLabelFormatter = react_1.default.useMemo(() => typeof Intl !== 'undefined'
+        ? new Intl.DateTimeFormat(locale, {
+            weekday: 'long',
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+        })
+        : null, [locale]);
+    /**
+     * The only day in the tab order: the focused, the selected, today or the first available one
+     */
+    const tabbableDateKey = react_1.default.useMemo(() => {
+        const month = calendarDate.getMonth();
+        const days = weeks
+            .flatMap(week => week.days)
+            .filter(day => day.date.getMonth() === month && !day.isDisabled);
+        const selected = isRangeValue(value) ? value === null || value === void 0 ? void 0 : value[0] : isNotRangeValue(value) ? value : null;
+        const candidates = [focusedDate, selected, new Date()];
+        const found = candidates
+            .map(candidate => candidate && days.find(day => isSameDay(day.date, candidate)))
+            .find(Boolean);
+        return found ? dateKey(found.date) : days[0] ? dateKey(days[0].date) : null;
+    }, [calendarDate, weeks, value, focusedDate, isSameDay]);
+    /**
+     * Arrows move by a day and a week, Home/End — to the start/end of the week,
+     * PageUp/PageDown — by a month. Crossing the month border switches the month
+     */
+    const handleDaysKeyDown = react_1.default.useCallback((event) => {
+        var _a;
+        const key = (_a = event.target.closest('[data-date]')) === null || _a === void 0 ? void 0 : _a.dataset.date;
+        if (!key)
+            return;
+        const [y, m, d] = key.split('-').map(Number);
+        const current = new Date(y, m, d);
+        const weekDay = (current.getDay() -
+            ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'].indexOf(weekStartDay) +
+            7) %
+            7;
+        let target;
+        switch (event.key) {
+            case 'ArrowLeft':
+                target = new Date(y, m, d - 1);
+                break;
+            case 'ArrowRight':
+                target = new Date(y, m, d + 1);
+                break;
+            case 'ArrowUp':
+                target = new Date(y, m, d - 7);
+                break;
+            case 'ArrowDown':
+                target = new Date(y, m, d + 7);
+                break;
+            case 'Home':
+                target = new Date(y, m, d - weekDay);
+                break;
+            case 'End':
+                target = new Date(y, m, d + 6 - weekDay);
+                break;
+            case 'PageUp':
+                target = new Date(y, m - 1, Math.min(d, new Date(y, m, 0).getDate()));
+                break;
+            case 'PageDown':
+                target = new Date(y, m + 1, Math.min(d, new Date(y, m + 2, 0).getDate()));
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        // Stay inside minDate/maxDate
+        if (target.getTime() < minDay.getTime())
+            target = minDay;
+        if (target.getTime() > maxDay.getTime())
+            target = maxDay;
+        setFocusedDate(target);
+        shouldMoveFocus.current = true;
+        if (target.getMonth() !== calendarDate.getMonth() ||
+            target.getFullYear() !== calendarDate.getFullYear()) {
+            setCalendarDate(new Date(target.getFullYear(), target.getMonth(), 1));
+        }
+    }, [weekStartDay, minDay, maxDay, calendarDate]);
+    // Move the DOM focus after the keyboard navigation has rendered the new day
+    react_1.default.useEffect(() => {
+        var _a, _b;
+        if (shouldMoveFocus.current && focusedDate) {
+            shouldMoveFocus.current = false;
+            (_b = (_a = dateContainerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-date="${dateKey(focusedDate)}"]`)) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [focusedDate, calendarDate]);
+    const renderViewDays = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.DateContainer, { ref: dateContainerRef, onKeyDown: handleDaysKeyDown }, weeks.map(week => (react_1.default.createElement(overridesMap.WeekRow, { key: week.weekNumber }, week.days.map(day => {
         if (day.date.getMonth() === calendarDate.getMonth()) {
             const badge = badges.find(b => isSameDay(b.date, day.date));
             let fill = false;
@@ -465,26 +573,30 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
             else if (isNotRangeValue(value)) {
                 isSelected = Boolean(value && isSameDay(value, day.date));
             }
-            return (react_1.default.createElement(overridesMap.Cell, { key: day.date.getTime(), isToday: markToday && day.isToday, isDisabled: day.isDisabled, accentColor: accentColor, isSelected: isSelected, fill: fill, onClick: handleCellDateClick(day.date) },
+            const key = dateKey(day.date);
+            return (react_1.default.createElement(overridesMap.Cell, { key: day.date.getTime(), "data-date": key, tabIndex: key === tabbableDateKey ? 0 : -1, "aria-label": dayLabelFormatter === null || dayLabelFormatter === void 0 ? void 0 : dayLabelFormatter.format(day.date), "aria-pressed": isSelected || fill, "aria-current": day.isToday ? 'date' : undefined, isToday: markToday && day.isToday, isDisabled: day.isDisabled, accentColor: accentColor, isSelected: isSelected, fill: fill, onClick: handleCellDateClick(day.date) },
                 getDayLabel(day.date),
                 badge && (react_1.default.createElement(overridesMap.DayBadge, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
         }
-        return (react_1.default.createElement(overridesMap.EmptyCell, { key: day.date.getTime() }, getDayLabel(day.date)));
+        return (react_1.default.createElement(overridesMap.EmptyCell, { key: day.date.getTime(), "aria-hidden": true }, getDayLabel(day.date)));
     })))))), [
         accentColor,
         badges,
         calendarDate,
+        dayLabelFormatter,
         getDayLabel,
-        getWeeks,
         handleCellDateClick,
+        handleDaysKeyDown,
         isSameDay,
         markToday,
         overridesMap,
+        tabbableDateKey,
         value,
+        weeks,
     ]);
     const renderViewMonths = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.MonthsSelector, null, monthsRange.map(monthIndex => {
         const isSelected = calendarDate.getMonth() === monthIndex;
-        return (react_1.default.createElement(overridesMap.MonthCell, { key: monthIndex, accentColor: accentColor, isSelected: isSelected, onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))));
+        return (react_1.default.createElement(overridesMap.MonthCell, { key: monthIndex, accentColor: accentColor, isSelected: isSelected, "aria-pressed": isSelected, onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))));
     }))), [accentColor, calendarDate, getMonthLabel, handleMonthSelected, monthsRange, overridesMap]);
     const renderViewYears = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.YearsSelector, { accentColor: accentColor, date: calendarDate, onChange: y => handleYearSelected(y)(), years: yearsRange, locale: locale, minDate: minDate, maxDate: maxDate })), [
         accentColor,
@@ -528,7 +640,6 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
         overridesMap,
         value,
     ]);
-    const initialIndex = react_1.default.useMemo(() => views.findIndex(v => v === view), [views, view]);
     const getActiveView = react_1.default.useCallback(() => view, [view]);
     const getCalendarDate = react_1.default.useCallback(() => calendarDate, [calendarDate]);
     /**
@@ -548,7 +659,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
             typeof heading !== 'undefined' && react_1.default.createElement(overridesMap.Heading, null, heading),
             typeof subheading !== 'undefined' && (react_1.default.createElement(overridesMap.Subheading, null, subheading)),
             react_1.default.createElement(overridesMap.Toolbar, null,
-                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('prev'), disabled: ['months', 'years'].includes(view) },
+                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('prev'), disabled: view === 'years', "aria-label": prevButtonLabel, title: prevButtonLabel },
                     react_1.default.createElement(overridesMap.IconPrev, null)),
                 react_1.default.createElement(overridesMap.ControlButton, { disabled: !views.includes('months'), onClick: () => {
                         if (view === 'months' && views.includes('days')) {
@@ -566,31 +677,15 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
                             selectView('years');
                         }
                     } }, getYearLabel(calendarDate)),
-                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('next'), disabled: ['months', 'years'].includes(view) },
+                react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handlePrevNextClick('next'), disabled: view === 'years', "aria-label": nextButtonLabel, title: nextButtonLabel },
                     react_1.default.createElement(overridesMap.IconNext, null)))),
         view === 'days' && (react_1.default.createElement(overridesMap.WeekDaysBar, { locale: locale, week: weeks[0], format: weekDayLabelFormat || 'short' })),
         react_1.default.createElement(overridesMap.Body, null,
-            react_1.default.createElement(StyledSwiper, { draggable: false, ref: swiperRef, initialIndex: initialIndex }, views.map(viewName => {
-                let renderedView;
-                switch (viewName) {
-                    case 'days':
-                        renderedView = renderViewDays();
-                        break;
-                    case 'weeks':
-                        renderedView = renderViewWeeks();
-                        break;
-                    case 'months':
-                        renderedView = renderViewMonths();
-                        break;
-                    case 'years':
-                        renderedView = renderViewYears();
-                        break;
-                    default:
-                        renderedView = null;
-                        break;
-                }
-                return react_1.default.createElement(Swiper_1.SwiperSlide, { key: viewName }, renderedView);
-            }))),
+            react_1.default.createElement(ViewContainer, { key: view },
+                view === 'days' && renderViewDays(),
+                view === 'weeks' && renderViewWeeks(),
+                view === 'months' && renderViewMonths(),
+                view === 'years' && renderViewYears())),
         (typeof resetButtonLabel !== 'undefined' ||
             typeof todayButtonLabel !== 'undefined' ||
             typeof footer !== 'undefined') && (react_1.default.createElement(overridesMap.Footer, null,

package/Calendar/CalendarDayBadge.d.ts

@@ -4,5 +4,5 @@ export interface CalendarDayBadgeProps extends React.HTMLAttributes<HTMLSpanElem
     readonly isToday: boolean;
     readonly badgeContent: React.ReactNode;
 }
-declare const _default: React.ForwardRefExoticComponent<CalendarDayBadgeProps & React.RefAttributes<HTMLButtonElement>>;
+declare const _default: React.ForwardRefExoticComponent<CalendarDayBadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Calendar/CalendarMonthCell.js

@@ -24,20 +24,10 @@ const Btn = (0, styled_1.default)(Button_1.default) `
   font-size: 0.8em;
   margin: 0;
   min-width: 0;
-  outline: none;
   flex-basis: 50%;
 `;
 const CalendarMonthCell = (props, ref) => {
     const { children, isSelected, accentColor } = props, restProps = __rest(props, ["children", "isSelected", "accentColor"]);
-    const myRef = react_1.default.useRef(null);
-    return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: el => {
-            if (typeof ref === 'function') {
-                ref(el);
-            }
-            if (ref && typeof ref === 'object') {
-                ref.current = el;
-            }
-            myRef.current = el;
-        } }), children));
+    return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(CalendarMonthCell);

package/Calendar/CalendarWeekDayLabel.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const CalendarWeekDayLabel = styled_1.default.div `
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-weight: 200;
   font-size: 0.8em;
   user-select: none;

package/Calendar/CalendarWeekDaysBar.js

@@ -29,6 +29,11 @@ const CalendarWeekDaysBar = (props, ref) => {
             weekday: format,
         }).format(day.date)
         : '\u{0020}'), [format, locale, week]);
-    return (react_1.default.createElement(Container, Object.assign({}, restProps, { ref: ref }), weekDayLabels.map(label => (react_1.default.createElement(CalendarWeekDayLabel_1.default, { key: label }, label)))));
+    return (
+    // Hidden from screen readers: every day cell has the full date label with the weekday
+    react_1.default.createElement(Container, Object.assign({ "aria-hidden": true }, restProps, { ref: ref }), weekDayLabels.map((label, index) => (
+    // The narrow labels repeat (e.g. «С» for Wednesday and Saturday), so the key is the index
+    // eslint-disable-next-line react/no-array-index-key
+    react_1.default.createElement(CalendarWeekDayLabel_1.default, { key: index }, label)))));
 };
 exports.default = react_1.default.forwardRef(CalendarWeekDaysBar);

package/Calendar/CalendarYearCell.js

@@ -24,25 +24,10 @@ const Btn = (0, styled_1.default)(Button_1.default) `
   font-size: 0.9em;
   margin: 0;
   min-width: 0;
-  outline: none;
   flex-basis: 33%;
 `;
 const CalendarYearCell = (props, ref) => {
     const { children, isSelected, accentColor } = props, restProps = __rest(props, ["children", "isSelected", "accentColor"]);
-    const myRef = react_1.default.useRef(null);
-    // React.useEffect(() => {
-    //   if (isSelected && myRef.current) {
-    //     myRef.current.scrollIntoView({ behavior: 'instant' });
-    //   }
-    // }, [isSelected]);
-    return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: el => {
-            if (typeof ref === 'function') {
-                ref(el);
-            }
-            if (ref && typeof ref === 'object') {
-                ref.current = el;
-            }
-            myRef.current = el;
-        } }), children));
+    return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(CalendarYearCell);

package/Calendar/CalendarYearsSelector.d.ts

@@ -16,7 +16,6 @@ export type CalendarYearsSelectorProps = {
     readonly date: Date;
     /**
      * Minimum date limit
-  
      */
     readonly minDate: Date;
     /**

package/Calendar/CalendarYearsSelector.js

@@ -7,27 +7,23 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const CalendarYearCell_1 = __importDefault(require("./CalendarYearCell"));
 const use_calendar_1 = __importDefault(require("./use-calendar"));
-const VirtualizedList_1 = __importDefault(require("../Menu/VirtualizedList"));
+/**
+ * A plain scrollable grid: a couple of hundreds buttons do not need the virtualization
+ */
 const SelectorContainer = styled_1.default.div `
-  display: flex;
   flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  overflow-y: auto;
   padding: 0.8em;
   height: 100%;
-  width: 100%;
-`;
-const SelectorContainerInner = styled_1.default.div `
-  flex: 1;
-  position: relative;
-`;
-const Chunk = styled_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  box-sizing: border-box;
 `;
 const CalendarYearsSelector = (props, ref) => {
-    const containerRef = react_1.default.useRef(null);
     const { years, date, overrides, accentColor = 'primary', locale = 'ru-RU', minDate, maxDate, onChange, } = props;
-    const [maxHeight, setMaxHeight] = react_1.default.useState(undefined);
+    const containerRef = react_1.default.useRef(null);
+    const selectedRef = react_1.default.useRef(null);
     const overridesMap = react_1.default.useMemo(() => ({
         YearCell: (overrides === null || overrides === void 0 ? void 0 : overrides.YearCell) || CalendarYearCell_1.default,
     }), [overrides]);
@@ -38,29 +34,31 @@ const CalendarYearsSelector = (props, ref) => {
         weekStartDay: 'monday',
         displayLeadingZero: false,
     });
-    const items2 = react_1.default.useMemo(() => {
-        const list = [];
-        for (let i = 0; i < years.length; i += 3) {
-            list.push(years.slice(i, i + 3).map(year => {
-                const item = {
-                    value: year,
-                    label: getYearLabel(new Date(year, date.getMonth(), date.getDate(), 0, 0, 0, 0)),
-                };
-                return item;
-            }));
-        }
-        return list;
-    }, [date, getYearLabel, years]);
+    // Show the selected year in the middle of the list.
+    // The container is scrolled directly: scrollIntoView would scroll the page too
     react_1.default.useLayoutEffect(() => {
-        if (containerRef.current) {
-            setMaxHeight(containerRef.current.getBoundingClientRect().height);
+        const container = containerRef.current;
+        const selected = selectedRef.current;
+        if (container && selected) {
+            container.scrollTop =
+                selected.offsetTop -
+                    container.offsetTop -
+                    container.clientHeight / 2 +
+                    selected.offsetHeight / 2;
         }
     }, []);
-    const renderItem = react_1.default.useCallback((item) => (react_1.default.createElement(Chunk, null, item.map(item => {
-        const isSelected = date.getFullYear() === item.value;
-        return (react_1.default.createElement(overridesMap.YearCell, { key: item.value, accentColor: accentColor, isSelected: isSelected, onClick: () => onChange(item.value) }, item.label));
-    }))), [accentColor, date, onChange, overridesMap]);
-    return (react_1.default.createElement(SelectorContainer, { ref: ref },
-        react_1.default.createElement(SelectorContainerInner, { ref: containerRef }, maxHeight && react_1.default.createElement(VirtualizedList_1.default, { items: items2, renderItem: renderItem }))));
+    const setRefs = (el) => {
+        containerRef.current = el;
+        if (typeof ref === 'function') {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    };
+    return (react_1.default.createElement(SelectorContainer, { ref: setRefs }, years.map(year => {
+        const isSelected = date.getFullYear() === year;
+        return (react_1.default.createElement(overridesMap.YearCell, { key: year, ref: isSelected ? selectedRef : undefined, accentColor: accentColor, isSelected: isSelected, "aria-pressed": isSelected, onClick: () => onChange(year) }, getYearLabel(new Date(year, 0, 1))));
+    })));
 };
 exports.default = react_1.default.forwardRef(CalendarYearsSelector);

package/Calendar/use-calendar.d.ts

@@ -1,4 +1,4 @@
-export type CalendarValue<Range> = Range extends undefined ? Date | null : [Date, Date] | [Date, Date | null] | null;
+export type CalendarValue<Range> = Range extends true ? [Date, Date] | [Date, Date | null] | null : Date | null;
 export type WeekDayName = 'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday';
 export type Day = {
     readonly date: Date;

package/Checkbox/CheckboxAsterisk.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface CheckboxAsteriskProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * If true, the asterisk will be set the error color
+     */
+    readonly error?: boolean;
+    /**
+     * Not used
+     */
+    readonly focused?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<CheckboxAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/{Autocomplete2/Autocomplete2TextField.js → Checkbox/CheckboxAsterisk.js}

@@ -22,18 +22,32 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
-const TextField_1 = __importDefault(require("../TextField"));
-const Autocomplete2TextField = React.forwardRef((props, ref) => {
-    const { value, onChange } = props;
-    const handleChange = React.useCallback(event => {
-        onChange(event.target.value);
-    }, [onChange]);
-    return React.createElement(TextField_1.default, { value: value, onChange: handleChange, ref: ref });
-});
-Autocomplete2TextField.displayName = 'Autocomplete2TextField';
-exports.default = Autocomplete2TextField;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Asterisk = styled_1.default.span `
+  font-size: 0.8em;
+  margin-left: 0.2em;
+  position: relative;
+  top: -0.4em;
+  color: ${({ theme }) => theme.color.error.toString()};
+`;
+const CheckboxAsterisk = (props, ref) => {
+    const { children, error, focused } = props, nativeProps = __rest(props, ["children", "error", "focused"]);
+    return (React.createElement(Asterisk, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, ref: ref }), children));
+};
+exports.default = React.forwardRef(CheckboxAsterisk);

package/Checkbox/CheckboxBox.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export type CheckboxBoxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    /**
+     * Shows the dash instead of the check mark (e.g. «select all» when only some items are selected)
+     */
+    readonly indeterminate?: boolean;
+    /**
+     * Paints the border with the error color
+     */
+    readonly error?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    /**
+     * Shows the dash instead of the check mark (e.g. «select all» when only some items are selected)
+     */
+    readonly indeterminate?: boolean | undefined;
+    /**
+     * Paints the border with the error color
+     */
+    readonly error?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;