Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@contentful/f36-popover
Advanced tools
@contentful/f36-popover - npm Package Compare versions
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
New alerts
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
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by20.78%
89919
- Lines of code
- increased by42.65%
1194
- Number of low quality alerts
- decreased by-33.33%
2
- Number of lines in readme file
- increased by20%
6