@uniformdev/mesh-sdk-react 19.134.3-alpha.28 → 19.135.1-alpha.9
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 +622 -86
- package/dist/index.d.ts +622 -86
- package/dist/index.esm.js +2741 -467
- package/dist/index.js +2814 -506
- package/dist/index.mjs +2741 -467
- package/package.json +6 -6
package/dist/index.mjs
CHANGED
|
@@ -2652,6 +2652,9 @@ function DefaultDamItemRenderer({ item }) {
|
|
|
2652
2652
|
] }) : null;
|
|
2653
2653
|
}
|
|
2654
2654
|
|
|
2655
|
+
// src/components/DataResourceDynamicInputProvider.tsx
|
|
2656
|
+
import { createContext as createContext4, useContext as useContext6 } from "react";
|
|
2657
|
+
|
|
2655
2658
|
// src/hooks/useConnectedDataAsVariables.tsx
|
|
2656
2659
|
import { useMemo as useMemo3 } from "react";
|
|
2657
2660
|
function useConnectedDataAsVariables(connectedData) {
|
|
@@ -2945,15 +2948,16 @@ import {
|
|
|
2945
2948
|
KEY_BACKSPACE_COMMAND,
|
|
2946
2949
|
KEY_DELETE_COMMAND
|
|
2947
2950
|
} from "lexical";
|
|
2948
|
-
import { useCallback as useCallback3, useEffect as
|
|
2951
|
+
import { useCallback as useCallback3, useEffect as useEffect9 } from "react";
|
|
2949
2952
|
|
|
2950
2953
|
// src/components/Variables/util/prettifyBindExpression.tsx
|
|
2951
2954
|
function prettifyBindExpression(bindExpression) {
|
|
2952
|
-
|
|
2955
|
+
const [, expression] = bindExpression.split(":");
|
|
2956
|
+
return expression;
|
|
2953
2957
|
}
|
|
2954
2958
|
|
|
2955
2959
|
// src/components/Variables/composer/VariableChip.tsx
|
|
2956
|
-
import { MultilineChip } from "@uniformdev/design-system";
|
|
2960
|
+
import { MultilineChip, Tooltip, VerticalRhythm } from "@uniformdev/design-system";
|
|
2957
2961
|
import { Fragment as Fragment5 } from "react";
|
|
2958
2962
|
import { jsx as jsx30 } from "@emotion/react/jsx-runtime";
|
|
2959
2963
|
function VariableChip({
|
|
@@ -2969,42 +2973,58 @@ function VariableChip({
|
|
|
2969
2973
|
}) {
|
|
2970
2974
|
const hasClickEvent = !!onClick;
|
|
2971
2975
|
const referenceIsValidFr = isFresh ? true : referenceIsValid;
|
|
2972
|
-
const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? Fragment5 : UndefinedVariableReference;
|
|
2976
|
+
const Wrapper = referenceIsValidFr === "warning" ? WarningVariableReference : referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? Fragment5 : UndefinedVariableReference;
|
|
2973
2977
|
const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
|
|
2978
|
+
const chippy = /* @__PURE__ */ jsx30(MultilineChip, { onClick, "aria-selected": selected ? true : void 0, "aria-disabled": disabled, children: /* @__PURE__ */ jsx30(Wrapper, { children: displayName || reference }) });
|
|
2979
|
+
if (tooltip) {
|
|
2980
|
+
const tip = tooltip ? `${tooltip}${extraTitle ? `
|
|
2981
|
+
|
|
2982
|
+
${extraTitle}` : ""}` : extraTitle != null ? extraTitle : "";
|
|
2983
|
+
const tipLines = tip.split("\n");
|
|
2984
|
+
return /* @__PURE__ */ jsx30(
|
|
2985
|
+
Tooltip,
|
|
2986
|
+
{
|
|
2987
|
+
title: /* @__PURE__ */ jsx30(VerticalRhythm, { gap: "sm", children: tipLines.map((t, index) => /* @__PURE__ */ jsx30("div", { children: t }, index)) }),
|
|
2988
|
+
children: /* @__PURE__ */ jsx30("span", { children: chippy })
|
|
2989
|
+
}
|
|
2990
|
+
);
|
|
2991
|
+
}
|
|
2992
|
+
return chippy;
|
|
2993
|
+
}
|
|
2994
|
+
function UndefinedVariableReference({ children }) {
|
|
2974
2995
|
return /* @__PURE__ */ jsx30(
|
|
2975
|
-
|
|
2996
|
+
"span",
|
|
2976
2997
|
{
|
|
2977
|
-
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
children: /* @__PURE__ */ jsx30(Wrapper, { children: displayName || reference })
|
|
2998
|
+
style: {
|
|
2999
|
+
textDecoration: "underline",
|
|
3000
|
+
textDecorationStyle: "wavy",
|
|
3001
|
+
textDecorationColor: "var(--error)"
|
|
3002
|
+
},
|
|
3003
|
+
children
|
|
2984
3004
|
}
|
|
2985
3005
|
);
|
|
2986
3006
|
}
|
|
2987
|
-
function
|
|
3007
|
+
function InfoVariableReference({ children }) {
|
|
2988
3008
|
return /* @__PURE__ */ jsx30(
|
|
2989
3009
|
"span",
|
|
2990
3010
|
{
|
|
2991
3011
|
style: {
|
|
2992
3012
|
textDecoration: "underline",
|
|
2993
3013
|
textDecorationStyle: "wavy",
|
|
2994
|
-
textDecorationColor: "
|
|
3014
|
+
textDecorationColor: "var(--primary-action-default)"
|
|
2995
3015
|
},
|
|
2996
3016
|
children
|
|
2997
3017
|
}
|
|
2998
3018
|
);
|
|
2999
3019
|
}
|
|
3000
|
-
function
|
|
3020
|
+
function WarningVariableReference({ children }) {
|
|
3001
3021
|
return /* @__PURE__ */ jsx30(
|
|
3002
3022
|
"span",
|
|
3003
3023
|
{
|
|
3004
3024
|
style: {
|
|
3005
3025
|
textDecoration: "underline",
|
|
3006
3026
|
textDecorationStyle: "wavy",
|
|
3007
|
-
textDecorationColor: "
|
|
3027
|
+
textDecorationColor: "var(--alert)"
|
|
3008
3028
|
},
|
|
3009
3029
|
children
|
|
3010
3030
|
}
|
|
@@ -3034,7 +3054,7 @@ import {
|
|
|
3034
3054
|
COMMAND_PRIORITY_NORMAL,
|
|
3035
3055
|
createCommand
|
|
3036
3056
|
} from "lexical";
|
|
3037
|
-
import { useCallback as useCallback2, useEffect as
|
|
3057
|
+
import { useCallback as useCallback2, useEffect as useEffect8, useMemo as useMemo8, useRef as useRef10, useState as useState10 } from "react";
|
|
3038
3058
|
import { createPortal } from "react-dom";
|
|
3039
3059
|
|
|
3040
3060
|
// src/components/Variables/toolbox/SelectVariableMenu.styles.ts
|
|
@@ -3068,7 +3088,7 @@ var variablesTipText = css18`
|
|
|
3068
3088
|
|
|
3069
3089
|
// src/components/Variables/VariablesProvider.tsx
|
|
3070
3090
|
import mitt from "mitt";
|
|
3071
|
-
import { createContext as createContext3, useContext as useContext5, useMemo as useMemo7, useState as useState9 } from "react";
|
|
3091
|
+
import { createContext as createContext3, useContext as useContext5, useEffect as useEffect7, useMemo as useMemo7, useState as useState9 } from "react";
|
|
3072
3092
|
|
|
3073
3093
|
// src/components/Variables/util/useVariableEditTransaction.ts
|
|
3074
3094
|
import { useCallback, useEffect as useEffect6, useState as useState8 } from "react";
|
|
@@ -3265,7 +3285,8 @@ function VariablesProvider({
|
|
|
3265
3285
|
readOnly,
|
|
3266
3286
|
isLoading,
|
|
3267
3287
|
children,
|
|
3268
|
-
knownUndefinedValues = {}
|
|
3288
|
+
knownUndefinedValues = {},
|
|
3289
|
+
onChangeKnownUndefinedValue
|
|
3269
3290
|
}) {
|
|
3270
3291
|
const [editing, setEditing] = useState9();
|
|
3271
3292
|
const [editingContext, setEditingContext] = useState9();
|
|
@@ -3332,6 +3353,15 @@ function VariablesProvider({
|
|
|
3332
3353
|
isLoading: !!isLoading
|
|
3333
3354
|
};
|
|
3334
3355
|
}, [valueBasedContextValue, editVariableTxn, editing, events, knownUndefinedValues, isLoading]);
|
|
3356
|
+
useEffect7(() => {
|
|
3357
|
+
if (editing === void 0) {
|
|
3358
|
+
return;
|
|
3359
|
+
}
|
|
3360
|
+
const activeElement = document.activeElement;
|
|
3361
|
+
if (activeElement && "blur" in activeElement && typeof activeElement.blur === "function") {
|
|
3362
|
+
activeElement.blur();
|
|
3363
|
+
}
|
|
3364
|
+
}, [editing]);
|
|
3335
3365
|
return /* @__PURE__ */ jsxs17(VariablesContext.Provider, { value: contextValue, children: [
|
|
3336
3366
|
children,
|
|
3337
3367
|
typeof editing !== "undefined" ? /* @__PURE__ */ jsx32(
|
|
@@ -3340,9 +3370,19 @@ function VariablesProvider({
|
|
|
3340
3370
|
context: editingContext,
|
|
3341
3371
|
onSubmit: (val, editorCompletedContext) => {
|
|
3342
3372
|
contextValue.dispatch({ type: "cancelEdit" });
|
|
3343
|
-
|
|
3344
|
-
|
|
3345
|
-
|
|
3373
|
+
if ("resultType" in val) {
|
|
3374
|
+
if (!onChangeKnownUndefinedValue) {
|
|
3375
|
+
throw new Error(
|
|
3376
|
+
"onChangeKnownUndefinedValue must be provided to handle known-undefined-value results"
|
|
3377
|
+
);
|
|
3378
|
+
}
|
|
3379
|
+
const { name, ...kuv } = val;
|
|
3380
|
+
onChangeKnownUndefinedValue(val.name, kuv);
|
|
3381
|
+
} else {
|
|
3382
|
+
const { name, ...varValue } = val;
|
|
3383
|
+
const latestValue = { ...value, [name]: varValue };
|
|
3384
|
+
onChange == null ? void 0 : onChange(latestValue);
|
|
3385
|
+
}
|
|
3346
3386
|
events.emit("editCompleted", {
|
|
3347
3387
|
canceled: false,
|
|
3348
3388
|
selectedVariable: val,
|
|
@@ -3625,7 +3665,7 @@ function VariablesPlugin({
|
|
|
3625
3665
|
},
|
|
3626
3666
|
[editor, onSelect, queryString, replaceValueOnVariableInsert]
|
|
3627
3667
|
);
|
|
3628
|
-
|
|
3668
|
+
useEffect8(() => {
|
|
3629
3669
|
return mergeRegister(
|
|
3630
3670
|
editor.registerCommand(
|
|
3631
3671
|
EDIT_VARIABLE_COMMAND,
|
|
@@ -3757,21 +3797,21 @@ function VariablesPlugin({
|
|
|
3757
3797
|
]);
|
|
3758
3798
|
const updateExistingNodeIfChanged = useCallback2(
|
|
3759
3799
|
(variableNode) => {
|
|
3760
|
-
var _a, _b, _c;
|
|
3800
|
+
var _a, _b, _c, _d;
|
|
3761
3801
|
const targetVar = variablesRef.current.variables[variableNode.reference];
|
|
3762
3802
|
const targetUndefinedVar = variablesRef.current.knownUndefinedValues[variableNode.reference];
|
|
3763
3803
|
const isLoadingVariables = variablesRef.current.isLoading;
|
|
3764
3804
|
const currentState = variableNode.getState();
|
|
3765
|
-
if (currentState.isFresh && !targetVar) {
|
|
3805
|
+
if (currentState.isFresh && !targetVar && !targetUndefinedVar) {
|
|
3766
3806
|
return;
|
|
3767
3807
|
}
|
|
3768
|
-
const tooltip = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
|
|
3808
|
+
const tooltip = (_d = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) != null ? _d : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
|
|
3769
3809
|
const newState = {
|
|
3770
3810
|
...currentState,
|
|
3771
3811
|
displayName: (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || variableNode.reference,
|
|
3772
3812
|
isLoading: isLoadingVariables && !targetVar && !(targetUndefinedVar == null ? void 0 : targetUndefinedVar.info),
|
|
3773
3813
|
hasClickEvent: canEditVariable(variableNode.reference, targetVar),
|
|
3774
|
-
referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : isLoadingVariables ? true : Boolean(targetVar),
|
|
3814
|
+
referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) ? false : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) ? "warning" : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : isLoadingVariables ? true : Boolean(targetVar),
|
|
3775
3815
|
tooltip,
|
|
3776
3816
|
isFresh: false
|
|
3777
3817
|
};
|
|
@@ -3781,14 +3821,14 @@ function VariablesPlugin({
|
|
|
3781
3821
|
},
|
|
3782
3822
|
[canEditVariable]
|
|
3783
3823
|
);
|
|
3784
|
-
|
|
3824
|
+
useEffect8(() => {
|
|
3785
3825
|
editor.update(() => {
|
|
3786
3826
|
$nodesOfType2(VariableNode).forEach((variableNode) => {
|
|
3787
3827
|
updateExistingNodeIfChanged(variableNode);
|
|
3788
3828
|
});
|
|
3789
3829
|
});
|
|
3790
|
-
}, [editor, variables, canEditVariable, updateExistingNodeIfChanged]);
|
|
3791
|
-
|
|
3830
|
+
}, [editor, variables, knownUndefinedValues, canEditVariable, updateExistingNodeIfChanged]);
|
|
3831
|
+
useEffect8(() => {
|
|
3792
3832
|
return editor.registerNodeTransform(VariableNode, (variableNode) => {
|
|
3793
3833
|
updateExistingNodeIfChanged(variableNode);
|
|
3794
3834
|
});
|
|
@@ -3967,7 +4007,7 @@ function VariableNodeComponent({
|
|
|
3967
4007
|
},
|
|
3968
4008
|
[isSelected, nodeKey]
|
|
3969
4009
|
);
|
|
3970
|
-
|
|
4010
|
+
useEffect9(() => {
|
|
3971
4011
|
return mergeRegister2(
|
|
3972
4012
|
editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
|
|
3973
4013
|
editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
|
|
@@ -4084,10 +4124,10 @@ function EditorRefPlugin({
|
|
|
4084
4124
|
import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
|
|
4085
4125
|
import { mergeRegister as mergeRegister3 } from "@lexical/utils";
|
|
4086
4126
|
import { $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection2, COMMAND_PRIORITY_HIGH, PASTE_COMMAND } from "lexical";
|
|
4087
|
-
import { useEffect as
|
|
4127
|
+
import { useEffect as useEffect10 } from "react";
|
|
4088
4128
|
function PasteTransformerPlugin({ transformPaste }) {
|
|
4089
4129
|
const [editor] = useLexicalComposerContext5();
|
|
4090
|
-
|
|
4130
|
+
useEffect10(() => {
|
|
4091
4131
|
return mergeRegister3(
|
|
4092
4132
|
editor.registerCommand(
|
|
4093
4133
|
PASTE_COMMAND,
|
|
@@ -4168,6 +4208,7 @@ var input = css21`
|
|
|
4168
4208
|
var inputCompact = css21`
|
|
4169
4209
|
border: 1px solid var(--white);
|
|
4170
4210
|
padding-block: var(--spacing-sm);
|
|
4211
|
+
min-height: 39px;
|
|
4171
4212
|
font-size: var(--fs-sm);
|
|
4172
4213
|
`;
|
|
4173
4214
|
var inputDisabled = css21`
|
|
@@ -4177,14 +4218,14 @@ var inputDisabled = css21`
|
|
|
4177
4218
|
var placeholderCaption = css21`
|
|
4178
4219
|
position: absolute;
|
|
4179
4220
|
color: var(--gray-400);
|
|
4180
|
-
inset: var(--spacing-base)
|
|
4221
|
+
inset: 12px var(--spacing-base) 12px var(--spacing-sm);
|
|
4181
4222
|
overflow: hidden;
|
|
4182
4223
|
text-overflow: ellipsis;
|
|
4183
4224
|
white-space: nowrap;
|
|
4184
4225
|
pointer-events: none;
|
|
4185
4226
|
`;
|
|
4186
4227
|
var placeholderCompact = css21`
|
|
4187
|
-
inset: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-
|
|
4228
|
+
inset: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
|
|
4188
4229
|
`;
|
|
4189
4230
|
|
|
4190
4231
|
// src/components/Variables/styles/ParameterVariables.styles.ts
|
|
@@ -4525,14 +4566,14 @@ function VariableField({
|
|
|
4525
4566
|
}) {
|
|
4526
4567
|
const { variables } = useVariables(true);
|
|
4527
4568
|
const varCount = Object.keys(variables).length;
|
|
4528
|
-
const variableSelector = (varCount > 0 || (selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.showAddVariableMenuOption)) && !disableVariables ? /* @__PURE__ */ jsx37(
|
|
4569
|
+
const variableSelector = (varCount > 0 || (selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.showAddVariableMenuOption)) && !disableVariables ? /* @__PURE__ */ jsx37("div", { "data-testid": "label-var-menu", children: /* @__PURE__ */ jsx37(
|
|
4529
4570
|
VariablesComposerVariableMenu,
|
|
4530
4571
|
{
|
|
4531
4572
|
...selectVariableMenuOptions,
|
|
4532
4573
|
buttonCss: [variableBindButton2, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
|
|
4533
4574
|
buttonProps: isActive ? { "aria-pressed": "true" } : void 0
|
|
4534
4575
|
}
|
|
4535
|
-
) : null;
|
|
4576
|
+
) }) : null;
|
|
4536
4577
|
return /* @__PURE__ */ jsxs20("div", { "data-testid": "variable-field", children: [
|
|
4537
4578
|
/* @__PURE__ */ jsxs20("label", { htmlFor: id, css: labelText, "data-testid": "field-name", children: [
|
|
4538
4579
|
variableSelector,
|
|
@@ -4551,10 +4592,10 @@ import { useMemo as useMemo10, useRef as useRef12, useState as useState12 } from
|
|
|
4551
4592
|
|
|
4552
4593
|
// src/components/Variables/composer/DisablePlugin.tsx
|
|
4553
4594
|
import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
|
|
4554
|
-
import { useEffect as
|
|
4595
|
+
import { useEffect as useEffect12 } from "react";
|
|
4555
4596
|
function DisablePlugin({ disabled }) {
|
|
4556
4597
|
const [editor] = useLexicalComposerContext7();
|
|
4557
|
-
|
|
4598
|
+
useEffect12(() => {
|
|
4558
4599
|
editor.setEditable(!disabled);
|
|
4559
4600
|
}, [editor, disabled]);
|
|
4560
4601
|
return null;
|
|
@@ -4563,10 +4604,10 @@ function DisablePlugin({ disabled }) {
|
|
|
4563
4604
|
// src/components/Variables/composer/SingleLineTextPlugin.tsx
|
|
4564
4605
|
import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
|
|
4565
4606
|
import { LineBreakNode } from "lexical";
|
|
4566
|
-
import { useEffect as
|
|
4607
|
+
import { useEffect as useEffect13 } from "react";
|
|
4567
4608
|
function SingleLineTextPlugin() {
|
|
4568
4609
|
const [editor] = useLexicalComposerContext8();
|
|
4569
|
-
|
|
4610
|
+
useEffect13(() => {
|
|
4570
4611
|
editor.registerNodeTransform(LineBreakNode, (node) => {
|
|
4571
4612
|
node.remove();
|
|
4572
4613
|
});
|
|
@@ -4688,10 +4729,10 @@ import {
|
|
|
4688
4729
|
CUT_COMMAND,
|
|
4689
4730
|
PASTE_COMMAND as PASTE_COMMAND2
|
|
4690
4731
|
} from "lexical";
|
|
4691
|
-
import { useEffect as
|
|
4732
|
+
import { useEffect as useEffect14 } from "react";
|
|
4692
4733
|
import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
|
|
4693
4734
|
function VariablesComposerInput({
|
|
4694
|
-
css:
|
|
4735
|
+
css: css40,
|
|
4695
4736
|
placeholder,
|
|
4696
4737
|
...contentEditableProps
|
|
4697
4738
|
}) {
|
|
@@ -4710,7 +4751,7 @@ function VariablesComposerInput({
|
|
|
4710
4751
|
}
|
|
4711
4752
|
function RichishCopyAndPastePlugin() {
|
|
4712
4753
|
const [editor] = useLexicalComposerContext9();
|
|
4713
|
-
|
|
4754
|
+
useEffect14(() => {
|
|
4714
4755
|
return mergeRegister4(
|
|
4715
4756
|
editor.registerCommand(
|
|
4716
4757
|
COPY_COMMAND,
|
|
@@ -4812,7 +4853,8 @@ function InputVariables(props) {
|
|
|
4812
4853
|
editorRef,
|
|
4813
4854
|
filterVariable,
|
|
4814
4855
|
styleVariant = "default",
|
|
4815
|
-
renderMenuInPortal
|
|
4856
|
+
renderMenuInPortal,
|
|
4857
|
+
disableDismissEditorOnChange
|
|
4816
4858
|
} = props;
|
|
4817
4859
|
const [finalId] = useState13(id != null ? id : () => v42());
|
|
4818
4860
|
const { dispatch, canDispatch, isEditing } = useVariables(true);
|
|
@@ -4822,7 +4864,7 @@ function InputVariables(props) {
|
|
|
4822
4864
|
"div",
|
|
4823
4865
|
{
|
|
4824
4866
|
onKeyDown: () => {
|
|
4825
|
-
if (isEditing && canDispatch) {
|
|
4867
|
+
if (!disableDismissEditorOnChange && isEditing && canDispatch) {
|
|
4826
4868
|
dispatch({ type: "cancelEdit" });
|
|
4827
4869
|
}
|
|
4828
4870
|
},
|
|
@@ -4834,6 +4876,7 @@ function InputVariables(props) {
|
|
|
4834
4876
|
align: "center",
|
|
4835
4877
|
gap: "xs",
|
|
4836
4878
|
css: css24`
|
|
4879
|
+
position: relative;
|
|
4837
4880
|
& > div:first-child {
|
|
4838
4881
|
flex-grow: 1;
|
|
4839
4882
|
}
|
|
@@ -4901,7 +4944,7 @@ function InputVariables(props) {
|
|
|
4901
4944
|
},
|
|
4902
4945
|
id: finalId,
|
|
4903
4946
|
isActive: hadVariablesInValue,
|
|
4904
|
-
disableVariables: disableVariablesForReals || showMenuPosition && showMenuPosition !== "label" || disableInlineMenu ===
|
|
4947
|
+
disableVariables: disableVariablesForReals || showMenuPosition && showMenuPosition !== "label" || disableInlineMenu === "by-label",
|
|
4905
4948
|
children: input3
|
|
4906
4949
|
}
|
|
4907
4950
|
);
|
|
@@ -4939,7 +4982,7 @@ function InputVariablesOverlayMenu({
|
|
|
4939
4982
|
if (disabled) {
|
|
4940
4983
|
return /* @__PURE__ */ jsx40(Fragment10, { children });
|
|
4941
4984
|
}
|
|
4942
|
-
return /* @__PURE__ */ jsxs23("div", { css: menuContainer, children: [
|
|
4985
|
+
return /* @__PURE__ */ jsxs23("div", { css: menuContainer, "data-testid": "inline-var-menu", children: [
|
|
4943
4986
|
children,
|
|
4944
4987
|
/* @__PURE__ */ jsx40(
|
|
4945
4988
|
VariablesComposerVariableMenu,
|
|
@@ -4964,7 +5007,8 @@ function ParameterConnectionIndicator({
|
|
|
4964
5007
|
value,
|
|
4965
5008
|
menuOptions,
|
|
4966
5009
|
disabled,
|
|
4967
|
-
menuTooltip = "Insert variable"
|
|
5010
|
+
menuTooltip = "Insert variable",
|
|
5011
|
+
overrideMenuButtonParentMargin
|
|
4968
5012
|
}) {
|
|
4969
5013
|
const hasVariablesInValue = useMemo11(() => {
|
|
4970
5014
|
let result = false;
|
|
@@ -4985,13 +5029,21 @@ function ParameterConnectionIndicator({
|
|
|
4985
5029
|
placement: "bottom-start",
|
|
4986
5030
|
withoutPortal: true,
|
|
4987
5031
|
menuTrigger: /* @__PURE__ */ jsx41(
|
|
4988
|
-
"
|
|
5032
|
+
"div",
|
|
4989
5033
|
{
|
|
4990
|
-
|
|
4991
|
-
|
|
4992
|
-
|
|
4993
|
-
|
|
4994
|
-
|
|
5034
|
+
css: overrideMenuButtonParentMargin ? {
|
|
5035
|
+
marginBottom: overrideMenuButtonParentMargin
|
|
5036
|
+
} : void 0,
|
|
5037
|
+
children: /* @__PURE__ */ jsx41(
|
|
5038
|
+
"button",
|
|
5039
|
+
{
|
|
5040
|
+
title: menuTooltip,
|
|
5041
|
+
"aria-pressed": hasVariablesInValue,
|
|
5042
|
+
css: [menuBtn, variableBindButton],
|
|
5043
|
+
type: "button",
|
|
5044
|
+
children: /* @__PURE__ */ jsx41(CgUsbC2, { size: "1.4rem" })
|
|
5045
|
+
}
|
|
5046
|
+
)
|
|
4995
5047
|
}
|
|
4996
5048
|
),
|
|
4997
5049
|
menuLabel: menuTooltip,
|
|
@@ -5009,7 +5061,7 @@ import { useCallback as useCallback4 } from "react";
|
|
|
5009
5061
|
import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
|
|
5010
5062
|
import { mergeRegister as mergeRegister5 } from "@lexical/utils";
|
|
5011
5063
|
import { $getNodeByKey as $getNodeByKey3, COMMAND_PRIORITY_HIGH as COMMAND_PRIORITY_HIGH3 } from "lexical";
|
|
5012
|
-
import { useEffect as
|
|
5064
|
+
import { useEffect as useEffect15, useRef as useRef13 } from "react";
|
|
5013
5065
|
function OnDisconnectPlugin({
|
|
5014
5066
|
onDisconnect
|
|
5015
5067
|
}) {
|
|
@@ -5017,7 +5069,7 @@ function OnDisconnectPlugin({
|
|
|
5017
5069
|
const { variables } = useVariables(true);
|
|
5018
5070
|
const variablesRef = useRef13(variables);
|
|
5019
5071
|
variablesRef.current = variables;
|
|
5020
|
-
|
|
5072
|
+
useEffect15(() => {
|
|
5021
5073
|
return mergeRegister5(
|
|
5022
5074
|
editor.registerCommand(
|
|
5023
5075
|
DISCONNECT_VARIABLE_COMMAND,
|
|
@@ -5154,19 +5206,17 @@ function ParameterVariables(props) {
|
|
|
5154
5206
|
children: [
|
|
5155
5207
|
editorRef ? /* @__PURE__ */ jsx43(EditorRefPlugin, { editorRef }) : null,
|
|
5156
5208
|
/* @__PURE__ */ jsx43(ControlledValuePlugin, { value, enabled: useInputWhenNoVariables }),
|
|
5157
|
-
/* @__PURE__ */ jsxs26(
|
|
5158
|
-
|
|
5159
|
-
|
|
5160
|
-
|
|
5161
|
-
|
|
5162
|
-
|
|
5163
|
-
|
|
5164
|
-
|
|
5165
|
-
|
|
5166
|
-
}
|
|
5167
|
-
|
|
5168
|
-
children: [
|
|
5169
|
-
/* @__PURE__ */ jsx43("div", { css: { flex: 1 }, children: useInputWhenNoVariables ? inputWhenNoVariables : /* @__PURE__ */ jsx43(
|
|
5209
|
+
/* @__PURE__ */ jsxs26(HorizontalRhythm7, { align: "center", gap: "xs", css: { width: "100%" }, children: [
|
|
5210
|
+
/* @__PURE__ */ jsx43(
|
|
5211
|
+
"div",
|
|
5212
|
+
{
|
|
5213
|
+
css: { flex: 1 },
|
|
5214
|
+
onKeyDown: () => {
|
|
5215
|
+
if (isEditing && canDispatch) {
|
|
5216
|
+
dispatch({ type: "cancelEdit" });
|
|
5217
|
+
}
|
|
5218
|
+
},
|
|
5219
|
+
children: useInputWhenNoVariables ? inputWhenNoVariables : /* @__PURE__ */ jsx43(
|
|
5170
5220
|
VariablesComposerInput,
|
|
5171
5221
|
{
|
|
5172
5222
|
"aria-label": ariaLabel,
|
|
@@ -5178,20 +5228,20 @@ function ParameterVariables(props) {
|
|
|
5178
5228
|
inputCss != null ? inputCss : css25``
|
|
5179
5229
|
]
|
|
5180
5230
|
}
|
|
5181
|
-
) }),
|
|
5182
|
-
disableVariablesForReals ? null : /* @__PURE__ */ jsx43(
|
|
5183
|
-
VariablesComposerVariableMenu,
|
|
5184
|
-
{
|
|
5185
|
-
...sharedMenuProps,
|
|
5186
|
-
buttonCss: [variableBindButton],
|
|
5187
|
-
tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
|
|
5188
|
-
buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
|
|
5189
|
-
replaceValueOnVariableInsert: useInputWhenNoVariables
|
|
5190
|
-
}
|
|
5191
5231
|
)
|
|
5192
|
-
|
|
5193
|
-
|
|
5194
|
-
|
|
5232
|
+
}
|
|
5233
|
+
),
|
|
5234
|
+
disableVariablesForReals ? null : /* @__PURE__ */ jsx43(
|
|
5235
|
+
VariablesComposerVariableMenu,
|
|
5236
|
+
{
|
|
5237
|
+
...sharedMenuProps,
|
|
5238
|
+
buttonCss: [variableBindButton],
|
|
5239
|
+
tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
|
|
5240
|
+
buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
|
|
5241
|
+
replaceValueOnVariableInsert: useInputWhenNoVariables
|
|
5242
|
+
}
|
|
5243
|
+
)
|
|
5244
|
+
] })
|
|
5195
5245
|
]
|
|
5196
5246
|
}
|
|
5197
5247
|
);
|
|
@@ -5199,7 +5249,7 @@ function ParameterVariables(props) {
|
|
|
5199
5249
|
|
|
5200
5250
|
// src/components/Variables/util/convertConnectedDataToVariable.ts
|
|
5201
5251
|
function convertConnectedDataToVariable(bindExpression, value) {
|
|
5202
|
-
const isValuePrimitive = typeof value === "string" || typeof value === "number" || typeof value === "boolean";
|
|
5252
|
+
const isValuePrimitive = typeof value === "string" && value.length > 0 || typeof value === "number" || typeof value === "boolean";
|
|
5203
5253
|
return {
|
|
5204
5254
|
ephemeral: true,
|
|
5205
5255
|
displayName: isValuePrimitive ? value.toString() : prettifyBindExpression(bindExpression),
|
|
@@ -5374,6 +5424,10 @@ function VariablesList() {
|
|
|
5374
5424
|
|
|
5375
5425
|
// src/components/DataResourceDynamicInputProvider.tsx
|
|
5376
5426
|
import { jsx as jsx45 } from "@emotion/react/jsx-runtime";
|
|
5427
|
+
var DataResourceInputContext = createContext4(void 0);
|
|
5428
|
+
var useDataResourceDynamicInputs = () => {
|
|
5429
|
+
return useContext6(DataResourceInputContext);
|
|
5430
|
+
};
|
|
5377
5431
|
function DataResourceDynamicInputProvider(props) {
|
|
5378
5432
|
const { children, dynamicInputs } = props;
|
|
5379
5433
|
if (dynamicInputs) {
|
|
@@ -5392,11 +5446,11 @@ function DataResourceDynamicInputProviderRenderer({
|
|
|
5392
5446
|
dynamicInputs
|
|
5393
5447
|
}) {
|
|
5394
5448
|
const variables = useDynamicInputsAsVariables(dynamicInputs);
|
|
5395
|
-
return /* @__PURE__ */ jsx45(VariablesProvider, { value: variables, readOnly: true, children });
|
|
5449
|
+
return /* @__PURE__ */ jsx45(DataResourceInputContext.Provider, { value: dynamicInputs, children: /* @__PURE__ */ jsx45(VariablesProvider, { value: variables, readOnly: true, children }) });
|
|
5396
5450
|
}
|
|
5397
5451
|
|
|
5398
5452
|
// src/components/DataResourceVariablesList.tsx
|
|
5399
|
-
import { Callout as Callout4, VerticalRhythm } from "@uniformdev/design-system";
|
|
5453
|
+
import { Callout as Callout4, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
|
|
5400
5454
|
import { jsx as jsx46 } from "@emotion/react/jsx-runtime";
|
|
5401
5455
|
function DataResourceVariablesList(props) {
|
|
5402
5456
|
const {
|
|
@@ -5428,7 +5482,7 @@ function DataResourceVariablesListExplicit({
|
|
|
5428
5482
|
}
|
|
5429
5483
|
return /* @__PURE__ */ jsx46(Callout4, { type: "note", children: "No settings are required." });
|
|
5430
5484
|
}
|
|
5431
|
-
return /* @__PURE__ */ jsx46(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ jsx46(
|
|
5485
|
+
return /* @__PURE__ */ jsx46(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ jsx46(VerticalRhythm2, { children: variableDefinitions.map((variableDefinition) => {
|
|
5432
5486
|
var _a, _b, _c;
|
|
5433
5487
|
const VariableRenderer = variableDefinition.type ? (_a = typeRenderers == null ? void 0 : typeRenderers[variableDefinition.type]) != null ? _a : TextVariableRenderer : TextVariableRenderer;
|
|
5434
5488
|
return /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(
|
|
@@ -5655,6 +5709,7 @@ function RequestBody() {
|
|
|
5655
5709
|
// src/components/Request/RequestHeaders.tsx
|
|
5656
5710
|
import {
|
|
5657
5711
|
Input as Input3,
|
|
5712
|
+
InputToggle,
|
|
5658
5713
|
Table as Table2,
|
|
5659
5714
|
TableBody as TableBody2,
|
|
5660
5715
|
TableCellData as TableCellData2,
|
|
@@ -5736,8 +5791,11 @@ function RequestHeaders({
|
|
|
5736
5791
|
}
|
|
5737
5792
|
) : null }),
|
|
5738
5793
|
addOmitIfEmpty ? /* @__PURE__ */ jsx50(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx50(
|
|
5739
|
-
|
|
5794
|
+
InputToggle,
|
|
5740
5795
|
{
|
|
5796
|
+
label: "Omit if empty",
|
|
5797
|
+
showLabel: false,
|
|
5798
|
+
name: "omitIfEmpty",
|
|
5741
5799
|
type: "checkbox",
|
|
5742
5800
|
checked: header.omitIfEmpty,
|
|
5743
5801
|
"data-testid": "header-omitifempty",
|
|
@@ -5782,6 +5840,7 @@ function RequestMethodSelect(props) {
|
|
|
5782
5840
|
// src/components/Request/RequestParameters.tsx
|
|
5783
5841
|
import {
|
|
5784
5842
|
Input as Input4,
|
|
5843
|
+
InputToggle as InputToggle2,
|
|
5785
5844
|
Table as Table3,
|
|
5786
5845
|
TableBody as TableBody3,
|
|
5787
5846
|
TableCellData as TableCellData3,
|
|
@@ -5873,8 +5932,11 @@ function RequestParameters({
|
|
|
5873
5932
|
}
|
|
5874
5933
|
) : null }),
|
|
5875
5934
|
addOmitIfEmpty ? /* @__PURE__ */ jsx52(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx52(
|
|
5876
|
-
|
|
5935
|
+
InputToggle2,
|
|
5877
5936
|
{
|
|
5937
|
+
label: "Omit if empty",
|
|
5938
|
+
showLabel: false,
|
|
5939
|
+
name: "omitIfEmpty",
|
|
5878
5940
|
type: "checkbox",
|
|
5879
5941
|
checked: parameter.omitIfEmpty,
|
|
5880
5942
|
"data-testid": "parameter-omitifempty",
|
|
@@ -6173,12 +6235,12 @@ import { LoadingIndicator as LoadingIndicator3, Theme as Theme2 } from "@uniform
|
|
|
6173
6235
|
|
|
6174
6236
|
// src/hooks/useInitializeUniformMeshSdk.ts
|
|
6175
6237
|
import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
|
|
6176
|
-
import { useEffect as
|
|
6238
|
+
import { useEffect as useEffect16, useRef as useRef14, useState as useState15 } from "react";
|
|
6177
6239
|
var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
|
|
6178
6240
|
const [error, setError] = useState15();
|
|
6179
6241
|
const [sdk, setSdk] = useState15();
|
|
6180
6242
|
const initializationInProgress = useRef14(false);
|
|
6181
|
-
|
|
6243
|
+
useEffect16(
|
|
6182
6244
|
() => {
|
|
6183
6245
|
if (typeof window === "undefined" || sdk) {
|
|
6184
6246
|
return;
|
|
@@ -6259,22 +6321,23 @@ var DataRefreshButton = ({
|
|
|
6259
6321
|
};
|
|
6260
6322
|
|
|
6261
6323
|
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6262
|
-
import { css as
|
|
6324
|
+
import { css as css36 } from "@emotion/react";
|
|
6263
6325
|
import { bindVariables } from "@uniformdev/canvas";
|
|
6264
|
-
import { Callout as Callout5, Container, IconsProvider, ScrollableList, VerticalRhythm as
|
|
6326
|
+
import { Callout as Callout5, Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
|
|
6327
|
+
import React12 from "react";
|
|
6265
6328
|
|
|
6266
6329
|
// src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
|
|
6267
6330
|
import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
|
|
6268
6331
|
import {
|
|
6269
|
-
createContext as
|
|
6332
|
+
createContext as createContext6,
|
|
6270
6333
|
useCallback as useCallback5,
|
|
6271
|
-
useContext as
|
|
6334
|
+
useContext as useContext8,
|
|
6272
6335
|
useDeferredValue,
|
|
6273
6336
|
useMemo as useMemo14,
|
|
6274
6337
|
useState as useState16
|
|
6275
6338
|
} from "react";
|
|
6276
6339
|
import { jsx as jsx59 } from "@emotion/react/jsx-runtime";
|
|
6277
|
-
var ObjectSearchContext =
|
|
6340
|
+
var ObjectSearchContext = createContext6({
|
|
6278
6341
|
onSetQuery: () => {
|
|
6279
6342
|
},
|
|
6280
6343
|
onSelectItem: () => {
|
|
@@ -6282,8 +6345,6 @@ var ObjectSearchContext = createContext5({
|
|
|
6282
6345
|
query: {},
|
|
6283
6346
|
boundQuery: {},
|
|
6284
6347
|
list: {},
|
|
6285
|
-
onSetList: () => {
|
|
6286
|
-
},
|
|
6287
6348
|
selectedListItems: [],
|
|
6288
6349
|
onRemoveAllSelectedItems: () => {
|
|
6289
6350
|
},
|
|
@@ -6367,7 +6428,7 @@ var ObjectSearchProvider = ({
|
|
|
6367
6428
|
return /* @__PURE__ */ jsx59(ObjectSearchContext.Provider, { value, children });
|
|
6368
6429
|
};
|
|
6369
6430
|
function useObjectSearchContext() {
|
|
6370
|
-
return
|
|
6431
|
+
return useContext8(ObjectSearchContext);
|
|
6371
6432
|
}
|
|
6372
6433
|
function bindQuery(query, inputs) {
|
|
6373
6434
|
const { result, errors } = bindVariablesToObject2({
|
|
@@ -6523,201 +6584,18 @@ var ObjectSearchListItemLoadingSkeleton = () => {
|
|
|
6523
6584
|
return /* @__PURE__ */ jsx60("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
|
|
6524
6585
|
};
|
|
6525
6586
|
|
|
6526
|
-
// src/components/ObjectSearch/
|
|
6527
|
-
import {
|
|
6528
|
-
|
|
6529
|
-
label,
|
|
6530
|
-
enableDynamicInputToResultId,
|
|
6531
|
-
searchFilters,
|
|
6532
|
-
resultList,
|
|
6533
|
-
children
|
|
6534
|
-
}) => {
|
|
6535
|
-
var _a, _b;
|
|
6536
|
-
const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
|
|
6537
|
-
const { flatVariables } = useVariables(true);
|
|
6538
|
-
const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
|
|
6539
|
-
const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx61(
|
|
6540
|
-
ScrollableList,
|
|
6541
|
-
{
|
|
6542
|
-
role: "list",
|
|
6543
|
-
css: css33`
|
|
6544
|
-
> div {
|
|
6545
|
-
transition: max-height var(--duration-slow) var(--timing-ease-out);
|
|
6546
|
-
max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
|
|
6547
|
-
}
|
|
6548
|
-
`,
|
|
6549
|
-
children: /* @__PURE__ */ jsx61(DefaultResultList, {})
|
|
6550
|
-
}
|
|
6551
|
-
);
|
|
6552
|
-
const body = /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
|
|
6553
|
-
searchFilters,
|
|
6554
|
-
listItems
|
|
6555
|
-
] });
|
|
6556
|
-
const handleSelectedVariableChange = (selectedValue) => {
|
|
6557
|
-
var _a2;
|
|
6558
|
-
if (!selectedValue) {
|
|
6559
|
-
onSelectItem([]);
|
|
6560
|
-
return;
|
|
6561
|
-
}
|
|
6562
|
-
const { result, errors } = bindVariables({
|
|
6563
|
-
value: selectedValue,
|
|
6564
|
-
variables: flatVariables,
|
|
6565
|
-
errorPrefix: "Dynamic input"
|
|
6566
|
-
});
|
|
6567
|
-
if (!result) {
|
|
6568
|
-
onSelectItem([]);
|
|
6569
|
-
return;
|
|
6570
|
-
}
|
|
6571
|
-
const item = (_a2 = list.items) == null ? void 0 : _a2.find((i) => i.id === result);
|
|
6572
|
-
onSelectItem([
|
|
6573
|
-
{
|
|
6574
|
-
title: selectedValue,
|
|
6575
|
-
contentType: (errors == null ? void 0 : errors.length) ? errors[0] instanceof Error ? errors[0].message : errors[0] : `Current dynamic value "${result}" is not an ID in the options`,
|
|
6576
|
-
// spread any matched list item, overriding the above default props
|
|
6577
|
-
...item,
|
|
6578
|
-
// we want to make sure the ID is our dynamic value
|
|
6579
|
-
id: selectedValue
|
|
6580
|
-
}
|
|
6581
|
-
]);
|
|
6582
|
-
};
|
|
6583
|
-
return /* @__PURE__ */ jsx61(IconsProvider, { children: /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
|
|
6584
|
-
/* @__PURE__ */ jsx61(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx61(
|
|
6585
|
-
InputVariables,
|
|
6586
|
-
{
|
|
6587
|
-
label,
|
|
6588
|
-
value: inputValue,
|
|
6589
|
-
onChange: (value) => {
|
|
6590
|
-
if (value === inputValue) {
|
|
6591
|
-
return;
|
|
6592
|
-
}
|
|
6593
|
-
handleSelectedVariableChange(value);
|
|
6594
|
-
},
|
|
6595
|
-
inputWhenNoVariables: body,
|
|
6596
|
-
disableVariables: !enableDynamicInputToResultId
|
|
6597
|
-
}
|
|
6598
|
-
) : body }),
|
|
6599
|
-
children
|
|
6600
|
-
] }) });
|
|
6601
|
-
};
|
|
6602
|
-
var DefaultResultList = () => {
|
|
6603
|
-
var _a;
|
|
6604
|
-
const { list } = useObjectSearchContext();
|
|
6605
|
-
if (!list.items) {
|
|
6606
|
-
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ jsx61(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
6607
|
-
}
|
|
6608
|
-
if (list.items.length === 0) {
|
|
6609
|
-
return /* @__PURE__ */ jsx61(Callout5, { type: "info", children: "No results were found" });
|
|
6610
|
-
}
|
|
6611
|
-
return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx61(ObjectSearchListItem, { ...item }, item.id));
|
|
6612
|
-
};
|
|
6613
|
-
|
|
6614
|
-
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6615
|
-
import { DebouncedInputKeywordSearch, InputSelect as InputSelect6 } from "@uniformdev/design-system";
|
|
6616
|
-
import { useMemo as useMemo15, useState as useState17 } from "react";
|
|
6617
|
-
|
|
6618
|
-
// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
|
|
6619
|
-
import { css as css34 } from "@emotion/react";
|
|
6620
|
-
var ObjectSearchFilterContainerLabel = css34`
|
|
6621
|
-
align-items: center;
|
|
6622
|
-
display: flex;
|
|
6623
|
-
font-size: var(--fs-sm);
|
|
6624
|
-
font-weight: var(--fw-bold);
|
|
6625
|
-
line-height: 1rem;
|
|
6626
|
-
margin-bottom: var(--spacing-sm);
|
|
6627
|
-
`;
|
|
6628
|
-
var ObjectSearchFilterContainer = css34`
|
|
6629
|
-
display: grid;
|
|
6630
|
-
gap: var(--spacing-base);
|
|
6631
|
-
`;
|
|
6632
|
-
var ObjectSearchFilterGrid = (gridColumns) => css34`
|
|
6633
|
-
display: grid;
|
|
6634
|
-
grid-template-columns: ${gridColumns};
|
|
6635
|
-
gap: var(--spacing-base);
|
|
6636
|
-
`;
|
|
6637
|
-
|
|
6638
|
-
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6639
|
-
import { jsx as jsx62, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
|
|
6640
|
-
var ObjectSearchFilter = ({
|
|
6641
|
-
requireContentType,
|
|
6642
|
-
typeSelectorAllTypesOptionText = "All content types",
|
|
6643
|
-
searchInputName = "searchText",
|
|
6644
|
-
searchInputPlaceholderText = "Enter keyword to narrow your results",
|
|
6645
|
-
selectLabel = "Content Type Select",
|
|
6646
|
-
selectOptions
|
|
6647
|
-
}) => {
|
|
6648
|
-
var _a, _b;
|
|
6649
|
-
const { query, onSetQuery } = useObjectSearchContext();
|
|
6650
|
-
const [searchState, setSearchState] = useState17({
|
|
6651
|
-
contentType: (_a = query.contentType) != null ? _a : "",
|
|
6652
|
-
keyword: (_b = query.keyword) != null ? _b : ""
|
|
6653
|
-
});
|
|
6654
|
-
const handleFilterChange = (value) => {
|
|
6655
|
-
setSearchState((prev) => {
|
|
6656
|
-
return { ...prev, ...value };
|
|
6657
|
-
});
|
|
6658
|
-
onSetQuery({ ...query, ...value });
|
|
6659
|
-
};
|
|
6660
|
-
const memoizedSelectOptions = useMemo15(() => {
|
|
6661
|
-
if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
|
|
6662
|
-
return [];
|
|
6663
|
-
}
|
|
6664
|
-
return [
|
|
6665
|
-
...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
|
|
6666
|
-
...selectOptions != null ? selectOptions : []
|
|
6667
|
-
];
|
|
6668
|
-
}, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
|
|
6669
|
-
const shouldRenderSelect = memoizedSelectOptions.length > 0;
|
|
6670
|
-
return /* @__PURE__ */ jsxs36(
|
|
6671
|
-
"fieldset",
|
|
6672
|
-
{
|
|
6673
|
-
css: [
|
|
6674
|
-
ObjectSearchFilterContainer,
|
|
6675
|
-
ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
|
|
6676
|
-
],
|
|
6677
|
-
children: [
|
|
6678
|
-
memoizedSelectOptions.length ? /* @__PURE__ */ jsx62(
|
|
6679
|
-
InputSelect6,
|
|
6680
|
-
{
|
|
6681
|
-
label: selectLabel,
|
|
6682
|
-
showLabel: false,
|
|
6683
|
-
onChange: (e) => handleFilterChange({ contentType: e.target.value }),
|
|
6684
|
-
options: memoizedSelectOptions,
|
|
6685
|
-
value: query.contentType
|
|
6686
|
-
}
|
|
6687
|
-
) : null,
|
|
6688
|
-
/* @__PURE__ */ jsx62(
|
|
6689
|
-
DebouncedInputKeywordSearch,
|
|
6690
|
-
{
|
|
6691
|
-
inputFieldName: searchInputName,
|
|
6692
|
-
placeholder: searchInputPlaceholderText,
|
|
6693
|
-
onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
|
|
6694
|
-
disabledFieldSubmission: true,
|
|
6695
|
-
defaultValue: searchState.keyword,
|
|
6696
|
-
delay: 300
|
|
6697
|
-
}
|
|
6698
|
-
)
|
|
6699
|
-
]
|
|
6700
|
-
}
|
|
6701
|
-
);
|
|
6702
|
-
};
|
|
6703
|
-
|
|
6704
|
-
// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
|
|
6705
|
-
import { jsx as jsx63, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
|
|
6706
|
-
var ObjectSearchFilterContainer2 = ({ label, children }) => {
|
|
6707
|
-
return /* @__PURE__ */ jsxs37("div", { children: [
|
|
6708
|
-
label ? /* @__PURE__ */ jsx63("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
|
|
6709
|
-
/* @__PURE__ */ jsx63("div", { css: ObjectSearchFilterContainer, children })
|
|
6710
|
-
] });
|
|
6711
|
-
};
|
|
6587
|
+
// src/components/ObjectSearch/ObjectSearchResultList.tsx
|
|
6588
|
+
import { Button as Button5, Counter } from "@uniformdev/design-system";
|
|
6589
|
+
import { Draggable as Draggable3, Droppable as Droppable3 } from "react-beautiful-dnd";
|
|
6712
6590
|
|
|
6713
6591
|
// src/components/ObjectSearch/ObjectSearchResultItem.tsx
|
|
6714
6592
|
import { Badge, Button as Button4, Popover as Popover2 } from "@uniformdev/design-system";
|
|
6715
6593
|
import { format as timeagoFormat } from "timeago.js";
|
|
6716
6594
|
|
|
6717
6595
|
// src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
|
|
6718
|
-
import { css as
|
|
6596
|
+
import { css as css33 } from "@emotion/react";
|
|
6719
6597
|
import { button as button2 } from "@uniformdev/design-system";
|
|
6720
|
-
var ButtonStyles =
|
|
6598
|
+
var ButtonStyles = css33`
|
|
6721
6599
|
${button2}
|
|
6722
6600
|
background: transparent;
|
|
6723
6601
|
border: 1px solid var(--typography-base);
|
|
@@ -6744,20 +6622,20 @@ var ButtonStyles = css35`
|
|
|
6744
6622
|
text-decoration: none;
|
|
6745
6623
|
}
|
|
6746
6624
|
`;
|
|
6747
|
-
var ButtonIcon =
|
|
6625
|
+
var ButtonIcon = css33`
|
|
6748
6626
|
width: 1rem;
|
|
6749
6627
|
height: 1rem;
|
|
6750
6628
|
`;
|
|
6751
6629
|
|
|
6752
6630
|
// src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
|
|
6753
|
-
import { jsx as
|
|
6631
|
+
import { jsx as jsx61, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
|
|
6754
6632
|
var ObjectSearchResultItemButton = ({
|
|
6755
6633
|
text,
|
|
6756
6634
|
icon,
|
|
6757
6635
|
...props
|
|
6758
6636
|
}) => {
|
|
6759
|
-
return /* @__PURE__ */
|
|
6760
|
-
!icon ? null : /* @__PURE__ */
|
|
6637
|
+
return /* @__PURE__ */ jsxs35("button", { type: "button", css: ButtonStyles, ...props, children: [
|
|
6638
|
+
!icon ? null : /* @__PURE__ */ jsx61(Image, { src: icon, css: ButtonIcon }),
|
|
6761
6639
|
text
|
|
6762
6640
|
] });
|
|
6763
6641
|
};
|
|
@@ -6766,15 +6644,15 @@ var LinkButton = ({
|
|
|
6766
6644
|
icon,
|
|
6767
6645
|
...props
|
|
6768
6646
|
}) => {
|
|
6769
|
-
return /* @__PURE__ */
|
|
6770
|
-
!icon ? null : /* @__PURE__ */
|
|
6647
|
+
return /* @__PURE__ */ jsxs35("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
|
|
6648
|
+
!icon ? null : /* @__PURE__ */ jsx61(Image, { src: icon, css: ButtonIcon }),
|
|
6771
6649
|
text
|
|
6772
6650
|
] });
|
|
6773
6651
|
};
|
|
6774
6652
|
|
|
6775
6653
|
// src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
|
|
6776
|
-
import { css as
|
|
6777
|
-
var ObjectSearchResultItemContainer =
|
|
6654
|
+
import { css as css34 } from "@emotion/react";
|
|
6655
|
+
var ObjectSearchResultItemContainer = css34`
|
|
6778
6656
|
align-items: center;
|
|
6779
6657
|
border: 1px solid var(--gray-300);
|
|
6780
6658
|
border-radius: var(--rounded-base);
|
|
@@ -6790,7 +6668,7 @@ var ObjectSearchResultItemContainer = css36`
|
|
|
6790
6668
|
}
|
|
6791
6669
|
}
|
|
6792
6670
|
`;
|
|
6793
|
-
var ObjectSearchDragHandle =
|
|
6671
|
+
var ObjectSearchDragHandle = css34`
|
|
6794
6672
|
border-left: 2px dotted var(--gray-300);
|
|
6795
6673
|
border-right: 2px dotted var(--gray-300);
|
|
6796
6674
|
position: absolute;
|
|
@@ -6799,41 +6677,41 @@ var ObjectSearchDragHandle = css36`
|
|
|
6799
6677
|
transition: opacity var(--duration-fast) var(--timing-ease-out);
|
|
6800
6678
|
opacity: 0;
|
|
6801
6679
|
`;
|
|
6802
|
-
var ObjectSearchResultItemSubtitle =
|
|
6680
|
+
var ObjectSearchResultItemSubtitle = css34`
|
|
6803
6681
|
color: var(--gray-500);
|
|
6804
6682
|
display: block;
|
|
6805
6683
|
font-size: var(--fs-xs);
|
|
6806
6684
|
line-height: 1;
|
|
6807
6685
|
`;
|
|
6808
|
-
var ObjectSearchResultItemTitle =
|
|
6686
|
+
var ObjectSearchResultItemTitle = css34`
|
|
6809
6687
|
align-items: center;
|
|
6810
6688
|
color: var(--typography-base);
|
|
6811
6689
|
display: flex;
|
|
6812
6690
|
gap: var(--spacing-xs);
|
|
6813
6691
|
`;
|
|
6814
|
-
var ObjectSearchResultItemTimeStamp =
|
|
6692
|
+
var ObjectSearchResultItemTimeStamp = css34`
|
|
6815
6693
|
color: var(--gray-500);
|
|
6816
6694
|
font-size: var(--fs-xs);
|
|
6817
6695
|
`;
|
|
6818
|
-
var ObjectSearchAuthorStateGroup =
|
|
6696
|
+
var ObjectSearchAuthorStateGroup = css34`
|
|
6819
6697
|
align-items: center;
|
|
6820
6698
|
display: flex;
|
|
6821
6699
|
gap: var(--spacing-sm);
|
|
6822
6700
|
`;
|
|
6823
|
-
var ObjectSearchUpdateGroup =
|
|
6701
|
+
var ObjectSearchUpdateGroup = css34`
|
|
6824
6702
|
display: grid;
|
|
6825
6703
|
`;
|
|
6826
|
-
var ObjectSearchContentContainer =
|
|
6704
|
+
var ObjectSearchContentContainer = css34`
|
|
6827
6705
|
display: flex;
|
|
6828
6706
|
gap: var(--spacing-base);
|
|
6829
6707
|
`;
|
|
6830
|
-
var ObjectSearchImage =
|
|
6708
|
+
var ObjectSearchImage = css34`
|
|
6831
6709
|
width: 56px;
|
|
6832
6710
|
object-fit: contain;
|
|
6833
6711
|
`;
|
|
6834
6712
|
|
|
6835
6713
|
// src/components/ObjectSearch/ObjectSearchResultItem.tsx
|
|
6836
|
-
import { jsx as
|
|
6714
|
+
import { jsx as jsx62, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
|
|
6837
6715
|
var ObjectSearchResultItem = ({
|
|
6838
6716
|
id,
|
|
6839
6717
|
title,
|
|
@@ -6857,70 +6735,66 @@ var ObjectSearchResultItem = ({
|
|
|
6857
6735
|
onSelectItem({ id, title: id });
|
|
6858
6736
|
onRemove == null ? void 0 : onRemove();
|
|
6859
6737
|
};
|
|
6860
|
-
return /* @__PURE__ */
|
|
6861
|
-
disableDnD ? null : /* @__PURE__ */
|
|
6862
|
-
/* @__PURE__ */
|
|
6863
|
-
!imageUrl ? null : /* @__PURE__ */
|
|
6864
|
-
/* @__PURE__ */
|
|
6865
|
-
/* @__PURE__ */
|
|
6866
|
-
/* @__PURE__ */
|
|
6738
|
+
return /* @__PURE__ */ jsxs36("div", { css: ObjectSearchResultItemContainer, "data-testid": "search-result-item", children: [
|
|
6739
|
+
disableDnD ? null : /* @__PURE__ */ jsx62("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
|
|
6740
|
+
/* @__PURE__ */ jsx62("div", { children: /* @__PURE__ */ jsxs36("div", { css: ObjectSearchContentContainer, children: [
|
|
6741
|
+
!imageUrl ? null : /* @__PURE__ */ jsx62("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
|
|
6742
|
+
/* @__PURE__ */ jsxs36("div", { children: [
|
|
6743
|
+
/* @__PURE__ */ jsx62("span", { css: ObjectSearchResultItemSubtitle, "data-testid": "sub-title", children: formatedContentType }),
|
|
6744
|
+
/* @__PURE__ */ jsxs36("span", { role: "heading", css: ObjectSearchResultItemTitle, "data-testid": "title", children: [
|
|
6867
6745
|
title != null ? title : name,
|
|
6868
|
-
!popoverData ? null : /* @__PURE__ */
|
|
6746
|
+
!popoverData ? null : /* @__PURE__ */ jsx62(Popover2, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
|
|
6869
6747
|
] }),
|
|
6870
|
-
!createdAt && !publishStatus ? null : /* @__PURE__ */
|
|
6871
|
-
!(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */
|
|
6872
|
-
!createdAt && !publishedAt ? null : /* @__PURE__ */
|
|
6873
|
-
!createdAt ? null : /* @__PURE__ */
|
|
6874
|
-
/* @__PURE__ */
|
|
6748
|
+
!createdAt && !publishStatus ? null : /* @__PURE__ */ jsxs36("div", { css: ObjectSearchAuthorStateGroup, children: [
|
|
6749
|
+
!(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ jsx62(Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
|
|
6750
|
+
!createdAt && !publishedAt ? null : /* @__PURE__ */ jsxs36("div", { css: ObjectSearchUpdateGroup, children: [
|
|
6751
|
+
!createdAt ? null : /* @__PURE__ */ jsxs36("small", { css: ObjectSearchResultItemTimeStamp, children: [
|
|
6752
|
+
/* @__PURE__ */ jsx62("strong", { children: "Last updated: " }),
|
|
6875
6753
|
timeagoFormat(createdAt)
|
|
6876
6754
|
] }),
|
|
6877
|
-
!publishedAt ? null : /* @__PURE__ */
|
|
6878
|
-
/* @__PURE__ */
|
|
6755
|
+
!publishedAt ? null : /* @__PURE__ */ jsxs36("small", { css: ObjectSearchResultItemTimeStamp, children: [
|
|
6756
|
+
/* @__PURE__ */ jsx62("strong", { children: "Last published: " }),
|
|
6879
6757
|
timeagoFormat(publishedAt)
|
|
6880
6758
|
] })
|
|
6881
6759
|
] })
|
|
6882
6760
|
] }),
|
|
6883
|
-
/* @__PURE__ */
|
|
6761
|
+
/* @__PURE__ */ jsx62("div", { children })
|
|
6884
6762
|
] })
|
|
6885
6763
|
] }) }),
|
|
6886
|
-
!editLink && hideRemoveButton ? null : /* @__PURE__ */
|
|
6887
|
-
!editLink ? null : /* @__PURE__ */
|
|
6888
|
-
hideRemoveButton ? null : /* @__PURE__ */
|
|
6764
|
+
!editLink && hideRemoveButton ? null : /* @__PURE__ */ jsxs36("div", { css: ObjectSearchAuthorStateGroup, children: [
|
|
6765
|
+
!editLink ? null : /* @__PURE__ */ jsx62(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
|
|
6766
|
+
hideRemoveButton ? null : /* @__PURE__ */ jsx62(Button4, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
|
|
6889
6767
|
] })
|
|
6890
6768
|
] });
|
|
6891
6769
|
};
|
|
6892
6770
|
|
|
6893
|
-
// src/components/ObjectSearch/ObjectSearchResultList.tsx
|
|
6894
|
-
import { Button as Button5, Counter } from "@uniformdev/design-system";
|
|
6895
|
-
import { Draggable as Draggable3, Droppable as Droppable3 } from "react-beautiful-dnd";
|
|
6896
|
-
|
|
6897
6771
|
// src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
|
|
6898
|
-
import { css as
|
|
6899
|
-
var ObjectSearchResultListContainer =
|
|
6772
|
+
import { css as css35 } from "@emotion/react";
|
|
6773
|
+
var ObjectSearchResultListContainer = css35`
|
|
6900
6774
|
align-items: center;
|
|
6901
6775
|
display: flex;
|
|
6902
6776
|
gap: var(--spacing-sm);
|
|
6903
6777
|
justify-content: space-between;
|
|
6904
6778
|
`;
|
|
6905
|
-
var ObjectSearchDragContainer =
|
|
6779
|
+
var ObjectSearchDragContainer = css35`
|
|
6906
6780
|
margin: 0 0 var(--spacing-sm);
|
|
6907
6781
|
`;
|
|
6908
|
-
var ObjectSearchContainerDragging =
|
|
6782
|
+
var ObjectSearchContainerDragging = css35`
|
|
6909
6783
|
box-shadow: var(--shadow-base);
|
|
6910
6784
|
opacity: var(--opacity-50);
|
|
6911
6785
|
`;
|
|
6912
|
-
var ObjectSearchResultListCounterContainer =
|
|
6786
|
+
var ObjectSearchResultListCounterContainer = css35`
|
|
6913
6787
|
align-items: center;
|
|
6914
6788
|
display: flex;
|
|
6915
6789
|
gap: var(--spacing-sm);
|
|
6916
6790
|
`;
|
|
6917
|
-
var ObjectSearchResultListTitle =
|
|
6791
|
+
var ObjectSearchResultListTitle = css35`
|
|
6918
6792
|
font-weight: var(--fw-bold);
|
|
6919
6793
|
line-height: 1;
|
|
6920
6794
|
`;
|
|
6921
6795
|
|
|
6922
6796
|
// src/components/ObjectSearch/ObjectSearchResultList.tsx
|
|
6923
|
-
import { Fragment as Fragment13, jsx as
|
|
6797
|
+
import { Fragment as Fragment13, jsx as jsx63, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
|
|
6924
6798
|
function ObjectSearchResultList({
|
|
6925
6799
|
resultLabelText = "Selected",
|
|
6926
6800
|
removeButtonText = "Remove all",
|
|
@@ -6928,7 +6802,7 @@ function ObjectSearchResultList({
|
|
|
6928
6802
|
hideRemoveButton = false,
|
|
6929
6803
|
resultLabelOverride,
|
|
6930
6804
|
additionalButtons,
|
|
6931
|
-
renderResultComponent = (value) => /* @__PURE__ */
|
|
6805
|
+
renderResultComponent = (value) => /* @__PURE__ */ jsx63(ObjectSearchResultItem, { ...value }),
|
|
6932
6806
|
multiSelectId,
|
|
6933
6807
|
disableDnD = false,
|
|
6934
6808
|
getContainerForDnDReparenting,
|
|
@@ -6953,9 +6827,10 @@ function ObjectSearchResultList({
|
|
|
6953
6827
|
const item = selectedListItems.find((i) => i.id === rubric.draggableId);
|
|
6954
6828
|
const renderListItem = renderResultComponent({
|
|
6955
6829
|
...item,
|
|
6830
|
+
hideRemoveButton,
|
|
6956
6831
|
disableDnD: selectedListItems.length === 1 || disableDnD
|
|
6957
6832
|
});
|
|
6958
|
-
return /* @__PURE__ */
|
|
6833
|
+
return /* @__PURE__ */ jsx63(
|
|
6959
6834
|
"div",
|
|
6960
6835
|
{
|
|
6961
6836
|
css: [
|
|
@@ -6970,16 +6845,16 @@ function ObjectSearchResultList({
|
|
|
6970
6845
|
}
|
|
6971
6846
|
);
|
|
6972
6847
|
};
|
|
6973
|
-
return /* @__PURE__ */
|
|
6974
|
-
/* @__PURE__ */
|
|
6975
|
-
!resultLabelOverride ? /* @__PURE__ */
|
|
6976
|
-
/* @__PURE__ */
|
|
6848
|
+
return /* @__PURE__ */ jsxs37(Fragment13, { children: [
|
|
6849
|
+
/* @__PURE__ */ jsxs37("div", { role: "group", css: ObjectSearchResultListContainer, children: [
|
|
6850
|
+
!resultLabelOverride ? /* @__PURE__ */ jsxs37("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
|
|
6851
|
+
/* @__PURE__ */ jsx63("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
|
|
6977
6852
|
" ",
|
|
6978
|
-
!selectedListItems.length ? null : /* @__PURE__ */
|
|
6853
|
+
!selectedListItems.length ? null : /* @__PURE__ */ jsx63(Counter, { count: selectedListItems.length })
|
|
6979
6854
|
] }) : resultLabelOverride,
|
|
6980
|
-
/* @__PURE__ */
|
|
6855
|
+
/* @__PURE__ */ jsxs37("div", { css: ObjectSearchResultListCounterContainer, children: [
|
|
6981
6856
|
additionalButtons,
|
|
6982
|
-
hideRemoveButton ? null : /* @__PURE__ */
|
|
6857
|
+
hideRemoveButton ? null : /* @__PURE__ */ jsx63(
|
|
6983
6858
|
Button5,
|
|
6984
6859
|
{
|
|
6985
6860
|
buttonType: "ghostDestructive",
|
|
@@ -6991,15 +6866,15 @@ function ObjectSearchResultList({
|
|
|
6991
6866
|
)
|
|
6992
6867
|
] })
|
|
6993
6868
|
] }),
|
|
6994
|
-
!selectedListItems.length ? whenNothingSelected : /* @__PURE__ */
|
|
6869
|
+
!selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ jsx63(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx63(
|
|
6995
6870
|
Droppable3,
|
|
6996
6871
|
{
|
|
6997
6872
|
droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select",
|
|
6998
6873
|
renderClone: getContainerForDnDReparenting ? getDraggableItem : void 0,
|
|
6999
6874
|
getContainerForClone: getContainerForDnDReparenting,
|
|
7000
|
-
children: (provided) => /* @__PURE__ */
|
|
6875
|
+
children: (provided) => /* @__PURE__ */ jsxs37("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
|
|
7001
6876
|
selectedListItems.map((item, i) => {
|
|
7002
|
-
return /* @__PURE__ */
|
|
6877
|
+
return /* @__PURE__ */ jsx63(
|
|
7003
6878
|
Draggable3,
|
|
7004
6879
|
{
|
|
7005
6880
|
draggableId: item.id,
|
|
@@ -7017,28 +6892,292 @@ function ObjectSearchResultList({
|
|
|
7017
6892
|
] });
|
|
7018
6893
|
}
|
|
7019
6894
|
|
|
7020
|
-
// src/components/ObjectSearch/
|
|
7021
|
-
import {
|
|
7022
|
-
|
|
7023
|
-
|
|
7024
|
-
|
|
7025
|
-
|
|
7026
|
-
|
|
7027
|
-
|
|
7028
|
-
|
|
7029
|
-
|
|
7030
|
-
|
|
7031
|
-
|
|
7032
|
-
|
|
7033
|
-
|
|
7034
|
-
|
|
7035
|
-
|
|
7036
|
-
|
|
7037
|
-
|
|
7038
|
-
|
|
7039
|
-
{
|
|
7040
|
-
|
|
7041
|
-
|
|
6895
|
+
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6896
|
+
import { Fragment as Fragment14, jsx as jsx64, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
|
|
6897
|
+
var ObjectSearchContainer = ({
|
|
6898
|
+
label,
|
|
6899
|
+
enableDynamicInputToResultId,
|
|
6900
|
+
searchFilters,
|
|
6901
|
+
resultList,
|
|
6902
|
+
children = /* @__PURE__ */ jsx64(ObjectSearchResultList, {})
|
|
6903
|
+
}) => {
|
|
6904
|
+
var _a, _b;
|
|
6905
|
+
const { onSelectItem, selectedListItems, list, dynamicEntryId, onSetQuery, query } = useObjectSearchContext();
|
|
6906
|
+
const { flatVariables } = useVariables(true);
|
|
6907
|
+
const inputValue = (_b = dynamicEntryId != null ? dynamicEntryId : (_a = selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
|
|
6908
|
+
const isDynamicEntryIdAvailable = React12.useMemo(
|
|
6909
|
+
() => Boolean(inputValue && hasReferencedVariables(inputValue)),
|
|
6910
|
+
[inputValue]
|
|
6911
|
+
);
|
|
6912
|
+
const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx64(
|
|
6913
|
+
ScrollableList,
|
|
6914
|
+
{
|
|
6915
|
+
role: "list",
|
|
6916
|
+
css: css36`
|
|
6917
|
+
> div {
|
|
6918
|
+
transition: max-height var(--duration-slow) var(--timing-ease-out);
|
|
6919
|
+
max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
|
|
6920
|
+
}
|
|
6921
|
+
`,
|
|
6922
|
+
children: /* @__PURE__ */ jsx64(DefaultResultList, {})
|
|
6923
|
+
}
|
|
6924
|
+
);
|
|
6925
|
+
const handleSelectedVariableChange = (selectedValue) => {
|
|
6926
|
+
var _a2;
|
|
6927
|
+
if (!selectedValue) {
|
|
6928
|
+
onSelectItem([]);
|
|
6929
|
+
return;
|
|
6930
|
+
}
|
|
6931
|
+
const { result, errors } = bindVariables({
|
|
6932
|
+
value: selectedValue,
|
|
6933
|
+
variables: flatVariables,
|
|
6934
|
+
errorPrefix: "Dynamic input"
|
|
6935
|
+
});
|
|
6936
|
+
if (!result) {
|
|
6937
|
+
onSelectItem([]);
|
|
6938
|
+
return;
|
|
6939
|
+
}
|
|
6940
|
+
const item = (_a2 = list.items) == null ? void 0 : _a2.find((i) => i.id === result);
|
|
6941
|
+
onSelectItem([
|
|
6942
|
+
{
|
|
6943
|
+
title: selectedValue,
|
|
6944
|
+
contentType: (errors == null ? void 0 : errors.length) ? errors[0] instanceof Error ? errors[0].message : errors[0] : `Current dynamic value "${result}" is not an ID in the options`,
|
|
6945
|
+
// spread any matched list item, overriding the above default props
|
|
6946
|
+
...item,
|
|
6947
|
+
// we want to make sure the ID is our dynamic value
|
|
6948
|
+
id: selectedValue
|
|
6949
|
+
}
|
|
6950
|
+
]);
|
|
6951
|
+
if (hasReferencedVariables(selectedValue)) {
|
|
6952
|
+
onSetQuery({ ...query, dynamicEntryId: selectedValue });
|
|
6953
|
+
}
|
|
6954
|
+
};
|
|
6955
|
+
const showSearchList = !label || !isDynamicEntryIdAvailable || !enableDynamicInputToResultId;
|
|
6956
|
+
return /* @__PURE__ */ jsx64(IconsProvider, { children: /* @__PURE__ */ jsxs38(VerticalRhythm3, { children: [
|
|
6957
|
+
/* @__PURE__ */ jsx64(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: /* @__PURE__ */ jsxs38(VerticalRhythm3, { children: [
|
|
6958
|
+
label ? /* @__PURE__ */ jsx64(
|
|
6959
|
+
InputVariables,
|
|
6960
|
+
{
|
|
6961
|
+
id: "entryId",
|
|
6962
|
+
label,
|
|
6963
|
+
value: inputValue,
|
|
6964
|
+
onChange: (value) => {
|
|
6965
|
+
if (value === inputValue) {
|
|
6966
|
+
return;
|
|
6967
|
+
}
|
|
6968
|
+
handleSelectedVariableChange(value);
|
|
6969
|
+
},
|
|
6970
|
+
inputWhenNoVariables: /* @__PURE__ */ jsx64(Fragment14, { children: searchFilters }),
|
|
6971
|
+
disableVariables: !enableDynamicInputToResultId
|
|
6972
|
+
}
|
|
6973
|
+
) : searchFilters,
|
|
6974
|
+
showSearchList ? listItems : null
|
|
6975
|
+
] }) }),
|
|
6976
|
+
children
|
|
6977
|
+
] }) });
|
|
6978
|
+
};
|
|
6979
|
+
var DefaultResultList = () => {
|
|
6980
|
+
var _a, _b;
|
|
6981
|
+
const { list, isListLoading } = useObjectSearchContext();
|
|
6982
|
+
if (isListLoading || !list.items) {
|
|
6983
|
+
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ jsx64(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
6984
|
+
}
|
|
6985
|
+
if (((_a = list.items) == null ? void 0 : _a.length) === 0) {
|
|
6986
|
+
return /* @__PURE__ */ jsx64(Callout5, { type: "info", children: "No results were found" });
|
|
6987
|
+
}
|
|
6988
|
+
return (_b = list.items) == null ? void 0 : _b.map((item) => /* @__PURE__ */ jsx64(ObjectSearchListItem, { ...item }, item.id));
|
|
6989
|
+
};
|
|
6990
|
+
|
|
6991
|
+
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6992
|
+
import { DebouncedInputKeywordSearch, InputSelect as InputSelect6, VerticalRhythm as VerticalRhythm4 } from "@uniformdev/design-system";
|
|
6993
|
+
import { useMemo as useMemo15, useState as useState17 } from "react";
|
|
6994
|
+
import { useDebounce as useDebounce4 } from "react-use";
|
|
6995
|
+
|
|
6996
|
+
// src/utils/createLocationValidator.ts
|
|
6997
|
+
function createLocationValidator(setValue, validate) {
|
|
6998
|
+
return (dispatch) => setValue((previous) => {
|
|
6999
|
+
const { newValue, options } = dispatch(previous);
|
|
7000
|
+
return { newValue, options: validate(newValue, options) };
|
|
7001
|
+
});
|
|
7002
|
+
}
|
|
7003
|
+
|
|
7004
|
+
// src/utils/useContentDataResourceLocaleInfo.ts
|
|
7005
|
+
import { bindVariables as bindVariables2, createVariableReference as createVariableReference4, LOCALE_DYNAMIC_INPUT_NAME as LOCALE_DYNAMIC_INPUT_NAME2 } from "@uniformdev/canvas";
|
|
7006
|
+
import { useEffect as useEffect17, useRef as useRef15 } from "react";
|
|
7007
|
+
function useContentDataResourceLocaleInfo({
|
|
7008
|
+
locale,
|
|
7009
|
+
setLocale,
|
|
7010
|
+
dynamicInputs
|
|
7011
|
+
}) {
|
|
7012
|
+
var _a;
|
|
7013
|
+
const setLocaleRef = useRef15(setLocale);
|
|
7014
|
+
setLocaleRef.current = setLocale;
|
|
7015
|
+
const { flatVariables } = useVariables();
|
|
7016
|
+
const effectiveLocale = locale != null ? locale : dynamicInputs[LOCALE_DYNAMIC_INPUT_NAME2] ? createVariableReference4(LOCALE_DYNAMIC_INPUT_NAME2) : "";
|
|
7017
|
+
const boundLocale = (_a = bindVariables2({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
|
|
7018
|
+
useEffect17(() => {
|
|
7019
|
+
if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
|
|
7020
|
+
setLocaleRef.current(createVariableReference4(LOCALE_DYNAMIC_INPUT_NAME2));
|
|
7021
|
+
}
|
|
7022
|
+
}, [locale, effectiveLocale]);
|
|
7023
|
+
return { effectiveLocale, boundLocale: boundLocale ? boundLocale : void 0 };
|
|
7024
|
+
}
|
|
7025
|
+
|
|
7026
|
+
// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
|
|
7027
|
+
import { css as css37 } from "@emotion/react";
|
|
7028
|
+
var ObjectSearchFilterContainerLabel = css37`
|
|
7029
|
+
align-items: center;
|
|
7030
|
+
display: flex;
|
|
7031
|
+
font-size: var(--fs-sm);
|
|
7032
|
+
font-weight: var(--fw-bold);
|
|
7033
|
+
line-height: 1rem;
|
|
7034
|
+
margin-bottom: var(--spacing-sm);
|
|
7035
|
+
`;
|
|
7036
|
+
var ObjectSearchFilterContainer = css37`
|
|
7037
|
+
display: grid;
|
|
7038
|
+
gap: var(--spacing-base);
|
|
7039
|
+
`;
|
|
7040
|
+
var ObjectSearchFilterGrid = (gridColumns) => css37`
|
|
7041
|
+
display: grid;
|
|
7042
|
+
grid-template-columns: ${gridColumns};
|
|
7043
|
+
gap: var(--spacing-base);
|
|
7044
|
+
`;
|
|
7045
|
+
|
|
7046
|
+
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
7047
|
+
import { jsx as jsx65, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
|
|
7048
|
+
var ObjectSearchFilter = ({
|
|
7049
|
+
requireContentType,
|
|
7050
|
+
typeSelectorAllTypesOptionText = "All content types",
|
|
7051
|
+
searchInputName = "searchText",
|
|
7052
|
+
searchInputPlaceholderText = "Enter keyword to narrow your results",
|
|
7053
|
+
selectLabel = "Content Type Select",
|
|
7054
|
+
localeFilterLabel = "Filter by locale",
|
|
7055
|
+
selectOptions
|
|
7056
|
+
}) => {
|
|
7057
|
+
var _a, _b, _c;
|
|
7058
|
+
const { query, onSetQuery, localeOptions, enableFilterByLocale } = useObjectSearchContext();
|
|
7059
|
+
const dynamicInputs = useDataResourceDynamicInputs();
|
|
7060
|
+
const { boundLocale = "", effectiveLocale } = useContentDataResourceLocaleInfo({
|
|
7061
|
+
locale: query.locale,
|
|
7062
|
+
dynamicInputs: dynamicInputs != null ? dynamicInputs : {},
|
|
7063
|
+
setLocale: (newLocale) => handleFilterChange({ locale: newLocale != null ? newLocale : "" })
|
|
7064
|
+
});
|
|
7065
|
+
const [searchState, setSearchState] = useState17({
|
|
7066
|
+
keyword: (_a = query.keyword) != null ? _a : "",
|
|
7067
|
+
contentType: (_b = query.contentType) != null ? _b : "",
|
|
7068
|
+
locale: (_c = query.locale) != null ? _c : ""
|
|
7069
|
+
});
|
|
7070
|
+
const handleFilterChange = (value) => {
|
|
7071
|
+
setSearchState((prev) => {
|
|
7072
|
+
return { ...prev, ...value };
|
|
7073
|
+
});
|
|
7074
|
+
};
|
|
7075
|
+
useDebounce4(
|
|
7076
|
+
() => {
|
|
7077
|
+
onSetQuery({ ...query, ...searchState });
|
|
7078
|
+
},
|
|
7079
|
+
500,
|
|
7080
|
+
[searchState]
|
|
7081
|
+
);
|
|
7082
|
+
const memoizedSelectOptions = useMemo15(() => {
|
|
7083
|
+
if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
|
|
7084
|
+
return [];
|
|
7085
|
+
}
|
|
7086
|
+
return [
|
|
7087
|
+
...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
|
|
7088
|
+
...selectOptions != null ? selectOptions : []
|
|
7089
|
+
];
|
|
7090
|
+
}, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
|
|
7091
|
+
const shouldRenderSelect = memoizedSelectOptions.length > 0;
|
|
7092
|
+
return /* @__PURE__ */ jsxs39(VerticalRhythm4, { gap: "base", children: [
|
|
7093
|
+
/* @__PURE__ */ jsxs39(
|
|
7094
|
+
"fieldset",
|
|
7095
|
+
{
|
|
7096
|
+
css: [
|
|
7097
|
+
ObjectSearchFilterContainer,
|
|
7098
|
+
ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
|
|
7099
|
+
],
|
|
7100
|
+
children: [
|
|
7101
|
+
memoizedSelectOptions.length ? /* @__PURE__ */ jsx65(
|
|
7102
|
+
InputSelect6,
|
|
7103
|
+
{
|
|
7104
|
+
label: selectLabel,
|
|
7105
|
+
showLabel: false,
|
|
7106
|
+
onChange: (e) => handleFilterChange({ contentType: e.target.value }),
|
|
7107
|
+
options: memoizedSelectOptions,
|
|
7108
|
+
value: query.contentType,
|
|
7109
|
+
"data-testid": "select-entry"
|
|
7110
|
+
}
|
|
7111
|
+
) : null,
|
|
7112
|
+
/* @__PURE__ */ jsx65(
|
|
7113
|
+
DebouncedInputKeywordSearch,
|
|
7114
|
+
{
|
|
7115
|
+
inputFieldName: searchInputName,
|
|
7116
|
+
placeholder: searchInputPlaceholderText,
|
|
7117
|
+
onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
|
|
7118
|
+
disabledFieldSubmission: true,
|
|
7119
|
+
defaultValue: searchState.keyword,
|
|
7120
|
+
delay: 300
|
|
7121
|
+
}
|
|
7122
|
+
)
|
|
7123
|
+
]
|
|
7124
|
+
}
|
|
7125
|
+
),
|
|
7126
|
+
enableFilterByLocale && (localeOptions == null ? void 0 : localeOptions.length) && /* @__PURE__ */ jsx65(
|
|
7127
|
+
InputVariables,
|
|
7128
|
+
{
|
|
7129
|
+
label: localeFilterLabel,
|
|
7130
|
+
id: "locale",
|
|
7131
|
+
value: effectiveLocale,
|
|
7132
|
+
onChange: (newLocale) => handleFilterChange({ locale: newLocale != null ? newLocale : "" }),
|
|
7133
|
+
disableInlineMenu: true,
|
|
7134
|
+
inputWhenNoVariables: /* @__PURE__ */ jsx65(
|
|
7135
|
+
InputSelect6,
|
|
7136
|
+
{
|
|
7137
|
+
id: "locale",
|
|
7138
|
+
options: localeOptions,
|
|
7139
|
+
name: "locale",
|
|
7140
|
+
label: "",
|
|
7141
|
+
value: boundLocale,
|
|
7142
|
+
onChange: (e) => handleFilterChange({ locale: e.target.value })
|
|
7143
|
+
}
|
|
7144
|
+
)
|
|
7145
|
+
}
|
|
7146
|
+
)
|
|
7147
|
+
] });
|
|
7148
|
+
};
|
|
7149
|
+
|
|
7150
|
+
// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
|
|
7151
|
+
import { jsx as jsx66, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
|
|
7152
|
+
var ObjectSearchFilterContainer2 = ({ label, children }) => {
|
|
7153
|
+
return /* @__PURE__ */ jsxs40("div", { children: [
|
|
7154
|
+
label ? /* @__PURE__ */ jsx66("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
|
|
7155
|
+
/* @__PURE__ */ jsx66("div", { css: ObjectSearchFilterContainer, children })
|
|
7156
|
+
] });
|
|
7157
|
+
};
|
|
7158
|
+
|
|
7159
|
+
// src/components/ObjectSearch/QueryFilter.tsx
|
|
7160
|
+
import { DebouncedInputKeywordSearch as DebouncedInputKeywordSearch2, Input as Input5, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm5 } from "@uniformdev/design-system";
|
|
7161
|
+
import { useEffect as useEffect18, useState as useState18 } from "react";
|
|
7162
|
+
import { jsx as jsx67, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
|
|
7163
|
+
var QueryFilter = ({
|
|
7164
|
+
requireContentType,
|
|
7165
|
+
queryFilterTitle = "Configure Query",
|
|
7166
|
+
contentTypeLabel = "Filter by content type",
|
|
7167
|
+
typeSelectorAllTypesOptionText = "All content types",
|
|
7168
|
+
contentTypeOptions,
|
|
7169
|
+
searchInputName = "searchText",
|
|
7170
|
+
searchInputPlaceholderText = "Enter keyword to narrow your results",
|
|
7171
|
+
searchInputLabel = "Query",
|
|
7172
|
+
countLabel = "Count",
|
|
7173
|
+
countValue = 5,
|
|
7174
|
+
sortLabel = "Sort By",
|
|
7175
|
+
sortOptions,
|
|
7176
|
+
sortOrderLabel = "Sort Order",
|
|
7177
|
+
sortOrderOptions = [
|
|
7178
|
+
{
|
|
7179
|
+
value: "asc",
|
|
7180
|
+
label: "Ascending"
|
|
7042
7181
|
},
|
|
7043
7182
|
{
|
|
7044
7183
|
value: "desc",
|
|
@@ -7060,12 +7199,12 @@ var QueryFilter = ({
|
|
|
7060
7199
|
setQueryState((prev) => ({ ...prev, ...value }));
|
|
7061
7200
|
onSetQuery({ ...query, ...value });
|
|
7062
7201
|
};
|
|
7063
|
-
|
|
7202
|
+
useEffect18(() => {
|
|
7064
7203
|
onSetQuery(queryState);
|
|
7065
7204
|
}, []);
|
|
7066
7205
|
return /* @__PURE__ */ jsxs41("fieldset", { children: [
|
|
7067
7206
|
/* @__PURE__ */ jsx67("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
|
|
7068
|
-
/* @__PURE__ */ jsx67("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs41(
|
|
7207
|
+
/* @__PURE__ */ jsx67("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs41(VerticalRhythm5, { children: [
|
|
7069
7208
|
/* @__PURE__ */ jsx67(
|
|
7070
7209
|
InputVariables,
|
|
7071
7210
|
{
|
|
@@ -7185,9 +7324,107 @@ var QueryFilter = ({
|
|
|
7185
7324
|
] });
|
|
7186
7325
|
};
|
|
7187
7326
|
|
|
7188
|
-
// src/components/
|
|
7189
|
-
import {
|
|
7327
|
+
// src/components/ObjectSearch/ObjectSearchListOfSearchResults.tsx
|
|
7328
|
+
import { Callout as Callout6 } from "@uniformdev/design-system";
|
|
7190
7329
|
import { jsx as jsx68 } from "@emotion/react/jsx-runtime";
|
|
7330
|
+
function ObjectSearchListOfSearchResults() {
|
|
7331
|
+
var _a, _b;
|
|
7332
|
+
const { list, isListLoading } = useObjectSearchContext();
|
|
7333
|
+
if (isListLoading) {
|
|
7334
|
+
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ jsx68(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
7335
|
+
}
|
|
7336
|
+
if (((_a = list.items) == null ? void 0 : _a.length) === 0) {
|
|
7337
|
+
return /* @__PURE__ */ jsx68(Callout6, { type: "info", children: "No results were found" });
|
|
7338
|
+
}
|
|
7339
|
+
return (_b = list.items) == null ? void 0 : _b.map((item) => /* @__PURE__ */ jsx68(ObjectSearchListItem, { ...item }, item.id));
|
|
7340
|
+
}
|
|
7341
|
+
|
|
7342
|
+
// src/components/ObjectSearch/hooks/ControlledObjectSearchProvider.tsx
|
|
7343
|
+
import { useCallback as useCallback6, useDeferredValue as useDeferredValue2, useEffect as useEffect19, useMemo as useMemo16, useRef as useRef16 } from "react";
|
|
7344
|
+
import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
|
|
7345
|
+
var ControlledObjectSearchProvider = ({
|
|
7346
|
+
selectedItems,
|
|
7347
|
+
searchResultItems,
|
|
7348
|
+
selectedItemsLoading,
|
|
7349
|
+
searchResultListLoading,
|
|
7350
|
+
onQueryChange = () => {
|
|
7351
|
+
},
|
|
7352
|
+
onSelectItemsChange,
|
|
7353
|
+
isMulti = false,
|
|
7354
|
+
children,
|
|
7355
|
+
query = {},
|
|
7356
|
+
enableFilterByLocale,
|
|
7357
|
+
localeOptions,
|
|
7358
|
+
dynamicEntryId,
|
|
7359
|
+
isManualSelection
|
|
7360
|
+
}) => {
|
|
7361
|
+
var _a, _b;
|
|
7362
|
+
const { flatVariables } = useVariables(true);
|
|
7363
|
+
const querySearchDeferred = useDeferredValue2(query);
|
|
7364
|
+
const innerSelectedItems = useRef16(selectedItems);
|
|
7365
|
+
useEffect19(() => {
|
|
7366
|
+
if (selectedItems !== void 0) {
|
|
7367
|
+
innerSelectedItems.current = selectedItems;
|
|
7368
|
+
}
|
|
7369
|
+
}, [selectedItems]);
|
|
7370
|
+
const onSetQuery = useCallback6(
|
|
7371
|
+
(value) => {
|
|
7372
|
+
const newQuery = { ...query, ...value };
|
|
7373
|
+
onQueryChange(newQuery);
|
|
7374
|
+
},
|
|
7375
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
7376
|
+
[onQueryChange]
|
|
7377
|
+
);
|
|
7378
|
+
const onSelectItem = useCallback6(
|
|
7379
|
+
(selectedResult) => {
|
|
7380
|
+
var _a2;
|
|
7381
|
+
if (Array.isArray(selectedResult)) {
|
|
7382
|
+
innerSelectedItems.current = selectedResult;
|
|
7383
|
+
onSelectItemsChange(selectedResult);
|
|
7384
|
+
} else {
|
|
7385
|
+
const itemIsAlreadySelected = selectedItems == null ? void 0 : selectedItems.some((item) => item.id === selectedResult.id);
|
|
7386
|
+
const updatedSelectedItems = itemIsAlreadySelected ? (_a2 = selectedItems == null ? void 0 : selectedItems.filter((item) => item.id !== selectedResult.id)) != null ? _a2 : [] : [...selectedItems != null ? selectedItems : [], selectedResult];
|
|
7387
|
+
innerSelectedItems.current = updatedSelectedItems;
|
|
7388
|
+
onSelectItemsChange(updatedSelectedItems);
|
|
7389
|
+
}
|
|
7390
|
+
},
|
|
7391
|
+
[onSelectItemsChange, selectedItems]
|
|
7392
|
+
);
|
|
7393
|
+
const onRemoveAllSelectedItems = useCallback6(() => {
|
|
7394
|
+
innerSelectedItems.current = [];
|
|
7395
|
+
onSelectItemsChange([]);
|
|
7396
|
+
}, [onSelectItemsChange]);
|
|
7397
|
+
const list = useMemo16(() => ({ items: searchResultItems }), [searchResultItems]);
|
|
7398
|
+
const boundQuery = useMemo16(() => bindQuery(query, flatVariables), [query, flatVariables]);
|
|
7399
|
+
const isLoadingInitially = Boolean(
|
|
7400
|
+
isManualSelection ? !((_a = innerSelectedItems.current) == null ? void 0 : _a.length) && selectedItemsLoading : selectedItemsLoading
|
|
7401
|
+
);
|
|
7402
|
+
return /* @__PURE__ */ jsx69(
|
|
7403
|
+
ObjectSearchContext.Provider,
|
|
7404
|
+
{
|
|
7405
|
+
value: {
|
|
7406
|
+
boundQuery,
|
|
7407
|
+
onSetQuery,
|
|
7408
|
+
query: querySearchDeferred,
|
|
7409
|
+
onSelectItem,
|
|
7410
|
+
selectedListItems: (_b = isManualSelection ? innerSelectedItems.current : selectedItems) != null ? _b : [],
|
|
7411
|
+
onRemoveAllSelectedItems,
|
|
7412
|
+
list,
|
|
7413
|
+
isSelectedItemsListLoading: isLoadingInitially,
|
|
7414
|
+
isListLoading: searchResultListLoading,
|
|
7415
|
+
isMulti,
|
|
7416
|
+
localeOptions,
|
|
7417
|
+
enableFilterByLocale,
|
|
7418
|
+
dynamicEntryId
|
|
7419
|
+
},
|
|
7420
|
+
children
|
|
7421
|
+
}
|
|
7422
|
+
);
|
|
7423
|
+
};
|
|
7424
|
+
|
|
7425
|
+
// src/components/ParamTypeDynamicDataProvider.tsx
|
|
7426
|
+
import { useEffect as useEffect20, useMemo as useMemo17, useRef as useRef17 } from "react";
|
|
7427
|
+
import { jsx as jsx70 } from "@emotion/react/jsx-runtime";
|
|
7191
7428
|
function ParamTypeDynamicDataProvider(props) {
|
|
7192
7429
|
const { children } = props;
|
|
7193
7430
|
const {
|
|
@@ -7195,11 +7432,11 @@ function ParamTypeDynamicDataProvider(props) {
|
|
|
7195
7432
|
} = useMeshLocation("paramType");
|
|
7196
7433
|
const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
|
|
7197
7434
|
const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
|
|
7198
|
-
const variables =
|
|
7435
|
+
const variables = useMemo17(
|
|
7199
7436
|
() => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
|
|
7200
7437
|
[dynamicInputsAsVariables, connectedDataAsVariables]
|
|
7201
7438
|
);
|
|
7202
|
-
return /* @__PURE__ */
|
|
7439
|
+
return /* @__PURE__ */ jsx70(VariablesProvider, { value: variables, onChange: () => {
|
|
7203
7440
|
}, editVariableComponent: JsonMeshVariableEditor, children });
|
|
7204
7441
|
}
|
|
7205
7442
|
var JsonMeshVariableEditor = ({
|
|
@@ -7208,9 +7445,9 @@ var JsonMeshVariableEditor = ({
|
|
|
7208
7445
|
variable,
|
|
7209
7446
|
context
|
|
7210
7447
|
}) => {
|
|
7211
|
-
const sillyRef =
|
|
7448
|
+
const sillyRef = useRef17(false);
|
|
7212
7449
|
const { editConnectedData } = useMeshLocation("paramType");
|
|
7213
|
-
|
|
7450
|
+
useEffect20(() => {
|
|
7214
7451
|
if (sillyRef.current) {
|
|
7215
7452
|
return;
|
|
7216
7453
|
}
|
|
@@ -7238,102 +7475,2096 @@ var JsonMeshVariableEditor = ({
|
|
|
7238
7475
|
return null;
|
|
7239
7476
|
};
|
|
7240
7477
|
|
|
7241
|
-
// src/components/SearchAndFilter/
|
|
7242
|
-
|
|
7243
|
-
|
|
7244
|
-
|
|
7245
|
-
|
|
7246
|
-
|
|
7247
|
-
|
|
7248
|
-
|
|
7249
|
-
|
|
7250
|
-
|
|
7251
|
-
|
|
7252
|
-
|
|
7253
|
-
|
|
7254
|
-
|
|
7255
|
-
|
|
7256
|
-
|
|
7257
|
-
|
|
7258
|
-
|
|
7259
|
-
|
|
7260
|
-
|
|
7261
|
-
|
|
7262
|
-
|
|
7263
|
-
|
|
7264
|
-
|
|
7265
|
-
|
|
7266
|
-
}
|
|
7267
|
-
|
|
7268
|
-
|
|
7269
|
-
|
|
7478
|
+
// src/components/SearchAndFilter/constants.ts
|
|
7479
|
+
var NUMBER_OPERATORS = [
|
|
7480
|
+
{
|
|
7481
|
+
label: "equals...",
|
|
7482
|
+
symbol: "=",
|
|
7483
|
+
value: "eq",
|
|
7484
|
+
editorType: "number"
|
|
7485
|
+
},
|
|
7486
|
+
{
|
|
7487
|
+
label: "does not equal...",
|
|
7488
|
+
symbol: "\u2260",
|
|
7489
|
+
value: "neq",
|
|
7490
|
+
editorType: "number"
|
|
7491
|
+
},
|
|
7492
|
+
{
|
|
7493
|
+
label: "greater than...",
|
|
7494
|
+
symbol: ">",
|
|
7495
|
+
value: "gt",
|
|
7496
|
+
editorType: "number"
|
|
7497
|
+
},
|
|
7498
|
+
{
|
|
7499
|
+
label: "greater than or equal to...",
|
|
7500
|
+
symbol: "\u2265",
|
|
7501
|
+
value: "gte",
|
|
7502
|
+
editorType: "number"
|
|
7503
|
+
},
|
|
7504
|
+
{
|
|
7505
|
+
label: "less than...",
|
|
7506
|
+
symbol: "<",
|
|
7507
|
+
value: "lt",
|
|
7508
|
+
editorType: "number"
|
|
7509
|
+
},
|
|
7510
|
+
{
|
|
7511
|
+
label: "less than or equal to...",
|
|
7512
|
+
symbol: "\u2264",
|
|
7513
|
+
value: "lte",
|
|
7514
|
+
editorType: "number"
|
|
7515
|
+
},
|
|
7516
|
+
{
|
|
7517
|
+
label: "is empty",
|
|
7518
|
+
value: "ndef",
|
|
7519
|
+
editorType: "empty"
|
|
7520
|
+
},
|
|
7521
|
+
{
|
|
7522
|
+
label: "is between...",
|
|
7523
|
+
value: "between",
|
|
7524
|
+
editorType: "numberRange"
|
|
7525
|
+
},
|
|
7526
|
+
{
|
|
7527
|
+
label: "is not empty",
|
|
7528
|
+
value: "def",
|
|
7529
|
+
editorType: "empty"
|
|
7530
|
+
}
|
|
7531
|
+
];
|
|
7532
|
+
var DATE_OPERATORS = [
|
|
7533
|
+
{
|
|
7534
|
+
label: "is",
|
|
7535
|
+
value: "eq",
|
|
7536
|
+
editorType: "date"
|
|
7537
|
+
},
|
|
7538
|
+
{
|
|
7539
|
+
label: "is between...",
|
|
7540
|
+
value: "between",
|
|
7541
|
+
editorType: "dateRange"
|
|
7542
|
+
},
|
|
7543
|
+
{
|
|
7544
|
+
label: "is before...",
|
|
7545
|
+
value: "lt",
|
|
7546
|
+
editorType: "date"
|
|
7547
|
+
},
|
|
7548
|
+
{
|
|
7549
|
+
label: "is after...",
|
|
7550
|
+
value: "gt",
|
|
7551
|
+
editorType: "date"
|
|
7552
|
+
},
|
|
7553
|
+
{
|
|
7554
|
+
label: "is on or before...",
|
|
7555
|
+
value: "lte",
|
|
7556
|
+
editorType: "date"
|
|
7557
|
+
},
|
|
7558
|
+
{
|
|
7559
|
+
label: "is on or after...",
|
|
7560
|
+
value: "gte",
|
|
7561
|
+
editorType: "date"
|
|
7562
|
+
},
|
|
7563
|
+
{
|
|
7564
|
+
label: "is empty",
|
|
7565
|
+
value: "ndef",
|
|
7566
|
+
editorType: "empty"
|
|
7567
|
+
},
|
|
7568
|
+
{
|
|
7569
|
+
label: "is not",
|
|
7570
|
+
value: "neq",
|
|
7571
|
+
editorType: "date"
|
|
7572
|
+
},
|
|
7573
|
+
{
|
|
7574
|
+
label: "is not empty",
|
|
7575
|
+
value: "def",
|
|
7576
|
+
editorType: "empty"
|
|
7577
|
+
}
|
|
7578
|
+
];
|
|
7579
|
+
var TEXTBOX_OPERATORS = [
|
|
7580
|
+
{
|
|
7581
|
+
label: "contains...",
|
|
7582
|
+
value: "match",
|
|
7583
|
+
editorType: "text"
|
|
7584
|
+
},
|
|
7585
|
+
{
|
|
7586
|
+
label: "is",
|
|
7587
|
+
value: "eq",
|
|
7588
|
+
editorType: "text"
|
|
7589
|
+
},
|
|
7590
|
+
{
|
|
7591
|
+
label: "is empty",
|
|
7592
|
+
value: "ndef",
|
|
7593
|
+
editorType: "empty"
|
|
7594
|
+
},
|
|
7595
|
+
{
|
|
7596
|
+
label: "starts with...",
|
|
7597
|
+
value: "starts",
|
|
7598
|
+
editorType: "text"
|
|
7599
|
+
},
|
|
7600
|
+
{
|
|
7601
|
+
label: "is not",
|
|
7602
|
+
value: "neq",
|
|
7603
|
+
editorType: "text"
|
|
7604
|
+
},
|
|
7605
|
+
{
|
|
7606
|
+
label: "is not empty",
|
|
7607
|
+
value: "def",
|
|
7608
|
+
editorType: "empty"
|
|
7609
|
+
}
|
|
7610
|
+
];
|
|
7611
|
+
var USER_OPERATORS = [
|
|
7612
|
+
{
|
|
7613
|
+
label: "contains...",
|
|
7614
|
+
value: "match",
|
|
7615
|
+
editorType: "text"
|
|
7616
|
+
},
|
|
7617
|
+
{
|
|
7618
|
+
label: "is",
|
|
7619
|
+
value: "eq",
|
|
7620
|
+
editorType: "text"
|
|
7621
|
+
},
|
|
7622
|
+
{
|
|
7623
|
+
label: "starts with...",
|
|
7624
|
+
value: "starts",
|
|
7625
|
+
editorType: "text"
|
|
7626
|
+
},
|
|
7627
|
+
{
|
|
7628
|
+
label: "is not",
|
|
7629
|
+
value: "neq",
|
|
7630
|
+
editorType: "text"
|
|
7631
|
+
}
|
|
7632
|
+
];
|
|
7633
|
+
var SYSTEM_DATE_OPERATORS = [
|
|
7634
|
+
{
|
|
7635
|
+
label: "is",
|
|
7636
|
+
value: "sys-date-eq",
|
|
7637
|
+
editorType: "date"
|
|
7638
|
+
},
|
|
7639
|
+
{
|
|
7640
|
+
label: "is between...",
|
|
7641
|
+
value: "sys-date-between",
|
|
7642
|
+
editorType: "dateRange"
|
|
7643
|
+
},
|
|
7644
|
+
{
|
|
7645
|
+
label: "is before...",
|
|
7646
|
+
value: "sys-date-lt",
|
|
7647
|
+
editorType: "date"
|
|
7648
|
+
},
|
|
7649
|
+
{
|
|
7650
|
+
label: "is after...",
|
|
7651
|
+
value: "sys-date-gt",
|
|
7652
|
+
editorType: "date"
|
|
7653
|
+
},
|
|
7654
|
+
{
|
|
7655
|
+
label: "is on or before...",
|
|
7656
|
+
value: "sys-date-lte",
|
|
7657
|
+
editorType: "date"
|
|
7658
|
+
},
|
|
7659
|
+
{
|
|
7660
|
+
label: "is on or after...",
|
|
7661
|
+
value: "sys-date-gte",
|
|
7662
|
+
editorType: "date"
|
|
7663
|
+
},
|
|
7664
|
+
{
|
|
7665
|
+
label: "is not",
|
|
7666
|
+
value: "sys-date-neq",
|
|
7667
|
+
editorType: "date"
|
|
7668
|
+
}
|
|
7669
|
+
];
|
|
7670
|
+
var RICHTEXT_OPERATORS = [
|
|
7671
|
+
{
|
|
7672
|
+
label: "contains...",
|
|
7673
|
+
value: "match",
|
|
7674
|
+
editorType: "text"
|
|
7675
|
+
},
|
|
7676
|
+
{
|
|
7677
|
+
label: "is empty",
|
|
7678
|
+
value: "ndef",
|
|
7679
|
+
editorType: "empty"
|
|
7680
|
+
},
|
|
7681
|
+
{
|
|
7682
|
+
label: "starts with...",
|
|
7683
|
+
value: "starts",
|
|
7684
|
+
editorType: "text"
|
|
7685
|
+
},
|
|
7686
|
+
{
|
|
7687
|
+
label: "is not empty",
|
|
7688
|
+
value: "def",
|
|
7689
|
+
editorType: "empty"
|
|
7690
|
+
}
|
|
7691
|
+
];
|
|
7692
|
+
var CHECKBOX_OPERATORS = [
|
|
7693
|
+
{
|
|
7694
|
+
label: "is checked",
|
|
7695
|
+
value: "def",
|
|
7696
|
+
editorType: "empty"
|
|
7697
|
+
},
|
|
7698
|
+
{
|
|
7699
|
+
label: "is not checked",
|
|
7700
|
+
value: "ndef",
|
|
7701
|
+
editorType: "empty"
|
|
7702
|
+
}
|
|
7703
|
+
];
|
|
7704
|
+
var SYSTEM_FIELD_OPERATORS = [
|
|
7705
|
+
{
|
|
7706
|
+
label: "is",
|
|
7707
|
+
value: "eq",
|
|
7708
|
+
editorType: "singleChoice"
|
|
7709
|
+
},
|
|
7710
|
+
{
|
|
7711
|
+
label: "is any of...",
|
|
7712
|
+
value: "in",
|
|
7713
|
+
editorType: "multiChoice"
|
|
7714
|
+
},
|
|
7715
|
+
{
|
|
7716
|
+
label: "is not",
|
|
7717
|
+
value: "neq",
|
|
7718
|
+
editorType: "singleChoice"
|
|
7719
|
+
},
|
|
7720
|
+
{
|
|
7721
|
+
label: "is none of...",
|
|
7722
|
+
value: "nin",
|
|
7723
|
+
editorType: "multiChoice"
|
|
7724
|
+
}
|
|
7725
|
+
];
|
|
7726
|
+
var PUBLISH_STATUS_FIELD_OPERATORS = [
|
|
7727
|
+
{
|
|
7728
|
+
label: "is",
|
|
7729
|
+
value: "eq",
|
|
7730
|
+
editorType: "statusSingleChoice"
|
|
7731
|
+
},
|
|
7732
|
+
{
|
|
7733
|
+
label: "is any of...",
|
|
7734
|
+
value: "in",
|
|
7735
|
+
editorType: "statusMultiChoice"
|
|
7736
|
+
},
|
|
7737
|
+
{
|
|
7738
|
+
label: "is not",
|
|
7739
|
+
value: "neq",
|
|
7740
|
+
editorType: "statusSingleChoice"
|
|
7741
|
+
},
|
|
7742
|
+
{
|
|
7743
|
+
label: "is none of...",
|
|
7744
|
+
value: "nin",
|
|
7745
|
+
editorType: "statusMultiChoice"
|
|
7746
|
+
}
|
|
7747
|
+
];
|
|
7748
|
+
var SELECT_OPERATORS = [
|
|
7749
|
+
{
|
|
7750
|
+
label: "is",
|
|
7751
|
+
value: "eq",
|
|
7752
|
+
editorType: "singleChoice"
|
|
7753
|
+
},
|
|
7754
|
+
{
|
|
7755
|
+
label: "is any of...",
|
|
7756
|
+
value: "in",
|
|
7757
|
+
editorType: "multiChoice"
|
|
7758
|
+
},
|
|
7759
|
+
{
|
|
7760
|
+
label: "is empty",
|
|
7761
|
+
value: "ndef",
|
|
7762
|
+
editorType: "empty"
|
|
7763
|
+
},
|
|
7764
|
+
{
|
|
7765
|
+
label: "contains...",
|
|
7766
|
+
value: "match",
|
|
7767
|
+
editorType: "text"
|
|
7768
|
+
},
|
|
7769
|
+
{
|
|
7770
|
+
label: "starts with...",
|
|
7771
|
+
value: "starts",
|
|
7772
|
+
editorType: "text"
|
|
7773
|
+
},
|
|
7774
|
+
{
|
|
7775
|
+
label: "is not",
|
|
7776
|
+
value: "neq",
|
|
7777
|
+
editorType: "singleChoice"
|
|
7778
|
+
},
|
|
7779
|
+
{
|
|
7780
|
+
label: "is none of...",
|
|
7781
|
+
value: "nin",
|
|
7782
|
+
editorType: "multiChoice"
|
|
7783
|
+
},
|
|
7784
|
+
{
|
|
7785
|
+
label: "is not empty",
|
|
7786
|
+
value: "def",
|
|
7787
|
+
editorType: "empty"
|
|
7788
|
+
}
|
|
7789
|
+
];
|
|
7790
|
+
|
|
7791
|
+
// src/components/SearchAndFilter/FilterButton.tsx
|
|
7792
|
+
import { Counter as Counter2, Icon as Icon6 } from "@uniformdev/design-system";
|
|
7793
|
+
|
|
7794
|
+
// src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
|
|
7795
|
+
import { css as css38 } from "@emotion/react";
|
|
7796
|
+
import { cq, fadeInLtr } from "@uniformdev/design-system";
|
|
7797
|
+
var SearchAndFilterControlsWrapper = (gridColumns) => css38`
|
|
7798
|
+
align-items: stretch;
|
|
7799
|
+
display: grid;
|
|
7800
|
+
grid-template-columns: ${gridColumns};
|
|
7801
|
+
gap: var(--spacing-sm);
|
|
7802
|
+
`;
|
|
7803
|
+
var SearchAndFilterOutterControlWrapper = (gridColumns) => css38`
|
|
7804
|
+
align-items: stretch;
|
|
7805
|
+
display: grid;
|
|
7806
|
+
grid-template-columns: ${gridColumns};
|
|
7807
|
+
gap: var(--spacing-sm);
|
|
7808
|
+
`;
|
|
7809
|
+
var ConditionalFilterRow = css38`
|
|
7810
|
+
display: grid;
|
|
7811
|
+
grid-template-columns: 35px 1fr;
|
|
7812
|
+
gap: var(--spacing-sm);
|
|
7813
|
+
margin-left: var(--spacing-base);
|
|
7814
|
+
|
|
7815
|
+
${cq("380px")} {
|
|
7816
|
+
align-items: center;
|
|
7817
|
+
|
|
7818
|
+
&:after {
|
|
7819
|
+
content: '';
|
|
7820
|
+
display: block;
|
|
7821
|
+
height: 1px;
|
|
7822
|
+
background: var(--gray-300);
|
|
7823
|
+
width: calc(100% - var(--spacing-base));
|
|
7824
|
+
margin-left: var(--spacing-base);
|
|
7825
|
+
}
|
|
7826
|
+
&:last-of-type:after {
|
|
7827
|
+
display: none;
|
|
7828
|
+
}
|
|
7829
|
+
}
|
|
7830
|
+
|
|
7831
|
+
&:nth-of-type(2) {
|
|
7832
|
+
margin-left: 0;
|
|
7833
|
+
grid-template-columns: 50px 1fr;
|
|
7834
|
+
}
|
|
7835
|
+
|
|
7836
|
+
${cq("580px")} {
|
|
7837
|
+
&:after {
|
|
7838
|
+
display: none;
|
|
7839
|
+
}
|
|
7840
|
+
}
|
|
7841
|
+
|
|
7842
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
7843
|
+
animation: ${fadeInLtr} var(--duration-fast) var(--timing-ease-out);
|
|
7844
|
+
}
|
|
7845
|
+
`;
|
|
7846
|
+
var ConditionalInputRow = css38`
|
|
7847
|
+
display: flex;
|
|
7848
|
+
gap: var(--spacing-sm);
|
|
7849
|
+
flex-wrap: wrap;
|
|
7850
|
+
|
|
7851
|
+
${cq("380px")} {
|
|
7852
|
+
& > div:nth-child(-n + 2) {
|
|
7853
|
+
width: calc(50% - var(--spacing-sm));
|
|
7854
|
+
}
|
|
7855
|
+
|
|
7856
|
+
& > div:nth-child(n + 3) {
|
|
7857
|
+
width: calc(100% - 48px);
|
|
7858
|
+
}
|
|
7859
|
+
}
|
|
7860
|
+
${cq("764px")} {
|
|
7861
|
+
display: grid;
|
|
7862
|
+
grid-template-columns: 200px 160px 1fr 32px;
|
|
7863
|
+
|
|
7864
|
+
& > div:nth-child(n) {
|
|
7865
|
+
width: auto;
|
|
7866
|
+
}
|
|
7867
|
+
}
|
|
7868
|
+
`;
|
|
7869
|
+
var SearchInput = css38`
|
|
7870
|
+
max-height: 40px;
|
|
7871
|
+
min-height: unset;
|
|
7872
|
+
`;
|
|
7873
|
+
var BindableKeywordSearchInputStyles = css38`
|
|
7874
|
+
position: relative;
|
|
7875
|
+
width: 100%;
|
|
7876
|
+
|
|
7877
|
+
& [data-lexical-editor='true'] {
|
|
7878
|
+
padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
|
|
7879
|
+
font-size: var(--fs-sm);
|
|
7880
|
+
border-radius: var(--rounded-full);
|
|
7881
|
+
max-height: 40px;
|
|
7882
|
+
min-height: unset;
|
|
7883
|
+
width: 100%;
|
|
7884
|
+
position: relative;
|
|
7885
|
+
white-space: nowrap;
|
|
7886
|
+
}
|
|
7887
|
+
`;
|
|
7888
|
+
var ClearSearchButtonContainer = css38`
|
|
7889
|
+
align-items: center;
|
|
7890
|
+
display: flex;
|
|
7891
|
+
position: absolute;
|
|
7892
|
+
inset: 0 var(--spacing-lg) 0 auto;
|
|
7893
|
+
`;
|
|
7894
|
+
var ClearSearchButtonStyles = css38`
|
|
7895
|
+
background: none;
|
|
7896
|
+
border: none;
|
|
7897
|
+
padding: 0;
|
|
7898
|
+
pointer-events: all;
|
|
7899
|
+
`;
|
|
7900
|
+
var FilterButton = css38`
|
|
7901
|
+
align-items: center;
|
|
7902
|
+
background: var(--white);
|
|
7903
|
+
border: 1px solid var(--gray-300);
|
|
7904
|
+
border-radius: var(--rounded-full);
|
|
7905
|
+
color: var(--typography-base);
|
|
7906
|
+
display: flex;
|
|
7907
|
+
font-size: var(--fs-sm);
|
|
7908
|
+
gap: var(--spacing-sm);
|
|
7909
|
+
padding: var(--spacing-sm) var(--spacing-base);
|
|
7910
|
+
max-height: 40px;
|
|
7911
|
+
transition: color var(--duration-fast) var(--timing-ease-out),
|
|
7912
|
+
background-color var(--duration-fast) var(--timing-ease-out),
|
|
7913
|
+
border-color var(--duration-fast) var(--timing-ease-out),
|
|
7914
|
+
box-shadow var(--duration-fast) var(--timing-ease-out);
|
|
7915
|
+
|
|
7916
|
+
svg {
|
|
7917
|
+
color: var(--gray-300);
|
|
7918
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
7919
|
+
}
|
|
7920
|
+
|
|
7921
|
+
&:hover,
|
|
7922
|
+
:where([aria-expanded='true']) {
|
|
7923
|
+
outline: none;
|
|
7924
|
+
background: var(--gray-200);
|
|
7925
|
+
border-color: var(--gray-300);
|
|
7926
|
+
|
|
7927
|
+
svg {
|
|
7928
|
+
color: var(--typography-base);
|
|
7929
|
+
}
|
|
7930
|
+
}
|
|
7931
|
+
|
|
7932
|
+
&:disabled {
|
|
7933
|
+
opacity: var(--opacity-50);
|
|
7934
|
+
}
|
|
7935
|
+
`;
|
|
7936
|
+
var FilterButtonText = css38`
|
|
7937
|
+
overflow: hidden;
|
|
7938
|
+
text-overflow: ellipsis;
|
|
7939
|
+
white-space: nowrap;
|
|
7940
|
+
max-width: 14ch;
|
|
7941
|
+
`;
|
|
7942
|
+
var FilterButtonSelected = css38`
|
|
7943
|
+
background: var(--gray-100);
|
|
7944
|
+
border-color: var(--gray-300);
|
|
7945
|
+
|
|
7946
|
+
svg {
|
|
7947
|
+
color: var(--accent-dark);
|
|
7948
|
+
}
|
|
7949
|
+
`;
|
|
7950
|
+
var FilterButtonWithOptions = css38`
|
|
7951
|
+
:where([aria-expanded='true']) {
|
|
7952
|
+
background: var(--purple-rain-100);
|
|
7953
|
+
border-color: var(--accent-light);
|
|
7954
|
+
color: var(--typography-base);
|
|
7955
|
+
box-shadow: var(--elevation-100);
|
|
7956
|
+
|
|
7957
|
+
svg {
|
|
7958
|
+
color: var(--accent-dark);
|
|
7959
|
+
}
|
|
7960
|
+
}
|
|
7961
|
+
`;
|
|
7962
|
+
var SearchIcon = css38`
|
|
7963
|
+
color: var(--icon-color);
|
|
7964
|
+
position: absolute;
|
|
7965
|
+
inset: 0 var(--spacing-base) 0 auto;
|
|
7966
|
+
margin: auto;
|
|
7967
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
7968
|
+
`;
|
|
7969
|
+
var AddConditionalBtn = css38`
|
|
7970
|
+
align-items: center;
|
|
7971
|
+
background: transparent;
|
|
7972
|
+
border: none;
|
|
7973
|
+
color: var(--primary-action-default);
|
|
7974
|
+
display: flex;
|
|
7975
|
+
gap: var(--spacing-sm);
|
|
7976
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
7977
|
+
padding: 0;
|
|
7978
|
+
|
|
7979
|
+
&:hover,
|
|
7980
|
+
&:focus {
|
|
7981
|
+
color: var(--primary-action-hover);
|
|
7982
|
+
}
|
|
7983
|
+
|
|
7984
|
+
&:disabled {
|
|
7985
|
+
color: var(--gray-400);
|
|
7986
|
+
}
|
|
7987
|
+
`;
|
|
7988
|
+
var Title = css38`
|
|
7989
|
+
color: var(--typography-light);
|
|
7990
|
+
|
|
7991
|
+
&:focus {
|
|
7992
|
+
outline: none;
|
|
7993
|
+
}
|
|
7994
|
+
`;
|
|
7995
|
+
var ResetConditionsBtn = css38`
|
|
7996
|
+
background: transparent;
|
|
7997
|
+
border: none;
|
|
7998
|
+
color: var(--action-destructive-default);
|
|
7999
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
8000
|
+
padding: 0;
|
|
8001
|
+
|
|
8002
|
+
&:hover,
|
|
8003
|
+
&:focus {
|
|
8004
|
+
color: var(--action-destructive-hover);
|
|
8005
|
+
}
|
|
8006
|
+
`;
|
|
8007
|
+
var IconBtn = css38`
|
|
8008
|
+
background: transparent;
|
|
8009
|
+
border: none;
|
|
8010
|
+
padding: var(--spacing-sm);
|
|
8011
|
+
`;
|
|
8012
|
+
var SearchAndFilterOptionsContainer = css38`
|
|
8013
|
+
background: var(--gray-50);
|
|
8014
|
+
border: 1px solid var(--gray-300);
|
|
8015
|
+
border-radius: var(--rounded-base);
|
|
8016
|
+
container-type: inline-size;
|
|
8017
|
+
display: flex;
|
|
8018
|
+
flex-direction: column;
|
|
8019
|
+
gap: var(--spacing-sm);
|
|
8020
|
+
padding: var(--spacing-md) 0 var(--spacing-base);
|
|
8021
|
+
will-change: height;
|
|
8022
|
+
position: relative;
|
|
8023
|
+
z-index: 1;
|
|
8024
|
+
`;
|
|
8025
|
+
var SearchAndFilterOptionsInnerContainer = css38`
|
|
8026
|
+
display: flex;
|
|
8027
|
+
flex-direction: column;
|
|
8028
|
+
gap: var(--spacing-sm);
|
|
8029
|
+
padding-inline: var(--spacing-md);
|
|
8030
|
+
`;
|
|
8031
|
+
var SearchAndFilterButtonGroup = css38`
|
|
8032
|
+
margin-top: var(--spacing-xs);
|
|
8033
|
+
margin-left: calc(56px + var(--spacing-md));
|
|
8034
|
+
`;
|
|
8035
|
+
|
|
8036
|
+
// src/components/SearchAndFilter/FilterButton.tsx
|
|
8037
|
+
import { jsx as jsx71, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
|
|
8038
|
+
var FilterButton2 = ({
|
|
8039
|
+
text = "Filters",
|
|
8040
|
+
icon = "filter-add",
|
|
8041
|
+
filterCount,
|
|
8042
|
+
hasSelectedValue,
|
|
8043
|
+
dataTestId,
|
|
8044
|
+
...props
|
|
8045
|
+
}) => {
|
|
8046
|
+
return /* @__PURE__ */ jsxs42(
|
|
8047
|
+
"button",
|
|
8048
|
+
{
|
|
8049
|
+
type: "button",
|
|
8050
|
+
css: [
|
|
8051
|
+
FilterButton,
|
|
8052
|
+
hasSelectedValue ? FilterButtonSelected : void 0,
|
|
8053
|
+
filterCount ? [FilterButtonWithOptions, FilterButtonSelected] : void 0
|
|
8054
|
+
],
|
|
8055
|
+
...props,
|
|
8056
|
+
"data-testid": dataTestId,
|
|
8057
|
+
children: [
|
|
8058
|
+
/* @__PURE__ */ jsx71(Icon6, { icon, iconColor: "currentColor", size: "1rem" }),
|
|
8059
|
+
/* @__PURE__ */ jsx71("span", { css: FilterButtonText, children: text }),
|
|
8060
|
+
filterCount ? /* @__PURE__ */ jsx71(Counter2, { count: filterCount, bgColor: "var(--white)" }) : null
|
|
8061
|
+
]
|
|
8062
|
+
}
|
|
8063
|
+
);
|
|
8064
|
+
};
|
|
8065
|
+
|
|
8066
|
+
// src/components/SearchAndFilter/FilterControls.tsx
|
|
8067
|
+
import { CgClose as CgClose5 } from "@react-icons/all-files/cg/CgClose";
|
|
8068
|
+
import { Icon as Icon7, InputKeywordSearch as InputKeywordSearch2 } from "@uniformdev/design-system";
|
|
8069
|
+
import { CLEAR_EDITOR_COMMAND as CLEAR_EDITOR_COMMAND2 } from "lexical";
|
|
8070
|
+
import { useEffect as useEffect23, useRef as useRef18, useState as useState21 } from "react";
|
|
8071
|
+
import { useDebounce as useDebounce6 } from "react-use";
|
|
8072
|
+
import { v4 as v43 } from "uuid";
|
|
8073
|
+
|
|
8074
|
+
// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
|
|
8075
|
+
import { VerticalRhythm as VerticalRhythm6 } from "@uniformdev/design-system";
|
|
8076
|
+
import {
|
|
8077
|
+
createContext as createContext7,
|
|
8078
|
+
useCallback as useCallback7,
|
|
8079
|
+
useContext as useContext9,
|
|
8080
|
+
useDeferredValue as useDeferredValue3,
|
|
8081
|
+
useEffect as useEffect22,
|
|
8082
|
+
useMemo as useMemo18,
|
|
8083
|
+
useState as useState20
|
|
8084
|
+
} from "react";
|
|
8085
|
+
|
|
8086
|
+
// src/components/SearchAndFilter/FilterEditor.tsx
|
|
8087
|
+
import { FieldMessage, Input as Input6, InputComboBox, StatusBullet } from "@uniformdev/design-system";
|
|
8088
|
+
import { useEffect as useEffect21, useState as useState19 } from "react";
|
|
8089
|
+
import { useDebounce as useDebounce5 } from "react-use";
|
|
8090
|
+
import { Fragment as Fragment15, jsx as jsx72, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
|
|
8091
|
+
var readOnlyAttributes = {
|
|
8092
|
+
isSearchable: false,
|
|
8093
|
+
menuIsOpen: false,
|
|
8094
|
+
isClearable: false
|
|
8095
|
+
};
|
|
8096
|
+
var FilterMultiChoiceEditor = ({
|
|
8097
|
+
value,
|
|
8098
|
+
options,
|
|
8099
|
+
disabled,
|
|
8100
|
+
readOnly,
|
|
8101
|
+
valueTestId,
|
|
8102
|
+
...props
|
|
8103
|
+
}) => {
|
|
8104
|
+
const readOnlyProps = readOnly ? readOnlyAttributes : {};
|
|
8105
|
+
const isClearable = !readOnly || !disabled;
|
|
8106
|
+
return /* @__PURE__ */ jsx72("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx72(
|
|
8107
|
+
InputComboBox,
|
|
8108
|
+
{
|
|
8109
|
+
...props,
|
|
8110
|
+
placeholder: "Type to search...",
|
|
8111
|
+
options,
|
|
8112
|
+
isMulti: true,
|
|
8113
|
+
isClearable,
|
|
8114
|
+
isDisabled: disabled,
|
|
8115
|
+
onChange: (e) => {
|
|
8116
|
+
var _a;
|
|
8117
|
+
return props.onChange((_a = e == null ? void 0 : e.map((option) => option.value)) != null ? _a : []);
|
|
8118
|
+
},
|
|
8119
|
+
value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
|
|
8120
|
+
"aria-readonly": readOnly,
|
|
8121
|
+
styles: {
|
|
8122
|
+
menu(base) {
|
|
8123
|
+
return {
|
|
8124
|
+
...base,
|
|
8125
|
+
minWidth: "max-content"
|
|
8126
|
+
};
|
|
8127
|
+
}
|
|
8128
|
+
},
|
|
8129
|
+
...readOnlyProps
|
|
8130
|
+
}
|
|
8131
|
+
) });
|
|
8132
|
+
};
|
|
8133
|
+
var FilterSingleChoiceEditor = ({
|
|
8134
|
+
options,
|
|
8135
|
+
value,
|
|
8136
|
+
disabled,
|
|
8137
|
+
readOnly,
|
|
8138
|
+
onChange,
|
|
8139
|
+
valueTestId
|
|
8140
|
+
}) => {
|
|
8141
|
+
var _a;
|
|
8142
|
+
const readOnlyProps = readOnly ? readOnlyAttributes : {};
|
|
8143
|
+
return /* @__PURE__ */ jsx72("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx72(
|
|
8144
|
+
InputComboBox,
|
|
8145
|
+
{
|
|
8146
|
+
placeholder: "Type to search...",
|
|
8147
|
+
options,
|
|
8148
|
+
isClearable: true,
|
|
8149
|
+
onChange: (e) => {
|
|
8150
|
+
var _a2;
|
|
8151
|
+
return onChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
|
|
8152
|
+
},
|
|
8153
|
+
isDisabled: disabled,
|
|
8154
|
+
value: (_a = options == null ? void 0 : options.find((option) => option.value === value)) != null ? _a : null,
|
|
8155
|
+
"aria-readonly": readOnly,
|
|
8156
|
+
styles: {
|
|
8157
|
+
menu(base) {
|
|
8158
|
+
return {
|
|
8159
|
+
...base,
|
|
8160
|
+
minWidth: "max-content"
|
|
8161
|
+
};
|
|
8162
|
+
}
|
|
8163
|
+
},
|
|
8164
|
+
...readOnlyProps
|
|
8165
|
+
}
|
|
8166
|
+
) });
|
|
8167
|
+
};
|
|
8168
|
+
var CustomOptions = ({ label, value }) => {
|
|
8169
|
+
return /* @__PURE__ */ jsx72(StatusBullet, { status: label, message: value });
|
|
8170
|
+
};
|
|
8171
|
+
var StatusMultiEditor = ({
|
|
8172
|
+
options,
|
|
8173
|
+
value,
|
|
8174
|
+
disabled,
|
|
8175
|
+
readOnly,
|
|
8176
|
+
onChange,
|
|
8177
|
+
valueTestId
|
|
8178
|
+
}) => {
|
|
8179
|
+
const readOnlyProps = readOnly ? readOnlyAttributes : {};
|
|
8180
|
+
return /* @__PURE__ */ jsx72("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx72(
|
|
8181
|
+
InputComboBox,
|
|
8182
|
+
{
|
|
8183
|
+
options,
|
|
8184
|
+
isMulti: true,
|
|
8185
|
+
onChange: (e) => {
|
|
8186
|
+
var _a;
|
|
8187
|
+
return onChange((_a = e.map((item) => item.value)) != null ? _a : []);
|
|
8188
|
+
},
|
|
8189
|
+
formatOptionLabel: CustomOptions,
|
|
8190
|
+
"aria-readonly": readOnly,
|
|
8191
|
+
value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
|
|
8192
|
+
isDisabled: disabled,
|
|
8193
|
+
styles: {
|
|
8194
|
+
menu(base) {
|
|
8195
|
+
return {
|
|
8196
|
+
...base,
|
|
8197
|
+
minWidth: "max-content"
|
|
8198
|
+
};
|
|
8199
|
+
}
|
|
8200
|
+
},
|
|
8201
|
+
...readOnlyProps
|
|
8202
|
+
}
|
|
8203
|
+
) });
|
|
8204
|
+
};
|
|
8205
|
+
var StatusSingleEditor = ({
|
|
8206
|
+
options,
|
|
8207
|
+
value,
|
|
8208
|
+
disabled,
|
|
8209
|
+
readOnly,
|
|
8210
|
+
onChange,
|
|
8211
|
+
valueTestId
|
|
8212
|
+
}) => {
|
|
8213
|
+
const readOnlyProps = readOnly ? readOnlyAttributes : {};
|
|
8214
|
+
return /* @__PURE__ */ jsx72("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx72(
|
|
8215
|
+
InputComboBox,
|
|
8216
|
+
{
|
|
8217
|
+
options,
|
|
8218
|
+
onChange: (e) => {
|
|
8219
|
+
var _a;
|
|
8220
|
+
return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
|
|
8221
|
+
},
|
|
8222
|
+
formatOptionLabel: CustomOptions,
|
|
8223
|
+
"aria-readonly": readOnly,
|
|
8224
|
+
value: options == null ? void 0 : options.find((option) => option.value === value),
|
|
8225
|
+
isDisabled: disabled,
|
|
8226
|
+
styles: {
|
|
8227
|
+
menu(base) {
|
|
8228
|
+
return {
|
|
8229
|
+
...base,
|
|
8230
|
+
minWidth: "max-content"
|
|
8231
|
+
};
|
|
8232
|
+
}
|
|
8233
|
+
},
|
|
8234
|
+
...readOnlyProps
|
|
8235
|
+
}
|
|
8236
|
+
) });
|
|
8237
|
+
};
|
|
8238
|
+
var TextEditor = ({
|
|
8239
|
+
onChange,
|
|
8240
|
+
ariaLabel,
|
|
8241
|
+
value,
|
|
8242
|
+
readOnly,
|
|
8243
|
+
valueTestId
|
|
8244
|
+
}) => {
|
|
8245
|
+
const [innerValue, setInnerValue] = useState19(value != null ? value : "");
|
|
8246
|
+
useDebounce5(() => onChange(innerValue), 500, [innerValue]);
|
|
8247
|
+
return /* @__PURE__ */ jsx72(
|
|
8248
|
+
Input6,
|
|
8249
|
+
{
|
|
8250
|
+
showLabel: false,
|
|
8251
|
+
label: ariaLabel,
|
|
8252
|
+
onChange: (e) => setInnerValue(e.currentTarget.value),
|
|
8253
|
+
placeholder: "Enter phrase to search\u2026",
|
|
8254
|
+
value: innerValue,
|
|
8255
|
+
readOnly,
|
|
8256
|
+
"data-testid": valueTestId
|
|
8257
|
+
}
|
|
8258
|
+
);
|
|
8259
|
+
};
|
|
8260
|
+
var NumberRangeEditor = ({
|
|
8261
|
+
onChange,
|
|
8262
|
+
disabled,
|
|
8263
|
+
ariaLabel,
|
|
8264
|
+
value,
|
|
8265
|
+
readOnly,
|
|
8266
|
+
valueTestId
|
|
8267
|
+
}) => {
|
|
8268
|
+
const [minValue, setMinValue] = useState19("");
|
|
8269
|
+
const [maxValue, setMaxValue] = useState19("");
|
|
8270
|
+
const [error, setError] = useState19("");
|
|
8271
|
+
useDebounce5(
|
|
8272
|
+
() => {
|
|
8273
|
+
if (minValue && maxValue && !error) {
|
|
8274
|
+
onChange([minValue, maxValue]);
|
|
8275
|
+
} else {
|
|
8276
|
+
onChange([]);
|
|
8277
|
+
}
|
|
8278
|
+
},
|
|
8279
|
+
500,
|
|
8280
|
+
[minValue, maxValue]
|
|
8281
|
+
);
|
|
8282
|
+
useEffect21(() => {
|
|
8283
|
+
if (!maxValue && !minValue) {
|
|
8284
|
+
return;
|
|
8285
|
+
}
|
|
8286
|
+
const max = Number(maxValue);
|
|
8287
|
+
const min = Number(minValue);
|
|
8288
|
+
if (max < min || min > max) {
|
|
8289
|
+
setError("Please enter a valid numeric range");
|
|
8290
|
+
return;
|
|
8291
|
+
}
|
|
8292
|
+
if (maxValue && !minValue || minValue && !maxValue) {
|
|
8293
|
+
setError("Please enter both a low and high number");
|
|
8294
|
+
return;
|
|
8295
|
+
}
|
|
8296
|
+
if (error) {
|
|
8297
|
+
setError("");
|
|
8298
|
+
}
|
|
8299
|
+
if (min && max) {
|
|
8300
|
+
setMinValue(minValue);
|
|
8301
|
+
setMaxValue(maxValue);
|
|
8302
|
+
}
|
|
8303
|
+
}, [maxValue, minValue, setError]);
|
|
8304
|
+
return /* @__PURE__ */ jsxs43(Fragment15, { children: [
|
|
8305
|
+
/* @__PURE__ */ jsxs43("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
|
|
8306
|
+
/* @__PURE__ */ jsx72(
|
|
8307
|
+
Input6,
|
|
8308
|
+
{
|
|
8309
|
+
label: `${ariaLabel}-min`,
|
|
8310
|
+
type: "number",
|
|
8311
|
+
showLabel: false,
|
|
8312
|
+
min: 0,
|
|
8313
|
+
placeholder: "Low",
|
|
8314
|
+
onChange: (e) => setMinValue(e.currentTarget.value),
|
|
8315
|
+
"aria-invalid": !error ? false : true,
|
|
8316
|
+
disabled,
|
|
8317
|
+
value: value ? value[0] : "",
|
|
8318
|
+
readOnly,
|
|
8319
|
+
"data-testid": "value-low"
|
|
8320
|
+
}
|
|
8321
|
+
),
|
|
8322
|
+
/* @__PURE__ */ jsx72(
|
|
8323
|
+
Input6,
|
|
8324
|
+
{
|
|
8325
|
+
type: "number",
|
|
8326
|
+
label: `${ariaLabel}-max`,
|
|
8327
|
+
showLabel: false,
|
|
8328
|
+
min: 0,
|
|
8329
|
+
placeholder: "High",
|
|
8330
|
+
onChange: (e) => setMaxValue(e.currentTarget.value),
|
|
8331
|
+
"aria-invalid": !error ? false : true,
|
|
8332
|
+
disabled,
|
|
8333
|
+
value: value ? value[1] : "",
|
|
8334
|
+
readOnly,
|
|
8335
|
+
"data-testid": "value-high"
|
|
8336
|
+
}
|
|
8337
|
+
)
|
|
8338
|
+
] }),
|
|
8339
|
+
/* @__PURE__ */ jsx72(ErrorContainer, { errorMessage: error })
|
|
8340
|
+
] });
|
|
8341
|
+
};
|
|
8342
|
+
var NumberEditor = ({
|
|
8343
|
+
ariaLabel,
|
|
8344
|
+
onChange,
|
|
8345
|
+
disabled,
|
|
8346
|
+
value,
|
|
8347
|
+
readOnly,
|
|
8348
|
+
valueTestId
|
|
8349
|
+
}) => {
|
|
8350
|
+
const [innerValue, setInnerValue] = useState19(value != null ? value : "");
|
|
8351
|
+
useDebounce5(() => onChange(innerValue), 500, [innerValue]);
|
|
8352
|
+
return /* @__PURE__ */ jsx72(
|
|
8353
|
+
Input6,
|
|
8354
|
+
{
|
|
8355
|
+
label: ariaLabel,
|
|
8356
|
+
type: "number",
|
|
8357
|
+
showLabel: false,
|
|
8358
|
+
min: 0,
|
|
8359
|
+
onChange: (e) => setInnerValue(e.currentTarget.value),
|
|
8360
|
+
disabled,
|
|
8361
|
+
value: innerValue,
|
|
8362
|
+
readOnly,
|
|
8363
|
+
"data-testid": valueTestId
|
|
8364
|
+
}
|
|
8365
|
+
);
|
|
8366
|
+
};
|
|
8367
|
+
var DateEditor = ({
|
|
8368
|
+
onChange,
|
|
8369
|
+
ariaLabel,
|
|
8370
|
+
disabled,
|
|
8371
|
+
value,
|
|
8372
|
+
readOnly,
|
|
8373
|
+
valueTestId
|
|
8374
|
+
}) => {
|
|
8375
|
+
const [innerValue, setInnerValue] = useState19(value != null ? value : "");
|
|
8376
|
+
useDebounce5(() => onChange(innerValue), 500, [innerValue]);
|
|
8377
|
+
return /* @__PURE__ */ jsx72(
|
|
8378
|
+
Input6,
|
|
8379
|
+
{
|
|
8380
|
+
type: "date",
|
|
8381
|
+
label: ariaLabel,
|
|
8382
|
+
showLabel: false,
|
|
8383
|
+
onChange: (e) => setInnerValue(e.currentTarget.value),
|
|
8384
|
+
disabled,
|
|
8385
|
+
value: innerValue,
|
|
8386
|
+
readOnly,
|
|
8387
|
+
"data-testid": valueTestId
|
|
8388
|
+
}
|
|
8389
|
+
);
|
|
8390
|
+
};
|
|
8391
|
+
var DateRangeEditor = ({
|
|
8392
|
+
ariaLabel,
|
|
8393
|
+
onChange,
|
|
8394
|
+
disabled,
|
|
8395
|
+
value,
|
|
8396
|
+
readOnly,
|
|
8397
|
+
valueTestId
|
|
8398
|
+
}) => {
|
|
8399
|
+
const [minDateValue, setMinDateValue] = useState19(value ? value[0] : "");
|
|
8400
|
+
const [maxDateValue, setMaxDateValue] = useState19(value ? value[1] : "");
|
|
8401
|
+
const [error, setError] = useState19("");
|
|
8402
|
+
useDebounce5(
|
|
8403
|
+
() => {
|
|
8404
|
+
if (minDateValue && maxDateValue && !error) {
|
|
8405
|
+
onChange([minDateValue, maxDateValue]);
|
|
8406
|
+
} else {
|
|
8407
|
+
onChange([]);
|
|
8408
|
+
}
|
|
8409
|
+
},
|
|
8410
|
+
500,
|
|
8411
|
+
[minDateValue, maxDateValue]
|
|
8412
|
+
);
|
|
8413
|
+
useEffect21(() => {
|
|
8414
|
+
if (!minDateValue || !maxDateValue) {
|
|
8415
|
+
return;
|
|
8416
|
+
}
|
|
8417
|
+
const minDate = new Date(minDateValue);
|
|
8418
|
+
const maxDate = new Date(maxDateValue);
|
|
8419
|
+
if (maxDate < minDate) {
|
|
8420
|
+
setError("The max date cannot be lower than the min date");
|
|
8421
|
+
return;
|
|
8422
|
+
}
|
|
8423
|
+
if (maxDate && !minDate) {
|
|
8424
|
+
setError("Please enter both a low and high date");
|
|
8425
|
+
return;
|
|
8426
|
+
}
|
|
8427
|
+
const minDateString = minDate.toDateString();
|
|
8428
|
+
const maxDateString = maxDate.toDateString();
|
|
8429
|
+
if (minDateString === maxDateString || maxDateString === minDateString) {
|
|
8430
|
+
setError("The min and max date cannot be the same");
|
|
8431
|
+
return;
|
|
8432
|
+
}
|
|
8433
|
+
if (minDate > maxDate) {
|
|
8434
|
+
setError("The min date cannot be higher than the max date");
|
|
8435
|
+
return;
|
|
8436
|
+
}
|
|
8437
|
+
if (error) {
|
|
8438
|
+
setError("");
|
|
8439
|
+
}
|
|
8440
|
+
if (minDate && maxDate) {
|
|
8441
|
+
setMinDateValue(minDateValue);
|
|
8442
|
+
setMaxDateValue(maxDateValue);
|
|
8443
|
+
} else {
|
|
8444
|
+
setMinDateValue("");
|
|
8445
|
+
setMaxDateValue("");
|
|
8446
|
+
}
|
|
8447
|
+
}, [minDateValue, maxDateValue, setError]);
|
|
8448
|
+
return /* @__PURE__ */ jsxs43(Fragment15, { children: [
|
|
8449
|
+
/* @__PURE__ */ jsxs43("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
|
|
8450
|
+
/* @__PURE__ */ jsx72(
|
|
8451
|
+
Input6,
|
|
8452
|
+
{
|
|
8453
|
+
label: `${ariaLabel}-min-date`,
|
|
8454
|
+
type: "date",
|
|
8455
|
+
showLabel: false,
|
|
8456
|
+
value: minDateValue,
|
|
8457
|
+
onChange: (e) => setMinDateValue(e.currentTarget.value),
|
|
8458
|
+
"aria-invalid": !error ? false : true,
|
|
8459
|
+
disabled,
|
|
8460
|
+
readOnly,
|
|
8461
|
+
"data-testid": "value-low"
|
|
8462
|
+
}
|
|
8463
|
+
),
|
|
8464
|
+
/* @__PURE__ */ jsx72(
|
|
8465
|
+
Input6,
|
|
8466
|
+
{
|
|
8467
|
+
label: `${ariaLabel}-max-date`,
|
|
8468
|
+
type: "date",
|
|
8469
|
+
showLabel: false,
|
|
8470
|
+
value: maxDateValue,
|
|
8471
|
+
onChange: (e) => setMaxDateValue(e.currentTarget.value),
|
|
8472
|
+
"aria-invalid": !error ? false : true,
|
|
8473
|
+
disabled,
|
|
8474
|
+
readOnly,
|
|
8475
|
+
"data-testid": "value-high"
|
|
8476
|
+
}
|
|
8477
|
+
)
|
|
8478
|
+
] }),
|
|
8479
|
+
/* @__PURE__ */ jsx72(ErrorContainer, { errorMessage: error })
|
|
8480
|
+
] });
|
|
8481
|
+
};
|
|
8482
|
+
var FilterEditorRenderer = ({ editorType, ...props }) => {
|
|
8483
|
+
const { filterMapper: contextFilterMapper } = useSearchAndFilter();
|
|
8484
|
+
const Editor = contextFilterMapper == null ? void 0 : contextFilterMapper[editorType];
|
|
8485
|
+
if (!Editor) {
|
|
8486
|
+
return null;
|
|
8487
|
+
}
|
|
8488
|
+
if (editorType === "empty") {
|
|
8489
|
+
return null;
|
|
8490
|
+
}
|
|
8491
|
+
return /* @__PURE__ */ jsx72(Editor, { ...props });
|
|
8492
|
+
};
|
|
8493
|
+
var filterMapper = {
|
|
8494
|
+
multiChoice: FilterMultiChoiceEditor,
|
|
8495
|
+
singleChoice: FilterSingleChoiceEditor,
|
|
8496
|
+
date: DateEditor,
|
|
8497
|
+
dateRange: DateRangeEditor,
|
|
8498
|
+
text: TextEditor,
|
|
8499
|
+
numberRange: NumberRangeEditor,
|
|
8500
|
+
number: NumberEditor,
|
|
8501
|
+
statusMultiChoice: StatusMultiEditor,
|
|
8502
|
+
statusSingleChoice: StatusSingleEditor,
|
|
8503
|
+
empty: null
|
|
8504
|
+
};
|
|
8505
|
+
function withInputVariables(WrappedComponent) {
|
|
8506
|
+
const WithInputVariables = (props) => {
|
|
8507
|
+
if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
|
|
8508
|
+
return /* @__PURE__ */ jsx72(WrappedComponent, { ...props });
|
|
8509
|
+
}
|
|
8510
|
+
return /* @__PURE__ */ jsx72(
|
|
8511
|
+
InputVariables,
|
|
8512
|
+
{
|
|
8513
|
+
disableInlineMenu: true,
|
|
8514
|
+
showMenuPosition: "inline-right",
|
|
8515
|
+
onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
|
|
8516
|
+
value: props.value,
|
|
8517
|
+
disabled: props.disabled,
|
|
8518
|
+
inputWhenNoVariables: /* @__PURE__ */ jsx72(WrappedComponent, { ...props })
|
|
8519
|
+
}
|
|
8520
|
+
);
|
|
8521
|
+
};
|
|
8522
|
+
return WithInputVariables;
|
|
8523
|
+
}
|
|
8524
|
+
function withInputVariablesForMultiValue(WrappedComponent) {
|
|
8525
|
+
const WithInputVariables = (props) => {
|
|
8526
|
+
var _a;
|
|
7270
8527
|
if (!props.bindable || props.disabled || props.readOnly) {
|
|
7271
|
-
return /* @__PURE__ */
|
|
8528
|
+
return /* @__PURE__ */ jsx72(WrappedComponent, { ...props });
|
|
8529
|
+
}
|
|
8530
|
+
return /* @__PURE__ */ jsx72(
|
|
8531
|
+
InputVariables,
|
|
8532
|
+
{
|
|
8533
|
+
disableInlineMenu: true,
|
|
8534
|
+
showMenuPosition: "inline-right",
|
|
8535
|
+
onChange: (newValue) => props.onChange(newValue ? [newValue] : []),
|
|
8536
|
+
value: (_a = props.value) == null ? void 0 : _a[0],
|
|
8537
|
+
inputWhenNoVariables: /* @__PURE__ */ jsx72(WrappedComponent, { ...props })
|
|
8538
|
+
}
|
|
8539
|
+
);
|
|
8540
|
+
};
|
|
8541
|
+
return WithInputVariables;
|
|
8542
|
+
}
|
|
8543
|
+
var bindableFiltersMapper = {
|
|
8544
|
+
...filterMapper,
|
|
8545
|
+
multiChoice: withInputVariablesForMultiValue(FilterMultiChoiceEditor),
|
|
8546
|
+
singleChoice: withInputVariables(FilterSingleChoiceEditor),
|
|
8547
|
+
date: withInputVariables(DateEditor),
|
|
8548
|
+
text: withInputVariables(TextEditor),
|
|
8549
|
+
number: withInputVariables(NumberEditor)
|
|
8550
|
+
};
|
|
8551
|
+
var ErrorContainer = ({ errorMessage }) => {
|
|
8552
|
+
return /* @__PURE__ */ jsx72(
|
|
8553
|
+
"div",
|
|
8554
|
+
{
|
|
8555
|
+
css: {
|
|
8556
|
+
gridColumn: "span 6",
|
|
8557
|
+
order: 6
|
|
8558
|
+
},
|
|
8559
|
+
children: /* @__PURE__ */ jsx72(FieldMessage, { errorMessage })
|
|
8560
|
+
}
|
|
8561
|
+
);
|
|
8562
|
+
};
|
|
8563
|
+
var twoColumnGrid = {
|
|
8564
|
+
display: "grid",
|
|
8565
|
+
gridTemplateColumns: "1fr 1fr",
|
|
8566
|
+
gap: "var(--spacing-sm);"
|
|
8567
|
+
};
|
|
8568
|
+
|
|
8569
|
+
// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
|
|
8570
|
+
import { jsx as jsx73 } from "@emotion/react/jsx-runtime";
|
|
8571
|
+
var SearchAndFilterContext = createContext7({
|
|
8572
|
+
searchTerm: "",
|
|
8573
|
+
setSearchTerm: () => {
|
|
8574
|
+
},
|
|
8575
|
+
filterVisibility: void 0,
|
|
8576
|
+
setFilterVisibility: () => {
|
|
8577
|
+
},
|
|
8578
|
+
filters: [],
|
|
8579
|
+
setFilters: () => {
|
|
8580
|
+
},
|
|
8581
|
+
handleAddFilter: () => {
|
|
8582
|
+
},
|
|
8583
|
+
handleResetFilters: () => {
|
|
8584
|
+
},
|
|
8585
|
+
handleDeleteFilter: () => {
|
|
8586
|
+
},
|
|
8587
|
+
filterOptions: [],
|
|
8588
|
+
validFilterQuery: [],
|
|
8589
|
+
filterMapper: {},
|
|
8590
|
+
totalResults: 0,
|
|
8591
|
+
allowBindingSearchTerm: false
|
|
8592
|
+
});
|
|
8593
|
+
var SearchAndFilterProvider = ({
|
|
8594
|
+
filters,
|
|
8595
|
+
filterOptions,
|
|
8596
|
+
filterVisible = false,
|
|
8597
|
+
defaultSearchTerm = "",
|
|
8598
|
+
onSearchChange,
|
|
8599
|
+
onChange,
|
|
8600
|
+
resetFilterValues = [{ field: "", operator: "", value: "" }],
|
|
8601
|
+
totalResults,
|
|
8602
|
+
filterMapper: filterMapper2 = filterMapper,
|
|
8603
|
+
children,
|
|
8604
|
+
allowBindingSearchTerm
|
|
8605
|
+
}) => {
|
|
8606
|
+
const [searchTerm, setSearchTerm] = useState20(defaultSearchTerm);
|
|
8607
|
+
const deferredSearchTerm = useDeferredValue3(searchTerm);
|
|
8608
|
+
const [filterVisibility, setFilterVisibility] = useState20(filterVisible);
|
|
8609
|
+
const handleSearchTerm = useCallback7(
|
|
8610
|
+
(term) => {
|
|
8611
|
+
setSearchTerm(term);
|
|
8612
|
+
onSearchChange == null ? void 0 : onSearchChange(term);
|
|
8613
|
+
},
|
|
8614
|
+
[setSearchTerm, onSearchChange]
|
|
8615
|
+
);
|
|
8616
|
+
const handleToggleFilterVisibility = useCallback7(
|
|
8617
|
+
(visible) => setFilterVisibility(visible),
|
|
8618
|
+
[setFilterVisibility]
|
|
8619
|
+
);
|
|
8620
|
+
const handleAddFilter = useCallback7(() => {
|
|
8621
|
+
onChange([...filters, { field: "", operator: "", value: "" }]);
|
|
8622
|
+
}, [filters, onChange]);
|
|
8623
|
+
const handleResetFilters = useCallback7(() => {
|
|
8624
|
+
onSearchChange == null ? void 0 : onSearchChange("");
|
|
8625
|
+
onChange(resetFilterValues);
|
|
8626
|
+
}, [onChange, resetFilterValues, onSearchChange]);
|
|
8627
|
+
const handleDeleteFilter = useCallback7(
|
|
8628
|
+
(index) => {
|
|
8629
|
+
const remainingFilters = filters.filter((_, i) => i !== index);
|
|
8630
|
+
onChange(remainingFilters);
|
|
8631
|
+
},
|
|
8632
|
+
[filters, onChange]
|
|
8633
|
+
);
|
|
8634
|
+
const validFilterQuery = useMemo18(() => {
|
|
8635
|
+
const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
|
|
8636
|
+
if (hasValidFilters) {
|
|
8637
|
+
return filters;
|
|
8638
|
+
}
|
|
8639
|
+
}, [filters]);
|
|
8640
|
+
useEffect22(() => {
|
|
8641
|
+
if (filterVisibility) {
|
|
8642
|
+
const handleEscKeyFilterClose = (e) => {
|
|
8643
|
+
if (e.key === "Escape") {
|
|
8644
|
+
setFilterVisibility(false);
|
|
8645
|
+
}
|
|
8646
|
+
};
|
|
8647
|
+
document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
|
|
8648
|
+
return () => {
|
|
8649
|
+
document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
|
|
8650
|
+
};
|
|
8651
|
+
}
|
|
8652
|
+
}, [filterVisibility]);
|
|
8653
|
+
return /* @__PURE__ */ jsx73(
|
|
8654
|
+
SearchAndFilterContext.Provider,
|
|
8655
|
+
{
|
|
8656
|
+
value: {
|
|
8657
|
+
searchTerm: deferredSearchTerm,
|
|
8658
|
+
setSearchTerm: (e) => handleSearchTerm(e),
|
|
8659
|
+
filterVisibility,
|
|
8660
|
+
setFilterVisibility: (e) => handleToggleFilterVisibility(e),
|
|
8661
|
+
filters,
|
|
8662
|
+
setFilters: (e) => onChange(e),
|
|
8663
|
+
handleAddFilter,
|
|
8664
|
+
handleResetFilters,
|
|
8665
|
+
handleDeleteFilter,
|
|
8666
|
+
filterOptions,
|
|
8667
|
+
validFilterQuery,
|
|
8668
|
+
totalResults,
|
|
8669
|
+
filterMapper: filterMapper2,
|
|
8670
|
+
allowBindingSearchTerm
|
|
8671
|
+
},
|
|
8672
|
+
children: /* @__PURE__ */ jsx73(VerticalRhythm6, { children })
|
|
8673
|
+
}
|
|
8674
|
+
);
|
|
8675
|
+
};
|
|
8676
|
+
var useSearchAndFilter = () => {
|
|
8677
|
+
const value = useContext9(SearchAndFilterContext);
|
|
8678
|
+
return { ...value };
|
|
8679
|
+
};
|
|
8680
|
+
|
|
8681
|
+
// src/components/SearchAndFilter/FilterControls.tsx
|
|
8682
|
+
import { Fragment as Fragment16, jsx as jsx74, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
|
|
8683
|
+
var FilterControls = ({
|
|
8684
|
+
children,
|
|
8685
|
+
hideSearchInput
|
|
8686
|
+
}) => {
|
|
8687
|
+
const {
|
|
8688
|
+
setFilterVisibility,
|
|
8689
|
+
filterVisibility,
|
|
8690
|
+
setSearchTerm,
|
|
8691
|
+
validFilterQuery,
|
|
8692
|
+
searchTerm,
|
|
8693
|
+
allowBindingSearchTerm
|
|
8694
|
+
} = useSearchAndFilter();
|
|
8695
|
+
const editorRef = useRef18(null);
|
|
8696
|
+
const hasVariableInSearchTerm = hasReferencedVariables(searchTerm);
|
|
8697
|
+
const [idToResetInputVariables, setIdToResetInputVariables] = useState21("data-resource-search-term-input");
|
|
8698
|
+
const [localeSearchTerm, setLocaleSearchTerm] = useState21(searchTerm);
|
|
8699
|
+
useDebounce6(
|
|
8700
|
+
() => {
|
|
8701
|
+
setSearchTerm(localeSearchTerm);
|
|
8702
|
+
},
|
|
8703
|
+
300,
|
|
8704
|
+
[localeSearchTerm]
|
|
8705
|
+
);
|
|
8706
|
+
useEffect23(() => {
|
|
8707
|
+
if (searchTerm === "") {
|
|
8708
|
+
setLocaleSearchTerm("");
|
|
8709
|
+
setIdToResetInputVariables(`data-resource-search-term-input-${v43()}`);
|
|
8710
|
+
}
|
|
8711
|
+
}, [searchTerm]);
|
|
8712
|
+
return /* @__PURE__ */ jsxs44(Fragment16, { children: [
|
|
8713
|
+
/* @__PURE__ */ jsx74(
|
|
8714
|
+
FilterButton2,
|
|
8715
|
+
{
|
|
8716
|
+
"aria-controls": "search-and-filter-options",
|
|
8717
|
+
"aria-label": "filter options",
|
|
8718
|
+
"aria-haspopup": "true",
|
|
8719
|
+
text: "Filter/Sort",
|
|
8720
|
+
"aria-expanded": filterVisibility === true,
|
|
8721
|
+
filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
|
|
8722
|
+
onClick: () => setFilterVisibility(!filterVisibility),
|
|
8723
|
+
dataTestId: "filters-button"
|
|
8724
|
+
}
|
|
8725
|
+
),
|
|
8726
|
+
hideSearchInput ? null : /* @__PURE__ */ jsxs44("div", { css: BindableKeywordSearchInputStyles, children: [
|
|
8727
|
+
/* @__PURE__ */ jsx74(
|
|
8728
|
+
InputVariables,
|
|
8729
|
+
{
|
|
8730
|
+
label: "",
|
|
8731
|
+
id: idToResetInputVariables,
|
|
8732
|
+
showMenuPosition: "inline-right",
|
|
8733
|
+
editorRef,
|
|
8734
|
+
value: localeSearchTerm,
|
|
8735
|
+
onChange: (value) => setLocaleSearchTerm(value != null ? value : ""),
|
|
8736
|
+
disableVariables: !allowBindingSearchTerm,
|
|
8737
|
+
inputWhenNoVariables: /* @__PURE__ */ jsx74(
|
|
8738
|
+
InputKeywordSearch2,
|
|
8739
|
+
{
|
|
8740
|
+
placeholder: "Search...",
|
|
8741
|
+
onSearchTextChanged: (e) => setLocaleSearchTerm(e),
|
|
8742
|
+
value: localeSearchTerm,
|
|
8743
|
+
compact: true,
|
|
8744
|
+
rounded: true,
|
|
8745
|
+
css: SearchInput
|
|
8746
|
+
}
|
|
8747
|
+
)
|
|
8748
|
+
}
|
|
8749
|
+
),
|
|
8750
|
+
hasVariableInSearchTerm ? /* @__PURE__ */ jsx74("div", { css: ClearSearchButtonContainer, children: /* @__PURE__ */ jsx74(
|
|
8751
|
+
"button",
|
|
8752
|
+
{
|
|
8753
|
+
css: ClearSearchButtonStyles,
|
|
8754
|
+
onClick: () => {
|
|
8755
|
+
setLocaleSearchTerm("");
|
|
8756
|
+
if (editorRef.current) {
|
|
8757
|
+
if (editorRef.current.getRootElement() !== document.activeElement) {
|
|
8758
|
+
editorRef.current.dispatchCommand(CLEAR_EDITOR_COMMAND2, void 0);
|
|
8759
|
+
}
|
|
8760
|
+
}
|
|
8761
|
+
},
|
|
8762
|
+
type: "button",
|
|
8763
|
+
"data-testid": "keyword-search-clear-button",
|
|
8764
|
+
children: /* @__PURE__ */ jsx74(Icon7, { icon: CgClose5, iconColor: "red", size: "1rem" })
|
|
8765
|
+
}
|
|
8766
|
+
) }) : null
|
|
8767
|
+
] }),
|
|
8768
|
+
children
|
|
8769
|
+
] });
|
|
8770
|
+
};
|
|
8771
|
+
|
|
8772
|
+
// src/components/SearchAndFilter/FilterItem.tsx
|
|
8773
|
+
import { Icon as Icon8, InputComboBox as InputComboBox2 } from "@uniformdev/design-system";
|
|
8774
|
+
import { useMemo as useMemo19 } from "react";
|
|
8775
|
+
|
|
8776
|
+
// src/components/SearchAndFilter/FilterMenu.tsx
|
|
8777
|
+
import { HorizontalRhythm as HorizontalRhythm8, VerticalRhythm as VerticalRhythm7 } from "@uniformdev/design-system";
|
|
8778
|
+
import React14, { useEffect as useEffect24 } from "react";
|
|
8779
|
+
import { jsx as jsx75, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
|
|
8780
|
+
var SearchAndFilterOptionsContainer2 = ({
|
|
8781
|
+
buttonRow,
|
|
8782
|
+
additionalFiltersContainer,
|
|
8783
|
+
children
|
|
8784
|
+
}) => {
|
|
8785
|
+
return /* @__PURE__ */ jsxs45("div", { css: SearchAndFilterOptionsContainer, children: [
|
|
8786
|
+
/* @__PURE__ */ jsx75("div", { css: SearchAndFilterOptionsInnerContainer, children }),
|
|
8787
|
+
buttonRow ? /* @__PURE__ */ jsx75(
|
|
8788
|
+
HorizontalRhythm8,
|
|
8789
|
+
{
|
|
8790
|
+
css: SearchAndFilterButtonGroup,
|
|
8791
|
+
gap: "sm",
|
|
8792
|
+
align: "center",
|
|
8793
|
+
justify: "space-between",
|
|
8794
|
+
children: buttonRow
|
|
8795
|
+
}
|
|
8796
|
+
) : null,
|
|
8797
|
+
additionalFiltersContainer ? /* @__PURE__ */ jsx75("div", { children: additionalFiltersContainer }) : null
|
|
8798
|
+
] });
|
|
8799
|
+
};
|
|
8800
|
+
var FilterMenu = ({
|
|
8801
|
+
id,
|
|
8802
|
+
filterTitle = "Show results",
|
|
8803
|
+
menuControls,
|
|
8804
|
+
additionalFiltersContainer,
|
|
8805
|
+
children,
|
|
8806
|
+
dataTestId,
|
|
8807
|
+
resetButtonText = "reset"
|
|
8808
|
+
}) => {
|
|
8809
|
+
const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
|
|
8810
|
+
const innerMenuRef = React14.useRef(null);
|
|
8811
|
+
useEffect24(() => {
|
|
8812
|
+
var _a;
|
|
8813
|
+
if (filterVisibility) {
|
|
8814
|
+
(_a = innerMenuRef.current) == null ? void 0 : _a.focus();
|
|
8815
|
+
}
|
|
8816
|
+
}, [filterVisibility]);
|
|
8817
|
+
return /* @__PURE__ */ jsx75(VerticalRhythm7, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ jsxs45(
|
|
8818
|
+
SearchAndFilterOptionsContainer2,
|
|
8819
|
+
{
|
|
8820
|
+
buttonRow: menuControls,
|
|
8821
|
+
additionalFiltersContainer,
|
|
8822
|
+
children: [
|
|
8823
|
+
/* @__PURE__ */ jsxs45(HorizontalRhythm8, { gap: "sm", align: "center", justify: "space-between", children: [
|
|
8824
|
+
/* @__PURE__ */ jsx75("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
|
|
8825
|
+
(filters == null ? void 0 : filters.length) ? /* @__PURE__ */ jsx75(
|
|
8826
|
+
"button",
|
|
8827
|
+
{
|
|
8828
|
+
type: "button",
|
|
8829
|
+
css: ResetConditionsBtn,
|
|
8830
|
+
onClick: () => {
|
|
8831
|
+
handleResetFilters();
|
|
8832
|
+
setFilterVisibility(false);
|
|
8833
|
+
},
|
|
8834
|
+
"data-testid": "reset-filters",
|
|
8835
|
+
children: resetButtonText
|
|
8836
|
+
}
|
|
8837
|
+
) : null
|
|
8838
|
+
] }),
|
|
8839
|
+
children
|
|
8840
|
+
]
|
|
8841
|
+
}
|
|
8842
|
+
) : null });
|
|
8843
|
+
};
|
|
8844
|
+
|
|
8845
|
+
// src/components/SearchAndFilter/FilterItem.tsx
|
|
8846
|
+
import { jsx as jsx76, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
|
|
8847
|
+
var FilterItem = ({
|
|
8848
|
+
index,
|
|
8849
|
+
paramOptions,
|
|
8850
|
+
operatorOptions,
|
|
8851
|
+
valueOptions,
|
|
8852
|
+
onParamChange,
|
|
8853
|
+
onOperatorChange,
|
|
8854
|
+
onValueChange
|
|
8855
|
+
}) => {
|
|
8856
|
+
var _a, _b;
|
|
8857
|
+
const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
|
|
8858
|
+
const label = filters[index].field !== "" ? filters[index].field : "unknown filter field";
|
|
8859
|
+
const operatorLabel = filters[index].operator !== "" ? `operator ${filters[index].operator}` : "unknown operator";
|
|
8860
|
+
const metaDataLabel = filters[index].value !== "" ? `value ${filters[index].value}` : "unknown value";
|
|
8861
|
+
const metaDataPossibleOptions = (_b = (_a = operatorOptions.find((op) => filters[index].operator === op.value)) == null ? void 0 : _a.editorType) != null ? _b : "singleChoice";
|
|
8862
|
+
const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly, bindable } = useMemo19(() => {
|
|
8863
|
+
var _a2;
|
|
8864
|
+
const currentSelectedFilter = filterOptions.find((item) => {
|
|
8865
|
+
var _a3;
|
|
8866
|
+
return (_a3 = item.options) == null ? void 0 : _a3.find((op) => op.value === filters[index].field);
|
|
8867
|
+
});
|
|
8868
|
+
const selectedFieldValue2 = (_a2 = currentSelectedFilter == null ? void 0 : currentSelectedFilter.options) == null ? void 0 : _a2.find((item) => {
|
|
8869
|
+
return filters[index].field === item.value;
|
|
8870
|
+
});
|
|
8871
|
+
const isCurrentFieldReadOnly = selectedFieldValue2 == null ? void 0 : selectedFieldValue2.readOnly;
|
|
8872
|
+
const selectedOperatorValue2 = operatorOptions == null ? void 0 : operatorOptions.find((item) => {
|
|
8873
|
+
return filters[index].operator === item.value;
|
|
8874
|
+
});
|
|
8875
|
+
return {
|
|
8876
|
+
selectedFieldValue: selectedFieldValue2,
|
|
8877
|
+
selectedOperatorValue: selectedOperatorValue2 != null ? selectedOperatorValue2 : void 0,
|
|
8878
|
+
selectedMetaValue: filters[index].value,
|
|
8879
|
+
readOnly: isCurrentFieldReadOnly,
|
|
8880
|
+
bindable: selectedFieldValue2 == null ? void 0 : selectedFieldValue2.bindable
|
|
8881
|
+
};
|
|
8882
|
+
}, [filters, filterOptions, index, operatorOptions]);
|
|
8883
|
+
const readOnlyProps = readOnly ? {
|
|
8884
|
+
"aria-readonly": true,
|
|
8885
|
+
isSearchable: false,
|
|
8886
|
+
menuIsOpen: false,
|
|
8887
|
+
isClearable: false
|
|
8888
|
+
} : {};
|
|
8889
|
+
return /* @__PURE__ */ jsxs46("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
|
|
8890
|
+
/* @__PURE__ */ jsx76("span", { children: index === 0 ? "Where" : "and" }),
|
|
8891
|
+
/* @__PURE__ */ jsxs46("div", { css: ConditionalInputRow, children: [
|
|
8892
|
+
/* @__PURE__ */ jsx76(
|
|
8893
|
+
InputComboBox2,
|
|
8894
|
+
{
|
|
8895
|
+
"aria-label": label,
|
|
8896
|
+
options: paramOptions,
|
|
8897
|
+
onChange: (e) => {
|
|
8898
|
+
var _a2;
|
|
8899
|
+
onParamChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
|
|
8900
|
+
},
|
|
8901
|
+
isOptionDisabled: (option) => {
|
|
8902
|
+
var _a2;
|
|
8903
|
+
return (_a2 = option == null ? void 0 : option.disabled) != null ? _a2 : false;
|
|
8904
|
+
},
|
|
8905
|
+
styles: {
|
|
8906
|
+
menu(base) {
|
|
8907
|
+
return {
|
|
8908
|
+
...base,
|
|
8909
|
+
minWidth: "max-content"
|
|
8910
|
+
};
|
|
8911
|
+
}
|
|
8912
|
+
},
|
|
8913
|
+
value: selectedFieldValue,
|
|
8914
|
+
...readOnlyProps,
|
|
8915
|
+
id: "filter-field",
|
|
8916
|
+
name: `filter-field-${index}`
|
|
8917
|
+
}
|
|
8918
|
+
),
|
|
8919
|
+
/* @__PURE__ */ jsx76(
|
|
8920
|
+
InputComboBox2,
|
|
8921
|
+
{
|
|
8922
|
+
"aria-label": operatorLabel,
|
|
8923
|
+
options: operatorOptions,
|
|
8924
|
+
onChange: (e) => {
|
|
8925
|
+
var _a2;
|
|
8926
|
+
return onOperatorChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
|
|
8927
|
+
},
|
|
8928
|
+
isDisabled: !filters[index].field,
|
|
8929
|
+
value: selectedOperatorValue,
|
|
8930
|
+
styles: {
|
|
8931
|
+
menu(base) {
|
|
8932
|
+
return {
|
|
8933
|
+
...base,
|
|
8934
|
+
minWidth: "max-content"
|
|
8935
|
+
};
|
|
8936
|
+
}
|
|
8937
|
+
},
|
|
8938
|
+
...readOnlyProps,
|
|
8939
|
+
id: "filter-operator",
|
|
8940
|
+
name: `filter-operator-${index}`
|
|
8941
|
+
}
|
|
8942
|
+
),
|
|
8943
|
+
/* @__PURE__ */ jsx76(
|
|
8944
|
+
FilterEditorRenderer,
|
|
8945
|
+
{
|
|
8946
|
+
"aria-label": metaDataLabel,
|
|
8947
|
+
editorType: metaDataPossibleOptions,
|
|
8948
|
+
options: valueOptions,
|
|
8949
|
+
onChange: (e) => onValueChange(e != null ? e : ""),
|
|
8950
|
+
readOnly,
|
|
8951
|
+
bindable,
|
|
8952
|
+
disabled: !filters[index].operator,
|
|
8953
|
+
value: selectedMetaValue,
|
|
8954
|
+
valueTestId: "filter-value"
|
|
8955
|
+
}
|
|
8956
|
+
),
|
|
8957
|
+
readOnly || index === 0 ? null : /* @__PURE__ */ jsx76(
|
|
8958
|
+
"button",
|
|
8959
|
+
{
|
|
8960
|
+
type: "button",
|
|
8961
|
+
onClick: () => handleDeleteFilter(index),
|
|
8962
|
+
"aria-label": "delete filter",
|
|
8963
|
+
css: IconBtn,
|
|
8964
|
+
"data-testid": "delete-filter",
|
|
8965
|
+
children: /* @__PURE__ */ jsx76(Icon8, { icon: "trash", iconColor: "red", size: "1rem" })
|
|
8966
|
+
}
|
|
8967
|
+
)
|
|
8968
|
+
] })
|
|
8969
|
+
] });
|
|
8970
|
+
};
|
|
8971
|
+
var FilterItems = ({
|
|
8972
|
+
addButtonText = "add condition",
|
|
8973
|
+
additionalFiltersContainer
|
|
8974
|
+
}) => {
|
|
8975
|
+
const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
|
|
8976
|
+
const handleUpdateFilter = (index, prop, value) => {
|
|
8977
|
+
var _a, _b, _c, _d, _e;
|
|
8978
|
+
const next = [...filters];
|
|
8979
|
+
next[index] = { ...next[index], [prop]: value };
|
|
8980
|
+
if (prop === "operator") {
|
|
8981
|
+
if (["eq", "neq", "lt", "gt"].includes(value) && Array.isArray(next[index].value)) {
|
|
8982
|
+
next[index].value = next[index].value[0];
|
|
8983
|
+
}
|
|
8984
|
+
if (filters[index].operator === "ndef" || filters[index].operator === "def") {
|
|
8985
|
+
next[index].value = "";
|
|
8986
|
+
}
|
|
8987
|
+
if (["between"].includes(value) && Array.isArray(next[index].value) === false) {
|
|
8988
|
+
next[index].value = [next[index].value, ""];
|
|
8989
|
+
}
|
|
8990
|
+
if (value === "def" || value === "true") {
|
|
8991
|
+
next[index].value = "true";
|
|
8992
|
+
}
|
|
8993
|
+
if (value === "ndef" || value === "false") {
|
|
8994
|
+
next[index].value = "false";
|
|
8995
|
+
}
|
|
8996
|
+
}
|
|
8997
|
+
if (prop === "field") {
|
|
8998
|
+
const firstOperatorInAvailableOperators = (_e = (_d = (_c = (_b = (_a = filterOptions.find((fo) => {
|
|
8999
|
+
var _a2;
|
|
9000
|
+
return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === value);
|
|
9001
|
+
})) == null ? void 0 : _a.options) == null ? void 0 : _b.find((op) => op.value === next[index].field)) == null ? void 0 : _c.operatorOptions) == null ? void 0 : _d[0].value) != null ? _e : "eq";
|
|
9002
|
+
next[index].operator = firstOperatorInAvailableOperators;
|
|
9003
|
+
next[index].value = "";
|
|
9004
|
+
}
|
|
9005
|
+
setFilters(next);
|
|
9006
|
+
};
|
|
9007
|
+
return /* @__PURE__ */ jsx76(
|
|
9008
|
+
FilterMenu,
|
|
9009
|
+
{
|
|
9010
|
+
id: "search-and-filter-options",
|
|
9011
|
+
dataTestId: "search-and-filter-options",
|
|
9012
|
+
menuControls: /* @__PURE__ */ jsxs46(
|
|
9013
|
+
"button",
|
|
9014
|
+
{
|
|
9015
|
+
type: "button",
|
|
9016
|
+
css: AddConditionalBtn,
|
|
9017
|
+
onClick: handleAddFilter,
|
|
9018
|
+
"data-testid": "add-filter",
|
|
9019
|
+
children: [
|
|
9020
|
+
/* @__PURE__ */ jsx76(Icon8, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
|
|
9021
|
+
addButtonText
|
|
9022
|
+
]
|
|
9023
|
+
}
|
|
9024
|
+
),
|
|
9025
|
+
additionalFiltersContainer,
|
|
9026
|
+
children: filters.map((item, i) => {
|
|
9027
|
+
var _a, _b, _c, _d, _e, _f;
|
|
9028
|
+
const availableTypeOptions = (_b = (_a = filterOptions.find((fo) => {
|
|
9029
|
+
var _a2;
|
|
9030
|
+
return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === item.field);
|
|
9031
|
+
})) == null ? void 0 : _a.options) != null ? _b : [];
|
|
9032
|
+
const possibleValueOptions = (_d = (_c = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _c.valueOptions) != null ? _d : [];
|
|
9033
|
+
const possibleOperators = (_f = (_e = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _e.operatorOptions) != null ? _f : [];
|
|
9034
|
+
return /* @__PURE__ */ jsx76(
|
|
9035
|
+
FilterItem,
|
|
9036
|
+
{
|
|
9037
|
+
index: i,
|
|
9038
|
+
paramOptions: filterOptions,
|
|
9039
|
+
onParamChange: (e) => handleUpdateFilter(i, "field", e),
|
|
9040
|
+
operatorOptions: possibleOperators,
|
|
9041
|
+
onOperatorChange: (e) => handleUpdateFilter(i, "operator", e),
|
|
9042
|
+
onValueChange: (e) => handleUpdateFilter(i, "value", e),
|
|
9043
|
+
valueOptions: possibleValueOptions
|
|
9044
|
+
},
|
|
9045
|
+
i
|
|
9046
|
+
);
|
|
9047
|
+
})
|
|
7272
9048
|
}
|
|
7273
|
-
|
|
7274
|
-
|
|
7275
|
-
|
|
7276
|
-
|
|
7277
|
-
|
|
7278
|
-
|
|
7279
|
-
|
|
7280
|
-
|
|
7281
|
-
|
|
7282
|
-
|
|
9049
|
+
);
|
|
9050
|
+
};
|
|
9051
|
+
|
|
9052
|
+
// src/components/SearchAndFilter/SearchAndFilter.tsx
|
|
9053
|
+
import { VerticalRhythm as VerticalRhythm8 } from "@uniformdev/design-system";
|
|
9054
|
+
|
|
9055
|
+
// src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
|
|
9056
|
+
import { Button as Button6, Callout as Callout7, HorizontalRhythm as HorizontalRhythm9, Paragraph } from "@uniformdev/design-system";
|
|
9057
|
+
import { Fragment as Fragment17, jsx as jsx77, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
|
|
9058
|
+
var SearchAndFilterResultContainer = ({
|
|
9059
|
+
buttonText,
|
|
9060
|
+
clearButtonLabel = "clear",
|
|
9061
|
+
calloutTitle,
|
|
9062
|
+
calloutText,
|
|
9063
|
+
onHandleClear,
|
|
9064
|
+
hideClearButton
|
|
9065
|
+
}) => {
|
|
9066
|
+
const { searchTerm, totalResults, filters, handleResetFilters, setSearchTerm } = useSearchAndFilter();
|
|
9067
|
+
const automateCalloutTitle = () => {
|
|
9068
|
+
if (searchTerm && !filters.length) {
|
|
9069
|
+
return "No search results found";
|
|
9070
|
+
}
|
|
9071
|
+
if (filters.length && !searchTerm) {
|
|
9072
|
+
return "No results match the selected filters";
|
|
9073
|
+
}
|
|
9074
|
+
return "No matching results found";
|
|
7283
9075
|
};
|
|
7284
|
-
|
|
7285
|
-
|
|
7286
|
-
|
|
7287
|
-
|
|
7288
|
-
|
|
7289
|
-
|
|
7290
|
-
|
|
7291
|
-
|
|
7292
|
-
|
|
9076
|
+
if (totalResults && totalResults > 0) {
|
|
9077
|
+
return null;
|
|
9078
|
+
}
|
|
9079
|
+
const handleClearSearch = () => {
|
|
9080
|
+
setSearchTerm("");
|
|
9081
|
+
if (onHandleClear) {
|
|
9082
|
+
onHandleClear();
|
|
9083
|
+
} else {
|
|
9084
|
+
handleResetFilters();
|
|
9085
|
+
}
|
|
9086
|
+
};
|
|
9087
|
+
return /* @__PURE__ */ jsxs47(Fragment17, { children: [
|
|
9088
|
+
/* @__PURE__ */ jsxs47(HorizontalRhythm9, { children: [
|
|
9089
|
+
/* @__PURE__ */ jsxs47("span", { children: [
|
|
9090
|
+
totalResults,
|
|
9091
|
+
" results ",
|
|
9092
|
+
searchTerm ? `for "${searchTerm}"` : null
|
|
9093
|
+
] }),
|
|
9094
|
+
!searchTerm || hideClearButton ? null : /* @__PURE__ */ jsx77(Button6, { buttonType: "ghostDestructive", size: "zero", onClick: handleClearSearch, children: clearButtonLabel })
|
|
9095
|
+
] }),
|
|
9096
|
+
totalResults === 0 ? /* @__PURE__ */ jsxs47(Callout7, { title: calloutTitle != null ? calloutTitle : automateCalloutTitle(), type: "note", children: [
|
|
9097
|
+
calloutText ? /* @__PURE__ */ jsx77(Paragraph, { children: calloutText }) : null,
|
|
9098
|
+
hideClearButton ? null : /* @__PURE__ */ jsx77(Button6, { buttonType: "tertiaryOutline", size: "xs", onClick: handleClearSearch, children: buttonText != null ? buttonText : "Clear search" })
|
|
9099
|
+
] }) : null
|
|
9100
|
+
] });
|
|
7293
9101
|
};
|
|
7294
9102
|
|
|
7295
|
-
// src/
|
|
7296
|
-
|
|
7297
|
-
|
|
7298
|
-
|
|
7299
|
-
|
|
7300
|
-
|
|
7301
|
-
|
|
9103
|
+
// src/components/SearchAndFilter/SearchAndFilter.tsx
|
|
9104
|
+
import { jsx as jsx78, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
|
|
9105
|
+
var SearchAndFilter = ({
|
|
9106
|
+
filters,
|
|
9107
|
+
filterOptions,
|
|
9108
|
+
filterVisible,
|
|
9109
|
+
filterControls,
|
|
9110
|
+
viewSwitchControls,
|
|
9111
|
+
resultsContainerView = /* @__PURE__ */ jsx78(SearchAndFilterResultContainer, {}),
|
|
9112
|
+
filterMapper: filterMapper2 = filterMapper,
|
|
9113
|
+
additionalFiltersContainer,
|
|
9114
|
+
onChange,
|
|
9115
|
+
defaultSearchTerm,
|
|
9116
|
+
onSearchChange,
|
|
9117
|
+
totalResults,
|
|
9118
|
+
allowBindingSearchTerm = false,
|
|
9119
|
+
resetFilterValues = []
|
|
9120
|
+
}) => {
|
|
9121
|
+
return /* @__PURE__ */ jsx78(
|
|
9122
|
+
SearchAndFilterProvider,
|
|
9123
|
+
{
|
|
9124
|
+
filters,
|
|
9125
|
+
filterOptions,
|
|
9126
|
+
filterVisible,
|
|
9127
|
+
onChange,
|
|
9128
|
+
defaultSearchTerm,
|
|
9129
|
+
onSearchChange,
|
|
9130
|
+
totalResults,
|
|
9131
|
+
resetFilterValues,
|
|
9132
|
+
filterMapper: filterMapper2,
|
|
9133
|
+
allowBindingSearchTerm,
|
|
9134
|
+
children: /* @__PURE__ */ jsxs48(VerticalRhythm8, { "data-testid": "search-and-filter", children: [
|
|
9135
|
+
/* @__PURE__ */ jsxs48("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
|
|
9136
|
+
/* @__PURE__ */ jsx78(
|
|
9137
|
+
"div",
|
|
9138
|
+
{
|
|
9139
|
+
css: SearchAndFilterControlsWrapper(viewSwitchControls ? "auto 1fr 0.05fr" : "auto 1fr"),
|
|
9140
|
+
children: !filterControls ? /* @__PURE__ */ jsx78(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
|
|
9141
|
+
}
|
|
9142
|
+
),
|
|
9143
|
+
viewSwitchControls
|
|
9144
|
+
] }),
|
|
9145
|
+
/* @__PURE__ */ jsx78(FilterItems, { additionalFiltersContainer }),
|
|
9146
|
+
resultsContainerView
|
|
9147
|
+
] })
|
|
9148
|
+
}
|
|
9149
|
+
);
|
|
9150
|
+
};
|
|
7302
9151
|
|
|
7303
|
-
// src/
|
|
7304
|
-
import {
|
|
7305
|
-
import {
|
|
7306
|
-
|
|
7307
|
-
|
|
7308
|
-
|
|
7309
|
-
|
|
7310
|
-
|
|
7311
|
-
|
|
7312
|
-
|
|
7313
|
-
|
|
7314
|
-
const {
|
|
7315
|
-
const
|
|
7316
|
-
|
|
7317
|
-
|
|
7318
|
-
|
|
7319
|
-
|
|
9152
|
+
// src/components/SearchAndFilter/SearchOnlyFilter.tsx
|
|
9153
|
+
import { InputKeywordSearch as InputKeywordSearch3 } from "@uniformdev/design-system";
|
|
9154
|
+
import { createContext as createContext8, useState as useState22 } from "react";
|
|
9155
|
+
import { useDebounce as useDebounce7 } from "react-use";
|
|
9156
|
+
import { jsx as jsx79 } from "@emotion/react/jsx-runtime";
|
|
9157
|
+
var SearchOnlyContext = createContext8({
|
|
9158
|
+
searchTerm: "",
|
|
9159
|
+
setSearchTerm: () => {
|
|
9160
|
+
}
|
|
9161
|
+
});
|
|
9162
|
+
var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
|
|
9163
|
+
const { searchTerm, setSearchTerm } = useSearchAndFilter();
|
|
9164
|
+
const [localeSearchTerm, setLocaleSearchTerm] = useState22("");
|
|
9165
|
+
useDebounce7(
|
|
9166
|
+
() => {
|
|
9167
|
+
setSearchTerm(localeSearchTerm);
|
|
9168
|
+
onSearchChange == null ? void 0 : onSearchChange(localeSearchTerm);
|
|
9169
|
+
},
|
|
9170
|
+
300,
|
|
9171
|
+
[localeSearchTerm]
|
|
9172
|
+
);
|
|
9173
|
+
return /* @__PURE__ */ jsx79(
|
|
9174
|
+
SearchOnlyContext.Provider,
|
|
9175
|
+
{
|
|
9176
|
+
value: {
|
|
9177
|
+
searchTerm,
|
|
9178
|
+
setSearchTerm: setLocaleSearchTerm
|
|
9179
|
+
},
|
|
9180
|
+
children: /* @__PURE__ */ jsx79("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ jsx79(
|
|
9181
|
+
InputKeywordSearch3,
|
|
9182
|
+
{
|
|
9183
|
+
placeholder: "Search...",
|
|
9184
|
+
onSearchTextChanged: (e) => setLocaleSearchTerm(e),
|
|
9185
|
+
value: localeSearchTerm,
|
|
9186
|
+
compact: true,
|
|
9187
|
+
rounded: true
|
|
9188
|
+
}
|
|
9189
|
+
) })
|
|
7320
9190
|
}
|
|
7321
|
-
|
|
7322
|
-
|
|
7323
|
-
|
|
9191
|
+
);
|
|
9192
|
+
};
|
|
9193
|
+
|
|
9194
|
+
// src/components/SearchAndFilter/SortItems.tsx
|
|
9195
|
+
import { InputComboBox as InputComboBox3, InputSelect as InputSelect8, SegmentedControl, VerticalRhythm as VerticalRhythm9 } from "@uniformdev/design-system";
|
|
9196
|
+
|
|
9197
|
+
// src/components/SearchAndFilter/styles/SortItems.styles.ts
|
|
9198
|
+
import { css as css39 } from "@emotion/react";
|
|
9199
|
+
import { cq as cq2, fadeInLtr as fadeInLtr2 } from "@uniformdev/design-system";
|
|
9200
|
+
var ConditionalFilterRow2 = css39`
|
|
9201
|
+
display: grid;
|
|
9202
|
+
grid-template-columns: 35px 1fr;
|
|
9203
|
+
gap: var(--spacing-sm);
|
|
9204
|
+
margin-left: var(--spacing-base);
|
|
9205
|
+
|
|
9206
|
+
${cq2("380px")} {
|
|
9207
|
+
align-items: center;
|
|
9208
|
+
|
|
9209
|
+
&:after {
|
|
9210
|
+
content: '';
|
|
9211
|
+
display: block;
|
|
9212
|
+
height: 1px;
|
|
9213
|
+
background: var(--gray-300);
|
|
9214
|
+
width: calc(100% - var(--spacing-base));
|
|
9215
|
+
margin-left: var(--spacing-base);
|
|
9216
|
+
}
|
|
9217
|
+
&:last-of-type:after {
|
|
9218
|
+
display: none;
|
|
9219
|
+
}
|
|
9220
|
+
}
|
|
9221
|
+
|
|
9222
|
+
&:nth-of-type(2) {
|
|
9223
|
+
margin-left: 0;
|
|
9224
|
+
grid-template-columns: 50px 1fr;
|
|
9225
|
+
}
|
|
9226
|
+
|
|
9227
|
+
${cq2("580px")} {
|
|
9228
|
+
&:after {
|
|
9229
|
+
display: none;
|
|
9230
|
+
}
|
|
9231
|
+
}
|
|
9232
|
+
|
|
9233
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
9234
|
+
animation: ${fadeInLtr2} var(--duration-fast) var(--timing-ease-out);
|
|
9235
|
+
}
|
|
9236
|
+
`;
|
|
9237
|
+
var ConditionalInputRow2 = css39`
|
|
9238
|
+
display: flex;
|
|
9239
|
+
gap: var(--spacing-sm);
|
|
9240
|
+
flex-wrap: wrap;
|
|
9241
|
+
|
|
9242
|
+
${cq2("380px")} {
|
|
9243
|
+
& > div:nth-child(-n + 2) {
|
|
9244
|
+
width: calc(50% - var(--spacing-sm));
|
|
9245
|
+
}
|
|
9246
|
+
|
|
9247
|
+
& > div:nth-child(n + 3) {
|
|
9248
|
+
width: calc(100% - 48px);
|
|
9249
|
+
}
|
|
9250
|
+
}
|
|
9251
|
+
${cq2("580px")} {
|
|
9252
|
+
display: grid;
|
|
9253
|
+
grid-template-columns: 200px 160px 1fr 32px;
|
|
9254
|
+
|
|
9255
|
+
& > div:nth-child(n) {
|
|
9256
|
+
width: auto;
|
|
9257
|
+
}
|
|
9258
|
+
}
|
|
9259
|
+
`;
|
|
9260
|
+
var SearchInput2 = css39`
|
|
9261
|
+
max-height: 40px;
|
|
9262
|
+
min-height: unset;
|
|
9263
|
+
`;
|
|
9264
|
+
var FilterButton3 = css39`
|
|
9265
|
+
align-items: center;
|
|
9266
|
+
background: var(--white);
|
|
9267
|
+
border: 1px solid var(--gray-300);
|
|
9268
|
+
border-radius: var(--rounded-full);
|
|
9269
|
+
color: var(--typography-base);
|
|
9270
|
+
display: flex;
|
|
9271
|
+
font-size: var(--fs-sm);
|
|
9272
|
+
gap: var(--spacing-sm);
|
|
9273
|
+
padding: var(--spacing-sm) var(--spacing-base);
|
|
9274
|
+
max-height: 40px;
|
|
9275
|
+
transition: color var(--duration-fast) var(--timing-ease-out),
|
|
9276
|
+
background-color var(--duration-fast) var(--timing-ease-out),
|
|
9277
|
+
border-color var(--duration-fast) var(--timing-ease-out),
|
|
9278
|
+
box-shadow var(--duration-fast) var(--timing-ease-out);
|
|
9279
|
+
|
|
9280
|
+
svg {
|
|
9281
|
+
color: var(--gray-300);
|
|
9282
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
9283
|
+
}
|
|
9284
|
+
|
|
9285
|
+
&:hover,
|
|
9286
|
+
:where([aria-expanded='true']) {
|
|
9287
|
+
outline: none;
|
|
9288
|
+
background: var(--gray-200);
|
|
9289
|
+
border-color: var(--gray-300);
|
|
9290
|
+
|
|
9291
|
+
svg {
|
|
9292
|
+
color: var(--typography-base);
|
|
9293
|
+
}
|
|
9294
|
+
}
|
|
9295
|
+
|
|
9296
|
+
&:disabled {
|
|
9297
|
+
opacity: var(--opacity-50);
|
|
9298
|
+
}
|
|
9299
|
+
`;
|
|
9300
|
+
var FilterButtonText2 = css39`
|
|
9301
|
+
overflow: hidden;
|
|
9302
|
+
text-overflow: ellipsis;
|
|
9303
|
+
white-space: nowrap;
|
|
9304
|
+
max-width: 14ch;
|
|
9305
|
+
`;
|
|
9306
|
+
var FilterButtonSelected2 = css39`
|
|
9307
|
+
background: var(--gray-100);
|
|
9308
|
+
border-color: var(--gray-300);
|
|
9309
|
+
|
|
9310
|
+
svg {
|
|
9311
|
+
color: var(--accent-dark);
|
|
9312
|
+
}
|
|
9313
|
+
`;
|
|
9314
|
+
var FilterButtonWithOptions2 = css39`
|
|
9315
|
+
:where([aria-expanded='true']) {
|
|
9316
|
+
background: var(--purple-rain-100);
|
|
9317
|
+
border-color: var(--accent-light);
|
|
9318
|
+
color: var(--typography-base);
|
|
9319
|
+
box-shadow: var(--elevation-100);
|
|
9320
|
+
|
|
9321
|
+
svg {
|
|
9322
|
+
color: var(--accent-dark);
|
|
9323
|
+
}
|
|
9324
|
+
}
|
|
9325
|
+
`;
|
|
9326
|
+
var SearchIcon2 = css39`
|
|
9327
|
+
color: var(--icon-color);
|
|
9328
|
+
position: absolute;
|
|
9329
|
+
inset: 0 var(--spacing-base) 0 auto;
|
|
9330
|
+
margin: auto;
|
|
9331
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
9332
|
+
`;
|
|
9333
|
+
var AddConditionalBtn2 = css39`
|
|
9334
|
+
align-items: center;
|
|
9335
|
+
background: transparent;
|
|
9336
|
+
border: none;
|
|
9337
|
+
color: var(--primary-action-default);
|
|
9338
|
+
display: flex;
|
|
9339
|
+
gap: var(--spacing-sm);
|
|
9340
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
9341
|
+
padding: 0;
|
|
9342
|
+
|
|
9343
|
+
&:hover,
|
|
9344
|
+
&:focus {
|
|
9345
|
+
color: var(--primary-action-hover);
|
|
9346
|
+
}
|
|
9347
|
+
|
|
9348
|
+
&:disabled {
|
|
9349
|
+
color: var(--gray-400);
|
|
9350
|
+
}
|
|
9351
|
+
`;
|
|
9352
|
+
var Title2 = css39`
|
|
9353
|
+
color: var(--typography-light);
|
|
9354
|
+
|
|
9355
|
+
&:focus {
|
|
9356
|
+
outline: none;
|
|
9357
|
+
}
|
|
9358
|
+
`;
|
|
9359
|
+
var ResetConditionsBtn2 = css39`
|
|
9360
|
+
background: transparent;
|
|
9361
|
+
border: none;
|
|
9362
|
+
color: var(--action-destructive-default);
|
|
9363
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
9364
|
+
padding: 0;
|
|
9365
|
+
|
|
9366
|
+
&:hover,
|
|
9367
|
+
&:focus {
|
|
9368
|
+
color: var(--action-destructive-hover);
|
|
9369
|
+
}
|
|
9370
|
+
`;
|
|
9371
|
+
var IconBtn2 = css39`
|
|
9372
|
+
background: transparent;
|
|
9373
|
+
border: none;
|
|
9374
|
+
padding: var(--spacing-sm);
|
|
9375
|
+
`;
|
|
9376
|
+
var SearchAndFilterOptionsContainer3 = css39`
|
|
9377
|
+
background: var(--gray-50);
|
|
9378
|
+
border: 1px solid var(--gray-300);
|
|
9379
|
+
border-radius: var(--rounded-base);
|
|
9380
|
+
container-type: inline-size;
|
|
9381
|
+
display: flex;
|
|
9382
|
+
flex-direction: column;
|
|
9383
|
+
gap: var(--spacing-sm);
|
|
9384
|
+
padding: var(--spacing-md) 0 var(--spacing-base);
|
|
9385
|
+
will-change: height;
|
|
9386
|
+
position: relative;
|
|
9387
|
+
z-index: 1;
|
|
9388
|
+
`;
|
|
9389
|
+
var SearchAndFilterOptionsInnerContainer2 = css39`
|
|
9390
|
+
display: flex;
|
|
9391
|
+
flex-direction: column;
|
|
9392
|
+
gap: var(--spacing-sm);
|
|
9393
|
+
padding-inline: var(--spacing-md);
|
|
9394
|
+
`;
|
|
9395
|
+
var SearchAndFilterButtonGroup2 = css39`
|
|
9396
|
+
margin-top: var(--spacing-xs);
|
|
9397
|
+
margin-left: calc(56px + var(--spacing-md));
|
|
9398
|
+
`;
|
|
9399
|
+
var SortFilterWrapper = (hiddenLocaleInput) => css39`
|
|
9400
|
+
align-items: center;
|
|
9401
|
+
border-top: 1px solid var(--gray-300);
|
|
9402
|
+
display: flex;
|
|
9403
|
+
flex-wrap: wrap;
|
|
9404
|
+
gap: var(--spacing-base);
|
|
9405
|
+
padding: var(--spacing-base) var(--spacing-md) 0;
|
|
9406
|
+
position: relative;
|
|
9407
|
+
z-index: 0;
|
|
9408
|
+
|
|
9409
|
+
${cq2("420px")} {
|
|
9410
|
+
display: grid;
|
|
9411
|
+
grid-template-columns: ${hiddenLocaleInput ? "1fr" : "1fr minmax(140px, 0.25fr)"};
|
|
9412
|
+
}
|
|
9413
|
+
`;
|
|
9414
|
+
var SortFilterInputRow = css39`
|
|
9415
|
+
align-items: center;
|
|
9416
|
+
display: grid;
|
|
9417
|
+
grid-template-columns: 1fr auto;
|
|
9418
|
+
gap: var(--spacing-base);
|
|
9419
|
+
`;
|
|
9420
|
+
var InputVariableWrapper = css39`
|
|
9421
|
+
flex-grow: 1;
|
|
9422
|
+
|
|
9423
|
+
// we need to override label styles nested within the input variable
|
|
9424
|
+
// as these are slightly different from the default label styles
|
|
9425
|
+
label > span {
|
|
9426
|
+
color: var(--typography-light);
|
|
9427
|
+
}
|
|
9428
|
+
`;
|
|
9429
|
+
|
|
9430
|
+
// src/components/SearchAndFilter/SortItems.tsx
|
|
9431
|
+
import { jsx as jsx80, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
|
|
9432
|
+
var SortItems = ({
|
|
9433
|
+
sortByLabel = "Sort by",
|
|
9434
|
+
localeLabel = "Show locale",
|
|
9435
|
+
sortOptions,
|
|
9436
|
+
sortByValue,
|
|
9437
|
+
onSortChange,
|
|
9438
|
+
localeValue,
|
|
9439
|
+
localeOptions,
|
|
9440
|
+
onLocaleChange,
|
|
9441
|
+
disableSortBinding
|
|
9442
|
+
}) => {
|
|
9443
|
+
var _a, _b;
|
|
9444
|
+
const hideLocaleOptions = !localeOptions || !onLocaleChange;
|
|
9445
|
+
const values = sortByValue == null ? void 0 : sortByValue.split("_");
|
|
9446
|
+
const sortDirection = values == null ? void 0 : values.pop();
|
|
9447
|
+
const sortField = values == null ? void 0 : values.join("_");
|
|
9448
|
+
const currentSelectedOption = (_b = (_a = sortOptions.find((item) => {
|
|
9449
|
+
var _a2;
|
|
9450
|
+
return (_a2 = item.options) == null ? void 0 : _a2.find((option) => option.value === sortField);
|
|
9451
|
+
})) == null ? void 0 : _a.options) == null ? void 0 : _b.find((nestedOption) => nestedOption.value === sortField);
|
|
9452
|
+
const localeLabelValue = sortOptions.length > 1 ? localeLabel : `${localeLabel}s`;
|
|
9453
|
+
return /* @__PURE__ */ jsxs49("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
|
|
9454
|
+
/* @__PURE__ */ jsxs49(VerticalRhythm9, { gap: "xs", children: [
|
|
9455
|
+
/* @__PURE__ */ jsx80("span", { css: Title2, children: sortByLabel }),
|
|
9456
|
+
/* @__PURE__ */ jsxs49("div", { css: SortFilterInputRow, children: [
|
|
9457
|
+
/* @__PURE__ */ jsx80(
|
|
9458
|
+
InputVariables,
|
|
9459
|
+
{
|
|
9460
|
+
disableInlineMenu: disableSortBinding,
|
|
9461
|
+
showMenuPosition: disableSortBinding ? void 0 : "inline-right",
|
|
9462
|
+
value: sortField,
|
|
9463
|
+
valueToResetTo: "created_at",
|
|
9464
|
+
onChange: (e) => onSortChange(`${e}_${sortDirection}`),
|
|
9465
|
+
inputWhenNoVariables: /* @__PURE__ */ jsx80(
|
|
9466
|
+
InputComboBox3,
|
|
9467
|
+
{
|
|
9468
|
+
id: "sort-by-field",
|
|
9469
|
+
"aria-label": "Sort by",
|
|
9470
|
+
options: sortOptions,
|
|
9471
|
+
onChange: (e) => {
|
|
9472
|
+
const fieldName = e == null ? void 0 : e.value;
|
|
9473
|
+
onSortChange(`${fieldName}_${sortDirection}`);
|
|
9474
|
+
},
|
|
9475
|
+
styles: {
|
|
9476
|
+
menu(base) {
|
|
9477
|
+
return {
|
|
9478
|
+
...base,
|
|
9479
|
+
minWidth: "max-content"
|
|
9480
|
+
};
|
|
9481
|
+
}
|
|
9482
|
+
},
|
|
9483
|
+
value: currentSelectedOption
|
|
9484
|
+
}
|
|
9485
|
+
)
|
|
9486
|
+
}
|
|
9487
|
+
),
|
|
9488
|
+
/* @__PURE__ */ jsx80(
|
|
9489
|
+
InputVariables,
|
|
9490
|
+
{
|
|
9491
|
+
disableInlineMenu: disableSortBinding,
|
|
9492
|
+
value: sortDirection,
|
|
9493
|
+
valueToResetTo: "DESC",
|
|
9494
|
+
showMenuPosition: disableSortBinding ? void 0 : "inline-right",
|
|
9495
|
+
onChange: (e) => onSortChange(`${sortField}_${e}`),
|
|
9496
|
+
inputWhenNoVariables: /* @__PURE__ */ jsx80(
|
|
9497
|
+
SegmentedControl,
|
|
9498
|
+
{
|
|
9499
|
+
noCheckmark: true,
|
|
9500
|
+
name: "sortBy",
|
|
9501
|
+
hideOptionText: true,
|
|
9502
|
+
iconSize: "1rem",
|
|
9503
|
+
size: "xl",
|
|
9504
|
+
options: [
|
|
9505
|
+
{
|
|
9506
|
+
label: "Ascending",
|
|
9507
|
+
icon: "arrow-up",
|
|
9508
|
+
value: `ASC`,
|
|
9509
|
+
tooltip: "Ascending (e.g. A-Z, oldest to newest)",
|
|
9510
|
+
"data-testid": "sort-ascending"
|
|
9511
|
+
},
|
|
9512
|
+
{
|
|
9513
|
+
label: "Descending",
|
|
9514
|
+
icon: "arrow-down",
|
|
9515
|
+
value: `DESC`,
|
|
9516
|
+
tooltip: "Descending (e.g. Z-A, newest to oldest)",
|
|
9517
|
+
"data-testid": "sort-descending"
|
|
9518
|
+
}
|
|
9519
|
+
],
|
|
9520
|
+
onChange: (e) => onSortChange(`${sortField}_${e}`),
|
|
9521
|
+
value: sortDirection
|
|
9522
|
+
}
|
|
9523
|
+
)
|
|
9524
|
+
}
|
|
9525
|
+
)
|
|
9526
|
+
] })
|
|
9527
|
+
] }),
|
|
9528
|
+
hideLocaleOptions ? null : /* @__PURE__ */ jsx80(VerticalRhythm9, { gap: "xs", css: InputVariableWrapper, children: /* @__PURE__ */ jsx80(
|
|
9529
|
+
InputVariables,
|
|
9530
|
+
{
|
|
9531
|
+
label: localeLabelValue,
|
|
9532
|
+
value: localeValue,
|
|
9533
|
+
showMenuPosition: "inline-right",
|
|
9534
|
+
onChange: (e) => onLocaleChange(e != null ? e : ""),
|
|
9535
|
+
inputWhenNoVariables: /* @__PURE__ */ jsx80(
|
|
9536
|
+
InputSelect8,
|
|
9537
|
+
{
|
|
9538
|
+
name: "localeReturned",
|
|
9539
|
+
"aria-label": localeLabelValue,
|
|
9540
|
+
label: localeLabelValue,
|
|
9541
|
+
showLabel: false,
|
|
9542
|
+
"data-testid": "context-locale",
|
|
9543
|
+
onChange: (e) => {
|
|
9544
|
+
var _a2;
|
|
9545
|
+
return onLocaleChange((_a2 = e.currentTarget.value) != null ? _a2 : "");
|
|
9546
|
+
},
|
|
9547
|
+
options: localeOptions,
|
|
9548
|
+
value: localeValue
|
|
9549
|
+
}
|
|
9550
|
+
)
|
|
9551
|
+
}
|
|
9552
|
+
) })
|
|
9553
|
+
] });
|
|
9554
|
+
};
|
|
7324
9555
|
|
|
7325
9556
|
// src/index.ts
|
|
7326
9557
|
import {
|
|
7327
9558
|
AddListButton as AddListButton2,
|
|
7328
|
-
Button as
|
|
7329
|
-
Callout as
|
|
9559
|
+
Button as Button7,
|
|
9560
|
+
Callout as Callout8,
|
|
7330
9561
|
DrawerContent,
|
|
7331
9562
|
Heading,
|
|
7332
|
-
Input as
|
|
7333
|
-
InputComboBox,
|
|
7334
|
-
InputKeywordSearch as
|
|
7335
|
-
InputSelect as
|
|
7336
|
-
InputToggle,
|
|
9563
|
+
Input as Input7,
|
|
9564
|
+
InputComboBox as InputComboBox4,
|
|
9565
|
+
InputKeywordSearch as InputKeywordSearch4,
|
|
9566
|
+
InputSelect as InputSelect9,
|
|
9567
|
+
InputToggle as InputToggle3,
|
|
7337
9568
|
Label,
|
|
7338
9569
|
LoadingIndicator as LoadingIndicator5,
|
|
7339
9570
|
LoadingOverlay as LoadingOverlay2,
|
|
@@ -7357,37 +9588,52 @@ import {
|
|
|
7357
9588
|
ScrollableListItem,
|
|
7358
9589
|
Switch,
|
|
7359
9590
|
Textarea,
|
|
7360
|
-
Theme as Theme3
|
|
9591
|
+
Theme as Theme3,
|
|
9592
|
+
utilityColors
|
|
7361
9593
|
} from "@uniformdev/design-system";
|
|
7362
9594
|
export * from "@uniformdev/mesh-sdk";
|
|
7363
9595
|
export {
|
|
7364
9596
|
$createVariableNode,
|
|
7365
9597
|
$isVariableNode,
|
|
7366
9598
|
AddListButton2 as AddListButton,
|
|
7367
|
-
|
|
7368
|
-
|
|
9599
|
+
Button7 as Button,
|
|
9600
|
+
CHECKBOX_OPERATORS,
|
|
9601
|
+
Callout8 as Callout,
|
|
9602
|
+
ControlledObjectSearchProvider,
|
|
7369
9603
|
ControlledValuePlugin,
|
|
9604
|
+
DATE_OPERATORS,
|
|
7370
9605
|
DISCONNECT_VARIABLE_COMMAND,
|
|
7371
9606
|
DamSelectedItem,
|
|
7372
9607
|
DataRefreshButton,
|
|
7373
9608
|
DataResourceDynamicInputProvider,
|
|
9609
|
+
DataResourceInputContext,
|
|
7374
9610
|
DataResourceVariablesList,
|
|
7375
9611
|
DataResourceVariablesListExplicit,
|
|
7376
9612
|
DataSourceEditor,
|
|
7377
9613
|
DataTypeEditor,
|
|
9614
|
+
DateEditor,
|
|
9615
|
+
DateRangeEditor,
|
|
7378
9616
|
DefaultSearchRow,
|
|
7379
9617
|
DefaultSelectedItem,
|
|
7380
9618
|
DrawerContent,
|
|
7381
9619
|
EDIT_VARIABLE_COMMAND,
|
|
7382
9620
|
EntrySearch,
|
|
9621
|
+
FilterButton2 as FilterButton,
|
|
9622
|
+
FilterControls,
|
|
9623
|
+
FilterEditorRenderer,
|
|
9624
|
+
FilterItem,
|
|
9625
|
+
FilterItems,
|
|
9626
|
+
FilterMenu,
|
|
9627
|
+
FilterMultiChoiceEditor,
|
|
9628
|
+
FilterSingleChoiceEditor,
|
|
7383
9629
|
Heading,
|
|
7384
9630
|
INSERT_VARIABLE_COMMAND,
|
|
7385
9631
|
icons_exports as Icons,
|
|
7386
|
-
|
|
7387
|
-
InputComboBox,
|
|
7388
|
-
|
|
7389
|
-
|
|
7390
|
-
InputToggle,
|
|
9632
|
+
Input7 as Input,
|
|
9633
|
+
InputComboBox4 as InputComboBox,
|
|
9634
|
+
InputKeywordSearch4 as InputKeywordSearch,
|
|
9635
|
+
InputSelect9 as InputSelect,
|
|
9636
|
+
InputToggle3 as InputToggle,
|
|
7391
9637
|
InputVariables,
|
|
7392
9638
|
Label,
|
|
7393
9639
|
LinkButton,
|
|
@@ -7396,16 +9642,22 @@ export {
|
|
|
7396
9642
|
Menu4 as Menu,
|
|
7397
9643
|
MenuItem3 as MenuItem,
|
|
7398
9644
|
MeshApp,
|
|
9645
|
+
NUMBER_OPERATORS,
|
|
9646
|
+
NumberEditor,
|
|
9647
|
+
NumberRangeEditor,
|
|
7399
9648
|
OPEN_INSERT_VARIABLE_COMMAND,
|
|
7400
9649
|
ObjectSearchContainer,
|
|
9650
|
+
ObjectSearchContext,
|
|
7401
9651
|
ObjectSearchFilter,
|
|
7402
9652
|
ObjectSearchFilterContainer2 as ObjectSearchFilterContainer,
|
|
7403
9653
|
ObjectSearchListItem,
|
|
7404
9654
|
ObjectSearchListItemLoadingSkeleton,
|
|
9655
|
+
ObjectSearchListOfSearchResults,
|
|
7405
9656
|
ObjectSearchProvider,
|
|
7406
9657
|
ObjectSearchResultItem,
|
|
7407
9658
|
ObjectSearchResultItemButton,
|
|
7408
9659
|
ObjectSearchResultList,
|
|
9660
|
+
PUBLISH_STATUS_FIELD_OPERATORS,
|
|
7409
9661
|
ParamTypeDynamicDataProvider,
|
|
7410
9662
|
ParameterConnectionIndicator,
|
|
7411
9663
|
ParameterGroup,
|
|
@@ -7433,6 +9685,7 @@ export {
|
|
|
7433
9685
|
ProductSearchRow,
|
|
7434
9686
|
ProductSelectedItem,
|
|
7435
9687
|
QueryFilter,
|
|
9688
|
+
RICHTEXT_OPERATORS,
|
|
7436
9689
|
RequestBody,
|
|
7437
9690
|
RequestHeaders,
|
|
7438
9691
|
RequestMethodSelect,
|
|
@@ -7442,19 +9695,36 @@ export {
|
|
|
7442
9695
|
RequestUrl,
|
|
7443
9696
|
RequestUrlInput,
|
|
7444
9697
|
ResolvableLoadingValue,
|
|
9698
|
+
SELECT_OPERATORS,
|
|
9699
|
+
SYSTEM_DATE_OPERATORS,
|
|
9700
|
+
SYSTEM_FIELD_OPERATORS,
|
|
7445
9701
|
ScrollableList2 as ScrollableList,
|
|
7446
9702
|
ScrollableListItem,
|
|
9703
|
+
SearchAndFilter,
|
|
9704
|
+
SearchAndFilterContext,
|
|
9705
|
+
SearchAndFilterOptionsContainer2 as SearchAndFilterOptionsContainer,
|
|
9706
|
+
SearchAndFilterProvider,
|
|
9707
|
+
SearchAndFilterResultContainer,
|
|
9708
|
+
SearchOnlyContext,
|
|
9709
|
+
SearchOnlyFilter,
|
|
7447
9710
|
SelectionField,
|
|
9711
|
+
SortItems,
|
|
9712
|
+
StatusMultiEditor,
|
|
9713
|
+
StatusSingleEditor,
|
|
7448
9714
|
Switch,
|
|
9715
|
+
TEXTBOX_OPERATORS,
|
|
9716
|
+
TextEditor,
|
|
7449
9717
|
TextVariableRenderer,
|
|
7450
9718
|
Textarea,
|
|
7451
9719
|
Theme3 as Theme,
|
|
9720
|
+
USER_OPERATORS,
|
|
7452
9721
|
VariableEditor,
|
|
7453
9722
|
VariableNode,
|
|
7454
9723
|
VariablesList,
|
|
7455
9724
|
VariablesPlugin,
|
|
7456
9725
|
VariablesProvider,
|
|
7457
9726
|
badgeIcon,
|
|
9727
|
+
bindQuery,
|
|
7458
9728
|
bindableFiltersMapper,
|
|
7459
9729
|
convertConnectedDataToVariable,
|
|
7460
9730
|
createLocationValidator,
|
|
@@ -7486,6 +9756,7 @@ export {
|
|
|
7486
9756
|
entrySearchSelectInput,
|
|
7487
9757
|
entrySearchSelectOption,
|
|
7488
9758
|
entrySearchWrapper,
|
|
9759
|
+
filterMapper,
|
|
7489
9760
|
hasReferencedVariables,
|
|
7490
9761
|
prettifyBindExpression,
|
|
7491
9762
|
productSearchRowActiveIcon,
|
|
@@ -7527,6 +9798,7 @@ export {
|
|
|
7527
9798
|
urlEncodeRequestUrl,
|
|
7528
9799
|
useConnectedDataAsVariables,
|
|
7529
9800
|
useContentDataResourceLocaleInfo,
|
|
9801
|
+
useDataResourceDynamicInputs,
|
|
7530
9802
|
useDynamicInputsAsVariables,
|
|
7531
9803
|
useMeshLocation,
|
|
7532
9804
|
useObjectSearchContext,
|
|
@@ -7536,10 +9808,12 @@ export {
|
|
|
7536
9808
|
useRequest,
|
|
7537
9809
|
useRequestHeader,
|
|
7538
9810
|
useRequestParameter,
|
|
9811
|
+
useSearchAndFilter,
|
|
7539
9812
|
useUniformMeshSdk,
|
|
7540
9813
|
useVariableEditor,
|
|
7541
9814
|
useVariables,
|
|
7542
9815
|
useVariablesMenu,
|
|
9816
|
+
utilityColors,
|
|
7543
9817
|
variableDefaultTextValue,
|
|
7544
9818
|
variablePrefix,
|
|
7545
9819
|
variableSuffix,
|