@deviceinsight/ng-ui-components 6.18.0-SNAPSHOT

package/lib/cjs/components/pagination/__tests__/Pagination.spec.js

@@ -0,0 +1,115 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const enzyme_1 = require("enzyme");
+const Pagination_1 = __importDefault(require("../Pagination"));
+describe('Pagination.js', () => {
+    it('should disable all buttons when there is only one page', () => {
+        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 0, totalPages: 1, onChangePage: () => { } }));
+        expect(PaginationWrapper.find('span.disabled')).toHaveLength(4);
+    });
+    it('should disable "prev" and "first" when the first page is selected', () => {
+        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: () => { } }));
+        expect(PaginationWrapper.find('span.prev.disabled')).toHaveLength(2);
+    });
+    it('should disable "next" and "last" when the last page is selected', () => {
+        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 9, totalPages: 10, onChangePage: () => { } }));
+        expect(PaginationWrapper.find('span.next.disabled')).toHaveLength(2);
+    });
+    it('should not disable buttons when on a page > 0 and < max pages', () => {
+        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 5, totalPages: 10, onChangePage: () => { } }));
+        expect(PaginationWrapper.find('span.disabled')).toHaveLength(0);
+    });
+    it('should go to the first page when the user clicks "first"', () => {
+        const handleChangePage = jest.fn();
+        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 5, totalPages: 10, onChangePage: handleChangePage }));
+        PaginationWrapper.find('span.prev').first().simulate('click');
+        expect(handleChangePage).toHaveBeenCalledWith(0);
+    });
+    it('should go to the previous page when the user clicks "prev"', () => {
+        const page = 2;
+        const handleChangePage = jest.fn();
+        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: page, totalPages: 10, onChangePage: handleChangePage }));
+        PaginationWrapper.find('span.prev').last().simulate('click');
+        expect(handleChangePage).toHaveBeenCalledWith(page - 1);
+    });
+    it('should go to the next page when the user clicks "next"', () => {
+        const handleChangePage = jest.fn();
+        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 2, totalPages: 10, onChangePage: handleChangePage }));
+        PaginationWrapper.find('span.next').first().simulate('click');
+        expect(handleChangePage).toHaveBeenCalledWith(3);
+    });
+    it('should go to the last page when the user clicks "last"', () => {
+        const handleChangePage = jest.fn();
+        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 5, totalPages: 10, onChangePage: handleChangePage }));
+        PaginationWrapper.find('span.next').last().simulate('click');
+        expect(handleChangePage).toHaveBeenCalledWith(9);
+    });
+    it('should match snapshot', () => {
+        const PaginationWrapper1 = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: () => { } }));
+        const PaginationWrapper2 = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 5, totalPages: 10, onChangePage: () => { } }));
+        const PaginationWrapper3 = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 9, totalPages: 10, onChangePage: () => { } }));
+        expect(PaginationWrapper1).toMatchSnapshot();
+        expect(PaginationWrapper2).toMatchSnapshot();
+        expect(PaginationWrapper3).toMatchSnapshot();
+    });
+    describe('handlePageInputChange', () => {
+        it('should set page number if input is a correct number', () => {
+            const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: () => { } }));
+            const instance = PaginationWrapper.instance();
+            // @ts-ignore
+            const spy = jest.spyOn(instance, 'notifyPageChange');
+            // @ts-ignore
+            instance.handlePageInputChange({ target: { value: '4' } });
+            expect(spy).toHaveBeenCalledWith(4 - 1); // counting from 0
+        });
+        it('should not set page number if input is bigger than totalPages', () => {
+            const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: () => { } }));
+            const instance = PaginationWrapper.instance();
+            // @ts-ignore
+            const spy = jest.spyOn(instance, 'notifyPageChange');
+            // @ts-ignore
+            instance.handlePageInputChange({ target: { value: '12' } });
+            expect(PaginationWrapper.state('page')).toBe(0);
+            expect(spy).not.toHaveBeenCalled();
+        });
+        it('should not set empty string as state and not call notifyPageChange', () => {
+            const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: () => { } }));
+            const instance = PaginationWrapper.instance();
+            // @ts-ignore
+            instance.handlePageInputChange({ target: { value: '2' } });
+            // @ts-ignore
+            const spy = jest.spyOn(instance, 'notifyPageChange');
+            // @ts-ignore
+            instance.handlePageInputChange({ target: { value: '0' } });
+            expect(PaginationWrapper.state('page')).toBe('');
+            expect(spy).not.toHaveBeenCalled();
+        });
+    });
+});

package/lib/cjs/components/periodpicker/PeriodPicker.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { Period } from './types';
+export declare type Props = {
+    /** Period from start- to endpoint */
+    period: Period;
+    /** Function, executed on change */
+    onChange: (period: Period) => void;
+    /** Predefined period name */
+    defaultPeriodName?: string;
+    /** Show only dropdown with calendar part without inputs? */
+    inputsHiddenByDefault?: boolean;
+    /** Should the menu be hidden? */
+    menuHidden?: boolean;
+    /** Should the PeriodPicker be readOnly? */
+    readOnly?: boolean;
+    /** (optional) locale, if not set, the i18next.language is taken */
+    locale?: string;
+    /** (optional) timezone */
+    timezone?: string;
+    'data-testid'?: string;
+};
+export default function PeriodPicker({ period, onChange, inputsHiddenByDefault, menuHidden, readOnly, locale, defaultPeriodName, timezone, ...props }: Props): JSX.Element;
+//# sourceMappingURL=PeriodPicker.d.ts.map

package/lib/cjs/components/periodpicker/PeriodPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeriodPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/periodpicker/PeriodPicker.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAK/B,oBAAY,KAAK,GAAG;IACnB,qCAAqC;IACrC,MAAM,EAAE,MAAM,CAAC;IAEf,mCAAmC;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,6BAA6B;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,4DAA4D;IAC5D,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACpC,MAAM,EACN,QAAQ,EACR,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,KAAK,eAmBP"}

package/lib/cjs/components/periodpicker/PeriodPicker.js

@@ -0,0 +1,40 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const Inputs_1 = __importDefault(require("./components/Inputs"));
+const Menu_1 = __importDefault(require("./components/Menu"));
+const usePeriodName_1 = __importDefault(require("./usePeriodName"));
+function PeriodPicker({ period, onChange, inputsHiddenByDefault, menuHidden, readOnly, locale, defaultPeriodName, timezone, ...props }) {
+    const [showInputs, setShowInputs] = (0, react_1.useState)(!inputsHiddenByDefault);
+    const periodName = (0, usePeriodName_1.default)(period, timezone) ?? defaultPeriodName;
+    return (react_1.default.createElement("div", { className: "di period-picker", "data-testid": props['data-testid'] },
+        (!inputsHiddenByDefault || showInputs) && (react_1.default.createElement(Inputs_1.default, { period: period, onChange: onChange, locale: locale, readOnly: readOnly, timezone: timezone })),
+        menuHidden || readOnly || (react_1.default.createElement(Menu_1.default, { periodName: periodName, onShowCustomPeriod: inputsHiddenByDefault ? setShowInputs : undefined, onChange: onChange, timezone: timezone }))));
+}
+exports.default = PeriodPicker;

package/lib/cjs/components/periodpicker/components/Inputs.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Period } from '../types';
+declare type Props = {
+    period: Period;
+    onChange: (period: Period) => void;
+    readOnly?: boolean;
+    locale?: string;
+    timezone?: string;
+};
+export default function Inputs({ period, onChange, readOnly, locale, timezone }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=Inputs.d.ts.map

package/lib/cjs/components/periodpicker/components/Inputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inputs.d.ts","sourceRoot":"","sources":["../../../../../src/components/periodpicker/components/Inputs.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAMhC,aAAK,KAAK,GAAG;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAC,EAAE,KAAK,eA2FnF"}

package/lib/cjs/components/periodpicker/components/Inputs.js

@@ -0,0 +1,88 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const DateTimeInput_1 = __importDefault(require("../../input/DateTimeInput"));
+const ONE_HOUR = 60 * 60 * 1000;
+const TOGGLE_TIMEOUT = 300;
+function Inputs({ period, onChange, readOnly, locale, timezone }) {
+    const [showWarningTarget, setShowWarningTarget] = (0, react_1.useState)('');
+    const [forceOpenEndDate, setForceOpenEndDate] = (0, react_1.useState)(false);
+    const warningTimeoutRef = (0, react_1.useRef)();
+    const startDate = new Date(period.tsStart);
+    const endDate = new Date(period.tsEnd);
+    function openEndDate() {
+        setForceOpenEndDate(true);
+        setTimeout(() => {
+            setForceOpenEndDate(false);
+        }, TOGGLE_TIMEOUT);
+    }
+    function showWarning(target) {
+        if (warningTimeoutRef.current) {
+            clearTimeout(warningTimeoutRef.current);
+        }
+        setShowWarningTarget(target);
+        warningTimeoutRef.current = setTimeout(() => setShowWarningTarget(''), 1000);
+    }
+    function handleChangeStartDate(timestamp, fromTextField) {
+        if (timestamp) {
+            const incorrect = period.tsEnd && timestamp > period.tsEnd;
+            const tsEnd = incorrect ? timestamp + ONE_HOUR : period.tsEnd;
+            onChange({
+                tsStart: timestamp,
+                tsEnd
+            });
+            if (!fromTextField) {
+                openEndDate();
+            }
+            if (incorrect) {
+                showWarning('date-to');
+            }
+        }
+    }
+    function handleChangeEndDate(timestamp) {
+        if (timestamp) {
+            const incorrect = period.tsStart && timestamp < period.tsStart;
+            const tsStart = incorrect ? timestamp - ONE_HOUR : period.tsStart;
+            onChange({
+                tsStart,
+                tsEnd: timestamp
+            });
+            if (incorrect) {
+                showWarning('date-from');
+            }
+        }
+    }
+    return (react_1.default.createElement("span", { className: "inputs" },
+        react_1.default.createElement("span", { "data-testid": "from-wrapper" },
+            react_1.default.createElement(DateTimeInput_1.default, { timestamp: period.tsStart, onChange: handleChangeStartDate, warning: showWarningTarget === 'date-from', selectsStart: true, startDate: startDate, endDate: endDate, readOnly: readOnly, locale: locale, timezone: timezone })),
+        "\u00A0 - \u00A0",
+        react_1.default.createElement("span", { "data-testid": "to-wrapper" },
+            react_1.default.createElement(DateTimeInput_1.default, { forceOpen: forceOpenEndDate, timestamp: period.tsEnd, onChange: handleChangeEndDate, warning: showWarningTarget === 'date-to', selectsEnd: true, startDate: startDate, endDate: endDate, readOnly: readOnly, locale: locale, timezone: timezone }))));
+}
+exports.default = Inputs;

package/lib/cjs/components/periodpicker/components/Menu.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Period } from '../types';
+declare type Props = {
+    periodName: string | undefined;
+    timezone?: string;
+    onChange: (period: Period) => void;
+    onShowCustomPeriod: ((show: boolean) => void) | undefined;
+};
+export default function Menu({ onChange, onShowCustomPeriod, periodName, timezone }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=Menu.d.ts.map

package/lib/cjs/components/periodpicker/components/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../src/components/periodpicker/components/Menu.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAgBhC,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC1D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAC,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,QAAQ,EAAC,EAAE,KAAK,eA2KvF"}

package/lib/cjs/components/periodpicker/components/Menu.js

@@ -0,0 +1,125 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const i18n_1 = require("../../../i18n");
+const dayjs_1 = __importDefault(require("dayjs"));
+const ng_ui_basic_components_1 = require("@deviceinsight/ng-ui-basic-components");
+const DateInput_1 = __importDefault(require("../../input/DateInput"));
+const MonthPicker_1 = __importDefault(require("./MonthPicker"));
+const icon_calendar_svg_1 = __importDefault(require("../../../assets/svg/icon_calendar.svg"));
+const triangle_down_svg_1 = __importDefault(require("../../../assets/svg/triangle_down.svg"));
+const periods_1 = require("../periods");
+function Menu({ onChange, onShowCustomPeriod, periodName, timezone }) {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [showDatePicker, setShowDatePicker] = (0, react_1.useState)(false);
+    const [showMonthPicker, setShowMonthPicker] = (0, react_1.useState)(false);
+    const [datePickerDate, setDatePickerDate] = (0, react_1.useState)(Date.now());
+    function setPeriod(period) {
+        onChange(period);
+        setVisible(false);
+        if (onShowCustomPeriod) {
+            onShowCustomPeriod(false);
+        }
+    }
+    function setPeriodSpecificDate(date) {
+        setPeriod((0, periods_1.createWholeDay)(date ?? Date.now(), timezone));
+        setShowDatePicker(false);
+        setDatePickerDate(date ?? undefined);
+    }
+    function setPeriodSpecificMonth(month, year) {
+        setPeriod((0, periods_1.createWholeMonth)((0, dayjs_1.default)()
+            .year(year)
+            .month(month - 1)
+            .valueOf(), timezone));
+        setShowMonthPicker(false);
+    }
+    function toggleDatePicker() {
+        setShowDatePicker(!showDatePicker);
+        setShowMonthPicker(false);
+    }
+    function toggleMonthPicker() {
+        setShowMonthPicker(!showMonthPicker);
+        setShowDatePicker(false);
+    }
+    function handleCustomPeriodSelect() {
+        setVisible(false);
+        if (onShowCustomPeriod) {
+            onShowCustomPeriod(true);
+        }
+    }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(ng_ui_basic_components_1.Popup, { active: visible, onHide: () => setVisible(false), handler: react_1.default.createElement(ng_ui_basic_components_1.Button, { "data-testid": "time-period-menu-button", title: {
+                    id: 'trend.calendarMenu.calendar.timePeriod',
+                    defaultValue: 'Time Period'
+                }, onClick: () => setVisible((visible) => !visible) },
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("img", { src: icon_calendar_svg_1.default, alt: "calendar icon", style: { width: 16, height: 16 } }),
+                    "\u00A0",
+                    !!periodName && (react_1.default.createElement("span", null,
+                        "\u00A0",
+                        periodName,
+                        "\u00A0")),
+                    react_1.default.createElement("img", { src: triangle_down_svg_1.default, alt: "triangle down", style: { width: 16, height: 16 } }))) },
+            react_1.default.createElement("div", { className: "di multimenu period-picker-multimenu" },
+                react_1.default.createElement("div", { className: `drop bottom ${visible ? 'show' : ''}` },
+                    react_1.default.createElement("div", { className: `left-box ${showDatePicker ? 'show' : ''}` },
+                        react_1.default.createElement(DateInput_1.default, { inline: true, value: datePickerDate, onChange: setPeriodSpecificDate })),
+                    react_1.default.createElement("div", { className: `left-box ${showMonthPicker ? 'show' : ''}` },
+                        react_1.default.createElement(MonthPicker_1.default, { onChange: setPeriodSpecificMonth })),
+                    react_1.default.createElement("div", { className: "right-box" },
+                        react_1.default.createElement("div", { className: "item", "data-testid": "today-button", onClick: () => setPeriod((0, periods_1.createToday)(timezone)) },
+                            react_1.default.createElement("div", { className: "item-text" },
+                                react_1.default.createElement(i18n_1.Trans, { i18nKey: "trend.calendarMenu.timePeriod.today" }, "Today"))),
+                        react_1.default.createElement("div", { className: "item", "data-testid": "yesterday-button", onClick: () => setPeriod((0, periods_1.createYesterday)(timezone)) },
+                            react_1.default.createElement("div", { className: "item-text" },
+                                react_1.default.createElement(i18n_1.Trans, { i18nKey: "trend.calendarMenu.timePeriod.yesterday" }, "Yesterday"))),
+                        react_1.default.createElement("div", { className: "item" },
+                            react_1.default.createElement("div", { "data-testid": "last-7-days-button", className: "item-text", onClick: () => setPeriod((0, periods_1.createLastXDays)(7, timezone)) },
+                                react_1.default.createElement(i18n_1.Trans, { i18nKey: "trend.calendarMenu.timePeriod.lastSevenDays" }, "Last 7 days")),
+                            react_1.default.createElement("div", { className: "item-more icon triangle" },
+                                react_1.default.createElement("div", { className: "item-more-submenu" }, [2, 3, 5, 10, 14, 30].map((days) => (react_1.default.createElement("div", { className: "subitem", key: days, onClick: () => setPeriod((0, periods_1.createLastXDays)(days, timezone)) }, days)))))),
+                        react_1.default.createElement("div", { className: "item", "data-testid": "current-week-button", onClick: () => setPeriod((0, periods_1.createCurrentWeek)(timezone)) },
+                            react_1.default.createElement("div", { className: "item-text" },
+                                react_1.default.createElement(i18n_1.Trans, { i18nKey: "trend.calendarMenu.timePeriod.currentWeek" }, "Curr. Week"))),
+                        react_1.default.createElement("div", { className: "item", "data-testid": "current-month-button", onClick: () => setPeriod((0, periods_1.createCurrentMonth)(timezone)) },
+                            react_1.default.createElement("div", { className: "item-text" },
+                                react_1.default.createElement(i18n_1.Trans, { i18nKey: "trend.calendarMenu.timePeriod.currentMonth" }, "Curr. Month"))),
+                        react_1.default.createElement("div", { className: "item", "data-testid": "day-button", onClick: toggleDatePicker },
+                            react_1.default.createElement("div", { className: "item-text" },
+                                react_1.default.createElement(i18n_1.Trans, { i18nKey: "trend.calendarMenu.timePeriod.day" }, "Day"),
+                                react_1.default.createElement("div", { className: "item-more icon dots" }))),
+                        react_1.default.createElement("div", { className: "item", "data-testid": "month-button", onClick: toggleMonthPicker },
+                            react_1.default.createElement("div", { className: "item-text" },
+                                react_1.default.createElement(i18n_1.Trans, { i18nKey: "trend.calendarMenu.timePeriod.month" }, "Month"),
+                                react_1.default.createElement("div", { className: "item-more icon dots" }))),
+                        onShowCustomPeriod !== undefined && (react_1.default.createElement("div", { className: "item", "data-testid": "from-to-button", onClick: handleCustomPeriodSelect },
+                            react_1.default.createElement("div", { className: "item-text" },
+                                react_1.default.createElement(i18n_1.Trans, { i18nKey: "trend.calendarMenu.timePeriod.fromto" }, "From/to"))))))))));
+}
+exports.default = Menu;

package/lib/cjs/components/periodpicker/components/MonthPicker.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+declare type OwnProps = {
+    month?: number;
+    year?: number;
+    onChange: (month: number, year: number) => void;
+};
+declare type Props = OwnProps;
+declare type State = {
+    selectedMonth: number;
+    selectedYear: number;
+    displayedYear: number;
+};
+export default class MonthPicker extends React.Component<Props, State> {
+    constructor(props: Props);
+    tdMonth: (month: number) => JSX.Element;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=MonthPicker.d.ts.map

package/lib/cjs/components/periodpicker/components/MonthPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/periodpicker/components/MonthPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,aAAK,QAAQ,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,aAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,aAAK,KAAK,GAAG;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBACzD,KAAK,EAAE,KAAK;IAWxB,OAAO,UAAW,MAAM,iBAiBtB;IAEF,MAAM;CAwDN"}

package/lib/cjs/components/periodpicker/components/MonthPicker.js

@@ -0,0 +1,91 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const dayjs_1 = __importDefault(require("dayjs"));
+const classnames_1 = __importDefault(require("classnames"));
+class MonthPicker extends React.Component {
+    constructor(props) {
+        super(props);
+        this.tdMonth = (month) => {
+            const { selectedMonth, selectedYear, displayedYear } = this.state;
+            return (React.createElement("td", { "data-testid": `month-${month}-button`, onClick: () => {
+                    this.props.onChange(month, displayedYear);
+                    this.setState({
+                        selectedMonth: month,
+                        selectedYear: displayedYear
+                    });
+                }, className: (0, classnames_1.default)({ selected: month === selectedMonth && displayedYear === selectedYear }) }, (0, dayjs_1.default)(`${selectedYear}/${month.toString().padStart(2, '0')}/01`, 'YYYY/MM/DD').format('MMM')));
+        };
+        const month = props.month !== null && props.month !== undefined ? props.month : (0, dayjs_1.default)().month() + 1;
+        const year = props.year !== null && props.year !== undefined ? props.year : (0, dayjs_1.default)().year();
+        this.state = {
+            selectedMonth: month,
+            selectedYear: year,
+            displayedYear: year
+        };
+    }
+    render() {
+        const { displayedYear } = this.state;
+        return (React.createElement("div", { className: "di monthpicker" },
+            React.createElement("div", { className: "pager" },
+                React.createElement("span", { className: "page-nav prev", onClick: () => {
+                        this.setState({
+                            displayedYear: displayedYear - 1
+                        });
+                    } }),
+                React.createElement("span", { className: "page-nav info" }, displayedYear),
+                React.createElement("span", { className: "page-nav next", onClick: () => {
+                        this.setState({
+                            displayedYear: displayedYear + 1
+                        });
+                    } })),
+            React.createElement("div", { className: "months" },
+                React.createElement("table", { style: {
+                        margin: 'auto'
+                    } },
+                    React.createElement("tbody", null,
+                        React.createElement("tr", null,
+                            this.tdMonth(1),
+                            this.tdMonth(2),
+                            this.tdMonth(3)),
+                        React.createElement("tr", null,
+                            this.tdMonth(4),
+                            this.tdMonth(5),
+                            this.tdMonth(6)),
+                        React.createElement("tr", null,
+                            this.tdMonth(7),
+                            this.tdMonth(8),
+                            this.tdMonth(9)),
+                        React.createElement("tr", null,
+                            this.tdMonth(10),
+                            this.tdMonth(11),
+                            this.tdMonth(12)))))));
+    }
+}
+exports.default = MonthPicker;

package/lib/cjs/components/periodpicker/periods.d.ts

@@ -0,0 +1,33 @@
+import dayjs from 'dayjs';
+import { Period } from './types';
+export declare function dayjsTz(timezone: string | undefined, ts?: number | null | undefined): dayjs.Dayjs;
+export declare function createToday(timezone: string | undefined): {
+    tsStart: number;
+    tsEnd: number;
+};
+export declare function createYesterday(timezone: string | undefined): {
+    tsStart: number;
+    tsEnd: number;
+};
+export declare function createCurrentWeek(timezone: string | undefined): {
+    tsStart: number;
+    tsEnd: number;
+};
+export declare function createCurrentMonth(timezone: string | undefined): {
+    tsStart: number;
+    tsEnd: number;
+};
+export declare function createWholeDay(tsMiddle: number, timezone: string | undefined): {
+    tsStart: number;
+    tsEnd: number;
+};
+export declare function createWholeMonth(tsMiddle: number, timezone: string | undefined): {
+    tsStart: number;
+    tsEnd: number;
+};
+export declare function createLastXDays(days: number, timezone: string | undefined): {
+    tsStart: number;
+    tsEnd: number;
+};
+export declare function periodToDays({ tsStart, tsEnd }: Period): number;
+//# sourceMappingURL=periods.d.ts.map

package/lib/cjs/components/periodpicker/periods.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"periods.d.ts","sourceRoot":"","sources":["../../../../src/components/periodpicker/periods.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAK/B,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,eAEnF;AAED,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAKvD;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAK3D;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAK7D;AAED,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAK9D;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAK5E;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAK9E;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAQzE;AAID,wBAAgB,YAAY,CAAC,EAAC,OAAO,EAAE,KAAK,EAAC,EAAE,MAAM,GAAG,MAAM,CAE7D"}