@contentful/f36-popover 4.23.0 → 4.23.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/esm/index.js +4 -4
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.js +7 -7
  4. package/dist/index.js.map +1 -1
  5. package/package.json +3 -3
package/dist/esm/index.js CHANGED
@@ -1,11 +1,11 @@
1
- import O, { useState, useEffect, useCallback, useMemo } from 'react';
1
+ import H, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
2
2
  import { useId, mergeRefs } from '@contentful/f36-core';
3
3
  import { usePopper } from 'react-popper';
4
4
  import { cx, css } from 'emotion';
5
5
  import { Portal } from '@contentful/f36-utils';
6
- import f from '@contentful/f36-tokens';
6
+ import x from '@contentful/f36-tokens';
7
7
 
8
- 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;
8
+ var oe=Object.defineProperty,te=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var B=(e,t,o)=>t in e?oe(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,l=(e,t)=>{for(var o in t||(t={}))F.call(t,o)&&B(e,o,t[o]);if(b)for(var o of b(t))N.call(t,o)&&B(e,o,t[o]);return e},f=(e,t)=>te(e,re(t));var k=(e,t)=>{var o={};for(var r in e)F.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&b)for(var r of b(e))t.indexOf(r)<0&&N.call(e,r)&&(o[r]=e[r]);return o};var A=(e,t,o)=>new Promise((r,m)=>{var v=s=>{try{c(o.next(s));}catch(n){m(n);}},d=s=>{try{c(o.throw(s));}catch(n){m(n);}},c=s=>s.done?r(s.value):Promise.resolve(s.value).then(v,d);c((o=o.apply(e,t)).next());});var z=H.createContext(void 0),y=()=>{let e=H.useContext(z);if(e===void 0)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return e},U=z.Provider;function G(e){let{children:t,isOpen:o,placement:r="bottom-start",isFullWidth:m=!1,isAutoalignmentEnabled:v=!0,usePortal:d=!0,closeOnBlur:c=!0,closeOnEsc:s=!0,onClose:n,autoFocus:h=!0,id:C,offset:T=[1,4],renderOnlyWhenOpen:g=!0}=e,[i,Q]=useState(null),[u,X]=useState(null),{attributes:W,update:M,styles:S}=usePopper(i,u,{placement:r,modifiers:[{name:"offset",options:{offset:T}},f(l({},ce),{enabled:m}),{name:"preventOverflow",enabled:v,options:{mainAxis:!0}},{name:"flip",enabled:v}]});useEffect(()=>{o&&h&&u&&u.focus({preventScroll:!0});},[o,u]),useEffect(()=>{(()=>A(this,null,function*(){o&&M&&(yield M());}))();},[o,M]);let Y=useId(void 0,"popover-content"),E=C||Y,I=useCallback(()=>{n==null||n(),setTimeout(()=>i==null?void 0:i.focus({preventScroll:!0}),0);},[n,i]),w=useRef(!1),Z=useMemo(()=>({isOpen:Boolean(o),usePortal:d,renderOnlyWhenOpen:g,getTriggerProps:(p={},O=null)=>({onMouseDown:P=>{var a;w.current=!0,(a=p.onMouseDown)==null||a.call(p,P);},onMouseUp:P=>{var a;w.current=!1,(a=p.onMouseUp)==null||a.call(p,P);},ref:mergeRefs(Q,O),["aria-expanded"]:Boolean(o),["aria-controls"]:E}),getPopoverProps:(p={},O=null)=>f(l({},W.popper),{style:l(l({},p.style||{}),S.popper),ref:mergeRefs(X,O),id:E,onBlur:P=>{if(p.onBlur&&p.onBlur(P),!c)return;let a=P.relatedTarget,_=u===a||(u==null?void 0:u.contains(a)),ee=i===a||(i==null?void 0:i.contains(a))||w.current;_||ee||n==null||n();},onKeyDown:P=>{p.onKeyDown&&p.onKeyDown(P),s&&P.key==="Escape"&&I();}})}),[o,g,W,S,d,E,s,c,u,i,I,n]);return H.createElement(U,{value:Z},t)}var ce={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 V=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:m="cf-ui-popover-content",role:v="dialog"}=g,d=k(g,["children","className","testId","role"]),{isOpen:c,renderOnlyWhenOpen:s,getPopoverProps:n,usePortal:h}=y(),C=V(c),T=H.createElement("div",f(l(l({},d),n(d,t)),{className:cx(C.container,r),"data-test-id":m,tabIndex:-1,role:v,"data-position-absolute":!0}),o);return s&&!c?null:h?H.createElement(Portal,null,T):T},L=H.forwardRef(fe);var R=e=>{var r;let t=H.Children.only(e.children),{getTriggerProps:o}=y();return H.cloneElement(t,f(l({},o(t.props,t.ref)),{"aria-haspopup":(r=t.props["aria-haspopup"])!=null?r:"dialog"}))};var D=G;D.Content=L;D.Trigger=R;
9
9
 
10
- export { H as Popover, w as PopoverContent, R as PopoverTrigger };
10
+ export { D as Popover, L as PopoverContent, R as PopoverTrigger };
11
11
  //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map CHANGED
@@ -1 +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"]}
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","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","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 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 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.js CHANGED
@@ -2,21 +2,21 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var O = require('react');
5
+ var H = require('react');
6
6
  var f36Core = require('@contentful/f36-core');
7
7
  var reactPopper = require('react-popper');
8
8
  var emotion = require('emotion');
9
9
  var f36Utils = require('@contentful/f36-utils');
10
- var f = require('@contentful/f36-tokens');
10
+ var x = require('@contentful/f36-tokens');
11
11
 
12
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
13
 
14
- var O__default = /*#__PURE__*/_interopDefaultLegacy(O);
15
- var f__default = /*#__PURE__*/_interopDefaultLegacy(f);
14
+ var H__default = /*#__PURE__*/_interopDefaultLegacy(H);
15
+ var x__default = /*#__PURE__*/_interopDefaultLegacy(x);
16
16
 
17
- 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;
17
+ var oe=Object.defineProperty,te=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var B=(e,t,o)=>t in e?oe(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,l=(e,t)=>{for(var o in t||(t={}))F.call(t,o)&&B(e,o,t[o]);if(b)for(var o of b(t))N.call(t,o)&&B(e,o,t[o]);return e},f=(e,t)=>te(e,re(t));var k=(e,t)=>{var o={};for(var r in e)F.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&b)for(var r of b(e))t.indexOf(r)<0&&N.call(e,r)&&(o[r]=e[r]);return o};var A=(e,t,o)=>new Promise((r,m)=>{var v=s=>{try{c(o.next(s));}catch(n){m(n);}},d=s=>{try{c(o.throw(s));}catch(n){m(n);}},c=s=>s.done?r(s.value):Promise.resolve(s.value).then(v,d);c((o=o.apply(e,t)).next());});var z=H__default["default"].createContext(void 0),y=()=>{let e=H__default["default"].useContext(z);if(e===void 0)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return e},U=z.Provider;function G(e){let{children:t,isOpen:o,placement:r="bottom-start",isFullWidth:m=!1,isAutoalignmentEnabled:v=!0,usePortal:d=!0,closeOnBlur:c=!0,closeOnEsc:s=!0,onClose:n,autoFocus:h=!0,id:C,offset:T=[1,4],renderOnlyWhenOpen:g=!0}=e,[i,Q]=H.useState(null),[u,X]=H.useState(null),{attributes:W,update:M,styles:S}=reactPopper.usePopper(i,u,{placement:r,modifiers:[{name:"offset",options:{offset:T}},f(l({},ce),{enabled:m}),{name:"preventOverflow",enabled:v,options:{mainAxis:!0}},{name:"flip",enabled:v}]});H.useEffect(()=>{o&&h&&u&&u.focus({preventScroll:!0});},[o,u]),H.useEffect(()=>{(()=>A(this,null,function*(){o&&M&&(yield M());}))();},[o,M]);let Y=f36Core.useId(void 0,"popover-content"),E=C||Y,I=H.useCallback(()=>{n==null||n(),setTimeout(()=>i==null?void 0:i.focus({preventScroll:!0}),0);},[n,i]),w=H.useRef(!1),Z=H.useMemo(()=>({isOpen:Boolean(o),usePortal:d,renderOnlyWhenOpen:g,getTriggerProps:(p={},O=null)=>({onMouseDown:P=>{var a;w.current=!0,(a=p.onMouseDown)==null||a.call(p,P);},onMouseUp:P=>{var a;w.current=!1,(a=p.onMouseUp)==null||a.call(p,P);},ref:f36Core.mergeRefs(Q,O),["aria-expanded"]:Boolean(o),["aria-controls"]:E}),getPopoverProps:(p={},O=null)=>f(l({},W.popper),{style:l(l({},p.style||{}),S.popper),ref:f36Core.mergeRefs(X,O),id:E,onBlur:P=>{if(p.onBlur&&p.onBlur(P),!c)return;let a=P.relatedTarget,_=u===a||(u==null?void 0:u.contains(a)),ee=i===a||(i==null?void 0:i.contains(a))||w.current;_||ee||n==null||n();},onKeyDown:P=>{p.onKeyDown&&p.onKeyDown(P),s&&P.key==="Escape"&&I();}})}),[o,g,W,S,d,E,s,c,u,i,I,n]);return H__default["default"].createElement(U,{value:Z},t)}var ce={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 V=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:m="cf-ui-popover-content",role:v="dialog"}=g,d=k(g,["children","className","testId","role"]),{isOpen:c,renderOnlyWhenOpen:s,getPopoverProps:n,usePortal:h}=y(),C=V(c),T=H__default["default"].createElement("div",f(l(l({},d),n(d,t)),{className:emotion.cx(C.container,r),"data-test-id":m,tabIndex:-1,role:v,"data-position-absolute":!0}),o);return s&&!c?null:h?H__default["default"].createElement(f36Utils.Portal,null,T):T},L=H__default["default"].forwardRef(fe);var R=e=>{var r;let t=H__default["default"].Children.only(e.children),{getTriggerProps:o}=y();return H__default["default"].cloneElement(t,f(l({},o(t.props,t.ref)),{"aria-haspopup":(r=t.props["aria-haspopup"])!=null?r:"dialog"}))};var D=G;D.Content=L;D.Trigger=R;
18
18
 
19
- exports.Popover = H;
20
- exports.PopoverContent = w;
19
+ exports.Popover = D;
20
+ exports.PopoverContent = L;
21
21
  exports.PopoverTrigger = R;
22
22
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +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"]}
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","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","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 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 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 CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@contentful/f36-popover",
3
- "version": "4.23.0",
3
+ "version": "4.23.2",
4
4
  "description": "Forma 36: Popover component",
5
5
  "scripts": {
6
6
  "build": "tsup"
7
7
  },
8
8
  "dependencies": {
9
- "@contentful/f36-core": "^4.23.0",
9
+ "@contentful/f36-core": "^4.23.2",
10
10
  "@contentful/f36-tokens": "^4.0.1",
11
- "@contentful/f36-utils": "^4.23.0",
11
+ "@contentful/f36-utils": "^4.23.2",
12
12
  "@popperjs/core": "^2.11.5",
13
13
  "emotion": "^10.0.17",
14
14
  "react-popper": "^2.3.0"