@transferwise/components 46.106.0 → 46.108.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (152) hide show
  1. package/build/actionOption/ActionOption.js.map +1 -1
  2. package/build/actionOption/ActionOption.mjs.map +1 -1
  3. package/build/checkboxOption/CheckboxOption.js.map +1 -1
  4. package/build/checkboxOption/CheckboxOption.mjs.map +1 -1
  5. package/build/header/Header.js +1 -0
  6. package/build/header/Header.js.map +1 -1
  7. package/build/header/Header.mjs +1 -0
  8. package/build/header/Header.mjs.map +1 -1
  9. package/build/legacylistItem/LegacyListItem.js.map +1 -1
  10. package/build/legacylistItem/LegacyListItem.mjs.map +1 -1
  11. package/build/link/Link.js +6 -2
  12. package/build/link/Link.js.map +1 -1
  13. package/build/link/Link.mjs +6 -2
  14. package/build/link/Link.mjs.map +1 -1
  15. package/build/listItem/ListItem.js +28 -16
  16. package/build/listItem/ListItem.js.map +1 -1
  17. package/build/listItem/ListItem.mjs +28 -16
  18. package/build/listItem/ListItem.mjs.map +1 -1
  19. package/build/listItem/ListItemContext.js.map +1 -1
  20. package/build/listItem/ListItemContext.mjs.map +1 -1
  21. package/build/listItem/Navigation/ListItemNavigation.js +1 -3
  22. package/build/listItem/Navigation/ListItemNavigation.js.map +1 -1
  23. package/build/listItem/Navigation/ListItemNavigation.mjs +2 -4
  24. package/build/listItem/Navigation/ListItemNavigation.mjs.map +1 -1
  25. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.js +74 -0
  26. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.js.map +1 -0
  27. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.mjs +72 -0
  28. package/build/listItem/Prompt/InlinePrompt/InlinePrompt.mjs.map +1 -0
  29. package/build/listItem/Prompt/ListItemPrompt.js +10 -15
  30. package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
  31. package/build/listItem/Prompt/ListItemPrompt.mjs +11 -16
  32. package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
  33. package/build/main.css +122 -81
  34. package/build/navigationOption/NavigationOption.js.map +1 -1
  35. package/build/navigationOption/NavigationOption.mjs.map +1 -1
  36. package/build/navigationOptionsList/NavigationOptionsList.js.map +1 -1
  37. package/build/navigationOptionsList/NavigationOptionsList.mjs.map +1 -1
  38. package/build/radioOption/RadioOption.js.map +1 -1
  39. package/build/radioOption/RadioOption.mjs.map +1 -1
  40. package/build/styles/link/Link.css +7 -0
  41. package/build/styles/listItem/ListItem.css +115 -81
  42. package/build/styles/listItem/ListItem.grid.css +11 -3
  43. package/build/styles/listItem/ListItem.vars.css +0 -0
  44. package/build/styles/listItem/Prompt/InlinePrompt/InlinePrompt.css +153 -0
  45. package/build/styles/listItem/Prompt/ListItemPrompt.css +72 -72
  46. package/build/styles/main.css +122 -81
  47. package/build/summary/Summary.js +8 -0
  48. package/build/summary/Summary.js.map +1 -1
  49. package/build/summary/Summary.mjs +8 -0
  50. package/build/summary/Summary.mjs.map +1 -1
  51. package/build/switchOption/SwitchOption.js +8 -0
  52. package/build/switchOption/SwitchOption.js.map +1 -1
  53. package/build/switchOption/SwitchOption.mjs +8 -0
  54. package/build/switchOption/SwitchOption.mjs.map +1 -1
  55. package/build/types/actionOption/ActionOption.d.ts +8 -0
  56. package/build/types/actionOption/ActionOption.d.ts.map +1 -1
  57. package/build/types/checkboxOption/CheckboxOption.d.ts +8 -0
  58. package/build/types/checkboxOption/CheckboxOption.d.ts.map +1 -1
  59. package/build/types/header/Header.d.ts +1 -0
  60. package/build/types/header/Header.d.ts.map +1 -1
  61. package/build/types/legacylistItem/LegacyListItem.d.ts +8 -0
  62. package/build/types/legacylistItem/LegacyListItem.d.ts.map +1 -1
  63. package/build/types/link/Link.d.ts +1 -1
  64. package/build/types/link/Link.d.ts.map +1 -1
  65. package/build/types/listItem/ListItem.d.ts +10 -1
  66. package/build/types/listItem/ListItem.d.ts.map +1 -1
  67. package/build/types/listItem/ListItemContext.d.ts +2 -1
  68. package/build/types/listItem/ListItemContext.d.ts.map +1 -1
  69. package/build/types/listItem/Navigation/ListItemNavigation.d.ts.map +1 -1
  70. package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts +15 -0
  71. package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -0
  72. package/build/types/listItem/Prompt/InlinePrompt/index.d.ts +3 -0
  73. package/build/types/listItem/Prompt/InlinePrompt/index.d.ts.map +1 -0
  74. package/build/types/listItem/Prompt/ListItemPrompt.d.ts +4 -6
  75. package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -1
  76. package/build/types/listItem/_stories/helpers.d.ts +1 -1
  77. package/build/types/listItem/_stories/helpers.d.ts.map +1 -1
  78. package/build/types/listItem/_stories/subcomponents.d.ts +4 -0
  79. package/build/types/listItem/_stories/subcomponents.d.ts.map +1 -1
  80. package/build/types/listItem/_stories/variants/helpers.d.ts.map +1 -1
  81. package/build/types/listItem/constants.d.ts +16 -0
  82. package/build/types/listItem/constants.d.ts.map +1 -0
  83. package/build/types/listItem/useListItemControl.d.ts +1 -1
  84. package/build/types/navigationOption/NavigationOption.d.ts +8 -0
  85. package/build/types/navigationOption/NavigationOption.d.ts.map +1 -1
  86. package/build/types/navigationOptionsList/NavigationOptionsList.d.ts +9 -0
  87. package/build/types/navigationOptionsList/NavigationOptionsList.d.ts.map +1 -1
  88. package/build/types/radioOption/RadioOption.d.ts +8 -0
  89. package/build/types/radioOption/RadioOption.d.ts.map +1 -1
  90. package/build/types/summary/Summary.d.ts +8 -0
  91. package/build/types/summary/Summary.d.ts.map +1 -1
  92. package/build/types/switchOption/SwitchOption.d.ts +8 -0
  93. package/build/types/switchOption/SwitchOption.d.ts.map +1 -1
  94. package/package.json +2 -2
  95. package/src/actionOption/ActionOption.story.tsx +4 -0
  96. package/src/actionOption/ActionOption.tsx +8 -0
  97. package/src/checkboxOption/CheckboxOption.story.tsx +4 -0
  98. package/src/checkboxOption/CheckboxOption.tsx +8 -0
  99. package/src/header/Header.story.tsx +14 -0
  100. package/src/header/Header.tsx +2 -0
  101. package/src/legacylistItem/LegacyListItem.story.tsx +4 -0
  102. package/src/legacylistItem/LegacyListItem.tsx +8 -0
  103. package/src/link/Link.css +7 -0
  104. package/src/link/Link.less +8 -0
  105. package/src/link/Link.spec.tsx +28 -0
  106. package/src/link/Link.story.tsx +72 -16
  107. package/src/link/Link.tsx +5 -1
  108. package/src/listItem/ListItem.css +115 -81
  109. package/src/listItem/ListItem.grid.css +11 -3
  110. package/src/listItem/ListItem.grid.less +14 -4
  111. package/src/listItem/ListItem.less +35 -8
  112. package/src/listItem/ListItem.spec.tsx +37 -1
  113. package/src/listItem/ListItem.tsx +47 -21
  114. package/src/listItem/ListItem.vars.css +0 -0
  115. package/src/listItem/ListItem.vars.less +11 -0
  116. package/src/listItem/ListItemContext.tsx +2 -1
  117. package/src/listItem/Navigation/ListItemNavigation.spec.tsx +1 -10
  118. package/src/listItem/Navigation/ListItemNavigation.story.tsx +0 -22
  119. package/src/listItem/Navigation/ListItemNavigation.tsx +2 -3
  120. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.css +153 -0
  121. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.less +162 -0
  122. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.spec.tsx +66 -0
  123. package/src/listItem/Prompt/InlinePrompt/InlinePrompt.tsx +56 -0
  124. package/src/listItem/Prompt/InlinePrompt/index.ts +2 -0
  125. package/src/listItem/Prompt/ListItemPrompt.css +72 -72
  126. package/src/listItem/Prompt/ListItemPrompt.less +2 -130
  127. package/src/listItem/Prompt/ListItemPrompt.spec.tsx +36 -0
  128. package/src/listItem/Prompt/ListItemPrompt.story.tsx +4 -2
  129. package/src/listItem/Prompt/ListItemPrompt.tsx +14 -14
  130. package/src/listItem/_stories/ListItem.disabled.story.tsx +433 -0
  131. package/src/listItem/_stories/ListItem.layout.test.story.tsx +10 -155
  132. package/src/listItem/_stories/ListItem.scenarios.story.tsx +4 -25
  133. package/src/listItem/_stories/ListItem.story.tsx +17 -187
  134. package/src/listItem/_stories/helpers.tsx +23 -6
  135. package/src/listItem/_stories/subcomponents.tsx +19 -2
  136. package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx +1 -1
  137. package/src/listItem/_stories/variants/ListItem.neutral.test.story.tsx +55 -0
  138. package/src/listItem/_stories/variants/ListItem.small.test.story.tsx +1 -1
  139. package/src/listItem/_stories/variants/helpers.tsx +28 -1
  140. package/src/listItem/constants.ts +15 -0
  141. package/src/main.css +122 -81
  142. package/src/navigationOption/NavigationOption.story.tsx +4 -1
  143. package/src/navigationOption/NavigationOption.tsx +8 -0
  144. package/src/navigationOptionsList/NavigationOptionsList.story.tsx +4 -0
  145. package/src/navigationOptionsList/NavigationOptionsList.tsx +9 -0
  146. package/src/radioOption/RadioOption.story.tsx +4 -0
  147. package/src/radioOption/RadioOption.tsx +8 -0
  148. package/src/summary/Summary.story.tsx +4 -0
  149. package/src/summary/Summary.tsx +8 -0
  150. package/src/switchOption/SwitchOption.story.tsx +4 -1
  151. package/src/switchOption/SwitchOption.tsx +8 -0
  152. package/src/table/Table.story.tsx +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n AriaLabelProperty,\n CommonProps,\n Priority,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n | PriorityPrimary\n | PrioritySecondary\n | PriorityTertiary\n | 'secondary-send';\n\nexport type ActionOptionProps = {\n complex?: boolean;\n content?: React.ReactNode;\n disabled?: boolean;\n media?: React.ReactNode;\n showMediaAtAllSizes?: boolean;\n onClick: () => void;\n title: React.ReactNode;\n additionalContent?: React.ReactNode;\n action: React.ReactNode;\n priority?: ActionOptionPriority;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n as?: React.ElementType;\n} & CommonProps &\n AriaLabelProperty;\n\nconst ActionOption = ({\n action,\n priority = Priority.PRIMARY,\n disabled,\n onClick,\n media,\n title,\n content,\n additionalContent,\n complex,\n className,\n showMediaAtAllSizes,\n showMediaCircle,\n isContainerAligned,\n as,\n 'aria-label': ariaLabel,\n}: ActionOptionProps) => {\n const sharedProps = {\n media,\n title,\n content,\n complex,\n disabled,\n showMediaAtAllSizes,\n showMediaCircle,\n className: clsx('tw-action-option', className),\n isContainerAligned,\n additionalContent,\n as,\n };\n\n const getAriaLabel = (): string | undefined => {\n if (ariaLabel) {\n return ariaLabel;\n }\n\n const generatedLabels: string[] = [];\n\n if (typeof title === 'string') {\n generatedLabels.push(title);\n }\n\n if (typeof action === 'string') {\n generatedLabels.push(action);\n }\n\n return generatedLabels.join(', ') || undefined;\n };\n\n const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {\n switch (priority) {\n case 'primary':\n return 'primary';\n case 'secondary':\n return 'secondary-neutral';\n case 'tertiary':\n return 'tertiary';\n case 'secondary-send':\n return 'secondary';\n default:\n return 'primary';\n }\n };\n\n return (\n <Option\n {...sharedProps}\n button={\n <Button\n v2\n size=\"sm\"\n priority={mapPriority(priority)}\n disabled={disabled}\n aria-label={getAriaLabel()}\n onClick={onClick}\n >\n {action}\n </Button>\n }\n />\n );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","additionalContent","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","ariaLabel","sharedProps","clsx","getAriaLabel","generatedLabels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,iBAAiB;EACjBC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;EAClBC,EAAE;AACF,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBX,KAAK;IACLC,KAAK;IACLC,OAAO;IACPE,OAAO;IACPN,QAAQ;IACRQ,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEO,SAAI,CAAC,kBAAkB,EAAEP,SAAS,CAAC;IAC9CG,kBAAkB;IAClBL,iBAAiB;AACjBM,IAAAA;GACD;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS;AAClB,IAAA;IAEA,MAAMI,eAAe,GAAa,EAAE;AAEpC,IAAA,IAAI,OAAOb,KAAK,KAAK,QAAQ,EAAE;AAC7Ba,MAAAA,eAAe,CAACC,IAAI,CAACd,KAAK,CAAC;AAC7B,IAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BoB,MAAAA,eAAe,CAACC,IAAI,CAACrB,MAAM,CAAC;AAC9B,IAAA;AAEA,IAAA,OAAOoB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS;EAChD,CAAC;EAED,MAAMC,WAAW,GAAIvB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW;AACpB,MAAA;AACE,QAAA,OAAO,SAAS;AACpB;EACF,CAAC;EAED,oBACEwB,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,cAAA,CAACG,uBAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT7B,MAAAA,QAAQ,EAAEuB,WAAW,CAACvB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAA,EAAYe,YAAY,EAAG;AAC3Bd,MAAAA,OAAO,EAAEA,OAAQ;AAAA0B,MAAAA,QAAA,EAEhB/B;KACK;AACT,GAAA,CACD;AAEN;;;;"}
1
+ {"version":3,"file":"ActionOption.js","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n AriaLabelProperty,\n CommonProps,\n Priority,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n | PriorityPrimary\n | PrioritySecondary\n | PriorityTertiary\n | 'secondary-send';\n\nexport type ActionOptionProps = {\n complex?: boolean;\n content?: React.ReactNode;\n disabled?: boolean;\n media?: React.ReactNode;\n showMediaAtAllSizes?: boolean;\n onClick: () => void;\n title: React.ReactNode;\n additionalContent?: React.ReactNode;\n action: React.ReactNode;\n priority?: ActionOptionPriority;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n as?: React.ElementType;\n} & CommonProps &\n AriaLabelProperty;\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst ActionOption = ({\n action,\n priority = Priority.PRIMARY,\n disabled,\n onClick,\n media,\n title,\n content,\n additionalContent,\n complex,\n className,\n showMediaAtAllSizes,\n showMediaCircle,\n isContainerAligned,\n as,\n 'aria-label': ariaLabel,\n}: ActionOptionProps) => {\n const sharedProps = {\n media,\n title,\n content,\n complex,\n disabled,\n showMediaAtAllSizes,\n showMediaCircle,\n className: clsx('tw-action-option', className),\n isContainerAligned,\n additionalContent,\n as,\n };\n\n const getAriaLabel = (): string | undefined => {\n if (ariaLabel) {\n return ariaLabel;\n }\n\n const generatedLabels: string[] = [];\n\n if (typeof title === 'string') {\n generatedLabels.push(title);\n }\n\n if (typeof action === 'string') {\n generatedLabels.push(action);\n }\n\n return generatedLabels.join(', ') || undefined;\n };\n\n const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {\n switch (priority) {\n case 'primary':\n return 'primary';\n case 'secondary':\n return 'secondary-neutral';\n case 'tertiary':\n return 'tertiary';\n case 'secondary-send':\n return 'secondary';\n default:\n return 'primary';\n }\n };\n\n return (\n <Option\n {...sharedProps}\n button={\n <Button\n v2\n size=\"sm\"\n priority={mapPriority(priority)}\n disabled={disabled}\n aria-label={getAriaLabel()}\n onClick={onClick}\n >\n {action}\n </Button>\n }\n />\n );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","additionalContent","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","ariaLabel","sharedProps","clsx","getAriaLabel","generatedLabels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAMA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,iBAAiB;EACjBC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;EAClBC,EAAE;AACF,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBX,KAAK;IACLC,KAAK;IACLC,OAAO;IACPE,OAAO;IACPN,QAAQ;IACRQ,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEO,SAAI,CAAC,kBAAkB,EAAEP,SAAS,CAAC;IAC9CG,kBAAkB;IAClBL,iBAAiB;AACjBM,IAAAA;GACD;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS;AAClB,IAAA;IAEA,MAAMI,eAAe,GAAa,EAAE;AAEpC,IAAA,IAAI,OAAOb,KAAK,KAAK,QAAQ,EAAE;AAC7Ba,MAAAA,eAAe,CAACC,IAAI,CAACd,KAAK,CAAC;AAC7B,IAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BoB,MAAAA,eAAe,CAACC,IAAI,CAACrB,MAAM,CAAC;AAC9B,IAAA;AAEA,IAAA,OAAOoB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS;EAChD,CAAC;EAED,MAAMC,WAAW,GAAIvB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW;AACpB,MAAA;AACE,QAAA,OAAO,SAAS;AACpB;EACF,CAAC;EAED,oBACEwB,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,cAAA,CAACG,uBAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT7B,MAAAA,QAAQ,EAAEuB,WAAW,CAACvB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAA,EAAYe,YAAY,EAAG;AAC3Bd,MAAAA,OAAO,EAAEA,OAAQ;AAAA0B,MAAAA,QAAA,EAEhB/B;KACK;AACT,GAAA,CACD;AAEN;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n AriaLabelProperty,\n CommonProps,\n Priority,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n | PriorityPrimary\n | PrioritySecondary\n | PriorityTertiary\n | 'secondary-send';\n\nexport type ActionOptionProps = {\n complex?: boolean;\n content?: React.ReactNode;\n disabled?: boolean;\n media?: React.ReactNode;\n showMediaAtAllSizes?: boolean;\n onClick: () => void;\n title: React.ReactNode;\n additionalContent?: React.ReactNode;\n action: React.ReactNode;\n priority?: ActionOptionPriority;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n as?: React.ElementType;\n} & CommonProps &\n AriaLabelProperty;\n\nconst ActionOption = ({\n action,\n priority = Priority.PRIMARY,\n disabled,\n onClick,\n media,\n title,\n content,\n additionalContent,\n complex,\n className,\n showMediaAtAllSizes,\n showMediaCircle,\n isContainerAligned,\n as,\n 'aria-label': ariaLabel,\n}: ActionOptionProps) => {\n const sharedProps = {\n media,\n title,\n content,\n complex,\n disabled,\n showMediaAtAllSizes,\n showMediaCircle,\n className: clsx('tw-action-option', className),\n isContainerAligned,\n additionalContent,\n as,\n };\n\n const getAriaLabel = (): string | undefined => {\n if (ariaLabel) {\n return ariaLabel;\n }\n\n const generatedLabels: string[] = [];\n\n if (typeof title === 'string') {\n generatedLabels.push(title);\n }\n\n if (typeof action === 'string') {\n generatedLabels.push(action);\n }\n\n return generatedLabels.join(', ') || undefined;\n };\n\n const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {\n switch (priority) {\n case 'primary':\n return 'primary';\n case 'secondary':\n return 'secondary-neutral';\n case 'tertiary':\n return 'tertiary';\n case 'secondary-send':\n return 'secondary';\n default:\n return 'primary';\n }\n };\n\n return (\n <Option\n {...sharedProps}\n button={\n <Button\n v2\n size=\"sm\"\n priority={mapPriority(priority)}\n disabled={disabled}\n aria-label={getAriaLabel()}\n onClick={onClick}\n >\n {action}\n </Button>\n }\n />\n );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","additionalContent","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","ariaLabel","sharedProps","clsx","getAriaLabel","generatedLabels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAMA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,iBAAiB;EACjBC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;EAClBC,EAAE;AACF,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBX,KAAK;IACLC,KAAK;IACLC,OAAO;IACPE,OAAO;IACPN,QAAQ;IACRQ,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEO,IAAI,CAAC,kBAAkB,EAAEP,SAAS,CAAC;IAC9CG,kBAAkB;IAClBL,iBAAiB;AACjBM,IAAAA;GACD;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS;AAClB,IAAA;IAEA,MAAMI,eAAe,GAAa,EAAE;AAEpC,IAAA,IAAI,OAAOb,KAAK,KAAK,QAAQ,EAAE;AAC7Ba,MAAAA,eAAe,CAACC,IAAI,CAACd,KAAK,CAAC;AAC7B,IAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BoB,MAAAA,eAAe,CAACC,IAAI,CAACrB,MAAM,CAAC;AAC9B,IAAA;AAEA,IAAA,OAAOoB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS;EAChD,CAAC;EAED,MAAMC,WAAW,GAAIvB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW;AACpB,MAAA;AACE,QAAA,OAAO,SAAS;AACpB;EACF,CAAC;EAED,oBACEwB,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,GAAA,CAACG,MAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT7B,MAAAA,QAAQ,EAAEuB,WAAW,CAACvB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAA,EAAYe,YAAY,EAAG;AAC3Bd,MAAAA,OAAO,EAAEA,OAAQ;AAAA0B,MAAAA,QAAA,EAEhB/B;KACK;AACT,GAAA,CACD;AAEN;;;;"}
1
+ {"version":3,"file":"ActionOption.mjs","sources":["../../src/actionOption/ActionOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Button from '../button';\nimport {\n AriaLabelProperty,\n CommonProps,\n Priority,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n} from '../common';\nimport Option from '../common/Option';\nimport { ButtonPriority } from '../button/Button.types';\n\ntype ActionOptionPriority =\n | PriorityPrimary\n | PrioritySecondary\n | PriorityTertiary\n | 'secondary-send';\n\nexport type ActionOptionProps = {\n complex?: boolean;\n content?: React.ReactNode;\n disabled?: boolean;\n media?: React.ReactNode;\n showMediaAtAllSizes?: boolean;\n onClick: () => void;\n title: React.ReactNode;\n additionalContent?: React.ReactNode;\n action: React.ReactNode;\n priority?: ActionOptionPriority;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n as?: React.ElementType;\n} & CommonProps &\n AriaLabelProperty;\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst ActionOption = ({\n action,\n priority = Priority.PRIMARY,\n disabled,\n onClick,\n media,\n title,\n content,\n additionalContent,\n complex,\n className,\n showMediaAtAllSizes,\n showMediaCircle,\n isContainerAligned,\n as,\n 'aria-label': ariaLabel,\n}: ActionOptionProps) => {\n const sharedProps = {\n media,\n title,\n content,\n complex,\n disabled,\n showMediaAtAllSizes,\n showMediaCircle,\n className: clsx('tw-action-option', className),\n isContainerAligned,\n additionalContent,\n as,\n };\n\n const getAriaLabel = (): string | undefined => {\n if (ariaLabel) {\n return ariaLabel;\n }\n\n const generatedLabels: string[] = [];\n\n if (typeof title === 'string') {\n generatedLabels.push(title);\n }\n\n if (typeof action === 'string') {\n generatedLabels.push(action);\n }\n\n return generatedLabels.join(', ') || undefined;\n };\n\n const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {\n switch (priority) {\n case 'primary':\n return 'primary';\n case 'secondary':\n return 'secondary-neutral';\n case 'tertiary':\n return 'tertiary';\n case 'secondary-send':\n return 'secondary';\n default:\n return 'primary';\n }\n };\n\n return (\n <Option\n {...sharedProps}\n button={\n <Button\n v2\n size=\"sm\"\n priority={mapPriority(priority)}\n disabled={disabled}\n aria-label={getAriaLabel()}\n onClick={onClick}\n >\n {action}\n </Button>\n }\n />\n );\n};\n\nexport default ActionOption;\n"],"names":["ActionOption","action","priority","Priority","PRIMARY","disabled","onClick","media","title","content","additionalContent","complex","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","as","ariaLabel","sharedProps","clsx","getAriaLabel","generatedLabels","push","join","undefined","mapPriority","_jsx","Option","button","Button","v2","size","children"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAMA,YAAY,GAAGA,CAAC;EACpBC,MAAM;EACNC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,iBAAiB;EACjBC,OAAO;EACPC,SAAS;EACTC,mBAAmB;EACnBC,eAAe;EACfC,kBAAkB;EAClBC,EAAE;AACF,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBX,KAAK;IACLC,KAAK;IACLC,OAAO;IACPE,OAAO;IACPN,QAAQ;IACRQ,mBAAmB;IACnBC,eAAe;AACfF,IAAAA,SAAS,EAAEO,IAAI,CAAC,kBAAkB,EAAEP,SAAS,CAAC;IAC9CG,kBAAkB;IAClBL,iBAAiB;AACjBM,IAAAA;GACD;EAED,MAAMI,YAAY,GAAGA,MAAyB;AAC5C,IAAA,IAAIH,SAAS,EAAE;AACb,MAAA,OAAOA,SAAS;AAClB,IAAA;IAEA,MAAMI,eAAe,GAAa,EAAE;AAEpC,IAAA,IAAI,OAAOb,KAAK,KAAK,QAAQ,EAAE;AAC7Ba,MAAAA,eAAe,CAACC,IAAI,CAACd,KAAK,CAAC;AAC7B,IAAA;AAEA,IAAA,IAAI,OAAOP,MAAM,KAAK,QAAQ,EAAE;AAC9BoB,MAAAA,eAAe,CAACC,IAAI,CAACrB,MAAM,CAAC;AAC9B,IAAA;AAEA,IAAA,OAAOoB,eAAe,CAACE,IAAI,CAAC,IAAI,CAAC,IAAIC,SAAS;EAChD,CAAC;EAED,MAAMC,WAAW,GAAIvB,QAA8B,IAAoB;AACrE,IAAA,QAAQA,QAAQ;AACd,MAAA,KAAK,SAAS;AACZ,QAAA,OAAO,SAAS;AAClB,MAAA,KAAK,WAAW;AACd,QAAA,OAAO,mBAAmB;AAC5B,MAAA,KAAK,UAAU;AACb,QAAA,OAAO,UAAU;AACnB,MAAA,KAAK,gBAAgB;AACnB,QAAA,OAAO,WAAW;AACpB,MAAA;AACE,QAAA,OAAO,SAAS;AACpB;EACF,CAAC;EAED,oBACEwB,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDT,WAAW;IACfU,MAAM,eACJF,GAAA,CAACG,MAAM,EAAA;MACLC,EAAE,EAAA,IAAA;AACFC,MAAAA,IAAI,EAAC,IAAI;AACT7B,MAAAA,QAAQ,EAAEuB,WAAW,CAACvB,QAAQ,CAAE;AAChCG,MAAAA,QAAQ,EAAEA,QAAS;MACnB,YAAA,EAAYe,YAAY,EAAG;AAC3Bd,MAAAA,OAAO,EAAEA,OAAQ;AAAA0B,MAAAA,QAAA,EAEhB/B;KACK;AACT,GAAA,CACD;AAEN;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxOption.js","sources":["../../src/checkboxOption/CheckboxOption.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport CheckboxButton from '../checkboxButton';\nimport Option from '../common/Option';\nimport { ReferenceType, BaseOptionProps } from '../common/Option/Option';\n\nexport type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {\n /**\n * The checked state of the checkbox.\n */\n checked?: boolean;\n /**\n * Function to call when the checkbox option is clicked\n */\n onChange?: (value: boolean) => void;\n};\n\nconst CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(\n ({ checked, disabled, onChange, ...rest }, reference) => {\n return (\n <Option\n {...rest}\n ref={reference}\n disabled={disabled}\n button={\n <CheckboxButton\n checked={checked}\n disabled={disabled}\n onChange={() => onChange?.(!checked)}\n />\n }\n />\n );\n },\n);\n\nexport default CheckboxOption;\n"],"names":["CheckboxOption","forwardRef","checked","disabled","onChange","rest","reference","_jsx","Option","ref","button","CheckboxButton"],"mappings":";;;;;;;;;AAiBA,MAAMA,cAAc,gBAAGC,gBAAU,CAC/B,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;CAAM,EAAEC,SAAS,KAAI;EACtD,oBACEC,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDH,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfH,IAAAA,QAAQ,EAAEA,QAAS;IACnBO,MAAM,eACJH,cAAA,CAACI,sBAAc,EAAA;AACbT,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,QAAQ,EAAEA,MAAMA,QAAQ,GAAG,CAACF,OAAO;KAAE;AAExC,GAAA,CACD;AAEN,CAAC;;;;"}
1
+ {"version":3,"file":"CheckboxOption.js","sources":["../../src/checkboxOption/CheckboxOption.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport CheckboxButton from '../checkboxButton';\nimport Option from '../common/Option';\nimport { ReferenceType, BaseOptionProps } from '../common/Option/Option';\n\nexport type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {\n /**\n * The checked state of the checkbox.\n */\n checked?: boolean;\n /**\n * Function to call when the checkbox option is clicked\n */\n onChange?: (value: boolean) => void;\n};\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(\n ({ checked, disabled, onChange, ...rest }, reference) => {\n return (\n <Option\n {...rest}\n ref={reference}\n disabled={disabled}\n button={\n <CheckboxButton\n checked={checked}\n disabled={disabled}\n onChange={() => onChange?.(!checked)}\n />\n }\n />\n );\n },\n);\n\nexport default CheckboxOption;\n"],"names":["CheckboxOption","forwardRef","checked","disabled","onChange","rest","reference","_jsx","Option","ref","button","CheckboxButton"],"mappings":";;;;;;;;;AAyBA,MAAMA,cAAc,gBAAGC,gBAAU,CAC/B,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;CAAM,EAAEC,SAAS,KAAI;EACtD,oBACEC,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDH,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfH,IAAAA,QAAQ,EAAEA,QAAS;IACnBO,MAAM,eACJH,cAAA,CAACI,sBAAc,EAAA;AACbT,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,QAAQ,EAAEA,MAAMA,QAAQ,GAAG,CAACF,OAAO;KAAE;AAExC,GAAA,CACD;AAEN,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxOption.mjs","sources":["../../src/checkboxOption/CheckboxOption.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport CheckboxButton from '../checkboxButton';\nimport Option from '../common/Option';\nimport { ReferenceType, BaseOptionProps } from '../common/Option/Option';\n\nexport type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {\n /**\n * The checked state of the checkbox.\n */\n checked?: boolean;\n /**\n * Function to call when the checkbox option is clicked\n */\n onChange?: (value: boolean) => void;\n};\n\nconst CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(\n ({ checked, disabled, onChange, ...rest }, reference) => {\n return (\n <Option\n {...rest}\n ref={reference}\n disabled={disabled}\n button={\n <CheckboxButton\n checked={checked}\n disabled={disabled}\n onChange={() => onChange?.(!checked)}\n />\n }\n />\n );\n },\n);\n\nexport default CheckboxOption;\n"],"names":["CheckboxOption","forwardRef","checked","disabled","onChange","rest","reference","_jsx","Option","ref","button","CheckboxButton"],"mappings":";;;;;AAiBA,MAAMA,cAAc,gBAAGC,UAAU,CAC/B,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;CAAM,EAAEC,SAAS,KAAI;EACtD,oBACEC,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDH,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfH,IAAAA,QAAQ,EAAEA,QAAS;IACnBO,MAAM,eACJH,GAAA,CAACI,cAAc,EAAA;AACbT,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,QAAQ,EAAEA,MAAMA,QAAQ,GAAG,CAACF,OAAO;KAAE;AAExC,GAAA,CACD;AAEN,CAAC;;;;"}
1
+ {"version":3,"file":"CheckboxOption.mjs","sources":["../../src/checkboxOption/CheckboxOption.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport CheckboxButton from '../checkboxButton';\nimport Option from '../common/Option';\nimport { ReferenceType, BaseOptionProps } from '../common/Option/Option';\n\nexport type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {\n /**\n * The checked state of the checkbox.\n */\n checked?: boolean;\n /**\n * Function to call when the checkbox option is clicked\n */\n onChange?: (value: boolean) => void;\n};\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(\n ({ checked, disabled, onChange, ...rest }, reference) => {\n return (\n <Option\n {...rest}\n ref={reference}\n disabled={disabled}\n button={\n <CheckboxButton\n checked={checked}\n disabled={disabled}\n onChange={() => onChange?.(!checked)}\n />\n }\n />\n );\n },\n);\n\nexport default CheckboxOption;\n"],"names":["CheckboxOption","forwardRef","checked","disabled","onChange","rest","reference","_jsx","Option","ref","button","CheckboxButton"],"mappings":";;;;;AAyBA,MAAMA,cAAc,gBAAGC,UAAU,CAC/B,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;CAAM,EAAEC,SAAS,KAAI;EACtD,oBACEC,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDH,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfH,IAAAA,QAAQ,EAAEA,QAAS;IACnBO,MAAM,eACJH,GAAA,CAACI,cAAc,EAAA;AACbT,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,QAAQ,EAAEA,MAAMA,QAAQ,GAAG,CAACF,OAAO;KAAE;AAExC,GAAA,CACD;AAEN,CAAC;;;;"}
@@ -42,6 +42,7 @@ const HeaderAction = /*#__PURE__*/React__default.default.forwardRef(({
42
42
  "aria-label": action['aria-label'],
43
43
  href: 'href' in action ? action.href : undefined,
44
44
  target: 'target' in action ? action.target : undefined,
45
+ disabled: action.disabled,
45
46
  onClick: action.onClick,
46
47
  children: action.text
47
48
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n onClick?: (event: React.MouseEvent) => void;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /**\n * Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of a `Button`.\n */\n action?: ButtonActionProps | LinkActionProps;\n\n /**\n * Option prop to specify DOM render element of the title\n *\n * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n * **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n * If this condition is not met, a warning will be logged to the console.\n *\n * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n */\n as?: Heading | 'legend' | 'header';\n\n /** Required prop to set the title of the Header. */\n title: ReactNode;\n\n /** Optional prop to specify the level of the Header */\n level?: 'section' | 'group';\n\n className?: string;\n testId?: string;\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef<\n HTMLButtonElement | HTMLAnchorElement,\n { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n return (\n <Link\n className=\"np-header__action-button\"\n aria-label={action['aria-label']}\n href={'href' in action ? action.href : undefined}\n target={'target' in action ? action.target : undefined}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, level = 'group', ...props },\n ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n ) => {\n const internalRef = useRef<HTMLLegendElement>(null);\n const levelTypography =\n level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n const headerClasses = clsx('np-header', className, {\n 'np-header--group': level === 'group',\n });\n\n const commonProps = {\n className: headerClasses,\n 'data-testid': testId,\n };\n\n useEffect(() => {\n if (as === 'legend' && internalRef.current) {\n const { parentElement } = internalRef.current;\n if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n }\n }, [as]);\n\n if (!action) {\n return (\n <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={levelTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAMA,YAAY,gBAAGC,sBAAK,CAACC,UAAU,CAGnC,CAAC;AAAEC,EAAAA;AAAM,CAAE,EAAEC,GAAG,KAAI;EACpB,oBACEC,cAAA,CAACC,YAAI,EAAA;AACHC,IAAAA,SAAS,EAAC,0BAA0B;IACpC,YAAA,EAAYJ,MAAM,CAAC,YAAY,CAAE;IACjCK,IAAI,EAAE,MAAM,IAAIL,MAAM,GAAGA,MAAM,CAACK,IAAI,GAAGC,SAAU;IACjDC,MAAM,EAAE,QAAQ,IAAIP,MAAM,GAAGA,MAAM,CAACO,MAAM,GAAGD,SAAU;IACvDE,OAAO,EAAER,MAAM,CAACQ,OAAQ;IAAAC,QAAA,EAEvBT,MAAM,CAACU;AAAI,GACR,CAAC;AAEX,CAAC,CAAC;AAEFb,YAAY,CAACc,WAAW,GAAG,cAAc;AAEzC;;;;;;;;;;AAUG;AACH,MAAMC,MAAM,gBAAmCd,sBAAK,CAACC,UAAU,CAC7D,CACE;AAAEc,EAAAA,EAAE,GAAG,IAAI;EAAEb,MAAM;EAAEI,SAAS;EAAEU,MAAM;EAAEC,KAAK;AAAEC,EAAAA,KAAK,GAAG,OAAO;EAAE,GAAGC;AAAK,CAAE,EAC1EhB,GAAuE,KACrE;AACF,EAAA,MAAMiB,WAAW,GAAGC,YAAM,CAAoB,IAAI,CAAC;AACnD,EAAA,MAAMC,eAAe,GACnBJ,KAAK,KAAK,OAAO,GAAGK,qBAAU,CAACC,WAAW,GAAGD,qBAAU,CAACE,gBAAgB;AAC1E,EAAA,MAAMC,aAAa,GAAGC,SAAI,CAAC,WAAW,EAAErB,SAAS,EAAE;IACjD,kBAAkB,EAAEY,KAAK,KAAK;AAC/B,GAAA,CAAC;AAEF,EAAA,MAAMU,WAAW,GAAG;AAClBtB,IAAAA,SAAS,EAAEoB,aAAa;AACxB,IAAA,aAAa,EAAEV;GAChB;AAEDa,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAId,EAAE,KAAK,QAAQ,IAAIK,WAAW,CAACU,OAAO,EAAE;MAC1C,MAAM;AAAEC,QAAAA;OAAe,GAAGX,WAAW,CAACU,OAAO;AAC7C,MAAA,IAAI,CAACC,aAAa,IAAIA,aAAa,CAACC,OAAO,CAACC,WAAW,EAAE,KAAK,UAAU,EAAE;AACxEC,QAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG;AACH,MAAA;AACF,IAAA;AACF,EAAA,CAAC,EAAE,CAACpB,EAAE,CAAC,CAAC;EAER,IAAI,CAACb,MAAM,EAAE;IACX,oBACEE,cAAA,CAACgC,aAAK,EAAA;AAACjC,MAAAA,GAAG,EAAEiB,WAAY;AAACL,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAAA,MAAA,GAAKM,WAAW;AAAA,MAAA,GAAMT,KAAK;AAAAR,MAAAA,QAAA,EAC/EM;AAAK,KACD,CAAC;AAEZ,EAAA;AAEA,EAAA,oBACEqB,eAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASV,WAAW;AAAA,IAAA,GAAMT,KAAK;AAAEhB,IAAAA,GAAG,EAAEA,GAAiC;IAAAQ,QAAA,EAAA,cACrEP,cAAA,CAACgC,aAAK,EAAA;AAACrB,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAAChB,MAAAA,SAAS,EAAC,kBAAkB;AAAAK,MAAAA,QAAA,EAC/DM;AAAK,KACD,CACP,eAAAb,cAAA,CAACL,YAAY,EAAA;AAACG,MAAAA,MAAM,EAAEA;AAAO,KAAA,CAC/B;AAAA,GAAK,CAAC;AAEV,CAAC;AAGHY,MAAM,CAACD,WAAW,GAAG,QAAQ;;;;"}
1
+ {"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n onClick?: (event: React.MouseEvent) => void;\n disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /**\n * Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of a `Button`.\n */\n action?: ButtonActionProps | LinkActionProps;\n\n /**\n * Option prop to specify DOM render element of the title\n *\n * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n * **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n * If this condition is not met, a warning will be logged to the console.\n *\n * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n */\n as?: Heading | 'legend' | 'header';\n\n /** Required prop to set the title of the Header. */\n title: ReactNode;\n\n /** Optional prop to specify the level of the Header */\n level?: 'section' | 'group';\n\n className?: string;\n testId?: string;\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef<\n HTMLButtonElement | HTMLAnchorElement,\n { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n return (\n <Link\n className=\"np-header__action-button\"\n aria-label={action['aria-label']}\n href={'href' in action ? action.href : undefined}\n target={'target' in action ? action.target : undefined}\n disabled={action.disabled}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, level = 'group', ...props },\n ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n ) => {\n const internalRef = useRef<HTMLLegendElement>(null);\n const levelTypography =\n level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n const headerClasses = clsx('np-header', className, {\n 'np-header--group': level === 'group',\n });\n\n const commonProps = {\n className: headerClasses,\n 'data-testid': testId,\n };\n\n useEffect(() => {\n if (as === 'legend' && internalRef.current) {\n const { parentElement } = internalRef.current;\n if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n }\n }, [as]);\n\n if (!action) {\n return (\n <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={levelTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}
@@ -34,6 +34,7 @@ const HeaderAction = /*#__PURE__*/React__default.forwardRef(({
34
34
  "aria-label": action['aria-label'],
35
35
  href: 'href' in action ? action.href : undefined,
36
36
  target: 'target' in action ? action.target : undefined,
37
+ disabled: action.disabled,
37
38
  onClick: action.onClick,
38
39
  children: action.text
39
40
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n onClick?: (event: React.MouseEvent) => void;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /**\n * Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of a `Button`.\n */\n action?: ButtonActionProps | LinkActionProps;\n\n /**\n * Option prop to specify DOM render element of the title\n *\n * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n * **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n * If this condition is not met, a warning will be logged to the console.\n *\n * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n */\n as?: Heading | 'legend' | 'header';\n\n /** Required prop to set the title of the Header. */\n title: ReactNode;\n\n /** Optional prop to specify the level of the Header */\n level?: 'section' | 'group';\n\n className?: string;\n testId?: string;\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef<\n HTMLButtonElement | HTMLAnchorElement,\n { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n return (\n <Link\n className=\"np-header__action-button\"\n aria-label={action['aria-label']}\n href={'href' in action ? action.href : undefined}\n target={'target' in action ? action.target : undefined}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, level = 'group', ...props },\n ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n ) => {\n const internalRef = useRef<HTMLLegendElement>(null);\n const levelTypography =\n level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n const headerClasses = clsx('np-header', className, {\n 'np-header--group': level === 'group',\n });\n\n const commonProps = {\n className: headerClasses,\n 'data-testid': testId,\n };\n\n useEffect(() => {\n if (as === 'legend' && internalRef.current) {\n const { parentElement } = internalRef.current;\n if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n }\n }, [as]);\n\n if (!action) {\n return (\n <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={levelTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAMA,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAGnC,CAAC;AAAEC,EAAAA;AAAM,CAAE,EAAEC,GAAG,KAAI;EACpB,oBACEC,GAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,SAAS,EAAC,0BAA0B;IACpC,YAAA,EAAYJ,MAAM,CAAC,YAAY,CAAE;IACjCK,IAAI,EAAE,MAAM,IAAIL,MAAM,GAAGA,MAAM,CAACK,IAAI,GAAGC,SAAU;IACjDC,MAAM,EAAE,QAAQ,IAAIP,MAAM,GAAGA,MAAM,CAACO,MAAM,GAAGD,SAAU;IACvDE,OAAO,EAAER,MAAM,CAACQ,OAAQ;IAAAC,QAAA,EAEvBT,MAAM,CAACU;AAAI,GACR,CAAC;AAEX,CAAC,CAAC;AAEFb,YAAY,CAACc,WAAW,GAAG,cAAc;AAEzC;;;;;;;;;;AAUG;AACH,MAAMC,MAAM,gBAAmCd,cAAK,CAACC,UAAU,CAC7D,CACE;AAAEc,EAAAA,EAAE,GAAG,IAAI;EAAEb,MAAM;EAAEI,SAAS;EAAEU,MAAM;EAAEC,KAAK;AAAEC,EAAAA,KAAK,GAAG,OAAO;EAAE,GAAGC;AAAK,CAAE,EAC1EhB,GAAuE,KACrE;AACF,EAAA,MAAMiB,WAAW,GAAGC,MAAM,CAAoB,IAAI,CAAC;AACnD,EAAA,MAAMC,eAAe,GACnBJ,KAAK,KAAK,OAAO,GAAGK,UAAU,CAACC,WAAW,GAAGD,UAAU,CAACE,gBAAgB;AAC1E,EAAA,MAAMC,aAAa,GAAGC,IAAI,CAAC,WAAW,EAAErB,SAAS,EAAE;IACjD,kBAAkB,EAAEY,KAAK,KAAK;AAC/B,GAAA,CAAC;AAEF,EAAA,MAAMU,WAAW,GAAG;AAClBtB,IAAAA,SAAS,EAAEoB,aAAa;AACxB,IAAA,aAAa,EAAEV;GAChB;AAEDa,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAId,EAAE,KAAK,QAAQ,IAAIK,WAAW,CAACU,OAAO,EAAE;MAC1C,MAAM;AAAEC,QAAAA;OAAe,GAAGX,WAAW,CAACU,OAAO;AAC7C,MAAA,IAAI,CAACC,aAAa,IAAIA,aAAa,CAACC,OAAO,CAACC,WAAW,EAAE,KAAK,UAAU,EAAE;AACxEC,QAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG;AACH,MAAA;AACF,IAAA;AACF,EAAA,CAAC,EAAE,CAACpB,EAAE,CAAC,CAAC;EAER,IAAI,CAACb,MAAM,EAAE;IACX,oBACEE,GAAA,CAACgC,KAAK,EAAA;AAACjC,MAAAA,GAAG,EAAEiB,WAAY;AAACL,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAAA,MAAA,GAAKM,WAAW;AAAA,MAAA,GAAMT,KAAK;AAAAR,MAAAA,QAAA,EAC/EM;AAAK,KACD,CAAC;AAEZ,EAAA;AAEA,EAAA,oBACEqB,IAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASV,WAAW;AAAA,IAAA,GAAMT,KAAK;AAAEhB,IAAAA,GAAG,EAAEA,GAAiC;IAAAQ,QAAA,EAAA,cACrEP,GAAA,CAACgC,KAAK,EAAA;AAACrB,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAAChB,MAAAA,SAAS,EAAC,kBAAkB;AAAAK,MAAAA,QAAA,EAC/DM;AAAK,KACD,CACP,eAAAb,GAAA,CAACL,YAAY,EAAA;AAACG,MAAAA,MAAM,EAAEA;AAAO,KAAA,CAC/B;AAAA,GAAK,CAAC;AAEV,CAAC;AAGHY,MAAM,CAACD,WAAW,GAAG,QAAQ;;;;"}
1
+ {"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n text: string;\n onClick?: (event: React.MouseEvent) => void;\n disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /**\n * Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of a `Button`.\n */\n action?: ButtonActionProps | LinkActionProps;\n\n /**\n * Option prop to specify DOM render element of the title\n *\n * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n * **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n * If this condition is not met, a warning will be logged to the console.\n *\n * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n */\n as?: Heading | 'legend' | 'header';\n\n /** Required prop to set the title of the Header. */\n title: ReactNode;\n\n /** Optional prop to specify the level of the Header */\n level?: 'section' | 'group';\n\n className?: string;\n testId?: string;\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef<\n HTMLButtonElement | HTMLAnchorElement,\n { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n return (\n <Link\n className=\"np-header__action-button\"\n aria-label={action['aria-label']}\n href={'href' in action ? action.href : undefined}\n target={'target' in action ? action.target : undefined}\n disabled={action.disabled}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, level = 'group', ...props },\n ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n ) => {\n const internalRef = useRef<HTMLLegendElement>(null);\n const levelTypography =\n level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n const headerClasses = clsx('np-header', className, {\n 'np-header--group': level === 'group',\n });\n\n const commonProps = {\n className: headerClasses,\n 'data-testid': testId,\n };\n\n useEffect(() => {\n if (as === 'legend' && internalRef.current) {\n const { parentElement } = internalRef.current;\n if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n }\n }, [as]);\n\n if (!action) {\n return (\n <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={levelTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction action={action} />\n </div>\n );\n },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"LegacyListItem.js","sources":["../../src/legacylistItem/LegacyListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type LegacyListItemProps = {\n title: ReactNode;\n value: ReactNode;\n media?: ReactNode;\n action?: ReactNode;\n className?: string;\n isContainerAligned?: boolean;\n as?: ElementType;\n};\n\nconst LegacyListItem: FC<LegacyListItemProps> = ({\n media,\n action,\n className,\n title,\n value,\n isContainerAligned,\n as = 'li',\n ...rest\n}) => {\n const Element = as;\n\n return (\n <Element\n className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n 'p-x-2': !isContainerAligned,\n })}\n {...rest}\n >\n {media}\n\n <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n {title}\n </Body>\n {value && (\n <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n {value}\n </Body>\n )}\n </div>\n\n {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n </Element>\n );\n};\n\nexport default LegacyListItem;\n"],"names":["LegacyListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;;;;;AAeA,MAAMA,cAAc,GAA4BA,CAAC;EAC/CC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC;AAAI,CACR,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE;EAElB,oBACEG,eAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,SAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP;AAAK,OACF,CACP;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,cAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV;KAAY,CAAC,GAAG,IAAI;AAAA,GACvE,CAAC;AAEd;;;;"}
1
+ {"version":3,"file":"LegacyListItem.js","sources":["../../src/legacylistItem/LegacyListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type LegacyListItemProps = {\n title: ReactNode;\n value: ReactNode;\n media?: ReactNode;\n action?: ReactNode;\n className?: string;\n isContainerAligned?: boolean;\n as?: ElementType;\n};\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst LegacyListItem: FC<LegacyListItemProps> = ({\n media,\n action,\n className,\n title,\n value,\n isContainerAligned,\n as = 'li',\n ...rest\n}) => {\n const Element = as;\n\n return (\n <Element\n className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n 'p-x-2': !isContainerAligned,\n })}\n {...rest}\n >\n {media}\n\n <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n {title}\n </Body>\n {value && (\n <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n {value}\n </Body>\n )}\n </div>\n\n {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n </Element>\n );\n};\n\nexport default LegacyListItem;\n"],"names":["LegacyListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;;;;;AAuBA,MAAMA,cAAc,GAA4BA,CAAC;EAC/CC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC;AAAI,CACR,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE;EAElB,oBACEG,eAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,SAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP;AAAK,OACF,CACP;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,cAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV;KAAY,CAAC,GAAG,IAAI;AAAA,GACvE,CAAC;AAEd;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"LegacyListItem.mjs","sources":["../../src/legacylistItem/LegacyListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type LegacyListItemProps = {\n title: ReactNode;\n value: ReactNode;\n media?: ReactNode;\n action?: ReactNode;\n className?: string;\n isContainerAligned?: boolean;\n as?: ElementType;\n};\n\nconst LegacyListItem: FC<LegacyListItemProps> = ({\n media,\n action,\n className,\n title,\n value,\n isContainerAligned,\n as = 'li',\n ...rest\n}) => {\n const Element = as;\n\n return (\n <Element\n className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n 'p-x-2': !isContainerAligned,\n })}\n {...rest}\n >\n {media}\n\n <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n {title}\n </Body>\n {value && (\n <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n {value}\n </Body>\n )}\n </div>\n\n {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n </Element>\n );\n};\n\nexport default LegacyListItem;\n"],"names":["LegacyListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;AAeA,MAAMA,cAAc,GAA4BA,CAAC;EAC/CC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC;AAAI,CACR,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE;EAElB,oBACEG,IAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,IAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP;AAAK,OACF,CACP;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,GAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV;KAAY,CAAC,GAAG,IAAI;AAAA,GACvE,CAAC;AAEd;;;;"}
1
+ {"version":3,"file":"LegacyListItem.mjs","sources":["../../src/legacylistItem/LegacyListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type LegacyListItemProps = {\n title: ReactNode;\n value: ReactNode;\n media?: ReactNode;\n action?: ReactNode;\n className?: string;\n isContainerAligned?: boolean;\n as?: ElementType;\n};\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst LegacyListItem: FC<LegacyListItemProps> = ({\n media,\n action,\n className,\n title,\n value,\n isContainerAligned,\n as = 'li',\n ...rest\n}) => {\n const Element = as;\n\n return (\n <Element\n className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n 'p-x-2': !isContainerAligned,\n })}\n {...rest}\n >\n {media}\n\n <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n {title}\n </Body>\n {value && (\n <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n {value}\n </Body>\n )}\n </div>\n\n {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n </Element>\n );\n};\n\nexport default LegacyListItem;\n"],"names":["LegacyListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;AAuBA,MAAMA,cAAc,GAA4BA,CAAC;EAC/CC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC;AAAI,CACR,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE;EAElB,oBACEG,IAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,IAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP;AAAK,OACF,CACP;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,GAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV;KAAY,CAAC,GAAG,IAAI;AAAA,GACvE,CAAC;AAEd;;;;"}
@@ -39,6 +39,7 @@ const Link = ({
39
39
  type = typography.Typography.LINK_DEFAULT,
40
40
  'aria-label': ariaLabel,
41
41
  onClick,
42
+ disabled,
42
43
  ...props
43
44
  }) => {
44
45
  const {
@@ -47,12 +48,14 @@ const Link = ({
47
48
  const isButton = Boolean(onClick) && href === undefined;
48
49
  const isBlank = target === '_blank';
49
50
  const classNames = clsx.clsx('np-link', 'd-inline-flex', {
50
- [`np-text-${type}`]: type
51
+ [`np-text-${type}`]: type,
52
+ 'np-link--disabled': disabled
51
53
  }, className);
52
54
  return isButton ? /*#__PURE__*/jsxRuntime.jsx(PrimitiveButton.default, {
53
55
  type: "button",
54
56
  "aria-label": ariaLabel,
55
- className: clsx.clsx(classNames, 'btn-unstyled', className),
57
+ className: clsx.clsx(classNames, 'btn-unstyled'),
58
+ disabled: disabled,
56
59
  onClick: onClick,
57
60
  children: children
58
61
  }) : /*#__PURE__*/jsxRuntime.jsxs(PrimitiveAnchor.default, {
@@ -61,6 +64,7 @@ const Link = ({
61
64
  className: classNames,
62
65
  "aria-label": ariaLabel,
63
66
  rel: isBlank ? 'noreferrer' : undefined,
67
+ disabled: disabled,
64
68
  onClick: onClick,
65
69
  ...props,
66
70
  children: [children, " ", isBlank && /*#__PURE__*/jsxRuntime.jsx(icons.NavigateAway, {
@@ -1 +1 @@
1
- {"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport type { PrimitiveAnchorProps, PrimitiveButtonProps } from '../primitives';\n\nimport { LinkLarge, LinkDefault, Typography } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = PrimitiveAnchorProps &\n Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type = Typography.LINK_DEFAULT,\n 'aria-label': ariaLabel,\n onClick,\n ...props\n}: Props) => {\n const { formatMessage } = useIntl();\n const isButton = Boolean(onClick) && href === undefined;\n const isBlank = target === '_blank';\n\n const classNames = clsx(\n 'np-link',\n 'd-inline-flex',\n {\n [`np-text-${type}`]: type,\n },\n className,\n );\n\n return isButton ? (\n <PrimitiveButton\n type=\"button\"\n aria-label={ariaLabel}\n className={clsx(classNames, 'btn-unstyled', className)}\n onClick={onClick}\n >\n {children}\n </PrimitiveButton>\n ) : (\n <PrimitiveAnchor\n href={href}\n target={target}\n className={classNames}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </PrimitiveAnchor>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","Typography","LINK_DEFAULT","ariaLabel","onClick","props","formatMessage","useIntl","isButton","Boolean","undefined","isBlank","classNames","clsx","_jsx","PrimitiveButton","_jsxs","PrimitiveAnchor","rel","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI,GAAGC,qBAAU,CAACC,YAAY;AAC9B,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC;AAAK,CACF,KAAI;EACV,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;EACnC,MAAMC,QAAQ,GAAGC,OAAO,CAACL,OAAO,CAAC,IAAIN,IAAI,KAAKY,SAAS;AACvD,EAAA,MAAMC,OAAO,GAAGZ,MAAM,KAAK,QAAQ;AAEnC,EAAA,MAAMa,UAAU,GAAGC,SAAI,CACrB,SAAS,EACT,eAAe,EACf;IACE,CAAC,CAAA,QAAA,EAAWb,IAAI,CAAA,CAAE,GAAGA;GACtB,EACDJ,SAAS,CACV;AAED,EAAA,OAAOY,QAAQ,gBACbM,cAAA,CAACC,uBAAe,EAAA;AACdf,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYG,SAAU;IACtBP,SAAS,EAAEiB,SAAI,CAACD,UAAU,EAAE,cAAc,EAAEhB,SAAS,CAAE;AACvDQ,IAAAA,OAAO,EAAEA,OAAQ;AAAAP,IAAAA,QAAA,EAEhBA;AAAQ,GACM,CAAC,gBAElBmB,eAAA,CAACC,uBAAe,EAAA;AACdnB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEgB,UAAW;AACtB,IAAA,YAAA,EAAYT,SAAU;AACtBe,IAAAA,GAAG,EAAEP,OAAO,GAAG,YAAY,GAAGD,SAAU;AACxCN,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAR,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACc,OAAO,iBAAIG,cAAA,CAACK,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEd,aAAa,CAACe,qBAAQ,CAACC,aAAa;AAAE,MAAG;AAAA,GAC1E,CAClB;AACH;;;;"}
1
+ {"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport type { PrimitiveAnchorProps, PrimitiveButtonProps } from '../primitives';\n\nimport { LinkLarge, LinkDefault, Typography } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = PrimitiveAnchorProps &\n Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type = Typography.LINK_DEFAULT,\n 'aria-label': ariaLabel,\n onClick,\n disabled,\n ...props\n}: Props) => {\n const { formatMessage } = useIntl();\n const isButton = Boolean(onClick) && href === undefined;\n const isBlank = target === '_blank';\n\n const classNames = clsx(\n 'np-link',\n 'd-inline-flex',\n {\n [`np-text-${type}`]: type,\n 'np-link--disabled': disabled,\n },\n className,\n );\n\n return isButton ? (\n <PrimitiveButton\n type=\"button\"\n aria-label={ariaLabel}\n className={clsx(classNames, 'btn-unstyled')}\n disabled={disabled}\n onClick={onClick}\n >\n {children}\n </PrimitiveButton>\n ) : (\n <PrimitiveAnchor\n href={href}\n target={target}\n className={classNames}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n disabled={disabled}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </PrimitiveAnchor>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","Typography","LINK_DEFAULT","ariaLabel","onClick","disabled","props","formatMessage","useIntl","isButton","Boolean","undefined","isBlank","classNames","clsx","_jsx","PrimitiveButton","_jsxs","PrimitiveAnchor","rel","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI,GAAGC,qBAAU,CAACC,YAAY;AAC9B,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACPC,QAAQ;EACR,GAAGC;AAAK,CACF,KAAI;EACV,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;EACnC,MAAMC,QAAQ,GAAGC,OAAO,CAACN,OAAO,CAAC,IAAIN,IAAI,KAAKa,SAAS;AACvD,EAAA,MAAMC,OAAO,GAAGb,MAAM,KAAK,QAAQ;AAEnC,EAAA,MAAMc,UAAU,GAAGC,SAAI,CACrB,SAAS,EACT,eAAe,EACf;AACE,IAAA,CAAC,CAAA,QAAA,EAAWd,IAAI,CAAA,CAAE,GAAGA,IAAI;AACzB,IAAA,mBAAmB,EAAEK;GACtB,EACDT,SAAS,CACV;AAED,EAAA,OAAOa,QAAQ,gBACbM,cAAA,CAACC,uBAAe,EAAA;AACdhB,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYG,SAAU;AACtBP,IAAAA,SAAS,EAAEkB,SAAI,CAACD,UAAU,EAAE,cAAc,CAAE;AAC5CR,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAAP,IAAAA,QAAA,EAEhBA;AAAQ,GACM,CAAC,gBAElBoB,eAAA,CAACC,uBAAe,EAAA;AACdpB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEiB,UAAW;AACtB,IAAA,YAAA,EAAYV,SAAU;AACtBgB,IAAAA,GAAG,EAAEP,OAAO,GAAG,YAAY,GAAGD,SAAU;AACxCN,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbE,KAAK;IAAAT,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACe,OAAO,iBAAIG,cAAA,CAACK,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEd,aAAa,CAACe,qBAAQ,CAACC,aAAa;AAAE,MAAG;AAAA,GAC1E,CAClB;AACH;;;;"}
@@ -35,6 +35,7 @@ const Link = ({
35
35
  type = Typography.LINK_DEFAULT,
36
36
  'aria-label': ariaLabel,
37
37
  onClick,
38
+ disabled,
38
39
  ...props
39
40
  }) => {
40
41
  const {
@@ -43,12 +44,14 @@ const Link = ({
43
44
  const isButton = Boolean(onClick) && href === undefined;
44
45
  const isBlank = target === '_blank';
45
46
  const classNames = clsx('np-link', 'd-inline-flex', {
46
- [`np-text-${type}`]: type
47
+ [`np-text-${type}`]: type,
48
+ 'np-link--disabled': disabled
47
49
  }, className);
48
50
  return isButton ? /*#__PURE__*/jsx(PrimitiveButton, {
49
51
  type: "button",
50
52
  "aria-label": ariaLabel,
51
- className: clsx(classNames, 'btn-unstyled', className),
53
+ className: clsx(classNames, 'btn-unstyled'),
54
+ disabled: disabled,
52
55
  onClick: onClick,
53
56
  children: children
54
57
  }) : /*#__PURE__*/jsxs(PrimitiveAnchor, {
@@ -57,6 +60,7 @@ const Link = ({
57
60
  className: classNames,
58
61
  "aria-label": ariaLabel,
59
62
  rel: isBlank ? 'noreferrer' : undefined,
63
+ disabled: disabled,
60
64
  onClick: onClick,
61
65
  ...props,
62
66
  children: [children, " ", isBlank && /*#__PURE__*/jsx(NavigateAway, {
@@ -1 +1 @@
1
- {"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport type { PrimitiveAnchorProps, PrimitiveButtonProps } from '../primitives';\n\nimport { LinkLarge, LinkDefault, Typography } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = PrimitiveAnchorProps &\n Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type = Typography.LINK_DEFAULT,\n 'aria-label': ariaLabel,\n onClick,\n ...props\n}: Props) => {\n const { formatMessage } = useIntl();\n const isButton = Boolean(onClick) && href === undefined;\n const isBlank = target === '_blank';\n\n const classNames = clsx(\n 'np-link',\n 'd-inline-flex',\n {\n [`np-text-${type}`]: type,\n },\n className,\n );\n\n return isButton ? (\n <PrimitiveButton\n type=\"button\"\n aria-label={ariaLabel}\n className={clsx(classNames, 'btn-unstyled', className)}\n onClick={onClick}\n >\n {children}\n </PrimitiveButton>\n ) : (\n <PrimitiveAnchor\n href={href}\n target={target}\n className={classNames}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </PrimitiveAnchor>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","Typography","LINK_DEFAULT","ariaLabel","onClick","props","formatMessage","useIntl","isButton","Boolean","undefined","isBlank","classNames","clsx","_jsx","PrimitiveButton","_jsxs","PrimitiveAnchor","rel","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI,GAAGC,UAAU,CAACC,YAAY;AAC9B,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC;AAAK,CACF,KAAI;EACV,MAAM;AAAEC,IAAAA;GAAe,GAAGC,OAAO,EAAE;EACnC,MAAMC,QAAQ,GAAGC,OAAO,CAACL,OAAO,CAAC,IAAIN,IAAI,KAAKY,SAAS;AACvD,EAAA,MAAMC,OAAO,GAAGZ,MAAM,KAAK,QAAQ;AAEnC,EAAA,MAAMa,UAAU,GAAGC,IAAI,CACrB,SAAS,EACT,eAAe,EACf;IACE,CAAC,CAAA,QAAA,EAAWb,IAAI,CAAA,CAAE,GAAGA;GACtB,EACDJ,SAAS,CACV;AAED,EAAA,OAAOY,QAAQ,gBACbM,GAAA,CAACC,eAAe,EAAA;AACdf,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYG,SAAU;IACtBP,SAAS,EAAEiB,IAAI,CAACD,UAAU,EAAE,cAAc,EAAEhB,SAAS,CAAE;AACvDQ,IAAAA,OAAO,EAAEA,OAAQ;AAAAP,IAAAA,QAAA,EAEhBA;AAAQ,GACM,CAAC,gBAElBmB,IAAA,CAACC,eAAe,EAAA;AACdnB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEgB,UAAW;AACtB,IAAA,YAAA,EAAYT,SAAU;AACtBe,IAAAA,GAAG,EAAEP,OAAO,GAAG,YAAY,GAAGD,SAAU;AACxCN,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAR,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACc,OAAO,iBAAIG,GAAA,CAACK,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEd,aAAa,CAACe,QAAQ,CAACC,aAAa;AAAE,MAAG;AAAA,GAC1E,CAClB;AACH;;;;"}
1
+ {"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport type { PrimitiveAnchorProps, PrimitiveButtonProps } from '../primitives';\n\nimport { LinkLarge, LinkDefault, Typography } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = PrimitiveAnchorProps &\n Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type = Typography.LINK_DEFAULT,\n 'aria-label': ariaLabel,\n onClick,\n disabled,\n ...props\n}: Props) => {\n const { formatMessage } = useIntl();\n const isButton = Boolean(onClick) && href === undefined;\n const isBlank = target === '_blank';\n\n const classNames = clsx(\n 'np-link',\n 'd-inline-flex',\n {\n [`np-text-${type}`]: type,\n 'np-link--disabled': disabled,\n },\n className,\n );\n\n return isButton ? (\n <PrimitiveButton\n type=\"button\"\n aria-label={ariaLabel}\n className={clsx(classNames, 'btn-unstyled')}\n disabled={disabled}\n onClick={onClick}\n >\n {children}\n </PrimitiveButton>\n ) : (\n <PrimitiveAnchor\n href={href}\n target={target}\n className={classNames}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n disabled={disabled}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </PrimitiveAnchor>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","Typography","LINK_DEFAULT","ariaLabel","onClick","disabled","props","formatMessage","useIntl","isButton","Boolean","undefined","isBlank","classNames","clsx","_jsx","PrimitiveButton","_jsxs","PrimitiveAnchor","rel","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI,GAAGC,UAAU,CAACC,YAAY;AAC9B,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACPC,QAAQ;EACR,GAAGC;AAAK,CACF,KAAI;EACV,MAAM;AAAEC,IAAAA;GAAe,GAAGC,OAAO,EAAE;EACnC,MAAMC,QAAQ,GAAGC,OAAO,CAACN,OAAO,CAAC,IAAIN,IAAI,KAAKa,SAAS;AACvD,EAAA,MAAMC,OAAO,GAAGb,MAAM,KAAK,QAAQ;AAEnC,EAAA,MAAMc,UAAU,GAAGC,IAAI,CACrB,SAAS,EACT,eAAe,EACf;AACE,IAAA,CAAC,CAAA,QAAA,EAAWd,IAAI,CAAA,CAAE,GAAGA,IAAI;AACzB,IAAA,mBAAmB,EAAEK;GACtB,EACDT,SAAS,CACV;AAED,EAAA,OAAOa,QAAQ,gBACbM,GAAA,CAACC,eAAe,EAAA;AACdhB,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYG,SAAU;AACtBP,IAAAA,SAAS,EAAEkB,IAAI,CAACD,UAAU,EAAE,cAAc,CAAE;AAC5CR,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAAP,IAAAA,QAAA,EAEhBA;AAAQ,GACM,CAAC,gBAElBoB,IAAA,CAACC,eAAe,EAAA;AACdpB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEiB,UAAW;AACtB,IAAA,YAAA,EAAYV,SAAU;AACtBgB,IAAAA,GAAG,EAAEP,OAAO,GAAG,YAAY,GAAGD,SAAU;AACxCN,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbE,KAAK;IAAAT,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACe,OAAO,iBAAIG,GAAA,CAACK,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEd,aAAa,CAACe,QAAQ,CAACC,aAAa;AAAE,MAAG;AAAA,GAC1E,CAClB;AACH;;;;"}
@@ -16,7 +16,7 @@ require('../common/propsValues/monthFormat.js');
16
16
  require('../common/propsValues/position.js');
17
17
  require('../common/propsValues/layouts.js');
18
18
  require('../common/propsValues/status.js');
19
- require('../common/propsValues/sentiment.js');
19
+ var sentiment = require('../common/propsValues/sentiment.js');
20
20
  require('../common/propsValues/profileType.js');
21
21
  require('../common/propsValues/variant.js');
22
22
  require('../common/propsValues/scroll.js');
@@ -56,6 +56,7 @@ const ListItem = ({
56
56
  valueSubtitle,
57
57
  control = null,
58
58
  disabled,
59
+ disabledPromptMessage,
59
60
  className,
60
61
  valueColumnWidth,
61
62
  id
@@ -76,7 +77,7 @@ const ListItem = ({
76
77
  valueSubtitle: `${idPrefix}_value-subtitle`
77
78
  } : {}),
78
79
  control: `${idPrefix}_control`,
79
- ...(prompt ? {
80
+ ...(prompt || disabled && disabledPromptMessage ? {
80
81
  prompt: `${idPrefix}_prompt`
81
82
  } : {}),
82
83
  ...(additionalInfo ? {
@@ -98,9 +99,11 @@ const ListItem = ({
98
99
  ids,
99
100
  props: {
100
101
  disabled,
101
- inverted
102
+ inverted,
103
+ disabledPromptMessage
102
104
  },
103
105
  mediaSize,
106
+ isPartiallyInteractive,
104
107
  describedByIds
105
108
  }), [describedByIds, mediaSize]);
106
109
  const gridColumnsStyle = {
@@ -112,7 +115,7 @@ const ListItem = ({
112
115
  const hasMedia = Boolean(media);
113
116
  const hasControl = Boolean(control);
114
117
  const hasInfo = Boolean(additionalInfo);
115
- const hasPrompt = Boolean(prompt);
118
+ const hasPrompt = Boolean(prompt) || disabled && Boolean(disabledPromptMessage);
116
119
  /* eslint-disable functional/immutable-data */
117
120
  if (hasMedia && hasControl) {
118
121
  partials.push('wds-list-item-hasMedia-hasControl');
@@ -148,11 +151,15 @@ const ListItem = ({
148
151
  'wds-list-item-interactive': isFullyInteractive,
149
152
  'wds-list-item-partially-interactive': isPartiallyInteractive,
150
153
  [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
151
- disabled
154
+ disabled: disabled && !isPartiallyInteractive,
155
+ 'disabled--has-prompt-reason': !disabledPromptMessage && disabled && !isPartiallyInteractive
152
156
  }, className),
153
157
  id: id,
154
158
  "aria-disabled": disabled,
155
- children: [spotlight === 'inactive' && /*#__PURE__*/jsxRuntime.jsx("svg", {
159
+ style: {
160
+ '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined
161
+ },
162
+ children: [isFullyInteractive && spotlight === 'inactive' && /*#__PURE__*/jsxRuntime.jsx("svg", {
156
163
  "aria-hidden": "true",
157
164
  className: "wds-list-item-spotlight__border",
158
165
  children: /*#__PURE__*/jsxRuntime.jsx("rect", {})
@@ -161,6 +168,7 @@ const ListItem = ({
161
168
  subtitle,
162
169
  additionalInfo,
163
170
  disabled,
171
+ disabledPromptMessage,
164
172
  prompt,
165
173
  controlType,
166
174
  controlProps,
@@ -172,9 +180,7 @@ const ListItem = ({
172
180
  className: "wds-list-item-body",
173
181
  style: valueColumnWidth ? gridColumnsStyle : undefined,
174
182
  children: [/*#__PURE__*/jsxRuntime.jsx("span", {
175
- className: clsx.clsx({
176
- 'wds-list-item-body-center': title && !subtitle
177
- }),
183
+ className: "wds-list-item-titles",
178
184
  children: (() => {
179
185
  const titles = [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
180
186
  id: ids.title,
@@ -193,8 +199,7 @@ const ListItem = ({
193
199
  })()
194
200
  }), (valueTitle || valueSubtitle) && /*#__PURE__*/jsxRuntime.jsx("span", {
195
201
  className: clsx.clsx('wds-list-item-value', {
196
- 'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
197
- 'wds-list-item-body-center': valueTitle && !valueSubtitle || !valueTitle && valueSubtitle
202
+ 'flex-column': valueTitle !== undefined || valueSubtitle !== undefined
198
203
  }),
199
204
  children: (() => {
200
205
  const values = [];
@@ -218,7 +223,8 @@ const ListItem = ({
218
223
  })]
219
224
  }), control === null ? null : /*#__PURE__*/jsxRuntime.jsx(Body.default, {
220
225
  className: clsx.clsx('wds-list-item-control-wrapper', {
221
- 'wds-list-item-button-control': controlType === 'button'
226
+ 'wds-list-item-button-control': controlType === 'button',
227
+ 'wds-list-item-button-control--hasPrompt': controlType === 'button' && Boolean(prompt)
222
228
  }),
223
229
  style: {
224
230
  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto'
@@ -231,10 +237,10 @@ const ListItem = ({
231
237
  };
232
238
  function View({
233
239
  children,
234
- subtitle,
235
240
  additionalInfo,
236
241
  prompt,
237
242
  disabled,
243
+ disabledPromptMessage,
238
244
  isPartiallyInteractive,
239
245
  controlType = 'non-interactive',
240
246
  controlProps,
@@ -246,9 +252,15 @@ function View({
246
252
  } = React.useContext(ListItemContext.ListItemContext);
247
253
  const isLinkControl = ['navigation'].includes(controlType);
248
254
  const isHrefProvided = isLinkControl && !!controlProps?.href;
249
- const renderExtras = () => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
250
- children: [additionalInfo, prompt]
251
- });
255
+ const renderExtras = () => {
256
+ const resolvedPrompt = disabled && disabledPromptMessage && !prompt ? /*#__PURE__*/jsxRuntime.jsx(ListItemPrompt.Prompt, {
257
+ sentiment: sentiment.Sentiment.NEUTRAL,
258
+ children: disabledPromptMessage
259
+ }) : prompt;
260
+ return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
261
+ children: [additionalInfo, resolvedPrompt]
262
+ });
263
+ };
252
264
  if (isLinkControl && isHrefProvided) {
253
265
  return (
254
266
  /*#__PURE__*/
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.js","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import {\n useContext,\n useId,\n useMemo,\n useState,\n type PropsWithChildren,\n type ReactNode,\n} from 'react';\nimport { Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../primitives';\nimport {\n ListItemContext,\n type ListItemContextData,\n type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n | 'non-interactive'\n | 'navigation'\n | 'radio'\n | 'checkbox'\n | 'switch'\n | 'button'\n | 'icon-button';\n\nexport type ListItemControlProps =\n | ListItemNavigationProps\n | ListItemCheckboxProps\n | ListItemButtonProps\n | ListItemIconButtonProps\n | ListItemRadioProps\n | ListItemSwitchProps;\n\nexport type ListItemProps = {\n as?: 'li' | 'div';\n /**\n * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n */\n inverted?: boolean;\n disabled?: boolean;\n /**\n * Highlights the list item as an action to be taken or already taken. <br />\n */\n spotlight?: 'active' | 'inactive';\n title: ReactNode;\n subtitle?: ReactNode;\n /**\n * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n * Can be only rendered if `subtitle` is also provided.\n */\n additionalInfo?: ReactNode;\n valueTitle?: ReactNode;\n valueSubtitle?: ReactNode;\n /**\n * Requires one of the following as a sole child: <br />\n * `<ListItem.AvatarView />`,\n * `<ListItem.AvatarLayout />` or\n * `<ListItem.Image />`\n */\n media?: ReactNode;\n /**\n * Requires one of the following as a sole child: <br/>\n * `<ListItem.Button />`, <br/>\n * `<ListItem.Checkbox />`, <br/>\n * `<ListItem.IconButton />`, <br/>\n * `<ListItem.Navigation />`, <br/>\n * `<ListItem.Radio />`, or\n * `<ListItem.Switch />`\n */\n control?: ReactNode;\n /**\n * Requires `<ListItem.Prompt />` component as a sole child.\n */\n prompt?: ReactNode;\n className?: string;\n /**\n * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n * Controls the width ratio of left side content (title and subtitle) to the right side content.\n */\n valueColumnWidth?: number;\n id?: string;\n};\n\n/**\n * @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n as: ListItemElement = 'li',\n title,\n subtitle,\n additionalInfo,\n prompt,\n inverted,\n media,\n spotlight,\n valueTitle,\n valueSubtitle,\n control = null,\n disabled,\n className,\n valueColumnWidth,\n id,\n}: ListItemProps) => {\n const idPrefix = useId();\n const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n const ids: ListItemContextData['ids'] = {\n title: `${idPrefix}_title`,\n ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n control: `${idPrefix}_control`,\n ...(prompt ? { prompt: `${idPrefix}_prompt` } : {}),\n ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n };\n\n const isPartiallyInteractive = Boolean(\n (controlType === 'button' || controlType === 'icon-button') &&\n (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n );\n const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n const isButtonAsLink =\n (controlType === 'button' || controlType === 'icon-button') &&\n Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n\n const titlesAndValues = [\n inverted ? ids.subtitle : ids.title,\n inverted ? ids.title : ids.subtitle,\n inverted ? ids.valueSubtitle : ids.valueTitle,\n inverted ? ids.valueTitle : ids.valueSubtitle,\n ].join(' ');\n const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n const describedByIds = useMemo(() => {\n return isFullyInteractive && !isButtonAsLink\n ? additionalInfoPrompt\n : `${titlesAndValues} ${additionalInfoPrompt}`;\n }, [isFullyInteractive]);\n\n const listItemContext = useMemo(\n () => ({\n setControlType,\n setControlProps,\n setMediaSize,\n ids,\n props: { disabled, inverted },\n mediaSize,\n describedByIds,\n }),\n [describedByIds, mediaSize],\n );\n const gridColumnsStyle = {\n '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n } as React.CSSProperties;\n\n const getFeatureClassName = () => {\n const partials = [];\n const hasMedia = Boolean(media);\n const hasControl = Boolean(control);\n const hasInfo = Boolean(additionalInfo);\n const hasPrompt = Boolean(prompt);\n\n /* eslint-disable functional/immutable-data */\n if (hasMedia && hasControl) {\n partials.push('wds-list-item-hasMedia-hasControl');\n }\n\n if (hasMedia && !hasControl) {\n partials.push('wds-list-item-hasMedia-noControl');\n }\n\n if (!hasMedia && hasControl) {\n partials.push('wds-list-item-noMedia-hasControl');\n }\n\n if (!hasMedia && !hasControl) {\n partials.push('wds-list-item-noMedia-noControl');\n }\n\n if (hasInfo && hasPrompt) {\n partials.push('wds-list-item-hasInfo-hasPrompt');\n }\n if (hasInfo && !hasPrompt) {\n partials.push('wds-list-item-hasInfo-noPrompt');\n }\n if (!hasInfo && hasPrompt) {\n partials.push('wds-list-item-noInfo-hasPrompt');\n }\n if (!hasInfo && !hasPrompt) {\n partials.push('wds-list-item-noInfo-noPrompt');\n }\n /* eslint-enable functional/immutable-data */\n\n return partials.join(' ');\n };\n\n return (\n <ListItemContext.Provider value={listItemContext}>\n <ListItemElement\n className={clsx(\n 'wds-list-item',\n `wds-list-item-${controlType}`,\n getFeatureClassName(),\n {\n 'wds-list-item-interactive': isFullyInteractive,\n 'wds-list-item-partially-interactive': isPartiallyInteractive,\n [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n isFullyInteractive && !!spotlight,\n disabled,\n },\n className,\n )}\n id={id}\n aria-disabled={disabled}\n >\n {spotlight === 'inactive' && (\n <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n <rect />\n </svg>\n )}\n\n <View\n {...{\n isPartiallyInteractive,\n subtitle,\n additionalInfo,\n disabled,\n prompt,\n controlType,\n controlProps,\n }}\n className={getFeatureClassName()}\n >\n {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n {/* Title + Subtitle + Values - Group */}\n <div\n className=\"wds-list-item-body\"\n style={valueColumnWidth ? gridColumnsStyle : undefined}\n >\n {/* Title + Subtitle + Values - Group */}\n <span\n className={clsx({\n 'wds-list-item-body-center': title && !subtitle,\n })}\n >\n {(() => {\n const titles = [\n <Body\n key={ids.title}\n id={ids.title}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title\"\n >\n {title}\n </Body>,\n ];\n if (subtitle) {\n titles.push(\n <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n {subtitle}\n </Body>,\n );\n }\n return inverted ? [...titles].reverse() : titles;\n })()}\n </span>\n\n {(valueTitle || valueSubtitle) && (\n <span\n className={clsx('wds-list-item-value', {\n 'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n 'wds-list-item-body-center':\n (valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),\n })}\n >\n {(() => {\n const values = [];\n if (valueTitle) {\n values.push(\n <Body\n key={ids.valueTitle}\n id={ids.valueTitle}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title-value\"\n >\n {valueTitle}\n </Body>,\n );\n }\n if (valueSubtitle) {\n values.push(\n <Body\n key={ids.valueSubtitle}\n id={ids.valueSubtitle}\n className=\"wds-list-item-subtitle-value\"\n >\n {valueSubtitle}\n </Body>,\n );\n }\n return inverted ? [...values].reverse() : values;\n })()}\n </span>\n )}\n </div>\n\n {control === null ? null : (\n <Body\n className={clsx('wds-list-item-control-wrapper', {\n 'wds-list-item-button-control': controlType === 'button',\n })}\n style={\n {\n '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n } as React.CSSProperties\n }\n >\n {control}\n </Body>\n )}\n </View>\n </ListItemElement>\n </ListItemContext.Provider>\n );\n};\n\ntype ViewProps = PropsWithChildren<{\n isPartiallyInteractive: boolean;\n controlType?: ListItemTypes;\n controlProps?: ListItemControlProps;\n}> &\n Pick<ListItemProps, 'subtitle' | 'additionalInfo' | 'disabled' | 'prompt' | 'className'>;\n\nfunction View({\n children,\n subtitle,\n additionalInfo,\n prompt,\n disabled,\n isPartiallyInteractive,\n controlType = 'non-interactive',\n controlProps,\n className = '',\n}: ViewProps) {\n const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n const isLinkControl = ['navigation'].includes(controlType);\n\n const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n const renderExtras = () => (\n <>\n {additionalInfo}\n {prompt}\n </>\n );\n\n if (isLinkControl && isHrefProvided) {\n return (\n // for link instances of .Navigation, .IconButton, .Button\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <PrimitiveAnchor\n aria-describedby={describedByIds}\n href={(controlProps as ListItemNavigationProps)?.href}\n target={(controlProps as ListItemNavigationProps)?.target}\n className={clsx('wds-list-item-view d-flex flex-row', {\n 'wds-list-item-control': controlType === 'navigation',\n fullyInteractive: !isPartiallyInteractive,\n })}\n disabled={disabled}\n onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n >\n {children}\n </PrimitiveAnchor>\n\n {renderExtras()}\n </div>\n );\n }\n\n if (isPartiallyInteractive || controlType === 'non-interactive') {\n return (\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>\n\n {renderExtras()}\n </div>\n );\n }\n\n // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n return (\n <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n <label\n htmlFor={ids.control}\n className={clsx('wds-list-item-view', {\n clickable: !disabled,\n fullyInteractive: !isPartiallyInteractive,\n })}\n >\n {children}\n </label>\n\n {renderExtras()}\n </InputWrapper>\n );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","View","style","undefined","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch","Prompt"],"mappings":"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"}
1
+ {"version":3,"file":"ListItem.js","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["import {\n useContext,\n useId,\n useMemo,\n useState,\n type PropsWithChildren,\n type ReactNode,\n} from 'react';\nimport { Sentiment, Typography } from '../common';\nimport Body from '../body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../primitives';\nimport {\n ListItemContext,\n type ListItemContextData,\n type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n | 'non-interactive'\n | 'navigation'\n | 'radio'\n | 'checkbox'\n | 'switch'\n | 'button'\n | 'icon-button';\n\nexport type ListItemControlProps =\n | ListItemNavigationProps\n | ListItemCheckboxProps\n | ListItemButtonProps\n | ListItemIconButtonProps\n | ListItemRadioProps\n | ListItemSwitchProps;\n\nexport type ListItemProps = {\n as?: 'li' | 'div';\n /**\n * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n */\n inverted?: boolean;\n /**\n * Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.\n */\n disabled?: boolean;\n /**\n * If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />\n * **NB:** This message cannot house more than **1** link or inline button.<br />\n * **NB:** It must be used together with `disabled` prop and will be disregarded otherwise.\n */\n disabledPromptMessage?: ReactNode;\n /**\n * Highlights the list item as an action to be taken or already taken. <br />\n */\n spotlight?: 'active' | 'inactive';\n title: ReactNode;\n subtitle?: ReactNode;\n /**\n * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n * Can be only rendered if `subtitle` is also provided.\n */\n additionalInfo?: ReactNode;\n valueTitle?: ReactNode;\n valueSubtitle?: ReactNode;\n /**\n * Requires one of the following as a sole child: <br />\n * `<ListItem.AvatarView />`,\n * `<ListItem.AvatarLayout />` or\n * `<ListItem.Image />`\n */\n media?: ReactNode;\n /**\n * Requires one of the following as a sole child: <br/>\n * `<ListItem.Button />`, <br/>\n * `<ListItem.Checkbox />`, <br/>\n * `<ListItem.IconButton />`, <br/>\n * `<ListItem.Navigation />`, <br/>\n * `<ListItem.Radio />`, or\n * `<ListItem.Switch />`\n */\n control?: ReactNode;\n /**\n * Requires `<ListItem.Prompt />` component as a sole child.\n */\n prompt?: ReactNode;\n className?: string;\n /**\n * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n * Controls the width ratio of left side content (title and subtitle) to the right side content.\n */\n valueColumnWidth?: number;\n id?: string;\n};\n\n/**\n * @see [Design documentation](https://wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n as: ListItemElement = 'li',\n title,\n subtitle,\n additionalInfo,\n prompt,\n inverted,\n media,\n spotlight,\n valueTitle,\n valueSubtitle,\n control = null,\n disabled,\n disabledPromptMessage,\n className,\n valueColumnWidth,\n id,\n}: ListItemProps) => {\n const idPrefix = useId();\n const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n const ids: ListItemContextData['ids'] = {\n title: `${idPrefix}_title`,\n ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n control: `${idPrefix}_control`,\n ...(prompt || (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),\n ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n };\n\n const isPartiallyInteractive = Boolean(\n (controlType === 'button' || controlType === 'icon-button') &&\n (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n );\n const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n const isButtonAsLink =\n (controlType === 'button' || controlType === 'icon-button') &&\n Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n\n const titlesAndValues = [\n inverted ? ids.subtitle : ids.title,\n inverted ? ids.title : ids.subtitle,\n inverted ? ids.valueSubtitle : ids.valueTitle,\n inverted ? ids.valueTitle : ids.valueSubtitle,\n ].join(' ');\n const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n const describedByIds = useMemo(() => {\n return isFullyInteractive && !isButtonAsLink\n ? additionalInfoPrompt\n : `${titlesAndValues} ${additionalInfoPrompt}`;\n }, [isFullyInteractive]);\n\n const listItemContext = useMemo(\n () => ({\n setControlType,\n setControlProps,\n setMediaSize,\n ids,\n props: { disabled, inverted, disabledPromptMessage },\n mediaSize,\n isPartiallyInteractive,\n describedByIds,\n }),\n [describedByIds, mediaSize],\n );\n const gridColumnsStyle = {\n '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n } as React.CSSProperties;\n\n const getFeatureClassName = () => {\n const partials = [];\n const hasMedia = Boolean(media);\n const hasControl = Boolean(control);\n const hasInfo = Boolean(additionalInfo);\n const hasPrompt = Boolean(prompt) || (disabled && Boolean(disabledPromptMessage));\n\n /* eslint-disable functional/immutable-data */\n if (hasMedia && hasControl) {\n partials.push('wds-list-item-hasMedia-hasControl');\n }\n\n if (hasMedia && !hasControl) {\n partials.push('wds-list-item-hasMedia-noControl');\n }\n\n if (!hasMedia && hasControl) {\n partials.push('wds-list-item-noMedia-hasControl');\n }\n\n if (!hasMedia && !hasControl) {\n partials.push('wds-list-item-noMedia-noControl');\n }\n\n if (hasInfo && hasPrompt) {\n partials.push('wds-list-item-hasInfo-hasPrompt');\n }\n if (hasInfo && !hasPrompt) {\n partials.push('wds-list-item-hasInfo-noPrompt');\n }\n if (!hasInfo && hasPrompt) {\n partials.push('wds-list-item-noInfo-hasPrompt');\n }\n if (!hasInfo && !hasPrompt) {\n partials.push('wds-list-item-noInfo-noPrompt');\n }\n /* eslint-enable functional/immutable-data */\n\n return partials.join(' ');\n };\n\n return (\n <ListItemContext.Provider value={listItemContext}>\n <ListItemElement\n className={clsx(\n 'wds-list-item',\n `wds-list-item-${controlType}`,\n getFeatureClassName(),\n {\n 'wds-list-item-interactive': isFullyInteractive,\n 'wds-list-item-partially-interactive': isPartiallyInteractive,\n [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n isFullyInteractive && !!spotlight,\n disabled: disabled && !isPartiallyInteractive,\n 'disabled--has-prompt-reason': !disabledPromptMessage && disabled && !isPartiallyInteractive,\n },\n className,\n )}\n id={id}\n aria-disabled={disabled}\n style={\n {\n '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n } as React.CSSProperties\n }\n >\n {isFullyInteractive && spotlight === 'inactive' && (\n <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n <rect />\n </svg>\n )}\n\n <View\n {...{\n isPartiallyInteractive,\n subtitle,\n additionalInfo,\n disabled,\n disabledPromptMessage,\n prompt,\n controlType,\n controlProps,\n }}\n className={getFeatureClassName()}\n >\n {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n {/* Title + Subtitle + Values - Group */}\n <div\n className=\"wds-list-item-body\"\n style={valueColumnWidth ? gridColumnsStyle : undefined}\n >\n {/* Title + Subtitle + Values - Group */}\n <span className=\"wds-list-item-titles\">\n {(() => {\n const titles = [\n <Body\n key={ids.title}\n id={ids.title}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title\"\n >\n {title}\n </Body>,\n ];\n if (subtitle) {\n titles.push(\n <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n {subtitle}\n </Body>,\n );\n }\n return inverted ? [...titles].reverse() : titles;\n })()}\n </span>\n\n {(valueTitle || valueSubtitle) && (\n <span\n className={clsx('wds-list-item-value', {\n 'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n })}\n >\n {(() => {\n const values = [];\n if (valueTitle) {\n values.push(\n <Body\n key={ids.valueTitle}\n id={ids.valueTitle}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title-value\"\n >\n {valueTitle}\n </Body>,\n );\n }\n if (valueSubtitle) {\n values.push(\n <Body\n key={ids.valueSubtitle}\n id={ids.valueSubtitle}\n className=\"wds-list-item-subtitle-value\"\n >\n {valueSubtitle}\n </Body>,\n );\n }\n return inverted ? [...values].reverse() : values;\n })()}\n </span>\n )}\n </div>\n\n {control === null ? null : (\n <Body\n className={clsx('wds-list-item-control-wrapper', {\n 'wds-list-item-button-control': controlType === 'button',\n 'wds-list-item-button-control--hasPrompt':\n controlType === 'button' && Boolean(prompt),\n })}\n style={\n {\n '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n } as React.CSSProperties\n }\n >\n {control}\n </Body>\n )}\n </View>\n </ListItemElement>\n </ListItemContext.Provider>\n );\n};\n\ntype ViewProps = PropsWithChildren<{\n isPartiallyInteractive: boolean;\n controlType?: ListItemTypes;\n controlProps?: ListItemControlProps;\n}> &\n Pick<\n ListItemProps,\n 'subtitle' | 'additionalInfo' | 'prompt' | 'disabled' | 'disabledPromptMessage' | 'className'\n >;\n\nfunction View({\n children,\n additionalInfo,\n prompt,\n disabled,\n disabledPromptMessage,\n isPartiallyInteractive,\n controlType = 'non-interactive',\n controlProps,\n className = '',\n}: ViewProps) {\n const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n const isLinkControl = ['navigation'].includes(controlType);\n\n const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n const renderExtras = () => {\n const resolvedPrompt =\n disabled && disabledPromptMessage && !prompt ? (\n <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>\n ) : (\n prompt\n );\n\n return (\n <>\n {additionalInfo}\n {resolvedPrompt}\n </>\n );\n };\n\n if (isLinkControl && isHrefProvided) {\n return (\n // for link instances of .Navigation, .IconButton, .Button\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <PrimitiveAnchor\n aria-describedby={describedByIds}\n href={(controlProps as ListItemNavigationProps)?.href}\n target={(controlProps as ListItemNavigationProps)?.target}\n className={clsx('wds-list-item-view d-flex flex-row', {\n 'wds-list-item-control': controlType === 'navigation',\n fullyInteractive: !isPartiallyInteractive,\n })}\n disabled={disabled}\n onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n >\n {children}\n </PrimitiveAnchor>\n\n {renderExtras()}\n </div>\n );\n }\n\n if (isPartiallyInteractive || controlType === 'non-interactive') {\n return (\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>\n\n {renderExtras()}\n </div>\n );\n }\n\n // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n return (\n <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n <label\n htmlFor={ids.control}\n className={clsx('wds-list-item-view', {\n clickable: !disabled,\n fullyInteractive: !isPartiallyInteractive,\n })}\n >\n {children}\n </label>\n\n {renderExtras()}\n </InputWrapper>\n );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","disabledPromptMessage","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","resolvedPrompt","Prompt","sentiment","Sentiment","NEUTRAL","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch"],"mappings":"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"}