@atlaskit/table 0.2.8 → 0.3.0

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

@@ -3,12 +3,6 @@
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import Box from '@atlaskit/ds-explorations/box';
-import Inline from '@atlaskit/primitives/inline';
-var alignMap = {
-  text: 'start',
-  number: 'end',
-  icon: 'center'
-};
 var baseResetStyles = css({
   display: 'table-cell',
   verticalAlign: 'middle',
@@ -19,6 +13,20 @@ var baseResetStyles = css({
     paddingRight: "var(--ds-space-100, 8px)"
   }
 });
+var alignLeftStyles = css({
+  textAlign: 'left'
+});
+var alignCenterStyles = css({
+  textAlign: 'center'
+});
+var alignRightStyles = css({
+  textAlign: 'right'
+});
+var alignMap = {
+  text: alignLeftStyles,
+  number: alignRightStyles,
+  icon: alignCenterStyles
+};
 
 /**
  * __BaseCell__
@@ -36,14 +44,15 @@ export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$paddingBlock = _ref.paddingBlock,
     paddingBlock = _ref$paddingBlock === void 0 ? 'space.100' : _ref$paddingBlock,
     _ref$paddingInline = _ref.paddingInline,
-    paddingInline = _ref$paddingInline === void 0 ? 'space.200' : _ref$paddingInline,
+    paddingInline = _ref$paddingInline === void 0 ? 'space.100' : _ref$paddingInline,
     backgroundColor = _ref.backgroundColor,
     scope = _ref.scope,
     width = _ref.width,
     className = _ref.className,
-    sortDirection = _ref.sortDirection;
+    sortDirection = _ref.sortDirection,
+    colSpan = _ref.colSpan;
   return jsx(Box, {
-    css: baseResetStyles,
+    css: [baseResetStyles, alignMap[align]],
     ref: ref,
     scope: scope,
     backgroundColor: backgroundColor,
@@ -55,9 +64,7 @@ export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     UNSAFE_style: width ? {
       width: width
     } : undefined,
-    "aria-sort": sortDirection
-  }, jsx(Inline, {
-    alignInline: alignMap[align],
-    space: "0"
-  }, children));
+    "aria-sort": sortDirection,
+    colSpan: colSpan
+  }, children);
 });

package/dist/esm/ui/expand-icon.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-unused-vars */
+/** @jsx jsx */
+import { memo } from 'react';
+import { jsx } from '@emotion/react';
+
+// TODO: Using HipChat icons as the standard icon set is missing large
+// versions of `chevron-up` and `chevron-down`, despite already including
+// `chevron-left-large` and `chevron-right-large`...
+import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
+
+/**
+ * __Expand icon__
+ *
+ * An icon used to display the expanded state in an `<ExpandableCell>`.
+ */
+export var ExpandIcon = /*#__PURE__*/memo(function (_ref) {
+  var isExpanded = _ref.isExpanded;
+  switch (isExpanded) {
+    case true:
+      return jsx(ChevronUpIcon, {
+        size: "small",
+        label: "",
+        primaryColor: "inherit"
+      });
+    case false:
+      return jsx(ChevronDownIcon, {
+        size: "small",
+        label: "",
+        primaryColor: "inherit"
+      });
+  }
+});

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

@@ -0,0 +1,21 @@
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
+import { BaseCell } from './base-cell';
+var spacingStyles = css({
+  width: 24,
+  padding: "var(--ds-space-0, 0px)"
+});
+/**
+ * __Expandable cell__
+ *
+ * An expandable cell primitive designed to be used for light weight composition.
+ */
+export var ExpandableCell = function ExpandableCell(_ref) {
+  var children = _ref.children,
+    as = _ref.as;
+  return jsx(BaseCell, {
+    as: as,
+    css: spacingStyles
+  }, children);
+};

package/dist/esm/ui/index.js

@@ -7,6 +7,8 @@ export { TR } from './tr';
 export { TD } from './td';
 export { TH } from './th';
 export { SelectableCell } from './selectable-cell';
+export { ExpandableCell } from './expandable-cell';
+export { ExpandIcon } from './expand-icon';
 export { THead } from './thead';
 export { BulkActionOverlay } from './bulk-action-overlay';
 export { SortIcon } from './sort-icon';

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

@@ -4,13 +4,7 @@ import { css, jsx } from '@emotion/react';
 import { BaseCell } from './base-cell';
 var spacingStyles = css({
   width: 32,
-  padding: "var(--ds-space-0, 0px)",
-  paddingLeft: "var(--ds-space-100, 8px)",
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  '& + *': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-    paddingLeft: '8px !important'
-  }
+  padding: "var(--ds-space-0, 0px)"
 });
 /**
  * __Selectable cell__
@@ -19,8 +13,7 @@ var spacingStyles = css({
  */
 export var SelectableCell = function SelectableCell(_ref) {
   var children = _ref.children,
-    _ref$as = _ref.as,
-    as = _ref$as === void 0 ? 'td' : _ref$as;
+    as = _ref.as;
   return jsx(BaseCell, {
     as: as,
     css: spacingStyles

package/dist/esm/ui/th.js

@@ -15,17 +15,13 @@ export var TH = function TH(_ref) {
     backgroundColor = _ref.backgroundColor,
     width = _ref.width,
     sortDirection = _ref.sortDirection;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    React.createElement(BaseCell, {
-      as: "th",
-      testId: testId,
-      align: align,
-      scope: scope,
-      width: width,
-      backgroundColor: backgroundColor,
-      sortDirection: sortDirection
-    }, children)
-  );
+  return /*#__PURE__*/React.createElement(BaseCell, {
+    as: "th",
+    testId: testId,
+    align: align,
+    scope: scope,
+    width: width,
+    backgroundColor: backgroundColor,
+    sortDirection: sortDirection
+  }, children);
 };

package/dist/esm/ui/tr.js

@@ -16,6 +16,9 @@ var selectedStyles = css({
   }
 });
 
+var subitemStyles = css({
+  backgroundColor: "var(--ds-background-neutral, #091E420F)"
+});
 var bodyRowStyles = css({
   borderBottom: "1px solid ".concat("var(--ds-border, #eee)"),
   '&:hover': {
@@ -37,13 +40,14 @@ export var TR = function TR(_ref) {
     testId = _ref.testId,
     isSelected = _ref.isSelected,
     _ref$isBodyRow = _ref.isBodyRow,
-    isBodyRow = _ref$isBodyRow === void 0 ? true : _ref$isBodyRow;
+    isBodyRow = _ref$isBodyRow === void 0 ? true : _ref$isBodyRow,
+    isSubitem = _ref.isSubitem;
   return jsx(FocusRing, {
     isInset: true
   }, jsx("tr", {
     tabIndex: -1,
     "aria-selected": isSelected,
     "data-testid": testId,
-    css: [baseStyles, isBodyRow && bodyRowStyles, isSelected && selectedStyles]
+    css: [baseStyles, isBodyRow && bodyRowStyles, isSelected && selectedStyles, isSubitem && subitemStyles]
   }, children));
 };

package/dist/esm/version.json

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

package/dist/types/expandable-cell.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+/**
+ * __Expandable cell__
+ *
+ * A cell with an expand button that controls the expanded state
+ * of the `<ExpandableRow>`.
+ */
+declare const ExpandableCell: import("react").MemoExoticComponent<() => jsx.JSX.Element>;
+export default ExpandableCell;

package/dist/types/expandable-row-content.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type ExpandableRowContentProps = {
+    children?: React.ReactNode;
+};
+/**
+ * __Expandable row content__
+ *
+ * Contains expandable content. Uses a context provider to allow children
+ * to identify if they are expandable content.
+ */
+declare const ExpandableRowContent: ({ children }: ExpandableRowContentProps) => JSX.Element;
+export default ExpandableRowContent;

package/dist/types/expandable-row.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+declare type ExpandableRowProps = {
+    children: React.ReactNode;
+    /**
+     * Controlled: If the row is expanded.
+     */
+    isExpanded?: boolean;
+    /**
+     * Uncontrolled: If the row is expanded by default.
+     */
+    isDefaultExpanded?: boolean;
+};
+/**
+ * __Expandable row__
+ *
+ * A context provider for `<Row>` to support expandable content.
+ */
+declare const ExpandableRow: ({ children, isExpanded, isDefaultExpanded, }: ExpandableRowProps) => JSX.Element;
+export default ExpandableRow;

package/dist/types/head-cell.d.ts

@@ -1,10 +1,10 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import type { FC } from 'react';
 import { THProps } from './ui/th';
 /**
  * __HeadCell__
  *
  * HeadCell element
  */
-declare const Column: FC<THProps>;
-export default Column;
+declare const HeadCell: FC<THProps>;
+export default HeadCell;

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

@@ -12,10 +12,6 @@ declare const SelectionContext: React.Context<SelectionContext>;
  * __Selection provider__
  *
  * A selection provider injects selection specific state into the table.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
 declare const SelectionProvider: FC<{
     children: ReactNode;

package/dist/types/hooks/use-expand-content.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+declare type ExpandContentContext = {
+    isExpandableContent: boolean;
+};
+declare const ExpandContentContext: React.Context<ExpandContentContext>;
+/**
+ * __Expand content provider__
+ *
+ * An expand content provider allows `<Row>` to determine if it is a subitem.
+ */
+export declare const ExpandContentContextProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+declare const useExpandContent: () => ExpandContentContext;
+export default useExpandContent;

package/dist/types/hooks/use-expand.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type ExpandContextState = {
+    isExpanded: boolean;
+    toggleExpanded(): void;
+};
+/**
+ * __Expand context provider__
+ *
+ * An expand context provider.
+ */
+export declare const ExpandContextProvider: ({ children, isExpanded: isExpandedProp, isDefaultExpanded, }: {
+    children: React.ReactNode;
+    isExpanded?: boolean | undefined;
+    isDefaultExpanded?: boolean | undefined;
+}) => JSX.Element;
+declare const useExpand: () => ExpandContextState;
+export default useExpand;

package/dist/types/index.d.ts

@@ -2,6 +2,9 @@ export { default } from './table';
 export { default as TBody } from './body';
 export { default as Row } from './row';
 export { TD as Cell } from './ui';
+export { default as ExpandableCell } from './expandable-cell';
+export { default as ExpandableRow } from './expandable-row';
+export { default as ExpandableRowContent } from './expandable-row-content';
 export { default as HeadCell } from './head-cell';
 export { default as SortableColumn } from './sortable-column';
 export { default as THead } from './thead';

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

@@ -29,15 +29,19 @@ export declare type BaseCellProps = {
      * Content of the cell.
      */
     children?: ReactNode;
+    /**
+     * Number of columns to span.
+     */
+    colSpan?: number;
 } & 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: "start";
-    readonly number: "end";
-    readonly icon: "center";
+    readonly text: import("@emotion/react").SerializedStyles;
+    readonly number: import("@emotion/react").SerializedStyles;
+    readonly icon: import("@emotion/react").SerializedStyles;
 };
 /**
  * __BaseCell__
@@ -74,6 +78,10 @@ export declare const BaseCell: import("react").ForwardRefExoticComponent<{
      * Content of the cell.
      */
     children?: ReactNode;
+    /**
+     * Number of columns to span.
+     */
+    colSpan?: number | undefined;
 } & Pick<BoxProps<"div">, "className" | "backgroundColor" | "paddingBlock" | "paddingInline"> & {
     sortDirection?: SortDirection | undefined;
 } & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/types/ui/expand-icon.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+/**
+ * __Expand icon__
+ *
+ * An icon used to display the expanded state in an `<ExpandableCell>`.
+ */
+export declare const ExpandIcon: import("react").MemoExoticComponent<({ isExpanded }: {
+    isExpanded: boolean;
+}) => jsx.JSX.Element>;

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

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+declare type ExpandableCellProps = {
+    as: 'td' | 'th';
+    children?: ReactNode;
+};
+/**
+ * __Expandable cell__
+ *
+ * An expandable cell primitive designed to be used for light weight composition.
+ */
+export declare const ExpandableCell: ({ children, as }: ExpandableCellProps) => jsx.JSX.Element;
+export {};

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

@@ -7,6 +7,8 @@ export { TR } from './tr';
 export { TD } from './td';
 export { TH } from './th';
 export { SelectableCell } from './selectable-cell';
+export { ExpandableCell } from './expandable-cell';
+export { ExpandIcon } from './expand-icon';
 export { THead } from './thead';
 export { BulkActionOverlay } from './bulk-action-overlay';
 export { SortIcon } from './sort-icon';

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

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

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import type { FC } from 'react';
 import { BaseCellProps } from './base-cell';
 /**
  * __Cell__

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 /**
  * __THead__
  *

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 interface TRProps {
     /**
      * A `testId` prop is a unique string that appears as a data attribute `data-testid`
@@ -18,6 +18,10 @@ interface TRProps {
      * Content of the row.
      */
     children?: ReactNode;
+    /**
+     * If the row is a subitem (an expandable row nested under a parent).
+     */
+    isSubitem?: boolean;
 }
 /**
  * __Row__

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "A table is used to display data.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -57,6 +57,7 @@
     "@atlaskit/ds-lib": "*",
     "@atlaskit/dynamic-table": "*",
     "@atlaskit/lozenge": "*",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",

package/report.api.md

@@ -15,17 +15,22 @@
 <!--SECTION START: Main Entry Types-->
 
 ```ts
+/// <reference types="react" />
+
 import { BoxProps } from '@atlaskit/ds-explorations/box';
 import { FC } from 'react';
 import { jsx } from '@emotion/react';
+import { MemoExoticComponent } from 'react';
+import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
+import { SerializedStyles } from '@emotion/react';
 
 // @public (undocumented)
 const alignMap: {
-  readonly text: 'start';
-  readonly number: 'end';
-  readonly icon: 'center';
+  readonly text: SerializedStyles;
+  readonly number: SerializedStyles;
+  readonly icon: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -36,6 +41,7 @@ type BaseCellProps = {
   scope?: 'col' | 'row';
   testId?: string;
   children?: ReactNode;
+  colSpan?: number;
 } & Pick<
   BoxProps,
   'backgroundColor' | 'className' | 'paddingBlock' | 'paddingInline'
@@ -65,6 +71,33 @@ interface CellProps {
   testId?: string;
 }
 
+// @public
+export const ExpandableCell: MemoExoticComponent<() => jsx.JSX.Element>;
+
+// @public
+export const ExpandableRow: ({
+  children,
+  isExpanded,
+  isDefaultExpanded,
+}: ExpandableRowProps) => JSX.Element;
+
+// @public
+export const ExpandableRowContent: ({
+  children,
+}: ExpandableRowContentProps) => JSX.Element;
+
+// @public (undocumented)
+type ExpandableRowContentProps = {
+  children?: React_2.ReactNode;
+};
+
+// @public (undocumented)
+type ExpandableRowProps = {
+  children: React_2.ReactNode;
+  isExpanded?: boolean;
+  isDefaultExpanded?: boolean;
+};
+
 // @public
 export const HeadCell: FC<THProps>;
 

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

@@ -4,17 +4,22 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import { BoxProps } from '@atlaskit/ds-explorations/box';
 import { FC } from 'react';
 import { jsx } from '@emotion/react';
+import { MemoExoticComponent } from 'react';
+import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
+import { SerializedStyles } from '@emotion/react';
 
 // @public (undocumented)
 const alignMap: {
-    readonly text: "start";
-    readonly number: "end";
-    readonly icon: "center";
+    readonly text: SerializedStyles;
+    readonly number: SerializedStyles;
+    readonly icon: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -25,6 +30,7 @@ type BaseCellProps = {
     scope?: 'col' | 'row';
     testId?: string;
     children?: ReactNode;
+    colSpan?: number;
 } & Pick<BoxProps, 'backgroundColor' | 'className' | 'paddingBlock' | 'paddingInline'>;
 
 // @public (undocumented)
@@ -49,6 +55,27 @@ interface CellProps {
     testId?: string;
 }
 
+// @public
+export const ExpandableCell: MemoExoticComponent<() => jsx.JSX.Element>;
+
+// @public
+export const ExpandableRow: ({ children, isExpanded, isDefaultExpanded, }: ExpandableRowProps) => JSX.Element;
+
+// @public
+export const ExpandableRowContent: ({ children }: ExpandableRowContentProps) => JSX.Element;
+
+// @public (undocumented)
+type ExpandableRowContentProps = {
+    children?: React_2.ReactNode;
+};
+
+// @public (undocumented)
+type ExpandableRowProps = {
+    children: React_2.ReactNode;
+    isExpanded?: boolean;
+    isDefaultExpanded?: boolean;
+};
+
 // @public
 export const HeadCell: FC<THProps>;