@qiwi/pijma-desktop-extra 0.1.0 → 0.1.3

package/README.md

@@ -0,0 +1,32 @@
+# @qiwi/pijma-desktop-extra
+
+Pijma desktop extra UI components.
+
+## Install
+```bash
+npm i --save @qiwi/pijma-desktop-extra
+yarn add @qiwi/pijma-desktop-extra
+```
+
+## Usage
+```javascript
+import React from 'react'
+import { cache, themes, fonts, reset, CacheProvider, ThemeProvider, Global } from '@qiwi/pijma-desktop'
+import { Table } from '@qiwi/pijma-desktop-extra'
+
+export const App = () => (
+  <CacheProvider value={cache}>
+    <ThemeProvider theme={themes.orange}>
+      <Global styles={[reset, fonts]}/>
+      <Table
+        columns={columns}
+        data={data}
+        onSelect={onSelect}
+      />
+    </ThemeProvider>
+  </CacheProvider>
+)
+```
+
+## License
+[MIT](../../LICENSE)

package/lib/dts/main/date-picker/locale.d.ts

@@ -1,3 +1,5 @@
-export declare const getMonths: (t: (str: string) => string) => string[];
-export declare const getWeekDaysLong: (t: (str: string) => string) => string[];
-export declare const getWeekDaysShort: (t: (str: string) => string) => string[];
+export declare const locales: {
+    en: Locale;
+    ru: Locale;
+};
+export declare type TLanguage = keyof typeof locales;

package/lib/dts/main/date-range-picker/index.d.ts

@@ -5,10 +5,6 @@ export declare const PickerDropdown: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any> | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PickerCellContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const DateRangePicker: React.ComponentType<Omit<Pick<import("react-i18next").Subtract<DateRangerPickerProps & WithTranslation<"translation", undefined>, import("react-i18next").WithTranslationProps>, "title" | "onChange" | "t" | "tReady" | "dateFrom" | "dateTo" | "inputValue" | "minDate" | "maxDate" | "dayPickerProps"> & {
     numberOfMonths?: number | undefined;
 } & {}, keyof WithTranslation<N, undefined>> & import("react-i18next").WithTranslationProps>;

package/lib/dts/main/dropdown/Container.d.ts

@@ -8,8 +8,6 @@ export declare const CheckBoxContainer: import("@emotion/styled").StyledComponen
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any> | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ItemCss: string;
-export declare const ItemActiveCss: string;
 export declare const Item: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any> | undefined;

package/lib/dts/main/header/HeaderProps.d.ts

@@ -1,7 +1,10 @@
 import { ReactNode } from 'react';
 interface NavItem {
     name: string;
-    path: string;
+    path: string | {
+        external: boolean;
+        value: string;
+    };
     node?: ReactNode;
     value?: string | number;
 }

package/lib/es5/main/date-picker/index.js

@@ -18,7 +18,7 @@ var _pijmaCore = require("@qiwi/pijma-core");
 var _pijmaDesktop = require("@qiwi/pijma-desktop");
 var _dateFns = require("date-fns");
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _reactDayPicker = /*#__PURE__*/ _interopRequireDefault(require("react-day-picker"));
+var _reactDayPicker = require("react-day-picker");
 var _reactI18Next = require("react-i18next");
 var _theme = require("../theme/index.js");
 var _locale = require("./locale.js");
@@ -26,7 +26,7 @@ var _wrap = /*#__PURE__*/ _interopRequireDefault(require("./wrap.js"));
 function _templateObject() {
     var data = _taggedTemplateLiteralLoose([
         "\n  position: absolute;\n  background: #fff;\n  z-index: 10;\n  box-shadow: ",
-        ";\n  border-radius: 8px;\n"
+        ";\n  border-radius: 8px;\n\n  .Selectable {\n    .my-selected {\n      padding: 0px;\n      width: 40px;\n      height: 40px;\n      color: black;\n      background-color: rgba(255, 140, 0);\n      border-radius: 50%;\n    }\n\n    .my-head-cell {\n      width: 40px;\n      height: 40px;\n      padding: 4px;\n    }\n\n    .my-month {\n      margin: 1rem;\n    }\n\n    .my-caption {\n      margin-bottom: 10px;\n      margin-left: 8px;\n      display: flex;\n      justify-content: space-between;\n    }\n\n    .my-day {\n      width: 40px;\n      height: 40px;\n      padding: 4px;\n    }\n\n    .my-today {\n      color: rgb(208, 2, 27);\n    }\n\n    .my-today {\n      color: rgb(208, 2, 27);\n    }\n\n    .my-caption-label {\n      font-size: 20px;\n    }\n  }\n"
     ]);
     _templateObject = function _templateObject() {
         return data;
@@ -125,10 +125,7 @@ var _DatePicker = /*#__PURE__*/ function(Component) {
     };
     _proto.render = function render() {
         var _this = this;
-        var t = this.props.t;
-        var MONTHS = (0, _locale.getMonths)(t);
-        var WEEKDAYS_LONG = (0, _locale.getWeekDaysLong)(t);
-        var WEEKDAYS_SHORT = (0, _locale.getWeekDaysShort)(t);
+        var _props = this.props, t = _props.t, i18n = _props.i18n;
         return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_wrap.default, {
             onFocus: this.onFocus.bind(this),
             onBlur: this.onBlur.bind(this),
@@ -157,14 +154,22 @@ var _DatePicker = /*#__PURE__*/ function(Component) {
                     children: function() {
                         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(PickerDropdown, {
                             onFocus: _this.onFocus.bind(_this),
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactDayPicker.default, {
-                                months: MONTHS,
-                                weekdaysLong: WEEKDAYS_LONG,
-                                weekdaysShort: WEEKDAYS_SHORT,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactDayPicker.DayPicker, {
+                                className: "Selectable",
                                 onDayClick: _this.handleDayClick.bind(_this),
-                                selectedDays: _this.state.date,
+                                selected: _this.state.date,
                                 month: _this.state.date,
-                                firstDayOfWeek: 1
+                                locale: _locale.locales[i18n.language],
+                                modifiersClassNames: {
+                                    selected: "my-selected",
+                                    today: "my-today"
+                                },
+                                classNames: {
+                                    day: "my-day",
+                                    head_cell: "my-head-cell",
+                                    caption: "my-caption",
+                                    month: "my-month"
+                                }
                             })
                         });
                     }

package/lib/es5/main/date-picker/locale.js

@@ -2,58 +2,14 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    getMonths: function() {
-        return getMonths;
-    },
-    getWeekDaysLong: function() {
-        return getWeekDaysLong;
-    },
-    getWeekDaysShort: function() {
-        return getWeekDaysShort;
+Object.defineProperty(exports, "locales", {
+    enumerable: true,
+    get: function() {
+        return locales;
     }
 });
-var getMonths = function(t) {
-    return [
-        t("datePicker:jan"),
-        t("datePicker:feb"),
-        t("datePicker:mar"),
-        t("datePicker:apr"),
-        t("datePicker:may"),
-        t("datePicker:jun"),
-        t("datePicker:jul"),
-        t("datePicker:aug"),
-        t("datePicker:sep"),
-        t("datePicker:oct"),
-        t("datePicker:nov"),
-        t("datePicker:dec"), 
-    ];
-};
-var getWeekDaysLong = function(t) {
-    return [
-        t("datePicker:sun"),
-        t("datePicker:mon"),
-        t("datePicker:tue"),
-        t("datePicker:wen"),
-        t("datePicker:thu"),
-        t("datePicker:fri"),
-        t("datePicker:sat"), 
-    ];
-};
-var getWeekDaysShort = function(t) {
-    return [
-        t("datePicker:sn"),
-        t("datePicker:mn"),
-        t("datePicker:tu"),
-        t("datePicker:wn"),
-        t("datePicker:th"),
-        t("datePicker:fr"),
-        t("datePicker:st"), 
-    ];
+var _locale = require("date-fns/locale");
+var locales = {
+    en: _locale.enUS,
+    ru: _locale.ru
 };

package/lib/es5/main/date-range-picker/index.js

@@ -12,9 +12,6 @@ _export(exports, {
     PickerDropdown: function() {
         return PickerDropdown;
     },
-    PickerCellContainer: function() {
-        return PickerCellContainer;
-    },
     DateRangePicker: function() {
         return DateRangePicker;
     }
@@ -29,15 +26,15 @@ var _pijmaCore = require("@qiwi/pijma-core");
 var _pijmaDesktop = require("@qiwi/pijma-desktop");
 var _dateFns = require("date-fns");
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _reactDayPicker = /*#__PURE__*/ _interopRequireDefault(require("react-day-picker"));
+var _reactDayPicker = require("react-day-picker");
 var _reactI18Next = require("react-i18next");
-var _locale = require("../date-picker/locale.js");
 var _wrap = /*#__PURE__*/ _interopRequireDefault(require("../date-picker/wrap.js"));
 var _theme = require("../theme/index.js");
+var _locale = require("../date-picker/locale.js");
 function _templateObject() {
     var data = _taggedTemplateLiteralLoose([
-        "\n  position: absolute;\n  background: #fff;\n  z-index: 10;\n  width: 596px;\n  border-radius: 8px;\n  box-shadow: ",
-        ";\n\n  .Selectable .DayPicker-Day {\n    border-radius: 0 !important;\n  }\n  .Selectable .DayPicker-Day--start {\n    border-top-left-radius: 50% !important;\n    border-bottom-left-radius: 50% !important;\n  }\n  .Selectable .DayPicker-Day--end {\n    border-top-right-radius: 50% !important;\n    border-bottom-right-radius: 50% !important;\n  }\n  .Selectable\n    .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {\n    background-color: #ff8c0066 !important;\n    color: #000000;\n  }\n  .DayPicker-NavButton {\n    margin: 0 0;\n    right: 1.5rem;\n  }\n  .DayPicker-NavButton--prev {\n    margin-right: 2rem;\n  }\n"
+        "\n  position: absolute;\n  background: #fff;\n  z-index: 10;\n  border-radius: 8px;\n  box-shadow: ",
+        ";\n\n  .Selectable {\n    .my-selected {\n      padding: 0px;\n      width: 40px;\n      height: 40px;\n      color: black;\n      background-color: rgba(255, 140, 0, 0.4);\n      border-radius: unset;\n    }\n\n    .my-range-start {\n      background-color: rgb(255, 140, 0);\n      border-radius: 50% 0px 0px 50%;\n    }\n\n    .my-range-middle {\n    }\n\n    .my-range-end {\n      background-color: rgb(255, 140, 0);\n      border-radius: 0px 50% 50% 0px;\n    }\n\n    .my-head-cell {\n      width: 40px;\n      height: 40px;\n      padding: 4px;\n    }\n\n    .my-caption {\n      margin-bottom: 10px;\n      margin-left: 8px;\n    }\n\n    .my-month {\n      margin: 1rem;\n    }\n\n    .my-months {\n      margin: 0 12px;\n      display: flex;\n      position: relative;\n    }\n\n    .my-day {\n      width: 40px;\n      height: 40px;\n      padding: 4px;\n    }\n\n    .my-nav {\n      position: absolute;\n      translateY(-50%);\n      top: 50%;\n    }\n\n    .my-caption-start {\n      .my-nav {\n        left: -6px;\n      }\n    }\n\n    .my-caption-end {\n      .my-nav {\n        right: -6px;\n      }\n    }\n\n    .my-day.my-selected.my-range-end.my-range-start {\n      border-radius: 50%;\n    }\n\n    .my-today {\n      color: rgb(208, 2, 27);\n    }\n\n    .my-caption-label {\n      font-size: 20px;\n    }\n  }\n"
     ]);
     _templateObject = function _templateObject() {
         return data;
@@ -46,7 +43,7 @@ function _templateObject() {
 }
 function _templateObject1() {
     var data = _taggedTemplateLiteralLoose([
-        "\n  width: 30px;\n  height: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"
+        "\n  position: relative;\n  width: 100%;\n"
     ]);
     _templateObject1 = function _templateObject1() {
         return data;
@@ -54,38 +51,28 @@ function _templateObject1() {
     return data;
 }
 function _templateObject2() {
-    var data = _taggedTemplateLiteralLoose([
-        "\n  position: relative;\n  width: 100%;\n"
-    ]);
-    _templateObject2 = function _templateObject2() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
     var data = _taggedTemplateLiteralLoose([
         "\n  color: ",
         ";\n"
     ]);
-    _templateObject3 = function _templateObject3() {
+    _templateObject2 = function _templateObject2() {
         return data;
     };
     return data;
 }
-function _templateObject4() {
+function _templateObject3() {
     var data = _taggedTemplateLiteralLoose([
         "\n  input {\n    color: transparent;\n    text-shadow: 0 0 0 #000;\n  }\n"
     ]);
-    _templateObject4 = function _templateObject4() {
+    _templateObject3 = function _templateObject3() {
         return data;
     };
     return data;
 }
 var PickerDropdown = (0, _pijmaCore.styled)("div")(_templateObject(), _theme.COLOR.SHADOW.Z3);
-var PickerCellContainer = (0, _pijmaCore.styled)("div")(_templateObject1());
-var Container = (0, _pijmaCore.styled)("div")(_templateObject2());
-var RedHelpText = (0, _pijmaCore.styled)("div")(_templateObject3(), _theme.COLOR.TEXT.Error);
-var InputWrapper = (0, _pijmaCore.styled)("div")(_templateObject4());
+var Container = (0, _pijmaCore.styled)("div")(_templateObject1());
+var RedHelpText = (0, _pijmaCore.styled)("div")(_templateObject2(), _theme.COLOR.TEXT.Error);
+var InputWrapper = (0, _pijmaCore.styled)("div")(_templateObject3());
 var DisabledInputDateRangePicker = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(DisabledInputDateRangePicker, Component);
@@ -110,7 +97,7 @@ var DisabledInputDateRangePicker = /*#__PURE__*/ function(Component) {
                 from: _this.props.dateFrom,
                 to: _this.props.dateTo || _this.props.dateFrom
             };
-            var range = _reactDayPicker.default.addToRange(date, normalizeDate);
+            var range = (0, _reactDayPicker.addToRange)(date, normalizeDate);
             var ref = range || normalizeDate, dateFrom = ref.from, dateTo = ref.to;
             if ((dateFrom || dateTo) && _this.props.onChange) {
                 _this.props.onChange({
@@ -148,24 +135,18 @@ var DisabledInputDateRangePicker = /*#__PURE__*/ function(Component) {
     var _proto = DisabledInputDateRangePicker.prototype;
     _proto.render = function render() {
         var _this = this;
-        var t = this.props.t;
-        var MONTHS = (0, _locale.getMonths)(t);
-        var WEEKDAYS_LONG = (0, _locale.getWeekDaysLong)(t);
-        var WEEKDAYS_SHORT = (0, _locale.getWeekDaysShort)(t);
+        var _props = this.props, t = _props.t, i18n = _props.i18n;
         var _state = this.state, errorDate = _state.errorDate, helpText = _state.helpText, showPicker = _state.showPicker;
-        var _props = this.props, minDate = _props.minDate, maxDate = _props.maxDate, dayPickerProps = _props.dayPickerProps, title = _props.title, numberOfMonths = _props.numberOfMonths, dateTo = _props.dateTo, dateFrom = _props.dateFrom, inputValue = _props.inputValue;
+        var _props1 = this.props, minDate = _props1.minDate, maxDate = _props1.maxDate, dayPickerProps = _props1.dayPickerProps, title = _props1.title, numberOfMonths = _props1.numberOfMonths, dateTo = _props1.dateTo, dateFrom = _props1.dateFrom, inputValue = _props1.inputValue;
         var modifiers = {
             start: dateFrom,
             end: dateTo
         };
         var disabled = {};
-        var selectedDays = [
-            dateFrom,
-            {
-                from: dateFrom,
-                to: dateTo
-            }
-        ];
+        var selectedDays = {
+            from: dateFrom,
+            to: dateTo
+        };
         var value = inputValue || this.formatPeriod(dateFrom, dateTo);
         if (minDate) {
             disabled.before = minDate;
@@ -209,25 +190,33 @@ var DisabledInputDateRangePicker = /*#__PURE__*/ function(Component) {
                     children: function() {
                         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(PickerDropdown, {
                             onFocus: _this.onFocus,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactDayPicker.default, _extends({
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactDayPicker.DayPicker, _extends({
+                                mode: "range",
                                 className: "Selectable",
-                                disabledDays: disabled,
-                                months: MONTHS,
-                                weekdaysLong: WEEKDAYS_LONG,
-                                weekdaysShort: WEEKDAYS_SHORT,
-                                // @ts-ignore
-                                renderDay: function(day) {
-                                    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(PickerCellContainer, {
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                                            children: day.getDate()
-                                        })
-                                    });
-                                },
+                                disabled: disabled,
+                                locale: _locale.locales[i18n.language],
                                 numberOfMonths: numberOfMonths,
-                                selectedDays: selectedDays,
+                                selected: selectedDays,
                                 modifiers: modifiers,
                                 onDayClick: _this.handleDayClick,
-                                firstDayOfWeek: 1
+                                modifiersClassNames: {
+                                    selected: "my-selected",
+                                    today: "my-today",
+                                    range_start: "my-range-start",
+                                    range_middle: "my-range-middle",
+                                    range_end: "my-range-end"
+                                },
+                                classNames: {
+                                    day: "my-day",
+                                    head_cell: "my-head-cell",
+                                    caption: "my-caption",
+                                    month: "my-month",
+                                    months: "my-months",
+                                    caption_start: "my-caption-start",
+                                    caption_end: "my-caption-end",
+                                    nav: "my-nav",
+                                    caption_label: "my-caption-label"
+                                }
                             }, dayPickerProps))
                         });
                     }

package/lib/es5/main/dropdown/Container.js

@@ -15,12 +15,6 @@ _export(exports, {
     CheckBoxContainer: function() {
         return CheckBoxContainer;
     },
-    ItemCss: function() {
-        return ItemCss;
-    },
-    ItemActiveCss: function() {
-        return ItemActiveCss;
-    },
     Item: function() {
         return Item;
     },
@@ -60,7 +54,8 @@ function _templateObject1() {
 }
 function _templateObject2() {
     var data = _taggedTemplateLiteralLoose([
-        "\n  padding: 10px 24px;\n  width: 100%;\n  cursor: pointer;\n  :hover {\n    background-color: #f5f5f5;\n  }\n  &--active {\n    background-color: #e6e6e6 !important;\n  }\n"
+        "\n    box-sizing: border-box;\n    padding: 10px 24px;\n    width: 100%;\n    cursor: pointer;\n    :hover {\n      background-color: #f5f5f5;\n    }\n    &--active {\n      background-color: #e6e6e6 !important;\n    }\n    ",
+        "\n"
     ]);
     _templateObject2 = function _templateObject2() {
         return data;
@@ -68,39 +63,20 @@ function _templateObject2() {
     return data;
 }
 function _templateObject3() {
-    var data = _taggedTemplateLiteralLoose([
-        "\n  ",
-        "\n  background-color: #E6E6E6 !important;\n"
-    ]);
-    _templateObject3 = function _templateObject3() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _taggedTemplateLiteralLoose([
-        "\n  box-sizing: border-box;\n"
-    ]);
-    _templateObject4 = function _templateObject4() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
     var data = _taggedTemplateLiteralLoose([
         "\n  position: relative;\n  height: 100%;\n"
     ]);
-    _templateObject5 = function _templateObject5() {
+    _templateObject3 = function _templateObject3() {
         return data;
     };
     return data;
 }
 var ListContainer = (0, _pijmaCore.styled)("div")(_templateObject(), _theme.COLOR.SHADOW.Z3);
 var CheckBoxContainer = (0, _pijmaCore.styled)("div")(_templateObject1());
-var ItemCss = (0, _pijmaCore.css)(_templateObject2());
-var ItemActiveCss = (0, _pijmaCore.css)(_templateObject3(), ItemCss);
-var Item = (0, _pijmaCore.styled)("div")(_templateObject4());
-var ScrollContainer = (0, _pijmaCore.styled)("div")(_templateObject5());
+var Item = (0, _pijmaCore.styled)("div")(_templateObject2(), function(props) {
+    return props.active ? "background-color: #E6E6E6 !important;" : "";
+});
+var ScrollContainer = (0, _pijmaCore.styled)("div")(_templateObject3());
 var Container = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(Container, Component);
@@ -126,9 +102,7 @@ var Container = /*#__PURE__*/ function(Component) {
                 }) : items.map(function(el, index) {
                     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(Item, {
                         // @ts-ignore
-                        css: [
-                            value === el.name ? ItemActiveCss : ItemCss
-                        ],
+                        active: value === el.name,
                         onMouseDown: function() {
                             return onSelect(el);
                         },

package/lib/es5/main/header/index.js

@@ -13,9 +13,9 @@ var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcar
 var _taggedTemplateLiteralLoose = require("@swc/helpers/lib/_tagged_template_literal_loose.js").default;
 var _jsxRuntime = require("react/jsx-runtime");
 var _pijmaCore = require("@qiwi/pijma-core");
+var _pijmaDesktop = require("@qiwi/pijma-desktop");
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _logo = require("../logo/index.js");
-var _navigationMenu = require("../navigation-menu/index.js");
 var _product = require("../product/index.js");
 var _spinner = require("../spinner/index.js");
 var _theme = require("../theme/index.js");
@@ -51,7 +51,19 @@ var Header = /*#__PURE__*/ function(Component) {
     }
     var _proto = Header.prototype;
     _proto.render = function render() {
-        var _props = this.props, isLoading = _props.isLoading, title = _props.title, selectorData = _props.selectorData, link = _props.link, navItems = _props.navItems, navActiveItem = _props.navActiveItem, userName = _props.userName, onItemChange = _props.onItemChange, onLogout = _props.onLogout;
+        var _props = this.props, isLoading = _props.isLoading, title = _props.title, selectorData = _props.selectorData, navItems = _props.navItems, userName = _props.userName, onItemChange = _props.onItemChange, onLogout = _props.onLogout;
+        var menuItems = navItems.map(function(param) {
+            var name = param.name, path = param.path;
+            var href = typeof path === "string" ? path : path.value;
+            return {
+                href: href,
+                title: name,
+                active: location.pathname === path,
+                onClick: function() {
+                    window.location.href = href;
+                }
+            };
+        });
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderContainer, {
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderContent, {
                 children: isLoading ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Flex, {
@@ -85,10 +97,9 @@ var Header = /*#__PURE__*/ function(Component) {
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.FlexItem, {
                                     ml: 10,
                                     p: 0,
-                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_navigationMenu.NavigationMenu, {
-                                        link: link,
-                                        items: navItems,
-                                        active: navActiveItem && navActiveItem.pathname || ""
+                                    height: 20,
+                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaDesktop.HeaderMenu, {
+                                        children: menuItems
                                     })
                                 })
                             ]