@atlaskit/app-provider 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/app-provider
 
+## 0.3.0
+
+### Minor Changes
+
+- [#42091](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42091) [`4ec3142822b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ec3142822b) - Add the `routerLinkComponent` prop to support router link configuration within the Design System.
+
+## 0.2.0
+
+### Minor Changes
+
+- [#41931](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41931) [`5df5614a6b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5df5614a6b5) - defaultTheme now applies default sub-themes when ommited.
+
 ## 0.1.0
 
 ### Minor Changes

package/constellation/index/examples.mdx

@@ -2,14 +2,19 @@
 order: 0
 ---
 
-import AppProviderDefault from '../../examples/constellation/0-default';
-import AppProviderThemeSwitcher from '../../examples/constellation/1-theme-switcher';
+import defaultExample from '../../examples/constellation/0-default';
+import themeSwitcherExample from '../../examples/constellation/1-theme-switcher';
+import RouterLinkComponentExample from '../../examples/constellation/2-router-link-component';
 
 ## Theming
 
 AppProvider sets up theming for an app, enabling [design tokens](/tokens/design-tokens) to be used.
 
-<Example Component={AppProviderDefault} packageName="@atlaskit/app-provider" />
+<Example
+  Component={defaultExample.example}
+  source={defaultExample.code}
+  packageName="@atlaskit/app-provider"
+/>
 
 ## Color mode and theme switching
 
@@ -18,6 +23,21 @@ The `useColorMode` hook can be used to get the active color mode. When the color
 The `useTheme` hook can be used to get the active themes. The `useSetTheme` hook can be used to change themes.
 
 <Example
-  Component={AppProviderThemeSwitcher}
+  Component={themeSwitcherExample.example}
+  source={themeSwitcherExample.code}
+  packageName="@atlaskit/app-provider"
+/>
+
+## Router links
+
+The `routerLinkComponent` prop provides support for configuring router links within Design System components.
+
+Support for this is limited as Design System components are being updated, starting with `@atlaskit/button`.
+
+This example shows how links can be configured to utilize the router link component supplied by [React Resource Router](https://github.com/atlassian-labs/react-resource-router), however any routing library can be used.
+
+<Example
+  Component={RouterLinkComponentExample}
+  appearance="source-only"
   packageName="@atlaskit/app-provider"
 />

package/dist/cjs/app-provider.js

@@ -8,15 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.AppProvider = AppProvider;
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _routerLinkProvider = _interopRequireDefault(require("./router-link-provider"));
 var _themeProvider = _interopRequireDefault(require("./theme-provider"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var InsideAppProviderContext = /*#__PURE__*/(0, _react.createContext)(false);
-var defaultThemeSettings = {
-  dark: 'dark',
-  light: 'light',
-  spacing: 'spacing'
-};
 /**
  * __App provider__
  *
@@ -28,8 +24,8 @@ function AppProvider(_ref) {
   var children = _ref.children,
     _ref$defaultColorMode = _ref.defaultColorMode,
     defaultColorMode = _ref$defaultColorMode === void 0 ? 'light' : _ref$defaultColorMode,
-    _ref$defaultTheme = _ref.defaultTheme,
-    defaultTheme = _ref$defaultTheme === void 0 ? defaultThemeSettings : _ref$defaultTheme;
+    defaultTheme = _ref.defaultTheme,
+    routerLinkComponent = _ref.routerLinkComponent;
   var isInsideAppProvider = (0, _react.useContext)(InsideAppProviderContext);
   if (isInsideAppProvider) {
     throw new Error('App provider should not be nested within another app provider.');
@@ -39,6 +35,8 @@ function AppProvider(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_themeProvider.default, {
     defaultColorMode: defaultColorMode,
     defaultTheme: defaultTheme
-  }, children));
+  }, /*#__PURE__*/_react.default.createElement(_routerLinkProvider.default, {
+    routerLinkComponent: routerLinkComponent
+  }, children)));
 }
 var _default = exports.default = AppProvider;

package/dist/cjs/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "useColorMode", {
     return _themeProvider.useColorMode;
   }
 });
+Object.defineProperty(exports, "useRouterLink", {
+  enumerable: true,
+  get: function get() {
+    return _useRouterLink.default;
+  }
+});
 Object.defineProperty(exports, "useSetColorMode", {
   enumerable: true,
   get: function get() {
@@ -35,4 +41,5 @@ Object.defineProperty(exports, "useTheme", {
   }
 });
 var _appProvider = _interopRequireDefault(require("./app-provider"));
-var _themeProvider = require("./theme-provider");
+var _themeProvider = require("./theme-provider");
+var _useRouterLink = _interopRequireDefault(require("./router-link-provider/hooks/use-router-link"));

package/dist/cjs/router-link-provider/hooks/use-router-link.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _index = require("../index");
+/**
+ * __useRouterLink()__
+ *
+ * Hook: Returns app-configured router link component
+ */
+var useRouterLink = function useRouterLink() {
+  var _useContext = (0, _react.useContext)(_index.RouterLinkProviderContext),
+    routerLinkComponent = _useContext.routerLinkComponent;
+  return routerLinkComponent;
+};
+var _default = exports.default = useRouterLink;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RouterLinkProviderContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var RouterLinkProviderContext = exports.RouterLinkProviderContext = /*#__PURE__*/(0, _react.createContext)({});
+/**
+ * __RouterLinkProvider__
+ *
+ * Provides a configured router link component for use
+ * within Design System components.
+ */
+var RouterLinkProvider = function RouterLinkProvider(_ref) {
+  var routerLinkComponent = _ref.routerLinkComponent,
+    children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(RouterLinkProviderContext.Provider, {
+    value: {
+      routerLinkComponent: routerLinkComponent
+    }
+  }, children);
+};
+var _default = exports.default = RouterLinkProvider;

package/dist/cjs/theme-provider.js

@@ -20,6 +20,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 ColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 var SetColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 var ThemeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
@@ -97,7 +102,16 @@ function getReconciledColorMode(colorMode) {
 function ThemeProvider(_ref) {
   var children = _ref.children,
     defaultColorMode = _ref.defaultColorMode,
-    defaultTheme = _ref.defaultTheme;
+    _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;
   var _useState = (0, _react.useState)(defaultColorMode),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     chosenColorMode = _useState2[0],
@@ -106,7 +120,13 @@ function ThemeProvider(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     reconciledColorMode = _useState4[0],
     setReconciledColorMode = _useState4[1];
-  var _useState5 = (0, _react.useState)(defaultTheme),
+  var _useState5 = (0, _react.useState)({
+      dark: dark,
+      light: light,
+      spacing: spacing,
+      typography: typography,
+      shape: shape
+    }),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     theme = _useState6[0],
     setTheme = _useState6[1];

package/dist/es2019/app-provider.js

@@ -1,11 +1,7 @@
 import React, { createContext, useContext } from 'react';
+import RouterLinkProvider from './router-link-provider';
 import ThemeProvider from './theme-provider';
 const InsideAppProviderContext = /*#__PURE__*/createContext(false);
-const defaultThemeSettings = {
-  dark: 'dark',
-  light: 'light',
-  spacing: 'spacing'
-};
 /**
  * __App provider__
  *
@@ -16,7 +12,8 @@ const defaultThemeSettings = {
 export function AppProvider({
   children,
   defaultColorMode = 'light',
-  defaultTheme = defaultThemeSettings
+  defaultTheme,
+  routerLinkComponent
 }) {
   const isInsideAppProvider = useContext(InsideAppProviderContext);
   if (isInsideAppProvider) {
@@ -27,6 +24,8 @@ export function AppProvider({
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
     defaultColorMode: defaultColorMode,
     defaultTheme: defaultTheme
-  }, children));
+  }, /*#__PURE__*/React.createElement(RouterLinkProvider, {
+    routerLinkComponent: routerLinkComponent
+  }, children)));
 }
 export default AppProvider;

package/dist/es2019/index.js

@@ -1,2 +1,4 @@
 export { default } from './app-provider';
-export { useColorMode, useSetColorMode, useSetTheme, useTheme } from './theme-provider';
+export { useColorMode, useSetColorMode, useSetTheme, useTheme } from './theme-provider';
+import useRouterLink from './router-link-provider/hooks/use-router-link';
+export { useRouterLink };

package/dist/es2019/router-link-provider/hooks/use-router-link.js

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { RouterLinkProviderContext } from '../index';
+
+/**
+ * __useRouterLink()__
+ *
+ * Hook: Returns app-configured router link component
+ */
+const useRouterLink = () => {
+  const {
+    routerLinkComponent
+  } = useContext(RouterLinkProviderContext);
+  return routerLinkComponent;
+};
+export default useRouterLink;

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

@@ -0,0 +1,19 @@
+import React, { createContext } from 'react';
+export const RouterLinkProviderContext = /*#__PURE__*/createContext({});
+/**
+ * __RouterLinkProvider__
+ *
+ * Provides a configured router link component for use
+ * within Design System components.
+ */
+const RouterLinkProvider = ({
+  routerLinkComponent,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(RouterLinkProviderContext.Provider, {
+    value: {
+      routerLinkComponent
+    }
+  }, children);
+};
+export default RouterLinkProvider;

package/dist/es2019/theme-provider.js

@@ -1,6 +1,11 @@
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { setGlobalTheme } from '@atlaskit/tokens';
+const defaultThemeSettings = {
+  dark: 'dark',
+  light: 'light',
+  spacing: 'spacing'
+};
 const ColorModeContext = /*#__PURE__*/createContext(undefined);
 const SetColorModeContext = /*#__PURE__*/createContext(undefined);
 const ThemeContext = /*#__PURE__*/createContext(undefined);
@@ -78,11 +83,23 @@ function getReconciledColorMode(colorMode) {
 export function ThemeProvider({
   children,
   defaultColorMode,
-  defaultTheme
+  defaultTheme: {
+    dark = 'dark',
+    light = 'light',
+    spacing = 'spacing',
+    typography,
+    shape
+  } = defaultThemeSettings
 }) {
   const [chosenColorMode, setChosenColorMode] = useState(defaultColorMode);
   const [reconciledColorMode, setReconciledColorMode] = useState(getReconciledColorMode(defaultColorMode));
-  const [theme, setTheme] = useState(defaultTheme);
+  const [theme, setTheme] = useState({
+    dark,
+    light,
+    spacing,
+    typography,
+    shape
+  });
   const setColorMode = useCallback(colorMode => {
     setChosenColorMode(colorMode);
     setReconciledColorMode(getReconciledColorMode(colorMode));

package/dist/esm/app-provider.js

@@ -1,11 +1,7 @@
 import React, { createContext, useContext } from 'react';
+import RouterLinkProvider from './router-link-provider';
 import ThemeProvider from './theme-provider';
 var InsideAppProviderContext = /*#__PURE__*/createContext(false);
-var defaultThemeSettings = {
-  dark: 'dark',
-  light: 'light',
-  spacing: 'spacing'
-};
 /**
  * __App provider__
  *
@@ -17,8 +13,8 @@ export function AppProvider(_ref) {
   var children = _ref.children,
     _ref$defaultColorMode = _ref.defaultColorMode,
     defaultColorMode = _ref$defaultColorMode === void 0 ? 'light' : _ref$defaultColorMode,
-    _ref$defaultTheme = _ref.defaultTheme,
-    defaultTheme = _ref$defaultTheme === void 0 ? defaultThemeSettings : _ref$defaultTheme;
+    defaultTheme = _ref.defaultTheme,
+    routerLinkComponent = _ref.routerLinkComponent;
   var isInsideAppProvider = useContext(InsideAppProviderContext);
   if (isInsideAppProvider) {
     throw new Error('App provider should not be nested within another app provider.');
@@ -28,6 +24,8 @@ export function AppProvider(_ref) {
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
     defaultColorMode: defaultColorMode,
     defaultTheme: defaultTheme
-  }, children));
+  }, /*#__PURE__*/React.createElement(RouterLinkProvider, {
+    routerLinkComponent: routerLinkComponent
+  }, children)));
 }
 export default AppProvider;

package/dist/esm/index.js

@@ -1,2 +1,4 @@
 export { default } from './app-provider';
-export { useColorMode, useSetColorMode, useSetTheme, useTheme } from './theme-provider';
+export { useColorMode, useSetColorMode, useSetTheme, useTheme } from './theme-provider';
+import useRouterLink from './router-link-provider/hooks/use-router-link';
+export { useRouterLink };

package/dist/esm/router-link-provider/hooks/use-router-link.js

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { RouterLinkProviderContext } from '../index';
+
+/**
+ * __useRouterLink()__
+ *
+ * Hook: Returns app-configured router link component
+ */
+var useRouterLink = function useRouterLink() {
+  var _useContext = useContext(RouterLinkProviderContext),
+    routerLinkComponent = _useContext.routerLinkComponent;
+  return routerLinkComponent;
+};
+export default useRouterLink;

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

@@ -0,0 +1,18 @@
+import React, { createContext } from 'react';
+export var RouterLinkProviderContext = /*#__PURE__*/createContext({});
+/**
+ * __RouterLinkProvider__
+ *
+ * Provides a configured router link component for use
+ * within Design System components.
+ */
+var RouterLinkProvider = function RouterLinkProvider(_ref) {
+  var routerLinkComponent = _ref.routerLinkComponent,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(RouterLinkProviderContext.Provider, {
+    value: {
+      routerLinkComponent: routerLinkComponent
+    }
+  }, children);
+};
+export default RouterLinkProvider;

package/dist/esm/theme-provider.js

@@ -5,6 +5,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { setGlobalTheme } from '@atlaskit/tokens';
+var defaultThemeSettings = {
+  dark: 'dark',
+  light: 'light',
+  spacing: 'spacing'
+};
 var ColorModeContext = /*#__PURE__*/createContext(undefined);
 var SetColorModeContext = /*#__PURE__*/createContext(undefined);
 var ThemeContext = /*#__PURE__*/createContext(undefined);
@@ -82,7 +87,16 @@ function getReconciledColorMode(colorMode) {
 export function ThemeProvider(_ref) {
   var children = _ref.children,
     defaultColorMode = _ref.defaultColorMode,
-    defaultTheme = _ref.defaultTheme;
+    _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;
   var _useState = useState(defaultColorMode),
     _useState2 = _slicedToArray(_useState, 2),
     chosenColorMode = _useState2[0],
@@ -91,7 +105,13 @@ export function ThemeProvider(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     reconciledColorMode = _useState4[0],
     setReconciledColorMode = _useState4[1];
-  var _useState5 = useState(defaultTheme),
+  var _useState5 = useState({
+      dark: dark,
+      light: light,
+      spacing: spacing,
+      typography: typography,
+      shape: shape
+    }),
     _useState6 = _slicedToArray(_useState5, 2),
     theme = _useState6[0],
     setTheme = _useState6[1];

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type RouterLinkComponent } from './router-link-provider';
 import { type ColorMode, type Theme } from './theme-provider';
 interface AppProviderProps {
     /**
@@ -8,7 +9,11 @@ interface AppProviderProps {
     /**
      * Theme settings.
      */
-    defaultTheme?: Theme;
+    defaultTheme?: Partial<Theme>;
+    /**
+     * A configured router link component.
+     */
+    routerLinkComponent?: RouterLinkComponent<any>;
     /**
      * App content.
      */
@@ -21,5 +26,5 @@ interface AppProviderProps {
  *
  * Place it at the root of your application.
  */
-export declare function AppProvider({ children, defaultColorMode, defaultTheme, }: AppProviderProps): JSX.Element;
+export declare function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, }: AppProviderProps): JSX.Element;
 export default AppProvider;

package/dist/types/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './app-provider';
 export { useColorMode, useSetColorMode, useSetTheme, useTheme, } from './theme-provider';
+export { type RouterLinkComponentProps } from './router-link-provider';
+import useRouterLink from './router-link-provider/hooks/use-router-link';
+export { useRouterLink };

package/dist/types/router-link-provider/hooks/use-router-link.d.ts

@@ -0,0 +1,8 @@
+import { type RouterLinkComponent } from '../index';
+/**
+ * __useRouterLink()__
+ *
+ * Hook: Returns app-configured router link component
+ */
+declare const useRouterLink: () => RouterLinkComponent | undefined;
+export default useRouterLink;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+export type RouterLinkComponent<RouterLinkConfig extends {} = {}> = React.ComponentType<RouterLinkComponentProps<RouterLinkConfig>>;
+export type RouterLinkComponentProps<RouterLinkConfig extends {} = {}> = {
+    /**
+     * A string which can be mapped to the underlying router link,
+     * or optionally a custom object defined in the generic type for advanced use.
+     *
+     * @example
+     * ```
+     * const MyRouterLink: RouterLinkComponent<{
+     *  to: string;
+     *  replace?: boolean;
+     * }> ...
+     * ```
+     */
+    href: string | RouterLinkConfig;
+    children: React.ReactNode;
+};
+export type RouterLinkProviderContextProps<RouterLinkConfig extends {} = {}> = {
+    routerLinkComponent?: RouterLinkComponent<RouterLinkConfig>;
+};
+export declare const RouterLinkProviderContext: React.Context<RouterLinkProviderContextProps<{}>>;
+export type RouterLinkProviderProps = {
+    /**
+     * The rendering mechanism of router links within Design System components.
+     */
+    routerLinkComponent?: RouterLinkComponent<any>;
+};
+/**
+ * __RouterLinkProvider__
+ *
+ * Provides a configured router link component for use
+ * within Design System components.
+ */
+declare const RouterLinkProvider: ({ routerLinkComponent, children, }: RouterLinkProviderProps & {
+    children: React.ReactNode;
+}) => JSX.Element;
+export default RouterLinkProvider;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ThemeState } from '@atlaskit/tokens';
-export type Theme = Omit<ThemeState, 'colorMode'>;
+export type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 export type ColorMode = 'light' | 'dark' | 'auto';
 export type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
 /**
@@ -29,7 +29,7 @@ export declare function useTheme(): Theme;
 export declare function useSetTheme(): (value: Partial<Theme>) => void;
 interface ThemeProviderProps {
     defaultColorMode: ColorMode;
-    defaultTheme: Theme;
+    defaultTheme?: Partial<Theme>;
     children: React.ReactNode;
 }
 /**
@@ -39,5 +39,5 @@ interface ThemeProviderProps {
  *
  * @internal
  */
-export declare function ThemeProvider({ children, defaultColorMode, defaultTheme, }: ThemeProviderProps): JSX.Element;
+export declare function ThemeProvider({ children, defaultColorMode, defaultTheme: { dark, light, spacing, typography, shape, }, }: ThemeProviderProps): JSX.Element;
 export default ThemeProvider;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type RouterLinkComponent } from './router-link-provider';
 import { type ColorMode, type Theme } from './theme-provider';
 interface AppProviderProps {
     /**
@@ -8,7 +9,11 @@ interface AppProviderProps {
     /**
      * Theme settings.
      */
-    defaultTheme?: Theme;
+    defaultTheme?: Partial<Theme>;
+    /**
+     * A configured router link component.
+     */
+    routerLinkComponent?: RouterLinkComponent<any>;
     /**
      * App content.
      */
@@ -21,5 +26,5 @@ interface AppProviderProps {
  *
  * Place it at the root of your application.
  */
-export declare function AppProvider({ children, defaultColorMode, defaultTheme, }: AppProviderProps): JSX.Element;
+export declare function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, }: AppProviderProps): JSX.Element;
 export default AppProvider;

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

@@ -1,2 +1,5 @@
 export { default } from './app-provider';
 export { useColorMode, useSetColorMode, useSetTheme, useTheme, } from './theme-provider';
+export { type RouterLinkComponentProps } from './router-link-provider';
+import useRouterLink from './router-link-provider/hooks/use-router-link';
+export { useRouterLink };

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

@@ -0,0 +1,8 @@
+import { type RouterLinkComponent } from '../index';
+/**
+ * __useRouterLink()__
+ *
+ * Hook: Returns app-configured router link component
+ */
+declare const useRouterLink: () => RouterLinkComponent | undefined;
+export default useRouterLink;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+export type RouterLinkComponent<RouterLinkConfig extends {} = {}> = React.ComponentType<RouterLinkComponentProps<RouterLinkConfig>>;
+export type RouterLinkComponentProps<RouterLinkConfig extends {} = {}> = {
+    /**
+     * A string which can be mapped to the underlying router link,
+     * or optionally a custom object defined in the generic type for advanced use.
+     *
+     * @example
+     * ```
+     * const MyRouterLink: RouterLinkComponent<{
+     *  to: string;
+     *  replace?: boolean;
+     * }> ...
+     * ```
+     */
+    href: string | RouterLinkConfig;
+    children: React.ReactNode;
+};
+export type RouterLinkProviderContextProps<RouterLinkConfig extends {} = {}> = {
+    routerLinkComponent?: RouterLinkComponent<RouterLinkConfig>;
+};
+export declare const RouterLinkProviderContext: React.Context<RouterLinkProviderContextProps<{}>>;
+export type RouterLinkProviderProps = {
+    /**
+     * The rendering mechanism of router links within Design System components.
+     */
+    routerLinkComponent?: RouterLinkComponent<any>;
+};
+/**
+ * __RouterLinkProvider__
+ *
+ * Provides a configured router link component for use
+ * within Design System components.
+ */
+declare const RouterLinkProvider: ({ routerLinkComponent, children, }: RouterLinkProviderProps & {
+    children: React.ReactNode;
+}) => JSX.Element;
+export default RouterLinkProvider;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ThemeState } from '@atlaskit/tokens';
-export type Theme = Omit<ThemeState, 'colorMode'>;
+export type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 export type ColorMode = 'light' | 'dark' | 'auto';
 export type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
 /**
@@ -29,7 +29,7 @@ export declare function useTheme(): Theme;
 export declare function useSetTheme(): (value: Partial<Theme>) => void;
 interface ThemeProviderProps {
     defaultColorMode: ColorMode;
-    defaultTheme: Theme;
+    defaultTheme?: Partial<Theme>;
     children: React.ReactNode;
 }
 /**
@@ -39,5 +39,5 @@ interface ThemeProviderProps {
  *
  * @internal
  */
-export declare function ThemeProvider({ children, defaultColorMode, defaultTheme, }: ThemeProviderProps): JSX.Element;
+export declare function ThemeProvider({ children, defaultColorMode, defaultTheme: { dark, light, spacing, typography, shape, }, }: ThemeProviderProps): JSX.Element;
 export default ThemeProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/app-provider",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "A top level provider for the Design System.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -38,7 +38,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.19.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "bind-event-listener": "^2.1.1"
   },
@@ -57,6 +57,8 @@
     "@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",
+    "react-router-dom": "^4.2.2",
     "typescript": "~4.9.5",
     "wait-for-expect": "^1.2.0"
   },

package/report.api.md

@@ -23,6 +23,7 @@ function AppProvider({
   children,
   defaultColorMode,
   defaultTheme,
+  routerLinkComponent,
 }: AppProviderProps): JSX.Element;
 export default AppProvider;
 
@@ -30,7 +31,8 @@ export default AppProvider;
 interface AppProviderProps {
   children: React_2.ReactNode;
   defaultColorMode?: ColorMode;
-  defaultTheme?: Theme;
+  defaultTheme?: Partial<Theme>;
+  routerLinkComponent?: RouterLinkComponent<any>;
 }
 
 // @public (undocumented)
@@ -40,11 +42,24 @@ type ColorMode = 'auto' | 'dark' | 'light';
 type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
 
 // @public (undocumented)
-type Theme = Omit<ThemeState, 'colorMode'>;
+type RouterLinkComponent<RouterLinkConfig extends {} = {}> =
+  React_2.ComponentType<RouterLinkComponentProps<RouterLinkConfig>>;
+
+// @public (undocumented)
+export type RouterLinkComponentProps<RouterLinkConfig extends {} = {}> = {
+  href: RouterLinkConfig | string;
+  children: React_2.ReactNode;
+};
+
+// @public (undocumented)
+type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 
 // @public
 export function useColorMode(): ReconciledColorMode;
 
+// @public
+export const useRouterLink: () => RouterLinkComponent | undefined;
+
 // @public
 export function useSetColorMode(): (value: ColorMode) => void;
 

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

@@ -8,14 +8,15 @@ import { default as React_2 } from 'react';
 import { ThemeState } from '@atlaskit/tokens';
 
 // @public
-function AppProvider({ children, defaultColorMode, defaultTheme, }: AppProviderProps): JSX.Element;
+function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, }: AppProviderProps): JSX.Element;
 export default AppProvider;
 
 // @public (undocumented)
 interface AppProviderProps {
     children: React_2.ReactNode;
     defaultColorMode?: ColorMode;
-    defaultTheme?: Theme;
+    defaultTheme?: Partial<Theme>;
+    routerLinkComponent?: RouterLinkComponent<any>;
 }
 
 // @public (undocumented)
@@ -25,11 +26,23 @@ type ColorMode = 'auto' | 'dark' | 'light';
 type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
 
 // @public (undocumented)
-type Theme = Omit<ThemeState, 'colorMode'>;
+type RouterLinkComponent<RouterLinkConfig extends {} = {}> = React_2.ComponentType<RouterLinkComponentProps<RouterLinkConfig>>;
+
+// @public (undocumented)
+export type RouterLinkComponentProps<RouterLinkConfig extends {} = {}> = {
+    href: RouterLinkConfig | string;
+    children: React_2.ReactNode;
+};
+
+// @public (undocumented)
+type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 
 // @public
 export function useColorMode(): ReconciledColorMode;
 
+// @public
+export const useRouterLink: () => RouterLinkComponent | undefined;
+
 // @public
 export function useSetColorMode(): (value: ColorMode) => void;