@instructure/ui-table 11.6.0 → 11.6.1-snapshot-129

package/src/Table/v2/Row/index.tsx

@@ -0,0 +1,105 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import {
+  Component,
+  Children,
+  ContextType,
+  isValidElement,
+  type ReactElement
+} from 'react'
+
+import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
+import { View } from '@instructure/ui-view/latest'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+
+import type { TableRowProps } from './props'
+import { allowedProps } from './props'
+import TableContext from '../TableContext'
+
+/**
+---
+parent: Table
+id: Table.Row
+---
+**/
+@withStyle(generateStyle)
+class Row extends Component<TableRowProps> {
+  static readonly componentId = 'Table.Row'
+  static contextType = TableContext
+  declare context: ContextType<typeof TableContext>
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    children: null
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.({
+      isStacked: this.context.isStacked,
+      hover: this.context.hover
+    })
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.({
+      isStacked: this.context.isStacked,
+      hover: this.context.hover
+    })
+  }
+
+  render() {
+    const { children, styles } = this.props
+    const isStacked = this.context.isStacked
+    const headers = this.context.headers
+
+    return (
+      <View
+        {...View.omitViewProps(omitProps(this.props, Row.allowedProps), Row)}
+        as={isStacked ? 'div' : 'tr'}
+        css={styles?.row}
+        role={isStacked ? 'row' : undefined}
+      >
+        {Children.toArray(children)
+          .filter(Boolean)
+          .map((child, index) => {
+            if (isValidElement(child)) {
+              return safeCloneElement(child, {
+                key: (child as ReactElement<any>).props.name,
+                // used by `Cell` to render its column title in `stacked` layout
+                header: headers && headers[index]
+              })
+            }
+            return child
+          })}
+      </View>
+    )
+  }
+}
+
+export default Row
+export { Row }

package/src/Table/v2/Row/props.ts

@@ -0,0 +1,67 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
+import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
+
+type TableRowOwnProps = {
+  /**
+   * A row's children should be table cells. Its children should have the
+   * `header` prop to render the column header in `stacked` layout
+   *
+   * By default, `Table.ColHeader` or `Table.RowHeader` or `Table.Cell`.
+   *
+   * Falsy values are also allowed to be able to use syntax like
+   * `{condition && <Table.Cell>bla<Table.Cell>}`
+   */
+  children?:
+    | React.ReactElement<any>
+    | null
+    | undefined
+    | boolean
+    | (React.ReactElement<any> | null | undefined | boolean)[]
+
+  /**
+   * Controls the hover state of the row.
+   * When set to true, the row will appear highlighted even when not hovered.
+   * When set to false, the row will not highlight on hover even if the hover prop is set to true.
+   */
+  setHoverStateTo?: boolean
+}
+
+type PropKeys = keyof TableRowOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TableRowProps = TableRowOwnProps &
+  WithStyleProps<null, TableRowStyle> &
+  OtherHTMLAttributes<TableRowOwnProps>
+
+type TableRowStyle = ComponentStyle<'row'>
+
+const allowedProps: AllowedPropKeys = ['children', 'setHoverStateTo']
+
+export type { TableRowProps, TableRowStyle }
+export { allowedProps }

package/src/Table/v2/Row/styles.ts

@@ -0,0 +1,78 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import type { TableRowProps, TableRowStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} _sharedTokens Shared token object (not used in this component)
+ * @param  {Object} extraArgs the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['TableRow'],
+  props: TableRowProps,
+  _sharedTokens: SharedTokens,
+  extraArgs: { isStacked: boolean; hover: boolean }
+): TableRowStyle => {
+  const { setHoverStateTo } = props
+
+  const hoverStyles = {
+    borderLeftColor: componentTheme.hoverBorderColor,
+    borderRightColor: componentTheme.hoverBorderColor
+  }
+
+  return {
+    row: {
+      label: 'row',
+      fontSize: componentTheme.fontSize,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      color: componentTheme.color,
+      background: componentTheme.background,
+      boxSizing: 'border-box',
+      borderBottomStyle: 'solid',
+      borderBottomWidth: '0.0625rem',
+      borderBottomColor: componentTheme.borderColor,
+
+      ...((setHoverStateTo ?? extraArgs.hover) && {
+        borderLeft: '0.1875rem solid transparent',
+        borderRight: '0.1875rem solid transparent',
+        ...(setHoverStateTo === true ? hoverStyles : { '&:hover': hoverStyles })
+      }),
+
+      ...(extraArgs.isStacked && {
+        padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}`
+      })
+    }
+  }
+}
+
+export default generateStyle

package/src/Table/v2/RowHeader/index.tsx

@@ -0,0 +1,84 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component, ContextType } from 'react'
+
+import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
+import { View } from '@instructure/ui-view/latest'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import type { TableRowHeaderProps } from './props'
+import { allowedProps } from './props'
+import TableContext from '../TableContext'
+
+/**
+---
+parent: Table
+id: Table.RowHeader
+---
+**/
+@withStyle(generateStyle)
+class RowHeader extends Component<TableRowHeaderProps> {
+  static readonly componentId = 'Table.RowHeader'
+  static contextType = TableContext
+  declare context: ContextType<typeof TableContext>
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    textAlign: 'start',
+    children: null
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  render() {
+    const { children, styles } = this.props
+    const isStacked = this.context.isStacked
+    return (
+      <View
+        {...View.omitViewProps(
+          omitProps(this.props, RowHeader.allowedProps),
+          RowHeader
+        )}
+        as={isStacked ? 'div' : 'th'}
+        css={styles?.rowHeader}
+        scope="row"
+        role={isStacked ? 'rowheader' : undefined}
+      >
+        {callRenderProp(children)}
+      </View>
+    )
+  }
+}
+
+export default RowHeader
+export { RowHeader }

package/src/Table/v2/RowHeader/props.ts

@@ -0,0 +1,48 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Renderable, OtherHTMLAttributes } from '@instructure/shared-types'
+import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
+
+type TableRowHeaderOwnProps = {
+  /**
+   * Control the text alignment in row header
+   */
+  textAlign?: 'start' | 'center' | 'end'
+  children?: Renderable
+}
+
+type PropKeys = keyof TableRowHeaderOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TableRowHeaderProps = TableRowHeaderOwnProps &
+  WithStyleProps<null, TableRowHeaderStyle> &
+  OtherHTMLAttributes<TableRowHeaderOwnProps>
+
+type TableRowHeaderStyle = ComponentStyle<'rowHeader'>
+const allowedProps: AllowedPropKeys = ['children', 'textAlign']
+
+export type { TableRowHeaderProps, TableRowHeaderStyle }
+export { allowedProps }

package/src/Table/v2/RowHeader/styles.ts

@@ -0,0 +1,60 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { TableRowHeaderProps, TableRowHeaderStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['TableRowHeader'],
+  props: TableRowHeaderProps
+): TableRowHeaderStyle => {
+  const { textAlign } = props
+
+  return {
+    rowHeader: {
+      label: 'rowHeader',
+      fontSize: componentTheme.fontSize,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      color: componentTheme.color,
+      background: componentTheme.background,
+      boxSizing: 'border-box',
+      verticalAlign: 'middle',
+      lineHeight: componentTheme.lineHeight,
+      padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}`,
+      ...(textAlign && { textAlign })
+    }
+  }
+}
+
+export default generateStyle

package/src/Table/v2/TableContext.ts

@@ -0,0 +1,66 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { createContext } from 'react'
+import { Renderable } from '@instructure/shared-types'
+
+type TableContextType = {
+  /**
+   * If `true` the table gets rendered in one column to be more readable on
+   * narrow screens.
+   */
+  isStacked: boolean
+  /**
+   * Highlight each row on hover.
+   */
+  hover: boolean
+  /**
+   * Contents of the first row of cells. Has value if `isStacked` is `true`.
+   */
+  headers?: Renderable[]
+}
+
+/**
+ * ---
+ * category: components/contexts
+ * ---
+ * React context created by the `Table` component to hold its data which are
+ * read by its children. You can access these to make custom Table cells/rows.
+ *
+ * It stores the following parameters:
+ * - `isStacked`: Whether the `Table` is in `stacked` layout.
+ * - `hover`: Whether highlight rows on mouse hover
+ * - `headers`: in `stacked` layout the children of the first row of cells
+ *   (e.g. the titles in a table). This is used in `stacked` layout to display
+ *   the titles inline
+ * @module
+ */
+const TableContext = createContext<TableContextType>({
+  isStacked: false,
+  hover: false
+})
+
+export default TableContext
+export { TableContext }
+export type { TableContextType }

package/src/Table/v2/index.tsx

@@ -0,0 +1,160 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component, Children, isValidElement, ReactElement } from 'react'
+
+import { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
+import { View } from '@instructure/ui-view/latest'
+import { ScreenReaderContent } from '@instructure/ui-a11y-content'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+
+import { Head } from './Head'
+import { Body } from './Body'
+import { Row } from './Row'
+import { ColHeader } from './ColHeader'
+import { RowHeader } from './RowHeader'
+import { Cell } from './Cell'
+
+import type { TableProps } from './props'
+
+import { allowedProps } from './props'
+import TableContext from './TableContext'
+import { error } from '@instructure/console'
+
+/**
+---
+category: components
+---
+**/
+@withStyle(generateStyle)
+class Table extends Component<TableProps> {
+  static readonly componentId = 'Table'
+
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    children: null,
+    hover: false,
+    layout: 'auto'
+  }
+
+  static Head = Head
+  static Body = Body
+  static Row = Row
+  static ColHeader = ColHeader
+  static RowHeader = RowHeader
+  static Cell = Cell
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  getHeaders() {
+    const [headChild] = Children.toArray(this.props.children)
+    if (!headChild || !isValidElement(headChild)) return undefined
+    const [firstRow] = Children.toArray(
+      (headChild as ReactElement<any>).props.children
+    )
+    if (!firstRow || !isValidElement(firstRow)) return undefined
+    return Children.map(
+      (firstRow as ReactElement<any>).props.children,
+      (colHeader) => {
+        if (!isValidElement<{ children?: any }>(colHeader)) return undefined
+        return colHeader.props.children
+      }
+    )
+  }
+
+  render() {
+    const { margin, layout, caption, children, hover, styles, minWidth } =
+      this.props
+    const isStacked = layout === 'stacked'
+    const headers = isStacked ? this.getHeaders() : undefined
+
+    if (!caption) {
+      error(false, `[Table] required prop caption is not set.`)
+    }
+
+    return (
+      <TableContext.Provider
+        value={{
+          isStacked: isStacked,
+          hover: hover!,
+          headers: headers
+        }}
+      >
+        <View
+          // All HTML props, except the ones accepted by `View` and `Table`
+          {...View.omitViewProps(
+            omitProps(this.props, Table.allowedProps),
+            Table
+          )}
+          minWidth={minWidth}
+          as={isStacked ? 'div' : 'table'}
+          margin={margin}
+          elementRef={this.handleRef}
+          css={styles?.table}
+          role={isStacked ? 'table' : undefined}
+          aria-label={isStacked ? (caption as string) : undefined}
+        >
+          {!isStacked && (
+            <caption>
+              <ScreenReaderContent>{caption}</ScreenReaderContent>
+            </caption>
+          )}
+          {Children.map(children, (child) => {
+            if (isValidElement(child)) {
+              return safeCloneElement(child, {
+                key: (child as ReactElement<any>).props.name
+              })
+            }
+            return child
+          })}
+        </View>
+      </TableContext.Provider>
+    )
+  }
+}
+
+export default Table
+export { Table }