@contentful/f36-popover
Advanced tools
Comparing version 4.0.1-next-v4-9789.2434 to 4.0.1-next-v4-9898.2438
224
dist/main.js
@@ -1,2 +0,224 @@ | ||
var e=require("react"),t=b(e),{useCallback:o,useMemo:r,useState:n,useEffect:s}=e,{mergeRefs:l,useId:a}=require("@contentful/f36-core"),{usePopper:i}=require("react-popper"),u=b(require("@babel/runtime/helpers/extends")),{cx:c,css:p}=require("emotion"),{Portal:d}=require("@contentful/f36-utils"),f=b(require("@contentful/f36-tokens"));function m(e,t,o,r){Object.defineProperty(e,t,{get:o,set:r,enumerable:!0,configurable:!0})}function b(e){return e&&e.__esModule?e.default:e}var v={};m(v,"Popover",(()=>C)),m(v,"PopoverTrigger",(()=>E)),m(v,"PopoverContent",(()=>w));const g=t.createContext(void 0),h=()=>{const e=t.useContext(g);if(void 0===e)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return e},P=g.Provider;const x={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:({state:e})=>{e.styles.popper.width=`${e.rects.reference.width}px`},effect:({state:e})=>()=>{const t=e.elements.reference;e.elements.popper.style.width=`${t.offsetWidth}px`}},y=(e,o)=>{const{children:r,className:n,testId:s="cf-ui-popover-content",role:l="dialog",...a}=e,{isOpen:i,getPopoverProps:m,usePortal:b}=h(),v=(e=>({container:p({display:e?"initial":"none",background:f.colorWhite,border:0,borderRadius:f.borderRadiusMedium,boxShadow:f.boxShadowDefault,zIndex:f.zIndexDropdown},"")}))(i),g=t.createElement("div",u({},a,m(a,o),{className:c(v.container,n),"data-test-id":s,tabIndex:-1,role:l,"data-position-absolute":!0}),r);return b?t.createElement(d,null,g):g},w=t.forwardRef(y),E=e=>{var o;const r=t.Children.only(e.children),{getTriggerProps:n}=h();return t.cloneElement(r,{...n(r.ref),"aria-haspopup":null!==(o=r.props["aria-haspopup"])&&void 0!==o?o:"dialog"})},C=function(e){const{children:u,isOpen:c,placement:p="bottom-start",isFullWidth:d=!1,isAutoalignmentEnabled:f=!0,usePortal:m=!0,closeOnBlur:b=!0,closeOnEsc:v=!0,onClose:g,autoFocus:h=!0,id:y,offset:w=[1,4]}=e,[E,C]=n(null),[O,q]=n(null),{attributes:k,forceUpdate:B,styles:D}=i(E,O,{placement:p,modifiers:[{name:"offset",options:{offset:w}},{...x,enabled:d},{name:"preventOverflow",enabled:f,options:{mainAxis:!0}},{name:"flip",enabled:f}]});s((()=>{c&&h&&O&&O.focus({preventScroll:!0})}),[c,O]),s((()=>{c&&B&&B()}),[c,B]);const I=a(null,"popover-content"),S=y||I,T=o((()=>{g&&g()}),[g]),W=r((()=>({isOpen:c,usePortal:m,getTriggerProps:(e=null)=>({ref:l(C,e),"aria-expanded":Boolean(c),"aria-controls":S}),getPopoverProps:(e={},t=null)=>({...k.popper,style:{...e.style||{},...D.popper},ref:l(q,t),id:S,onBlur:t=>{if(e.onBlur&&e.onBlur(t),!b)return;const o=t.relatedTarget,r=O===o||O.contains(o),n=E===o||E.contains(o);r||n||T()},onKeyDown:t=>{e.onKeyDown&&e.onKeyDown(t),v&&"Escape"===t.key&&T()}})})),[c,k,D,m,S,v,b,O,E,T]);return t.createElement(P,{value:W},u)};var O,q;C.Content=w,C.Trigger=E,O=module.exports,q=v,Object.keys(q).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(O,e,{enumerable:!0,get:function(){return q[e]}})})); | ||
var $36WSQ$react = require("react"); | ||
var $36WSQ$contentfulf36core = require("@contentful/f36-core"); | ||
var $36WSQ$reactpopper = require("react-popper"); | ||
var $36WSQ$emotion = require("emotion"); | ||
var $36WSQ$contentfulf36utils = require("@contentful/f36-utils"); | ||
var $36WSQ$contentfulf36tokens = require("@contentful/f36-tokens"); | ||
function $parcel$export(e, n, v, s) { | ||
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
} | ||
function $parcel$interopDefault(a) { | ||
return a && a.__esModule ? a.default : a; | ||
} | ||
$parcel$export(module.exports, "Popover", () => $dd96ee4ab94ee75f$export$5b6b19405a83ff9d); | ||
$parcel$export(module.exports, "PopoverTrigger", () => $b3e2e9dc1eae953e$export$7dacb05d26466c3); | ||
$parcel$export(module.exports, "PopoverContent", () => $ec6b27dd96eb674c$export$d7e1f420b25549ff); | ||
const $a5e54ab4533eb4d3$var$PopoverContext = $parcel$interopDefault($36WSQ$react).createContext(undefined); | ||
const $a5e54ab4533eb4d3$export$1468d0761b26e6c8 = ()=>{ | ||
const context = $parcel$interopDefault($36WSQ$react).useContext($a5e54ab4533eb4d3$var$PopoverContext); | ||
if (context === undefined) throw new Error('usePopoverContext must be used within a PopoverContextProvider'); | ||
return context; | ||
}; | ||
const $a5e54ab4533eb4d3$export$f5300fbf692a63ec = $a5e54ab4533eb4d3$var$PopoverContext.Provider; | ||
function $ed3840333e471e4e$export$5b6b19405a83ff9d(props) { | ||
const { children: children , isOpen: isOpen , placement: placement = 'bottom-start' , isFullWidth: isFullWidth = false , isAutoalignmentEnabled: isAutoalignmentEnabled = true , usePortal: usePortal = true , closeOnBlur: closeOnBlur = true , closeOnEsc: closeOnEsc = true , onClose: onClose , autoFocus: autoFocus = true , id: id , offset: offset = [ | ||
1, | ||
4 | ||
] } = props; | ||
const [triggerElement, setTriggerElement] = $36WSQ$react.useState(null); | ||
const [popoverElement, setPopoverElement] = $36WSQ$react.useState(null); | ||
const { attributes: popperAttributes , forceUpdate: forceUpdate , styles: popperStyles } = $36WSQ$reactpopper.usePopper(triggerElement, popoverElement, { | ||
placement: placement, | ||
modifiers: [ | ||
{ | ||
name: 'offset', | ||
options: { | ||
offset: offset | ||
} | ||
}, | ||
{ | ||
...$ed3840333e471e4e$var$sameWidth, | ||
enabled: isFullWidth | ||
}, | ||
{ | ||
name: 'preventOverflow', | ||
enabled: isAutoalignmentEnabled, | ||
options: { | ||
mainAxis: true | ||
} | ||
}, | ||
{ | ||
name: 'flip', | ||
enabled: isAutoalignmentEnabled | ||
} | ||
] | ||
}); | ||
$36WSQ$react.useEffect(()=>{ | ||
if (isOpen && autoFocus && popoverElement) popoverElement.focus({ | ||
preventScroll: true | ||
}); | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [ | ||
isOpen, | ||
popoverElement | ||
]); | ||
$36WSQ$react.useEffect(()=>{ | ||
if (isOpen && forceUpdate) forceUpdate(); | ||
}, [ | ||
isOpen, | ||
forceUpdate | ||
]); | ||
const popoverGeneratedId = $36WSQ$contentfulf36core.useId(null, 'popover-content'); | ||
const popoverId = id || popoverGeneratedId; | ||
const closeAndFocusTrigger = $36WSQ$react.useCallback(()=>{ | ||
onClose === null || onClose === void 0 ? void 0 : onClose(); // setTimeout trick to make it work with focus-lock | ||
setTimeout(()=>{ | ||
return triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.focus({ | ||
preventScroll: true | ||
}); | ||
}, 0); | ||
}, [ | ||
onClose, | ||
triggerElement | ||
]); | ||
const contextValue = $36WSQ$react.useMemo(()=>{ | ||
return { | ||
isOpen: isOpen, | ||
usePortal: usePortal, | ||
getTriggerProps: (_ref = null)=>({ | ||
ref: $36WSQ$contentfulf36core.mergeRefs(setTriggerElement, _ref), | ||
['aria-expanded']: Boolean(isOpen), | ||
['aria-controls']: popoverId | ||
}) | ||
, | ||
getPopoverProps: (_props = { | ||
}, _ref = null)=>{ | ||
return { | ||
...popperAttributes.popper, | ||
style: { | ||
..._props.style || { | ||
}, | ||
...popperStyles.popper | ||
}, | ||
ref: $36WSQ$contentfulf36core.mergeRefs(setPopoverElement, _ref), | ||
id: popoverId, | ||
onBlur: (event)=>{ | ||
if (_props.onBlur) _props.onBlur(event); | ||
if (!closeOnBlur) return; | ||
const relatedTarget = event.relatedTarget; | ||
const targetIsPopover = popoverElement === relatedTarget || (popoverElement === null || popoverElement === void 0 ? void 0 : popoverElement.contains(relatedTarget)); | ||
const targetIsTrigger = triggerElement === relatedTarget || (triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.contains(relatedTarget)); | ||
if (targetIsPopover || targetIsTrigger) return; | ||
closeAndFocusTrigger(); | ||
}, | ||
onKeyDown: (event)=>{ | ||
if (_props.onKeyDown) _props.onKeyDown(event); | ||
if (closeOnEsc && event.key === 'Escape') closeAndFocusTrigger(); | ||
} | ||
}; | ||
} | ||
}; | ||
}, [ | ||
isOpen, | ||
popperAttributes, | ||
popperStyles, | ||
usePortal, | ||
popoverId, | ||
closeOnEsc, | ||
closeOnBlur, | ||
popoverElement, | ||
triggerElement, | ||
closeAndFocusTrigger | ||
]); | ||
return(/*#__PURE__*/ $parcel$interopDefault($36WSQ$react).createElement($a5e54ab4533eb4d3$export$f5300fbf692a63ec, { | ||
value: contextValue | ||
}, children)); | ||
} | ||
/** | ||
* Sets the popover width to the size of the trigger element. | ||
*/ const $ed3840333e471e4e$var$sameWidth = { | ||
name: 'sameWidth', | ||
enabled: true, | ||
phase: 'beforeWrite', | ||
requires: [ | ||
'computeStyles' | ||
], | ||
fn: ({ state: state })=>{ | ||
state.styles.popper.width = `${state.rects.reference.width}px`; | ||
}, | ||
effect: ({ state: state })=>()=>{ | ||
const reference = state.elements.reference; | ||
state.elements.popper.style.width = `${reference.offsetWidth}px`; | ||
} | ||
}; | ||
const $ac842fe302ff665f$export$fbd764fe961047f7 = (isOpen)=>({ | ||
container: /*#__PURE__*/ $36WSQ$emotion.css({ | ||
display: isOpen ? 'initial' : 'none', | ||
background: $parcel$interopDefault($36WSQ$contentfulf36tokens).colorWhite, | ||
border: 0, | ||
borderRadius: $parcel$interopDefault($36WSQ$contentfulf36tokens).borderRadiusMedium, | ||
boxShadow: $parcel$interopDefault($36WSQ$contentfulf36tokens).boxShadowDefault, | ||
zIndex: $parcel$interopDefault($36WSQ$contentfulf36tokens).zIndexDropdown | ||
}) | ||
}) | ||
; | ||
const $ec6b27dd96eb674c$var$_PopoverContent = (props, ref)=>{ | ||
const { children: children , className: className , testId: testId = 'cf-ui-popover-content' , role: role = 'dialog' , ...otherProps } = props; | ||
const { isOpen: isOpen , getPopoverProps: getPopoverProps , usePortal: usePortal } = $a5e54ab4533eb4d3$export$1468d0761b26e6c8(); | ||
const styles = $ac842fe302ff665f$export$fbd764fe961047f7(isOpen); | ||
const content = /*#__PURE__*/ $parcel$interopDefault($36WSQ$react).createElement("div", { | ||
...otherProps, | ||
...getPopoverProps(otherProps, ref), | ||
className: $36WSQ$emotion.cx(styles.container, className), | ||
"data-test-id": testId, | ||
tabIndex: -1, | ||
role: role, | ||
// for internal contentful apps usage | ||
"data-position-absolute": true | ||
}, children); | ||
return usePortal ? /*#__PURE__*/ $parcel$interopDefault($36WSQ$react).createElement($36WSQ$contentfulf36utils.Portal, null, content) : content; | ||
}; | ||
const $ec6b27dd96eb674c$export$d7e1f420b25549ff = /*#__PURE__*/ $parcel$interopDefault($36WSQ$react).forwardRef($ec6b27dd96eb674c$var$_PopoverContent); | ||
const $b3e2e9dc1eae953e$export$7dacb05d26466c3 = (props)=>{ | ||
const child = $parcel$interopDefault($36WSQ$react).Children.only(props.children); | ||
const { getTriggerProps: getTriggerProps } = $a5e54ab4533eb4d3$export$1468d0761b26e6c8(); | ||
var ref; | ||
return(/*#__PURE__*/ $parcel$interopDefault($36WSQ$react).cloneElement(child, { | ||
...getTriggerProps(child.ref), | ||
'aria-haspopup': (ref = child.props['aria-haspopup']) !== null && ref !== void 0 ? ref : 'dialog' | ||
})); | ||
}; | ||
const $dd96ee4ab94ee75f$export$5b6b19405a83ff9d = $ed3840333e471e4e$export$5b6b19405a83ff9d; | ||
$dd96ee4ab94ee75f$export$5b6b19405a83ff9d.Content = $ec6b27dd96eb674c$export$d7e1f420b25549ff; | ||
$dd96ee4ab94ee75f$export$5b6b19405a83ff9d.Trigger = $b3e2e9dc1eae953e$export$7dacb05d26466c3; | ||
//# sourceMappingURL=main.js.map |
@@ -1,2 +0,215 @@ | ||
import e,{useMemo as o,useState as t,useEffect as r,useCallback as n}from"react";import{mergeRefs as s,useId as a}from"@contentful/f36-core";import{usePopper as l}from"react-popper";import i from"@babel/runtime/helpers/esm/extends";import{cx as p,css as c}from"emotion";import{Portal as u}from"@contentful/f36-utils";import d from"@contentful/f36-tokens";function f(e,o,t,r){Object.defineProperty(e,o,{get:t,set:r,enumerable:!0,configurable:!0})}var m={};f(m,"Popover",(()=>y)),f(m,"PopoverTrigger",(()=>w)),f(m,"PopoverContent",(()=>x));const v=e.createContext(void 0),b=()=>{const o=e.useContext(v);if(void 0===o)throw new Error("usePopoverContext must be used within a PopoverContextProvider");return o},g=v.Provider;const P={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:({state:e})=>{e.styles.popper.width=`${e.rects.reference.width}px`},effect:({state:e})=>()=>{const o=e.elements.reference;e.elements.popper.style.width=`${o.offsetWidth}px`}},h=(o,t)=>{const{children:r,className:n,testId:s="cf-ui-popover-content",role:a="dialog",...l}=o,{isOpen:f,getPopoverProps:m,usePortal:v}=b(),g=(e=>({container:c({display:e?"initial":"none",background:d.colorWhite,border:0,borderRadius:d.borderRadiusMedium,boxShadow:d.boxShadowDefault,zIndex:d.zIndexDropdown},"")}))(f),P=e.createElement("div",i({},l,m(l,t),{className:p(g.container,n),"data-test-id":s,tabIndex:-1,role:a,"data-position-absolute":!0}),r);return v?e.createElement(u,null,P):P},x=e.forwardRef(h),w=o=>{var t;const r=e.Children.only(o.children),{getTriggerProps:n}=b();return e.cloneElement(r,{...n(r.ref),"aria-haspopup":null!==(t=r.props["aria-haspopup"])&&void 0!==t?t:"dialog"})},y=function(i){const{children:p,isOpen:c,placement:u="bottom-start",isFullWidth:d=!1,isAutoalignmentEnabled:f=!0,usePortal:m=!0,closeOnBlur:v=!0,closeOnEsc:b=!0,onClose:h,autoFocus:x=!0,id:w,offset:y=[1,4]}=i,[C,E]=t(null),[O,T]=t(null),{attributes:B,forceUpdate:D,styles:I}=l(C,O,{placement:u,modifiers:[{name:"offset",options:{offset:y}},{...P,enabled:d},{name:"preventOverflow",enabled:f,options:{mainAxis:!0}},{name:"flip",enabled:f}]});r((()=>{c&&x&&O&&O.focus({preventScroll:!0})}),[c,O]),r((()=>{c&&D&&D()}),[c,D]);const S=a(null,"popover-content"),W=w||S,k=n((()=>{h&&h()}),[h]),R=o((()=>({isOpen:c,usePortal:m,getTriggerProps:(e=null)=>({ref:s(E,e),"aria-expanded":Boolean(c),"aria-controls":W}),getPopoverProps:(e={},o=null)=>({...B.popper,style:{...e.style||{},...I.popper},ref:s(T,o),id:W,onBlur:o=>{if(e.onBlur&&e.onBlur(o),!v)return;const t=o.relatedTarget,r=O===t||O.contains(t),n=C===t||C.contains(t);r||n||k()},onKeyDown:o=>{e.onKeyDown&&e.onKeyDown(o),b&&"Escape"===o.key&&k()}})})),[c,B,I,m,W,b,v,O,C,k]);return e.createElement(g,{value:R},p)};y.Content=x,y.Trigger=w;export{y as Popover,w as PopoverTrigger,x as PopoverContent}; | ||
import $hYGFM$react, {useState as $hYGFM$useState, useEffect as $hYGFM$useEffect, useCallback as $hYGFM$useCallback, useMemo as $hYGFM$useMemo} from "react"; | ||
import {useId as $hYGFM$useId, mergeRefs as $hYGFM$mergeRefs} from "@contentful/f36-core"; | ||
import {usePopper as $hYGFM$usePopper} from "react-popper"; | ||
import {cx as $hYGFM$cx, css as $hYGFM$css} from "emotion"; | ||
import {Portal as $hYGFM$Portal} from "@contentful/f36-utils"; | ||
import $hYGFM$contentfulf36tokens from "@contentful/f36-tokens"; | ||
const $8c1b76e1106abdf5$var$PopoverContext = $hYGFM$react.createContext(undefined); | ||
const $8c1b76e1106abdf5$export$1468d0761b26e6c8 = ()=>{ | ||
const context = $hYGFM$react.useContext($8c1b76e1106abdf5$var$PopoverContext); | ||
if (context === undefined) throw new Error('usePopoverContext must be used within a PopoverContextProvider'); | ||
return context; | ||
}; | ||
const $8c1b76e1106abdf5$export$f5300fbf692a63ec = $8c1b76e1106abdf5$var$PopoverContext.Provider; | ||
function $fd548c9231cfa260$export$5b6b19405a83ff9d(props) { | ||
const { children: children , isOpen: isOpen , placement: placement = 'bottom-start' , isFullWidth: isFullWidth = false , isAutoalignmentEnabled: isAutoalignmentEnabled = true , usePortal: usePortal = true , closeOnBlur: closeOnBlur = true , closeOnEsc: closeOnEsc = true , onClose: onClose , autoFocus: autoFocus = true , id: id , offset: offset = [ | ||
1, | ||
4 | ||
] } = props; | ||
const [triggerElement, setTriggerElement] = $hYGFM$useState(null); | ||
const [popoverElement, setPopoverElement] = $hYGFM$useState(null); | ||
const { attributes: popperAttributes , forceUpdate: forceUpdate , styles: popperStyles } = $hYGFM$usePopper(triggerElement, popoverElement, { | ||
placement: placement, | ||
modifiers: [ | ||
{ | ||
name: 'offset', | ||
options: { | ||
offset: offset | ||
} | ||
}, | ||
{ | ||
...$fd548c9231cfa260$var$sameWidth, | ||
enabled: isFullWidth | ||
}, | ||
{ | ||
name: 'preventOverflow', | ||
enabled: isAutoalignmentEnabled, | ||
options: { | ||
mainAxis: true | ||
} | ||
}, | ||
{ | ||
name: 'flip', | ||
enabled: isAutoalignmentEnabled | ||
} | ||
] | ||
}); | ||
$hYGFM$useEffect(()=>{ | ||
if (isOpen && autoFocus && popoverElement) popoverElement.focus({ | ||
preventScroll: true | ||
}); | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [ | ||
isOpen, | ||
popoverElement | ||
]); | ||
$hYGFM$useEffect(()=>{ | ||
if (isOpen && forceUpdate) forceUpdate(); | ||
}, [ | ||
isOpen, | ||
forceUpdate | ||
]); | ||
const popoverGeneratedId = $hYGFM$useId(null, 'popover-content'); | ||
const popoverId = id || popoverGeneratedId; | ||
const closeAndFocusTrigger = $hYGFM$useCallback(()=>{ | ||
onClose === null || onClose === void 0 ? void 0 : onClose(); // setTimeout trick to make it work with focus-lock | ||
setTimeout(()=>{ | ||
return triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.focus({ | ||
preventScroll: true | ||
}); | ||
}, 0); | ||
}, [ | ||
onClose, | ||
triggerElement | ||
]); | ||
const contextValue = $hYGFM$useMemo(()=>{ | ||
return { | ||
isOpen: isOpen, | ||
usePortal: usePortal, | ||
getTriggerProps: (_ref = null)=>({ | ||
ref: $hYGFM$mergeRefs(setTriggerElement, _ref), | ||
['aria-expanded']: Boolean(isOpen), | ||
['aria-controls']: popoverId | ||
}) | ||
, | ||
getPopoverProps: (_props = { | ||
}, _ref = null)=>{ | ||
return { | ||
...popperAttributes.popper, | ||
style: { | ||
..._props.style || { | ||
}, | ||
...popperStyles.popper | ||
}, | ||
ref: $hYGFM$mergeRefs(setPopoverElement, _ref), | ||
id: popoverId, | ||
onBlur: (event)=>{ | ||
if (_props.onBlur) _props.onBlur(event); | ||
if (!closeOnBlur) return; | ||
const relatedTarget = event.relatedTarget; | ||
const targetIsPopover = popoverElement === relatedTarget || (popoverElement === null || popoverElement === void 0 ? void 0 : popoverElement.contains(relatedTarget)); | ||
const targetIsTrigger = triggerElement === relatedTarget || (triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.contains(relatedTarget)); | ||
if (targetIsPopover || targetIsTrigger) return; | ||
closeAndFocusTrigger(); | ||
}, | ||
onKeyDown: (event)=>{ | ||
if (_props.onKeyDown) _props.onKeyDown(event); | ||
if (closeOnEsc && event.key === 'Escape') closeAndFocusTrigger(); | ||
} | ||
}; | ||
} | ||
}; | ||
}, [ | ||
isOpen, | ||
popperAttributes, | ||
popperStyles, | ||
usePortal, | ||
popoverId, | ||
closeOnEsc, | ||
closeOnBlur, | ||
popoverElement, | ||
triggerElement, | ||
closeAndFocusTrigger | ||
]); | ||
return(/*#__PURE__*/ $hYGFM$react.createElement($8c1b76e1106abdf5$export$f5300fbf692a63ec, { | ||
value: contextValue | ||
}, children)); | ||
} | ||
/** | ||
* Sets the popover width to the size of the trigger element. | ||
*/ const $fd548c9231cfa260$var$sameWidth = { | ||
name: 'sameWidth', | ||
enabled: true, | ||
phase: 'beforeWrite', | ||
requires: [ | ||
'computeStyles' | ||
], | ||
fn: ({ state: state })=>{ | ||
state.styles.popper.width = `${state.rects.reference.width}px`; | ||
}, | ||
effect: ({ state: state })=>()=>{ | ||
const reference = state.elements.reference; | ||
state.elements.popper.style.width = `${reference.offsetWidth}px`; | ||
} | ||
}; | ||
const $8a165eef2449d46a$export$fbd764fe961047f7 = (isOpen)=>({ | ||
container: /*#__PURE__*/ $hYGFM$css({ | ||
display: isOpen ? 'initial' : 'none', | ||
background: $hYGFM$contentfulf36tokens.colorWhite, | ||
border: 0, | ||
borderRadius: $hYGFM$contentfulf36tokens.borderRadiusMedium, | ||
boxShadow: $hYGFM$contentfulf36tokens.boxShadowDefault, | ||
zIndex: $hYGFM$contentfulf36tokens.zIndexDropdown | ||
}) | ||
}) | ||
; | ||
const $249e5486684b1d2a$var$_PopoverContent = (props, ref)=>{ | ||
const { children: children , className: className , testId: testId = 'cf-ui-popover-content' , role: role = 'dialog' , ...otherProps } = props; | ||
const { isOpen: isOpen , getPopoverProps: getPopoverProps , usePortal: usePortal } = $8c1b76e1106abdf5$export$1468d0761b26e6c8(); | ||
const styles = $8a165eef2449d46a$export$fbd764fe961047f7(isOpen); | ||
const content = /*#__PURE__*/ $hYGFM$react.createElement("div", { | ||
...otherProps, | ||
...getPopoverProps(otherProps, ref), | ||
className: $hYGFM$cx(styles.container, className), | ||
"data-test-id": testId, | ||
tabIndex: -1, | ||
role: role, | ||
// for internal contentful apps usage | ||
"data-position-absolute": true | ||
}, children); | ||
return usePortal ? /*#__PURE__*/ $hYGFM$react.createElement($hYGFM$Portal, null, content) : content; | ||
}; | ||
const $249e5486684b1d2a$export$d7e1f420b25549ff = /*#__PURE__*/ $hYGFM$react.forwardRef($249e5486684b1d2a$var$_PopoverContent); | ||
const $2ab55052da688660$export$7dacb05d26466c3 = (props)=>{ | ||
const child = $hYGFM$react.Children.only(props.children); | ||
const { getTriggerProps: getTriggerProps } = $8c1b76e1106abdf5$export$1468d0761b26e6c8(); | ||
var ref; | ||
return(/*#__PURE__*/ $hYGFM$react.cloneElement(child, { | ||
...getTriggerProps(child.ref), | ||
'aria-haspopup': (ref = child.props['aria-haspopup']) !== null && ref !== void 0 ? ref : 'dialog' | ||
})); | ||
}; | ||
const $52a0de85cb27ef74$export$5b6b19405a83ff9d = $fd548c9231cfa260$export$5b6b19405a83ff9d; | ||
$52a0de85cb27ef74$export$5b6b19405a83ff9d.Content = $249e5486684b1d2a$export$d7e1f420b25549ff; | ||
$52a0de85cb27ef74$export$5b6b19405a83ff9d.Trigger = $2ab55052da688660$export$7dacb05d26466c3; | ||
export {$52a0de85cb27ef74$export$5b6b19405a83ff9d as Popover, $2ab55052da688660$export$7dacb05d26466c3 as PopoverTrigger, $249e5486684b1d2a$export$d7e1f420b25549ff as PopoverContent}; | ||
//# sourceMappingURL=module.js.map |
@@ -290,3 +290,3 @@ import React from "react"; | ||
'aria-setsize'?: number; | ||
'aria-sort'?: "none" | "ascending" | "descending" | "other"; | ||
'aria-sort'?: "none" | "other" | "ascending" | "descending"; | ||
'aria-valuemax'?: number; | ||
@@ -293,0 +293,0 @@ 'aria-valuemin'?: number; |
{ | ||
"name": "@contentful/f36-popover", | ||
"version": "4.0.1-next-v4-9789.2434+754dee05", | ||
"version": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
"description": "Forma 36: Popover component", | ||
"scripts": { | ||
"build": "parcel build index.ts" | ||
"build": "parcel build" | ||
}, | ||
"dependencies": { | ||
"@babel/runtime": "^7.6.2", | ||
"@contentful/f36-core": "4.0.1-next-v4-9789.2434+754dee05", | ||
"@contentful/f36-tokens": "4.0.1-next-v4-9789.2434+754dee05", | ||
"@contentful/f36-utils": "4.0.1-next-v4-9789.2434+754dee05", | ||
"@contentful/f36-core": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
"@contentful/f36-tokens": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
"@contentful/f36-utils": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
"@popperjs/core": "^2.4.4", | ||
@@ -38,3 +38,3 @@ "emotion": "^10.0.17", | ||
}, | ||
"gitHead": "754dee05f9e188f1492231120e4449a9e4f1992d" | ||
"gitHead": "c14d4c99c0a87c8905dbe90d5f1dc38dd12d1008" | ||
} |
# @contentful/f36-popover | ||
This package is part of the pre-release. This means it is unsupported and subject to breaking changes without warning. | ||
Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components) | ||
Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components). |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
89919
1194
2
6