@bitrise/bitkit 13.44.0 → 13.45.0

package/package.json

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

package/src/Components/Tabs/ContainedTab.tsx

@@ -1,3 +1,4 @@
+import { MouseEvent, useEffect } from 'react';
 import { Button, forwardRef, TabProps as ChakraTabProps, useTab, useTabsStyles } from '@chakra-ui/react';
 import { TypeColors } from '../../types/bitkit';
 import Box from '../Box/Box';
@@ -5,6 +6,7 @@ import Icon, { TypeIconName } from '../Icon/Icon';
 import Text from '../Text/Text';
 
 export interface ContainedTabProps extends ChakraTabProps {
+  href?: string;
   id: string;
   iconColor?: TypeColors | 'currentColor';
   iconName?: TypeIconName;
@@ -13,11 +15,36 @@ export interface ContainedTabProps extends ChakraTabProps {
 }
 
 const ContainedTab = forwardRef<ContainedTabProps, 'button'>((props, ref) => {
-  const { iconColor = 'currentColor', iconName, isWarning, secondaryText, ...rest } = props;
-  const tabProps = useTab({ ...rest, ref });
+  const { href, iconColor = 'currentColor', iconName, isDisabled, isWarning, secondaryText, ...rest } = props;
+
   const styles = useTabsStyles();
+
+  const tabProps = useTab({
+    href,
+    isDisabled,
+    onClick: (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.metaKey) {
+        e.preventDefault();
+      }
+    },
+    ref,
+    ...rest,
+  });
+
+  useEffect(() => {
+    if (tabProps['aria-selected']) {
+      document.getElementById(tabProps.id)?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
+    }
+  }, [tabProps]);
+
   return (
-    <Button __css={styles.containedTab} {...tabProps}>
+    <Button
+      as={href ? 'a' : 'button'}
+      isDisabled={isDisabled}
+      __css={styles.containedTab}
+      {...tabProps}
+      type={href ? undefined : 'button'}
+    >
       <Box display="flex" gap="16" justifyContent="space-between">
         <Text as="span" hasEllipsis textStyle="comp/tabs/contained">
           {tabProps.children}

package/src/Components/Tabs/Tab.tsx

@@ -1,9 +1,11 @@
+import { MouseEvent, useEffect } from 'react';
 import { Button, forwardRef, TabProps as ChakraTabProps, useTab, useTabsStyles } from '@chakra-ui/react';
 import Badge, { BadgeProps } from '../Badge/Badge';
 import Icon, { TypeIconName } from '../Icon/Icon';
 
 export interface TabProps extends ChakraTabProps {
   badge?: BadgeProps;
+  href?: string;
   id: string;
   leftIconName?: TypeIconName;
   isDisabled?: boolean;
@@ -11,11 +13,36 @@ export interface TabProps extends ChakraTabProps {
 }
 
 const Tab = forwardRef<TabProps, 'button'>((props, ref) => {
-  const { badge, leftIconName, rightIconName, ...rest } = props;
-  const tabProps = useTab({ ...rest, ref });
+  const { badge, href, isDisabled, leftIconName, rightIconName, ...rest } = props;
+
   const styles = useTabsStyles();
+
+  const tabProps = useTab({
+    href,
+    isDisabled,
+    onClick: (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.metaKey) {
+        e.preventDefault();
+      }
+    },
+    ref,
+    ...rest,
+  });
+
+  useEffect(() => {
+    if (tabProps['aria-selected']) {
+      document.getElementById(tabProps.id)?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
+    }
+  }, [tabProps]);
+
   return (
-    <Button __css={styles.lineTab} {...tabProps}>
+    <Button
+      as={href ? 'a' : 'button'}
+      isDisabled={isDisabled}
+      __css={styles.lineTab}
+      {...tabProps}
+      type={href ? undefined : 'button'}
+    >
       {leftIconName && <Icon name={leftIconName} />}
       <span>{tabProps.children}</span>
       {badge?.children && <Badge {...badge} />}

package/src/Components/Tabs/TabList.tsx

@@ -1,7 +1,100 @@
-import { forwardRef, TabList as ChakraTabList, TabListProps } from '@chakra-ui/react';
+import { useEffect, useRef, useState } from 'react';
+import { forwardRef, TabList as ChakraTabList, TabListProps, useTabsStyles } from '@chakra-ui/react';
+import IconButton from '../IconButton/IconButton';
+import Box from '../Box/Box';
 
 const TabList = forwardRef<TabListProps, 'div'>((props, ref) => {
-  return <ChakraTabList {...props} ref={ref} />;
+  const styles: Record<string, any> = useTabsStyles();
+
+  const tabListRef = useRef<HTMLDivElement>(null);
+  const [isContentWider, setIsContentWider] = useState(false);
+  const [isLeftArrowDisabled, setIsLeftrrowDisabled] = useState(true);
+  const [isRightArrowDisabled, setIsRightArrowDisabled] = useState(true);
+
+  const updateArrowButtonStates = () => {
+    const tabList = tabListRef.current;
+    if (!tabList) {
+      return;
+    }
+
+    setIsLeftrrowDisabled(Math.floor(tabList.scrollLeft) === 0);
+    setIsRightArrowDisabled(Math.ceil(tabList.scrollLeft) + tabList.clientWidth >= tabList.scrollWidth);
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      const tabList = tabListRef.current;
+      if (!tabList) {
+        return;
+      }
+
+      const viewPortWidth = document.documentElement.clientWidth;
+      const tabListContentWidth = tabList.scrollWidth;
+
+      setIsContentWider(tabListContentWidth > viewPortWidth);
+      updateArrowButtonStates();
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    const tabList = tabListRef.current;
+    if (tabList) {
+      tabList.addEventListener('scroll', updateArrowButtonStates);
+    }
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      if (tabList) {
+        tabList.removeEventListener('scroll', updateArrowButtonStates);
+      }
+    };
+  }, [tabListRef]);
+
+  const handleScroll = (direction: 'left' | 'right') => {
+    const tabList = tabListRef.current;
+    if (!tabList) {
+      return;
+    }
+
+    const scrollAmount = direction === 'left' ? -(tabList.offsetWidth / 8) : tabList.offsetWidth / 8;
+    const newPosition = tabList.scrollLeft + scrollAmount;
+
+    tabList.scrollTo({
+      left: newPosition,
+      behavior: 'smooth',
+    });
+
+    updateArrowButtonStates();
+  };
+
+  return (
+    <Box display="flex" alignItems="center" justifyContent="flex-start" ref={ref}>
+      {isContentWider && !isLeftArrowDisabled && (
+        <IconButton
+          __css={styles.arrowButton}
+          iconName="ChevronLeft"
+          onClick={() => handleScroll('left')}
+          aria-label="Scroll back"
+          isTooltipDisabled
+          left="0"
+          _after={styles.arrowButtonGradient('left')}
+        />
+      )}
+      <ChakraTabList {...props} ref={tabListRef} />
+      {isContentWider && !isRightArrowDisabled && (
+        <IconButton
+          __css={styles.arrowButton}
+          iconName="ChevronRight"
+          onClick={() => handleScroll('right')}
+          aria-label="Scroll forward"
+          isTooltipDisabled
+          right="0"
+          _after={styles.arrowButtonGradient('right')}
+        />
+      )}
+    </Box>
+  );
 });
 
 export type { TabListProps };

package/src/Components/Tabs/Tabs.theme.ts

@@ -1,16 +1,30 @@
 import { defineStyle, defineStyleConfig, SystemStyleObject } from '@chakra-ui/styled-system';
+import { rem } from '../../utils/utils';
+
+const getGradient = (position: 'left' | 'right', variant: 'contained' | 'line') => {
+  const style: SystemStyleObject = {
+    content: `""`,
+    position: 'absolute',
+    width: '8',
+    top: '0',
+    bottom: '0',
+    bgGradient: `linear(${position === 'left' ? 'to-r' : 'to-l'}, ${
+      variant === 'line' ? 'background/primary' : 'background/tertiary'
+    }, transparent)`,
+  };
+
+  if (position === 'left') {
+    style.right = '-8px';
+  } else {
+    style.left = '-8px';
+  }
+
+  return style;
+};
 
 const baseStyle = defineStyle(
   ({ variant }): SystemStyleObject => ({
     containedTab: {
-      _disabled: {
-        _hover: {
-          backgroundColor: 'neutral.90',
-        },
-        backgroundColor: 'neutral.90',
-        color: 'neutral.60',
-        cursor: 'not-allowed',
-      },
       _first: {
         _focusVisible: {
           boxShadow: 'inset 0 2px var(--colors-purple-50), inset 0 0 0 3px var(--colors-purple-70)',
@@ -23,6 +37,11 @@ const baseStyle = defineStyle(
       _hover: {
         backgroundColor: 'background/active',
       },
+      _disabled: {
+        backgroundColor: 'neutral.90',
+        color: 'neutral.70',
+        cursor: 'not-allowed',
+      },
       _selected: {
         '+ [role="tab"]': {
           boxShadow: 'none',
@@ -49,22 +68,20 @@ const baseStyle = defineStyle(
       whiteSpace: 'nowrap',
     },
     lineTab: {
+      _hover: {
+        backgroundColor: 'background/secondary',
+      },
       _active: {
         backgroundColor: 'neutral.93',
       },
       _disabled: {
-        _hover: {
-          background: 'transparent',
-        },
+        background: 'transparent',
         color: 'neutral.70',
         cursor: 'not-allowed',
       },
       _focusVisible: {
         boxShadow: 'inset 0 -2px var(--colors-purple-50), inset 0 0 0 3px var(--colors-purple-70)',
       },
-      _hover: {
-        backgroundColor: 'neutral.95',
-      },
       _selected: {
         _hover: {
           backgroundColor: 'transparent',
@@ -86,14 +103,31 @@ const baseStyle = defineStyle(
       borderBottom: variant === 'line' ? '1px solid' : undefined,
       borderBottomColor: variant === 'line' ? 'separator.primary' : undefined,
       maxWidth: '100%',
-      overflow: 'hidden',
-      paddingLeft: variant === 'contained' ? '16' : undefined,
+      overflowY: 'hidden',
+      overflowX: 'scroll',
+      scrollbarWidth: 'none',
+      '::-webkit-scrollbar': {
+        width: 0,
+      },
     },
     tabpanel: {
       _focusVisible: {
         boxShadow: 'none',
       },
     },
+    arrowButton: {
+      width: variant === 'line' ? '48' : rem(68),
+      height: variant === 'line' ? '48' : rem(68),
+      borderRadius: 0,
+      backgroundColor: variant === 'line' ? 'background/primary' : 'background/tertiary',
+      flexShrink: 0,
+      color: 'icon/primary',
+      paddingY: '12',
+      paddingX: '16',
+      position: 'absolute',
+      top: '0',
+    },
+    arrowButtonGradient: ((position: 'left' | 'right') => getGradient(position, variant)) as any,
   }),
 );