@steroidsjs/bootstrap 3.0.29 → 3.0.32

package/content/Accordion/AccordionItemView.js

@@ -30,7 +30,6 @@ var React = __importStar(require("react"));
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
-var ICON_SIZE = '_24x24';
 function AccordionItemView(props) {
     var _a;
     var bem = (0, hooks_1.useBem)('AccordionItemView');

package/content/Accordion/AccordionItemView.scss

@@ -100,7 +100,6 @@ $accordion-chevron-color: var(--accordion-chevron-color);
     overflow: hidden;
 
     background-color: $accordion-content-background;
-    height: 56px;
     width: 100%;
     height: fit-content;
 
@@ -123,18 +122,67 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         }
     }
 
+    &:first-child {
+        .AccordionItemView__header-container {
+            border-top-left-radius: variables.$radius-large;
+            border-top-right-radius: variables.$radius-large; 
+            transition: 200ms ease border-radius;
+            transition-delay: 200ms;
+        }
+    } 
+    &:last-child {
+        .AccordionItemView__header-container {
+            border-bottom-left-radius: variables.$radius-large;
+            border-bottom-right-radius: variables.$radius-large;
+            transition: 200ms ease border-radius;
+            transition-delay: 200ms;
+        }
+        .AccordionItemView__content {
+            border-bottom-left-radius: variables.$radius-large;
+            border-bottom-right-radius: variables.$radius-large;
+        }
+    }    
+    &_position_bottom.AccordionItemView_opened.AccordionItemView {
+        &:first-child {
+            .AccordionItemView__header-container {
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+                transition: 0ms ease border-radius;
+            }
+            .AccordionItemView__content {
+                border-top-left-radius: variables.$radius-large;
+                border-top-right-radius: variables.$radius-large;
+            }
+        }
+        &:last-child {
+            .AccordionItemView__header-container {
+                border-bottom-left-radius: variables.$radius-large;
+                border-bottom-right-radius: variables.$radius-large;
+                transition: 200ms ease border-radius;
+                transition-delay: 200ms;
+            }
+            .AccordionItemView__content {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }    
+    }
+    &_opened.AccordionItemView {
+        &:last-child .AccordionItemView__header-container {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            transition: 0s ease border-radius;
+        }    
+    }
+
     &_position {
         &_top {
-            border-radius: variables.$radius-large variables.$radius-large 0 0;
         }
 
         &_middle {
-            border-radius: 0px;
         }
 
         &_bottom {
-            border-radius: 0 0 variables.$radius-large variables.$radius-large;
-
             #{$root}__content {
                 grid-row-start: 1;
                 grid-row-end: 1;
@@ -174,7 +222,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
     &__icon-chevron {
         width: 24px;
         height: 24px;
-        box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 1px 20px rgba(0, 0, 0, 0.1);
         border-radius: variables.$radius-small;
 
         transform: rotate(0deg);
@@ -225,11 +273,12 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         max-height: 0;
         padding: 0 16px;
         color: variables.$text-color;
+        background-color: $accordion-content-background;
 
         &_visible {
             max-height: 1024px;
             padding: 18px 32px 18px 16px;
-            border: 1px solid $accordion-content-border;
+            box-shadow: inset 0 0 0 1px $accordion-content-border;
         }
     }
 

package/content/Accordion/AccordionView.scss

@@ -1,3 +1,5 @@
+@use "../../scss/variables";
+
 :root {
     --accordion-content-border: rgba(0, 0, 0, 0.1);
 }

package/content/Calendar/CalendarView.js

@@ -48,7 +48,7 @@ function CalendarView(props) {
     var localeComponent = (0, hooks_1.useComponents)().locale;
     //TODO Исправить тип, связано с yarn tsc в action publish.yml
     var DayPicker = react_day_picker_1["default"];
-    var month = props.month, toYear = props.toYear, fromYear = props.fromYear, showFooter = props.showFooter, onDaySelect = props.onDaySelect, selectedDates = props.selectedDates, onMonthSelect = props.onMonthSelect, numberOfMonths = props.numberOfMonths, toggleCaptionPanel = props.toggleCaptionPanel, isCaptionPanelVisible = props.isCaptionPanelVisible;
+    var month = props.month, toYear = props.toYear, fromYear = props.fromYear, showFooter = props.showFooter, showTodayButton = props.showTodayButton, onDaySelect = props.onDaySelect, selectedDates = props.selectedDates, onMonthSelect = props.onMonthSelect, numberOfMonths = props.numberOfMonths, toggleCaptionPanel = props.toggleCaptionPanel, isCaptionPanelVisible = props.isCaptionPanelVisible;
     var isRange = !!selectedDates[0] && !!selectedDates[1];
     var _a = (0, react_1.useMemo)(function () {
         var from = selectedDates[0];
@@ -71,13 +71,18 @@ function CalendarView(props) {
                 : undefined
         };
     }, [isRange, selectedDates]), selectedDays = _a.selectedDays, modifiers = _a.modifiers;
-    return (React.createElement(DayPicker, __assign({}, props, { className: bem(bem.block({ ranged: isRange }), props.className), captionElement: (0, react_1.useCallback)(function (_a) {
+    var shouldShowFooter = (0, react_1.useMemo)(function () { return (
+    // Показывать кнопку "закрыть", если открыто меню с выбором месяца, независимо от showTodayButton
+    (showFooter && isCaptionPanelVisible)
+        // Показывать кнопку "Сегодня"
+        || (showFooter && showTodayButton)); }, [isCaptionPanelVisible, showFooter, showTodayButton]);
+    return (React.createElement(DayPicker, __assign({}, props, props.pickerProps, { className: bem(bem.block({ ranged: isRange }), props.className), captionElement: (0, react_1.useCallback)(function (_a) {
             var classNames = _a.classNames, date = _a.date, localeUtils = _a.localeUtils, locale = _a.locale;
             return (React.createElement(CaptionElement_1["default"], { date: date, locale: locale, toYear: toYear, fromYear: fromYear, classNames: classNames, onChange: onMonthSelect, localeUtils: localeUtils, showCalendarFooter: showFooter, toggleCaptionPanel: toggleCaptionPanel, isCaptionPanelVisible: isCaptionPanelVisible }));
         }, [fromYear, isCaptionPanelVisible, onMonthSelect, showFooter, toYear, toggleCaptionPanel]), renderDay: function (day) {
             var date = day.getDate();
             return (React.createElement("div", { className: bem.element('day') }, date));
-        }, todayButton: showFooter && (isCaptionPanelVisible ? __('Закрыть') : __('Сегодня')), onTodayButtonClick: function (day) {
+        }, todayButton: shouldShowFooter && (isCaptionPanelVisible ? __('Закрыть') : __('Сегодня')), onTodayButtonClick: function (day) {
             if (isCaptionPanelVisible) {
                 toggleCaptionPanel();
             }

package/content/Calendar/CalendarView.scss

@@ -183,7 +183,7 @@ $calendar-border-color: var(--calendar-border-color);
 
     // Footer
     .DayPicker-Footer {
-        margin-top: 8px;
+        margin-top: 6px;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -212,14 +212,6 @@ $calendar-border-color: var(--calendar-border-color);
         background-color: $day-background-color-hover;
     }
 
-    .DayPicker-Day--today:hover {
-        background-color: transparent;
-
-        .CalendarView__day {
-            transition: background-color 150ms ease-in-out;
-        }
-    }
-
     &__day {
         position: relative;
         z-index: 1;
@@ -293,6 +285,6 @@ $calendar-border-color: var(--calendar-border-color);
 }
 
 // Class to allow body scroll, when Calendar is open in a Modal window
-.ModalView_body-hide-scroll:has(.CalendarView) {
+.body-hide-scroll:has(.CalendarView) {
     overflow-y: auto;
 }

package/form/AutoCompleteField/AutoCompleteFieldView.scss

@@ -45,24 +45,30 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
     &__input {
         width: 100%;
         padding: 0 8px;
-        border: 1px solid variables.$element-border-color;
+        outline: 1px solid variables.$element-border-color;
+        border: none;
         background-color: variables.$element-field-background-color;
         color: variables.$text-color;
-        transition: border-color 150ms ease-in-out;
+        transition: outline 150ms ease-in-out;
         font-size: inherit;
         line-height: inherit;
+
+        &:active {
+            outline-color: variables.$primary;
+        }
     }
 
     &_opened {
         #{$root}__input {
-            border-color: variables.$primary;
+            outline-width: 4px;
+            outline-color: variables.$primary-light;
         }
     }
 
     &_disabled {
         #{$root}__input {
             background-color: variables.$element-background-color-disabled;
-            border-color: transparent;
+            outline-color: transparent;
             cursor: not-allowed;
         }
     }

package/form/Button/ButtonView.scss

@@ -9,7 +9,7 @@ $btn-letter-spacing: 0.1em;
 .ButtonView {
     $root: &;
 
-    transition-property: color, background-color, border-color, box-shadow;
+    transition-property: color, background-color, outline-color, box-shadow;
     transition-duration: variables.$transition-duration;
     transition-timing-function: ease-in-out;
 
@@ -22,8 +22,9 @@ $btn-letter-spacing: 0.1em;
     &_button {
         position: relative;
         border-radius: variables.$radius-small;
+        border: none;
         user-select: none;
-        border: 3px solid transparent;
+        outline: 3px solid transparent;
 
         padding: 0 20px;
         display: flex;
@@ -140,7 +141,7 @@ $btn-letter-spacing: 0.1em;
     &_failed {
         &,
         &:hover {
-            border-color: variables.$danger;
+            outline-color: variables.$danger;
             box-shadow: 0 0 1rem rgba(variables.$danger, 0.2);
         }
     }

package/form/DateField/DateFieldView.js

@@ -53,7 +53,7 @@ function DateFieldView(props) {
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputProps, { ref: props.maskInputRef, onInput: function (e) {
+                React.createElement("input", __assign({}, props.inputProps, { id: props.id, ref: props.maskInputRef, onInput: function (e) {
                         props.inputProps.onChange(e.currentTarget.value);
                     }, className: bem(bem.element('input'), props.inputProps.className) })),
                 React.createElement("div", { className: bem.element('icon-container') },

package/form/DateRangeField/DateRangeFieldView.js

@@ -43,10 +43,19 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var DropDown_1 = __importDefault(require("@steroidsjs/core/ui/content/DropDown"));
 var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar"));
+var RangeButtons_1 = __importDefault(require("./views/RangeButtons"));
 function DateRangeFieldView(props) {
     var bem = (0, hooks_1.useBem)('DateRangeFieldView');
     var hasValue = props.inputPropsFrom.value || props.inputPropsTo.value;
-    var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);
+    var renderCalendar = (0, react_1.useCallback)(function () { return (props.withRangeButtons ? (React.createElement("div", { className: bem.element('calendar-wrapper', {
+            position: props.rangeButtonsPosition
+        }) },
+        React.createElement("div", { className: bem.element('additional-buttons') },
+            React.createElement(RangeButtons_1["default"], { config: props.withRangeButtons, changeTo: props.inputPropsTo.onChange, changeFrom: props.inputPropsFrom.onChange, position: props.rangeButtonsPosition, format: props.displayFormat })),
+        React.createElement("div", { className: bem.element('calendar') },
+            React.createElement(Calendar_1["default"], __assign({}, props.calendarProps)))))
+        : (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps)))); }, [bem, props.calendarProps, props.displayFormat, props.inputPropsFrom.onChange,
+        props.inputPropsTo.onChange, props.rangeButtonsPosition, props.withRangeButtons]);
     return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, className: bem.element('split'), hasArrow: false },
         React.createElement("div", { className: bem(bem.block({
                 disabled: props.disabled,
@@ -54,7 +63,7 @@ function DateRangeFieldView(props) {
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputPropsFrom, { className: bem(bem.element('input', {})), onInput: function (e) { return props.inputPropsFrom.onChange(e.currentTarget.value); } })),
+                React.createElement("input", __assign({}, props.inputPropsFrom, { id: props.id, className: bem(bem.element('input', {})), onInput: function (e) { return props.inputPropsFrom.onChange(e.currentTarget.value); } })),
                 React.createElement("input", __assign({}, props.inputPropsTo, { className: bem.element('input'), onInput: function (e) { return props.inputPropsTo.onChange(e.currentTarget.value); } })),
                 React.createElement("div", { className: bem.element('icon-container') },
                     props.icon && !hasValue && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),

package/form/DateRangeField/DateRangeFieldView.scss

@@ -1,5 +1,6 @@
 @use "../../scss/variables";
 @use '../../scss/mixins';
+@forward './views/RangeButtons/RangeButtons.scss';
 
 :root {
     --date-range-separator-color: rgba(0, 0, 0, 0.1);
@@ -11,6 +12,26 @@ html[data-theme="dark"] {
 
 $date-range-separator-color: var(--date-range-separator-color);
 
+$positions: (
+  top: (
+    direction: column,
+    responsive: top
+  ),
+  bottom: (
+    direction: column-reverse,
+    responsive: bottom
+  ),
+  left: (
+    direction: row,
+    responsive: left
+  ),
+  right: (
+    direction: row-reverse,
+    responsive: right
+  )
+);
+
+$all-directions: top, bottom, left, right;
 
 .DateRangeFieldView {
     $root: &;
@@ -47,4 +68,37 @@ $date-range-separator-color: var(--date-range-separator-color);
 
     @include mixins.date-range-effects($root);
 
+    &__calendar-wrapper {
+        display: flex;
+        width: min-content;
+
+        &_position {
+            @each $pos, $config in $positions {
+                &_#{$pos} {
+                    flex-direction: map-get($config, direction);
+                    align-items: center;
+                
+                    @media (max-width: variables.$tablet-width) {
+                        flex-direction: map-get($config, responsive);
+                        align-items: center;
+                    }
+                }
+            }
+            @each $dir1 in $all-directions {
+                @each $dir2 in $all-directions {
+                    @if $dir1 != $dir2 {
+                    &_#{$dir1}-#{$dir2} {
+                        flex-direction: map-get(map-get($positions, $dir1), direction);
+                        align-items: center;
+                
+                        @media (max-width: variables.$tablet-width) {
+                            flex-direction: map-get(map-get($positions, $dir2), direction);
+                            align-items: center;
+                        }
+                    }
+                    }
+                }
+            }
+        }
+    }
 }

package/form/DateRangeField/views/RangeButtons/RangeButtons.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IDateRangeFieldViewProps } from '@steroidsjs/core/ui/form/DateRangeField/DateRangeField';
+interface IRangeButtonsProps {
+    config: IDateRangeFieldViewProps['withRangeButtons'];
+    changeFrom: (value: string) => void;
+    changeTo: (value: string) => void;
+    position?: IDateRangeFieldViewProps['rangeButtonsPosition'];
+    format?: string;
+}
+export default function RangeButtons(props: IRangeButtonsProps): JSX.Element;
+export {};

package/form/DateRangeField/views/RangeButtons/RangeButtons.js

@@ -0,0 +1,60 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var form_1 = require("@steroidsjs/core/ui/form");
+var consts_1 = require("./consts");
+var DEFAULT_BUTTONS = [
+    consts_1.RANGE_BUTTONS.today,
+    consts_1.RANGE_BUTTONS.yesterday,
+    consts_1.RANGE_BUTTONS.thisWeek,
+    consts_1.RANGE_BUTTONS.lastWeek,
+    consts_1.RANGE_BUTTONS.thisMonth,
+    consts_1.RANGE_BUTTONS.lastMonth,
+    consts_1.RANGE_BUTTONS.thisYear,
+    consts_1.RANGE_BUTTONS.lastYear,
+];
+var DEFAULT_VALUE_FORMAT = 'DD.MM.YYYY';
+function RangeButtons(props) {
+    var bem = (0, hooks_1.useBem)('RangeButtons');
+    var locale = (0, hooks_1.useComponents)().locale;
+    var changeFrom = props.changeFrom, changeTo = props.changeTo;
+    var buttons = (0, react_1.useMemo)(function () { return (Array.isArray(props.config) ? props.config : DEFAULT_BUTTONS)
+        .map(function (button) { return (__assign(__assign({}, button), { onClick: button.onClick.bind(null, locale, changeFrom, changeTo, props.format || DEFAULT_VALUE_FORMAT) })); }); }, [changeFrom, changeTo, locale, props.config, props.format]);
+    return (react_1["default"].createElement("div", { className: bem.block({ position: props.position }) }, buttons.map(function (button, index) { return (react_1["default"].createElement(form_1.Button, { key: index, onClick: button.onClick, label: button.label, outline: true, size: 'sm', color: 'basic' })); })));
+}
+exports["default"] = RangeButtons;

package/form/DateRangeField/views/RangeButtons/RangeButtons.scss

@@ -0,0 +1,126 @@
+@use '../../../../scss/variables';
+
+$all-directions: top, bottom, left, right;
+
+$positions: (
+  top: (
+    flex-direction: row,
+    justify-content: center,
+    padding: (padding-bottom: 16px, padding-top: unset),
+    before: (top: unset, bottom: 0),
+    size: (width: 100%, height: 1px)
+  ),
+  bottom: (
+    flex-direction: row,
+    justify-content: center,
+    padding: (padding-top: 16px, padding-bottom: unset),
+    before: (top: 0, bottom: unset),
+    size: (width: 100%, height: 1px)
+  ),
+  left: (
+    flex-direction: column,
+    justify-content: center,
+    padding: (padding-top: unset, padding-right: 16px),
+    before: (left: unset, right: 1px),
+    size: (width: 1px, height: 100%)
+  ),
+  right: (
+    flex-direction: column,
+    justify-content: center,
+    padding: (padding-top: unset, padding-left: 16px),
+    before: (left: 1px, right: unset),
+    size: (width: 1px, height: 100%)
+  )
+);
+
+.RangeButtons {
+    position: relative;
+    display: flex;
+
+    flex-wrap: wrap;
+    width: fit-content;
+    gap: 8px;
+
+    padding-top: 16px;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background-color: var(--date-range-separator-color);
+    }
+
+    &_position {
+        @each $dir, $config in $positions {
+            &_#{$dir} {
+              flex-direction: map-get($config, flex-direction);
+              justify-content: map-get($config, justify-content);
+          
+              @each $pad, $val in map-get($config, padding) {
+                #{$pad}: #{$val};
+              }
+          
+              &::before {
+                @each $prop, $val in map-get($config, before) {
+                  #{$prop}: #{$val};
+                }
+                @each $size, $val in map-get($config, size) {
+                  #{$size}: #{$val};
+                }
+              }
+            }
+          }
+          @each $dir1 in $all-directions {
+            @each $dir2 in $all-directions {
+              @if $dir1 != $dir2 {
+                &_#{$dir1}-#{$dir2} {
+                  flex-direction: map-get(map-get($positions, $dir1), flex-direction);
+                  justify-content: map-get(map-get($positions, $dir1), justify-content);
+          
+                  // padding из первого направления
+                  @each $pad, $val in map-get(map-get($positions, $dir1), padding) {
+                    #{$pad}: #{$val};
+                  }
+          
+                  &::before {
+                    // before из первого направления
+                    @each $prop, $val in map-get(map-get($positions, $dir1), before) {
+                      #{$prop}: #{$val};
+                    }
+                    // size из первого направления
+                    @each $size, $val in map-get(map-get($positions, $dir1), size) {
+                      #{$size}: #{$val};
+                    }
+                  }
+          
+                  @media (max-width: variables.$tablet-width) {
+                    // при адаптиве — использовать второй как fallback
+                    flex-direction: map-get(map-get($positions, $dir2), flex-direction);
+                    justify-content: map-get(map-get($positions, $dir2), justify-content);
+          
+                    @each $pad, $val in map-get(map-get($positions, $dir2), padding) {
+                      #{$pad}: #{$val};
+                    }
+          
+                    &::before {
+                      @each $prop, $val in map-get(map-get($positions, $dir2), before) {
+                        #{$prop}: #{$val};
+                      }
+                      @each $size, $val in map-get(map-get($positions, $dir2), size) {
+                        #{$size}: #{$val};
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+    }
+
+    .ButtonView__text {
+        text-wrap: nowrap;
+    }
+}

package/form/DateRangeField/views/RangeButtons/consts.d.ts

@@ -0,0 +1,34 @@
+export declare const RANGE_BUTTONS: {
+    today: {
+        label: string;
+        onClick: (locale: any, changeFrom: any, changeTo: any, format: any) => void;
+    };
+    yesterday: {
+        label: string;
+        onClick: (locale: any, changeFrom: any, changeTo: any, format: any) => void;
+    };
+    thisWeek: {
+        label: string;
+        onClick: (locale: any, changeFrom: any, changeTo: any, format: any) => void;
+    };
+    lastWeek: {
+        label: string;
+        onClick: (locale: any, changeFrom: any, changeTo: any, format: any) => void;
+    };
+    thisMonth: {
+        label: string;
+        onClick: (locale: any, changeFrom: any, changeTo: any, format: any) => void;
+    };
+    lastMonth: {
+        label: string;
+        onClick: (locale: any, changeFrom: any, changeTo: any, format: any) => void;
+    };
+    thisYear: {
+        label: string;
+        onClick: (locale: any, changeFrom: any, changeTo: any, format: any) => void;
+    };
+    lastYear: {
+        label: string;
+        onClick: (locale: any, changeFrom: any, changeTo: any, format: any) => void;
+    };
+};

package/form/DateRangeField/views/RangeButtons/consts.js

@@ -0,0 +1,71 @@
+"use strict";
+exports.__esModule = true;
+exports.RANGE_BUTTONS = void 0;
+var utils_1 = require("./utils");
+exports.RANGE_BUTTONS = {
+    today: {
+        label: __('Сегодня'),
+        onClick: function (locale, changeFrom, changeTo, format) {
+            var today = locale.dayjs(new Date().toDateString());
+            changeFrom(today.format(format));
+            changeTo((0, utils_1.getEndOfDay)(today).format(format));
+        }
+    },
+    yesterday: {
+        label: __('Вчера'),
+        onClick: function (locale, changeFrom, changeTo, format) {
+            var today = locale.dayjs(new Date().toDateString());
+            var yesterday = today.subtract(1, 'day');
+            changeFrom(yesterday.format(format));
+            changeTo(yesterday.hour(23).minute(59).second(59).format(format));
+        }
+    },
+    thisWeek: {
+        label: __('Эта неделя'),
+        onClick: function (locale, changeFrom, changeTo, format) {
+            var _a = (0, utils_1.getCurrentWeek)(locale), start = _a.start, finish = _a.finish;
+            changeFrom(start.format(format));
+            changeTo(finish.format(format));
+        }
+    },
+    lastWeek: {
+        label: __('Прошлая неделя'),
+        onClick: function (locale, changeFrom, changeTo, format) {
+            var _a = (0, utils_1.getCurrentWeek)(locale), start = _a.start, finish = _a.finish;
+            changeFrom(start.subtract(1, 'week').format(format));
+            changeTo(finish.subtract(1, 'week').format(format));
+        }
+    },
+    thisMonth: {
+        label: __('Этот месяц'),
+        onClick: function (locale, changeFrom, changeTo, format) {
+            var _a = (0, utils_1.getCurrentMonth)(locale), start = _a.start, finish = _a.finish;
+            changeFrom(start.format(format));
+            changeTo(finish.format(format));
+        }
+    },
+    lastMonth: {
+        label: __('Прошлый месяц'),
+        onClick: function (locale, changeFrom, changeTo, format) {
+            var _a = (0, utils_1.getCurrentMonth)(locale), start = _a.start, finish = _a.finish;
+            changeFrom(start.subtract(1, 'month').format(format));
+            changeTo(finish.subtract(1, 'month').format(format));
+        }
+    },
+    thisYear: {
+        label: __('Этот год'),
+        onClick: function (locale, changeFrom, changeTo, format) {
+            var _a = (0, utils_1.getCurrentYear)(locale), start = _a.start, finish = _a.finish;
+            changeFrom(start.format(format));
+            changeTo(finish.format(format));
+        }
+    },
+    lastYear: {
+        label: __('Прошлый год'),
+        onClick: function (locale, changeFrom, changeTo, format) {
+            var _a = (0, utils_1.getCurrentYear)(locale), start = _a.start, finish = _a.finish;
+            changeFrom(start.subtract(1, 'year').format(format));
+            changeTo(finish.subtract(1, 'year').format(format));
+        }
+    }
+};

package/form/DateRangeField/views/RangeButtons/index.d.ts

@@ -0,0 +1,2 @@
+import RangeButtons from './RangeButtons';
+export default RangeButtons;