@atlaskit/dynamic-table 14.4.1 → 14.5.0

package/dist/esm/theme.js

@@ -1,6 +1,5 @@
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 export var MSThemeColors = {
   Background: 'Canvas',
   Text: 'CanvasText',
@@ -9,43 +8,43 @@ export var MSThemeColors = {
 };
 export var arrow = {
   defaultColor: themed({
-    light: token('color.background.subtleNeutral.resting', colors.N40),
-    dark: token('color.background.subtleNeutral.resting', colors.DN40)
+    light: "var(--ds-background-neutral, ".concat(colors.N40, ")"),
+    dark: "var(--ds-background-neutral, ".concat(colors.DN40, ")")
   }),
   selectedColor: themed({
-    light: token('color.text.lowEmphasis', colors.N300),
-    dark: token('color.text.lowEmphasis', colors.DN300)
+    light: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
+    dark: "var(--ds-text-subtlest, ".concat(colors.DN300, ")")
   }),
   hoverColor: themed({
-    light: token('color.background.subtleNeutral.pressed', colors.N60),
-    dark: token('color.background.subtleNeutral.pressed', colors.DN60)
+    light: "var(--ds-background-neutral-pressed, ".concat(colors.N60, ")"),
+    dark: "var(--ds-background-neutral-pressed, ".concat(colors.DN60, ")")
   })
 };
 export var row = {
   focusOutline: themed({
-    light: token('color.border.focus', colors.B100),
-    dark: token('color.border.focus', colors.B100)
+    light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
+    dark: "var(--ds-border-focused, ".concat(colors.B100, ")")
   }),
   highlightedBackground: themed({
-    light: token('color.background.selected.resting', colors.B50),
-    dark: token('color.background.selected.resting', colors.DN50)
+    light: "var(--ds-background-brand, ".concat(colors.B50, ")"),
+    dark: "var(--ds-background-brand, ".concat(colors.DN50, ")")
   }),
   hoverBackground: themed({
-    light: token('color.background.subtleBorderedNeutral.resting', colors.N10),
-    dark: token('color.background.subtleBorderedNeutral.resting', colors.DN40)
+    light: "var(--ds-background-input, ".concat(colors.N10, ")"),
+    dark: "var(--ds-background-input, ".concat(colors.DN40, ")")
   }),
   hoverHighlightedBackground: themed({
-    light: token('color.background.selected.hover', colors.B75),
-    dark: token('color.background.selected.hover', colors.DN60)
+    light: "var(--ds-background-brand-hovered, ".concat(colors.B75, ")"),
+    dark: "var(--ds-background-brand-hovered, ".concat(colors.DN60, ")")
   })
 };
 export var head = {
   borderColor: themed({
-    light: token('color.border.neutral', colors.N40),
-    dark: token('color.border.neutral', colors.DN50)
+    light: "var(--ds-border, ".concat(colors.N40, ")"),
+    dark: "var(--ds-border, ".concat(colors.DN50, ")")
   }),
   textColor: themed({
-    light: token('color.text.lowEmphasis', colors.N300),
-    dark: token('color.text.lowEmphasis', colors.DN300)
+    light: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
+    dark: "var(--ds-text-subtlest, ".concat(colors.DN300, ")")
   })
 };

package/dist/esm/version.json

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

package/dist/types/components/TableRow.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { HeadType, RowType } from '../types';
 interface Props {
     head?: HeadType;

package/dist/types/styled/constants.d.ts

@@ -12,7 +12,7 @@ export declare const truncationWidthStyles: import("@emotion/core").SerializedSt
 export declare const fixedSizeTruncateStyles: import("@emotion/core").SerializedStyles;
 export declare const overflowTruncateStyles: import("@emotion/core").SerializedStyles;
 export declare const getTruncationStyleVars: ({ width }: TruncateStyleProps) => {
-    "--local-dynamic-table-width": string;
+    "--local-dynamic-table-width": string | undefined;
 };
 export declare const cellStyles: import("@emotion/core").SerializedStyles;
 export {};

package/dist/types/theme.d.ts

@@ -5,17 +5,17 @@ export declare const MSThemeColors: {
     SelectedText: string;
 };
 export declare const arrow: {
-    defaultColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-subtleNeutral-resting)">;
-    selectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-lowEmphasis)">;
-    hoverColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-subtleNeutral-pressed)">;
+    defaultColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral)">;
+    selectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
+    hoverColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral-pressed)">;
 };
 export declare const row: {
-    focusOutline: import("@atlaskit/theme").ThemedValue<"var(--ds-border-focus)">;
-    highlightedBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-selected-resting)">;
-    hoverBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-subtleBorderedNeutral-resting)">;
-    hoverHighlightedBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-selected-hover)">;
+    focusOutline: import("@atlaskit/theme").ThemedValue<"var(--ds-border-focused)">;
+    highlightedBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-brand)">;
+    hoverBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-input)">;
+    hoverHighlightedBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-brand-hovered)">;
 };
 export declare const head: {
-    borderColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-neutral)">;
-    textColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-lowEmphasis)">;
+    borderColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border)">;
+    textColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
 };

package/dist/types/types.d.ts

@@ -129,18 +129,18 @@ export 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.
+      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.
+      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?: string;
     /**
@@ -260,18 +260,18 @@ export 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.
+      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?: string;
     /**
@@ -292,6 +292,10 @@ export interface RowType extends React.ComponentPropsWithoutRef<'tr'> {
      * 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.
      */
@@ -303,7 +307,7 @@ export interface RowType extends React.ComponentPropsWithoutRef<'tr'> {
  */
 export declare type SortOrderType = 'ASC' | 'DESC';
 /**
- * Determines the size of the Table loading spinner.
+ * Determines the size of the table loading spinner.
  * This matches the underlying `Size` type in `@atlaskit/spinner`
  */
 export declare type SpinnerSizeType = SizeType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dynamic-table",
-  "version": "14.4.1",
+  "version": "14.5.0",
   "description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -18,7 +18,6 @@
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Dynamic table"
@@ -28,8 +27,8 @@
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/pagination": "^14.0.0",
     "@atlaskit/spinner": "^15.0.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "react-beautiful-dnd": "^12.1.1"
@@ -40,12 +39,11 @@
   },
   "devDependencies": {
     "@atlaskit/avatar": "^20.5.0",
-    "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.0.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/dropdown-menu": "^10.1.0",
+    "@atlaskit/dropdown-menu": "^11.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^12.3.0",
+    "@atlaskit/toggle": "^12.4.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -62,7 +60,11 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
-      "theming": "tokens"
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
+      ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"