@splunk/react-ui 5.7.0 → 5.8.0

package/Drawer.js

@@ -0,0 +1,679 @@
+/******/ (() => {
+    // webpackBootstrap
+    /******/ "use strict";
+    /******/ // The require scope
+    /******/    var e = {};
+    /******/
+    /************************************************************************/
+    /******/ /* webpack/runtime/compat get default export */
+    /******/    (() => {
+        /******/ // getDefaultExport function for compatibility with non-harmony modules
+        /******/ e.n = t => {
+            /******/ var r = t && t.__esModule ? 
+            /******/ () => t["default"]
+            /******/ : () => t
+            /******/;
+            e.d(r, {
+                a: r
+            });
+            /******/            return r;
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/define property getters */
+    /******/    (() => {
+        /******/ // define getter functions for harmony exports
+        /******/ e.d = (t, r) => {
+            /******/ for (var n in r) {
+                /******/ if (e.o(r, n) && !e.o(t, n)) {
+                    /******/ Object.defineProperty(t, n, {
+                        enumerable: true,
+                        get: r[n]
+                    });
+                    /******/                }
+                /******/            }
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/hasOwnProperty shorthand */
+    /******/    (() => {
+        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/;
+    })();
+    /******/
+    /******/ /* webpack/runtime/make namespace object */
+    /******/    (() => {
+        /******/ // define __esModule on exports
+        /******/ e.r = e => {
+            /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
+                /******/ Object.defineProperty(e, Symbol.toStringTag, {
+                    value: "Module"
+                });
+                /******/            }
+            /******/            Object.defineProperty(e, "__esModule", {
+                value: true
+            });
+            /******/        };
+        /******/    })();
+    /******/
+    /************************************************************************/    var t = {};
+    // ESM COMPAT FLAG
+        e.r(t);
+    // EXPORTS
+        e.d(t, {
+        Body: () => /* reexport */ C,
+        Footer: () => /* reexport */ N,
+        Header: () => /* reexport */ se,
+        default: () => /* reexport */ Ie
+    });
+    // CONCATENATED MODULE: external "react"
+    const r = require("react");
+    var n =  e.n(r);
+    // CONCATENATED MODULE: external "prop-types"
+    const o = require("prop-types");
+    var i =  e.n(o);
+    // CONCATENATED MODULE: external "@splunk/react-ui/SidePanel"
+    const a = require("@splunk/react-ui/SidePanel");
+    var l =  e.n(a);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
+    const u = require("@splunk/ui-utils/id");
+    // CONCATENATED MODULE: external "@splunk/react-ui/ScrollContainerContext"
+    const c = require("@splunk/react-ui/ScrollContainerContext");
+    // CONCATENATED MODULE: external "styled-components"
+    const s = require("styled-components");
+    var f =  e.n(s);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const d = require("@splunk/themes");
+    // CONCATENATED MODULE: ./src/Drawer/BodyStyles.ts
+    var p = f().div.withConfig({
+        displayName: "BodyStyles__StyledBody",
+        componentId: "ev3g0n-0"
+    })([ "background-color:", ";padding:", " ", ";flex:auto;overflow:auto;" ], d.variables.backgroundColorDialog, d.variables.spacingMedium, d.variables.spacingXLarge);
+    // CONCATENATED MODULE: ./src/Drawer/Body.tsx
+    function y() {
+        return y = Object.assign ? Object.assign.bind() : function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+                }
+            }
+            return e;
+        }, y.apply(null, arguments);
+    }
+    function b(e, t) {
+        return O(e) || h(e, t) || m(e, t) || v();
+    }
+    function v() {
+        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 m(e, t) {
+        if (e) {
+            if ("string" == typeof e) return g(e, t);
+            var r = {}.toString.call(e).slice(8, -1);
+            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? g(e, t) : void 0;
+        }
+    }
+    function g(e, t) {
+        (null == t || t > e.length) && (t = e.length);
+        for (var r = 0, n = Array(t); r < t; r++) {
+            n[r] = e[r];
+        }
+        return n;
+    }
+    function h(e, t) {
+        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != r) {
+            var n, o, i, a, l = [], u = !0, c = !1;
+            try {
+                if (i = (r = r.call(e)).next, 0 === t) {
+                    if (Object(r) !== r) return;
+                    u = !1;
+                } else for (;!(u = (n = i.call(r)).done) && (l.push(n.value), l.length !== t); u = !0) {
+                }
+            } catch (e) {
+                c = !0, o = e;
+            } finally {
+                try {
+                    if (!u && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                } finally {
+                    if (c) throw o;
+                }
+            }
+            return l;
+        }
+    }
+    function O(e) {
+        if (Array.isArray(e)) return e;
+    }
+    function w(e, t) {
+        if (null == e) return {};
+        var r, n, o = S(e, t);
+        if (Object.getOwnPropertySymbols) {
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            }
+        }
+        return o;
+    }
+    function S(e, t) {
+        if (null == e) return {};
+        var r = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (-1 !== t.indexOf(n)) continue;
+                r[n] = e[n];
+            }
+        }
+        return r;
+    }
+    var j = {
+        children: i().node
+    };
+    /**
+ * A styled container for `Drawer` body content.
+ */    function P(e) {
+        var t = e.children, o = w(e, [ "children" ]);
+        // @docs-props-type BodyPropsBase
+                var i = (0, r.useState)(), a = b(i, 2), l = a[0], u = a[1];
+        var s = (0, r.useCallback)((function(e) {
+            u(e);
+        }), []);
+        
+        return n().createElement(p, y({
+            "data-test": "body"
+        }, o, {
+            ref: s
+        }),  n().createElement(c.ScrollContainerProvider, {
+            value: l
+        }, t));
+    }
+    P.propTypes = j;
+    /* harmony default export */    const C = P;
+    // CONCATENATED MODULE: ./src/Drawer/DrawerContext.tsx
+    var x =  (0, r.createContext)({});
+    /* harmony default export */    const k = x;
+    // CONCATENATED MODULE: ./src/Drawer/DrawerStyles.ts
+    var E = f().div.withConfig({
+        displayName: "DrawerStyles__StyledDrawer",
+        componentId: "sc-17j5j7x-0"
+    })([ "", ";height:100%;flex-direction:column;width:", ";" ], d.mixins.reset("flex"), (function(e) {
+        return e.$width;
+    }));
+    // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
+    const I = require("@splunk/react-ui/Divider");
+    var _ =  e.n(I);
+    // CONCATENATED MODULE: ./src/Drawer/FooterStyles.ts
+    var q = f().div.withConfig({
+        displayName: "FooterStyles__StyledFooter",
+        componentId: "sc-1j4p3f9-0"
+    })([ "flex:0 0 auto;padding:", " ", ";background-color:", ";& >:is(button,a){min-width:80px;}", "" ], d.variables.spacingLarge, d.variables.spacingXLarge, d.variables.backgroundColorDialog, (0, 
+    d.pickVariant)("$layout", {
+        auto: (0, s.css)([ "display:flex;align-items:center;justify-content:flex-end;gap:", ";& > *:is(button,a,*){flex:0 0 auto;}& >:not(button,a){margin-right:auto;}&:has(:is(button,a) +:is(button,a) +:is(button,a)) >:is(button,a):first-child{margin-right:auto;}" ], d.variables.spacingMedium),
+        none: (0, s.css)([ "text-align:right;" ])
+    }));
+    // CONCATENATED MODULE: ./src/Drawer/Footer.tsx
+    function T() {
+        return T = Object.assign ? Object.assign.bind() : function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+                }
+            }
+            return e;
+        }, T.apply(null, arguments);
+    }
+    function A(e, t) {
+        if (null == e) return {};
+        var r, n, o = D(e, t);
+        if (Object.getOwnPropertySymbols) {
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            }
+        }
+        return o;
+    }
+    function D(e, t) {
+        if (null == e) return {};
+        var r = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (-1 !== t.indexOf(n)) continue;
+                r[n] = e[n];
+            }
+        }
+        return r;
+    }
+    var F = {
+        children: i().node,
+        layout: i().oneOf([ "auto", "none" ])
+    };
+    /**
+ * A styled container for `Drawer` footer content.
+ */    function R(e) {
+        var t = e.children, o = e.layout, i = o === void 0 ? "auto" : o, a = A(e, [ "children", "layout" ]);
+        // @docs-props-type FooterPropsBase
+                var l = (0, r.useContext)(k), u = l.divider;
+        var c = u === "both" || u === "footer";
+        
+        return n().createElement(n().Fragment, null, c &&  n().createElement(_(), {
+            appearance: "weak",
+            decorative: true
+        }),  n().createElement(q, T({
+            "data-test": "footer",
+            $layout: i
+        }, a), t));
+    }
+    R.propTypes = F;
+    /* harmony default export */    const N = R;
+    // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
+    const M = require("@splunk/react-icons/Cross");
+    var B =  e.n(M);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const H = require("@splunk/ui-utils/i18n");
+    // CONCATENATED MODULE: external "@splunk/react-ui/Button"
+    const L = require("@splunk/react-ui/Button");
+    var $ =  e.n(L);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Heading"
+    const z = require("@splunk/react-ui/Heading");
+    var V =  e.n(z);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Paragraph"
+    const X = require("@splunk/react-ui/Paragraph");
+    var U =  e.n(X);
+    // CONCATENATED MODULE: ./src/Drawer/HeaderStyles.ts
+    var W = f().div.withConfig({
+        displayName: "HeaderStyles__StyledHeader",
+        componentId: "sc-1r9zna0-0"
+    })([ "", ";flex:0 0 auto;position:relative;background-color:", ";padding:", " ", ";gap:", ";" ], d.mixins.reset("flex"), d.variables.backgroundColorDialog, d.variables.spacingLarge, d.variables.spacingXLarge, d.variables.spacingMedium);
+    var G = f().div.withConfig({
+        displayName: "HeaderStyles__StyledTitleWrapper",
+        componentId: "sc-1r9zna0-1"
+    })([ "", ";flex-direction:column;align-self:center;margin-right:auto;" ], d.mixins.reset("flex"));
+    var J = f()(V()).withConfig({
+        displayName: "HeaderStyles__StyledTitle",
+        componentId: "sc-1r9zna0-2"
+    })([ "margin:0;overflow-wrap:break-word;" ]);
+    var K = f()(U()).withConfig({
+        displayName: "HeaderStyles__StyledSubtitle",
+        componentId: "sc-1r9zna0-3"
+    })([ "overflow-wrap:break-word;" ]);
+    var Q = f()($()).withConfig({
+        displayName: "HeaderStyles__StyledButton",
+        componentId: "sc-1r9zna0-4"
+    })([ "flex-shrink:0;flex-grow:0;align-self:flex-start;margin-left:auto;" ]);
+    // CONCATENATED MODULE: ./src/Drawer/Header.tsx
+    function Y(e) {
+        "@babel/helpers - typeof";
+        return Y = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return typeof e;
+        } : function(e) {
+            return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+        }, Y(e);
+    }
+    function Z() {
+        return Z = Object.assign ? Object.assign.bind() : function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+                }
+            }
+            return e;
+        }, Z.apply(null, arguments);
+    }
+    function ee(e, t) {
+        var r = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var n = Object.getOwnPropertySymbols(e);
+            t && (n = n.filter((function(t) {
+                return Object.getOwnPropertyDescriptor(e, t).enumerable;
+            }))), r.push.apply(r, n);
+        }
+        return r;
+    }
+    function te(e) {
+        for (var t = 1; t < arguments.length; t++) {
+            var r = null != arguments[t] ? arguments[t] : {};
+            t % 2 ? ee(Object(r), !0).forEach((function(t) {
+                re(e, t, r[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : ee(Object(r)).forEach((function(t) {
+                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
+            }));
+        }
+        return e;
+    }
+    function re(e, t, r) {
+        return (t = ne(t)) in e ? Object.defineProperty(e, t, {
+            value: r,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[t] = r, e;
+    }
+    function ne(e) {
+        var t = oe(e, "string");
+        return "symbol" == Y(t) ? t : t + "";
+    }
+    function oe(e, t) {
+        if ("object" != Y(e) || !e) return e;
+        var r = e[Symbol.toPrimitive];
+        if (void 0 !== r) {
+            var n = r.call(e, t || "default");
+            if ("object" != Y(n)) return n;
+            throw new TypeError("@@toPrimitive must return a primitive value.");
+        }
+        return ("string" === t ? String : Number)(e);
+    }
+    function ie(e, t) {
+        if (null == e) return {};
+        var r, n, o = ae(e, t);
+        if (Object.getOwnPropertySymbols) {
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            }
+        }
+        return o;
+    }
+    function ae(e, t) {
+        if (null == e) return {};
+        var r = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (-1 !== t.indexOf(n)) continue;
+                r[n] = e[n];
+            }
+        }
+        return r;
+    }
+    var le = {
+        children: i().node,
+        icon: i().node,
+        hideCloseButton: i().bool,
+        title: i().string,
+        subtitle: i().node
+    };
+    var ue =  n().createElement(B(), {
+        width: "20px",
+        height: "20px"
+    });
+    /**
+ * A styled container for `Drawer` header content.
+ */    function ce(e) {
+        var t = e.children, o = e.icon, i = e.hideCloseButton, a = i === void 0 ? false : i, l = e.title, u = e.subtitle, c = ie(e, [ "children", "icon", "hideCloseButton", "title", "subtitle" ]);
+        // @docs-props-type HeaderPropsBase
+                var s = (0, r.useContext)(k), f = s.titleId, d = s.subtitleId, p = s.divider, y = s.onRequestClose, b = s.onSubtitleRender, v = s.onTitleRender;
+        var m = p === "both" || p === "header";
+        // Notify Drawer component when subtitle presence changes
+                (0, r.useEffect)((function() {
+            b === null || b === void 0 ? void 0 : b(!!l && !!u);
+            return function() {
+                b === null || b === void 0 ? void 0 : b(false);
+            };
+        }), [ l, u, b ]);
+        // Notify Drawer component when title presence changes
+                (0, r.useEffect)((function() {
+            v === null || v === void 0 ? void 0 : v(!!l);
+            return function() {
+                v === null || v === void 0 ? void 0 : v(false);
+            };
+        }), [ l, v ]);
+        var g =  (0, r.isValidElement)(o) ?  (0, r.cloneElement)(o, te(te({}, o.props.width ? {} : {
+            width: "48px"
+        }), o.props.height ? {} : {
+            height: "48px"
+        })) : o;
+        var h = (0, r.useCallback)((function(e) {
+            y === null || y === void 0 ? void 0 : y({
+                event: e,
+                reason: "clickCloseButton"
+            });
+        }), [ y ]);
+        
+        return n().createElement(n().Fragment, null,  n().createElement(W, Z({
+            "data-test": "header"
+        }, c), g, l ?  n().createElement(G, null, l &&  n().createElement(J, {
+            level: 2,
+            variant: "title3",
+            id: f,
+            "data-test": "title"
+        }, l), u &&  n().createElement(K, {
+            id: d,
+            "data-test": "subtitle"
+        }, u)) : t, !a && y &&  n().createElement(Q, {
+            appearance: "subtle",
+            "aria-label": (0, H._)("Close"),
+            "data-test": "close",
+            icon: ue,
+            onClick: h
+        })), m &&  n().createElement(_(), {
+            appearance: "weak",
+            decorative: true
+        }));
+    }
+    ce.propTypes = le;
+    /* harmony default export */    const se = ce;
+    // CONCATENATED MODULE: ./src/Drawer/Drawer.tsx
+    function fe(e) {
+        "@babel/helpers - typeof";
+        return fe = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return typeof e;
+        } : function(e) {
+            return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+        }, fe(e);
+    }
+    function de() {
+        return de = Object.assign ? Object.assign.bind() : function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+                }
+            }
+            return e;
+        }, de.apply(null, arguments);
+    }
+    function pe(e, t) {
+        var r = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var n = Object.getOwnPropertySymbols(e);
+            t && (n = n.filter((function(t) {
+                return Object.getOwnPropertyDescriptor(e, t).enumerable;
+            }))), r.push.apply(r, n);
+        }
+        return r;
+    }
+    function ye(e) {
+        for (var t = 1; t < arguments.length; t++) {
+            var r = null != arguments[t] ? arguments[t] : {};
+            t % 2 ? pe(Object(r), !0).forEach((function(t) {
+                be(e, t, r[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : pe(Object(r)).forEach((function(t) {
+                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
+            }));
+        }
+        return e;
+    }
+    function be(e, t, r) {
+        return (t = ve(t)) in e ? Object.defineProperty(e, t, {
+            value: r,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[t] = r, e;
+    }
+    function ve(e) {
+        var t = me(e, "string");
+        return "symbol" == fe(t) ? t : t + "";
+    }
+    function me(e, t) {
+        if ("object" != fe(e) || !e) return e;
+        var r = e[Symbol.toPrimitive];
+        if (void 0 !== r) {
+            var n = r.call(e, t || "default");
+            if ("object" != fe(n)) return n;
+            throw new TypeError("@@toPrimitive must return a primitive value.");
+        }
+        return ("string" === t ? String : Number)(e);
+    }
+    function ge(e, t) {
+        return je(e) || Se(e, t) || Oe(e, t) || he();
+    }
+    function he() {
+        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 Oe(e, t) {
+        if (e) {
+            if ("string" == typeof e) return we(e, t);
+            var r = {}.toString.call(e).slice(8, -1);
+            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? we(e, t) : void 0;
+        }
+    }
+    function we(e, t) {
+        (null == t || t > e.length) && (t = e.length);
+        for (var r = 0, n = Array(t); r < t; r++) {
+            n[r] = e[r];
+        }
+        return n;
+    }
+    function Se(e, t) {
+        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != r) {
+            var n, o, i, a, l = [], u = !0, c = !1;
+            try {
+                if (i = (r = r.call(e)).next, 0 === t) {
+                    if (Object(r) !== r) return;
+                    u = !1;
+                } else for (;!(u = (n = i.call(r)).done) && (l.push(n.value), l.length !== t); u = !0) {
+                }
+            } catch (e) {
+                c = !0, o = e;
+            } finally {
+                try {
+                    if (!u && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                } finally {
+                    if (c) throw o;
+                }
+            }
+            return l;
+        }
+    }
+    function je(e) {
+        if (Array.isArray(e)) return e;
+    }
+    function Pe(e, t) {
+        if (null == e) return {};
+        var r, n, o = Ce(e, t);
+        if (Object.getOwnPropertySymbols) {
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            }
+        }
+        return o;
+    }
+    function Ce(e, t) {
+        if (null == e) return {};
+        var r = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (-1 !== t.indexOf(n)) continue;
+                r[n] = e[n];
+            }
+        }
+        return r;
+    }
+    // display: block is needed to ensure the drawer takes up the full height
+        var xe = {
+        height: "100%",
+        display: "block"
+    };
+    /** @public */    var ke = {
+        children: i().node,
+        closeOnClickAway: i().bool,
+        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,
+        position: i().oneOf([ "page", "container", "inline" ]),
+        returnFocus: i().oneOfType([ i().func, i().object ]),
+        width: i().string
+    };
+    function Ee(e) {
+        var t = e.children, o = e.closeOnClickAway, i = o === void 0 ? false : o, a = e.elementRef, c = e.divider, s = c === void 0 ? "both" : c, f = e.initialFocus, d = f === void 0 ? "first" : f, p = e.onRequestClose, y = e.open, b = y === void 0 ? false : y, v = e.position, m = v === void 0 ? "page" : v, g = e.returnFocus, h = e.width, O = h === void 0 ? "300px" : h, w = e.className, S = Pe(e, [ "children", "closeOnClickAway", "elementRef", "divider", "initialFocus", "onRequestClose", "open", "position", "returnFocus", "width", "className" ]);
+        // @docs-props-type DrawerPropsBase
+                var j = (0, r.useState)((function() {
+            return {
+                headerTitleId: (0, u.createDOMID)("titleId"),
+                headerSubtitleId: (0, u.createDOMID)("subtitleId")
+            };
+        })), P = ge(j, 1), C = P[0], x = C.headerTitleId, I = C.headerSubtitleId;
+        var _ = (0, r.useState)(false), q = ge(_, 2), T = q[0], A = q[1];
+        var D = (0, r.useState)(false), F = ge(D, 2), R = F[0], N = F[1];
+        var M = (0, r.useCallback)((function(e) {
+            // Filter out clickAway events when closeOnClickAway is false
+            if (e.reason === "clickAway" && !i) {
+                return;
+            }
+            p === null || p === void 0 ? void 0 : p(e);
+        }), [ p, i ]);
+        var B = (0, r.useMemo)((function() {
+            return {
+                divider: s,
+                onRequestClose: p,
+                subtitleId: I,
+                titleId: x,
+                onSubtitleRender: A,
+                onTitleRender: N
+            };
+        }), [ s, p, x, I, A, N ]);
+        var H = r.Children.toArray(t).filter(r.isValidElement);
+        // SidePanel uses a discriminated union: onRequestClose and useLayerForClickAway
+        // are only valid when position is 'page'. TypeScript can't narrow through conditional
+        // spreads, so we use a type assertion for non-page layouts.
+        // Always enable the scrim (useLayerForClickAway: true) to block interaction with
+        // underlying content. The closeOnClickAway behavior is handled in handleSidePanelRequestClose.
+                var L = m === "page" ? {
+            onRequestClose: M,
+            useLayerForClickAway: true
+        } : {};
+        // Cast needed because SidePanel uses a discriminated union on dockLayout.
+        // TypeScript can't narrow the union through the conditional pageLayoutProps spread,
+        // but we've correctly separated the page-only props above.
+                var $ = ye(ye(ye(ye({
+            elementRef: a,
+            open: b,
+            dockLayout: m
+        }, R && {
+            "aria-labelledby": x
+        }), T && {
+            "aria-describedby": I
+        }), {}, {
+            innerStyle: ye(ye({}, xe), {}, {
+                width: O
+            }),
+            innerClassName: w,
+            initialFocus: d,
+            returnFocus: g
+        }, L), S);
+        
+        return n().createElement(l(), de({
+            "data-test": "drawer"
+        }, $),  n().createElement(E, {
+            $width: O
+        },  n().createElement(k.Provider, {
+            value: B
+        }, H)));
+    }
+    Ee.propTypes = ke;
+    Ee.Header = se;
+    Ee.Footer = N;
+    Ee.Body = C;
+    /* harmony default export */    const Ie = Ee;
+    // CONCATENATED MODULE: ./src/Drawer/index.ts
+    module.exports = t;
+    /******/})();

package/DualListbox.js

@@ -1408,7 +1408,7 @@
         
         return n().createElement(O, xe({
             "data-test": "dual-listbox",
-            elementRef: h,
+            ref: h,
             $inline: y ? false : C,
             $fill: y
         }, E),  n().createElement(m.Provider, {