@atlaskit/primitives 0.9.4 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 0.10.0
+
+### Minor Changes
+
+- [`313d71fce9c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/313d71fce9c) - Allow media queries at predefined breakpoints to be applied through xCSS.
+
+## 0.9.5
+
+### Patch Changes
+
+- [`61cb5313358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/61cb5313358) - Removing unused dependencies and dev dependencies
+
 ## 0.9.4
 
 ### Patch Changes

package/dist/cjs/components/box.js

@@ -55,7 +55,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     style: style,
     testId: testId,
     ref: ref
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     css: className
   }, safeHtmlAttributes), children);

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.9.4",
+	"version": "0.10.0",
 	"sideEffects": false
 }

package/dist/cjs/xcss/xcss.js

@@ -8,9 +8,11 @@ exports.parseXcss = void 0;
 exports.xcss = xcss;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("@emotion/react");
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
+var _responsive = require("../helpers/responsive");
 var _styleMaps = require("./style-maps.partial");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
@@ -81,6 +83,11 @@ var isSafeEnvToThrow = function isSafeEnvToThrow() {
 };
 var reNestedSelectors = /(\.|\s|&+|\*\>|#|\[.*\])/;
 var rePseudos = /^::?.*$/;
+var reMediaQuery = /^@media .*$/;
+var reValidMediaQuery = new RegExp("^(".concat([].concat((0, _toConsumableArray2.default)(Object.values(_responsive.UNSAFE_media.above)), (0, _toConsumableArray2.default)(Object.values(_responsive.UNSAFE_media.below))).map(function (mediaQuery) {
+  return mediaQuery.replace(/[.()]/g, '\\$&');
+} // Escape the ".", "(", and ")" in the media query syntax.
+).join('|'), ")$"));
 var transformStyles = function transformStyles(styleObj) {
   if (!styleObj || (0, _typeof2.default)(styleObj) !== 'object') {
     return styleObj;
@@ -98,7 +105,7 @@ var transformStyles = function transformStyles(styleObj) {
       value = _ref2[1];
     if (isSafeEnvToThrow()) {
       // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
-      if (reNestedSelectors.test(key)) {
+      if (reNestedSelectors.test(key) && !reValidMediaQuery.test(key)) {
         throw new Error("Styles not supported for key '".concat(key, "'."));
       }
     }
@@ -109,8 +116,10 @@ var transformStyles = function transformStyles(styleObj) {
       styleObj[key] = transformStyles(value);
       return;
     }
-
-    // TODO: Deal with media queries
+    if (reMediaQuery.test(key)) {
+      styleObj[key] = transformStyles(value);
+      return;
+    }
 
     // We have now dealt with all the special cases, so,
     // check whether what remains is a style property
@@ -149,6 +158,10 @@ var parseXcss = function parseXcss(args) {
   }
   return styles;
 };
+
+// Media queries should not contain nested media queries
+
+// Pseudos should not contain nested pseudos, or media queries
 exports.parseXcss = parseXcss;
 // unused private functions only so we can extract the return type from a generic function
 var boxWrapper = function boxWrapper(style) {

package/dist/es2019/components/box.js

@@ -48,7 +48,7 @@ const Box = /*#__PURE__*/forwardRef(({
     style: style,
     testId: testId,
     ref: ref
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     css: className
   }, safeHtmlAttributes), children);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.9.4",
+	"version": "0.10.0",
 	"sideEffects": false
 }

package/dist/es2019/xcss/xcss.js

@@ -1,6 +1,7 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
+import { UNSAFE_media } from '../helpers/responsive';
 import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, fillMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 const tokensMap = {
   alignSelf: alignSelfMap,
@@ -67,6 +68,9 @@ const uniqueSymbol = Symbol('UNSAFE_INTERNAL_styles');
 const isSafeEnvToThrow = () => typeof process === 'object' && typeof process.env === 'object' && process.env.NODE_ENV !== 'production';
 const reNestedSelectors = /(\.|\s|&+|\*\>|#|\[.*\])/;
 const rePseudos = /^::?.*$/;
+const reMediaQuery = /^@media .*$/;
+const reValidMediaQuery = new RegExp(`^(${[...Object.values(UNSAFE_media.above), ...Object.values(UNSAFE_media.below)].map(mediaQuery => mediaQuery.replace(/[.()]/g, '\\$&') // Escape the ".", "(", and ")" in the media query syntax.
+).join('|')})$`);
 const transformStyles = styleObj => {
   if (!styleObj || typeof styleObj !== 'object') {
     return styleObj;
@@ -81,7 +85,7 @@ const transformStyles = styleObj => {
   Object.entries(styleObj).forEach(([key, value]) => {
     if (isSafeEnvToThrow()) {
       // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
-      if (reNestedSelectors.test(key)) {
+      if (reNestedSelectors.test(key) && !reValidMediaQuery.test(key)) {
         throw new Error(`Styles not supported for key '${key}'.`);
       }
     }
@@ -92,8 +96,10 @@ const transformStyles = styleObj => {
       styleObj[key] = transformStyles(value);
       return;
     }
-
-    // TODO: Deal with media queries
+    if (reMediaQuery.test(key)) {
+      styleObj[key] = transformStyles(value);
+      return;
+    }
 
     // We have now dealt with all the special cases, so,
     // check whether what remains is a style property
@@ -134,6 +140,11 @@ export const parseXcss = args => {
   }
   return styles;
 };
+
+// Media queries should not contain nested media queries
+
+// Pseudos should not contain nested pseudos, or media queries
+
 // unused private functions only so we can extract the return type from a generic function
 const boxWrapper = style => xcss(style);
 const inlineWrapper = style => xcss(style);

package/dist/esm/components/box.js

@@ -48,7 +48,7 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: style,
     testId: testId,
     ref: ref
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     css: className
   }, safeHtmlAttributes), children);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.9.4",
+	"version": "0.10.0",
 	"sideEffects": false
 }

package/dist/esm/xcss/xcss.js

@@ -1,9 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _typeof from "@babel/runtime/helpers/typeof";
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
+import { UNSAFE_media } from '../helpers/responsive';
 import { alignSelfMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderStyleMap, borderWidthMap, dimensionMap, displayMap, fillMap, flexDirectionMap, flexGrowMap, flexMap, flexShrinkMap, layerMap, overflowBlockMap, overflowInlineMap, overflowMap, positionMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
 var tokensMap = {
   alignSelf: alignSelfMap,
@@ -72,6 +74,11 @@ var isSafeEnvToThrow = function isSafeEnvToThrow() {
 };
 var reNestedSelectors = /(\.|\s|&+|\*\>|#|\[.*\])/;
 var rePseudos = /^::?.*$/;
+var reMediaQuery = /^@media .*$/;
+var reValidMediaQuery = new RegExp("^(".concat([].concat(_toConsumableArray(Object.values(UNSAFE_media.above)), _toConsumableArray(Object.values(UNSAFE_media.below))).map(function (mediaQuery) {
+  return mediaQuery.replace(/[.()]/g, '\\$&');
+} // Escape the ".", "(", and ")" in the media query syntax.
+).join('|'), ")$"));
 var transformStyles = function transformStyles(styleObj) {
   if (!styleObj || _typeof(styleObj) !== 'object') {
     return styleObj;
@@ -89,7 +96,7 @@ var transformStyles = function transformStyles(styleObj) {
       value = _ref2[1];
     if (isSafeEnvToThrow()) {
       // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
-      if (reNestedSelectors.test(key)) {
+      if (reNestedSelectors.test(key) && !reValidMediaQuery.test(key)) {
         throw new Error("Styles not supported for key '".concat(key, "'."));
       }
     }
@@ -100,8 +107,10 @@ var transformStyles = function transformStyles(styleObj) {
       styleObj[key] = transformStyles(value);
       return;
     }
-
-    // TODO: Deal with media queries
+    if (reMediaQuery.test(key)) {
+      styleObj[key] = transformStyles(value);
+      return;
+    }
 
     // We have now dealt with all the special cases, so,
     // check whether what remains is a style property
@@ -140,6 +149,11 @@ export var parseXcss = function parseXcss(args) {
   }
   return styles;
 };
+
+// Media queries should not contain nested media queries
+
+// Pseudos should not contain nested pseudos, or media queries
+
 // unused private functions only so we can extract the return type from a generic function
 var boxWrapper = function boxWrapper(style) {
   return xcss(style);

package/dist/types/helpers/responsive/types.d.ts

@@ -1,9 +1,11 @@
 import { SerializedStyles } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
+import { UNSAFE_media } from './media-helper';
 /**
  * The breakpoints we have for responsiveness.
  */
 export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type MediaQuery = (typeof UNSAFE_media.above)[Breakpoint] | (typeof UNSAFE_media.below)[Exclude<Breakpoint, 'xxs'>];
 /**
  * An object type mapping a value to each breakpoint (optionally)
  */

package/dist/types/xcss/xcss.d.ts

@@ -2,6 +2,7 @@
 import { css as cssEmotion } from '@emotion/react';
 import { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
 import type * as CSS from 'csstype';
+import { MediaQuery } from '../helpers/responsive/types';
 import { Box, Inline } from '../index';
 import { TokenisedProps } from './style-maps.partial';
 declare const uniqueSymbol: unique symbol;
@@ -11,10 +12,13 @@ declare const uniqueSymbol: unique symbol;
  */
 type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
 export declare const parseXcss: (args: XCSS | Array<XCSS | false | undefined>) => ParsedXcss;
+type CSSMediaQueries = {
+    [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
+};
 type CSSPseudos = {
-    [Pseudo in CSS.Pseudos]?: SafeCSSObject;
+    [Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject, CSS.Pseudos | MediaQuery>;
 };
-type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+type SafeCSSObject = CSSPseudos & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
 declare const boxWrapper: (style: any) => {
     readonly [uniqueSymbol]: BoxStyles;

package/dist/types-ts4.5/helpers/responsive/types.d.ts

@@ -1,9 +1,11 @@
 import { SerializedStyles } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
+import { UNSAFE_media } from './media-helper';
 /**
  * The breakpoints we have for responsiveness.
  */
 export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type MediaQuery = (typeof UNSAFE_media.above)[Breakpoint] | (typeof UNSAFE_media.below)[Exclude<Breakpoint, 'xxs'>];
 /**
  * An object type mapping a value to each breakpoint (optionally)
  */

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

@@ -2,6 +2,7 @@
 import { css as cssEmotion } from '@emotion/react';
 import { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
 import type * as CSS from 'csstype';
+import { MediaQuery } from '../helpers/responsive/types';
 import { Box, Inline } from '../index';
 import { TokenisedProps } from './style-maps.partial';
 declare const uniqueSymbol: unique symbol;
@@ -11,10 +12,13 @@ declare const uniqueSymbol: unique symbol;
  */
 type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
 export declare const parseXcss: (args: XCSS | Array<XCSS | false | undefined>) => ParsedXcss;
+type CSSMediaQueries = {
+    [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
+};
 type CSSPseudos = {
-    [Pseudo in CSS.Pseudos]?: SafeCSSObject;
+    [Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject, CSS.Pseudos | MediaQuery>;
 };
-type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+type SafeCSSObject = CSSPseudos & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
 declare const boxWrapper: (style: any) => {
     readonly [uniqueSymbol]: BoxStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.9.4",
+  "version": "0.10.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -118,13 +118,11 @@
     "@atlaskit/radio": "^5.6.0",
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tag": "*",
     "@atlaskit/theme": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "^0.1.0",
-    "@atlassian/gemini-visual-regression": "^0.0.22",
+    "@atlassian/gemini-visual-regression": "^0.0.27",
     "@testing-library/react": "^12.1.5",
     "csstype": "^3.1.0",
     "prettier": "^2.8.0",

package/report.api.md

@@ -316,9 +316,17 @@ type BoxXCSS = {
   readonly [uniqueSymbol]: BoxStyles;
 };
 
+// @public
+type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
+
+// @public (undocumented)
+type CSSMediaQueries = {
+  [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
+};
+
 // @public (undocumented)
 type CSSPseudos = {
-  [Pseudo in CSS_2.Pseudos]?: SafeCSSObject;
+  [Pseudo in CSS_2.Pseudos]?: Omit<SafeCSSObject, CSS_2.Pseudos | MediaQuery>;
 };
 
 // @public (undocumented)
@@ -499,6 +507,11 @@ type MaxInlineSize = Dimension;
 // @public (undocumented)
 type MaxWidth = Dimension;
 
+// @public (undocumented)
+type MediaQuery =
+  | (typeof UNSAFE_media.above)[Breakpoint]
+  | (typeof UNSAFE_media.below)[Exclude<Breakpoint, 'xxs'>];
+
 // @public (undocumented)
 type MinBlockSize = Dimension;
 
@@ -560,6 +573,7 @@ type Right = Dimension;
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos &
   TokenisedProps &
+  CSSMediaQueries &
   Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 
 // @public (undocumented)
@@ -741,6 +755,27 @@ type Top = Dimension;
 // @public (undocumented)
 const uniqueSymbol: unique symbol;
 
+// @public
+const UNSAFE_media: {
+  readonly above: {
+    readonly xxs: `@media (min-width: ${number}rem)`;
+    readonly xs: `@media (min-width: ${number}rem)`;
+    readonly sm: `@media (min-width: ${number}rem)`;
+    readonly md: `@media (min-width: ${number}rem)`;
+    readonly lg: `@media (min-width: ${number}rem)`;
+    readonly xl: `@media (min-width: ${number}rem)`;
+    readonly xxl: `@media (min-width: ${number}rem)`;
+  };
+  readonly below: {
+    readonly xs: `@media (max-width: ${number}rem)`;
+    readonly sm: `@media (max-width: ${number}rem)`;
+    readonly md: `@media (max-width: ${number}rem)`;
+    readonly lg: `@media (max-width: ${number}rem)`;
+    readonly xl: `@media (max-width: ${number}rem)`;
+    readonly xxl: `@media (max-width: ${number}rem)`;
+  };
+};
+
 // @public (undocumented)
 type Width = Dimension;
 

package/tmp/api-report-tmp.d.ts

@@ -278,9 +278,17 @@ type BoxXCSS = {
     readonly [uniqueSymbol]: BoxStyles;
 };
 
+// @public
+type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
+
+// @public (undocumented)
+type CSSMediaQueries = {
+    [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
+};
+
 // @public (undocumented)
 type CSSPseudos = {
-    [Pseudo in CSS_2.Pseudos]?: SafeCSSObject;
+    [Pseudo in CSS_2.Pseudos]?: Omit<SafeCSSObject, CSS_2.Pseudos | MediaQuery>;
 };
 
 // @public (undocumented)
@@ -443,6 +451,9 @@ type MaxInlineSize = Dimension;
 // @public (undocumented)
 type MaxWidth = Dimension;
 
+// @public (undocumented)
+type MediaQuery = (typeof UNSAFE_media.above)[Breakpoint] | (typeof UNSAFE_media.below)[Exclude<Breakpoint, 'xxs'>];
+
 // @public (undocumented)
 type MinBlockSize = Dimension;
 
@@ -502,7 +513,7 @@ type PublicBoxPropsBase = {
 type Right = Dimension;
 
 // @public (undocumented)
-type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+type SafeCSSObject = CSSPseudos & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 
 // @public (undocumented)
 type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
@@ -665,6 +676,27 @@ type Top = Dimension;
 // @public (undocumented)
 const uniqueSymbol: unique symbol;
 
+// @public
+const UNSAFE_media: {
+    readonly above: {
+        readonly xxs: `@media (min-width: ${number}rem)`;
+        readonly xs: `@media (min-width: ${number}rem)`;
+        readonly sm: `@media (min-width: ${number}rem)`;
+        readonly md: `@media (min-width: ${number}rem)`;
+        readonly lg: `@media (min-width: ${number}rem)`;
+        readonly xl: `@media (min-width: ${number}rem)`;
+        readonly xxl: `@media (min-width: ${number}rem)`;
+    };
+    readonly below: {
+        readonly xs: `@media (max-width: ${number}rem)`;
+        readonly sm: `@media (max-width: ${number}rem)`;
+        readonly md: `@media (max-width: ${number}rem)`;
+        readonly lg: `@media (max-width: ${number}rem)`;
+        readonly xl: `@media (max-width: ${number}rem)`;
+        readonly xxl: `@media (max-width: ${number}rem)`;
+    };
+};
+
 // @public (undocumented)
 type Width = Dimension;