@homebound/beam 3.34.1 → 3.36.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.
- package/dist/index.cjs +791 -715
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +91 -72
- package/dist/index.d.ts +91 -72
- package/dist/index.js +645 -569
- package/dist/index.js.map +1 -1
- package/dist/truss.css +10 -2
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -50,14 +50,14 @@ __export(index_exports, {
|
|
|
50
50
|
BoundDateField: () => BoundDateField,
|
|
51
51
|
BoundDateRangeField: () => BoundDateRangeField,
|
|
52
52
|
BoundForm: () => BoundForm,
|
|
53
|
-
BoundIconCardField: () => BoundIconCardField,
|
|
54
|
-
BoundIconCardGroupField: () => BoundIconCardGroupField,
|
|
55
53
|
BoundMultiLineSelectField: () => BoundMultiLineSelectField,
|
|
56
54
|
BoundMultiSelectField: () => BoundMultiSelectField,
|
|
57
55
|
BoundNumberField: () => BoundNumberField,
|
|
58
56
|
BoundRadioGroupField: () => BoundRadioGroupField,
|
|
59
57
|
BoundRichTextField: () => BoundRichTextField,
|
|
60
58
|
BoundSelectAndTextField: () => BoundSelectAndTextField,
|
|
59
|
+
BoundSelectCardField: () => BoundSelectCardField,
|
|
60
|
+
BoundSelectCardGroupField: () => BoundSelectCardGroupField,
|
|
61
61
|
BoundSelectField: () => BoundSelectField,
|
|
62
62
|
BoundSwitchField: () => BoundSwitchField,
|
|
63
63
|
BoundTextAreaField: () => BoundTextAreaField,
|
|
@@ -117,7 +117,6 @@ __export(index_exports, {
|
|
|
117
117
|
HomeboundLogo: () => HomeboundLogo,
|
|
118
118
|
Icon: () => Icon,
|
|
119
119
|
IconButton: () => IconButton,
|
|
120
|
-
IconCard: () => IconCard,
|
|
121
120
|
Icons: () => Icons,
|
|
122
121
|
KEPT_GROUP: () => KEPT_GROUP,
|
|
123
122
|
Loader: () => Loader,
|
|
@@ -159,6 +158,8 @@ __export(index_exports, {
|
|
|
159
158
|
ScrollableContent: () => ScrollableContent,
|
|
160
159
|
ScrollableFooter: () => ScrollableFooter,
|
|
161
160
|
ScrollableParent: () => ScrollableParent,
|
|
161
|
+
SelectCard: () => SelectCard,
|
|
162
|
+
SelectCardGroup: () => SelectCardGroup,
|
|
162
163
|
SelectField: () => SelectField,
|
|
163
164
|
SelectToggle: () => SelectToggle,
|
|
164
165
|
SideNav: () => SideNav,
|
|
@@ -207,13 +208,13 @@ __export(index_exports, {
|
|
|
207
208
|
boundCheckboxGroupField: () => boundCheckboxGroupField,
|
|
208
209
|
boundDateField: () => boundDateField,
|
|
209
210
|
boundDateRangeField: () => boundDateRangeField,
|
|
210
|
-
boundIconCardField: () => boundIconCardField,
|
|
211
|
-
boundIconCardGroupField: () => boundIconCardGroupField,
|
|
212
211
|
boundMultiSelectField: () => boundMultiSelectField,
|
|
213
212
|
boundMultilineSelectField: () => boundMultilineSelectField,
|
|
214
213
|
boundNumberField: () => boundNumberField,
|
|
215
214
|
boundRadioGroupField: () => boundRadioGroupField,
|
|
216
215
|
boundRichTextField: () => boundRichTextField,
|
|
216
|
+
boundSelectCardField: () => boundSelectCardField,
|
|
217
|
+
boundSelectCardGroupField: () => boundSelectCardGroupField,
|
|
217
218
|
boundSelectField: () => boundSelectField,
|
|
218
219
|
boundSwitchField: () => boundSwitchField,
|
|
219
220
|
boundTextAreaField: () => boundTextAreaField,
|
|
@@ -253,6 +254,7 @@ __export(index_exports, {
|
|
|
253
254
|
emptyCell: () => emptyCell,
|
|
254
255
|
ensureClientSideSortValueIsSortable: () => ensureClientSideSortValueIsSortable,
|
|
255
256
|
environmentBannerSizePx: () => environmentBannerSizePx,
|
|
257
|
+
fillRowStyles: () => fillRowStyles,
|
|
256
258
|
filterTestIdPrefix: () => filterTestIdPrefix,
|
|
257
259
|
formatDate: () => formatDate,
|
|
258
260
|
formatDateRange: () => formatDateRange,
|
|
@@ -269,7 +271,6 @@ __export(index_exports, {
|
|
|
269
271
|
getTableStyles: () => getTableStyles,
|
|
270
272
|
headerRenderFn: () => headerRenderFn,
|
|
271
273
|
hoverStyles: () => hoverStyles,
|
|
272
|
-
iconCardStylesHover: () => iconCardStylesHover,
|
|
273
274
|
increment: () => increment,
|
|
274
275
|
insertAtIndex: () => insertAtIndex,
|
|
275
276
|
isContentColumn: () => isContentColumn,
|
|
@@ -311,7 +312,6 @@ __export(index_exports, {
|
|
|
311
312
|
rowClickRenderFn: () => rowClickRenderFn,
|
|
312
313
|
rowLinkRenderFn: () => rowLinkRenderFn,
|
|
313
314
|
selectColumn: () => selectColumn,
|
|
314
|
-
selectedStyles: () => selectedStyles,
|
|
315
315
|
setDefaultStyle: () => setDefaultStyle,
|
|
316
316
|
setEnvironmentFavicon: () => setEnvironmentFavicon,
|
|
317
317
|
setGridTableDefaults: () => setGridTableDefaults,
|
|
@@ -4875,7 +4875,11 @@ var Icon = import_react4.default.memo((props) => {
|
|
|
4875
4875
|
});
|
|
4876
4876
|
var Icons = {
|
|
4877
4877
|
// Actions
|
|
4878
|
-
|
|
4878
|
+
columns: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19.893 3.001H4C2.897 3.001 2 3.898 2 5.001V19.001C2 20.104 2.897 21.001 4 21.001H19.893C20.996 21.001 21.893 20.104 21.893 19.001V8V7V6V5.001V5C21.892 3.897 20.994 3.001 19.893 3.001ZM8 19.001H4V8H8V19.001ZM14 19.001H10V8H14V19.001ZM16 19.001V8H19.893L19.894 19.001H16Z" }) }),
|
|
4879
|
+
columnsBadged: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
4880
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15.6006 3.00098C15.2173 3.75094 15 4.59994 15 5.5C15 6.67655 15.3708 7.76585 16 8.66016V19.001H19.8936L19.8926 10.9658C20.0921 10.9877 20.2947 11 20.5 11C20.9812 11 21.4477 10.9374 21.8926 10.8213V19.001C21.8926 20.104 20.9956 21.001 19.8926 21.001H4C2.897 21.001 2 20.104 2 19.001V5.00098C2 3.89798 2.897 3.00098 4 3.00098H15.6006ZM4 8V19.001H8V8H4ZM10 8V19.001H14V8H10Z" }),
|
|
4881
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "20.5", cy: "5.5", r: "3.5", fill: `var(${"--b-primary" /* Primary */})` })
|
|
4882
|
+
] }),
|
|
4879
4883
|
expand: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 12H3V21H12V19H5V12ZM12 5H19V12H21V3H12V5Z" }),
|
|
4880
4884
|
collapse: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16.121 6.465L14 4.344V10H19.656L17.535 7.879L20.707 4.707L19.293 3.293L16.121 6.465ZM4.70703 3.293L3.29303 4.707L6.46503 7.879L4.34403 10H10V4.344L7.87903 6.465L4.70703 3.293ZM19.656 14H14V19.656L16.121 17.535L19.293 20.707L20.707 19.293L17.535 16.121L19.656 14ZM6.46503 16.121L3.29303 19.293L4.70703 20.707L7.87903 17.535L10 19.656V14H4.34403L6.46503 16.121Z" }),
|
|
4881
4885
|
drag: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
@@ -4921,6 +4925,10 @@ var Icons = {
|
|
|
4921
4925
|
checkbox: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7 5C5.897 5 5 5.897 5 7V17C5 18.103 5.897 19 7 19H17C18.103 19 19 18.103 19 17V7C19 5.897 18.103 5 17 5H7ZM7 17V7H17L17.002 17H7Z" }),
|
|
4922
4926
|
check: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9.99997 15.586L6.70697 12.293L5.29297 13.707L9.99997 18.414L19.707 8.70697L18.293 7.29297L9.99997 15.586Z" }),
|
|
4923
4927
|
search: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 18C11.846 18 13.543 17.365 14.897 16.312L19.293 20.708L20.707 19.294L16.311 14.898C17.365 13.543 18 11.846 18 10C18 5.589 14.411 2 10 2C5.589 2 2 5.589 2 10C2 14.411 5.589 18 10 18ZM10 4C13.309 4 16 6.691 16 10C16 13.309 13.309 16 10 16C6.691 16 4 13.309 4 10C4 6.691 6.691 4 10 4Z" }),
|
|
4928
|
+
searchBadged: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
4929
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 2C11.0109 2 11.9779 2.19048 12.8691 2.53418C12.5119 3.09081 12.2502 3.71507 12.1123 4.38477C11.4549 4.13674 10.7432 4 10 4C6.691 4 4 6.691 4 10C4 13.309 6.691 16 10 16C13.0458 16 15.5653 13.7197 15.9473 10.7764C16.4398 10.9211 16.9606 11 17.5 11C17.6477 11 17.7938 10.9919 17.9385 10.9805C17.7569 12.4453 17.1749 13.7872 16.3105 14.8984L20.707 19.2939L19.293 20.708L14.8975 16.3115C13.5435 17.3645 11.846 18 10 18C5.589 18 2 14.411 2 10C2 5.589 5.589 2 10 2Z" }),
|
|
4930
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "17.5", cy: "5.5", r: "3.5", fill: `var(${"--b-primary" /* Primary */})` })
|
|
4931
|
+
] }),
|
|
4924
4932
|
comment: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 2C6.486 2 2 5.589 2 10C2 12.908 3.898 15.516 7 16.934V22L12.34 17.995C17.697 17.852 22 14.32 22 10C22 5.589 17.514 2 12 2ZM12 16H11.667L9 18V15.583L8.359 15.336C5.67 14.301 4 12.256 4 10C4 6.691 7.589 4 12 4C16.411 4 20 6.691 20 10C20 13.309 16.411 16 12 16Z" }),
|
|
4925
4933
|
commentFilled: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 0C4.486 0 0 3.589 0 8C0 10.908 1.898 13.516 5 14.934V20L10.34 15.995C15.697 15.852 20 12.32 20 8C20 3.589 15.514 0 10 0Z" }),
|
|
4926
4934
|
plus: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 11H13V5H11V11H5V13H11V19H13V13H19V11Z" }),
|
|
@@ -4972,6 +4980,10 @@ var Icons = {
|
|
|
4972
4980
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 2H8V4H20V16H22V4C22 2.897 21.103 2 20 2Z" })
|
|
4973
4981
|
] }),
|
|
4974
4982
|
filter: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7.625 4C7.14175 4 6.75 4.39797 6.75 4.88889V5.92952C5.73046 6.29559 5 7.28336 5 8.44444C5 9.60553 5.73046 10.5933 6.75 10.9594V19.1111C6.75 19.602 7.14175 20 7.625 20C8.10825 20 8.5 19.602 8.5 19.1111V10.9594C9.51954 10.5933 10.25 9.60553 10.25 8.44444C10.25 7.28336 9.51954 6.29559 8.5 5.92952V4.88889C8.5 4.39797 8.10825 4 7.625 4ZM8.5 8.44444C8.5 8.93537 8.10825 9.33333 7.625 9.33333C7.14175 9.33333 6.75 8.93537 6.75 8.44444C6.75 7.95353 7.14175 7.55556 7.625 7.55556C8.10825 7.55556 8.5 7.95353 8.5 8.44444ZM16.375 4C15.8917 4 15.5 4.39797 15.5 4.88889V12.1517C14.4805 12.5178 13.75 13.5056 13.75 14.6667C13.75 15.8277 14.4805 16.8156 15.5 17.1816V19.1111C15.5 19.602 15.8917 20 16.375 20C16.8583 20 17.25 19.602 17.25 19.1111V17.1816C18.2695 16.8156 19 15.8277 19 14.6667C19 13.5056 18.2695 12.5178 17.25 12.1517V4.88889C17.25 4.39797 16.8583 4 16.375 4ZM17.25 14.6667C17.25 15.1576 16.8583 15.5556 16.375 15.5556C15.8917 15.5556 15.5 15.1576 15.5 14.6667C15.5 14.1757 15.8917 13.7778 16.375 13.7778C16.8583 13.7778 17.25 14.1757 17.25 14.6667Z" }),
|
|
4983
|
+
filterBadged: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
4984
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7.625 4C8.10817 4 8.49988 4.39786 8.5 4.88867V5.92969C9.51948 6.29576 10.25 7.28332 10.25 8.44434C10.25 9.60537 9.51948 10.5929 8.5 10.959V19.1113C8.49988 19.6022 8.10817 20 7.625 20C7.14183 20 6.75012 19.6022 6.75 19.1113V10.959C5.73052 10.5929 5 9.60537 5 8.44434C5.00005 7.28332 5.73052 6.29576 6.75 5.92969V4.88867C6.75012 4.39786 7.14183 4 7.625 4ZM15.5 8.1084C16.0277 8.45265 16.6177 8.70846 17.25 8.85547V12.1514C18.2696 12.5174 19 13.5059 19 14.667C18.9999 15.8279 18.2695 16.8156 17.25 17.1816V19.1113C17.2499 19.6022 16.8582 20 16.375 20C15.8918 20 15.5001 19.6022 15.5 19.1113V17.1816C14.4805 16.8156 13.7501 15.8279 13.75 14.667C13.75 13.5059 14.4804 12.5174 15.5 12.1514V8.1084ZM16.375 13.7773C15.8917 13.7773 15.5 14.1761 15.5 14.667C15.5002 15.1578 15.8918 15.5557 16.375 15.5557C16.8582 15.5557 17.2498 15.1578 17.25 14.667C17.25 14.1761 16.8583 13.7773 16.375 13.7773ZM7.625 7.55566C7.14179 7.55566 6.75006 7.95347 6.75 8.44434C6.75 8.93526 7.14176 9.33301 7.625 9.33301C8.10824 9.33301 8.5 8.93526 8.5 8.44434C8.49994 7.95347 8.10821 7.55566 7.625 7.55566Z" }),
|
|
4985
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "18.5", cy: "3.5", r: "3.5", fill: `var(${"--b-primary" /* Primary */})` })
|
|
4986
|
+
] }),
|
|
4975
4987
|
impersonate: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
4976
4988
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M17.882 7L18.5 7L18.5 4L22.5 8L18.5 12L18.5 9L17.882 9L15.5 9L15.5 7L17.882 7Z" }),
|
|
4977
4989
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16.618 14.5L16 14.5L16 11.5L12 15.5L16 19.5L16 16.5L16.618 16.5L19 16.5L19 14.5L16.618 14.5Z" }),
|
|
@@ -5342,7 +5354,21 @@ var Icons = {
|
|
|
5342
5354
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M1.28481 17.9291C1.68761 18.0252 1.93583 18.4306 1.83991 18.8335L1.68148 19.4996H2.36957C2.78374 19.4997 3.11896 19.836 3.11896 20.2501C3.11871 20.6641 2.78359 20.9995 2.36957 20.9995H1.68148C0.712759 20.9995 -0.00204962 20.095 0.222017 19.1527L0.381609 18.4854C0.47768 18.0826 0.881956 17.8332 1.28481 17.9291ZM6.49699 19.4996L6.64849 19.5146C6.99008 19.5847 7.24638 19.8878 7.24638 20.2501C7.24616 20.6122 6.98991 20.9144 6.64849 20.9845L6.49699 20.9995H5.1208C4.70687 20.9994 4.37166 20.664 4.37141 20.2501C4.37141 19.836 4.70672 19.4997 5.1208 19.4996H6.49699ZM10.6244 19.4996C11.0386 19.4996 11.3738 19.8359 11.3738 20.2501C11.3736 20.6641 11.0384 20.9995 10.6244 20.9995H9.24822C8.8343 20.9994 8.49909 20.664 8.49883 20.2501C8.49883 19.836 8.83415 19.4998 9.24822 19.4996H10.6244ZM14.7518 19.4996C15.166 19.4996 15.5012 19.8359 15.5012 20.2501C15.501 20.6641 15.1659 20.9995 14.7518 20.9995H13.3756C12.9617 20.9994 12.6265 20.664 12.6263 20.2501C12.6263 19.836 12.9616 19.4998 13.3756 19.4996H14.7518ZM18.8793 19.4996C19.2935 19.4996 19.6298 19.8359 19.6298 20.2501C19.6296 20.6641 19.2933 20.9995 18.8793 20.9995H17.5031C17.0892 20.9993 16.7539 20.664 16.7537 20.2501C16.7537 19.836 17.089 19.4998 17.5031 19.4996H18.8793ZM22.7765 17.9511C23.1826 17.8707 23.5771 18.1348 23.6578 18.5409L23.7896 19.2082C23.9734 20.1356 23.2641 20.9995 22.3186 20.9995H21.6305C21.2166 20.9993 20.8814 20.664 20.8811 20.2501C20.8811 19.836 21.2164 19.4998 21.6305 19.4996H22.3186L22.1868 18.8335L22.1717 18.682C22.1737 18.333 22.421 18.0216 22.7765 17.9511ZM23.1293 15.8741C23.2099 16.2803 22.9456 16.6757 22.5395 16.7565C22.1333 16.8371 21.7378 16.5728 21.6571 16.1667L21.3923 14.8333L22.1289 14.6875L22.8644 14.5407L23.1293 15.8741ZM2.47481 16.1667C2.37869 16.5694 1.97442 16.8177 1.57161 16.7218C1.16887 16.6257 0.920596 16.2214 1.01651 15.8186L2.47481 16.1667ZM2.23658 13.9301C2.63953 14.026 2.88878 14.4303 2.79284 14.8333L2.47481 16.1667L1.74508 15.992L1.01651 15.8186L1.33338 14.4852C1.42946 14.0824 1.83377 13.8342 2.23658 13.9301ZM21.9821 13.9509C22.3883 13.8703 22.7837 14.1345 22.8644 14.5407L21.3923 14.8333C21.3117 14.4271 21.576 14.0317 21.9821 13.9509ZM22.3348 11.8739C22.4154 12.2802 22.1513 12.6756 21.745 12.7562C21.3894 12.8266 21.0426 12.6329 20.9077 12.311L20.8638 12.1664L20.5989 10.833L21.3344 10.6873L22.0699 10.5405L22.3348 11.8739ZM3.18951 9.92985C3.59224 10.0259 3.84052 10.4302 3.74461 10.833L3.42774 12.1664L3.37801 12.3099C3.23088 12.626 2.87702 12.8065 2.52454 12.7227C2.12159 12.6268 1.87234 12.2213 1.96828 11.8184L2.28631 10.485C2.38252 10.0824 2.78676 9.83396 3.18951 9.92985ZM21.1887 9.95182C21.5948 9.87125 21.9891 10.1345 22.0699 10.5405L20.5989 10.833C20.5183 10.4268 20.7826 10.0325 21.1887 9.95182ZM19.9374 5.99902C20.6533 5.99902 21.2703 6.50534 21.4096 7.20753L21.5414 7.87481L21.5553 8.02515C21.5534 8.37415 21.3073 8.68547 20.9516 8.75604C20.5963 8.82651 20.2496 8.63336 20.1144 8.31195L20.0704 8.16624L19.9374 7.50011H19.0828C18.6686 7.50011 18.3323 7.16379 18.3323 6.74957C18.3323 6.33535 18.6686 5.99902 19.0828 5.99902H19.9374ZM5.39373 5.99902C5.80794 5.99902 6.14427 6.33535 6.14427 6.74957C6.14427 7.16379 5.80794 7.50011 5.39373 7.50011H4.5391L4.37951 8.16624C4.28352 8.56913 3.87923 8.81843 3.47631 8.7225C3.07363 8.62647 2.82552 8.22204 2.92121 7.8193L3.07964 7.15202C3.24058 6.47639 3.84455 5.99902 4.5391 5.99902H5.39373ZM10.5273 5.99902C10.9415 5.99904 11.2778 6.33536 11.2778 6.74957C11.2778 7.16378 10.9415 7.5001 10.5273 7.50011H8.81571C8.40174 7.49982 8.06632 7.16361 8.06632 6.74957C8.06632 6.33553 8.40174 5.99931 8.81571 5.99902H10.5273ZM15.6608 5.99902C16.0748 5.99932 16.4102 6.33554 16.4102 6.74957C16.4102 7.1636 16.0748 7.49982 15.6608 7.50011H13.9493C13.535 7.50011 13.1987 7.16378 13.1987 6.74957C13.1987 6.33536 13.535 5.99903 13.9493 5.99902H15.6608Z" }),
|
|
5343
5355
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10.6309 14.7413V10.9913H13.6309V14.7413C13.6309 15.1538 13.9684 15.4913 14.3809 15.4913H16.6309C17.0434 15.4913 17.3809 15.1538 17.3809 14.7413V9.4913H18.6559C19.0009 9.4913 19.1659 9.0638 18.9034 8.8388L12.6334 3.19125C12.3484 2.93625 11.9134 2.93625 11.6284 3.19125L5.35831 8.8388C5.10331 9.0638 5.26081 9.4913 5.60581 9.4913H6.88082V14.7413C6.88082 15.1538 7.21833 15.4913 7.63083 15.4913H9.88085C10.2934 15.4913 10.6309 15.1538 10.6309 14.7413Z" })
|
|
5344
5356
|
] }),
|
|
5345
|
-
houseFilled: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9.82369 19.9192V14.5155H14.1715V19.9192C14.1715 20.5137 14.6606 21 15.2584 21H18.5193C19.1171 21 19.6062 20.5137 19.6062 19.9192V12.3539H21.454C21.954 12.3539 22.1932 11.7379 21.8127 11.4137L12.7258 3.27559C12.3128 2.90814 11.6824 2.90814 11.2693 3.27559L2.18245 11.4137C1.81288 11.7379 2.04114 12.3539 2.54114 12.3539H4.38895V19.9192C4.38895 20.5137 4.87808 21 5.4759 21H8.73674C9.33456 21 9.82369 20.5137 9.82369 19.9192Z" }) })
|
|
5357
|
+
houseFilled: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9.82369 19.9192V14.5155H14.1715V19.9192C14.1715 20.5137 14.6606 21 15.2584 21H18.5193C19.1171 21 19.6062 20.5137 19.6062 19.9192V12.3539H21.454C21.954 12.3539 22.1932 11.7379 21.8127 11.4137L12.7258 3.27559C12.3128 2.90814 11.6824 2.90814 11.2693 3.27559L2.18245 11.4137C1.81288 11.7379 2.04114 12.3539 2.54114 12.3539H4.38895V19.9192C4.38895 20.5137 4.87808 21 5.4759 21H8.73674C9.33456 21 9.82369 20.5137 9.82369 19.9192Z" }) }),
|
|
5358
|
+
// Option Type / slot icons
|
|
5359
|
+
single: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
5360
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 15V17H5V15H9ZM9 9H5V17C3.96435 17 3.113 16.2128 3.01074 15.2041L3 15V9C3 7.89543 3.89543 7 5 7H9L9.2041 7.01074C10.2128 7.113 11 7.96435 11 9V15C11 16.1046 10.1046 17 9 17V9Z" }),
|
|
5361
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 15V17H15V15H19ZM19 9H15V17C13.9643 17 13.113 16.2128 13.0107 15.2041L13 15V9C13 7.89543 13.8954 7 15 7H19L19.2041 7.01074C20.2128 7.113 21 7.96435 21 9V15C21 16.1046 20.1046 17 19 17V9Z" })
|
|
5362
|
+
] }),
|
|
5363
|
+
linked: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
5364
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 15V17H5V15H9ZM19 15V17H15V15H19ZM19 9H15V17C13.8954 17 13 16.1046 13 15V9C13 7.89543 13.8954 7 15 7H19C20.1046 7 21 7.89543 21 9V15C21 16.1046 20.1046 17 19 17V9ZM9 9H5V17C3.89543 17 3 16.1046 3 15V9C3 7.89543 3.89543 7 5 7H9C10.1046 7 11 7.89543 11 9V15C11 16.1046 10.1046 17 9 17V9Z" }),
|
|
5365
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7 11H17V13H7V11Z" })
|
|
5366
|
+
] }),
|
|
5367
|
+
package: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
5368
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 15V17H5V15H9ZM9 9H5V17C3.96435 17 3.113 16.2128 3.01074 15.2041L3 15V9C3 7.89543 3.89543 7 5 7H9L9.2041 7.01074C10.2128 7.113 11 7.96435 11 9V15C11 16.1046 10.1046 17 9 17V9Z" }),
|
|
5369
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 18V20H4V18H20ZM22 16V8C22 6.89543 21.1046 6 20 6H4C2.89543 6 2 6.89543 2 8V16C2 17.1046 2.89543 18 4 18V20C1.79086 20 0 18.2091 0 16V8C0 5.79086 1.79086 4 4 4H20L20.2061 4.00488C22.3194 4.11211 24 5.85996 24 8V16L23.9951 16.2061C23.8913 18.2512 22.2512 19.8913 20.2061 19.9951L20 20V18C21.1046 18 22 17.1046 22 16Z" }),
|
|
5370
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 15V17H15V15H19ZM19 9H15V17C13.9643 17 13.113 16.2128 13.0107 15.2041L13 15V9C13 7.89543 13.8954 7 15 7H19L19.2041 7.01074C20.2128 7.113 21 7.96435 21 9V15C21 16.1046 20.1046 17 19 17V9Z" })
|
|
5371
|
+
] })
|
|
5346
5372
|
};
|
|
5347
5373
|
|
|
5348
5374
|
// src/components/PresentationContext.tsx
|
|
@@ -5502,7 +5528,7 @@ function Chips(props) {
|
|
|
5502
5528
|
// src/components/Table/GridTable.tsx
|
|
5503
5529
|
var import_memoize_one = __toESM(require("memoize-one"), 1);
|
|
5504
5530
|
var import_mobx10 = require("mobx");
|
|
5505
|
-
var
|
|
5531
|
+
var import_react81 = __toESM(require("react"), 1);
|
|
5506
5532
|
var import_react_virtuoso2 = require("react-virtuoso");
|
|
5507
5533
|
|
|
5508
5534
|
// src/components/Layout/ScrollableContent.tsx
|
|
@@ -5693,7 +5719,7 @@ var sizeToPixels = {
|
|
|
5693
5719
|
// src/components/Table/GridTableApi.ts
|
|
5694
5720
|
var import_mobx9 = require("mobx");
|
|
5695
5721
|
var import_mobx_utils = require("mobx-utils");
|
|
5696
|
-
var
|
|
5722
|
+
var import_react72 = require("react");
|
|
5697
5723
|
|
|
5698
5724
|
// src/components/Table/types.ts
|
|
5699
5725
|
var nonKindGridColumnKeys = [
|
|
@@ -7762,7 +7788,7 @@ function PinToggle({ rowId }) {
|
|
|
7762
7788
|
}
|
|
7763
7789
|
|
|
7764
7790
|
// src/components/Table/components/SelectToggle.tsx
|
|
7765
|
-
var
|
|
7791
|
+
var import_react71 = require("react");
|
|
7766
7792
|
|
|
7767
7793
|
// src/inputs/Autocomplete.tsx
|
|
7768
7794
|
var import_react53 = require("react");
|
|
@@ -10392,7 +10418,7 @@ function Button(props) {
|
|
|
10392
10418
|
} = (0, import_react_aria12.useHover)(ariaProps);
|
|
10393
10419
|
const {
|
|
10394
10420
|
baseStyles: baseStyles5,
|
|
10395
|
-
hoverStyles:
|
|
10421
|
+
hoverStyles: hoverStyles5,
|
|
10396
10422
|
disabledStyles: disabledStyles4,
|
|
10397
10423
|
pressedStyles: pressedStyles2,
|
|
10398
10424
|
focusStyles: focusStyles2
|
|
@@ -10421,7 +10447,7 @@ function Button(props) {
|
|
|
10421
10447
|
textTransform: "tt_inherit"
|
|
10422
10448
|
},
|
|
10423
10449
|
...baseStyles5,
|
|
10424
|
-
...isHovered && !isPressed && !active ?
|
|
10450
|
+
...isHovered && !isPressed && !active ? hoverStyles5 : {},
|
|
10425
10451
|
...isPressed || active ? pressedStyles2 : {},
|
|
10426
10452
|
...isDisabled || asyncInProgress ? {
|
|
10427
10453
|
...disabledStyles4,
|
|
@@ -10824,7 +10850,7 @@ function NavLink(props) {
|
|
|
10824
10850
|
baseStyles: baseStyles5,
|
|
10825
10851
|
activeStyles: activeStyles3,
|
|
10826
10852
|
focusRingStyles: focusRingStyles2,
|
|
10827
|
-
hoverStyles:
|
|
10853
|
+
hoverStyles: hoverStyles5,
|
|
10828
10854
|
disabledStyles: disabledStyles4,
|
|
10829
10855
|
pressedStyles: pressedStyles2
|
|
10830
10856
|
} = (0, import_react37.useMemo)(() => getNavLinkStyles(variant), [variant]);
|
|
@@ -10844,7 +10870,7 @@ function NavLink(props) {
|
|
|
10844
10870
|
...active && activeStyles3,
|
|
10845
10871
|
...isDisabled && disabledStyles4,
|
|
10846
10872
|
...isFocusVisible && focusRingStyles2,
|
|
10847
|
-
...isHovered &&
|
|
10873
|
+
...isHovered && hoverStyles5,
|
|
10848
10874
|
...isPressed && pressedStyles2
|
|
10849
10875
|
})
|
|
10850
10876
|
};
|
|
@@ -13985,102 +14011,10 @@ function DateRangeField(props) {
|
|
|
13985
14011
|
return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DateFieldBase, { ...props, mode: "range" });
|
|
13986
14012
|
}
|
|
13987
14013
|
|
|
13988
|
-
// src/inputs/
|
|
14014
|
+
// src/inputs/MultiLineSelectField.tsx
|
|
13989
14015
|
var import_react58 = require("react");
|
|
13990
|
-
var import_react_aria33 = require("react-aria");
|
|
13991
|
-
var import_react_stately11 = require("react-stately");
|
|
13992
14016
|
var import_runtime45 = require("@homebound/truss/runtime");
|
|
13993
14017
|
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
13994
|
-
function IconCard(props) {
|
|
13995
|
-
const {
|
|
13996
|
-
selected: isSelected = false,
|
|
13997
|
-
disabled: isDisabled = false,
|
|
13998
|
-
icon,
|
|
13999
|
-
cardRef,
|
|
14000
|
-
label,
|
|
14001
|
-
tooltip,
|
|
14002
|
-
...otherProps
|
|
14003
|
-
} = props;
|
|
14004
|
-
const ref = useGetRef(cardRef);
|
|
14005
|
-
const ariaProps = {
|
|
14006
|
-
isSelected,
|
|
14007
|
-
isDisabled,
|
|
14008
|
-
...otherProps
|
|
14009
|
-
};
|
|
14010
|
-
const checkboxProps = {
|
|
14011
|
-
...ariaProps,
|
|
14012
|
-
"aria-label": label
|
|
14013
|
-
};
|
|
14014
|
-
const {
|
|
14015
|
-
hoverProps,
|
|
14016
|
-
isHovered
|
|
14017
|
-
} = (0, import_react_aria33.useHover)({
|
|
14018
|
-
isDisabled
|
|
14019
|
-
});
|
|
14020
|
-
const toggleState = (0, import_react_stately11.useToggleState)(ariaProps);
|
|
14021
|
-
const {
|
|
14022
|
-
inputProps
|
|
14023
|
-
} = (0, import_react_aria33.useCheckbox)(checkboxProps, toggleState, ref);
|
|
14024
|
-
const styles = (0, import_react58.useMemo)(() => ({
|
|
14025
|
-
...baseStyles3,
|
|
14026
|
-
...isHovered && iconCardStylesHover,
|
|
14027
|
-
...isSelected && selectedStyles,
|
|
14028
|
-
...isDisabled && disabledStyles2
|
|
14029
|
-
}), [isDisabled, isHovered, isSelected]);
|
|
14030
|
-
const tid = useTestIds(props, defaultTestId(label));
|
|
14031
|
-
return maybeTooltip({
|
|
14032
|
-
title: resolveTooltip(isDisabled, tooltip),
|
|
14033
|
-
placement: "top",
|
|
14034
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("button", { ...(0, import_runtime45.trussProps)(styles), ...hoverProps, onClick: toggleState.toggle, disabled: isDisabled, ...tid, children: [
|
|
14035
|
-
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_aria33.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("input", { ref, ...inputProps, ...tid.value }) }),
|
|
14036
|
-
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Icon, { icon, inc: 4, color: isDisabled ? "rgba(221, 220, 220, 1)" /* Gray300 */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }),
|
|
14037
|
-
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { ...(0, import_runtime45.trussProps)({
|
|
14038
|
-
fontWeight: "fw4",
|
|
14039
|
-
fontSize: "fz_12px",
|
|
14040
|
-
lineHeight: "lh_16px",
|
|
14041
|
-
...isDisabled ? {
|
|
14042
|
-
color: "gray300"
|
|
14043
|
-
} : {}
|
|
14044
|
-
}), children: label })
|
|
14045
|
-
] })
|
|
14046
|
-
});
|
|
14047
|
-
}
|
|
14048
|
-
var baseStyles3 = {
|
|
14049
|
-
display: "df",
|
|
14050
|
-
flexDirection: "fdc",
|
|
14051
|
-
alignItems: "aic",
|
|
14052
|
-
justifyContent: "jcc",
|
|
14053
|
-
width: "w_130px",
|
|
14054
|
-
height: "h_114px",
|
|
14055
|
-
borderStyle: "bss",
|
|
14056
|
-
borderWidth: "bw1",
|
|
14057
|
-
borderRadius: "br8",
|
|
14058
|
-
borderColor: "bcGray300",
|
|
14059
|
-
backgroundColor: "bgWhite",
|
|
14060
|
-
gap: "gap_12px",
|
|
14061
|
-
paddingTop: "pt2",
|
|
14062
|
-
paddingBottom: "pb2",
|
|
14063
|
-
paddingRight: "pr2",
|
|
14064
|
-
paddingLeft: "pl2",
|
|
14065
|
-
textAlign: "tac"
|
|
14066
|
-
};
|
|
14067
|
-
var selectedStyles = {
|
|
14068
|
-
borderWidth: "bw2",
|
|
14069
|
-
borderColor: "bcBlue500",
|
|
14070
|
-
backgroundColor: "bgBlue50"
|
|
14071
|
-
};
|
|
14072
|
-
var disabledStyles2 = {
|
|
14073
|
-
borderColor: "bcGray200",
|
|
14074
|
-
backgroundColor: "bgGray50"
|
|
14075
|
-
};
|
|
14076
|
-
var iconCardStylesHover = {
|
|
14077
|
-
backgroundColor: "bgGray100"
|
|
14078
|
-
};
|
|
14079
|
-
|
|
14080
|
-
// src/inputs/MultiLineSelectField.tsx
|
|
14081
|
-
var import_react59 = require("react");
|
|
14082
|
-
var import_runtime46 = require("@homebound/truss/runtime");
|
|
14083
|
-
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
14084
14018
|
function MultiLineSelectField(props) {
|
|
14085
14019
|
const {
|
|
14086
14020
|
options,
|
|
@@ -14092,29 +14026,29 @@ function MultiLineSelectField(props) {
|
|
|
14092
14026
|
...otherProps
|
|
14093
14027
|
} = props;
|
|
14094
14028
|
const tid = useTestIds(props, "");
|
|
14095
|
-
const [isDisplayed, setIsDisplayed] = (0,
|
|
14029
|
+
const [isDisplayed, setIsDisplayed] = (0, import_react58.useState)(true);
|
|
14096
14030
|
const currentOptions = options.filter((o) => !values.includes(getOptionValue(o)));
|
|
14097
|
-
return /* @__PURE__ */ (0,
|
|
14031
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { ...(0, import_runtime45.trussProps)({
|
|
14098
14032
|
marginTop: "mt1",
|
|
14099
14033
|
...labelStyle === "left" ? {
|
|
14100
14034
|
display: "df"
|
|
14101
14035
|
} : {}
|
|
14102
14036
|
}), children: [
|
|
14103
|
-
labelStyle !== "hidden" && /* @__PURE__ */ (0,
|
|
14037
|
+
labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ...(0, import_runtime45.trussProps)({
|
|
14104
14038
|
...labelStyle === "left" ? {
|
|
14105
14039
|
width: "w50"
|
|
14106
14040
|
} : {}
|
|
14107
|
-
}), children: /* @__PURE__ */ (0,
|
|
14108
|
-
/* @__PURE__ */ (0,
|
|
14041
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Label, { ...tid.label, label: props.label }) }),
|
|
14042
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { ...(0, import_runtime45.trussProps)({
|
|
14109
14043
|
...labelStyle === "left" ? {
|
|
14110
14044
|
width: "w50"
|
|
14111
14045
|
} : {}
|
|
14112
14046
|
}), children: [
|
|
14113
14047
|
values.map((value, index) => {
|
|
14114
|
-
return /* @__PURE__ */ (0,
|
|
14115
|
-
/* @__PURE__ */ (0,
|
|
14048
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "mb1 pl1 df", children: [
|
|
14049
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "wsnw oh to_ellipsis w100", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(SelectField, { ...otherProps, ...tid.selectField, labelStyle: "hidden", value, onSelect: () => {
|
|
14116
14050
|
}, options, getOptionValue, getOptionLabel, compact: true, readOnly: true }) }),
|
|
14117
|
-
/* @__PURE__ */ (0,
|
|
14051
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button, { ...tid.deleteSelected, variant: "tertiary", label: "", "aria-label": `Delete selected ${otherProps.label}`, icon: "x", onClick: () => {
|
|
14118
14052
|
const selectedOptions = options.filter((o) => values.includes(getOptionValue(o)) && getOptionValue(o) !== value);
|
|
14119
14053
|
const selectedValues = selectedOptions.map((o) => getOptionValue(o));
|
|
14120
14054
|
onSelect(selectedValues, selectedOptions);
|
|
@@ -14122,17 +14056,17 @@ function MultiLineSelectField(props) {
|
|
|
14122
14056
|
} })
|
|
14123
14057
|
] }, index);
|
|
14124
14058
|
}),
|
|
14125
|
-
isDisplayed && /* @__PURE__ */ (0,
|
|
14059
|
+
isDisplayed && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mb1", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(SelectField, { ...tid.selectField, label: otherProps.label, labelStyle: "hidden", getOptionValue, getOptionLabel, value: "", onSelect: (value) => {
|
|
14126
14060
|
onSelect([...values, value], options);
|
|
14127
14061
|
setIsDisplayed(false);
|
|
14128
14062
|
}, options: currentOptions, disabled: otherProps.disabled }) }),
|
|
14129
|
-
/* @__PURE__ */ (0,
|
|
14063
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button, { ...tid.addAnother, label: "Add Another", variant: "tertiary", onClick: () => setIsDisplayed(true), disabled: isDisplayed || currentOptions.length === 0 })
|
|
14130
14064
|
] })
|
|
14131
14065
|
] });
|
|
14132
14066
|
}
|
|
14133
14067
|
|
|
14134
14068
|
// src/inputs/MultiSelectField.tsx
|
|
14135
|
-
var
|
|
14069
|
+
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
14136
14070
|
function MultiSelectField(props) {
|
|
14137
14071
|
const {
|
|
14138
14072
|
getOptionValue = (opt) => opt.id,
|
|
@@ -14141,15 +14075,15 @@ function MultiSelectField(props) {
|
|
|
14141
14075
|
// if unset, assume O implements HasName
|
|
14142
14076
|
...otherProps
|
|
14143
14077
|
} = props;
|
|
14144
|
-
return /* @__PURE__ */ (0,
|
|
14078
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ComboBoxBase, { multiselect: true, getOptionLabel, getOptionValue, ...otherProps });
|
|
14145
14079
|
}
|
|
14146
14080
|
|
|
14147
14081
|
// src/inputs/NumberField.tsx
|
|
14148
14082
|
var import_number = require("@internationalized/number");
|
|
14149
|
-
var
|
|
14150
|
-
var
|
|
14151
|
-
var
|
|
14152
|
-
var
|
|
14083
|
+
var import_react59 = require("react");
|
|
14084
|
+
var import_react_aria33 = require("react-aria");
|
|
14085
|
+
var import_react_stately11 = require("react-stately");
|
|
14086
|
+
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
14153
14087
|
function NumberField(props) {
|
|
14154
14088
|
const {
|
|
14155
14089
|
fieldProps
|
|
@@ -14189,7 +14123,7 @@ function NumberField(props) {
|
|
|
14189
14123
|
const isReadOnly = !!readOnly;
|
|
14190
14124
|
const factor = type === "percent" ? 100 : type === "cents" ? 100 : type === "mills" ? 1e3 : type === "basisPoints" ? 1e4 : 1;
|
|
14191
14125
|
const signDisplay = displayDirection ? "always" : "auto";
|
|
14192
|
-
const defaultFormatOptions = (0,
|
|
14126
|
+
const defaultFormatOptions = (0, import_react59.useMemo)(() => ({
|
|
14193
14127
|
[truncate ? "maximumFractionDigits" : "minimumFractionDigits"]: numFractionDigits,
|
|
14194
14128
|
...numIntegerDigits !== void 0 && {
|
|
14195
14129
|
minimumIntegerDigits: numIntegerDigits
|
|
@@ -14199,8 +14133,8 @@ function NumberField(props) {
|
|
|
14199
14133
|
}), [truncate, numIntegerDigits, useGrouping, signDisplay, numFractionDigits]);
|
|
14200
14134
|
const {
|
|
14201
14135
|
locale
|
|
14202
|
-
} = (0,
|
|
14203
|
-
const formatOptions = (0,
|
|
14136
|
+
} = (0, import_react_aria33.useLocale)();
|
|
14137
|
+
const formatOptions = (0, import_react59.useMemo)(() => {
|
|
14204
14138
|
if (numberFormatOptions !== void 0) {
|
|
14205
14139
|
return numberFormatOptions;
|
|
14206
14140
|
}
|
|
@@ -14232,13 +14166,13 @@ function NumberField(props) {
|
|
|
14232
14166
|
...typeFormat
|
|
14233
14167
|
};
|
|
14234
14168
|
}, [type, numberFormatOptions, defaultFormatOptions, numFractionDigits]);
|
|
14235
|
-
const numberParser = (0,
|
|
14236
|
-
const valueRef = (0,
|
|
14169
|
+
const numberParser = (0, import_react59.useMemo)(() => new import_number.NumberParser(locale, formatOptions), [locale, formatOptions]);
|
|
14170
|
+
const valueRef = (0, import_react59.useRef)({
|
|
14237
14171
|
wip: false
|
|
14238
14172
|
});
|
|
14239
|
-
const lastSentRef = (0,
|
|
14240
|
-
const focusValueRef = (0,
|
|
14241
|
-
const [, forceRender] = (0,
|
|
14173
|
+
const lastSentRef = (0, import_react59.useRef)(void 0);
|
|
14174
|
+
const focusValueRef = (0, import_react59.useRef)(void 0);
|
|
14175
|
+
const [, forceRender] = (0, import_react59.useState)(0);
|
|
14242
14176
|
const propValue = value === void 0 ? Number.NaN : value / factor;
|
|
14243
14177
|
if (valueRef.current.wip && !Object.is(valueRef.current.value, propValue)) {
|
|
14244
14178
|
const lastSentInternal = lastSentRef.current === void 0 ? Number.NaN : lastSentRef.current / factor;
|
|
@@ -14284,17 +14218,17 @@ function NumberField(props) {
|
|
|
14284
14218
|
formatOptions,
|
|
14285
14219
|
...otherProps
|
|
14286
14220
|
};
|
|
14287
|
-
const state = (0,
|
|
14288
|
-
const inputRef = (0,
|
|
14221
|
+
const state = (0, import_react_stately11.useNumberFieldState)(useProps);
|
|
14222
|
+
const inputRef = (0, import_react59.useRef)(null);
|
|
14289
14223
|
const {
|
|
14290
14224
|
labelProps,
|
|
14291
14225
|
inputProps,
|
|
14292
14226
|
groupProps
|
|
14293
|
-
} = (0,
|
|
14227
|
+
} = (0, import_react_aria33.useNumberField)(useProps, state, inputRef);
|
|
14294
14228
|
if (readOnly && !inputRef.current) {
|
|
14295
14229
|
inputRef.current = document.createElement("input");
|
|
14296
14230
|
}
|
|
14297
|
-
return /* @__PURE__ */ (0,
|
|
14231
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
14298
14232
|
TextFieldBase,
|
|
14299
14233
|
{
|
|
14300
14234
|
xss: {
|
|
@@ -14305,7 +14239,7 @@ function NumberField(props) {
|
|
|
14305
14239
|
labelProps,
|
|
14306
14240
|
label,
|
|
14307
14241
|
required,
|
|
14308
|
-
inputProps: (0,
|
|
14242
|
+
inputProps: (0, import_react_aria33.mergeProps)(inputProps, {
|
|
14309
14243
|
size: sizeToContent ? String(inputProps.value ?? "").length || 1 : void 0
|
|
14310
14244
|
}),
|
|
14311
14245
|
onChange: (rawInputValue) => {
|
|
@@ -14337,11 +14271,11 @@ function formatValue(value, factor, numFractionDigits, numIntegerDigits, positiv
|
|
|
14337
14271
|
}
|
|
14338
14272
|
|
|
14339
14273
|
// src/inputs/RadioGroupField.tsx
|
|
14340
|
-
var
|
|
14341
|
-
var
|
|
14342
|
-
var
|
|
14343
|
-
var
|
|
14344
|
-
var
|
|
14274
|
+
var import_react60 = require("react");
|
|
14275
|
+
var import_react_aria34 = require("react-aria");
|
|
14276
|
+
var import_react_stately12 = require("react-stately");
|
|
14277
|
+
var import_runtime46 = require("@homebound/truss/runtime");
|
|
14278
|
+
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
14345
14279
|
var nextNameId = 0;
|
|
14346
14280
|
function RadioGroupField(props) {
|
|
14347
14281
|
const {
|
|
@@ -14357,8 +14291,8 @@ function RadioGroupField(props) {
|
|
|
14357
14291
|
layout = "vertical",
|
|
14358
14292
|
...otherProps
|
|
14359
14293
|
} = props;
|
|
14360
|
-
const name = (0,
|
|
14361
|
-
const state = (0,
|
|
14294
|
+
const name = (0, import_react60.useMemo)(() => `radio-group-${++nextNameId}`, []);
|
|
14295
|
+
const state = (0, import_react_stately12.useRadioGroupState)({
|
|
14362
14296
|
name,
|
|
14363
14297
|
value,
|
|
14364
14298
|
onChange: (value2) => onChange(value2),
|
|
@@ -14370,14 +14304,14 @@ function RadioGroupField(props) {
|
|
|
14370
14304
|
const {
|
|
14371
14305
|
labelProps,
|
|
14372
14306
|
radioGroupProps
|
|
14373
|
-
} = (0,
|
|
14307
|
+
} = (0, import_react_aria34.useRadioGroup)({
|
|
14374
14308
|
label,
|
|
14375
14309
|
isDisabled: disabled,
|
|
14376
14310
|
isRequired: required
|
|
14377
14311
|
}, state);
|
|
14378
14312
|
return (
|
|
14379
14313
|
// default styling to position `<Label />` above.
|
|
14380
|
-
/* @__PURE__ */ (0,
|
|
14314
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { ...(0, import_runtime46.trussProps)({
|
|
14381
14315
|
display: "df",
|
|
14382
14316
|
flexDirection: "fdc",
|
|
14383
14317
|
gap: "gap1",
|
|
@@ -14388,9 +14322,9 @@ function RadioGroupField(props) {
|
|
|
14388
14322
|
justifyContent: "jcsb"
|
|
14389
14323
|
} : {}
|
|
14390
14324
|
}), children: [
|
|
14391
|
-
/* @__PURE__ */ (0,
|
|
14392
|
-
/* @__PURE__ */ (0,
|
|
14393
|
-
/* @__PURE__ */ (0,
|
|
14325
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: labelStyle === "hidden" }),
|
|
14326
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { ...radioGroupProps, children: [
|
|
14327
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { ...(0, import_runtime46.trussProps)({
|
|
14394
14328
|
display: "df",
|
|
14395
14329
|
...layout === "horizontal" ? {
|
|
14396
14330
|
flexDirection: "fdr",
|
|
@@ -14401,14 +14335,14 @@ function RadioGroupField(props) {
|
|
|
14401
14335
|
gap: "gap1"
|
|
14402
14336
|
}
|
|
14403
14337
|
}), children: options.map((option) => {
|
|
14404
|
-
return /* @__PURE__ */ (0,
|
|
14338
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_react60.Fragment, { children: maybeTooltip({
|
|
14405
14339
|
title: resolveTooltip(option.disabled),
|
|
14406
14340
|
placement: "bottom",
|
|
14407
|
-
children: /* @__PURE__ */ (0,
|
|
14341
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Radio, { parentId: name, option, state, isOptionDisabled: !!option.disabled, ...otherProps, ...tid[option.value] })
|
|
14408
14342
|
}) }, option.value);
|
|
14409
14343
|
}) }),
|
|
14410
|
-
errorMsg && /* @__PURE__ */ (0,
|
|
14411
|
-
helperText && /* @__PURE__ */ (0,
|
|
14344
|
+
errorMsg && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ErrorMessage, { errorMsg, ...tid.errorMsg }),
|
|
14345
|
+
helperText && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(HelperText, { helperText })
|
|
14412
14346
|
] })
|
|
14413
14347
|
] })
|
|
14414
14348
|
);
|
|
@@ -14427,11 +14361,11 @@ function Radio(props) {
|
|
|
14427
14361
|
} = props;
|
|
14428
14362
|
const labelId = `${parentId}-${value}-label`;
|
|
14429
14363
|
const descriptionId = `${parentId}-${value}-description`;
|
|
14430
|
-
const ref = (0,
|
|
14364
|
+
const ref = (0, import_react60.useRef)(null);
|
|
14431
14365
|
const {
|
|
14432
14366
|
inputProps,
|
|
14433
14367
|
isDisabled
|
|
14434
|
-
} = (0,
|
|
14368
|
+
} = (0, import_react_aria34.useRadio)({
|
|
14435
14369
|
value,
|
|
14436
14370
|
"aria-labelledby": labelId,
|
|
14437
14371
|
isDisabled: isOptionDisabled
|
|
@@ -14440,26 +14374,26 @@ function Radio(props) {
|
|
|
14440
14374
|
const {
|
|
14441
14375
|
focusProps,
|
|
14442
14376
|
isFocusVisible
|
|
14443
|
-
} = (0,
|
|
14377
|
+
} = (0, import_react_aria34.useFocusRing)();
|
|
14444
14378
|
const {
|
|
14445
14379
|
hoverProps,
|
|
14446
14380
|
isHovered
|
|
14447
|
-
} = (0,
|
|
14381
|
+
} = (0, import_react_aria34.useHover)({
|
|
14448
14382
|
isDisabled: disabled
|
|
14449
14383
|
});
|
|
14450
|
-
return /* @__PURE__ */ (0,
|
|
14384
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("label", { ...(0, import_runtime46.trussProps)({
|
|
14451
14385
|
display: "df",
|
|
14452
14386
|
cursor: "cursorPointer",
|
|
14453
14387
|
...disabled ? {
|
|
14454
14388
|
cursor: "cursor_initial"
|
|
14455
14389
|
} : {}
|
|
14456
14390
|
}), ...hoverProps, children: [
|
|
14457
|
-
/* @__PURE__ */ (0,
|
|
14391
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
14458
14392
|
"input",
|
|
14459
14393
|
{
|
|
14460
14394
|
type: "radio",
|
|
14461
14395
|
ref,
|
|
14462
|
-
...(0,
|
|
14396
|
+
...(0, import_runtime46.trussProps)({
|
|
14463
14397
|
...radioReset,
|
|
14464
14398
|
...radioDefault,
|
|
14465
14399
|
...!disabled && state.selectedValue === value ? radioChecked : radioUnchecked,
|
|
@@ -14479,8 +14413,8 @@ function Radio(props) {
|
|
|
14479
14413
|
...others
|
|
14480
14414
|
}
|
|
14481
14415
|
),
|
|
14482
|
-
/* @__PURE__ */ (0,
|
|
14483
|
-
/* @__PURE__ */ (0,
|
|
14416
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
|
|
14417
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { id: labelId, ...(0, import_runtime46.trussProps)({
|
|
14484
14418
|
fontWeight: "fw4",
|
|
14485
14419
|
fontSize: "fz_14px",
|
|
14486
14420
|
lineHeight: "lh_20px",
|
|
@@ -14491,7 +14425,7 @@ function Radio(props) {
|
|
|
14491
14425
|
}), ...description ? {
|
|
14492
14426
|
"aria-describedby": descriptionId
|
|
14493
14427
|
} : {}, children: label }),
|
|
14494
|
-
description && /* @__PURE__ */ (0,
|
|
14428
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { id: descriptionId, ...(0, import_runtime46.trussProps)({
|
|
14495
14429
|
fontWeight: "fw4",
|
|
14496
14430
|
fontSize: "fz_14px",
|
|
14497
14431
|
lineHeight: "lh_20px",
|
|
@@ -14555,7 +14489,7 @@ var radioChecked = {
|
|
|
14555
14489
|
// And use backgroundImage to draw a white dot in the middle of the background
|
|
14556
14490
|
...{
|
|
14557
14491
|
backgroundImage: ["backgroundImage_var", {
|
|
14558
|
-
"--backgroundImage": (0,
|
|
14492
|
+
"--backgroundImage": (0, import_runtime46.maybeCssVar)(`url("${whiteCircle}")`)
|
|
14559
14493
|
}]
|
|
14560
14494
|
},
|
|
14561
14495
|
// Make our border the same color as the dot
|
|
@@ -14596,19 +14530,19 @@ var radioDisabled = {
|
|
|
14596
14530
|
|
|
14597
14531
|
// src/inputs/RichTextField.tsx
|
|
14598
14532
|
var import_dompurify = __toESM(require("dompurify"), 1);
|
|
14599
|
-
var
|
|
14533
|
+
var import_react62 = require("react");
|
|
14600
14534
|
|
|
14601
14535
|
// src/inputs/RichTextField.mock.tsx
|
|
14602
14536
|
var import_change_case5 = require("change-case");
|
|
14603
|
-
var
|
|
14604
|
-
var
|
|
14537
|
+
var import_react61 = require("react");
|
|
14538
|
+
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
14605
14539
|
function RichTextFieldMock(props) {
|
|
14606
14540
|
const { onBlur = () => {
|
|
14607
14541
|
}, onFocus = () => {
|
|
14608
14542
|
}, readOnly } = props;
|
|
14609
|
-
const [value, setValue] = (0,
|
|
14543
|
+
const [value, setValue] = (0, import_react61.useState)(props.value || "");
|
|
14610
14544
|
const tid = useTestIds(props, defaultTestId2(props.label || "richTextField"));
|
|
14611
|
-
return /* @__PURE__ */ (0,
|
|
14545
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
14612
14546
|
"input",
|
|
14613
14547
|
{
|
|
14614
14548
|
type: "text",
|
|
@@ -14634,8 +14568,8 @@ var import_tributejs = __toESM(require("tributejs"), 1);
|
|
|
14634
14568
|
var import_tribute = require("tributejs/dist/tribute.css");
|
|
14635
14569
|
var import_trix = require("trix/dist/trix");
|
|
14636
14570
|
var import_trix2 = require("trix/dist/trix.css");
|
|
14637
|
-
var
|
|
14638
|
-
var
|
|
14571
|
+
var import_runtime47 = require("@homebound/truss/runtime");
|
|
14572
|
+
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
14639
14573
|
var RichTextField = withTestMock(RichTextFieldImpl, RichTextFieldMock);
|
|
14640
14574
|
function RichTextFieldImpl(props) {
|
|
14641
14575
|
const {
|
|
@@ -14651,16 +14585,16 @@ function RichTextFieldImpl(props) {
|
|
|
14651
14585
|
readOnly,
|
|
14652
14586
|
fullWidth = fieldProps?.fullWidth ?? false
|
|
14653
14587
|
} = props;
|
|
14654
|
-
const [editor, setEditor] = (0,
|
|
14655
|
-
const editorElement = (0,
|
|
14656
|
-
const currentHtml = (0,
|
|
14657
|
-
const onChangeRef = (0,
|
|
14588
|
+
const [editor, setEditor] = (0, import_react62.useState)();
|
|
14589
|
+
const editorElement = (0, import_react62.useRef)();
|
|
14590
|
+
const currentHtml = (0, import_react62.useRef)(void 0);
|
|
14591
|
+
const onChangeRef = (0, import_react62.useRef)(onChange);
|
|
14658
14592
|
onChangeRef.current = onChange;
|
|
14659
|
-
const onBlurRef = (0,
|
|
14593
|
+
const onBlurRef = (0, import_react62.useRef)(onBlur);
|
|
14660
14594
|
onBlurRef.current = onBlur;
|
|
14661
|
-
const onFocusRef = (0,
|
|
14595
|
+
const onFocusRef = (0, import_react62.useRef)(onFocus);
|
|
14662
14596
|
onFocusRef.current = onFocus;
|
|
14663
|
-
const id = (0,
|
|
14597
|
+
const id = (0, import_react62.useMemo)(() => {
|
|
14664
14598
|
if (readOnly) return;
|
|
14665
14599
|
const id2 = `trix-editor-${trixId}`;
|
|
14666
14600
|
trixId++;
|
|
@@ -14704,7 +14638,7 @@ function RichTextFieldImpl(props) {
|
|
|
14704
14638
|
window.addEventListener("trix-initialize", onEditorInit);
|
|
14705
14639
|
return id2;
|
|
14706
14640
|
}, [readOnly]);
|
|
14707
|
-
(0,
|
|
14641
|
+
(0, import_react62.useEffect)(() => {
|
|
14708
14642
|
if (!readOnly && editor && value !== currentHtml.current) {
|
|
14709
14643
|
editor.loadHTML(value || "");
|
|
14710
14644
|
}
|
|
@@ -14714,16 +14648,16 @@ function RichTextFieldImpl(props) {
|
|
|
14714
14648
|
autoFocus
|
|
14715
14649
|
} = props;
|
|
14716
14650
|
if (!readOnly) {
|
|
14717
|
-
return /* @__PURE__ */ (0,
|
|
14651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { ...(0, import_runtime47.trussProps)({
|
|
14718
14652
|
width: "w100",
|
|
14719
14653
|
...!fullWidth ? {
|
|
14720
14654
|
maxWidth: "maxw_550px"
|
|
14721
14655
|
} : {}
|
|
14722
14656
|
}), children: [
|
|
14723
|
-
label && /* @__PURE__ */ (0,
|
|
14724
|
-
/* @__PURE__ */ (0,
|
|
14725
|
-
/* @__PURE__ */ (0,
|
|
14726
|
-
(0,
|
|
14657
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Label, { labelProps: {}, label }),
|
|
14658
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "beam-trix-editor", children: [
|
|
14659
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("input", { type: "hidden", id: `input-${id}`, value }),
|
|
14660
|
+
(0, import_react62.createElement)("trix-editor", {
|
|
14727
14661
|
id,
|
|
14728
14662
|
input: `input-${id}`,
|
|
14729
14663
|
// Autofocus attribute is case sensitive since this is standard HTML
|
|
@@ -14737,14 +14671,14 @@ function RichTextFieldImpl(props) {
|
|
|
14737
14671
|
] })
|
|
14738
14672
|
] });
|
|
14739
14673
|
} else {
|
|
14740
|
-
return /* @__PURE__ */ (0,
|
|
14674
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { ...(0, import_runtime47.trussProps)({
|
|
14741
14675
|
width: "w100",
|
|
14742
14676
|
...!fullWidth ? {
|
|
14743
14677
|
maxWidth: "maxw_550px"
|
|
14744
14678
|
} : {}
|
|
14745
14679
|
}), children: [
|
|
14746
|
-
label && /* @__PURE__ */ (0,
|
|
14747
|
-
/* @__PURE__ */ (0,
|
|
14680
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Label, { label }),
|
|
14681
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "mh_120px bgWhite fw4 fz_14px lh_20px gray900 bss bw1 pt1 pb1 pr1 pl1 br4 bcGray300", dangerouslySetInnerHTML: {
|
|
14748
14682
|
__html: import_dompurify.default.sanitize(value) || placeholder || ""
|
|
14749
14683
|
}, "data-readonly": "true" })
|
|
14750
14684
|
] });
|
|
@@ -14777,9 +14711,222 @@ function extractIdsFromMentions(mergeTags, content) {
|
|
|
14777
14711
|
}
|
|
14778
14712
|
var trixId = 1;
|
|
14779
14713
|
|
|
14780
|
-
// src/inputs/
|
|
14714
|
+
// src/inputs/SelectCard.tsx
|
|
14715
|
+
var import_react63 = require("react");
|
|
14716
|
+
var import_react_aria35 = require("react-aria");
|
|
14717
|
+
var import_react_stately13 = require("react-stately");
|
|
14718
|
+
var import_runtime48 = require("@homebound/truss/runtime");
|
|
14719
|
+
var import_jsx_runtime74 = require("react/jsx-runtime");
|
|
14720
|
+
function SelectCard(props) {
|
|
14721
|
+
const {
|
|
14722
|
+
selected: isSelected = false,
|
|
14723
|
+
disabled: isDisabled = false,
|
|
14724
|
+
icon,
|
|
14725
|
+
cardRef,
|
|
14726
|
+
label,
|
|
14727
|
+
description,
|
|
14728
|
+
tooltip,
|
|
14729
|
+
xss,
|
|
14730
|
+
...otherProps
|
|
14731
|
+
} = props;
|
|
14732
|
+
const ref = useGetRef(cardRef);
|
|
14733
|
+
const ariaProps = {
|
|
14734
|
+
isSelected,
|
|
14735
|
+
isDisabled,
|
|
14736
|
+
...otherProps
|
|
14737
|
+
};
|
|
14738
|
+
const checkboxProps = {
|
|
14739
|
+
...ariaProps,
|
|
14740
|
+
"aria-label": label
|
|
14741
|
+
};
|
|
14742
|
+
const {
|
|
14743
|
+
hoverProps,
|
|
14744
|
+
isHovered
|
|
14745
|
+
} = (0, import_react_aria35.useHover)({
|
|
14746
|
+
isDisabled
|
|
14747
|
+
});
|
|
14748
|
+
const toggleState = (0, import_react_stately13.useToggleState)(ariaProps);
|
|
14749
|
+
const {
|
|
14750
|
+
inputProps
|
|
14751
|
+
} = (0, import_react_aria35.useCheckbox)(checkboxProps, toggleState, ref);
|
|
14752
|
+
const styles = (0, import_react63.useMemo)(() => ({
|
|
14753
|
+
...baseStyles3,
|
|
14754
|
+
// A label-only card is a fixed compact box; a description card fills the row and stretches.
|
|
14755
|
+
...description ? fillRowStyles : fixedSizeStyles,
|
|
14756
|
+
// Description cards top-align so multi-line copy lines up; label-only cards center.
|
|
14757
|
+
...description ? {
|
|
14758
|
+
justifyContent: "jcfs"
|
|
14759
|
+
} : {
|
|
14760
|
+
justifyContent: "jcc"
|
|
14761
|
+
},
|
|
14762
|
+
...isHovered && !isDisabled && hoverStyles2,
|
|
14763
|
+
...isSelected && !isDisabled && selectedStyles,
|
|
14764
|
+
...isDisabled && (isSelected ? disabledSelectedStyles : disabledStyles2),
|
|
14765
|
+
// Spread last so a parent can override sizing (see `SelectCardGroup`).
|
|
14766
|
+
...xss
|
|
14767
|
+
}), [description, isDisabled, isHovered, isSelected, xss]);
|
|
14768
|
+
const tid = useTestIds(props, defaultTestId(label));
|
|
14769
|
+
return maybeTooltip({
|
|
14770
|
+
title: resolveTooltip(isDisabled, tooltip),
|
|
14771
|
+
placement: "top",
|
|
14772
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("button", { ...(0, import_runtime48.trussProps)(styles), ...hoverProps, onClick: toggleState.toggle, disabled: isDisabled, ...tid, children: [
|
|
14773
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react_aria35.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("input", { ref, ...inputProps, ...tid.value }) }),
|
|
14774
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Icon, { icon, inc: 4, color: isDisabled ? "rgba(100, 100, 100, 1)" /* Gray700 */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }),
|
|
14775
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { ...(0, import_runtime48.trussProps)(copyStyles), children: [
|
|
14776
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { ...(0, import_runtime48.trussProps)({
|
|
14777
|
+
fontWeight: "fw6",
|
|
14778
|
+
fontSize: "fz_14px",
|
|
14779
|
+
lineHeight: "lh_20px",
|
|
14780
|
+
...isDisabled ? {
|
|
14781
|
+
color: "gray700"
|
|
14782
|
+
} : {}
|
|
14783
|
+
}), children: label }),
|
|
14784
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "fw4 fz_12px lh_16px gray700", children: description })
|
|
14785
|
+
] })
|
|
14786
|
+
] })
|
|
14787
|
+
});
|
|
14788
|
+
}
|
|
14789
|
+
var baseStyles3 = {
|
|
14790
|
+
display: "df",
|
|
14791
|
+
flexDirection: "fdc",
|
|
14792
|
+
alignItems: "aic",
|
|
14793
|
+
borderStyle: "bss",
|
|
14794
|
+
borderWidth: "bw1",
|
|
14795
|
+
borderRadius: "br12",
|
|
14796
|
+
backgroundColor: "bgWhite",
|
|
14797
|
+
borderColor: "bcGray300",
|
|
14798
|
+
gap: "gap1",
|
|
14799
|
+
paddingLeft: "pl2",
|
|
14800
|
+
paddingRight: "pr2",
|
|
14801
|
+
paddingTop: "pt3",
|
|
14802
|
+
paddingBottom: "pb3",
|
|
14803
|
+
textAlign: "tac"
|
|
14804
|
+
};
|
|
14805
|
+
var fixedSizeStyles = {
|
|
14806
|
+
width: "w_130px",
|
|
14807
|
+
height: "h_114px"
|
|
14808
|
+
};
|
|
14809
|
+
var fillRowStyles = {
|
|
14810
|
+
flexBasis: "fb_0",
|
|
14811
|
+
flexGrow: "fg1",
|
|
14812
|
+
flexShrink: "fs0",
|
|
14813
|
+
alignSelf: "asStretch",
|
|
14814
|
+
minWidth: "mw_187px",
|
|
14815
|
+
width: "wa",
|
|
14816
|
+
height: "ha"
|
|
14817
|
+
};
|
|
14818
|
+
var copyStyles = {
|
|
14819
|
+
display: "df",
|
|
14820
|
+
flexDirection: "fdc",
|
|
14821
|
+
alignItems: "aic",
|
|
14822
|
+
gap: "gap_4px",
|
|
14823
|
+
width: "w100"
|
|
14824
|
+
};
|
|
14825
|
+
var hoverStyles2 = {
|
|
14826
|
+
borderColor: "bcBlue600"
|
|
14827
|
+
};
|
|
14828
|
+
var selectedStyles = {
|
|
14829
|
+
borderColor: "bcBlue600",
|
|
14830
|
+
backgroundColor: "bgBlue50"
|
|
14831
|
+
};
|
|
14832
|
+
var disabledStyles2 = {
|
|
14833
|
+
backgroundColor: "bgGray50",
|
|
14834
|
+
borderColor: "bcGray300"
|
|
14835
|
+
};
|
|
14836
|
+
var disabledSelectedStyles = {
|
|
14837
|
+
backgroundColor: "bgGray100",
|
|
14838
|
+
borderColor: "bcGray300"
|
|
14839
|
+
};
|
|
14840
|
+
|
|
14841
|
+
// src/inputs/SelectCardGroup.tsx
|
|
14781
14842
|
var import_react64 = require("react");
|
|
14843
|
+
var import_react_aria36 = require("react-aria");
|
|
14844
|
+
var import_runtime49 = require("@homebound/truss/runtime");
|
|
14782
14845
|
var import_jsx_runtime75 = require("react/jsx-runtime");
|
|
14846
|
+
function SelectCardGroup(props) {
|
|
14847
|
+
const {
|
|
14848
|
+
fieldProps
|
|
14849
|
+
} = usePresentationContext();
|
|
14850
|
+
const {
|
|
14851
|
+
options,
|
|
14852
|
+
label,
|
|
14853
|
+
labelStyle = fieldProps?.labelStyle ?? "above",
|
|
14854
|
+
values,
|
|
14855
|
+
errorMsg,
|
|
14856
|
+
helperText,
|
|
14857
|
+
disabled: isDisabled = false,
|
|
14858
|
+
onChange
|
|
14859
|
+
} = props;
|
|
14860
|
+
const [selected, setSelected] = (0, import_react64.useState)(values);
|
|
14861
|
+
const exclusiveOptions = (0, import_react64.useMemo)(() => options.filter((o) => o.exclusive), [options]);
|
|
14862
|
+
const hasDescription = (0, import_react64.useMemo)(() => options.some((o) => o.description), [options]);
|
|
14863
|
+
const toggleValue = (0, import_react64.useCallback)((value) => {
|
|
14864
|
+
if (isDisabled) return;
|
|
14865
|
+
const option = options.find((o) => o.value === value);
|
|
14866
|
+
if (!option) return;
|
|
14867
|
+
let newSelected = [];
|
|
14868
|
+
if (selected.includes(value)) {
|
|
14869
|
+
newSelected = selected.filter((v) => v !== value);
|
|
14870
|
+
} else {
|
|
14871
|
+
if (option.exclusive) {
|
|
14872
|
+
newSelected = [value];
|
|
14873
|
+
} else {
|
|
14874
|
+
newSelected = [...selected, value];
|
|
14875
|
+
newSelected = newSelected.filter((v) => !exclusiveOptions.some((o) => o.value === v));
|
|
14876
|
+
}
|
|
14877
|
+
}
|
|
14878
|
+
setSelected(newSelected);
|
|
14879
|
+
onChange(newSelected);
|
|
14880
|
+
}, [exclusiveOptions, isDisabled, onChange, options, selected]);
|
|
14881
|
+
const tid = useTestIds(props);
|
|
14882
|
+
const {
|
|
14883
|
+
labelProps,
|
|
14884
|
+
fieldProps: fieldPropsAria
|
|
14885
|
+
} = (0, import_react_aria36.useField)(props);
|
|
14886
|
+
const groupProps = (0, import_react_aria36.mergeProps)(tid, {
|
|
14887
|
+
role: "group",
|
|
14888
|
+
"aria-disabled": isDisabled || void 0,
|
|
14889
|
+
...fieldPropsAria
|
|
14890
|
+
});
|
|
14891
|
+
return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { ...groupProps, children: [
|
|
14892
|
+
labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ...(0, import_runtime49.trussProps)({
|
|
14893
|
+
...labelStyle === "left" ? {
|
|
14894
|
+
width: "w50"
|
|
14895
|
+
} : {}
|
|
14896
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Label, { label, ...labelProps, ...tid.label }) }),
|
|
14897
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "df gap2 flexWrap_wrap", children: options.map((option) => {
|
|
14898
|
+
const {
|
|
14899
|
+
icon,
|
|
14900
|
+
label: label2,
|
|
14901
|
+
description,
|
|
14902
|
+
disabled,
|
|
14903
|
+
tooltip
|
|
14904
|
+
} = option;
|
|
14905
|
+
const isSelected = selected.includes(option.value);
|
|
14906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
14907
|
+
SelectCard,
|
|
14908
|
+
{
|
|
14909
|
+
icon,
|
|
14910
|
+
label: label2,
|
|
14911
|
+
description,
|
|
14912
|
+
xss: hasDescription ? fillRowStyles : void 0,
|
|
14913
|
+
selected: isSelected,
|
|
14914
|
+
disabled,
|
|
14915
|
+
tooltip,
|
|
14916
|
+
onChange: () => toggleValue(option.value),
|
|
14917
|
+
...tid[option.label]
|
|
14918
|
+
},
|
|
14919
|
+
option.label
|
|
14920
|
+
);
|
|
14921
|
+
}) }),
|
|
14922
|
+
errorMsg && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ErrorMessage, { errorMsg, ...tid.errorMsg }),
|
|
14923
|
+
helperText && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(HelperText, { helperText, ...tid.helperText })
|
|
14924
|
+
] });
|
|
14925
|
+
}
|
|
14926
|
+
|
|
14927
|
+
// src/inputs/SelectField.tsx
|
|
14928
|
+
var import_react65 = require("react");
|
|
14929
|
+
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
14783
14930
|
function SelectField(props) {
|
|
14784
14931
|
const {
|
|
14785
14932
|
getOptionValue = defaultOptionValue,
|
|
@@ -14789,8 +14936,8 @@ function SelectField(props) {
|
|
|
14789
14936
|
value,
|
|
14790
14937
|
...otherProps
|
|
14791
14938
|
} = props;
|
|
14792
|
-
const values = (0,
|
|
14793
|
-
return /* @__PURE__ */ (0,
|
|
14939
|
+
const values = (0, import_react65.useMemo)(() => [value], [value]);
|
|
14940
|
+
return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
14794
14941
|
ComboBoxBase,
|
|
14795
14942
|
{
|
|
14796
14943
|
...otherProps,
|
|
@@ -14809,10 +14956,10 @@ function SelectField(props) {
|
|
|
14809
14956
|
}
|
|
14810
14957
|
|
|
14811
14958
|
// src/inputs/Switch.tsx
|
|
14812
|
-
var
|
|
14813
|
-
var
|
|
14814
|
-
var
|
|
14815
|
-
var
|
|
14959
|
+
var import_react66 = require("react");
|
|
14960
|
+
var import_react_aria37 = require("react-aria");
|
|
14961
|
+
var import_runtime50 = require("@homebound/truss/runtime");
|
|
14962
|
+
var import_jsx_runtime77 = require("react/jsx-runtime");
|
|
14816
14963
|
var __maybeInc8 = (inc) => {
|
|
14817
14964
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
14818
14965
|
};
|
|
@@ -14842,26 +14989,26 @@ function Switch(props) {
|
|
|
14842
14989
|
...otherProps
|
|
14843
14990
|
};
|
|
14844
14991
|
const state = toToggleState(isSelected, onChange);
|
|
14845
|
-
const ref = (0,
|
|
14992
|
+
const ref = (0, import_react66.useRef)(null);
|
|
14846
14993
|
const {
|
|
14847
14994
|
inputProps
|
|
14848
|
-
} = (0,
|
|
14995
|
+
} = (0, import_react_aria37.useSwitch)({
|
|
14849
14996
|
...ariaProps,
|
|
14850
14997
|
"aria-label": label
|
|
14851
14998
|
}, state, ref);
|
|
14852
14999
|
const {
|
|
14853
15000
|
isFocusVisible: isFocusVisibleFromEvents,
|
|
14854
15001
|
focusProps
|
|
14855
|
-
} = (0,
|
|
15002
|
+
} = (0, import_react_aria37.useFocusRing)(otherProps);
|
|
14856
15003
|
const {
|
|
14857
15004
|
hoverProps,
|
|
14858
15005
|
isHovered: isHoveredFromEvents
|
|
14859
|
-
} = (0,
|
|
15006
|
+
} = (0, import_react_aria37.useHover)(ariaProps);
|
|
14860
15007
|
const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
|
|
14861
15008
|
const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
|
|
14862
15009
|
const tooltip = resolveTooltip(disabled, props.tooltip);
|
|
14863
15010
|
const tid = useTestIds(otherProps, label);
|
|
14864
|
-
return /* @__PURE__ */ (0,
|
|
15011
|
+
return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("label", { ...hoverProps, ...(0, import_runtime50.trussProps)({
|
|
14865
15012
|
...{
|
|
14866
15013
|
position: "relative",
|
|
14867
15014
|
cursor: "cursorPointer",
|
|
@@ -14899,18 +15046,18 @@ function Switch(props) {
|
|
|
14899
15046
|
color: "gray400"
|
|
14900
15047
|
}
|
|
14901
15048
|
}), children: [
|
|
14902
|
-
labelStyle !== "inline" && labelStyle !== "hidden" && /* @__PURE__ */ (0,
|
|
15049
|
+
labelStyle !== "inline" && labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Label, { label, tooltip, xss: {
|
|
14903
15050
|
...labelStyle === "filter" ? {
|
|
14904
15051
|
color: "gray900"
|
|
14905
15052
|
} : {}
|
|
14906
15053
|
}, inline: labelStyle === "left" || labelStyle === "filter" }) }),
|
|
14907
|
-
/* @__PURE__ */ (0,
|
|
15054
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { ...(0, import_runtime50.trussProps)({
|
|
14908
15055
|
...labelStyle === "left" ? {
|
|
14909
15056
|
width: ["w_var", {
|
|
14910
|
-
"--width": (0,
|
|
15057
|
+
"--width": (0, import_runtime50.maybeCssVar)(__maybeInc8(labelLeftFieldWidth))
|
|
14911
15058
|
}]
|
|
14912
15059
|
} : {}
|
|
14913
|
-
}), children: /* @__PURE__ */ (0,
|
|
15060
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { "aria-hidden": "true", ...(0, import_runtime50.trussProps)({
|
|
14914
15061
|
...{
|
|
14915
15062
|
width: ["w_var", {
|
|
14916
15063
|
"--width": `${toggleWidth(compact)}px`
|
|
@@ -14932,14 +15079,14 @@ function Switch(props) {
|
|
|
14932
15079
|
backgroundColor: "bgBlue700"
|
|
14933
15080
|
},
|
|
14934
15081
|
...isSelected && isHovered && switchSelectedHoverStyles
|
|
14935
|
-
}), children: /* @__PURE__ */ (0,
|
|
15082
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { ...(0, import_runtime50.trussProps)({
|
|
14936
15083
|
...switchCircleDefaultStyles(compact),
|
|
14937
15084
|
...isDisabled && {
|
|
14938
15085
|
backgroundColor: "bgGray100"
|
|
14939
15086
|
},
|
|
14940
15087
|
...isSelected && switchCircleSelectedStyles(compact)
|
|
14941
|
-
}), children: withIcon && /* @__PURE__ */ (0,
|
|
14942
|
-
labelStyle === "inline" && /* @__PURE__ */ (0,
|
|
15088
|
+
}), children: withIcon && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Icon, { icon: isSelected ? "check" : "x", color: isSelected ? "rgba(29, 78, 216, 1)" /* Blue700 */ : "rgba(201, 201, 201, 1)" /* Gray400 */, inc: toggleHeight(compact) / 16 }) }) }) }),
|
|
15089
|
+
labelStyle === "inline" && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Label, { label, tooltip, inline: true, xss: {
|
|
14943
15090
|
fontWeight: "fw4",
|
|
14944
15091
|
fontSize: "fz_14px",
|
|
14945
15092
|
lineHeight: "lh_20px",
|
|
@@ -14948,7 +15095,7 @@ function Switch(props) {
|
|
|
14948
15095
|
lineHeight: "lineHeight_1"
|
|
14949
15096
|
} : {}
|
|
14950
15097
|
} }),
|
|
14951
|
-
/* @__PURE__ */ (0,
|
|
15098
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react_aria37.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("input", { ref, ...inputProps, ...focusProps, ...tid }) })
|
|
14952
15099
|
] });
|
|
14953
15100
|
}
|
|
14954
15101
|
var toggleHeight = (isCompact) => isCompact ? 16 : 24;
|
|
@@ -14988,15 +15135,15 @@ function switchCircleDefaultStyles(isCompact) {
|
|
|
14988
15135
|
function switchCircleSelectedStyles(isCompact) {
|
|
14989
15136
|
return {
|
|
14990
15137
|
left: ["left_var", {
|
|
14991
|
-
"--left": (0,
|
|
15138
|
+
"--left": (0, import_runtime50.maybeCssVar)(__maybeInc8(`calc(100% - ${circleDiameter(isCompact)}px - 2px)`))
|
|
14992
15139
|
}]
|
|
14993
15140
|
};
|
|
14994
15141
|
}
|
|
14995
15142
|
|
|
14996
15143
|
// src/inputs/TextAreaField.tsx
|
|
14997
|
-
var
|
|
14998
|
-
var
|
|
14999
|
-
var
|
|
15144
|
+
var import_react67 = require("react");
|
|
15145
|
+
var import_react_aria38 = require("react-aria");
|
|
15146
|
+
var import_jsx_runtime78 = require("react/jsx-runtime");
|
|
15000
15147
|
function TextAreaField(props) {
|
|
15001
15148
|
const {
|
|
15002
15149
|
value = "",
|
|
@@ -15012,10 +15159,10 @@ function TextAreaField(props) {
|
|
|
15012
15159
|
const isDisabled = !!disabled;
|
|
15013
15160
|
const isReadOnly = !!readOnly;
|
|
15014
15161
|
const textFieldProps = { ...otherProps, value, isDisabled, isReadOnly };
|
|
15015
|
-
const inputRef = (0,
|
|
15016
|
-
const inputWrapRef = (0,
|
|
15162
|
+
const inputRef = (0, import_react67.useRef)(null);
|
|
15163
|
+
const inputWrapRef = (0, import_react67.useRef)(null);
|
|
15017
15164
|
useGrowingTextField({ inputRef, inputWrapRef, value, maxLines });
|
|
15018
|
-
const { labelProps, inputProps } = (0,
|
|
15165
|
+
const { labelProps, inputProps } = (0, import_react_aria38.useTextField)(
|
|
15019
15166
|
{
|
|
15020
15167
|
...textFieldProps,
|
|
15021
15168
|
inputElementType: "textarea",
|
|
@@ -15035,10 +15182,10 @@ function TextAreaField(props) {
|
|
|
15035
15182
|
},
|
|
15036
15183
|
inputRef
|
|
15037
15184
|
);
|
|
15038
|
-
return /* @__PURE__ */ (0,
|
|
15185
|
+
return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
15039
15186
|
TextFieldBase,
|
|
15040
15187
|
{
|
|
15041
|
-
...(0,
|
|
15188
|
+
...(0, import_react_aria38.mergeProps)(otherProps, { onBlur, onFocus }),
|
|
15042
15189
|
multiline: true,
|
|
15043
15190
|
labelProps,
|
|
15044
15191
|
inputProps,
|
|
@@ -15051,9 +15198,9 @@ function TextAreaField(props) {
|
|
|
15051
15198
|
}
|
|
15052
15199
|
|
|
15053
15200
|
// src/inputs/TextField.tsx
|
|
15054
|
-
var
|
|
15055
|
-
var
|
|
15056
|
-
var
|
|
15201
|
+
var import_react68 = require("react");
|
|
15202
|
+
var import_react_aria39 = require("react-aria");
|
|
15203
|
+
var import_jsx_runtime79 = require("react/jsx-runtime");
|
|
15057
15204
|
function TextField(props) {
|
|
15058
15205
|
const {
|
|
15059
15206
|
disabled = false,
|
|
@@ -15079,8 +15226,8 @@ function TextField(props) {
|
|
|
15079
15226
|
validationState: errorMsg ? "invalid" : "valid",
|
|
15080
15227
|
value
|
|
15081
15228
|
};
|
|
15082
|
-
const inputRef = (0,
|
|
15083
|
-
const { labelProps, inputProps } = (0,
|
|
15229
|
+
const inputRef = (0, import_react68.useRef)(null);
|
|
15230
|
+
const { labelProps, inputProps } = (0, import_react_aria39.useTextField)(
|
|
15084
15231
|
{
|
|
15085
15232
|
...textFieldProps,
|
|
15086
15233
|
onKeyDown: (e) => {
|
|
@@ -15099,10 +15246,10 @@ function TextField(props) {
|
|
|
15099
15246
|
focus: () => inputRef.current && inputRef.current.focus()
|
|
15100
15247
|
};
|
|
15101
15248
|
}
|
|
15102
|
-
return /* @__PURE__ */ (0,
|
|
15249
|
+
return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
|
|
15103
15250
|
TextFieldBase,
|
|
15104
15251
|
{
|
|
15105
|
-
...(0,
|
|
15252
|
+
...(0, import_react_aria39.mergeProps)(textFieldProps, { onBlur, onFocus }),
|
|
15106
15253
|
errorMsg,
|
|
15107
15254
|
required,
|
|
15108
15255
|
labelProps,
|
|
@@ -15115,11 +15262,11 @@ function TextField(props) {
|
|
|
15115
15262
|
}
|
|
15116
15263
|
|
|
15117
15264
|
// src/inputs/ToggleButton.tsx
|
|
15118
|
-
var
|
|
15119
|
-
var
|
|
15265
|
+
var import_react69 = require("react");
|
|
15266
|
+
var import_react_aria40 = require("react-aria");
|
|
15120
15267
|
var import_react_stately14 = require("react-stately");
|
|
15121
|
-
var
|
|
15122
|
-
var
|
|
15268
|
+
var import_runtime51 = require("@homebound/truss/runtime");
|
|
15269
|
+
var import_jsx_runtime80 = require("react/jsx-runtime");
|
|
15123
15270
|
function ToggleButton(props) {
|
|
15124
15271
|
const {
|
|
15125
15272
|
selected: isSelected = false,
|
|
@@ -15130,7 +15277,7 @@ function ToggleButton(props) {
|
|
|
15130
15277
|
__storyState,
|
|
15131
15278
|
...otherProps
|
|
15132
15279
|
} = props;
|
|
15133
|
-
const [asyncInProgress, setAsyncInProgress] = (0,
|
|
15280
|
+
const [asyncInProgress, setAsyncInProgress] = (0, import_react69.useState)(false);
|
|
15134
15281
|
const isDisabled = !!disabled || asyncInProgress;
|
|
15135
15282
|
const ariaProps = {
|
|
15136
15283
|
"aria-label": label,
|
|
@@ -15149,30 +15296,30 @@ function ToggleButton(props) {
|
|
|
15149
15296
|
return result;
|
|
15150
15297
|
}
|
|
15151
15298
|
});
|
|
15152
|
-
const labelRef = (0,
|
|
15153
|
-
const ref = (0,
|
|
15299
|
+
const labelRef = (0, import_react69.useRef)(null);
|
|
15300
|
+
const ref = (0, import_react69.useRef)(null);
|
|
15154
15301
|
const tid = useTestIds(otherProps, label);
|
|
15155
15302
|
const {
|
|
15156
15303
|
isPressed: isPressedFromEvents,
|
|
15157
15304
|
pressProps
|
|
15158
|
-
} = (0,
|
|
15305
|
+
} = (0, import_react_aria40.usePress)({
|
|
15159
15306
|
ref: labelRef,
|
|
15160
15307
|
isDisabled
|
|
15161
15308
|
});
|
|
15162
15309
|
const {
|
|
15163
15310
|
inputProps
|
|
15164
|
-
} = (0,
|
|
15311
|
+
} = (0, import_react_aria40.useSwitch)(ariaProps, state, ref);
|
|
15165
15312
|
const {
|
|
15166
15313
|
isFocusVisible: isFocusVisibleFromEvents,
|
|
15167
15314
|
focusProps
|
|
15168
|
-
} = (0,
|
|
15315
|
+
} = (0, import_react_aria40.useFocusRing)({
|
|
15169
15316
|
...otherProps,
|
|
15170
15317
|
within: true
|
|
15171
15318
|
});
|
|
15172
15319
|
const {
|
|
15173
15320
|
hoverProps,
|
|
15174
15321
|
isHovered: isHoveredFromEvents
|
|
15175
|
-
} = (0,
|
|
15322
|
+
} = (0, import_react_aria40.useHover)({
|
|
15176
15323
|
isDisabled
|
|
15177
15324
|
});
|
|
15178
15325
|
const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
|
|
@@ -15183,7 +15330,7 @@ function ToggleButton(props) {
|
|
|
15183
15330
|
...focusProps,
|
|
15184
15331
|
...hoverProps,
|
|
15185
15332
|
...pressProps,
|
|
15186
|
-
...(0,
|
|
15333
|
+
...(0, import_runtime51.trussProps)({
|
|
15187
15334
|
...{
|
|
15188
15335
|
borderRadius: "br4",
|
|
15189
15336
|
display: "dif",
|
|
@@ -15218,10 +15365,10 @@ function ToggleButton(props) {
|
|
|
15218
15365
|
return maybeTooltip({
|
|
15219
15366
|
title: tooltip,
|
|
15220
15367
|
placement: "top",
|
|
15221
|
-
children: /* @__PURE__ */ (0,
|
|
15222
|
-
icon && /* @__PURE__ */ (0,
|
|
15368
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("label", { ...labelAttrs, children: [
|
|
15369
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Icon, { icon }),
|
|
15223
15370
|
label,
|
|
15224
|
-
/* @__PURE__ */ (0,
|
|
15371
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react_aria40.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("input", { ref, ...inputProps, ...tid.value }) })
|
|
15225
15372
|
] })
|
|
15226
15373
|
});
|
|
15227
15374
|
}
|
|
@@ -15236,11 +15383,11 @@ var togglePressStyles = {
|
|
|
15236
15383
|
};
|
|
15237
15384
|
|
|
15238
15385
|
// src/inputs/ToggleChipGroup.tsx
|
|
15239
|
-
var
|
|
15240
|
-
var
|
|
15386
|
+
var import_react70 = require("react");
|
|
15387
|
+
var import_react_aria41 = require("react-aria");
|
|
15241
15388
|
var import_react_stately15 = require("react-stately");
|
|
15242
|
-
var
|
|
15243
|
-
var
|
|
15389
|
+
var import_runtime52 = require("@homebound/truss/runtime");
|
|
15390
|
+
var import_jsx_runtime81 = require("react/jsx-runtime");
|
|
15244
15391
|
var __maybeInc9 = (inc) => {
|
|
15245
15392
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
15246
15393
|
};
|
|
@@ -15268,10 +15415,10 @@ function ToggleChipGroup(props) {
|
|
|
15268
15415
|
const {
|
|
15269
15416
|
groupProps,
|
|
15270
15417
|
labelProps
|
|
15271
|
-
} = (0,
|
|
15418
|
+
} = (0, import_react_aria41.useCheckboxGroup)(props, state);
|
|
15272
15419
|
const tid = useTestIds(props, "toggleChip");
|
|
15273
15420
|
const labelSuffix = useLabelSuffix(required, false);
|
|
15274
|
-
return /* @__PURE__ */ (0,
|
|
15421
|
+
return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { ...groupProps, ...(0, import_runtime52.trussProps)({
|
|
15275
15422
|
position: "relative",
|
|
15276
15423
|
display: "df",
|
|
15277
15424
|
flexDirection: "fdc",
|
|
@@ -15282,17 +15429,17 @@ function ToggleChipGroup(props) {
|
|
|
15282
15429
|
justifyContent: "jcsb"
|
|
15283
15430
|
} : {}
|
|
15284
15431
|
}), children: [
|
|
15285
|
-
/* @__PURE__ */ (0,
|
|
15286
|
-
/* @__PURE__ */ (0,
|
|
15432
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix }),
|
|
15433
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { ...(0, import_runtime52.trussProps)({
|
|
15287
15434
|
display: "df",
|
|
15288
15435
|
gap: "gap1",
|
|
15289
15436
|
flexWrap: "flexWrap_wrap",
|
|
15290
15437
|
...labelStyle === "left" ? {
|
|
15291
15438
|
width: ["w_var", {
|
|
15292
|
-
"--width": (0,
|
|
15439
|
+
"--width": (0, import_runtime52.maybeCssVar)(__maybeInc9(labelLeftFieldWidth))
|
|
15293
15440
|
}]
|
|
15294
15441
|
} : {}
|
|
15295
|
-
}), children: options.map((o) => /* @__PURE__ */ (0,
|
|
15442
|
+
}), children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToggleChip2, { value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label, disabled: o.disabled, readonly: o.readonly, startAdornment: o.startAdornment, xss, ...tid[o.value] }, o.value)) })
|
|
15296
15443
|
] });
|
|
15297
15444
|
}
|
|
15298
15445
|
function ToggleChip2(props) {
|
|
@@ -15309,10 +15456,10 @@ function ToggleChip2(props) {
|
|
|
15309
15456
|
} = props;
|
|
15310
15457
|
const isDisabled = !!disabled;
|
|
15311
15458
|
const isReadOnly = !!readonly;
|
|
15312
|
-
const ref = (0,
|
|
15459
|
+
const ref = (0, import_react70.useRef)(null);
|
|
15313
15460
|
const {
|
|
15314
15461
|
inputProps
|
|
15315
|
-
} = (0,
|
|
15462
|
+
} = (0, import_react_aria41.useCheckboxGroupItem)({
|
|
15316
15463
|
value,
|
|
15317
15464
|
"aria-label": label,
|
|
15318
15465
|
isReadOnly,
|
|
@@ -15321,19 +15468,19 @@ function ToggleChip2(props) {
|
|
|
15321
15468
|
const {
|
|
15322
15469
|
isFocusVisible,
|
|
15323
15470
|
focusProps
|
|
15324
|
-
} = (0,
|
|
15471
|
+
} = (0, import_react_aria41.useFocusRing)();
|
|
15325
15472
|
const tooltip = resolveTooltip(disabled);
|
|
15326
15473
|
const chipStateCss = isSelected ? {
|
|
15327
15474
|
color: ["color_var", {
|
|
15328
|
-
"--color": (0,
|
|
15475
|
+
"--color": (0, import_runtime52.maybeCssVar)(xss?.color ?? "rgba(255, 255, 255, 1)" /* White */)
|
|
15329
15476
|
}],
|
|
15330
15477
|
backgroundColor: ["bgColor_var", {
|
|
15331
|
-
"--backgroundColor": (0,
|
|
15478
|
+
"--backgroundColor": (0, import_runtime52.maybeCssVar)(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */)
|
|
15332
15479
|
}],
|
|
15333
15480
|
...!isDisabled ? {
|
|
15334
15481
|
backgroundColor: ["bgColor_var h_bgColor_var", {
|
|
15335
|
-
"--backgroundColor": (0,
|
|
15336
|
-
"--h_backgroundColor": (0,
|
|
15482
|
+
"--backgroundColor": (0, import_runtime52.maybeCssVar)(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */),
|
|
15483
|
+
"--h_backgroundColor": (0, import_runtime52.maybeCssVar)(xss?.backgroundColor ?? "rgba(30, 64, 175, 1)" /* Blue800 */)
|
|
15337
15484
|
}]
|
|
15338
15485
|
} : {}
|
|
15339
15486
|
} : isDisabled ? {
|
|
@@ -15348,7 +15495,7 @@ function ToggleChip2(props) {
|
|
|
15348
15495
|
return maybeTooltip({
|
|
15349
15496
|
title: tooltip,
|
|
15350
15497
|
placement: "top",
|
|
15351
|
-
children: /* @__PURE__ */ (0,
|
|
15498
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("label", { ...(0, import_runtime52.trussProps)({
|
|
15352
15499
|
...{
|
|
15353
15500
|
position: "relative",
|
|
15354
15501
|
display: "dif",
|
|
@@ -15369,7 +15516,7 @@ function ToggleChip2(props) {
|
|
|
15369
15516
|
boxShadow: "bshFocus"
|
|
15370
15517
|
} : {}
|
|
15371
15518
|
}), "data-selected": isSelected, "data-disabled": isDisabled, "aria-disabled": isDisabled, ...others, children: [
|
|
15372
|
-
/* @__PURE__ */ (0,
|
|
15519
|
+
/* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react_aria41.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("input", { ...inputProps, ...focusProps }) }),
|
|
15373
15520
|
startAdornment,
|
|
15374
15521
|
label
|
|
15375
15522
|
] })
|
|
@@ -15377,12 +15524,12 @@ function ToggleChip2(props) {
|
|
|
15377
15524
|
}
|
|
15378
15525
|
|
|
15379
15526
|
// src/components/Table/components/SelectToggle.tsx
|
|
15380
|
-
var
|
|
15527
|
+
var import_jsx_runtime82 = require("react/jsx-runtime");
|
|
15381
15528
|
function SelectToggle({ id, disabled }) {
|
|
15382
|
-
const { tableState } = (0,
|
|
15529
|
+
const { tableState } = (0, import_react71.useContext)(TableStateContext);
|
|
15383
15530
|
const state = useComputed(() => tableState.getSelected(id), [tableState]);
|
|
15384
15531
|
const selected = state === "checked" ? true : state === "unchecked" ? false : "indeterminate";
|
|
15385
|
-
return /* @__PURE__ */ (0,
|
|
15532
|
+
return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
|
|
15386
15533
|
Checkbox,
|
|
15387
15534
|
{
|
|
15388
15535
|
checkboxOnly: true,
|
|
@@ -15395,7 +15542,7 @@ function SelectToggle({ id, disabled }) {
|
|
|
15395
15542
|
}
|
|
15396
15543
|
|
|
15397
15544
|
// src/components/Table/utils/columns.tsx
|
|
15398
|
-
var
|
|
15545
|
+
var import_jsx_runtime83 = require("react/jsx-runtime");
|
|
15399
15546
|
function column(columnDef) {
|
|
15400
15547
|
return {
|
|
15401
15548
|
canHide: true,
|
|
@@ -15448,7 +15595,7 @@ function selectColumn(columnDef) {
|
|
|
15448
15595
|
return (data, {
|
|
15449
15596
|
row
|
|
15450
15597
|
}) => ({
|
|
15451
|
-
content: /* @__PURE__ */ (0,
|
|
15598
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SelectToggle, { id: row.id, disabled: row.selectable === false })
|
|
15452
15599
|
});
|
|
15453
15600
|
});
|
|
15454
15601
|
}
|
|
@@ -15472,7 +15619,7 @@ function collapseColumn(columnDef) {
|
|
|
15472
15619
|
row,
|
|
15473
15620
|
level
|
|
15474
15621
|
}) => ({
|
|
15475
|
-
content: /* @__PURE__ */ (0,
|
|
15622
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(CollapseToggle, { row, compact: level > 0 })
|
|
15476
15623
|
});
|
|
15477
15624
|
});
|
|
15478
15625
|
}
|
|
@@ -15496,7 +15643,7 @@ function pinColumn(columnDef) {
|
|
|
15496
15643
|
return (data, {
|
|
15497
15644
|
row
|
|
15498
15645
|
}) => ({
|
|
15499
|
-
content: /* @__PURE__ */ (0,
|
|
15646
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(PinToggle, { rowId: row.id })
|
|
15500
15647
|
});
|
|
15501
15648
|
});
|
|
15502
15649
|
}
|
|
@@ -15754,10 +15901,10 @@ function dragHandleColumn(columnDef) {
|
|
|
15754
15901
|
onDragOver
|
|
15755
15902
|
} = dragData;
|
|
15756
15903
|
return {
|
|
15757
|
-
content: row.draggable ? /* @__PURE__ */ (0,
|
|
15904
|
+
content: row.draggable ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { draggable: row.draggable, onDragStart: (evt) => {
|
|
15758
15905
|
ref.current && evt.dataTransfer.setDragImage(ref.current, 0, 0);
|
|
15759
15906
|
return onDragStart?.(row, evt);
|
|
15760
|
-
}, onDragEnd: (evt) => onDragEnd?.(row, evt), onDrop: (evt) => onDrop?.(row, evt), onDragEnter: (evt) => onDragEnter?.(row, evt), onDragOver: (evt) => onDragOver?.(row, evt), className: "mta mba mra mla cursorPointer", children: /* @__PURE__ */ (0,
|
|
15907
|
+
}, onDragEnd: (evt) => onDragEnd?.(row, evt), onDrop: (evt) => onDrop?.(row, evt), onDragEnter: (evt) => onDragEnter?.(row, evt), onDragOver: (evt) => onDragOver?.(row, evt), className: "mta mba mra mla cursorPointer", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Icon, { icon: "drag" }) }) : void 0
|
|
15761
15908
|
};
|
|
15762
15909
|
};
|
|
15763
15910
|
});
|
|
@@ -15821,7 +15968,7 @@ function shouldSkipScrollTo(index, virtuosoRangeRef) {
|
|
|
15821
15968
|
|
|
15822
15969
|
// src/components/Table/GridTableApi.ts
|
|
15823
15970
|
function useGridTableApi() {
|
|
15824
|
-
return (0,
|
|
15971
|
+
return (0, import_react72.useMemo)(() => new GridTableApiImpl(), []);
|
|
15825
15972
|
}
|
|
15826
15973
|
var GridTableApiImpl = class {
|
|
15827
15974
|
// This is public to GridTable but not exported outside of Beam
|
|
@@ -15994,10 +16141,10 @@ function maybeApply(maybeFn) {
|
|
|
15994
16141
|
}
|
|
15995
16142
|
|
|
15996
16143
|
// src/components/Table/hooks/useColumnResizeHandlers.ts
|
|
15997
|
-
var
|
|
16144
|
+
var import_react73 = require("react");
|
|
15998
16145
|
function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWidth, setResizedWidths) {
|
|
15999
|
-
const hasLockedColumnsRef = (0,
|
|
16000
|
-
const distributeAdjustment = (0,
|
|
16146
|
+
const hasLockedColumnsRef = (0, import_react73.useRef)(false);
|
|
16147
|
+
const distributeAdjustment = (0, import_react73.useCallback)(
|
|
16001
16148
|
(rightColumns, totalRightWidth, adjustment) => {
|
|
16002
16149
|
const updates = {};
|
|
16003
16150
|
let remainingAdjustment = adjustment;
|
|
@@ -16012,7 +16159,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
|
|
|
16012
16159
|
},
|
|
16013
16160
|
[]
|
|
16014
16161
|
);
|
|
16015
|
-
const calculateResizeUpdates = (0,
|
|
16162
|
+
const calculateResizeUpdates = (0, import_react73.useCallback)(
|
|
16016
16163
|
(columnId, newWidth, columnIndex) => {
|
|
16017
16164
|
if (!tableWidth || !columnSizes || columnSizes.length === 0) {
|
|
16018
16165
|
return null;
|
|
@@ -16058,7 +16205,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
|
|
|
16058
16205
|
},
|
|
16059
16206
|
[tableWidth, columnSizes, columns, distributeAdjustment]
|
|
16060
16207
|
);
|
|
16061
|
-
const calculatePreviewWidth = (0,
|
|
16208
|
+
const calculatePreviewWidth = (0, import_react73.useCallback)(
|
|
16062
16209
|
(columnId, newWidth, columnIndex) => {
|
|
16063
16210
|
const result = calculateResizeUpdates(columnId, newWidth, columnIndex);
|
|
16064
16211
|
if (!result) {
|
|
@@ -16068,7 +16215,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
|
|
|
16068
16215
|
},
|
|
16069
16216
|
[calculateResizeUpdates]
|
|
16070
16217
|
);
|
|
16071
|
-
const handleColumnResize = (0,
|
|
16218
|
+
const handleColumnResize = (0, import_react73.useCallback)(
|
|
16072
16219
|
(columnId, newWidth, columnIndex) => {
|
|
16073
16220
|
const result = calculateResizeUpdates(columnId, newWidth, columnIndex);
|
|
16074
16221
|
if (!result) {
|
|
@@ -16105,10 +16252,10 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
|
|
|
16105
16252
|
}
|
|
16106
16253
|
|
|
16107
16254
|
// src/components/Table/hooks/useScrollStorage.ts
|
|
16108
|
-
var
|
|
16255
|
+
var import_react74 = require("react");
|
|
16109
16256
|
function useScrollStorage(tableId, enabled = true) {
|
|
16110
16257
|
const storageKey = `scrollPosition_${window.location.pathname}${window.location.search}_${tableId}`;
|
|
16111
|
-
return (0,
|
|
16258
|
+
return (0, import_react74.useMemo)(
|
|
16112
16259
|
() => ({
|
|
16113
16260
|
getScrollIndex: () => {
|
|
16114
16261
|
if (!enabled) return void 0;
|
|
@@ -16124,14 +16271,14 @@ function useScrollStorage(tableId, enabled = true) {
|
|
|
16124
16271
|
}
|
|
16125
16272
|
|
|
16126
16273
|
// src/components/Table/hooks/useSetupColumnSizes.ts
|
|
16127
|
-
var
|
|
16128
|
-
var
|
|
16274
|
+
var import_utils69 = require("@react-aria/utils");
|
|
16275
|
+
var import_react76 = require("react");
|
|
16129
16276
|
|
|
16130
16277
|
// src/components/Table/hooks/useColumnResizing.ts
|
|
16131
|
-
var
|
|
16278
|
+
var import_react75 = require("react");
|
|
16132
16279
|
var import_use_debounce4 = require("use-debounce");
|
|
16133
16280
|
function useColumnResizing(storageKey) {
|
|
16134
|
-
const [resizedWidths, setResizedWidths] = (0,
|
|
16281
|
+
const [resizedWidths, setResizedWidths] = (0, import_react75.useState)(() => {
|
|
16135
16282
|
if (!storageKey) return {};
|
|
16136
16283
|
try {
|
|
16137
16284
|
const stored = sessionStorage.getItem(`columnWidths_${storageKey}`);
|
|
@@ -16148,16 +16295,16 @@ function useColumnResizing(storageKey) {
|
|
|
16148
16295
|
} catch {
|
|
16149
16296
|
}
|
|
16150
16297
|
}, 500);
|
|
16151
|
-
(0,
|
|
16298
|
+
(0, import_react75.useEffect)(() => {
|
|
16152
16299
|
persistToStorage(resizedWidths);
|
|
16153
16300
|
}, [resizedWidths, persistToStorage]);
|
|
16154
|
-
const setResizedWidth = (0,
|
|
16301
|
+
const setResizedWidth = (0, import_react75.useCallback)((columnId, width2) => {
|
|
16155
16302
|
setResizedWidths((prev) => ({
|
|
16156
16303
|
...prev,
|
|
16157
16304
|
[columnId]: width2
|
|
16158
16305
|
}));
|
|
16159
16306
|
}, []);
|
|
16160
|
-
const batchSetResizedWidths = (0,
|
|
16307
|
+
const batchSetResizedWidths = (0, import_react75.useCallback)((widths2) => {
|
|
16161
16308
|
if (typeof widths2 === "function") {
|
|
16162
16309
|
setResizedWidths(widths2);
|
|
16163
16310
|
} else {
|
|
@@ -16167,7 +16314,7 @@ function useColumnResizing(storageKey) {
|
|
|
16167
16314
|
}));
|
|
16168
16315
|
}
|
|
16169
16316
|
}, []);
|
|
16170
|
-
const resetColumnWidths = (0,
|
|
16317
|
+
const resetColumnWidths = (0, import_react75.useCallback)(() => {
|
|
16171
16318
|
setResizedWidths({});
|
|
16172
16319
|
}, []);
|
|
16173
16320
|
return {
|
|
@@ -16184,14 +16331,14 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
|
|
|
16184
16331
|
const { resizedWidths, setResizedWidth, setResizedWidths, resetColumnWidths } = useColumnResizing(
|
|
16185
16332
|
disableColumnResizing ? void 0 : visibleColumnsStorageKey
|
|
16186
16333
|
);
|
|
16187
|
-
const calculateImmediately = (0,
|
|
16188
|
-
const [tableWidth, setTableWidth] = (0,
|
|
16189
|
-
const [contentWidth, setContentWidth] = (0,
|
|
16190
|
-
const [columnSizes, setColumnSizes] = (0,
|
|
16334
|
+
const calculateImmediately = (0, import_react76.useRef)(true);
|
|
16335
|
+
const [tableWidth, setTableWidth] = (0, import_react76.useState)();
|
|
16336
|
+
const [contentWidth, setContentWidth] = (0, import_react76.useState)();
|
|
16337
|
+
const [columnSizes, setColumnSizes] = (0, import_react76.useState)(
|
|
16191
16338
|
() => calcColumnLayout(columns, void 0, style.minWidthPx, expandedColumnIds, resizedWidths, inDocumentScrollLayout).columnSizes
|
|
16192
16339
|
);
|
|
16193
|
-
const prevTableWidthRef = (0,
|
|
16194
|
-
const applyColumnLayout = (0,
|
|
16340
|
+
const prevTableWidthRef = (0, import_react76.useRef)(tableWidth);
|
|
16341
|
+
const applyColumnLayout = (0, import_react76.useCallback)(
|
|
16195
16342
|
(probeWidth) => {
|
|
16196
16343
|
const layout = calcColumnLayout(
|
|
16197
16344
|
columns,
|
|
@@ -16207,7 +16354,7 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
|
|
|
16207
16354
|
},
|
|
16208
16355
|
[columns, style.minWidthPx, expandedColumnIds, resizedWidths, inDocumentScrollLayout]
|
|
16209
16356
|
);
|
|
16210
|
-
(0,
|
|
16357
|
+
(0, import_react76.useEffect)(() => {
|
|
16211
16358
|
if (!prevTableWidthRef.current) {
|
|
16212
16359
|
prevTableWidthRef.current = tableWidth;
|
|
16213
16360
|
return;
|
|
@@ -16230,7 +16377,7 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
|
|
|
16230
16377
|
prevTableWidthRef.current = tableWidth;
|
|
16231
16378
|
}
|
|
16232
16379
|
}, [tableWidth, setResizedWidths]);
|
|
16233
|
-
(0,
|
|
16380
|
+
(0, import_react76.useEffect)(
|
|
16234
16381
|
() => {
|
|
16235
16382
|
if (!calculateImmediately.current) {
|
|
16236
16383
|
const width2 = resizeRef.current?.clientWidth;
|
|
@@ -16242,7 +16389,7 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
|
|
|
16242
16389
|
[columns, resizedWidths, applyColumnLayout]
|
|
16243
16390
|
);
|
|
16244
16391
|
const applyColumnLayoutDebounced = (0, import_use_debounce5.useDebouncedCallback)(applyColumnLayout, 100);
|
|
16245
|
-
const onResize = (0,
|
|
16392
|
+
const onResize = (0, import_react76.useCallback)(
|
|
16246
16393
|
() => {
|
|
16247
16394
|
const target = resizeRef.current;
|
|
16248
16395
|
if (target && target.clientWidth !== tableWidth) {
|
|
@@ -16258,7 +16405,7 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
|
|
|
16258
16405
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16259
16406
|
[tableWidth, applyColumnLayout, applyColumnLayoutDebounced]
|
|
16260
16407
|
);
|
|
16261
|
-
(0,
|
|
16408
|
+
(0, import_utils69.useResizeObserver)({ ref: resizeRef, onResize });
|
|
16262
16409
|
return {
|
|
16263
16410
|
columnSizes,
|
|
16264
16411
|
tableWidth,
|
|
@@ -16271,10 +16418,10 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
|
|
|
16271
16418
|
}
|
|
16272
16419
|
|
|
16273
16420
|
// src/hooks/useRenderCount.ts
|
|
16274
|
-
var
|
|
16421
|
+
var import_react77 = require("react");
|
|
16275
16422
|
function useRenderCount() {
|
|
16276
|
-
const ref = (0,
|
|
16277
|
-
const getCount = (0,
|
|
16423
|
+
const ref = (0, import_react77.useRef)(/* @__PURE__ */ new Map());
|
|
16424
|
+
const getCount = (0, import_react77.useCallback)((id) => {
|
|
16278
16425
|
const count = ref.current.get(id) || 1;
|
|
16279
16426
|
ref.current.set(id, count + 1);
|
|
16280
16427
|
return { "data-render": count };
|
|
@@ -16283,39 +16430,39 @@ function useRenderCount() {
|
|
|
16283
16430
|
}
|
|
16284
16431
|
|
|
16285
16432
|
// src/layouts/DocumentScrollLayoutContext.tsx
|
|
16286
|
-
var
|
|
16287
|
-
var
|
|
16288
|
-
var
|
|
16433
|
+
var import_utils70 = require("@react-aria/utils");
|
|
16434
|
+
var import_react79 = require("react");
|
|
16435
|
+
var import_runtime54 = require("@homebound/truss/runtime");
|
|
16289
16436
|
|
|
16290
16437
|
// src/layouts/DocumentScrollToTopButton.tsx
|
|
16291
|
-
var
|
|
16292
|
-
var
|
|
16293
|
-
var
|
|
16438
|
+
var import_react78 = require("react");
|
|
16439
|
+
var import_runtime53 = require("@homebound/truss/runtime");
|
|
16440
|
+
var import_jsx_runtime84 = require("react/jsx-runtime");
|
|
16294
16441
|
function DocumentScrollToTopButton({
|
|
16295
16442
|
viewportHeight
|
|
16296
16443
|
}) {
|
|
16297
|
-
const [visible, setVisible] = (0,
|
|
16444
|
+
const [visible, setVisible] = (0, import_react78.useState)(false);
|
|
16298
16445
|
const tid = useTestIds({}, "documentScrollToTop");
|
|
16299
16446
|
const scrollToTopOffsetPx = 20;
|
|
16300
|
-
const syncVisibility = (0,
|
|
16447
|
+
const syncVisibility = (0, import_react78.useCallback)(() => {
|
|
16301
16448
|
if (viewportHeight <= 0) return;
|
|
16302
16449
|
setVisible(window.scrollY > viewportHeight);
|
|
16303
16450
|
}, [viewportHeight]);
|
|
16304
|
-
(0,
|
|
16451
|
+
(0, import_react78.useEffect)(() => {
|
|
16305
16452
|
syncVisibility();
|
|
16306
16453
|
window.addEventListener("scroll", syncVisibility, {
|
|
16307
16454
|
passive: true
|
|
16308
16455
|
});
|
|
16309
16456
|
return () => window.removeEventListener("scroll", syncVisibility);
|
|
16310
16457
|
}, [syncVisibility]);
|
|
16311
|
-
const scrollToTop = (0,
|
|
16458
|
+
const scrollToTop = (0, import_react78.useCallback)(() => {
|
|
16312
16459
|
window.scrollTo({
|
|
16313
16460
|
top: 0
|
|
16314
16461
|
});
|
|
16315
16462
|
}, []);
|
|
16316
|
-
return /* @__PURE__ */ (0,
|
|
16463
|
+
return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { ...tid.wrapper, "aria-hidden": !visible, ...!visible ? {
|
|
16317
16464
|
inert: ""
|
|
16318
|
-
} : {}, ...(0,
|
|
16465
|
+
} : {}, ...(0, import_runtime53.trussProps)({
|
|
16319
16466
|
...{
|
|
16320
16467
|
position: "fixed",
|
|
16321
16468
|
bottom: ["bottom_var", {
|
|
@@ -16325,7 +16472,7 @@ function DocumentScrollToTopButton({
|
|
|
16325
16472
|
"--right": `${scrollToTopOffsetPx}px`
|
|
16326
16473
|
}],
|
|
16327
16474
|
zIndex: ["z_var", {
|
|
16328
|
-
"--zIndex": (0,
|
|
16475
|
+
"--zIndex": (0, import_runtime53.maybeCssVar)(zIndices.scrollToTop)
|
|
16329
16476
|
}],
|
|
16330
16477
|
display: "df",
|
|
16331
16478
|
justifyContent: "jcfe",
|
|
@@ -16335,35 +16482,35 @@ function DocumentScrollToTopButton({
|
|
|
16335
16482
|
transform: "transform_translateY_0"
|
|
16336
16483
|
} : {
|
|
16337
16484
|
transform: ["transform_var", {
|
|
16338
|
-
"--transform": (0,
|
|
16485
|
+
"--transform": (0, import_runtime53.maybeCssVar)(`translateY(calc(100% + ${scrollToTopOffsetPx}px))`)
|
|
16339
16486
|
}],
|
|
16340
16487
|
pointerEvents: "pointerEvents_none"
|
|
16341
16488
|
}
|
|
16342
|
-
}), children: /* @__PURE__ */ (0,
|
|
16489
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(IconButton, { icon: "arrowUp", disabled: !visible, variant: "outline", label: "Scroll to top", onClick: scrollToTop, ...tid }) }) });
|
|
16343
16490
|
}
|
|
16344
16491
|
|
|
16345
16492
|
// src/layouts/DocumentScrollLayoutContext.tsx
|
|
16346
|
-
var
|
|
16347
|
-
var DocumentScrollLayoutContext = (0,
|
|
16493
|
+
var import_jsx_runtime85 = require("react/jsx-runtime");
|
|
16494
|
+
var DocumentScrollLayoutContext = (0, import_react79.createContext)(false);
|
|
16348
16495
|
function DocumentScrollLayoutProvider({
|
|
16349
16496
|
children
|
|
16350
16497
|
}) {
|
|
16351
|
-
const inDocumentScrollLayout = (0,
|
|
16352
|
-
if (inDocumentScrollLayout) return /* @__PURE__ */ (0,
|
|
16353
|
-
return /* @__PURE__ */ (0,
|
|
16498
|
+
const inDocumentScrollLayout = (0, import_react79.useContext)(DocumentScrollLayoutContext);
|
|
16499
|
+
if (inDocumentScrollLayout) return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_jsx_runtime85.Fragment, { children });
|
|
16500
|
+
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DocumentScrollLayoutContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DocumentScrollLayoutViewportRoot, { children }) });
|
|
16354
16501
|
}
|
|
16355
16502
|
function useDocumentScrollLayout() {
|
|
16356
|
-
return (0,
|
|
16503
|
+
return (0, import_react79.useContext)(DocumentScrollLayoutContext);
|
|
16357
16504
|
}
|
|
16358
16505
|
function DocumentScrollLayoutViewportRoot({
|
|
16359
16506
|
children
|
|
16360
16507
|
}) {
|
|
16361
|
-
const docElementRef = (0,
|
|
16362
|
-
const [viewportSize, setViewportSize] = (0,
|
|
16508
|
+
const docElementRef = (0, import_react79.useRef)(typeof document !== "undefined" ? document.documentElement : null);
|
|
16509
|
+
const [viewportSize, setViewportSize] = (0, import_react79.useState)({
|
|
16363
16510
|
width: 0,
|
|
16364
16511
|
height: 0
|
|
16365
16512
|
});
|
|
16366
|
-
const syncViewportSize = (0,
|
|
16513
|
+
const syncViewportSize = (0, import_react79.useCallback)(() => {
|
|
16367
16514
|
const el = docElementRef.current;
|
|
16368
16515
|
if (!el) return;
|
|
16369
16516
|
const width2 = el.clientWidth;
|
|
@@ -16373,11 +16520,11 @@ function DocumentScrollLayoutViewportRoot({
|
|
|
16373
16520
|
height
|
|
16374
16521
|
});
|
|
16375
16522
|
}, []);
|
|
16376
|
-
(0,
|
|
16523
|
+
(0, import_utils70.useResizeObserver)({
|
|
16377
16524
|
ref: docElementRef,
|
|
16378
16525
|
onResize: syncViewportSize
|
|
16379
16526
|
});
|
|
16380
|
-
(0,
|
|
16527
|
+
(0, import_react79.useLayoutEffect)(() => {
|
|
16381
16528
|
syncViewportSize();
|
|
16382
16529
|
}, [syncViewportSize]);
|
|
16383
16530
|
const style = {};
|
|
@@ -16389,20 +16536,20 @@ function DocumentScrollLayoutViewportRoot({
|
|
|
16389
16536
|
}
|
|
16390
16537
|
return (
|
|
16391
16538
|
// `display: contents` keeps vars inheritable without adding a layout box.
|
|
16392
|
-
/* @__PURE__ */ (0,
|
|
16539
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { ...(0, import_runtime54.mergeProps)(void 0, Object.keys(style).length > 0 ? style : void 0, {
|
|
16393
16540
|
display: "display_contents"
|
|
16394
16541
|
}), children: [
|
|
16395
16542
|
children,
|
|
16396
|
-
/* @__PURE__ */ (0,
|
|
16543
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DocumentScrollToTopButton, { viewportHeight: viewportSize.height })
|
|
16397
16544
|
] })
|
|
16398
16545
|
);
|
|
16399
16546
|
}
|
|
16400
16547
|
|
|
16401
16548
|
// src/components/Table/components/TableCard.tsx
|
|
16402
|
-
var
|
|
16549
|
+
var import_react80 = require("react");
|
|
16403
16550
|
var import_react_router_dom4 = require("react-router-dom");
|
|
16404
|
-
var
|
|
16405
|
-
var
|
|
16551
|
+
var import_runtime55 = require("@homebound/truss/runtime");
|
|
16552
|
+
var import_jsx_runtime86 = require("react/jsx-runtime");
|
|
16406
16553
|
var __maybeInc10 = (inc) => {
|
|
16407
16554
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
16408
16555
|
};
|
|
@@ -16450,16 +16597,16 @@ function TableCard(props) {
|
|
|
16450
16597
|
}
|
|
16451
16598
|
}
|
|
16452
16599
|
if (!title) return null;
|
|
16453
|
-
const card = /* @__PURE__ */ (0,
|
|
16600
|
+
const card = /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TableCardView, { ...tid, imgSrc: rs.row.imgSrc ?? "", title, eyebrow, badge, status, data: dataBlocks, progress });
|
|
16454
16601
|
const to = rowStyle?.rowLink?.(rs.row);
|
|
16455
16602
|
if (to) {
|
|
16456
|
-
return /* @__PURE__ */ (0,
|
|
16603
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react_router_dom4.Link, { to, ...(0, import_runtime55.mergeProps)(navLink, void 0, {
|
|
16457
16604
|
textDecoration: "tdn",
|
|
16458
16605
|
color: "color_unset"
|
|
16459
16606
|
}), children: card });
|
|
16460
16607
|
}
|
|
16461
16608
|
if (rowStyle?.onClick) {
|
|
16462
|
-
return /* @__PURE__ */ (0,
|
|
16609
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("button", { onClick: () => rowStyle.onClick(rs.row, api), className: "cursorPointer", children: card });
|
|
16463
16610
|
}
|
|
16464
16611
|
return card;
|
|
16465
16612
|
}
|
|
@@ -16474,8 +16621,8 @@ function TableCardView(props) {
|
|
|
16474
16621
|
progress
|
|
16475
16622
|
} = props;
|
|
16476
16623
|
const tid = useTestIds(props, "tableCardView");
|
|
16477
|
-
const progressValue = (0,
|
|
16478
|
-
return /* @__PURE__ */ (0,
|
|
16624
|
+
const progressValue = (0, import_react80.useMemo)(() => progress !== void 0 ? clampProgress(progress) : 0, [progress]);
|
|
16625
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { ...(0, import_runtime55.trussProps)({
|
|
16479
16626
|
paddingTop: "pt3",
|
|
16480
16627
|
paddingBottom: "pb3",
|
|
16481
16628
|
paddingRight: "pr3",
|
|
@@ -16490,44 +16637,44 @@ function TableCardView(props) {
|
|
|
16490
16637
|
flexDirection: "fdc",
|
|
16491
16638
|
gap: "gap2"
|
|
16492
16639
|
}), ...tid, children: [
|
|
16493
|
-
/* @__PURE__ */ (0,
|
|
16494
|
-
/* @__PURE__ */ (0,
|
|
16495
|
-
status && /* @__PURE__ */ (0,
|
|
16640
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "relative", children: [
|
|
16641
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("img", { className: "h_184px w100 objectFit_cover", src: imgSrc, alt: title, ...tid.image }),
|
|
16642
|
+
status && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "absolute top1 left1", ...tid.status, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Tag, { ...status }) })
|
|
16496
16643
|
] }),
|
|
16497
|
-
/* @__PURE__ */ (0,
|
|
16498
|
-
/* @__PURE__ */ (0,
|
|
16499
|
-
eyebrow && /* @__PURE__ */ (0,
|
|
16500
|
-
title && /* @__PURE__ */ (0,
|
|
16501
|
-
/* @__PURE__ */ (0,
|
|
16644
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "df fdc gap2", children: [
|
|
16645
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { children: [
|
|
16646
|
+
eyebrow && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: "fw4 fz_14px lh_20px", ...tid.eyebrow, children: eyebrow }),
|
|
16647
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "dif w100 jcsb aic", children: [
|
|
16648
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("h4", { className: "fwb fz_20px lh_28px", ...tid.title, children: [
|
|
16502
16649
|
title,
|
|
16503
16650
|
" "
|
|
16504
16651
|
] }),
|
|
16505
|
-
badge && /* @__PURE__ */ (0,
|
|
16652
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "fw4 fz_14px lh_20px wsnw", ...tid.badge, children: badge })
|
|
16506
16653
|
] })
|
|
16507
16654
|
] }),
|
|
16508
|
-
data && data?.length > 0 && /* @__PURE__ */ (0,
|
|
16655
|
+
data && data?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("dl", { className: "dg gtc_repeat_2_minmax_0_1fr fw4 fz_14px lh_20px", children: data.map((d, idx) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { ...(0, import_runtime55.trussProps)({
|
|
16509
16656
|
display: "df",
|
|
16510
16657
|
gap: "gap_4px",
|
|
16511
16658
|
gridColumn: ["gc_var", {
|
|
16512
|
-
"--gridColumn": (0,
|
|
16659
|
+
"--gridColumn": (0, import_runtime55.maybeCssVar)(idx % 2 + 1)
|
|
16513
16660
|
}]
|
|
16514
16661
|
}), ...tid[defaultTestId(d.label)], children: [
|
|
16515
|
-
/* @__PURE__ */ (0,
|
|
16662
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("dt", { children: [
|
|
16516
16663
|
d.label,
|
|
16517
16664
|
":"
|
|
16518
16665
|
] }),
|
|
16519
|
-
/* @__PURE__ */ (0,
|
|
16666
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("dd", { children: d.value })
|
|
16520
16667
|
] }, d.label)) }),
|
|
16521
|
-
progress !== void 0 && /* @__PURE__ */ (0,
|
|
16522
|
-
/* @__PURE__ */ (0,
|
|
16668
|
+
progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "df fdc gap1", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "df aic gap1 fs_10px lh_14px", children: [
|
|
16669
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "w25 h_8px br4 bgGray200", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { ...(0, import_runtime55.trussProps)({
|
|
16523
16670
|
height: "h100",
|
|
16524
16671
|
borderRadius: "br4",
|
|
16525
16672
|
backgroundColor: "bgBlue500",
|
|
16526
16673
|
width: ["w_var", {
|
|
16527
|
-
"--width": (0,
|
|
16674
|
+
"--width": (0, import_runtime55.maybeCssVar)(__maybeInc10(`${progressValue}%`))
|
|
16528
16675
|
}]
|
|
16529
16676
|
}) }) }),
|
|
16530
|
-
/* @__PURE__ */ (0,
|
|
16677
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { ...tid.progressValue, children: [
|
|
16531
16678
|
progressValue,
|
|
16532
16679
|
"%"
|
|
16533
16680
|
] })
|
|
@@ -16543,9 +16690,9 @@ function clampProgress(value) {
|
|
|
16543
16690
|
}
|
|
16544
16691
|
|
|
16545
16692
|
// src/components/Table/GridTable.tsx
|
|
16546
|
-
var
|
|
16547
|
-
var
|
|
16548
|
-
var
|
|
16693
|
+
var import_runtime56 = require("@homebound/truss/runtime");
|
|
16694
|
+
var import_jsx_runtime87 = require("react/jsx-runtime");
|
|
16695
|
+
var import_react82 = require("react");
|
|
16549
16696
|
var __maybeInc11 = (inc) => {
|
|
16550
16697
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
16551
16698
|
};
|
|
@@ -16595,15 +16742,15 @@ function GridTable(props) {
|
|
|
16595
16742
|
columnGutter = false
|
|
16596
16743
|
} = props;
|
|
16597
16744
|
const inDocumentScrollLayout = useDocumentScrollLayout();
|
|
16598
|
-
const columnsWithIds = (0,
|
|
16745
|
+
const columnsWithIds = (0, import_react81.useMemo)(() => {
|
|
16599
16746
|
const columns2 = columnGutter && inDocumentScrollLayout ? withColumnGutters(_columns) : _columns;
|
|
16600
16747
|
return assignDefaultColumnIds(columns2);
|
|
16601
16748
|
}, [_columns, columnGutter, inDocumentScrollLayout]);
|
|
16602
|
-
const virtuosoRef = (0,
|
|
16603
|
-
const virtuosoRangeRef = (0,
|
|
16604
|
-
const resizeRef = (0,
|
|
16605
|
-
const tableContainerRef = (0,
|
|
16606
|
-
const api = (0,
|
|
16749
|
+
const virtuosoRef = (0, import_react81.useRef)(null);
|
|
16750
|
+
const virtuosoRangeRef = (0, import_react81.useRef)(null);
|
|
16751
|
+
const resizeRef = (0, import_react81.useRef)(null);
|
|
16752
|
+
const tableContainerRef = (0, import_react81.useRef)(null);
|
|
16753
|
+
const api = (0, import_react81.useMemo)(
|
|
16607
16754
|
() => {
|
|
16608
16755
|
const api2 = props.api ?? new GridTableApiImpl();
|
|
16609
16756
|
api2.init(persistCollapse, virtuosoRef, virtuosoRangeRef);
|
|
@@ -16616,8 +16763,8 @@ function GridTable(props) {
|
|
|
16616
16763
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16617
16764
|
[props.api]
|
|
16618
16765
|
);
|
|
16619
|
-
const [draggedRow, _setDraggedRow] = (0,
|
|
16620
|
-
const draggedRowRef = (0,
|
|
16766
|
+
const [draggedRow, _setDraggedRow] = (0, import_react81.useState)(void 0);
|
|
16767
|
+
const draggedRowRef = (0, import_react81.useRef)(draggedRow);
|
|
16621
16768
|
const setDraggedRow = (row) => {
|
|
16622
16769
|
draggedRowRef.current = row;
|
|
16623
16770
|
_setDraggedRow(row);
|
|
@@ -16627,7 +16774,7 @@ function GridTable(props) {
|
|
|
16627
16774
|
tableState
|
|
16628
16775
|
} = api;
|
|
16629
16776
|
tableState.onRowSelect = onRowSelect;
|
|
16630
|
-
(0,
|
|
16777
|
+
(0, import_react81.useEffect)(() => {
|
|
16631
16778
|
(0, import_mobx10.runInAction)(() => {
|
|
16632
16779
|
tableState.setRows(rows);
|
|
16633
16780
|
tableState.setColumns(columnsWithIds, visibleColumnsStorageKey);
|
|
@@ -16654,7 +16801,7 @@ function GridTable(props) {
|
|
|
16654
16801
|
setResizedWidths,
|
|
16655
16802
|
resetColumnWidths
|
|
16656
16803
|
} = useSetupColumnSizes(style, columns, resizeTarget ?? resizeRef, expandedColumnIds, visibleColumnsStorageKey, disableColumnResizing, inDocumentScrollLayout);
|
|
16657
|
-
(0,
|
|
16804
|
+
(0, import_react81.useEffect)(() => {
|
|
16658
16805
|
api.resetColumnWidthsFn = !disableColumnResizing ? resetColumnWidths : void 0;
|
|
16659
16806
|
}, [api, resetColumnWidths, disableColumnResizing]);
|
|
16660
16807
|
const {
|
|
@@ -16735,7 +16882,7 @@ function GridTable(props) {
|
|
|
16735
16882
|
};
|
|
16736
16883
|
const [tableHeadRows, visibleDataRows, keptSelectedRows, pinnedRows, tooManyClientSideRows] = useComputed(() => {
|
|
16737
16884
|
if (as === "card") {
|
|
16738
|
-
const cardElements = tableState.visibleRows.filter((rs) => ![HEADER, EXPANDABLE_HEADER, TOTALS, KEPT_GROUP].includes(rs.kind)).map((rs) => /* @__PURE__ */ (0,
|
|
16885
|
+
const cardElements = tableState.visibleRows.filter((rs) => ![HEADER, EXPANDABLE_HEADER, TOTALS, KEPT_GROUP].includes(rs.kind)).map((rs) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(TableCard, { rs, columns, rowStyle: rowStyles?.[rs.row.kind], api: tableState.api }, rs.key));
|
|
16739
16886
|
return [[], cardElements, [], [], false];
|
|
16740
16887
|
}
|
|
16741
16888
|
const headerRows = [];
|
|
@@ -16747,7 +16894,7 @@ function GridTable(props) {
|
|
|
16747
16894
|
const pinnedIds = new Set(pinnedRowStates.map((rs) => rs.row.id));
|
|
16748
16895
|
const visibleRows = tableState.visibleRows.filter((rs) => !pinnedIds.has(rs.row.id));
|
|
16749
16896
|
const hasExpandableHeader = visibleRows.some((rs) => rs.row.id === EXPANDABLE_HEADER);
|
|
16750
|
-
const makeRow = (rs, isFirstHeadRow, isFirstBodyRow, isLastBodyRow) => /* @__PURE__ */ (0,
|
|
16897
|
+
const makeRow = (rs, isFirstHeadRow, isFirstBodyRow, isLastBodyRow) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Row, { onDragStart, onDragOver, onDragEnd, onDrop, onDragEnter, ...{
|
|
16751
16898
|
as,
|
|
16752
16899
|
rs,
|
|
16753
16900
|
style,
|
|
@@ -16809,7 +16956,7 @@ function GridTable(props) {
|
|
|
16809
16956
|
const borderless = style?.presentationSettings?.borderless;
|
|
16810
16957
|
const typeScale = style?.presentationSettings?.typeScale;
|
|
16811
16958
|
const borderOnHover = style?.presentationSettings?.borderOnHover;
|
|
16812
|
-
const fieldProps = (0,
|
|
16959
|
+
const fieldProps = (0, import_react81.useMemo)(() => ({
|
|
16813
16960
|
labelStyle: "hidden",
|
|
16814
16961
|
numberAlignment: "right",
|
|
16815
16962
|
compact: true,
|
|
@@ -16826,11 +16973,11 @@ function GridTable(props) {
|
|
|
16826
16973
|
} : {}
|
|
16827
16974
|
}), [borderOnHover, borderless, typeScale]);
|
|
16828
16975
|
const _as = as === "virtual" && runningInJest ? "div" : as;
|
|
16829
|
-
const rowStateContext = (0,
|
|
16976
|
+
const rowStateContext = (0, import_react81.useMemo)(() => ({
|
|
16830
16977
|
tableState,
|
|
16831
16978
|
tableContainerRef
|
|
16832
16979
|
}), [tableState, tableContainerRef]);
|
|
16833
|
-
const tableStyle = (0,
|
|
16980
|
+
const tableStyle = (0, import_react81.useMemo)(() => {
|
|
16834
16981
|
if (!inDocumentScrollLayout || contentWidth === void 0 || tableWidth === void 0) return style;
|
|
16835
16982
|
const minWidthPx = Math.max(style.minWidthPx ?? 0, contentWidth);
|
|
16836
16983
|
if (minWidthPx === style.minWidthPx) return style;
|
|
@@ -16839,9 +16986,9 @@ function GridTable(props) {
|
|
|
16839
16986
|
minWidthPx
|
|
16840
16987
|
};
|
|
16841
16988
|
}, [contentWidth, inDocumentScrollLayout, style, tableWidth]);
|
|
16842
|
-
return /* @__PURE__ */ (0,
|
|
16843
|
-
/* @__PURE__ */ (0,
|
|
16844
|
-
as === "card" ? /* @__PURE__ */ (0,
|
|
16989
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
|
|
16990
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ref: resizeRef, ...(0, import_runtime56.trussProps)(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)) }),
|
|
16991
|
+
as === "card" ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(CardView, { cardRows: visibleDataRows, id, virtuosoRangeRef, infiniteScroll, persistScrollPosition }) : renders[_as](tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, tableContainerRef, persistScrollPosition)
|
|
16845
16992
|
] }) });
|
|
16846
16993
|
}
|
|
16847
16994
|
var renders = {
|
|
@@ -16850,7 +16997,7 @@ var renders = {
|
|
|
16850
16997
|
virtual: renderVirtual
|
|
16851
16998
|
};
|
|
16852
16999
|
function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, _virtuosoRangeRef, tableHeadRows, stickyOffset, _infiniteScroll, tableContainerRef, _persistScrollPosition) {
|
|
16853
|
-
return /* @__PURE__ */ (0,
|
|
17000
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { ref: tableContainerRef, ...(0, import_runtime56.trussProps)({
|
|
16854
17001
|
// Use `fit-content` to ensure the width of the table takes up the full width of its content.
|
|
16855
17002
|
// Otherwise, the table's width would be that of its container, which may not be as wide as the table itself.
|
|
16856
17003
|
// In cases where we have sticky columns on a very wide table, then the container which the columns "stick" to (which is the table),
|
|
@@ -16866,24 +17013,24 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
|
|
|
16866
17013
|
} : {},
|
|
16867
17014
|
...xss
|
|
16868
17015
|
}), "data-testid": id, children: [
|
|
16869
|
-
/* @__PURE__ */ (0,
|
|
17016
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { ...(0, import_runtime56.trussProps)({
|
|
16870
17017
|
...stickyHeader || pinnedRows.length > 0 ? {
|
|
16871
17018
|
position: "sticky",
|
|
16872
17019
|
transition: "transitionTop",
|
|
16873
17020
|
top: ["top_var", {
|
|
16874
|
-
"--top": (0,
|
|
17021
|
+
"--top": (0, import_runtime56.maybeCssVar)(__maybeInc11(stickyTableHeaderOffset(stickyOffset)))
|
|
16875
17022
|
}],
|
|
16876
17023
|
zIndex: ["z_var", {
|
|
16877
|
-
"--zIndex": (0,
|
|
17024
|
+
"--zIndex": (0, import_runtime56.maybeCssVar)(zIndices.tableStickyHeader)
|
|
16878
17025
|
}]
|
|
16879
17026
|
} : {}
|
|
16880
17027
|
}), children: [
|
|
16881
17028
|
tableHeadRows,
|
|
16882
17029
|
pinnedRows
|
|
16883
17030
|
] }),
|
|
16884
|
-
/* @__PURE__ */ (0,
|
|
17031
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { children: [
|
|
16885
17032
|
keptSelectedRows,
|
|
16886
|
-
firstRowMessage && /* @__PURE__ */ (0,
|
|
17033
|
+
firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ...(0, import_runtime56.trussProps)({
|
|
16887
17034
|
...keptSelectedRows.length === 0 && style.firstBodyRowCss,
|
|
16888
17035
|
...style.firstRowMessageCss,
|
|
16889
17036
|
...visibleDataRows.length === 0 && style.lastRowCss,
|
|
@@ -16896,7 +17043,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
|
|
|
16896
17043
|
] });
|
|
16897
17044
|
}
|
|
16898
17045
|
function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, _virtuosoRangeRef, tableHeadRows, stickyOffset, _infiniteScroll, tableContainerRef, _persistScrollPosition) {
|
|
16899
|
-
return /* @__PURE__ */ (0,
|
|
17046
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("table", { ref: tableContainerRef, ...(0, import_runtime56.trussProps)({
|
|
16900
17047
|
...{
|
|
16901
17048
|
width: "w100",
|
|
16902
17049
|
borderCollapse: "borderCollapse_separate",
|
|
@@ -16910,28 +17057,28 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
|
|
|
16910
17057
|
} : {},
|
|
16911
17058
|
...xss
|
|
16912
17059
|
}), "data-testid": id, children: [
|
|
16913
|
-
/* @__PURE__ */ (0,
|
|
17060
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("thead", { ...(0, import_runtime56.trussProps)({
|
|
16914
17061
|
...stickyHeader || pinnedRows.length > 0 ? {
|
|
16915
17062
|
position: "sticky",
|
|
16916
17063
|
transition: "transitionTop",
|
|
16917
17064
|
top: ["top_var", {
|
|
16918
|
-
"--top": (0,
|
|
17065
|
+
"--top": (0, import_runtime56.maybeCssVar)(__maybeInc11(stickyTableHeaderOffset(stickyOffset)))
|
|
16919
17066
|
}],
|
|
16920
17067
|
zIndex: ["z_var", {
|
|
16921
|
-
"--zIndex": (0,
|
|
17068
|
+
"--zIndex": (0, import_runtime56.maybeCssVar)(zIndices.tableStickyHeader)
|
|
16922
17069
|
}]
|
|
16923
17070
|
} : {}
|
|
16924
17071
|
}), children: [
|
|
16925
17072
|
tableHeadRows,
|
|
16926
17073
|
pinnedRows
|
|
16927
17074
|
] }),
|
|
16928
|
-
/* @__PURE__ */ (0,
|
|
17075
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("tbody", { children: [
|
|
16929
17076
|
keptSelectedRows,
|
|
16930
|
-
firstRowMessage && /* @__PURE__ */ (0,
|
|
17077
|
+
firstRowMessage && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("tr", { ...(0, import_runtime56.trussProps)({
|
|
16931
17078
|
...tableRowPrintBreakCss,
|
|
16932
17079
|
...keptSelectedRows.length === 0 && style.firstBodyRowCss,
|
|
16933
17080
|
...visibleDataRows.length === 0 && style.lastRowCss
|
|
16934
|
-
}), children: /* @__PURE__ */ (0,
|
|
17081
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("td", { colSpan: columns.length, ...(0, import_runtime56.trussProps)({
|
|
16935
17082
|
...style.betweenRowsCss,
|
|
16936
17083
|
...style.firstRowMessageCss,
|
|
16937
17084
|
...visibleDataRows.length === 0 && style.lastRowCellCss,
|
|
@@ -16945,7 +17092,7 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
|
|
|
16945
17092
|
function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, _tableContainerRef, persistScrollPosition = infiniteScroll === void 0) {
|
|
16946
17093
|
const customScrollParent = useVirtualizedScrollParent();
|
|
16947
17094
|
const inDocumentScrollLayout = useDocumentScrollLayout();
|
|
16948
|
-
const [fetchMoreInProgress, setFetchMoreInProgress] = (0,
|
|
17095
|
+
const [fetchMoreInProgress, setFetchMoreInProgress] = (0, import_react81.useState)(false);
|
|
16949
17096
|
const {
|
|
16950
17097
|
getScrollIndex,
|
|
16951
17098
|
setScrollIndex
|
|
@@ -16954,7 +17101,7 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, pi
|
|
|
16954
17101
|
const topItemCount = (stickyHeader || pinnedRows.length > 0 ? tableHeadRows.length : 0) + pinnedRows.length;
|
|
16955
17102
|
const validatedScrollIndex = savedScrollIndex !== void 0 && savedScrollIndex > 0 && savedScrollIndex < visibleDataRows.length ? savedScrollIndex + topItemCount : void 0;
|
|
16956
17103
|
const virtuosoKey = !!validatedScrollIndex && visibleDataRows.length > 0 ? "with-data" : "virtuoso";
|
|
16957
|
-
return /* @__PURE__ */ (0,
|
|
17104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
|
|
16958
17105
|
import_react_virtuoso2.Virtuoso,
|
|
16959
17106
|
{
|
|
16960
17107
|
useWindowScroll: inDocumentScrollLayout && !customScrollParent,
|
|
@@ -16969,7 +17116,7 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, pi
|
|
|
16969
17116
|
components: {
|
|
16970
17117
|
// zIndex keeps the pinned head above sticky columns; `top` matches the offsets used by
|
|
16971
17118
|
// the div/table render paths so virtualized tables pin below the global nav + page header.
|
|
16972
|
-
TopItemList:
|
|
17119
|
+
TopItemList: import_react81.default.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ...props, ref, ...(0, import_runtime56.mergeProps)(void 0, {
|
|
16973
17120
|
...props.style,
|
|
16974
17121
|
...style.minWidthPx !== void 0 ? {
|
|
16975
17122
|
minWidth: style.minWidthPx
|
|
@@ -16981,13 +17128,13 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, pi
|
|
|
16981
17128
|
}) })),
|
|
16982
17129
|
List: VirtualRoot(style, columns, id, xss),
|
|
16983
17130
|
Footer: () => {
|
|
16984
|
-
return /* @__PURE__ */ (0,
|
|
17131
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ...(0, import_runtime56.trussProps)({
|
|
16985
17132
|
...style.virtualFooterPaddingBottomPx !== void 0 ? {
|
|
16986
17133
|
paddingBottom: ["pb_var", {
|
|
16987
17134
|
"--paddingBottom": `${style.virtualFooterPaddingBottomPx ?? 0}px`
|
|
16988
17135
|
}]
|
|
16989
17136
|
} : {}
|
|
16990
|
-
}), children: fetchMoreInProgress && /* @__PURE__ */ (0,
|
|
17137
|
+
}), children: fetchMoreInProgress && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "h5 df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Loader, { size: "xs" }) }) });
|
|
16991
17138
|
}
|
|
16992
17139
|
},
|
|
16993
17140
|
topItemCount,
|
|
@@ -17008,11 +17155,11 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, pi
|
|
|
17008
17155
|
if (index === 0) {
|
|
17009
17156
|
return (
|
|
17010
17157
|
// Ensure the fallback message is the same width as the table
|
|
17011
|
-
/* @__PURE__ */ (0,
|
|
17158
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ...(0, import_runtime56.trussProps)({
|
|
17012
17159
|
...getTableRefWidthStyles(true, inDocumentScrollLayout),
|
|
17013
17160
|
...keptSelectedRows.length === 0 && style.firstBodyRowCss,
|
|
17014
17161
|
...visibleDataRows.length === 0 && style.lastRowCss
|
|
17015
|
-
}), children: /* @__PURE__ */ (0,
|
|
17162
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ...(0, import_runtime56.trussProps)({
|
|
17016
17163
|
...style.firstRowMessageCss,
|
|
17017
17164
|
...visibleDataRows.length === 0 && style.lastRowCellCss,
|
|
17018
17165
|
...visibleDataRows.length === 0 && style.lastRowFirstCellCss,
|
|
@@ -17061,7 +17208,7 @@ function CardView({
|
|
|
17061
17208
|
}) {
|
|
17062
17209
|
const customScrollParent = useVirtualizedScrollParent();
|
|
17063
17210
|
const inDocumentScrollLayout = useDocumentScrollLayout();
|
|
17064
|
-
const [fetchMoreInProgress, setFetchMoreInProgress] = (0,
|
|
17211
|
+
const [fetchMoreInProgress, setFetchMoreInProgress] = (0, import_react81.useState)(false);
|
|
17065
17212
|
const {
|
|
17066
17213
|
getScrollIndex,
|
|
17067
17214
|
setScrollIndex
|
|
@@ -17070,18 +17217,18 @@ function CardView({
|
|
|
17070
17217
|
const validatedScrollIndex = savedScrollIndex !== void 0 && savedScrollIndex > 0 && savedScrollIndex < cardRows.length ? savedScrollIndex : void 0;
|
|
17071
17218
|
const virtuosoKey = !!validatedScrollIndex && cardRows.length > 0 ? "with-data" : "virtuoso";
|
|
17072
17219
|
if (runningInJest) {
|
|
17073
|
-
return /* @__PURE__ */ (0,
|
|
17220
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "pt2 pb2", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "dg gtc_repeat_auto_fill_330px jcc gap3 pt3 pb3 pr3 pl3", children: cardRows }) });
|
|
17074
17221
|
}
|
|
17075
|
-
return /* @__PURE__ */ (0,
|
|
17222
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "pt2 pb2 h100", children: /* @__PURE__ */ (0, import_react82.createElement)(import_react_virtuoso2.VirtuosoGrid, { useWindowScroll: inDocumentScrollLayout && !customScrollParent, ...customScrollParent ? {
|
|
17076
17223
|
customScrollParent
|
|
17077
17224
|
} : {}, ...validatedScrollIndex !== void 0 ? {
|
|
17078
17225
|
initialTopMostItemIndex: validatedScrollIndex
|
|
17079
17226
|
} : {}, key: virtuosoKey, "data-testid": id, totalCount: cardRows.length, itemContent: (index) => cardRows[index], components: {
|
|
17080
|
-
List:
|
|
17227
|
+
List: import_react81.default.forwardRef(function CardList({
|
|
17081
17228
|
style,
|
|
17082
17229
|
children
|
|
17083
17230
|
}, ref) {
|
|
17084
|
-
return /* @__PURE__ */ (0,
|
|
17231
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ref, ...(0, import_runtime56.mergeProps)(void 0, style, {
|
|
17085
17232
|
display: "dg",
|
|
17086
17233
|
gridTemplateColumns: "gtc_repeat_auto_fill_330px",
|
|
17087
17234
|
justifyContent: "jcc",
|
|
@@ -17092,7 +17239,7 @@ function CardView({
|
|
|
17092
17239
|
paddingLeft: "pl3"
|
|
17093
17240
|
}), children });
|
|
17094
17241
|
}),
|
|
17095
|
-
Footer: () => /* @__PURE__ */ (0,
|
|
17242
|
+
Footer: () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { children: fetchMoreInProgress && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "h5 df aic jcc", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Loader, { size: "xs" }) }) })
|
|
17096
17243
|
}, rangeChanged: (newRange) => {
|
|
17097
17244
|
virtuosoRangeRef.current = newRange;
|
|
17098
17245
|
if (!infiniteScroll && cardRows.length > 0) {
|
|
@@ -17114,11 +17261,11 @@ function CardView({
|
|
|
17114
17261
|
} : {} }) });
|
|
17115
17262
|
}
|
|
17116
17263
|
var VirtualRoot = (0, import_memoize_one.default)((gs, _columns, id, xss) => {
|
|
17117
|
-
return
|
|
17264
|
+
return import_react81.default.forwardRef(function VirtualRoot2({
|
|
17118
17265
|
style,
|
|
17119
17266
|
children
|
|
17120
17267
|
}, ref) {
|
|
17121
|
-
return /* @__PURE__ */ (0,
|
|
17268
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ref, ...(0, import_runtime56.mergeProps)(void 0, style, {
|
|
17122
17269
|
...gs.rootCss,
|
|
17123
17270
|
...gs.minWidthPx ? {
|
|
17124
17271
|
minWidth: ["mw_var", {
|
|
@@ -17134,8 +17281,8 @@ var VirtualRoot = (0, import_memoize_one.default)((gs, _columns, id, xss) => {
|
|
|
17134
17281
|
});
|
|
17135
17282
|
|
|
17136
17283
|
// src/components/ToggleChip.tsx
|
|
17137
|
-
var
|
|
17138
|
-
var
|
|
17284
|
+
var import_runtime57 = require("@homebound/truss/runtime");
|
|
17285
|
+
var import_jsx_runtime88 = require("react/jsx-runtime");
|
|
17139
17286
|
function ToggleChip(props) {
|
|
17140
17287
|
const {
|
|
17141
17288
|
text,
|
|
@@ -17153,7 +17300,7 @@ function ToggleChip(props) {
|
|
|
17153
17300
|
} = useHover2({});
|
|
17154
17301
|
const compact = fieldProps?.compact;
|
|
17155
17302
|
const tid = useTestIds(props, "chip");
|
|
17156
|
-
return /* @__PURE__ */ (0,
|
|
17303
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("button", { type: "button", ...(0, import_runtime57.trussProps)({
|
|
17157
17304
|
...chipBaseStyles(compact),
|
|
17158
17305
|
...isHovered && !disabled && chipHoverStyles,
|
|
17159
17306
|
// Use a lower right-padding to get closer to the `X` circle when clearable, i.e. not disabled
|
|
@@ -17168,8 +17315,8 @@ function ToggleChip(props) {
|
|
|
17168
17315
|
},
|
|
17169
17316
|
...xss
|
|
17170
17317
|
}), disabled, onClick, ...hoverProps, ...tid, children: [
|
|
17171
|
-
icon && /* @__PURE__ */ (0,
|
|
17172
|
-
/* @__PURE__ */ (0,
|
|
17318
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "fs0", ...tid.icon, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon, { icon, color: "rgba(36, 36, 36, 1)" /* Gray900 */, inc: 2 }) }),
|
|
17319
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { ...(0, import_runtime57.trussProps)({
|
|
17173
17320
|
textAlign: "tal",
|
|
17174
17321
|
overflow: "oh",
|
|
17175
17322
|
display: "d_negwebkit_box",
|
|
@@ -17181,14 +17328,14 @@ function ToggleChip(props) {
|
|
|
17181
17328
|
paddingRight: "pr0"
|
|
17182
17329
|
} : {}
|
|
17183
17330
|
}), title: text, children: text }),
|
|
17184
|
-
!disabled && /* @__PURE__ */ (0,
|
|
17331
|
+
!disabled && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { ...(0, import_runtime57.trussProps)({
|
|
17185
17332
|
...{
|
|
17186
17333
|
flexShrink: "fs0",
|
|
17187
17334
|
borderRadius: "br16",
|
|
17188
17335
|
backgroundColor: "bgGray200"
|
|
17189
17336
|
},
|
|
17190
17337
|
...isHovered && chipHoverStyles
|
|
17191
|
-
}), ...tid.x, children: /* @__PURE__ */ (0,
|
|
17338
|
+
}), ...tid.x, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon, { icon: "x", color: "rgba(141, 141, 141, 1)" /* Gray600 */, inc: 2 }) })
|
|
17192
17339
|
] });
|
|
17193
17340
|
}
|
|
17194
17341
|
var chipHoverStyles = {
|
|
@@ -17203,8 +17350,8 @@ var chipDisabledStyles = {
|
|
|
17203
17350
|
};
|
|
17204
17351
|
|
|
17205
17352
|
// src/components/ToggleChips.tsx
|
|
17206
|
-
var
|
|
17207
|
-
var
|
|
17353
|
+
var import_runtime58 = require("@homebound/truss/runtime");
|
|
17354
|
+
var import_jsx_runtime89 = require("react/jsx-runtime");
|
|
17208
17355
|
function ToggleChips(props) {
|
|
17209
17356
|
const {
|
|
17210
17357
|
values,
|
|
@@ -17213,22 +17360,22 @@ function ToggleChips(props) {
|
|
|
17213
17360
|
xss
|
|
17214
17361
|
} = props;
|
|
17215
17362
|
const tid = useTestIds(props, "toggleChips");
|
|
17216
|
-
return /* @__PURE__ */ (0,
|
|
17363
|
+
return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { ...(0, import_runtime58.trussProps)({
|
|
17217
17364
|
...{
|
|
17218
17365
|
display: "df",
|
|
17219
17366
|
flexWrap: "flexWrap_wrap",
|
|
17220
17367
|
gap: "gap1"
|
|
17221
17368
|
},
|
|
17222
17369
|
...xss
|
|
17223
|
-
}), ...tid, children: values.map((value) => /* @__PURE__ */ (0,
|
|
17370
|
+
}), ...tid, children: values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ToggleChip, { text: getLabel(value), onClick: () => onRemove(value), ...tid.chip }, getLabel(value))) });
|
|
17224
17371
|
}
|
|
17225
17372
|
|
|
17226
17373
|
// src/components/Accordion.tsx
|
|
17227
|
-
var
|
|
17228
|
-
var
|
|
17229
|
-
var
|
|
17230
|
-
var
|
|
17231
|
-
var
|
|
17374
|
+
var import_utils75 = require("@react-aria/utils");
|
|
17375
|
+
var import_react83 = require("react");
|
|
17376
|
+
var import_react_aria42 = require("react-aria");
|
|
17377
|
+
var import_runtime59 = require("@homebound/truss/runtime");
|
|
17378
|
+
var import_jsx_runtime90 = require("react/jsx-runtime");
|
|
17232
17379
|
var __maybeInc12 = (inc) => {
|
|
17233
17380
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
17234
17381
|
};
|
|
@@ -17250,38 +17397,38 @@ function Accordion(props) {
|
|
|
17250
17397
|
xss
|
|
17251
17398
|
} = props;
|
|
17252
17399
|
const tid = useTestIds(props, "accordion");
|
|
17253
|
-
const id = (0,
|
|
17254
|
-
const [expanded, setExpanded] = (0,
|
|
17400
|
+
const id = (0, import_utils75.useId)();
|
|
17401
|
+
const [expanded, setExpanded] = (0, import_react83.useState)(defaultExpanded && !disabled);
|
|
17255
17402
|
const {
|
|
17256
17403
|
isFocusVisible,
|
|
17257
17404
|
focusProps
|
|
17258
|
-
} = (0,
|
|
17259
|
-
const [contentEl, setContentEl] = (0,
|
|
17260
|
-
const contentRef = (0,
|
|
17405
|
+
} = (0, import_react_aria42.useFocusRing)();
|
|
17406
|
+
const [contentEl, setContentEl] = (0, import_react83.useState)(null);
|
|
17407
|
+
const contentRef = (0, import_react83.useMemo)(() => ({
|
|
17261
17408
|
current: contentEl
|
|
17262
17409
|
}), [contentEl]);
|
|
17263
|
-
const [contentHeight, setContentHeight] = (0,
|
|
17264
|
-
(0,
|
|
17410
|
+
const [contentHeight, setContentHeight] = (0, import_react83.useState)(expanded ? "auto" : "0");
|
|
17411
|
+
(0, import_react83.useEffect)(() => {
|
|
17265
17412
|
setExpanded(defaultExpanded && !disabled);
|
|
17266
17413
|
}, [defaultExpanded, disabled]);
|
|
17267
|
-
(0,
|
|
17414
|
+
(0, import_react83.useEffect)(() => {
|
|
17268
17415
|
setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
|
|
17269
17416
|
}, [expanded, contentEl]);
|
|
17270
|
-
const onResize = (0,
|
|
17417
|
+
const onResize = (0, import_react83.useCallback)(() => {
|
|
17271
17418
|
if (contentEl && expanded) {
|
|
17272
17419
|
setContentHeight(`${contentEl.scrollHeight}px`);
|
|
17273
17420
|
}
|
|
17274
17421
|
}, [expanded, contentEl, setContentHeight]);
|
|
17275
|
-
(0,
|
|
17422
|
+
(0, import_utils75.useResizeObserver)({
|
|
17276
17423
|
ref: contentRef,
|
|
17277
17424
|
onResize
|
|
17278
17425
|
});
|
|
17279
|
-
const toggle = (0,
|
|
17426
|
+
const toggle = (0, import_react83.useCallback)(() => {
|
|
17280
17427
|
setExpanded((prev) => !prev);
|
|
17281
17428
|
if (setExpandedIndex) setExpandedIndex(index);
|
|
17282
17429
|
if (onToggle) onToggle();
|
|
17283
17430
|
}, [index, setExpandedIndex, onToggle]);
|
|
17284
|
-
const touchableStyle = (0,
|
|
17431
|
+
const touchableStyle = (0, import_react83.useMemo)(() => ({
|
|
17285
17432
|
...{
|
|
17286
17433
|
display: "df",
|
|
17287
17434
|
justifyContent: "jcsb",
|
|
@@ -17322,12 +17469,12 @@ function Accordion(props) {
|
|
|
17322
17469
|
},
|
|
17323
17470
|
...isFocusVisible && {
|
|
17324
17471
|
boxShadow: ["boxShadow_var", {
|
|
17325
|
-
"--boxShadow": (0,
|
|
17472
|
+
"--boxShadow": (0, import_runtime59.maybeCssVar)(`inset 0 0 0 2px ${"rgba(29, 78, 216, 1)" /* Blue700 */}`)
|
|
17326
17473
|
}]
|
|
17327
17474
|
},
|
|
17328
17475
|
...xss
|
|
17329
17476
|
}), [compact, disabled, isFocusVisible, titleOnClick, xss]);
|
|
17330
|
-
return /* @__PURE__ */ (0,
|
|
17477
|
+
return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { ...tid.container, ...(0, import_runtime59.trussProps)({
|
|
17331
17478
|
...{
|
|
17332
17479
|
borderColor: "bcGray300",
|
|
17333
17480
|
...topBorder ? {
|
|
@@ -17345,14 +17492,14 @@ function Accordion(props) {
|
|
|
17345
17492
|
}]
|
|
17346
17493
|
} : {}
|
|
17347
17494
|
}), children: [
|
|
17348
|
-
titleOnClick ? /* @__PURE__ */ (0,
|
|
17349
|
-
/* @__PURE__ */ (0,
|
|
17495
|
+
titleOnClick ? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { ...focusProps, "aria-controls": id, "aria-expanded": expanded, className: "df", children: [
|
|
17496
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { ...tid.title, disabled, ...(0, import_runtime59.trussProps)({
|
|
17350
17497
|
...touchableStyle,
|
|
17351
17498
|
...{
|
|
17352
17499
|
flexGrow: "fg1"
|
|
17353
17500
|
}
|
|
17354
17501
|
}), onClick: titleOnClick, children: title }),
|
|
17355
|
-
/* @__PURE__ */ (0,
|
|
17502
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { ...tid.toggle, disabled, ...(0, import_runtime59.trussProps)({
|
|
17356
17503
|
...touchableStyle,
|
|
17357
17504
|
...{
|
|
17358
17505
|
paddingLeft: "pl2",
|
|
@@ -17363,23 +17510,23 @@ function Accordion(props) {
|
|
|
17363
17510
|
paddingRight: "pr_10px"
|
|
17364
17511
|
} : {}
|
|
17365
17512
|
}
|
|
17366
|
-
}), onClick: toggle, children: /* @__PURE__ */ (0,
|
|
17367
|
-
] }) : /* @__PURE__ */ (0,
|
|
17513
|
+
}), onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(RotatingChevronIcon, { expanded }) })
|
|
17514
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("button", { ...tid.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled, ...(0, import_runtime59.trussProps)({
|
|
17368
17515
|
...{
|
|
17369
17516
|
width: "w100"
|
|
17370
17517
|
},
|
|
17371
17518
|
...touchableStyle
|
|
17372
17519
|
}), onClick: toggle, children: [
|
|
17373
|
-
/* @__PURE__ */ (0,
|
|
17374
|
-
/* @__PURE__ */ (0,
|
|
17520
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "fg1 tal", children: title }),
|
|
17521
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)(RotatingChevronIcon, { expanded })
|
|
17375
17522
|
] }),
|
|
17376
|
-
/* @__PURE__ */ (0,
|
|
17523
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { ...tid.details, id, "aria-hidden": !expanded, ...(0, import_runtime59.trussProps)({
|
|
17377
17524
|
overflow: "oh",
|
|
17378
17525
|
height: ["h_var", {
|
|
17379
|
-
"--height": (0,
|
|
17526
|
+
"--height": (0, import_runtime59.maybeCssVar)(__maybeInc12(contentHeight))
|
|
17380
17527
|
}],
|
|
17381
17528
|
transition: "transition_height_250ms_ease_in_out"
|
|
17382
|
-
}), children: expanded && /* @__PURE__ */ (0,
|
|
17529
|
+
}), children: expanded && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { ...(0, import_runtime59.trussProps)({
|
|
17383
17530
|
paddingLeft: "pl2",
|
|
17384
17531
|
paddingRight: "pr2",
|
|
17385
17532
|
paddingBottom: "pb2",
|
|
@@ -17394,13 +17541,13 @@ function Accordion(props) {
|
|
|
17394
17541
|
] });
|
|
17395
17542
|
}
|
|
17396
17543
|
function RotatingChevronIcon(props) {
|
|
17397
|
-
return /* @__PURE__ */ (0,
|
|
17544
|
+
return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { ...(0, import_runtime59.trussProps)({
|
|
17398
17545
|
flexShrink: "fs0",
|
|
17399
17546
|
transition: "transition_transform_250ms_linear",
|
|
17400
17547
|
transform: ["transform_var", {
|
|
17401
|
-
"--transform": (0,
|
|
17548
|
+
"--transform": (0, import_runtime59.maybeCssVar)(props.expanded ? "rotate(180deg)" : "rotate(0deg)")
|
|
17402
17549
|
}]
|
|
17403
|
-
}), children: /* @__PURE__ */ (0,
|
|
17550
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Icon, { icon: "chevronDown" }) });
|
|
17404
17551
|
}
|
|
17405
17552
|
var accordionSizes = {
|
|
17406
17553
|
xs: 240,
|
|
@@ -17410,15 +17557,15 @@ var accordionSizes = {
|
|
|
17410
17557
|
};
|
|
17411
17558
|
|
|
17412
17559
|
// src/components/AccordionList.tsx
|
|
17413
|
-
var
|
|
17414
|
-
var
|
|
17560
|
+
var import_react84 = require("react");
|
|
17561
|
+
var import_jsx_runtime91 = require("react/jsx-runtime");
|
|
17415
17562
|
function AccordionList(props) {
|
|
17416
17563
|
const { accordions, size, allowMultipleExpanded = true, compact = false } = props;
|
|
17417
|
-
const [expandedIndex, setExpandedIndex] = (0,
|
|
17564
|
+
const [expandedIndex, setExpandedIndex] = (0, import_react84.useState)(
|
|
17418
17565
|
accordions.findIndex((a) => a.defaultExpanded)
|
|
17419
17566
|
);
|
|
17420
17567
|
const tid = useTestIds(props, "accordionList");
|
|
17421
|
-
return /* @__PURE__ */ (0,
|
|
17568
|
+
return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_jsx_runtime91.Fragment, { children: accordions.map((accordionProps, index, arr) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
|
|
17422
17569
|
Accordion,
|
|
17423
17570
|
{
|
|
17424
17571
|
...accordionProps,
|
|
@@ -17435,7 +17582,7 @@ function AccordionList(props) {
|
|
|
17435
17582
|
}
|
|
17436
17583
|
|
|
17437
17584
|
// src/components/AutoSaveIndicator.tsx
|
|
17438
|
-
var
|
|
17585
|
+
var import_react85 = require("react");
|
|
17439
17586
|
|
|
17440
17587
|
// src/types.ts
|
|
17441
17588
|
function assertNever(x) {
|
|
@@ -17443,7 +17590,7 @@ function assertNever(x) {
|
|
|
17443
17590
|
}
|
|
17444
17591
|
|
|
17445
17592
|
// src/components/AutoSaveIndicator.tsx
|
|
17446
|
-
var
|
|
17593
|
+
var import_jsx_runtime92 = require("react/jsx-runtime");
|
|
17447
17594
|
function AutoSaveIndicator({
|
|
17448
17595
|
hideOnIdle,
|
|
17449
17596
|
doNotReset
|
|
@@ -17453,7 +17600,7 @@ function AutoSaveIndicator({
|
|
|
17453
17600
|
resetStatus,
|
|
17454
17601
|
errors
|
|
17455
17602
|
} = useAutoSaveStatus();
|
|
17456
|
-
(0,
|
|
17603
|
+
(0, import_react85.useEffect)(
|
|
17457
17604
|
() => {
|
|
17458
17605
|
if (doNotReset) return;
|
|
17459
17606
|
return () => resetStatus();
|
|
@@ -17464,11 +17611,11 @@ function AutoSaveIndicator({
|
|
|
17464
17611
|
);
|
|
17465
17612
|
switch (status) {
|
|
17466
17613
|
case "idle" /* IDLE */:
|
|
17467
|
-
return hideOnIdle ? null : /* @__PURE__ */ (0,
|
|
17614
|
+
return hideOnIdle ? null : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Indicator, { icon: "cloudSave" });
|
|
17468
17615
|
case "saving" /* SAVING */:
|
|
17469
|
-
return /* @__PURE__ */ (0,
|
|
17616
|
+
return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Indicator, { icon: "refresh", text: "Saving..." });
|
|
17470
17617
|
case "done" /* DONE */:
|
|
17471
|
-
return /* @__PURE__ */ (0,
|
|
17618
|
+
return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Indicator, { icon: "cloudSave", text: "Saved" });
|
|
17472
17619
|
case "error" /* ERROR */:
|
|
17473
17620
|
return (
|
|
17474
17621
|
/**
|
|
@@ -17476,7 +17623,7 @@ function AutoSaveIndicator({
|
|
|
17476
17623
|
* rendering it far away from the Icon/Text. Wrap it with a div to constrain
|
|
17477
17624
|
* it.
|
|
17478
17625
|
*/
|
|
17479
|
-
/* @__PURE__ */ (0,
|
|
17626
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "dif", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Tooltip, { title: String(errors), placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Indicator, { icon: "error", color: "rgba(239, 68, 68, 1)" /* Red500 */, text: "Error saving" }) }) })
|
|
17480
17627
|
);
|
|
17481
17628
|
default:
|
|
17482
17629
|
assertNever(status);
|
|
@@ -17487,15 +17634,15 @@ function Indicator({
|
|
|
17487
17634
|
icon,
|
|
17488
17635
|
color
|
|
17489
17636
|
}) {
|
|
17490
|
-
return /* @__PURE__ */ (0,
|
|
17491
|
-
/* @__PURE__ */ (0,
|
|
17637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { "data-testid": "autoSave", className: "df gap1 aic gray700 fw6 fz_14px lh_20px", children: [
|
|
17638
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Icon, { icon, color }),
|
|
17492
17639
|
text
|
|
17493
17640
|
] });
|
|
17494
17641
|
}
|
|
17495
17642
|
|
|
17496
17643
|
// src/components/Banner.tsx
|
|
17497
|
-
var
|
|
17498
|
-
var
|
|
17644
|
+
var import_runtime60 = require("@homebound/truss/runtime");
|
|
17645
|
+
var import_jsx_runtime93 = require("react/jsx-runtime");
|
|
17499
17646
|
function Banner(props) {
|
|
17500
17647
|
const {
|
|
17501
17648
|
type,
|
|
@@ -17505,7 +17652,7 @@ function Banner(props) {
|
|
|
17505
17652
|
...others
|
|
17506
17653
|
} = props;
|
|
17507
17654
|
const tid = useTestIds(others, "banner");
|
|
17508
|
-
return /* @__PURE__ */ (0,
|
|
17655
|
+
return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { ...(0, import_runtime60.trussProps)({
|
|
17509
17656
|
...variantStyles3[type],
|
|
17510
17657
|
...{
|
|
17511
17658
|
display: "df",
|
|
@@ -17523,9 +17670,9 @@ function Banner(props) {
|
|
|
17523
17670
|
boxShadow: "bshBasic"
|
|
17524
17671
|
}
|
|
17525
17672
|
}), ...tid, role: "alert", children: [
|
|
17526
|
-
showIcon && /* @__PURE__ */ (0,
|
|
17527
|
-
/* @__PURE__ */ (0,
|
|
17528
|
-
onClose && /* @__PURE__ */ (0,
|
|
17673
|
+
showIcon && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "fs0", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Icon, { icon: typeToIcon[type], ...tid.type, color: "rgba(36, 36, 36, 1)" /* Gray900 */ }) }),
|
|
17674
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "fg1", ...tid.message, children: message }),
|
|
17675
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "lh_0", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(IconButton, { icon: "x", onClick: onClose, ...tid.close, color: "rgba(36, 36, 36, 1)" /* Gray900 */ }) })
|
|
17529
17676
|
] });
|
|
17530
17677
|
}
|
|
17531
17678
|
var typeToIcon = {
|
|
@@ -17563,38 +17710,38 @@ var import_react113 = require("react");
|
|
|
17563
17710
|
var import_react_aria47 = require("react-aria");
|
|
17564
17711
|
|
|
17565
17712
|
// src/components/Modal/Modal.tsx
|
|
17566
|
-
var
|
|
17567
|
-
var
|
|
17568
|
-
var
|
|
17713
|
+
var import_utils79 = require("@react-aria/utils");
|
|
17714
|
+
var import_react88 = require("react");
|
|
17715
|
+
var import_react_aria43 = require("react-aria");
|
|
17569
17716
|
var import_react_dom3 = require("react-dom");
|
|
17570
17717
|
|
|
17571
17718
|
// src/components/Modal/useModal.tsx
|
|
17572
|
-
var
|
|
17719
|
+
var import_react87 = require("react");
|
|
17573
17720
|
|
|
17574
17721
|
// src/components/Modal/ModalContext.tsx
|
|
17575
|
-
var
|
|
17576
|
-
var
|
|
17577
|
-
var ModalContext = (0,
|
|
17722
|
+
var import_react86 = require("react");
|
|
17723
|
+
var import_jsx_runtime94 = require("react/jsx-runtime");
|
|
17724
|
+
var ModalContext = (0, import_react86.createContext)({ inModal: false });
|
|
17578
17725
|
function ModalProvider({ children }) {
|
|
17579
|
-
const value = (0,
|
|
17580
|
-
return /* @__PURE__ */ (0,
|
|
17726
|
+
const value = (0, import_react86.useMemo)(() => ({ inModal: true }), []);
|
|
17727
|
+
return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ModalContext.Provider, { value, children });
|
|
17581
17728
|
}
|
|
17582
17729
|
function useModalContext() {
|
|
17583
|
-
return (0,
|
|
17730
|
+
return (0, import_react86.useContext)(ModalContext);
|
|
17584
17731
|
}
|
|
17585
17732
|
|
|
17586
17733
|
// src/components/Modal/useModal.tsx
|
|
17587
17734
|
function useModal() {
|
|
17588
17735
|
const { modalState, modalCanCloseChecks } = useBeamContext();
|
|
17589
17736
|
const { inModal } = useModalContext();
|
|
17590
|
-
const lastCanClose = (0,
|
|
17591
|
-
const api = (0,
|
|
17592
|
-
(0,
|
|
17737
|
+
const lastCanClose = (0, import_react87.useRef)();
|
|
17738
|
+
const api = (0, import_react87.useRef)();
|
|
17739
|
+
(0, import_react87.useEffect)(() => {
|
|
17593
17740
|
return () => {
|
|
17594
17741
|
modalCanCloseChecks.current = modalCanCloseChecks.current.filter((c) => c !== lastCanClose.current);
|
|
17595
17742
|
};
|
|
17596
17743
|
}, [modalCanCloseChecks]);
|
|
17597
|
-
return (0,
|
|
17744
|
+
return (0, import_react87.useMemo)(
|
|
17598
17745
|
() => ({
|
|
17599
17746
|
openModal(props) {
|
|
17600
17747
|
modalState.current = { ...props, api };
|
|
@@ -17629,8 +17776,8 @@ function useModal() {
|
|
|
17629
17776
|
}
|
|
17630
17777
|
|
|
17631
17778
|
// src/components/Modal/Modal.tsx
|
|
17632
|
-
var
|
|
17633
|
-
var
|
|
17779
|
+
var import_runtime61 = require("@homebound/truss/runtime");
|
|
17780
|
+
var import_jsx_runtime95 = require("react/jsx-runtime");
|
|
17634
17781
|
function Modal(props) {
|
|
17635
17782
|
const {
|
|
17636
17783
|
size = "md",
|
|
@@ -17641,7 +17788,7 @@ function Modal(props) {
|
|
|
17641
17788
|
allowClosing = true
|
|
17642
17789
|
} = props;
|
|
17643
17790
|
const isFixedHeight = typeof size !== "string";
|
|
17644
|
-
const ref = (0,
|
|
17791
|
+
const ref = (0, import_react88.useRef)(null);
|
|
17645
17792
|
const {
|
|
17646
17793
|
modalBodyDiv,
|
|
17647
17794
|
modalFooterDiv,
|
|
@@ -17653,7 +17800,7 @@ function Modal(props) {
|
|
|
17653
17800
|
const {
|
|
17654
17801
|
overlayProps,
|
|
17655
17802
|
underlayProps
|
|
17656
|
-
} = (0,
|
|
17803
|
+
} = (0, import_react_aria43.useOverlay)({
|
|
17657
17804
|
...props,
|
|
17658
17805
|
isOpen: true,
|
|
17659
17806
|
onClose: closeModal,
|
|
@@ -17664,19 +17811,19 @@ function Modal(props) {
|
|
|
17664
17811
|
}, ref);
|
|
17665
17812
|
const {
|
|
17666
17813
|
modalProps
|
|
17667
|
-
} = (0,
|
|
17814
|
+
} = (0, import_react_aria43.useModal)();
|
|
17668
17815
|
const {
|
|
17669
17816
|
dialogProps,
|
|
17670
17817
|
titleProps
|
|
17671
|
-
} = (0,
|
|
17818
|
+
} = (0, import_react_aria43.useDialog)({
|
|
17672
17819
|
role: "dialog"
|
|
17673
17820
|
}, ref);
|
|
17674
|
-
const [[width2, height], setSize] = (0,
|
|
17675
|
-
const modalBodyRef = (0,
|
|
17676
|
-
const modalFooterRef = (0,
|
|
17677
|
-
const modalHeaderRef = (0,
|
|
17821
|
+
const [[width2, height], setSize] = (0, import_react88.useState)(getSize(size));
|
|
17822
|
+
const modalBodyRef = (0, import_react88.useRef)(null);
|
|
17823
|
+
const modalFooterRef = (0, import_react88.useRef)(null);
|
|
17824
|
+
const modalHeaderRef = (0, import_react88.useRef)(null);
|
|
17678
17825
|
const testId = useTestIds({}, testIdPrefix);
|
|
17679
|
-
(0,
|
|
17826
|
+
(0, import_react_aria43.usePreventScroll)();
|
|
17680
17827
|
const {
|
|
17681
17828
|
sm
|
|
17682
17829
|
} = useBreakpoint();
|
|
@@ -17685,10 +17832,10 @@ function Modal(props) {
|
|
|
17685
17832
|
setSize: (size2 = "md") => setSize(getSize(size2))
|
|
17686
17833
|
};
|
|
17687
17834
|
}
|
|
17688
|
-
const [hasScroll, setHasScroll] = (0,
|
|
17689
|
-
(0,
|
|
17835
|
+
const [hasScroll, setHasScroll] = (0, import_react88.useState)(forceScrolling ?? false);
|
|
17836
|
+
(0, import_utils79.useResizeObserver)({
|
|
17690
17837
|
ref: modalBodyRef,
|
|
17691
|
-
onResize: (0,
|
|
17838
|
+
onResize: (0, import_react88.useCallback)(
|
|
17692
17839
|
() => {
|
|
17693
17840
|
const target = modalBodyRef.current;
|
|
17694
17841
|
if (forceScrolling === void 0 && !isFixedHeight) {
|
|
@@ -17700,7 +17847,7 @@ function Modal(props) {
|
|
|
17700
17847
|
[]
|
|
17701
17848
|
)
|
|
17702
17849
|
});
|
|
17703
|
-
(0,
|
|
17850
|
+
(0, import_react88.useEffect)(
|
|
17704
17851
|
() => {
|
|
17705
17852
|
modalHeaderRef.current.appendChild(modalHeaderDiv);
|
|
17706
17853
|
modalBodyRef.current.appendChild(modalBodyDiv);
|
|
@@ -17710,7 +17857,7 @@ function Modal(props) {
|
|
|
17710
17857
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
17711
17858
|
[modalBodyRef, modalFooterRef, modalHeaderRef]
|
|
17712
17859
|
);
|
|
17713
|
-
return /* @__PURE__ */ (0,
|
|
17860
|
+
return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_aria43.OverlayContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime61.trussProps)({
|
|
17714
17861
|
position: "fixed",
|
|
17715
17862
|
top: "tp_0",
|
|
17716
17863
|
bottom: "bot_0",
|
|
@@ -17721,9 +17868,9 @@ function Modal(props) {
|
|
|
17721
17868
|
justifyContent: "jcc",
|
|
17722
17869
|
backgroundColor: "bgc_rgba_36_36_36_0_6",
|
|
17723
17870
|
zIndex: ["z_var", {
|
|
17724
|
-
"--zIndex": (0,
|
|
17871
|
+
"--zIndex": (0, import_runtime61.maybeCssVar)(zIndices.modalUnderlay)
|
|
17725
17872
|
}]
|
|
17726
|
-
}), ...underlayProps, ...testId.underlay, children: /* @__PURE__ */ (0,
|
|
17873
|
+
}), ...underlayProps, ...testId.underlay, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_aria43.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { ...(0, import_runtime61.trussProps)({
|
|
17727
17874
|
borderRadius: "br24",
|
|
17728
17875
|
backgroundColor: "bgWhite",
|
|
17729
17876
|
boxShadow: "bshModal",
|
|
@@ -17749,7 +17896,7 @@ function Modal(props) {
|
|
|
17749
17896
|
borderRadius: "br0"
|
|
17750
17897
|
} : {}
|
|
17751
17898
|
}), ref, ...overlayProps, ...dialogProps, ...modalProps, ...testId, children: [
|
|
17752
|
-
/* @__PURE__ */ (0,
|
|
17899
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("header", { ...(0, import_runtime61.trussProps)({
|
|
17753
17900
|
display: "df",
|
|
17754
17901
|
flexDirection: "fdrr",
|
|
17755
17902
|
paddingTop: "pt3",
|
|
@@ -17763,10 +17910,10 @@ function Modal(props) {
|
|
|
17763
17910
|
borderColor: "bcGray200"
|
|
17764
17911
|
} : {}
|
|
17765
17912
|
}), children: [
|
|
17766
|
-
/* @__PURE__ */ (0,
|
|
17767
|
-
/* @__PURE__ */ (0,
|
|
17913
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "fs0 pl1", children: allowClosing && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) }),
|
|
17914
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("h1", { className: "fg1 fw6 fz_30px lh_36px gray900", ref: modalHeaderRef, ...titleProps, ...testId.title })
|
|
17768
17915
|
] }),
|
|
17769
|
-
/* @__PURE__ */ (0,
|
|
17916
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("main", { ref: modalBodyRef, ...(0, import_runtime61.trussProps)({
|
|
17770
17917
|
flexGrow: "fg1",
|
|
17771
17918
|
overflowY: "oya",
|
|
17772
17919
|
...hasScroll ? {
|
|
@@ -17778,7 +17925,7 @@ function Modal(props) {
|
|
|
17778
17925
|
overflowY: "oys"
|
|
17779
17926
|
} : {}
|
|
17780
17927
|
}), children: content }),
|
|
17781
|
-
/* @__PURE__ */ (0,
|
|
17928
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("footer", { className: "fs0", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ref: modalFooterRef }) })
|
|
17782
17929
|
] }) }) }) }) }) });
|
|
17783
17930
|
}
|
|
17784
17931
|
function ModalHeader({
|
|
@@ -17787,7 +17934,7 @@ function ModalHeader({
|
|
|
17787
17934
|
const {
|
|
17788
17935
|
modalHeaderDiv
|
|
17789
17936
|
} = useBeamContext();
|
|
17790
|
-
return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0,
|
|
17937
|
+
return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_jsx_runtime95.Fragment, { children }), modalHeaderDiv);
|
|
17791
17938
|
}
|
|
17792
17939
|
function ModalBody({
|
|
17793
17940
|
children,
|
|
@@ -17799,7 +17946,7 @@ function ModalBody({
|
|
|
17799
17946
|
const testId = useTestIds({}, testIdPrefix);
|
|
17800
17947
|
return (0, import_react_dom3.createPortal)(
|
|
17801
17948
|
// If `virtualized`, then we are expecting the `children` will handle their own scrollbar, so have the overflow hidden and adjust padding
|
|
17802
|
-
/* @__PURE__ */ (0,
|
|
17949
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime61.trussProps)({
|
|
17803
17950
|
height: "h100",
|
|
17804
17951
|
...virtualized ? {
|
|
17805
17952
|
overflow: "oh",
|
|
@@ -17820,7 +17967,7 @@ function ModalFooter({
|
|
|
17820
17967
|
modalFooterDiv
|
|
17821
17968
|
} = useBeamContext();
|
|
17822
17969
|
const testId = useTestIds({}, testIdPrefix);
|
|
17823
|
-
return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0,
|
|
17970
|
+
return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ...(0, import_runtime61.trussProps)({
|
|
17824
17971
|
...{
|
|
17825
17972
|
paddingTop: "pt3",
|
|
17826
17973
|
paddingBottom: "pb3",
|
|
@@ -17852,11 +17999,11 @@ function getSize(size) {
|
|
|
17852
17999
|
}
|
|
17853
18000
|
|
|
17854
18001
|
// src/components/Snackbar/SnackbarContext.tsx
|
|
17855
|
-
var
|
|
18002
|
+
var import_react89 = require("react");
|
|
17856
18003
|
|
|
17857
18004
|
// src/components/Snackbar/SnackbarNotice.tsx
|
|
17858
|
-
var
|
|
17859
|
-
var
|
|
18005
|
+
var import_runtime62 = require("@homebound/truss/runtime");
|
|
18006
|
+
var import_jsx_runtime96 = require("react/jsx-runtime");
|
|
17860
18007
|
function SnackbarNotice(props) {
|
|
17861
18008
|
const {
|
|
17862
18009
|
icon,
|
|
@@ -17868,12 +18015,12 @@ function SnackbarNotice(props) {
|
|
|
17868
18015
|
} = props;
|
|
17869
18016
|
const tid = useTestIds(props, "snackbar");
|
|
17870
18017
|
const reallyHideClose = hideCloseButton && !persistent;
|
|
17871
|
-
return /* @__PURE__ */ (0,
|
|
17872
|
-
icon && /* @__PURE__ */ (0,
|
|
17873
|
-
/* @__PURE__ */ (0,
|
|
18018
|
+
return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "white bgGray800 br4 fw4 fz_16px lh_24px df aic maxw_420px", "data-theme": contrastDataTheme, ...tid, role: "alert", children: [
|
|
18019
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "fs0 pl_12px", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Icon, { ...typeToIcon2[icon], ...tid.icon }) }),
|
|
18020
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
17874
18021
|
"span",
|
|
17875
18022
|
{
|
|
17876
|
-
...(0,
|
|
18023
|
+
...(0, import_runtime62.trussProps)({
|
|
17877
18024
|
overflow: "oh",
|
|
17878
18025
|
display: "d_negwebkit_box",
|
|
17879
18026
|
WebkitBoxOrient: "wbo_vertical",
|
|
@@ -17893,8 +18040,8 @@ function SnackbarNotice(props) {
|
|
|
17893
18040
|
children: message
|
|
17894
18041
|
}
|
|
17895
18042
|
),
|
|
17896
|
-
(action || !reallyHideClose) && /* @__PURE__ */ (0,
|
|
17897
|
-
action && /* @__PURE__ */ (0,
|
|
18043
|
+
(action || !reallyHideClose) && /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("span", { className: "fs0 df aic", children: [
|
|
18044
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { ...(0, import_runtime62.trussProps)({
|
|
17898
18045
|
textTransform: "ttu",
|
|
17899
18046
|
fontWeight: "fw4",
|
|
17900
18047
|
fontSize: "fz_14px",
|
|
@@ -17902,8 +18049,8 @@ function SnackbarNotice(props) {
|
|
|
17902
18049
|
paddingRight: ["pr_var", {
|
|
17903
18050
|
"--paddingRight": `${!reallyHideClose && action.variant !== "text" ? 4 : 8}px`
|
|
17904
18051
|
}]
|
|
17905
|
-
}), children: /* @__PURE__ */ (0,
|
|
17906
|
-
!reallyHideClose && /* @__PURE__ */ (0,
|
|
18052
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Button, { ...action, ...tid.action }) }),
|
|
18053
|
+
!reallyHideClose && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "pr1 lineHeight_0", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(IconButton, { icon: "x", onClick: onClose, ...tid.close }) })
|
|
17907
18054
|
] })
|
|
17908
18055
|
] });
|
|
17909
18056
|
}
|
|
@@ -17932,17 +18079,17 @@ var typeToIcon2 = {
|
|
|
17932
18079
|
};
|
|
17933
18080
|
|
|
17934
18081
|
// src/components/Snackbar/Snackbar.tsx
|
|
17935
|
-
var
|
|
17936
|
-
var
|
|
18082
|
+
var import_runtime63 = require("@homebound/truss/runtime");
|
|
18083
|
+
var import_jsx_runtime97 = require("react/jsx-runtime");
|
|
17937
18084
|
function Snackbar({
|
|
17938
18085
|
notices,
|
|
17939
18086
|
offset
|
|
17940
18087
|
}) {
|
|
17941
18088
|
const tid = useTestIds({});
|
|
17942
|
-
return /* @__PURE__ */ (0,
|
|
18089
|
+
return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { ...tid.snackbarWrapper, ...(0, import_runtime63.trussProps)({
|
|
17943
18090
|
position: "fixed",
|
|
17944
18091
|
zIndex: ["z_var", {
|
|
17945
|
-
"--zIndex": (0,
|
|
18092
|
+
"--zIndex": (0, import_runtime63.maybeCssVar)(zIndices.snackbar)
|
|
17946
18093
|
}],
|
|
17947
18094
|
bottom: ["bottom_var", {
|
|
17948
18095
|
"--bottom": `${offset.bottom ?? defaultOffset.bottom}px`
|
|
@@ -17952,33 +18099,33 @@ function Snackbar({
|
|
|
17952
18099
|
flexDirection: "fdc",
|
|
17953
18100
|
alignItems: "aifs",
|
|
17954
18101
|
gap: "gap_12px"
|
|
17955
|
-
}), children: notices.map((data) => /* @__PURE__ */ (0,
|
|
18102
|
+
}), children: notices.map((data) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(SnackbarNotice, { ...data }, data.id)) });
|
|
17956
18103
|
}
|
|
17957
18104
|
var defaultOffset = {
|
|
17958
18105
|
bottom: 24
|
|
17959
18106
|
};
|
|
17960
18107
|
|
|
17961
18108
|
// src/components/Snackbar/SnackbarContext.tsx
|
|
17962
|
-
var
|
|
17963
|
-
var SnackbarContext = (0,
|
|
18109
|
+
var import_jsx_runtime98 = require("react/jsx-runtime");
|
|
18110
|
+
var SnackbarContext = (0, import_react89.createContext)({ setNotices: () => {
|
|
17964
18111
|
}, setOffset: () => {
|
|
17965
18112
|
} });
|
|
17966
18113
|
function SnackbarProvider(props) {
|
|
17967
|
-
const [notices, setNotices] = (0,
|
|
17968
|
-
const [offset, setOffset] = (0,
|
|
17969
|
-
const contextValue = (0,
|
|
17970
|
-
return /* @__PURE__ */ (0,
|
|
18114
|
+
const [notices, setNotices] = (0, import_react89.useState)([]);
|
|
18115
|
+
const [offset, setOffset] = (0, import_react89.useState)({});
|
|
18116
|
+
const contextValue = (0, import_react89.useMemo)(() => ({ setNotices, setOffset }), []);
|
|
18117
|
+
return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(SnackbarContext.Provider, { value: contextValue, children: [
|
|
17971
18118
|
props.children,
|
|
17972
|
-
/* @__PURE__ */ (0,
|
|
18119
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Snackbar, { notices, offset })
|
|
17973
18120
|
] });
|
|
17974
18121
|
}
|
|
17975
18122
|
function useSnackbarContext() {
|
|
17976
|
-
return (0,
|
|
18123
|
+
return (0, import_react89.useContext)(SnackbarContext);
|
|
17977
18124
|
}
|
|
17978
18125
|
|
|
17979
18126
|
// src/components/SuperDrawer/SuperDrawer.tsx
|
|
17980
18127
|
var import_framer_motion = require("framer-motion");
|
|
17981
|
-
var
|
|
18128
|
+
var import_react90 = require("react");
|
|
17982
18129
|
var import_react_dom4 = require("react-dom");
|
|
17983
18130
|
|
|
17984
18131
|
// src/components/SuperDrawer/utils.ts
|
|
@@ -17989,9 +18136,9 @@ var SuperDrawerWidth = /* @__PURE__ */ ((SuperDrawerWidth2) => {
|
|
|
17989
18136
|
})(SuperDrawerWidth || {});
|
|
17990
18137
|
|
|
17991
18138
|
// src/components/SuperDrawer/SuperDrawer.tsx
|
|
17992
|
-
var
|
|
17993
|
-
var
|
|
17994
|
-
var
|
|
18139
|
+
var import_runtime64 = require("@homebound/truss/runtime");
|
|
18140
|
+
var import_jsx_runtime99 = require("react/jsx-runtime");
|
|
18141
|
+
var import_react91 = require("react");
|
|
17995
18142
|
function SuperDrawer() {
|
|
17996
18143
|
const {
|
|
17997
18144
|
drawerContentStack: contentStack,
|
|
@@ -18000,7 +18147,7 @@ function SuperDrawer() {
|
|
|
18000
18147
|
const {
|
|
18001
18148
|
closeDrawer
|
|
18002
18149
|
} = useSuperDrawer();
|
|
18003
|
-
const headerRef = (0,
|
|
18150
|
+
const headerRef = (0, import_react90.useRef)(null);
|
|
18004
18151
|
const testId = useTestIds({}, "superDrawer");
|
|
18005
18152
|
const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
|
|
18006
18153
|
const {
|
|
@@ -18010,7 +18157,7 @@ function SuperDrawer() {
|
|
|
18010
18157
|
const {
|
|
18011
18158
|
width: width2 = 1040 /* Normal */
|
|
18012
18159
|
} = firstContent ?? {};
|
|
18013
|
-
(0,
|
|
18160
|
+
(0, import_react90.useEffect)(() => {
|
|
18014
18161
|
if (content) {
|
|
18015
18162
|
document.body.style.overflow = "hidden";
|
|
18016
18163
|
return () => {
|
|
@@ -18018,7 +18165,7 @@ function SuperDrawer() {
|
|
|
18018
18165
|
};
|
|
18019
18166
|
}
|
|
18020
18167
|
}, [content]);
|
|
18021
|
-
(0,
|
|
18168
|
+
(0, import_react90.useEffect)(
|
|
18022
18169
|
() => {
|
|
18023
18170
|
if (headerRef.current?.childNodes.length === 0 && content) {
|
|
18024
18171
|
headerRef.current.appendChild(sdHeaderDiv);
|
|
@@ -18028,12 +18175,12 @@ function SuperDrawer() {
|
|
|
18028
18175
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
18029
18176
|
[headerRef, content]
|
|
18030
18177
|
);
|
|
18031
|
-
return (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0,
|
|
18178
|
+
return (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_framer_motion.AnimatePresence, { children: content && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_jsx_runtime99.Fragment, { children: /* @__PURE__ */ (0, import_react91.createElement)(
|
|
18032
18179
|
import_framer_motion.motion.div,
|
|
18033
18180
|
{
|
|
18034
18181
|
...testId,
|
|
18035
18182
|
key: "superDrawer",
|
|
18036
|
-
...(0,
|
|
18183
|
+
...(0, import_runtime64.trussProps)({
|
|
18037
18184
|
position: "fixed",
|
|
18038
18185
|
display: "df",
|
|
18039
18186
|
justifyContent: "jcfe",
|
|
@@ -18043,7 +18190,7 @@ function SuperDrawer() {
|
|
|
18043
18190
|
bottom: "bottom0",
|
|
18044
18191
|
left: "left0",
|
|
18045
18192
|
zIndex: ["z_var", {
|
|
18046
|
-
"--zIndex": (0,
|
|
18193
|
+
"--zIndex": (0, import_runtime64.maybeCssVar)(zIndices.superDrawerScrim)
|
|
18047
18194
|
}]
|
|
18048
18195
|
}),
|
|
18049
18196
|
initial: {
|
|
@@ -18060,14 +18207,14 @@ function SuperDrawer() {
|
|
|
18060
18207
|
},
|
|
18061
18208
|
onClick: closeDrawer
|
|
18062
18209
|
},
|
|
18063
|
-
/* @__PURE__ */ (0,
|
|
18210
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
|
|
18064
18211
|
import_framer_motion.motion.aside,
|
|
18065
18212
|
{
|
|
18066
|
-
...(0,
|
|
18213
|
+
...(0, import_runtime64.trussProps)({
|
|
18067
18214
|
backgroundColor: "bgWhite",
|
|
18068
18215
|
height: "h100",
|
|
18069
18216
|
maxWidth: ["maxw_var", {
|
|
18070
|
-
"--maxWidth": (0,
|
|
18217
|
+
"--maxWidth": (0, import_runtime64.maybeCssVar)(px(width2))
|
|
18071
18218
|
}],
|
|
18072
18219
|
width: "w100",
|
|
18073
18220
|
display: "df",
|
|
@@ -18093,10 +18240,10 @@ function SuperDrawer() {
|
|
|
18093
18240
|
x: width2
|
|
18094
18241
|
},
|
|
18095
18242
|
onClick: (e) => e.stopPropagation(),
|
|
18096
|
-
children: /* @__PURE__ */ (0,
|
|
18097
|
-
/* @__PURE__ */ (0,
|
|
18098
|
-
/* @__PURE__ */ (0,
|
|
18099
|
-
/* @__PURE__ */ (0,
|
|
18243
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(AutoSaveStatusProvider, { children: [
|
|
18244
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("header", { className: "pt3 pb3 pr3 pl3 bbs_solid bbw_1px bcGray200 df aic jcsb gap3", children: [
|
|
18245
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { ref: headerRef, className: "gray900 fg1" }),
|
|
18246
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)(IconButton, { icon: "x", onClick: closeDrawer, ...testId.close })
|
|
18100
18247
|
] }),
|
|
18101
18248
|
content
|
|
18102
18249
|
] })
|
|
@@ -18120,7 +18267,7 @@ function defaultLabel(id) {
|
|
|
18120
18267
|
}
|
|
18121
18268
|
|
|
18122
18269
|
// src/forms/BoundCheckboxField.tsx
|
|
18123
|
-
var
|
|
18270
|
+
var import_jsx_runtime100 = require("react/jsx-runtime");
|
|
18124
18271
|
function BoundCheckboxField(props) {
|
|
18125
18272
|
const {
|
|
18126
18273
|
field,
|
|
@@ -18132,7 +18279,7 @@ function BoundCheckboxField(props) {
|
|
|
18132
18279
|
...others
|
|
18133
18280
|
} = props;
|
|
18134
18281
|
const testId = useTestIds(props, field.key);
|
|
18135
|
-
return /* @__PURE__ */ (0,
|
|
18282
|
+
return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_mobx_react2.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
|
|
18136
18283
|
Checkbox,
|
|
18137
18284
|
{
|
|
18138
18285
|
label,
|
|
@@ -18159,7 +18306,7 @@ function BoundCheckboxField(props) {
|
|
|
18159
18306
|
|
|
18160
18307
|
// src/forms/BoundCheckboxGroupField.tsx
|
|
18161
18308
|
var import_mobx_react3 = require("mobx-react");
|
|
18162
|
-
var
|
|
18309
|
+
var import_jsx_runtime101 = require("react/jsx-runtime");
|
|
18163
18310
|
function BoundCheckboxGroupField(props) {
|
|
18164
18311
|
const {
|
|
18165
18312
|
field,
|
|
@@ -18170,7 +18317,7 @@ function BoundCheckboxGroupField(props) {
|
|
|
18170
18317
|
...others
|
|
18171
18318
|
} = props;
|
|
18172
18319
|
const testId = useTestIds(props, field.key);
|
|
18173
|
-
return /* @__PURE__ */ (0,
|
|
18320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(import_mobx_react3.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
|
|
18174
18321
|
CheckboxGroup,
|
|
18175
18322
|
{
|
|
18176
18323
|
label,
|
|
@@ -18197,7 +18344,7 @@ function BoundCheckboxGroupField(props) {
|
|
|
18197
18344
|
|
|
18198
18345
|
// src/forms/BoundChipSelectField.tsx
|
|
18199
18346
|
var import_mobx_react4 = require("mobx-react");
|
|
18200
|
-
var
|
|
18347
|
+
var import_jsx_runtime102 = require("react/jsx-runtime");
|
|
18201
18348
|
function BoundChipSelectField(props) {
|
|
18202
18349
|
const {
|
|
18203
18350
|
field,
|
|
@@ -18213,7 +18360,7 @@ function BoundChipSelectField(props) {
|
|
|
18213
18360
|
...others
|
|
18214
18361
|
} = props;
|
|
18215
18362
|
const testId = useTestIds(props, field.key);
|
|
18216
|
-
return /* @__PURE__ */ (0,
|
|
18363
|
+
return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_mobx_react4.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
|
|
18217
18364
|
ChipSelectField,
|
|
18218
18365
|
{
|
|
18219
18366
|
label,
|
|
@@ -18244,7 +18391,7 @@ function BoundChipSelectField(props) {
|
|
|
18244
18391
|
|
|
18245
18392
|
// src/forms/BoundDateField.tsx
|
|
18246
18393
|
var import_mobx_react5 = require("mobx-react");
|
|
18247
|
-
var
|
|
18394
|
+
var import_jsx_runtime103 = require("react/jsx-runtime");
|
|
18248
18395
|
function BoundDateField(props) {
|
|
18249
18396
|
const {
|
|
18250
18397
|
field,
|
|
@@ -18257,7 +18404,7 @@ function BoundDateField(props) {
|
|
|
18257
18404
|
...others
|
|
18258
18405
|
} = props;
|
|
18259
18406
|
const testId = useTestIds(props, field.key);
|
|
18260
|
-
return /* @__PURE__ */ (0,
|
|
18407
|
+
return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_mobx_react5.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
|
|
18261
18408
|
DateField,
|
|
18262
18409
|
{
|
|
18263
18410
|
label,
|
|
@@ -18289,7 +18436,7 @@ function BoundDateField(props) {
|
|
|
18289
18436
|
|
|
18290
18437
|
// src/forms/BoundDateRangeField.tsx
|
|
18291
18438
|
var import_mobx_react6 = require("mobx-react");
|
|
18292
|
-
var
|
|
18439
|
+
var import_jsx_runtime104 = require("react/jsx-runtime");
|
|
18293
18440
|
function BoundDateRangeField(props) {
|
|
18294
18441
|
const {
|
|
18295
18442
|
field,
|
|
@@ -18302,7 +18449,7 @@ function BoundDateRangeField(props) {
|
|
|
18302
18449
|
...others
|
|
18303
18450
|
} = props;
|
|
18304
18451
|
const testId = useTestIds(props, field.key);
|
|
18305
|
-
return /* @__PURE__ */ (0,
|
|
18452
|
+
return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_mobx_react6.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
|
|
18306
18453
|
DateRangeField,
|
|
18307
18454
|
{
|
|
18308
18455
|
label,
|
|
@@ -18335,125 +18482,9 @@ function BoundDateRangeField(props) {
|
|
|
18335
18482
|
// src/forms/BoundForm.tsx
|
|
18336
18483
|
var import_react93 = require("react");
|
|
18337
18484
|
|
|
18338
|
-
// src/forms/
|
|
18485
|
+
// src/forms/BoundListField.tsx
|
|
18339
18486
|
var import_mobx_react7 = require("mobx-react");
|
|
18340
|
-
var import_jsx_runtime104 = require("react/jsx-runtime");
|
|
18341
|
-
function BoundIconCardField(props) {
|
|
18342
|
-
const { icon, field, onChange = (value) => field.set(value), label = defaultLabel(field.key), ...others } = props;
|
|
18343
|
-
const testId = useTestIds(props, field.key);
|
|
18344
|
-
return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_mobx_react7.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
|
|
18345
|
-
IconCard,
|
|
18346
|
-
{
|
|
18347
|
-
icon,
|
|
18348
|
-
label,
|
|
18349
|
-
selected: field.value ?? false,
|
|
18350
|
-
onChange: (selected) => {
|
|
18351
|
-
onChange(selected);
|
|
18352
|
-
field.maybeAutoSave();
|
|
18353
|
-
},
|
|
18354
|
-
disabled: field.readOnly,
|
|
18355
|
-
...testId,
|
|
18356
|
-
...others
|
|
18357
|
-
}
|
|
18358
|
-
) });
|
|
18359
|
-
}
|
|
18360
|
-
|
|
18361
|
-
// src/forms/BoundIconCardGroupField.tsx
|
|
18362
|
-
var import_mobx_react8 = require("mobx-react");
|
|
18363
|
-
|
|
18364
|
-
// src/inputs/IconCardGroup.tsx
|
|
18365
|
-
var import_react91 = require("react");
|
|
18366
|
-
var import_react_aria43 = require("react-aria");
|
|
18367
|
-
var import_runtime64 = require("@homebound/truss/runtime");
|
|
18368
18487
|
var import_jsx_runtime105 = require("react/jsx-runtime");
|
|
18369
|
-
function IconCardGroup(props) {
|
|
18370
|
-
const {
|
|
18371
|
-
fieldProps
|
|
18372
|
-
} = usePresentationContext();
|
|
18373
|
-
const {
|
|
18374
|
-
options,
|
|
18375
|
-
label,
|
|
18376
|
-
labelStyle = fieldProps?.labelStyle ?? "above",
|
|
18377
|
-
values,
|
|
18378
|
-
errorMsg,
|
|
18379
|
-
helperText,
|
|
18380
|
-
disabled: isDisabled = false,
|
|
18381
|
-
onChange
|
|
18382
|
-
} = props;
|
|
18383
|
-
const [selected, setSelected] = (0, import_react91.useState)(values);
|
|
18384
|
-
const exclusiveOptions = (0, import_react91.useMemo)(() => options.filter((o) => o.exclusive), [options]);
|
|
18385
|
-
const toggleValue = (0, import_react91.useCallback)((value) => {
|
|
18386
|
-
if (isDisabled) return;
|
|
18387
|
-
const option = options.find((o) => o.value === value);
|
|
18388
|
-
if (!option) return;
|
|
18389
|
-
let newSelected = [];
|
|
18390
|
-
if (selected.includes(value)) {
|
|
18391
|
-
newSelected = selected.filter((v) => v !== value);
|
|
18392
|
-
} else {
|
|
18393
|
-
if (option.exclusive) {
|
|
18394
|
-
newSelected = [value];
|
|
18395
|
-
} else {
|
|
18396
|
-
newSelected = [...selected, value];
|
|
18397
|
-
newSelected = newSelected.filter((v) => !exclusiveOptions.some((o) => o.value === v));
|
|
18398
|
-
}
|
|
18399
|
-
}
|
|
18400
|
-
setSelected(newSelected);
|
|
18401
|
-
onChange(newSelected);
|
|
18402
|
-
}, [exclusiveOptions, isDisabled, onChange, options, selected]);
|
|
18403
|
-
const tid = useTestIds(props);
|
|
18404
|
-
const {
|
|
18405
|
-
labelProps,
|
|
18406
|
-
fieldProps: fieldPropsAria
|
|
18407
|
-
} = (0, import_react_aria43.useField)(props);
|
|
18408
|
-
const groupProps = (0, import_react_aria43.mergeProps)(tid, {
|
|
18409
|
-
role: "group",
|
|
18410
|
-
"aria-disabled": isDisabled || void 0,
|
|
18411
|
-
...fieldPropsAria
|
|
18412
|
-
});
|
|
18413
|
-
return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { ...groupProps, children: [
|
|
18414
|
-
labelStyle !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { ...(0, import_runtime64.trussProps)({
|
|
18415
|
-
...labelStyle === "left" ? {
|
|
18416
|
-
width: "w50"
|
|
18417
|
-
} : {}
|
|
18418
|
-
}), children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Label, { label, ...labelProps, ...tid.label }) }),
|
|
18419
|
-
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { className: "df gap2 flexWrap_wrap", children: options.map((option) => {
|
|
18420
|
-
const {
|
|
18421
|
-
icon,
|
|
18422
|
-
label: label2,
|
|
18423
|
-
disabled
|
|
18424
|
-
} = option;
|
|
18425
|
-
const isSelected = selected.includes(option.value);
|
|
18426
|
-
return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(IconCard, { icon, label: label2, selected: isSelected, disabled, onChange: () => toggleValue(option.value), ...tid[option.label] }, option.label);
|
|
18427
|
-
}) }),
|
|
18428
|
-
errorMsg && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ErrorMessage, { errorMsg, ...tid.errorMsg }),
|
|
18429
|
-
helperText && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(HelperText, { helperText, ...tid.helperText })
|
|
18430
|
-
] });
|
|
18431
|
-
}
|
|
18432
|
-
|
|
18433
|
-
// src/forms/BoundIconCardGroupField.tsx
|
|
18434
|
-
var import_jsx_runtime106 = require("react/jsx-runtime");
|
|
18435
|
-
function BoundIconCardGroupField(props) {
|
|
18436
|
-
const { field, onChange = (value) => field.set(value), label = defaultLabel(field.key), ...others } = props;
|
|
18437
|
-
const testId = useTestIds(props, field.key);
|
|
18438
|
-
return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_mobx_react8.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
|
|
18439
|
-
IconCardGroup,
|
|
18440
|
-
{
|
|
18441
|
-
label,
|
|
18442
|
-
values: field.value || [],
|
|
18443
|
-
onChange: (values) => {
|
|
18444
|
-
onChange(values);
|
|
18445
|
-
field.maybeAutoSave();
|
|
18446
|
-
},
|
|
18447
|
-
disabled: field.readOnly,
|
|
18448
|
-
...testId,
|
|
18449
|
-
...others
|
|
18450
|
-
}
|
|
18451
|
-
) });
|
|
18452
|
-
}
|
|
18453
|
-
|
|
18454
|
-
// src/forms/BoundListField.tsx
|
|
18455
|
-
var import_mobx_react9 = require("mobx-react");
|
|
18456
|
-
var import_jsx_runtime107 = require("react/jsx-runtime");
|
|
18457
18488
|
function ListField({
|
|
18458
18489
|
row,
|
|
18459
18490
|
formState
|
|
@@ -18470,9 +18501,9 @@ function ListField({
|
|
|
18470
18501
|
const tid = useTestIds({}, "listField");
|
|
18471
18502
|
const filteredRows = useComputed(() => filterDeleted ? listFieldObjectState.rows.filter((rowState) => filterDeleted(rowState)) : listFieldObjectState.rows, [filterDeleted]);
|
|
18472
18503
|
const listIsValid = useComputed(() => listFieldObjectState.valid, [filteredRows]);
|
|
18473
|
-
return /* @__PURE__ */ (0,
|
|
18474
|
-
filteredRows.map((rowState, index) => /* @__PURE__ */ (0,
|
|
18475
|
-
/* @__PURE__ */ (0,
|
|
18504
|
+
return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_mobx_react7.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "df fdc gap3", ...tid, children: [
|
|
18505
|
+
filteredRows.map((rowState, index) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ListFieldRowInputs, { rowState, rowNumber: index + 1, listFieldConfig, formState, listFieldKey }, `listFieldRowInputs-${listFieldKey}-${index}`)),
|
|
18506
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Button, { icon: "plus", label: `Add ${listFieldConfig.name}`, onClick: () => onNew(listFieldObjectState), variant: "secondary", disabled: !listIsValid }) })
|
|
18476
18507
|
] }) });
|
|
18477
18508
|
}
|
|
18478
18509
|
function ListFieldRowInputs({
|
|
@@ -18486,21 +18517,21 @@ function ListFieldRowInputs({
|
|
|
18486
18517
|
onDelete
|
|
18487
18518
|
} = listFieldConfig;
|
|
18488
18519
|
const tid = useTestIds({}, "listFieldRow");
|
|
18489
|
-
return /* @__PURE__ */ (0,
|
|
18490
|
-
/* @__PURE__ */ (0,
|
|
18491
|
-
/* @__PURE__ */ (0,
|
|
18520
|
+
return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(import_jsx_runtime105.Fragment, { children: [
|
|
18521
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "df jcsb", ...tid, children: [
|
|
18522
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("span", { className: "fw6 fz_16px lh_24px", ...tid.name, children: [
|
|
18492
18523
|
listFieldConfig.name,
|
|
18493
18524
|
" ",
|
|
18494
18525
|
rowNumber
|
|
18495
18526
|
] }),
|
|
18496
|
-
onDelete && /* @__PURE__ */ (0,
|
|
18527
|
+
onDelete && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ButtonMenu, { trigger: {
|
|
18497
18528
|
icon: "verticalDots"
|
|
18498
18529
|
}, items: [{
|
|
18499
18530
|
label: "Delete",
|
|
18500
18531
|
onClick: () => onDelete(formState[listFieldKey], rowState)
|
|
18501
18532
|
}], ...tid.menu })
|
|
18502
18533
|
] }),
|
|
18503
|
-
listFieldConfig.rows.map((row, rowIndex) => /* @__PURE__ */ (0,
|
|
18534
|
+
listFieldConfig.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(FormRow, { row, formState: rowState }, `listField-${listFieldKey}-row-${rowIndex}`))
|
|
18504
18535
|
] });
|
|
18505
18536
|
}
|
|
18506
18537
|
function isListFieldKey(key) {
|
|
@@ -18517,8 +18548,8 @@ function isListFieldRow(row) {
|
|
|
18517
18548
|
}
|
|
18518
18549
|
|
|
18519
18550
|
// src/forms/BoundMultiLineSelectField.tsx
|
|
18520
|
-
var
|
|
18521
|
-
var
|
|
18551
|
+
var import_mobx_react8 = require("mobx-react");
|
|
18552
|
+
var import_jsx_runtime106 = require("react/jsx-runtime");
|
|
18522
18553
|
function BoundMultiLineSelectField(props) {
|
|
18523
18554
|
const {
|
|
18524
18555
|
field,
|
|
@@ -18535,7 +18566,7 @@ function BoundMultiLineSelectField(props) {
|
|
|
18535
18566
|
...others
|
|
18536
18567
|
} = props;
|
|
18537
18568
|
const testId = useTestIds(props, field.key);
|
|
18538
|
-
return /* @__PURE__ */ (0,
|
|
18569
|
+
return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_mobx_react8.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
|
|
18539
18570
|
MultiLineSelectField,
|
|
18540
18571
|
{
|
|
18541
18572
|
label,
|
|
@@ -18565,8 +18596,8 @@ function BoundMultiLineSelectField(props) {
|
|
|
18565
18596
|
}
|
|
18566
18597
|
|
|
18567
18598
|
// src/forms/BoundMultiSelectField.tsx
|
|
18568
|
-
var
|
|
18569
|
-
var
|
|
18599
|
+
var import_mobx_react9 = require("mobx-react");
|
|
18600
|
+
var import_jsx_runtime107 = require("react/jsx-runtime");
|
|
18570
18601
|
function BoundMultiSelectField(props) {
|
|
18571
18602
|
const {
|
|
18572
18603
|
field,
|
|
@@ -18583,7 +18614,7 @@ function BoundMultiSelectField(props) {
|
|
|
18583
18614
|
...others
|
|
18584
18615
|
} = props;
|
|
18585
18616
|
const testId = useTestIds(props, field.key);
|
|
18586
|
-
return /* @__PURE__ */ (0,
|
|
18617
|
+
return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_mobx_react9.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
|
|
18587
18618
|
MultiSelectField,
|
|
18588
18619
|
{
|
|
18589
18620
|
label,
|
|
@@ -18613,8 +18644,8 @@ function BoundMultiSelectField(props) {
|
|
|
18613
18644
|
}
|
|
18614
18645
|
|
|
18615
18646
|
// src/forms/BoundNumberField.tsx
|
|
18616
|
-
var
|
|
18617
|
-
var
|
|
18647
|
+
var import_mobx_react10 = require("mobx-react");
|
|
18648
|
+
var import_jsx_runtime108 = require("react/jsx-runtime");
|
|
18618
18649
|
function BoundNumberField(props) {
|
|
18619
18650
|
const {
|
|
18620
18651
|
field,
|
|
@@ -18628,7 +18659,7 @@ function BoundNumberField(props) {
|
|
|
18628
18659
|
...others
|
|
18629
18660
|
} = props;
|
|
18630
18661
|
const testId = useTestIds(props, label || field.key);
|
|
18631
|
-
return /* @__PURE__ */ (0,
|
|
18662
|
+
return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_mobx_react10.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
|
|
18632
18663
|
NumberField,
|
|
18633
18664
|
{
|
|
18634
18665
|
label,
|
|
@@ -18657,8 +18688,8 @@ function BoundNumberField(props) {
|
|
|
18657
18688
|
}
|
|
18658
18689
|
|
|
18659
18690
|
// src/forms/BoundRadioGroupField.tsx
|
|
18660
|
-
var
|
|
18661
|
-
var
|
|
18691
|
+
var import_mobx_react11 = require("mobx-react");
|
|
18692
|
+
var import_jsx_runtime109 = require("react/jsx-runtime");
|
|
18662
18693
|
function BoundRadioGroupField(props) {
|
|
18663
18694
|
const {
|
|
18664
18695
|
field,
|
|
@@ -18669,7 +18700,7 @@ function BoundRadioGroupField(props) {
|
|
|
18669
18700
|
...others
|
|
18670
18701
|
} = props;
|
|
18671
18702
|
const testId = useTestIds(props, field.key);
|
|
18672
|
-
return /* @__PURE__ */ (0,
|
|
18703
|
+
return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_mobx_react11.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
|
|
18673
18704
|
RadioGroupField,
|
|
18674
18705
|
{
|
|
18675
18706
|
label,
|
|
@@ -18695,8 +18726,8 @@ function BoundRadioGroupField(props) {
|
|
|
18695
18726
|
}
|
|
18696
18727
|
|
|
18697
18728
|
// src/forms/BoundRichTextField.tsx
|
|
18698
|
-
var
|
|
18699
|
-
var
|
|
18729
|
+
var import_mobx_react12 = require("mobx-react");
|
|
18730
|
+
var import_jsx_runtime110 = require("react/jsx-runtime");
|
|
18700
18731
|
function BoundRichTextField(props) {
|
|
18701
18732
|
const {
|
|
18702
18733
|
field,
|
|
@@ -18708,7 +18739,7 @@ function BoundRichTextField(props) {
|
|
|
18708
18739
|
...others
|
|
18709
18740
|
} = props;
|
|
18710
18741
|
const testId = useTestIds(props, field.key);
|
|
18711
|
-
return /* @__PURE__ */ (0,
|
|
18742
|
+
return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_mobx_react12.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
|
|
18712
18743
|
RichTextField,
|
|
18713
18744
|
{
|
|
18714
18745
|
label,
|
|
@@ -18729,6 +18760,51 @@ function BoundRichTextField(props) {
|
|
|
18729
18760
|
) });
|
|
18730
18761
|
}
|
|
18731
18762
|
|
|
18763
|
+
// src/forms/BoundSelectCardField.tsx
|
|
18764
|
+
var import_mobx_react13 = require("mobx-react");
|
|
18765
|
+
var import_jsx_runtime111 = require("react/jsx-runtime");
|
|
18766
|
+
function BoundSelectCardField(props) {
|
|
18767
|
+
const { icon, field, onChange = (value) => field.set(value), label = defaultLabel(field.key), ...others } = props;
|
|
18768
|
+
const testId = useTestIds(props, field.key);
|
|
18769
|
+
return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_mobx_react13.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
|
|
18770
|
+
SelectCard,
|
|
18771
|
+
{
|
|
18772
|
+
icon,
|
|
18773
|
+
label,
|
|
18774
|
+
selected: field.value ?? false,
|
|
18775
|
+
onChange: (selected) => {
|
|
18776
|
+
onChange(selected);
|
|
18777
|
+
field.maybeAutoSave();
|
|
18778
|
+
},
|
|
18779
|
+
disabled: field.readOnly,
|
|
18780
|
+
...testId,
|
|
18781
|
+
...others
|
|
18782
|
+
}
|
|
18783
|
+
) });
|
|
18784
|
+
}
|
|
18785
|
+
|
|
18786
|
+
// src/forms/BoundSelectCardGroupField.tsx
|
|
18787
|
+
var import_mobx_react14 = require("mobx-react");
|
|
18788
|
+
var import_jsx_runtime112 = require("react/jsx-runtime");
|
|
18789
|
+
function BoundSelectCardGroupField(props) {
|
|
18790
|
+
const { field, onChange = (value) => field.set(value), label = defaultLabel(field.key), ...others } = props;
|
|
18791
|
+
const testId = useTestIds(props, field.key);
|
|
18792
|
+
return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_mobx_react14.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
|
|
18793
|
+
SelectCardGroup,
|
|
18794
|
+
{
|
|
18795
|
+
label,
|
|
18796
|
+
values: field.value || [],
|
|
18797
|
+
onChange: (values) => {
|
|
18798
|
+
onChange(values);
|
|
18799
|
+
field.maybeAutoSave();
|
|
18800
|
+
},
|
|
18801
|
+
disabled: field.readOnly,
|
|
18802
|
+
...testId,
|
|
18803
|
+
...others
|
|
18804
|
+
}
|
|
18805
|
+
) });
|
|
18806
|
+
}
|
|
18807
|
+
|
|
18732
18808
|
// src/forms/BoundSelectField.tsx
|
|
18733
18809
|
var import_mobx_react15 = require("mobx-react");
|
|
18734
18810
|
var import_jsx_runtime113 = require("react/jsx-runtime");
|
|
@@ -19174,15 +19250,15 @@ function boundCheckboxGroupField(props) {
|
|
|
19174
19250
|
minWidth: "200px"
|
|
19175
19251
|
});
|
|
19176
19252
|
}
|
|
19177
|
-
function
|
|
19253
|
+
function boundSelectCardField(props) {
|
|
19178
19254
|
return (field) => ({
|
|
19179
|
-
component: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
|
|
19255
|
+
component: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(BoundSelectCardField, { field, ...props }),
|
|
19180
19256
|
minWidth: "150px"
|
|
19181
19257
|
});
|
|
19182
19258
|
}
|
|
19183
|
-
function
|
|
19259
|
+
function boundSelectCardGroupField(props) {
|
|
19184
19260
|
return (field) => ({
|
|
19185
|
-
component: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
|
|
19261
|
+
component: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(BoundSelectCardGroupField, { field, ...props }),
|
|
19186
19262
|
minWidth: "100%"
|
|
19187
19263
|
});
|
|
19188
19264
|
}
|
|
@@ -19760,7 +19836,7 @@ var activeStyles = {
|
|
|
19760
19836
|
"--boxShadow": (0, import_runtime72.maybeCssVar)(`inset 3px 0px 0 0px ${"rgba(37, 99, 235, 1)" /* Blue600 */}`)
|
|
19761
19837
|
}]
|
|
19762
19838
|
};
|
|
19763
|
-
var
|
|
19839
|
+
var hoverStyles3 = {
|
|
19764
19840
|
backgroundColor: "bgBlue50",
|
|
19765
19841
|
fontWeight: "fw6",
|
|
19766
19842
|
fontSize: "fz_14px",
|
|
@@ -19828,7 +19904,7 @@ function SectionNavLink(props) {
|
|
|
19828
19904
|
},
|
|
19829
19905
|
...isFocusVisible ? defaultFocusRingStyles : {},
|
|
19830
19906
|
...active ? activeStyles : {},
|
|
19831
|
-
...isPressed ? activeStyles : isHovered ?
|
|
19907
|
+
...isPressed ? activeStyles : isHovered ? hoverStyles3 : {}
|
|
19832
19908
|
}), ...tids.sectionNavLink, children: section.title });
|
|
19833
19909
|
}
|
|
19834
19910
|
function useActiveSection(sectionsWithRefs) {
|
|
@@ -20705,8 +20781,8 @@ function FilterDropdownMenu(props) {
|
|
|
20705
20781
|
opacity: "o0"
|
|
20706
20782
|
} : {}
|
|
20707
20783
|
}), children: searchTextField }),
|
|
20708
|
-
sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(IconButton, { variant: "outline", icon: "search", label: "Search", onClick: () => setSearchIsOpen(!searchIsOpen), active: searchIsOpen, ...testId.searchButton }),
|
|
20709
|
-
sm && hasFilters && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(IconButton, { variant: "outline", icon: "filter", label: "Filter", active: isOpen, onClick: () => setIsOpen(!isOpen), ...testId.button }),
|
|
20784
|
+
sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setSearchIsOpen(!searchIsOpen), active: searchIsOpen, ...testId.searchButton }),
|
|
20785
|
+
sm && hasFilters && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", active: isOpen, onClick: () => setIsOpen(!isOpen), ...testId.button }),
|
|
20710
20786
|
!sm && hasFilters && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)("div", { className: "df aic gap1", children: [
|
|
20711
20787
|
activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(CountBadge, { count: activeFilterCount }),
|
|
20712
20788
|
/* @__PURE__ */ (0, import_jsx_runtime145.jsx)(Icon, { icon: isOpen ? "chevronUp" : "chevronDown" })
|
|
@@ -20795,7 +20871,7 @@ function EditColumnsButton(props) {
|
|
|
20795
20871
|
} = (0, import_react_aria46.useMenuTrigger)({
|
|
20796
20872
|
isDisabled: !!disabled
|
|
20797
20873
|
}, state, buttonRef);
|
|
20798
|
-
const tid = useTestIds(props, "
|
|
20874
|
+
const tid = useTestIds(props, "columns");
|
|
20799
20875
|
const {
|
|
20800
20876
|
sm
|
|
20801
20877
|
} = useBreakpoint();
|
|
@@ -20815,7 +20891,7 @@ function EditColumnsButton(props) {
|
|
|
20815
20891
|
api.setVisibleColumns(columns.filter((column2) => column2.canHide ? ids.includes(column2.id) : true).map((c) => c.id));
|
|
20816
20892
|
}, [columns, api]);
|
|
20817
20893
|
return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(OverlayTrigger, { ...props, trigger: {
|
|
20818
|
-
icon: "
|
|
20894
|
+
icon: "columns",
|
|
20819
20895
|
size: "md",
|
|
20820
20896
|
label: "",
|
|
20821
20897
|
variant: "secondaryBlack"
|
|
@@ -21702,7 +21778,7 @@ function GroupButton(props) {
|
|
|
21702
21778
|
},
|
|
21703
21779
|
...isFocusVisible ? defaultFocusRingStyles2 : {},
|
|
21704
21780
|
...active ? activeStyles2 : {},
|
|
21705
|
-
...isPressed ? pressedStyles : isHovered ?
|
|
21781
|
+
...isPressed ? pressedStyles : isHovered ? hoverStyles4 : {},
|
|
21706
21782
|
...icon ? iconStyles2[size] : {}
|
|
21707
21783
|
}), ...tid[defaultTestId(typeof text === "string" && text || icon || "button")], children: [
|
|
21708
21784
|
icon && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Icon, { xss: {
|
|
@@ -21720,7 +21796,7 @@ var pressedStyles = {
|
|
|
21720
21796
|
var activeStyles2 = {
|
|
21721
21797
|
backgroundColor: "bgGray300"
|
|
21722
21798
|
};
|
|
21723
|
-
var
|
|
21799
|
+
var hoverStyles4 = {
|
|
21724
21800
|
backgroundColor: "bgGray100"
|
|
21725
21801
|
};
|
|
21726
21802
|
var defaultFocusRingStyles2 = {
|
|
@@ -22810,7 +22886,7 @@ function AppNavGroupTrigger(props) {
|
|
|
22810
22886
|
const {
|
|
22811
22887
|
baseStyles: baseStyles5,
|
|
22812
22888
|
focusRingStyles: focusRingStyles2,
|
|
22813
|
-
hoverStyles:
|
|
22889
|
+
hoverStyles: hoverStyles5,
|
|
22814
22890
|
pressedStyles: pressedStyles2
|
|
22815
22891
|
} = (0, import_react127.useMemo)(() => getNavLinkStyles("side"), []);
|
|
22816
22892
|
return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("button", { type: "button", ...(0, import_react_aria53.mergeProps)(buttonProps, focusProps, hoverProps, tid.trigger, {
|
|
@@ -22820,7 +22896,7 @@ function AppNavGroupTrigger(props) {
|
|
|
22820
22896
|
...(0, import_runtime96.mergeProps)(navLink, void 0, {
|
|
22821
22897
|
...baseStyles5,
|
|
22822
22898
|
...isFocusVisible && focusRingStyles2,
|
|
22823
|
-
...isHovered &&
|
|
22899
|
+
...isHovered && hoverStyles5,
|
|
22824
22900
|
...isPressed && pressedStyles2
|
|
22825
22901
|
})
|
|
22826
22902
|
}), children: [
|
|
@@ -23477,7 +23553,7 @@ function TabImpl(props) {
|
|
|
23477
23553
|
baseStyles: baseStyles5,
|
|
23478
23554
|
activeStyles: activeStyles3,
|
|
23479
23555
|
focusRingStyles: focusRingStyles2,
|
|
23480
|
-
hoverStyles:
|
|
23556
|
+
hoverStyles: hoverStyles5,
|
|
23481
23557
|
disabledStyles: disabledStyles4,
|
|
23482
23558
|
activeHoverStyles
|
|
23483
23559
|
} = (0, import_react132.useMemo)(() => getTabStyles(), []);
|
|
@@ -23494,7 +23570,7 @@ function TabImpl(props) {
|
|
|
23494
23570
|
...baseStyles5,
|
|
23495
23571
|
...active && activeStyles3,
|
|
23496
23572
|
...isDisabled && disabledStyles4,
|
|
23497
|
-
...isHovered &&
|
|
23573
|
+
...isHovered && hoverStyles5,
|
|
23498
23574
|
...isHovered && active && activeHoverStyles,
|
|
23499
23575
|
...isFocusVisible && active && focusRingStyles2
|
|
23500
23576
|
})
|
|
@@ -24981,14 +25057,14 @@ function PageHeaderLayout(props) {
|
|
|
24981
25057
|
BoundDateField,
|
|
24982
25058
|
BoundDateRangeField,
|
|
24983
25059
|
BoundForm,
|
|
24984
|
-
BoundIconCardField,
|
|
24985
|
-
BoundIconCardGroupField,
|
|
24986
25060
|
BoundMultiLineSelectField,
|
|
24987
25061
|
BoundMultiSelectField,
|
|
24988
25062
|
BoundNumberField,
|
|
24989
25063
|
BoundRadioGroupField,
|
|
24990
25064
|
BoundRichTextField,
|
|
24991
25065
|
BoundSelectAndTextField,
|
|
25066
|
+
BoundSelectCardField,
|
|
25067
|
+
BoundSelectCardGroupField,
|
|
24992
25068
|
BoundSelectField,
|
|
24993
25069
|
BoundSwitchField,
|
|
24994
25070
|
BoundTextAreaField,
|
|
@@ -25048,7 +25124,6 @@ function PageHeaderLayout(props) {
|
|
|
25048
25124
|
HomeboundLogo,
|
|
25049
25125
|
Icon,
|
|
25050
25126
|
IconButton,
|
|
25051
|
-
IconCard,
|
|
25052
25127
|
Icons,
|
|
25053
25128
|
KEPT_GROUP,
|
|
25054
25129
|
Loader,
|
|
@@ -25090,6 +25165,8 @@ function PageHeaderLayout(props) {
|
|
|
25090
25165
|
ScrollableContent,
|
|
25091
25166
|
ScrollableFooter,
|
|
25092
25167
|
ScrollableParent,
|
|
25168
|
+
SelectCard,
|
|
25169
|
+
SelectCardGroup,
|
|
25093
25170
|
SelectField,
|
|
25094
25171
|
SelectToggle,
|
|
25095
25172
|
SideNav,
|
|
@@ -25138,13 +25215,13 @@ function PageHeaderLayout(props) {
|
|
|
25138
25215
|
boundCheckboxGroupField,
|
|
25139
25216
|
boundDateField,
|
|
25140
25217
|
boundDateRangeField,
|
|
25141
|
-
boundIconCardField,
|
|
25142
|
-
boundIconCardGroupField,
|
|
25143
25218
|
boundMultiSelectField,
|
|
25144
25219
|
boundMultilineSelectField,
|
|
25145
25220
|
boundNumberField,
|
|
25146
25221
|
boundRadioGroupField,
|
|
25147
25222
|
boundRichTextField,
|
|
25223
|
+
boundSelectCardField,
|
|
25224
|
+
boundSelectCardGroupField,
|
|
25148
25225
|
boundSelectField,
|
|
25149
25226
|
boundSwitchField,
|
|
25150
25227
|
boundTextAreaField,
|
|
@@ -25184,6 +25261,7 @@ function PageHeaderLayout(props) {
|
|
|
25184
25261
|
emptyCell,
|
|
25185
25262
|
ensureClientSideSortValueIsSortable,
|
|
25186
25263
|
environmentBannerSizePx,
|
|
25264
|
+
fillRowStyles,
|
|
25187
25265
|
filterTestIdPrefix,
|
|
25188
25266
|
formatDate,
|
|
25189
25267
|
formatDateRange,
|
|
@@ -25200,7 +25278,6 @@ function PageHeaderLayout(props) {
|
|
|
25200
25278
|
getTableStyles,
|
|
25201
25279
|
headerRenderFn,
|
|
25202
25280
|
hoverStyles,
|
|
25203
|
-
iconCardStylesHover,
|
|
25204
25281
|
increment,
|
|
25205
25282
|
insertAtIndex,
|
|
25206
25283
|
isContentColumn,
|
|
@@ -25242,7 +25319,6 @@ function PageHeaderLayout(props) {
|
|
|
25242
25319
|
rowClickRenderFn,
|
|
25243
25320
|
rowLinkRenderFn,
|
|
25244
25321
|
selectColumn,
|
|
25245
|
-
selectedStyles,
|
|
25246
25322
|
setDefaultStyle,
|
|
25247
25323
|
setEnvironmentFavicon,
|
|
25248
25324
|
setGridTableDefaults,
|