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

package/lib/Table/v2/styles.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * 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.
+ */
+
+/**
+ * ---
+ * 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
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, _sharedTokens) => {
+  const layout = props.layout;
+  return {
+    table: {
+      label: 'table',
+      fontSize: componentTheme.fontSize,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      color: componentTheme.color,
+      background: componentTheme.background,
+      display: 'table',
+      width: '100%',
+      borderCollapse: 'collapse',
+      borderSpacing: 0,
+      ...(layout === 'fixed' && {
+        tableLayout: 'fixed'
+      }),
+      caption: {
+        textAlign: 'start'
+      }
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/{index.js → exports/a.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function () {
-    return _Table.Table;
+    return _v.Table;
   }
 });
 Object.defineProperty(exports, "TableBody", {
@@ -51,11 +51,11 @@ Object.defineProperty(exports, "TableRowHeader", {
     return _RowHeader.RowHeader;
   }
 });
-var _Table = require("./Table");
-var _TableContext = require("./Table/TableContext");
-var _Body = require("./Table/Body");
-var _Cell = require("./Table/Cell");
-var _ColHeader = require("./Table/ColHeader");
-var _Head = require("./Table/Head");
-var _Row = require("./Table/Row");
-var _RowHeader = require("./Table/RowHeader");
+var _v = require("../Table/v1");
+var _TableContext = require("../Table/v1/TableContext");
+var _Body = require("../Table/v1/Body");
+var _Cell = require("../Table/v1/Cell");
+var _ColHeader = require("../Table/v1/ColHeader");
+var _Head = require("../Table/v1/Head");
+var _Row = require("../Table/v1/Row");
+var _RowHeader = require("../Table/v1/RowHeader");

package/lib/exports/b.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () {
+    return _v.Table;
+  }
+});
+Object.defineProperty(exports, "TableBody", {
+  enumerable: true,
+  get: function () {
+    return _Body.Body;
+  }
+});
+Object.defineProperty(exports, "TableCell", {
+  enumerable: true,
+  get: function () {
+    return _Cell.Cell;
+  }
+});
+Object.defineProperty(exports, "TableColHeader", {
+  enumerable: true,
+  get: function () {
+    return _ColHeader.ColHeader;
+  }
+});
+Object.defineProperty(exports, "TableContext", {
+  enumerable: true,
+  get: function () {
+    return _TableContext.TableContext;
+  }
+});
+Object.defineProperty(exports, "TableHead", {
+  enumerable: true,
+  get: function () {
+    return _Head.Head;
+  }
+});
+Object.defineProperty(exports, "TableRow", {
+  enumerable: true,
+  get: function () {
+    return _Row.Row;
+  }
+});
+Object.defineProperty(exports, "TableRowHeader", {
+  enumerable: true,
+  get: function () {
+    return _RowHeader.RowHeader;
+  }
+});
+var _v = require("../Table/v2");
+var _TableContext = require("../Table/v2/TableContext");
+var _Body = require("../Table/v2/Body");
+var _Cell = require("../Table/v2/Cell");
+var _ColHeader = require("../Table/v2/ColHeader");
+var _Head = require("../Table/v2/Head");
+var _Row = require("../Table/v2/Row");
+var _RowHeader = require("../Table/v2/RowHeader");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,25 +15,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-a11y-content": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-simple-select": "11.6.0",
-    "@instructure/ui-view": "11.6.0",
-    "@instructure/ui-utils": "11.6.0"
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-a11y-content": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-simple-select": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -43,17 +43,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/Table/{Body → v1/Body}/index.tsx

@@ -31,8 +31,8 @@ import {
 } from 'react'
 
 import { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
-import { View } from '@instructure/ui-view'
-import { withStyle } from '@instructure/emotion'
+import { View } from '@instructure/ui-view/v11_6'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Table/{Cell → v1/Cell}/index.tsx

@@ -25,9 +25,9 @@
 import { Component, ContextType } from 'react'
 
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Table/{ColHeader → v1/ColHeader}/index.tsx

@@ -31,7 +31,7 @@ import {
   IconMiniArrowDoubleLine
 } from '@instructure/ui-icons'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Table/{Head → v1/Head}/index.tsx

@@ -25,13 +25,13 @@
 import { Component, Children, ContextType, type ReactElement } from 'react'
 
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
-import { SimpleSelect } from '@instructure/ui-simple-select'
-import type { SimpleSelectProps } from '@instructure/ui-simple-select'
+import { SimpleSelect } from '@instructure/ui-simple-select/v11_6'
+import type { SimpleSelectProps } from '@instructure/ui-simple-select/v11_6'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import { IconCheckLine } from '@instructure/ui-icons'
 import { warn } from '@instructure/console'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Table/{README.md → v1/README.md}

@@ -1152,4 +1152,4 @@ type: embed
     </Figure.Item>
   </Figure>
 </Guidelines>
-```
+```

package/src/Table/{Row → v1/Row}/index.tsx

@@ -31,9 +31,9 @@ import {
 } from 'react'
 
 import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Table/{RowHeader → v1/RowHeader}/index.tsx

@@ -25,9 +25,9 @@
 import { Component, ContextType } from 'react'
 
 import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Table/{index.tsx → v1/index.tsx}

@@ -25,10 +25,10 @@
 import { Component, Children, isValidElement, ReactElement } from 'react'
 
 import { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

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

@@ -0,0 +1,91 @@
+/*
+ * 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 { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
+import { View } from '@instructure/ui-view/latest'
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import type { TableBodyProps } from './props'
+import { allowedProps } from './props'
+import TableContext from '../TableContext'
+
+/**
+---
+parent: Table
+id: Table.Body
+---
+**/
+@withStyle(generateStyle)
+class Body extends Component<TableBodyProps> {
+  static readonly componentId = 'Table.Body'
+  static contextType = TableContext
+  declare context: ContextType<typeof TableContext>
+  static allowedProps = allowedProps
+  static defaultProps = {
+    children: null
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  render() {
+    const { children, styles } = this.props
+    const { isStacked } = this.context
+
+    return (
+      <View
+        {...View.omitViewProps(omitProps(this.props, Body.allowedProps), Body)}
+        as={isStacked ? 'div' : 'tbody'}
+        css={styles?.body}
+        role={isStacked ? 'rowgroup' : undefined}
+      >
+        {Children.map(children, (child) => {
+          if (isValidElement(child)) {
+            return safeCloneElement(child, {
+              key: (child as ReactElement<any>).props.name
+            })
+          }
+          return child
+        })}
+      </View>
+    )
+  }
+}
+
+export default Body
+export { Body }

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

@@ -0,0 +1,50 @@
+/*
+ * 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 TableBodyOwnProps = {
+  /**
+   * Body's children should be a container component where each child represents
+   * a row.
+   *
+   * `Table.Row` by default
+   */
+  children?: React.ReactNode
+}
+
+type PropKeys = keyof TableBodyOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TableBodyProps = TableBodyOwnProps &
+  WithStyleProps<null, TableBodyStyle> &
+  OtherHTMLAttributes<TableBodyOwnProps>
+
+type TableBodyStyle = ComponentStyle<'body'>
+const allowedProps: AllowedPropKeys = ['children']
+
+export type { TableBodyProps, TableBodyStyle }
+export { allowedProps }

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

@@ -0,0 +1,51 @@
+/*
+ * 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 { TableBodyStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['TableBody']
+): TableBodyStyle => {
+  return {
+    body: {
+      label: 'body',
+      fontSize: componentTheme.fontSize,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      color: componentTheme.color,
+      background: componentTheme.background
+    }
+  }
+}
+
+export default generateStyle

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

@@ -0,0 +1,83 @@
+/*
+ * 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 { TableCellProps } from './props'
+import { allowedProps } from './props'
+import TableContext from '../TableContext'
+
+/**
+---
+parent: Table
+id: Table.Cell
+---
+**/
+@withStyle(generateStyle)
+class Cell extends Component<TableCellProps> {
+  static readonly componentId = 'Table.Cell'
+  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, header } = this.props
+    const isStacked = this.context.isStacked
+
+    return (
+      <View
+        {...View.omitViewProps(omitProps(this.props, Cell.allowedProps), Cell)}
+        as={isStacked ? 'div' : 'td'}
+        css={styles?.cell}
+        role={isStacked ? 'cell' : undefined}
+      >
+        {header && callRenderProp(header)}
+        {header && ': '}
+        {callRenderProp(children)}
+      </View>
+    )
+  }
+}
+
+export default Cell
+export { Cell }