@atlaskit/navigation-system 10.17.4 → 10.17.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlassian/navigation-system
 
+## 10.17.5
+
+### Patch Changes
+
+- [`1715d48a722a2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1715d48a722a2) -
+  Migrate responsive styling to typed canonical CSS media-query keys. Allow those keys in the UI
+  Styling Standard and report non-canonical queries used with `satisfies`.
+- Updated dependencies
+
 ## 10.17.4
 
 ### Patch Changes

package/dist/cjs/ui/page-layout/aside.js

@@ -15,7 +15,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
 var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _responsive = require("@atlaskit/primitives/responsive");
 var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
 var _constants = require("./constants");
 var _dangerouslyHoistCssVarToDocumentRoot = require("./dangerously-hoist-css-var-to-document-root");
@@ -149,7 +148,7 @@ function Aside(_ref) {
   React.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.UNSAFE_asideLayoutVar,
     value: "0px",
-    mediaQuery: _responsive.media.above.md,
+    mediaQuery: '@media (min-width: 64rem)',
     responsiveValue: "var(".concat(panelSplitterResizingVar, ", ").concat(asideVariableWidth, ")")
   })
   // ------ END UNSAFE STYLES ------

package/dist/cjs/ui/page-layout/panel.js

@@ -18,7 +18,6 @@ var _useMotion3 = require("@atlaskit/motion/entering/use-motion");
 var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
 var _reanimate = require("@atlaskit/motion/reanimate");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _responsive = require("@atlaskit/primitives/responsive");
 var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
 var _constants = require("./constants");
 var _dangerouslyHoistCssVarToDocumentRoot = require("./dangerously-hoist-css-var-to-document-root");
@@ -225,7 +224,7 @@ function Panel(_ref2) {
   React.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.UNSAFE_panelLayoutVar,
     value: "0px",
-    mediaQuery: _responsive.media.above.lg,
+    mediaQuery: '@media (min-width: 90rem)',
     responsiveValue: "var(".concat(panelSplitterResizingVar, ", ").concat(panelVariableWidth, ")")
   })
   // ------ END UNSAFE STYLES ------

package/dist/cjs/ui/page-layout/ribbon.js

@@ -10,13 +10,11 @@ require("./ribbon.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _responsive = require("@atlaskit/primitives/responsive");
 var _constants = require("./constants");
 var _dangerouslyHoistCssVarToDocumentRoot = require("./dangerously-hoist-css-var-to-document-root");
 var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
 var _useLayoutId = require("./use-layout-id");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 var localSlotLayersStatic = {
   ribbon: 4,
   // The side nav panel splitter is layered above the top nav when FHS is enabled.
@@ -59,7 +57,7 @@ function UNSAFE_Ribbon(_ref) {
   // But also for the panel resizing constraint to work correctly.
   React.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.UNSAFE_ribbonVar,
-    mediaQuery: _responsive.media.above.md,
+    mediaQuery: '@media (min-width: 64rem)',
     value: "0px",
     responsiveValue: width
   })

package/dist/cjs/ui/page-layout/side-nav/side-nav.js

@@ -23,7 +23,6 @@ var _openLayerObserverNamespaceProvider = require("@atlaskit/layering/open-layer
 var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _elementAdapter = require("@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter");
-var _responsive = require("@atlaskit/primitives/responsive");
 var _useSkipLinkInternal = require("../../../context/skip-links/use-skip-link-internal");
 var _topNavStartElement = require("../../../context/top-nav-start/top-nav-start-element");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
@@ -791,7 +790,7 @@ function SideNavInternal(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",
-    mediaQuery: _responsive.media.above.md,
+    mediaQuery: '@media (min-width: 64rem)',
     responsiveValue: isExpandedOnDesktop ? "var(".concat(panelSplitterResizingVar, ", ").concat(clampedWidth, ")") : 0
   }), dangerouslyHoistSlotSizes &&
   /*#__PURE__*/

package/dist/es2019/ui/page-layout/aside.js

@@ -6,7 +6,7 @@ import { useContext, useEffect, useRef, useState } from 'react';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
-import { media } from '@atlaskit/primitives/responsive';
+
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { UNSAFE_asideLayoutVar, asidePanelSplitterId, asideVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
@@ -135,7 +135,7 @@ export function Aside({
   React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: UNSAFE_asideLayoutVar,
     value: "0px",
-    mediaQuery: media.above.md,
+    mediaQuery: '@media (min-width: 64rem)',
     responsiveValue: `var(${panelSplitterResizingVar}, ${asideVariableWidth})`
   })
   // ------ END UNSAFE STYLES ------

package/dist/es2019/ui/page-layout/panel.js

@@ -9,7 +9,7 @@ import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
 import { Reanimate } from '@atlaskit/motion/reanimate';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
-import { media } from '@atlaskit/primitives/responsive';
+
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { UNSAFE_panelLayoutVar, panelPanelSplitterId, panelVar, sideNavLiveWidthVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
@@ -213,7 +213,7 @@ export function Panel({
   React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: UNSAFE_panelLayoutVar,
     value: "0px",
-    mediaQuery: media.above.lg,
+    mediaQuery: '@media (min-width: 90rem)',
     responsiveValue: `var(${panelSplitterResizingVar}, ${panelVariableWidth})`
   })
   // ------ END UNSAFE STYLES ------

package/dist/es2019/ui/page-layout/ribbon.js

@@ -3,8 +3,6 @@ import "./ribbon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
-import { media } from '@atlaskit/primitives/responsive';
 import { UNSAFE_ribbonVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
@@ -51,7 +49,7 @@ export function UNSAFE_Ribbon({
   // But also for the panel resizing constraint to work correctly.
   React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: UNSAFE_ribbonVar,
-    mediaQuery: media.above.md,
+    mediaQuery: '@media (min-width: 64rem)',
     value: "0px",
     responsiveValue: width
   })

package/dist/es2019/ui/page-layout/side-nav/side-nav.js

@@ -13,7 +13,7 @@ import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
-import { media } from '@atlaskit/primitives/responsive';
+
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-element';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
@@ -782,7 +782,7 @@ function SideNavInternal({
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",
-    mediaQuery: media.above.md,
+    mediaQuery: '@media (min-width: 64rem)',
     responsiveValue: isExpandedOnDesktop ? `var(${panelSplitterResizingVar}, ${clampedWidth})` : 0
   }), dangerouslyHoistSlotSizes &&
   /*#__PURE__*/

package/dist/esm/ui/page-layout/aside.js

@@ -8,7 +8,7 @@ import { useContext, useEffect, useRef, useState } from 'react';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
-import { media } from '@atlaskit/primitives/responsive';
+
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { UNSAFE_asideLayoutVar, asidePanelSplitterId, asideVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
@@ -140,7 +140,7 @@ export function Aside(_ref) {
   React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: UNSAFE_asideLayoutVar,
     value: "0px",
-    mediaQuery: media.above.md,
+    mediaQuery: '@media (min-width: 64rem)',
     responsiveValue: "var(".concat(panelSplitterResizingVar, ", ").concat(asideVariableWidth, ")")
   })
   // ------ END UNSAFE STYLES ------

package/dist/esm/ui/page-layout/panel.js

@@ -11,7 +11,7 @@ import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
 import { Reanimate } from '@atlaskit/motion/reanimate';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
-import { media } from '@atlaskit/primitives/responsive';
+
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { UNSAFE_panelLayoutVar, panelPanelSplitterId, panelVar, sideNavLiveWidthVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
@@ -216,7 +216,7 @@ export function Panel(_ref2) {
   React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: UNSAFE_panelLayoutVar,
     value: "0px",
-    mediaQuery: media.above.lg,
+    mediaQuery: '@media (min-width: 90rem)',
     responsiveValue: "var(".concat(panelSplitterResizingVar, ", ").concat(panelVariableWidth, ")")
   })
   // ------ END UNSAFE STYLES ------

package/dist/esm/ui/page-layout/ribbon.js

@@ -3,8 +3,6 @@ import "./ribbon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
-import { media } from '@atlaskit/primitives/responsive';
 import { UNSAFE_ribbonVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
@@ -51,7 +49,7 @@ export function UNSAFE_Ribbon(_ref) {
   // But also for the panel resizing constraint to work correctly.
   React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: UNSAFE_ribbonVar,
-    mediaQuery: media.above.md,
+    mediaQuery: '@media (min-width: 64rem)',
     value: "0px",
     responsiveValue: width
   })

package/dist/esm/ui/page-layout/side-nav/side-nav.js

@@ -17,7 +17,7 @@ import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
-import { media } from '@atlaskit/primitives/responsive';
+
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-element';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
@@ -782,7 +782,7 @@ function SideNavInternal(_ref) {
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",
-    mediaQuery: media.above.md,
+    mediaQuery: '@media (min-width: 64rem)',
     responsiveValue: isExpandedOnDesktop ? "var(".concat(panelSplitterResizingVar, ", ").concat(clampedWidth, ")") : 0
   }), dangerouslyHoistSlotSizes &&
   /*#__PURE__*/

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "10.17.4",
+	"version": "10.17.5",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",