@bitrise/bitkit 10.20.1 → 10.22.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.20.1",
+  "version": "10.22.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Dropdown/Dropdown.test.tsx

@@ -31,6 +31,13 @@ const TestComponent = forwardRef<
 });
 
 describe('Dropdown', () => {
+  it('sets ref to the button', async () => {
+    const handler = jest.fn();
+    render(<Dropdown ref={handler} />);
+    const button = await screen.findByRole('combobox');
+    expect(handler).toHaveBeenCalledWith(button);
+  });
+
   it('shows option on button', async () => {
     render(<TestComponent submit={() => {}} />);
     const button = await screen.findByRole('combobox', { name: 'Test' });

package/src/Components/Dropdown/Dropdown.tsx

@@ -1,14 +1,4 @@
-import React, {
-  cloneElement,
-  forwardRef,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { cloneElement, forwardRef, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   chakra,
   ChakraProps,
@@ -18,7 +8,7 @@ import {
   useControllableState,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
-import { FloatingFocusManager } from '@floating-ui/react-dom-interactions';
+import { FloatingFocusManager, UseFloatingProps } from '@floating-ui/react-dom-interactions';
 import Icon, { TypeIconName } from '../Icon/Icon';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
 import { DropdownOption, DropdownGroup, DropdownDetailedOption, DropdownOptionProps } from './DropdownOption';
@@ -95,6 +85,8 @@ export interface DropdownProps<T> extends ChakraProps {
   size?: 'small' | 'medium';
   dropdownMaxHeight?: ChakraProps['maxH'];
   dropdownMinHeight?: ChakraProps['minH'];
+  dropdownWidth?: ChakraProps['width'] | 'match';
+  placement?: UseFloatingProps['placement'];
   readOnly?: boolean;
   disabled?: boolean;
   placeholder?: string;
@@ -102,7 +94,7 @@ export interface DropdownProps<T> extends ChakraProps {
   search?: ReactNode;
   children?: ReactNode;
   iconName?: TypeIconName;
-  formLabel?: string;
+  formLabel?: ReactNode;
 }
 
 function useOptionListWithIndexes({ children }: { children: ReactNode }) {
@@ -132,8 +124,8 @@ function useOptionListWithIndexes({ children }: { children: ReactNode }) {
   }, [children]);
 }
 
-type UseDropdownProps<T> = {
-  ref: React.Ref<DropdownInstance<T>>;
+type UseDropdownProps = {
+  ref: React.Ref<Element>;
   optionsRef: React.RefObject<HTMLDivElement>;
 };
 
@@ -162,11 +154,13 @@ function useDropdown<T>({
   value,
   optionsRef,
   defaultValue,
+  dropdownWidth = 'match',
+  placement,
   ref,
   children,
   readOnly,
   ...rest
-}: DropdownProps<T> & UseDropdownProps<T>) {
+}: DropdownProps<T> & UseDropdownProps) {
   const searchRef = useRef(null);
   const {
     close,
@@ -179,7 +173,7 @@ function useDropdown<T>({
     setActiveIndex,
     getItemProps,
     listRef,
-  } = useFloatingDropdown({ enabled: !readOnly, optionsRef });
+  } = useFloatingDropdown({ enabled: !readOnly, optionsRef, dropdownWidth, placement });
   const [formValue, setFormValue] = useControllableState<T>({
     onChange: (newValue) => onChange?.({ target: { value: newValue, name } }),
     defaultValue,
@@ -187,7 +181,6 @@ function useDropdown<T>({
   });
 
   const [formLabel, setFormLabel] = useState<ReactNode>();
-  useImperativeHandle(ref, () => ({ value: formValue, name }), [formValue, name]);
   const refdChildren = useOptionListWithIndexes({ children });
 
   const searchOnSubmit = useCallback(() => {
@@ -251,6 +244,7 @@ function useDropdown<T>({
   return {
     isOpen,
     referenceProps: getReferenceProps({
+      ref,
       onKeyDown: referenceKeyDown,
     }),
     floatingProps,
@@ -265,11 +259,12 @@ function useDropdown<T>({
   };
 }
 
-const Dropdown = forwardRef<DropdownInstance<string | null>, DropdownProps<string | null>>(
+const Dropdown = forwardRef<Element, DropdownProps<string | null>>(
   (
     {
       dropdownMaxHeight,
       dropdownMinHeight,
+      dropdownWidth,
       readOnly,
       onBlur,
       placeholder,
@@ -297,6 +292,7 @@ const Dropdown = forwardRef<DropdownInstance<string | null>, DropdownProps<strin
       name,
       readOnly,
       optionsRef,
+      dropdownWidth,
       ref,
       ...props,
     });
@@ -350,7 +346,7 @@ const Dropdown = forwardRef<DropdownInstance<string | null>, DropdownProps<strin
 
 export function typedDropdown<T>() {
   return {
-    Dropdown: Dropdown as React.ForwardRefExoticComponent<DropdownProps<T> & React.RefAttributes<DropdownInstance<T>>>,
+    Dropdown: Dropdown as React.ForwardRefExoticComponent<DropdownProps<T> & React.RefAttributes<Element>>,
     DropdownOption: DropdownOption as (p: DropdownOptionProps<T>) => JSX.Element,
   };
 }

package/src/Components/Dropdown/hooks/useFloatingDropdown.ts

@@ -9,10 +9,28 @@ import {
   useRole,
   useDismiss,
   flip,
+  UseFloatingProps,
+  MiddlewareArguments,
 } from '@floating-ui/react-dom-interactions';
+import { ChakraProps } from '@chakra-ui/react';
+import { mergeRefs } from '@chakra-ui/react-utils';
 import useAutoScroll from './useAutoScroll';
 
-const useFloatingDropdown = ({ enabled, optionsRef }: { enabled: boolean; optionsRef: RefObject<HTMLDivElement> }) => {
+type ApplyFnArgs = MiddlewareArguments & {
+  availableWidth: number;
+  availableHeight: number;
+};
+const useFloatingDropdown = ({
+  enabled,
+  optionsRef,
+  dropdownWidth,
+  placement,
+}: {
+  enabled: boolean;
+  optionsRef: RefObject<HTMLDivElement>;
+  dropdownWidth: ChakraProps['width'] | 'match';
+  placement: UseFloatingProps['placement'] | undefined;
+}) => {
   const listRef = useRef<HTMLElement[]>([]);
   const [isOpen, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
@@ -22,18 +40,21 @@ const useFloatingDropdown = ({ enabled, optionsRef }: { enabled: boolean; option
     setKeyboardControlled(true);
   }, [isOpen]);
 
-  const { context, reference, floating, strategy, x, y } = useFloating({
+  const widthRef = useRef(dropdownWidth);
+  widthRef.current = dropdownWidth;
+  const { context, reference, floating, strategy, x, y } = useFloating<Element>({
     open: enabled && isOpen,
     onOpenChange: setOpen,
+    placement,
     whileElementsMounted(aRef, aFloat, update) {
       return autoUpdate(aRef, aFloat, update, { elementResize: false });
     },
     middleware: [
       size({
         padding: 5,
-        apply({ elements, availableHeight, rects }) {
+        apply: ({ elements, availableHeight, rects }: ApplyFnArgs) => {
           Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
+            width: widthRef.current === 'match' ? `${rects.reference.width}px` : widthRef.current,
           });
           elements.floating.style.setProperty('--floating-available-height', `${availableHeight}px`);
         },
@@ -91,8 +112,9 @@ const useFloatingDropdown = ({ enabled, optionsRef }: { enabled: boolean; option
     activeIndex,
     setActiveIndex,
     setSelectedIndex,
-    getReferenceProps(props: React.HTMLProps<Element>) {
-      return getReferenceProps({ ...props, ref: reference });
+    getReferenceProps({ ref, ...props }: React.HTMLProps<Element>) {
+      const merged = mergeRefs(ref as any, reference);
+      return getReferenceProps({ ...props, ref: merged });
     },
     floatingProps: getFloatingProps({
       ref: floating,

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

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useForm } from 'react-hook-form';
+import Textarea from './Textarea';
+
+describe('Textarea', () => {
+  it('forwards data-testid', async () => {
+    render(<Textarea data-testid="testid" />);
+    const elem = await screen.findByTestId('testid');
+    expect(elem.tagName).toBe('TEXTAREA');
+    expect(elem).toBeInTheDocument();
+  });
+  describe('react-hook-form support', () => {
+    it('sends data when submitted', async () => {
+      const handler = jest.fn();
+      const TestComponent = () => {
+        const { register, handleSubmit } = useForm();
+        return (
+          <form onSubmit={handleSubmit((data) => handler(data))}>
+            <Textarea {...register('textarea')} />
+            <button type="submit">Send</button>
+          </form>
+        );
+      };
+      render(<TestComponent />);
+      const submit = await screen.findByRole('button', { name: 'Send' });
+      const textarea = await screen.findByRole('textbox');
+      await userEvent.type(textarea, 'test');
+      await userEvent.click(submit);
+
+      expect(handler).toHaveBeenCalledWith({ textarea: 'test' });
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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

@@ -10,13 +10,15 @@ import {
   forwardRef,
 } from '@chakra-ui/react';
 
-export interface TextareaProps extends Omit<FormControlProps, 'label' | 'onChange'> {
-  dataTestid?: string;
+export interface TextareaProps extends Omit<FormControlProps, 'label' | 'onChange' | 'onBlur'> {
+  'data-testid'?: string;
   errorText?: string;
   isLoading?: boolean;
   helpherText?: string;
   label?: ReactNode;
+  name?: string;
   onChange?: ChakraTextareaProps['onChange'];
+  onBlur?: ChakraTextareaProps['onBlur'];
   value?: ChakraTextareaProps['value'];
 }
 
@@ -25,7 +27,7 @@ export interface TextareaProps extends Omit<FormControlProps, 'label' | 'onChang
  */
 const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
   const {
-    dataTestid,
+    'data-testid': dataTestid,
     errorText,
     helpherText,
     isDisabled,
@@ -34,12 +36,16 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
     label,
     placeholder,
     onChange,
+    onBlur,
+    name,
     value,
     ...rest
   } = props;
   const textareaProps = {
-    dataTestid,
+    'data-testid': dataTestid,
     onChange,
+    onBlur,
+    name,
     placeholder,
     value,
   };

package/src/Components/Table/Table.stories.tsx

@@ -132,13 +132,14 @@ ExpandableRows.args = {
       <TableCaption description="Click on a row">Expandable rows</TableCaption>
       <Thead>
         <Tr>
+          <Th />
           <Th colSpan={2}>ID</Th>
           <Th>Status</Th>
           <Th>Time</Th>
         </Tr>
       </Thead>
       <Tbody>
-        <Tr expandableContent={<Box paddingY="12">😎</Box>}>
+        <Tr expandableContent={<Box paddingY="12">😎</Box>} defaultIsExpanded>
           <Td>f6963af857c8f2fe</Td>
           <Td>Success</Td>
           <Td>May 29, 2022 10:11:32am</Td>
@@ -148,6 +149,12 @@ ExpandableRows.args = {
           <Td>Aborted</Td>
           <Td>May 29, 2022 9:12:50am</Td>
         </Tr>
+        <Tr>
+          <Td />
+          <Td>f6963af857c8f2fe</Td>
+          <Td>Failed</Td>
+          <Td>May 29, 2022 10:11:32am</Td>
+        </Tr>
       </Tbody>
     </>
   ),

package/src/Components/Table/Table.theme.ts

@@ -91,9 +91,7 @@ const Tabletheme: SystemStyleObject = {
     expandTd: {
       borderBottomColor: 'transparent',
       width: '1%',
-      '+ td': {
-        paddingLeft: 0,
-      },
+      paddingRight: 0,
     },
   },
 };

package/src/Components/Table/Tr.tsx

@@ -1,4 +1,4 @@
-import { Children, ReactNode } from 'react';
+import { Children, ReactNode, useCallback } from 'react';
 import {
   Collapse,
   Tr as ChakraTr,
@@ -10,19 +10,33 @@ import {
 import IconButton from '../IconButton/IconButton';
 import Td from './Td';
 
-export interface TableRowProps extends ChakraTableRowProps {
-  expandableContent?: ReactNode | undefined;
+type RowProps = ChakraTableRowProps & {
   /**
    * @deprecated - Please use it only when really necessary, we are working on a new table-like components with clickable items
    */
   onClick?: ChakraTableRowProps['onClick'];
-}
+};
+
+type NonExpandableProps = ChakraTableRowProps & {
+  expandableContent?: never;
+  defaultIsExpanded?: never;
+  onExpandedChanged?: never;
+};
+
+type ExpandableProps = ChakraTableRowProps & {
+  expandableContent: ReactNode | undefined;
+  defaultIsExpanded?: boolean;
+  onExpandedChanged?(isExpanded: boolean): void;
+};
+
+export type TableRowProps = RowProps & (NonExpandableProps | ExpandableProps);
 
 const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
-  const { isOpen, onToggle } = useDisclosure();
+  const { children, defaultIsExpanded, onExpandedChanged, expandableContent, onClick, ...rest } = props;
+
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: defaultIsExpanded });
   const css = useTableStyles();
 
-  const { children, expandableContent, onClick, ...rest } = props;
   const properties: ChakraTableRowProps = {
     onClick,
     ...rest,
@@ -32,7 +46,12 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
     properties.sx = css.clickableTr;
   }
 
-  //
+  const onToggleClick = useCallback(() => {
+    const nextOpen = !isOpen;
+    onToggle();
+    onExpandedChanged?.(nextOpen);
+  }, [isOpen, onToggle, onExpandedChanged]);
+
   if (expandableContent) {
     const colSpan = Children.count(children) + 1;
     return (
@@ -42,7 +61,7 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
             <IconButton
               iconName="ChevronDown"
               aria-label="Toggle current row"
-              onClick={onToggle}
+              onClick={onToggleClick}
               size="small"
               variant="tertiary"
               sx={{