@atlaskit/table-tree 11.2.2 → 12.0.0

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

@@ -1,60 +1,43 @@
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["isRoot"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import "./styled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { N30 } from '@atlaskit/theme/colors';
-export var indentBase = "var(--ds-space-300, 25px)";
-var treeRowContainerStyles = css({
-  display: 'flex',
-  borderBlockEnd: "1px solid ".concat("var(--ds-border, ".concat(N30, ")"))
-});
+var treeRowContainerStyles = null;
 
 /**
  * __Tree row container__
  */
 export var TreeRowContainer = function TreeRowContainer(props) {
-  return jsx("div", _extends({
-    role: "row",
-    css: treeRowContainerStyles
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, props));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "row"
+  }, props, {
+    className: ax(["_179rskuj _1e0c1txw"]),
+    style: {
+      "--_1prvtx9": ix("1px solid ".concat("var(--ds-border, ".concat(N30, ")")))
+    }
+  }));
 };
-var commonCellElementStyles = css({
-  display: 'flex',
-  position: 'absolute',
-  alignItems: 'center',
-  // indentBase is re-used elsewhere and is primarily used as positive value; we need to negate it here
-  marginInlineStart: "calc(".concat(indentBase, " * -1)")
-});
-var commonChevronContainerStyles = css({
-  // Aligns position:absolute chevron button with the adjacent text. Any future visual breaking changes
-  // should consider setting this to `-2px` for better alignment, or refactor completely
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginBlockStart: -3
-});
+var commonCellElementStyles = null;
+var commonChevronContainerStyles = null;
 /**
  * __Chevron container__
  *
  * A wrapper container around the expand table tree button.
  */
 export var ChevronContainer = function ChevronContainer(props) {
-  return jsx("span", _extends({}, props, {
-    css: [commonCellElementStyles, commonChevronContainerStyles]
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: ax(["_1e0c1txw _kqswstnw _4cvr1h6o _ahbq1dum", "_1pfhj39m"]),
+    style: {
+      "--_1izje1g": ix("calc(".concat("var(--ds-space-300, 25px)", " * -1)"))
+    }
   }));
 };
-var loadingItemContainerStyles = css({
-  width: '100%'
-});
-var paddingLeftStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  paddingInlineStart: '50%'
-});
+var loadingItemContainerStyles = null;
+var paddingLeftStyles = null;
 /**
  * __Loader item container__
  *
@@ -63,8 +46,10 @@ var paddingLeftStyles = css({
 export var LoaderItemContainer = function LoaderItemContainer(_ref) {
   var isRoot = _ref.isRoot,
     props = _objectWithoutProperties(_ref, _excluded);
-  return jsx("span", _extends({
-    css: [commonCellElementStyles, loadingItemContainerStyles, isRoot && paddingLeftStyles]
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, props));
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: ax(["_1e0c1txw _kqswstnw _4cvr1h6o _ahbq1dum", "_1bsb1osq", isRoot && "_bozg1ssb"]),
+    style: {
+      "--_1izje1g": ix("calc(".concat("var(--ds-space-300, 25px)", " * -1)"))
+    }
+  }));
 };

package/dist/esm/components/row.compiled.css

@@ -0,0 +1 @@
+._80omtlke{cursor:pointer}

package/dist/esm/components/row.js

@@ -1,19 +1,13 @@
+/* row.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./row.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { Fragment, useEffect, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import toItemId from '../utils/to-item-id';
 import Chevron from './internal/chevron';
 import { TreeRowContainer } from './internal/styled';
-var treeRowClickableStyles = css({
-  cursor: 'pointer'
-});
+var treeRowClickableStyles = null;
 var getExtendedLabel = function getExtendedLabel(cellContent, cellIndex, mainColumnForExpandCollapseLabel) {
   /**
    * First condition - when we pass data via `items` property in `<TableTree />`
@@ -58,7 +52,7 @@ function Row(_ref) {
     actionSubject: 'tableTree',
     componentName: 'row',
     packageName: "@atlaskit/table-tree",
-    packageVersion: "11.2.2"
+    packageVersion: "12.0.0"
   });
   var onCollapse = usePlatformLeafEventHandler({
     fn: function fn(value) {
@@ -68,7 +62,7 @@ function Row(_ref) {
     actionSubject: 'tableTree',
     componentName: 'row',
     packageName: "@atlaskit/table-tree",
-    packageVersion: "11.2.2"
+    packageVersion: "12.0.0"
   });
 
   /**
@@ -107,7 +101,7 @@ function Row(_ref) {
     var cellContent = cell.props.children || [];
     var extendedLabel = getExtendedLabel(cellContent, cellIndex, mainColumnForExpandCollapseLabel);
     if (isFirstCell && hasChildren) {
-      cellContent = [jsx(Chevron, {
+      cellContent = [/*#__PURE__*/React.createElement(Chevron, {
         key: "chevron",
         expandLabel: expandLabel,
         collapseLabel: collapseLabel,
@@ -125,11 +119,11 @@ function Row(_ref) {
       indentLevel: indentLevel
     }, cellContent);
   };
-  return jsx(Fragment, null, jsx(TreeRowContainer, {
-    css: hasChildren && shouldExpandOnClick ? treeRowClickableStyles : undefined,
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TreeRowContainer, {
     onClick: hasChildren && shouldExpandOnClick ? onClickHandler : undefined,
     "aria-expanded": hasChildren ? isExpandedState : undefined,
-    "aria-level": depth ? depth : undefined
+    "aria-level": depth ? depth : undefined,
+    className: ax([hasChildren && shouldExpandOnClick && "_80omtlke"])
   }, React.Children.map(children, function (cell, index) {
     return renderCell(cell, index);
   })), hasChildren && (isProvidedExpanded !== undefined ? isProvidedExpanded : isExpandedState) && renderChildren && renderChildren());

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import { type ReactElement } from 'react';
-import { jsx } from '@emotion/react';
 interface HeadersProps {
     children: ReactElement | ReactElement[];
 }
@@ -15,5 +14,5 @@ interface HeadersProps {
  * - [Examples](https://atlassian.design/components/table-tree/examples#advanced)
  * - [Code](https://atlassian.design/components/table-tree/code#headers-props)
  */
-declare const Headers: ({ children }: HeadersProps) => jsx.JSX.Element;
+declare const Headers: ({ children }: HeadersProps) => JSX.Element;
 export default Headers;

package/dist/types/components/internal/common-cell.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import type { FC, HTMLAttributes, ReactNode } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 interface CommonCellProps {
     indent?: string;
     width?: string | number;

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

@@ -1,8 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type ReactElement } from 'react';
+import React, { type ReactElement } from 'react';
 import { type RowProps } from '../row';
 import { type RowsProps } from '../rows';
 type ItemProps<Item> = {
@@ -25,5 +21,5 @@ type ItemProps<Item> = {
  */
 declare function Item<Item extends {
     id: string;
-}>({ depth, data, render, loadingLabel, }: ItemProps<Item>): ReactElement<RowProps<Item> | RowsProps<Item>, string | import("react").JSXElementConstructor<any>> | null;
+}>({ depth, data, render, loadingLabel, }: ItemProps<Item>): React.ReactElement<RowProps<Item> | RowsProps<Item>, string | React.JSXElementConstructor<any>> | null;
 export default Item;

package/dist/types/components/internal/overflow-container.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import type { FC, HTMLAttributes, ReactNode } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 interface OverflowContainerProps {
     isSingleLine?: boolean;
     chilren?: ReactNode;

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

@@ -2,8 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import type { FC, HTMLAttributes, ReactNode } from 'react';
-export declare const indentBase: "var(--ds-space-300)";
+import { FC, HTMLAttributes, ReactNode } from 'react';
 /**
  * __Tree row container__
  */

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import React, { type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export interface RowProps<Item> {
     /**
@@ -81,5 +80,5 @@ export interface RowProps<Item> {
 }
 declare function Row<Item extends {
     id: string;
-}>({ shouldExpandOnClick, hasChildren, depth, renderChildren, isDefaultExpanded, data, onExpand: providedOnExpand, onCollapse: providedOnCollapse, mainColumnForExpandCollapseLabel, expandLabel, collapseLabel, itemId, children, isExpanded: isProvidedExpanded, }: RowProps<Item>): jsx.JSX.Element;
+}>({ shouldExpandOnClick, hasChildren, depth, renderChildren, isDefaultExpanded, data, onExpand: providedOnExpand, onCollapse: providedOnCollapse, mainColumnForExpandCollapseLabel, expandLabel, collapseLabel, itemId, children, isExpanded: isProvidedExpanded, }: RowProps<Item>): JSX.Element;
 export default Row;

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import { type ReactElement } from 'react';
-import { jsx } from '@emotion/react';
 interface HeadersProps {
     children: ReactElement | ReactElement[];
 }
@@ -15,5 +14,5 @@ interface HeadersProps {
  * - [Examples](https://atlassian.design/components/table-tree/examples#advanced)
  * - [Code](https://atlassian.design/components/table-tree/code#headers-props)
  */
-declare const Headers: ({ children }: HeadersProps) => jsx.JSX.Element;
+declare const Headers: ({ children }: HeadersProps) => JSX.Element;
 export default Headers;

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import type { FC, HTMLAttributes, ReactNode } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 interface CommonCellProps {
     indent?: string;
     width?: string | number;

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

@@ -1,8 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type ReactElement } from 'react';
+import React, { type ReactElement } from 'react';
 import { type RowProps } from '../row';
 import { type RowsProps } from '../rows';
 type ItemProps<Item> = {
@@ -25,5 +21,5 @@ type ItemProps<Item> = {
  */
 declare function Item<Item extends {
     id: string;
-}>({ depth, data, render, loadingLabel, }: ItemProps<Item>): ReactElement<RowProps<Item> | RowsProps<Item>, string | import("react").JSXElementConstructor<any>> | null;
+}>({ depth, data, render, loadingLabel, }: ItemProps<Item>): React.ReactElement<RowProps<Item> | RowsProps<Item>, string | React.JSXElementConstructor<any>> | null;
 export default Item;

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import type { FC, HTMLAttributes, ReactNode } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 interface OverflowContainerProps {
     isSingleLine?: boolean;
     chilren?: ReactNode;

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

@@ -2,8 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import type { FC, HTMLAttributes, ReactNode } from 'react';
-export declare const indentBase: "var(--ds-space-300)";
+import { FC, HTMLAttributes, ReactNode } from 'react';
 /**
  * __Tree row container__
  */

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import React, { type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export interface RowProps<Item> {
     /**
@@ -81,5 +80,5 @@ export interface RowProps<Item> {
 }
 declare function Row<Item extends {
     id: string;
-}>({ shouldExpandOnClick, hasChildren, depth, renderChildren, isDefaultExpanded, data, onExpand: providedOnExpand, onCollapse: providedOnCollapse, mainColumnForExpandCollapseLabel, expandLabel, collapseLabel, itemId, children, isExpanded: isProvidedExpanded, }: RowProps<Item>): jsx.JSX.Element;
+}>({ shouldExpandOnClick, hasChildren, depth, renderChildren, isDefaultExpanded, data, onExpand: providedOnExpand, onCollapse: providedOnCollapse, mainColumnForExpandCollapseLabel, expandLabel, collapseLabel, itemId, children, isExpanded: isProvidedExpanded, }: RowProps<Item>): JSX.Element;
 export default Row;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/table-tree",
-	"version": "11.2.2",
+	"version": "12.0.0",
 	"description": "A table tree is an expandable table for showing nested hierarchies of information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21"
@@ -48,7 +48,7 @@
 		"@atlaskit/empty-state": "^9.0.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/link": "^3.1.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/primitives": "^14.3.0",
 		"@atlaskit/section-message": "^8.2.0",
 		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/ssr": "^0.4.0",