@mailstep/design-system 0.5.0-beta.13 → 0.5.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.5.0-beta.13",
+  "version": "0.5.0-beta.2",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -29,10 +29,8 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/cli": "3.17.2",
-    "@lingui/macro": "3.17.2",
-    "@lingui/react": "3.17.2",
-    "@popperjs/core": "^2.11.8",
+    "@lingui/macro": "3.15.0",
+    "@lingui/react": "3.15.0",
     "@storybook/addon-controls": "7.6.8",
     "@storybook/addon-essentials": "7.6.8",
     "@storybook/addon-interactions": "7.6.8",
@@ -55,26 +53,20 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@xstyled/styled-components": "^3.8.0",
     "babel-loader": "^9.1.2",
-    "babel-plugin-macros": "^3.1.0",
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint-plugin-storybook": "0.6.15",
     "faker": "^5.1.0",
     "immer": "9.0.7",
     "lodash": "^4.17.21",
-    "luxon": "^3.4.4",
-    "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",
-    "react-onclickoutside": "^6.13.0",
-    "react-popper": "^2.3.0",
     "react-redux": "*",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-script": "^2.0.5",
-    "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
@@ -98,26 +90,19 @@
     "@fortawesome/pro-regular-svg-icons": "^6.0.0",
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/cli": "3.17.2",
-    "@lingui/macro": "3.17.2",
-    "@lingui/react": "3.17.2",
-    "@popperjs/core": "^2.11.8",
+    "@lingui/macro": "3.15.0",
+    "@lingui/react": "3.15.0",
     "@xstyled/styled-components": "^3.8.0",
     "immer": "9.0.7",
     "lodash": "^4.17.21",
-    "luxon": "^3.4.4",
-    "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-image": "^4.1.0",
-    "react-onclickoutside": "^6.13.0",
-    "react-popper": "^2.3.0",
     "react-redux": ">=4.0.5",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
@@ -129,5 +114,13 @@
   },
   "resolutions": {
     "jackspeak": "2.1.1"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "luxon": "^3.4.4",
+    "moment": "^2.30.1",
+    "react-onclickoutside": "^6.13.0",
+    "react-popper": "^2.3.0",
+    "react-select": "^5.8.0"
   }
 }

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

@@ -1,3 +1,5 @@
+/// <reference types="react" />
 import { GridProps } from './types';
+export declare const GridWithStyles: import("react").ComponentType<import("./types").CommonGridProps>;
 declare const StyledCommonGrid: (props: GridProps) => JSX.Element;
 export default StyledCommonGrid;

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -27,7 +27,7 @@ import { getFilters, GRID_MIN_ROWS } from './utils';
 import useEditReadAsColumn from './hooks/useEditReadAsColumn';
 import { useModal } from '../Modal/hooks/useModal';
 import useManageColumn from './hooks/useManageColumn';
-import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer, StyledButtonStrip, StyledColumnButton, } from './styles';
+import withStyles, { BottomWrapper, CommonGridWrap, ContentContainer, StyledButtonStrip, StyledColumnButton } from './styles';
 import { H6 } from '../../Elements/Typography';
 import HidePrint from './components/HidePrint/HidePrint';
 import ControlButtons from './components/ControlButtons';
@@ -39,6 +39,8 @@ import TablePagination from './components/TablePagination';
 import Modal from '../Modal';
 import ManageColumnForm from './components/ManageColumnForm';
 import { Trans } from '@lingui/react';
+import CommonGrid from './CommonGrid';
+export var GridWithStyles = withStyles(CommonGrid);
 var StyledCommonGrid = function (props) {
     var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, onExport = props.onExport, hideControlButtons = props.hideControlButtons, floatingButtonProps = props.floatingButtonProps, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "onExport", "hideControlButtons", "floatingButtonProps"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
@@ -62,6 +64,6 @@ var StyledCommonGrid = function (props) {
         gridSelectors: gridSelectors,
         onClose: onClose,
     }), columnsConfigValues = _d.columnsConfigValues, setColumnsConfigOptions = _d.setColumnsConfigOptions, onConfirmForm = _d.onConfirmForm, resetColumnConfig = _d.resetColumnConfig;
-    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", appearance: "ghost", icon: _jsx(Rows, {}), onClick: openManageColumnForm, children: _jsx(H6, { children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, hasColouredRows: true, floatingButtonProps: floatingButtonProps }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isAbsolute: !!gridHeight, children: [_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, onExport: onExport }), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onClose, onCancel: onClose, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: columns, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions }) }))] }));
+    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", appearance: "ghost", icon: _jsx(Rows, {}), onClick: openManageColumnForm, children: _jsx(H6, { children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(GridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, hasColouredRows: true, floatingButtonProps: floatingButtonProps }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isAbsolute: !!gridHeight, children: [_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, onExport: onExport }), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onClose, onCancel: onClose, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: columns, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions }) }))] }));
 };
 export default StyledCommonGrid;

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

@@ -14,7 +14,7 @@ import React from 'react';
 import faker from 'faker';
 import { rowClassSymbol } from '../../types';
 import withReduxActions from '../../HoC/withReduxActions';
-import CommonGrid from '../../CommonGridContainer';
+import CommonGrid from '../../CommonGrid';
 export var enumValues = ['option A', 'option B', 'option C'];
 export var oversizedArrayColumns = 25;
 export var gridSelectors = {};

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

@@ -1,12 +1,11 @@
-/// <reference types="react" />
-export declare const BottomWrapper: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
+import React from 'react';
+import { CommonGridProps } from './types';
+export declare const BottomWrapper: import("styled-components").StyledComponent<(props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => React.ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
     isAbsolute?: boolean | undefined;
 }, "color">;
-export declare const ContentContainer: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const CommonGridWrap: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const StyledButtonStrip: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const ContentContainer: import("styled-components").StyledComponent<(props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => React.ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const CommonGridWrap: import("styled-components").StyledComponent<(props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => React.ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const StyledButtonStrip: import("styled-components").StyledComponent<(props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => React.ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
 export declare const StyledColumnButton: import("styled-components").StyledComponent<({ isLoading, loadingText, icon, appearance, disabled, sizing, buttonRef, onClick, fullWidth, ...props }: import("../../Elements/Button/types").Props) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
-export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, hideColumnConfig, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: import("./types").CommonGridProps) => JSX.Element, import("@xstyled/system").Theme, {
-    onRowClick?: Function | undefined;
-    height?: number | undefined;
-}, never>;
+declare const withStyles: (CommonGrid: React.ComponentType<CommonGridProps>) => React.ComponentType<CommonGridProps>;
+export default withStyles;

package/ui/Blocks/CommonGrid/styles.js

@@ -5,7 +5,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import styled, { x } from '@xstyled/styled-components';
 import { th } from '@xstyled/system';
 import { Button } from '../../Elements/Button';
-import CommonGrid from './CommonGrid';
 export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 11px;\n  padding-top: 10px;\n  position: ", ";\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    position: relative;\n    padding-bottom: 11px;\n    margin-bottom: 0;\n  }\n  & > * {\n    @media (min-width: 1024px) {\n      justify-content: flex-end;\n    }\n  }\n"], ["\n  margin-bottom: 11px;\n  padding-top: 10px;\n  position: ", ";\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    position: relative;\n    padding-bottom: 11px;\n    margin-bottom: 0;\n  }\n  & > * {\n    @media (min-width: 1024px) {\n      justify-content: flex-end;\n    }\n  }\n"])), function (_a) {
     var isAbsolute = _a.isAbsolute;
     return (isAbsolute ? 'absolute' : 'relative');
@@ -17,7 +16,7 @@ export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_
 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  flex-wrap: wrap;\n  border-bottom: 0.5px solid ", ";\n"], ["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  flex-wrap: wrap;\n  border-bottom: 0.5px solid ", ";\n"])), th('colors.lightGray6'));
 export var StyledColumnButton = styled(Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"], ["\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"])));
-export var CommonGridWithStyles = styled(CommonGrid)(templateObject_6 || (templateObject_6 = __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: 20px;\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: 20px;\n    flex-grow: 1;\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\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    & .sticky {\n      background-color: #fff;\n      :hover {\n        background-color: #fdf4f3;\n      }\n    }\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &.selected,\n    &.selected > .sticky {\n      background-color: #fdf4f3;\n    }\n\n    :hover {\n      background-color: #fdf4f3;\n\n      .sticky {\n        background-color: #fdf4f3;\n      }\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: 20px;\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: 20px;\n    flex-grow: 1;\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\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    & .sticky {\n      background-color: #fff;\n      :hover {\n        background-color: #fdf4f3;\n      }\n    }\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &.selected,\n    &.selected > .sticky {\n      background-color: #fdf4f3;\n    }\n\n    :hover {\n      background-color: #fdf4f3;\n\n      .sticky {\n        background-color: #fdf4f3;\n      }\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('fonts.primary'), function (_a) {
+var withStyles = function (CommonGrid) { return styled(CommonGrid)(templateObject_6 || (templateObject_6 = __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: 20px;\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: 20px;\n    flex-grow: 1;\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\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    & .sticky {\n      background-color: #fff;\n      :hover {\n        background-color: #fdf4f3;\n      }\n    }\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &.selected,\n    &.selected > .sticky {\n      background-color: #fdf4f3;\n    }\n\n    :hover {\n      background-color: #fdf4f3;\n\n      .sticky {\n        background-color: #fdf4f3;\n      }\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: 20px;\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: 20px;\n    flex-grow: 1;\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\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    & .sticky {\n      background-color: #fff;\n      :hover {\n        background-color: #fdf4f3;\n      }\n    }\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &.selected,\n    &.selected > .sticky {\n      background-color: #fdf4f3;\n    }\n\n    :hover {\n      background-color: #fdf4f3;\n\n      .sticky {\n        background-color: #fdf4f3;\n      }\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('fonts.primary'), function (_a) {
     var theme = _a.theme;
     return theme.colors.white;
 }, function (_a) {
@@ -29,5 +28,6 @@ export var CommonGridWithStyles = styled(CommonGrid)(templateObject_6 || (templa
 }, function (_a) {
     var height = _a.height;
     return (height ? "".concat(height, "px") : '475px');
-});
+}); };
+export default withStyles;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -1,6 +1,6 @@
 import React from 'react';
+import { DatetimepickerProps } from './Datetime/DateTime';
 import { SpaceAround } from '../SpaceAround';
-import { DatetimepickerProps } from './Datetime/types';
 export type DatePickerType = DatetimepickerProps & {
     onChange: (value: string | Date) => void;
     disabled?: boolean;

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

@@ -1,7 +1,4 @@
-import moment from 'moment';
-import React from 'react';
-import { DatetimepickerProps } from './types';
-export default class Datetime extends React.Component<DatetimepickerProps> {
+export default class Datetime extends React.Component<any, any, any> {
     static defaultProps: {
         onOpen: () => void;
         onClose: () => void;
@@ -28,24 +25,31 @@ export default class Datetime extends React.Component<DatetimepickerProps> {
     };
     static moment: typeof moment;
     constructor(props: any);
+    state: {
+        open: boolean;
+        currentView: any;
+        viewDate: any;
+        selectedDate: any;
+        inputValue: any;
+    };
     render(): import("react/jsx-runtime").JSX.Element;
     renderInput(): import("react/jsx-runtime").JSX.Element | undefined;
-    renderView(): JSX.Element;
+    renderView(): any;
     _renderCalendar: () => import("react/jsx-runtime").JSX.Element;
     getInitialState(): {
         open: boolean;
-        currentView: string;
+        currentView: any;
         viewDate: any;
         selectedDate: any;
         inputValue: any;
     };
     getInitialViewDate(selectedDate: any): any;
     getInitialDate(): any;
-    getInitialView(): string;
+    getInitialView(): any;
     parseDate(date: any, dateFormat: any): any;
     getClassName(): string;
     isOpen(): any;
-    getUpdateOn(dateFormat: any): string;
+    getUpdateOn(dateFormat: any): any;
     getLocaleData(): any;
     getDateFormat(): any;
     getTimeFormat(): any;
@@ -70,6 +74,7 @@ export default class Datetime extends React.Component<DatetimepickerProps> {
     _handleClickOutside: () => void;
     localMoment(date: any, format: any, props: any): any;
     checkTZ(): void;
+    tzWarning: boolean | undefined;
     componentDidUpdate(prevProps: any): void;
     regenerateDates(): void;
     getSelectedDate(): any;
@@ -81,7 +86,7 @@ export default class Datetime extends React.Component<DatetimepickerProps> {
      * @param dateType date
      * @public
      */
-    setViewDate(date: any): void;
+    public setViewDate(date: any): void;
     /**
      * Set the view currently shown by the calendar. View modes shipped with react-datetime are 'years', 'months', 'days' and 'time'.
      * @param TYPES.string mode
@@ -93,3 +98,5 @@ export default class Datetime extends React.Component<DatetimepickerProps> {
     _onInputClick: (e: any) => void;
     callHandler(method: any, e: any): boolean;
 }
+import React from 'react';
+import moment from 'moment';

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

@@ -25,12 +25,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
+/* eslint-disable */
 import moment from 'moment';
 import React from 'react';
-import DaysView from './views/DaysView';
-import MonthsView from './views/MonthsView';
-import YearsView from './views/YearsView';
+import DaysView from './views/DaysView.jsx';
+import MonthsView from './views/MonthsView.jsx';
+import YearsView from './views/YearsView.jsx';
 import onClickOutside from 'react-onclickoutside';
 var viewModes = {
     YEARS: 'years',

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

@@ -10,6 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 export default function ViewNavigation(_a) {
     var onClickPrev = _a.onClickPrev, onClickSwitch = _a.onClickSwitch, onClickNext = _a.onClickNext, switchContent = _a.switchContent, switchColSpan = _a.switchColSpan, switchProps = _a.switchProps, label = _a.label;
     return (_jsxs("tr", { children: [_jsx("th", { className: "rdtPrev", onClick: onClickPrev, children: _jsx("span", { children: "\u2039" }) }), _jsx("th", __assign({ className: "rdtSwitch", colSpan: switchColSpan, onClick: onClickSwitch }, switchProps, { children: switchContent })), _jsx("th", { className: "rdtNext", onClick: onClickNext, children: _jsx("span", { children: "\u203A" }) }), _jsx("th", { colSpan: 2, className: "rdtLabel", children: label && label })] }));

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

@@ -1,9 +1,10 @@
-import React from 'react';
-export default class DaysView extends React.Component {
+export default class DaysView extends React.Component<any, any, any> {
     static defaultProps: {
         isValidDate: () => boolean;
         renderDay: (props: any, date: any) => import("react/jsx-runtime").JSX.Element;
     };
+    constructor(props: any);
+    constructor(props: any, context: any);
     render(): import("react/jsx-runtime").JSX.Element;
     renderNavigation(): import("react/jsx-runtime").JSX.Element;
     renderDayHeaders(): import("react/jsx-runtime").JSX.Element;
@@ -12,3 +13,4 @@ export default class DaysView extends React.Component {
     renderFooter(): import("react/jsx-runtime").JSX.Element | undefined;
     _setDate: (e: any) => void;
 }
+import React from 'react';

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

@@ -25,7 +25,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
+/* eslint-disable */
 import React from 'react';
 import { Timepicker } from '../components/Timepicker';
 import ViewNavigation from '../components/ViewNavigation';

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

@@ -1,5 +1,6 @@
-import React from 'react';
-export default class MonthsView extends React.Component {
+export default class MonthsView extends React.Component<any, any, any> {
+    constructor(props: any);
+    constructor(props: any, context: any);
     render(): import("react/jsx-runtime").JSX.Element;
     renderNavigation(): import("react/jsx-runtime").JSX.Element;
     renderMonths(): import("react/jsx-runtime").JSX.Element[];
@@ -8,3 +9,4 @@ export default class MonthsView extends React.Component {
     getMonthText(month: any): any;
     _updateSelectedMonth: (event: any) => void;
 }
+import React from 'react';

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

@@ -25,7 +25,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
+/* eslint-disable */
 import React from 'react';
 import ViewNavigation from '../components/ViewNavigation';
 var MonthsView = /** @class */ (function (_super) {

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

@@ -1,8 +1,9 @@
-import React from 'react';
-export default class YearsView extends React.Component {
+export default class YearsView extends React.Component<any, any, any> {
     static defaultProps: {
         renderYear: (props: any, year: any) => import("react/jsx-runtime").JSX.Element;
     };
+    constructor(props: any);
+    constructor(props: any, context: any);
     render(): import("react/jsx-runtime").JSX.Element;
     renderNavigation(): import("react/jsx-runtime").JSX.Element;
     renderYears(): import("react/jsx-runtime").JSX.Element[];
@@ -13,3 +14,4 @@ export default class YearsView extends React.Component {
     isDisabledYear(year: any): any;
     _updateSelectedYear: (event: any) => void;
 }
+import React from 'react';

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

@@ -25,7 +25,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
+/* eslint-disable */
 import React from 'react';
 import ViewNavigation from '../components/ViewNavigation';
 var YearsView = /** @class */ (function (_super) {