@bitrise/bitkit 9.33.2 → 9.34.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.33.2",
+  "version": "9.34.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Dialog/Dialog.theme.ts

@@ -1,7 +1,7 @@
-import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
 
-const DialogTheme: SystemStyleObject = {
-  baseStyle: {
+const DialogTheme: ComponentStyleConfig = {
+  baseStyle: ({ scrollBehavior }) => ({
     overlay: {
       backgroundColor: 'rgba(0, 0, 0, .5)',
     },
@@ -9,13 +9,14 @@ const DialogTheme: SystemStyleObject = {
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'flex-start',
-      overflow: 'auto',
+      overflow: scrollBehavior === 'inside' ? 'hidden' : 'auto',
     },
     dialog: {
       borderRadius: '8',
       backgroundColor: 'neutral.100',
       boxShadow: 'large',
       marginY: '128',
+      maxH: scrollBehavior === 'inside' ? 'calc(100% - 16rem)' : undefined,
     },
     header: {
       padding: '24',
@@ -42,7 +43,7 @@ const DialogTheme: SystemStyleObject = {
       padding: '32',
       paddingTop: '48',
     },
-  },
+  }),
   sizes: {
     small: {
       dialog: {
@@ -71,6 +72,7 @@ const DialogTheme: SystemStyleObject = {
         right: '32',
         top: '32',
         bottom: '32',
+        maxH: 'auto',
       },
     },
     mobile: {

package/src/Components/Dialog/Dialog.tsx

@@ -25,17 +25,24 @@ export const useDialog = (): DialogState => {
     onOpen,
   };
 };
-export interface DialogProps extends HTMLChakraProps<'section'> {
+export interface DialogProps extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'> {
   dataTestid?: string;
   size?: 'small' | 'medium' | 'large' | 'full';
+  scrollBehavior?: 'inside' | 'outside';
   state: DialogState;
   title: string;
 }
 
-const Dialog = ({ children, dataTestid, state, size, title, ...rest }: DialogProps) => {
+const Dialog = ({ children, dataTestid, scrollBehavior, state, size, title, ...rest }: DialogProps) => {
   const dialogSize = useBreakpointValue({ mobile: 'mobile', desktop: size });
   return (
-    <Modal closeOnOverlayClick={false} isOpen={state.isOpen} onClose={state.onClose} size={dialogSize}>
+    <Modal
+      closeOnOverlayClick={false}
+      isOpen={state.isOpen}
+      onClose={state.onClose}
+      scrollBehavior={scrollBehavior}
+      size={dialogSize}
+    >
       <ModalOverlay />
       <ModalContent data-testid={dataTestid} {...rest}>
         <ModalHeader>
@@ -53,6 +60,7 @@ const Dialog = ({ children, dataTestid, state, size, title, ...rest }: DialogPro
 };
 
 Dialog.defaultProps = {
+  scrollBehavior: 'outside',
   size: 'medium',
 } as DialogProps;
 

package/src/Components/Popover/Popover.theme.ts

@@ -2,6 +2,9 @@ import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 
 const PopoverTheme: SystemStyleObject = {
   baseStyle: {
+    popper: {
+      zIndex: 10,
+    },
     content: {
       backgroundColor: 'neutral.100',
       borderRadius: 8,

package/src/index.ts

@@ -101,3 +101,12 @@ export { default as DialogFooter } from './Components/Dialog/DialogFooter';
 
 export type { FadeProps } from './Components/Transitions/Fade';
 export { default as Fade } from './Components/Transitions/Fade';
+
+export type { PopoverProps } from './Components/Popover/Popover';
+export { default as Popover } from './Components/Popover/Popover';
+
+export { default as PopoverTrigger } from './Components/Popover/PopoverTrigger';
+
+export type { PopoverContentProps } from './Components/Popover/PopoverContent';
+export { default as PopoverContent } from './Components/Popover/PopoverContent';
+