@skyscanner/backpack-web 34.0.0-premajor.1 → 34.0.0-premajor.2

package/bpk-component-popover/src/BpkPopover.js

@@ -16,46 +16,25 @@
  * limitations under the License.
  */
 
-import { useState, cloneElement, useRef } from 'react';
-import { useFloating, autoUpdate, offset, flip, useClick, useDismiss, useInteractions, FloatingFocusManager, FloatingArrow, arrow } from '@floating-ui/react';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkCloseButton from "../../bpk-component-close-button";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { BpkButtonLink } from "../../bpk-component-link";
-import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
-import { ARROW_ID } from "./constants";
-import STYLES from "./BpkPopover.module.css";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
+import { useState, useRef } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from "./PopperUtils";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const EVENT_SOURCES = {
   CLOSE_BUTTON: 'CLOSE_BUTTON',
   CLOSE_LINK: 'CLOSE_LINK'
 };
-const bindEventSource = (source, callback) => event => {
-  if (event.persist) {
-    event.persist();
-  }
-  callback(event, {
-    source
-  });
-};
 const BpkPopover = ({
-  children,
-  className = null,
-  closeButtonIcon = true,
-  closeButtonProps = {},
-  closeButtonText,
-  id,
+  // children,
+  // className = null,
+  // closeButtonIcon = true,
+  // closeButtonProps = {},
+  // closeButtonText,
+  // id,
   isOpen = false,
-  label,
-  labelAsTitle = false,
-  onClose,
-  padded = true,
+  // label,
+  // labelAsTitle = false,
+  // onClose,
+  // padded = true,
   placement = 'bottom',
   showArrow = true,
   target,
@@ -63,109 +42,68 @@ const BpkPopover = ({
 }) => {
   const [isOpenState, setIsOpenState] = useState(isOpen);
   const arrowRef = useRef(null);
-  const {
-    context,
-    floatingStyles,
-    refs
-  } = useFloating({
-    open: isOpenState,
-    onOpenChange: setIsOpenState,
-    placement,
-    middleware: [showArrow && offset(14), flip({
-      fallbackAxisSideDirection: 'start'
-    }), arrow({
-      element: arrowRef
-    })],
-    whileElementsMounted: autoUpdate
-  });
-  const click = useClick(context);
-  const dismiss = useDismiss(context);
+
+  // const { context, floatingStyles, refs } = useFloating({
+  //   open: isOpenState,
+  //   onOpenChange: setIsOpenState,
+  //   placement,
+  //   middleware: [
+  //     showArrow && offset(14),
+  //     flip({ fallbackAxisSideDirection: 'start' }),
+  //     arrow({ element: arrowRef }),
+  //   ],
+  //   whileElementsMounted: autoUpdate,
+  // });
+
+  // const click = useClick(context);
+  // const dismiss = useDismiss(context);
 
   // Merge all the interactions into prop getters
-  const {
-    getFloatingProps,
-    getReferenceProps
-  } = useInteractions([click, dismiss]);
-  const targetElement = /*#__PURE__*/cloneElement(target, {
-    ...getReferenceProps(),
-    ref: refs.setReference
-  });
-  const classNames = getClassName('bpk-popover', className);
-  const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
-  const labelId = `bpk-popover-label-${id}`;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [targetElement, isOpenState && /*#__PURE__*/_jsx(FloatingFocusManager, {
-      context: context,
-      modal: false,
-      children: /*#__PURE__*/_jsx("div", {
-        ref: refs.setFloating,
-        style: floatingStyles,
-        ...getFloatingProps(),
-        children: /*#__PURE__*/_jsx(TransitionInitialMount, {
-          appearClassName: getClassName('bpk-popover--appear'),
-          appearActiveClassName: getClassName('bpk-popover--appear-active'),
-          transitionTimeout: 200,
-          children: /*#__PURE__*/_jsxs("section", {
-            id: id,
-            tabIndex: -1,
-            role: "dialog",
-            "aria-labelledby": labelId,
-            className: classNames,
-            ...rest,
-            children: [showArrow && /*#__PURE__*/_jsx(FloatingArrow, {
-              ref: arrowRef,
-              context: context,
-              id: ARROW_ID
-              // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-              ,
-              className: getClassName('bpk-popover__arrow'),
-              role: "presentation",
-              stroke: surfaceHighlightDay,
-              strokeWidth: 0.0625
-            }), labelAsTitle ? /*#__PURE__*/_jsxs("header", {
-              className: getClassName('bpk-popover__header'),
-              children: [/*#__PURE__*/_jsx(BpkText, {
-                tagName: "h2",
-                id: labelId,
-                textStyle: TEXT_STYLES.label1,
-                children: label
-              }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton, {
-                label: closeButtonText,
-                onClick: () => {
-                  bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose);
-                  setIsOpenState(false);
-                },
-                ...closeButtonProps
-              }) : /*#__PURE__*/_jsx(BpkButtonLink, {
-                onClick: () => {
-                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose);
-                  setIsOpenState(false);
-                },
-                ...closeButtonProps,
-                children: closeButtonText
-              })]
-            }) : /*#__PURE__*/_jsx("span", {
-              id: labelId,
-              className: getClassName('bpk-popover__label'),
-              children: label
-            }), /*#__PURE__*/_jsx("div", {
-              className: bodyClassNames,
-              children: children
-            }), !labelAsTitle && /*#__PURE__*/_jsx("footer", {
-              className: getClassName('bpk-popover__footer'),
-              children: /*#__PURE__*/_jsx(BpkButtonLink, {
-                onClick: () => {
-                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose);
-                  setIsOpenState(false);
-                },
-                ...closeButtonProps,
-                children: closeButtonText
-              })
-            })]
-          })
-        })
-      })
-    })]
-  });
+  // const { getFloatingProps, getReferenceProps } = useInteractions([
+  //   click,
+  //   dismiss,
+  // ]);
+
+  // const targetElement = cloneElement(target, {
+  //   ...getReferenceProps(),
+  //   ref: refs.setReference,
+  // });
+  // const classNames = getClassName('bpk-popover', className);
+  // const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
+
+  // const labelId = `bpk-popover-label-${id}`;
+
+  return (
+    /*#__PURE__*/
+    // <>
+    //   {targetElement}
+    //   {isOpenState && (
+    //     <FloatingFocusManager context={context} modal={false}>
+    //       <div
+    //         ref={refs.setFloating}
+    //         style={floatingStyles}
+    //         {...getFloatingProps()}
+    //       >
+    //       </div>
+    //     </FloatingFocusManager>
+    //   )}
+    // </>
+    _jsxs(Popover, {
+      open: isOpenState,
+      onOpenChange: setIsOpenState,
+      arrowRef: arrowRef,
+      showArrow: showArrow,
+      placement: placement,
+      children: [/*#__PURE__*/_jsx(PopoverTrigger, {
+        onClick: () => setIsOpenState(v => !v),
+        children: target
+      }), /*#__PURE__*/_jsx(PopoverContent, {
+        setState: setIsOpenState,
+        arrowRef: arrowRef,
+        showArrow: showArrow,
+        ...rest
+      })]
+    })
+  );
 };
 export default BpkPopover;

package/bpk-component-popover/src/PopperUtils.js

@@ -0,0 +1,224 @@
+import * as React from 'react';
+import { useFloating, autoUpdate, offset, flip, useClick, useDismiss, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager, arrow, FloatingArrow } from '@floating-ui/react';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkCloseButton from "../../bpk-component-close-button";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { BpkButtonLink } from "../../bpk-component-link";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
+import { ARROW_ID } from "./constants";
+import STYLES from "./BpkPopover.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export function usePopover({
+  arrowRef,
+  modal,
+  onOpenChange: setControlledOpen,
+  open: controlledOpen,
+  placement,
+  showArrow
+} = {}) {
+  const open = controlledOpen;
+  const setOpen = setControlledOpen;
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [showArrow && offset(14), arrow({
+      element: arrowRef
+    }), flip({
+      fallbackAxisSideDirection: 'start'
+    })]
+  });
+  const {
+    context
+  } = data;
+  const click = useClick(context, {
+    enabled: controlledOpen == null
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+  const interactions = useInteractions([click, dismiss, role]);
+  return React.useMemo(() => ({
+    open,
+    setOpen,
+    ...interactions,
+    ...data,
+    modal
+  }), [open, setOpen, interactions, data, modal]);
+}
+const PopoverContext = /*#__PURE__*/React.createContext(null);
+export const usePopoverContext = () => {
+  const context = React.useContext(PopoverContext);
+  if (context == null) {
+    throw new Error('Popover components must be wrapped in <Popover />');
+  }
+  return context;
+};
+export function Popover({
+  children,
+  modal = false,
+  ...restOptions
+}) {
+  // This can accept any props as options, e.g. `placement`,
+  // or other positioning options.
+  const popover = usePopover({
+    modal,
+    ...restOptions
+  });
+  return /*#__PURE__*/_jsx(PopoverContext.Provider, {
+    value: popover,
+    children: children
+  });
+}
+export const PopoverTrigger = /*#__PURE__*/React.forwardRef(({
+  asChild = false,
+  children,
+  ...props
+}, propRef) => {
+  const context = usePopoverContext();
+  const childrenRef = children.ref;
+  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+
+  // `asChild` allows the user to pass any element as the anchor
+  if (asChild && /*#__PURE__*/React.isValidElement(children)) {
+    return /*#__PURE__*/React.cloneElement(children, context.getReferenceProps({
+      ref,
+      ...props,
+      ...children.props,
+      'data-state': context.open ? 'open' : 'closed'
+    }));
+  }
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref
+    // The user can style the trigger based on the state
+    ,
+    "data-state": context.open ? 'open' : 'closed',
+    ...context.getReferenceProps(props),
+    children: children
+  });
+});
+const EVENT_SOURCES = {
+  CLOSE_BUTTON: 'CLOSE_BUTTON',
+  CLOSE_LINK: 'CLOSE_LINK'
+};
+const bindEventSource = (source, callback) => event => {
+  if (event.persist) {
+    event.persist();
+  }
+  callback(event, {
+    source
+  });
+};
+export const PopoverContent = /*#__PURE__*/React.forwardRef(({
+  arrowRef,
+  children,
+  className = null,
+  closeButtonIcon = true,
+  closeButtonProps = {},
+  closeButtonText,
+  id,
+  isOpen = false,
+  label,
+  labelAsTitle = false,
+  onClose,
+  padded = true,
+  placement = 'bottom',
+  setState: setIsOpenState,
+  showArrow,
+  target,
+  ...rest
+}, propRef) => {
+  // const [isOpenState, setIsOpenState] = React.useState(isOpen);
+
+  const {
+    context: floatingContext,
+    ...context
+  } = usePopoverContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+  const classNames = getClassName('bpk-popover', className);
+  const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
+  const labelId = `bpk-popover-label-${id}`;
+  if (!floatingContext.open) return null;
+  return /*#__PURE__*/_jsx(FloatingPortal, {
+    children: /*#__PURE__*/_jsx(FloatingFocusManager, {
+      context: floatingContext,
+      modal: context.modal,
+      children: /*#__PURE__*/_jsx("div", {
+        ref: ref,
+        style: {
+          ...context.floatingStyles
+        },
+        ...context.getFloatingProps(),
+        children: /*#__PURE__*/_jsx(TransitionInitialMount, {
+          appearClassName: getClassName('bpk-popover--appear'),
+          appearActiveClassName: getClassName('bpk-popover--appear-active'),
+          transitionTimeout: 200,
+          children: /*#__PURE__*/_jsxs("section", {
+            id: id,
+            tabIndex: -1,
+            role: "dialog",
+            "aria-labelledby": labelId,
+            className: classNames,
+            ...rest,
+            children: [showArrow && /*#__PURE__*/_jsx(FloatingArrow, {
+              ref: arrowRef,
+              context: floatingContext,
+              id: ARROW_ID
+              // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+              ,
+              className: getClassName('bpk-popover__arrow'),
+              role: "presentation",
+              stroke: surfaceHighlightDay,
+              strokeWidth: 0.0625
+            }), labelAsTitle ? /*#__PURE__*/_jsxs("header", {
+              className: getClassName('bpk-popover__header'),
+              children: [/*#__PURE__*/_jsx(BpkText, {
+                tagName: "h2",
+                id: labelId,
+                textStyle: TEXT_STYLES.label1,
+                children: label
+              }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton, {
+                label: closeButtonText,
+                onClick: () => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose);
+                  setIsOpenState(false);
+                },
+                ...closeButtonProps
+              }) : /*#__PURE__*/_jsx(BpkButtonLink, {
+                onClick: () => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose);
+                  setIsOpenState(false);
+                },
+                ...closeButtonProps,
+                children: closeButtonText
+              })]
+            }) : /*#__PURE__*/_jsx("span", {
+              id: labelId,
+              className: getClassName('bpk-popover__label'),
+              children: label
+            }), /*#__PURE__*/_jsx("div", {
+              className: bodyClassNames,
+              children: children
+            }), !labelAsTitle && /*#__PURE__*/_jsx("footer", {
+              className: getClassName('bpk-popover__footer'),
+              children: /*#__PURE__*/_jsx(BpkButtonLink, {
+                onClick: () => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose);
+                  setIsOpenState(false);
+                },
+                ...closeButtonProps,
+                children: closeButtonText
+              })
+            })]
+          })
+        })
+      })
+    })
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "34.0.0-premajor.1",
+  "version": "34.0.0-premajor.2",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",