@veracity/vui 2.18.2-beta.0 → 2.18.2-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.18.2-beta.0",
+  "version": "2.18.2-beta.1",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/table/table.types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 import { IconProps } from '../icon'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
@@ -52,7 +54,11 @@ export type TheadProps = SystemProps & {}
 
 export type TrProps = SystemProps & {
   /** Adds selected styling. */
+  isExpanded?: boolean
   isSelected?: boolean
+  nested?: ReactNode
+  onCollapsed?: () => void
+  onExpanded?: () => void
 }
 
 export type TableSortIconProps = Omit<IconProps, 'order'> & {

package/src/table/tr.tsx

@@ -1,32 +1,67 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
 
+import Button from '../button'
 import { styled, useStyleConfig, vui } from '../core'
 import { cs } from '../utils'
 import { useTableContext } from './context'
 import { TrProps } from './table.types'
+import Td from './td'
+
+const trClassName = 'vui-tr'
+const buttonClassName = (isExpanded?: boolean) => (isExpanded ? 'falAngleUp' : 'falAngleDown')
 
 export const TrBase = styled.trBox`
+  position: relative;
   transition-duration: fast;
 `
 
 /** Displays Table row that can contain heading or data cells. */
 export const Tr = vui<'tr', TrProps>((props, ref) => {
-  const { className, isSelected, ...rest } = props
+  const { className, isExpanded: isExpandedProp, isSelected, nested, onCollapsed, onExpanded, ...rest } = props
   const { variant } = useTableContext() ?? {}
   const styles = useStyleConfig('Table', useTableContext())
+  const [isExpanded, setIsExpanded] = useState(isExpandedProp)
+
+  useEffect(() => {
+    setIsExpanded(isExpandedProp)
+  }, [isExpandedProp])
+
+  const onToggle = () => {
+    if (isExpanded) {
+      setIsExpanded(false)
+      onCollapsed?.()
+    } else {
+      setIsExpanded(true)
+      onExpanded?.()
+    }
+  }
 
   const selectedProps = isSelected ? { bg: 'skyBlue.selected' } : {}
 
+  rest.children = (
+    <>
+      {nested !== undefined && (
+        <Td textAlign="center" w={10}>
+          {nested ? <Button icon={buttonClassName(isExpanded)} onClick={onToggle} variant="subtleBlue" /> : null}
+        </Td>
+      )}
+      {rest.children}
+    </>
+  )
+
   return (
-    <TrBase
-      className={cs('vui-tr', className)}
-      data-selected={Boolean(isSelected)}
-      data-variant={variant}
-      ref={ref}
-      {...styles.tr}
-      {...selectedProps}
-      {...rest}
-    />
+    <>
+      <TrBase
+        className={cs(trClassName, `${trClassName}-${isExpanded ? 'expanded' : 'collapsed'}`, className)}
+        data-selected={Boolean(isSelected)}
+        data-variant={variant}
+        ref={ref}
+        {...styles.tr}
+        {...selectedProps}
+        {...rest}
+      />
+      {isExpanded && nested}
+    </>
   )
 })