@canonical/react-components 0.47.0 → 0.47.2

package/dist/components/MainTable/MainTable.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,29 +11,12 @@ var _TableRow = _interopRequireDefault(require("../TableRow"));
 var _TableHeader = _interopRequireDefault(require("../TableHeader"));
 var _TableCell = _interopRequireDefault(require("../TableCell"));
 var _hooks = require("../../hooks");
-var _excluded = ["content", "sortKey"],
-  _excluded2 = ["columns", "expanded", "expandedContent", "key", "sortData"],
-  _excluded3 = ["content"],
-  _excluded4 = ["defaultSort", "defaultSortDirection", "emptyStateMsg", "expanding", "headers", "onUpdateSort", "paginate", "rows", "responsive", "sortable", "sortFunction", "hiddenCaption"];
-var _this = void 0;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _extends = 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.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var updateSort = function updateSort(setSortKey, setSortDirection, sortKey, sortDirection) {
-  var newDirection = null;
+const updateSort = (setSortKey, setSortDirection, sortKey, sortDirection) => {
+  let newDirection = null;
   if (sortDirection === "none") {
     newDirection = "ascending";
   } else if (sortDirection === "ascending") {
@@ -45,12 +27,14 @@ var updateSort = function updateSort(setSortKey, setSortDirection, sortKey, sort
   setSortKey(sortKey);
   setSortDirection(newDirection);
 };
-var generateHeaders = function generateHeaders(currentSortKey, currentSortDirection, expanding, headers, sortable, setSortKey, setSortDirection) {
-  var headerItems = headers.map(function (_ref, index) {
-    var content = _ref.content,
-      sortKey = _ref.sortKey,
-      props = _objectWithoutProperties(_ref, _excluded);
-    var sortDirection;
+const generateHeaders = (currentSortKey, currentSortDirection, expanding, headers, sortable, setSortKey, setSortDirection) => {
+  const headerItems = headers.map((_ref, index) => {
+    let {
+      content,
+      sortKey,
+      ...props
+    } = _ref;
+    let sortDirection;
     if (sortable && sortKey) {
       if (currentSortKey === sortKey) {
         sortDirection = currentSortDirection;
@@ -61,7 +45,7 @@ var generateHeaders = function generateHeaders(currentSortKey, currentSortDirect
     return /*#__PURE__*/_react.default.createElement(_TableHeader.default, _extends({
       key: index,
       sort: sortDirection,
-      onClick: sortable && sortKey ? updateSort.bind(_this, setSortKey, setSortDirection, sortKey, sortDirection) : undefined
+      onClick: sortable && sortKey ? updateSort.bind(void 0, setSortKey, setSortDirection, sortKey, sortDirection) : undefined
     }, props), content);
   });
   // When there is expanding content then provide an extra hidden header to
@@ -70,23 +54,29 @@ var generateHeaders = function generateHeaders(currentSortKey, currentSortDirect
     "aria-hidden": "true"
   })));
 };
-var generateRows = function generateRows(_ref2) {
-  var rows = _ref2.rows,
-    headers = _ref2.headers,
-    responsive = _ref2.responsive,
-    expanding = _ref2.expanding;
-  return rows.map(function (_ref3, index) {
-    var columns = _ref3.columns,
-      expanded = _ref3.expanded,
-      expandedContent = _ref3.expandedContent,
-      key = _ref3.key,
-      sortData = _ref3.sortData,
-      rowProps = _objectWithoutProperties(_ref3, _excluded2);
-    var cellItems = columns === null || columns === void 0 ? void 0 : columns.map(function (_ref4, index) {
-      var content = _ref4.content,
-        cellProps = _objectWithoutProperties(_ref4, _excluded3);
-      var headerContent = headers && headers[index]["content"];
-      var headerReplacement = headers && headers[index]["heading"];
+const generateRows = _ref2 => {
+  let {
+    rows,
+    headers,
+    responsive,
+    expanding
+  } = _ref2;
+  return rows.map((_ref3, index) => {
+    let {
+      columns,
+      expanded,
+      expandedContent,
+      key,
+      sortData,
+      ...rowProps
+    } = _ref3;
+    const cellItems = columns === null || columns === void 0 ? void 0 : columns.map((_ref4, index) => {
+      let {
+        content,
+        ...cellProps
+      } = _ref4;
+      const headerContent = headers && headers[index]["content"];
+      const headerReplacement = headers && headers[index]["heading"];
       if (responsive) {
         cellProps["data-heading"] = typeof headerContent === "string" ? headerContent : headerReplacement;
       }
@@ -109,20 +99,22 @@ var generateRows = function generateRows(_ref2) {
     }, expandedContent));
   });
 };
-var sortRows = function sortRows(_ref5) {
-  var currentSortDirection = _ref5.currentSortDirection,
-    currentSortKey = _ref5.currentSortKey,
-    rows = _ref5.rows,
-    sortable = _ref5.sortable,
-    sortFunction = _ref5.sortFunction;
+const sortRows = _ref5 => {
+  let {
+    currentSortDirection,
+    currentSortKey,
+    rows,
+    sortable,
+    sortFunction
+  } = _ref5;
   if (!rows) {
     return [];
   }
   // Clone the rows so we can restore the original order.
-  var sortedRows = _toConsumableArray(rows);
+  const sortedRows = [...rows];
   if (sortable && currentSortKey) {
     if (!sortFunction) {
-      sortFunction = function sortFunction(a, b) {
+      sortFunction = (a, b) => {
         if (!a.sortData || !b.sortData) {
           return 0;
         }
@@ -134,65 +126,57 @@ var sortRows = function sortRows(_ref5) {
         return 0;
       };
     }
-    sortedRows.sort(function (a, b) {
-      return sortFunction(a, b, currentSortDirection, currentSortKey);
-    });
+    sortedRows.sort((a, b) => sortFunction(a, b, currentSortDirection, currentSortKey));
   }
   return sortedRows;
 };
-var MainTable = function MainTable(_ref6) {
-  var defaultSort = _ref6.defaultSort,
-    defaultSortDirection = _ref6.defaultSortDirection,
-    _ref6$emptyStateMsg = _ref6.emptyStateMsg,
-    emptyStateMsg = _ref6$emptyStateMsg === void 0 ? "" : _ref6$emptyStateMsg,
-    expanding = _ref6.expanding,
-    headers = _ref6.headers,
-    onUpdateSort = _ref6.onUpdateSort,
-    paginate = _ref6.paginate,
-    rows = _ref6.rows,
-    responsive = _ref6.responsive,
-    sortable = _ref6.sortable,
-    sortFunction = _ref6.sortFunction,
-    hiddenCaption = _ref6.hiddenCaption,
-    props = _objectWithoutProperties(_ref6, _excluded4);
-  var _useState = (0, _react.useState)(defaultSort),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentSortKey = _useState2[0],
-    setSortKey = _useState2[1];
-  var _useState3 = (0, _react.useState)(defaultSortDirection),
-    _useState4 = _slicedToArray(_useState3, 2),
-    currentSortDirection = _useState4[0],
-    setSortDirection = _useState4[1];
+const MainTable = _ref6 => {
+  let {
+    defaultSort,
+    defaultSortDirection,
+    emptyStateMsg = "",
+    expanding,
+    headers,
+    onUpdateSort,
+    paginate,
+    rows,
+    responsive,
+    sortable,
+    sortFunction,
+    hiddenCaption,
+    ...props
+  } = _ref6;
+  const [currentSortKey, setSortKey] = (0, _react.useState)(defaultSort);
+  const [currentSortDirection, setSortDirection] = (0, _react.useState)(defaultSortDirection);
 
   // Update the current sort state if the prop changes.
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     setSortKey(defaultSort);
   }, [defaultSort]);
 
   // Update the current sort direction state if the prop changes.
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     setSortDirection(defaultSortDirection);
   }, [defaultSortDirection]);
-  var updateSort = function updateSort(newSort) {
+  const updateSort = newSort => {
     setSortKey(newSort);
     onUpdateSort && onUpdateSort(newSort);
   };
-  var sortedRows = (0, _react.useMemo)(function () {
-    return sortRows({
-      currentSortDirection: currentSortDirection,
-      currentSortKey: currentSortKey,
-      rows: rows,
-      sortable: sortable,
-      sortFunction: sortFunction
-    });
-  }, [currentSortDirection, currentSortKey, rows, sortable, sortFunction]);
-  var _usePagination = (0, _hooks.usePagination)(sortedRows, {
-      itemsPerPage: paginate,
-      autoResetPage: true
-    }),
-    finalRows = _usePagination.pageData,
-    currentPage = _usePagination.currentPage,
-    setCurrentPage = _usePagination.paginate;
+  const sortedRows = (0, _react.useMemo)(() => sortRows({
+    currentSortDirection,
+    currentSortKey,
+    rows,
+    sortable,
+    sortFunction
+  }), [currentSortDirection, currentSortKey, rows, sortable, sortFunction]);
+  const {
+    pageData: finalRows,
+    currentPage,
+    paginate: setCurrentPage
+  } = (0, _hooks.usePagination)(sortedRows, {
+    itemsPerPage: paginate,
+    autoResetPage: true
+  });
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Table.default, _extends({
     expanding: expanding,
     responsive: responsive
@@ -210,9 +194,9 @@ var MainTable = function MainTable(_ref6) {
   // If the table has no rows, return empty state message
   Object.entries(finalRows).length === 0 && emptyStateMsg ? /*#__PURE__*/_react.default.createElement("caption", null, emptyStateMsg) : /*#__PURE__*/_react.default.createElement("tbody", null, generateRows({
     rows: finalRows,
-    headers: headers,
-    responsive: responsive,
-    expanding: expanding
+    headers,
+    responsive,
+    expanding
   }))), paginate && rows && rows.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.default, {
     currentPage: currentPage,
     itemsPerPage: paginate,
@@ -223,5 +207,4 @@ var MainTable = function MainTable(_ref6) {
     totalItems: rows.length
   }));
 };
-var _default = MainTable;
-exports.default = _default;
+var _default = exports.default = MainTable;

package/dist/components/MainTable/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _MainTable.default;
   }
 });

package/dist/components/Modal/Modal.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,32 +7,31 @@ exports.default = exports.Modal = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _useId = require("../../hooks/useId");
-var _excluded = ["buttonRow", "children", "className", "close", "title"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = 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.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var Modal = function Modal(_ref) {
-  var buttonRow = _ref.buttonRow,
-    children = _ref.children,
-    className = _ref.className,
-    close = _ref.close,
-    title = _ref.title,
-    wrapperProps = _objectWithoutProperties(_ref, _excluded);
+const Modal = _ref => {
+  let {
+    buttonRow,
+    children,
+    className,
+    close,
+    title,
+    ...wrapperProps
+  } = _ref;
   // list of focusable selectors is based on this Stack Overflow answer:
   // https://stackoverflow.com/a/30753870/3732840
-  var focusableElementSelectors = 'a[href]:not([tabindex="-1"]), button:not([disabled]), textarea:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), area[href]:not([tabindex="-1"]), iframe:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), [contentEditable=true]:not([tabindex="-1"])';
-  var descriptionId = (0, _useId.useId)();
-  var titleId = (0, _useId.useId)();
-  var shouldClose = (0, _react.useRef)(false);
-  var modalRef = (0, _react.useRef)(null);
-  var focusableModalElements = (0, _react.useRef)(null);
-  var handleTabKey = function handleTabKey(e) {
+  const focusableElementSelectors = 'a[href]:not([tabindex="-1"]), button:not([disabled]), textarea:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), area[href]:not([tabindex="-1"]), iframe:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), [contentEditable=true]:not([tabindex="-1"])';
+  const descriptionId = (0, _useId.useId)();
+  const titleId = (0, _useId.useId)();
+  const shouldClose = (0, _react.useRef)(false);
+  const modalRef = (0, _react.useRef)(null);
+  const focusableModalElements = (0, _react.useRef)(null);
+  const handleTabKey = e => {
     if (focusableModalElements.current.length > 0) {
-      var firstElement = focusableModalElements.current[0];
-      var lastElement = focusableModalElements.current[focusableModalElements.current.length - 1];
+      const firstElement = focusableModalElements.current[0];
+      const lastElement = focusableModalElements.current[focusableModalElements.current.length - 1];
       if (!e.shiftKey && document.activeElement === lastElement) {
         firstElement.focus();
         e.preventDefault();
@@ -44,46 +42,54 @@ var Modal = function Modal(_ref) {
       }
     }
   };
-  var handleEscKey = function handleEscKey(e) {
-    e.nativeEvent.stopImmediatePropagation();
+  const handleEscKey = e => {
+    if ("nativeEvent" in e && e.nativeEvent.stopImmediatePropagation) {
+      e.nativeEvent.stopImmediatePropagation();
+    } else if ("stopImmediatePropagation" in e) {
+      e.stopImmediatePropagation();
+    } else if (e.stopPropagation) {
+      e.stopPropagation();
+    }
     close();
   };
-  var keyListenersMap = new Map([["Escape", handleEscKey], ["Tab", handleTabKey]]);
-  (0, _react.useEffect)(function () {
+  const keyListenersMap = new Map([["Escape", handleEscKey], ["Tab", handleTabKey]]);
+  (0, _react.useEffect)(() => {
     modalRef.current.focus();
   }, [modalRef]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     var _focusableModalElemen;
     focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
-    var focusIndex = 0;
+    let focusIndex = 0;
     // when the close button is rendered, focus on the 2nd content element and not the close btn.
     if (close && focusableModalElements.current.length > 1) {
       focusIndex = 1;
     }
-    (_focusableModalElemen = focusableModalElements.current[focusIndex]) === null || _focusableModalElemen === void 0 ? void 0 : _focusableModalElemen.focus();
-  }, []);
-  (0, _react.useEffect)(function () {
-    var keyDown = function keyDown(e) {
-      var listener = keyListenersMap.get(e.code);
+    (_focusableModalElemen = focusableModalElements.current[focusIndex]) === null || _focusableModalElemen === void 0 || _focusableModalElemen.focus({
+      preventScroll: true
+    });
+  }, [close]);
+  (0, _react.useEffect)(() => {
+    const keyDown = e => {
+      const listener = keyListenersMap.get(e.code);
       return listener && listener(e);
     };
     document.addEventListener("keydown", keyDown);
-    return function () {
+    return () => {
       document.removeEventListener("keydown", keyDown);
     };
   });
-  var handleContentOnMouseDown = function handleContentOnMouseDown() {
+  const handleContentOnMouseDown = () => {
     shouldClose.current = false;
   };
-  var handleContentOnMouseUp = function handleContentOnMouseUp() {
+  const handleContentOnMouseUp = () => {
     shouldClose.current = false;
   };
-  var handleOverlayOnMouseDown = function handleOverlayOnMouseDown(event) {
+  const handleOverlayOnMouseDown = event => {
     if (event.target === modalRef.current) {
       shouldClose.current = true;
     }
   };
-  var handleOverlayOnClick = function handleOverlayOnClick() {
+  const handleOverlayOnClick = () => {
     if (shouldClose.current) {
       close();
     }
@@ -118,5 +124,4 @@ var Modal = function Modal(_ref) {
   }, buttonRow)));
 };
 exports.Modal = Modal;
-var _default = Modal;
-exports.default = _default;
+var _default = exports.default = Modal;

package/dist/components/Modal/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Modal.default;
   }
 });