@uniformdev/mesh-sdk-react 19.116.2-alpha.0 → 19.117.1-alpha.1
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 +97 -51
- package/dist/index.d.ts +97 -51
- package/dist/index.esm.js +471 -301
- package/dist/index.js +512 -342
- package/dist/index.mjs +471 -301
- package/package.json +5 -5
package/dist/index.esm.js
CHANGED
|
@@ -2652,6 +2652,9 @@ function DefaultDamItemRenderer({ item }) {
|
|
|
2652
2652
|
] }) : null;
|
|
2653
2653
|
}
|
|
2654
2654
|
|
|
2655
|
+
// src/components/DataResourceDynamicInputProvider.tsx
|
|
2656
|
+
import { createContext as createContext4, useContext as useContext6 } from "react";
|
|
2657
|
+
|
|
2655
2658
|
// src/hooks/useConnectedDataAsVariables.tsx
|
|
2656
2659
|
import { useMemo as useMemo3 } from "react";
|
|
2657
2660
|
function useConnectedDataAsVariables(connectedData) {
|
|
@@ -3099,9 +3102,10 @@ function VariableEditor({
|
|
|
3099
3102
|
variable,
|
|
3100
3103
|
onSubmit,
|
|
3101
3104
|
onCancel,
|
|
3105
|
+
showDisplayName,
|
|
3102
3106
|
disableMeshTip
|
|
3103
3107
|
}) {
|
|
3104
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
3108
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
3105
3109
|
const { variables } = useVariables();
|
|
3106
3110
|
const currentVariable = variables[variable];
|
|
3107
3111
|
const { register, handleSubmit, formState } = useForm({
|
|
@@ -3156,6 +3160,16 @@ function VariableEditor({
|
|
|
3156
3160
|
}
|
|
3157
3161
|
}
|
|
3158
3162
|
),
|
|
3163
|
+
showDisplayName ? /* @__PURE__ */ jsx31(
|
|
3164
|
+
Input2,
|
|
3165
|
+
{
|
|
3166
|
+
...register("displayName"),
|
|
3167
|
+
label: "Display name",
|
|
3168
|
+
autoComplete: "off",
|
|
3169
|
+
caption: "This is the name that will be displayed in the UI. If not provided, the name will be used.",
|
|
3170
|
+
errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
|
|
3171
|
+
}
|
|
3172
|
+
) : null,
|
|
3159
3173
|
/* @__PURE__ */ jsx31(
|
|
3160
3174
|
Input2,
|
|
3161
3175
|
{
|
|
@@ -3163,7 +3177,7 @@ function VariableEditor({
|
|
|
3163
3177
|
label: "Help Text",
|
|
3164
3178
|
caption: "Appears when entering a value for this variable.",
|
|
3165
3179
|
autoComplete: "off",
|
|
3166
|
-
errorMessage: (
|
|
3180
|
+
errorMessage: (_g = formState.errors.helpText) == null ? void 0 : _g.message
|
|
3167
3181
|
}
|
|
3168
3182
|
),
|
|
3169
3183
|
/* @__PURE__ */ jsx31(
|
|
@@ -3172,7 +3186,7 @@ function VariableEditor({
|
|
|
3172
3186
|
...register("default"),
|
|
3173
3187
|
label: "Default Value",
|
|
3174
3188
|
autoComplete: "off",
|
|
3175
|
-
errorMessage: (
|
|
3189
|
+
errorMessage: (_h = formState.errors.default) == null ? void 0 : _h.message
|
|
3176
3190
|
}
|
|
3177
3191
|
),
|
|
3178
3192
|
/* @__PURE__ */ jsx31(HorizontalRhythm, { justify: "space-between", children: /* @__PURE__ */ jsxs16(HorizontalRhythm, { gap: "sm", children: [
|
|
@@ -5189,7 +5203,7 @@ function VariablesList() {
|
|
|
5189
5203
|
const resultAsObj = result.reduce(
|
|
5190
5204
|
(acc, item, index) => ({
|
|
5191
5205
|
...acc,
|
|
5192
|
-
[item.name]: {
|
|
5206
|
+
[item.name]: { type: item.type, default: item.default, order: index }
|
|
5193
5207
|
}),
|
|
5194
5208
|
{}
|
|
5195
5209
|
);
|
|
@@ -5279,6 +5293,10 @@ function VariablesList() {
|
|
|
5279
5293
|
|
|
5280
5294
|
// src/components/DataResourceDynamicInputProvider.tsx
|
|
5281
5295
|
import { jsx as jsx45 } from "@emotion/react/jsx-runtime";
|
|
5296
|
+
var DataResourceInputContext = createContext4(void 0);
|
|
5297
|
+
var useDataResourceDynamicInputs = () => {
|
|
5298
|
+
return useContext6(DataResourceInputContext);
|
|
5299
|
+
};
|
|
5282
5300
|
function DataResourceDynamicInputProvider(props) {
|
|
5283
5301
|
const { children, dynamicInputs } = props;
|
|
5284
5302
|
if (dynamicInputs) {
|
|
@@ -5297,7 +5315,7 @@ function DataResourceDynamicInputProviderRenderer({
|
|
|
5297
5315
|
dynamicInputs
|
|
5298
5316
|
}) {
|
|
5299
5317
|
const variables = useDynamicInputsAsVariables(dynamicInputs);
|
|
5300
|
-
return /* @__PURE__ */ jsx45(VariablesProvider, { value: variables, readOnly: true, children });
|
|
5318
|
+
return /* @__PURE__ */ jsx45(DataResourceInputContext.Provider, { value: dynamicInputs, children: /* @__PURE__ */ jsx45(VariablesProvider, { value: variables, readOnly: true, children }) });
|
|
5301
5319
|
}
|
|
5302
5320
|
|
|
5303
5321
|
// src/components/DataResourceVariablesList.tsx
|
|
@@ -6164,22 +6182,23 @@ var DataRefreshButton = ({
|
|
|
6164
6182
|
};
|
|
6165
6183
|
|
|
6166
6184
|
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6167
|
-
import { css as
|
|
6185
|
+
import { css as css35 } from "@emotion/react";
|
|
6168
6186
|
import { bindVariables } from "@uniformdev/canvas";
|
|
6169
6187
|
import { Callout as Callout5, Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
|
|
6188
|
+
import React12 from "react";
|
|
6170
6189
|
|
|
6171
6190
|
// src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
|
|
6172
6191
|
import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
|
|
6173
6192
|
import {
|
|
6174
|
-
createContext as
|
|
6193
|
+
createContext as createContext6,
|
|
6175
6194
|
useCallback as useCallback4,
|
|
6176
|
-
useContext as
|
|
6195
|
+
useContext as useContext8,
|
|
6177
6196
|
useDeferredValue,
|
|
6178
6197
|
useMemo as useMemo14,
|
|
6179
6198
|
useState as useState16
|
|
6180
6199
|
} from "react";
|
|
6181
6200
|
import { jsx as jsx59 } from "@emotion/react/jsx-runtime";
|
|
6182
|
-
var ObjectSearchContext =
|
|
6201
|
+
var ObjectSearchContext = createContext6({
|
|
6183
6202
|
onSetQuery: () => {
|
|
6184
6203
|
},
|
|
6185
6204
|
onSelectItem: () => {
|
|
@@ -6187,8 +6206,6 @@ var ObjectSearchContext = createContext5({
|
|
|
6187
6206
|
query: {},
|
|
6188
6207
|
boundQuery: {},
|
|
6189
6208
|
list: {},
|
|
6190
|
-
onSetList: () => {
|
|
6191
|
-
},
|
|
6192
6209
|
selectedListItems: [],
|
|
6193
6210
|
onRemoveAllSelectedItems: () => {
|
|
6194
6211
|
},
|
|
@@ -6272,7 +6289,7 @@ var ObjectSearchProvider = ({
|
|
|
6272
6289
|
return /* @__PURE__ */ jsx59(ObjectSearchContext.Provider, { value, children });
|
|
6273
6290
|
};
|
|
6274
6291
|
function useObjectSearchContext() {
|
|
6275
|
-
return
|
|
6292
|
+
return useContext8(ObjectSearchContext);
|
|
6276
6293
|
}
|
|
6277
6294
|
function bindQuery(query, inputs) {
|
|
6278
6295
|
const { result, errors } = bindVariablesToObject2({
|
|
@@ -6426,201 +6443,18 @@ var ObjectSearchListItemLoadingSkeleton = () => {
|
|
|
6426
6443
|
return /* @__PURE__ */ jsx60("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
|
|
6427
6444
|
};
|
|
6428
6445
|
|
|
6429
|
-
// src/components/ObjectSearch/
|
|
6430
|
-
import {
|
|
6431
|
-
|
|
6432
|
-
label,
|
|
6433
|
-
enableDynamicInputToResultId,
|
|
6434
|
-
searchFilters,
|
|
6435
|
-
resultList,
|
|
6436
|
-
children
|
|
6437
|
-
}) => {
|
|
6438
|
-
var _a, _b;
|
|
6439
|
-
const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
|
|
6440
|
-
const { flatVariables } = useVariables(true);
|
|
6441
|
-
const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
|
|
6442
|
-
const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx61(
|
|
6443
|
-
ScrollableList,
|
|
6444
|
-
{
|
|
6445
|
-
role: "list",
|
|
6446
|
-
css: css32`
|
|
6447
|
-
> div {
|
|
6448
|
-
transition: max-height var(--duration-slow) var(--timing-ease-out);
|
|
6449
|
-
max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
|
|
6450
|
-
}
|
|
6451
|
-
`,
|
|
6452
|
-
children: /* @__PURE__ */ jsx61(DefaultResultList, {})
|
|
6453
|
-
}
|
|
6454
|
-
);
|
|
6455
|
-
const body = /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
|
|
6456
|
-
searchFilters,
|
|
6457
|
-
listItems
|
|
6458
|
-
] });
|
|
6459
|
-
const handleSelectedVariableChange = (selectedValue) => {
|
|
6460
|
-
var _a2;
|
|
6461
|
-
if (!selectedValue) {
|
|
6462
|
-
onSelectItem([]);
|
|
6463
|
-
return;
|
|
6464
|
-
}
|
|
6465
|
-
const { result, errors } = bindVariables({
|
|
6466
|
-
value: selectedValue,
|
|
6467
|
-
variables: flatVariables,
|
|
6468
|
-
errorPrefix: "Dynamic input"
|
|
6469
|
-
});
|
|
6470
|
-
if (!result) {
|
|
6471
|
-
onSelectItem([]);
|
|
6472
|
-
return;
|
|
6473
|
-
}
|
|
6474
|
-
const item = (_a2 = list.items) == null ? void 0 : _a2.find((i) => i.id === result);
|
|
6475
|
-
onSelectItem([
|
|
6476
|
-
{
|
|
6477
|
-
title: selectedValue,
|
|
6478
|
-
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`,
|
|
6479
|
-
// spread any matched list item, overriding the above default props
|
|
6480
|
-
...item,
|
|
6481
|
-
// we want to make sure the ID is our dynamic value
|
|
6482
|
-
id: selectedValue
|
|
6483
|
-
}
|
|
6484
|
-
]);
|
|
6485
|
-
};
|
|
6486
|
-
return /* @__PURE__ */ jsx61(IconsProvider, { children: /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
|
|
6487
|
-
/* @__PURE__ */ jsx61(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx61(
|
|
6488
|
-
InputVariables,
|
|
6489
|
-
{
|
|
6490
|
-
label,
|
|
6491
|
-
value: inputValue,
|
|
6492
|
-
onChange: (value) => {
|
|
6493
|
-
if (value === inputValue) {
|
|
6494
|
-
return;
|
|
6495
|
-
}
|
|
6496
|
-
handleSelectedVariableChange(value);
|
|
6497
|
-
},
|
|
6498
|
-
inputWhenNoVariables: body,
|
|
6499
|
-
disableVariables: !enableDynamicInputToResultId
|
|
6500
|
-
}
|
|
6501
|
-
) : body }),
|
|
6502
|
-
children
|
|
6503
|
-
] }) });
|
|
6504
|
-
};
|
|
6505
|
-
var DefaultResultList = () => {
|
|
6506
|
-
var _a;
|
|
6507
|
-
const { list } = useObjectSearchContext();
|
|
6508
|
-
if (!list.items) {
|
|
6509
|
-
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ jsx61(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
6510
|
-
}
|
|
6511
|
-
if (list.items.length === 0) {
|
|
6512
|
-
return /* @__PURE__ */ jsx61(Callout5, { type: "info", children: "No results were found" });
|
|
6513
|
-
}
|
|
6514
|
-
return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx61(ObjectSearchListItem, { ...item }, item.id));
|
|
6515
|
-
};
|
|
6516
|
-
|
|
6517
|
-
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6518
|
-
import { DebouncedInputKeywordSearch, InputSelect as InputSelect6 } from "@uniformdev/design-system";
|
|
6519
|
-
import { useMemo as useMemo15, useState as useState17 } from "react";
|
|
6520
|
-
|
|
6521
|
-
// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
|
|
6522
|
-
import { css as css33 } from "@emotion/react";
|
|
6523
|
-
var ObjectSearchFilterContainerLabel = css33`
|
|
6524
|
-
align-items: center;
|
|
6525
|
-
display: flex;
|
|
6526
|
-
font-size: var(--fs-sm);
|
|
6527
|
-
font-weight: var(--fw-bold);
|
|
6528
|
-
line-height: 1rem;
|
|
6529
|
-
margin-bottom: var(--spacing-sm);
|
|
6530
|
-
`;
|
|
6531
|
-
var ObjectSearchFilterContainer = css33`
|
|
6532
|
-
display: grid;
|
|
6533
|
-
gap: var(--spacing-base);
|
|
6534
|
-
`;
|
|
6535
|
-
var ObjectSearchFilterGrid = (gridColumns) => css33`
|
|
6536
|
-
display: grid;
|
|
6537
|
-
grid-template-columns: ${gridColumns};
|
|
6538
|
-
gap: var(--spacing-base);
|
|
6539
|
-
`;
|
|
6540
|
-
|
|
6541
|
-
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6542
|
-
import { jsx as jsx62, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
|
|
6543
|
-
var ObjectSearchFilter = ({
|
|
6544
|
-
requireContentType,
|
|
6545
|
-
typeSelectorAllTypesOptionText = "All content types",
|
|
6546
|
-
searchInputName = "searchText",
|
|
6547
|
-
searchInputPlaceholderText = "Enter keyword to narrow your results",
|
|
6548
|
-
selectLabel = "Content Type Select",
|
|
6549
|
-
selectOptions
|
|
6550
|
-
}) => {
|
|
6551
|
-
var _a, _b;
|
|
6552
|
-
const { query, onSetQuery } = useObjectSearchContext();
|
|
6553
|
-
const [searchState, setSearchState] = useState17({
|
|
6554
|
-
contentType: (_a = query.contentType) != null ? _a : "",
|
|
6555
|
-
keyword: (_b = query.keyword) != null ? _b : ""
|
|
6556
|
-
});
|
|
6557
|
-
const handleFilterChange = (value) => {
|
|
6558
|
-
setSearchState((prev) => {
|
|
6559
|
-
return { ...prev, ...value };
|
|
6560
|
-
});
|
|
6561
|
-
onSetQuery({ ...query, ...value });
|
|
6562
|
-
};
|
|
6563
|
-
const memoizedSelectOptions = useMemo15(() => {
|
|
6564
|
-
if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
|
|
6565
|
-
return [];
|
|
6566
|
-
}
|
|
6567
|
-
return [
|
|
6568
|
-
...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
|
|
6569
|
-
...selectOptions != null ? selectOptions : []
|
|
6570
|
-
];
|
|
6571
|
-
}, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
|
|
6572
|
-
const shouldRenderSelect = memoizedSelectOptions.length > 0;
|
|
6573
|
-
return /* @__PURE__ */ jsxs36(
|
|
6574
|
-
"fieldset",
|
|
6575
|
-
{
|
|
6576
|
-
css: [
|
|
6577
|
-
ObjectSearchFilterContainer,
|
|
6578
|
-
ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
|
|
6579
|
-
],
|
|
6580
|
-
children: [
|
|
6581
|
-
memoizedSelectOptions.length ? /* @__PURE__ */ jsx62(
|
|
6582
|
-
InputSelect6,
|
|
6583
|
-
{
|
|
6584
|
-
label: selectLabel,
|
|
6585
|
-
showLabel: false,
|
|
6586
|
-
onChange: (e) => handleFilterChange({ contentType: e.target.value }),
|
|
6587
|
-
options: memoizedSelectOptions,
|
|
6588
|
-
value: query.contentType
|
|
6589
|
-
}
|
|
6590
|
-
) : null,
|
|
6591
|
-
/* @__PURE__ */ jsx62(
|
|
6592
|
-
DebouncedInputKeywordSearch,
|
|
6593
|
-
{
|
|
6594
|
-
inputFieldName: searchInputName,
|
|
6595
|
-
placeholder: searchInputPlaceholderText,
|
|
6596
|
-
onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
|
|
6597
|
-
disabledFieldSubmission: true,
|
|
6598
|
-
defaultValue: searchState.keyword,
|
|
6599
|
-
delay: 300
|
|
6600
|
-
}
|
|
6601
|
-
)
|
|
6602
|
-
]
|
|
6603
|
-
}
|
|
6604
|
-
);
|
|
6605
|
-
};
|
|
6606
|
-
|
|
6607
|
-
// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
|
|
6608
|
-
import { jsx as jsx63, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
|
|
6609
|
-
var ObjectSearchFilterContainer2 = ({ label, children }) => {
|
|
6610
|
-
return /* @__PURE__ */ jsxs37("div", { children: [
|
|
6611
|
-
label ? /* @__PURE__ */ jsx63("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
|
|
6612
|
-
/* @__PURE__ */ jsx63("div", { css: ObjectSearchFilterContainer, children })
|
|
6613
|
-
] });
|
|
6614
|
-
};
|
|
6446
|
+
// src/components/ObjectSearch/ObjectSearchResultList.tsx
|
|
6447
|
+
import { Button as Button5, Counter } from "@uniformdev/design-system";
|
|
6448
|
+
import { Draggable as Draggable3, Droppable as Droppable3 } from "react-beautiful-dnd";
|
|
6615
6449
|
|
|
6616
6450
|
// src/components/ObjectSearch/ObjectSearchResultItem.tsx
|
|
6617
6451
|
import { Badge, Button as Button4, Popover as Popover2 } from "@uniformdev/design-system";
|
|
6618
6452
|
import { format as timeagoFormat } from "timeago.js";
|
|
6619
6453
|
|
|
6620
6454
|
// src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
|
|
6621
|
-
import { css as
|
|
6455
|
+
import { css as css32 } from "@emotion/react";
|
|
6622
6456
|
import { button as button2 } from "@uniformdev/design-system";
|
|
6623
|
-
var ButtonStyles =
|
|
6457
|
+
var ButtonStyles = css32`
|
|
6624
6458
|
${button2}
|
|
6625
6459
|
background: transparent;
|
|
6626
6460
|
border: 1px solid var(--typography-base);
|
|
@@ -6647,20 +6481,20 @@ var ButtonStyles = css34`
|
|
|
6647
6481
|
text-decoration: none;
|
|
6648
6482
|
}
|
|
6649
6483
|
`;
|
|
6650
|
-
var ButtonIcon =
|
|
6484
|
+
var ButtonIcon = css32`
|
|
6651
6485
|
width: 1rem;
|
|
6652
6486
|
height: 1rem;
|
|
6653
6487
|
`;
|
|
6654
6488
|
|
|
6655
6489
|
// src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
|
|
6656
|
-
import { jsx as
|
|
6490
|
+
import { jsx as jsx61, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
|
|
6657
6491
|
var ObjectSearchResultItemButton = ({
|
|
6658
6492
|
text,
|
|
6659
6493
|
icon,
|
|
6660
6494
|
...props
|
|
6661
6495
|
}) => {
|
|
6662
|
-
return /* @__PURE__ */
|
|
6663
|
-
!icon ? null : /* @__PURE__ */
|
|
6496
|
+
return /* @__PURE__ */ jsxs35("button", { type: "button", css: ButtonStyles, ...props, children: [
|
|
6497
|
+
!icon ? null : /* @__PURE__ */ jsx61(Image, { src: icon, css: ButtonIcon }),
|
|
6664
6498
|
text
|
|
6665
6499
|
] });
|
|
6666
6500
|
};
|
|
@@ -6669,15 +6503,15 @@ var LinkButton = ({
|
|
|
6669
6503
|
icon,
|
|
6670
6504
|
...props
|
|
6671
6505
|
}) => {
|
|
6672
|
-
return /* @__PURE__ */
|
|
6673
|
-
!icon ? null : /* @__PURE__ */
|
|
6506
|
+
return /* @__PURE__ */ jsxs35("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
|
|
6507
|
+
!icon ? null : /* @__PURE__ */ jsx61(Image, { src: icon, css: ButtonIcon }),
|
|
6674
6508
|
text
|
|
6675
6509
|
] });
|
|
6676
6510
|
};
|
|
6677
6511
|
|
|
6678
6512
|
// src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
|
|
6679
|
-
import { css as
|
|
6680
|
-
var ObjectSearchResultItemContainer =
|
|
6513
|
+
import { css as css33 } from "@emotion/react";
|
|
6514
|
+
var ObjectSearchResultItemContainer = css33`
|
|
6681
6515
|
align-items: center;
|
|
6682
6516
|
border: 1px solid var(--gray-300);
|
|
6683
6517
|
border-radius: var(--rounded-base);
|
|
@@ -6693,7 +6527,7 @@ var ObjectSearchResultItemContainer = css35`
|
|
|
6693
6527
|
}
|
|
6694
6528
|
}
|
|
6695
6529
|
`;
|
|
6696
|
-
var ObjectSearchDragHandle =
|
|
6530
|
+
var ObjectSearchDragHandle = css33`
|
|
6697
6531
|
border-left: 2px dotted var(--gray-300);
|
|
6698
6532
|
border-right: 2px dotted var(--gray-300);
|
|
6699
6533
|
position: absolute;
|
|
@@ -6702,41 +6536,41 @@ var ObjectSearchDragHandle = css35`
|
|
|
6702
6536
|
transition: opacity var(--duration-fast) var(--timing-ease-out);
|
|
6703
6537
|
opacity: 0;
|
|
6704
6538
|
`;
|
|
6705
|
-
var ObjectSearchResultItemSubtitle =
|
|
6539
|
+
var ObjectSearchResultItemSubtitle = css33`
|
|
6706
6540
|
color: var(--gray-500);
|
|
6707
6541
|
display: block;
|
|
6708
6542
|
font-size: var(--fs-xs);
|
|
6709
6543
|
line-height: 1;
|
|
6710
6544
|
`;
|
|
6711
|
-
var ObjectSearchResultItemTitle =
|
|
6545
|
+
var ObjectSearchResultItemTitle = css33`
|
|
6712
6546
|
align-items: center;
|
|
6713
6547
|
color: var(--typography-base);
|
|
6714
6548
|
display: flex;
|
|
6715
6549
|
gap: var(--spacing-xs);
|
|
6716
6550
|
`;
|
|
6717
|
-
var ObjectSearchResultItemTimeStamp =
|
|
6551
|
+
var ObjectSearchResultItemTimeStamp = css33`
|
|
6718
6552
|
color: var(--gray-500);
|
|
6719
6553
|
font-size: var(--fs-xs);
|
|
6720
6554
|
`;
|
|
6721
|
-
var ObjectSearchAuthorStateGroup =
|
|
6555
|
+
var ObjectSearchAuthorStateGroup = css33`
|
|
6722
6556
|
align-items: center;
|
|
6723
6557
|
display: flex;
|
|
6724
6558
|
gap: var(--spacing-sm);
|
|
6725
6559
|
`;
|
|
6726
|
-
var ObjectSearchUpdateGroup =
|
|
6560
|
+
var ObjectSearchUpdateGroup = css33`
|
|
6727
6561
|
display: grid;
|
|
6728
6562
|
`;
|
|
6729
|
-
var ObjectSearchContentContainer =
|
|
6563
|
+
var ObjectSearchContentContainer = css33`
|
|
6730
6564
|
display: flex;
|
|
6731
6565
|
gap: var(--spacing-base);
|
|
6732
6566
|
`;
|
|
6733
|
-
var ObjectSearchImage =
|
|
6567
|
+
var ObjectSearchImage = css33`
|
|
6734
6568
|
width: 56px;
|
|
6735
6569
|
object-fit: contain;
|
|
6736
6570
|
`;
|
|
6737
6571
|
|
|
6738
6572
|
// src/components/ObjectSearch/ObjectSearchResultItem.tsx
|
|
6739
|
-
import { jsx as
|
|
6573
|
+
import { jsx as jsx62, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
|
|
6740
6574
|
var ObjectSearchResultItem = ({
|
|
6741
6575
|
id,
|
|
6742
6576
|
title,
|
|
@@ -6760,77 +6594,73 @@ var ObjectSearchResultItem = ({
|
|
|
6760
6594
|
onSelectItem({ id, title: id });
|
|
6761
6595
|
onRemove == null ? void 0 : onRemove();
|
|
6762
6596
|
};
|
|
6763
|
-
return /* @__PURE__ */
|
|
6764
|
-
disableDnD ? null : /* @__PURE__ */
|
|
6765
|
-
/* @__PURE__ */
|
|
6766
|
-
!imageUrl ? null : /* @__PURE__ */
|
|
6767
|
-
/* @__PURE__ */
|
|
6768
|
-
/* @__PURE__ */
|
|
6769
|
-
/* @__PURE__ */
|
|
6597
|
+
return /* @__PURE__ */ jsxs36("div", { css: ObjectSearchResultItemContainer, "data-testid": "search-result-item", children: [
|
|
6598
|
+
disableDnD ? null : /* @__PURE__ */ jsx62("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
|
|
6599
|
+
/* @__PURE__ */ jsx62("div", { children: /* @__PURE__ */ jsxs36("div", { css: ObjectSearchContentContainer, children: [
|
|
6600
|
+
!imageUrl ? null : /* @__PURE__ */ jsx62("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
|
|
6601
|
+
/* @__PURE__ */ jsxs36("div", { children: [
|
|
6602
|
+
/* @__PURE__ */ jsx62("span", { css: ObjectSearchResultItemSubtitle, "data-testid": "sub-title", children: formatedContentType }),
|
|
6603
|
+
/* @__PURE__ */ jsxs36("span", { role: "heading", css: ObjectSearchResultItemTitle, "data-testid": "title", children: [
|
|
6770
6604
|
title != null ? title : name,
|
|
6771
|
-
!popoverData ? null : /* @__PURE__ */
|
|
6605
|
+
!popoverData ? null : /* @__PURE__ */ jsx62(Popover2, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
|
|
6772
6606
|
] }),
|
|
6773
|
-
!createdAt && !publishStatus ? null : /* @__PURE__ */
|
|
6774
|
-
!(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */
|
|
6775
|
-
!createdAt && !publishedAt ? null : /* @__PURE__ */
|
|
6776
|
-
!createdAt ? null : /* @__PURE__ */
|
|
6777
|
-
/* @__PURE__ */
|
|
6607
|
+
!createdAt && !publishStatus ? null : /* @__PURE__ */ jsxs36("div", { css: ObjectSearchAuthorStateGroup, children: [
|
|
6608
|
+
!(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ jsx62(Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
|
|
6609
|
+
!createdAt && !publishedAt ? null : /* @__PURE__ */ jsxs36("div", { css: ObjectSearchUpdateGroup, children: [
|
|
6610
|
+
!createdAt ? null : /* @__PURE__ */ jsxs36("small", { css: ObjectSearchResultItemTimeStamp, children: [
|
|
6611
|
+
/* @__PURE__ */ jsx62("strong", { children: "Last updated: " }),
|
|
6778
6612
|
timeagoFormat(createdAt)
|
|
6779
6613
|
] }),
|
|
6780
|
-
!publishedAt ? null : /* @__PURE__ */
|
|
6781
|
-
/* @__PURE__ */
|
|
6614
|
+
!publishedAt ? null : /* @__PURE__ */ jsxs36("small", { css: ObjectSearchResultItemTimeStamp, children: [
|
|
6615
|
+
/* @__PURE__ */ jsx62("strong", { children: "Last published: " }),
|
|
6782
6616
|
timeagoFormat(publishedAt)
|
|
6783
6617
|
] })
|
|
6784
6618
|
] })
|
|
6785
6619
|
] }),
|
|
6786
|
-
/* @__PURE__ */
|
|
6620
|
+
/* @__PURE__ */ jsx62("div", { children })
|
|
6787
6621
|
] })
|
|
6788
6622
|
] }) }),
|
|
6789
|
-
!editLink && hideRemoveButton ? null : /* @__PURE__ */
|
|
6790
|
-
!editLink ? null : /* @__PURE__ */
|
|
6791
|
-
hideRemoveButton ? null : /* @__PURE__ */
|
|
6623
|
+
!editLink && hideRemoveButton ? null : /* @__PURE__ */ jsxs36("div", { css: ObjectSearchAuthorStateGroup, children: [
|
|
6624
|
+
!editLink ? null : /* @__PURE__ */ jsx62(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
|
|
6625
|
+
hideRemoveButton ? null : /* @__PURE__ */ jsx62(Button4, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
|
|
6792
6626
|
] })
|
|
6793
6627
|
] });
|
|
6794
6628
|
};
|
|
6795
6629
|
|
|
6796
|
-
// src/components/ObjectSearch/ObjectSearchResultList.tsx
|
|
6797
|
-
import { Button as Button5, Counter } from "@uniformdev/design-system";
|
|
6798
|
-
import { Draggable as Draggable3, Droppable as Droppable3 } from "react-beautiful-dnd";
|
|
6799
|
-
|
|
6800
6630
|
// src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
|
|
6801
|
-
import { css as
|
|
6802
|
-
var ObjectSearchResultListContainer =
|
|
6631
|
+
import { css as css34 } from "@emotion/react";
|
|
6632
|
+
var ObjectSearchResultListContainer = css34`
|
|
6803
6633
|
align-items: center;
|
|
6804
6634
|
display: flex;
|
|
6805
6635
|
gap: var(--spacing-sm);
|
|
6806
6636
|
justify-content: space-between;
|
|
6807
6637
|
`;
|
|
6808
|
-
var ObjectSearchDragContainer =
|
|
6638
|
+
var ObjectSearchDragContainer = css34`
|
|
6809
6639
|
margin: 0 0 var(--spacing-sm);
|
|
6810
6640
|
`;
|
|
6811
|
-
var ObjectSearchContainerDragging =
|
|
6641
|
+
var ObjectSearchContainerDragging = css34`
|
|
6812
6642
|
box-shadow: var(--shadow-base);
|
|
6813
6643
|
opacity: var(--opacity-50);
|
|
6814
6644
|
`;
|
|
6815
|
-
var ObjectSearchResultListCounterContainer =
|
|
6645
|
+
var ObjectSearchResultListCounterContainer = css34`
|
|
6816
6646
|
align-items: center;
|
|
6817
6647
|
display: flex;
|
|
6818
6648
|
gap: var(--spacing-sm);
|
|
6819
6649
|
`;
|
|
6820
|
-
var ObjectSearchResultListTitle =
|
|
6650
|
+
var ObjectSearchResultListTitle = css34`
|
|
6821
6651
|
font-weight: var(--fw-bold);
|
|
6822
6652
|
line-height: 1;
|
|
6823
6653
|
`;
|
|
6824
6654
|
|
|
6825
6655
|
// src/components/ObjectSearch/ObjectSearchResultList.tsx
|
|
6826
|
-
import { Fragment as Fragment13, jsx as
|
|
6656
|
+
import { Fragment as Fragment13, jsx as jsx63, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
|
|
6827
6657
|
function ObjectSearchResultList({
|
|
6828
6658
|
resultLabelText = "Selected",
|
|
6829
6659
|
removeButtonText = "Remove all",
|
|
6830
6660
|
onRemoveAllSelected,
|
|
6831
6661
|
hideRemoveButton = false,
|
|
6832
6662
|
additionalButtons,
|
|
6833
|
-
renderResultComponent = (value) => /* @__PURE__ */
|
|
6663
|
+
renderResultComponent = (value) => /* @__PURE__ */ jsx63(ObjectSearchResultItem, { ...value }),
|
|
6834
6664
|
multiSelectId,
|
|
6835
6665
|
disableDnD = false,
|
|
6836
6666
|
getContainerForDnDReparenting,
|
|
@@ -6857,7 +6687,7 @@ function ObjectSearchResultList({
|
|
|
6857
6687
|
...item,
|
|
6858
6688
|
disableDnD: selectedListItems.length === 1 || disableDnD
|
|
6859
6689
|
});
|
|
6860
|
-
return /* @__PURE__ */
|
|
6690
|
+
return /* @__PURE__ */ jsx63(
|
|
6861
6691
|
"div",
|
|
6862
6692
|
{
|
|
6863
6693
|
css: [
|
|
@@ -6872,16 +6702,16 @@ function ObjectSearchResultList({
|
|
|
6872
6702
|
}
|
|
6873
6703
|
);
|
|
6874
6704
|
};
|
|
6875
|
-
return /* @__PURE__ */
|
|
6876
|
-
/* @__PURE__ */
|
|
6877
|
-
/* @__PURE__ */
|
|
6878
|
-
/* @__PURE__ */
|
|
6705
|
+
return /* @__PURE__ */ jsxs37(Fragment13, { children: [
|
|
6706
|
+
/* @__PURE__ */ jsxs37("div", { role: "group", css: ObjectSearchResultListContainer, children: [
|
|
6707
|
+
/* @__PURE__ */ jsxs37("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
|
|
6708
|
+
/* @__PURE__ */ jsx63("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
|
|
6879
6709
|
" ",
|
|
6880
|
-
!selectedListItems.length ? null : /* @__PURE__ */
|
|
6710
|
+
!selectedListItems.length ? null : /* @__PURE__ */ jsx63(Counter, { count: selectedListItems.length })
|
|
6881
6711
|
] }),
|
|
6882
|
-
/* @__PURE__ */
|
|
6712
|
+
/* @__PURE__ */ jsxs37("div", { css: ObjectSearchResultListCounterContainer, children: [
|
|
6883
6713
|
additionalButtons,
|
|
6884
|
-
hideRemoveButton ? null : /* @__PURE__ */
|
|
6714
|
+
hideRemoveButton ? null : /* @__PURE__ */ jsx63(
|
|
6885
6715
|
Button5,
|
|
6886
6716
|
{
|
|
6887
6717
|
buttonType: "ghostDestructive",
|
|
@@ -6893,15 +6723,15 @@ function ObjectSearchResultList({
|
|
|
6893
6723
|
)
|
|
6894
6724
|
] })
|
|
6895
6725
|
] }),
|
|
6896
|
-
!selectedListItems.length ? whenNothingSelected : /* @__PURE__ */
|
|
6726
|
+
!selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ jsx63(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx63(
|
|
6897
6727
|
Droppable3,
|
|
6898
6728
|
{
|
|
6899
6729
|
droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select",
|
|
6900
6730
|
renderClone: getContainerForDnDReparenting ? getDraggableItem : void 0,
|
|
6901
6731
|
getContainerForClone: getContainerForDnDReparenting,
|
|
6902
|
-
children: (provided) => /* @__PURE__ */
|
|
6732
|
+
children: (provided) => /* @__PURE__ */ jsxs37("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
|
|
6903
6733
|
selectedListItems.map((item, i) => {
|
|
6904
|
-
return /* @__PURE__ */
|
|
6734
|
+
return /* @__PURE__ */ jsx63(
|
|
6905
6735
|
Draggable3,
|
|
6906
6736
|
{
|
|
6907
6737
|
draggableId: item.id,
|
|
@@ -6919,9 +6749,289 @@ function ObjectSearchResultList({
|
|
|
6919
6749
|
] });
|
|
6920
6750
|
}
|
|
6921
6751
|
|
|
6752
|
+
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6753
|
+
import { Fragment as Fragment14, jsx as jsx64, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
|
|
6754
|
+
var ObjectSearchContainer = ({
|
|
6755
|
+
label,
|
|
6756
|
+
enableDynamicInputToResultId,
|
|
6757
|
+
searchFilters,
|
|
6758
|
+
resultList,
|
|
6759
|
+
children = /* @__PURE__ */ jsx64(ObjectSearchResultList, {})
|
|
6760
|
+
}) => {
|
|
6761
|
+
var _a, _b;
|
|
6762
|
+
const { onSelectItem, selectedListItems, list, dynamicEntryId, onSetQuery, query } = useObjectSearchContext();
|
|
6763
|
+
const { flatVariables } = useVariables(true);
|
|
6764
|
+
const inputValue = (_b = dynamicEntryId != null ? dynamicEntryId : (_a = selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
|
|
6765
|
+
const isDynamicEntryIdAvailable = React12.useMemo(
|
|
6766
|
+
() => Boolean(inputValue && hasReferencedVariables(inputValue)),
|
|
6767
|
+
[inputValue]
|
|
6768
|
+
);
|
|
6769
|
+
const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx64(
|
|
6770
|
+
ScrollableList,
|
|
6771
|
+
{
|
|
6772
|
+
role: "list",
|
|
6773
|
+
css: css35`
|
|
6774
|
+
> div {
|
|
6775
|
+
transition: max-height var(--duration-slow) var(--timing-ease-out);
|
|
6776
|
+
max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
|
|
6777
|
+
}
|
|
6778
|
+
`,
|
|
6779
|
+
children: /* @__PURE__ */ jsx64(DefaultResultList, {})
|
|
6780
|
+
}
|
|
6781
|
+
);
|
|
6782
|
+
const handleSelectedVariableChange = (selectedValue) => {
|
|
6783
|
+
var _a2;
|
|
6784
|
+
if (!selectedValue) {
|
|
6785
|
+
onSelectItem([]);
|
|
6786
|
+
return;
|
|
6787
|
+
}
|
|
6788
|
+
const { result, errors } = bindVariables({
|
|
6789
|
+
value: selectedValue,
|
|
6790
|
+
variables: flatVariables,
|
|
6791
|
+
errorPrefix: "Dynamic input"
|
|
6792
|
+
});
|
|
6793
|
+
if (!result) {
|
|
6794
|
+
onSelectItem([]);
|
|
6795
|
+
return;
|
|
6796
|
+
}
|
|
6797
|
+
const item = (_a2 = list.items) == null ? void 0 : _a2.find((i) => i.id === result);
|
|
6798
|
+
onSelectItem([
|
|
6799
|
+
{
|
|
6800
|
+
title: selectedValue,
|
|
6801
|
+
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`,
|
|
6802
|
+
// spread any matched list item, overriding the above default props
|
|
6803
|
+
...item,
|
|
6804
|
+
// we want to make sure the ID is our dynamic value
|
|
6805
|
+
id: selectedValue
|
|
6806
|
+
}
|
|
6807
|
+
]);
|
|
6808
|
+
if (hasReferencedVariables(selectedValue)) {
|
|
6809
|
+
onSetQuery({ ...query, dynamicEntryId: selectedValue });
|
|
6810
|
+
}
|
|
6811
|
+
};
|
|
6812
|
+
const showSearchList = !label || !isDynamicEntryIdAvailable || !enableDynamicInputToResultId;
|
|
6813
|
+
return /* @__PURE__ */ jsx64(IconsProvider, { children: /* @__PURE__ */ jsxs38(VerticalRhythm2, { children: [
|
|
6814
|
+
/* @__PURE__ */ jsx64(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: /* @__PURE__ */ jsxs38(VerticalRhythm2, { children: [
|
|
6815
|
+
label ? /* @__PURE__ */ jsx64(
|
|
6816
|
+
InputVariables,
|
|
6817
|
+
{
|
|
6818
|
+
id: "entryId",
|
|
6819
|
+
label,
|
|
6820
|
+
value: inputValue,
|
|
6821
|
+
onChange: (value) => {
|
|
6822
|
+
if (value === inputValue) {
|
|
6823
|
+
return;
|
|
6824
|
+
}
|
|
6825
|
+
handleSelectedVariableChange(value);
|
|
6826
|
+
},
|
|
6827
|
+
inputWhenNoVariables: /* @__PURE__ */ jsx64(Fragment14, { children: searchFilters }),
|
|
6828
|
+
disableVariables: !enableDynamicInputToResultId
|
|
6829
|
+
}
|
|
6830
|
+
) : searchFilters,
|
|
6831
|
+
showSearchList ? listItems : null
|
|
6832
|
+
] }) }),
|
|
6833
|
+
children
|
|
6834
|
+
] }) });
|
|
6835
|
+
};
|
|
6836
|
+
var DefaultResultList = () => {
|
|
6837
|
+
var _a, _b;
|
|
6838
|
+
const { list, isListLoading } = useObjectSearchContext();
|
|
6839
|
+
if (isListLoading || !list.items) {
|
|
6840
|
+
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ jsx64(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
6841
|
+
}
|
|
6842
|
+
if (((_a = list.items) == null ? void 0 : _a.length) === 0) {
|
|
6843
|
+
return /* @__PURE__ */ jsx64(Callout5, { type: "info", children: "No results were found" });
|
|
6844
|
+
}
|
|
6845
|
+
return (_b = list.items) == null ? void 0 : _b.map((item) => /* @__PURE__ */ jsx64(ObjectSearchListItem, { ...item }, item.id));
|
|
6846
|
+
};
|
|
6847
|
+
|
|
6848
|
+
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6849
|
+
import {
|
|
6850
|
+
DebouncedInputKeywordSearch,
|
|
6851
|
+
InputKeywordSearch as InputKeywordSearch2,
|
|
6852
|
+
InputSelect as InputSelect6,
|
|
6853
|
+
VerticalRhythm as VerticalRhythm3
|
|
6854
|
+
} from "@uniformdev/design-system";
|
|
6855
|
+
import { useMemo as useMemo15, useState as useState17 } from "react";
|
|
6856
|
+
import { useDebounce as useDebounce4 } from "react-use";
|
|
6857
|
+
|
|
6858
|
+
// src/utils/createLocationValidator.ts
|
|
6859
|
+
function createLocationValidator(setValue, validate) {
|
|
6860
|
+
return (dispatch) => setValue((previous) => {
|
|
6861
|
+
const { newValue, options } = dispatch(previous);
|
|
6862
|
+
return { newValue, options: validate(newValue, options) };
|
|
6863
|
+
});
|
|
6864
|
+
}
|
|
6865
|
+
|
|
6866
|
+
// src/utils/useContentDataResourceLocaleInfo.ts
|
|
6867
|
+
import { bindVariables as bindVariables2, createVariableReference as createVariableReference4, LOCALE_DYNAMIC_INPUT_NAME as LOCALE_DYNAMIC_INPUT_NAME2 } from "@uniformdev/canvas";
|
|
6868
|
+
import { useEffect as useEffect16, useRef as useRef15 } from "react";
|
|
6869
|
+
function useContentDataResourceLocaleInfo({
|
|
6870
|
+
locale,
|
|
6871
|
+
setLocale,
|
|
6872
|
+
dynamicInputs
|
|
6873
|
+
}) {
|
|
6874
|
+
var _a;
|
|
6875
|
+
const setLocaleRef = useRef15(setLocale);
|
|
6876
|
+
setLocaleRef.current = setLocale;
|
|
6877
|
+
const { flatVariables } = useVariables();
|
|
6878
|
+
const effectiveLocale = locale != null ? locale : dynamicInputs[LOCALE_DYNAMIC_INPUT_NAME2] ? createVariableReference4(LOCALE_DYNAMIC_INPUT_NAME2) : "";
|
|
6879
|
+
const boundLocale = (_a = bindVariables2({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
|
|
6880
|
+
useEffect16(() => {
|
|
6881
|
+
if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
|
|
6882
|
+
setLocaleRef.current(createVariableReference4(LOCALE_DYNAMIC_INPUT_NAME2));
|
|
6883
|
+
}
|
|
6884
|
+
}, [locale, effectiveLocale]);
|
|
6885
|
+
return { effectiveLocale, boundLocale: boundLocale ? boundLocale : void 0 };
|
|
6886
|
+
}
|
|
6887
|
+
|
|
6888
|
+
// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
|
|
6889
|
+
import { css as css36 } from "@emotion/react";
|
|
6890
|
+
var ObjectSearchFilterContainerLabel = css36`
|
|
6891
|
+
align-items: center;
|
|
6892
|
+
display: flex;
|
|
6893
|
+
font-size: var(--fs-sm);
|
|
6894
|
+
font-weight: var(--fw-bold);
|
|
6895
|
+
line-height: 1rem;
|
|
6896
|
+
margin-bottom: var(--spacing-sm);
|
|
6897
|
+
`;
|
|
6898
|
+
var ObjectSearchFilterContainer = css36`
|
|
6899
|
+
display: grid;
|
|
6900
|
+
gap: var(--spacing-base);
|
|
6901
|
+
`;
|
|
6902
|
+
var ObjectSearchFilterGrid = (gridColumns) => css36`
|
|
6903
|
+
display: grid;
|
|
6904
|
+
grid-template-columns: ${gridColumns};
|
|
6905
|
+
gap: var(--spacing-base);
|
|
6906
|
+
`;
|
|
6907
|
+
|
|
6908
|
+
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6909
|
+
import { jsx as jsx65, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
|
|
6910
|
+
var ObjectSearchFilter = ({
|
|
6911
|
+
requireContentType,
|
|
6912
|
+
typeSelectorAllTypesOptionText = "All content types",
|
|
6913
|
+
searchInputName = "searchText",
|
|
6914
|
+
searchInputPlaceholderText = "Enter keyword to narrow your results",
|
|
6915
|
+
selectLabel = "Content Type Select",
|
|
6916
|
+
localeFilterLabel = "Filter by locale",
|
|
6917
|
+
selectOptions
|
|
6918
|
+
}) => {
|
|
6919
|
+
var _a, _b, _c;
|
|
6920
|
+
const { query, onSetQuery, localeOptions, enableFilterByLocale } = useObjectSearchContext();
|
|
6921
|
+
const dynamicInputs = useDataResourceDynamicInputs();
|
|
6922
|
+
const { boundLocale = "", effectiveLocale } = useContentDataResourceLocaleInfo({
|
|
6923
|
+
locale: query.locale,
|
|
6924
|
+
dynamicInputs: dynamicInputs != null ? dynamicInputs : {},
|
|
6925
|
+
setLocale: (newLocale) => handleFilterChange({ locale: newLocale != null ? newLocale : "" })
|
|
6926
|
+
});
|
|
6927
|
+
const [searchState, setSearchState] = useState17({
|
|
6928
|
+
keyword: (_a = query.keyword) != null ? _a : "",
|
|
6929
|
+
contentType: (_b = query.contentType) != null ? _b : "",
|
|
6930
|
+
locale: (_c = query.locale) != null ? _c : ""
|
|
6931
|
+
});
|
|
6932
|
+
const handleFilterChange = (value) => {
|
|
6933
|
+
setSearchState((prev) => {
|
|
6934
|
+
return { ...prev, ...value };
|
|
6935
|
+
});
|
|
6936
|
+
};
|
|
6937
|
+
useDebounce4(
|
|
6938
|
+
() => {
|
|
6939
|
+
onSetQuery({ ...query, ...searchState });
|
|
6940
|
+
},
|
|
6941
|
+
500,
|
|
6942
|
+
[searchState]
|
|
6943
|
+
);
|
|
6944
|
+
const memoizedSelectOptions = useMemo15(() => {
|
|
6945
|
+
if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
|
|
6946
|
+
return [];
|
|
6947
|
+
}
|
|
6948
|
+
return [
|
|
6949
|
+
...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
|
|
6950
|
+
...selectOptions != null ? selectOptions : []
|
|
6951
|
+
];
|
|
6952
|
+
}, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
|
|
6953
|
+
const shouldRenderSelect = memoizedSelectOptions.length > 0;
|
|
6954
|
+
return /* @__PURE__ */ jsxs39(VerticalRhythm3, { gap: "base", children: [
|
|
6955
|
+
/* @__PURE__ */ jsxs39(
|
|
6956
|
+
"fieldset",
|
|
6957
|
+
{
|
|
6958
|
+
css: [
|
|
6959
|
+
ObjectSearchFilterContainer,
|
|
6960
|
+
ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
|
|
6961
|
+
],
|
|
6962
|
+
children: [
|
|
6963
|
+
memoizedSelectOptions.length ? /* @__PURE__ */ jsx65(
|
|
6964
|
+
InputSelect6,
|
|
6965
|
+
{
|
|
6966
|
+
label: selectLabel,
|
|
6967
|
+
showLabel: false,
|
|
6968
|
+
onChange: (e) => handleFilterChange({ contentType: e.target.value }),
|
|
6969
|
+
options: memoizedSelectOptions,
|
|
6970
|
+
value: query.contentType,
|
|
6971
|
+
"data-testid": "select-entry"
|
|
6972
|
+
}
|
|
6973
|
+
) : null,
|
|
6974
|
+
/* @__PURE__ */ jsx65(
|
|
6975
|
+
InputKeywordSearch2,
|
|
6976
|
+
{
|
|
6977
|
+
inputFieldName: searchInputName,
|
|
6978
|
+
placeholder: searchInputPlaceholderText,
|
|
6979
|
+
onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
|
|
6980
|
+
disabledFieldSubmission: true,
|
|
6981
|
+
onClear: () => handleFilterChange({ keyword: "" }),
|
|
6982
|
+
value: searchState.keyword
|
|
6983
|
+
}
|
|
6984
|
+
),
|
|
6985
|
+
/* @__PURE__ */ jsx65(
|
|
6986
|
+
DebouncedInputKeywordSearch,
|
|
6987
|
+
{
|
|
6988
|
+
inputFieldName: searchInputName,
|
|
6989
|
+
placeholder: searchInputPlaceholderText,
|
|
6990
|
+
onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
|
|
6991
|
+
disabledFieldSubmission: true,
|
|
6992
|
+
defaultValue: searchState.keyword,
|
|
6993
|
+
delay: 300
|
|
6994
|
+
}
|
|
6995
|
+
)
|
|
6996
|
+
]
|
|
6997
|
+
}
|
|
6998
|
+
),
|
|
6999
|
+
enableFilterByLocale && (localeOptions == null ? void 0 : localeOptions.length) && /* @__PURE__ */ jsx65(
|
|
7000
|
+
InputVariables,
|
|
7001
|
+
{
|
|
7002
|
+
label: localeFilterLabel,
|
|
7003
|
+
id: "locale",
|
|
7004
|
+
value: effectiveLocale,
|
|
7005
|
+
onChange: (newLocale) => handleFilterChange({ locale: newLocale != null ? newLocale : "" }),
|
|
7006
|
+
disableInlineMenu: true,
|
|
7007
|
+
inputWhenNoVariables: /* @__PURE__ */ jsx65(
|
|
7008
|
+
InputSelect6,
|
|
7009
|
+
{
|
|
7010
|
+
id: "locale",
|
|
7011
|
+
options: localeOptions,
|
|
7012
|
+
name: "locale",
|
|
7013
|
+
label: "",
|
|
7014
|
+
value: boundLocale,
|
|
7015
|
+
onChange: (e) => handleFilterChange({ locale: e.target.value })
|
|
7016
|
+
}
|
|
7017
|
+
)
|
|
7018
|
+
}
|
|
7019
|
+
)
|
|
7020
|
+
] });
|
|
7021
|
+
};
|
|
7022
|
+
|
|
7023
|
+
// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
|
|
7024
|
+
import { jsx as jsx66, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
|
|
7025
|
+
var ObjectSearchFilterContainer2 = ({ label, children }) => {
|
|
7026
|
+
return /* @__PURE__ */ jsxs40("div", { children: [
|
|
7027
|
+
label ? /* @__PURE__ */ jsx66("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
|
|
7028
|
+
/* @__PURE__ */ jsx66("div", { css: ObjectSearchFilterContainer, children })
|
|
7029
|
+
] });
|
|
7030
|
+
};
|
|
7031
|
+
|
|
6922
7032
|
// src/components/ObjectSearch/QueryFilter.tsx
|
|
6923
|
-
import { DebouncedInputKeywordSearch as DebouncedInputKeywordSearch2, Input as Input5, InputSelect as InputSelect7, VerticalRhythm as
|
|
6924
|
-
import { useEffect as
|
|
7033
|
+
import { DebouncedInputKeywordSearch as DebouncedInputKeywordSearch2, Input as Input5, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm4 } from "@uniformdev/design-system";
|
|
7034
|
+
import { useEffect as useEffect17, useState as useState18 } from "react";
|
|
6925
7035
|
import { jsx as jsx67, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
|
|
6926
7036
|
var QueryFilter = ({
|
|
6927
7037
|
requireContentType,
|
|
@@ -6962,12 +7072,12 @@ var QueryFilter = ({
|
|
|
6962
7072
|
setQueryState((prev) => ({ ...prev, ...value }));
|
|
6963
7073
|
onSetQuery({ ...query, ...value });
|
|
6964
7074
|
};
|
|
6965
|
-
|
|
7075
|
+
useEffect17(() => {
|
|
6966
7076
|
onSetQuery(queryState);
|
|
6967
7077
|
}, []);
|
|
6968
7078
|
return /* @__PURE__ */ jsxs41("fieldset", { children: [
|
|
6969
7079
|
/* @__PURE__ */ jsx67("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
|
|
6970
|
-
/* @__PURE__ */ jsx67("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs41(
|
|
7080
|
+
/* @__PURE__ */ jsx67("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs41(VerticalRhythm4, { children: [
|
|
6971
7081
|
/* @__PURE__ */ jsx67(
|
|
6972
7082
|
InputVariables,
|
|
6973
7083
|
{
|
|
@@ -7021,6 +7131,7 @@ var QueryFilter = ({
|
|
|
7021
7131
|
value: queryState.count.toString(10),
|
|
7022
7132
|
onChange: (newCount) => handleFilterChange({ count: newCount }),
|
|
7023
7133
|
disableInlineMenu: true,
|
|
7134
|
+
valueToResetTo: "5",
|
|
7024
7135
|
inputWhenNoVariables: /* @__PURE__ */ jsx67(
|
|
7025
7136
|
Input5,
|
|
7026
7137
|
{
|
|
@@ -7086,9 +7197,93 @@ var QueryFilter = ({
|
|
|
7086
7197
|
] });
|
|
7087
7198
|
};
|
|
7088
7199
|
|
|
7089
|
-
// src/components/
|
|
7090
|
-
import {
|
|
7200
|
+
// src/components/ObjectSearch/hooks/ControlledObjectSearchProvider.tsx
|
|
7201
|
+
import { useCallback as useCallback5, useDeferredValue as useDeferredValue2, useMemo as useMemo16 } from "react";
|
|
7091
7202
|
import { jsx as jsx68 } from "@emotion/react/jsx-runtime";
|
|
7203
|
+
var ControlledObjectSearchProvider = ({
|
|
7204
|
+
selectedItems,
|
|
7205
|
+
searchResultItems,
|
|
7206
|
+
selectedItemsLoading,
|
|
7207
|
+
searchResultListLoading,
|
|
7208
|
+
searchResultItemsLoading,
|
|
7209
|
+
onQueryChange,
|
|
7210
|
+
onSelectItemsChange,
|
|
7211
|
+
isMulti = false,
|
|
7212
|
+
children,
|
|
7213
|
+
query,
|
|
7214
|
+
enableFilterByLocale,
|
|
7215
|
+
localeOptions,
|
|
7216
|
+
dynamicEntryId
|
|
7217
|
+
}) => {
|
|
7218
|
+
const { flatVariables } = useVariables(true);
|
|
7219
|
+
const querySearchDeferred = useDeferredValue2(query);
|
|
7220
|
+
const onSetQuery = useCallback5(
|
|
7221
|
+
(value2) => {
|
|
7222
|
+
const newQuery = { ...query, ...value2 };
|
|
7223
|
+
onQueryChange(newQuery);
|
|
7224
|
+
},
|
|
7225
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
7226
|
+
[onQueryChange]
|
|
7227
|
+
);
|
|
7228
|
+
const onSelectItem = useCallback5(
|
|
7229
|
+
(selectedResult) => {
|
|
7230
|
+
if (Array.isArray(selectedResult)) {
|
|
7231
|
+
onSelectItemsChange(selectedResult);
|
|
7232
|
+
} else {
|
|
7233
|
+
if (selectedItems == null ? void 0 : selectedItems.some((item) => item.id === selectedResult.id)) {
|
|
7234
|
+
onSelectItemsChange(selectedItems.filter((item) => item.id !== selectedResult.id));
|
|
7235
|
+
} else {
|
|
7236
|
+
onSelectItemsChange([...selectedItems != null ? selectedItems : [], selectedResult]);
|
|
7237
|
+
}
|
|
7238
|
+
}
|
|
7239
|
+
},
|
|
7240
|
+
[onSelectItemsChange, selectedItems]
|
|
7241
|
+
);
|
|
7242
|
+
const onRemoveAllSelectedItems = useCallback5(() => {
|
|
7243
|
+
onSelectItemsChange([]);
|
|
7244
|
+
}, [onSelectItemsChange]);
|
|
7245
|
+
const list = useMemo16(() => ({ items: searchResultItems }), [searchResultItems]);
|
|
7246
|
+
const boundQuery = useMemo16(() => bindQuery(query, flatVariables), [query, flatVariables]);
|
|
7247
|
+
const value = useMemo16(
|
|
7248
|
+
() => ({
|
|
7249
|
+
boundQuery,
|
|
7250
|
+
onSetQuery,
|
|
7251
|
+
query: querySearchDeferred,
|
|
7252
|
+
onSelectItem,
|
|
7253
|
+
selectedListItems: selectedItems != null ? selectedItems : [],
|
|
7254
|
+
onRemoveAllSelectedItems,
|
|
7255
|
+
list,
|
|
7256
|
+
selectedItemsLoading,
|
|
7257
|
+
searchResultItemsLoading,
|
|
7258
|
+
searchResultListLoading,
|
|
7259
|
+
isMulti,
|
|
7260
|
+
localeOptions,
|
|
7261
|
+
enableFilterByLocale,
|
|
7262
|
+
dynamicEntryId
|
|
7263
|
+
}),
|
|
7264
|
+
[
|
|
7265
|
+
boundQuery,
|
|
7266
|
+
onSetQuery,
|
|
7267
|
+
querySearchDeferred,
|
|
7268
|
+
onSelectItem,
|
|
7269
|
+
selectedItems,
|
|
7270
|
+
selectedItemsLoading,
|
|
7271
|
+
searchResultItemsLoading,
|
|
7272
|
+
onRemoveAllSelectedItems,
|
|
7273
|
+
searchResultListLoading,
|
|
7274
|
+
list,
|
|
7275
|
+
isMulti,
|
|
7276
|
+
localeOptions,
|
|
7277
|
+
enableFilterByLocale,
|
|
7278
|
+
dynamicEntryId
|
|
7279
|
+
]
|
|
7280
|
+
);
|
|
7281
|
+
return /* @__PURE__ */ jsx68(ObjectSearchContext.Provider, { value, children });
|
|
7282
|
+
};
|
|
7283
|
+
|
|
7284
|
+
// src/components/ParamTypeDynamicDataProvider.tsx
|
|
7285
|
+
import { useEffect as useEffect18, useMemo as useMemo17, useRef as useRef16 } from "react";
|
|
7286
|
+
import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
|
|
7092
7287
|
function ParamTypeDynamicDataProvider(props) {
|
|
7093
7288
|
const { children } = props;
|
|
7094
7289
|
const {
|
|
@@ -7096,11 +7291,11 @@ function ParamTypeDynamicDataProvider(props) {
|
|
|
7096
7291
|
} = useMeshLocation("paramType");
|
|
7097
7292
|
const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
|
|
7098
7293
|
const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
|
|
7099
|
-
const variables =
|
|
7294
|
+
const variables = useMemo17(
|
|
7100
7295
|
() => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
|
|
7101
7296
|
[dynamicInputsAsVariables, connectedDataAsVariables]
|
|
7102
7297
|
);
|
|
7103
|
-
return /* @__PURE__ */
|
|
7298
|
+
return /* @__PURE__ */ jsx69(VariablesProvider, { value: variables, onChange: () => {
|
|
7104
7299
|
}, editVariableComponent: JsonMeshVariableEditor, children });
|
|
7105
7300
|
}
|
|
7106
7301
|
var JsonMeshVariableEditor = ({
|
|
@@ -7109,9 +7304,9 @@ var JsonMeshVariableEditor = ({
|
|
|
7109
7304
|
variable,
|
|
7110
7305
|
context
|
|
7111
7306
|
}) => {
|
|
7112
|
-
const sillyRef =
|
|
7307
|
+
const sillyRef = useRef16(false);
|
|
7113
7308
|
const { editConnectedData } = useMeshLocation("paramType");
|
|
7114
|
-
|
|
7309
|
+
useEffect18(() => {
|
|
7115
7310
|
if (sillyRef.current) {
|
|
7116
7311
|
return;
|
|
7117
7312
|
}
|
|
@@ -7139,36 +7334,6 @@ var JsonMeshVariableEditor = ({
|
|
|
7139
7334
|
return null;
|
|
7140
7335
|
};
|
|
7141
7336
|
|
|
7142
|
-
// src/utils/createLocationValidator.ts
|
|
7143
|
-
function createLocationValidator(setValue, validate) {
|
|
7144
|
-
return (dispatch) => setValue((previous) => {
|
|
7145
|
-
const { newValue, options } = dispatch(previous);
|
|
7146
|
-
return { newValue, options: validate(newValue, options) };
|
|
7147
|
-
});
|
|
7148
|
-
}
|
|
7149
|
-
|
|
7150
|
-
// src/utils/useContentDataResourceLocaleInfo.ts
|
|
7151
|
-
import { bindVariables as bindVariables2, createVariableReference as createVariableReference4, LOCALE_DYNAMIC_INPUT_NAME as LOCALE_DYNAMIC_INPUT_NAME2 } from "@uniformdev/canvas";
|
|
7152
|
-
import { useEffect as useEffect18, useRef as useRef16 } from "react";
|
|
7153
|
-
function useContentDataResourceLocaleInfo({
|
|
7154
|
-
locale,
|
|
7155
|
-
setLocale,
|
|
7156
|
-
dynamicInputs
|
|
7157
|
-
}) {
|
|
7158
|
-
var _a;
|
|
7159
|
-
const setLocaleRef = useRef16(setLocale);
|
|
7160
|
-
setLocaleRef.current = setLocale;
|
|
7161
|
-
const { flatVariables } = useVariables();
|
|
7162
|
-
const effectiveLocale = locale != null ? locale : dynamicInputs[LOCALE_DYNAMIC_INPUT_NAME2] ? createVariableReference4(LOCALE_DYNAMIC_INPUT_NAME2) : "";
|
|
7163
|
-
const boundLocale = (_a = bindVariables2({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
|
|
7164
|
-
useEffect18(() => {
|
|
7165
|
-
if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
|
|
7166
|
-
setLocaleRef.current(createVariableReference4(LOCALE_DYNAMIC_INPUT_NAME2));
|
|
7167
|
-
}
|
|
7168
|
-
}, [locale, effectiveLocale]);
|
|
7169
|
-
return { effectiveLocale, boundLocale: boundLocale ? boundLocale : void 0 };
|
|
7170
|
-
}
|
|
7171
|
-
|
|
7172
7337
|
// src/index.ts
|
|
7173
7338
|
import {
|
|
7174
7339
|
AddListButton as AddListButton2,
|
|
@@ -7178,7 +7343,7 @@ import {
|
|
|
7178
7343
|
Heading,
|
|
7179
7344
|
Input as Input6,
|
|
7180
7345
|
InputComboBox,
|
|
7181
|
-
InputKeywordSearch as
|
|
7346
|
+
InputKeywordSearch as InputKeywordSearch3,
|
|
7182
7347
|
InputSelect as InputSelect8,
|
|
7183
7348
|
InputToggle,
|
|
7184
7349
|
Label,
|
|
@@ -7213,11 +7378,13 @@ export {
|
|
|
7213
7378
|
AddListButton2 as AddListButton,
|
|
7214
7379
|
Button6 as Button,
|
|
7215
7380
|
Callout6 as Callout,
|
|
7381
|
+
ControlledObjectSearchProvider,
|
|
7216
7382
|
ControlledValuePlugin,
|
|
7217
7383
|
DISCONNECT_VARIABLE_COMMAND,
|
|
7218
7384
|
DamSelectedItem,
|
|
7219
7385
|
DataRefreshButton,
|
|
7220
7386
|
DataResourceDynamicInputProvider,
|
|
7387
|
+
DataResourceInputContext,
|
|
7221
7388
|
DataResourceVariablesList,
|
|
7222
7389
|
DataResourceVariablesListExplicit,
|
|
7223
7390
|
DataSourceEditor,
|
|
@@ -7232,7 +7399,7 @@ export {
|
|
|
7232
7399
|
icons_exports as Icons,
|
|
7233
7400
|
Input6 as Input,
|
|
7234
7401
|
InputComboBox,
|
|
7235
|
-
|
|
7402
|
+
InputKeywordSearch3 as InputKeywordSearch,
|
|
7236
7403
|
InputSelect8 as InputSelect,
|
|
7237
7404
|
InputToggle,
|
|
7238
7405
|
InputVariables,
|
|
@@ -7245,6 +7412,7 @@ export {
|
|
|
7245
7412
|
MeshApp,
|
|
7246
7413
|
OPEN_INSERT_VARIABLE_COMMAND,
|
|
7247
7414
|
ObjectSearchContainer,
|
|
7415
|
+
ObjectSearchContext,
|
|
7248
7416
|
ObjectSearchFilter,
|
|
7249
7417
|
ObjectSearchFilterContainer2 as ObjectSearchFilterContainer,
|
|
7250
7418
|
ObjectSearchListItem,
|
|
@@ -7302,6 +7470,7 @@ export {
|
|
|
7302
7470
|
VariablesPlugin,
|
|
7303
7471
|
VariablesProvider,
|
|
7304
7472
|
badgeIcon,
|
|
7473
|
+
bindQuery,
|
|
7305
7474
|
convertConnectedDataToVariable,
|
|
7306
7475
|
createLocationValidator,
|
|
7307
7476
|
damSelectItemImage,
|
|
@@ -7373,6 +7542,7 @@ export {
|
|
|
7373
7542
|
urlEncodeRequestUrl,
|
|
7374
7543
|
useConnectedDataAsVariables,
|
|
7375
7544
|
useContentDataResourceLocaleInfo,
|
|
7545
|
+
useDataResourceDynamicInputs,
|
|
7376
7546
|
useDynamicInputsAsVariables,
|
|
7377
7547
|
useMeshLocation,
|
|
7378
7548
|
useObjectSearchContext,
|