@bitrise/bitkit 13.99.0 → 13.100.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.99.0",
+  "version": "13.100.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Drawer/Drawer.tsx

@@ -10,6 +10,10 @@ import {
   DrawerHeader,
   DrawerOverlay,
   DrawerProps as ChakraDrawerProps,
+  ModalBodyProps,
+  ModalFooterProps,
+  ModalHeaderProps,
+  ModalOverlayProps,
 } from '@chakra-ui/react';
 import Icon from '../Icon/Icon';
 
@@ -18,27 +22,45 @@ export interface DrawerProps
   children: DrawerContentProps['children'];
   footer?: ReactNode;
   maxWidth?: BoxProps['maxWidth'];
-  title: string;
+  title: ReactNode;
   padding?: BoxProps['padding'];
+  margin?: BoxProps['margin'];
   headerPadding?: BoxProps['padding'];
   bodyPadding?: BoxProps['padding'];
+  overlayProps?: ModalOverlayProps;
+  contentProps?: DrawerContentProps;
+  headerProps?: ModalHeaderProps;
+  bodyProps?: ModalBodyProps;
+  footerProps?: ModalFooterProps;
 }
 
-const Drawer = (props: DrawerProps) => {
-  const { bodyPadding, children, footer, headerPadding, maxWidth = '20rem', padding, title, ...drawerProps } = props;
+const Drawer = ({ overlayProps, contentProps, headerProps, bodyProps, footerProps, ...props }: DrawerProps) => {
+  const {
+    bodyPadding,
+    children,
+    footer,
+    headerPadding,
+    maxWidth = '20rem',
+    padding,
+    margin,
+    title,
+    ...drawerProps
+  } = props;
 
   return (
     <ChakraDrawer {...drawerProps}>
-      <DrawerOverlay />
-      <DrawerContent maxWidth={maxWidth} padding={padding}>
+      <DrawerOverlay maxWidth={maxWidth} padding={padding} {...overlayProps} />
+      <DrawerContent margin={margin} {...contentProps}>
         <DrawerCloseButton size="md">
           <Icon name="CloseSmall" />
         </DrawerCloseButton>
-        <DrawerHeader as="h3" padding={headerPadding}>
+        <DrawerHeader as="h3" padding={headerPadding} {...headerProps}>
           {title}
         </DrawerHeader>
-        <DrawerBody padding={bodyPadding}>{children}</DrawerBody>
-        {footer && <DrawerFooter>{footer}</DrawerFooter>}
+        <DrawerBody padding={bodyPadding} {...bodyProps}>
+          {children}
+        </DrawerBody>
+        {footer && <DrawerFooter {...footerProps}>{footer}</DrawerFooter>}
       </DrawerContent>
     </ChakraDrawer>
   );

package/src/Components/Drawer/useDrawer.tsx

@@ -1,5 +1,13 @@
 import { ReactNode, useState } from 'react';
-import { DrawerProps as ChakraDrawerProps, useDisclosure } from '@chakra-ui/react';
+import {
+  DrawerContentProps,
+  DrawerProps as ChakraDrawerProps,
+  ModalBodyProps,
+  ModalFooterProps,
+  ModalHeaderProps,
+  ModalOverlayProps,
+  useDisclosure,
+} from '@chakra-ui/react';
 import Drawer from './Drawer';
 
 export type UseDrawerProps = {
@@ -8,14 +16,19 @@ export type UseDrawerProps = {
     {
       children: ReactNode;
       footer?: ReactNode;
-      title: string;
+      title: ReactNode;
     }
   >;
   drawerProps?: Pick<ChakraDrawerProps, 'finalFocusRef' | 'initialFocusRef'>;
+  overlayProps?: ModalOverlayProps;
+  contentProps?: DrawerContentProps;
+  headerProps?: ModalHeaderProps;
+  bodyProps?: ModalBodyProps;
+  footerProps?: ModalFooterProps;
 };
 
 const useDrawer = (props: UseDrawerProps) => {
-  const { content, drawerProps } = props;
+  const { content, drawerProps, ...subComponentProps } = props;
   const [activeDrawer, setActiveDrawer] = useState<string>('');
 
   const { isOpen, onClose, onOpen } = useDisclosure();
@@ -36,7 +49,9 @@ const useDrawer = (props: UseDrawerProps) => {
     setActiveDrawer(contentKey);
   };
 
-  const drawerComponent = <Drawer {...content[activeDrawer]} {...drawerProps} isOpen={isOpen} onClose={closeDrawer} />;
+  const drawerComponent = (
+    <Drawer {...content[activeDrawer]} {...drawerProps} {...subComponentProps} isOpen={isOpen} onClose={closeDrawer} />
+  );
 
   return {
     activeDrawer,