@loadsmart/loadsmart-ui 6.1.4 → 6.3.0

package/package.json

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

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

@@ -518,19 +518,18 @@ export function WithExpandableRow(args: TableProps): JSX.Element {
 
   return (
     <div className="p-4 bg-neutral-white">
-      <Table {...args}>
-        <Table.Head>
+      <Table withExpandableRows {...args}>
+        <Table.Expandable.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.Expandable.Head>
 
         <Table.Body>
           <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

@@ -198,7 +198,6 @@ describe('<Table />', () => {
         </Table.Head>
         <Table.Body>
           <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,6 +36,7 @@ import type {
   TablePickerItemProps,
   TablePickerProps,
   ExpandableTableRowProps,
+  TableHeadCellProps,
 } from './Table.types'
 
 const StyledTableBody = styled.tbody`
@@ -79,14 +80,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 }),
@@ -105,6 +113,17 @@ const StyledTableHead = styled.thead`
   }
 `
 
+const StyledExpandableTableHead = styled.thead`
+  border: 1px solid ${token('color-neutral-lighter')};
+
+  ${StyledTableCell} {
+    padding: ${token('space-s')};
+
+    font-weight: ${token('font-weight-bold')};
+    text-transform: capitalize;
+  }
+`
+
 const BaseStyledTableRow = styled.tr`
   ${StyledTableHead} > & {
     height: 36px;
@@ -140,19 +159,51 @@ 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-lighter')};
+  border-width: 1px;
+  border-top-style: solid;
+  border-right-style: solid;
+  border-left-style: solid;
+  border-bottom-style: ${conditional({
+    solid: whenProps({ $isExpanded: false }),
+    hidden: whenProps({ $isExpanded: true }),
+  })};
+
+  box-shadow: ${conditional({
+    '0px 3px 3px 0px #C1CED9': whenProps({ $isExpanded: true }),
+    none: whenProps({ $isExpanded: false }),
   })};
+
+  ${hoverable`
+    background-color: ${token('color-neutral-lighter')};
+  `}
+
+  ${focusable`
+    box-shadow: inset ${token('shadow-glow-primary')};
+  `}
+`
+
+const StyledExpandableContentRow = styled.tr`
+  border-color: ${token('color-neutral-lighter')};
+  border-width: 1px;
+  border-top-style: hidden;
+  border-right-style: solid;
+  border-left-style: solid;
+  border-bottom-style: solid;
 `
 
-const StyledTable = styled.table<{ scale?: string }>`
+const StyledTable = styled.table<{ scale?: string; withExpandableRows?: boolean }>`
   width: 100%;
 
   white-space: nowrap;
 
-  background-color: ${token('color-neutral-white')};
+  background-color: ${conditional({
+    'color-neutral-lightest': whenProps({ withExpandableRows: true }),
+    'color-neutral-white': whenProps({ withExpandableRows: false }),
+  })};
 
   border-collapse: collapse;
 
@@ -189,13 +240,14 @@ function Table<T>({
   children,
   selection,
   scale = 'default',
+  withExpandableRows,
   ...others
 }: TableProps<T>): JSX.Element {
   return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     <TableSelectionProvider selection={selection}>
-      <StyledTable scale={scale} {...others}>
+      <StyledTable scale={scale} withExpandableRows={withExpandableRows} {...others}>
         {children}
       </StyledTable>
     </TableSelectionProvider>
@@ -221,6 +273,10 @@ function TableHead({ children, ...others }: TableSectionProps): JSX.Element {
   return <StyledTableHead {...others}>{children}</StyledTableHead>
 }
 
+function ExpandableTableHead({ children, ...others }: TableSectionProps): JSX.Element {
+  return <StyledExpandableTableHead {...others}>{children}</StyledExpandableTableHead>
+}
+
 function TableBody({ children, ...others }: TableSectionProps): JSX.Element {
   return <StyledTableBody {...others}>{children}</StyledTableBody>
 }
@@ -288,8 +344,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 +363,6 @@ function TableRow({ children, ...others }: TableRowProps): JSX.Element {
 }
 
 function ExpandableTableRow({
-  index,
   expandableContent,
   expanded,
   leading: propsLeading,
@@ -319,8 +374,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 +391,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 +408,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">
@@ -507,6 +564,7 @@ Table.Selection = {
   HeadCell: SelectionHeadCell,
 }
 Table.Expandable = {
+  Head: ExpandableTableHead,
   HeadCell: ExpandableHeadCell,
   Cell: ExpandableCell,
   Row: ExpandableTableRow,

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

@@ -17,6 +17,7 @@ export interface TableProps<T extends Selectable = TableSelectableRow>
   extends HTMLAttributes<HTMLTableElement> {
   scale?: Scale
   selection?: TableSelectionConfig<T>
+  withExpandableRows?: boolean
 }
 
 export interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
@@ -41,7 +42,6 @@ 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
@@ -57,6 +57,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