@transferwise/components 0.0.0-experimental-ef158b4 → 0.0.0-experimental-4f82861

package/build/main.css

@@ -3198,7 +3198,8 @@ a {
   padding-bottom: 4px !important;
 }
 .tw-modal table,
-.tw-modal .table {
+.tw-modal .table,
+.tw-modal .np-theme-personal {
   background-color: transparent;
 }
 @media (min-width: 576px) {

package/build/styles/main.css

@@ -3198,7 +3198,8 @@ a {
   padding-bottom: 4px !important;
 }
 .tw-modal table,
-.tw-modal .table {
+.tw-modal .table,
+.tw-modal .np-theme-personal {
   background-color: transparent;
 }
 @media (min-width: 576px) {

package/build/styles/modal/Modal.css

@@ -83,7 +83,8 @@
   padding-bottom: 4px !important;
 }
 .tw-modal table,
-.tw-modal .table {
+.tw-modal .table,
+.tw-modal .np-theme-personal {
   background-color: transparent;
 }
 @media (min-width: 576px) {

package/build/types/typeahead/Typeahead.d.ts

@@ -1,98 +1,57 @@
-import { DebouncedFunc } from 'lodash';
-import { Component, ReactNode } from 'react';
-import { Size, SizeMedium, SizeLarge } from '../common';
-import { InlineAlertProps } from '../inlineAlert/InlineAlert';
-import TypeaheadOption from './typeaheadOption/TypeaheadOption';
-export type TypeaheadOption<T = string> = {
-    label: string;
-    note?: string;
-    secondary?: string;
-    value?: T;
-};
-export interface TypeaheadProps<T> {
-    id: string;
-    name: string;
-    addon: ReactNode;
-    alert?: {
-        message: InlineAlertProps['children'];
-        type: InlineAlertProps['type'];
-    };
-    allowNew: boolean;
-    autoFillOnBlur?: boolean;
-    autoFocus: boolean;
-    chipSeparators?: string[];
-    clearable: boolean;
-    footer: ReactNode;
-    initialValue: TypeaheadOption<T>[];
-    inputAutoComplete?: string;
-    maxHeight: number;
-    minQueryLength: number;
-    placeholder?: string;
-    multiple: boolean;
-    options: TypeaheadOption<T>[];
-    searchDelay: number;
-    showSuggestions: boolean;
-    showNewEntry: boolean;
-    size?: SizeMedium | SizeLarge;
-    onBlur?: () => void;
-    onChange: (options: TypeaheadOption<T>[]) => void;
-    onFocus?: () => void;
-    onInputChange?: (query: string) => void;
-    onSearch?: (query: string) => void;
-    validateChip?: (chip: TypeaheadOption<T>) => boolean;
-}
-type TypeaheadState<T> = {
-    selected: TypeaheadOption<T>[];
-    keyboardFocusedOptionIndex: number | null;
-    errorState: boolean;
-    query: string;
-    optionsShown?: boolean;
-    isFocused?: boolean;
-};
-export default class Typeahead<T> extends Component<TypeaheadProps<T>, TypeaheadState<T>> {
-    props: TypeaheadProps<T> & Required<Pick<TypeaheadProps<T>, keyof typeof Typeahead.defaultProps>>;
-    static defaultProps: {
-        addon: null;
-        allowNew: boolean;
-        autoFillOnBlur: boolean;
-        autoFocus: boolean;
-        chipSeparators: never[];
-        clearable: boolean;
-        footer: null;
-        initialValue: never[];
-        inputAutoComplete: string;
-        maxHeight: null;
-        minQueryLength: number;
-        multiple: boolean;
-        searchDelay: number;
-        showSuggestions: boolean;
-        showNewEntry: boolean;
-        size: Size;
-        validateChip: () => boolean;
-    };
-    constructor(props: TypeaheadProps<T>);
-    handleSearchDebounced: DebouncedFunc<(query: string) => void>;
-    UNSAFE_componentWillReceiveProps(nextProps: TypeaheadProps<T>): void;
-    componentWillUnmount(): void;
-    handleOnFocus: () => void;
-    onOptionSelected: (event: React.MouseEvent, item: TypeaheadOption<T>) => void;
-    handleOnChange: React.ChangeEventHandler<HTMLInputElement>;
-    handleOnPaste: React.ClipboardEventHandler<HTMLInputElement>;
-    handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
-    moveFocusedOption(offset: number): void;
-    selectItem: (item: TypeaheadOption<T>) => void;
-    handleSearch: (query: string) => void;
-    handleDocumentClick: () => void;
-    showMenu: () => void;
-    hideMenu: () => void;
-    updateSelectedValue: (selected: TypeaheadOption<T>[]) => void;
-    clear: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    removeChip: (option: TypeaheadOption<T>) => void;
-    renderChip: (option: TypeaheadOption<T>, idx: number) => ReactNode;
-    renderMenu: ({ footer, options, id, keyboardFocusedOptionIndex, query, allowNew, showNewEntry, dropdownOpen, }: Pick<TypeaheadProps<T>, "id" | "footer" | "options" | "allowNew" | "showNewEntry"> & Pick<TypeaheadState<T>, "keyboardFocusedOptionIndex" | "query"> & {
-        dropdownOpen?: boolean | undefined;
-    }) => import("react").JSX.Element;
-    render(): import("react").JSX.Element;
-}
-export {};
-//# sourceMappingURL=Typeahead.d.ts.map
+import * as React from 'react';
+
+export interface TypeaheadOptions {
+    label: string;
+    note?: string;
+    secondary?: string;
+    value?: Object;
+}
+
+export interface TypeaheadInitialValue {
+    label: string;
+    note?: string;
+    secondary?: string;
+}
+
+export interface TypeaheadAlert {
+    message: string;
+    type: "error" | "warning" | "neutral";
+}
+
+export type TypeaheadSize = "md" | "lg";
+
+export interface TypeaheadProps {
+    id: string;
+    name: string;
+    options: TypeaheadOptions[];
+    initialValue?: TypeaheadInitialValue[];
+    onChange: (...args: any[])=>any;
+    allowNew?: boolean;
+    autoFocus?: boolean;
+    clearable?: boolean;
+    multiple?: boolean;
+    showSuggestions?: boolean;
+    showNewEntry?: boolean;
+    searchDelay?: number;
+    maxHeight?: number;
+    minQueryLength?: number;
+    addon?: React.ReactNode;
+    placeholder?: string;
+    alert?: TypeaheadAlert;
+    footer?: React.ReactNode;
+    validateChip?: (...args: any[])=>any;
+    onSearch?: (...args: any[])=>any;
+    onBlur?: (...args: any[])=>any;
+    onInputChange?: (...args: any[])=>any;
+    onFocus?: (...args: any[])=>any;
+    chipSeparators?: string[];
+    size?: TypeaheadSize;
+    inputAutoComplete?: string;
+    autoFillOnBlur?: boolean;
+}
+
+export default class Typeahead extends React.Component<TypeaheadProps, any> {
+    render(): JSX.Element;
+
+}
+

package/build/types/typeahead/Typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/typeahead/Typeahead.js"],"names":[],"mappings":"AAyBA;IACE,wBAWC;IARC,2BAAqE;IAErE;;;;;MAKC;IAGH,uDAeC;IAED,6BAEC;IAED,0BAOE;IAEF,kDAGE;IAEF,qCAoBE;IAEF,oCAiBE;IAEF,sCAmCE;IAEF,qCAYC;IAED,gCAiBE;IAEF,sCAME;IAEF,mCASE;IAEF,gCAgBE;IAEF,qBAWE;IAEF,qBAWE;IAEF,6CAOE;IAEF,4BASE;IAEF,kCAME;IAEF,mEAcE;IAEF;;;;;;;;;sCA0CE;IAEF,sCAmGC;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAqEe,0CAAU;;;;;;;;;;AAle1B,gCAAyB;AADzB,0CAAmC"}

package/build/types/typeahead/typeaheadInput/TypeaheadInput.d.ts

@@ -1,29 +1,47 @@
-import { Component, ReactNode } from 'react';
-import { TypeaheadOption, TypeaheadProps } from '../Typeahead';
-export type TypeaheadInputProps<T> = {
-    typeaheadId: string;
-    value: string;
-    selected: TypeaheadOption<T>[];
-    optionsShown?: boolean;
-    autoComplete: string;
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
-    onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
-    onFocus: () => void;
-    onPaste: React.ClipboardEventHandler<HTMLInputElement>;
-    renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;
-} & Pick<TypeaheadProps<T>, 'id' | 'name' | 'autoFocus' | 'multiple' | 'placeholder' | 'maxHeight' | 'onFocus'>;
-type TypeaheadInputState = {
-    inputWidth: number;
-};
-export default class TypeaheadInput<T> extends Component<TypeaheadInputProps<T>, TypeaheadInputState> {
-    inputRef: HTMLInputElement | null;
-    sizerRef: HTMLDivElement | null;
-    constructor(props: TypeaheadInputProps<T>);
+declare class TypeaheadInput extends Component<any, any, any> {
+    constructor();
+    state: {
+        inputWidth: number;
+    };
     componentDidMount(): void;
-    componentDidUpdate(previousProps: TypeaheadInputProps<T>): void;
+    componentDidUpdate(previousProps: any): void;
     recalculateWidth: () => void;
     renderInput: () => import("react").JSX.Element;
+    inputRef: HTMLInputElement | null | undefined;
     render(): import("react").JSX.Element;
+    sizerRef: HTMLDivElement | null | undefined;
 }
-export {};
+declare namespace TypeaheadInput {
+    namespace propTypes {
+        const typeaheadId: any;
+        const name: any;
+        const autoFocus: any;
+        const multiple: any;
+        const value: any;
+        const selected: any;
+        const placeholder: any;
+        const optionsShown: any;
+        const maxHeight: any;
+        const autoComplete: any;
+        const onChange: any;
+        const renderChip: any;
+        const onKeyDown: any;
+        const onFocus: any;
+        const onPaste: any;
+    }
+    namespace defaultProps {
+        const autoFocus_1: boolean;
+        export { autoFocus_1 as autoFocus };
+        const maxHeight_1: null;
+        export { maxHeight_1 as maxHeight };
+        const placeholder_1: string;
+        export { placeholder_1 as placeholder };
+        const optionsShown_1: boolean;
+        export { optionsShown_1 as optionsShown };
+        const selected_1: never[];
+        export { selected_1 as selected };
+    }
+}
+export default TypeaheadInput;
+import { Component } from "react";
 //# sourceMappingURL=TypeaheadInput.d.ts.map

package/build/types/typeahead/typeaheadInput/TypeaheadInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadInput.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/typeaheadInput/TypeaheadInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CACpE,GAAG,IAAI,CACN,cAAc,CAAC,CAAC,CAAC,EACjB,IAAI,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,CACnF,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAAC,CAAC,CAAE,SAAQ,SAAS,CACtD,mBAAmB,CAAC,CAAC,CAAC,EACtB,mBAAmB,CACpB;IACC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IACzC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAQ;gBAE3B,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAOzC,iBAAiB;IAOjB,kBAAkB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAMxD,gBAAgB,aAQd;IAEF,WAAW,oCA4CT;IAEF,MAAM;CA8BP"}
+{"version":3,"file":"TypeaheadInput.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/typeaheadInput/TypeaheadInput.js"],"names":[],"mappings":"AAWA;IACE,cAKC;IAHC;;MAEC;IAGH,0BAKC;IAED,6CAIC;IAED,6BAME;IAEF,+CA4CE;IAtBM,8CAAyB;IAwBjC,sCA6BC;IAVS,4CAAyB;CAWpC"}

package/build/types/typeahead/typeaheadOption/TypeaheadOption.d.ts

@@ -1,11 +1,19 @@
-/// <reference types="react" />
-import { TypeaheadOption } from '../Typeahead';
-export type TypeaheadOptionProps<T> = {
-    option: TypeaheadOption<T>;
-    selected?: boolean;
-    onClick?: React.MouseEventHandler;
-    query?: string;
-};
-declare const Option: <T>(props: TypeaheadOptionProps<T>) => import("react").JSX.Element;
 export default Option;
+declare function Option(props: any): import("react").JSX.Element;
+declare namespace Option {
+    namespace propTypes {
+        const option: any;
+        const query: any;
+        const selected: any;
+        const onClick: any;
+    }
+    namespace defaultProps {
+        const selected_1: boolean;
+        export { selected_1 as selected };
+        const query_1: string;
+        export { query_1 as query };
+        export function onClick_1(): void;
+        export { onClick_1 as onClick };
+    }
+}
 //# sourceMappingURL=TypeaheadOption.d.ts.map

package/build/types/typeahead/typeaheadOption/TypeaheadOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadOption.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/typeaheadOption/TypeaheadOption.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,MAAM,MAAM,oBAAoB,CAAC,CAAC,IAAI;IACpC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,MAAM,oEAqBX,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"TypeaheadOption.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/typeaheadOption/TypeaheadOption.js"],"names":[],"mappings":";AAMA,iEAqBC;;;;;;;;;;;;;QAgBU,kCAAQ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-ef158b4",
+  "version": "0.0.0-experimental-4f82861",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -97,9 +97,6 @@
     "@react-spring/web": "~9.6.1",
     "@transferwise/formatting": "^2.1.0",
     "@transferwise/neptune-validation": "^3.1.0",
-    "@types/lodash": "4.14.202",
-    "@types/lodash.clamp": "^4.0.9",
-    "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.throttle": "^4.1.7",
     "classnames": "^2.2.6",
     "commonmark": "0.29.1",

package/src/main.css

@@ -3198,7 +3198,8 @@ a {
   padding-bottom: 4px !important;
 }
 .tw-modal table,
-.tw-modal .table {
+.tw-modal .table,
+.tw-modal .np-theme-personal {
   background-color: transparent;
 }
 @media (min-width: 576px) {

package/src/modal/Modal.css

@@ -83,7 +83,8 @@
   padding-bottom: 4px !important;
 }
 .tw-modal table,
-.tw-modal .table {
+.tw-modal .table,
+.tw-modal .np-theme-personal {
   background-color: transparent;
 }
 @media (min-width: 576px) {

package/src/modal/Modal.less

@@ -97,7 +97,7 @@
     }
   }
 
-  table, .table {
+  table, .table, .np-theme-personal {
     background-color: transparent;
   }
 }

package/src/modal/Modal.story.tsx

@@ -1,10 +1,11 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
+import { ScreenMode, ThemeProvider } from '@wise/components-theming';
 import { useState } from 'react';
 
-import { Button, Modal } from '..';
-import { Scroll } from '../common';
-import { lorem10, lorem1000, storyConfig } from '../test-utils';
+import { Button, Modal, ModalProps } from '..';
+import { CommonProps, Scroll } from '../common';
+import { lorem10, lorem100, lorem1000, storyConfig } from '../test-utils';
 
 export default {
   component: Modal,
@@ -23,6 +24,39 @@ export default {
 
 type Story = StoryObj<typeof Modal>;
 
+export interface StoryContentProps {
+  args: CommonProps & ModalProps;
+  screenMode?: ScreenMode;
+}
+
+const StoryContent = ({ args, screenMode }: StoryContentProps) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [open, setOpen] = useState(args.open);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Modal</Button>
+      <Modal
+        {...args}
+        body={
+          !screenMode ? (
+            args.body
+          ) : (
+            <ThemeProvider theme="personal" screenMode={screenMode}>
+              {lorem100}
+            </ThemeProvider>
+          )
+        }
+        open={open}
+        disableDimmerClickToClose={args.disableDimmerClickToClose}
+        onClose={() => {
+          setOpen(false);
+          action('Modal closed')();
+        }}
+      />
+    </>
+  );
+};
+
 export const Basic: Story = {
   args: {
     title: 'Title',
@@ -30,24 +64,7 @@ export const Basic: Story = {
     scroll: Scroll.VIEWPORT,
     footer: <Button block>Action</Button>,
   },
-  render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [open, setOpen] = useState(args.open);
-    return (
-      <>
-        <Button onClick={() => setOpen(true)}>Open Modal</Button>
-        <Modal
-          {...args}
-          open={open}
-          disableDimmerClickToClose={args.disableDimmerClickToClose}
-          onClose={() => {
-            setOpen(false);
-            action('Modal closed')();
-          }}
-        />
-      </>
-    );
-  },
+  render: (args) => <StoryContent args={args} />,
 };
 
 export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });
@@ -80,3 +97,18 @@ export const WithoutTitle: Story = {
 };
 
 export const WithoutTitleMobile: Story = storyConfig(WithoutTitle, { variants: ['mobile'] });
+
+export const WithThemeProviderInContentProps: Story = {
+  args: {
+    title: lorem10,
+    body: lorem100,
+    scroll: Scroll.VIEWPORT,
+    footer: <Button block>Action</Button>,
+  },
+  render: (args, { globals: { screenMode } }) => (
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    <StoryContent args={args} screenMode={screenMode} />
+  ),
+};
+
+export const WithThemeProviderInContent: Story = storyConfig(WithThemeProviderInContentProps, {});