@transferwise/components 46.110.0 → 46.111.0

package/build/types/listItem/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;0MAiBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsOf,CAAC;AA6GF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;0MAiBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuOf,CAAC;AA6GF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.110.0",
+  "version": "46.111.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -83,10 +83,10 @@
     "storybook": "^9.1.3",
     "storybook-addon-tag-badges": "^2.0.2",
     "storybook-addon-test-codegen": "^2.0.1",
-    "@transferwise/neptune-css": "14.24.6",
-    "@wise/components-theming": "1.6.4",
-    "@wise/wds-configs": "0.0.0",
-    "@transferwise/less-config": "3.1.2"
+    "@transferwise/less-config": "3.1.2",
+    "@transferwise/neptune-css": "14.25.0",
+    "@wise/components-theming": "1.7.0",
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.4",

package/src/inputs/SelectInput.story.tsx

@@ -22,7 +22,12 @@ import {
 const meta = {
   title: 'Forms/SelectInput',
   component: SelectInput,
-
+  args: {
+    onFilterChange: fn() satisfies Mock,
+    onChange: fn() satisfies Mock,
+    onClose: fn() satisfies Mock,
+    onOpen: fn() satisfies Mock,
+  },
   parameters: { actions: { argTypesRegex: '' } },
 } satisfies Meta<typeof SelectInput>;
 export default meta;
@@ -47,10 +52,6 @@ export const Months: Story<Month | null> = {
       value: month,
     })),
     renderValue: (month) => <SelectInputOptionContent title={month.name} />,
-    onFilterChange: fn() satisfies Mock,
-    onChange: fn() satisfies Mock,
-    onClose: fn() satisfies Mock,
-    onClear: fn() satisfies Mock,
   },
   render: function Render({ onChange, onClear, ...args }) {
     const [selectedMonth, setSelectedMonth] = useState<Month | null>(null);
@@ -183,7 +184,6 @@ const CurrenciesArgs = {
   filterable: true,
   filterPlaceholder: 'Type a currency / country',
   size: 'lg',
-  onChange: fn() satisfies Mock,
 } satisfies Story<Currency>['args'];
 
 export const Currencies: Story<Currency> = {
@@ -265,7 +265,7 @@ export const MultipleCurrencies: Story<Currency, true> = {
         />
       ),
   },
-  play: async ({ canvasElement, step }) => {
+  play: async ({ canvasElement, step, args }) => {
     const canvas = within(canvasElement);
 
     await step('Open the combobox', async () => {
@@ -273,6 +273,7 @@ export const MultipleCurrencies: Story<Currency, true> = {
       await userEvent.click(triggerButton);
       await wait(500);
       await userEvent.unhover(triggerButton);
+      await expect(args.onOpen).toHaveBeenCalledOnce();
     });
 
     await step('Select EUR option', async () => {
@@ -349,6 +350,19 @@ export const WithSelectAll: Story<Currency, true> = {
   },
 };
 
+export const WithClear: Story<Currency> = {
+  args: {
+    ...CurrenciesArgs,
+    onClear: fn() satisfies Mock,
+  },
+  play: async ({ step }) => {
+    await step('Has clear button', async () => {
+      const clearBtn = await screen.findByRole('button', { name: 'Clear' });
+      await expect(clearBtn).toBeInTheDocument();
+    });
+  },
+};
+
 export const CustomTrigger: Story<Month> = {
   args: {
     placeholder: 'Month',
@@ -367,14 +381,14 @@ export const CustomTrigger: Story<Month> = {
         <ChevronDown size={16} />
       </SelectInputTriggerButton>
     ),
-    onChange: fn() satisfies Mock,
   },
-  play: async ({ canvasElement, step }) => {
+  play: async ({ canvasElement, step, args }) => {
     const canvas = within(canvasElement);
 
     await step('Open the combobox', async () => {
       const triggerButton = canvas.getByRole('combobox');
       await userEvent.click(triggerButton);
+      await expect(args.onOpen).toHaveBeenCalledOnce();
     });
   },
 };
@@ -414,7 +428,6 @@ export const Advanced: Story<Month> = {
     ),
     filterable: true,
     filterPlaceholder: 'Type a month’s name',
-    onChange: fn() satisfies Mock,
   },
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);

package/src/inputs/SelectInput.tsx

@@ -178,6 +178,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   };
   onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
   onChange?: (value: M extends true ? T[] : T) => void;
+  onOpen?: () => void;
   onClose?: () => void;
   onClear?: () => void;
 }
@@ -263,6 +264,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   UNSAFE_triggerButtonProps,
   onFilterChange = noop,
   onChange,
+  onOpen,
   onClose,
   onClear,
 }: SelectInputProps<T, M>) {
@@ -273,15 +275,18 @@ export function SelectInput<T = string, M extends boolean = false>({
 
   const initialized = useRef(false);
   const handleClose = useEffectEvent(onClose ?? (() => {}));
+  const handleOpen = useEffectEvent(onOpen ?? (() => {}));
   useEffect(() => {
     if (initialized.current) {
-      if (!open) {
+      if (open) {
+        handleOpen?.();
+      } else {
         handleClose?.();
       }
     } else {
       initialized.current = true;
     }
-  }, [handleClose, open]);
+  }, [handleClose, handleOpen, open]);
 
   const [filterQuery, _setFilterQuery] = useState('');
   const deferredFilterQuery = useDeferredValue(filterQuery);

package/src/listItem/ListItem.tsx

@@ -235,7 +235,8 @@ export const ListItem = ({
             [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:
               isFullyInteractive && !!spotlight,
             disabled: disabled && !isPartiallyInteractive,
-            'disabled--has-prompt-reason': !disabledPromptMessage && disabled && !isPartiallyInteractive,
+            'disabled--has-prompt-reason':
+              !disabledPromptMessage && disabled && !isPartiallyInteractive,
           },
           className,
         )}

package/src/neptune-css/NeptuneCSS.story.tsx

@@ -0,0 +1,142 @@
+import React, { ReactNode } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import clsx from 'clsx';
+import AvatarView from '../avatarView';
+import Tooltip from '../tooltip';
+import IconButton from '../iconButton';
+import Body from '../body';
+
+const meta: Meta = {
+  title: 'NeptuneCSS',
+  component: () => <div>NeptuneCSS Example</div>,
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Colors: Story = {
+  render: () => {
+    return (
+      <Body>
+        {colorTokens.map((token) => (
+          <ColorToken key={token} token={token} className="m-b-2" />
+        ))}
+      </Body>
+    );
+  },
+};
+
+const colorTokens = [
+  '--color-content-primary',
+  '--color-bright-yellow',
+  '--color-bright-orange',
+  '--color-dark-purple',
+  '--color-dark-gold',
+  '--color-bright-blue',
+  '--color-dark-charcoal',
+  '--color-white',
+  '--color-black',
+  '--color-bright-green',
+  '--color-forest-green',
+  '--color-bright-pink',
+  '--color-dark-maroon',
+  '--color-content-primary',
+  '--color-content-secondary',
+  '--color-content-tertiary',
+  '--color-content-link',
+  '--color-content-link-hover',
+  '--color-content-link-active',
+  '--color-interactive-control',
+  '--color-interactive-control-hover',
+  '--color-interactive-control-active',
+  '--color-interactive-primary',
+  '--color-interactive-primary-hover',
+  '--color-interactive-primary-active',
+  '--color-interactive-secondary',
+  '--color-interactive-secondary-hover',
+  '--color-interactive-secondary-active',
+  '--color-interactive-accent',
+  '--color-interactive-accent-hover',
+  '--color-interactive-accent-active',
+  '--color-interactive-contrast',
+  '--color-interactive-contrast-hover',
+  '--color-interactive-contrast-active',
+  '--color-interactive-neutral',
+  '--color-interactive-neutral-hover',
+  '--color-interactive-neutral-active',
+  '--color-border-neutral',
+  '--color-border-overlay',
+  '--color-background-screen',
+  '--color-background-screen-hover',
+  '--color-background-screen-active',
+  '--color-background-elevated',
+  '--color-background-neutral',
+  '--color-background-neutral-hover',
+  '--color-background-neutral-active',
+  '--color-background-overlay',
+  '--color-background-surface',
+  '--color-sentiment-negative',
+  '--color-sentiment-negative-hover',
+  '--color-sentiment-negative-active',
+  '--color-sentiment-negative-primary',
+  '--color-sentiment-negative-primary-hover',
+  '--color-sentiment-negative-primary-active',
+  '--color-sentiment-negative-secondary',
+  '--color-sentiment-negative-secondary-hover',
+  '--color-sentiment-negative-secondary-active',
+  '--color-sentiment-positive',
+  '--color-sentiment-positive-hover',
+  '--color-sentiment-positive-active',
+  '--color-sentiment-positive-primary',
+  '--color-sentiment-positive-primary-hover',
+  '--color-sentiment-positive-primary-active',
+  '--color-sentiment-positive-secondary',
+  '--color-sentiment-positive-secondary-hover',
+  '--color-sentiment-positive-secondary-active',
+  '--color-sentiment-warning',
+  '--color-sentiment-warning-hover',
+  '--color-sentiment-warning-active',
+  '--color-sentiment-warning-primary',
+  '--color-sentiment-warning-primary-hover',
+  '--color-sentiment-warning-primary-active',
+  '--color-sentiment-warning-secondary',
+  '--color-sentiment-warning-secondary-hover',
+  '--color-sentiment-warning-secondary-active',
+  '--color-sentiment-warning-content',
+  '--color-sentiment-warning-content-hover',
+  '--color-sentiment-warning-content-active',
+  '--color-contrast',
+  '--color-light',
+  '--color-dark',
+  '--color-contrast-overlay',
+  '--color-contrast-theme',
+];
+
+function ColorToken(props: { token: string; className?: string }) {
+  const color = `var(${props.token})`;
+  const [tooltipLabel, setTooltipLabel] = React.useState<ReactNode>('Copy Token Name');
+  return (
+    <div className={clsx('d-flex', 'align-items-center', props.className)}>
+      <IconButton
+        aria-label="Copy color"
+        size={72}
+        className="m-r-2"
+        onClick={async () => {
+          await navigator.clipboard.writeText(color);
+          setTooltipLabel('Copied!');
+        }}
+      >
+        <Tooltip label={<Body type="body-large-bold">{tooltipLabel}</Body>} position="top">
+          <AvatarView
+            size={72}
+            style={{ backgroundColor: color, border: 'solid 1px var(--color-border-neutral)' }}
+          >
+            {null}
+          </AvatarView>
+        </Tooltip>
+      </IconButton>
+      <code className="m-l-2">{props.token}</code>
+    </div>
+  );
+}