@transferwise/components 41.5.2-next-41fa7e8ce4.87 → 41.5.2-next-b7bb815196.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "41.5.2-next-41fa7e8ce4.87+41fa7e8ce4",
+  "version": "41.5.2-next-b7bb815196.87+b7bb815196",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "main": "./build/umd/polyfill/main.js",
@@ -67,13 +67,14 @@
     "@storybook/addon-links": "^6.4.19",
     "@transferwise/icons": "^3.2.1",
     "@transferwise/less-config": "^3.0.6",
-    "@transferwise/neptune-css": "^12.5.8",
+    "@transferwise/neptune-css": "^12.5.9-next-b7bb815196.204+b7bb815196",
     "@transferwise/neptune-tokens": "8.0.0-next.20",
     "@transferwise/test-config": "^5.0.0",
     "@types/jest": "^26.0.20",
     "@types/jscodeshift": "^0.11.0",
     "@types/node": "^14.14.31",
     "@types/react-transition-group": "4.4.4",
+    "@wise/components-theming": "^0.1.1-next-b7bb815196.2417+b7bb815196",
     "babel-plugin-inline-react-svg": "^2.0.1",
     "html-loader": "^1.3.2",
     "lodash.times": "^4.3.2",
@@ -87,6 +88,7 @@
   "peerDependencies": {
     "@transferwise/icons": "^3.2.1",
     "@transferwise/neptune-css": "^12",
+    "@wise/components-theming": "^0.1.0",
     "currency-flags": "4.0.0-beta.11",
     "prop-types": "^15.7.2",
     "react": ">=16.14",
@@ -132,5 +134,5 @@
     "**/chokidar/glob-parent": "5.1.2",
     "**/fast-glob/glob-parent": "5.1.2"
   },
-  "gitHead": "41fa7e8ce415ac552e710231b9b6866428443481"
+  "gitHead": "b7bb815196ab445648a3d802ea54a7f1ce7936e6"
 }

package/build/es/no-polyfill/common/hocs/index.js

@@ -1 +0,0 @@
-export{default as withTheme}from"./theme";

package/build/es/no-polyfill/common/hocs/theme/index.js

@@ -1 +0,0 @@
-export{withTheme as default}from"./withTheme";

package/build/es/no-polyfill/common/hocs/theme/withTheme.js

@@ -1,2 +0,0 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{useTheme}from"../../hooks";// eslint-disable-next-line @typescript-eslint/no-explicit-any
-import{jsx as _jsx}from"react/jsx-runtime";function getDisplayName(a){return a.displayName||a.name||"Component"}export function withTheme(a){var b=function(b){var c=useTheme(),d=c.theme;return/*#__PURE__*/_jsx(a,_objectSpread({theme:d},b))};return b.displayName="withTheme(".concat(getDisplayName(a),")"),b.WrappedComponent=a,b}

package/build/es/no-polyfill/common/hocs/theme/withTheme.spec.js

@@ -1 +0,0 @@
-import{render,screen}from"@testing-library/react";import{Theme}from"../..";import{ThemeProvider}from"../../../provider";import{withTheme}from"./withTheme";import{jsx as _jsx}from"react/jsx-runtime";var Component=withTheme(function(a){var b=a.theme,c=a.className;return/*#__PURE__*/_jsx("div",{className:c,"data-testid":"themed","data-theme":b})});describe("withTheme",function(){it("returns default light theme",function(){render(/*#__PURE__*/_jsx(Component,{className:"test-class"}));var a=screen.getByTestId("themed");expect(a).toHaveClass("test-class"),expect(a).toHaveAttribute("data-theme",Theme.LIGHT)}),it("returns provided theme",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(Component,{})})),expect(screen.getByTestId("themed")).toHaveAttribute("data-theme",Theme.NAVY)}),it("returns closest theme provider value",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.DARK,children:/*#__PURE__*/_jsx(Component,{})})})),expect(screen.getByTestId("themed")).toHaveAttribute("data-theme",Theme.DARK)})});

package/build/es/no-polyfill/common/hooks/useTheme/index.js

@@ -1 +0,0 @@
-export{useTheme as default}from"./useTheme";

package/build/es/no-polyfill/common/hooks/useTheme/useTheme.js

@@ -1 +0,0 @@
-import{useContext,useMemo}from"react";import{ThemeContext}from"../../../provider/theme/ThemeProvider";import{getThemeClassName,modernThemes}from"../../theme";export var useTheme=function(){var a=useContext(ThemeContext);return{theme:a,isThemeModern:useMemo(function(){return modernThemes.has(a)},[a]),className:useMemo(function(){return getThemeClassName(a)},[a])}};

package/build/es/no-polyfill/common/hooks/useTheme/useTheme.spec.js

@@ -1 +0,0 @@
-import{renderHook}from"@testing-library/react-hooks";import{Theme}from"../../../common/theme";import{ThemeProvider}from"../../../provider";import{useTheme}from"./useTheme";describe("useTheme",function(){it("returns default light theme",function(){var a=renderHook(function(){return useTheme()}),b=a.result.current;expect(b.theme).toStrictEqual(Theme.LIGHT)}),it("returns provided theme",function(){var a=renderHook(function(){return useTheme()},{wrapper:ThemeProvider,initialProps:{theme:Theme.NAVY}}),b=a.result.current;expect(b.theme).toStrictEqual(Theme.NAVY)})});

package/build/es/no-polyfill/provider/theme/ThemeProvider.js

@@ -1,3 +0,0 @@
-import React from"react";import{Children,cloneElement,createContext,isValidElement}from"react";import{getThemeClassName,Theme}from"../../common/theme";import{jsx as _jsx}from"react/jsx-runtime";export var ThemeContext=/*#__PURE__*/createContext(Theme.LIGHT);export var ThemeProvider=function(a){var b=a.theme,c=a.children,d=Children.map(c,function(a){var c;if(!/*#__PURE__*/isValidElement(a))return"production"!==process.env.NODE_ENV&&console.warn("[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!"),a;// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-var d=[getThemeClassName(b),null===a||void 0===a||null===(c=a.props)||void 0===c?void 0:c.className].filter(Boolean).join(" ");if(/*#__PURE__*/isValidElement(a))// eslint-disable-next-line @typescript-eslint/no-explicit-any
-return/*#__PURE__*/cloneElement(a,{className:d})});return/*#__PURE__*/_jsx(ThemeContext.Provider,{value:b,children:d})};

package/build/es/no-polyfill/provider/theme/ThemeProvider.spec.js

@@ -1,2 +0,0 @@
-import{render,screen}from"@testing-library/react";import{DirectionProvider}from"..";import{Button}from"../..";import{Direction}from"../../common/direction";import{Theme}from"../../common/theme";import{ThemeProvider}from"./ThemeProvider";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";describe("ThemeProvider",function(){it("appends theme to children",function(){render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.LIGHT,children:[/*#__PURE__*/_jsx("div",{children:"children 1"}),/*#__PURE__*/_jsx("div",{children:"children 2"})]})),expect(screen.getByText("children 1")).toHaveClass("np-theme-light"),expect(screen.getByText("children 2")).toHaveClass("np-theme-light")}),it("concatenate className with children",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.LIGHT,children:/*#__PURE__*/_jsx("div",{className:"other class names",children:"children"})})),expect(screen.getByText("children")).toHaveClass("np-theme-light other class names")}),it("can nest theme providers",function(){render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.LIGHT,children:[/*#__PURE__*/_jsx("div",{children:"light"}),/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.NAVY,children:[/*#__PURE__*/_jsx("div",{children:"navy"}),/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.DARK,children:/*#__PURE__*/_jsx("div",{children:"dark"})})]})]})),expect(screen.getByText("light")).toHaveClass("np-theme-light"),expect(screen.getByText("navy")).toHaveClass("np-theme-navy"),expect(screen.getByText("dark")).toHaveClass("np-theme-dark")}),it("can append className to a component",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(Button,{"data-testid":"button",onClick:function onClick(){/** */},children:"Click me!"})})),expect(screen.getByTestId("button")).toHaveClass("np-theme-navy")}),it("displays console warning when children is not a valid React element",function(){// eslint-disable-next-line no-console
-jest.spyOn(console,"warn").mockImplementation(function(){return jest.fn()}),render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.NAVY,children:[/*#__PURE__*/_jsx(DirectionProvider,{direction:Direction.LTR,children:/*#__PURE__*/_jsx(Button,{"data-testid":"button",onClick:function onClick(){/** */},children:"Click me!"})}),","]})),expect(screen.getByTestId("button")).not.toHaveClass("np-theme-navy"),expect(console.warn).toHaveBeenCalledWith("[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!")})});

package/build/es/no-polyfill/provider/theme/index.js

@@ -1 +0,0 @@
-export{ThemeContext,ThemeProvider}from"./ThemeProvider";

package/build/es/polyfill/common/hocs/index.js

@@ -1 +0,0 @@
-export{default as withTheme}from"./theme";

package/build/es/polyfill/common/hocs/theme/index.js

@@ -1 +0,0 @@
-export{withTheme as default}from"./withTheme";

package/build/es/polyfill/common/hocs/theme/withTheme.js

@@ -1,2 +0,0 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.function.name.js";import{useTheme}from"../../hooks";// eslint-disable-next-line @typescript-eslint/no-explicit-any
-import{jsx as _jsx}from"react/jsx-runtime";function getDisplayName(a){return a.displayName||a.name||"Component"}export function withTheme(a){var b=function(b){var c=useTheme(),d=c.theme;return/*#__PURE__*/_jsx(a,_objectSpread({theme:d},b))};return b.displayName="withTheme(".concat(getDisplayName(a),")"),b.WrappedComponent=a,b}

package/build/es/polyfill/common/hocs/theme/withTheme.spec.js

@@ -1 +0,0 @@
-import{render,screen}from"@testing-library/react";import{Theme}from"../..";import{ThemeProvider}from"../../../provider";import{withTheme}from"./withTheme";import{jsx as _jsx}from"react/jsx-runtime";var Component=withTheme(function(a){var b=a.theme,c=a.className;return/*#__PURE__*/_jsx("div",{className:c,"data-testid":"themed","data-theme":b})});describe("withTheme",function(){it("returns default light theme",function(){render(/*#__PURE__*/_jsx(Component,{className:"test-class"}));var a=screen.getByTestId("themed");expect(a).toHaveClass("test-class"),expect(a).toHaveAttribute("data-theme",Theme.LIGHT)}),it("returns provided theme",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(Component,{})})),expect(screen.getByTestId("themed")).toHaveAttribute("data-theme",Theme.NAVY)}),it("returns closest theme provider value",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.DARK,children:/*#__PURE__*/_jsx(Component,{})})})),expect(screen.getByTestId("themed")).toHaveAttribute("data-theme",Theme.DARK)})});

package/build/es/polyfill/common/hooks/useTheme/index.js

@@ -1 +0,0 @@
-export{useTheme as default}from"./useTheme";

package/build/es/polyfill/common/hooks/useTheme/useTheme.js

@@ -1 +0,0 @@
-import{useContext,useMemo}from"react";import{ThemeContext}from"../../../provider/theme/ThemeProvider";import{getThemeClassName,modernThemes}from"../../theme";export var useTheme=function(){var a=useContext(ThemeContext);return{theme:a,isThemeModern:useMemo(function(){return modernThemes.has(a)},[a]),className:useMemo(function(){return getThemeClassName(a)},[a])}};

package/build/es/polyfill/common/hooks/useTheme/useTheme.spec.js

@@ -1 +0,0 @@
-import{renderHook}from"@testing-library/react-hooks";import{Theme}from"../../../common/theme";import{ThemeProvider}from"../../../provider";import{useTheme}from"./useTheme";describe("useTheme",function(){it("returns default light theme",function(){var a=renderHook(function(){return useTheme()}),b=a.result.current;expect(b.theme).toStrictEqual(Theme.LIGHT)}),it("returns provided theme",function(){var a=renderHook(function(){return useTheme()},{wrapper:ThemeProvider,initialProps:{theme:Theme.NAVY}}),b=a.result.current;expect(b.theme).toStrictEqual(Theme.NAVY)})});

package/build/es/polyfill/provider/theme/ThemeProvider.js

@@ -1,3 +0,0 @@
-import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.join.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import React from"react";import{Children,cloneElement,createContext,isValidElement}from"react";import{getThemeClassName,Theme}from"../../common/theme";import{jsx as _jsx}from"react/jsx-runtime";export var ThemeContext=/*#__PURE__*/createContext(Theme.LIGHT);export var ThemeProvider=function(a){var b=a.theme,c=a.children,d=Children.map(c,function(a){var c;if(!/*#__PURE__*/isValidElement(a))return"production"!==process.env.NODE_ENV&&console.warn("[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!"),a;// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-var d=[getThemeClassName(b),null===a||void 0===a||null===(c=a.props)||void 0===c?void 0:c.className].filter(Boolean).join(" ");if(/*#__PURE__*/isValidElement(a))// eslint-disable-next-line @typescript-eslint/no-explicit-any
-return/*#__PURE__*/cloneElement(a,{className:d})});return/*#__PURE__*/_jsx(ThemeContext.Provider,{value:b,children:d})};

package/build/es/polyfill/provider/theme/ThemeProvider.spec.js

@@ -1,2 +0,0 @@
-import{render,screen}from"@testing-library/react";import{DirectionProvider}from"..";import{Button}from"../..";import{Direction}from"../../common/direction";import{Theme}from"../../common/theme";import{ThemeProvider}from"./ThemeProvider";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";describe("ThemeProvider",function(){it("appends theme to children",function(){render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.LIGHT,children:[/*#__PURE__*/_jsx("div",{children:"children 1"}),/*#__PURE__*/_jsx("div",{children:"children 2"})]})),expect(screen.getByText("children 1")).toHaveClass("np-theme-light"),expect(screen.getByText("children 2")).toHaveClass("np-theme-light")}),it("concatenate className with children",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.LIGHT,children:/*#__PURE__*/_jsx("div",{className:"other class names",children:"children"})})),expect(screen.getByText("children")).toHaveClass("np-theme-light other class names")}),it("can nest theme providers",function(){render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.LIGHT,children:[/*#__PURE__*/_jsx("div",{children:"light"}),/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.NAVY,children:[/*#__PURE__*/_jsx("div",{children:"navy"}),/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.DARK,children:/*#__PURE__*/_jsx("div",{children:"dark"})})]})]})),expect(screen.getByText("light")).toHaveClass("np-theme-light"),expect(screen.getByText("navy")).toHaveClass("np-theme-navy"),expect(screen.getByText("dark")).toHaveClass("np-theme-dark")}),it("can append className to a component",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(Button,{"data-testid":"button",onClick:function onClick(){/** */},children:"Click me!"})})),expect(screen.getByTestId("button")).toHaveClass("np-theme-navy")}),it("displays console warning when children is not a valid React element",function(){// eslint-disable-next-line no-console
-jest.spyOn(console,"warn").mockImplementation(function(){return jest.fn()}),render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.NAVY,children:[/*#__PURE__*/_jsx(DirectionProvider,{direction:Direction.LTR,children:/*#__PURE__*/_jsx(Button,{"data-testid":"button",onClick:function onClick(){/** */},children:"Click me!"})}),","]})),expect(screen.getByTestId("button")).not.toHaveClass("np-theme-navy"),expect(console.warn).toHaveBeenCalledWith("[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!")})});

package/build/es/polyfill/provider/theme/index.js

@@ -1 +0,0 @@
-export{ThemeContext,ThemeProvider}from"./ThemeProvider";

package/build/types/common/hocs/index.d.ts

@@ -1 +0,0 @@
-export { default as withTheme } from './theme';

package/build/types/common/hocs/theme/index.d.ts

@@ -1 +0,0 @@
-export { withTheme as default } from './withTheme';

package/build/types/common/hocs/theme/withTheme.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { ThemeType } from '../..';
-declare type WithThemeProps = {
-    theme: ThemeType;
-};
-export declare type WrappedComponentProps<P> = Omit<P, keyof WithThemeProps>;
-export declare function withTheme<P extends WrappedComponentProps<P>>(WrappedComponent: React.FunctionComponent<P & WithThemeProps>): import("react").FC<P> & {
-    WrappedComponent: React.FunctionComponent<P & WithThemeProps>;
-};
-export {};

package/build/types/common/hocs/theme/withTheme.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/types/common/hooks/useTheme/index.d.ts

@@ -1 +0,0 @@
-export { useTheme as default } from './useTheme';

package/build/types/common/hooks/useTheme/useTheme.d.ts

@@ -1,5 +0,0 @@
-export declare const useTheme: () => {
-    theme: import("../../theme").ThemeType;
-    isThemeModern: boolean;
-    className: string;
-};

package/build/types/common/hooks/useTheme/useTheme.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/types/provider/theme/ThemeProvider.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { PropsWithChildren } from 'react';
-import { ThemeType } from '../../common/theme';
-export declare const ThemeContext: React.Context<ThemeType>;
-declare type ThemeProviderProps = PropsWithChildren<{
-    theme: ThemeType;
-}>;
-export declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
-export {};

package/build/types/provider/theme/ThemeProvider.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/types/provider/theme/index.d.ts

@@ -1 +0,0 @@
-export { ThemeContext, ThemeProvider } from "./ThemeProvider";