@atlaskit/primitives 1.20.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/primitives
 
+## 2.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.0
+
+### Major Changes
+
+- [#68009](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68009) [`1168354ed6ef`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1168354ed6ef) - We now ensure the specificity of our `xcss`-based overrides are consistent across all primitives so `xcss` will always override props.
+
+  This resulted in a breaking change wtih Grid. For example, `<Grid templateAreas="…" xcss({ gridTemplateAreas: "…" })>` will result in different styles resolution before and after this version. This applies to `templateAreas`, `templateColumns`, and `templateRows`). From static analysis, we found only one known usage of this and it has been resolved.
+
 ## 1.20.0
 
 ### Minor Changes

package/dist/cjs/components/grid.js

@@ -1,15 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _styleMaps = require("../xcss/style-maps.partial");
 var _xcss = require("../xcss/xcss");
 /** @jsx jsx */
 
+var gridTemplateAreasVar = '--ds-grid--grid-template-areas';
+var gridTemplateColumnsVar = '--ds-grid--grid-template-columns';
+var gridTemplateRowsVar = '--ds-grid--grid-template-rows';
 var justifyContentMap = {
   start: (0, _react2.css)({
     justifyContent: 'start'
@@ -86,7 +91,10 @@ var alignItemsMap = {
 };
 var baseStyles = (0, _react2.css)({
   display: 'grid',
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  gridTemplateAreas: "var(".concat(gridTemplateAreasVar, ")"),
+  gridTemplateColumns: "var(".concat(gridTemplateColumnsVar, ")"),
+  gridTemplateRows: "var(".concat(gridTemplateRowsVar, ")")
 });
 var gridAutoFlowMap = {
   row: (0, _react2.css)({
@@ -145,20 +153,28 @@ var Grid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     xcss = _ref.xcss;
   var Component = as || 'div';
   var xcssClassName = xcss && (0, _xcss.parseXcss)(xcss);
-  var style = gridTemplateAreas || gridTemplateColumns || gridTemplateRows ? Object.assign({}, {
-    gridTemplateAreas: gridTemplateAreas ? gridTemplateAreas.map(function (str) {
+
+  /**
+   * We use CSS variables to allow for dynamic grid templates instead of dynamically setting to `props.style`
+   * This allows `props.xcss` to override them as `style={{ gridTemplateAreas }}` would have higher specificity.
+   *
+   * This must be reset to `initial` if `gridTemplateAreas` is not set, otherwise nested grids will break!
+   *
+   * NOTE: If we disallow `grid-template-areas` (etc) to be set via `props.xcss`, we can remove this.
+   */
+  var style = (0, _react.useMemo)(function () {
+    var _ref2;
+    return _ref2 = {}, (0, _defineProperty2.default)(_ref2, gridTemplateAreasVar, gridTemplateAreas ? gridTemplateAreas.map(function (str) {
       return "\"".concat(str, "\"");
-    }).join('\n') : undefined,
-    gridTemplateColumns: gridTemplateColumns,
-    gridTemplateRows: gridTemplateRows
-  }) : undefined;
+    }).join('\n') || 'initial' : 'initial'), (0, _defineProperty2.default)(_ref2, gridTemplateColumnsVar, gridTemplateColumns || 'initial'), (0, _defineProperty2.default)(_ref2, gridTemplateRowsVar, gridTemplateRows || 'initial'), _ref2;
+  }, [gridTemplateAreas, gridTemplateColumns, gridTemplateRows]);
   return (0, _react2.jsx)(Component, {
     id: id,
     role: role,
     style: style,
     css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap], rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssClassName && xcssClassName],
+    xcssClassName],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/es2019/components/grid.js

@@ -1,8 +1,11 @@
 /** @jsx jsx */
-import { forwardRef, memo } from 'react';
+import { forwardRef, memo, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { spaceStylesMap } from '../xcss/style-maps.partial';
 import { parseXcss } from '../xcss/xcss';
+const gridTemplateAreasVar = '--ds-grid--grid-template-areas';
+const gridTemplateColumnsVar = '--ds-grid--grid-template-columns';
+const gridTemplateRowsVar = '--ds-grid--grid-template-rows';
 const justifyContentMap = {
   start: css({
     justifyContent: 'start'
@@ -79,7 +82,10 @@ const alignItemsMap = {
 };
 const baseStyles = css({
   display: 'grid',
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  gridTemplateAreas: `var(${gridTemplateAreasVar})`,
+  gridTemplateColumns: `var(${gridTemplateColumnsVar})`,
+  gridTemplateRows: `var(${gridTemplateRowsVar})`
 });
 const gridAutoFlowMap = {
   row: css({
@@ -139,18 +145,27 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, ref) => {
   const Component = as || 'div';
   const xcssClassName = xcss && parseXcss(xcss);
-  const style = gridTemplateAreas || gridTemplateColumns || gridTemplateRows ? Object.assign({}, {
-    gridTemplateAreas: gridTemplateAreas ? gridTemplateAreas.map(str => `"${str}"`).join('\n') : undefined,
-    gridTemplateColumns,
-    gridTemplateRows
-  }) : undefined;
+
+  /**
+   * We use CSS variables to allow for dynamic grid templates instead of dynamically setting to `props.style`
+   * This allows `props.xcss` to override them as `style={{ gridTemplateAreas }}` would have higher specificity.
+   *
+   * This must be reset to `initial` if `gridTemplateAreas` is not set, otherwise nested grids will break!
+   *
+   * NOTE: If we disallow `grid-template-areas` (etc) to be set via `props.xcss`, we can remove this.
+   */
+  const style = useMemo(() => ({
+    [gridTemplateAreasVar]: gridTemplateAreas ? gridTemplateAreas.map(str => `"${str}"`).join('\n') || 'initial' : 'initial',
+    [gridTemplateColumnsVar]: gridTemplateColumns || 'initial',
+    [gridTemplateRowsVar]: gridTemplateRows || 'initial'
+  }), [gridTemplateAreas, gridTemplateColumns, gridTemplateRows]);
   return jsx(Component, {
     id: id,
     role: role,
     style: style,
     css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssClassName && xcssClassName],
+    xcssClassName],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/esm/components/grid.js

@@ -1,8 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import { forwardRef, memo } from 'react';
+import { forwardRef, memo, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { spaceStylesMap } from '../xcss/style-maps.partial';
 import { parseXcss } from '../xcss/xcss';
+var gridTemplateAreasVar = '--ds-grid--grid-template-areas';
+var gridTemplateColumnsVar = '--ds-grid--grid-template-columns';
+var gridTemplateRowsVar = '--ds-grid--grid-template-rows';
 var justifyContentMap = {
   start: css({
     justifyContent: 'start'
@@ -79,7 +83,10 @@ var alignItemsMap = {
 };
 var baseStyles = css({
   display: 'grid',
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  gridTemplateAreas: "var(".concat(gridTemplateAreasVar, ")"),
+  gridTemplateColumns: "var(".concat(gridTemplateColumnsVar, ")"),
+  gridTemplateRows: "var(".concat(gridTemplateRowsVar, ")")
 });
 var gridAutoFlowMap = {
   row: css({
@@ -138,20 +145,28 @@ var Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     xcss = _ref.xcss;
   var Component = as || 'div';
   var xcssClassName = xcss && parseXcss(xcss);
-  var style = gridTemplateAreas || gridTemplateColumns || gridTemplateRows ? Object.assign({}, {
-    gridTemplateAreas: gridTemplateAreas ? gridTemplateAreas.map(function (str) {
+
+  /**
+   * We use CSS variables to allow for dynamic grid templates instead of dynamically setting to `props.style`
+   * This allows `props.xcss` to override them as `style={{ gridTemplateAreas }}` would have higher specificity.
+   *
+   * This must be reset to `initial` if `gridTemplateAreas` is not set, otherwise nested grids will break!
+   *
+   * NOTE: If we disallow `grid-template-areas` (etc) to be set via `props.xcss`, we can remove this.
+   */
+  var style = useMemo(function () {
+    var _ref2;
+    return _ref2 = {}, _defineProperty(_ref2, gridTemplateAreasVar, gridTemplateAreas ? gridTemplateAreas.map(function (str) {
       return "\"".concat(str, "\"");
-    }).join('\n') : undefined,
-    gridTemplateColumns: gridTemplateColumns,
-    gridTemplateRows: gridTemplateRows
-  }) : undefined;
+    }).join('\n') || 'initial' : 'initial'), _defineProperty(_ref2, gridTemplateColumnsVar, gridTemplateColumns || 'initial'), _defineProperty(_ref2, gridTemplateRowsVar, gridTemplateRows || 'initial'), _ref2;
+  }, [gridTemplateAreas, gridTemplateColumns, gridTemplateRows]);
   return jsx(Component, {
     id: id,
     role: role,
     style: style,
     css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssClassName && xcssClassName],
+    xcssClassName],
     "data-testid": testId,
     ref: ref
   }, children);

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ElementType, ReactNode } from 'react';
+import { type ElementType, type ReactNode } from 'react';
 import { type Space } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 export type GridProps<T extends ElementType = 'div'> = {
@@ -58,11 +58,11 @@ export type GridProps<T extends ElementType = 'div'> = {
      */
     children: ReactNode;
     /**
-     * HTML id attrubute
+     * HTML id attrubute.
      */
     id?: string;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
@@ -184,11 +184,11 @@ declare const Grid: import("react").MemoExoticComponent<import("react").ForwardR
      */
     children: ReactNode;
     /**
-     * HTML id attrubute
+     * HTML id attrubute.
      */
     id?: string | undefined;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: any;
 } & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignContent" | "alignItems" | "justifyContent" | "justifyItems" | "children" | "as" | "id" | keyof BasePrimitiveProps | "autoFlow" | "templateAreas" | "templateRows" | "templateColumns"> & import("react").RefAttributes<any>>>;

package/dist/types-ts4.5/components/grid.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ElementType, ReactNode } from 'react';
+import { type ElementType, type ReactNode } from 'react';
 import { type Space } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 export type GridProps<T extends ElementType = 'div'> = {
@@ -58,11 +58,11 @@ export type GridProps<T extends ElementType = 'div'> = {
      */
     children: ReactNode;
     /**
-     * HTML id attrubute
+     * HTML id attrubute.
      */
     id?: string;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
@@ -184,11 +184,11 @@ declare const Grid: import("react").MemoExoticComponent<import("react").ForwardR
      */
     children: ReactNode;
     /**
-     * HTML id attrubute
+     * HTML id attrubute.
      */
     id?: string | undefined;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: any;
 } & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignContent" | "alignItems" | "justifyContent" | "justifyItems" | "children" | "as" | "id" | keyof BasePrimitiveProps | "autoFlow" | "templateAreas" | "templateRows" | "templateColumns"> & import("react").RefAttributes<any>>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.20.0",
+  "version": "2.0.1",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -104,7 +104,7 @@
     "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
   },
   "dependencies": {
-    "@atlaskit/app-provider": "^0.4.0",
+    "@atlaskit/app-provider": "^1.0.0",
     "@atlaskit/tokens": "^1.35.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",