@bitrise/bitkit 10.21.0 → 10.22.0

package/package.json

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

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={{