@atlaskit/app-provider 0.3.1 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/app-provider
 
+## 1.0.0
+
+### Major Changes
+
+- [#69683](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69683) [`203c0f3c8b03`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/203c0f3c8b03) - Stable v1 release of app provider
+
+## 0.4.0
+
+### Minor Changes
+
+- [#42305](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42305) [`4c9d4a7be34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c9d4a7be34) - - Router link components are now required to forward refs
+  - The `useRouterLink()` hook now supports generic router link configuration: `useRouterLink<YourLinkConfigObject>()`
+
+### Patch Changes
+
+- [#42305](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42305) [`4c9d4a7be34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c9d4a7be34) - - Fixes a bug with router link component generic `href` prop typings where non-object types were allowed
+
 ## 0.3.1
 
 ### Patch Changes

package/constellation/index/examples.mdx

@@ -32,7 +32,7 @@ The `useTheme` hook can be used to get the active themes. The `useSetTheme` hook
 
 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`.
+Support for this is limited as Design System components are being updated, starting with [Button](/components/button/button-new/examples).
 
 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.
 

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

@@ -9,11 +9,23 @@ var _index = require("../index");
 /**
  * __useRouterLink()__
  *
- * Hook: Returns app-configured router link component
+ * Hook: Returns app-configured router link component.
+ *
+ * A generic can be passed to define advanced link configuration:
+ * ```
+ * type MyRouterLinkConfig = {
+ *  to: string;
+ *  replace?: boolean;
+ * }
+ *
+ * const RouterLink = useRouterLink<MyRouterLinkConfig>();
+ * ```
  */
 var useRouterLink = function useRouterLink() {
   var _useContext = (0, _react.useContext)(_index.RouterLinkProviderContext),
     routerLinkComponent = _useContext.routerLinkComponent;
-  return routerLinkComponent;
+  if (routerLinkComponent) {
+    return routerLinkComponent;
+  }
 };
 var _default = exports.default = useRouterLink;

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

@@ -4,12 +4,24 @@ import { RouterLinkProviderContext } from '../index';
 /**
  * __useRouterLink()__
  *
- * Hook: Returns app-configured router link component
+ * Hook: Returns app-configured router link component.
+ *
+ * A generic can be passed to define advanced link configuration:
+ * ```
+ * type MyRouterLinkConfig = {
+ *  to: string;
+ *  replace?: boolean;
+ * }
+ *
+ * const RouterLink = useRouterLink<MyRouterLinkConfig>();
+ * ```
  */
 const useRouterLink = () => {
   const {
     routerLinkComponent
   } = useContext(RouterLinkProviderContext);
-  return routerLinkComponent;
+  if (routerLinkComponent) {
+    return routerLinkComponent;
+  }
 };
 export default useRouterLink;

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

@@ -4,11 +4,23 @@ import { RouterLinkProviderContext } from '../index';
 /**
  * __useRouterLink()__
  *
- * Hook: Returns app-configured router link component
+ * Hook: Returns app-configured router link component.
+ *
+ * A generic can be passed to define advanced link configuration:
+ * ```
+ * type MyRouterLinkConfig = {
+ *  to: string;
+ *  replace?: boolean;
+ * }
+ *
+ * const RouterLink = useRouterLink<MyRouterLinkConfig>();
+ * ```
  */
 var useRouterLink = function useRouterLink() {
   var _useContext = useContext(RouterLinkProviderContext),
     routerLinkComponent = _useContext.routerLinkComponent;
-  return routerLinkComponent;
+  if (routerLinkComponent) {
+    return routerLinkComponent;
+  }
 };
 export default useRouterLink;

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

@@ -2,7 +2,17 @@ import { type RouterLinkComponent } from '../index';
 /**
  * __useRouterLink()__
  *
- * Hook: Returns app-configured router link component
+ * Hook: Returns app-configured router link component.
+ *
+ * A generic can be passed to define advanced link configuration:
+ * ```
+ * type MyRouterLinkConfig = {
+ *  to: string;
+ *  replace?: boolean;
+ * }
+ *
+ * const RouterLink = useRouterLink<MyRouterLinkConfig>();
+ * ```
  */
-declare const useRouterLink: () => RouterLinkComponent | undefined;
+declare const useRouterLink: <RouterLinkConfig extends Record<string, any> = never>() => RouterLinkComponent<RouterLinkConfig> | undefined;
 export default useRouterLink;

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

@@ -1,25 +1,33 @@
 import React from 'react';
-export type RouterLinkComponent<RouterLinkConfig extends {} = {}> = React.ComponentType<RouterLinkComponentProps<RouterLinkConfig>>;
-export type RouterLinkComponentProps<RouterLinkConfig extends {} = {}> = {
+export type RouterLinkComponent<RouterLinkConfig extends Record<string, any> = never> = React.ForwardRefExoticComponent<RouterLinkComponentProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>>;
+export type RouterLinkComponentProps<RouterLinkConfig extends Record<string, any> = never> = {
     /**
      * 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;
-     * }> ...
+     * const MyRouterLink = forwardRef(
+     * (
+     *   {
+     *     href,
+     *     children,
+     *     ...rest
+     *   }: RouterLinkComponentProps<{
+     *     href: string;
+     *     replace: boolean;
+     *   }>,
+     *   ref: Ref<HTMLAnchorElement>,
+     * ) => { ...
      * ```
      */
     href: string | RouterLinkConfig;
     children: React.ReactNode;
 };
-export type RouterLinkProviderContextProps<RouterLinkConfig extends {} = {}> = {
+export type RouterLinkProviderContextProps<RouterLinkConfig extends Record<string, any> = never> = {
     routerLinkComponent?: RouterLinkComponent<RouterLinkConfig>;
 };
-export declare const RouterLinkProviderContext: React.Context<RouterLinkProviderContextProps<{}>>;
+export declare const RouterLinkProviderContext: React.Context<RouterLinkProviderContextProps<never>>;
 export type RouterLinkProviderProps = {
     /**
      * The rendering mechanism of router links within Design System components.

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

@@ -2,7 +2,17 @@ import { type RouterLinkComponent } from '../index';
 /**
  * __useRouterLink()__
  *
- * Hook: Returns app-configured router link component
+ * Hook: Returns app-configured router link component.
+ *
+ * A generic can be passed to define advanced link configuration:
+ * ```
+ * type MyRouterLinkConfig = {
+ *  to: string;
+ *  replace?: boolean;
+ * }
+ *
+ * const RouterLink = useRouterLink<MyRouterLinkConfig>();
+ * ```
  */
-declare const useRouterLink: () => RouterLinkComponent | undefined;
+declare const useRouterLink: <RouterLinkConfig extends Record<string, any> = never>() => RouterLinkComponent<RouterLinkConfig> | undefined;
 export default useRouterLink;

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

@@ -1,25 +1,33 @@
 import React from 'react';
-export type RouterLinkComponent<RouterLinkConfig extends {} = {}> = React.ComponentType<RouterLinkComponentProps<RouterLinkConfig>>;
-export type RouterLinkComponentProps<RouterLinkConfig extends {} = {}> = {
+export type RouterLinkComponent<RouterLinkConfig extends Record<string, any> = never> = React.ForwardRefExoticComponent<RouterLinkComponentProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>>;
+export type RouterLinkComponentProps<RouterLinkConfig extends Record<string, any> = never> = {
     /**
      * 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;
-     * }> ...
+     * const MyRouterLink = forwardRef(
+     * (
+     *   {
+     *     href,
+     *     children,
+     *     ...rest
+     *   }: RouterLinkComponentProps<{
+     *     href: string;
+     *     replace: boolean;
+     *   }>,
+     *   ref: Ref<HTMLAnchorElement>,
+     * ) => { ...
      * ```
      */
     href: string | RouterLinkConfig;
     children: React.ReactNode;
 };
-export type RouterLinkProviderContextProps<RouterLinkConfig extends {} = {}> = {
+export type RouterLinkProviderContextProps<RouterLinkConfig extends Record<string, any> = never> = {
     routerLinkComponent?: RouterLinkComponent<RouterLinkConfig>;
 };
-export declare const RouterLinkProviderContext: React.Context<RouterLinkProviderContextProps<{}>>;
+export declare const RouterLinkProviderContext: React.Context<RouterLinkProviderContextProps<never>>;
 export type RouterLinkProviderProps = {
     /**
      * The rendering mechanism of router links within Design System components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/app-provider",
-  "version": "0.3.1",
+  "version": "1.0.0",
   "description": "A top level provider for the Design System.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -15,7 +15,7 @@
       "name": "App provider",
       "category": "Components",
       "status": {
-        "type": "alpha"
+        "type": "beta"
       }
     }
   },
@@ -38,7 +38,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@babel/runtime": "^7.0.0",
     "bind-event-listener": "^2.1.1"
   },
@@ -49,7 +49,6 @@
     "@af/visual-regression": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",

package/report.api.md

@@ -42,11 +42,16 @@ type ColorMode = 'auto' | 'dark' | 'light';
 type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
 
 // @public (undocumented)
-type RouterLinkComponent<RouterLinkConfig extends {} = {}> =
-  React_2.ComponentType<RouterLinkComponentProps<RouterLinkConfig>>;
+type RouterLinkComponent<RouterLinkConfig extends Record<string, any> = never> =
+  React_2.ForwardRefExoticComponent<
+    RouterLinkComponentProps<RouterLinkConfig> &
+      React_2.RefAttributes<HTMLAnchorElement>
+  >;
 
 // @public (undocumented)
-export type RouterLinkComponentProps<RouterLinkConfig extends {} = {}> = {
+export type RouterLinkComponentProps<
+  RouterLinkConfig extends Record<string, any> = never,
+> = {
   href: RouterLinkConfig | string;
   children: React_2.ReactNode;
 };
@@ -58,7 +63,9 @@ type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 export function useColorMode(): ReconciledColorMode;
 
 // @public
-export const useRouterLink: () => RouterLinkComponent | undefined;
+export const useRouterLink: <
+  RouterLinkConfig extends Record<string, any> = never,
+>() => RouterLinkComponent<RouterLinkConfig> | undefined;
 
 // @public
 export function useSetColorMode(): (value: ColorMode) => void;

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

@@ -1,57 +0,0 @@
-## API Report File for "@atlaskit/app-provider"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { default as React_2 } from 'react';
-import { ThemeState } from '@atlaskit/tokens';
-
-// @public
-function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, }: AppProviderProps): JSX.Element;
-export default AppProvider;
-
-// @public (undocumented)
-interface AppProviderProps {
-    children: React_2.ReactNode;
-    defaultColorMode?: ColorMode;
-    defaultTheme?: Partial<Theme>;
-    routerLinkComponent?: RouterLinkComponent<any>;
-}
-
-// @public (undocumented)
-type ColorMode = 'auto' | 'dark' | 'light';
-
-// @public (undocumented)
-type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
-
-// @public (undocumented)
-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;
-
-// @public
-export function useSetTheme(): (value: Partial<Theme>) => void;
-
-// @public
-export function useTheme(): Theme;
-
-// (No @packageDocumentation comment for this package)
-
-```