@sps-woodland/content-row 8.5.1 → 8.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -39,6 +39,21 @@ export declare const contentRowColGroup: import("@vanilla-extract/recipes/dist/d
39
39
  };
40
40
  }>;
41
41
  export declare const expandButton: string;
42
- export declare const expandIcon: string;
42
+ export declare const expandIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
43
+ disabled: {
44
+ true: {
45
+ color: string;
46
+ cursor: "not-allowed";
47
+ };
48
+ false: {
49
+ color: string;
50
+ selectors: {
51
+ "&:hover": {
52
+ color: string;
53
+ };
54
+ };
55
+ };
56
+ };
57
+ }>;
43
58
  export declare const contentRowExpansion: string;
44
59
  export declare const section: string;
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { ComponentProps } from "@sps-woodland/core";
3
- export declare function ContentRow({ children, className, alternateLayout, initiallyExpanded, cardSpacing, expanded, onBeforeCollapsed, onBeforeExpanded, onSelectionChange, onCollapsed, onExpanded, selectable, selected, renderExpandedContent, ...rest }: ComponentProps<{
3
+ export declare function ContentRow({ children, className, alternateLayout, initiallyExpanded, cardSpacing, expanded, onBeforeCollapsed, onBeforeExpanded, onSelectionChange, onCollapsed, onExpanded, selectable, selected, renderExpandedContent, disableSelection, disableExpansion, ...rest }: ComponentProps<{
4
4
  alternateLayout?: boolean;
5
5
  initiallyExpanded?: boolean;
6
6
  cardSpacing?: boolean;
@@ -13,4 +13,6 @@ export declare function ContentRow({ children, className, alternateLayout, initi
13
13
  selectable?: boolean;
14
14
  selected?: boolean;
15
15
  renderExpandedContent?: boolean;
16
+ disableSelection?: boolean;
17
+ disableExpansion?: boolean;
16
18
  }, HTMLDivElement>): React.ReactElement;
package/lib/index.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const H=require("react"),a=require("@sps-woodland/core"),A=require("@spscommerce/ds-react"),c=require("@spscommerce/utils");function D(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const s=D(H);function T(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function N(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),o.push.apply(o,n)}return o}function P(e){for(var t=1;t<arguments.length;t++){var o=arguments[t]!=null?arguments[t]:{};t%2?N(Object(o),!0).forEach(function(n){T(e,n,o[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):N(Object(o)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(o,n))})}return e}var q=(e,t,o)=>{for(var n of Object.keys(e)){var r;if(e[n]!==((r=t[n])!==null&&r!==void 0?r:o[n]))return!1}return!0},x=e=>t=>{var o=e.defaultClassName,n=P(P({},e.defaultVariants),t);for(var r in n){var i,d=(i=n[r])!==null&&i!==void 0?i:e.defaultVariants[r];if(d!=null){var l=d;typeof l=="boolean"&&(l=l===!0?"true":"false");var m=e.variantClassNames[r][l];m&&(o+=" "+m)}}for(var[C,w]of e.compoundVariants)q(C,n,e.defaultVariants)&&(o+=" "+w);return o},G=x({defaultClassName:"_1mxrufv0",variantClassNames:{lean:{true:"_1mxrufv1",false:"_1mxrufv2"},borderless:{true:"_1mxrufv3",false:"_1mxrufv4"}},defaultVariants:{lean:!1,borderless:!1},compoundVariants:[]});function p({children:e,className:t,borderless:o,lean:n,widthPx:r,widthRem:i,style:d,...l}){const m=r?r/16:i,C=m?{...d,width:`${m}rem`}:d;return s.createElement("div",{className:a.cl(G({lean:n,borderless:o}),t),...l,style:C},e)}a.Metadata.set(p,{name:"Content Row Col",props:{borderless:{type:"boolean"},lean:{type:"boolean"},widthPx:{type:"number"},widthRem:{type:"number"}}});var K=x({defaultClassName:"_11ztjee1",variantClassNames:{expanded:{true:"_11ztjee2",false:"_11ztjee3"}},defaultVariants:{expanded:!1},compoundVariants:[]}),W=x({defaultClassName:"_11ztjee4",variantClassNames:{expanded:{true:"_11ztjee5",false:"_11ztjee6"},selected:{true:"_11ztjee7",false:"_11ztjee8"},cardSpacing:{true:"_11ztjee9",false:"_11ztjeea"}},defaultVariants:{expanded:!1,selected:!1,cardSpacing:!1},compoundVariants:[[{expanded:!0,cardSpacing:!0},"_11ztjeeb"]]}),B="_11ztjeee",L="_11ztjeec",J="_11ztjeed",M="_11ztjeef";function R({children:e,className:t,...o}){return s.createElement("div",{className:a.cl(B,t),...o},e)}a.Metadata.set(R,{name:"Content Row Expansion"});function y({children:e,className:t,alternateLayout:o=!1,initiallyExpanded:n=!1,cardSpacing:r=!1,expanded:i,onBeforeCollapsed:d,onBeforeExpanded:l,onSelectionChange:m,onCollapsed:C,onExpanded:w,selectable:g=!1,selected:h,renderExpandedContent:f=!0,...I}){const[V,[b]]=a.selectChildren(e,[{type:p},{type:R}]),{t:_}=s.useContext(a.I18nContext),[j,S]=s.useState(f||n),[z,E]=s.useState(n),u=typeof i=="boolean"?i:z;function F(O){O.stopPropagation(),u&&(!d||d())?(E(!1),f||S(!1),C&&C()):!u&&(!l||l())&&(E(!0),f||S(!0),w&&w())}const k=()=>s.createElement(A.SpsCheckbox,{checked:h,onChange:m}),v=()=>s.createElement("button",{type:"button",className:a.cl(L),onClick:F,"aria-label":_(`design-system:contentRow.${u?"collapse":"expand"}`)},s.createElement(a.Icon,{className:a.cl(J),icon:u?"minus-circle":"plus-circle"}));return s.createElement("div",{className:a.cl(K({expanded:u}),t),...I},s.createElement("div",{className:a.cl(W({expanded:u,selected:h,cardSpacing:r}))},g&&!o&&s.createElement(p,{widthPx:46},s.createElement(k,null)),b&&!o&&s.createElement(p,{widthPx:44},s.createElement(v,null)),b&&g&&o&&s.createElement(p,{widthPx:46},s.createElement("section",{className:M},s.createElement(k,null)),s.createElement("section",{className:M},s.createElement(v,null))),V),j&&b)}a.Metadata.set(y,{name:"Content Row",props:{alternateLayout:{type:"boolean",default:"false"},initiallyExpanded:{type:"boolean",default:"false"},cardSpacing:{type:"boolean",default:"false"},expanded:{type:"boolean"},onBeforeCollapsed:{type:"() => boolean"},onBeforeExpanded:{type:"() => boolean"},onSelectionChange:{type:"ChangeEventHandler"},onCollapsed:{type:"() => void"},onExpanded:{type:"() => void"},selectable:{type:"boolean",default:"false"},selected:{type:"boolean"},renderExpandedContent:{type:"boolean",default:"true"}}});const Q={components:[y,p,R],examples:{basic:{label:"Content Rows",examples:{basic:{react:c.code`
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("react"),a=require("@sps-woodland/core"),T=require("@spscommerce/ds-react"),i=require("@spscommerce/utils");function q(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const s=q(D);function G(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function P(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),o.push.apply(o,n)}return o}function M(e){for(var t=1;t<arguments.length;t++){var o=arguments[t]!=null?arguments[t]:{};t%2?P(Object(o),!0).forEach(function(n){G(e,n,o[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):P(Object(o)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(o,n))})}return e}var K=(e,t,o)=>{for(var n of Object.keys(e)){var r;if(e[n]!==((r=t[n])!==null&&r!==void 0?r:o[n]))return!1}return!0},b=e=>t=>{var o=e.defaultClassName,n=M(M({},e.defaultVariants),t);for(var r in n){var c,d=(c=n[r])!==null&&c!==void 0?c:e.defaultVariants[r];if(d!=null){var l=d;typeof l=="boolean"&&(l=l===!0?"true":"false");var m=e.variantClassNames[r][l];m&&(o+=" "+m)}}for(var[C,w]of e.compoundVariants)K(C,n,e.defaultVariants)&&(o+=" "+w);return o},W=b({defaultClassName:"_1mxrufv0",variantClassNames:{lean:{true:"_1mxrufv1",false:"_1mxrufv2"},borderless:{true:"_1mxrufv3",false:"_1mxrufv4"}},defaultVariants:{lean:!1,borderless:!1},compoundVariants:[]});function p({children:e,className:t,borderless:o,lean:n,widthPx:r,widthRem:c,style:d,...l}){const m=r?r/16:c,C=m?{...d,width:`${m}rem`}:d;return s.createElement("div",{className:a.cl(W({lean:n,borderless:o}),t),...l,style:C},e)}a.Metadata.set(p,{name:"Content Row Col",props:{borderless:{type:"boolean"},lean:{type:"boolean"},widthPx:{type:"number"},widthRem:{type:"number"}}});var B=b({defaultClassName:"_11ztjee1",variantClassNames:{expanded:{true:"_11ztjee2",false:"_11ztjee3"}},defaultVariants:{expanded:!1},compoundVariants:[]}),L=b({defaultClassName:"_11ztjee4",variantClassNames:{expanded:{true:"_11ztjee5",false:"_11ztjee6"},selected:{true:"_11ztjee7",false:"_11ztjee8"},cardSpacing:{true:"_11ztjee9",false:"_11ztjeea"}},defaultVariants:{expanded:!1,selected:!1,cardSpacing:!1},compoundVariants:[[{expanded:!0,cardSpacing:!0},"_11ztjeeb"]]}),J="_11ztjeeg",Q="_11ztjeec",U=b({defaultClassName:"_11ztjeed",variantClassNames:{disabled:{true:"_11ztjeee",false:"_11ztjeef"}},defaultVariants:{},compoundVariants:[]}),V="_11ztjeeh";function R({children:e,className:t,...o}){return s.createElement("div",{className:a.cl(J,t),...o},e)}a.Metadata.set(R,{name:"Content Row Expansion"});function x({children:e,className:t,alternateLayout:o=!1,initiallyExpanded:n=!1,cardSpacing:r=!1,expanded:c,onBeforeCollapsed:d,onBeforeExpanded:l,onSelectionChange:m,onCollapsed:C,onExpanded:w,selectable:g=!1,selected:h,renderExpandedContent:f=!0,disableSelection:_=!1,disableExpansion:S=!1,...I}){const[j,[y]]=a.selectChildren(e,[{type:p},{type:R}]),{t:z}=s.useContext(a.I18nContext),[F,E]=s.useState(f||n),[O,k]=s.useState(n),u=typeof c=="boolean"?c:O;function H(A){A.stopPropagation(),u&&(!d||d())?(k(!1),f||E(!1),C&&C()):!u&&(!l||l())&&(k(!0),f||E(!0),w&&w())}const v=()=>s.createElement(T.SpsCheckbox,{disabled:_,checked:h,onChange:m}),N=()=>s.createElement("button",{type:"button",className:a.cl(Q),onClick:H,"aria-label":z(`design-system:contentRow.${u?"collapse":"expand"}`),disabled:S},s.createElement(a.Icon,{className:a.cl(U({disabled:S})),icon:u?"minus-circle":"plus-circle"}));return s.createElement("div",{className:a.cl(B({expanded:u}),t),...I},s.createElement("div",{className:a.cl(L({expanded:u,selected:h,cardSpacing:r}))},g&&!o&&s.createElement(p,{widthPx:46},s.createElement(v,null)),y&&!o&&s.createElement(p,{widthPx:44},s.createElement(N,null)),y&&g&&o&&s.createElement(p,{widthPx:46},s.createElement("section",{className:V},s.createElement(v,null)),s.createElement("section",{className:V},s.createElement(N,null))),j),F&&y)}a.Metadata.set(x,{name:"Content Row",props:{alternateLayout:{type:"boolean",default:"false"},initiallyExpanded:{type:"boolean",default:"false"},cardSpacing:{type:"boolean",default:"false"},expanded:{type:"boolean"},onBeforeCollapsed:{type:"() => boolean"},onBeforeExpanded:{type:"() => boolean"},onSelectionChange:{type:"ChangeEventHandler"},onCollapsed:{type:"() => void"},onExpanded:{type:"() => void"},selectable:{type:"boolean",default:"false"},selected:{type:"boolean"},renderExpandedContent:{type:"boolean",default:"true"},disableSelection:{type:"boolean",default:"false"},disableExpansion:{type:"boolean",default:"false"}}});const X={components:[x,p,R],examples:{basic:{label:"Content Rows",examples:{basic:{react:i.code`
2
2
  import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
3
3
  import { Icon } from "@sps-woodland/core";
4
4
  import { sprinkles } from "@sps-woodland/tokens";
@@ -16,7 +16,7 @@
16
16
  </ContentRow>
17
17
  )
18
18
  }
19
- `},withCheckbox:{react:c.code`
19
+ `},withCheckbox:{react:i.code`
20
20
  import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
21
21
  import { Icon } from "@sps-woodland/core";
22
22
  import { sprinkles } from "@sps-woodland/tokens";
@@ -46,7 +46,7 @@
46
46
  </ContentRow>
47
47
  )
48
48
  }
49
- `},withCheckboxAndFavorite:{react:c.code`
49
+ `},withCheckboxAndFavorite:{react:i.code`
50
50
  import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
51
51
  import { Icon } from "@sps-woodland/core";
52
52
  import { sprinkles } from "@sps-woodland/tokens";
@@ -79,7 +79,7 @@
79
79
  </ContentRow>
80
80
  )
81
81
  }
82
- `}}},expandable:{label:"Expandable Content Rows",examples:{basic:{react:c.code`
82
+ `}}},expandable:{label:"Expandable Content Rows",examples:{basic:{react:i.code`
83
83
  import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
84
84
  import { Card } from "@sps-woodland/cards";
85
85
  import { Icon } from "@sps-woodland/core";
@@ -111,7 +111,7 @@
111
111
  </ContentRow>
112
112
  )
113
113
  }
114
- `},expandableWithCheckbox:{react:c.code`
114
+ `},expandableWithCheckbox:{react:i.code`
115
115
  import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
116
116
  import { Card } from "@sps-woodland/cards";
117
117
  import { Icon } from "@sps-woodland/core";
@@ -155,7 +155,7 @@
155
155
  </ContentRow>
156
156
  )
157
157
  }
158
- `},expandableWithCheckboxAlternate:{react:c.code`
158
+ `},expandableWithCheckboxAlternate:{react:i.code`
159
159
  import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
160
160
  import { Card } from "@sps-woodland/cards";
161
161
  import { Icon } from "@sps-woodland/core";
@@ -200,7 +200,7 @@
200
200
  </ContentRow>
201
201
  )
202
202
  }
203
- `},expandableWithCheckboxAndFavorite:{react:c.code`
203
+ `},expandableWithCheckboxAndFavorite:{react:i.code`
204
204
  import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
205
205
  import { Card } from "@sps-woodland/cards";
206
206
  import { Icon } from "@sps-woodland/core";
@@ -247,7 +247,7 @@
247
247
  </ContentRow>
248
248
  )
249
249
  }
250
- `},expandableWithCheckboxAndFavoriteAlternate:{react:c.code`
250
+ `},expandableWithCheckboxAndFavoriteAlternate:{react:i.code`
251
251
  import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
252
252
  import { Card } from "@sps-woodland/cards";
253
253
  import { Icon } from "@sps-woodland/core";
@@ -295,7 +295,7 @@
295
295
  </ContentRow>
296
296
  )
297
297
  }
298
- `}}},sortable:{label:"Sortable Content Rows",examples:{basic:{react:c.code`
298
+ `}}},sortable:{label:"Sortable Content Rows",examples:{basic:{react:i.code`
299
299
  import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
300
300
  import { Card } from "@sps-woodland/cards";
301
301
  import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
@@ -398,4 +398,4 @@
398
398
  </>
399
399
  )
400
400
  }
401
- `}}}}},U={"Content Rows":Q};exports.ContentRow=y;exports.ContentRowCol=p;exports.ContentRowExpansion=R;exports.MANIFEST=U;
401
+ `}}}}},Y={"Content Rows":X};exports.ContentRow=x;exports.ContentRowCol=p;exports.ContentRowExpansion=R;exports.MANIFEST=Y;
package/lib/index.es.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as s from "react";
2
- import { Metadata as b, cl as C, selectChildren as A, I18nContext as D, Icon as T } from "@sps-woodland/core";
3
- import { SpsCheckbox as G } from "@spscommerce/ds-react";
2
+ import { Metadata as x, cl as C, selectChildren as T, I18nContext as G, Icon as K } from "@sps-woodland/core";
3
+ import { SpsCheckbox as W } from "@spscommerce/ds-react";
4
4
  import { code as l } from "@spscommerce/utils";
5
- function K(e, n, o) {
5
+ function B(e, n, o) {
6
6
  return n in e ? Object.defineProperty(e, n, {
7
7
  value: o,
8
8
  enumerable: !0,
@@ -10,7 +10,7 @@ function K(e, n, o) {
10
10
  writable: !0
11
11
  }) : e[n] = o, e;
12
12
  }
13
- function N(e, n) {
13
+ function P(e, n) {
14
14
  var o = Object.keys(e);
15
15
  if (Object.getOwnPropertySymbols) {
16
16
  var t = Object.getOwnPropertySymbols(e);
@@ -20,26 +20,26 @@ function N(e, n) {
20
20
  }
21
21
  return o;
22
22
  }
23
- function P(e) {
23
+ function V(e) {
24
24
  for (var n = 1; n < arguments.length; n++) {
25
25
  var o = arguments[n] != null ? arguments[n] : {};
26
- n % 2 ? N(Object(o), !0).forEach(function(t) {
27
- K(e, t, o[t]);
28
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(o)) : N(Object(o)).forEach(function(t) {
26
+ n % 2 ? P(Object(o), !0).forEach(function(t) {
27
+ B(e, t, o[t]);
28
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(o)) : P(Object(o)).forEach(function(t) {
29
29
  Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(o, t));
30
30
  });
31
31
  }
32
32
  return e;
33
33
  }
34
- var W = (e, n, o) => {
34
+ var L = (e, n, o) => {
35
35
  for (var t of Object.keys(e)) {
36
36
  var r;
37
37
  if (e[t] !== ((r = n[t]) !== null && r !== void 0 ? r : o[t]))
38
38
  return !1;
39
39
  }
40
40
  return !0;
41
- }, x = (e) => (n) => {
42
- var o = e.defaultClassName, t = P(P({}, e.defaultVariants), n);
41
+ }, R = (e) => (n) => {
42
+ var o = e.defaultClassName, t = V(V({}, e.defaultVariants), n);
43
43
  for (var r in t) {
44
44
  var i, d = (i = t[r]) !== null && i !== void 0 ? i : e.defaultVariants[r];
45
45
  if (d != null) {
@@ -50,9 +50,9 @@ var W = (e, n, o) => {
50
50
  }
51
51
  }
52
52
  for (var [m, w] of e.compoundVariants)
53
- W(m, t, e.defaultVariants) && (o += " " + w);
53
+ L(m, t, e.defaultVariants) && (o += " " + w);
54
54
  return o;
55
- }, B = x({ defaultClassName: "_1mxrufv0", variantClassNames: { lean: { true: "_1mxrufv1", false: "_1mxrufv2" }, borderless: { true: "_1mxrufv3", false: "_1mxrufv4" } }, defaultVariants: { lean: !1, borderless: !1 }, compoundVariants: [] });
55
+ }, J = R({ defaultClassName: "_1mxrufv0", variantClassNames: { lean: { true: "_1mxrufv1", false: "_1mxrufv2" }, borderless: { true: "_1mxrufv3", false: "_1mxrufv4" } }, defaultVariants: { lean: !1, borderless: !1 }, compoundVariants: [] });
56
56
  function u({
57
57
  children: e,
58
58
  className: n,
@@ -70,14 +70,14 @@ function u({
70
70
  return /* @__PURE__ */ s.createElement(
71
71
  "div",
72
72
  {
73
- className: C(B({ lean: t, borderless: o }), n),
73
+ className: C(J({ lean: t, borderless: o }), n),
74
74
  ...a,
75
75
  style: m
76
76
  },
77
77
  e
78
78
  );
79
79
  }
80
- b.set(u, {
80
+ x.set(u, {
81
81
  name: "Content Row Col",
82
82
  props: {
83
83
  borderless: { type: "boolean" },
@@ -86,15 +86,15 @@ b.set(u, {
86
86
  widthRem: { type: "number" }
87
87
  }
88
88
  });
89
- var L = x({ defaultClassName: "_11ztjee1", variantClassNames: { expanded: { true: "_11ztjee2", false: "_11ztjee3" } }, defaultVariants: { expanded: !1 }, compoundVariants: [] }), J = x({ defaultClassName: "_11ztjee4", variantClassNames: { expanded: { true: "_11ztjee5", false: "_11ztjee6" }, selected: { true: "_11ztjee7", false: "_11ztjee8" }, cardSpacing: { true: "_11ztjee9", false: "_11ztjeea" } }, defaultVariants: { expanded: !1, selected: !1, cardSpacing: !1 }, compoundVariants: [[{ expanded: !0, cardSpacing: !0 }, "_11ztjeeb"]] }), q = "_11ztjeee", Q = "_11ztjeec", U = "_11ztjeed", M = "_11ztjeef";
89
+ var q = R({ defaultClassName: "_11ztjee1", variantClassNames: { expanded: { true: "_11ztjee2", false: "_11ztjee3" } }, defaultVariants: { expanded: !1 }, compoundVariants: [] }), Q = R({ defaultClassName: "_11ztjee4", variantClassNames: { expanded: { true: "_11ztjee5", false: "_11ztjee6" }, selected: { true: "_11ztjee7", false: "_11ztjee8" }, cardSpacing: { true: "_11ztjee9", false: "_11ztjeea" } }, defaultVariants: { expanded: !1, selected: !1, cardSpacing: !1 }, compoundVariants: [[{ expanded: !0, cardSpacing: !0 }, "_11ztjeeb"]] }), U = "_11ztjeeg", X = "_11ztjeec", Y = R({ defaultClassName: "_11ztjeed", variantClassNames: { disabled: { true: "_11ztjeee", false: "_11ztjeef" } }, defaultVariants: {}, compoundVariants: [] }), M = "_11ztjeeh";
90
90
  function y({
91
91
  children: e,
92
92
  className: n,
93
93
  ...o
94
94
  }) {
95
- return /* @__PURE__ */ s.createElement("div", { className: C(q, n), ...o }, e);
95
+ return /* @__PURE__ */ s.createElement("div", { className: C(U, n), ...o }, e);
96
96
  }
97
- b.set(y, {
97
+ x.set(y, {
98
98
  name: "Content Row Expansion"
99
99
  });
100
100
  function I({
@@ -112,45 +112,54 @@ function I({
112
112
  selectable: h = !1,
113
113
  selected: g,
114
114
  renderExpandedContent: f = !0,
115
- ...V
115
+ disableSelection: z = !1,
116
+ disableExpansion: S = !1,
117
+ ...j
116
118
  }) {
117
- const [z, [R]] = A(e, [
119
+ const [F, [b]] = T(e, [
118
120
  { type: u },
119
121
  { type: y }
120
- ]), { t: F } = s.useContext(D), [j, S] = s.useState(
122
+ ]), { t: _ } = s.useContext(G), [H, E] = s.useState(
121
123
  f || t
122
- ), [_, E] = s.useState(t), p = typeof i == "boolean" ? i : _;
123
- function H(O) {
124
- O.stopPropagation(), p && (!d || d()) ? (E(!1), f || S(!1), m && m()) : !p && (!a || a()) && (E(!0), f || S(!0), w && w());
124
+ ), [O, k] = s.useState(t), p = typeof i == "boolean" ? i : O;
125
+ function A(D) {
126
+ D.stopPropagation(), p && (!d || d()) ? (k(!1), f || E(!1), m && m()) : !p && (!a || a()) && (k(!0), f || E(!0), w && w());
125
127
  }
126
- const k = () => /* @__PURE__ */ s.createElement(G, { checked: g, onChange: c }), v = () => /* @__PURE__ */ s.createElement(
128
+ const v = () => /* @__PURE__ */ s.createElement(W, { disabled: z, checked: g, onChange: c }), N = () => /* @__PURE__ */ s.createElement(
127
129
  "button",
128
130
  {
129
131
  type: "button",
130
- className: C(Q),
131
- onClick: H,
132
- "aria-label": F(`design-system:contentRow.${p ? "collapse" : "expand"}`)
132
+ className: C(X),
133
+ onClick: A,
134
+ "aria-label": _(`design-system:contentRow.${p ? "collapse" : "expand"}`),
135
+ disabled: S
133
136
  },
134
- /* @__PURE__ */ s.createElement(T, { className: C(U), icon: p ? "minus-circle" : "plus-circle" })
137
+ /* @__PURE__ */ s.createElement(
138
+ K,
139
+ {
140
+ className: C(Y({ disabled: S })),
141
+ icon: p ? "minus-circle" : "plus-circle"
142
+ }
143
+ )
135
144
  );
136
- return /* @__PURE__ */ s.createElement("div", { className: C(L({ expanded: p }), n), ...V }, /* @__PURE__ */ s.createElement(
145
+ return /* @__PURE__ */ s.createElement("div", { className: C(q({ expanded: p }), n), ...j }, /* @__PURE__ */ s.createElement(
137
146
  "div",
138
147
  {
139
148
  className: C(
140
- J({
149
+ Q({
141
150
  expanded: p,
142
151
  selected: g,
143
152
  cardSpacing: r
144
153
  })
145
154
  )
146
155
  },
147
- h && !o && /* @__PURE__ */ s.createElement(u, { widthPx: 46 }, /* @__PURE__ */ s.createElement(k, null)),
148
- R && !o && /* @__PURE__ */ s.createElement(u, { widthPx: 44 }, /* @__PURE__ */ s.createElement(v, null)),
149
- R && h && o && /* @__PURE__ */ s.createElement(u, { widthPx: 46 }, /* @__PURE__ */ s.createElement("section", { className: M }, /* @__PURE__ */ s.createElement(k, null)), /* @__PURE__ */ s.createElement("section", { className: M }, /* @__PURE__ */ s.createElement(v, null))),
150
- z
151
- ), j && R);
156
+ h && !o && /* @__PURE__ */ s.createElement(u, { widthPx: 46 }, /* @__PURE__ */ s.createElement(v, null)),
157
+ b && !o && /* @__PURE__ */ s.createElement(u, { widthPx: 44 }, /* @__PURE__ */ s.createElement(N, null)),
158
+ b && h && o && /* @__PURE__ */ s.createElement(u, { widthPx: 46 }, /* @__PURE__ */ s.createElement("section", { className: M }, /* @__PURE__ */ s.createElement(v, null)), /* @__PURE__ */ s.createElement("section", { className: M }, /* @__PURE__ */ s.createElement(N, null))),
159
+ F
160
+ ), H && b);
152
161
  }
153
- b.set(I, {
162
+ x.set(I, {
154
163
  name: "Content Row",
155
164
  props: {
156
165
  alternateLayout: { type: "boolean", default: "false" },
@@ -164,10 +173,12 @@ b.set(I, {
164
173
  onExpanded: { type: "() => void" },
165
174
  selectable: { type: "boolean", default: "false" },
166
175
  selected: { type: "boolean" },
167
- renderExpandedContent: { type: "boolean", default: "true" }
176
+ renderExpandedContent: { type: "boolean", default: "true" },
177
+ disableSelection: { type: "boolean", default: "false" },
178
+ disableExpansion: { type: "boolean", default: "false" }
168
179
  }
169
180
  });
170
- const X = {
181
+ const Z = {
171
182
  components: [I, u, y],
172
183
  examples: {
173
184
  basic: {
@@ -613,12 +624,12 @@ const X = {
613
624
  }
614
625
  }
615
626
  }
616
- }, ee = {
617
- "Content Rows": X
627
+ }, te = {
628
+ "Content Rows": Z
618
629
  };
619
630
  export {
620
631
  I as ContentRow,
621
632
  u as ContentRowCol,
622
633
  y as ContentRowExpansion,
623
- ee as MANIFEST
634
+ te as MANIFEST
624
635
  };
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- ._1mxrufv0{display:table-cell;padding:1rem;vertical-align:middle}._1mxrufv1{padding:.5rem 1rem}._1mxrufv4:not(:first-child){border-left:.0625rem solid oklch(86.84% .002 197.12)}._1mxrufv0>*{vertical-align:middle}._11ztjee1{background:oklch(100% 0 0);display:block}._11ztjee2{--_11ztjee0: block}._11ztjee3{--_11ztjee0: none}._11ztjee4{border-width:.0625rem;border-style:solid;border-color:oklch(86.84% .002 197.12);border-radius:.25rem;display:table;table-layout:fixed;width:100.06%}._11ztjee5{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}._11ztjee7{background:oklch(95.39% .015 228.96);border-color:oklch(56.21% .128 239.83)}._11ztjee9{border-radius:.25rem;margin-top:1rem}._11ztjeeb{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}._11ztjeec{background:none;border:0;padding:0}._11ztjeed{color:oklch(56.21% .128 239.83);cursor:pointer;font-size:1rem;line-height:1.125rem;padding:0;vertical-align:middle}._11ztjeed:hover{color:oklch(47.39% .101 237.12)}._11ztjeee{background:oklch(96.64% .001 197.14);border-color:oklch(86.84% .002 197.12);border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;border-style:solid;border-top-width:0;border-right-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;display:var(--_11ztjee0);padding:1rem}._11ztjeef{padding:1rem}._11ztjeef:first-child{margin:-1rem -1rem 0}._11ztjeef:last-child{border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0;border-style:solid;border-top-color:oklch(86.84% .002 197.12);margin:0 -1rem -1rem}
1
+ ._1mxrufv0{display:table-cell;padding:1rem;vertical-align:middle}._1mxrufv1{padding:.5rem 1rem}._1mxrufv4:not(:first-child){border-left:.0625rem solid oklch(86.84% .002 197.12)}._1mxrufv0>*{vertical-align:middle}._11ztjee1{background:oklch(100% 0 0);display:block}._11ztjee2{--_11ztjee0: block}._11ztjee3{--_11ztjee0: none}._11ztjee4{border-width:.0625rem;border-style:solid;border-color:oklch(86.84% .002 197.12);border-radius:.25rem;display:table;table-layout:fixed;width:100.06%}._11ztjee5{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}._11ztjee7{background:oklch(95.39% .015 228.96);border-color:oklch(56.21% .128 239.83)}._11ztjee9{border-radius:.25rem;margin-top:1rem}._11ztjeeb{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}._11ztjeec{background:none;border:0;padding:0}._11ztjeed{cursor:pointer;font-size:1rem;line-height:1.125rem;padding:0;vertical-align:middle}._11ztjeee{color:oklch(86.84% .002 197.12);cursor:not-allowed}._11ztjeef{color:oklch(56.21% .128 239.83)}._11ztjeef:hover{color:oklch(47.39% .101 237.12)}._11ztjeeg{background:oklch(96.64% .001 197.14);border-color:oklch(86.84% .002 197.12);border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;border-style:solid;border-top-width:0;border-right-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;display:var(--_11ztjee0);padding:1rem}._11ztjeeh{padding:1rem}._11ztjeeh:first-child{margin:-1rem -1rem 0}._11ztjeeh:last-child{border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0;border-style:solid;border-top-color:oklch(86.84% .002 197.12);margin:0 -1rem -1rem}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sps-woodland/content-row",
3
3
  "description": "SPS Woodland Design System page title component",
4
- "version": "8.5.1",
4
+ "version": "8.7.0",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/page-title",
@@ -30,11 +30,11 @@
30
30
  "@spscommerce/utils": "^6.12.1",
31
31
  "react": "^16.14.0",
32
32
  "react-dom": "^16.14.0",
33
- "@sps-woodland/core": "8.5.1",
34
- "@sps-woodland/tokens": "8.5.1",
35
- "@spscommerce/ds-colors": "8.5.1",
36
- "@spscommerce/ds-react": "8.5.1",
37
- "@spscommerce/ds-shared": "8.5.1"
33
+ "@sps-woodland/core": "8.7.0",
34
+ "@sps-woodland/tokens": "8.7.0",
35
+ "@spscommerce/ds-colors": "8.7.0",
36
+ "@spscommerce/ds-react": "8.7.0",
37
+ "@spscommerce/ds-shared": "8.7.0"
38
38
  },
39
39
  "devDependencies": {
40
40
  "@spscommerce/ds-illustrations": "^6.12.1",
@@ -43,11 +43,11 @@
43
43
  "@vanilla-extract/recipes": "^0.2.5",
44
44
  "react": "^16.14.0",
45
45
  "react-dom": "^16.14.0",
46
- "@sps-woodland/core": "8.5.1",
47
- "@sps-woodland/tokens": "8.5.1",
48
- "@spscommerce/ds-colors": "8.5.1",
49
- "@spscommerce/ds-react": "8.5.1",
50
- "@spscommerce/ds-shared": "8.5.1"
46
+ "@sps-woodland/core": "8.7.0",
47
+ "@sps-woodland/tokens": "8.7.0",
48
+ "@spscommerce/ds-colors": "8.7.0",
49
+ "@spscommerce/ds-react": "8.7.0",
50
+ "@spscommerce/ds-shared": "8.7.0"
51
51
  },
52
52
  "scripts": {
53
53
  "build": "pnpm run build:js && pnpm run build:types",