@uniformdev/mesh-sdk-react 20.50.2-alpha.2 → 20.50.2-alpha.39
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 +64 -5
- package/dist/index.d.ts +64 -5
- package/dist/index.esm.js +389 -269
- package/dist/index.js +630 -506
- package/dist/index.mjs +389 -269
- package/package.json +6 -6
package/dist/index.js
CHANGED
|
@@ -49,6 +49,9 @@ __export(src_exports, {
|
|
|
49
49
|
DataTypeEditor: () => DataTypeEditor,
|
|
50
50
|
DateEditor: () => DateEditor,
|
|
51
51
|
DateRangeEditor: () => DateRangeEditor,
|
|
52
|
+
DelegationContext: () => DelegationContext,
|
|
53
|
+
DelegationGate: () => DelegationGate,
|
|
54
|
+
DelegationProvider: () => DelegationProvider,
|
|
52
55
|
DrawerContent: () => import_design_system53.DrawerContent,
|
|
53
56
|
EDIT_VARIABLE_COMMAND: () => EDIT_VARIABLE_COMMAND,
|
|
54
57
|
FilterButton: () => FilterButton2,
|
|
@@ -161,6 +164,7 @@ __export(src_exports, {
|
|
|
161
164
|
urlEncodeRequestUrl: () => urlEncodeRequestUrl,
|
|
162
165
|
useConnectedDataAsVariables: () => useConnectedDataAsVariables,
|
|
163
166
|
useContentDataResourceLocaleInfo: () => useContentDataResourceLocaleInfo,
|
|
167
|
+
useDelegation: () => useDelegation,
|
|
164
168
|
useDynamicInputsAsVariables: () => useDynamicInputsAsVariables,
|
|
165
169
|
useMeshLocation: () => useMeshLocation,
|
|
166
170
|
useObjectSearchContext: () => useObjectSearchContext,
|
|
@@ -444,12 +448,28 @@ function useConnectedDataAsVariables(connectedData) {
|
|
|
444
448
|
);
|
|
445
449
|
}
|
|
446
450
|
|
|
451
|
+
// src/hooks/useDelegation.ts
|
|
452
|
+
var import_react4 = require("react");
|
|
453
|
+
|
|
454
|
+
// src/components/Delegation/DelegationContext.ts
|
|
455
|
+
var import_react3 = require("react");
|
|
456
|
+
var DelegationContext = (0, import_react3.createContext)(null);
|
|
457
|
+
|
|
458
|
+
// src/hooks/useDelegation.ts
|
|
459
|
+
function useDelegation() {
|
|
460
|
+
const ctx = (0, import_react4.useContext)(DelegationContext);
|
|
461
|
+
if (!ctx) {
|
|
462
|
+
throw new Error("useDelegation must be used within a <DelegationProvider>");
|
|
463
|
+
}
|
|
464
|
+
return ctx;
|
|
465
|
+
}
|
|
466
|
+
|
|
447
467
|
// src/hooks/useDynamicInputsAsVariables.tsx
|
|
448
468
|
var import_canvas = require("@uniformdev/canvas");
|
|
449
|
-
var
|
|
469
|
+
var import_react5 = require("react");
|
|
450
470
|
var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
|
|
451
471
|
function useDynamicInputsAsVariables(dynamicInputs) {
|
|
452
|
-
return (0,
|
|
472
|
+
return (0, import_react5.useMemo)(() => {
|
|
453
473
|
const result = Object.entries(dynamicInputs).reduce(
|
|
454
474
|
(acc, [name2, input3]) => {
|
|
455
475
|
const source = `from ${name2 === import_canvas.LOCALE_DYNAMIC_INPUT_NAME ? "current locale" : input3.type === "path" ? "URL path" : "query string"}`;
|
|
@@ -484,18 +504,18 @@ Current preview value: ${input3.value || "not provided"}`
|
|
|
484
504
|
}
|
|
485
505
|
|
|
486
506
|
// src/hooks/useMeshLocation.ts
|
|
487
|
-
var
|
|
507
|
+
var import_react8 = require("react");
|
|
488
508
|
|
|
489
509
|
// src/components/UniformMeshLocationContext.tsx
|
|
490
|
-
var
|
|
510
|
+
var import_react7 = require("react");
|
|
491
511
|
|
|
492
512
|
// src/components/UniformMeshSdkContext.tsx
|
|
493
513
|
var import_design_system = require("@uniformdev/design-system");
|
|
494
|
-
var
|
|
514
|
+
var import_react6 = require("react");
|
|
495
515
|
var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
|
|
496
|
-
var UniformMeshSdkContext = (0,
|
|
516
|
+
var UniformMeshSdkContext = (0, import_react6.createContext)(void 0);
|
|
497
517
|
var useUniformMeshSdkContext = () => {
|
|
498
|
-
const context = (0,
|
|
518
|
+
const context = (0, import_react6.useContext)(UniformMeshSdkContext);
|
|
499
519
|
if (!context) {
|
|
500
520
|
throw new Error("useUniformMeshSdkContext must be used within <MeshApp /> or <UniformMeshSdkContext />");
|
|
501
521
|
}
|
|
@@ -510,13 +530,13 @@ function useUniformMeshSdk() {
|
|
|
510
530
|
|
|
511
531
|
// src/components/UniformMeshLocationContext.tsx
|
|
512
532
|
var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
|
|
513
|
-
var UniformMeshLocationContext = (0,
|
|
533
|
+
var UniformMeshLocationContext = (0, import_react7.createContext)(void 0);
|
|
514
534
|
var UniformMeshLocationContextProvider = ({
|
|
515
535
|
children
|
|
516
536
|
}) => {
|
|
517
537
|
const sdk = useUniformMeshSdk();
|
|
518
|
-
const [location, setLocation] = (0,
|
|
519
|
-
(0,
|
|
538
|
+
const [location, setLocation] = (0, import_react7.useState)(sdk.getCurrentLocation());
|
|
539
|
+
(0, import_react7.useMemo)(() => {
|
|
520
540
|
const valueChangeListener = (event) => {
|
|
521
541
|
setLocation((old) => ({ ...old, value: event.newValue }));
|
|
522
542
|
};
|
|
@@ -533,7 +553,7 @@ var UniformMeshLocationContextProvider = ({
|
|
|
533
553
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UniformMeshLocationContext.Provider, { value: { location }, children });
|
|
534
554
|
};
|
|
535
555
|
var useUniformMeshLocationContext = () => {
|
|
536
|
-
const context = (0,
|
|
556
|
+
const context = (0, import_react7.useContext)(UniformMeshLocationContext);
|
|
537
557
|
if (!context) {
|
|
538
558
|
throw new Error("useUniformMeshLocationContext must be used within a UniformMeshLocationContextProvider");
|
|
539
559
|
}
|
|
@@ -546,9 +566,9 @@ function useMeshLocation(expectedLocation) {
|
|
|
546
566
|
if (expectedLocation && location.type !== expectedLocation) {
|
|
547
567
|
throw new Error(`Expected location type ${expectedLocation} but got ${location.type}`);
|
|
548
568
|
}
|
|
549
|
-
const backdoorLocation = (0,
|
|
569
|
+
const backdoorLocation = (0, import_react8.useRef)(location);
|
|
550
570
|
backdoorLocation.current = location;
|
|
551
|
-
const stabilizedSetValueProxy = (0,
|
|
571
|
+
const stabilizedSetValueProxy = (0, import_react8.useMemo)(
|
|
552
572
|
() => (dispatch) => {
|
|
553
573
|
const { newValue, options } = dispatch(backdoorLocation.current.value);
|
|
554
574
|
backdoorLocation.current.setValue(newValue, options);
|
|
@@ -567,7 +587,7 @@ var import_design_system2 = require("@uniformdev/design-system");
|
|
|
567
587
|
|
|
568
588
|
// src/components/Variables/composer/ControlledValuePlugin.tsx
|
|
569
589
|
var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
570
|
-
var
|
|
590
|
+
var import_react9 = require("react");
|
|
571
591
|
|
|
572
592
|
// src/components/Variables/util/serializeVariablesEditorState.ts
|
|
573
593
|
var import_canvas2 = require("@uniformdev/canvas");
|
|
@@ -711,7 +731,7 @@ function ControlledValuePlugin({
|
|
|
711
731
|
extraDependencies
|
|
712
732
|
}) {
|
|
713
733
|
const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
|
|
714
|
-
(0,
|
|
734
|
+
(0, import_react9.useEffect)(() => {
|
|
715
735
|
var _a, _b;
|
|
716
736
|
if (!enabled) {
|
|
717
737
|
return;
|
|
@@ -732,7 +752,7 @@ function ControlledValuePlugin({
|
|
|
732
752
|
|
|
733
753
|
// src/components/Variables/composer/VariableChip.tsx
|
|
734
754
|
var import_design_system3 = require("@uniformdev/design-system");
|
|
735
|
-
var
|
|
755
|
+
var import_react10 = require("react");
|
|
736
756
|
var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
|
|
737
757
|
function VariableChip({
|
|
738
758
|
displayName,
|
|
@@ -748,7 +768,7 @@ function VariableChip({
|
|
|
748
768
|
}) {
|
|
749
769
|
const hasClickEvent = !!onClick;
|
|
750
770
|
const referenceIsValidFr = isFresh ? true : referenceIsValid;
|
|
751
|
-
const Wrapper = referenceIsValidFr === "warning" ? WarningVariableReference : referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ?
|
|
771
|
+
const Wrapper = referenceIsValidFr === "warning" ? WarningVariableReference : referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? import_react10.Fragment : UndefinedVariableReference;
|
|
752
772
|
const extraTitle = !referenceIsValidFr ? errorMessage : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
|
|
753
773
|
const chippy = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system3.MultilineChip, { onClick, "aria-selected": selected ? true : void 0, "aria-disabled": disabled, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Wrapper, { children: displayName || reference }) });
|
|
754
774
|
if (tooltip) {
|
|
@@ -814,7 +834,7 @@ var import_utils2 = require("@lexical/utils");
|
|
|
814
834
|
var import_canvas5 = require("@uniformdev/canvas");
|
|
815
835
|
var import_design_system6 = require("@uniformdev/design-system");
|
|
816
836
|
var import_lexical5 = require("lexical");
|
|
817
|
-
var
|
|
837
|
+
var import_react18 = require("react");
|
|
818
838
|
|
|
819
839
|
// src/components/Variables/util/prettifyBindExpression.tsx
|
|
820
840
|
function prettifyBindExpression(bindExpression) {
|
|
@@ -823,7 +843,7 @@ function prettifyBindExpression(bindExpression) {
|
|
|
823
843
|
}
|
|
824
844
|
|
|
825
845
|
// src/components/Variables/composer/VariablesPlugin.tsx
|
|
826
|
-
var
|
|
846
|
+
var import_react16 = require("@emotion/react");
|
|
827
847
|
var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
|
|
828
848
|
var import_LexicalTypeaheadMenuPlugin = require("@lexical/react/LexicalTypeaheadMenuPlugin");
|
|
829
849
|
var import_utils = require("@lexical/utils");
|
|
@@ -832,12 +852,12 @@ var import_canvas4 = require("@uniformdev/canvas");
|
|
|
832
852
|
var import_design_system5 = require("@uniformdev/design-system");
|
|
833
853
|
var import_lite = require("dequal/lite");
|
|
834
854
|
var import_lexical4 = require("lexical");
|
|
835
|
-
var
|
|
855
|
+
var import_react17 = require("react");
|
|
836
856
|
var import_react_dom = require("react-dom");
|
|
837
857
|
|
|
838
858
|
// src/components/Variables/toolbox/SelectVariableMenu.styles.ts
|
|
839
|
-
var
|
|
840
|
-
var menuBtn =
|
|
859
|
+
var import_react11 = require("@emotion/react");
|
|
860
|
+
var menuBtn = import_react11.css`
|
|
841
861
|
background: none;
|
|
842
862
|
border: none;
|
|
843
863
|
color: var(--gray-500);
|
|
@@ -847,18 +867,18 @@ var menuBtn = import_react9.css`
|
|
|
847
867
|
outline: none;
|
|
848
868
|
}
|
|
849
869
|
`;
|
|
850
|
-
var menuItemTextGroup =
|
|
870
|
+
var menuItemTextGroup = import_react11.css`
|
|
851
871
|
align-items: flex-start;
|
|
852
872
|
display: flex;
|
|
853
873
|
flex-direction: column;
|
|
854
874
|
gap: 0;
|
|
855
875
|
line-height: 1em;
|
|
856
876
|
`;
|
|
857
|
-
var smallText =
|
|
877
|
+
var smallText = import_react11.css`
|
|
858
878
|
font-size: var(--fs-xs);
|
|
859
879
|
color: var(--gray-500);
|
|
860
880
|
`;
|
|
861
|
-
var variablesTipText =
|
|
881
|
+
var variablesTipText = import_react11.css`
|
|
862
882
|
${smallText}
|
|
863
883
|
color: var(--gray-500);
|
|
864
884
|
padding: 0 var(--spacing-sm);
|
|
@@ -866,18 +886,18 @@ var variablesTipText = import_react9.css`
|
|
|
866
886
|
|
|
867
887
|
// src/components/Variables/VariablesProvider.tsx
|
|
868
888
|
var import_mitt = __toESM(require("mitt"));
|
|
869
|
-
var
|
|
889
|
+
var import_react15 = require("react");
|
|
870
890
|
|
|
871
891
|
// src/components/Variables/util/useVariableEditTransaction.ts
|
|
872
|
-
var
|
|
892
|
+
var import_react12 = require("react");
|
|
873
893
|
function useVariableEditTransaction({
|
|
874
894
|
events,
|
|
875
895
|
dispatch,
|
|
876
896
|
isEditing,
|
|
877
897
|
variables
|
|
878
898
|
}) {
|
|
879
|
-
const [isEditingBinding, setIsEditingBinding] = (0,
|
|
880
|
-
(0,
|
|
899
|
+
const [isEditingBinding, setIsEditingBinding] = (0, import_react12.useState)();
|
|
900
|
+
(0, import_react12.useEffect)(() => {
|
|
881
901
|
if (!isEditingBinding) {
|
|
882
902
|
return;
|
|
883
903
|
}
|
|
@@ -888,7 +908,7 @@ function useVariableEditTransaction({
|
|
|
888
908
|
events.on("editCompleted", fn);
|
|
889
909
|
return () => events.off("editCompleted", fn);
|
|
890
910
|
}, [events, isEditingBinding, variables]);
|
|
891
|
-
(0,
|
|
911
|
+
(0, import_react12.useEffect)(() => {
|
|
892
912
|
if (!isEditing) {
|
|
893
913
|
if (isEditingBinding) {
|
|
894
914
|
isEditingBinding.resolve({ canceled: true });
|
|
@@ -896,7 +916,7 @@ function useVariableEditTransaction({
|
|
|
896
916
|
setIsEditingBinding(void 0);
|
|
897
917
|
}
|
|
898
918
|
}, [isEditing, isEditingBinding]);
|
|
899
|
-
return (0,
|
|
919
|
+
return (0, import_react12.useCallback)(
|
|
900
920
|
async function editVariableTxn(variable, context) {
|
|
901
921
|
if (isEditingBinding) {
|
|
902
922
|
dispatch({ type: "cancelEdit" });
|
|
@@ -918,13 +938,13 @@ function useVariableEditTransaction({
|
|
|
918
938
|
// src/components/Variables/VariableEditor.tsx
|
|
919
939
|
var import_zod = require("@hookform/resolvers/zod");
|
|
920
940
|
var import_design_system4 = require("@uniformdev/design-system");
|
|
921
|
-
var
|
|
941
|
+
var import_react14 = require("react");
|
|
922
942
|
var import_react_hook_form = require("react-hook-form");
|
|
923
943
|
var z = __toESM(require("zod/v3"));
|
|
924
944
|
|
|
925
945
|
// src/components/Variables/styles/VariableEditor.styles.ts
|
|
926
|
-
var
|
|
927
|
-
var variablesFormContainer =
|
|
946
|
+
var import_react13 = require("@emotion/react");
|
|
947
|
+
var variablesFormContainer = import_react13.css`
|
|
928
948
|
> * {
|
|
929
949
|
margin: var(--spacing-base) 0 0;
|
|
930
950
|
}
|
|
@@ -977,9 +997,9 @@ function VariableEditor({
|
|
|
977
997
|
},
|
|
978
998
|
activeWhenEditing: true
|
|
979
999
|
});
|
|
980
|
-
const nameRef = (0,
|
|
1000
|
+
const nameRef = (0, import_react14.useRef)(null);
|
|
981
1001
|
const { ref, ...nameRegister } = register("name");
|
|
982
|
-
(0,
|
|
1002
|
+
(0, import_react14.useLayoutEffect)(() => {
|
|
983
1003
|
if (nameRef.current && !nameRef.current.value) {
|
|
984
1004
|
nameRef.current.focus();
|
|
985
1005
|
}
|
|
@@ -1055,7 +1075,7 @@ function VariableEditor({
|
|
|
1055
1075
|
|
|
1056
1076
|
// src/components/Variables/VariablesProvider.tsx
|
|
1057
1077
|
var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
|
|
1058
|
-
var VariablesContext = (0,
|
|
1078
|
+
var VariablesContext = (0, import_react15.createContext)(null);
|
|
1059
1079
|
function VariablesProvider({
|
|
1060
1080
|
value,
|
|
1061
1081
|
onChange,
|
|
@@ -1066,9 +1086,9 @@ function VariablesProvider({
|
|
|
1066
1086
|
knownUndefinedValues = {},
|
|
1067
1087
|
onChangeKnownUndefinedValue
|
|
1068
1088
|
}) {
|
|
1069
|
-
const [editing, setEditing] = (0,
|
|
1070
|
-
const [editingContext, setEditingContext] = (0,
|
|
1071
|
-
const events = (0,
|
|
1089
|
+
const [editing, setEditing] = (0, import_react15.useState)();
|
|
1090
|
+
const [editingContext, setEditingContext] = (0, import_react15.useState)();
|
|
1091
|
+
const events = (0, import_react15.useMemo)(
|
|
1072
1092
|
() => (0, import_mitt.default)(),
|
|
1073
1093
|
[]
|
|
1074
1094
|
);
|
|
@@ -1076,7 +1096,7 @@ function VariablesProvider({
|
|
|
1076
1096
|
throw new Error("onChange must be provided when readOnly is false");
|
|
1077
1097
|
}
|
|
1078
1098
|
const Editor = editVariableComponent != null ? editVariableComponent : VariableEditor;
|
|
1079
|
-
const valueBasedContextValue = (0,
|
|
1099
|
+
const valueBasedContextValue = (0, import_react15.useMemo)(
|
|
1080
1100
|
() => ({
|
|
1081
1101
|
flatVariables: flattenVariables(value),
|
|
1082
1102
|
dispatch: (event) => {
|
|
@@ -1120,7 +1140,7 @@ function VariablesProvider({
|
|
|
1120
1140
|
isEditing: typeof editing !== "undefined",
|
|
1121
1141
|
variables: value
|
|
1122
1142
|
});
|
|
1123
|
-
const contextValue = (0,
|
|
1143
|
+
const contextValue = (0, import_react15.useMemo)(() => {
|
|
1124
1144
|
return {
|
|
1125
1145
|
...valueBasedContextValue,
|
|
1126
1146
|
editVariableTxn,
|
|
@@ -1131,7 +1151,7 @@ function VariablesProvider({
|
|
|
1131
1151
|
isLoading: !!isLoading
|
|
1132
1152
|
};
|
|
1133
1153
|
}, [valueBasedContextValue, editVariableTxn, editing, events, knownUndefinedValues, isLoading]);
|
|
1134
|
-
(0,
|
|
1154
|
+
(0, import_react15.useEffect)(() => {
|
|
1135
1155
|
if (editing === void 0) {
|
|
1136
1156
|
return;
|
|
1137
1157
|
}
|
|
@@ -1180,7 +1200,7 @@ function VariablesProvider({
|
|
|
1180
1200
|
] });
|
|
1181
1201
|
}
|
|
1182
1202
|
function useVariables(returnEmptyWithoutProvider = false) {
|
|
1183
|
-
const context = (0,
|
|
1203
|
+
const context = (0, import_react15.useContext)(VariablesContext);
|
|
1184
1204
|
if (!context) {
|
|
1185
1205
|
if (returnEmptyWithoutProvider) {
|
|
1186
1206
|
return {
|
|
@@ -1315,7 +1335,7 @@ function useVariablesMenu({
|
|
|
1315
1335
|
getEditorContext
|
|
1316
1336
|
}) {
|
|
1317
1337
|
const { variables, canDispatch, readOnly } = useVariables(true);
|
|
1318
|
-
const canEditVariable = (0,
|
|
1338
|
+
const canEditVariable = (0, import_react17.useCallback)(
|
|
1319
1339
|
(name2, variable) => (
|
|
1320
1340
|
// name === '' means new var. Add var perms computed by menu options.
|
|
1321
1341
|
name2 === "" || canDispatch && enableEditingVariables && !readOnly && !(variable == null ? void 0 : variable.readOnly)
|
|
@@ -1323,7 +1343,7 @@ function useVariablesMenu({
|
|
|
1323
1343
|
[canDispatch, enableEditingVariables, readOnly]
|
|
1324
1344
|
);
|
|
1325
1345
|
const canAddVariable = canDispatch && showAddVariableMenuOption && !readOnly;
|
|
1326
|
-
const { groupedVariables, menuOptions } = (0,
|
|
1346
|
+
const { groupedVariables, menuOptions } = (0, import_react17.useMemo)(() => {
|
|
1327
1347
|
const groupedVariables2 = variablesToGroupedList(variables, filterVariable, getEditorContext == null ? void 0 : getEditorContext());
|
|
1328
1348
|
if (canAddVariable) {
|
|
1329
1349
|
groupedVariables2.unshift({
|
|
@@ -1345,7 +1365,7 @@ function useVariablesMenu({
|
|
|
1345
1365
|
);
|
|
1346
1366
|
return { menuOptions: menuOptions2, groupedVariables: groupedVariables2 };
|
|
1347
1367
|
}, [variables, filterVariable, getEditorContext, canAddVariable, showAddVariableMenuOption]);
|
|
1348
|
-
const onSelect = (0,
|
|
1368
|
+
const onSelect = (0, import_react17.useCallback)(
|
|
1349
1369
|
({ queryString, value, nodeToReplace, editor, overwriteExistingValue }) => {
|
|
1350
1370
|
if (value === ADD_VARIABLE_OPTION) {
|
|
1351
1371
|
editor.update(() => {
|
|
@@ -1394,9 +1414,9 @@ function VariablesPlugin({
|
|
|
1394
1414
|
}) {
|
|
1395
1415
|
const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
|
|
1396
1416
|
const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues, isLoading } = useVariables(true);
|
|
1397
|
-
const variablesRef = (0,
|
|
1417
|
+
const variablesRef = (0, import_react17.useRef)({ variables, knownUndefinedValues, isLoading });
|
|
1398
1418
|
variablesRef.current = { variables, knownUndefinedValues, isLoading };
|
|
1399
|
-
const canEditVariable = (0,
|
|
1419
|
+
const canEditVariable = (0, import_react17.useCallback)(
|
|
1400
1420
|
(name2, variable) => (
|
|
1401
1421
|
// name === '' means new var. Add var perms computed by menu options.
|
|
1402
1422
|
name2 === "" || canDispatch && enableEditingVariables && !readOnly && !(variable == null ? void 0 : variable.readOnly)
|
|
@@ -1404,13 +1424,13 @@ function VariablesPlugin({
|
|
|
1404
1424
|
[canDispatch, enableEditingVariables, readOnly]
|
|
1405
1425
|
);
|
|
1406
1426
|
const { editVariable } = useVariableEditor();
|
|
1407
|
-
const [queryString, setQueryString] = (0,
|
|
1427
|
+
const [queryString, setQueryString] = (0, import_react17.useState)(null);
|
|
1408
1428
|
const { groupedVariables, menuOptions, onSelect } = useVariablesMenu({
|
|
1409
1429
|
showAddVariableMenuOption,
|
|
1410
1430
|
filterVariable,
|
|
1411
1431
|
getEditorContext
|
|
1412
1432
|
});
|
|
1413
|
-
const { filteredGroupedVariables, filteredMenuOptions } = (0,
|
|
1433
|
+
const { filteredGroupedVariables, filteredMenuOptions } = (0, import_react17.useMemo)(() => {
|
|
1414
1434
|
if (!queryString) {
|
|
1415
1435
|
return {
|
|
1416
1436
|
filteredGroupedVariables: groupedVariables,
|
|
@@ -1433,7 +1453,7 @@ function VariablesPlugin({
|
|
|
1433
1453
|
)
|
|
1434
1454
|
};
|
|
1435
1455
|
}, [queryString, groupedVariables, menuOptions]);
|
|
1436
|
-
const onSelectOption = (0,
|
|
1456
|
+
const onSelectOption = (0, import_react17.useCallback)(
|
|
1437
1457
|
(selectedOption, nodeToReplace, closeMenu) => {
|
|
1438
1458
|
onSelect({
|
|
1439
1459
|
queryString: queryString != null ? queryString : void 0,
|
|
@@ -1446,7 +1466,7 @@ function VariablesPlugin({
|
|
|
1446
1466
|
},
|
|
1447
1467
|
[editor, onSelect, queryString, replaceValueOnVariableInsert]
|
|
1448
1468
|
);
|
|
1449
|
-
(0,
|
|
1469
|
+
(0, import_react17.useEffect)(() => {
|
|
1450
1470
|
return (0, import_utils.mergeRegister)(
|
|
1451
1471
|
editor.registerCommand(
|
|
1452
1472
|
EDIT_VARIABLE_COMMAND,
|
|
@@ -1586,7 +1606,7 @@ function VariablesPlugin({
|
|
|
1586
1606
|
replaceValueOnVariableInsert,
|
|
1587
1607
|
disableVariableDisplayNames
|
|
1588
1608
|
]);
|
|
1589
|
-
const updateExistingNodeIfChanged = (0,
|
|
1609
|
+
const updateExistingNodeIfChanged = (0, import_react17.useCallback)(
|
|
1590
1610
|
(variableNode) => {
|
|
1591
1611
|
var _a, _b, _c, _d;
|
|
1592
1612
|
const targetVar = variablesRef.current.variables[variableNode.reference];
|
|
@@ -1613,7 +1633,7 @@ function VariablesPlugin({
|
|
|
1613
1633
|
},
|
|
1614
1634
|
[canEditVariable, disableVariableDisplayNames]
|
|
1615
1635
|
);
|
|
1616
|
-
(0,
|
|
1636
|
+
(0, import_react17.useEffect)(() => {
|
|
1617
1637
|
let selection;
|
|
1618
1638
|
editor.read(() => {
|
|
1619
1639
|
selection = (0, import_lexical4.$getSelection)();
|
|
@@ -1627,7 +1647,7 @@ function VariablesPlugin({
|
|
|
1627
1647
|
});
|
|
1628
1648
|
});
|
|
1629
1649
|
}, [editor, variables, knownUndefinedValues, canEditVariable, updateExistingNodeIfChanged]);
|
|
1630
|
-
(0,
|
|
1650
|
+
(0, import_react17.useEffect)(() => {
|
|
1631
1651
|
return editor.registerNodeTransform(VariableNode, (variableNode) => {
|
|
1632
1652
|
updateExistingNodeIfChanged(variableNode);
|
|
1633
1653
|
});
|
|
@@ -1652,7 +1672,7 @@ function VariablesPlugin({
|
|
|
1652
1672
|
"div",
|
|
1653
1673
|
{
|
|
1654
1674
|
"data-auto-resize-opt-in": true,
|
|
1655
|
-
css:
|
|
1675
|
+
css: import_react16.css`
|
|
1656
1676
|
box-shadow: var(--shadow-base);
|
|
1657
1677
|
border-radius: var(--rounded-base);
|
|
1658
1678
|
background: var(--gray-50);
|
|
@@ -1816,7 +1836,7 @@ function VariableNodeComponent({
|
|
|
1816
1836
|
const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
|
|
1817
1837
|
const [isSelected, setSelected, clearSelection] = (0, import_useLexicalNodeSelection.useLexicalNodeSelection)(nodeKey);
|
|
1818
1838
|
const readOnly = !editor.isEditable();
|
|
1819
|
-
const onDelete = (0,
|
|
1839
|
+
const onDelete = (0, import_react18.useCallback)(
|
|
1820
1840
|
(event) => {
|
|
1821
1841
|
if (isSelected && (0, import_lexical5.$isNodeSelection)((0, import_lexical5.$getSelection)())) {
|
|
1822
1842
|
event.preventDefault();
|
|
@@ -1829,7 +1849,7 @@ function VariableNodeComponent({
|
|
|
1829
1849
|
},
|
|
1830
1850
|
[isSelected, nodeKey]
|
|
1831
1851
|
);
|
|
1832
|
-
(0,
|
|
1852
|
+
(0, import_react18.useEffect)(() => {
|
|
1833
1853
|
return (0, import_utils2.mergeRegister)(
|
|
1834
1854
|
editor.registerCommand(import_lexical5.KEY_DELETE_COMMAND, onDelete, import_lexical5.COMMAND_PRIORITY_LOW),
|
|
1835
1855
|
editor.registerCommand(import_lexical5.KEY_BACKSPACE_COMMAND, onDelete, import_lexical5.COMMAND_PRIORITY_LOW),
|
|
@@ -1917,9 +1937,9 @@ function $isTargetWithinDecorator(target) {
|
|
|
1917
1937
|
}
|
|
1918
1938
|
|
|
1919
1939
|
// src/components/Variables/InputVariables.tsx
|
|
1920
|
-
var
|
|
1940
|
+
var import_react29 = require("@emotion/react");
|
|
1921
1941
|
var import_design_system9 = require("@uniformdev/design-system");
|
|
1922
|
-
var
|
|
1942
|
+
var import_react30 = require("react");
|
|
1923
1943
|
var import_uuid = require("uuid");
|
|
1924
1944
|
|
|
1925
1945
|
// src/components/Variables/composer/EditorRefPlugin.tsx
|
|
@@ -1940,10 +1960,10 @@ function EditorRefPlugin({
|
|
|
1940
1960
|
var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
|
|
1941
1961
|
var import_utils3 = require("@lexical/utils");
|
|
1942
1962
|
var import_lexical6 = require("lexical");
|
|
1943
|
-
var
|
|
1963
|
+
var import_react19 = require("react");
|
|
1944
1964
|
function PasteTransformerPlugin({ transformPaste }) {
|
|
1945
1965
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
1946
|
-
(0,
|
|
1966
|
+
(0, import_react19.useEffect)(() => {
|
|
1947
1967
|
return (0, import_utils3.mergeRegister)(
|
|
1948
1968
|
editor.registerCommand(
|
|
1949
1969
|
import_lexical6.PASTE_COMMAND,
|
|
@@ -1968,17 +1988,17 @@ function PasteTransformerPlugin({ transformPaste }) {
|
|
|
1968
1988
|
}
|
|
1969
1989
|
|
|
1970
1990
|
// src/components/Variables/styles/InputVariables.styles.ts
|
|
1971
|
-
var
|
|
1972
|
-
var menuContainer =
|
|
1991
|
+
var import_react20 = require("@emotion/react");
|
|
1992
|
+
var menuContainer = import_react20.css`
|
|
1973
1993
|
position: relative;
|
|
1974
1994
|
`;
|
|
1975
|
-
var menuBtn2 =
|
|
1995
|
+
var menuBtn2 = import_react20.css`
|
|
1976
1996
|
position: absolute;
|
|
1977
1997
|
top: 50%;
|
|
1978
1998
|
right: var(--spacing-sm);
|
|
1979
1999
|
transform: translateY(-50%);
|
|
1980
2000
|
`;
|
|
1981
|
-
var input =
|
|
2001
|
+
var input = import_react20.css`
|
|
1982
2002
|
--input-padding: 12px var(--spacing-lg) 12px var(--spacing-sm);
|
|
1983
2003
|
appearance: none;
|
|
1984
2004
|
background-color: var(--white);
|
|
@@ -2023,7 +2043,7 @@ var input = import_react18.css`
|
|
|
2023
2043
|
margin: 0;
|
|
2024
2044
|
}
|
|
2025
2045
|
`;
|
|
2026
|
-
var inputCompact =
|
|
2046
|
+
var inputCompact = import_react20.css`
|
|
2027
2047
|
border: 1px solid var(--white);
|
|
2028
2048
|
padding-block: var(--spacing-sm);
|
|
2029
2049
|
font-size: var(--fs-sm);
|
|
@@ -2032,11 +2052,11 @@ var inputCompact = import_react18.css`
|
|
|
2032
2052
|
min-height: 39px;
|
|
2033
2053
|
}
|
|
2034
2054
|
`;
|
|
2035
|
-
var inputDisabled =
|
|
2055
|
+
var inputDisabled = import_react20.css`
|
|
2036
2056
|
cursor: not-allowed;
|
|
2037
2057
|
opacity: var(--opacity-50);
|
|
2038
2058
|
`;
|
|
2039
|
-
var placeholderCaption =
|
|
2059
|
+
var placeholderCaption = import_react20.css`
|
|
2040
2060
|
position: absolute;
|
|
2041
2061
|
color: var(--gray-400);
|
|
2042
2062
|
inset: 12px var(--spacing-base) 12px var(--spacing-sm);
|
|
@@ -2045,14 +2065,14 @@ var placeholderCaption = import_react18.css`
|
|
|
2045
2065
|
white-space: nowrap;
|
|
2046
2066
|
pointer-events: none;
|
|
2047
2067
|
`;
|
|
2048
|
-
var placeholderCompact =
|
|
2068
|
+
var placeholderCompact = import_react20.css`
|
|
2049
2069
|
inset: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
|
|
2050
2070
|
`;
|
|
2051
2071
|
|
|
2052
2072
|
// src/components/Variables/styles/ParameterVariables.styles.ts
|
|
2053
|
-
var
|
|
2073
|
+
var import_react21 = require("@emotion/react");
|
|
2054
2074
|
var import_design_system7 = require("@uniformdev/design-system");
|
|
2055
|
-
var variableBindButton =
|
|
2075
|
+
var variableBindButton = import_react21.css`
|
|
2056
2076
|
--hover-color: var(--accent-dark-hover);
|
|
2057
2077
|
--active-color: var(--accent-dark-active);
|
|
2058
2078
|
border: 1px solid transparent;
|
|
@@ -2095,7 +2115,7 @@ var variableBindButton = import_react19.css`
|
|
|
2095
2115
|
max-height: unset;
|
|
2096
2116
|
}
|
|
2097
2117
|
`;
|
|
2098
|
-
var input2 =
|
|
2118
|
+
var input2 = import_react21.css`
|
|
2099
2119
|
display: block;
|
|
2100
2120
|
appearance: none;
|
|
2101
2121
|
box-sizing: border-box;
|
|
@@ -2149,7 +2169,7 @@ var input2 = import_react19.css`
|
|
|
2149
2169
|
margin: 0;
|
|
2150
2170
|
}
|
|
2151
2171
|
`;
|
|
2152
|
-
var inputMultiLine = (lines) =>
|
|
2172
|
+
var inputMultiLine = (lines) => import_react21.css`
|
|
2153
2173
|
${import_design_system7.scrollbarStyles}
|
|
2154
2174
|
// 1.5 = line height, spacing-sm = top and bottom padding + spacing-xs to give a slight increase in height
|
|
2155
2175
|
// as the text looked to close to the bottom of the input
|
|
@@ -2160,7 +2180,7 @@ var inputMultiLine = (lines) => import_react19.css`
|
|
|
2160
2180
|
|
|
2161
2181
|
// src/components/Variables/toolbox/InputVariablesProvider.tsx
|
|
2162
2182
|
var import_canvas6 = require("@uniformdev/canvas");
|
|
2163
|
-
var
|
|
2183
|
+
var import_react22 = require("react");
|
|
2164
2184
|
function useInputVariablesState({
|
|
2165
2185
|
value,
|
|
2166
2186
|
onChange,
|
|
@@ -2176,14 +2196,14 @@ function useInputVariablesState({
|
|
|
2176
2196
|
}) {
|
|
2177
2197
|
const { variables } = useVariables(true);
|
|
2178
2198
|
const variableReferenceCountInValue = (0, import_canvas6.hasReferencedVariables)(value != null ? value : "");
|
|
2179
|
-
const [lastKnownId, setLastKnownId] = (0,
|
|
2180
|
-
const [hadVariablesInValue, setHadVariablesInValue] = (0,
|
|
2181
|
-
(0,
|
|
2199
|
+
const [lastKnownId, setLastKnownId] = (0, import_react22.useState)(id);
|
|
2200
|
+
const [hadVariablesInValue, setHadVariablesInValue] = (0, import_react22.useState)(variableReferenceCountInValue > 0);
|
|
2201
|
+
(0, import_react22.useEffect)(() => {
|
|
2182
2202
|
if (variableReferenceCountInValue) {
|
|
2183
2203
|
setHadVariablesInValue(true);
|
|
2184
2204
|
}
|
|
2185
2205
|
}, [variableReferenceCountInValue]);
|
|
2186
|
-
(0,
|
|
2206
|
+
(0, import_react22.useEffect)(() => {
|
|
2187
2207
|
if (id !== lastKnownId) {
|
|
2188
2208
|
setLastKnownId(id);
|
|
2189
2209
|
setHadVariablesInValue(variableReferenceCountInValue > 0);
|
|
@@ -2192,7 +2212,7 @@ function useInputVariablesState({
|
|
|
2192
2212
|
const hadVariablesInValueForReals = inputWhenNoVariables ? hadVariablesInValue : variableReferenceCountInValue > 0;
|
|
2193
2213
|
const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption;
|
|
2194
2214
|
const disableResetForReals = !inputWhenNoVariables || !hadVariablesInValueForReals;
|
|
2195
|
-
const sharedMenuProps = (0,
|
|
2215
|
+
const sharedMenuProps = (0, import_react22.useMemo)(
|
|
2196
2216
|
() => ({
|
|
2197
2217
|
menuTooltip,
|
|
2198
2218
|
showAddVariableMenuOption,
|
|
@@ -2225,8 +2245,8 @@ function useInputVariablesState({
|
|
|
2225
2245
|
}
|
|
2226
2246
|
|
|
2227
2247
|
// src/components/Variables/toolbox/VariableField.styles.ts
|
|
2228
|
-
var
|
|
2229
|
-
var labelText =
|
|
2248
|
+
var import_react23 = require("@emotion/react");
|
|
2249
|
+
var labelText = import_react23.css`
|
|
2230
2250
|
align-items: center;
|
|
2231
2251
|
display: flex;
|
|
2232
2252
|
gap: var(--spacing-xs);
|
|
@@ -2242,7 +2262,7 @@ var import_lexical7 = require("lexical");
|
|
|
2242
2262
|
var import_BsFillPlusCircleFill = require("@react-icons/all-files/bs/BsFillPlusCircleFill");
|
|
2243
2263
|
var import_CgUsbC = require("@react-icons/all-files/cg/CgUsbC");
|
|
2244
2264
|
var import_design_system8 = require("@uniformdev/design-system");
|
|
2245
|
-
var
|
|
2265
|
+
var import_react24 = require("react");
|
|
2246
2266
|
var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
|
|
2247
2267
|
function SelectVariableMenu({
|
|
2248
2268
|
onSelectVariable,
|
|
@@ -2257,7 +2277,7 @@ function SelectVariableMenu({
|
|
|
2257
2277
|
filterVariable
|
|
2258
2278
|
}) {
|
|
2259
2279
|
const { variables, canDispatch, readOnly } = useVariables(true);
|
|
2260
|
-
const btnRef = (0,
|
|
2280
|
+
const btnRef = (0, import_react24.useRef)(null);
|
|
2261
2281
|
const { editVariable } = useVariableEditor();
|
|
2262
2282
|
const variablesGroups = variablesToGroupedList(variables, filterVariable, getEditorContext == null ? void 0 : getEditorContext());
|
|
2263
2283
|
const showAddVariableMenuOptionForReals = showAddVariableMenuOption && canDispatch && !readOnly;
|
|
@@ -2390,14 +2410,14 @@ var import_LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlug
|
|
|
2390
2410
|
var import_LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
|
|
2391
2411
|
var import_LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
2392
2412
|
var import_LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
|
|
2393
|
-
var
|
|
2413
|
+
var import_react27 = require("react");
|
|
2394
2414
|
|
|
2395
2415
|
// src/components/Variables/composer/DisablePlugin.tsx
|
|
2396
2416
|
var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
|
|
2397
|
-
var
|
|
2417
|
+
var import_react25 = require("react");
|
|
2398
2418
|
function DisablePlugin({ disabled }) {
|
|
2399
2419
|
const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
|
|
2400
|
-
(0,
|
|
2420
|
+
(0, import_react25.useEffect)(() => {
|
|
2401
2421
|
editor.setEditable(!disabled);
|
|
2402
2422
|
}, [editor, disabled]);
|
|
2403
2423
|
return null;
|
|
@@ -2406,10 +2426,10 @@ function DisablePlugin({ disabled }) {
|
|
|
2406
2426
|
// src/components/Variables/composer/SingleLineTextPlugin.tsx
|
|
2407
2427
|
var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
|
|
2408
2428
|
var import_lexical8 = require("lexical");
|
|
2409
|
-
var
|
|
2429
|
+
var import_react26 = require("react");
|
|
2410
2430
|
function SingleLineTextPlugin() {
|
|
2411
2431
|
const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
|
|
2412
|
-
(0,
|
|
2432
|
+
(0, import_react26.useEffect)(() => {
|
|
2413
2433
|
editor.registerNodeTransform(import_lexical8.LineBreakNode, (node) => {
|
|
2414
2434
|
node.remove();
|
|
2415
2435
|
});
|
|
@@ -2430,8 +2450,8 @@ function VariablesComposer(props) {
|
|
|
2430
2450
|
autoFocus,
|
|
2431
2451
|
...variablesPluginProps
|
|
2432
2452
|
} = props;
|
|
2433
|
-
const [lastEmittedValue, setLastEmittedValue] = (0,
|
|
2434
|
-
const editorConfig = (0,
|
|
2453
|
+
const [lastEmittedValue, setLastEmittedValue] = (0, import_react27.useState)(value);
|
|
2454
|
+
const editorConfig = (0, import_react27.useMemo)(
|
|
2435
2455
|
() => ({
|
|
2436
2456
|
namespace: "uniform",
|
|
2437
2457
|
onError(error) {
|
|
@@ -2443,8 +2463,8 @@ function VariablesComposer(props) {
|
|
|
2443
2463
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2444
2464
|
[]
|
|
2445
2465
|
);
|
|
2446
|
-
const editorState = (0,
|
|
2447
|
-
const updateTimeout = (0,
|
|
2466
|
+
const editorState = (0, import_react27.useRef)(void 0);
|
|
2467
|
+
const updateTimeout = (0, import_react27.useRef)(void 0);
|
|
2448
2468
|
if (typeof document === "undefined") return null;
|
|
2449
2469
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_LexicalComposer.LexicalComposer, { initialConfig: editorConfig, children: [
|
|
2450
2470
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
@@ -2486,7 +2506,7 @@ var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin")
|
|
|
2486
2506
|
var import_LexicalPlainTextPlugin = require("@lexical/react/LexicalPlainTextPlugin");
|
|
2487
2507
|
var import_utils4 = require("@lexical/utils");
|
|
2488
2508
|
var import_lexical9 = require("lexical");
|
|
2489
|
-
var
|
|
2509
|
+
var import_react28 = require("react");
|
|
2490
2510
|
var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
|
|
2491
2511
|
function VariablesComposerInput({
|
|
2492
2512
|
css: css23,
|
|
@@ -2508,7 +2528,7 @@ function VariablesComposerInput({
|
|
|
2508
2528
|
}
|
|
2509
2529
|
function RichishCopyAndPastePlugin() {
|
|
2510
2530
|
const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
|
|
2511
|
-
(0,
|
|
2531
|
+
(0, import_react28.useEffect)(() => {
|
|
2512
2532
|
return (0, import_utils4.mergeRegister)(
|
|
2513
2533
|
editor.registerCommand(
|
|
2514
2534
|
import_lexical9.COPY_COMMAND,
|
|
@@ -2615,7 +2635,7 @@ function InputVariables(props) {
|
|
|
2615
2635
|
singleTokenMode,
|
|
2616
2636
|
disableVariableDisplayNames
|
|
2617
2637
|
} = props;
|
|
2618
|
-
const [finalId] = (0,
|
|
2638
|
+
const [finalId] = (0, import_react30.useState)(id != null ? id : () => (0, import_uuid.v4)());
|
|
2619
2639
|
const { dispatch, canDispatch, isEditing } = useVariables(true);
|
|
2620
2640
|
const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps } = useInputVariablesState(props);
|
|
2621
2641
|
const useInputWithNoVariables = Boolean(inputWhenNoVariables && !hadVariablesInValue);
|
|
@@ -2634,7 +2654,7 @@ function InputVariables(props) {
|
|
|
2634
2654
|
{
|
|
2635
2655
|
align: "center",
|
|
2636
2656
|
gap: "xs",
|
|
2637
|
-
css:
|
|
2657
|
+
css: import_react29.css`
|
|
2638
2658
|
position: relative;
|
|
2639
2659
|
& > div:first-of-type {
|
|
2640
2660
|
flex-grow: 1;
|
|
@@ -2763,7 +2783,7 @@ function InputVariablesOverlayMenu({
|
|
|
2763
2783
|
var import_CgUsbC2 = require("@react-icons/all-files/cg/CgUsbC");
|
|
2764
2784
|
var import_canvas7 = require("@uniformdev/canvas");
|
|
2765
2785
|
var import_design_system10 = require("@uniformdev/design-system");
|
|
2766
|
-
var
|
|
2786
|
+
var import_react31 = require("react");
|
|
2767
2787
|
var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
|
|
2768
2788
|
function ParameterConnectionIndicator({
|
|
2769
2789
|
children,
|
|
@@ -2774,7 +2794,7 @@ function ParameterConnectionIndicator({
|
|
|
2774
2794
|
overrideMenuButtonParentMargin,
|
|
2775
2795
|
renderMenuInPortal = false
|
|
2776
2796
|
}) {
|
|
2777
|
-
const hasVariablesInValue = (0,
|
|
2797
|
+
const hasVariablesInValue = (0, import_react31.useMemo)(() => {
|
|
2778
2798
|
let result = false;
|
|
2779
2799
|
(0, import_canvas7.bindVariablesToObject)({
|
|
2780
2800
|
value,
|
|
@@ -2819,21 +2839,21 @@ function ParameterConnectionIndicator({
|
|
|
2819
2839
|
|
|
2820
2840
|
// src/components/Variables/ParameterOrSingleVariable.tsx
|
|
2821
2841
|
var import_design_system11 = require("@uniformdev/design-system");
|
|
2822
|
-
var
|
|
2842
|
+
var import_react33 = require("react");
|
|
2823
2843
|
|
|
2824
2844
|
// src/components/Variables/composer/OnDisconnectPlugin.tsx
|
|
2825
2845
|
var import_LexicalComposerContext10 = require("@lexical/react/LexicalComposerContext");
|
|
2826
2846
|
var import_utils5 = require("@lexical/utils");
|
|
2827
2847
|
var import_lexical10 = require("lexical");
|
|
2828
|
-
var
|
|
2848
|
+
var import_react32 = require("react");
|
|
2829
2849
|
function OnDisconnectPlugin({
|
|
2830
2850
|
onDisconnect
|
|
2831
2851
|
}) {
|
|
2832
2852
|
const [editor] = (0, import_LexicalComposerContext10.useLexicalComposerContext)();
|
|
2833
2853
|
const { variables } = useVariables(true);
|
|
2834
|
-
const variablesRef = (0,
|
|
2854
|
+
const variablesRef = (0, import_react32.useRef)(variables);
|
|
2835
2855
|
variablesRef.current = variables;
|
|
2836
|
-
(0,
|
|
2856
|
+
(0, import_react32.useEffect)(() => {
|
|
2837
2857
|
return (0, import_utils5.mergeRegister)(
|
|
2838
2858
|
editor.registerCommand(
|
|
2839
2859
|
DISCONNECT_VARIABLE_COMMAND,
|
|
@@ -2878,7 +2898,7 @@ function ParameterOrSingleVariable(props) {
|
|
|
2878
2898
|
hasVariablesInValue,
|
|
2879
2899
|
setHadVariablesInValue
|
|
2880
2900
|
} = useInputVariablesState(props);
|
|
2881
|
-
const handleDisconnect = (0,
|
|
2901
|
+
const handleDisconnect = (0, import_react33.useCallback)(
|
|
2882
2902
|
(variable) => {
|
|
2883
2903
|
setHadVariablesInValue(false);
|
|
2884
2904
|
if (onDisconnect) {
|
|
@@ -2931,7 +2951,7 @@ function ParameterOrSingleVariable(props) {
|
|
|
2931
2951
|
}
|
|
2932
2952
|
|
|
2933
2953
|
// src/components/Variables/ParameterVariables.tsx
|
|
2934
|
-
var
|
|
2954
|
+
var import_react34 = require("@emotion/react");
|
|
2935
2955
|
var import_design_system12 = require("@uniformdev/design-system");
|
|
2936
2956
|
var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
|
|
2937
2957
|
function ParameterVariables(props) {
|
|
@@ -2988,8 +3008,8 @@ function ParameterVariables(props) {
|
|
|
2988
3008
|
"data-text-value": value,
|
|
2989
3009
|
css: [
|
|
2990
3010
|
input2,
|
|
2991
|
-
typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(2) :
|
|
2992
|
-
inputCss != null ? inputCss :
|
|
3011
|
+
typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(2) : import_react34.css``,
|
|
3012
|
+
inputCss != null ? inputCss : import_react34.css``
|
|
2993
3013
|
]
|
|
2994
3014
|
}
|
|
2995
3015
|
)
|
|
@@ -3025,18 +3045,18 @@ ${prettifyBindExpression(bindExpression)}`
|
|
|
3025
3045
|
}
|
|
3026
3046
|
|
|
3027
3047
|
// src/components/Variables/VariablesList.tsx
|
|
3028
|
-
var
|
|
3048
|
+
var import_react37 = require("@emotion/react");
|
|
3029
3049
|
var import_dnd2 = require("@hello-pangea/dnd");
|
|
3030
3050
|
var import_CgTrash = require("@react-icons/all-files/cg/CgTrash");
|
|
3031
3051
|
var import_design_system13 = require("@uniformdev/design-system");
|
|
3032
3052
|
|
|
3033
3053
|
// src/components/DragDropContext.tsx
|
|
3034
3054
|
var import_dnd = require("@hello-pangea/dnd");
|
|
3035
|
-
var
|
|
3055
|
+
var import_react35 = require("react");
|
|
3036
3056
|
var import_react_use = require("react-use");
|
|
3037
3057
|
var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
|
|
3038
3058
|
function DragDropContext({ children, ...props }) {
|
|
3039
|
-
const [isReady, setIsReady] = (0,
|
|
3059
|
+
const [isReady, setIsReady] = (0, import_react35.useState)(false);
|
|
3040
3060
|
(0, import_react_use.useDebounce)(
|
|
3041
3061
|
() => {
|
|
3042
3062
|
setIsReady(true);
|
|
@@ -3048,8 +3068,8 @@ function DragDropContext({ children, ...props }) {
|
|
|
3048
3068
|
}
|
|
3049
3069
|
|
|
3050
3070
|
// src/components/Variables/styles/VariablesList.styles.ts
|
|
3051
|
-
var
|
|
3052
|
-
var tableRow = (isDragging) =>
|
|
3071
|
+
var import_react36 = require("@emotion/react");
|
|
3072
|
+
var tableRow = (isDragging) => import_react36.css`
|
|
3053
3073
|
position: relative;
|
|
3054
3074
|
${isDragging ? `
|
|
3055
3075
|
display: table;
|
|
@@ -3057,7 +3077,7 @@ var tableRow = (isDragging) => import_react34.css`
|
|
|
3057
3077
|
top: auto !important;
|
|
3058
3078
|
` : void 0}
|
|
3059
3079
|
`;
|
|
3060
|
-
var tableCellDragIcon =
|
|
3080
|
+
var tableCellDragIcon = import_react36.css`
|
|
3061
3081
|
&::after {
|
|
3062
3082
|
content: '';
|
|
3063
3083
|
display: block;
|
|
@@ -3075,7 +3095,7 @@ var tableCellDragIcon = import_react34.css`
|
|
|
3075
3095
|
opacity: 1;
|
|
3076
3096
|
}
|
|
3077
3097
|
`;
|
|
3078
|
-
var variableName =
|
|
3098
|
+
var variableName = import_react36.css`
|
|
3079
3099
|
border: none;
|
|
3080
3100
|
font-weight: var(--fw-medium);
|
|
3081
3101
|
padding: 0;
|
|
@@ -3085,7 +3105,7 @@ var variableName = import_react34.css`
|
|
|
3085
3105
|
white-space: nowrap;
|
|
3086
3106
|
max-width: 20ch;
|
|
3087
3107
|
`;
|
|
3088
|
-
var variableValue =
|
|
3108
|
+
var variableValue = import_react36.css`
|
|
3089
3109
|
overflow: hidden;
|
|
3090
3110
|
text-overflow: ellipsis;
|
|
3091
3111
|
white-space: nowrap;
|
|
@@ -3164,7 +3184,7 @@ function VariablesList() {
|
|
|
3164
3184
|
title: `delete ${text}`,
|
|
3165
3185
|
css: [
|
|
3166
3186
|
import_design_system13.button,
|
|
3167
|
-
|
|
3187
|
+
import_react37.css`
|
|
3168
3188
|
background: transparent;
|
|
3169
3189
|
`
|
|
3170
3190
|
],
|
|
@@ -3294,9 +3314,9 @@ function TextVariableRenderer({ definition, value, setValue }) {
|
|
|
3294
3314
|
}
|
|
3295
3315
|
|
|
3296
3316
|
// src/components/Request/RequestBody.tsx
|
|
3297
|
-
var
|
|
3317
|
+
var import_react39 = require("@emotion/react");
|
|
3298
3318
|
var import_design_system15 = require("@uniformdev/design-system");
|
|
3299
|
-
var
|
|
3319
|
+
var import_react40 = require("react");
|
|
3300
3320
|
|
|
3301
3321
|
// src/components/Request/RequestProvider.tsx
|
|
3302
3322
|
var React4 = __toESM(require("react"));
|
|
@@ -3384,11 +3404,11 @@ function useRequest() {
|
|
|
3384
3404
|
}
|
|
3385
3405
|
|
|
3386
3406
|
// src/components/Request/styles/Request.styles.ts
|
|
3387
|
-
var
|
|
3388
|
-
var innerContentStyles =
|
|
3407
|
+
var import_react38 = require("@emotion/react");
|
|
3408
|
+
var innerContentStyles = import_react38.css`
|
|
3389
3409
|
background: var(--white);
|
|
3390
3410
|
`;
|
|
3391
|
-
var requestTypeContainer = (bgColor) =>
|
|
3411
|
+
var requestTypeContainer = (bgColor) => import_react38.css`
|
|
3392
3412
|
align-items: start;
|
|
3393
3413
|
background: ${bgColor};
|
|
3394
3414
|
display: grid;
|
|
@@ -3426,11 +3446,11 @@ var LANGUAGE_TO_CONTENT_TYPE = {
|
|
|
3426
3446
|
};
|
|
3427
3447
|
function RequestBody() {
|
|
3428
3448
|
const { request, dispatch } = useRequest();
|
|
3429
|
-
const [language, setLanguage] = (0,
|
|
3449
|
+
const [language, setLanguage] = (0, import_react40.useState)("json");
|
|
3430
3450
|
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3431
3451
|
"div",
|
|
3432
3452
|
{
|
|
3433
|
-
css:
|
|
3453
|
+
css: import_react39.css`
|
|
3434
3454
|
background: var(--white);
|
|
3435
3455
|
`,
|
|
3436
3456
|
children: [
|
|
@@ -3438,7 +3458,7 @@ function RequestBody() {
|
|
|
3438
3458
|
RequestTypeContainer,
|
|
3439
3459
|
{
|
|
3440
3460
|
bgColor: "var(--gray-100)",
|
|
3441
|
-
css:
|
|
3461
|
+
css: import_react39.css`
|
|
3442
3462
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
3443
3463
|
`,
|
|
3444
3464
|
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
@@ -3715,8 +3735,8 @@ function RequestParameters({
|
|
|
3715
3735
|
}
|
|
3716
3736
|
|
|
3717
3737
|
// src/components/Request/RequestUrl.tsx
|
|
3718
|
-
var
|
|
3719
|
-
var
|
|
3738
|
+
var import_react41 = require("@emotion/react");
|
|
3739
|
+
var import_react42 = require("react");
|
|
3720
3740
|
|
|
3721
3741
|
// src/components/Request/urlEncodeRequestParameter.ts
|
|
3722
3742
|
function urlEncodeRequestUrl(url, varValues) {
|
|
@@ -3742,7 +3762,7 @@ function RequestUrl() {
|
|
|
3742
3762
|
var _a, _b;
|
|
3743
3763
|
const { variables } = useVariables();
|
|
3744
3764
|
const { request } = useRequest();
|
|
3745
|
-
const mergedParameters = (0,
|
|
3765
|
+
const mergedParameters = (0, import_react42.useMemo)(() => {
|
|
3746
3766
|
var _a2;
|
|
3747
3767
|
if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
|
|
3748
3768
|
return request.parameters;
|
|
@@ -3752,7 +3772,7 @@ function RequestUrl() {
|
|
|
3752
3772
|
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
3753
3773
|
"small",
|
|
3754
3774
|
{
|
|
3755
|
-
css:
|
|
3775
|
+
css: import_react41.css`
|
|
3756
3776
|
display: inline-block;
|
|
3757
3777
|
margin-bottom: var(--spacing-xs);
|
|
3758
3778
|
word-break: break-word;
|
|
@@ -3985,17 +4005,106 @@ function convertRequestDataToDataType(dataType, requestData) {
|
|
|
3985
4005
|
};
|
|
3986
4006
|
}
|
|
3987
4007
|
|
|
4008
|
+
// src/components/Delegation/DelegationGate.tsx
|
|
4009
|
+
var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
|
|
4010
|
+
function DelegationGate({
|
|
4011
|
+
children,
|
|
4012
|
+
loadingComponent,
|
|
4013
|
+
disabledComponent,
|
|
4014
|
+
errorComponent
|
|
4015
|
+
}) {
|
|
4016
|
+
const { status, error } = useDelegation();
|
|
4017
|
+
if (status === "active") {
|
|
4018
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children });
|
|
4019
|
+
}
|
|
4020
|
+
if (status === "idle" || status === "acquiring") {
|
|
4021
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: loadingComponent != null ? loadingComponent : null });
|
|
4022
|
+
}
|
|
4023
|
+
if (status === "disabled") {
|
|
4024
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: disabledComponent != null ? disabledComponent : null });
|
|
4025
|
+
}
|
|
4026
|
+
if (status === "error") {
|
|
4027
|
+
const resolvedError = error != null ? error : new Error("Unknown delegation error");
|
|
4028
|
+
if (typeof errorComponent === "function") {
|
|
4029
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: errorComponent({ error: resolvedError }) });
|
|
4030
|
+
}
|
|
4031
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: errorComponent != null ? errorComponent : null });
|
|
4032
|
+
}
|
|
4033
|
+
return null;
|
|
4034
|
+
}
|
|
4035
|
+
|
|
4036
|
+
// src/components/Delegation/DelegationProvider.tsx
|
|
4037
|
+
var import_react43 = require("react");
|
|
4038
|
+
var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
|
|
4039
|
+
function DelegationProvider({ sdk, onSessionToken, checkActive, children }) {
|
|
4040
|
+
const [status, setStatus] = (0, import_react43.useState)("idle");
|
|
4041
|
+
const [error, setError] = (0, import_react43.useState)(null);
|
|
4042
|
+
const acquiringRef = (0, import_react43.useRef)(false);
|
|
4043
|
+
const mountedRef = (0, import_react43.useRef)(true);
|
|
4044
|
+
const acquire = (0, import_react43.useCallback)(async () => {
|
|
4045
|
+
if (acquiringRef.current) {
|
|
4046
|
+
return;
|
|
4047
|
+
}
|
|
4048
|
+
acquiringRef.current = true;
|
|
4049
|
+
setStatus("acquiring");
|
|
4050
|
+
setError(null);
|
|
4051
|
+
try {
|
|
4052
|
+
const isActive = await checkActive();
|
|
4053
|
+
if (isActive) {
|
|
4054
|
+
if (mountedRef.current) {
|
|
4055
|
+
setStatus("active");
|
|
4056
|
+
}
|
|
4057
|
+
return;
|
|
4058
|
+
}
|
|
4059
|
+
if (!mountedRef.current) {
|
|
4060
|
+
return;
|
|
4061
|
+
}
|
|
4062
|
+
const sessionToken = await sdk.getSessionToken();
|
|
4063
|
+
if (!mountedRef.current) {
|
|
4064
|
+
return;
|
|
4065
|
+
}
|
|
4066
|
+
if (!sessionToken) {
|
|
4067
|
+
setStatus("disabled");
|
|
4068
|
+
return;
|
|
4069
|
+
}
|
|
4070
|
+
await onSessionToken(sessionToken);
|
|
4071
|
+
if (mountedRef.current) {
|
|
4072
|
+
setStatus("active");
|
|
4073
|
+
}
|
|
4074
|
+
} catch (err) {
|
|
4075
|
+
if (mountedRef.current) {
|
|
4076
|
+
setError(err instanceof Error ? err : new Error(String(err)));
|
|
4077
|
+
setStatus("error");
|
|
4078
|
+
}
|
|
4079
|
+
} finally {
|
|
4080
|
+
acquiringRef.current = false;
|
|
4081
|
+
}
|
|
4082
|
+
}, [sdk, onSessionToken, checkActive]);
|
|
4083
|
+
(0, import_react43.useEffect)(() => {
|
|
4084
|
+
mountedRef.current = true;
|
|
4085
|
+
void acquire();
|
|
4086
|
+
return () => {
|
|
4087
|
+
mountedRef.current = false;
|
|
4088
|
+
};
|
|
4089
|
+
}, [acquire]);
|
|
4090
|
+
const reacquire = (0, import_react43.useCallback)(() => {
|
|
4091
|
+
void acquire();
|
|
4092
|
+
}, [acquire]);
|
|
4093
|
+
const value = (0, import_react43.useMemo)(() => ({ status, error, reacquire }), [status, error, reacquire]);
|
|
4094
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DelegationContext.Provider, { value, children });
|
|
4095
|
+
}
|
|
4096
|
+
|
|
3988
4097
|
// src/components/MeshApp.tsx
|
|
3989
4098
|
var import_design_system19 = require("@uniformdev/design-system");
|
|
3990
4099
|
|
|
3991
4100
|
// src/hooks/useInitializeUniformMeshSdk.ts
|
|
3992
4101
|
var import_mesh_sdk = require("@uniformdev/mesh-sdk");
|
|
3993
|
-
var
|
|
4102
|
+
var import_react44 = require("react");
|
|
3994
4103
|
var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
|
|
3995
|
-
const [error, setError] = (0,
|
|
3996
|
-
const [sdk, setSdk] = (0,
|
|
3997
|
-
const initializationInProgress = (0,
|
|
3998
|
-
(0,
|
|
4104
|
+
const [error, setError] = (0, import_react44.useState)();
|
|
4105
|
+
const [sdk, setSdk] = (0, import_react44.useState)();
|
|
4106
|
+
const initializationInProgress = (0, import_react44.useRef)(false);
|
|
4107
|
+
(0, import_react44.useEffect)(
|
|
3999
4108
|
() => {
|
|
4000
4109
|
if (typeof window === "undefined" || sdk) {
|
|
4001
4110
|
return;
|
|
@@ -4028,7 +4137,7 @@ var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
|
|
|
4028
4137
|
};
|
|
4029
4138
|
|
|
4030
4139
|
// src/components/MeshApp.tsx
|
|
4031
|
-
var
|
|
4140
|
+
var import_jsx_runtime47 = require("@emotion/react/jsx-runtime");
|
|
4032
4141
|
var MeshApp = ({
|
|
4033
4142
|
children,
|
|
4034
4143
|
loadingComponent,
|
|
@@ -4037,36 +4146,36 @@ var MeshApp = ({
|
|
|
4037
4146
|
const { initializing, error, sdk } = useInitializeUniformMeshSdk();
|
|
4038
4147
|
if (initializing || !sdk) {
|
|
4039
4148
|
const LoadingComponent = loadingComponent;
|
|
4040
|
-
return LoadingComponent ? /* @__PURE__ */ (0,
|
|
4149
|
+
return LoadingComponent ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LoadingComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_design_system19.LoadingIndicator, {});
|
|
4041
4150
|
}
|
|
4042
4151
|
if (error) {
|
|
4043
4152
|
const ErrorComponent = errorComponent;
|
|
4044
4153
|
if (ErrorComponent) {
|
|
4045
|
-
return /* @__PURE__ */ (0,
|
|
4154
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ErrorComponent, { error });
|
|
4046
4155
|
}
|
|
4047
4156
|
throw error;
|
|
4048
4157
|
}
|
|
4049
|
-
return /* @__PURE__ */ (0,
|
|
4050
|
-
/* @__PURE__ */ (0,
|
|
4051
|
-
/* @__PURE__ */ (0,
|
|
4158
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
|
|
4159
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_design_system19.Theme, {}),
|
|
4160
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(UniformMeshLocationContextProvider, { children })
|
|
4052
4161
|
] });
|
|
4053
4162
|
};
|
|
4054
4163
|
|
|
4055
4164
|
// src/components/ObjectSearch/DataRefreshButton.tsx
|
|
4056
|
-
var
|
|
4165
|
+
var import_react45 = require("@emotion/react");
|
|
4057
4166
|
var import_design_system20 = require("@uniformdev/design-system");
|
|
4058
|
-
var
|
|
4167
|
+
var import_jsx_runtime48 = require("@emotion/react/jsx-runtime");
|
|
4059
4168
|
var DataRefreshButton = ({
|
|
4060
4169
|
buttonText,
|
|
4061
4170
|
isLoading,
|
|
4062
4171
|
onRefreshData,
|
|
4063
4172
|
...props
|
|
4064
4173
|
}) => {
|
|
4065
|
-
return /* @__PURE__ */ (0,
|
|
4066
|
-
!isLoading ? null : /* @__PURE__ */ (0,
|
|
4174
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_design_system20.Button, { buttonType: "ghost", onClick: onRefreshData, disabled: isLoading, ...props, children: [
|
|
4175
|
+
!isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
4067
4176
|
import_design_system20.LoadingIndicator,
|
|
4068
4177
|
{
|
|
4069
|
-
css:
|
|
4178
|
+
css: import_react45.css`
|
|
4070
4179
|
${isLoading ? "opacity: 0.2;" : void 0}
|
|
4071
4180
|
`
|
|
4072
4181
|
}
|
|
@@ -4076,15 +4185,15 @@ var DataRefreshButton = ({
|
|
|
4076
4185
|
};
|
|
4077
4186
|
|
|
4078
4187
|
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
4079
|
-
var
|
|
4188
|
+
var import_react48 = require("@emotion/react");
|
|
4080
4189
|
var import_canvas9 = require("@uniformdev/canvas");
|
|
4081
4190
|
var import_design_system23 = require("@uniformdev/design-system");
|
|
4082
4191
|
|
|
4083
4192
|
// src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
|
|
4084
4193
|
var import_canvas8 = require("@uniformdev/canvas");
|
|
4085
|
-
var
|
|
4086
|
-
var
|
|
4087
|
-
var ObjectSearchContext = (0,
|
|
4194
|
+
var import_react46 = require("react");
|
|
4195
|
+
var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
|
|
4196
|
+
var ObjectSearchContext = (0, import_react46.createContext)({
|
|
4088
4197
|
onSetQuery: () => {
|
|
4089
4198
|
},
|
|
4090
4199
|
onSelectItem: () => {
|
|
@@ -4105,16 +4214,16 @@ var ObjectSearchProvider = ({
|
|
|
4105
4214
|
children,
|
|
4106
4215
|
defaultQuery
|
|
4107
4216
|
}) => {
|
|
4108
|
-
const [query, setQuery] = (0,
|
|
4217
|
+
const [query, setQuery] = (0, import_react46.useState)({
|
|
4109
4218
|
contentType: "",
|
|
4110
4219
|
keyword: "",
|
|
4111
4220
|
...defaultQuery
|
|
4112
4221
|
});
|
|
4113
4222
|
const { flatVariables } = useVariables(true);
|
|
4114
|
-
const querySearchDeferred = (0,
|
|
4115
|
-
const [selectedItems, setSelectedItems] = (0,
|
|
4116
|
-
const [list, setList] = (0,
|
|
4117
|
-
const onSetQuery = (0,
|
|
4223
|
+
const querySearchDeferred = (0, import_react46.useDeferredValue)(query);
|
|
4224
|
+
const [selectedItems, setSelectedItems] = (0, import_react46.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
|
|
4225
|
+
const [list, setList] = (0, import_react46.useState)({});
|
|
4226
|
+
const onSetQuery = (0, import_react46.useCallback)(
|
|
4118
4227
|
(value2) => {
|
|
4119
4228
|
if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
|
|
4120
4229
|
return setQuery({
|
|
@@ -4126,7 +4235,7 @@ var ObjectSearchProvider = ({
|
|
|
4126
4235
|
},
|
|
4127
4236
|
[setQuery]
|
|
4128
4237
|
);
|
|
4129
|
-
const onSelectItem = (0,
|
|
4238
|
+
const onSelectItem = (0, import_react46.useCallback)(
|
|
4130
4239
|
(selectedResult) => {
|
|
4131
4240
|
if (Array.isArray(selectedResult)) {
|
|
4132
4241
|
setSelectedItems(selectedResult);
|
|
@@ -4140,17 +4249,17 @@ var ObjectSearchProvider = ({
|
|
|
4140
4249
|
},
|
|
4141
4250
|
[setSelectedItems, selectedItems]
|
|
4142
4251
|
);
|
|
4143
|
-
const onRemoveAllSelectedItems = (0,
|
|
4252
|
+
const onRemoveAllSelectedItems = (0, import_react46.useCallback)(() => {
|
|
4144
4253
|
setSelectedItems([]);
|
|
4145
4254
|
}, [setSelectedItems]);
|
|
4146
|
-
const onSetList = (0,
|
|
4255
|
+
const onSetList = (0, import_react46.useCallback)(
|
|
4147
4256
|
(value2) => {
|
|
4148
4257
|
setList(value2);
|
|
4149
4258
|
},
|
|
4150
4259
|
[setList]
|
|
4151
4260
|
);
|
|
4152
|
-
const boundQuery = (0,
|
|
4153
|
-
const value = (0,
|
|
4261
|
+
const boundQuery = (0, import_react46.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
|
|
4262
|
+
const value = (0, import_react46.useMemo)(
|
|
4154
4263
|
() => ({
|
|
4155
4264
|
boundQuery,
|
|
4156
4265
|
onSetQuery,
|
|
@@ -4174,10 +4283,10 @@ var ObjectSearchProvider = ({
|
|
|
4174
4283
|
onSetList
|
|
4175
4284
|
]
|
|
4176
4285
|
);
|
|
4177
|
-
return /* @__PURE__ */ (0,
|
|
4286
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ObjectSearchContext.Provider, { value, children });
|
|
4178
4287
|
};
|
|
4179
4288
|
function useObjectSearchContext() {
|
|
4180
|
-
return (0,
|
|
4289
|
+
return (0, import_react46.useContext)(ObjectSearchContext);
|
|
4181
4290
|
}
|
|
4182
4291
|
function bindQuery(query, inputs) {
|
|
4183
4292
|
const { result, errors } = (0, import_canvas8.bindVariablesToObject)({
|
|
@@ -4195,9 +4304,9 @@ function bindQuery(query, inputs) {
|
|
|
4195
4304
|
var import_design_system22 = require("@uniformdev/design-system");
|
|
4196
4305
|
|
|
4197
4306
|
// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
|
|
4198
|
-
var
|
|
4307
|
+
var import_react47 = require("@emotion/react");
|
|
4199
4308
|
var import_design_system21 = require("@uniformdev/design-system");
|
|
4200
|
-
var ObjectListItemContainer =
|
|
4309
|
+
var ObjectListItemContainer = import_react47.css`
|
|
4201
4310
|
align-items: center;
|
|
4202
4311
|
border: 1px solid var(--gray-300);
|
|
4203
4312
|
border-radius: var(--rounded-base);
|
|
@@ -4206,11 +4315,11 @@ var ObjectListItemContainer = import_react44.css`
|
|
|
4206
4315
|
grid-template-columns: 1fr auto;
|
|
4207
4316
|
padding: var(--spacing-sm);
|
|
4208
4317
|
`;
|
|
4209
|
-
var ObjectListItemContainerDisabled =
|
|
4318
|
+
var ObjectListItemContainerDisabled = import_react47.css`
|
|
4210
4319
|
opacity: var(--opacity-50);
|
|
4211
4320
|
pointer-events: none;
|
|
4212
4321
|
`;
|
|
4213
|
-
var ObjectListItemLoading =
|
|
4322
|
+
var ObjectListItemLoading = import_react47.css`
|
|
4214
4323
|
animation: ${import_design_system21.skeletonLoading} 1s linear infinite alternate;
|
|
4215
4324
|
border-color: transparent;
|
|
4216
4325
|
min-height: 42px;
|
|
@@ -4234,43 +4343,43 @@ var ObjectListItemLoading = import_react44.css`
|
|
|
4234
4343
|
width: 1rem;
|
|
4235
4344
|
}
|
|
4236
4345
|
`;
|
|
4237
|
-
var ObjectListItemHeadingGroup =
|
|
4346
|
+
var ObjectListItemHeadingGroup = import_react47.css`
|
|
4238
4347
|
align-items: center;
|
|
4239
4348
|
display: grid;
|
|
4240
4349
|
`;
|
|
4241
|
-
var ObjectListItemThumbnail =
|
|
4350
|
+
var ObjectListItemThumbnail = import_react47.css`
|
|
4242
4351
|
width: 30px;
|
|
4243
4352
|
height: 30px;
|
|
4244
4353
|
object-fit: cover;
|
|
4245
4354
|
`;
|
|
4246
|
-
var ObjectListItemTitle =
|
|
4355
|
+
var ObjectListItemTitle = import_react47.css`
|
|
4247
4356
|
color: var(--typography-base);
|
|
4248
4357
|
display: block;
|
|
4249
4358
|
font-size: var(--fs-sm);
|
|
4250
4359
|
`;
|
|
4251
|
-
var ObjectListItemSubtitle =
|
|
4360
|
+
var ObjectListItemSubtitle = import_react47.css`
|
|
4252
4361
|
color: var(--gray-500);
|
|
4253
4362
|
display: block;
|
|
4254
4363
|
font-size: var(--fs-xs);
|
|
4255
4364
|
line-height: 1;
|
|
4256
4365
|
`;
|
|
4257
|
-
var ObjectListItemInfoContainer =
|
|
4366
|
+
var ObjectListItemInfoContainer = import_react47.css`
|
|
4258
4367
|
align-items: center;
|
|
4259
4368
|
display: flex;
|
|
4260
4369
|
gap: var(--spacing-sm);
|
|
4261
4370
|
justify-content: center;
|
|
4262
4371
|
`;
|
|
4263
|
-
var ObjectListItemControlledContent =
|
|
4372
|
+
var ObjectListItemControlledContent = import_react47.css`
|
|
4264
4373
|
display: flex;
|
|
4265
4374
|
gap: var(--spacing-sm);
|
|
4266
4375
|
`;
|
|
4267
|
-
var ObjectListItemUnControlledContent =
|
|
4376
|
+
var ObjectListItemUnControlledContent = import_react47.css`
|
|
4268
4377
|
margin-top: var(--spacing-sm);
|
|
4269
4378
|
grid-column: 1 / -1;
|
|
4270
4379
|
`;
|
|
4271
4380
|
|
|
4272
4381
|
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
4273
|
-
var
|
|
4382
|
+
var import_jsx_runtime50 = require("@emotion/react/jsx-runtime");
|
|
4274
4383
|
var ObjectSearchListItem = ({
|
|
4275
4384
|
id,
|
|
4276
4385
|
title,
|
|
@@ -4295,7 +4404,7 @@ var ObjectSearchListItem = ({
|
|
|
4295
4404
|
return onSelectItem([selectedItem]);
|
|
4296
4405
|
};
|
|
4297
4406
|
const selected = selectedListItems.some((item) => item.id === id);
|
|
4298
|
-
return /* @__PURE__ */ (0,
|
|
4407
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
|
|
4299
4408
|
"div",
|
|
4300
4409
|
{
|
|
4301
4410
|
role: "listitem",
|
|
@@ -4303,7 +4412,7 @@ var ObjectSearchListItem = ({
|
|
|
4303
4412
|
"data-testid": "list-item",
|
|
4304
4413
|
...props,
|
|
4305
4414
|
children: [
|
|
4306
|
-
/* @__PURE__ */ (0,
|
|
4415
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
|
|
4307
4416
|
"div",
|
|
4308
4417
|
{
|
|
4309
4418
|
role: "button",
|
|
@@ -4311,7 +4420,7 @@ var ObjectSearchListItem = ({
|
|
|
4311
4420
|
css: ObjectListItemControlledContent,
|
|
4312
4421
|
"aria-disabled": disabled,
|
|
4313
4422
|
children: [
|
|
4314
|
-
imageUrl ? /* @__PURE__ */ (0,
|
|
4423
|
+
imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
4315
4424
|
"img",
|
|
4316
4425
|
{
|
|
4317
4426
|
src: imageUrl,
|
|
@@ -4320,28 +4429,28 @@ var ObjectSearchListItem = ({
|
|
|
4320
4429
|
loading: "lazy"
|
|
4321
4430
|
}
|
|
4322
4431
|
) : null,
|
|
4323
|
-
/* @__PURE__ */ (0,
|
|
4324
|
-
!contentType ? null : /* @__PURE__ */ (0,
|
|
4325
|
-
/* @__PURE__ */ (0,
|
|
4432
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
|
|
4433
|
+
!contentType ? null : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
|
|
4434
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
|
|
4326
4435
|
] })
|
|
4327
4436
|
]
|
|
4328
4437
|
}
|
|
4329
4438
|
),
|
|
4330
|
-
/* @__PURE__ */ (0,
|
|
4331
|
-
selected ? /* @__PURE__ */ (0,
|
|
4332
|
-
!popoverData ? null : /* @__PURE__ */ (0,
|
|
4439
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { css: ObjectListItemInfoContainer, children: [
|
|
4440
|
+
selected ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system22.Chip, { text: "selected", size: "xs" }) : null,
|
|
4441
|
+
!popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system22.Popover, { ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
|
|
4333
4442
|
] }),
|
|
4334
|
-
!children ? null : /* @__PURE__ */ (0,
|
|
4443
|
+
!children ? null : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { css: ObjectListItemUnControlledContent, children })
|
|
4335
4444
|
]
|
|
4336
4445
|
}
|
|
4337
4446
|
);
|
|
4338
4447
|
};
|
|
4339
4448
|
var ObjectSearchListItemLoadingSkeleton = () => {
|
|
4340
|
-
return /* @__PURE__ */ (0,
|
|
4449
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
|
|
4341
4450
|
};
|
|
4342
4451
|
|
|
4343
4452
|
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
4344
|
-
var
|
|
4453
|
+
var import_jsx_runtime51 = require("@emotion/react/jsx-runtime");
|
|
4345
4454
|
var ObjectSearchContainer = ({
|
|
4346
4455
|
label,
|
|
4347
4456
|
enableDynamicInputToResultId,
|
|
@@ -4353,19 +4462,19 @@ var ObjectSearchContainer = ({
|
|
|
4353
4462
|
const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
|
|
4354
4463
|
const { flatVariables } = useVariables(true);
|
|
4355
4464
|
const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
|
|
4356
|
-
const listItems = resultList != null ? resultList : /* @__PURE__ */ (0,
|
|
4465
|
+
const listItems = resultList != null ? resultList : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
4357
4466
|
import_design_system23.ScrollableList,
|
|
4358
4467
|
{
|
|
4359
4468
|
role: "list",
|
|
4360
|
-
css:
|
|
4469
|
+
css: import_react48.css`
|
|
4361
4470
|
> div {
|
|
4362
4471
|
max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
|
|
4363
4472
|
}
|
|
4364
4473
|
`,
|
|
4365
|
-
children: /* @__PURE__ */ (0,
|
|
4474
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DefaultResultList, {})
|
|
4366
4475
|
}
|
|
4367
4476
|
);
|
|
4368
|
-
const body = /* @__PURE__ */ (0,
|
|
4477
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system23.VerticalRhythm, { children: [
|
|
4369
4478
|
searchFilters,
|
|
4370
4479
|
listItems
|
|
4371
4480
|
] });
|
|
@@ -4396,8 +4505,8 @@ var ObjectSearchContainer = ({
|
|
|
4396
4505
|
}
|
|
4397
4506
|
]);
|
|
4398
4507
|
};
|
|
4399
|
-
return /* @__PURE__ */ (0,
|
|
4400
|
-
/* @__PURE__ */ (0,
|
|
4508
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system23.VerticalRhythm, { children: [
|
|
4509
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system23.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
4401
4510
|
InputVariables,
|
|
4402
4511
|
{
|
|
4403
4512
|
label,
|
|
@@ -4419,21 +4528,21 @@ var DefaultResultList = () => {
|
|
|
4419
4528
|
var _a;
|
|
4420
4529
|
const { list } = useObjectSearchContext();
|
|
4421
4530
|
if (!list.items) {
|
|
4422
|
-
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0,
|
|
4531
|
+
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
4423
4532
|
}
|
|
4424
4533
|
if (list.items.length === 0) {
|
|
4425
|
-
return /* @__PURE__ */ (0,
|
|
4534
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system23.Callout, { type: "info", children: "No results were found" });
|
|
4426
4535
|
}
|
|
4427
|
-
return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ (0,
|
|
4536
|
+
return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ObjectSearchListItem, { ...item }, item.id));
|
|
4428
4537
|
};
|
|
4429
4538
|
|
|
4430
4539
|
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
4431
4540
|
var import_design_system24 = require("@uniformdev/design-system");
|
|
4432
|
-
var
|
|
4541
|
+
var import_react50 = require("react");
|
|
4433
4542
|
|
|
4434
4543
|
// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
|
|
4435
|
-
var
|
|
4436
|
-
var ObjectSearchFilterContainerLabel =
|
|
4544
|
+
var import_react49 = require("@emotion/react");
|
|
4545
|
+
var ObjectSearchFilterContainerLabel = import_react49.css`
|
|
4437
4546
|
align-items: center;
|
|
4438
4547
|
display: flex;
|
|
4439
4548
|
font-size: var(--fs-sm);
|
|
@@ -4441,18 +4550,18 @@ var ObjectSearchFilterContainerLabel = import_react46.css`
|
|
|
4441
4550
|
line-height: 1rem;
|
|
4442
4551
|
margin-bottom: var(--spacing-sm);
|
|
4443
4552
|
`;
|
|
4444
|
-
var ObjectSearchFilterContainer =
|
|
4553
|
+
var ObjectSearchFilterContainer = import_react49.css`
|
|
4445
4554
|
display: grid;
|
|
4446
4555
|
gap: var(--spacing-base);
|
|
4447
4556
|
`;
|
|
4448
|
-
var ObjectSearchFilterGrid = (gridColumns) =>
|
|
4557
|
+
var ObjectSearchFilterGrid = (gridColumns) => import_react49.css`
|
|
4449
4558
|
display: grid;
|
|
4450
4559
|
grid-template-columns: ${gridColumns};
|
|
4451
4560
|
gap: var(--spacing-base);
|
|
4452
4561
|
`;
|
|
4453
4562
|
|
|
4454
4563
|
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
4455
|
-
var
|
|
4564
|
+
var import_jsx_runtime52 = require("@emotion/react/jsx-runtime");
|
|
4456
4565
|
var ObjectSearchFilter = ({
|
|
4457
4566
|
requireContentType,
|
|
4458
4567
|
typeSelectorAllTypesOptionText = "All content types",
|
|
@@ -4463,7 +4572,7 @@ var ObjectSearchFilter = ({
|
|
|
4463
4572
|
}) => {
|
|
4464
4573
|
var _a, _b;
|
|
4465
4574
|
const { query, onSetQuery } = useObjectSearchContext();
|
|
4466
|
-
const [searchState, setSearchState] = (0,
|
|
4575
|
+
const [searchState, setSearchState] = (0, import_react50.useState)({
|
|
4467
4576
|
contentType: (_a = query.contentType) != null ? _a : "",
|
|
4468
4577
|
keyword: (_b = query.keyword) != null ? _b : ""
|
|
4469
4578
|
});
|
|
@@ -4473,7 +4582,7 @@ var ObjectSearchFilter = ({
|
|
|
4473
4582
|
});
|
|
4474
4583
|
onSetQuery({ ...query, ...value });
|
|
4475
4584
|
};
|
|
4476
|
-
const memoizedSelectOptions = (0,
|
|
4585
|
+
const memoizedSelectOptions = (0, import_react50.useMemo)(() => {
|
|
4477
4586
|
if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
|
|
4478
4587
|
return [];
|
|
4479
4588
|
}
|
|
@@ -4483,7 +4592,7 @@ var ObjectSearchFilter = ({
|
|
|
4483
4592
|
];
|
|
4484
4593
|
}, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
|
|
4485
4594
|
const shouldRenderSelect = memoizedSelectOptions.length > 0;
|
|
4486
|
-
return /* @__PURE__ */ (0,
|
|
4595
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
|
|
4487
4596
|
"fieldset",
|
|
4488
4597
|
{
|
|
4489
4598
|
css: [
|
|
@@ -4491,7 +4600,7 @@ var ObjectSearchFilter = ({
|
|
|
4491
4600
|
ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
|
|
4492
4601
|
],
|
|
4493
4602
|
children: [
|
|
4494
|
-
memoizedSelectOptions.length ? /* @__PURE__ */ (0,
|
|
4603
|
+
memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
4495
4604
|
import_design_system24.InputSelect,
|
|
4496
4605
|
{
|
|
4497
4606
|
label: selectLabel,
|
|
@@ -4501,7 +4610,7 @@ var ObjectSearchFilter = ({
|
|
|
4501
4610
|
value: query.contentType
|
|
4502
4611
|
}
|
|
4503
4612
|
) : null,
|
|
4504
|
-
/* @__PURE__ */ (0,
|
|
4613
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
4505
4614
|
import_design_system24.DebouncedInputKeywordSearch,
|
|
4506
4615
|
{
|
|
4507
4616
|
inputFieldName: searchInputName,
|
|
@@ -4518,9 +4627,9 @@ var ObjectSearchFilter = ({
|
|
|
4518
4627
|
};
|
|
4519
4628
|
|
|
4520
4629
|
// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
|
|
4521
|
-
var
|
|
4630
|
+
var import_jsx_runtime53 = require("@emotion/react/jsx-runtime");
|
|
4522
4631
|
var ObjectSearchFilterContainer2 = ({ children }) => {
|
|
4523
|
-
return /* @__PURE__ */ (0,
|
|
4632
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { css: ObjectSearchFilterContainer, children }) });
|
|
4524
4633
|
};
|
|
4525
4634
|
|
|
4526
4635
|
// src/components/ObjectSearch/ObjectSearchResultItem.tsx
|
|
@@ -4528,16 +4637,16 @@ var import_design_system26 = require("@uniformdev/design-system");
|
|
|
4528
4637
|
var import_timeago = require("timeago.js");
|
|
4529
4638
|
|
|
4530
4639
|
// src/components/Image/Image.tsx
|
|
4531
|
-
var
|
|
4640
|
+
var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
|
|
4532
4641
|
function Image({ src, alt, className }) {
|
|
4533
4642
|
const CompImage = src && typeof src !== "string" ? src : null;
|
|
4534
|
-
return CompImage ? /* @__PURE__ */ (0,
|
|
4643
|
+
return CompImage ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CompImage, { className }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("img", { src, alt, className });
|
|
4535
4644
|
}
|
|
4536
4645
|
|
|
4537
4646
|
// src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
|
|
4538
|
-
var
|
|
4647
|
+
var import_react51 = require("@emotion/react");
|
|
4539
4648
|
var import_design_system25 = require("@uniformdev/design-system");
|
|
4540
|
-
var ButtonStyles =
|
|
4649
|
+
var ButtonStyles = import_react51.css`
|
|
4541
4650
|
${import_design_system25.button}
|
|
4542
4651
|
background: transparent;
|
|
4543
4652
|
border: 1px solid var(--typography-base);
|
|
@@ -4565,20 +4674,20 @@ var ButtonStyles = import_react48.css`
|
|
|
4565
4674
|
text-decoration: none;
|
|
4566
4675
|
}
|
|
4567
4676
|
`;
|
|
4568
|
-
var ButtonIcon =
|
|
4677
|
+
var ButtonIcon = import_react51.css`
|
|
4569
4678
|
width: 1rem;
|
|
4570
4679
|
height: 1rem;
|
|
4571
4680
|
`;
|
|
4572
4681
|
|
|
4573
4682
|
// src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
|
|
4574
|
-
var
|
|
4683
|
+
var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
|
|
4575
4684
|
var ObjectSearchResultItemButton = ({
|
|
4576
4685
|
text,
|
|
4577
4686
|
icon,
|
|
4578
4687
|
...props
|
|
4579
4688
|
}) => {
|
|
4580
|
-
return /* @__PURE__ */ (0,
|
|
4581
|
-
!icon ? null : /* @__PURE__ */ (0,
|
|
4689
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("button", { type: "button", css: ButtonStyles, ...props, children: [
|
|
4690
|
+
!icon ? null : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Image, { src: icon, css: ButtonIcon }),
|
|
4582
4691
|
text
|
|
4583
4692
|
] });
|
|
4584
4693
|
};
|
|
@@ -4587,15 +4696,15 @@ var LinkButton = ({
|
|
|
4587
4696
|
icon,
|
|
4588
4697
|
...props
|
|
4589
4698
|
}) => {
|
|
4590
|
-
return /* @__PURE__ */ (0,
|
|
4591
|
-
!icon ? null : /* @__PURE__ */ (0,
|
|
4699
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
|
|
4700
|
+
!icon ? null : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Image, { src: icon, css: ButtonIcon }),
|
|
4592
4701
|
text
|
|
4593
4702
|
] });
|
|
4594
4703
|
};
|
|
4595
4704
|
|
|
4596
4705
|
// src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
|
|
4597
|
-
var
|
|
4598
|
-
var ObjectSearchResultItemContainer =
|
|
4706
|
+
var import_react52 = require("@emotion/react");
|
|
4707
|
+
var ObjectSearchResultItemContainer = import_react52.css`
|
|
4599
4708
|
align-items: center;
|
|
4600
4709
|
border: 1px solid var(--gray-300);
|
|
4601
4710
|
border-radius: var(--rounded-base);
|
|
@@ -4611,7 +4720,7 @@ var ObjectSearchResultItemContainer = import_react49.css`
|
|
|
4611
4720
|
}
|
|
4612
4721
|
}
|
|
4613
4722
|
`;
|
|
4614
|
-
var ObjectSearchDragHandle =
|
|
4723
|
+
var ObjectSearchDragHandle = import_react52.css`
|
|
4615
4724
|
border-left: 2px dotted var(--gray-300);
|
|
4616
4725
|
border-right: 2px dotted var(--gray-300);
|
|
4617
4726
|
position: absolute;
|
|
@@ -4620,47 +4729,47 @@ var ObjectSearchDragHandle = import_react49.css`
|
|
|
4620
4729
|
transition: opacity var(--duration-fast) var(--timing-ease-out);
|
|
4621
4730
|
opacity: 0;
|
|
4622
4731
|
`;
|
|
4623
|
-
var ObjectSearchResultItemSubtitle =
|
|
4732
|
+
var ObjectSearchResultItemSubtitle = import_react52.css`
|
|
4624
4733
|
color: var(--gray-500);
|
|
4625
4734
|
display: block;
|
|
4626
4735
|
font-size: var(--fs-xs);
|
|
4627
4736
|
line-height: 1;
|
|
4628
4737
|
`;
|
|
4629
|
-
var ObjectSearchResultItemTitle =
|
|
4738
|
+
var ObjectSearchResultItemTitle = import_react52.css`
|
|
4630
4739
|
align-items: center;
|
|
4631
4740
|
color: var(--typography-base);
|
|
4632
4741
|
display: flex;
|
|
4633
4742
|
gap: var(--spacing-xs);
|
|
4634
4743
|
`;
|
|
4635
|
-
var ObjectSearchResultItemTimeStamp =
|
|
4744
|
+
var ObjectSearchResultItemTimeStamp = import_react52.css`
|
|
4636
4745
|
color: var(--gray-500);
|
|
4637
4746
|
font-size: var(--fs-xs);
|
|
4638
4747
|
`;
|
|
4639
|
-
var ObjectSearchResultItemTitleLink =
|
|
4748
|
+
var ObjectSearchResultItemTitleLink = import_react52.css`
|
|
4640
4749
|
text-decoration: none;
|
|
4641
4750
|
color: var(--primary-action-default);
|
|
4642
4751
|
font-size: var(--fs-sm);
|
|
4643
4752
|
`;
|
|
4644
|
-
var ObjectSearchAuthorStateGroup =
|
|
4753
|
+
var ObjectSearchAuthorStateGroup = import_react52.css`
|
|
4645
4754
|
align-items: center;
|
|
4646
4755
|
display: flex;
|
|
4647
4756
|
gap: var(--spacing-sm);
|
|
4648
4757
|
`;
|
|
4649
|
-
var ObjectSearchUpdateGroup =
|
|
4758
|
+
var ObjectSearchUpdateGroup = import_react52.css`
|
|
4650
4759
|
display: grid;
|
|
4651
4760
|
`;
|
|
4652
|
-
var ObjectSearchContentContainer =
|
|
4761
|
+
var ObjectSearchContentContainer = import_react52.css`
|
|
4653
4762
|
display: flex;
|
|
4654
4763
|
gap: var(--spacing-base);
|
|
4655
4764
|
`;
|
|
4656
|
-
var ObjectSearchImage =
|
|
4765
|
+
var ObjectSearchImage = import_react52.css`
|
|
4657
4766
|
width: 56px;
|
|
4658
4767
|
height: 56px;
|
|
4659
4768
|
object-fit: cover;
|
|
4660
4769
|
`;
|
|
4661
4770
|
|
|
4662
4771
|
// src/components/ObjectSearch/ObjectSearchResultItem.tsx
|
|
4663
|
-
var
|
|
4772
|
+
var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
|
|
4664
4773
|
var ObjectSearchResultItem = ({
|
|
4665
4774
|
id,
|
|
4666
4775
|
title,
|
|
@@ -4684,10 +4793,10 @@ var ObjectSearchResultItem = ({
|
|
|
4684
4793
|
onSelectItem({ id, title: id });
|
|
4685
4794
|
onRemove == null ? void 0 : onRemove();
|
|
4686
4795
|
};
|
|
4687
|
-
return /* @__PURE__ */ (0,
|
|
4688
|
-
disableDnD ? null : /* @__PURE__ */ (0,
|
|
4689
|
-
/* @__PURE__ */ (0,
|
|
4690
|
-
!imageUrl ? null : /* @__PURE__ */ (0,
|
|
4796
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: ObjectSearchResultItemContainer, "data-testid": "search-result-item", children: [
|
|
4797
|
+
disableDnD ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
|
|
4798
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: ObjectSearchContentContainer, children: [
|
|
4799
|
+
!imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4691
4800
|
"img",
|
|
4692
4801
|
{
|
|
4693
4802
|
src: imageUrl,
|
|
@@ -4696,10 +4805,10 @@ var ObjectSearchResultItem = ({
|
|
|
4696
4805
|
loading: "lazy"
|
|
4697
4806
|
}
|
|
4698
4807
|
),
|
|
4699
|
-
/* @__PURE__ */ (0,
|
|
4700
|
-
/* @__PURE__ */ (0,
|
|
4701
|
-
/* @__PURE__ */ (0,
|
|
4702
|
-
onClick ? /* @__PURE__ */ (0,
|
|
4808
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { children: [
|
|
4809
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { css: ObjectSearchResultItemSubtitle, "data-testid": "sub-title", children: formatedContentType }),
|
|
4810
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { role: "heading", css: ObjectSearchResultItemTitle, "data-testid": "title", children: [
|
|
4811
|
+
onClick ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
4703
4812
|
import_design_system26.Link,
|
|
4704
4813
|
{
|
|
4705
4814
|
onClick: (e) => {
|
|
@@ -4711,28 +4820,28 @@ var ObjectSearchResultItem = ({
|
|
|
4711
4820
|
text: title != null ? title : name,
|
|
4712
4821
|
css: ObjectSearchResultItemTitleLink
|
|
4713
4822
|
}
|
|
4714
|
-
) : /* @__PURE__ */ (0,
|
|
4715
|
-
!popoverData ? null : /* @__PURE__ */ (0,
|
|
4823
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { children: title != null ? title : name }),
|
|
4824
|
+
!popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system26.Popover, { ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
|
|
4716
4825
|
] }),
|
|
4717
|
-
!createdAt && !publishStatus ? null : /* @__PURE__ */ (0,
|
|
4718
|
-
!(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0,
|
|
4719
|
-
!createdAt && !publishedAt ? null : /* @__PURE__ */ (0,
|
|
4720
|
-
!createdAt ? null : /* @__PURE__ */ (0,
|
|
4721
|
-
/* @__PURE__ */ (0,
|
|
4826
|
+
!createdAt && !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
|
|
4827
|
+
!(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system26.Chip, { theme: legacyThemeMapper(publishStatus.theme), text: publishStatus.text, size: "xs" }),
|
|
4828
|
+
!createdAt && !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: ObjectSearchUpdateGroup, children: [
|
|
4829
|
+
!createdAt ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
|
|
4830
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("strong", { children: "Last updated: " }),
|
|
4722
4831
|
(0, import_timeago.format)(createdAt)
|
|
4723
4832
|
] }),
|
|
4724
|
-
!publishedAt ? null : /* @__PURE__ */ (0,
|
|
4725
|
-
/* @__PURE__ */ (0,
|
|
4833
|
+
!publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
|
|
4834
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("strong", { children: "Last published: " }),
|
|
4726
4835
|
(0, import_timeago.format)(publishedAt)
|
|
4727
4836
|
] })
|
|
4728
4837
|
] })
|
|
4729
4838
|
] }),
|
|
4730
|
-
/* @__PURE__ */ (0,
|
|
4839
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { children })
|
|
4731
4840
|
] })
|
|
4732
4841
|
] }) }),
|
|
4733
|
-
!editLink && hideRemoveButton ? null : /* @__PURE__ */ (0,
|
|
4734
|
-
!editLink ? null : /* @__PURE__ */ (0,
|
|
4735
|
-
hideRemoveButton ? null : /* @__PURE__ */ (0,
|
|
4842
|
+
!editLink && hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
|
|
4843
|
+
!editLink ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
|
|
4844
|
+
hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system26.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
|
|
4736
4845
|
] })
|
|
4737
4846
|
] });
|
|
4738
4847
|
};
|
|
@@ -4756,32 +4865,32 @@ var import_dnd3 = require("@hello-pangea/dnd");
|
|
|
4756
4865
|
var import_design_system27 = require("@uniformdev/design-system");
|
|
4757
4866
|
|
|
4758
4867
|
// src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
|
|
4759
|
-
var
|
|
4760
|
-
var ObjectSearchResultListContainer =
|
|
4868
|
+
var import_react53 = require("@emotion/react");
|
|
4869
|
+
var ObjectSearchResultListContainer = import_react53.css`
|
|
4761
4870
|
align-items: center;
|
|
4762
4871
|
display: flex;
|
|
4763
4872
|
gap: var(--spacing-sm);
|
|
4764
4873
|
justify-content: space-between;
|
|
4765
4874
|
`;
|
|
4766
|
-
var ObjectSearchDragContainer =
|
|
4875
|
+
var ObjectSearchDragContainer = import_react53.css`
|
|
4767
4876
|
margin: 0 0 var(--spacing-sm);
|
|
4768
4877
|
`;
|
|
4769
|
-
var ObjectSearchContainerDragging =
|
|
4878
|
+
var ObjectSearchContainerDragging = import_react53.css`
|
|
4770
4879
|
box-shadow: var(--shadow-base);
|
|
4771
4880
|
opacity: var(--opacity-50);
|
|
4772
4881
|
`;
|
|
4773
|
-
var ObjectSearchResultListCounterContainer =
|
|
4882
|
+
var ObjectSearchResultListCounterContainer = import_react53.css`
|
|
4774
4883
|
align-items: center;
|
|
4775
4884
|
display: flex;
|
|
4776
4885
|
gap: var(--spacing-sm);
|
|
4777
4886
|
`;
|
|
4778
|
-
var ObjectSearchResultListTitle =
|
|
4887
|
+
var ObjectSearchResultListTitle = import_react53.css`
|
|
4779
4888
|
font-weight: var(--fw-bold);
|
|
4780
4889
|
line-height: 1;
|
|
4781
4890
|
`;
|
|
4782
4891
|
|
|
4783
4892
|
// src/components/ObjectSearch/ObjectSearchResultList.tsx
|
|
4784
|
-
var
|
|
4893
|
+
var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
|
|
4785
4894
|
var DroppableHack2 = import_dnd3.Droppable;
|
|
4786
4895
|
var DraggableHack2 = import_dnd3.Draggable;
|
|
4787
4896
|
function ObjectSearchResultList({
|
|
@@ -4791,7 +4900,7 @@ function ObjectSearchResultList({
|
|
|
4791
4900
|
hideRemoveButton = false,
|
|
4792
4901
|
resultLabelOverride,
|
|
4793
4902
|
additionalButtons,
|
|
4794
|
-
renderResultComponent = (value) => /* @__PURE__ */ (0,
|
|
4903
|
+
renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ObjectSearchResultItem, { ...value }),
|
|
4795
4904
|
multiSelectId,
|
|
4796
4905
|
disableDnD = false,
|
|
4797
4906
|
getContainerForDnDReparenting,
|
|
@@ -4818,7 +4927,7 @@ function ObjectSearchResultList({
|
|
|
4818
4927
|
...item,
|
|
4819
4928
|
disableDnD: selectedListItems.length === 1 || disableDnD
|
|
4820
4929
|
});
|
|
4821
|
-
return /* @__PURE__ */ (0,
|
|
4930
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
4822
4931
|
"div",
|
|
4823
4932
|
{
|
|
4824
4933
|
css: [
|
|
@@ -4833,16 +4942,16 @@ function ObjectSearchResultList({
|
|
|
4833
4942
|
}
|
|
4834
4943
|
);
|
|
4835
4944
|
};
|
|
4836
|
-
return /* @__PURE__ */ (0,
|
|
4837
|
-
/* @__PURE__ */ (0,
|
|
4838
|
-
!resultLabelOverride ? /* @__PURE__ */ (0,
|
|
4839
|
-
/* @__PURE__ */ (0,
|
|
4945
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
|
|
4946
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { role: "group", css: ObjectSearchResultListContainer, children: [
|
|
4947
|
+
!resultLabelOverride ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
|
|
4948
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
|
|
4840
4949
|
" ",
|
|
4841
|
-
!selectedListItems.length ? null : /* @__PURE__ */ (0,
|
|
4950
|
+
!selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_design_system27.Counter, { count: selectedListItems.length })
|
|
4842
4951
|
] }) : resultLabelOverride,
|
|
4843
|
-
/* @__PURE__ */ (0,
|
|
4952
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
|
|
4844
4953
|
additionalButtons,
|
|
4845
|
-
hideRemoveButton ? null : /* @__PURE__ */ (0,
|
|
4954
|
+
hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
4846
4955
|
import_design_system27.Button,
|
|
4847
4956
|
{
|
|
4848
4957
|
buttonType: "ghostDestructive",
|
|
@@ -4854,15 +4963,15 @@ function ObjectSearchResultList({
|
|
|
4854
4963
|
)
|
|
4855
4964
|
] })
|
|
4856
4965
|
] }),
|
|
4857
|
-
!selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0,
|
|
4966
|
+
!selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
4858
4967
|
DroppableHack2,
|
|
4859
4968
|
{
|
|
4860
4969
|
droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select",
|
|
4861
4970
|
renderClone: getContainerForDnDReparenting ? getDraggableItem : void 0,
|
|
4862
4971
|
getContainerForClone: getContainerForDnDReparenting,
|
|
4863
|
-
children: (provided) => /* @__PURE__ */ (0,
|
|
4972
|
+
children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
|
|
4864
4973
|
selectedListItems.map((item, i) => {
|
|
4865
|
-
return /* @__PURE__ */ (0,
|
|
4974
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
4866
4975
|
DraggableHack2,
|
|
4867
4976
|
{
|
|
4868
4977
|
draggableId: item.id,
|
|
@@ -4882,8 +4991,8 @@ function ObjectSearchResultList({
|
|
|
4882
4991
|
|
|
4883
4992
|
// src/components/ObjectSearch/QueryFilter.tsx
|
|
4884
4993
|
var import_design_system28 = require("@uniformdev/design-system");
|
|
4885
|
-
var
|
|
4886
|
-
var
|
|
4994
|
+
var import_react54 = require("react");
|
|
4995
|
+
var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
|
|
4887
4996
|
var QueryFilter = ({
|
|
4888
4997
|
requireContentType,
|
|
4889
4998
|
queryFilterTitle = "Configure Query",
|
|
@@ -4911,7 +5020,7 @@ var QueryFilter = ({
|
|
|
4911
5020
|
}) => {
|
|
4912
5021
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
4913
5022
|
const { query, onSetQuery } = useObjectSearchContext();
|
|
4914
|
-
const [queryState, setQueryState] = (0,
|
|
5023
|
+
const [queryState, setQueryState] = (0, import_react54.useState)({
|
|
4915
5024
|
contentType: (_a = query.contentType) != null ? _a : "",
|
|
4916
5025
|
keyword: (_b = query.keyword) != null ? _b : "",
|
|
4917
5026
|
count: (_c = query.count) != null ? _c : 5,
|
|
@@ -4922,13 +5031,13 @@ var QueryFilter = ({
|
|
|
4922
5031
|
setQueryState((prev) => ({ ...prev, ...value }));
|
|
4923
5032
|
onSetQuery({ ...query, ...value });
|
|
4924
5033
|
};
|
|
4925
|
-
(0,
|
|
5034
|
+
(0, import_react54.useEffect)(() => {
|
|
4926
5035
|
onSetQuery(queryState);
|
|
4927
5036
|
}, []);
|
|
4928
|
-
return /* @__PURE__ */ (0,
|
|
4929
|
-
/* @__PURE__ */ (0,
|
|
4930
|
-
/* @__PURE__ */ (0,
|
|
4931
|
-
/* @__PURE__ */ (0,
|
|
5037
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("fieldset", { children: [
|
|
5038
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
|
|
5039
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_design_system28.VerticalRhythm, { children: [
|
|
5040
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
4932
5041
|
InputVariables,
|
|
4933
5042
|
{
|
|
4934
5043
|
label: searchInputLabel,
|
|
@@ -4936,7 +5045,7 @@ var QueryFilter = ({
|
|
|
4936
5045
|
onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
|
|
4937
5046
|
disableInlineMenu: true,
|
|
4938
5047
|
id: "qf_searchText",
|
|
4939
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
5048
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
4940
5049
|
import_design_system28.DebouncedInputKeywordSearch,
|
|
4941
5050
|
{
|
|
4942
5051
|
id: "qf_searchText",
|
|
@@ -4950,8 +5059,8 @@ var QueryFilter = ({
|
|
|
4950
5059
|
)
|
|
4951
5060
|
}
|
|
4952
5061
|
),
|
|
4953
|
-
/* @__PURE__ */ (0,
|
|
4954
|
-
/* @__PURE__ */ (0,
|
|
5062
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { css: ObjectSearchFilterGrid("1fr 100px"), children: [
|
|
5063
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
4955
5064
|
InputVariables,
|
|
4956
5065
|
{
|
|
4957
5066
|
label: contentTypeLabel,
|
|
@@ -4959,7 +5068,7 @@ var QueryFilter = ({
|
|
|
4959
5068
|
value: (_g = queryState.contentType) != null ? _g : "",
|
|
4960
5069
|
onChange: (newType) => handleFilterChange({ contentType: newType }),
|
|
4961
5070
|
disableInlineMenu: true,
|
|
4962
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
5071
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
4963
5072
|
import_design_system28.InputSelect,
|
|
4964
5073
|
{
|
|
4965
5074
|
id: "qf_contentType",
|
|
@@ -4973,7 +5082,7 @@ var QueryFilter = ({
|
|
|
4973
5082
|
)
|
|
4974
5083
|
}
|
|
4975
5084
|
),
|
|
4976
|
-
/* @__PURE__ */ (0,
|
|
5085
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
4977
5086
|
InputVariables,
|
|
4978
5087
|
{
|
|
4979
5088
|
label: countLabel,
|
|
@@ -4982,7 +5091,7 @@ var QueryFilter = ({
|
|
|
4982
5091
|
onChange: (newCount) => handleFilterChange({ count: newCount }),
|
|
4983
5092
|
disableInlineMenu: true,
|
|
4984
5093
|
valueToResetTo: "5",
|
|
4985
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
5094
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
4986
5095
|
import_design_system28.Input,
|
|
4987
5096
|
{
|
|
4988
5097
|
id: "qf_count",
|
|
@@ -4997,8 +5106,8 @@ var QueryFilter = ({
|
|
|
4997
5106
|
}
|
|
4998
5107
|
)
|
|
4999
5108
|
] }),
|
|
5000
|
-
/* @__PURE__ */ (0,
|
|
5001
|
-
/* @__PURE__ */ (0,
|
|
5109
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { css: ObjectSearchFilterGrid("2fr 1fr"), children: [
|
|
5110
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
5002
5111
|
InputVariables,
|
|
5003
5112
|
{
|
|
5004
5113
|
id: "qf_sortBy",
|
|
@@ -5006,7 +5115,7 @@ var QueryFilter = ({
|
|
|
5006
5115
|
value: queryState.sortBy,
|
|
5007
5116
|
onChange: (newSortBy) => handleFilterChange({ sortBy: newSortBy }),
|
|
5008
5117
|
disableInlineMenu: true,
|
|
5009
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
5118
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
5010
5119
|
import_design_system28.InputSelect,
|
|
5011
5120
|
{
|
|
5012
5121
|
label: sortLabel,
|
|
@@ -5020,7 +5129,7 @@ var QueryFilter = ({
|
|
|
5020
5129
|
)
|
|
5021
5130
|
}
|
|
5022
5131
|
),
|
|
5023
|
-
/* @__PURE__ */ (0,
|
|
5132
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
5024
5133
|
InputVariables,
|
|
5025
5134
|
{
|
|
5026
5135
|
label: sortOrderLabel,
|
|
@@ -5028,7 +5137,7 @@ var QueryFilter = ({
|
|
|
5028
5137
|
value: queryState.sortOrder,
|
|
5029
5138
|
onChange: (newSort) => handleFilterChange({ sortOrder: newSort }),
|
|
5030
5139
|
disableInlineMenu: true,
|
|
5031
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
5140
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
5032
5141
|
import_design_system28.InputSelect,
|
|
5033
5142
|
{
|
|
5034
5143
|
label: sortOrderLabel,
|
|
@@ -5048,8 +5157,8 @@ var QueryFilter = ({
|
|
|
5048
5157
|
};
|
|
5049
5158
|
|
|
5050
5159
|
// src/components/ParamTypeDynamicDataProvider.tsx
|
|
5051
|
-
var
|
|
5052
|
-
var
|
|
5160
|
+
var import_react55 = require("react");
|
|
5161
|
+
var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
|
|
5053
5162
|
function ParamTypeDynamicDataProvider(props) {
|
|
5054
5163
|
const { children } = props;
|
|
5055
5164
|
const {
|
|
@@ -5057,11 +5166,11 @@ function ParamTypeDynamicDataProvider(props) {
|
|
|
5057
5166
|
} = useMeshLocation("paramType");
|
|
5058
5167
|
const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
|
|
5059
5168
|
const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
|
|
5060
|
-
const variables = (0,
|
|
5169
|
+
const variables = (0, import_react55.useMemo)(
|
|
5061
5170
|
() => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
|
|
5062
5171
|
[dynamicInputsAsVariables, connectedDataAsVariables]
|
|
5063
5172
|
);
|
|
5064
|
-
return /* @__PURE__ */ (0,
|
|
5173
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(VariablesProvider, { value: variables, onChange: () => {
|
|
5065
5174
|
}, editVariableComponent: JsonMeshVariableEditor, children });
|
|
5066
5175
|
}
|
|
5067
5176
|
var JsonMeshVariableEditor = ({
|
|
@@ -5070,9 +5179,9 @@ var JsonMeshVariableEditor = ({
|
|
|
5070
5179
|
variable,
|
|
5071
5180
|
context
|
|
5072
5181
|
}) => {
|
|
5073
|
-
const sillyRef = (0,
|
|
5182
|
+
const sillyRef = (0, import_react55.useRef)(false);
|
|
5074
5183
|
const { editConnectedData } = useMeshLocation("paramType");
|
|
5075
|
-
(0,
|
|
5184
|
+
(0, import_react55.useEffect)(() => {
|
|
5076
5185
|
if (sillyRef.current) {
|
|
5077
5186
|
return;
|
|
5078
5187
|
}
|
|
@@ -5508,6 +5617,12 @@ var MULTI_SELECT_OPERATORS = [
|
|
|
5508
5617
|
editorType: "multiChoice",
|
|
5509
5618
|
expectedValueType: "array"
|
|
5510
5619
|
},
|
|
5620
|
+
{
|
|
5621
|
+
label: "is all of...",
|
|
5622
|
+
value: "all",
|
|
5623
|
+
editorType: "multiChoice",
|
|
5624
|
+
expectedValueType: "array"
|
|
5625
|
+
},
|
|
5511
5626
|
{
|
|
5512
5627
|
label: "is empty",
|
|
5513
5628
|
value: "ndef",
|
|
@@ -5536,9 +5651,9 @@ var MULTI_SELECT_OPERATORS = [
|
|
|
5536
5651
|
|
|
5537
5652
|
// src/components/SearchAndFilter/editors/DateEditor.tsx
|
|
5538
5653
|
var import_design_system29 = require("@uniformdev/design-system");
|
|
5539
|
-
var
|
|
5654
|
+
var import_react56 = require("react");
|
|
5540
5655
|
var import_react_use2 = require("react-use");
|
|
5541
|
-
var
|
|
5656
|
+
var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
|
|
5542
5657
|
var DateEditor = ({
|
|
5543
5658
|
onChange,
|
|
5544
5659
|
ariaLabel,
|
|
@@ -5547,9 +5662,9 @@ var DateEditor = ({
|
|
|
5547
5662
|
readOnly,
|
|
5548
5663
|
valueTestId
|
|
5549
5664
|
}) => {
|
|
5550
|
-
const [innerValue, setInnerValue] = (0,
|
|
5665
|
+
const [innerValue, setInnerValue] = (0, import_react56.useState)(value != null ? value : "");
|
|
5551
5666
|
(0, import_react_use2.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
|
|
5552
|
-
return /* @__PURE__ */ (0,
|
|
5667
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
|
|
5553
5668
|
import_design_system29.Input,
|
|
5554
5669
|
{
|
|
5555
5670
|
type: "date",
|
|
@@ -5566,21 +5681,21 @@ var DateEditor = ({
|
|
|
5566
5681
|
|
|
5567
5682
|
// src/components/SearchAndFilter/editors/DateRangeEditor.tsx
|
|
5568
5683
|
var import_design_system31 = require("@uniformdev/design-system");
|
|
5569
|
-
var
|
|
5684
|
+
var import_react57 = require("react");
|
|
5570
5685
|
var import_react_use3 = require("react-use");
|
|
5571
5686
|
|
|
5572
5687
|
// src/components/SearchAndFilter/editors/shared/ErrorContainer.tsx
|
|
5573
5688
|
var import_design_system30 = require("@uniformdev/design-system");
|
|
5574
|
-
var
|
|
5689
|
+
var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
|
|
5575
5690
|
var ErrorContainer = ({ errorMessage }) => {
|
|
5576
|
-
return /* @__PURE__ */ (0,
|
|
5691
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
5577
5692
|
"div",
|
|
5578
5693
|
{
|
|
5579
5694
|
css: {
|
|
5580
5695
|
gridColumn: "span 6",
|
|
5581
5696
|
order: 6
|
|
5582
5697
|
},
|
|
5583
|
-
children: /* @__PURE__ */ (0,
|
|
5698
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system30.FieldMessage, { errorMessage })
|
|
5584
5699
|
}
|
|
5585
5700
|
);
|
|
5586
5701
|
};
|
|
@@ -5593,7 +5708,7 @@ var twoColumnGrid = {
|
|
|
5593
5708
|
};
|
|
5594
5709
|
|
|
5595
5710
|
// src/components/SearchAndFilter/editors/DateRangeEditor.tsx
|
|
5596
|
-
var
|
|
5711
|
+
var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
|
|
5597
5712
|
var DateRangeEditor = ({
|
|
5598
5713
|
ariaLabel,
|
|
5599
5714
|
onChange,
|
|
@@ -5602,9 +5717,9 @@ var DateRangeEditor = ({
|
|
|
5602
5717
|
readOnly,
|
|
5603
5718
|
valueTestId
|
|
5604
5719
|
}) => {
|
|
5605
|
-
const [minDateValue, setMinDateValue] = (0,
|
|
5606
|
-
const [maxDateValue, setMaxDateValue] = (0,
|
|
5607
|
-
const [error, setError] = (0,
|
|
5720
|
+
const [minDateValue, setMinDateValue] = (0, import_react57.useState)(value ? value[0] : "");
|
|
5721
|
+
const [maxDateValue, setMaxDateValue] = (0, import_react57.useState)(value ? value[1] : "");
|
|
5722
|
+
const [error, setError] = (0, import_react57.useState)("");
|
|
5608
5723
|
(0, import_react_use3.useDebounce)(
|
|
5609
5724
|
() => {
|
|
5610
5725
|
if (minDateValue && maxDateValue && !error) {
|
|
@@ -5616,7 +5731,7 @@ var DateRangeEditor = ({
|
|
|
5616
5731
|
500,
|
|
5617
5732
|
[minDateValue, maxDateValue]
|
|
5618
5733
|
);
|
|
5619
|
-
(0,
|
|
5734
|
+
(0, import_react57.useEffect)(() => {
|
|
5620
5735
|
if (!minDateValue || !maxDateValue) {
|
|
5621
5736
|
return;
|
|
5622
5737
|
}
|
|
@@ -5651,9 +5766,9 @@ var DateRangeEditor = ({
|
|
|
5651
5766
|
setMaxDateValue("");
|
|
5652
5767
|
}
|
|
5653
5768
|
}, [minDateValue, maxDateValue, setError]);
|
|
5654
|
-
return /* @__PURE__ */ (0,
|
|
5655
|
-
/* @__PURE__ */ (0,
|
|
5656
|
-
/* @__PURE__ */ (0,
|
|
5769
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
|
|
5770
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
|
|
5771
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
5657
5772
|
import_design_system31.Input,
|
|
5658
5773
|
{
|
|
5659
5774
|
label: `${ariaLabel}-min-date`,
|
|
@@ -5667,7 +5782,7 @@ var DateRangeEditor = ({
|
|
|
5667
5782
|
"data-testid": "value-low"
|
|
5668
5783
|
}
|
|
5669
5784
|
),
|
|
5670
|
-
/* @__PURE__ */ (0,
|
|
5785
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
5671
5786
|
import_design_system31.Input,
|
|
5672
5787
|
{
|
|
5673
5788
|
label: `${ariaLabel}-max-date`,
|
|
@@ -5682,13 +5797,13 @@ var DateRangeEditor = ({
|
|
|
5682
5797
|
}
|
|
5683
5798
|
)
|
|
5684
5799
|
] }),
|
|
5685
|
-
/* @__PURE__ */ (0,
|
|
5800
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ErrorContainer, { errorMessage: error })
|
|
5686
5801
|
] });
|
|
5687
5802
|
};
|
|
5688
5803
|
|
|
5689
5804
|
// src/components/SearchAndFilter/editors/FilterMultiChoiceEditor.tsx
|
|
5690
5805
|
var import_design_system32 = require("@uniformdev/design-system");
|
|
5691
|
-
var
|
|
5806
|
+
var import_react58 = require("react");
|
|
5692
5807
|
|
|
5693
5808
|
// src/components/SearchAndFilter/editors/shared/readOnlyAttributes.tsx
|
|
5694
5809
|
var readOnlyAttributes = {
|
|
@@ -5698,7 +5813,7 @@ var readOnlyAttributes = {
|
|
|
5698
5813
|
};
|
|
5699
5814
|
|
|
5700
5815
|
// src/components/SearchAndFilter/editors/FilterMultiChoiceEditor.tsx
|
|
5701
|
-
var
|
|
5816
|
+
var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
|
|
5702
5817
|
var FilterMultiChoiceEditor = ({
|
|
5703
5818
|
value,
|
|
5704
5819
|
options,
|
|
@@ -5709,11 +5824,11 @@ var FilterMultiChoiceEditor = ({
|
|
|
5709
5824
|
}) => {
|
|
5710
5825
|
const readOnlyProps = readOnly ? readOnlyAttributes : {};
|
|
5711
5826
|
const isClearable = !readOnly || !disabled;
|
|
5712
|
-
const { groupedOptions, selectedOptions } = (0,
|
|
5827
|
+
const { groupedOptions, selectedOptions } = (0, import_react58.useMemo)(
|
|
5713
5828
|
() => (0, import_design_system32.convertComboBoxGroupsToSelectableGroups)({ options: options != null ? options : [], selectedItems: new Set(value) }),
|
|
5714
5829
|
[options, value]
|
|
5715
5830
|
);
|
|
5716
|
-
return /* @__PURE__ */ (0,
|
|
5831
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
5717
5832
|
import_design_system32.InputComboBox,
|
|
5718
5833
|
{
|
|
5719
5834
|
...props,
|
|
@@ -5743,8 +5858,8 @@ var FilterMultiChoiceEditor = ({
|
|
|
5743
5858
|
|
|
5744
5859
|
// src/components/SearchAndFilter/editors/FilterSingleChoiceEditor.tsx
|
|
5745
5860
|
var import_design_system33 = require("@uniformdev/design-system");
|
|
5746
|
-
var
|
|
5747
|
-
var
|
|
5861
|
+
var import_react59 = require("react");
|
|
5862
|
+
var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
|
|
5748
5863
|
var FilterSingleChoiceEditor = ({
|
|
5749
5864
|
options,
|
|
5750
5865
|
value,
|
|
@@ -5754,7 +5869,7 @@ var FilterSingleChoiceEditor = ({
|
|
|
5754
5869
|
valueTestId
|
|
5755
5870
|
}) => {
|
|
5756
5871
|
const readOnlyProps = readOnly ? readOnlyAttributes : {};
|
|
5757
|
-
const { groupedOptions, selectedOptions } = (0,
|
|
5872
|
+
const { groupedOptions, selectedOptions } = (0, import_react59.useMemo)(
|
|
5758
5873
|
() => (0, import_design_system33.convertComboBoxGroupsToSelectableGroups)({
|
|
5759
5874
|
options: options != null ? options : [],
|
|
5760
5875
|
selectedItems: new Set(value ? [String(value)] : void 0),
|
|
@@ -5762,7 +5877,7 @@ var FilterSingleChoiceEditor = ({
|
|
|
5762
5877
|
}),
|
|
5763
5878
|
[options, value]
|
|
5764
5879
|
);
|
|
5765
|
-
return /* @__PURE__ */ (0,
|
|
5880
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
5766
5881
|
import_design_system33.InputComboBox,
|
|
5767
5882
|
{
|
|
5768
5883
|
placeholder: "Type to search...",
|
|
@@ -5792,9 +5907,9 @@ var FilterSingleChoiceEditor = ({
|
|
|
5792
5907
|
|
|
5793
5908
|
// src/components/SearchAndFilter/editors/NumberEditor.tsx
|
|
5794
5909
|
var import_design_system34 = require("@uniformdev/design-system");
|
|
5795
|
-
var
|
|
5910
|
+
var import_react60 = require("react");
|
|
5796
5911
|
var import_react_use4 = require("react-use");
|
|
5797
|
-
var
|
|
5912
|
+
var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
|
|
5798
5913
|
var NumberEditor = ({
|
|
5799
5914
|
ariaLabel,
|
|
5800
5915
|
onChange,
|
|
@@ -5803,9 +5918,9 @@ var NumberEditor = ({
|
|
|
5803
5918
|
readOnly,
|
|
5804
5919
|
valueTestId
|
|
5805
5920
|
}) => {
|
|
5806
|
-
const [innerValue, setInnerValue] = (0,
|
|
5921
|
+
const [innerValue, setInnerValue] = (0, import_react60.useState)(value != null ? value : "");
|
|
5807
5922
|
(0, import_react_use4.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
|
|
5808
|
-
return /* @__PURE__ */ (0,
|
|
5923
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
5809
5924
|
import_design_system34.Input,
|
|
5810
5925
|
{
|
|
5811
5926
|
label: ariaLabel,
|
|
@@ -5823,9 +5938,9 @@ var NumberEditor = ({
|
|
|
5823
5938
|
|
|
5824
5939
|
// src/components/SearchAndFilter/editors/NumberRangeEditor.tsx
|
|
5825
5940
|
var import_design_system35 = require("@uniformdev/design-system");
|
|
5826
|
-
var
|
|
5941
|
+
var import_react61 = require("react");
|
|
5827
5942
|
var import_react_use5 = require("react-use");
|
|
5828
|
-
var
|
|
5943
|
+
var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
|
|
5829
5944
|
var NumberRangeEditor = ({
|
|
5830
5945
|
onChange,
|
|
5831
5946
|
disabled,
|
|
@@ -5834,9 +5949,9 @@ var NumberRangeEditor = ({
|
|
|
5834
5949
|
readOnly,
|
|
5835
5950
|
valueTestId
|
|
5836
5951
|
}) => {
|
|
5837
|
-
const [minValue, setMinValue] = (0,
|
|
5838
|
-
const [maxValue, setMaxValue] = (0,
|
|
5839
|
-
const [error, setError] = (0,
|
|
5952
|
+
const [minValue, setMinValue] = (0, import_react61.useState)("");
|
|
5953
|
+
const [maxValue, setMaxValue] = (0, import_react61.useState)("");
|
|
5954
|
+
const [error, setError] = (0, import_react61.useState)("");
|
|
5840
5955
|
(0, import_react_use5.useDebounce)(
|
|
5841
5956
|
() => {
|
|
5842
5957
|
if (minValue && maxValue && !error) {
|
|
@@ -5848,7 +5963,7 @@ var NumberRangeEditor = ({
|
|
|
5848
5963
|
500,
|
|
5849
5964
|
[minValue, maxValue]
|
|
5850
5965
|
);
|
|
5851
|
-
(0,
|
|
5966
|
+
(0, import_react61.useEffect)(() => {
|
|
5852
5967
|
if (!maxValue && !minValue) {
|
|
5853
5968
|
return;
|
|
5854
5969
|
}
|
|
@@ -5870,9 +5985,9 @@ var NumberRangeEditor = ({
|
|
|
5870
5985
|
setMaxValue(maxValue);
|
|
5871
5986
|
}
|
|
5872
5987
|
}, [maxValue, minValue, setError]);
|
|
5873
|
-
return /* @__PURE__ */ (0,
|
|
5874
|
-
/* @__PURE__ */ (0,
|
|
5875
|
-
/* @__PURE__ */ (0,
|
|
5988
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
|
|
5989
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
|
|
5990
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
5876
5991
|
import_design_system35.Input,
|
|
5877
5992
|
{
|
|
5878
5993
|
label: `${ariaLabel}-min`,
|
|
@@ -5888,7 +6003,7 @@ var NumberRangeEditor = ({
|
|
|
5888
6003
|
"data-testid": "value-low"
|
|
5889
6004
|
}
|
|
5890
6005
|
),
|
|
5891
|
-
/* @__PURE__ */ (0,
|
|
6006
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
5892
6007
|
import_design_system35.Input,
|
|
5893
6008
|
{
|
|
5894
6009
|
type: "number",
|
|
@@ -5905,19 +6020,19 @@ var NumberRangeEditor = ({
|
|
|
5905
6020
|
}
|
|
5906
6021
|
)
|
|
5907
6022
|
] }),
|
|
5908
|
-
/* @__PURE__ */ (0,
|
|
6023
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ErrorContainer, { errorMessage: error })
|
|
5909
6024
|
] });
|
|
5910
6025
|
};
|
|
5911
6026
|
|
|
5912
6027
|
// src/components/SearchAndFilter/editors/StatusMultiEditor.tsx
|
|
5913
6028
|
var import_design_system37 = require("@uniformdev/design-system");
|
|
5914
|
-
var
|
|
6029
|
+
var import_react62 = require("react");
|
|
5915
6030
|
|
|
5916
6031
|
// src/components/SearchAndFilter/editors/shared/CustomOptions.tsx
|
|
5917
6032
|
var import_design_system36 = require("@uniformdev/design-system");
|
|
5918
|
-
var
|
|
6033
|
+
var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
|
|
5919
6034
|
var CustomOptions = ({ label, value }) => {
|
|
5920
|
-
return /* @__PURE__ */ (0,
|
|
6035
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
5921
6036
|
import_design_system36.StatusBullet,
|
|
5922
6037
|
{
|
|
5923
6038
|
status: label,
|
|
@@ -5927,7 +6042,7 @@ var CustomOptions = ({ label, value }) => {
|
|
|
5927
6042
|
};
|
|
5928
6043
|
|
|
5929
6044
|
// src/components/SearchAndFilter/editors/StatusMultiEditor.tsx
|
|
5930
|
-
var
|
|
6045
|
+
var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
|
|
5931
6046
|
var StatusMultiEditor = ({
|
|
5932
6047
|
options,
|
|
5933
6048
|
value,
|
|
@@ -5937,11 +6052,11 @@ var StatusMultiEditor = ({
|
|
|
5937
6052
|
valueTestId
|
|
5938
6053
|
}) => {
|
|
5939
6054
|
const readOnlyProps = readOnly ? readOnlyAttributes : {};
|
|
5940
|
-
const { groupedOptions, selectedOptions } = (0,
|
|
6055
|
+
const { groupedOptions, selectedOptions } = (0, import_react62.useMemo)(
|
|
5941
6056
|
() => (0, import_design_system37.convertComboBoxGroupsToSelectableGroups)({ options: options != null ? options : [], selectedItems: new Set(value) }),
|
|
5942
6057
|
[options, value]
|
|
5943
6058
|
);
|
|
5944
|
-
return /* @__PURE__ */ (0,
|
|
6059
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
5945
6060
|
import_design_system37.InputComboBox,
|
|
5946
6061
|
{
|
|
5947
6062
|
options: groupedOptions != null ? groupedOptions : [],
|
|
@@ -5969,8 +6084,8 @@ var StatusMultiEditor = ({
|
|
|
5969
6084
|
|
|
5970
6085
|
// src/components/SearchAndFilter/editors/StatusSingleEditor.tsx
|
|
5971
6086
|
var import_design_system38 = require("@uniformdev/design-system");
|
|
5972
|
-
var
|
|
5973
|
-
var
|
|
6087
|
+
var import_react63 = require("react");
|
|
6088
|
+
var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
|
|
5974
6089
|
var StatusSingleEditor = ({
|
|
5975
6090
|
options,
|
|
5976
6091
|
value,
|
|
@@ -5980,7 +6095,7 @@ var StatusSingleEditor = ({
|
|
|
5980
6095
|
valueTestId
|
|
5981
6096
|
}) => {
|
|
5982
6097
|
const readOnlyProps = readOnly ? readOnlyAttributes : {};
|
|
5983
|
-
const { groupedOptions, selectedOptions } = (0,
|
|
6098
|
+
const { groupedOptions, selectedOptions } = (0, import_react63.useMemo)(
|
|
5984
6099
|
() => (0, import_design_system38.convertComboBoxGroupsToSelectableGroups)({
|
|
5985
6100
|
options: options != null ? options : [],
|
|
5986
6101
|
selectedItems: new Set(value ? [value] : void 0),
|
|
@@ -5988,7 +6103,7 @@ var StatusSingleEditor = ({
|
|
|
5988
6103
|
}),
|
|
5989
6104
|
[options, value]
|
|
5990
6105
|
);
|
|
5991
|
-
return /* @__PURE__ */ (0,
|
|
6106
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
5992
6107
|
import_design_system38.InputComboBox,
|
|
5993
6108
|
{
|
|
5994
6109
|
options: groupedOptions,
|
|
@@ -6017,9 +6132,9 @@ var StatusSingleEditor = ({
|
|
|
6017
6132
|
|
|
6018
6133
|
// src/components/SearchAndFilter/editors/TextEditor.tsx
|
|
6019
6134
|
var import_design_system39 = require("@uniformdev/design-system");
|
|
6020
|
-
var
|
|
6135
|
+
var import_react64 = require("react");
|
|
6021
6136
|
var import_react_use6 = require("react-use");
|
|
6022
|
-
var
|
|
6137
|
+
var import_jsx_runtime70 = require("@emotion/react/jsx-runtime");
|
|
6023
6138
|
var TextEditor = ({
|
|
6024
6139
|
onChange,
|
|
6025
6140
|
ariaLabel,
|
|
@@ -6027,9 +6142,9 @@ var TextEditor = ({
|
|
|
6027
6142
|
readOnly,
|
|
6028
6143
|
valueTestId
|
|
6029
6144
|
}) => {
|
|
6030
|
-
const [innerValue, setInnerValue] = (0,
|
|
6145
|
+
const [innerValue, setInnerValue] = (0, import_react64.useState)(value != null ? value : "");
|
|
6031
6146
|
(0, import_react_use6.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
|
|
6032
|
-
return /* @__PURE__ */ (0,
|
|
6147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
6033
6148
|
import_design_system39.Input,
|
|
6034
6149
|
{
|
|
6035
6150
|
showLabel: false,
|
|
@@ -6045,8 +6160,8 @@ var TextEditor = ({
|
|
|
6045
6160
|
|
|
6046
6161
|
// src/components/SearchAndFilter/editors/TextMultiChoiceEditor.tsx
|
|
6047
6162
|
var import_design_system40 = require("@uniformdev/design-system");
|
|
6048
|
-
var
|
|
6049
|
-
var
|
|
6163
|
+
var import_react65 = require("react");
|
|
6164
|
+
var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
|
|
6050
6165
|
var TextMultiChoiceEditor = ({
|
|
6051
6166
|
value,
|
|
6052
6167
|
disabled,
|
|
@@ -6056,13 +6171,13 @@ var TextMultiChoiceEditor = ({
|
|
|
6056
6171
|
}) => {
|
|
6057
6172
|
const readOnlyProps = readOnly ? readOnlyAttributes : {};
|
|
6058
6173
|
const isClearable = !readOnly || !disabled;
|
|
6059
|
-
const { groupedOptions, selectedOptions } = (0,
|
|
6174
|
+
const { groupedOptions, selectedOptions } = (0, import_react65.useMemo)(() => {
|
|
6060
6175
|
var _a;
|
|
6061
6176
|
const coercedValue = typeof value === "string" ? [value] : value != null ? value : [];
|
|
6062
6177
|
const options = (_a = coercedValue.map((v) => ({ label: v, value: v }))) != null ? _a : [];
|
|
6063
6178
|
return (0, import_design_system40.convertComboBoxGroupsToSelectableGroups)({ options, selectedItems: new Set(value) });
|
|
6064
6179
|
}, [value]);
|
|
6065
|
-
return /* @__PURE__ */ (0,
|
|
6180
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
6066
6181
|
import_design_system40.InputCreatableComboBox,
|
|
6067
6182
|
{
|
|
6068
6183
|
...props,
|
|
@@ -6095,21 +6210,21 @@ var TextMultiChoiceEditor = ({
|
|
|
6095
6210
|
var import_design_system42 = require("@uniformdev/design-system");
|
|
6096
6211
|
|
|
6097
6212
|
// src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
|
|
6098
|
-
var
|
|
6213
|
+
var import_react66 = require("@emotion/react");
|
|
6099
6214
|
var import_design_system41 = require("@uniformdev/design-system");
|
|
6100
|
-
var SearchAndFilterControlsWrapper = (gridColumns) =>
|
|
6215
|
+
var SearchAndFilterControlsWrapper = (gridColumns) => import_react66.css`
|
|
6101
6216
|
align-items: stretch;
|
|
6102
6217
|
display: grid;
|
|
6103
6218
|
grid-template-columns: ${gridColumns};
|
|
6104
6219
|
gap: var(--spacing-sm);
|
|
6105
6220
|
`;
|
|
6106
|
-
var SearchAndFilterOutterControlWrapper = (gridColumns) =>
|
|
6221
|
+
var SearchAndFilterOutterControlWrapper = (gridColumns) => import_react66.css`
|
|
6107
6222
|
align-items: stretch;
|
|
6108
6223
|
display: grid;
|
|
6109
6224
|
grid-template-columns: ${gridColumns};
|
|
6110
6225
|
gap: var(--spacing-sm);
|
|
6111
6226
|
`;
|
|
6112
|
-
var ConditionalFilterRow =
|
|
6227
|
+
var ConditionalFilterRow = import_react66.css`
|
|
6113
6228
|
align-items: baseline;
|
|
6114
6229
|
display: grid;
|
|
6115
6230
|
grid-template-columns: 35px 1fr;
|
|
@@ -6145,7 +6260,7 @@ var ConditionalFilterRow = import_react63.css`
|
|
|
6145
6260
|
animation: ${import_design_system41.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
|
|
6146
6261
|
}
|
|
6147
6262
|
`;
|
|
6148
|
-
var ConditionalInputRow =
|
|
6263
|
+
var ConditionalInputRow = import_react66.css`
|
|
6149
6264
|
display: flex;
|
|
6150
6265
|
gap: var(--spacing-sm);
|
|
6151
6266
|
flex-wrap: wrap;
|
|
@@ -6169,16 +6284,16 @@ var ConditionalInputRow = import_react63.css`
|
|
|
6169
6284
|
}
|
|
6170
6285
|
}
|
|
6171
6286
|
`;
|
|
6172
|
-
var ConditionalInputRowEmpty =
|
|
6287
|
+
var ConditionalInputRowEmpty = import_react66.css`
|
|
6173
6288
|
flex-wrap: nowrap;
|
|
6174
6289
|
`;
|
|
6175
|
-
var SearchInput =
|
|
6290
|
+
var SearchInput = import_react66.css`
|
|
6176
6291
|
&& {
|
|
6177
6292
|
max-height: 40px;
|
|
6178
6293
|
min-height: unset;
|
|
6179
6294
|
}
|
|
6180
6295
|
`;
|
|
6181
|
-
var BindableKeywordSearchInputStyles =
|
|
6296
|
+
var BindableKeywordSearchInputStyles = import_react66.css`
|
|
6182
6297
|
position: relative;
|
|
6183
6298
|
width: 100%;
|
|
6184
6299
|
|
|
@@ -6193,19 +6308,19 @@ var BindableKeywordSearchInputStyles = import_react63.css`
|
|
|
6193
6308
|
white-space: nowrap;
|
|
6194
6309
|
}
|
|
6195
6310
|
`;
|
|
6196
|
-
var ClearSearchButtonContainer =
|
|
6311
|
+
var ClearSearchButtonContainer = import_react66.css`
|
|
6197
6312
|
align-items: center;
|
|
6198
6313
|
display: flex;
|
|
6199
6314
|
position: absolute;
|
|
6200
6315
|
inset: 0 var(--spacing-lg) 0 auto;
|
|
6201
6316
|
`;
|
|
6202
|
-
var ClearSearchButtonStyles =
|
|
6317
|
+
var ClearSearchButtonStyles = import_react66.css`
|
|
6203
6318
|
background: none;
|
|
6204
6319
|
border: none;
|
|
6205
6320
|
padding: 0;
|
|
6206
6321
|
pointer-events: all;
|
|
6207
6322
|
`;
|
|
6208
|
-
var FilterButton =
|
|
6323
|
+
var FilterButton = import_react66.css`
|
|
6209
6324
|
align-items: center;
|
|
6210
6325
|
background: var(--white);
|
|
6211
6326
|
border: 1px solid var(--gray-300);
|
|
@@ -6242,13 +6357,13 @@ var FilterButton = import_react63.css`
|
|
|
6242
6357
|
opacity: var(--opacity-50);
|
|
6243
6358
|
}
|
|
6244
6359
|
`;
|
|
6245
|
-
var FilterButtonText =
|
|
6360
|
+
var FilterButtonText = import_react66.css`
|
|
6246
6361
|
overflow: hidden;
|
|
6247
6362
|
text-overflow: ellipsis;
|
|
6248
6363
|
white-space: nowrap;
|
|
6249
6364
|
max-width: 14ch;
|
|
6250
6365
|
`;
|
|
6251
|
-
var FilterButtonSelected =
|
|
6366
|
+
var FilterButtonSelected = import_react66.css`
|
|
6252
6367
|
background: var(--gray-100);
|
|
6253
6368
|
border-color: var(--gray-300);
|
|
6254
6369
|
|
|
@@ -6256,7 +6371,7 @@ var FilterButtonSelected = import_react63.css`
|
|
|
6256
6371
|
color: var(--accent-dark);
|
|
6257
6372
|
}
|
|
6258
6373
|
`;
|
|
6259
|
-
var FilterButtonWithOptions =
|
|
6374
|
+
var FilterButtonWithOptions = import_react66.css`
|
|
6260
6375
|
:where([aria-expanded='true']) {
|
|
6261
6376
|
background: var(--purple-rain-100);
|
|
6262
6377
|
border-color: var(--accent-light);
|
|
@@ -6268,14 +6383,14 @@ var FilterButtonWithOptions = import_react63.css`
|
|
|
6268
6383
|
}
|
|
6269
6384
|
}
|
|
6270
6385
|
`;
|
|
6271
|
-
var SearchIcon =
|
|
6386
|
+
var SearchIcon = import_react66.css`
|
|
6272
6387
|
color: var(--icon-color);
|
|
6273
6388
|
position: absolute;
|
|
6274
6389
|
inset: 0 var(--spacing-base) 0 auto;
|
|
6275
6390
|
margin: auto;
|
|
6276
6391
|
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
6277
6392
|
`;
|
|
6278
|
-
var AddConditionalBtn =
|
|
6393
|
+
var AddConditionalBtn = import_react66.css`
|
|
6279
6394
|
align-items: center;
|
|
6280
6395
|
background: transparent;
|
|
6281
6396
|
border: none;
|
|
@@ -6294,14 +6409,14 @@ var AddConditionalBtn = import_react63.css`
|
|
|
6294
6409
|
color: var(--gray-400);
|
|
6295
6410
|
}
|
|
6296
6411
|
`;
|
|
6297
|
-
var Title =
|
|
6412
|
+
var Title = import_react66.css`
|
|
6298
6413
|
color: var(--typography-light);
|
|
6299
6414
|
|
|
6300
6415
|
&:focus {
|
|
6301
6416
|
outline: none;
|
|
6302
6417
|
}
|
|
6303
6418
|
`;
|
|
6304
|
-
var ResetConditionsBtn =
|
|
6419
|
+
var ResetConditionsBtn = import_react66.css`
|
|
6305
6420
|
background: transparent;
|
|
6306
6421
|
border: none;
|
|
6307
6422
|
color: var(--action-destructive-default);
|
|
@@ -6316,13 +6431,13 @@ var ResetConditionsBtn = import_react63.css`
|
|
|
6316
6431
|
color: var(--gray-400);
|
|
6317
6432
|
}
|
|
6318
6433
|
`;
|
|
6319
|
-
var IconBtn =
|
|
6434
|
+
var IconBtn = import_react66.css`
|
|
6320
6435
|
align-self: center;
|
|
6321
6436
|
background: transparent;
|
|
6322
6437
|
border: none;
|
|
6323
6438
|
padding: var(--spacing-sm);
|
|
6324
6439
|
`;
|
|
6325
|
-
var SearchAndFilterOptionsContainer =
|
|
6440
|
+
var SearchAndFilterOptionsContainer = import_react66.css`
|
|
6326
6441
|
background: var(--gray-50);
|
|
6327
6442
|
border: 1px solid var(--gray-300);
|
|
6328
6443
|
border-radius: var(--rounded-base);
|
|
@@ -6333,17 +6448,17 @@ var SearchAndFilterOptionsContainer = import_react63.css`
|
|
|
6333
6448
|
padding: var(--spacing-md) 0 var(--spacing-base);
|
|
6334
6449
|
will-change: height;
|
|
6335
6450
|
`;
|
|
6336
|
-
var SearchAndFilterOptionsInnerContainer =
|
|
6451
|
+
var SearchAndFilterOptionsInnerContainer = import_react66.css`
|
|
6337
6452
|
display: flex;
|
|
6338
6453
|
flex-direction: column;
|
|
6339
6454
|
gap: var(--spacing-sm);
|
|
6340
6455
|
padding-inline: var(--spacing-md);
|
|
6341
6456
|
`;
|
|
6342
|
-
var SearchAndFilterButtonGroup =
|
|
6457
|
+
var SearchAndFilterButtonGroup = import_react66.css`
|
|
6343
6458
|
margin-top: var(--spacing-xs);
|
|
6344
6459
|
margin-left: calc(56px + var(--spacing-md));
|
|
6345
6460
|
`;
|
|
6346
|
-
var SearchAndFilterAdditionalContainer =
|
|
6461
|
+
var SearchAndFilterAdditionalContainer = import_react66.css`
|
|
6347
6462
|
align-items: center;
|
|
6348
6463
|
border-top: 1px solid var(--gray-300);
|
|
6349
6464
|
display: flex;
|
|
@@ -6353,7 +6468,7 @@ var SearchAndFilterAdditionalContainer = import_react63.css`
|
|
|
6353
6468
|
`;
|
|
6354
6469
|
|
|
6355
6470
|
// src/components/SearchAndFilter/FilterButton.tsx
|
|
6356
|
-
var
|
|
6471
|
+
var import_jsx_runtime72 = require("@emotion/react/jsx-runtime");
|
|
6357
6472
|
var FilterButton2 = ({
|
|
6358
6473
|
text = "Filters",
|
|
6359
6474
|
icon = import_design_system42.customIcons["filter-add"],
|
|
@@ -6363,7 +6478,7 @@ var FilterButton2 = ({
|
|
|
6363
6478
|
showDropdownIcon,
|
|
6364
6479
|
...props
|
|
6365
6480
|
}) => {
|
|
6366
|
-
return /* @__PURE__ */ (0,
|
|
6481
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
6367
6482
|
"button",
|
|
6368
6483
|
{
|
|
6369
6484
|
type: "button",
|
|
@@ -6375,10 +6490,10 @@ var FilterButton2 = ({
|
|
|
6375
6490
|
...props,
|
|
6376
6491
|
"data-testid": dataTestId,
|
|
6377
6492
|
children: [
|
|
6378
|
-
/* @__PURE__ */ (0,
|
|
6379
|
-
/* @__PURE__ */ (0,
|
|
6380
|
-
filterCount ? /* @__PURE__ */ (0,
|
|
6381
|
-
showDropdownIcon ? /* @__PURE__ */ (0,
|
|
6493
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_design_system42.Icon, { icon, iconColor: "currentColor", size: "1rem" }),
|
|
6494
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { css: FilterButtonText, children: text }),
|
|
6495
|
+
filterCount ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_design_system42.Counter, { count: filterCount, bgColor: "var(--white)" }) : null,
|
|
6496
|
+
showDropdownIcon ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_design_system42.Icon, { icon: "chevron-down", iconColor: "currentColor", size: "1rem" }) : null
|
|
6382
6497
|
]
|
|
6383
6498
|
}
|
|
6384
6499
|
);
|
|
@@ -6389,23 +6504,23 @@ var import_CgClose = require("@react-icons/all-files/cg/CgClose");
|
|
|
6389
6504
|
var import_canvas10 = require("@uniformdev/canvas");
|
|
6390
6505
|
var import_design_system44 = require("@uniformdev/design-system");
|
|
6391
6506
|
var import_lexical11 = require("lexical");
|
|
6392
|
-
var
|
|
6507
|
+
var import_react68 = require("react");
|
|
6393
6508
|
var import_react_use7 = require("react-use");
|
|
6394
6509
|
var import_uuid2 = require("uuid");
|
|
6395
6510
|
|
|
6396
6511
|
// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
|
|
6397
6512
|
var import_design_system43 = require("@uniformdev/design-system");
|
|
6398
|
-
var
|
|
6513
|
+
var import_react67 = require("react");
|
|
6399
6514
|
|
|
6400
6515
|
// src/components/SearchAndFilter/FilterEditor.tsx
|
|
6401
|
-
var
|
|
6516
|
+
var import_jsx_runtime73 = require("@emotion/react/jsx-runtime");
|
|
6402
6517
|
var FilterEditorRenderer = ({ editorType, ...props }) => {
|
|
6403
6518
|
const { filterMapper: contextFilterMapper } = useSearchAndFilter();
|
|
6404
6519
|
const Editor = contextFilterMapper == null ? void 0 : contextFilterMapper[editorType];
|
|
6405
6520
|
if (!Editor || editorType === "empty") {
|
|
6406
|
-
return /* @__PURE__ */ (0,
|
|
6521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", {});
|
|
6407
6522
|
}
|
|
6408
|
-
return /* @__PURE__ */ (0,
|
|
6523
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Editor, { ...props });
|
|
6409
6524
|
};
|
|
6410
6525
|
var filterMapper = {
|
|
6411
6526
|
multiChoice: FilterMultiChoiceEditor,
|
|
@@ -6423,9 +6538,9 @@ var filterMapper = {
|
|
|
6423
6538
|
function withInputVariables(WrappedComponent, noSwapping = false) {
|
|
6424
6539
|
const WithInputVariables = (props) => {
|
|
6425
6540
|
if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
|
|
6426
|
-
return /* @__PURE__ */ (0,
|
|
6541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(WrappedComponent, { ...props });
|
|
6427
6542
|
}
|
|
6428
|
-
return /* @__PURE__ */ (0,
|
|
6543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6429
6544
|
InputVariables,
|
|
6430
6545
|
{
|
|
6431
6546
|
"data-testid": "filter-value",
|
|
@@ -6434,7 +6549,7 @@ function withInputVariables(WrappedComponent, noSwapping = false) {
|
|
|
6434
6549
|
onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
|
|
6435
6550
|
value: props.value,
|
|
6436
6551
|
disabled: props.disabled,
|
|
6437
|
-
inputWhenNoVariables: noSwapping ? void 0 : /* @__PURE__ */ (0,
|
|
6552
|
+
inputWhenNoVariables: noSwapping ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(WrappedComponent, { ...props })
|
|
6438
6553
|
}
|
|
6439
6554
|
);
|
|
6440
6555
|
};
|
|
@@ -6444,9 +6559,9 @@ function withInputVariablesForMultiValue(WrappedComponent) {
|
|
|
6444
6559
|
const WithInputVariables = (props) => {
|
|
6445
6560
|
var _a;
|
|
6446
6561
|
if (!props.bindable || props.disabled || props.readOnly) {
|
|
6447
|
-
return /* @__PURE__ */ (0,
|
|
6562
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(WrappedComponent, { ...props });
|
|
6448
6563
|
}
|
|
6449
|
-
return /* @__PURE__ */ (0,
|
|
6564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
6450
6565
|
InputVariables,
|
|
6451
6566
|
{
|
|
6452
6567
|
"data-testid": "filter-value",
|
|
@@ -6454,7 +6569,7 @@ function withInputVariablesForMultiValue(WrappedComponent) {
|
|
|
6454
6569
|
showMenuPosition: "inline-right",
|
|
6455
6570
|
onChange: (newValue) => props.onChange(newValue ? [newValue] : []),
|
|
6456
6571
|
value: (_a = props.value) == null ? void 0 : _a[0],
|
|
6457
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
6572
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(WrappedComponent, { ...props })
|
|
6458
6573
|
}
|
|
6459
6574
|
);
|
|
6460
6575
|
};
|
|
@@ -6470,8 +6585,8 @@ var bindableFiltersMapper = {
|
|
|
6470
6585
|
};
|
|
6471
6586
|
|
|
6472
6587
|
// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
|
|
6473
|
-
var
|
|
6474
|
-
var SearchAndFilterContext = (0,
|
|
6588
|
+
var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
|
|
6589
|
+
var SearchAndFilterContext = (0, import_react67.createContext)({
|
|
6475
6590
|
searchTerm: "",
|
|
6476
6591
|
setSearchTerm: () => {
|
|
6477
6592
|
},
|
|
@@ -6491,6 +6606,7 @@ var SearchAndFilterContext = (0, import_react64.createContext)({
|
|
|
6491
6606
|
validFilterQuery: [],
|
|
6492
6607
|
filterMapper: {},
|
|
6493
6608
|
totalResults: 0,
|
|
6609
|
+
isLoading: false,
|
|
6494
6610
|
allowBindingSearchTerm: false
|
|
6495
6611
|
});
|
|
6496
6612
|
var SearchAndFilterProvider = ({
|
|
@@ -6504,21 +6620,22 @@ var SearchAndFilterProvider = ({
|
|
|
6504
6620
|
resetFilterValues = [{ field: "", operator: "", value: "" }],
|
|
6505
6621
|
onResetFilterValues,
|
|
6506
6622
|
totalResults,
|
|
6623
|
+
isLoading,
|
|
6507
6624
|
filterMapper: filterMapper2 = filterMapper,
|
|
6508
6625
|
children,
|
|
6509
6626
|
allowBindingSearchTerm
|
|
6510
6627
|
}) => {
|
|
6511
|
-
const [searchTerm, setSearchTerm] = (0,
|
|
6512
|
-
const deferredSearchTerm = (0,
|
|
6513
|
-
const [filterVisibility, setFilterVisibility] = (0,
|
|
6514
|
-
const handleSearchTerm = (0,
|
|
6628
|
+
const [searchTerm, setSearchTerm] = (0, import_react67.useState)(defaultSearchTerm);
|
|
6629
|
+
const deferredSearchTerm = (0, import_react67.useDeferredValue)(searchTerm);
|
|
6630
|
+
const [filterVisibility, setFilterVisibility] = (0, import_react67.useState)(alwaysVisible || filterVisible);
|
|
6631
|
+
const handleSearchTerm = (0, import_react67.useCallback)(
|
|
6515
6632
|
(term) => {
|
|
6516
6633
|
setSearchTerm(term);
|
|
6517
6634
|
onSearchChange == null ? void 0 : onSearchChange(term);
|
|
6518
6635
|
},
|
|
6519
6636
|
[setSearchTerm, onSearchChange]
|
|
6520
6637
|
);
|
|
6521
|
-
const handleToggleFilterVisibility = (0,
|
|
6638
|
+
const handleToggleFilterVisibility = (0, import_react67.useCallback)(
|
|
6522
6639
|
(visible) => {
|
|
6523
6640
|
if (alwaysVisible) {
|
|
6524
6641
|
return;
|
|
@@ -6527,30 +6644,30 @@ var SearchAndFilterProvider = ({
|
|
|
6527
6644
|
},
|
|
6528
6645
|
[alwaysVisible]
|
|
6529
6646
|
);
|
|
6530
|
-
const handleAddFilter = (0,
|
|
6647
|
+
const handleAddFilter = (0, import_react67.useCallback)(() => {
|
|
6531
6648
|
onChange([...filters, { field: "", operator: "", value: "" }]);
|
|
6532
6649
|
}, [filters, onChange]);
|
|
6533
|
-
const handleResetFilters = (0,
|
|
6650
|
+
const handleResetFilters = (0, import_react67.useCallback)(() => {
|
|
6534
6651
|
if (onResetFilterValues) {
|
|
6535
6652
|
return onResetFilterValues();
|
|
6536
6653
|
}
|
|
6537
6654
|
onSearchChange == null ? void 0 : onSearchChange("");
|
|
6538
6655
|
onChange(resetFilterValues);
|
|
6539
6656
|
}, [onChange, resetFilterValues, onSearchChange, onResetFilterValues]);
|
|
6540
|
-
const handleDeleteFilter = (0,
|
|
6657
|
+
const handleDeleteFilter = (0, import_react67.useCallback)(
|
|
6541
6658
|
(index) => {
|
|
6542
6659
|
const remainingFilters = filters.filter((_, i) => i !== index);
|
|
6543
6660
|
onChange(remainingFilters);
|
|
6544
6661
|
},
|
|
6545
6662
|
[filters, onChange]
|
|
6546
6663
|
);
|
|
6547
|
-
const validFilterQuery = (0,
|
|
6664
|
+
const validFilterQuery = (0, import_react67.useMemo)(() => {
|
|
6548
6665
|
const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
|
|
6549
6666
|
if (hasValidFilters) {
|
|
6550
6667
|
return filters;
|
|
6551
6668
|
}
|
|
6552
6669
|
}, [filters]);
|
|
6553
|
-
(0,
|
|
6670
|
+
(0, import_react67.useEffect)(() => {
|
|
6554
6671
|
if (filterVisibility) {
|
|
6555
6672
|
const handleEscKeyFilterClose = (e) => {
|
|
6556
6673
|
if (e.key === "Escape") {
|
|
@@ -6563,7 +6680,7 @@ var SearchAndFilterProvider = ({
|
|
|
6563
6680
|
};
|
|
6564
6681
|
}
|
|
6565
6682
|
}, [filterVisibility, handleToggleFilterVisibility]);
|
|
6566
|
-
return /* @__PURE__ */ (0,
|
|
6683
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
6567
6684
|
SearchAndFilterContext.Provider,
|
|
6568
6685
|
{
|
|
6569
6686
|
value: {
|
|
@@ -6579,20 +6696,21 @@ var SearchAndFilterProvider = ({
|
|
|
6579
6696
|
filterOptions,
|
|
6580
6697
|
validFilterQuery,
|
|
6581
6698
|
totalResults,
|
|
6699
|
+
isLoading,
|
|
6582
6700
|
filterMapper: filterMapper2,
|
|
6583
6701
|
allowBindingSearchTerm
|
|
6584
6702
|
},
|
|
6585
|
-
children: /* @__PURE__ */ (0,
|
|
6703
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_design_system43.VerticalRhythm, { children })
|
|
6586
6704
|
}
|
|
6587
6705
|
);
|
|
6588
6706
|
};
|
|
6589
6707
|
var useSearchAndFilter = () => {
|
|
6590
|
-
const value = (0,
|
|
6708
|
+
const value = (0, import_react67.useContext)(SearchAndFilterContext);
|
|
6591
6709
|
return { ...value };
|
|
6592
6710
|
};
|
|
6593
6711
|
|
|
6594
6712
|
// src/components/SearchAndFilter/FilterControls.tsx
|
|
6595
|
-
var
|
|
6713
|
+
var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
|
|
6596
6714
|
var FilterControls = ({
|
|
6597
6715
|
children,
|
|
6598
6716
|
hideSearchInput
|
|
@@ -6605,10 +6723,10 @@ var FilterControls = ({
|
|
|
6605
6723
|
searchTerm,
|
|
6606
6724
|
allowBindingSearchTerm
|
|
6607
6725
|
} = useSearchAndFilter();
|
|
6608
|
-
const editorRef = (0,
|
|
6726
|
+
const editorRef = (0, import_react68.useRef)(null);
|
|
6609
6727
|
const variableRefernceCountInSearchTerm = (0, import_canvas10.hasReferencedVariables)(searchTerm);
|
|
6610
|
-
const [idToResetInputVariables, setIdToResetInputVariables] = (0,
|
|
6611
|
-
const [localSearchTerm, setLocalSearchTerm] = (0,
|
|
6728
|
+
const [idToResetInputVariables, setIdToResetInputVariables] = (0, import_react68.useState)("data-resource-search-term-input");
|
|
6729
|
+
const [localSearchTerm, setLocalSearchTerm] = (0, import_react68.useState)(searchTerm);
|
|
6612
6730
|
(0, import_react_use7.useDebounce)(
|
|
6613
6731
|
() => {
|
|
6614
6732
|
setSearchTerm(localSearchTerm);
|
|
@@ -6616,14 +6734,14 @@ var FilterControls = ({
|
|
|
6616
6734
|
300,
|
|
6617
6735
|
[localSearchTerm]
|
|
6618
6736
|
);
|
|
6619
|
-
(0,
|
|
6737
|
+
(0, import_react68.useEffect)(() => {
|
|
6620
6738
|
if (searchTerm === "") {
|
|
6621
6739
|
setLocalSearchTerm("");
|
|
6622
6740
|
setIdToResetInputVariables(`data-resource-search-term-input-${(0, import_uuid2.v4)()}`);
|
|
6623
6741
|
}
|
|
6624
6742
|
}, [searchTerm]);
|
|
6625
|
-
return /* @__PURE__ */ (0,
|
|
6626
|
-
/* @__PURE__ */ (0,
|
|
6743
|
+
return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
|
|
6744
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
6627
6745
|
FilterButton2,
|
|
6628
6746
|
{
|
|
6629
6747
|
"aria-controls": "search-and-filter-options",
|
|
@@ -6636,8 +6754,8 @@ var FilterControls = ({
|
|
|
6636
6754
|
dataTestId: "filters-button"
|
|
6637
6755
|
}
|
|
6638
6756
|
),
|
|
6639
|
-
hideSearchInput ? null : /* @__PURE__ */ (0,
|
|
6640
|
-
/* @__PURE__ */ (0,
|
|
6757
|
+
hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { css: BindableKeywordSearchInputStyles, "data-testid": "search-container", children: [
|
|
6758
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
6641
6759
|
InputVariables,
|
|
6642
6760
|
{
|
|
6643
6761
|
label: "",
|
|
@@ -6647,7 +6765,7 @@ var FilterControls = ({
|
|
|
6647
6765
|
value: localSearchTerm,
|
|
6648
6766
|
onChange: (value) => setLocalSearchTerm(value != null ? value : ""),
|
|
6649
6767
|
disableVariables: !allowBindingSearchTerm,
|
|
6650
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
6768
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
6651
6769
|
import_design_system44.InputKeywordSearch,
|
|
6652
6770
|
{
|
|
6653
6771
|
placeholder: "Search...",
|
|
@@ -6666,7 +6784,7 @@ var FilterControls = ({
|
|
|
6666
6784
|
)
|
|
6667
6785
|
}
|
|
6668
6786
|
),
|
|
6669
|
-
variableRefernceCountInSearchTerm ? /* @__PURE__ */ (0,
|
|
6787
|
+
variableRefernceCountInSearchTerm ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { css: ClearSearchButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
6670
6788
|
"button",
|
|
6671
6789
|
{
|
|
6672
6790
|
css: ClearSearchButtonStyles,
|
|
@@ -6680,7 +6798,7 @@ var FilterControls = ({
|
|
|
6680
6798
|
},
|
|
6681
6799
|
type: "button",
|
|
6682
6800
|
"data-testid": "keyword-search-clear-button",
|
|
6683
|
-
children: /* @__PURE__ */ (0,
|
|
6801
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_design_system44.Icon, { icon: import_CgClose.CgClose, iconColor: "red", size: "1rem" })
|
|
6684
6802
|
}
|
|
6685
6803
|
) }) : null
|
|
6686
6804
|
] }),
|
|
@@ -6691,7 +6809,7 @@ var FilterControls = ({
|
|
|
6691
6809
|
// src/components/SearchAndFilter/FilterItem.tsx
|
|
6692
6810
|
var import_CgTrash2 = require("@react-icons/all-files/cg/CgTrash");
|
|
6693
6811
|
var import_design_system45 = require("@uniformdev/design-system");
|
|
6694
|
-
var
|
|
6812
|
+
var import_react69 = require("react");
|
|
6695
6813
|
|
|
6696
6814
|
// src/components/SearchAndFilter/util/isFilterBindable.ts
|
|
6697
6815
|
function isFilterBindable(filter, operator) {
|
|
@@ -6700,7 +6818,7 @@ function isFilterBindable(filter, operator) {
|
|
|
6700
6818
|
}
|
|
6701
6819
|
|
|
6702
6820
|
// src/components/SearchAndFilter/FilterItem.tsx
|
|
6703
|
-
var
|
|
6821
|
+
var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
|
|
6704
6822
|
var FilterItem = ({
|
|
6705
6823
|
index,
|
|
6706
6824
|
operatorOptions,
|
|
@@ -6718,7 +6836,7 @@ var FilterItem = ({
|
|
|
6718
6836
|
const operatorLabel = filters[index].operator !== "" ? `operator ${filters[index].operator}` : "unknown operator";
|
|
6719
6837
|
const metaDataLabel = filters[index].value !== "" ? `value ${filters[index].value}` : "unknown value";
|
|
6720
6838
|
const metaDataPossibleOptions = (_b = (_a = operatorOptions.find((op) => filters[index].operator === op.value)) == null ? void 0 : _a.editorType) != null ? _b : "singleChoice";
|
|
6721
|
-
const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly, bindable } = (0,
|
|
6839
|
+
const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly, bindable } = (0, import_react69.useMemo)(() => {
|
|
6722
6840
|
var _a2;
|
|
6723
6841
|
const currentSelectedFilterGroup = filterOptions.find((item) => {
|
|
6724
6842
|
var _a3;
|
|
@@ -6748,10 +6866,10 @@ var FilterItem = ({
|
|
|
6748
6866
|
} : {};
|
|
6749
6867
|
const CustomLeftHandComponent = selectedFieldValue == null ? void 0 : selectedFieldValue.leftHandSideComponentWhenSelected;
|
|
6750
6868
|
const isEmptyOperator = metaDataPossibleOptions === "empty";
|
|
6751
|
-
return /* @__PURE__ */ (0,
|
|
6752
|
-
/* @__PURE__ */ (0,
|
|
6753
|
-
/* @__PURE__ */ (0,
|
|
6754
|
-
CustomLeftHandComponent ? /* @__PURE__ */ (0,
|
|
6869
|
+
return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
|
|
6870
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { children: index === 0 ? initialCriteriaTitle : criteriaGroupOperator }),
|
|
6871
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { css: [ConditionalInputRow, isEmptyOperator ? ConditionalInputRowEmpty : null], children: [
|
|
6872
|
+
CustomLeftHandComponent ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
6755
6873
|
CustomLeftHandComponent,
|
|
6756
6874
|
{
|
|
6757
6875
|
filterOption: selectedFieldValue,
|
|
@@ -6761,7 +6879,7 @@ var FilterItem = ({
|
|
|
6761
6879
|
onFilterOptionChange("");
|
|
6762
6880
|
}
|
|
6763
6881
|
}
|
|
6764
|
-
) : /* @__PURE__ */ (0,
|
|
6882
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
6765
6883
|
import_design_system45.InputComboBox,
|
|
6766
6884
|
{
|
|
6767
6885
|
"aria-label": label,
|
|
@@ -6788,7 +6906,7 @@ var FilterItem = ({
|
|
|
6788
6906
|
name: `filter-field-${index}`
|
|
6789
6907
|
}
|
|
6790
6908
|
),
|
|
6791
|
-
/* @__PURE__ */ (0,
|
|
6909
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
6792
6910
|
import_design_system45.InputComboBox,
|
|
6793
6911
|
{
|
|
6794
6912
|
"aria-label": operatorLabel,
|
|
@@ -6812,7 +6930,7 @@ var FilterItem = ({
|
|
|
6812
6930
|
name: `filter-operator-${index}`
|
|
6813
6931
|
}
|
|
6814
6932
|
),
|
|
6815
|
-
/* @__PURE__ */ (0,
|
|
6933
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
6816
6934
|
FilterEditorRenderer,
|
|
6817
6935
|
{
|
|
6818
6936
|
"aria-label": metaDataLabel,
|
|
@@ -6827,7 +6945,7 @@ var FilterItem = ({
|
|
|
6827
6945
|
filterFieldName: filters[index].field
|
|
6828
6946
|
}
|
|
6829
6947
|
),
|
|
6830
|
-
readOnly ? null : /* @__PURE__ */ (0,
|
|
6948
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
6831
6949
|
"button",
|
|
6832
6950
|
{
|
|
6833
6951
|
type: "button",
|
|
@@ -6836,7 +6954,7 @@ var FilterItem = ({
|
|
|
6836
6954
|
css: IconBtn,
|
|
6837
6955
|
"data-testid": "delete-filter",
|
|
6838
6956
|
disabled: filters.length === 1,
|
|
6839
|
-
children: /* @__PURE__ */ (0,
|
|
6957
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_design_system45.Icon, { icon: import_CgTrash2.CgTrash, iconColor: filters.length === 1 ? "gray" : "red", size: "1rem" })
|
|
6840
6958
|
}
|
|
6841
6959
|
)
|
|
6842
6960
|
] })
|
|
@@ -6849,16 +6967,16 @@ var import_design_system47 = require("@uniformdev/design-system");
|
|
|
6849
6967
|
|
|
6850
6968
|
// src/components/SearchAndFilter/FilterMenu.tsx
|
|
6851
6969
|
var import_design_system46 = require("@uniformdev/design-system");
|
|
6852
|
-
var
|
|
6853
|
-
var
|
|
6970
|
+
var import_react70 = __toESM(require("react"));
|
|
6971
|
+
var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
|
|
6854
6972
|
var SearchAndFilterOptionsContainer2 = ({
|
|
6855
6973
|
buttonRow,
|
|
6856
6974
|
additionalFiltersContainer,
|
|
6857
6975
|
children
|
|
6858
6976
|
}) => {
|
|
6859
|
-
return /* @__PURE__ */ (0,
|
|
6860
|
-
/* @__PURE__ */ (0,
|
|
6861
|
-
buttonRow ? /* @__PURE__ */ (0,
|
|
6977
|
+
return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { css: SearchAndFilterOptionsContainer, children: [
|
|
6978
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { css: SearchAndFilterOptionsInnerContainer, children }),
|
|
6979
|
+
buttonRow ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
|
|
6862
6980
|
import_design_system46.HorizontalRhythm,
|
|
6863
6981
|
{
|
|
6864
6982
|
css: SearchAndFilterButtonGroup,
|
|
@@ -6868,7 +6986,7 @@ var SearchAndFilterOptionsContainer2 = ({
|
|
|
6868
6986
|
children: buttonRow
|
|
6869
6987
|
}
|
|
6870
6988
|
) : null,
|
|
6871
|
-
additionalFiltersContainer ? /* @__PURE__ */ (0,
|
|
6989
|
+
additionalFiltersContainer ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { css: SearchAndFilterAdditionalContainer, children: additionalFiltersContainer }) : null
|
|
6872
6990
|
] });
|
|
6873
6991
|
};
|
|
6874
6992
|
var FilterMenu = ({
|
|
@@ -6881,22 +6999,22 @@ var FilterMenu = ({
|
|
|
6881
6999
|
resetButtonText = "reset"
|
|
6882
7000
|
}) => {
|
|
6883
7001
|
const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
|
|
6884
|
-
const innerMenuRef =
|
|
6885
|
-
(0,
|
|
7002
|
+
const innerMenuRef = import_react70.default.useRef(null);
|
|
7003
|
+
(0, import_react70.useEffect)(() => {
|
|
6886
7004
|
var _a;
|
|
6887
7005
|
if (filterVisibility) {
|
|
6888
7006
|
(_a = innerMenuRef.current) == null ? void 0 : _a.focus();
|
|
6889
7007
|
}
|
|
6890
7008
|
}, [filterVisibility]);
|
|
6891
|
-
return /* @__PURE__ */ (0,
|
|
7009
|
+
return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_design_system46.VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
|
|
6892
7010
|
SearchAndFilterOptionsContainer2,
|
|
6893
7011
|
{
|
|
6894
7012
|
buttonRow: menuControls,
|
|
6895
7013
|
additionalFiltersContainer,
|
|
6896
7014
|
children: [
|
|
6897
|
-
/* @__PURE__ */ (0,
|
|
6898
|
-
filterTitle ? /* @__PURE__ */ (0,
|
|
6899
|
-
(filters == null ? void 0 : filters.length) && resetButtonText ? /* @__PURE__ */ (0,
|
|
7015
|
+
/* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_design_system46.HorizontalRhythm, { gap: "sm", align: "center", justify: "space-between", children: [
|
|
7016
|
+
filterTitle ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }) : null,
|
|
7017
|
+
(filters == null ? void 0 : filters.length) && resetButtonText ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
|
|
6900
7018
|
"button",
|
|
6901
7019
|
{
|
|
6902
7020
|
type: "button",
|
|
@@ -7007,7 +7125,7 @@ function hasBindings(currentValue) {
|
|
|
7007
7125
|
}
|
|
7008
7126
|
|
|
7009
7127
|
// src/components/SearchAndFilter/FilterItems.tsx
|
|
7010
|
-
var
|
|
7128
|
+
var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
|
|
7011
7129
|
var FilterItems = ({
|
|
7012
7130
|
addButtonText = "add condition",
|
|
7013
7131
|
additionalFiltersContainer,
|
|
@@ -7044,12 +7162,12 @@ var FilterItems = ({
|
|
|
7044
7162
|
}
|
|
7045
7163
|
setFilters(next);
|
|
7046
7164
|
};
|
|
7047
|
-
return /* @__PURE__ */ (0,
|
|
7165
|
+
return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
7048
7166
|
FilterMenu,
|
|
7049
7167
|
{
|
|
7050
7168
|
id: "search-and-filter-options",
|
|
7051
7169
|
dataTestId: "search-and-filter-options",
|
|
7052
|
-
menuControls: /* @__PURE__ */ (0,
|
|
7170
|
+
menuControls: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
|
|
7053
7171
|
"button",
|
|
7054
7172
|
{
|
|
7055
7173
|
type: "button",
|
|
@@ -7057,7 +7175,7 @@ var FilterItems = ({
|
|
|
7057
7175
|
onClick: handleAddFilter,
|
|
7058
7176
|
"data-testid": "add-filter",
|
|
7059
7177
|
children: [
|
|
7060
|
-
/* @__PURE__ */ (0,
|
|
7178
|
+
/* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_design_system47.Icon, { icon: import_CgMathPlus.CgMathPlus, iconColor: "currentColor", size: "1rem" }),
|
|
7061
7179
|
addButtonText
|
|
7062
7180
|
]
|
|
7063
7181
|
}
|
|
@@ -7073,7 +7191,7 @@ var FilterItems = ({
|
|
|
7073
7191
|
})) == null ? void 0 : _a.options) != null ? _b : [];
|
|
7074
7192
|
const possibleValueOptions = (_d = (_c = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _c.valueOptions) != null ? _d : [];
|
|
7075
7193
|
const possibleOperators = (_f = (_e = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _e.operatorOptions) != null ? _f : [];
|
|
7076
|
-
return /* @__PURE__ */ (0,
|
|
7194
|
+
return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
7077
7195
|
FilterItem,
|
|
7078
7196
|
{
|
|
7079
7197
|
index: i,
|
|
@@ -7098,7 +7216,7 @@ var import_design_system49 = require("@uniformdev/design-system");
|
|
|
7098
7216
|
|
|
7099
7217
|
// src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
|
|
7100
7218
|
var import_design_system48 = require("@uniformdev/design-system");
|
|
7101
|
-
var
|
|
7219
|
+
var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
|
|
7102
7220
|
var SearchAndFilterResultContainer = ({
|
|
7103
7221
|
buttonText,
|
|
7104
7222
|
clearButtonLabel = "clear",
|
|
@@ -7107,7 +7225,7 @@ var SearchAndFilterResultContainer = ({
|
|
|
7107
7225
|
onHandleClear,
|
|
7108
7226
|
hideClearButton
|
|
7109
7227
|
}) => {
|
|
7110
|
-
const { searchTerm, totalResults, filters, handleResetFilters, setSearchTerm } = useSearchAndFilter();
|
|
7228
|
+
const { searchTerm, totalResults, filters, handleResetFilters, setSearchTerm, isLoading } = useSearchAndFilter();
|
|
7111
7229
|
const emptyFilters = filters.length === 0 || filters.every((filter) => !filter.value);
|
|
7112
7230
|
const getTextValue = ({
|
|
7113
7231
|
defaultPropText,
|
|
@@ -7138,7 +7256,7 @@ var SearchAndFilterResultContainer = ({
|
|
|
7138
7256
|
filterText: "No results match the selected filters",
|
|
7139
7257
|
fallbackText: "No matching results found"
|
|
7140
7258
|
});
|
|
7141
|
-
if (totalResults
|
|
7259
|
+
if (isLoading || totalResults === void 0 || totalResults > 0) {
|
|
7142
7260
|
return null;
|
|
7143
7261
|
}
|
|
7144
7262
|
const handleClearSearch = () => {
|
|
@@ -7149,18 +7267,18 @@ var SearchAndFilterResultContainer = ({
|
|
|
7149
7267
|
handleResetFilters();
|
|
7150
7268
|
}
|
|
7151
7269
|
};
|
|
7152
|
-
return /* @__PURE__ */ (0,
|
|
7153
|
-
/* @__PURE__ */ (0,
|
|
7154
|
-
/* @__PURE__ */ (0,
|
|
7270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
|
|
7271
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_design_system48.HorizontalRhythm, { children: [
|
|
7272
|
+
/* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { children: [
|
|
7155
7273
|
totalResults,
|
|
7156
7274
|
" results ",
|
|
7157
7275
|
searchTerm ? `for "${searchTerm}"` : null
|
|
7158
7276
|
] }),
|
|
7159
|
-
!searchTerm || hideClearButton ? null : /* @__PURE__ */ (0,
|
|
7277
|
+
!searchTerm || hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_design_system48.Button, { buttonType: "ghostDestructive", size: "zero", onClick: handleClearSearch, children: clearButtonLabel })
|
|
7160
7278
|
] }),
|
|
7161
|
-
totalResults === 0 ? /* @__PURE__ */ (0,
|
|
7162
|
-
calloutText ? /* @__PURE__ */ (0,
|
|
7163
|
-
hideClearButton ? null : /* @__PURE__ */ (0,
|
|
7279
|
+
totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_design_system48.Callout, { title: automateCalloutTitle, type: "note", children: [
|
|
7280
|
+
calloutText ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_design_system48.Paragraph, { children: calloutText }) : null,
|
|
7281
|
+
hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
|
|
7164
7282
|
import_design_system48.Button,
|
|
7165
7283
|
{
|
|
7166
7284
|
buttonType: "tertiaryOutline",
|
|
@@ -7175,25 +7293,26 @@ var SearchAndFilterResultContainer = ({
|
|
|
7175
7293
|
};
|
|
7176
7294
|
|
|
7177
7295
|
// src/components/SearchAndFilter/SearchAndFilter.tsx
|
|
7178
|
-
var
|
|
7296
|
+
var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
|
|
7179
7297
|
var SearchAndFilter = ({
|
|
7180
7298
|
filters,
|
|
7181
7299
|
filterOptions,
|
|
7182
7300
|
filterVisible,
|
|
7183
7301
|
filterControls,
|
|
7184
7302
|
viewSwitchControls,
|
|
7185
|
-
resultsContainerView = /* @__PURE__ */ (0,
|
|
7303
|
+
resultsContainerView = /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(SearchAndFilterResultContainer, {}),
|
|
7186
7304
|
filterMapper: filterMapper2 = filterMapper,
|
|
7187
7305
|
additionalFiltersContainer,
|
|
7188
7306
|
onChange,
|
|
7189
7307
|
defaultSearchTerm,
|
|
7190
7308
|
onSearchChange,
|
|
7191
7309
|
totalResults,
|
|
7310
|
+
isLoading,
|
|
7192
7311
|
allowBindingSearchTerm = false,
|
|
7193
7312
|
resetFilterValues = [],
|
|
7194
7313
|
onResetFilterValues
|
|
7195
7314
|
}) => {
|
|
7196
|
-
return /* @__PURE__ */ (0,
|
|
7315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
|
|
7197
7316
|
SearchAndFilterProvider,
|
|
7198
7317
|
{
|
|
7199
7318
|
filters,
|
|
@@ -7203,22 +7322,23 @@ var SearchAndFilter = ({
|
|
|
7203
7322
|
defaultSearchTerm,
|
|
7204
7323
|
onSearchChange,
|
|
7205
7324
|
totalResults,
|
|
7325
|
+
isLoading,
|
|
7206
7326
|
resetFilterValues,
|
|
7207
7327
|
filterMapper: filterMapper2,
|
|
7208
7328
|
allowBindingSearchTerm,
|
|
7209
7329
|
onResetFilterValues,
|
|
7210
|
-
children: /* @__PURE__ */ (0,
|
|
7211
|
-
/* @__PURE__ */ (0,
|
|
7212
|
-
/* @__PURE__ */ (0,
|
|
7330
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_design_system49.VerticalRhythm, { "data-testid": "search-and-filter", children: [
|
|
7331
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
|
|
7332
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
|
|
7213
7333
|
"div",
|
|
7214
7334
|
{
|
|
7215
7335
|
css: SearchAndFilterControlsWrapper(viewSwitchControls ? "auto 1fr 0.05fr" : "auto 1fr"),
|
|
7216
|
-
children: !filterControls ? /* @__PURE__ */ (0,
|
|
7336
|
+
children: !filterControls ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
|
|
7217
7337
|
}
|
|
7218
7338
|
),
|
|
7219
7339
|
viewSwitchControls
|
|
7220
7340
|
] }),
|
|
7221
|
-
/* @__PURE__ */ (0,
|
|
7341
|
+
/* @__PURE__ */ (0, import_jsx_runtime80.jsx)(FilterItems, { additionalFiltersContainer }),
|
|
7222
7342
|
resultsContainerView
|
|
7223
7343
|
] })
|
|
7224
7344
|
}
|
|
@@ -7227,17 +7347,17 @@ var SearchAndFilter = ({
|
|
|
7227
7347
|
|
|
7228
7348
|
// src/components/SearchAndFilter/SearchOnlyFilter.tsx
|
|
7229
7349
|
var import_design_system50 = require("@uniformdev/design-system");
|
|
7230
|
-
var
|
|
7350
|
+
var import_react71 = require("react");
|
|
7231
7351
|
var import_react_use8 = require("react-use");
|
|
7232
|
-
var
|
|
7233
|
-
var SearchOnlyContext = (0,
|
|
7352
|
+
var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
|
|
7353
|
+
var SearchOnlyContext = (0, import_react71.createContext)({
|
|
7234
7354
|
searchTerm: "",
|
|
7235
7355
|
setSearchTerm: () => {
|
|
7236
7356
|
}
|
|
7237
7357
|
});
|
|
7238
7358
|
var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
|
|
7239
7359
|
const { searchTerm, setSearchTerm } = useSearchAndFilter();
|
|
7240
|
-
const [localeSearchTerm, setLocaleSearchTerm] = (0,
|
|
7360
|
+
const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react71.useState)("");
|
|
7241
7361
|
(0, import_react_use8.useDebounce)(
|
|
7242
7362
|
() => {
|
|
7243
7363
|
setSearchTerm(localeSearchTerm);
|
|
@@ -7246,14 +7366,14 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
|
|
|
7246
7366
|
300,
|
|
7247
7367
|
[localeSearchTerm]
|
|
7248
7368
|
);
|
|
7249
|
-
return /* @__PURE__ */ (0,
|
|
7369
|
+
return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
|
|
7250
7370
|
SearchOnlyContext.Provider,
|
|
7251
7371
|
{
|
|
7252
7372
|
value: {
|
|
7253
7373
|
searchTerm,
|
|
7254
7374
|
setSearchTerm: setLocaleSearchTerm
|
|
7255
7375
|
},
|
|
7256
|
-
children: /* @__PURE__ */ (0,
|
|
7376
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
|
|
7257
7377
|
import_design_system50.InputKeywordSearch,
|
|
7258
7378
|
{
|
|
7259
7379
|
placeholder: "Search...",
|
|
@@ -7271,9 +7391,9 @@ var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
|
|
|
7271
7391
|
var import_design_system52 = require("@uniformdev/design-system");
|
|
7272
7392
|
|
|
7273
7393
|
// src/components/SearchAndFilter/styles/SortItems.styles.ts
|
|
7274
|
-
var
|
|
7394
|
+
var import_react72 = require("@emotion/react");
|
|
7275
7395
|
var import_design_system51 = require("@uniformdev/design-system");
|
|
7276
|
-
var ConditionalFilterRow2 =
|
|
7396
|
+
var ConditionalFilterRow2 = import_react72.css`
|
|
7277
7397
|
display: grid;
|
|
7278
7398
|
grid-template-columns: 35px 1fr;
|
|
7279
7399
|
gap: var(--spacing-sm);
|
|
@@ -7310,7 +7430,7 @@ var ConditionalFilterRow2 = import_react69.css`
|
|
|
7310
7430
|
animation: ${import_design_system51.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
|
|
7311
7431
|
}
|
|
7312
7432
|
`;
|
|
7313
|
-
var ConditionalInputRow2 =
|
|
7433
|
+
var ConditionalInputRow2 = import_react72.css`
|
|
7314
7434
|
display: flex;
|
|
7315
7435
|
gap: var(--spacing-sm);
|
|
7316
7436
|
flex-wrap: wrap;
|
|
@@ -7333,13 +7453,13 @@ var ConditionalInputRow2 = import_react69.css`
|
|
|
7333
7453
|
}
|
|
7334
7454
|
}
|
|
7335
7455
|
`;
|
|
7336
|
-
var SearchInput2 =
|
|
7456
|
+
var SearchInput2 = import_react72.css`
|
|
7337
7457
|
&& {
|
|
7338
7458
|
max-height: 40px;
|
|
7339
7459
|
min-height: unset;
|
|
7340
7460
|
}
|
|
7341
7461
|
`;
|
|
7342
|
-
var FilterButton3 =
|
|
7462
|
+
var FilterButton3 = import_react72.css`
|
|
7343
7463
|
align-items: center;
|
|
7344
7464
|
background: var(--white);
|
|
7345
7465
|
border: 1px solid var(--gray-300);
|
|
@@ -7376,13 +7496,13 @@ var FilterButton3 = import_react69.css`
|
|
|
7376
7496
|
opacity: var(--opacity-50);
|
|
7377
7497
|
}
|
|
7378
7498
|
`;
|
|
7379
|
-
var FilterButtonText2 =
|
|
7499
|
+
var FilterButtonText2 = import_react72.css`
|
|
7380
7500
|
overflow: hidden;
|
|
7381
7501
|
text-overflow: ellipsis;
|
|
7382
7502
|
white-space: nowrap;
|
|
7383
7503
|
max-width: 14ch;
|
|
7384
7504
|
`;
|
|
7385
|
-
var FilterButtonSelected2 =
|
|
7505
|
+
var FilterButtonSelected2 = import_react72.css`
|
|
7386
7506
|
background: var(--gray-100);
|
|
7387
7507
|
border-color: var(--gray-300);
|
|
7388
7508
|
|
|
@@ -7390,7 +7510,7 @@ var FilterButtonSelected2 = import_react69.css`
|
|
|
7390
7510
|
color: var(--accent-dark);
|
|
7391
7511
|
}
|
|
7392
7512
|
`;
|
|
7393
|
-
var FilterButtonWithOptions2 =
|
|
7513
|
+
var FilterButtonWithOptions2 = import_react72.css`
|
|
7394
7514
|
:where([aria-expanded='true']) {
|
|
7395
7515
|
background: var(--purple-rain-100);
|
|
7396
7516
|
border-color: var(--accent-light);
|
|
@@ -7402,14 +7522,14 @@ var FilterButtonWithOptions2 = import_react69.css`
|
|
|
7402
7522
|
}
|
|
7403
7523
|
}
|
|
7404
7524
|
`;
|
|
7405
|
-
var SearchIcon2 =
|
|
7525
|
+
var SearchIcon2 = import_react72.css`
|
|
7406
7526
|
color: var(--icon-color);
|
|
7407
7527
|
position: absolute;
|
|
7408
7528
|
inset: 0 var(--spacing-base) 0 auto;
|
|
7409
7529
|
margin: auto;
|
|
7410
7530
|
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
7411
7531
|
`;
|
|
7412
|
-
var AddConditionalBtn2 =
|
|
7532
|
+
var AddConditionalBtn2 = import_react72.css`
|
|
7413
7533
|
align-items: center;
|
|
7414
7534
|
background: transparent;
|
|
7415
7535
|
border: none;
|
|
@@ -7428,14 +7548,14 @@ var AddConditionalBtn2 = import_react69.css`
|
|
|
7428
7548
|
color: var(--gray-400);
|
|
7429
7549
|
}
|
|
7430
7550
|
`;
|
|
7431
|
-
var Title2 =
|
|
7551
|
+
var Title2 = import_react72.css`
|
|
7432
7552
|
color: var(--typography-light);
|
|
7433
7553
|
|
|
7434
7554
|
&:focus {
|
|
7435
7555
|
outline: none;
|
|
7436
7556
|
}
|
|
7437
7557
|
`;
|
|
7438
|
-
var ResetConditionsBtn2 =
|
|
7558
|
+
var ResetConditionsBtn2 = import_react72.css`
|
|
7439
7559
|
background: transparent;
|
|
7440
7560
|
border: none;
|
|
7441
7561
|
color: var(--action-destructive-default);
|
|
@@ -7447,12 +7567,12 @@ var ResetConditionsBtn2 = import_react69.css`
|
|
|
7447
7567
|
color: var(--action-destructive-hover);
|
|
7448
7568
|
}
|
|
7449
7569
|
`;
|
|
7450
|
-
var IconBtn2 =
|
|
7570
|
+
var IconBtn2 = import_react72.css`
|
|
7451
7571
|
background: transparent;
|
|
7452
7572
|
border: none;
|
|
7453
7573
|
padding: var(--spacing-sm);
|
|
7454
7574
|
`;
|
|
7455
|
-
var SearchAndFilterOptionsContainer3 =
|
|
7575
|
+
var SearchAndFilterOptionsContainer3 = import_react72.css`
|
|
7456
7576
|
background: var(--gray-50);
|
|
7457
7577
|
border: 1px solid var(--gray-300);
|
|
7458
7578
|
border-radius: var(--rounded-base);
|
|
@@ -7465,17 +7585,17 @@ var SearchAndFilterOptionsContainer3 = import_react69.css`
|
|
|
7465
7585
|
position: relative;
|
|
7466
7586
|
z-index: 1;
|
|
7467
7587
|
`;
|
|
7468
|
-
var SearchAndFilterOptionsInnerContainer2 =
|
|
7588
|
+
var SearchAndFilterOptionsInnerContainer2 = import_react72.css`
|
|
7469
7589
|
display: flex;
|
|
7470
7590
|
flex-direction: column;
|
|
7471
7591
|
gap: var(--spacing-sm);
|
|
7472
7592
|
padding-inline: var(--spacing-md);
|
|
7473
7593
|
`;
|
|
7474
|
-
var SearchAndFilterButtonGroup2 =
|
|
7594
|
+
var SearchAndFilterButtonGroup2 = import_react72.css`
|
|
7475
7595
|
margin-top: var(--spacing-xs);
|
|
7476
7596
|
margin-left: calc(56px + var(--spacing-md));
|
|
7477
7597
|
`;
|
|
7478
|
-
var SortFilterWrapper = (hiddenLocaleInput) =>
|
|
7598
|
+
var SortFilterWrapper = (hiddenLocaleInput) => import_react72.css`
|
|
7479
7599
|
align-items: center;
|
|
7480
7600
|
display: flex;
|
|
7481
7601
|
gap: var(--spacing-base);
|
|
@@ -7486,13 +7606,13 @@ var SortFilterWrapper = (hiddenLocaleInput) => import_react69.css`
|
|
|
7486
7606
|
grid-template-columns: ${hiddenLocaleInput ? "1fr" : "1fr minmax(140px, 0.25fr)"};
|
|
7487
7607
|
}
|
|
7488
7608
|
`;
|
|
7489
|
-
var SortFilterInputRow =
|
|
7609
|
+
var SortFilterInputRow = import_react72.css`
|
|
7490
7610
|
align-items: center;
|
|
7491
7611
|
display: grid;
|
|
7492
7612
|
grid-template-columns: 1fr auto;
|
|
7493
7613
|
gap: var(--spacing-base);
|
|
7494
7614
|
`;
|
|
7495
|
-
var InputVariableWrapper =
|
|
7615
|
+
var InputVariableWrapper = import_react72.css`
|
|
7496
7616
|
flex-grow: 1;
|
|
7497
7617
|
|
|
7498
7618
|
// we need to override label styles nested within the input variable
|
|
@@ -7503,7 +7623,7 @@ var InputVariableWrapper = import_react69.css`
|
|
|
7503
7623
|
`;
|
|
7504
7624
|
|
|
7505
7625
|
// src/components/SearchAndFilter/SortItems.tsx
|
|
7506
|
-
var
|
|
7626
|
+
var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
|
|
7507
7627
|
var SortItems = ({
|
|
7508
7628
|
sortByLabel = "Sort by",
|
|
7509
7629
|
localeLabel = "Show locale",
|
|
@@ -7525,11 +7645,11 @@ var SortItems = ({
|
|
|
7525
7645
|
return (_a2 = item.options) == null ? void 0 : _a2.find((option) => option.value === sortField);
|
|
7526
7646
|
})) == null ? void 0 : _a.options) == null ? void 0 : _b.find((nestedOption) => nestedOption.value === sortField);
|
|
7527
7647
|
const localeLabelValue = sortOptions.length > 1 ? localeLabel : `${localeLabel}s`;
|
|
7528
|
-
return /* @__PURE__ */ (0,
|
|
7529
|
-
/* @__PURE__ */ (0,
|
|
7530
|
-
/* @__PURE__ */ (0,
|
|
7531
|
-
/* @__PURE__ */ (0,
|
|
7532
|
-
/* @__PURE__ */ (0,
|
|
7648
|
+
return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
|
|
7649
|
+
/* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_design_system52.VerticalRhythm, { gap: "xs", children: [
|
|
7650
|
+
/* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { css: Title2, children: sortByLabel }),
|
|
7651
|
+
/* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { css: SortFilterInputRow, children: [
|
|
7652
|
+
/* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
|
|
7533
7653
|
InputVariables,
|
|
7534
7654
|
{
|
|
7535
7655
|
disableInlineMenu: disableSortBinding,
|
|
@@ -7537,7 +7657,7 @@ var SortItems = ({
|
|
|
7537
7657
|
value: sortField,
|
|
7538
7658
|
valueToResetTo: "created_at",
|
|
7539
7659
|
onChange: (e) => onSortChange(`${e}_${sortDirection}`),
|
|
7540
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
7660
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
|
|
7541
7661
|
import_design_system52.InputComboBox,
|
|
7542
7662
|
{
|
|
7543
7663
|
id: "sort-by-field",
|
|
@@ -7560,7 +7680,7 @@ var SortItems = ({
|
|
|
7560
7680
|
)
|
|
7561
7681
|
}
|
|
7562
7682
|
),
|
|
7563
|
-
/* @__PURE__ */ (0,
|
|
7683
|
+
/* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
|
|
7564
7684
|
InputVariables,
|
|
7565
7685
|
{
|
|
7566
7686
|
disableInlineMenu: disableSortBinding,
|
|
@@ -7568,7 +7688,7 @@ var SortItems = ({
|
|
|
7568
7688
|
valueToResetTo: "DESC",
|
|
7569
7689
|
showMenuPosition: disableSortBinding ? void 0 : "inline-right",
|
|
7570
7690
|
onChange: (e) => onSortChange(`${sortField}_${e}`),
|
|
7571
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
7691
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
|
|
7572
7692
|
import_design_system52.SegmentedControl,
|
|
7573
7693
|
{
|
|
7574
7694
|
noCheckmark: true,
|
|
@@ -7600,14 +7720,14 @@ var SortItems = ({
|
|
|
7600
7720
|
)
|
|
7601
7721
|
] })
|
|
7602
7722
|
] }),
|
|
7603
|
-
hideLocaleOptions ? null : /* @__PURE__ */ (0,
|
|
7723
|
+
hideLocaleOptions ? null : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_design_system52.VerticalRhythm, { gap: "xs", css: InputVariableWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
|
|
7604
7724
|
InputVariables,
|
|
7605
7725
|
{
|
|
7606
7726
|
label: localeLabelValue,
|
|
7607
7727
|
value: localeValue,
|
|
7608
7728
|
showMenuPosition: "inline-right",
|
|
7609
7729
|
onChange: (e) => onLocaleChange(e != null ? e : ""),
|
|
7610
|
-
inputWhenNoVariables: /* @__PURE__ */ (0,
|
|
7730
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
|
|
7611
7731
|
import_design_system52.InputSelect,
|
|
7612
7732
|
{
|
|
7613
7733
|
name: "localeReturned",
|
|
@@ -7638,7 +7758,7 @@ function createLocationValidator(setValue, validate) {
|
|
|
7638
7758
|
|
|
7639
7759
|
// src/utils/useContentDataResourceLocaleInfo.ts
|
|
7640
7760
|
var import_canvas12 = require("@uniformdev/canvas");
|
|
7641
|
-
var
|
|
7761
|
+
var import_react73 = require("react");
|
|
7642
7762
|
function useContentDataResourceLocaleInfo({
|
|
7643
7763
|
locale,
|
|
7644
7764
|
defaultLocale,
|
|
@@ -7646,12 +7766,12 @@ function useContentDataResourceLocaleInfo({
|
|
|
7646
7766
|
dynamicInputs
|
|
7647
7767
|
}) {
|
|
7648
7768
|
var _a;
|
|
7649
|
-
const setLocaleRef = (0,
|
|
7769
|
+
const setLocaleRef = (0, import_react73.useRef)(setLocale);
|
|
7650
7770
|
setLocaleRef.current = setLocale;
|
|
7651
7771
|
const { flatVariables } = useVariables();
|
|
7652
7772
|
const effectiveLocale = locale != null ? locale : dynamicInputs[import_canvas12.LOCALE_DYNAMIC_INPUT_NAME] ? (0, import_canvas12.createVariableReference)(import_canvas12.LOCALE_DYNAMIC_INPUT_NAME) : defaultLocale != null ? defaultLocale : "";
|
|
7653
7773
|
const boundLocale = (_a = (0, import_canvas12.bindVariables)({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
|
|
7654
|
-
(0,
|
|
7774
|
+
(0, import_react73.useEffect)(() => {
|
|
7655
7775
|
if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
|
|
7656
7776
|
setLocaleRef.current(effectiveLocale);
|
|
7657
7777
|
}
|
|
@@ -7682,6 +7802,9 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
|
7682
7802
|
DataTypeEditor,
|
|
7683
7803
|
DateEditor,
|
|
7684
7804
|
DateRangeEditor,
|
|
7805
|
+
DelegationContext,
|
|
7806
|
+
DelegationGate,
|
|
7807
|
+
DelegationProvider,
|
|
7685
7808
|
DrawerContent,
|
|
7686
7809
|
EDIT_VARIABLE_COMMAND,
|
|
7687
7810
|
FilterButton,
|
|
@@ -7794,6 +7917,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
|
7794
7917
|
urlEncodeRequestUrl,
|
|
7795
7918
|
useConnectedDataAsVariables,
|
|
7796
7919
|
useContentDataResourceLocaleInfo,
|
|
7920
|
+
useDelegation,
|
|
7797
7921
|
useDynamicInputsAsVariables,
|
|
7798
7922
|
useMeshLocation,
|
|
7799
7923
|
useObjectSearchContext,
|