@bitrise/bitkit 13.263.0 → 13.265.0

package/package.json

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

package/src/Components/Dialog/Dialog.context.tsx

@@ -0,0 +1,22 @@
+import { createContext, ReactNode, useContext } from 'react';
+import { DialogProps } from './DialogProps';
+
+export type DialogContextValueType = {
+  scrollBehavior: DialogProps['scrollBehavior'];
+};
+
+const DialogContext = createContext<DialogContextValueType>({ scrollBehavior: 'outside' });
+
+export const DialogContextProvider = ({ children, value }: { children: ReactNode; value: DialogContextValueType }) => {
+  return <DialogContext.Provider value={value}>{children}</DialogContext.Provider>;
+};
+
+export const useDialogContext = () => {
+  const context = useContext(DialogContext);
+
+  if (!context) {
+    throw new Error('DialogContext is not provided');
+  }
+
+  return context;
+};

package/src/Components/Dialog/Dialog.tsx

@@ -1,13 +1,11 @@
 import { useId } from 'react';
 import {
   ComponentWithAs,
-  HTMLChakraProps,
   Modal,
   ModalCloseButton,
   ModalContent,
   ModalHeader,
   ModalOverlay,
-  ModalProps,
   useBreakpointValue,
   usePrefersReducedMotion,
 } from '@chakra-ui/react';
@@ -15,21 +13,8 @@ import { BREAKPOINTS } from '../../types/bitkit';
 import Icon from '../Icon/Icon';
 import Text from '../Text/Text';
 import Tooltip from '../Tooltip/Tooltip';
-
-export interface DialogProps
-  extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'>,
-    Pick<ModalProps, 'returnFocusOnClose'> {
-  isClosable?: boolean;
-  isOpen: boolean;
-  onClose(): void;
-  onCloseComplete?: () => void;
-  size?: 'small' | 'medium' | 'large' | 'full';
-  scrollBehavior?: 'inside' | 'outside';
-  title: string;
-  trapFocus?: boolean;
-  variant?: 'default' | 'empty';
-  closeNotice?: string;
-}
+import { DialogContextProvider } from './Dialog.context';
+import { DialogProps } from './DialogProps';
 
 const Dialog: ComponentWithAs<'section', DialogProps> = ({
   children,
@@ -57,39 +42,42 @@ const Dialog: ComponentWithAs<'section', DialogProps> = ({
   );
 
   return (
-    <Modal
-      closeOnEsc={isClosable}
-      closeOnOverlayClick={false}
-      isOpen={isOpen}
-      motionPreset={prefersReducedMotion ? 'none' : 'scale'}
-      onClose={isClosable ? onClose : () => {}}
-      onCloseComplete={onCloseComplete}
-      returnFocusOnClose={returnFocusOnClose}
-      scrollBehavior={scrollBehavior}
-      size={dialogSize}
-      trapFocus={trapFocus}
-    >
-      <ModalOverlay />
-      <ModalContent aria-labelledby={variant !== 'empty' ? headerId : undefined} {...rest}>
-        {variant !== 'empty' && (
-          <>
-            <ModalHeader marginRight="48">
-              <Text as="h1" id={headerId} textStyle="comp/dialog/title">
-                {title}
-              </Text>
-            </ModalHeader>
-            {closeNotice ? (
-              <Tooltip label={closeNotice} placement="top">
-                {closeBtn}
-              </Tooltip>
-            ) : (
-              closeBtn
-            )}
-          </>
-        )}
-        {children}
-      </ModalContent>
-    </Modal>
+    <DialogContextProvider value={{ scrollBehavior }}>
+      <Modal
+        closeOnEsc={isClosable}
+        closeOnOverlayClick={false}
+        isOpen={isOpen}
+        motionPreset={prefersReducedMotion ? 'none' : 'scale'}
+        onClose={isClosable ? onClose : () => {}}
+        onCloseComplete={onCloseComplete}
+        returnFocusOnClose={returnFocusOnClose}
+        scrollBehavior={scrollBehavior}
+        size={dialogSize}
+        trapFocus={trapFocus}
+      >
+        <ModalOverlay />
+
+        <ModalContent aria-labelledby={variant !== 'empty' ? headerId : undefined} {...rest}>
+          {variant !== 'empty' && (
+            <>
+              <ModalHeader marginRight="48">
+                <Text as="h1" id={headerId} textStyle="comp/dialog/title">
+                  {title}
+                </Text>
+              </ModalHeader>
+              {closeNotice ? (
+                <Tooltip label={closeNotice} placement="top">
+                  {closeBtn}
+                </Tooltip>
+              ) : (
+                closeBtn
+              )}
+            </>
+          )}
+          {children}
+        </ModalContent>
+      </Modal>
+    </DialogContextProvider>
   );
 };
 

package/src/Components/Dialog/DialogBody.tsx

@@ -1,9 +1,102 @@
-import { ModalBody, ModalBodyProps } from '@chakra-ui/react';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { ModalBody, ModalBodyProps, useModalContext } from '@chakra-ui/react';
+import Box, { BoxProps } from '../Box/Box';
+import Icon from '../Icon/Icon';
+import { useDialogContext } from './Dialog.context';
+
+const ScrollButton = (props: BoxProps) => {
+  return (
+    <Box
+      {...props}
+      as="button"
+      bg="background/primary"
+      borderColor="border/minimal"
+      borderRadius={16}
+      borderWidth={1}
+      boxShadow="large"
+      h={32}
+      w={32}
+    >
+      <Icon color="icon/tertiary" name="ArrowDown" size="16" />
+    </Box>
+  );
+};
 
 export type DialogBodyProps = ModalBodyProps;
 
+const ScrollableDialogBody = (props: DialogBodyProps) => {
+  const { isOpen } = useModalContext();
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);
+
+  const updateScrollButtonVisibility = useCallback(() => {
+    const content = contentRef.current;
+
+    if (!isOpen || !content) {
+      setIsScrollButtonVisible(false);
+
+      return;
+    }
+
+    const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;
+    setIsScrollButtonVisible(!didScrollToBottom);
+  }, []);
+
+  useEffect(() => {
+    const content = contentRef.current;
+
+    if (!isOpen || !content) {
+      return;
+    }
+
+    updateScrollButtonVisibility();
+
+    content.addEventListener('scroll', updateScrollButtonVisibility);
+    const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);
+    resizeObserver.observe(content);
+
+    return () => {
+      content.removeEventListener('scroll', updateScrollButtonVisibility);
+      resizeObserver.unobserve(content);
+      resizeObserver.disconnect();
+    };
+  }, [isOpen]);
+
+  return (
+    <Box display="flex" flexDir="column" minH={0} position="relative">
+      <ModalBody ref={contentRef} {...props} />
+      {isScrollButtonVisible && (
+        <ScrollButton
+          alignSelf="center"
+          bottom={8}
+          flexShrink={0}
+          onClick={() => {
+            if (!contentRef.current) {
+              return;
+            }
+
+            contentRef.current.scrollTo({
+              top: contentRef.current.scrollHeight,
+              behavior: 'smooth',
+            });
+          }}
+          position="absolute"
+        />
+      )}
+    </Box>
+  );
+};
+
 const DialogBody = (props: DialogBodyProps) => {
-  return <ModalBody {...props} />;
+  const { scrollBehavior } = useDialogContext();
+
+  if (scrollBehavior === 'outside') {
+    return <ModalBody {...props} />;
+  }
+
+  return <ScrollableDialogBody {...props} />;
 };
 
 export default DialogBody;

package/src/Components/Dialog/DialogProps.ts

@@ -0,0 +1,16 @@
+import { HTMLChakraProps, ModalProps } from '@chakra-ui/react';
+
+export interface DialogProps
+  extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'>,
+    Pick<ModalProps, 'returnFocusOnClose'> {
+  isClosable?: boolean;
+  isOpen: boolean;
+  onClose(): void;
+  onCloseComplete?: () => void;
+  size?: 'small' | 'medium' | 'large' | 'full';
+  scrollBehavior?: 'inside' | 'outside';
+  title: string;
+  trapFocus?: boolean;
+  variant?: 'default' | 'empty';
+  closeNotice?: string;
+}

package/src/Components/TreeView/TreeView.theme.ts

@@ -39,12 +39,16 @@ const baseStyle = definePartsStyle({
     },
   },
   buttonContent: {
+    gap: '8',
+    display: 'flex',
+  },
+  borderBox: {
     w: '100%',
     gap: '8',
     display: 'flex',
     alignItems: 'flex-start',
     textAlign: 'start',
-    borderTop: '1px solid',
+    borderBottom: '1px solid',
     borderColor: 'border/minimal',
   },
   textBlock: {

package/src/Components/TreeView/TreeViewNode.tsx

@@ -60,31 +60,33 @@ const TreeViewNodeContent = memo(
         >
           <Box sx={{ ...styles.buttonContent }}>
             {isBranch && <Icon size="16" name={isExpanded ? 'ChevronDown' : 'ChevronRight'} sx={styles.icon} />}
-            {iconName && (
-              <Icon
-                size="16"
-                name={iconName}
-                sx={{ ...styles.icon, ...{ color: iconColor || (isSelected ? 'icon/primary' : 'icon/secondary') } }}
-              />
-            )}
-            <Box sx={styles.textBlock}>
-              <Text fontWeight={isExpanded ? 'semibold' : 'normal'}>{title}</Text>
-              {description && (
-                <Text textStyle="body/sm/regular" color="text/secondary">
-                  {description}
-                </Text>
+            <Box sx={styles.borderBox}>
+              {iconName && (
+                <Icon
+                  size="16"
+                  name={iconName}
+                  sx={{ ...styles.icon, ...{ color: iconColor || (isSelected ? 'icon/primary' : 'icon/secondary') } }}
+                />
               )}
-            </Box>
-            {(label || labelIconName) && (
-              <Box sx={styles.suffixBlock} color={isSelected || isExpanded ? 'text/primary' : 'text/secondary'}>
-                {labelIconName && <Icon name={labelIconName} size="16" color={labelIconColor} />}
-                {label && (
-                  <Text textStyle="body/md/regular" textAlign="right">
-                    {label}
+              <Box sx={styles.textBlock}>
+                <Text fontWeight={isExpanded ? 'semibold' : 'normal'}>{title}</Text>
+                {description && (
+                  <Text textStyle="body/sm/regular" color="text/secondary">
+                    {description}
                   </Text>
                 )}
               </Box>
-            )}
+              {(label || labelIconName) && (
+                <Box sx={styles.suffixBlock} color={isSelected || isExpanded ? 'text/primary' : 'text/secondary'}>
+                  {labelIconName && <Icon name={labelIconName} size="16" color={labelIconColor} />}
+                  {label && (
+                    <Text textStyle="body/md/regular" textAlign="right">
+                      {label}
+                    </Text>
+                  )}
+                </Box>
+              )}
+            </Box>
             {isSelected && <Box sx={styles.selectionIndicator} />}
           </Box>
         </Box>

package/src/index.ts

@@ -95,7 +95,7 @@ export { default as useToast } from './Components/Toast/Toast';
 export type { EmptyStateProps } from './Components/EmptyState/EmptyState';
 export { default as EmptyState } from './Components/EmptyState/EmptyState';
 
-export type { DialogProps } from './Components/Dialog/Dialog';
+export type { DialogProps } from './Components/Dialog/DialogProps';
 export { default as Dialog } from './Components/Dialog/Dialog';
 
 export type { DialogBodyProps } from './Components/Dialog/DialogBody';