feat(Table): refactoring of types, documentation, and accordion file …

…structure (#3683) ### Table, TableTr, TableTd * added `TableDocs` properties * removed unused `variant` prop * fixed some prop types * added typing to `TableContext` ### Accordion * moved internal accordion files to separate folder `./table-accordion` * combined `TableAccordionTd` and `TableAccordionTr` files in to `TableAccordionContent` to share identical logic * renamed `TableAccordionTd` to `TableAccordionContentSingle` * renamed `TableAccordionTr` to `TableAccordionContentRow` * added typing to `TableAccordionContext` ### Other * `PropertiesTable` now treats values `null` the same as `undefined` --------- Co-authored-by: Tobias Høegh <tobias@tujo.no>
dnbexperience · Jun 14, 2024 · 6045e42 · 6045e42
1 parent 83b05cf
commit 6045e42
Show file tree

Hide file tree

Showing 18 changed files with 480 additions and 284 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/table/events.mdx
@@ -2,12 +2,18 @@
 showTabs: true
 ---
 
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import {
+  TableEventProperties,
+  TrEventProperties,
+} from '@dnb/eufemia/src/components/table/TableDocs'
+
+## Table events
+
+<PropertiesTable props={TableEventProperties} showDefaultValue />
+
 ## Table Row `<Tr>` events
 
 Table Row `<Tr>` events are a part of the accordion feature and needs to be enabled with the `accordion` property on the main Table.
 
-| Events     | Description                                                                                                                            |
-| ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| `onClick`  | _(optional)_ will emit when user clicks/expands the table row. Returns a native click.                                                 |
-| `onOpened` | _(optional)_ Will emit when table row is expanded. Returns an object with the table row as the target: `{ target }`.                   |
-| `onClosed` | _(optional)_ Will emit when table row is closed (after it was open). Returns an object with the table row as the target: `{ target }`. |
+<PropertiesTable props={TrEventProperties} showDefaultValue />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/table/properties.mdx
@@ -2,46 +2,28 @@
 showTabs: true
 ---
 
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import {
+  TableProperties,
+  TrProperties,
+  ThProperties,
+  TdProperties,
+} from '@dnb/eufemia/src/components/table/TableDocs'
+
 ## Properties
 
 ### `<Table>`
 
-| Properties                              | Description                                                                                                                                                                                          |
-| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `accordion`                             | _(optional)_ set to `true` if you have one or more rows that contains an accordion content. Defaults to `false`.                                                                                     |
-| `collapseAllHandleRef`                  | _(optional)_ ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows. Defaults to `undefined`.                                                   |
-| `border`                                | _(optional)_ use `true` to show borders between table data cells. Defaults to `false`.                                                                                                               |
-| `outline`                               | _(optional)_ use `true` to show a outline border around the table. Defaults to `false`.                                                                                                              |
-| `sticky`                                | _(optional)_ use `true` to enable a sticky Table header. Or use `css-position` to enable the CSS based scroll behavior. Defaults to `false`.                                                         |
-| `stickyOffset`                          | _(optional)_ defines the offset (top) in `rem` from where the header should start to stick. You may define your app header height here, if you have a sticky header on your page. Defaults to `0`.   |
-| `size`                                  | _(optional)_ spacing size inside the table header and data. Options: `small` \| `medium` \| `large` \. Defaults to `large`.                                                                          |
-| `fixed`                                 | _(optional)_ if set to `true`, the table will behave with a fixed table layout, using: `table-layout: fixed;`. Use e.g. CSS `width: 40%` on a table column to define the width. Defaults to `false`. |
-| `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                                                                                  |
-| ~~`variant`~~ (not implemented yet)     | _(coming)_ defines the style variant of the table. Options: `basis` . Defaults to `generic`.                                                                                                         |
-| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                |
+<PropertiesTable props={TableProperties} showDefaultValue />
 
 ### Table Row `<Tr>`
 
-| Properties    | Description                                                                                                                                                     |
-| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `variant`     | _(optional)_ defines the variant of the current row. If set to either `odd` or `even`, the next row one will continue with the opposite. Defaults to automatic. |
-| `noWrap`      | _(optional)_ if set to `true`, the inherited header text will not wrap to new lines. Defaults to `false`.                                                       |
-| `expanded`    | _(optional)_ use `true` to render the `<Tr>` initially as expanded. Defaults to `false`.                                                                        |
-| `disabled`    | _(optional)_ use `true` to disable the `<Tr>` to be accessible as an interactive element. Defaults to `false`.                                                  |
-| `noAnimation` | _(optional)_ use `true` to disable the expand/collapse animation. Defaults to `false`.                                                                          |
+<PropertiesTable props={TrProperties} showDefaultValue />
 
 ### Table Header `<Th>`
 
-| Properties | Description                                                                                          |
-| ---------- | ---------------------------------------------------------------------------------------------------- |
-| `sortable` | _(optional)_ defines the table header as sortable if set to `true` (ascending). Defaults to `false`. |
-| `active`   | _(optional)_ defines the sortable column as the current active (ascending). Defaults to `false`.     |
-| `reversed` | _(optional)_ defines the sortable column as in reversed order (descending). Defaults to `false`.     |
-| `noWrap`   | _(optional)_ if set to `true`, the header text will not wrap to new lines. Defaults to `false`.      |
+<PropertiesTable props={ThProperties} showDefaultValue />
 
 ### Table Data `<Td>`
 
-| Properties  | Description                                                                               |
-| ----------- | ----------------------------------------------------------------------------------------- |
-| `noSpacing` | _(optional)_ if set to `true`, no padding will be added. Defaults to `false`.             |
-| `spacing`   | _(optional)_ set to `horizontal` for padding on left and right side. Defaults to `false`. |
+<PropertiesTable props={TdProperties} showDefaultValue />
diff --git a/packages/dnb-design-system-portal/src/shared/parts/PropertiesTable.tsx b/packages/dnb-design-system-portal/src/shared/parts/PropertiesTable.tsx
@@ -48,7 +48,7 @@ export const FormattedCode = ({
       case 'value': {
         style.color = children.startsWith(`'`)
           ? colorString
-          : children === 'undefined'
+          : children === 'undefined' || children === 'null'
           ? colorUndefined
           : colorValue
         // falls through

diff --git a/packages/dnb-eufemia/src/components/height-animation/HeightAnimationInstance.ts b/packages/dnb-eufemia/src/components/height-animation/HeightAnimationInstance.ts
@@ -48,7 +48,7 @@ export default class HeightAnimation {
     visibility: 'hidden',
     opacity: '0', // prevents before/after elements to be visible
     height: 'auto',
-  }
+  } as const
 
   constructor(opts: HeightAnimationOptions = {}) {
     this.isInBrowser = typeof window !== 'undefined'

diff --git a/packages/dnb-eufemia/src/components/height-animation/useHeightAnimation.tsx b/packages/dnb-eufemia/src/components/height-animation/useHeightAnimation.tsx
@@ -151,11 +151,14 @@ export function useHeightAnimation(
    * Returns the first paint style, to be used for the initial render,
    * to avoid flickering.
    */
-  const firstPaintStyle = ((open &&
-    !isVisible &&
-    !isAnimating &&
-    instRef.current?.firstPaintStyle) ||
-    {}) as React.CSSProperties
+  const firstPaintStyle:
+    | typeof instRef.current.firstPaintStyle
+    | Record<string, never> =
+    (open &&
+      !isVisible &&
+      !isAnimating &&
+      instRef.current?.firstPaintStyle) ||
+    {}
   const isInDOM = open || isVisible
 
   return {

diff --git a/packages/dnb-eufemia/src/components/table/Table.tsx b/packages/dnb-eufemia/src/components/table/Table.tsx
@@ -45,7 +45,7 @@ export type TableProps = {
   size?: TableSizes
 
   /**
-   * The style variant of the component.
+   * The style variant of the component. Currently not implemented.
    * Default: generic.
    */
   variant?: TableVariants

diff --git a/packages/dnb-eufemia/src/components/table/TableAccordionTd.tsx b/packages/dnb-eufemia/src/components/table/TableAccordionTd.tsx
diff --git a/packages/dnb-eufemia/src/components/table/TableAccordionTr.tsx b/packages/dnb-eufemia/src/components/table/TableAccordionTr.tsx
diff --git a/packages/dnb-eufemia/src/components/table/TableContext.tsx b/packages/dnb-eufemia/src/components/table/TableContext.tsx
@@ -4,7 +4,16 @@
  */
 
 import React from 'react'
+import type { Translation } from '../../shared/Context'
+import type { TableAllProps } from './Table'
 
-export const TableContext = React.createContext(null)
+type TableContextProps = {
+  trCountRef: React.MutableRefObject<{
+    count: number
+  }>
+  rerenderAlias: Record<string, never>
+  collapseTrCallbacks: React.MutableRefObject<(() => void)[]>
+  allProps: TableAllProps & Translation['Table']
+}
 
-export const TableAccordionContext = React.createContext(null)
+export const TableContext = React.createContext<TableContextProps>(null)