@atlaskit/table-tree 9.1.8 → 9.2.0

package/dist/esm/components/headers.js

@@ -3,6 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _styled from "styled-components";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -12,12 +13,17 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /* eslint-disable @repo/internal/react/no-clone-element */
 import { Children, cloneElement, Component } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 var containerStyles = css({
   display: 'flex',
   borderBottom: "solid 2px ".concat("var(--ds-border, #dfe1e6)")
 });
 
+var _StyledDiv = _styled("div").withConfig({
+  displayName: "headers___StyledDiv",
+  componentId: "h5d3f7-0"
+})(["", ""], containerStyles);
+
 var Headers = /*#__PURE__*/function (_Component) {
   _inherits(Headers, _Component);
 
@@ -32,8 +38,7 @@ var Headers = /*#__PURE__*/function (_Component) {
   _createClass(Headers, [{
     key: "render",
     value: function render() {
-      return jsx("div", {
-        css: containerStyles,
+      return jsx(_StyledDiv, {
         role: "row"
       }, Children.map(this.props.children, function (header, index) {
         return (

package/dist/esm/components/internal/common-cell.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _styled from "styled-components";
 var _excluded = ["indent", "width"];
-
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 var commonStyles = css({
   display: 'flex',
@@ -16,6 +15,11 @@ var commonStyles = css({
   lineHeight: '20px'
 });
 
+var _StyledDiv = _styled("div").withConfig({
+  displayName: "common-cell___StyledDiv",
+  componentId: "t3yvaw-0"
+})(["", ""], commonStyles);
+
 /**
  * __Common cell__
  */
@@ -24,12 +28,11 @@ var CommonCell = function CommonCell(_ref) {
       width = _ref.width,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return jsx("div", _extends({}, props, {
+  return jsx(_StyledDiv, _extends({}, props, {
     style: {
       '--indent': indent,
       width: width
-    },
-    css: commonStyles
+    }
   }));
 };
 

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

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /* eslint-disable @repo/internal/react/no-clone-element */
 import { cloneElement, Component } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import toItemId from '../../utils/to-item-id';
 import Items from './items';
 

package/dist/esm/components/internal/overflow-container.js

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _styled from "styled-components";
 var _excluded = ["isSingleLine"];
-
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 var overflowContainerStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -13,14 +12,21 @@ var overflowContainerStyles = css({
  * __Overflow container__
  */
 
+var _StyledSpan = _styled("span").withConfig({
+  displayName: "overflow-container___StyledSpan",
+  componentId: "sc-1m74akj-0"
+})(["", ""], function (p) {
+  return p._css;
+});
+
 var OverflowContainer = function OverflowContainer(_ref) {
   var isSingleLine = _ref.isSingleLine,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx("span", _extends({
-      css: isSingleLine && overflowContainerStyles
-    }, props))
+    jsx(_StyledSpan, _extends({}, props, {
+      _css: isSingleLine && overflowContainerStyles
+    }))
   );
 };
 

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

@@ -1,9 +1,8 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _styled from "styled-components";
 var _excluded = ["isRoot"];
-
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N30, N800 } from '@atlaskit/theme/colors';
 export var iconColor = "var(--ds-text, ".concat(N800, ")");
 var treeRowContainerStyles = css({
@@ -14,11 +13,14 @@ var treeRowContainerStyles = css({
  * __Tree row container__
  */
 
+var _StyledDiv = _styled("div").withConfig({
+  displayName: "styled___StyledDiv",
+  componentId: "sc-8rz2kg-0"
+})(["", ""], treeRowContainerStyles);
+
 export var TreeRowContainer = function TreeRowContainer(props) {
   return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx("div", _extends({
-      css: treeRowContainerStyles
-    }, props))
+    jsx(_StyledDiv, props)
   );
 };
 var commonChevronContainerStyles = css({
@@ -32,11 +34,14 @@ var commonChevronContainerStyles = css({
  * __Chevron container__
  */
 
+var _StyledSpan = _styled("span").withConfig({
+  displayName: "styled___StyledSpan",
+  componentId: "sc-8rz2kg-1"
+})(["", ""], commonChevronContainerStyles);
+
 export var ChevronContainer = function ChevronContainer(props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 ) {
-  return jsx("span", _extends({}, props, {
-    css: commonChevronContainerStyles
-  }));
+  return jsx(_StyledSpan, props);
 };
 var chevronIconContainerStyles = css({
   position: 'relative',
@@ -48,11 +53,14 @@ var chevronIconContainerStyles = css({
  * A chevron icon container.
  */
 
+var _StyledSpan2 = _styled("span").withConfig({
+  displayName: "styled___StyledSpan2",
+  componentId: "sc-8rz2kg-2"
+})(["", ""], chevronIconContainerStyles);
+
 export var ChevronIconContainer = function ChevronIconContainer(props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 ) {
-  return jsx("span", _extends({}, props, {
-    css: chevronIconContainerStyles
-  }));
+  return jsx(_StyledSpan2, props);
 };
 var loadingItemContainerStyles = css({
   width: '100%',
@@ -67,12 +75,18 @@ var paddingLeftStyles = css({
  * A loader item container.
  */
 
+var _StyledSpan3 = _styled("span").withConfig({
+  displayName: "styled___StyledSpan3",
+  componentId: "sc-8rz2kg-3"
+})(["", ""], function (p) {
+  return p._css;
+});
+
 export var LoaderItemContainer = function LoaderItemContainer(_ref) {
   var isRoot = _ref.isRoot,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return jsx("span", _extends({
-    css: [commonChevronContainerStyles, loadingItemContainerStyles, isRoot && paddingLeftStyles] // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
-  }, props));
+  return jsx(_StyledSpan3, _extends({}, props, {
+    _css: [commonChevronContainerStyles, loadingItemContainerStyles, isRoot && paddingLeftStyles]
+  }));
 };

package/dist/esm/components/row.js

@@ -18,7 +18,7 @@ import toItemId from '../utils/to-item-id';
 import Chevron from './internal/chevron';
 import { TreeRowContainer } from './internal/styled';
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.1.8";
+var packageVersion = "9.2.0";
 
 var Row = /*#__PURE__*/function (_Component) {
   _inherits(Row, _Component);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table-tree",
-	"version": "9.1.8",
+	"version": "9.2.0",
 	"sideEffects": false
 }

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

@@ -1,8 +1,20 @@
 import React from 'react';
 export interface CellProps {
+    /**
+     * Whether the cell contents should wrap or display on a single line and be concatenated.
+     */
     singleLine?: boolean;
+    /**
+     * 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.
+     */
     width?: number | string;
+    /**
+     * Class name to apply to cell.
+     */
     className?: string;
 }
 declare const _default: {

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { Component } from 'react';
+import { jsx } from '@emotion/react';
 export default class Headers extends Component<any> {
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { Component } from 'react';
+import { jsx } from '@emotion/react';
 export default class Item extends Component<any> {
     static defaultProps: {
         depth: number;
@@ -7,6 +8,6 @@ export default class Item extends Component<any> {
     render(): import("react").FunctionComponentElement<{
         depth: any;
         data: any;
-        renderChildren: () => JSX.Element;
+        renderChildren: () => jsx.JSX.Element;
     }> | null;
 }

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

@@ -0,0 +1,7 @@
+import { CellProps } from '../src/components/cell';
+
+const TableRows = function (props: CellProps) {
+  return null;
+};
+
+export default TableRows;

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

@@ -0,0 +1,20 @@
+/**
+ * This is hard-coded here because our actual <Header /> has no typings
+ * for its props.
+ *
+ * Adding types for real *might* break things so will need a little care.
+ *
+ * Defining it here for now lets us provide *something* without much headache.
+ */
+type HeaderProps = {
+  /**
+   * Width of the header item. Takes a string, or a number representing the width in pixels.
+   */
+  width?: string | number;
+};
+
+const TableHeader = function (props: HeaderProps) {
+  return null;
+};
+
+export default TableHeader;

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

@@ -0,0 +1,85 @@
+import { ReactNode } from 'react';
+
+import { Item } from './table-tree';
+
+/**
+ * This is hard-coded here because our actual <TableTree /> has no typings
+ * for its props.
+ *
+ * Adding types for real *might* break things so will need a little care.
+ *
+ * Defining it here for now lets us provide *something* without much headache.
+ */
+type RowProps = {
+  /**
+   * Whether the row has children
+   */
+  hasChildren?: boolean;
+  /**
+   * Children contained in the row. Should be one or more Cell components.
+   */
+  children?: React.ReactNode;
+  /**
+   * ID for the row item
+   */
+  itemId?: string;
+  // eslint-disable-next-line jsdoc/require-asterisk-prefix, jsdoc/check-alignment
+  /**
+    The data used to render the row and descendants. Pass down from `children` render prop.
+
+    In addition to these props, any other data can be added to the object, and it will
+    be provided as props when rendering each cell.
+   */
+  // eslint-disable-next-line @repo/internal/react/consistent-props-definitions
+  items?: Item[] | null;
+  /**
+   * Controls the expanded state of the row.
+   */
+  isExpanded?: ReactNode;
+  /**
+   * Sets the default expanded state of the row.
+   */
+  isDefaultExpanded?: ReactNode;
+  /**
+   * `aria-label` attached to the expand chevron button
+   */
+  expandLabel?: string;
+  /**
+   * `aria-label` attached to the collapse chevron button
+   */
+  collapseLabel?: string;
+  /**
+   * Callback called when row collapses.
+   */
+  onCollapse?: (data: Item) => void;
+  /**
+   * Callback called when row expands.
+   */
+  onExpand?: (data: Item) => void;
+  /**
+   * Children to render under row.
+   * Normally set by parent Item component and does not need to be configured.
+   */
+  renderChildren?: () => React.ReactNode;
+  /**
+   * 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.
+   */
+  // 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.
+   */
+  depth?: number;
+};
+
+const TableRow = function (props: RowProps) {
+  return null;
+};
+
+TableRow.defaultProps = {
+  isDefaultExpanded: false,
+};
+
+export default TableRow;

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

@@ -0,0 +1,34 @@
+import { Item } from './table-tree';
+
+/**
+ * This is hard-coded here because our actual <Rows /> has no typings
+ * for its props.
+ *
+ * Adding types for real *might* break things so will need a little care.
+ *
+ * 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
+  /**
+    The data used to render the set of rows. Will be passed down via the `children` render prop.
+
+    In addition to these props, any other data can be added to the object, and it will
+    be provided as props when rendering each cell.
+   */
+  // eslint-disable-next-line @repo/internal/react/consistent-props-definitions
+  items?: Item[] | null;
+  /**
+   * Render function for child rows. Render props will contain an item from the
+   * `items` prop above.
+   */
+  render?: (item: Item) => React.ReactNode;
+};
+
+const TableRows = function (props: RowsProps) {
+  return null;
+};
+
+TableRows.defaultProps = {};
+
+export default TableRows;

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

@@ -2,9 +2,8 @@ import { ElementType, ReactNode } from 'react';
 
 class Content extends Object {}
 
-type Item = {
+export type Item = {
   id: string;
-  content: Content;
   hasChildren: boolean;
   children?: Item[];
 };
@@ -37,10 +36,12 @@ 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
   /**
-   * The data used to render the table.
-   * The type of `content` can be whatever you would like, and its value will be
-   * provided as props when rendering each cell.
+    The data used to render the table.
+
+    In addition to these 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;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/table-tree",
-  "version": "9.1.8",
+  "version": "9.2.0",
   "description": "A table tree is an expandable table for showing nested hierarchies of information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -19,7 +19,8 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Table tree"
+      "name": "Table tree",
+      "category": "Components"
     }
   },
   "af:exports": {
@@ -30,10 +31,10 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/spinner": "^15.0.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21",
     "prop-types": "^15.5.10"
   },
@@ -42,13 +43,14 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/empty-state": "^7.3.0",
-    "@atlaskit/section-message": "^6.0.0",
-    "@atlaskit/select": "^15.0.0",
+    "@atlaskit/ds-lib": "^2.0.1",
+    "@atlaskit/empty-state": "^7.4.0",
+    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@emotion/styled": "^10.0.7",
+    "@emotion/styled": "^11.0.0",
     "enzyme": "^3.10.0",
     "exenv": "^1.2.2",
     "react-dom": "^16.8.0",
@@ -68,6 +70,7 @@
       "circular-dependencies": "file-and-folder-level"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "styling": [
         "static",