@sps-woodland/photo 8.34.13 → 8.34.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import * as e from "react";
2
- import { Metadata as B, cl as u, Icon as L, selectChildren as M } from "@sps-woodland/core";
2
+ import { Metadata as F, cl as u, Icon as W, selectChildren as A } from "@sps-woodland/core";
3
3
  import { grid as f } from "@sps-woodland/tokens";
4
- import { SpsButton as N } from "@spscommerce/ds-react";
5
- import { SpsIcon as b, ButtonKind as I } from "@spscommerce/ds-shared";
4
+ import { SpsButton as w } from "@spscommerce/ds-react";
5
+ import { SpsIcon as C, ButtonKind as P } from "@spscommerce/ds-shared";
6
6
  import { code as m } from "@spscommerce/utils";
7
- function z(o, a, r) {
7
+ function B(o, a, r) {
8
8
  return a in o ? Object.defineProperty(o, a, {
9
9
  value: r,
10
10
  enumerable: !0,
@@ -12,7 +12,7 @@ function z(o, a, r) {
12
12
  writable: !0
13
13
  }) : o[a] = r, o;
14
14
  }
15
- function E(o, a) {
15
+ function N(o, a) {
16
16
  var r = Object.keys(o);
17
17
  if (Object.getOwnPropertySymbols) {
18
18
  var t = Object.getOwnPropertySymbols(o);
@@ -22,18 +22,18 @@ function E(o, a) {
22
22
  }
23
23
  return r;
24
24
  }
25
- function y(o) {
25
+ function b(o) {
26
26
  for (var a = 1; a < arguments.length; a++) {
27
27
  var r = arguments[a] != null ? arguments[a] : {};
28
- a % 2 ? E(Object(r), !0).forEach(function(t) {
29
- z(o, t, r[t]);
30
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(o, Object.getOwnPropertyDescriptors(r)) : E(Object(r)).forEach(function(t) {
28
+ a % 2 ? N(Object(r), !0).forEach(function(t) {
29
+ B(o, t, r[t]);
30
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(o, Object.getOwnPropertyDescriptors(r)) : N(Object(r)).forEach(function(t) {
31
31
  Object.defineProperty(o, t, Object.getOwnPropertyDescriptor(r, t));
32
32
  });
33
33
  }
34
34
  return o;
35
35
  }
36
- var T = (o, a, r) => {
36
+ var L = (o, a, r) => {
37
37
  for (var t of Object.keys(o)) {
38
38
  var s;
39
39
  if (o[t] !== ((s = a[t]) !== null && s !== void 0 ? s : r[t]))
@@ -41,7 +41,7 @@ var T = (o, a, r) => {
41
41
  }
42
42
  return !0;
43
43
  }, g = (o) => (a) => {
44
- var r = o.defaultClassName, t = y(y({}, o.defaultVariants), a);
44
+ var r = o.defaultClassName, t = b(b({}, o.defaultVariants), a);
45
45
  for (var s in t) {
46
46
  var d, p = (d = t[s]) !== null && d !== void 0 ? d : o.defaultVariants[s];
47
47
  if (p != null) {
@@ -55,9 +55,9 @@ var T = (o, a, r) => {
55
55
  }
56
56
  }
57
57
  for (var [l, c] of o.compoundVariants)
58
- T(l, t, o.defaultVariants) && (r += " " + c);
58
+ L(l, t, o.defaultVariants) && (r += " " + c);
59
59
  return r;
60
- }, D = g({ defaultClassName: "pkg_sps-woodland_photo__version_8_34_13__hash_dons240", variantClassNames: { placeholder: { true: "pkg_sps-woodland_photo__version_8_34_13__hash_dons241", false: "pkg_sps-woodland_photo__version_8_34_13__hash_dons242" } }, defaultVariants: { placeholder: !1 }, compoundVariants: [] }), G = g({ defaultClassName: "pkg_sps-woodland_photo__version_8_34_13__hash_dons243", variantClassNames: { mode: { fill: "pkg_sps-woodland_photo__version_8_34_13__hash_dons244", fit: "pkg_sps-woodland_photo__version_8_34_13__hash_dons245" } }, defaultVariants: { mode: "fill" }, compoundVariants: [] }), H = "pkg_sps-woodland_photo__version_8_34_13__hash_dons246";
60
+ }, M = g({ defaultClassName: "pkg_sps-woodland_photo__version_8_34_14__hash_dons240", variantClassNames: { placeholder: { true: "pkg_sps-woodland_photo__version_8_34_14__hash_dons241", false: "pkg_sps-woodland_photo__version_8_34_14__hash_dons242" } }, defaultVariants: { placeholder: !1 }, compoundVariants: [] }), z = g({ defaultClassName: "pkg_sps-woodland_photo__version_8_34_14__hash_dons243", variantClassNames: { mode: { fill: "pkg_sps-woodland_photo__version_8_34_14__hash_dons244", fit: "pkg_sps-woodland_photo__version_8_34_14__hash_dons245" } }, defaultVariants: { mode: "fill" }, compoundVariants: [] }), T = "pkg_sps-woodland_photo__version_8_34_14__hash_dons246";
61
61
  function v({
62
62
  className: o,
63
63
  src: a,
@@ -66,7 +66,7 @@ function v({
66
66
  placeholderIcon: s = "photo",
67
67
  ...d
68
68
  }) {
69
- const p = e.useRef(null), n = e.useRef(null), i = e.useRef(null), l = e.useRef(null), [c, j] = e.useState(), [S, k] = e.useState(!1);
69
+ const p = e.useRef(null), n = e.useRef(null), i = e.useRef(null), l = e.useRef(null), [c, O] = e.useState(), [x, R] = e.useState(!1);
70
70
  e.useEffect(() => {
71
71
  n.current && (i.current && (window.clearInterval(i.current), i.current = null), i.current = window.setInterval(() => {
72
72
  if (n.current) {
@@ -74,7 +74,7 @@ function v({
74
74
  if (h.height) {
75
75
  i.current && (window.clearInterval(i.current), i.current = null);
76
76
  let _ = h.width / h.height > 1;
77
- k(_ === (t === "fit"));
77
+ R(_ === (t === "fit"));
78
78
  }
79
79
  }
80
80
  }, 1e3 / 60));
@@ -82,22 +82,21 @@ function v({
82
82
  l.current && (window.clearInterval(l.current), l.current = null), l.current = window.setInterval(() => {
83
83
  if (p.current) {
84
84
  const h = p.current.getBoundingClientRect();
85
- h.width && (V(h.width), l.current && (window.clearInterval(l.current), l.current = null));
85
+ h.width && (j(h.width), l.current && (window.clearInterval(l.current), l.current = null));
86
86
  }
87
87
  }, 1e3 / 60);
88
88
  }, [p.current]);
89
- function V(h) {
90
- var _, w, C;
89
+ function j(h) {
91
90
  if (h) {
92
- const P = ((C = (w = (_ = document == null ? void 0 : document.body) == null ? void 0 : _.parentElement) == null ? void 0 : w.style) == null ? void 0 : C.fontSize) || "16px", A = Number(P.substring(0, P.length - 2));
93
- j(h / A);
91
+ const _ = document?.body?.parentElement?.style?.fontSize || "16px", V = Number(_.substring(0, _.length - 2));
92
+ O(h / V);
94
93
  }
95
94
  }
96
- function F() {
95
+ function S() {
97
96
  if (typeof c < "u")
98
97
  return c * 0.05;
99
98
  }
100
- function W() {
99
+ function k() {
101
100
  if (typeof c < "u")
102
101
  return 0.75 * c;
103
102
  }
@@ -105,26 +104,26 @@ function v({
105
104
  "div",
106
105
  {
107
106
  ref: p,
108
- className: u(D({ placeholder: !a }), o),
107
+ className: u(M({ placeholder: !a }), o),
109
108
  style: {
110
109
  width: `${c}` && `${c}rem`,
111
- fontSize: `${F()}rem`,
112
- height: `${W()}rem`
110
+ fontSize: `${S()}rem`,
111
+ height: `${k()}rem`
113
112
  },
114
113
  ...d
115
114
  },
116
115
  a ? c ? /* @__PURE__ */ e.createElement(
117
116
  "img",
118
117
  {
119
- className: G({ mode: S ? "fit" : "fill" }),
118
+ className: z({ mode: x ? "fit" : "fill" }),
120
119
  ref: n,
121
120
  src: a,
122
121
  alt: r
123
122
  }
124
- ) : /* @__PURE__ */ e.createElement("span", null) : /* @__PURE__ */ e.createElement(L, { className: H, icon: s })
123
+ ) : /* @__PURE__ */ e.createElement("span", null) : /* @__PURE__ */ e.createElement(W, { className: T, icon: s })
125
124
  );
126
125
  }
127
- B.set(v, {
126
+ F.set(v, {
128
127
  name: "Photo",
129
128
  props: {
130
129
  src: "string",
@@ -136,47 +135,47 @@ B.set(v, {
136
135
  placeholderIcon: "IconName"
137
136
  }
138
137
  });
139
- var O = "pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s0", x = "pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s1", K = "pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s2", U = "pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s3", q = g({ defaultClassName: "pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s4", variantClassNames: { selected: { true: "pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s5", false: "pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s6" } }, defaultVariants: { selected: !1 }, compoundVariants: [] });
140
- function R({
138
+ var I = "pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s0", E = "pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s1", D = "pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s2", G = "pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s3", H = g({ defaultClassName: "pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s4", variantClassNames: { selected: { true: "pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s5", false: "pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s6" } }, defaultVariants: { selected: !1 }, compoundVariants: [] });
139
+ function y({
141
140
  children: o,
142
141
  className: a,
143
142
  ...r
144
143
  }) {
145
- const [t] = M(o, [{ type: v }]), [s, d] = e.useState(0);
144
+ const [t] = A(o, [{ type: v }]), [s, d] = e.useState(0);
146
145
  function p() {
147
146
  s + 1 === t.length ? d(0) : d(s + 1);
148
147
  }
149
148
  function n() {
150
149
  d(s === 0 ? t.length - 1 : s - 1);
151
150
  }
152
- return /* @__PURE__ */ e.createElement("div", { className: f.root, ...r }, /* @__PURE__ */ e.createElement("div", { className: u(O) }, /* @__PURE__ */ e.createElement("div", { className: u(x) }, /* @__PURE__ */ e.createElement(
153
- N,
151
+ return /* @__PURE__ */ e.createElement("div", { className: f.root, ...r }, /* @__PURE__ */ e.createElement("div", { className: u(I) }, /* @__PURE__ */ e.createElement("div", { className: u(E) }, /* @__PURE__ */ e.createElement(
152
+ w,
154
153
  {
155
154
  tabIndex: 0,
156
- kind: I.ICON,
157
- icon: b.ARROW_LEFT_CIRCLE,
155
+ kind: P.ICON,
156
+ icon: C.ARROW_LEFT_CIRCLE,
158
157
  onClick: n
159
158
  }
160
- ))), /* @__PURE__ */ e.createElement("div", { className: f[10] }, /* @__PURE__ */ e.createElement("div", { className: u(U, f[12]) }, t[s]), /* @__PURE__ */ e.createElement("div", { className: u(K, f[12]) }, t.map((i, l) => /* @__PURE__ */ e.createElement(
159
+ ))), /* @__PURE__ */ e.createElement("div", { className: f[10] }, /* @__PURE__ */ e.createElement("div", { className: u(G, f[12]) }, t[s]), /* @__PURE__ */ e.createElement("div", { className: u(D, f[12]) }, t.map((i, l) => /* @__PURE__ */ e.createElement(
161
160
  "button",
162
161
  {
163
162
  tabIndex: 0,
164
- className: u(q({ selected: l === s })),
163
+ className: u(H({ selected: l === s })),
165
164
  onClick: () => d(l)
166
165
  },
167
166
  i
168
- )))), /* @__PURE__ */ e.createElement("div", { className: u(O) }, /* @__PURE__ */ e.createElement("div", { className: u(x) }, /* @__PURE__ */ e.createElement(
169
- N,
167
+ )))), /* @__PURE__ */ e.createElement("div", { className: u(I) }, /* @__PURE__ */ e.createElement("div", { className: u(E) }, /* @__PURE__ */ e.createElement(
168
+ w,
170
169
  {
171
170
  tabIndex: 0,
172
- kind: I.ICON,
173
- icon: b.ARROW_RIGHT_CIRCLE,
171
+ kind: P.ICON,
172
+ icon: C.ARROW_RIGHT_CIRCLE,
174
173
  onClick: p
175
174
  }
176
175
  ))));
177
176
  }
178
- const J = {
179
- components: [v, R],
177
+ const K = {
178
+ components: [v, y],
180
179
  examples: {
181
180
  sizing: {
182
181
  label: "Sizing",
@@ -353,8 +352,8 @@ const J = {
353
352
  }
354
353
  }
355
354
  }
356
- }, Q = {
357
- components: [v, R],
355
+ }, U = {
356
+ components: [v, y],
358
357
  examples: {
359
358
  carousel: {
360
359
  label: "Media Carousel",
@@ -384,12 +383,12 @@ const J = {
384
383
  }
385
384
  }
386
385
  }
387
- }, oe = {
388
- "Media Carousel": Q,
389
- Photos: J
386
+ }, Z = {
387
+ "Media Carousel": U,
388
+ Photos: K
390
389
  };
391
390
  export {
392
- oe as MANIFEST,
391
+ Z as MANIFEST,
393
392
  v as Photo,
394
- R as PhotoCarousel
393
+ y as PhotoCarousel
395
394
  };
package/lib/index.umd.cjs CHANGED
@@ -1,4 +1,4 @@
1
- (function(n,_){typeof exports=="object"&&typeof module<"u"?_(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/tokens"),require("@spscommerce/ds-react"),require("@spscommerce/ds-shared"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/tokens","@spscommerce/ds-react","@spscommerce/ds-shared","@spscommerce/utils"],_):(n=typeof globalThis<"u"?globalThis:n||self,_(n.Photo={},n.React,n.core,n.tokens,n.dsReact,n.dsShared,n.utils))})(this,function(n,_,c,g,b,w,h){"use strict";function R(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const o=R(_);function k(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function I(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);a&&(r=r.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),t.push.apply(t,r)}return t}function E(e){for(var a=1;a<arguments.length;a++){var t=arguments[a]!=null?arguments[a]:{};a%2?I(Object(t),!0).forEach(function(r){k(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):I(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}var M=(e,a,t)=>{for(var r of Object.keys(e)){var s;if(e[r]!==((s=a[r])!==null&&s!==void 0?s:t[r]))return!1}return!0},C=e=>a=>{var t=e.defaultClassName,r=E(E({},e.defaultVariants),a);for(var s in r){var p,u=(p=r[s])!==null&&p!==void 0?p:e.defaultVariants[s];if(u!=null){var i=u;typeof i=="boolean"&&(i=i===!0?"true":"false");var d=e.variantClassNames[s][i];d&&(t+=" "+d)}}for(var[l,m]of e.compoundVariants)M(l,r,e.defaultVariants)&&(t+=" "+m);return t},T=C({defaultClassName:"pkg_sps-woodland_photo__version_8_34_13__hash_dons240",variantClassNames:{placeholder:{true:"pkg_sps-woodland_photo__version_8_34_13__hash_dons241",false:"pkg_sps-woodland_photo__version_8_34_13__hash_dons242"}},defaultVariants:{placeholder:!1},compoundVariants:[]}),F=C({defaultClassName:"pkg_sps-woodland_photo__version_8_34_13__hash_dons243",variantClassNames:{mode:{fill:"pkg_sps-woodland_photo__version_8_34_13__hash_dons244",fit:"pkg_sps-woodland_photo__version_8_34_13__hash_dons245"}},defaultVariants:{mode:"fill"},compoundVariants:[]}),V="pkg_sps-woodland_photo__version_8_34_13__hash_dons246";function v({className:e,src:a,altText:t,mode:r="fill",placeholderIcon:s="photo",...p}){const u=o.useRef(null),i=o.useRef(null),d=o.useRef(null),l=o.useRef(null),[m,L]=o.useState(),[q,G]=o.useState(!1);o.useEffect(()=>{i.current&&(d.current&&(window.clearInterval(d.current),d.current=null),d.current=window.setInterval(()=>{if(i.current){const f=i.current.getBoundingClientRect();if(f.height){d.current&&(window.clearInterval(d.current),d.current=null);let P=f.width/f.height>1;G(P===(r==="fit"))}}},1e3/60))},[u.current,i.current,a]),o.useEffect(()=>{l.current&&(window.clearInterval(l.current),l.current=null),l.current=window.setInterval(()=>{if(u.current){const f=u.current.getBoundingClientRect();f.width&&(K(f.width),l.current&&(window.clearInterval(l.current),l.current=null))}},1e3/60)},[u.current]);function K(f){var P,j,x;if(f){const S=((x=(j=(P=document==null?void 0:document.body)==null?void 0:P.parentElement)==null?void 0:j.style)==null?void 0:x.fontSize)||"16px",J=Number(S.substring(0,S.length-2));L(f/J)}}function H(){if(typeof m<"u")return m*.05}function U(){if(typeof m<"u")return .75*m}return o.createElement("div",{ref:u,className:c.cl(T({placeholder:!a}),e),style:{width:`${m}`&&`${m}rem`,fontSize:`${H()}rem`,height:`${U()}rem`},...p},a?m?o.createElement("img",{className:F({mode:q?"fit":"fill"}),ref:i,src:a,alt:t}):o.createElement("span",null):o.createElement(c.Icon,{className:V,icon:s}))}c.Metadata.set(v,{name:"Photo",props:{src:"string",altText:"string",mode:{type:'"fill" | "fit"',default:'"fill"'},placeholderIcon:"IconName"}});var y="pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s0",O="pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s1",A="pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s2",B="pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s3",W=C({defaultClassName:"pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s4",variantClassNames:{selected:{true:"pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s5",false:"pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s6"}},defaultVariants:{selected:!1},compoundVariants:[]});function N({children:e,className:a,...t}){const[r]=c.selectChildren(e,[{type:v}]),[s,p]=o.useState(0);function u(){s+1===r.length?p(0):p(s+1)}function i(){p(s===0?r.length-1:s-1)}return o.createElement("div",{className:g.grid.root,...t},o.createElement("div",{className:c.cl(y)},o.createElement("div",{className:c.cl(O)},o.createElement(b.SpsButton,{tabIndex:0,kind:w.ButtonKind.ICON,icon:w.SpsIcon.ARROW_LEFT_CIRCLE,onClick:i}))),o.createElement("div",{className:g.grid[10]},o.createElement("div",{className:c.cl(B,g.grid[12])},r[s]),o.createElement("div",{className:c.cl(A,g.grid[12])},r.map((d,l)=>o.createElement("button",{tabIndex:0,className:c.cl(W({selected:l===s})),onClick:()=>p(l)},d)))),o.createElement("div",{className:c.cl(y)},o.createElement("div",{className:c.cl(O)},o.createElement(b.SpsButton,{tabIndex:0,kind:w.ButtonKind.ICON,icon:w.SpsIcon.ARROW_RIGHT_CIRCLE,onClick:u}))))}const z={components:[v,N],examples:{sizing:{label:"Sizing",description:"Photos are block elements, so a photo fills its container's width unless an explicit width is set. It is always a 4:3 aspect ratio. In this example, photos have been placed in cards which have different widths in the 12 column grid.",examples:{basic:{react:h.code`
1
+ (function(n,_){typeof exports=="object"&&typeof module<"u"?_(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/tokens"),require("@spscommerce/ds-react"),require("@spscommerce/ds-shared"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/tokens","@spscommerce/ds-react","@spscommerce/ds-shared","@spscommerce/utils"],_):(n=typeof globalThis<"u"?globalThis:n||self,_(n.Photo={},n.React,n.core,n.tokens,n.dsReact,n.dsShared,n.utils))})(this,function(n,_,c,g,b,w,h){"use strict";function j(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const o=j(_);function x(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function I(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);a&&(r=r.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),t.push.apply(t,r)}return t}function E(e){for(var a=1;a<arguments.length;a++){var t=arguments[a]!=null?arguments[a]:{};a%2?I(Object(t),!0).forEach(function(r){x(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):I(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}var S=(e,a,t)=>{for(var r of Object.keys(e)){var s;if(e[r]!==((s=a[r])!==null&&s!==void 0?s:t[r]))return!1}return!0},C=e=>a=>{var t=e.defaultClassName,r=E(E({},e.defaultVariants),a);for(var s in r){var p,u=(p=r[s])!==null&&p!==void 0?p:e.defaultVariants[s];if(u!=null){var i=u;typeof i=="boolean"&&(i=i===!0?"true":"false");var d=e.variantClassNames[s][i];d&&(t+=" "+d)}}for(var[l,m]of e.compoundVariants)S(l,r,e.defaultVariants)&&(t+=" "+m);return t},R=C({defaultClassName:"pkg_sps-woodland_photo__version_8_34_14__hash_dons240",variantClassNames:{placeholder:{true:"pkg_sps-woodland_photo__version_8_34_14__hash_dons241",false:"pkg_sps-woodland_photo__version_8_34_14__hash_dons242"}},defaultVariants:{placeholder:!1},compoundVariants:[]}),k=C({defaultClassName:"pkg_sps-woodland_photo__version_8_34_14__hash_dons243",variantClassNames:{mode:{fill:"pkg_sps-woodland_photo__version_8_34_14__hash_dons244",fit:"pkg_sps-woodland_photo__version_8_34_14__hash_dons245"}},defaultVariants:{mode:"fill"},compoundVariants:[]}),M="pkg_sps-woodland_photo__version_8_34_14__hash_dons246";function v({className:e,src:a,altText:t,mode:r="fill",placeholderIcon:s="photo",...p}){const u=o.useRef(null),i=o.useRef(null),d=o.useRef(null),l=o.useRef(null),[m,W]=o.useState(),[z,D]=o.useState(!1);o.useEffect(()=>{i.current&&(d.current&&(window.clearInterval(d.current),d.current=null),d.current=window.setInterval(()=>{if(i.current){const f=i.current.getBoundingClientRect();if(f.height){d.current&&(window.clearInterval(d.current),d.current=null);let P=f.width/f.height>1;D(P===(r==="fit"))}}},1e3/60))},[u.current,i.current,a]),o.useEffect(()=>{l.current&&(window.clearInterval(l.current),l.current=null),l.current=window.setInterval(()=>{if(u.current){const f=u.current.getBoundingClientRect();f.width&&(L(f.width),l.current&&(window.clearInterval(l.current),l.current=null))}},1e3/60)},[u.current]);function L(f){if(f){const P=document?.body?.parentElement?.style?.fontSize||"16px",K=Number(P.substring(0,P.length-2));W(f/K)}}function q(){if(typeof m<"u")return m*.05}function G(){if(typeof m<"u")return .75*m}return o.createElement("div",{ref:u,className:c.cl(R({placeholder:!a}),e),style:{width:`${m}`&&`${m}rem`,fontSize:`${q()}rem`,height:`${G()}rem`},...p},a?m?o.createElement("img",{className:k({mode:z?"fit":"fill"}),ref:i,src:a,alt:t}):o.createElement("span",null):o.createElement(c.Icon,{className:M,icon:s}))}c.Metadata.set(v,{name:"Photo",props:{src:"string",altText:"string",mode:{type:'"fill" | "fit"',default:'"fill"'},placeholderIcon:"IconName"}});var y="pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s0",O="pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s1",T="pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s2",F="pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s3",V=C({defaultClassName:"pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s4",variantClassNames:{selected:{true:"pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s5",false:"pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s6"}},defaultVariants:{selected:!1},compoundVariants:[]});function N({children:e,className:a,...t}){const[r]=c.selectChildren(e,[{type:v}]),[s,p]=o.useState(0);function u(){s+1===r.length?p(0):p(s+1)}function i(){p(s===0?r.length-1:s-1)}return o.createElement("div",{className:g.grid.root,...t},o.createElement("div",{className:c.cl(y)},o.createElement("div",{className:c.cl(O)},o.createElement(b.SpsButton,{tabIndex:0,kind:w.ButtonKind.ICON,icon:w.SpsIcon.ARROW_LEFT_CIRCLE,onClick:i}))),o.createElement("div",{className:g.grid[10]},o.createElement("div",{className:c.cl(F,g.grid[12])},r[s]),o.createElement("div",{className:c.cl(T,g.grid[12])},r.map((d,l)=>o.createElement("button",{tabIndex:0,className:c.cl(V({selected:l===s})),onClick:()=>p(l)},d)))),o.createElement("div",{className:c.cl(y)},o.createElement("div",{className:c.cl(O)},o.createElement(b.SpsButton,{tabIndex:0,kind:w.ButtonKind.ICON,icon:w.SpsIcon.ARROW_RIGHT_CIRCLE,onClick:u}))))}const A={components:[v,N],examples:{sizing:{label:"Sizing",description:"Photos are block elements, so a photo fills its container's width unless an explicit width is set. It is always a 4:3 aspect ratio. In this example, photos have been placed in cards which have different widths in the 12 column grid.",examples:{basic:{react:h.code`
2
2
  import { Photo } from "@sps-woodland/photo";
3
3
  import { Card } from "@sps-woodland/cards";
4
4
 
@@ -123,7 +123,7 @@
123
123
  </div>
124
124
  )
125
125
  }
126
- `}}}}},D={"Media Carousel":{components:[v,N],examples:{carousel:{label:"Media Carousel",description:"",examples:{general:{description:"",react:h.code`
126
+ `}}}}},B={"Media Carousel":{components:[v,N],examples:{carousel:{label:"Media Carousel",description:"",examples:{general:{description:"",react:h.code`
127
127
  import { PhotoCarousel, Photo } from "@sps-woodland/photo";
128
128
 
129
129
  function Component () {
@@ -140,4 +140,4 @@
140
140
  </div>
141
141
  )
142
142
  }
143
- `}}}}},Photos:z};n.MANIFEST=D,n.Photo=v,n.PhotoCarousel=N,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
143
+ `}}}}},Photos:A};n.MANIFEST=B,n.Photo=v,n.PhotoCarousel=N,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- .pkg_sps-woodland_photo__version_8_34_13__hash_dons240{align-items:center;display:flex;justify-content:center;overflow:hidden;padding:0!important;vertical-align:middle}.pkg_sps-woodland_photo__version_8_34_13__hash_dons241{background:#f3f4f4;box-shadow:inset .0625rem 0 #d2d4d4,inset -.0625rem 0 #d2d4d4,inset 0 .0625rem #d2d4d4,inset 0 -.0625rem #d2d4d4,inset 1em 0 #fff,inset -1em 0 #fff,inset 0 1em #fff,inset 0 -1em #fff}.pkg_sps-woodland_photo__version_8_34_13__hash_dons243{visibility:hidden}.pkg_sps-woodland_photo__version_8_34_13__hash_dons244{height:100%;visibility:visible;width:auto}.pkg_sps-woodland_photo__version_8_34_13__hash_dons245{height:auto;visibility:visible;width:100%}.pkg_sps-woodland_photo__version_8_34_13__hash_dons246{font-size:6em;text-align:center;color:#717779}.pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s0{display:table;float:right}.pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s1{display:table-cell;vertical-align:middle}.pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s3{display:block;margin-bottom:.5rem;width:100%}.pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s4{display:block;background:transparent;border:0;cursor:pointer;padding:0}.pkg_sps-woodland_photo__version_8_34_13__hash_i6pp7s6{opacity:.4}
1
+ .pkg_sps-woodland_photo__version_8_34_14__hash_dons240{align-items:center;display:flex;justify-content:center;overflow:hidden;padding:0!important;vertical-align:middle}.pkg_sps-woodland_photo__version_8_34_14__hash_dons241{background:#f3f4f4;box-shadow:inset .0625rem 0 #d2d4d4,inset -.0625rem 0 #d2d4d4,inset 0 .0625rem #d2d4d4,inset 0 -.0625rem #d2d4d4,inset 1em 0 #fff,inset -1em 0 #fff,inset 0 1em #fff,inset 0 -1em #fff}.pkg_sps-woodland_photo__version_8_34_14__hash_dons243{visibility:hidden}.pkg_sps-woodland_photo__version_8_34_14__hash_dons244{height:100%;visibility:visible;width:auto}.pkg_sps-woodland_photo__version_8_34_14__hash_dons245{height:auto;visibility:visible;width:100%}.pkg_sps-woodland_photo__version_8_34_14__hash_dons246{font-size:6em;text-align:center;color:#717779}.pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s0{display:table;float:right}.pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s1{display:table-cell;vertical-align:middle}.pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s3{display:block;margin-bottom:.5rem;width:100%}.pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s4{display:block;background:transparent;border:0;cursor:pointer;padding:0}.pkg_sps-woodland_photo__version_8_34_14__hash_i6pp7s6{opacity:.4}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sps-woodland/photo",
3
3
  "description": "SPS Woodland Design System photo component",
4
- "version": "8.34.13",
4
+ "version": "8.34.14",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/photo",
@@ -12,10 +12,10 @@
12
12
  "types": "./lib/index.d.ts",
13
13
  "exports": {
14
14
  ".": {
15
+ "types": "./lib/index.d.ts",
15
16
  "require": "./lib/index.umd.cjs",
16
17
  "import": "./lib/index.js",
17
- "default": "./lib/index.js",
18
- "types": "./lib/index.d.ts"
18
+ "default": "./lib/index.js"
19
19
  },
20
20
  "./lib/style.css": {
21
21
  "import": "./lib/style.css",
@@ -26,24 +26,24 @@
26
26
  "access": "public"
27
27
  },
28
28
  "peerDependencies": {
29
- "@spscommerce/utils": "^7.0.0",
29
+ "@spscommerce/utils": "^7.0.0 || ^8.0.0",
30
30
  "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
31
31
  "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
32
- "@sps-woodland/core": "8.34.13",
33
- "@sps-woodland/tokens": "8.34.13",
34
- "@spscommerce/ds-react": "8.34.13",
35
- "@spscommerce/ds-shared": "8.34.13"
32
+ "@sps-woodland/core": "8.34.14",
33
+ "@sps-woodland/tokens": "8.34.14",
34
+ "@spscommerce/ds-react": "8.34.14",
35
+ "@spscommerce/ds-shared": "8.34.14"
36
36
  },
37
37
  "devDependencies": {
38
- "@spscommerce/utils": "^7.0.0",
39
- "@vanilla-extract/css": "^1.9.3",
38
+ "@spscommerce/utils": "^8.1.1",
39
+ "@vanilla-extract/css": "^1.17.4",
40
40
  "@vanilla-extract/recipes": "^0.2.5",
41
41
  "react": "^16.9.0",
42
42
  "react-dom": "^16.9.0",
43
- "@sps-woodland/core": "8.34.13",
44
- "@sps-woodland/tokens": "8.34.13",
45
- "@spscommerce/ds-react": "8.34.13",
46
- "@spscommerce/ds-shared": "8.34.13"
43
+ "@sps-woodland/core": "8.34.14",
44
+ "@sps-woodland/tokens": "8.34.14",
45
+ "@spscommerce/ds-react": "8.34.14",
46
+ "@spscommerce/ds-shared": "8.34.14"
47
47
  },
48
48
  "scripts": {
49
49
  "build": "pnpm run build:js && pnpm run build:types",
package/vite.config.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import path from "path";
1
+ import path from "node:path";
2
2
  import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
3
3
  import { defineConfig } from "vite";
4
4
  import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";