@atlaskit/dynamic-table 14.8.1 → 14.8.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/dynamic-table
 
+## 14.8.3
+
+### Patch Changes
+
+- [`ba5370e80b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ba5370e80b4) - Update table row background color on drag to better match design token semantics
+
+## 14.8.2
+
+### Patch Changes
+
+- [`f9cd9e55e43`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9cd9e55e43) - Update to disabled tokens which slightly affects the opacity in disabled states
+
 ## 14.8.1
 
 ### Patch Changes

package/dist/cjs/components/loading-container-advanced.js

@@ -258,5 +258,5 @@ exports.default = LoadingContainerAdvanced;
 (0, _defineProperty2.default)(LoadingContainerAdvanced, "defaultProps", {
   isLoading: true,
   spinnerSize: _constants.LARGE,
-  contentsOpacity: _constants.LOADING_CONTENTS_OPACITY
+  contentsOpacity: "var(--ds-opacity-loading, ".concat("".concat(_constants.LOADING_CONTENTS_OPACITY), ")")
 });

package/dist/cjs/components/stateless.js

@@ -54,7 +54,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.8.1";
+var packageVersion = "14.8.3";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {

package/dist/cjs/styled/rankable/table-row.js

@@ -23,16 +23,10 @@ var _excluded = ["isRanking", "isRankingItem"];
 var rankingStyles = (0, _react2.css)({
   display: 'block'
 });
-var elevationStyle = "var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")");
-/**
- * TODO: Pass the props here to get particular theme for the table
- * Skipping it for now as it may impact migration as util-shared-styles does not support this feature
- */
-
 var rankingItemStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N20, ")"),
   borderRadius: '2px',
-  boxShadow: elevationStyle
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
 });
 var draggableStyles = (0, _react2.css)({
   outlineWidth: '2px',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "14.8.1",
+	"version": "14.8.3",
 	"sideEffects": false
 }

package/dist/es2019/components/loading-container-advanced.js

@@ -213,5 +213,5 @@ export default class LoadingContainerAdvanced extends React.Component {
 _defineProperty(LoadingContainerAdvanced, "defaultProps", {
   isLoading: true,
   spinnerSize: LARGE,
-  contentsOpacity: LOADING_CONTENTS_OPACITY
+  contentsOpacity: `var(--ds-opacity-loading, ${`${LOADING_CONTENTS_OPACITY}`})`
 });

package/dist/es2019/components/stateless.js

@@ -14,7 +14,7 @@ import ManagedPagination from './managed-pagination';
 import RankableTableBody from './rankable/body';
 import TableHead from './table-head';
 const packageName = "@atlaskit/dynamic-table";
-const packageVersion = "14.8.1";
+const packageVersion = "14.8.3";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {

package/dist/es2019/styled/rankable/table-row.js

@@ -8,16 +8,10 @@ import { TableBodyRow } from '../table-row';
 const rankingStyles = css({
   display: 'block'
 });
-const elevationStyle = `var(--ds-shadow-overlay, ${`0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`})`;
-/**
- * TODO: Pass the props here to get particular theme for the table
- * Skipping it for now as it may impact migration as util-shared-styles does not support this feature
- */
-
 const rankingItemStyles = css({
-  backgroundColor: `var(--ds-background-neutral, ${N20})`,
+  backgroundColor: `var(--ds-surface-overlay, ${N20})`,
   borderRadius: '2px',
-  boxShadow: elevationStyle
+  boxShadow: `var(--ds-shadow-overlay, ${`0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`})`
 });
 const draggableStyles = css({
   outlineWidth: '2px',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "14.8.1",
+	"version": "14.8.3",
 	"sideEffects": false
 }

package/dist/esm/components/loading-container-advanced.js

@@ -254,7 +254,7 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
 _defineProperty(LoadingContainerAdvanced, "defaultProps", {
   isLoading: true,
   spinnerSize: LARGE,
-  contentsOpacity: LOADING_CONTENTS_OPACITY
+  contentsOpacity: "var(--ds-opacity-loading, ".concat("".concat(LOADING_CONTENTS_OPACITY), ")")
 });
 
 export { LoadingContainerAdvanced as default };

package/dist/esm/components/stateless.js

@@ -25,7 +25,7 @@ import ManagedPagination from './managed-pagination';
 import RankableTableBody from './rankable/body';
 import TableHead from './table-head';
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.8.1";
+var packageVersion = "14.8.3";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {

package/dist/esm/styled/rankable/table-row.js

@@ -10,16 +10,10 @@ import { TableBodyRow } from '../table-row';
 var rankingStyles = css({
   display: 'block'
 });
-var elevationStyle = "var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")");
-/**
- * TODO: Pass the props here to get particular theme for the table
- * Skipping it for now as it may impact migration as util-shared-styles does not support this feature
- */
-
 var rankingItemStyles = css({
-  backgroundColor: "var(--ds-background-neutral, ".concat(N20, ")"),
+  backgroundColor: "var(--ds-surface-overlay, ".concat(N20, ")"),
   borderRadius: '2px',
-  boxShadow: elevationStyle
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
 });
 var draggableStyles = css({
   outlineWidth: '2px',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "14.8.1",
+	"version": "14.8.3",
 	"sideEffects": false
 }

package/dist/types/components/loading-container-advanced.d.ts

@@ -4,7 +4,7 @@ export interface LoadingContainerAdvancedProps {
     children: React.ReactElement<any>;
     isLoading?: boolean;
     spinnerSize?: SpinnerSizeType;
-    contentsOpacity: number;
+    contentsOpacity: number | string;
     targetRef?: () => HTMLDivElement | undefined;
     testId?: string;
 }
@@ -14,7 +14,7 @@ export default class LoadingContainerAdvanced extends React.Component<LoadingCon
     static defaultProps: {
         isLoading: boolean;
         spinnerSize: string;
-        contentsOpacity: number;
+        contentsOpacity: "var(--ds-opacity-loading)";
     };
     componentDidMount: () => void;
     UNSAFE_componentWillReceiveProps: (nextProps: LoadingContainerAdvancedProps) => void;

package/dist/types-ts4.0/components/loading-container-advanced.d.ts

@@ -4,7 +4,7 @@ export interface LoadingContainerAdvancedProps {
     children: React.ReactElement<any>;
     isLoading?: boolean;
     spinnerSize?: SpinnerSizeType;
-    contentsOpacity: number;
+    contentsOpacity: number | string;
     targetRef?: () => HTMLDivElement | undefined;
     testId?: string;
 }
@@ -14,7 +14,7 @@ export default class LoadingContainerAdvanced extends React.Component<LoadingCon
     static defaultProps: {
         isLoading: boolean;
         spinnerSize: string;
-        contentsOpacity: number;
+        contentsOpacity: "var(--ds-opacity-loading)";
     };
     componentDidMount: () => void;
     UNSAFE_componentWillReceiveProps: (nextProps: LoadingContainerAdvancedProps) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dynamic-table",
-  "version": "14.8.1",
+  "version": "14.8.3",
   "description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -47,7 +47,7 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^21.0.0",
+    "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/dropdown-menu": "^11.5.0",

package/report.api.md

@@ -1,8 +1,11 @@
-## API Report File for "@atlaskit/dynamic-table"
+## API Report File for "@atlaskit/dynamic-table".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ````ts
+import noop from '@atlaskit/ds-lib/noop';
 import { default as React_2 } from 'react';
 import { Ref } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
@@ -41,8 +44,8 @@ declare class DynamicTable extends React_2.Component<StatefulProps, State> {
     isLoading: boolean;
     isFixedSize: boolean;
     isRankable: boolean;
-    onSetPage: () => void;
-    onSort: () => void;
+    onSetPage: typeof noop;
+    onSort: typeof noop;
     rowsPerPage: number;
   };
   state: {
@@ -105,13 +108,13 @@ export declare const DynamicTableStateless: React_2.ForwardRefExoticComponent<
             isLoading: boolean;
             isFixedSize: boolean;
             rowsPerPage: number;
-            onSetPage: () => void;
-            onSort: () => void;
+            onSetPage: typeof noop;
+            onSort: typeof noop;
             page: number;
             isRankable: boolean;
             isRankingDisabled: boolean;
-            onRankStart: () => void;
-            onRankEnd: () => void;
+            onRankStart: typeof noop;
+            onRankEnd: typeof noop;
             paginationi18n: {
               prev: string;
               next: string;
@@ -153,11 +156,17 @@ export declare const DynamicTableStateless: React_2.ForwardRefExoticComponent<
 >;
 
 declare interface HeadCellType extends RowCellType {
-  /** Whether the column the cell sits above is sortable. */
+  /**
+   * Whether the column the cell sits above is sortable.
+   */
   isSortable?: boolean;
-  /** The pixel width of the cell. */
+  /**
+   * The width of the cell as a percentage.
+   */
   width?: number;
-  /** Whether the text in the cell will truncate or not if constrained. */
+  /**
+   * Whether the text in the cell will truncate or not if constrained.
+   */
   shouldTruncate?: boolean;
 }
 
@@ -263,12 +272,11 @@ declare interface StatefulProps extends WithAnalyticsEventsProps {
    */
   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 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.
@@ -288,7 +296,7 @@ declare interface StatefulProps extends WithAnalyticsEventsProps {
    */
   isFixedSize?: boolean;
   /**
-   * Controls how many rows should be diplayed per page.
+   * 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;
   /**
@@ -362,20 +370,19 @@ declare interface StatefulProps extends WithAnalyticsEventsProps {
    */
   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.
-     */
+   * 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.
@@ -396,11 +403,11 @@ declare interface StatelessProps extends WithAnalyticsEventsProps {
    */
   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 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.
@@ -442,7 +449,7 @@ declare interface StatelessProps extends WithAnalyticsEventsProps {
    */
   onPageRowsUpdate?: (pageRows: Array<RowType>) => void;
   /**
-   * Page the table should show.
+   * Page the table should show. Set by default to 1, so never undefined.
    */
   page?: number;
   /**
@@ -481,20 +488,20 @@ declare interface StatelessProps extends WithAnalyticsEventsProps {
    */
   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.
-     */
+   *  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.