@bitrise/bitkit 13.20.0 → 13.22.0

package/package.json

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

package/src/Components/Dropdown/Dropdown.theme.ts

@@ -47,7 +47,7 @@ const DropdownTheme = {
       },
       _disabled: {
         color: 'neutral.70',
-        pointerEvents: 'none',
+        cursor: 'not-allowed',
       },
       color: 'purple.10',
       cursor: 'pointer',

package/src/Components/Dropdown/Dropdown.tsx

@@ -123,7 +123,7 @@ function findOption<T>(children: ReactNode, value: T): { label: ReactNode; index
   const list = React.Children.toArray(children);
   for (let i = 0; i < list.length; i++) {
     const elem = list[i];
-    if (React.isValidElement(elem)) {
+    if (React.isValidElement(elem) && !elem.props.isDisabled) {
       const optValue = typeof elem.props.value === 'undefined' ? null : elem.props.value;
       if (elem.type === DropdownOption && optValue === value) {
         return { index: elem.props.index, label: elem.props.children };

package/src/Components/Dropdown/DropdownOption.tsx

@@ -38,15 +38,19 @@ const DropdownOption = <T = string,>({
         value === ctx.formValue && 'bitkit-select__option-active',
         index === ctx.activeIndex && 'bitkit-select__option-hover',
       )}
-      {...ctx.getItemProps({
-        onClick(event) {
-          onClick?.(event);
+      {...ctx.getItemProps(
+        isDisabled
+          ? {}
+          : {
+              onClick(event) {
+                onClick?.(event);
 
-          if (!event.defaultPrevented) {
-            ctx.onOptionSelected({ index, label: children, value });
-          }
-        },
-      })}
+                if (!event.defaultPrevented) {
+                  ctx.onOptionSelected({ index, label: children, value });
+                }
+              },
+            },
+      )}
     >
       {children}
     </chakra.div>
@@ -77,27 +81,26 @@ const DropdownGroup = ({
   );
 };
 
-const DropdownDetailedOption = ({
+type DropdownDetailedOptionProps<T> = DropdownOptionProps<T> & {
+  icon: ReactNode;
+  subtitle: string;
+  title: string;
+};
+
+const DropdownDetailedOption = <T = string,>({
   icon,
-  subtitle,
   title,
-  value,
+  isDisabled,
+  subtitle,
   ...rest
-}: {
-  icon: ReactNode;
-  title: string;
-  subtitle: string;
-  value?: string;
-}) => {
+}: DropdownDetailedOptionProps<T>) => {
   return (
-    <DropdownOption value={value} {...rest} aria-label={title}>
+    <DropdownOption isDisabled={isDisabled} {...rest} aria-label={title}>
       <chakra.div alignItems="center" display="flex" flexDir="row" gap="12">
-        {icon}
+        <chakra.div opacity={isDisabled ? '0.5' : '1'}>{icon}</chakra.div>
         <chakra.div>
-          <Text color="purple.10" size="3">
-            {title}
-          </Text>
-          <Text color="neutral.60" size="2">
+          {title}
+          <Text color={isDisabled ? 'text/disabled' : 'input/text/helper'} size="2">
             {subtitle}
           </Text>
         </chakra.div>

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -4,13 +4,17 @@ import ReactMarkdown, { Components } from 'react-markdown';
 import List from '../List/List';
 import Link from '../Link/Link';
 import ListItem from '../List/ListItem';
-import Box from '../Box/Box';
+import Box, { BoxProps } from '../Box/Box';
 import Divider from '../Divider/Divider';
 import Text from '../Text/Text';
 import CodeBlock from '../CodeBlock/CodeBlock';
 import CodeSnippet from '../CodeSnippet/CodeSnippet';
 
-const defaultComponents = (size: 'md' | 'lg'): Components => {
+type GapType = Exclude<BoxProps['gap'], undefined>;
+
+const defaultComponents = (size: 'sm' | 'md' | 'lg', gap: GapType = '16'): Components => {
+  const codeSize = size === 'lg' ? 'lg' : 'md';
+
   return {
     a: ({ node, ...props }) => <Link colorScheme="purple" isUnderlined target="_blank" {...props} />,
     blockquote: ({ children }) => (
@@ -27,7 +31,7 @@ const defaultComponents = (size: 'md' | 'lg'): Components => {
       </Box>
     ),
     code: ({ node, ...props }) => (
-      <CodeSnippet size={size} {...props}>
+      <CodeSnippet size={codeSize} {...props}>
         {props.children as string}
       </CodeSnippet>
     ),
@@ -37,24 +41,26 @@ const defaultComponents = (size: 'md' | 'lg'): Components => {
     h4: ({ node, ...props }) => <Text as="h4" textStyle="heading/h4" {...props} />,
     h5: ({ node, ...props }) => <Text as="h5" textStyle="heading/h5" {...props} />,
     h6: ({ node, ...props }) => <Text as="h6" textStyle="heading/h6" {...props} />,
-    hr: () => <Divider borderColor="separator.primary" my="16" size="2" />,
+    hr: () => <Divider borderColor="separator.primary" my={gap} size="2" />,
     li: ({ node, ...props }) => <ListItem {...props} />,
     ol: ({ node, ...props }) => <List isOrdered {...props} />,
     p: ({ node, ...props }) => <Text {...props} />,
-    pre: ({ node, ...props }) => <CodeBlock size={size}>{props.children as string}</CodeBlock>,
+    pre: ({ node, ...props }) => <CodeBlock size={codeSize}>{props.children as string}</CodeBlock>,
     ul: ({ node, ...props }) => <List {...props} />,
   };
 };
 
-type NoteMarkdownContentProps = { md: string; size?: 'md' | 'lg' } & Pick<
-  ComponentProps<typeof ReactMarkdown>,
-  'components' | 'rehypePlugins'
->;
-const NoteMarkdownContent = ({ components, md, size = 'lg', ...rest }: NoteMarkdownContentProps) => {
+type NoteMarkdownContentProps = {
+  md: string;
+  gap?: GapType;
+  size?: 'sm' | 'md' | 'lg';
+} & Pick<ComponentProps<typeof ReactMarkdown>, 'components' | 'rehypePlugins'>;
+
+const NoteMarkdownContent = ({ components, md, gap = '16', size = 'lg', ...rest }: NoteMarkdownContentProps) => {
   const extendedComponents = { ...defaultComponents(size), ...components };
   const textStyle = `body/${size}/regular`;
   return (
-    <Box display="flex" flexDirection="column" gap="16" textStyle={textStyle}>
+    <Box display="flex" flexDirection="column" gap={gap} textStyle={textStyle}>
       <ReactMarkdown components={extendedComponents} {...rest}>
         {md}
       </ReactMarkdown>