@mailstep/design-system 0.7.14 → 0.7.15-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.14",
+  "version": "0.7.15-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.js

@@ -80,7 +80,7 @@ var DatePickerRange = function (props) {
             secondDate.setMonth(secondDate.getMonth() + 1);
         }
         else {
-            firstDate.setMonth(firstDate.getMonth() - 1);
+            firstDate.setMonth(firstDate.getMonth());
         }
         return [firstDate, secondDate];
     }, [cleanValue, initialView]);
@@ -107,7 +107,7 @@ var DatePickerRange = function (props) {
     // Check if the second value is not selected and the first value is the same as the initial value
     var secondDatePickerValue = cleanValue[1] === null ? cleanValue[0] : cleanValue[1];
     var ref = useClickOutside({ onClose: onClose });
-    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue), label: props.label, onFocus: openPicker, iconOnClick: openPicker, onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { className: "ignore-element-for-closing-hook", children: [_jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: true, open: true, disabled: cleanValue[0] === null })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, disabled: secondDatePickerValue === null }))] })) }) })] }));
+    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue), label: props.label, onFocus: openPicker, iconOnClick: openPicker, onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { className: "ignore-element-for-closing-hook", children: [_jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: true, open: true, disabled: cleanValue[0] === null })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, disabled: secondDatePickerValue === null, isSecondDatePicker: true }))] })) }) })] }));
 };
 export default DatePickerRange;
 var templateObject_1;

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js

@@ -46,7 +46,7 @@ export default {
     title: 'Blocks/CommonGrid',
     decorators: [withRedux]
 };
-export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, quickFilter: "productSku", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
+export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
 ComplexWithPaginationAndRedux.story = {
     name: 'Complex, with pagination and redux'
 };

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js

@@ -60,6 +60,9 @@ export var columnDefinitions = [
         filtering: true,
         filteringType: 'date',
         sorting: true,
+        filterExtraProps: {
+            filterTime: true,
+        },
     },
     {
         name: 'boolColumn',

package/ui/Blocks/CommonGrid/styles.d.ts

@@ -12,4 +12,5 @@ export declare const CommonGridWithStyles: import("styled-components").StyledCom
 }) => JSX.Element, import("@xstyled/system").Theme, {
     onRowClick?: Function | undefined;
     height?: number | undefined;
+    minHeight?: number | undefined;
 }, never>;

package/ui/Blocks/CommonGrid/styles.js

@@ -15,7 +15,7 @@ export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 =
 export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  background-color: white;\n  box-shadow: gridShadow;\n  border-radius: 8px;\n  flex-grow: 1;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  background-color: white;\n  box-shadow: gridShadow;\n  border-radius: 8px;\n  flex-grow: 1;\n"])));
 export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
 export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: 75px;\n  flex-wrap: wrap;\n  z-index: 2;\n"], ["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: 75px;\n  flex-wrap: wrap;\n  z-index: 2;\n"])));
-export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: 40px;\n  }\n  & .gridHead {\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 1;\n    padding-left: 12px;\n    border-top: 1px solid ", ";\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      position: relative;\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n  }\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 12px;\n    flex-grow: 1;\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\n      overflow-y: auto;\n      width: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"], ["\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: 40px;\n  }\n  & .gridHead {\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 1;\n    padding-left: 12px;\n    border-top: 1px solid ", ";\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      position: relative;\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n  }\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 12px;\n    flex-grow: 1;\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\n      overflow-y: auto;\n      width: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), th('fonts.primary'), th('colors.lightGray6'), th('fonts.primary'), function (_a) {
+export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: 40px;\n  }\n  & .gridHead {\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 1;\n    padding-left: 12px;\n    border-top: 1px solid ", ";\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      position: relative;\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n  }\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 12px;\n    flex-grow: 1;\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n    min-height: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\n      overflow-y: auto;\n      width: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"], ["\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: 40px;\n  }\n  & .gridHead {\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 1;\n    padding-left: 12px;\n    border-top: 1px solid ", ";\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      position: relative;\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n  }\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 12px;\n    flex-grow: 1;\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n    min-height: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\n      overflow-y: auto;\n      width: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), th('fonts.primary'), th('colors.lightGray6'), th('fonts.primary'), function (_a) {
     var theme = _a.theme;
     return theme.colors.white;
 }, function (_a) {
@@ -24,6 +24,9 @@ export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templa
 }, function (_a) {
     var height = _a.height;
     return (height ? '35px' : '0');
+}, function (_a) {
+    var minHeight = _a.minHeight;
+    return (minHeight ? "".concat(minHeight, "px") : '0');
 }, function (_a) {
     var height = _a.height;
     return (height ? "".concat(height, "px") : '475px');

package/ui/Blocks/CommonGrid/types.d.ts

@@ -254,6 +254,7 @@ export type CommonGridProps<TData extends RowProps = RowProps> = {
     gridActions: GridActionsType;
     isLoading?: boolean;
     autoHeight?: boolean;
+    minHeight?: number;
     rowsData: TData[];
     hasColouredRows?: boolean;
     columnsDefinitions: ColumnDefinition[];

package/ui/Elements/DatePicker/DatePicker.d.ts

@@ -14,6 +14,7 @@ export type DatePickerType = DatetimepickerProps & {
     showCalendarLabel?: boolean;
     error?: string;
     icon?: boolean;
+    isSecondDatePicker?: boolean;
     onClear?: () => void;
     onInputChange?: () => void;
 };

package/ui/Elements/DatePicker/Datetime/DateTime.js

@@ -49,6 +49,7 @@ var Datetime = /** @class */ (function (_super) {
             var viewProps = {
                 viewDate: state.viewDate.clone(),
                 label: props.label,
+                isSecondDatePicker: props.isSecondDatePicker,
                 secondValue: props.secondValue,
                 selectedDate: _this.getSelectedDate(),
                 isValidDate: props.isValidDate,

package/ui/Elements/DatePicker/Datetime/components/FooterRow.d.ts

@@ -0,0 +1 @@
+export declare const FooterRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Elements/DatePicker/Datetime/components/FooterRow.js

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from '@xstyled/styled-components';
+export var FooterRow = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 15px;\n  line-height: 23px;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 15px;\n  line-height: 23px;\n"])));
+var templateObject_1;

package/ui/Elements/DatePicker/Datetime/components/FooterRowLabel.d.ts

@@ -0,0 +1 @@
+export declare const FooterRowLabel: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;

package/ui/Elements/DatePicker/Datetime/components/FooterRowLabel.js

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+export var FooterRowLabel = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: 8px;\n  text-align: left;\n  width: 100%;\n\n  &[data-value] {\n    cursor: pointer;\n    &:hover {\n      font-weight: 500;\n    }\n  }\n"], ["\n  margin-left: 8px;\n  text-align: left;\n  width: 100%;\n\n  &[data-value] {\n    cursor: pointer;\n    &:hover {\n      font-weight: 500;\n    }\n  }\n"])));
+var templateObject_1;

package/ui/Elements/DatePicker/Datetime/components/ShortDatePick.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+type ShortDatePickProps = {
+    setDate: (e: React.MouseEvent<HTMLDivElement>) => void;
+    isSecondDatePicker?: boolean;
+};
+export declare const ShortDatePick: FC<ShortDatePickProps>;
+export {};

package/ui/Elements/DatePicker/Datetime/components/ShortDatePick.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '../../../Icon';
+import { i18n } from '@lingui/core';
+import { x } from '@xstyled/styled-components';
+import { FooterRow } from './FooterRow';
+import { FooterRowLabel } from './FooterRowLabel';
+export var ShortDatePick = function (_a) {
+    var setDate = _a.setDate, isSecondDatePicker = _a.isSecondDatePicker;
+    var today = new Date();
+    var yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
+    var tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);
+    var last7Days = new Date(today.getTime() - 24 * 60 * 60 * 1000 * 7);
+    var nextWeek = new Date(today.getTime() + 24 * 60 * 60 * 1000 * 7);
+    return (_jsxs(x.div, { borderTop: "1px solid", borderColor: "lightGray2", mt: "8px", pt: "8px", mb: "8px", children: [_jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { onClick: setDate, "data-value": today.getDate(), "data-month": today.getMonth(), "data-year": today.getFullYear(), children: i18n._({ id: 'dataGrid.filterCell.today', message: 'Today' }) })] }), _jsxs(x.div, { textTransform: "capitalize", children: [new Intl.DateTimeFormat(undefined, { weekday: 'short' }).format(today), ",", ' ', new Intl.DateTimeFormat(undefined, { month: 'short' }).format(today), " ", today.getDate()] })] }), _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { onClick: setDate, "data-value": (isSecondDatePicker ? tomorrow : yesterday).getDate(), "data-month": (isSecondDatePicker ? tomorrow : yesterday).getMonth(), "data-year": (isSecondDatePicker ? tomorrow : yesterday).getFullYear(), children: isSecondDatePicker
+                                    ? i18n._({ id: 'dataGrid.filterCell.tomorrow', message: 'Tomorrow' })
+                                    : i18n._({ id: 'dataGrid.filterCell.yesterday', message: 'Yesterday' }) })] }), _jsx(x.div, { children: _jsxs(x.div, { textTransform: "capitalize", children: [new Intl.DateTimeFormat(undefined, { weekday: 'short' }).format(isSecondDatePicker ? tomorrow : yesterday), ",", ' ', new Intl.DateTimeFormat(undefined, { month: 'short' }).format(isSecondDatePicker ? tomorrow : yesterday), ' ', isSecondDatePicker ? tomorrow.getDate() : yesterday.getDate()] }) })] }), _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { onClick: setDate, "data-value": isSecondDatePicker ? nextWeek.getDate() : last7Days.getDate(), "data-month": isSecondDatePicker ? nextWeek.getMonth() : last7Days.getMonth(), "data-year": isSecondDatePicker ? nextWeek.getFullYear() : last7Days.getFullYear(), children: isSecondDatePicker
+                                    ? i18n._({ id: 'dataGrid.filterCell.nextWeek', message: 'Next week' })
+                                    : i18n._({ id: 'dataGrid.filterCell.lastWeek', message: 'Last week' }) })] }), _jsxs(x.div, { textTransform: "capitalize", children: [new Intl.DateTimeFormat(undefined, { weekday: 'short' }).format(isSecondDatePicker ? nextWeek : last7Days), ",", ' ', new Intl.DateTimeFormat(undefined, { month: 'short' }).format(isSecondDatePicker ? nextWeek : last7Days), ' ', isSecondDatePicker ? nextWeek.getDate() : last7Days.getDate()] })] })] }));
+};

package/ui/Elements/DatePicker/Datetime/components/TimeInput.d.ts

@@ -0,0 +1 @@
+export declare const TimeInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {}, never>;

package/ui/Elements/DatePicker/Datetime/components/TimeInput.js

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+export var TimeInput = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0;\n  margin-right: -1px;\n  padding: 0;\n  border: none;\n  outline: none;\n  color: blue2;\n\n  &::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n"], ["\n  margin: 0;\n  margin-right: -1px;\n  padding: 0;\n  border: none;\n  outline: none;\n  color: blue2;\n\n  &::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n"])));
+var templateObject_1;

package/ui/Elements/DatePicker/Datetime/components/Timepicker.js

@@ -1,50 +1,22 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
-import styled, { x } from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
-var Btn = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transform: rotate(90deg);\n  font-size: 24px;\n  margin: -4px 0;\n  background-color: transparent !important;\n  border: none;\n  color: ", ";\n  &:disabled:hover {\n    color: ", ";\n    cursor: default;\n  }\n  &:hover {\n    color: ", ";\n    background-color: transparent !important;\n  }\n"], ["\n  transform: rotate(90deg);\n  font-size: 24px;\n  margin: -4px 0;\n  background-color: transparent !important;\n  border: none;\n  color: ", ";\n  &:disabled:hover {\n    color: ", ";\n    cursor: default;\n  }\n  &:hover {\n    color: ", ";\n    background-color: transparent !important;\n  }\n"])), th('colors.lightGray4'), th('colors.lightGray4'), th('colors.red2'));
-var TimeWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ", ";\n  border-radius: 0.7rem;\n  padding: 4px 10px;\n  margin: 0 10px;\n"], ["\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ", ";\n  border-radius: 0.7rem;\n  padding: 4px 10px;\n  margin: 0 10px;\n"])), th('colors.lightGray2'));
-var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 22px;\n  font-weight: 700;\n  width: 30px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-size: 22px;\n  font-weight: 700;\n  width: 30px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
-var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: 700;\n  font-size: 16px;\n  width: 25px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-weight: 700;\n  font-size: 16px;\n  width: 25px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
+import Icon from '../../../Icon';
+import { i18n } from '@lingui/core';
+import { x } from '@xstyled/styled-components';
+import { FooterRow } from './FooterRow';
+import { FooterRowLabel } from './FooterRowLabel';
+import { TimeInput } from './TimeInput';
 export var Timepicker = function (_a) {
     var _b, _c, _d, _e;
     var setTime = _a.setTime, value = _a.value, disabled = _a.disabled;
     var initialHours = (_c = (_b = value === null || value === void 0 ? void 0 : value.getHours) === null || _b === void 0 ? void 0 : _b.call(value)) !== null && _c !== void 0 ? _c : 0;
     var initialMinutes = (_e = (_d = value === null || value === void 0 ? void 0 : value.getMinutes) === null || _d === void 0 ? void 0 : _d.call(value)) !== null && _e !== void 0 ? _e : 0;
-    var regExp = '^[0-9]*$';
     var _f = useState(initialHours), hours = _f[0], setHours = _f[1];
     var _g = useState(initialMinutes), minutes = _g[0], setMinutes = _g[1];
-    var increaseHour = useCallback(function () {
-        hours === 23 ? setHours(0) : setHours(hours + 1);
-    }, [hours]);
-    var decreaseHour = useCallback(function () {
-        hours === 0 ? setHours(23) : setHours(hours - 1);
-    }, [hours]);
-    var increaseMinutes = useCallback(function () {
-        minutes >= 55 ? setMinutes(minutes - 55) : setMinutes(minutes + 5);
-    }, [minutes]);
-    var decreaseMinutes = useCallback(function () {
-        minutes <= 5 ? setMinutes(minutes + 55) : setMinutes(minutes - 5);
-    }, [minutes]);
-    var onHoursChange = useCallback(function (e) {
-        if (e.target.value.match(regExp) && Number(e.target.value) <= 23) {
-            setHours(Number(e.target.value));
-        }
-        else {
-            setHours(0);
-        }
-    }, []);
-    var onMinutesChange = useCallback(function (e) {
-        if (e.target.value.match(regExp) && Number(e.target.value) <= 59) {
-            setMinutes(Number(e.target.value));
-        }
-        else {
-            setMinutes(0);
-        }
+    var onChange = useCallback(function (e) {
+        var _a = e.target.value.split(':'), hours = _a[0], minutes = _a[1];
+        setHours(Number(hours));
+        setMinutes(Number(minutes));
     }, []);
     useEffect(function () {
         !!value && setTime('hours', hours);
@@ -52,6 +24,5 @@ export var Timepicker = function (_a) {
     useEffect(function () {
         !!value && setTime('minutes', minutes);
     }, [minutes]);
-    return (_jsx("td", { colSpan: 7, children: _jsx(x.div, { display: "flex", flexDirection: "column", alignItems: "flex-start", pt: "1rem", w: "fit-content", children: _jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseHour, type: "button", children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseHour, type: "button", children: "\u203A" })] }), _jsxs(TimeWrapper, { children: [_jsx(Hours, { value: hours < 10 ? "0".concat(hours) : hours, disabled: disabled, onChange: onHoursChange }), _jsx(x.div, { mx: "7px", color: "lightGray4", children: "|" }), _jsx(Minutes, { value: minutes < 10 ? "0".concat(minutes) : minutes, disabled: disabled, onChange: onMinutesChange })] }), _jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseMinutes, type: "button", children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseMinutes, type: "button", children: "\u203A" })] })] }) }) }));
+    return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { children: [_jsxs(x.div, { children: [_jsx(Icon, { icon: "clock" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.filterCell.time', message: 'Time' }) })] }), _jsx(x.div, { display: "flex", alignItems: "center", children: _jsx(TimeInput, { type: "time", onChange: onChange, disabled: disabled, defaultValue: "00:00" }) })] }) }));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Elements/DatePicker/Datetime/views/DaysView.d.ts

@@ -9,6 +9,6 @@ export default class DaysView extends React.Component {
     renderDayHeaders(): import("react/jsx-runtime").JSX.Element;
     renderDays(): import("react/jsx-runtime").JSX.Element[];
     renderDay(date: any, startOfMonth: any, endOfMonth: any): any;
-    renderFooter(): import("react/jsx-runtime").JSX.Element | undefined;
+    renderFooter(): import("react/jsx-runtime").JSX.Element;
     _setDate: (e: any) => void;
 }

package/ui/Elements/DatePicker/Datetime/views/DaysView.js

@@ -29,6 +29,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Timepicker } from '../components/Timepicker';
 import ViewNavigation from '../components/ViewNavigation';
+import { ShortDatePick } from '../components/ShortDatePick';
 var DaysView = /** @class */ (function (_super) {
     __extends(DaysView, _super);
     function DaysView() {
@@ -78,7 +79,7 @@ var DaysView = /** @class */ (function (_super) {
             key: date.format('M_D'),
             'data-value': date.date(),
             'data-month': date.month(),
-            'data-year': date.year(),
+            'data-year': date.year()
         };
         var className = 'rdtDay';
         if (date.isBefore(startOfMonth)) {
@@ -112,16 +113,15 @@ var DaysView = /** @class */ (function (_super) {
         return this.props.renderDay(dayProps, date.clone(), selectedDate && selectedDate.clone());
     };
     DaysView.prototype.renderFooter = function () {
-        if (!this.props.timeFormat)
-            return;
         var setTime = this.props.setTime;
+        var setDate = this._setDate;
         var value = this.props.value;
         var disabled = this.props.disabled;
-        return (_jsx("tfoot", { children: _jsx("tr", { children: _jsx(Timepicker, { setTime: setTime, value: value, disabled: disabled }) }) }));
+        return (_jsx("tfoot", { children: _jsx("tr", { children: _jsxs("td", { colSpan: 7, children: [_jsx(ShortDatePick, { setDate: setDate, isSecondDatePicker: this.props.isSecondDatePicker }), this.props.timeFormat && _jsx(Timepicker, { setTime: setTime, value: value, disabled: disabled })] }) }) }));
     };
     DaysView.defaultProps = {
         isValidDate: function () { return true; },
-        renderDay: function (props, date) { return _jsx("td", __assign({}, props, { children: date.date() })); },
+        renderDay: function (props, date) { return _jsx("td", __assign({}, props, { children: date.date() })); }
     };
     return DaysView;
 }(React.Component));