From 732847443f1fe76170cbe48325c49a00c5df9c64 Mon Sep 17 00:00:00 2001 From: Snorre Kim Date: Thu, 6 Jun 2024 17:30:47 +0200 Subject: [PATCH 1/9] combine accordion row and td files --- .../src/components/table/TableAccordionTd.tsx | 95 ----------- .../src/components/table/TableAccordionTr.tsx | 89 ---------- .../src/components/table/TableContext.tsx | 2 - .../src/components/table/TableTd.tsx | 4 +- .../src/components/table/TableTr.tsx | 20 +-- .../table/__tests__/TableAccordion.test.tsx | 4 +- .../table/__tests__/TableTd.test.tsx | 4 +- .../table-accordion/TableAccordionContent.tsx | 157 ++++++++++++++++++ .../table-accordion/TableAccordionContext.tsx | 8 + .../TableAccordionHead.tsx} | 54 +++--- .../table/useTableAnimationHandler.tsx | 6 +- 11 files changed, 212 insertions(+), 231 deletions(-) delete mode 100644 packages/dnb-eufemia/src/components/table/TableAccordionTd.tsx delete mode 100644 packages/dnb-eufemia/src/components/table/TableAccordionTr.tsx create mode 100644 packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContent.tsx create mode 100644 packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContext.tsx rename packages/dnb-eufemia/src/components/table/{TableAccordion.tsx => table-accordion/TableAccordionHead.tsx} (86%) diff --git a/packages/dnb-eufemia/src/components/table/TableAccordionTd.tsx b/packages/dnb-eufemia/src/components/table/TableAccordionTd.tsx deleted file mode 100644 index 4f9db8d5c27..00000000000 --- a/packages/dnb-eufemia/src/components/table/TableAccordionTd.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react' -import classnames from 'classnames' -import useTableAnimationHandler from './useTableAnimationHandler' -import { TableAccordionContext, TableContext } from './TableContext' -import { TableAccordionTrProps } from './TableAccordionTr' - -export type TableAccordionTdProps = { - /** - * Overwrite the internal collected colSpan (add +1) - */ - colSpan?: number -} - -export default function TableAccordionTd( - componentProps: TableAccordionTdProps & - TableAccordionTrProps & - React.TableHTMLAttributes -) { - const { - expanded = null, - noAnimation = null, - className, - children, - colSpan = 100, - style, - ...props - } = componentProps - - const allProps = React.useContext(TableContext)?.allProps - const tableAccordionContext = React.useContext(TableAccordionContext) - const innerRef = React.useRef(null) - const trRef = React.useRef(null) - const { - ariaLive, - isInDOM, - isAnimating, - isVisibleParallax, - firstPaintStyle, - } = useTableAnimationHandler({ - innerRef, - trRef, - expanded, - noAnimation, - }) - const countTds = tableAccordionContext?.countTds || colSpan - - return ( - - - {isInDOM && ( -
-
- {children} -
-
- )} - - - {isInDOM && ariaLive ? allProps?.accordionMoreContentSR : null} - - - - - ) -} diff --git a/packages/dnb-eufemia/src/components/table/TableAccordionTr.tsx b/packages/dnb-eufemia/src/components/table/TableAccordionTr.tsx deleted file mode 100644 index 3ff56d199ed..00000000000 --- a/packages/dnb-eufemia/src/components/table/TableAccordionTr.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React from 'react' -import classnames from 'classnames' -import useTableAnimationHandler from './useTableAnimationHandler' -import { TableContext } from './TableContext' -import Td from './TableTd' - -export type TableAccordionTrProps = { - /** - * Set to true to expanded the content on initial render - */ - expanded?: boolean - - /** - * Set to true to skip animation - * Default: false - */ - noAnimation?: boolean -} - -export default function TableAccordionTr( - componentProps: TableAccordionTrProps & - React.TableHTMLAttributes -) { - const { - expanded = null, - noAnimation = null, - className, - children, - style, - ...props - } = componentProps - - const allProps = React.useContext(TableContext)?.allProps - const innerRef = React.useRef(null) - const trRef = React.useRef(null) - - const { - ariaLive, - isInDOM, - isAnimating, - isVisibleParallax, - firstPaintStyle, - } = useTableAnimationHandler({ - innerRef, - trRef, - expanded, - noAnimation, - }) - - const expandColumn = ( - - - - {isInDOM && ariaLive ? allProps?.accordionMoreContentSR : null} - - - - ) - - return ( - - {allProps.accordionChevronPlacement !== 'end' && expandColumn} - {isInDOM && children} - {allProps.accordionChevronPlacement === 'end' && expandColumn} - - ) -} diff --git a/packages/dnb-eufemia/src/components/table/TableContext.tsx b/packages/dnb-eufemia/src/components/table/TableContext.tsx index 59c6c84ab87..30940c2ea41 100644 --- a/packages/dnb-eufemia/src/components/table/TableContext.tsx +++ b/packages/dnb-eufemia/src/components/table/TableContext.tsx @@ -6,5 +6,3 @@ import React from 'react' export const TableContext = React.createContext(null) - -export const TableAccordionContext = React.createContext(null) diff --git a/packages/dnb-eufemia/src/components/table/TableTd.tsx b/packages/dnb-eufemia/src/components/table/TableTd.tsx index 115fbba705d..b23addd49f0 100644 --- a/packages/dnb-eufemia/src/components/table/TableTd.tsx +++ b/packages/dnb-eufemia/src/components/table/TableTd.tsx @@ -1,6 +1,6 @@ import React from 'react' import classnames from 'classnames' -import TableAccordionTd from './TableAccordionTd' +import { TableAccordionContentSingle } from './table-accordion/TableAccordionContent' export type TableTdProps = { /** @@ -45,4 +45,4 @@ export default function Td( ) } -Td.AccordionContent = TableAccordionTd +Td.AccordionContent = TableAccordionContentSingle diff --git a/packages/dnb-eufemia/src/components/table/TableTr.tsx b/packages/dnb-eufemia/src/components/table/TableTr.tsx index b0ee80136d7..6da0a534712 100644 --- a/packages/dnb-eufemia/src/components/table/TableTr.tsx +++ b/packages/dnb-eufemia/src/components/table/TableTr.tsx @@ -1,8 +1,8 @@ import React from 'react' import classnames from 'classnames' -import { TableAccordion } from './TableAccordion' +import { TableAccordionHead } from './table-accordion/TableAccordionHead' +import { TableAccordionContentRow } from './table-accordion/TableAccordionContent' import { TableContext } from './TableContext' -import TableAccordionTr from './TableAccordionTr' export type TableTrProps = { /** @@ -87,7 +87,7 @@ export default function Tr( const tableContext = React.useContext(TableContext) if (tableContext?.allProps?.accordion) { return ( - { (attr) => attr.name ) - expect(attributes).toEqual(['colspan', 'class']) + expect(attributes).toEqual(['class', 'colspan']) expect(Array.from(element.classList)).toContain('dnb-table__td') expect(element.getAttribute('colspan')).toBe('2') }) @@ -180,7 +180,7 @@ describe('TableAccordion', () => { (attr) => attr.name ) - expect(attributes).toEqual(['role', 'colspan', 'class']) + expect(attributes).toEqual(['role', 'class', 'colspan']) expect(Array.from(element.classList)).toContain('dnb-table__td') expect(element.getAttribute('colspan')).toBe('3') expect(element.getAttribute('role')).toBe('cell') diff --git a/packages/dnb-eufemia/src/components/table/__tests__/TableTd.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/TableTd.test.tsx index 699509affc3..d64d198cb03 100644 --- a/packages/dnb-eufemia/src/components/table/__tests__/TableTd.test.tsx +++ b/packages/dnb-eufemia/src/components/table/__tests__/TableTd.test.tsx @@ -1,7 +1,7 @@ import React from 'react' import { render } from '@testing-library/react' import TableTd, { TableTdProps } from '../TableTd' -import TableAccordionTd from '../TableAccordionTd' +import { TableAccordionContentSingle } from '../table-accordion/TableAccordionContent' describe('TableTd', () => { it('renders with props as an object', () => { @@ -123,6 +123,6 @@ describe('TableTd', () => { }) it('should have Td.AccordionContent', () => { - expect(TableTd.AccordionContent).toBe(TableAccordionTd) + expect(TableTd.AccordionContent).toBe(TableAccordionContentSingle) }) }) diff --git a/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContent.tsx b/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContent.tsx new file mode 100644 index 00000000000..03999995e4a --- /dev/null +++ b/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContent.tsx @@ -0,0 +1,157 @@ +import React from 'react' +import classnames from 'classnames' +import useTableAnimationHandler from '../useTableAnimationHandler' +import { TableContext } from '../TableContext' +import { TableAccordionContext } from './TableAccordionContext' + +type TableAccordionContentProps = { + /** Set to true to expanded the content on initial render */ + expanded?: boolean + /** Set to true to skip animation */ + noAnimation?: boolean + /** Overwrite the internal collected colSpan (add +1) */ + colSpan?: number + variant: 'row' | 'single' +} & React.TableHTMLAttributes + +export type TableAccordionContentRowProps = Omit< + TableAccordionContentProps, + 'variant' | 'colSpan' +> + +export type TableAccordionContentSingleProps = Omit< + TableAccordionContentProps, + 'variant' +> + +function TableAccordionContent( + componentProps: TableAccordionContentProps +) { + const { + variant, + expanded = null, + noAnimation = null, + className, + children, + colSpan, + style, + ...props + } = componentProps + + const allProps = React.useContext(TableContext)?.allProps + const innerRef = React.useRef(null) + const trRef = React.useRef(null) + const { + ariaLive, + isInDOM, + isAnimating, + isVisibleParallax, + firstPaintStyle, + } = useTableAnimationHandler({ + innerRef, + trRef, + expanded, + noAnimation, + }) + + const chevronTdProps = { + ariaLive, + isInDOM, + accordionMoreContentSR: allProps?.accordionMoreContentSR, + } + + return ( + + {variant === 'row' && ( + <> + {allProps.accordionChevronPlacement !== 'end' && ( + + )} + {isInDOM && children} + {allProps.accordionChevronPlacement === 'end' && ( + + )} + + )} + {variant === 'single' && ( + + {isInDOM && ( +
+
+ {children} +
+
+ )} + + )} + + ) +} + +const ChevronTd = ({ + children = undefined, + colSpan = undefined, + ariaLive, + isInDOM, + accordionMoreContentSR, +}) => ( + + {children} + + + {isInDOM && ariaLive ? accordionMoreContentSR : null} + + + +) + +export function TableAccordionContentRow( + props: TableAccordionContentRowProps +) { + return +} + +export function TableAccordionContentSingle({ + colSpan = 100, + ...props +}: TableAccordionContentSingleProps) { + const tableAccordionContext = React.useContext(TableAccordionContext) + + return ( + + ) +} diff --git a/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContext.tsx b/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContext.tsx new file mode 100644 index 00000000000..e4ab4cc3d18 --- /dev/null +++ b/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContext.tsx @@ -0,0 +1,8 @@ +/** + * Web TableContext Context + * + */ + +import React from 'react' + +export const TableAccordionContext = React.createContext(null) diff --git a/packages/dnb-eufemia/src/components/table/TableAccordion.tsx b/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionHead.tsx similarity index 86% rename from packages/dnb-eufemia/src/components/table/TableAccordion.tsx rename to packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionHead.tsx index 7c8c9e9dae3..9d9ef8b3283 100644 --- a/packages/dnb-eufemia/src/components/table/TableAccordion.tsx +++ b/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionHead.tsx @@ -1,32 +1,31 @@ import React, { useEffect } from 'react' import classnames from 'classnames' -import Button from '../button/Button' -import IconPrimary from '../icon/IconPrimary' -import Th from './TableTh' -import Td from './TableTd' -import { TableAccordionContext, TableContext } from './TableContext' import keycode from 'keycode' -import { hasSelectedText } from '../../shared/helpers' - -import TableAccordionTd from './TableAccordionTd' -import TableAccordionTr from './TableAccordionTr' -import type { TableAccordionTdProps } from './TableAccordionTd' -import type { TableAccordionTrProps } from './TableAccordionTr' -import type { TableTrProps } from './TableTr' - -type TableAccordionContentProps = - | TableAccordionTdProps - | TableAccordionTrProps - -type TableAccordionProps = { +import { hasSelectedText } from '../../../shared/helpers' +import Button from '../../button/Button' +import IconPrimary from '../../icon/IconPrimary' +import Th from '../TableTh' +import Td from '../TableTd' +import { TableContext } from '../TableContext' +import { TableAccordionContext } from './TableAccordionContext' +import { + TableAccordionContentSingle, + TableAccordionContentRow, +} from './TableAccordionContent' + +import type { + TableAccordionContentSingleProps, + TableAccordionContentRowProps, +} from './TableAccordionContent' +import type { TableTrProps } from '../TableTr' + +export type TableAccordionHeadProps = { + /** The row number */ count: number -} +} & TableTrProps & + React.TableHTMLAttributes -export function TableAccordion( - allProps: TableAccordionProps & - TableTrProps & - React.TableHTMLAttributes -) { +export function TableAccordionHead(allProps: TableAccordionHeadProps) { const { children, className, @@ -72,7 +71,9 @@ export function TableAccordion( (element: React.ReactElement) => { return isAccordionElement(element) } - ) as React.ReactElement[] + ) as React.ReactElement< + TableAccordionContentSingleProps | TableAccordionContentRowProps + >[] const hasAccordionContent = accordionContent.length !== 0 && @@ -243,7 +244,8 @@ export function TableAccordionToggleButton() { } const isAccordionElement = (element: React.ReactElement) => - element.type === TableAccordionTd || element.type === TableAccordionTr + element.type === TableAccordionContentSingle || + element.type === TableAccordionContentRow const isTableHead = (children: React.ReactNode[]) => children.some((element: React.ReactElement) => element.type === Th) diff --git a/packages/dnb-eufemia/src/components/table/useTableAnimationHandler.tsx b/packages/dnb-eufemia/src/components/table/useTableAnimationHandler.tsx index 318d242a97b..dcc817abb88 100644 --- a/packages/dnb-eufemia/src/components/table/useTableAnimationHandler.tsx +++ b/packages/dnb-eufemia/src/components/table/useTableAnimationHandler.tsx @@ -1,8 +1,8 @@ import React, { useCallback } from 'react' import { getClosestScrollViewElement } from '../../shared/component-helper' import { useHeightAnimation } from '../height-animation/useHeightAnimation' -import { TableAccordionTrProps } from './TableAccordionTr' -import { TableAccordionContext } from './TableContext' +import { TableAccordionContext } from './table-accordion/TableAccordionContext' +import type { TableAccordionContentRowProps } from './table-accordion/TableAccordionContent' export type useTableAnimationHandlerProps = { /** @@ -20,7 +20,7 @@ export function useTableAnimationHandler({ trRef, expanded, noAnimation, -}: useTableAnimationHandlerProps & TableAccordionTrProps) { +}: useTableAnimationHandlerProps & TableAccordionContentRowProps) { const tableAccordionContext = React.useContext(TableAccordionContext) const [ariaLive, setAriaLive] = React.useState(null) const open = Boolean(expanded || tableAccordionContext?.trIsOpen) From 216685503527d3fbccf6016ab4abf123b82f9662 Mon Sep 17 00:00:00 2001 From: Snorre Kim Date: Fri, 7 Jun 2024 17:28:43 +0200 Subject: [PATCH 2/9] added Table docfile --- .../docs/uilib/components/table/events.mdx | 16 +- .../uilib/components/table/properties.mdx | 42 +--- .../src/shared/parts/PropertiesTable.tsx | 10 +- .../src/components/table/Table.tsx | 2 +- .../src/components/table/TableDocs.ts | 205 ++++++++++++++++++ .../src/components/table/TableTd.tsx | 2 +- .../src/components/table/TableTr.tsx | 6 +- packages/dnb-eufemia/src/shared/types.tsx | 2 +- 8 files changed, 239 insertions(+), 46 deletions(-) create mode 100644 packages/dnb-eufemia/src/components/table/TableDocs.ts 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 index 8a9af4070e3..129057639dc 100644 --- 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 + + + ## Table Row `` events Table Row `` 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 }`. | + 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 index 02ab1450ac9..1c6f3306151 100644 --- 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 ### `` -| 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. | + ### Table Row `` -| 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 `` initially as expanded. Defaults to `false`. | -| `disabled` | _(optional)_ use `true` to disable the `` to be accessible as an interactive element. Defaults to `false`. | -| `noAnimation` | _(optional)_ use `true` to disable the expand/collapse animation. Defaults to `false`. | + ### Table Header ` )} ` initially as expanded.', + type: 'boolean', + defaultValue: 'false', + status: 'optional', + }, + disabled: { + doc: 'use `true` to disable the `` to be accessible as an interactive element.', + type: 'boolean', + defaultValue: 'false', + status: 'optional', + }, + noAnimation: { + doc: 'use `true` to disable the expand/collapse animation.', + type: 'boolean', + defaultValue: 'false', + status: 'optional', + }, + children: { + doc: 'The content of the component.', + type: 'React.ReactNode', + status: 'required', + }, +} + +export const trEventProperties: PropertiesTableProps = { + onClick: { + doc: 'will emit when user clicks/expands the table row. Returns a native click. ', + type: '(event) => void', + defaultValue: 'undefined', + status: 'optional', + }, + onOpened: { + doc: 'Will emit when table row is expanded. Returns an object with the table row as the target: `{ target }`.', + type: '(event) => void', + defaultValue: 'undefined', + status: 'optional', + }, + onClosed: { + doc: 'Will emit when table row is closed (after it was open). Returns an object with the table row as the target: `{ target }`.', + type: '(event) => void', + defaultValue: 'undefined', + status: 'optional', + }, +} + +export const thProperties: PropertiesTableProps = { + sortable: { + doc: 'Defines the table header as sortable if set to `true` (ascending).', + type: 'boolean', + defaultValue: 'false', + status: 'optional', + }, + active: { + doc: 'Defines the sortable column as the current active (ascending).', + type: 'boolean', + defaultValue: 'false', + status: 'optional', + }, + reversed: { + doc: 'Defines the sortable column as in reversed order (descending).', + type: 'boolean', + defaultValue: 'false', + status: 'optional', + }, + noWrap: { + doc: 'If set to `true`, the header text will not wrap to new lines.', + type: 'boolean', + defaultValue: 'false', + status: 'optional', + }, + children: { + doc: 'The content of the component.', + type: 'React.ReactNode', + defaultValue: 'undefined', + status: 'optional', + }, +} + +export const tdProperties: PropertiesTableProps = { + noSpacing: { + doc: 'If set to `true`, no padding will be added.', + type: 'boolean', + defaultValue: 'false', + status: 'optional', + }, + spacing: { + doc: 'Set to `horizontal` for padding on left and right side.', + type: `'horizontal'`, + defaultValue: 'undefined', + status: 'optional', + }, + children: { + doc: 'The content of the component.', + type: 'React.ReactNode', + defaultValue: 'undefined', + status: 'optional', + }, +} diff --git a/packages/dnb-eufemia/src/components/table/TableTd.tsx b/packages/dnb-eufemia/src/components/table/TableTd.tsx index b23addd49f0..ba454a81ab8 100644 --- a/packages/dnb-eufemia/src/components/table/TableTd.tsx +++ b/packages/dnb-eufemia/src/components/table/TableTd.tsx @@ -11,7 +11,7 @@ export type TableTdProps = { /** * Set to `horizontal` for padding on left and right side - * Default: false + * Default: undefined */ spacing?: 'horizontal' diff --git a/packages/dnb-eufemia/src/components/table/TableTr.tsx b/packages/dnb-eufemia/src/components/table/TableTr.tsx index 6da0a534712..befbfb1eca6 100644 --- a/packages/dnb-eufemia/src/components/table/TableTr.tsx +++ b/packages/dnb-eufemia/src/components/table/TableTr.tsx @@ -41,19 +41,19 @@ export type TableTrProps = { * Will emit when user clicks/expands the table row * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table */ - onClick?: (event?: React.SyntheticEvent) => void + onClick?: (event: React.SyntheticEvent) => void /** * Will emit when table row is expanded * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table */ - onOpened?: (event?: React.SyntheticEvent) => void + onOpened?: (event: React.SyntheticEvent) => void /** * Will emit when table row is closed (after it was open) * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table */ - onClosed?: (event?: React.SyntheticEvent) => void + onClosed?: (event: React.SyntheticEvent) => void /** * The content of the component. diff --git a/packages/dnb-eufemia/src/shared/types.tsx b/packages/dnb-eufemia/src/shared/types.tsx index 8fdd5dfec60..67a759cc078 100644 --- a/packages/dnb-eufemia/src/shared/types.tsx +++ b/packages/dnb-eufemia/src/shared/types.tsx @@ -46,7 +46,7 @@ export type PropertiesTableProps = Record< type: string | string[] defaultValue?: string doc: string - status: 'optional' | 'internal' | 'required' | 'deprecated' + status: 'optional' | 'internal' | 'required' | 'deprecated' | 'coming' } > From af82b006b9e1d344953dd761b9500cddd83ff3ab Mon Sep 17 00:00:00 2001 From: Snorre Kim Date: Tue, 11 Jun 2024 14:33:02 +0200 Subject: [PATCH 3/9] added typing to contexts, fixed some types --- .../src/components/table/TableContext.tsx | 13 ++++++++++++- .../src/components/table/TableDocs.ts | 4 ++-- .../dnb-eufemia/src/components/table/TableTr.tsx | 4 ++-- .../table-accordion/TableAccordionContent.tsx | 8 ++++---- .../table-accordion/TableAccordionContext.tsx | 16 +++++++++++++++- .../table/table-accordion/TableAccordionHead.tsx | 8 ++++---- 6 files changed, 39 insertions(+), 14 deletions(-) diff --git a/packages/dnb-eufemia/src/components/table/TableContext.tsx b/packages/dnb-eufemia/src/components/table/TableContext.tsx index 30940c2ea41..1e7f9cf38aa 100644 --- a/packages/dnb-eufemia/src/components/table/TableContext.tsx +++ b/packages/dnb-eufemia/src/components/table/TableContext.tsx @@ -4,5 +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 + collapseTrCallbacks: React.MutableRefObject<(() => void)[]> + allProps: TableAllProps & Translation['Table'] +} + +export const TableContext = React.createContext(null) diff --git a/packages/dnb-eufemia/src/components/table/TableDocs.ts b/packages/dnb-eufemia/src/components/table/TableDocs.ts index 85a0f96403b..141e9d35b05 100644 --- a/packages/dnb-eufemia/src/components/table/TableDocs.ts +++ b/packages/dnb-eufemia/src/components/table/TableDocs.ts @@ -138,13 +138,13 @@ export const trEventProperties: PropertiesTableProps = { }, onOpened: { doc: 'Will emit when table row is expanded. Returns an object with the table row as the target: `{ target }`.', - type: '(event) => void', + type: '({ target }) => void', defaultValue: 'undefined', status: 'optional', }, onClosed: { doc: 'Will emit when table row is closed (after it was open). Returns an object with the table row as the target: `{ target }`.', - type: '(event) => void', + type: '({ target }) => void', defaultValue: 'undefined', status: 'optional', }, diff --git a/packages/dnb-eufemia/src/components/table/TableTr.tsx b/packages/dnb-eufemia/src/components/table/TableTr.tsx index befbfb1eca6..803535b3c25 100644 --- a/packages/dnb-eufemia/src/components/table/TableTr.tsx +++ b/packages/dnb-eufemia/src/components/table/TableTr.tsx @@ -47,13 +47,13 @@ export type TableTrProps = { * Will emit when table row is expanded * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table */ - onOpened?: (event: React.SyntheticEvent) => void + onOpened?: ({ target }: { target: HTMLTableRowElement }) => void /** * Will emit when table row is closed (after it was open) * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table */ - onClosed?: (event: React.SyntheticEvent) => void + onClosed?: ({ target }: { target: HTMLTableRowElement }) => void /** * The content of the component. diff --git a/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContent.tsx b/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContent.tsx index 03999995e4a..db868001ebb 100644 --- a/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContent.tsx +++ b/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContent.tsx @@ -38,7 +38,7 @@ function TableAccordionContent( ...props } = componentProps - const allProps = React.useContext(TableContext)?.allProps + const tableContextAllProps = React.useContext(TableContext)?.allProps const innerRef = React.useRef(null) const trRef = React.useRef(null) const { @@ -57,7 +57,7 @@ function TableAccordionContent( const chevronTdProps = { ariaLive, isInDOM, - accordionMoreContentSR: allProps?.accordionMoreContentSR, + accordionMoreContentSR: tableContextAllProps?.accordionMoreContentSR, } return ( @@ -87,11 +87,11 @@ function TableAccordionContent( > {variant === 'row' && ( <> - {allProps.accordionChevronPlacement !== 'end' && ( + {tableContextAllProps?.accordionChevronPlacement !== 'end' && ( )} {isInDOM && children} - {allProps.accordionChevronPlacement === 'end' && ( + {tableContextAllProps?.accordionChevronPlacement === 'end' && ( )} diff --git a/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContext.tsx b/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContext.tsx index e4ab4cc3d18..cae515ae8b0 100644 --- a/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContext.tsx +++ b/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContext.tsx @@ -4,5 +4,19 @@ */ import React from 'react' +import type { TableTrProps } from '../TableTr' -export const TableAccordionContext = React.createContext(null) +type TableAccordionContextProps = { + toggleOpenTr: ( + event: React.SyntheticEvent, + allowInteractiveElement?: boolean + ) => void + trIsOpen: boolean + countTds: number + noAnimation: TableTrProps['noAnimation'] + onOpened: TableTrProps['onOpened'] + onClosed: TableTrProps['onClosed'] +} + +export const TableAccordionContext = + React.createContext(null) diff --git a/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionHead.tsx b/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionHead.tsx index 9d9ef8b3283..15300aa2647 100644 --- a/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionHead.tsx +++ b/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionHead.tsx @@ -137,7 +137,6 @@ export function TableAccordionHead(allProps: TableAccordionHeadProps) { trIsOpen, noAnimation, countTds, - hasAccordionContent, onOpened, onClosed, }} @@ -221,9 +220,10 @@ export function TableAccordionHead(allProps: TableAccordionHeadProps) { export function TableAccordionToggleButton() { const tableAccordionContext = React.useContext(TableAccordionContext) - const allProps = React.useContext(TableContext)?.allProps + const tableContextAllProps = React.useContext(TableContext)?.allProps const iconSize = - allProps.size === 'medium' || allProps.size === 'small' + tableContextAllProps?.size === 'medium' || + tableContextAllProps?.size === 'small' ? 'basis' : 'medium' @@ -233,7 +233,7 @@ export function TableAccordionToggleButton() { )} ` events Table Row `` events are a part of the accordion feature and needs to be enabled with the `accordion` property on the main Table. - + 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 index 1c6f3306151..876313584e5 100644 --- 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 @@ -4,26 +4,26 @@ showTabs: true import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' import { - tableProperties, - trProperties, - thProperties, - tdProperties, + TableProperties, + TrProperties, + ThProperties, + TdProperties, } from '@dnb/eufemia/src/components/table/TableDocs' ## Properties ### `
` -| 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`. | + ### Table Data `` -| 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`. | + diff --git a/packages/dnb-design-system-portal/src/shared/parts/PropertiesTable.tsx b/packages/dnb-design-system-portal/src/shared/parts/PropertiesTable.tsx index 14d81e7e591..becbefb8808 100644 --- 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 @@ -90,7 +90,7 @@ export default function PropertiesTable({ {formatName(camelCase ? toCamelCase(key) : key)} @@ -142,9 +142,9 @@ export default function PropertiesTable({ - {(!showDefaultValue || status === 'deprecated') && ( - ({status}) - )} + {(!showDefaultValue || + status === 'deprecated' || + status === 'coming') && ({status}) } {camelCase ? convertToCamelCase(doc, keys) : doc} diff --git a/packages/dnb-eufemia/src/components/table/Table.tsx b/packages/dnb-eufemia/src/components/table/Table.tsx index 4fb53841da9..db42f10c6d2 100644 --- 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/TableDocs.ts b/packages/dnb-eufemia/src/components/table/TableDocs.ts new file mode 100644 index 00000000000..85a0f96403b --- /dev/null +++ b/packages/dnb-eufemia/src/components/table/TableDocs.ts @@ -0,0 +1,205 @@ +import { PropertiesTableProps } from '../../shared/types' + +export const tableProperties: PropertiesTableProps = { + accordion: { + doc: 'Set to true if you have one or more rows that contains an accordion content.', + type: 'boolean', + defaultValue: 'false', + status: 'optional', + }, + accordionChevronPlacement: { + doc: 'Defines where the chevron will be placed.', + type: [`'start'`, `'end'`], + defaultValue: `'start'`, + status: 'optional', + }, + border: { + doc: 'Use `true` to show borders between table data cells.', + type: 'boolean', + defaultValue: 'false', + status: 'optional', + }, + outline: { + doc: 'Use `true` to show an outline border around the table', + type: 'boolean', + defaultValue: 'false', + status: 'optional', + }, + sticky: { + doc: "Use `true? to enable a sticky Table header. Or use `'css-position'` to enable the CSS based scroll behavior.", + type: ['boolean', `'css-position'`], + defaultValue: 'false', + status: 'optional', + }, + stickyOffset: { + doc: '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.', + type: ['string', 'number'], + defaultValue: 'false', + status: 'optional', + }, + size: { + doc: 'Spacing size inside the table header and data.', + type: [`'large'`, `'medium'`, `'small'`], + defaultValue: `'large'`, + status: 'optional', + }, + fixed: { + doc: '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.', + type: 'boolean', + defaultValue: 'null', + status: 'optional', + }, + variant: { + doc: 'Defines the style variant of the table.', + type: [`'generic'`], + defaultValue: `'generic'`, + status: 'coming', + }, + children: { + doc: 'The content of the component.', + type: 'React.ReactNode', + status: 'required', + }, + className: { + doc: 'Custom className on the component root', + type: 'string', + defaultValue: 'undefined', + status: 'optional', + }, + skeleton: { + doc: 'If set to `true`, an overlaying skeleton with animation will be shown.', + type: 'boolean', + defaultValue: 'undefined', + status: 'optional', + }, + '[Space](/uilib/layout/space/properties)': { + doc: 'Spacing properties like `top` or `bottom` are supported.', + type: ['string', 'object'], + status: 'optional', + }, +} + +export const tableEventProperties: PropertiesTableProps = { + collapseAllHandleRef: { + doc: 'ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows.', + type: 'React.MutableRefObject<() => void>', + defaultValue: 'undefined', + status: 'optional', + }, +} + +export const trProperties: PropertiesTableProps = { + /** + * The variant of the tr + */ + variant: { + doc: 'Override the automatic variant of the current row. The next row one will continue with the opposite.', + type: [`'even'`, `'odd'`], + defaultValue: 'undefined', + status: 'optional', + }, + noWrap: { + doc: 'if set to `true`, the inherited header text will not wrap to new lines.', + type: 'boolean', + defaultValue: 'true', + status: 'optional', + }, + expanded: { + doc: 'use `true` to render the `
{formatName(camelCase ? toCamelCase(key) : key)} @@ -142,9 +142,9 @@ export default function PropertiesTable({ - {(!showDefaultValue || - status === 'deprecated' || - status === 'coming') && ({status}) } + {(!showDefaultValue || status === 'deprecated') && ( + ({status}) + )} {camelCase ? convertToCamelCase(doc, keys) : doc} diff --git a/packages/dnb-eufemia/src/components/table/TableDocs.ts b/packages/dnb-eufemia/src/components/table/TableDocs.ts index 141e9d35b05..7d522ffcc01 100644 --- a/packages/dnb-eufemia/src/components/table/TableDocs.ts +++ b/packages/dnb-eufemia/src/components/table/TableDocs.ts @@ -49,12 +49,6 @@ export const tableProperties: PropertiesTableProps = { defaultValue: 'null', status: 'optional', }, - variant: { - doc: 'Defines the style variant of the table.', - type: [`'generic'`], - defaultValue: `'generic'`, - status: 'coming', - }, children: { doc: 'The content of the component.', type: 'React.ReactNode', From 675174cbc4209c3e763fe252b93cb51d063250fe Mon Sep 17 00:00:00 2001 From: Snorre Kim Date: Wed, 12 Jun 2024 10:40:39 +0200 Subject: [PATCH 5/9] removed unused properties typing --- packages/dnb-eufemia/src/shared/types.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dnb-eufemia/src/shared/types.tsx b/packages/dnb-eufemia/src/shared/types.tsx index 67a759cc078..8fdd5dfec60 100644 --- a/packages/dnb-eufemia/src/shared/types.tsx +++ b/packages/dnb-eufemia/src/shared/types.tsx @@ -46,7 +46,7 @@ export type PropertiesTableProps = Record< type: string | string[] defaultValue?: string doc: string - status: 'optional' | 'internal' | 'required' | 'deprecated' | 'coming' + status: 'optional' | 'internal' | 'required' | 'deprecated' } > From 06504907146379846284d5c1ef00ac61b9bfd83e Mon Sep 17 00:00:00 2001 From: Snorre Kim Date: Thu, 13 Jun 2024 14:36:18 +0200 Subject: [PATCH 6/9] improved some typings and file structure --- .../height-animation/HeightAnimationInstance.ts | 6 +++++- .../height-animation/useHeightAnimation.tsx | 13 ++++++++----- .../table/table-accordion/TableAccordionContent.tsx | 2 +- .../useTableAnimationHandler.tsx | 8 ++++---- 4 files changed, 18 insertions(+), 11 deletions(-) rename packages/dnb-eufemia/src/components/table/{ => table-accordion}/useTableAnimationHandler.tsx (86%) diff --git a/packages/dnb-eufemia/src/components/height-animation/HeightAnimationInstance.ts b/packages/dnb-eufemia/src/components/height-animation/HeightAnimationInstance.ts index e8515be8c55..e6a2436eb55 100644 --- a/packages/dnb-eufemia/src/components/height-animation/HeightAnimationInstance.ts +++ b/packages/dnb-eufemia/src/components/height-animation/HeightAnimationInstance.ts @@ -44,7 +44,11 @@ export default class HeightAnimation { isAnimating: boolean __currentHeight: number - firstPaintStyle = { + firstPaintStyle: { + visibility: 'hidden' + opacity: '0' + height: 'auto' + } = { visibility: 'hidden', opacity: '0', // prevents before/after elements to be visible height: 'auto', diff --git a/packages/dnb-eufemia/src/components/height-animation/useHeightAnimation.tsx b/packages/dnb-eufemia/src/components/height-animation/useHeightAnimation.tsx index 19a5ecd6cf5..6214711101d 100644 --- 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 = + (open && + !isVisible && + !isAnimating && + instRef.current?.firstPaintStyle) || + {} const isInDOM = open || isVisible return { diff --git a/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContent.tsx b/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContent.tsx index db868001ebb..5454d687264 100644 --- a/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContent.tsx +++ b/packages/dnb-eufemia/src/components/table/table-accordion/TableAccordionContent.tsx @@ -1,6 +1,6 @@ import React from 'react' import classnames from 'classnames' -import useTableAnimationHandler from '../useTableAnimationHandler' +import useTableAnimationHandler from './useTableAnimationHandler' import { TableContext } from '../TableContext' import { TableAccordionContext } from './TableAccordionContext' diff --git a/packages/dnb-eufemia/src/components/table/useTableAnimationHandler.tsx b/packages/dnb-eufemia/src/components/table/table-accordion/useTableAnimationHandler.tsx similarity index 86% rename from packages/dnb-eufemia/src/components/table/useTableAnimationHandler.tsx rename to packages/dnb-eufemia/src/components/table/table-accordion/useTableAnimationHandler.tsx index dcc817abb88..6862923613b 100644 --- a/packages/dnb-eufemia/src/components/table/useTableAnimationHandler.tsx +++ b/packages/dnb-eufemia/src/components/table/table-accordion/useTableAnimationHandler.tsx @@ -1,8 +1,8 @@ import React, { useCallback } from 'react' -import { getClosestScrollViewElement } from '../../shared/component-helper' -import { useHeightAnimation } from '../height-animation/useHeightAnimation' -import { TableAccordionContext } from './table-accordion/TableAccordionContext' -import type { TableAccordionContentRowProps } from './table-accordion/TableAccordionContent' +import { getClosestScrollViewElement } from '../../../shared/component-helper' +import { useHeightAnimation } from '../../height-animation/useHeightAnimation' +import { TableAccordionContext } from './TableAccordionContext' +import type { TableAccordionContentRowProps } from './TableAccordionContent' export type useTableAnimationHandlerProps = { /** From 5b69ebe0a2a99393b9441097575424732d63fe22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Fri, 14 Jun 2024 09:36:48 +0200 Subject: [PATCH 7/9] Use pascal case for properties tables --- .../src/docs/uilib/components/table/events.mdx | 8 ++++---- .../docs/uilib/components/table/properties.mdx | 16 ++++++++-------- .../src/components/table/TableDocs.ts | 12 ++++++------ 3 files changed, 18 insertions(+), 18 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 index 129057639dc..48c8a450392 100644 --- 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 @@ -4,16 +4,16 @@ showTabs: true import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' import { - tableEventProperties, - trEventProperties, + TableEventProperties, + TrEventProperties, } from '@dnb/eufemia/src/components/table/TableDocs' ## Table events - + ## Table Row `
` - + ### Table Row `` - + ### Table Header `
` - + ### Table Data `` - + diff --git a/packages/dnb-eufemia/src/components/table/TableDocs.ts b/packages/dnb-eufemia/src/components/table/TableDocs.ts index 7d522ffcc01..0f0c93ac34b 100644 --- a/packages/dnb-eufemia/src/components/table/TableDocs.ts +++ b/packages/dnb-eufemia/src/components/table/TableDocs.ts @@ -1,6 +1,6 @@ import { PropertiesTableProps } from '../../shared/types' -export const tableProperties: PropertiesTableProps = { +export const TableProperties: PropertiesTableProps = { accordion: { doc: 'Set to true if you have one or more rows that contains an accordion content.', type: 'boolean', @@ -73,7 +73,7 @@ export const tableProperties: PropertiesTableProps = { }, } -export const tableEventProperties: PropertiesTableProps = { +export const TableEventProperties: PropertiesTableProps = { collapseAllHandleRef: { doc: 'ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows.', type: 'React.MutableRefObject<() => void>', @@ -82,7 +82,7 @@ export const tableEventProperties: PropertiesTableProps = { }, } -export const trProperties: PropertiesTableProps = { +export const TrProperties: PropertiesTableProps = { /** * The variant of the tr */ @@ -123,7 +123,7 @@ export const trProperties: PropertiesTableProps = { }, } -export const trEventProperties: PropertiesTableProps = { +export const TrEventProperties: PropertiesTableProps = { onClick: { doc: 'will emit when user clicks/expands the table row. Returns a native click. ', type: '(event) => void', @@ -144,7 +144,7 @@ export const trEventProperties: PropertiesTableProps = { }, } -export const thProperties: PropertiesTableProps = { +export const ThProperties: PropertiesTableProps = { sortable: { doc: 'Defines the table header as sortable if set to `true` (ascending).', type: 'boolean', @@ -177,7 +177,7 @@ export const thProperties: PropertiesTableProps = { }, } -export const tdProperties: PropertiesTableProps = { +export const TdProperties: PropertiesTableProps = { noSpacing: { doc: 'If set to `true`, no padding will be added.', type: 'boolean', From 8992e9c38c93e6201291ab15750bf20651b58c22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Fri, 14 Jun 2024 09:38:13 +0200 Subject: [PATCH 8/9] Use const for typing instead of replication of object content --- .../height-animation/HeightAnimationInstance.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/dnb-eufemia/src/components/height-animation/HeightAnimationInstance.ts b/packages/dnb-eufemia/src/components/height-animation/HeightAnimationInstance.ts index e6a2436eb55..4fbe8650f75 100644 --- a/packages/dnb-eufemia/src/components/height-animation/HeightAnimationInstance.ts +++ b/packages/dnb-eufemia/src/components/height-animation/HeightAnimationInstance.ts @@ -44,15 +44,11 @@ export default class HeightAnimation { isAnimating: boolean __currentHeight: number - firstPaintStyle: { - visibility: 'hidden' - opacity: '0' - height: 'auto' - } = { + firstPaintStyle = { visibility: 'hidden', opacity: '0', // prevents before/after elements to be visible height: 'auto', - } + } as const constructor(opts: HeightAnimationOptions = {}) { this.isInBrowser = typeof window !== 'undefined' From e3b0bb19b7075fe9f4a83aae7034078b4dedafb8 Mon Sep 17 00:00:00 2001 From: Snorre Kim Date: Fri, 14 Jun 2024 11:14:25 +0200 Subject: [PATCH 9/9] mini fixes --- packages/dnb-eufemia/src/components/table/TableDocs.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/dnb-eufemia/src/components/table/TableDocs.ts b/packages/dnb-eufemia/src/components/table/TableDocs.ts index 0f0c93ac34b..c70d849bb03 100644 --- a/packages/dnb-eufemia/src/components/table/TableDocs.ts +++ b/packages/dnb-eufemia/src/components/table/TableDocs.ts @@ -26,7 +26,7 @@ export const TableProperties: PropertiesTableProps = { status: 'optional', }, sticky: { - doc: "Use `true? to enable a sticky Table header. Or use `'css-position'` to enable the CSS based scroll behavior.", + doc: "Use `true` to enable a sticky Table header. Or use `'css-position'` to enable the CSS based scroll behavior.", type: ['boolean', `'css-position'`], defaultValue: 'false', status: 'optional', @@ -125,7 +125,7 @@ export const TrProperties: PropertiesTableProps = { export const TrEventProperties: PropertiesTableProps = { onClick: { - doc: 'will emit when user clicks/expands the table row. Returns a native click. ', + doc: 'will emit when user clicks/expands the table row. Returns a native click.', type: '(event) => void', defaultValue: 'undefined', status: 'optional',