@splunk/react-ui 4.23.0 → 4.25.0

package/Modal.js

@@ -61,10 +61,10 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Body: () => /* reexport */ F,
-        Footer: () => /* reexport */ K,
-        Header: () => /* reexport */ ae,
-        default: () => /* reexport */ qe
+        Body: () => /* reexport */ R,
+        Footer: () => /* reexport */ V,
+        Header: () => /* reexport */ ce,
+        default: () => /* reexport */ Re
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -78,47 +78,50 @@
     // CONCATENATED MODULE: external "lodash/keys"
     const c = require("lodash/keys");
     var s =  e.n(c);
-    // CONCATENATED MODULE: external "lodash/omit"
-    const u = require("lodash/omit");
+    // CONCATENATED MODULE: external "lodash/memoize"
+    const u = require("lodash/memoize");
     var p =  e.n(u);
-    // CONCATENATED MODULE: external "@splunk/react-ui/ModalLayer"
-    const f = require("@splunk/react-ui/ModalLayer");
+    // CONCATENATED MODULE: external "lodash/omit"
+    const f = require("lodash/omit");
     var d =  e.n(f);
+    // CONCATENATED MODULE: external "@splunk/react-ui/ModalLayer"
+    const y = require("@splunk/react-ui/ModalLayer");
+    var b =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/ui-utils/focus"
-    const y = require("@splunk/ui-utils/focus");
+    const m = require("@splunk/ui-utils/focus");
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const b = require("@splunk/ui-utils/id");
+    const v = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/ScrollContainerContext"
-    const m = require("@splunk/react-ui/ScrollContainerContext");
+    const h = require("@splunk/react-ui/ScrollContainerContext");
     // CONCATENATED MODULE: external "styled-components"
-    const v = require("styled-components");
-    var h =  e.n(v);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const g = require("@splunk/react-ui/Box");
+    const g = require("styled-components");
     var x =  e.n(g);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
+    const O = require("@splunk/react-ui/Box");
+    var S =  e.n(O);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const O = require("@splunk/themes");
+    const w = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Modal/BodyStyles.ts
-    var w = h()(x()).withConfig({
+    var j = x()(S()).withConfig({
         displayName: "BodyStyles__StyledBox",
         componentId: "lv54z7-0"
     })([ "background-color:", ";", " flex:0 1 auto;overflow:auto;@media all and (-ms-high-contrast:none){*::-ms-backdrop,&{max-height:calc(100vh - 180px);}}" ], (0, 
-    O.pick)({
-        enterprise: O.variables.backgroundColor,
-        prisma: O.variables.backgroundColorDialog
-    }), (0, O.pick)({
+    w.pick)({
+        enterprise: w.variables.backgroundColor,
+        prisma: w.variables.backgroundColorDialog
+    }), (0, w.pick)({
         enterprise: {
-            comfortable: (0, v.css)([ "padding:28px;" ]),
-            compact: (0, v.css)([ "padding:24px;" ])
+            comfortable: (0, g.css)([ "padding:28px;" ]),
+            compact: (0, g.css)([ "padding:24px;" ])
         },
         prisma: {
-            comfortable: (0, v.css)([ "padding:12px 24px;&:first-child{padding-top:36px;}&:last-child{padding-bottom:36px;}" ]),
-            compact: (0, v.css)([ "padding:8px 24px;&:first-child{padding-top:26px;}&:last-child{padding-bottom:26px;}" ])
+            comfortable: (0, g.css)([ "padding:12px 24px;&:first-child{padding-top:36px;}&:last-child{padding-bottom:36px;}" ]),
+            compact: (0, g.css)([ "padding:8px 24px;&:first-child{padding-top:26px;}&:last-child{padding-bottom:26px;}" ])
         }
     }));
     // CONCATENATED MODULE: ./src/Modal/Body.tsx
-    function S() {
-        S = Object.assign || function(e) {
+    function k() {
+        k = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -129,30 +132,30 @@
             }
             return e;
         };
-        return S.apply(this, arguments);
+        return k.apply(this, arguments);
     }
-    function k(e, t) {
-        return _(e) || P(e, t) || C(e, t) || j();
+    function I(e, t) {
+        return M(e) || E(e, t) || P(e, t) || C();
     }
-    function j() {
+    function C() {
         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, t) {
+    function P(e, t) {
         if (!e) return;
-        if (typeof e === "string") return I(e, t);
+        if (typeof e === "string") return _(e, t);
         var r = Object.prototype.toString.call(e).slice(8, -1);
         if (r === "Object" && e.constructor) r = e.constructor.name;
         if (r === "Map" || r === "Set") return Array.from(e);
-        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return I(e, t);
+        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return _(e, t);
     }
-    function I(e, t) {
+    function _(e, t) {
         if (t == null || t > e.length) t = e.length;
         for (var r = 0, n = new Array(t); r < t; r++) {
             n[r] = e[r];
         }
         return n;
     }
-    function P(e, t) {
+    function E(e, t) {
         if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
         var r = [];
         var n = true;
@@ -175,12 +178,12 @@
         }
         return r;
     }
-    function _(e) {
+    function M(e) {
         if (Array.isArray(e)) return e;
     }
-    function E(e, t) {
+    function T(e, t) {
         if (e == null) return {};
-        var r = T(e, t);
+        var r = q(e, t);
         var n, o;
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
@@ -193,7 +196,7 @@
         }
         return r;
     }
-    function T(e, t) {
+    function q(e, t) {
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
@@ -205,53 +208,53 @@
         }
         return r;
     }
-    var M = {
+    var D = {
         children: i().node
     };
     /**
  * A styled container for `Modal` body content.
- */    function q(e) {
-        var t = e.children, o = E(e, [ "children" ]);
+ */    function F(e) {
+        var t = e.children, o = T(e, [ "children" ]);
         // @docs-props-type BodyPropsBase
-                var i = (0, r.useState)(), a = k(i, 2), l = a[0], c = a[1];
+                var i = (0, r.useState)(), a = I(i, 2), l = a[0], c = a[1];
         var s = (0, r.useCallback)((function(e) {
             c(e);
         }), []);
         
-        return n().createElement(w, S({
+        return n().createElement(j, k({
             "data-test": "body"
         }, o, {
             elementRef: s
-        }),  n().createElement(m.ScrollContainerProvider, {
+        }),  n().createElement(h.ScrollContainerProvider, {
             value: l
         }, t));
     }
-    q.propTypes = M;
-    /* harmony default export */    const F = q;
+    F.propTypes = D;
+    /* harmony default export */    const R = F;
     // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
-    const D = require("@splunk/react-ui/Divider");
-    var R =  e.n(D);
+    const A = require("@splunk/react-ui/Divider");
+    var B =  e.n(A);
     // CONCATENATED MODULE: ./src/Modal/FooterStyles.ts
-    var A = h()(x()).withConfig({
+    var H = x()(S()).withConfig({
         displayName: "FooterStyles__StyledBox",
         componentId: "yszcmv-0"
     })([ "flex:0 0 auto;text-align:right;padding:", ";background-color:", ";& > button{min-width:80px;}" ], (0, 
-    O.pick)({
-        enterprise: O.variables.spacing,
+    w.pick)({
+        enterprise: w.variables.spacing,
         prisma: {
             comfortable: "24px",
             compact: "18px 24px"
         }
-    }), (0, O.pick)({
-        enterprise: O.variables.backgroundColor,
-        prisma: O.variables.backgroundColorDialog
+    }), (0, w.pick)({
+        enterprise: w.variables.backgroundColor,
+        prisma: w.variables.backgroundColorDialog
     }));
     // CONCATENATED MODULE: ./src/Modal/ModalContext.tsx
-    var B =  (0, r.createContext)({});
-    /* harmony default export */    const H = B;
+    var N =  (0, r.createContext)({});
+    /* harmony default export */    const z = N;
     // CONCATENATED MODULE: ./src/Modal/Footer.tsx
-    function N() {
-        N = Object.assign || function(e) {
+    function L() {
+        L = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -262,11 +265,11 @@
             }
             return e;
         };
-        return N.apply(this, arguments);
+        return L.apply(this, arguments);
     }
-    function z(e, t) {
+    function X(e, t) {
         if (e == null) return {};
-        var r = L(e, t);
+        var r = $(e, t);
         var n, o;
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
@@ -279,7 +282,7 @@
         }
         return r;
     }
-    function L(e, t) {
+    function $(e, t) {
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
@@ -291,43 +294,43 @@
         }
         return r;
     }
-    var X = {
+    var K = {
         children: i().node
     };
     /**
  * A styled container for `Modal` footer content.
- */    function $(e) {
-        var t = e.children, o = z(e, [ "children" ]);
+ */    function U(e) {
+        var t = e.children, o = X(e, [ "children" ]);
         // @docs-props-type FooterPropsBase
-                var i = (0, r.useContext)(H), a = i.divider;
+                var i = (0, r.useContext)(z), a = i.divider;
         var l = a === "both" || a === "footer";
         
-        return n().createElement(n().Fragment, null, l &&  n().createElement(R(), {
+        return n().createElement(n().Fragment, null, l &&  n().createElement(B(), {
             "aria-hidden": true
-        }),  n().createElement(A, N({
+        }),  n().createElement(H, L({
             "data-test": "footer"
         }, o), t));
     }
-    $.propTypes = X;
-    /* harmony default export */    const K = $;
+    U.propTypes = K;
+    /* harmony default export */    const V = U;
     // CONCATENATED MODULE: external "@splunk/react-ui/CloseButton"
-    const U = require("@splunk/react-ui/CloseButton");
-    var W =  e.n(U);
+    const W = require("@splunk/react-ui/CloseButton");
+    var G =  e.n(W);
     // CONCATENATED MODULE: ./src/Modal/HeaderStyles.ts
-    var V = h()(x()).withConfig({
+    var J = x()(S()).withConfig({
         displayName: "HeaderStyles__StyledBox",
         componentId: "sc-1y722ut-0"
-    })([ "", ";flex:0 0 auto;position:relative;min-height:", ";background-color:", ";padding:", ";align-items:center;padding-right:", ";" ], O.mixins.reset("flex"), (0, 
-    O.pick)({
+    })([ "", ";flex:0 0 auto;position:relative;min-height:", ";background-color:", ";padding:", ";align-items:center;padding-right:", ";" ], w.mixins.reset("flex"), (0, 
+    w.pick)({
         enterprise: "30px",
         prisma: {
             comfortable: "60px",
             compact: "52px"
         }
-    }), (0, O.pick)({
-        enterprise: O.variables.backgroundColor,
-        prisma: O.variables.backgroundColorDialog
-    }), (0, O.pick)({
+    }), (0, w.pick)({
+        enterprise: w.variables.backgroundColor,
+        prisma: w.variables.backgroundColorDialog
+    }), (0, w.pick)({
         enterprise: "25px 28px",
         prisma: {
             comfortable: "18px 24px",
@@ -335,7 +338,7 @@
         }
     }), (function(e) {
         var t = e.$close;
-        return t && (0, O.pick)({
+        return t && (0, w.pick)({
             enterprise: "54px",
             prisma: {
                 comfortable: "64px",
@@ -343,68 +346,62 @@
             }
         });
     }));
-    var G = h().div.withConfig({
+    var Q = x().div.withConfig({
         displayName: "HeaderStyles__StyledTitleWrapper",
         componentId: "sc-1y722ut-1"
-    })([ "", ";flex-direction:column;" ], O.mixins.reset("flex"));
-    var J = h().div.withConfig({
+    })([ "", ";flex-direction:column;" ], w.mixins.reset("flex"));
+    var Y = x().div.withConfig({
         displayName: "HeaderStyles__StyledIcon",
         componentId: "sc-1y722ut-2"
-    })([ "", ";align-items:center;justify-content:center;margin-right:", ";", " width:", ";height:", ";flex-shrink:0;" ], O.mixins.reset("inline-flex"), O.variables.spacingLarge, (0, 
-    O.pick)({
-        prisma: (0, v.css)([ "background-color:", ";" ], O.variables.transparent)
-    }), (0, O.pick)({
+    })([ "", ";align-items:center;justify-content:center;margin-right:", ";background-color:", ";width:", ";height:", ";flex-shrink:0;" ], w.mixins.reset("inline-flex"), w.variables.spacingLarge, w.variables.transparent, (0, 
+    w.pick)({
         comfortable: "40px",
         compact: "32px"
-    }), (0, O.pick)({
+    }), (0, w.pick)({
         comfortable: "40px",
         compact: "32px"
     }));
-    var Q = h().div.withConfig({
+    var Z = x().div.withConfig({
         displayName: "HeaderStyles__StyledTitle",
         componentId: "sc-1y722ut-3"
-    })([ "", ";font-size:20px;margin:0;overflow-wrap:break-word;font-weight:", ";", "" ], O.mixins.reset("block"), O.variables.fontWeightSemiBold, (0, 
-    O.pick)({
-        enterprise: (0, v.css)([ "line-height:22px;" ]),
-        prisma: (0, v.css)([ "color:", ";line-height:24px;" ], O.variables.contentColorActive)
+    })([ "", ";font-size:20px;margin:0;overflow-wrap:break-word;font-weight:", ";color:", ";", "" ], w.mixins.reset("block"), w.variables.fontWeightSemiBold, w.variables.contentColorActive, (0, 
+    w.pick)({
+        enterprise: (0, g.css)([ "line-height:22px;" ]),
+        prisma: (0, g.css)([ "line-height:24px;" ])
     }));
-    var Y = h().div.withConfig({
+    var ee = x().div.withConfig({
         displayName: "HeaderStyles__StyledSubtitle",
         componentId: "sc-1y722ut-4"
-    })([ "", ";font-size:14px;overflow-wrap:break-word;line-height:", ";" ], O.mixins.reset("block"), (0, 
-    O.pick)({
-        enterprise: O.variables.lineHeight,
-        prisma: "20px"
-    }));
-    var Z = h().div.withConfig({
+    })([ "", ";font-size:14px;overflow-wrap:break-word;line-height:", ";" ], w.mixins.reset("block"), w.variables.lineHeight);
+    var te = x().div.withConfig({
         displayName: "HeaderStyles__StyledButtonsWrapper",
         componentId: "sc-1y722ut-5"
-    })([ "", ";position:absolute;top:", ";right:", ";bottom:50%;", " max-height:35px;transform-origin:bottom right;transform:rotate(-90deg) translateX(100%);" ], O.mixins.reset("block"), (0, 
-    O.pick)({
+    })([ "", ";position:absolute;top:", ";right:", ";bottom:50%;", " max-height:35px;transform-origin:bottom right;transform:rotate(-90deg) translateX(100%);" ], w.mixins.reset("block"), (0, 
+    w.pick)({
         enterprise: 0,
         prisma: {
             comfortable: "-2px",
             compact: "-6px"
         }
-    }), (0, O.pick)({
+    }), (0, w.pick)({
         enterprise: 0,
         prisma: {
             comfortable: "-2px",
             compact: "-6px"
         }
-    }), (0, O.pick)({
+    }), (0, w.pick)({
         prisma: {
-            comfortable: (0, v.css)([ "min-height:35px;" ]),
-            compact: (0, v.css)([ "min-height:30px;" ])
+            comfortable: (0, g.css)([ "min-height:35px;" ]),
+            compact: (0, g.css)([ "min-height:30px;" ])
         }
     }));
-    var ee = h().div.withConfig({
+    var re = x().div.withConfig({
         displayName: "HeaderStyles__StyledClose",
         componentId: "sc-1y722ut-6"
-    })([ "", ";position:absolute;right:0;top:0;transform:rotate(90deg) translate(-50%,-50%);" ], O.mixins.reset("block"));
+    })([ "", ";position:absolute;right:0;top:0;transform:rotate(90deg) translate(-50%,-50%);" ], w.mixins.reset("block"));
     // CONCATENATED MODULE: ./src/Modal/Header.tsx
-    function te() {
-        te = Object.assign || function(e) {
+    function ne() {
+        ne = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -415,11 +412,11 @@
             }
             return e;
         };
-        return te.apply(this, arguments);
+        return ne.apply(this, arguments);
     }
-    function re(e, t) {
+    function oe(e, t) {
         if (e == null) return {};
-        var r = ne(e, t);
+        var r = ie(e, t);
         var n, o;
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
@@ -432,7 +429,7 @@
         }
         return r;
     }
-    function ne(e, t) {
+    function ie(e, t) {
         if (e == null) return {};
         var r = {};
         var n = Object.keys(e);
@@ -444,7 +441,7 @@
         }
         return r;
     }
-    var oe = {
+    var ae = {
         children: i().node,
         icon: i().node,
         onRequestClose: i().func,
@@ -453,43 +450,63 @@
     };
     /**
  * A styled container for `Modal` header content.
- */    function ie(e) {
-        var t = e.children, o = e.icon, i = e.onRequestClose, a = e.subtitle, l = e.title, c = re(e, [ "children", "icon", "onRequestClose", "subtitle", "title" ]);
+ */    function le(e) {
+        var t = e.children, o = e.icon, i = e.onRequestClose, a = e.subtitle, l = e.title, c = oe(e, [ "children", "icon", "onRequestClose", "subtitle", "title" ]);
         // @docs-props-type StepPropsBase
-                var s = (0, r.useContext)(H), u = s.titleId, p = s.divider;
-        var f = p === "both" || p === "header";
+                var s = (0, r.useContext)(z), u = s.titleId, p = s.subtitleId, f = s.divider;
+        var d = f === "both" || f === "header";
         
-        return n().createElement(n().Fragment, null,  n().createElement(V, te({
+        return n().createElement(n().Fragment, null,  n().createElement(J, ne({
             $close: !!i,
             "data-test": "header"
-        }, c), o &&  n().createElement(J, null, o), l ?  n().createElement(G, null, l &&  n().createElement(Q, {
+        }, c), o &&  n().createElement(Y, null, o), l ?  n().createElement(Q, null, l &&  n().createElement(Z, {
             id: u,
             "data-test": "title"
-        }, l), a &&  n().createElement(Y, {
+        }, l), a &&  n().createElement(ee, {
+            id: p,
             "data-test": "subtitle"
-        }, a)) : t, i &&  n().createElement(Z, null, i &&  n().createElement(ee, null,  n().createElement(W(), {
+        }, a)) : t, i &&  n().createElement(te, null, i &&  n().createElement(re, null,  n().createElement(G(), {
             onClick: i,
             "data-test": "close"
-        })))), f &&  n().createElement(R(), {
+        })))), d &&  n().createElement(B(), {
             "aria-hidden": true
         }));
     }
-    ie.propTypes = oe;
-    /* harmony default export */    const ae = ie;
+    le.propTypes = ae;
+    /* harmony default export */    const ce = le;
     // CONCATENATED MODULE: external "react-spring"
-    const le = require("react-spring");
+    const se = require("react-spring");
     // CONCATENATED MODULE: ./src/Modal/ModalStyles.ts
-    var ce = h()(le.animated.div).withConfig({
+    var ue = x()(se.animated.div).withConfig({
         displayName: "ModalStyles__Styled",
         componentId: "sc-5fn8ds-0"
-    })([ "", ";flex-direction:column;position:fixed;left:50%;transform:translateX(-50%);z-index:", ";", "" ], O.mixins.reset("flex"), O.variables.zindexModal, (0, 
-    O.pick)({
-        enterprise: (0, v.css)([ "box-shadow:0 1px 5px ", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);" ], O.variables.black, O.variables.spacing, O.variables.spacing),
-        prisma: (0, v.css)([ "box-shadow:", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);border-radius:", ";overflow:hidden;" ], O.variables.modalShadow, O.variables.spacingXLarge, O.variables.spacingXLarge, O.variables.borderRadius)
+    })([ "", ";flex-direction:column;position:fixed;left:50%;transform:translateX(-50%);z-index:", ";", "" ], w.mixins.reset("flex"), w.variables.zindexModal, (0, 
+    w.pick)({
+        enterprise: (0, g.css)([ "box-shadow:0 1px 5px ", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);" ], w.variables.black, w.variables.spacing, w.variables.spacing),
+        prisma: (0, g.css)([ "box-shadow:", ";max-height:calc(100vh - ", " * 4);max-width:calc(100vw - ", " * 4);border-radius:", ";overflow:hidden;" ], w.variables.modalShadow, w.variables.spacingXLarge, w.variables.spacingXLarge, w.variables.borderRadius)
     }));
+    // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
+    /**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+    function pe(e, t) {
+        if (e) {
+            if (typeof e === "function") {
+                e(t);
+            } else {
+                // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+                // the intention here is to signal "we will take care of setting 'current', not you".
+                e.current = t;
+ // eslint-disable-line no-param-reassign
+                        }
+        }
+    }
     // CONCATENATED MODULE: ./src/Modal/Modal.tsx
-    function se() {
-        se = Object.assign || function(e) {
+    function fe() {
+        fe = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var r = arguments[t];
                 for (var n in r) {
@@ -500,36 +517,36 @@
             }
             return e;
         };
-        return se.apply(this, arguments);
+        return fe.apply(this, arguments);
     }
-    function ue(e) {
-        return ye(e) || de(e) || fe(e) || pe();
+    function de(e) {
+        return ve(e) || me(e) || be(e) || ye();
     }
-    function pe() {
+    function ye() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function fe(e, t) {
+    function be(e, t) {
         if (!e) return;
-        if (typeof e === "string") return be(e, t);
+        if (typeof e === "string") return he(e, t);
         var r = Object.prototype.toString.call(e).slice(8, -1);
         if (r === "Object" && e.constructor) r = e.constructor.name;
         if (r === "Map" || r === "Set") return Array.from(e);
-        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return be(e, t);
+        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return he(e, t);
     }
-    function de(e) {
+    function me(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
-    function ye(e) {
-        if (Array.isArray(e)) return be(e);
+    function ve(e) {
+        if (Array.isArray(e)) return he(e);
     }
-    function be(e, t) {
+    function he(e, t) {
         if (t == null || t > e.length) t = e.length;
         for (var r = 0, n = new Array(t); r < t; r++) {
             n[r] = e[r];
         }
         return n;
     }
-    function me(e, t) {
+    function ge(e, t) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -540,42 +557,42 @@
         }
         return r;
     }
-    function ve(e) {
+    function xe(e) {
         for (var t = 1; t < arguments.length; t++) {
             var r = arguments[t] != null ? arguments[t] : {};
             if (t % 2) {
-                me(Object(r), true).forEach((function(t) {
-                    _e(e, t, r[t]);
+                ge(Object(r), true).forEach((function(t) {
+                    Te(e, t, r[t]);
                 }));
             } else if (Object.getOwnPropertyDescriptors) {
                 Object.defineProperties(e, Object.getOwnPropertyDescriptors(r));
             } else {
-                me(Object(r)).forEach((function(t) {
+                ge(Object(r)).forEach((function(t) {
                     Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
                 }));
             }
         }
         return e;
     }
-    function he(e) {
+    function Oe(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            he = function e(t) {
+            Oe = function e(t) {
                 return typeof t;
             };
         } else {
-            he = function e(t) {
+            Oe = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return he(e);
+        return Oe(e);
     }
-    function ge(e, t) {
+    function Se(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function xe(e, t) {
+    function we(e, t) {
         for (var r = 0; r < t.length; r++) {
             var n = t[r];
             n.enumerable = n.enumerable || false;
@@ -584,12 +601,12 @@
             Object.defineProperty(e, n.key, n);
         }
     }
-    function Oe(e, t, r) {
-        if (t) xe(e.prototype, t);
-        if (r) xe(e, r);
+    function je(e, t, r) {
+        if (t) we(e.prototype, t);
+        if (r) we(e, r);
         return e;
     }
-    function we(e, t) {
+    function ke(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -600,41 +617,41 @@
                 configurable: true
             }
         });
-        if (t) Se(e, t);
+        if (t) Ie(e, t);
     }
-    function Se(e, t) {
-        Se = Object.setPrototypeOf || function e(t, r) {
+    function Ie(e, t) {
+        Ie = Object.setPrototypeOf || function e(t, r) {
             t.__proto__ = r;
             return t;
         };
-        return Se(e, t);
+        return Ie(e, t);
     }
-    function ke(e) {
-        var t = Ie();
+    function Ce(e) {
+        var t = Ee();
         return function r() {
-            var n = Pe(e), o;
+            var n = Me(e), o;
             if (t) {
-                var i = Pe(this).constructor;
+                var i = Me(this).constructor;
                 o = Reflect.construct(n, arguments, i);
             } else {
                 o = n.apply(this, arguments);
             }
-            return je(this, o);
+            return Pe(this, o);
         };
     }
-    function je(e, t) {
-        if (t && (he(t) === "object" || typeof t === "function")) {
+    function Pe(e, t) {
+        if (t && (Oe(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return Ce(e);
+        return _e(e);
     }
-    function Ce(e) {
+    function _e(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function Ie() {
+    function Ee() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -645,13 +662,13 @@
             return false;
         }
     }
-    function Pe(e) {
-        Pe = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function Me(e) {
+        Me = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return Pe(e);
+        return Me(e);
     }
-    function _e(e, t, r) {
+    function Te(e, t, r) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: r,
@@ -664,37 +681,39 @@
         }
         return e;
     }
-    /** @public */    var Ee = {
+    /** @public */    var qe = {
         children: i().node,
+        divider: i().oneOf([ "header", "footer", "both", "none" ]),
+        elementRef: i().oneOfType([ i().func, i().object ]),
         initialFocus: i().oneOfType([ i().object, i().oneOf([ "first", "container" ]) ]),
         onRequestClose: i().func,
-        open: i().bool,
-        divider: i().oneOf([ "header", "footer", "both", "none" ])
+        open: i().bool
     };
-    var Te = {
+    var De = {
+        divider: "both",
         initialFocus: "first",
-        open: false,
-        divider: "both"
+        open: false
     };
-    var Me =  function(e) {
-        we(o, e);
-        var t = ke(o);
+    var Fe =  function(e) {
+        ke(o, e);
+        var t = Ce(o);
         // @docs-props-type ModalPropsBase
         // this timeout ensures that the Modal is finished rendering before setting the focus
                 function o(e) {
             var i;
-            ge(this, o);
+            Se(this, o);
             i = t.call(this, e);
-            _e(Ce(i), "el", null);
-            _e(Ce(i), "initialFocusTimeoutId", undefined);
-            _e(Ce(i), "initialFocus", null);
-            _e(Ce(i), "headerTitleId", void 0);
-            _e(Ce(i), "getDefaultMotionStyle", (function() {
+            Te(_e(i), "el", null);
+            Te(_e(i), "initialFocusTimeoutId", undefined);
+            Te(_e(i), "initialFocus", null);
+            Te(_e(i), "headerTitleId", void 0);
+            Te(_e(i), "headerSubtitleId", void 0);
+            Te(_e(i), "getDefaultMotionStyle", (function() {
                 return {
                     top: 0
                 };
             }));
-            _e(Ce(i), "getMotionStyle", (function() {
+            Te(_e(i), "getMotionStyle", (function() {
                 if (i.props.open) {
                     return {
                         top: 40
@@ -704,7 +723,7 @@
                     top: 0
                 };
             }));
-            _e(Ce(i), "handleInitialFocus", (function() {
+            Te(_e(i), "handleInitialFocus", (function() {
                 var e = i.props, t = e.initialFocus, r = e.open;
                 if (r) {
                     i.initialFocusTimeoutId = l()((function() {
@@ -717,11 +736,11 @@
                                 if (i.el) {
                                     /* eslint-disable prefer-destructuring */
                                     /* prefer-desturucting leads to harder-to-read syntax in this case */
-                                    e = (0, y.getSortedTabbableElements)(i.el)[0];
+                                    e = (0, m.getSortedTabbableElements)(i.el)[0];
                                     /* eslint-enable prefer-destructuring */                                }
                             } else if (t === "container") {
                                 e = i.el;
-                            } else if (he(t) === "object") {
+                            } else if (Oe(t) === "object") {
                                 e = t;
                             }
  // Typescript isn't happy with optional chaining here
@@ -736,46 +755,66 @@
                     clearTimeout(i.initialFocusTimeoutId);
                 }
             }));
-            _e(Ce(i), "handleModalMount", (function(e) {
+            Te(_e(i), "handleModalMount", (function(e) {
                 i.el = e;
+                pe(i.props.elementRef, e);
             }));
-            _e(Ce(i), "handleModalKeyDown", (function(e) {
+            Te(_e(i), "handleModalKeyDown", (function(e) {
                 if (i.el !== null) {
-                    (0, y.handleTab)(i.el, e.nativeEvent);
+                    (0, m.handleTab)(i.el, e.nativeEvent);
                 }
             }));
-            _e(Ce(i), "handleRequestClose", (function(e) {
+            Te(_e(i), "handleRequestClose", (function(e) {
                 var t, r;
                 i.initialFocus = null;
                 (t = (r = i.props).onRequestClose) === null || t === void 0 ? void 0 : t.call(r, e);
             }));
-            _e(Ce(i), "renderModal", (function(e) {
-                var t = i.props, a = t.style, l = t.children, c = t.divider;
-                var u = e.top, f = e.opacity;
-                var d = r.Children.toArray(l).filter(r.isValidElement);
+            Te(_e(i), "getProviderValue", p()((function(e) {
+                var t = e.titleId, r = e.subtitleId, n = e.divider;
+                return {
+                    titleId: t,
+                    subtitleId: r,
+                    divider: n
+                };
+            })));
+            Te(_e(i), "getModalStyles", p()((function(e) {
+                var t = e.opacity, r = e.style, n = e.top;
+                return xe(xe({}, r), {}, {
+                    opacity: t,
+                    top: n
+                });
+            })));
+            Te(_e(i), "renderModal", (function(e) {
+                var t = i.props, a = t.children, l = t.divider, c = t.style;
+                var u = e.top, p = e.opacity;
+                var f = r.Children.toArray(a).filter(r.isValidElement);
                 
-                return n().createElement(ce, se({
+                return n().createElement(ue, fe({
                     ref: i.handleModalMount,
                     "data-test": "modal",
-                    style: ve(ve({}, a), {}, {
-                        top: u,
-                        opacity: f
+                    style: i.getModalStyles({
+                        opacity: p,
+                        style: c,
+                        top: u
                     }),
                     tabIndex: -1,
                     onKeyDown: i.handleModalKeyDown,
                     role: "dialog",
-                    "aria-labelledby": i.headerTitleId
-                }, p()(i.props, [].concat(ue(s()(o.propTypes)), [ "style" ]))),  n().createElement(H.Provider, {
-                    value: {
+                    "aria-labelledby": i.headerTitleId,
+                    "aria-describedby": i.headerSubtitleId
+                }, d()(i.props, [].concat(de(s()(o.propTypes)), [ "style" ]))),  n().createElement(z.Provider, {
+                    value: i.getProviderValue({
                         titleId: i.headerTitleId,
-                        divider: c
-                    }
-                }, d));
+                        subtitleId: i.headerSubtitleId,
+                        divider: l
+                    })
+                }, f));
             }));
-            i.headerTitleId = (0, b.createDOMID)("titleId");
+            i.headerTitleId = (0, v.createDOMID)("titleId");
+            i.headerSubtitleId = (0, v.createDOMID)("subtitleId");
             return i;
         }
-        Oe(o, [ {
+        je(o, [ {
             key: "componentDidMount",
             value: function e() {
                 this.handleInitialFocus();
@@ -795,7 +834,7 @@
             key: "render",
             value: function e() {
                 
-                return n().createElement(d(), {
+                return n().createElement(b(), {
                     open: this.props.open,
                     getDefaultMotionStyle: this.getDefaultMotionStyle,
                     renderModal: this.renderModal,
@@ -806,12 +845,12 @@
         } ]);
         return o;
     }(r.Component);
-    _e(Me, "propTypes", Ee);
-    _e(Me, "defaultProps", Te);
-    _e(Me, "Header", ae);
-    _e(Me, "Body", F);
-    _e(Me, "Footer", K);
-    /* harmony default export */    const qe = Me;
+    Te(Fe, "propTypes", qe);
+    Te(Fe, "defaultProps", De);
+    Te(Fe, "Header", ce);
+    Te(Fe, "Body", R);
+    Te(Fe, "Footer", V);
+    /* harmony default export */    const Re = Fe;
     // CONCATENATED MODULE: ./src/Modal/index.ts
     module.exports = t;
     /******/})();