@bitrise/bitkit 12.14.1 → 12.15.1

package/package.json

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

package/src/Components/ContentSwitcher/ContentSwitcher.context.ts

@@ -3,5 +3,6 @@ import { createContext } from '@chakra-ui/react-utils';
 
 export interface ContentSwitcherContextType {
   getRadioProps: UseRadioGroupReturn['getRadioProps'];
+  isGroupDisabled?: boolean;
 }
 export const [ContentSwitcherContext, useContentSwitcherContext] = createContext<ContentSwitcherContextType>();

package/src/Components/ContentSwitcher/ContentSwitcher.theme.ts

@@ -31,6 +31,10 @@ const ContentSwitcherTheme = itemHelpers.defineMultiStyleConfig({
         _hover: {
           backgroundColor: 'neutral.100',
           borderColor: 'separator.primary',
+          _disabled: {
+            backgroundColor: 'neutral.100',
+            borderColor: 'separator.primary',
+          },
         },
       },
       _focus: {
@@ -39,6 +43,14 @@ const ContentSwitcherTheme = itemHelpers.defineMultiStyleConfig({
       _hover: {
         backgroundColor: 'neutral.93',
         borderColor: 'neutral.93',
+        _disabled: {
+          backgroundColor: 'transparent',
+          borderColor: 'transparent',
+        },
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        color: 'neutral.60',
       },
     },
   },

package/src/Components/ContentSwitcher/ContentSwitcher.tsx

@@ -22,8 +22,9 @@ const ContentSwitcher = forwardRef<ContentSwitcherProps, 'div'>((props, ref) =>
   const ctx = useMemo<ContentSwitcherContextType>(
     () => ({
       getRadioProps,
+      isGroupDisabled: isDisabled,
     }),
-    [getRadioProps],
+    [getRadioProps, isDisabled],
   );
 
   const group = getRootProps();

package/src/Components/ContentSwitcher/ContentSwitcherItem.tsx

@@ -4,21 +4,24 @@ import { useContentSwitcherContext } from './ContentSwitcher.context';
 
 export interface ContentSwitcherItemProps {
   children: string;
+  isDisabled?: boolean;
   value: string;
 }
 
 const ContentSwitcherItem = (props: ContentSwitcherItemProps) => {
-  const { getRadioProps } = useContentSwitcherContext();
+  const { getRadioProps, isGroupDisabled } = useContentSwitcherContext();
 
-  const { children, value } = props;
+  const { children, isDisabled, value } = props;
 
   const { getInputProps, getCheckboxProps } = useRadio(getRadioProps({ value }));
 
   const theme = useMultiStyleConfig('ContentSwitcher');
 
+  const isItemDisabled = isGroupDisabled || isDisabled;
+
   return (
-    <Box as="label" __css={theme.item} {...getCheckboxProps()}>
-      <input {...getInputProps()} />
+    <Box as="label" __css={theme.item} {...getCheckboxProps()} data-disabled={isItemDisabled}>
+      <input {...getInputProps()} disabled={isItemDisabled} />
       {children}
     </Box>
   );

package/src/Components/Sidebar/SidebarItem.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, ReactNode } from 'react';
-import { chakra, ChakraProps, createStylesContext, useMultiStyleConfig } from '@chakra-ui/react';
+import { chakra, ChakraProps, createStylesContext, IconProps, useMultiStyleConfig } from '@chakra-ui/react';
 import { DateTime } from 'luxon';
 import Text from '../Text/Text';
 import Icon, { TypeIconName } from '../Icon/Icon';
@@ -23,6 +23,7 @@ const sidebarVariant = ({ selected, disabled }: { selected?: boolean; disabled?:
   }
   return undefined;
 };
+
 const SidebarItem = forwardRef(
   (
     { children, disabled, selected, href, onClick }: SidebarItemProps,
@@ -44,9 +45,9 @@ const SidebarItem = forwardRef(
   },
 );
 
-const SidebarItemIcon = ({ name }: { name: TypeIconName }) => {
+const SidebarItemIcon = ({ name, ...iconProps }: { name: TypeIconName } & Omit<IconProps, 'sx'>) => {
   const { icon } = useSidebarItemStyle();
-  return <Icon sx={icon} name={name} size="24" />;
+  return <Icon sx={icon} name={name} size="24" {...iconProps} />;
 };
 
 const SidebarItemLabel = ({ children }: { children: ReactNode }) => (
@@ -54,6 +55,7 @@ const SidebarItemLabel = ({ children }: { children: ReactNode }) => (
     {children}
   </Text>
 );
+
 const SidebarItemDateExtra = ({ date }: { date: Date | DateTime }) => {
   const dateTime = DateTime.isDateTime(date) ? date : DateTime.fromJSDate(date);
   return (