@bitrise/bitkit 13.203.0 → 13.205.0

package/package.json

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

package/src/Components/Dropdown/Dropdown.tsx

@@ -21,6 +21,7 @@ import { FloatingFocusManager } from '@floating-ui/react-dom-interactions';
 import SearchInput from '../SearchInput/SearchInput';
 import FormLabel from '../Form/FormLabel';
 import { AvatarProps } from '../Avatar/Avatar';
+import { getDataAttributes } from '../../utils/utils';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
 import { DropdownDetailedOption, DropdownGroup, DropdownOption, DropdownOptionProps } from './DropdownOption';
 import DropdownButton from './DropdownButton';
@@ -261,7 +262,6 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
       'aria-label': ariaLabel,
       badge,
       buttonProps = {},
-      'data-testid': dataTestid,
       defaultValue,
       disabled,
       dropdownMaxHeight,
@@ -291,6 +291,8 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
     },
     ref,
   ) => {
+    const dataAttributes = getDataAttributes(props);
+
     const optionsRef = useRef(null);
     const {
       avatar,
@@ -352,7 +354,7 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
       <>
         {name && formValue && <input name={name} type="hidden" value={formValue} />}
         <DropdownProvider context={dropdownCtx} styles={dropdownStyles}>
-          <FormControl {...props} isDisabled={disabled} isInvalid={isError} isRequired={required}>
+          <FormControl {...props} {...dataAttributes} isDisabled={disabled} isInvalid={isError} isRequired={required}>
             <FormLabel
               badge={badge}
               infoTooltipLabel={infoTooltipLabel}
@@ -366,7 +368,6 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
               {...buttonProps}
               aria-label={ariaLabel}
               avatar={avatar}
-              data-testid={dataTestid}
               id={buttonId}
               iconName={iconName}
               blurHandler={blurHandler}
@@ -388,7 +389,7 @@ const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
           </FormControl>
           {isOpen && (
             <FloatingFocusManager context={floatingContext} initialFocus={searchRef} returnFocus={returnFocus}>
-              <chakra.div {...floatingProps} sx={listStyles}>
+              <chakra.div {...floatingProps} {...dataAttributes} sx={listStyles}>
                 {searchElement}
                 <chakra.div ref={optionsRef} __css={dropdownStyles.options} tabIndex={-1}>
                   {children}

package/src/Components/Dropdown/DropdownProps.ts

@@ -14,7 +14,6 @@ export interface DropdownProps<T> extends ChakraProps {
   badge?: FormLabelProps['badge'];
   buttonProps?: ChakraProps;
   children?: ReactNode;
-  'data-testid'?: string;
   defaultValue?: T;
   disabled?: boolean;
   dropdownMinHeight?: ChakraProps['minH'];

package/src/Components/Filter/FilterForm/FilterForm.tsx

@@ -13,7 +13,7 @@ import RadioGroup from '../../Form/Radio/RadioGroup';
 import SearchInput from '../../SearchInput/SearchInput';
 import Text from '../../Text/Text';
 import { FilterStyle } from '../Filter.theme';
-import { FilterOptions, FilterValue } from '../Filter.types';
+import { FilterOptions, FilterOptionsMap, FilterValue } from '../Filter.types';
 import { isEqual, useDebounce } from '../../../utils/utils';
 import { getOptionLabel } from '../Filter.utils';
 import { useFilterContext } from '../Filter.context';
@@ -50,6 +50,7 @@ const FilterForm = (props: FilterFormProps) => {
 
   const [isLoading, setLoading] = useState(Boolean(isInitialLoading));
   const [foundOptions, setFoundOptions] = useState<FilterOptions>([]);
+  const [foundOptionsMap, setFoundOptionsMap] = useState<FilterOptionsMap>();
 
   const isAsync = !!onAsyncSearch;
   const withSearch = (options && options.length > 5) || isAsync;
@@ -105,6 +106,7 @@ const FilterForm = (props: FilterFormProps) => {
       const response = await onAsyncSearch(category, searchValue);
       setLoading(false);
       setFoundOptions(response.options);
+      setFoundOptionsMap(response.optionsMap || optionsMap);
     }
   };
 
@@ -122,10 +124,13 @@ const FilterForm = (props: FilterFormProps) => {
 
   const isEditMode = value.length !== 0;
 
-  const items =
-    isAsync && !!searchValue
-      ? Array.from(new Set(preserveOptionOrder ? [...foundOptions] : [...value, ...foundOptions]))
-      : Array.from(new Set(preserveOptionOrder ? [...filteredOptions] : [...value, ...filteredOptions]));
+  const isAsyncSearch = isAsync && !!searchValue;
+
+  const items = isAsyncSearch
+    ? Array.from(new Set(preserveOptionOrder ? [...foundOptions] : [...value, ...foundOptions]))
+    : Array.from(new Set(preserveOptionOrder ? [...filteredOptions] : [...value, ...filteredOptions]));
+
+  const currentOptionMap = isAsyncSearch ? foundOptionsMap : optionsMap;
 
   return (
     <FocusLock>
@@ -156,7 +161,7 @@ const FilterForm = (props: FilterFormProps) => {
               ? items.map((opt) => (
                   <Checkbox key={opt} value={opt}>
                     {iconsMap && iconsMap[opt] && <Icon name={iconsMap[opt]} />}
-                    {getOptionLabel(opt, optionsMap)}
+                    {getOptionLabel(opt, currentOptionMap)}
                   </Checkbox>
                 ))
               : getEmptyText()}
@@ -174,7 +179,7 @@ const FilterForm = (props: FilterFormProps) => {
             {items.length
               ? items.map((opt) => {
                   const hasIcon = iconsMap && iconsMap[opt];
-                  const label = getOptionLabel(opt, optionsMap);
+                  const label = getOptionLabel(opt, currentOptionMap);
                   return (
                     <Radio key={opt} value={opt}>
                       {hasIcon ? (

package/src/Components/Select/Select.tsx

@@ -17,7 +17,6 @@ import { TooltipProps } from '../Tooltip/Tooltip';
 
 export interface SelectProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
   badge?: FormLabelProps['badge'];
-  'data-testid'?: string;
   errorText?: string;
   helperText?: ReactNode;
   infoTooltipLabel?: string;
@@ -37,7 +36,6 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
   const {
     badge,
     children,
-    'data-testid': dataTestid,
     defaultValue,
     errorText,
     helperText,
@@ -94,7 +92,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
         {label}
       </FormLabel>
       <Box sx={style.selectContainer}>
-        <ChakraSelect ref={ref} data-testid={dataTestid} {...selectProperties} sx={style.field}>
+        <ChakraSelect ref={ref} {...selectProperties} sx={style.field}>
           {placeholder && (
             <option disabled value="">
               {placeholder}

package/src/Components/Toast/Toast.tsx

@@ -2,8 +2,9 @@ import { AlertDescription, AlertTitle, useToast as useChakraToast, UseToastOptio
 import { DateTime } from 'luxon';
 import Box from '../Box/Box';
 import Notification, { ActionProps, NotificationAction, NotificationProps } from '../Notification/Notification';
+import { DataAttributes } from '../../types/bitkit';
 
-export interface ToastOptions {
+export interface ToastOptions extends DataAttributes {
   title?: string;
   description: React.ReactNode;
   status: NotificationProps['status'];
@@ -16,27 +17,38 @@ export interface ToastOptions {
 
 const useToast = () => {
   const toast = useChakraToast();
-  return (opts: ToastOptions) => {
+  return ({
+    action,
+    description,
+    duration,
+    isClosable,
+    position,
+    showTimestamp,
+    status,
+    title,
+    ...rest
+  }: ToastOptions) => {
     let timestamp: string | undefined;
-    if (opts.showTimestamp) {
+    if (showTimestamp) {
       timestamp = DateTime.now().toFormat('hh:mm:ssa');
     }
     toast({
-      duration: opts.duration,
-      isClosable: opts.isClosable,
-      position: opts.position || 'top-right',
+      duration,
+      isClosable,
+      position: position || 'top-right',
       render: ({ onClose }) => (
         <Notification
           boxShadow="large"
           maxW="437px"
-          onClose={opts.isClosable ? onClose : undefined}
-          status={opts.status || 'info'}
+          onClose={isClosable ? onClose : undefined}
+          status={status || 'info'}
+          {...rest}
         >
           <Box display="flex" flexDirection="column">
-            {opts.title && <AlertTitle>{opts.title}</AlertTitle>}
-            {opts.description && <AlertDescription>{opts.description}</AlertDescription>}
-            {!opts.action && timestamp && <AlertDescription marginTop="8">{timestamp}</AlertDescription>}
-            {opts.action && <NotificationAction alignSelf="start" marginBottom="4" marginTop="8" {...opts.action} />}
+            {title && <AlertTitle>{title}</AlertTitle>}
+            {description && <AlertDescription>{description}</AlertDescription>}
+            {!action && timestamp && <AlertDescription marginTop="8">{timestamp}</AlertDescription>}
+            {action && <NotificationAction alignSelf="start" marginBottom="4" marginTop="8" {...action} />}
           </Box>
         </Notification>
       ),

package/src/types/bitkit.ts

@@ -26,3 +26,7 @@ export type Shadows = keyof typeof tokens.shadows;
 export type TextSizes = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
 
 export type TypeSizes = keyof typeof tokens.sizes;
+
+export type DataAttributes = {
+  [key: `data-${string}`]: string;
+};

package/src/utils/utils.ts

@@ -50,3 +50,16 @@ export function useDebounce<T>(value: T, delay?: number): T {
 
   return debouncedValue;
 }
+
+export function getDataAttributes(attributes: Record<string, any>) {
+  return Object.keys(attributes).reduce(
+    (acc, key) => {
+      if (key.startsWith('data-')) {
+        acc[key] = attributes[key as any];
+      }
+
+      return acc;
+    },
+    {} as { [key: string]: string | boolean },
+  );
+}

package/src/Components/ValueDialog/ValueDialog.tsx

@@ -1,37 +0,0 @@
-import { ElementType, ReactNode, useState } from 'react';
-import { MergeWithAs } from '@chakra-ui/react';
-import Dialog, { DialogProps } from '../Dialog/Dialog';
-
-type ValueDialogProps<T> = { value?: T; children: (value: T) => ReactNode } & Omit<
-  DialogProps,
-  'isOpen' | 'onCloseComplete' | 'children'
->;
-
-type ComponentWithAs<Component extends ElementType = 'section'> = {
-  <T, AsComponent extends ElementType = Component>(
-    props: MergeWithAs<
-      React.ComponentProps<Component>,
-      React.ComponentProps<AsComponent>,
-      ValueDialogProps<T>,
-      AsComponent
-    >,
-  ): JSX.Element;
-};
-const ValueDialog: ComponentWithAs = ({ value, onClose, children, ...rest }) => {
-  const [closing, setClosing] = useState(false);
-  return (
-    <Dialog
-      isOpen={Boolean(value) || !closing}
-      onClose={() => setClosing(true)}
-      onCloseComplete={() => {
-        onClose();
-        setClosing(false);
-      }}
-      {...rest}
-    >
-      {value && children(value)}
-    </Dialog>
-  );
-};
-
-export default ValueDialog;