@transferwise/components 46.49.0 → 46.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.49.0",
+  "version": "46.50.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -38,9 +38,9 @@
     "!**/*.tsbuildinfo"
   ],
   "devDependencies": {
-    "@babel/core": "^7.24.7",
+    "@babel/core": "^7.24.8",
     "@babel/plugin-transform-runtime": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@cfaester/enzyme-adapter-react-18": "0.8.0",
@@ -50,20 +50,20 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^8.2.1",
-    "@storybook/addon-actions": "^8.2.1",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/addon-interactions": "^8.2.1",
+    "@storybook/addon-a11y": "^8.2.2",
+    "@storybook/addon-actions": "^8.2.2",
+    "@storybook/addon-essentials": "^8.2.2",
+    "@storybook/addon-interactions": "^8.2.2",
     "@storybook/addon-knobs": "^8.0.1",
-    "@storybook/addon-viewport": "^8.2.1",
+    "@storybook/addon-viewport": "^8.2.2",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/components": "^8.2.1",
-    "@storybook/core-events": "^8.2.1",
-    "@storybook/manager-api": "^8.2.1",
-    "@storybook/react": "^8.2.1",
-    "@storybook/react-webpack5": "^8.2.1",
-    "@storybook/test": "^8.2.1",
-    "@storybook/theming": "^8.2.1",
+    "@storybook/components": "^8.2.2",
+    "@storybook/core-events": "^8.2.2",
+    "@storybook/manager-api": "^8.2.2",
+    "@storybook/react": "^8.2.2",
+    "@storybook/react-webpack5": "^8.2.2",
+    "@storybook/test": "^8.2.2",
+    "@storybook/theming": "^8.2.2",
     "@testing-library/dom": "^10.3.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
@@ -91,9 +91,9 @@
     "react-intl": "^6.6.8",
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
-    "storybook": "^8.2.1",
+    "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.12.0",
+    "@transferwise/neptune-css": "14.12.1",
     "@wise/components-theming": "1.4.0"
   },
   "peerDependencies": {
@@ -106,7 +106,7 @@
     "react-intl": "^5.10.0 || ^6"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.7",
+    "@babel/runtime": "^7.24.8",
     "@floating-ui/react": "^0.25.4",
     "@formatjs/intl-locale": "^3.4.6",
     "@headlessui/react": "^1.7.19",

package/src/avatar/Avatar.spec.tsx

@@ -41,4 +41,14 @@ describe('Avatar', () => {
       expect(screen.getByText('JS')).toHaveStyle(`background-color: ${item.color.token}`);
     });
   });
+
+  it('adds aria-label to component if it is passed in', () => {
+    render(
+      <Avatar size={Size.MEDIUM} aria-label="Japanese flag avatar">
+        <img src="https://wise.com/web-art/assets/flags/jpy.svg" alt="" />
+      </Avatar>,
+    );
+
+    expect(screen.getByLabelText('Japanese flag avatar')).toBeInTheDocument();
+  });
 });

package/src/avatar/Avatar.tsx

@@ -24,6 +24,7 @@ export interface AvatarProps {
   size?: AvatarSize;
   theme?: AvatarTheme;
   type?: AvatarType;
+  'aria-label'?: string;
 }
 
 const backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {
@@ -51,6 +52,7 @@ const Avatar: React.FC<AvatarProps> = ({
   size: sizeFromProps = 48,
   theme = Theme.LIGHT,
   type = 'thumbnail',
+  'aria-label': ariaLabel,
 }) => {
   const backgroundColorFromSeed = useMemo<string | undefined>(
     () =>
@@ -69,6 +71,7 @@ const Avatar: React.FC<AvatarProps> = ({
         'tw-avatar--branded': Boolean(backgroundColorFromSeed),
         'np-text-title-body': type === 'initials',
       })}
+      aria-label={ariaLabel}
     >
       <div
         className="tw-avatar__content"

package/src/avatarWrapper/AvatarWrapper.spec.tsx

@@ -1,6 +1,5 @@
 import { BadgeProps } from '../badge';
-import { Sentiment } from '../common';
-import { Size, ProfileType } from '../common';
+import { Sentiment, Size, ProfileType } from '../common';
 import { render, screen } from '../test-utils';
 
 import AvatarWrapper from '.';
@@ -77,6 +76,12 @@ describe('FlowNavigationAvatar', () => {
 
           expect(container.firstChild).toMatchSnapshot();
         });
+
+        it('renders aria-label', () => {
+          render(<AvatarWrapper aria-label="test" />);
+
+          expect(screen.getByLabelText('test')).toBeInTheDocument();
+        });
       });
 
       describe('with a badge url passed', () => {
@@ -95,9 +100,15 @@ describe('FlowNavigationAvatar', () => {
 
       describe('with a badge status icon passed', () => {
         it('renders the badge', () => {
-          const { container } = render(<AvatarWrapper badgeStatusIcon={Sentiment.POSITIVE} />);
+          render(<AvatarWrapper badgeStatusIcon={Sentiment.POSITIVE} />);
 
-          expect(container.firstChild).toMatchSnapshot();
+          expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+        });
+
+        it('renders aria-label', () => {
+          render(<AvatarWrapper badgeStatusIcon={Sentiment.POSITIVE} aria-label="test" />);
+
+          expect(screen.getByLabelText('test')).toBeInTheDocument();
         });
       });
     });

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -37,6 +37,7 @@ export const All: Story = {
           <div>
             <AvatarWrapper
               url="https://wise.com/web-art/assets/flags/jpy.svg"
+              aria-label="Japanese flag avatar"
               profileType={ProfileType.BUSINESS}
               avatarProps={avatarProps}
             />
@@ -59,6 +60,7 @@ export const All: Story = {
             <AvatarWrapper
               badgeUrl={badgeUrl}
               badgeAltText="wise fast flag badge"
+              aria-label="Person avatar with wise fast flag badge"
               profileType={ProfileType.PERSONAL}
               avatarProps={avatarProps}
             />

package/src/avatarWrapper/AvatarWrapper.tsx

@@ -8,21 +8,33 @@ import StatusIcon from '../statusIcon/StatusIcon';
 
 interface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {
   url?: string;
+  ariaLabel?: string;
   altText?: string;
   statusIcon?: Sentiment;
 }
 
-const OptionalBadge = ({ url, altText, statusIcon, children, ...rest }: OptionalBadgeProps) => {
+const OptionalBadge = ({
+  url,
+  altText,
+  statusIcon,
+  children,
+  ariaLabel,
+  ...rest
+}: OptionalBadgeProps) => {
   if (url) {
     return (
-      <Badge badge={<img src={url} alt={altText} />} {...rest}>
+      <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>
         {children}
       </Badge>
     );
   }
   if (statusIcon) {
     return (
-      <Badge badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />} {...rest}>
+      <Badge
+        aria-label={ariaLabel}
+        badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}
+        {...rest}
+      >
         {children}
       </Badge>
     );
@@ -32,6 +44,7 @@ const OptionalBadge = ({ url, altText, statusIcon, children, ...rest }: Optional
 
 export type AvatarWrapperProps = {
   url?: string;
+  'aria-label'?: string;
   profileType?: ProfileTypeBusiness | ProfileTypePersonal;
   profileId?: string;
   name?: string;
@@ -57,6 +70,7 @@ export type AvatarWrapperProps = {
 
 const AvatarWrapper = ({
   url,
+  'aria-label': ariaLabel,
   profileType,
   profileId,
   badgeUrl,
@@ -73,18 +87,22 @@ const AvatarWrapper = ({
   useEffect(() => setImageLoadError(false), [url]);
 
   const getAvatarProps = () => {
+    let updatedAvatarProps = avatarProps;
+    if (!badgeUrl && !badgeStatusIcon && ariaLabel) {
+      updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };
+    }
     if (url && !hasImageLoadError) {
       return {
         type: AvatarType.THUMBNAIL,
         children: <img src={url} alt="" onError={() => setImageLoadError(true)} />,
-        ...avatarProps,
+        ...updatedAvatarProps,
       };
     }
     if (profileType) {
       return {
         type: AvatarType.ICON,
         children: isBusinessProfile ? <BriefcaseIcon size="24" /> : <ProfileIcon size="24" />,
-        ...avatarProps,
+        ...updatedAvatarProps,
       };
     }
     if (name) {
@@ -92,19 +110,20 @@ const AvatarWrapper = ({
         type: AvatarType.INITIALS,
         children: <>{getInitials(name)}</>,
         backgroundColorSeed: profileId?.toString(),
-        ...avatarProps,
+        ...updatedAvatarProps,
       };
     }
     return {
       type: AvatarType.ICON,
       children: <ProfileIcon size="24" />,
-      ...avatarProps,
+      ...updatedAvatarProps,
     };
   };
 
   return (
     <OptionalBadge
       url={badgeUrl}
+      ariaLabel={ariaLabel}
       altText={badgeAltText}
       statusIcon={badgeStatusIcon}
       {...badgeProps}

package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap

@@ -73,70 +73,6 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
 </div>
 `;
 
-exports[`FlowNavigationAvatar with a name AND profileType with a badge status icon passed renders the badge 1`] = `
-<div
-  class="tw-badge tw-badge-border-light tw-badge-sm"
->
-  <div
-    class="tw-badge__children"
-  >
-    <div
-      class="tw-avatar tw-avatar--48 tw-avatar--icon"
-    >
-      <div
-        class="tw-avatar__content"
-      >
-        <span
-          aria-hidden="true"
-          class="tw-icon tw-icon-person "
-          data-testid="person-icon"
-          role="presentation"
-        >
-          <svg
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              d="M15.257 14.014A5.922 5.922 0 0 0 18 9c0-3.3-2.7-6-6-6S6 5.7 6 9c0 2.1 1.071 3.943 2.743 5.014-2.614 1.243-4.457 3.9-4.457 6.986H6c0-3.3 2.7-6 6-6s6 2.7 6 6h1.714c0-3.086-1.842-5.743-4.457-6.986ZM7.714 9A4.298 4.298 0 0 1 12 4.714 4.298 4.298 0 0 1 16.286 9 4.298 4.298 0 0 1 12 13.286 4.298 4.298 0 0 1 7.714 9Z"
-            />
-          </svg>
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
-    class="tw-badge__content"
-  >
-    <span
-      class="status-circle status-circle-sm positive"
-      data-testid="status-icon"
-    >
-      <span
-        aria-hidden="true"
-        class="tw-icon tw-icon-check status-icon light"
-        data-testid="check-icon"
-        role="presentation"
-      >
-        <svg
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          viewBox="0 0 24 24"
-          width="16"
-        >
-          <path
-            d="M20.143 6.427 9.557 16.97 4.2 11.57 3 12.77l5.957 6a.846.846 0 0 0 .6.257.846.846 0 0 0 .6-.257L21.343 7.627l-1.2-1.2Z"
-          />
-        </svg>
-      </span>
-    </span>
-  </div>
-</div>
-`;
-
 exports[`FlowNavigationAvatar with a name AND profileType with a badge url passed renders the badge 1`] = `
 <div
   class="tw-badge tw-badge-border-light tw-badge-lg"

package/src/badge/Badge.spec.tsx

@@ -33,4 +33,12 @@ describe('Badge', () => {
 
     expect(screen.getByText(childText).parentElement).toHaveClass('tw-badge__children');
   });
+
+  it('adds aria-label to badge if it is passed in', () => {
+    const ariaLabel = 'badge-aria-label';
+
+    renderBadge({ 'aria-label': ariaLabel });
+
+    expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument();
+  });
 });

package/src/badge/Badge.tsx

@@ -17,6 +17,7 @@ export type BadgeProps = {
   children: ReactNode;
   size?: SizeSmall | SizeMedium | SizeLarge;
   border?: ThemeDark | ThemeLight;
+  'aria-label'?: string;
 } & CommonProps;
 
 const Badge = ({
@@ -24,6 +25,7 @@ const Badge = ({
   className = undefined,
   size = Size.SMALL,
   border = Theme.LIGHT,
+  'aria-label': ariaLabel,
   children,
 }: BadgeProps) => {
   const classes: string = classNames(
@@ -36,7 +38,7 @@ const Badge = ({
   );
 
   return (
-    <div className={classes}>
+    <div aria-label={ariaLabel} className={classes}>
       <div className="tw-badge__children">{children}</div>
       <div className="tw-badge__content">{badge}</div>
     </div>

package/src/card/Card.tsx

@@ -20,6 +20,10 @@ export interface CardProps {
   onClick?: (nextIsExpanded: boolean) => void;
 }
 
+/**
+ * @deprecated use Navigation pattern (via `NavigationOption` component)
+ * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern
+ */
 const Card = forwardRef(function Card(
   {
     'aria-label': ariaLabel,

package/src/common/bottomSheet/BottomSheet.tsx

@@ -1,8 +1,16 @@
 import classNames from 'classnames';
-import { useRef, useState, PropsWithChildren, CSSProperties, SyntheticEvent } from 'react';
+import {
+  CSSProperties,
+  PropsWithChildren,
+  SyntheticEvent,
+  useContext,
+  useRef,
+  useState,
+} from 'react';
 
 import Dimmer from '../../dimmer';
 import Drawer from '../../drawer';
+import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
 import SlidingPanel from '../../slidingPanel';
 import { CloseButton } from '../closeButton';
 import { CommonProps } from '../commonProps';
@@ -170,6 +178,8 @@ const BottomSheet = (props: BottomSheetProps) => {
 
   const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
 
+  const overlayId = useContext(OverlayIdContext);
+
   return is400Zoom ? (
     <Drawer open={props.open} className={props.className} onClose={close}>
       {props.children}
@@ -184,6 +194,7 @@ const BottomSheet = (props: BottomSheetProps) => {
       >
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
         <div
+          id={overlayId}
           role="dialog"
           aria-modal
           onTouchStart={onSwipeStart}

package/src/common/panel/Panel.tsx

@@ -6,6 +6,7 @@ import {
   PropsWithChildren,
   SyntheticEvent,
   forwardRef,
+  useContext,
   useEffect,
   useState,
 } from 'react';
@@ -13,6 +14,7 @@ import { usePopper } from 'react-popper';
 
 import { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';
 import Dimmer from '../../dimmer';
+import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
 
 const POPOVER_OFFSET = [0, 16];
 
@@ -108,9 +110,12 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
     ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),
   };
 
+  const overlayId = useContext(OverlayIdContext);
+
   return (
     <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>
       <div
+        id={overlayId}
         {...rest}
         ref={setPopperElement}
         role="dialog"

package/src/dateLookup/DateLookup.tsx

@@ -13,6 +13,7 @@ import {
 import { isWithinRange, moveToWithinRange } from '../common/dateUtils';
 import ResponsivePanel from '../common/responsivePanel';
 import { WithInputAttributesProps, withInputAttributes } from '../inputs/contexts';
+import { OverlayIdContext, OverlayIdProvider } from '../provider/overlay/OverlayIdProvider';
 import DateTrigger from './dateTrigger';
 import DayCalendar from './dayCalendar';
 import { getStartOfDay } from './getStartOfDay';
@@ -326,25 +327,27 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
         className="input-group"
         onKeyDown={this.handleKeyDown}
       >
-        <DateTrigger
-          selectedDate={selectedDate}
-          size={size}
-          placeholder={placeholder}
-          label={label}
-          monthFormat={monthFormat}
-          disabled={disabled || false}
-          onClick={this.open}
-          onClear={!disabled && clearable && value ? this.handleClear : undefined}
-        />
-        <ResponsivePanel
-          anchorRef={this.element}
-          open={open}
-          className="tw-date-lookup-menu"
-          position={Position.BOTTOM}
-          onClose={this.discard}
-        >
-          {this.getCalendar()}
-        </ResponsivePanel>
+        <OverlayIdProvider open={open}>
+          <DateTrigger
+            selectedDate={selectedDate}
+            size={size}
+            placeholder={placeholder}
+            label={label}
+            monthFormat={monthFormat}
+            disabled={disabled || false}
+            onClick={this.open}
+            onClear={!disabled && clearable && value ? this.handleClear : undefined}
+          />
+          <ResponsivePanel
+            anchorRef={this.element}
+            open={open}
+            className="tw-date-lookup-menu"
+            position={Position.BOTTOM}
+            onClose={this.discard}
+          >
+            {this.getCalendar()}
+          </ResponsivePanel>
+        </OverlayIdProvider>
       </div>
     );
   }

package/src/dateLookup/dateTrigger/DateTrigger.spec.js

@@ -25,6 +25,7 @@ describe('DateTrigger', () => {
 
   beforeEach(() => {
     props = {
+      'aria-expanded': false,
       size: 'md',
       placeholder: 'Enter date..',
       label: '',

package/src/dateLookup/dateTrigger/DateTrigger.tsx

@@ -6,6 +6,8 @@ import { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';
 import { CloseButton } from '../../common/closeButton/CloseButton';
 
 import messages from './DateTrigger.messages';
+import { useContext } from 'react';
+import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
 
 interface DateTriggerProps {
   selectedDate: Date | null;
@@ -30,9 +32,14 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
 }) => {
   const { locale, formatMessage } = useIntl();
 
+  const overlayId = useContext(OverlayIdContext);
+
   return (
     <>
       <button
+        aria-haspopup="dialog"
+        aria-expanded={overlayId != null}
+        aria-controls={overlayId}
         className={`btn btn-${size} btn-input np-date-trigger`}
         disabled={disabled}
         type="button"

package/src/drawer/Drawer.tsx

@@ -1,10 +1,11 @@
 import classNames from 'classnames';
-import { useId } from 'react';
+import { useContext, useId } from 'react';
 
 import { Position, Typography } from '../common';
 import { CloseButton } from '../common/closeButton';
 import { useLayout } from '../common/hooks';
 import Dimmer from '../dimmer';
+import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';
 import SlidingPanel from '../slidingPanel';
 import Title from '../title';
 import { logActionRequiredIf } from '../utilities';
@@ -42,10 +43,13 @@ export default function Drawer({
   const { isMobile } = useLayout();
   const titleId = useId();
 
+  const overlayId = useContext(OverlayIdContext);
+
   return (
     <Dimmer open={open} onClose={onClose}>
       <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>
         <div
+          id={overlayId}
           role="dialog"
           aria-modal
           aria-labelledby={headerTitle ? titleId : undefined}

package/src/i18n/de.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wähle eine Option...",
   "neptune.Select.searchPlaceholder": "Wird gesucht...",
   "neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
+  "neptune.SelectOption.action.label": "Auswählen",
+  "neptune.SelectOption.selected.action.label": "Ausgewählte Option ändern",
   "neptune.Summary.statusDone": "Schritt erledigt",
   "neptune.Summary.statusNotDone": "Schritt noch zu erledigen",
   "neptune.Summary.statusPending": "Schritt ausstehend",

package/src/i18n/es.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Selecciona una opción...",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
+  "neptune.SelectOption.action.label": "Elegir",
+  "neptune.SelectOption.selected.action.label": "Cambiar opción elegida",
   "neptune.Summary.statusDone": "Apartado listo",
   "neptune.Summary.statusNotDone": "Apartado a completar",
   "neptune.Summary.statusPending": "Apartado pendiente",

package/src/i18n/fr.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",
   "neptune.Select.searchPlaceholder": "Recherche...",
   "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
+  "neptune.SelectOption.action.label": "Sélectionner",
+  "neptune.SelectOption.selected.action.label": "Modifier l'option choisie",
   "neptune.Summary.statusDone": "Validé",
   "neptune.Summary.statusNotDone": "À compléter",
   "neptune.Summary.statusPending": "En attente",

package/src/i18n/hu.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Válassz ki egy lehetőséget...",
   "neptune.Select.searchPlaceholder": "Keresés...",
   "neptune.SelectInput.noResultsFound": "Nincs találat",
+  "neptune.SelectOption.action.label": "Kiválasztás",
+  "neptune.SelectOption.selected.action.label": "Kiválasztott opció módosítása",
   "neptune.Summary.statusDone": "Kész",
   "neptune.Summary.statusNotDone": "Hátravan",
   "neptune.Summary.statusPending": "Függőben",

package/src/i18n/id.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Pilih opsi...",
   "neptune.Select.searchPlaceholder": "Cari...",
   "neptune.SelectInput.noResultsFound": "Hasil tidak ditemukan",
+  "neptune.SelectOption.action.label": "Pilih",
+  "neptune.SelectOption.selected.action.label": "Ubah opsi yang dipilih",
   "neptune.Summary.statusDone": "Item selesai",
   "neptune.Summary.statusNotDone": "Item yang harus dilakukan",
   "neptune.Summary.statusPending": "Item tertunda",

package/src/i18n/it.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Seleziona un'opzione...",
   "neptune.Select.searchPlaceholder": "Cerca...",
   "neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
+  "neptune.SelectOption.action.label": "Scegli",
+  "neptune.SelectOption.selected.action.label": "Modifica l'opzione scelta",
   "neptune.Summary.statusDone": "Completato",
   "neptune.Summary.statusNotDone": "Da completare",
   "neptune.Summary.statusPending": "In corso",

package/src/i18n/ja.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "選択してください…",
   "neptune.Select.searchPlaceholder": "検索する... ",
   "neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
+  "neptune.SelectOption.action.label": "選択してください",
+  "neptune.SelectOption.selected.action.label": "選択したオプションを変更する",
   "neptune.Summary.statusDone": "完了",
   "neptune.Summary.statusNotDone": "未完了",
   "neptune.Summary.statusPending": "保留中",

package/src/i18n/pl.json

@@ -23,6 +23,8 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Wybierz opcję...",
   "neptune.Select.searchPlaceholder": "Wyszukaj...",
   "neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",
+  "neptune.SelectOption.action.label": "Wybierz",
+  "neptune.SelectOption.selected.action.label": "Zmień wybraną opcję",
   "neptune.Summary.statusDone": "Czynność wykonana",
   "neptune.Summary.statusNotDone": "Czynność do wykonania",
   "neptune.Summary.statusPending": "Czynność oczekująca",