@atlaskit/app-provider 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/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/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": "0.4.0",
   "description": "A top level provider for the Design System.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",

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

@@ -26,10 +26,10 @@ 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;
 };
@@ -41,7 +41,7 @@ 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;