@transferwise/components 46.154.0 → 46.155.0

package/build/ListItem/Navigation/ListItemNavigation.js

@@ -10,6 +10,7 @@ var jsxRuntime = require('react/jsx-runtime');
 
 const Navigation = function Navigation({
   href,
+  hideIndicator,
   ...props
 }) {
   const {
@@ -22,8 +23,9 @@ const Navigation = function Navigation({
     ids,
     describedByIds
   } = React.useContext(ListItemContext.ListItemContext);
-  const icon = /*#__PURE__*/jsxRuntime.jsx(icons.ChevronRight, {
-    size: 16
+  const icon = hideIndicator ? null : /*#__PURE__*/jsxRuntime.jsx(icons.ChevronRight, {
+    size: 16,
+    "data-testid": "NavigationIndicator"
   });
   return href ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: icon

package/build/ListItem/Navigation/ListItemNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemNavigation.js","sources":["../../../src/ListItem/Navigation/ListItemNavigation.tsx"],"sourcesContent":["import { ChevronRight } from '@transferwise/icons';\nimport type { ButtonProps } from '../../Button/Button.types';\nimport { useListItemControl } from '../useListItemControl';\nimport { PrimitiveButton } from '../../Primitives';\nimport { useContext } from 'react';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'>;\n\n/**\n * This component allows for rendering a control functionally synonymous with HTML `anchor` or a\n * `button`, giving users a rich way to choose between options and navigate to another screen or\n * step in a flow. It offers only a subset of features of the HTML element in line with the\n * ListItem's constraints.<br />\n * <br />\n * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---navigation) for details.\n */\nexport const Navigation = function Navigation({ href, ...props }: ListItemNavigationProps) {\n  const { baseItemProps } = useListItemControl('navigation', { href, ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n  const icon = <ChevronRight size={16} />;\n\n  return href ? (\n    <>{icon}</>\n  ) : (\n    <PrimitiveButton\n      disabled={baseItemProps.disabled}\n      aria-describedby={describedByIds}\n      id={ids.control}\n      className=\"btn-unstyled wds-list-item-control\"\n      onClick={props.onClick as React.MouseEventHandler<HTMLButtonElement> | undefined}\n    >\n      {icon}\n    </PrimitiveButton>\n  );\n};\n\nNavigation.displayName = 'ListItem.Navigation';\n"],"names":["Navigation","href","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","icon","_jsx","ChevronRight","size","_Fragment","children","PrimitiveButton","disabled","id","control","className","onClick","displayName"],"mappings":";;;;;;;;;;AAiBO,MAAMA,UAAU,GAAG,SAASA,UAAUA,CAAC;EAAEC,IAAI;EAAE,GAAGC;AAAK,CAA2B,EAAA;EACvF,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,YAAY,EAAE;IAAEH,IAAI;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC9E,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;AAC3D,EAAA,MAAMC,IAAI,gBAAGC,cAAA,CAACC,kBAAY,EAAA;AAACC,IAAAA,IAAI,EAAE;AAAG,GAAA,CAAG;AAEvC,EAAA,OAAOX,IAAI,gBACTS,cAAA,CAAAG,mBAAA,EAAA;AAAAC,IAAAA,QAAA,EAAGL;AAAI,GAAC,CAAG,gBAEXC,cAAA,CAACK,uBAAe,EAAA;IACdC,QAAQ,EAAEb,aAAa,CAACa,QAAS;AACjC,IAAA,kBAAA,EAAkBV,cAAe;IACjCW,EAAE,EAAEZ,GAAG,CAACa,OAAQ;AAChBC,IAAAA,SAAS,EAAC,oCAAoC;IAC9CC,OAAO,EAAElB,KAAK,CAACkB,OAAkE;AAAAN,IAAAA,QAAA,EAEhFL;AAAI,GACU,CAClB;AACH;AAEAT,UAAU,CAACqB,WAAW,GAAG,qBAAqB;;;;"}
+{"version":3,"file":"ListItemNavigation.js","sources":["../../../src/ListItem/Navigation/ListItemNavigation.tsx"],"sourcesContent":["import { ChevronRight } from '@transferwise/icons';\nimport type { ButtonProps } from '../../Button/Button.types';\nimport { useListItemControl } from '../useListItemControl';\nimport { PrimitiveButton } from '../../Primitives';\nimport { useContext } from 'react';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n  /**\n   * When `true`, the chevron indicator is hidden. Use when surrounding context makes the\n   * interactive affordance clear without a directional cue (e.g. a widget row with trailing\n   * value content).<br />\n   * **NB:** This feature should be used with great care as it can result in the item looking\n   * as non-interactive, significantly degrading accessibility, UX, and conversion,\n   * especially if used on busy screens with multiple Lists.\n   */\n  hideIndicator?: boolean;\n};\n\n/**\n * This component allows for rendering a control functionally synonymous with HTML `anchor` or a\n * `button`, giving users a rich way to choose between options and navigate to another screen or\n * step in a flow. It offers only a subset of features of the HTML element in line with the\n * ListItem's constraints.<br />\n * <br />\n * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---navigation) for details.\n */\nexport const Navigation = function Navigation({\n  href,\n  hideIndicator,\n  ...props\n}: ListItemNavigationProps) {\n  const { baseItemProps } = useListItemControl('navigation', { href, ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n  const icon = hideIndicator ? null : <ChevronRight size={16} data-testid=\"NavigationIndicator\" />;\n\n  return href ? (\n    <>{icon}</>\n  ) : (\n    <PrimitiveButton\n      disabled={baseItemProps.disabled}\n      aria-describedby={describedByIds}\n      id={ids.control}\n      className=\"btn-unstyled wds-list-item-control\"\n      onClick={props.onClick as React.MouseEventHandler<HTMLButtonElement> | undefined}\n    >\n      {icon}\n    </PrimitiveButton>\n  );\n};\n\nNavigation.displayName = 'ListItem.Navigation';\n"],"names":["Navigation","href","hideIndicator","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","icon","_jsx","ChevronRight","size","_Fragment","children","PrimitiveButton","disabled","id","control","className","onClick","displayName"],"mappings":";;;;;;;;;;AA2BO,MAAMA,UAAU,GAAG,SAASA,UAAUA,CAAC;EAC5CC,IAAI;EACJC,aAAa;EACb,GAAGC;AAAK,CACgB,EAAA;EACxB,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,YAAY,EAAE;IAAEJ,IAAI;IAAE,GAAGE;AAAK,GAAE,CAAC;EAC9E,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;EAC3D,MAAMC,IAAI,GAAGR,aAAa,GAAG,IAAI,gBAAGS,cAAA,CAACC,kBAAY,EAAA;AAACC,IAAAA,IAAI,EAAE,EAAG;IAAC,aAAA,EAAY;AAAqB,GAAA,CAAG;AAEhG,EAAA,OAAOZ,IAAI,gBACTU,cAAA,CAAAG,mBAAA,EAAA;AAAAC,IAAAA,QAAA,EAAGL;AAAI,GAAC,CAAG,gBAEXC,cAAA,CAACK,uBAAe,EAAA;IACdC,QAAQ,EAAEb,aAAa,CAACa,QAAS;AACjC,IAAA,kBAAA,EAAkBV,cAAe;IACjCW,EAAE,EAAEZ,GAAG,CAACa,OAAQ;AAChBC,IAAAA,SAAS,EAAC,oCAAoC;IAC9CC,OAAO,EAAElB,KAAK,CAACkB,OAAkE;AAAAN,IAAAA,QAAA,EAEhFL;AAAI,GACU,CAClB;AACH;AAEAV,UAAU,CAACsB,WAAW,GAAG,qBAAqB;;;;"}

package/build/ListItem/Navigation/ListItemNavigation.mjs

@@ -8,6 +8,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 
 const Navigation = function Navigation({
   href,
+  hideIndicator,
   ...props
 }) {
   const {
@@ -20,8 +21,9 @@ const Navigation = function Navigation({
     ids,
     describedByIds
   } = useContext(ListItemContext);
-  const icon = /*#__PURE__*/jsx(ChevronRight, {
-    size: 16
+  const icon = hideIndicator ? null : /*#__PURE__*/jsx(ChevronRight, {
+    size: 16,
+    "data-testid": "NavigationIndicator"
   });
   return href ? /*#__PURE__*/jsx(Fragment, {
     children: icon

package/build/ListItem/Navigation/ListItemNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemNavigation.mjs","sources":["../../../src/ListItem/Navigation/ListItemNavigation.tsx"],"sourcesContent":["import { ChevronRight } from '@transferwise/icons';\nimport type { ButtonProps } from '../../Button/Button.types';\nimport { useListItemControl } from '../useListItemControl';\nimport { PrimitiveButton } from '../../Primitives';\nimport { useContext } from 'react';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'>;\n\n/**\n * This component allows for rendering a control functionally synonymous with HTML `anchor` or a\n * `button`, giving users a rich way to choose between options and navigate to another screen or\n * step in a flow. It offers only a subset of features of the HTML element in line with the\n * ListItem's constraints.<br />\n * <br />\n * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---navigation) for details.\n */\nexport const Navigation = function Navigation({ href, ...props }: ListItemNavigationProps) {\n  const { baseItemProps } = useListItemControl('navigation', { href, ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n  const icon = <ChevronRight size={16} />;\n\n  return href ? (\n    <>{icon}</>\n  ) : (\n    <PrimitiveButton\n      disabled={baseItemProps.disabled}\n      aria-describedby={describedByIds}\n      id={ids.control}\n      className=\"btn-unstyled wds-list-item-control\"\n      onClick={props.onClick as React.MouseEventHandler<HTMLButtonElement> | undefined}\n    >\n      {icon}\n    </PrimitiveButton>\n  );\n};\n\nNavigation.displayName = 'ListItem.Navigation';\n"],"names":["Navigation","href","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","icon","_jsx","ChevronRight","size","_Fragment","children","PrimitiveButton","disabled","id","control","className","onClick","displayName"],"mappings":";;;;;;;;AAiBO,MAAMA,UAAU,GAAG,SAASA,UAAUA,CAAC;EAAEC,IAAI;EAAE,GAAGC;AAAK,CAA2B,EAAA;EACvF,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,YAAY,EAAE;IAAEH,IAAI;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC9E,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;AAC3D,EAAA,MAAMC,IAAI,gBAAGC,GAAA,CAACC,YAAY,EAAA;AAACC,IAAAA,IAAI,EAAE;AAAG,GAAA,CAAG;AAEvC,EAAA,OAAOX,IAAI,gBACTS,GAAA,CAAAG,QAAA,EAAA;AAAAC,IAAAA,QAAA,EAAGL;AAAI,GAAC,CAAG,gBAEXC,GAAA,CAACK,eAAe,EAAA;IACdC,QAAQ,EAAEb,aAAa,CAACa,QAAS;AACjC,IAAA,kBAAA,EAAkBV,cAAe;IACjCW,EAAE,EAAEZ,GAAG,CAACa,OAAQ;AAChBC,IAAAA,SAAS,EAAC,oCAAoC;IAC9CC,OAAO,EAAElB,KAAK,CAACkB,OAAkE;AAAAN,IAAAA,QAAA,EAEhFL;AAAI,GACU,CAClB;AACH;AAEAT,UAAU,CAACqB,WAAW,GAAG,qBAAqB;;;;"}
+{"version":3,"file":"ListItemNavigation.mjs","sources":["../../../src/ListItem/Navigation/ListItemNavigation.tsx"],"sourcesContent":["import { ChevronRight } from '@transferwise/icons';\nimport type { ButtonProps } from '../../Button/Button.types';\nimport { useListItemControl } from '../useListItemControl';\nimport { PrimitiveButton } from '../../Primitives';\nimport { useContext } from 'react';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n  /**\n   * When `true`, the chevron indicator is hidden. Use when surrounding context makes the\n   * interactive affordance clear without a directional cue (e.g. a widget row with trailing\n   * value content).<br />\n   * **NB:** This feature should be used with great care as it can result in the item looking\n   * as non-interactive, significantly degrading accessibility, UX, and conversion,\n   * especially if used on busy screens with multiple Lists.\n   */\n  hideIndicator?: boolean;\n};\n\n/**\n * This component allows for rendering a control functionally synonymous with HTML `anchor` or a\n * `button`, giving users a rich way to choose between options and navigate to another screen or\n * step in a flow. It offers only a subset of features of the HTML element in line with the\n * ListItem's constraints.<br />\n * <br />\n * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---navigation) for details.\n */\nexport const Navigation = function Navigation({\n  href,\n  hideIndicator,\n  ...props\n}: ListItemNavigationProps) {\n  const { baseItemProps } = useListItemControl('navigation', { href, ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n  const icon = hideIndicator ? null : <ChevronRight size={16} data-testid=\"NavigationIndicator\" />;\n\n  return href ? (\n    <>{icon}</>\n  ) : (\n    <PrimitiveButton\n      disabled={baseItemProps.disabled}\n      aria-describedby={describedByIds}\n      id={ids.control}\n      className=\"btn-unstyled wds-list-item-control\"\n      onClick={props.onClick as React.MouseEventHandler<HTMLButtonElement> | undefined}\n    >\n      {icon}\n    </PrimitiveButton>\n  );\n};\n\nNavigation.displayName = 'ListItem.Navigation';\n"],"names":["Navigation","href","hideIndicator","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","icon","_jsx","ChevronRight","size","_Fragment","children","PrimitiveButton","disabled","id","control","className","onClick","displayName"],"mappings":";;;;;;;;AA2BO,MAAMA,UAAU,GAAG,SAASA,UAAUA,CAAC;EAC5CC,IAAI;EACJC,aAAa;EACb,GAAGC;AAAK,CACgB,EAAA;EACxB,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,YAAY,EAAE;IAAEJ,IAAI;IAAE,GAAGE;AAAK,GAAE,CAAC;EAC9E,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;EAC3D,MAAMC,IAAI,GAAGR,aAAa,GAAG,IAAI,gBAAGS,GAAA,CAACC,YAAY,EAAA;AAACC,IAAAA,IAAI,EAAE,EAAG;IAAC,aAAA,EAAY;AAAqB,GAAA,CAAG;AAEhG,EAAA,OAAOZ,IAAI,gBACTU,GAAA,CAAAG,QAAA,EAAA;AAAAC,IAAAA,QAAA,EAAGL;AAAI,GAAC,CAAG,gBAEXC,GAAA,CAACK,eAAe,EAAA;IACdC,QAAQ,EAAEb,aAAa,CAACa,QAAS;AACjC,IAAA,kBAAA,EAAkBV,cAAe;IACjCW,EAAE,EAAEZ,GAAG,CAACa,OAAQ;AAChBC,IAAAA,SAAS,EAAC,oCAAoC;IAC9CC,OAAO,EAAElB,KAAK,CAACkB,OAAkE;AAAAN,IAAAA,QAAA,EAEhFL;AAAI,GACU,CAClB;AACH;AAEAV,UAAU,CAACsB,WAAW,GAAG,qBAAqB;;;;"}

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

@@ -102,7 +102,7 @@ export declare const ListItem: {
         displayName: string;
     };
     Navigation: {
-        ({ href, ...props }: ListItemNavigationProps): import("react").JSX.Element;
+        ({ href, hideIndicator, ...props }: ListItemNavigationProps): import("react").JSX.Element;
         displayName: string;
     };
     Button: import("react").ForwardRefExoticComponent<Omit<import("..").ButtonProps, "block" | "disabled" | "size" | "v2" | "addonStart"> & {

package/build/types/ListItem/Navigation/ListItemNavigation.d.ts

@@ -1,5 +1,15 @@
 import type { ButtonProps } from '../../Button/Button.types';
-export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'>;
+export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+    /**
+     * When `true`, the chevron indicator is hidden. Use when surrounding context makes the
+     * interactive affordance clear without a directional cue (e.g. a widget row with trailing
+     * value content).<br />
+     * **NB:** This feature should be used with great care as it can result in the item looking
+     * as non-interactive, significantly degrading accessibility, UX, and conversion,
+     * especially if used on busy screens with multiple Lists.
+     */
+    hideIndicator?: boolean;
+};
 /**
  * This component allows for rendering a control functionally synonymous with HTML `anchor` or a
  * `button`, giving users a rich way to choose between options and navigate to another screen or
@@ -9,7 +19,7 @@ export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'ta
  * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---navigation) for details.
  */
 export declare const Navigation: {
-    ({ href, ...props }: ListItemNavigationProps): import("react").JSX.Element;
+    ({ href, hideIndicator, ...props }: ListItemNavigationProps): import("react").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=ListItemNavigation.d.ts.map

package/build/types/ListItem/Navigation/ListItemNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemNavigation.d.ts","sourceRoot":"","sources":["../../../../src/ListItem/Navigation/ListItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAM7D,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEvF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;yBAA2C,uBAAuB;;CAkBxF,CAAC"}
+{"version":3,"file":"ListItemNavigation.d.ts","sourceRoot":"","sources":["../../../../src/ListItem/Navigation/ListItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAM7D,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;IACvF;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;wCAIpB,uBAAuB;;CAkBzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.154.0",
+  "version": "46.155.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -106,7 +106,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@floating-ui/react": "^0.27.19",
+    "@floating-ui/react": "^0.27.20",
     "@headlessui/react": "^2.2.10",
     "@react-aria/focus": "^3.22.1",
     "@react-aria/overlays": "^3.32.1",
@@ -121,7 +121,7 @@
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.49.2"
+    "virtua": "^0.49.3"
   },
   "publishConfig": {
     "access": "public",

package/src/ListItem/Navigation/ListItemNavigation.test.tsx

@@ -30,6 +30,29 @@ describe('ListItem.Navigation', () => {
     });
   });
 
+  describe('hideIndicator', () => {
+    it('renders the chevron by default for a button', () => {
+      renderWith({ control: <ListItem.Navigation onClick={() => {}} /> });
+      expect(screen.getByTestId('NavigationIndicator')).toBeInTheDocument();
+    });
+
+    it('renders the chevron by default for a link', () => {
+      renderWith({ control: <ListItem.Navigation href="/test-path" /> });
+      expect(screen.getByTestId('NavigationIndicator')).toBeInTheDocument();
+    });
+
+    it('hides the chevron when hideIndicator is true on a button', () => {
+      renderWith({ control: <ListItem.Navigation hideIndicator onClick={() => {}} /> });
+      expect(screen.queryByTestId('NavigationIndicator')).not.toBeInTheDocument();
+    });
+
+    it('hides the chevron when hideIndicator is true on a link', () => {
+      renderWith({ control: <ListItem.Navigation hideIndicator href="/test-path" /> });
+      expect(screen.getByRole('link')).toBeInTheDocument();
+      expect(screen.queryByTestId('NavigationIndicator')).not.toBeInTheDocument();
+    });
+  });
+
   describe('as link', () => {
     it('renders a link if href is set', () => {
       renderWith({ control: <ListItem.Navigation href="/test-path" /> });

package/src/ListItem/Navigation/ListItemNavigation.tsx

@@ -5,7 +5,17 @@ import { PrimitiveButton } from '../../Primitives';
 import { useContext } from 'react';
 import { ListItemContext } from '../ListItemContext';
 
-export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'>;
+export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+  /**
+   * When `true`, the chevron indicator is hidden. Use when surrounding context makes the
+   * interactive affordance clear without a directional cue (e.g. a widget row with trailing
+   * value content).<br />
+   * **NB:** This feature should be used with great care as it can result in the item looking
+   * as non-interactive, significantly degrading accessibility, UX, and conversion,
+   * especially if used on busy screens with multiple Lists.
+   */
+  hideIndicator?: boolean;
+};
 
 /**
  * This component allows for rendering a control functionally synonymous with HTML `anchor` or a
@@ -15,10 +25,14 @@ export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'ta
  * <br />
  * Please refer to the [Design documentation](https://docs.wise.design/components/list-item---navigation) for details.
  */
-export const Navigation = function Navigation({ href, ...props }: ListItemNavigationProps) {
+export const Navigation = function Navigation({
+  href,
+  hideIndicator,
+  ...props
+}: ListItemNavigationProps) {
   const { baseItemProps } = useListItemControl('navigation', { href, ...props });
   const { ids, describedByIds } = useContext(ListItemContext);
-  const icon = <ChevronRight size={16} />;
+  const icon = hideIndicator ? null : <ChevronRight size={16} data-testid="NavigationIndicator" />;
 
   return href ? (
     <>{icon}</>

package/src/ListItem/Navigation/_stories/ListItemNavigation.story.tsx

@@ -50,6 +50,39 @@ export const Playground: Story = {
   },
 };
 
+/**
+ * Use `hideIndicator` when surrounding context (e.g. trailing value content) makes the
+ * interactive affordance clear without a chevron. <br />
+ * **NB:** This feature should be used with great care as it can result in the item looking
+ * as non-interactive, significantly degrading accessibility, UX, and conversion,
+ * especially if used on busy screens with multiple Lists.
+ */
+export const WithoutIndicator: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render: (args) => {
+    return (
+      <List>
+        <ListItem
+          control={<ListItem.Navigation href="#target" hideIndicator onClick={args.onClick} />}
+          title="Navigation without chevron"
+          subtitle="Interactive row — no directional indicator"
+          valueTitle="£1,234.56"
+          media={MEDIA.avatarSingle}
+        />
+
+        <ListItem
+          control={<ListItem.Navigation hideIndicator onClick={args.onClick} />}
+          title="Navigation without chevron (button)"
+          subtitle="Triggers a click handler"
+          media={MEDIA.avatarSingle}
+        />
+      </List>
+    );
+  },
+};
+
 /**
  * Navigation control can be rendered as HTML anchor or a button
  */