@bigbinary/neeto-molecules 1.0.1 → 1.0.3

package/README.md

@@ -19,6 +19,7 @@ A package of reusable molecular components for neeto products.
 - [NeetoWidget](./docs/components.md#neetowidget)
 - [PublishBlock](./docs/components.md#publishblock)
 - [Schedule](./docs/components.md#schedule)
+- [ShareViaEmail](./docs/components.md#shareviaemail)
 - [ShareViaLink](./docs/components.md#sharevialink)
 - [Sidebar](./docs/components.md#sidebar)
 

package/dist/DateRangeFilter.cjs.js

@@ -3,8 +3,9 @@
 var React = require('react');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var neetoui = require('@bigbinary/neetoui');
-var reactI18next = require('react-i18next');
 var dayjs = require('dayjs');
+var ramda = require('ramda');
+var reactI18next = require('react-i18next');
 var i18next = require('i18next');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -79,6 +80,10 @@ var defaultTimePeriodOptions = function defaultTimePeriodOptions() {
   var thisQuarterEnd = dayjs__default["default"]().endOf("quarter");
   var lastQuarterStart = dayjs__default["default"]().subtract(1, "quarter").startOf("quarter");
   var lastQuarterEnd = dayjs__default["default"]().subtract(1, "quarter").endOf("quarter");
+  var startOfLastYear = dayjs__default["default"]().subtract(1, "year").startOf("year");
+  var endOfLastYear = dayjs__default["default"]().subtract(1, "year").endOf("year");
+  var startOfYear = dayjs__default["default"]().startOf("year");
+  var endOfYear = dayjs__default["default"]().endOf("year");
   var startOf24Hours = dayjs__default["default"]().subtract(24, "hour");
   var now = dayjs__default["default"]();
   var startOfLast7Days = dayjs__default["default"]().subtract(7, "day");
@@ -141,6 +146,20 @@ var defaultTimePeriodOptions = function defaultTimePeriodOptions() {
       endDate: lastMonthEnd,
       rangeType: "month"
     }
+  }, {
+    label: i18next.t("neetoMolecules.dateRangeFilter.timePeriodOptions.thisYear"),
+    value: {
+      startDate: startOfYear,
+      endDate: endOfYear,
+      rangeType: "year"
+    }
+  }, {
+    label: i18next.t("neetoMolecules.dateRangeFilter.timePeriodOptions.lastYear"),
+    value: {
+      startDate: startOfLastYear,
+      endDate: endOfLastYear,
+      rangeType: "year"
+    }
   }, {
     label: i18next.t("neetoMolecules.dateRangeFilter.timePeriodOptions.thisQuarter"),
     value: {
@@ -162,7 +181,7 @@ var defaultTimePeriodOptions = function defaultTimePeriodOptions() {
 };
 
 var DateRangeFilter = function DateRangeFilter(_ref) {
-  var _globalProps$user;
+  var _timePeriod$value, _timePeriod$value2, _globalProps$user;
   var timePeriodOptions = _ref.timePeriodOptions,
     timePeriod = _ref.timePeriod,
     setTimePeriod = _ref.setTimePeriod;
@@ -170,6 +189,8 @@ var DateRangeFilter = function DateRangeFilter(_ref) {
     t = _useTranslation.t;
   var customDurationLabel = t("neetoMolecules.dateRangeFilter.timePeriodOptions.customDuration");
   var isCustom = timePeriod.label === customDurationLabel;
+  var startDate = (_timePeriod$value = timePeriod.value) === null || _timePeriod$value === void 0 ? void 0 : _timePeriod$value.startDate;
+  var endDate = (_timePeriod$value2 = timePeriod.value) === null || _timePeriod$value2 === void 0 ? void 0 : _timePeriod$value2.endDate;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex pr-2",
     "data-testid": "date-range-filter"
@@ -177,10 +198,7 @@ var DateRangeFilter = function DateRangeFilter(_ref) {
     className: "w-40"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
     required: true,
-    getOptionValue: function getOptionValue(_ref2) {
-      var label = _ref2.label;
-      return label;
-    },
+    getOptionValue: ramda.prop("label"),
     options: timePeriodOptions || defaultTimePeriodOptions(),
     value: timePeriod,
     onChange: function onChange(option) {
@@ -193,12 +211,13 @@ var DateRangeFilter = function DateRangeFilter(_ref) {
     autoFocus: true,
     className: "ml-3 w-full",
     dateFormat: initializers.globalProps === null || initializers.globalProps === void 0 ? void 0 : (_globalProps$user = initializers.globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.dateFormat,
+    defaultValue: [dayjs__default["default"](startDate), dayjs__default["default"](endDate)],
     picker: "date",
     type: "range",
-    onChange: function onChange(_, _ref3) {
-      var _ref4 = _slicedToArray(_ref3, 2),
-        startDate = _ref4[0],
-        endDate = _ref4[1];
+    onChange: function onChange(_, _ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        startDate = _ref3[0],
+        endDate = _ref3[1];
       setTimePeriod({
         label: customDurationLabel,
         value: {

package/dist/DateRangeFilter.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import { Select, DatePicker } from '@bigbinary/neetoui';
-import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
+import { prop } from 'ramda';
+import { useTranslation } from 'react-i18next';
 import { t } from 'i18next';
 
 function _arrayWithHoles(arr) {
@@ -72,6 +73,10 @@ var defaultTimePeriodOptions = function defaultTimePeriodOptions() {
   var thisQuarterEnd = dayjs().endOf("quarter");
   var lastQuarterStart = dayjs().subtract(1, "quarter").startOf("quarter");
   var lastQuarterEnd = dayjs().subtract(1, "quarter").endOf("quarter");
+  var startOfLastYear = dayjs().subtract(1, "year").startOf("year");
+  var endOfLastYear = dayjs().subtract(1, "year").endOf("year");
+  var startOfYear = dayjs().startOf("year");
+  var endOfYear = dayjs().endOf("year");
   var startOf24Hours = dayjs().subtract(24, "hour");
   var now = dayjs();
   var startOfLast7Days = dayjs().subtract(7, "day");
@@ -134,6 +139,20 @@ var defaultTimePeriodOptions = function defaultTimePeriodOptions() {
       endDate: lastMonthEnd,
       rangeType: "month"
     }
+  }, {
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.thisYear"),
+    value: {
+      startDate: startOfYear,
+      endDate: endOfYear,
+      rangeType: "year"
+    }
+  }, {
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.lastYear"),
+    value: {
+      startDate: startOfLastYear,
+      endDate: endOfLastYear,
+      rangeType: "year"
+    }
   }, {
     label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.thisQuarter"),
     value: {
@@ -155,7 +174,7 @@ var defaultTimePeriodOptions = function defaultTimePeriodOptions() {
 };
 
 var DateRangeFilter = function DateRangeFilter(_ref) {
-  var _globalProps$user;
+  var _timePeriod$value, _timePeriod$value2, _globalProps$user;
   var timePeriodOptions = _ref.timePeriodOptions,
     timePeriod = _ref.timePeriod,
     setTimePeriod = _ref.setTimePeriod;
@@ -163,6 +182,8 @@ var DateRangeFilter = function DateRangeFilter(_ref) {
     t = _useTranslation.t;
   var customDurationLabel = t("neetoMolecules.dateRangeFilter.timePeriodOptions.customDuration");
   var isCustom = timePeriod.label === customDurationLabel;
+  var startDate = (_timePeriod$value = timePeriod.value) === null || _timePeriod$value === void 0 ? void 0 : _timePeriod$value.startDate;
+  var endDate = (_timePeriod$value2 = timePeriod.value) === null || _timePeriod$value2 === void 0 ? void 0 : _timePeriod$value2.endDate;
   return /*#__PURE__*/React.createElement("div", {
     className: "flex pr-2",
     "data-testid": "date-range-filter"
@@ -170,10 +191,7 @@ var DateRangeFilter = function DateRangeFilter(_ref) {
     className: "w-40"
   }, /*#__PURE__*/React.createElement(Select, {
     required: true,
-    getOptionValue: function getOptionValue(_ref2) {
-      var label = _ref2.label;
-      return label;
-    },
+    getOptionValue: prop("label"),
     options: timePeriodOptions || defaultTimePeriodOptions(),
     value: timePeriod,
     onChange: function onChange(option) {
@@ -186,12 +204,13 @@ var DateRangeFilter = function DateRangeFilter(_ref) {
     autoFocus: true,
     className: "ml-3 w-full",
     dateFormat: globalProps === null || globalProps === void 0 ? void 0 : (_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.dateFormat,
+    defaultValue: [dayjs(startDate), dayjs(endDate)],
     picker: "date",
     type: "range",
-    onChange: function onChange(_, _ref3) {
-      var _ref4 = _slicedToArray(_ref3, 2),
-        startDate = _ref4[0],
-        endDate = _ref4[1];
+    onChange: function onChange(_, _ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        startDate = _ref3[0],
+        endDate = _ref3[1];
       setTimePeriod({
         label: customDurationLabel,
         value: {

package/dist/EmailPreview.cjs.js

@@ -32372,7 +32372,7 @@ var EmailPreview = function EmailPreview(_ref) {
     className: "neeto-ui-text-gray-800",
     lineHeight: "normal",
     style: "body2"
-  }, subject || /*#__PURE__*/y__default["default"].createElement("div", {
+  }, subject || /*#__PURE__*/y__default["default"].createElement("span", {
     className: "neeto-ui-bg-gray-300 h-2 w-40 rounded-full"
   })))), /*#__PURE__*/y__default["default"].createElement("div", {
     className: "neeto-ui-text-gray-800 flex flex-1 flex-col justify-between space-y-6 p-6 pr-10 text-base leading-relaxed"

package/dist/EmailPreview.js

@@ -32346,7 +32346,7 @@ var EmailPreview = function EmailPreview(_ref) {
     className: "neeto-ui-text-gray-800",
     lineHeight: "normal",
     style: "body2"
-  }, subject || /*#__PURE__*/y__default.createElement("div", {
+  }, subject || /*#__PURE__*/y__default.createElement("span", {
     className: "neeto-ui-bg-gray-300 h-2 w-40 rounded-full"
   })))), /*#__PURE__*/y__default.createElement("div", {
     className: "neeto-ui-text-gray-800 flex flex-1 flex-col justify-between space-y-6 p-6 pr-10 text-base leading-relaxed"

package/dist/ErrorPage.cjs.js

@@ -30,6 +30,45 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+function shallow(objA, objB) {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
+    return false;
+  }
+  if (objA instanceof Map && objB instanceof Map) {
+    if (objA.size !== objB.size)
+      return false;
+    for (const [key, value] of objA) {
+      if (!Object.is(value, objB.get(key))) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (objA instanceof Set && objB instanceof Set) {
+    if (objA.size !== objB.size)
+      return false;
+    for (const value of objA) {
+      if (!objB.has(value)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  const keysA = Object.keys(objA);
+  if (keysA.length !== Object.keys(objB).length) {
+    return false;
+  }
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
 var _path$2, _path2$2;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 var SvgInternalServerError = function SvgInternalServerError(props) {
@@ -103,14 +142,29 @@ var ErrorPage = function ErrorPage(_ref) {
   var _ref$homeUrl = _ref.homeUrl,
     homeUrl = _ref$homeUrl === void 0 ? "/" : _ref$homeUrl,
     status = _ref.status;
-  var storeStatusCode = reactUtils.useErrorDisplayStore(ramda.prop("statusCode"));
-  status = status || storeStatusCode;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var _useErrorDisplayStore = reactUtils.useErrorDisplayStore(ramda.pick(["statusCode", "showErrorPage"]), shallow),
+    storeStatusCode = _useErrorDisplayStore.statusCode,
+    showErrorPage = _useErrorDisplayStore.showErrorPage;
+  status = status || storeStatusCode;
   var _ref2 = ERRORS[status] || ERRORS[404],
     Image = _ref2.Image,
     errorKey = _ref2.errorKey,
     titleKey = _ref2.titleKey;
+  React.useEffect(function () {
+    var onBackButtonPress = function onBackButtonPress() {
+      if (showErrorPage) {
+        reactUtils.useErrorDisplayStore.setState({
+          showErrorPage: false
+        });
+      }
+    };
+    window.addEventListener("popstate", onBackButtonPress);
+    return function () {
+      window.removeEventListener("popstate", onBackButtonPress);
+    };
+  }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex min-h-screen w-full flex-col items-center justify-center",
     "data-cy": "error-page-container"

package/dist/ErrorPage.js

@@ -1,11 +1,50 @@
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { useEffect } from 'react';
 import { useErrorDisplayStore } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { Typography, Button } from '@bigbinary/neetoui';
-import { prop } from 'ramda';
+import { pick } from 'ramda';
 import { Helmet } from 'react-helmet';
 import { useTranslation, Trans } from 'react-i18next';
 
+function shallow(objA, objB) {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
+    return false;
+  }
+  if (objA instanceof Map && objB instanceof Map) {
+    if (objA.size !== objB.size)
+      return false;
+    for (const [key, value] of objA) {
+      if (!Object.is(value, objB.get(key))) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (objA instanceof Set && objB instanceof Set) {
+    if (objA.size !== objB.size)
+      return false;
+    for (const value of objA) {
+      if (!objB.has(value)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  const keysA = Object.keys(objA);
+  if (keysA.length !== Object.keys(objB).length) {
+    return false;
+  }
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
 var _path$2, _path2$2;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 var SvgInternalServerError = function SvgInternalServerError(props) {
@@ -79,14 +118,29 @@ var ErrorPage = function ErrorPage(_ref) {
   var _ref$homeUrl = _ref.homeUrl,
     homeUrl = _ref$homeUrl === void 0 ? "/" : _ref$homeUrl,
     status = _ref.status;
-  var storeStatusCode = useErrorDisplayStore(prop("statusCode"));
-  status = status || storeStatusCode;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var _useErrorDisplayStore = useErrorDisplayStore(pick(["statusCode", "showErrorPage"]), shallow),
+    storeStatusCode = _useErrorDisplayStore.statusCode,
+    showErrorPage = _useErrorDisplayStore.showErrorPage;
+  status = status || storeStatusCode;
   var _ref2 = ERRORS[status] || ERRORS[404],
     Image = _ref2.Image,
     errorKey = _ref2.errorKey,
     titleKey = _ref2.titleKey;
+  useEffect(function () {
+    var onBackButtonPress = function onBackButtonPress() {
+      if (showErrorPage) {
+        useErrorDisplayStore.setState({
+          showErrorPage: false
+        });
+      }
+    };
+    window.addEventListener("popstate", onBackButtonPress);
+    return function () {
+      window.removeEventListener("popstate", onBackButtonPress);
+    };
+  }, []);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "flex min-h-screen w-full flex-col items-center justify-center",
     "data-cy": "error-page-container"

package/dist/KeyboardShortcuts.cjs.js

@@ -750,30 +750,23 @@ var classnames$1 = {exports: {}};
 
 var classnames = classnames$1.exports;
 
-var DisplayHotKey = function DisplayHotKey(_ref) {
-  var hotkey = _ref.hotkey;
-  var isSequentialHotkey = hotkey.includes(" ");
-  var isSimultaneousHotkey = hotkey.includes("+");
-  var isSingleKeyHotkey = !isSequentialHotkey && !isSimultaneousHotkey;
-  var sequences = [];
-  if (isSingleKeyHotkey) return /*#__PURE__*/React__default["default"].createElement(neetoui.Kbd, {
-    keyName: hotkey
-  });
-  if (isSequentialHotkey) {
-    sequences = hotkey.split(" ");
-  } else if (isSimultaneousHotkey) {
-    sequences = hotkey.split("+");
-  }
-  return sequences.map(function (keyName, idx) {
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
-      key: idx
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Kbd, {
-      keyName: keyName
-    }), isSequentialHotkey && idx + 1 !== sequences.length && /*#__PURE__*/React__default["default"].createElement(neetoui.Kbd, {
-      keyName: "then"
-    }));
-  });
+var KEY_SHORTFORM_MAP = {
+  command: "cmd",
+  escape: "esc",
+  control: "ctrl",
+  option: "opt"
+};
+var MAC_TO_WINDOWS_KEYS_MAP = {
+  option: "alt",
+  command: "ctrl",
+  "return": "enter",
+  "delete": "backspace"
+};
+var OS = {
+  mac: "OS X",
+  windows: "Windows"
 };
+var FULL_SHORTCUTS_LINK_PROP_NAME = "fullShortcutsLink";
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -2062,46 +2055,34 @@ var platform$1 = {exports: {}};
 
 var platform = platform$1.exports;
 
-var KEY_SHORTFORM_MAP = {
-  command: "cmd",
-  escape: "esc",
-  control: "ctrl",
-  option: "opt"
-};
-var MAC_TO_WINDOWS_KEYS_MAP = {
-  option: "alt",
-  command: "ctrl",
-  "return": "enter",
-  "delete": "backspace"
-};
-var OS = {
-  mac: "OS X",
-  windows: "Windows"
-};
-
-var shortenHotKey = function shortenHotKey(hotkey) {
-  var result = hotkey;
-  Object.entries(KEY_SHORTFORM_MAP).forEach(function (_ref) {
+var convertHotKeyToWindows = function convertHotKeyToWindows(hotkey) {
+  ramda.toPairs(MAC_TO_WINDOWS_KEYS_MAP).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
-      longform = _ref2[0],
-      shortform = _ref2[1];
-    result = result.replaceAll(longform, shortform);
+      macKey = _ref2[0],
+      windowsKey = _ref2[1];
+    hotkey = hotkey.replaceAll(macKey, windowsKey);
   });
-  return result;
+  return hotkey;
+};
+var replaceDeleteKeyWithBackspace = function replaceDeleteKeyWithBackspace(hotkey) {
+  return hotkey.replaceAll("delete", "backspace");
 };
 var convertHotkeyToUsersPlatform = function convertHotkeyToUsersPlatform(hotkey) {
   var _platformInfo$os, _platformInfo$os$fami;
   var platformInfo = platform.parse(navigator.userAgent);
   var isOSX = (_platformInfo$os = platformInfo.os) === null || _platformInfo$os === void 0 ? void 0 : (_platformInfo$os$fami = _platformInfo$os.family) === null || _platformInfo$os$fami === void 0 ? void 0 : _platformInfo$os$fami.includes(OS.mac);
-  if (isOSX) return hotkey;
-  var hotkeyForWindows = hotkey;
-  ramda.toPairs(MAC_TO_WINDOWS_KEYS_MAP).forEach(function (_ref3) {
+  if (isOSX) return replaceDeleteKeyWithBackspace(hotkey);
+  return convertHotKeyToWindows(hotkey);
+};
+var shortenHotKey = function shortenHotKey(hotkey) {
+  var result = hotkey;
+  Object.entries(KEY_SHORTFORM_MAP).forEach(function (_ref3) {
     var _ref4 = _slicedToArray(_ref3, 2),
-      macKey = _ref4[0],
-      windowsKey = _ref4[1];
-    hotkeyForWindows = hotkeyForWindows.replaceAll(macKey, windowsKey);
+      longform = _ref4[0],
+      shortform = _ref4[1];
+    result = result.replaceAll(longform, shortform);
   });
-  return hotkeyForWindows;
+  return result;
 };
 var getGlobalShortcuts = function getGlobalShortcuts() {
   return _defineProperty({}, i18next__default["default"].t("neetoMolecules.keyboardShortcuts.global.categoryName"), {
@@ -2116,35 +2097,71 @@ var getGlobalShortcuts = function getGlobalShortcuts() {
   });
 };
 
+var HotKey = function HotKey(_ref) {
+  var description = _ref.description,
+    sequence = _ref.sequence;
+  var hotkey = shortenHotKey(convertHotkeyToUsersPlatform(sequence));
+  var isSequentialHotkey = hotkey.includes(" ");
+  var isSimultaneousHotkey = hotkey.includes("+");
+  var isSingleKeyHotkey = !isSequentialHotkey && !isSimultaneousHotkey;
+  var sequences = [];
+  if (isSingleKeyHotkey) {
+    sequences = [hotkey];
+  } else if (isSequentialHotkey) {
+    sequences = hotkey.split(" ");
+  } else if (isSimultaneousHotkey) {
+    sequences = hotkey.split("+");
+  }
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "my-3 px-4"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center justify-between gap-3",
+    "data-testid": "hotkey-item"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-800",
+    lineHeight: "normal",
+    style: "body2"
+  }, description), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center gap-1"
+  }, sequences.map(function (keyName, idx) {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      key: idx
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Kbd, {
+      keyName: keyName
+    }), isSequentialHotkey && idx + 1 !== sequences.length && /*#__PURE__*/React__default["default"].createElement(neetoui.Kbd, {
+      keyName: "then"
+    }));
+  }))));
+};
+
 var HotKeyList = function HotKeyList(_ref) {
   var hotkeys = _ref.hotkeys;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   return Object.keys(hotkeys).map(function (categoryName) {
+    var categoryValues = hotkeys[categoryName];
+    var fullShortcutsLink = categoryValues[FULL_SHORTCUTS_LINK_PROP_NAME];
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: categoryName
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
       className: "neeto-ui-text-gray-800 mt-4 px-4 text-xs font-bold",
       lineHeight: "normal",
       style: "body2"
-    }, categoryName), Object.entries(hotkeys[categoryName]).map(function (_ref2) {
+    }, categoryName), Object.entries(categoryValues).map(function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
         _ref3$ = _ref3[1],
         sequence = _ref3$.sequence,
         description = _ref3$.description;
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "my-3 px-4",
-        key: sequence
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "flex items-center justify-between gap-3",
-        "data-testid": "hotkey-item"
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-        className: "neeto-ui-text-gray-800",
-        lineHeight: "normal",
-        style: "body2"
-      }, description), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "flex items-center gap-1"
-      }, /*#__PURE__*/React__default["default"].createElement(DisplayHotKey, {
-        hotkey: shortenHotKey(convertHotkeyToUsersPlatform(sequence))
-      }))));
+      return sequence && /*#__PURE__*/React__default["default"].createElement(HotKey, {
+        description: description,
+        key: sequence,
+        sequence: sequence
+      });
+    }), fullShortcutsLink && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      className: "pl-4 mb-3",
+      href: fullShortcutsLink,
+      style: "link",
+      label: t("neetoMolecules.keyboardShortcuts.viewFullListOfShortcuts")
     }));
   });
 };
@@ -2170,13 +2187,9 @@ var KeyboardShortcutsPane = function KeyboardShortcutsPane(_ref) {
     return setIsOpen(function (prevIsOpen) {
       return !prevIsOpen;
     });
-  }, {
-    mode: "global"
   });
   reactUtils.useHotKeys(shortcuts.close.sequence, function () {
     return setIsOpen(false);
-  }, {
-    mode: "global"
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classnames("neeto-commons-keyboard-shortcuts-pane neeto-ui-border-gray-300 transition-width ml-auto min-h-screen border-l bg-white duration-300 ease-in-out overflow-y-scroll", {