@atlaskit/table 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/table
 
+## 0.2.5
+
+### Patch Changes
+
+- [`261420360ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/261420360ec) - Upgrades component types to support React 18.
+
+## 0.2.4
+
+### Patch Changes
+
+- [`cfe48bb7ece`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cfe48bb7ece) - Internal change only. Replace usages of Inline/Stack with stable version from `@atlaskit/primitives`.
+
 ## 0.2.3
 
 ### Patch Changes

package/dist/cjs/thead.js

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("@emotion/react");
 var _checkbox = _interopRequireDefault(require("@atlaskit/checkbox"));
 var _dsExplorations = require("@atlaskit/ds-explorations");
+var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _selectionProvider = require("./hooks/selection-provider");
 var _useTable2 = require("./hooks/use-table");
@@ -49,8 +50,8 @@ var THead = function THead(_ref) {
   })), children, isChecked && (0, _react.jsx)(Primitives.BulkActionOverlay, null, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
     color: "color.text",
     fontWeight: "medium"
-  }, state.checked.length, " selected"), actions && (0, _react.jsx)(_dsExplorations.UNSAFE_Inline, {
-    gap: "space.100"
+  }, state.checked.length, " selected"), actions && (0, _react.jsx)(_inline.default, {
+    space: "100"
   }, actions(state.checked)))));
 };
 var _default = THead;

package/dist/cjs/ui/base-cell.js

@@ -8,13 +8,13 @@ exports.BaseCell = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
-var _inline = _interopRequireDefault(require("@atlaskit/ds-explorations/inline"));
+var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
 /* eslint-disable @atlassian/tangerine/import/entry-points */
 /** @jsx jsx */
 
 var alignMap = {
-  text: 'flexStart',
-  number: 'flexEnd',
+  text: 'start',
+  number: 'end',
   icon: 'center'
 };
 var baseResetStyles = (0, _react2.css)({
@@ -65,8 +65,8 @@ var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     } : undefined,
     "aria-sort": sortDirection
   }, (0, _react2.jsx)(_inline.default, {
-    justifyContent: alignMap[align],
-    gap: "space.0"
+    alignInline: alignMap[align],
+    space: "0"
   }, children));
 });
 exports.BaseCell = BaseCell;

package/dist/cjs/ui/bulk-action-overlay.js

@@ -1,11 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BulkActionOverlay = void 0;
 var _react = require("@emotion/react");
 var _dsExplorations = require("@atlaskit/ds-explorations");
+var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
 /** @jsx jsx */
 
 var overlayStyles = (0, _react.css)({
@@ -28,9 +30,9 @@ var BulkActionOverlay = function BulkActionOverlay(_ref) {
     paddingInline: "space.100",
     backgroundColor: "elevation.surface",
     css: overlayStyles
-  }, (0, _react.jsx)(_dsExplorations.UNSAFE_Inline, {
-    gap: "space.300",
-    alignItems: "center"
+  }, (0, _react.jsx)(_inline.default, {
+    space: "300",
+    alignBlock: "center"
   }, children));
 };
 exports.BulkActionOverlay = BulkActionOverlay;

package/dist/cjs/ui/selectable-cell.js

@@ -18,7 +18,6 @@ var spacingStyles = (0, _react.css)({
     paddingLeft: '8px !important'
   }
 });
-
 /**
  * __Selectable cell__
  *

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table",
-	"version": "0.2.3",
+	"version": "0.2.5",
 	"sideEffects": false
 }

package/dist/es2019/thead.js

@@ -2,7 +2,8 @@
 
 import { jsx } from '@emotion/react';
 import Checkbox from '@atlaskit/checkbox';
-import { UNSAFE_Inline as Inline, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import Inline from '@atlaskit/primitives/inline';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSelection } from './hooks/selection-provider';
 import { useTable } from './hooks/use-table';
@@ -39,7 +40,7 @@ const THead = ({
     color: "color.text",
     fontWeight: "medium"
   }, state.checked.length, " selected"), actions && jsx(Inline, {
-    gap: "space.100"
+    space: "100"
   }, actions(state.checked)))));
 };
 export default THead;

package/dist/es2019/ui/base-cell.js

@@ -3,10 +3,10 @@
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import Box from '@atlaskit/ds-explorations/box';
-import Inline from '@atlaskit/ds-explorations/inline';
+import Inline from '@atlaskit/primitives/inline';
 const alignMap = {
-  text: 'flexStart',
-  number: 'flexEnd',
+  text: 'start',
+  number: 'end',
   icon: 'center'
 };
 const baseResetStyles = css({
@@ -54,6 +54,6 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
   } : undefined,
   "aria-sort": sortDirection
 }, jsx(Inline, {
-  justifyContent: alignMap[align],
-  gap: "space.0"
+  alignInline: alignMap[align],
+  space: "0"
 }, children)));

package/dist/es2019/ui/bulk-action-overlay.js

@@ -1,7 +1,8 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { UNSAFE_Box as Box, UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import Inline from '@atlaskit/primitives/inline';
 const overlayStyles = css({
   top: 0,
   right: 0,
@@ -23,6 +24,6 @@ export const BulkActionOverlay = ({
   backgroundColor: "elevation.surface",
   css: overlayStyles
 }, jsx(Inline, {
-  gap: "space.300",
-  alignItems: "center"
+  space: "300",
+  alignBlock: "center"
 }, children));

package/dist/es2019/ui/selectable-cell.js

@@ -12,7 +12,6 @@ const spacingStyles = css({
     paddingLeft: '8px !important'
   }
 });
-
 /**
  * __Selectable cell__
  *

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table",
-	"version": "0.2.3",
+	"version": "0.2.5",
 	"sideEffects": false
 }

package/dist/esm/thead.js

@@ -3,7 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 import { jsx } from '@emotion/react';
 import Checkbox from '@atlaskit/checkbox';
-import { UNSAFE_Inline as Inline, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import Inline from '@atlaskit/primitives/inline';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSelection } from './hooks/selection-provider';
 import { useTable } from './hooks/use-table';
@@ -40,7 +41,7 @@ var THead = function THead(_ref) {
     color: "color.text",
     fontWeight: "medium"
   }, state.checked.length, " selected"), actions && jsx(Inline, {
-    gap: "space.100"
+    space: "100"
   }, actions(state.checked)))));
 };
 export default THead;

package/dist/esm/ui/base-cell.js

@@ -3,10 +3,10 @@
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import Box from '@atlaskit/ds-explorations/box';
-import Inline from '@atlaskit/ds-explorations/inline';
+import Inline from '@atlaskit/primitives/inline';
 var alignMap = {
-  text: 'flexStart',
-  number: 'flexEnd',
+  text: 'start',
+  number: 'end',
   icon: 'center'
 };
 var baseResetStyles = css({
@@ -57,7 +57,7 @@ export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     } : undefined,
     "aria-sort": sortDirection
   }, jsx(Inline, {
-    justifyContent: alignMap[align],
-    gap: "space.0"
+    alignInline: alignMap[align],
+    space: "0"
   }, children));
 });

package/dist/esm/ui/bulk-action-overlay.js

@@ -1,7 +1,8 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { UNSAFE_Box as Box, UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import Inline from '@atlaskit/primitives/inline';
 var overlayStyles = css({
   top: 0,
   right: 0,
@@ -23,7 +24,7 @@ export var BulkActionOverlay = function BulkActionOverlay(_ref) {
     backgroundColor: "elevation.surface",
     css: overlayStyles
   }, jsx(Inline, {
-    gap: "space.300",
-    alignItems: "center"
+    space: "300",
+    alignBlock: "center"
   }, children));
 };

package/dist/esm/ui/selectable-cell.js

@@ -12,7 +12,6 @@ var spacingStyles = css({
     paddingLeft: '8px !important'
   }
 });
-
 /**
  * __Selectable cell__
  *

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table",
-	"version": "0.2.3",
+	"version": "0.2.5",
 	"sideEffects": false
 }

package/dist/types/hooks/selection-provider.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 import { SelectableActions, SelectableState } from './use-selectable';
 declare type SelectionContext = [
     SelectableState,
@@ -17,6 +17,8 @@ declare const SelectionContext: React.Context<SelectionContext>;
  * - [Code](https://atlassian.design/components/{packageName}/code)
  * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-declare const SelectionProvider: FC;
+declare const SelectionProvider: FC<{
+    children: ReactNode;
+}>;
 export declare const useSelection: () => SelectionContext;
 export default SelectionProvider;

package/dist/types/row.d.ts

@@ -1,11 +1,15 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 export declare type RowProps = {
     /**
      * A `testId` prop is a unique string that appears as a data attribute `data-testid`
      * in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Content of the row.
+     */
+    children?: ReactNode;
 };
 /**
  * __Row__

package/dist/types/sortable-column.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 export interface CellProps {
     /**
      * Unique key used for sorting table data by this column
@@ -11,6 +11,7 @@ export interface CellProps {
      */
     testId?: string;
     onClick?: React.MouseEventHandler;
+    children?: ReactNode;
 }
 /**
  * __SortableColumn__

package/dist/types/thead.d.ts

@@ -2,6 +2,7 @@
 import { FC, ReactNode } from 'react';
 declare type THeadProps = {
     actions?: (selected: number[]) => ReactNode;
+    children?: ReactNode;
 };
 declare const THead: FC<THeadProps>;
 export default THead;

package/dist/types/ui/base-cell.d.ts

@@ -35,8 +35,8 @@ export declare type BaseCellProps = {
  */
 export declare type SortDirection = 'ascending' | 'descending' | 'none' | 'other';
 declare const alignMap: {
-    readonly text: "flexStart";
-    readonly number: "flexEnd";
+    readonly text: "start";
+    readonly number: "end";
     readonly icon: "center";
 };
 /**

package/dist/types/ui/bulk-action-overlay.d.ts

@@ -1,8 +1,10 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 /**
  * __Bulk action overlay__
  *
  * A bulk action overlay is used to conditionally render when a user makes a row selection
  */
-export declare const BulkActionOverlay: FC;
+export declare const BulkActionOverlay: FC<{
+    children: ReactNode;
+}>;

package/dist/types/ui/selectable-cell.d.ts

@@ -1,10 +1,13 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
+declare type SelectableCellProps = {
+    as: 'td' | 'th';
+    children?: ReactNode;
+};
 /**
  * __Selectable cell__
  *
  * A selectable cell primitive designed to be used for light weight composition.
  */
-export declare const SelectableCell: FC<{
-    as: 'td' | 'th';
-}>;
+export declare const SelectableCell: FC<SelectableCellProps>;
+export {};

package/dist/types/ui/table.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 declare type TableProps = {
     /**
      * A `testId` prop is a unique string that appears as a data attribute `data-testid`
@@ -12,6 +12,10 @@ declare type TableProps = {
      * @see 'https://www.w3.org/WAI/EO/Drafts/tutorials/tables/summary/'
      */
     summary?: string;
+    /**
+     * Table content.
+     */
+    children: ReactNode;
 };
 /**
  * __Table__

package/dist/types/ui/tbody.d.ts

@@ -1,8 +1,10 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 /**
  * __TBody__
  * @primitive
  */
-export declare const TBody: FC;
+export declare const TBody: FC<{
+    children: ReactNode;
+}>;
 export default TBody;

package/dist/types/ui/thead.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 /**
  * __THead__
  *
@@ -7,4 +7,6 @@ import { FC } from 'react';
  *
  * @primitive
  */
-export declare const THead: FC;
+export declare const THead: FC<{
+    children?: ReactNode;
+}>;

package/dist/types/ui/tr.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 interface TRProps {
     /**
      * A `testId` prop is a unique string that appears as a data attribute `data-testid`
@@ -14,6 +14,10 @@ interface TRProps {
      * Adjust the behavior of the element depending on whether the row is in the `THead` or in the `TBody`.
      */
     isBodyRow?: boolean;
+    /**
+     * Content of the row.
+     */
+    children?: ReactNode;
 }
 /**
  * __Row__

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "A table is used to display data.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -38,6 +38,7 @@
     "@atlaskit/ds-lib": "^2.1.2",
     "@atlaskit/focus-ring": "^1.2.1",
     "@atlaskit/icon": "^21.11.2",
+    "@atlaskit/primitives": "^0.3.0",
     "@atlaskit/tokens": "^1.2.0",
     "@atlaskit/tooltip": "^17.7.0",
     "@atlaskit/visually-hidden": "^1.0.0",

package/report.api.md

@@ -23,8 +23,8 @@ import { ReactNode } from 'react';
 
 // @public (undocumented)
 const alignMap: {
-  readonly text: 'flexStart';
-  readonly number: 'flexEnd';
+  readonly text: 'start';
+  readonly number: 'end';
   readonly icon: 'center';
 };
 
@@ -57,6 +57,8 @@ export const Cell: FC<Omit<BaseCellProps, 'as'>>;
 
 // @public (undocumented)
 interface CellProps {
+  // (undocumented)
+  children?: ReactNode;
   name: string;
   // (undocumented)
   onClick?: React.MouseEventHandler;
@@ -72,6 +74,7 @@ export const Row: FC<RowProps>;
 // @public (undocumented)
 type RowProps = {
   testId?: string;
+  children?: ReactNode;
 };
 
 // @public
@@ -116,6 +119,7 @@ export const THead: FC<THeadProps>;
 // @public (undocumented)
 type THeadProps = {
   actions?: (selected: number[]) => ReactNode;
+  children?: ReactNode;
 };
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -12,8 +12,8 @@ import { ReactNode } from 'react';
 
 // @public (undocumented)
 const alignMap: {
-    readonly text: "flexStart";
-    readonly number: "flexEnd";
+    readonly text: "start";
+    readonly number: "end";
     readonly icon: "center";
 };
 
@@ -41,6 +41,8 @@ export const Cell: FC<Omit<BaseCellProps, 'as'>>;
 
 // @public (undocumented)
 interface CellProps {
+    // (undocumented)
+    children?: ReactNode;
     name: string;
     // (undocumented)
     onClick?: React.MouseEventHandler;
@@ -56,6 +58,7 @@ export const Row: FC<RowProps>;
 // @public (undocumented)
 type RowProps = {
     testId?: string;
+    children?: ReactNode;
 };
 
 // @public
@@ -89,6 +92,7 @@ export const THead: FC<THeadProps>;
 // @public (undocumented)
 type THeadProps = {
     actions?: (selected: number[]) => ReactNode;
+    children?: ReactNode;
 };
 
 // @public (undocumented)