@atlaskit/app-provider 1.5.0 → 1.6.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/app-provider
 
+## 1.6.1
+
+### Patch Changes
+
+- [#103996](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103996)
+  [`e97a60e120280`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e97a60e120280) -
+  Update dependencies and remove unused internal exports.
+
+## 1.6.0
+
+### Minor Changes
+
+- [#98648](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98648)
+  [`940af9dafa883`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/940af9dafa883) -
+  [ux] Default typography theme changed to modernized behind feature flag
+  `platform-default-typography-modernized`. If testing is successful the change will be available in
+  a later release.
+
 ## 1.5.0
 
 ### Minor Changes

package/dist/cjs/app-provider.js

@@ -5,7 +5,6 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AppProvider = AppProvider;
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _routerLinkProvider = _interopRequireDefault(require("./router-link-provider"));

package/dist/cjs/router-link-provider/index.js

@@ -8,6 +8,7 @@ exports.default = exports.RouterLinkProviderContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var RouterLinkProviderContext = exports.RouterLinkProviderContext = /*#__PURE__*/(0, _react.createContext)({});
 /**
  * __RouterLinkProvider__

package/dist/cjs/theme-provider.js

@@ -5,7 +5,6 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ThemeProvider = ThemeProvider;
 exports.UNSAFE_useColorModeForMigration = UNSAFE_useColorModeForMigration;
 exports.default = void 0;
 exports.useColorMode = useColorMode;
@@ -24,10 +23,13 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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; }
-var defaultThemeSettings = {
-  dark: 'dark',
-  light: 'light',
-  spacing: 'spacing'
+var defaultThemeSettings = function defaultThemeSettings() {
+  return {
+    dark: 'dark',
+    light: 'light',
+    spacing: 'spacing',
+    typography: (0, _platformFeatureFlags.fg)('platform-default-typography-modernized') ? 'typography-modernized' : undefined
+  };
 };
 var ColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 var SetColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
@@ -118,16 +120,7 @@ function getReconciledColorMode(colorMode) {
 function ThemeProvider(_ref) {
   var children = _ref.children,
     defaultColorMode = _ref.defaultColorMode,
-    _ref$defaultTheme = _ref.defaultTheme,
-    _ref$defaultTheme2 = _ref$defaultTheme === void 0 ? defaultThemeSettings : _ref$defaultTheme,
-    _ref$defaultTheme2$da = _ref$defaultTheme2.dark,
-    dark = _ref$defaultTheme2$da === void 0 ? 'dark' : _ref$defaultTheme2$da,
-    _ref$defaultTheme2$li = _ref$defaultTheme2.light,
-    light = _ref$defaultTheme2$li === void 0 ? 'light' : _ref$defaultTheme2$li,
-    _ref$defaultTheme2$sp = _ref$defaultTheme2.spacing,
-    spacing = _ref$defaultTheme2$sp === void 0 ? 'spacing' : _ref$defaultTheme2$sp,
-    typography = _ref$defaultTheme2.typography,
-    shape = _ref$defaultTheme2.shape;
+    defaultTheme = _ref.defaultTheme;
   var _useState = (0, _react.useState)(defaultColorMode),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     chosenColorMode = _useState2[0],
@@ -136,12 +129,8 @@ function ThemeProvider(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     reconciledColorMode = _useState4[0],
     setReconciledColorMode = _useState4[1];
-  var _useState5 = (0, _react.useState)({
-      dark: dark,
-      light: light,
-      spacing: spacing,
-      typography: typography,
-      shape: shape
+  var _useState5 = (0, _react.useState)(function () {
+      return _objectSpread(_objectSpread({}, defaultThemeSettings()), defaultTheme);
     }),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     theme = _useState6[0],

package/dist/es2019/app-provider.js

@@ -9,7 +9,7 @@ const InsideAppProviderContext = /*#__PURE__*/createContext(false);
  *
  * Place it at the root of your application.
  */
-export function AppProvider({
+function AppProvider({
   children,
   defaultColorMode = 'light',
   defaultTheme,

package/dist/es2019/router-link-provider/index.js

@@ -1,4 +1,5 @@
 import React, { createContext } from 'react';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const RouterLinkProviderContext = /*#__PURE__*/createContext({});
 /**
  * __RouterLinkProvider__

package/dist/es2019/theme-provider.js

@@ -2,11 +2,12 @@ import React, { createContext, useCallback, useContext, useEffect, useRef, useSt
 import { bind } from 'bind-event-listener';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { setGlobalTheme } from '@atlaskit/tokens';
-const defaultThemeSettings = {
+const defaultThemeSettings = () => ({
   dark: 'dark',
   light: 'light',
-  spacing: 'spacing'
-};
+  spacing: 'spacing',
+  typography: fg('platform-default-typography-modernized') ? 'typography-modernized' : undefined
+});
 const ColorModeContext = /*#__PURE__*/createContext(undefined);
 const SetColorModeContext = /*#__PURE__*/createContext(undefined);
 const ThemeContext = /*#__PURE__*/createContext(undefined);
@@ -93,26 +94,17 @@ function getReconciledColorMode(colorMode) {
  *
  * @internal
  */
-export function ThemeProvider({
+function ThemeProvider({
   children,
   defaultColorMode,
-  defaultTheme: {
-    dark = 'dark',
-    light = 'light',
-    spacing = 'spacing',
-    typography,
-    shape
-  } = defaultThemeSettings
+  defaultTheme
 }) {
   const [chosenColorMode, setChosenColorMode] = useState(defaultColorMode);
   const [reconciledColorMode, setReconciledColorMode] = useState(getReconciledColorMode(defaultColorMode));
-  const [theme, setTheme] = useState({
-    dark,
-    light,
-    spacing,
-    typography,
-    shape
-  });
+  const [theme, setTheme] = useState(() => ({
+    ...defaultThemeSettings(),
+    ...defaultTheme
+  }));
   const setColorMode = useCallback(colorMode => {
     setChosenColorMode(colorMode);
     setReconciledColorMode(getReconciledColorMode(colorMode));

package/dist/esm/app-provider.js

@@ -9,7 +9,7 @@ var InsideAppProviderContext = /*#__PURE__*/createContext(false);
  *
  * Place it at the root of your application.
  */
-export function AppProvider(_ref) {
+function AppProvider(_ref) {
   var children = _ref.children,
     _ref$defaultColorMode = _ref.defaultColorMode,
     defaultColorMode = _ref$defaultColorMode === void 0 ? 'light' : _ref$defaultColorMode,

package/dist/esm/router-link-provider/index.js

@@ -1,4 +1,5 @@
 import React, { createContext } from 'react';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var RouterLinkProviderContext = /*#__PURE__*/createContext({});
 /**
  * __RouterLinkProvider__

package/dist/esm/theme-provider.js

@@ -8,10 +8,13 @@ import React, { createContext, useCallback, useContext, useEffect, useRef, useSt
 import { bind } from 'bind-event-listener';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { setGlobalTheme } from '@atlaskit/tokens';
-var defaultThemeSettings = {
-  dark: 'dark',
-  light: 'light',
-  spacing: 'spacing'
+var defaultThemeSettings = function defaultThemeSettings() {
+  return {
+    dark: 'dark',
+    light: 'light',
+    spacing: 'spacing',
+    typography: fg('platform-default-typography-modernized') ? 'typography-modernized' : undefined
+  };
 };
 var ColorModeContext = /*#__PURE__*/createContext(undefined);
 var SetColorModeContext = /*#__PURE__*/createContext(undefined);
@@ -99,19 +102,10 @@ function getReconciledColorMode(colorMode) {
  *
  * @internal
  */
-export function ThemeProvider(_ref) {
+function ThemeProvider(_ref) {
   var children = _ref.children,
     defaultColorMode = _ref.defaultColorMode,
-    _ref$defaultTheme = _ref.defaultTheme,
-    _ref$defaultTheme2 = _ref$defaultTheme === void 0 ? defaultThemeSettings : _ref$defaultTheme,
-    _ref$defaultTheme2$da = _ref$defaultTheme2.dark,
-    dark = _ref$defaultTheme2$da === void 0 ? 'dark' : _ref$defaultTheme2$da,
-    _ref$defaultTheme2$li = _ref$defaultTheme2.light,
-    light = _ref$defaultTheme2$li === void 0 ? 'light' : _ref$defaultTheme2$li,
-    _ref$defaultTheme2$sp = _ref$defaultTheme2.spacing,
-    spacing = _ref$defaultTheme2$sp === void 0 ? 'spacing' : _ref$defaultTheme2$sp,
-    typography = _ref$defaultTheme2.typography,
-    shape = _ref$defaultTheme2.shape;
+    defaultTheme = _ref.defaultTheme;
   var _useState = useState(defaultColorMode),
     _useState2 = _slicedToArray(_useState, 2),
     chosenColorMode = _useState2[0],
@@ -120,12 +114,8 @@ export function ThemeProvider(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     reconciledColorMode = _useState4[0],
     setReconciledColorMode = _useState4[1];
-  var _useState5 = useState({
-      dark: dark,
-      light: light,
-      spacing: spacing,
-      typography: typography,
-      shape: shape
+  var _useState5 = useState(function () {
+      return _objectSpread(_objectSpread({}, defaultThemeSettings()), defaultTheme);
     }),
     _useState6 = _slicedToArray(_useState5, 2),
     theme = _useState6[0],

package/dist/types/app-provider.d.ts

@@ -35,5 +35,5 @@ interface AppProviderProps {
  *
  * Place it at the root of your application.
  */
-export declare function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, UNSAFE_isThemingDisabled, }: AppProviderProps): JSX.Element;
+declare function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, UNSAFE_isThemingDisabled, }: AppProviderProps): JSX.Element;
 export default AppProvider;

package/dist/types/router-link-provider/index.d.ts

@@ -31,7 +31,7 @@ export type RouterLinkProviderContextProps<RouterLinkConfig extends Record<strin
     routerLinkComponent?: RouterLinkComponent<RouterLinkConfig>;
 };
 export declare const RouterLinkProviderContext: React.Context<RouterLinkProviderContextProps<never>>;
-export type RouterLinkProviderProps = {
+type RouterLinkProviderProps = {
     /**
      * The rendering mechanism of router links within Design System components.
      */

package/dist/types/theme-provider.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type ThemeState } from '@atlaskit/tokens';
 export type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 export type ColorMode = 'light' | 'dark' | 'auto';
-export type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
+type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
 /**
  * __UNSAFE_useColorModeForMigration()__
  *
@@ -47,5 +47,5 @@ interface ThemeProviderProps {
  *
  * @internal
  */
-export declare function ThemeProvider({ children, defaultColorMode, defaultTheme: { dark, light, spacing, typography, shape, }, }: ThemeProviderProps): JSX.Element;
+declare function ThemeProvider({ children, defaultColorMode, defaultTheme }: ThemeProviderProps): JSX.Element;
 export default ThemeProvider;

package/dist/types-ts4.5/app-provider.d.ts

@@ -35,5 +35,5 @@ interface AppProviderProps {
  *
  * Place it at the root of your application.
  */
-export declare function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, UNSAFE_isThemingDisabled, }: AppProviderProps): JSX.Element;
+declare function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, UNSAFE_isThemingDisabled, }: AppProviderProps): JSX.Element;
 export default AppProvider;

package/dist/types-ts4.5/router-link-provider/index.d.ts

@@ -31,7 +31,7 @@ export type RouterLinkProviderContextProps<RouterLinkConfig extends Record<strin
     routerLinkComponent?: RouterLinkComponent<RouterLinkConfig>;
 };
 export declare const RouterLinkProviderContext: React.Context<RouterLinkProviderContextProps<never>>;
-export type RouterLinkProviderProps = {
+type RouterLinkProviderProps = {
     /**
      * The rendering mechanism of router links within Design System components.
      */

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { type ThemeState } from '@atlaskit/tokens';
 export type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 export type ColorMode = 'light' | 'dark' | 'auto';
-export type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
+type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
 /**
  * __UNSAFE_useColorModeForMigration()__
  *
@@ -47,5 +47,5 @@ interface ThemeProviderProps {
  *
  * @internal
  */
-export declare function ThemeProvider({ children, defaultColorMode, defaultTheme: { dark, light, spacing, typography, shape, }, }: ThemeProviderProps): JSX.Element;
+declare function ThemeProvider({ children, defaultColorMode, defaultTheme }: ThemeProviderProps): JSX.Element;
 export default ThemeProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/app-provider",
-	"version": "1.5.0",
+	"version": "1.6.1",
 	"description": "A top level provider for the Design System.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tokens": "^3.0.0",
+		"@atlaskit/tokens": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
@@ -49,16 +49,16 @@
 	},
 	"devDependencies": {
 		"@af/visual-regression": "*",
+		"@atlaskit/dropdown-menu": "^12.24.1",
 		"@atlaskit/ds-lib": "^3.3.0",
+		"@atlaskit/primitives": "^13.3.7",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/react": "^12.1.5",
-		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/user-event": "^14.4.3",
 		"react-dom": "^16.8.0",
 		"react-resource-router": "^0.20.0",
-		"typescript": "~5.4.2",
-		"wait-for-expect": "^1.2.0"
+		"typescript": "~5.4.2"
 	},
 	"techstack": {
 		"@atlassian/frontend": {
@@ -95,6 +95,9 @@
 	"platform-feature-flags": {
 		"platform_dst_fix_set_theme_race": {
 			"type": "boolean"
+		},
+		"platform-default-typography-modernized": {
+			"type": "boolean"
 		}
 	}
 }