@transferwise/components 0.0.0-experimental-e74c784 → 0.0.0-experimental-22400c4

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.
@@ -10,6 +10,7 @@ var useHasIntersected = require('../common/hooks/useHasIntersected/useHasInterse
10
10
  require('../common/propsValues/breakpoint.js');
11
11
  var jsxRuntime = require('react/jsx-runtime');
12
12
 
13
+ const EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
13
14
  const Image = ({
14
15
  id,
15
16
  src,
@@ -27,27 +28,27 @@ const Image = ({
27
28
  elRef: elementReference,
28
29
  loading
29
30
  });
30
- // Internal onLoad handler that calls user onLoad only if hasIntersected is true
31
- const handleLoad = React.useCallback(() => {
32
- if (hasIntersected && onLoad) {
33
- onLoad();
34
- }
35
- }, [hasIntersected, onLoad]);
31
+ let imageSource = src;
32
+ let imageOnLoad = onLoad;
33
+ if (loading === 'lazy' && !hasIntersected) {
34
+ imageSource = EmptyTransparentImage;
35
+ imageOnLoad = undefined;
36
+ }
36
37
  return /*#__PURE__*/jsxRuntime.jsx("img", {
37
38
  ref: elementReference,
38
39
  id: id,
39
40
  alt: alt,
40
- src: src,
41
- loading: loading,
41
+ src: imageSource,
42
42
  className: clsx.clsx(['tw-image', {
43
43
  'tw-image__stretch': stretch,
44
44
  'tw-image__shrink': shrink
45
45
  }, className]),
46
46
  role: role,
47
- onLoad: handleLoad,
47
+ onLoad: imageOnLoad,
48
48
  onError: onError
49
49
  });
50
50
  };
51
51
 
52
+ exports.EmptyTransparentImage = EmptyTransparentImage;
52
53
  exports.default = Image;
53
54
  //# sourceMappingURL=Image.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Image.js","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef, useCallback } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n alt: string;\n src: string;\n id?: string;\n onLoad?: () => void;\n onError?: () => void;\n className?: string;\n loading?: 'lazy' | 'eager';\n stretch?: boolean;\n role?: string;\n shrink?: boolean;\n}\n\nconst Image = ({\n id,\n src,\n alt,\n onLoad,\n onError,\n className,\n loading,\n stretch = true,\n role,\n shrink = true,\n}: ImageProps) => {\n const elementReference = useRef<HTMLImageElement>(null);\n const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n\n // Internal onLoad handler that calls user onLoad only if hasIntersected is true\n const handleLoad = useCallback(() => {\n if (hasIntersected && onLoad) {\n onLoad();\n }\n }, [hasIntersected, onLoad]);\n\n return (\n <img\n ref={elementReference}\n id={id}\n alt={alt}\n src={src}\n loading={loading}\n className={clsx([\n 'tw-image',\n {\n 'tw-image__stretch': stretch,\n 'tw-image__shrink': shrink,\n },\n className,\n ])}\n role={role}\n onLoad={handleLoad}\n onError={onError}\n />\n );\n};\n\nexport default Image;\n"],"names":["Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","handleLoad","useCallback","_jsx","ref","clsx"],"mappings":";;;;;;;;;;;;AAkBMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,YAAM,CAAmB,IAAI,CAAC;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,mCAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA;AAAO,GAAE,CAAC;AAEhF;AACA,EAAA,MAAMS,UAAU,GAAGC,iBAAW,CAAC,MAAK;IAClC,IAAIJ,cAAc,IAAIT,MAAM,EAAE;AAC5BA,MAAAA,MAAM,EAAE;AACV;AACF,GAAC,EAAE,CAACS,cAAc,EAAET,MAAM,CAAC,CAAC;AAE5B,EAAA,oBACEc,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAER,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,SAAS,EAAEc,SAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEZ,OAAO;AAC5B,MAAA,kBAAkB,EAAEE;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEY,UAAW;AACnBX,IAAAA,OAAO,EAAEA;AAAQ,GACjB,CAAA;AAEN;;;;"}
1
+ {"version":3,"file":"Image.js","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n alt: string;\n src: string;\n id?: string;\n onLoad?: () => void;\n onError?: () => void;\n className?: string;\n loading?: 'lazy' | 'eager';\n stretch?: boolean;\n role?: string;\n shrink?: boolean;\n}\n\nexport const EmptyTransparentImage =\n 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';\n\nconst Image = ({\n id,\n src,\n alt,\n onLoad,\n onError,\n className,\n loading,\n stretch = true,\n role,\n shrink = true,\n}: ImageProps) => {\n const elementReference = useRef<HTMLImageElement>(null);\n const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n let imageSource = src;\n let imageOnLoad = onLoad;\n\n if (loading === 'lazy' && !hasIntersected) {\n imageSource = EmptyTransparentImage;\n imageOnLoad = undefined;\n }\n\n return (\n <img\n ref={elementReference}\n id={id}\n alt={alt}\n src={imageSource}\n className={clsx([\n 'tw-image',\n {\n 'tw-image__stretch': stretch,\n 'tw-image__shrink': shrink,\n },\n className,\n ])}\n role={role}\n onLoad={imageOnLoad}\n onError={onError}\n />\n );\n};\n\nexport default Image;\n"],"names":["EmptyTransparentImage","Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","imageSource","imageOnLoad","undefined","_jsx","ref","clsx"],"mappings":";;;;;;;;;;;;AAkBO,MAAMA,qBAAqB,GAChC;AAEIC,MAAAA,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,YAAM,CAAmB,IAAI,CAAC;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,mCAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA;AAAO,GAAE,CAAC;EAChF,IAAIS,WAAW,GAAGd,GAAG;EACrB,IAAIe,WAAW,GAAGb,MAAM;AAExB,EAAA,IAAIG,OAAO,KAAK,MAAM,IAAI,CAACM,cAAc,EAAE;AACzCG,IAAAA,WAAW,GAAGjB,qBAAqB;AACnCkB,IAAAA,WAAW,GAAGC,SAAS;AACzB;AAEA,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEc,WAAY;AACjBV,IAAAA,SAAS,EAAEe,SAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEb,OAAO;AAC5B,MAAA,kBAAkB,EAAEE;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEa,WAAY;AACpBZ,IAAAA,OAAO,EAAEA;AAAQ,GACjB,CAAA;AAEN;;;;;"}
@@ -1,11 +1,12 @@
1
1
  import { clsx } from 'clsx';
2
- import { useRef, useCallback } from 'react';
2
+ import { useRef } from 'react';
3
3
  import '@transferwise/neptune-validation';
4
4
  import '../provider/direction/DirectionProvider.mjs';
5
5
  import { useHasIntersected } from '../common/hooks/useHasIntersected/useHasIntersected.mjs';
6
6
  import '../common/propsValues/breakpoint.mjs';
7
7
  import { jsx } from 'react/jsx-runtime';
8
8
 
9
+ const EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
9
10
  const Image = ({
10
11
  id,
11
12
  src,
@@ -23,27 +24,26 @@ const Image = ({
23
24
  elRef: elementReference,
24
25
  loading
25
26
  });
26
- // Internal onLoad handler that calls user onLoad only if hasIntersected is true
27
- const handleLoad = useCallback(() => {
28
- if (hasIntersected && onLoad) {
29
- onLoad();
30
- }
31
- }, [hasIntersected, onLoad]);
27
+ let imageSource = src;
28
+ let imageOnLoad = onLoad;
29
+ if (loading === 'lazy' && !hasIntersected) {
30
+ imageSource = EmptyTransparentImage;
31
+ imageOnLoad = undefined;
32
+ }
32
33
  return /*#__PURE__*/jsx("img", {
33
34
  ref: elementReference,
34
35
  id: id,
35
36
  alt: alt,
36
- src: src,
37
- loading: loading,
37
+ src: imageSource,
38
38
  className: clsx(['tw-image', {
39
39
  'tw-image__stretch': stretch,
40
40
  'tw-image__shrink': shrink
41
41
  }, className]),
42
42
  role: role,
43
- onLoad: handleLoad,
43
+ onLoad: imageOnLoad,
44
44
  onError: onError
45
45
  });
46
46
  };
47
47
 
48
- export { Image as default };
48
+ export { EmptyTransparentImage, Image as default };
49
49
  //# sourceMappingURL=Image.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Image.mjs","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef, useCallback } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n alt: string;\n src: string;\n id?: string;\n onLoad?: () => void;\n onError?: () => void;\n className?: string;\n loading?: 'lazy' | 'eager';\n stretch?: boolean;\n role?: string;\n shrink?: boolean;\n}\n\nconst Image = ({\n id,\n src,\n alt,\n onLoad,\n onError,\n className,\n loading,\n stretch = true,\n role,\n shrink = true,\n}: ImageProps) => {\n const elementReference = useRef<HTMLImageElement>(null);\n const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n\n // Internal onLoad handler that calls user onLoad only if hasIntersected is true\n const handleLoad = useCallback(() => {\n if (hasIntersected && onLoad) {\n onLoad();\n }\n }, [hasIntersected, onLoad]);\n\n return (\n <img\n ref={elementReference}\n id={id}\n alt={alt}\n src={src}\n loading={loading}\n className={clsx([\n 'tw-image',\n {\n 'tw-image__stretch': stretch,\n 'tw-image__shrink': shrink,\n },\n className,\n ])}\n role={role}\n onLoad={handleLoad}\n onError={onError}\n />\n );\n};\n\nexport default Image;\n"],"names":["Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","handleLoad","useCallback","_jsx","ref","clsx"],"mappings":";;;;;;;;AAkBMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,MAAM,CAAmB,IAAI,CAAC;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,iBAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA;AAAO,GAAE,CAAC;AAEhF;AACA,EAAA,MAAMS,UAAU,GAAGC,WAAW,CAAC,MAAK;IAClC,IAAIJ,cAAc,IAAIT,MAAM,EAAE;AAC5BA,MAAAA,MAAM,EAAE;AACV;AACF,GAAC,EAAE,CAACS,cAAc,EAAET,MAAM,CAAC,CAAC;AAE5B,EAAA,oBACEc,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAER,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,SAAS,EAAEc,IAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEZ,OAAO;AAC5B,MAAA,kBAAkB,EAAEE;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEY,UAAW;AACnBX,IAAAA,OAAO,EAAEA;AAAQ,GACjB,CAAA;AAEN;;;;"}
1
+ {"version":3,"file":"Image.mjs","sources":["../../src/image/Image.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef } from 'react';\n\nimport { useHasIntersected } from '../common/hooks';\n\nexport interface ImageProps {\n alt: string;\n src: string;\n id?: string;\n onLoad?: () => void;\n onError?: () => void;\n className?: string;\n loading?: 'lazy' | 'eager';\n stretch?: boolean;\n role?: string;\n shrink?: boolean;\n}\n\nexport const EmptyTransparentImage =\n 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';\n\nconst Image = ({\n id,\n src,\n alt,\n onLoad,\n onError,\n className,\n loading,\n stretch = true,\n role,\n shrink = true,\n}: ImageProps) => {\n const elementReference = useRef<HTMLImageElement>(null);\n const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });\n let imageSource = src;\n let imageOnLoad = onLoad;\n\n if (loading === 'lazy' && !hasIntersected) {\n imageSource = EmptyTransparentImage;\n imageOnLoad = undefined;\n }\n\n return (\n <img\n ref={elementReference}\n id={id}\n alt={alt}\n src={imageSource}\n className={clsx([\n 'tw-image',\n {\n 'tw-image__stretch': stretch,\n 'tw-image__shrink': shrink,\n },\n className,\n ])}\n role={role}\n onLoad={imageOnLoad}\n onError={onError}\n />\n );\n};\n\nexport default Image;\n"],"names":["EmptyTransparentImage","Image","id","src","alt","onLoad","onError","className","loading","stretch","role","shrink","elementReference","useRef","hasIntersected","useHasIntersected","elRef","imageSource","imageOnLoad","undefined","_jsx","ref","clsx"],"mappings":";;;;;;;;AAkBO,MAAMA,qBAAqB,GAChC;AAEIC,MAAAA,KAAK,GAAGA,CAAC;EACbC,EAAE;EACFC,GAAG;EACHC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,SAAS;EACTC,OAAO;AACPC,EAAAA,OAAO,GAAG,IAAI;EACdC,IAAI;AACJC,EAAAA,MAAM,GAAG;AAAI,CACF,KAAI;AACf,EAAA,MAAMC,gBAAgB,GAAGC,MAAM,CAAmB,IAAI,CAAC;AACvD,EAAA,MAAM,CAACC,cAAc,CAAC,GAAGC,iBAAiB,CAAC;AAAEC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAEJ,IAAAA;AAAO,GAAE,CAAC;EAChF,IAAIS,WAAW,GAAGd,GAAG;EACrB,IAAIe,WAAW,GAAGb,MAAM;AAExB,EAAA,IAAIG,OAAO,KAAK,MAAM,IAAI,CAACM,cAAc,EAAE;AACzCG,IAAAA,WAAW,GAAGjB,qBAAqB;AACnCkB,IAAAA,WAAW,GAAGC,SAAS;AACzB;AAEA,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,gBAAiB;AACtBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,GAAG,EAAEc,WAAY;AACjBV,IAAAA,SAAS,EAAEe,IAAI,CAAC,CACd,UAAU,EACV;AACE,MAAA,mBAAmB,EAAEb,OAAO;AAC5B,MAAA,kBAAkB,EAAEE;KACrB,EACDJ,SAAS,CACV,CAAE;AACHG,IAAAA,IAAI,EAAEA,IAAK;AACXL,IAAAA,MAAM,EAAEa,WAAY;AACpBZ,IAAAA,OAAO,EAAEA;AAAQ,GACjB,CAAA;AAEN;;;;"}
package/build/main.css CHANGED
@@ -2665,8 +2665,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2665
2665
  .wds-list-item {
2666
2666
  list-style: none;
2667
2667
  width: 100%;
2668
- padding: 16px;
2669
- padding: var(--size-16);
2668
+ padding: 0;
2670
2669
  border-radius: 16px;
2671
2670
  border-radius: var(--radius-medium);
2672
2671
  background-color: #ffffff;
@@ -2674,15 +2673,31 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2674
2673
  gap: 16px;
2675
2674
  gap: var(--size-16);
2676
2675
  }
2677
- .wds-list-item-interactive {
2676
+ .wds-list-item .partially-interactive {
2677
+ padding: 16px;
2678
+ padding: var(--size-16);
2679
+ }
2680
+ .wds-list-item label {
2681
+ padding: 16px;
2682
+ padding: var(--size-16);
2683
+ }
2684
+ .wds-list-item-interactive label {
2678
2685
  cursor: pointer;
2679
2686
  }
2680
2687
  .wds-list-item-interactive:hover {
2681
2688
  background-color: var(--color-background-screen-hover);
2682
2689
  }
2690
+ .wds-list-item-interactive:hover .wds-list-item-control .wds-Button {
2691
+ background-color: var(--Button-background-hover);
2692
+ color: var(--Button-color-hover);
2693
+ transition: none;
2694
+ }
2683
2695
  .wds-list-item-interactive:active {
2684
2696
  background-color: var(--color-background-screen-active);
2685
2697
  }
2698
+ .wds-list-item-interactive .wds-list-item-control .wds-Button {
2699
+ transition: none;
2700
+ }
2686
2701
  .wds-list-item-media-image {
2687
2702
  width: var(--item-media-image-size);
2688
2703
  height: var(--item-media-image-size);
@@ -1,8 +1,7 @@
1
1
  .wds-list-item {
2
2
  list-style: none;
3
3
  width: 100%;
4
- padding: 16px;
5
- padding: var(--size-16);
4
+ padding: 0;
6
5
  border-radius: 16px;
7
6
  border-radius: var(--radius-medium);
8
7
  background-color: #ffffff;
@@ -10,15 +9,31 @@
10
9
  gap: 16px;
11
10
  gap: var(--size-16);
12
11
  }
13
- .wds-list-item-interactive {
12
+ .wds-list-item .partially-interactive {
13
+ padding: 16px;
14
+ padding: var(--size-16);
15
+ }
16
+ .wds-list-item label {
17
+ padding: 16px;
18
+ padding: var(--size-16);
19
+ }
20
+ .wds-list-item-interactive label {
14
21
  cursor: pointer;
15
22
  }
16
23
  .wds-list-item-interactive:hover {
17
24
  background-color: var(--color-background-screen-hover);
18
25
  }
26
+ .wds-list-item-interactive:hover .wds-list-item-control .wds-Button {
27
+ background-color: var(--Button-background-hover);
28
+ color: var(--Button-color-hover);
29
+ transition: none;
30
+ }
19
31
  .wds-list-item-interactive:active {
20
32
  background-color: var(--color-background-screen-active);
21
33
  }
34
+ .wds-list-item-interactive .wds-list-item-control .wds-Button {
35
+ transition: none;
36
+ }
22
37
  .wds-list-item-media-image {
23
38
  width: var(--item-media-image-size);
24
39
  height: var(--item-media-image-size);
@@ -2665,8 +2665,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2665
2665
  .wds-list-item {
2666
2666
  list-style: none;
2667
2667
  width: 100%;
2668
- padding: 16px;
2669
- padding: var(--size-16);
2668
+ padding: 0;
2670
2669
  border-radius: 16px;
2671
2670
  border-radius: var(--radius-medium);
2672
2671
  background-color: #ffffff;
@@ -2674,15 +2673,31 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2674
2673
  gap: 16px;
2675
2674
  gap: var(--size-16);
2676
2675
  }
2677
- .wds-list-item-interactive {
2676
+ .wds-list-item .partially-interactive {
2677
+ padding: 16px;
2678
+ padding: var(--size-16);
2679
+ }
2680
+ .wds-list-item label {
2681
+ padding: 16px;
2682
+ padding: var(--size-16);
2683
+ }
2684
+ .wds-list-item-interactive label {
2678
2685
  cursor: pointer;
2679
2686
  }
2680
2687
  .wds-list-item-interactive:hover {
2681
2688
  background-color: var(--color-background-screen-hover);
2682
2689
  }
2690
+ .wds-list-item-interactive:hover .wds-list-item-control .wds-Button {
2691
+ background-color: var(--Button-background-hover);
2692
+ color: var(--Button-color-hover);
2693
+ transition: none;
2694
+ }
2683
2695
  .wds-list-item-interactive:active {
2684
2696
  background-color: var(--color-background-screen-active);
2685
2697
  }
2698
+ .wds-list-item-interactive .wds-list-item-control .wds-Button {
2699
+ transition: none;
2700
+ }
2686
2701
  .wds-list-item-media-image {
2687
2702
  width: var(--item-media-image-size);
2688
2703
  height: var(--item-media-image-size);
@@ -10,6 +10,7 @@ export interface ImageProps {
10
10
  role?: string;
11
11
  shrink?: boolean;
12
12
  }
13
+ export declare const EmptyTransparentImage = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
13
14
  declare const Image: ({ id, src, alt, onLoad, onError, className, loading, stretch, role, shrink, }: ImageProps) => import("react").JSX.Element;
14
15
  export default Image;
15
16
  //# sourceMappingURL=Image.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/image/Image.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,KAAK,GAAI,+EAWZ,UAAU,gCA+BZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/image/Image.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,qBAAqB,+EAC4C,CAAC;AAE/E,QAAA,MAAM,KAAK,GAAI,+EAWZ,UAAU,gCA8BZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -1,8 +1,9 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { ListItemCheckboxProps } from './ListItemCheckbox';
3
3
  import { ListItemNavigationProps } from './ListItemNavigation';
4
+ import { ListItemButtonProps } from './ListItemButton';
4
5
  export type ListItemTypes = 'non-interactive' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';
5
- export type ListItemControlProps = ListItemNavigationProps | ListItemCheckboxProps;
6
+ export type ListItemControlProps = ListItemNavigationProps | ListItemCheckboxProps | ListItemButtonProps;
6
7
  export type Props = {
7
8
  as?: 'li' | 'div' | 'span';
8
9
  inverted?: boolean;
@@ -40,7 +41,7 @@ export declare const ListItem: {
40
41
  Checkbox: (props: ListItemCheckboxProps) => import("react").JSX.Element;
41
42
  IconButton: (props: import("./ListItemIconButton").ListItemIconButtonProps) => import("react").JSX.Element;
42
43
  Navigation: ({ href, ...props }: ListItemNavigationProps) => import("react").JSX.Element;
43
- Button: ({ priority, ...props }: import("./ListItemButton").ListItemButtonProps) => import("react").JSX.Element;
44
+ Button: ({ priority, partiallyInteractive, ...props }: ListItemButtonProps) => import("react").JSX.Element;
44
45
  Switch: (props: import("..").SwitchProps) => import("react").JSX.Element;
45
46
  Prompt: ({ type, children, action }: import("./prompt/Prompt").ListItemPromptProps) => import("react").JSX.Element;
46
47
  };
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAIV,MAAM,OAAO,CAAC;AAKf,OAAO,EAAY,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAc,MAAM,sBAAsB,CAAC;AAS3E,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GAEvB,qBAAqB,CAAC;AAE1B,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,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,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;CAC7C,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;6JAclB,KAAK;;;;;;;;;;;CAyGP,CAAC;AAyDF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAIV,MAAM,OAAO,CAAC;AAKf,OAAO,EAAY,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAc,MAAM,sBAAsB,CAAC;AAE3E,OAAO,EAAU,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO/D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GAEvB,qBAAqB,GACrB,mBAAmB,CAAC;AAExB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,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,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;CAC7C,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;6JAclB,KAAK;;;;;;;;;;;CA6GP,CAAC;AAiFF,eAAe,QAAQ,CAAC"}
@@ -1,4 +1,6 @@
1
1
  import { NewButtonProps } from '../button';
2
- export type ListItemButtonProps = Omit<NewButtonProps, 'v2' | 'size' | 'disabled'>;
3
- export declare const Button: ({ priority, ...props }: ListItemButtonProps) => import("react").JSX.Element;
2
+ export type ListItemButtonProps = Omit<NewButtonProps, 'v2' | 'size' | 'disabled'> & {
3
+ partiallyInteractive?: boolean;
4
+ };
5
+ export declare const Button: ({ priority, partiallyInteractive, ...props }: ListItemButtonProps) => import("react").JSX.Element;
4
6
  //# sourceMappingURL=ListItemButton.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemButton.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,cAAc,EAAE,MAAM,WAAW,CAAC;AAGlE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC,CAAC;AAEnF,eAAO,MAAM,MAAM,GAAI,wBAAsC,mBAAmB,gCAY/E,CAAC"}
1
+ {"version":3,"file":"ListItemButton.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,cAAc,EAAE,MAAM,WAAW,CAAC;AAGlE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC,GAAG;IACnF,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,8CAIpB,mBAAmB,gCAYrB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"UploadInput.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/UploadInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAiC,MAAM,WAAW,CAAC;AAOvE,OAAO,EAAE,YAAY,EAAe,cAAc,EAAE,MAAM,SAAS,CAAC;AACpE,OAAqB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAE9E,OAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAE9D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAErD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QAEf;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAEvB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,IAAI,GAAG,mBAAmB,CACjG,GAAG;IAAE,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CAAE,GAAG,WAAW,CAAC;AAgCjE;;;;;;;;GAQG;AACH,QAAA,MAAM,WAAW,GAAI,oQAoBlB,gBAAgB,gCAmXlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"UploadInput.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/UploadInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAiC,MAAM,WAAW,CAAC;AAOvE,OAAO,EAAE,YAAY,EAAe,cAAc,EAAE,MAAM,SAAS,CAAC;AACpE,OAAqB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAE9E,OAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAE9D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAErD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QAEf;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAEvB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,IAAI,GAAG,mBAAmB,CACjG,GAAG;IAAE,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CAAE,GAAG,WAAW,CAAC;AAgCjE;;;;;;;;GAQG;AACH,QAAA,MAAM,WAAW,GAAI,oQAoBlB,gBAAgB,gCAkXlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"UploadInput.js","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport Modal from '../modal';\nimport { isSizeValid } from '../upload/utils/isSizeValid';\nimport { isTypeValid } from '../upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './uploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './uploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './uploadItem/UploadItem';\n\nexport type UploadInputProps = {\n /**\n * List of already existing, failed or in progress files\n */\n files?: readonly UploadedFile[];\n\n /**\n * The key of the file in the returned FormData object (default: file)\n */\n fileInputName?: string;\n\n /**\n * Callback that handles form submission\n *\n * @param formData\n */\n onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n /**\n * Provide a callback if the file can be removed/deleted from the server\n * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n *\n * @param id\n */\n onDeleteFile?: (id: string | number) => Promise<any>;\n\n /**\n * Provide a callback to trigger on validation error\n *\n * @param file\n */\n onValidationError?: (file: UploadedFile) => void;\n\n /**\n * Provide a callback to trigger on change whenever the files are updated\n *\n * @param files\n */\n onFilesChange?: (files: UploadedFile[]) => void;\n\n /**\n * Confirmation modal displayed on delete\n */\n deleteConfirm?: {\n /**\n * The title of the confirmation modal on delete\n */\n title?: string;\n\n /**\n * The body of the confirmation modal on delete\n */\n body?: React.ReactNode;\n\n /**\n * The confirm button text of the confirmation modal on delete\n */\n confirmText?: string;\n\n /**\n * The cancel button text of the confirmation modal on delete\n */\n cancelText?: string;\n };\n\n /**\n * Maximum number of files allowed, if provided, shows error below file item\n */\n maxFiles?: number;\n\n /**\n * Error message to show when the maximum number of files are uploaded already\n */\n maxFilesErrorMessage?: string;\n\n /**\n * Error message to show when files over a allowed size limit are uploaded\n */\n sizeLimitErrorMessage?: string;\n} & Pick<\n UploadButtonProps,\n 'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'\n> & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;\n\n/**\n * Interface representing a reference to an UploadItem component.\n * Provides a method to focus the UploadItem.\n */\ninterface UploadItemRef {\n /**\n * Focuses the UploadItem component.\n */\n focus: () => void;\n\n /**\n * Required id of the UploadItem component.\n */\n id: string | number;\n\n /**\n * Optional status of the UploadItem component.\n */\n status?: string;\n}\n\n/**\n * Generates a unique ID for a file based on its name, size, and the current timestamp\n */\nfunction generateFileId(file: File) {\n const { name, size } = file;\n const uploadTimeStamp = new Date().getTime();\n return `${name}_${size}_${uploadTimeStamp}`;\n}\n\n/**\n * The component allows users to upload files, manage the list of uploaded files,\n * and handle file validation and deletion.\n *\n * @param {UploadInputProps} props - The properties for the UploadInput component.\n *\n * @see {@link UploadInput} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}\n */\nconst UploadInput = ({\n files = [],\n fileInputName = 'file',\n className,\n deleteConfirm,\n disabled,\n multiple = false,\n fileTypes = imageFileTypes,\n sizeLimit = DEFAULT_SIZE_LIMIT,\n description,\n onUploadFile,\n onDeleteFile,\n onValidationError,\n onFilesChange,\n onDownload,\n maxFiles,\n maxFilesErrorMessage,\n id,\n sizeLimitErrorMessage,\n uploadButtonTitle,\n}: UploadInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n const [lastAttemptedDeleteId, setLastAttemptedDeleteId] = useState<string | number | null>(null);\n const [mounted, setMounted] = useState(false);\n const { formatMessage } = useIntl();\n const uploadInputRef = useRef<HTMLInputElement | null>(null);\n let fileRefs: (HTMLDivElement | UploadItemRef | null)[] = [];\n\n const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n\n const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n multiple || files.length === 0 ? files : [files[0]],\n );\n\n const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n function updateFileList(updateFn: (list: readonly UploadedFile[]) => readonly UploadedFile[]) {\n setUploadedFiles(updateFn);\n uploadedFilesListReference.current = updateFn(uploadedFilesListReference.current);\n }\n\n function addFileToList(recentUploadedFile: UploadedFile) {\n updateFileList((list) => [...list, recentUploadedFile]);\n }\n\n function removeFileFromList(file: UploadedFile) {\n updateFileList((list) =>\n list.filter((fileInList) => file !== fileInList && file.id !== fileInList.id),\n );\n fileRefs = fileRefs.filter((ref) => ref && ref.id !== file.id);\n }\n\n function modifyFileInList(file: UploadedFile, updates: Partial<UploadedFile>) {\n updateFileList((list) =>\n list.map((fileInList) =>\n fileInList === file || fileInList.id === file.id ? { ...file, ...updates } : fileInList,\n ),\n );\n }\n\n const removeFile = async (file: UploadedFile) => {\n const { id, status } = file;\n fileRefs = fileRefs.filter((item) => item && item.id !== file.id);\n\n if (status === Status.FAILED) {\n removeFileFromList(file);\n return Promise.resolve();\n }\n\n if (onDeleteFile && id) {\n modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n return onDeleteFile(id)\n .then(() => {\n removeFileFromList(file);\n })\n .catch((error) => {\n modifyFileInList(file, { error: error as UploadError });\n });\n }\n };\n\n function handleFileUploadFailure(file: File, failureMessage: string) {\n const { name } = file;\n\n const failedUpload = {\n id: generateFileId(file),\n filename: name,\n status: Status.FAILED,\n error: failureMessage,\n };\n\n addFileToList(failedUpload);\n\n if (onValidationError) {\n onValidationError(failedUpload);\n }\n }\n\n function getNumberOfFilesUploaded() {\n const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n const validFiles = uploadedFilesListReference.current.filter(\n (file) => file.status && uploadInitiatedStatus.has(file.status),\n );\n return validFiles.length;\n }\n\n function areMaximumFilesUploadedAlready() {\n if (!maxFiles) {\n return false;\n }\n\n const numberOfValidFiles = getNumberOfFilesUploaded();\n return numberOfValidFiles >= maxFiles;\n }\n\n const addFiles = (selectedFiles: FileList) => {\n for (let i = 0; i < selectedFiles.length; i += 1) {\n const file = selectedFiles.item(i);\n\n const formData = new FormData();\n\n if (file) {\n const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n if (!isTypeValid(file, allowedFileTypes)) {\n handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n continue;\n }\n\n if (!isSizeValid(file, sizeLimit * 1000)) {\n const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n if (areMaximumFilesUploadedAlready()) {\n const failureMessage =\n maxFilesErrorMessage ||\n formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n const existingFile = uploadedFiles.find((f) => f.filename === file.name);\n if (existingFile) {\n removeFileFromList(existingFile);\n }\n\n formData.append(fileInputName, file);\n const pendingFile = {\n id: generateFileId(file),\n filename: file.name,\n status: Status.PENDING,\n };\n\n addFileToList(pendingFile);\n\n onUploadFile(formData)\n .then(({ id, url, error }: UploadResponse) => {\n modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n })\n .catch((error) => {\n modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n });\n\n if (!multiple) {\n break;\n }\n }\n }\n };\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n if (onFilesChange && mounted) {\n onFilesChange([...uploadedFiles]);\n }\n }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n type NextFocusable =\n | HTMLDivElement\n | UploadItemRef\n | { ref: HTMLDivElement | UploadItemRef; target: 'button' | 'link' }\n | null;\n\n const [nextFocusable, setNextFocusable] = useState<NextFocusable>(uploadInputRef.current);\n\n const handleFocus = (fileId: string | number) => {\n fileRefs = fileRefs.filter((ref) => {\n return ref && ref.id !== markedFileForDelete?.id;\n });\n\n const filesCount = fileRefs.length;\n let next: UploadItemRef | HTMLDivElement | null = uploadInputRef.current;\n let focusTarget: 'button' | 'link' = 'button';\n\n // If there will be no files left after deletion, focus the upload button\n if (filesCount === 1) {\n next = uploadInputRef.current;\n setNextFocusable(next);\n return;\n }\n\n if (filesCount > 1) {\n const currentFileIndex = fileRefs.findIndex((file) => file?.id === fileId);\n const currentFileId = fileRefs?.[currentFileIndex]?.id;\n const lastFileId = fileRefs?.[filesCount - 1]?.id;\n\n // if last file, select a previous one\n if (currentFileId === lastFileId) {\n next = fileRefs[filesCount - 2];\n } else {\n next = fileRefs[currentFileIndex + 1];\n }\n\n // If next is an UploadItemRef, check if it has a URL (succeeded)\n if (next && 'status' in next) {\n // Find the file object for this ref\n const fileObj = uploadedFiles.find((f) => f.id === next?.id);\n if (\n fileObj &&\n (fileObj.status === Status.SUCCEEDED || fileObj.status === Status.DONE) &&\n fileObj.url\n ) {\n focusTarget = 'link';\n }\n }\n setNextFocusable(() => {\n if (next && typeof (next as UploadItemRef).focus === 'function') {\n return { ref: next, target: focusTarget };\n }\n return next;\n });\n }\n };\n\n const handleRefocus = () => {\n const focusTarget = nextFocusable;\n if (lastAttemptedDeleteId) {\n setLastAttemptedDeleteId(null);\n return;\n }\n if (focusTarget) {\n // If there are no files left, focus the upload button\n if (\n uploadedFiles.length === 0 &&\n uploadInputRef.current &&\n typeof uploadInputRef.current.focus === 'function'\n ) {\n setTimeout(() => {\n uploadInputRef.current!.focus();\n }, 0);\n } else if (\n typeof focusTarget === 'object' &&\n 'ref' in focusTarget &&\n focusTarget.ref &&\n typeof focusTarget.ref.focus === 'function'\n ) {\n setTimeout(() => {\n \n if (focusTarget.ref && typeof (focusTarget.ref as UploadItemRef).focus === 'function') {\n // @ts-expect-error: focus may not exist on all possible ref types, but is safe here\n (focusTarget.ref as UploadItemRef).focus(focusTarget.target);\n }\n }, 0);\n } else if (focusTarget && typeof (focusTarget as UploadItemRef).focus === 'function') {\n setTimeout(() => {\n (focusTarget as UploadItemRef).focus();\n }, 0);\n }\n }\n };\n\n return (\n <>\n <div\n role=\"group\"\n className={clsx('np-upload-input', className, { disabled })}\n {...inputAttributes}\n >\n <div\n className=\"np-upload-input__section\"\n aria-live=\"polite\"\n aria-relevant=\"all\"\n role=\"region\"\n >\n {uploadedFiles.map((file, index) => (\n <UploadItem\n key={file.id}\n ref={(el: UploadItemRef | null) => {\n if (\n el &&\n el.id !== markedFileForDelete?.id &&\n !fileRefs.some((ref) => ref && ref.id === el.id) &&\n el.status !== 'processing'\n ) {\n fileRefs.push(el);\n }\n }}\n file={file}\n singleFileUpload={!multiple}\n canDelete={\n (!!onDeleteFile || file.status === Status.FAILED) &&\n (!file.status || !PROGRESS_STATUSES.has(file.status))\n }\n onDelete={\n file.status === Status.FAILED\n ? async () => {\n setLastAttemptedDeleteId(file.id);\n await removeFile(file);\n handleRefocus();\n }\n : () => {\n setLastAttemptedDeleteId(file.id);\n setMarkedFileForDelete(file);\n }\n }\n onDownload={onDownload}\n onFocus={() => handleFocus(file.id)}\n />\n ))}\n </div>\n {(multiple || (!multiple && !uploadedFiles.length)) && (\n <div className=\"np-upload-input__section np-upload-input__section--uploader\">\n <UploadButton\n ref={uploadInputRef}\n id={id}\n uploadButtonTitle={uploadButtonTitle}\n disabled={areMaximumFilesUploadedAlready() || disabled}\n multiple={multiple}\n fileTypes={fileTypes}\n sizeLimit={sizeLimit}\n description={description}\n maxFiles={maxFiles}\n withEntries={Boolean(uploadedFiles.length)}\n onChange={addFiles}\n />\n </div>\n )}\n </div>\n <Modal\n title={\n deleteConfirm?.title !== undefined\n ? deleteConfirm.title\n : formatMessage(MESSAGES.deleteModalTitle)\n }\n body={\n deleteConfirm?.body !== undefined\n ? deleteConfirm.body\n : formatMessage(MESSAGES.deleteModalBody)\n }\n open={!!markedFileForDelete}\n footer={\n <>\n <Button\n block\n onClick={() => {\n setMarkedFileForDelete(null);\n }}\n >\n {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n </Button>\n <Button\n block\n priority={Priority.SECONDARY}\n type={ControlType.NEGATIVE}\n tabIndex={markedFileForDelete ? 0 : -1}\n onClick={() => {\n if (markedFileForDelete) {\n void removeFile(markedFileForDelete);\n }\n setMarkedFileForDelete(null);\n setLastAttemptedDeleteId(null);\n }}\n >\n {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n </Button>\n </>\n }\n onUnmount={handleRefocus}\n onClose={() => {\n setMarkedFileForDelete(null);\n }}\n />\n </>\n );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","inputAttributes","useInputAttributes","nonLabelable","markedFileForDelete","setMarkedFileForDelete","useState","lastAttemptedDeleteId","setLastAttemptedDeleteId","mounted","setMounted","formatMessage","useIntl","uploadInputRef","useRef","fileRefs","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","updateFileList","updateFn","current","addFileToList","recentUploadedFile","list","removeFileFromList","filter","fileInList","ref","modifyFileInList","updates","map","removeFile","status","item","FAILED","Promise","resolve","error","undefined","then","catch","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","existingFile","find","f","append","pendingFile","url","useEffect","nextFocusable","setNextFocusable","handleFocus","fileId","filesCount","next","focusTarget","currentFileIndex","findIndex","currentFileId","lastFileId","fileObj","DONE","focus","target","handleRefocus","setTimeout","_jsxs","_Fragment","children","role","clsx","_jsx","index","UploadItem","el","some","push","singleFileUpload","canDelete","onDelete","onFocus","UploadButton","withEntries","Boolean","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","tabIndex","confirmText","deleteModalConfirmButtonText","onUnmount","onClose"],"mappings":"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"}
1
+ {"version":3,"file":"UploadInput.js","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport Modal from '../modal';\nimport { isSizeValid } from '../upload/utils/isSizeValid';\nimport { isTypeValid } from '../upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './uploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './uploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './uploadItem/UploadItem';\n\nexport type UploadInputProps = {\n /**\n * List of already existing, failed or in progress files\n */\n files?: readonly UploadedFile[];\n\n /**\n * The key of the file in the returned FormData object (default: file)\n */\n fileInputName?: string;\n\n /**\n * Callback that handles form submission\n *\n * @param formData\n */\n onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n /**\n * Provide a callback if the file can be removed/deleted from the server\n * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n *\n * @param id\n */\n onDeleteFile?: (id: string | number) => Promise<any>;\n\n /**\n * Provide a callback to trigger on validation error\n *\n * @param file\n */\n onValidationError?: (file: UploadedFile) => void;\n\n /**\n * Provide a callback to trigger on change whenever the files are updated\n *\n * @param files\n */\n onFilesChange?: (files: UploadedFile[]) => void;\n\n /**\n * Confirmation modal displayed on delete\n */\n deleteConfirm?: {\n /**\n * The title of the confirmation modal on delete\n */\n title?: string;\n\n /**\n * The body of the confirmation modal on delete\n */\n body?: React.ReactNode;\n\n /**\n * The confirm button text of the confirmation modal on delete\n */\n confirmText?: string;\n\n /**\n * The cancel button text of the confirmation modal on delete\n */\n cancelText?: string;\n };\n\n /**\n * Maximum number of files allowed, if provided, shows error below file item\n */\n maxFiles?: number;\n\n /**\n * Error message to show when the maximum number of files are uploaded already\n */\n maxFilesErrorMessage?: string;\n\n /**\n * Error message to show when files over a allowed size limit are uploaded\n */\n sizeLimitErrorMessage?: string;\n} & Pick<\n UploadButtonProps,\n 'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'\n> & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;\n\n/**\n * Interface representing a reference to an UploadItem component.\n * Provides a method to focus the UploadItem.\n */\ninterface UploadItemRef {\n /**\n * Focuses the UploadItem component.\n */\n focus: () => void;\n\n /**\n * Required id of the UploadItem component.\n */\n id: string | number;\n\n /**\n * Optional status of the UploadItem component.\n */\n status?: string;\n}\n\n/**\n * Generates a unique ID for a file based on its name, size, and the current timestamp\n */\nfunction generateFileId(file: File) {\n const { name, size } = file;\n const uploadTimeStamp = new Date().getTime();\n return `${name}_${size}_${uploadTimeStamp}`;\n}\n\n/**\n * The component allows users to upload files, manage the list of uploaded files,\n * and handle file validation and deletion.\n *\n * @param {UploadInputProps} props - The properties for the UploadInput component.\n *\n * @see {@link UploadInput} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}\n */\nconst UploadInput = ({\n files = [],\n fileInputName = 'file',\n className,\n deleteConfirm,\n disabled,\n multiple = false,\n fileTypes = imageFileTypes,\n sizeLimit = DEFAULT_SIZE_LIMIT,\n description,\n onUploadFile,\n onDeleteFile,\n onValidationError,\n onFilesChange,\n onDownload,\n maxFiles,\n maxFilesErrorMessage,\n id,\n sizeLimitErrorMessage,\n uploadButtonTitle,\n}: UploadInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n const [lastAttemptedDeleteId, setLastAttemptedDeleteId] = useState<string | number | null>(null);\n const [mounted, setMounted] = useState(false);\n const { formatMessage } = useIntl();\n const uploadInputRef = useRef<HTMLInputElement | null>(null);\n let fileRefs: (HTMLDivElement | UploadItemRef | null)[] = [];\n\n const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n\n const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n multiple || files.length === 0 ? files : [files[0]],\n );\n\n const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n function updateFileList(updateFn: (list: readonly UploadedFile[]) => readonly UploadedFile[]) {\n setUploadedFiles(updateFn);\n uploadedFilesListReference.current = updateFn(uploadedFilesListReference.current);\n }\n\n function addFileToList(recentUploadedFile: UploadedFile) {\n updateFileList((list) => [...list, recentUploadedFile]);\n }\n\n function removeFileFromList(file: UploadedFile) {\n updateFileList((list) =>\n list.filter((fileInList) => file !== fileInList && file.id !== fileInList.id),\n );\n fileRefs = fileRefs.filter((ref) => ref && ref.id !== file.id);\n }\n\n function modifyFileInList(file: UploadedFile, updates: Partial<UploadedFile>) {\n updateFileList((list) =>\n list.map((fileInList) =>\n fileInList === file || fileInList.id === file.id ? { ...file, ...updates } : fileInList,\n ),\n );\n }\n\n const removeFile = async (file: UploadedFile) => {\n const { id, status } = file;\n fileRefs = fileRefs.filter((item) => item && item.id !== file.id);\n\n if (status === Status.FAILED) {\n removeFileFromList(file);\n return Promise.resolve();\n }\n\n if (onDeleteFile && id) {\n modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n return onDeleteFile(id)\n .then(() => {\n removeFileFromList(file);\n })\n .catch((error) => {\n modifyFileInList(file, { error: error as UploadError });\n });\n }\n };\n\n function handleFileUploadFailure(file: File, failureMessage: string) {\n const { name } = file;\n\n const failedUpload = {\n id: generateFileId(file),\n filename: name,\n status: Status.FAILED,\n error: failureMessage,\n };\n\n addFileToList(failedUpload);\n\n if (onValidationError) {\n onValidationError(failedUpload);\n }\n }\n\n function getNumberOfFilesUploaded() {\n const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n const validFiles = uploadedFilesListReference.current.filter(\n (file) => file.status && uploadInitiatedStatus.has(file.status),\n );\n return validFiles.length;\n }\n\n function areMaximumFilesUploadedAlready() {\n if (!maxFiles) {\n return false;\n }\n\n const numberOfValidFiles = getNumberOfFilesUploaded();\n return numberOfValidFiles >= maxFiles;\n }\n\n const addFiles = (selectedFiles: FileList) => {\n for (let i = 0; i < selectedFiles.length; i += 1) {\n const file = selectedFiles.item(i);\n\n const formData = new FormData();\n\n if (file) {\n const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n if (!isTypeValid(file, allowedFileTypes)) {\n handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n continue;\n }\n\n if (!isSizeValid(file, sizeLimit * 1000)) {\n const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n if (areMaximumFilesUploadedAlready()) {\n const failureMessage =\n maxFilesErrorMessage ||\n formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n const existingFile = uploadedFiles.find((f) => f.filename === file.name);\n if (existingFile) {\n removeFileFromList(existingFile);\n }\n\n formData.append(fileInputName, file);\n const pendingFile = {\n id: generateFileId(file),\n filename: file.name,\n status: Status.PENDING,\n };\n\n addFileToList(pendingFile);\n\n onUploadFile(formData)\n .then(({ id, url, error }: UploadResponse) => {\n modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n })\n .catch((error) => {\n modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n });\n\n if (!multiple) {\n break;\n }\n }\n }\n };\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n if (onFilesChange && mounted) {\n onFilesChange([...uploadedFiles]);\n }\n }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n type NextFocusable =\n | HTMLDivElement\n | UploadItemRef\n | { ref: HTMLDivElement | UploadItemRef; target: 'button' | 'link' }\n | null;\n\n const [nextFocusable, setNextFocusable] = useState<NextFocusable>(uploadInputRef.current);\n\n const handleFocus = (fileId: string | number) => {\n fileRefs = fileRefs.filter((ref) => {\n return ref && ref.id !== markedFileForDelete?.id;\n });\n\n const filesCount = fileRefs.length;\n let next: UploadItemRef | HTMLDivElement | null = uploadInputRef.current;\n let focusTarget: 'button' | 'link' = 'button';\n\n // If there will be no files left after deletion, focus the upload button\n if (filesCount === 1) {\n next = uploadInputRef.current;\n setNextFocusable(next);\n return;\n }\n\n if (filesCount > 1) {\n const currentFileIndex = fileRefs.findIndex((file) => file?.id === fileId);\n const currentFileId = fileRefs?.[currentFileIndex]?.id;\n const lastFileId = fileRefs?.[filesCount - 1]?.id;\n\n // if last file, select a previous one\n if (currentFileId === lastFileId) {\n next = fileRefs[filesCount - 2];\n } else {\n next = fileRefs[currentFileIndex + 1];\n }\n\n // If next is an UploadItemRef, check if it has a URL (succeeded)\n if (next && 'status' in next) {\n // Find the file object for this ref\n const fileObj = uploadedFiles.find((f) => f.id === next?.id);\n if (\n fileObj &&\n (fileObj.status === Status.SUCCEEDED || fileObj.status === Status.DONE) &&\n fileObj.url\n ) {\n focusTarget = 'link';\n }\n }\n setNextFocusable(() => {\n if (next && typeof (next as UploadItemRef).focus === 'function') {\n return { ref: next, target: focusTarget };\n }\n return next;\n });\n }\n };\n\n const handleRefocus = () => {\n const focusTarget = nextFocusable;\n if (lastAttemptedDeleteId) {\n setLastAttemptedDeleteId(null);\n return;\n }\n if (focusTarget) {\n // If there are no files left, focus the upload button\n if (\n uploadedFiles.length === 0 &&\n uploadInputRef.current &&\n typeof uploadInputRef.current.focus === 'function'\n ) {\n setTimeout(() => {\n uploadInputRef.current!.focus();\n }, 0);\n } else if (\n typeof focusTarget === 'object' &&\n 'ref' in focusTarget &&\n focusTarget.ref &&\n typeof focusTarget.ref.focus === 'function'\n ) {\n setTimeout(() => {\n if (focusTarget.ref && typeof (focusTarget.ref as UploadItemRef).focus === 'function') {\n // @ts-expect-error: focus may not exist on all possible ref types, but is safe here\n (focusTarget.ref as UploadItemRef).focus(focusTarget.target);\n }\n }, 0);\n } else if (focusTarget && typeof (focusTarget as UploadItemRef).focus === 'function') {\n setTimeout(() => {\n (focusTarget as UploadItemRef).focus();\n }, 0);\n }\n }\n };\n\n return (\n <>\n <div\n role=\"group\"\n className={clsx('np-upload-input', className, { disabled })}\n {...inputAttributes}\n >\n <div\n className=\"np-upload-input__section\"\n aria-live=\"polite\"\n aria-relevant=\"all\"\n role=\"region\"\n >\n {uploadedFiles.map((file, index) => (\n <UploadItem\n key={file.id}\n ref={(el: UploadItemRef | null) => {\n if (\n el &&\n el.id !== markedFileForDelete?.id &&\n !fileRefs.some((ref) => ref && ref.id === el.id) &&\n el.status !== 'processing'\n ) {\n fileRefs.push(el);\n }\n }}\n file={file}\n singleFileUpload={!multiple}\n canDelete={\n (!!onDeleteFile || file.status === Status.FAILED) &&\n (!file.status || !PROGRESS_STATUSES.has(file.status))\n }\n onDelete={\n file.status === Status.FAILED\n ? async () => {\n setLastAttemptedDeleteId(file.id);\n await removeFile(file);\n handleRefocus();\n }\n : () => {\n setLastAttemptedDeleteId(file.id);\n setMarkedFileForDelete(file);\n }\n }\n onDownload={onDownload}\n onFocus={() => handleFocus(file.id)}\n />\n ))}\n </div>\n {(multiple || (!multiple && !uploadedFiles.length)) && (\n <div className=\"np-upload-input__section np-upload-input__section--uploader\">\n <UploadButton\n ref={uploadInputRef}\n id={id}\n uploadButtonTitle={uploadButtonTitle}\n disabled={areMaximumFilesUploadedAlready() || disabled}\n multiple={multiple}\n fileTypes={fileTypes}\n sizeLimit={sizeLimit}\n description={description}\n maxFiles={maxFiles}\n withEntries={Boolean(uploadedFiles.length)}\n onChange={addFiles}\n />\n </div>\n )}\n </div>\n <Modal\n title={\n deleteConfirm?.title !== undefined\n ? deleteConfirm.title\n : formatMessage(MESSAGES.deleteModalTitle)\n }\n body={\n deleteConfirm?.body !== undefined\n ? deleteConfirm.body\n : formatMessage(MESSAGES.deleteModalBody)\n }\n open={!!markedFileForDelete}\n footer={\n <>\n <Button\n block\n onClick={() => {\n setMarkedFileForDelete(null);\n }}\n >\n {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n </Button>\n <Button\n block\n priority={Priority.SECONDARY}\n type={ControlType.NEGATIVE}\n tabIndex={markedFileForDelete ? 0 : -1}\n onClick={() => {\n if (markedFileForDelete) {\n void removeFile(markedFileForDelete);\n }\n setMarkedFileForDelete(null);\n setLastAttemptedDeleteId(null);\n }}\n >\n {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n </Button>\n </>\n }\n onUnmount={handleRefocus}\n onClose={() => {\n setMarkedFileForDelete(null);\n }}\n />\n </>\n );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","inputAttributes","useInputAttributes","nonLabelable","markedFileForDelete","setMarkedFileForDelete","useState","lastAttemptedDeleteId","setLastAttemptedDeleteId","mounted","setMounted","formatMessage","useIntl","uploadInputRef","useRef","fileRefs","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","updateFileList","updateFn","current","addFileToList","recentUploadedFile","list","removeFileFromList","filter","fileInList","ref","modifyFileInList","updates","map","removeFile","status","item","FAILED","Promise","resolve","error","undefined","then","catch","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","existingFile","find","f","append","pendingFile","url","useEffect","nextFocusable","setNextFocusable","handleFocus","fileId","filesCount","next","focusTarget","currentFileIndex","findIndex","currentFileId","lastFileId","fileObj","DONE","focus","target","handleRefocus","setTimeout","_jsxs","_Fragment","children","role","clsx","_jsx","index","UploadItem","el","some","push","singleFileUpload","canDelete","onDelete","onFocus","UploadButton","withEntries","Boolean","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","tabIndex","confirmText","deleteModalConfirmButtonText","onUnmount","onClose"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"UploadInput.mjs","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport Modal from '../modal';\nimport { isSizeValid } from '../upload/utils/isSizeValid';\nimport { isTypeValid } from '../upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './uploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './uploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './uploadItem/UploadItem';\n\nexport type UploadInputProps = {\n /**\n * List of already existing, failed or in progress files\n */\n files?: readonly UploadedFile[];\n\n /**\n * The key of the file in the returned FormData object (default: file)\n */\n fileInputName?: string;\n\n /**\n * Callback that handles form submission\n *\n * @param formData\n */\n onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n /**\n * Provide a callback if the file can be removed/deleted from the server\n * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n *\n * @param id\n */\n onDeleteFile?: (id: string | number) => Promise<any>;\n\n /**\n * Provide a callback to trigger on validation error\n *\n * @param file\n */\n onValidationError?: (file: UploadedFile) => void;\n\n /**\n * Provide a callback to trigger on change whenever the files are updated\n *\n * @param files\n */\n onFilesChange?: (files: UploadedFile[]) => void;\n\n /**\n * Confirmation modal displayed on delete\n */\n deleteConfirm?: {\n /**\n * The title of the confirmation modal on delete\n */\n title?: string;\n\n /**\n * The body of the confirmation modal on delete\n */\n body?: React.ReactNode;\n\n /**\n * The confirm button text of the confirmation modal on delete\n */\n confirmText?: string;\n\n /**\n * The cancel button text of the confirmation modal on delete\n */\n cancelText?: string;\n };\n\n /**\n * Maximum number of files allowed, if provided, shows error below file item\n */\n maxFiles?: number;\n\n /**\n * Error message to show when the maximum number of files are uploaded already\n */\n maxFilesErrorMessage?: string;\n\n /**\n * Error message to show when files over a allowed size limit are uploaded\n */\n sizeLimitErrorMessage?: string;\n} & Pick<\n UploadButtonProps,\n 'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'\n> & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;\n\n/**\n * Interface representing a reference to an UploadItem component.\n * Provides a method to focus the UploadItem.\n */\ninterface UploadItemRef {\n /**\n * Focuses the UploadItem component.\n */\n focus: () => void;\n\n /**\n * Required id of the UploadItem component.\n */\n id: string | number;\n\n /**\n * Optional status of the UploadItem component.\n */\n status?: string;\n}\n\n/**\n * Generates a unique ID for a file based on its name, size, and the current timestamp\n */\nfunction generateFileId(file: File) {\n const { name, size } = file;\n const uploadTimeStamp = new Date().getTime();\n return `${name}_${size}_${uploadTimeStamp}`;\n}\n\n/**\n * The component allows users to upload files, manage the list of uploaded files,\n * and handle file validation and deletion.\n *\n * @param {UploadInputProps} props - The properties for the UploadInput component.\n *\n * @see {@link UploadInput} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}\n */\nconst UploadInput = ({\n files = [],\n fileInputName = 'file',\n className,\n deleteConfirm,\n disabled,\n multiple = false,\n fileTypes = imageFileTypes,\n sizeLimit = DEFAULT_SIZE_LIMIT,\n description,\n onUploadFile,\n onDeleteFile,\n onValidationError,\n onFilesChange,\n onDownload,\n maxFiles,\n maxFilesErrorMessage,\n id,\n sizeLimitErrorMessage,\n uploadButtonTitle,\n}: UploadInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n const [lastAttemptedDeleteId, setLastAttemptedDeleteId] = useState<string | number | null>(null);\n const [mounted, setMounted] = useState(false);\n const { formatMessage } = useIntl();\n const uploadInputRef = useRef<HTMLInputElement | null>(null);\n let fileRefs: (HTMLDivElement | UploadItemRef | null)[] = [];\n\n const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n\n const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n multiple || files.length === 0 ? files : [files[0]],\n );\n\n const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n function updateFileList(updateFn: (list: readonly UploadedFile[]) => readonly UploadedFile[]) {\n setUploadedFiles(updateFn);\n uploadedFilesListReference.current = updateFn(uploadedFilesListReference.current);\n }\n\n function addFileToList(recentUploadedFile: UploadedFile) {\n updateFileList((list) => [...list, recentUploadedFile]);\n }\n\n function removeFileFromList(file: UploadedFile) {\n updateFileList((list) =>\n list.filter((fileInList) => file !== fileInList && file.id !== fileInList.id),\n );\n fileRefs = fileRefs.filter((ref) => ref && ref.id !== file.id);\n }\n\n function modifyFileInList(file: UploadedFile, updates: Partial<UploadedFile>) {\n updateFileList((list) =>\n list.map((fileInList) =>\n fileInList === file || fileInList.id === file.id ? { ...file, ...updates } : fileInList,\n ),\n );\n }\n\n const removeFile = async (file: UploadedFile) => {\n const { id, status } = file;\n fileRefs = fileRefs.filter((item) => item && item.id !== file.id);\n\n if (status === Status.FAILED) {\n removeFileFromList(file);\n return Promise.resolve();\n }\n\n if (onDeleteFile && id) {\n modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n return onDeleteFile(id)\n .then(() => {\n removeFileFromList(file);\n })\n .catch((error) => {\n modifyFileInList(file, { error: error as UploadError });\n });\n }\n };\n\n function handleFileUploadFailure(file: File, failureMessage: string) {\n const { name } = file;\n\n const failedUpload = {\n id: generateFileId(file),\n filename: name,\n status: Status.FAILED,\n error: failureMessage,\n };\n\n addFileToList(failedUpload);\n\n if (onValidationError) {\n onValidationError(failedUpload);\n }\n }\n\n function getNumberOfFilesUploaded() {\n const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n const validFiles = uploadedFilesListReference.current.filter(\n (file) => file.status && uploadInitiatedStatus.has(file.status),\n );\n return validFiles.length;\n }\n\n function areMaximumFilesUploadedAlready() {\n if (!maxFiles) {\n return false;\n }\n\n const numberOfValidFiles = getNumberOfFilesUploaded();\n return numberOfValidFiles >= maxFiles;\n }\n\n const addFiles = (selectedFiles: FileList) => {\n for (let i = 0; i < selectedFiles.length; i += 1) {\n const file = selectedFiles.item(i);\n\n const formData = new FormData();\n\n if (file) {\n const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n if (!isTypeValid(file, allowedFileTypes)) {\n handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n continue;\n }\n\n if (!isSizeValid(file, sizeLimit * 1000)) {\n const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n if (areMaximumFilesUploadedAlready()) {\n const failureMessage =\n maxFilesErrorMessage ||\n formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n const existingFile = uploadedFiles.find((f) => f.filename === file.name);\n if (existingFile) {\n removeFileFromList(existingFile);\n }\n\n formData.append(fileInputName, file);\n const pendingFile = {\n id: generateFileId(file),\n filename: file.name,\n status: Status.PENDING,\n };\n\n addFileToList(pendingFile);\n\n onUploadFile(formData)\n .then(({ id, url, error }: UploadResponse) => {\n modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n })\n .catch((error) => {\n modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n });\n\n if (!multiple) {\n break;\n }\n }\n }\n };\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n if (onFilesChange && mounted) {\n onFilesChange([...uploadedFiles]);\n }\n }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n type NextFocusable =\n | HTMLDivElement\n | UploadItemRef\n | { ref: HTMLDivElement | UploadItemRef; target: 'button' | 'link' }\n | null;\n\n const [nextFocusable, setNextFocusable] = useState<NextFocusable>(uploadInputRef.current);\n\n const handleFocus = (fileId: string | number) => {\n fileRefs = fileRefs.filter((ref) => {\n return ref && ref.id !== markedFileForDelete?.id;\n });\n\n const filesCount = fileRefs.length;\n let next: UploadItemRef | HTMLDivElement | null = uploadInputRef.current;\n let focusTarget: 'button' | 'link' = 'button';\n\n // If there will be no files left after deletion, focus the upload button\n if (filesCount === 1) {\n next = uploadInputRef.current;\n setNextFocusable(next);\n return;\n }\n\n if (filesCount > 1) {\n const currentFileIndex = fileRefs.findIndex((file) => file?.id === fileId);\n const currentFileId = fileRefs?.[currentFileIndex]?.id;\n const lastFileId = fileRefs?.[filesCount - 1]?.id;\n\n // if last file, select a previous one\n if (currentFileId === lastFileId) {\n next = fileRefs[filesCount - 2];\n } else {\n next = fileRefs[currentFileIndex + 1];\n }\n\n // If next is an UploadItemRef, check if it has a URL (succeeded)\n if (next && 'status' in next) {\n // Find the file object for this ref\n const fileObj = uploadedFiles.find((f) => f.id === next?.id);\n if (\n fileObj &&\n (fileObj.status === Status.SUCCEEDED || fileObj.status === Status.DONE) &&\n fileObj.url\n ) {\n focusTarget = 'link';\n }\n }\n setNextFocusable(() => {\n if (next && typeof (next as UploadItemRef).focus === 'function') {\n return { ref: next, target: focusTarget };\n }\n return next;\n });\n }\n };\n\n const handleRefocus = () => {\n const focusTarget = nextFocusable;\n if (lastAttemptedDeleteId) {\n setLastAttemptedDeleteId(null);\n return;\n }\n if (focusTarget) {\n // If there are no files left, focus the upload button\n if (\n uploadedFiles.length === 0 &&\n uploadInputRef.current &&\n typeof uploadInputRef.current.focus === 'function'\n ) {\n setTimeout(() => {\n uploadInputRef.current!.focus();\n }, 0);\n } else if (\n typeof focusTarget === 'object' &&\n 'ref' in focusTarget &&\n focusTarget.ref &&\n typeof focusTarget.ref.focus === 'function'\n ) {\n setTimeout(() => {\n \n if (focusTarget.ref && typeof (focusTarget.ref as UploadItemRef).focus === 'function') {\n // @ts-expect-error: focus may not exist on all possible ref types, but is safe here\n (focusTarget.ref as UploadItemRef).focus(focusTarget.target);\n }\n }, 0);\n } else if (focusTarget && typeof (focusTarget as UploadItemRef).focus === 'function') {\n setTimeout(() => {\n (focusTarget as UploadItemRef).focus();\n }, 0);\n }\n }\n };\n\n return (\n <>\n <div\n role=\"group\"\n className={clsx('np-upload-input', className, { disabled })}\n {...inputAttributes}\n >\n <div\n className=\"np-upload-input__section\"\n aria-live=\"polite\"\n aria-relevant=\"all\"\n role=\"region\"\n >\n {uploadedFiles.map((file, index) => (\n <UploadItem\n key={file.id}\n ref={(el: UploadItemRef | null) => {\n if (\n el &&\n el.id !== markedFileForDelete?.id &&\n !fileRefs.some((ref) => ref && ref.id === el.id) &&\n el.status !== 'processing'\n ) {\n fileRefs.push(el);\n }\n }}\n file={file}\n singleFileUpload={!multiple}\n canDelete={\n (!!onDeleteFile || file.status === Status.FAILED) &&\n (!file.status || !PROGRESS_STATUSES.has(file.status))\n }\n onDelete={\n file.status === Status.FAILED\n ? async () => {\n setLastAttemptedDeleteId(file.id);\n await removeFile(file);\n handleRefocus();\n }\n : () => {\n setLastAttemptedDeleteId(file.id);\n setMarkedFileForDelete(file);\n }\n }\n onDownload={onDownload}\n onFocus={() => handleFocus(file.id)}\n />\n ))}\n </div>\n {(multiple || (!multiple && !uploadedFiles.length)) && (\n <div className=\"np-upload-input__section np-upload-input__section--uploader\">\n <UploadButton\n ref={uploadInputRef}\n id={id}\n uploadButtonTitle={uploadButtonTitle}\n disabled={areMaximumFilesUploadedAlready() || disabled}\n multiple={multiple}\n fileTypes={fileTypes}\n sizeLimit={sizeLimit}\n description={description}\n maxFiles={maxFiles}\n withEntries={Boolean(uploadedFiles.length)}\n onChange={addFiles}\n />\n </div>\n )}\n </div>\n <Modal\n title={\n deleteConfirm?.title !== undefined\n ? deleteConfirm.title\n : formatMessage(MESSAGES.deleteModalTitle)\n }\n body={\n deleteConfirm?.body !== undefined\n ? deleteConfirm.body\n : formatMessage(MESSAGES.deleteModalBody)\n }\n open={!!markedFileForDelete}\n footer={\n <>\n <Button\n block\n onClick={() => {\n setMarkedFileForDelete(null);\n }}\n >\n {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n </Button>\n <Button\n block\n priority={Priority.SECONDARY}\n type={ControlType.NEGATIVE}\n tabIndex={markedFileForDelete ? 0 : -1}\n onClick={() => {\n if (markedFileForDelete) {\n void removeFile(markedFileForDelete);\n }\n setMarkedFileForDelete(null);\n setLastAttemptedDeleteId(null);\n }}\n >\n {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n </Button>\n </>\n }\n onUnmount={handleRefocus}\n onClose={() => {\n setMarkedFileForDelete(null);\n }}\n />\n </>\n );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","inputAttributes","useInputAttributes","nonLabelable","markedFileForDelete","setMarkedFileForDelete","useState","lastAttemptedDeleteId","setLastAttemptedDeleteId","mounted","setMounted","formatMessage","useIntl","uploadInputRef","useRef","fileRefs","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","updateFileList","updateFn","current","addFileToList","recentUploadedFile","list","removeFileFromList","filter","fileInList","ref","modifyFileInList","updates","map","removeFile","status","item","FAILED","Promise","resolve","error","undefined","then","catch","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","existingFile","find","f","append","pendingFile","url","useEffect","nextFocusable","setNextFocusable","handleFocus","fileId","filesCount","next","focusTarget","currentFileIndex","findIndex","currentFileId","lastFileId","fileObj","DONE","focus","target","handleRefocus","setTimeout","_jsxs","_Fragment","children","role","clsx","_jsx","index","UploadItem","el","some","push","singleFileUpload","canDelete","onDelete","onFocus","UploadButton","withEntries","Boolean","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","tabIndex","confirmText","deleteModalConfirmButtonText","onUnmount","onClose"],"mappings":"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"}
1
+ {"version":3,"file":"UploadInput.mjs","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport Modal from '../modal';\nimport { isSizeValid } from '../upload/utils/isSizeValid';\nimport { isTypeValid } from '../upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './uploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './uploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './uploadItem/UploadItem';\n\nexport type UploadInputProps = {\n /**\n * List of already existing, failed or in progress files\n */\n files?: readonly UploadedFile[];\n\n /**\n * The key of the file in the returned FormData object (default: file)\n */\n fileInputName?: string;\n\n /**\n * Callback that handles form submission\n *\n * @param formData\n */\n onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n /**\n * Provide a callback if the file can be removed/deleted from the server\n * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n *\n * @param id\n */\n onDeleteFile?: (id: string | number) => Promise<any>;\n\n /**\n * Provide a callback to trigger on validation error\n *\n * @param file\n */\n onValidationError?: (file: UploadedFile) => void;\n\n /**\n * Provide a callback to trigger on change whenever the files are updated\n *\n * @param files\n */\n onFilesChange?: (files: UploadedFile[]) => void;\n\n /**\n * Confirmation modal displayed on delete\n */\n deleteConfirm?: {\n /**\n * The title of the confirmation modal on delete\n */\n title?: string;\n\n /**\n * The body of the confirmation modal on delete\n */\n body?: React.ReactNode;\n\n /**\n * The confirm button text of the confirmation modal on delete\n */\n confirmText?: string;\n\n /**\n * The cancel button text of the confirmation modal on delete\n */\n cancelText?: string;\n };\n\n /**\n * Maximum number of files allowed, if provided, shows error below file item\n */\n maxFiles?: number;\n\n /**\n * Error message to show when the maximum number of files are uploaded already\n */\n maxFilesErrorMessage?: string;\n\n /**\n * Error message to show when files over a allowed size limit are uploaded\n */\n sizeLimitErrorMessage?: string;\n} & Pick<\n UploadButtonProps,\n 'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'\n> & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;\n\n/**\n * Interface representing a reference to an UploadItem component.\n * Provides a method to focus the UploadItem.\n */\ninterface UploadItemRef {\n /**\n * Focuses the UploadItem component.\n */\n focus: () => void;\n\n /**\n * Required id of the UploadItem component.\n */\n id: string | number;\n\n /**\n * Optional status of the UploadItem component.\n */\n status?: string;\n}\n\n/**\n * Generates a unique ID for a file based on its name, size, and the current timestamp\n */\nfunction generateFileId(file: File) {\n const { name, size } = file;\n const uploadTimeStamp = new Date().getTime();\n return `${name}_${size}_${uploadTimeStamp}`;\n}\n\n/**\n * The component allows users to upload files, manage the list of uploaded files,\n * and handle file validation and deletion.\n *\n * @param {UploadInputProps} props - The properties for the UploadInput component.\n *\n * @see {@link UploadInput} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}\n */\nconst UploadInput = ({\n files = [],\n fileInputName = 'file',\n className,\n deleteConfirm,\n disabled,\n multiple = false,\n fileTypes = imageFileTypes,\n sizeLimit = DEFAULT_SIZE_LIMIT,\n description,\n onUploadFile,\n onDeleteFile,\n onValidationError,\n onFilesChange,\n onDownload,\n maxFiles,\n maxFilesErrorMessage,\n id,\n sizeLimitErrorMessage,\n uploadButtonTitle,\n}: UploadInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n const [lastAttemptedDeleteId, setLastAttemptedDeleteId] = useState<string | number | null>(null);\n const [mounted, setMounted] = useState(false);\n const { formatMessage } = useIntl();\n const uploadInputRef = useRef<HTMLInputElement | null>(null);\n let fileRefs: (HTMLDivElement | UploadItemRef | null)[] = [];\n\n const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n\n const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n multiple || files.length === 0 ? files : [files[0]],\n );\n\n const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n function updateFileList(updateFn: (list: readonly UploadedFile[]) => readonly UploadedFile[]) {\n setUploadedFiles(updateFn);\n uploadedFilesListReference.current = updateFn(uploadedFilesListReference.current);\n }\n\n function addFileToList(recentUploadedFile: UploadedFile) {\n updateFileList((list) => [...list, recentUploadedFile]);\n }\n\n function removeFileFromList(file: UploadedFile) {\n updateFileList((list) =>\n list.filter((fileInList) => file !== fileInList && file.id !== fileInList.id),\n );\n fileRefs = fileRefs.filter((ref) => ref && ref.id !== file.id);\n }\n\n function modifyFileInList(file: UploadedFile, updates: Partial<UploadedFile>) {\n updateFileList((list) =>\n list.map((fileInList) =>\n fileInList === file || fileInList.id === file.id ? { ...file, ...updates } : fileInList,\n ),\n );\n }\n\n const removeFile = async (file: UploadedFile) => {\n const { id, status } = file;\n fileRefs = fileRefs.filter((item) => item && item.id !== file.id);\n\n if (status === Status.FAILED) {\n removeFileFromList(file);\n return Promise.resolve();\n }\n\n if (onDeleteFile && id) {\n modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n return onDeleteFile(id)\n .then(() => {\n removeFileFromList(file);\n })\n .catch((error) => {\n modifyFileInList(file, { error: error as UploadError });\n });\n }\n };\n\n function handleFileUploadFailure(file: File, failureMessage: string) {\n const { name } = file;\n\n const failedUpload = {\n id: generateFileId(file),\n filename: name,\n status: Status.FAILED,\n error: failureMessage,\n };\n\n addFileToList(failedUpload);\n\n if (onValidationError) {\n onValidationError(failedUpload);\n }\n }\n\n function getNumberOfFilesUploaded() {\n const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n const validFiles = uploadedFilesListReference.current.filter(\n (file) => file.status && uploadInitiatedStatus.has(file.status),\n );\n return validFiles.length;\n }\n\n function areMaximumFilesUploadedAlready() {\n if (!maxFiles) {\n return false;\n }\n\n const numberOfValidFiles = getNumberOfFilesUploaded();\n return numberOfValidFiles >= maxFiles;\n }\n\n const addFiles = (selectedFiles: FileList) => {\n for (let i = 0; i < selectedFiles.length; i += 1) {\n const file = selectedFiles.item(i);\n\n const formData = new FormData();\n\n if (file) {\n const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n if (!isTypeValid(file, allowedFileTypes)) {\n handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n continue;\n }\n\n if (!isSizeValid(file, sizeLimit * 1000)) {\n const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n if (areMaximumFilesUploadedAlready()) {\n const failureMessage =\n maxFilesErrorMessage ||\n formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n handleFileUploadFailure(file, failureMessage);\n continue;\n }\n\n const existingFile = uploadedFiles.find((f) => f.filename === file.name);\n if (existingFile) {\n removeFileFromList(existingFile);\n }\n\n formData.append(fileInputName, file);\n const pendingFile = {\n id: generateFileId(file),\n filename: file.name,\n status: Status.PENDING,\n };\n\n addFileToList(pendingFile);\n\n onUploadFile(formData)\n .then(({ id, url, error }: UploadResponse) => {\n modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n })\n .catch((error) => {\n modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n });\n\n if (!multiple) {\n break;\n }\n }\n }\n };\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n if (onFilesChange && mounted) {\n onFilesChange([...uploadedFiles]);\n }\n }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n type NextFocusable =\n | HTMLDivElement\n | UploadItemRef\n | { ref: HTMLDivElement | UploadItemRef; target: 'button' | 'link' }\n | null;\n\n const [nextFocusable, setNextFocusable] = useState<NextFocusable>(uploadInputRef.current);\n\n const handleFocus = (fileId: string | number) => {\n fileRefs = fileRefs.filter((ref) => {\n return ref && ref.id !== markedFileForDelete?.id;\n });\n\n const filesCount = fileRefs.length;\n let next: UploadItemRef | HTMLDivElement | null = uploadInputRef.current;\n let focusTarget: 'button' | 'link' = 'button';\n\n // If there will be no files left after deletion, focus the upload button\n if (filesCount === 1) {\n next = uploadInputRef.current;\n setNextFocusable(next);\n return;\n }\n\n if (filesCount > 1) {\n const currentFileIndex = fileRefs.findIndex((file) => file?.id === fileId);\n const currentFileId = fileRefs?.[currentFileIndex]?.id;\n const lastFileId = fileRefs?.[filesCount - 1]?.id;\n\n // if last file, select a previous one\n if (currentFileId === lastFileId) {\n next = fileRefs[filesCount - 2];\n } else {\n next = fileRefs[currentFileIndex + 1];\n }\n\n // If next is an UploadItemRef, check if it has a URL (succeeded)\n if (next && 'status' in next) {\n // Find the file object for this ref\n const fileObj = uploadedFiles.find((f) => f.id === next?.id);\n if (\n fileObj &&\n (fileObj.status === Status.SUCCEEDED || fileObj.status === Status.DONE) &&\n fileObj.url\n ) {\n focusTarget = 'link';\n }\n }\n setNextFocusable(() => {\n if (next && typeof (next as UploadItemRef).focus === 'function') {\n return { ref: next, target: focusTarget };\n }\n return next;\n });\n }\n };\n\n const handleRefocus = () => {\n const focusTarget = nextFocusable;\n if (lastAttemptedDeleteId) {\n setLastAttemptedDeleteId(null);\n return;\n }\n if (focusTarget) {\n // If there are no files left, focus the upload button\n if (\n uploadedFiles.length === 0 &&\n uploadInputRef.current &&\n typeof uploadInputRef.current.focus === 'function'\n ) {\n setTimeout(() => {\n uploadInputRef.current!.focus();\n }, 0);\n } else if (\n typeof focusTarget === 'object' &&\n 'ref' in focusTarget &&\n focusTarget.ref &&\n typeof focusTarget.ref.focus === 'function'\n ) {\n setTimeout(() => {\n if (focusTarget.ref && typeof (focusTarget.ref as UploadItemRef).focus === 'function') {\n // @ts-expect-error: focus may not exist on all possible ref types, but is safe here\n (focusTarget.ref as UploadItemRef).focus(focusTarget.target);\n }\n }, 0);\n } else if (focusTarget && typeof (focusTarget as UploadItemRef).focus === 'function') {\n setTimeout(() => {\n (focusTarget as UploadItemRef).focus();\n }, 0);\n }\n }\n };\n\n return (\n <>\n <div\n role=\"group\"\n className={clsx('np-upload-input', className, { disabled })}\n {...inputAttributes}\n >\n <div\n className=\"np-upload-input__section\"\n aria-live=\"polite\"\n aria-relevant=\"all\"\n role=\"region\"\n >\n {uploadedFiles.map((file, index) => (\n <UploadItem\n key={file.id}\n ref={(el: UploadItemRef | null) => {\n if (\n el &&\n el.id !== markedFileForDelete?.id &&\n !fileRefs.some((ref) => ref && ref.id === el.id) &&\n el.status !== 'processing'\n ) {\n fileRefs.push(el);\n }\n }}\n file={file}\n singleFileUpload={!multiple}\n canDelete={\n (!!onDeleteFile || file.status === Status.FAILED) &&\n (!file.status || !PROGRESS_STATUSES.has(file.status))\n }\n onDelete={\n file.status === Status.FAILED\n ? async () => {\n setLastAttemptedDeleteId(file.id);\n await removeFile(file);\n handleRefocus();\n }\n : () => {\n setLastAttemptedDeleteId(file.id);\n setMarkedFileForDelete(file);\n }\n }\n onDownload={onDownload}\n onFocus={() => handleFocus(file.id)}\n />\n ))}\n </div>\n {(multiple || (!multiple && !uploadedFiles.length)) && (\n <div className=\"np-upload-input__section np-upload-input__section--uploader\">\n <UploadButton\n ref={uploadInputRef}\n id={id}\n uploadButtonTitle={uploadButtonTitle}\n disabled={areMaximumFilesUploadedAlready() || disabled}\n multiple={multiple}\n fileTypes={fileTypes}\n sizeLimit={sizeLimit}\n description={description}\n maxFiles={maxFiles}\n withEntries={Boolean(uploadedFiles.length)}\n onChange={addFiles}\n />\n </div>\n )}\n </div>\n <Modal\n title={\n deleteConfirm?.title !== undefined\n ? deleteConfirm.title\n : formatMessage(MESSAGES.deleteModalTitle)\n }\n body={\n deleteConfirm?.body !== undefined\n ? deleteConfirm.body\n : formatMessage(MESSAGES.deleteModalBody)\n }\n open={!!markedFileForDelete}\n footer={\n <>\n <Button\n block\n onClick={() => {\n setMarkedFileForDelete(null);\n }}\n >\n {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n </Button>\n <Button\n block\n priority={Priority.SECONDARY}\n type={ControlType.NEGATIVE}\n tabIndex={markedFileForDelete ? 0 : -1}\n onClick={() => {\n if (markedFileForDelete) {\n void removeFile(markedFileForDelete);\n }\n setMarkedFileForDelete(null);\n setLastAttemptedDeleteId(null);\n }}\n >\n {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n </Button>\n </>\n }\n onUnmount={handleRefocus}\n onClose={() => {\n setMarkedFileForDelete(null);\n }}\n />\n </>\n );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","inputAttributes","useInputAttributes","nonLabelable","markedFileForDelete","setMarkedFileForDelete","useState","lastAttemptedDeleteId","setLastAttemptedDeleteId","mounted","setMounted","formatMessage","useIntl","uploadInputRef","useRef","fileRefs","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","updateFileList","updateFn","current","addFileToList","recentUploadedFile","list","removeFileFromList","filter","fileInList","ref","modifyFileInList","updates","map","removeFile","status","item","FAILED","Promise","resolve","error","undefined","then","catch","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","existingFile","find","f","append","pendingFile","url","useEffect","nextFocusable","setNextFocusable","handleFocus","fileId","filesCount","next","focusTarget","currentFileIndex","findIndex","currentFileId","lastFileId","fileObj","DONE","focus","target","handleRefocus","setTimeout","_jsxs","_Fragment","children","role","clsx","_jsx","index","UploadItem","el","some","push","singleFileUpload","canDelete","onDelete","onFocus","UploadButton","withEntries","Boolean","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","tabIndex","confirmText","deleteModalConfirmButtonText","onUnmount","onClose"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-e74c784",
3
+ "version": "0.0.0-experimental-22400c4",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -92,9 +92,9 @@
92
92
  "rollup-preserve-directives": "^1.1.3",
93
93
  "storybook": "^8.6.14",
94
94
  "@transferwise/neptune-css": "14.24.4",
95
+ "@transferwise/less-config": "3.1.2",
95
96
  "@wise/components-theming": "1.6.3",
96
- "@wise/wds-configs": "0.0.0",
97
- "@transferwise/less-config": "3.1.2"
97
+ "@wise/wds-configs": "0.0.0"
98
98
  },
99
99
  "peerDependencies": {
100
100
  "@transferwise/icons": "^3.22.0",
@@ -1,7 +1,7 @@
1
1
  import * as useHasIntersectedUtils from '../common/hooks/useHasIntersected/useHasIntersected';
2
2
  import { render, fireEvent, screen } from '../test-utils';
3
3
 
4
- import { ImageProps } from './Image';
4
+ import { EmptyTransparentImage, ImageProps } from './Image';
5
5
 
6
6
  import Image from '.';
7
7
 
@@ -32,14 +32,14 @@ describe('Image', () => {
32
32
  });
33
33
 
34
34
  describe('when lazy loading is enabled', () => {
35
- it('renders the image with actual src even if element is not visible', () => {
35
+ it('renders the image with EmptyTransparentImage if element is not visible', () => {
36
36
  jest.spyOn(useHasIntersectedUtils, 'useHasIntersected').mockReturnValue([false]);
37
37
  render(<Image {...props} />);
38
38
 
39
39
  const image: HTMLImageElement = screen.getByRole('img');
40
40
 
41
41
  expect(image).toBeInTheDocument();
42
- expect(image.src).toStrictEqual(props.src);
42
+ expect(image.src).toStrictEqual(EmptyTransparentImage);
43
43
  });
44
44
 
45
45
  it('renders the image with src if element is visible', () => {
@@ -1,5 +1,5 @@
1
1
  import { clsx } from 'clsx';
2
- import { useRef, useCallback } from 'react';
2
+ import { useRef } from 'react';
3
3
 
4
4
  import { useHasIntersected } from '../common/hooks';
5
5
 
@@ -16,6 +16,9 @@ export interface ImageProps {
16
16
  shrink?: boolean;
17
17
  }
18
18
 
19
+ export const EmptyTransparentImage =
20
+ 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
21
+
19
22
  const Image = ({
20
23
  id,
21
24
  src,
@@ -30,21 +33,20 @@ const Image = ({
30
33
  }: ImageProps) => {
31
34
  const elementReference = useRef<HTMLImageElement>(null);
32
35
  const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });
36
+ let imageSource = src;
37
+ let imageOnLoad = onLoad;
33
38
 
34
- // Internal onLoad handler that calls user onLoad only if hasIntersected is true
35
- const handleLoad = useCallback(() => {
36
- if (hasIntersected && onLoad) {
37
- onLoad();
38
- }
39
- }, [hasIntersected, onLoad]);
39
+ if (loading === 'lazy' && !hasIntersected) {
40
+ imageSource = EmptyTransparentImage;
41
+ imageOnLoad = undefined;
42
+ }
40
43
 
41
44
  return (
42
45
  <img
43
46
  ref={elementReference}
44
47
  id={id}
45
48
  alt={alt}
46
- src={src}
47
- loading={loading}
49
+ src={imageSource}
48
50
  className={clsx([
49
51
  'tw-image',
50
52
  {
@@ -54,7 +56,7 @@ const Image = ({
54
56
  className,
55
57
  ])}
56
58
  role={role}
57
- onLoad={handleLoad}
59
+ onLoad={imageOnLoad}
58
60
  onError={onError}
59
61
  />
60
62
  );
@@ -1,8 +1,7 @@
1
1
  .wds-list-item {
2
2
  list-style: none;
3
3
  width: 100%;
4
- padding: 16px;
5
- padding: var(--size-16);
4
+ padding: 0;
6
5
  border-radius: 16px;
7
6
  border-radius: var(--radius-medium);
8
7
  background-color: #ffffff;
@@ -10,15 +9,31 @@
10
9
  gap: 16px;
11
10
  gap: var(--size-16);
12
11
  }
13
- .wds-list-item-interactive {
12
+ .wds-list-item .partially-interactive {
13
+ padding: 16px;
14
+ padding: var(--size-16);
15
+ }
16
+ .wds-list-item label {
17
+ padding: 16px;
18
+ padding: var(--size-16);
19
+ }
20
+ .wds-list-item-interactive label {
14
21
  cursor: pointer;
15
22
  }
16
23
  .wds-list-item-interactive:hover {
17
24
  background-color: var(--color-background-screen-hover);
18
25
  }
26
+ .wds-list-item-interactive:hover .wds-list-item-control .wds-Button {
27
+ background-color: var(--Button-background-hover);
28
+ color: var(--Button-color-hover);
29
+ transition: none;
30
+ }
19
31
  .wds-list-item-interactive:active {
20
32
  background-color: var(--color-background-screen-active);
21
33
  }
34
+ .wds-list-item-interactive .wds-list-item-control .wds-Button {
35
+ transition: none;
36
+ }
22
37
  .wds-list-item-media-image {
23
38
  width: var(--item-media-image-size);
24
39
  height: var(--item-media-image-size);
@@ -1,19 +1,41 @@
1
1
  .wds-list-item {
2
2
  list-style: none;
3
3
  width: 100%;
4
- padding: var(--size-16);
4
+ padding: 0;
5
5
  border-radius: var(--radius-medium);
6
6
  background-color: var(--color-background-screen);
7
7
  gap: var(--size-16);
8
8
 
9
+ .partially-interactive {
10
+ padding: var(--size-16);
11
+ }
12
+
13
+ label {
14
+ padding: var(--size-16);
15
+ }
16
+
9
17
  &-interactive {
10
- cursor: pointer;
18
+ label {
19
+ cursor: pointer;
20
+ }
11
21
  &:hover {
12
22
  background-color: var(--color-background-screen-hover);
23
+ .wds-list-item-control {
24
+ .wds-Button {
25
+ background-color: var(--Button-background-hover);
26
+ color: var(--Button-color-hover);
27
+ transition: none;
28
+ }
29
+ }
13
30
  }
14
31
  &:active {
15
32
  background-color: var(--color-background-screen-active);
16
33
  }
34
+ .wds-list-item-control {
35
+ .wds-Button {
36
+ transition: none;
37
+ }
38
+ }
17
39
  }
18
40
 
19
41
  &-media {
@@ -402,4 +402,40 @@ export const NonInteractive: Story = {
402
402
  ),
403
403
  };
404
404
 
405
+ export const ButtonInteractivity: Story = {
406
+ render: () => {
407
+ const [clicked, setClicked] = useState(0);
408
+
409
+ return (
410
+ <>
411
+ <label>Count: {clicked}</label>
412
+ <ListItem
413
+ title="Fully interactive"
414
+ subtitle={lorem10}
415
+ additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
416
+ control={
417
+ <ListItem.Button priority="secondary-neutral" onClick={() => setClicked(clicked + 1)}>
418
+ as Button
419
+ </ListItem.Button>
420
+ }
421
+ />
422
+ <ListItem
423
+ title="Partially interactive"
424
+ subtitle={lorem10}
425
+ additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
426
+ control={
427
+ <ListItem.Button
428
+ priority="secondary-neutral"
429
+ partiallyInteractive
430
+ onClick={() => setClicked(clicked + 1)}
431
+ >
432
+ as Button
433
+ </ListItem.Button>
434
+ }
435
+ />
436
+ </>
437
+ );
438
+ },
439
+ };
440
+
405
441
  // add intaces with dark mode
@@ -14,7 +14,7 @@ import { IconButton } from './ListItemIconButton';
14
14
  import { Checkbox, ListItemCheckboxProps } from './ListItemCheckbox';
15
15
  import { ListItemNavigationProps, Navigation } from './ListItemNavigation';
16
16
  import { clsx } from 'clsx';
17
- import { Button } from './ListItemButton';
17
+ import { Button, ListItemButtonProps } from './ListItemButton';
18
18
  import { Switch } from './ListItemSwitch';
19
19
  import { AvatarLayout, AvatarView, Image } from './ListItemMedia';
20
20
  import Prompt from './prompt/Prompt';
@@ -33,7 +33,8 @@ export type ListItemTypes =
33
33
  export type ListItemControlProps =
34
34
  | ListItemNavigationProps
35
35
  // TODO: add more types for control props here;
36
- | ListItemCheckboxProps;
36
+ | ListItemCheckboxProps
37
+ | ListItemButtonProps;
37
38
 
38
39
  export type Props = {
39
40
  as?: 'li' | 'div' | 'span';
@@ -129,7 +130,11 @@ export const ListItem = ({
129
130
  <ListItemElement
130
131
  className={clsx(
131
132
  'wds-list-item',
132
- { 'wds-list-item-interactive': controlType !== 'non-interactive' },
133
+ {
134
+ 'wds-list-item-interactive':
135
+ controlType !== 'non-interactive' &&
136
+ !(controlProps as ListItemButtonProps)?.partiallyInteractive,
137
+ },
133
138
  `wds-list-item-${controlType}`,
134
139
  {
135
140
  [`wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
@@ -197,25 +202,49 @@ type ViewProps = PropsWithChildren<{
197
202
 
198
203
  function View({ children, prompt, controlType = 'non-interactive', controlProps }: ViewProps) {
199
204
  const isLinkControl = ['navigation' /* TODO: add other link controls */].includes(controlType);
205
+ const isPartiallyInteractive =
206
+ (controlType === 'button' || controlType === 'icon-button') &&
207
+ !!(controlProps && (controlProps as ListItemButtonProps).partiallyInteractive);
200
208
  const isHrefProvided = isLinkControl
201
209
  ? (controlProps as ListItemNavigationProps)?.href !== '#'
202
210
  : false;
203
- return isLinkControl && isHrefProvided ? (
204
- // for link instances of .Navigation, .IconButton, .Button
205
- <>
206
- <PrimitiveAnchor
207
- href={(controlProps as ListItemNavigationProps)?.href}
208
- target={(controlProps as ListItemNavigationProps)?.target}
209
- className={clsx(
210
- 'd-flex flex-row',
211
- // { 'align-items-center': !subtitle }
212
- )}
213
- >
214
- {children}
215
- </PrimitiveAnchor>
216
- {prompt}
217
- </>
218
- ) : (
211
+
212
+ if (isLinkControl && isHrefProvided) {
213
+ return (
214
+ // for link instances of .Navigation, .IconButton, .Button
215
+ <>
216
+ <PrimitiveAnchor
217
+ href={(controlProps as ListItemNavigationProps)?.href}
218
+ target={(controlProps as ListItemNavigationProps)?.target}
219
+ className={clsx(
220
+ 'd-flex flex-row',
221
+ // { 'align-items-center': !subtitle }
222
+ )}
223
+ >
224
+ {children}
225
+ </PrimitiveAnchor>
226
+ {prompt}
227
+ </>
228
+ );
229
+ }
230
+
231
+ if (isPartiallyInteractive) {
232
+ return (
233
+ <>
234
+ <div
235
+ className={clsx(
236
+ 'd-flex flex-row partially-interactive',
237
+ // { 'align-items-center': !subtitle }
238
+ )}
239
+ >
240
+ {children}
241
+ </div>
242
+ {prompt}
243
+ </>
244
+ );
245
+ }
246
+
247
+ return (
219
248
  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc
220
249
  <fieldset>
221
250
  <label
@@ -1,10 +1,16 @@
1
1
  import { default as ButtonComp, NewButtonProps } from '../button';
2
2
  import { useItemControl } from './useItemControl';
3
3
 
4
- export type ListItemButtonProps = Omit<NewButtonProps, 'v2' | 'size' | 'disabled'>;
4
+ export type ListItemButtonProps = Omit<NewButtonProps, 'v2' | 'size' | 'disabled'> & {
5
+ partiallyInteractive?: boolean;
6
+ };
5
7
 
6
- export const Button = ({ priority = 'secondary', ...props }: ListItemButtonProps) => {
7
- const { baseItemProps } = useItemControl('button');
8
+ export const Button = ({
9
+ priority = 'secondary',
10
+ partiallyInteractive,
11
+ ...props
12
+ }: ListItemButtonProps) => {
13
+ const { baseItemProps } = useItemControl('button', { partiallyInteractive, ...props });
8
14
 
9
15
  const commonProps = {
10
16
  ...props,
package/src/main.css CHANGED
@@ -2665,8 +2665,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2665
2665
  .wds-list-item {
2666
2666
  list-style: none;
2667
2667
  width: 100%;
2668
- padding: 16px;
2669
- padding: var(--size-16);
2668
+ padding: 0;
2670
2669
  border-radius: 16px;
2671
2670
  border-radius: var(--radius-medium);
2672
2671
  background-color: #ffffff;
@@ -2674,15 +2673,31 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2674
2673
  gap: 16px;
2675
2674
  gap: var(--size-16);
2676
2675
  }
2677
- .wds-list-item-interactive {
2676
+ .wds-list-item .partially-interactive {
2677
+ padding: 16px;
2678
+ padding: var(--size-16);
2679
+ }
2680
+ .wds-list-item label {
2681
+ padding: 16px;
2682
+ padding: var(--size-16);
2683
+ }
2684
+ .wds-list-item-interactive label {
2678
2685
  cursor: pointer;
2679
2686
  }
2680
2687
  .wds-list-item-interactive:hover {
2681
2688
  background-color: var(--color-background-screen-hover);
2682
2689
  }
2690
+ .wds-list-item-interactive:hover .wds-list-item-control .wds-Button {
2691
+ background-color: var(--Button-background-hover);
2692
+ color: var(--Button-color-hover);
2693
+ transition: none;
2694
+ }
2683
2695
  .wds-list-item-interactive:active {
2684
2696
  background-color: var(--color-background-screen-active);
2685
2697
  }
2698
+ .wds-list-item-interactive .wds-list-item-control .wds-Button {
2699
+ transition: none;
2700
+ }
2686
2701
  .wds-list-item-media-image {
2687
2702
  width: var(--item-media-image-size);
2688
2703
  height: var(--item-media-image-size);
@@ -23,7 +23,6 @@ exports[`PromoCard matches snapshot 1`] = `
23
23
  <img
24
24
  alt="Test Image"
25
25
  class="tw-image tw-image__stretch tw-image__shrink"
26
- loading="lazy"
27
26
  src="test.jpg"
28
27
  />
29
28
  </div>
@@ -33,7 +33,6 @@ exports[`PromoCardGroup matches snapshot 1`] = `
33
33
  <img
34
34
  alt=""
35
35
  class="tw-image tw-image__stretch tw-image__shrink"
36
- loading="lazy"
37
36
  src="https://via.placeholder.com/150"
38
37
  />
39
38
  </div>
@@ -68,7 +67,6 @@ exports[`PromoCardGroup matches snapshot 1`] = `
68
67
  <img
69
68
  alt=""
70
69
  class="tw-image tw-image__stretch tw-image__shrink"
71
- loading="lazy"
72
70
  src="https://via.placeholder.com/150"
73
71
  />
74
72
  </div>
@@ -402,7 +402,6 @@ const UploadInput = ({
402
402
  typeof focusTarget.ref.focus === 'function'
403
403
  ) {
404
404
  setTimeout(() => {
405
-
406
405
  if (focusTarget.ref && typeof (focusTarget.ref as UploadItemRef).focus === 'function') {
407
406
  // @ts-expect-error: focus may not exist on all possible ref types, but is safe here
408
407
  (focusTarget.ref as UploadItemRef).focus(focusTarget.target);