@bitrise/bitkit 9.38.1 → 9.38.2-alpha-chakra.1

package/package.json

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

package/src/Components/Dialog/Dialog.stories.tsx

@@ -1,6 +1,7 @@
 import { Story, ComponentMeta } from '@storybook/react';
+import { useDisclosure } from '@chakra-ui/react';
 import Button from '../Button/Button';
-import Dialog, { DialogProps, useDialog } from './Dialog';
+import Dialog, { DialogProps } from './Dialog';
 import DialogBody from './DialogBody';
 import DialogFooter from './DialogFooter';
 
@@ -24,13 +25,13 @@ interface StoryType extends DialogProps {
 }
 
 export const WithProps: Story<StoryType> = ({ lotsOfContent, ...props }: StoryType) => {
-  const state = useDialog();
+  const { isOpen, onClose, onOpen } = useDisclosure();
 
   return (
     <>
-      <Button onClick={state.onOpen}>Open Dialog</Button>
+      <Button onClick={onOpen}>Open Dialog</Button>
 
-      <Dialog {...props} state={state}>
+      <Dialog {...props} isOpen={isOpen} onClose={onClose}>
         <DialogBody>
           {[...Array(lotsOfContent ? 10 : 1)].map((_key, index) => (
             // eslint-disable-next-line react/no-array-index-key

package/src/Components/Dialog/Dialog.tsx

@@ -5,42 +5,38 @@ import {
   ModalCloseButton,
   ModalHeader,
   useBreakpointValue,
-  useDisclosure,
   HTMLChakraProps,
 } from '@chakra-ui/react';
 import Icon from '../Icon/Icon';
 import Text from '../Text/Text';
 
-type DialogState = {
-  isOpen: boolean;
-  onClose(): void;
-  onOpen?(): void;
-};
-
-export const useDialog = (): DialogState => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  return {
-    isOpen,
-    onClose,
-    onOpen,
-  };
-};
 export interface DialogProps extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'> {
   dataTestid?: string;
+  isOpen: boolean;
+  onClose(): void;
   size?: 'small' | 'medium' | 'large' | 'full';
   scrollBehavior?: 'inside' | 'outside';
-  state: DialogState;
   title: string;
   trapFocus?: boolean;
 }
 
-const Dialog = ({ children, dataTestid, scrollBehavior, state, size, title, trapFocus, ...rest }: DialogProps) => {
+const Dialog = ({
+  children,
+  dataTestid,
+  isOpen,
+  onClose,
+  scrollBehavior,
+  size,
+  title,
+  trapFocus,
+  ...rest
+}: DialogProps) => {
   const dialogSize = useBreakpointValue({ mobile: 'mobile', desktop: size });
   return (
     <Modal
       closeOnOverlayClick={false}
-      isOpen={state.isOpen}
-      onClose={state.onClose}
+      isOpen={isOpen}
+      onClose={onClose}
       scrollBehavior={scrollBehavior}
       size={dialogSize}
       trapFocus={trapFocus}

package/src/hooks/index.ts

@@ -1 +1,2 @@
 export { default as useHistory } from './useHistory';
+export { useDisclosure } from '@chakra-ui/react';

package/src/index.ts

@@ -91,7 +91,6 @@ export { default as EmptyState } from './Components/EmptyState/EmptyState';
 
 export type { DialogProps } from './Components/Dialog/Dialog';
 export { default as Dialog } from './Components/Dialog/Dialog';
-export { useDialog } from './Components/Dialog/Dialog';
 
 export type { DialogBodyProps } from './Components/Dialog/DialogBody';
 export { default as DialogBody } from './Components/Dialog/DialogBody';