@bitrise/bitkit 13.302.0 → 13.304.0

package/package.json

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

package/src/Components/Dropdown/Dropdown.tsx

@@ -29,6 +29,7 @@ import { AvatarProps } from '../Avatar/Avatar';
 import { getDataAttributes } from '../../utils/utils';
 import Tag from '../Tag/Tag';
 import Box from '../Box/Box';
+import Text from '../Text/Text';
 import IconButton from '../IconButton/IconButton';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
 import { DropdownDetailedOption, DropdownGroup, DropdownOption, DropdownOptionProps } from './DropdownOption';
@@ -38,7 +39,14 @@ import { NoResultsFound, useSimpleSearch } from './hooks/useSimpleSearch';
 import { isSearchable } from './isNodeMatch';
 import { DropdownProps } from './DropdownProps';
 
-const MultiSelectContext = createContext<{ invalidValues?: string[] } | undefined>(undefined);
+const MultiSelectContext = createContext<
+  | {
+      invalidValues?: string[];
+      isConstrained?: boolean;
+      itemType?: string;
+    }
+  | undefined
+>(undefined);
 
 type DropdownSearchCustomProps = {
   value?: string;
@@ -134,7 +142,11 @@ function findOption<T>(
     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, avatar: elem.props.avatar };
+        return {
+          index: elem.props.index,
+          label: elem.props.children,
+          avatar: elem.props.avatar,
+        };
       }
       const ch =
         findOption(elem.props.children, value) || (isSearchable(elem.type) && findOption(elem.type(elem.props), value));
@@ -203,7 +215,12 @@ function useDropdown<T>({
     listRef,
     setActiveIndex,
     setSelectedIndex,
-  } = useFloatingDropdown({ dropdownWidth, enabled: !readOnly, optionsRef, placement });
+  } = useFloatingDropdown({
+    dropdownWidth,
+    enabled: !readOnly,
+    optionsRef,
+    placement,
+  });
 
   const multiSelectContext = useContext(MultiSelectContext);
   const isMultiSelect = Boolean(multiSelectContext);
@@ -304,46 +321,63 @@ function useDropdown<T>({
         formValue.length > 0 ? (
           <Box alignItems="center" display="flex" gap={8}>
             <Box display="flex" flexGrow={1} flexWrap="wrap" gap={8}>
-              {formValue
-                ?.sort((a, b) => {
-                  if (typeof a === 'string' && typeof b === 'string') {
-                    return a.localeCompare(b);
-                  }
-
-                  if (a === null) {
-                    return -1;
-                  }
-
-                  return 1;
-                })
-                .map((formValueItem) => {
-                  if (typeof formValueItem !== 'string' && formValueItem !== null) {
-                    return <>{formValueItem}</>;
-                  }
-
-                  const colors = multiSelectContext?.invalidValues?.includes(formValueItem) ? 'red' : 'neutral';
-                  return (
-                    <Tag
-                      colorScheme={colors}
-                      isDisabled={disabled}
-                      key={formValueItem}
-                      onClose={(event) => {
-                        event.stopPropagation();
-
-                        setFormValue((previous: T) => {
-                          if (!Array.isArray(previous)) {
-                            return previous;
-                          }
-
-                          return previous.filter((aPrevious) => aPrevious !== formValueItem) as T;
-                        });
-                      }}
-                      size="sm"
-                    >
-                      {labelCache.get(formValueItem) || fallback?.(formValueItem) || formValueItem}
-                    </Tag>
-                  );
-                })}
+              {multiSelectContext?.isConstrained ? (
+                <>
+                  <Tag
+                    size="sm"
+                    colorScheme="neutral"
+                    onClose={(event) => {
+                      event.stopPropagation();
+                      setFormValue([] as T);
+                    }}
+                    isDisabled={disabled}
+                  >
+                    {formValue.length}
+                  </Tag>
+                  <Text>{`${multiSelectContext.itemType} selected`}</Text>
+                </>
+              ) : (
+                formValue
+                  ?.sort((a, b) => {
+                    if (typeof a === 'string' && typeof b === 'string') {
+                      return a.localeCompare(b);
+                    }
+
+                    if (a === null) {
+                      return -1;
+                    }
+
+                    return 1;
+                  })
+                  .map((formValueItem) => {
+                    if (typeof formValueItem !== 'string' && formValueItem !== null) {
+                      return <>{formValueItem}</>;
+                    }
+
+                    const colors = multiSelectContext?.invalidValues?.includes(formValueItem) ? 'red' : 'neutral';
+                    return (
+                      <Tag
+                        colorScheme={colors}
+                        isDisabled={disabled}
+                        key={formValueItem}
+                        onClose={(event) => {
+                          event.stopPropagation();
+
+                          setFormValue((previous: T) => {
+                            if (!Array.isArray(previous)) {
+                              return previous;
+                            }
+
+                            return previous.filter((aPrevious) => aPrevious !== formValueItem) as T;
+                          });
+                        }}
+                        size="sm"
+                      >
+                        {labelCache.get(formValueItem) || fallback?.(formValueItem) || formValueItem}
+                      </Tag>
+                    );
+                  })
+              )}
             </Box>
             <IconButton
               aria-label="Clear all"
@@ -377,7 +411,7 @@ function useDropdown<T>({
         setSelectedAvatar(undefined);
       }
     }
-  }, [refdChildren, formValue]);
+  }, [refdChildren, formValue, multiSelectContext]);
   return {
     avatar: selectedAvatar,
     context,
@@ -587,11 +621,20 @@ export function typedDropdown<T>() {
   };
 }
 
-export const MultiSelectDropdown = (props: DropdownProps<(string | null)[]> & { invalidValues?: string[] }) => {
+export const MultiSelectDropdown = (
+  props: DropdownProps<(string | null)[]> & {
+    invalidValues?: string[];
+    isConstrained?: boolean;
+    itemType?: string;
+  },
+) => {
   const { Dropdown: TypedDropdown } = typedDropdown<(string | null)[]>();
 
-  const { children, invalidValues, ...rest } = props;
-  const contextValue = useMemo(() => ({ invalidValues }), [invalidValues]);
+  const { children, invalidValues, isConstrained, itemType, ...rest } = props;
+  const contextValue = useMemo(
+    () => ({ invalidValues, isConstrained, itemType }),
+    [invalidValues, isConstrained, itemType],
+  );
 
   return (
     <MultiSelectContext.Provider value={contextValue}>

package/src/tokens/tokensToTheme.json

@@ -289,7 +289,7 @@
           "subtle": "pal.neutral.93",
           "minimal": "pal.neutral.95",
           "disabled": "pal.neutral.95",
-          "transparent": "pal.neutral.100 0%"
+          "transparent": "rgba(255, 255, 255, 0)"
         },
         "border": {
           "minimal": "pal.neutral.93",
@@ -377,6 +377,8 @@
         },
         "turquoise": {
           "base": "pal.turquoise.50",
+          "dark": "pal.turquoise.20",
+          "emphasized": "pal.turquoise.30",
           "strong": "pal.turquoise.40",
           "bold": "pal.turquoise.60",
           "muted": "pal.turquoise.80",
@@ -413,6 +415,7 @@
         "secondary": "sys.fg.secondary",
         "tertiary": "sys.fg.tertiary",
         "body": "sys.fg.base",
+        "helper": "sys.fg.secondary",
         "link": "sys.interactive.base",
         "link-hover": "sys.interactive.strong",
         "selected": "sys.interactive.base",
@@ -504,6 +507,40 @@
           "fg-hover": "sys.critical.base",
           "fg-active": "sys.critical.strong",
           "fg-disabled": "sys.fg.disabled"
+        },
+        "ai-primary": {
+          "bg": "sys.turquoise.strong",
+          "bg-hover": "sys.turquoise.emphasized",
+          "bg-active": "sys.turquoise.dark",
+          "bg-disabled": "sys.primary.disabled",
+          "fg": "sys.fg.on-color",
+          "fg-hover": "sys.fg.on-color",
+          "fg-active": "sys.fg.on-color",
+          "fg-disabled": "sys.fg.on-disabled"
+        },
+        "ai-secondary": {
+          "bg": "sys.bg.surface",
+          "bg-hover": "sys.turquoise.minimal",
+          "bg-active": "sys.turquoise.moderate",
+          "bg-disabled": "sys.bg.minimal",
+          "fg": "sys.turquoise.base",
+          "fg-hover": "sys.turquoise.base",
+          "fg-active": "sys.turquoise.strong",
+          "fg-disabled": "sys.fg.disabled",
+          "border": "sys.turquoise.muted",
+          "border-hover": "sys.turquoise.muted",
+          "border-active": "sys.turquoise.base",
+          "border-disabled": "sys.border.disabled"
+        },
+        "ai-tertiary": {
+          "bg": "sys.bg.transparent",
+          "bg-hover": "sys.turquoise.minimal",
+          "bg-active": "sys.turquoise.moderate",
+          "bg-disabled": "sys.bg.transparent",
+          "fg": "sys.turquoise.base",
+          "fg-hover": "sys.turquoise.base",
+          "fg-active": "sys.turquoise.strong",
+          "fg-disabled": "sys.fg.disabled"
         }
       },
       "input": {
@@ -577,15 +614,32 @@
           "border": "sys.neutral.muted",
           "icon": "sys.neutral.strong",
           "text": "sys.neutral.strong"
+        },
+        "ai": {
+          "bg": "sys.turquoise.minimal",
+          "bg-hover": "sys.turquoise.subtle",
+          "bg-active": "sys.turquoise.moderate",
+          "border": "sys.turquoise.muted",
+          "icon": "sys.turquoise.strong",
+          "text": "sys.turquoise.strong"
         }
       },
       "utilities": {
-        "overlay": "rgba(32, 27, 34, 0.8)",
+        "overlay": "rgba(32, 27, 34, 0.5)",
         "overlay-side": "linear-gradient(90deg, rgba(32, 27, 34, 0) 0%, rgba(32, 27, 34, 0.32) 100%)",
         "overlay-light": "rgba(32, 27, 34, 0.16)",
         "skeleton": "sys.bg.subtle",
         "skeleton-strong": "sys.fg.minimal"
       },
+      "ui": {
+        "header-action": {
+          "bg": "rgba(255, 255, 255, 0)",
+          "bg-hover": "rgba(255, 255, 255, 0.1)",
+          "bg-active": "rgba(255, 255, 255, 0.2)",
+          "bg-selected": "rgba(255, 255, 255, 0.2)",
+          "bg-selected-hover": "rgba(255, 255, 255, 0.1)"
+        }
+      },
       "brand/primary": "pal.purple.30",
       "separator/primary": "pal.neutral.90",
       "sys/fg/base": "pal.neutral.10",
@@ -606,7 +660,7 @@
       "sys/bg/subtle": "pal.neutral.93",
       "sys/bg/minimal": "pal.neutral.95",
       "sys/bg/disabled": "pal.neutral.95",
-      "sys/bg/transparent": "pal.neutral.100 0%",
+      "sys/bg/transparent": "rgba(255, 255, 255, 0)",
       "sys/border/minimal": "pal.neutral.93",
       "sys/border/subtle": "pal.neutral.90",
       "sys/border/strong": "pal.neutral.80",
@@ -674,6 +728,8 @@
       "sys/orange/subtle": "pal.orange.93",
       "sys/orange/minimal": "pal.orange.95",
       "sys/turquoise/base": "pal.turquoise.50",
+      "sys/turquoise/dark": "pal.turquoise.20",
+      "sys/turquoise/emphasized": "pal.turquoise.30",
       "sys/turquoise/strong": "pal.turquoise.40",
       "sys/turquoise/bold": "pal.turquoise.60",
       "sys/turquoise/muted": "pal.turquoise.80",
@@ -703,6 +759,7 @@
       "text/secondary": "sys.fg.secondary",
       "text/tertiary": "sys.fg.tertiary",
       "text/body": "sys.fg.base",
+      "text/helper": "sys.fg.secondary",
       "text/link": "sys.interactive.base",
       "text/link-hover": "sys.interactive.strong",
       "text/selected": "sys.interactive.base",
@@ -779,6 +836,34 @@
       "button/danger-tertiary/fg-hover": "sys.critical.base",
       "button/danger-tertiary/fg-active": "sys.critical.strong",
       "button/danger-tertiary/fg-disabled": "sys.fg.disabled",
+      "button/ai-primary/bg": "sys.turquoise.strong",
+      "button/ai-primary/bg-hover": "sys.turquoise.emphasized",
+      "button/ai-primary/bg-active": "sys.turquoise.dark",
+      "button/ai-primary/bg-disabled": "sys.primary.disabled",
+      "button/ai-primary/fg": "sys.fg.on-color",
+      "button/ai-primary/fg-hover": "sys.fg.on-color",
+      "button/ai-primary/fg-active": "sys.fg.on-color",
+      "button/ai-primary/fg-disabled": "sys.fg.on-disabled",
+      "button/ai-secondary/bg": "sys.bg.surface",
+      "button/ai-secondary/bg-hover": "sys.turquoise.minimal",
+      "button/ai-secondary/bg-active": "sys.turquoise.moderate",
+      "button/ai-secondary/bg-disabled": "sys.bg.minimal",
+      "button/ai-secondary/fg": "sys.turquoise.base",
+      "button/ai-secondary/fg-hover": "sys.turquoise.base",
+      "button/ai-secondary/fg-active": "sys.turquoise.strong",
+      "button/ai-secondary/fg-disabled": "sys.fg.disabled",
+      "button/ai-secondary/border": "sys.turquoise.muted",
+      "button/ai-secondary/border-hover": "sys.turquoise.muted",
+      "button/ai-secondary/border-active": "sys.turquoise.base",
+      "button/ai-secondary/border-disabled": "sys.border.disabled",
+      "button/ai-tertiary/bg": "sys.bg.transparent",
+      "button/ai-tertiary/bg-hover": "sys.turquoise.minimal",
+      "button/ai-tertiary/bg-active": "sys.turquoise.moderate",
+      "button/ai-tertiary/bg-disabled": "sys.bg.transparent",
+      "button/ai-tertiary/fg": "sys.turquoise.base",
+      "button/ai-tertiary/fg-hover": "sys.turquoise.base",
+      "button/ai-tertiary/fg-active": "sys.turquoise.strong",
+      "button/ai-tertiary/fg-disabled": "sys.fg.disabled",
       "input/text/label": "sys.fg.primary",
       "input/text/inputValue": "sys.fg.base",
       "input/text/placeholder": "sys.fg.subtle",
@@ -830,11 +915,22 @@
       "status/neutral/border": "sys.neutral.muted",
       "status/neutral/icon": "sys.neutral.strong",
       "status/neutral/text": "sys.neutral.strong",
-      "utilities/overlay": "rgba(32, 27, 34, 0.8)",
+      "status/ai/bg": "sys.turquoise.minimal",
+      "status/ai/bg-hover": "sys.turquoise.subtle",
+      "status/ai/bg-active": "sys.turquoise.moderate",
+      "status/ai/border": "sys.turquoise.muted",
+      "status/ai/icon": "sys.turquoise.strong",
+      "status/ai/text": "sys.turquoise.strong",
+      "utilities/overlay": "rgba(32, 27, 34, 0.5)",
       "utilities/overlay-side": "linear-gradient(90deg, rgba(32, 27, 34, 0) 0%, rgba(32, 27, 34, 0.32) 100%)",
       "utilities/overlay-light": "rgba(32, 27, 34, 0.16)",
       "utilities/skeleton": "sys.bg.subtle",
-      "utilities/skeleton-strong": "sys.fg.minimal"
+      "utilities/skeleton-strong": "sys.fg.minimal",
+      "ui/header-action/bg": "rgba(255, 255, 255, 0)",
+      "ui/header-action/bg-hover": "rgba(255, 255, 255, 0.1)",
+      "ui/header-action/bg-active": "rgba(255, 255, 255, 0.2)",
+      "ui/header-action/bg-selected": "rgba(255, 255, 255, 0.2)",
+      "ui/header-action/bg-selected-hover": "rgba(255, 255, 255, 0.1)"
     }
   },
   "shadows": {
@@ -1085,6 +1181,21 @@
       "letterSpacing": "2",
       "textTransform": "uppercase"
     },
+    "heading/mobile/h1": {
+      "fontWeight": "bold",
+      "lineHeight": "size-5",
+      "fontSize": "5"
+    },
+    "heading/mobile/h2": {
+      "fontWeight": "bold",
+      "lineHeight": "size-4",
+      "fontSize": "4"
+    },
+    "heading/mobile/h3": {
+      "fontWeight": "bold",
+      "lineHeight": "size-3",
+      "fontSize": "3"
+    },
     "body/sm/regular": {
       "lineHeight": "size-1",
       "fontSize": "1",
@@ -1124,6 +1235,33 @@
       "fontSize": "3",
       "textDecoration": "underline"
     },
+    "body/xl/regular": {
+      "lineHeight": "size-4",
+      "fontSize": "4"
+    },
+    "body/xl/semibold": {
+      "fontWeight": "semibold",
+      "lineHeight": "size-4",
+      "fontSize": "4"
+    },
+    "body/2xl/regular": {
+      "lineHeight": "size-5",
+      "fontSize": "5"
+    },
+    "body/2xl/semibold": {
+      "fontWeight": "semibold",
+      "lineHeight": "size-5",
+      "fontSize": "5"
+    },
+    "body/3xl/regular": {
+      "lineHeight": "size-6",
+      "fontSize": "6"
+    },
+    "body/3xl/semibold": {
+      "fontWeight": "semibold",
+      "lineHeight": "size-6",
+      "fontSize": "6"
+    },
     "code/md": {
       "fontFamily": "mono",
       "fontSize": "1",