@contentful/f36-popover 5.8.0 → 6.0.0-alpha.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 (7) hide show
  1. package/dist/esm/index.js +2 -11
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.mts +18 -381
  4. package/dist/index.d.ts +18 -381
  5. package/dist/index.js +2 -20
  6. package/dist/index.js.map +1 -1
  7. package/package.json +8 -9
package/dist/esm/index.js CHANGED
@@ -1,12 +1,3 @@
1
- import L, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
2
- import { useId, mergeRefs } from '@contentful/f36-core';
3
- import { usePopper } from 'react-popper';
4
- import { cx, css } from 'emotion';
5
- import { Portal } from '@contentful/f36-utils';
6
- import x from '@contentful/f36-tokens';
7
-
8
- 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;
9
-
10
- export { W as Popover, R as PopoverContent, D as PopoverTrigger };
11
- //# sourceMappingURL=out.js.map
1
+ import w from'react';import {useMergeRefs,useInteractions,FloatingPortal,FloatingFocusManager,offset,flip,shift,autoPlacement,size,useFloating,autoUpdate,useClick,useDismiss,useRole}from'@floating-ui/react';import {css,cx}from'@emotion/css';import R from'@contentful/f36-tokens';var G=Object.defineProperty,J=Object.defineProperties;var Q=Object.getOwnPropertyDescriptors;var O=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable;var k=(e,o,t)=>o in e?G(e,o,{enumerable:true,configurable:true,writable:true,value:t}):e[o]=t,n=(e,o)=>{for(var t in o||(o={}))A.call(o,t)&&k(e,t,o[t]);if(O)for(var t of O(o))D.call(o,t)&&k(e,t,o[t]);return e},l=(e,o)=>J(e,Q(o));var c=(e,o)=>{var t={};for(var r in e)A.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&O)for(var r of O(e))o.indexOf(r)<0&&D.call(e,r)&&(t[r]=e[r]);return t};var z=w.createContext(null),T=()=>{let e=w.useContext(z);if(e===void 0)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return e},B=z.Provider;function V({placement:e="bottom-start",isFullWidth:o=false,isAutoalignmentEnabled:t=true,isOpen:r=false,offset:a=0,onClose:p,renderOnlyWhenOpen:s=true,usePortal:i=true,closeOnEsc:h=true,closeOnBlur:f=true,autoFocus:d=true}={}){let[u,m]=w.useState(),[P,M]=w.useState(),C="bottom-start",v=[offset(a)];e!=="auto"&&t?(C=e,v.push(flip({padding:5}),shift({padding:5}))):e==="auto"?v.push(autoPlacement()):C=e,o&&v.push(size({apply({rects:$,elements:q}){Object.assign(q.floating.style,{minWidth:`${$.reference.width}px`});}}));let g=useFloating({placement:C,open:r,onOpenChange:p,whileElementsMounted:autoUpdate,middleware:v}),x=g.context,y=useClick(x,{enabled:false}),b=useDismiss(x,{escapeKey:h,outsidePress:f,ancestorScroll:true}),E=useRole(x),H=useInteractions([y,b,E]);return w.useMemo(()=>l(n(n({isOpen:r,autoFocus:d,dismiss:b,onClose:p},H),g),{renderOnlyWhenOpen:s,usePortal:i,labelId:u,descriptionId:P,setLabelId:m,setDescriptionId:M}),[r,d,b,p,H,g,s,i,u,P])}function j(e){let a=e,{children:o}=a,t=c(a,["children"]),r=V(n({},t));return w.createElement(B,{value:r},o)}var K=e=>({container:css({display:e?"inital":"none",width:"max-content",position:"absolute",top:0,left:0,background:R.colorWhite,border:0,borderRadius:R.borderRadiusMedium,boxShadow:R.boxShadowDefault,zIndex:R.zIndexDropdown,"&:focus":{boxShadow:R.glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{boxShadow:R.boxShadowDefault}})});var U=(e,o)=>{let y=e,{children:t,className:r,testId:a="cf-ui-popover-content",role:p="dialog"}=y,s=c(y,["children","className","testId","role"]),b=T(),{isOpen:i,renderOnlyWhenOpen:h,usePortal:f,autoFocus:d,dismiss:u,context:m}=b,P=c(b,["isOpen","renderOnlyWhenOpen","usePortal","autoFocus","dismiss","context"]),M=useMergeRefs([P.refs.setFloating,o]),C=K(i),{getFloatingProps:v}=useInteractions([u]);if(h&&!i)return null;let g=w.createElement("div",l(n(l(n({},s),{className:cx(C.container,r),style:n({},P.floatingStyles)}),v()),{"aria-describedby":P.descriptionId,"data-test-id":a,tabIndex:-1,role:p,ref:M,"data-position-absolute":true}),t),x=E=>d===false?E:w.createElement(FloatingFocusManager,{context:m},E);return f?w.createElement(FloatingPortal,null,x(g)):x(g)};U.displayName="PopoverContent";var S=w.forwardRef(U);var L=w.forwardRef(function(a,r){var p=a,{children:o}=p,t=c(p,["children"]);var m;let s=T(),i=o.ref,h=useMergeRefs([s==null?void 0:s.refs.setReference,r,i]);if(!w.isValidElement(o))return console.error("Only valid React elements are supported - https://react.dev/reference/react/isValidElement"),null;let f=o.props,d=(m=f["aria-haspopup"])!=null?m:"dialog",u=s.getReferenceProps(l(n(n({ref:h},t),f),{"aria-haspopup":d,"aria-expanded":s.isOpen}));return w.cloneElement(o,u)});var W=j;W.Content=S;W.Trigger=L;
2
+ export{W as Popover,S as PopoverContent,L as PopoverTrigger};//# sourceMappingURL=index.js.map
12
3
  //# 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","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"]}
1
+ {"version":3,"sources":["../../src/Popover.tsx","../../src/PopoverContext.ts","../../src/usePopover.ts","../../src/PopoverContent/PopoverContent.styles.ts","../../src/PopoverContent/PopoverContent.tsx","../../src/PopoverTrigger/PopoverTrigger.tsx","../../src/CompoundPopover.tsx"],"names":["PopoverContext","React","usePopoverContext","context","PopoverContextProvider","usePopover","placement","isFullWidth","isAutoalignmentEnabled","isOpen","offsetOption","onClose","renderOnlyWhenOpen","usePortal","closeOnEsc","closeOnBlur","autoFocus","labelId","setLabelId","descriptionId","setDescriptionId","sanitizedPlacement","middleware","offset","flip","shift","autoPlacement","size","rects","elements","data","useFloating","autoUpdate","click","useClick","dismiss","useDismiss","role","useRole","interactions","useInteractions","__spreadProps","__spreadValues","Popover","props","_a","children","otherOptions","__objRest","popover","getPopoverContentStyles","css","tokens","PopoverContentBase","propRef","className","testId","otherProps","_b","floatingContext","ref","useMergeRefs","styles","getFloatingProps","content","cx","maybeWrapWithFocusManager","node","FloatingFocusManager","FloatingPortal","PopoverContent","PopoverTrigger","childRef","childProps","ariaHasPopup","mergedProps"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\nimport { type OffsetOptions, type Placement } from '@floating-ui/react';\nimport { type ExpandProps } from '@contentful/f36-core';\nimport { PopoverContextProvider } from './PopoverContext';\nimport { usePopover } from './usePopover';\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 | 'auto';\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 * Single number as short hand for `mainAxis`\n * Or object which can contain `mainAxis`, `crossAxis` or `alignmentAxis`\n *\n * @default 0\n */\n offset?: OffsetOptions;\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 { children, ...otherOptions } = props;\n const popover = usePopover({ ...otherOptions });\n\n return (\n <PopoverContextProvider value={popover}>{children}</PopoverContextProvider>\n );\n}\n","import React from 'react';\nimport { usePopover } from './usePopover';\n\nexport type PopoverContextType =\n | (ReturnType<typeof usePopover> & {\n setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;\n setDescriptionId: React.Dispatch<\n React.SetStateAction<string | undefined>\n >;\n })\n | null;\nconst PopoverContext = React.createContext<PopoverContextType>(null);\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 {\n useFloating,\n autoUpdate,\n offset,\n flip,\n shift,\n size,\n useClick,\n useDismiss,\n useRole,\n useInteractions,\n autoPlacement,\n} from '@floating-ui/react';\nimport type { Middleware, OffsetOptions, Placement } from '@floating-ui/react';\n\nexport interface PopoverOptions {\n placement?: Placement | 'auto';\n isFullWidth?: boolean;\n isAutoalignmentEnabled?: boolean;\n isOpen?: boolean;\n closeOnEsc?: boolean;\n closeOnBlur?: boolean;\n /**\n * If true the floating content will auto-focus on open. Defaults to true.\n */\n autoFocus?: boolean;\n offset?: OffsetOptions;\n renderOnlyWhenOpen?: boolean;\n usePortal?: boolean;\n onClose?: (isOpen: boolean) => void;\n}\n\nexport function usePopover({\n placement = 'bottom-start',\n isFullWidth = false,\n isAutoalignmentEnabled = true,\n isOpen = false,\n offset: offsetOption = 0,\n onClose,\n renderOnlyWhenOpen = true,\n usePortal = true,\n closeOnEsc = true,\n closeOnBlur = true,\n autoFocus = true,\n}: PopoverOptions = {}) {\n const [labelId, setLabelId] = React.useState<string | undefined>();\n const [descriptionId, setDescriptionId] = React.useState<\n string | undefined\n >();\n\n /** Configure middleware based on placement and isAutoalignmentEnabled\n * If placement is \"auto\" it will use autoPlacement() in the middleware and not make use of flip and switch.\n * If isAutoalignmentEnabled is false, it will also not use flip and switch but only use the placement variable.\n */\n\n let sanitizedPlacement: Placement = 'bottom-start';\n const middleware: Middleware[] = [offset(offsetOption)];\n\n if (placement !== 'auto' && isAutoalignmentEnabled) {\n sanitizedPlacement = placement;\n middleware.push(flip({ padding: 5 }), shift({ padding: 5 }));\n } else if (placement === 'auto') {\n middleware.push(autoPlacement());\n } else {\n sanitizedPlacement = placement;\n }\n\n /**\n * Set to same size as trigger reference element\n */\n if (isFullWidth) {\n middleware.push(\n size({\n apply({ rects, elements }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n });\n },\n }),\n );\n }\n\n const data = useFloating({\n placement: sanitizedPlacement,\n open: isOpen,\n onOpenChange: onClose,\n whileElementsMounted: autoUpdate,\n middleware,\n });\n\n const context = data.context;\n\n const click = useClick(context, {\n enabled: false,\n });\n const dismiss = useDismiss(context, {\n escapeKey: closeOnEsc,\n outsidePress: closeOnBlur,\n ancestorScroll: true,\n });\n const role = useRole(context);\n\n const interactions = useInteractions([click, dismiss, role]);\n\n return React.useMemo(\n () => ({\n isOpen,\n autoFocus,\n dismiss,\n onClose,\n ...interactions,\n ...data,\n renderOnlyWhenOpen,\n usePortal,\n labelId,\n descriptionId,\n setLabelId,\n setDescriptionId,\n }),\n [\n isOpen,\n autoFocus,\n dismiss,\n onClose,\n interactions,\n data,\n renderOnlyWhenOpen,\n usePortal,\n labelId,\n descriptionId,\n ],\n );\n}\n","import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getPopoverContentStyles = (isOpen: boolean) => ({\n container: css({\n display: isOpen ? 'inital' : 'none',\n width: 'max-content',\n position: 'absolute',\n top: 0,\n left: 0,\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 { cx } from '@emotion/css';\nimport type {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\nimport { usePopoverContext } from '../PopoverContext';\nimport { getPopoverContentStyles } from './PopoverContent.styles';\nimport {\n FloatingPortal,\n FloatingFocusManager,\n useMergeRefs,\n useInteractions,\n} from '@floating-ui/react';\n\ninterface PopoverContentInternalProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nexport type PopoverContentProps = PropsWithHTMLElement<\n PopoverContentInternalProps,\n 'div'\n>;\n\nconst PopoverContentBase = (\n props: ExpandProps<PopoverContentProps>,\n propRef: React.Ref<HTMLElement>,\n) => {\n const {\n children,\n className,\n testId = 'cf-ui-popover-content',\n role = 'dialog',\n ...otherProps\n } = props;\n\n const {\n isOpen,\n renderOnlyWhenOpen,\n usePortal,\n autoFocus,\n dismiss,\n context: floatingContext,\n ...context\n } = usePopoverContext();\n const ref = useMergeRefs([context.refs.setFloating, propRef]);\n\n const styles = getPopoverContentStyles(isOpen);\n\n const { getFloatingProps } = useInteractions([dismiss]);\n\n if (renderOnlyWhenOpen && !isOpen) {\n return null;\n }\n\n const content = (\n <div\n {...otherProps}\n className={cx(styles.container, className)}\n style={{ ...context.floatingStyles }}\n {...getFloatingProps()}\n aria-describedby={context.descriptionId}\n data-test-id={testId}\n tabIndex={-1}\n role={role}\n ref={ref}\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 const maybeWrapWithFocusManager = (node: React.ReactElement) =>\n autoFocus === false ? (\n node\n ) : (\n <FloatingFocusManager context={floatingContext}>\n {node}\n </FloatingFocusManager>\n );\n\n return usePortal ? (\n <FloatingPortal>\n {maybeWrapWithFocusManager(content as React.ReactElement)}\n </FloatingPortal>\n ) : (\n maybeWrapWithFocusManager(content as React.ReactElement)\n );\n};\n\nPopoverContentBase.displayName = 'PopoverContent';\n\nexport const PopoverContent = React.forwardRef(PopoverContentBase);\n","import React from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\nimport { usePopoverContext } from '../PopoverContext';\n\n// Make the component generic over the kind of HTMLElement the ref will point to.\n// We accept any ReactElement whose props are an object (default in React) and may contain a ref.\nexport interface PopoverTriggerProps<E extends HTMLElement = HTMLElement> {\n children: React.ReactElement<\n Record<string, unknown> & {\n ref?: React.Ref<E>;\n 'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];\n },\n React.ElementType\n >;\n}\n\n/**\n * PopoverTrigger opens the popover. It must be an interactive element.\n */\nexport const PopoverTrigger = React.forwardRef<\n HTMLElement,\n PopoverTriggerProps\n>(function PopoverTrigger({ children, ...otherProps }, propRef) {\n const context = usePopoverContext();\n\n // Existing ref on the child (if any) so we can merge it.\n const childRef: React.Ref<HTMLElement> | undefined = (\n children as unknown as { ref?: React.Ref<HTMLElement> }\n ).ref;\n\n const ref = useMergeRefs([context?.refs.setReference, propRef, childRef]);\n\n if (!React.isValidElement(children)) {\n // eslint-disable-next-line no-console\n console.error(\n 'Only valid React elements are supported - https://react.dev/reference/react/isValidElement',\n );\n return null;\n }\n\n // Ensure TypeScript understands this is an object so spreading is allowed.\n const childProps = children.props as Record<string, unknown>;\n\n const ariaHasPopup = (childProps['aria-haspopup'] ??\n 'dialog') as React.AriaAttributes['aria-haspopup'];\n\n const mergedProps = context.getReferenceProps({\n ref,\n ...otherProps,\n ...childProps,\n 'aria-haspopup': ariaHasPopup,\n 'aria-expanded': context.isOpen,\n });\n\n return React.cloneElement(children, mergedProps);\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 CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
- import { ExpandProps, PropsWithHTMLElement, CommonProps } from '@contentful/f36-core';
3
- import { Placement } from '@popperjs/core';
4
- import * as _emotion_core from '@emotion/core';
2
+ import { Placement, OffsetOptions } from '@floating-ui/react';
3
+ import { ExpandProps, CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
5
4
 
6
5
  interface PopoverProps {
7
6
  children: React.ReactNode;
@@ -28,7 +27,7 @@ interface PopoverProps {
28
27
  *
29
28
  * @default bottom-start
30
29
  */
31
- placement?: Placement;
30
+ placement?: Placement | 'auto';
32
31
  /**
33
32
  * Boolean to control if popover is allowed to change its placement automatically
34
33
  * based on available space in the viewport.
@@ -77,12 +76,12 @@ interface PopoverProps {
77
76
  */
78
77
  id?: string;
79
78
  /**
80
- * The `X-axis` and `Y-axis` offset to position popper element
81
- * from its trigger element. `[X, Y]`
79
+ * Single number as short hand for `mainAxis`
80
+ * Or object which can contain `mainAxis`, `crossAxis` or `alignmentAxis`
82
81
  *
83
- * @default [1, 4]
82
+ * @default 0
84
83
  */
85
- offset?: [number, number];
84
+ offset?: OffsetOptions;
86
85
  /**
87
86
  * Defines if popover should be rendered in the DOM only when it's open
88
87
  * or all the time (after the component has been mounted)
@@ -91,391 +90,29 @@ interface PopoverProps {
91
90
  */
92
91
  renderOnlyWhenOpen?: boolean;
93
92
  }
94
- declare function Popover$1(props: ExpandProps<PopoverProps>): JSX.Element;
93
+ declare function Popover$1(props: ExpandProps<PopoverProps>): React.JSX.Element;
95
94
 
96
95
  interface PopoverContentInternalProps extends CommonProps {
97
96
  children?: React.ReactNode;
98
97
  }
99
- declare type PopoverContentProps = PropsWithHTMLElement<PopoverContentInternalProps, 'div'>;
100
- 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>>;
98
+ type PopoverContentProps = PropsWithHTMLElement<PopoverContentInternalProps, 'div'>;
99
+ declare const PopoverContent: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, never>, keyof PopoverContentInternalProps> & PopoverContentInternalProps & React.RefAttributes<HTMLElement>>;
101
100
 
102
- interface PopoverTriggerProps {
103
- children: React.ReactNode;
101
+ interface PopoverTriggerProps<E extends HTMLElement = HTMLElement> {
102
+ children: React.ReactElement<Record<string, unknown> & {
103
+ ref?: React.Ref<E>;
104
+ 'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
105
+ }, React.ElementType>;
104
106
  }
105
107
  /**
106
108
  * PopoverTrigger opens the popover. It must be an interactive element.
107
109
  */
108
- declare const PopoverTrigger: (props: PopoverTriggerProps) => React.DetailedReactHTMLElement<{
109
- 'aria-haspopup': any;
110
- accept?: string;
111
- acceptCharset?: string;
112
- action?: string;
113
- allowFullScreen?: boolean;
114
- allowTransparency?: boolean;
115
- alt?: string;
116
- as?: string;
117
- async?: boolean;
118
- autoComplete?: string;
119
- autoFocus?: boolean;
120
- autoPlay?: boolean;
121
- capture?: string | boolean;
122
- cellPadding?: string | number;
123
- cellSpacing?: string | number;
124
- charSet?: string;
125
- challenge?: string;
126
- checked?: boolean;
127
- cite?: string;
128
- classID?: string;
129
- cols?: number;
130
- colSpan?: number;
131
- content?: string;
132
- controls?: boolean;
133
- coords?: string;
134
- crossOrigin?: string;
135
- data?: string;
136
- dateTime?: string;
137
- default?: boolean;
138
- defer?: boolean;
139
- disabled?: boolean;
140
- download?: any;
141
- encType?: string;
142
- form?: string;
143
- formAction?: string;
144
- formEncType?: string;
145
- formMethod?: string;
146
- formNoValidate?: boolean;
147
- formTarget?: string;
148
- frameBorder?: string | number;
149
- headers?: string;
150
- height?: string | number;
151
- high?: number;
152
- href?: string;
153
- hrefLang?: string;
154
- htmlFor?: string;
155
- httpEquiv?: string;
156
- integrity?: string;
157
- keyParams?: string;
158
- keyType?: string;
159
- kind?: string;
160
- label?: string;
161
- list?: string;
162
- loop?: boolean;
163
- low?: number;
164
- manifest?: string;
165
- marginHeight?: number;
166
- marginWidth?: number;
167
- max?: string | number;
168
- maxLength?: number;
169
- media?: string;
170
- mediaGroup?: string;
171
- method?: string;
172
- min?: string | number;
173
- minLength?: number;
174
- multiple?: boolean;
175
- muted?: boolean;
176
- name?: string;
177
- nonce?: string;
178
- noValidate?: boolean;
179
- open?: boolean;
180
- optimum?: number;
181
- pattern?: string;
182
- placeholder?: string;
183
- playsInline?: boolean;
184
- poster?: string;
185
- preload?: string;
186
- readOnly?: boolean;
187
- rel?: string;
188
- required?: boolean;
189
- reversed?: boolean;
190
- rows?: number;
191
- rowSpan?: number;
192
- sandbox?: string;
193
- scope?: string;
194
- scoped?: boolean;
195
- scrolling?: string;
196
- seamless?: boolean;
197
- selected?: boolean;
198
- shape?: string;
199
- size?: number;
200
- sizes?: string;
201
- span?: number;
202
- src?: string;
203
- srcDoc?: string;
204
- srcLang?: string;
205
- srcSet?: string;
206
- start?: number;
207
- step?: string | number;
208
- summary?: string;
209
- target?: string;
210
- type?: string;
211
- useMap?: string;
212
- value?: string | number | readonly string[];
213
- width?: string | number;
214
- wmode?: string;
215
- wrap?: string;
216
- defaultChecked?: boolean;
217
- defaultValue?: string | number | readonly string[];
218
- suppressContentEditableWarning?: boolean;
219
- suppressHydrationWarning?: boolean;
220
- accessKey?: string;
221
- className?: string;
222
- contentEditable?: "inherit" | (boolean | "false" | "true");
223
- contextMenu?: string;
224
- dir?: string;
225
- draggable?: boolean | "false" | "true";
226
- hidden?: boolean;
227
- id?: string;
228
- lang?: string;
229
- slot?: string;
230
- spellCheck?: boolean | "false" | "true";
231
- style?: React.CSSProperties;
232
- tabIndex?: number;
233
- title?: string;
234
- translate?: "yes" | "no";
235
- radioGroup?: string;
236
- role?: React.AriaRole;
237
- about?: string;
238
- datatype?: string;
239
- inlist?: any;
240
- prefix?: string;
241
- property?: string;
242
- resource?: string;
243
- typeof?: string;
244
- vocab?: string;
245
- autoCapitalize?: string;
246
- autoCorrect?: string;
247
- autoSave?: string;
248
- color?: string;
249
- itemProp?: string;
250
- itemScope?: boolean;
251
- itemType?: string;
252
- itemID?: string;
253
- itemRef?: string;
254
- results?: number;
255
- security?: string;
256
- unselectable?: "on" | "off";
257
- inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal";
258
- is?: string;
259
- 'aria-activedescendant'?: string;
260
- 'aria-atomic'?: boolean | "false" | "true";
261
- 'aria-autocomplete'?: "both" | "none" | "inline" | "list";
262
- 'aria-busy'?: boolean | "false" | "true";
263
- 'aria-checked'?: boolean | "false" | "true" | "mixed";
264
- 'aria-colcount'?: number;
265
- 'aria-colindex'?: number;
266
- 'aria-colspan'?: number;
267
- 'aria-controls'?: string;
268
- 'aria-current'?: boolean | "false" | "true" | "page" | "time" | "step" | "location" | "date";
269
- 'aria-describedby'?: string;
270
- 'aria-details'?: string;
271
- 'aria-disabled'?: boolean | "false" | "true";
272
- 'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup";
273
- 'aria-errormessage'?: string;
274
- 'aria-expanded'?: boolean | "false" | "true";
275
- 'aria-flowto'?: string;
276
- 'aria-grabbed'?: boolean | "false" | "true";
277
- 'aria-hidden'?: boolean | "false" | "true";
278
- 'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
279
- 'aria-keyshortcuts'?: string;
280
- 'aria-label'?: string;
281
- 'aria-labelledby'?: string;
282
- 'aria-level'?: number;
283
- 'aria-live'?: "off" | "assertive" | "polite";
284
- 'aria-modal'?: boolean | "false" | "true";
285
- 'aria-multiline'?: boolean | "false" | "true";
286
- 'aria-multiselectable'?: boolean | "false" | "true";
287
- 'aria-orientation'?: "horizontal" | "vertical";
288
- 'aria-owns'?: string;
289
- 'aria-placeholder'?: string;
290
- 'aria-posinset'?: number;
291
- 'aria-pressed'?: boolean | "false" | "true" | "mixed";
292
- 'aria-readonly'?: boolean | "false" | "true";
293
- 'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
294
- 'aria-required'?: boolean | "false" | "true";
295
- 'aria-roledescription'?: string;
296
- 'aria-rowcount'?: number;
297
- 'aria-rowindex'?: number;
298
- 'aria-rowspan'?: number;
299
- 'aria-selected'?: boolean | "false" | "true";
300
- 'aria-setsize'?: number;
301
- 'aria-sort'?: "none" | "ascending" | "descending" | "other";
302
- 'aria-valuemax'?: number;
303
- 'aria-valuemin'?: number;
304
- 'aria-valuenow'?: number;
305
- 'aria-valuetext'?: string;
306
- children?: React.ReactNode;
307
- dangerouslySetInnerHTML?: {
308
- __html: string;
309
- };
310
- onCopy?: React.ClipboardEventHandler<HTMLElement>;
311
- onCopyCapture?: React.ClipboardEventHandler<HTMLElement>;
312
- onCut?: React.ClipboardEventHandler<HTMLElement>;
313
- onCutCapture?: React.ClipboardEventHandler<HTMLElement>;
314
- onPaste?: React.ClipboardEventHandler<HTMLElement>;
315
- onPasteCapture?: React.ClipboardEventHandler<HTMLElement>;
316
- onCompositionEnd?: React.CompositionEventHandler<HTMLElement>;
317
- onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement>;
318
- onCompositionStart?: React.CompositionEventHandler<HTMLElement>;
319
- onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement>;
320
- onCompositionUpdate?: React.CompositionEventHandler<HTMLElement>;
321
- onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement>;
322
- onFocus?: React.FocusEventHandler<HTMLElement>;
323
- onFocusCapture?: React.FocusEventHandler<HTMLElement>;
324
- onBlur?: React.FocusEventHandler<HTMLElement>;
325
- onBlurCapture?: React.FocusEventHandler<HTMLElement>;
326
- onChange?: React.FormEventHandler<HTMLElement>;
327
- onChangeCapture?: React.FormEventHandler<HTMLElement>;
328
- onBeforeInput?: React.FormEventHandler<HTMLElement>;
329
- onBeforeInputCapture?: React.FormEventHandler<HTMLElement>;
330
- onInput?: React.FormEventHandler<HTMLElement>;
331
- onInputCapture?: React.FormEventHandler<HTMLElement>;
332
- onReset?: React.FormEventHandler<HTMLElement>;
333
- onResetCapture?: React.FormEventHandler<HTMLElement>;
334
- onSubmit?: React.FormEventHandler<HTMLElement>;
335
- onSubmitCapture?: React.FormEventHandler<HTMLElement>;
336
- onInvalid?: React.FormEventHandler<HTMLElement>;
337
- onInvalidCapture?: React.FormEventHandler<HTMLElement>;
338
- onLoad?: React.ReactEventHandler<HTMLElement>;
339
- onLoadCapture?: React.ReactEventHandler<HTMLElement>;
340
- onError?: React.ReactEventHandler<HTMLElement>;
341
- onErrorCapture?: React.ReactEventHandler<HTMLElement>;
342
- onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
343
- onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement>;
344
- onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
345
- onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement>;
346
- onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
347
- onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement>;
348
- onAbort?: React.ReactEventHandler<HTMLElement>;
349
- onAbortCapture?: React.ReactEventHandler<HTMLElement>;
350
- onCanPlay?: React.ReactEventHandler<HTMLElement>;
351
- onCanPlayCapture?: React.ReactEventHandler<HTMLElement>;
352
- onCanPlayThrough?: React.ReactEventHandler<HTMLElement>;
353
- onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement>;
354
- onDurationChange?: React.ReactEventHandler<HTMLElement>;
355
- onDurationChangeCapture?: React.ReactEventHandler<HTMLElement>;
356
- onEmptied?: React.ReactEventHandler<HTMLElement>;
357
- onEmptiedCapture?: React.ReactEventHandler<HTMLElement>;
358
- onEncrypted?: React.ReactEventHandler<HTMLElement>;
359
- onEncryptedCapture?: React.ReactEventHandler<HTMLElement>;
360
- onEnded?: React.ReactEventHandler<HTMLElement>;
361
- onEndedCapture?: React.ReactEventHandler<HTMLElement>;
362
- onLoadedData?: React.ReactEventHandler<HTMLElement>;
363
- onLoadedDataCapture?: React.ReactEventHandler<HTMLElement>;
364
- onLoadedMetadata?: React.ReactEventHandler<HTMLElement>;
365
- onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement>;
366
- onLoadStart?: React.ReactEventHandler<HTMLElement>;
367
- onLoadStartCapture?: React.ReactEventHandler<HTMLElement>;
368
- onPause?: React.ReactEventHandler<HTMLElement>;
369
- onPauseCapture?: React.ReactEventHandler<HTMLElement>;
370
- onPlay?: React.ReactEventHandler<HTMLElement>;
371
- onPlayCapture?: React.ReactEventHandler<HTMLElement>;
372
- onPlaying?: React.ReactEventHandler<HTMLElement>;
373
- onPlayingCapture?: React.ReactEventHandler<HTMLElement>;
374
- onProgress?: React.ReactEventHandler<HTMLElement>;
375
- onProgressCapture?: React.ReactEventHandler<HTMLElement>;
376
- onRateChange?: React.ReactEventHandler<HTMLElement>;
377
- onRateChangeCapture?: React.ReactEventHandler<HTMLElement>;
378
- onSeeked?: React.ReactEventHandler<HTMLElement>;
379
- onSeekedCapture?: React.ReactEventHandler<HTMLElement>;
380
- onSeeking?: React.ReactEventHandler<HTMLElement>;
381
- onSeekingCapture?: React.ReactEventHandler<HTMLElement>;
382
- onStalled?: React.ReactEventHandler<HTMLElement>;
383
- onStalledCapture?: React.ReactEventHandler<HTMLElement>;
384
- onSuspend?: React.ReactEventHandler<HTMLElement>;
385
- onSuspendCapture?: React.ReactEventHandler<HTMLElement>;
386
- onTimeUpdate?: React.ReactEventHandler<HTMLElement>;
387
- onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement>;
388
- onVolumeChange?: React.ReactEventHandler<HTMLElement>;
389
- onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement>;
390
- onWaiting?: React.ReactEventHandler<HTMLElement>;
391
- onWaitingCapture?: React.ReactEventHandler<HTMLElement>;
392
- onAuxClick?: React.MouseEventHandler<HTMLElement>;
393
- onAuxClickCapture?: React.MouseEventHandler<HTMLElement>;
394
- onClick?: React.MouseEventHandler<HTMLElement>;
395
- onClickCapture?: React.MouseEventHandler<HTMLElement>;
396
- onContextMenu?: React.MouseEventHandler<HTMLElement>;
397
- onContextMenuCapture?: React.MouseEventHandler<HTMLElement>;
398
- onDoubleClick?: React.MouseEventHandler<HTMLElement>;
399
- onDoubleClickCapture?: React.MouseEventHandler<HTMLElement>;
400
- onDrag?: React.DragEventHandler<HTMLElement>;
401
- onDragCapture?: React.DragEventHandler<HTMLElement>;
402
- onDragEnd?: React.DragEventHandler<HTMLElement>;
403
- onDragEndCapture?: React.DragEventHandler<HTMLElement>;
404
- onDragEnter?: React.DragEventHandler<HTMLElement>;
405
- onDragEnterCapture?: React.DragEventHandler<HTMLElement>;
406
- onDragExit?: React.DragEventHandler<HTMLElement>;
407
- onDragExitCapture?: React.DragEventHandler<HTMLElement>;
408
- onDragLeave?: React.DragEventHandler<HTMLElement>;
409
- onDragLeaveCapture?: React.DragEventHandler<HTMLElement>;
410
- onDragOver?: React.DragEventHandler<HTMLElement>;
411
- onDragOverCapture?: React.DragEventHandler<HTMLElement>;
412
- onDragStart?: React.DragEventHandler<HTMLElement>;
413
- onDragStartCapture?: React.DragEventHandler<HTMLElement>;
414
- onDrop?: React.DragEventHandler<HTMLElement>;
415
- onDropCapture?: React.DragEventHandler<HTMLElement>;
416
- onMouseDown?: React.MouseEventHandler<HTMLElement>;
417
- onMouseDownCapture?: React.MouseEventHandler<HTMLElement>;
418
- onMouseEnter?: React.MouseEventHandler<HTMLElement>;
419
- onMouseLeave?: React.MouseEventHandler<HTMLElement>;
420
- onMouseMove?: React.MouseEventHandler<HTMLElement>;
421
- onMouseMoveCapture?: React.MouseEventHandler<HTMLElement>;
422
- onMouseOut?: React.MouseEventHandler<HTMLElement>;
423
- onMouseOutCapture?: React.MouseEventHandler<HTMLElement>;
424
- onMouseOver?: React.MouseEventHandler<HTMLElement>;
425
- onMouseOverCapture?: React.MouseEventHandler<HTMLElement>;
426
- onMouseUp?: React.MouseEventHandler<HTMLElement>;
427
- onMouseUpCapture?: React.MouseEventHandler<HTMLElement>;
428
- onSelect?: React.ReactEventHandler<HTMLElement>;
429
- onSelectCapture?: React.ReactEventHandler<HTMLElement>;
430
- onTouchCancel?: React.TouchEventHandler<HTMLElement>;
431
- onTouchCancelCapture?: React.TouchEventHandler<HTMLElement>;
432
- onTouchEnd?: React.TouchEventHandler<HTMLElement>;
433
- onTouchEndCapture?: React.TouchEventHandler<HTMLElement>;
434
- onTouchMove?: React.TouchEventHandler<HTMLElement>;
435
- onTouchMoveCapture?: React.TouchEventHandler<HTMLElement>;
436
- onTouchStart?: React.TouchEventHandler<HTMLElement>;
437
- onTouchStartCapture?: React.TouchEventHandler<HTMLElement>;
438
- onPointerDown?: React.PointerEventHandler<HTMLElement>;
439
- onPointerDownCapture?: React.PointerEventHandler<HTMLElement>;
440
- onPointerMove?: React.PointerEventHandler<HTMLElement>;
441
- onPointerMoveCapture?: React.PointerEventHandler<HTMLElement>;
442
- onPointerUp?: React.PointerEventHandler<HTMLElement>;
443
- onPointerUpCapture?: React.PointerEventHandler<HTMLElement>;
444
- onPointerCancel?: React.PointerEventHandler<HTMLElement>;
445
- onPointerCancelCapture?: React.PointerEventHandler<HTMLElement>;
446
- onPointerEnter?: React.PointerEventHandler<HTMLElement>;
447
- onPointerEnterCapture?: React.PointerEventHandler<HTMLElement>;
448
- onPointerLeave?: React.PointerEventHandler<HTMLElement>;
449
- onPointerLeaveCapture?: React.PointerEventHandler<HTMLElement>;
450
- onPointerOver?: React.PointerEventHandler<HTMLElement>;
451
- onPointerOverCapture?: React.PointerEventHandler<HTMLElement>;
452
- onPointerOut?: React.PointerEventHandler<HTMLElement>;
453
- onPointerOutCapture?: React.PointerEventHandler<HTMLElement>;
454
- onGotPointerCapture?: React.PointerEventHandler<HTMLElement>;
455
- onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
456
- onLostPointerCapture?: React.PointerEventHandler<HTMLElement>;
457
- onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
458
- onScroll?: React.UIEventHandler<HTMLElement>;
459
- onScrollCapture?: React.UIEventHandler<HTMLElement>;
460
- onWheel?: React.WheelEventHandler<HTMLElement>;
461
- onWheelCapture?: React.WheelEventHandler<HTMLElement>;
462
- onAnimationStart?: React.AnimationEventHandler<HTMLElement>;
463
- onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement>;
464
- onAnimationEnd?: React.AnimationEventHandler<HTMLElement>;
465
- onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement>;
466
- onAnimationIteration?: React.AnimationEventHandler<HTMLElement>;
467
- onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement>;
468
- onTransitionEnd?: React.TransitionEventHandler<HTMLElement>;
469
- onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement>;
470
- css?: _emotion_core.InterpolationWithTheme<any>;
471
- ref?: React.LegacyRef<HTMLElement>;
472
- key?: React.Key;
473
- }, HTMLElement>;
110
+ declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverTriggerProps<HTMLElement> & React.RefAttributes<HTMLElement>>;
474
111
 
475
- declare type CompoundPopover = typeof Popover$1 & {
112
+ type CompoundPopover = typeof Popover$1 & {
476
113
  Content: typeof PopoverContent;
477
114
  Trigger: typeof PopoverTrigger;
478
115
  };
479
116
  declare const Popover: CompoundPopover;
480
117
 
481
- export { Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps };
118
+ export { Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps };
package/dist/index.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
- import { ExpandProps, PropsWithHTMLElement, CommonProps } from '@contentful/f36-core';
3
- import { Placement } from '@popperjs/core';
4
- import * as _emotion_core from '@emotion/core';
2
+ import { Placement, OffsetOptions } from '@floating-ui/react';
3
+ import { ExpandProps, CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';
5
4
 
6
5
  interface PopoverProps {
7
6
  children: React.ReactNode;
@@ -28,7 +27,7 @@ interface PopoverProps {
28
27
  *
29
28
  * @default bottom-start
30
29
  */
31
- placement?: Placement;
30
+ placement?: Placement | 'auto';
32
31
  /**
33
32
  * Boolean to control if popover is allowed to change its placement automatically
34
33
  * based on available space in the viewport.
@@ -77,12 +76,12 @@ interface PopoverProps {
77
76
  */
78
77
  id?: string;
79
78
  /**
80
- * The `X-axis` and `Y-axis` offset to position popper element
81
- * from its trigger element. `[X, Y]`
79
+ * Single number as short hand for `mainAxis`
80
+ * Or object which can contain `mainAxis`, `crossAxis` or `alignmentAxis`
82
81
  *
83
- * @default [1, 4]
82
+ * @default 0
84
83
  */
85
- offset?: [number, number];
84
+ offset?: OffsetOptions;
86
85
  /**
87
86
  * Defines if popover should be rendered in the DOM only when it's open
88
87
  * or all the time (after the component has been mounted)
@@ -91,391 +90,29 @@ interface PopoverProps {
91
90
  */
92
91
  renderOnlyWhenOpen?: boolean;
93
92
  }
94
- declare function Popover$1(props: ExpandProps<PopoverProps>): JSX.Element;
93
+ declare function Popover$1(props: ExpandProps<PopoverProps>): React.JSX.Element;
95
94
 
96
95
  interface PopoverContentInternalProps extends CommonProps {
97
96
  children?: React.ReactNode;
98
97
  }
99
- declare type PopoverContentProps = PropsWithHTMLElement<PopoverContentInternalProps, 'div'>;
100
- 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>>;
98
+ type PopoverContentProps = PropsWithHTMLElement<PopoverContentInternalProps, 'div'>;
99
+ declare const PopoverContent: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, never>, keyof PopoverContentInternalProps> & PopoverContentInternalProps & React.RefAttributes<HTMLElement>>;
101
100
 
102
- interface PopoverTriggerProps {
103
- children: React.ReactNode;
101
+ interface PopoverTriggerProps<E extends HTMLElement = HTMLElement> {
102
+ children: React.ReactElement<Record<string, unknown> & {
103
+ ref?: React.Ref<E>;
104
+ 'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
105
+ }, React.ElementType>;
104
106
  }
105
107
  /**
106
108
  * PopoverTrigger opens the popover. It must be an interactive element.
107
109
  */
108
- declare const PopoverTrigger: (props: PopoverTriggerProps) => React.DetailedReactHTMLElement<{
109
- 'aria-haspopup': any;
110
- accept?: string;
111
- acceptCharset?: string;
112
- action?: string;
113
- allowFullScreen?: boolean;
114
- allowTransparency?: boolean;
115
- alt?: string;
116
- as?: string;
117
- async?: boolean;
118
- autoComplete?: string;
119
- autoFocus?: boolean;
120
- autoPlay?: boolean;
121
- capture?: string | boolean;
122
- cellPadding?: string | number;
123
- cellSpacing?: string | number;
124
- charSet?: string;
125
- challenge?: string;
126
- checked?: boolean;
127
- cite?: string;
128
- classID?: string;
129
- cols?: number;
130
- colSpan?: number;
131
- content?: string;
132
- controls?: boolean;
133
- coords?: string;
134
- crossOrigin?: string;
135
- data?: string;
136
- dateTime?: string;
137
- default?: boolean;
138
- defer?: boolean;
139
- disabled?: boolean;
140
- download?: any;
141
- encType?: string;
142
- form?: string;
143
- formAction?: string;
144
- formEncType?: string;
145
- formMethod?: string;
146
- formNoValidate?: boolean;
147
- formTarget?: string;
148
- frameBorder?: string | number;
149
- headers?: string;
150
- height?: string | number;
151
- high?: number;
152
- href?: string;
153
- hrefLang?: string;
154
- htmlFor?: string;
155
- httpEquiv?: string;
156
- integrity?: string;
157
- keyParams?: string;
158
- keyType?: string;
159
- kind?: string;
160
- label?: string;
161
- list?: string;
162
- loop?: boolean;
163
- low?: number;
164
- manifest?: string;
165
- marginHeight?: number;
166
- marginWidth?: number;
167
- max?: string | number;
168
- maxLength?: number;
169
- media?: string;
170
- mediaGroup?: string;
171
- method?: string;
172
- min?: string | number;
173
- minLength?: number;
174
- multiple?: boolean;
175
- muted?: boolean;
176
- name?: string;
177
- nonce?: string;
178
- noValidate?: boolean;
179
- open?: boolean;
180
- optimum?: number;
181
- pattern?: string;
182
- placeholder?: string;
183
- playsInline?: boolean;
184
- poster?: string;
185
- preload?: string;
186
- readOnly?: boolean;
187
- rel?: string;
188
- required?: boolean;
189
- reversed?: boolean;
190
- rows?: number;
191
- rowSpan?: number;
192
- sandbox?: string;
193
- scope?: string;
194
- scoped?: boolean;
195
- scrolling?: string;
196
- seamless?: boolean;
197
- selected?: boolean;
198
- shape?: string;
199
- size?: number;
200
- sizes?: string;
201
- span?: number;
202
- src?: string;
203
- srcDoc?: string;
204
- srcLang?: string;
205
- srcSet?: string;
206
- start?: number;
207
- step?: string | number;
208
- summary?: string;
209
- target?: string;
210
- type?: string;
211
- useMap?: string;
212
- value?: string | number | readonly string[];
213
- width?: string | number;
214
- wmode?: string;
215
- wrap?: string;
216
- defaultChecked?: boolean;
217
- defaultValue?: string | number | readonly string[];
218
- suppressContentEditableWarning?: boolean;
219
- suppressHydrationWarning?: boolean;
220
- accessKey?: string;
221
- className?: string;
222
- contentEditable?: "inherit" | (boolean | "false" | "true");
223
- contextMenu?: string;
224
- dir?: string;
225
- draggable?: boolean | "false" | "true";
226
- hidden?: boolean;
227
- id?: string;
228
- lang?: string;
229
- slot?: string;
230
- spellCheck?: boolean | "false" | "true";
231
- style?: React.CSSProperties;
232
- tabIndex?: number;
233
- title?: string;
234
- translate?: "yes" | "no";
235
- radioGroup?: string;
236
- role?: React.AriaRole;
237
- about?: string;
238
- datatype?: string;
239
- inlist?: any;
240
- prefix?: string;
241
- property?: string;
242
- resource?: string;
243
- typeof?: string;
244
- vocab?: string;
245
- autoCapitalize?: string;
246
- autoCorrect?: string;
247
- autoSave?: string;
248
- color?: string;
249
- itemProp?: string;
250
- itemScope?: boolean;
251
- itemType?: string;
252
- itemID?: string;
253
- itemRef?: string;
254
- results?: number;
255
- security?: string;
256
- unselectable?: "on" | "off";
257
- inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal";
258
- is?: string;
259
- 'aria-activedescendant'?: string;
260
- 'aria-atomic'?: boolean | "false" | "true";
261
- 'aria-autocomplete'?: "both" | "none" | "inline" | "list";
262
- 'aria-busy'?: boolean | "false" | "true";
263
- 'aria-checked'?: boolean | "false" | "true" | "mixed";
264
- 'aria-colcount'?: number;
265
- 'aria-colindex'?: number;
266
- 'aria-colspan'?: number;
267
- 'aria-controls'?: string;
268
- 'aria-current'?: boolean | "false" | "true" | "page" | "time" | "step" | "location" | "date";
269
- 'aria-describedby'?: string;
270
- 'aria-details'?: string;
271
- 'aria-disabled'?: boolean | "false" | "true";
272
- 'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup";
273
- 'aria-errormessage'?: string;
274
- 'aria-expanded'?: boolean | "false" | "true";
275
- 'aria-flowto'?: string;
276
- 'aria-grabbed'?: boolean | "false" | "true";
277
- 'aria-hidden'?: boolean | "false" | "true";
278
- 'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
279
- 'aria-keyshortcuts'?: string;
280
- 'aria-label'?: string;
281
- 'aria-labelledby'?: string;
282
- 'aria-level'?: number;
283
- 'aria-live'?: "off" | "assertive" | "polite";
284
- 'aria-modal'?: boolean | "false" | "true";
285
- 'aria-multiline'?: boolean | "false" | "true";
286
- 'aria-multiselectable'?: boolean | "false" | "true";
287
- 'aria-orientation'?: "horizontal" | "vertical";
288
- 'aria-owns'?: string;
289
- 'aria-placeholder'?: string;
290
- 'aria-posinset'?: number;
291
- 'aria-pressed'?: boolean | "false" | "true" | "mixed";
292
- 'aria-readonly'?: boolean | "false" | "true";
293
- 'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
294
- 'aria-required'?: boolean | "false" | "true";
295
- 'aria-roledescription'?: string;
296
- 'aria-rowcount'?: number;
297
- 'aria-rowindex'?: number;
298
- 'aria-rowspan'?: number;
299
- 'aria-selected'?: boolean | "false" | "true";
300
- 'aria-setsize'?: number;
301
- 'aria-sort'?: "none" | "ascending" | "descending" | "other";
302
- 'aria-valuemax'?: number;
303
- 'aria-valuemin'?: number;
304
- 'aria-valuenow'?: number;
305
- 'aria-valuetext'?: string;
306
- children?: React.ReactNode;
307
- dangerouslySetInnerHTML?: {
308
- __html: string;
309
- };
310
- onCopy?: React.ClipboardEventHandler<HTMLElement>;
311
- onCopyCapture?: React.ClipboardEventHandler<HTMLElement>;
312
- onCut?: React.ClipboardEventHandler<HTMLElement>;
313
- onCutCapture?: React.ClipboardEventHandler<HTMLElement>;
314
- onPaste?: React.ClipboardEventHandler<HTMLElement>;
315
- onPasteCapture?: React.ClipboardEventHandler<HTMLElement>;
316
- onCompositionEnd?: React.CompositionEventHandler<HTMLElement>;
317
- onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement>;
318
- onCompositionStart?: React.CompositionEventHandler<HTMLElement>;
319
- onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement>;
320
- onCompositionUpdate?: React.CompositionEventHandler<HTMLElement>;
321
- onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement>;
322
- onFocus?: React.FocusEventHandler<HTMLElement>;
323
- onFocusCapture?: React.FocusEventHandler<HTMLElement>;
324
- onBlur?: React.FocusEventHandler<HTMLElement>;
325
- onBlurCapture?: React.FocusEventHandler<HTMLElement>;
326
- onChange?: React.FormEventHandler<HTMLElement>;
327
- onChangeCapture?: React.FormEventHandler<HTMLElement>;
328
- onBeforeInput?: React.FormEventHandler<HTMLElement>;
329
- onBeforeInputCapture?: React.FormEventHandler<HTMLElement>;
330
- onInput?: React.FormEventHandler<HTMLElement>;
331
- onInputCapture?: React.FormEventHandler<HTMLElement>;
332
- onReset?: React.FormEventHandler<HTMLElement>;
333
- onResetCapture?: React.FormEventHandler<HTMLElement>;
334
- onSubmit?: React.FormEventHandler<HTMLElement>;
335
- onSubmitCapture?: React.FormEventHandler<HTMLElement>;
336
- onInvalid?: React.FormEventHandler<HTMLElement>;
337
- onInvalidCapture?: React.FormEventHandler<HTMLElement>;
338
- onLoad?: React.ReactEventHandler<HTMLElement>;
339
- onLoadCapture?: React.ReactEventHandler<HTMLElement>;
340
- onError?: React.ReactEventHandler<HTMLElement>;
341
- onErrorCapture?: React.ReactEventHandler<HTMLElement>;
342
- onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
343
- onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement>;
344
- onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
345
- onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement>;
346
- onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
347
- onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement>;
348
- onAbort?: React.ReactEventHandler<HTMLElement>;
349
- onAbortCapture?: React.ReactEventHandler<HTMLElement>;
350
- onCanPlay?: React.ReactEventHandler<HTMLElement>;
351
- onCanPlayCapture?: React.ReactEventHandler<HTMLElement>;
352
- onCanPlayThrough?: React.ReactEventHandler<HTMLElement>;
353
- onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement>;
354
- onDurationChange?: React.ReactEventHandler<HTMLElement>;
355
- onDurationChangeCapture?: React.ReactEventHandler<HTMLElement>;
356
- onEmptied?: React.ReactEventHandler<HTMLElement>;
357
- onEmptiedCapture?: React.ReactEventHandler<HTMLElement>;
358
- onEncrypted?: React.ReactEventHandler<HTMLElement>;
359
- onEncryptedCapture?: React.ReactEventHandler<HTMLElement>;
360
- onEnded?: React.ReactEventHandler<HTMLElement>;
361
- onEndedCapture?: React.ReactEventHandler<HTMLElement>;
362
- onLoadedData?: React.ReactEventHandler<HTMLElement>;
363
- onLoadedDataCapture?: React.ReactEventHandler<HTMLElement>;
364
- onLoadedMetadata?: React.ReactEventHandler<HTMLElement>;
365
- onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement>;
366
- onLoadStart?: React.ReactEventHandler<HTMLElement>;
367
- onLoadStartCapture?: React.ReactEventHandler<HTMLElement>;
368
- onPause?: React.ReactEventHandler<HTMLElement>;
369
- onPauseCapture?: React.ReactEventHandler<HTMLElement>;
370
- onPlay?: React.ReactEventHandler<HTMLElement>;
371
- onPlayCapture?: React.ReactEventHandler<HTMLElement>;
372
- onPlaying?: React.ReactEventHandler<HTMLElement>;
373
- onPlayingCapture?: React.ReactEventHandler<HTMLElement>;
374
- onProgress?: React.ReactEventHandler<HTMLElement>;
375
- onProgressCapture?: React.ReactEventHandler<HTMLElement>;
376
- onRateChange?: React.ReactEventHandler<HTMLElement>;
377
- onRateChangeCapture?: React.ReactEventHandler<HTMLElement>;
378
- onSeeked?: React.ReactEventHandler<HTMLElement>;
379
- onSeekedCapture?: React.ReactEventHandler<HTMLElement>;
380
- onSeeking?: React.ReactEventHandler<HTMLElement>;
381
- onSeekingCapture?: React.ReactEventHandler<HTMLElement>;
382
- onStalled?: React.ReactEventHandler<HTMLElement>;
383
- onStalledCapture?: React.ReactEventHandler<HTMLElement>;
384
- onSuspend?: React.ReactEventHandler<HTMLElement>;
385
- onSuspendCapture?: React.ReactEventHandler<HTMLElement>;
386
- onTimeUpdate?: React.ReactEventHandler<HTMLElement>;
387
- onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement>;
388
- onVolumeChange?: React.ReactEventHandler<HTMLElement>;
389
- onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement>;
390
- onWaiting?: React.ReactEventHandler<HTMLElement>;
391
- onWaitingCapture?: React.ReactEventHandler<HTMLElement>;
392
- onAuxClick?: React.MouseEventHandler<HTMLElement>;
393
- onAuxClickCapture?: React.MouseEventHandler<HTMLElement>;
394
- onClick?: React.MouseEventHandler<HTMLElement>;
395
- onClickCapture?: React.MouseEventHandler<HTMLElement>;
396
- onContextMenu?: React.MouseEventHandler<HTMLElement>;
397
- onContextMenuCapture?: React.MouseEventHandler<HTMLElement>;
398
- onDoubleClick?: React.MouseEventHandler<HTMLElement>;
399
- onDoubleClickCapture?: React.MouseEventHandler<HTMLElement>;
400
- onDrag?: React.DragEventHandler<HTMLElement>;
401
- onDragCapture?: React.DragEventHandler<HTMLElement>;
402
- onDragEnd?: React.DragEventHandler<HTMLElement>;
403
- onDragEndCapture?: React.DragEventHandler<HTMLElement>;
404
- onDragEnter?: React.DragEventHandler<HTMLElement>;
405
- onDragEnterCapture?: React.DragEventHandler<HTMLElement>;
406
- onDragExit?: React.DragEventHandler<HTMLElement>;
407
- onDragExitCapture?: React.DragEventHandler<HTMLElement>;
408
- onDragLeave?: React.DragEventHandler<HTMLElement>;
409
- onDragLeaveCapture?: React.DragEventHandler<HTMLElement>;
410
- onDragOver?: React.DragEventHandler<HTMLElement>;
411
- onDragOverCapture?: React.DragEventHandler<HTMLElement>;
412
- onDragStart?: React.DragEventHandler<HTMLElement>;
413
- onDragStartCapture?: React.DragEventHandler<HTMLElement>;
414
- onDrop?: React.DragEventHandler<HTMLElement>;
415
- onDropCapture?: React.DragEventHandler<HTMLElement>;
416
- onMouseDown?: React.MouseEventHandler<HTMLElement>;
417
- onMouseDownCapture?: React.MouseEventHandler<HTMLElement>;
418
- onMouseEnter?: React.MouseEventHandler<HTMLElement>;
419
- onMouseLeave?: React.MouseEventHandler<HTMLElement>;
420
- onMouseMove?: React.MouseEventHandler<HTMLElement>;
421
- onMouseMoveCapture?: React.MouseEventHandler<HTMLElement>;
422
- onMouseOut?: React.MouseEventHandler<HTMLElement>;
423
- onMouseOutCapture?: React.MouseEventHandler<HTMLElement>;
424
- onMouseOver?: React.MouseEventHandler<HTMLElement>;
425
- onMouseOverCapture?: React.MouseEventHandler<HTMLElement>;
426
- onMouseUp?: React.MouseEventHandler<HTMLElement>;
427
- onMouseUpCapture?: React.MouseEventHandler<HTMLElement>;
428
- onSelect?: React.ReactEventHandler<HTMLElement>;
429
- onSelectCapture?: React.ReactEventHandler<HTMLElement>;
430
- onTouchCancel?: React.TouchEventHandler<HTMLElement>;
431
- onTouchCancelCapture?: React.TouchEventHandler<HTMLElement>;
432
- onTouchEnd?: React.TouchEventHandler<HTMLElement>;
433
- onTouchEndCapture?: React.TouchEventHandler<HTMLElement>;
434
- onTouchMove?: React.TouchEventHandler<HTMLElement>;
435
- onTouchMoveCapture?: React.TouchEventHandler<HTMLElement>;
436
- onTouchStart?: React.TouchEventHandler<HTMLElement>;
437
- onTouchStartCapture?: React.TouchEventHandler<HTMLElement>;
438
- onPointerDown?: React.PointerEventHandler<HTMLElement>;
439
- onPointerDownCapture?: React.PointerEventHandler<HTMLElement>;
440
- onPointerMove?: React.PointerEventHandler<HTMLElement>;
441
- onPointerMoveCapture?: React.PointerEventHandler<HTMLElement>;
442
- onPointerUp?: React.PointerEventHandler<HTMLElement>;
443
- onPointerUpCapture?: React.PointerEventHandler<HTMLElement>;
444
- onPointerCancel?: React.PointerEventHandler<HTMLElement>;
445
- onPointerCancelCapture?: React.PointerEventHandler<HTMLElement>;
446
- onPointerEnter?: React.PointerEventHandler<HTMLElement>;
447
- onPointerEnterCapture?: React.PointerEventHandler<HTMLElement>;
448
- onPointerLeave?: React.PointerEventHandler<HTMLElement>;
449
- onPointerLeaveCapture?: React.PointerEventHandler<HTMLElement>;
450
- onPointerOver?: React.PointerEventHandler<HTMLElement>;
451
- onPointerOverCapture?: React.PointerEventHandler<HTMLElement>;
452
- onPointerOut?: React.PointerEventHandler<HTMLElement>;
453
- onPointerOutCapture?: React.PointerEventHandler<HTMLElement>;
454
- onGotPointerCapture?: React.PointerEventHandler<HTMLElement>;
455
- onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
456
- onLostPointerCapture?: React.PointerEventHandler<HTMLElement>;
457
- onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
458
- onScroll?: React.UIEventHandler<HTMLElement>;
459
- onScrollCapture?: React.UIEventHandler<HTMLElement>;
460
- onWheel?: React.WheelEventHandler<HTMLElement>;
461
- onWheelCapture?: React.WheelEventHandler<HTMLElement>;
462
- onAnimationStart?: React.AnimationEventHandler<HTMLElement>;
463
- onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement>;
464
- onAnimationEnd?: React.AnimationEventHandler<HTMLElement>;
465
- onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement>;
466
- onAnimationIteration?: React.AnimationEventHandler<HTMLElement>;
467
- onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement>;
468
- onTransitionEnd?: React.TransitionEventHandler<HTMLElement>;
469
- onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement>;
470
- css?: _emotion_core.InterpolationWithTheme<any>;
471
- ref?: React.LegacyRef<HTMLElement>;
472
- key?: React.Key;
473
- }, HTMLElement>;
110
+ declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverTriggerProps<HTMLElement> & React.RefAttributes<HTMLElement>>;
474
111
 
475
- declare type CompoundPopover = typeof Popover$1 & {
112
+ type CompoundPopover = typeof Popover$1 & {
476
113
  Content: typeof PopoverContent;
477
114
  Trigger: typeof PopoverTrigger;
478
115
  };
479
116
  declare const Popover: CompoundPopover;
480
117
 
481
- export { Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps };
118
+ export { Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps };
package/dist/index.js CHANGED
@@ -1,21 +1,3 @@
1
- 'use strict';
2
-
3
- var L = require('react');
4
- var f36Core = require('@contentful/f36-core');
5
- var reactPopper = require('react-popper');
6
- var emotion = require('emotion');
7
- var f36Utils = require('@contentful/f36-utils');
8
- var x = require('@contentful/f36-tokens');
9
-
10
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
11
-
12
- var L__default = /*#__PURE__*/_interopDefault(L);
13
- var x__default = /*#__PURE__*/_interopDefault(x);
14
-
15
- 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;
16
-
17
- exports.Popover = W;
18
- exports.PopoverContent = R;
19
- exports.PopoverTrigger = D;
20
- //# sourceMappingURL=out.js.map
1
+ 'use strict';var w=require('react'),react=require('@floating-ui/react'),css=require('@emotion/css'),R=require('@contentful/f36-tokens');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var w__default=/*#__PURE__*/_interopDefault(w);var R__default=/*#__PURE__*/_interopDefault(R);var G=Object.defineProperty,J=Object.defineProperties;var Q=Object.getOwnPropertyDescriptors;var O=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable;var k=(e,o,t)=>o in e?G(e,o,{enumerable:true,configurable:true,writable:true,value:t}):e[o]=t,n=(e,o)=>{for(var t in o||(o={}))A.call(o,t)&&k(e,t,o[t]);if(O)for(var t of O(o))D.call(o,t)&&k(e,t,o[t]);return e},l=(e,o)=>J(e,Q(o));var c=(e,o)=>{var t={};for(var r in e)A.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&O)for(var r of O(e))o.indexOf(r)<0&&D.call(e,r)&&(t[r]=e[r]);return t};var z=w__default.default.createContext(null),T=()=>{let e=w__default.default.useContext(z);if(e===void 0)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return e},B=z.Provider;function V({placement:e="bottom-start",isFullWidth:o=false,isAutoalignmentEnabled:t=true,isOpen:r=false,offset:a=0,onClose:p,renderOnlyWhenOpen:s=true,usePortal:i=true,closeOnEsc:h=true,closeOnBlur:f=true,autoFocus:d=true}={}){let[u,m]=w__default.default.useState(),[P,M]=w__default.default.useState(),C="bottom-start",v=[react.offset(a)];e!=="auto"&&t?(C=e,v.push(react.flip({padding:5}),react.shift({padding:5}))):e==="auto"?v.push(react.autoPlacement()):C=e,o&&v.push(react.size({apply({rects:$,elements:q}){Object.assign(q.floating.style,{minWidth:`${$.reference.width}px`});}}));let g=react.useFloating({placement:C,open:r,onOpenChange:p,whileElementsMounted:react.autoUpdate,middleware:v}),x=g.context,y=react.useClick(x,{enabled:false}),b=react.useDismiss(x,{escapeKey:h,outsidePress:f,ancestorScroll:true}),E=react.useRole(x),H=react.useInteractions([y,b,E]);return w__default.default.useMemo(()=>l(n(n({isOpen:r,autoFocus:d,dismiss:b,onClose:p},H),g),{renderOnlyWhenOpen:s,usePortal:i,labelId:u,descriptionId:P,setLabelId:m,setDescriptionId:M}),[r,d,b,p,H,g,s,i,u,P])}function j(e){let a=e,{children:o}=a,t=c(a,["children"]),r=V(n({},t));return w__default.default.createElement(B,{value:r},o)}var K=e=>({container:css.css({display:e?"inital":"none",width:"max-content",position:"absolute",top:0,left:0,background:R__default.default.colorWhite,border:0,borderRadius:R__default.default.borderRadiusMedium,boxShadow:R__default.default.boxShadowDefault,zIndex:R__default.default.zIndexDropdown,"&:focus":{boxShadow:R__default.default.glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{boxShadow:R__default.default.boxShadowDefault}})});var U=(e,o)=>{let y=e,{children:t,className:r,testId:a="cf-ui-popover-content",role:p="dialog"}=y,s=c(y,["children","className","testId","role"]),b=T(),{isOpen:i,renderOnlyWhenOpen:h,usePortal:f,autoFocus:d,dismiss:u,context:m}=b,P=c(b,["isOpen","renderOnlyWhenOpen","usePortal","autoFocus","dismiss","context"]),M=react.useMergeRefs([P.refs.setFloating,o]),C=K(i),{getFloatingProps:v}=react.useInteractions([u]);if(h&&!i)return null;let g=w__default.default.createElement("div",l(n(l(n({},s),{className:css.cx(C.container,r),style:n({},P.floatingStyles)}),v()),{"aria-describedby":P.descriptionId,"data-test-id":a,tabIndex:-1,role:p,ref:M,"data-position-absolute":true}),t),x=E=>d===false?E:w__default.default.createElement(react.FloatingFocusManager,{context:m},E);return f?w__default.default.createElement(react.FloatingPortal,null,x(g)):x(g)};U.displayName="PopoverContent";var S=w__default.default.forwardRef(U);var L=w__default.default.forwardRef(function(a,r){var p=a,{children:o}=p,t=c(p,["children"]);var m;let s=T(),i=o.ref,h=react.useMergeRefs([s==null?void 0:s.refs.setReference,r,i]);if(!w__default.default.isValidElement(o))return console.error("Only valid React elements are supported - https://react.dev/reference/react/isValidElement"),null;let f=o.props,d=(m=f["aria-haspopup"])!=null?m:"dialog",u=s.getReferenceProps(l(n(n({ref:h},t),f),{"aria-haspopup":d,"aria-expanded":s.isOpen}));return w__default.default.cloneElement(o,u)});var W=j;W.Content=S;W.Trigger=L;
2
+ exports.Popover=W;exports.PopoverContent=S;exports.PopoverTrigger=L;//# sourceMappingURL=index.js.map
21
3
  //# 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","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"]}
1
+ {"version":3,"sources":["../src/Popover.tsx","../src/PopoverContext.ts","../src/usePopover.ts","../src/PopoverContent/PopoverContent.styles.ts","../src/PopoverContent/PopoverContent.tsx","../src/PopoverTrigger/PopoverTrigger.tsx","../src/CompoundPopover.tsx"],"names":["PopoverContext","React","usePopoverContext","context","PopoverContextProvider","usePopover","placement","isFullWidth","isAutoalignmentEnabled","isOpen","offsetOption","onClose","renderOnlyWhenOpen","usePortal","closeOnEsc","closeOnBlur","autoFocus","labelId","setLabelId","descriptionId","setDescriptionId","sanitizedPlacement","middleware","offset","flip","shift","autoPlacement","size","rects","elements","data","useFloating","autoUpdate","click","useClick","dismiss","useDismiss","role","useRole","interactions","useInteractions","__spreadProps","__spreadValues","Popover","props","_a","children","otherOptions","__objRest","popover","getPopoverContentStyles","css","tokens","PopoverContentBase","propRef","className","testId","otherProps","_b","floatingContext","ref","useMergeRefs","styles","getFloatingProps","content","cx","maybeWrapWithFocusManager","node","FloatingFocusManager","FloatingPortal","PopoverContent","PopoverTrigger","childRef","childProps","ariaHasPopup","mergedProps"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react';\nimport { type OffsetOptions, type Placement } from '@floating-ui/react';\nimport { type ExpandProps } from '@contentful/f36-core';\nimport { PopoverContextProvider } from './PopoverContext';\nimport { usePopover } from './usePopover';\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 | 'auto';\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 * Single number as short hand for `mainAxis`\n * Or object which can contain `mainAxis`, `crossAxis` or `alignmentAxis`\n *\n * @default 0\n */\n offset?: OffsetOptions;\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 { children, ...otherOptions } = props;\n const popover = usePopover({ ...otherOptions });\n\n return (\n <PopoverContextProvider value={popover}>{children}</PopoverContextProvider>\n );\n}\n","import React from 'react';\nimport { usePopover } from './usePopover';\n\nexport type PopoverContextType =\n | (ReturnType<typeof usePopover> & {\n setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;\n setDescriptionId: React.Dispatch<\n React.SetStateAction<string | undefined>\n >;\n })\n | null;\nconst PopoverContext = React.createContext<PopoverContextType>(null);\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 {\n useFloating,\n autoUpdate,\n offset,\n flip,\n shift,\n size,\n useClick,\n useDismiss,\n useRole,\n useInteractions,\n autoPlacement,\n} from '@floating-ui/react';\nimport type { Middleware, OffsetOptions, Placement } from '@floating-ui/react';\n\nexport interface PopoverOptions {\n placement?: Placement | 'auto';\n isFullWidth?: boolean;\n isAutoalignmentEnabled?: boolean;\n isOpen?: boolean;\n closeOnEsc?: boolean;\n closeOnBlur?: boolean;\n /**\n * If true the floating content will auto-focus on open. Defaults to true.\n */\n autoFocus?: boolean;\n offset?: OffsetOptions;\n renderOnlyWhenOpen?: boolean;\n usePortal?: boolean;\n onClose?: (isOpen: boolean) => void;\n}\n\nexport function usePopover({\n placement = 'bottom-start',\n isFullWidth = false,\n isAutoalignmentEnabled = true,\n isOpen = false,\n offset: offsetOption = 0,\n onClose,\n renderOnlyWhenOpen = true,\n usePortal = true,\n closeOnEsc = true,\n closeOnBlur = true,\n autoFocus = true,\n}: PopoverOptions = {}) {\n const [labelId, setLabelId] = React.useState<string | undefined>();\n const [descriptionId, setDescriptionId] = React.useState<\n string | undefined\n >();\n\n /** Configure middleware based on placement and isAutoalignmentEnabled\n * If placement is \"auto\" it will use autoPlacement() in the middleware and not make use of flip and switch.\n * If isAutoalignmentEnabled is false, it will also not use flip and switch but only use the placement variable.\n */\n\n let sanitizedPlacement: Placement = 'bottom-start';\n const middleware: Middleware[] = [offset(offsetOption)];\n\n if (placement !== 'auto' && isAutoalignmentEnabled) {\n sanitizedPlacement = placement;\n middleware.push(flip({ padding: 5 }), shift({ padding: 5 }));\n } else if (placement === 'auto') {\n middleware.push(autoPlacement());\n } else {\n sanitizedPlacement = placement;\n }\n\n /**\n * Set to same size as trigger reference element\n */\n if (isFullWidth) {\n middleware.push(\n size({\n apply({ rects, elements }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n });\n },\n }),\n );\n }\n\n const data = useFloating({\n placement: sanitizedPlacement,\n open: isOpen,\n onOpenChange: onClose,\n whileElementsMounted: autoUpdate,\n middleware,\n });\n\n const context = data.context;\n\n const click = useClick(context, {\n enabled: false,\n });\n const dismiss = useDismiss(context, {\n escapeKey: closeOnEsc,\n outsidePress: closeOnBlur,\n ancestorScroll: true,\n });\n const role = useRole(context);\n\n const interactions = useInteractions([click, dismiss, role]);\n\n return React.useMemo(\n () => ({\n isOpen,\n autoFocus,\n dismiss,\n onClose,\n ...interactions,\n ...data,\n renderOnlyWhenOpen,\n usePortal,\n labelId,\n descriptionId,\n setLabelId,\n setDescriptionId,\n }),\n [\n isOpen,\n autoFocus,\n dismiss,\n onClose,\n interactions,\n data,\n renderOnlyWhenOpen,\n usePortal,\n labelId,\n descriptionId,\n ],\n );\n}\n","import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getPopoverContentStyles = (isOpen: boolean) => ({\n container: css({\n display: isOpen ? 'inital' : 'none',\n width: 'max-content',\n position: 'absolute',\n top: 0,\n left: 0,\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 { cx } from '@emotion/css';\nimport type {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\nimport { usePopoverContext } from '../PopoverContext';\nimport { getPopoverContentStyles } from './PopoverContent.styles';\nimport {\n FloatingPortal,\n FloatingFocusManager,\n useMergeRefs,\n useInteractions,\n} from '@floating-ui/react';\n\ninterface PopoverContentInternalProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nexport type PopoverContentProps = PropsWithHTMLElement<\n PopoverContentInternalProps,\n 'div'\n>;\n\nconst PopoverContentBase = (\n props: ExpandProps<PopoverContentProps>,\n propRef: React.Ref<HTMLElement>,\n) => {\n const {\n children,\n className,\n testId = 'cf-ui-popover-content',\n role = 'dialog',\n ...otherProps\n } = props;\n\n const {\n isOpen,\n renderOnlyWhenOpen,\n usePortal,\n autoFocus,\n dismiss,\n context: floatingContext,\n ...context\n } = usePopoverContext();\n const ref = useMergeRefs([context.refs.setFloating, propRef]);\n\n const styles = getPopoverContentStyles(isOpen);\n\n const { getFloatingProps } = useInteractions([dismiss]);\n\n if (renderOnlyWhenOpen && !isOpen) {\n return null;\n }\n\n const content = (\n <div\n {...otherProps}\n className={cx(styles.container, className)}\n style={{ ...context.floatingStyles }}\n {...getFloatingProps()}\n aria-describedby={context.descriptionId}\n data-test-id={testId}\n tabIndex={-1}\n role={role}\n ref={ref}\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 const maybeWrapWithFocusManager = (node: React.ReactElement) =>\n autoFocus === false ? (\n node\n ) : (\n <FloatingFocusManager context={floatingContext}>\n {node}\n </FloatingFocusManager>\n );\n\n return usePortal ? (\n <FloatingPortal>\n {maybeWrapWithFocusManager(content as React.ReactElement)}\n </FloatingPortal>\n ) : (\n maybeWrapWithFocusManager(content as React.ReactElement)\n );\n};\n\nPopoverContentBase.displayName = 'PopoverContent';\n\nexport const PopoverContent = React.forwardRef(PopoverContentBase);\n","import React from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\nimport { usePopoverContext } from '../PopoverContext';\n\n// Make the component generic over the kind of HTMLElement the ref will point to.\n// We accept any ReactElement whose props are an object (default in React) and may contain a ref.\nexport interface PopoverTriggerProps<E extends HTMLElement = HTMLElement> {\n children: React.ReactElement<\n Record<string, unknown> & {\n ref?: React.Ref<E>;\n 'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];\n },\n React.ElementType\n >;\n}\n\n/**\n * PopoverTrigger opens the popover. It must be an interactive element.\n */\nexport const PopoverTrigger = React.forwardRef<\n HTMLElement,\n PopoverTriggerProps\n>(function PopoverTrigger({ children, ...otherProps }, propRef) {\n const context = usePopoverContext();\n\n // Existing ref on the child (if any) so we can merge it.\n const childRef: React.Ref<HTMLElement> | undefined = (\n children as unknown as { ref?: React.Ref<HTMLElement> }\n ).ref;\n\n const ref = useMergeRefs([context?.refs.setReference, propRef, childRef]);\n\n if (!React.isValidElement(children)) {\n // eslint-disable-next-line no-console\n console.error(\n 'Only valid React elements are supported - https://react.dev/reference/react/isValidElement',\n );\n return null;\n }\n\n // Ensure TypeScript understands this is an object so spreading is allowed.\n const childProps = children.props as Record<string, unknown>;\n\n const ariaHasPopup = (childProps['aria-haspopup'] ??\n 'dialog') as React.AriaAttributes['aria-haspopup'];\n\n const mergedProps = context.getReferenceProps({\n ref,\n ...otherProps,\n ...childProps,\n 'aria-haspopup': ariaHasPopup,\n 'aria-expanded': context.isOpen,\n });\n\n return React.cloneElement(children, mergedProps);\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,21 +1,20 @@
1
1
  {
2
2
  "name": "@contentful/f36-popover",
3
- "version": "5.8.0",
3
+ "version": "6.0.0-alpha.2",
4
4
  "description": "Forma 36: Popover component",
5
5
  "scripts": {
6
6
  "build": "tsup"
7
7
  },
8
8
  "dependencies": {
9
- "@contentful/f36-core": "^5.8.0",
10
- "@contentful/f36-tokens": "^5.1.0",
11
- "@contentful/f36-utils": "^5.2.0",
12
- "@popperjs/core": "^2.11.5",
13
- "emotion": "^10.0.17",
14
- "react-popper": "^2.3.0"
9
+ "@contentful/f36-core": "^6.0.0-alpha.0",
10
+ "@contentful/f36-tokens": "^6.0.0-alpha.0",
11
+ "@contentful/f36-utils": "^6.0.0-alpha.0",
12
+ "@emotion/css": "^11.13.5",
13
+ "@floating-ui/react": "^0.27.16"
15
14
  },
16
15
  "peerDependencies": {
17
- "react": ">=16.8",
18
- "react-dom": ">=16.8"
16
+ "react": ">=19.1.0",
17
+ "react-dom": ">=19.1.0"
19
18
  },
20
19
  "license": "MIT",
21
20
  "files": [