@atlaskit/dynamic-table 18.0.0 → 18.0.2

package/dist/esm/styled/table-row.compiled.css

@@ -0,0 +1,6 @@
+
+._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
+._bfhktkjs{background-color:var(--ds-background-selected,var(--local-dynamic-table-highlighted-bg))}
+._1ygb1852:focus-visible{outline:var(--_akp1ox)}._1ah312gs:focus-visible{outline-offset:-2px}
+._irr31ae3:hover{background-color:var(--ds-background-selected-hovered,var(--local-dynamic-table-hover-highlighted-bg))}
+._irr3s8ts:hover{background-color:var(--ds-background-neutral-subtle-hovered,var(--local-dynamic-table-hover-bg))}

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

@@ -1,37 +1,17 @@
+/* table-row.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isHighlighted", "children", "style", "testId"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./table-row.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { forwardRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { tableRowCSSVars as cssVars } from './dynamic-table';
-var rowStyles = css({
-  backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-  '&:focus-visible': {
-    outline: "2px solid ".concat("var(--ds-border-focused, ".concat( // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    "var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")),
-    outlineOffset: "-2px"
-  }
-});
-var rowBackgroundStyles = css({
-  '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat( // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    "var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")
-  }
-});
-var rowHighlightedBackgroundStyles = css({
-  backgroundColor: "var(--ds-background-selected, ".concat( // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  "var(".concat(cssVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")"), ")"),
-  '&:hover': {
-    backgroundColor: "var(--ds-background-selected-hovered, ".concat( // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    "var(".concat(cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"), ")")
-  }
-});
+var rowStyles = null;
+var rowBackgroundStyles = null;
+var rowHighlightedBackgroundStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var TableBodyRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -40,12 +20,12 @@ export var TableBodyRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style = _ref.style,
     testId = _ref.testId,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return jsx("tr", _extends({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    style: style,
-    css: [rowStyles, isHighlighted ? rowHighlightedBackgroundStyles : rowBackgroundStyles]
-  }, rest, {
+  return /*#__PURE__*/React.createElement("tr", _extends({}, rest, {
     ref: ref,
-    "data-testid": testId
+    "data-testid": testId,
+    className: ax(["_bfhkqtfy _1ygb1852 _1ah312gs", isHighlighted ? "_bfhktkjs _irr31ae3" : "_irr3s8ts"]),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      "--_akp1ox": ix("2px solid ".concat("var(--ds-border-focused, var(--local-dynamic-table-hover-bg))"))
+    })
   }), children);
 });

package/dist/esm/theme.js

@@ -1,23 +1,6 @@
-import * as colors from '@atlaskit/theme/colors';
 export var MSThemeColors = {
   Background: 'Canvas',
   Text: 'CanvasText',
   SelectedBackground: 'Highlight',
   SelectedText: 'HighlightText'
-};
-export var arrow = {
-  defaultColor: "var(--ds-icon-disabled, ".concat(colors.N40, ")"),
-  selectedColor: "var(--ds-icon-subtle, ".concat(colors.N300, ")")
-};
-export var row = {
-  focusOutline: "var(--ds-border-focused, ".concat(colors.B100, ")"),
-  highlightedBackground: "var(--ds-background-selected, ".concat(colors.B50, ")"),
-  hoverBackground: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N10, ")"),
-  hoverHighlightedBackground: "var(--ds-background-selected-hovered, ".concat(colors.B75, ")")
-};
-export var head = {
-  textColor: "var(--ds-text-subtlest, ".concat(colors.N300, ")")
-};
-export var tableBorder = {
-  borderColor: "var(--ds-border, ".concat(colors.N40, ")")
 };

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

@@ -8,10 +8,6 @@ export interface TruncateStyleProps {
     innerRef?: Ref<HTMLTableCellElement | HTMLTableRowElement> | undefined;
     className?: string;
 }
-export declare const truncationWidthStyles: import("@emotion/react").SerializedStyles;
-export declare const fixedSizeTruncateStyles: import("@emotion/react").SerializedStyles;
-export declare const overflowTruncateStyles: import("@emotion/react").SerializedStyles;
 export declare const getTruncationStyleVars: ({ width }: TruncateStyleProps) => {
     "--local-dynamic-table-width": string;
 } | undefined;
-export declare const cellStyles: import("@emotion/react").SerializedStyles;

package/dist/types/styled/dynamic-table.d.ts

@@ -9,12 +9,6 @@ type TableProps = HTMLProps<HTMLTableElement> & {
     hasDataRow: boolean;
     testId?: string;
 };
-export declare const tableRowCSSVars: {
-    CSS_VAR_HOVER_BACKGROUND: string;
-    CSS_VAR_HIGHLIGHTED_BACKGROUND: string;
-    CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND: string;
-    CSS_VAR_ROW_FOCUS_OUTLINE: string;
-};
 export declare const Table: import("react").ForwardRefExoticComponent<Omit<TableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>;
 export declare const Caption: FC<{
     children: ReactNode;

package/dist/types/theme.d.ts

@@ -4,19 +4,3 @@ export declare const MSThemeColors: {
     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.5/styled/constants.d.ts

@@ -8,10 +8,6 @@ export interface TruncateStyleProps {
     innerRef?: Ref<HTMLTableCellElement | HTMLTableRowElement> | undefined;
     className?: string;
 }
-export declare const truncationWidthStyles: import("@emotion/react").SerializedStyles;
-export declare const fixedSizeTruncateStyles: import("@emotion/react").SerializedStyles;
-export declare const overflowTruncateStyles: import("@emotion/react").SerializedStyles;
 export declare const getTruncationStyleVars: ({ width }: TruncateStyleProps) => {
     "--local-dynamic-table-width": string;
 } | undefined;
-export declare const cellStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/styled/dynamic-table.d.ts

@@ -9,12 +9,6 @@ type TableProps = HTMLProps<HTMLTableElement> & {
     hasDataRow: boolean;
     testId?: string;
 };
-export declare const tableRowCSSVars: {
-    CSS_VAR_HOVER_BACKGROUND: string;
-    CSS_VAR_HIGHLIGHTED_BACKGROUND: string;
-    CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND: string;
-    CSS_VAR_ROW_FOCUS_OUTLINE: string;
-};
 export declare const Table: import("react").ForwardRefExoticComponent<Omit<TableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>;
 export declare const Caption: FC<{
     children: ReactNode;

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

@@ -4,19 +4,3 @@ export declare const MSThemeColors: {
     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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "18.0.0",
+	"version": "18.0.2",
 	"description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,16 +42,17 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^24.0.0",
+		"@atlaskit/icon": "^25.0.0",
 		"@atlaskit/pagination": "^16.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "^2.0.0",
-		"@atlaskit/primitives": "^14.0.0",
+		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/spinner": "^18.0.0",
-		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/theme": "^18.0.0",
+		"@atlaskit/tokens": "^4.4.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.2",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
@@ -59,23 +60,23 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/accessibility-testing": "*",
-		"@af/integration-testing": "*",
-		"@af/visual-regression": "*",
-		"@atlaskit/avatar": "^22.0.0",
-		"@atlaskit/banner": "^13.0.0",
-		"@atlaskit/button": "*",
-		"@atlaskit/docs": "*",
+		"@af/accessibility-testing": "^2.0.0",
+		"@af/integration-testing": "^0.5.0",
+		"@af/visual-regression": "^1.3.0",
+		"@atlaskit/avatar": "^25.0.0",
+		"@atlaskit/banner": "^14.0.0",
+		"@atlaskit/button": "^21.1.0",
+		"@atlaskit/docs": "^10.0.0",
 		"@atlaskit/drawer": "^10.0.0",
 		"@atlaskit/dropdown-menu": "^13.0.0",
-		"@atlaskit/link": "*",
+		"@atlaskit/link": "^3.0.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
-		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-		"@atlaskit/section-message": "*",
-		"@atlaskit/ssr": "*",
+		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
+		"@atlaskit/section-message": "^8.1.0",
+		"@atlaskit/ssr": "^0.4.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlassian/feature-flags-storybook-utils": "^0.3.0",
-		"@atlassian/feature-flags-test-utils": "*",
+		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@emotion/styled": "^11.0.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",