@contentful/f36-popover 6.0.0 → 6.2.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.
- package/dist/esm/index.js +1 -1
- package/package.json +4 -4
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 {css
|
|
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;
|
|
2
2
|
export{D as Popover,S as PopoverContent,W as PopoverTrigger};//# sourceMappingURL=index.js.map
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-popover",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.2.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.
|
|
10
|
-
"@contentful/f36-tokens": "^6.
|
|
11
|
-
"@contentful/f36-utils": "^6.
|
|
9
|
+
"@contentful/f36-core": "^6.2.0",
|
|
10
|
+
"@contentful/f36-tokens": "^6.1.0",
|
|
11
|
+
"@contentful/f36-utils": "^6.1.0",
|
|
12
12
|
"@emotion/css": "^11.13.5",
|
|
13
13
|
"@floating-ui/dom": "^1.7.4",
|
|
14
14
|
"@floating-ui/react": "^0.27.16"
|