@atlaskit/table 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/table
 
+## 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
+
+- [`8fb961ffa76`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8fb961ffa76) - [ux] Fixed some accessibility bugs. Now checkboxes in selectable cells are labelled for assistive technology users, sortable columns have their sorting state programmatically associated through the `aria-sort` attribute, and the sort button has an `aria-roledescription` to ensure that assistive technology users are informed that the column headers are sortable in nature.
+
 ## 0.2.2
 
 ### Patch Changes

package/dist/cjs/selectable-cell.js

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _checkbox = _interopRequireDefault(require("@atlaskit/checkbox"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _selectionProvider = require("./hooks/selection-provider");
 var _useRowId = require("./hooks/use-row-id");
 var Primitives = _interopRequireWildcard(require("./ui"));
@@ -35,7 +36,8 @@ var SelectableCell = function SelectableCell() {
     as: "td"
   }, (0, _react2.jsx)(_checkbox.default, {
     isChecked: isChecked,
-    onChange: onChange
+    onChange: onChange,
+    label: (0, _react2.jsx)(_visuallyHidden.default, null, "Select row ", idx + 1)
   }));
 };
 var _default = /*#__PURE__*/(0, _react.memo)(SelectableCell);

package/dist/cjs/sortable-column.js

@@ -66,26 +66,29 @@ var SortableColumn = function SortableColumn(_ref) {
   function () {
     return setSortState(name);
   }, [setSortState, name]);
-  return (
+  return (0, _react2.jsx)(_ui.TH, (0, _extends2.default)({
+    testId: testId,
+    sortDirection: sortKey === name ? sortDirection : 'none'
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react2.jsx)(_ui.TH, (0, _extends2.default)({
-      testId: testId
-    }, other), (0, _react2.jsx)(_tooltip.default, {
-      content: getSortMessage(),
-      position: "top"
-    }, function (tooltipProps) {
-      return (0, _react2.jsx)(_button.default, (0, _extends2.default)({
-        spacing: "compact",
-        appearance: "subtle",
-        iconAfter: (0, _react2.jsx)(_ui.SortIcon, {
-          name: name
-        })
-      }, tooltipProps, {
-        onClick: updateSortState,
-        css: overrideStyles
-      }), children);
-    }))
-  );
+  }, other), (0, _react2.jsx)(_tooltip.default, {
+    content: getSortMessage(),
+    position: "top"
+  }, function (tooltipProps) {
+    return (0, _react2.jsx)(_button.default, (0, _extends2.default)({
+      testId: "".concat(testId, "--button"),
+      spacing: "compact",
+      appearance: "subtle",
+      iconAfter: (0, _react2.jsx)(_ui.SortIcon, {
+        name: name
+      })
+    }, tooltipProps, {
+      onClick: updateSortState,
+      css: overrideStyles
+      // TODO: i18n support for this attr
+      ,
+      "aria-roledescription": "Column sort button"
+    }), children);
+  }));
 };
 var _default = SortableColumn;
 exports.default = _default;

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");
@@ -40,17 +41,17 @@ var THead = function THead(_ref) {
   }, (0, _react.jsx)(Primitives.SelectableCell, {
     as: "th"
   }, (0, _react.jsx)(_checkbox.default, {
-    "aria-labelledby": "select-all",
+    label: (0, _react.jsx)(_visuallyHidden.default, {
+      id: "select-all"
+    }, "Select all rows"),
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  }), (0, _react.jsx)(_visuallyHidden.default, {
-    id: "select-all"
-  }, "Select all rows")), children, isChecked && (0, _react.jsx)(Primitives.BulkActionOverlay, null, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
+  })), 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)({
@@ -48,7 +48,8 @@ var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     backgroundColor = _ref.backgroundColor,
     scope = _ref.scope,
     width = _ref.width,
-    className = _ref.className;
+    className = _ref.className,
+    sortDirection = _ref.sortDirection;
   return (0, _react2.jsx)(_box.default, {
     css: baseResetStyles,
     ref: ref,
@@ -61,10 +62,11 @@ var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: className,
     UNSAFE_style: width ? {
       width: width
-    } : undefined
+    } : 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/th.js

@@ -20,7 +20,8 @@ var TH = function TH(_ref) {
     align = _ref.align,
     scope = _ref.scope,
     backgroundColor = _ref.backgroundColor,
-    width = _ref.width;
+    width = _ref.width,
+    sortDirection = _ref.sortDirection;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -30,7 +31,8 @@ var TH = function TH(_ref) {
       align: align,
       scope: scope,
       width: width,
-      backgroundColor: backgroundColor
+      backgroundColor: backgroundColor,
+      sortDirection: sortDirection
     }, children)
   );
 };

package/dist/cjs/version.json

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

package/dist/es2019/selectable-cell.js

@@ -2,6 +2,7 @@
 import { memo, useCallback, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import Checkbox from '@atlaskit/checkbox';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSelection } from './hooks/selection-provider';
 import { useRowId } from './hooks/use-row-id';
 import * as Primitives from './ui';
@@ -19,7 +20,8 @@ const SelectableCell = () => {
     as: "td"
   }, jsx(Checkbox, {
     isChecked: isChecked,
-    onChange: onChange
+    onChange: onChange,
+    label: jsx(VisuallyHidden, null, "Select row ", idx + 1)
   }));
 };
 export default /*#__PURE__*/memo(SelectableCell);

package/dist/es2019/sortable-column.js

@@ -59,23 +59,26 @@ const SortableColumn = ({
   const updateSortState = useCallback(
   // @ts-expect-error: TODO: Our `name` typing is off; refer to `SortKey`
   () => setSortState(name), [setSortState, name]);
-  return (
+  return jsx(TH, _extends({
+    testId: testId,
+    sortDirection: sortKey === name ? sortDirection : 'none'
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(TH, _extends({
-      testId: testId
-    }, other), jsx(Tooltip, {
-      content: getSortMessage(),
-      position: "top"
-    }, tooltipProps => jsx(Button, _extends({
-      spacing: "compact",
-      appearance: "subtle",
-      iconAfter: jsx(SortIcon, {
-        name: name
-      })
-    }, tooltipProps, {
-      onClick: updateSortState,
-      css: overrideStyles
-    }), children)))
-  );
+  }, other), jsx(Tooltip, {
+    content: getSortMessage(),
+    position: "top"
+  }, tooltipProps => jsx(Button, _extends({
+    testId: `${testId}--button`,
+    spacing: "compact",
+    appearance: "subtle",
+    iconAfter: jsx(SortIcon, {
+      name: name
+    })
+  }, tooltipProps, {
+    onClick: updateSortState,
+    css: overrideStyles
+    // TODO: i18n support for this attr
+    ,
+    "aria-roledescription": "Column sort button"
+  }), children)));
 };
 export default SortableColumn;

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';
@@ -29,17 +30,17 @@ const THead = ({
   }, jsx(Primitives.SelectableCell, {
     as: "th"
   }, jsx(Checkbox, {
-    "aria-labelledby": "select-all",
+    label: jsx(VisuallyHidden, {
+      id: "select-all"
+    }, "Select all rows"),
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  }), jsx(VisuallyHidden, {
-    id: "select-all"
-  }, "Select all rows")), children, isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
+  })), children, isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
     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({
@@ -37,7 +37,8 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
   backgroundColor,
   scope,
   width,
-  className
+  className,
+  sortDirection
 }, ref) => jsx(Box, {
   css: baseResetStyles,
   ref: ref,
@@ -50,8 +51,9 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
   className: className,
   UNSAFE_style: width ? {
     width
-  } : undefined
+  } : 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/th.js

@@ -13,7 +13,8 @@ export const TH = ({
   align,
   scope,
   backgroundColor,
-  width
+  width,
+  sortDirection
 }) =>
 /*#__PURE__*/
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -23,5 +24,6 @@ React.createElement(BaseCell, {
   align: align,
   scope: scope,
   width: width,
-  backgroundColor: backgroundColor
+  backgroundColor: backgroundColor,
+  sortDirection: sortDirection
 }, children);

package/dist/es2019/version.json

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

package/dist/esm/selectable-cell.js

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { memo, useCallback, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import Checkbox from '@atlaskit/checkbox';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSelection } from './hooks/selection-provider';
 import { useRowId } from './hooks/use-row-id';
 import * as Primitives from './ui';
@@ -24,7 +25,8 @@ var SelectableCell = function SelectableCell() {
     as: "td"
   }, jsx(Checkbox, {
     isChecked: isChecked,
-    onChange: onChange
+    onChange: onChange,
+    label: jsx(VisuallyHidden, null, "Select row ", idx + 1)
   }));
 };
 export default /*#__PURE__*/memo(SelectableCell);

package/dist/esm/sortable-column.js

@@ -61,25 +61,28 @@ var SortableColumn = function SortableColumn(_ref) {
   function () {
     return setSortState(name);
   }, [setSortState, name]);
-  return (
+  return jsx(TH, _extends({
+    testId: testId,
+    sortDirection: sortKey === name ? sortDirection : 'none'
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(TH, _extends({
-      testId: testId
-    }, other), jsx(Tooltip, {
-      content: getSortMessage(),
-      position: "top"
-    }, function (tooltipProps) {
-      return jsx(Button, _extends({
-        spacing: "compact",
-        appearance: "subtle",
-        iconAfter: jsx(SortIcon, {
-          name: name
-        })
-      }, tooltipProps, {
-        onClick: updateSortState,
-        css: overrideStyles
-      }), children);
-    }))
-  );
+  }, other), jsx(Tooltip, {
+    content: getSortMessage(),
+    position: "top"
+  }, function (tooltipProps) {
+    return jsx(Button, _extends({
+      testId: "".concat(testId, "--button"),
+      spacing: "compact",
+      appearance: "subtle",
+      iconAfter: jsx(SortIcon, {
+        name: name
+      })
+    }, tooltipProps, {
+      onClick: updateSortState,
+      css: overrideStyles
+      // TODO: i18n support for this attr
+      ,
+      "aria-roledescription": "Column sort button"
+    }), children);
+  }));
 };
 export default SortableColumn;

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';
@@ -30,17 +31,17 @@ var THead = function THead(_ref) {
   }, jsx(Primitives.SelectableCell, {
     as: "th"
   }, jsx(Checkbox, {
-    "aria-labelledby": "select-all",
+    label: jsx(VisuallyHidden, {
+      id: "select-all"
+    }, "Select all rows"),
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  }), jsx(VisuallyHidden, {
-    id: "select-all"
-  }, "Select all rows")), children, isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
+  })), children, isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
     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({
@@ -40,7 +40,8 @@ export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     backgroundColor = _ref.backgroundColor,
     scope = _ref.scope,
     width = _ref.width,
-    className = _ref.className;
+    className = _ref.className,
+    sortDirection = _ref.sortDirection;
   return jsx(Box, {
     css: baseResetStyles,
     ref: ref,
@@ -53,9 +54,10 @@ export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: className,
     UNSAFE_style: width ? {
       width: width
-    } : undefined
+    } : 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/th.js

@@ -13,7 +13,8 @@ export var TH = function TH(_ref) {
     align = _ref.align,
     scope = _ref.scope,
     backgroundColor = _ref.backgroundColor,
-    width = _ref.width;
+    width = _ref.width,
+    sortDirection = _ref.sortDirection;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -23,7 +24,8 @@ export var TH = function TH(_ref) {
       align: align,
       scope: scope,
       width: width,
-      backgroundColor: backgroundColor
+      backgroundColor: backgroundColor,
+      sortDirection: sortDirection
     }, children)
   );
 };

package/dist/esm/version.json

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

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

@@ -30,9 +30,13 @@ export declare type BaseCellProps = {
      */
     children?: ReactNode;
 } & Pick<BoxProps, 'paddingBlock' | 'paddingInline' | 'backgroundColor' | 'className'>;
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort
+ */
+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";
 };
 /**
@@ -70,5 +74,7 @@ export declare const BaseCell: import("react").ForwardRefExoticComponent<{
      * Content of the cell.
      */
     children?: ReactNode;
-} & Pick<BoxProps<"div">, "className" | "backgroundColor" | "paddingBlock" | "paddingInline"> & import("react").RefAttributes<HTMLTableCellElement>>;
+} & Pick<BoxProps<"div">, "className" | "backgroundColor" | "paddingBlock" | "paddingInline"> & {
+    sortDirection?: SortDirection | undefined;
+} & import("react").RefAttributes<HTMLTableCellElement>>;
 export {};

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

@@ -1,6 +1,9 @@
 import { FC } from 'react';
-import { BaseCellProps } from './base-cell';
+import { BaseCellProps, SortDirection } from './base-cell';
 export declare type THProps = Omit<BaseCellProps, 'as'>;
+declare type InternalTHProps = THProps & {
+    sortDirection?: SortDirection;
+};
 /**
  * __Head cell__
  *
@@ -8,4 +11,5 @@ export declare type THProps = Omit<BaseCellProps, 'as'>;
  *
  * @primitive
  */
-export declare const TH: FC<THProps>;
+export declare const TH: FC<InternalTHProps>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "A table is used to display data.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -38,8 +38,9 @@
     "@atlaskit/ds-lib": "^2.1.2",
     "@atlaskit/focus-ring": "^1.2.1",
     "@atlaskit/icon": "^21.11.2",
-    "@atlaskit/tokens": "^1.0.0",
-    "@atlaskit/tooltip": "^17.5.16",
+    "@atlaskit/primitives": "^0.3.0",
+    "@atlaskit/tokens": "^1.2.0",
+    "@atlaskit/tooltip": "^17.7.0",
     "@atlaskit/visually-hidden": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -62,6 +63,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
+    "jest-axe": "^4.0.0",
     "react-dom": "^16.8.0",
     "storybook-addon-designs": "^6.3.1",
     "typescript": "4.5.5",
@@ -81,15 +83,17 @@
       "analytics": [
         "analytics-next"
       ],
+      "design-tokens": [
+        "color",
+        "spacing"
+      ],
       "theming": [
-        "react-context",
-        "tokens"
+        "react-context"
       ],
       "ui-components": [
         "lite-mode"
       ],
       "design-system": "v1",
-      "design-tokens": "spacing",
       "deprecation": [
         "no-deprecated-imports"
       ],

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';
 };
 

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";
 };
 

package/constellation/index/examples.mdx

@@ -1,19 +0,0 @@
----
-order: 0
----
-
-import BasicAKTableExample from '../../examples/composed';
-import AKTableExample from '../../examples/basic';
-
-## Basic
-
-A table is composed of simple composable elements. In its base form these UI elements are purely presentational.
-
-<Example Component={BasicAKTableExample} packageName="@atlaskit/table" />
-
-## Basic data table
-
-A data table is used to display dynamic data.
-
-<Example Component={AKTableExample} packageName="@atlaskit/table" />
-

package/constellation/index/props.mdx

@@ -1,17 +0,0 @@
-import TableProps from '!!extract-react-types-loader!../../extract-react-types/table.tsx';
-import RowProps from '!!extract-react-types-loader!../../extract-react-types/row.tsx';
-import CellProps from '!!extract-react-types-loader!../../extract-react-types/cell.tsx';
-
-## Props
-
-### Table props
-
-<PropsTable heading="" props={TableProps} />
-
-### Row props
-
-<PropsTable heading="Row props" props={RowProps} />
-
-### Cell props
-
-<PropsTable heading="Cell props" props={CellProps} />