@instructure/ui-table 10.22.1-snapshot-0 → 10.22.1-snapshot-2

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.22.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.22.0...v10.22.1-snapshot-0) (2025-07-08)
+## [10.22.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.22.0...v10.22.1-snapshot-2) (2025-07-09)
 
 
 ### Features

package/README.md

@@ -1,7 +1,3 @@
----
-category: packages
----
-
 ## ui-table
 
 [![npm][npm]][npm-url]

package/es/Table/TableContext.js

@@ -24,7 +24,19 @@
 
 import { createContext } from 'react';
 /**
- * React context created by the `Table` component to hold its data
+ * ---
+ * category: utilities/react
+ * ---
+ * 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 = /*#__PURE__*/createContext({
   isStacked: false,

package/lib/Table/TableContext.js

@@ -30,7 +30,19 @@ var _react = require("react");
  */
 
 /**
- * React context created by the `Table` component to hold its data
+ * ---
+ * category: utilities/react
+ * ---
+ * 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 = exports.TableContext = /*#__PURE__*/(0, _react.createContext)({
   isStacked: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "10.22.1-snapshot-0",
+  "version": "10.22.1-snapshot-2",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,10 +23,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.22.1-snapshot-0",
-    "@instructure/ui-babel-preset": "10.22.1-snapshot-0",
-    "@instructure/ui-color-utils": "10.22.1-snapshot-0",
-    "@instructure/ui-themes": "10.22.1-snapshot-0",
+    "@instructure/ui-axe-check": "10.22.1-snapshot-2",
+    "@instructure/ui-babel-preset": "10.22.1-snapshot-2",
+    "@instructure/ui-color-utils": "10.22.1-snapshot-2",
+    "@instructure/ui-themes": "10.22.1-snapshot-2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
@@ -34,17 +34,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.22.1-snapshot-0",
-    "@instructure/emotion": "10.22.1-snapshot-0",
-    "@instructure/shared-types": "10.22.1-snapshot-0",
-    "@instructure/ui-a11y-content": "10.22.1-snapshot-0",
-    "@instructure/ui-icons": "10.22.1-snapshot-0",
-    "@instructure/ui-prop-types": "10.22.1-snapshot-0",
-    "@instructure/ui-react-utils": "10.22.1-snapshot-0",
-    "@instructure/ui-simple-select": "10.22.1-snapshot-0",
-    "@instructure/ui-testable": "10.22.1-snapshot-0",
-    "@instructure/ui-utils": "10.22.1-snapshot-0",
-    "@instructure/ui-view": "10.22.1-snapshot-0",
+    "@instructure/console": "10.22.1-snapshot-2",
+    "@instructure/emotion": "10.22.1-snapshot-2",
+    "@instructure/shared-types": "10.22.1-snapshot-2",
+    "@instructure/ui-a11y-content": "10.22.1-snapshot-2",
+    "@instructure/ui-icons": "10.22.1-snapshot-2",
+    "@instructure/ui-prop-types": "10.22.1-snapshot-2",
+    "@instructure/ui-react-utils": "10.22.1-snapshot-2",
+    "@instructure/ui-simple-select": "10.22.1-snapshot-2",
+    "@instructure/ui-testable": "10.22.1-snapshot-2",
+    "@instructure/ui-utils": "10.22.1-snapshot-2",
+    "@instructure/ui-view": "10.22.1-snapshot-2",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Table/README.md

@@ -1763,7 +1763,7 @@ Wrapper HOCs are simple, just return the original component:
 If you want to use fully custom components you have to pay attention to the following:
 
 - Render them as the appropriate HTML Table tags (`tr`, `th`, ...)
-- Read the `hover` prop from `TableContext` to customize hover behaviour
+- Read the `hover` prop from [TableContext](#TableContext) to customize hover behaviour
 - A11y: Row header cells must have the `scope='row'` HTML attribute
 - A11y: Column header cells must have the `scope='col'` and `aria-sort` (if sortable) HTML attribute
 
@@ -1977,13 +1977,13 @@ Basic fully custom table:
 
 #### Fully custom components with `stacked` layout
 
-This layout for small screens displays the table as a list. To accomplish this the headers are passed down to cells (in `TableContext`), so they can display what column they are rendering.
+This layout for small screens displays the table as a list. To accomplish this the headers are passed down to cells (in [TableContext](#TableContext)), so they can display what column they are rendering.
 In this layout for accessibility not render HTML table tags, just plain DOM elements (e.g. `div`) and use the appropriate ARIA role to signify that it's actually a `Table` (e.g. [`cell`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/cell_role), [`row`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/row_role), [`rowheader`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/rowheader_role)).  
 Also you need the following props on the components:
 
 ##### Table rows
 
-- It should read the `headers` array from `TableContext` and pass its nth element to its nth child (if they have such prop).
+- It should read the `headers` array from [TableContext](#TableContext) and pass its nth element to its nth child (if they have such prop).
 
 ##### The children of the first row in `Table.Head` (`Table.ColHeader` by default)
 
@@ -1991,7 +1991,7 @@ Also you need the following props on the components:
 
 ##### Table cells
 
-- It needs to have an optional `header` prop and should display its value so the user knows which column the cell's value belongs to (you can read whether the table is using `stacked` layout from `TableContext`.
+- It needs to have an optional `header` prop and should display its value so the user knows which column the cell's value belongs to (you can read whether the table is using `stacked` layout from [TableContext](#TableContext).
 
 Custom table with `stacked` layout support:
 

package/src/Table/TableContext.ts

@@ -42,7 +42,19 @@ type TableContextType = {
 }
 
 /**
- * React context created by the `Table` component to hold its data
+ * ---
+ * category: utilities/react
+ * ---
+ * 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,