@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.
- package/build/actionOption/ActionOption.js.map +1 -1
- package/build/actionOption/ActionOption.mjs.map +1 -1
- package/build/checkboxOption/CheckboxOption.js.map +1 -1
- package/build/checkboxOption/CheckboxOption.mjs.map +1 -1
- package/build/header/Header.js +1 -0
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs +1 -0
- package/build/header/Header.mjs.map +1 -1
- package/build/legacylistItem/LegacyListItem.js.map +1 -1
- package/build/legacylistItem/LegacyListItem.mjs.map +1 -1
- package/build/link/Link.js +6 -2
- package/build/link/Link.js.map +1 -1
- package/build/link/Link.mjs +6 -2
- package/build/link/Link.mjs.map +1 -1
- package/build/listItem/ListItem.js +28 -16
- package/build/listItem/ListItem.js.map +1 -1
- package/build/listItem/ListItem.mjs +28 -16
- package/build/listItem/ListItem.mjs.map +1 -1
- package/build/listItem/ListItemContext.js.map +1 -1
- package/build/listItem/ListItemContext.mjs.map +1 -1
- package/build/listItem/Navigation/ListItemNavigation.js +1 -3
- package/build/listItem/Navigation/ListItemNavigation.js.map +1 -1
- package/build/listItem/Navigation/ListItemNavigation.mjs +2 -4
- package/build/listItem/Navigation/ListItemNavigation.mjs.map +1 -1
- package/build/listItem/Prompt/InlinePrompt/InlinePrompt.js +74 -0
- package/build/listItem/Prompt/InlinePrompt/InlinePrompt.js.map +1 -0
- package/build/listItem/Prompt/InlinePrompt/InlinePrompt.mjs +72 -0
- package/build/listItem/Prompt/InlinePrompt/InlinePrompt.mjs.map +1 -0
- package/build/listItem/Prompt/ListItemPrompt.js +10 -15
- package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.mjs +11 -16
- package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
- package/build/main.css +122 -81
- package/build/navigationOption/NavigationOption.js.map +1 -1
- package/build/navigationOption/NavigationOption.mjs.map +1 -1
- package/build/navigationOptionsList/NavigationOptionsList.js.map +1 -1
- package/build/navigationOptionsList/NavigationOptionsList.mjs.map +1 -1
- package/build/radioOption/RadioOption.js.map +1 -1
- package/build/radioOption/RadioOption.mjs.map +1 -1
- package/build/styles/link/Link.css +7 -0
- package/build/styles/listItem/ListItem.css +115 -81
- package/build/styles/listItem/ListItem.grid.css +11 -3
- package/build/styles/listItem/ListItem.vars.css +0 -0
- package/build/styles/listItem/Prompt/InlinePrompt/InlinePrompt.css +153 -0
- package/build/styles/listItem/Prompt/ListItemPrompt.css +72 -72
- package/build/styles/main.css +122 -81
- package/build/summary/Summary.js +8 -0
- package/build/summary/Summary.js.map +1 -1
- package/build/summary/Summary.mjs +8 -0
- package/build/summary/Summary.mjs.map +1 -1
- package/build/switchOption/SwitchOption.js +8 -0
- package/build/switchOption/SwitchOption.js.map +1 -1
- package/build/switchOption/SwitchOption.mjs +8 -0
- package/build/switchOption/SwitchOption.mjs.map +1 -1
- package/build/types/actionOption/ActionOption.d.ts +8 -0
- package/build/types/actionOption/ActionOption.d.ts.map +1 -1
- package/build/types/checkboxOption/CheckboxOption.d.ts +8 -0
- package/build/types/checkboxOption/CheckboxOption.d.ts.map +1 -1
- package/build/types/header/Header.d.ts +1 -0
- package/build/types/header/Header.d.ts.map +1 -1
- package/build/types/legacylistItem/LegacyListItem.d.ts +8 -0
- package/build/types/legacylistItem/LegacyListItem.d.ts.map +1 -1
- package/build/types/link/Link.d.ts +1 -1
- package/build/types/link/Link.d.ts.map +1 -1
- package/build/types/listItem/ListItem.d.ts +10 -1
- package/build/types/listItem/ListItem.d.ts.map +1 -1
- package/build/types/listItem/ListItemContext.d.ts +2 -1
- package/build/types/listItem/ListItemContext.d.ts.map +1 -1
- package/build/types/listItem/Navigation/ListItemNavigation.d.ts.map +1 -1
- package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts +15 -0
- package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -0
- package/build/types/listItem/Prompt/InlinePrompt/index.d.ts +3 -0
- package/build/types/listItem/Prompt/InlinePrompt/index.d.ts.map +1 -0
- package/build/types/listItem/Prompt/ListItemPrompt.d.ts +4 -6
- package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -1
- package/build/types/listItem/_stories/helpers.d.ts +1 -1
- package/build/types/listItem/_stories/helpers.d.ts.map +1 -1
- package/build/types/listItem/_stories/subcomponents.d.ts +4 -0
- package/build/types/listItem/_stories/subcomponents.d.ts.map +1 -1
- package/build/types/listItem/_stories/variants/helpers.d.ts.map +1 -1
- package/build/types/listItem/constants.d.ts +16 -0
- package/build/types/listItem/constants.d.ts.map +1 -0
- package/build/types/listItem/useListItemControl.d.ts +1 -1
- package/build/types/navigationOption/NavigationOption.d.ts +8 -0
- package/build/types/navigationOption/NavigationOption.d.ts.map +1 -1
- package/build/types/navigationOptionsList/NavigationOptionsList.d.ts +9 -0
- package/build/types/navigationOptionsList/NavigationOptionsList.d.ts.map +1 -1
- package/build/types/radioOption/RadioOption.d.ts +8 -0
- package/build/types/radioOption/RadioOption.d.ts.map +1 -1
- package/build/types/summary/Summary.d.ts +8 -0
- package/build/types/summary/Summary.d.ts.map +1 -1
- package/build/types/switchOption/SwitchOption.d.ts +8 -0
- package/build/types/switchOption/SwitchOption.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/actionOption/ActionOption.story.tsx +4 -0
- package/src/actionOption/ActionOption.tsx +8 -0
- package/src/checkboxOption/CheckboxOption.story.tsx +4 -0
- package/src/checkboxOption/CheckboxOption.tsx +8 -0
- package/src/header/Header.story.tsx +14 -0
- package/src/header/Header.tsx +2 -0
- package/src/legacylistItem/LegacyListItem.story.tsx +4 -0
- package/src/legacylistItem/LegacyListItem.tsx +8 -0
- package/src/link/Link.css +7 -0
- package/src/link/Link.less +8 -0
- package/src/link/Link.spec.tsx +28 -0
- package/src/link/Link.story.tsx +72 -16
- package/src/link/Link.tsx +5 -1
- package/src/listItem/ListItem.css +115 -81
- package/src/listItem/ListItem.grid.css +11 -3
- package/src/listItem/ListItem.grid.less +14 -4
- package/src/listItem/ListItem.less +35 -8
- package/src/listItem/ListItem.spec.tsx +37 -1
- package/src/listItem/ListItem.tsx +47 -21
- package/src/listItem/ListItem.vars.css +0 -0
- package/src/listItem/ListItem.vars.less +11 -0
- package/src/listItem/ListItemContext.tsx +2 -1
- package/src/listItem/Navigation/ListItemNavigation.spec.tsx +1 -10
- package/src/listItem/Navigation/ListItemNavigation.story.tsx +0 -22
- package/src/listItem/Navigation/ListItemNavigation.tsx +2 -3
- package/src/listItem/Prompt/InlinePrompt/InlinePrompt.css +153 -0
- package/src/listItem/Prompt/InlinePrompt/InlinePrompt.less +162 -0
- package/src/listItem/Prompt/InlinePrompt/InlinePrompt.spec.tsx +66 -0
- package/src/listItem/Prompt/InlinePrompt/InlinePrompt.tsx +56 -0
- package/src/listItem/Prompt/InlinePrompt/index.ts +2 -0
- package/src/listItem/Prompt/ListItemPrompt.css +72 -72
- package/src/listItem/Prompt/ListItemPrompt.less +2 -130
- package/src/listItem/Prompt/ListItemPrompt.spec.tsx +36 -0
- package/src/listItem/Prompt/ListItemPrompt.story.tsx +4 -2
- package/src/listItem/Prompt/ListItemPrompt.tsx +14 -14
- package/src/listItem/_stories/ListItem.disabled.story.tsx +433 -0
- package/src/listItem/_stories/ListItem.layout.test.story.tsx +10 -155
- package/src/listItem/_stories/ListItem.scenarios.story.tsx +4 -25
- package/src/listItem/_stories/ListItem.story.tsx +17 -187
- package/src/listItem/_stories/helpers.tsx +23 -6
- package/src/listItem/_stories/subcomponents.tsx +19 -2
- package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx +1 -1
- package/src/listItem/_stories/variants/ListItem.neutral.test.story.tsx +55 -0
- package/src/listItem/_stories/variants/ListItem.small.test.story.tsx +1 -1
- package/src/listItem/_stories/variants/helpers.tsx +28 -1
- package/src/listItem/constants.ts +15 -0
- package/src/main.css +122 -81
- package/src/navigationOption/NavigationOption.story.tsx +4 -1
- package/src/navigationOption/NavigationOption.tsx +8 -0
- package/src/navigationOptionsList/NavigationOptionsList.story.tsx +4 -0
- package/src/navigationOptionsList/NavigationOptionsList.tsx +9 -0
- package/src/radioOption/RadioOption.story.tsx +4 -0
- package/src/radioOption/RadioOption.tsx +8 -0
- package/src/summary/Summary.story.tsx +4 -0
- package/src/summary/Summary.tsx +8 -0
- package/src/switchOption/SwitchOption.story.tsx +4 -1
- package/src/switchOption/SwitchOption.tsx +8 -0
- 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
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":";;;;;;;;;
|
|
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":";;;;;
|
|
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;;;;"}
|
package/build/header/Header.js
CHANGED
|
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
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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"}
|
package/build/header/Header.mjs
CHANGED
|
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,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,QAAQ,EAAER,MAAM,CAACQ,QAAS;IAC1BC,OAAO,EAAET,MAAM,CAACS,OAAQ;IAAAC,QAAA,EAEvBV,MAAM,CAACW;AAAI,GACR,CAAC;AAEX,CAAC,CAAC;AAEFd,YAAY,CAACe,WAAW,GAAG,cAAc;AAEzC;;;;;;;;;;AAUG;AACH,MAAMC,MAAM,gBAAmCf,cAAK,CAACC,UAAU,CAC7D,CACE;AAAEe,EAAAA,EAAE,GAAG,IAAI;EAAEd,MAAM;EAAEI,SAAS;EAAEW,MAAM;EAAEC,KAAK;AAAEC,EAAAA,KAAK,GAAG,OAAO;EAAE,GAAGC;AAAK,CAAE,EAC1EjB,GAAuE,KACrE;AACF,EAAA,MAAMkB,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,EAAEtB,SAAS,EAAE;IACjD,kBAAkB,EAAEa,KAAK,KAAK;AAC/B,GAAA,CAAC;AAEF,EAAA,MAAMU,WAAW,GAAG;AAClBvB,IAAAA,SAAS,EAAEqB,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,CAACd,MAAM,EAAE;IACX,oBACEE,GAAA,CAACiC,KAAK,EAAA;AAAClC,MAAAA,GAAG,EAAEkB,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;AAAEjB,IAAAA,GAAG,EAAEA,GAAiC;IAAAS,QAAA,EAAA,cACrER,GAAA,CAACiC,KAAK,EAAA;AAACrB,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAACjB,MAAAA,SAAS,EAAC,kBAAkB;AAAAM,MAAAA,QAAA,EAC/DM;AAAK,KACD,CACP,eAAAd,GAAA,CAACL,YAAY,EAAA;AAACG,MAAAA,MAAM,EAAEA;AAAO,KAAA,CAC/B;AAAA,GAAK,CAAC;AAEV,CAAC;AAGHa,MAAM,CAACD,WAAW,GAAG,QAAQ;;;;"}
|
|
@@ -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":";;;;;;;;
|
|
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":";;;;
|
|
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;;;;"}
|
package/build/link/Link.js
CHANGED
|
@@ -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'
|
|
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, {
|
package/build/link/Link.js.map
CHANGED
|
@@ -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'
|
|
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;;;;"}
|
package/build/link/Link.mjs
CHANGED
|
@@ -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'
|
|
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, {
|
package/build/link/Link.mjs.map
CHANGED
|
@@ -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'
|
|
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
|
-
|
|
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:
|
|
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 = () =>
|
|
250
|
-
|
|
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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"}
|