@atlaskit/table-tree 9.7.1 → 9.9.0

package/dist/cjs/components/row.js

@@ -28,7 +28,7 @@ var treeRowClickableStyles = (0, _react2.css)({
   cursor: 'pointer'
 });
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.7.1";
+var packageVersion = "9.9.0";
 var Row = exports.RowWithoutAnalytics = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Row, _Component);
   var _super = _createSuper(Row);

package/dist/cjs/components/table-tree.js

@@ -67,6 +67,8 @@ var TableTree = exports.default = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         items = _this$props.items,
+        label = _this$props.label,
+        referencedLabel = _this$props.referencedLabel,
         shouldExpandOnClick = _this$props.shouldExpandOnClick,
         headers = _this$props.headers,
         columns = _this$props.columns,
@@ -118,7 +120,9 @@ var TableTree = exports.default = /*#__PURE__*/function (_Component) {
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         role: "treegrid",
-        "aria-readonly": true
+        "aria-readonly": true,
+        "aria-label": label,
+        "aria-labelledby": referencedLabel
       }, heads, rows, this.props.children));
     }
   }]);

package/dist/es2019/components/row.js

@@ -12,7 +12,7 @@ const treeRowClickableStyles = css({
   cursor: 'pointer'
 });
 const packageName = "@atlaskit/table-tree";
-const packageVersion = "9.7.1";
+const packageVersion = "9.9.0";
 class Row extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/table-tree.js

@@ -40,6 +40,8 @@ export default class TableTree extends Component {
   render() {
     const {
       items,
+      label,
+      referencedLabel,
       shouldExpandOnClick,
       headers,
       columns,
@@ -87,7 +89,9 @@ export default class TableTree extends Component {
       }
     }, /*#__PURE__*/React.createElement("div", {
       role: "treegrid",
-      "aria-readonly": true
+      "aria-readonly": true,
+      "aria-label": label,
+      "aria-labelledby": referencedLabel
     }, heads, rows, this.props.children));
   }
 }

package/dist/esm/components/row.js

@@ -20,7 +20,7 @@ var treeRowClickableStyles = css({
   cursor: 'pointer'
 });
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.7.1";
+var packageVersion = "9.9.0";
 var Row = /*#__PURE__*/function (_Component) {
   _inherits(Row, _Component);
   var _super = _createSuper(Row);

package/dist/esm/components/table-tree.js

@@ -58,6 +58,8 @@ var TableTree = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         items = _this$props.items,
+        label = _this$props.label,
+        referencedLabel = _this$props.referencedLabel,
         shouldExpandOnClick = _this$props.shouldExpandOnClick,
         headers = _this$props.headers,
         columns = _this$props.columns,
@@ -109,7 +111,9 @@ var TableTree = /*#__PURE__*/function (_Component) {
         }
       }, /*#__PURE__*/React.createElement("div", {
         role: "treegrid",
-        "aria-readonly": true
+        "aria-readonly": true,
+        "aria-label": label,
+        "aria-labelledby": referencedLabel
       }, heads, rows, this.props.children));
     }
   }]);

package/dist/types/components/cell.d.ts

@@ -1,23 +1,23 @@
 import { ReactNode } from 'react';
 export interface CellProps {
     /**
-     * Whether the cell contents should wrap or display on a single line and be concatenated.
+     * Sets whether the cell contents should wrap or display on a single line and be truncated. For accessibility reasons, wrapping the content is strongly recommended.
      */
     singleLine?: boolean;
     /**
-     * Indent level for the cell. Each indent level adds 25px to the left padding.
+     * Sets the indent level for the cell. Each indent level adds `25px` to the left padding.
      */
     indentLevel?: number;
     /**
-     * Width of the header item. Takes a string or a number representing the width in pixels.
+     * The width of the header item. Takes a string, or a number representing the width in pixels.
      */
     width?: number | string;
     /**
-     * Class name to apply to cell.
+     * Class name to apply to the cell.
      */
     className?: string;
     /**
-     * Children content, used when composing table-tree from internal components
+     * Children content, used when composing a table tree from internal components
      */
     children?: ReactNode;
 }

package/dist/types-ts4.5/components/cell.d.ts

@@ -1,23 +1,23 @@
 import { ReactNode } from 'react';
 export interface CellProps {
     /**
-     * Whether the cell contents should wrap or display on a single line and be concatenated.
+     * Sets whether the cell contents should wrap or display on a single line and be truncated. For accessibility reasons, wrapping the content is strongly recommended.
      */
     singleLine?: boolean;
     /**
-     * Indent level for the cell. Each indent level adds 25px to the left padding.
+     * Sets the indent level for the cell. Each indent level adds `25px` to the left padding.
      */
     indentLevel?: number;
     /**
-     * Width of the header item. Takes a string or a number representing the width in pixels.
+     * The width of the header item. Takes a string, or a number representing the width in pixels.
      */
     width?: number | string;
     /**
-     * Class name to apply to cell.
+     * Class name to apply to the cell.
      */
     className?: string;
     /**
-     * Children content, used when composing table-tree from internal components
+     * Children content, used when composing a table tree from internal components
      */
     children?: ReactNode;
 }

package/extract-react-types/table-tree-row.tsx

@@ -16,7 +16,7 @@ type RowProps = {
    */
   hasChildren?: boolean;
   /**
-   * Children contained in the row. Should be one or more Cell components.
+   * Children contained in the row. Should be one or more cell components.
    */
   children?: React.ReactNode;
   /**
@@ -41,49 +41,49 @@ type RowProps = {
    */
   isDefaultExpanded?: ReactNode;
   /**
-   * Visually hidden text placed inside the expand chevron button.
+   * This is the accessible name for the expand chevron button, used to tell assistive technology what the button is for.
    */
   expandLabel?: string;
   /**
-   * Visually hidden text placed inside the collapse chevron button.
+   * This is the accessible name for the collapse chevron button, used to tell assistive technology what the button is for.
    */
   collapseLabel?: string;
   /**
-   * Callback called when row collapses.
+   * Callback called when the row collapses.
    */
   onCollapse?: (data: Item) => void;
   /**
-   * Callback called when row expands.
+   * Callback called when the row expands.
    */
   onExpand?: (data: Item) => void;
   /**
-   * Children to render under row.
-   * Normally set by parent Item component and does not need to be configured.
+   * Children to render under the row.
+   * This is normally set by the parent item component, and doesn't need to be configured.
    */
   renderChildren?: () => React.ReactNode;
   /**
-    Whether a row with children should expand when clicked anywhere within the row. If false or unset, a row with children will only expand when the chevron is clicked.
+    Use this to set whether a row with children should expand when clicked anywhere within the row. If `false` or unset, a row with children will only expand when the chevron is clicked.
 
-    If your cells contain interactive elements, this can cause unexpected expanding or collapsing.
+    If your cells contain interactive elements, always set this to `false` to avoid unexpected expanding or collapsing.
    */
   shouldExpandOnClick?: boolean;
   /**
-   * Data to render. Passed down by Item and passed into onExpand and onCollapse callbacks.
-   * Normally set by parent Item component and does not need to be configured.
+   * Data to render. Passed down by `item` and passed into `onExpand` and `onCollapse` callbacks.
+   * This is normally set by the parent `item` component, and doesn't need to be configured.
    */
   // eslint-disable-next-line @repo/internal/react/consistent-props-definitions
   data?: Item;
   /**
-   * Depth used for rendering indent.
-   * Normally set by parent Item component and does not need to be configured.
+   * The depth used for rendering an indent.
+   * This is normally set by parent `item` component, and doesn't need to be configured.
    */
   depth?: number;
   /**
     Adds detail to the expand and collapse row button's aria label by appending the value from the given column. If you don't set this prop, the aria label will read out "Expand `itemId` row".
 
-    Should be a string when we pass data via `items` property in `<TableTree />`, value should be one of the property `columns` names in `<TableTree />`.
+    Should be a string when we pass data via `items` property in the table tree. The value should be one of the property `columns` names in the table tree.
 
-    Should be a number  when we pass data via `<Rows />` component as children in `<TableTree />`.
+    Should be a number  when we pass data via the `Rows` component as children in the table tree.
    */
   mainColumnForExpandCollapseLabel?: string | number;
 };

package/extract-react-types/table-tree-rows.tsx

@@ -20,8 +20,8 @@ type RowsProps = {
   items?: Item[] | null;
   /* eslint-enable jsdoc/require-asterisk-prefix, jsdoc/check-alignment */
   /**
-   * Accessible name for loading states spinner. Can be used for internationalization.
-   * Default is "Loading".
+   * This is an accessible name for the loading state's spinner.
+   * The default text is "Loading".
    */
   loadingLabel?: string | null;
   /**

package/extract-react-types/table-tree.tsx

@@ -18,9 +18,9 @@ export type Item = {
  */
 type TableTreeProps = {
   /**
-   * The contents of the table,
-   * used when composing `Cell`, `Header`, `Headers`, `Row`, and `Rows` components.
-   * For basic usage, you can instead specify table contents with the `items` prop.
+   * The contents of the table.
+   * Use this when composing `Cell`, `Header`, `Headers`, `Row`, and `Rows` components.
+   * For basic usage, it's simpler to specify table contents with the `items` prop instead.
    */
   children?: ReactNode;
   /**
@@ -29,38 +29,47 @@ type TableTreeProps = {
    */
   columns?: ElementType<Content>[];
   /**
-   * The widths of the respective columns in the table.
+   * The widths of the columns in the table.
    */
   columnWidths?: (string | number)[];
   /**
-   * The header text of the respective columns of the table.
+   * The header text of the columns of the table.
    */
   headers?: string[];
   /* eslint-disable jsdoc/require-asterisk-prefix, jsdoc/check-alignment */
   /**
-    Whether a row with children should expand when clicked anywhere within the row. If false or unset, a row with children will only expand when the chevron is clicked.
+    Use this to set whether a row with children should expand when clicked anywhere within the row. If `false` or unset, a row with children will only expand when the chevron is clicked.
 
-    If your cells contain interactive elements, this can cause unexpected expanding or collapsing.
+    If your cells contain interactive elements, always set this to `false` to avoid unexpected expanding or collapsing.
 
-    If not using the `items` prop, `shouldExpandOnClick` should be used on the row component instead.
+    If you aren’t using the `items` prop, `shouldExpandOnClick` should be used on the row component instead.
    */
   shouldExpandOnClick?: boolean;
   /**
-    The data used to render the table.
+    The data used to render the table. If you’re creating a basic table, use this prop instead of composing cell, header, headers, row, and rows components.
 
-    In addition to these props, any other data can be added, and it will
+    In addition to the `items` props, any other data can be added, and it will
     be provided as props when rendering each cell.
    */
   // eslint-disable-next-line @repo/internal/react/consistent-props-definitions
   items?: Item[] | null;
   /* eslint-enable jsdoc/require-asterisk-prefix, jsdoc/check-alignment */
   /**
-   * The value used to extend the expand or collapse button label in cases where `Row` has child rows.
-   *
-   * Should be a string when we pass data via `items` property, value should be one of the `columns` names.
-   * Should be a number when we pass data via `<Rows />` component as children in `<TableTree />`.
+   * The value used to extend the expand or collapse button label in cases where `row` has child rows.
+   * It should be a string when we pass data via the `items` property, the value should be one of the `columns` names.
+   * It should be a number when we pass data via the `rows` component as children in the table tree.
    */
   mainColumnForExpandCollapseLabel?: string | number;
+  /**
+   * This is an `aria-label` attribute. Use the label to describe the table for assistive technologies.
+   * Usage of either this, or the `labelId` attribute is strongly recommended.
+   */
+  label?: string;
+  /**
+   * This is an `aria-labelledby` attribute. Pass an ID for the element which should define an accessible name for the table.
+   * Usage of either this, or the `label` attribute is strongly recommended.
+   */
+  referencedLabel?: string;
 };
 
 export default function (props: TableTreeProps) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table-tree",
-  "version": "9.7.1",
+  "version": "9.9.0",
   "description": "A table tree is an expandable table for showing nested hierarchies of information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,29 +23,30 @@
     "website": {
       "name": "Table tree",
       "category": "Components"
-    }
+    },
+    "runReact18": true
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.7.0",
-    "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/spinner": "^16.0.0",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/analytics-next": "^9.3.0",
+    "@atlaskit/button": "^17.14.0",
+    "@atlaskit/icon": "^22.2.0",
+    "@atlaskit/spinner": "^16.1.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.48.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/visually-hidden": "^1.2.4",
+    "@atlaskit/visually-hidden": "^1.3.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",
     "@testing-library/react": "^12.1.5",