@loadsmart/loadsmart-ui 6.1.4 → 6.2.0

package/package.json

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

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

@@ -522,15 +522,14 @@ export function WithExpandableRow(args: TableProps): JSX.Element {
         <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.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.Body withExpandableRows>
           <Table.Expandable.Row
-            index={0}
             leading={leading}
             expandableContent={<div>Forced expanded with custom leading</div>}
             expanded
@@ -540,7 +539,6 @@ export function WithExpandableRow(args: TableProps): JSX.Element {
             <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
@@ -549,12 +547,12 @@ export function WithExpandableRow(args: TableProps): JSX.Element {
             <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.Row 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.Row expanded>
             <Table.Expandable.Cell>123456</Table.Expandable.Cell>
             <Table.Expandable.Cell>Body 5</Table.Expandable.Cell>
             <Table.Expandable.Cell>12345</Table.Expandable.Cell>

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

@@ -196,9 +196,8 @@ describe('<Table />', () => {
             <Table.HeadCell alignment="right">Price $</Table.HeadCell>
           </Table.Row>
         </Table.Head>
-        <Table.Body>
+        <Table.Body withExpandableRows>
           <Table.Expandable.Row
-            index={0}
             expandableContent={<div>This is an expandable content on index 0</div>}
             expanded
           >
@@ -208,7 +207,7 @@ describe('<Table />', () => {
               $9876,50
             </Table.Cell>
           </Table.Expandable.Row>
-          <Table.Expandable.Row index={1}>
+          <Table.Expandable.Row>
             <Table.Cell format="number">#000000-2</Table.Cell>
             <Table.Cell>Modal X 21</Table.Cell>
             <Table.Cell format="currency" alignment="right">
@@ -216,7 +215,6 @@ describe('<Table />', () => {
             </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}
@@ -228,7 +226,6 @@ describe('<Table />', () => {
             </Table.Cell>
           </Table.Expandable.Row>
           <Table.Expandable.Row
-            index={3}
             expandableContent={<div>This is an expandable content on index 3</div>}
             expanded={controlledExpanded4}
           >

package/src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import React, { Children, Fragment, isValidElement, useCallback, useEffect, useState } from 'react'
+import React, { Children, Fragment, isValidElement, useEffect, useState } from 'react'
 import styled, { css } from 'styled-components'
 import type { ReactNode } from 'react'
 import { isFunction } from '@loadsmart/utils-function'
@@ -36,10 +36,15 @@ import type {
   TablePickerItemProps,
   TablePickerProps,
   ExpandableTableRowProps,
+  TableBodyProps,
+  TableHeadCellProps,
 } from './Table.types'
 
-const StyledTableBody = styled.tbody`
-  /* placeholder */
+const StyledTableBody = styled.tbody<{ $withExpandableRows?: boolean }>`
+  background-color: ${conditional({
+    'color-neutral-lightest': whenProps({ $withExpandableRows: true }),
+    initial: whenProps({ $withExpandableRows: false }),
+  })};
 `
 
 const StyledTableFoot = styled.tfoot`
@@ -79,14 +84,21 @@ const StyledTableCell = styled.td<{ alignment?: string; format?: string }>`
   })};
 `
 
-const StyledTableHeadCell = styled.th<{ alignment?: string; clickable: boolean }>`
+const StyledTableHeadCell = styled.th<{
+  alignment?: string
+  clickable: boolean
+  capitalized?: boolean
+}>`
   ${StyledCell}
 
   font-family: ${token('font-family-default')};
 
   font-weight: ${token('font-weight-bold')};
 
-  text-transform: uppercase;
+  text-transform: ${conditional({
+    uppercase: whenProps({ capitalized: false }),
+    capitalize: whenProps({ capitalized: true }),
+  })};
 
   cursor: ${conditional({
     pointer: whenProps({ clickable: true }),
@@ -140,11 +152,36 @@ const StyledTableRow = styled(BaseStyledTableRow)<{ selected?: boolean }>`
   }
 `
 
-const StyledExpandableTableRow = styled(BaseStyledTableRow)<{ $even: boolean }>`
-  background-color: ${conditional({
-    'table-row-variant-color': whenProps({ $even: true }),
-    'color-transparent': whenProps({ $even: false }),
+const StyledExpandableTableRow = styled.tr<{ $isExpanded: boolean }>`
+  background-color: ${token('color-neutral-white')};
+
+  border-color: ${token('color-neutral-light')};
+  border-width: 1px;
+  border-style: ${conditional({
+    solid: whenProps({ $isExpanded: false }),
+    'hidden solid': whenProps({ $isExpanded: true }),
   })};
+
+  box-shadow: ${conditional({
+    '0px 4px 8px 3px rgba(32, 42, 49, 0.15), 0px 1px 3px 0px rgba(94, 118, 138, 0.20)': whenProps({
+      $isExpanded: true,
+    }),
+    none: whenProps({ $isExpanded: false }),
+  })};
+
+  ${hoverable`
+    background-color: ${token('table-row-variant-color')};
+  `}
+
+  ${focusable`
+    box-shadow: inset ${token('shadow-glow-primary')};
+  `}
+`
+
+const StyledExpandableContentRow = styled.tr`
+  border-color: ${token('color-neutral-light')};
+  border-width: 1px;
+  border-style: hidden solid;
 `
 
 const StyledTable = styled.table<{ scale?: string }>`
@@ -221,8 +258,16 @@ function TableHead({ children, ...others }: TableSectionProps): JSX.Element {
   return <StyledTableHead {...others}>{children}</StyledTableHead>
 }
 
-function TableBody({ children, ...others }: TableSectionProps): JSX.Element {
-  return <StyledTableBody {...others}>{children}</StyledTableBody>
+function TableBody({
+  children,
+  withExpandableRows = false,
+  ...others
+}: TableBodyProps): JSX.Element {
+  return (
+    <StyledTableBody {...others} $withExpandableRows={withExpandableRows}>
+      {children}
+    </StyledTableBody>
+  )
 }
 
 function TableCell({
@@ -288,8 +333,8 @@ function SelectionHeadCell<T>(props: SelectionCellProps<T>): JSX.Element {
   )
 }
 
-function ExpandableHeadCell(props: TableCellProps): JSX.Element {
-  return <TableHeadCell {...props} />
+function ExpandableHeadCell(props: TableHeadCellProps): JSX.Element {
+  return <TableHeadCell capitalized {...props} />
 }
 
 function ExpandableCell(props: TableCellProps): JSX.Element {
@@ -307,7 +352,6 @@ function TableRow({ children, ...others }: TableRowProps): JSX.Element {
 }
 
 function ExpandableTableRow({
-  index,
   expandableContent,
   expanded,
   leading: propsLeading,
@@ -319,8 +363,8 @@ function ExpandableTableRow({
   const [openState, setOpenState] = useState(initialExpanded)
 
   const open = expanded ?? openState
+  const isExpanded = Boolean(open && expandableContent)
   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) {
@@ -336,14 +380,14 @@ function ExpandableTableRow({
 
   return (
     <>
-      <StyledExpandableTableRow {...others} onClick={toggle} $even={isEven}>
+      <StyledExpandableTableRow {...others} onClick={toggle} $isExpanded={isExpanded}>
         <ExpandableCell>{expandableContent && leading}</ExpandableCell>
         {children}
       </StyledExpandableTableRow>
-      {open && expandableContent && (
-        <StyledExpandableTableRow $even={isEven}>
+      {isExpanded && (
+        <StyledExpandableContentRow>
           <StyledTableCell colSpan={colSpan}>{expandableContent}</StyledTableCell>
-        </StyledExpandableTableRow>
+        </StyledExpandableContentRow>
       )}
     </>
   )
@@ -353,13 +397,15 @@ function TableHeadCell({
   alignment = 'left',
   children,
   onClick,
+  capitalized = false,
   ...others
-}: TableCellProps): JSX.Element {
+}: TableHeadCellProps): JSX.Element {
   return (
     <StyledTableHeadCell
       clickable={onClick != null}
       alignment={alignment}
       onClick={onClick}
+      capitalized={capitalized}
       {...others}
     >
       <Layout.Group space="xs" align="center">

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

@@ -38,10 +38,13 @@ export interface TableSectionProps extends HTMLAttributes<HTMLTableSectionElemen
   scale?: Scale
 }
 
+export interface TableBodyProps extends TableSectionProps {
+  withExpandableRows?: boolean
+}
+
 export type TableRowProps = HTMLAttributes<HTMLTableRowElement>
 
 export type ExpandableTableRowProps = TableRowProps & {
-  index: number
   expandableContent?: ReactNode
   leading?: ReactNode | ((expanded: boolean) => ReactNode)
   initialExpanded?: boolean
@@ -57,6 +60,10 @@ export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
   selected?: boolean
 }
 
+export interface TableHeadCellProps extends TableCellProps {
+  capitalized?: boolean
+}
+
 export type TableColumn<T = Record<string, unknown>> = {
   /**
    * The accessor of you entry interface