@atlaskit/table 0.1.0

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

@@ -0,0 +1,58 @@
+/* eslint-disable @atlassian/tangerine/import/entry-points */
+
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import Box from '@atlaskit/ds-explorations/box';
+import Inline from '@atlaskit/ds-explorations/inline';
+var alignMap = {
+  text: 'flexStart',
+  number: 'flexEnd',
+  icon: 'center'
+};
+var baseResetStyles = css({
+  display: 'table-cell',
+  verticalAlign: 'middle',
+  '&:first-of-type': {
+    paddingLeft: "var(--ds-space-100, 8px)"
+  },
+  '&:last-of-type': {
+    paddingRight: "var(--ds-space-100, 8px)"
+  }
+});
+/**
+ * __BaseCell__
+ *
+ * @internal
+ *
+ * Basic cell element.
+ */
+
+export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var testId = _ref.testId,
+      as = _ref.as,
+      children = _ref.children,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'text' : _ref$align,
+      _ref$paddingBlock = _ref.paddingBlock,
+      paddingBlock = _ref$paddingBlock === void 0 ? 'scale.100' : _ref$paddingBlock,
+      _ref$paddingInline = _ref.paddingInline,
+      paddingInline = _ref$paddingInline === void 0 ? 'scale.200' : _ref$paddingInline,
+      backgroundColor = _ref.backgroundColor,
+      scope = _ref.scope,
+      className = _ref.className;
+  return jsx(Box, {
+    css: baseResetStyles,
+    ref: ref,
+    scope: scope,
+    backgroundColor: backgroundColor,
+    paddingBlock: paddingBlock,
+    paddingInline: paddingInline,
+    as: as,
+    testId: testId,
+    className: className
+  }, jsx(Inline, {
+    justifyContent: alignMap[align],
+    gap: "scale.0"
+  }, children));
+});

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

@@ -0,0 +1,28 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { UNSAFE_Box as Box, UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
+var overlayStyles = css({
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 32
+});
+/**
+ * __Bulk action overlay__
+ *
+ * A bulk action overlay is used to conditionally render when a user makes a row selection
+ */
+
+export var BulkActionOverlay = function BulkActionOverlay(_ref) {
+  var children = _ref.children;
+  return jsx(Box, {
+    as: "th",
+    position: "absolute",
+    paddingInline: "scale.100",
+    backgroundColor: "elevation.surface",
+    css: overlayStyles
+  }, jsx(Inline, {
+    gap: "scale.300",
+    alignItems: "center"
+  }, children));
+};

package/dist/esm/ui/index.js

@@ -0,0 +1,11 @@
+/**
+ * File exposes the HTML table primitives for use
+ */
+export { Table } from './table';
+export { TBody } from './tbody';
+export { TR } from './tr';
+export { TD } from './td';
+export { TH } from './th';
+export { SelectableCell } from './selectable-cell';
+export { THead } from './thead';
+export { BulkActionOverlay } from './bulk-action-overlay';

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

@@ -0,0 +1,28 @@
+/** @jsx jsx */
+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'
+  }
+});
+/**
+ * __Selectable cell__
+ *
+ * A selectable cell primitive designed to be used for light weight composition.
+ */
+
+export var SelectableCell = function SelectableCell(_ref) {
+  var children = _ref.children,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? 'td' : _ref$as;
+  return jsx(BaseCell, {
+    as: as,
+    css: spacingStyles
+  }, children);
+};

package/dist/esm/ui/table.js

@@ -0,0 +1,21 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+/**
+ * __Table__
+ *
+ * A primitive table container. Applies the HTML native element with no other styling.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ *
+ * @primitive
+ * @see https://hello.atlassian.net/wiki/spaces/DST/pages/1947062524/Dynamic+table+2.0+implementation+spec
+ */
+export var Table = function Table(_ref) {
+  var children = _ref.children,
+      testId = _ref.testId,
+      summary = _ref.summary;
+  return jsx("table", {
+    "data-testid": testId
+  }, summary && jsx("caption", null, summary), children);
+};

package/dist/esm/ui/tbody.js

@@ -0,0 +1,27 @@
+/* eslint-disable @repo/internal/react/no-clone-element */
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+var bodyStyles = css({
+  position: 'relative',
+  border: 'none',
+  '&:after': {
+    position: 'absolute',
+    boxShadow: "inset 0 -2px 0 0 ".concat("var(--ds-border, #eee)"),
+    content: "''",
+    inset: 0,
+    pointerEvents: 'none'
+  }
+});
+/**
+ * __TBody__
+ * @primitive
+ */
+
+export var TBody = function TBody(_ref) {
+  var children = _ref.children;
+  return jsx("tbody", {
+    css: bodyStyles
+  }, children);
+};
+export default TBody;

package/dist/esm/ui/td.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["testId"];
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { BaseCell } from './base-cell';
+/**
+ * __Cell__
+ *
+ * A data cell.
+ *
+ * @primitive
+ */
+
+export var TD = function TD(_ref) {
+  var testId = _ref.testId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(BaseCell, _extends({
+      as: "td",
+      testId: testId
+    }, props))
+  );
+};

package/dist/esm/ui/th.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { BaseCell } from './base-cell';
+
+/**
+ * __Head cell__
+ *
+ * A head cell.
+ *
+ * @primitive
+ */
+export var TH = function TH(_ref) {
+  var children = _ref.children,
+      testId = _ref.testId,
+      align = _ref.align,
+      scope = _ref.scope,
+      backgroundColor = _ref.backgroundColor;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    React.createElement(BaseCell, {
+      as: "th",
+      testId: testId,
+      align: align,
+      scope: scope,
+      backgroundColor: backgroundColor
+    }, children)
+  );
+};

package/dist/esm/ui/thead.js

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+var baseStyles = css({
+  position: 'sticky',
+  zIndex: 1,
+  backgroundColor: "var(--ds-surface, white)",
+  border: 'none',
+  inset: 0,
+  '&:after': {
+    position: 'absolute',
+    boxShadow: "inset 0 -2px 0 0 ".concat("var(--ds-border, #eee)"),
+    content: "''",
+    inset: 0,
+    pointerEvents: 'none'
+  }
+});
+/**
+ * __THead__
+ *
+ * A primitive table head container. Applies the HTML native element with minimal styling.
+ *
+ * @primitive
+ */
+
+export var THead = function THead(_ref) {
+  var children = _ref.children;
+  return jsx("thead", {
+    css: baseStyles
+  }, children);
+};

package/dist/esm/ui/tr.js

@@ -0,0 +1,55 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import FocusRing from '@atlaskit/focus-ring';
+var baseStyles = css({
+  height: 48,
+  position: 'relative',
+  border: 'none',
+  borderImageWidth: 0,
+  borderSpacing: 0
+});
+var selectedStyles = css({
+  backgroundColor: "var(--ds-background-selected, #DEEBFF88)",
+  '&:hover': {
+    backgroundColor: "var(--ds-background-selected-hovered, #DEEBFF)" // B50
+
+  }
+});
+var bodyRowStyles = css({
+  '&:hover': {
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #f8f8f8)"
+  },
+  '&:focus-visible::after': {
+    boxShadow: 'none'
+  },
+  '&:after': {
+    position: 'absolute',
+    boxShadow: "inset 0 -1px 0 0 ".concat("var(--ds-border, #eee)"),
+    content: "''",
+    inset: 0,
+    pointerEvents: 'none'
+  }
+});
+
+/**
+ * __Row__
+ *
+ * A row primitive.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ */
+export var TR = function TR(_ref) {
+  var children = _ref.children,
+      testId = _ref.testId,
+      isSelected = _ref.isSelected,
+      _ref$isBodyRow = _ref.isBodyRow,
+      isBodyRow = _ref$isBodyRow === void 0 ? true : _ref$isBodyRow;
+  return jsx(FocusRing, {
+    isInset: true
+  }, jsx("tr", {
+    tabIndex: -1,
+    "aria-selected": isSelected,
+    "data-testid": testId,
+    css: [baseStyles, isBodyRow && bodyRowStyles, isSelected && selectedStyles]
+  }, children));
+};

package/dist/esm/version.json

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

package/dist/types/body.d.ts

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { ReactElement } from 'react';
+import { jsx } from '@emotion/react';
+declare type BodyProps<Item extends object> = {
+    rows: Item[];
+    children: (row: Item) => ReactElement;
+} | {
+    rows?: never;
+    children: ReactElement[] | ReactElement;
+};
+/**
+ * __Table body__
+ */
+declare function TBody<ObjectType extends object>({ rows, children, }: BodyProps<ObjectType>): jsx.JSX.Element;
+export default TBody;

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

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

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

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+/**
+ * __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;
+export declare const useSelection: () => readonly [{
+    checked: number[];
+    allChecked: boolean;
+    anyChecked: boolean;
+    maxChecked: number;
+    selectionStart: number;
+    previousSelection: number[];
+}, {
+    readonly setAll: () => void;
+    readonly removeAll: () => void;
+    readonly toggleSelection: (id: number, shiftHeld: boolean) => void;
+    readonly setMax: (max: number) => void;
+}];
+export default SelectionProvider;

package/dist/types/hooks/use-row-id.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * @internal
+ */
+export declare const useRowId: () => number | undefined;
+/**
+ * __Row provider__
+ * @internal
+ */
+export declare const RowProvider: import("react").Provider<number | undefined>;

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

@@ -0,0 +1,14 @@
+declare function useSelectable(): readonly [{
+    checked: number[];
+    allChecked: boolean;
+    anyChecked: boolean;
+    maxChecked: number;
+    selectionStart: number;
+    previousSelection: number[];
+}, {
+    readonly setAll: () => void;
+    readonly removeAll: () => void;
+    readonly toggleSelection: (id: number, shiftHeld: boolean) => void;
+    readonly setMax: (max: number) => void;
+}];
+export default useSelectable;

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

@@ -0,0 +1,6 @@
+import { SortDirection, SortKey } from './use-table';
+export declare const useSorting: <ItemType extends object>(sortKey: SortKey<keyof ItemType>) => {
+    sortKey: "unset" | keyof ItemType;
+    sortDirection: SortDirection | undefined;
+    setSortState: (key: SortKey<keyof ItemType>) => void;
+};

package/dist/types/hooks/use-table-body.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * __Table body provider__
+ * Ensures correct nesting of table elements.
+ */
+export declare const TableBodyProvider: import("react").Provider<boolean>;
+export declare const useTableBody: () => void;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare type SortDirection = 'ascending' | 'descending';
+export declare type SortKey<Key extends string | symbol | number> = Key | 'unset';
+export declare type TableContext<T, K extends keyof T = keyof T> = {
+    isSelectable?: boolean;
+    sortKey: SortKey<K>;
+    sortDirection?: SortDirection;
+    setSortState: (key: SortKey<K>) => void;
+};
+/**
+ * __Table state provider__
+ *
+ * The table context provides the data required for more complex functionality.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ */
+export declare function TableProvider<T extends object>({ children, state, }: {
+    children: React.ReactNode;
+    state: TableContext<T>;
+}): JSX.Element;
+export declare const useTable: <TableItem extends object>() => TableContext<TableItem, keyof TableItem>;

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+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 HeadCell } from './head-cell';
+export { default as SortableColumn } from './sortable-column';
+export { default as THead } from './thead';

package/dist/types/row.d.ts

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { FC } from 'react';
+export declare type RowProps = {
+    testId?: string;
+};
+/**
+ * __Row__
+ *
+ * A table row.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ */
+declare const Row: FC<RowProps>;
+export default Row;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: import("react").NamedExoticComponent<{}>;
+export default _default;

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

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { FC } from 'react';
+export interface CellProps {
+    /**
+     * Unique key used for sorting table data by this column
+     */
+    name: string;
+    testId?: string;
+    onClick?: React.MouseEventHandler;
+}
+/**
+ * __SortableColumn__
+ *
+ * SortableColumn is used in place of the default Column when sorting is desired.
+ */
+declare const SortableColumn: FC<CellProps>;
+export default SortableColumn;

package/dist/types/table.d.ts

@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import { ReactElement } from 'react';
+import { jsx } from '@emotion/react';
+import { SortKey } from './hooks/use-table';
+export declare type TableProps<ItemType extends object = {}> = {
+    testId?: string;
+    /**
+     * default sort key to be applied. If unspecified will use default ordering
+     */
+    sortKey?: SortKey<keyof ItemType>;
+    children: ReactElement[] | ReactElement;
+} & ({
+    isSelectable: true;
+    defaultSelected?: number;
+} | {
+    isSelectable?: false;
+});
+/**
+ * __Table__
+ *
+ * A data table is used to display dynamic data.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ */
+declare function Table<ItemType extends object = object>({ children, isSelectable, sortKey, testId, }: TableProps<ItemType>): jsx.JSX.Element;
+export default Table;

package/dist/types/thead.d.ts

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

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

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { BoxProps } from '@atlaskit/ds-explorations/box';
+export declare type BaseCellProps = {
+    align?: keyof typeof alignMap;
+    as?: 'td' | 'th';
+    scope?: 'col' | 'row';
+    testId?: string;
+    children?: ReactNode;
+} & Pick<BoxProps, 'paddingBlock' | 'paddingInline' | 'backgroundColor' | 'className'>;
+declare const alignMap: {
+    readonly text: "flexStart";
+    readonly number: "flexEnd";
+    readonly icon: "center";
+};
+/**
+ * __BaseCell__
+ *
+ * @internal
+ *
+ * Basic cell element.
+ */
+export declare const BaseCell: import("react").ForwardRefExoticComponent<{
+    align?: "number" | "text" | "icon" | undefined;
+    as?: "td" | "th" | undefined;
+    scope?: "col" | "row" | undefined;
+    testId?: string | undefined;
+    children?: ReactNode;
+} & Pick<BoxProps<"div">, "className" | "backgroundColor" | "paddingBlock" | "paddingInline"> & import("react").RefAttributes<HTMLTableCellElement>>;
+export {};

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

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { FC } 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;

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

@@ -0,0 +1,11 @@
+/**
+ * File exposes the HTML table primitives for use
+ */
+export { Table } from './table';
+export { TBody } from './tbody';
+export { TR } from './tr';
+export { TD } from './td';
+export { TH } from './th';
+export { SelectableCell } from './selectable-cell';
+export { THead } from './thead';
+export { BulkActionOverlay } from './bulk-action-overlay';

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

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

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

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { FC } from 'react';
+declare type TableProps = {
+    testId?: string;
+    /**
+     * Accessible description of the table data.
+     *
+     * @see https://www.w3.org/WAI/EO/Drafts/tutorials/tables/summary/
+     */
+    summary?: string;
+};
+/**
+ * __Table__
+ *
+ * A primitive table container. Applies the HTML native element with no other styling.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ *
+ * @primitive
+ * @see https://hello.atlassian.net/wiki/spaces/DST/pages/1947062524/Dynamic+table+2.0+implementation+spec
+ */
+export declare const Table: FC<TableProps>;
+export {};

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

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

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

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { BaseCellProps } from './base-cell';
+/**
+ * __Cell__
+ *
+ * A data cell.
+ *
+ * @primitive
+ */
+export declare const TD: FC<Omit<BaseCellProps, 'as'>>;

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

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { BaseCellProps } from './base-cell';
+export declare type THProps = Omit<BaseCellProps, 'as'>;
+/**
+ * __Head cell__
+ *
+ * A head cell.
+ *
+ * @primitive
+ */
+export declare const TH: FC<THProps>;

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

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { FC } from 'react';
+/**
+ * __THead__
+ *
+ * A primitive table head container. Applies the HTML native element with minimal styling.
+ *
+ * @primitive
+ */
+export declare const THead: FC;