@redocly/theme 0.4.16 → 0.5.0

package/lib/ApiOnboarding/AppCustomAttributes.d.ts

@@ -0,0 +1,5 @@
+interface AppCustomAttributesProps {
+    onChange: (value: Record<string, string>) => void;
+}
+export declare function AppCustomAttributes(_props: AppCustomAttributesProps): null;
+export {};

package/lib/ApiOnboarding/AppCustomAttributes.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppCustomAttributes = void 0;
+function AppCustomAttributes(_props) {
+    return null;
+}
+exports.AppCustomAttributes = AppCustomAttributes;
+//# sourceMappingURL=AppCustomAttributes.js.map

package/lib/EditPageButton/EditPageButton.js

@@ -21,6 +21,10 @@ const EditButton = (0, styled_components_1.default)(Link_1.Link) `
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   text-decoration: none;
+
+  @media print {
+    display: none;
+  }
 `;
 const ButtonIcon = styled_components_1.default.img `
   height: 14px;

package/lib/Footer/FooterColumn.js

@@ -15,7 +15,7 @@ function FooterColumn({ column }) {
             if (columnItem.type === 'error') {
                 return null;
             }
-            return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, columnItem.label)) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, "data-cy": columnItem.label }, columnItem.label));
+            return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, columnItem.label)) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, external: columnItem.external, target: columnItem.target, "data-cy": columnItem.label }, columnItem.label));
         })));
 }
 exports.FooterColumn = FooterColumn;

package/lib/Markdown/Admonition.js

@@ -25,6 +25,9 @@ const Wrapper = styled_components_1.default.div `
   font-weight: var(--admonition-font-weight);
   line-height: var(--admonition-line-height);
 
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+
   ${({ type }) => `
     background-color: var(--admonition-${type}-background-color);
     color: var(--admonition-${type}-text-color);

package/lib/Markdown/CodeSample/CodeSample.js

@@ -66,6 +66,10 @@ const CopyCodeButton = styled_components_1.default.div `
   &:hover {
     cursor: pointer;
   }
+
+  @media print {
+    display: none;
+  }
 `;
 const DoneIndicator = styled_components_1.default.div `
   padding: var(--code-block-controls-padding);
@@ -149,6 +153,10 @@ const Wrapper = styled_components_1.default.div `
     border-radius: var(--code-block-border-radius);
     font-family: var(--code-font-family);
     background-color: var(--code-block-background-color);
+
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+
     code {
       background-color: transparent;
       border: 0;

package/lib/Navbar/NavbarItem.js

@@ -16,7 +16,7 @@ function NavbarItem({ navItem, className }) {
         const item = navItem;
         const isActive = pathname === (0, utils_1.withPathPrefix)(item.link);
         return (react_1.default.createElement(exports.NavbarMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: className },
-            react_1.default.createElement(exports.NavbarLink, { to: item.link, active: isActive },
+            react_1.default.createElement(exports.NavbarLink, { to: item.link, external: item.external, target: item.target, active: isActive },
                 react_1.default.createElement(NavbarLabel, null, item.label))));
     }
     if (navItem.items) {

package/lib/PageNavigation/PageNavigation.js

@@ -23,5 +23,9 @@ const PageNavigationWrapper = styled_components_1.default.div `
   display: flex;
   justify-content: space-between;
   margin: 25px 0;
+
+  @media print {
+    display: none;
+  }
 `;
 //# sourceMappingURL=PageNavigation.js.map

package/lib/Sidebar/MenuLink.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { UniversalLinkProps } from '../ui/UniversalLink';
-export declare const MenuLink: import("styled-components").StyledComponent<(props: import("react").PropsWithChildren<object>) => JSX.Element, any, {
+import { Link } from '../mocks/Link';
+export declare const MenuLink: import("styled-components").StyledComponent<typeof Link, any, {
     'data-component-name': string;
-} & UniversalLinkProps, "data-component-name">;
+}, "data-component-name">;

package/lib/Sidebar/MenuLink.js

@@ -5,15 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuLink = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const UniversalLink_1 = require("../ui/UniversalLink");
-exports.MenuLink = (0, styled_components_1.default)(UniversalLink_1.UniversalLink).attrs(() => ({
+const Link_1 = require("../mocks/Link");
+exports.MenuLink = (0, styled_components_1.default)(Link_1.Link).attrs(() => ({
     'data-component-name': 'Sidebar/MenuLink',
 })) `
   text-decoration: none;
   color: var(--sidebar-item-text-color);
-
-  &&.external-url:after {
-    content: none;
-  }
 `;
 //# sourceMappingURL=MenuLink.js.map

package/lib/mocks/Link.js

@@ -1,16 +1,26 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
 const react_1 = __importDefault(require("react"));
-const lodash_1 = require("lodash");
 // TODO: use real typings here
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function Link(props) {
+    const { active: _, httpVerb: _1, hasActiveSubItem: _2 } = props, filteredProps = __rest(props, ["active", "httpVerb", "hasActiveSubItem"]);
     // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
-    const filteredProps = (0, lodash_1.omit)(props, ['active', 'httpVerb', 'hasActiveSubItem']);
     return react_1.default.createElement("a", Object.assign({ href: filteredProps.to }, filteredProps));
 }
 exports.Link = Link;

package/lib/ui/index.d.ts

@@ -5,6 +5,5 @@ export * from '../ui/Box';
 export * from '../ui/Dropdown';
 export * from '../ui/Flex';
 export * from '../ui/Jumbotron';
-export * from '../ui/UniversalLink';
 export declare const LandingLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;
 export declare const EmptyLayout: ({ children }: React.PropsWithChildren<object>) => React.ReactNode;

package/lib/ui/index.js

@@ -21,7 +21,6 @@ __exportStar(require("../ui/Box"), exports);
 __exportStar(require("../ui/Dropdown"), exports);
 __exportStar(require("../ui/Flex"), exports);
 __exportStar(require("../ui/Jumbotron"), exports);
-__exportStar(require("../ui/UniversalLink"), exports);
 const LandingLayout = ({ children }) => children;
 exports.LandingLayout = LandingLayout;
 exports.EmptyLayout = exports.LandingLayout;

package/package.json

@@ -1,38 +1,35 @@
 {
   "name": "@redocly/theme",
-  "version": "0.4.16",
+  "version": "0.5.0",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "exports": {
+    "./package.json": "./package.json",
     ".": "./lib/index.js",
     "./Sidebar/*": "./lib/Sidebar/*.js",
     "./*": "./lib/*/index.js",
     "./src/": "./src/"
   },
   "scripts": {
-    "start": "npm-run-all --parallel storybook generate-tokens:watch",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "npm run generate-tokens && build-storybook",
-    "generate-tokens": "ts-node scripts/generate-css-tokens.ts",
-    "generate-tokens:watch": "ts-node-dev --respawn scripts/generate-css-tokens.ts",
+    "start": "npm-run-all --parallel storybook storybook:tokens:watch",
+    "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
+    "ts:check": "tsc --noEmit --skipLibCheck",
     "clean": "rm -rf lib",
     "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build": "npm run clean && npm run compile",
-    "build:on-rebuild": "tsc-alias -p tsconfig.build.json",
-    "build:watch": "npm run clean && tsc-watch --project tsconfig.build.json --onSuccess \"npm run build:on-rebuild\"",
-    "lint": "eslint . --ext .ts,.tsx --cache",
-    "lint:fix": "eslint . --ext .ts,.tsx --fix",
-    "prettier-base": "prettier \"**/*.{json,js,jsx,ts,tsx,yml,yaml,html,md}\"",
-    "prettier": "npm run prettier-base -- --write",
-    "prettier:check": "npm run prettier-base -- --check",
-    "ts:check": "tsc --noEmit --skipLibCheck",
     "test": "jest",
+    "test:update": "jest -u",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "test:updateSnapshot": "jest --updateSnapshot",
+    "test:coverage:html": "jest --coverage --coverageReporters html",
+    "e2e": "npx chromatic -b storybook:build --auto-accept-changes main --exit-once-uploaded",
+    "storybook": "start-storybook -p 6006",
+    "storybook:build": "npm run storybook:tokens && build-storybook",
+    "storybook:tokens": "ts-node scripts/generate-css-tokens.ts",
+    "storybook:tokens:watch": "ts-node-dev --respawn scripts/generate-css-tokens.ts",
     "chromatic": "chromatic --exit-zero-on-changes"
   },
   "peerDependencies": {
@@ -41,7 +38,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
-    "styled-components": "^5.3.1",
+    "styled-components": "^5.3.6",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
@@ -55,7 +52,6 @@
     "@storybook/core-common": "^6.5.9",
     "@storybook/manager-webpack5": "^6.5.9",
     "@storybook/node-logger": "^6.5.9",
-    "@storybook/preset-create-react-app": "^4.1.0",
     "@storybook/react": "^6.5.9",
     "@storybook/testing-library": "^0.0.11",
     "@storybook/theming": "^6.5.9",
@@ -75,34 +71,30 @@
     "@types/styled-system": "^5.1.13",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
-    "chromatic": "^6.5.4",
-    "esbuild": "^0.14.38",
-    "jest": "^29.1.2",
-    "jest-environment-jsdom": "^29.1.2",
+    "chromatic": "^6.10.2",
+    "esbuild": "^0.15.11",
+    "jest": "^29.2.0",
+    "jest-environment-jsdom": "^29.2.0",
     "jest-styled-components": "^7.1.1",
     "jest-when": "^3.5.1",
-    "lint-staged": "^12.4.1",
-    "lodash": "^4.17.21",
     "lodash.throttle": "^4.1.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "2.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-refresh": "^0.13.0",
+    "react-refresh": "^0.14.0",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "5.0.1",
     "storybook-addon-pseudo-states": "^1.15.1",
-    "storybook-design-token": "^2.1.0",
-    "styled-components": "^5.3.5",
+    "storybook-design-token": "^2.7.1",
+    "styled-components": "^5.3.6",
     "styled-system": "^5.1.5",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.7.0",
-    "ts-node-dev": "^1.1.8",
-    "tsc-alias": "^1.6.7",
-    "tsc-watch": "^5.0.3",
+    "ts-node-dev": "^2.0.0",
+    "tsc-alias": "^1.7.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.6.4",
-    "webpack": "^5.72.0"
+    "typescript": "^4.8.4",
+    "webpack": "^5.72.0",
+    "concurrently": "^7.4.0"
   },
   "dependencies": {
     "timeago.js": "^4.0.2"

package/src/ApiOnboarding/AppCustomAttributes.tsx

@@ -0,0 +1,6 @@
+interface AppCustomAttributesProps {
+  onChange: (value: Record<string, string>) => void;
+}
+export function AppCustomAttributes(_props: AppCustomAttributesProps) {
+  return null;
+}

package/src/EditPageButton/EditPageButton.tsx

@@ -26,6 +26,10 @@ const EditButton = styled(Link)`
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   text-decoration: none;
+
+  @media print {
+    display: none;
+  }
 `;
 
 const ButtonIcon = styled.img`

package/src/Footer/FooterColumn.tsx

@@ -22,7 +22,13 @@ export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
             {columnItem.label}
           </FooterSeparator>
         ) : (
-          <FooterLink key={columnItemIndex} to={columnItem.link} data-cy={columnItem.label}>
+          <FooterLink
+            key={columnItemIndex}
+            to={columnItem.link}
+            external={columnItem.external}
+            target={columnItem.target}
+            data-cy={columnItem.label}
+          >
             {columnItem.label}
           </FooterLink>
         );

package/src/Markdown/Admonition.tsx

@@ -36,6 +36,9 @@ const Wrapper = styled.div<AdmonitionTypeProps>`
   font-weight: var(--admonition-font-weight);
   line-height: var(--admonition-line-height);
 
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+
   ${({ type }) => `
     background-color: var(--admonition-${type}-background-color);
     color: var(--admonition-${type}-text-color);

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -64,6 +64,10 @@ const CopyCodeButton = styled.div`
   &:hover {
     cursor: pointer;
   }
+
+  @media print {
+    display: none;
+  }
 `;
 
 const DoneIndicator = styled.div`
@@ -150,6 +154,10 @@ const Wrapper = styled.div`
     border-radius: var(--code-block-border-radius);
     font-family: var(--code-font-family);
     background-color: var(--code-block-background-color);
+
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+
     code {
       background-color: transparent;
       border: 0;

package/src/Navbar/NavbarItem.tsx

@@ -28,7 +28,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
         data-component-name="Navbar/NavbarItem"
         className={className}
       >
-        <NavbarLink to={item.link} active={isActive}>
+        <NavbarLink to={item.link} external={item.external} target={item.target} active={isActive}>
           <NavbarLabel>{item.label}</NavbarLabel>
         </NavbarLink>
       </NavbarMenuItem>

package/src/PageNavigation/PageNavigation.tsx

@@ -24,4 +24,8 @@ const PageNavigationWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   margin: 25px 0;
+
+  @media print {
+    display: none;
+  }
 `;

package/src/Sidebar/MenuLink.tsx

@@ -1,15 +1,10 @@
 import styled from 'styled-components';
 
-import { UniversalLink } from '@theme/ui/UniversalLink';
-import type { UniversalLinkProps } from '@theme/ui/UniversalLink';
+import { Link } from '@portal/Link';
 
-export const MenuLink = styled(UniversalLink).attrs(() => ({
+export const MenuLink = styled(Link).attrs(() => ({
   'data-component-name': 'Sidebar/MenuLink',
-}))<UniversalLinkProps>`
+}))`
   text-decoration: none;
   color: var(--sidebar-item-text-color);
-
-  &&.external-url:after {
-    content: none;
-  }
 `;

package/src/mocks/Link.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { omit } from 'lodash';
 
 // TODO: use real typings here
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function Link(props: any): JSX.Element {
+  const { active: _, httpVerb: _1, hasActiveSubItem: _2, ...filteredProps } = props;
   // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
-  const filteredProps = omit(props, ['active', 'httpVerb', 'hasActiveSubItem']);
   return <a href={filteredProps.to} {...filteredProps} />;
 }

package/src/types/portal/src/shared/types/nav.d.ts

@@ -6,6 +6,7 @@ export declare type ResolvedNavLinkItem = {
   label: string;
   items?: ResolvedNavItem[];
   external?: boolean;
+  target?: '_self' | '_blank';
   version?: string;
   isDefault?: boolean;
   versionFolderId?: string;
@@ -20,6 +21,8 @@ export declare type ResolvedNavGroupItem = {
   link?: string;
   label?: string;
   items?: ResolvedNavItem[];
+  external?: never;
+  target?: never;
   expanded?: string;
   version?: string;
   isDefault?: boolean;

package/src/ui/index.tsx

@@ -6,7 +6,6 @@ export * from '@theme/ui/Box';
 export * from '@theme/ui/Dropdown';
 export * from '@theme/ui/Flex';
 export * from '@theme/ui/Jumbotron';
-export * from '@theme/ui/UniversalLink';
 
 export const LandingLayout = ({ children }: React.PropsWithChildren<object>): React.ReactNode =>
   children;

package/lib/ui/UniversalLink.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import type { LinkProps } from 'react-router-dom';
-export declare const withPropsFilter: (filterList: string[]) => (WrappedComponent: React.FunctionComponent) => (props: React.PropsWithChildren<object>) => JSX.Element;
-export interface PortalLinkProps<TState> extends LinkProps<TState> {
-    activeClassName?: string;
-    activeStyle?: object;
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-    partiallyActive?: boolean;
-    replace?: boolean;
-    state?: TState;
-    to: string;
-}
-export interface UniversalLinkProps extends Partial<PortalLinkProps<object>> {
-    external?: boolean;
-    ref?: any;
-}
-export declare const UniversalLink: (props: React.PropsWithChildren<object>) => JSX.Element;

package/lib/ui/UniversalLink.js

@@ -1,79 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UniversalLink = exports.withPropsFilter = void 0;
-const React = __importStar(require("react"));
-const react_router_dom_1 = require("react-router-dom");
-const styled_components_1 = __importDefault(require("styled-components"));
-const isUrl_1 = require("../utils/isUrl");
-const Link_1 = require("../mocks/Link");
-const StyledExternalLink = styled_components_1.default.a `
-  &.external-url {
-    position: relative;
-
-    :after {
-      content: '';
-      display: inline-block;
-      position: absolute;
-      background: var(--text-color);
-      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E");
-      mask-repeat: no-repeat;
-      width: 10px;
-      height: 10px;
-      top: 50%;
-      right: -15px;
-      transform: translateY(-50%);
-    }
-  }
-`;
-// TODO: We're using our own Link component so probably filtering is not necessary here.
-// filter out unnecessary props
-const propsList = [
-    'color',
-    'size',
-    'variant',
-    'bgColor',
-    'bgImage',
-    'disableArrow',
-    'withIcon',
-    'maxWidth',
-    'inversed',
-    'transparent',
-    'large',
-];
-const withPropsFilter = (filterList) => (WrappedComponent) => function WithPropsFilter(props) {
-    const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => !filterList.includes(key)));
-    return React.createElement(WrappedComponent, Object.assign({}, filteredProps));
-};
-exports.withPropsFilter = withPropsFilter;
-exports.UniversalLink = (0, exports.withPropsFilter)(propsList)((props) => {
-    var _a;
-    return (typeof props.to === 'string' && ((0, isUrl_1.isUrl)(props.to) || props.to.startsWith('mailto:'))) ||
-        props.external ? (React.createElement(StyledExternalLink, { style: props.style, href: props.to, target: props.target || (props.external && '_blank') || '_self', className: `${props.external ? 'external-url' : ''} ${props.className}`, rel: props.rel, "data-cy": `universalLink-${typeof props.children === 'string' ? props.children : 'with-nested-jsx'}` }, props.children)) : props.to == null ? (React.createElement("a", { onClick: props.onClick, className: props.className, style: props.style }, props.children)) : (React.createElement(Link_1.Link, Object.assign({}, props, { to: props.to, state: Object.assign({ previousPath: (_a = (0, react_router_dom_1.useLocation)()) === null || _a === void 0 ? void 0 : _a.pathname }, props.state) })));
-});
-//# sourceMappingURL=UniversalLink.js.map

package/src/ui/UniversalLink.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import { useLocation } from 'react-router-dom';
-import styled from 'styled-components';
-
-import type { LinkProps } from 'react-router-dom';
-
-import { isUrl } from '@theme/utils/isUrl';
-import { Link } from '@portal/Link';
-
-const StyledExternalLink = styled.a`
-  &.external-url {
-    position: relative;
-
-    :after {
-      content: '';
-      display: inline-block;
-      position: absolute;
-      background: var(--text-color);
-      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E");
-      mask-repeat: no-repeat;
-      width: 10px;
-      height: 10px;
-      top: 50%;
-      right: -15px;
-      transform: translateY(-50%);
-    }
-  }
-`;
-
-// TODO: We're using our own Link component so probably filtering is not necessary here.
-// filter out unnecessary props
-const propsList = [
-  'color',
-  'size',
-  'variant',
-  'bgColor',
-  'bgImage',
-  'disableArrow',
-  'withIcon',
-  'maxWidth',
-  'inversed',
-  'transparent',
-  'large',
-];
-
-export const withPropsFilter =
-  (filterList: string[]) => (WrappedComponent: React.FunctionComponent) =>
-    function WithPropsFilter(props: React.PropsWithChildren<object>): JSX.Element {
-      const filteredProps = Object.fromEntries(
-        Object.entries(props).filter(([key]) => !filterList.includes(key)),
-      );
-
-      return <WrappedComponent {...filteredProps} />;
-    };
-
-export interface PortalLinkProps<TState> extends LinkProps<TState> {
-  activeClassName?: string;
-  activeStyle?: object;
-  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-  partiallyActive?: boolean;
-  replace?: boolean;
-  state?: TState;
-  to: string;
-}
-
-export interface UniversalLinkProps extends Partial<PortalLinkProps<object>> {
-  external?: boolean;
-  ref?: any;
-}
-
-export const UniversalLink = withPropsFilter(propsList)((props: UniversalLinkProps) => {
-  return (typeof props.to === 'string' && (isUrl(props.to) || props.to.startsWith('mailto:'))) ||
-    props.external ? (
-    <StyledExternalLink
-      style={props.style}
-      href={props.to}
-      target={props.target || (props.external && '_blank') || '_self'}
-      className={`${props.external ? 'external-url' : ''} ${props.className}`}
-      rel={props.rel}
-      data-cy={`universalLink-${
-        typeof props.children === 'string' ? props.children : 'with-nested-jsx'
-      }`}
-    >
-      {props.children}
-    </StyledExternalLink>
-  ) : props.to == null ? (
-    <a onClick={props.onClick} className={props.className} style={props.style}>
-      {props.children}
-    </a>
-  ) : (
-    <Link
-      {...props}
-      to={props.to}
-      state={{ previousPath: useLocation()?.pathname, ...props.state }}
-    />
-  );
-});