@homebound/beam 2.91.6 → 2.91.7

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 (3) hide show
  1. package/dist/components/Table/nestedCards.d.ts +11 -3
  2. package/dist/components/Table/nestedCards.js +44 -48
  3. package/package.json +1 -1
package/dist/components/Table/nestedCards.d.ts CHANGED
@@ -12,6 +12,8 @@ import { GridColumn, GridDataRow, GridStyle, Kinded, NestedCardStyle, RowTuple }
12
12
  * a content row itself, the nested padding is handled separately by the
13
13
  * GridRow component.
14
14
  */
15
+ declare type Chrome = () => JSX.Element;
16
+ declare type ChromeBuffer = Chrome[];
15
17
  export declare class NestedCards {
16
18
  private columns;
17
19
  private filteredRows;
@@ -40,7 +42,7 @@ export declare class NestedCards {
40
42
  * I.e. due to the flatness of our DOM, we inherently have to add a "close"
41
43
  * row separate from the card's actual content.
42
44
  */
43
- export declare function makeOpenOrCloseCard(openCards: NestedCardStyle[], kind: "open" | "close"): JSX.Element;
45
+ export declare function makeOpenOrCloseCard(openCards: NestedCardStyle[], kind: "open" | "close"): Chrome;
44
46
  /**
45
47
  * For the first or last cell of actual content, wrap them in divs that re-create the
46
48
  * outer cards' padding + background.
@@ -52,7 +54,7 @@ export declare function maybeAddCardPadding(openCards: NestedCardStyle[], column
52
54
  * Our height is not based on `openCards`, b/c for the top-most level, we won't
53
55
  * have any open cards, but still want a space between top-level cards.
54
56
  */
55
- export declare function makeSpacer(height: number, openCards: NestedCardStyle[]): import("@emotion/react/jsx-runtime").JSX.Element;
57
+ export declare function makeSpacer(height: number, openCards: NestedCardStyle[]): Chrome;
56
58
  /**
57
59
  * Takes the current buffer of close row(s), spacers, and open row, and creates a single chrome DOM row.
58
60
  *
@@ -65,5 +67,11 @@ export declare function makeSpacer(height: number, openCards: NestedCardStyle[])
65
67
  * - nested card2 content row
66
68
  * - chrome row (card2 close, card1 close)
67
69
  */
68
- export declare function maybeCreateChromeRow(columns: GridColumn<any>[], filteredRows: RowTuple<any>[], chromeBuffer: JSX.Element[]): void;
70
+ export declare function maybeCreateChromeRow(columns: GridColumn<any>[], filteredRows: RowTuple<any>[], chromeBuffer: ChromeBuffer): void;
71
+ interface ChromeRowProps {
72
+ chromeBuffer: ChromeBuffer;
73
+ columns: number;
74
+ }
75
+ export declare function ChromeRow({ chromeBuffer, columns }: ChromeRowProps): import("@emotion/react/jsx-runtime").JSX.Element;
69
76
  export declare function dropChromeRows<R extends Kinded>(filteredRows: RowTuple<R>[]): [GridDataRow<R>, ReactElement][];
77
+ export {};
package/dist/components/Table/nestedCards.js CHANGED
@@ -1,21 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.dropChromeRows = exports.maybeCreateChromeRow = exports.makeSpacer = exports.maybeAddCardPadding = exports.makeOpenOrCloseCard = exports.NestedCards = void 0;
3
+ exports.dropChromeRows = exports.ChromeRow = exports.maybeCreateChromeRow = exports.makeSpacer = exports.maybeAddCardPadding = exports.makeOpenOrCloseCard = exports.NestedCards = void 0;
4
4
  const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const Css_1 = require("../../Css");
7
- /**
8
- * A helper class to create our nested card DOM shenanigans.
9
- *
10
- * This acts as a one-off visitor that accepts "begin row", "between row",
11
- * "end row" calls from GridTable while its translating the user's nested
12
- * GridDataRows into a flat list of RowTuples, and interjects fake/chrome
13
- * rows into `filteredRows` as necessary.
14
- *
15
- * Note that this class only handles *between row* chrome and that within
16
- * a content row itself, the nested padding is handled separately by the
17
- * GridRow component.
18
- */
19
7
  class NestedCards {
20
8
  constructor(columns, filteredRows, style) {
21
9
  this.columns = columns;
@@ -68,29 +56,32 @@ exports.NestedCards = NestedCards;
68
56
  * row separate from the card's actual content.
69
57
  */
70
58
  function makeOpenOrCloseCard(openCards, kind) {
71
- let div = (0, jsx_runtime_1.jsx)("div", {}, void 0);
72
- const place = kind === "open" ? "Top" : "Bottom";
73
- const btOrBb = kind === "open" ? "bt" : "bb";
74
- // Create nesting for the all open cards, i.e.:
75
- //
76
- // | card1 | card2 -------------- card2 | card1 |
77
- // | card1 | card2 / ... card3 ... \ card2 | card1 |
78
- // | card1 | card2 | ... card3 ... | card2 | card1 |
79
- //
80
- [...openCards].reverse().forEach((card, i) => {
81
- const first = i === 0;
82
- div = ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
83
- ...Css_1.Css.bgColor(card.bgColor).pxPx(card.pxPx).$,
84
- // Only the 1st div needs border left/right radius + border top/bottom.
85
- ...(first &&
86
- Css_1.Css.add({
87
- [`border${place}RightRadius`]: `${card.brPx}px`,
88
- [`border${place}LeftRadius`]: `${card.brPx}px`,
89
- }).hPx(card.brPx).$),
90
- ...(card.bColor && Css_1.Css.bc(card.bColor).bl.br.if(first)[btOrBb].$),
91
- } }, { children: div }), void 0));
92
- });
93
- return div;
59
+ const scopeCards = [...openCards];
60
+ return () => {
61
+ let div = (0, jsx_runtime_1.jsx)("div", {}, void 0);
62
+ const place = kind === "open" ? "Top" : "Bottom";
63
+ const btOrBb = kind === "open" ? "bt" : "bb";
64
+ // Create nesting for the all open cards, i.e.:
65
+ //
66
+ // | card1 | card2 -------------- card2 | card1 |
67
+ // | card1 | card2 / ... card3 ... \ card2 | card1 |
68
+ // | card1 | card2 | ... card3 ... | card2 | card1 |
69
+ //
70
+ [...scopeCards].reverse().forEach((card, i) => {
71
+ const first = i === 0;
72
+ div = ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
73
+ ...Css_1.Css.bgColor(card.bgColor).pxPx(card.pxPx).$,
74
+ // Only the 1st div needs border left/right radius + border top/bottom.
75
+ ...(first &&
76
+ Css_1.Css.add({
77
+ [`border${place}RightRadius`]: `${card.brPx}px`,
78
+ [`border${place}LeftRadius`]: `${card.brPx}px`,
79
+ }).hPx(card.brPx).$),
80
+ ...(card.bColor && Css_1.Css.bc(card.bColor).bl.br.if(first)[btOrBb].$),
81
+ } }, { children: div }), void 0));
82
+ });
83
+ return div;
84
+ };
94
85
  }
95
86
  exports.makeOpenOrCloseCard = makeOpenOrCloseCard;
96
87
  /**
@@ -116,13 +107,16 @@ exports.maybeAddCardPadding = maybeAddCardPadding;
116
107
  * have any open cards, but still want a space between top-level cards.
117
108
  */
118
109
  function makeSpacer(height, openCards) {
119
- let div = (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.hPx(height).$ }, void 0);
120
- // Start at the current/inside card, and wrap outward padding + borders.
121
- // | card1 | card2 | ... card3 ... | card2 | card1 |
122
- [...openCards].reverse().forEach((card) => {
123
- div = (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.bgColor(card.bgColor).pxPx(card.pxPx).if(!!card.bColor).bc(card.bColor).bl.br.$ }, { children: div }), void 0);
124
- });
125
- return div;
110
+ const scopeCards = [...openCards];
111
+ return () => {
112
+ let div = (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.hPx(height).$ }, void 0);
113
+ // Start at the current/inside card, and wrap outward padding + borders.
114
+ // | card1 | card2 | ... card3 ... | card2 | card1 |
115
+ [...scopeCards].reverse().forEach((card) => {
116
+ div = (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.bgColor(card.bgColor).pxPx(card.pxPx).if(!!card.bColor).bc(card.bColor).bl.br.$ }, { children: div }), void 0);
117
+ });
118
+ return div;
119
+ };
126
120
  }
127
121
  exports.makeSpacer = makeSpacer;
128
122
  /**
@@ -139,16 +133,18 @@ exports.makeSpacer = makeSpacer;
139
133
  */
140
134
  function maybeCreateChromeRow(columns, filteredRows, chromeBuffer) {
141
135
  if (chromeBuffer.length > 0) {
142
- filteredRows.push([
143
- undefined,
144
- // We add 2 to account for our dedicated open/close columns
145
- (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.gc(`span ${columns.length + 2}`).$, "data-chrome": "true" }, { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c }, i))) }), void 0),
146
- ]);
136
+ filteredRows.push([undefined, (0, jsx_runtime_1.jsx)(ChromeRow, { chromeBuffer: [...chromeBuffer], columns: columns.length }, void 0)]);
147
137
  // clear the buffer
148
138
  chromeBuffer.splice(0, chromeBuffer.length);
149
139
  }
150
140
  }
151
141
  exports.maybeCreateChromeRow = maybeCreateChromeRow;
142
+ function ChromeRow({ chromeBuffer, columns }) {
143
+ return (
144
+ // We add 2 to account for our dedicated open/close columns
145
+ (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.gc(`span ${columns + 2}`).$, "data-chrome": "true" }, { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c() }, i))) }), void 0));
146
+ }
147
+ exports.ChromeRow = ChromeRow;
152
148
  function dropChromeRows(filteredRows) {
153
149
  return filteredRows.filter(([r]) => !!r);
154
150
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homebound/beam",
3
- "version": "2.91.6",
3
+ "version": "2.91.7",
4
4
  "author": "Homebound",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",