@bitrise/bitkit 9.34.2 → 9.35.0

package/package.json

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

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

@@ -10,6 +10,7 @@ const DialogTheme: ComponentStyleConfig = {
       justifyContent: 'center',
       alignItems: 'flex-start',
       overflow: scrollBehavior === 'inside' ? 'hidden' : 'auto',
+      zIndex: 'dialog',
     },
     dialog: {
       borderRadius: '8',
@@ -62,7 +63,7 @@ const DialogTheme: ComponentStyleConfig = {
     },
     full: {
       dialogContainer: {
-        zIndex: 1000,
+        zIndex: 'fullDialog',
       },
       dialog: {
         position: 'absolute',

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,10 @@
+const zIndices = {
+  hide: -1,
+  auto: 'auto',
+  base: 0,
+  header: 1100,
+  fullDialog: 1200,
+  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: {