@conveyorhq/arrow-ds 1.97.0 → 1.98.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.97.0",
+  "version": "1.98.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Drawer/Drawer.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 import { BoxProps } from "../Box";
+import { TopBarProps } from "../TopBar";
+import { CloseButtonProps } from "../CloseButton";
 export interface WithDrawerProps {
     drawerSlot: React.ReactNode;
     onClose: () => void;
@@ -17,4 +19,16 @@ export interface DrawerProps extends BoxProps {
     footerSlot?: React.ReactNode;
     drawerSide?: "left" | "right";
 }
-export declare const Drawer: ({ children, headingSlot, footerSlot, className, drawerSide, ...rest }: DrawerProps) => JSX.Element;
+export declare const DrawerContent: ({ children, className, ...rest }: BoxProps) => JSX.Element;
+export declare const DrawerHeader: ({ className, ...rest }: TopBarProps) => JSX.Element;
+export declare const DrawerCloseButton: ({ onClick, className, ...rest }: CloseButtonProps) => JSX.Element;
+export declare const DrawerBody: ({ children, className, ...rest }: BoxProps) => JSX.Element;
+export declare const DrawerFooter: ({ children, className, ...rest }: BoxProps) => JSX.Element;
+export declare const Drawer: {
+    ({ children, headingSlot, footerSlot, className, drawerSide, ...rest }: DrawerProps): JSX.Element;
+    Content: ({ children, className, ...rest }: BoxProps) => JSX.Element;
+    Header: ({ className, ...rest }: TopBarProps) => JSX.Element;
+    CloseButton: ({ onClick, className, ...rest }: CloseButtonProps) => JSX.Element;
+    Body: ({ children, className, ...rest }: BoxProps) => JSX.Element;
+    Footer: ({ children, className, ...rest }: BoxProps) => JSX.Element;
+};

package/public/components/Drawer/Drawer.js

@@ -22,7 +22,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Drawer = exports.WithDrawer = void 0;
+exports.Drawer = exports.DrawerFooter = exports.DrawerBody = exports.DrawerCloseButton = exports.DrawerHeader = exports.DrawerContent = exports.WithDrawer = void 0;
 const react_1 = __importStar(require("react"));
 const react_spring_1 = require("react-spring");
 const classnames_1 = __importDefault(require("classnames"));
@@ -92,11 +92,41 @@ const WithDrawer = ({ drawerSlot, onClose, isOpen = false, fixedSlotTop, fixedSl
                 fixedSlotBottom && (react_1.default.createElement(react_spring_1.animated.div, { style: { paddingLeft, paddingRight }, className: cn({ e: "fixedSlot" }) }, fixedSlotBottom))))));
 };
 exports.WithDrawer = WithDrawer;
-const Drawer = ({ children, headingSlot, footerSlot, className, drawerSide, ...rest }) => {
+const DrawerContent = ({ children, className, ...rest }) => {
+    return (react_1.default.createElement(Flex_1.Flex, Object.assign({ className: classnames_1.default(cn({ e: "innerWrapper" }), className) }, rest), children));
+};
+exports.DrawerContent = DrawerContent;
+const DrawerHeader = ({ className, ...rest }) => {
+    return (react_1.default.createElement(TopBar_1.TopBar, Object.assign({ className: classnames_1.default(cn({ e: "topbar" }), className) }, rest)));
+};
+exports.DrawerHeader = DrawerHeader;
+const DrawerCloseButton = ({ onClick, className, ...rest }) => {
     const { onClose } = react_1.useContext(drawer_1.DrawerContext);
-    return (react_1.default.createElement(Flex_1.Flex, Object.assign({ className: classnames_1.default(cn({ e: "innerWrapper" }), className) }, rest),
-        react_1.default.createElement(TopBar_1.TopBar, { className: cn({ e: "topbar" }), leftSlot: headingSlot, rightSlot: react_1.default.createElement(CloseButton_1.CloseButton, { className: "text-icon -mr-8", onClick: onClose }) }),
-        react_1.default.createElement(Box_1.Box, { className: cn({ e: "drawerContent" }) }, children),
-        !!footerSlot && react_1.default.createElement(Box_1.Box, { className: cn({ e: "footer" }) }, footerSlot)));
+    return (react_1.default.createElement(CloseButton_1.CloseButton, Object.assign({ onClick: (event) => {
+            if (onClick) {
+                onClick(event);
+            }
+            onClose();
+        }, className: classnames_1.default("text-icon", className) }, rest)));
+};
+exports.DrawerCloseButton = DrawerCloseButton;
+const DrawerBody = ({ children, className, ...rest }) => {
+    return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(cn({ e: "drawerContent" }), className) }, rest), children));
+};
+exports.DrawerBody = DrawerBody;
+const DrawerFooter = ({ children, className, ...rest }) => {
+    return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(cn({ e: "footer" }), className) }, rest), children));
+};
+exports.DrawerFooter = DrawerFooter;
+const Drawer = ({ children, headingSlot, footerSlot, className, drawerSide, ...rest }) => {
+    return (react_1.default.createElement(exports.DrawerContent, Object.assign({ className: className }, rest),
+        react_1.default.createElement(exports.DrawerHeader, { leftSlot: headingSlot, rightSlot: react_1.default.createElement(exports.DrawerCloseButton, { className: "-mr-8" }) }),
+        react_1.default.createElement(exports.DrawerBody, null, children),
+        !!footerSlot && react_1.default.createElement(exports.DrawerFooter, null, footerSlot)));
 };
 exports.Drawer = Drawer;
+exports.Drawer.Content = exports.DrawerContent;
+exports.Drawer.Header = exports.DrawerHeader;
+exports.Drawer.CloseButton = exports.DrawerCloseButton;
+exports.Drawer.Body = exports.DrawerBody;
+exports.Drawer.Footer = exports.DrawerFooter;

package/public/css/styles.css

@@ -3769,6 +3769,7 @@ override built-in Image component classes */
 
 .ads-Drawer-topbar {
   position: relative;
+  flex-shrink: 0;
 }
 
 .ads-Drawer-drawerContent {