@steroidsjs/bootstrap 3.0.30 → 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;
@@ -285,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/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,

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;

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

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var RangeButtons_1 = __importDefault(require("./RangeButtons"));
+exports["default"] = RangeButtons_1["default"];

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

@@ -0,0 +1,14 @@
+import { ILocaleComponent } from '@steroidsjs/core/components/LocaleComponent';
+export declare const getEndOfDay: (date: ReturnType<ILocaleComponent['dayjs']>) => import("dayjs").Dayjs;
+export declare const getCurrentWeek: (locale: ILocaleComponent) => {
+    start: import("dayjs").Dayjs;
+    finish: import("dayjs").Dayjs;
+};
+export declare const getCurrentMonth: (locale: ILocaleComponent) => {
+    start: import("dayjs").Dayjs;
+    finish: import("dayjs").Dayjs;
+};
+export declare const getCurrentYear: (locale: ILocaleComponent) => {
+    start: import("dayjs").Dayjs;
+    finish: import("dayjs").Dayjs;
+};

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

@@ -0,0 +1,36 @@
+"use strict";
+exports.__esModule = true;
+exports.getCurrentYear = exports.getCurrentMonth = exports.getCurrentWeek = exports.getEndOfDay = void 0;
+var getEndOfDay = function (date) { return date.hour(23).minute(59).second(59); };
+exports.getEndOfDay = getEndOfDay;
+var getCurrentWeek = function (locale) {
+    var today = locale.dayjs(new Date().toDateString());
+    var dayOfWeek = today.day();
+    var startDate = today.subtract(dayOfWeek === 0 ? 6 : dayOfWeek - 1, 'day');
+    var finishDate = startDate.add(6, 'day');
+    return {
+        start: startDate,
+        finish: (0, exports.getEndOfDay)(finishDate)
+    };
+};
+exports.getCurrentWeek = getCurrentWeek;
+var getCurrentMonth = function (locale) {
+    var today = locale.dayjs(new Date().toDateString());
+    var startDate = today.startOf('month');
+    var finishDate = today.endOf('month');
+    return {
+        start: startDate,
+        finish: (0, exports.getEndOfDay)(finishDate)
+    };
+};
+exports.getCurrentMonth = getCurrentMonth;
+var getCurrentYear = function (locale) {
+    var today = locale.dayjs(new Date().toDateString());
+    var startDate = today.startOf('year');
+    var finishDate = today.endOf('year');
+    return {
+        start: startDate,
+        finish: (0, exports.getEndOfDay)(finishDate)
+    };
+};
+exports.getCurrentYear = getCurrentYear;

package/form/DateTimeRangeField/DateTimeRangeFieldView.js

@@ -44,13 +44,22 @@ 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 TimePanelView_1 = __importDefault(require("../TimeField/TimePanelView"));
+var RangeButtons_1 = __importDefault(require("../DateRangeField/views/RangeButtons"));
 function DateTimeRangeFieldView(props) {
     var bem = (0, hooks_1.useBem)('DateTimeRangeFieldView');
     var hasValue = props.inputPropsFrom.value || props.inputPropsTo.value;
-    var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement("div", { className: bem.element('panel-container') },
-        React.createElement(Calendar_1["default"], __assign({}, props.calendarProps, { className: bem.element('calendar') })),
+    var calendarComponent = React.useMemo(function () { return (React.createElement("div", { className: bem.element('panel-container') },
+        React.createElement(Calendar_1["default"], __assign({}, props.calendarProps, { className: bem.element('calendar'), showTodayButton: !props.withRangeButtons })),
         React.createElement("div", { className: bem.element('separator') }),
-        React.createElement(TimePanelView_1["default"], __assign({}, props.timePanelViewProps, { className: bem.element('time-panel') })))); }, [bem, props.calendarProps, props.timePanelViewProps]);
+        React.createElement(TimePanelView_1["default"], __assign({}, props.timePanelViewProps, { className: bem.element('time-panel') })))); }, [bem, props.calendarProps, props.timePanelViewProps, props.withRangeButtons]);
+    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') }, calendarComponent)))
+        : calendarComponent); }, [bem, calendarComponent, props.inputPropsFrom.onChange, props.inputPropsTo.onChange,
+        props.rangeButtonsPosition, props.displayFormat, props.withRangeButtons]);
     return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, hasArrow: false, className: bem.element('dropdown') },
         React.createElement("div", { className: bem(bem.block({
                 disabled: props.disabled,