@atlaskit/dynamic-table 14.7.1 → 14.8.1

package/dist/types-ts4.0/styled/table-head.d.ts

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { FC, HTMLProps } from 'react';
+import { SortOrderType } from '../types';
+import { TruncateStyleProps } from './constants';
+interface HeadProps {
+    isRanking?: boolean;
+}
+export declare const Head: FC<HeadProps>;
+declare type HeadCellProps = TruncateStyleProps & HTMLProps<HTMLTableCellElement> & {
+    onClick?: () => void;
+    isSortable?: boolean;
+    sortOrder?: SortOrderType;
+};
+export declare const HeadCell: import("react").ForwardRefExoticComponent<Pick<HeadCellProps, "rows" | "isFixedSize" | "sortOrder" | "testId" | "label" | "cite" | "data" | "form" | "span" | "style" | "summary" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isSortable" | "width" | "shouldTruncate" | "height" | "content" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "value" | "wmode" | "wrap" | "innerRef"> & import("react").RefAttributes<HTMLTableCellElement>>;
+export {};

package/dist/types-ts4.0/styled/table-row.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { CSSProperties, ReactNode } from 'react';
+export declare type ITableRowProps = {
+    isHighlighted?: boolean;
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+};
+export declare const TableBodyRow: import("react").ForwardRefExoticComponent<ITableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/types-ts4.0/theme.d.ts

@@ -0,0 +1,22 @@
+export declare const MSThemeColors: {
+    Background: string;
+    Text: string;
+    SelectedBackground: string;
+    SelectedText: string;
+};
+export declare const arrow: {
+    defaultColor: "var(--ds-icon-disabled)";
+    selectedColor: "var(--ds-icon-subtle)";
+};
+export declare const row: {
+    focusOutline: "var(--ds-border-focused)";
+    highlightedBackground: "var(--ds-background-selected)";
+    hoverBackground: "var(--ds-background-neutral-subtle-hovered)";
+    hoverHighlightedBackground: "var(--ds-background-selected-hovered)";
+};
+export declare const head: {
+    textColor: "var(--ds-text-subtlest)";
+};
+export declare const tableBorder: {
+    borderColor: "var(--ds-border)";
+};

package/dist/types-ts4.0/types.d.ts

@@ -0,0 +1,345 @@
+import React, { Ref } from 'react';
+import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import type { Size as SizeType } from '@atlaskit/spinner';
+export interface RowCellType {
+    /**
+     * Key to resolve sorting this cell in its column.
+     */
+    key?: string | number;
+    /**
+     * The number of columns a cell should span. Defaults to 1, and maxes out at the total column width of the table.
+     */
+    colSpan?: number;
+    /**
+     * The content of the cell.
+     */
+    content?: React.ReactNode | string;
+    /**
+     * Hook for automated testing.
+     */
+    testId?: string;
+}
+export interface I18nShape {
+    /**
+     * Accessible label applied to the previous page button in the pagination component.
+     */
+    prev: string;
+    /**
+     * Accessible label applied to the next page button in the pagination component.
+     */
+    next: string;
+    /**
+     * Accessible label applied to the current page button in the pagination component.
+     */
+    label: string;
+}
+export interface StatelessProps extends WithAnalyticsEventsProps {
+    /**
+     * Caption for the table styled as a heading.
+     */
+    caption?: React.ReactNode;
+    /**
+     * Cells to be placed in the head of the table.
+     * Each element in the head creates a new column.
+     */
+    head?: HeadType;
+    /**
+     * Rows to be placed in the table.
+     * Each row contains cells which should map to the ones defined in the head.
+     *
+     * Ensure each cell has a unique `key` per column - this is used for both Reacts reconcilation of lists and column sorting.
+     */
+    rows?: Array<RowType>;
+    /**
+     * Shown when the table has no content.
+     */
+    emptyView?: React.ReactElement<any>;
+    /**
+     * Configuration of the loading spinner shown when `isLoading` is true.
+     * Defaults to `"large"` when a page has more than two rows, else `"small"`.
+     */
+    loadingSpinnerSize?: LoadingSpinnerSizeType;
+    /**
+     * Displays a loading spinner overlaid on top of the current page.
+     */
+    isLoading?: boolean;
+    /**
+     * Displays columns as their initial width regardless of the content that loads in.
+     */
+    isFixedSize?: boolean;
+    /**
+     * Controls how many rows should be displayed per page.
+     */
+    rowsPerPage?: number;
+    /**
+     * Total number of rows, in case of paginated data.
+     */
+    totalRows?: number;
+    /**
+     * Callback fired when the table page has changed,
+     * useful when wanting to control the pagination of the table.
+     */
+    onSetPage?: (page: number, UIAnalyticsEvent?: UIAnalyticsEvent) => void;
+    /**
+     * Callback fired when a column heading has been sorted,
+     * useful when wanting to control the sort order of the table.
+     */
+    onSort?: (data: any, UIAnalyticsEvent?: UIAnalyticsEvent) => void;
+    /**
+     * Callback fired when the rows displayed on a page have changed.
+     */
+    onPageRowsUpdate?: (pageRows: Array<RowType>) => void;
+    /**
+     * Page the table should show. Set by default to 1, so never undefined.
+     */
+    page?: number;
+    /**
+     * Column key that the rows should be sorted by.
+     * Corresponds to the `key`'s defined in the `head` prop.
+     */
+    sortKey?: string;
+    /**
+     * Column sort order.
+     */
+    sortOrder?: SortOrderType;
+    /**
+     * Enables drag & drop sorting of table rows.
+     */
+    isRankable?: boolean;
+    /**
+     * Disables being able to drop rows on the table.
+     * Drag will still function.
+     */
+    isRankingDisabled?: boolean;
+    /**
+     * Callback fired when a drag of a row has started.
+     */
+    onRankStart?: (rankStart: RankStart) => void;
+    /**
+     * Callback fired when a drop of a row has completed.
+     */
+    onRankEnd?: (rankEnd: RankEnd, uiAnalyticsEvent?: UIAnalyticsEvent) => void;
+    /**
+     * Labels for the pagination wrapper, previous and next buttons used in pagination.
+     * Defaults to `"pagination"`, `"previous"` and `"next"`.
+     */
+    paginationi18n?: I18nShape;
+    /**
+     * Will highlight a row(s) of the table. Should be used to draw attention to a row; not to indicate selection.
+     */
+    highlightedRowIndex?: number | number[];
+    /**
+     *  A `testId` prop is provided for specified elements,
+     *  which is a unique string that appears as a data attribute
+     *  `data-testid` in the rendered code, serving as a hook for automated tests.
+     *
+     *  The value of `testId` is used to prefix `testId` props in given elements.
+     *  - `{testId}--table` - Table.
+     *  - `{testId}--head` - Table header.
+     *  - `{testId}--head--{content of the cell}` - Table header cell can be identified by their content.
+     *  - `{testId}--row--{index - content of the first cell}` - Table row.
+     *  - `{testId}--body` - Table body.
+     *  - `{testId}--body--{content of the cell}` - Table body cell can be identified by their content.
+     *  - `{testId}--loadingSpinner` - The spinner overlaid when loading.
+     * - `{testId}--pagination` - The table pagination.
+     */
+    testId?: string;
+    /**
+     * Used to provide a better description of the table for users with assistive technologies.
+     * Rather than a screen reader speaking "Entering table", passing in an label
+     * allows a custom message like "Entering Sample Numerical Data table".
+     */
+    label?: string;
+}
+export interface StatefulProps extends WithAnalyticsEventsProps {
+    /**
+     * Caption for the table styled as a heading.
+     */
+    caption?: React.ReactNode;
+    /**
+     * Cells to be placed in the head of the table.
+     * Each element in the head creates a new column.
+     */
+    head?: HeadType;
+    /**
+     * Rows to be placed in the table.
+     * Each row contains cells which should map to the ones defined in the head.
+     * Rows accept standard HTML <tr> props in addition to those listed below.
+     * Ensure each cell has a unique `key` per column - this is used for both React's reconciliation of lists and column sorting.
+     */
+    rows?: Array<RowType>;
+    /**
+     * Shown when the table has no content.
+     */
+    emptyView?: React.ReactElement<any>;
+    /**
+     * Configuration of the loading spinner shown when `isLoading` is true.
+     * Defaults to `"large"` when a page has more than two rows, else `"small"`.
+     */
+    loadingSpinnerSize?: LoadingSpinnerSizeType;
+    /**
+     * Displays a loading spinner overlaid on top of the current page.
+     */
+    isLoading?: boolean;
+    /**
+     * Displays columns as their initial width regardless of the content that loads in.
+     */
+    isFixedSize?: boolean;
+    /**
+     * Controls how many rows should be displayed per page. If set, also turns on pagination, if there is more than one page to show.
+     */
+    rowsPerPage?: number;
+    /**
+     * Callback fired when the table page has changed,
+     * useful when wanting to control dynamic table.
+     */
+    onSetPage?: (page: number, UIAnalyticsEvent?: UIAnalyticsEvent) => void;
+    /**
+     * Callback fired when a column heading has been sorted,
+     * useful when wanting to control dynamic table.
+     */
+    onSort?: (data: any, UIAnalyticsEvent?: UIAnalyticsEvent) => void;
+    /**
+     * Callback fired when the rows displayed on a page have changed.
+     */
+    onPageRowsUpdate?: (pageRows: Array<RowType>) => void;
+    /**
+     * Page the table should show.
+     * Useful when wanting to control dynamic table.
+     */
+    page?: number;
+    /**
+     * Default page dynamic table should show when initially rendering.
+     */
+    defaultPage?: number;
+    /**
+     * Column key that the rows should be sorted by.
+     * Corresponds to the `key`'s defined in the `head` prop.
+     * Useful when wanting to control dynamic table.
+     */
+    sortKey?: string;
+    /**
+     * Default column sort key that the rows should be sorted by.
+     * Corresponds to the `key`'s defined in the `head` prop.
+     */
+    defaultSortKey?: string;
+    /**
+     * Column sort order.
+     * Useful when wanting to control dynamic table.
+     */
+    sortOrder?: SortOrderType;
+    /**
+     * Default column sort order used when initially rendering.
+     * Defaults to `"ASC"`.
+     */
+    defaultSortOrder?: SortOrderType;
+    /**
+     * Enables drag & drop sorting of table rows.
+     */
+    isRankable?: boolean;
+    /**
+     * Disables being able to drop rows on the table.
+     * Drag will still function.
+     */
+    isRankingDisabled?: boolean;
+    /**
+     * Callback fired when a drag of a row has started.
+     */
+    onRankStart?: (rankStart: RankStart) => void;
+    /**
+     * Callback fired when a drop of a row has completed.
+     */
+    onRankEnd?: (rankEnd: RankEnd) => void;
+    /**
+     * Labels for the previous and next buttons used in pagination.
+     * Defaults to `"previous"` and `"next"`.
+     */
+    paginationi18n?: I18nShape;
+    /**
+     * Will highlight a row(s) of the table.
+     */
+    highlightedRowIndex?: number | number[];
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute
+     * `data-testid` in the rendered code, serving as a hook for automated tests.
+     * The value of `testId` is used to prefix `testId` props in given elements.
+     *  - `{testId}--table` - Table.
+     *  - `{testId}--head` - Table header.
+     *  - `{testId}--head--{content of the cell}` - Table header cell can be identified by their content.
+     *  - `{testId}--row--{index - content of the first cell}` - Table row.
+     *  - `{testId}--body` - Table body.
+     *  - `{testId}--body--{content of the cell}` - Table body cell can be identified by their content.
+     *  - `{testId}--loadingSpinner` - The spinner overlaid when loading.
+     *  - `{testId}--pagination` - The table pagination.
+     */
+    testId?: string;
+    /**
+     * Used to provide a better description of the table for users with assistive technologies.
+     * Rather than a screen reader speaking "Entering table", passing in an label
+     * allows a custom message like "Entering Sample Numerical Data table".
+     */
+    label?: string;
+}
+export interface RowType extends React.ComponentPropsWithoutRef<'tr'> {
+    cells: Array<RowCellType>;
+    key?: string;
+    /**
+     * A mouse handler to support interaction of a row.
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * A key event handler to support interaction of a row.
+     */
+    onKeyPress?: React.KeyboardEventHandler;
+    /**
+     * Highlights the row. Should be used to draw attention to a row; not to indicate selection.
+     */
+    isHighlighted?: boolean;
+    /**
+     * Hook for automated testing.
+     */
+    testId?: string;
+    ref?: Ref<HTMLTableRowElement>;
+}
+/**
+ * Enum style type to determine whether sort results are ascending or descending.
+ */
+export declare type SortOrderType = 'ASC' | 'DESC';
+/**
+ * Determines the size of the table loading spinner.
+ * This matches the underlying `Size` type in `@atlaskit/spinner`
+ */
+export declare type SpinnerSizeType = SizeType;
+export declare type LoadingSpinnerSizeType = 'small' | 'large';
+export interface HeadCellType extends RowCellType {
+    /**
+     * Whether the column the cell sits above is sortable.
+     */
+    isSortable?: boolean;
+    /**
+     * The width of the cell as a percentage.
+     */
+    width?: number;
+    /**
+     * Whether the text in the cell will truncate or not if constrained.
+     */
+    shouldTruncate?: boolean;
+}
+export interface RankEndLocation {
+    index: number;
+    afterKey?: string;
+    beforeKey?: string;
+}
+export interface RankEnd {
+    sourceIndex: number;
+    sourceKey: string;
+    destination?: RankEndLocation;
+}
+export interface RankStart {
+    index: number;
+    key: string;
+}
+export interface HeadType {
+    cells: Array<HeadCellType>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dynamic-table",
-  "version": "14.7.1",
+  "version": "14.8.1",
   "description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,6 +13,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -27,12 +34,12 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/pagination": "^14.0.0",
+    "@atlaskit/pagination": "^14.2.0",
     "@atlaskit/spinner": "^15.0.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "react-beautiful-dnd": "^12.1.1"
   },
   "peerDependencies": {
@@ -43,18 +50,17 @@
     "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/dropdown-menu": "^11.3.0",
+    "@atlaskit/dropdown-menu": "^11.5.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^12.4.0",
+    "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@emotion/styled": "^10.0.7",
-    "@testing-library/react": "^8.0.1",
+    "@emotion/styled": "^11.0.0",
+    "@testing-library/react": "^12.1.5",
     "enzyme": "^3.10.0",
     "react-dom": "^16.8.0",
-    "styled-components": "^3.2.6",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "uuid": "^3.1.0"
   },
   "techstack": {

package/theme/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/theme.js",
   "module:es2019": "../dist/es2019/theme.js",
   "sideEffects": false,
-  "types": "../dist/types/theme.d.ts"
+  "types": "../dist/types/theme.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/theme.d.ts"
+      ]
+    }
+  }
 }

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
   "sideEffects": false,
-  "types": "../dist/types/types.d.ts"
+  "types": "../dist/types/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/types.d.ts"
+      ]
+    }
+  }
 }