@enact/limestone 1.3.0

package/Popup/Popup.module.css

@@ -0,0 +1,180 @@
+.popup {
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  border-radius: 0.5rem;
+}
+.popup .body {
+  font-family: "Limestone";
+  font-weight: normal;
+  font-size: var(--primitive-font-size-60);
+  line-height: 1.4em;
+  padding: 1rem 1.5rem;
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+:global(.enact-locale-non-latin) .popup .body {
+  font-family: "Limestone";
+  font-weight: var(--primitive-font-weight-regular);
+}
+:global(.enact-locale-km) .popup .body {
+  line-height: 1.7em;
+}
+:global(.enact-locale-si) .popup .body {
+  line-height: 1.7em;
+}
+:global(.enact-locale-th) .popup .body {
+  line-height: 1.7em;
+}
+:global(.enact-locale-vi) .popup .body {
+  line-height: 1.7em;
+}
+:global(.enact-locale-right-to-left) .popup .body {
+  padding: 1rem 1.5rem 1rem 1.5rem;
+}
+:global(.enact-locale-ja) .popup .body {
+  line-break: strict;
+}
+.popup.bottom .body,
+.popup.top .body {
+  max-width: 100%;
+}
+.popup.left .body,
+.popup.right .body {
+  height: 100%;
+}
+.popup.top {
+  margin: 3.125rem 2.5rem 1.625rem 2.5rem;
+}
+.popup.top.left,
+.popup.top.right {
+  margin: 1.25rem;
+}
+.popup.right {
+  margin: 2.5rem 1.25rem 2.5rem 0.75rem;
+  max-height: calc(100% - 5rem );
+}
+.popup.bottom {
+  margin: 0 2.5rem 3.125rem 2.5rem;
+}
+.popup.bottom.left,
+.popup.bottom.right {
+  margin: 1.25rem;
+}
+.popup.left {
+  margin: 2.5rem 0.75rem 2.5rem 1.25rem;
+  max-height: calc(100% - 5rem );
+}
+.popup.center {
+  position: absolute;
+  height: auto;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.popup.fullscreen {
+  border-radius: 0;
+}
+.popup.fullscreen .body {
+  height: 100%;
+  width: 100%;
+}
+.popup:global(.neutral) {
+  background-color: color(from var(--semantic-color-background-overlay-default) srgb r g b / 0.9);
+}
+.popup:global(.neutral).outline {
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+:global(.enact-a11y-high-contrast) .popup:global(.neutral):global(.highContrast) {
+  background-color: var(--semantic-color-background-overlay-default);
+}
+:global(.enact-a11y-high-contrast) .popup:global(.neutral):global(.highContrast).outline {
+  outline-color: #7c848b;
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+.popup:global(.light) {
+  background-color: color(from var(--semantic-color-background-overlay-default) srgb r g b / 0.9);
+}
+.popup:global(.light).outline {
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+.popup:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+  background-color: color(from var(--semantic-color-background-overlay-default) srgb r g b / 0.9);
+}
+.popup:global(.game).outline {
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+:global(.green) .popup:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+  background-color: color(from var(--semantic-color-background-overlay-default) srgb r g b / 0.9);
+}
+:global(.green) .popup:global(.game).outline {
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+:global(.orange) .popup:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+  background-color: color(from var(--semantic-color-background-overlay-default) srgb r g b / 0.9);
+}
+:global(.orange) .popup:global(.game).outline {
+  outline-color: var(--semantic-color-stroke-overlay-default);
+  outline-style: solid;
+  outline-width: 0.021rem;
+  outline-offset: -0.021rem;
+}
+.popupTransitionContainer {
+  position: absolute;
+  pointer-events: none;
+}
+.popupTransitionContainer.bottom:not(.left, .right),
+.popupTransitionContainer.top:not(.left, .right) {
+  width: 100%;
+}
+.popupTransitionContainer.left:not(.bottom, .top),
+.popupTransitionContainer.right:not(.bottom, .top) {
+  height: 100%;
+}
+.popupTransitionContainer.left .inner,
+.popupTransitionContainer.right .inner {
+  height: 100%;
+}
+.popupTransitionContainer.bottom {
+  bottom: 0;
+}
+.popupTransitionContainer.left {
+  left: 0;
+}
+.popupTransitionContainer.right {
+  right: 0;
+}
+.popupTransitionContainer.top {
+  top: 0;
+}
+.popupTransitionContainer.center,
+.popupTransitionContainer.fullscreen {
+  height: 100%;
+  width: 100%;
+}
+.popupTransitionContainer.center .inner,
+.popupTransitionContainer.fullscreen .inner {
+  height: 100%;
+  width: 100%;
+}

package/Popup/package.json

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

package/Popup/tests/Popup-specs.js

@@ -0,0 +1,475 @@
+"use strict";
+
+var _FloatingLayer = require("@enact/ui/FloatingLayer");
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _Popup = require("../Popup");
+var _jsxRuntime = require("react/jsx-runtime");
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+var FloatingLayerController = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+describe('Popup specs', function () {
+  test('should be rendered opened if open is set to true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popup"
+        })
+      })
+    }));
+    var popup = _react.screen.getByText('popup');
+    expect(popup).toBeInTheDocument();
+  });
+  test('should not be rendered if open is set to false', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popup"
+        })
+      })
+    }));
+    var popup = _react.screen.queryByText('popup');
+    expect(popup).toBeNull();
+  });
+  test('should set role to alert by default', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popup"
+        })
+      })
+    }));
+    var popup = _react.screen.getByRole('alert');
+    expect(popup).toBeInTheDocument();
+  });
+  test('should allow role to be overridden', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+        open: true,
+        role: "dialog",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popup"
+        })
+      })
+    }));
+    var popup = _react.screen.getByRole('dialog');
+    expect(popup).toBeInTheDocument();
+  });
+  test('should set "data-webos-voice-exclusive" when popup is open', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popup"
+        })
+      })
+    }));
+    var popup = _react.screen.getByRole('alert');
+    expect(popup).toHaveAttribute('data-webos-voice-exclusive');
+  });
+  test('should set "data-webos-voice-disabled" when voice control is disabled', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+        "data-webos-voice-disabled": true,
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popup"
+        })
+      })
+    }));
+    var popup = _react.screen.getByRole('alert');
+    expect(popup).toHaveAttribute('data-webos-voice-disabled');
+  });
+  test('should fire onClose event with type and detail info when Popup is closed', function () {
+    var handleClose = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+        onClose: handleClose,
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popup"
+        })
+      })
+    }));
+    _react.fireEvent.keyUp(_react.screen.getByText('popup'), {
+      keyCode: 27
+    });
+    var expectedType = {
+      type: 'onClose',
+      detail: {
+        inputType: 'key'
+      }
+    };
+    var actual = handleClose.mock.calls.length && handleClose.mock.calls[0][0];
+    expect(actual).toMatchObject(expectedType);
+  });
+  describe('with position bottom', function () {
+    test('should have bottom class', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "bottom",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      var popup = _react.screen.getByRole('alert');
+      expect(popup).toHaveClass('bottom');
+    });
+    test('should have bottom class in popup transition container', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "bottom",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
+      expect(transitionContainer).toHaveClass('bottom');
+    });
+  });
+  describe('with position left', function () {
+    test('should have left class', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "left",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      var popup = _react.screen.getByRole('alert');
+      expect(popup).toHaveClass('left');
+    });
+    test('should have left class in popup transition container', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "left",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
+      expect(transitionContainer).toHaveClass('left');
+    });
+  });
+  describe('with position right', function () {
+    test('should have right class', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "right",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      var popup = _react.screen.getByRole('alert');
+      expect(popup).toHaveClass('right');
+    });
+    test('should have right class in popup transition container', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "right",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
+      expect(transitionContainer).toHaveClass('right');
+    });
+  });
+  describe('with position top', function () {
+    test('should have top class', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "top",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      var popup = _react.screen.getByRole('alert');
+      expect(popup).toHaveClass('top');
+    });
+    test('should have top class popup transition container', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "top",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
+      expect(transitionContainer).toHaveClass('top');
+    });
+  });
+  describe('with position center', function () {
+    test('should have center class', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      var popup = _react.screen.getByRole('alert');
+      expect(popup).toHaveClass('center');
+    });
+    test('should have center class popup transition container', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
+      expect(transitionContainer).toHaveClass('center');
+    });
+  });
+  describe('with position fullscreen', function () {
+    test('should have fullscreen class', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "fullscreen",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      var popup = _react.screen.getByRole('alert');
+      expect(popup).toHaveClass('fullscreen');
+    });
+    test('should have fullscreen class popup transition container', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "fullscreen",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
+      expect(transitionContainer).toHaveClass('fullscreen');
+    });
+  });
+  describe('with position changes dynamically - [GT-28270]', function () {
+    test('should not have top class when position change from top to any other position', function () {
+      var firstPosition = 'top';
+      var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+            open: true,
+            position: firstPosition,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: "popup"
+            })
+          })
+        })),
+        rerender = _render.rerender;
+      var popup = _react.screen.getByRole('alert');
+      var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
+      expect(popup).toHaveClass(firstPosition);
+      expect(transitionContainer).toHaveClass(firstPosition);
+      expect(popup).not.toHaveClass('fullscreen');
+      expect(transitionContainer).not.toHaveClass('fullscreen');
+      expect(popup).not.toHaveClass('center');
+      expect(transitionContainer).not.toHaveClass('center');
+      expect(popup).not.toHaveClass('bottom');
+      expect(transitionContainer).not.toHaveClass('bottom');
+      expect(popup).not.toHaveClass('right');
+      expect(transitionContainer).not.toHaveClass('right');
+      expect(popup).not.toHaveClass('left');
+      expect(transitionContainer).not.toHaveClass('left');
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "fullscreen",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      expect(popup).not.toHaveClass(firstPosition);
+      expect(transitionContainer).not.toHaveClass(firstPosition);
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      expect(popup).not.toHaveClass(firstPosition);
+      expect(transitionContainer).not.toHaveClass(firstPosition);
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "bottom",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      expect(popup).not.toHaveClass(firstPosition);
+      expect(transitionContainer).not.toHaveClass(firstPosition);
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "left",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      expect(popup).not.toHaveClass(firstPosition);
+      expect(transitionContainer).not.toHaveClass(firstPosition);
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          position: "right",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      }));
+      expect(popup).not.toHaveClass(firstPosition);
+      expect(transitionContainer).not.toHaveClass(firstPosition);
+    });
+  });
+  test('should apply `ease-in-out` class to transition container when noAnimation is false', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+        noAnimation: false,
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popup"
+        })
+      })
+    }));
+    var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
+    var expected = 'ease-in-out';
+    expect(transitionContainer).toHaveClass(expected);
+  });
+  test('should apply \'shown\' class when visible with noAnimation', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+        noAnimation: true,
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popup"
+        })
+      })
+    }));
+    var expected = 'shown';
+    var actual = _react.screen.getByRole('alert').parentElement.parentElement;
+    expect(actual).toHaveClass(expected);
+  });
+  test('should close popup on escape', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleClose = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+        open: true,
+        onClose: handleClose,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popup"
+        })
+      })
+    }));
+    _react.fireEvent.keyUp(_react.screen.getByText('popup'), {
+      keyCode: 27
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(handleClose).toHaveBeenCalled();
+    });
+  }));
+  test('should call onShow after popup with noAnimation is opened', function () {
+    var handleShow = jest.fn();
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          noAnimation: true,
+          onShow: handleShow,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      })),
+      rerender = _render2.rerender;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+        noAnimation: true,
+        onShow: handleShow,
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popup"
+        })
+      })
+    }));
+    expect(handleShow).toHaveBeenCalled();
+  });
+  test('should call onHide after popup with noAnimation is closed', function () {
+    var handleHide = jest.fn();
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          noAnimation: true,
+          onHide: handleHide,
+          open: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      })),
+      rerender = _render3.rerender;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+        noAnimation: true,
+        onHide: handleHide,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popup"
+        })
+      })
+    }));
+    expect(handleHide).toHaveBeenCalled();
+  });
+  test('should apply `hidden` class when popup closes', function () {
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+          open: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "popup"
+          })
+        })
+      })),
+      rerender = _render4.rerender;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "popup"
+        })
+      })
+    }));
+    var transitionContainer = _react.screen.getByRole('alert').parentElement.parentElement;
+    var expected = 'hidden';
+    expect(transitionContainer).toHaveClass(expected);
+  });
+});