@leafygreen-ui/leafygreen-provider - npm Package Compare versions

Comparing version 3.1.12 to 3.2.0

CHANGELOG.md

 # @leafygreen-ui/leafygreen-provider
 
+## 3.2.0
+
+### Minor Changes
+
+- 04bb887c0: [LG-4446](https://jira.mongodb.org/browse/LG-4446): Adds `PopoverPropsContext` to pass props to a deeply nested popover element
+
+  Additionally exposes a `forceUseTopLayer` prop in the `LeafyGreenProvider` which can be used to test interactions with all LG popover elements forcibly set to `renderMode="top-layer"`. This can help pressure test for any regressions to more confidently and safely migrate. However, this should only be used when all LG dependencies are relying on v12+ of `@leafygreen-ui/popover`.
+
+### Patch Changes
+
+- Updated dependencies [04bb887c0]
+  - @leafygreen-ui/hooks@8.3.0
+- Updated dependencies [117a463f8]
+  - @leafygreen-ui/lib@13.8.1
+
 ## 3.1.12
@@ -4,0 +19,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import e,{useContext as r,createContext as n,useState as o,useMemo as t,useEffect as a}from"react";import i from"prop-types";import{getTheme as l}from"@leafygreen-ui/lib";import{useEventListener as u}from"@leafygreen-ui/hooks";var d=n({contextDarkMode:!1,setDarkMode:function(){}}),c=function(){return r(d)},p=function(e){var r,n=c(),o=n.contextDarkMode,t=n.setDarkMode,a=null!==(r=null!=e?e:o)&&void 0!==r&&r;return{darkMode:a,theme:l(a),setDarkMode:t}};function s(r){var n=r.children,o=r.contextDarkMode,t=r.setDarkMode;return e.createElement(d.Provider,{value:{contextDarkMode:o,setDarkMode:t}},n)}function v(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var o,t,a,i,l=[],u=!0,d=!1;try{if(a=(n=n.call(e)).next,0===r){if(Object(n)!==n)return;u=!1}else for(;!(u=(o=a.call(n)).done)&&(l.push(o.value),l.length!==r);u=!0);}catch(e){d=!0,t=e}finally{try{if(!u&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(d)throw t}}return l}}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return f(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return f(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,o=new Array(r);n<r;n++)o[n]=e[n];return o}s.displayName="DarkModeProvider",s.propTypes={children:i.node,contextDarkMode:i.bool};var y={popover:{portalContainer:void 0,scrollContainer:void 0}},m=n(y);function b(){return r(m).popover}function h(r){var n=r.popover,o=void 0===n?y.popover:n,t=r.children;return e.createElement(m.Provider,{value:{popover:o}},t)}var k=n(14);function M(){return r(k)}function P(r){var n=r.children,o=r.baseFontSize,t=void 0===o?14:o;return e.createElement(k.Provider,{value:t},n)}P.displayName="TypographyProvider",P.propTypes={children:i.node,baseFontSize:i.number};var g={usingKeyboard:!0,setUsingKeyboard:function(){}},D=n(g),w={tab:9,leftArrow:37,upArrow:38,rightArrow:39,downArrow:40};function A(){return r(D)}function E(r){var n=r.children,a=v(o(g.usingKeyboard),2),i=a[0],l=a[1];u("mousedown",(function(){return l(!1)}),{enabled:i}),u("keydown",(function(e){var r=e.keyCode;Object.values(w).includes(r)&&l(!0)}),{enabled:!i});var d=t((function(){return{usingKeyboard:i,setUsingKeyboard:l}}),[i]);return e.createElement(D.Provider,{value:d},n)}function O(r){var n=r.children,t=r.baseFontSize,i=r.popoverPortalContainer,l=r.darkMode,u=c().contextDarkMode,d=v(o(null!=l?l:u),2),p=d[0],f=d[1];a((function(){f(null!=l?l:u)}),[l,u]);var y=M(),m=null!=t?t:y,k=b(),g=null!=i?i:k;return e.createElement(E,null,e.createElement(h,{popover:g},e.createElement(P,{baseFontSize:m},e.createElement(s,{contextDarkMode:p,setDarkMode:f},n))))}E.displayName="UsingKeyboardProvider",E.propTypes={children:i.node},O.displayName="LeafyGreenProvider",O.propTypes={popoverPortalContainer:i.shape({popover:i.shape({portalContainer:i.elementType,scrollContainer:i.elementType})}),baseFontSize:i.oneOf([14,16]),darkMode:i.bool};var S=n({isPopoverOpen:!1,setIsPopoverOpen:function(){}});function x(){return r(S)}function T(r){var n=r.children,a=v(o(!1),2),i=a[0],l=a[1],u=t((function(){return{isPopoverOpen:i,setIsPopoverOpen:l}}),[i]);return e.createElement(S.Provider,{value:u},n)}T.displayName="PopoverProvider",T.propTypes={children:i.node};export{S as PopoverContext,T as PopoverProvider,h as PortalContextProvider,O as default,M as useBaseFontSize,p as useDarkMode,c as useDarkModeContext,x as usePopoverContext,b as usePopoverPortalContainer,A as useUsingKeyboardContext};
+import e,{useContext as r,createContext as n,useState as o,useMemo as t,useEffect as a}from"react";import i from"prop-types";import{getTheme as l}from"@leafygreen-ui/lib";import{useEventListener as u}from"@leafygreen-ui/hooks";var c=n({contextDarkMode:!1,setDarkMode:function(){}}),p=function(){return r(c)},d=function(e){var r,n=p(),o=n.contextDarkMode,t=n.setDarkMode,a=null!==(r=null!=e?e:o)&&void 0!==r&&r;return{darkMode:a,theme:l(a),setDarkMode:t}};function s(r){var n=r.children,o=r.contextDarkMode,t=r.setDarkMode;return e.createElement(c.Provider,{value:{contextDarkMode:o,setDarkMode:t}},n)}function v(e,r){if(null==e)return{};var n,o,t=function(e,r){if(null==e)return{};var n,o,t={},a=Object.keys(e);for(o=0;o<a.length;o++)n=a[o],r.indexOf(n)>=0||(t[n]=e[n]);return t}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}function f(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var o,t,a,i,l=[],u=!0,c=!1;try{if(a=(n=n.call(e)).next,0===r);else for(;!(u=(o=a.call(n)).done)&&(l.push(o.value),l.length!==r);u=!0);}catch(e){c=!0,t=e}finally{try{if(!u&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(c)throw t}}return l}}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return y(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return y(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e,r){r>e.length&&(r=e.length);for(var n=0,o=new Array(r);n<r;n++)o[n]=e[n];return o}s.displayName="DarkModeProvider",s.propTypes={children:i.node,contextDarkMode:i.bool};var m=["children"],b=n({forceUseTopLayer:!1}),h=function(){return r(b)},P=function(r){var n=r.children,o=v(r,m);return e.createElement(b.Provider,{value:o},n)};P.displayName="MigrationProvider",P.propTypes={children:i.node};var g={popover:{portalContainer:void 0,scrollContainer:void 0}},k=n(g);function M(){return r(k).popover}function O(r){var n=r.popover,o=void 0===n?g.popover:n,t=r.children;return e.createElement(k.Provider,{value:{popover:o}},t)}var T=n(14);function E(){return r(T)}function C(r){var n=r.children,o=r.baseFontSize,t=void 0===o?14:o;return e.createElement(T.Provider,{value:t},n)}C.displayName="TypographyProvider",C.propTypes={children:i.node,baseFontSize:i.number};var D={usingKeyboard:!0,setUsingKeyboard:function(){}},w=n(D),S={tab:9,leftArrow:37,upArrow:38,rightArrow:39,downArrow:40};function x(){return r(w)}function A(r){var n=r.children,a=f(o(D.usingKeyboard),2),i=a[0],l=a[1];u("mousedown",(function(){return l(!1)}),{enabled:i}),u("keydown",(function(e){var r=e.keyCode;Object.values(S).includes(r)&&l(!0)}),{enabled:!i});var c=t((function(){return{usingKeyboard:i,setUsingKeyboard:l}}),[i]);return e.createElement(w.Provider,{value:c},n)}function j(r){var n=r.children,t=r.baseFontSize,i=r.popoverPortalContainer,l=r.darkMode,u=r.forceUseTopLayer,c=void 0!==u&&u,d=p().contextDarkMode,v=f(o(null!=l?l:d),2),y=v[0],m=v[1];a((function(){m(null!=l?l:d)}),[l,d]);var b=E(),g=null!=t?t:b,k=M(),T=null!=i?i:k,D=h(),w=c||D.forceUseTopLayer;return e.createElement(A,null,e.createElement(O,{popover:T},e.createElement(C,{baseFontSize:g},e.createElement(s,{contextDarkMode:y,setDarkMode:m},e.createElement(P,{forceUseTopLayer:w},n)))))}A.displayName="UsingKeyboardProvider",A.propTypes={children:i.node},j.displayName="LeafyGreenProvider",j.propTypes={popoverPortalContainer:i.shape({popover:i.shape({portalContainer:i.elementType,scrollContainer:i.elementType})}),baseFontSize:i.oneOf([14,16]),darkMode:i.bool};var U=n({isPopoverOpen:!1,setIsPopoverOpen:function(){}}),I=function(){return r(U)},N=function(r){var n=r.children,a=f(o(!1),2),i=a[0],l=a[1],u=t((function(){return{isPopoverOpen:i,setIsPopoverOpen:l}}),[i]);return e.createElement(U.Provider,{value:u},n)};N.displayName="PopoverProvider",N.propTypes={children:i.node};var K=["children"],L=n({}),z=function(){return r(L)},F=function(r){var n=r.children,o=v(r,K),t=M(),a={portalContainer:o.portalContainer||t.portalContainer,scrollContainer:o.scrollContainer||t.scrollContainer};return e.createElement(L.Provider,{value:o},e.createElement(O,{popover:a},n))};F.displayName="PopoverPropsProvider",F.propTypes={children:i.node};var G={Inline:"inline",Portal:"portal",TopLayer:"top-layer"};export{U as PopoverContext,L as PopoverPropsContext,F as PopoverPropsProvider,N as PopoverProvider,O as PortalContextProvider,G as RenderMode,j as default,E as useBaseFontSize,d as useDarkMode,p as useDarkModeContext,h as useMigrationContext,I as usePopoverContext,M as usePopoverPortalContainer,z as usePopoverPropsContext,x as useUsingKeyboardContext};
 //# sourceMappingURL=index.js.map

dist/index.d.ts

 export { useDarkMode, useDarkModeContext } from './DarkModeContext';
-export { default, type LeafyGreenProviderProps } from './LeafyGreenContext';
+export { default } from './LeafyGreenContext';
+export { type LeafyGreenProviderProps } from './LeafyGreenContext.types';
+export { useMigrationContext } from './MigrationContext';
 export { PopoverContext, PopoverProvider, usePopoverContext, } from './PopoverContext';
-export { default as PortalContextProvider, usePopoverPortalContainer, } from './PortalContext';
+export { PopoverPropsContext, PopoverPropsProvider, type PopoverPropsProviderProps, RenderMode, usePopoverPropsContext, } from './PopoverPropsContext';
+export { PortalContextProvider, usePopoverPortalContainer, } from './PortalContext';
 export { useBaseFontSize } from './TypographyContext';
 export { useUsingKeyboardContext } from './UsingKeyboardContext';
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("prop-types"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/hooks")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/lib","@leafygreen-ui/hooks"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/leafygreen-provider"]={},e.React,e.PropTypes,e["@leafygreen-ui/lib"],e["@leafygreen-ui/hooks"])}(this,(function(e,r,t,n,o){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=a(r),i=a(t),l=r.createContext({contextDarkMode:!1,setDarkMode:function(){}}),d=function(){return r.useContext(l)};function f(e){var r=e.children,t=e.contextDarkMode,n=e.setDarkMode;return u.default.createElement(l.Provider,{value:{contextDarkMode:t,setDarkMode:n}},r)}function s(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,o,a,u,i=[],l=!0,d=!1;try{if(a=(t=t.call(e)).next,0===r){if(Object(t)!==t)return;l=!1}else for(;!(l=(n=a.call(t)).done)&&(i.push(n.value),i.length!==r);l=!0);}catch(e){d=!0,o=e}finally{try{if(!l&&null!=t.return&&(u=t.return(),Object(u)!==u))return}finally{if(d)throw o}}return i}}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return c(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return c(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}f.displayName="DarkModeProvider",f.propTypes={children:i.default.node,contextDarkMode:i.default.bool};var p={popover:{portalContainer:void 0,scrollContainer:void 0}},v=r.createContext(p);function y(){return r.useContext(v).popover}function b(e){var r=e.popover,t=void 0===r?p.popover:r,n=e.children;return u.default.createElement(v.Provider,{value:{popover:t}},n)}var m=r.createContext(14);function h(){return r.useContext(m)}function P(e){var r=e.children,t=e.baseFontSize,n=void 0===t?14:t;return u.default.createElement(m.Provider,{value:n},r)}P.displayName="TypographyProvider",P.propTypes={children:i.default.node,baseFontSize:i.default.number};var g={usingKeyboard:!0,setUsingKeyboard:function(){}},x=r.createContext(g),k={tab:9,leftArrow:37,upArrow:38,rightArrow:39,downArrow:40};function C(e){var t=e.children,n=s(r.useState(g.usingKeyboard),2),a=n[0],i=n[1];o.useEventListener("mousedown",(function(){return i(!1)}),{enabled:a}),o.useEventListener("keydown",(function(e){var r=e.keyCode;Object.values(k).includes(r)&&i(!0)}),{enabled:!a});var l=r.useMemo((function(){return{usingKeyboard:a,setUsingKeyboard:i}}),[a]);return u.default.createElement(x.Provider,{value:l},t)}function M(e){var t=e.children,n=e.baseFontSize,o=e.popoverPortalContainer,a=e.darkMode,i=d().contextDarkMode,l=s(r.useState(null!=a?a:i),2),c=l[0],p=l[1];r.useEffect((function(){p(null!=a?a:i)}),[a,i]);var v=h(),m=null!=n?n:v,g=y(),x=null!=o?o:g;return u.default.createElement(C,null,u.default.createElement(b,{popover:x},u.default.createElement(P,{baseFontSize:m},u.default.createElement(f,{contextDarkMode:c,setDarkMode:p},t))))}C.displayName="UsingKeyboardProvider",C.propTypes={children:i.default.node},M.displayName="LeafyGreenProvider",M.propTypes={popoverPortalContainer:i.default.shape({popover:i.default.shape({portalContainer:i.default.elementType,scrollContainer:i.default.elementType})}),baseFontSize:i.default.oneOf([14,16]),darkMode:i.default.bool};var D=r.createContext({isPopoverOpen:!1,setIsPopoverOpen:function(){}});function S(e){var t=e.children,n=s(r.useState(!1),2),o=n[0],a=n[1],i=r.useMemo((function(){return{isPopoverOpen:o,setIsPopoverOpen:a}}),[o]);return u.default.createElement(D.Provider,{value:i},t)}S.displayName="PopoverProvider",S.propTypes={children:i.default.node},e.PopoverContext=D,e.PopoverProvider=S,e.PortalContextProvider=b,e.default=M,e.useBaseFontSize=h,e.useDarkMode=function(e){var r,t=d(),o=t.contextDarkMode,a=t.setDarkMode,u=null!==(r=null!=e?e:o)&&void 0!==r&&r;return{darkMode:u,theme:n.getTheme(u),setDarkMode:a}},e.useDarkModeContext=d,e.usePopoverContext=function(){return r.useContext(D)},e.usePopoverPortalContainer=y,e.useUsingKeyboardContext=function(){return r.useContext(x)},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("prop-types"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/hooks")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/lib","@leafygreen-ui/hooks"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/leafygreen-provider"]={},e.React,e.PropTypes,e["@leafygreen-ui/lib"],e["@leafygreen-ui/hooks"])}(this,(function(e,r,t,o,n){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(r),u=a(t),i=r.createContext({contextDarkMode:!1,setDarkMode:function(){}}),d=function(){return r.useContext(i)};function p(e){var r=e.children,t=e.contextDarkMode,o=e.setDarkMode;return l.default.createElement(i.Provider,{value:{contextDarkMode:t,setDarkMode:o}},r)}function c(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}function f(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var o,n,a,l,u=[],i=!0,d=!1;try{if(a=(t=t.call(e)).next,0===r);else for(;!(i=(o=a.call(t)).done)&&(u.push(o.value),u.length!==r);i=!0);}catch(e){d=!0,n=e}finally{try{if(!i&&null!=t.return&&(l=t.return(),Object(l)!==l))return}finally{if(d)throw n}}return u}}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return s(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return s(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,r){r>e.length&&(r=e.length);for(var t=0,o=new Array(r);t<r;t++)o[t]=e[t];return o}p.displayName="DarkModeProvider",p.propTypes={children:u.default.node,contextDarkMode:u.default.bool};var v=["children"],y=r.createContext({forceUseTopLayer:!1}),b=function(){return r.useContext(y)},m=function(e){var r=e.children,t=c(e,v);return l.default.createElement(y.Provider,{value:t},r)};m.displayName="MigrationProvider",m.propTypes={children:u.default.node};var P={popover:{portalContainer:void 0,scrollContainer:void 0}},h=r.createContext(P);function C(){return r.useContext(h).popover}function x(e){var r=e.popover,t=void 0===r?P.popover:r,o=e.children;return l.default.createElement(h.Provider,{value:{popover:t}},o)}var g=r.createContext(14);function M(){return r.useContext(g)}function k(e){var r=e.children,t=e.baseFontSize,o=void 0===t?14:t;return l.default.createElement(g.Provider,{value:o},r)}k.displayName="TypographyProvider",k.propTypes={children:u.default.node,baseFontSize:u.default.number};var T={usingKeyboard:!0,setUsingKeyboard:function(){}},E=r.createContext(T),O={tab:9,leftArrow:37,upArrow:38,rightArrow:39,downArrow:40};function D(e){var t=e.children,o=f(r.useState(T.usingKeyboard),2),a=o[0],u=o[1];n.useEventListener("mousedown",(function(){return u(!1)}),{enabled:a}),n.useEventListener("keydown",(function(e){var r=e.keyCode;Object.values(O).includes(r)&&u(!0)}),{enabled:!a});var i=r.useMemo((function(){return{usingKeyboard:a,setUsingKeyboard:u}}),[a]);return l.default.createElement(E.Provider,{value:i},t)}function S(e){var t=e.children,o=e.baseFontSize,n=e.popoverPortalContainer,a=e.darkMode,u=e.forceUseTopLayer,i=void 0!==u&&u,c=d().contextDarkMode,s=f(r.useState(null!=a?a:c),2),v=s[0],y=s[1];r.useEffect((function(){y(null!=a?a:c)}),[a,c]);var P=M(),h=null!=o?o:P,g=C(),T=null!=n?n:g,E=b(),O=i||E.forceUseTopLayer;return l.default.createElement(D,null,l.default.createElement(x,{popover:T},l.default.createElement(k,{baseFontSize:h},l.default.createElement(p,{contextDarkMode:v,setDarkMode:y},l.default.createElement(m,{forceUseTopLayer:O},t)))))}D.displayName="UsingKeyboardProvider",D.propTypes={children:u.default.node},S.displayName="LeafyGreenProvider",S.propTypes={popoverPortalContainer:u.default.shape({popover:u.default.shape({portalContainer:u.default.elementType,scrollContainer:u.default.elementType})}),baseFontSize:u.default.oneOf([14,16]),darkMode:u.default.bool};var w=r.createContext({isPopoverOpen:!1,setIsPopoverOpen:function(){}}),j=function(e){var t=e.children,o=f(r.useState(!1),2),n=o[0],a=o[1],u=r.useMemo((function(){return{isPopoverOpen:n,setIsPopoverOpen:a}}),[n]);return l.default.createElement(w.Provider,{value:u},t)};j.displayName="PopoverProvider",j.propTypes={children:u.default.node};var A=["children"],U=r.createContext({}),L=function(e){var r=e.children,t=c(e,A),o=C(),n={portalContainer:t.portalContainer||o.portalContainer,scrollContainer:t.scrollContainer||o.scrollContainer};return l.default.createElement(U.Provider,{value:t},l.default.createElement(x,{popover:n},r))};L.displayName="PopoverPropsProvider",L.propTypes={children:u.default.node};e.PopoverContext=w,e.PopoverPropsContext=U,e.PopoverPropsProvider=L,e.PopoverProvider=j,e.PortalContextProvider=x,e.RenderMode={Inline:"inline",Portal:"portal",TopLayer:"top-layer"},e.default=S,e.useBaseFontSize=M,e.useDarkMode=function(e){var r,t=d(),n=t.contextDarkMode,a=t.setDarkMode,l=null!==(r=null!=e?e:n)&&void 0!==r&&r;return{darkMode:l,theme:o.getTheme(l),setDarkMode:a}},e.useDarkModeContext=d,e.useMigrationContext=b,e.usePopoverContext=function(){return r.useContext(w)},e.usePopoverPortalContainer=C,e.usePopoverPropsContext=function(){return r.useContext(U)},e.useUsingKeyboardContext=function(){return r.useContext(E)},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

dist/LeafyGreenContext.d.ts

 import React, { PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
-import { DarkModeProps } from '@leafygreen-ui/lib';
-import { PortalContextValues } from './PortalContext';
-import { TypographyProviderProps } from './TypographyContext';
-export type LeafyGreenProviderProps = {
-    /**
-     * Define a container HTMLElement for components that utilize the `Portal` component
-     */
-    popoverPortalContainer?: PortalContextValues['popover'];
-} & TypographyProviderProps & DarkModeProps;
-declare function LeafyGreenProvider({ children, baseFontSize: fontSizeProp, popoverPortalContainer: popoverPortalContainerProp, darkMode: darkModeProp, }: PropsWithChildren<LeafyGreenProviderProps>): React.JSX.Element;
+import { LeafyGreenProviderProps } from './LeafyGreenContext.types';
+declare function LeafyGreenProvider({ children, baseFontSize: fontSizeProp, popoverPortalContainer: popoverPortalContainerProp, darkMode: darkModeProp, forceUseTopLayer: forceUseTopLayerProp, }: PropsWithChildren<LeafyGreenProviderProps>): React.JSX.Element;
 declare namespace LeafyGreenProvider {
@@ -14,0 +6,0 @@ var displayName: string;

dist/PopoverContext/index.d.ts

@@ -1,2 +0,2 @@
-export { PopoverContext, PopoverProvider, type PopoverState, usePopoverContext, } from './PopoverContext';
+export { PopoverContext, PopoverProvider, usePopoverContext, } from './PopoverContext';
 //# sourceMappingURL=index.d.ts.map

dist/PopoverContext/PopoverContext.d.ts

@@ -1,35 +0,23 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
-export interface PopoverState {
-    /**
-     * Whether the most immediate popover ancestor is open
-     */
-    isPopoverOpen: boolean;
-    /**
-     * Sets the internal state
-     * @internal
-     */
-    setIsPopoverOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}
-export declare const PopoverContext: React.Context<PopoverState>;
+import { PopoverContextType } from './PopoverContext.types';
+export declare const PopoverContext: React.Context<PopoverContextType>;
 /**
- * Access the popover state
- * @returns `isPopoverOpen: boolean`
+ * Access the popover context to read and write if a popover element is open in a modal
  */
-export declare function usePopoverContext(): PopoverState;
-interface PopoverProviderProps {
-    children?: React.ReactNode;
-}
+export declare const usePopoverContext: () => PopoverContextType;
 /**
- * Creates a Popover context.
+ * Creates a Popover context to read and write if a popover element is open in a modal
  * Call `usePopoverContext` to access the popover state
+ * This is defined separately from `PopoverPropsContext` to avoid incorrectly resetting `isPopoverOpen` value
+ * We avoid renaming this provider because it will trigger major changes in all packages because
+ * `@leafygreen-ui/leafygreen-provider` is a peer dependency to all LG packages
  */
-export declare function PopoverProvider({ children }: PopoverProviderProps): React.JSX.Element;
-export declare namespace PopoverProvider {
-    var displayName: string;
-    var propTypes: {
+export declare const PopoverProvider: {
+    ({ children }: PropsWithChildren<{}>): React.JSX.Element;
+    displayName: string;
+    propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-}
-export {};
+};
 //# sourceMappingURL=PopoverContext.d.ts.map

dist/PortalContext.d.ts

@@ -17,4 +17,4 @@ import React from 'react';
 }
-export default function PortalContextProvider({ popover, children, }: PortalContext): React.JSX.Element;
+export declare function PortalContextProvider({ popover, children, }: PortalContext): React.JSX.Element;
 export {};
 //# sourceMappingURL=PortalContext.d.ts.map

package.json

 {
   "name": "@leafygreen-ui/leafygreen-provider",
-  "version": "3.1.12",
+  "version": "3.2.0",
   "description": "LeafyGreen UI Context Provider",
@@ -25,4 +25,5 @@ "main": "./dist/index.js",
   "dependencies": {
-    "@leafygreen-ui/lib": "^13.3.0",
-    "@leafygreen-ui/hooks": "^8.1.3"
+    "@leafygreen-ui/hooks": "^8.3.0",
+    "@leafygreen-ui/lib": "^13.8.1",
+    "react-transition-group": "^4.4.5"
   },
@@ -29,0 +30,0 @@ "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0",

README.md

@@ -47,8 +47,41 @@ # LeafyGreen Provider
 
-| Prop           | Type       | Description                                                                                                                                                                               | Default |
-| -------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| `children`     | `node`     | Children passed to `LeafyGreenProvider` will be unmodified, aside from having access to its state.                                                                                        |         |
-| `baseFontSize` | `14`, `16` | Describes the `font-size` that the application is using. `<Body/>` and `<InlineCode />` components use this value to determine the `font-size` and `line-height` applied to their content | `14`    |
-| `darkMode`     | `boolean`  | Determines if LG components should be rendered in dark mode.                                                                                                                              |         |
+| Prop               | Type       | Description                                                                                                                                                                               | Default |
+| ------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `children`         | `node`     | Children passed to `LeafyGreenProvider` will be unmodified, aside from having access to its state.                                                                                        |         |
+| `baseFontSize`     | `14`, `16` | Describes the `font-size` that the application is using. `<Body/>` and `<InlineCode />` components use this value to determine the `font-size` and `line-height` applied to their content | `14`    |
+| `darkMode`         | `boolean`  | Determines if LG components should be rendered in dark mode.                                                                                                                              |         |
+| `forceUseTopLayer` | `boolean`  | Determines globally if popover elements using `Popover` component from `@leafygreen-ui/popover` package should render in top layer                                                        | `false` |
 
+## PopoverPropsProvider
+
+The `PopoverPropsProvider` can be used to pass props to a deeply nested popover element.
+
+### Example
+
+```js
+import { PopoverPropsProvider } from '@leafygreen-ui/leafygreen-provider';
+
+const ParentComponentWithNestedPopover = ({ ...popoverProps }) => {
+  return (
+    <PopoverPropsProvider {...popoverProps}>
+      <ChildComponentWithNestedPopover />
+    </PopoverPropsProvider>
+  );
+};
+```
+
+### Properties
+
+| Prop                           | Type                                      | Description                                                                                                                                                                                                                                                                                                                                                                           | Default       |
+| ------------------------------ | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `dismissMode`                  | `'auto'` \| `'manual'`                    | Options to control how the popover element is dismissed. This will only apply when `renderMode` is `'top-layer'` <br> \* `'auto'` will automatically handle dismissal on backdrop click or esc key press, ensuring only one popover is visible at a time <br> \* `'manual'` will require that the consumer handle dismissal manually                                                  | `'auto'`      |
+| `onToggle`                     | `(e: ToggleEvent) => void;`               | Function that is called when the popover is toggled. This will only apply when `renderMode` is `'top-layer'`                                                                                                                                                                                                                                                                          |               |
+| `popoverZIndex` (deprecated)   | `number`                                  | Sets the z-index CSS property for the popover. This will only apply if `usePortal` is defined and `renderMode` is not `'top-layer'`                                                                                                                                                                                                                                                   |               |
+| `portalClassName` (deprecated) | `string`                                  | Passes the given className to the popover's portal container if the default portal container is being used. This will only apply when `renderMode` is `'portal'`                                                                                                                                                                                                                      |               |
+| `portalContainer` (deprecated) | `HTMLElement` \| `null`                   | Sets the container used for the popover's portal. This will only apply when `renderMode` is `'portal'`. <br> NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same reference to `scrollContainer` and `portalContainer`.                                                                           |               |
+| `portalRef` (deprecated)       | `string`                                  | Passes a ref to forward to the portal element. This will only apply when `renderMode` is `'portal'`                                                                                                                                                                                                                                                                                   |               |
+| `renderMode`                   | `'inline'` \| `'portal'` \| `'top-layer'` | Options to render the popover element <br> \* [deprecated] `'inline'` will render the popover element inline in the DOM where it's written <br> \* [deprecated] `'portal'` will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer` <br> \* `'top-layer'` will render the popover element in the top layer | `'top-layer'` |
+| `scrollContainer` (deprecated) | `HTMLElement` \| `null`                   | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that element to allow the portal to position properly. This will only apply when `renderMode` is `'portal'`                                                                                                                                                            |               |
+| `spacing`                      | `number`                                  | Specifies the amount of spacing (in pixels) between the trigger element and the content element.                                                                                                                                                                                                                                                                                      | `4`           |
+
 ## useUsingKeyboardContext
@@ -115,2 +148,4 @@
 
+### Example
+
 ```js
@@ -117,0 +152,0 @@ import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';

src/index.ts

 export { useDarkMode, useDarkModeContext } from './DarkModeContext';
-export { default, type LeafyGreenProviderProps } from './LeafyGreenContext';
+export { default } from './LeafyGreenContext';
+export { type LeafyGreenProviderProps } from './LeafyGreenContext.types';
+export { useMigrationContext } from './MigrationContext';
 export {
@@ -9,3 +11,10 @@ PopoverContext,
 export {
-  default as PortalContextProvider,
+  PopoverPropsContext,
+  PopoverPropsProvider,
+  type PopoverPropsProviderProps,
+  RenderMode,
+  usePopoverPropsContext,
+} from './PopoverPropsContext';
+export {
+  PortalContextProvider,
   usePopoverPortalContainer,
@@ -12,0 +21,0 @@ } from './PortalContext';

src/PopoverContext/index.ts

 export {
   PopoverContext,
   PopoverProvider,
-  type PopoverState,
   usePopoverContext,
 } from './PopoverContext';

stories.js

@@ -1,1 +0,1 @@
-import e,{useContext as r,createContext as n,useState as o,useMemo as t,useEffect as a}from"react";import l from"prop-types";import"@leafygreen-ui/lib";import{useEventListener as i}from"@leafygreen-ui/hooks";var u=n({contextDarkMode:!1,setDarkMode:function(){}});function c(r){var n=r.children,o=r.contextDarkMode,t=r.setDarkMode;return e.createElement(u.Provider,{value:{contextDarkMode:o,setDarkMode:t}},n)}function d(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var o,t,a,l,i=[],u=!0,c=!1;try{if(a=(n=n.call(e)).next,0===r){if(Object(n)!==n)return;u=!1}else for(;!(u=(o=a.call(n)).done)&&(i.push(o.value),i.length!==r);u=!0);}catch(e){c=!0,t=e}finally{try{if(!u&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(c)throw t}}return i}}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return p(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return p(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,o=new Array(r);n<r;n++)o[n]=e[n];return o}c.displayName="DarkModeProvider",c.propTypes={children:l.node,contextDarkMode:l.bool};var s={popover:{portalContainer:void 0,scrollContainer:void 0}},v=n(s);function f(r){var n=r.popover,o=void 0===n?s.popover:n,t=r.children;return e.createElement(v.Provider,{value:{popover:o}},t)}var y=n(14);function m(r){var n=r.children,o=r.baseFontSize,t=void 0===o?14:o;return e.createElement(y.Provider,{value:t},n)}m.displayName="TypographyProvider",m.propTypes={children:l.node,baseFontSize:l.number};var b={usingKeyboard:!0,setUsingKeyboard:function(){}},h=n(b),g={tab:9,leftArrow:37,upArrow:38,rightArrow:39,downArrow:40};function k(r){var n=r.children,a=d(o(b.usingKeyboard),2),l=a[0],u=a[1];i("mousedown",(function(){return u(!1)}),{enabled:l}),i("keydown",(function(e){var r=e.keyCode;Object.values(g).includes(r)&&u(!0)}),{enabled:!l});var c=t((function(){return{usingKeyboard:l,setUsingKeyboard:u}}),[l]);return e.createElement(h.Provider,{value:c},n)}function M(n){var t=n.children,l=n.baseFontSize,i=n.popoverPortalContainer,p=n.darkMode,s=r(u).contextDarkMode,b=d(o(null!=p?p:s),2),h=b[0],g=b[1];a((function(){g(null!=p?p:s)}),[p,s]);var M=r(y),E=null!=l?l:M,P=r(v).popover,w=null!=i?i:P;return e.createElement(k,null,e.createElement(f,{popover:w},e.createElement(m,{baseFontSize:E},e.createElement(c,{contextDarkMode:h,setDarkMode:g},t))))}k.displayName="UsingKeyboardProvider",k.propTypes={children:l.node},M.displayName="LeafyGreenProvider",M.propTypes={popoverPortalContainer:l.shape({popover:l.shape({portalContainer:l.elementType,scrollContainer:l.elementType})}),baseFontSize:l.oneOf([14,16]),darkMode:l.bool},l.node;var E=function(){return e.createElement("div",null,"This is a test component.")},P={title:"Contexts/LeafyGreenProvider",component:M,parameters:{default:null},argTypes:{darkMode:{control:"boolean"},popoverPortalContainer:{control:"none"}}},w=function(r){return e.createElement(M,r,e.createElement(E,null))}.bind({});w.parameters={chromatic:{disableSnapshot:!0}};export{w as Basic,P as default};
+import e,{useContext as r,createContext as n,useState as o,useMemo as t,useEffect as a}from"react";import l from"prop-types";import"@leafygreen-ui/lib";import{useEventListener as i}from"@leafygreen-ui/hooks";var c=n({contextDarkMode:!1,setDarkMode:function(){}});function u(r){var n=r.children,o=r.contextDarkMode,t=r.setDarkMode;return e.createElement(c.Provider,{value:{contextDarkMode:o,setDarkMode:t}},n)}function d(e,r){if(null==e)return{};var n,o,t=function(e,r){if(null==e)return{};var n,o,t={},a=Object.keys(e);for(o=0;o<a.length;o++)n=a[o],r.indexOf(n)>=0||(t[n]=e[n]);return t}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}function p(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var o,t,a,l,i=[],c=!0,u=!1;try{if(a=(n=n.call(e)).next,0===r);else for(;!(c=(o=a.call(n)).done)&&(i.push(o.value),i.length!==r);c=!0);}catch(e){u=!0,t=e}finally{try{if(!c&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(u)throw t}}return i}}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return s(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return s(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,r){r>e.length&&(r=e.length);for(var n=0,o=new Array(r);n<r;n++)o[n]=e[n];return o}u.displayName="DarkModeProvider",u.propTypes={children:l.node,contextDarkMode:l.bool};var f=["children"],v=n({forceUseTopLayer:!1}),y=function(r){var n=r.children,o=d(r,f);return e.createElement(v.Provider,{value:o},n)};y.displayName="MigrationProvider",y.propTypes={children:l.node};var m={popover:{portalContainer:void 0,scrollContainer:void 0}},b=n(m);function h(r){var n=r.popover,o=void 0===n?m.popover:n,t=r.children;return e.createElement(b.Provider,{value:{popover:o}},t)}var g=n(14);function k(r){var n=r.children,o=r.baseFontSize,t=void 0===o?14:o;return e.createElement(g.Provider,{value:t},n)}k.displayName="TypographyProvider",k.propTypes={children:l.node,baseFontSize:l.number};var M={usingKeyboard:!0,setUsingKeyboard:function(){}},P=n(M),E={tab:9,leftArrow:37,upArrow:38,rightArrow:39,downArrow:40};function T(r){var n=r.children,a=p(o(M.usingKeyboard),2),l=a[0],c=a[1];i("mousedown",(function(){return c(!1)}),{enabled:l}),i("keydown",(function(e){var r=e.keyCode;Object.values(E).includes(r)&&c(!0)}),{enabled:!l});var u=t((function(){return{usingKeyboard:l,setUsingKeyboard:c}}),[l]);return e.createElement(P.Provider,{value:u},n)}function w(n){var t=n.children,l=n.baseFontSize,i=n.popoverPortalContainer,d=n.darkMode,s=n.forceUseTopLayer,f=void 0!==s&&s,m=r(c).contextDarkMode,M=p(o(null!=d?d:m),2),P=M[0],E=M[1];a((function(){E(null!=d?d:m)}),[d,m]);var w=r(g),O=null!=l?l:w,S=r(b).popover,x=null!=i?i:S,D=r(v),A=f||D.forceUseTopLayer;return e.createElement(T,null,e.createElement(h,{popover:x},e.createElement(k,{baseFontSize:O},e.createElement(u,{contextDarkMode:P,setDarkMode:E},e.createElement(y,{forceUseTopLayer:A},t)))))}T.displayName="UsingKeyboardProvider",T.propTypes={children:l.node},w.displayName="LeafyGreenProvider",w.propTypes={popoverPortalContainer:l.shape({popover:l.shape({portalContainer:l.elementType,scrollContainer:l.elementType})}),baseFontSize:l.oneOf([14,16]),darkMode:l.bool},l.node,l.node;var O=function(){return e.createElement("div",null,"This is a test component.")},S={title:"Contexts/LeafyGreenProvider",component:w,parameters:{default:null},argTypes:{darkMode:{control:"boolean"},popoverPortalContainer:{control:"none"}}},x=function(r){return e.createElement(w,r,e.createElement(O,null))}.bind({});x.parameters={chromatic:{disableSnapshot:!0}};export{x as Basic,S as default};

tsdoc.json

 [
   {
     "tags": {},
-    "description": "Creates a Popover context.\nCall `usePopoverContext` to access the popover state",
+    "description": "Creates a global context for migration purposes.\nCall `useMigrationContext` to access the migration context",
     "methods": [],
+    "displayName": "MigrationProvider",
+    "props": {
+      "MigrationProviderProps": {
+        "children": {
+          "name": "children",
+          "defaultValue": null,
+          "description": "",
+          "required": false,
+          "type": {
+            "name": "enum",
+            "raw": "ReactNode",
+            "value": [
+              {
+                "value": "string"
+              },
+              {
+                "value": "number"
+              },
+              {
+                "value": "false"
+              },
+              {
+                "value": "true"
+              },
+              {
+                "value": "ReactElement<any, string | JSXElementConstructor<any>>",
+                "description": "",
+                "fullComment": "",
+                "tags": {}
+              },
+              {
+                "value": "Iterable<ReactNode>",
+                "description": "",
+                "fullComment": "",
+                "tags": {}
+              },
+              {
+                "value": "ReactPortal",
+                "description": "",
+                "fullComment": "",
+                "tags": {}
+              }
+            ]
+          },
+          "tags": {}
+        }
+      }
+    }
+  },
+  {
+    "tags": {},
+    "description": "Creates a Popover context to read and write if a popover element is open in a modal\nCall `usePopoverContext` to access the popover state\nThis is defined separately from `PopoverPropsContext` to avoid incorrectly resetting `isPopoverOpen` value\nWe avoid renaming this provider because it will trigger major changes in all packages because\n`@leafygreen-ui/leafygreen-provider` is a peer dependency to all LG packages",
+    "methods": [],
     "displayName": "PopoverProvider",
@@ -57,2 +110,241 @@ "props": {
     "tags": {},
+    "description": "Creates a PopoverProps context to pass props to a deeply nested popover element\nCall `usePopoverPropsContext` to access the popover state\nThis is defined separately from `PopoverContext` to avoid incorrectly resetting `isPopoverOpen` value",
+    "methods": [],
+    "displayName": "PopoverPropsProvider",
+    "props": {
+      "PopoverPropsProviderProps": {
+        "spacing": {
+          "name": "spacing",
+          "defaultValue": null,
+          "description": "Specifies the amount of spacing (in pixels) between the trigger element and the Popover content.\n\ndefault: `10`",
+          "required": false,
+          "type": {
+            "name": "number"
+          },
+          "tags": {}
+        },
+        "popoverZIndex": {
+          "name": "popoverZIndex",
+          "defaultValue": null,
+          "description": "Number that controls the z-index of the popover element directly.",
+          "required": false,
+          "type": {
+            "name": "number"
+          },
+          "tags": {}
+        },
+        "children": {
+          "name": "children",
+          "defaultValue": null,
+          "description": "",
+          "required": false,
+          "type": {
+            "name": "enum",
+            "raw": "ReactNode",
+            "value": [
+              {
+                "value": "string"
+              },
+              {
+                "value": "number"
+              },
+              {
+                "value": "false"
+              },
+              {
+                "value": "true"
+              },
+              {
+                "value": "ReactElement<any, string | JSXElementConstructor<any>>",
+                "description": "",
+                "fullComment": "",
+                "tags": {}
+              },
+              {
+                "value": "Iterable<ReactNode>",
+                "description": "",
+                "fullComment": "",
+                "tags": {}
+              },
+              {
+                "value": "ReactPortal",
+                "description": "",
+                "fullComment": "",
+                "tags": {}
+              }
+            ]
+          },
+          "tags": {}
+        }
+      },
+      "RenderPortalProps": {
+        "renderMode": {
+          "name": "renderMode",
+          "defaultValue": null,
+          "description": "Options to render the popover element",
+          "required": false,
+          "type": {
+            "name": "enum",
+            "raw": "\"portal\" | \"inline\" | \"top-layer\"",
+            "value": [
+              {
+                "value": "\"portal\""
+              },
+              {
+                "value": "\"inline\""
+              },
+              {
+                "value": "\"top-layer\""
+              }
+            ]
+          },
+          "tags": {
+            "defaultValue": "'top-layer'\n'top-layer'\n'top-layer'",
+            "param": "Inline will render the popover element inline in the DOM where it's written. This option is deprecated and will be removed in the future.\nPortal will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer`. This option is deprecated and will be removed in the future.\nTopLayer will render the popover element in the top layer\nInline will render the popover element inline in the DOM where it's written. This option is deprecated and will be removed in the future.\nPortal will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer`. This option is deprecated and will be removed in the future.\nTopLayer will render the popover element in the top layer\nInline will render the popover element inline in the DOM where it's written. This option is deprecated and will be removed in the future.\nPortal will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer`. This option is deprecated and will be removed in the future.\nTopLayer will render the popover element in the top layer"
+          }
+        },
+        "dismissMode": {
+          "name": "dismissMode",
+          "defaultValue": null,
+          "description": "When `renderMode=\"top-layer\"`, these options can control how a popover element is dismissed\n- `'auto'` will automatically handle dismissal on backdrop click or key press, ensuring only one popover is visible at a time\n- `'manual'` will require that the consumer handle dismissal manually",
+          "required": false,
+          "type": {
+            "name": "enum",
+            "raw": "DismissMode",
+            "value": [
+              {
+                "value": "\"auto\""
+              },
+              {
+                "value": "\"manual\""
+              }
+            ]
+          },
+          "tags": {}
+        },
+        "onToggle": {
+          "name": "onToggle",
+          "defaultValue": null,
+          "description": "When `renderMode=\"top-layer\"`, this callback function is called when the visibility of a popover element is toggled\nA callback function that is called when the visibility of a popover element rendered in the top layer is toggled",
+          "required": false,
+          "type": {
+            "name": "(e: ToggleEvent) => void"
+          },
+          "tags": {}
+        },
+        "portalClassName": {
+          "name": "portalClassName",
+          "defaultValue": null,
+          "description": "When `renderMode=\"portal\"`, it specifies a class name to apply to the portal element",
+          "required": false,
+          "type": {
+            "name": "string"
+          },
+          "tags": {
+            "deprecated": ""
+          }
+        },
+        "portalContainer": {
+          "name": "portalContainer",
+          "defaultValue": null,
+          "description": "When `renderMode=\"portal\"`, it specifies an element to portal within. If not provided, a div is generated at the end of the body",
+          "required": false,
+          "type": {
+            "name": "HTMLElement"
+          },
+          "tags": {
+            "deprecated": ""
+          }
+        },
+        "portalRef": {
+          "name": "portalRef",
+          "defaultValue": null,
+          "description": "When `renderMode=\"portal\"`, it passes a ref to forward to the portal element",
+          "required": false,
+          "type": {
+            "name": "MutableRefObject<HTMLElement>"
+          },
+          "tags": {
+            "deprecated": ""
+          }
+        },
+        "scrollContainer": {
+          "name": "scrollContainer",
+          "defaultValue": null,
+          "description": "When `renderMode=\"portal\"`, it specifies the scrollable element to position relative to",
+          "required": false,
+          "type": {
+            "name": "HTMLElement"
+          },
+          "tags": {
+            "deprecated": ""
+          }
+        }
+      },
+      "BaseTransitionProps": {
+        "onEnter": {
+          "name": "onEnter",
+          "defaultValue": null,
+          "description": "Callback fired before the \"entering\" status is applied. An extra\nparameter `isAppearing` is supplied to indicate if the enter stage is\noccurring on the initial mount",
+          "required": false,
+          "type": {
+            "name": "(isAppearing: boolean) => void"
+          },
+          "tags": {}
+        },
+        "onEntering": {
+          "name": "onEntering",
+          "defaultValue": null,
+          "description": "Callback fired after the \"entering\" status is applied. An extra parameter\nisAppearing is supplied to indicate if the enter stage is occurring on\nthe initial mount",
+          "required": false,
+          "type": {
+            "name": "(isAppearing: boolean) => void"
+          },
+          "tags": {}
+        },
+        "onEntered": {
+          "name": "onEntered",
+          "defaultValue": null,
+          "description": "Callback fired after the \"entered\" status is applied. An extra parameter\nisAppearing is supplied to indicate if the enter stage is occurring on\nthe initial mount",
+          "required": false,
+          "type": {
+            "name": "(isAppearing: boolean) => void"
+          },
+          "tags": {}
+        },
+        "onExit": {
+          "name": "onExit",
+          "defaultValue": null,
+          "description": "Callback fired before the \"exiting\" status is applied.",
+          "required": false,
+          "type": {
+            "name": "() => void"
+          },
+          "tags": {}
+        },
+        "onExiting": {
+          "name": "onExiting",
+          "defaultValue": null,
+          "description": "Callback fired after the \"exiting\" status is applied.",
+          "required": false,
+          "type": {
+            "name": "() => void"
+          },
+          "tags": {}
+        },
+        "onExited": {
+          "name": "onExited",
+          "defaultValue": null,
+          "description": "Callback fired after the \"exited\" status is applied.",
+          "required": false,
+          "type": {
+            "name": "() => void"
+          },
+          "tags": {}
+        }
+      }
+    }
+  },
+  {
+    "tags": {},
     "description": "",
@@ -169,3 +461,3 @@ "methods": [],
     "methods": [],
-    "displayName": "LeafygreenUiLeafygreenProvider",
+    "displayName": "PortalContextProvider",
     "props": {
@@ -172,0 +464,0 @@ "PortalContext": {

No alert changes

Improved metrics

Total package byte prevSize

171926

increased by76.82%

Number of package files

66

increased by65%

Lines of code

2155

increased by69.95%

Number of lines in readme file

157

increased by28.69%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedreact-transition-group@^4.4.5

• + Added@babel/runtime@7.26.9(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addeddom-helpers@5.2.1(transitive)

• + Addedreact@19.0.0(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedreact-transition-group@4.4.5(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedscheduler@0.25.0(transitive)

• Updated@leafygreen-ui/hooks@^8.3.0

• Updated@leafygreen-ui/lib@^13.8.1