@transferwise/components 45.19.1 → 45.19.3

package/build/types/flowNavigation/FlowNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAgB,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAKnD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,sBAwErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAgB,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAMnD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,sBA0ErB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/types/flowNavigation/FlowNavigation.messages.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    back: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=FlowNavigation.messages.d.ts.map

package/build/types/flowNavigation/FlowNavigation.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowNavigation.messages.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.messages.ts"],"names":[],"mappings":";;;;;;AAEA,wBAKG"}

package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts

@@ -1,18 +1,10 @@
-export default AnimatedLabel;
-declare function AnimatedLabel({ activeLabel, className, labels }: {
-    activeLabel: any;
-    className: any;
-    labels: any;
-}): import("react").JSX.Element;
-declare namespace AnimatedLabel {
-    namespace propTypes {
-        const activeLabel: any;
-        const className: any;
-        const labels: any;
-    }
-    namespace defaultProps {
-        const className_1: undefined;
-        export { className_1 as className };
-    }
+import React from 'react';
+export interface AnimatedLabelProps {
+    activeLabel: number;
+    className?: string;
+    labels: React.ReactNode[];
+    'aria-label': string;
 }
+declare const AnimatedLabel: ({ activeLabel, className, labels, "aria-label": ariaLabel, }: AnimatedLabelProps) => React.JSX.Element;
+export default AnimatedLabel;
 //# sourceMappingURL=AnimatedLabel.d.ts.map

package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/animatedLabel/AnimatedLabel.js"],"names":[],"mappings":";AAGA;;;;gCAqBC"}
+{"version":3,"file":"AnimatedLabel.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,iEAKhB,kBAAkB,sBAwBpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/build/types/flowNavigation/animatedLabel/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./AnimatedLabel";
+export { default } from './AnimatedLabel';
 //# sourceMappingURL=index.d.ts.map

package/build/types/flowNavigation/animatedLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/animatedLabel/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/animatedLabel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/build/types/inputs/SelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "45.19.1",
+  "version": "45.19.3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/button/Button.spec.js

@@ -85,6 +85,12 @@ describe('Button', () => {
       render(<Button {...props} className="catsarethebest" />);
       expect(screen.getByRole('button')).toHaveClass('catsarethebest');
     });
+
+    it('passes through aria-label if set', () => {
+      render(<Button {...props} aria-label="unique label" />);
+      const loadingButton = screen.getByLabelText('unique label');
+      expect(loadingButton).toBeInTheDocument();
+    });
   });
 
   describe('onClick', () => {
@@ -170,6 +176,12 @@ describe('Button', () => {
       expect(screen.getByRole('button', { name: 'loading' })).toBeInTheDocument();
     });
 
+    it('loading button has aria-label of loading', () => {
+      render(<Button {...props} loading />);
+      const loadingButton = screen.getByLabelText('loading');
+      expect(loadingButton).toBeInTheDocument();
+    });
+
     it('renders as block if block is true', () => {
       expect(render(<Button {...props} block />).container).toMatchSnapshot();
     });

package/src/button/Button.tsx

@@ -126,7 +126,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
         className={classes}
         {...props}
         aria-live={loading ? 'polite' : 'off'}
-        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : undefined}
+        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}
       >
         {children}
         {loading && <ProcessIndicator size={processIndicatorSize()} className="btn-loader" />}

package/src/flowNavigation/FlowNavigation.messages.ts

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  back: {
+    id: 'neptune.FlowNavigation.back',
+    defaultMessage: 'back to previous step',
+  },
+});

package/src/flowNavigation/FlowNavigation.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { useRef } from 'react';
 import React from 'react';
+import { useIntl } from 'react-intl';
 
 import { Breakpoint, Layout } from '../common';
 import { CloseButton } from '../common/closeButton';
@@ -9,6 +10,7 @@ import { useClientWidth } from '../common/hooks';
 import Logo from '../logo';
 import Stepper, { Step } from '../stepper/Stepper';
 
+import messages from './FlowNavigation.messages';
 import AnimatedLabel from './animatedLabel';
 import BackButton from './backButton';
 
@@ -35,6 +37,7 @@ const FlowNavigation = ({
   steps,
 }: FlowNavigationProps) => {
   const reference = useRef<HTMLDivElement>(null);
+  const intl = useIntl();
 
   const [clientWidth] = useClientWidth({ ref: reference });
   const closeButton = onClose != null && <CloseButton size="lg" onClick={onClose} />;
@@ -53,6 +56,7 @@ const FlowNavigation = ({
                 className="m-x-1"
                 labels={steps.map((step) => step.label)}
                 activeLabel={activeStep - 1}
+                aria-label={intl.formatMessage(messages.back)}
               />
             }
             onClick={onGoBack}

package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js

@@ -14,6 +14,12 @@ describe('AnimatedLabel', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('renders aria-label if provided', () => {
+    render(<AnimatedLabel {...props} aria-label="hello" />);
+    const checkbox = screen.getByLabelText('hello');
+    expect(checkbox).toBeInTheDocument();
+  });
+
   it('renders only one label with class in', () => {
     const { container } = render(<AnimatedLabel {...props} />);
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');

package/src/flowNavigation/animatedLabel/{AnimatedLabel.js → AnimatedLabel.tsx}

@@ -1,11 +1,26 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
+import React from 'react';
 
-const AnimatedLabel = ({ activeLabel, className, labels }) => {
+export interface AnimatedLabelProps {
+  activeLabel: number;
+  className?: string;
+  labels: React.ReactNode[];
+  'aria-label': string;
+}
+
+const AnimatedLabel = ({
+  activeLabel,
+  className,
+  labels,
+  'aria-label': ariaLabel,
+}: AnimatedLabelProps) => {
   const numberLabels = labels.length - 1;
 
   return (
-    <div className={classNames('np-animated-label', 'np-text-body-large-bold', className)}>
+    <div
+      aria-label={ariaLabel}
+      className={classNames('np-animated-label', 'np-text-body-large-bold', className)}
+    >
       {labels.map((label, index) => {
         const nextLabel = index - 1;
         return (
@@ -24,13 +39,4 @@ const AnimatedLabel = ({ activeLabel, className, labels }) => {
   );
 };
 
-AnimatedLabel.propTypes = {
-  activeLabel: PropTypes.number.isRequired,
-  className: PropTypes.string,
-  labels: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-AnimatedLabel.defaultProps = {
-  className: undefined,
-};
-
 export default AnimatedLabel;

package/src/i18n/en.json

@@ -14,6 +14,7 @@
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
+  "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.Select.searchPlaceholder": "Search...",

package/src/inputs/SelectInput.tsx

@@ -360,7 +360,12 @@ function SelectInputOptions<T = string>({
   listboxRef,
 }: SelectInputOptionsProps<T>) {
   const [query, setQuery] = useState('');
-  const needle = useMemo(() => (query ? searchableString(query) : null), [query]);
+  const needle = useMemo(() => {
+    if (filterable) {
+      return query ? searchableString(query) : null;
+    }
+    return undefined;
+  }, [filterable, query]);
 
   const listboxContainerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -449,7 +454,7 @@ interface SelectInputItemViewProps<
   I extends SelectInputItem<T | undefined> = SelectInputItem<T | undefined>,
 > extends Required<Pick<SelectInputProps<T>, 'renderValue'>> {
   item: I;
-  needle: string | null;
+  needle: string | null | undefined;
 }
 
 function SelectInputItemView<T = string>({
@@ -503,7 +508,7 @@ function SelectInputGroupItemView<T = string>({
     <section
       role="group"
       aria-labelledby={headerId}
-      className={classNames(needle == null && 'np-select-input-group-item--without-needle')}
+      className={classNames(needle === null && 'np-select-input-group-item--without-needle')}
     >
       {needle == null ? (
         <header