@contentful/f36-popover 5.0.0 → 5.1.0

package/README.mdx

@@ -1,5 +1,7 @@
 ---
 title: 'Popover'
+type: 'component'
+status: 'stable'
 slug: /components/popover/
 github: 'https://github.com/contentful/forma-36/tree/main/packages/components/popover'
 storybook: 'https://f36-storybook.contentful.com/?path=/story/components-popover--basic'
@@ -53,6 +55,12 @@ consider using [react-focus-lock](https://github.com/theKashey/react-focus-lock)
 
 - Use an interactive element such as `button` for `Popover.Trigger`
 
+<Note variant="neutral">
+  We strongly recommend using an interactive element such as "button" for
+  "Popover.Trigger", but if you need to use a non-interactive element, like
+  "div", you should make that element focusable by providing "tabindex='0'".
+</Note>
+
 ## Accessibility
 
 - If the popover contains interactive elements that user can navigate through with `Tab`, consider using [react-focus-lock](https://github.com/theKashey/react-focus-lock) to trap the focus within Popover

package/dist/esm/index.js

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

package/dist/esm/index.js.map

@@ -1 +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"]}
+{"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","useRef","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","isMouseDown","contextValue","_props","_ref","event","_a","activeElement","relatedTarget","targetIsPopover","targetIsTrigger","state","reference","cx","Portal","css","tokens","getPopoverContentStyles","_PopoverContent","ref","className","testId","role","otherProps","__objRest","getPopoverProps","styles","content","PopoverContent","PopoverTrigger","child","getTriggerProps"],"mappings":"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","sourcesContent":["import React, {\n  useMemo,\n  useState,\n  useEffect,\n  useCallback,\n  useRef,\n} 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  // Safari has an issue with the relatedTarget that we use on the onBlur for getPopoverProps,\n  // which was causing the popover to close and reopen when clicking on the trigger.\n  // We will use the isMouseDown to prevent triggering blur in the cases where the user clicks on the trigger.\n  const isMouseDown = useRef<Boolean>(false);\n\n  const contextValue: PopoverContextType = useMemo(\n    () => ({\n      isOpen: Boolean(isOpen),\n      usePortal,\n      renderOnlyWhenOpen,\n      getTriggerProps: (_props = {}, _ref = null) => ({\n        onMouseDown: (event) => {\n          isMouseDown.current = true;\n          _props.onMouseDown?.(event);\n        },\n        onMouseUp: (event) => {\n          isMouseDown.current = false;\n          _props.onMouseUp?.(event);\n        },\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 activeElement = document.activeElement;\n          const relatedTarget = event.relatedTarget || activeElement;\n\n          const targetIsPopover =\n            popoverElement === relatedTarget ||\n            popoverElement?.contains(relatedTarget);\n          const targetIsTrigger =\n            triggerElement === relatedTarget ||\n            triggerElement?.contains(relatedTarget) ||\n            isMouseDown.current;\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: (\n    _props: HTMLProps<HTMLElement>,\n    _ref: React.Ref<HTMLElement>,\n  ) => 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.props, 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.d.mts

@@ -0,0 +1,481 @@
+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
+     * the trigger element
+     *
+     * @default false
+     */
+    isFullWidth?: boolean;
+    /**
+     * Boolean to control whether or not the Popover is open
+     *
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Callback fired when the popover closes
+     */
+    onClose?: () => void;
+    /**
+     * Determines the preferred position of the Popover. This position is not
+     * guaranteed, as the Popover might be moved to fit the viewport
+     *
+     * @default bottom-start
+     */
+    placement?: Placement;
+    /**
+     * Boolean to control if popover is allowed to change its placement automatically
+     * based on available space in the viewport.
+     *
+     * For example:
+     * If you set placement prop to bottom, but there isn't enough space to position the popover in that direction,
+     * it will change the popper placement to top. As soon as enough space is detected, the placement will be reverted to the defined one.
+     *
+     * If you want the popover to strictly follow the placement prop you should set this prop to false.
+     *
+     * @default true
+     */
+    isAutoalignmentEnabled?: boolean;
+    /**
+     * Boolean to control whether or not to render the Popover in a React Portal.
+     * Rendering content inside a Portal allows the Popover to escape the bounds
+     * of its parent while still being positioned correctly. Using a Portal is
+     * necessary if an ancestor of the Popover hides overflow.
+     *
+     * @default true
+     */
+    usePortal?: boolean;
+    /**
+     * If true, the popover will close when you blur out it by clicking outside or tabbing out
+     *
+     * @default true
+     */
+    closeOnBlur?: boolean;
+    /**
+     * If true, the popover will close when you hit the Esc key
+     *
+     * @default true
+     */
+    closeOnEsc?: boolean;
+    /**
+     * If true, the popover will be focused after opening
+     *
+     * @default true
+     */
+    autoFocus?: boolean;
+    /**
+     * Popover id. Will be used as an `id` attribute on popover
+     * and as `aria-controls` attribute on trigger
+     *
+     * @default true
+     */
+    id?: string;
+    /**
+     * The `X-axis` and `Y-axis` offset to position popper element
+     * from its trigger element. `[X, Y]`
+     *
+     * @default [1, 4]
+     */
+    offset?: [number, number];
+    /**
+     * Defines if popover should be rendered in the DOM only when it's open
+     * or all the time (after the component has been mounted)
+     *
+     * @default true
+     */
+    renderOnlyWhenOpen?: boolean;
+}
+declare function Popover$1(props: ExpandProps<PopoverProps>): JSX.Element;
+
+interface PopoverContentInternalProps extends CommonProps {
+    children?: React.ReactNode;
+}
+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.
+ */
+declare const PopoverTrigger: (props: PopoverTriggerProps) => React.DetailedReactHTMLElement<{
+    'aria-haspopup': any;
+    accept?: string;
+    acceptCharset?: string;
+    action?: string;
+    allowFullScreen?: boolean;
+    allowTransparency?: boolean;
+    alt?: string;
+    as?: string;
+    async?: boolean;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    autoPlay?: boolean;
+    capture?: string | boolean;
+    cellPadding?: string | number;
+    cellSpacing?: string | number;
+    charSet?: string;
+    challenge?: string;
+    checked?: boolean;
+    cite?: string;
+    classID?: string;
+    cols?: number;
+    colSpan?: number;
+    content?: string;
+    controls?: boolean;
+    coords?: string;
+    crossOrigin?: string;
+    data?: string;
+    dateTime?: string;
+    default?: boolean;
+    defer?: boolean;
+    disabled?: boolean;
+    download?: any;
+    encType?: string;
+    form?: string;
+    formAction?: string;
+    formEncType?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+    frameBorder?: string | number;
+    headers?: string;
+    height?: string | number;
+    high?: number;
+    href?: string;
+    hrefLang?: string;
+    htmlFor?: string;
+    httpEquiv?: string;
+    integrity?: string;
+    keyParams?: string;
+    keyType?: string;
+    kind?: string;
+    label?: string;
+    list?: string;
+    loop?: boolean;
+    low?: number;
+    manifest?: string;
+    marginHeight?: number;
+    marginWidth?: number;
+    max?: string | number;
+    maxLength?: number;
+    media?: string;
+    mediaGroup?: string;
+    method?: string;
+    min?: string | number;
+    minLength?: number;
+    multiple?: boolean;
+    muted?: boolean;
+    name?: string;
+    nonce?: string;
+    noValidate?: boolean;
+    open?: boolean;
+    optimum?: number;
+    pattern?: string;
+    placeholder?: string;
+    playsInline?: boolean;
+    poster?: string;
+    preload?: string;
+    readOnly?: boolean;
+    rel?: string;
+    required?: boolean;
+    reversed?: boolean;
+    rows?: number;
+    rowSpan?: number;
+    sandbox?: string;
+    scope?: string;
+    scoped?: boolean;
+    scrolling?: string;
+    seamless?: boolean;
+    selected?: boolean;
+    shape?: string;
+    size?: number;
+    sizes?: string;
+    span?: number;
+    src?: string;
+    srcDoc?: string;
+    srcLang?: string;
+    srcSet?: string;
+    start?: number;
+    step?: string | number;
+    summary?: string;
+    target?: string;
+    type?: string;
+    useMap?: string;
+    value?: string | number | readonly string[];
+    width?: string | number;
+    wmode?: string;
+    wrap?: string;
+    defaultChecked?: boolean;
+    defaultValue?: string | number | readonly string[];
+    suppressContentEditableWarning?: boolean;
+    suppressHydrationWarning?: boolean;
+    accessKey?: string;
+    className?: string;
+    contentEditable?: "inherit" | (boolean | "false" | "true");
+    contextMenu?: string;
+    dir?: string;
+    draggable?: boolean | "false" | "true";
+    hidden?: boolean;
+    id?: string;
+    lang?: string;
+    slot?: string;
+    spellCheck?: boolean | "false" | "true";
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    title?: string;
+    translate?: "yes" | "no";
+    radioGroup?: string;
+    role?: React.AriaRole;
+    about?: string;
+    datatype?: string;
+    inlist?: any;
+    prefix?: string;
+    property?: string;
+    resource?: string;
+    typeof?: string;
+    vocab?: string;
+    autoCapitalize?: string;
+    autoCorrect?: string;
+    autoSave?: string;
+    color?: string;
+    itemProp?: string;
+    itemScope?: boolean;
+    itemType?: string;
+    itemID?: string;
+    itemRef?: string;
+    results?: number;
+    security?: string;
+    unselectable?: "on" | "off";
+    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal";
+    is?: string;
+    'aria-activedescendant'?: string;
+    'aria-atomic'?: boolean | "false" | "true";
+    'aria-autocomplete'?: "both" | "none" | "inline" | "list";
+    'aria-busy'?: boolean | "false" | "true";
+    'aria-checked'?: boolean | "false" | "true" | "mixed";
+    'aria-colcount'?: number;
+    'aria-colindex'?: number;
+    'aria-colspan'?: number;
+    'aria-controls'?: string;
+    'aria-current'?: boolean | "false" | "true" | "page" | "time" | "step" | "location" | "date";
+    'aria-describedby'?: string;
+    'aria-details'?: string;
+    'aria-disabled'?: boolean | "false" | "true";
+    'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup";
+    'aria-errormessage'?: string;
+    'aria-expanded'?: boolean | "false" | "true";
+    'aria-flowto'?: string;
+    'aria-grabbed'?: boolean | "false" | "true";
+    'aria-hidden'?: boolean | "false" | "true";
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
+    'aria-keyshortcuts'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-level'?: number;
+    'aria-live'?: "off" | "assertive" | "polite";
+    'aria-modal'?: boolean | "false" | "true";
+    'aria-multiline'?: boolean | "false" | "true";
+    'aria-multiselectable'?: boolean | "false" | "true";
+    'aria-orientation'?: "horizontal" | "vertical";
+    'aria-owns'?: string;
+    'aria-placeholder'?: string;
+    'aria-posinset'?: number;
+    'aria-pressed'?: boolean | "false" | "true" | "mixed";
+    'aria-readonly'?: boolean | "false" | "true";
+    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    'aria-required'?: boolean | "false" | "true";
+    'aria-roledescription'?: string;
+    'aria-rowcount'?: number;
+    'aria-rowindex'?: number;
+    'aria-rowspan'?: number;
+    'aria-selected'?: boolean | "false" | "true";
+    'aria-setsize'?: number;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other";
+    'aria-valuemax'?: number;
+    'aria-valuemin'?: number;
+    'aria-valuenow'?: number;
+    'aria-valuetext'?: string;
+    children?: React.ReactNode;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    };
+    onCopy?: React.ClipboardEventHandler<HTMLElement>;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLElement>;
+    onCut?: React.ClipboardEventHandler<HTMLElement>;
+    onCutCapture?: React.ClipboardEventHandler<HTMLElement>;
+    onPaste?: React.ClipboardEventHandler<HTMLElement>;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLElement>;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionStart?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement>;
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    onFocusCapture?: React.FocusEventHandler<HTMLElement>;
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    onBlurCapture?: React.FocusEventHandler<HTMLElement>;
+    onChange?: React.FormEventHandler<HTMLElement>;
+    onChangeCapture?: React.FormEventHandler<HTMLElement>;
+    onBeforeInput?: React.FormEventHandler<HTMLElement>;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLElement>;
+    onInput?: React.FormEventHandler<HTMLElement>;
+    onInputCapture?: React.FormEventHandler<HTMLElement>;
+    onReset?: React.FormEventHandler<HTMLElement>;
+    onResetCapture?: React.FormEventHandler<HTMLElement>;
+    onSubmit?: React.FormEventHandler<HTMLElement>;
+    onSubmitCapture?: React.FormEventHandler<HTMLElement>;
+    onInvalid?: React.FormEventHandler<HTMLElement>;
+    onInvalidCapture?: React.FormEventHandler<HTMLElement>;
+    onLoad?: React.ReactEventHandler<HTMLElement>;
+    onLoadCapture?: React.ReactEventHandler<HTMLElement>;
+    onError?: React.ReactEventHandler<HTMLElement>;
+    onErrorCapture?: React.ReactEventHandler<HTMLElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement>;
+    onAbort?: React.ReactEventHandler<HTMLElement>;
+    onAbortCapture?: React.ReactEventHandler<HTMLElement>;
+    onCanPlay?: React.ReactEventHandler<HTMLElement>;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLElement>;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLElement>;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement>;
+    onDurationChange?: React.ReactEventHandler<HTMLElement>;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLElement>;
+    onEmptied?: React.ReactEventHandler<HTMLElement>;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLElement>;
+    onEncrypted?: React.ReactEventHandler<HTMLElement>;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLElement>;
+    onEnded?: React.ReactEventHandler<HTMLElement>;
+    onEndedCapture?: React.ReactEventHandler<HTMLElement>;
+    onLoadedData?: React.ReactEventHandler<HTMLElement>;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLElement>;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLElement>;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement>;
+    onLoadStart?: React.ReactEventHandler<HTMLElement>;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLElement>;
+    onPause?: React.ReactEventHandler<HTMLElement>;
+    onPauseCapture?: React.ReactEventHandler<HTMLElement>;
+    onPlay?: React.ReactEventHandler<HTMLElement>;
+    onPlayCapture?: React.ReactEventHandler<HTMLElement>;
+    onPlaying?: React.ReactEventHandler<HTMLElement>;
+    onPlayingCapture?: React.ReactEventHandler<HTMLElement>;
+    onProgress?: React.ReactEventHandler<HTMLElement>;
+    onProgressCapture?: React.ReactEventHandler<HTMLElement>;
+    onRateChange?: React.ReactEventHandler<HTMLElement>;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLElement>;
+    onSeeked?: React.ReactEventHandler<HTMLElement>;
+    onSeekedCapture?: React.ReactEventHandler<HTMLElement>;
+    onSeeking?: React.ReactEventHandler<HTMLElement>;
+    onSeekingCapture?: React.ReactEventHandler<HTMLElement>;
+    onStalled?: React.ReactEventHandler<HTMLElement>;
+    onStalledCapture?: React.ReactEventHandler<HTMLElement>;
+    onSuspend?: React.ReactEventHandler<HTMLElement>;
+    onSuspendCapture?: React.ReactEventHandler<HTMLElement>;
+    onTimeUpdate?: React.ReactEventHandler<HTMLElement>;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement>;
+    onVolumeChange?: React.ReactEventHandler<HTMLElement>;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement>;
+    onWaiting?: React.ReactEventHandler<HTMLElement>;
+    onWaitingCapture?: React.ReactEventHandler<HTMLElement>;
+    onAuxClick?: React.MouseEventHandler<HTMLElement>;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLElement>;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    onClickCapture?: React.MouseEventHandler<HTMLElement>;
+    onContextMenu?: React.MouseEventHandler<HTMLElement>;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLElement>;
+    onDoubleClick?: React.MouseEventHandler<HTMLElement>;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLElement>;
+    onDrag?: React.DragEventHandler<HTMLElement>;
+    onDragCapture?: React.DragEventHandler<HTMLElement>;
+    onDragEnd?: React.DragEventHandler<HTMLElement>;
+    onDragEndCapture?: React.DragEventHandler<HTMLElement>;
+    onDragEnter?: React.DragEventHandler<HTMLElement>;
+    onDragEnterCapture?: React.DragEventHandler<HTMLElement>;
+    onDragExit?: React.DragEventHandler<HTMLElement>;
+    onDragExitCapture?: React.DragEventHandler<HTMLElement>;
+    onDragLeave?: React.DragEventHandler<HTMLElement>;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLElement>;
+    onDragOver?: React.DragEventHandler<HTMLElement>;
+    onDragOverCapture?: React.DragEventHandler<HTMLElement>;
+    onDragStart?: React.DragEventHandler<HTMLElement>;
+    onDragStartCapture?: React.DragEventHandler<HTMLElement>;
+    onDrop?: React.DragEventHandler<HTMLElement>;
+    onDropCapture?: React.DragEventHandler<HTMLElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLElement>;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+    onMouseMove?: React.MouseEventHandler<HTMLElement>;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseOut?: React.MouseEventHandler<HTMLElement>;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseOver?: React.MouseEventHandler<HTMLElement>;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseUp?: React.MouseEventHandler<HTMLElement>;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLElement>;
+    onSelect?: React.ReactEventHandler<HTMLElement>;
+    onSelectCapture?: React.ReactEventHandler<HTMLElement>;
+    onTouchCancel?: React.TouchEventHandler<HTMLElement>;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLElement>;
+    onTouchEnd?: React.TouchEventHandler<HTMLElement>;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLElement>;
+    onTouchMove?: React.TouchEventHandler<HTMLElement>;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLElement>;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLElement>;
+    onPointerDown?: React.PointerEventHandler<HTMLElement>;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerMove?: React.PointerEventHandler<HTMLElement>;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerUp?: React.PointerEventHandler<HTMLElement>;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerCancel?: React.PointerEventHandler<HTMLElement>;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerEnter?: React.PointerEventHandler<HTMLElement>;
+    onPointerEnterCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerLeave?: React.PointerEventHandler<HTMLElement>;
+    onPointerLeaveCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerOver?: React.PointerEventHandler<HTMLElement>;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerOut?: React.PointerEventHandler<HTMLElement>;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLElement>;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLElement>;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLElement>;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
+    onScroll?: React.UIEventHandler<HTMLElement>;
+    onScrollCapture?: React.UIEventHandler<HTMLElement>;
+    onWheel?: React.WheelEventHandler<HTMLElement>;
+    onWheelCapture?: React.WheelEventHandler<HTMLElement>;
+    onAnimationStart?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement>;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLElement>;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement>;
+    css?: _emotion_core.InterpolationWithTheme<any>;
+    ref?: React.LegacyRef<HTMLElement>;
+    key?: React.Key;
+}, HTMLElement>;
+
+declare type CompoundPopover = typeof Popover$1 & {
+    Content: typeof PopoverContent;
+    Trigger: typeof PopoverTrigger;
+};
+declare const Popover: CompoundPopover;
+
+export { Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps };

package/dist/index.js

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

package/dist/index.js.map

@@ -1 +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"]}
+{"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","useRef","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","isMouseDown","contextValue","_props","_ref","event","_a","activeElement","relatedTarget","targetIsPopover","targetIsTrigger","state","reference","cx","Portal","css","tokens","getPopoverContentStyles","_PopoverContent","ref","className","testId","role","otherProps","__objRest","getPopoverProps","styles","content","PopoverContent","PopoverTrigger","child","getTriggerProps"],"mappings":"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","sourcesContent":["import React, {\n  useMemo,\n  useState,\n  useEffect,\n  useCallback,\n  useRef,\n} 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  // Safari has an issue with the relatedTarget that we use on the onBlur for getPopoverProps,\n  // which was causing the popover to close and reopen when clicking on the trigger.\n  // We will use the isMouseDown to prevent triggering blur in the cases where the user clicks on the trigger.\n  const isMouseDown = useRef<Boolean>(false);\n\n  const contextValue: PopoverContextType = useMemo(\n    () => ({\n      isOpen: Boolean(isOpen),\n      usePortal,\n      renderOnlyWhenOpen,\n      getTriggerProps: (_props = {}, _ref = null) => ({\n        onMouseDown: (event) => {\n          isMouseDown.current = true;\n          _props.onMouseDown?.(event);\n        },\n        onMouseUp: (event) => {\n          isMouseDown.current = false;\n          _props.onMouseUp?.(event);\n        },\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 activeElement = document.activeElement;\n          const relatedTarget = event.relatedTarget || activeElement;\n\n          const targetIsPopover =\n            popoverElement === relatedTarget ||\n            popoverElement?.contains(relatedTarget);\n          const targetIsTrigger =\n            triggerElement === relatedTarget ||\n            triggerElement?.contains(relatedTarget) ||\n            isMouseDown.current;\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: (\n    _props: HTMLProps<HTMLElement>,\n    _ref: React.Ref<HTMLElement>,\n  ) => 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.props, 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,20 +1,21 @@
 {
   "name": "@contentful/f36-popover",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Forma 36: Popover component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-core": "^5.0.0",
-    "@contentful/f36-tokens": "^4.0.1",
-    "@contentful/f36-utils": "^5.0.0",
+    "@contentful/f36-core": "^5.1.0",
+    "@contentful/f36-tokens": "^5.1.0",
+    "@contentful/f36-utils": "^5.1.0",
     "@popperjs/core": "^2.11.5",
     "emotion": "^10.0.17",
     "react-popper": "^2.3.0"
   },
   "peerDependencies": {
-    "react": ">=16.8"
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
   "license": "MIT",
   "files": [
@@ -28,9 +29,10 @@
   "browserslist": "extends @contentful/browserslist-config",
   "repository": {
     "type": "git",
-    "url": "https://github.com/contentful/forma-36"
+    "url": "git+https://github.com/contentful/forma-36.git"
   },
   "publishConfig": {
+    "registry": "https://npm.pkg.github.com/",
     "access": "public"
   }
 }