@transferwise/components 0.0.0-experimental-984cfd9 → 0.0.0-experimental-fb038b1
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/listItem/AvatarView/ListItemAvatarView.js.map +1 -1
- package/build/listItem/AvatarView/ListItemAvatarView.mjs.map +1 -1
- package/build/listItem/Image/ListItemImage.js.map +1 -1
- package/build/listItem/Image/ListItemImage.mjs.map +1 -1
- package/build/listItem/ListItemContext.js.map +1 -1
- package/build/listItem/ListItemContext.mjs.map +1 -1
- package/build/main.css +2 -0
- package/build/styles/listItem/ListItem.css +2 -0
- package/build/styles/main.css +2 -0
- package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts +1 -2
- package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts.map +1 -1
- package/build/types/listItem/Image/ListItemImage.d.ts +1 -2
- package/build/types/listItem/Image/ListItemImage.d.ts.map +1 -1
- package/build/types/listItem/ListItemContext.d.ts +1 -1
- package/build/types/listItem/ListItemContext.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/listItem/AvatarView/ListItemAvatarView.tsx +1 -2
- package/src/listItem/Image/ListItemImage.tsx +1 -2
- package/src/listItem/ListItem.css +2 -0
- package/src/listItem/ListItem.less +1 -0
- package/src/listItem/ListItemContext.tsx +1 -1
- package/src/listItem/_stories/ListItem.layout.test.story.tsx +1 -1
- package/src/main.css +2 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarView.js","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { type AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\
|
|
1
|
+
{"version":3,"file":"ListItemAvatarView.js","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { type AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {\n size?: 32 | 40 | 48 | 56 | 72;\n};\n\n/**\n * This component renders a single avatar. It's a thin wrapper around the\n * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only\n * a subset of its sizes, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarViewComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-view', className)}\n />\n );\n};\nAvatarView.displayName = 'ListItem.AvatarView';\n"],"names":["AvatarView","className","size","props","useListItemMedia","_jsx","AvatarViewComp","clsx","displayName"],"mappings":";;;;;;;AAeO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA2B,KAAI;EACxFC,iCAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,cAAA,CAACC,oBAAc,EAAA;AAAA,IAAA,GACTH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,SAAI,CAAC,iCAAiC,EAAEN,SAAS;AAAE,GAAA,CAC9D;AAEN;AACAD,UAAU,CAACQ,WAAW,GAAG,qBAAqB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarView.mjs","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { type AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\
|
|
1
|
+
{"version":3,"file":"ListItemAvatarView.mjs","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { type AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {\n size?: 32 | 40 | 48 | 56 | 72;\n};\n\n/**\n * This component renders a single avatar. It's a thin wrapper around the\n * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only\n * a subset of its sizes, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {\n useListItemMedia(size);\n\n return (\n <AvatarViewComp\n {...props}\n size={size}\n className={clsx('wds-list-item-media-avatar-view', className)}\n />\n );\n};\nAvatarView.displayName = 'ListItem.AvatarView';\n"],"names":["AvatarView","className","size","props","useListItemMedia","_jsx","AvatarViewComp","clsx","displayName"],"mappings":";;;;;AAeO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA2B,KAAI;EACxFC,gBAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,GAAA,CAACC,YAAc,EAAA;AAAA,IAAA,GACTH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,IAAI,CAAC,iCAAiC,EAAEN,SAAS;AAAE,GAAA,CAC9D;AAEN;AACAD,UAAU,CAACQ,WAAW,GAAG,qBAAqB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemImage.js","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\
|
|
1
|
+
{"version":3,"file":"ListItemImage.js","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n /**\n * The size of square container for the image, matching available avatar sizes.\n */\n size?: 32 | 40 | 48 | 56 | 72;\n /**\n * When unset, it will force `role=\"presentation\"` on the image. Otherwise, the image will use its implicit img role.\n */\n alt?: string;\n};\n\n/**\n * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`\n * or `<ListItem.AvatarLayout />` are insufficient.\n * It's a wrapper around the\n * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only\n * a subset of its props, in line with the ListItem's constraints.\n *\n * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).\n */\nexport const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {\n useListItemMedia(size);\n\n return (\n <div\n className={clsx('wds-list-item-media-image-wrapper')}\n style={\n {\n '--wds-list-item-media-size': `${size}px`,\n } as React.CSSProperties\n }\n >\n <ImageComp\n {...props}\n className={clsx(className, 'wds-list-item-media-image')}\n alt={alt}\n role={alt ? undefined : 'presentation'}\n />\n </div>\n );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","undefined","displayName"],"mappings":";;;;;;;AAwBO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAsB,KAAI;EACxFC,iCAAgB,CAACH,IAAI,CAAC;AAEtB,EAAA,oBACEI,cAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,SAAI,CAAC,mCAAmC,CAAE;AACrDC,IAAAA,KAAK,EACH;MACE,4BAA4B,EAAE,GAAGN,IAAI,CAAA,EAAA;KAExC;IAAAO,QAAA,eAEDH,cAAA,CAACI,eAAS,EAAA;AAAA,MAAA,GACJN,KAAK;AACTD,MAAAA,SAAS,EAAEI,SAAI,CAACJ,SAAS,EAAE,2BAA2B,CAAE;AACxDF,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAEV,GAAG,GAAGW,SAAS,GAAG;KAAe;AAE3C,GAAK,CAAC;AAEV;AACAZ,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemImage.mjs","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\
|
|
1
|
+
{"version":3,"file":"ListItemImage.mjs","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n /**\n * The size of square container for the image, matching available avatar sizes.\n */\n size?: 32 | 40 | 48 | 56 | 72;\n /**\n * When unset, it will force `role=\"presentation\"` on the image. Otherwise, the image will use its implicit img role.\n */\n alt?: string;\n};\n\n/**\n * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`\n * or `<ListItem.AvatarLayout />` are insufficient.\n * It's a wrapper around the\n * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only\n * a subset of its props, in line with the ListItem's constraints.\n *\n * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).\n */\nexport const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {\n useListItemMedia(size);\n\n return (\n <div\n className={clsx('wds-list-item-media-image-wrapper')}\n style={\n {\n '--wds-list-item-media-size': `${size}px`,\n } as React.CSSProperties\n }\n >\n <ImageComp\n {...props}\n className={clsx(className, 'wds-list-item-media-image')}\n alt={alt}\n role={alt ? undefined : 'presentation'}\n />\n </div>\n );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","undefined","displayName"],"mappings":";;;;;AAwBO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAsB,KAAI;EACxFC,gBAAgB,CAACH,IAAI,CAAC;AAEtB,EAAA,oBACEI,GAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,IAAI,CAAC,mCAAmC,CAAE;AACrDC,IAAAA,KAAK,EACH;MACE,4BAA4B,EAAE,GAAGN,IAAI,CAAA,EAAA;KAExC;IAAAO,QAAA,eAEDH,GAAA,CAACI,OAAS,EAAA;AAAA,MAAA,GACJN,KAAK;AACTD,MAAAA,SAAS,EAAEI,IAAI,CAACJ,SAAS,EAAE,2BAA2B,CAAE;AACxDF,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAEV,GAAG,GAAGW,SAAS,GAAG;KAAe;AAE3C,GAAK,CAAC;AAEV;AACAZ,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemContext.js","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';\n\nexport type ListItemMediaSize =
|
|
1
|
+
{"version":3,"file":"ListItemContext.js","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';\n\nexport type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;\n\nexport type ListItemContextData = {\n setControlType: (type: ListItemTypes) => void;\n setControlProps: (props: ListItemControlProps) => void;\n setMediaSize: (size: ListItemMediaSize | undefined) => void;\n ids: {\n title: string;\n subtitle?: string;\n valueTitle?: string;\n valueSubtitle?: string;\n additionalInfo?: string;\n control: string;\n prompt?: string;\n };\n props: Pick<ListItemProps, 'disabled' | 'inverted' | 'disabledPromptMessage'>;\n mediaSize?: ListItemMediaSize;\n isPartiallyInteractive?: boolean;\n describedByIds: string;\n};\n\nexport const ListItemContext = createContext<ListItemContextData>(\n null as unknown as ListItemContextData,\n);\n"],"names":["ListItemContext","createContext"],"mappings":";;;;MAwBaA,eAAe,gBAAGC,mBAAa,CAC1C,IAAsC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemContext.mjs","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';\n\nexport type ListItemMediaSize =
|
|
1
|
+
{"version":3,"file":"ListItemContext.mjs","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';\n\nexport type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;\n\nexport type ListItemContextData = {\n setControlType: (type: ListItemTypes) => void;\n setControlProps: (props: ListItemControlProps) => void;\n setMediaSize: (size: ListItemMediaSize | undefined) => void;\n ids: {\n title: string;\n subtitle?: string;\n valueTitle?: string;\n valueSubtitle?: string;\n additionalInfo?: string;\n control: string;\n prompt?: string;\n };\n props: Pick<ListItemProps, 'disabled' | 'inverted' | 'disabledPromptMessage'>;\n mediaSize?: ListItemMediaSize;\n isPartiallyInteractive?: boolean;\n describedByIds: string;\n};\n\nexport const ListItemContext = createContext<ListItemContextData>(\n null as unknown as ListItemContextData,\n);\n"],"names":["ListItemContext","createContext"],"mappings":";;MAwBaA,eAAe,gBAAGC,aAAa,CAC1C,IAAsC;;;;"}
|
package/build/main.css
CHANGED
|
@@ -3371,6 +3371,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3371
3371
|
.wds-list-item.disabled label {
|
|
3372
3372
|
cursor: not-allowed;
|
|
3373
3373
|
}
|
|
3374
|
+
.wds-list-item.disabled .wds-list-item-media,
|
|
3375
|
+
.wds-list-item.disabled .np-avatar-view-content,
|
|
3374
3376
|
.wds-list-item.disabled .wds-list-item-title,
|
|
3375
3377
|
.wds-list-item.disabled .wds-list-item-title-value,
|
|
3376
3378
|
.wds-list-item.disabled .wds-list-item-subtitle,
|
|
@@ -727,6 +727,8 @@
|
|
|
727
727
|
.wds-list-item.disabled label {
|
|
728
728
|
cursor: not-allowed;
|
|
729
729
|
}
|
|
730
|
+
.wds-list-item.disabled .wds-list-item-media,
|
|
731
|
+
.wds-list-item.disabled .np-avatar-view-content,
|
|
730
732
|
.wds-list-item.disabled .wds-list-item-title,
|
|
731
733
|
.wds-list-item.disabled .wds-list-item-title-value,
|
|
732
734
|
.wds-list-item.disabled .wds-list-item-subtitle,
|
package/build/styles/main.css
CHANGED
|
@@ -3371,6 +3371,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3371
3371
|
.wds-list-item.disabled label {
|
|
3372
3372
|
cursor: not-allowed;
|
|
3373
3373
|
}
|
|
3374
|
+
.wds-list-item.disabled .wds-list-item-media,
|
|
3375
|
+
.wds-list-item.disabled .np-avatar-view-content,
|
|
3374
3376
|
.wds-list-item.disabled .wds-list-item-title,
|
|
3375
3377
|
.wds-list-item.disabled .wds-list-item-title-value,
|
|
3376
3378
|
.wds-list-item.disabled .wds-list-item-subtitle,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { type AvatarViewProps } from '../../avatarView';
|
|
2
|
-
import { ListItemMediaSize } from '../ListItemContext';
|
|
3
2
|
export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {
|
|
4
|
-
size?:
|
|
3
|
+
size?: 32 | 40 | 48 | 56 | 72;
|
|
5
4
|
};
|
|
6
5
|
/**
|
|
7
6
|
* This component renders a single avatar. It's a thin wrapper around the
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemAvatarView.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"names":[],"mappings":"AACA,OAAuB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"ListItemAvatarView.d.ts","sourceRoot":"","sources":["../../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"names":[],"mappings":"AACA,OAAuB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGxE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG;IACpF,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CAC/B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;oCAAwC,uBAAuB;;CAUrF,CAAC"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { type ImageProps } from '../../image';
|
|
2
|
-
import { ListItemMediaSize } from '../ListItemContext';
|
|
3
2
|
export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {
|
|
4
3
|
/**
|
|
5
4
|
* The size of square container for the image, matching available avatar sizes.
|
|
6
5
|
*/
|
|
7
|
-
size?:
|
|
6
|
+
size?: 32 | 40 | 48 | 56 | 72;
|
|
8
7
|
/**
|
|
9
8
|
* When unset, it will force `role="presentation"` on the image. Otherwise, the image will use its implicit img role.
|
|
10
9
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemImage.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Image/ListItemImage.tsx"],"names":[],"mappings":"AAAA,OAAkB,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"ListItemImage.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Image/ListItemImage.tsx"],"names":[],"mappings":"AAAA,OAAkB,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAIzD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC,GAAG;IAChG;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC9B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,KAAK;yCAAkD,kBAAkB;;CAoBrF,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';
|
|
2
|
-
export type ListItemMediaSize =
|
|
2
|
+
export type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;
|
|
3
3
|
export type ListItemContextData = {
|
|
4
4
|
setControlType: (type: ListItemTypes) => void;
|
|
5
5
|
setControlProps: (props: ListItemControlProps) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemContext.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,
|
|
1
|
+
{"version":3,"file":"ListItemContext.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,GAAG,uBAAuB,CAAC,CAAC;IAC9E,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,eAAe,8CAE3B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import AvatarViewComp, { type AvatarViewProps } from '../../avatarView';
|
|
3
3
|
import { useListItemMedia } from '../useListItemMedia';
|
|
4
|
-
import { ListItemMediaSize } from '../ListItemContext';
|
|
5
4
|
|
|
6
5
|
export type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {
|
|
7
|
-
size?:
|
|
6
|
+
size?: 32 | 40 | 48 | 56 | 72;
|
|
8
7
|
};
|
|
9
8
|
|
|
10
9
|
/**
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import ImageComp, { type ImageProps } from '../../image';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { useListItemMedia } from '../useListItemMedia';
|
|
4
|
-
import { ListItemMediaSize } from '../ListItemContext';
|
|
5
4
|
|
|
6
5
|
export type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {
|
|
7
6
|
/**
|
|
8
7
|
* The size of square container for the image, matching available avatar sizes.
|
|
9
8
|
*/
|
|
10
|
-
size?:
|
|
9
|
+
size?: 32 | 40 | 48 | 56 | 72;
|
|
11
10
|
/**
|
|
12
11
|
* When unset, it will force `role="presentation"` on the image. Otherwise, the image will use its implicit img role.
|
|
13
12
|
*/
|
|
@@ -727,6 +727,8 @@
|
|
|
727
727
|
.wds-list-item.disabled label {
|
|
728
728
|
cursor: not-allowed;
|
|
729
729
|
}
|
|
730
|
+
.wds-list-item.disabled .wds-list-item-media,
|
|
731
|
+
.wds-list-item.disabled .np-avatar-view-content,
|
|
730
732
|
.wds-list-item.disabled .wds-list-item-title,
|
|
731
733
|
.wds-list-item.disabled .wds-list-item-title-value,
|
|
732
734
|
.wds-list-item.disabled .wds-list-item-subtitle,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createContext } from 'react';
|
|
2
2
|
import type { ListItemTypes, ListItemControlProps, ListItemProps } from './ListItem';
|
|
3
3
|
|
|
4
|
-
export type ListItemMediaSize =
|
|
4
|
+
export type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;
|
|
5
5
|
|
|
6
6
|
export type ListItemContextData = {
|
|
7
7
|
setControlType: (type: ListItemTypes) => void;
|
package/src/main.css
CHANGED
|
@@ -3371,6 +3371,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3371
3371
|
.wds-list-item.disabled label {
|
|
3372
3372
|
cursor: not-allowed;
|
|
3373
3373
|
}
|
|
3374
|
+
.wds-list-item.disabled .wds-list-item-media,
|
|
3375
|
+
.wds-list-item.disabled .np-avatar-view-content,
|
|
3374
3376
|
.wds-list-item.disabled .wds-list-item-title,
|
|
3375
3377
|
.wds-list-item.disabled .wds-list-item-title-value,
|
|
3376
3378
|
.wds-list-item.disabled .wds-list-item-subtitle,
|