@atlaskit/table 0.1.0 → 0.1.2

package/dist/esm/row.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { useSelection } from './hooks/selection-provider';
 import { useRowId } from './hooks/use-row-id';
@@ -23,24 +23,26 @@ var Row = /*#__PURE__*/memo(function (_ref) {
   // To ensure valid nesting
   useTableBody(); // to access table state
 
-  var table = useTable();
+  var _useTable = useTable(),
+      isSelectable = _useTable.isSelectable;
 
   var _useSelection = useSelection(),
       _useSelection2 = _slicedToArray(_useSelection, 1),
-      selectionState = _useSelection2[0];
+      _useSelection2$ = _useSelection2[0],
+      allChecked = _useSelection2$.allChecked,
+      checked = _useSelection2$.checked;
 
   var rowId = useRowId();
+  var isSelected = useMemo(function () {
+    if (!isSelectable) {
+      return undefined;
+    }
 
-  if (!table.isSelectable) {
-    return jsx(Primitives.TR, {
-      testId: testId
-    }, children);
-  }
-
-  var isChecked = selectionState.allChecked || selectionState.checked.includes(rowId);
+    return allChecked || checked.includes(rowId);
+  }, [allChecked, checked, isSelectable, rowId]);
   return jsx(Primitives.TR, {
-    isSelected: !!isChecked,
+    isSelected: isSelected,
     testId: testId
-  }, jsx(SelectableCell, null), children);
+  }, isSelectable && jsx(SelectableCell, null), children);
 });
 export default Row;

package/dist/esm/selectable-cell.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import Checkbox from '@atlaskit/checkbox';
 import { useSelection } from './hooks/selection-provider';
@@ -11,15 +11,18 @@ import * as Primitives from './ui';
 var SelectableCell = function SelectableCell() {
   var _useSelection = useSelection(),
       _useSelection2 = _slicedToArray(_useSelection, 2),
-      state = _useSelection2[0],
+      _useSelection2$ = _useSelection2[0],
+      allChecked = _useSelection2$.allChecked,
+      checked = _useSelection2$.checked,
       toggleSelection = _useSelection2[1].toggleSelection;
 
   var idx = useRowId();
-  var isChecked = state.allChecked || state.checked.includes(idx);
+  var isChecked = useMemo(function () {
+    return allChecked || checked.includes(idx);
+  }, [allChecked, checked, idx]);
   var onChange = useCallback(function (e) {
-    return toggleSelection(idx, e.nativeEvent.shiftKey);
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [idx]);
+    return toggleSelection === null || toggleSelection === void 0 ? void 0 : toggleSelection(idx, e.nativeEvent.shiftKey);
+  }, [idx, toggleSelection]);
   return jsx(Primitives.SelectableCell, {
     as: "td"
   }, jsx(Checkbox, {

package/dist/esm/sortable-column.js

@@ -5,13 +5,12 @@ var _excluded = ["name", "testId", "onClick", "children"];
 /* eslint-disable no-unused-vars */
 
 /** @jsx jsx */
+import { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button';
-import ArrowDownIcon from '@atlaskit/icon/glyph/arrow-down';
-import ArrowUpIcon from '@atlaskit/icon/glyph/arrow-up';
 import Tooltip from '@atlaskit/tooltip';
 import { useTable } from './hooks/use-table';
-import { TH } from './ui';
+import { SortIcon, TH } from './ui';
 
 /**
  * TODO these need to be i18n supported
@@ -64,31 +63,10 @@ var SortableColumn = function SortableColumn(_ref) {
     return sortingMessages.unsorted.string;
   };
 
-  var getSortIcon = function getSortIcon() {
-    if (sortKey === name) {
-      switch (sortDirection) {
-        case undefined:
-          return undefined;
-
-        case 'ascending':
-          return jsx(ArrowUpIcon, {
-            size: "small",
-            label: "",
-            primaryColor: "inherit"
-          });
-
-        case 'descending':
-          return jsx(ArrowDownIcon, {
-            size: "small",
-            label: "",
-            primaryColor: "inherit"
-          });
-      }
-    }
-
-    return undefined;
-  };
-
+  var updateSortState = useCallback( // @ts-expect-error: TODO: Our `name` typing is off; refer to `SortKey`
+  function () {
+    return setSortState(name);
+  }, [setSortState, name]);
   return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     jsx(TH, _extends({
       testId: testId
@@ -99,12 +77,11 @@ var SortableColumn = function SortableColumn(_ref) {
       return jsx(Button, _extends({
         spacing: "compact",
         appearance: "subtle",
-        iconAfter: getSortIcon()
+        iconAfter: jsx(SortIcon, {
+          name: name
+        })
       }, tooltipProps, {
-        // @ts-expect-error
-        onClick: function onClick() {
-          return setSortState(name);
-        },
+        onClick: updateSortState,
         css: overrideStyles
       }), children);
     }))

package/dist/esm/table.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import { useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import SelectionProvider from './hooks/selection-provider';
 import { useSorting } from './hooks/use-sorting';
@@ -22,15 +23,20 @@ function Table(_ref) {
   var _useSorting = useSorting(sortKey),
       localSortKey = _useSorting.sortKey,
       sortDirection = _useSorting.sortDirection,
-      setSortState = _useSorting.setSortState;
+      setSortState = _useSorting.setSortState,
+      sortFn = _useSorting.sortFn;
 
-  return jsx(TableProvider, {
-    state: {
+  var tableProviderState = useMemo(function () {
+    return {
       isSelectable: isSelectable,
       sortKey: localSortKey,
       sortDirection: sortDirection,
-      setSortState: setSortState
-    }
+      setSortState: setSortState,
+      sortFn: sortFn
+    };
+  }, [isSelectable, localSortKey, setSortState, sortDirection, sortFn]);
+  return jsx(TableProvider, {
+    state: tableProviderState
   }, jsx(Primitives.Table, {
     testId: testId
   }, isSelectable ? jsx(SelectionProvider, null, children) : children));

package/dist/esm/thead.js

@@ -12,7 +12,9 @@ import * as Primitives from './ui';
 var THead = function THead(_ref) {
   var actions = _ref.actions,
       children = _ref.children;
-  var table = useTable();
+
+  var _useTable = useTable(),
+      isSelectable = _useTable.isSelectable;
 
   var _useSelection = useSelection(),
       _useSelection2 = _slicedToArray(_useSelection, 2),
@@ -21,14 +23,13 @@ var THead = function THead(_ref) {
       setAll = _useSelection2$.setAll,
       removeAll = _useSelection2$.removeAll;
 
-  var isChecked = state.allChecked || state.anyChecked;
-
-  if (!table.isSelectable) {
+  if (!isSelectable) {
     return jsx(Primitives.THead, null, jsx(Primitives.TR, {
       isBodyRow: false
     }, children));
   }
 
+  var isChecked = state.allChecked || state.anyChecked;
   return jsx(Primitives.THead, null, jsx(Primitives.TR, {
     isBodyRow: false
   }, jsx(Primitives.SelectableCell, {

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

@@ -40,6 +40,7 @@ export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
       paddingInline = _ref$paddingInline === void 0 ? 'scale.200' : _ref$paddingInline,
       backgroundColor = _ref.backgroundColor,
       scope = _ref.scope,
+      width = _ref.width,
       className = _ref.className;
   return jsx(Box, {
     css: baseResetStyles,
@@ -50,7 +51,10 @@ export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     paddingInline: paddingInline,
     as: as,
     testId: testId,
-    className: className
+    className: className,
+    UNSAFE_style: width ? {
+      width: width
+    } : undefined
   }, jsx(Inline, {
     justifyContent: alignMap[align],
     gap: "scale.0"

package/dist/esm/ui/index.js

@@ -8,4 +8,5 @@ export { TD } from './td';
 export { TH } from './th';
 export { SelectableCell } from './selectable-cell';
 export { THead } from './thead';
-export { BulkActionOverlay } from './bulk-action-overlay';
+export { BulkActionOverlay } from './bulk-action-overlay';
+export { SortIcon } from './sort-icon';

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

@@ -0,0 +1,41 @@
+/* eslint-disable no-unused-vars */
+
+/** @jsx jsx */
+import { memo } from 'react';
+import { jsx } from '@emotion/react';
+import ArrowDownIcon from '@atlaskit/icon/glyph/arrow-down';
+import ArrowUpIcon from '@atlaskit/icon/glyph/arrow-up';
+import { useTable } from '../hooks/use-table';
+/**
+ * __SortIcon__
+ *
+ * SortIcon is used to display the sort state in our SortableColumn.
+ */
+
+export var SortIcon = /*#__PURE__*/memo(function (_ref) {
+  var name = _ref.name;
+
+  var _useTable = useTable(),
+      sortKey = _useTable.sortKey,
+      sortDirection = _useTable.sortDirection;
+
+  if (sortKey === name) {
+    switch (sortDirection) {
+      case 'ascending':
+        return jsx(ArrowUpIcon, {
+          size: "small",
+          label: "",
+          primaryColor: "inherit"
+        });
+
+      case 'descending':
+        return jsx(ArrowDownIcon, {
+          size: "small",
+          label: "",
+          primaryColor: "inherit"
+        });
+    }
+  }
+
+  return null;
+});

package/dist/esm/ui/th.js

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

package/dist/esm/version.json

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

package/dist/types/body.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { ReactElement } from 'react';
 import { jsx } from '@emotion/react';
-declare type BodyProps<Item extends object> = {
+export declare type BodyProps<Item extends object> = {
     rows: Item[];
     children: (row: Item) => ReactElement;
 } | {

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

@@ -1,4 +1,13 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
+import { SelectableActions, SelectableState } from './use-selectable';
+declare type SelectionContext = [
+    SelectableState,
+    /**
+     * Context actions will be undefined without a `SelectionProvider` mounted.
+     */
+    SelectableActions | Partial<SelectableActions>
+];
+declare const SelectionContext: React.Context<SelectionContext>;
 /**
  * __Selection provider__
  *
@@ -9,17 +18,5 @@ import { FC } from 'react';
  * - [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 declare const useSelection: () => SelectionContext;
 export default SelectionProvider;

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

@@ -1,14 +1,38 @@
-declare function useSelectable(): readonly [{
+export declare type SelectableState = {
+    /**
+     * The localised ids that have been checked.
+     */
     checked: number[];
+    /**
+     * Whether all list items are checked.
+     */
     allChecked: boolean;
+    /**
+     * Whether any single row item is checked.
+     */
     anyChecked: boolean;
+    /**
+     * Equal to the data length of the table, i.e. the maximum number of checked items.
+     */
     maxChecked: number;
+    /**
+     * Indicates where a selection begins, i.e. the last selection where the Shift key was **not pressed**
+     */
     selectionStart: number;
+    /**
+     * Indicates the most recent selection range where the Shift key was pressed.
+     * This provides the ability to uncheck ids that are not part of a new selection range, but were in the previous selection range,
+     * mimicking behaviour such as that in macOS
+     * e.g. [2, 3, 4] indicates ids from 2 to 4 were selected the last time the Shift key was pressed.
+     */
     previousSelection: number[];
-}, {
-    readonly setAll: () => void;
-    readonly removeAll: () => void;
-    readonly toggleSelection: (id: number, shiftHeld: boolean) => void;
-    readonly setMax: (max: number) => void;
-}];
+};
+export declare type SelectableActions = {
+    setAll: () => void;
+    removeAll: () => void;
+    toggleSelection: (id: number, shiftHeld: boolean) => void;
+    setMax: (max: number) => void;
+};
+export declare const defaultSelectableState: SelectableState;
+declare function useSelectable(): [SelectableState, SelectableActions];
 export default useSelectable;

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

@@ -3,4 +3,5 @@ export declare const useSorting: <ItemType extends object>(sortKey: SortKey<keyo
     sortKey: "unset" | keyof ItemType;
     sortDirection: SortDirection | undefined;
     setSortState: (key: SortKey<keyof ItemType>) => void;
+    sortFn: (rowA: ItemType, rowB: ItemType) => number;
 };

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

@@ -5,6 +5,7 @@ export declare type TableContext<T, K extends keyof T = keyof T> = {
     isSelectable?: boolean;
     sortKey: SortKey<K>;
     sortDirection?: SortDirection;
+    sortFn?: (a: T, b: T) => number;
     setSortState: (key: SortKey<K>) => void;
 };
 /**

package/dist/types/row.d.ts

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

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

@@ -5,6 +5,10 @@ export interface CellProps {
      * Unique key used for sorting table data by this column
      */
     name: string;
+    /**
+     * 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;
     onClick?: React.MouseEventHandler;
 }

package/dist/types/table.d.ts

@@ -3,6 +3,10 @@ import { ReactElement } from 'react';
 import { jsx } from '@emotion/react';
 import { SortKey } from './hooks/use-table';
 export declare type TableProps<ItemType extends object = {}> = {
+    /**
+     * 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;
     /**
      * default sort key to be applied. If unspecified will use default ordering

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

@@ -2,10 +2,32 @@
 import { ReactNode } from 'react';
 import { BoxProps } from '@atlaskit/ds-explorations/box';
 export declare type BaseCellProps = {
+    /**
+     * A percentage of pixel width of the table to apply to a column.
+     */
+    width?: string;
+    /**
+     * Horizontal alignment of content.
+     */
     align?: keyof typeof alignMap;
+    /**
+     * Whether the cell should render as a `td` or `th` element.
+     */
     as?: 'td' | 'th';
+    /**
+     * Same behavior as the HTML attribute.
+     *
+     * @see 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope'
+     */
     scope?: 'col' | 'row';
+    /**
+     * 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 cell.
+     */
     children?: ReactNode;
 } & Pick<BoxProps, 'paddingBlock' | 'paddingInline' | 'backgroundColor' | 'className'>;
 declare const alignMap: {
@@ -21,10 +43,32 @@ declare const alignMap: {
  * Basic cell element.
  */
 export declare const BaseCell: import("react").ForwardRefExoticComponent<{
+    /**
+     * A percentage of pixel width of the table to apply to a column.
+     */
+    width?: string | undefined;
+    /**
+     * Horizontal alignment of content.
+     */
     align?: "number" | "text" | "icon" | undefined;
+    /**
+     * Whether the cell should render as a `td` or `th` element.
+     */
     as?: "td" | "th" | undefined;
+    /**
+     * Same behavior as the HTML attribute.
+     *
+     * @see 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope'
+     */
     scope?: "col" | "row" | undefined;
+    /**
+     * 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 | undefined;
+    /**
+     * Content of the cell.
+     */
     children?: ReactNode;
 } & Pick<BoxProps<"div">, "className" | "backgroundColor" | "paddingBlock" | "paddingInline"> & import("react").RefAttributes<HTMLTableCellElement>>;
 export {};

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

@@ -9,3 +9,4 @@ export { TH } from './th';
 export { SelectableCell } from './selectable-cell';
 export { THead } from './thead';
 export { BulkActionOverlay } from './bulk-action-overlay';
+export { SortIcon } from './sort-icon';

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

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { FC } from 'react';
+/**
+ * __SortIcon__
+ *
+ * SortIcon is used to display the sort state in our SortableColumn.
+ */
+export declare const SortIcon: FC<{
+    name: string;
+}>;

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

@@ -1,11 +1,15 @@
 /** @jsx jsx */
 import { FC } from 'react';
 declare type TableProps = {
+    /**
+     * 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;
     /**
      * Accessible description of the table data.
      *
-     * @see https://www.w3.org/WAI/EO/Drafts/tutorials/tables/summary/
+     * @see 'https://www.w3.org/WAI/EO/Drafts/tutorials/tables/summary/'
      */
     summary?: string;
 };

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

@@ -1,8 +1,18 @@
 /** @jsx jsx */
 import { FC } from 'react';
 interface TRProps {
+    /**
+     * 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;
+    /**
+     * If the row has programatic selection applied.
+     */
     isSelected?: boolean;
+    /**
+     * Adjust the behavior of the element depending on whether the row is in the `THead` or in the `TBody`.
+     */
     isBodyRow?: boolean;
 }
 /**

package/extract-react-types/cell.tsx

@@ -0,0 +1,3 @@
+import { BaseCellProps } from '../src/ui/base-cell';
+
+export default function Cell(props: BaseCellProps) {}

package/extract-react-types/row.tsx

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+interface AKTableRowProps {
+  testId?: string;
+  children?: ReactNode;
+}
+
+export default function Row(props: AKTableRowProps) {}

package/extract-react-types/table.tsx

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+interface AKTableTableProps {
+  testId?: string;
+  children?: ReactNode;
+}
+
+export default function Table(props: AKTableTableProps) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A table is used to display data.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -15,7 +15,9 @@
     "website": {
       "name": "Table",
       "category": "Components",
-      "draft": true
+      "status": {
+        "type": "alpha"
+      }
     }
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -30,9 +32,9 @@
     "./primitives": "./src/ui/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/button": "^16.4.1",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/checkbox": "^12.4.1",
-    "@atlaskit/ds-explorations": "^1.3.2",
+    "@atlaskit/ds-explorations": "^1.6.0",
     "@atlaskit/ds-lib": "^2.1.2",
     "@atlaskit/focus-ring": "^1.2.1",
     "@atlaskit/icon": "^21.11.2",

package/report.api.md

@@ -30,6 +30,7 @@ const alignMap: {
 
 // @public (undocumented)
 type BaseCellProps = {
+  width?: string;
   align?: keyof typeof alignMap;
   as?: 'td' | 'th';
   scope?: 'col' | 'row';
@@ -59,7 +60,6 @@ interface CellProps {
   name: string;
   // (undocumented)
   onClick?: React.MouseEventHandler;
-  // (undocumented)
   testId?: string;
 }
 

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

@@ -19,6 +19,7 @@ const alignMap: {
 
 // @public (undocumented)
 type BaseCellProps = {
+    width?: string;
     align?: keyof typeof alignMap;
     as?: 'td' | 'th';
     scope?: 'col' | 'row';
@@ -43,7 +44,6 @@ interface CellProps {
     name: string;
     // (undocumented)
     onClick?: React.MouseEventHandler;
-    // (undocumented)
     testId?: string;
 }