@uniformdev/mesh-sdk-react 19.136.0 → 19.136.1-alpha.4
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 +160 -52
- package/dist/index.d.ts +160 -52
- package/dist/index.esm.js +705 -462
- package/dist/index.js +790 -549
- package/dist/index.mjs +705 -462
- package/package.json +5 -5
package/dist/index.js
CHANGED
|
@@ -33,67 +33,71 @@ var src_exports = {};
|
|
|
33
33
|
__export(src_exports, {
|
|
34
34
|
$createVariableNode: () => $createVariableNode,
|
|
35
35
|
$isVariableNode: () => $isVariableNode,
|
|
36
|
-
AddListButton: () =>
|
|
37
|
-
Button: () =>
|
|
38
|
-
Callout: () =>
|
|
36
|
+
AddListButton: () => import_design_system44.AddListButton,
|
|
37
|
+
Button: () => import_design_system44.Button,
|
|
38
|
+
Callout: () => import_design_system44.Callout,
|
|
39
|
+
ControlledObjectSearchProvider: () => ControlledObjectSearchProvider,
|
|
39
40
|
ControlledValuePlugin: () => ControlledValuePlugin,
|
|
40
41
|
DISCONNECT_VARIABLE_COMMAND: () => DISCONNECT_VARIABLE_COMMAND,
|
|
41
42
|
DamSelectedItem: () => DamSelectedItem,
|
|
42
43
|
DataRefreshButton: () => DataRefreshButton,
|
|
43
44
|
DataResourceDynamicInputProvider: () => DataResourceDynamicInputProvider,
|
|
45
|
+
DataResourceInputContext: () => DataResourceInputContext,
|
|
44
46
|
DataResourceVariablesList: () => DataResourceVariablesList,
|
|
45
47
|
DataResourceVariablesListExplicit: () => DataResourceVariablesListExplicit,
|
|
46
48
|
DataSourceEditor: () => DataSourceEditor,
|
|
47
49
|
DataTypeEditor: () => DataTypeEditor,
|
|
48
50
|
DefaultSearchRow: () => DefaultSearchRow,
|
|
49
51
|
DefaultSelectedItem: () => DefaultSelectedItem,
|
|
50
|
-
DrawerContent: () =>
|
|
52
|
+
DrawerContent: () => import_design_system44.DrawerContent,
|
|
51
53
|
EDIT_VARIABLE_COMMAND: () => EDIT_VARIABLE_COMMAND,
|
|
52
54
|
EntrySearch: () => EntrySearch,
|
|
53
|
-
Heading: () =>
|
|
55
|
+
Heading: () => import_design_system44.Heading,
|
|
54
56
|
INSERT_VARIABLE_COMMAND: () => INSERT_VARIABLE_COMMAND,
|
|
55
57
|
Icons: () => icons_exports,
|
|
56
|
-
Input: () =>
|
|
57
|
-
InputComboBox: () =>
|
|
58
|
-
InputKeywordSearch: () =>
|
|
59
|
-
InputSelect: () =>
|
|
60
|
-
InputToggle: () =>
|
|
58
|
+
Input: () => import_design_system44.Input,
|
|
59
|
+
InputComboBox: () => import_design_system44.InputComboBox,
|
|
60
|
+
InputKeywordSearch: () => import_design_system44.InputKeywordSearch,
|
|
61
|
+
InputSelect: () => import_design_system44.InputSelect,
|
|
62
|
+
InputToggle: () => import_design_system44.InputToggle,
|
|
61
63
|
InputVariables: () => InputVariables,
|
|
62
|
-
Label: () =>
|
|
64
|
+
Label: () => import_design_system44.Label,
|
|
63
65
|
LinkButton: () => LinkButton,
|
|
64
|
-
LoadingIndicator: () =>
|
|
65
|
-
LoadingOverlay: () =>
|
|
66
|
-
Menu: () =>
|
|
67
|
-
MenuItem: () =>
|
|
66
|
+
LoadingIndicator: () => import_design_system44.LoadingIndicator,
|
|
67
|
+
LoadingOverlay: () => import_design_system44.LoadingOverlay,
|
|
68
|
+
Menu: () => import_design_system44.Menu,
|
|
69
|
+
MenuItem: () => import_design_system44.MenuItem,
|
|
68
70
|
MeshApp: () => MeshApp,
|
|
69
71
|
OPEN_INSERT_VARIABLE_COMMAND: () => OPEN_INSERT_VARIABLE_COMMAND,
|
|
70
72
|
ObjectSearchContainer: () => ObjectSearchContainer,
|
|
73
|
+
ObjectSearchContext: () => ObjectSearchContext,
|
|
71
74
|
ObjectSearchFilter: () => ObjectSearchFilter,
|
|
72
75
|
ObjectSearchFilterContainer: () => ObjectSearchFilterContainer2,
|
|
73
76
|
ObjectSearchListItem: () => ObjectSearchListItem,
|
|
74
77
|
ObjectSearchListItemLoadingSkeleton: () => ObjectSearchListItemLoadingSkeleton,
|
|
78
|
+
ObjectSearchListOfSearchResults: () => ObjectSearchListOfSearchResults,
|
|
75
79
|
ObjectSearchProvider: () => ObjectSearchProvider,
|
|
76
80
|
ObjectSearchResultItem: () => ObjectSearchResultItem,
|
|
77
81
|
ObjectSearchResultItemButton: () => ObjectSearchResultItemButton,
|
|
78
82
|
ObjectSearchResultList: () => ObjectSearchResultList,
|
|
79
83
|
ParamTypeDynamicDataProvider: () => ParamTypeDynamicDataProvider,
|
|
80
84
|
ParameterConnectionIndicator: () => ParameterConnectionIndicator,
|
|
81
|
-
ParameterGroup: () =>
|
|
82
|
-
ParameterImage: () =>
|
|
83
|
-
ParameterImageInner: () =>
|
|
84
|
-
ParameterInput: () =>
|
|
85
|
-
ParameterInputInner: () =>
|
|
86
|
-
ParameterLabel: () =>
|
|
87
|
-
ParameterMenuButton: () =>
|
|
85
|
+
ParameterGroup: () => import_design_system44.ParameterGroup,
|
|
86
|
+
ParameterImage: () => import_design_system44.ParameterImage,
|
|
87
|
+
ParameterImageInner: () => import_design_system44.ParameterImageInner,
|
|
88
|
+
ParameterInput: () => import_design_system44.ParameterInput,
|
|
89
|
+
ParameterInputInner: () => import_design_system44.ParameterInputInner,
|
|
90
|
+
ParameterLabel: () => import_design_system44.ParameterLabel,
|
|
91
|
+
ParameterMenuButton: () => import_design_system44.ParameterMenuButton,
|
|
88
92
|
ParameterOrSingleVariable: () => ParameterOrSingleVariable,
|
|
89
|
-
ParameterSelect: () =>
|
|
90
|
-
ParameterSelectInner: () =>
|
|
91
|
-
ParameterShell: () =>
|
|
93
|
+
ParameterSelect: () => import_design_system44.ParameterSelect,
|
|
94
|
+
ParameterSelectInner: () => import_design_system44.ParameterSelectInner,
|
|
95
|
+
ParameterShell: () => import_design_system44.ParameterShell,
|
|
92
96
|
ParameterShellContext: () => import_design_system14.ParameterShellContext,
|
|
93
|
-
ParameterTextarea: () =>
|
|
94
|
-
ParameterTextareaInner: () =>
|
|
95
|
-
ParameterToggle: () =>
|
|
96
|
-
ParameterToggleInner: () =>
|
|
97
|
+
ParameterTextarea: () => import_design_system44.ParameterTextarea,
|
|
98
|
+
ParameterTextareaInner: () => import_design_system44.ParameterTextareaInner,
|
|
99
|
+
ParameterToggle: () => import_design_system44.ParameterToggle,
|
|
100
|
+
ParameterToggleInner: () => import_design_system44.ParameterToggleInner,
|
|
97
101
|
ParameterVariables: () => ParameterVariables,
|
|
98
102
|
ProductPreviewList: () => ProductPreviewList,
|
|
99
103
|
ProductQuery: () => ProductQuery,
|
|
@@ -112,19 +116,21 @@ __export(src_exports, {
|
|
|
112
116
|
RequestUrl: () => RequestUrl,
|
|
113
117
|
RequestUrlInput: () => RequestUrlInput,
|
|
114
118
|
ResolvableLoadingValue: () => ResolvableLoadingValue,
|
|
115
|
-
ScrollableList: () =>
|
|
116
|
-
ScrollableListItem: () =>
|
|
119
|
+
ScrollableList: () => import_design_system44.ScrollableList,
|
|
120
|
+
ScrollableListItem: () => import_design_system44.ScrollableListItem,
|
|
117
121
|
SelectionField: () => SelectionField,
|
|
118
|
-
Switch: () =>
|
|
122
|
+
Switch: () => import_design_system44.Switch,
|
|
119
123
|
TextVariableRenderer: () => TextVariableRenderer,
|
|
120
|
-
Textarea: () =>
|
|
121
|
-
Theme: () =>
|
|
124
|
+
Textarea: () => import_design_system44.Textarea,
|
|
125
|
+
Theme: () => import_design_system44.Theme,
|
|
122
126
|
VariableEditor: () => VariableEditor,
|
|
123
127
|
VariableNode: () => VariableNode,
|
|
124
128
|
VariablesList: () => VariablesList,
|
|
125
129
|
VariablesPlugin: () => VariablesPlugin,
|
|
126
130
|
VariablesProvider: () => VariablesProvider,
|
|
127
131
|
badgeIcon: () => badgeIcon,
|
|
132
|
+
bindQuery: () => bindQuery,
|
|
133
|
+
bindableFiltersMapper: () => bindableFiltersMapper,
|
|
128
134
|
convertConnectedDataToVariable: () => convertConnectedDataToVariable,
|
|
129
135
|
createLocationValidator: () => createLocationValidator,
|
|
130
136
|
damSelectItemImage: () => damSelectItemImage,
|
|
@@ -196,6 +202,7 @@ __export(src_exports, {
|
|
|
196
202
|
urlEncodeRequestUrl: () => urlEncodeRequestUrl,
|
|
197
203
|
useConnectedDataAsVariables: () => useConnectedDataAsVariables,
|
|
198
204
|
useContentDataResourceLocaleInfo: () => useContentDataResourceLocaleInfo,
|
|
205
|
+
useDataResourceDynamicInputs: () => useDataResourceDynamicInputs,
|
|
199
206
|
useDynamicInputsAsVariables: () => useDynamicInputsAsVariables,
|
|
200
207
|
useMeshLocation: () => useMeshLocation,
|
|
201
208
|
useObjectSearchContext: () => useObjectSearchContext,
|
|
@@ -2855,6 +2862,9 @@ function DefaultDamItemRenderer({ item }) {
|
|
|
2855
2862
|
] }) : null;
|
|
2856
2863
|
}
|
|
2857
2864
|
|
|
2865
|
+
// src/components/DataResourceDynamicInputProvider.tsx
|
|
2866
|
+
var import_react59 = require("react");
|
|
2867
|
+
|
|
2858
2868
|
// src/hooks/useConnectedDataAsVariables.tsx
|
|
2859
2869
|
var import_react26 = require("react");
|
|
2860
2870
|
function useConnectedDataAsVariables(connectedData) {
|
|
@@ -4231,8 +4241,9 @@ function $isTargetWithinDecorator(target) {
|
|
|
4231
4241
|
}
|
|
4232
4242
|
|
|
4233
4243
|
// src/components/Variables/InputVariables.tsx
|
|
4234
|
-
var
|
|
4235
|
-
var
|
|
4244
|
+
var import_react51 = require("@emotion/react");
|
|
4245
|
+
var import_design_system21 = require("@uniformdev/design-system");
|
|
4246
|
+
var import_react52 = require("react");
|
|
4236
4247
|
var import_uuid2 = require("uuid");
|
|
4237
4248
|
|
|
4238
4249
|
// src/components/Variables/composer/EditorRefPlugin.tsx
|
|
@@ -4356,9 +4367,102 @@ var placeholderCompact = import_react42.css`
|
|
|
4356
4367
|
inset: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
|
|
4357
4368
|
`;
|
|
4358
4369
|
|
|
4370
|
+
// src/components/Variables/styles/ParameterVariables.styles.ts
|
|
4371
|
+
var import_react43 = require("@emotion/react");
|
|
4372
|
+
var import_design_system19 = require("@uniformdev/design-system");
|
|
4373
|
+
var variableBindButton = import_react43.css`
|
|
4374
|
+
align-items: center;
|
|
4375
|
+
border: none;
|
|
4376
|
+
border-radius: var(--rounded-base);
|
|
4377
|
+
background: none;
|
|
4378
|
+
display: flex;
|
|
4379
|
+
height: 1.2rem;
|
|
4380
|
+
padding: var(--spacing-2xs);
|
|
4381
|
+
transition: background var(--duration-fast) var(--timing-ease-out),
|
|
4382
|
+
color var(--duration-fast) var(--timing-ease-out);
|
|
4383
|
+
width: 1.2rem;
|
|
4384
|
+
|
|
4385
|
+
&:hover,
|
|
4386
|
+
&[aria-pressed='true']:not(:disabled) {
|
|
4387
|
+
background: var(--brand-secondary-3);
|
|
4388
|
+
color: var(--white);
|
|
4389
|
+
}
|
|
4390
|
+
|
|
4391
|
+
&[aria-disabled='true'] {
|
|
4392
|
+
background: none;
|
|
4393
|
+
color: currentColor;
|
|
4394
|
+
}
|
|
4395
|
+
|
|
4396
|
+
// fixes menu resizing issue within iframes
|
|
4397
|
+
// see https://linear.app/uniform/issue/UNI-3068/mesh-integration-resizing-with-menus
|
|
4398
|
+
+ [role='menu'] {
|
|
4399
|
+
max-height: unset;
|
|
4400
|
+
}
|
|
4401
|
+
`;
|
|
4402
|
+
var input2 = import_react43.css`
|
|
4403
|
+
display: block;
|
|
4404
|
+
appearance: none;
|
|
4405
|
+
box-sizing: border-box;
|
|
4406
|
+
background: var(--white);
|
|
4407
|
+
border: 1px solid var(--gray-200);
|
|
4408
|
+
border-radius: var(--rounded-sm);
|
|
4409
|
+
color: var(--gray-700);
|
|
4410
|
+
font-size: var(--fs-sm);
|
|
4411
|
+
line-height: 1.5;
|
|
4412
|
+
min-height: 2rem;
|
|
4413
|
+
padding: var(--spacing-sm);
|
|
4414
|
+
width: 100%;
|
|
4415
|
+
position: relative;
|
|
4416
|
+
white-space: normal;
|
|
4417
|
+
transition-property: background, border-color, color, box-shadow, border-radius;
|
|
4418
|
+
transition-duration: var(--duration-fast);
|
|
4419
|
+
transition-timing-function: var(--timing-ease-out);
|
|
4420
|
+
|
|
4421
|
+
&::placeholder {
|
|
4422
|
+
color: var(--gray-400);
|
|
4423
|
+
}
|
|
4424
|
+
|
|
4425
|
+
&:focus,
|
|
4426
|
+
&:focus-within {
|
|
4427
|
+
border-radius: var(--rounded-sm);
|
|
4428
|
+
box-shadow: var(--elevation-100);
|
|
4429
|
+
border: 1px solid var(--accent-dark-active);
|
|
4430
|
+
outline: none;
|
|
4431
|
+
}
|
|
4432
|
+
&:hover {
|
|
4433
|
+
border: 1px solid var(--accent-dark-hover);
|
|
4434
|
+
}
|
|
4435
|
+
|
|
4436
|
+
&:disabled,
|
|
4437
|
+
&:disabled::placeholder,
|
|
4438
|
+
&:disabled:hover {
|
|
4439
|
+
border-radius: var(--rounded-sm);
|
|
4440
|
+
cursor: not-allowed;
|
|
4441
|
+
color: var(--gray-400);
|
|
4442
|
+
}
|
|
4443
|
+
|
|
4444
|
+
&[readonly],
|
|
4445
|
+
&[contenteditable='false'] {
|
|
4446
|
+
cursor: not-allowed;
|
|
4447
|
+
color: var(--gray-400);
|
|
4448
|
+
}
|
|
4449
|
+
|
|
4450
|
+
> p {
|
|
4451
|
+
margin: 0;
|
|
4452
|
+
}
|
|
4453
|
+
`;
|
|
4454
|
+
var inputMultiLine = (lines) => import_react43.css`
|
|
4455
|
+
${import_design_system19.scrollbarStyles}
|
|
4456
|
+
// 1.5 = line height, spacing-sm = top and bottom padding + spacing-xs to give a slight increase in height
|
|
4457
|
+
// as the text looked to close to the bottom of the input
|
|
4458
|
+
height: calc(${lines * 1.5}em + var(--spacing-sm) + var(--spacing-xs));
|
|
4459
|
+
resize: vertical;
|
|
4460
|
+
overflow: auto;
|
|
4461
|
+
`;
|
|
4462
|
+
|
|
4359
4463
|
// src/components/Variables/toolbox/InputVariablesProvider.tsx
|
|
4360
4464
|
var React10 = __toESM(require("react"));
|
|
4361
|
-
var
|
|
4465
|
+
var import_react44 = require("react");
|
|
4362
4466
|
|
|
4363
4467
|
// src/components/Variables/util/hasReferencedVariables.ts
|
|
4364
4468
|
var import_canvas5 = require("@uniformdev/canvas");
|
|
@@ -4403,7 +4507,7 @@ function useInputVariablesState({
|
|
|
4403
4507
|
const hadVariablesInValueForReals = inputWhenNoVariables ? hadVariablesInValue : hasVariablesInValue;
|
|
4404
4508
|
const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption;
|
|
4405
4509
|
const disableResetForReals = !inputWhenNoVariables || !hadVariablesInValueForReals;
|
|
4406
|
-
const sharedMenuProps = (0,
|
|
4510
|
+
const sharedMenuProps = (0, import_react44.useMemo)(
|
|
4407
4511
|
() => ({
|
|
4408
4512
|
menuTooltip,
|
|
4409
4513
|
showAddVariableMenuOption,
|
|
@@ -4434,15 +4538,15 @@ function useInputVariablesState({
|
|
|
4434
4538
|
}
|
|
4435
4539
|
|
|
4436
4540
|
// src/components/Variables/toolbox/VariableField.styles.ts
|
|
4437
|
-
var
|
|
4438
|
-
var labelText =
|
|
4541
|
+
var import_react45 = require("@emotion/react");
|
|
4542
|
+
var labelText = import_react45.css`
|
|
4439
4543
|
align-items: center;
|
|
4440
4544
|
display: flex;
|
|
4441
4545
|
gap: var(--spacing-xs);
|
|
4442
4546
|
font-weight: var(--fw-regular);
|
|
4443
4547
|
margin: 0 0 var(--spacing-xs);
|
|
4444
4548
|
`;
|
|
4445
|
-
var
|
|
4549
|
+
var variableBindButton2 = import_react45.css`
|
|
4446
4550
|
align-items: center;
|
|
4447
4551
|
border: none;
|
|
4448
4552
|
border-radius: var(--rounded-base);
|
|
@@ -4473,8 +4577,8 @@ var import_lexical6 = require("lexical");
|
|
|
4473
4577
|
// src/components/Variables/toolbox/SelectVariableMenu.tsx
|
|
4474
4578
|
var import_BsFillPlusCircleFill = require("@react-icons/all-files/bs/BsFillPlusCircleFill");
|
|
4475
4579
|
var import_CgUsbC = require("@react-icons/all-files/cg/CgUsbC");
|
|
4476
|
-
var
|
|
4477
|
-
var
|
|
4580
|
+
var import_design_system20 = require("@uniformdev/design-system");
|
|
4581
|
+
var import_react46 = require("react");
|
|
4478
4582
|
var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
|
|
4479
4583
|
function SelectVariableMenu({
|
|
4480
4584
|
onSelectVariable,
|
|
@@ -4489,7 +4593,7 @@ function SelectVariableMenu({
|
|
|
4489
4593
|
filterVariable
|
|
4490
4594
|
}) {
|
|
4491
4595
|
const { variables, canDispatch, readOnly } = useVariables(true);
|
|
4492
|
-
const btnRef = (0,
|
|
4596
|
+
const btnRef = (0, import_react46.useRef)(null);
|
|
4493
4597
|
const { editVariable } = useVariableEditor();
|
|
4494
4598
|
const variablesGroups = variablesToGroupedList(variables, filterVariable, getEditorContext == null ? void 0 : getEditorContext());
|
|
4495
4599
|
const showAddVariableMenuOptionForReals = showAddVariableMenuOption && canDispatch && !readOnly;
|
|
@@ -4498,7 +4602,7 @@ function SelectVariableMenu({
|
|
|
4498
4602
|
return null;
|
|
4499
4603
|
}
|
|
4500
4604
|
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
4501
|
-
|
|
4605
|
+
import_design_system20.Menu,
|
|
4502
4606
|
{
|
|
4503
4607
|
placement: portal ? "bottom-end" : "bottom-start",
|
|
4504
4608
|
portal,
|
|
@@ -4517,7 +4621,7 @@ function SelectVariableMenu({
|
|
|
4517
4621
|
menuLabel: menuTooltip,
|
|
4518
4622
|
children: [
|
|
4519
4623
|
showAddVariableMenuOptionForReals ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4520
|
-
|
|
4624
|
+
import_design_system20.MenuItem,
|
|
4521
4625
|
{
|
|
4522
4626
|
onClick: async () => {
|
|
4523
4627
|
const result = await editVariable("", getEditorContext == null ? void 0 : getEditorContext());
|
|
@@ -4527,19 +4631,19 @@ function SelectVariableMenu({
|
|
|
4527
4631
|
onSelectVariable == null ? void 0 : onSelectVariable(result.selectedVariable);
|
|
4528
4632
|
},
|
|
4529
4633
|
"data-testid": "add-variable-button",
|
|
4530
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
4634
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_design_system20.HorizontalRhythm, { gap: "sm", align: "center", children: [
|
|
4531
4635
|
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_BsFillPlusCircleFill.BsFillPlusCircleFill, { fill: "var(--gray-500)", size: "1.25em" }),
|
|
4532
4636
|
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: typeof showAddVariableMenuOption === "string" ? showAddVariableMenuOption : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: "Add\u2026" }) })
|
|
4533
4637
|
] })
|
|
4534
4638
|
}
|
|
4535
4639
|
) : null,
|
|
4536
|
-
showAddVariableMenuOptionForReals && menuHasVariableOptions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4640
|
+
showAddVariableMenuOptionForReals && menuHasVariableOptions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system20.MenuItemSeparator, {}) : null,
|
|
4537
4641
|
variablesGroups.map((group) => {
|
|
4538
4642
|
var _a;
|
|
4539
|
-
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4643
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system20.MenuGroup, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
|
|
4540
4644
|
const { name, displayName, helpText } = variable;
|
|
4541
4645
|
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
4542
|
-
|
|
4646
|
+
import_design_system20.MenuItem,
|
|
4543
4647
|
{
|
|
4544
4648
|
id: name,
|
|
4545
4649
|
css: menuItemTextGroup,
|
|
@@ -4553,9 +4657,9 @@ function SelectVariableMenu({
|
|
|
4553
4657
|
);
|
|
4554
4658
|
}) }, group.name);
|
|
4555
4659
|
}),
|
|
4556
|
-
menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4557
|
-
onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4558
|
-
tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
4660
|
+
menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system20.MenuItemSeparator, {}) : null,
|
|
4661
|
+
onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system20.MenuItem, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
|
|
4662
|
+
tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system20.MenuItemSeparator, {}) : null,
|
|
4559
4663
|
tip ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("i", { css: variablesTipText, children: tip }) : null
|
|
4560
4664
|
]
|
|
4561
4665
|
}
|
|
@@ -4605,7 +4709,7 @@ function VariableField({
|
|
|
4605
4709
|
VariablesComposerVariableMenu,
|
|
4606
4710
|
{
|
|
4607
4711
|
...selectVariableMenuOptions,
|
|
4608
|
-
buttonCss: [
|
|
4712
|
+
buttonCss: [variableBindButton2, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
|
|
4609
4713
|
buttonProps: isActive ? { "aria-pressed": "true" } : void 0
|
|
4610
4714
|
}
|
|
4611
4715
|
) : null;
|
|
@@ -4623,14 +4727,14 @@ var import_LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlug
|
|
|
4623
4727
|
var import_LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
|
|
4624
4728
|
var import_LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
4625
4729
|
var import_LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
|
|
4626
|
-
var
|
|
4730
|
+
var import_react49 = require("react");
|
|
4627
4731
|
|
|
4628
4732
|
// src/components/Variables/composer/DisablePlugin.tsx
|
|
4629
4733
|
var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
|
|
4630
|
-
var
|
|
4734
|
+
var import_react47 = require("react");
|
|
4631
4735
|
function DisablePlugin({ disabled }) {
|
|
4632
4736
|
const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
|
|
4633
|
-
(0,
|
|
4737
|
+
(0, import_react47.useEffect)(() => {
|
|
4634
4738
|
editor.setEditable(!disabled);
|
|
4635
4739
|
}, [editor, disabled]);
|
|
4636
4740
|
return null;
|
|
@@ -4639,10 +4743,10 @@ function DisablePlugin({ disabled }) {
|
|
|
4639
4743
|
// src/components/Variables/composer/SingleLineTextPlugin.tsx
|
|
4640
4744
|
var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
|
|
4641
4745
|
var import_lexical7 = require("lexical");
|
|
4642
|
-
var
|
|
4746
|
+
var import_react48 = require("react");
|
|
4643
4747
|
function SingleLineTextPlugin() {
|
|
4644
4748
|
const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
|
|
4645
|
-
(0,
|
|
4749
|
+
(0, import_react48.useEffect)(() => {
|
|
4646
4750
|
editor.registerNodeTransform(import_lexical7.LineBreakNode, (node) => {
|
|
4647
4751
|
node.remove();
|
|
4648
4752
|
});
|
|
@@ -4695,8 +4799,8 @@ function VariablesComposer(props) {
|
|
|
4695
4799
|
autoFocus,
|
|
4696
4800
|
...variablesPluginProps
|
|
4697
4801
|
} = props;
|
|
4698
|
-
const [lastEmittedValue, setLastEmittedValue] = (0,
|
|
4699
|
-
const editorConfig = (0,
|
|
4802
|
+
const [lastEmittedValue, setLastEmittedValue] = (0, import_react49.useState)(value);
|
|
4803
|
+
const editorConfig = (0, import_react49.useMemo)(
|
|
4700
4804
|
() => ({
|
|
4701
4805
|
namespace: "uniform",
|
|
4702
4806
|
onError(error) {
|
|
@@ -4708,8 +4812,8 @@ function VariablesComposer(props) {
|
|
|
4708
4812
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4709
4813
|
[]
|
|
4710
4814
|
);
|
|
4711
|
-
const editorState = (0,
|
|
4712
|
-
const updateTimeout = (0,
|
|
4815
|
+
const editorState = (0, import_react49.useRef)();
|
|
4816
|
+
const updateTimeout = (0, import_react49.useRef)();
|
|
4713
4817
|
if (typeof document === "undefined")
|
|
4714
4818
|
return null;
|
|
4715
4819
|
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_LexicalComposer.LexicalComposer, { initialConfig: editorConfig, children: [
|
|
@@ -4752,10 +4856,10 @@ var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin")
|
|
|
4752
4856
|
var import_LexicalPlainTextPlugin = require("@lexical/react/LexicalPlainTextPlugin");
|
|
4753
4857
|
var import_utils4 = require("@lexical/utils");
|
|
4754
4858
|
var import_lexical9 = require("lexical");
|
|
4755
|
-
var
|
|
4859
|
+
var import_react50 = require("react");
|
|
4756
4860
|
var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
|
|
4757
4861
|
function VariablesComposerInput({
|
|
4758
|
-
css:
|
|
4862
|
+
css: css38,
|
|
4759
4863
|
placeholder,
|
|
4760
4864
|
...contentEditableProps
|
|
4761
4865
|
}) {
|
|
@@ -4774,7 +4878,7 @@ function VariablesComposerInput({
|
|
|
4774
4878
|
}
|
|
4775
4879
|
function RichishCopyAndPastePlugin() {
|
|
4776
4880
|
const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
|
|
4777
|
-
(0,
|
|
4881
|
+
(0, import_react50.useEffect)(() => {
|
|
4778
4882
|
return (0, import_utils4.mergeRegister)(
|
|
4779
4883
|
editor.registerCommand(
|
|
4780
4884
|
import_lexical9.COPY_COMMAND,
|
|
@@ -4858,6 +4962,7 @@ function InputVariables(props) {
|
|
|
4858
4962
|
value,
|
|
4859
4963
|
enableEditingVariables,
|
|
4860
4964
|
disableInlineMenu,
|
|
4965
|
+
showMenuPosition,
|
|
4861
4966
|
onChange,
|
|
4862
4967
|
transformPaste,
|
|
4863
4968
|
showAddVariableMenuOption,
|
|
@@ -4877,7 +4982,7 @@ function InputVariables(props) {
|
|
|
4877
4982
|
styleVariant = "default",
|
|
4878
4983
|
renderMenuInPortal
|
|
4879
4984
|
} = props;
|
|
4880
|
-
const [finalId] = (0,
|
|
4985
|
+
const [finalId] = (0, import_react52.useState)(id != null ? id : () => (0, import_uuid2.v4)());
|
|
4881
4986
|
const { dispatch, canDispatch, isEditing } = useVariables(true);
|
|
4882
4987
|
const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps } = useInputVariablesState(props);
|
|
4883
4988
|
const useInputWithNoVariables = Boolean(inputWhenNoVariables && !hadVariablesInValue);
|
|
@@ -4891,40 +4996,64 @@ function InputVariables(props) {
|
|
|
4891
4996
|
},
|
|
4892
4997
|
css: disabled ? inputDisabled : "",
|
|
4893
4998
|
children: [
|
|
4894
|
-
|
|
4895
|
-
|
|
4999
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
5000
|
+
import_design_system21.HorizontalRhythm,
|
|
4896
5001
|
{
|
|
4897
|
-
|
|
4898
|
-
|
|
4899
|
-
|
|
4900
|
-
|
|
4901
|
-
|
|
4902
|
-
|
|
4903
|
-
|
|
4904
|
-
|
|
4905
|
-
|
|
4906
|
-
|
|
4907
|
-
|
|
4908
|
-
|
|
4909
|
-
|
|
4910
|
-
|
|
4911
|
-
|
|
4912
|
-
|
|
4913
|
-
|
|
4914
|
-
|
|
4915
|
-
|
|
4916
|
-
|
|
4917
|
-
|
|
4918
|
-
|
|
4919
|
-
|
|
4920
|
-
|
|
4921
|
-
|
|
5002
|
+
align: "center",
|
|
5003
|
+
gap: "xs",
|
|
5004
|
+
css: import_react51.css`
|
|
5005
|
+
& > div:first-child {
|
|
5006
|
+
flex-grow: 1;
|
|
5007
|
+
}
|
|
5008
|
+
`,
|
|
5009
|
+
children: [
|
|
5010
|
+
useInputWithNoVariables ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
5011
|
+
InputVariablesOverlayMenu,
|
|
5012
|
+
{
|
|
5013
|
+
...sharedMenuProps,
|
|
5014
|
+
disabled: disableVariablesForReals || showMenuPosition && showMenuPosition !== "label" || disableInlineMenu === true || disableInlineMenu === "by-input",
|
|
5015
|
+
portal: renderMenuInPortal,
|
|
5016
|
+
replaceValueOnVariableInsert: useInputWithNoVariables,
|
|
5017
|
+
useInputWhenNoVariables: useInputWithNoVariables,
|
|
5018
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
5019
|
+
VariablesComposerInput,
|
|
5020
|
+
{
|
|
5021
|
+
id: finalId,
|
|
5022
|
+
"aria-label": ariaLabel,
|
|
5023
|
+
"data-testid": dataTestId ? dataTestId : "input-container",
|
|
5024
|
+
"data-text-value": value,
|
|
5025
|
+
css: [input, styleVariant === "compact" ? inputCompact : null],
|
|
5026
|
+
placeholder: placeholder ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
5027
|
+
import_design_system21.Caption,
|
|
5028
|
+
{
|
|
5029
|
+
css: [
|
|
5030
|
+
placeholderCaption,
|
|
5031
|
+
styleVariant === "compact" ? placeholderCompact : null
|
|
5032
|
+
],
|
|
5033
|
+
children: placeholder
|
|
5034
|
+
}
|
|
5035
|
+
) : void 0
|
|
5036
|
+
}
|
|
5037
|
+
)
|
|
5038
|
+
}
|
|
5039
|
+
),
|
|
5040
|
+
disableVariablesForReals || showMenuPosition !== "inline-right" ? null : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
5041
|
+
VariablesComposerVariableMenu,
|
|
5042
|
+
{
|
|
5043
|
+
...sharedMenuProps,
|
|
5044
|
+
buttonCss: variableBindButton,
|
|
5045
|
+
tip: useInputWithNoVariables ? void 0 : "Tip: access this list by typing $$",
|
|
5046
|
+
buttonProps: hadVariablesInValue ? { "aria-pressed": "true" } : void 0,
|
|
5047
|
+
replaceValueOnVariableInsert: useInputWithNoVariables
|
|
5048
|
+
}
|
|
5049
|
+
)
|
|
5050
|
+
]
|
|
4922
5051
|
}
|
|
4923
5052
|
),
|
|
4924
|
-
caption ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
4925
|
-
errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
4926
|
-
warningMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
4927
|
-
infoMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
5053
|
+
caption ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system21.Caption, { children: caption }) : null,
|
|
5054
|
+
errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system21.ErrorMessage, { message: errorMessage }) : null,
|
|
5055
|
+
warningMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system21.WarningMessage, { message: warningMessage }) : null,
|
|
5056
|
+
infoMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system21.InfoMessage, { message: infoMessage }) : null
|
|
4928
5057
|
]
|
|
4929
5058
|
}
|
|
4930
5059
|
);
|
|
@@ -4940,7 +5069,7 @@ function InputVariables(props) {
|
|
|
4940
5069
|
},
|
|
4941
5070
|
id: finalId,
|
|
4942
5071
|
isActive: hadVariablesInValue,
|
|
4943
|
-
disableVariables: disableVariablesForReals || disableInlineMenu === "by-label",
|
|
5072
|
+
disableVariables: disableVariablesForReals || showMenuPosition && showMenuPosition !== "label" || disableInlineMenu === true || disableInlineMenu === "by-label",
|
|
4944
5073
|
children: input3
|
|
4945
5074
|
}
|
|
4946
5075
|
);
|
|
@@ -4996,102 +5125,7 @@ function InputVariablesOverlayMenu({
|
|
|
4996
5125
|
var import_CgUsbC2 = require("@react-icons/all-files/cg/CgUsbC");
|
|
4997
5126
|
var import_canvas7 = require("@uniformdev/canvas");
|
|
4998
5127
|
var import_design_system22 = require("@uniformdev/design-system");
|
|
4999
|
-
var
|
|
5000
|
-
|
|
5001
|
-
// src/components/Variables/styles/ParameterVariables.styles.ts
|
|
5002
|
-
var import_react51 = require("@emotion/react");
|
|
5003
|
-
var import_design_system21 = require("@uniformdev/design-system");
|
|
5004
|
-
var variableBindButton2 = import_react51.css`
|
|
5005
|
-
align-items: center;
|
|
5006
|
-
border: none;
|
|
5007
|
-
border-radius: var(--rounded-base);
|
|
5008
|
-
background: none;
|
|
5009
|
-
display: flex;
|
|
5010
|
-
height: 1.2rem;
|
|
5011
|
-
padding: var(--spacing-2xs);
|
|
5012
|
-
transition: background var(--duration-fast) var(--timing-ease-out),
|
|
5013
|
-
color var(--duration-fast) var(--timing-ease-out);
|
|
5014
|
-
width: 1.2rem;
|
|
5015
|
-
|
|
5016
|
-
&:hover,
|
|
5017
|
-
&[aria-pressed='true']:not(:disabled) {
|
|
5018
|
-
background: var(--brand-secondary-3);
|
|
5019
|
-
color: var(--white);
|
|
5020
|
-
}
|
|
5021
|
-
|
|
5022
|
-
&[aria-disabled='true'] {
|
|
5023
|
-
background: none;
|
|
5024
|
-
color: currentColor;
|
|
5025
|
-
}
|
|
5026
|
-
|
|
5027
|
-
// fixes menu resizing issue within iframes
|
|
5028
|
-
// see https://linear.app/uniform/issue/UNI-3068/mesh-integration-resizing-with-menus
|
|
5029
|
-
+ [role='menu'] {
|
|
5030
|
-
max-height: unset;
|
|
5031
|
-
}
|
|
5032
|
-
`;
|
|
5033
|
-
var input2 = import_react51.css`
|
|
5034
|
-
display: block;
|
|
5035
|
-
appearance: none;
|
|
5036
|
-
box-sizing: border-box;
|
|
5037
|
-
background: var(--white);
|
|
5038
|
-
border: 1px solid var(--gray-200);
|
|
5039
|
-
border-radius: var(--rounded-sm);
|
|
5040
|
-
color: var(--gray-700);
|
|
5041
|
-
font-size: var(--fs-sm);
|
|
5042
|
-
line-height: 1.5;
|
|
5043
|
-
min-height: 2rem;
|
|
5044
|
-
padding: var(--spacing-sm);
|
|
5045
|
-
width: 100%;
|
|
5046
|
-
position: relative;
|
|
5047
|
-
white-space: normal;
|
|
5048
|
-
transition-property: background, border-color, color, box-shadow, border-radius;
|
|
5049
|
-
transition-duration: var(--duration-fast);
|
|
5050
|
-
transition-timing-function: var(--timing-ease-out);
|
|
5051
|
-
|
|
5052
|
-
&::placeholder {
|
|
5053
|
-
color: var(--gray-400);
|
|
5054
|
-
}
|
|
5055
|
-
|
|
5056
|
-
&:focus,
|
|
5057
|
-
&:focus-within {
|
|
5058
|
-
border-radius: var(--rounded-sm);
|
|
5059
|
-
box-shadow: var(--elevation-100);
|
|
5060
|
-
border: 1px solid var(--accent-dark-active);
|
|
5061
|
-
outline: none;
|
|
5062
|
-
}
|
|
5063
|
-
&:hover {
|
|
5064
|
-
border: 1px solid var(--accent-dark-hover);
|
|
5065
|
-
}
|
|
5066
|
-
|
|
5067
|
-
&:disabled,
|
|
5068
|
-
&:disabled::placeholder,
|
|
5069
|
-
&:disabled:hover {
|
|
5070
|
-
border-radius: var(--rounded-sm);
|
|
5071
|
-
cursor: not-allowed;
|
|
5072
|
-
color: var(--gray-400);
|
|
5073
|
-
}
|
|
5074
|
-
|
|
5075
|
-
&[readonly],
|
|
5076
|
-
&[contenteditable='false'] {
|
|
5077
|
-
cursor: not-allowed;
|
|
5078
|
-
color: var(--gray-400);
|
|
5079
|
-
}
|
|
5080
|
-
|
|
5081
|
-
> p {
|
|
5082
|
-
margin: 0;
|
|
5083
|
-
}
|
|
5084
|
-
`;
|
|
5085
|
-
var inputMultiLine = (lines) => import_react51.css`
|
|
5086
|
-
${import_design_system21.scrollbarStyles}
|
|
5087
|
-
// 1.5 = line height, spacing-sm = top and bottom padding + spacing-xs to give a slight increase in height
|
|
5088
|
-
// as the text looked to close to the bottom of the input
|
|
5089
|
-
height: calc(${lines * 1.5}em + var(--spacing-sm) + var(--spacing-xs));
|
|
5090
|
-
resize: vertical;
|
|
5091
|
-
overflow: auto;
|
|
5092
|
-
`;
|
|
5093
|
-
|
|
5094
|
-
// src/components/Variables/ParameterConnectionIndicator.tsx
|
|
5128
|
+
var import_react53 = require("react");
|
|
5095
5129
|
var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
|
|
5096
5130
|
function ParameterConnectionIndicator({
|
|
5097
5131
|
children,
|
|
@@ -5100,7 +5134,7 @@ function ParameterConnectionIndicator({
|
|
|
5100
5134
|
disabled,
|
|
5101
5135
|
menuTooltip = "Insert variable"
|
|
5102
5136
|
}) {
|
|
5103
|
-
const hasVariablesInValue = (0,
|
|
5137
|
+
const hasVariablesInValue = (0, import_react53.useMemo)(() => {
|
|
5104
5138
|
let result = false;
|
|
5105
5139
|
(0, import_canvas7.bindVariablesToObject)({
|
|
5106
5140
|
value,
|
|
@@ -5123,7 +5157,7 @@ function ParameterConnectionIndicator({
|
|
|
5123
5157
|
{
|
|
5124
5158
|
title: menuTooltip,
|
|
5125
5159
|
"aria-pressed": hasVariablesInValue,
|
|
5126
|
-
css: [menuBtn,
|
|
5160
|
+
css: [menuBtn, variableBindButton],
|
|
5127
5161
|
type: "button",
|
|
5128
5162
|
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_CgUsbC2.CgUsbC, { size: "1.4rem" })
|
|
5129
5163
|
}
|
|
@@ -5137,21 +5171,21 @@ function ParameterConnectionIndicator({
|
|
|
5137
5171
|
|
|
5138
5172
|
// src/components/Variables/ParameterOrSingleVariable.tsx
|
|
5139
5173
|
var import_design_system23 = require("@uniformdev/design-system");
|
|
5140
|
-
var
|
|
5174
|
+
var import_react55 = require("react");
|
|
5141
5175
|
|
|
5142
5176
|
// src/components/Variables/composer/OnDisconnectPlugin.tsx
|
|
5143
5177
|
var import_LexicalComposerContext10 = require("@lexical/react/LexicalComposerContext");
|
|
5144
5178
|
var import_utils5 = require("@lexical/utils");
|
|
5145
5179
|
var import_lexical10 = require("lexical");
|
|
5146
|
-
var
|
|
5180
|
+
var import_react54 = require("react");
|
|
5147
5181
|
function OnDisconnectPlugin({
|
|
5148
5182
|
onDisconnect
|
|
5149
5183
|
}) {
|
|
5150
5184
|
const [editor] = (0, import_LexicalComposerContext10.useLexicalComposerContext)();
|
|
5151
5185
|
const { variables } = useVariables(true);
|
|
5152
|
-
const variablesRef = (0,
|
|
5186
|
+
const variablesRef = (0, import_react54.useRef)(variables);
|
|
5153
5187
|
variablesRef.current = variables;
|
|
5154
|
-
(0,
|
|
5188
|
+
(0, import_react54.useEffect)(() => {
|
|
5155
5189
|
return (0, import_utils5.mergeRegister)(
|
|
5156
5190
|
editor.registerCommand(
|
|
5157
5191
|
DISCONNECT_VARIABLE_COMMAND,
|
|
@@ -5196,7 +5230,7 @@ function ParameterOrSingleVariable(props) {
|
|
|
5196
5230
|
hasVariablesInValue,
|
|
5197
5231
|
setHadVariablesInValue
|
|
5198
5232
|
} = useInputVariablesState(props);
|
|
5199
|
-
const handleDisconnect = (0,
|
|
5233
|
+
const handleDisconnect = (0, import_react55.useCallback)(
|
|
5200
5234
|
(variable) => {
|
|
5201
5235
|
setHadVariablesInValue(false);
|
|
5202
5236
|
if (onDisconnect) {
|
|
@@ -5235,7 +5269,7 @@ function ParameterOrSingleVariable(props) {
|
|
|
5235
5269
|
VariablesComposerVariableMenu,
|
|
5236
5270
|
{
|
|
5237
5271
|
...sharedMenuProps,
|
|
5238
|
-
buttonCss: [
|
|
5272
|
+
buttonCss: [variableBindButton],
|
|
5239
5273
|
buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
|
|
5240
5274
|
replaceValueOnVariableInsert: true,
|
|
5241
5275
|
filterVariable
|
|
@@ -5249,7 +5283,7 @@ function ParameterOrSingleVariable(props) {
|
|
|
5249
5283
|
}
|
|
5250
5284
|
|
|
5251
5285
|
// src/components/Variables/ParameterVariables.tsx
|
|
5252
|
-
var
|
|
5286
|
+
var import_react56 = require("@emotion/react");
|
|
5253
5287
|
var import_design_system24 = require("@uniformdev/design-system");
|
|
5254
5288
|
var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
|
|
5255
5289
|
function ParameterVariables(props) {
|
|
@@ -5308,8 +5342,8 @@ function ParameterVariables(props) {
|
|
|
5308
5342
|
"data-text-value": value,
|
|
5309
5343
|
css: [
|
|
5310
5344
|
input2,
|
|
5311
|
-
typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(2) :
|
|
5312
|
-
inputCss != null ? inputCss :
|
|
5345
|
+
typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(2) : import_react56.css``,
|
|
5346
|
+
inputCss != null ? inputCss : import_react56.css``
|
|
5313
5347
|
]
|
|
5314
5348
|
}
|
|
5315
5349
|
) }),
|
|
@@ -5317,7 +5351,7 @@ function ParameterVariables(props) {
|
|
|
5317
5351
|
VariablesComposerVariableMenu,
|
|
5318
5352
|
{
|
|
5319
5353
|
...sharedMenuProps,
|
|
5320
|
-
buttonCss: [
|
|
5354
|
+
buttonCss: [variableBindButton],
|
|
5321
5355
|
tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
|
|
5322
5356
|
buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
|
|
5323
5357
|
replaceValueOnVariableInsert: useInputWhenNoVariables
|
|
@@ -5345,13 +5379,13 @@ ${prettifyBindExpression(bindExpression)}`
|
|
|
5345
5379
|
}
|
|
5346
5380
|
|
|
5347
5381
|
// src/components/Variables/VariablesList.tsx
|
|
5348
|
-
var
|
|
5382
|
+
var import_react58 = require("@emotion/react");
|
|
5349
5383
|
var import_design_system25 = require("@uniformdev/design-system");
|
|
5350
5384
|
var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
|
|
5351
5385
|
|
|
5352
5386
|
// src/components/Variables/styles/VariablesList.styles.ts
|
|
5353
|
-
var
|
|
5354
|
-
var tableRow = (isDragging) =>
|
|
5387
|
+
var import_react57 = require("@emotion/react");
|
|
5388
|
+
var tableRow = (isDragging) => import_react57.css`
|
|
5355
5389
|
position: relative;
|
|
5356
5390
|
${isDragging ? `
|
|
5357
5391
|
display: table;
|
|
@@ -5359,7 +5393,7 @@ var tableRow = (isDragging) => import_react56.css`
|
|
|
5359
5393
|
top: auto !important;
|
|
5360
5394
|
` : void 0}
|
|
5361
5395
|
`;
|
|
5362
|
-
var tableCellDragIcon =
|
|
5396
|
+
var tableCellDragIcon = import_react57.css`
|
|
5363
5397
|
&::after {
|
|
5364
5398
|
content: '';
|
|
5365
5399
|
display: block;
|
|
@@ -5377,7 +5411,7 @@ var tableCellDragIcon = import_react56.css`
|
|
|
5377
5411
|
opacity: 1;
|
|
5378
5412
|
}
|
|
5379
5413
|
`;
|
|
5380
|
-
var variableName =
|
|
5414
|
+
var variableName = import_react57.css`
|
|
5381
5415
|
border: none;
|
|
5382
5416
|
font-weight: var(--fw-medium);
|
|
5383
5417
|
padding: 0;
|
|
@@ -5387,7 +5421,7 @@ var variableName = import_react56.css`
|
|
|
5387
5421
|
white-space: nowrap;
|
|
5388
5422
|
max-width: 20ch;
|
|
5389
5423
|
`;
|
|
5390
|
-
var variableValue =
|
|
5424
|
+
var variableValue = import_react57.css`
|
|
5391
5425
|
overflow: hidden;
|
|
5392
5426
|
text-overflow: ellipsis;
|
|
5393
5427
|
white-space: nowrap;
|
|
@@ -5464,7 +5498,7 @@ function VariablesList() {
|
|
|
5464
5498
|
title: `delete ${text}`,
|
|
5465
5499
|
css: [
|
|
5466
5500
|
import_design_system25.button,
|
|
5467
|
-
|
|
5501
|
+
import_react58.css`
|
|
5468
5502
|
background: transparent;
|
|
5469
5503
|
`
|
|
5470
5504
|
],
|
|
@@ -5498,6 +5532,10 @@ function VariablesList() {
|
|
|
5498
5532
|
|
|
5499
5533
|
// src/components/DataResourceDynamicInputProvider.tsx
|
|
5500
5534
|
var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
|
|
5535
|
+
var DataResourceInputContext = (0, import_react59.createContext)(void 0);
|
|
5536
|
+
var useDataResourceDynamicInputs = () => {
|
|
5537
|
+
return (0, import_react59.useContext)(DataResourceInputContext);
|
|
5538
|
+
};
|
|
5501
5539
|
function DataResourceDynamicInputProvider(props) {
|
|
5502
5540
|
const { children, dynamicInputs } = props;
|
|
5503
5541
|
if (dynamicInputs) {
|
|
@@ -5516,7 +5554,7 @@ function DataResourceDynamicInputProviderRenderer({
|
|
|
5516
5554
|
dynamicInputs
|
|
5517
5555
|
}) {
|
|
5518
5556
|
const variables = useDynamicInputsAsVariables(dynamicInputs);
|
|
5519
|
-
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(VariablesProvider, { value: variables, readOnly: true, children });
|
|
5557
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DataResourceInputContext.Provider, { value: dynamicInputs, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(VariablesProvider, { value: variables, readOnly: true, children }) });
|
|
5520
5558
|
}
|
|
5521
5559
|
|
|
5522
5560
|
// src/components/DataResourceVariablesList.tsx
|
|
@@ -5593,9 +5631,9 @@ function TextVariableRenderer({ definition, value, setValue }) {
|
|
|
5593
5631
|
}
|
|
5594
5632
|
|
|
5595
5633
|
// src/components/Request/RequestBody.tsx
|
|
5596
|
-
var
|
|
5634
|
+
var import_react61 = require("@emotion/react");
|
|
5597
5635
|
var import_design_system27 = require("@uniformdev/design-system");
|
|
5598
|
-
var
|
|
5636
|
+
var import_react62 = require("react");
|
|
5599
5637
|
|
|
5600
5638
|
// src/components/Request/RequestProvider.tsx
|
|
5601
5639
|
var React11 = __toESM(require("react"));
|
|
@@ -5679,11 +5717,11 @@ function useRequest() {
|
|
|
5679
5717
|
}
|
|
5680
5718
|
|
|
5681
5719
|
// src/components/Request/styles/Request.styles.ts
|
|
5682
|
-
var
|
|
5683
|
-
var innerContentStyles =
|
|
5720
|
+
var import_react60 = require("@emotion/react");
|
|
5721
|
+
var innerContentStyles = import_react60.css`
|
|
5684
5722
|
background: var(--white);
|
|
5685
5723
|
`;
|
|
5686
|
-
var requestTypeContainer = (bgColor) =>
|
|
5724
|
+
var requestTypeContainer = (bgColor) => import_react60.css`
|
|
5687
5725
|
align-items: start;
|
|
5688
5726
|
background: ${bgColor};
|
|
5689
5727
|
display: grid;
|
|
@@ -5721,11 +5759,11 @@ var LANGUAGE_TO_CONTENT_TYPE = {
|
|
|
5721
5759
|
};
|
|
5722
5760
|
function RequestBody() {
|
|
5723
5761
|
const { request, dispatch } = useRequest();
|
|
5724
|
-
const [language, setLanguage] = (0,
|
|
5762
|
+
const [language, setLanguage] = (0, import_react62.useState)("json");
|
|
5725
5763
|
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
|
|
5726
5764
|
"div",
|
|
5727
5765
|
{
|
|
5728
|
-
css:
|
|
5766
|
+
css: import_react61.css`
|
|
5729
5767
|
background: var(--white);
|
|
5730
5768
|
`,
|
|
5731
5769
|
children: [
|
|
@@ -5733,7 +5771,7 @@ function RequestBody() {
|
|
|
5733
5771
|
RequestTypeContainer,
|
|
5734
5772
|
{
|
|
5735
5773
|
bgColor: "var(--gray-100)",
|
|
5736
|
-
css:
|
|
5774
|
+
css: import_react61.css`
|
|
5737
5775
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
5738
5776
|
`,
|
|
5739
5777
|
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
@@ -6004,8 +6042,8 @@ function RequestParameters({
|
|
|
6004
6042
|
}
|
|
6005
6043
|
|
|
6006
6044
|
// src/components/Request/RequestUrl.tsx
|
|
6007
|
-
var
|
|
6008
|
-
var
|
|
6045
|
+
var import_react63 = require("@emotion/react");
|
|
6046
|
+
var import_react64 = require("react");
|
|
6009
6047
|
|
|
6010
6048
|
// src/components/Request/urlEncodeRequestParameter.ts
|
|
6011
6049
|
function urlEncodeRequestUrl(url, varValues) {
|
|
@@ -6031,7 +6069,7 @@ function RequestUrl() {
|
|
|
6031
6069
|
var _a, _b;
|
|
6032
6070
|
const { variables } = useVariables();
|
|
6033
6071
|
const { request } = useRequest();
|
|
6034
|
-
const mergedParameters = (0,
|
|
6072
|
+
const mergedParameters = (0, import_react64.useMemo)(() => {
|
|
6035
6073
|
var _a2;
|
|
6036
6074
|
if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
|
|
6037
6075
|
return request.parameters;
|
|
@@ -6041,7 +6079,7 @@ function RequestUrl() {
|
|
|
6041
6079
|
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
|
|
6042
6080
|
"small",
|
|
6043
6081
|
{
|
|
6044
|
-
css:
|
|
6082
|
+
css: import_react63.css`
|
|
6045
6083
|
display: inline-block;
|
|
6046
6084
|
margin-bottom: var(--spacing-xs);
|
|
6047
6085
|
word-break: break-word;
|
|
@@ -6279,12 +6317,12 @@ var import_design_system31 = require("@uniformdev/design-system");
|
|
|
6279
6317
|
|
|
6280
6318
|
// src/hooks/useInitializeUniformMeshSdk.ts
|
|
6281
6319
|
var import_mesh_sdk = require("@uniformdev/mesh-sdk");
|
|
6282
|
-
var
|
|
6320
|
+
var import_react65 = require("react");
|
|
6283
6321
|
var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
|
|
6284
|
-
const [error, setError] = (0,
|
|
6285
|
-
const [sdk, setSdk] = (0,
|
|
6286
|
-
const initializationInProgress = (0,
|
|
6287
|
-
(0,
|
|
6322
|
+
const [error, setError] = (0, import_react65.useState)();
|
|
6323
|
+
const [sdk, setSdk] = (0, import_react65.useState)();
|
|
6324
|
+
const initializationInProgress = (0, import_react65.useRef)(false);
|
|
6325
|
+
(0, import_react65.useEffect)(
|
|
6288
6326
|
() => {
|
|
6289
6327
|
if (typeof window === "undefined" || sdk) {
|
|
6290
6328
|
return;
|
|
@@ -6342,7 +6380,7 @@ var MeshApp = ({
|
|
|
6342
6380
|
};
|
|
6343
6381
|
|
|
6344
6382
|
// src/components/ObjectSearch/DataRefreshButton.tsx
|
|
6345
|
-
var
|
|
6383
|
+
var import_react66 = require("@emotion/react");
|
|
6346
6384
|
var import_design_system32 = require("@uniformdev/design-system");
|
|
6347
6385
|
var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
|
|
6348
6386
|
var DataRefreshButton = ({
|
|
@@ -6355,7 +6393,7 @@ var DataRefreshButton = ({
|
|
|
6355
6393
|
!isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
6356
6394
|
import_design_system32.LoadingIndicator,
|
|
6357
6395
|
{
|
|
6358
|
-
css:
|
|
6396
|
+
css: import_react66.css`
|
|
6359
6397
|
${isLoading ? "opacity: 0.2;" : void 0}
|
|
6360
6398
|
`
|
|
6361
6399
|
}
|
|
@@ -6365,15 +6403,16 @@ var DataRefreshButton = ({
|
|
|
6365
6403
|
};
|
|
6366
6404
|
|
|
6367
6405
|
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6368
|
-
var
|
|
6406
|
+
var import_react72 = require("@emotion/react");
|
|
6369
6407
|
var import_canvas9 = require("@uniformdev/canvas");
|
|
6370
|
-
var
|
|
6408
|
+
var import_design_system38 = require("@uniformdev/design-system");
|
|
6409
|
+
var import_react73 = __toESM(require("react"));
|
|
6371
6410
|
|
|
6372
6411
|
// src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
|
|
6373
6412
|
var import_canvas8 = require("@uniformdev/canvas");
|
|
6374
|
-
var
|
|
6413
|
+
var import_react67 = require("react");
|
|
6375
6414
|
var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
|
|
6376
|
-
var ObjectSearchContext = (0,
|
|
6415
|
+
var ObjectSearchContext = (0, import_react67.createContext)({
|
|
6377
6416
|
onSetQuery: () => {
|
|
6378
6417
|
},
|
|
6379
6418
|
onSelectItem: () => {
|
|
@@ -6381,8 +6420,6 @@ var ObjectSearchContext = (0, import_react65.createContext)({
|
|
|
6381
6420
|
query: {},
|
|
6382
6421
|
boundQuery: {},
|
|
6383
6422
|
list: {},
|
|
6384
|
-
onSetList: () => {
|
|
6385
|
-
},
|
|
6386
6423
|
selectedListItems: [],
|
|
6387
6424
|
onRemoveAllSelectedItems: () => {
|
|
6388
6425
|
},
|
|
@@ -6394,16 +6431,16 @@ var ObjectSearchProvider = ({
|
|
|
6394
6431
|
children,
|
|
6395
6432
|
defaultQuery
|
|
6396
6433
|
}) => {
|
|
6397
|
-
const [query, setQuery] = (0,
|
|
6434
|
+
const [query, setQuery] = (0, import_react67.useState)({
|
|
6398
6435
|
contentType: "",
|
|
6399
6436
|
keyword: "",
|
|
6400
6437
|
...defaultQuery
|
|
6401
6438
|
});
|
|
6402
6439
|
const { flatVariables } = useVariables(true);
|
|
6403
|
-
const querySearchDeferred = (0,
|
|
6404
|
-
const [selectedItems, setSelectedItems] = (0,
|
|
6405
|
-
const [list, setList] = (0,
|
|
6406
|
-
const onSetQuery = (0,
|
|
6440
|
+
const querySearchDeferred = (0, import_react67.useDeferredValue)(query);
|
|
6441
|
+
const [selectedItems, setSelectedItems] = (0, import_react67.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
|
|
6442
|
+
const [list, setList] = (0, import_react67.useState)({});
|
|
6443
|
+
const onSetQuery = (0, import_react67.useCallback)(
|
|
6407
6444
|
(value2) => {
|
|
6408
6445
|
if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
|
|
6409
6446
|
return setQuery({
|
|
@@ -6415,7 +6452,7 @@ var ObjectSearchProvider = ({
|
|
|
6415
6452
|
},
|
|
6416
6453
|
[setQuery]
|
|
6417
6454
|
);
|
|
6418
|
-
const onSelectItem = (0,
|
|
6455
|
+
const onSelectItem = (0, import_react67.useCallback)(
|
|
6419
6456
|
(selectedResult) => {
|
|
6420
6457
|
if (Array.isArray(selectedResult)) {
|
|
6421
6458
|
setSelectedItems(selectedResult);
|
|
@@ -6429,17 +6466,17 @@ var ObjectSearchProvider = ({
|
|
|
6429
6466
|
},
|
|
6430
6467
|
[setSelectedItems, selectedItems]
|
|
6431
6468
|
);
|
|
6432
|
-
const onRemoveAllSelectedItems = (0,
|
|
6469
|
+
const onRemoveAllSelectedItems = (0, import_react67.useCallback)(() => {
|
|
6433
6470
|
setSelectedItems([]);
|
|
6434
6471
|
}, [setSelectedItems]);
|
|
6435
|
-
const onSetList = (0,
|
|
6472
|
+
const onSetList = (0, import_react67.useCallback)(
|
|
6436
6473
|
(value2) => {
|
|
6437
6474
|
setList(value2);
|
|
6438
6475
|
},
|
|
6439
6476
|
[setList]
|
|
6440
6477
|
);
|
|
6441
|
-
const boundQuery = (0,
|
|
6442
|
-
const value = (0,
|
|
6478
|
+
const boundQuery = (0, import_react67.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
|
|
6479
|
+
const value = (0, import_react67.useMemo)(
|
|
6443
6480
|
() => ({
|
|
6444
6481
|
boundQuery,
|
|
6445
6482
|
onSetQuery,
|
|
@@ -6466,7 +6503,7 @@ var ObjectSearchProvider = ({
|
|
|
6466
6503
|
return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ObjectSearchContext.Provider, { value, children });
|
|
6467
6504
|
};
|
|
6468
6505
|
function useObjectSearchContext() {
|
|
6469
|
-
return (0,
|
|
6506
|
+
return (0, import_react67.useContext)(ObjectSearchContext);
|
|
6470
6507
|
}
|
|
6471
6508
|
function bindQuery(query, inputs) {
|
|
6472
6509
|
const { result, errors } = (0, import_canvas8.bindVariablesToObject)({
|
|
@@ -6484,9 +6521,9 @@ function bindQuery(query, inputs) {
|
|
|
6484
6521
|
var import_design_system34 = require("@uniformdev/design-system");
|
|
6485
6522
|
|
|
6486
6523
|
// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
|
|
6487
|
-
var
|
|
6524
|
+
var import_react68 = require("@emotion/react");
|
|
6488
6525
|
var import_design_system33 = require("@uniformdev/design-system");
|
|
6489
|
-
var ObjectListItemContainer =
|
|
6526
|
+
var ObjectListItemContainer = import_react68.css`
|
|
6490
6527
|
align-items: center;
|
|
6491
6528
|
border: 1px solid var(--gray-300);
|
|
6492
6529
|
border-radius: var(--rounded-base);
|
|
@@ -6495,11 +6532,11 @@ var ObjectListItemContainer = import_react66.css`
|
|
|
6495
6532
|
grid-template-columns: 1fr auto;
|
|
6496
6533
|
padding: var(--spacing-sm);
|
|
6497
6534
|
`;
|
|
6498
|
-
var ObjectListItemContainerDisabled =
|
|
6535
|
+
var ObjectListItemContainerDisabled = import_react68.css`
|
|
6499
6536
|
opacity: var(--opacity-50);
|
|
6500
6537
|
pointer-events: none;
|
|
6501
6538
|
`;
|
|
6502
|
-
var ObjectListItemLoading =
|
|
6539
|
+
var ObjectListItemLoading = import_react68.css`
|
|
6503
6540
|
animation: ${import_design_system33.skeletonLoading} 1s linear infinite alternate;
|
|
6504
6541
|
border-color: transparent;
|
|
6505
6542
|
min-height: 42px;
|
|
@@ -6523,36 +6560,36 @@ var ObjectListItemLoading = import_react66.css`
|
|
|
6523
6560
|
width: 1rem;
|
|
6524
6561
|
}
|
|
6525
6562
|
`;
|
|
6526
|
-
var ObjectListItemHeadingGroup =
|
|
6563
|
+
var ObjectListItemHeadingGroup = import_react68.css`
|
|
6527
6564
|
align-items: center;
|
|
6528
6565
|
display: grid;
|
|
6529
6566
|
`;
|
|
6530
|
-
var ObjectListItemThumbnail =
|
|
6567
|
+
var ObjectListItemThumbnail = import_react68.css`
|
|
6531
6568
|
width: 30px;
|
|
6532
6569
|
object-fit: contain;
|
|
6533
6570
|
`;
|
|
6534
|
-
var ObjectListItemTitle =
|
|
6571
|
+
var ObjectListItemTitle = import_react68.css`
|
|
6535
6572
|
color: var(--typography-base);
|
|
6536
6573
|
display: block;
|
|
6537
6574
|
font-size: var(--fs-sm);
|
|
6538
6575
|
`;
|
|
6539
|
-
var ObjectListItemSubtitle =
|
|
6576
|
+
var ObjectListItemSubtitle = import_react68.css`
|
|
6540
6577
|
color: var(--gray-500);
|
|
6541
6578
|
display: block;
|
|
6542
6579
|
font-size: var(--fs-xs);
|
|
6543
6580
|
line-height: 1;
|
|
6544
6581
|
`;
|
|
6545
|
-
var ObjectListItemInfoContainer =
|
|
6582
|
+
var ObjectListItemInfoContainer = import_react68.css`
|
|
6546
6583
|
align-items: center;
|
|
6547
6584
|
display: flex;
|
|
6548
6585
|
gap: var(--spacing-sm);
|
|
6549
6586
|
justify-content: center;
|
|
6550
6587
|
`;
|
|
6551
|
-
var ObjectListItemControlledContent =
|
|
6588
|
+
var ObjectListItemControlledContent = import_react68.css`
|
|
6552
6589
|
display: flex;
|
|
6553
6590
|
gap: var(--spacing-sm);
|
|
6554
6591
|
`;
|
|
6555
|
-
var ObjectListItemUnControlledContent =
|
|
6592
|
+
var ObjectListItemUnControlledContent = import_react68.css`
|
|
6556
6593
|
margin-top: var(--spacing-sm);
|
|
6557
6594
|
grid-column: 1 / -1;
|
|
6558
6595
|
`;
|
|
@@ -6622,202 +6659,19 @@ var ObjectSearchListItemLoadingSkeleton = () => {
|
|
|
6622
6659
|
return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
|
|
6623
6660
|
};
|
|
6624
6661
|
|
|
6625
|
-
// src/components/ObjectSearch/
|
|
6626
|
-
var
|
|
6627
|
-
var
|
|
6628
|
-
label,
|
|
6629
|
-
enableDynamicInputToResultId,
|
|
6630
|
-
searchFilters,
|
|
6631
|
-
resultList,
|
|
6632
|
-
children
|
|
6633
|
-
}) => {
|
|
6634
|
-
var _a, _b;
|
|
6635
|
-
const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
|
|
6636
|
-
const { flatVariables } = useVariables(true);
|
|
6637
|
-
const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
|
|
6638
|
-
const listItems = resultList != null ? resultList : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
6639
|
-
import_design_system35.ScrollableList,
|
|
6640
|
-
{
|
|
6641
|
-
role: "list",
|
|
6642
|
-
css: import_react67.css`
|
|
6643
|
-
> div {
|
|
6644
|
-
transition: max-height var(--duration-slow) var(--timing-ease-out);
|
|
6645
|
-
max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
|
|
6646
|
-
}
|
|
6647
|
-
`,
|
|
6648
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DefaultResultList, {})
|
|
6649
|
-
}
|
|
6650
|
-
);
|
|
6651
|
-
const body = /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_design_system35.VerticalRhythm, { children: [
|
|
6652
|
-
searchFilters,
|
|
6653
|
-
listItems
|
|
6654
|
-
] });
|
|
6655
|
-
const handleSelectedVariableChange = (selectedValue) => {
|
|
6656
|
-
var _a2;
|
|
6657
|
-
if (!selectedValue) {
|
|
6658
|
-
onSelectItem([]);
|
|
6659
|
-
return;
|
|
6660
|
-
}
|
|
6661
|
-
const { result, errors } = (0, import_canvas9.bindVariables)({
|
|
6662
|
-
value: selectedValue,
|
|
6663
|
-
variables: flatVariables,
|
|
6664
|
-
errorPrefix: "Dynamic input"
|
|
6665
|
-
});
|
|
6666
|
-
if (!result) {
|
|
6667
|
-
onSelectItem([]);
|
|
6668
|
-
return;
|
|
6669
|
-
}
|
|
6670
|
-
const item = (_a2 = list.items) == null ? void 0 : _a2.find((i) => i.id === result);
|
|
6671
|
-
onSelectItem([
|
|
6672
|
-
{
|
|
6673
|
-
title: selectedValue,
|
|
6674
|
-
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`,
|
|
6675
|
-
// spread any matched list item, overriding the above default props
|
|
6676
|
-
...item,
|
|
6677
|
-
// we want to make sure the ID is our dynamic value
|
|
6678
|
-
id: selectedValue
|
|
6679
|
-
}
|
|
6680
|
-
]);
|
|
6681
|
-
};
|
|
6682
|
-
return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system35.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_design_system35.VerticalRhythm, { children: [
|
|
6683
|
-
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system35.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
6684
|
-
InputVariables,
|
|
6685
|
-
{
|
|
6686
|
-
label,
|
|
6687
|
-
value: inputValue,
|
|
6688
|
-
onChange: (value) => {
|
|
6689
|
-
if (value === inputValue) {
|
|
6690
|
-
return;
|
|
6691
|
-
}
|
|
6692
|
-
handleSelectedVariableChange(value);
|
|
6693
|
-
},
|
|
6694
|
-
inputWhenNoVariables: body,
|
|
6695
|
-
disableVariables: !enableDynamicInputToResultId
|
|
6696
|
-
}
|
|
6697
|
-
) : body }),
|
|
6698
|
-
children
|
|
6699
|
-
] }) });
|
|
6700
|
-
};
|
|
6701
|
-
var DefaultResultList = () => {
|
|
6702
|
-
var _a;
|
|
6703
|
-
const { list } = useObjectSearchContext();
|
|
6704
|
-
if (!list.items) {
|
|
6705
|
-
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
6706
|
-
}
|
|
6707
|
-
if (list.items.length === 0) {
|
|
6708
|
-
return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system35.Callout, { type: "info", children: "No results were found" });
|
|
6709
|
-
}
|
|
6710
|
-
return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ObjectSearchListItem, { ...item }, item.id));
|
|
6711
|
-
};
|
|
6712
|
-
|
|
6713
|
-
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6714
|
-
var import_design_system36 = require("@uniformdev/design-system");
|
|
6715
|
-
var import_react69 = require("react");
|
|
6716
|
-
|
|
6717
|
-
// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
|
|
6718
|
-
var import_react68 = require("@emotion/react");
|
|
6719
|
-
var ObjectSearchFilterContainerLabel = import_react68.css`
|
|
6720
|
-
align-items: center;
|
|
6721
|
-
display: flex;
|
|
6722
|
-
font-size: var(--fs-sm);
|
|
6723
|
-
font-weight: var(--fw-bold);
|
|
6724
|
-
line-height: 1rem;
|
|
6725
|
-
margin-bottom: var(--spacing-sm);
|
|
6726
|
-
`;
|
|
6727
|
-
var ObjectSearchFilterContainer = import_react68.css`
|
|
6728
|
-
display: grid;
|
|
6729
|
-
gap: var(--spacing-base);
|
|
6730
|
-
`;
|
|
6731
|
-
var ObjectSearchFilterGrid = (gridColumns) => import_react68.css`
|
|
6732
|
-
display: grid;
|
|
6733
|
-
grid-template-columns: ${gridColumns};
|
|
6734
|
-
gap: var(--spacing-base);
|
|
6735
|
-
`;
|
|
6736
|
-
|
|
6737
|
-
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6738
|
-
var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
|
|
6739
|
-
var ObjectSearchFilter = ({
|
|
6740
|
-
requireContentType,
|
|
6741
|
-
typeSelectorAllTypesOptionText = "All content types",
|
|
6742
|
-
searchInputName = "searchText",
|
|
6743
|
-
searchInputPlaceholderText = "Enter keyword to narrow your results",
|
|
6744
|
-
selectLabel = "Content Type Select",
|
|
6745
|
-
selectOptions
|
|
6746
|
-
}) => {
|
|
6747
|
-
var _a, _b;
|
|
6748
|
-
const { query, onSetQuery } = useObjectSearchContext();
|
|
6749
|
-
const [searchState, setSearchState] = (0, import_react69.useState)({
|
|
6750
|
-
contentType: (_a = query.contentType) != null ? _a : "",
|
|
6751
|
-
keyword: (_b = query.keyword) != null ? _b : ""
|
|
6752
|
-
});
|
|
6753
|
-
const handleFilterChange = (value) => {
|
|
6754
|
-
setSearchState((prev) => {
|
|
6755
|
-
return { ...prev, ...value };
|
|
6756
|
-
});
|
|
6757
|
-
onSetQuery({ ...query, ...value });
|
|
6758
|
-
};
|
|
6759
|
-
const memoizedSelectOptions = (0, import_react69.useMemo)(() => {
|
|
6760
|
-
if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
|
|
6761
|
-
return [];
|
|
6762
|
-
}
|
|
6763
|
-
return [
|
|
6764
|
-
...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
|
|
6765
|
-
...selectOptions != null ? selectOptions : []
|
|
6766
|
-
];
|
|
6767
|
-
}, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
|
|
6768
|
-
const shouldRenderSelect = memoizedSelectOptions.length > 0;
|
|
6769
|
-
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
|
|
6770
|
-
"fieldset",
|
|
6771
|
-
{
|
|
6772
|
-
css: [
|
|
6773
|
-
ObjectSearchFilterContainer,
|
|
6774
|
-
ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
|
|
6775
|
-
],
|
|
6776
|
-
children: [
|
|
6777
|
-
memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
6778
|
-
import_design_system36.InputSelect,
|
|
6779
|
-
{
|
|
6780
|
-
label: selectLabel,
|
|
6781
|
-
showLabel: false,
|
|
6782
|
-
onChange: (e) => handleFilterChange({ contentType: e.target.value }),
|
|
6783
|
-
options: memoizedSelectOptions,
|
|
6784
|
-
value: query.contentType
|
|
6785
|
-
}
|
|
6786
|
-
) : null,
|
|
6787
|
-
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
6788
|
-
import_design_system36.DebouncedInputKeywordSearch,
|
|
6789
|
-
{
|
|
6790
|
-
inputFieldName: searchInputName,
|
|
6791
|
-
placeholder: searchInputPlaceholderText,
|
|
6792
|
-
onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
|
|
6793
|
-
disabledFieldSubmission: true,
|
|
6794
|
-
defaultValue: searchState.keyword,
|
|
6795
|
-
delay: 300
|
|
6796
|
-
}
|
|
6797
|
-
)
|
|
6798
|
-
]
|
|
6799
|
-
}
|
|
6800
|
-
);
|
|
6801
|
-
};
|
|
6802
|
-
|
|
6803
|
-
// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
|
|
6804
|
-
var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
|
|
6805
|
-
var ObjectSearchFilterContainer2 = ({ label, children }) => {
|
|
6806
|
-
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
|
|
6807
|
-
label ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
|
|
6808
|
-
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { css: ObjectSearchFilterContainer, children })
|
|
6809
|
-
] });
|
|
6810
|
-
};
|
|
6662
|
+
// src/components/ObjectSearch/ObjectSearchResultList.tsx
|
|
6663
|
+
var import_design_system37 = require("@uniformdev/design-system");
|
|
6664
|
+
var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
|
|
6811
6665
|
|
|
6812
6666
|
// src/components/ObjectSearch/ObjectSearchResultItem.tsx
|
|
6813
|
-
var
|
|
6667
|
+
var import_design_system36 = require("@uniformdev/design-system");
|
|
6814
6668
|
var import_timeago3 = require("timeago.js");
|
|
6815
6669
|
|
|
6816
6670
|
// src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
|
|
6817
|
-
var
|
|
6818
|
-
var
|
|
6819
|
-
var ButtonStyles =
|
|
6820
|
-
${
|
|
6671
|
+
var import_react69 = require("@emotion/react");
|
|
6672
|
+
var import_design_system35 = require("@uniformdev/design-system");
|
|
6673
|
+
var ButtonStyles = import_react69.css`
|
|
6674
|
+
${import_design_system35.button}
|
|
6821
6675
|
background: transparent;
|
|
6822
6676
|
border: 1px solid var(--typography-base);
|
|
6823
6677
|
color: var(--typography-base);
|
|
@@ -6843,20 +6697,20 @@ var ButtonStyles = import_react70.css`
|
|
|
6843
6697
|
text-decoration: none;
|
|
6844
6698
|
}
|
|
6845
6699
|
`;
|
|
6846
|
-
var ButtonIcon =
|
|
6700
|
+
var ButtonIcon = import_react69.css`
|
|
6847
6701
|
width: 1rem;
|
|
6848
6702
|
height: 1rem;
|
|
6849
6703
|
`;
|
|
6850
6704
|
|
|
6851
6705
|
// src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
|
|
6852
|
-
var
|
|
6706
|
+
var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
|
|
6853
6707
|
var ObjectSearchResultItemButton = ({
|
|
6854
6708
|
text,
|
|
6855
6709
|
icon,
|
|
6856
6710
|
...props
|
|
6857
6711
|
}) => {
|
|
6858
|
-
return /* @__PURE__ */ (0,
|
|
6859
|
-
!icon ? null : /* @__PURE__ */ (0,
|
|
6712
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("button", { type: "button", css: ButtonStyles, ...props, children: [
|
|
6713
|
+
!icon ? null : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Image, { src: icon, css: ButtonIcon }),
|
|
6860
6714
|
text
|
|
6861
6715
|
] });
|
|
6862
6716
|
};
|
|
@@ -6865,15 +6719,15 @@ var LinkButton = ({
|
|
|
6865
6719
|
icon,
|
|
6866
6720
|
...props
|
|
6867
6721
|
}) => {
|
|
6868
|
-
return /* @__PURE__ */ (0,
|
|
6869
|
-
!icon ? null : /* @__PURE__ */ (0,
|
|
6722
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
|
|
6723
|
+
!icon ? null : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Image, { src: icon, css: ButtonIcon }),
|
|
6870
6724
|
text
|
|
6871
6725
|
] });
|
|
6872
6726
|
};
|
|
6873
6727
|
|
|
6874
6728
|
// src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
|
|
6875
|
-
var
|
|
6876
|
-
var ObjectSearchResultItemContainer =
|
|
6729
|
+
var import_react70 = require("@emotion/react");
|
|
6730
|
+
var ObjectSearchResultItemContainer = import_react70.css`
|
|
6877
6731
|
align-items: center;
|
|
6878
6732
|
border: 1px solid var(--gray-300);
|
|
6879
6733
|
border-radius: var(--rounded-base);
|
|
@@ -6889,7 +6743,7 @@ var ObjectSearchResultItemContainer = import_react71.css`
|
|
|
6889
6743
|
}
|
|
6890
6744
|
}
|
|
6891
6745
|
`;
|
|
6892
|
-
var ObjectSearchDragHandle =
|
|
6746
|
+
var ObjectSearchDragHandle = import_react70.css`
|
|
6893
6747
|
border-left: 2px dotted var(--gray-300);
|
|
6894
6748
|
border-right: 2px dotted var(--gray-300);
|
|
6895
6749
|
position: absolute;
|
|
@@ -6898,41 +6752,41 @@ var ObjectSearchDragHandle = import_react71.css`
|
|
|
6898
6752
|
transition: opacity var(--duration-fast) var(--timing-ease-out);
|
|
6899
6753
|
opacity: 0;
|
|
6900
6754
|
`;
|
|
6901
|
-
var ObjectSearchResultItemSubtitle =
|
|
6755
|
+
var ObjectSearchResultItemSubtitle = import_react70.css`
|
|
6902
6756
|
color: var(--gray-500);
|
|
6903
6757
|
display: block;
|
|
6904
6758
|
font-size: var(--fs-xs);
|
|
6905
6759
|
line-height: 1;
|
|
6906
6760
|
`;
|
|
6907
|
-
var ObjectSearchResultItemTitle =
|
|
6761
|
+
var ObjectSearchResultItemTitle = import_react70.css`
|
|
6908
6762
|
align-items: center;
|
|
6909
6763
|
color: var(--typography-base);
|
|
6910
6764
|
display: flex;
|
|
6911
6765
|
gap: var(--spacing-xs);
|
|
6912
6766
|
`;
|
|
6913
|
-
var ObjectSearchResultItemTimeStamp =
|
|
6767
|
+
var ObjectSearchResultItemTimeStamp = import_react70.css`
|
|
6914
6768
|
color: var(--gray-500);
|
|
6915
6769
|
font-size: var(--fs-xs);
|
|
6916
6770
|
`;
|
|
6917
|
-
var ObjectSearchAuthorStateGroup =
|
|
6771
|
+
var ObjectSearchAuthorStateGroup = import_react70.css`
|
|
6918
6772
|
align-items: center;
|
|
6919
6773
|
display: flex;
|
|
6920
6774
|
gap: var(--spacing-sm);
|
|
6921
6775
|
`;
|
|
6922
|
-
var ObjectSearchUpdateGroup =
|
|
6776
|
+
var ObjectSearchUpdateGroup = import_react70.css`
|
|
6923
6777
|
display: grid;
|
|
6924
6778
|
`;
|
|
6925
|
-
var ObjectSearchContentContainer =
|
|
6779
|
+
var ObjectSearchContentContainer = import_react70.css`
|
|
6926
6780
|
display: flex;
|
|
6927
6781
|
gap: var(--spacing-base);
|
|
6928
6782
|
`;
|
|
6929
|
-
var ObjectSearchImage =
|
|
6783
|
+
var ObjectSearchImage = import_react70.css`
|
|
6930
6784
|
width: 56px;
|
|
6931
6785
|
object-fit: contain;
|
|
6932
6786
|
`;
|
|
6933
6787
|
|
|
6934
6788
|
// src/components/ObjectSearch/ObjectSearchResultItem.tsx
|
|
6935
|
-
var
|
|
6789
|
+
var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
|
|
6936
6790
|
var ObjectSearchResultItem = ({
|
|
6937
6791
|
id,
|
|
6938
6792
|
title,
|
|
@@ -6956,70 +6810,66 @@ var ObjectSearchResultItem = ({
|
|
|
6956
6810
|
onSelectItem({ id, title: id });
|
|
6957
6811
|
onRemove == null ? void 0 : onRemove();
|
|
6958
6812
|
};
|
|
6959
|
-
return /* @__PURE__ */ (0,
|
|
6960
|
-
disableDnD ? null : /* @__PURE__ */ (0,
|
|
6961
|
-
/* @__PURE__ */ (0,
|
|
6962
|
-
!imageUrl ? null : /* @__PURE__ */ (0,
|
|
6963
|
-
/* @__PURE__ */ (0,
|
|
6964
|
-
/* @__PURE__ */ (0,
|
|
6965
|
-
/* @__PURE__ */ (0,
|
|
6813
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectSearchResultItemContainer, "data-testid": "search-result-item", children: [
|
|
6814
|
+
disableDnD ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
|
|
6815
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectSearchContentContainer, children: [
|
|
6816
|
+
!imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
|
|
6817
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { children: [
|
|
6818
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: ObjectSearchResultItemSubtitle, "data-testid": "sub-title", children: formatedContentType }),
|
|
6819
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { role: "heading", css: ObjectSearchResultItemTitle, "data-testid": "title", children: [
|
|
6966
6820
|
title != null ? title : name,
|
|
6967
|
-
!popoverData ? null : /* @__PURE__ */ (0,
|
|
6821
|
+
!popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system36.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
|
|
6968
6822
|
] }),
|
|
6969
|
-
!createdAt && !publishStatus ? null : /* @__PURE__ */ (0,
|
|
6970
|
-
!(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0,
|
|
6971
|
-
!createdAt && !publishedAt ? null : /* @__PURE__ */ (0,
|
|
6972
|
-
!createdAt ? null : /* @__PURE__ */ (0,
|
|
6973
|
-
/* @__PURE__ */ (0,
|
|
6823
|
+
!createdAt && !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
|
|
6824
|
+
!(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system36.Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
|
|
6825
|
+
!createdAt && !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectSearchUpdateGroup, children: [
|
|
6826
|
+
!createdAt ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
|
|
6827
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("strong", { children: "Last updated: " }),
|
|
6974
6828
|
(0, import_timeago3.format)(createdAt)
|
|
6975
6829
|
] }),
|
|
6976
|
-
!publishedAt ? null : /* @__PURE__ */ (0,
|
|
6977
|
-
/* @__PURE__ */ (0,
|
|
6830
|
+
!publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
|
|
6831
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("strong", { children: "Last published: " }),
|
|
6978
6832
|
(0, import_timeago3.format)(publishedAt)
|
|
6979
6833
|
] })
|
|
6980
6834
|
] })
|
|
6981
6835
|
] }),
|
|
6982
|
-
/* @__PURE__ */ (0,
|
|
6836
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { children })
|
|
6983
6837
|
] })
|
|
6984
6838
|
] }) }),
|
|
6985
|
-
!editLink && hideRemoveButton ? null : /* @__PURE__ */ (0,
|
|
6986
|
-
!editLink ? null : /* @__PURE__ */ (0,
|
|
6987
|
-
hideRemoveButton ? null : /* @__PURE__ */ (0,
|
|
6839
|
+
!editLink && hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
|
|
6840
|
+
!editLink ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
|
|
6841
|
+
hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system36.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
|
|
6988
6842
|
] })
|
|
6989
6843
|
] });
|
|
6990
6844
|
};
|
|
6991
6845
|
|
|
6992
|
-
// src/components/ObjectSearch/ObjectSearchResultList.tsx
|
|
6993
|
-
var import_design_system39 = require("@uniformdev/design-system");
|
|
6994
|
-
var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
|
|
6995
|
-
|
|
6996
6846
|
// src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
|
|
6997
|
-
var
|
|
6998
|
-
var ObjectSearchResultListContainer =
|
|
6847
|
+
var import_react71 = require("@emotion/react");
|
|
6848
|
+
var ObjectSearchResultListContainer = import_react71.css`
|
|
6999
6849
|
align-items: center;
|
|
7000
6850
|
display: flex;
|
|
7001
6851
|
gap: var(--spacing-sm);
|
|
7002
6852
|
justify-content: space-between;
|
|
7003
6853
|
`;
|
|
7004
|
-
var ObjectSearchDragContainer =
|
|
6854
|
+
var ObjectSearchDragContainer = import_react71.css`
|
|
7005
6855
|
margin: 0 0 var(--spacing-sm);
|
|
7006
6856
|
`;
|
|
7007
|
-
var ObjectSearchContainerDragging =
|
|
6857
|
+
var ObjectSearchContainerDragging = import_react71.css`
|
|
7008
6858
|
box-shadow: var(--shadow-base);
|
|
7009
6859
|
opacity: var(--opacity-50);
|
|
7010
6860
|
`;
|
|
7011
|
-
var ObjectSearchResultListCounterContainer =
|
|
6861
|
+
var ObjectSearchResultListCounterContainer = import_react71.css`
|
|
7012
6862
|
align-items: center;
|
|
7013
6863
|
display: flex;
|
|
7014
6864
|
gap: var(--spacing-sm);
|
|
7015
6865
|
`;
|
|
7016
|
-
var ObjectSearchResultListTitle =
|
|
6866
|
+
var ObjectSearchResultListTitle = import_react71.css`
|
|
7017
6867
|
font-weight: var(--fw-bold);
|
|
7018
6868
|
line-height: 1;
|
|
7019
6869
|
`;
|
|
7020
6870
|
|
|
7021
6871
|
// src/components/ObjectSearch/ObjectSearchResultList.tsx
|
|
7022
|
-
var
|
|
6872
|
+
var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
|
|
7023
6873
|
function ObjectSearchResultList({
|
|
7024
6874
|
resultLabelText = "Selected",
|
|
7025
6875
|
removeButtonText = "Remove all",
|
|
@@ -7027,7 +6877,7 @@ function ObjectSearchResultList({
|
|
|
7027
6877
|
hideRemoveButton = false,
|
|
7028
6878
|
resultLabelOverride,
|
|
7029
6879
|
additionalButtons,
|
|
7030
|
-
renderResultComponent = (value) => /* @__PURE__ */ (0,
|
|
6880
|
+
renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ObjectSearchResultItem, { ...value }),
|
|
7031
6881
|
multiSelectId,
|
|
7032
6882
|
disableDnD = false,
|
|
7033
6883
|
getContainerForDnDReparenting,
|
|
@@ -7054,7 +6904,7 @@ function ObjectSearchResultList({
|
|
|
7054
6904
|
...item,
|
|
7055
6905
|
disableDnD: selectedListItems.length === 1 || disableDnD
|
|
7056
6906
|
});
|
|
7057
|
-
return /* @__PURE__ */ (0,
|
|
6907
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
7058
6908
|
"div",
|
|
7059
6909
|
{
|
|
7060
6910
|
css: [
|
|
@@ -7069,17 +6919,17 @@ function ObjectSearchResultList({
|
|
|
7069
6919
|
}
|
|
7070
6920
|
);
|
|
7071
6921
|
};
|
|
7072
|
-
return /* @__PURE__ */ (0,
|
|
7073
|
-
/* @__PURE__ */ (0,
|
|
7074
|
-
!resultLabelOverride ? /* @__PURE__ */ (0,
|
|
7075
|
-
/* @__PURE__ */ (0,
|
|
6922
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
|
|
6923
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { role: "group", css: ObjectSearchResultListContainer, children: [
|
|
6924
|
+
!resultLabelOverride ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
|
|
6925
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
|
|
7076
6926
|
" ",
|
|
7077
|
-
!selectedListItems.length ? null : /* @__PURE__ */ (0,
|
|
6927
|
+
!selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_design_system37.Counter, { count: selectedListItems.length })
|
|
7078
6928
|
] }) : resultLabelOverride,
|
|
7079
|
-
/* @__PURE__ */ (0,
|
|
6929
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
|
|
7080
6930
|
additionalButtons,
|
|
7081
|
-
hideRemoveButton ? null : /* @__PURE__ */ (0,
|
|
7082
|
-
|
|
6931
|
+
hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
6932
|
+
import_design_system37.Button,
|
|
7083
6933
|
{
|
|
7084
6934
|
buttonType: "ghostDestructive",
|
|
7085
6935
|
size: "xs",
|
|
@@ -7090,15 +6940,15 @@ function ObjectSearchResultList({
|
|
|
7090
6940
|
)
|
|
7091
6941
|
] })
|
|
7092
6942
|
] }),
|
|
7093
|
-
!selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0,
|
|
6943
|
+
!selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
7094
6944
|
import_react_beautiful_dnd4.Droppable,
|
|
7095
6945
|
{
|
|
7096
6946
|
droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select",
|
|
7097
6947
|
renderClone: getContainerForDnDReparenting ? getDraggableItem : void 0,
|
|
7098
6948
|
getContainerForClone: getContainerForDnDReparenting,
|
|
7099
|
-
children: (provided) => /* @__PURE__ */ (0,
|
|
6949
|
+
children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
|
|
7100
6950
|
selectedListItems.map((item, i) => {
|
|
7101
|
-
return /* @__PURE__ */ (0,
|
|
6951
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
7102
6952
|
import_react_beautiful_dnd4.Draggable,
|
|
7103
6953
|
{
|
|
7104
6954
|
draggableId: item.id,
|
|
@@ -7116,9 +6966,273 @@ function ObjectSearchResultList({
|
|
|
7116
6966
|
] });
|
|
7117
6967
|
}
|
|
7118
6968
|
|
|
6969
|
+
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6970
|
+
var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
|
|
6971
|
+
var ObjectSearchContainer = ({
|
|
6972
|
+
label,
|
|
6973
|
+
enableDynamicInputToResultId,
|
|
6974
|
+
searchFilters,
|
|
6975
|
+
resultList,
|
|
6976
|
+
children = /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ObjectSearchResultList, {})
|
|
6977
|
+
}) => {
|
|
6978
|
+
var _a, _b;
|
|
6979
|
+
const { onSelectItem, selectedListItems, list, dynamicEntryId, onSetQuery, query } = useObjectSearchContext();
|
|
6980
|
+
const { flatVariables } = useVariables(true);
|
|
6981
|
+
const inputValue = (_b = dynamicEntryId != null ? dynamicEntryId : (_a = selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
|
|
6982
|
+
const isDynamicEntryIdAvailable = import_react73.default.useMemo(
|
|
6983
|
+
() => Boolean(inputValue && hasReferencedVariables(inputValue)),
|
|
6984
|
+
[inputValue]
|
|
6985
|
+
);
|
|
6986
|
+
const listItems = resultList != null ? resultList : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
6987
|
+
import_design_system38.ScrollableList,
|
|
6988
|
+
{
|
|
6989
|
+
role: "list",
|
|
6990
|
+
css: import_react72.css`
|
|
6991
|
+
> div {
|
|
6992
|
+
transition: max-height var(--duration-slow) var(--timing-ease-out);
|
|
6993
|
+
max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
|
|
6994
|
+
}
|
|
6995
|
+
`,
|
|
6996
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DefaultResultList, {})
|
|
6997
|
+
}
|
|
6998
|
+
);
|
|
6999
|
+
const handleSelectedVariableChange = (selectedValue) => {
|
|
7000
|
+
var _a2;
|
|
7001
|
+
if (!selectedValue) {
|
|
7002
|
+
onSelectItem([]);
|
|
7003
|
+
return;
|
|
7004
|
+
}
|
|
7005
|
+
const { result, errors } = (0, import_canvas9.bindVariables)({
|
|
7006
|
+
value: selectedValue,
|
|
7007
|
+
variables: flatVariables,
|
|
7008
|
+
errorPrefix: "Dynamic input"
|
|
7009
|
+
});
|
|
7010
|
+
if (!result) {
|
|
7011
|
+
onSelectItem([]);
|
|
7012
|
+
return;
|
|
7013
|
+
}
|
|
7014
|
+
const item = (_a2 = list.items) == null ? void 0 : _a2.find((i) => i.id === result);
|
|
7015
|
+
onSelectItem([
|
|
7016
|
+
{
|
|
7017
|
+
title: selectedValue,
|
|
7018
|
+
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`,
|
|
7019
|
+
// spread any matched list item, overriding the above default props
|
|
7020
|
+
...item,
|
|
7021
|
+
// we want to make sure the ID is our dynamic value
|
|
7022
|
+
id: selectedValue
|
|
7023
|
+
}
|
|
7024
|
+
]);
|
|
7025
|
+
if (hasReferencedVariables(selectedValue)) {
|
|
7026
|
+
onSetQuery({ ...query, dynamicEntryId: selectedValue });
|
|
7027
|
+
}
|
|
7028
|
+
};
|
|
7029
|
+
const showSearchList = !label || !isDynamicEntryIdAvailable || !enableDynamicInputToResultId;
|
|
7030
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_design_system38.VerticalRhythm, { children: [
|
|
7031
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_design_system38.VerticalRhythm, { children: [
|
|
7032
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
7033
|
+
InputVariables,
|
|
7034
|
+
{
|
|
7035
|
+
id: "entryId",
|
|
7036
|
+
label,
|
|
7037
|
+
value: inputValue,
|
|
7038
|
+
onChange: (value) => {
|
|
7039
|
+
if (value === inputValue) {
|
|
7040
|
+
return;
|
|
7041
|
+
}
|
|
7042
|
+
handleSelectedVariableChange(value);
|
|
7043
|
+
},
|
|
7044
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_jsx_runtime64.Fragment, { children: searchFilters }),
|
|
7045
|
+
disableVariables: !enableDynamicInputToResultId
|
|
7046
|
+
}
|
|
7047
|
+
) : searchFilters,
|
|
7048
|
+
showSearchList ? listItems : null
|
|
7049
|
+
] }) }),
|
|
7050
|
+
children
|
|
7051
|
+
] }) });
|
|
7052
|
+
};
|
|
7053
|
+
var DefaultResultList = () => {
|
|
7054
|
+
var _a, _b;
|
|
7055
|
+
const { list, isListLoading } = useObjectSearchContext();
|
|
7056
|
+
if (isListLoading || !list.items) {
|
|
7057
|
+
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
7058
|
+
}
|
|
7059
|
+
if (((_a = list.items) == null ? void 0 : _a.length) === 0) {
|
|
7060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.Callout, { type: "info", children: "No results were found" });
|
|
7061
|
+
}
|
|
7062
|
+
return (_b = list.items) == null ? void 0 : _b.map((item) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ObjectSearchListItem, { ...item }, item.id));
|
|
7063
|
+
};
|
|
7064
|
+
|
|
7065
|
+
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
7066
|
+
var import_design_system39 = require("@uniformdev/design-system");
|
|
7067
|
+
var import_react76 = require("react");
|
|
7068
|
+
var import_react_use5 = require("react-use");
|
|
7069
|
+
|
|
7070
|
+
// src/utils/createLocationValidator.ts
|
|
7071
|
+
function createLocationValidator(setValue, validate) {
|
|
7072
|
+
return (dispatch) => setValue((previous) => {
|
|
7073
|
+
const { newValue, options } = dispatch(previous);
|
|
7074
|
+
return { newValue, options: validate(newValue, options) };
|
|
7075
|
+
});
|
|
7076
|
+
}
|
|
7077
|
+
|
|
7078
|
+
// src/utils/useContentDataResourceLocaleInfo.ts
|
|
7079
|
+
var import_canvas10 = require("@uniformdev/canvas");
|
|
7080
|
+
var import_react74 = require("react");
|
|
7081
|
+
function useContentDataResourceLocaleInfo({
|
|
7082
|
+
locale,
|
|
7083
|
+
setLocale,
|
|
7084
|
+
dynamicInputs
|
|
7085
|
+
}) {
|
|
7086
|
+
var _a;
|
|
7087
|
+
const setLocaleRef = (0, import_react74.useRef)(setLocale);
|
|
7088
|
+
setLocaleRef.current = setLocale;
|
|
7089
|
+
const { flatVariables } = useVariables();
|
|
7090
|
+
const effectiveLocale = locale != null ? locale : dynamicInputs[import_canvas10.LOCALE_DYNAMIC_INPUT_NAME] ? (0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME) : "";
|
|
7091
|
+
const boundLocale = (_a = (0, import_canvas10.bindVariables)({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
|
|
7092
|
+
(0, import_react74.useEffect)(() => {
|
|
7093
|
+
if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
|
|
7094
|
+
setLocaleRef.current((0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME));
|
|
7095
|
+
}
|
|
7096
|
+
}, [locale, effectiveLocale]);
|
|
7097
|
+
return { effectiveLocale, boundLocale: boundLocale ? boundLocale : void 0 };
|
|
7098
|
+
}
|
|
7099
|
+
|
|
7100
|
+
// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
|
|
7101
|
+
var import_react75 = require("@emotion/react");
|
|
7102
|
+
var ObjectSearchFilterContainerLabel = import_react75.css`
|
|
7103
|
+
align-items: center;
|
|
7104
|
+
display: flex;
|
|
7105
|
+
font-size: var(--fs-sm);
|
|
7106
|
+
font-weight: var(--fw-bold);
|
|
7107
|
+
line-height: 1rem;
|
|
7108
|
+
margin-bottom: var(--spacing-sm);
|
|
7109
|
+
`;
|
|
7110
|
+
var ObjectSearchFilterContainer = import_react75.css`
|
|
7111
|
+
display: grid;
|
|
7112
|
+
gap: var(--spacing-base);
|
|
7113
|
+
`;
|
|
7114
|
+
var ObjectSearchFilterGrid = (gridColumns) => import_react75.css`
|
|
7115
|
+
display: grid;
|
|
7116
|
+
grid-template-columns: ${gridColumns};
|
|
7117
|
+
gap: var(--spacing-base);
|
|
7118
|
+
`;
|
|
7119
|
+
|
|
7120
|
+
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
7121
|
+
var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
|
|
7122
|
+
var ObjectSearchFilter = ({
|
|
7123
|
+
requireContentType,
|
|
7124
|
+
typeSelectorAllTypesOptionText = "All content types",
|
|
7125
|
+
searchInputName = "searchText",
|
|
7126
|
+
searchInputPlaceholderText = "Enter keyword to narrow your results",
|
|
7127
|
+
selectLabel = "Content Type Select",
|
|
7128
|
+
localeFilterLabel = "Filter by locale",
|
|
7129
|
+
selectOptions
|
|
7130
|
+
}) => {
|
|
7131
|
+
var _a, _b, _c;
|
|
7132
|
+
const { query, onSetQuery, localeOptions, enableFilterByLocale } = useObjectSearchContext();
|
|
7133
|
+
const dynamicInputs = useDataResourceDynamicInputs();
|
|
7134
|
+
const { boundLocale = "", effectiveLocale } = useContentDataResourceLocaleInfo({
|
|
7135
|
+
locale: query.locale,
|
|
7136
|
+
dynamicInputs: dynamicInputs != null ? dynamicInputs : {},
|
|
7137
|
+
setLocale: (newLocale) => handleFilterChange({ locale: newLocale != null ? newLocale : "" })
|
|
7138
|
+
});
|
|
7139
|
+
const [searchState, setSearchState] = (0, import_react76.useState)({
|
|
7140
|
+
keyword: (_a = query.keyword) != null ? _a : "",
|
|
7141
|
+
contentType: (_b = query.contentType) != null ? _b : "",
|
|
7142
|
+
locale: (_c = query.locale) != null ? _c : ""
|
|
7143
|
+
});
|
|
7144
|
+
const handleFilterChange = (value) => {
|
|
7145
|
+
setSearchState((prev) => {
|
|
7146
|
+
return { ...prev, ...value };
|
|
7147
|
+
});
|
|
7148
|
+
};
|
|
7149
|
+
(0, import_react_use5.useDebounce)(
|
|
7150
|
+
() => {
|
|
7151
|
+
onSetQuery({ ...query, ...searchState });
|
|
7152
|
+
},
|
|
7153
|
+
500,
|
|
7154
|
+
[searchState]
|
|
7155
|
+
);
|
|
7156
|
+
const memoizedSelectOptions = (0, import_react76.useMemo)(() => {
|
|
7157
|
+
if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
|
|
7158
|
+
return [];
|
|
7159
|
+
}
|
|
7160
|
+
return [
|
|
7161
|
+
...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
|
|
7162
|
+
...selectOptions != null ? selectOptions : []
|
|
7163
|
+
];
|
|
7164
|
+
}, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
|
|
7165
|
+
const shouldRenderSelect = memoizedSelectOptions.length > 0;
|
|
7166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_design_system39.VerticalRhythm, { gap: "base", children: [
|
|
7167
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
7168
|
+
"fieldset",
|
|
7169
|
+
{
|
|
7170
|
+
css: [
|
|
7171
|
+
ObjectSearchFilterContainer,
|
|
7172
|
+
ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
|
|
7173
|
+
],
|
|
7174
|
+
children: [
|
|
7175
|
+
memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
7176
|
+
import_design_system39.InputSelect,
|
|
7177
|
+
{
|
|
7178
|
+
label: selectLabel,
|
|
7179
|
+
showLabel: false,
|
|
7180
|
+
onChange: (e) => handleFilterChange({ contentType: e.target.value }),
|
|
7181
|
+
options: memoizedSelectOptions,
|
|
7182
|
+
value: query.contentType,
|
|
7183
|
+
"data-testid": "select-entry"
|
|
7184
|
+
}
|
|
7185
|
+
) : null,
|
|
7186
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
7187
|
+
import_design_system39.DebouncedInputKeywordSearch,
|
|
7188
|
+
{
|
|
7189
|
+
inputFieldName: searchInputName,
|
|
7190
|
+
placeholder: searchInputPlaceholderText,
|
|
7191
|
+
onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
|
|
7192
|
+
disabledFieldSubmission: true,
|
|
7193
|
+
defaultValue: searchState.keyword,
|
|
7194
|
+
delay: 300
|
|
7195
|
+
}
|
|
7196
|
+
)
|
|
7197
|
+
]
|
|
7198
|
+
}
|
|
7199
|
+
),
|
|
7200
|
+
enableFilterByLocale && (localeOptions == null ? void 0 : localeOptions.length) && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
7201
|
+
InputVariables,
|
|
7202
|
+
{
|
|
7203
|
+
label: localeFilterLabel,
|
|
7204
|
+
id: "locale",
|
|
7205
|
+
value: effectiveLocale,
|
|
7206
|
+
onChange: (newLocale) => handleFilterChange({ locale: newLocale != null ? newLocale : "" }),
|
|
7207
|
+
disableInlineMenu: true,
|
|
7208
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
7209
|
+
import_design_system39.InputSelect,
|
|
7210
|
+
{
|
|
7211
|
+
id: "locale",
|
|
7212
|
+
options: localeOptions,
|
|
7213
|
+
name: "locale",
|
|
7214
|
+
label: "",
|
|
7215
|
+
value: boundLocale,
|
|
7216
|
+
onChange: (e) => handleFilterChange({ locale: e.target.value })
|
|
7217
|
+
}
|
|
7218
|
+
)
|
|
7219
|
+
}
|
|
7220
|
+
)
|
|
7221
|
+
] });
|
|
7222
|
+
};
|
|
7223
|
+
|
|
7224
|
+
// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
|
|
7225
|
+
var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
|
|
7226
|
+
var ObjectSearchFilterContainer2 = ({ label, children }) => {
|
|
7227
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { children: [
|
|
7228
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
|
|
7229
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: ObjectSearchFilterContainer, children })
|
|
7230
|
+
] });
|
|
7231
|
+
};
|
|
7232
|
+
|
|
7119
7233
|
// src/components/ObjectSearch/QueryFilter.tsx
|
|
7120
7234
|
var import_design_system40 = require("@uniformdev/design-system");
|
|
7121
|
-
var
|
|
7235
|
+
var import_react77 = require("react");
|
|
7122
7236
|
var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
|
|
7123
7237
|
var QueryFilter = ({
|
|
7124
7238
|
requireContentType,
|
|
@@ -7148,7 +7262,7 @@ var QueryFilter = ({
|
|
|
7148
7262
|
}) => {
|
|
7149
7263
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
7150
7264
|
const { query, onSetQuery } = useObjectSearchContext();
|
|
7151
|
-
const [queryState, setQueryState] = (0,
|
|
7265
|
+
const [queryState, setQueryState] = (0, import_react77.useState)({
|
|
7152
7266
|
contentType: (_a = query.contentType) != null ? _a : "",
|
|
7153
7267
|
keyword: (_b = query.keyword) != null ? _b : "",
|
|
7154
7268
|
count: (_c = query.count) != null ? _c : countValue,
|
|
@@ -7159,7 +7273,7 @@ var QueryFilter = ({
|
|
|
7159
7273
|
setQueryState((prev) => ({ ...prev, ...value }));
|
|
7160
7274
|
onSetQuery({ ...query, ...value });
|
|
7161
7275
|
};
|
|
7162
|
-
(0,
|
|
7276
|
+
(0, import_react77.useEffect)(() => {
|
|
7163
7277
|
onSetQuery(queryState);
|
|
7164
7278
|
}, []);
|
|
7165
7279
|
return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("fieldset", { children: [
|
|
@@ -7284,9 +7398,108 @@ var QueryFilter = ({
|
|
|
7284
7398
|
] });
|
|
7285
7399
|
};
|
|
7286
7400
|
|
|
7287
|
-
// src/components/
|
|
7288
|
-
var
|
|
7401
|
+
// src/components/ObjectSearch/ObjectSearchListOfSearchResults.tsx
|
|
7402
|
+
var import_design_system41 = require("@uniformdev/design-system");
|
|
7289
7403
|
var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
|
|
7404
|
+
function ObjectSearchListOfSearchResults() {
|
|
7405
|
+
var _a, _b;
|
|
7406
|
+
const { list, isListLoading } = useObjectSearchContext();
|
|
7407
|
+
if (isListLoading) {
|
|
7408
|
+
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
7409
|
+
}
|
|
7410
|
+
if (((_a = list.items) == null ? void 0 : _a.length) === 0) {
|
|
7411
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_design_system41.Callout, { type: "info", children: "No results were found" });
|
|
7412
|
+
}
|
|
7413
|
+
return (_b = list.items) == null ? void 0 : _b.map((item) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ObjectSearchListItem, { ...item }, item.id));
|
|
7414
|
+
}
|
|
7415
|
+
|
|
7416
|
+
// src/components/ObjectSearch/hooks/ControlledObjectSearchProvider.tsx
|
|
7417
|
+
var import_react78 = require("react");
|
|
7418
|
+
var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
|
|
7419
|
+
var ControlledObjectSearchProvider = ({
|
|
7420
|
+
selectedItems,
|
|
7421
|
+
searchResultItems,
|
|
7422
|
+
selectedItemsLoading,
|
|
7423
|
+
searchResultListLoading,
|
|
7424
|
+
searchResultItemsLoading,
|
|
7425
|
+
onQueryChange,
|
|
7426
|
+
onSelectItemsChange,
|
|
7427
|
+
isMulti = false,
|
|
7428
|
+
children,
|
|
7429
|
+
query,
|
|
7430
|
+
enableFilterByLocale,
|
|
7431
|
+
localeOptions,
|
|
7432
|
+
dynamicEntryId
|
|
7433
|
+
}) => {
|
|
7434
|
+
const { flatVariables } = useVariables(true);
|
|
7435
|
+
const querySearchDeferred = (0, import_react78.useDeferredValue)(query);
|
|
7436
|
+
const onSetQuery = (0, import_react78.useCallback)(
|
|
7437
|
+
(value2) => {
|
|
7438
|
+
const newQuery = { ...query, ...value2 };
|
|
7439
|
+
onQueryChange(newQuery);
|
|
7440
|
+
},
|
|
7441
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
7442
|
+
[onQueryChange]
|
|
7443
|
+
);
|
|
7444
|
+
const onSelectItem = (0, import_react78.useCallback)(
|
|
7445
|
+
(selectedResult) => {
|
|
7446
|
+
if (Array.isArray(selectedResult)) {
|
|
7447
|
+
onSelectItemsChange(selectedResult);
|
|
7448
|
+
} else {
|
|
7449
|
+
if (selectedItems == null ? void 0 : selectedItems.some((item) => item.id === selectedResult.id)) {
|
|
7450
|
+
onSelectItemsChange(selectedItems.filter((item) => item.id !== selectedResult.id));
|
|
7451
|
+
} else {
|
|
7452
|
+
onSelectItemsChange([...selectedItems != null ? selectedItems : [], selectedResult]);
|
|
7453
|
+
}
|
|
7454
|
+
}
|
|
7455
|
+
},
|
|
7456
|
+
[onSelectItemsChange, selectedItems]
|
|
7457
|
+
);
|
|
7458
|
+
const onRemoveAllSelectedItems = (0, import_react78.useCallback)(() => {
|
|
7459
|
+
onSelectItemsChange([]);
|
|
7460
|
+
}, [onSelectItemsChange]);
|
|
7461
|
+
const list = (0, import_react78.useMemo)(() => ({ items: searchResultItems }), [searchResultItems]);
|
|
7462
|
+
const boundQuery = (0, import_react78.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
|
|
7463
|
+
const value = (0, import_react78.useMemo)(
|
|
7464
|
+
() => ({
|
|
7465
|
+
boundQuery,
|
|
7466
|
+
onSetQuery,
|
|
7467
|
+
query: querySearchDeferred,
|
|
7468
|
+
onSelectItem,
|
|
7469
|
+
selectedListItems: selectedItems != null ? selectedItems : [],
|
|
7470
|
+
onRemoveAllSelectedItems,
|
|
7471
|
+
list,
|
|
7472
|
+
selectedItemsLoading,
|
|
7473
|
+
searchResultItemsLoading,
|
|
7474
|
+
searchResultListLoading,
|
|
7475
|
+
isMulti,
|
|
7476
|
+
localeOptions,
|
|
7477
|
+
enableFilterByLocale,
|
|
7478
|
+
dynamicEntryId
|
|
7479
|
+
}),
|
|
7480
|
+
[
|
|
7481
|
+
boundQuery,
|
|
7482
|
+
onSetQuery,
|
|
7483
|
+
querySearchDeferred,
|
|
7484
|
+
onSelectItem,
|
|
7485
|
+
selectedItems,
|
|
7486
|
+
selectedItemsLoading,
|
|
7487
|
+
searchResultItemsLoading,
|
|
7488
|
+
onRemoveAllSelectedItems,
|
|
7489
|
+
searchResultListLoading,
|
|
7490
|
+
list,
|
|
7491
|
+
isMulti,
|
|
7492
|
+
localeOptions,
|
|
7493
|
+
enableFilterByLocale,
|
|
7494
|
+
dynamicEntryId
|
|
7495
|
+
]
|
|
7496
|
+
);
|
|
7497
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ObjectSearchContext.Provider, { value, children });
|
|
7498
|
+
};
|
|
7499
|
+
|
|
7500
|
+
// src/components/ParamTypeDynamicDataProvider.tsx
|
|
7501
|
+
var import_react79 = require("react");
|
|
7502
|
+
var import_jsx_runtime70 = require("@emotion/react/jsx-runtime");
|
|
7290
7503
|
function ParamTypeDynamicDataProvider(props) {
|
|
7291
7504
|
const { children } = props;
|
|
7292
7505
|
const {
|
|
@@ -7294,11 +7507,11 @@ function ParamTypeDynamicDataProvider(props) {
|
|
|
7294
7507
|
} = useMeshLocation("paramType");
|
|
7295
7508
|
const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
|
|
7296
7509
|
const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
|
|
7297
|
-
const variables = (0,
|
|
7510
|
+
const variables = (0, import_react79.useMemo)(
|
|
7298
7511
|
() => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
|
|
7299
7512
|
[dynamicInputsAsVariables, connectedDataAsVariables]
|
|
7300
7513
|
);
|
|
7301
|
-
return /* @__PURE__ */ (0,
|
|
7514
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(VariablesProvider, { value: variables, onChange: () => {
|
|
7302
7515
|
}, editVariableComponent: JsonMeshVariableEditor, children });
|
|
7303
7516
|
}
|
|
7304
7517
|
var JsonMeshVariableEditor = ({
|
|
@@ -7307,9 +7520,9 @@ var JsonMeshVariableEditor = ({
|
|
|
7307
7520
|
variable,
|
|
7308
7521
|
context
|
|
7309
7522
|
}) => {
|
|
7310
|
-
const sillyRef = (0,
|
|
7523
|
+
const sillyRef = (0, import_react79.useRef)(false);
|
|
7311
7524
|
const { editConnectedData } = useMeshLocation("paramType");
|
|
7312
|
-
(0,
|
|
7525
|
+
(0, import_react79.useEffect)(() => {
|
|
7313
7526
|
if (sillyRef.current) {
|
|
7314
7527
|
return;
|
|
7315
7528
|
}
|
|
@@ -7337,38 +7550,59 @@ var JsonMeshVariableEditor = ({
|
|
|
7337
7550
|
return null;
|
|
7338
7551
|
};
|
|
7339
7552
|
|
|
7340
|
-
// src/
|
|
7341
|
-
|
|
7342
|
-
|
|
7343
|
-
|
|
7344
|
-
|
|
7345
|
-
|
|
7553
|
+
// src/components/SearchAndFilter/filtersMapper.tsx
|
|
7554
|
+
var import_design_system42 = require("@uniformdev/design-system");
|
|
7555
|
+
var import_design_system43 = require("@uniformdev/design-system");
|
|
7556
|
+
var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
|
|
7557
|
+
function withInputVariables(WrappedComponent) {
|
|
7558
|
+
const WithInputVariables = (props) => {
|
|
7559
|
+
if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
|
|
7560
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(WrappedComponent, { ...props });
|
|
7561
|
+
}
|
|
7562
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
7563
|
+
InputVariables,
|
|
7564
|
+
{
|
|
7565
|
+
disableInlineMenu: true,
|
|
7566
|
+
showMenuPosition: "inline-right",
|
|
7567
|
+
onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
|
|
7568
|
+
value: props.value,
|
|
7569
|
+
disabled: props.disabled,
|
|
7570
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(WrappedComponent, { ...props })
|
|
7571
|
+
}
|
|
7572
|
+
);
|
|
7573
|
+
};
|
|
7574
|
+
return WithInputVariables;
|
|
7346
7575
|
}
|
|
7347
|
-
|
|
7348
|
-
|
|
7349
|
-
var
|
|
7350
|
-
|
|
7351
|
-
|
|
7352
|
-
locale,
|
|
7353
|
-
setLocale,
|
|
7354
|
-
dynamicInputs
|
|
7355
|
-
}) {
|
|
7356
|
-
var _a;
|
|
7357
|
-
const setLocaleRef = (0, import_react75.useRef)(setLocale);
|
|
7358
|
-
setLocaleRef.current = setLocale;
|
|
7359
|
-
const { flatVariables } = useVariables();
|
|
7360
|
-
const effectiveLocale = locale != null ? locale : dynamicInputs[import_canvas10.LOCALE_DYNAMIC_INPUT_NAME] ? (0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME) : "";
|
|
7361
|
-
const boundLocale = (_a = (0, import_canvas10.bindVariables)({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
|
|
7362
|
-
(0, import_react75.useEffect)(() => {
|
|
7363
|
-
if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
|
|
7364
|
-
setLocaleRef.current((0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME));
|
|
7576
|
+
function withInputVariablesForMultiValue(WrappedComponent) {
|
|
7577
|
+
const WithInputVariables = (props) => {
|
|
7578
|
+
var _a;
|
|
7579
|
+
if (!props.bindable || props.disabled || props.readOnly) {
|
|
7580
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(WrappedComponent, { ...props });
|
|
7365
7581
|
}
|
|
7366
|
-
|
|
7367
|
-
|
|
7582
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
7583
|
+
InputVariables,
|
|
7584
|
+
{
|
|
7585
|
+
disableInlineMenu: true,
|
|
7586
|
+
showMenuPosition: "inline-right",
|
|
7587
|
+
onChange: (newValue) => props.onChange(newValue ? [newValue] : []),
|
|
7588
|
+
value: (_a = props.value) == null ? void 0 : _a[0],
|
|
7589
|
+
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(WrappedComponent, { ...props })
|
|
7590
|
+
}
|
|
7591
|
+
);
|
|
7592
|
+
};
|
|
7593
|
+
return WithInputVariables;
|
|
7368
7594
|
}
|
|
7595
|
+
var bindableFiltersMapper = {
|
|
7596
|
+
...import_design_system42.filterMapper,
|
|
7597
|
+
multiChoice: withInputVariablesForMultiValue(import_design_system42.FilterMultiChoiceEditor),
|
|
7598
|
+
singleChoice: withInputVariables(import_design_system43.FilterSingleChoiceEditor),
|
|
7599
|
+
date: withInputVariables(import_design_system43.DateEditor),
|
|
7600
|
+
text: withInputVariables(import_design_system43.TextEditor),
|
|
7601
|
+
number: withInputVariables(import_design_system43.NumberEditor)
|
|
7602
|
+
};
|
|
7369
7603
|
|
|
7370
7604
|
// src/index.ts
|
|
7371
|
-
var
|
|
7605
|
+
var import_design_system44 = require("@uniformdev/design-system");
|
|
7372
7606
|
__reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
7373
7607
|
// Annotate the CommonJS export names for ESM import in node:
|
|
7374
7608
|
0 && (module.exports = {
|
|
@@ -7377,11 +7611,13 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
|
7377
7611
|
AddListButton,
|
|
7378
7612
|
Button,
|
|
7379
7613
|
Callout,
|
|
7614
|
+
ControlledObjectSearchProvider,
|
|
7380
7615
|
ControlledValuePlugin,
|
|
7381
7616
|
DISCONNECT_VARIABLE_COMMAND,
|
|
7382
7617
|
DamSelectedItem,
|
|
7383
7618
|
DataRefreshButton,
|
|
7384
7619
|
DataResourceDynamicInputProvider,
|
|
7620
|
+
DataResourceInputContext,
|
|
7385
7621
|
DataResourceVariablesList,
|
|
7386
7622
|
DataResourceVariablesListExplicit,
|
|
7387
7623
|
DataSourceEditor,
|
|
@@ -7409,10 +7645,12 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
|
7409
7645
|
MeshApp,
|
|
7410
7646
|
OPEN_INSERT_VARIABLE_COMMAND,
|
|
7411
7647
|
ObjectSearchContainer,
|
|
7648
|
+
ObjectSearchContext,
|
|
7412
7649
|
ObjectSearchFilter,
|
|
7413
7650
|
ObjectSearchFilterContainer,
|
|
7414
7651
|
ObjectSearchListItem,
|
|
7415
7652
|
ObjectSearchListItemLoadingSkeleton,
|
|
7653
|
+
ObjectSearchListOfSearchResults,
|
|
7416
7654
|
ObjectSearchProvider,
|
|
7417
7655
|
ObjectSearchResultItem,
|
|
7418
7656
|
ObjectSearchResultItemButton,
|
|
@@ -7466,6 +7704,8 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
|
7466
7704
|
VariablesPlugin,
|
|
7467
7705
|
VariablesProvider,
|
|
7468
7706
|
badgeIcon,
|
|
7707
|
+
bindQuery,
|
|
7708
|
+
bindableFiltersMapper,
|
|
7469
7709
|
convertConnectedDataToVariable,
|
|
7470
7710
|
createLocationValidator,
|
|
7471
7711
|
damSelectItemImage,
|
|
@@ -7537,6 +7777,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
|
|
|
7537
7777
|
urlEncodeRequestUrl,
|
|
7538
7778
|
useConnectedDataAsVariables,
|
|
7539
7779
|
useContentDataResourceLocaleInfo,
|
|
7780
|
+
useDataResourceDynamicInputs,
|
|
7540
7781
|
useDynamicInputsAsVariables,
|
|
7541
7782
|
useMeshLocation,
|
|
7542
7783
|
useObjectSearchContext,
|