@bigbinary/neeto-molecules 1.1.9 → 1.1.11

package/dist/IpRestriction/Row.js

@@ -0,0 +1,86 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from "react";
+import { truncate } from "@bigbinary/neeto-commons-frontend/pure";
+import { Typography, Alert, Tooltip } from "@bigbinary/neetoui";
+import { useTranslation, Trans } from "react-i18next";
+import MoreDropdown from "../MoreDropdown";
+import { TRUNCATE_LENGTH } from "./constants";
+import { useDestroyAllowedIpRanges } from "./hooks/reactQuery/useAllowedIpRanges";
+var Row = function Row(_ref) {
+  var data = _ref.data,
+    setEditingRow = _ref.setEditingRow;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDeleteIpRangeAlertOpen = _useState2[0],
+    setIsDeleteIpRangeAlertOpen = _useState2[1];
+  var _useDestroyAllowedIpR = useDestroyAllowedIpRanges(),
+    destroyAllowedIpRange = _useDestroyAllowedIpR.mutate;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleDelete = function handleDelete() {
+    destroyAllowedIpRange(data.id);
+    setIsDeleteIpRangeAlertOpen(false);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-white neeto-ui-rounded-lg grid grid-cols-12 items-center gap-4 p-3",
+    "data-cy": "ip-range-row"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: data.ipStart,
+    disabled: data.ipStart.length < TRUNCATE_LENGTH,
+    position: "top"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "col-span-5",
+    "data-cy": "ip-range-start-value",
+    style: "body2"
+  }, truncate(data.ipStart, TRUNCATE_LENGTH))), /*#__PURE__*/React.createElement(Tooltip, {
+    content: data.ipEnd,
+    disabled: data.ipEnd.length < TRUNCATE_LENGTH,
+    position: "top"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "col-span-5",
+    "data-cy": "ip-range-end-value",
+    style: "body2"
+  }, truncate(data.ipEnd, TRUNCATE_LENGTH))), /*#__PURE__*/React.createElement("div", {
+    className: "col-span-2 flex justify-center"
+  }, /*#__PURE__*/React.createElement(MoreDropdown, {
+    dropdownButtonProps: {
+      "data-testid": "ip-range-actions-dropdown"
+    },
+    dropdownProps: {
+      position: "bottom-end"
+    },
+    menuItems: [{
+      "data-cy": "ip-range-edit-button",
+      key: "ip-range-edit-button",
+      label: t("neetoMolecules.common.actions.edit"),
+      onClick: function onClick() {
+        return setEditingRow(data.id);
+      }
+    }, {
+      "data-cy": "ip-range-delete-button",
+      key: "ip-range-delete-button",
+      label: t("neetoMolecules.common.actions.delete"),
+      onClick: function onClick() {
+        return setIsDeleteIpRangeAlertOpen(true);
+      }
+    }]
+  }), /*#__PURE__*/React.createElement(Alert, {
+    isOpen: isDeleteIpRangeAlertOpen,
+    submitButtonLabel: t("neetoMolecules.common.actions.delete"),
+    message: /*#__PURE__*/React.createElement(Trans, {
+      i18nKey: "neetoMolecules.ipRestriction.allowedIpRangeConfirmation",
+      values: {
+        ipStart: data.ipStart,
+        ipEnd: data.ipEnd
+      }
+    }),
+    title: t("neetoMolecules.common.deleteAlert.title", {
+      entity: t("neetoMolecules.ipRestriction.allowedIpRangeConfirmationTitle")
+    }),
+    onClose: function onClose() {
+      return setIsDeleteIpRangeAlertOpen(false);
+    },
+    onSubmit: handleDelete
+  })));
+};
+export default /*#__PURE__*/React.memo(Row);

package/dist/IpRestriction/apis/allowed_ip_ranges.js

@@ -0,0 +1,28 @@
+import axios from "axios";
+import { IP_RESTRICTIONS_ENGINE_BASE_URL } from "../constants";
+var allowedIpRangesUrl = "".concat(IP_RESTRICTIONS_ENGINE_BASE_URL, "/allowed_ips");
+var fetch = function fetch() {
+  return axios.get(allowedIpRangesUrl);
+};
+var create = function create(payload) {
+  return axios.post(allowedIpRangesUrl, {
+    allowedIpRange: payload
+  });
+};
+var destroy = function destroy(id) {
+  return axios["delete"]("".concat(allowedIpRangesUrl, "/").concat(id));
+};
+var update = function update(_ref) {
+  var id = _ref.id,
+    payload = _ref.payload;
+  return axios.patch("".concat(allowedIpRangesUrl, "/").concat(id), {
+    allowedIpRange: payload
+  });
+};
+var allowedIpRangesApi = {
+  fetch: fetch,
+  create: create,
+  destroy: destroy,
+  update: update
+};
+export default allowedIpRangesApi;

package/dist/IpRestriction/apis/current_ip.js

@@ -0,0 +1,11 @@
+import axios from "axios";
+import { IP_RESTRICTIONS_ENGINE_BASE_URL } from "../constants";
+var show = function show(params) {
+  return axios.get("".concat(IP_RESTRICTIONS_ENGINE_BASE_URL, "/current_ip"), {
+    params: params
+  });
+};
+var currentIpApi = {
+  show: show
+};
+export default currentIpApi;

package/dist/IpRestriction/apis/ip_restriction.js

@@ -0,0 +1,16 @@
+import axios from "axios";
+import { IP_RESTRICTIONS_ENGINE_BASE_URL } from "../constants";
+var ipRestrictionUrl = "".concat(IP_RESTRICTIONS_ENGINE_BASE_URL, "/ip_restriction");
+var update = function update(params) {
+  return axios.patch(ipRestrictionUrl, {
+    ipRestriction: params
+  });
+};
+var show = function show() {
+  return axios.get(ipRestrictionUrl);
+};
+var ipRestrictionApi = {
+  update: update,
+  show: show
+};
+export default ipRestrictionApi;

package/dist/IpRestriction/constants.js

@@ -0,0 +1,11 @@
+export var IP_RESTRICTIONS_ENGINE_BASE_URL = "ip_restrictions/api/v1";
+export var INITIAL_VALUES = {
+  ipStart: "",
+  ipEnd: ""
+};
+export var QUERY_KEYS = {
+  IP_RESTRICTION: "IP_RESTRICTION",
+  ALLOWED_IP_RANGES: "ALLOWED_IP_RANGES",
+  CURRENT_IP: "CURRENT_IP"
+};
+export var TRUNCATE_LENGTH = 18;

package/dist/IpRestriction/hooks/reactQuery/useAllowedIpRanges.js

@@ -0,0 +1,34 @@
+import { useQuery, useQueryClient, useMutation } from "react-query";
+import allowedIpRangesApi from "../../apis/allowed_ip_ranges";
+import { QUERY_KEYS } from "../../constants";
+var ALLOWED_IP_RANGES = QUERY_KEYS.ALLOWED_IP_RANGES;
+var useFetchAllowedIpRanges = function useFetchAllowedIpRanges() {
+  return useQuery([ALLOWED_IP_RANGES], function () {
+    return allowedIpRangesApi.fetch();
+  });
+};
+var useCreateAllowedIpRanges = function useCreateAllowedIpRanges() {
+  var queryClient = useQueryClient();
+  return useMutation(allowedIpRangesApi.create, {
+    onSuccess: function onSuccess() {
+      return queryClient.invalidateQueries(ALLOWED_IP_RANGES);
+    }
+  });
+};
+var useDestroyAllowedIpRanges = function useDestroyAllowedIpRanges() {
+  var queryClient = useQueryClient();
+  return useMutation(allowedIpRangesApi.destroy, {
+    onSuccess: function onSuccess() {
+      queryClient.invalidateQueries(ALLOWED_IP_RANGES);
+    }
+  });
+};
+var useUpdateAllowedIpRanges = function useUpdateAllowedIpRanges() {
+  var queryClient = useQueryClient();
+  return useMutation(allowedIpRangesApi.update, {
+    onSuccess: function onSuccess() {
+      queryClient.invalidateQueries(ALLOWED_IP_RANGES);
+    }
+  });
+};
+export { useFetchAllowedIpRanges, useCreateAllowedIpRanges, useDestroyAllowedIpRanges, useUpdateAllowedIpRanges };

package/dist/IpRestriction/hooks/reactQuery/useCurrentIp.js

@@ -0,0 +1,10 @@
+import { useQuery } from "react-query";
+import currentIpApi from "../../apis/current_ip";
+import { QUERY_KEYS } from "../../constants";
+var CURRENT_IP = QUERY_KEYS.CURRENT_IP;
+var useShowCurrentIp = function useShowCurrentIp() {
+  return useQuery([CURRENT_IP], function () {
+    return currentIpApi.show();
+  });
+};
+export { useShowCurrentIp };

package/dist/IpRestriction/hooks/reactQuery/useIpRestrictions.js

@@ -0,0 +1,18 @@
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import ipRestrictionApi from "../../apis/ip_restriction";
+import { QUERY_KEYS } from "../../constants";
+var IP_RESTRICTION = QUERY_KEYS.IP_RESTRICTION;
+var useShowIpRestriction = function useShowIpRestriction() {
+  return useQuery([IP_RESTRICTION], function () {
+    return ipRestrictionApi.show();
+  });
+};
+var useUpdateIpRestriction = function useUpdateIpRestriction() {
+  var queryClient = useQueryClient();
+  return useMutation(ipRestrictionApi.update, {
+    onSuccess: function onSuccess() {
+      return queryClient.invalidateQueries(IP_RESTRICTION);
+    }
+  });
+};
+export { useShowIpRestriction, useUpdateIpRestriction };

package/dist/IpRestriction/index.js

@@ -0,0 +1,102 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from "react";
+import { useStateWithDependency } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Warning } from "@bigbinary/neeto-icons";
+import { Typography, Button, Alert, Callout, Checkbox } from "@bigbinary/neetoui";
+import { Trans, useTranslation } from "react-i18next";
+import PageLoader from "../PageLoader";
+import AllowedIpRanges from "./AllowedIpRanges";
+import CurrentIp from "./CurrentIp";
+import { useShowIpRestriction, useUpdateIpRestriction } from "./hooks/reactQuery/useIpRestrictions";
+var IpRestriction = function IpRestriction() {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useShowIpRestriction = useShowIpRestriction(),
+    data = _useShowIpRestriction.data,
+    isFetching = _useShowIpRestriction.isLoading;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAlertOpen = _useState2[0],
+    setIsAlertOpen = _useState2[1];
+  var _useStateWithDependen = useStateWithDependency((data === null || data === void 0 ? void 0 : data.isIpRestrictionEnabled) || false, [data]),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    isIpRestrictionVisible = _useStateWithDependen2[0],
+    setIsIpRestrictionVisible = _useStateWithDependen2[1];
+  var _useUpdateIpRestricti = useUpdateIpRestriction(),
+    updateIpRestriction = _useUpdateIpRestricti.mutate,
+    isUpdating = _useUpdateIpRestricti.isLoading;
+  if (isFetching) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "h-screen"
+    }, /*#__PURE__*/React.createElement(PageLoader, null));
+  }
+  var updateIpRestrictionStatus = function updateIpRestrictionStatus() {
+    return updateIpRestriction({
+      isIpRestrictionEnabled: isIpRestrictionVisible
+    }, {
+      onSuccess: function onSuccess() {
+        return setIsAlertOpen(false);
+      }
+    });
+  };
+  var handleOnChange = function handleOnChange() {
+    if (data.isIpRestrictionEnabled) {
+      updateIpRestriction({
+        isIpRestrictionEnabled: false
+      }, {
+        onSuccess: function onSuccess() {
+          return setIsIpRestrictionVisible(false);
+        }
+      });
+    } else {
+      setIsIpRestrictionVisible(function (previousState) {
+        return !previousState;
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-white neeto-ui-border-gray-200 neeto-ui-rounded-lg mx-auto mb-4 w-full overflow-hidden border sm:max-w-screen-sm md:max-w-screen-md lg:max-w-3xl",
+    "data-cy": "ip-restrictions-card"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "space-y-2 p-6"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: isIpRestrictionVisible,
+    className: "flex-grow-0",
+    "data-cy": "enable-ip-restriction-checkbox",
+    disabled: isFetching || isUpdating,
+    label: /*#__PURE__*/React.createElement(Typography, {
+      style: "h3"
+    }, t("neetoMolecules.ipRestriction.switchLabel")),
+    onChange: handleOnChange
+  }), /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "ip-restriction-description",
+    style: "body2"
+  }, t("neetoMolecules.ipRestriction.description"))), isIpRestrictionVisible && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-100 w-full space-y-6 p-6"
+  }, /*#__PURE__*/React.createElement(CurrentIp, null), /*#__PURE__*/React.createElement(AllowedIpRanges, null), /*#__PURE__*/React.createElement(Callout, {
+    icon: Warning,
+    style: "warning"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "leading-2 block whitespace-pre-wrap py-1"
+  }, /*#__PURE__*/React.createElement(Trans, {
+    i18nKey: "neetoMolecules.ipRestriction.warningMessage"
+  }))), /*#__PURE__*/React.createElement(Button, {
+    label: t("neetoMolecules.common.actions.saveChanges"),
+    onClick: function onClick() {
+      return setIsAlertOpen(true);
+    }
+  }), /*#__PURE__*/React.createElement(Alert, {
+    isOpen: isAlertOpen,
+    isSubmitting: isUpdating,
+    title: t("neetoMolecules.ipRestriction.enableAlert.title"),
+    message: /*#__PURE__*/React.createElement(Trans, {
+      i18nKey: "neetoMolecules.ipRestriction.enableAlert.message"
+    }),
+    submitButtonLabel: t("neetoMolecules.ipRestriction.enableAlert.submitButtonLabel"),
+    onClose: function onClose() {
+      return setIsAlertOpen(false);
+    },
+    onSubmit: updateIpRestrictionStatus
+  })));
+};
+export default /*#__PURE__*/React.memo(IpRestriction);

package/dist/IpRestriction/utils.js

@@ -0,0 +1,67 @@
+import { t } from "i18next";
+import { IPv4, IPv6, Validator } from "ip-num";
+import { isNil, isNotNil } from "ramda";
+import * as yup from "yup";
+var isValidIPv4String = function isValidIPv4String(ip) {
+  return isNotNil(ip) && Validator.isValidIPv4String(ip)[0];
+};
+var isValidIPv6String = function isValidIPv6String(ip) {
+  return isNotNil(ip) && Validator.isValidIPv6String(ip)[0];
+};
+var isValidIpString = function isValidIpString(ip) {
+  return isValidIPv4String(ip) || isValidIPv6String(ip);
+};
+var areIpAddressesInSameFormat = function areIpAddressesInSameFormat(ipStart, ipEnd) {
+  return isValidIPv4String(ipStart) && isValidIPv4String(ipEnd) || isValidIPv6String(ipStart) && isValidIPv6String(ipEnd);
+};
+var isValidIPv4Range = function isValidIPv4Range(ipStart, ipEnd) {
+  var ipStartAddr = IPv4.fromDecimalDottedString(ipStart);
+  var ipEndAddr = IPv4.fromDecimalDottedString(ipEnd);
+  return ipStartAddr.isLessThanOrEquals(ipEndAddr);
+};
+var isValidIPv6Range = function isValidIPv6Range(ipStart, ipEnd) {
+  var ipStartAddr = IPv6.fromString(ipStart);
+  var ipEndAddr = IPv6.fromString(ipEnd);
+  return ipStartAddr.isLessThanOrEquals(ipEndAddr);
+};
+var isValidIPRange = function isValidIPRange(ipStart, ipEnd) {
+  if (isValidIPv4String(ipStart) && isValidIPv4String(ipEnd)) {
+    return isValidIPv4Range(ipStart, ipEnd);
+  }
+  if (isValidIPv6String(ipStart) && isValidIPv6String(ipEnd)) {
+    return isValidIPv6Range(ipStart, ipEnd);
+  }
+  return false;
+};
+yup.addMethod(yup.string, "validIp", function (errorMessage) {
+  return this.test("valid-ip", errorMessage, function (value) {
+    if (isNil(value)) {
+      return this;
+    }
+    var isValidIp = isValidIpString(value);
+    return isValidIp || this.createError({
+      path: this.path,
+      message: errorMessage
+    });
+  });
+});
+export var getIpRestrictionValidationSchema = function getIpRestrictionValidationSchema() {
+  return yup.object().shape({
+    ipStart: yup.string().validIp(t("neetoMolecules.ipRestriction.validations.invalidIp")).required(t("neetoMolecules.ipRestriction.validations.ipStartRequired")),
+    ipEnd: yup.string().validIp(t("neetoMolecules.ipRestriction.validations.invalidIp")).when("ipStart", function (ipStart, schema) {
+      return schema.test({
+        test: function test(ipEnd) {
+          return areIpAddressesInSameFormat(ipStart, ipEnd);
+        },
+        message: t("neetoMolecules.ipRestriction.validations.eitherIpv4OrIpv6")
+      });
+    }).when("ipStart", function (ipStart, schema) {
+      return schema.test({
+        test: function test(ipEnd) {
+          return isValidIPRange(ipStart, ipEnd);
+        },
+        message: t("neetoMolecules.ipRestriction.validations.ipEndGreaterThanIpStart")
+      });
+    }).required(t("neetoMolecules.ipRestriction.validations.ipEndRequired"))
+  });
+};

package/dist/KeyboardShortcuts/Pane/HotKey.js

@@ -0,0 +1,44 @@
+import React from "react";
+
+// eslint-disable-next-line @bigbinary/neeto/use-webpack-alias
+import { Kbd, Typography } from "@bigbinary/neetoui";
+import { convertHotkeyToUsersPlatform, shortenHotKey, getTooltipProps } from "./utils";
+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.createElement("div", {
+    className: "my-3 w-full"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between gap-3",
+    "data-cy": "hotkey-item",
+    "data-testid": "hotkey-item"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
+    lineHeight: "normal",
+    style: "body2"
+  }, description), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-shrink-0 items-center gap-1"
+  }, sequences.map(function (keyName, idx) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: idx
+    }, /*#__PURE__*/React.createElement(Kbd, {
+      keyName: keyName,
+      tooltipProps: getTooltipProps(keyName)
+    }), isSequentialHotkey && idx + 1 !== sequences.length && /*#__PURE__*/React.createElement(Kbd, {
+      keyName: "then"
+    }));
+  }))));
+};
+export default /*#__PURE__*/React.memo(HotKey);

package/dist/KeyboardShortcuts/Pane/HotKeyList.js

@@ -0,0 +1,42 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from "react";
+
+// eslint-disable-next-line @bigbinary/neeto/use-webpack-alias
+import { Button, Typography } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import { FULL_SHORTCUTS_LINK_PROP_NAME } from "./constants";
+import HotKey from "./HotKey";
+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.createElement("div", {
+      className: "mt-4 px-4",
+      key: categoryName
+    }, /*#__PURE__*/React.createElement(Typography, {
+      style: "h6",
+      textTransform: "uppercase",
+      weight: "bold"
+    }, categoryName), Object.entries(categoryValues).map(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        _ref3$ = _ref3[1],
+        sequence = _ref3$.sequence,
+        description = _ref3$.description;
+      return sequence && /*#__PURE__*/React.createElement(HotKey, {
+        description: description,
+        key: sequence,
+        sequence: sequence
+      });
+    }), fullShortcutsLink && /*#__PURE__*/React.createElement(Button, {
+      className: "mb-3",
+      href: fullShortcutsLink,
+      style: "link",
+      target: "_blank",
+      label: t("neetoMolecules.keyboardShortcuts.viewFullListOfShortcuts")
+    }));
+  });
+};
+export default /*#__PURE__*/React.memo(HotKeyList);

package/dist/KeyboardShortcuts/Pane/constants.js

@@ -0,0 +1,25 @@
+export var KEY_SHORTFORM_MAP = {
+  command: "⌘",
+  escape: "esc",
+  control: "ctrl",
+  option: "opt",
+  "return": "enter"
+};
+export var MAC_TO_WINDOWS_KEYS_MAP = {
+  option: "alt",
+  command: "ctrl",
+  "return": "enter",
+  "delete": "backspace"
+};
+export var OS = {
+  mac: "OS X",
+  windows: "Windows"
+};
+export var FULL_SHORTCUTS_LINK_PROP_NAME = "fullShortcutsLink";
+export var TOOLTIP_CONTENT = {
+  "⌘": "command",
+  esc: "escape",
+  ctrl: "control",
+  opt: "option",
+  backspace: "delete"
+};

package/dist/KeyboardShortcuts/Pane/index.js

@@ -0,0 +1,61 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/* eslint-disable @bigbinary/neeto/use-webpack-alias */
+import React from "react";
+import { useHotKeys } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Close } from "@bigbinary/neeto-icons";
+import { Typography, Button } from "@bigbinary/neetoui";
+import { manager } from "@bigbinary/neetoui/managers";
+import classnames from "classnames";
+import { useTranslation } from "react-i18next";
+import HotKeyList from "./HotKeyList";
+import "./keyboard-shortcuts.scss";
+import { getGlobalShortcuts } from "./utils";
+import useKeyboardShortcutsPaneState from "../hooks/useKeyboardShortcutsPaneState";
+var KeyboardShortcutsPane = function KeyboardShortcutsPane(_ref) {
+  var _ref$productShortcuts = _ref.productShortcuts,
+    productShortcuts = _ref$productShortcuts === void 0 ? {} : _ref$productShortcuts;
+  var _useKeyboardShortcuts = useKeyboardShortcutsPaneState(),
+    _useKeyboardShortcuts2 = _slicedToArray(_useKeyboardShortcuts, 2),
+    isOpen = _useKeyboardShortcuts2[0],
+    setIsOpen = _useKeyboardShortcuts2[1];
+  var hasOverlays = manager.hasOverlays();
+  // eslint-disable-next-line @bigbinary/neeto/no-dangling-constants
+  var GLOBAL_SHORTCUTS = getGlobalShortcuts();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var shortcuts = GLOBAL_SHORTCUTS[t("neetoMolecules.keyboardShortcuts.global.categoryName")];
+  useHotKeys(shortcuts.openKeyboardShortcutsPane.sequence, function () {
+    return setIsOpen(function (prevIsOpen) {
+      return !prevIsOpen;
+    });
+  });
+  useHotKeys(shortcuts.close.sequence, function () {
+    return setIsOpen(false);
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    "data-cy": "keyboard-shortcuts-pane",
+    className: classnames("neeto-molecules-keyboard-shortcuts-pane neeto-ui-border-gray-300 transition-width neeto-ui-bg-white ml-auto h-screen overflow-hidden border-l duration-300 ease-in-out", {
+      "w-80": isOpen,
+      "w-0": !isOpen,
+      absolute: hasOverlays,
+      "right-0": hasOverlays
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "h-full w-80 overflow-y-auto"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-border-gray-300 my-2 flex items-center justify-between border-b px-4 pb-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "h4"
+  }, t("neetoMolecules.keyboardShortcuts.title")), /*#__PURE__*/React.createElement(Button, {
+    icon: Close,
+    style: "text",
+    onClick: function onClick() {
+      return setIsOpen(false);
+    }
+  })), /*#__PURE__*/React.createElement(HotKeyList, {
+    hotkeys: GLOBAL_SHORTCUTS
+  }), /*#__PURE__*/React.createElement(HotKeyList, {
+    hotkeys: productShortcuts
+  })));
+};
+export default KeyboardShortcutsPane;

package/dist/KeyboardShortcuts/Pane/keyboard-shortcuts.scss

@@ -0,0 +1,5 @@
+.neeto-molecules-keyboard-shortcuts-pane {
+  z-index: calc(var(--neeto-ui-modal-z-index) + 1);
+  flex-shrink: 0;
+  flex-grow: 0;
+}

package/dist/KeyboardShortcuts/Pane/utils.js

@@ -0,0 +1,66 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import i18next from "i18next";
+import platform from "platform";
+import { toPairs } from "ramda";
+import { KEY_SHORTFORM_MAP, MAC_TO_WINDOWS_KEYS_MAP, OS, TOOLTIP_CONTENT } from "./constants";
+var isMultipleHotkey = function isMultipleHotkey(hotkey) {
+  return Array.isArray(hotkey);
+};
+var replaceKeys = function replaceKeys(hotkey, keyName, replaceWith) {
+  return isMultipleHotkey(hotkey) ? hotkey.map(function (item) {
+    return item.replaceAll(keyName, replaceWith);
+  }) : hotkey.replaceAll(keyName, replaceWith);
+};
+var convertHotKeyToWindows = function convertHotKeyToWindows(hotkey) {
+  toPairs(MAC_TO_WINDOWS_KEYS_MAP).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      macKey = _ref2[0],
+      windowsKey = _ref2[1];
+    hotkey = replaceKeys(hotkey, macKey, windowsKey);
+  });
+  return hotkey;
+};
+export 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;
+  return convertHotKeyToWindows(hotkey);
+};
+export var shortenHotKey = function shortenHotKey(hotkey) {
+  var result = hotkey;
+  Object.entries(KEY_SHORTFORM_MAP).forEach(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      longform = _ref4[0],
+      shortform = _ref4[1];
+    result = result.replaceAll(longform, shortform);
+  });
+  return result;
+};
+export var getGlobalShortcuts = function getGlobalShortcuts() {
+  return _defineProperty({}, i18next.t("neetoMolecules.keyboardShortcuts.global.categoryName"), {
+    openKeyboardShortcutsPane: {
+      sequence: "shift+/",
+      description: i18next.t("neetoMolecules.keyboardShortcuts.global.openKeyboardShortcutsPane")
+    },
+    close: {
+      sequence: "esc",
+      description: i18next.t("neetoMolecules.keyboardShortcuts.global.close")
+    },
+    submitForm: {
+      sequence: "command+return",
+      description: i18next.t("neetoMolecules.keyboardShortcuts.global.submitForm")
+    }
+  });
+};
+export var getTooltipProps = function getTooltipProps(key) {
+  if (TOOLTIP_CONTENT[key]) {
+    return {
+      position: "top",
+      content: TOOLTIP_CONTENT[key],
+      followCursor: "horizontal"
+    };
+  }
+  return null;
+};