@bitrise/bitkit 13.21.0 → 13.22.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.21.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>