@bitrise/bitkit 13.204.0 → 13.206.0

package/package.json

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

@@ -20,6 +20,7 @@ import {
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import { TooltipProps } from '../../Tooltip/Tooltip';
 import FormLabel, { FormLabelProps } from '../FormLabel';
+import { getDataAttributes } from '../../../utils/utils';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraInputProps = Pick<
@@ -42,7 +43,6 @@ type UsedChakraInputProps = Pick<
 >;
 export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
   badge?: FormLabelProps['badge'];
-  'data-testid'?: string;
   errorText?: ReactNode;
   infoTooltipLabel?: string;
   infoTooltipProps?: TooltipProps;
@@ -74,7 +74,6 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     autoComplete,
     autoFocus,
     badge,
-    'data-testid': dataTestid,
     defaultValue,
     errorText,
     helperText,
@@ -124,7 +123,6 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
   const inputProps = {
     autoComplete,
     autoFocus,
-    'data-testid': dataTestid,
     defaultValue,
     max,
     maxLength,
@@ -142,6 +140,8 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     value,
   };
 
+  const dataAttributes = getDataAttributes(rest);
+
   const inputInlinePadding = size === 'lg' ? '15' : '11';
 
   const RightContentWrapper = rightAddonPlacement === 'inside' ? InputRightElement : InputRightAddon;
@@ -193,6 +193,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
           paddingLeft={inputLeftPadding}
           paddingRight={inputRightPadding}
           {...inputProps}
+          {...dataAttributes}
           onChange={onInputChange}
         />
         {rightAddon && <RightContentWrapper>{rightAddon}</RightContentWrapper>}

package/src/Components/Form/Textarea/Textarea.tsx

@@ -10,6 +10,7 @@ import {
 } from '@chakra-ui/react';
 import { TooltipProps } from '../../Tooltip/Tooltip';
 import FormLabel, { FormLabelProps } from '../FormLabel';
+import { getDataAttributes } from '../../../utils/utils';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraTextProps = Pick<
@@ -28,7 +29,6 @@ type UsedChakraTextProps = Pick<
 
 export interface TextareaProps extends UsedFormControlProps, UsedChakraTextProps {
   badge?: FormLabelProps['badge'];
-  'data-testid'?: string;
   errorText?: string;
   infoTooltipLabel?: string;
   infoTooltipProps?: TooltipProps;
@@ -50,7 +50,6 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
     autoComplete,
     autoFocus,
     badge,
-    'data-testid': dataTestid,
     errorText,
     helperText,
     infoTooltipLabel,
@@ -80,7 +79,6 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
   const textareaProps = {
     autoComplete,
     autoFocus,
-    'data-testid': dataTestid,
     maxLength,
     minLength,
     name,
@@ -101,6 +99,8 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
     }
   };
 
+  const dataAttributes = getDataAttributes(props);
+
   return (
     <FormControl {...formControlProps}>
       <FormLabel
@@ -114,7 +114,7 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
         {label}
       </FormLabel>
 
-      <ChakraTextarea {...textareaProps} onChange={onTextareaChange} />
+      <ChakraTextarea {...textareaProps} {...dataAttributes} onChange={onTextareaChange} />
       {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
       {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
     </FormControl>

package/src/Components/Select/Select.tsx

@@ -14,10 +14,10 @@ import Icon from '../Icon/Icon';
 import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
 import FormLabel, { FormLabelProps } from '../Form/FormLabel';
 import { TooltipProps } from '../Tooltip/Tooltip';
+import { getDataAttributes } from '../../utils/utils';
 
 export interface SelectProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
   badge?: FormLabelProps['badge'];
-  'data-testid'?: string;
   errorText?: string;
   helperText?: ReactNode;
   infoTooltipLabel?: string;
@@ -37,7 +37,6 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
   const {
     badge,
     children,
-    'data-testid': dataTestid,
     defaultValue,
     errorText,
     helperText,
@@ -74,6 +73,9 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
     size,
     value,
   };
+
+  const dataAttributes = getDataAttributes(props);
+
   if (placeholder) {
     if ('value' in props) {
       selectProperties.value = selectProperties.value ?? '';
@@ -94,7 +96,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} {...dataAttributes} 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;