@phillips/seldon 1.100.1 → 1.100.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/SeldonImage/SeldonImage.d.ts +9 -1
  2. package/dist/components/SeldonImage/SeldonImage.js +78 -72
  3. package/dist/components/SeldonImage/SeldonImage.stories.d.ts +6 -6
  4. package/dist/node_modules/exenv/index.js +1 -1
  5. package/dist/node_modules/prop-types/node_modules/react-is/index.js +1 -1
  6. package/package.json +1 -1
package/dist/components/SeldonImage/SeldonImage.d.ts CHANGED
@@ -17,6 +17,14 @@ export interface SeldonImageProps extends ComponentProps<'div'> {
17
17
  * The image to display.
18
18
  */
19
19
  src: string;
20
+ /**
21
+ * The srcset of the image [https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset]
22
+ */
23
+ srcSet?: string;
24
+ /**
25
+ * The sizes of the image [https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes]
26
+ */
27
+ sizes?: string;
20
28
  /**
21
29
  * The alt text of the image.
22
30
  */
@@ -43,5 +51,5 @@ export interface SeldonImageProps extends ComponentProps<'div'> {
43
51
  *
44
52
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-seldonimage--overview)
45
53
  */
46
- declare const SeldonImage: import('react').ForwardRefExoticComponent<Omit<SeldonImageProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
54
+ declare const SeldonImage: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<SeldonImageProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>>;
47
55
  export default SeldonImage;
package/dist/components/SeldonImage/SeldonImage.js CHANGED
@@ -1,82 +1,88 @@
1
- import { jsxs as h, jsx as l } from "react/jsx-runtime";
2
- import { forwardRef as I, useRef as v, useState as y, useCallback as E, useEffect as P } from "react";
1
+ import { jsxs as v, jsx as l } from "react/jsx-runtime";
2
+ import { memo as y, forwardRef as E, useRef as P, useState as w, useCallback as x, useEffect as C } from "react";
3
3
  import d from "../../node_modules/classnames/index.js";
4
- import { getCommonProps as w } from "../../utils/index.js";
5
- import x from "../../assets/PhillipsLogo.svg.js";
6
- function C(s) {
4
+ import { getCommonProps as L } from "../../utils/index.js";
5
+ import j from "../../assets/PhillipsLogo.svg.js";
6
+ function k(s) {
7
7
  return new Promise((a) => {
8
8
  const r = document.createElement("img");
9
9
  r.onerror = () => a(!1), r.onload = () => a(!0), r.src = s;
10
10
  });
11
11
  }
12
- const L = I(
13
- ({
14
- className: s,
15
- aspectRatio: m = "none",
16
- objectFit: a = "none",
17
- hasBlurBackground: r = !1,
18
- imageClassName: u,
19
- imageStyle: $,
20
- src: n,
21
- alt: t,
22
- errorText: p = "Error loading image",
23
- ...g
24
- }, b) => {
25
- const { className: e, ...c } = w(g, "SeldonImage"), N = v(null), [o, i] = y("loading"), f = E(async () => {
26
- const S = await C(n);
27
- i(S ? "loaded" : "error");
28
- }, [n]);
29
- return P(() => {
30
- f();
31
- }, [f]), /* @__PURE__ */ h(
32
- "div",
33
- {
34
- ref: b,
35
- className: d(e, s, {
36
- [`${e}--hidden`]: o === "loading" || o === "error",
37
- [`${e}--aspect-ratio-${m.replace("/", "-")}`]: m !== "none"
38
- }),
39
- role: "img",
40
- "aria-label": t,
41
- ...g,
42
- ...c,
43
- children: [
44
- r && /* @__PURE__ */ l(
45
- "div",
46
- {
47
- className: d(`${e}-blur`, {
48
- [`${e}-blur--hidden`]: o === "loading" || o === "error"
49
- }),
50
- style: { backgroundImage: `url(${n})` }
51
- }
52
- ),
53
- o === "error" ? /* @__PURE__ */ l("div", { className: `${e}--error`, children: /* @__PURE__ */ l(x, { "aria-label": p }) }) : null,
54
- /* @__PURE__ */ l(
55
- "img",
56
- {
57
- className: d(`${e}-img`, u, {
58
- [`${e}-img--hidden`]: o !== "loaded",
59
- [`${e}-img--object-fit-${a}`]: a !== "none"
60
- }),
61
- style: $,
62
- src: n,
63
- alt: t,
64
- "data-testid": `${c["data-testid"]}-img`,
65
- ref: N,
66
- onLoad: () => {
67
- i("loaded");
68
- },
69
- onError: () => {
70
- i("error");
12
+ const R = y(
13
+ E(
14
+ ({
15
+ className: s,
16
+ aspectRatio: m = "none",
17
+ objectFit: a = "none",
18
+ hasBlurBackground: r = !1,
19
+ imageClassName: u,
20
+ imageStyle: $,
21
+ src: n,
22
+ alt: t,
23
+ srcSet: p,
24
+ sizes: b,
25
+ errorText: N = "Error loading image",
26
+ ...g
27
+ }, S) => {
28
+ const { className: e, ...c } = L(g, "SeldonImage"), h = P(null), [o, i] = w("loading"), f = x(async () => {
29
+ const I = await k(n);
30
+ i(I ? "loaded" : "error");
31
+ }, [n]);
32
+ return C(() => {
33
+ f();
34
+ }, [f]), /* @__PURE__ */ v(
35
+ "div",
36
+ {
37
+ ref: S,
38
+ className: d(e, s, {
39
+ [`${e}--hidden`]: o === "loading" || o === "error",
40
+ [`${e}--aspect-ratio-${m.replace("/", "-")}`]: m !== "none"
41
+ }),
42
+ role: "img",
43
+ "aria-label": t,
44
+ ...g,
45
+ ...c,
46
+ children: [
47
+ r && /* @__PURE__ */ l(
48
+ "div",
49
+ {
50
+ className: d(`${e}-blur`, {
51
+ [`${e}-blur--hidden`]: o === "loading" || o === "error"
52
+ }),
53
+ style: { backgroundImage: `url(${n})` }
71
54
  }
72
- }
73
- )
74
- ]
75
- }
76
- );
77
- }
55
+ ),
56
+ o === "error" ? /* @__PURE__ */ l("div", { className: `${e}--error`, children: /* @__PURE__ */ l(j, { "aria-label": N }) }) : null,
57
+ /* @__PURE__ */ l(
58
+ "img",
59
+ {
60
+ className: d(`${e}-img`, u, {
61
+ [`${e}-img--hidden`]: o !== "loaded",
62
+ [`${e}-img--object-fit-${a}`]: a !== "none"
63
+ }),
64
+ style: $,
65
+ src: n,
66
+ srcSet: p,
67
+ sizes: b,
68
+ alt: t,
69
+ "data-testid": `${c["data-testid"]}-img`,
70
+ ref: h,
71
+ onLoad: () => {
72
+ i("loaded");
73
+ },
74
+ onError: () => {
75
+ i("error");
76
+ }
77
+ }
78
+ )
79
+ ]
80
+ }
81
+ );
82
+ }
83
+ )
78
84
  );
79
- L.displayName = "SeldonImage";
85
+ R.displayName = "SeldonImage";
80
86
  export {
81
- L as default
87
+ R as default
82
88
  };
package/dist/components/SeldonImage/SeldonImage.stories.d.ts CHANGED
@@ -1,11 +1,11 @@
1
- import { SeldonImageProps } from './SeldonImage';
1
+ import { default as SeldonImage } from './SeldonImage';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: import('react').ForwardRefExoticComponent<Omit<SeldonImageProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
4
+ component: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<import('./SeldonImage').SeldonImageProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>>;
5
5
  };
6
6
  export default meta;
7
7
  export declare const Playground: {
8
- (props: SeldonImageProps): import("react/jsx-runtime").JSX.Element;
8
+ (props: React.ComponentProps<typeof SeldonImage>): import("react/jsx-runtime").JSX.Element;
9
9
  args: {
10
10
  src: string;
11
11
  aspectRatio: string;
@@ -13,7 +13,7 @@ export declare const Playground: {
13
13
  argTypes: {};
14
14
  };
15
15
  export declare const CircleImage: {
16
- (props: SeldonImageProps): import("react/jsx-runtime").JSX.Element;
16
+ (props: React.ComponentProps<typeof SeldonImage>): import("react/jsx-runtime").JSX.Element;
17
17
  args: {
18
18
  src: string;
19
19
  aspectRatio: string;
@@ -25,7 +25,7 @@ export declare const CircleImage: {
25
25
  argTypes: {};
26
26
  };
27
27
  export declare const BlurBackground: {
28
- (props: SeldonImageProps): import("react/jsx-runtime").JSX.Element;
28
+ (props: React.ComponentProps<typeof SeldonImage>): import("react/jsx-runtime").JSX.Element;
29
29
  args: {
30
30
  src: string;
31
31
  aspectRatio: string;
@@ -35,7 +35,7 @@ export declare const BlurBackground: {
35
35
  argTypes: {};
36
36
  };
37
37
  export declare const BrokenImage: {
38
- (props: SeldonImageProps): import("react/jsx-runtime").JSX.Element;
38
+ (props: React.ComponentProps<typeof SeldonImage>): import("react/jsx-runtime").JSX.Element;
39
39
  args: {
40
40
  src: string;
41
41
  aspectRatio: string;
package/dist/node_modules/exenv/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { __module as t } from "../../_virtual/index6.js";
1
+ import { __module as t } from "../../_virtual/index5.js";
2
2
  /*!
3
3
  Copyright (c) 2015 Jed Watson.
4
4
  Based on code that is Copyright 2013-2015, Facebook, Inc.
package/dist/node_modules/prop-types/node_modules/react-is/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { __module as e } from "../../../../_virtual/index5.js";
1
+ import { __module as e } from "../../../../_virtual/index6.js";
2
2
  import { __require as o } from "./cjs/react-is.production.min.js";
3
3
  import { __require as t } from "./cjs/react-is.development.js";
4
4
  var r;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phillips/seldon",
3
- "version": "1.100.1",
3
+ "version": "1.100.2",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/PhillipsAuctionHouse/seldon"