@contentful/f36-popover 4.16.0 → 4.19.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 4.19.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-utils@4.19.0
+  - @contentful/f36-core@4.19.0
+
+## 4.18.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-utils@4.18.0
+  - @contentful/f36-core@4.18.0
+
+## 4.17.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-utils@4.17.0
+  - @contentful/f36-core@4.17.0
+
 ## 4.16.0
 
 ### Patch Changes

package/dist/{types.d.ts → index.d.ts}

@@ -1,7 +1,9 @@
-import React from "react";
-import { ExpandProps, CommonProps, PropsWithHTMLElement } from "@contentful/f36-core";
-import { Placement } from "@popperjs/core";
-export interface PopoverProps {
+import React from 'react';
+import { ExpandProps, PropsWithHTMLElement, CommonProps } from '@contentful/f36-core';
+import { Placement } from '@popperjs/core';
+import * as _emotion_core from '@emotion/core';
+
+interface PopoverProps {
     children: React.ReactNode;
     /**
      * Boolean to determine if the Popover should be the same width as
@@ -89,19 +91,21 @@ export interface PopoverProps {
      */
     renderOnlyWhenOpen?: boolean;
 }
-declare function _Popover1(props: ExpandProps<PopoverProps>): JSX.Element;
+declare function Popover$1(props: ExpandProps<PopoverProps>): JSX.Element;
+
 interface PopoverContentInternalProps extends CommonProps {
     children?: React.ReactNode;
 }
-export type PopoverContentProps = PropsWithHTMLElement<PopoverContentInternalProps, 'div'>;
-export const PopoverContent: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, never>, keyof PopoverContentInternalProps> & PopoverContentInternalProps & React.RefAttributes<unknown>>;
-export interface PopoverTriggerProps {
+declare type PopoverContentProps = PropsWithHTMLElement<PopoverContentInternalProps, 'div'>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, never>, keyof PopoverContentInternalProps> & PopoverContentInternalProps & React.RefAttributes<unknown>>;
+
+interface PopoverTriggerProps {
     children: React.ReactNode;
 }
 /**
  * PopoverTrigger opens the popover. It must be an interactive element.
  */
-export const PopoverTrigger: (props: PopoverTriggerProps) => React.DetailedReactHTMLElement<{
+declare const PopoverTrigger: (props: PopoverTriggerProps) => React.DetailedReactHTMLElement<{
     'aria-haspopup': any;
     accept?: string;
     acceptCharset?: string;
@@ -463,14 +467,15 @@ export const PopoverTrigger: (props: PopoverTriggerProps) => React.DetailedReact
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement>;
     onTransitionEnd?: React.TransitionEventHandler<HTMLElement>;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement>;
-    css?: import("@emotion/core").InterpolationWithTheme<any>;
+    css?: _emotion_core.InterpolationWithTheme<any>;
     ref?: React.LegacyRef<HTMLElement>;
     key?: React.Key;
 }, HTMLElement>;
-type CompoundPopover = typeof _Popover1 & {
+
+declare type CompoundPopover = typeof Popover$1 & {
     Content: typeof PopoverContent;
     Trigger: typeof PopoverTrigger;
 };
-export const Popover: CompoundPopover;
+declare const Popover: CompoundPopover;
 
-//# sourceMappingURL=types.d.ts.map
+export { Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps };

package/dist/index.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var O = require('react');
+var f36Core = require('@contentful/f36-core');
+var reactPopper = require('react-popper');
+var emotion = require('emotion');
+var f36Utils = require('@contentful/f36-utils');
+var f = require('@contentful/f36-tokens');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var O__default = /*#__PURE__*/_interopDefaultLegacy(O);
+var f__default = /*#__PURE__*/_interopDefaultLegacy(f);
+
+var ee=Object.defineProperty,oe=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var D=(e,r,o)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,i=(e,r)=>{for(var o in r||(r={}))I.call(r,o)&&D(e,o,r[o]);if(y)for(var o of y(r))B.call(r,o)&&D(e,o,r[o]);return e},P=(e,r)=>oe(e,re(r));var F=(e,r)=>{var o={};for(var t in e)I.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(e!=null&&y)for(var t of y(e))r.indexOf(t)<0&&B.call(e,t)&&(o[t]=e[t]);return o};var N=(e,r,o)=>new Promise((t,u)=>{var m=p=>{try{a(o.next(p));}catch(n){u(n);}},d=p=>{try{a(o.throw(p));}catch(n){u(n);}},a=p=>p.done?t(p.value):Promise.resolve(p.value).then(m,d);a((o=o.apply(e,r)).next());});var A=O__default["default"].createContext(void 0),T=()=>{let e=O__default["default"].useContext(A);if(e===void 0)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return e},K=A.Provider;function q(e){let{children:r,isOpen:o,placement:t="bottom-start",isFullWidth:u=!1,isAutoalignmentEnabled:m=!0,usePortal:d=!0,closeOnBlur:a=!0,closeOnEsc:p=!0,onClose:n,autoFocus:h=!0,id:C,offset:g=[1,4],renderOnlyWhenOpen:v=!0}=e,[s,J]=O.useState(null),[l,Q]=O.useState(null),{attributes:L,update:E,styles:W}=reactPopper.usePopper(s,l,{placement:t,modifiers:[{name:"offset",options:{offset:g}},P(i({},ae),{enabled:u}),{name:"preventOverflow",enabled:m,options:{mainAxis:!0}},{name:"flip",enabled:m}]});O.useEffect(()=>{o&&h&&l&&l.focus({preventScroll:!0});},[o,l]),O.useEffect(()=>{(()=>N(this,null,function*(){o&&E&&(yield E());}))();},[o,E]);let U=f36Core.useId(void 0,"popover-content"),M=C||U,S=O.useCallback(()=>{n==null||n(),setTimeout(()=>s==null?void 0:s.focus({preventScroll:!0}),0);},[n,s]),X=O.useMemo(()=>({isOpen:Boolean(o),usePortal:d,renderOnlyWhenOpen:v,getTriggerProps:(c=null)=>({ref:f36Core.mergeRefs(J,c),["aria-expanded"]:Boolean(o),["aria-controls"]:M}),getPopoverProps:(c={},Y=null)=>P(i({},L.popper),{style:i(i({},c.style||{}),W.popper),ref:f36Core.mergeRefs(Q,Y),id:M,onBlur:x=>{if(c.onBlur&&c.onBlur(x),!a)return;let b=x.relatedTarget,Z=l===b||(l==null?void 0:l.contains(b)),_=s===b||(s==null?void 0:s.contains(b));Z||_||n==null||n();},onKeyDown:x=>{c.onKeyDown&&c.onKeyDown(x),p&&x.key==="Escape"&&S();}})}),[o,v,L,W,d,M,p,a,l,s,S,n]);return O__default["default"].createElement(K,{value:X},r)}var ae={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:({state:e})=>{e.styles.popper.width=`${e.rects.reference.width}px`;},effect:({state:e})=>()=>{let r=e.elements.reference;e.elements.popper.style.width=`${r.offsetWidth}px`;}};var G=e=>({container:emotion.css({display:e?"initial":"none",background:f__default["default"].colorWhite,border:0,borderRadius:f__default["default"].borderRadiusMedium,boxShadow:f__default["default"].boxShadowDefault,zIndex:f__default["default"].zIndexDropdown,"&:focus":{boxShadow:f__default["default"].glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{boxShadow:f__default["default"].boxShadowDefault}})});var Pe=(e,r)=>{let v=e,{children:o,className:t,testId:u="cf-ui-popover-content",role:m="dialog"}=v,d=F(v,["children","className","testId","role"]),{isOpen:a,renderOnlyWhenOpen:p,getPopoverProps:n,usePortal:h}=T(),C=G(a),g=O__default["default"].createElement("div",P(i(i({},d),n(d,r)),{className:emotion.cx(C.container,t),"data-test-id":u,tabIndex:-1,role:m,"data-position-absolute":!0}),o);return p&&!a?null:h?O__default["default"].createElement(f36Utils.Portal,null,g):g},w=O__default["default"].forwardRef(Pe);var R=e=>{var t;let r=O__default["default"].Children.only(e.children),{getTriggerProps:o}=T();return O__default["default"].cloneElement(r,P(i({},o(r.ref)),{"aria-haspopup":(t=r.props["aria-haspopup"])!=null?t:"dialog"}))};var H=q;H.Content=w;H.Trigger=R;
+
+exports.Popover = H;
+exports.PopoverContent = w;
+exports.PopoverTrigger = R;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Popover.tsx","../src/PopoverContext.ts","../src/PopoverContent/PopoverContent.tsx","../src/PopoverContent/PopoverContent.styles.ts","../src/PopoverTrigger/PopoverTrigger.tsx","../src/CompoundPopover.tsx"],"names":["React","useMemo","useState","useEffect","useCallback","useId","mergeRefs","PopoverContext","usePopoverContext","context","PopoverContextProvider","usePopper","Popover","props","children","isOpen","placement","isFullWidth","isAutoalignmentEnabled","usePortal","closeOnBlur","closeOnEsc","onClose","autoFocus","id","offset","renderOnlyWhenOpen","triggerElement","setTriggerElement","popoverElement","setPopoverElement","popperAttributes","update","popperStyles","__spreadProps","__spreadValues","sameWidth","__async","popoverGeneratedId","popoverId","closeAndFocusTrigger","contextValue","_ref","_props","event","relatedTarget","targetIsPopover","targetIsTrigger","state","reference","cx","Portal","css","tokens","getPopoverContentStyles","_PopoverContent","ref","_a","className","testId","role","otherProps","__objRest","getPopoverProps","styles","content","PopoverContent","PopoverTrigger","child","getTriggerProps"],"mappings":"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","sourcesContent":["import React, { useMemo, useState, useEffect, useCallback } from 'react';\nimport { useId, mergeRefs, type ExpandProps } from '@contentful/f36-core';\nimport type { Placement, Modifier } from '@popperjs/core';\nimport { PopoverContextProvider, PopoverContextType } from './PopoverContext';\nimport { usePopper } from 'react-popper';\n\nexport interface PopoverProps {\n  children: React.ReactNode;\n\n  /**\n   * Boolean to determine if the Popover should be the same width as\n   * the trigger element\n   *\n   * @default false\n   */\n  isFullWidth?: boolean;\n\n  /**\n   * Boolean to control whether or not the Popover is open\n   *\n   * @default false\n   */\n  isOpen?: boolean;\n\n  /**\n   * Callback fired when the popover closes\n   */\n  onClose?: () => void;\n\n  /**\n   * Determines the preferred position of the Popover. This position is not\n   * guaranteed, as the Popover might be moved to fit the viewport\n   *\n   * @default bottom-start\n   */\n  placement?: Placement;\n\n  /**\n   * Boolean to control if popover is allowed to change its placement automatically\n   * based on available space in the viewport.\n   *\n   * For example:\n   * If you set placement prop to bottom, but there isn't enough space to position the popover in that direction,\n   * it will change the popper placement to top. As soon as enough space is detected, the placement will be reverted to the defined one.\n   *\n   * If you want the popover to strictly follow the placement prop you should set this prop to false.\n   *\n   * @default true\n   */\n  isAutoalignmentEnabled?: boolean;\n\n  /**\n   * Boolean to control whether or not to render the Popover in a React Portal.\n   * Rendering content inside a Portal allows the Popover to escape the bounds\n   * of its parent while still being positioned correctly. Using a Portal is\n   * necessary if an ancestor of the Popover hides overflow.\n   *\n   * @default true\n   */\n  usePortal?: boolean;\n\n  /**\n   * If true, the popover will close when you blur out it by clicking outside or tabbing out\n   *\n   * @default true\n   */\n  closeOnBlur?: boolean;\n\n  /**\n   * If true, the popover will close when you hit the Esc key\n   *\n   * @default true\n   */\n  closeOnEsc?: boolean;\n\n  /**\n   * If true, the popover will be focused after opening\n   *\n   * @default true\n   */\n  autoFocus?: boolean;\n\n  /**\n   * Popover id. Will be used as an `id` attribute on popover\n   * and as `aria-controls` attribute on trigger\n   *\n   * @default true\n   */\n  id?: string;\n\n  /**\n   * The `X-axis` and `Y-axis` offset to position popper element\n   * from its trigger element. `[X, Y]`\n   *\n   * @default [1, 4]\n   */\n  offset?: [number, number];\n\n  /**\n   * Defines if popover should be rendered in the DOM only when it's open\n   * or all the time (after the component has been mounted)\n   *\n   * @default true\n   */\n  renderOnlyWhenOpen?: boolean;\n}\n\nexport function Popover(props: ExpandProps<PopoverProps>) {\n  const {\n    children,\n    isOpen,\n    placement = 'bottom-start',\n    isFullWidth = false,\n    isAutoalignmentEnabled = true,\n    usePortal = true,\n    closeOnBlur = true,\n    closeOnEsc = true,\n    onClose,\n    autoFocus = true,\n    id,\n    offset = [1, 4],\n    renderOnlyWhenOpen = true,\n  } = props;\n\n  const [triggerElement, setTriggerElement] = useState<HTMLElement | null>(\n    null,\n  );\n  const [popoverElement, setPopoverElement] = useState<HTMLElement | null>(\n    null,\n  );\n\n  const {\n    attributes: popperAttributes,\n    update,\n    styles: popperStyles,\n  } = usePopper(triggerElement, popoverElement, {\n    placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset,\n        },\n      },\n      {\n        ...sameWidth,\n        enabled: isFullWidth,\n      },\n      {\n        name: 'preventOverflow',\n        enabled: isAutoalignmentEnabled,\n        options: {\n          mainAxis: true,\n        },\n      },\n      {\n        name: 'flip',\n        enabled: isAutoalignmentEnabled,\n      },\n    ],\n  });\n\n  useEffect(() => {\n    if (isOpen && autoFocus && popoverElement) {\n      popoverElement.focus({ preventScroll: true });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, popoverElement]);\n\n  useEffect(() => {\n    const updatePosition = async () => {\n      if (isOpen && update) {\n        await update();\n      }\n    };\n    updatePosition();\n  }, [isOpen, update]);\n\n  const popoverGeneratedId = useId(undefined, 'popover-content');\n  const popoverId = id || popoverGeneratedId;\n\n  const closeAndFocusTrigger = useCallback(() => {\n    onClose?.();\n\n    // setTimeout trick to make it work with focus-lock\n    setTimeout(() => triggerElement?.focus({ preventScroll: true }), 0);\n  }, [onClose, triggerElement]);\n\n  const contextValue: PopoverContextType = useMemo(\n    () => ({\n      isOpen: Boolean(isOpen),\n      usePortal,\n      renderOnlyWhenOpen,\n      getTriggerProps: (_ref = null) => ({\n        ref: mergeRefs(setTriggerElement, _ref),\n        ['aria-expanded']: Boolean(isOpen),\n        ['aria-controls']: popoverId,\n      }),\n      getPopoverProps: (_props = {}, _ref = null) => ({\n        ...popperAttributes.popper,\n        style: {\n          ...(_props.style || {}),\n          ...popperStyles.popper,\n        },\n        ref: mergeRefs(setPopoverElement, _ref),\n        id: popoverId,\n        onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n          if (_props.onBlur) {\n            _props.onBlur(event);\n          }\n\n          if (!closeOnBlur) {\n            return;\n          }\n\n          const relatedTarget = event.relatedTarget as Node;\n\n          const targetIsPopover =\n            popoverElement === relatedTarget ||\n            popoverElement?.contains(relatedTarget);\n          const targetIsTrigger =\n            triggerElement === relatedTarget ||\n            triggerElement?.contains(relatedTarget);\n\n          if (targetIsPopover || targetIsTrigger) {\n            return;\n          }\n\n          onClose?.();\n        },\n        onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n          if (_props.onKeyDown) {\n            _props.onKeyDown(event);\n          }\n\n          if (closeOnEsc && event.key === 'Escape') {\n            closeAndFocusTrigger();\n          }\n        },\n      }),\n    }),\n    [\n      isOpen,\n      renderOnlyWhenOpen,\n      popperAttributes,\n      popperStyles,\n      usePortal,\n      popoverId,\n      closeOnEsc,\n      closeOnBlur,\n      popoverElement,\n      triggerElement,\n      closeAndFocusTrigger,\n      onClose,\n    ],\n  );\n\n  return (\n    <PopoverContextProvider value={contextValue}>\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\n/**\n * Sets the popover width to the size of the trigger element.\n */\nconst sameWidth: Modifier<'sameWidth', any> = {\n  name: 'sameWidth',\n  enabled: true,\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n  fn: ({ state }) => {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  effect:\n    ({ state }) =>\n    () => {\n      const reference = state.elements.reference as HTMLElement;\n      state.elements.popper.style.width = `${reference.offsetWidth}px`;\n    },\n};\n","import React, { HTMLProps } from 'react';\n\nexport type PopoverContextType = {\n  isOpen: boolean;\n  usePortal: boolean;\n  renderOnlyWhenOpen: boolean;\n  getPopoverProps: (\n    _props: HTMLProps<HTMLDivElement>,\n    _ref: React.Ref<HTMLDivElement>,\n  ) => HTMLProps<HTMLDivElement>;\n  getTriggerProps: (_ref: React.Ref<HTMLElement>) => HTMLProps<HTMLElement>;\n};\n\nconst PopoverContext = React.createContext<PopoverContextType | undefined>(\n  undefined,\n);\n\nexport const usePopoverContext = () => {\n  const context = React.useContext(PopoverContext);\n\n  if (context === undefined) {\n    throw new Error(\n      'usePopoverContext must be used within a PopoverContextProvider',\n    );\n  }\n\n  return context;\n};\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { usePopoverContext } from '../PopoverContext';\nimport { Portal } from '@contentful/f36-utils';\nimport { getPopoverContentStyles } from './PopoverContent.styles';\n\ninterface PopoverContentInternalProps extends CommonProps {\n  children?: React.ReactNode;\n}\n\nexport type PopoverContentProps = PropsWithHTMLElement<\n  PopoverContentInternalProps,\n  'div'\n>;\n\nconst _PopoverContent = (props: ExpandProps<PopoverContentProps>, ref) => {\n  const {\n    children,\n    className,\n    testId = 'cf-ui-popover-content',\n    role = 'dialog',\n    ...otherProps\n  } = props;\n  const { isOpen, renderOnlyWhenOpen, getPopoverProps, usePortal } =\n    usePopoverContext();\n\n  const styles = getPopoverContentStyles(isOpen);\n\n  const content = (\n    <div\n      {...otherProps}\n      {...getPopoverProps(otherProps, ref)}\n      className={cx(styles.container, className)}\n      data-test-id={testId}\n      tabIndex={-1}\n      role={role}\n      // specific attribute to mark that this element is absolute positioned\n      // for internal contentful apps usage\n      data-position-absolute\n    >\n      {children}\n    </div>\n  );\n\n  if (renderOnlyWhenOpen && !isOpen) {\n    return null;\n  }\n\n  return usePortal ? <Portal>{content}</Portal> : content;\n};\n\nexport const PopoverContent = React.forwardRef(_PopoverContent);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getPopoverContentStyles = (isOpen: boolean) => ({\n  container: css({\n    display: isOpen ? 'initial' : 'none',\n    background: tokens.colorWhite,\n    border: 0,\n    borderRadius: tokens.borderRadiusMedium,\n    boxShadow: tokens.boxShadowDefault,\n    zIndex: tokens.zIndexDropdown,\n    '&:focus': {\n      boxShadow: tokens.glowPrimary,\n      outline: 'none',\n    },\n    '&:focus:not(:focus-visible)': {\n      boxShadow: tokens.boxShadowDefault,\n    },\n  }),\n});\n","import React from 'react';\nimport { usePopoverContext } from '../PopoverContext';\n\nexport interface PopoverTriggerProps {\n  children: React.ReactNode;\n}\n\n/**\n * PopoverTrigger opens the popover. It must be an interactive element.\n */\nexport const PopoverTrigger = (props: PopoverTriggerProps) => {\n  const child = React.Children.only(props.children) as any;\n  const { getTriggerProps } = usePopoverContext();\n\n  return React.cloneElement(child, {\n    ...getTriggerProps(child.ref),\n    'aria-haspopup': child.props['aria-haspopup'] ?? 'dialog',\n  });\n};\n","import { Popover as OriginalPopover } from './Popover';\nimport { PopoverContent } from './PopoverContent/PopoverContent';\nimport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\n\ntype CompoundPopover = typeof OriginalPopover & {\n  Content: typeof PopoverContent;\n  Trigger: typeof PopoverTrigger;\n};\n\nexport const Popover = OriginalPopover as CompoundPopover;\nPopover.Content = PopoverContent;\nPopover.Trigger = PopoverTrigger;\n"]}

package/dist/index.mjs

@@ -0,0 +1,11 @@
+import O, { useState, useEffect, useCallback, useMemo } from 'react';
+import { useId, mergeRefs } from '@contentful/f36-core';
+import { usePopper } from 'react-popper';
+import { cx, css } from 'emotion';
+import { Portal } from '@contentful/f36-utils';
+import f from '@contentful/f36-tokens';
+
+var ee=Object.defineProperty,oe=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var D=(e,r,o)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,i=(e,r)=>{for(var o in r||(r={}))I.call(r,o)&&D(e,o,r[o]);if(y)for(var o of y(r))B.call(r,o)&&D(e,o,r[o]);return e},P=(e,r)=>oe(e,re(r));var F=(e,r)=>{var o={};for(var t in e)I.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(e!=null&&y)for(var t of y(e))r.indexOf(t)<0&&B.call(e,t)&&(o[t]=e[t]);return o};var N=(e,r,o)=>new Promise((t,u)=>{var m=p=>{try{a(o.next(p));}catch(n){u(n);}},d=p=>{try{a(o.throw(p));}catch(n){u(n);}},a=p=>p.done?t(p.value):Promise.resolve(p.value).then(m,d);a((o=o.apply(e,r)).next());});var A=O.createContext(void 0),T=()=>{let e=O.useContext(A);if(e===void 0)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return e},K=A.Provider;function q(e){let{children:r,isOpen:o,placement:t="bottom-start",isFullWidth:u=!1,isAutoalignmentEnabled:m=!0,usePortal:d=!0,closeOnBlur:a=!0,closeOnEsc:p=!0,onClose:n,autoFocus:h=!0,id:C,offset:g=[1,4],renderOnlyWhenOpen:v=!0}=e,[s,J]=useState(null),[l,Q]=useState(null),{attributes:L,update:E,styles:W}=usePopper(s,l,{placement:t,modifiers:[{name:"offset",options:{offset:g}},P(i({},ae),{enabled:u}),{name:"preventOverflow",enabled:m,options:{mainAxis:!0}},{name:"flip",enabled:m}]});useEffect(()=>{o&&h&&l&&l.focus({preventScroll:!0});},[o,l]),useEffect(()=>{(()=>N(this,null,function*(){o&&E&&(yield E());}))();},[o,E]);let U=useId(void 0,"popover-content"),M=C||U,S=useCallback(()=>{n==null||n(),setTimeout(()=>s==null?void 0:s.focus({preventScroll:!0}),0);},[n,s]),X=useMemo(()=>({isOpen:Boolean(o),usePortal:d,renderOnlyWhenOpen:v,getTriggerProps:(c=null)=>({ref:mergeRefs(J,c),["aria-expanded"]:Boolean(o),["aria-controls"]:M}),getPopoverProps:(c={},Y=null)=>P(i({},L.popper),{style:i(i({},c.style||{}),W.popper),ref:mergeRefs(Q,Y),id:M,onBlur:x=>{if(c.onBlur&&c.onBlur(x),!a)return;let b=x.relatedTarget,Z=l===b||(l==null?void 0:l.contains(b)),_=s===b||(s==null?void 0:s.contains(b));Z||_||n==null||n();},onKeyDown:x=>{c.onKeyDown&&c.onKeyDown(x),p&&x.key==="Escape"&&S();}})}),[o,v,L,W,d,M,p,a,l,s,S,n]);return O.createElement(K,{value:X},r)}var ae={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:({state:e})=>{e.styles.popper.width=`${e.rects.reference.width}px`;},effect:({state:e})=>()=>{let r=e.elements.reference;e.elements.popper.style.width=`${r.offsetWidth}px`;}};var G=e=>({container:css({display:e?"initial":"none",background:f.colorWhite,border:0,borderRadius:f.borderRadiusMedium,boxShadow:f.boxShadowDefault,zIndex:f.zIndexDropdown,"&:focus":{boxShadow:f.glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{boxShadow:f.boxShadowDefault}})});var Pe=(e,r)=>{let v=e,{children:o,className:t,testId:u="cf-ui-popover-content",role:m="dialog"}=v,d=F(v,["children","className","testId","role"]),{isOpen:a,renderOnlyWhenOpen:p,getPopoverProps:n,usePortal:h}=T(),C=G(a),g=O.createElement("div",P(i(i({},d),n(d,r)),{className:cx(C.container,t),"data-test-id":u,tabIndex:-1,role:m,"data-position-absolute":!0}),o);return p&&!a?null:h?O.createElement(Portal,null,g):g},w=O.forwardRef(Pe);var R=e=>{var t;let r=O.Children.only(e.children),{getTriggerProps:o}=T();return O.cloneElement(r,P(i({},o(r.ref)),{"aria-haspopup":(t=r.props["aria-haspopup"])!=null?t:"dialog"}))};var H=q;H.Content=w;H.Trigger=R;
+
+export { H as Popover, w as PopoverContent, R as PopoverTrigger };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Popover.tsx","../src/PopoverContext.ts","../src/PopoverContent/PopoverContent.tsx","../src/PopoverContent/PopoverContent.styles.ts","../src/PopoverTrigger/PopoverTrigger.tsx","../src/CompoundPopover.tsx"],"names":["React","useMemo","useState","useEffect","useCallback","useId","mergeRefs","PopoverContext","usePopoverContext","context","PopoverContextProvider","usePopper","Popover","props","children","isOpen","placement","isFullWidth","isAutoalignmentEnabled","usePortal","closeOnBlur","closeOnEsc","onClose","autoFocus","id","offset","renderOnlyWhenOpen","triggerElement","setTriggerElement","popoverElement","setPopoverElement","popperAttributes","update","popperStyles","__spreadProps","__spreadValues","sameWidth","__async","popoverGeneratedId","popoverId","closeAndFocusTrigger","contextValue","_ref","_props","event","relatedTarget","targetIsPopover","targetIsTrigger","state","reference","cx","Portal","css","tokens","getPopoverContentStyles","_PopoverContent","ref","_a","className","testId","role","otherProps","__objRest","getPopoverProps","styles","content","PopoverContent","PopoverTrigger","child","getTriggerProps"],"mappings":"kyBAAA,OAAOA,IAAS,WAAAC,GAAS,YAAAC,EAAU,aAAAC,EAAW,eAAAC,OAAmB,QACjE,OAAS,SAAAC,GAAO,aAAAC,MAAmC,uBCDnD,OAAON,MAA0B,QAajC,IAAMO,EAAiBP,EAAM,cAC3B,MACF,EAEaQ,EAAoB,IAAM,CACrC,IAAMC,EAAUT,EAAM,WAAWO,CAAc,EAE/C,GAAIE,IAAY,OACd,MAAM,IAAI,MACR,gEACF,EAGF,OAAOA,CACT,EAEaC,EAAyBH,EAAe,SDzBrD,OAAS,aAAAI,OAAiB,eAuGnB,SAASC,EAAQC,EAAkC,CACxD,GAAM,CACJ,SAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,eACZ,YAAAC,EAAc,GACd,uBAAAC,EAAyB,GACzB,UAAAC,EAAY,GACZ,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,QAAAC,EACA,UAAAC,EAAY,GACZ,GAAAC,EACA,OAAAC,EAAS,CAAC,EAAG,CAAC,EACd,mBAAAC,EAAqB,EACvB,EAAIb,EAEE,CAACc,EAAgBC,CAAiB,EAAI1B,EAC1C,IACF,EACM,CAAC2B,EAAgBC,CAAiB,EAAI5B,EAC1C,IACF,EAEM,CACJ,WAAY6B,EACZ,OAAAC,EACA,OAAQC,CACV,EAAItB,GAAUgB,EAAgBE,EAAgB,CAC5C,UAAAb,EACA,UAAW,CACT,CACE,KAAM,SACN,QAAS,CACP,OAAAS,CACF,CACF,EACAS,EAAAC,EAAA,GACKC,IADL,CAEE,QAASnB,CACX,GACA,CACE,KAAM,kBACN,QAASC,EACT,QAAS,CACP,SAAU,EACZ,CACF,EACA,CACE,KAAM,OACN,QAASA,CACX,CACF,CACF,CAAC,EAEDf,EAAU,IAAM,CACVY,GAAUQ,GAAaM,GACzBA,EAAe,MAAM,CAAE,cAAe,EAAK,CAAC,CAGhD,EAAG,CAACd,EAAQc,CAAc,CAAC,EAE3B1B,EAAU,IAAM,EACS,IAAYkC,EAAA,sBAC7BtB,GAAUiB,IACZ,MAAMA,EAAO,EAEjB,IACe,CACjB,EAAG,CAACjB,EAAQiB,CAAM,CAAC,EAEnB,IAAMM,EAAqBjC,GAAM,OAAW,iBAAiB,EACvDkC,EAAYf,GAAMc,EAElBE,EAAuBpC,GAAY,IAAM,CAC7CkB,GAAA,MAAAA,IAGA,WAAW,IAAMK,GAAA,YAAAA,EAAgB,MAAM,CAAE,cAAe,EAAK,GAAI,CAAC,CACpE,EAAG,CAACL,EAASK,CAAc,CAAC,EAEtBc,EAAmCxC,GACvC,KAAO,CACL,OAAQ,QAAQc,CAAM,EACtB,UAAAI,EACA,mBAAAO,EACA,gBAAiB,CAACgB,EAAO,QAAU,CACjC,IAAKpC,EAAUsB,EAAmBc,CAAI,EACtC,CAAC,iBAAkB,QAAQ3B,CAAM,EACjC,CAAC,iBAAkBwB,CACrB,GACA,gBAAiB,CAACI,EAAS,CAAC,EAAGD,EAAO,OAAUR,EAAAC,EAAA,GAC3CJ,EAAiB,QAD0B,CAE9C,MAAOI,IAAA,GACDQ,EAAO,OAAS,CAAC,GAClBV,EAAa,QAElB,IAAK3B,EAAUwB,EAAmBY,CAAI,EACtC,GAAIH,EACJ,OAASK,GAA4C,CAKnD,GAJID,EAAO,QACTA,EAAO,OAAOC,CAAK,EAGjB,CAACxB,EACH,OAGF,IAAMyB,EAAgBD,EAAM,cAEtBE,EACJjB,IAAmBgB,IACnBhB,GAAA,YAAAA,EAAgB,SAASgB,IACrBE,EACJpB,IAAmBkB,IACnBlB,GAAA,YAAAA,EAAgB,SAASkB,IAEvBC,GAAmBC,GAIvBzB,GAAA,MAAAA,GACF,EACA,UAAYsB,GAA+C,CACrDD,EAAO,WACTA,EAAO,UAAUC,CAAK,EAGpBvB,GAAcuB,EAAM,MAAQ,UAC9BJ,EAAqB,CAEzB,CACF,EACF,GACA,CACEzB,EACAW,EACAK,EACAE,EACAd,EACAoB,EACAlB,EACAD,EACAS,EACAF,EACAa,EACAlB,CACF,CACF,EAEA,OACEtB,GAAA,cAACU,EAAA,CAAuB,MAAO+B,GAC5B3B,CACH,CAEJ,CAKA,IAAMsB,GAAwC,CAC5C,KAAM,YACN,QAAS,GACT,MAAO,cACP,SAAU,CAAC,eAAe,EAC1B,GAAI,CAAC,CAAE,MAAAY,CAAM,IAAM,CACjBA,EAAM,OAAO,OAAO,MAAQ,GAAGA,EAAM,MAAM,UAAU,SACvD,EACA,OACE,CAAC,CAAE,MAAAA,CAAM,IACT,IAAM,CACJ,IAAMC,EAAYD,EAAM,SAAS,UACjCA,EAAM,SAAS,OAAO,MAAM,MAAQ,GAAGC,EAAU,eACnD,CACJ,EEzRA,OAAOjD,MAAW,QAClB,OAAS,MAAAkD,OAAU,UAOnB,OAAS,UAAAC,OAAc,wBCRvB,OAAS,OAAAC,OAAW,UACpB,OAAOC,MAAY,yBAEZ,IAAMC,EAA2BvC,IAAqB,CAC3D,UAAWqC,GAAI,CACb,QAASrC,EAAS,UAAY,OAC9B,WAAYsC,EAAO,WACnB,OAAQ,EACR,aAAcA,EAAO,mBACrB,UAAWA,EAAO,iBAClB,OAAQA,EAAO,eACf,UAAW,CACT,UAAWA,EAAO,YAClB,QAAS,MACX,EACA,8BAA+B,CAC7B,UAAWA,EAAO,gBACpB,CACF,CAAC,CACH,GDCA,IAAME,GAAkB,CAAC1C,EAAyC2C,IAAQ,CACxE,IAMIC,EAAA5C,EALF,UAAAC,EACA,UAAA4C,EACA,OAAAC,EAAS,wBACT,KAAAC,EAAO,QAzBX,EA2BMH,EADCI,EAAAC,EACDL,EADC,CAJH,WACA,YACA,SACA,SAGI,CAAE,OAAA1C,EAAQ,mBAAAW,EAAoB,gBAAAqC,EAAiB,UAAA5C,CAAU,EAC7DX,EAAkB,EAEdwD,EAASV,EAAwBvC,CAAM,EAEvCkD,EACJjE,EAAA,cAAC,MAAAkC,EAAAC,IAAA,GACK0B,GACAE,EAAgBF,EAAYL,CAAG,GAFpC,CAGC,UAAWN,GAAGc,EAAO,UAAWN,CAAS,EACzC,eAAcC,EACd,SAAU,GACV,KAAMC,EAGN,yBAAsB,KAErB9C,CACH,EAGF,OAAIY,GAAsB,CAACX,EAClB,KAGFI,EAAYnB,EAAA,cAACmD,GAAA,KAAQc,CAAQ,EAAYA,CAClD,EAEaC,EAAiBlE,EAAM,WAAWuD,EAAe,EExD9D,OAAOvD,MAAW,QAUX,IAAMmE,EAAkBtD,GAA+B,CAV9D,IAAA4C,EAWE,IAAMW,EAAQpE,EAAM,SAAS,KAAKa,EAAM,QAAQ,EAC1C,CAAE,gBAAAwD,CAAgB,EAAI7D,EAAkB,EAE9C,OAAOR,EAAM,aAAaoE,EAAOlC,EAAAC,EAAA,GAC5BkC,EAAgBD,EAAM,GAAG,GADG,CAE/B,iBAAiBX,EAAAW,EAAM,MAAM,mBAAZ,KAAAX,EAAgC,QACnD,EAAC,CACH,ECTO,IAAM7C,EAAUA,EACvBA,EAAQ,QAAUsD,EAClBtD,EAAQ,QAAUuD","sourcesContent":["import React, { useMemo, useState, useEffect, useCallback } from 'react';\nimport { useId, mergeRefs, type ExpandProps } from '@contentful/f36-core';\nimport type { Placement, Modifier } from '@popperjs/core';\nimport { PopoverContextProvider, PopoverContextType } from './PopoverContext';\nimport { usePopper } from 'react-popper';\n\nexport interface PopoverProps {\n  children: React.ReactNode;\n\n  /**\n   * Boolean to determine if the Popover should be the same width as\n   * the trigger element\n   *\n   * @default false\n   */\n  isFullWidth?: boolean;\n\n  /**\n   * Boolean to control whether or not the Popover is open\n   *\n   * @default false\n   */\n  isOpen?: boolean;\n\n  /**\n   * Callback fired when the popover closes\n   */\n  onClose?: () => void;\n\n  /**\n   * Determines the preferred position of the Popover. This position is not\n   * guaranteed, as the Popover might be moved to fit the viewport\n   *\n   * @default bottom-start\n   */\n  placement?: Placement;\n\n  /**\n   * Boolean to control if popover is allowed to change its placement automatically\n   * based on available space in the viewport.\n   *\n   * For example:\n   * If you set placement prop to bottom, but there isn't enough space to position the popover in that direction,\n   * it will change the popper placement to top. As soon as enough space is detected, the placement will be reverted to the defined one.\n   *\n   * If you want the popover to strictly follow the placement prop you should set this prop to false.\n   *\n   * @default true\n   */\n  isAutoalignmentEnabled?: boolean;\n\n  /**\n   * Boolean to control whether or not to render the Popover in a React Portal.\n   * Rendering content inside a Portal allows the Popover to escape the bounds\n   * of its parent while still being positioned correctly. Using a Portal is\n   * necessary if an ancestor of the Popover hides overflow.\n   *\n   * @default true\n   */\n  usePortal?: boolean;\n\n  /**\n   * If true, the popover will close when you blur out it by clicking outside or tabbing out\n   *\n   * @default true\n   */\n  closeOnBlur?: boolean;\n\n  /**\n   * If true, the popover will close when you hit the Esc key\n   *\n   * @default true\n   */\n  closeOnEsc?: boolean;\n\n  /**\n   * If true, the popover will be focused after opening\n   *\n   * @default true\n   */\n  autoFocus?: boolean;\n\n  /**\n   * Popover id. Will be used as an `id` attribute on popover\n   * and as `aria-controls` attribute on trigger\n   *\n   * @default true\n   */\n  id?: string;\n\n  /**\n   * The `X-axis` and `Y-axis` offset to position popper element\n   * from its trigger element. `[X, Y]`\n   *\n   * @default [1, 4]\n   */\n  offset?: [number, number];\n\n  /**\n   * Defines if popover should be rendered in the DOM only when it's open\n   * or all the time (after the component has been mounted)\n   *\n   * @default true\n   */\n  renderOnlyWhenOpen?: boolean;\n}\n\nexport function Popover(props: ExpandProps<PopoverProps>) {\n  const {\n    children,\n    isOpen,\n    placement = 'bottom-start',\n    isFullWidth = false,\n    isAutoalignmentEnabled = true,\n    usePortal = true,\n    closeOnBlur = true,\n    closeOnEsc = true,\n    onClose,\n    autoFocus = true,\n    id,\n    offset = [1, 4],\n    renderOnlyWhenOpen = true,\n  } = props;\n\n  const [triggerElement, setTriggerElement] = useState<HTMLElement | null>(\n    null,\n  );\n  const [popoverElement, setPopoverElement] = useState<HTMLElement | null>(\n    null,\n  );\n\n  const {\n    attributes: popperAttributes,\n    update,\n    styles: popperStyles,\n  } = usePopper(triggerElement, popoverElement, {\n    placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset,\n        },\n      },\n      {\n        ...sameWidth,\n        enabled: isFullWidth,\n      },\n      {\n        name: 'preventOverflow',\n        enabled: isAutoalignmentEnabled,\n        options: {\n          mainAxis: true,\n        },\n      },\n      {\n        name: 'flip',\n        enabled: isAutoalignmentEnabled,\n      },\n    ],\n  });\n\n  useEffect(() => {\n    if (isOpen && autoFocus && popoverElement) {\n      popoverElement.focus({ preventScroll: true });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, popoverElement]);\n\n  useEffect(() => {\n    const updatePosition = async () => {\n      if (isOpen && update) {\n        await update();\n      }\n    };\n    updatePosition();\n  }, [isOpen, update]);\n\n  const popoverGeneratedId = useId(undefined, 'popover-content');\n  const popoverId = id || popoverGeneratedId;\n\n  const closeAndFocusTrigger = useCallback(() => {\n    onClose?.();\n\n    // setTimeout trick to make it work with focus-lock\n    setTimeout(() => triggerElement?.focus({ preventScroll: true }), 0);\n  }, [onClose, triggerElement]);\n\n  const contextValue: PopoverContextType = useMemo(\n    () => ({\n      isOpen: Boolean(isOpen),\n      usePortal,\n      renderOnlyWhenOpen,\n      getTriggerProps: (_ref = null) => ({\n        ref: mergeRefs(setTriggerElement, _ref),\n        ['aria-expanded']: Boolean(isOpen),\n        ['aria-controls']: popoverId,\n      }),\n      getPopoverProps: (_props = {}, _ref = null) => ({\n        ...popperAttributes.popper,\n        style: {\n          ...(_props.style || {}),\n          ...popperStyles.popper,\n        },\n        ref: mergeRefs(setPopoverElement, _ref),\n        id: popoverId,\n        onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n          if (_props.onBlur) {\n            _props.onBlur(event);\n          }\n\n          if (!closeOnBlur) {\n            return;\n          }\n\n          const relatedTarget = event.relatedTarget as Node;\n\n          const targetIsPopover =\n            popoverElement === relatedTarget ||\n            popoverElement?.contains(relatedTarget);\n          const targetIsTrigger =\n            triggerElement === relatedTarget ||\n            triggerElement?.contains(relatedTarget);\n\n          if (targetIsPopover || targetIsTrigger) {\n            return;\n          }\n\n          onClose?.();\n        },\n        onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n          if (_props.onKeyDown) {\n            _props.onKeyDown(event);\n          }\n\n          if (closeOnEsc && event.key === 'Escape') {\n            closeAndFocusTrigger();\n          }\n        },\n      }),\n    }),\n    [\n      isOpen,\n      renderOnlyWhenOpen,\n      popperAttributes,\n      popperStyles,\n      usePortal,\n      popoverId,\n      closeOnEsc,\n      closeOnBlur,\n      popoverElement,\n      triggerElement,\n      closeAndFocusTrigger,\n      onClose,\n    ],\n  );\n\n  return (\n    <PopoverContextProvider value={contextValue}>\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\n/**\n * Sets the popover width to the size of the trigger element.\n */\nconst sameWidth: Modifier<'sameWidth', any> = {\n  name: 'sameWidth',\n  enabled: true,\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n  fn: ({ state }) => {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  effect:\n    ({ state }) =>\n    () => {\n      const reference = state.elements.reference as HTMLElement;\n      state.elements.popper.style.width = `${reference.offsetWidth}px`;\n    },\n};\n","import React, { HTMLProps } from 'react';\n\nexport type PopoverContextType = {\n  isOpen: boolean;\n  usePortal: boolean;\n  renderOnlyWhenOpen: boolean;\n  getPopoverProps: (\n    _props: HTMLProps<HTMLDivElement>,\n    _ref: React.Ref<HTMLDivElement>,\n  ) => HTMLProps<HTMLDivElement>;\n  getTriggerProps: (_ref: React.Ref<HTMLElement>) => HTMLProps<HTMLElement>;\n};\n\nconst PopoverContext = React.createContext<PopoverContextType | undefined>(\n  undefined,\n);\n\nexport const usePopoverContext = () => {\n  const context = React.useContext(PopoverContext);\n\n  if (context === undefined) {\n    throw new Error(\n      'usePopoverContext must be used within a PopoverContextProvider',\n    );\n  }\n\n  return context;\n};\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { usePopoverContext } from '../PopoverContext';\nimport { Portal } from '@contentful/f36-utils';\nimport { getPopoverContentStyles } from './PopoverContent.styles';\n\ninterface PopoverContentInternalProps extends CommonProps {\n  children?: React.ReactNode;\n}\n\nexport type PopoverContentProps = PropsWithHTMLElement<\n  PopoverContentInternalProps,\n  'div'\n>;\n\nconst _PopoverContent = (props: ExpandProps<PopoverContentProps>, ref) => {\n  const {\n    children,\n    className,\n    testId = 'cf-ui-popover-content',\n    role = 'dialog',\n    ...otherProps\n  } = props;\n  const { isOpen, renderOnlyWhenOpen, getPopoverProps, usePortal } =\n    usePopoverContext();\n\n  const styles = getPopoverContentStyles(isOpen);\n\n  const content = (\n    <div\n      {...otherProps}\n      {...getPopoverProps(otherProps, ref)}\n      className={cx(styles.container, className)}\n      data-test-id={testId}\n      tabIndex={-1}\n      role={role}\n      // specific attribute to mark that this element is absolute positioned\n      // for internal contentful apps usage\n      data-position-absolute\n    >\n      {children}\n    </div>\n  );\n\n  if (renderOnlyWhenOpen && !isOpen) {\n    return null;\n  }\n\n  return usePortal ? <Portal>{content}</Portal> : content;\n};\n\nexport const PopoverContent = React.forwardRef(_PopoverContent);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getPopoverContentStyles = (isOpen: boolean) => ({\n  container: css({\n    display: isOpen ? 'initial' : 'none',\n    background: tokens.colorWhite,\n    border: 0,\n    borderRadius: tokens.borderRadiusMedium,\n    boxShadow: tokens.boxShadowDefault,\n    zIndex: tokens.zIndexDropdown,\n    '&:focus': {\n      boxShadow: tokens.glowPrimary,\n      outline: 'none',\n    },\n    '&:focus:not(:focus-visible)': {\n      boxShadow: tokens.boxShadowDefault,\n    },\n  }),\n});\n","import React from 'react';\nimport { usePopoverContext } from '../PopoverContext';\n\nexport interface PopoverTriggerProps {\n  children: React.ReactNode;\n}\n\n/**\n * PopoverTrigger opens the popover. It must be an interactive element.\n */\nexport const PopoverTrigger = (props: PopoverTriggerProps) => {\n  const child = React.Children.only(props.children) as any;\n  const { getTriggerProps } = usePopoverContext();\n\n  return React.cloneElement(child, {\n    ...getTriggerProps(child.ref),\n    'aria-haspopup': child.props['aria-haspopup'] ?? 'dialog',\n  });\n};\n","import { Popover as OriginalPopover } from './Popover';\nimport { PopoverContent } from './PopoverContent/PopoverContent';\nimport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\n\ntype CompoundPopover = typeof OriginalPopover & {\n  Content: typeof PopoverContent;\n  Trigger: typeof PopoverTrigger;\n};\n\nexport const Popover = OriginalPopover as CompoundPopover;\nPopover.Content = PopoverContent;\nPopover.Trigger = PopoverTrigger;\n"]}

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@contentful/f36-popover",
-  "version": "4.16.0",
+  "version": "4.19.0",
   "description": "Forma 36: Popover component",
   "scripts": {
-    "build": "parcel build"
+    "build": "tsup"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "^4.16.0",
+    "@contentful/f36-core": "^4.19.0",
     "@contentful/f36-tokens": "^4.0.1",
-    "@contentful/f36-utils": "^4.16.0",
+    "@contentful/f36-utils": "^4.19.0",
     "@popperjs/core": "^2.11.5",
     "emotion": "^10.0.17",
     "react-popper": "^2.3.0"
@@ -21,9 +21,9 @@
   "files": [
     "dist"
   ],
-  "main": "dist/main.js",
-  "module": "dist/module.js",
-  "types": "dist/types.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "sideEffects": false,
   "browserslist": "extends @contentful/browserslist-config",

package/dist/main.js

@@ -1,234 +0,0 @@
-var $36WSQ$react = require("react");
-var $36WSQ$contentfulf36core = require("@contentful/f36-core");
-var $36WSQ$reactpopper = require("react-popper");
-var $36WSQ$emotion = require("emotion");
-var $36WSQ$contentfulf36utils = require("@contentful/f36-utils");
-var $36WSQ$contentfulf36tokens = require("@contentful/f36-tokens");
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-$parcel$export(module.exports, "Popover", () => $dd96ee4ab94ee75f$export$5b6b19405a83ff9d);
-$parcel$export(module.exports, "PopoverTrigger", () => $b3e2e9dc1eae953e$export$7dacb05d26466c3);
-$parcel$export(module.exports, "PopoverContent", () => $ec6b27dd96eb674c$export$d7e1f420b25549ff);
-
-
-
-const $a5e54ab4533eb4d3$var$PopoverContext = (0, ($parcel$interopDefault($36WSQ$react))).createContext(undefined);
-const $a5e54ab4533eb4d3$export$1468d0761b26e6c8 = ()=>{
-    const context = (0, ($parcel$interopDefault($36WSQ$react))).useContext($a5e54ab4533eb4d3$var$PopoverContext);
-    if (context === undefined) throw new Error("usePopoverContext must be used within a PopoverContextProvider");
-    return context;
-};
-const $a5e54ab4533eb4d3$export$f5300fbf692a63ec = $a5e54ab4533eb4d3$var$PopoverContext.Provider;
-
-
-
-function $ed3840333e471e4e$export$5b6b19405a83ff9d(props) {
-    const { children: children , isOpen: isOpen , placement: placement = "bottom-start" , isFullWidth: isFullWidth = false , isAutoalignmentEnabled: isAutoalignmentEnabled = true , usePortal: usePortal = true , closeOnBlur: closeOnBlur = true , closeOnEsc: closeOnEsc = true , onClose: onClose , autoFocus: autoFocus = true , id: id , offset: offset = [
-        1,
-        4
-    ] , renderOnlyWhenOpen: renderOnlyWhenOpen = true  } = props;
-    const [triggerElement, setTriggerElement] = (0, $36WSQ$react.useState)(null);
-    const [popoverElement, setPopoverElement] = (0, $36WSQ$react.useState)(null);
-    const { attributes: popperAttributes , update: update , styles: popperStyles  } = (0, $36WSQ$reactpopper.usePopper)(triggerElement, popoverElement, {
-        placement: placement,
-        modifiers: [
-            {
-                name: "offset",
-                options: {
-                    offset: offset
-                }
-            },
-            {
-                ...$ed3840333e471e4e$var$sameWidth,
-                enabled: isFullWidth
-            },
-            {
-                name: "preventOverflow",
-                enabled: isAutoalignmentEnabled,
-                options: {
-                    mainAxis: true
-                }
-            },
-            {
-                name: "flip",
-                enabled: isAutoalignmentEnabled
-            }
-        ]
-    });
-    (0, $36WSQ$react.useEffect)(()=>{
-        if (isOpen && autoFocus && popoverElement) popoverElement.focus({
-            preventScroll: true
-        });
-         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        isOpen,
-        popoverElement
-    ]);
-    (0, $36WSQ$react.useEffect)(()=>{
-        const updatePosition = async ()=>{
-            if (isOpen && update) await update();
-        };
-        updatePosition();
-    }, [
-        isOpen,
-        update
-    ]);
-    const popoverGeneratedId = (0, $36WSQ$contentfulf36core.useId)(undefined, "popover-content");
-    const popoverId = id || popoverGeneratedId;
-    const closeAndFocusTrigger = (0, $36WSQ$react.useCallback)(()=>{
-        onClose === null || onClose === void 0 ? void 0 : onClose(); // setTimeout trick to make it work with focus-lock
-        setTimeout(()=>{
-            return triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.focus({
-                preventScroll: true
-            });
-        }, 0);
-    }, [
-        onClose,
-        triggerElement
-    ]);
-    const contextValue = (0, $36WSQ$react.useMemo)(()=>{
-        return {
-            isOpen: Boolean(isOpen),
-            usePortal: usePortal,
-            renderOnlyWhenOpen: renderOnlyWhenOpen,
-            getTriggerProps: (_ref = null)=>({
-                    ref: (0, $36WSQ$contentfulf36core.mergeRefs)(setTriggerElement, _ref),
-                    ["aria-expanded"]: Boolean(isOpen),
-                    ["aria-controls"]: popoverId
-                }),
-            getPopoverProps: (_props = {}, _ref = null)=>{
-                return {
-                    ...popperAttributes.popper,
-                    style: {
-                        ..._props.style || {},
-                        ...popperStyles.popper
-                    },
-                    ref: (0, $36WSQ$contentfulf36core.mergeRefs)(setPopoverElement, _ref),
-                    id: popoverId,
-                    onBlur: (event)=>{
-                        if (_props.onBlur) _props.onBlur(event);
-                        if (!closeOnBlur) return;
-                        const relatedTarget = event.relatedTarget;
-                        const targetIsPopover = popoverElement === relatedTarget || (popoverElement === null || popoverElement === void 0 ? void 0 : popoverElement.contains(relatedTarget));
-                        const targetIsTrigger = triggerElement === relatedTarget || (triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.contains(relatedTarget));
-                        if (targetIsPopover || targetIsTrigger) return;
-                        onClose === null || onClose === void 0 ? void 0 : onClose();
-                    },
-                    onKeyDown: (event)=>{
-                        if (_props.onKeyDown) _props.onKeyDown(event);
-                        if (closeOnEsc && event.key === "Escape") closeAndFocusTrigger();
-                    }
-                };
-            }
-        };
-    }, [
-        isOpen,
-        renderOnlyWhenOpen,
-        popperAttributes,
-        popperStyles,
-        usePortal,
-        popoverId,
-        closeOnEsc,
-        closeOnBlur,
-        popoverElement,
-        triggerElement,
-        closeAndFocusTrigger,
-        onClose
-    ]);
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($36WSQ$react))).createElement((0, $a5e54ab4533eb4d3$export$f5300fbf692a63ec), {
-        value: contextValue
-    }, children);
-}
-/**
- * Sets the popover width to the size of the trigger element.
- */ const $ed3840333e471e4e$var$sameWidth = {
-    name: "sameWidth",
-    enabled: true,
-    phase: "beforeWrite",
-    requires: [
-        "computeStyles"
-    ],
-    fn: ({ state: state  })=>{
-        state.styles.popper.width = `${state.rects.reference.width}px`;
-    },
-    effect: ({ state: state  })=>()=>{
-            const reference = state.elements.reference;
-            state.elements.popper.style.width = `${reference.offsetWidth}px`;
-        }
-};
-
-
-
-
-
-
-
-
-const $ac842fe302ff665f$export$fbd764fe961047f7 = (isOpen)=>({
-        container: /*#__PURE__*/ (0, $36WSQ$emotion.css)({
-            display: isOpen ? "initial" : "none",
-            background: (0, ($parcel$interopDefault($36WSQ$contentfulf36tokens))).colorWhite,
-            border: 0,
-            borderRadius: (0, ($parcel$interopDefault($36WSQ$contentfulf36tokens))).borderRadiusMedium,
-            boxShadow: (0, ($parcel$interopDefault($36WSQ$contentfulf36tokens))).boxShadowDefault,
-            zIndex: (0, ($parcel$interopDefault($36WSQ$contentfulf36tokens))).zIndexDropdown,
-            "&:focus": {
-                boxShadow: (0, ($parcel$interopDefault($36WSQ$contentfulf36tokens))).glowPrimary,
-                outline: "none"
-            },
-            "&:focus:not(:focus-visible)": {
-                boxShadow: (0, ($parcel$interopDefault($36WSQ$contentfulf36tokens))).boxShadowDefault
-            }
-        })
-    });
-
-
-const $ec6b27dd96eb674c$var$_PopoverContent = (props, ref)=>{
-    const { children: children , className: className , testId: testId = "cf-ui-popover-content" , role: role = "dialog" , ...otherProps } = props;
-    const { isOpen: isOpen , renderOnlyWhenOpen: renderOnlyWhenOpen , getPopoverProps: getPopoverProps , usePortal: usePortal  } = (0, $a5e54ab4533eb4d3$export$1468d0761b26e6c8)();
-    const styles = (0, $ac842fe302ff665f$export$fbd764fe961047f7)(isOpen);
-    const content = /*#__PURE__*/ (0, ($parcel$interopDefault($36WSQ$react))).createElement("div", {
-        ...otherProps,
-        ...getPopoverProps(otherProps, ref),
-        className: (0, $36WSQ$emotion.cx)(styles.container, className),
-        "data-test-id": testId,
-        tabIndex: -1,
-        role: role,
-        // for internal contentful apps usage
-        "data-position-absolute": true
-    }, children);
-    if (renderOnlyWhenOpen && !isOpen) return null;
-    return usePortal ? /*#__PURE__*/ (0, ($parcel$interopDefault($36WSQ$react))).createElement((0, $36WSQ$contentfulf36utils.Portal), null, content) : content;
-};
-const $ec6b27dd96eb674c$export$d7e1f420b25549ff = /*#__PURE__*/ (0, ($parcel$interopDefault($36WSQ$react))).forwardRef($ec6b27dd96eb674c$var$_PopoverContent);
-
-
-
-
-const $b3e2e9dc1eae953e$export$7dacb05d26466c3 = (props)=>{
-    const child = (0, ($parcel$interopDefault($36WSQ$react))).Children.only(props.children);
-    const { getTriggerProps: getTriggerProps  } = (0, $a5e54ab4533eb4d3$export$1468d0761b26e6c8)();
-    var ref;
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($36WSQ$react))).cloneElement(child, {
-        ...getTriggerProps(child.ref),
-        "aria-haspopup": (ref = child.props["aria-haspopup"]) !== null && ref !== void 0 ? ref : "dialog"
-    });
-};
-
-
-const $dd96ee4ab94ee75f$export$5b6b19405a83ff9d = (0, $ed3840333e471e4e$export$5b6b19405a83ff9d);
-$dd96ee4ab94ee75f$export$5b6b19405a83ff9d.Content = (0, $ec6b27dd96eb674c$export$d7e1f420b25549ff);
-$dd96ee4ab94ee75f$export$5b6b19405a83ff9d.Trigger = (0, $b3e2e9dc1eae953e$export$7dacb05d26466c3);
-
-
-
-
-
-
-//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/components/popover/src/index.ts","packages/components/popover/src/CompoundPopover.tsx","packages/components/popover/src/Popover.tsx","packages/components/popover/src/PopoverContext.ts","packages/components/popover/src/PopoverContent/PopoverContent.tsx","packages/components/popover/src/PopoverContent/PopoverContent.styles.ts","packages/components/popover/src/PopoverTrigger/PopoverTrigger.tsx"],"sourcesContent":["export { Popover } from './CompoundPopover';\nexport type { PopoverProps } from './Popover';\nexport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\nexport type { PopoverTriggerProps } from './PopoverTrigger/PopoverTrigger';\nexport { PopoverContent } from './PopoverContent/PopoverContent';\nexport type { PopoverContentProps } from './PopoverContent/PopoverContent';\n","import { Popover as OriginalPopover } from './Popover';\nimport { PopoverContent } from './PopoverContent/PopoverContent';\nimport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\n\ntype CompoundPopover = typeof OriginalPopover & {\n  Content: typeof PopoverContent;\n  Trigger: typeof PopoverTrigger;\n};\n\nexport const Popover = OriginalPopover as CompoundPopover;\nPopover.Content = PopoverContent;\nPopover.Trigger = PopoverTrigger;\n","import React, { useMemo, useState, useEffect, useCallback } from 'react';\nimport { useId, mergeRefs, type ExpandProps } from '@contentful/f36-core';\nimport type { Placement, Modifier } from '@popperjs/core';\nimport { PopoverContextProvider, PopoverContextType } from './PopoverContext';\nimport { usePopper } from 'react-popper';\n\nexport interface PopoverProps {\n  children: React.ReactNode;\n\n  /**\n   * Boolean to determine if the Popover should be the same width as\n   * the trigger element\n   *\n   * @default false\n   */\n  isFullWidth?: boolean;\n\n  /**\n   * Boolean to control whether or not the Popover is open\n   *\n   * @default false\n   */\n  isOpen?: boolean;\n\n  /**\n   * Callback fired when the popover closes\n   */\n  onClose?: () => void;\n\n  /**\n   * Determines the preferred position of the Popover. This position is not\n   * guaranteed, as the Popover might be moved to fit the viewport\n   *\n   * @default bottom-start\n   */\n  placement?: Placement;\n\n  /**\n   * Boolean to control if popover is allowed to change its placement automatically\n   * based on available space in the viewport.\n   *\n   * For example:\n   * If you set placement prop to bottom, but there isn't enough space to position the popover in that direction,\n   * it will change the popper placement to top. As soon as enough space is detected, the placement will be reverted to the defined one.\n   *\n   * If you want the popover to strictly follow the placement prop you should set this prop to false.\n   *\n   * @default true\n   */\n  isAutoalignmentEnabled?: boolean;\n\n  /**\n   * Boolean to control whether or not to render the Popover in a React Portal.\n   * Rendering content inside a Portal allows the Popover to escape the bounds\n   * of its parent while still being positioned correctly. Using a Portal is\n   * necessary if an ancestor of the Popover hides overflow.\n   *\n   * @default true\n   */\n  usePortal?: boolean;\n\n  /**\n   * If true, the popover will close when you blur out it by clicking outside or tabbing out\n   *\n   * @default true\n   */\n  closeOnBlur?: boolean;\n\n  /**\n   * If true, the popover will close when you hit the Esc key\n   *\n   * @default true\n   */\n  closeOnEsc?: boolean;\n\n  /**\n   * If true, the popover will be focused after opening\n   *\n   * @default true\n   */\n  autoFocus?: boolean;\n\n  /**\n   * Popover id. Will be used as an `id` attribute on popover\n   * and as `aria-controls` attribute on trigger\n   *\n   * @default true\n   */\n  id?: string;\n\n  /**\n   * The `X-axis` and `Y-axis` offset to position popper element\n   * from its trigger element. `[X, Y]`\n   *\n   * @default [1, 4]\n   */\n  offset?: [number, number];\n\n  /**\n   * Defines if popover should be rendered in the DOM only when it's open\n   * or all the time (after the component has been mounted)\n   *\n   * @default true\n   */\n  renderOnlyWhenOpen?: boolean;\n}\n\nexport function Popover(props: ExpandProps<PopoverProps>) {\n  const {\n    children,\n    isOpen,\n    placement = 'bottom-start',\n    isFullWidth = false,\n    isAutoalignmentEnabled = true,\n    usePortal = true,\n    closeOnBlur = true,\n    closeOnEsc = true,\n    onClose,\n    autoFocus = true,\n    id,\n    offset = [1, 4],\n    renderOnlyWhenOpen = true,\n  } = props;\n\n  const [triggerElement, setTriggerElement] = useState<HTMLElement | null>(\n    null,\n  );\n  const [popoverElement, setPopoverElement] = useState<HTMLElement | null>(\n    null,\n  );\n\n  const {\n    attributes: popperAttributes,\n    update,\n    styles: popperStyles,\n  } = usePopper(triggerElement, popoverElement, {\n    placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset,\n        },\n      },\n      {\n        ...sameWidth,\n        enabled: isFullWidth,\n      },\n      {\n        name: 'preventOverflow',\n        enabled: isAutoalignmentEnabled,\n        options: {\n          mainAxis: true,\n        },\n      },\n      {\n        name: 'flip',\n        enabled: isAutoalignmentEnabled,\n      },\n    ],\n  });\n\n  useEffect(() => {\n    if (isOpen && autoFocus && popoverElement) {\n      popoverElement.focus({ preventScroll: true });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, popoverElement]);\n\n  useEffect(() => {\n    const updatePosition = async () => {\n      if (isOpen && update) {\n        await update();\n      }\n    };\n    updatePosition();\n  }, [isOpen, update]);\n\n  const popoverGeneratedId = useId(undefined, 'popover-content');\n  const popoverId = id || popoverGeneratedId;\n\n  const closeAndFocusTrigger = useCallback(() => {\n    onClose?.();\n\n    // setTimeout trick to make it work with focus-lock\n    setTimeout(() => triggerElement?.focus({ preventScroll: true }), 0);\n  }, [onClose, triggerElement]);\n\n  const contextValue: PopoverContextType = useMemo(\n    () => ({\n      isOpen: Boolean(isOpen),\n      usePortal,\n      renderOnlyWhenOpen,\n      getTriggerProps: (_ref = null) => ({\n        ref: mergeRefs(setTriggerElement, _ref),\n        ['aria-expanded']: Boolean(isOpen),\n        ['aria-controls']: popoverId,\n      }),\n      getPopoverProps: (_props = {}, _ref = null) => ({\n        ...popperAttributes.popper,\n        style: {\n          ...(_props.style || {}),\n          ...popperStyles.popper,\n        },\n        ref: mergeRefs(setPopoverElement, _ref),\n        id: popoverId,\n        onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n          if (_props.onBlur) {\n            _props.onBlur(event);\n          }\n\n          if (!closeOnBlur) {\n            return;\n          }\n\n          const relatedTarget = event.relatedTarget as Node;\n\n          const targetIsPopover =\n            popoverElement === relatedTarget ||\n            popoverElement?.contains(relatedTarget);\n          const targetIsTrigger =\n            triggerElement === relatedTarget ||\n            triggerElement?.contains(relatedTarget);\n\n          if (targetIsPopover || targetIsTrigger) {\n            return;\n          }\n\n          onClose?.();\n        },\n        onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n          if (_props.onKeyDown) {\n            _props.onKeyDown(event);\n          }\n\n          if (closeOnEsc && event.key === 'Escape') {\n            closeAndFocusTrigger();\n          }\n        },\n      }),\n    }),\n    [\n      isOpen,\n      renderOnlyWhenOpen,\n      popperAttributes,\n      popperStyles,\n      usePortal,\n      popoverId,\n      closeOnEsc,\n      closeOnBlur,\n      popoverElement,\n      triggerElement,\n      closeAndFocusTrigger,\n      onClose,\n    ],\n  );\n\n  return (\n    <PopoverContextProvider value={contextValue}>\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\n/**\n * Sets the popover width to the size of the trigger element.\n */\nconst sameWidth: Modifier<'sameWidth', any> = {\n  name: 'sameWidth',\n  enabled: true,\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n  fn: ({ state }) => {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  effect:\n    ({ state }) =>\n    () => {\n      const reference = state.elements.reference as HTMLElement;\n      state.elements.popper.style.width = `${reference.offsetWidth}px`;\n    },\n};\n","import React, { HTMLProps } from 'react';\n\nexport type PopoverContextType = {\n  isOpen: boolean;\n  usePortal: boolean;\n  renderOnlyWhenOpen: boolean;\n  getPopoverProps: (\n    _props: HTMLProps<HTMLDivElement>,\n    _ref: React.Ref<HTMLDivElement>,\n  ) => HTMLProps<HTMLDivElement>;\n  getTriggerProps: (_ref: React.Ref<HTMLElement>) => HTMLProps<HTMLElement>;\n};\n\nconst PopoverContext = React.createContext<PopoverContextType | undefined>(\n  undefined,\n);\n\nexport const usePopoverContext = () => {\n  const context = React.useContext(PopoverContext);\n\n  if (context === undefined) {\n    throw new Error(\n      'usePopoverContext must be used within a PopoverContextProvider',\n    );\n  }\n\n  return context;\n};\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { usePopoverContext } from '../PopoverContext';\nimport { Portal } from '@contentful/f36-utils';\nimport { getPopoverContentStyles } from './PopoverContent.styles';\n\ninterface PopoverContentInternalProps extends CommonProps {\n  children?: React.ReactNode;\n}\n\nexport type PopoverContentProps = PropsWithHTMLElement<\n  PopoverContentInternalProps,\n  'div'\n>;\n\nconst _PopoverContent = (props: ExpandProps<PopoverContentProps>, ref) => {\n  const {\n    children,\n    className,\n    testId = 'cf-ui-popover-content',\n    role = 'dialog',\n    ...otherProps\n  } = props;\n  const { isOpen, renderOnlyWhenOpen, getPopoverProps, usePortal } =\n    usePopoverContext();\n\n  const styles = getPopoverContentStyles(isOpen);\n\n  const content = (\n    <div\n      {...otherProps}\n      {...getPopoverProps(otherProps, ref)}\n      className={cx(styles.container, className)}\n      data-test-id={testId}\n      tabIndex={-1}\n      role={role}\n      // specific attribute to mark that this element is absolute positioned\n      // for internal contentful apps usage\n      data-position-absolute\n    >\n      {children}\n    </div>\n  );\n\n  if (renderOnlyWhenOpen && !isOpen) {\n    return null;\n  }\n\n  return usePortal ? <Portal>{content}</Portal> : content;\n};\n\nexport const PopoverContent = React.forwardRef(_PopoverContent);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getPopoverContentStyles = (isOpen: boolean) => ({\n  container: css({\n    display: isOpen ? 'initial' : 'none',\n    background: tokens.colorWhite,\n    border: 0,\n    borderRadius: tokens.borderRadiusMedium,\n    boxShadow: tokens.boxShadowDefault,\n    zIndex: tokens.zIndexDropdown,\n    '&:focus': {\n      boxShadow: tokens.glowPrimary,\n      outline: 'none',\n    },\n    '&:focus:not(:focus-visible)': {\n      boxShadow: tokens.boxShadowDefault,\n    },\n  }),\n});\n","import React from 'react';\nimport { usePopoverContext } from '../PopoverContext';\n\nexport interface PopoverTriggerProps {\n  children: React.ReactNode;\n}\n\n/**\n * PopoverTrigger opens the popover. It must be an interactive element.\n */\nexport const PopoverTrigger = (props: PopoverTriggerProps) => {\n  const child = React.Children.only(props.children) as any;\n  const { getTriggerProps } = usePopoverContext();\n\n  return React.cloneElement(child, {\n    ...getTriggerProps(child.ref),\n    'aria-haspopup': child.props['aria-haspopup'] ?? 'dialog',\n  });\n};\n"],"names":["Popover","PopoverProps","PopoverTrigger","PopoverTriggerProps","PopoverContent","PopoverContentProps","OriginalPopover","CompoundPopover","Content","Trigger","React","useMemo","useState","useEffect","useCallback","useId","mergeRefs","ExpandProps","Placement","Modifier","PopoverContextProvider","PopoverContextType","usePopper","children","ReactNode","isFullWidth","isOpen","onClose","placement","isAutoalignmentEnabled","usePortal","closeOnBlur","closeOnEsc","autoFocus","id","offset","renderOnlyWhenOpen","props","triggerElement","setTriggerElement","HTMLElement","popoverElement","setPopoverElement","attributes","popperAttributes","update","styles","popperStyles","modifiers","name","options","sameWidth","enabled","mainAxis","focus","preventScroll","updatePosition","popoverGeneratedId","undefined","popoverId","closeAndFocusTrigger","setTimeout","contextValue","Boolean","getTriggerProps","_ref","ref","getPopoverProps","_props","popper","style","onBlur","event","FocusEvent","HTMLDivElement","relatedTarget","Node","targetIsPopover","contains","targetIsTrigger","onKeyDown","KeyboardEvent","key","phase","requires","fn","state","width","rects","reference","effect","elements","offsetWidth","HTMLProps","Ref","PopoverContext","createContext","usePopoverContext","context","useContext","Error","Provider","CommonProps","PropsWithHTMLElement","Portal","getPopoverContentStyles","PopoverContentInternalProps","_PopoverContent","className","testId","role","otherProps","content","container","forwardRef","tokens","display","background","colorWhite","border","borderRadius","borderRadiusMedium","boxShadow","boxShadowDefault","zIndex","zIndexDropdown","glowPrimary","outline","child","Children","only","cloneElement"],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,225 +0,0 @@
-import $hYGFM$react, {useState as $hYGFM$useState, useEffect as $hYGFM$useEffect, useCallback as $hYGFM$useCallback, useMemo as $hYGFM$useMemo} from "react";
-import {useId as $hYGFM$useId, mergeRefs as $hYGFM$mergeRefs} from "@contentful/f36-core";
-import {usePopper as $hYGFM$usePopper} from "react-popper";
-import {cx as $hYGFM$cx, css as $hYGFM$css} from "emotion";
-import {Portal as $hYGFM$Portal} from "@contentful/f36-utils";
-import $hYGFM$contentfulf36tokens from "@contentful/f36-tokens";
-
-
-
-
-const $8c1b76e1106abdf5$var$PopoverContext = (0, $hYGFM$react).createContext(undefined);
-const $8c1b76e1106abdf5$export$1468d0761b26e6c8 = ()=>{
-    const context = (0, $hYGFM$react).useContext($8c1b76e1106abdf5$var$PopoverContext);
-    if (context === undefined) throw new Error("usePopoverContext must be used within a PopoverContextProvider");
-    return context;
-};
-const $8c1b76e1106abdf5$export$f5300fbf692a63ec = $8c1b76e1106abdf5$var$PopoverContext.Provider;
-
-
-
-function $fd548c9231cfa260$export$5b6b19405a83ff9d(props) {
-    const { children: children , isOpen: isOpen , placement: placement = "bottom-start" , isFullWidth: isFullWidth = false , isAutoalignmentEnabled: isAutoalignmentEnabled = true , usePortal: usePortal = true , closeOnBlur: closeOnBlur = true , closeOnEsc: closeOnEsc = true , onClose: onClose , autoFocus: autoFocus = true , id: id , offset: offset = [
-        1,
-        4
-    ] , renderOnlyWhenOpen: renderOnlyWhenOpen = true  } = props;
-    const [triggerElement, setTriggerElement] = (0, $hYGFM$useState)(null);
-    const [popoverElement, setPopoverElement] = (0, $hYGFM$useState)(null);
-    const { attributes: popperAttributes , update: update , styles: popperStyles  } = (0, $hYGFM$usePopper)(triggerElement, popoverElement, {
-        placement: placement,
-        modifiers: [
-            {
-                name: "offset",
-                options: {
-                    offset: offset
-                }
-            },
-            {
-                ...$fd548c9231cfa260$var$sameWidth,
-                enabled: isFullWidth
-            },
-            {
-                name: "preventOverflow",
-                enabled: isAutoalignmentEnabled,
-                options: {
-                    mainAxis: true
-                }
-            },
-            {
-                name: "flip",
-                enabled: isAutoalignmentEnabled
-            }
-        ]
-    });
-    (0, $hYGFM$useEffect)(()=>{
-        if (isOpen && autoFocus && popoverElement) popoverElement.focus({
-            preventScroll: true
-        });
-         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        isOpen,
-        popoverElement
-    ]);
-    (0, $hYGFM$useEffect)(()=>{
-        const updatePosition = async ()=>{
-            if (isOpen && update) await update();
-        };
-        updatePosition();
-    }, [
-        isOpen,
-        update
-    ]);
-    const popoverGeneratedId = (0, $hYGFM$useId)(undefined, "popover-content");
-    const popoverId = id || popoverGeneratedId;
-    const closeAndFocusTrigger = (0, $hYGFM$useCallback)(()=>{
-        onClose === null || onClose === void 0 ? void 0 : onClose(); // setTimeout trick to make it work with focus-lock
-        setTimeout(()=>{
-            return triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.focus({
-                preventScroll: true
-            });
-        }, 0);
-    }, [
-        onClose,
-        triggerElement
-    ]);
-    const contextValue = (0, $hYGFM$useMemo)(()=>{
-        return {
-            isOpen: Boolean(isOpen),
-            usePortal: usePortal,
-            renderOnlyWhenOpen: renderOnlyWhenOpen,
-            getTriggerProps: (_ref = null)=>({
-                    ref: (0, $hYGFM$mergeRefs)(setTriggerElement, _ref),
-                    ["aria-expanded"]: Boolean(isOpen),
-                    ["aria-controls"]: popoverId
-                }),
-            getPopoverProps: (_props = {}, _ref = null)=>{
-                return {
-                    ...popperAttributes.popper,
-                    style: {
-                        ..._props.style || {},
-                        ...popperStyles.popper
-                    },
-                    ref: (0, $hYGFM$mergeRefs)(setPopoverElement, _ref),
-                    id: popoverId,
-                    onBlur: (event)=>{
-                        if (_props.onBlur) _props.onBlur(event);
-                        if (!closeOnBlur) return;
-                        const relatedTarget = event.relatedTarget;
-                        const targetIsPopover = popoverElement === relatedTarget || (popoverElement === null || popoverElement === void 0 ? void 0 : popoverElement.contains(relatedTarget));
-                        const targetIsTrigger = triggerElement === relatedTarget || (triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.contains(relatedTarget));
-                        if (targetIsPopover || targetIsTrigger) return;
-                        onClose === null || onClose === void 0 ? void 0 : onClose();
-                    },
-                    onKeyDown: (event)=>{
-                        if (_props.onKeyDown) _props.onKeyDown(event);
-                        if (closeOnEsc && event.key === "Escape") closeAndFocusTrigger();
-                    }
-                };
-            }
-        };
-    }, [
-        isOpen,
-        renderOnlyWhenOpen,
-        popperAttributes,
-        popperStyles,
-        usePortal,
-        popoverId,
-        closeOnEsc,
-        closeOnBlur,
-        popoverElement,
-        triggerElement,
-        closeAndFocusTrigger,
-        onClose
-    ]);
-    return /*#__PURE__*/ (0, $hYGFM$react).createElement((0, $8c1b76e1106abdf5$export$f5300fbf692a63ec), {
-        value: contextValue
-    }, children);
-}
-/**
- * Sets the popover width to the size of the trigger element.
- */ const $fd548c9231cfa260$var$sameWidth = {
-    name: "sameWidth",
-    enabled: true,
-    phase: "beforeWrite",
-    requires: [
-        "computeStyles"
-    ],
-    fn: ({ state: state  })=>{
-        state.styles.popper.width = `${state.rects.reference.width}px`;
-    },
-    effect: ({ state: state  })=>()=>{
-            const reference = state.elements.reference;
-            state.elements.popper.style.width = `${reference.offsetWidth}px`;
-        }
-};
-
-
-
-
-
-
-
-
-const $8a165eef2449d46a$export$fbd764fe961047f7 = (isOpen)=>({
-        container: /*#__PURE__*/ (0, $hYGFM$css)({
-            display: isOpen ? "initial" : "none",
-            background: (0, $hYGFM$contentfulf36tokens).colorWhite,
-            border: 0,
-            borderRadius: (0, $hYGFM$contentfulf36tokens).borderRadiusMedium,
-            boxShadow: (0, $hYGFM$contentfulf36tokens).boxShadowDefault,
-            zIndex: (0, $hYGFM$contentfulf36tokens).zIndexDropdown,
-            "&:focus": {
-                boxShadow: (0, $hYGFM$contentfulf36tokens).glowPrimary,
-                outline: "none"
-            },
-            "&:focus:not(:focus-visible)": {
-                boxShadow: (0, $hYGFM$contentfulf36tokens).boxShadowDefault
-            }
-        })
-    });
-
-
-const $249e5486684b1d2a$var$_PopoverContent = (props, ref)=>{
-    const { children: children , className: className , testId: testId = "cf-ui-popover-content" , role: role = "dialog" , ...otherProps } = props;
-    const { isOpen: isOpen , renderOnlyWhenOpen: renderOnlyWhenOpen , getPopoverProps: getPopoverProps , usePortal: usePortal  } = (0, $8c1b76e1106abdf5$export$1468d0761b26e6c8)();
-    const styles = (0, $8a165eef2449d46a$export$fbd764fe961047f7)(isOpen);
-    const content = /*#__PURE__*/ (0, $hYGFM$react).createElement("div", {
-        ...otherProps,
-        ...getPopoverProps(otherProps, ref),
-        className: (0, $hYGFM$cx)(styles.container, className),
-        "data-test-id": testId,
-        tabIndex: -1,
-        role: role,
-        // for internal contentful apps usage
-        "data-position-absolute": true
-    }, children);
-    if (renderOnlyWhenOpen && !isOpen) return null;
-    return usePortal ? /*#__PURE__*/ (0, $hYGFM$react).createElement((0, $hYGFM$Portal), null, content) : content;
-};
-const $249e5486684b1d2a$export$d7e1f420b25549ff = /*#__PURE__*/ (0, $hYGFM$react).forwardRef($249e5486684b1d2a$var$_PopoverContent);
-
-
-
-
-const $2ab55052da688660$export$7dacb05d26466c3 = (props)=>{
-    const child = (0, $hYGFM$react).Children.only(props.children);
-    const { getTriggerProps: getTriggerProps  } = (0, $8c1b76e1106abdf5$export$1468d0761b26e6c8)();
-    var ref;
-    return /*#__PURE__*/ (0, $hYGFM$react).cloneElement(child, {
-        ...getTriggerProps(child.ref),
-        "aria-haspopup": (ref = child.props["aria-haspopup"]) !== null && ref !== void 0 ? ref : "dialog"
-    });
-};
-
-
-const $52a0de85cb27ef74$export$5b6b19405a83ff9d = (0, $fd548c9231cfa260$export$5b6b19405a83ff9d);
-$52a0de85cb27ef74$export$5b6b19405a83ff9d.Content = (0, $249e5486684b1d2a$export$d7e1f420b25549ff);
-$52a0de85cb27ef74$export$5b6b19405a83ff9d.Trigger = (0, $2ab55052da688660$export$7dacb05d26466c3);
-
-
-
-
-
-
-export {$52a0de85cb27ef74$export$5b6b19405a83ff9d as Popover, $2ab55052da688660$export$7dacb05d26466c3 as PopoverTrigger, $249e5486684b1d2a$export$d7e1f420b25549ff as PopoverContent};
-//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/components/popover/src/index.ts","packages/components/popover/src/CompoundPopover.tsx","packages/components/popover/src/Popover.tsx","packages/components/popover/src/PopoverContext.ts","packages/components/popover/src/PopoverContent/PopoverContent.tsx","packages/components/popover/src/PopoverContent/PopoverContent.styles.ts","packages/components/popover/src/PopoverTrigger/PopoverTrigger.tsx"],"sourcesContent":["export { Popover } from './CompoundPopover';\nexport type { PopoverProps } from './Popover';\nexport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\nexport type { PopoverTriggerProps } from './PopoverTrigger/PopoverTrigger';\nexport { PopoverContent } from './PopoverContent/PopoverContent';\nexport type { PopoverContentProps } from './PopoverContent/PopoverContent';\n","import { Popover as OriginalPopover } from './Popover';\nimport { PopoverContent } from './PopoverContent/PopoverContent';\nimport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\n\ntype CompoundPopover = typeof OriginalPopover & {\n  Content: typeof PopoverContent;\n  Trigger: typeof PopoverTrigger;\n};\n\nexport const Popover = OriginalPopover as CompoundPopover;\nPopover.Content = PopoverContent;\nPopover.Trigger = PopoverTrigger;\n","import React, { useMemo, useState, useEffect, useCallback } from 'react';\nimport { useId, mergeRefs, type ExpandProps } from '@contentful/f36-core';\nimport type { Placement, Modifier } from '@popperjs/core';\nimport { PopoverContextProvider, PopoverContextType } from './PopoverContext';\nimport { usePopper } from 'react-popper';\n\nexport interface PopoverProps {\n  children: React.ReactNode;\n\n  /**\n   * Boolean to determine if the Popover should be the same width as\n   * the trigger element\n   *\n   * @default false\n   */\n  isFullWidth?: boolean;\n\n  /**\n   * Boolean to control whether or not the Popover is open\n   *\n   * @default false\n   */\n  isOpen?: boolean;\n\n  /**\n   * Callback fired when the popover closes\n   */\n  onClose?: () => void;\n\n  /**\n   * Determines the preferred position of the Popover. This position is not\n   * guaranteed, as the Popover might be moved to fit the viewport\n   *\n   * @default bottom-start\n   */\n  placement?: Placement;\n\n  /**\n   * Boolean to control if popover is allowed to change its placement automatically\n   * based on available space in the viewport.\n   *\n   * For example:\n   * If you set placement prop to bottom, but there isn't enough space to position the popover in that direction,\n   * it will change the popper placement to top. As soon as enough space is detected, the placement will be reverted to the defined one.\n   *\n   * If you want the popover to strictly follow the placement prop you should set this prop to false.\n   *\n   * @default true\n   */\n  isAutoalignmentEnabled?: boolean;\n\n  /**\n   * Boolean to control whether or not to render the Popover in a React Portal.\n   * Rendering content inside a Portal allows the Popover to escape the bounds\n   * of its parent while still being positioned correctly. Using a Portal is\n   * necessary if an ancestor of the Popover hides overflow.\n   *\n   * @default true\n   */\n  usePortal?: boolean;\n\n  /**\n   * If true, the popover will close when you blur out it by clicking outside or tabbing out\n   *\n   * @default true\n   */\n  closeOnBlur?: boolean;\n\n  /**\n   * If true, the popover will close when you hit the Esc key\n   *\n   * @default true\n   */\n  closeOnEsc?: boolean;\n\n  /**\n   * If true, the popover will be focused after opening\n   *\n   * @default true\n   */\n  autoFocus?: boolean;\n\n  /**\n   * Popover id. Will be used as an `id` attribute on popover\n   * and as `aria-controls` attribute on trigger\n   *\n   * @default true\n   */\n  id?: string;\n\n  /**\n   * The `X-axis` and `Y-axis` offset to position popper element\n   * from its trigger element. `[X, Y]`\n   *\n   * @default [1, 4]\n   */\n  offset?: [number, number];\n\n  /**\n   * Defines if popover should be rendered in the DOM only when it's open\n   * or all the time (after the component has been mounted)\n   *\n   * @default true\n   */\n  renderOnlyWhenOpen?: boolean;\n}\n\nexport function Popover(props: ExpandProps<PopoverProps>) {\n  const {\n    children,\n    isOpen,\n    placement = 'bottom-start',\n    isFullWidth = false,\n    isAutoalignmentEnabled = true,\n    usePortal = true,\n    closeOnBlur = true,\n    closeOnEsc = true,\n    onClose,\n    autoFocus = true,\n    id,\n    offset = [1, 4],\n    renderOnlyWhenOpen = true,\n  } = props;\n\n  const [triggerElement, setTriggerElement] = useState<HTMLElement | null>(\n    null,\n  );\n  const [popoverElement, setPopoverElement] = useState<HTMLElement | null>(\n    null,\n  );\n\n  const {\n    attributes: popperAttributes,\n    update,\n    styles: popperStyles,\n  } = usePopper(triggerElement, popoverElement, {\n    placement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset,\n        },\n      },\n      {\n        ...sameWidth,\n        enabled: isFullWidth,\n      },\n      {\n        name: 'preventOverflow',\n        enabled: isAutoalignmentEnabled,\n        options: {\n          mainAxis: true,\n        },\n      },\n      {\n        name: 'flip',\n        enabled: isAutoalignmentEnabled,\n      },\n    ],\n  });\n\n  useEffect(() => {\n    if (isOpen && autoFocus && popoverElement) {\n      popoverElement.focus({ preventScroll: true });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, popoverElement]);\n\n  useEffect(() => {\n    const updatePosition = async () => {\n      if (isOpen && update) {\n        await update();\n      }\n    };\n    updatePosition();\n  }, [isOpen, update]);\n\n  const popoverGeneratedId = useId(undefined, 'popover-content');\n  const popoverId = id || popoverGeneratedId;\n\n  const closeAndFocusTrigger = useCallback(() => {\n    onClose?.();\n\n    // setTimeout trick to make it work with focus-lock\n    setTimeout(() => triggerElement?.focus({ preventScroll: true }), 0);\n  }, [onClose, triggerElement]);\n\n  const contextValue: PopoverContextType = useMemo(\n    () => ({\n      isOpen: Boolean(isOpen),\n      usePortal,\n      renderOnlyWhenOpen,\n      getTriggerProps: (_ref = null) => ({\n        ref: mergeRefs(setTriggerElement, _ref),\n        ['aria-expanded']: Boolean(isOpen),\n        ['aria-controls']: popoverId,\n      }),\n      getPopoverProps: (_props = {}, _ref = null) => ({\n        ...popperAttributes.popper,\n        style: {\n          ...(_props.style || {}),\n          ...popperStyles.popper,\n        },\n        ref: mergeRefs(setPopoverElement, _ref),\n        id: popoverId,\n        onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n          if (_props.onBlur) {\n            _props.onBlur(event);\n          }\n\n          if (!closeOnBlur) {\n            return;\n          }\n\n          const relatedTarget = event.relatedTarget as Node;\n\n          const targetIsPopover =\n            popoverElement === relatedTarget ||\n            popoverElement?.contains(relatedTarget);\n          const targetIsTrigger =\n            triggerElement === relatedTarget ||\n            triggerElement?.contains(relatedTarget);\n\n          if (targetIsPopover || targetIsTrigger) {\n            return;\n          }\n\n          onClose?.();\n        },\n        onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n          if (_props.onKeyDown) {\n            _props.onKeyDown(event);\n          }\n\n          if (closeOnEsc && event.key === 'Escape') {\n            closeAndFocusTrigger();\n          }\n        },\n      }),\n    }),\n    [\n      isOpen,\n      renderOnlyWhenOpen,\n      popperAttributes,\n      popperStyles,\n      usePortal,\n      popoverId,\n      closeOnEsc,\n      closeOnBlur,\n      popoverElement,\n      triggerElement,\n      closeAndFocusTrigger,\n      onClose,\n    ],\n  );\n\n  return (\n    <PopoverContextProvider value={contextValue}>\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\n/**\n * Sets the popover width to the size of the trigger element.\n */\nconst sameWidth: Modifier<'sameWidth', any> = {\n  name: 'sameWidth',\n  enabled: true,\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n  fn: ({ state }) => {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  effect:\n    ({ state }) =>\n    () => {\n      const reference = state.elements.reference as HTMLElement;\n      state.elements.popper.style.width = `${reference.offsetWidth}px`;\n    },\n};\n","import React, { HTMLProps } from 'react';\n\nexport type PopoverContextType = {\n  isOpen: boolean;\n  usePortal: boolean;\n  renderOnlyWhenOpen: boolean;\n  getPopoverProps: (\n    _props: HTMLProps<HTMLDivElement>,\n    _ref: React.Ref<HTMLDivElement>,\n  ) => HTMLProps<HTMLDivElement>;\n  getTriggerProps: (_ref: React.Ref<HTMLElement>) => HTMLProps<HTMLElement>;\n};\n\nconst PopoverContext = React.createContext<PopoverContextType | undefined>(\n  undefined,\n);\n\nexport const usePopoverContext = () => {\n  const context = React.useContext(PopoverContext);\n\n  if (context === undefined) {\n    throw new Error(\n      'usePopoverContext must be used within a PopoverContextProvider',\n    );\n  }\n\n  return context;\n};\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { usePopoverContext } from '../PopoverContext';\nimport { Portal } from '@contentful/f36-utils';\nimport { getPopoverContentStyles } from './PopoverContent.styles';\n\ninterface PopoverContentInternalProps extends CommonProps {\n  children?: React.ReactNode;\n}\n\nexport type PopoverContentProps = PropsWithHTMLElement<\n  PopoverContentInternalProps,\n  'div'\n>;\n\nconst _PopoverContent = (props: ExpandProps<PopoverContentProps>, ref) => {\n  const {\n    children,\n    className,\n    testId = 'cf-ui-popover-content',\n    role = 'dialog',\n    ...otherProps\n  } = props;\n  const { isOpen, renderOnlyWhenOpen, getPopoverProps, usePortal } =\n    usePopoverContext();\n\n  const styles = getPopoverContentStyles(isOpen);\n\n  const content = (\n    <div\n      {...otherProps}\n      {...getPopoverProps(otherProps, ref)}\n      className={cx(styles.container, className)}\n      data-test-id={testId}\n      tabIndex={-1}\n      role={role}\n      // specific attribute to mark that this element is absolute positioned\n      // for internal contentful apps usage\n      data-position-absolute\n    >\n      {children}\n    </div>\n  );\n\n  if (renderOnlyWhenOpen && !isOpen) {\n    return null;\n  }\n\n  return usePortal ? <Portal>{content}</Portal> : content;\n};\n\nexport const PopoverContent = React.forwardRef(_PopoverContent);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getPopoverContentStyles = (isOpen: boolean) => ({\n  container: css({\n    display: isOpen ? 'initial' : 'none',\n    background: tokens.colorWhite,\n    border: 0,\n    borderRadius: tokens.borderRadiusMedium,\n    boxShadow: tokens.boxShadowDefault,\n    zIndex: tokens.zIndexDropdown,\n    '&:focus': {\n      boxShadow: tokens.glowPrimary,\n      outline: 'none',\n    },\n    '&:focus:not(:focus-visible)': {\n      boxShadow: tokens.boxShadowDefault,\n    },\n  }),\n});\n","import React from 'react';\nimport { usePopoverContext } from '../PopoverContext';\n\nexport interface PopoverTriggerProps {\n  children: React.ReactNode;\n}\n\n/**\n * PopoverTrigger opens the popover. It must be an interactive element.\n */\nexport const PopoverTrigger = (props: PopoverTriggerProps) => {\n  const child = React.Children.only(props.children) as any;\n  const { getTriggerProps } = usePopoverContext();\n\n  return React.cloneElement(child, {\n    ...getTriggerProps(child.ref),\n    'aria-haspopup': child.props['aria-haspopup'] ?? 'dialog',\n  });\n};\n"],"names":["Popover","PopoverProps","PopoverTrigger","PopoverTriggerProps","PopoverContent","PopoverContentProps","OriginalPopover","CompoundPopover","Content","Trigger","React","useMemo","useState","useEffect","useCallback","useId","mergeRefs","ExpandProps","Placement","Modifier","PopoverContextProvider","PopoverContextType","usePopper","children","ReactNode","isFullWidth","isOpen","onClose","placement","isAutoalignmentEnabled","usePortal","closeOnBlur","closeOnEsc","autoFocus","id","offset","renderOnlyWhenOpen","props","triggerElement","setTriggerElement","HTMLElement","popoverElement","setPopoverElement","attributes","popperAttributes","update","styles","popperStyles","modifiers","name","options","sameWidth","enabled","mainAxis","focus","preventScroll","updatePosition","popoverGeneratedId","undefined","popoverId","closeAndFocusTrigger","setTimeout","contextValue","Boolean","getTriggerProps","_ref","ref","getPopoverProps","_props","popper","style","onBlur","event","FocusEvent","HTMLDivElement","relatedTarget","Node","targetIsPopover","contains","targetIsTrigger","onKeyDown","KeyboardEvent","key","phase","requires","fn","state","width","rects","reference","effect","elements","offsetWidth","HTMLProps","Ref","PopoverContext","createContext","usePopoverContext","context","useContext","Error","Provider","CommonProps","PropsWithHTMLElement","Portal","getPopoverContentStyles","PopoverContentInternalProps","_PopoverContent","className","testId","role","otherProps","content","container","forwardRef","tokens","display","background","colorWhite","border","borderRadius","borderRadiusMedium","boxShadow","boxShadowDefault","zIndex","zIndexDropdown","glowPrimary","outline","child","Children","only","cloneElement"],"version":3,"file":"module.js.map"}

package/dist/types.d.ts.map

@@ -1 +0,0 @@
-{"mappings":";;;ACMA;IACE,QAAQ,EAAE,MAAM,SAAS,CAAC;IAE1B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;;;;;;OAWG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAE1B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,2BAAwB,KAAK,EAAE,YAAY,YAAY,CAAC,eA2JvD;AE3PD,qCAAsC,SAAQ,WAAW;IACvD,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;CAC5B;AAED,kCAAkC,qBAChC,2BAA2B,EAC3B,KAAK,CACN,CAAC;AAsCF,OAAO,MAAM,2SAAkD,CAAC;ACrDhE;IACE,QAAQ,EAAE,MAAM,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,OAAO,MAAM,wBAAyB,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAQxD,CAAC;ACdF,uBAAuB,gBAAsB,GAAG;IAC9C,OAAO,EAAE,qBAAqB,CAAC;IAC/B,OAAO,EAAE,qBAAqB,CAAC;CAChC,CAAC;AAEF,OAAO,MAAM,wBAA4C,CAAC","sources":["packages/components/popover/src/src/PopoverContext.ts","packages/components/popover/src/src/Popover.tsx","packages/components/popover/src/src/PopoverContent/PopoverContent.styles.ts","packages/components/popover/src/src/PopoverContent/PopoverContent.tsx","packages/components/popover/src/src/PopoverTrigger/PopoverTrigger.tsx","packages/components/popover/src/src/CompoundPopover.tsx","packages/components/popover/src/src/index.ts","packages/components/popover/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"export { Popover } from './CompoundPopover';\nexport type { PopoverProps } from './Popover';\nexport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\nexport type { PopoverTriggerProps } from './PopoverTrigger/PopoverTrigger';\nexport { PopoverContent } from './PopoverContent/PopoverContent';\nexport type { PopoverContentProps } from './PopoverContent/PopoverContent';\n"],"names":[],"version":3,"file":"types.d.ts.map"}