@atlaskit/table-tree 9.6.11 → 9.6.13

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/table-tree
 
+## 9.6.13
+
+### Patch Changes
+
+- [#72130](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72130) [`b037e5451037`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b037e5451037) - Update new button text color fallback for default theme (non-token) to match that of old button current text color
+- Updated dependencies
+
+## 9.6.12
+
+### Patch Changes
+
+- [#65882](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65882) [`9629b57b6108`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9629b57b6108) - [ux] Updated buttons in table-tree to consume new icon buttons.
+
 ## 9.6.11
 
 ### Patch Changes

package/dist/cjs/components/internal/chevron.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -15,7 +14,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _new = require("@atlaskit/button/new");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
 var _styled = require("./styled");
@@ -50,23 +49,17 @@ var Chevron = exports.default = /*#__PURE__*/function (_Component) {
         expandLabel = _this$props.expandLabel,
         rowId = _this$props.rowId,
         extendedLabel = _this$props.extendedLabel;
-      var iconProps = {
-        size: 'medium',
-        primaryColor: _styled.iconColor
-      };
       var getLabel = function getLabel(defaultLabel) {
         return extendedLabel ? "".concat(defaultLabel, " ").concat(extendedLabel, " row") : "".concat(defaultLabel, " row ").concat(rowId);
       };
-      return /*#__PURE__*/_react.default.createElement(_styled.ChevronContainer, null, /*#__PURE__*/_react.default.createElement(_button.default, {
-        spacing: "none",
+      return /*#__PURE__*/_react.default.createElement(_styled.ChevronContainer, null, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
         appearance: "subtle",
+        onClick: this.handleClick,
+        spacing: "none",
+        icon: isExpanded ? _chevronDown.default : _chevronRight.default,
         "aria-controls": ariaControls,
-        onClick: this.handleClick
-      }, /*#__PURE__*/_react.default.createElement(_styled.ChevronIconContainer, null, isExpanded ? /*#__PURE__*/_react.default.createElement(_chevronDown.default, (0, _extends2.default)({
-        label: getLabel(collapseLabel)
-      }, iconProps)) : /*#__PURE__*/_react.default.createElement(_chevronRight.default, (0, _extends2.default)({
-        label: getLabel(expandLabel)
-      }, iconProps)))));
+        label: isExpanded ? getLabel(collapseLabel) : getLabel(expandLabel)
+      }));
     }
   }]);
   return Chevron;

package/dist/cjs/components/internal/styled.js

@@ -4,14 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.indentBase = exports.iconColor = exports.TreeRowContainer = exports.LoaderItemContainer = exports.ChevronIconContainer = exports.ChevronContainer = void 0;
+exports.indentBase = exports.TreeRowContainer = exports.LoaderItemContainer = exports.ChevronContainer = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["isRoot"];
 /** @jsx jsx */
-var iconColor = exports.iconColor = "var(--ds-text, ".concat(_colors.N800, ")");
 var indentBase = exports.indentBase = "var(--ds-space-300, 25px)";
 var treeRowContainerStyles = (0, _react.css)({
   display: 'flex',
@@ -49,24 +48,6 @@ var ChevronContainer = exports.ChevronContainer = function ChevronContainer(prop
     css: commonChevronContainerStyles
   }));
 };
-var chevronIconContainerStyles = (0, _react.css)({
-  position: 'relative',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  insetBlockStart: 1
-});
-
-/**
- * __Chevron icon container__
- *
- * A chevron icon container.
- */
-var ChevronIconContainer = exports.ChevronIconContainer = function ChevronIconContainer(props
-// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-) {
-  return (0, _react.jsx)("span", (0, _extends2.default)({}, props, {
-    css: chevronIconContainerStyles
-  }));
-};
 var loadingItemContainerStyles = (0, _react.css)({
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

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.6.11";
+var packageVersion = "9.6.13";
 var Row = exports.RowWithoutAnalytics = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Row, _Component);
   var _super = _createSuper(Row);

package/dist/es2019/components/internal/chevron.js

@@ -1,12 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 /* eslint-disable react/prop-types */
 import React, { Component } from 'react';
-import Button from '@atlaskit/button';
+import { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
-import { ChevronContainer, ChevronIconContainer, iconColor } from './styled';
+import { ChevronContainer } from './styled';
 export default class Chevron extends Component {
   constructor(...args) {
     super(...args);
@@ -25,21 +24,15 @@ export default class Chevron extends Component {
       rowId,
       extendedLabel
     } = this.props;
-    const iconProps = {
-      size: 'medium',
-      primaryColor: iconColor
-    };
     const getLabel = defaultLabel => extendedLabel ? `${defaultLabel} ${extendedLabel} row` : `${defaultLabel} row ${rowId}`;
-    return /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(Button, {
-      spacing: "none",
+    return /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(IconButton, {
       appearance: "subtle",
+      onClick: this.handleClick,
+      spacing: "none",
+      icon: isExpanded ? ChevronDownIcon : ChevronRightIcon,
       "aria-controls": ariaControls,
-      onClick: this.handleClick
-    }, /*#__PURE__*/React.createElement(ChevronIconContainer, null, isExpanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, _extends({
-      label: getLabel(collapseLabel)
-    }, iconProps)) : /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({
-      label: getLabel(expandLabel)
-    }, iconProps)))));
+      label: isExpanded ? getLabel(collapseLabel) : getLabel(expandLabel)
+    }));
   }
 }
 _defineProperty(Chevron, "defaultProps", {

package/dist/es2019/components/internal/styled.js

@@ -2,8 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { N30, N800 } from '@atlaskit/theme/colors';
-export const iconColor = `var(--ds-text, ${N800})`;
+import { N30 } from '@atlaskit/theme/colors';
 export const indentBase = "var(--ds-space-300, 25px)";
 const treeRowContainerStyles = css({
   display: 'flex',
@@ -36,22 +35,6 @@ export const ChevronContainer = (props
 ) => jsx("span", _extends({}, props, {
   css: commonChevronContainerStyles
 }));
-const chevronIconContainerStyles = css({
-  position: 'relative',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  insetBlockStart: 1
-});
-
-/**
- * __Chevron icon container__
- *
- * A chevron icon container.
- */
-export const ChevronIconContainer = (props
-// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-) => jsx("span", _extends({}, props, {
-  css: chevronIconContainerStyles
-}));
 const loadingItemContainerStyles = css({
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

package/dist/es2019/components/row.js

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

package/dist/esm/components/internal/chevron.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -11,10 +10,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 /* eslint-disable react/prop-types */
 import React, { Component } from 'react';
-import Button from '@atlaskit/button';
+import { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
-import { ChevronContainer, ChevronIconContainer, iconColor } from './styled';
+import { ChevronContainer } from './styled';
 var Chevron = /*#__PURE__*/function (_Component) {
   _inherits(Chevron, _Component);
   var _super = _createSuper(Chevron);
@@ -42,23 +41,17 @@ var Chevron = /*#__PURE__*/function (_Component) {
         expandLabel = _this$props.expandLabel,
         rowId = _this$props.rowId,
         extendedLabel = _this$props.extendedLabel;
-      var iconProps = {
-        size: 'medium',
-        primaryColor: iconColor
-      };
       var getLabel = function getLabel(defaultLabel) {
         return extendedLabel ? "".concat(defaultLabel, " ").concat(extendedLabel, " row") : "".concat(defaultLabel, " row ").concat(rowId);
       };
-      return /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(Button, {
-        spacing: "none",
+      return /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(IconButton, {
         appearance: "subtle",
+        onClick: this.handleClick,
+        spacing: "none",
+        icon: isExpanded ? ChevronDownIcon : ChevronRightIcon,
         "aria-controls": ariaControls,
-        onClick: this.handleClick
-      }, /*#__PURE__*/React.createElement(ChevronIconContainer, null, isExpanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, _extends({
-        label: getLabel(collapseLabel)
-      }, iconProps)) : /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({
-        label: getLabel(expandLabel)
-      }, iconProps)))));
+        label: isExpanded ? getLabel(collapseLabel) : getLabel(expandLabel)
+      }));
     }
   }]);
   return Chevron;

package/dist/esm/components/internal/styled.js

@@ -4,8 +4,7 @@ var _excluded = ["isRoot"];
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { N30, N800 } from '@atlaskit/theme/colors';
-export var iconColor = "var(--ds-text, ".concat(N800, ")");
+import { N30 } from '@atlaskit/theme/colors';
 export var indentBase = "var(--ds-space-300, 25px)";
 var treeRowContainerStyles = css({
   display: 'flex',
@@ -43,24 +42,6 @@ export var ChevronContainer = function ChevronContainer(props
     css: commonChevronContainerStyles
   }));
 };
-var chevronIconContainerStyles = css({
-  position: 'relative',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  insetBlockStart: 1
-});
-
-/**
- * __Chevron icon container__
- *
- * A chevron icon container.
- */
-export var ChevronIconContainer = function ChevronIconContainer(props
-// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-) {
-  return jsx("span", _extends({}, props, {
-    css: chevronIconContainerStyles
-  }));
-};
 var loadingItemContainerStyles = css({
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

package/dist/esm/components/row.js

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

package/dist/types/components/internal/styled.d.ts

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import type { FC, HTMLAttributes, ReactNode } from 'react';
-export declare const iconColor: "var(--ds-text)";
 export declare const indentBase: "var(--ds-space-300)";
 /**
  * __Tree row container__
@@ -17,12 +16,6 @@ type ChevronContainerProps = HTMLAttributes<HTMLSpanElement> & {
  * A wrapper container around the expand table tree button.
  */
 export declare const ChevronContainer: FC<ChevronContainerProps>;
-/**
- * __Chevron icon container__
- *
- * A chevron icon container.
- */
-export declare const ChevronIconContainer: FC<ChevronContainerProps>;
 type LoaderItemContainerProps = {
     isRoot?: boolean;
     children: ReactNode;

package/dist/types-ts4.5/components/internal/styled.d.ts

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import type { FC, HTMLAttributes, ReactNode } from 'react';
-export declare const iconColor: "var(--ds-text)";
 export declare const indentBase: "var(--ds-space-300)";
 /**
  * __Tree row container__
@@ -17,12 +16,6 @@ type ChevronContainerProps = HTMLAttributes<HTMLSpanElement> & {
  * A wrapper container around the expand table tree button.
  */
 export declare const ChevronContainer: FC<ChevronContainerProps>;
-/**
- * __Chevron icon container__
- *
- * A chevron icon container.
- */
-export declare const ChevronIconContainer: FC<ChevronContainerProps>;
 type LoaderItemContainerProps = {
     isRoot?: boolean;
     children: ReactNode;

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

@@ -12,7 +12,7 @@ import { Item } from './table-tree';
  */
 type RowProps = {
   /**
-   * Whether the row has children
+   * Whether the row has children.
    */
   hasChildren?: boolean;
   /**
@@ -20,10 +20,10 @@ type RowProps = {
    */
   children?: React.ReactNode;
   /**
-   * ID for the row item
+   * ID for the row item.
    */
   itemId?: string;
-  // eslint-disable-next-line jsdoc/require-asterisk-prefix, jsdoc/check-alignment
+  /* eslint-disable jsdoc/require-asterisk-prefix, jsdoc/check-alignment */
   /**
     The data used to render the row and descendants. Pass down from `children` render prop.
 
@@ -32,6 +32,7 @@ type RowProps = {
    */
   // eslint-disable-next-line @repo/internal/react/consistent-props-definitions
   items?: Item[] | null;
+  /* eslint-enable jsdoc/require-asterisk-prefix, jsdoc/check-alignment */
   /**
    * Controls the expanded state of the row.
    */
@@ -41,11 +42,11 @@ type RowProps = {
    */
   isDefaultExpanded?: ReactNode;
   /**
-   * `aria-label` attached to the expand chevron button
+   * `aria-label` attached to the expand chevron button.
    */
   expandLabel?: string;
   /**
-   * `aria-label` attached to the collapse chevron button
+   * `aria-label` attached to the collapse chevron button.
    */
   collapseLabel?: string;
   /**
@@ -61,13 +62,14 @@ type RowProps = {
    * Normally set by parent Item component and does not need to be configured.
    */
   renderChildren?: () => React.ReactNode;
-  // eslint-disable-next-line jsdoc/require-asterisk-prefix, jsdoc/check-alignment
+  /* 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.
 
     If your cells contain interactive elements, this can cause unexpected expanding or collapsing.
    */
   shouldExpandOnClick?: boolean;
+  /* eslint-enable jsdoc/require-asterisk-prefix, jsdoc/check-alignment */
   /**
    * 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.
@@ -79,7 +81,7 @@ type RowProps = {
    * Normally set by parent Item component and does not need to be configured.
    */
   depth?: number;
-  // eslint-disable-next-line jsdoc/require-asterisk-prefix, jsdoc/check-alignment
+  /* eslint-disable jsdoc/require-asterisk-prefix, jsdoc/check-alignment */
   /**
     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".
 
@@ -88,6 +90,7 @@ type RowProps = {
     Should be a number  when we pass data via `<Rows />` component as children in `<TableTree />`.
    */
   mainColumnForExpandCollapseLabel?: string | number;
+  /* eslint-enable jsdoc/require-asterisk-prefix, jsdoc/check-alignment */
 };
 
 const TableRow = function (props: RowProps) {

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

@@ -9,7 +9,7 @@ import { Item } from './table-tree';
  * Defining it here for now lets us provide *something* without much headache.
  */
 type RowsProps = {
-  // eslint-disable-next-line jsdoc/require-asterisk-prefix, jsdoc/check-alignment
+  /* eslint-disable jsdoc/require-asterisk-prefix, jsdoc/check-alignment */
   /**
     The data used to render the set of rows. Will be passed down via the `children` render prop.
 
@@ -18,6 +18,7 @@ type RowsProps = {
    */
   // eslint-disable-next-line @repo/internal/react/consistent-props-definitions
   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".

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

@@ -36,7 +36,7 @@ type TableTreeProps = {
    * The header text of the respective columns of the table.
    */
   headers?: string[];
-  // eslint-disable-next-line jsdoc/require-asterisk-prefix, jsdoc/check-alignment
+  /* 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.
 
@@ -45,7 +45,6 @@ type TableTreeProps = {
     If not using the `items` prop, `shouldExpandOnClick` should be used on the row component instead.
    */
   shouldExpandOnClick?: boolean;
-  // eslint-disable-next-line jsdoc/require-asterisk-prefix, jsdoc/check-alignment
   /**
     The data used to render the table.
 
@@ -54,6 +53,7 @@ type TableTreeProps = {
    */
   // 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.
    *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table-tree",
-  "version": "9.6.11",
+  "version": "9.6.13",
   "description": "A table tree is an expandable table for showing nested hierarchies of information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,12 +26,12 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^17.2.0",
+    "@atlaskit/analytics-next": "^9.2.0",
+    "@atlaskit/button": "^17.4.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.33.0",
+    "@atlaskit/tokens": "^1.37.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21"