@transferwise/components 0.0.0-experimental-6809bdd → 0.0.0-experimental-e153d25

package/build/types/dateLookup/DateLookup.d.ts

@@ -1,5 +1,5 @@
-import { PureComponent, KeyboardEvent } from 'react';
-import { Size, MonthFormat, SizeSmall, SizeMedium, SizeLarge } from '../common';
+import { PureComponent, type KeyboardEvent } from 'react';
+import { Size, MonthFormat, type SizeSmall, type SizeMedium, type SizeLarge } from '../common';
 export interface DateLookupProps {
     id?: string;
     value: Date | null;

package/build/types/dateLookup/DateLookup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,aAAa,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EACL,IAAI,EACJ,WAAW,EAGX,SAAS,EACT,UAAU,EACV,SAAS,EACV,MAAM,WAAW,CAAC;AAUnB,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,eAAe;IACvB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,cAAM,UAAW,SAAQ,aAAa,CAAC,eAAe,EAAE,eAAe,CAAC;IAC9D,KAAK,EAAE,eAAe,GAC5B,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC;IAExE,MAAM,CAAC,YAAY;;;;;;;;;;MAUkB;IAErC,OAAO,4CAA+B;IACtC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC;IAetC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,eAAe;;;;;;;IAwBlF,kBAAkB,CAAC,aAAa,EAAE,eAAe;IAQjD,oBAAoB;IAKpB,IAAI,aAOF;IAEF,OAAO,aAML;IAEF,KAAK,aAMH;IAEF,aAAa,UAAW,cAAc,cAAc,CAAC,UA6CnD;IAEF,UAAU,cAAe,MAAM,eAAe,MAAM,cAAc,MAAM,UAqBtE;IAEF,OAAO,qBAAsB,MAAM,oBAAoB,MAAM,UAO3D;IAEF,UAAU,SAAU,KAAK,GAAG,OAAO,GAAG,MAAM,UAI1C;IAEF,YAAY,aAAgC;IAE5C,cAAc,aAAkC;IAEhD,aAAa,aAAiC;IAE9C,wBAAwB,iBAAkB,IAAI,UAM5C;IAEF,oBAAoB;;;eAElB;IAEF,WAAW,oCA2CT;IAEF,WAAW,aAGT;IAEF,MAAM;CA2CP;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EACL,IAAI,EACJ,WAAW,EAGX,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,WAAW,CAAC;AAUnB,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,eAAe;IACvB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,cAAM,UAAW,SAAQ,aAAa,CAAC,eAAe,EAAE,eAAe,CAAC;IAC9D,KAAK,EAAE,eAAe,GAC5B,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC;IAExE,MAAM,CAAC,YAAY;;;;;;;;;;MAUkB;IAErC,OAAO,4CAA+B;IACtC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC;IAuBtC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,eAAe;;;;;;;IAwBlF,kBAAkB,CAAC,aAAa,EAAE,eAAe;IAQjD,oBAAoB;IAKpB,IAAI,aAOF;IAEF,OAAO,aAML;IAEF,KAAK,aAMH;IAEF,aAAa,UAAW,cAAc,cAAc,CAAC,UA6CnD;IAEF,UAAU,cAAe,MAAM,eAAe,MAAM,cAAc,MAAM,UAmBtE;IAEF,OAAO,qBAAsB,MAAM,oBAAoB,MAAM,UAO3D;IAEF,UAAU,SAAU,KAAK,GAAG,OAAO,GAAG,MAAM,UAI1C;IAEF,YAAY,aAAgC;IAE5C,cAAc,aAAkC;IAEhD,aAAa,aAAiC;IAE9C,wBAAwB,iBAAkB,IAAI,UAM5C;IAEF,oBAAoB;;;eAElB;IAEF,WAAW,oCA2CT;IAEF,WAAW,aAGT;IAEF,MAAM;CA2CP;AAED,eAAe,UAAU,CAAC"}

package/build/types/dateLookup/dayCalendar/table/DayCalendarTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { WrappedComponentProps } from 'react-intl';
+import { type WrappedComponentProps } from 'react-intl';
 interface DayCalendarTableProps extends WrappedComponentProps {
     selectedDate: Date | null;
     min: Date | null;

package/build/types/dateLookup/dayCalendar/table/DayCalendarTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DayCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/dayCalendar/table/DayCalendarTable.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAS/D,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAChC;;;;AAuID,wBAA4C"}
+{"version":3,"file":"DayCalendarTable.d.ts","sourceRoot":"","sources":["../../../../../src/dateLookup/dayCalendar/table/DayCalendarTable.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AASpE,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAChC;;;;AA0ID,wBAA4C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-6809bdd",
+  "version": "0.0.0-experimental-e153d25",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -67,7 +67,7 @@
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-tokens": "^8.8.1",
+    "@transferwise/neptune-tokens": "^8.9.2",
     "@tsconfig/recommended": "^1.0.2",
     "@types/babel__core": "^7.20.1",
     "@types/commonmark": "^0.27.9",
@@ -95,14 +95,14 @@
     "rollup": "^3.28.1",
     "storybook": "^7.6.17",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.9.6",
-    "@wise/components-theming": "1.1.0"
+    "@transferwise/neptune-css": "0.0.0-experimental-e153d25",
+    "@wise/components-theming": "0.0.0-experimental-e153d25"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "^14.9.6",
+    "@transferwise/neptune-css": "0.0.0-experimental-e153d25",
     "@wise/art": "^2.7.0",
-    "@wise/components-theming": "^1.0.0",
+    "@wise/components-theming": "0.0.0-experimental-e153d25",
     "react": ">=16.14",
     "react-dom": ">=16.14",
     "react-intl": "^5.10.0 || ^6"

package/src/dateLookup/DateLookup.tests.story.tsx

@@ -1,23 +1,30 @@
-import { ReactRenderer, Story } from '@storybook/react';
+import type { ReactRenderer, Story } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
-import { PlayFunctionContext } from '@storybook/types';
+import type { PlayFunctionContext } from '@storybook/types';
 import { useState } from 'react';
 
-import DateLookup from './DateLookup';
+import DateLookup, { type DateLookupProps } from './DateLookup';
 
 export default {
   component: DateLookup,
   title: 'Forms/DateLookup/Tests',
 };
 
-const Template: Story<DateLookup> = () => {
-  const [value, setValue] = useState<Date | null>(new Date(1987, 0, 10, 12, 0, 0));
+const props: DateLookupProps = {
+  value: new Date(1987, 0, 10, 12, 0, 0),
+  onChange: (value: Date | null) => {
+    console.log(value);
+  },
+};
+
+const Template: Story<DateLookupProps> = (args: DateLookupProps) => {
+  const [value, setValue] = useState<Date | null>(args.value);
 
   return (
     <DateLookup
+      {...args}
       value={value}
       clearable
-      placeholder="placeholder"
       onChange={(v) => {
         setValue(v);
       }}
@@ -26,11 +33,11 @@ const Template: Story<DateLookup> = () => {
 };
 
 export const ClearSpace = Template.bind({});
-
+ClearSpace.args = { ...props };
 ClearSpace.play = async ({
   canvasElement,
   step,
-}: PlayFunctionContext<ReactRenderer, DateLookup>) => {
+}: PlayFunctionContext<ReactRenderer, DateLookupProps>) => {
   const canvas = within(canvasElement);
 
   await step('space can activate clear button', async () => {
@@ -48,11 +55,11 @@ ClearSpace.play = async ({
 };
 
 export const ClearEnter = Template.bind({});
-
+ClearEnter.args = { ...props };
 ClearEnter.play = async ({
   canvasElement,
   step,
-}: PlayFunctionContext<ReactRenderer, DateLookup>) => {
+}: PlayFunctionContext<ReactRenderer, DateLookupProps>) => {
   const canvas = within(canvasElement);
 
   await step('enter can activate clear button', async () => {
@@ -68,3 +75,29 @@ ClearEnter.play = async ({
     await expect(placeholder).toBeInTheDocument();
   });
 };
+
+export const FocusOnSelectedDay = Template.bind({});
+FocusOnSelectedDay.args = { ...props };
+FocusOnSelectedDay.play = async () => {
+  await userEvent.tab();
+  await userEvent.keyboard(' ');
+};
+
+export const FocusOnToday = Template.bind({});
+FocusOnToday.args = { ...props, value: null };
+FocusOnToday.play = async () => {
+  await userEvent.tab();
+  await userEvent.keyboard(' ');
+};
+
+export const FocusOnFirstNonDisabledDate = Template.bind({});
+FocusOnFirstNonDisabledDate.args = {
+  ...props,
+  value: null,
+  min: new Date(1987, 0, 10, 12, 0, 0),
+  max: new Date(1987, 0, 12, 12, 0, 0),
+};
+FocusOnFirstNonDisabledDate.play = async () => {
+  await userEvent.tab();
+  await userEvent.keyboard(' ');
+};

package/src/dateLookup/DateLookup.tsx

@@ -1,14 +1,14 @@
 import classNames from 'classnames';
-import { createRef, PureComponent, KeyboardEvent } from 'react';
+import { createRef, PureComponent, type KeyboardEvent } from 'react';
 
 import {
   Size,
   MonthFormat,
   Position,
   Breakpoint,
-  SizeSmall,
-  SizeMedium,
-  SizeLarge,
+  type SizeSmall,
+  type SizeMedium,
+  type SizeLarge,
 } from '../common';
 import { isWithinRange, moveToWithinRange } from '../common/dateUtils';
 import ResponsivePanel from '../common/responsivePanel';
@@ -74,8 +74,16 @@ class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
       originalDate: null,
       min: getStartOfDay(props.min),
       max: getStartOfDay(props.max),
-      viewMonth: (props.value || new Date()).getMonth(),
-      viewYear: (props.value || new Date()).getFullYear(),
+      viewMonth: (
+        props.value ||
+        ((props.min || props.max) && moveToWithinRange(new Date(), props.min, props.max)) ||
+        new Date()
+      ).getMonth(),
+      viewYear: (
+        props.value ||
+        ((props.min || props.max) && moveToWithinRange(new Date(), props.min, props.max)) ||
+        new Date()
+      ).getFullYear(),
       open: false,
       mode: 'day',
       isMobile: false,
@@ -206,9 +214,7 @@ class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
     } else {
       date = getStartOfDay(new Date());
     }
-    if (date) {
-      date = moveToWithinRange(date, min, max);
-    }
+    date &&= moveToWithinRange(date, min, max);
     if (date?.getTime() !== selectedDate?.getTime()) {
       this.props.onChange(date);
     }

package/src/dateLookup/dayCalendar/table/DayCalendarTable.tsx

@@ -1,6 +1,6 @@
 import { formatDate } from '@transferwise/formatting';
 import { PureComponent } from 'react';
-import { injectIntl, WrappedComponentProps } from 'react-intl';
+import { injectIntl, type WrappedComponentProps } from 'react-intl';
 
 import { getDayNames, isWithinRange } from '../../../common/dateUtils';
 import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
@@ -64,6 +64,9 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
   };
 
   isDisabled = (day: number) => {
+    if (day === -1) {
+      return true;
+    }
     const { min, max, viewMonth, viewYear } = this.props;
     const date = new Date(viewYear, viewMonth, day);
 
@@ -72,7 +75,7 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
 
   isActive = (day: number) => {
     const { selectedDate, viewMonth, viewYear } = this.props;
-    return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
+    return !!(selectedDate && Number(new Date(viewYear, viewMonth, day)) === Number(selectedDate));
   };
 
   isToday = (day: number) => {

package/src/provider/theme/ThemeProvider.story.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '@wise/components-theming';
+
+import Button from '../../button';
+
+export default {
+  component: ThemeProvider,
+  title: 'Other/ThemeProvider',
+} satisfies Meta<typeof ThemeProvider>;
+
+type Story = StoryObj<typeof ThemeProvider>;
+
+export const PlatformTheme: Story = {
+  render: () => (
+    <>
+      <ThemeProvider theme="platform">
+        <Button>Button</Button>
+      </ThemeProvider>
+    </>
+  ),
+};