@contentful/f36-popover 6.3.1 → 6.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/esm/index.js +1 -1
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/index.js.map +1 -1
  5. package/package.json +2 -2
package/dist/esm/index.js CHANGED
@@ -1,3 +1,3 @@
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 {cx,css}from'@emotion/css';import h from'@contentful/f36-tokens';var G=Object.defineProperty,J=Object.defineProperties;var Q=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,A=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={}))H.call(o,t)&&k(e,t,o[t]);if(E)for(var t of E(o))A.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)H.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&E)for(var r of E(e))o.indexOf(r)<0&&A.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:C=true,closeOnBlur:f=true,autoFocus:d=true}={}){let[u,m]=w.useState(),[P,M]=w.useState(),R="bottom-start",v=[offset(a)];e!=="auto"&&t?(R=e,v.push(flip({padding:5}),shift({padding:5}))):e==="auto"?v.push(autoPlacement()):R=e,o&&v.push(size({apply({rects:$,elements:q}){Object.assign(q.floating.style,{minWidth:`${$.reference.width}px`});}}));let g=useFloating({placement:R,open:r,onOpenChange:p,whileElementsMounted:autoUpdate,middleware:v}),x=g.context,y=useClick(x,{enabled:false}),b=useDismiss(x,{escapeKey:C,outsidePress:f,ancestorScroll:true}),O=useRole(x),L=useInteractions([y,b,O]);return w.useMemo(()=>l(n(n({isOpen:r,autoFocus:d,dismiss:b,onClose:p},L),g),{renderOnlyWhenOpen:s,usePortal:i,labelId:u,descriptionId:P,setLabelId:m,setDescriptionId:M}),[r,d,b,p,L,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:h.colorWhite,border:0,borderRadius:h.borderRadiusMedium,boxShadow:h.boxShadowDefault,zIndex:h.zIndexDropdown,"&:focus":{boxShadow:h.glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{boxShadow:h.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:C,usePortal:f,autoFocus:d,dismiss:u,context:m}=b,P=c(b,["isOpen","renderOnlyWhenOpen","usePortal","autoFocus","dismiss","context"]),M=useMergeRefs([P.refs.setFloating,o]),R=K(i),{getFloatingProps:v}=useInteractions([u]);if(C&&!i)return null;let g=w.createElement("div",l(n(l(n({},s),{className:cx(R.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=O=>d===false?O:w.createElement(FloatingFocusManager,{context:m,modal:false},O);return f?w.createElement(FloatingPortal,null,x(g)):x(g)};U.displayName="PopoverContent";var S=w.forwardRef(U);var W=w.forwardRef(function(a,r){var p=a,{children:o}=p,t=c(p,["children"]);var m;let s=T(),i=o.ref,C=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:C},t),f),{"aria-haspopup":d,"aria-expanded":s.isOpen}));return w.cloneElement(o,u)});var D=j;D.Content=S;D.Trigger=W;
1
+ import T from'react';import {useMergeRefs,useInteractions,FloatingPortal,FloatingFocusManager,offset,flip,shift,autoPlacement,size,useFloating,autoUpdate,useClick,useDismiss,useRole}from'@floating-ui/react';import {cx,css}from'@emotion/css';import h from'@contentful/f36-tokens';var G=Object.defineProperty,J=Object.defineProperties;var Q=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,A=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={}))H.call(o,t)&&k(e,t,o[t]);if(E)for(var t of E(o))A.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)H.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&E)for(var r of E(e))o.indexOf(r)<0&&A.call(e,r)&&(t[r]=e[r]);return t};var z=T.createContext(null),w=()=>{let e=T.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:C=true,closeOnBlur:f=true,autoFocus:d=true}={}){let[u,m]=T.useState(),[P,M]=T.useState(),R="bottom-start",v=[offset(a)];e!=="auto"&&t?(R=e,v.push(flip({padding:5}),shift({padding:5}))):e==="auto"?v.push(autoPlacement()):R=e,o&&v.push(size({apply({rects:$,elements:q}){Object.assign(q.floating.style,{width:`${$.reference.width}px`});}}));let g=useFloating({placement:R,open:r,onOpenChange:p,whileElementsMounted:autoUpdate,middleware:v}),x=g.context,y=useClick(x,{enabled:false}),b=useDismiss(x,{escapeKey:C,outsidePress:f,ancestorScroll:true}),O=useRole(x),L=useInteractions([y,b,O]);return T.useMemo(()=>l(n(n({isOpen:r,autoFocus:d,dismiss:b,onClose:p},L),g),{renderOnlyWhenOpen:s,usePortal:i,labelId:u,descriptionId:P,setLabelId:m,setDescriptionId:M}),[r,d,b,p,L,g,s,i,u,P])}function j(e){let a=e,{children:o}=a,t=c(a,["children"]),r=V(n({},t));return T.createElement(B,{value:r},o)}var K=e=>({container:css({display:e?"inital":"none",width:"max-content",position:"absolute",top:0,left:0,background:h.colorWhite,border:0,borderRadius:h.borderRadiusMedium,boxShadow:h.boxShadowDefault,zIndex:h.zIndexDropdown,"&:focus":{boxShadow:h.glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{boxShadow:h.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=w(),{isOpen:i,renderOnlyWhenOpen:C,usePortal:f,autoFocus:d,dismiss:u,context:m}=b,P=c(b,["isOpen","renderOnlyWhenOpen","usePortal","autoFocus","dismiss","context"]),M=useMergeRefs([P.refs.setFloating,o]),R=K(i),{getFloatingProps:v}=useInteractions([u]);if(C&&!i)return null;let g=T.createElement("div",l(n(l(n({},s),{className:cx(R.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=O=>d===false?O:T.createElement(FloatingFocusManager,{context:m,modal:false},O);return f?T.createElement(FloatingPortal,null,x(g)):x(g)};U.displayName="PopoverContent";var S=T.forwardRef(U);var W=T.forwardRef(function(a,r){var p=a,{children:o}=p,t=c(p,["children"]);var m;let s=w(),i=o.ref,C=useMergeRefs([s==null?void 0:s.refs.setReference,r,i]);if(!T.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:C},t),f),{"aria-haspopup":d,"aria-expanded":s.isOpen}));return T.cloneElement(o,u)});var D=j;D.Content=S;D.Trigger=W;
2
2
  export{D as Popover,S as PopoverContent,W as PopoverTrigger};//# sourceMappingURL=index.js.map
3
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/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} modal={false}>\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 {\n children: React.ReactElement;\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"]}
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 width: `${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} modal={false}>\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 {\n children: React.ReactElement;\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.js CHANGED
@@ -1,3 +1,3 @@
1
- 'use strict';var w=require('react'),react=require('@floating-ui/react'),css=require('@emotion/css'),h=require('@contentful/f36-tokens');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var w__default=/*#__PURE__*/_interopDefault(w);var h__default=/*#__PURE__*/_interopDefault(h);var G=Object.defineProperty,J=Object.defineProperties;var Q=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,A=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={}))H.call(o,t)&&k(e,t,o[t]);if(E)for(var t of E(o))A.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)H.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&E)for(var r of E(e))o.indexOf(r)<0&&A.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:C=true,closeOnBlur:f=true,autoFocus:d=true}={}){let[u,m]=w__default.default.useState(),[P,M]=w__default.default.useState(),R="bottom-start",v=[react.offset(a)];e!=="auto"&&t?(R=e,v.push(react.flip({padding:5}),react.shift({padding:5}))):e==="auto"?v.push(react.autoPlacement()):R=e,o&&v.push(react.size({apply({rects:$,elements:q}){Object.assign(q.floating.style,{minWidth:`${$.reference.width}px`});}}));let g=react.useFloating({placement:R,open:r,onOpenChange:p,whileElementsMounted:react.autoUpdate,middleware:v}),x=g.context,y=react.useClick(x,{enabled:false}),b=react.useDismiss(x,{escapeKey:C,outsidePress:f,ancestorScroll:true}),O=react.useRole(x),L=react.useInteractions([y,b,O]);return w__default.default.useMemo(()=>l(n(n({isOpen:r,autoFocus:d,dismiss:b,onClose:p},L),g),{renderOnlyWhenOpen:s,usePortal:i,labelId:u,descriptionId:P,setLabelId:m,setDescriptionId:M}),[r,d,b,p,L,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:h__default.default.colorWhite,border:0,borderRadius:h__default.default.borderRadiusMedium,boxShadow:h__default.default.boxShadowDefault,zIndex:h__default.default.zIndexDropdown,"&:focus":{boxShadow:h__default.default.glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{boxShadow:h__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:C,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]),R=K(i),{getFloatingProps:v}=react.useInteractions([u]);if(C&&!i)return null;let g=w__default.default.createElement("div",l(n(l(n({},s),{className:css.cx(R.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=O=>d===false?O:w__default.default.createElement(react.FloatingFocusManager,{context:m,modal:false},O);return f?w__default.default.createElement(react.FloatingPortal,null,x(g)):x(g)};U.displayName="PopoverContent";var S=w__default.default.forwardRef(U);var W=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,C=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:C},t),f),{"aria-haspopup":d,"aria-expanded":s.isOpen}));return w__default.default.cloneElement(o,u)});var D=j;D.Content=S;D.Trigger=W;
1
+ 'use strict';var T=require('react'),react=require('@floating-ui/react'),css=require('@emotion/css'),h=require('@contentful/f36-tokens');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var T__default=/*#__PURE__*/_interopDefault(T);var h__default=/*#__PURE__*/_interopDefault(h);var G=Object.defineProperty,J=Object.defineProperties;var Q=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var H=Object.prototype.hasOwnProperty,A=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={}))H.call(o,t)&&k(e,t,o[t]);if(E)for(var t of E(o))A.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)H.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&E)for(var r of E(e))o.indexOf(r)<0&&A.call(e,r)&&(t[r]=e[r]);return t};var z=T__default.default.createContext(null),w=()=>{let e=T__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:C=true,closeOnBlur:f=true,autoFocus:d=true}={}){let[u,m]=T__default.default.useState(),[P,M]=T__default.default.useState(),R="bottom-start",v=[react.offset(a)];e!=="auto"&&t?(R=e,v.push(react.flip({padding:5}),react.shift({padding:5}))):e==="auto"?v.push(react.autoPlacement()):R=e,o&&v.push(react.size({apply({rects:$,elements:q}){Object.assign(q.floating.style,{width:`${$.reference.width}px`});}}));let g=react.useFloating({placement:R,open:r,onOpenChange:p,whileElementsMounted:react.autoUpdate,middleware:v}),x=g.context,y=react.useClick(x,{enabled:false}),b=react.useDismiss(x,{escapeKey:C,outsidePress:f,ancestorScroll:true}),O=react.useRole(x),L=react.useInteractions([y,b,O]);return T__default.default.useMemo(()=>l(n(n({isOpen:r,autoFocus:d,dismiss:b,onClose:p},L),g),{renderOnlyWhenOpen:s,usePortal:i,labelId:u,descriptionId:P,setLabelId:m,setDescriptionId:M}),[r,d,b,p,L,g,s,i,u,P])}function j(e){let a=e,{children:o}=a,t=c(a,["children"]),r=V(n({},t));return T__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:h__default.default.colorWhite,border:0,borderRadius:h__default.default.borderRadiusMedium,boxShadow:h__default.default.boxShadowDefault,zIndex:h__default.default.zIndexDropdown,"&:focus":{boxShadow:h__default.default.glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{boxShadow:h__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=w(),{isOpen:i,renderOnlyWhenOpen:C,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]),R=K(i),{getFloatingProps:v}=react.useInteractions([u]);if(C&&!i)return null;let g=T__default.default.createElement("div",l(n(l(n({},s),{className:css.cx(R.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=O=>d===false?O:T__default.default.createElement(react.FloatingFocusManager,{context:m,modal:false},O);return f?T__default.default.createElement(react.FloatingPortal,null,x(g)):x(g)};U.displayName="PopoverContent";var S=T__default.default.forwardRef(U);var W=T__default.default.forwardRef(function(a,r){var p=a,{children:o}=p,t=c(p,["children"]);var m;let s=w(),i=o.ref,C=react.useMergeRefs([s==null?void 0:s.refs.setReference,r,i]);if(!T__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:C},t),f),{"aria-haspopup":d,"aria-expanded":s.isOpen}));return T__default.default.cloneElement(o,u)});var D=j;D.Content=S;D.Trigger=W;
2
2
  exports.Popover=D;exports.PopoverContent=S;exports.PopoverTrigger=W;//# sourceMappingURL=index.js.map
3
3
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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":"uSAAA,IAAA,CAAA,CAAA,MAAA,CAAA,cAAA,CAAA,CAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,IAAA,CAAA,CAAA,MAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,CAAA,MAAA,CAAA,qBAAA,CAAA,IAAA,CAAA,CAAA,MAAA,CAAA,SAAA,CAAA,cAAA,CAAA,CAAA,CAAA,MAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,IAAA,CAAA,YAAA,CAAA,IAAA,CAAA,QAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,IAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,EAAA,CAAA,IAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,EAAA,IAAA,EAAA,CAAA,CAAA,IAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CCWA,IAAMA,CAAAA,CAAiBC,kBAAAA,CAAM,aAAA,CAAkC,IAAI,EAEtDC,CAAAA,CAAoB,IAAM,CACrC,IAAMC,EAAUF,kBAAAA,CAAM,UAAA,CAAWD,CAAc,CAAA,CAE/C,GAAIG,CAAAA,GAAY,MAAA,CACd,MAAM,IAAI,MACR,gEACF,CAAA,CAGF,OAAOA,CACT,EAEaC,CAAAA,CAAyBJ,CAAAA,CAAe,SCQ9C,SAASK,CAAAA,CAAW,CACzB,SAAA,CAAAC,CAAAA,CAAY,eACZ,WAAA,CAAAC,CAAAA,CAAc,KAAA,CACd,sBAAA,CAAAC,EAAyB,IAAA,CACzB,MAAA,CAAAC,EAAS,KAAA,CACT,MAAA,CAAQC,EAAe,CAAA,CACvB,OAAA,CAAAC,CAAAA,CACA,kBAAA,CAAAC,EAAqB,IAAA,CACrB,SAAA,CAAAC,CAAAA,CAAY,IAAA,CACZ,WAAAC,CAAAA,CAAa,IAAA,CACb,WAAA,CAAAC,CAAAA,CAAc,KACd,SAAA,CAAAC,CAAAA,CAAY,IACd,CAAA,CAAoB,EAAC,CAAG,CACtB,GAAM,CAACC,EAASC,CAAU,CAAA,CAAIjB,kBAAAA,CAAM,QAAA,GAC9B,CAACkB,CAAAA,CAAeC,CAAgB,CAAA,CAAInB,mBAAM,QAAA,EAE9C,CAOEoB,EAAgC,cAAA,CAC9BC,CAAAA,CAA2B,CAACC,YAAAA,CAAOb,CAAY,CAAC,CAAA,CAElDJ,IAAc,MAAA,EAAUE,CAAAA,EAC1Ba,CAAAA,CAAqBf,CAAAA,CACrBgB,EAAW,IAAA,CAAKE,UAAAA,CAAK,CAAE,OAAA,CAAS,CAAE,CAAC,CAAA,CAAGC,WAAAA,CAAM,CAAE,QAAS,CAAE,CAAC,CAAC,CAAA,EAClDnB,IAAc,MAAA,CACvBgB,CAAAA,CAAW,IAAA,CAAKI,mBAAAA,EAAe,CAAA,CAE/BL,CAAAA,CAAqBf,CAAAA,CAMnBC,CAAAA,EACFe,EAAW,IAAA,CACTK,UAAAA,CAAK,CACH,KAAA,CAAM,CAAE,MAAAC,CAAAA,CAAO,QAAA,CAAAC,CAAS,CAAA,CAAG,CACzB,MAAA,CAAO,MAAA,CAAOA,CAAAA,CAAS,QAAA,CAAS,MAAO,CACrC,QAAA,CAAU,CAAA,EAAGD,CAAAA,CAAM,UAAU,KAAK,CAAA,EAAA,CACpC,CAAC,EACH,CACF,CAAC,CACH,CAAA,CAGF,IAAME,EAAOC,iBAAAA,CAAY,CACvB,SAAA,CAAWV,CAAAA,CACX,KAAMZ,CAAAA,CACN,YAAA,CAAcE,CAAAA,CACd,oBAAA,CAAsBqB,iBACtB,UAAA,CAAAV,CACF,CAAC,CAAA,CAEKnB,CAAAA,CAAU2B,EAAK,OAAA,CAEfG,CAAAA,CAAQC,cAAAA,CAAS/B,CAAAA,CAAS,CAC9B,OAAA,CAAS,KACX,CAAC,CAAA,CACKgC,EAAUC,gBAAAA,CAAWjC,CAAAA,CAAS,CAClC,SAAA,CAAWW,EACX,YAAA,CAAcC,CAAAA,CACd,cAAA,CAAgB,IAClB,CAAC,CAAA,CACKsB,CAAAA,CAAOC,aAAAA,CAAQnC,CAAO,EAEtBoC,CAAAA,CAAeC,qBAAAA,CAAgB,CAACP,CAAAA,CAAOE,EAASE,CAAI,CAAC,CAAA,CAE3D,OAAOpC,mBAAM,OAAA,CACX,IAAOwC,EAAAC,CAAAA,CAAAA,CAAAA,CAAA,CACL,OAAAjC,CAAAA,CACA,SAAA,CAAAO,CAAAA,CACA,OAAA,CAAAmB,EACA,OAAA,CAAAxB,CAAAA,CAAAA,CACG4B,CAAAA,CAAAA,CACAT,CAAAA,CAAAA,CANE,CAOL,kBAAA,CAAAlB,CAAAA,CACA,SAAA,CAAAC,CAAAA,CACA,QAAAI,CAAAA,CACA,aAAA,CAAAE,CAAAA,CACA,UAAA,CAAAD,EACA,gBAAA,CAAAE,CACF,CAAA,CAAA,CACA,CACEX,EACAO,CAAAA,CACAmB,CAAAA,CACAxB,CAAAA,CACA4B,CAAAA,CACAT,EACAlB,CAAAA,CACAC,CAAAA,CACAI,CAAAA,CACAE,CACF,CACF,CACF,CF1BO,SAASwB,CAAAA,CAAQC,CAAAA,CAAkC,CACxD,IAAsCC,CAAAA,CAAAD,CAAAA,CAA9B,CAAA,QAAA,CAAAE,CA5GV,CAAA,CA4GwCD,CAAAA,CAAjBE,CAAAA,CAAAC,CAAAA,CAAiBH,EAAjB,CAAb,UAAA,CAAA,CAAA,CACFI,CAAAA,CAAU5C,CAAAA,CAAWqC,EAAA,EAAA,CAAKK,CAAAA,CAAc,CAAA,CAE9C,OACE9C,mBAAA,aAAA,CAACG,CAAAA,CAAA,CAAuB,KAAA,CAAO6C,GAAUH,CAAS,CAEtD,CG/GO,IAAMI,CAAAA,CAA2BzC,CAAAA,GAAqB,CAC3D,SAAA,CAAW0C,OAAAA,CAAI,CACb,OAAA,CAAS1C,EAAS,QAAA,CAAW,MAAA,CAC7B,KAAA,CAAO,aAAA,CACP,SAAU,UAAA,CACV,GAAA,CAAK,CAAA,CACL,IAAA,CAAM,EACN,UAAA,CAAY2C,kBAAAA,CAAO,UAAA,CACnB,MAAA,CAAQ,EACR,YAAA,CAAcA,kBAAAA,CAAO,kBAAA,CACrB,SAAA,CAAWA,mBAAO,gBAAA,CAClB,MAAA,CAAQA,kBAAAA,CAAO,cAAA,CACf,UAAW,CACT,SAAA,CAAWA,mBAAO,WAAA,CAClB,OAAA,CAAS,MACX,CAAA,CACA,6BAAA,CAA+B,CAC7B,SAAA,CAAWA,mBAAO,gBACpB,CACF,CAAC,CACH,GCEA,IAAMC,CAAAA,CAAqB,CACzBT,CAAAA,CACAU,IACG,CACH,IAMIT,CAAAA,CAAAD,CAAAA,CALF,UAAAE,CAAAA,CACA,SAAA,CAAAS,CAAAA,CACA,MAAA,CAAAC,EAAS,uBAAA,CACT,IAAA,CAAAnB,EAAO,QAjCX,CAAA,CAmCMQ,EADCY,CAAAA,CAAAT,CAAAA,CACDH,CAAAA,CADC,CAJH,WACA,WAAA,CACA,QAAA,CACA,MAAA,CAAA,CAAA,CAYEa,CAAAA,CAAAxD,GAAkB,CAPpB,CAAA,MAAA,CAAAO,CAAAA,CACA,kBAAA,CAAAG,EACA,SAAA,CAAAC,CAAAA,CACA,SAAA,CAAAG,CAAAA,CACA,QAAAmB,CAAAA,CACA,OAAA,CAASwB,CA3Cb,CAAA,CA6CMD,EADCvD,CAAAA,CAAA6C,CAAAA,CACDU,CAAAA,CADC,CANH,SACA,oBAAA,CACA,WAAA,CACA,WAAA,CACA,SAAA,CACA,YAGIE,CAAAA,CAAMC,kBAAAA,CAAa,CAAC1D,CAAAA,CAAQ,IAAA,CAAK,YAAamD,CAAO,CAAC,CAAA,CAEtDQ,CAAAA,CAASZ,EAAwBzC,CAAM,CAAA,CAEvC,CAAE,gBAAA,CAAAsD,CAAiB,CAAA,CAAIvB,qBAAAA,CAAgB,CAACL,CAAO,CAAC,CAAA,CAEtD,GAAIvB,CAAAA,EAAsB,CAACH,EACzB,OAAO,IAAA,CAGT,IAAMuD,CAAAA,CACJ/D,mBAAA,aAAA,CAAC,KAAA,CAAAwC,CAAAA,CAAAC,CAAAA,CAAAD,EAAAC,CAAAA,CAAA,EAAA,CACKe,CAAAA,CAAAA,CADL,CAEC,UAAWQ,MAAAA,CAAGH,CAAAA,CAAO,UAAWP,CAAS,CAAA,CACzC,MAAOb,CAAAA,CAAA,EAAA,CAAKvC,CAAAA,CAAQ,cAAA,CAAA,CAAA,CAAA,CAChB4D,GAAiB,CAAA,CAJtB,CAKC,kBAAA,CAAkB5D,CAAAA,CAAQ,cAC1B,cAAA,CAAcqD,CAAAA,CACd,QAAA,CAAU,EAAA,CACV,KAAMnB,CAAAA,CACN,GAAA,CAAKuB,CAAAA,CAGL,wBAAA,CAAsB,OAErBd,CACH,CAAA,CAGIoB,CAAAA,CAA6BC,CAAAA,EACjCnD,IAAc,KAAA,CACZmD,CAAAA,CAEAlE,kBAAAA,CAAA,aAAA,CAACmE,2BAAA,CAAqB,OAAA,CAAST,CAAAA,CAAiB,KAAA,CAAO,OACpDQ,CACH,CAAA,CAGJ,OAAOtD,CAAAA,CACLZ,kBAAAA,CAAA,cAACoE,oBAAAA,CAAA,IAAA,CACEH,CAAAA,CAA0BF,CAA6B,CAC1D,CAAA,CAEAE,CAAAA,CAA0BF,CAA6B,CAE3D,EAEAX,CAAAA,CAAmB,WAAA,CAAc,gBAAA,CAE1B,IAAMiB,EAAiBrE,kBAAAA,CAAM,UAAA,CAAWoD,CAAkB,EClF1D,IAAMkB,CAAAA,CAAiBtE,kBAAAA,CAAM,WAGlC,SAAwB4C,CAAAA,CAA6BS,CAAAA,CAAS,CAAtC,IAAAI,CAAAA,CAAAb,CAAAA,CAAE,UAAAC,CAhB5B,CAAA,CAgB0BY,EAAeD,CAAAA,CAAAT,CAAAA,CAAfU,CAAAA,CAAe,CAAb,aAhB5B,IAAAb,CAAAA,CAiBE,IAAM1C,CAAAA,CAAUD,GAAkB,CAG5BsE,CAAAA,CACJ1B,CAAAA,CACA,GAAA,CAEIc,EAAMC,kBAAAA,CAAa,CAAC1D,CAAAA,EAAA,IAAA,CAAA,MAAA,CAAAA,EAAS,IAAA,CAAK,YAAA,CAAcmD,CAAAA,CAASkB,CAAQ,CAAC,CAAA,CAExE,GAAI,CAACvE,kBAAAA,CAAM,eAAe6C,CAAQ,CAAA,CAEhC,OAAA,OAAA,CAAQ,KAAA,CACN,4FACF,CAAA,CACO,IAAA,CAIT,IAAM2B,CAAAA,CAAa3B,CAAAA,CAAS,MAEtB4B,CAAAA,CAAAA,CAAgB7B,CAAAA,CAAA4B,CAAAA,CAAW,eAAe,IAA1B,IAAA,CAAA5B,CAAAA,CACpB,QAAA,CAEI8B,CAAAA,CAAcxE,EAAQ,iBAAA,CAAkBsC,CAAAA,CAAAC,CAAAA,CAAAA,CAAAA,CAAA,CAC5C,IAAAkB,CAAAA,CAAAA,CACGH,CAAAA,CAAAA,CACAgB,CAAAA,CAAAA,CAHyC,CAI5C,gBAAiBC,CAAAA,CACjB,eAAA,CAAiBvE,CAAAA,CAAQ,MAC3B,EAAC,CAAA,CAED,OAAOF,kBAAAA,CAAM,YAAA,CAAa6C,EAAU6B,CAAW,CACjD,CAAC,MCxCYhC,CAAAA,CAAUA,EACvBA,EAAQ,OAAA,CAAU2B,CAAAA,CAClB3B,EAAQ,OAAA,CAAU4B,CAAAA","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} modal={false}>\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 {\n children: React.ReactElement;\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"]}
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 width: `${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} modal={false}>\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 {\n children: React.ReactElement;\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,12 +1,12 @@
1
1
  {
2
2
  "name": "@contentful/f36-popover",
3
- "version": "6.3.1",
3
+ "version": "6.5.0",
4
4
  "description": "Forma 36: Popover component",
5
5
  "scripts": {
6
6
  "build": "tsup"
7
7
  },
8
8
  "dependencies": {
9
- "@contentful/f36-core": "^6.3.1",
9
+ "@contentful/f36-core": "^6.5.0",
10
10
  "@contentful/f36-tokens": "^6.1.0",
11
11
  "@contentful/f36-utils": "^6.1.0",
12
12
  "@emotion/css": "^11.13.5",