@atlaskit/popup 1.15.0 → 1.16.0

package/dist/esm/popup.js

@@ -3,12 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
-import memoizeOne from 'memoize-one';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import PopperWrapper from './popper-wrapper';
+import { useGetMemoizedMergedTriggerRef } from './use-get-memoized-merged-trigger-ref';
 var defaultLayer = layers.layer();
 export var Popup = /*#__PURE__*/memo(function (_ref) {
   var isOpen = _ref.isOpen,
@@ -42,33 +42,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
-
-  /*
-   * Get a memoized functional ref for use within this Popup's Trigger.
-   * This is still very volatile to change as `prop.isOpen` will regularly change, but it's better than nothing.
-   * This is memoized within our component as to not be shared across all Popup instances, just this one.
-   *
-   * This is complex because the inputs are split across three different scopes:
-   *  - `props.isOpen`
-   *  - `useState.setTriggerRef`
-   *  - `renderProps.ref`
-   */
-  var _useState3 = useState(function () {
-      return memoizeOne(function (ref, setTriggerRef, isOpen) {
-        return function (node) {
-          if (node && isOpen) {
-            if (typeof ref === 'function') {
-              ref(node);
-            } else if (ref) {
-              ref.current = node;
-            }
-            setTriggerRef(node);
-          }
-        };
-      });
-    }),
-    _useState4 = _slicedToArray(_useState3, 1),
-    getMergedTriggerRef = _useState4[0];
+  var getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
   var renderPopperWrapper = jsx(UNSAFE_LAYERING, {
     isDisabled: false
   }, jsx(PopperWrapper, {

package/dist/esm/use-get-memoized-merged-trigger-ref.js

@@ -0,0 +1,33 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from 'react';
+import memoizeOne from 'memoize-one';
+
+/*
+ * Get a memoized functional ref for use within a Popup's Trigger.
+ * This is still very volatile to change as `prop.isOpen` will regularly change, but it's better than nothing.
+ * This is memoized within a component as to not be shared across all Popup instances.
+ *
+ * This is complex because the inputs are split across three different scopes:
+ *  - `props.isOpen`
+ *  - `useState.setTriggerRef`
+ *  - `renderProps.ref`
+ */
+export var useGetMemoizedMergedTriggerRef = function useGetMemoizedMergedTriggerRef() {
+  var _useState = useState(function () {
+      return memoizeOne(function (ref, setTriggerRef, isOpen) {
+        return function (node) {
+          if (node && isOpen) {
+            if (typeof ref === 'function') {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            setTriggerRef(node);
+          }
+        };
+      });
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    getMemoizedMergedTriggerRef = _useState2[0];
+  return getMemoizedMergedTriggerRef;
+};

package/dist/types/compositional/popup.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { type ContentProps, type PopupProps as LegacyPopupProps, type TriggerProps } from '../types';
+export type PopupProps = {
+    children: React.ReactNode;
+    isOpen?: boolean;
+    id?: string;
+};
+/**
+ * __Popup__
+ *
+ * Popup is a composable component that provides the context for the trigger and content components.
+ *
+ * Usage example:
+ * ```jsx
+ * <Popup>
+ *   <PopupTrigger>
+ *     {(props) => (
+ *       <button type="button" {...props}>Click me</button>
+ *      )}
+ *   </PopupTrigger>
+ *   <PopupContent>
+ *     {(props) => <div>Hello world</div>}
+ *   </PopupContent>
+ * </Popup>
+ * ```
+ */
+export declare const Popup: ({ children, id, isOpen }: PopupProps) => JSX.Element;
+export type PopupTriggerProps = {
+    children: (props: TriggerProps) => React.ReactNode;
+};
+/**
+ * __Popup trigger__
+ *
+ * Popup trigger is the component that renders the trigger for the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+export declare const PopupTrigger: ({ children }: PopupTriggerProps) => JSX.Element;
+export type PopupContentProps = Pick<LegacyPopupProps, 'boundary' | 'offset' | 'strategy' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldUseCaptureOnOutsideClick' | 'shouldRenderToParent' | 'shouldDisableFocusLock' | 'zIndex'> & {
+    children: (props: ContentProps) => React.ReactNode;
+};
+/**
+ * __Popup content__
+ *
+ * Popup content is the component that renders the content of the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+export declare const PopupContent: ({ children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, }: PopupContentProps) => JSX.Element | null;

package/dist/types/entry-points/experimental/compositional.d.ts

@@ -0,0 +1,2 @@
+export { Popup, PopupContent, PopupTrigger } from '../../compositional/popup';
+export type { PopupProps, PopupContentProps, PopupTriggerProps, } from '../../compositional/popup';

package/dist/types/use-get-memoized-merged-trigger-ref.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare const useGetMemoizedMergedTriggerRef: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>, isOpen: boolean) => (node: HTMLElement | null) => void>;

package/dist/types-ts4.5/compositional/popup.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { type ContentProps, type PopupProps as LegacyPopupProps, type TriggerProps } from '../types';
+export type PopupProps = {
+    children: React.ReactNode;
+    isOpen?: boolean;
+    id?: string;
+};
+/**
+ * __Popup__
+ *
+ * Popup is a composable component that provides the context for the trigger and content components.
+ *
+ * Usage example:
+ * ```jsx
+ * <Popup>
+ *   <PopupTrigger>
+ *     {(props) => (
+ *       <button type="button" {...props}>Click me</button>
+ *      )}
+ *   </PopupTrigger>
+ *   <PopupContent>
+ *     {(props) => <div>Hello world</div>}
+ *   </PopupContent>
+ * </Popup>
+ * ```
+ */
+export declare const Popup: ({ children, id, isOpen }: PopupProps) => JSX.Element;
+export type PopupTriggerProps = {
+    children: (props: TriggerProps) => React.ReactNode;
+};
+/**
+ * __Popup trigger__
+ *
+ * Popup trigger is the component that renders the trigger for the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+export declare const PopupTrigger: ({ children }: PopupTriggerProps) => JSX.Element;
+export type PopupContentProps = Pick<LegacyPopupProps, 'boundary' | 'offset' | 'strategy' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldUseCaptureOnOutsideClick' | 'shouldRenderToParent' | 'shouldDisableFocusLock' | 'zIndex'> & {
+    children: (props: ContentProps) => React.ReactNode;
+};
+/**
+ * __Popup content__
+ *
+ * Popup content is the component that renders the content of the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+export declare const PopupContent: ({ children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, }: PopupContentProps) => JSX.Element | null;

package/dist/types-ts4.5/entry-points/experimental/compositional.d.ts

@@ -0,0 +1,2 @@
+export { Popup, PopupContent, PopupTrigger } from '../../compositional/popup';
+export type { PopupProps, PopupContentProps, PopupTriggerProps, } from '../../compositional/popup';

package/dist/types-ts4.5/use-get-memoized-merged-trigger-ref.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare const useGetMemoizedMergedTriggerRef: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>, isOpen: boolean) => (node: HTMLElement | null) => void>;

package/experimental/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/popup/experimental",
+  "main": "../dist/cjs/entry-points/experimental/compositional.js",
+  "module": "../dist/esm/entry-points/experimental/compositional.js",
+  "module:es2019": "../dist/es2019/entry-points/experimental/compositional.js",
+  "sideEffects": false,
+  "types": "../dist/types/entry-points/experimental/compositional.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/experimental/compositional.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,7 +24,8 @@
   "atlaskit:src": "src/index.tsx",
   "af:exports": {
     ".": "./src/index.tsx",
-    "./types": "./src/types.tsx"
+    "./types": "./src/types.tsx",
+    "./experimental": "./src/entry-points/experimental/compositional.tsx"
   },
   "atlassian": {
     "team": "Design System Team",
@@ -40,17 +41,18 @@
   },
   "dependencies": {
     "@atlaskit/ds-lib": "^2.3.0",
-    "@atlaskit/layering": "^0.2.0",
+    "@atlaskit/layering": "^0.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.44.0",
+    "@atlaskit/tokens": "^1.45.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^3.0.0",
     "focus-trap": "^2.4.5",
-    "memoize-one": "^6.0.0"
+    "memoize-one": "^6.0.0",
+    "tiny-invariant": "^1.2.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ~18.2.0",
@@ -62,11 +64,13 @@
     "@atlaskit/button": "^17.14.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/ssr": "*",
+    "@atlaskit/toggle": "^13.0.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "ast-types": "^0.13.3",
     "jscodeshift": "^0.13.0",
     "raf-stub": "^2.0.1",