@sps-woodland/content-row 8.12.1 → 8.12.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.
- package/lib/content-row/ContentRow.d.ts +2 -1
- package/lib/index.cjs.js +2 -2
- package/lib/index.es.js +104 -102
- package/package.json +13 -13
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { ComponentProps } from "@sps-woodland/core";
|
|
3
|
-
export declare function ContentRow({ children, className, alternateLayout, initiallyExpanded, cardSpacing, expanded, onBeforeCollapsed, onBeforeExpanded, onSelectionChange, onCollapsed, onExpanded, selectable, selected, renderExpandedContent, disableSelection, disableExpansion, __autoLayout, __reorderable, __onOrderChange, __index, __canBeMovedUp, __canBeMovedDown, ...rest }: ComponentProps<{
|
|
3
|
+
export declare function ContentRow({ children, className, alternateLayout, initiallyExpanded, cardSpacing, expanded, onBeforeCollapsed, onBeforeExpanded, onSelectionChange, onCollapsed, onExpanded, selectable, selected, renderExpandedContent, disableSelection, disableExpansion, hideExpansionControl, __autoLayout, __reorderable, __onOrderChange, __index, __canBeMovedUp, __canBeMovedDown, ...rest }: ComponentProps<{
|
|
4
4
|
alternateLayout?: boolean;
|
|
5
5
|
initiallyExpanded?: boolean;
|
|
6
6
|
cardSpacing?: boolean;
|
|
@@ -15,6 +15,7 @@ export declare function ContentRow({ children, className, alternateLayout, initi
|
|
|
15
15
|
renderExpandedContent?: boolean;
|
|
16
16
|
disableSelection?: boolean;
|
|
17
17
|
disableExpansion?: boolean;
|
|
18
|
+
hideExpansionControl?: boolean;
|
|
18
19
|
__autoLayout?: boolean;
|
|
19
20
|
__reorderable?: boolean;
|
|
20
21
|
__onOrderChange?: (currentIndex: number, newIndex: number) => void;
|
package/lib/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ae=require("react"),r=require("@sps-woodland/core"),K=require("@sps-woodland/buttons"),G=require("@spscommerce/ds-react"),k=require("@spscommerce/ds-shared"),p=require("@spscommerce/utils");function re(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(a,o,n.get?n:{enumerable:!0,get:()=>t[o]})}}return a.default=t,Object.freeze(a)}const e=re(ae);function se(t,a,o){return a in t?Object.defineProperty(t,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[a]=o,t}function J(t,a){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);a&&(n=n.filter(function(s){return Object.getOwnPropertyDescriptor(t,s).enumerable})),o.push.apply(o,n)}return o}function U(t){for(var a=1;a<arguments.length;a++){var o=arguments[a]!=null?arguments[a]:{};a%2?J(Object(o),!0).forEach(function(n){se(t,n,o[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):J(Object(o)).forEach(function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(o,n))})}return t}var le=(t,a,o)=>{for(var n of Object.keys(t)){var s;if(t[n]!==((s=a[n])!==null&&s!==void 0?s:o[n]))return!1}return!0},u=t=>a=>{var o=t.defaultClassName,n=U(U({},t.defaultVariants),a);for(var s in n){var d,m=(d=n[s])!==null&&d!==void 0?d:t.defaultVariants[s];if(m!=null){var l=m;typeof l=="boolean"&&(l=l===!0?"true":"false");var y=t.variantClassNames[s][l];y&&(o+=" "+y)}}for(var[C,f]of t.compoundVariants)le(C,n,t.defaultVariants)&&(o+=" "+f);return o},de=u({defaultClassName:"_1mxrufv0",variantClassNames:{lean:{true:"_1mxrufv1",false:"_1mxrufv2"},borderless:{true:"_1mxrufv3",false:"_1mxrufv4"},wrapContent:{true:"_1mxrufv5",false:"_1mxrufv6"}},defaultVariants:{lean:!1,borderless:!1,wrapContent:!1},compoundVariants:[]}),ce=u({defaultClassName:"_1mxrufv7",variantClassNames:{lean:{true:"_1mxrufv8",false:"_1mxrufv9"},borderless:{true:"_1mxrufva",false:"_1mxrufvb"},wrapContent:{true:"_1mxrufvc",false:"_1mxrufvd"}},defaultVariants:{lean:!1,borderless:!1,wrapContent:!1},compoundVariants:[]});function i({children:t,className:a,borderless:o,lean:n,widthPx:s,widthRem:d,style:m,wrapContent:l=!1,__autoLayout:y=!1,...C}){const f=s?s/16:d,w=f?{...m,width:`${f}rem`}:m;return y?e.createElement("td",{className:r.cl(ce({lean:n,borderless:o,wrapContent:l}),a),...C,style:w},t):e.createElement("div",{className:r.cl(de({lean:n,borderless:o,wrapContent:l}),a),...C,style:w},t)}r.Metadata.set(i,{name:"Content Row Col",props:{borderless:{type:"boolean"},lean:{type:"boolean"},widthPx:{type:"number"},widthRem:{type:"number"},wrapContent:{type:"boolean"}}});var ie=u({defaultClassName:"_11ztjee4",variantClassNames:{expanded:{true:"_11ztjee5",false:"_11ztjee6"}},defaultVariants:{expanded:!1},compoundVariants:[]}),me=u({defaultClassName:"_11ztjee7",variantClassNames:{cardSpacing:{true:"_11ztjee8",false:"_11ztjee9"},expanded:{true:"_11ztjeea",false:"_11ztjeeb"},selected:{true:"_11ztjeec",false:"_11ztjeed"},reorderable:{true:"_11ztjeee",false:"_11ztjeef"}},defaultVariants:{expanded:!1,selected:!1,cardSpacing:!1},compoundVariants:[[{expanded:!0,cardSpacing:!0},"_11ztjeeg"]]}),Q=u({defaultClassName:"_11ztjeer",variantClassNames:{__autoLayout:{true:"_11ztjees",false:"_11ztjeet"}},defaultVariants:{__autoLayout:!1},compoundVariants:[]}),ue=u({defaultClassName:"_11ztjeeh",variantClassNames:{selected:{true:"_11ztjeei",false:"_11ztjeej"},expanded:{true:"_11ztjeek",false:"_11ztjeel"}},defaultVariants:{selected:!1,expanded:!1},compoundVariants:[]}),pe="_11ztjeem",Ce="_11ztjeen",fe=u({defaultClassName:"_11ztjeeo",variantClassNames:{disabled:{true:"_11ztjeep",false:"_11ztjeeq"}},defaultVariants:{},compoundVariants:[]}),we="_11ztjee10",be="_11ztjee11",Re="_11ztjeez",X=u({defaultClassName:"_11ztjee12",variantClassNames:{disabled:{true:"_11ztjee13",false:"_11ztjee14"},up:{true:"_11ztjee15",false:"_11ztjee16"},down:{true:"_11ztjee17",false:"_11ztjee18"}},defaultVariants:{disabled:!1,up:!1,down:!1},compoundVariants:[]}),ye="_11ztjeev",Y=u({defaultClassName:"_11ztjeew",variantClassNames:{reorderable:{true:"_11ztjeex",false:"_11ztjeey"}},defaultVariants:{reorderable:!1},compoundVariants:[]}),z="_11ztjeeu";function V({children:t,className:a,__autoLayout:o=!1,...n}){return o?e.createElement("tr",null,e.createElement("td",{className:r.cl(Q({__autoLayout:o}),a),colSpan:100,...n},t)):e.createElement("div",{className:r.cl(Q({__autoLayout:o}),a),...n},t)}r.Metadata.set(V,{name:"Content Row Expansion"});function F({children:t,className:a,alternateLayout:o=!1,initiallyExpanded:n=!1,cardSpacing:s=!1,expanded:d,onBeforeCollapsed:m,onBeforeExpanded:l,onSelectionChange:y,onCollapsed:C,onExpanded:f,selectable:w=!1,selected:P,renderExpandedContent:S=!0,disableSelection:$=!1,disableExpansion:O=!1,hideExpansionControl:h=!1,__autoLayout:N=!1,__reorderable:x=!1,__onOrderChange:v=()=>{},__index:c=0,__canBeMovedUp:H,__canBeMovedDown:_,...A}){const[D,[E]]=r.selectChildren(t,[{type:i},{type:V}]),{t:ee}=e.useContext(r.I18nContext),[T,L]=e.useState(!N&&S?S:n),[te,W]=e.useState(n),b=typeof d=="boolean"?d:te,[M,I]=e.useState((c+1).toString()||"");e.useEffect(()=>{I((c+1).toString()||"")},[c]);function oe(R){I(R.target.value)}function q(){Number(M)?v(c,Number(M)-1):(I((c+1).toString()||""),v(c,c))}function ne(R){R.stopPropagation(),b&&(!m||m())?(W(!1),(!S||N)&&L(!1),C&&C()):!b&&(!l||l())&&(W(!0),(!S||N)&&L(!0),f&&f())}const g=()=>e.createElement(G.SpsCheckbox,{disabled:$,checked:P,onChange:y}),j=e.createElement("button",{type:"button",className:r.cl(Ce),onClick:ne,"aria-label":ee(`design-system:contentRow.${b?"collapse":"expand"}`),disabled:O},e.createElement(r.Icon,{className:r.cl(fe({disabled:O})),icon:b?"minus-circle":"plus-circle"}));if(N){const R=e.createElement("tr",null,e.createElement("td",{className:r.cl(pe),colSpan:100}));return e.createElement(e.Fragment,null,e.createElement("tr",{className:r.cl(ue({selected:P,expanded:b})),...A},w&&!o&&e.createElement(i,{widthPx:46,__autoLayout:!0},e.createElement(g,null)),E&&!o&&!h&&e.createElement(i,{widthPx:44,__autoLayout:!0},j),E&&w&&o&&e.createElement(i,{widthPx:46,__autoLayout:!0},h?e.createElement(g,null):e.createElement(e.Fragment,null,e.createElement("section",{className:z},e.createElement(g,null)),e.createElement("section",{className:z},j))),D),T&&E,R)}const B=e.createElement("div",{className:r.cl(ie({expanded:b}),a),...A},e.createElement("div",{className:r.cl(me({expanded:b,selected:P,cardSpacing:s,reorderable:x}))},x&&e.createElement(i,{widthPx:53,style:{position:"relative"}},e.createElement("section",{className:Y({reorderable:x})},e.createElement(K.Button,{className:X({up:!0,disabled:!H}),kind:k.ButtonKind.ICON,icon:k.SpsIcon.CHEVRON_UP,onClick:()=>v(c,c-1),disabled:!H})),e.createElement("section",{className:Y({reorderable:x})},e.createElement(K.Button,{className:X({down:!0,disabled:!_}),kind:k.ButtonKind.ICON,icon:k.SpsIcon.CHEVRON_DOWN,onClick:()=>v(c,c+1),disabled:!_}))),w&&!o&&e.createElement(i,{widthPx:46},e.createElement(g,null)),E&&!o&&!h&&e.createElement(i,{widthPx:44},j),E&&w&&o&&e.createElement(i,{widthPx:46},h?e.createElement(g,null):e.createElement(e.Fragment,null,e.createElement("section",{className:z},e.createElement(g,null)),e.createElement("section",{className:z},j))),D),T&&E);return x?e.createElement("div",{className:ye},x&&e.createElement("div",{className:r.cl(Re,a)},e.createElement("div",{className:we},e.createElement(G.SpsTextInput,{className:be,value:M,onChange:oe,onBlur:()=>q(),onKeyUp:R=>{R.key==="Enter"&&q()},notClearable:!0}))),B):B}r.Metadata.set(F,{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"},hideExpansionControl:{type:"boolean",default:"false"}}});var xe=u({defaultClassName:"_1wuky9j0",variantClassNames:{wrapContent:{true:"_1wuky9j1",false:"_1wuky9j2"}},defaultVariants:{wrapContent:!1},compoundVariants:[]});const Ee=new Set(["Content Row","Content Row Col","Content Row Expansion","Sorting Header","Sorting Header Cell"]);function Z({children:t,className:a,wrapContent:o=!1,...n}){const s=e.useMemo(()=>r.modChildren(t,l=>r.Metadata.isWoodlandComponent(l.type)&&Ee.has(r.Metadata.get(l.type).name)?[{__autoLayout:!0}]:[{}]),[t]),[[d],m]=e.useMemo(()=>r.selectChildren(s,[{type:l=>!!(r.Metadata.isWoodlandComponent(l.type)&&r.Metadata.get(l.type).name==="Sorting Header")}]),[s]);return e.createElement("table",{className:r.cl(xe({wrapContent:o}),a),...n},d?e.createElement("thead",null,d):null,e.createElement("tbody",null,m))}r.Metadata.set(Z,{name:"Row List Auto Layout",props:{wrapContent:{type:"boolean",default:"false"}}});const ge={components:[F,i,V],examples:{basic:{label:"Content Rows",examples:{basic:{react:p.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";
|
|
@@ -398,4 +398,4 @@
|
|
|
398
398
|
</>
|
|
399
399
|
)
|
|
400
400
|
}
|
|
401
|
-
`}}}}},
|
|
401
|
+
`}}}}},Se={"Content Rows":ge};exports.ContentRow=F;exports.ContentRowCol=i;exports.ContentRowExpansion=V;exports.MANIFEST=Se;exports.RowListAutoLayout=Z;
|
package/lib/index.es.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
|
-
import { Metadata as C, cl as l, selectChildren as
|
|
3
|
-
import { Button as
|
|
4
|
-
import { SpsTextInput as
|
|
5
|
-
import { ButtonKind as
|
|
2
|
+
import { Metadata as C, cl as l, selectChildren as Z, I18nContext as re, Icon as se, modChildren as le } from "@sps-woodland/core";
|
|
3
|
+
import { Button as B } from "@sps-woodland/buttons";
|
|
4
|
+
import { SpsTextInput as ie, SpsCheckbox as de } from "@spscommerce/ds-react";
|
|
5
|
+
import { ButtonKind as G, SpsIcon as q } from "@spscommerce/ds-shared";
|
|
6
6
|
import { code as u } from "@spscommerce/utils";
|
|
7
|
-
function
|
|
7
|
+
function ce(t, a, o) {
|
|
8
8
|
return a in t ? Object.defineProperty(t, a, {
|
|
9
9
|
value: o,
|
|
10
10
|
enumerable: !0,
|
|
@@ -12,7 +12,7 @@ function de(t, a, o) {
|
|
|
12
12
|
writable: !0
|
|
13
13
|
}) : t[a] = o, t;
|
|
14
14
|
}
|
|
15
|
-
function
|
|
15
|
+
function J(t, a) {
|
|
16
16
|
var o = Object.keys(t);
|
|
17
17
|
if (Object.getOwnPropertySymbols) {
|
|
18
18
|
var n = Object.getOwnPropertySymbols(t);
|
|
@@ -22,18 +22,18 @@ function q(t, a) {
|
|
|
22
22
|
}
|
|
23
23
|
return o;
|
|
24
24
|
}
|
|
25
|
-
function
|
|
25
|
+
function U(t) {
|
|
26
26
|
for (var a = 1; a < arguments.length; a++) {
|
|
27
27
|
var o = arguments[a] != null ? arguments[a] : {};
|
|
28
|
-
a % 2 ?
|
|
29
|
-
|
|
30
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(o)) :
|
|
28
|
+
a % 2 ? J(Object(o), !0).forEach(function(n) {
|
|
29
|
+
ce(t, n, o[n]);
|
|
30
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(o)) : J(Object(o)).forEach(function(n) {
|
|
31
31
|
Object.defineProperty(t, n, Object.getOwnPropertyDescriptor(o, n));
|
|
32
32
|
});
|
|
33
33
|
}
|
|
34
34
|
return t;
|
|
35
35
|
}
|
|
36
|
-
var
|
|
36
|
+
var me = (t, a, o) => {
|
|
37
37
|
for (var n of Object.keys(t)) {
|
|
38
38
|
var r;
|
|
39
39
|
if (t[n] !== ((r = a[n]) !== null && r !== void 0 ? r : o[n]))
|
|
@@ -41,7 +41,7 @@ var ce = (t, a, o) => {
|
|
|
41
41
|
}
|
|
42
42
|
return !0;
|
|
43
43
|
}, p = (t) => (a) => {
|
|
44
|
-
var o = t.defaultClassName, n =
|
|
44
|
+
var o = t.defaultClassName, n = U(U({}, t.defaultVariants), a);
|
|
45
45
|
for (var r in n) {
|
|
46
46
|
var i, c = (i = n[r]) !== null && i !== void 0 ? i : t.defaultVariants[r];
|
|
47
47
|
if (c != null) {
|
|
@@ -55,9 +55,9 @@ var ce = (t, a, o) => {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
for (var [f, w] of t.compoundVariants)
|
|
58
|
-
|
|
58
|
+
me(f, n, t.defaultVariants) && (o += " " + w);
|
|
59
59
|
return o;
|
|
60
|
-
},
|
|
60
|
+
}, pe = p({ defaultClassName: "_1mxrufv0", variantClassNames: { lean: { true: "_1mxrufv1", false: "_1mxrufv2" }, borderless: { true: "_1mxrufv3", false: "_1mxrufv4" }, wrapContent: { true: "_1mxrufv5", false: "_1mxrufv6" } }, defaultVariants: { lean: !1, borderless: !1, wrapContent: !1 }, compoundVariants: [] }), ue = p({ defaultClassName: "_1mxrufv7", variantClassNames: { lean: { true: "_1mxrufv8", false: "_1mxrufv9" }, borderless: { true: "_1mxrufva", false: "_1mxrufvb" }, wrapContent: { true: "_1mxrufvc", false: "_1mxrufvd" } }, defaultVariants: { lean: !1, borderless: !1, wrapContent: !1 }, compoundVariants: [] });
|
|
61
61
|
function m({
|
|
62
62
|
children: t,
|
|
63
63
|
className: a,
|
|
@@ -77,7 +77,7 @@ function m({
|
|
|
77
77
|
return x ? /* @__PURE__ */ e.createElement(
|
|
78
78
|
"td",
|
|
79
79
|
{
|
|
80
|
-
className: l(
|
|
80
|
+
className: l(ue({ lean: n, borderless: o, wrapContent: s }), a),
|
|
81
81
|
...f,
|
|
82
82
|
style: b
|
|
83
83
|
},
|
|
@@ -85,7 +85,7 @@ function m({
|
|
|
85
85
|
) : /* @__PURE__ */ e.createElement(
|
|
86
86
|
"div",
|
|
87
87
|
{
|
|
88
|
-
className: l(
|
|
88
|
+
className: l(pe({ lean: n, borderless: o, wrapContent: s }), a),
|
|
89
89
|
...f,
|
|
90
90
|
style: b
|
|
91
91
|
},
|
|
@@ -102,8 +102,8 @@ C.set(m, {
|
|
|
102
102
|
wrapContent: { type: "boolean" }
|
|
103
103
|
}
|
|
104
104
|
});
|
|
105
|
-
var
|
|
106
|
-
function
|
|
105
|
+
var Ce = p({ defaultClassName: "_11ztjee4", variantClassNames: { expanded: { true: "_11ztjee5", false: "_11ztjee6" } }, defaultVariants: { expanded: !1 }, compoundVariants: [] }), fe = p({ defaultClassName: "_11ztjee7", variantClassNames: { cardSpacing: { true: "_11ztjee8", false: "_11ztjee9" }, expanded: { true: "_11ztjeea", false: "_11ztjeeb" }, selected: { true: "_11ztjeec", false: "_11ztjeed" }, reorderable: { true: "_11ztjeee", false: "_11ztjeef" } }, defaultVariants: { expanded: !1, selected: !1, cardSpacing: !1 }, compoundVariants: [[{ expanded: !0, cardSpacing: !0 }, "_11ztjeeg"]] }), Q = p({ defaultClassName: "_11ztjeer", variantClassNames: { __autoLayout: { true: "_11ztjees", false: "_11ztjeet" } }, defaultVariants: { __autoLayout: !1 }, compoundVariants: [] }), we = p({ defaultClassName: "_11ztjeeh", variantClassNames: { selected: { true: "_11ztjeei", false: "_11ztjeej" }, expanded: { true: "_11ztjeek", false: "_11ztjeel" } }, defaultVariants: { selected: !1, expanded: !1 }, compoundVariants: [] }), be = "_11ztjeem", Re = "_11ztjeen", ye = p({ defaultClassName: "_11ztjeeo", variantClassNames: { disabled: { true: "_11ztjeep", false: "_11ztjeeq" } }, defaultVariants: {}, compoundVariants: [] }), xe = "_11ztjee10", Ee = "_11ztjee11", ge = "_11ztjeez", X = p({ defaultClassName: "_11ztjee12", variantClassNames: { disabled: { true: "_11ztjee13", false: "_11ztjee14" }, up: { true: "_11ztjee15", false: "_11ztjee16" }, down: { true: "_11ztjee17", false: "_11ztjee18" } }, defaultVariants: { disabled: !1, up: !1, down: !1 }, compoundVariants: [] }), he = "_11ztjeev", Y = p({ defaultClassName: "_11ztjeew", variantClassNames: { reorderable: { true: "_11ztjeex", false: "_11ztjeey" } }, defaultVariants: { reorderable: !1 }, compoundVariants: [] }), j = "_11ztjeeu";
|
|
106
|
+
function M({
|
|
107
107
|
children: t,
|
|
108
108
|
className: a,
|
|
109
109
|
__autoLayout: o = !1,
|
|
@@ -112,17 +112,17 @@ function I({
|
|
|
112
112
|
return o ? /* @__PURE__ */ e.createElement("tr", null, /* @__PURE__ */ e.createElement(
|
|
113
113
|
"td",
|
|
114
114
|
{
|
|
115
|
-
className: l(
|
|
115
|
+
className: l(Q({ __autoLayout: o }), a),
|
|
116
116
|
colSpan: 100,
|
|
117
117
|
...n
|
|
118
118
|
},
|
|
119
119
|
t
|
|
120
|
-
)) : /* @__PURE__ */ e.createElement("div", { className: l(
|
|
120
|
+
)) : /* @__PURE__ */ e.createElement("div", { className: l(Q({ __autoLayout: o }), a), ...n }, t);
|
|
121
121
|
}
|
|
122
|
-
C.set(
|
|
122
|
+
C.set(M, {
|
|
123
123
|
name: "Content Row Expansion"
|
|
124
124
|
});
|
|
125
|
-
function
|
|
125
|
+
function $({
|
|
126
126
|
children: t,
|
|
127
127
|
className: a,
|
|
128
128
|
alternateLayout: o = !1,
|
|
@@ -135,115 +135,116 @@ function Z({
|
|
|
135
135
|
onCollapsed: f,
|
|
136
136
|
onExpanded: w,
|
|
137
137
|
selectable: b = !1,
|
|
138
|
-
selected:
|
|
139
|
-
renderExpandedContent:
|
|
140
|
-
disableSelection:
|
|
141
|
-
disableExpansion:
|
|
142
|
-
|
|
138
|
+
selected: V,
|
|
139
|
+
renderExpandedContent: N = !0,
|
|
140
|
+
disableSelection: ee = !1,
|
|
141
|
+
disableExpansion: F = !1,
|
|
142
|
+
hideExpansionControl: S = !1,
|
|
143
|
+
__autoLayout: v = !1,
|
|
143
144
|
__reorderable: E = !1,
|
|
144
|
-
__onOrderChange:
|
|
145
|
+
__onOrderChange: k = () => {
|
|
145
146
|
},
|
|
146
147
|
__index: d = 0,
|
|
147
|
-
__canBeMovedUp:
|
|
148
|
-
__canBeMovedDown:
|
|
149
|
-
...
|
|
148
|
+
__canBeMovedUp: H,
|
|
149
|
+
__canBeMovedDown: O,
|
|
150
|
+
..._
|
|
150
151
|
}) {
|
|
151
|
-
const [
|
|
152
|
+
const [A, [g]] = Z(t, [
|
|
152
153
|
{ type: m },
|
|
153
|
-
{ type:
|
|
154
|
-
]), { t:
|
|
155
|
-
!
|
|
156
|
-
), [
|
|
154
|
+
{ type: M }
|
|
155
|
+
]), { t: te } = e.useContext(re), [D, T] = e.useState(
|
|
156
|
+
!v && N ? N : n
|
|
157
|
+
), [oe, L] = e.useState(n), R = typeof i == "boolean" ? i : oe, [P, I] = e.useState((d + 1).toString() || "");
|
|
157
158
|
e.useEffect(() => {
|
|
158
|
-
|
|
159
|
+
I((d + 1).toString() || "");
|
|
159
160
|
}, [d]);
|
|
160
|
-
function
|
|
161
|
-
|
|
161
|
+
function ne(y) {
|
|
162
|
+
I(y.target.value);
|
|
162
163
|
}
|
|
163
|
-
function
|
|
164
|
-
Number(
|
|
164
|
+
function W() {
|
|
165
|
+
Number(P) ? k(d, Number(P) - 1) : (I((d + 1).toString() || ""), k(d, d));
|
|
165
166
|
}
|
|
166
|
-
function
|
|
167
|
-
y.stopPropagation(), R && (!c || c()) ? (
|
|
167
|
+
function ae(y) {
|
|
168
|
+
y.stopPropagation(), R && (!c || c()) ? (L(!1), (!N || v) && T(!1), f && f()) : !R && (!s || s()) && (L(!0), (!N || v) && T(!0), w && w());
|
|
168
169
|
}
|
|
169
|
-
const
|
|
170
|
+
const h = () => /* @__PURE__ */ e.createElement(de, { disabled: ee, checked: V, onChange: x }), z = /* @__PURE__ */ e.createElement(
|
|
170
171
|
"button",
|
|
171
172
|
{
|
|
172
173
|
type: "button",
|
|
173
|
-
className: l(
|
|
174
|
-
onClick:
|
|
175
|
-
"aria-label":
|
|
176
|
-
disabled:
|
|
174
|
+
className: l(Re),
|
|
175
|
+
onClick: ae,
|
|
176
|
+
"aria-label": te(`design-system:contentRow.${R ? "collapse" : "expand"}`),
|
|
177
|
+
disabled: F
|
|
177
178
|
},
|
|
178
179
|
/* @__PURE__ */ e.createElement(
|
|
179
|
-
|
|
180
|
+
se,
|
|
180
181
|
{
|
|
181
|
-
className: l(
|
|
182
|
+
className: l(ye({ disabled: F })),
|
|
182
183
|
icon: R ? "minus-circle" : "plus-circle"
|
|
183
184
|
}
|
|
184
185
|
)
|
|
185
186
|
);
|
|
186
|
-
if (
|
|
187
|
-
const y = /* @__PURE__ */ e.createElement("tr", null, /* @__PURE__ */ e.createElement("td", { className: l(
|
|
188
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("tr", { className: l(
|
|
187
|
+
if (v) {
|
|
188
|
+
const y = /* @__PURE__ */ e.createElement("tr", null, /* @__PURE__ */ e.createElement("td", { className: l(be), colSpan: 100 }));
|
|
189
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("tr", { className: l(we({ selected: V, expanded: R })), ..._ }, b && !o && /* @__PURE__ */ e.createElement(m, { widthPx: 46, __autoLayout: !0 }, /* @__PURE__ */ e.createElement(h, null)), g && !o && !S && /* @__PURE__ */ e.createElement(m, { widthPx: 44, __autoLayout: !0 }, z), g && b && o && /* @__PURE__ */ e.createElement(m, { widthPx: 46, __autoLayout: !0 }, S ? /* @__PURE__ */ e.createElement(h, null) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("section", { className: j }, /* @__PURE__ */ e.createElement(h, null)), /* @__PURE__ */ e.createElement("section", { className: j }, z))), A), D && g, y);
|
|
189
190
|
}
|
|
190
|
-
const
|
|
191
|
+
const K = /* @__PURE__ */ e.createElement("div", { className: l(Ce({ expanded: R }), a), ..._ }, /* @__PURE__ */ e.createElement(
|
|
191
192
|
"div",
|
|
192
193
|
{
|
|
193
194
|
className: l(
|
|
194
|
-
|
|
195
|
+
fe({
|
|
195
196
|
expanded: R,
|
|
196
|
-
selected:
|
|
197
|
+
selected: V,
|
|
197
198
|
cardSpacing: r,
|
|
198
199
|
reorderable: E
|
|
199
200
|
})
|
|
200
201
|
)
|
|
201
202
|
},
|
|
202
|
-
E && /* @__PURE__ */ e.createElement(m, { widthPx: 53, style: { position: "relative" } }, /* @__PURE__ */ e.createElement("section", { className:
|
|
203
|
-
|
|
203
|
+
E && /* @__PURE__ */ e.createElement(m, { widthPx: 53, style: { position: "relative" } }, /* @__PURE__ */ e.createElement("section", { className: Y({ reorderable: E }) }, /* @__PURE__ */ e.createElement(
|
|
204
|
+
B,
|
|
204
205
|
{
|
|
205
|
-
className:
|
|
206
|
+
className: X({
|
|
206
207
|
up: !0,
|
|
207
|
-
disabled: !
|
|
208
|
+
disabled: !H
|
|
208
209
|
}),
|
|
209
|
-
kind:
|
|
210
|
-
icon:
|
|
211
|
-
onClick: () =>
|
|
212
|
-
disabled: !
|
|
210
|
+
kind: G.ICON,
|
|
211
|
+
icon: q.CHEVRON_UP,
|
|
212
|
+
onClick: () => k(d, d - 1),
|
|
213
|
+
disabled: !H
|
|
213
214
|
}
|
|
214
|
-
)), /* @__PURE__ */ e.createElement("section", { className:
|
|
215
|
-
|
|
215
|
+
)), /* @__PURE__ */ e.createElement("section", { className: Y({ reorderable: E }) }, /* @__PURE__ */ e.createElement(
|
|
216
|
+
B,
|
|
216
217
|
{
|
|
217
|
-
className:
|
|
218
|
+
className: X({
|
|
218
219
|
down: !0,
|
|
219
|
-
disabled: !
|
|
220
|
+
disabled: !O
|
|
220
221
|
}),
|
|
221
|
-
kind:
|
|
222
|
-
icon:
|
|
223
|
-
onClick: () =>
|
|
224
|
-
disabled: !
|
|
222
|
+
kind: G.ICON,
|
|
223
|
+
icon: q.CHEVRON_DOWN,
|
|
224
|
+
onClick: () => k(d, d + 1),
|
|
225
|
+
disabled: !O
|
|
225
226
|
}
|
|
226
227
|
))),
|
|
227
|
-
b && !o && /* @__PURE__ */ e.createElement(m, { widthPx: 46 }, /* @__PURE__ */ e.createElement(
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
),
|
|
232
|
-
return E ? /* @__PURE__ */ e.createElement("div", { className: he }, E && /* @__PURE__ */ e.createElement("div", { className: l(
|
|
233
|
-
|
|
228
|
+
b && !o && /* @__PURE__ */ e.createElement(m, { widthPx: 46 }, /* @__PURE__ */ e.createElement(h, null)),
|
|
229
|
+
g && !o && !S && /* @__PURE__ */ e.createElement(m, { widthPx: 44 }, z),
|
|
230
|
+
g && b && o && /* @__PURE__ */ e.createElement(m, { widthPx: 46 }, S ? /* @__PURE__ */ e.createElement(h, null) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("section", { className: j }, /* @__PURE__ */ e.createElement(h, null)), /* @__PURE__ */ e.createElement("section", { className: j }, z))),
|
|
231
|
+
A
|
|
232
|
+
), D && g);
|
|
233
|
+
return E ? /* @__PURE__ */ e.createElement("div", { className: he }, E && /* @__PURE__ */ e.createElement("div", { className: l(ge, a) }, /* @__PURE__ */ e.createElement("div", { className: xe }, /* @__PURE__ */ e.createElement(
|
|
234
|
+
ie,
|
|
234
235
|
{
|
|
235
|
-
className:
|
|
236
|
-
value:
|
|
237
|
-
onChange:
|
|
238
|
-
onBlur: () =>
|
|
236
|
+
className: Ee,
|
|
237
|
+
value: P,
|
|
238
|
+
onChange: ne,
|
|
239
|
+
onBlur: () => W(),
|
|
239
240
|
onKeyUp: (y) => {
|
|
240
|
-
y.key === "Enter" &&
|
|
241
|
+
y.key === "Enter" && W();
|
|
241
242
|
},
|
|
242
243
|
notClearable: !0
|
|
243
244
|
}
|
|
244
|
-
))),
|
|
245
|
+
))), K) : K;
|
|
245
246
|
}
|
|
246
|
-
C.set(
|
|
247
|
+
C.set($, {
|
|
247
248
|
name: "Content Row",
|
|
248
249
|
props: {
|
|
249
250
|
alternateLayout: { type: "boolean", default: "false" },
|
|
@@ -259,18 +260,19 @@ C.set(Z, {
|
|
|
259
260
|
selected: { type: "boolean" },
|
|
260
261
|
renderExpandedContent: { type: "boolean", default: "true" },
|
|
261
262
|
disableSelection: { type: "boolean", default: "false" },
|
|
262
|
-
disableExpansion: { type: "boolean", default: "false" }
|
|
263
|
+
disableExpansion: { type: "boolean", default: "false" },
|
|
264
|
+
hideExpansionControl: { type: "boolean", default: "false" }
|
|
263
265
|
}
|
|
264
266
|
});
|
|
265
|
-
var
|
|
266
|
-
const
|
|
267
|
+
var Ne = p({ defaultClassName: "_1wuky9j0", variantClassNames: { wrapContent: { true: "_1wuky9j1", false: "_1wuky9j2" } }, defaultVariants: { wrapContent: !1 }, compoundVariants: [] });
|
|
268
|
+
const Se = /* @__PURE__ */ new Set([
|
|
267
269
|
"Content Row",
|
|
268
270
|
"Content Row Col",
|
|
269
271
|
"Content Row Expansion",
|
|
270
272
|
"Sorting Header",
|
|
271
273
|
"Sorting Header Cell"
|
|
272
274
|
]);
|
|
273
|
-
function
|
|
275
|
+
function ve({
|
|
274
276
|
children: t,
|
|
275
277
|
className: a,
|
|
276
278
|
wrapContent: o = !1,
|
|
@@ -279,7 +281,7 @@ function Se({
|
|
|
279
281
|
const r = e.useMemo(
|
|
280
282
|
() => (
|
|
281
283
|
// eslint-disable-next-line implicit-arrow-linebreak
|
|
282
|
-
|
|
284
|
+
le(t, (s) => C.isWoodlandComponent(s.type) && Se.has(C.get(s.type).name) ? [
|
|
283
285
|
{
|
|
284
286
|
__autoLayout: !0
|
|
285
287
|
}
|
|
@@ -289,7 +291,7 @@ function Se({
|
|
|
289
291
|
), [[i], c] = e.useMemo(
|
|
290
292
|
() => (
|
|
291
293
|
// eslint-disable-next-line implicit-arrow-linebreak
|
|
292
|
-
|
|
294
|
+
Z(r, [
|
|
293
295
|
{
|
|
294
296
|
type: (s) => !!(C.isWoodlandComponent(s.type) && C.get(s.type).name === "Sorting Header")
|
|
295
297
|
}
|
|
@@ -297,16 +299,16 @@ function Se({
|
|
|
297
299
|
),
|
|
298
300
|
[r]
|
|
299
301
|
);
|
|
300
|
-
return /* @__PURE__ */ e.createElement("table", { className: l(
|
|
302
|
+
return /* @__PURE__ */ e.createElement("table", { className: l(Ne({ wrapContent: o }), a), ...n }, i ? /* @__PURE__ */ e.createElement("thead", null, i) : null, /* @__PURE__ */ e.createElement("tbody", null, c));
|
|
301
303
|
}
|
|
302
|
-
C.set(
|
|
304
|
+
C.set(ve, {
|
|
303
305
|
name: "Row List Auto Layout",
|
|
304
306
|
props: {
|
|
305
307
|
wrapContent: { type: "boolean", default: "false" }
|
|
306
308
|
}
|
|
307
309
|
});
|
|
308
|
-
const
|
|
309
|
-
components: [
|
|
310
|
+
const ke = {
|
|
311
|
+
components: [$, m, M],
|
|
310
312
|
examples: {
|
|
311
313
|
basic: {
|
|
312
314
|
label: "Content Rows",
|
|
@@ -1095,13 +1097,13 @@ const ve = {
|
|
|
1095
1097
|
// },
|
|
1096
1098
|
// },
|
|
1097
1099
|
}
|
|
1098
|
-
},
|
|
1099
|
-
"Content Rows":
|
|
1100
|
+
}, Me = {
|
|
1101
|
+
"Content Rows": ke
|
|
1100
1102
|
};
|
|
1101
1103
|
export {
|
|
1102
|
-
|
|
1104
|
+
$ as ContentRow,
|
|
1103
1105
|
m as ContentRowCol,
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1106
|
+
M as ContentRowExpansion,
|
|
1107
|
+
Me as MANIFEST,
|
|
1108
|
+
ve as RowListAutoLayout
|
|
1107
1109
|
};
|
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.12.
|
|
4
|
+
"version": "8.12.2",
|
|
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,12 +30,12 @@
|
|
|
30
30
|
"@spscommerce/utils": "^7.0.0",
|
|
31
31
|
"react": "^16.14.0",
|
|
32
32
|
"react-dom": "^16.14.0",
|
|
33
|
-
"@sps-woodland/core": "8.12.
|
|
34
|
-
"@sps-woodland/tokens": "8.12.
|
|
35
|
-
"@sps-woodland/buttons": "8.12.
|
|
36
|
-
"@spscommerce/ds-colors": "8.12.
|
|
37
|
-
"@spscommerce/ds-react": "8.12.
|
|
38
|
-
"@spscommerce/ds-shared": "8.12.
|
|
33
|
+
"@sps-woodland/core": "8.12.2",
|
|
34
|
+
"@sps-woodland/tokens": "8.12.2",
|
|
35
|
+
"@sps-woodland/buttons": "8.12.2",
|
|
36
|
+
"@spscommerce/ds-colors": "8.12.2",
|
|
37
|
+
"@spscommerce/ds-react": "8.12.2",
|
|
38
|
+
"@spscommerce/ds-shared": "8.12.2"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@spscommerce/ds-illustrations": "^6.12.1",
|
|
@@ -44,12 +44,12 @@
|
|
|
44
44
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
45
45
|
"react": "^16.14.0",
|
|
46
46
|
"react-dom": "^16.14.0",
|
|
47
|
-
"@sps-woodland/core": "8.12.
|
|
48
|
-
"@sps-woodland/tokens": "8.12.
|
|
49
|
-
"@sps-woodland/buttons": "8.12.
|
|
50
|
-
"@spscommerce/ds-colors": "8.12.
|
|
51
|
-
"@spscommerce/ds-react": "8.12.
|
|
52
|
-
"@spscommerce/ds-shared": "8.12.
|
|
47
|
+
"@sps-woodland/core": "8.12.2",
|
|
48
|
+
"@sps-woodland/tokens": "8.12.2",
|
|
49
|
+
"@sps-woodland/buttons": "8.12.2",
|
|
50
|
+
"@spscommerce/ds-colors": "8.12.2",
|
|
51
|
+
"@spscommerce/ds-react": "8.12.2",
|
|
52
|
+
"@spscommerce/ds-shared": "8.12.2"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "pnpm run build:js && pnpm run build:types",
|