@bitrise/bitkit 12.8.0 → 12.9.0

package/package.json

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

package/src/Components/Sidebar/SidebarItem.theme.ts

@@ -23,6 +23,13 @@ const SidebarItemTheme = itemHelpers.defineMultiStyleConfig({
     },
   },
   variants: {
+    disabled: {
+      link: {
+        color: 'neutral.60',
+        _hover: { bg: 'unset' },
+        _active: { bg: 'unset' },
+      },
+    },
     selected: {
       link: {
         fontWeight: 'demiBold',

package/src/Components/Sidebar/SidebarItem.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { forwardRef, ReactNode } from 'react';
 import { chakra, ChakraProps, createStylesContext, useMultiStyleConfig } from '@chakra-ui/react';
 import { DateTime } from 'luxon';
 import Text from '../Text/Text';
@@ -7,27 +7,42 @@ import Icon, { TypeIconName } from '../Icon/Icon';
 type SidebarItemProps = {
   children: ReactNode;
   selected?: boolean;
+  disabled?: boolean;
   onClick?: () => void;
   href?: string;
 };
 
 const [SidebarItemStyleProvider, useSidebarItemStyle] = createStylesContext('SidebarItem');
 
-const SidebarItem = ({ children, selected, href, onClick }: SidebarItemProps) => {
-  const style = useMultiStyleConfig('SidebarItem', { variant: selected ? 'selected' : undefined });
-  const shared = {
-    onClick,
-    position: 'relative',
-    href,
-    children: <SidebarItemStyleProvider value={style}>{children}</SidebarItemStyleProvider>,
-    sx: style.link,
-    height: '48',
-  } as ChakraProps;
-  if (onClick) {
-    return <chakra.button {...shared} />;
+const sidebarVariant = ({ selected, disabled }: { selected?: boolean; disabled?: boolean }) => {
+  if (disabled) {
+    return 'disabled';
   }
-  return <chakra.a {...shared} />;
+  if (selected) {
+    return 'selected';
+  }
+  return undefined;
 };
+const SidebarItem = forwardRef(
+  (
+    { children, disabled, selected, href, onClick }: SidebarItemProps,
+    ref: React.Ref<HTMLButtonElement & HTMLAnchorElement>,
+  ) => {
+    const style = useMultiStyleConfig('SidebarItem', { variant: sidebarVariant({ disabled, selected }) });
+    const shared = {
+      onClick,
+      position: 'relative',
+      href,
+      children: <SidebarItemStyleProvider value={style}>{children}</SidebarItemStyleProvider>,
+      sx: style.link,
+      height: '48',
+    } as ChakraProps;
+    if (onClick || disabled) {
+      return <chakra.button ref={ref} disabled={disabled} {...shared} />;
+    }
+    return <chakra.a ref={ref} {...shared} />;
+  },
+);
 
 const SidebarItemIcon = ({ name }: { name: TypeIconName }) => {
   const { icon } = useSidebarItemStyle();