@ltht-react/table 2.0.192 → 2.0.194

package/README.md

@@ -1,15 +1,15 @@
-# Select
-
-<!-- STORY -->
-
-### Import
-
-```js
-import Select from '@ltht-react/table'
-```
-
-### Usage
-
-```jsx
-<Table />
-```
+# Select
+
+<!-- STORY -->
+
+### Import
+
+```js
+import Select from '@ltht-react/table'
+```
+
+### Usage
+
+```jsx
+<Table />
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/table",
-  "version": "2.0.192",
+  "version": "2.0.194",
   "description": "ltht-react Table component.",
   "author": "LTHT",
   "homepage": "",
@@ -28,15 +28,15 @@
   "dependencies": {
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "@ltht-react/button": "^2.0.192",
-    "@ltht-react/icon": "^2.0.192",
-    "@ltht-react/menu": "^2.0.192",
-    "@ltht-react/styles": "^2.0.192",
-    "@ltht-react/types": "^2.0.192",
-    "@ltht-react/utils": "^2.0.192",
+    "@ltht-react/button": "^2.0.194",
+    "@ltht-react/icon": "^2.0.194",
+    "@ltht-react/menu": "^2.0.194",
+    "@ltht-react/styles": "^2.0.194",
+    "@ltht-react/types": "^2.0.194",
+    "@ltht-react/utils": "^2.0.194",
     "@tanstack/react-table": "^8.10.7",
     "react": "^18.2.0",
     "react-uuid": "^2.0.0"
   },
-  "gitHead": "d97c241ba79c5e28edb4dec124e156cda6e9af66"
+  "gitHead": "2eb4b88fa2bc19baa1be9433dbe29fe1a947dc62"
 }

package/src/atoms/questionnaire-withdrawn-table-cell.tsx

@@ -1,15 +1,15 @@
-import { FC } from 'react'
-import styled from '@emotion/styled'
-
-const StyledText = styled.div`
-  text-decoration: line-through;
-  color: gray;
-`
-
-const QuestionnaireWithdrawnTableCell: FC<WithdrawnCellProps> = ({ text }) => <StyledText>{text ?? ''}</StyledText>
-
-export interface WithdrawnCellProps {
-  text?: string
-}
-
-export default QuestionnaireWithdrawnTableCell
+import { FC } from 'react'
+import styled from '@emotion/styled'
+
+const StyledText = styled.div`
+  text-decoration: line-through;
+  color: gray;
+`
+
+const QuestionnaireWithdrawnTableCell: FC<WithdrawnCellProps> = ({ text }) => <StyledText>{text ?? ''}</StyledText>
+
+export interface WithdrawnCellProps {
+  text?: string
+}
+
+export default QuestionnaireWithdrawnTableCell

package/src/index.tsx

@@ -1,8 +1,8 @@
-import Table, { Header, DataEntity, TableData, CellProps } from './molecules/table'
-import GenericTable from './organisms/generic-table'
-import QuestionnaireTable from './organisms/questionnaire-table'
-import { AdminActionsForQuestionnaire } from './organisms/questionnaire-table-methods'
-
-export default Table
-export { Header, TableData, DataEntity, CellProps, GenericTable, QuestionnaireTable, AdminActionsForQuestionnaire }
-export { default as mapQuestionnaireToTableData } from './organisms/questionnaire-table-methods'
+import Table, { Header, DataEntity, TableData, CellProps } from './molecules/table'
+import GenericTable from './organisms/generic-table'
+import QuestionnaireTable from './organisms/questionnaire-table'
+import { AdminActionsForQuestionnaire } from './organisms/questionnaire-table-methods'
+
+export default Table
+export { Header, TableData, DataEntity, CellProps, GenericTable, QuestionnaireTable, AdminActionsForQuestionnaire }
+export { default as mapQuestionnaireToTableData } from './organisms/questionnaire-table-methods'

package/src/molecules/table-cell.tsx

@@ -1,111 +1,111 @@
-import { FC, useRef } from 'react'
-import { Button } from '@ltht-react/button'
-import styled from '@emotion/styled'
-import Icon, { IconButton, IconProps } from '@ltht-react/icon'
-import ActionMenu, { ActionMenuOption } from '@ltht-react/menu'
-import { BTN_COLOURS } from '@ltht-react/styles'
-import { Axis } from '@ltht-react/types'
-
-const StyledIconText = styled.span`
-  margin-left: 0.4rem;
-`
-const StyledActionMenuContainer = styled.div`
-  display: flex;
-  justify-content: center;
-`
-
-// TODO: This component is still a WIP and will be re-factored soon!
-// May be best to split it out into different components, the important part is unifying Type used by React-Table so the mapping can be simplified
-// It will need to facilitate the Actions list capability Jonny Dyson has requested
-// Betters ways of handling the customComponentOverride will be considered too
-const TableCell: FC<CellProps> = ({
-  id,
-  adminActions,
-  isButton = false,
-  text,
-  iconProps,
-  headerAxis = 'x',
-  clickHandler,
-  customComponentOverride,
-}) => {
-  /*
-   * Ensures the action menu popup is rendered within the table’s DOM.
-   * Needed for Fullscreen API, since only elements inside the fullscreen subtree are visible.
-   * Using this ref as the portal root keeps the popup visible on top of the table in fullscreen.
-   */
-  const actionMenuRootElementRef = useRef<HTMLDivElement>(null)
-
-  if (customComponentOverride) {
-    return customComponentOverride
-  }
-
-  if (adminActions) {
-    if (adminActions.length === 0) {
-      return <></>
-    }
-    return (
-      <StyledActionMenuContainer ref={actionMenuRootElementRef}>
-        <ActionMenu
-          root={actionMenuRootElementRef}
-          id={`${`${id ?? ''}-`}action-menu-button`}
-          actions={adminActions}
-          menuButtonOptions={{
-            type: 'button',
-            text: '',
-            buttonProps: {
-              styling: {
-                buttonStyle: 'standard',
-                padding: headerAxis === 'x' ? '0.3rem 0.5rem' : '0.15rem 0.3rem',
-              },
-              icon: (
-                <Icon {...{ type: headerAxis === 'x' ? 'ellipsis-vertical' : 'ellipsis-horizontal', size: 'medium' }} />
-              ),
-              iconPlacement: 'center',
-              color: `${BTN_COLOURS.DANGER.VALUE}`,
-            },
-          }}
-          style={{
-            width: 'fit-content',
-          }}
-        />
-      </StyledActionMenuContainer>
-    )
-  }
-
-  if (isButton) {
-    return <Button id={id} value={text} icon={iconProps && <Icon {...iconProps} />} onClick={clickHandler} />
-  }
-
-  if (clickHandler && iconProps) {
-    return <IconButton id={id} iconProps={iconProps} text={text} onClick={clickHandler} />
-  }
-
-  if (iconProps) {
-    return (
-      <>
-        <Icon {...iconProps} />
-        {text && <StyledIconText>{text}</StyledIconText>}
-      </>
-    )
-  }
-
-  if (text) {
-    return <div id={id}>{text ?? ''}</div>
-  }
-
-  return <></>
-}
-
-export interface CellProps {
-  adminActions?: ActionMenuOption[]
-  isButton?: boolean
-  text?: string
-  iconProps?: IconProps
-  clickHandler?: React.MouseEventHandler<HTMLButtonElement>
-  customComponentOverride?: JSX.Element
-  parentStyle?: React.CSSProperties
-  headerAxis?: Axis
-  id?: string
-}
-
-export default TableCell
+import { FC, useRef } from 'react'
+import { Button } from '@ltht-react/button'
+import styled from '@emotion/styled'
+import Icon, { IconButton, IconProps } from '@ltht-react/icon'
+import ActionMenu, { ActionMenuOption } from '@ltht-react/menu'
+import { BTN_COLOURS } from '@ltht-react/styles'
+import { Axis } from '@ltht-react/types'
+
+const StyledIconText = styled.span`
+  margin-left: 0.4rem;
+`
+const StyledActionMenuContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`
+
+// TODO: This component is still a WIP and will be re-factored soon!
+// May be best to split it out into different components, the important part is unifying Type used by React-Table so the mapping can be simplified
+// It will need to facilitate the Actions list capability Jonny Dyson has requested
+// Betters ways of handling the customComponentOverride will be considered too
+const TableCell: FC<CellProps> = ({
+  id,
+  adminActions,
+  isButton = false,
+  text,
+  iconProps,
+  headerAxis = 'x',
+  clickHandler,
+  customComponentOverride,
+}) => {
+  /*
+   * Ensures the action menu popup is rendered within the table’s DOM.
+   * Needed for Fullscreen API, since only elements inside the fullscreen subtree are visible.
+   * Using this ref as the portal root keeps the popup visible on top of the table in fullscreen.
+   */
+  const actionMenuRootElementRef = useRef<HTMLDivElement>(null)
+
+  if (customComponentOverride) {
+    return customComponentOverride
+  }
+
+  if (adminActions) {
+    if (adminActions.length === 0) {
+      return <></>
+    }
+    return (
+      <StyledActionMenuContainer ref={actionMenuRootElementRef}>
+        <ActionMenu
+          root={actionMenuRootElementRef}
+          id={`${`${id ?? ''}-`}action-menu-button`}
+          actions={adminActions}
+          menuButtonOptions={{
+            type: 'button',
+            text: '',
+            buttonProps: {
+              styling: {
+                buttonStyle: 'standard',
+                padding: headerAxis === 'x' ? '0.3rem 0.5rem' : '0.15rem 0.3rem',
+              },
+              icon: (
+                <Icon {...{ type: headerAxis === 'x' ? 'ellipsis-vertical' : 'ellipsis-horizontal', size: 'medium' }} />
+              ),
+              iconPlacement: 'center',
+              color: `${BTN_COLOURS.DANGER.VALUE}`,
+            },
+          }}
+          style={{
+            width: 'fit-content',
+          }}
+        />
+      </StyledActionMenuContainer>
+    )
+  }
+
+  if (isButton) {
+    return <Button id={id} value={text} icon={iconProps && <Icon {...iconProps} />} onClick={clickHandler} />
+  }
+
+  if (clickHandler && iconProps) {
+    return <IconButton id={id} iconProps={iconProps} text={text} onClick={clickHandler} />
+  }
+
+  if (iconProps) {
+    return (
+      <>
+        <Icon {...iconProps} />
+        {text && <StyledIconText>{text}</StyledIconText>}
+      </>
+    )
+  }
+
+  if (text) {
+    return <div id={id}>{text ?? ''}</div>
+  }
+
+  return <></>
+}
+
+export interface CellProps {
+  adminActions?: ActionMenuOption[]
+  isButton?: boolean
+  text?: string
+  iconProps?: IconProps
+  clickHandler?: React.MouseEventHandler<HTMLButtonElement>
+  customComponentOverride?: JSX.Element
+  parentStyle?: React.CSSProperties
+  headerAxis?: Axis
+  id?: string
+}
+
+export default TableCell

package/src/molecules/table-component.tsx

@@ -1,123 +1,123 @@
-import Icon from '@ltht-react/icon'
-import { flexRender, Header as ReactTableHeader, Table } from '@tanstack/react-table'
-import { HTMLAttributes, useMemo, useRef } from 'react'
-import { calculateStaticColumnOffset } from './table-methods'
-import {
-  StyledNextPageButtonContainer,
-  StyledSpinnerContainer,
-  StyledTable,
-  StyledTableRow,
-  StyledTableData,
-  StyledTHead,
-} from './table-styled-components'
-import useDimensionsRef from './useDimensionRef'
-import { CellProps } from './table-cell'
-import { ITableConfig } from './table'
-import TableHeader from './table-header'
-
-const TableComponent = <T,>({ table, staticColumns = 0, headerAxis, ...rest }: ITableHeadProps<T>): JSX.Element => {
-  const tableIdPrefix = rest.id ? `${rest.id}-` : ''
-
-  const firstColumn = useRef(null)
-  const secondColumn = useRef(null)
-  const tableElement = useRef(null)
-  const { width: firstColumnWidth } = useDimensionsRef(firstColumn, tableElement)
-  const { width: secondColumnWidth } = useDimensionsRef(secondColumn, tableElement)
-
-  const usingExpanderColumn = table.getHeaderGroups().some((x) => x.headers.some((h) => h.column.id === 'expander'))
-  const totalStaticColumns = useMemo(
-    () => (usingExpanderColumn ? staticColumns + 1 : staticColumns),
-    [usingExpanderColumn, staticColumns]
-  )
-
-  const getHeaderColumn = <TData, TValue>(header: ReactTableHeader<TData, TValue>, headerIndex: number) => {
-    const stickyWidth = calculateStaticColumnOffset(
-      headerIndex,
-      totalStaticColumns,
-      firstColumnWidth,
-      secondColumnWidth
-    )
-    const headerProps = {
-      header,
-      stickyWidth,
-    }
-    switch (headerIndex) {
-      case 0:
-        return <TableHeader key={header.id} tableId={tableIdPrefix} ref={firstColumn} {...headerProps} />
-      case 1:
-        return <TableHeader key={header.id} tableId={tableIdPrefix} ref={secondColumn} {...headerProps} />
-      default:
-        return <TableHeader key={header.id} tableId={tableIdPrefix} {...headerProps} />
-    }
-  }
-
-  return (
-    <StyledTable ref={tableElement} {...rest}>
-      <StyledTHead>
-        {table.getHeaderGroups().map((headerGroup) => (
-          <tr key={headerGroup.id} id={`${tableIdPrefix}${headerGroup.id}`} role="row">
-            {headerGroup.headers.map((header, headerIndex) => getHeaderColumn(header, headerIndex))}
-          </tr>
-        ))}
-      </StyledTHead>
-      <tbody>
-        {table.getRowModel().rows.map((row) => (
-          <StyledTableRow tableHeaderAxis={headerAxis} key={row.id} role="row">
-            {row.getVisibleCells().map((cell, cellIdx) => (
-              <StyledTableData
-                tableHeaderAxis={headerAxis}
-                stickyWidth={calculateStaticColumnOffset(
-                  cellIdx,
-                  totalStaticColumns,
-                  firstColumnWidth,
-                  secondColumnWidth
-                )}
-                key={cell.id}
-                id={`${tableIdPrefix}${cell.id}`}
-                role="cell"
-                style={(cell.getValue() as CellProps)?.parentStyle}
-              >
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </StyledTableData>
-            ))}
-          </StyledTableRow>
-        ))}
-      </tbody>
-    </StyledTable>
-  )
-}
-
-const TableNavigationButton = ({ position, hidden, clickHandler }: ITableNavButtonProps) => (
-  <StyledNextPageButtonContainer
-    role="button"
-    elementPosition={position}
-    onClick={() => clickHandler()}
-    hidden={hidden}
-  >
-    <Icon type="chevron" direction={position === 'bottom' ? 'down' : 'right'} size="medium" />
-  </StyledNextPageButtonContainer>
-)
-
-const TableSpinner = ({ position, hidden }: ITableSpinnerProps) => (
-  <StyledSpinnerContainer elementPosition={position} hidden={hidden}>
-    <Icon type="spinner" size="medium" title="Loading..." />
-  </StyledSpinnerContainer>
-)
-
-interface ITableNavButtonProps {
-  position: 'bottom' | 'right'
-  hidden: boolean
-  clickHandler: () => void
-}
-
-interface ITableSpinnerProps {
-  position: 'bottom' | 'right'
-  hidden: boolean
-}
-
-interface ITableHeadProps<T> extends ITableConfig, HTMLAttributes<HTMLTableElement> {
-  table: Table<T>
-}
-
-export default TableComponent
-export { TableNavigationButton, TableSpinner }
+import Icon from '@ltht-react/icon'
+import { flexRender, Header as ReactTableHeader, Table } from '@tanstack/react-table'
+import { HTMLAttributes, useMemo, useRef } from 'react'
+import { calculateStaticColumnOffset } from './table-methods'
+import {
+  StyledNextPageButtonContainer,
+  StyledSpinnerContainer,
+  StyledTable,
+  StyledTableRow,
+  StyledTableData,
+  StyledTHead,
+} from './table-styled-components'
+import useDimensionsRef from './useDimensionRef'
+import { CellProps } from './table-cell'
+import { ITableConfig } from './table'
+import TableHeader from './table-header'
+
+const TableComponent = <T,>({ table, staticColumns = 0, headerAxis, ...rest }: ITableHeadProps<T>): JSX.Element => {
+  const tableIdPrefix = rest.id ? `${rest.id}-` : ''
+
+  const firstColumn = useRef(null)
+  const secondColumn = useRef(null)
+  const tableElement = useRef(null)
+  const { width: firstColumnWidth } = useDimensionsRef(firstColumn, tableElement)
+  const { width: secondColumnWidth } = useDimensionsRef(secondColumn, tableElement)
+
+  const usingExpanderColumn = table.getHeaderGroups().some((x) => x.headers.some((h) => h.column.id === 'expander'))
+  const totalStaticColumns = useMemo(
+    () => (usingExpanderColumn ? staticColumns + 1 : staticColumns),
+    [usingExpanderColumn, staticColumns]
+  )
+
+  const getHeaderColumn = <TData, TValue>(header: ReactTableHeader<TData, TValue>, headerIndex: number) => {
+    const stickyWidth = calculateStaticColumnOffset(
+      headerIndex,
+      totalStaticColumns,
+      firstColumnWidth,
+      secondColumnWidth
+    )
+    const headerProps = {
+      header,
+      stickyWidth,
+    }
+    switch (headerIndex) {
+      case 0:
+        return <TableHeader key={header.id} tableId={tableIdPrefix} ref={firstColumn} {...headerProps} />
+      case 1:
+        return <TableHeader key={header.id} tableId={tableIdPrefix} ref={secondColumn} {...headerProps} />
+      default:
+        return <TableHeader key={header.id} tableId={tableIdPrefix} {...headerProps} />
+    }
+  }
+
+  return (
+    <StyledTable ref={tableElement} {...rest}>
+      <StyledTHead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id} id={`${tableIdPrefix}${headerGroup.id}`} role="row">
+            {headerGroup.headers.map((header, headerIndex) => getHeaderColumn(header, headerIndex))}
+          </tr>
+        ))}
+      </StyledTHead>
+      <tbody>
+        {table.getRowModel().rows.map((row) => (
+          <StyledTableRow tableHeaderAxis={headerAxis} key={row.id} role="row">
+            {row.getVisibleCells().map((cell, cellIdx) => (
+              <StyledTableData
+                tableHeaderAxis={headerAxis}
+                stickyWidth={calculateStaticColumnOffset(
+                  cellIdx,
+                  totalStaticColumns,
+                  firstColumnWidth,
+                  secondColumnWidth
+                )}
+                key={cell.id}
+                id={`${tableIdPrefix}${cell.id}`}
+                role="cell"
+                style={(cell.getValue() as CellProps)?.parentStyle}
+              >
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </StyledTableData>
+            ))}
+          </StyledTableRow>
+        ))}
+      </tbody>
+    </StyledTable>
+  )
+}
+
+const TableNavigationButton = ({ position, hidden, clickHandler }: ITableNavButtonProps) => (
+  <StyledNextPageButtonContainer
+    role="button"
+    elementPosition={position}
+    onClick={() => clickHandler()}
+    hidden={hidden}
+  >
+    <Icon type="chevron" direction={position === 'bottom' ? 'down' : 'right'} size="medium" />
+  </StyledNextPageButtonContainer>
+)
+
+const TableSpinner = ({ position, hidden }: ITableSpinnerProps) => (
+  <StyledSpinnerContainer elementPosition={position} hidden={hidden}>
+    <Icon type="spinner" size="medium" title="Loading..." />
+  </StyledSpinnerContainer>
+)
+
+interface ITableNavButtonProps {
+  position: 'bottom' | 'right'
+  hidden: boolean
+  clickHandler: () => void
+}
+
+interface ITableSpinnerProps {
+  position: 'bottom' | 'right'
+  hidden: boolean
+}
+
+interface ITableHeadProps<T> extends ITableConfig, HTMLAttributes<HTMLTableElement> {
+  table: Table<T>
+}
+
+export default TableComponent
+export { TableNavigationButton, TableSpinner }

package/src/molecules/table-header.tsx

@@ -1,38 +1,38 @@
-import { forwardRef, Ref } from 'react'
-import { flexRender, Header as ReactTableHeader } from '@tanstack/react-table'
-import { StyledTableHeader } from './table-styled-components'
-
-interface TableHeaderProps<TData, TValue> {
-  tableId?: string
-  header: ReactTableHeader<TData, TValue>
-  stickyWidth?: number
-}
-
-export const Wrapper = <TData, TValue>(
-  { tableId, header, stickyWidth }: TableHeaderProps<TData, TValue>,
-  ref?: Ref<HTMLTableCellElement>
-) => (
-  <StyledTableHeader
-    id={`${tableId}${header.id}`}
-    ref={ref}
-    stickyWidth={stickyWidth}
-    colSpan={header.colSpan}
-    role="columnheader"
-    {...(header.column.id !== 'expander'
-      ? {
-          style: {
-            cursor: header.column.getCanSort() ? 'pointer' : '',
-          },
-          onClick: header.column.getToggleSortingHandler(),
-        }
-      : {})}
-  >
-    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-  </StyledTableHeader>
-)
-
-const TableHeader = forwardRef(Wrapper) as <TData, TValue>(
-  props: TableHeaderProps<TData, TValue> & { ref?: Ref<HTMLTableCellElement> }
-) => ReturnType<typeof Wrapper>
-
-export default TableHeader
+import { forwardRef, Ref } from 'react'
+import { flexRender, Header as ReactTableHeader } from '@tanstack/react-table'
+import { StyledTableHeader } from './table-styled-components'
+
+interface TableHeaderProps<TData, TValue> {
+  tableId?: string
+  header: ReactTableHeader<TData, TValue>
+  stickyWidth?: number
+}
+
+export const Wrapper = <TData, TValue>(
+  { tableId, header, stickyWidth }: TableHeaderProps<TData, TValue>,
+  ref?: Ref<HTMLTableCellElement>
+) => (
+  <StyledTableHeader
+    id={`${tableId}${header.id}`}
+    ref={ref}
+    stickyWidth={stickyWidth}
+    colSpan={header.colSpan}
+    role="columnheader"
+    {...(header.column.id !== 'expander'
+      ? {
+          style: {
+            cursor: header.column.getCanSort() ? 'pointer' : '',
+          },
+          onClick: header.column.getToggleSortingHandler(),
+        }
+      : {})}
+  >
+    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+  </StyledTableHeader>
+)
+
+const TableHeader = forwardRef(Wrapper) as <TData, TValue>(
+  props: TableHeaderProps<TData, TValue> & { ref?: Ref<HTMLTableCellElement> }
+) => ReturnType<typeof Wrapper>
+
+export default TableHeader