@atlaskit/table-tree 9.0.12 → 9.0.13

package/dist/types/components/table-tree.d.ts

@@ -0,0 +1,23 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+interface State {
+    columnWidths: number[];
+}
+export default class TableTree extends Component<any, State> {
+    static childContextTypes: {
+        tableTree: PropTypes.Validator<any>;
+    };
+    state: State;
+    componentDidMount(): void;
+    setColumnWidth: (columnIndex: number, width: number) => void;
+    getColumnWidth: (columnIndex: any) => number | null;
+    getChildContext(): {
+        tableTree: {
+            columnWidths: number[];
+            setColumnWidth: (columnIndex: number, width: number) => void;
+            getColumnWidth: (columnIndex: any) => number | null;
+        };
+    };
+    render(): JSX.Element;
+}
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,10 @@
+export { default } from './components/table-tree';
+export { default as Headers } from './components/headers';
+export { default as Header } from './components/header';
+export { default as Cell } from './components/cell';
+export { default as Rows } from './components/rows';
+export { default as Row } from './components/row';
+export { default as TableTreeDataHelper } from './utils/table-tree-data-helper';
+export type { CellWithColumnWidthProps } from './components/internal/with-column-width';
+export type { CellProps } from './components/cell';
+export type { RowsProps } from './components/rows';

package/dist/types/utils/table-tree-data-helper.d.ts

@@ -0,0 +1,25 @@
+/**
+ * This helper class will create a cache of all the id's in the items object and
+ * path to the object.
+ * Example:
+ * [{
+ *   // item 1,
+ *   id: 1,
+ *   children:[{
+ *     // item 1.1,
+ *     id: '2'
+ *   }]
+ * }]
+ *
+ * Cache will look something like:
+ * {1: 0, 2: '0.children[0]'}
+ */
+export default class TableTreeDataHelper<T extends any = any> {
+    key: keyof T;
+    keysCache: any;
+    constructor({ key }?: {
+        key?: keyof T | undefined;
+    });
+    updateItems(items: T[], allItems?: T[], parentItem?: T | null): T[];
+    appendItems(items: T[], allItems?: T[], parentItem?: T | null): T[];
+}

package/dist/types/utils/to-item-id.d.ts

@@ -0,0 +1 @@
+export default function toItemId(id: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table-tree",
-  "version": "9.0.12",
+  "version": "9.0.13",
   "description": "A React Component for displaying expandable tables with tree-like hierarchies",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -10,30 +10,35 @@
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.js",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "deprecatedAutoEntryPoints": true,
     "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Table Tree"
     }
   },
+  "af:exports": {
+    ".": "./src/index.tsx"
+  },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.0.0",
     "@atlaskit/icon": "^21.9.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0",
+    "@emotion/core": "^10.0.9",
     "lodash": "^4.17.15",
     "prop-types": "^15.5.10"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "styled-components": "^3.2.6"
+    "react": "^16.8.0"
   },
   "devDependencies": {
     "@atlaskit/build-utils": "*",
@@ -44,6 +49,7 @@
     "@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",
     "enzyme": "^3.10.0",
     "exenv": "^1.2.2",
     "react-dom": "^16.8.0",
@@ -59,7 +65,18 @@
   ],
   "techstack": {
     "@atlassian/frontend": {
-      "import-structure": "atlassian-conventions"
+      "import-structure": "atlassian-conventions",
+      "circular-dependencies": "file-and-folder-level"
+    },
+    "@repo/internal": {
+      "design-system": "v1",
+      "styling": [
+        "static",
+        "emotion"
+      ],
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"

package/dist/cjs/styled.js

@@ -1,111 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TableTreeContainer = exports.Header = exports.Cell = exports.OverflowContainer = exports.LoaderItemContainer = exports.ChevronIconContainer = exports.ChevronContainer = exports.HeadersContainer = exports.TreeRowContainer = exports.iconColor = void 0;
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _colors = require("@atlaskit/theme/colors");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// Future-proofing: Styled Component 2.x no longer tolerate unitless values for CSS length.
-// See:
-// https://github.com/styled-components/css-to-react-native/issues/20
-// https://github.com/styled-components/polished/issues/234
-function defaultToPx(length) {
-  var number = +length;
-
-  if (number === 0) {
-    return 0;
-  }
-
-  if (Number.isNaN(number)) {
-    return length;
-  }
-
-  return "".concat(number, "px");
-}
-
-var iconColor = _colors.N800;
-exports.iconColor = iconColor;
-
-var TreeRowContainer = _styledComponents.default.div.withConfig({
-  displayName: "styled__TreeRowContainer",
-  componentId: "sc-56yt3z-0"
-})(["\n  border-bottom: 1px solid ", ";\n  display: flex;\n"], _colors.N30);
-
-exports.TreeRowContainer = TreeRowContainer;
-
-var HeadersContainer = _styledComponents.default.div.withConfig({
-  displayName: "styled__HeadersContainer",
-  componentId: "sc-56yt3z-1"
-})(["\n  border-bottom: solid 2px #dfe1e6;\n  display: flex;\n"]);
-
-exports.HeadersContainer = HeadersContainer;
-var indentWidth = 25;
-var commonChevronContainer = (0, _styledComponents.css)(["\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: 7px;\n  margin-left: ", ";\n"], defaultToPx(-indentWidth));
-
-var ChevronContainer = _styledComponents.default.span.withConfig({
-  displayName: "styled__ChevronContainer",
-  componentId: "sc-56yt3z-2"
-})(["\n  ", ";\n"], commonChevronContainer);
-
-exports.ChevronContainer = ChevronContainer;
-
-var ChevronIconContainer = _styledComponents.default.span.withConfig({
-  displayName: "styled__ChevronIconContainer",
-  componentId: "sc-56yt3z-3"
-})(["\n  position: relative;\n  top: 1px;\n"]);
-
-exports.ChevronIconContainer = ChevronIconContainer;
-
-var LoaderItemContainer = _styledComponents.default.span.withConfig({
-  displayName: "styled__LoaderItemContainer",
-  componentId: "sc-56yt3z-4"
-})(["\n  ", " padding-top: 5px;\n  width: 100%;\n\n  ", ";\n"], commonChevronContainer, function (props) {
-  return props.isRoot && (0, _styledComponents.css)(["\n      padding-left: 50%;\n    "]);
-});
-
-exports.LoaderItemContainer = LoaderItemContainer;
-var commonCell = (0, _styledComponents.css)(["\n  display: flex;\n  align-items: flex-start;\n  position: relative;\n  box-sizing: border-box;\n  min-height: 40px;\n  padding: 10px ", ";\n  color: ", ";\n  line-height: 20px;\n  ", ";\n"], defaultToPx(indentWidth), _colors.N800, function (props) {
-  return props.width && (0, _styledComponents.css)(["\n      width: ", ";\n    "], defaultToPx(props.width));
-});
-
-var OverflowContainer = _styledComponents.default.span.withConfig({
-  displayName: "styled__OverflowContainer",
-  componentId: "sc-56yt3z-5"
-})(["\n  ", ";\n"], function (props) {
-  return props.singleLine && (0, _styledComponents.css)(["\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    "]);
-});
-
-exports.OverflowContainer = OverflowContainer;
-
-var Cell = _styledComponents.default.div.withConfig({
-  displayName: "styled__Cell",
-  componentId: "sc-56yt3z-6"
-})(["\n  ", " ", ";\n"], commonCell, function (props) {
-  return props.indentLevel && (0, _styledComponents.css)(["\n      padding-left: ", ";\n    "], defaultToPx(indentWidth * props.indentLevel));
-});
-
-exports.Cell = Cell;
-
-var Header = _styledComponents.default.div.withConfig({
-  displayName: "styled__Header",
-  componentId: "sc-56yt3z-7"
-})(["\n  ", " font-weight: bold;\n  font-size: 12px;\n  line-height: 1.67;\n  letter-spacing: -0.1px;\n  color: ", ";\n"], commonCell, _colors.N300);
-
-exports.Header = Header;
-
-var TableTreeContainer = _styledComponents.default.div.withConfig({
-  displayName: "styled__TableTreeContainer",
-  componentId: "sc-56yt3z-8"
-})([""]);
-
-exports.TableTreeContainer = TableTreeContainer;

package/dist/esm/styled.js

@@ -1,68 +0,0 @@
-import styled, { css } from 'styled-components';
-import { N30, N300, N800 } from '@atlaskit/theme/colors'; // Future-proofing: Styled Component 2.x no longer tolerate unitless values for CSS length.
-// See:
-// https://github.com/styled-components/css-to-react-native/issues/20
-// https://github.com/styled-components/polished/issues/234
-
-function defaultToPx(length) {
-  var number = +length;
-
-  if (number === 0) {
-    return 0;
-  }
-
-  if (Number.isNaN(number)) {
-    return length;
-  }
-
-  return "".concat(number, "px");
-}
-
-export var iconColor = N800;
-export var TreeRowContainer = styled.div.withConfig({
-  displayName: "styled__TreeRowContainer",
-  componentId: "sc-56yt3z-0"
-})(["\n  border-bottom: 1px solid ", ";\n  display: flex;\n"], N30);
-export var HeadersContainer = styled.div.withConfig({
-  displayName: "styled__HeadersContainer",
-  componentId: "sc-56yt3z-1"
-})(["\n  border-bottom: solid 2px #dfe1e6;\n  display: flex;\n"]);
-var indentWidth = 25;
-var commonChevronContainer = css(["\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: 7px;\n  margin-left: ", ";\n"], defaultToPx(-indentWidth));
-export var ChevronContainer = styled.span.withConfig({
-  displayName: "styled__ChevronContainer",
-  componentId: "sc-56yt3z-2"
-})(["\n  ", ";\n"], commonChevronContainer);
-export var ChevronIconContainer = styled.span.withConfig({
-  displayName: "styled__ChevronIconContainer",
-  componentId: "sc-56yt3z-3"
-})(["\n  position: relative;\n  top: 1px;\n"]);
-export var LoaderItemContainer = styled.span.withConfig({
-  displayName: "styled__LoaderItemContainer",
-  componentId: "sc-56yt3z-4"
-})(["\n  ", " padding-top: 5px;\n  width: 100%;\n\n  ", ";\n"], commonChevronContainer, function (props) {
-  return props.isRoot && css(["\n      padding-left: 50%;\n    "]);
-});
-var commonCell = css(["\n  display: flex;\n  align-items: flex-start;\n  position: relative;\n  box-sizing: border-box;\n  min-height: 40px;\n  padding: 10px ", ";\n  color: ", ";\n  line-height: 20px;\n  ", ";\n"], defaultToPx(indentWidth), N800, function (props) {
-  return props.width && css(["\n      width: ", ";\n    "], defaultToPx(props.width));
-});
-export var OverflowContainer = styled.span.withConfig({
-  displayName: "styled__OverflowContainer",
-  componentId: "sc-56yt3z-5"
-})(["\n  ", ";\n"], function (props) {
-  return props.singleLine && css(["\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    "]);
-});
-export var Cell = styled.div.withConfig({
-  displayName: "styled__Cell",
-  componentId: "sc-56yt3z-6"
-})(["\n  ", " ", ";\n"], commonCell, function (props) {
-  return props.indentLevel && css(["\n      padding-left: ", ";\n    "], defaultToPx(indentWidth * props.indentLevel));
-});
-export var Header = styled.div.withConfig({
-  displayName: "styled__Header",
-  componentId: "sc-56yt3z-7"
-})(["\n  ", " font-weight: bold;\n  font-size: 12px;\n  line-height: 1.67;\n  letter-spacing: -0.1px;\n  color: ", ";\n"], commonCell, N300);
-export var TableTreeContainer = styled.div.withConfig({
-  displayName: "styled__TableTreeContainer",
-  componentId: "sc-56yt3z-8"
-})([""]);

package/styled/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "@atlaskit/table-tree/styled",
-  "main": "../dist/cjs/styled.js",
-  "module": "../dist/esm/styled.js",
-  "module:es2019": "../dist/es2019/styled.js"
-}