@sps-woodland/content-row 8.51.2 → 8.52.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.
Files changed (14) hide show
  1. package/README.md +1 -20
  2. package/lib/content-row/ContentRow.css.d.ts +149 -0
  3. package/lib/content-row/ContentRow.d.ts +26 -0
  4. package/lib/content-row-col/ContentRowCol.css.d.ts +50 -0
  5. package/lib/content-row-col/ContentRowCol.d.ts +10 -0
  6. package/lib/content-row-expansion/ContentRowExpansion.d.ts +5 -0
  7. package/lib/index.d.ts +4 -1
  8. package/lib/index.js +350 -20
  9. package/lib/index.umd.cjs +11 -11
  10. package/lib/row-list-auto-layout/RowListAutoLayout.css.d.ts +8 -0
  11. package/lib/row-list-auto-layout/RowListAutoLayout.d.ts +5 -0
  12. package/lib/style.css +1 -1
  13. package/package.json +22 -13
  14. package/vite.config.mjs +14 -5
package/README.md CHANGED
@@ -1,22 +1,3 @@
1
1
  ## [@sps-woodland/content-row](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/content-row#readme)
2
2
 
3
- SPS Woodland Design System content row component.
4
-
5
- ### Preferred imports (core, tree-shakes per component)
6
-
7
- ```ts
8
- import { ContentRow } from "@sps-woodland/core/content-row";
9
- import { ContentRowCol } from "@sps-woodland/core/content-row-col";
10
- import { ContentRowExpansion } from "@sps-woodland/core/content-row-expansion";
11
- import { RowListAutoLayout } from "@sps-woodland/core/row-list-auto-layout";
12
- import "@sps-woodland/core/content-row/style.css";
13
- ```
14
-
15
- `ContentRow` is only reachable via the family barrel (`@sps-woodland/core/content-row`) because the family name and the component name collide. `ContentRowCol`, `ContentRowExpansion`, and `RowListAutoLayout` are also available from the same barrel if you prefer one import.
16
-
17
- ### Legacy wrapper (still supported, re-exports from `@sps-woodland/core`)
18
-
19
- ```ts
20
- import { ContentRow, ContentRowCol, ContentRowExpansion, RowListAutoLayout } from "@sps-woodland/content-row";
21
- import "@sps-woodland/content-row/style.css";
22
- ```
3
+ SPS Woodland Design System page title component
package/lib/content-row/ContentRow.css.d.ts ADDED
@@ -0,0 +1,149 @@
1
+ export declare const expandedVar: any;
2
+ export declare const expandedBorderRadiusVar: any;
3
+ export declare const selectedBordersVar: any;
4
+ export declare const reorderableButtonIcon: any;
5
+ export declare const contentRow: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
6
+ expanded: {
7
+ true: {
8
+ vars: {
9
+ [expandedVar]: string;
10
+ };
11
+ };
12
+ false: {
13
+ vars: {
14
+ [expandedVar]: string;
15
+ };
16
+ };
17
+ };
18
+ }>;
19
+ export declare const contentRowColGroup: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
20
+ cardSpacing: {
21
+ true: {
22
+ borderRadius: string;
23
+ marginTop: string;
24
+ };
25
+ false: {};
26
+ };
27
+ expanded: {
28
+ true: {
29
+ borderTopLeftRadius: string;
30
+ borderTopRightRadius: string;
31
+ borderBottomRightRadius: string;
32
+ borderBottomLeftRadius: string;
33
+ };
34
+ false: {};
35
+ };
36
+ selected: {
37
+ true: {
38
+ background: string;
39
+ borderColor: string;
40
+ };
41
+ false: {};
42
+ };
43
+ reorderable: {
44
+ true: {
45
+ minHeight: string;
46
+ };
47
+ false: {};
48
+ };
49
+ }>;
50
+ export declare const contentTableRow: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
51
+ selected: {
52
+ true: {
53
+ background: string;
54
+ vars: {
55
+ [selectedBordersVar]: string;
56
+ };
57
+ };
58
+ false: {
59
+ vars: {
60
+ [selectedBordersVar]: string;
61
+ };
62
+ };
63
+ };
64
+ expanded: {
65
+ true: {
66
+ vars: {
67
+ [expandedBorderRadiusVar]: string;
68
+ };
69
+ };
70
+ false: {
71
+ vars: {
72
+ [expandedBorderRadiusVar]: string;
73
+ };
74
+ };
75
+ };
76
+ }>;
77
+ export declare const contentTableRowSpacer: string;
78
+ export declare const expandButton: string;
79
+ export declare const expandIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
80
+ disabled: {
81
+ true: {
82
+ color: string;
83
+ cursor: "not-allowed";
84
+ };
85
+ false: {
86
+ color: string;
87
+ selectors: {
88
+ "&:hover": {
89
+ color: string;
90
+ };
91
+ };
92
+ };
93
+ };
94
+ }>;
95
+ export declare const contentRowExpansion: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
96
+ __autoLayout: {
97
+ true: {
98
+ display: "table-cell";
99
+ };
100
+ false: {
101
+ display: any;
102
+ };
103
+ };
104
+ }>;
105
+ export declare const section: string;
106
+ export declare const reorderableLayout: string;
107
+ export declare const reorderableSection: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
108
+ reorderable: {
109
+ true: {
110
+ minHeight: string;
111
+ width: string;
112
+ height: "50%";
113
+ display: "flex";
114
+ };
115
+ false: {
116
+ padding: string;
117
+ };
118
+ };
119
+ }>;
120
+ export declare const indexContainerWrapper: string;
121
+ export declare const indexContainer: string;
122
+ export declare const indexContainerElement: string;
123
+ export declare const reorderableButton: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
124
+ disabled: {
125
+ true: {
126
+ border: "none";
127
+ vars: {
128
+ [reorderableButtonIcon]: string;
129
+ };
130
+ };
131
+ false: {
132
+ vars: {
133
+ [reorderableButtonIcon]: string;
134
+ };
135
+ };
136
+ };
137
+ up: {
138
+ true: {
139
+ borderTopLeftRadius: string;
140
+ };
141
+ false: {};
142
+ };
143
+ down: {
144
+ true: {
145
+ borderBottomLeftRadius: string;
146
+ };
147
+ false: {};
148
+ };
149
+ }>;
package/lib/content-row/ContentRow.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ import * as React from "react";
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, selectIndeterminate, renderExpandedContent, disableSelection, disableExpansion, hideExpansionControl, __autoLayout, __reorderable, __onOrderChange, __index, __canBeMovedUp, __canBeMovedDown, ...rest }: ComponentProps<{
4
+ alternateLayout?: boolean;
5
+ initiallyExpanded?: boolean;
6
+ cardSpacing?: boolean;
7
+ expanded?: boolean;
8
+ onBeforeCollapsed?: () => boolean;
9
+ onBeforeExpanded?: () => boolean;
10
+ onSelectionChange?: React.ChangeEventHandler<HTMLInputElement>;
11
+ onCollapsed?: () => void;
12
+ onExpanded?: () => void;
13
+ selectable?: boolean;
14
+ selected?: boolean;
15
+ selectIndeterminate?: boolean;
16
+ renderExpandedContent?: boolean;
17
+ disableSelection?: boolean;
18
+ disableExpansion?: boolean;
19
+ hideExpansionControl?: boolean;
20
+ __autoLayout?: boolean;
21
+ __reorderable?: boolean;
22
+ __onOrderChange?: (currentIndex: number, newIndex: number) => void;
23
+ __index?: number;
24
+ __canBeMovedUp?: boolean;
25
+ __canBeMovedDown?: boolean;
26
+ }, HTMLDivElement>): React.ReactElement;
package/lib/content-row-col/ContentRowCol.css.d.ts ADDED
@@ -0,0 +1,50 @@
1
+ export declare const contentRowCol: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
2
+ lean: {
3
+ true: {
4
+ paddingTop: string;
5
+ paddingRight: string;
6
+ paddingBottom: string;
7
+ paddingLeft: string;
8
+ };
9
+ false: {};
10
+ };
11
+ borderless: {
12
+ true: {};
13
+ false: {
14
+ selectors: {
15
+ "&:not(:first-child)": {
16
+ borderLeft: `${string} ${string} ${string}`;
17
+ };
18
+ };
19
+ };
20
+ };
21
+ wrapContent: {
22
+ true: {
23
+ wordBreak: "break-word";
24
+ };
25
+ false: {};
26
+ };
27
+ }>;
28
+ export declare const contentRowTableCol: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
29
+ lean: {
30
+ true: {
31
+ paddingTop: string;
32
+ paddingRight: string;
33
+ paddingBottom: string;
34
+ paddingLeft: string;
35
+ };
36
+ false: {};
37
+ };
38
+ borderless: {
39
+ true: {
40
+ borderLeftWidth: "0";
41
+ };
42
+ false: {};
43
+ };
44
+ wrapContent: {
45
+ true: {
46
+ wordBreak: "break-word";
47
+ };
48
+ false: {};
49
+ };
50
+ }>;
package/lib/content-row-col/ContentRowCol.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import * as React from "react";
2
+ import type { ComponentProps } from "@sps-woodland/core";
3
+ export declare function ContentRowCol({ children, className, borderless, lean, widthPx, widthRem, style, wrapContent, __autoLayout, ...rest }: ComponentProps<{
4
+ borderless?: boolean;
5
+ lean?: boolean;
6
+ widthPx?: number;
7
+ widthRem?: number;
8
+ wrapContent?: boolean;
9
+ __autoLayout?: boolean;
10
+ }, HTMLDivElement>): React.ReactElement;
package/lib/content-row-expansion/ContentRowExpansion.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import * as React from "react";
2
+ import { ComponentProps } from "@sps-woodland/core";
3
+ export declare function ContentRowExpansion({ children, className, __autoLayout, ...rest }: ComponentProps<{
4
+ __autoLayout?: boolean;
5
+ }, HTMLDivElement>): React.ReactElement;
package/lib/index.d.ts CHANGED
@@ -1,2 +1,5 @@
1
- export * from "@sps-woodland/core/content-row";
1
+ export * from "./content-row/ContentRow";
2
+ export * from "./content-row-col/ContentRowCol";
3
+ export * from "./content-row-expansion/ContentRowExpansion";
4
+ export * from "./row-list-auto-layout/RowListAutoLayout";
2
5
  export * from "./manifest";
package/lib/index.js CHANGED
@@ -1,16 +1,342 @@
1
- import { ContentRow as e } from "@sps-woodland/core/content-row";
2
- export * from "@sps-woodland/core/content-row";
3
- import { code as o } from "@spscommerce/utils";
4
- import { ContentRowCol as t } from "@sps-woodland/core/content-row-col";
5
- import { ContentRowExpansion as n } from "@sps-woodland/core/content-row-expansion";
6
- const s = {
7
- components: [e, t, n],
1
+ import * as e from "react";
2
+ import { Metadata as u, cl as l, selectChildren as $, Icon as le, modChildren as de } from "@sps-woodland/core";
3
+ import { Button as G } from "@sps-woodland/buttons";
4
+ import { SpsTextInput as _e, SpsCheckbox as ie } from "@spscommerce/ds-react";
5
+ import { useWoodlandLanguage as ce } from "@spscommerce/i18n";
6
+ import { SpsIcon as q, ButtonKind as J } from "@spscommerce/ds-shared";
7
+ import { code as c } from "@spscommerce/utils";
8
+ function pe(o, s, t) {
9
+ return s in o ? Object.defineProperty(o, s, {
10
+ value: t,
11
+ enumerable: !0,
12
+ configurable: !0,
13
+ writable: !0
14
+ }) : o[s] = t, o;
15
+ }
16
+ function U(o, s) {
17
+ var t = Object.keys(o);
18
+ if (Object.getOwnPropertySymbols) {
19
+ var n = Object.getOwnPropertySymbols(o);
20
+ s && (n = n.filter(function(a) {
21
+ return Object.getOwnPropertyDescriptor(o, a).enumerable;
22
+ })), t.push.apply(t, n);
23
+ }
24
+ return t;
25
+ }
26
+ function Q(o) {
27
+ for (var s = 1; s < arguments.length; s++) {
28
+ var t = arguments[s] != null ? arguments[s] : {};
29
+ s % 2 ? U(Object(t), !0).forEach(function(n) {
30
+ pe(o, n, t[n]);
31
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(o, Object.getOwnPropertyDescriptors(t)) : U(Object(t)).forEach(function(n) {
32
+ Object.defineProperty(o, n, Object.getOwnPropertyDescriptor(t, n));
33
+ });
34
+ }
35
+ return o;
36
+ }
37
+ var me = (o, s, t) => {
38
+ for (var n of Object.keys(o)) {
39
+ var a;
40
+ if (o[n] !== ((a = s[n]) !== null && a !== void 0 ? a : t[n]))
41
+ return !1;
42
+ }
43
+ return !0;
44
+ }, m = (o) => (s) => {
45
+ var t = o.defaultClassName, n = Q(Q({}, o.defaultVariants), s);
46
+ for (var a in n) {
47
+ var d, i = (d = n[a]) !== null && d !== void 0 ? d : o.defaultVariants[a];
48
+ if (i != null) {
49
+ var r = i;
50
+ typeof r == "boolean" && (r = r === !0 ? "true" : "false");
51
+ var R = (
52
+ // @ts-expect-error
53
+ o.variantClassNames[a][r]
54
+ );
55
+ R && (t += " " + R);
56
+ }
57
+ }
58
+ for (var [C, f] of o.compoundVariants)
59
+ me(C, n, o.defaultVariants) && (t += " " + f);
60
+ return t;
61
+ }, we = m({ defaultClassName: "pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv0", variantClassNames: { lean: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv1", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv2" }, borderless: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv3", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv4" }, wrapContent: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv5", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv6" } }, defaultVariants: { lean: !1, borderless: !1, wrapContent: !1 }, compoundVariants: [] }), ue = m({ defaultClassName: "pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv7", variantClassNames: { lean: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv8", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv9" }, borderless: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufva", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufvb" }, wrapContent: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufvc", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufvd" } }, defaultVariants: { lean: !1, borderless: !1, wrapContent: !1 }, compoundVariants: [] });
62
+ function p({
63
+ children: o,
64
+ className: s,
65
+ borderless: t,
66
+ lean: n,
67
+ widthPx: a,
68
+ widthRem: d,
69
+ style: i,
70
+ wrapContent: r = !1,
71
+ __autoLayout: R = !1,
72
+ ...C
73
+ }) {
74
+ const f = a ? a / 16 : d, h = f ? {
75
+ ...i,
76
+ width: `${f}rem`
77
+ } : i;
78
+ return R ? /* @__PURE__ */ e.createElement(
79
+ "td",
80
+ {
81
+ className: l(ue({ lean: n, borderless: t, wrapContent: r }), s),
82
+ ...C,
83
+ style: h
84
+ },
85
+ o
86
+ ) : /* @__PURE__ */ e.createElement(
87
+ "div",
88
+ {
89
+ className: l(we({ lean: n, borderless: t, wrapContent: r }), s),
90
+ ...C,
91
+ style: h
92
+ },
93
+ o
94
+ );
95
+ }
96
+ u.set(p, {
97
+ name: "Content Row Col",
98
+ props: {
99
+ borderless: { type: "boolean" },
100
+ lean: { type: "boolean" },
101
+ widthPx: { type: "number" },
102
+ widthRem: { type: "number" },
103
+ wrapContent: { type: "boolean" }
104
+ }
105
+ });
106
+ var Ce = m({ defaultClassName: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee4", variantClassNames: { expanded: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee5", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee6" } }, defaultVariants: { expanded: !1 }, compoundVariants: [] }), fe = m({ defaultClassName: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee7", variantClassNames: { cardSpacing: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee8", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee9" }, expanded: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeea", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeb" }, selected: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeec", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeed" }, reorderable: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeee", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeef" } }, defaultVariants: { expanded: !1, selected: !1, cardSpacing: !1 }, compoundVariants: [[{ expanded: !0, cardSpacing: !0 }, "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeg"]] }), he = m({ defaultClassName: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeh", variantClassNames: { selected: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeei", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeej" }, expanded: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeek", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeel" } }, defaultVariants: { selected: !1, expanded: !1 }, compoundVariants: [] }), be = "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeem", Re = "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeen", ge = m({ defaultClassName: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeo", variantClassNames: { disabled: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeep", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeq" } }, defaultVariants: {}, compoundVariants: [] }), X = m({ defaultClassName: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeer", variantClassNames: { __autoLayout: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjees", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeet" } }, defaultVariants: { __autoLayout: !1 }, compoundVariants: [] }), S = "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeu", ve = "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeev", Y = m({ defaultClassName: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeew", variantClassNames: { reorderable: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeex", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeey" } }, defaultVariants: { reorderable: !1 }, compoundVariants: [] }), ke = "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeez", ye = "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee10", xe = "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee11", Z = m({ defaultClassName: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee12", variantClassNames: { disabled: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee13", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee14" }, up: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee15", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee16" }, down: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee17", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee18" } }, defaultVariants: { disabled: !1, up: !1, down: !1 }, compoundVariants: [] });
107
+ function P({
108
+ children: o,
109
+ className: s,
110
+ __autoLayout: t = !1,
111
+ ...n
112
+ }) {
113
+ return t ? /* @__PURE__ */ e.createElement("tr", null, /* @__PURE__ */ e.createElement(
114
+ "td",
115
+ {
116
+ className: l(X({ __autoLayout: t }), s),
117
+ colSpan: 100,
118
+ ...n
119
+ },
120
+ o
121
+ )) : /* @__PURE__ */ e.createElement("div", { className: l(X({ __autoLayout: t }), s), ...n }, o);
122
+ }
123
+ u.set(P, {
124
+ name: "Content Row Expansion"
125
+ });
126
+ function ee({
127
+ children: o,
128
+ className: s,
129
+ alternateLayout: t = !1,
130
+ initiallyExpanded: n = !1,
131
+ cardSpacing: a = !1,
132
+ expanded: d,
133
+ onBeforeCollapsed: i,
134
+ onBeforeExpanded: r,
135
+ onSelectionChange: R,
136
+ onCollapsed: C,
137
+ onExpanded: f,
138
+ selectable: h = !1,
139
+ selected: N,
140
+ selectIndeterminate: I,
141
+ renderExpandedContent: z = !0,
142
+ disableSelection: oe = !1,
143
+ disableExpansion: M = !1,
144
+ hideExpansionControl: y = !1,
145
+ __autoLayout: F = !1,
146
+ __reorderable: k = !1,
147
+ __onOrderChange: x = () => {
148
+ },
149
+ __index: _ = 0,
150
+ __canBeMovedUp: H,
151
+ __canBeMovedDown: O,
152
+ ...A
153
+ }) {
154
+ const [D, [g]] = $(o, [
155
+ { type: p },
156
+ { type: P }
157
+ ]), { t: te } = ce(), [ne, L] = e.useState(
158
+ z || n
159
+ ), [se, T] = e.useState(n), w = typeof d == "boolean" ? d : se, W = F ? w : ne, [j, V] = e.useState((_ + 1).toString() || "");
160
+ e.useEffect(() => {
161
+ V((_ + 1).toString() || "");
162
+ }, [_]);
163
+ function ae(b) {
164
+ V(b.target.value);
165
+ }
166
+ function B() {
167
+ Number(j) ? x(_, Number(j) - 1) : (V((_ + 1).toString() || ""), x(_, _));
168
+ }
169
+ function re(b) {
170
+ b.stopPropagation(), w && (!i || i()) ? (T(!1), z || L(!1), C && C()) : !w && (!r || r()) && (T(!0), z || L(!0), f && f());
171
+ }
172
+ const v = () => /* @__PURE__ */ e.createElement(
173
+ ie,
174
+ {
175
+ disabled: oe,
176
+ checked: N,
177
+ indeterminate: I,
178
+ onChange: R
179
+ }
180
+ ), E = /* @__PURE__ */ e.createElement(
181
+ "button",
182
+ {
183
+ type: "button",
184
+ className: l(Re),
185
+ onClick: re,
186
+ "aria-label": te(`contentRow.${w ? "collapse" : "expand"}`, { defaultValue: `${w ? "Collapse" : "Expand"}` }),
187
+ disabled: M
188
+ },
189
+ /* @__PURE__ */ e.createElement(
190
+ le,
191
+ {
192
+ className: l(ge({ disabled: M })),
193
+ icon: w ? "minus-circle" : "plus-circle"
194
+ }
195
+ )
196
+ );
197
+ if (F) {
198
+ const b = /* @__PURE__ */ e.createElement("tr", null, /* @__PURE__ */ e.createElement("td", { className: l(be), colSpan: 100 }));
199
+ return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
200
+ "tr",
201
+ {
202
+ className: l(
203
+ he({ selected: N || I, expanded: w })
204
+ ),
205
+ ...A
206
+ },
207
+ h && !t && /* @__PURE__ */ e.createElement(p, { widthPx: 46, __autoLayout: !0 }, /* @__PURE__ */ e.createElement(v, null)),
208
+ g && !t && !y && /* @__PURE__ */ e.createElement(p, { widthPx: 44, __autoLayout: !0 }, E),
209
+ g && h && t && /* @__PURE__ */ e.createElement(p, { widthPx: 46, __autoLayout: !0 }, y ? /* @__PURE__ */ e.createElement(v, null) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("section", { className: S }, /* @__PURE__ */ e.createElement(v, null)), /* @__PURE__ */ e.createElement("section", { className: S }, E))),
210
+ D
211
+ ), W && g, b);
212
+ }
213
+ const K = /* @__PURE__ */ e.createElement("div", { className: l(Ce({ expanded: w }), s), ...A }, /* @__PURE__ */ e.createElement(
214
+ "div",
215
+ {
216
+ className: l(
217
+ fe({
218
+ expanded: w,
219
+ selected: N,
220
+ cardSpacing: a,
221
+ reorderable: k
222
+ })
223
+ )
224
+ },
225
+ k && /* @__PURE__ */ e.createElement(p, { widthPx: 53, style: { position: "relative" } }, /* @__PURE__ */ e.createElement("section", { className: Y({ reorderable: k }) }, /* @__PURE__ */ e.createElement(
226
+ G,
227
+ {
228
+ className: Z({
229
+ up: !0,
230
+ disabled: !H
231
+ }),
232
+ kind: J.ICON,
233
+ icon: q.CHEVRON_UP,
234
+ onClick: () => x(_, _ - 1),
235
+ disabled: !H
236
+ }
237
+ )), /* @__PURE__ */ e.createElement("section", { className: Y({ reorderable: k }) }, /* @__PURE__ */ e.createElement(
238
+ G,
239
+ {
240
+ className: Z({
241
+ down: !0,
242
+ disabled: !O
243
+ }),
244
+ kind: J.ICON,
245
+ icon: q.CHEVRON_DOWN,
246
+ onClick: () => x(_, _ + 1),
247
+ disabled: !O
248
+ }
249
+ ))),
250
+ h && !t && /* @__PURE__ */ e.createElement(p, { widthPx: 46 }, /* @__PURE__ */ e.createElement(v, null)),
251
+ g && !t && !y && /* @__PURE__ */ e.createElement(p, { widthPx: 44 }, E),
252
+ g && h && t && /* @__PURE__ */ e.createElement(p, { widthPx: 46 }, y ? /* @__PURE__ */ e.createElement(v, null) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("section", { className: S }, /* @__PURE__ */ e.createElement(v, null)), /* @__PURE__ */ e.createElement("section", { className: S }, E))),
253
+ D
254
+ ), W && g);
255
+ return k ? /* @__PURE__ */ e.createElement("div", { className: ve }, /* @__PURE__ */ e.createElement("div", { className: l(ke, s) }, /* @__PURE__ */ e.createElement("div", { className: ye }, /* @__PURE__ */ e.createElement(
256
+ _e,
257
+ {
258
+ className: xe,
259
+ value: j,
260
+ onChange: ae,
261
+ onBlur: () => B(),
262
+ onKeyUp: (b) => {
263
+ b.key === "Enter" && B();
264
+ },
265
+ notClearable: !0
266
+ }
267
+ ))), K) : K;
268
+ }
269
+ u.set(ee, {
270
+ name: "Content Row",
271
+ props: {
272
+ alternateLayout: { type: "boolean", default: "false" },
273
+ initiallyExpanded: { type: "boolean", default: "false" },
274
+ cardSpacing: { type: "boolean", default: "false" },
275
+ expanded: { type: "boolean" },
276
+ onBeforeCollapsed: { type: "() => boolean" },
277
+ onBeforeExpanded: { type: "() => boolean" },
278
+ onSelectionChange: { type: "ChangeEventHandler" },
279
+ onCollapsed: { type: "() => void" },
280
+ onExpanded: { type: "() => void" },
281
+ selectable: { type: "boolean", default: "false" },
282
+ selected: { type: "boolean" },
283
+ renderExpandedContent: { type: "boolean", default: "true" },
284
+ disableSelection: { type: "boolean", default: "false" },
285
+ disableExpansion: { type: "boolean", default: "false" },
286
+ hideExpansionControl: { type: "boolean", default: "false" }
287
+ }
288
+ });
289
+ var Ee = m({ defaultClassName: "pkg_sps-woodland_content-row__version_8_52_0__hash_1wuky9j0", variantClassNames: { wrapContent: { true: "pkg_sps-woodland_content-row__version_8_52_0__hash_1wuky9j1", false: "pkg_sps-woodland_content-row__version_8_52_0__hash_1wuky9j2" } }, defaultVariants: { wrapContent: !1 }, compoundVariants: [] });
290
+ const Se = /* @__PURE__ */ new Set([
291
+ "Content Row",
292
+ "Content Row Col",
293
+ "Content Row Expansion",
294
+ "Sorting Header",
295
+ "Sorting Header Cell"
296
+ ]);
297
+ function Ne({
298
+ children: o,
299
+ className: s,
300
+ wrapContent: t = !1,
301
+ ...n
302
+ }) {
303
+ const a = e.useMemo(
304
+ () => (
305
+ // eslint-disable-next-line implicit-arrow-linebreak
306
+ de(o, (r) => u.isWoodlandComponent(r.type) && Se.has(u.get(r.type).name) ? [
307
+ {
308
+ __autoLayout: !0
309
+ }
310
+ ] : [{}])
311
+ ),
312
+ [o]
313
+ ), [[d], i] = e.useMemo(
314
+ () => (
315
+ // eslint-disable-next-line implicit-arrow-linebreak
316
+ $(a, [
317
+ {
318
+ type: (r) => !!(u.isWoodlandComponent(r.type) && u.get(r.type).name === "Sorting Header")
319
+ }
320
+ ])
321
+ ),
322
+ [a]
323
+ );
324
+ return /* @__PURE__ */ e.createElement("table", { className: l(Ee({ wrapContent: t }), s), ...n }, d ? /* @__PURE__ */ e.createElement("thead", null, d) : null, /* @__PURE__ */ e.createElement("tbody", null, i));
325
+ }
326
+ u.set(Ne, {
327
+ name: "Row List Auto Layout",
328
+ props: {
329
+ wrapContent: { type: "boolean", default: "false" }
330
+ }
331
+ });
332
+ const ze = {
333
+ components: [ee, p, P],
8
334
  examples: {
9
335
  basic: {
10
336
  label: "Content Rows",
11
337
  examples: {
12
338
  basic: {
13
- react: o`
339
+ react: c`
14
340
  import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
15
341
  import { Icon } from "@sps-woodland/core";
16
342
  import { sprinkles } from "@sps-woodland/tokens";
@@ -31,7 +357,7 @@ const s = {
31
357
  `
32
358
  },
33
359
  withCheckbox: {
34
- react: o`
360
+ react: c`
35
361
  import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
36
362
  import { Icon } from "@sps-woodland/core";
37
363
  import { sprinkles } from "@sps-woodland/tokens";
@@ -64,7 +390,7 @@ const s = {
64
390
  `
65
391
  },
66
392
  withCheckboxAndFavorite: {
67
- react: o`
393
+ react: c`
68
394
  import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
69
395
  import { Icon } from "@sps-woodland/core";
70
396
  import { sprinkles } from "@sps-woodland/tokens";
@@ -105,7 +431,7 @@ const s = {
105
431
  label: "Expandable Content Rows",
106
432
  examples: {
107
433
  basic: {
108
- react: o`
434
+ react: c`
109
435
  import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
110
436
  import { Card } from "@sps-woodland/cards";
111
437
  import { Icon } from "@sps-woodland/core";
@@ -140,7 +466,7 @@ const s = {
140
466
  `
141
467
  },
142
468
  expandableWithCheckbox: {
143
- react: o`
469
+ react: c`
144
470
  import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
145
471
  import { Card } from "@sps-woodland/cards";
146
472
  import { Icon } from "@sps-woodland/core";
@@ -187,7 +513,7 @@ const s = {
187
513
  `
188
514
  },
189
515
  expandableWithCheckboxAlternate: {
190
- react: o`
516
+ react: c`
191
517
  import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
192
518
  import { Card } from "@sps-woodland/cards";
193
519
  import { Icon } from "@sps-woodland/core";
@@ -235,7 +561,7 @@ const s = {
235
561
  `
236
562
  },
237
563
  expandableWithCheckboxAndFavorite: {
238
- react: o`
564
+ react: c`
239
565
  import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
240
566
  import { Card } from "@sps-woodland/cards";
241
567
  import { Icon } from "@sps-woodland/core";
@@ -285,7 +611,7 @@ const s = {
285
611
  `
286
612
  },
287
613
  expandableWithCheckboxAndFavoriteAlternate: {
288
- react: o`
614
+ react: c`
289
615
  import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
290
616
  import { Card } from "@sps-woodland/cards";
291
617
  import { Icon } from "@sps-woodland/core";
@@ -336,7 +662,7 @@ const s = {
336
662
  `
337
663
  },
338
664
  expandableWithCheckboxAndIndeterminate: {
339
- react: o`
665
+ react: c`
340
666
  import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
341
667
  import { Icon } from "@sps-woodland/core";
342
668
  import { sprinkles } from "@sps-woodland/tokens";
@@ -404,7 +730,7 @@ const s = {
404
730
  label: "Sortable Content Rows",
405
731
  examples: {
406
732
  basic: {
407
- react: o`
733
+ react: c`
408
734
  import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
409
735
  import { Card } from "@sps-woodland/cards";
410
736
  import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
@@ -856,9 +1182,13 @@ const s = {
856
1182
  // },
857
1183
  // },
858
1184
  }
859
- }, d = {
860
- "Content Rows": s
1185
+ }, He = {
1186
+ "Content Rows": ze
861
1187
  };
862
1188
  export {
863
- d as MANIFEST
1189
+ ee as ContentRow,
1190
+ p as ContentRowCol,
1191
+ P as ContentRowExpansion,
1192
+ He as MANIFEST,
1193
+ Ne as RowListAutoLayout
864
1194
  };
package/lib/index.umd.cjs CHANGED
@@ -1,4 +1,4 @@
1
- (function(o,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("@sps-woodland/core/content-row"),require("@spscommerce/utils"),require("@sps-woodland/core/content-row-col"),require("@sps-woodland/core/content-row-expansion")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/content-row","@spscommerce/utils","@sps-woodland/core/content-row-col","@sps-woodland/core/content-row-expansion"],t):(o=typeof globalThis<"u"?globalThis:o||self,t(o.ContentRow={},o.contentRow,o.utils,o.contentRowCol,o.contentRowExpansion))})(this,(function(o,t,e,s,r){"use strict";const l={"Content Rows":{components:[t.ContentRow,s.ContentRowCol,r.ContentRowExpansion],examples:{basic:{label:"Content Rows",examples:{basic:{react:e.code`
1
+ (function(r,k){typeof exports=="object"&&typeof module<"u"?k(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/buttons"),require("@spscommerce/ds-react"),require("@spscommerce/i18n"),require("@spscommerce/ds-shared"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/buttons","@spscommerce/ds-react","@spscommerce/i18n","@spscommerce/ds-shared","@spscommerce/utils"],k):(r=typeof globalThis<"u"?globalThis:r||self,k(r.ContentRow={},r.React,r.core,r.buttons,r.dsReact,r.i18n,r.dsShared,r.utils))})(this,(function(r,k,a,O,H,te,x,p){"use strict";function ne(o){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(s,t,n.get?n:{enumerable:!0,get:()=>o[t]})}}return s.default=o,Object.freeze(s)}const e=ne(k);function se(o,s,t){return s in o?Object.defineProperty(o,s,{value:t,enumerable:!0,configurable:!0,writable:!0}):o[s]=t,o}function A(o,s){var t=Object.keys(o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(o);s&&(n=n.filter(function(l){return Object.getOwnPropertyDescriptor(o,l).enumerable})),t.push.apply(t,n)}return t}function D(o){for(var s=1;s<arguments.length;s++){var t=arguments[s]!=null?arguments[s]:{};s%2?A(Object(t),!0).forEach(function(n){se(o,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(t)):A(Object(t)).forEach(function(n){Object.defineProperty(o,n,Object.getOwnPropertyDescriptor(t,n))})}return o}var ae=(o,s,t)=>{for(var n of Object.keys(o)){var l;if(o[n]!==((l=s[n])!==null&&l!==void 0?l:t[n]))return!1}return!0},m=o=>s=>{var t=o.defaultClassName,n=D(D({},o.defaultVariants),s);for(var l in n){var c,w=(c=n[l])!==null&&c!==void 0?c:o.defaultVariants[l];if(w!=null){var d=w;typeof d=="boolean"&&(d=d===!0?"true":"false");var R=o.variantClassNames[l][d];R&&(t+=" "+R)}}for(var[C,f]of o.compoundVariants)ae(C,n,o.defaultVariants)&&(t+=" "+f);return t},re=m({defaultClassName:"pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv0",variantClassNames:{lean:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv1",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv2"},borderless:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv3",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv4"},wrapContent:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv5",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv6"}},defaultVariants:{lean:!1,borderless:!1,wrapContent:!1},compoundVariants:[]}),le=m({defaultClassName:"pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv7",variantClassNames:{lean:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv8",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv9"},borderless:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufva",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufvb"},wrapContent:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufvc",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufvd"}},defaultVariants:{lean:!1,borderless:!1,wrapContent:!1},compoundVariants:[]});function _({children:o,className:s,borderless:t,lean:n,widthPx:l,widthRem:c,style:w,wrapContent:d=!1,__autoLayout:R=!1,...C}){const f=l?l/16:c,h=f?{...w,width:`${f}rem`}:w;return R?e.createElement("td",{className:a.cl(le({lean:n,borderless:t,wrapContent:d}),s),...C,style:h},o):e.createElement("div",{className:a.cl(re({lean:n,borderless:t,wrapContent:d}),s),...C,style:h},o)}a.Metadata.set(_,{name:"Content Row Col",props:{borderless:{type:"boolean"},lean:{type:"boolean"},widthPx:{type:"number"},widthRem:{type:"number"},wrapContent:{type:"boolean"}}});var de=m({defaultClassName:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee4",variantClassNames:{expanded:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee5",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee6"}},defaultVariants:{expanded:!1},compoundVariants:[]}),_e=m({defaultClassName:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee7",variantClassNames:{cardSpacing:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee8",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee9"},expanded:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeea",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeb"},selected:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeec",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeed"},reorderable:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeee",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeef"}},defaultVariants:{expanded:!1,selected:!1,cardSpacing:!1},compoundVariants:[[{expanded:!0,cardSpacing:!0},"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeg"]]}),ce=m({defaultClassName:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeh",variantClassNames:{selected:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeei",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeej"},expanded:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeek",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeel"}},defaultVariants:{selected:!1,expanded:!1},compoundVariants:[]}),ie="pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeem",pe="pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeen",me=m({defaultClassName:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeo",variantClassNames:{disabled:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeep",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeq"}},defaultVariants:{},compoundVariants:[]}),T=m({defaultClassName:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeer",variantClassNames:{__autoLayout:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjees",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeet"}},defaultVariants:{__autoLayout:!1},compoundVariants:[]}),E="pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeu",we="pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeev",L=m({defaultClassName:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeew",variantClassNames:{reorderable:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeex",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeey"}},defaultVariants:{reorderable:!1},compoundVariants:[]}),ue="pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeez",Ce="pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee10",fe="pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee11",W=m({defaultClassName:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee12",variantClassNames:{disabled:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee13",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee14"},up:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee15",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee16"},down:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee17",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee18"}},defaultVariants:{disabled:!1,up:!1,down:!1},compoundVariants:[]});function S({children:o,className:s,__autoLayout:t=!1,...n}){return t?e.createElement("tr",null,e.createElement("td",{className:a.cl(T({__autoLayout:t}),s),colSpan:100,...n},o)):e.createElement("div",{className:a.cl(T({__autoLayout:t}),s),...n},o)}a.Metadata.set(S,{name:"Content Row Expansion"});function V({children:o,className:s,alternateLayout:t=!1,initiallyExpanded:n=!1,cardSpacing:l=!1,expanded:c,onBeforeCollapsed:w,onBeforeExpanded:d,onSelectionChange:R,onCollapsed:C,onExpanded:f,selectable:h=!1,selected:P,selectIndeterminate:B,renderExpandedContent:I=!0,disableSelection:ge=!1,disableExpansion:K=!1,hideExpansionControl:N=!1,__autoLayout:G=!1,__reorderable:y=!1,__onOrderChange:j=()=>{},__index:i=0,__canBeMovedUp:J,__canBeMovedDown:U,...Q}){const[X,[g]]=a.selectChildren(o,[{type:_},{type:S}]),{t:ve}=te.useWoodlandLanguage(),[ke,Y]=e.useState(I||n),[ye,Z]=e.useState(n),u=typeof c=="boolean"?c:ye,$=G?u:ke,[M,F]=e.useState((i+1).toString()||"");e.useEffect(()=>{F((i+1).toString()||"")},[i]);function xe(b){F(b.target.value)}function ee(){Number(M)?j(i,Number(M)-1):(F((i+1).toString()||""),j(i,i))}function Ee(b){b.stopPropagation(),u&&(!w||w())?(Z(!1),I||Y(!1),C&&C()):!u&&(!d||d())&&(Z(!0),I||Y(!0),f&&f())}const v=()=>e.createElement(H.SpsCheckbox,{disabled:ge,checked:P,indeterminate:B,onChange:R}),z=e.createElement("button",{type:"button",className:a.cl(pe),onClick:Ee,"aria-label":ve(`contentRow.${u?"collapse":"expand"}`,{defaultValue:`${u?"Collapse":"Expand"}`}),disabled:K},e.createElement(a.Icon,{className:a.cl(me({disabled:K})),icon:u?"minus-circle":"plus-circle"}));if(G){const b=e.createElement("tr",null,e.createElement("td",{className:a.cl(ie),colSpan:100}));return e.createElement(e.Fragment,null,e.createElement("tr",{className:a.cl(ce({selected:P||B,expanded:u})),...Q},h&&!t&&e.createElement(_,{widthPx:46,__autoLayout:!0},e.createElement(v,null)),g&&!t&&!N&&e.createElement(_,{widthPx:44,__autoLayout:!0},z),g&&h&&t&&e.createElement(_,{widthPx:46,__autoLayout:!0},N?e.createElement(v,null):e.createElement(e.Fragment,null,e.createElement("section",{className:E},e.createElement(v,null)),e.createElement("section",{className:E},z))),X),$&&g,b)}const oe=e.createElement("div",{className:a.cl(de({expanded:u}),s),...Q},e.createElement("div",{className:a.cl(_e({expanded:u,selected:P,cardSpacing:l,reorderable:y}))},y&&e.createElement(_,{widthPx:53,style:{position:"relative"}},e.createElement("section",{className:L({reorderable:y})},e.createElement(O.Button,{className:W({up:!0,disabled:!J}),kind:x.ButtonKind.ICON,icon:x.SpsIcon.CHEVRON_UP,onClick:()=>j(i,i-1),disabled:!J})),e.createElement("section",{className:L({reorderable:y})},e.createElement(O.Button,{className:W({down:!0,disabled:!U}),kind:x.ButtonKind.ICON,icon:x.SpsIcon.CHEVRON_DOWN,onClick:()=>j(i,i+1),disabled:!U}))),h&&!t&&e.createElement(_,{widthPx:46},e.createElement(v,null)),g&&!t&&!N&&e.createElement(_,{widthPx:44},z),g&&h&&t&&e.createElement(_,{widthPx:46},N?e.createElement(v,null):e.createElement(e.Fragment,null,e.createElement("section",{className:E},e.createElement(v,null)),e.createElement("section",{className:E},z))),X),$&&g);return y?e.createElement("div",{className:we},e.createElement("div",{className:a.cl(ue,s)},e.createElement("div",{className:Ce},e.createElement(H.SpsTextInput,{className:fe,value:M,onChange:xe,onBlur:()=>ee(),onKeyUp:b=>{b.key==="Enter"&&ee()},notClearable:!0}))),oe):oe}a.Metadata.set(V,{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 he=m({defaultClassName:"pkg_sps-woodland_content-row__version_8_52_0__hash_1wuky9j0",variantClassNames:{wrapContent:{true:"pkg_sps-woodland_content-row__version_8_52_0__hash_1wuky9j1",false:"pkg_sps-woodland_content-row__version_8_52_0__hash_1wuky9j2"}},defaultVariants:{wrapContent:!1},compoundVariants:[]});const be=new Set(["Content Row","Content Row Col","Content Row Expansion","Sorting Header","Sorting Header Cell"]);function q({children:o,className:s,wrapContent:t=!1,...n}){const l=e.useMemo(()=>a.modChildren(o,d=>a.Metadata.isWoodlandComponent(d.type)&&be.has(a.Metadata.get(d.type).name)?[{__autoLayout:!0}]:[{}]),[o]),[[c],w]=e.useMemo(()=>a.selectChildren(l,[{type:d=>!!(a.Metadata.isWoodlandComponent(d.type)&&a.Metadata.get(d.type).name==="Sorting Header")}]),[l]);return e.createElement("table",{className:a.cl(he({wrapContent:t}),s),...n},c?e.createElement("thead",null,c):null,e.createElement("tbody",null,w))}a.Metadata.set(q,{name:"Row List Auto Layout",props:{wrapContent:{type:"boolean",default:"false"}}});const Re={"Content Rows":{components:[V,_,S],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";
@@ -16,7 +16,7 @@
16
16
  </ContentRow>
17
17
  )
18
18
  }
19
- `},withCheckbox:{react:e.code`
19
+ `},withCheckbox:{react:p.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:e.code`
49
+ `},withCheckboxAndFavorite:{react:p.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:e.code`
82
+ `}}},expandable:{label:"Expandable Content Rows",examples:{basic:{react:p.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:e.code`
114
+ `},expandableWithCheckbox:{react:p.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:e.code`
158
+ `},expandableWithCheckboxAlternate:{react:p.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:e.code`
203
+ `},expandableWithCheckboxAndFavorite:{react:p.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:e.code`
250
+ `},expandableWithCheckboxAndFavoriteAlternate:{react:p.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
- `},expandableWithCheckboxAndIndeterminate:{react:e.code`
298
+ `},expandableWithCheckboxAndIndeterminate:{react:p.code`
299
299
  import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
300
300
  import { Icon } from "@sps-woodland/core";
301
301
  import { sprinkles } from "@sps-woodland/tokens";
@@ -355,7 +355,7 @@
355
355
  </ContentRow>
356
356
  );
357
357
  }
358
- `}}},sortable:{label:"Sortable Content Rows",examples:{basic:{react:e.code`
358
+ `}}},sortable:{label:"Sortable Content Rows",examples:{basic:{react:p.code`
359
359
  import { ContentRow, ContentRowCol, ContentRowExpansion } from "@sps-woodland/content-row";
360
360
  import { Card } from "@sps-woodland/cards";
361
361
  import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
@@ -458,4 +458,4 @@
458
458
  </>
459
459
  )
460
460
  }
461
- `}}}}}};o.MANIFEST=l,Object.keys(t).forEach(n=>{n!=="default"&&!Object.prototype.hasOwnProperty.call(o,n)&&Object.defineProperty(o,n,{enumerable:!0,get:()=>t[n]})}),Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));
461
+ `}}}}}};r.ContentRow=V,r.ContentRowCol=_,r.ContentRowExpansion=S,r.MANIFEST=Re,r.RowListAutoLayout=q,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
package/lib/row-list-auto-layout/RowListAutoLayout.css.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ export declare const rowListAutoLayout: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
2
+ wrapContent: {
3
+ true: {
4
+ wordBreak: "break-word";
5
+ };
6
+ false: {};
7
+ };
8
+ }>;
package/lib/row-list-auto-layout/RowListAutoLayout.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import * as React from "react";
2
+ import type { ComponentProps } from "@sps-woodland/core";
3
+ export declare function RowListAutoLayout({ children, className, wrapContent, ...rest }: ComponentProps<{
4
+ wrapContent?: boolean;
5
+ }, HTMLDivElement>): React.ReactElement;
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- .pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv4{background:#fff;border-radius:.25rem;display:block}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv5{--pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv0: block}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv6{--pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv0: none}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv7{display:table;table-layout:fixed;width:100.06%;border-width:.0625rem;border-style:solid;border-color:#d2d4d4;border-radius:.25rem}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv8{border-radius:.25rem;margin-top:1rem}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhva{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvc{background:#e6f2f8;border-color:#007db8}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhve{min-height:3.875rem}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvg{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvh{background:#fff}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvi{--pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv2: #007db8ff;background:#e6f2f8}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvj{--pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv2: #d2d4d4ff}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvk{--pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv1: 0}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvl{--pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv1: .25rem}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvm{height:1rem;background:transparent;border:0}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvn{background:none;border:0;padding:0}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvo{cursor:pointer;font-size:1rem;line-height:1.125rem;padding:0;margin-bottom:0}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvp{color:#d2d4d4;cursor:not-allowed}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvq{color:#007db8}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvq:hover{color:#09638d}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvr{display:var(--pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv0);background:#f3f4f4;border-color:#d2d4d4;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;padding:1rem}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvs{display:table-cell}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvt{display:var(--pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv0)}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvu{padding:1rem}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvu:first-child{margin:-1rem -1rem 0}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvu:last-child{border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0;border-style:solid;border-top-color:#d2d4d4;margin:0 -1rem -1rem}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvv{display:flex}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvw{position:absolute}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvw:first-child{margin:-1rem -1rem 0;top:1rem}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvw:last-child{border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0;border-style:solid;border-top-color:#d2d4d4;margin:0 -1rem -1rem;bottom:1rem}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvx{min-height:1.78125rem;width:3.3125rem;height:50%;display:flex}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvy{padding:1rem}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvz{display:block}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv10{border-width:.0625rem;border-style:solid;border-color:#d2d4d4;border-radius:.25rem;background:#fff;height:100%;display:table;table-layout:fixed;min-height:3.5rem;width:3.5rem;margin-right:.5rem;padding:.5rem}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv11{display:table-cell;vertical-align:middle}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv12{border-radius:0;padding:0}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv13{--pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv3: none;border:none}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv14{--pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv3: inline}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv15{border-top-left-radius:.1875rem}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv17{border-bottom-left-radius:.1875rem}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvw .pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv12{width:100%;height:100%}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvw .pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv12 button{padding:0;width:100%;height:100%;min-height:1.78125rem;min-width:3.3125rem}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhvw .pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv12 button>i{display:var(--pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv3)}.pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv11 input{text-align:center}.pkg_sps-woodland_core__version_8_51_2__hash_gqq3jr0{display:table-cell;padding:1rem;vertical-align:middle}.pkg_sps-woodland_core__version_8_51_2__hash_gqq3jr1{padding:.5rem 1rem}.pkg_sps-woodland_core__version_8_51_2__hash_gqq3jr4:not(:first-child){border-left:.0625rem solid #d2d4d4ff}.pkg_sps-woodland_core__version_8_51_2__hash_gqq3jr5{word-break:break-word}.pkg_sps-woodland_core__version_8_51_2__hash_gqq3jr7{padding:1rem;vertical-align:middle;border-style:solid;border-color:var(--pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv2);border-top-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;border-right-width:0;text-align:left}.pkg_sps-woodland_core__version_8_51_2__hash_gqq3jr7:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:var(--pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv1)}.pkg_sps-woodland_core__version_8_51_2__hash_gqq3jr7:last-child{border-right-width:.0625rem;border-top-right-radius:.25rem;border-bottom-right-radius:var(--pkg_sps-woodland_core__version_8_51_2__hash_1m5rxhv1)}.pkg_sps-woodland_core__version_8_51_2__hash_gqq3jr8{padding:.5rem 1rem}.pkg_sps-woodland_core__version_8_51_2__hash_gqq3jra{border-left-width:0}.pkg_sps-woodland_core__version_8_51_2__hash_gqq3jrc{word-break:break-word}.pkg_sps-woodland_core__version_8_51_2__hash_gqq3jr0>*{vertical-align:middle}.pkg_sps-woodland_core__version_8_51_2__hash_gqq3jr0 svg{margin-left:-.125rem;margin-top:-.125rem;vertical-align:middle;margin-bottom:0}.pkg_sps-woodland_core__version_8_51_2__hash_14j3gmi0{table-layout:auto;width:100%;border-collapse:separate;border-spacing:0;white-space:normal;overflow:hidden}.pkg_sps-woodland_core__version_8_51_2__hash_14j3gmi1{word-break:break-word}
1
+ .pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee4{background:#fff;border-radius:.25rem;display:block}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee5{--pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee0: block}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee6{--pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee0: none}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee7{display:table;table-layout:fixed;width:100.06%;border-width:.0625rem;border-style:solid;border-color:#d2d4d4;border-radius:.25rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee8{border-radius:.25rem;margin-top:1rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeea{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeec{background:#e6f2f8;border-color:#007db8}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeee{min-height:3.875rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeg{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeh{background:#fff}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeei{--pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee2: #007db8ff;background:#e6f2f8}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeej{--pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee2: #d2d4d4ff}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeek{--pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee1: 0}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeel{--pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee1: .25rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeem{height:1rem;background:transparent;border:0}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeen{background:none;border:0;padding:0}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeo{cursor:pointer;font-size:1rem;line-height:1.125rem;padding:0;margin-bottom:0}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeep{color:#d2d4d4;cursor:not-allowed}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeq{color:#007db8}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeq:hover{color:#09638d}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeer{display:var(--pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee0);background:#f3f4f4;border-color:#d2d4d4;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;padding:1rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjees{display:table-cell}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeet{display:var(--pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee0)}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeu{padding:1rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeu:first-child{margin:-1rem -1rem 0}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeeu:last-child{border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0;border-style:solid;border-top-color:#d2d4d4;margin:0 -1rem -1rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeev{display:flex}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeew{position:absolute}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeew:first-child{margin:-1rem -1rem 0;top:1rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeew:last-child{border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0;border-style:solid;border-top-color:#d2d4d4;margin:0 -1rem -1rem;bottom:1rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeex{min-height:1.78125rem;width:3.3125rem;height:50%;display:flex}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeey{padding:1rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeez{display:block}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee10{border-width:.0625rem;border-style:solid;border-color:#d2d4d4;border-radius:.25rem;background:#fff;height:100%;display:table;table-layout:fixed;min-height:3.5rem;width:3.5rem;margin-right:.5rem;padding:.5rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee11{display:table-cell;vertical-align:middle}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee12{border-radius:0;padding:0}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee13{--pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee3: none;border:none}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee14{--pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee3: inline}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee15{border-top-left-radius:.1875rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee17{border-bottom-left-radius:.1875rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeew .pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee12{width:100%;height:100%}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeew .pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee12 button{padding:0;width:100%;height:100%;min-height:1.78125rem;min-width:3.3125rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjeew .pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee12 button>i{display:var(--pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee3)}.pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee11 input{text-align:center}.pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv0{display:table-cell;padding:1rem;vertical-align:middle}.pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv1{padding:.5rem 1rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv4:not(:first-child){border-left:.0625rem solid #d2d4d4ff}.pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv5{word-break:break-word}.pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv7{padding:1rem;vertical-align:middle;border-style:solid;border-color:var(--pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee2);border-top-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;border-right-width:0;text-align:left}.pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv7:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:var(--pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee1)}.pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv7:last-child{border-right-width:.0625rem;border-top-right-radius:.25rem;border-bottom-right-radius:var(--pkg_sps-woodland_content-row__version_8_52_0__hash_11ztjee1)}.pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv8{padding:.5rem 1rem}.pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufva{border-left-width:0}.pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufvc{word-break:break-word}.pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv0>*{vertical-align:middle}.pkg_sps-woodland_content-row__version_8_52_0__hash_1mxrufv0 svg{margin-left:-.125rem;margin-top:-.125rem;vertical-align:middle;margin-bottom:0}.pkg_sps-woodland_content-row__version_8_52_0__hash_1wuky9j0{table-layout:auto;width:100%;border-collapse:separate;border-spacing:0;white-space:normal;overflow:hidden}.pkg_sps-woodland_content-row__version_8_52_0__hash_1wuky9j1{word-break:break-word}
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@sps-woodland/content-row",
3
3
  "description": "SPS Woodland Design System page title component",
4
- "version": "8.51.2",
4
+ "version": "8.52.0",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
- "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/content-row",
8
- "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/content-row#readme",
7
+ "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/page-title",
8
+ "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/page-title#readme",
9
9
  "type": "module",
10
10
  "module": "./lib/index.js",
11
11
  "main": "./lib/index.umd.cjs",
@@ -17,10 +17,6 @@
17
17
  "import": "./lib/index.js",
18
18
  "default": "./lib/index.js"
19
19
  },
20
- "./style.css": {
21
- "import": "./lib/style.css",
22
- "require": "./lib/style.css"
23
- },
24
20
  "./lib/style.css": {
25
21
  "import": "./lib/style.css",
26
22
  "require": "./lib/style.css"
@@ -30,24 +26,37 @@
30
26
  "access": "public"
31
27
  },
32
28
  "peerDependencies": {
29
+ "@spscommerce/ds-illustrations": "6.12.1",
33
30
  "@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
34
31
  "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
35
32
  "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
36
- "@sps-woodland/core": "8.51.2",
37
- "@spscommerce/ds-react": "8.51.2"
33
+ "@sps-woodland/buttons": "8.52.0",
34
+ "@sps-woodland/core": "8.52.0",
35
+ "@sps-woodland/tokens": "8.52.0",
36
+ "@spscommerce/ds-colors": "8.52.0",
37
+ "@spscommerce/ds-react": "8.52.0",
38
+ "@spscommerce/ds-shared": "8.52.0",
39
+ "@spscommerce/i18n": "8.52.0"
38
40
  },
39
41
  "devDependencies": {
42
+ "@spscommerce/ds-illustrations": "6.12.1",
40
43
  "@spscommerce/utils": "9.0.3",
44
+ "@vanilla-extract/css": "1.17.4",
45
+ "@vanilla-extract/recipes": "0.2.5",
41
46
  "react": "16.14.0",
42
47
  "react-dom": "16.14.0",
43
- "@sps-woodland/core": "8.51.2",
44
- "@spscommerce/ds-react": "8.51.2"
48
+ "@sps-woodland/buttons": "8.52.0",
49
+ "@sps-woodland/core": "8.52.0",
50
+ "@sps-woodland/tokens": "8.52.0",
51
+ "@spscommerce/ds-colors": "8.52.0",
52
+ "@spscommerce/ds-react": "8.52.0",
53
+ "@spscommerce/ds-shared": "8.52.0",
54
+ "@spscommerce/i18n": "8.52.0"
45
55
  },
46
56
  "scripts": {
47
- "build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
57
+ "build": "pnpm run build:js && pnpm run build:types",
48
58
  "build:js": "vite build",
49
59
  "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
50
- "build:css": "cp ../core/lib/content-row/style.css lib/style.css 2>/dev/null || echo 'content-row style.css not found, skipping'",
51
60
  "watch": "vite build --watch",
52
61
  "clean": "git clean -fdX",
53
62
  "pub": "node ../../../scripts/publish-package.mjs"
package/vite.config.mjs CHANGED
@@ -1,22 +1,31 @@
1
1
  import path from "node:path";
2
+ import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
2
3
  import { defineConfig } from "vite";
4
+ import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
3
5
  import pkg from "./package.json";
4
6
 
7
+ const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
8
+
5
9
  export default defineConfig({
10
+ plugins: [
11
+ vanillaExtractPlugin(
12
+ getVanillaExtractPluginProps({
13
+ packageName: pkg.name,
14
+ packageVersion,
15
+ })
16
+ ),
17
+ ],
6
18
  build: {
7
19
  lib: {
8
20
  entry: path.resolve(__dirname, "src/index.ts"),
9
21
  name: "ContentRow",
10
22
  fileName: "index",
23
+ cssFileName: "style",
11
24
  },
12
25
  outDir: path.resolve(__dirname, "./lib"),
13
26
  emptyOutDir: false,
14
27
  rollupOptions: {
15
- // External must match subpath imports like @sps-woodland/core/content-row
16
- external: (id) => {
17
- const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
18
- return peerDeps.some((dep) => id === dep || id.startsWith(dep + "/"));
19
- },
28
+ external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
20
29
  },
21
30
  },
22
31
  });