@mongodb-js/compass-components 1.42.0 → 1.44.0

package/lib/components/drawer/drawer-toolbar-context/drawer-toolbar-context.js

@@ -0,0 +1,85 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDrawerToolbarContext = exports.DrawerToolbarProvider = exports.DrawerToolbarContext = void 0;
+const react_1 = __importStar(require("react"));
+const drawer_styles_1 = require("../drawer/drawer.styles");
+exports.DrawerToolbarContext = (0, react_1.createContext)(null);
+const DrawerToolbarProvider = ({ children, data, }) => {
+    const [content, setContent] = (0, react_1.useState)(undefined);
+    const [isDrawerOpen, setIsDrawerOpen] = (0, react_1.useState)(false);
+    const openDrawer = (0, react_1.useCallback)((id) => {
+        const activeDrawerContent = data.find((item) => item?.id === id && item?.content);
+        if (activeDrawerContent) {
+            setIsDrawerOpen(true);
+            setContent((prev) => {
+                if (prev?.id === id)
+                    return prev;
+                return activeDrawerContent;
+            });
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error(`No matching item found in the toolbar for the provided id: ${id}. Please verify that the id is correct.`);
+        }
+    }, [setContent, data, setIsDrawerOpen]);
+    const closeDrawer = (0, react_1.useCallback)(() => {
+        // Delay the removal of the content to allow the drawer to close before removing the content
+        setTimeout(() => {
+            setContent(undefined);
+        }, drawer_styles_1.drawerTransitionDuration);
+        setIsDrawerOpen(false);
+    }, [setContent]);
+    const getActiveDrawerContent = (0, react_1.useCallback)(() => {
+        return content;
+    }, [content]);
+    const value = (0, react_1.useMemo)(() => ({
+        openDrawer,
+        closeDrawer,
+        getActiveDrawerContent,
+        isDrawerOpen,
+    }), [openDrawer, closeDrawer, getActiveDrawerContent, isDrawerOpen]);
+    return (react_1.default.createElement(exports.DrawerToolbarContext.Provider, { value: value }, children));
+};
+exports.DrawerToolbarProvider = DrawerToolbarProvider;
+const useDrawerToolbarContext = () => {
+    const context = (0, react_1.useContext)(exports.DrawerToolbarContext);
+    if (!context) {
+        throw new Error('useDrawerToolbarContext must be used within a DrawerToolbarProvider');
+    }
+    return context;
+};
+exports.useDrawerToolbarContext = useDrawerToolbarContext;
+//# sourceMappingURL=drawer-toolbar-context.js.map

package/lib/components/drawer/drawer-toolbar-context/drawer-toolbar-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-toolbar-context.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-context/drawer-toolbar-context.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAMe;AAEf,2DAAmE;AAStD,QAAA,oBAAoB,GAC/B,IAAA,qBAAa,EAAkC,IAAI,CAAC,CAAC;AAEhD,MAAM,qBAAqB,GAAG,CAAC,EACpC,QAAQ,EACR,IAAI,GACuB,EAAE,EAAE;IAC/B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAc,SAAS,CAAC,CAAC;IAC/D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEjE,MAAM,UAAU,GAAG,IAAA,mBAAW,EAC5B,CAAC,EAAU,EAAE,EAAE;QACb,MAAM,mBAAmB,GAAG,IAAI,CAAC,IAAI,CACnC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,IAAI,EAAE,OAAO,CAC3C,CAAC;QAEF,IAAI,mBAAmB,EAAE,CAAC;YACxB,eAAe,CAAC,IAAI,CAAC,CAAC;YACtB,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE;gBAClB,IAAI,IAAI,EAAE,EAAE,KAAK,EAAE;oBAAE,OAAO,IAAI,CAAC;gBACjC,OAAO,mBAAmB,CAAC;YAC7B,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,sCAAsC;YACtC,OAAO,CAAC,KAAK,CACX,8DAA8D,EAAE,yCAAyC,CAC1G,CAAC;QACJ,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,IAAI,EAAE,eAAe,CAAC,CACpC,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACnC,4FAA4F;QAC5F,UAAU,CAAC,GAAG,EAAE;YACd,UAAU,CAAC,SAAS,CAAC,CAAC;QACxB,CAAC,EAAE,wCAAwB,CAAC,CAAC;QAC7B,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,sBAAsB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC9C,OAAO,OAAO,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,KAAK,GAAG,IAAA,eAAO,EACnB,GAAG,EAAE,CAAC,CAAC;QACL,UAAU;QACV,WAAW;QACX,sBAAsB;QACtB,YAAY;KACb,CAAC,EACF,CAAC,UAAU,EAAE,WAAW,EAAE,sBAAsB,EAAE,YAAY,CAAC,CAChE,CAAC;IAEF,OAAO,CACL,8BAAC,4BAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACxC,QAAQ,CACqB,CACjC,CAAC;AACJ,CAAC,CAAC;AAxDW,QAAA,qBAAqB,yBAwDhC;AAEK,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,4BAAoB,CAAC,CAAC;IAEjD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,qEAAqE,CACtE,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAVW,QAAA,uBAAuB,2BAUlC"}

package/lib/components/drawer/drawer-toolbar-context/drawer-toolbar-context.types.d.ts

@@ -0,0 +1,37 @@
+import type { LayoutData } from '../drawer-toolbar-layout';
+export type ContextData = LayoutData | undefined;
+export type DataId = LayoutData['id'];
+export interface DrawerToolbarContextType {
+    /**
+     * This function is used to open the drawer with the given data.
+     * @param id - The id of the drawer to open
+     * @returns void
+     */
+    openDrawer: (id: DataId) => void;
+    /**
+     * This function is used to clear the active drawer data and indicates that the drawer should close.
+     * @returns void
+     */
+    closeDrawer: () => void;
+    /**
+     * Indicates whether the drawer should be closed. Used to manage transition states.
+     * For example, during close animations, content should remain until the transition completes.
+     */
+    isDrawerOpen: boolean;
+    /**
+     * This function is used to get the active drawer content.
+     * @returns The active drawer data
+     */
+    getActiveDrawerContent: () => ContextData;
+}
+export interface DrawerToolbarProviderProps {
+    /**
+     * The children of the provider
+     */
+    children: React.ReactNode;
+    /**
+     * The data to be used in the drawer
+     */
+    data: Array<ContextData>;
+}
+//# sourceMappingURL=drawer-toolbar-context.types.d.ts.map

package/lib/components/drawer/drawer-toolbar-context/drawer-toolbar-context.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-toolbar-context.types.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-context/drawer-toolbar-context.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;AAEtC,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC;;;OAGG;IACH,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,sBAAsB,EAAE,MAAM,WAAW,CAAC;CAC3C;AAED,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;CAC1B"}

package/lib/components/drawer/drawer-toolbar-context/drawer-toolbar-context.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=drawer-toolbar-context.types.js.map

package/lib/components/drawer/drawer-toolbar-context/drawer-toolbar-context.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-toolbar-context.types.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-context/drawer-toolbar-context.types.ts"],"names":[],"mappings":""}

package/lib/components/drawer/drawer-toolbar-context/index.d.ts

@@ -0,0 +1,2 @@
+export { DrawerToolbarProvider, useDrawerToolbarContext, } from './drawer-toolbar-context';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/drawer/drawer-toolbar-context/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,0BAA0B,CAAC"}

package/lib/components/drawer/drawer-toolbar-context/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDrawerToolbarContext = exports.DrawerToolbarProvider = void 0;
+var drawer_toolbar_context_1 = require("./drawer-toolbar-context");
+Object.defineProperty(exports, "DrawerToolbarProvider", { enumerable: true, get: function () { return drawer_toolbar_context_1.DrawerToolbarProvider; } });
+Object.defineProperty(exports, "useDrawerToolbarContext", { enumerable: true, get: function () { return drawer_toolbar_context_1.useDrawerToolbarContext; } });
+//# sourceMappingURL=index.js.map

package/lib/components/drawer/drawer-toolbar-context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-context/index.ts"],"names":[],"mappings":";;;AAAA,mEAGkC;AAFhC,+HAAA,qBAAqB,OAAA;AACrB,iIAAA,uBAAuB,OAAA"}

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { DisplayMode } from '../drawer/drawer.types';
+import type { LayoutData } from './drawer-toolbar-layout.types';
+/**
+ * @internal
+ *
+ * DrawerToolbarLayoutContainer is a component that provides a layout for displaying content in a drawer with a toolbar.
+ * It manages the state of the drawer and toolbar, and renders the appropriate components based on the display mode.
+ */
+export declare const DrawerToolbarLayoutContainer: React.ForwardRefExoticComponent<{
+    onClose?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    displayMode?: DisplayMode | undefined;
+} & import("@leafygreen-ui/lib").DarkModeProps & import("@leafygreen-ui/lib").LgIdProps & {
+    toolbarData: Array<LayoutData>;
+    className?: string;
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=drawer-toolbar-layout-container.d.ts.map

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-toolbar-layout-container.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAOrD,OAAO,KAAK,EAEV,UAAU,EACX,MAAM,+BAA+B,CAAC;AAEvC;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B;;;;;;;wCA0FxC,CAAC"}

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerToolbarLayoutContainer = void 0;
+const react_1 = __importStar(require("react"));
+const toolbar_1 = require("../../toolbar");
+const drawer_1 = require("../drawer/drawer");
+const drawer_types_1 = require("../drawer/drawer.types");
+const drawer_toolbar_context_1 = require("../drawer-toolbar-context");
+const drawer_with_toolbar_wrapper_1 = require("../drawer-with-toolbar-wrapper");
+const layout_component_1 = require("../layout-component");
+const utils_1 = require("../utils");
+const drawer_toolbar_layout_styles_1 = require("./drawer-toolbar-layout.styles");
+/**
+ * @internal
+ *
+ * DrawerToolbarLayoutContainer is a component that provides a layout for displaying content in a drawer with a toolbar.
+ * It manages the state of the drawer and toolbar, and renders the appropriate components based on the display mode.
+ */
+exports.DrawerToolbarLayoutContainer = (0, react_1.forwardRef)(({ children, displayMode = drawer_types_1.DisplayMode.Overlay, toolbarData, onClose, 
+// darkMode: darkModeProp,
+'data-lgid': dataLgId = utils_1.DEFAULT_LGID_ROOT, ...rest }, forwardRef) => {
+    const { openDrawer, closeDrawer, getActiveDrawerContent, isDrawerOpen } = (0, drawer_toolbar_context_1.useDrawerToolbarContext)();
+    const { id, title, content } = getActiveDrawerContent() || {};
+    const lgIds = (0, utils_1.getLgIds)(dataLgId);
+    const hasData = toolbarData && toolbarData.length > 0;
+    const handleOnClose = (event) => {
+        onClose?.(event);
+        closeDrawer();
+    };
+    const handleIconClick = (event, id, onClick) => {
+        onClick?.(event);
+        openDrawer(id);
+    };
+    return (react_1.default.createElement(layout_component_1.LayoutComponent, { ...rest, ref: forwardRef, displayMode: displayMode, hasToolbar: hasData, isDrawerOpen: isDrawerOpen },
+        react_1.default.createElement("div", { className: drawer_toolbar_layout_styles_1.contentStyles }, children),
+        react_1.default.createElement(drawer_with_toolbar_wrapper_1.DrawerWithToolbarWrapper, { displayMode: displayMode, isDrawerOpen: isDrawerOpen },
+            react_1.default.createElement(toolbar_1.Toolbar, { "data-lgid": lgIds.toolbar, "data-testid": lgIds.toolbar }, toolbarData?.map((toolbarItem) => (react_1.default.createElement(toolbar_1.ToolbarIconButton, { key: toolbarItem.glyph, glyph: toolbarItem.glyph, label: toolbarItem.label, onClick: (event) => {
+                    if (!toolbarItem.content) {
+                        // If the toolbar item does not have content, we don't want to open/update/close the drawer
+                        // but we still want to call the onClick function if it exists. E.g. open a modal or perform an action
+                        toolbarItem.onClick?.(event);
+                        return;
+                    }
+                    return handleIconClick(event, toolbarItem.id, toolbarItem.onClick);
+                }, active: toolbarItem.id === id, disabled: toolbarItem.disabled })))),
+            react_1.default.createElement(drawer_1.Drawer, { displayMode: displayMode, open: isDrawerOpen, onClose: handleOnClose, title: title, "data-lgid": `${dataLgId}`, "data-testid": `${dataLgId}`, "aria-live": "polite", "aria-atomic": "true" }, content))));
+});
+exports.DrawerToolbarLayoutContainer.displayName = 'DrawerToolbarLayoutContainer';
+//# sourceMappingURL=drawer-toolbar-layout-container.js.map

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-toolbar-layout-container.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,2CAA2D;AAE3D,6CAA0C;AAC1C,yDAAqD;AACrD,sEAAoE;AACpE,gFAA0E;AAC1E,0DAAsD;AACtD,oCAAuD;AAEvD,iFAA+D;AAM/D;;;;;GAKG;AACU,QAAA,4BAA4B,GAAG,IAAA,kBAAU,EAIpD,CACE,EACE,QAAQ,EACR,WAAW,GAAG,0BAAW,CAAC,OAAO,EACjC,WAAW,EACX,OAAO;AACP,0BAA0B;AAC1B,WAAW,EAAE,QAAQ,GAAG,yBAAiB,EACzC,GAAG,IAAI,EAC2B,EACpC,UAAU,EACV,EAAE;IACF,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,sBAAsB,EAAE,YAAY,EAAE,GACrE,IAAA,gDAAuB,GAAE,CAAC;IAC5B,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,sBAAsB,EAAE,IAAI,EAAE,CAAC;IAC9D,MAAM,KAAK,GAAG,IAAA,gBAAQ,EAAC,QAAQ,CAAC,CAAC;IACjC,MAAM,OAAO,GAAG,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;IAEtD,MAAM,aAAa,GAAG,CAAC,KAA0C,EAAE,EAAE;QACnE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACjB,WAAW,EAAE,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CACtB,KAA0C,EAC1C,EAAoB,EACpB,OAA8D,EAC9D,EAAE;QACF,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACjB,UAAU,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,kCAAe,OACV,IAAI,EACR,GAAG,EAAE,UAAU,EACf,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,OAAO,EACnB,YAAY,EAAE,YAAY;QAE1B,uCAAK,SAAS,EAAE,4CAAa,IAAG,QAAQ,CAAO;QAC/C,8BAAC,sDAAwB,IACvB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY;YAE1B,8BAAC,iBAAO,iBAAY,KAAK,CAAC,OAAO,iBAAe,KAAK,CAAC,OAAO,IAC1D,WAAW,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CACjC,8BAAC,2BAAiB,IAChB,GAAG,EAAE,WAAW,CAAC,KAAK,EACtB,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,OAAO,EAAE,CAAC,KAA0C,EAAE,EAAE;oBACtD,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;wBACzB,2FAA2F;wBAC3F,sGAAsG;wBACtG,WAAW,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;wBAC7B,OAAO;oBACT,CAAC;oBAED,OAAO,eAAe,CACpB,KAAK,EACL,WAAW,CAAC,EAAE,EACd,WAAW,CAAC,OAAO,CACpB,CAAC;gBACJ,CAAC,EACD,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,EAAE,EAC7B,QAAQ,EAAE,WAAW,CAAC,QAAQ,GAC9B,CACH,CAAC,CACM;YACV,8BAAC,eAAM,IACL,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,YAAY,EAClB,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,KAAK,eACD,GAAG,QAAQ,EAAE,iBACX,GAAG,QAAQ,EAAE,eAChB,QAAQ,iBACN,MAAM,IAEjB,OAAO,CACD,CACgB,CACX,CACnB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oCAA4B,CAAC,WAAW,GAAG,8BAA8B,CAAC"}

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * @internal
+ *
+ * DrawerToolbarLayout is a component that provides a layout for displaying content in a drawer with a toolbar.
+ */
+export declare const DrawerToolbarLayout: React.ForwardRefExoticComponent<{
+    onClose?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    displayMode?: import("..").DisplayMode | undefined;
+} & import("@leafygreen-ui/lib").DarkModeProps & import("@leafygreen-ui/lib").LgIdProps & {
+    toolbarData: Array<import("./drawer-toolbar-layout.types").LayoutData>;
+    className?: string;
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=drawer-toolbar-layout.d.ts.map

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-toolbar-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;wCAoB/B,CAAC"}

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerToolbarLayout = void 0;
+const react_1 = __importStar(require("react"));
+const drawer_toolbar_context_1 = require("../drawer-toolbar-context");
+const drawer_toolbar_layout_container_1 = require("./drawer-toolbar-layout-container");
+/**
+ * @internal
+ *
+ * DrawerToolbarLayout is a component that provides a layout for displaying content in a drawer with a toolbar.
+ */
+exports.DrawerToolbarLayout = (0, react_1.forwardRef)(({ children, toolbarData, ...rest }, forwardRef) => {
+    return (react_1.default.createElement(drawer_toolbar_context_1.DrawerToolbarProvider, { data: toolbarData },
+        react_1.default.createElement(drawer_toolbar_layout_container_1.DrawerToolbarLayoutContainer, { ref: forwardRef, toolbarData: toolbarData, ...rest }, children)));
+});
+exports.DrawerToolbarLayout.displayName = 'DrawerToolbarLayout';
+//# sourceMappingURL=drawer-toolbar-layout.js.map

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-toolbar-layout.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,sEAAkE;AAGlE,uFAAiF;AAEjF;;;;GAIG;AACU,QAAA,mBAAmB,GAAG,IAAA,kBAAU,EAI3C,CACE,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI,EAA4B,EAC5D,UAAU,EACV,EAAE;IACF,OAAO,CACL,8BAAC,8CAAqB,IAAC,IAAI,EAAE,WAAW;QACtC,8BAAC,8DAA4B,IAC3B,GAAG,EAAE,UAAU,EACf,WAAW,EAAE,WAAW,KACpB,IAAI,IAEP,QAAQ,CACoB,CACT,CACzB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,2BAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC"}

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const contentStyles: string;
+//# sourceMappingURL=drawer-toolbar-layout.styles.d.ts.map

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-toolbar-layout.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,QAIzB,CAAC"}

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.styles.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contentStyles = void 0;
+const emotion_1 = require("@leafygreen-ui/emotion");
+const constants_1 = require("../constants");
+exports.contentStyles = (0, emotion_1.css) `
+  grid-area: ${constants_1.GRID_AREA.content};
+  overflow: scroll;
+  height: inherit;
+`;
+//# sourceMappingURL=drawer-toolbar-layout.styles.js.map

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-toolbar-layout.styles.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.styles.ts"],"names":[],"mappings":";;;AAAA,oDAA6C;AAE7C,4CAAyC;AAE5B,QAAA,aAAa,GAAG,IAAA,aAAG,EAAA;eACjB,qBAAS,CAAC,OAAO;;;CAG/B,CAAC"}

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.types.d.ts

@@ -0,0 +1,44 @@
+import type React from 'react';
+import type { DarkModeProps, LgIdProps } from '@leafygreen-ui/lib';
+import type { ToolbarIconButtonProps } from '../../toolbar';
+import type { DrawerProps } from '../drawer/drawer.types';
+type PickedOptionalDrawerProps = Pick<DrawerProps, 'onClose' | 'displayMode'>;
+type PickedRequiredToolbarIconButtonProps = Pick<ToolbarIconButtonProps, 'glyph' | 'label' | 'onClick' | 'disabled'>;
+interface LayoutBase extends PickedRequiredToolbarIconButtonProps {
+    /**
+     * The id of the layout. This is used to open the drawer.
+     */
+    id: string;
+}
+interface LayoutWithContent extends LayoutBase {
+    /**
+     * The title of the drawer. This is not required if the toolbar item should not open a drawer.
+     */
+    title: React.ReactNode;
+    /**
+     * The content of the drawer. This is not required if the toolbar item should not open a drawer.
+     */
+    content: React.ReactNode;
+}
+interface LayoutWithoutContent extends LayoutBase {
+    /**
+     * The title of the drawer. This is not required if the toolbar item should not open a drawer.
+     */
+    title?: never;
+    /**
+     * The content of the drawer. This is not required if the toolbar item should not open a drawer.
+     */
+    content?: never;
+}
+export type LayoutData = LayoutWithContent | LayoutWithoutContent;
+export type DrawerToolbarLayoutProps = PickedOptionalDrawerProps & DarkModeProps & LgIdProps & {
+    /**
+     * An array of data that will be used to render the toolbar items and the drawer content.
+     */
+    toolbarData: Array<LayoutData>;
+    className?: string;
+    children: React.ReactNode;
+};
+export type DrawerToolbarLayoutContainerProps = DrawerToolbarLayoutProps;
+export {};
+//# sourceMappingURL=drawer-toolbar-layout.types.d.ts.map

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-toolbar-layout.types.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D,KAAK,yBAAyB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,aAAa,CAAC,CAAC;AAC9E,KAAK,oCAAoC,GAAG,IAAI,CAC9C,sBAAsB,EACtB,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAC3C,CAAC;AAEF,UAAU,UAAW,SAAQ,oCAAoC;IAC/D;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,iBAAkB,SAAQ,UAAU;IAC5C;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,UAAU,oBAAqB,SAAQ,UAAU;IAC/C;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,oBAAoB,CAAC;AAElE,MAAM,MAAM,wBAAwB,GAAG,yBAAyB,GAC9D,aAAa,GACb,SAAS,GAAG;IACV;;OAEG;IACH,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEJ,MAAM,MAAM,iCAAiC,GAAG,wBAAwB,CAAC"}

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=drawer-toolbar-layout.types.js.map

package/lib/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-toolbar-layout.types.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.types.ts"],"names":[],"mappings":""}

package/lib/components/drawer/drawer-toolbar-layout/index.d.ts

@@ -0,0 +1,3 @@
+export { DrawerToolbarLayout } from './drawer-toolbar-layout';
+export type { DrawerToolbarLayoutProps, LayoutData, } from './drawer-toolbar-layout.types';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/drawer/drawer-toolbar-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EACV,wBAAwB,EACxB,UAAU,GACX,MAAM,+BAA+B,CAAC"}

package/lib/components/drawer/drawer-toolbar-layout/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerToolbarLayout = void 0;
+var drawer_toolbar_layout_1 = require("./drawer-toolbar-layout");
+Object.defineProperty(exports, "DrawerToolbarLayout", { enumerable: true, get: function () { return drawer_toolbar_layout_1.DrawerToolbarLayout; } });
+//# sourceMappingURL=index.js.map

package/lib/components/drawer/drawer-toolbar-layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-toolbar-layout/index.ts"],"names":[],"mappings":";;;AAAA,iEAA8D;AAArD,4HAAA,mBAAmB,OAAA"}

package/lib/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { DrawerWithToolbarWrapperProps } from './drawer-with-toolbar-wrapper.types';
+/**
+ * @internal
+ *
+ * This layout wrapper is used to position the toolbar and drawer together. When the drawer is open, the toolbar and drawer will shift to the right.
+ *
+ * If the drawer is overlay, a box shadow will be applied to the left side of this component.
+ */
+export declare const DrawerWithToolbarWrapper: React.ForwardRefExoticComponent<Omit<DrawerWithToolbarWrapperProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=drawer-with-toolbar-wrapper.d.ts.map

package/lib/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-with-toolbar-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,qCAAqC,CAAC;AAEzF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,mHAmCpC,CAAC"}

package/lib/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerWithToolbarWrapper = void 0;
+const react_1 = __importStar(require("react"));
+const leafygreen_provider_1 = require("@leafygreen-ui/leafygreen-provider");
+const drawer_with_toolbar_wrapper_styles_1 = require("./drawer-with-toolbar-wrapper.styles");
+/**
+ * @internal
+ *
+ * This layout wrapper is used to position the toolbar and drawer together. When the drawer is open, the toolbar and drawer will shift to the right.
+ *
+ * If the drawer is overlay, a box shadow will be applied to the left side of this component.
+ */
+exports.DrawerWithToolbarWrapper = (0, react_1.forwardRef)(({ children, className, isDrawerOpen, displayMode, }, forwardedRef) => {
+    const { theme } = (0, leafygreen_provider_1.useDarkMode)();
+    const [shouldAnimate, setShouldAnimate] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (isDrawerOpen)
+            setShouldAnimate(true);
+    }, [isDrawerOpen]);
+    return (react_1.default.createElement("div", { ref: forwardedRef, className: (0, drawer_with_toolbar_wrapper_styles_1.getDrawerWithToolbarWrapperStyles)({
+            className,
+            isDrawerOpen,
+            shouldAnimate,
+            displayMode,
+            theme,
+        }) }, children));
+});
+exports.DrawerWithToolbarWrapper.displayName = 'DrawerWithToolbarWrapper';
+//# sourceMappingURL=drawer-with-toolbar-wrapper.js.map

package/lib/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-with-toolbar-wrapper.js","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA+D;AAE/D,4EAAiE;AAEjE,6FAAyF;AAGzF;;;;;;GAMG;AACU,QAAA,wBAAwB,GAAG,IAAA,kBAAU,EAIhD,CACE,EACE,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,GACmB,EAChC,YAAY,EACZ,EAAE;IACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,iCAAW,GAAE,CAAC;IAChC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE1D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,YAAY;YAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,uCACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,sEAAiC,EAAC;YAC3C,SAAS;YACT,YAAY;YACZ,aAAa;YACb,WAAW;YACX,KAAK;SACN,CAAC,IAED,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gCAAwB,CAAC,WAAW,GAAG,0BAA0B,CAAC"}

package/lib/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.styles.d.ts

@@ -0,0 +1,10 @@
+import type { Theme } from '@leafygreen-ui/lib';
+import { DisplayMode } from '../drawer/drawer.types';
+export declare const getDrawerWithToolbarWrapperStyles: ({ className, isDrawerOpen, shouldAnimate, displayMode, theme, }: {
+    className?: string;
+    isDrawerOpen: boolean;
+    shouldAnimate?: boolean;
+    displayMode: DisplayMode;
+    theme: Theme;
+}) => string;
+//# sourceMappingURL=drawer-with-toolbar-wrapper.styles.d.ts.map

package/lib/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-with-toolbar-wrapper.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAUhD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAwIrD,eAAO,MAAM,iCAAiC,GAAI,iEAM/C;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC;CACd,WAWE,CAAC"}