@transferwise/components 0.0.0-experimental-5cd0315 → 0.0.0-experimental-3cdcd93

package/build/types/tabs/Tabs.d.ts

@@ -1,43 +1,31 @@
 import { Component } from 'react';
-import { Size, Width } from '../common';
+import { Width } from '../common';
 import { Swipe } from './utils';
 export interface TabItem {
     title: string;
     content: React.ReactNode;
     disabled: boolean;
 }
-type TabsTransitionSpacing = 'default' | `${Size.EXTRA_SMALL | Size.SMALL | Size.MEDIUM | Size.LARGE}`;
 export interface TabsProps {
     tabs: TabItem[];
     selected: number;
     name: string;
-    animatePanelsOnClick?: boolean;
     changeTabOnSwipe?: boolean;
     className?: string;
-    transitionSpacing?: TabsTransitionSpacing;
     headerWidth?: `${Width}`;
-    id?: string;
     onTabSelect: (index: number) => void;
 }
 interface TabsState {
     start: Swipe | null;
-    translateX: number;
-    translateFrom: number;
-    translateTo: number;
     translateLineX: string | null;
-    isAnimating: boolean;
     isSwiping: boolean;
     isScrolling: boolean;
-    lastSwipeVelocity: number;
     fullWidthTabs: boolean;
-    currentSwipe: Swipe[];
-    selectedTabIndex: number;
 }
 export default class Tabs extends Component<TabsProps, TabsState> {
     props: TabsProps & Required<Pick<TabsProps, keyof typeof Tabs.defaultProps>>;
     static defaultProps: {
         changeTabOnSwipe: true;
-        transitionSpacing: "default";
         headerWidth: Width.BLOCK;
     };
     containerReference: import("react").RefObject<HTMLDivElement>;
@@ -45,10 +33,9 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     container: HTMLDivElement | null;
     containerWidth: number;
     tabRefs: (HTMLLIElement | null)[];
-    get filteredTabsLength(): number;
     get MAX_INDEX(): number;
     componentDidMount(): void;
-    componentDidUpdate(previousProps: TabsProps, previousState: TabsState): void;
+    componentDidUpdate(previousProps: TabsProps): void;
     componentWillUnmount(): void;
     handleResize: () => void;
     setContainerRefAndWidth: (node: HTMLDivElement | null) => void;
@@ -60,17 +47,8 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     getTabLineWidth: () => string;
     getTabToSelect: (selected: number, start: Swipe, end: Swipe) => number;
     swipedOverHalfOfContainer: (difference: number) => boolean;
-    calculateApplicableDragDifference: ({ currentSelected, nextSelected, start, end, }: {
-        currentSelected: number;
-        nextSelected: number;
-        start: Swipe;
-        end: Swipe;
-    }) => number | false;
     switchTab: (index: number) => void;
-    getTabIndexWithoutDisabledTabs(index: number): number;
-    animateToTab: (index: number, instant?: boolean) => void;
     animateLine: (index: number) => void;
-    animatePanel: (index: number, instant?: boolean) => void;
     disableScroll: (event: Event) => void;
     handleTabClick: (index: number) => () => void;
     onKeyDown: (index: number) => (event: React.KeyboardEvent<HTMLLIElement>) => void;

package/build/types/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAa,MAAM,WAAW,CAAC;AAM7C,OAAO,EAKL,KAAK,EACN,MAAM,SAAS,CAAC;AAIjB,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;IACzB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,UAAU,SAAS;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACvD,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAErF,MAAM,CAAC,YAAY;;;MAGY;IAE/B,kBAAkB,4CAA+B;gBAErC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;IAWhC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAQ;IAExC,cAAc,SAAK;IAEnB,OAAO,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAM;IAEvC,IAAI,SAAS,WAEZ;IAED,iBAAiB;IAWjB,kBAAkB,CAAC,aAAa,EAAE,SAAS;IA8B3C,oBAAoB;IAMpB,YAAY,aAEV;IAEF,uBAAuB,GAAI,MAAM,cAAc,GAAG,IAAI,UAGpD;IAEF,iBAAiB,GAAI,MAAM,cAAc,GAAG,IAAI,UAQ9C;IAEF,aAAa,GAAI,OAAO,MAAM,aAI5B;IAEF,eAAe,eAMb;IAEF,wBAAwB,GAAI,kBAAkB,MAAM,YAKlD;IAEF,WAAW,aAeT;IAEF,eAAe,eAWb;IAMF,cAAc,GAAI,UAAU,MAAM,EAAE,OAAO,KAAK,EAAE,KAAK,KAAK,KAAG,MAAM,CA4BnE;IAEF,yBAAyB,GAAI,YAAY,MAAM,aAA6C;IAE5F,SAAS,GAAI,OAAO,MAAM,UAGxB;IAEF,WAAW,GAAI,OAAO,MAAM,UAM1B;IAEF,aAAa,GAAI,OAAO,KAAK,UAM3B;IAEF,cAAc,GAAI,OAAO,MAAM,gBAE7B;IAEF,SAAS,GAAI,OAAO,MAAM,MAAM,OAAO,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,UAIvE;IAEF,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CASvD;IAEF,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAgCtD;IAEF,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CA6BrD;IAEF,MAAM;CAgFP"}

package/build/types/tabs/utils.d.ts

@@ -8,6 +8,4 @@ export declare const getSwipeDifference: (start: Swipe, end: Swipe, axis?: "x" |
 export declare const swipedLeftToRight: (start: Swipe, end: Swipe) => boolean;
 export declare const swipedRightToLeft: (start: Swipe, end: Swipe) => boolean;
 export declare const swipeShouldChangeTab: (start: Swipe, end: Swipe) => boolean;
-export declare function getVelocity(coords: Swipe[]): number;
-export declare const getElasticDragDifference: (difference: number) => number;
 //# sourceMappingURL=utils.d.ts.map

package/build/types/tabs/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/tabs/utils.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,WAIxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,EAAE,OAAM,GAAG,GAAG,GAAS,WAEjF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAEzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAEzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAK5D,CAAC;AAEF,wBAAgB,WAAW,CAAC,MAAM,EAAE,KAAK,EAAE,UAU1C;AAOD,eAAO,MAAM,wBAAwB,GAAI,YAAY,MAAM,WACmB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/tabs/utils.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,WAIxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,EAAE,OAAM,GAAG,GAAG,GAAS,WAEjF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAEzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAEzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,KAAK,EAAE,KAAK,KAAK,YAK5D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-5cd0315",
+  "version": "0.0.0-experimental-3cdcd93",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -87,9 +87,9 @@
     "storybook-addon-tag-badges": "^3.0.4",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@wise/components-theming": "1.10.1",
     "@transferwise/neptune-css": "14.26.1",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@wise/components-theming": "1.10.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
@@ -108,7 +108,6 @@
     "@popperjs/core": "^2.11.8",
     "@react-aria/focus": "^3.21.3",
     "@react-aria/overlays": "^3.31.0",
-    "@react-spring/web": "~10.0.3",
     "@transferwise/formatting": "^2.13.4",
     "@transferwise/neptune-validation": "^3.3.1",
     "clsx": "^2.1.1",

package/src/inputs/SelectInput.tsx

@@ -741,35 +741,15 @@ function SelectInputOptions<T = string>({
       return items;
     }
 
-    const dedupedItems = dedupeSelectInputItems(items, compareValues);
+    const filtered = filterSelectInputItems(dedupeSelectInputItems(items, compareValues), (item) =>
+      selectInputOptionItemIncludesNeedle(item, needle),
+    );
 
     if (sortFilteredOptions) {
-      // When sorting, filter out non-matching items completely to avoid ghost items
-      const filtered = dedupedItems.map((item) => {
-        if (item.type === 'option') {
-          return selectInputOptionItemIncludesNeedle(item, needle)
-            ? item
-            : { ...item, value: undefined };
-        }
-        if (item.type === 'group') {
-          return {
-            ...item,
-            options: item.options.map((option) =>
-              selectInputOptionItemIncludesNeedle(option, needle)
-                ? option
-                : { ...option, value: undefined },
-            ),
-          };
-        }
-        return item;
-      });
-
       return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);
     }
 
-    return filterSelectInputItems(dedupedItems, (item) =>
-      selectInputOptionItemIncludesNeedle(item, needle),
-    );
+    return filtered;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [needle, items, compareValues]);
   const resultsEmpty = needle != null && filteredItems.length === 0;
@@ -947,6 +927,7 @@ function SelectInputOptions<T = string>({
           ) : (
             <Virtualizer
               ref={virtualiserHandlerRef}
+              key={needle}
               data={filteredItems}
               keepMounted={mountedIndexes}
               scrollRef={listboxRef} // `VList` doesn't expose this

package/src/tabs/Tabs.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Size, Width } from '../common';
+import { Width } from '../common';
 
 import Tabs from './Tabs';
 
@@ -15,7 +15,6 @@ export const Basic = () => {
     <Tabs
       className="tabs-custom-class"
       name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
       tabs={[
         {
           title: 'Title 1',
@@ -44,7 +43,6 @@ export const Basic = () => {
         },
       ]}
       selected={selected}
-      animatePanelsOnClick
       onTabSelect={(index) => setSelected(index)}
     />
   );
@@ -56,7 +54,6 @@ export const AutoTabHeaderWidth = () => {
     <Tabs
       className="tabs-custom-class"
       name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
       headerWidth={Width.AUTO}
       tabs={[
         {
@@ -92,44 +89,3 @@ export const AutoTabHeaderWidth = () => {
     />
   );
 };
-
-export const NoPanelAnimation = () => {
-  const [selected, setSelected] = useState(0);
-  return (
-    <Tabs
-      animatePanelsOnClick={false}
-      className="tabs-custom-class"
-      name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
-      tabs={[
-        {
-          title: 'Title 1',
-          disabled: false,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-        {
-          title: 'Title 2',
-          disabled: false,
-          content: (
-            <div className="p-a-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
-          ),
-        },
-        {
-          title: 'Title 3',
-          disabled: true,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-      ]}
-      selected={selected}
-      onTabSelect={(index) => setSelected(index)}
-    />
-  );
-};

package/src/tabs/Tabs.test.tsx

@@ -1,4 +1,3 @@
-import { Globals } from '@react-spring/web';
 import { render, screen, userEvent } from '../test-utils';
 import Tabs, { TabsProps } from './Tabs';
 
@@ -18,21 +17,13 @@ function generateTabs(tabsStatus = defaultTabsStatus) {
   }));
 }
 
-beforeAll(() => {
-  Globals.assign({
-    skipAnimation: true,
-  });
-});
-
 describe('Tabs', () => {
   const initialProps: TabsProps = {
-    animatePanelsOnClick: true,
     tabs: generateTabs(),
     changeTabOnSwipe: true,
     name: 'testName',
     headerWidth: 'block',
     selected: 0,
-    transitionSpacing: 'default',
     onTabSelect: jest.fn(),
     className: 'custom-class-name',
   };
@@ -65,19 +56,6 @@ describe('Tabs', () => {
     expect(screen.getByRole('tabpanel')).toHaveAttribute('id', controlsTarget);
   });
 
-  describe('transitionSpacing', () => {
-    test.each([
-      ['default', '100%'],
-      ['xs', '8px'],
-      ['sm', '16px'],
-      ['md', '24px'],
-      ['lg', '32px'],
-    ] as const)('should respect `%s`', (input, width) => {
-      render(<Tabs {...initialProps} transitionSpacing={input} />);
-      expect(screen.getByRole('tabpanel').nextSibling).toHaveStyle({ width });
-    });
-  });
-
   it('should render correct number of tabs', () => {
     render(<Tabs {...initialProps} />);
     expect(screen.getAllByRole('tab')).toHaveLength(defaultTabsStatus.length);