@loadsmart/loadsmart-ui 5.4.0 → 5.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [

package/src/components/Table/Table.stories.tsx

@@ -508,3 +508,64 @@ This function is passed a boolean \`selected\` and a function \`toggle\`.
     },
   },
 }
+
+export function WithExpandableRow(args: TableProps): JSX.Element {
+  const leading = (expanded: boolean) => {
+    if (expanded) {
+      return <div style={{ fontWeight: 'bold' }}>Open</div>
+    }
+    return <div style={{ fontWeight: 'bold' }}>Closed</div>
+  }
+
+  return (
+    <div className="p-4 bg-neutral-white">
+      <Table {...args}>
+        <Table.Head>
+          <Table.Row>
+            <Table.Expandable.HeadCell />
+            <Table.Expandable.HeadCell>Reference</Table.Expandable.HeadCell>
+            <Table.Expandable.HeadCell>Product</Table.Expandable.HeadCell>
+            <Table.Expandable.HeadCell>Price</Table.Expandable.HeadCell>
+          </Table.Row>
+        </Table.Head>
+
+        <Table.Body>
+          <Table.Expandable.Row
+            index={0}
+            leading={leading}
+            expandableContent={<div>Forced expanded with custom leading</div>}
+            expanded
+          >
+            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
+            <Table.Expandable.Cell>Body 1</Table.Expandable.Cell>
+            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row
+            index={1}
+            leading={leading}
+            expandableContent={<div>Initial expanded row with custom leading</div>}
+            initialExpanded
+          >
+            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
+            <Table.Expandable.Cell>Body 2</Table.Expandable.Cell>
+            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row index={2} expandableContent={<div>Expandable row</div>}>
+            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
+            <Table.Expandable.Cell>Body 3</Table.Expandable.Cell>
+            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row index={3} expanded>
+            <Table.Expandable.Cell>123456</Table.Expandable.Cell>
+            <Table.Expandable.Cell>Body 5</Table.Expandable.Cell>
+            <Table.Expandable.Cell>12345</Table.Expandable.Cell>
+          </Table.Expandable.Row>
+        </Table.Body>
+      </Table>
+    </div>
+  )
+}
+
+WithExpandableRow.args = {
+  scale: 'default',
+}

package/src/components/Table/Table.test.tsx

@@ -182,4 +182,132 @@ describe('<Table />', () => {
     expect(checkboxes[0]).toBeChecked()
     expect(checkboxes[1]).toBeChecked()
   })
+
+  it('Table.Expandable renders correclty', () => {
+    const onExpandedChange = jest.fn()
+
+    const expandableTable = ({ controlledExpanded4 }: { controlledExpanded4: boolean }) => (
+      <React.Fragment>
+        <Table.Head>
+          <Table.Row>
+            <Table.Expandable.HeadCell />
+            <Table.HeadCell># Number</Table.HeadCell>
+            <Table.HeadCell>Company</Table.HeadCell>
+            <Table.HeadCell alignment="right">Price $</Table.HeadCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Expandable.Row
+            index={0}
+            expandableContent={<div>This is an expandable content on index 0</div>}
+            expanded
+          >
+            <Table.Cell format="number">#000000-1</Table.Cell>
+            <Table.Cell>Modal X 21</Table.Cell>
+            <Table.Cell format="currency" alignment="right">
+              $9876,50
+            </Table.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row index={1}>
+            <Table.Cell format="number">#000000-2</Table.Cell>
+            <Table.Cell>Modal X 21</Table.Cell>
+            <Table.Cell format="currency" alignment="right">
+              $9876,50
+            </Table.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row
+            index={2}
+            expandableContent={<div>This is an expandable content on index 2</div>}
+            leading={(expanded) => (expanded ? 'open' : 'closed')}
+            onExpandedChange={onExpandedChange}
+          >
+            <Table.Cell format="number">#000000-3</Table.Cell>
+            <Table.Cell>Modal X 21</Table.Cell>
+            <Table.Cell format="currency" alignment="right">
+              $9876,50
+            </Table.Cell>
+          </Table.Expandable.Row>
+          <Table.Expandable.Row
+            index={3}
+            expandableContent={<div>This is an expandable content on index 3</div>}
+            expanded={controlledExpanded4}
+          >
+            <Table.Cell format="number">#000000-4</Table.Cell>
+            <Table.Cell>Modal X 21</Table.Cell>
+            <Table.Cell format="currency" alignment="right">
+              $9876,50
+            </Table.Cell>
+          </Table.Expandable.Row>
+        </Table.Body>
+      </React.Fragment>
+    )
+    const props = {
+      children: expandableTable({ controlledExpanded4: true }),
+    }
+
+    const { rerender } = setup(props)
+
+    // Check if table is displaying 3 rows
+    const row1 = screen.getByText(/000000-1/i).closest('tr')
+    expect(row1).toBeInTheDocument()
+
+    const row2 = screen.getByText(/000000-2/i).closest('tr')
+    expect(row2).toBeInTheDocument()
+
+    const row3 = screen.getByText(/000000-3/i).closest('tr')
+    expect(row3).toBeInTheDocument()
+
+    const row4 = screen.getByText(/000000-4/i).closest('tr')
+    expect(row4).toBeInTheDocument()
+
+    // Row 1 should be forced to be expanded
+    expect(screen.getByText(/This is an expandable content on index 0/i)).toBeInTheDocument()
+
+    // Clicking row1
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    user.click(row1!)
+
+    // Row 1 can't be collapsed
+    expect(screen.getByText(/This is an expandable content on index 0/i)).toBeInTheDocument()
+
+    // Checking if Row 3 has custom trailing (row is collapsed)
+    expect(screen.getByText(/close/i)).toBeInTheDocument()
+
+    // Expanding row3
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    user.click(row3!)
+    expect(screen.getByText(/This is an expandable content on index 2/i)).toBeInTheDocument()
+
+    // Check if onExpandedChange is triggered
+    expect(onExpandedChange).toHaveBeenCalledTimes(1)
+    expect(onExpandedChange).toHaveBeenCalledWith(true)
+
+    // Checking if Row 3 has custom trailing (row is expanded)
+    expect(screen.getByText(/open/i)).toBeInTheDocument()
+
+    // Collapsing row3
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    user.click(row3!)
+    expect(screen.queryByText(/This is an expandable content on index 2/i)).not.toBeInTheDocument()
+
+    // Check if onExpandedChange is triggered
+    expect(onExpandedChange).toHaveBeenCalledTimes(2)
+    expect(onExpandedChange).toHaveBeenCalledWith(false)
+
+    // Checking controlled expanded (row4), it's opened by default
+    expect(screen.queryByText(/This is an expandable content on index 4/i)).not.toBeInTheDocument()
+
+    // Clicking on row4 shouldn't change the open state because it's controlled externally
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    user.click(row4!)
+
+    // row4 should be still opened
+    expect(screen.queryByText(/This is an expandable content on index 4/i)).not.toBeInTheDocument()
+
+    // Re-render to change controlled state
+    rerender(expandableTable({ controlledExpanded4: false }))
+
+    // row4 should be collapsed because externally controlled state is changed
+    expect(screen.queryByText(/This is an expandable content on index 4/i)).not.toBeInTheDocument()
+  })
 })

package/src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import React, { Children, Fragment, isValidElement, useEffect } from 'react'
+import React, { Children, Fragment, isValidElement, useCallback, useEffect, useState } from 'react'
 import styled, { css } from 'styled-components'
 import type { ReactNode } from 'react'
 import { isFunction } from '@loadsmart/utils-function'
@@ -35,6 +35,7 @@ import type {
   SelectionCellProps,
   TablePickerItemProps,
   TablePickerProps,
+  ExpandableTableRowProps,
 } from './Table.types'
 
 const StyledTableBody = styled.tbody`
@@ -104,27 +105,31 @@ const StyledTableHead = styled.thead`
   }
 `
 
-const StyledTableRow = styled.tr<{ selected?: boolean }>`
+const BaseStyledTableRow = styled.tr`
   ${StyledTableHead} > & {
     height: 36px;
 
     background-color: ${token('color-neutral-white')};
   }
 
+  ${StyledTableBody} > & {
+    ${hoverable`
+    outline: 1px solid ${token('color-accent')};
+  `}
+
+    ${focusable`
+    box-shadow: inset ${token('shadow-glow-primary')};
+  `}
+  }
+`
+
+const StyledTableRow = styled(BaseStyledTableRow)<{ selected?: boolean }>`
   background-color: ${conditional({
     'table-row-selected-color': whenProps({ selected: true }),
     'color-transparent': whenProps({ selected: false }),
   })};
 
   ${StyledTableBody} > & {
-    ${hoverable`
-      outline: 1px solid ${token('color-accent')};
-    `}
-
-    ${focusable`
-      box-shadow: inset ${token('shadow-glow-primary')};
-    `}
-
     &:nth-child(odd) ${StyledTableCell} {
       background: ${token('table-row-variant-color')};
     }
@@ -135,6 +140,13 @@ const StyledTableRow = styled.tr<{ selected?: boolean }>`
   }
 `
 
+const StyledExpandableTableRow = styled(BaseStyledTableRow)<{ $even: boolean }>`
+  background-color: ${conditional({
+    'table-row-variant-color': whenProps({ $even: true }),
+    'color-transparent': whenProps({ $even: false }),
+  })};
+`
+
 const StyledTable = styled.table<{ scale?: string }>`
   width: 100%;
 
@@ -144,7 +156,8 @@ const StyledTable = styled.table<{ scale?: string }>`
 
   border-collapse: collapse;
 
-  ${StyledTableBody} ${StyledTableRow} {
+  ${StyledTableBody} ${StyledTableRow}, 
+  ${StyledTableBody} ${StyledExpandableTableRow} {
     height: ${conditional({
       '24px': whenProps({ scale: 'small' }),
       '48px': whenProps({ scale: 'default' }),
@@ -153,7 +166,9 @@ const StyledTable = styled.table<{ scale?: string }>`
   }
 
   ${StyledTableBody} ${StyledTableRow} ${StyledTableCell},
-  ${StyledTableHead} ${StyledTableRow} ${StyledTableHeadCell} {
+  ${StyledTableHead} ${StyledTableRow} ${StyledTableHeadCell},
+  ${StyledTableBody} ${StyledExpandableTableRow} ${StyledTableCell},
+  ${StyledTableHead} ${StyledExpandableTableRow} ${StyledTableHeadCell} {
     padding: ${conditional({
       'space-xs': whenProps({ scale: 'small' }),
       'space-s': whenProps({ scale: ['default', 'large'] }),
@@ -166,6 +181,12 @@ const StyledTable = styled.table<{ scale?: string }>`
   }
 `
 
+const RotatableIcon = styled(Icon)<{ $rotate: boolean }>`
+  ${conditional({
+    'transform: rotate(90deg);': whenProps({ $rotate: true }),
+  })}
+`
+
 function Table<T>({
   children,
   selection,
@@ -269,6 +290,14 @@ function SelectionHeadCell<T>(props: SelectionCellProps<T>): JSX.Element {
   )
 }
 
+function ExpandableHeadCell(props: TableCellProps): JSX.Element {
+  return <TableHeadCell {...props} />
+}
+
+function ExpandableCell(props: TableCellProps): JSX.Element {
+  return <TableCell {...props} />
+}
+
 function TableRow({ children, ...others }: TableRowProps): JSX.Element {
   const selected = useIsRowSelected(children)
 
@@ -279,6 +308,49 @@ function TableRow({ children, ...others }: TableRowProps): JSX.Element {
   )
 }
 
+function ExpandableTableRow({
+  index,
+  expandableContent,
+  expanded,
+  leading: propsLeading,
+  children,
+  onExpandedChange,
+  initialExpanded = false,
+  ...others
+}: ExpandableTableRowProps): JSX.Element {
+  const [openState, setOpenState] = useState(initialExpanded)
+
+  const open = expanded ?? openState
+  const colSpan = Array.isArray(children) ? children.length + 1 : 1
+  const isEven = index % 2 === 0
+
+  let leading: ReactNode = <RotatableIcon name="caret-right" $rotate={open} />
+  if (propsLeading) {
+    leading = isFunction(propsLeading) ? propsLeading(open) : propsLeading
+  }
+
+  function toggle() {
+    if (!expandableContent) return
+
+    onExpandedChange?.(!open)
+    setOpenState(!open)
+  }
+
+  return (
+    <>
+      <StyledExpandableTableRow {...others} onClick={toggle} $even={isEven}>
+        <ExpandableCell>{expandableContent && leading}</ExpandableCell>
+        {children}
+      </StyledExpandableTableRow>
+      {open && expandableContent && (
+        <StyledExpandableTableRow $even={isEven}>
+          <StyledTableCell colSpan={colSpan}>{expandableContent}</StyledTableCell>
+        </StyledExpandableTableRow>
+      )}
+    </>
+  )
+}
+
 function TableHeadCell({
   alignment = 'left',
   children,
@@ -436,6 +508,11 @@ Table.Selection = {
   Cell: SelectionCell,
   HeadCell: SelectionHeadCell,
 }
+Table.Expandable = {
+  HeadCell: ExpandableHeadCell,
+  Cell: ExpandableCell,
+  Row: ExpandableTableRow,
+}
 Table.SortHandle = TableSortHandle
 TablePicker.Item = TablePickerItem
 Table.Picker = TablePicker

package/src/components/Table/Table.types.ts

@@ -35,6 +35,15 @@ export interface TableSectionProps extends HTMLAttributes<HTMLTableSectionElemen
 
 export type TableRowProps = HTMLAttributes<HTMLTableRowElement>
 
+export type ExpandableTableRowProps = TableRowProps & {
+  index: number
+  expandableContent?: ReactNode
+  leading?: ReactNode | ((expanded: boolean) => ReactNode)
+  initialExpanded?: boolean
+  expanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
+}
+
 export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
   alignment?: 'left' | 'right'
   format?: 'default' | 'number' | 'currency'