@bitrise/bitkit 9.34.1 → 9.35.1

package/package.json

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

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

@@ -1,21 +1,24 @@
-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)',
+      zIndex: 'dialogOverlay',
     },
     dialogContainer: {
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'flex-start',
-      overflow: 'auto',
+      overflow: scrollBehavior === 'inside' ? 'hidden' : 'auto',
+      zIndex: 'dialog',
     },
     dialog: {
       borderRadius: '8',
       backgroundColor: 'neutral.100',
       boxShadow: 'large',
       marginY: '128',
+      maxH: scrollBehavior === 'inside' ? 'calc(100% - 16rem)' : undefined,
     },
     header: {
       padding: '24',
@@ -42,7 +45,7 @@ const DialogTheme: SystemStyleObject = {
       padding: '32',
       paddingTop: '48',
     },
-  },
+  }),
   sizes: {
     small: {
       dialog: {
@@ -60,8 +63,11 @@ const DialogTheme: SystemStyleObject = {
       },
     },
     full: {
+      overlay: {
+        zIndex: 'fullDialogOverlay',
+      },
       dialogContainer: {
-        zIndex: 1000,
+        zIndex: 'fullDialog',
       },
       dialog: {
         position: 'absolute',
@@ -71,6 +77,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,9 +2,6 @@ import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 
 const PopoverTheme: SystemStyleObject = {
   baseStyle: {
-    popper: {
-      zIndex: 10,
-    },
     content: {
       backgroundColor: 'neutral.100',
       borderRadius: 8,

package/src/Components/Popover/PopoverContent.tsx

@@ -1,13 +1,22 @@
-import { ReactNode } from 'react';
+import { ReactNode, Fragment } from 'react';
 import {
   PopoverContentProps as ChakraPopoverContentProps,
   PopoverContent as ChakraPopoverContent,
+  Portal,
 } from '@chakra-ui/react';
 
 export interface PopoverContentProps extends ChakraPopoverContentProps {
   children: ReactNode;
+  withoutPortal?: boolean;
 }
 
-const PopoverContent = (props: PopoverContentProps) => <ChakraPopoverContent {...props} />;
+const PopoverContent = ({ withoutPortal, ...rest }: PopoverContentProps) => {
+  const Wrapper = withoutPortal ? Fragment : Portal;
+  return (
+    <Wrapper>
+      <ChakraPopoverContent {...rest} />
+    </Wrapper>
+  );
+};
 
 export default PopoverContent;

package/src/Foundations/Zindex/Zindex.ts

@@ -0,0 +1,12 @@
+const zIndices = {
+  hide: -1,
+  auto: 'auto',
+  base: 0,
+  header: 1100,
+  fullDialogOverlay: 1199,
+  fullDialog: 1200,
+  dialogOverlay: 1299,
+  dialog: 1300,
+};
+
+export default zIndices;

package/src/theme.ts

@@ -21,6 +21,7 @@ import radii from './Foundations/Radii/Radii';
 import shadows from './Foundations/Shadows/Shadows';
 import sizes from './Foundations/Sizes/Sizes';
 import typography from './Foundations/Typography/Typography';
+import zIndices from './Foundations/Zindex/Zindex';
 
 const theme = {
   config: {
@@ -33,6 +34,7 @@ const theme = {
   shadows,
   sizes,
   space: sizes,
+  zIndices,
   styles: {
     global: {
       body: {