@uniformdev/mesh-sdk-react 19.141.1-alpha.5 → 19.142.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.d.mts +509 -137
- package/dist/index.d.ts +509 -137
- package/dist/index.esm.js +2057 -607
- package/dist/index.js +2127 -655
- package/dist/index.mjs +2057 -607
- package/package.json +5 -5
package/dist/index.js
CHANGED
|
@@ -33,71 +33,83 @@ var src_exports = {};
|
|
|
33
33
|
__export(src_exports, {
|
|
34
34
|
$createVariableNode: () => $createVariableNode,
|
|
35
35
|
$isVariableNode: () => $isVariableNode,
|
|
36
|
-
AddListButton: () =>
|
|
37
|
-
Button: () =>
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
AddListButton: () => import_design_system51.AddListButton,
|
|
37
|
+
Button: () => import_design_system51.Button,
|
|
38
|
+
CHECKBOX_OPERATORS: () => CHECKBOX_OPERATORS,
|
|
39
|
+
Callout: () => import_design_system51.Callout,
|
|
40
40
|
ControlledValuePlugin: () => ControlledValuePlugin,
|
|
41
|
+
DATE_OPERATORS: () => DATE_OPERATORS,
|
|
41
42
|
DISCONNECT_VARIABLE_COMMAND: () => DISCONNECT_VARIABLE_COMMAND,
|
|
42
43
|
DamSelectedItem: () => DamSelectedItem,
|
|
43
44
|
DataRefreshButton: () => DataRefreshButton,
|
|
44
45
|
DataResourceDynamicInputProvider: () => DataResourceDynamicInputProvider,
|
|
45
|
-
DataResourceInputContext: () => DataResourceInputContext,
|
|
46
46
|
DataResourceVariablesList: () => DataResourceVariablesList,
|
|
47
47
|
DataResourceVariablesListExplicit: () => DataResourceVariablesListExplicit,
|
|
48
48
|
DataSourceEditor: () => DataSourceEditor,
|
|
49
49
|
DataTypeEditor: () => DataTypeEditor,
|
|
50
|
+
DateEditor: () => DateEditor,
|
|
51
|
+
DateRangeEditor: () => DateRangeEditor,
|
|
50
52
|
DefaultSearchRow: () => DefaultSearchRow,
|
|
51
53
|
DefaultSelectedItem: () => DefaultSelectedItem,
|
|
52
|
-
DrawerContent: () =>
|
|
54
|
+
DrawerContent: () => import_design_system51.DrawerContent,
|
|
53
55
|
EDIT_VARIABLE_COMMAND: () => EDIT_VARIABLE_COMMAND,
|
|
54
56
|
EntrySearch: () => EntrySearch,
|
|
55
|
-
|
|
57
|
+
FilterButton: () => FilterButton2,
|
|
58
|
+
FilterControls: () => FilterControls,
|
|
59
|
+
FilterEditorRenderer: () => FilterEditorRenderer,
|
|
60
|
+
FilterItem: () => FilterItem,
|
|
61
|
+
FilterItems: () => FilterItems,
|
|
62
|
+
FilterMenu: () => FilterMenu,
|
|
63
|
+
FilterMultiChoiceEditor: () => FilterMultiChoiceEditor,
|
|
64
|
+
FilterSingleChoiceEditor: () => FilterSingleChoiceEditor,
|
|
65
|
+
Heading: () => import_design_system51.Heading,
|
|
56
66
|
INSERT_VARIABLE_COMMAND: () => INSERT_VARIABLE_COMMAND,
|
|
57
67
|
Icons: () => icons_exports,
|
|
58
|
-
Input: () =>
|
|
59
|
-
InputComboBox: () =>
|
|
60
|
-
InputKeywordSearch: () =>
|
|
61
|
-
InputSelect: () =>
|
|
62
|
-
InputToggle: () =>
|
|
68
|
+
Input: () => import_design_system51.Input,
|
|
69
|
+
InputComboBox: () => import_design_system51.InputComboBox,
|
|
70
|
+
InputKeywordSearch: () => import_design_system51.InputKeywordSearch,
|
|
71
|
+
InputSelect: () => import_design_system51.InputSelect,
|
|
72
|
+
InputToggle: () => import_design_system51.InputToggle,
|
|
63
73
|
InputVariables: () => InputVariables,
|
|
64
|
-
Label: () =>
|
|
74
|
+
Label: () => import_design_system51.Label,
|
|
65
75
|
LinkButton: () => LinkButton,
|
|
66
|
-
LoadingIndicator: () =>
|
|
67
|
-
LoadingOverlay: () =>
|
|
68
|
-
Menu: () =>
|
|
69
|
-
MenuItem: () =>
|
|
76
|
+
LoadingIndicator: () => import_design_system51.LoadingIndicator,
|
|
77
|
+
LoadingOverlay: () => import_design_system51.LoadingOverlay,
|
|
78
|
+
Menu: () => import_design_system51.Menu,
|
|
79
|
+
MenuItem: () => import_design_system51.MenuItem,
|
|
70
80
|
MeshApp: () => MeshApp,
|
|
81
|
+
NUMBER_OPERATORS: () => NUMBER_OPERATORS,
|
|
82
|
+
NumberEditor: () => NumberEditor,
|
|
83
|
+
NumberRangeEditor: () => NumberRangeEditor,
|
|
71
84
|
OPEN_INSERT_VARIABLE_COMMAND: () => OPEN_INSERT_VARIABLE_COMMAND,
|
|
72
85
|
ObjectSearchContainer: () => ObjectSearchContainer,
|
|
73
|
-
ObjectSearchContext: () => ObjectSearchContext,
|
|
74
86
|
ObjectSearchFilter: () => ObjectSearchFilter,
|
|
75
87
|
ObjectSearchFilterContainer: () => ObjectSearchFilterContainer2,
|
|
76
88
|
ObjectSearchListItem: () => ObjectSearchListItem,
|
|
77
89
|
ObjectSearchListItemLoadingSkeleton: () => ObjectSearchListItemLoadingSkeleton,
|
|
78
|
-
ObjectSearchListOfSearchResults: () => ObjectSearchListOfSearchResults,
|
|
79
90
|
ObjectSearchProvider: () => ObjectSearchProvider,
|
|
80
91
|
ObjectSearchResultItem: () => ObjectSearchResultItem,
|
|
81
92
|
ObjectSearchResultItemButton: () => ObjectSearchResultItemButton,
|
|
82
93
|
ObjectSearchResultList: () => ObjectSearchResultList,
|
|
94
|
+
PUBLISH_STATUS_FIELD_OPERATORS: () => PUBLISH_STATUS_FIELD_OPERATORS,
|
|
83
95
|
ParamTypeDynamicDataProvider: () => ParamTypeDynamicDataProvider,
|
|
84
96
|
ParameterConnectionIndicator: () => ParameterConnectionIndicator,
|
|
85
|
-
ParameterGroup: () =>
|
|
86
|
-
ParameterImage: () =>
|
|
87
|
-
ParameterImageInner: () =>
|
|
88
|
-
ParameterInput: () =>
|
|
89
|
-
ParameterInputInner: () =>
|
|
90
|
-
ParameterLabel: () =>
|
|
91
|
-
ParameterMenuButton: () =>
|
|
97
|
+
ParameterGroup: () => import_design_system51.ParameterGroup,
|
|
98
|
+
ParameterImage: () => import_design_system51.ParameterImage,
|
|
99
|
+
ParameterImageInner: () => import_design_system51.ParameterImageInner,
|
|
100
|
+
ParameterInput: () => import_design_system51.ParameterInput,
|
|
101
|
+
ParameterInputInner: () => import_design_system51.ParameterInputInner,
|
|
102
|
+
ParameterLabel: () => import_design_system51.ParameterLabel,
|
|
103
|
+
ParameterMenuButton: () => import_design_system51.ParameterMenuButton,
|
|
92
104
|
ParameterOrSingleVariable: () => ParameterOrSingleVariable,
|
|
93
|
-
ParameterSelect: () =>
|
|
94
|
-
ParameterSelectInner: () =>
|
|
95
|
-
ParameterShell: () =>
|
|
105
|
+
ParameterSelect: () => import_design_system51.ParameterSelect,
|
|
106
|
+
ParameterSelectInner: () => import_design_system51.ParameterSelectInner,
|
|
107
|
+
ParameterShell: () => import_design_system51.ParameterShell,
|
|
96
108
|
ParameterShellContext: () => import_design_system14.ParameterShellContext,
|
|
97
|
-
ParameterTextarea: () =>
|
|
98
|
-
ParameterTextareaInner: () =>
|
|
99
|
-
ParameterToggle: () =>
|
|
100
|
-
ParameterToggleInner: () =>
|
|
109
|
+
ParameterTextarea: () => import_design_system51.ParameterTextarea,
|
|
110
|
+
ParameterTextareaInner: () => import_design_system51.ParameterTextareaInner,
|
|
111
|
+
ParameterToggle: () => import_design_system51.ParameterToggle,
|
|
112
|
+
ParameterToggleInner: () => import_design_system51.ParameterToggleInner,
|
|
101
113
|
ParameterVariables: () => ParameterVariables,
|
|
102
114
|
ProductPreviewList: () => ProductPreviewList,
|
|
103
115
|
ProductQuery: () => ProductQuery,
|
|
@@ -107,6 +119,7 @@ __export(src_exports, {
|
|
|
107
119
|
ProductSearchRow: () => ProductSearchRow,
|
|
108
120
|
ProductSelectedItem: () => ProductSelectedItem,
|
|
109
121
|
QueryFilter: () => QueryFilter,
|
|
122
|
+
RICHTEXT_OPERATORS: () => RICHTEXT_OPERATORS,
|
|
110
123
|
RequestBody: () => RequestBody,
|
|
111
124
|
RequestHeaders: () => RequestHeaders,
|
|
112
125
|
RequestMethodSelect: () => RequestMethodSelect,
|
|
@@ -116,20 +129,33 @@ __export(src_exports, {
|
|
|
116
129
|
RequestUrl: () => RequestUrl,
|
|
117
130
|
RequestUrlInput: () => RequestUrlInput,
|
|
118
131
|
ResolvableLoadingValue: () => ResolvableLoadingValue,
|
|
119
|
-
|
|
120
|
-
|
|
132
|
+
SYSTEM_DATE_OPERATORS: () => SYSTEM_DATE_OPERATORS,
|
|
133
|
+
SYSTEM_FIELD_OPERATORS: () => SYSTEM_FIELD_OPERATORS,
|
|
134
|
+
ScrollableList: () => import_design_system51.ScrollableList,
|
|
135
|
+
ScrollableListItem: () => import_design_system51.ScrollableListItem,
|
|
136
|
+
SearchAndFilter: () => SearchAndFilter,
|
|
137
|
+
SearchAndFilterContext: () => SearchAndFilterContext,
|
|
138
|
+
SearchAndFilterOptionsContainer: () => SearchAndFilterOptionsContainer2,
|
|
139
|
+
SearchAndFilterProvider: () => SearchAndFilterProvider,
|
|
140
|
+
SearchAndFilterResultContainer: () => SearchAndFilterResultContainer,
|
|
141
|
+
SearchOnlyContext: () => SearchOnlyContext,
|
|
142
|
+
SearchOnlyFilter: () => SearchOnlyFilter,
|
|
121
143
|
SelectionField: () => SelectionField,
|
|
122
|
-
|
|
144
|
+
StatusMultiEditor: () => StatusMultiEditor,
|
|
145
|
+
StatusSingleEditor: () => StatusSingleEditor,
|
|
146
|
+
Switch: () => import_design_system51.Switch,
|
|
147
|
+
TEXTBOX_OPERATORS: () => TEXTBOX_OPERATORS,
|
|
148
|
+
TextEditor: () => TextEditor,
|
|
123
149
|
TextVariableRenderer: () => TextVariableRenderer,
|
|
124
|
-
Textarea: () =>
|
|
125
|
-
Theme: () =>
|
|
150
|
+
Textarea: () => import_design_system51.Textarea,
|
|
151
|
+
Theme: () => import_design_system51.Theme,
|
|
152
|
+
USER_OPERATORS: () => USER_OPERATORS,
|
|
126
153
|
VariableEditor: () => VariableEditor,
|
|
127
154
|
VariableNode: () => VariableNode,
|
|
128
155
|
VariablesList: () => VariablesList,
|
|
129
156
|
VariablesPlugin: () => VariablesPlugin,
|
|
130
157
|
VariablesProvider: () => VariablesProvider,
|
|
131
158
|
badgeIcon: () => badgeIcon,
|
|
132
|
-
bindQuery: () => bindQuery,
|
|
133
159
|
bindableFiltersMapper: () => bindableFiltersMapper,
|
|
134
160
|
convertConnectedDataToVariable: () => convertConnectedDataToVariable,
|
|
135
161
|
createLocationValidator: () => createLocationValidator,
|
|
@@ -161,6 +187,7 @@ __export(src_exports, {
|
|
|
161
187
|
entrySearchSelectInput: () => entrySearchSelectInput,
|
|
162
188
|
entrySearchSelectOption: () => entrySearchSelectOption,
|
|
163
189
|
entrySearchWrapper: () => entrySearchWrapper,
|
|
190
|
+
filterMapper: () => filterMapper,
|
|
164
191
|
hasReferencedVariables: () => hasReferencedVariables,
|
|
165
192
|
prettifyBindExpression: () => prettifyBindExpression,
|
|
166
193
|
productSearchRowActiveIcon: () => productSearchRowActiveIcon,
|
|
@@ -202,7 +229,6 @@ __export(src_exports, {
|
|
|
202
229
|
urlEncodeRequestUrl: () => urlEncodeRequestUrl,
|
|
203
230
|
useConnectedDataAsVariables: () => useConnectedDataAsVariables,
|
|
204
231
|
useContentDataResourceLocaleInfo: () => useContentDataResourceLocaleInfo,
|
|
205
|
-
useDataResourceDynamicInputs: () => useDataResourceDynamicInputs,
|
|
206
232
|
useDynamicInputsAsVariables: () => useDynamicInputsAsVariables,
|
|
207
233
|
useMeshLocation: () => useMeshLocation,
|
|
208
234
|
useObjectSearchContext: () => useObjectSearchContext,
|
|
@@ -212,6 +238,7 @@ __export(src_exports, {
|
|
|
212
238
|
useRequest: () => useRequest,
|
|
213
239
|
useRequestHeader: () => useRequestHeader,
|
|
214
240
|
useRequestParameter: () => useRequestParameter,
|
|
241
|
+
useSearchAndFilter: () => useSearchAndFilter,
|
|
215
242
|
useUniformMeshSdk: () => useUniformMeshSdk,
|
|
216
243
|
useVariableEditor: () => useVariableEditor,
|
|
217
244
|
useVariables: () => useVariables,
|
|
@@ -2862,9 +2889,6 @@ function DefaultDamItemRenderer({ item }) {
|
|
|
2862
2889
|
] }) : null;
|
|
2863
2890
|
}
|
|
2864
2891
|
|
|
2865
|
-
// src/components/DataResourceDynamicInputProvider.tsx
|
|
2866
|
-
var import_react59 = require("react");
|
|
2867
|
-
|
|
2868
2892
|
// src/hooks/useConnectedDataAsVariables.tsx
|
|
2869
2893
|
var import_react26 = require("react");
|
|
2870
2894
|
function useConnectedDataAsVariables(connectedData) {
|
|
@@ -3148,7 +3172,8 @@ var import_react40 = require("react");
|
|
|
3148
3172
|
|
|
3149
3173
|
// src/components/Variables/util/prettifyBindExpression.tsx
|
|
3150
3174
|
function prettifyBindExpression(bindExpression) {
|
|
3151
|
-
|
|
3175
|
+
const [, expression] = bindExpression.split(":");
|
|
3176
|
+
return expression;
|
|
3152
3177
|
}
|
|
3153
3178
|
|
|
3154
3179
|
// src/components/Variables/composer/VariableChip.tsx
|
|
@@ -3168,42 +3193,58 @@ function VariableChip({
|
|
|
3168
3193
|
}) {
|
|
3169
3194
|
const hasClickEvent = !!onClick;
|
|
3170
3195
|
const referenceIsValidFr = isFresh ? true : referenceIsValid;
|
|
3171
|
-
const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? import_react32.Fragment : UndefinedVariableReference;
|
|
3196
|
+
const Wrapper = referenceIsValidFr === "warning" ? WarningVariableReference : referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? import_react32.Fragment : UndefinedVariableReference;
|
|
3172
3197
|
const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
|
|
3198
|
+
const chippy = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.MultilineChip, { onClick, "aria-selected": selected ? true : void 0, "aria-disabled": disabled, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Wrapper, { children: displayName || reference }) });
|
|
3199
|
+
if (tooltip) {
|
|
3200
|
+
const tip = tooltip ? `${tooltip}${extraTitle ? `
|
|
3201
|
+
|
|
3202
|
+
${extraTitle}` : ""}` : extraTitle != null ? extraTitle : "";
|
|
3203
|
+
const tipLines = tip.split("\n");
|
|
3204
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3205
|
+
import_design_system15.Tooltip,
|
|
3206
|
+
{
|
|
3207
|
+
title: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.VerticalRhythm, { gap: "sm", children: tipLines.map((t, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: t }, index)) }),
|
|
3208
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: chippy })
|
|
3209
|
+
}
|
|
3210
|
+
);
|
|
3211
|
+
}
|
|
3212
|
+
return chippy;
|
|
3213
|
+
}
|
|
3214
|
+
function UndefinedVariableReference({ children }) {
|
|
3173
3215
|
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3174
|
-
|
|
3216
|
+
"span",
|
|
3175
3217
|
{
|
|
3176
|
-
|
|
3177
|
-
|
|
3178
|
-
|
|
3179
|
-
|
|
3180
|
-
|
|
3181
|
-
|
|
3182
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Wrapper, { children: displayName || reference })
|
|
3218
|
+
style: {
|
|
3219
|
+
textDecoration: "underline",
|
|
3220
|
+
textDecorationStyle: "wavy",
|
|
3221
|
+
textDecorationColor: "var(--error)"
|
|
3222
|
+
},
|
|
3223
|
+
children
|
|
3183
3224
|
}
|
|
3184
3225
|
);
|
|
3185
3226
|
}
|
|
3186
|
-
function
|
|
3227
|
+
function InfoVariableReference({ children }) {
|
|
3187
3228
|
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3188
3229
|
"span",
|
|
3189
3230
|
{
|
|
3190
3231
|
style: {
|
|
3191
3232
|
textDecoration: "underline",
|
|
3192
3233
|
textDecorationStyle: "wavy",
|
|
3193
|
-
textDecorationColor: "
|
|
3234
|
+
textDecorationColor: "var(--primary-action-default)"
|
|
3194
3235
|
},
|
|
3195
3236
|
children
|
|
3196
3237
|
}
|
|
3197
3238
|
);
|
|
3198
3239
|
}
|
|
3199
|
-
function
|
|
3240
|
+
function WarningVariableReference({ children }) {
|
|
3200
3241
|
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3201
3242
|
"span",
|
|
3202
3243
|
{
|
|
3203
3244
|
style: {
|
|
3204
3245
|
textDecoration: "underline",
|
|
3205
3246
|
textDecorationStyle: "wavy",
|
|
3206
|
-
textDecorationColor: "
|
|
3247
|
+
textDecorationColor: "var(--alert)"
|
|
3207
3248
|
},
|
|
3208
3249
|
children
|
|
3209
3250
|
}
|
|
@@ -3451,7 +3492,8 @@ function VariablesProvider({
|
|
|
3451
3492
|
readOnly,
|
|
3452
3493
|
isLoading,
|
|
3453
3494
|
children,
|
|
3454
|
-
knownUndefinedValues = {}
|
|
3495
|
+
knownUndefinedValues = {},
|
|
3496
|
+
onChangeKnownUndefinedValue
|
|
3455
3497
|
}) {
|
|
3456
3498
|
const [editing, setEditing] = (0, import_react37.useState)();
|
|
3457
3499
|
const [editingContext, setEditingContext] = (0, import_react37.useState)();
|
|
@@ -3518,6 +3560,15 @@ function VariablesProvider({
|
|
|
3518
3560
|
isLoading: !!isLoading
|
|
3519
3561
|
};
|
|
3520
3562
|
}, [valueBasedContextValue, editVariableTxn, editing, events, knownUndefinedValues, isLoading]);
|
|
3563
|
+
(0, import_react37.useEffect)(() => {
|
|
3564
|
+
if (editing === void 0) {
|
|
3565
|
+
return;
|
|
3566
|
+
}
|
|
3567
|
+
const activeElement = document.activeElement;
|
|
3568
|
+
if (activeElement && "blur" in activeElement && typeof activeElement.blur === "function") {
|
|
3569
|
+
activeElement.blur();
|
|
3570
|
+
}
|
|
3571
|
+
}, [editing]);
|
|
3521
3572
|
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(VariablesContext.Provider, { value: contextValue, children: [
|
|
3522
3573
|
children,
|
|
3523
3574
|
typeof editing !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
@@ -3526,9 +3577,19 @@ function VariablesProvider({
|
|
|
3526
3577
|
context: editingContext,
|
|
3527
3578
|
onSubmit: (val, editorCompletedContext) => {
|
|
3528
3579
|
contextValue.dispatch({ type: "cancelEdit" });
|
|
3529
|
-
|
|
3530
|
-
|
|
3531
|
-
|
|
3580
|
+
if ("resultType" in val) {
|
|
3581
|
+
if (!onChangeKnownUndefinedValue) {
|
|
3582
|
+
throw new Error(
|
|
3583
|
+
"onChangeKnownUndefinedValue must be provided to handle known-undefined-value results"
|
|
3584
|
+
);
|
|
3585
|
+
}
|
|
3586
|
+
const { name, ...kuv } = val;
|
|
3587
|
+
onChangeKnownUndefinedValue(val.name, kuv);
|
|
3588
|
+
} else {
|
|
3589
|
+
const { name, ...varValue } = val;
|
|
3590
|
+
const latestValue = { ...value, [name]: varValue };
|
|
3591
|
+
onChange == null ? void 0 : onChange(latestValue);
|
|
3592
|
+
}
|
|
3532
3593
|
events.emit("editCompleted", {
|
|
3533
3594
|
canceled: false,
|
|
3534
3595
|
selectedVariable: val,
|
|
@@ -3943,21 +4004,21 @@ function VariablesPlugin({
|
|
|
3943
4004
|
]);
|
|
3944
4005
|
const updateExistingNodeIfChanged = (0, import_react39.useCallback)(
|
|
3945
4006
|
(variableNode) => {
|
|
3946
|
-
var _a, _b, _c;
|
|
4007
|
+
var _a, _b, _c, _d;
|
|
3947
4008
|
const targetVar = variablesRef.current.variables[variableNode.reference];
|
|
3948
4009
|
const targetUndefinedVar = variablesRef.current.knownUndefinedValues[variableNode.reference];
|
|
3949
4010
|
const isLoadingVariables = variablesRef.current.isLoading;
|
|
3950
4011
|
const currentState = variableNode.getState();
|
|
3951
|
-
if (currentState.isFresh && !targetVar) {
|
|
4012
|
+
if (currentState.isFresh && !targetVar && !targetUndefinedVar) {
|
|
3952
4013
|
return;
|
|
3953
4014
|
}
|
|
3954
|
-
const tooltip = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
|
|
4015
|
+
const tooltip = (_d = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) != null ? _d : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
|
|
3955
4016
|
const newState = {
|
|
3956
4017
|
...currentState,
|
|
3957
4018
|
displayName: (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || variableNode.reference,
|
|
3958
4019
|
isLoading: isLoadingVariables && !targetVar && !(targetUndefinedVar == null ? void 0 : targetUndefinedVar.info),
|
|
3959
4020
|
hasClickEvent: canEditVariable(variableNode.reference, targetVar),
|
|
3960
|
-
referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : isLoadingVariables ? true : Boolean(targetVar),
|
|
4021
|
+
referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) ? false : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) ? "warning" : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : isLoadingVariables ? true : Boolean(targetVar),
|
|
3961
4022
|
tooltip,
|
|
3962
4023
|
isFresh: false
|
|
3963
4024
|
};
|
|
@@ -3973,7 +4034,7 @@ function VariablesPlugin({
|
|
|
3973
4034
|
updateExistingNodeIfChanged(variableNode);
|
|
3974
4035
|
});
|
|
3975
4036
|
});
|
|
3976
|
-
}, [editor, variables, canEditVariable, updateExistingNodeIfChanged]);
|
|
4037
|
+
}, [editor, variables, knownUndefinedValues, canEditVariable, updateExistingNodeIfChanged]);
|
|
3977
4038
|
(0, import_react39.useEffect)(() => {
|
|
3978
4039
|
return editor.registerNodeTransform(VariableNode, (variableNode) => {
|
|
3979
4040
|
updateExistingNodeIfChanged(variableNode);
|
|
@@ -4859,7 +4920,7 @@ var import_lexical9 = require("lexical");
|
|
|
4859
4920
|
var import_react50 = require("react");
|
|
4860
4921
|
var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
|
|
4861
4922
|
function VariablesComposerInput({
|
|
4862
|
-
css:
|
|
4923
|
+
css: css39,
|
|
4863
4924
|
placeholder,
|
|
4864
4925
|
...contentEditableProps
|
|
4865
4926
|
}) {
|
|
@@ -4980,7 +5041,8 @@ function InputVariables(props) {
|
|
|
4980
5041
|
editorRef,
|
|
4981
5042
|
filterVariable,
|
|
4982
5043
|
styleVariant = "default",
|
|
4983
|
-
renderMenuInPortal
|
|
5044
|
+
renderMenuInPortal,
|
|
5045
|
+
disableDismissEditorOnChange
|
|
4984
5046
|
} = props;
|
|
4985
5047
|
const [finalId] = (0, import_react52.useState)(id != null ? id : () => (0, import_uuid2.v4)());
|
|
4986
5048
|
const { dispatch, canDispatch, isEditing } = useVariables(true);
|
|
@@ -4990,7 +5052,7 @@ function InputVariables(props) {
|
|
|
4990
5052
|
"div",
|
|
4991
5053
|
{
|
|
4992
5054
|
onKeyDown: () => {
|
|
4993
|
-
if (isEditing && canDispatch) {
|
|
5055
|
+
if (!disableDismissEditorOnChange && isEditing && canDispatch) {
|
|
4994
5056
|
dispatch({ type: "cancelEdit" });
|
|
4995
5057
|
}
|
|
4996
5058
|
},
|
|
@@ -5322,19 +5384,17 @@ function ParameterVariables(props) {
|
|
|
5322
5384
|
children: [
|
|
5323
5385
|
editorRef ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(EditorRefPlugin, { editorRef }) : null,
|
|
5324
5386
|
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlledValuePlugin, { value, enabled: useInputWhenNoVariables }),
|
|
5325
|
-
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
5326
|
-
|
|
5327
|
-
|
|
5328
|
-
|
|
5329
|
-
|
|
5330
|
-
|
|
5331
|
-
|
|
5332
|
-
|
|
5333
|
-
|
|
5334
|
-
}
|
|
5335
|
-
|
|
5336
|
-
children: [
|
|
5337
|
-
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { css: { flex: 1 }, children: useInputWhenNoVariables ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
5387
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system24.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
|
|
5388
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
5389
|
+
"div",
|
|
5390
|
+
{
|
|
5391
|
+
css: { flex: 1 },
|
|
5392
|
+
onKeyDown: () => {
|
|
5393
|
+
if (isEditing && canDispatch) {
|
|
5394
|
+
dispatch({ type: "cancelEdit" });
|
|
5395
|
+
}
|
|
5396
|
+
},
|
|
5397
|
+
children: useInputWhenNoVariables ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
5338
5398
|
VariablesComposerInput,
|
|
5339
5399
|
{
|
|
5340
5400
|
"aria-label": ariaLabel,
|
|
@@ -5346,20 +5406,20 @@ function ParameterVariables(props) {
|
|
|
5346
5406
|
inputCss != null ? inputCss : import_react56.css``
|
|
5347
5407
|
]
|
|
5348
5408
|
}
|
|
5349
|
-
) }),
|
|
5350
|
-
disableVariablesForReals ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
5351
|
-
VariablesComposerVariableMenu,
|
|
5352
|
-
{
|
|
5353
|
-
...sharedMenuProps,
|
|
5354
|
-
buttonCss: [variableBindButton],
|
|
5355
|
-
tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
|
|
5356
|
-
buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
|
|
5357
|
-
replaceValueOnVariableInsert: useInputWhenNoVariables
|
|
5358
|
-
}
|
|
5359
5409
|
)
|
|
5360
|
-
|
|
5361
|
-
|
|
5362
|
-
|
|
5410
|
+
}
|
|
5411
|
+
),
|
|
5412
|
+
disableVariablesForReals ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
5413
|
+
VariablesComposerVariableMenu,
|
|
5414
|
+
{
|
|
5415
|
+
...sharedMenuProps,
|
|
5416
|
+
buttonCss: [variableBindButton],
|
|
5417
|
+
tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
|
|
5418
|
+
buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
|
|
5419
|
+
replaceValueOnVariableInsert: useInputWhenNoVariables
|
|
5420
|
+
}
|
|
5421
|
+
)
|
|
5422
|
+
] })
|
|
5363
5423
|
]
|
|
5364
5424
|
}
|
|
5365
5425
|
);
|
|
@@ -5367,7 +5427,7 @@ function ParameterVariables(props) {
|
|
|
5367
5427
|
|
|
5368
5428
|
// src/components/Variables/util/convertConnectedDataToVariable.ts
|
|
5369
5429
|
function convertConnectedDataToVariable(bindExpression, value) {
|
|
5370
|
-
const isValuePrimitive = typeof value === "string" || typeof value === "number" || typeof value === "boolean";
|
|
5430
|
+
const isValuePrimitive = typeof value === "string" && value.length > 0 || typeof value === "number" || typeof value === "boolean";
|
|
5371
5431
|
return {
|
|
5372
5432
|
ephemeral: true,
|
|
5373
5433
|
displayName: isValuePrimitive ? value.toString() : prettifyBindExpression(bindExpression),
|
|
@@ -5532,10 +5592,6 @@ function VariablesList() {
|
|
|
5532
5592
|
|
|
5533
5593
|
// src/components/DataResourceDynamicInputProvider.tsx
|
|
5534
5594
|
var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
|
|
5535
|
-
var DataResourceInputContext = (0, import_react59.createContext)(void 0);
|
|
5536
|
-
var useDataResourceDynamicInputs = () => {
|
|
5537
|
-
return (0, import_react59.useContext)(DataResourceInputContext);
|
|
5538
|
-
};
|
|
5539
5595
|
function DataResourceDynamicInputProvider(props) {
|
|
5540
5596
|
const { children, dynamicInputs } = props;
|
|
5541
5597
|
if (dynamicInputs) {
|
|
@@ -5554,7 +5610,7 @@ function DataResourceDynamicInputProviderRenderer({
|
|
|
5554
5610
|
dynamicInputs
|
|
5555
5611
|
}) {
|
|
5556
5612
|
const variables = useDynamicInputsAsVariables(dynamicInputs);
|
|
5557
|
-
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
5613
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(VariablesProvider, { value: variables, readOnly: true, children });
|
|
5558
5614
|
}
|
|
5559
5615
|
|
|
5560
5616
|
// src/components/DataResourceVariablesList.tsx
|
|
@@ -5631,9 +5687,9 @@ function TextVariableRenderer({ definition, value, setValue }) {
|
|
|
5631
5687
|
}
|
|
5632
5688
|
|
|
5633
5689
|
// src/components/Request/RequestBody.tsx
|
|
5634
|
-
var
|
|
5690
|
+
var import_react60 = require("@emotion/react");
|
|
5635
5691
|
var import_design_system27 = require("@uniformdev/design-system");
|
|
5636
|
-
var
|
|
5692
|
+
var import_react61 = require("react");
|
|
5637
5693
|
|
|
5638
5694
|
// src/components/Request/RequestProvider.tsx
|
|
5639
5695
|
var React11 = __toESM(require("react"));
|
|
@@ -5717,11 +5773,11 @@ function useRequest() {
|
|
|
5717
5773
|
}
|
|
5718
5774
|
|
|
5719
5775
|
// src/components/Request/styles/Request.styles.ts
|
|
5720
|
-
var
|
|
5721
|
-
var innerContentStyles =
|
|
5776
|
+
var import_react59 = require("@emotion/react");
|
|
5777
|
+
var innerContentStyles = import_react59.css`
|
|
5722
5778
|
background: var(--white);
|
|
5723
5779
|
`;
|
|
5724
|
-
var requestTypeContainer = (bgColor) =>
|
|
5780
|
+
var requestTypeContainer = (bgColor) => import_react59.css`
|
|
5725
5781
|
align-items: start;
|
|
5726
5782
|
background: ${bgColor};
|
|
5727
5783
|
display: grid;
|
|
@@ -5759,11 +5815,11 @@ var LANGUAGE_TO_CONTENT_TYPE = {
|
|
|
5759
5815
|
};
|
|
5760
5816
|
function RequestBody() {
|
|
5761
5817
|
const { request, dispatch } = useRequest();
|
|
5762
|
-
const [language, setLanguage] = (0,
|
|
5818
|
+
const [language, setLanguage] = (0, import_react61.useState)("json");
|
|
5763
5819
|
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
|
|
5764
5820
|
"div",
|
|
5765
5821
|
{
|
|
5766
|
-
css:
|
|
5822
|
+
css: import_react60.css`
|
|
5767
5823
|
background: var(--white);
|
|
5768
5824
|
`,
|
|
5769
5825
|
children: [
|
|
@@ -5771,7 +5827,7 @@ function RequestBody() {
|
|
|
5771
5827
|
RequestTypeContainer,
|
|
5772
5828
|
{
|
|
5773
5829
|
bgColor: "var(--gray-100)",
|
|
5774
|
-
css:
|
|
5830
|
+
css: import_react60.css`
|
|
5775
5831
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
5776
5832
|
`,
|
|
5777
5833
|
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
@@ -6042,8 +6098,8 @@ function RequestParameters({
|
|
|
6042
6098
|
}
|
|
6043
6099
|
|
|
6044
6100
|
// src/components/Request/RequestUrl.tsx
|
|
6045
|
-
var
|
|
6046
|
-
var
|
|
6101
|
+
var import_react62 = require("@emotion/react");
|
|
6102
|
+
var import_react63 = require("react");
|
|
6047
6103
|
|
|
6048
6104
|
// src/components/Request/urlEncodeRequestParameter.ts
|
|
6049
6105
|
function urlEncodeRequestUrl(url, varValues) {
|
|
@@ -6069,7 +6125,7 @@ function RequestUrl() {
|
|
|
6069
6125
|
var _a, _b;
|
|
6070
6126
|
const { variables } = useVariables();
|
|
6071
6127
|
const { request } = useRequest();
|
|
6072
|
-
const mergedParameters = (0,
|
|
6128
|
+
const mergedParameters = (0, import_react63.useMemo)(() => {
|
|
6073
6129
|
var _a2;
|
|
6074
6130
|
if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
|
|
6075
6131
|
return request.parameters;
|
|
@@ -6079,7 +6135,7 @@ function RequestUrl() {
|
|
|
6079
6135
|
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
|
|
6080
6136
|
"small",
|
|
6081
6137
|
{
|
|
6082
|
-
css:
|
|
6138
|
+
css: import_react62.css`
|
|
6083
6139
|
display: inline-block;
|
|
6084
6140
|
margin-bottom: var(--spacing-xs);
|
|
6085
6141
|
word-break: break-word;
|
|
@@ -6317,12 +6373,12 @@ var import_design_system31 = require("@uniformdev/design-system");
|
|
|
6317
6373
|
|
|
6318
6374
|
// src/hooks/useInitializeUniformMeshSdk.ts
|
|
6319
6375
|
var import_mesh_sdk = require("@uniformdev/mesh-sdk");
|
|
6320
|
-
var
|
|
6376
|
+
var import_react64 = require("react");
|
|
6321
6377
|
var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
|
|
6322
|
-
const [error, setError] = (0,
|
|
6323
|
-
const [sdk, setSdk] = (0,
|
|
6324
|
-
const initializationInProgress = (0,
|
|
6325
|
-
(0,
|
|
6378
|
+
const [error, setError] = (0, import_react64.useState)();
|
|
6379
|
+
const [sdk, setSdk] = (0, import_react64.useState)();
|
|
6380
|
+
const initializationInProgress = (0, import_react64.useRef)(false);
|
|
6381
|
+
(0, import_react64.useEffect)(
|
|
6326
6382
|
() => {
|
|
6327
6383
|
if (typeof window === "undefined" || sdk) {
|
|
6328
6384
|
return;
|
|
@@ -6380,7 +6436,7 @@ var MeshApp = ({
|
|
|
6380
6436
|
};
|
|
6381
6437
|
|
|
6382
6438
|
// src/components/ObjectSearch/DataRefreshButton.tsx
|
|
6383
|
-
var
|
|
6439
|
+
var import_react65 = require("@emotion/react");
|
|
6384
6440
|
var import_design_system32 = require("@uniformdev/design-system");
|
|
6385
6441
|
var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
|
|
6386
6442
|
var DataRefreshButton = ({
|
|
@@ -6393,7 +6449,7 @@ var DataRefreshButton = ({
|
|
|
6393
6449
|
!isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
6394
6450
|
import_design_system32.LoadingIndicator,
|
|
6395
6451
|
{
|
|
6396
|
-
css:
|
|
6452
|
+
css: import_react65.css`
|
|
6397
6453
|
${isLoading ? "opacity: 0.2;" : void 0}
|
|
6398
6454
|
`
|
|
6399
6455
|
}
|
|
@@ -6403,16 +6459,15 @@ var DataRefreshButton = ({
|
|
|
6403
6459
|
};
|
|
6404
6460
|
|
|
6405
6461
|
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6406
|
-
var
|
|
6462
|
+
var import_react68 = require("@emotion/react");
|
|
6407
6463
|
var import_canvas9 = require("@uniformdev/canvas");
|
|
6408
|
-
var
|
|
6409
|
-
var import_react73 = __toESM(require("react"));
|
|
6464
|
+
var import_design_system35 = require("@uniformdev/design-system");
|
|
6410
6465
|
|
|
6411
6466
|
// src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
|
|
6412
6467
|
var import_canvas8 = require("@uniformdev/canvas");
|
|
6413
|
-
var
|
|
6468
|
+
var import_react66 = require("react");
|
|
6414
6469
|
var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
|
|
6415
|
-
var ObjectSearchContext = (0,
|
|
6470
|
+
var ObjectSearchContext = (0, import_react66.createContext)({
|
|
6416
6471
|
onSetQuery: () => {
|
|
6417
6472
|
},
|
|
6418
6473
|
onSelectItem: () => {
|
|
@@ -6420,6 +6475,8 @@ var ObjectSearchContext = (0, import_react67.createContext)({
|
|
|
6420
6475
|
query: {},
|
|
6421
6476
|
boundQuery: {},
|
|
6422
6477
|
list: {},
|
|
6478
|
+
onSetList: () => {
|
|
6479
|
+
},
|
|
6423
6480
|
selectedListItems: [],
|
|
6424
6481
|
onRemoveAllSelectedItems: () => {
|
|
6425
6482
|
},
|
|
@@ -6431,16 +6488,16 @@ var ObjectSearchProvider = ({
|
|
|
6431
6488
|
children,
|
|
6432
6489
|
defaultQuery
|
|
6433
6490
|
}) => {
|
|
6434
|
-
const [query, setQuery] = (0,
|
|
6491
|
+
const [query, setQuery] = (0, import_react66.useState)({
|
|
6435
6492
|
contentType: "",
|
|
6436
6493
|
keyword: "",
|
|
6437
6494
|
...defaultQuery
|
|
6438
6495
|
});
|
|
6439
6496
|
const { flatVariables } = useVariables(true);
|
|
6440
|
-
const querySearchDeferred = (0,
|
|
6441
|
-
const [selectedItems, setSelectedItems] = (0,
|
|
6442
|
-
const [list, setList] = (0,
|
|
6443
|
-
const onSetQuery = (0,
|
|
6497
|
+
const querySearchDeferred = (0, import_react66.useDeferredValue)(query);
|
|
6498
|
+
const [selectedItems, setSelectedItems] = (0, import_react66.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
|
|
6499
|
+
const [list, setList] = (0, import_react66.useState)({});
|
|
6500
|
+
const onSetQuery = (0, import_react66.useCallback)(
|
|
6444
6501
|
(value2) => {
|
|
6445
6502
|
if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
|
|
6446
6503
|
return setQuery({
|
|
@@ -6452,7 +6509,7 @@ var ObjectSearchProvider = ({
|
|
|
6452
6509
|
},
|
|
6453
6510
|
[setQuery]
|
|
6454
6511
|
);
|
|
6455
|
-
const onSelectItem = (0,
|
|
6512
|
+
const onSelectItem = (0, import_react66.useCallback)(
|
|
6456
6513
|
(selectedResult) => {
|
|
6457
6514
|
if (Array.isArray(selectedResult)) {
|
|
6458
6515
|
setSelectedItems(selectedResult);
|
|
@@ -6466,17 +6523,17 @@ var ObjectSearchProvider = ({
|
|
|
6466
6523
|
},
|
|
6467
6524
|
[setSelectedItems, selectedItems]
|
|
6468
6525
|
);
|
|
6469
|
-
const onRemoveAllSelectedItems = (0,
|
|
6526
|
+
const onRemoveAllSelectedItems = (0, import_react66.useCallback)(() => {
|
|
6470
6527
|
setSelectedItems([]);
|
|
6471
6528
|
}, [setSelectedItems]);
|
|
6472
|
-
const onSetList = (0,
|
|
6529
|
+
const onSetList = (0, import_react66.useCallback)(
|
|
6473
6530
|
(value2) => {
|
|
6474
6531
|
setList(value2);
|
|
6475
6532
|
},
|
|
6476
6533
|
[setList]
|
|
6477
6534
|
);
|
|
6478
|
-
const boundQuery = (0,
|
|
6479
|
-
const value = (0,
|
|
6535
|
+
const boundQuery = (0, import_react66.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
|
|
6536
|
+
const value = (0, import_react66.useMemo)(
|
|
6480
6537
|
() => ({
|
|
6481
6538
|
boundQuery,
|
|
6482
6539
|
onSetQuery,
|
|
@@ -6503,7 +6560,7 @@ var ObjectSearchProvider = ({
|
|
|
6503
6560
|
return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ObjectSearchContext.Provider, { value, children });
|
|
6504
6561
|
};
|
|
6505
6562
|
function useObjectSearchContext() {
|
|
6506
|
-
return (0,
|
|
6563
|
+
return (0, import_react66.useContext)(ObjectSearchContext);
|
|
6507
6564
|
}
|
|
6508
6565
|
function bindQuery(query, inputs) {
|
|
6509
6566
|
const { result, errors } = (0, import_canvas8.bindVariablesToObject)({
|
|
@@ -6521,9 +6578,9 @@ function bindQuery(query, inputs) {
|
|
|
6521
6578
|
var import_design_system34 = require("@uniformdev/design-system");
|
|
6522
6579
|
|
|
6523
6580
|
// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
|
|
6524
|
-
var
|
|
6581
|
+
var import_react67 = require("@emotion/react");
|
|
6525
6582
|
var import_design_system33 = require("@uniformdev/design-system");
|
|
6526
|
-
var ObjectListItemContainer =
|
|
6583
|
+
var ObjectListItemContainer = import_react67.css`
|
|
6527
6584
|
align-items: center;
|
|
6528
6585
|
border: 1px solid var(--gray-300);
|
|
6529
6586
|
border-radius: var(--rounded-base);
|
|
@@ -6532,11 +6589,11 @@ var ObjectListItemContainer = import_react68.css`
|
|
|
6532
6589
|
grid-template-columns: 1fr auto;
|
|
6533
6590
|
padding: var(--spacing-sm);
|
|
6534
6591
|
`;
|
|
6535
|
-
var ObjectListItemContainerDisabled =
|
|
6592
|
+
var ObjectListItemContainerDisabled = import_react67.css`
|
|
6536
6593
|
opacity: var(--opacity-50);
|
|
6537
6594
|
pointer-events: none;
|
|
6538
6595
|
`;
|
|
6539
|
-
var ObjectListItemLoading =
|
|
6596
|
+
var ObjectListItemLoading = import_react67.css`
|
|
6540
6597
|
animation: ${import_design_system33.skeletonLoading} 1s linear infinite alternate;
|
|
6541
6598
|
border-color: transparent;
|
|
6542
6599
|
min-height: 42px;
|
|
@@ -6560,36 +6617,36 @@ var ObjectListItemLoading = import_react68.css`
|
|
|
6560
6617
|
width: 1rem;
|
|
6561
6618
|
}
|
|
6562
6619
|
`;
|
|
6563
|
-
var ObjectListItemHeadingGroup =
|
|
6620
|
+
var ObjectListItemHeadingGroup = import_react67.css`
|
|
6564
6621
|
align-items: center;
|
|
6565
6622
|
display: grid;
|
|
6566
6623
|
`;
|
|
6567
|
-
var ObjectListItemThumbnail =
|
|
6624
|
+
var ObjectListItemThumbnail = import_react67.css`
|
|
6568
6625
|
width: 30px;
|
|
6569
6626
|
object-fit: contain;
|
|
6570
6627
|
`;
|
|
6571
|
-
var ObjectListItemTitle =
|
|
6628
|
+
var ObjectListItemTitle = import_react67.css`
|
|
6572
6629
|
color: var(--typography-base);
|
|
6573
6630
|
display: block;
|
|
6574
6631
|
font-size: var(--fs-sm);
|
|
6575
6632
|
`;
|
|
6576
|
-
var ObjectListItemSubtitle =
|
|
6633
|
+
var ObjectListItemSubtitle = import_react67.css`
|
|
6577
6634
|
color: var(--gray-500);
|
|
6578
6635
|
display: block;
|
|
6579
6636
|
font-size: var(--fs-xs);
|
|
6580
6637
|
line-height: 1;
|
|
6581
6638
|
`;
|
|
6582
|
-
var ObjectListItemInfoContainer =
|
|
6639
|
+
var ObjectListItemInfoContainer = import_react67.css`
|
|
6583
6640
|
align-items: center;
|
|
6584
6641
|
display: flex;
|
|
6585
6642
|
gap: var(--spacing-sm);
|
|
6586
6643
|
justify-content: center;
|
|
6587
6644
|
`;
|
|
6588
|
-
var ObjectListItemControlledContent =
|
|
6645
|
+
var ObjectListItemControlledContent = import_react67.css`
|
|
6589
6646
|
display: flex;
|
|
6590
6647
|
gap: var(--spacing-sm);
|
|
6591
6648
|
`;
|
|
6592
|
-
var ObjectListItemUnControlledContent =
|
|
6649
|
+
var ObjectListItemUnControlledContent = import_react67.css`
|
|
6593
6650
|
margin-top: var(--spacing-sm);
|
|
6594
6651
|
grid-column: 1 / -1;
|
|
6595
6652
|
`;
|
|
@@ -6607,11 +6664,6 @@ var ObjectSearchListItem = ({
|
|
|
6607
6664
|
isMulti,
|
|
6608
6665
|
disabled,
|
|
6609
6666
|
children,
|
|
6610
|
-
editLink,
|
|
6611
|
-
editLinkIcon,
|
|
6612
|
-
createdAt,
|
|
6613
|
-
publishStatus,
|
|
6614
|
-
publishedAt,
|
|
6615
6667
|
...props
|
|
6616
6668
|
}) => {
|
|
6617
6669
|
const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
|
|
@@ -6664,19 +6716,202 @@ var ObjectSearchListItemLoadingSkeleton = () => {
|
|
|
6664
6716
|
return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
|
|
6665
6717
|
};
|
|
6666
6718
|
|
|
6667
|
-
// src/components/ObjectSearch/
|
|
6668
|
-
var
|
|
6669
|
-
var
|
|
6719
|
+
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6720
|
+
var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
|
|
6721
|
+
var ObjectSearchContainer = ({
|
|
6722
|
+
label,
|
|
6723
|
+
enableDynamicInputToResultId,
|
|
6724
|
+
searchFilters,
|
|
6725
|
+
resultList,
|
|
6726
|
+
children
|
|
6727
|
+
}) => {
|
|
6728
|
+
var _a, _b;
|
|
6729
|
+
const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
|
|
6730
|
+
const { flatVariables } = useVariables(true);
|
|
6731
|
+
const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
|
|
6732
|
+
const listItems = resultList != null ? resultList : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
6733
|
+
import_design_system35.ScrollableList,
|
|
6734
|
+
{
|
|
6735
|
+
role: "list",
|
|
6736
|
+
css: import_react68.css`
|
|
6737
|
+
> div {
|
|
6738
|
+
transition: max-height var(--duration-slow) var(--timing-ease-out);
|
|
6739
|
+
max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
|
|
6740
|
+
}
|
|
6741
|
+
`,
|
|
6742
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DefaultResultList, {})
|
|
6743
|
+
}
|
|
6744
|
+
);
|
|
6745
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_design_system35.VerticalRhythm, { children: [
|
|
6746
|
+
searchFilters,
|
|
6747
|
+
listItems
|
|
6748
|
+
] });
|
|
6749
|
+
const handleSelectedVariableChange = (selectedValue) => {
|
|
6750
|
+
var _a2;
|
|
6751
|
+
if (!selectedValue) {
|
|
6752
|
+
onSelectItem([]);
|
|
6753
|
+
return;
|
|
6754
|
+
}
|
|
6755
|
+
const { result, errors } = (0, import_canvas9.bindVariables)({
|
|
6756
|
+
value: selectedValue,
|
|
6757
|
+
variables: flatVariables,
|
|
6758
|
+
errorPrefix: "Dynamic input"
|
|
6759
|
+
});
|
|
6760
|
+
if (!result) {
|
|
6761
|
+
onSelectItem([]);
|
|
6762
|
+
return;
|
|
6763
|
+
}
|
|
6764
|
+
const item = (_a2 = list.items) == null ? void 0 : _a2.find((i) => i.id === result);
|
|
6765
|
+
onSelectItem([
|
|
6766
|
+
{
|
|
6767
|
+
title: selectedValue,
|
|
6768
|
+
contentType: (errors == null ? void 0 : errors.length) ? errors[0] instanceof Error ? errors[0].message : errors[0] : `Current dynamic value "${result}" is not an ID in the options`,
|
|
6769
|
+
// spread any matched list item, overriding the above default props
|
|
6770
|
+
...item,
|
|
6771
|
+
// we want to make sure the ID is our dynamic value
|
|
6772
|
+
id: selectedValue
|
|
6773
|
+
}
|
|
6774
|
+
]);
|
|
6775
|
+
};
|
|
6776
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system35.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_design_system35.VerticalRhythm, { children: [
|
|
6777
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system35.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
6778
|
+
InputVariables,
|
|
6779
|
+
{
|
|
6780
|
+
label,
|
|
6781
|
+
value: inputValue,
|
|
6782
|
+
onChange: (value) => {
|
|
6783
|
+
if (value === inputValue) {
|
|
6784
|
+
return;
|
|
6785
|
+
}
|
|
6786
|
+
handleSelectedVariableChange(value);
|
|
6787
|
+
},
|
|
6788
|
+
inputWhenNoVariables: body,
|
|
6789
|
+
disableVariables: !enableDynamicInputToResultId
|
|
6790
|
+
}
|
|
6791
|
+
) : body }),
|
|
6792
|
+
children
|
|
6793
|
+
] }) });
|
|
6794
|
+
};
|
|
6795
|
+
var DefaultResultList = () => {
|
|
6796
|
+
var _a;
|
|
6797
|
+
const { list } = useObjectSearchContext();
|
|
6798
|
+
if (!list.items) {
|
|
6799
|
+
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
6800
|
+
}
|
|
6801
|
+
if (list.items.length === 0) {
|
|
6802
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system35.Callout, { type: "info", children: "No results were found" });
|
|
6803
|
+
}
|
|
6804
|
+
return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ObjectSearchListItem, { ...item }, item.id));
|
|
6805
|
+
};
|
|
6670
6806
|
|
|
6671
|
-
// src/components/ObjectSearch/
|
|
6807
|
+
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6672
6808
|
var import_design_system36 = require("@uniformdev/design-system");
|
|
6809
|
+
var import_react70 = require("react");
|
|
6810
|
+
|
|
6811
|
+
// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
|
|
6812
|
+
var import_react69 = require("@emotion/react");
|
|
6813
|
+
var ObjectSearchFilterContainerLabel = import_react69.css`
|
|
6814
|
+
align-items: center;
|
|
6815
|
+
display: flex;
|
|
6816
|
+
font-size: var(--fs-sm);
|
|
6817
|
+
font-weight: var(--fw-bold);
|
|
6818
|
+
line-height: 1rem;
|
|
6819
|
+
margin-bottom: var(--spacing-sm);
|
|
6820
|
+
`;
|
|
6821
|
+
var ObjectSearchFilterContainer = import_react69.css`
|
|
6822
|
+
display: grid;
|
|
6823
|
+
gap: var(--spacing-base);
|
|
6824
|
+
`;
|
|
6825
|
+
var ObjectSearchFilterGrid = (gridColumns) => import_react69.css`
|
|
6826
|
+
display: grid;
|
|
6827
|
+
grid-template-columns: ${gridColumns};
|
|
6828
|
+
gap: var(--spacing-base);
|
|
6829
|
+
`;
|
|
6830
|
+
|
|
6831
|
+
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6832
|
+
var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
|
|
6833
|
+
var ObjectSearchFilter = ({
|
|
6834
|
+
requireContentType,
|
|
6835
|
+
typeSelectorAllTypesOptionText = "All content types",
|
|
6836
|
+
searchInputName = "searchText",
|
|
6837
|
+
searchInputPlaceholderText = "Enter keyword to narrow your results",
|
|
6838
|
+
selectLabel = "Content Type Select",
|
|
6839
|
+
selectOptions
|
|
6840
|
+
}) => {
|
|
6841
|
+
var _a, _b;
|
|
6842
|
+
const { query, onSetQuery } = useObjectSearchContext();
|
|
6843
|
+
const [searchState, setSearchState] = (0, import_react70.useState)({
|
|
6844
|
+
contentType: (_a = query.contentType) != null ? _a : "",
|
|
6845
|
+
keyword: (_b = query.keyword) != null ? _b : ""
|
|
6846
|
+
});
|
|
6847
|
+
const handleFilterChange = (value) => {
|
|
6848
|
+
setSearchState((prev) => {
|
|
6849
|
+
return { ...prev, ...value };
|
|
6850
|
+
});
|
|
6851
|
+
onSetQuery({ ...query, ...value });
|
|
6852
|
+
};
|
|
6853
|
+
const memoizedSelectOptions = (0, import_react70.useMemo)(() => {
|
|
6854
|
+
if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
|
|
6855
|
+
return [];
|
|
6856
|
+
}
|
|
6857
|
+
return [
|
|
6858
|
+
...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
|
|
6859
|
+
...selectOptions != null ? selectOptions : []
|
|
6860
|
+
];
|
|
6861
|
+
}, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
|
|
6862
|
+
const shouldRenderSelect = memoizedSelectOptions.length > 0;
|
|
6863
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
|
|
6864
|
+
"fieldset",
|
|
6865
|
+
{
|
|
6866
|
+
css: [
|
|
6867
|
+
ObjectSearchFilterContainer,
|
|
6868
|
+
ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
|
|
6869
|
+
],
|
|
6870
|
+
children: [
|
|
6871
|
+
memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
6872
|
+
import_design_system36.InputSelect,
|
|
6873
|
+
{
|
|
6874
|
+
label: selectLabel,
|
|
6875
|
+
showLabel: false,
|
|
6876
|
+
onChange: (e) => handleFilterChange({ contentType: e.target.value }),
|
|
6877
|
+
options: memoizedSelectOptions,
|
|
6878
|
+
value: query.contentType
|
|
6879
|
+
}
|
|
6880
|
+
) : null,
|
|
6881
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
6882
|
+
import_design_system36.DebouncedInputKeywordSearch,
|
|
6883
|
+
{
|
|
6884
|
+
inputFieldName: searchInputName,
|
|
6885
|
+
placeholder: searchInputPlaceholderText,
|
|
6886
|
+
onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
|
|
6887
|
+
disabledFieldSubmission: true,
|
|
6888
|
+
defaultValue: searchState.keyword,
|
|
6889
|
+
delay: 300
|
|
6890
|
+
}
|
|
6891
|
+
)
|
|
6892
|
+
]
|
|
6893
|
+
}
|
|
6894
|
+
);
|
|
6895
|
+
};
|
|
6896
|
+
|
|
6897
|
+
// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
|
|
6898
|
+
var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
|
|
6899
|
+
var ObjectSearchFilterContainer2 = ({ label, children }) => {
|
|
6900
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
|
|
6901
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
|
|
6902
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { css: ObjectSearchFilterContainer, children })
|
|
6903
|
+
] });
|
|
6904
|
+
};
|
|
6905
|
+
|
|
6906
|
+
// src/components/ObjectSearch/ObjectSearchResultItem.tsx
|
|
6907
|
+
var import_design_system38 = require("@uniformdev/design-system");
|
|
6673
6908
|
var import_timeago3 = require("timeago.js");
|
|
6674
6909
|
|
|
6675
6910
|
// src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
|
|
6676
|
-
var
|
|
6677
|
-
var
|
|
6678
|
-
var ButtonStyles =
|
|
6679
|
-
${
|
|
6911
|
+
var import_react71 = require("@emotion/react");
|
|
6912
|
+
var import_design_system37 = require("@uniformdev/design-system");
|
|
6913
|
+
var ButtonStyles = import_react71.css`
|
|
6914
|
+
${import_design_system37.button}
|
|
6680
6915
|
background: transparent;
|
|
6681
6916
|
border: 1px solid var(--typography-base);
|
|
6682
6917
|
color: var(--typography-base);
|
|
@@ -6702,20 +6937,20 @@ var ButtonStyles = import_react69.css`
|
|
|
6702
6937
|
text-decoration: none;
|
|
6703
6938
|
}
|
|
6704
6939
|
`;
|
|
6705
|
-
var ButtonIcon =
|
|
6940
|
+
var ButtonIcon = import_react71.css`
|
|
6706
6941
|
width: 1rem;
|
|
6707
6942
|
height: 1rem;
|
|
6708
6943
|
`;
|
|
6709
6944
|
|
|
6710
6945
|
// src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
|
|
6711
|
-
var
|
|
6946
|
+
var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
|
|
6712
6947
|
var ObjectSearchResultItemButton = ({
|
|
6713
6948
|
text,
|
|
6714
6949
|
icon,
|
|
6715
6950
|
...props
|
|
6716
6951
|
}) => {
|
|
6717
|
-
return /* @__PURE__ */ (0,
|
|
6718
|
-
!icon ? null : /* @__PURE__ */ (0,
|
|
6952
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("button", { type: "button", css: ButtonStyles, ...props, children: [
|
|
6953
|
+
!icon ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Image, { src: icon, css: ButtonIcon }),
|
|
6719
6954
|
text
|
|
6720
6955
|
] });
|
|
6721
6956
|
};
|
|
@@ -6724,15 +6959,15 @@ var LinkButton = ({
|
|
|
6724
6959
|
icon,
|
|
6725
6960
|
...props
|
|
6726
6961
|
}) => {
|
|
6727
|
-
return /* @__PURE__ */ (0,
|
|
6728
|
-
!icon ? null : /* @__PURE__ */ (0,
|
|
6962
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
|
|
6963
|
+
!icon ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Image, { src: icon, css: ButtonIcon }),
|
|
6729
6964
|
text
|
|
6730
6965
|
] });
|
|
6731
6966
|
};
|
|
6732
6967
|
|
|
6733
6968
|
// src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
|
|
6734
|
-
var
|
|
6735
|
-
var ObjectSearchResultItemContainer =
|
|
6969
|
+
var import_react72 = require("@emotion/react");
|
|
6970
|
+
var ObjectSearchResultItemContainer = import_react72.css`
|
|
6736
6971
|
align-items: center;
|
|
6737
6972
|
border: 1px solid var(--gray-300);
|
|
6738
6973
|
border-radius: var(--rounded-base);
|
|
@@ -6748,7 +6983,7 @@ var ObjectSearchResultItemContainer = import_react70.css`
|
|
|
6748
6983
|
}
|
|
6749
6984
|
}
|
|
6750
6985
|
`;
|
|
6751
|
-
var ObjectSearchDragHandle =
|
|
6986
|
+
var ObjectSearchDragHandle = import_react72.css`
|
|
6752
6987
|
border-left: 2px dotted var(--gray-300);
|
|
6753
6988
|
border-right: 2px dotted var(--gray-300);
|
|
6754
6989
|
position: absolute;
|
|
@@ -6757,41 +6992,41 @@ var ObjectSearchDragHandle = import_react70.css`
|
|
|
6757
6992
|
transition: opacity var(--duration-fast) var(--timing-ease-out);
|
|
6758
6993
|
opacity: 0;
|
|
6759
6994
|
`;
|
|
6760
|
-
var ObjectSearchResultItemSubtitle =
|
|
6995
|
+
var ObjectSearchResultItemSubtitle = import_react72.css`
|
|
6761
6996
|
color: var(--gray-500);
|
|
6762
6997
|
display: block;
|
|
6763
6998
|
font-size: var(--fs-xs);
|
|
6764
6999
|
line-height: 1;
|
|
6765
7000
|
`;
|
|
6766
|
-
var ObjectSearchResultItemTitle =
|
|
7001
|
+
var ObjectSearchResultItemTitle = import_react72.css`
|
|
6767
7002
|
align-items: center;
|
|
6768
7003
|
color: var(--typography-base);
|
|
6769
7004
|
display: flex;
|
|
6770
7005
|
gap: var(--spacing-xs);
|
|
6771
7006
|
`;
|
|
6772
|
-
var ObjectSearchResultItemTimeStamp =
|
|
7007
|
+
var ObjectSearchResultItemTimeStamp = import_react72.css`
|
|
6773
7008
|
color: var(--gray-500);
|
|
6774
7009
|
font-size: var(--fs-xs);
|
|
6775
7010
|
`;
|
|
6776
|
-
var ObjectSearchAuthorStateGroup =
|
|
7011
|
+
var ObjectSearchAuthorStateGroup = import_react72.css`
|
|
6777
7012
|
align-items: center;
|
|
6778
7013
|
display: flex;
|
|
6779
7014
|
gap: var(--spacing-sm);
|
|
6780
7015
|
`;
|
|
6781
|
-
var ObjectSearchUpdateGroup =
|
|
7016
|
+
var ObjectSearchUpdateGroup = import_react72.css`
|
|
6782
7017
|
display: grid;
|
|
6783
7018
|
`;
|
|
6784
|
-
var ObjectSearchContentContainer =
|
|
7019
|
+
var ObjectSearchContentContainer = import_react72.css`
|
|
6785
7020
|
display: flex;
|
|
6786
7021
|
gap: var(--spacing-base);
|
|
6787
7022
|
`;
|
|
6788
|
-
var ObjectSearchImage =
|
|
7023
|
+
var ObjectSearchImage = import_react72.css`
|
|
6789
7024
|
width: 56px;
|
|
6790
7025
|
object-fit: contain;
|
|
6791
7026
|
`;
|
|
6792
7027
|
|
|
6793
7028
|
// src/components/ObjectSearch/ObjectSearchResultItem.tsx
|
|
6794
|
-
var
|
|
7029
|
+
var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
|
|
6795
7030
|
var ObjectSearchResultItem = ({
|
|
6796
7031
|
id,
|
|
6797
7032
|
title,
|
|
@@ -6815,66 +7050,70 @@ var ObjectSearchResultItem = ({
|
|
|
6815
7050
|
onSelectItem({ id, title: id });
|
|
6816
7051
|
onRemove == null ? void 0 : onRemove();
|
|
6817
7052
|
};
|
|
6818
|
-
return /* @__PURE__ */ (0,
|
|
6819
|
-
disableDnD ? null : /* @__PURE__ */ (0,
|
|
6820
|
-
/* @__PURE__ */ (0,
|
|
6821
|
-
!imageUrl ? null : /* @__PURE__ */ (0,
|
|
6822
|
-
/* @__PURE__ */ (0,
|
|
6823
|
-
/* @__PURE__ */ (0,
|
|
6824
|
-
/* @__PURE__ */ (0,
|
|
7053
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchResultItemContainer, "data-testid": "search-result-item", children: [
|
|
7054
|
+
disableDnD ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
|
|
7055
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchContentContainer, children: [
|
|
7056
|
+
!imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
|
|
7057
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { children: [
|
|
7058
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { css: ObjectSearchResultItemSubtitle, "data-testid": "sub-title", children: formatedContentType }),
|
|
7059
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { role: "heading", css: ObjectSearchResultItemTitle, "data-testid": "title", children: [
|
|
6825
7060
|
title != null ? title : name,
|
|
6826
|
-
!popoverData ? null : /* @__PURE__ */ (0,
|
|
7061
|
+
!popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_design_system38.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
|
|
6827
7062
|
] }),
|
|
6828
|
-
!createdAt && !publishStatus ? null : /* @__PURE__ */ (0,
|
|
6829
|
-
!(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0,
|
|
6830
|
-
!createdAt && !publishedAt ? null : /* @__PURE__ */ (0,
|
|
6831
|
-
!createdAt ? null : /* @__PURE__ */ (0,
|
|
6832
|
-
/* @__PURE__ */ (0,
|
|
7063
|
+
!createdAt && !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
|
|
7064
|
+
!(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_design_system38.Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
|
|
7065
|
+
!createdAt && !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchUpdateGroup, children: [
|
|
7066
|
+
!createdAt ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
|
|
7067
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("strong", { children: "Last updated: " }),
|
|
6833
7068
|
(0, import_timeago3.format)(createdAt)
|
|
6834
7069
|
] }),
|
|
6835
|
-
!publishedAt ? null : /* @__PURE__ */ (0,
|
|
6836
|
-
/* @__PURE__ */ (0,
|
|
7070
|
+
!publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
|
|
7071
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("strong", { children: "Last published: " }),
|
|
6837
7072
|
(0, import_timeago3.format)(publishedAt)
|
|
6838
7073
|
] })
|
|
6839
7074
|
] })
|
|
6840
7075
|
] }),
|
|
6841
|
-
/* @__PURE__ */ (0,
|
|
7076
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { children })
|
|
6842
7077
|
] })
|
|
6843
7078
|
] }) }),
|
|
6844
|
-
!editLink && hideRemoveButton ? null : /* @__PURE__ */ (0,
|
|
6845
|
-
!editLink ? null : /* @__PURE__ */ (0,
|
|
6846
|
-
hideRemoveButton ? null : /* @__PURE__ */ (0,
|
|
7079
|
+
!editLink && hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
|
|
7080
|
+
!editLink ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
|
|
7081
|
+
hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_design_system38.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
|
|
6847
7082
|
] })
|
|
6848
7083
|
] });
|
|
6849
7084
|
};
|
|
6850
7085
|
|
|
7086
|
+
// src/components/ObjectSearch/ObjectSearchResultList.tsx
|
|
7087
|
+
var import_design_system39 = require("@uniformdev/design-system");
|
|
7088
|
+
var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
|
|
7089
|
+
|
|
6851
7090
|
// src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
|
|
6852
|
-
var
|
|
6853
|
-
var ObjectSearchResultListContainer =
|
|
7091
|
+
var import_react73 = require("@emotion/react");
|
|
7092
|
+
var ObjectSearchResultListContainer = import_react73.css`
|
|
6854
7093
|
align-items: center;
|
|
6855
7094
|
display: flex;
|
|
6856
7095
|
gap: var(--spacing-sm);
|
|
6857
7096
|
justify-content: space-between;
|
|
6858
7097
|
`;
|
|
6859
|
-
var ObjectSearchDragContainer =
|
|
7098
|
+
var ObjectSearchDragContainer = import_react73.css`
|
|
6860
7099
|
margin: 0 0 var(--spacing-sm);
|
|
6861
7100
|
`;
|
|
6862
|
-
var ObjectSearchContainerDragging =
|
|
7101
|
+
var ObjectSearchContainerDragging = import_react73.css`
|
|
6863
7102
|
box-shadow: var(--shadow-base);
|
|
6864
7103
|
opacity: var(--opacity-50);
|
|
6865
7104
|
`;
|
|
6866
|
-
var ObjectSearchResultListCounterContainer =
|
|
7105
|
+
var ObjectSearchResultListCounterContainer = import_react73.css`
|
|
6867
7106
|
align-items: center;
|
|
6868
7107
|
display: flex;
|
|
6869
7108
|
gap: var(--spacing-sm);
|
|
6870
7109
|
`;
|
|
6871
|
-
var ObjectSearchResultListTitle =
|
|
7110
|
+
var ObjectSearchResultListTitle = import_react73.css`
|
|
6872
7111
|
font-weight: var(--fw-bold);
|
|
6873
7112
|
line-height: 1;
|
|
6874
7113
|
`;
|
|
6875
7114
|
|
|
6876
7115
|
// src/components/ObjectSearch/ObjectSearchResultList.tsx
|
|
6877
|
-
var
|
|
7116
|
+
var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
|
|
6878
7117
|
function ObjectSearchResultList({
|
|
6879
7118
|
resultLabelText = "Selected",
|
|
6880
7119
|
removeButtonText = "Remove all",
|
|
@@ -6882,13 +7121,13 @@ function ObjectSearchResultList({
|
|
|
6882
7121
|
hideRemoveButton = false,
|
|
6883
7122
|
resultLabelOverride,
|
|
6884
7123
|
additionalButtons,
|
|
6885
|
-
renderResultComponent = (value) => /* @__PURE__ */ (0,
|
|
7124
|
+
renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ObjectSearchResultItem, { ...value }),
|
|
6886
7125
|
multiSelectId,
|
|
6887
7126
|
disableDnD = false,
|
|
6888
7127
|
getContainerForDnDReparenting,
|
|
6889
|
-
whenNothingSelected
|
|
7128
|
+
whenNothingSelected = null
|
|
6890
7129
|
}) {
|
|
6891
|
-
const { selectedListItems, onRemoveAllSelectedItems, onSelectItem
|
|
7130
|
+
const { selectedListItems, onRemoveAllSelectedItems, onSelectItem } = useObjectSearchContext();
|
|
6892
7131
|
const handleRemoveAllSelectedItems = () => {
|
|
6893
7132
|
onRemoveAllSelectedItems();
|
|
6894
7133
|
onRemoveAllSelected == null ? void 0 : onRemoveAllSelected();
|
|
@@ -6909,7 +7148,7 @@ function ObjectSearchResultList({
|
|
|
6909
7148
|
...item,
|
|
6910
7149
|
disableDnD: selectedListItems.length === 1 || disableDnD
|
|
6911
7150
|
});
|
|
6912
|
-
return /* @__PURE__ */ (0,
|
|
7151
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
6913
7152
|
"div",
|
|
6914
7153
|
{
|
|
6915
7154
|
css: [
|
|
@@ -6924,20 +7163,17 @@ function ObjectSearchResultList({
|
|
|
6924
7163
|
}
|
|
6925
7164
|
);
|
|
6926
7165
|
};
|
|
6927
|
-
|
|
6928
|
-
|
|
6929
|
-
|
|
6930
|
-
|
|
6931
|
-
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { role: "group", css: ObjectSearchResultListContainer, children: [
|
|
6932
|
-
!resultLabelOverride ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
|
|
6933
|
-
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
|
|
7166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
|
|
7167
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "group", css: ObjectSearchResultListContainer, children: [
|
|
7168
|
+
!resultLabelOverride ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
|
|
7169
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
|
|
6934
7170
|
" ",
|
|
6935
|
-
!selectedListItems.length ? null : /* @__PURE__ */ (0,
|
|
7171
|
+
!selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_design_system39.Counter, { count: selectedListItems.length })
|
|
6936
7172
|
] }) : resultLabelOverride,
|
|
6937
|
-
/* @__PURE__ */ (0,
|
|
7173
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
|
|
6938
7174
|
additionalButtons,
|
|
6939
|
-
hideRemoveButton ? null : /* @__PURE__ */ (0,
|
|
6940
|
-
|
|
7175
|
+
hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
7176
|
+
import_design_system39.Button,
|
|
6941
7177
|
{
|
|
6942
7178
|
buttonType: "ghostDestructive",
|
|
6943
7179
|
size: "xs",
|
|
@@ -6948,17 +7184,15 @@ function ObjectSearchResultList({
|
|
|
6948
7184
|
)
|
|
6949
7185
|
] })
|
|
6950
7186
|
] }),
|
|
6951
|
-
|
|
6952
|
-
showEmptyResults ? whenNothingSelected : null,
|
|
6953
|
-
showResults ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
7187
|
+
!selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
6954
7188
|
import_react_beautiful_dnd4.Droppable,
|
|
6955
7189
|
{
|
|
6956
7190
|
droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select",
|
|
6957
7191
|
renderClone: getContainerForDnDReparenting ? getDraggableItem : void 0,
|
|
6958
7192
|
getContainerForClone: getContainerForDnDReparenting,
|
|
6959
|
-
children: (provided) => /* @__PURE__ */ (0,
|
|
7193
|
+
children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
|
|
6960
7194
|
selectedListItems.map((item, i) => {
|
|
6961
|
-
return /* @__PURE__ */ (0,
|
|
7195
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
6962
7196
|
import_react_beautiful_dnd4.Draggable,
|
|
6963
7197
|
{
|
|
6964
7198
|
draggableId: item.id,
|
|
@@ -6972,293 +7206,29 @@ function ObjectSearchResultList({
|
|
|
6972
7206
|
provided.placeholder
|
|
6973
7207
|
] })
|
|
6974
7208
|
}
|
|
6975
|
-
) })
|
|
7209
|
+
) })
|
|
6976
7210
|
] });
|
|
6977
7211
|
}
|
|
6978
7212
|
|
|
6979
|
-
// src/components/ObjectSearch/
|
|
6980
|
-
var
|
|
6981
|
-
var
|
|
6982
|
-
|
|
6983
|
-
|
|
6984
|
-
|
|
6985
|
-
|
|
6986
|
-
|
|
6987
|
-
|
|
6988
|
-
|
|
6989
|
-
|
|
6990
|
-
|
|
6991
|
-
|
|
6992
|
-
|
|
6993
|
-
|
|
6994
|
-
|
|
6995
|
-
|
|
6996
|
-
|
|
6997
|
-
|
|
6998
|
-
{
|
|
6999
|
-
role: "list",
|
|
7000
|
-
css: import_react72.css`
|
|
7001
|
-
> div {
|
|
7002
|
-
transition: max-height var(--duration-slow) var(--timing-ease-out);
|
|
7003
|
-
max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
|
|
7004
|
-
}
|
|
7005
|
-
`,
|
|
7006
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DefaultResultList, {})
|
|
7007
|
-
}
|
|
7008
|
-
);
|
|
7009
|
-
const handleSelectedVariableChange = (selectedValue) => {
|
|
7010
|
-
var _a2;
|
|
7011
|
-
if (!selectedValue) {
|
|
7012
|
-
onSelectItem([]);
|
|
7013
|
-
return;
|
|
7014
|
-
}
|
|
7015
|
-
const { result, errors } = (0, import_canvas9.bindVariables)({
|
|
7016
|
-
value: selectedValue,
|
|
7017
|
-
variables: flatVariables,
|
|
7018
|
-
errorPrefix: "Dynamic input"
|
|
7019
|
-
});
|
|
7020
|
-
if (!result) {
|
|
7021
|
-
onSelectItem([]);
|
|
7022
|
-
return;
|
|
7023
|
-
}
|
|
7024
|
-
const item = (_a2 = list.items) == null ? void 0 : _a2.find((i) => i.id === result);
|
|
7025
|
-
onSelectItem([
|
|
7026
|
-
{
|
|
7027
|
-
title: selectedValue,
|
|
7028
|
-
contentType: (errors == null ? void 0 : errors.length) ? errors[0] instanceof Error ? errors[0].message : errors[0] : `Current dynamic value "${result}" is not an ID in the options`,
|
|
7029
|
-
// spread any matched list item, overriding the above default props
|
|
7030
|
-
...item,
|
|
7031
|
-
// we want to make sure the ID is our dynamic value
|
|
7032
|
-
id: selectedValue
|
|
7033
|
-
}
|
|
7034
|
-
]);
|
|
7035
|
-
if (hasReferencedVariables(selectedValue)) {
|
|
7036
|
-
onSetQuery({ ...query, dynamicEntryId: selectedValue });
|
|
7037
|
-
}
|
|
7038
|
-
};
|
|
7039
|
-
const showSearchList = !label || !isDynamicEntryIdAvailable || !enableDynamicInputToResultId;
|
|
7040
|
-
return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_design_system38.VerticalRhythm, { children: [
|
|
7041
|
-
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_design_system38.VerticalRhythm, { children: [
|
|
7042
|
-
label ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
7043
|
-
InputVariables,
|
|
7044
|
-
{
|
|
7045
|
-
id: "entryId",
|
|
7046
|
-
label,
|
|
7047
|
-
value: inputValue,
|
|
7048
|
-
onChange: (value) => {
|
|
7049
|
-
if (value === inputValue) {
|
|
7050
|
-
return;
|
|
7051
|
-
}
|
|
7052
|
-
handleSelectedVariableChange(value);
|
|
7053
|
-
},
|
|
7054
|
-
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_jsx_runtime64.Fragment, { children: searchFilters }),
|
|
7055
|
-
disableVariables: !enableDynamicInputToResultId
|
|
7056
|
-
}
|
|
7057
|
-
) : searchFilters,
|
|
7058
|
-
showSearchList ? listItems : null
|
|
7059
|
-
] }) }),
|
|
7060
|
-
children
|
|
7061
|
-
] }) });
|
|
7062
|
-
};
|
|
7063
|
-
var DefaultResultList = () => {
|
|
7064
|
-
var _a, _b;
|
|
7065
|
-
const { list, isListLoading } = useObjectSearchContext();
|
|
7066
|
-
if (isListLoading || !list.items) {
|
|
7067
|
-
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
7068
|
-
}
|
|
7069
|
-
if (((_a = list.items) == null ? void 0 : _a.length) === 0) {
|
|
7070
|
-
return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.Callout, { type: "info", children: "No results were found" });
|
|
7071
|
-
}
|
|
7072
|
-
return (_b = list.items) == null ? void 0 : _b.map((item) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ObjectSearchListItem, { ...item }, item.id));
|
|
7073
|
-
};
|
|
7074
|
-
|
|
7075
|
-
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
7076
|
-
var import_design_system39 = require("@uniformdev/design-system");
|
|
7077
|
-
var import_react76 = require("react");
|
|
7078
|
-
var import_react_use5 = require("react-use");
|
|
7079
|
-
|
|
7080
|
-
// src/utils/createLocationValidator.ts
|
|
7081
|
-
function createLocationValidator(setValue, validate) {
|
|
7082
|
-
return (dispatch) => setValue((previous) => {
|
|
7083
|
-
const { newValue, options } = dispatch(previous);
|
|
7084
|
-
return { newValue, options: validate(newValue, options) };
|
|
7085
|
-
});
|
|
7086
|
-
}
|
|
7087
|
-
|
|
7088
|
-
// src/utils/useContentDataResourceLocaleInfo.ts
|
|
7089
|
-
var import_canvas10 = require("@uniformdev/canvas");
|
|
7090
|
-
var import_react74 = require("react");
|
|
7091
|
-
function useContentDataResourceLocaleInfo({
|
|
7092
|
-
locale,
|
|
7093
|
-
setLocale,
|
|
7094
|
-
dynamicInputs
|
|
7095
|
-
}) {
|
|
7096
|
-
var _a;
|
|
7097
|
-
const setLocaleRef = (0, import_react74.useRef)(setLocale);
|
|
7098
|
-
setLocaleRef.current = setLocale;
|
|
7099
|
-
const { flatVariables } = useVariables();
|
|
7100
|
-
const effectiveLocale = locale != null ? locale : dynamicInputs[import_canvas10.LOCALE_DYNAMIC_INPUT_NAME] ? (0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME) : "";
|
|
7101
|
-
const boundLocale = (_a = (0, import_canvas10.bindVariables)({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
|
|
7102
|
-
(0, import_react74.useEffect)(() => {
|
|
7103
|
-
if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
|
|
7104
|
-
setLocaleRef.current((0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME));
|
|
7105
|
-
}
|
|
7106
|
-
}, [locale, effectiveLocale]);
|
|
7107
|
-
return { effectiveLocale, boundLocale: boundLocale ? boundLocale : void 0 };
|
|
7108
|
-
}
|
|
7109
|
-
|
|
7110
|
-
// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
|
|
7111
|
-
var import_react75 = require("@emotion/react");
|
|
7112
|
-
var ObjectSearchFilterContainerLabel = import_react75.css`
|
|
7113
|
-
align-items: center;
|
|
7114
|
-
display: flex;
|
|
7115
|
-
font-size: var(--fs-sm);
|
|
7116
|
-
font-weight: var(--fw-bold);
|
|
7117
|
-
line-height: 1rem;
|
|
7118
|
-
margin-bottom: var(--spacing-sm);
|
|
7119
|
-
`;
|
|
7120
|
-
var ObjectSearchFilterContainer = import_react75.css`
|
|
7121
|
-
display: grid;
|
|
7122
|
-
gap: var(--spacing-base);
|
|
7123
|
-
`;
|
|
7124
|
-
var ObjectSearchFilterGrid = (gridColumns) => import_react75.css`
|
|
7125
|
-
display: grid;
|
|
7126
|
-
grid-template-columns: ${gridColumns};
|
|
7127
|
-
gap: var(--spacing-base);
|
|
7128
|
-
`;
|
|
7129
|
-
|
|
7130
|
-
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
7131
|
-
var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
|
|
7132
|
-
var ObjectSearchFilter = ({
|
|
7133
|
-
requireContentType,
|
|
7134
|
-
typeSelectorAllTypesOptionText = "All content types",
|
|
7135
|
-
searchInputName = "searchText",
|
|
7136
|
-
searchInputPlaceholderText = "Enter keyword to narrow your results",
|
|
7137
|
-
selectLabel = "Content Type Select",
|
|
7138
|
-
localeFilterLabel = "Filter by locale",
|
|
7139
|
-
selectOptions
|
|
7140
|
-
}) => {
|
|
7141
|
-
var _a, _b, _c;
|
|
7142
|
-
const { query, onSetQuery, localeOptions, enableFilterByLocale } = useObjectSearchContext();
|
|
7143
|
-
const dynamicInputs = useDataResourceDynamicInputs();
|
|
7144
|
-
const { boundLocale = "", effectiveLocale } = useContentDataResourceLocaleInfo({
|
|
7145
|
-
locale: query.locale,
|
|
7146
|
-
dynamicInputs: dynamicInputs != null ? dynamicInputs : {},
|
|
7147
|
-
setLocale: (newLocale) => handleFilterChange({ locale: newLocale != null ? newLocale : "" })
|
|
7148
|
-
});
|
|
7149
|
-
const [searchState, setSearchState] = (0, import_react76.useState)({
|
|
7150
|
-
keyword: (_a = query.keyword) != null ? _a : "",
|
|
7151
|
-
contentType: (_b = query.contentType) != null ? _b : "",
|
|
7152
|
-
locale: (_c = query.locale) != null ? _c : ""
|
|
7153
|
-
});
|
|
7154
|
-
const handleFilterChange = (value) => {
|
|
7155
|
-
setSearchState((prev) => {
|
|
7156
|
-
return { ...prev, ...value };
|
|
7157
|
-
});
|
|
7158
|
-
};
|
|
7159
|
-
(0, import_react_use5.useDebounce)(
|
|
7160
|
-
() => {
|
|
7161
|
-
onSetQuery({ ...query, ...searchState });
|
|
7162
|
-
},
|
|
7163
|
-
500,
|
|
7164
|
-
[searchState]
|
|
7165
|
-
);
|
|
7166
|
-
const memoizedSelectOptions = (0, import_react76.useMemo)(() => {
|
|
7167
|
-
if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
|
|
7168
|
-
return [];
|
|
7169
|
-
}
|
|
7170
|
-
return [
|
|
7171
|
-
...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
|
|
7172
|
-
...selectOptions != null ? selectOptions : []
|
|
7173
|
-
];
|
|
7174
|
-
}, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
|
|
7175
|
-
const shouldRenderSelect = memoizedSelectOptions.length > 0;
|
|
7176
|
-
return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_design_system39.VerticalRhythm, { gap: "base", children: [
|
|
7177
|
-
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
7178
|
-
"fieldset",
|
|
7179
|
-
{
|
|
7180
|
-
css: [
|
|
7181
|
-
ObjectSearchFilterContainer,
|
|
7182
|
-
ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
|
|
7183
|
-
],
|
|
7184
|
-
children: [
|
|
7185
|
-
memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
7186
|
-
import_design_system39.InputSelect,
|
|
7187
|
-
{
|
|
7188
|
-
label: selectLabel,
|
|
7189
|
-
showLabel: false,
|
|
7190
|
-
onChange: (e) => handleFilterChange({ contentType: e.target.value }),
|
|
7191
|
-
options: memoizedSelectOptions,
|
|
7192
|
-
value: query.contentType,
|
|
7193
|
-
"data-testid": "select-entry"
|
|
7194
|
-
}
|
|
7195
|
-
) : null,
|
|
7196
|
-
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
7197
|
-
import_design_system39.DebouncedInputKeywordSearch,
|
|
7198
|
-
{
|
|
7199
|
-
inputFieldName: searchInputName,
|
|
7200
|
-
placeholder: searchInputPlaceholderText,
|
|
7201
|
-
onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
|
|
7202
|
-
disabledFieldSubmission: true,
|
|
7203
|
-
defaultValue: searchState.keyword,
|
|
7204
|
-
delay: 300
|
|
7205
|
-
}
|
|
7206
|
-
)
|
|
7207
|
-
]
|
|
7208
|
-
}
|
|
7209
|
-
),
|
|
7210
|
-
enableFilterByLocale && (localeOptions == null ? void 0 : localeOptions.length) && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
7211
|
-
InputVariables,
|
|
7212
|
-
{
|
|
7213
|
-
label: localeFilterLabel,
|
|
7214
|
-
id: "locale",
|
|
7215
|
-
value: effectiveLocale,
|
|
7216
|
-
onChange: (newLocale) => handleFilterChange({ locale: newLocale != null ? newLocale : "" }),
|
|
7217
|
-
disableInlineMenu: true,
|
|
7218
|
-
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
7219
|
-
import_design_system39.InputSelect,
|
|
7220
|
-
{
|
|
7221
|
-
id: "locale",
|
|
7222
|
-
options: localeOptions,
|
|
7223
|
-
name: "locale",
|
|
7224
|
-
label: "",
|
|
7225
|
-
value: boundLocale,
|
|
7226
|
-
onChange: (e) => handleFilterChange({ locale: e.target.value })
|
|
7227
|
-
}
|
|
7228
|
-
)
|
|
7229
|
-
}
|
|
7230
|
-
)
|
|
7231
|
-
] });
|
|
7232
|
-
};
|
|
7233
|
-
|
|
7234
|
-
// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
|
|
7235
|
-
var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
|
|
7236
|
-
var ObjectSearchFilterContainer2 = ({ label, children }) => {
|
|
7237
|
-
return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { children: [
|
|
7238
|
-
label ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
|
|
7239
|
-
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: ObjectSearchFilterContainer, children })
|
|
7240
|
-
] });
|
|
7241
|
-
};
|
|
7242
|
-
|
|
7243
|
-
// src/components/ObjectSearch/QueryFilter.tsx
|
|
7244
|
-
var import_design_system40 = require("@uniformdev/design-system");
|
|
7245
|
-
var import_react77 = require("react");
|
|
7246
|
-
var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
|
|
7247
|
-
var QueryFilter = ({
|
|
7248
|
-
requireContentType,
|
|
7249
|
-
queryFilterTitle = "Configure Query",
|
|
7250
|
-
contentTypeLabel = "Filter by content type",
|
|
7251
|
-
typeSelectorAllTypesOptionText = "All content types",
|
|
7252
|
-
contentTypeOptions,
|
|
7253
|
-
searchInputName = "searchText",
|
|
7254
|
-
searchInputPlaceholderText = "Enter keyword to narrow your results",
|
|
7255
|
-
searchInputLabel = "Query",
|
|
7256
|
-
countLabel = "Count",
|
|
7257
|
-
countValue = 5,
|
|
7258
|
-
sortLabel = "Sort By",
|
|
7259
|
-
sortOptions,
|
|
7260
|
-
sortOrderLabel = "Sort Order",
|
|
7261
|
-
sortOrderOptions = [
|
|
7213
|
+
// src/components/ObjectSearch/QueryFilter.tsx
|
|
7214
|
+
var import_design_system40 = require("@uniformdev/design-system");
|
|
7215
|
+
var import_react74 = require("react");
|
|
7216
|
+
var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
|
|
7217
|
+
var QueryFilter = ({
|
|
7218
|
+
requireContentType,
|
|
7219
|
+
queryFilterTitle = "Configure Query",
|
|
7220
|
+
contentTypeLabel = "Filter by content type",
|
|
7221
|
+
typeSelectorAllTypesOptionText = "All content types",
|
|
7222
|
+
contentTypeOptions,
|
|
7223
|
+
searchInputName = "searchText",
|
|
7224
|
+
searchInputPlaceholderText = "Enter keyword to narrow your results",
|
|
7225
|
+
searchInputLabel = "Query",
|
|
7226
|
+
countLabel = "Count",
|
|
7227
|
+
countValue = 5,
|
|
7228
|
+
sortLabel = "Sort By",
|
|
7229
|
+
sortOptions,
|
|
7230
|
+
sortOrderLabel = "Sort Order",
|
|
7231
|
+
sortOrderOptions = [
|
|
7262
7232
|
{
|
|
7263
7233
|
value: "asc",
|
|
7264
7234
|
label: "Ascending"
|
|
@@ -7272,7 +7242,7 @@ var QueryFilter = ({
|
|
|
7272
7242
|
}) => {
|
|
7273
7243
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
7274
7244
|
const { query, onSetQuery } = useObjectSearchContext();
|
|
7275
|
-
const [queryState, setQueryState] = (0,
|
|
7245
|
+
const [queryState, setQueryState] = (0, import_react74.useState)({
|
|
7276
7246
|
contentType: (_a = query.contentType) != null ? _a : "",
|
|
7277
7247
|
keyword: (_b = query.keyword) != null ? _b : "",
|
|
7278
7248
|
count: (_c = query.count) != null ? _c : countValue,
|
|
@@ -7283,7 +7253,7 @@ var QueryFilter = ({
|
|
|
7283
7253
|
setQueryState((prev) => ({ ...prev, ...value }));
|
|
7284
7254
|
onSetQuery({ ...query, ...value });
|
|
7285
7255
|
};
|
|
7286
|
-
(0,
|
|
7256
|
+
(0, import_react74.useEffect)(() => {
|
|
7287
7257
|
onSetQuery(queryState);
|
|
7288
7258
|
}, []);
|
|
7289
7259
|
return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("fieldset", { children: [
|
|
@@ -7408,106 +7378,9 @@ var QueryFilter = ({
|
|
|
7408
7378
|
] });
|
|
7409
7379
|
};
|
|
7410
7380
|
|
|
7411
|
-
// src/components/ObjectSearch/ObjectSearchListOfSearchResults.tsx
|
|
7412
|
-
var import_design_system41 = require("@uniformdev/design-system");
|
|
7413
|
-
var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
|
|
7414
|
-
function ObjectSearchListOfSearchResults() {
|
|
7415
|
-
var _a, _b;
|
|
7416
|
-
const { list, isListLoading } = useObjectSearchContext();
|
|
7417
|
-
if (isListLoading) {
|
|
7418
|
-
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
7419
|
-
}
|
|
7420
|
-
if (((_a = list.items) == null ? void 0 : _a.length) === 0) {
|
|
7421
|
-
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_design_system41.Callout, { type: "info", children: "No results were found" });
|
|
7422
|
-
}
|
|
7423
|
-
return (_b = list.items) == null ? void 0 : _b.map((item) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ObjectSearchListItem, { ...item }, item.id));
|
|
7424
|
-
}
|
|
7425
|
-
|
|
7426
|
-
// src/components/ObjectSearch/hooks/ControlledObjectSearchProvider.tsx
|
|
7427
|
-
var import_react78 = require("react");
|
|
7428
|
-
var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
|
|
7429
|
-
var ControlledObjectSearchProvider = ({
|
|
7430
|
-
selectedItems,
|
|
7431
|
-
searchResultItems,
|
|
7432
|
-
isSelectedItemsListLoading,
|
|
7433
|
-
isSearchResultsLoading,
|
|
7434
|
-
onSelectItemsChange,
|
|
7435
|
-
isMulti = false,
|
|
7436
|
-
children,
|
|
7437
|
-
onQueryChange = () => {
|
|
7438
|
-
},
|
|
7439
|
-
query = {},
|
|
7440
|
-
enableFilterByLocale,
|
|
7441
|
-
localeOptions,
|
|
7442
|
-
dynamicEntryId
|
|
7443
|
-
}) => {
|
|
7444
|
-
const { flatVariables } = useVariables(true);
|
|
7445
|
-
const querySearchDeferred = (0, import_react78.useDeferredValue)(query);
|
|
7446
|
-
const onSetQuery = (0, import_react78.useCallback)(
|
|
7447
|
-
(value2) => {
|
|
7448
|
-
const newQuery = { ...query, ...value2 };
|
|
7449
|
-
onQueryChange(newQuery);
|
|
7450
|
-
},
|
|
7451
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
7452
|
-
[onQueryChange]
|
|
7453
|
-
);
|
|
7454
|
-
const onSelectItem = (0, import_react78.useCallback)(
|
|
7455
|
-
(selectedResult) => {
|
|
7456
|
-
if (Array.isArray(selectedResult)) {
|
|
7457
|
-
onSelectItemsChange(selectedResult);
|
|
7458
|
-
} else {
|
|
7459
|
-
if (selectedItems == null ? void 0 : selectedItems.some((item) => item.id === selectedResult.id)) {
|
|
7460
|
-
onSelectItemsChange(selectedItems.filter((item) => item.id !== selectedResult.id));
|
|
7461
|
-
} else {
|
|
7462
|
-
onSelectItemsChange([...selectedItems != null ? selectedItems : [], selectedResult]);
|
|
7463
|
-
}
|
|
7464
|
-
}
|
|
7465
|
-
},
|
|
7466
|
-
[onSelectItemsChange, selectedItems]
|
|
7467
|
-
);
|
|
7468
|
-
const onRemoveAllSelectedItems = (0, import_react78.useCallback)(() => {
|
|
7469
|
-
onSelectItemsChange([]);
|
|
7470
|
-
}, [onSelectItemsChange]);
|
|
7471
|
-
const list = (0, import_react78.useMemo)(() => ({ items: searchResultItems }), [searchResultItems]);
|
|
7472
|
-
const boundQuery = (0, import_react78.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
|
|
7473
|
-
const value = (0, import_react78.useMemo)(
|
|
7474
|
-
() => ({
|
|
7475
|
-
boundQuery,
|
|
7476
|
-
onSetQuery,
|
|
7477
|
-
query: querySearchDeferred,
|
|
7478
|
-
onSelectItem,
|
|
7479
|
-
selectedListItems: selectedItems != null ? selectedItems : [],
|
|
7480
|
-
onRemoveAllSelectedItems,
|
|
7481
|
-
list,
|
|
7482
|
-
isSelectedItemsListLoading,
|
|
7483
|
-
isListLoading: isSearchResultsLoading,
|
|
7484
|
-
isMulti,
|
|
7485
|
-
localeOptions,
|
|
7486
|
-
enableFilterByLocale,
|
|
7487
|
-
dynamicEntryId
|
|
7488
|
-
}),
|
|
7489
|
-
[
|
|
7490
|
-
boundQuery,
|
|
7491
|
-
onSetQuery,
|
|
7492
|
-
querySearchDeferred,
|
|
7493
|
-
onSelectItem,
|
|
7494
|
-
selectedItems,
|
|
7495
|
-
isSelectedItemsListLoading,
|
|
7496
|
-
isSearchResultsLoading,
|
|
7497
|
-
onRemoveAllSelectedItems,
|
|
7498
|
-
list,
|
|
7499
|
-
isMulti,
|
|
7500
|
-
localeOptions,
|
|
7501
|
-
enableFilterByLocale,
|
|
7502
|
-
dynamicEntryId
|
|
7503
|
-
]
|
|
7504
|
-
);
|
|
7505
|
-
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ObjectSearchContext.Provider, { value, children });
|
|
7506
|
-
};
|
|
7507
|
-
|
|
7508
7381
|
// src/components/ParamTypeDynamicDataProvider.tsx
|
|
7509
|
-
var
|
|
7510
|
-
var
|
|
7382
|
+
var import_react75 = require("react");
|
|
7383
|
+
var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
|
|
7511
7384
|
function ParamTypeDynamicDataProvider(props) {
|
|
7512
7385
|
const { children } = props;
|
|
7513
7386
|
const {
|
|
@@ -7515,11 +7388,11 @@ function ParamTypeDynamicDataProvider(props) {
|
|
|
7515
7388
|
} = useMeshLocation("paramType");
|
|
7516
7389
|
const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
|
|
7517
7390
|
const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
|
|
7518
|
-
const variables = (0,
|
|
7391
|
+
const variables = (0, import_react75.useMemo)(
|
|
7519
7392
|
() => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
|
|
7520
7393
|
[dynamicInputsAsVariables, connectedDataAsVariables]
|
|
7521
7394
|
);
|
|
7522
|
-
return /* @__PURE__ */ (0,
|
|
7395
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(VariablesProvider, { value: variables, onChange: () => {
|
|
7523
7396
|
}, editVariableComponent: JsonMeshVariableEditor, children });
|
|
7524
7397
|
}
|
|
7525
7398
|
var JsonMeshVariableEditor = ({
|
|
@@ -7528,9 +7401,9 @@ var JsonMeshVariableEditor = ({
|
|
|
7528
7401
|
variable,
|
|
7529
7402
|
context
|
|
7530
7403
|
}) => {
|
|
7531
|
-
const sillyRef = (0,
|
|
7404
|
+
const sillyRef = (0, import_react75.useRef)(false);
|
|
7532
7405
|
const { editConnectedData } = useMeshLocation("paramType");
|
|
7533
|
-
(0,
|
|
7406
|
+
(0, import_react75.useEffect)(() => {
|
|
7534
7407
|
if (sillyRef.current) {
|
|
7535
7408
|
return;
|
|
7536
7409
|
}
|
|
@@ -7558,59 +7431,1631 @@ var JsonMeshVariableEditor = ({
|
|
|
7558
7431
|
return null;
|
|
7559
7432
|
};
|
|
7560
7433
|
|
|
7561
|
-
// src/components/SearchAndFilter/
|
|
7562
|
-
var
|
|
7563
|
-
|
|
7564
|
-
|
|
7565
|
-
|
|
7566
|
-
|
|
7567
|
-
|
|
7568
|
-
|
|
7569
|
-
|
|
7570
|
-
|
|
7571
|
-
|
|
7572
|
-
|
|
7573
|
-
|
|
7574
|
-
|
|
7575
|
-
|
|
7576
|
-
|
|
7577
|
-
|
|
7578
|
-
|
|
7579
|
-
|
|
7580
|
-
|
|
7581
|
-
|
|
7582
|
-
|
|
7583
|
-
|
|
7584
|
-
|
|
7585
|
-
|
|
7586
|
-
|
|
7587
|
-
|
|
7588
|
-
|
|
7434
|
+
// src/components/SearchAndFilter/constants.ts
|
|
7435
|
+
var NUMBER_OPERATORS = [
|
|
7436
|
+
{
|
|
7437
|
+
label: "equals...",
|
|
7438
|
+
symbol: "=",
|
|
7439
|
+
value: "eq",
|
|
7440
|
+
editorType: "number"
|
|
7441
|
+
},
|
|
7442
|
+
{
|
|
7443
|
+
label: "does not equal...",
|
|
7444
|
+
symbol: "\u2260",
|
|
7445
|
+
value: "neq",
|
|
7446
|
+
editorType: "number"
|
|
7447
|
+
},
|
|
7448
|
+
{
|
|
7449
|
+
label: "greater than...",
|
|
7450
|
+
symbol: ">",
|
|
7451
|
+
value: "gt",
|
|
7452
|
+
editorType: "number"
|
|
7453
|
+
},
|
|
7454
|
+
{
|
|
7455
|
+
label: "greater than or equal to...",
|
|
7456
|
+
symbol: "\u2265",
|
|
7457
|
+
value: "gte",
|
|
7458
|
+
editorType: "number"
|
|
7459
|
+
},
|
|
7460
|
+
{
|
|
7461
|
+
label: "less than...",
|
|
7462
|
+
symbol: "<",
|
|
7463
|
+
value: "lt",
|
|
7464
|
+
editorType: "number"
|
|
7465
|
+
},
|
|
7466
|
+
{
|
|
7467
|
+
label: "less than or equal to...",
|
|
7468
|
+
symbol: "\u2264",
|
|
7469
|
+
value: "lte",
|
|
7470
|
+
editorType: "number"
|
|
7471
|
+
},
|
|
7472
|
+
{
|
|
7473
|
+
label: "is empty",
|
|
7474
|
+
value: "ndef",
|
|
7475
|
+
editorType: "empty"
|
|
7476
|
+
},
|
|
7477
|
+
{
|
|
7478
|
+
label: "is between...",
|
|
7479
|
+
value: "between",
|
|
7480
|
+
editorType: "numberRange"
|
|
7481
|
+
},
|
|
7482
|
+
{
|
|
7483
|
+
label: "is not empty",
|
|
7484
|
+
value: "def",
|
|
7485
|
+
editorType: "empty"
|
|
7486
|
+
}
|
|
7487
|
+
];
|
|
7488
|
+
var DATE_OPERATORS = [
|
|
7489
|
+
{
|
|
7490
|
+
label: "is...",
|
|
7491
|
+
value: "eq",
|
|
7492
|
+
editorType: "date"
|
|
7493
|
+
},
|
|
7494
|
+
{
|
|
7495
|
+
label: "is between...",
|
|
7496
|
+
value: "between",
|
|
7497
|
+
editorType: "dateRange"
|
|
7498
|
+
},
|
|
7499
|
+
{
|
|
7500
|
+
label: "is before...",
|
|
7501
|
+
value: "lt",
|
|
7502
|
+
editorType: "date"
|
|
7503
|
+
},
|
|
7504
|
+
{
|
|
7505
|
+
label: "is after...",
|
|
7506
|
+
value: "gt",
|
|
7507
|
+
editorType: "date"
|
|
7508
|
+
},
|
|
7509
|
+
{
|
|
7510
|
+
label: "is on or before...",
|
|
7511
|
+
value: "lte",
|
|
7512
|
+
editorType: "date"
|
|
7513
|
+
},
|
|
7514
|
+
{
|
|
7515
|
+
label: "is on or after...",
|
|
7516
|
+
value: "gte",
|
|
7517
|
+
editorType: "date"
|
|
7518
|
+
},
|
|
7519
|
+
{
|
|
7520
|
+
label: "is empty",
|
|
7521
|
+
value: "ndef",
|
|
7522
|
+
editorType: "empty"
|
|
7523
|
+
},
|
|
7524
|
+
{
|
|
7525
|
+
label: "is not...",
|
|
7526
|
+
value: "neq",
|
|
7527
|
+
editorType: "date"
|
|
7528
|
+
},
|
|
7529
|
+
{
|
|
7530
|
+
label: "is not empty",
|
|
7531
|
+
value: "def",
|
|
7532
|
+
editorType: "empty"
|
|
7533
|
+
}
|
|
7534
|
+
];
|
|
7535
|
+
var TEXTBOX_OPERATORS = [
|
|
7536
|
+
{
|
|
7537
|
+
label: "is...",
|
|
7538
|
+
value: "eq",
|
|
7539
|
+
editorType: "text"
|
|
7540
|
+
},
|
|
7541
|
+
{
|
|
7542
|
+
label: "is empty",
|
|
7543
|
+
value: "ndef",
|
|
7544
|
+
editorType: "empty"
|
|
7545
|
+
},
|
|
7546
|
+
{
|
|
7547
|
+
label: "contains...",
|
|
7548
|
+
value: "match",
|
|
7549
|
+
editorType: "text"
|
|
7550
|
+
},
|
|
7551
|
+
{
|
|
7552
|
+
label: "starts with...",
|
|
7553
|
+
value: "starts",
|
|
7554
|
+
editorType: "text"
|
|
7555
|
+
},
|
|
7556
|
+
{
|
|
7557
|
+
label: "is not...",
|
|
7558
|
+
value: "neq",
|
|
7559
|
+
editorType: "text"
|
|
7560
|
+
},
|
|
7561
|
+
{
|
|
7562
|
+
label: "is not empty",
|
|
7563
|
+
value: "def",
|
|
7564
|
+
editorType: "empty"
|
|
7565
|
+
}
|
|
7566
|
+
];
|
|
7567
|
+
var USER_OPERATORS = [
|
|
7568
|
+
{
|
|
7569
|
+
label: "is...",
|
|
7570
|
+
value: "eq",
|
|
7571
|
+
editorType: "text"
|
|
7572
|
+
},
|
|
7573
|
+
{
|
|
7574
|
+
label: "contains...",
|
|
7575
|
+
value: "match",
|
|
7576
|
+
editorType: "text"
|
|
7577
|
+
},
|
|
7578
|
+
{
|
|
7579
|
+
label: "starts with...",
|
|
7580
|
+
value: "starts",
|
|
7581
|
+
editorType: "text"
|
|
7582
|
+
},
|
|
7583
|
+
{
|
|
7584
|
+
label: "is not...",
|
|
7585
|
+
value: "neq",
|
|
7586
|
+
editorType: "text"
|
|
7587
|
+
}
|
|
7588
|
+
];
|
|
7589
|
+
var SYSTEM_DATE_OPERATORS = [
|
|
7590
|
+
{
|
|
7591
|
+
label: "is...",
|
|
7592
|
+
value: "sys-date-eq",
|
|
7593
|
+
editorType: "date"
|
|
7594
|
+
},
|
|
7595
|
+
{
|
|
7596
|
+
label: "is between...",
|
|
7597
|
+
value: "sys-date-between",
|
|
7598
|
+
editorType: "dateRange"
|
|
7599
|
+
},
|
|
7600
|
+
{
|
|
7601
|
+
label: "is before...",
|
|
7602
|
+
value: "sys-date-lt",
|
|
7603
|
+
editorType: "date"
|
|
7604
|
+
},
|
|
7605
|
+
{
|
|
7606
|
+
label: "is after...",
|
|
7607
|
+
value: "sys-date-gt",
|
|
7608
|
+
editorType: "date"
|
|
7609
|
+
},
|
|
7610
|
+
{
|
|
7611
|
+
label: "is on or before...",
|
|
7612
|
+
value: "sys-date-lte",
|
|
7613
|
+
editorType: "date"
|
|
7614
|
+
},
|
|
7615
|
+
{
|
|
7616
|
+
label: "is on or after...",
|
|
7617
|
+
value: "sys-date-gte",
|
|
7618
|
+
editorType: "date"
|
|
7619
|
+
},
|
|
7620
|
+
{
|
|
7621
|
+
label: "is not...",
|
|
7622
|
+
value: "sys-date-neq",
|
|
7623
|
+
editorType: "date"
|
|
7624
|
+
}
|
|
7625
|
+
];
|
|
7626
|
+
var RICHTEXT_OPERATORS = [
|
|
7627
|
+
{
|
|
7628
|
+
label: "is empty",
|
|
7629
|
+
value: "ndef",
|
|
7630
|
+
editorType: "empty"
|
|
7631
|
+
},
|
|
7632
|
+
{
|
|
7633
|
+
label: "contains...",
|
|
7634
|
+
value: "match",
|
|
7635
|
+
editorType: "text"
|
|
7636
|
+
},
|
|
7637
|
+
{
|
|
7638
|
+
label: "starts with...",
|
|
7639
|
+
value: "starts",
|
|
7640
|
+
editorType: "text"
|
|
7641
|
+
},
|
|
7642
|
+
{
|
|
7643
|
+
label: "is not empty",
|
|
7644
|
+
value: "def",
|
|
7645
|
+
editorType: "empty"
|
|
7646
|
+
}
|
|
7647
|
+
];
|
|
7648
|
+
var CHECKBOX_OPERATORS = [
|
|
7649
|
+
{
|
|
7650
|
+
label: "is checked...",
|
|
7651
|
+
value: "def",
|
|
7652
|
+
editorType: "empty"
|
|
7653
|
+
},
|
|
7654
|
+
{
|
|
7655
|
+
label: "is not checked...",
|
|
7656
|
+
value: "ndef",
|
|
7657
|
+
editorType: "empty"
|
|
7658
|
+
}
|
|
7659
|
+
];
|
|
7660
|
+
var SYSTEM_FIELD_OPERATORS = [
|
|
7661
|
+
{
|
|
7662
|
+
label: "is...",
|
|
7663
|
+
value: "eq",
|
|
7664
|
+
editorType: "singleChoice"
|
|
7665
|
+
},
|
|
7666
|
+
{
|
|
7667
|
+
label: "is any of...",
|
|
7668
|
+
value: "in",
|
|
7669
|
+
editorType: "multiChoice"
|
|
7670
|
+
},
|
|
7671
|
+
{
|
|
7672
|
+
label: "is not...",
|
|
7673
|
+
value: "neq",
|
|
7674
|
+
editorType: "singleChoice"
|
|
7675
|
+
},
|
|
7676
|
+
{
|
|
7677
|
+
label: "is none of...",
|
|
7678
|
+
value: "nin",
|
|
7679
|
+
editorType: "multiChoice"
|
|
7680
|
+
}
|
|
7681
|
+
];
|
|
7682
|
+
var PUBLISH_STATUS_FIELD_OPERATORS = [
|
|
7683
|
+
{
|
|
7684
|
+
label: "is...",
|
|
7685
|
+
value: "eq",
|
|
7686
|
+
editorType: "statusSingleChoice"
|
|
7687
|
+
},
|
|
7688
|
+
{
|
|
7689
|
+
label: "is any of...",
|
|
7690
|
+
value: "in",
|
|
7691
|
+
editorType: "statusMultiChoice"
|
|
7692
|
+
},
|
|
7693
|
+
{
|
|
7694
|
+
label: "is not...",
|
|
7695
|
+
value: "neq",
|
|
7696
|
+
editorType: "statusSingleChoice"
|
|
7697
|
+
},
|
|
7698
|
+
{
|
|
7699
|
+
label: "is none of...",
|
|
7700
|
+
value: "nin",
|
|
7701
|
+
editorType: "statusMultiChoice"
|
|
7702
|
+
}
|
|
7703
|
+
];
|
|
7704
|
+
|
|
7705
|
+
// src/components/SearchAndFilter/FilterButton.tsx
|
|
7706
|
+
var import_design_system42 = require("@uniformdev/design-system");
|
|
7707
|
+
|
|
7708
|
+
// src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
|
|
7709
|
+
var import_react76 = require("@emotion/react");
|
|
7710
|
+
var import_design_system41 = require("@uniformdev/design-system");
|
|
7711
|
+
var SearchAndFilterControlsWrapper = (gridColumns) => import_react76.css`
|
|
7712
|
+
align-items: stretch;
|
|
7713
|
+
display: grid;
|
|
7714
|
+
grid-template-columns: ${gridColumns};
|
|
7715
|
+
gap: var(--spacing-sm);
|
|
7716
|
+
`;
|
|
7717
|
+
var SearchAndFilterOutterControlWrapper = (gridColumns) => import_react76.css`
|
|
7718
|
+
align-items: stretch;
|
|
7719
|
+
display: grid;
|
|
7720
|
+
grid-template-columns: ${gridColumns};
|
|
7721
|
+
gap: var(--spacing-sm);
|
|
7722
|
+
`;
|
|
7723
|
+
var ConditionalFilterRow = import_react76.css`
|
|
7724
|
+
display: grid;
|
|
7725
|
+
grid-template-columns: 35px 1fr;
|
|
7726
|
+
gap: var(--spacing-sm);
|
|
7727
|
+
margin-left: var(--spacing-base);
|
|
7728
|
+
|
|
7729
|
+
${(0, import_design_system41.cq)("380px")} {
|
|
7730
|
+
align-items: center;
|
|
7731
|
+
|
|
7732
|
+
&:after {
|
|
7733
|
+
content: '';
|
|
7734
|
+
display: block;
|
|
7735
|
+
height: 1px;
|
|
7736
|
+
background: var(--gray-300);
|
|
7737
|
+
width: calc(100% - var(--spacing-base));
|
|
7738
|
+
margin-left: var(--spacing-base);
|
|
7739
|
+
}
|
|
7740
|
+
&:last-of-type:after {
|
|
7741
|
+
display: none;
|
|
7742
|
+
}
|
|
7743
|
+
}
|
|
7744
|
+
|
|
7745
|
+
&:nth-of-type(2) {
|
|
7746
|
+
margin-left: 0;
|
|
7747
|
+
grid-template-columns: 50px 1fr;
|
|
7748
|
+
}
|
|
7749
|
+
|
|
7750
|
+
${(0, import_design_system41.cq)("580px")} {
|
|
7751
|
+
&:after {
|
|
7752
|
+
display: none;
|
|
7753
|
+
}
|
|
7754
|
+
}
|
|
7755
|
+
|
|
7756
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
7757
|
+
animation: ${import_design_system41.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
|
|
7758
|
+
}
|
|
7759
|
+
`;
|
|
7760
|
+
var ConditionalInputRow = import_react76.css`
|
|
7761
|
+
display: flex;
|
|
7762
|
+
gap: var(--spacing-sm);
|
|
7763
|
+
flex-wrap: wrap;
|
|
7764
|
+
|
|
7765
|
+
${(0, import_design_system41.cq)("380px")} {
|
|
7766
|
+
& > div:nth-child(-n + 2) {
|
|
7767
|
+
width: calc(50% - var(--spacing-sm));
|
|
7768
|
+
}
|
|
7769
|
+
|
|
7770
|
+
& > div:nth-child(n + 3) {
|
|
7771
|
+
width: calc(100% - 48px);
|
|
7772
|
+
}
|
|
7773
|
+
}
|
|
7774
|
+
${(0, import_design_system41.cq)("764px")} {
|
|
7775
|
+
display: grid;
|
|
7776
|
+
grid-template-columns: 200px 160px 1fr 32px;
|
|
7777
|
+
|
|
7778
|
+
& > div:nth-child(n) {
|
|
7779
|
+
width: auto;
|
|
7780
|
+
}
|
|
7781
|
+
}
|
|
7782
|
+
`;
|
|
7783
|
+
var SearchInput = import_react76.css`
|
|
7784
|
+
max-height: 40px;
|
|
7785
|
+
min-height: unset;
|
|
7786
|
+
`;
|
|
7787
|
+
var FilterButton = import_react76.css`
|
|
7788
|
+
align-items: center;
|
|
7789
|
+
background: var(--white);
|
|
7790
|
+
border: 1px solid var(--gray-300);
|
|
7791
|
+
border-radius: var(--rounded-full);
|
|
7792
|
+
color: var(--typography-base);
|
|
7793
|
+
display: flex;
|
|
7794
|
+
font-size: var(--fs-sm);
|
|
7795
|
+
gap: var(--spacing-sm);
|
|
7796
|
+
padding: var(--spacing-sm) var(--spacing-base);
|
|
7797
|
+
max-height: 40px;
|
|
7798
|
+
transition: color var(--duration-fast) var(--timing-ease-out),
|
|
7799
|
+
background-color var(--duration-fast) var(--timing-ease-out),
|
|
7800
|
+
border-color var(--duration-fast) var(--timing-ease-out),
|
|
7801
|
+
box-shadow var(--duration-fast) var(--timing-ease-out);
|
|
7802
|
+
|
|
7803
|
+
svg {
|
|
7804
|
+
color: var(--gray-300);
|
|
7805
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
7806
|
+
}
|
|
7807
|
+
|
|
7808
|
+
&:hover,
|
|
7809
|
+
:where([aria-expanded='true']) {
|
|
7810
|
+
outline: none;
|
|
7811
|
+
background: var(--gray-200);
|
|
7812
|
+
border-color: var(--gray-300);
|
|
7813
|
+
|
|
7814
|
+
svg {
|
|
7815
|
+
color: var(--typography-base);
|
|
7816
|
+
}
|
|
7817
|
+
}
|
|
7818
|
+
|
|
7819
|
+
&:disabled {
|
|
7820
|
+
opacity: var(--opacity-50);
|
|
7821
|
+
}
|
|
7822
|
+
`;
|
|
7823
|
+
var FilterButtonText = import_react76.css`
|
|
7824
|
+
overflow: hidden;
|
|
7825
|
+
text-overflow: ellipsis;
|
|
7826
|
+
white-space: nowrap;
|
|
7827
|
+
max-width: 14ch;
|
|
7828
|
+
`;
|
|
7829
|
+
var FilterButtonSelected = import_react76.css`
|
|
7830
|
+
background: var(--gray-100);
|
|
7831
|
+
border-color: var(--gray-300);
|
|
7832
|
+
|
|
7833
|
+
svg {
|
|
7834
|
+
color: var(--accent-dark);
|
|
7835
|
+
}
|
|
7836
|
+
`;
|
|
7837
|
+
var FilterButtonWithOptions = import_react76.css`
|
|
7838
|
+
:where([aria-expanded='true']) {
|
|
7839
|
+
background: var(--purple-rain-100);
|
|
7840
|
+
border-color: var(--accent-light);
|
|
7841
|
+
color: var(--typography-base);
|
|
7842
|
+
box-shadow: var(--elevation-100);
|
|
7843
|
+
|
|
7844
|
+
svg {
|
|
7845
|
+
color: var(--accent-dark);
|
|
7846
|
+
}
|
|
7847
|
+
}
|
|
7848
|
+
`;
|
|
7849
|
+
var SearchIcon = import_react76.css`
|
|
7850
|
+
color: var(--icon-color);
|
|
7851
|
+
position: absolute;
|
|
7852
|
+
inset: 0 var(--spacing-base) 0 auto;
|
|
7853
|
+
margin: auto;
|
|
7854
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
7855
|
+
`;
|
|
7856
|
+
var AddConditionalBtn = import_react76.css`
|
|
7857
|
+
align-items: center;
|
|
7858
|
+
background: transparent;
|
|
7859
|
+
border: none;
|
|
7860
|
+
color: var(--primary-action-default);
|
|
7861
|
+
display: flex;
|
|
7862
|
+
gap: var(--spacing-sm);
|
|
7863
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
7864
|
+
padding: 0;
|
|
7865
|
+
|
|
7866
|
+
&:hover,
|
|
7867
|
+
&:focus {
|
|
7868
|
+
color: var(--primary-action-hover);
|
|
7869
|
+
}
|
|
7870
|
+
|
|
7871
|
+
&:disabled {
|
|
7872
|
+
color: var(--gray-400);
|
|
7873
|
+
}
|
|
7874
|
+
`;
|
|
7875
|
+
var Title = import_react76.css`
|
|
7876
|
+
color: var(--typography-light);
|
|
7877
|
+
|
|
7878
|
+
&:focus {
|
|
7879
|
+
outline: none;
|
|
7880
|
+
}
|
|
7881
|
+
`;
|
|
7882
|
+
var ResetConditionsBtn = import_react76.css`
|
|
7883
|
+
background: transparent;
|
|
7884
|
+
border: none;
|
|
7885
|
+
color: var(--action-destructive-default);
|
|
7886
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
7887
|
+
padding: 0;
|
|
7888
|
+
|
|
7889
|
+
&:hover,
|
|
7890
|
+
&:focus {
|
|
7891
|
+
color: var(--action-destructive-hover);
|
|
7892
|
+
}
|
|
7893
|
+
`;
|
|
7894
|
+
var IconBtn = import_react76.css`
|
|
7895
|
+
background: transparent;
|
|
7896
|
+
border: none;
|
|
7897
|
+
padding: var(--spacing-sm);
|
|
7898
|
+
`;
|
|
7899
|
+
var SearchAndFilterOptionsContainer = import_react76.css`
|
|
7900
|
+
background: var(--gray-50);
|
|
7901
|
+
border: 1px solid var(--gray-300);
|
|
7902
|
+
border-radius: var(--rounded-base);
|
|
7903
|
+
container-type: inline-size;
|
|
7904
|
+
display: flex;
|
|
7905
|
+
flex-direction: column;
|
|
7906
|
+
gap: var(--spacing-sm);
|
|
7907
|
+
padding: var(--spacing-md) 0 var(--spacing-base);
|
|
7908
|
+
will-change: height;
|
|
7909
|
+
position: relative;
|
|
7910
|
+
z-index: 1;
|
|
7911
|
+
`;
|
|
7912
|
+
var SearchAndFilterOptionsInnerContainer = import_react76.css`
|
|
7913
|
+
display: flex;
|
|
7914
|
+
flex-direction: column;
|
|
7915
|
+
gap: var(--spacing-sm);
|
|
7916
|
+
padding-inline: var(--spacing-md);
|
|
7917
|
+
`;
|
|
7918
|
+
var SearchAndFilterButtonGroup = import_react76.css`
|
|
7919
|
+
margin-top: var(--spacing-xs);
|
|
7920
|
+
margin-left: calc(56px + var(--spacing-md));
|
|
7921
|
+
`;
|
|
7922
|
+
|
|
7923
|
+
// src/components/SearchAndFilter/FilterButton.tsx
|
|
7924
|
+
var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
|
|
7925
|
+
var FilterButton2 = ({
|
|
7926
|
+
text = "Filters",
|
|
7927
|
+
icon = "filter-add",
|
|
7928
|
+
filterCount,
|
|
7929
|
+
hasSelectedValue,
|
|
7930
|
+
dataTestId,
|
|
7931
|
+
...props
|
|
7932
|
+
}) => {
|
|
7933
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
7934
|
+
"button",
|
|
7935
|
+
{
|
|
7936
|
+
type: "button",
|
|
7937
|
+
css: [
|
|
7938
|
+
FilterButton,
|
|
7939
|
+
hasSelectedValue ? FilterButtonSelected : void 0,
|
|
7940
|
+
filterCount ? [FilterButtonWithOptions, FilterButtonSelected] : void 0
|
|
7941
|
+
],
|
|
7942
|
+
...props,
|
|
7943
|
+
"data-testid": dataTestId,
|
|
7944
|
+
children: [
|
|
7945
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_design_system42.Icon, { icon, iconColor: "currentColor", size: "1rem" }),
|
|
7946
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { css: FilterButtonText, children: text }),
|
|
7947
|
+
filterCount ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_design_system42.Counter, { count: filterCount, bgColor: "var(--white)" }) : null
|
|
7948
|
+
]
|
|
7949
|
+
}
|
|
7950
|
+
);
|
|
7951
|
+
};
|
|
7952
|
+
|
|
7953
|
+
// src/components/SearchAndFilter/FilterControls.tsx
|
|
7954
|
+
var import_design_system45 = require("@uniformdev/design-system");
|
|
7955
|
+
var import_react79 = require("react");
|
|
7956
|
+
var import_react_use6 = require("react-use");
|
|
7957
|
+
|
|
7958
|
+
// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
|
|
7959
|
+
var import_design_system44 = require("@uniformdev/design-system");
|
|
7960
|
+
var import_react78 = require("react");
|
|
7961
|
+
|
|
7962
|
+
// src/components/SearchAndFilter/FilterEditor.tsx
|
|
7963
|
+
var import_design_system43 = require("@uniformdev/design-system");
|
|
7964
|
+
var import_react77 = require("react");
|
|
7965
|
+
var import_react_use5 = require("react-use");
|
|
7966
|
+
var import_jsx_runtime70 = require("@emotion/react/jsx-runtime");
|
|
7967
|
+
var readOnlyAttributes = {
|
|
7968
|
+
isSearchable: false,
|
|
7969
|
+
menuIsOpen: false,
|
|
7970
|
+
isClearable: false
|
|
7971
|
+
};
|
|
7972
|
+
var FilterMultiChoiceEditor = ({
|
|
7973
|
+
value,
|
|
7974
|
+
options,
|
|
7975
|
+
disabled,
|
|
7976
|
+
readOnly,
|
|
7977
|
+
valueTestId,
|
|
7978
|
+
...props
|
|
7979
|
+
}) => {
|
|
7980
|
+
const readOnlyProps = readOnly ? readOnlyAttributes : {};
|
|
7981
|
+
const isClearable = !readOnly || !disabled;
|
|
7982
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
7983
|
+
import_design_system43.InputComboBox,
|
|
7984
|
+
{
|
|
7985
|
+
...props,
|
|
7986
|
+
placeholder: "Type to search...",
|
|
7987
|
+
options,
|
|
7988
|
+
isMulti: true,
|
|
7989
|
+
isClearable,
|
|
7990
|
+
isDisabled: disabled,
|
|
7991
|
+
onChange: (e) => {
|
|
7992
|
+
var _a;
|
|
7993
|
+
return props.onChange((_a = e == null ? void 0 : e.map((option) => option.value)) != null ? _a : []);
|
|
7994
|
+
},
|
|
7995
|
+
value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
|
|
7996
|
+
"aria-readonly": readOnly,
|
|
7997
|
+
styles: {
|
|
7998
|
+
menu(base) {
|
|
7999
|
+
return {
|
|
8000
|
+
...base,
|
|
8001
|
+
minWidth: "max-content"
|
|
8002
|
+
};
|
|
8003
|
+
}
|
|
8004
|
+
},
|
|
8005
|
+
...readOnlyProps
|
|
8006
|
+
}
|
|
8007
|
+
) });
|
|
8008
|
+
};
|
|
8009
|
+
var FilterSingleChoiceEditor = ({
|
|
8010
|
+
options,
|
|
8011
|
+
value,
|
|
8012
|
+
disabled,
|
|
8013
|
+
readOnly,
|
|
8014
|
+
onChange,
|
|
8015
|
+
valueTestId
|
|
8016
|
+
}) => {
|
|
8017
|
+
const readOnlyProps = readOnly ? readOnlyAttributes : {};
|
|
8018
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
8019
|
+
import_design_system43.InputComboBox,
|
|
8020
|
+
{
|
|
8021
|
+
placeholder: "Type to search...",
|
|
8022
|
+
options,
|
|
8023
|
+
isClearable: true,
|
|
8024
|
+
onChange: (e) => {
|
|
8025
|
+
var _a;
|
|
8026
|
+
return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
|
|
8027
|
+
},
|
|
8028
|
+
isDisabled: disabled,
|
|
8029
|
+
value: options == null ? void 0 : options.find((option) => option.value === value),
|
|
8030
|
+
"aria-readonly": readOnly,
|
|
8031
|
+
styles: {
|
|
8032
|
+
menu(base) {
|
|
8033
|
+
return {
|
|
8034
|
+
...base,
|
|
8035
|
+
minWidth: "max-content"
|
|
8036
|
+
};
|
|
8037
|
+
}
|
|
8038
|
+
},
|
|
8039
|
+
...readOnlyProps
|
|
8040
|
+
}
|
|
8041
|
+
) });
|
|
8042
|
+
};
|
|
8043
|
+
var CustomOptions = ({ label, value }) => {
|
|
8044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_design_system43.StatusBullet, { status: label, message: value });
|
|
8045
|
+
};
|
|
8046
|
+
var StatusMultiEditor = ({
|
|
8047
|
+
options,
|
|
8048
|
+
value,
|
|
8049
|
+
disabled,
|
|
8050
|
+
readOnly,
|
|
8051
|
+
onChange,
|
|
8052
|
+
valueTestId
|
|
8053
|
+
}) => {
|
|
8054
|
+
const readOnlyProps = readOnly ? readOnlyAttributes : {};
|
|
8055
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
8056
|
+
import_design_system43.InputComboBox,
|
|
8057
|
+
{
|
|
8058
|
+
options,
|
|
8059
|
+
isMulti: true,
|
|
8060
|
+
onChange: (e) => {
|
|
8061
|
+
var _a;
|
|
8062
|
+
return onChange((_a = e.map((item) => item.value)) != null ? _a : []);
|
|
8063
|
+
},
|
|
8064
|
+
formatOptionLabel: CustomOptions,
|
|
8065
|
+
"aria-readonly": readOnly,
|
|
8066
|
+
value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
|
|
8067
|
+
isDisabled: disabled,
|
|
8068
|
+
styles: {
|
|
8069
|
+
menu(base) {
|
|
8070
|
+
return {
|
|
8071
|
+
...base,
|
|
8072
|
+
minWidth: "max-content"
|
|
8073
|
+
};
|
|
8074
|
+
}
|
|
8075
|
+
},
|
|
8076
|
+
...readOnlyProps
|
|
8077
|
+
}
|
|
8078
|
+
) });
|
|
8079
|
+
};
|
|
8080
|
+
var StatusSingleEditor = ({
|
|
8081
|
+
options,
|
|
8082
|
+
value,
|
|
8083
|
+
disabled,
|
|
8084
|
+
readOnly,
|
|
8085
|
+
onChange,
|
|
8086
|
+
valueTestId
|
|
8087
|
+
}) => {
|
|
8088
|
+
const readOnlyProps = readOnly ? readOnlyAttributes : {};
|
|
8089
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
8090
|
+
import_design_system43.InputComboBox,
|
|
8091
|
+
{
|
|
8092
|
+
options,
|
|
8093
|
+
onChange: (e) => {
|
|
8094
|
+
var _a;
|
|
8095
|
+
return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
|
|
8096
|
+
},
|
|
8097
|
+
formatOptionLabel: CustomOptions,
|
|
8098
|
+
"aria-readonly": readOnly,
|
|
8099
|
+
value: options == null ? void 0 : options.find((option) => option.value === value),
|
|
8100
|
+
isDisabled: disabled,
|
|
8101
|
+
styles: {
|
|
8102
|
+
menu(base) {
|
|
8103
|
+
return {
|
|
8104
|
+
...base,
|
|
8105
|
+
minWidth: "max-content"
|
|
8106
|
+
};
|
|
8107
|
+
}
|
|
8108
|
+
},
|
|
8109
|
+
...readOnlyProps
|
|
8110
|
+
}
|
|
8111
|
+
) });
|
|
8112
|
+
};
|
|
8113
|
+
var TextEditor = ({
|
|
8114
|
+
onChange,
|
|
8115
|
+
ariaLabel,
|
|
8116
|
+
value,
|
|
8117
|
+
readOnly,
|
|
8118
|
+
valueTestId
|
|
8119
|
+
}) => {
|
|
8120
|
+
const [innerValue, setInnerValue] = (0, import_react77.useState)(value != null ? value : "");
|
|
8121
|
+
(0, import_react_use5.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
|
|
8122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
8123
|
+
import_design_system43.Input,
|
|
8124
|
+
{
|
|
8125
|
+
showLabel: false,
|
|
8126
|
+
label: ariaLabel,
|
|
8127
|
+
onChange: (e) => setInnerValue(e.currentTarget.value),
|
|
8128
|
+
placeholder: "Enter phrase to search\u2026",
|
|
8129
|
+
value: innerValue,
|
|
8130
|
+
readOnly,
|
|
8131
|
+
"data-testid": valueTestId
|
|
8132
|
+
}
|
|
8133
|
+
);
|
|
8134
|
+
};
|
|
8135
|
+
var NumberRangeEditor = ({
|
|
8136
|
+
onChange,
|
|
8137
|
+
disabled,
|
|
8138
|
+
ariaLabel,
|
|
8139
|
+
value,
|
|
8140
|
+
readOnly,
|
|
8141
|
+
valueTestId
|
|
8142
|
+
}) => {
|
|
8143
|
+
const [minValue, setMinValue] = (0, import_react77.useState)("");
|
|
8144
|
+
const [maxValue, setMaxValue] = (0, import_react77.useState)("");
|
|
8145
|
+
const [error, setError] = (0, import_react77.useState)("");
|
|
8146
|
+
(0, import_react_use5.useDebounce)(
|
|
8147
|
+
() => {
|
|
8148
|
+
if (minValue && maxValue && !error) {
|
|
8149
|
+
onChange([minValue, maxValue]);
|
|
8150
|
+
} else {
|
|
8151
|
+
onChange([]);
|
|
8152
|
+
}
|
|
8153
|
+
},
|
|
8154
|
+
500,
|
|
8155
|
+
[minValue, maxValue]
|
|
8156
|
+
);
|
|
8157
|
+
(0, import_react77.useEffect)(() => {
|
|
8158
|
+
if (!maxValue && !minValue) {
|
|
8159
|
+
return;
|
|
8160
|
+
}
|
|
8161
|
+
const max = Number(maxValue);
|
|
8162
|
+
const min = Number(minValue);
|
|
8163
|
+
if (max < min || min > max) {
|
|
8164
|
+
setError("Please enter a valid numeric range");
|
|
8165
|
+
return;
|
|
8166
|
+
}
|
|
8167
|
+
if (maxValue && !minValue || minValue && !maxValue) {
|
|
8168
|
+
setError("Please enter both a low and high number");
|
|
8169
|
+
return;
|
|
8170
|
+
}
|
|
8171
|
+
if (error) {
|
|
8172
|
+
setError("");
|
|
8173
|
+
}
|
|
8174
|
+
if (min && max) {
|
|
8175
|
+
setMinValue(minValue);
|
|
8176
|
+
setMaxValue(maxValue);
|
|
8177
|
+
}
|
|
8178
|
+
}, [maxValue, minValue, setError]);
|
|
8179
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
|
|
8180
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
|
|
8181
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
8182
|
+
import_design_system43.Input,
|
|
8183
|
+
{
|
|
8184
|
+
label: `${ariaLabel}-min`,
|
|
8185
|
+
type: "number",
|
|
8186
|
+
showLabel: false,
|
|
8187
|
+
min: 0,
|
|
8188
|
+
placeholder: "Low",
|
|
8189
|
+
onChange: (e) => setMinValue(e.currentTarget.value),
|
|
8190
|
+
"aria-invalid": !error ? false : true,
|
|
8191
|
+
disabled,
|
|
8192
|
+
value: value ? value[0] : "",
|
|
8193
|
+
readOnly,
|
|
8194
|
+
"data-testid": "value-low"
|
|
8195
|
+
}
|
|
8196
|
+
),
|
|
8197
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
8198
|
+
import_design_system43.Input,
|
|
8199
|
+
{
|
|
8200
|
+
type: "number",
|
|
8201
|
+
label: `${ariaLabel}-max`,
|
|
8202
|
+
showLabel: false,
|
|
8203
|
+
min: 0,
|
|
8204
|
+
placeholder: "High",
|
|
8205
|
+
onChange: (e) => setMaxValue(e.currentTarget.value),
|
|
8206
|
+
"aria-invalid": !error ? false : true,
|
|
8207
|
+
disabled,
|
|
8208
|
+
value: value ? value[1] : "",
|
|
8209
|
+
readOnly,
|
|
8210
|
+
"data-testid": "value-high"
|
|
8211
|
+
}
|
|
8212
|
+
)
|
|
8213
|
+
] }),
|
|
8214
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ErrorContainer, { errorMessage: error })
|
|
8215
|
+
] });
|
|
8216
|
+
};
|
|
8217
|
+
var NumberEditor = ({
|
|
8218
|
+
ariaLabel,
|
|
8219
|
+
onChange,
|
|
8220
|
+
disabled,
|
|
8221
|
+
value,
|
|
8222
|
+
readOnly,
|
|
8223
|
+
valueTestId
|
|
8224
|
+
}) => {
|
|
8225
|
+
const [innerValue, setInnerValue] = (0, import_react77.useState)(value != null ? value : "");
|
|
8226
|
+
(0, import_react_use5.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
|
|
8227
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
8228
|
+
import_design_system43.Input,
|
|
8229
|
+
{
|
|
8230
|
+
label: ariaLabel,
|
|
8231
|
+
type: "number",
|
|
8232
|
+
showLabel: false,
|
|
8233
|
+
min: 0,
|
|
8234
|
+
onChange: (e) => setInnerValue(e.currentTarget.value),
|
|
8235
|
+
disabled,
|
|
8236
|
+
value: innerValue,
|
|
8237
|
+
readOnly,
|
|
8238
|
+
"data-testid": valueTestId
|
|
8239
|
+
}
|
|
8240
|
+
);
|
|
8241
|
+
};
|
|
8242
|
+
var DateEditor = ({
|
|
8243
|
+
onChange,
|
|
8244
|
+
ariaLabel,
|
|
8245
|
+
disabled,
|
|
8246
|
+
value,
|
|
8247
|
+
readOnly,
|
|
8248
|
+
valueTestId
|
|
8249
|
+
}) => {
|
|
8250
|
+
const [innerValue, setInnerValue] = (0, import_react77.useState)(value != null ? value : "");
|
|
8251
|
+
(0, import_react_use5.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
|
|
8252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
8253
|
+
import_design_system43.Input,
|
|
8254
|
+
{
|
|
8255
|
+
type: "date",
|
|
8256
|
+
label: ariaLabel,
|
|
8257
|
+
showLabel: false,
|
|
8258
|
+
onChange: (e) => setInnerValue(e.currentTarget.value),
|
|
8259
|
+
disabled,
|
|
8260
|
+
value: innerValue,
|
|
8261
|
+
readOnly,
|
|
8262
|
+
"data-testid": valueTestId
|
|
8263
|
+
}
|
|
8264
|
+
);
|
|
8265
|
+
};
|
|
8266
|
+
var DateRangeEditor = ({
|
|
8267
|
+
ariaLabel,
|
|
8268
|
+
onChange,
|
|
8269
|
+
disabled,
|
|
8270
|
+
value,
|
|
8271
|
+
readOnly,
|
|
8272
|
+
valueTestId
|
|
8273
|
+
}) => {
|
|
8274
|
+
const [minDateValue, setMinDateValue] = (0, import_react77.useState)(value ? value[0] : "");
|
|
8275
|
+
const [maxDateValue, setMaxDateValue] = (0, import_react77.useState)(value ? value[1] : "");
|
|
8276
|
+
const [error, setError] = (0, import_react77.useState)("");
|
|
8277
|
+
(0, import_react_use5.useDebounce)(
|
|
8278
|
+
() => {
|
|
8279
|
+
if (minDateValue && maxDateValue && !error) {
|
|
8280
|
+
onChange([minDateValue, maxDateValue]);
|
|
8281
|
+
} else {
|
|
8282
|
+
onChange([]);
|
|
8283
|
+
}
|
|
8284
|
+
},
|
|
8285
|
+
500,
|
|
8286
|
+
[minDateValue, maxDateValue]
|
|
8287
|
+
);
|
|
8288
|
+
(0, import_react77.useEffect)(() => {
|
|
8289
|
+
if (!minDateValue || !maxDateValue) {
|
|
8290
|
+
return;
|
|
8291
|
+
}
|
|
8292
|
+
const minDate = new Date(minDateValue);
|
|
8293
|
+
const maxDate = new Date(maxDateValue);
|
|
8294
|
+
if (maxDate < minDate) {
|
|
8295
|
+
setError("The max date cannot be lower than the min date");
|
|
8296
|
+
return;
|
|
8297
|
+
}
|
|
8298
|
+
if (maxDate && !minDate) {
|
|
8299
|
+
setError("Please enter both a low and high date");
|
|
8300
|
+
return;
|
|
8301
|
+
}
|
|
8302
|
+
const minDateString = minDate.toDateString();
|
|
8303
|
+
const maxDateString = maxDate.toDateString();
|
|
8304
|
+
if (minDateString === maxDateString || maxDateString === minDateString) {
|
|
8305
|
+
setError("The min and max date cannot be the same");
|
|
8306
|
+
return;
|
|
8307
|
+
}
|
|
8308
|
+
if (minDate > maxDate) {
|
|
8309
|
+
setError("The min date cannot be higher than the max date");
|
|
8310
|
+
return;
|
|
8311
|
+
}
|
|
8312
|
+
if (error) {
|
|
8313
|
+
setError("");
|
|
8314
|
+
}
|
|
8315
|
+
if (minDate && maxDate) {
|
|
8316
|
+
setMinDateValue(minDateValue);
|
|
8317
|
+
setMaxDateValue(maxDateValue);
|
|
8318
|
+
} else {
|
|
8319
|
+
setMinDateValue("");
|
|
8320
|
+
setMaxDateValue("");
|
|
8321
|
+
}
|
|
8322
|
+
}, [minDateValue, maxDateValue, setError]);
|
|
8323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
|
|
8324
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
|
|
8325
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
8326
|
+
import_design_system43.Input,
|
|
8327
|
+
{
|
|
8328
|
+
label: `${ariaLabel}-min-date`,
|
|
8329
|
+
type: "date",
|
|
8330
|
+
showLabel: false,
|
|
8331
|
+
value: minDateValue,
|
|
8332
|
+
onChange: (e) => setMinDateValue(e.currentTarget.value),
|
|
8333
|
+
"aria-invalid": !error ? false : true,
|
|
8334
|
+
disabled,
|
|
8335
|
+
readOnly
|
|
8336
|
+
}
|
|
8337
|
+
),
|
|
8338
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
8339
|
+
import_design_system43.Input,
|
|
8340
|
+
{
|
|
8341
|
+
label: `${ariaLabel}-max-date`,
|
|
8342
|
+
type: "date",
|
|
8343
|
+
showLabel: false,
|
|
8344
|
+
value: maxDateValue,
|
|
8345
|
+
onChange: (e) => setMaxDateValue(e.currentTarget.value),
|
|
8346
|
+
"aria-invalid": !error ? false : true,
|
|
8347
|
+
disabled,
|
|
8348
|
+
readOnly
|
|
8349
|
+
}
|
|
8350
|
+
)
|
|
8351
|
+
] }),
|
|
8352
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ErrorContainer, { errorMessage: error })
|
|
8353
|
+
] });
|
|
8354
|
+
};
|
|
8355
|
+
var FilterEditorRenderer = ({ editorType, ...props }) => {
|
|
8356
|
+
const { filterMapper: contextFilterMapper } = useSearchAndFilter();
|
|
8357
|
+
const Editor = contextFilterMapper == null ? void 0 : contextFilterMapper[editorType];
|
|
8358
|
+
if (!Editor) {
|
|
8359
|
+
return null;
|
|
8360
|
+
}
|
|
8361
|
+
if (editorType === "empty") {
|
|
8362
|
+
return null;
|
|
8363
|
+
}
|
|
8364
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Editor, { ...props });
|
|
8365
|
+
};
|
|
8366
|
+
var filterMapper = {
|
|
8367
|
+
multiChoice: FilterMultiChoiceEditor,
|
|
8368
|
+
singleChoice: FilterSingleChoiceEditor,
|
|
8369
|
+
date: DateEditor,
|
|
8370
|
+
dateRange: DateRangeEditor,
|
|
8371
|
+
text: TextEditor,
|
|
8372
|
+
numberRange: NumberRangeEditor,
|
|
8373
|
+
number: NumberEditor,
|
|
8374
|
+
statusMultiChoice: StatusMultiEditor,
|
|
8375
|
+
statusSingleChoice: StatusSingleEditor,
|
|
8376
|
+
empty: null
|
|
8377
|
+
};
|
|
8378
|
+
var ErrorContainer = ({ errorMessage }) => {
|
|
8379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
8380
|
+
"div",
|
|
8381
|
+
{
|
|
8382
|
+
css: {
|
|
8383
|
+
gridColumn: "span 6",
|
|
8384
|
+
order: 6
|
|
8385
|
+
},
|
|
8386
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_design_system43.FieldMessage, { errorMessage })
|
|
8387
|
+
}
|
|
8388
|
+
);
|
|
8389
|
+
};
|
|
8390
|
+
var twoColumnGrid = {
|
|
8391
|
+
display: "grid",
|
|
8392
|
+
gridTemplateColumns: "1fr 1fr",
|
|
8393
|
+
gap: "var(--spacing-sm);"
|
|
8394
|
+
};
|
|
8395
|
+
|
|
8396
|
+
// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
|
|
8397
|
+
var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
|
|
8398
|
+
var SearchAndFilterContext = (0, import_react78.createContext)({
|
|
8399
|
+
searchTerm: "",
|
|
8400
|
+
setSearchTerm: () => {
|
|
8401
|
+
},
|
|
8402
|
+
filterVisibility: void 0,
|
|
8403
|
+
setFilterVisibility: () => {
|
|
8404
|
+
},
|
|
8405
|
+
filters: [],
|
|
8406
|
+
setFilters: () => {
|
|
8407
|
+
},
|
|
8408
|
+
handleAddFilter: () => {
|
|
8409
|
+
},
|
|
8410
|
+
handleResetFilters: () => {
|
|
8411
|
+
},
|
|
8412
|
+
handleDeleteFilter: () => {
|
|
8413
|
+
},
|
|
8414
|
+
filterOptions: [],
|
|
8415
|
+
validFilterQuery: [],
|
|
8416
|
+
filterMapper: {},
|
|
8417
|
+
totalResults: 0
|
|
8418
|
+
});
|
|
8419
|
+
var SearchAndFilterProvider = ({
|
|
8420
|
+
filters,
|
|
8421
|
+
filterOptions,
|
|
8422
|
+
filterVisible = false,
|
|
8423
|
+
defaultSearchTerm = "",
|
|
8424
|
+
onSearchChange,
|
|
8425
|
+
onChange,
|
|
8426
|
+
resetFilterValues = [{ field: "", operator: "", value: "" }],
|
|
8427
|
+
totalResults,
|
|
8428
|
+
filterMapper: filterMapper2 = filterMapper,
|
|
8429
|
+
children
|
|
8430
|
+
}) => {
|
|
8431
|
+
const [searchTerm, setSearchTerm] = (0, import_react78.useState)(defaultSearchTerm);
|
|
8432
|
+
const deferredSearchTerm = (0, import_react78.useDeferredValue)(searchTerm);
|
|
8433
|
+
const [filterVisibility, setFilterVisibility] = (0, import_react78.useState)(filterVisible);
|
|
8434
|
+
const handleSearchTerm = (0, import_react78.useCallback)(
|
|
8435
|
+
(term) => {
|
|
8436
|
+
setSearchTerm(term);
|
|
8437
|
+
onSearchChange == null ? void 0 : onSearchChange(term);
|
|
8438
|
+
},
|
|
8439
|
+
[setSearchTerm, onSearchChange]
|
|
8440
|
+
);
|
|
8441
|
+
const handleToggleFilterVisibility = (0, import_react78.useCallback)(
|
|
8442
|
+
(visible) => setFilterVisibility(visible),
|
|
8443
|
+
[setFilterVisibility]
|
|
8444
|
+
);
|
|
8445
|
+
const handleAddFilter = (0, import_react78.useCallback)(() => {
|
|
8446
|
+
onChange([...filters, { field: "", operator: "", value: "" }]);
|
|
8447
|
+
}, [filters, onChange]);
|
|
8448
|
+
const handleResetFilters = (0, import_react78.useCallback)(() => {
|
|
8449
|
+
onChange(resetFilterValues);
|
|
8450
|
+
}, [onChange, resetFilterValues]);
|
|
8451
|
+
const handleDeleteFilter = (0, import_react78.useCallback)(
|
|
8452
|
+
(index) => {
|
|
8453
|
+
const remainingFilters = filters.filter((_, i) => i !== index);
|
|
8454
|
+
onChange(remainingFilters);
|
|
8455
|
+
},
|
|
8456
|
+
[filters, onChange]
|
|
8457
|
+
);
|
|
8458
|
+
const validFilterQuery = (0, import_react78.useMemo)(() => {
|
|
8459
|
+
const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
|
|
8460
|
+
if (hasValidFilters) {
|
|
8461
|
+
return filters;
|
|
8462
|
+
}
|
|
8463
|
+
}, [filters]);
|
|
8464
|
+
(0, import_react78.useEffect)(() => {
|
|
8465
|
+
if (filterVisibility) {
|
|
8466
|
+
const handleEscKeyFilterClose = (e) => {
|
|
8467
|
+
if (e.key === "Escape") {
|
|
8468
|
+
setFilterVisibility(false);
|
|
8469
|
+
}
|
|
8470
|
+
};
|
|
8471
|
+
document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
|
|
8472
|
+
return () => {
|
|
8473
|
+
document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
|
|
8474
|
+
};
|
|
8475
|
+
}
|
|
8476
|
+
}, [filterVisibility]);
|
|
8477
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
8478
|
+
SearchAndFilterContext.Provider,
|
|
8479
|
+
{
|
|
8480
|
+
value: {
|
|
8481
|
+
searchTerm: deferredSearchTerm,
|
|
8482
|
+
setSearchTerm: (e) => handleSearchTerm(e),
|
|
8483
|
+
filterVisibility,
|
|
8484
|
+
setFilterVisibility: (e) => handleToggleFilterVisibility(e),
|
|
8485
|
+
filters,
|
|
8486
|
+
setFilters: (e) => onChange(e),
|
|
8487
|
+
handleAddFilter,
|
|
8488
|
+
handleResetFilters,
|
|
8489
|
+
handleDeleteFilter,
|
|
8490
|
+
filterOptions,
|
|
8491
|
+
validFilterQuery,
|
|
8492
|
+
totalResults,
|
|
8493
|
+
filterMapper: filterMapper2
|
|
8494
|
+
},
|
|
8495
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_design_system44.VerticalRhythm, { children })
|
|
8496
|
+
}
|
|
8497
|
+
);
|
|
8498
|
+
};
|
|
8499
|
+
var useSearchAndFilter = () => {
|
|
8500
|
+
const value = (0, import_react78.useContext)(SearchAndFilterContext);
|
|
8501
|
+
return { ...value };
|
|
8502
|
+
};
|
|
8503
|
+
|
|
8504
|
+
// src/components/SearchAndFilter/FilterControls.tsx
|
|
8505
|
+
var import_jsx_runtime72 = require("@emotion/react/jsx-runtime");
|
|
8506
|
+
var FilterControls = ({
|
|
8507
|
+
children,
|
|
8508
|
+
hideSearchInput
|
|
8509
|
+
}) => {
|
|
8510
|
+
const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm } = useSearchAndFilter();
|
|
8511
|
+
const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react79.useState)("");
|
|
8512
|
+
(0, import_react_use6.useDebounce)(
|
|
8513
|
+
() => {
|
|
8514
|
+
setSearchTerm(localeSearchTerm);
|
|
8515
|
+
},
|
|
8516
|
+
300,
|
|
8517
|
+
[localeSearchTerm, searchTerm]
|
|
8518
|
+
);
|
|
8519
|
+
(0, import_react79.useEffect)(() => {
|
|
8520
|
+
if (searchTerm === "") {
|
|
8521
|
+
setLocaleSearchTerm("");
|
|
8522
|
+
}
|
|
8523
|
+
}, [searchTerm]);
|
|
8524
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
|
|
8525
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
8526
|
+
FilterButton2,
|
|
8527
|
+
{
|
|
8528
|
+
"aria-controls": "search-and-filter-options",
|
|
8529
|
+
"aria-label": "filter options",
|
|
8530
|
+
"aria-haspopup": "true",
|
|
8531
|
+
text: "Filter/Sort",
|
|
8532
|
+
"aria-expanded": filterVisibility === true,
|
|
8533
|
+
filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
|
|
8534
|
+
onClick: () => setFilterVisibility(!filterVisibility),
|
|
8535
|
+
dataTestId: "filters-button"
|
|
8536
|
+
}
|
|
8537
|
+
),
|
|
8538
|
+
hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
8539
|
+
import_design_system45.InputKeywordSearch,
|
|
8540
|
+
{
|
|
8541
|
+
placeholder: "Search...",
|
|
8542
|
+
onSearchTextChanged: (e) => setLocaleSearchTerm(e),
|
|
8543
|
+
value: localeSearchTerm,
|
|
8544
|
+
compact: true,
|
|
8545
|
+
rounded: true,
|
|
8546
|
+
css: SearchInput
|
|
8547
|
+
}
|
|
8548
|
+
),
|
|
8549
|
+
children
|
|
8550
|
+
] });
|
|
8551
|
+
};
|
|
8552
|
+
|
|
8553
|
+
// src/components/SearchAndFilter/FilterItem.tsx
|
|
8554
|
+
var import_design_system47 = require("@uniformdev/design-system");
|
|
8555
|
+
var import_react81 = require("react");
|
|
8556
|
+
|
|
8557
|
+
// src/components/SearchAndFilter/FilterMenu.tsx
|
|
8558
|
+
var import_design_system46 = require("@uniformdev/design-system");
|
|
8559
|
+
var import_react80 = __toESM(require("react"));
|
|
8560
|
+
var import_jsx_runtime73 = require("@emotion/react/jsx-runtime");
|
|
8561
|
+
var SearchAndFilterOptionsContainer2 = ({
|
|
8562
|
+
buttonRow,
|
|
8563
|
+
additionalFiltersContainer,
|
|
8564
|
+
children
|
|
8565
|
+
}) => {
|
|
8566
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: SearchAndFilterOptionsContainer, children: [
|
|
8567
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { css: SearchAndFilterOptionsInnerContainer, children }),
|
|
8568
|
+
buttonRow ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
8569
|
+
import_design_system46.HorizontalRhythm,
|
|
8570
|
+
{
|
|
8571
|
+
css: SearchAndFilterButtonGroup,
|
|
8572
|
+
gap: "sm",
|
|
8573
|
+
align: "center",
|
|
8574
|
+
justify: "space-between",
|
|
8575
|
+
children: buttonRow
|
|
8576
|
+
}
|
|
8577
|
+
) : null,
|
|
8578
|
+
additionalFiltersContainer ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { children: additionalFiltersContainer }) : null
|
|
8579
|
+
] });
|
|
8580
|
+
};
|
|
8581
|
+
var FilterMenu = ({
|
|
8582
|
+
id,
|
|
8583
|
+
filterTitle = "Show results",
|
|
8584
|
+
menuControls,
|
|
8585
|
+
additionalFiltersContainer,
|
|
8586
|
+
children,
|
|
8587
|
+
dataTestId,
|
|
8588
|
+
resetButtonText = "reset"
|
|
8589
|
+
}) => {
|
|
8590
|
+
const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
|
|
8591
|
+
const innerMenuRef = import_react80.default.useRef(null);
|
|
8592
|
+
(0, import_react80.useEffect)(() => {
|
|
8593
|
+
var _a;
|
|
8594
|
+
if (filterVisibility) {
|
|
8595
|
+
(_a = innerMenuRef.current) == null ? void 0 : _a.focus();
|
|
8596
|
+
}
|
|
8597
|
+
}, [filterVisibility]);
|
|
8598
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_design_system46.VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
8599
|
+
SearchAndFilterOptionsContainer2,
|
|
8600
|
+
{
|
|
8601
|
+
buttonRow: menuControls,
|
|
8602
|
+
additionalFiltersContainer,
|
|
8603
|
+
children: [
|
|
8604
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_design_system46.HorizontalRhythm, { gap: "sm", align: "center", justify: "space-between", children: [
|
|
8605
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
|
|
8606
|
+
(filters == null ? void 0 : filters.length) ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
8607
|
+
"button",
|
|
8608
|
+
{
|
|
8609
|
+
type: "button",
|
|
8610
|
+
css: ResetConditionsBtn,
|
|
8611
|
+
onClick: () => {
|
|
8612
|
+
handleResetFilters();
|
|
8613
|
+
setFilterVisibility(false);
|
|
8614
|
+
},
|
|
8615
|
+
"data-testid": "reset-filters",
|
|
8616
|
+
children: resetButtonText
|
|
8617
|
+
}
|
|
8618
|
+
) : null
|
|
8619
|
+
] }),
|
|
8620
|
+
children
|
|
8621
|
+
]
|
|
8622
|
+
}
|
|
8623
|
+
) : null });
|
|
8624
|
+
};
|
|
8625
|
+
|
|
8626
|
+
// src/components/SearchAndFilter/FilterItem.tsx
|
|
8627
|
+
var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
|
|
8628
|
+
var FilterItem = ({
|
|
8629
|
+
index,
|
|
8630
|
+
paramOptions,
|
|
8631
|
+
operatorOptions,
|
|
8632
|
+
valueOptions,
|
|
8633
|
+
onParamChange,
|
|
8634
|
+
onOperatorChange,
|
|
8635
|
+
onValueChange
|
|
8636
|
+
}) => {
|
|
8637
|
+
var _a, _b;
|
|
8638
|
+
const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
|
|
8639
|
+
const label = filters[index].field !== "" ? filters[index].field : "unknown filter field";
|
|
8640
|
+
const operatorLabel = filters[index].operator !== "" ? `operator ${filters[index].operator}` : "unknown operator";
|
|
8641
|
+
const metaDataLabel = filters[index].value !== "" ? `value ${filters[index].value}` : "unknown value";
|
|
8642
|
+
const metaDataPossibleOptions = (_b = (_a = operatorOptions.find((op) => filters[index].operator === op.value)) == null ? void 0 : _a.editorType) != null ? _b : "singleChoice";
|
|
8643
|
+
const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly, bindable } = (0, import_react81.useMemo)(() => {
|
|
8644
|
+
var _a2;
|
|
8645
|
+
const currentSelectedFilter = filterOptions.find((item) => {
|
|
8646
|
+
var _a3;
|
|
8647
|
+
return (_a3 = item.options) == null ? void 0 : _a3.find((op) => op.value === filters[index].field);
|
|
8648
|
+
});
|
|
8649
|
+
const selectedFieldValue2 = (_a2 = currentSelectedFilter == null ? void 0 : currentSelectedFilter.options) == null ? void 0 : _a2.find((item) => {
|
|
8650
|
+
return filters[index].field === item.value;
|
|
8651
|
+
});
|
|
8652
|
+
const isCurrentFieldReadOnly = selectedFieldValue2 == null ? void 0 : selectedFieldValue2.readOnly;
|
|
8653
|
+
const selectedOperatorValue2 = operatorOptions == null ? void 0 : operatorOptions.find((item) => {
|
|
8654
|
+
return filters[index].operator === item.value;
|
|
8655
|
+
});
|
|
8656
|
+
return {
|
|
8657
|
+
selectedFieldValue: selectedFieldValue2,
|
|
8658
|
+
selectedOperatorValue: selectedOperatorValue2 != null ? selectedOperatorValue2 : void 0,
|
|
8659
|
+
selectedMetaValue: filters[index].value,
|
|
8660
|
+
readOnly: isCurrentFieldReadOnly,
|
|
8661
|
+
bindable: selectedFieldValue2 == null ? void 0 : selectedFieldValue2.bindable
|
|
8662
|
+
};
|
|
8663
|
+
}, [filters, filterOptions, index, operatorOptions]);
|
|
8664
|
+
const readOnlyProps = readOnly ? {
|
|
8665
|
+
"aria-readonly": true,
|
|
8666
|
+
isSearchable: false,
|
|
8667
|
+
menuIsOpen: false,
|
|
8668
|
+
isClearable: false
|
|
8669
|
+
} : {};
|
|
8670
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
|
|
8671
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: index === 0 ? "Where" : "and" }),
|
|
8672
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { css: ConditionalInputRow, children: [
|
|
8673
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
8674
|
+
import_design_system47.InputComboBox,
|
|
8675
|
+
{
|
|
8676
|
+
"aria-label": label,
|
|
8677
|
+
options: paramOptions,
|
|
8678
|
+
onChange: (e) => {
|
|
8679
|
+
var _a2;
|
|
8680
|
+
onParamChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
|
|
8681
|
+
},
|
|
8682
|
+
isOptionDisabled: (option) => {
|
|
8683
|
+
var _a2;
|
|
8684
|
+
return (_a2 = option == null ? void 0 : option.disabled) != null ? _a2 : false;
|
|
8685
|
+
},
|
|
8686
|
+
styles: {
|
|
8687
|
+
menu(base) {
|
|
8688
|
+
return {
|
|
8689
|
+
...base,
|
|
8690
|
+
minWidth: "max-content"
|
|
8691
|
+
};
|
|
8692
|
+
}
|
|
8693
|
+
},
|
|
8694
|
+
value: selectedFieldValue,
|
|
8695
|
+
...readOnlyProps,
|
|
8696
|
+
id: "filter-field",
|
|
8697
|
+
name: `filter-field-${index}`
|
|
8698
|
+
}
|
|
8699
|
+
),
|
|
8700
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
8701
|
+
import_design_system47.InputComboBox,
|
|
8702
|
+
{
|
|
8703
|
+
"aria-label": operatorLabel,
|
|
8704
|
+
options: operatorOptions,
|
|
8705
|
+
onChange: (e) => {
|
|
8706
|
+
var _a2;
|
|
8707
|
+
return onOperatorChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
|
|
8708
|
+
},
|
|
8709
|
+
isDisabled: !filters[index].field,
|
|
8710
|
+
value: selectedOperatorValue,
|
|
8711
|
+
styles: {
|
|
8712
|
+
menu(base) {
|
|
8713
|
+
return {
|
|
8714
|
+
...base,
|
|
8715
|
+
minWidth: "max-content"
|
|
8716
|
+
};
|
|
8717
|
+
}
|
|
8718
|
+
},
|
|
8719
|
+
...readOnlyProps,
|
|
8720
|
+
id: "filter-operator",
|
|
8721
|
+
name: `filter-operator-${index}`
|
|
8722
|
+
}
|
|
8723
|
+
),
|
|
8724
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
8725
|
+
FilterEditorRenderer,
|
|
8726
|
+
{
|
|
8727
|
+
"aria-label": metaDataLabel,
|
|
8728
|
+
editorType: metaDataPossibleOptions,
|
|
8729
|
+
options: valueOptions,
|
|
8730
|
+
onChange: (e) => onValueChange(e != null ? e : ""),
|
|
8731
|
+
readOnly,
|
|
8732
|
+
bindable,
|
|
8733
|
+
disabled: !filters[index].operator,
|
|
8734
|
+
value: selectedMetaValue,
|
|
8735
|
+
valueTestId: "filter-value"
|
|
8736
|
+
}
|
|
8737
|
+
),
|
|
8738
|
+
readOnly || index === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
8739
|
+
"button",
|
|
8740
|
+
{
|
|
8741
|
+
type: "button",
|
|
8742
|
+
onClick: () => handleDeleteFilter(index),
|
|
8743
|
+
"aria-label": "delete filter",
|
|
8744
|
+
css: IconBtn,
|
|
8745
|
+
"data-testid": "delete-filter",
|
|
8746
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_design_system47.Icon, { icon: "trash", iconColor: "red", size: "1rem" })
|
|
8747
|
+
}
|
|
8748
|
+
)
|
|
8749
|
+
] })
|
|
8750
|
+
] });
|
|
8751
|
+
};
|
|
8752
|
+
var FilterItems = ({
|
|
8753
|
+
addButtonText = "add condition",
|
|
8754
|
+
additionalFiltersContainer
|
|
8755
|
+
}) => {
|
|
8756
|
+
const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
|
|
8757
|
+
const handleUpdateFilter = (index, prop, value) => {
|
|
8758
|
+
var _a, _b, _c, _d, _e;
|
|
8759
|
+
const next = [...filters];
|
|
8760
|
+
next[index] = { ...next[index], [prop]: value };
|
|
8761
|
+
if (prop === "operator") {
|
|
8762
|
+
if (["eq", "neq", "lt", "gt"].includes(value) && Array.isArray(next[index].value)) {
|
|
8763
|
+
next[index].value = next[index].value[0];
|
|
8764
|
+
}
|
|
8765
|
+
if (filters[index].operator === "ndef" || filters[index].operator === "def") {
|
|
8766
|
+
next[index].value = "";
|
|
8767
|
+
}
|
|
8768
|
+
if (["between"].includes(value) && Array.isArray(next[index].value) === false) {
|
|
8769
|
+
next[index].value = [next[index].value, ""];
|
|
8770
|
+
}
|
|
8771
|
+
if (value === "def" || value === "true") {
|
|
8772
|
+
next[index].value = "true";
|
|
8773
|
+
}
|
|
8774
|
+
if (value === "ndef" || value === "false") {
|
|
8775
|
+
next[index].value = "false";
|
|
8776
|
+
}
|
|
8777
|
+
}
|
|
8778
|
+
if (prop === "field") {
|
|
8779
|
+
const firstOperatorInAvailableOperators = (_e = (_d = (_c = (_b = (_a = filterOptions.find((fo) => {
|
|
8780
|
+
var _a2;
|
|
8781
|
+
return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === value);
|
|
8782
|
+
})) == null ? void 0 : _a.options) == null ? void 0 : _b.find((op) => op.value === next[index].field)) == null ? void 0 : _c.operatorOptions) == null ? void 0 : _d[0].value) != null ? _e : "eq";
|
|
8783
|
+
next[index].operator = firstOperatorInAvailableOperators;
|
|
8784
|
+
next[index].value = "";
|
|
8785
|
+
}
|
|
8786
|
+
setFilters(next);
|
|
8787
|
+
};
|
|
8788
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
8789
|
+
FilterMenu,
|
|
8790
|
+
{
|
|
8791
|
+
id: "search-and-filter-options",
|
|
8792
|
+
dataTestId: "search-and-filter-options",
|
|
8793
|
+
menuControls: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
|
|
8794
|
+
"button",
|
|
8795
|
+
{
|
|
8796
|
+
type: "button",
|
|
8797
|
+
css: AddConditionalBtn,
|
|
8798
|
+
onClick: handleAddFilter,
|
|
8799
|
+
"data-testid": "add-filter",
|
|
8800
|
+
children: [
|
|
8801
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_design_system47.Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
|
|
8802
|
+
addButtonText
|
|
8803
|
+
]
|
|
8804
|
+
}
|
|
8805
|
+
),
|
|
8806
|
+
additionalFiltersContainer,
|
|
8807
|
+
children: filters.map((item, i) => {
|
|
8808
|
+
var _a, _b, _c, _d, _e, _f;
|
|
8809
|
+
const availableTypeOptions = (_b = (_a = filterOptions.find((fo) => {
|
|
8810
|
+
var _a2;
|
|
8811
|
+
return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === item.field);
|
|
8812
|
+
})) == null ? void 0 : _a.options) != null ? _b : [];
|
|
8813
|
+
const possibleValueOptions = (_d = (_c = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _c.valueOptions) != null ? _d : [];
|
|
8814
|
+
const possibleOperators = (_f = (_e = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _e.operatorOptions) != null ? _f : [];
|
|
8815
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
8816
|
+
FilterItem,
|
|
8817
|
+
{
|
|
8818
|
+
index: i,
|
|
8819
|
+
paramOptions: filterOptions,
|
|
8820
|
+
onParamChange: (e) => handleUpdateFilter(i, "field", e),
|
|
8821
|
+
operatorOptions: possibleOperators,
|
|
8822
|
+
onOperatorChange: (e) => handleUpdateFilter(i, "operator", e),
|
|
8823
|
+
onValueChange: (e) => handleUpdateFilter(i, "value", e),
|
|
8824
|
+
valueOptions: possibleValueOptions
|
|
8825
|
+
},
|
|
8826
|
+
i
|
|
8827
|
+
);
|
|
8828
|
+
})
|
|
8829
|
+
}
|
|
8830
|
+
);
|
|
8831
|
+
};
|
|
8832
|
+
|
|
8833
|
+
// src/components/SearchAndFilter/SearchAndFilter.tsx
|
|
8834
|
+
var import_design_system49 = require("@uniformdev/design-system");
|
|
8835
|
+
|
|
8836
|
+
// src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
|
|
8837
|
+
var import_design_system48 = require("@uniformdev/design-system");
|
|
8838
|
+
var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
|
|
8839
|
+
var SearchAndFilterResultContainer = ({
|
|
8840
|
+
buttonText,
|
|
8841
|
+
clearButtonLabel = "clear",
|
|
8842
|
+
calloutTitle,
|
|
8843
|
+
calloutText,
|
|
8844
|
+
onHandleClear,
|
|
8845
|
+
hideClearButton
|
|
8846
|
+
}) => {
|
|
8847
|
+
const { searchTerm, setSearchTerm, totalResults, setFilters, filters } = useSearchAndFilter();
|
|
8848
|
+
const automateCalloutTitle = () => {
|
|
8849
|
+
if (searchTerm && !filters.length) {
|
|
8850
|
+
return "No search results found";
|
|
8851
|
+
}
|
|
8852
|
+
if (filters.length && !searchTerm) {
|
|
8853
|
+
return "No results match the selected filters";
|
|
8854
|
+
}
|
|
8855
|
+
return "No matching results found";
|
|
8856
|
+
};
|
|
8857
|
+
const handleResetFilters = () => {
|
|
8858
|
+
if (searchTerm && !filters.length) {
|
|
8859
|
+
setSearchTerm("");
|
|
8860
|
+
return;
|
|
8861
|
+
} else if (!searchTerm && filters.length) {
|
|
8862
|
+
setFilters([{ field: "", operator: "", value: "" }]);
|
|
8863
|
+
return;
|
|
8864
|
+
} else {
|
|
8865
|
+
setSearchTerm("");
|
|
8866
|
+
setFilters([{ field: "", operator: "", value: "" }]);
|
|
8867
|
+
return;
|
|
8868
|
+
}
|
|
8869
|
+
};
|
|
8870
|
+
if (totalResults && totalResults > 0) {
|
|
8871
|
+
return null;
|
|
8872
|
+
}
|
|
8873
|
+
return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
|
|
8874
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_design_system48.HorizontalRhythm, { children: [
|
|
8875
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { children: [
|
|
8876
|
+
totalResults,
|
|
8877
|
+
" results ",
|
|
8878
|
+
searchTerm ? `for "${searchTerm}"` : null
|
|
8879
|
+
] }),
|
|
8880
|
+
!searchTerm || hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_design_system48.Button, { buttonType: "ghostDestructive", size: "zero", onClick: () => setSearchTerm(""), children: clearButtonLabel })
|
|
8881
|
+
] }),
|
|
8882
|
+
totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_design_system48.Callout, { title: calloutTitle != null ? calloutTitle : automateCalloutTitle(), type: "note", children: [
|
|
8883
|
+
calloutText ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_design_system48.Paragraph, { children: calloutText }) : null,
|
|
8884
|
+
hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_design_system48.Button, { buttonType: "tertiaryOutline", size: "xs", onClick: onHandleClear != null ? onHandleClear : handleResetFilters, children: buttonText != null ? buttonText : "Clear search" })
|
|
8885
|
+
] }) : null
|
|
8886
|
+
] });
|
|
8887
|
+
};
|
|
8888
|
+
|
|
8889
|
+
// src/components/SearchAndFilter/SearchAndFilter.tsx
|
|
8890
|
+
var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
|
|
8891
|
+
var SearchAndFilter = ({
|
|
8892
|
+
filters,
|
|
8893
|
+
filterOptions,
|
|
8894
|
+
filterVisible,
|
|
8895
|
+
filterControls,
|
|
8896
|
+
viewSwitchControls,
|
|
8897
|
+
resultsContainerView = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SearchAndFilterResultContainer, {}),
|
|
8898
|
+
filterMapper: filterMapper2 = filterMapper,
|
|
8899
|
+
additionalFiltersContainer,
|
|
8900
|
+
onChange,
|
|
8901
|
+
defaultSearchTerm,
|
|
8902
|
+
onSearchChange,
|
|
8903
|
+
totalResults,
|
|
8904
|
+
resetFilterValues = []
|
|
8905
|
+
}) => {
|
|
8906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
8907
|
+
SearchAndFilterProvider,
|
|
8908
|
+
{
|
|
8909
|
+
filters,
|
|
8910
|
+
filterOptions,
|
|
8911
|
+
filterVisible,
|
|
8912
|
+
onChange,
|
|
8913
|
+
defaultSearchTerm,
|
|
8914
|
+
onSearchChange,
|
|
8915
|
+
totalResults,
|
|
8916
|
+
resetFilterValues,
|
|
8917
|
+
filterMapper: filterMapper2,
|
|
8918
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_design_system49.VerticalRhythm, { "data-testid": "search-and-filter", children: [
|
|
8919
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
|
|
8920
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
8921
|
+
"div",
|
|
8922
|
+
{
|
|
8923
|
+
css: SearchAndFilterControlsWrapper(viewSwitchControls ? "auto 1fr 0.05fr" : "auto 1fr"),
|
|
8924
|
+
children: !filterControls ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
|
|
8925
|
+
}
|
|
8926
|
+
),
|
|
8927
|
+
viewSwitchControls
|
|
8928
|
+
] }),
|
|
8929
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(FilterItems, { additionalFiltersContainer }),
|
|
8930
|
+
resultsContainerView
|
|
8931
|
+
] })
|
|
8932
|
+
}
|
|
8933
|
+
);
|
|
8934
|
+
};
|
|
8935
|
+
|
|
8936
|
+
// src/components/SearchAndFilter/SearchOnlyFilter.tsx
|
|
8937
|
+
var import_design_system50 = require("@uniformdev/design-system");
|
|
8938
|
+
var import_react82 = require("react");
|
|
8939
|
+
var import_react_use7 = require("react-use");
|
|
8940
|
+
var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
|
|
8941
|
+
var SearchOnlyContext = (0, import_react82.createContext)({
|
|
8942
|
+
searchTerm: "",
|
|
8943
|
+
setSearchTerm: () => {
|
|
8944
|
+
}
|
|
8945
|
+
});
|
|
8946
|
+
var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
|
|
8947
|
+
const { searchTerm, setSearchTerm } = useSearchAndFilter();
|
|
8948
|
+
const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react82.useState)("");
|
|
8949
|
+
(0, import_react_use7.useDebounce)(
|
|
8950
|
+
() => {
|
|
8951
|
+
setSearchTerm(localeSearchTerm);
|
|
8952
|
+
onSearchChange == null ? void 0 : onSearchChange(localeSearchTerm);
|
|
8953
|
+
},
|
|
8954
|
+
300,
|
|
8955
|
+
[localeSearchTerm]
|
|
8956
|
+
);
|
|
8957
|
+
return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
|
|
8958
|
+
SearchOnlyContext.Provider,
|
|
8959
|
+
{
|
|
8960
|
+
value: {
|
|
8961
|
+
searchTerm,
|
|
8962
|
+
setSearchTerm: setLocaleSearchTerm
|
|
8963
|
+
},
|
|
8964
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
|
|
8965
|
+
import_design_system50.InputKeywordSearch,
|
|
8966
|
+
{
|
|
8967
|
+
placeholder: "Search...",
|
|
8968
|
+
onSearchTextChanged: (e) => setLocaleSearchTerm(e),
|
|
8969
|
+
value: localeSearchTerm,
|
|
8970
|
+
compact: true,
|
|
8971
|
+
rounded: true
|
|
8972
|
+
}
|
|
8973
|
+
) })
|
|
8974
|
+
}
|
|
8975
|
+
);
|
|
8976
|
+
};
|
|
8977
|
+
|
|
8978
|
+
// src/components/SearchAndFilter2/filtersMapper.tsx
|
|
8979
|
+
var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
|
|
8980
|
+
function withInputVariables(WrappedComponent) {
|
|
8981
|
+
const WithInputVariables = (props) => {
|
|
8982
|
+
if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
|
|
8983
|
+
return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(WrappedComponent, { ...props });
|
|
8984
|
+
}
|
|
8985
|
+
return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
8986
|
+
InputVariables,
|
|
8987
|
+
{
|
|
8988
|
+
disableInlineMenu: true,
|
|
8989
|
+
showMenuPosition: "inline-right",
|
|
8990
|
+
onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
|
|
8991
|
+
value: props.value,
|
|
8992
|
+
disabled: props.disabled,
|
|
8993
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(WrappedComponent, { ...props })
|
|
8994
|
+
}
|
|
8995
|
+
);
|
|
8996
|
+
};
|
|
8997
|
+
return WithInputVariables;
|
|
8998
|
+
}
|
|
8999
|
+
function withInputVariablesForMultiValue(WrappedComponent) {
|
|
9000
|
+
const WithInputVariables = (props) => {
|
|
9001
|
+
var _a;
|
|
9002
|
+
if (!props.bindable || props.disabled || props.readOnly) {
|
|
9003
|
+
return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(WrappedComponent, { ...props });
|
|
7589
9004
|
}
|
|
7590
|
-
return /* @__PURE__ */ (0,
|
|
9005
|
+
return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
7591
9006
|
InputVariables,
|
|
7592
9007
|
{
|
|
7593
9008
|
disableInlineMenu: true,
|
|
7594
9009
|
showMenuPosition: "inline-right",
|
|
7595
9010
|
onChange: (newValue) => props.onChange(newValue ? [newValue] : []),
|
|
7596
9011
|
value: (_a = props.value) == null ? void 0 : _a[0],
|
|
7597
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
9012
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(WrappedComponent, { ...props })
|
|
7598
9013
|
}
|
|
7599
9014
|
);
|
|
7600
9015
|
};
|
|
7601
9016
|
return WithInputVariables;
|
|
7602
9017
|
}
|
|
7603
9018
|
var bindableFiltersMapper = {
|
|
7604
|
-
...
|
|
7605
|
-
multiChoice: withInputVariablesForMultiValue(
|
|
7606
|
-
singleChoice: withInputVariables(
|
|
7607
|
-
date: withInputVariables(
|
|
7608
|
-
text: withInputVariables(
|
|
7609
|
-
number: withInputVariables(
|
|
9019
|
+
...filterMapper,
|
|
9020
|
+
multiChoice: withInputVariablesForMultiValue(FilterMultiChoiceEditor),
|
|
9021
|
+
singleChoice: withInputVariables(FilterSingleChoiceEditor),
|
|
9022
|
+
date: withInputVariables(DateEditor),
|
|
9023
|
+
text: withInputVariables(TextEditor),
|
|
9024
|
+
number: withInputVariables(NumberEditor)
|
|
7610
9025
|
};
|
|
7611
9026
|
|
|
9027
|
+
// src/utils/createLocationValidator.ts
|
|
9028
|
+
function createLocationValidator(setValue, validate) {
|
|
9029
|
+
return (dispatch) => setValue((previous) => {
|
|
9030
|
+
const { newValue, options } = dispatch(previous);
|
|
9031
|
+
return { newValue, options: validate(newValue, options) };
|
|
9032
|
+
});
|
|
9033
|
+
}
|
|
9034
|
+
|
|
9035
|
+
// src/utils/useContentDataResourceLocaleInfo.ts
|
|
9036
|
+
var import_canvas10 = require("@uniformdev/canvas");
|
|
9037
|
+
var import_react83 = require("react");
|
|
9038
|
+
function useContentDataResourceLocaleInfo({
|
|
9039
|
+
locale,
|
|
9040
|
+
setLocale,
|
|
9041
|
+
dynamicInputs
|
|
9042
|
+
}) {
|
|
9043
|
+
var _a;
|
|
9044
|
+
const setLocaleRef = (0, import_react83.useRef)(setLocale);
|
|
9045
|
+
setLocaleRef.current = setLocale;
|
|
9046
|
+
const { flatVariables } = useVariables();
|
|
9047
|
+
const effectiveLocale = locale != null ? locale : dynamicInputs[import_canvas10.LOCALE_DYNAMIC_INPUT_NAME] ? (0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME) : "";
|
|
9048
|
+
const boundLocale = (_a = (0, import_canvas10.bindVariables)({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
|
|
9049
|
+
(0, import_react83.useEffect)(() => {
|
|
9050
|
+
if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
|
|
9051
|
+
setLocaleRef.current((0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME));
|
|
9052
|
+
}
|
|
9053
|
+
}, [locale, effectiveLocale]);
|
|
9054
|
+
return { effectiveLocale, boundLocale: boundLocale ? boundLocale : void 0 };
|
|
9055
|
+
}
|
|
9056
|
+
|
|
7612
9057
|
// src/index.ts
|
|
7613
|
-
var
|
|
9058
|
+
var import_design_system51 = require("@uniformdev/design-system");
|
|
7614
9059
|
__reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
7615
9060
|
// Annotate the CommonJS export names for ESM import in node:
|
|
7616
9061
|
0 && (module.exports = {
|
|
@@ -7618,23 +9063,33 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
|
7618
9063
|
$isVariableNode,
|
|
7619
9064
|
AddListButton,
|
|
7620
9065
|
Button,
|
|
9066
|
+
CHECKBOX_OPERATORS,
|
|
7621
9067
|
Callout,
|
|
7622
|
-
ControlledObjectSearchProvider,
|
|
7623
9068
|
ControlledValuePlugin,
|
|
9069
|
+
DATE_OPERATORS,
|
|
7624
9070
|
DISCONNECT_VARIABLE_COMMAND,
|
|
7625
9071
|
DamSelectedItem,
|
|
7626
9072
|
DataRefreshButton,
|
|
7627
9073
|
DataResourceDynamicInputProvider,
|
|
7628
|
-
DataResourceInputContext,
|
|
7629
9074
|
DataResourceVariablesList,
|
|
7630
9075
|
DataResourceVariablesListExplicit,
|
|
7631
9076
|
DataSourceEditor,
|
|
7632
9077
|
DataTypeEditor,
|
|
9078
|
+
DateEditor,
|
|
9079
|
+
DateRangeEditor,
|
|
7633
9080
|
DefaultSearchRow,
|
|
7634
9081
|
DefaultSelectedItem,
|
|
7635
9082
|
DrawerContent,
|
|
7636
9083
|
EDIT_VARIABLE_COMMAND,
|
|
7637
9084
|
EntrySearch,
|
|
9085
|
+
FilterButton,
|
|
9086
|
+
FilterControls,
|
|
9087
|
+
FilterEditorRenderer,
|
|
9088
|
+
FilterItem,
|
|
9089
|
+
FilterItems,
|
|
9090
|
+
FilterMenu,
|
|
9091
|
+
FilterMultiChoiceEditor,
|
|
9092
|
+
FilterSingleChoiceEditor,
|
|
7638
9093
|
Heading,
|
|
7639
9094
|
INSERT_VARIABLE_COMMAND,
|
|
7640
9095
|
Icons,
|
|
@@ -7651,18 +9106,20 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
|
7651
9106
|
Menu,
|
|
7652
9107
|
MenuItem,
|
|
7653
9108
|
MeshApp,
|
|
9109
|
+
NUMBER_OPERATORS,
|
|
9110
|
+
NumberEditor,
|
|
9111
|
+
NumberRangeEditor,
|
|
7654
9112
|
OPEN_INSERT_VARIABLE_COMMAND,
|
|
7655
9113
|
ObjectSearchContainer,
|
|
7656
|
-
ObjectSearchContext,
|
|
7657
9114
|
ObjectSearchFilter,
|
|
7658
9115
|
ObjectSearchFilterContainer,
|
|
7659
9116
|
ObjectSearchListItem,
|
|
7660
9117
|
ObjectSearchListItemLoadingSkeleton,
|
|
7661
|
-
ObjectSearchListOfSearchResults,
|
|
7662
9118
|
ObjectSearchProvider,
|
|
7663
9119
|
ObjectSearchResultItem,
|
|
7664
9120
|
ObjectSearchResultItemButton,
|
|
7665
9121
|
ObjectSearchResultList,
|
|
9122
|
+
PUBLISH_STATUS_FIELD_OPERATORS,
|
|
7666
9123
|
ParamTypeDynamicDataProvider,
|
|
7667
9124
|
ParameterConnectionIndicator,
|
|
7668
9125
|
ParameterGroup,
|
|
@@ -7690,6 +9147,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
|
7690
9147
|
ProductSearchRow,
|
|
7691
9148
|
ProductSelectedItem,
|
|
7692
9149
|
QueryFilter,
|
|
9150
|
+
RICHTEXT_OPERATORS,
|
|
7693
9151
|
RequestBody,
|
|
7694
9152
|
RequestHeaders,
|
|
7695
9153
|
RequestMethodSelect,
|
|
@@ -7699,20 +9157,33 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
|
7699
9157
|
RequestUrl,
|
|
7700
9158
|
RequestUrlInput,
|
|
7701
9159
|
ResolvableLoadingValue,
|
|
9160
|
+
SYSTEM_DATE_OPERATORS,
|
|
9161
|
+
SYSTEM_FIELD_OPERATORS,
|
|
7702
9162
|
ScrollableList,
|
|
7703
9163
|
ScrollableListItem,
|
|
9164
|
+
SearchAndFilter,
|
|
9165
|
+
SearchAndFilterContext,
|
|
9166
|
+
SearchAndFilterOptionsContainer,
|
|
9167
|
+
SearchAndFilterProvider,
|
|
9168
|
+
SearchAndFilterResultContainer,
|
|
9169
|
+
SearchOnlyContext,
|
|
9170
|
+
SearchOnlyFilter,
|
|
7704
9171
|
SelectionField,
|
|
9172
|
+
StatusMultiEditor,
|
|
9173
|
+
StatusSingleEditor,
|
|
7705
9174
|
Switch,
|
|
9175
|
+
TEXTBOX_OPERATORS,
|
|
9176
|
+
TextEditor,
|
|
7706
9177
|
TextVariableRenderer,
|
|
7707
9178
|
Textarea,
|
|
7708
9179
|
Theme,
|
|
9180
|
+
USER_OPERATORS,
|
|
7709
9181
|
VariableEditor,
|
|
7710
9182
|
VariableNode,
|
|
7711
9183
|
VariablesList,
|
|
7712
9184
|
VariablesPlugin,
|
|
7713
9185
|
VariablesProvider,
|
|
7714
9186
|
badgeIcon,
|
|
7715
|
-
bindQuery,
|
|
7716
9187
|
bindableFiltersMapper,
|
|
7717
9188
|
convertConnectedDataToVariable,
|
|
7718
9189
|
createLocationValidator,
|
|
@@ -7744,6 +9215,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
|
7744
9215
|
entrySearchSelectInput,
|
|
7745
9216
|
entrySearchSelectOption,
|
|
7746
9217
|
entrySearchWrapper,
|
|
9218
|
+
filterMapper,
|
|
7747
9219
|
hasReferencedVariables,
|
|
7748
9220
|
prettifyBindExpression,
|
|
7749
9221
|
productSearchRowActiveIcon,
|
|
@@ -7785,7 +9257,6 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
|
7785
9257
|
urlEncodeRequestUrl,
|
|
7786
9258
|
useConnectedDataAsVariables,
|
|
7787
9259
|
useContentDataResourceLocaleInfo,
|
|
7788
|
-
useDataResourceDynamicInputs,
|
|
7789
9260
|
useDynamicInputsAsVariables,
|
|
7790
9261
|
useMeshLocation,
|
|
7791
9262
|
useObjectSearchContext,
|
|
@@ -7795,6 +9266,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
|
7795
9266
|
useRequest,
|
|
7796
9267
|
useRequestHeader,
|
|
7797
9268
|
useRequestParameter,
|
|
9269
|
+
useSearchAndFilter,
|
|
7798
9270
|
useUniformMeshSdk,
|
|
7799
9271
|
useVariableEditor,
|
|
7800
9272
|
useVariables,
|