@bitrise/bitkit 13.187.0 → 13.188.0

package/package.json

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

package/src/Components/Dropdown/Dropdown.context.tsx

@@ -1,6 +1,7 @@
 import { ComponentProps, ReactNode } from 'react';
 import { createStylesContext } from '@chakra-ui/react';
 import { createContext } from '@chakra-ui/react-utils';
+import { DropdownProps } from './DropdownProps';
 
 const [DropdownStylesProvider, useDropdownStyles] = createStylesContext('Dropdown');
 
@@ -17,6 +18,7 @@ type DropdownContext<T> = {
   filter?: string;
   activeIndex?: number | null;
   getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+  size: DropdownProps<unknown>['size'];
 };
 
 const [DropdownContextProvider, useDropdownContext] = createContext<DropdownContext<unknown>>();

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

@@ -4,6 +4,7 @@ import { DropdownProps } from './DropdownProps';
 type DropdownStateProps = Pick<DropdownProps<string | null>, 'disabled' | 'readOnly' | 'isWarning' | 'isError'> & {
   placeholder: boolean;
   isOpen: boolean;
+  hasAvatar: boolean;
 };
 
 const getCursor = ({ readOnly, disabled }: DropdownStateProps) => {
@@ -68,7 +69,7 @@ const getButtonContentColor = ({ disabled, placeholder }: DropdownStateProps) =>
 
 const DropdownTheme = {
   baseStyle: (props: DropdownStateProps) => {
-    const { disabled, readOnly, isError } = props;
+    const { disabled, readOnly, hasAvatar, isError } = props;
     return {
       field: {
         _hover:
@@ -128,7 +129,8 @@ const DropdownTheme = {
         },
         color: 'purple.10',
         cursor: 'pointer',
-        paddingX: '16',
+        paddingLeft: hasAvatar ? '12' : '16',
+        paddingRight: '24',
         paddingY: '8',
         textAlign: 'start',
         userSelect: 'none',
@@ -151,7 +153,7 @@ const DropdownTheme = {
       options: {
         flexShrink: 1,
         overflowY: 'auto',
-        paddingY: '12',
+        paddingY: '8',
         position: 'relative',
       },
       search: {
@@ -162,22 +164,26 @@ const DropdownTheme = {
     };
   },
   sizes: {
-    lg: {
+    lg: ({ hasAvatar }: DropdownStateProps) => ({
       field: {
         fontSize: '3',
-        gap: '0.625rem',
+        gap: rem('8'),
         height: '48',
-        paddingLeft: rem('15'),
-        paddingRight: rem('15'),
+        paddingLeft: hasAvatar ? rem('12') : rem('16'),
+        paddingRight: rem('16'),
       },
-    },
+    }),
     md: {
       field: {
         fontSize: '2',
-        gap: '0.375rem',
+        gap: rem('8'),
         height: '40',
-        paddingLeft: rem('11'),
-        paddingRight: rem('11'),
+        paddingLeft: rem('12'),
+        paddingRight: rem('12'),
+      },
+      item: {
+        fontSize: '2',
+        paddingLeft: rem('12'),
       },
     },
   },

package/src/Components/Dropdown/Dropdown.tsx

@@ -20,6 +20,7 @@ import {
 import { FloatingFocusManager } from '@floating-ui/react-dom-interactions';
 import SearchInput from '../SearchInput/SearchInput';
 import FormLabel from '../Form/FormLabel';
+import { AvatarProps } from '../Avatar/Avatar';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
 import { DropdownDetailedOption, DropdownGroup, DropdownOption, DropdownOptionProps } from './DropdownOption';
 import DropdownButton from './DropdownButton';
@@ -112,14 +113,17 @@ type UseDropdownProps = {
   optionsRef: React.RefObject<HTMLDivElement>;
 };
 
-function findOption<T>(children: ReactNode, value: T): { label: ReactNode; index: number } | null {
+function findOption<T>(
+  children: ReactNode,
+  value: T,
+): { label: ReactNode; index: number; avatar?: AvatarProps } | null {
   const list = React.Children.toArray(children);
   for (let i = 0; i < list.length; i++) {
     const elem = list[i];
     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 };
+        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));
@@ -141,6 +145,7 @@ function useDropdown<T>({
   placement = 'bottom-start',
   readOnly,
   ref,
+  size,
   value,
   ...rest
 }: DropdownProps<T> & UseDropdownProps) {
@@ -162,8 +167,8 @@ function useDropdown<T>({
     onChange: (newValue) => onChange?.({ target: { name, value: newValue } }),
     value,
   });
-
   const [formLabel, setFormLabel] = useState<ReactNode>();
+  const [selectedAvatar, setSelectedAvatar] = useState<AvatarProps | undefined>();
   const refdChildren = useOptionListWithIndexes({ children });
 
   const searchOnSubmit = useCallback(() => {
@@ -203,6 +208,7 @@ function useDropdown<T>({
       searchOnSubmit,
       searchRef,
       searchValue,
+      size,
     }),
     [
       listRef,
@@ -214,6 +220,7 @@ function useDropdown<T>({
       searchValue,
       searchRef,
       searchOnSubmit,
+      size,
     ],
   );
 
@@ -222,12 +229,15 @@ function useDropdown<T>({
     if (currentOption) {
       setFormLabel(currentOption.label);
       setSelectedIndex(currentOption.index);
+      setSelectedAvatar(currentOption.avatar);
     } else {
       setFormLabel(null);
       setSelectedIndex(null);
+      setSelectedAvatar(undefined);
     }
   }, [refdChildren, formValue]);
   return {
+    avatar: selectedAvatar,
     context,
     floatingContext,
     floatingProps,
@@ -283,6 +293,7 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
   ) => {
     const optionsRef = useRef(null);
     const {
+      avatar,
       children,
       context: dropdownCtx,
       floatingContext,
@@ -303,10 +314,12 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
       placement,
       readOnly,
       ref,
+      size,
       value,
       ...props,
     });
     const dropdownStyles = useMultiStyleConfig('Dropdown', {
+      hasAvatar: Boolean(avatar),
       disabled,
       isError,
       isOpen,
@@ -352,6 +365,7 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
               {...referenceProps}
               {...buttonProps}
               aria-label={ariaLabel}
+              avatar={avatar}
               data-testid={dataTestid}
               id={buttonId}
               iconName={iconName}

package/src/Components/Dropdown/DropdownButton.tsx

@@ -1,10 +1,12 @@
 import { forwardRef, ReactNode } from 'react';
 import { chakra, ChakraProps } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../Icon/Icon';
+import Avatar, { AvatarProps } from '../Avatar/Avatar';
 import { useDropdownStyles } from './Dropdown.context';
 import { DropdownProps } from './DropdownProps';
 
 interface DropdownButtonProps extends ChakraProps {
+  avatar?: AvatarProps | undefined;
   'aria-label'?: string;
   blurHandler: () => void;
   id?: string;
@@ -22,6 +24,7 @@ interface DropdownButtonProps extends ChakraProps {
 const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
   (
     {
+      avatar,
       blurHandler,
       children,
       disabled,
@@ -57,6 +60,7 @@ const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
         type="button"
         {...rest}
       >
+        {avatar && <Avatar size={size === 'lg' ? '32' : '24'} {...avatar} />}
         {iconName && <Icon __css={icon} aria-hidden="true" name={iconName} size={iconSize} />}
         <chakra.span
           __css={buttonContent}

package/src/Components/Dropdown/DropdownOption.tsx

@@ -1,11 +1,13 @@
 import { MouseEventHandler, ReactNode, useId } from 'react';
-import { chakra } from '@chakra-ui/react';
+import { Avatar, AvatarProps, chakra } from '@chakra-ui/react';
 import { cx } from '@chakra-ui/utils';
 import Text, { TextProps } from '../Text/Text';
 import Divider from '../Divider/Divider';
+import Box from '../Box/Box';
 import { useDropdownContext, useDropdownStyles } from './Dropdown.context';
 
 export type DropdownOptionProps<T> = {
+  avatar?: AvatarProps;
   value?: T | null;
   children?: ReactNode;
   'aria-label'?: string;
@@ -13,6 +15,7 @@ export type DropdownOptionProps<T> = {
   isDisabled?: boolean;
 };
 const DropdownOption = <T = string,>({
+  avatar,
   children,
   isDisabled,
   onClick,
@@ -22,6 +25,7 @@ const DropdownOption = <T = string,>({
   const { item } = useDropdownStyles();
   const ctx = useDropdownContext<T | null>();
   const { index } = rest as { index?: number };
+
   return (
     <chakra.div
       ref={(node) => {
@@ -52,7 +56,14 @@ const DropdownOption = <T = string,>({
             },
       )}
     >
-      {children}
+      {avatar ? (
+        <Box display="flex" alignItems="center" gap="8">
+          <Avatar size={ctx.size === 'lg' ? '32' : '24'} {...avatar} />
+          {children}
+        </Box>
+      ) : (
+        children
+      )}
     </chakra.div>
   );
 };