@bigbinary/neeto-commons-frontend 2.0.48 → 2.0.49

package/cypress-commands.d.ts

@@ -1,11 +1,11 @@
 declare namespace Cypress {
   interface Chainable {
-    clearAndType(selector: any, text: any): Void;
-    clearAndTypeFast(selector: any, text: any): Void;
-    clearByClickAndTypeFast(selector: any, text: any): Void;
-    typeFast(selector: any, text: any): Void;
-    typeAndEnter(selector: any, text: any): Void;
-    verifyToastMessage(message: any): Void;
+    clearAndType(selector: string, text: string): Void;
+    clearAndTypeFast(selector: string, text: string): Void;
+    clearByClickAndTypeFast(selector: string, text: string): Void;
+    typeFast(selector: string, text: string): Void;
+    typeAndEnter(selector: string, text: string): Void;
+    verifyToastMessage(message: string): Void;
     continueOnAlert(
       alias:
         | string
@@ -53,5 +53,18 @@ declare namespace Cypress {
     globalState(key: string): Void;
     ifExist(selector: string, callback: Function): Void;
     ifNotExist(selector: string, callback: Function): Void;
+    dragAndDrop(props: {
+      subject: string;
+      target: string;
+      dragIndex: number;
+      dropIndex: number
+    });
+    verifyPlaceholder(textInputSelector: string, value: string): Void;
+    enableOrDisableSwitch(switchButton: string, value: string): Void;
+    interceptNonVersionedApi(props: {
+      url: string;
+      alias: string;
+      times?: number; // maximum number of times to match
+    }): Cypress.Chainable<Cypress.InterceptionOptions>;
   }
 }

package/cypress-utils.cjs.js

@@ -172,7 +172,29 @@ var commonSelectors = {
   toastCloseButton: ".neeto-ui-toastr__close-button",
   windowAlert: "#alert-box",
   body: "body",
-  toastIcon: ".Toastify__toast-icon"
+  toastIcon: ".Toastify__toast-icon",
+  paneModalCrossIcon: ".neeto-ui-pane__close",
+  inputField: dataCy("input-field"),
+  alertConfirmationText: dataCy("alert-confirmation-text"),
+  alertCancelButton: dataCy("alert-cancel-button"),
+  alertModalCrossIcon: ".neeto-ui-modal__close",
+  saveChangesButton: dataCy("save-changes-button"),
+  cancelButton: dataCy("cancel-button"),
+  inputFieldError: dataCy("nui-input-error"),
+  selectDropDownError: dataCy("nui-select-error"),
+  subTitleHeading: function subTitleHeading(index) {
+    return dataCy("menubar-subtitle-heading", ":eq(".concat(index, ")"));
+  },
+  noDataTitle: dataCy("no-data-title"),
+  noDataDescription: dataCy("no-data-description"),
+  backDrop: "[data-testid='backdrop']",
+  menuBarHeading: dataCy("menubar-heading"),
+  tabItem: function tabItem(index) {
+    return dataCy("tab-item", ":eq(".concat(index, ")"));
+  },
+  dropdownWrapper: function dropdownWrapper(index) {
+    return dataCy("nui-select-container-wrapper", ":eq(".concat(index, ")"));
+  }
 };
 var tableSelectors = {
   nthColumn: function nthColumn(n) {
@@ -181,7 +203,10 @@ var tableSelectors = {
   tableBody: ".ant-table-body",
   tableHeader: ".ant-table-thead th",
   tableRow: ".ant-table-tbody tr",
-  spinner: ".ant-spin"
+  spinner: ".ant-spin",
+  nthHeading: function nthHeading(n) {
+    return "tr > th:nth-child(".concat(n, ")");
+  }
 };
 var profileSelectors = {
   tab: dataCy("profile-section"),
@@ -203,7 +228,15 @@ var commonTexts = {
   "new": "New",
   takeAction: "Take action",
   unblock: "Unblock",
-  toastIcon: "👍"
+  toastIcon: "👍",
+  emailRequiredError: "Email is required.",
+  emailTakenMessage: "Email is already taken",
+  nameTakenMessage: "Name has already been taken",
+  all: "All",
+  proceed: "Proceed",
+  settings: "Settings",
+  unsavedChangesAlertTitle: "You have unsaved changes!",
+  unsavedChangesAlertMessage: "Are you sure you want to continue? All of your unsaved changes will be lost."
 };
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -277,7 +310,9 @@ var initCustomCommands = function initCustomCommands() {
   Cypress.Commands.add("apiRequest", function (options) {
     return cy.get("@requestHeaders").then(function (requestHeaders) {
       return requestHeaders ? cy.request(_objectSpread(_objectSpread({}, options), {}, {
-        headers: requestHeaders
+        headers: _objectSpread(_objectSpread({}, requestHeaders), {}, {
+          "accept-encoding": "gzip"
+        })
       })) : cy.log("No request headers found");
     });
   });
@@ -333,6 +368,72 @@ var initCustomCommands = function initCustomCommands() {
       if (!$body.find(selector).length) callback();
     });
   });
+  Cypress.Commands.add("dragAndDrop", function (_ref2) {
+    var subject = _ref2.subject,
+      target = _ref2.target,
+      _ref2$dragIndex = _ref2.dragIndex,
+      dragIndex = _ref2$dragIndex === void 0 ? 0 : _ref2$dragIndex,
+      _ref2$dropIndex = _ref2.dropIndex,
+      dropIndex = _ref2$dropIndex === void 0 ? 0 : _ref2$dropIndex;
+    cy.get(subject).should("be.visible", {
+      timeout: 20000
+    });
+    Cypress.log({
+      name: "DRAGNDROP",
+      message: "Dragging element ".concat(subject, " to ").concat(target),
+      consoleProps: function consoleProps() {
+        return {
+          subject: subject,
+          target: target
+        };
+      }
+    });
+    cy.get(target).eq(dropIndex).then(function ($target) {
+      var coordsDrop = $target[0].getBoundingClientRect();
+      cy.get(subject).eq(dragIndex).then(function (subject) {
+        var coordsDrag = subject[0].getBoundingClientRect();
+        cy.wrap(subject).trigger("mousedown", {
+          button: 0,
+          // BUTTON_INDEX
+          clientX: coordsDrag.x,
+          clientY: coordsDrag.y,
+          force: true
+        }).trigger("mousemove", {
+          button: 0,
+          // BUTTON_INDEX
+          clientX: coordsDrag.x + 10,
+          // SLOPPY_CLICK_THRESHOLD
+          clientY: coordsDrag.y,
+          force: true
+        });
+        cy.get("body").trigger("mousemove", {
+          button: 0,
+          // BUTTON_INDEX
+          clientX: coordsDrop.x,
+          clientY: coordsDrop.y,
+          force: true
+        }).trigger("mouseup");
+      });
+    });
+  });
+  Cypress.Commands.add("verifyPlaceholder", function (textInputSelector, value) {
+    cy.get(textInputSelector).should("have.attr", "placeholder").and("eq", value);
+  });
+  Cypress.Commands.add("enableOrDisableSwitch", function (switchButton, value) {
+    cy.get(switchButton).invoke("click");
+    cy.get(switchButton).should("have.prop", "value").and("eq", value);
+  });
+  Cypress.Commands.add("interceptNonVersionedApi", function (_ref3) {
+    var _ref3$url = _ref3.url,
+      url = _ref3$url === void 0 ? "*" : _ref3$url,
+      alias = _ref3.alias,
+      _ref3$times = _ref3.times,
+      times = _ref3$times === void 0 ? 1 : _ref3$times;
+    cy.intercept({
+      url: url,
+      times: times
+    }).as(alias);
+  });
 };
 
 var loginSelectors = {

package/cypress-utils.d.ts

@@ -15,6 +15,22 @@ type CommonSelectors = {
   toastCloseButton: string;
   windowAlert: string;
   body: string;
+  paneModalCrossIcon: string;
+  inputField: string;
+  alertConfirmationText: string;
+  alertCancelButton: string;
+  alertModalCrossIcon: string;
+  saveChangesButton: string;
+  cancelButton: string;
+  inputFieldError: string;
+  selectDropDownError: string;
+  subTitleHeading: (index: string) => string;
+  noDataTitle: string;
+  noDataDescription: string;
+  backDrop: string;
+  menuBarHeading: string;
+  tabItem: (index: string) => string;
+  dropdownWrapper: (index: string) => string;
 };
 
 type MemberSelectors = {
@@ -82,6 +98,15 @@ type CommonTexts = {
   new: string;
   takeAction: string;
   unblock: string;
+  emailRequiredError: string;
+  emailTakenMessage: string;
+  nameTakenMessage: string;
+  all: string;
+  proceed: string;
+  settings: string;
+  unsavedChangesAlertTitle: string;
+  unsavedChangesAlertMessage: string;
+  unsavedChangesAlertTitle: string;
 };
 
 type MemberText = {

package/cypress-utils.js

@@ -164,7 +164,29 @@ var commonSelectors = {
   toastCloseButton: ".neeto-ui-toastr__close-button",
   windowAlert: "#alert-box",
   body: "body",
-  toastIcon: ".Toastify__toast-icon"
+  toastIcon: ".Toastify__toast-icon",
+  paneModalCrossIcon: ".neeto-ui-pane__close",
+  inputField: dataCy("input-field"),
+  alertConfirmationText: dataCy("alert-confirmation-text"),
+  alertCancelButton: dataCy("alert-cancel-button"),
+  alertModalCrossIcon: ".neeto-ui-modal__close",
+  saveChangesButton: dataCy("save-changes-button"),
+  cancelButton: dataCy("cancel-button"),
+  inputFieldError: dataCy("nui-input-error"),
+  selectDropDownError: dataCy("nui-select-error"),
+  subTitleHeading: function subTitleHeading(index) {
+    return dataCy("menubar-subtitle-heading", ":eq(".concat(index, ")"));
+  },
+  noDataTitle: dataCy("no-data-title"),
+  noDataDescription: dataCy("no-data-description"),
+  backDrop: "[data-testid='backdrop']",
+  menuBarHeading: dataCy("menubar-heading"),
+  tabItem: function tabItem(index) {
+    return dataCy("tab-item", ":eq(".concat(index, ")"));
+  },
+  dropdownWrapper: function dropdownWrapper(index) {
+    return dataCy("nui-select-container-wrapper", ":eq(".concat(index, ")"));
+  }
 };
 var tableSelectors = {
   nthColumn: function nthColumn(n) {
@@ -173,7 +195,10 @@ var tableSelectors = {
   tableBody: ".ant-table-body",
   tableHeader: ".ant-table-thead th",
   tableRow: ".ant-table-tbody tr",
-  spinner: ".ant-spin"
+  spinner: ".ant-spin",
+  nthHeading: function nthHeading(n) {
+    return "tr > th:nth-child(".concat(n, ")");
+  }
 };
 var profileSelectors = {
   tab: dataCy("profile-section"),
@@ -195,7 +220,15 @@ var commonTexts = {
   "new": "New",
   takeAction: "Take action",
   unblock: "Unblock",
-  toastIcon: "👍"
+  toastIcon: "👍",
+  emailRequiredError: "Email is required.",
+  emailTakenMessage: "Email is already taken",
+  nameTakenMessage: "Name has already been taken",
+  all: "All",
+  proceed: "Proceed",
+  settings: "Settings",
+  unsavedChangesAlertTitle: "You have unsaved changes!",
+  unsavedChangesAlertMessage: "Are you sure you want to continue? All of your unsaved changes will be lost."
 };
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -269,7 +302,9 @@ var initCustomCommands = function initCustomCommands() {
   Cypress.Commands.add("apiRequest", function (options) {
     return cy.get("@requestHeaders").then(function (requestHeaders) {
       return requestHeaders ? cy.request(_objectSpread(_objectSpread({}, options), {}, {
-        headers: requestHeaders
+        headers: _objectSpread(_objectSpread({}, requestHeaders), {}, {
+          "accept-encoding": "gzip"
+        })
       })) : cy.log("No request headers found");
     });
   });
@@ -325,6 +360,72 @@ var initCustomCommands = function initCustomCommands() {
       if (!$body.find(selector).length) callback();
     });
   });
+  Cypress.Commands.add("dragAndDrop", function (_ref2) {
+    var subject = _ref2.subject,
+      target = _ref2.target,
+      _ref2$dragIndex = _ref2.dragIndex,
+      dragIndex = _ref2$dragIndex === void 0 ? 0 : _ref2$dragIndex,
+      _ref2$dropIndex = _ref2.dropIndex,
+      dropIndex = _ref2$dropIndex === void 0 ? 0 : _ref2$dropIndex;
+    cy.get(subject).should("be.visible", {
+      timeout: 20000
+    });
+    Cypress.log({
+      name: "DRAGNDROP",
+      message: "Dragging element ".concat(subject, " to ").concat(target),
+      consoleProps: function consoleProps() {
+        return {
+          subject: subject,
+          target: target
+        };
+      }
+    });
+    cy.get(target).eq(dropIndex).then(function ($target) {
+      var coordsDrop = $target[0].getBoundingClientRect();
+      cy.get(subject).eq(dragIndex).then(function (subject) {
+        var coordsDrag = subject[0].getBoundingClientRect();
+        cy.wrap(subject).trigger("mousedown", {
+          button: 0,
+          // BUTTON_INDEX
+          clientX: coordsDrag.x,
+          clientY: coordsDrag.y,
+          force: true
+        }).trigger("mousemove", {
+          button: 0,
+          // BUTTON_INDEX
+          clientX: coordsDrag.x + 10,
+          // SLOPPY_CLICK_THRESHOLD
+          clientY: coordsDrag.y,
+          force: true
+        });
+        cy.get("body").trigger("mousemove", {
+          button: 0,
+          // BUTTON_INDEX
+          clientX: coordsDrop.x,
+          clientY: coordsDrop.y,
+          force: true
+        }).trigger("mouseup");
+      });
+    });
+  });
+  Cypress.Commands.add("verifyPlaceholder", function (textInputSelector, value) {
+    cy.get(textInputSelector).should("have.attr", "placeholder").and("eq", value);
+  });
+  Cypress.Commands.add("enableOrDisableSwitch", function (switchButton, value) {
+    cy.get(switchButton).invoke("click");
+    cy.get(switchButton).should("have.prop", "value").and("eq", value);
+  });
+  Cypress.Commands.add("interceptNonVersionedApi", function (_ref3) {
+    var _ref3$url = _ref3.url,
+      url = _ref3$url === void 0 ? "*" : _ref3$url,
+      alias = _ref3.alias,
+      _ref3$times = _ref3.times,
+      times = _ref3$times === void 0 ? 1 : _ref3$times;
+    cy.intercept({
+      url: url,
+      times: times
+    }).as(alias);
+  });
 };
 
 var loginSelectors = {

package/initializers.cjs.js

@@ -581,6 +581,7 @@ var neetoCommons = {
 	},
 	keyboardShortcuts: {
 		title: "Keyboard shortcuts",
+		viewFullListOfShortcuts: "View full list of shortcuts",
 		global: {
 			categoryName: "GLOBAL",
 			openKeyboardShortcutsPane: "Open the keyboard shortcuts pane",

package/initializers.js

@@ -571,6 +571,7 @@ var neetoCommons = {
 	},
 	keyboardShortcuts: {
 		title: "Keyboard shortcuts",
+		viewFullListOfShortcuts: "View full list of shortcuts",
 		global: {
 			categoryName: "GLOBAL",
 			openKeyboardShortcutsPane: "Open the keyboard shortcuts pane",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-commons-frontend",
-  "version": "2.0.48",
+  "version": "2.0.49",
   "description": "A package encapsulating common code across neeto projects including initializers, utility functions, common components and hooks and so on.",
   "repository": "git@github.com:bigbinary/neeto-commons-frontend.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/react-utils.cjs.js

@@ -40467,37 +40467,13 @@ var IpRestriction = function IpRestriction() {
   }, /*#__PURE__*/React__default["default"].createElement(CurrentIp, null), /*#__PURE__*/React__default["default"].createElement(AllowedIpRanges, null)));
 };
 
-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 FULL_SHORTCUTS_LINK_PROP_NAME = "fullShortcutsLink";
 
 var shortenHotKey = function shortenHotKey(hotkey) {
   var result = hotkey;
@@ -40522,35 +40498,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,
+      label: t("neetoCommons.keyboardShortcuts.viewFullListOfShortcuts"),
+      style: "link"
     }));
   });
 };

package/react-utils.d.ts

@@ -18,6 +18,7 @@ import { DateTimeType, timeFormat } from "./utils";
 import { History } from "history";
 import { StoreApi, UseBoundStore } from "zustand";
 import { Dayjs } from "dayjs";
+import { TFunction } from "i18next";
 
 export const HoneybadgerErrorBoundary: React.FC<{
   ErrorComponent?: React.ReactNode | React.ComponentType<any>;
@@ -264,13 +265,14 @@ export function isMetaKeyPressed(
 
 interface Shortcut {
   sequence: string;
-  description: string;
+  description: TFunction;
 }
 interface Category {
-  [index: string]: Shortcut;
+  [index: string]: Shortcut | string;
+  fullShortcutsLink?: string;
 }
 interface ProductShortcuts {
-  [index: any]: Category;
+  [index: string | TFunction]: Category;
 }
 export const KeyboardShortcutsPane: React.FC<{
   productShortcuts?: ProductShortcuts;

package/react-utils.js

@@ -40429,37 +40429,13 @@ var IpRestriction = function IpRestriction() {
   }, /*#__PURE__*/React__default.createElement(CurrentIp, null), /*#__PURE__*/React__default.createElement(AllowedIpRanges, null)));
 };
 
-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.createElement(Kbd, {
-    keyName: hotkey
-  });
-  if (isSequentialHotkey) {
-    sequences = hotkey.split(" ");
-  } else if (isSimultaneousHotkey) {
-    sequences = hotkey.split("+");
-  }
-  return sequences.map(function (keyName, idx) {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-      key: idx
-    }, /*#__PURE__*/React__default.createElement(Kbd, {
-      keyName: keyName
-    }), isSequentialHotkey && idx + 1 !== sequences.length && /*#__PURE__*/React__default.createElement(Kbd, {
-      keyName: "then"
-    }));
-  });
-};
-
 var KEY_SHORTFORM_MAP = {
   command: "cmd",
   escape: "esc",
   control: "ctrl",
   option: "opt"
 };
+var FULL_SHORTCUTS_LINK_PROP_NAME = "fullShortcutsLink";
 
 var shortenHotKey = function shortenHotKey(hotkey) {
   var result = hotkey;
@@ -40484,35 +40460,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.createElement("div", {
+    className: "my-3 px-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center justify-between gap-3",
+    "data-testid": "hotkey-item"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    className: "neeto-ui-text-gray-800",
+    lineHeight: "normal",
+    style: "body2"
+  }, description), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center gap-1"
+  }, sequences.map(function (keyName, idx) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: idx
+    }, /*#__PURE__*/React__default.createElement(Kbd, {
+      keyName: keyName
+    }), isSequentialHotkey && idx + 1 !== sequences.length && /*#__PURE__*/React__default.createElement(Kbd, {
+      keyName: "then"
+    }));
+  }))));
+};
+
 var HotKeyList = function HotKeyList(_ref) {
   var hotkeys = _ref.hotkeys;
+  var _useTranslation = 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.createElement(React__default.Fragment, {
       key: categoryName
     }, /*#__PURE__*/React__default.createElement(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.createElement("div", {
-        className: "my-3 px-4",
-        key: sequence
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "flex items-center justify-between gap-3",
-        "data-testid": "hotkey-item"
-      }, /*#__PURE__*/React__default.createElement(Typography, {
-        className: "neeto-ui-text-gray-800",
-        lineHeight: "normal",
-        style: "body2"
-      }, description), /*#__PURE__*/React__default.createElement("div", {
-        className: "flex items-center gap-1"
-      }, /*#__PURE__*/React__default.createElement(DisplayHotKey, {
-        hotkey: shortenHotKey(convertHotkeyToUsersPlatform(sequence))
-      }))));
+      return sequence && /*#__PURE__*/React__default.createElement(HotKey, {
+        description: description,
+        key: sequence,
+        sequence: sequence
+      });
+    }), fullShortcutsLink && /*#__PURE__*/React__default.createElement(Button, {
+      className: "pl-4 mb-3",
+      href: fullShortcutsLink,
+      label: t("neetoCommons.keyboardShortcuts.viewFullListOfShortcuts"),
+      style: "link"
     }));
   });
 };