@atlaskit/top-layer 5.0.1 → 5.0.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/top-layer
 
+## 5.0.2
+
+### Patch Changes
+
+- [`e8dcde6cc4e85`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e8dcde6cc4e85) -
+  Anchored Popovers now always stay visible, even if the element they are anchored to is invisible
+
 ## 5.0.1
 
 ### Patch Changes

package/dist/cjs/dialog/dialog-content.js

@@ -1,4 +1,4 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/internal/anchor-positioning/apply-anchor-positioning.js

@@ -57,6 +57,38 @@ function applyAnchorPositioning(_ref) {
       placement: placement
     })
   },
+  /**
+   * **`position-visibility: always`**
+   *
+   * `position-visibility` is used to control the visibility of an anchored
+   * popover based on the visibility of the element being anchored to (the target).
+   *
+   * Default `position-visibility` value: `anchors-visible` → hide the anchored
+   * popover when the target is fully clipped by an ancestor (eg a scroll container)
+   * or is `visibility:hidden`.
+   * Sadly this "automatic hiding" does not actually "close" the popover,
+   * so things like `:popover-open` are still active, even though the popover
+   * is no longer painted and no longer receives pointer input. Chrome keeps it
+   * focusable and in the accessibility tree, so keyboard and screen reader users
+   * can still land inside a surface that is not painted.
+   * Per-engine behaviour: `notes/decisions/position-visibility-always.md`.
+   *
+   * Generally we have not run into issues with the default (`anchors-visible`)
+   *
+   * Exceptions:
+   *  - Target is intentionally not visible (eg `position:absolute` moving it outside of
+   *    its parent's "clipped boundary", or a `visibility:hidden` trigger)
+   *  - A trigger is scrolled out of its scroll container while the popover is open.
+   *
+   * We are switching from `anchors-visible` → `always` _for now_ to force no
+   * automatic hiding of the popover. There seems to be no compelling reason to use
+   * the default value. If one arises in the future, we could look towards making
+   *  this behaviour configurable.
+   */
+  {
+    property: 'position-visibility',
+    value: 'always'
+  },
   // Reset browser default popover positioning that conflicts
   // with anchor positioning (UA: `inset: 0; margin: auto;`)
   {

package/dist/cjs/popover/popover.js

@@ -1,4 +1,4 @@
-/* popover.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* popover.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/popover-surface/popover-surface.js

@@ -1,4 +1,4 @@
-/* popover-surface.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* popover-surface.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/es2019/dialog/dialog-content.js

@@ -1,4 +1,4 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';

package/dist/es2019/internal/anchor-positioning/apply-anchor-positioning.js

@@ -51,6 +51,38 @@ export function applyAnchorPositioning({
       placement
     })
   },
+  /**
+   * **`position-visibility: always`**
+   *
+   * `position-visibility` is used to control the visibility of an anchored
+   * popover based on the visibility of the element being anchored to (the target).
+   *
+   * Default `position-visibility` value: `anchors-visible` → hide the anchored
+   * popover when the target is fully clipped by an ancestor (eg a scroll container)
+   * or is `visibility:hidden`.
+   * Sadly this "automatic hiding" does not actually "close" the popover,
+   * so things like `:popover-open` are still active, even though the popover
+   * is no longer painted and no longer receives pointer input. Chrome keeps it
+   * focusable and in the accessibility tree, so keyboard and screen reader users
+   * can still land inside a surface that is not painted.
+   * Per-engine behaviour: `notes/decisions/position-visibility-always.md`.
+   *
+   * Generally we have not run into issues with the default (`anchors-visible`)
+   *
+   * Exceptions:
+   *  - Target is intentionally not visible (eg `position:absolute` moving it outside of
+   *    its parent's "clipped boundary", or a `visibility:hidden` trigger)
+   *  - A trigger is scrolled out of its scroll container while the popover is open.
+   *
+   * We are switching from `anchors-visible` → `always` _for now_ to force no
+   * automatic hiding of the popover. There seems to be no compelling reason to use
+   * the default value. If one arises in the future, we could look towards making
+   *  this behaviour configurable.
+   */
+  {
+    property: 'position-visibility',
+    value: 'always'
+  },
   // Reset browser default popover positioning that conflicts
   // with anchor positioning (UA: `inset: 0; margin: auto;`)
   {

package/dist/es2019/popover/popover.js

@@ -1,4 +1,4 @@
-/* popover.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* popover.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useId, useLayoutEffect, useMemo, useRef } from 'react';

package/dist/es2019/popover-surface/popover-surface.js

@@ -1,4 +1,4 @@
-/* popover-surface.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* popover-surface.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./popover-surface.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/dialog/dialog-content.js

@@ -1,4 +1,4 @@
-/* dialog-content.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* dialog-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./dialog-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';

package/dist/esm/internal/anchor-positioning/apply-anchor-positioning.js

@@ -51,6 +51,38 @@ export function applyAnchorPositioning(_ref) {
       placement: placement
     })
   },
+  /**
+   * **`position-visibility: always`**
+   *
+   * `position-visibility` is used to control the visibility of an anchored
+   * popover based on the visibility of the element being anchored to (the target).
+   *
+   * Default `position-visibility` value: `anchors-visible` → hide the anchored
+   * popover when the target is fully clipped by an ancestor (eg a scroll container)
+   * or is `visibility:hidden`.
+   * Sadly this "automatic hiding" does not actually "close" the popover,
+   * so things like `:popover-open` are still active, even though the popover
+   * is no longer painted and no longer receives pointer input. Chrome keeps it
+   * focusable and in the accessibility tree, so keyboard and screen reader users
+   * can still land inside a surface that is not painted.
+   * Per-engine behaviour: `notes/decisions/position-visibility-always.md`.
+   *
+   * Generally we have not run into issues with the default (`anchors-visible`)
+   *
+   * Exceptions:
+   *  - Target is intentionally not visible (eg `position:absolute` moving it outside of
+   *    its parent's "clipped boundary", or a `visibility:hidden` trigger)
+   *  - A trigger is scrolled out of its scroll container while the popover is open.
+   *
+   * We are switching from `anchors-visible` → `always` _for now_ to force no
+   * automatic hiding of the popover. There seems to be no compelling reason to use
+   * the default value. If one arises in the future, we could look towards making
+   *  this behaviour configurable.
+   */
+  {
+    property: 'position-visibility',
+    value: 'always'
+  },
   // Reset browser default popover positioning that conflicts
   // with anchor positioning (UA: `inset: 0; margin: auto;`)
   {

package/dist/esm/popover/popover.js

@@ -1,4 +1,4 @@
-/* popover.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* popover.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./popover.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useId, useLayoutEffect, useMemo, useRef } from 'react';

package/dist/esm/popover-surface/popover-surface.js

@@ -1,4 +1,4 @@
-/* popover-surface.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* popover-surface.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./popover-surface.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "5.0.1",
+	"version": "5.0.2",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",