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

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

@@ -0,0 +1,54 @@
+/*
+ * 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 { ComponentStyle, WithStyleProps } from '@instructure/emotion'
+import type { Renderable, OtherHTMLAttributes } from '@instructure/shared-types'
+
+type TableCellOwnProps = {
+  /**
+   * Contains the column header for this cell.
+   * This gets rendered in `stacked` layout to identify the column the data
+   * belongs to.
+   */
+  header?: Renderable
+  /**
+   * Controls the text alignment in cell.
+   */
+  textAlign?: 'start' | 'center' | 'end'
+  children?: Renderable
+}
+
+type PropKeys = keyof TableCellOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TableCellProps = TableCellOwnProps &
+  WithStyleProps<null, TableCellStyle> &
+  OtherHTMLAttributes<TableCellOwnProps>
+
+type TableCellStyle = ComponentStyle<'cell'>
+const allowedProps: AllowedPropKeys = ['children', 'header', 'textAlign']
+
+export type { TableCellProps, TableCellStyle }
+export { allowedProps }

package/src/Table/v2/Cell/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 { TableCellProps, TableCellStyle } 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['TableCell'],
+  props: TableCellProps
+): TableCellStyle => {
+  const { textAlign } = props
+
+  return {
+    cell: {
+      label: 'cell',
+      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/ColHeader/index.tsx

@@ -0,0 +1,118 @@
+/*
+ * 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 } from 'react'
+
+import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import type { TableColHeaderProps } from './props'
+import { allowedProps } from './props'
+import {
+  ChevronsUpDownInstUIIcon,
+  ChevronUpInstUIIcon,
+  ChevronDownInstUIIcon
+} from '@instructure/ui-icons'
+
+/**
+---
+parent: Table
+id: Table.ColHeader
+---
+**/
+@withStyle(generateStyle)
+class ColHeader extends Component<TableColHeaderProps> {
+  static readonly componentId = 'Table.ColHeader'
+
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    textAlign: 'start',
+    sortDirection: 'none',
+    children: null,
+    scope: 'col'
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  handleClick = (event: React.SyntheticEvent) => {
+    const { id, onRequestSort } = this.props
+
+    onRequestSort && onRequestSort(event, { id })
+  }
+
+  renderSortArrow() {
+    const { sortDirection, onRequestSort } = this.props
+
+    if (sortDirection === 'ascending') {
+      return <ChevronUpInstUIIcon color="infoColor" size="sm" />
+    }
+    if (sortDirection === 'descending') {
+      return <ChevronDownInstUIIcon color="infoColor" size="sm" />
+    }
+    if (onRequestSort) {
+      return <ChevronsUpDownInstUIIcon color="baseColor" size="sm" />
+    }
+    return undefined
+  }
+
+  render() {
+    const { onRequestSort, width, children, sortDirection, scope, styles } =
+      this.props
+
+    return (
+      <th
+        {...omitProps(this.props, ColHeader.allowedProps)}
+        css={styles?.colHeader}
+        style={{
+          width
+        }}
+        scope={scope}
+        aria-sort={sortDirection}
+      >
+        {onRequestSort && (
+          <button onClick={this.handleClick} css={styles?.button}>
+            <div css={styles?.buttonContent}>
+              {callRenderProp(children)}
+              {this.renderSortArrow()}
+            </div>
+          </button>
+        )}
+        {!onRequestSort && children}
+        {!onRequestSort && this.renderSortArrow()}
+      </th>
+    )
+  }
+}
+
+export default ColHeader
+export { ColHeader }

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

@@ -0,0 +1,93 @@
+/*
+ * 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 { ThHTMLAttributes } from 'react'
+
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
+import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
+
+type TableColHeaderOwnProps = {
+  /**
+   * A unique id for this column. The `id` is also used as option in combobox,
+   * when sortable table is in stacked layout,
+   * and no `stackedSortByLabel` is provided.
+   */
+  id: string
+  /**
+   * A custom string to display as option text in the combobox (instead of
+   * using the `id` prop), when sortable table is in stacked layout.
+   */
+  stackedSortByLabel?: string
+  /**
+   * Control the width of column.
+   */
+  width?: string | number
+  /**
+   * Control the text alignment in column header
+   */
+  textAlign?: 'start' | 'center' | 'end'
+  /**
+   * The sorting direction
+   */
+  sortDirection?: 'none' | 'ascending' | 'descending'
+  /**
+   * Callback fired when column header is clicked.
+   */
+  onRequestSort?: (
+    event: React.SyntheticEvent,
+    param: { id: TableColHeaderOwnProps['id'] }
+  ) => void
+  /**
+   * The column header scope attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#scope
+   */
+  scope?: 'row' | 'col' | 'rowgroup' | 'colgroup' | 'auto'
+  children?: React.ReactNode
+}
+
+type PropKeys = keyof TableColHeaderOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TableColHeaderProps = TableColHeaderOwnProps &
+  WithStyleProps<null, TableColHeaderStyle> &
+  OtherHTMLAttributes<
+    TableColHeaderOwnProps,
+    ThHTMLAttributes<TableColHeaderOwnProps>
+  >
+
+type TableColHeaderStyle = ComponentStyle<
+  'colHeader' | 'button' | 'buttonContent'
+>
+const allowedProps: AllowedPropKeys = [
+  'id',
+  'stackedSortByLabel',
+  'children',
+  'width',
+  'textAlign',
+  'sortDirection',
+  'onRequestSort',
+  'scope'
+]
+
+export type { TableColHeaderProps, TableColHeaderStyle }
+export { allowedProps }

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

@@ -0,0 +1,95 @@
+/*
+ * 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 { TableColHeaderProps, TableColHeaderStyle } 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 that stores common values for the theme.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['TableColHeader'],
+  props: TableColHeaderProps,
+  sharedTokens: SharedTokens
+): TableColHeaderStyle => {
+  const { onRequestSort, textAlign } = props
+
+  const headerStyle = {
+    color: componentTheme.color,
+    fontSize: componentTheme.fontSize,
+    fontFamily: componentTheme.fontFamily,
+    fontWeight: 'bold',
+    lineHeight: componentTheme.lineHeight,
+    padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}`
+  }
+
+  const buttonTextAlignVariants = {
+    start: { flexDirection: 'row' },
+    center: { justifyContent: 'center' },
+    end: { flexDirection: 'row-reverse' }
+  }
+
+  return {
+    colHeader: {
+      label: 'colHeader',
+      background: componentTheme.background,
+      verticalAlign: 'middle',
+      boxSizing: 'border-box',
+      ...(!onRequestSort && headerStyle),
+      textAlign: textAlign
+    },
+    button: {
+      label: 'colHeader__button',
+      ...headerStyle,
+      display: 'flex',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      border: 'none',
+      width: '100%',
+      height: '100%',
+      background: 'transparent',
+      cursor: 'pointer',
+      outline: 'none',
+      '&::-moz-focus-inner': { border: 0 },
+      '&:focus': {
+        outline: `${sharedTokens.focusOutline.width} ${sharedTokens.focusOutline.style} ${sharedTokens.focusOutline.infoColor}`
+      },
+      ...(textAlign && buttonTextAlignVariants[textAlign])
+    },
+    buttonContent: {
+      label: 'colHeader__buttonContent',
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }
+}
+
+export default generateStyle

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

@@ -0,0 +1,200 @@
+/*
+ * 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, type ReactElement } from 'react'
+
+import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
+import { SimpleSelect } from '@instructure/ui-simple-select/latest'
+import type { SimpleSelectProps } from '@instructure/ui-simple-select/latest'
+import { ScreenReaderContent } from '@instructure/ui-a11y-content'
+import { CheckInstUIIcon } from '@instructure/ui-icons'
+import { warn } from '@instructure/console'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+
+import type { TableColHeaderProps } from '../ColHeader/props'
+import type { TableHeadProps } from './props'
+import type { RowChild } from '../props'
+import { allowedProps } from './props'
+import TableContext from '../TableContext'
+
+/**
+---
+parent: Table
+id: Table.Head
+---
+**/
+@withStyle(generateStyle)
+class Head extends Component<TableHeadProps> {
+  static readonly componentId = 'Table.Head'
+  static contextType = TableContext
+  declare context: ContextType<typeof TableContext>
+  static allowedProps = allowedProps
+  static defaultProps = {
+    children: null
+  }
+
+  /**
+   * Returns `true` if the first child's children have a `onRequestSort` prop
+   */
+  get isSortable() {
+    const [firstRow] = Children.toArray(this.props.children) as RowChild[]
+    let sortable = false
+    if (firstRow && firstRow.props && firstRow.props.children) {
+      Children.forEach(
+        firstRow.props.children,
+        (grandchild: ReactElement<any>) => {
+          if (grandchild?.props?.onRequestSort) {
+            sortable = true
+            return
+          }
+        }
+      )
+    }
+    return sortable
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    if (this.isSortable && typeof this.props.renderSortLabel === 'undefined') {
+      warn(
+        false,
+        '[Table.Head] The `renderSortLabel` prop should be provided when Table is sortable.'
+      )
+    }
+    this.props.makeStyles?.()
+  }
+
+  /**
+   * This `Select` is used in `stacked` layout. It's populated by iterating
+   * through the first child's children (by default `ColHeader`) and reading
+   * there the `id`, `stackedSortByLabel`, `sortDirection`, `onRequestSort` props
+   */
+  renderSelect() {
+    const { children, renderSortLabel } = this.props
+    const [firstRow] = Children.toArray(children) as RowChild[]
+
+    if (!firstRow?.props?.children) {
+      return null
+    }
+
+    const options: {
+      id: TableColHeaderProps['id']
+      label:
+        | TableColHeaderProps['stackedSortByLabel']
+        | TableColHeaderProps['id']
+    }[] = []
+    const clickHandlers: Record<
+      TableColHeaderProps['id'],
+      TableColHeaderProps['onRequestSort']
+    > = {}
+    let selectedOption: TableColHeaderProps['id'] | undefined
+    let count = 0
+    Children.forEach(
+      firstRow.props.children,
+      (grandchild: ReactElement<any>) => {
+        count += 1
+        if (!grandchild?.props) return // grandchild can be false
+        const { id, stackedSortByLabel, sortDirection, onRequestSort } =
+          grandchild.props
+        if (id && onRequestSort) {
+          const label = stackedSortByLabel || id
+          options.push({ id, label })
+          clickHandlers[id] = onRequestSort
+          if (sortDirection !== 'none') {
+            selectedOption = id
+          }
+        }
+      }
+    )
+    if (!options.length) {
+      return null
+    }
+    const handleSelect: SimpleSelectProps['onChange'] = (event, { value }) => {
+      if (value && typeof clickHandlers[value] === 'function') {
+        clickHandlers[value]!(event, { id: `${value}` })
+      }
+    }
+    return (
+      <div role="rowgroup">
+        <div role="row">
+          <div role="cell" aria-colspan={count}>
+            <SimpleSelect
+              renderLabel={
+                renderSortLabel ? (
+                  callRenderProp(renderSortLabel)
+                ) : (
+                  <ScreenReaderContent></ScreenReaderContent>
+                )
+              }
+              renderBeforeInput={
+                selectedOption ? () => <CheckInstUIIcon /> : undefined
+              }
+              value={selectedOption}
+              onChange={handleSelect}
+            >
+              {options.map(({ id, label }) => (
+                <SimpleSelect.Option
+                  id={id}
+                  key={id}
+                  value={id}
+                  renderBeforeLabel={
+                    id === selectedOption
+                      ? () => <CheckInstUIIcon />
+                      : () => (
+                          <span style={{ visibility: 'hidden' }}>
+                            <CheckInstUIIcon />
+                          </span>
+                        )
+                  }
+                >
+                  {label}
+                </SimpleSelect.Option>
+              ))}
+            </SimpleSelect>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  render() {
+    const { children, styles } = this.props
+    return this.context.isStacked ? (
+      this.renderSelect()
+    ) : (
+      <thead {...omitProps(this.props, Head.allowedProps)} css={styles?.head}>
+        {children}
+      </thead>
+    )
+  }
+}
+
+export default Head
+export { Head }

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

@@ -0,0 +1,64 @@
+/*
+ * 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'
+import { RowChild } from '../props'
+
+type TableHeadOwnProps = {
+  /**
+   * The sort `Select`'s label when using `stacked` layout and the table is
+   * sortable.
+   * If you don't want to display anything you should use `ScreenReaderContent`
+   * so screen readers can read the `Select`'s purpose
+   */
+  renderSortLabel?: Renderable
+  /**
+   * The header row(s).
+   * Default type: `Table.Row`
+   *
+   * Its first child is treated specially if the table is sortable and has
+   * `stacked` layout:
+   *
+   * A `Select` is created which reads options from the first child's
+   * children, that tries to read the following props: `id`,
+   * `stackedSortByLabel`,`sortDirection`, `onRequestSort` (Available on
+   * `Table.ColHeader`).
+   * These are used to sort the table in this layout.
+   */
+  children?: RowChild
+}
+type PropKeys = keyof TableHeadOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TableHeadProps = TableHeadOwnProps &
+  WithStyleProps<null, TableHeadStyle> &
+  OtherHTMLAttributes<TableHeadOwnProps>
+
+type TableHeadStyle = ComponentStyle<'head'>
+const allowedProps: AllowedPropKeys = ['children', 'renderSortLabel']
+
+export type { TableHeadProps, TableHeadStyle }
+export { allowedProps }