@enact/limestone 1.3.0

package/FixedPopupPanels/FixedPopupPanels.d.ts

@@ -0,0 +1,72 @@
+// Type definitions for limestone/FixedPopupPanels
+
+import * as React from "react";
+import { PanelProps as limestone_Panels_PanelProps } from "limestone/Panels";
+import { HeaderProps as limestone_Panels_HeaderProps } from "limestone/Panels";
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+
+export interface FixedPopupPanelsDecoratorProps {}
+export function FixedPopupPanelsDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & FixedPopupPanelsDecoratorProps>;
+
+export interface FixedPopupPanelsBaseProps {}
+/**
+ * A base panels component for    that has
+left key handler to navigate panels.
+ */
+
+export class FixedPopupPanelsBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, FixedPopupPanelsBaseProps>
+> {}
+
+export interface FixedPopupPanelsProps
+  extends Merge<FixedPopupPanelsBaseProps, FixedPopupPanelsDecoratorProps> {
+  /**
+   * Size of the popup.
+   */
+  width?: "narrow" | "half";
+}
+/**
+ * An instance of    which restricts the  `Panel`  to the right
+or left side of the screen inside a popup. Typically used for overlaying panels over other
+content.
+ */
+
+export class FixedPopupPanels extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, FixedPopupPanelsProps>
+> {
+  /**
+   * A shortcut to access
+   */
+  Panel: Panel;
+
+  /**
+   * A shortcut to access
+   */
+  Header: Header;
+}
+
+export interface PanelProps extends limestone_Panels_PanelProps {}
+/**
+ * The standard view container used inside a
+   view manager instance.
+ */
+
+export class Panel extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, PanelProps>
+> {}
+
+export interface HeaderProps extends limestone_Panels_HeaderProps {}
+/**
+ * A header component for a Panel with a  `title`  and  `subtitle` , supporting several configurable
+   for components.
+ */
+
+export class Header extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, HeaderProps>
+> {}
+
+export default FixedPopupPanels;

package/FixedPopupPanels/FixedPopupPanels.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Panel = exports.Header = exports.FixedPopupPanelsDecorator = exports.FixedPopupPanelsBase = exports.FixedPopupPanels = void 0;
+var _handle = require("@enact/core/handle");
+var _useHandlers = _interopRequireDefault(require("@enact/core/useHandlers"));
+var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _target = require("@enact/spotlight/src/target");
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _Panels = require("../internal/Panels");
+var _Panel = _interopRequireDefault(require("../Panels/Panel"));
+var _Header = _interopRequireDefault(require("../Panels/Header"));
+var _FixedPopupPanelsModule = _interopRequireDefault(require("./FixedPopupPanels.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["noAnimation"];
+/**
+ * Provides Limestone styled fixed-width, popup-styled Panels component.
+ *
+ * @module limestone/FixedPopupPanels
+ * @exports FixedPopupPanels
+ * @exports FixedPopupPanelsBase
+ * @exports FixedPopupPanelsDecorator
+ * @exports Panel
+ * @exports Header
+ */
+/**
+ * Adds popup functionality and `rtl` prop to {@link limestone/FixedPopupPanels|FixedPopupPanels}.
+ *
+ * @class FixedPopupPanelsDecorator
+ * @memberof limestone/FixedPopupPanels
+ * @hoc
+ * @public
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var FixedPopupPanelsDecorator = exports.FixedPopupPanelsDecorator = (0, _compose["default"])((0, _I18nDecorator.I18nContextDecorator)({
+  rtlProp: 'rtl'
+}), (0, _Panels.PopupDecorator)({
+  className: 'fixedPopupPanels',
+  css: _FixedPopupPanelsModule["default"],
+  noAlertRole: true,
+  noOutline: true,
+  panelArranger: _Panels.BasicArranger,
+  panelType: 'fixedPopup'
+}));
+var fixedPopupPanelsHandlers = {
+  onKeyDown: (0, _handle.handle)((0, _handle.forward)('onKeyDown'), function (_ref) {
+    var target = _ref.target;
+    return target.tagName !== 'INPUT';
+  }, (0, _handle.forProp)('rtl', false), (0, _handle.forKey)('left'), function (ev, _ref2) {
+    var index = _ref2.index;
+    return index > 0;
+  }, function (_ref3) {
+    var target = _ref3.target;
+    return document.querySelector("section.".concat(_FixedPopupPanelsModule["default"].body)).contains(target);
+  }, function (_ref4) {
+    var target = _ref4.target;
+    return (0, _target.getTargetByDirectionFromElement)('left', target) === null;
+  }, (0, _handle.forwardCustom)('onBack'), function () {
+    _spotlight["default"].setPointerMode(false);
+    return true;
+  }, _handle.preventDefault, _handle.stop)
+};
+
+/**
+ * A base panels component for {@link limestone/FixedPopupPanels|FixedPopupPanels} that has
+ * left key handler to navigate panels.
+ *
+ * @class FixedPopupPanelsBase
+ * @memberof limestone/FixedPopupPanels
+ * @ui
+ * @public
+ */
+var FixedPopupPanelsBase = exports.FixedPopupPanelsBase = function FixedPopupPanelsBase(_ref5) {
+  var noAnimation = _ref5.noAnimation,
+    props = _objectWithoutProperties(_ref5, _excluded);
+  var handlers = (0, _useHandlers["default"])(fixedPopupPanelsHandlers, props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels.Viewport, _objectSpread(_objectSpread(_objectSpread({}, props), handlers), {}, {
+    noAnimation: typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION || noAnimation
+  }));
+};
+
+/**
+ * An instance of {@link limestone/Panels.Panels|Panels} which restricts the `Panel` to the right
+ * or left side of the screen inside a popup. Typically used for overlaying panels over other
+ * content.
+ *
+ * @class FixedPopupPanels
+ * @memberof limestone/FixedPopupPanels
+ * @extends limestone/FixedPopupPanels.FixedPopupPanelsBase
+ * @mixes limestone/FixedPopupPanels.FixedPopupPanelsDecorator
+ * @ui
+ * @public
+ */
+var FixedPopupPanels = exports.FixedPopupPanels = FixedPopupPanelsDecorator(FixedPopupPanelsBase);
+
+/**
+ * Size of the popup.
+ *
+ * @memberof limestone/FixedPopupPanels.FixedPopupPanels.prototype
+ * @name width
+ * @type {('narrow'|'half')}
+ * @default 'narrow'
+ * @public
+ */
+
+/**
+ * The standard view container used inside a
+ * {@link limestone/FixedPopupPanels.FixedPopupPanels|FixedPopupPanels} view manager instance.
+ *
+ * @class Panel
+ * @extends limestone/Panels.Panel
+ * @memberof limestone/FixedPopupPanels
+ * @ui
+ * @public
+ */
+var Panel = exports.Panel = function Panel(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], _objectSpread(_objectSpread({}, props), {}, {
+    css: _FixedPopupPanelsModule["default"],
+    hideChildren: false
+  }));
+};
+
+/**
+ * A shortcut to access {@link limestone/FixedPopupPanels.Panel}
+ *
+ * @name Panel
+ * @static
+ * @memberof limestone/FixedPopupPanels.FixedPopupPanels
+ */
+FixedPopupPanels.Panel = Panel;
+
+/**
+ * A header component for a Panel with a `title` and `subtitle`, supporting several configurable
+ * {@link ui/Slottable.Slottable|`slots`} for components.
+ *
+ * @class Header
+ * @extends limestone/Panels.Header
+ * @memberof limestone/FixedPopupPanels
+ * @ui
+ * @public
+ */
+var Header = exports.Header = function Header(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], _objectSpread(_objectSpread({
+    type: "compact"
+  }, props), {}, {
+    css: _FixedPopupPanelsModule["default"]
+  }));
+};
+// Relay the defaultSlot property to our version of Header
+Header.defaultSlot = _Header["default"].defaultSlot;
+
+/**
+ * A shortcut to access {@link limestone/FixedPopupPanels.Header}
+ *
+ * @name Header
+ * @static
+ * @memberof limestone/FixedPopupPanels.FixedPopupPanels
+ */
+FixedPopupPanels.Header = Header;
+var _default = exports["default"] = FixedPopupPanels;

package/FixedPopupPanels/FixedPopupPanels.module.css

@@ -0,0 +1,146 @@
+.fixedPopupPanels {
+  position: relative;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  max-height: 100%;
+}
+.fixedPopupPanels .viewport {
+  position: static;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  pointer-events: auto;
+}
+.fixedPopupPanels.fullHeight .viewport {
+  height: 100%;
+}
+.fixedPopupPanels.narrow {
+  width: 25rem;
+}
+.fixedPopupPanels.half {
+  width: 35.75rem;
+}
+.fixedPopupPanels > .body {
+  pointer-events: inherit;
+  padding: 0;
+}
+:global(.enact-locale-right-to-left) .fixedPopupPanels > .body {
+  padding: 0;
+}
+.fixedPopupPanels.popup {
+  margin: 1.25rem 1.25rem 2.75rem;
+  max-height: calc(100vh - 4rem );
+}
+.fixedPopupPanels.popup.left {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+.fixedPopupPanels:global(.neutral) {
+  background-color: transparent;
+}
+.fixedPopupPanels:global(.neutral) .viewport {
+  background-color: var(--semantic-color-background-overlay-default);
+  border-radius: var(--semantic-radius-overlay);
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-width: 0.021rem;
+  outline-style: solid;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) .fixedPopupPanels:global(.neutral) .viewport {
+  box-shadow: none;
+}
+:global(.enact-a11y-high-contrast) .fixedPopupPanels:global(.neutral):global(.highContrast) {
+  background-color: transparent;
+}
+:global(.enact-a11y-high-contrast) .fixedPopupPanels:global(.neutral):global(.highContrast) .viewport {
+  background-color: var(--semantic-color-background-overlay-default);
+  border-radius: var(--semantic-radius-overlay);
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: #7c848b;
+  outline-width: 0.021rem;
+  outline-style: solid;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) :global(.enact-a11y-high-contrast) .fixedPopupPanels:global(.neutral):global(.highContrast) .viewport {
+  box-shadow: none;
+}
+.fixedPopupPanels:global(.light) {
+  background-color: transparent;
+}
+.fixedPopupPanels:global(.light) .viewport {
+  background-color: var(--semantic-color-background-overlay-default);
+  border-radius: var(--semantic-radius-overlay);
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-width: 0.021rem;
+  outline-style: solid;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) .fixedPopupPanels:global(.light) .viewport {
+  box-shadow: none;
+}
+.fixedPopupPanels:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+  background-color: transparent;
+}
+.fixedPopupPanels:global(.game) .viewport {
+  background-color: var(--semantic-color-background-overlay-default);
+  border-radius: var(--semantic-radius-overlay);
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-width: 0.021rem;
+  outline-style: solid;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) .fixedPopupPanels:global(.game) .viewport {
+  box-shadow: none;
+}
+:global(.green) .fixedPopupPanels:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+  background-color: transparent;
+}
+:global(.green) .fixedPopupPanels:global(.game) .viewport {
+  background-color: var(--semantic-color-background-overlay-default);
+  border-radius: var(--semantic-radius-overlay);
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-width: 0.021rem;
+  outline-style: solid;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) :global(.green) .fixedPopupPanels:global(.game) .viewport {
+  box-shadow: none;
+}
+:global(.orange) .fixedPopupPanels:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+  background-color: transparent;
+}
+:global(.orange) .fixedPopupPanels:global(.game) .viewport {
+  background-color: var(--semantic-color-background-overlay-default);
+  border-radius: var(--semantic-radius-overlay);
+  box-shadow: 0 0.75rem 1rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-width: 0.021rem;
+  outline-style: solid;
+  outline-offset: -0.021rem;
+}
+:global(.noAnimation) :global(.orange) .fixedPopupPanels:global(.game) .viewport {
+  box-shadow: none;
+}
+.panel {
+  max-height: calc(100vh - 4rem );
+}
+.panel > .body {
+  display: flex;
+  flex-direction: column;
+  padding: var(--primitive-spacing-60);
+  flex: 1 1 auto;
+}

package/FixedPopupPanels/package.json

@@ -0,0 +1,3 @@
+{
+	"main": "FixedPopupPanels.js"
+}

package/FixedPopupPanels/tests/FixedPopupPanels-specs.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _FloatingLayer = require("@enact/ui/FloatingLayer");
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _react2 = require("react");
+var _Item = _interopRequireDefault(require("../../Item"));
+var _Panels = require("../../Panels");
+var _FixedPopupPanels = _interopRequireDefault(require("../FixedPopupPanels"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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 _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var keyDown = function keyDown(keyCode) {
+  return function (elm) {
+    return _react.fireEvent.keyDown(elm, {
+      keyCode: keyCode
+    });
+  };
+};
+var leftKeyDown = keyDown(37);
+var FloatingLayerController = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+var CustomFixedPopupPanels = function CustomFixedPopupPanels(_ref) {
+  var defaultIndex = _ref.defaultIndex;
+  var _useState = (0, _react2.useState)(defaultIndex),
+    _useState2 = _slicedToArray(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FixedPopupPanels["default"], {
+      index: index,
+      open: true,
+      rtl: false,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels.Panel, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels.Header, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+            children: "This is the first panel"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item["default"], {
+          children: "Example Item 1"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item["default"], {
+          children: "Example Item 2"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels.Panel, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels.Header, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+            children: "This is the second panel"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item["default"], {
+          onKeyDown: function onKeyDown() {
+            return setIndex(index - 1);
+          },
+          children: "Example Item 1 on Panel 2"
+        })]
+      })]
+    })
+  });
+};
+describe('FixedPopupPanels', function () {
+  test('should have the default width when nothing is assigned', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FixedPopupPanels["default"], {
+        "data-testid": "panels-id",
+        open: true
+      })
+    }));
+    var expected = 'narrow';
+    var actual = _react.screen.getByTestId('panels-id').parentElement.parentElement;
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have narrow width applied when width="narrow"', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FixedPopupPanels["default"], {
+        "data-testid": "panels-id",
+        open: true,
+        width: "narrow"
+      })
+    }));
+    var expected = 'narrow';
+    var actual = _react.screen.getByTestId('panels-id').parentElement.parentElement;
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have half width applied when width="half"', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FixedPopupPanels["default"], {
+        "data-testid": "panels-id",
+        open: true,
+        width: "half"
+      })
+    }));
+    var expected = 'half';
+    var actual = _react.screen.getByTestId('panels-id').parentElement.parentElement;
+    expect(actual).toHaveClass(expected);
+  });
+  test('should correctly assign the fullHeight class', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FixedPopupPanels["default"], {
+        "data-testid": "panels-id",
+        fullHeight: true,
+        open: true
+      })
+    }));
+    var expected = 'fullHeight';
+    var actual = _react.screen.getByTestId('panels-id').parentElement.parentElement;
+    expect(actual).toHaveClass(expected);
+  });
+  test('should close on back key', function () {
+    var map = {};
+    window.addEventListener = jest.fn(function (event, cb) {
+      map[event] = cb;
+    });
+    var handleClose = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FixedPopupPanels["default"], {
+        onClose: handleClose,
+        open: true
+      })
+    }));
+    map.keyup({
+      type: 'keyup',
+      currentTarget: window,
+      keyCode: 27
+    });
+    var expectedEvent = {
+      type: 'onClose'
+    };
+    var actualEvent = handleClose.mock.calls.length && handleClose.mock.calls[0][0];
+    expect(handleClose).toHaveBeenCalled();
+    expect(actualEvent).toMatchObject(expectedEvent);
+  });
+  test('should navigate to the first panel on arrow left key', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomFixedPopupPanels, {
+      defaultIndex: 1
+    }));
+    leftKeyDown(_react.screen.getByText('Example Item 1 on Panel 2'));
+    expect(_react.screen.getByText('This is the first panel')).toBeInTheDocument();
+  });
+});