@bitrise/bitkit 10.26.1 → 10.28.0

package/package.json

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

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

@@ -16,7 +16,7 @@ type DropdownContext<T> = {
   searchOnSubmit: () => void;
   filter?: string;
   activeIndex?: number | null;
-  getItemProps: (x: object) => object;
+  getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
 };
 
 const [DropdownContextProvider, useDropdownContext] = createContext<DropdownContext<unknown>>();

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

@@ -581,4 +581,46 @@ describe('Dropdown', () => {
       expect(button).toHaveTextContent('Custom label');
     });
   });
+
+  describe('option onClick support', () => {
+    it('calls onClick handler on option', async () => {
+      const onChangeHandler = jest.fn();
+      const onClickHandler = jest.fn();
+
+      render(
+        <Dropdown onChange={onChangeHandler}>
+          <DropdownOption value="Test option 1">Test option 1</DropdownOption>
+          <DropdownOption value="Test option 2" onClick={onClickHandler}>
+            Test option 2
+          </DropdownOption>
+        </Dropdown>,
+      );
+
+      const button = await screen.findByRole('combobox');
+      await userEvent.click(button);
+      const option2 = await screen.findByRole('option', { name: 'Test option 2' });
+      await userEvent.click(option2);
+      expect(onClickHandler).toHaveBeenCalled();
+      expect(onChangeHandler).toHaveBeenCalled();
+    });
+
+    it("doesn't call onChange handler if option's onClick handler prevented it", async () => {
+      const onChangeHandler = jest.fn();
+
+      render(
+        <Dropdown onChange={onChangeHandler}>
+          <DropdownOption value="Test option 1">Test option 1</DropdownOption>
+          <DropdownOption value="Test option 2" onClick={(event) => event.preventDefault()}>
+            Test option 2
+          </DropdownOption>
+        </Dropdown>,
+      );
+
+      const button = await screen.findByRole('combobox');
+      await userEvent.click(button);
+      const option2 = await screen.findByRole('option', { name: 'Test option 2' });
+      await userEvent.click(option2);
+      expect(onChangeHandler).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/Components/Dropdown/DropdownOption.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useId } from 'react';
+import { MouseEventHandler, ReactNode, useId } from 'react';
 import { chakra } from '@chakra-ui/react';
 import { cx } from '@chakra-ui/utils';
 import Text from '../Text/Text';
@@ -9,8 +9,9 @@ export type DropdownOptionProps<T> = {
   value?: T | null;
   children?: ReactNode;
   'aria-label'?: string;
+  onClick?: MouseEventHandler<HTMLElement>;
 };
-const DropdownOption = <T = string,>({ value = null, children, ...rest }: DropdownOptionProps<T>) => {
+const DropdownOption = <T = string,>({ value = null, children, onClick, ...rest }: DropdownOptionProps<T>) => {
   const { item } = useDropdownStyles();
   const ctx = useDropdownContext<T | null>();
   const { index } = rest as { index?: number };
@@ -30,8 +31,12 @@ const DropdownOption = <T = string,>({ value = null, children, ...rest }: Dropdo
       )}
       __css={item}
       {...ctx.getItemProps({
-        onClick() {
-          ctx.onOptionSelected({ value, index, label: children });
+        onClick(event) {
+          onClick?.(event);
+
+          if (!event.defaultPrevented) {
+            ctx.onOptionSelected({ value, index, label: children });
+          }
         },
       })}
     >

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

@@ -188,7 +188,7 @@ ExpandableRows.args = {
       <Thead>
         <Tr>
           <Th />
-          <Th colSpan={2}>ID</Th>
+          <Th>ID</Th>
           <Th>Status</Th>
           <Th>Time</Th>
         </Tr>

package/src/Components/Table/Tr.tsx

@@ -60,7 +60,7 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
           <Td sx={css.expandTd}>
             <IconButton
               iconName="ChevronDown"
-              aria-label="Toggle current row"
+              aria-label={isOpen ? 'Collapse row' : 'Expand row'}
               onClick={onToggleClick}
               size="small"
               variant="tertiary"
@@ -76,7 +76,9 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
         </ChakraTr>
         <ChakraTr>
           <Td colSpan={colSpan} paddingY="0" transform={isOpen ? 'none' : 'translateY(-1px)'}>
-            <Collapse in={isOpen}>{expandableContent}</Collapse>
+            <Collapse in={isOpen} unmountOnExit>
+              {expandableContent}
+            </Collapse>
           </Td>
         </ChakraTr>
       </>