@uniformdev/mesh-sdk-react 19.79.1-alpha.11 → 19.79.1-alpha.8
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 +15 -19
- package/dist/index.d.ts +15 -19
- package/dist/index.esm.js +221 -196
- package/dist/index.js +242 -217
- package/dist/index.mjs +221 -196
- package/package.json +9 -9
package/dist/index.esm.js
CHANGED
|
@@ -2654,13 +2654,14 @@ function useConnectedDataAsVariables(connectedData) {
|
|
|
2654
2654
|
}
|
|
2655
2655
|
|
|
2656
2656
|
// src/hooks/useDynamicInputsAsVariables.tsx
|
|
2657
|
+
import { LOCALE_DYNAMIC_INPUT_NAME } from "@uniformdev/canvas";
|
|
2657
2658
|
import { useMemo as useMemo4 } from "react";
|
|
2658
2659
|
import { Fragment as Fragment4, jsx as jsx26 } from "@emotion/react/jsx-runtime";
|
|
2659
2660
|
function useDynamicInputsAsVariables(dynamicInputs) {
|
|
2660
2661
|
return useMemo4(() => {
|
|
2661
2662
|
const result = Object.entries(dynamicInputs).reduce(
|
|
2662
2663
|
(acc, [name, input3]) => {
|
|
2663
|
-
const source = `from ${input3.type === "path" ? "URL path" : "query string"}`;
|
|
2664
|
+
const source = `from ${name === LOCALE_DYNAMIC_INPUT_NAME ? "current locale" : input3.type === "path" ? "URL path" : "query string"}`;
|
|
2664
2665
|
acc[name] = {
|
|
2665
2666
|
readOnly: true,
|
|
2666
2667
|
type: input3.type,
|
|
@@ -2944,6 +2945,7 @@ function VariableChip({
|
|
|
2944
2945
|
tooltip,
|
|
2945
2946
|
reference,
|
|
2946
2947
|
onClick,
|
|
2948
|
+
clickToEdit,
|
|
2947
2949
|
isFresh,
|
|
2948
2950
|
selected,
|
|
2949
2951
|
disabled
|
|
@@ -2951,7 +2953,7 @@ function VariableChip({
|
|
|
2951
2953
|
const hasClickEvent = !!onClick;
|
|
2952
2954
|
const referenceIsValidFr = isFresh ? true : referenceIsValid;
|
|
2953
2955
|
const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? Fragment5 : UndefinedVariableReference;
|
|
2954
|
-
const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent ? "Click to edit" : void 0;
|
|
2956
|
+
const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
|
|
2955
2957
|
return /* @__PURE__ */ jsx29(
|
|
2956
2958
|
MultilineChip,
|
|
2957
2959
|
{
|
|
@@ -3968,6 +3970,7 @@ function VariableNodeComponent({
|
|
|
3968
3970
|
displayName: state.isLoading ? /* @__PURE__ */ jsx33(LoadingIndicator2, { size: "sm" }) : state.displayName,
|
|
3969
3971
|
selected: isSelected,
|
|
3970
3972
|
disabled: readOnly,
|
|
3973
|
+
clickToEdit: state.hasClickEvent,
|
|
3971
3974
|
onClick: state.hasClickEvent ? () => {
|
|
3972
3975
|
setSelected(!isSelected);
|
|
3973
3976
|
editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
|
|
@@ -4352,8 +4355,8 @@ function VariableField({
|
|
|
4352
4355
|
buttonProps: isActive ? { "aria-pressed": "true" } : void 0
|
|
4353
4356
|
}
|
|
4354
4357
|
) : null;
|
|
4355
|
-
return /* @__PURE__ */ jsxs20("div", { children: [
|
|
4356
|
-
/* @__PURE__ */ jsxs20("label", { htmlFor: id, css: labelText, children: [
|
|
4358
|
+
return /* @__PURE__ */ jsxs20("div", { "data-testid": "variable-field", children: [
|
|
4359
|
+
/* @__PURE__ */ jsxs20("label", { htmlFor: id, css: labelText, "data-testid": "field-name", children: [
|
|
4357
4360
|
variableSelector,
|
|
4358
4361
|
/* @__PURE__ */ jsx36("span", { children: label })
|
|
4359
4362
|
] }),
|
|
@@ -4459,6 +4462,7 @@ function VariablesComposer(props) {
|
|
|
4459
4462
|
/* @__PURE__ */ jsx37(
|
|
4460
4463
|
OnChangePlugin,
|
|
4461
4464
|
{
|
|
4465
|
+
ignoreSelectionChange: true,
|
|
4462
4466
|
onChange: (state) => {
|
|
4463
4467
|
editorState.current = state;
|
|
4464
4468
|
if (updateTimeout.current) {
|
|
@@ -5136,7 +5140,6 @@ var tableCellDragIcon = css25`
|
|
|
5136
5140
|
`;
|
|
5137
5141
|
var variableName = css25`
|
|
5138
5142
|
border: none;
|
|
5139
|
-
color: var(--brand-secondary-5);
|
|
5140
5143
|
font-weight: var(--fw-medium);
|
|
5141
5144
|
padding: 0;
|
|
5142
5145
|
background: none;
|
|
@@ -5246,7 +5249,7 @@ function VariablesList() {
|
|
|
5246
5249
|
{
|
|
5247
5250
|
onButtonClick: () => dispatch({ type: "edit", variable: "" }),
|
|
5248
5251
|
"aria-label": "Add variable",
|
|
5249
|
-
buttonText: "
|
|
5252
|
+
buttonText: "Add variable",
|
|
5250
5253
|
icon: "math-plus",
|
|
5251
5254
|
css: { marginLeft: "var(--spacing-md)" }
|
|
5252
5255
|
}
|
|
@@ -6141,9 +6144,9 @@ var DataRefreshButton = ({
|
|
|
6141
6144
|
};
|
|
6142
6145
|
|
|
6143
6146
|
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6144
|
-
import { css as
|
|
6147
|
+
import { css as css32 } from "@emotion/react";
|
|
6145
6148
|
import { bindVariables } from "@uniformdev/canvas";
|
|
6146
|
-
import { Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
|
|
6149
|
+
import { Callout as Callout5, Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
|
|
6147
6150
|
|
|
6148
6151
|
// src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
|
|
6149
6152
|
import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
|
|
@@ -6168,12 +6171,19 @@ var ObjectSearchContext = createContext5({
|
|
|
6168
6171
|
},
|
|
6169
6172
|
selectedListItems: [],
|
|
6170
6173
|
onRemoveAllSelectedItems: () => {
|
|
6171
|
-
}
|
|
6174
|
+
},
|
|
6175
|
+
isMulti: false
|
|
6172
6176
|
});
|
|
6173
|
-
var ObjectSearchProvider = ({
|
|
6177
|
+
var ObjectSearchProvider = ({
|
|
6178
|
+
currentlySelectedItems,
|
|
6179
|
+
isMulti = false,
|
|
6180
|
+
children,
|
|
6181
|
+
defaultQuery
|
|
6182
|
+
}) => {
|
|
6174
6183
|
const [query, setQuery] = useState15({
|
|
6175
6184
|
contentType: "",
|
|
6176
|
-
keyword: ""
|
|
6185
|
+
keyword: "",
|
|
6186
|
+
...defaultQuery
|
|
6177
6187
|
});
|
|
6178
6188
|
const { flatVariables } = useVariables(true);
|
|
6179
6189
|
const querySearchDeferred = useDeferredValue(query);
|
|
@@ -6224,6 +6234,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
|
|
|
6224
6234
|
selectedListItems: selectedItems,
|
|
6225
6235
|
onRemoveAllSelectedItems,
|
|
6226
6236
|
list,
|
|
6237
|
+
isMulti,
|
|
6227
6238
|
onSetList
|
|
6228
6239
|
}),
|
|
6229
6240
|
[
|
|
@@ -6234,6 +6245,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
|
|
|
6234
6245
|
selectedItems,
|
|
6235
6246
|
onRemoveAllSelectedItems,
|
|
6236
6247
|
list,
|
|
6248
|
+
isMulti,
|
|
6237
6249
|
onSetList
|
|
6238
6250
|
]
|
|
6239
6251
|
);
|
|
@@ -6254,8 +6266,148 @@ function bindQuery(query, inputs) {
|
|
|
6254
6266
|
return result;
|
|
6255
6267
|
}
|
|
6256
6268
|
|
|
6257
|
-
// src/components/ObjectSearch/
|
|
6269
|
+
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
6270
|
+
import { Chip, Popover } from "@uniformdev/design-system";
|
|
6271
|
+
|
|
6272
|
+
// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
|
|
6273
|
+
import { css as css31 } from "@emotion/react";
|
|
6274
|
+
import { skeletonLoading } from "@uniformdev/design-system";
|
|
6275
|
+
var ObjectListItemContainer = css31`
|
|
6276
|
+
align-items: center;
|
|
6277
|
+
border: 1px solid var(--gray-300);
|
|
6278
|
+
border-radius: var(--rounded-base);
|
|
6279
|
+
background: var(--white);
|
|
6280
|
+
display: grid;
|
|
6281
|
+
grid-template-columns: 1fr auto;
|
|
6282
|
+
padding: var(--spacing-sm);
|
|
6283
|
+
`;
|
|
6284
|
+
var ObjectListItemContainerDisabled = css31`
|
|
6285
|
+
opacity: var(--opacity-50);
|
|
6286
|
+
pointer-events: none;
|
|
6287
|
+
`;
|
|
6288
|
+
var ObjectListItemLoading = css31`
|
|
6289
|
+
animation: ${skeletonLoading} 1s linear infinite alternate;
|
|
6290
|
+
border-color: transparent;
|
|
6291
|
+
min-height: 42px;
|
|
6292
|
+
position: relative;
|
|
6293
|
+
|
|
6294
|
+
&:before,
|
|
6295
|
+
&:after {
|
|
6296
|
+
background: var(--gray-200);
|
|
6297
|
+
content: '';
|
|
6298
|
+
display: block;
|
|
6299
|
+
height: 1rem;
|
|
6300
|
+
}
|
|
6301
|
+
|
|
6302
|
+
&:before {
|
|
6303
|
+
border-radius: var(--rounded-base);
|
|
6304
|
+
width: 10rem;
|
|
6305
|
+
}
|
|
6306
|
+
|
|
6307
|
+
&:after {
|
|
6308
|
+
border-radius: var(--rounded-full);
|
|
6309
|
+
width: 1rem;
|
|
6310
|
+
}
|
|
6311
|
+
`;
|
|
6312
|
+
var ObjectListItemHeadingGroup = css31`
|
|
6313
|
+
align-items: center;
|
|
6314
|
+
display: grid;
|
|
6315
|
+
`;
|
|
6316
|
+
var ObjectListItemThumbnail = css31`
|
|
6317
|
+
width: 30px;
|
|
6318
|
+
object-fit: contain;
|
|
6319
|
+
`;
|
|
6320
|
+
var ObjectListItemTitle = css31`
|
|
6321
|
+
color: var(--brand-secondary-1);
|
|
6322
|
+
display: block;
|
|
6323
|
+
font-size: var(--fs-sm);
|
|
6324
|
+
`;
|
|
6325
|
+
var ObjectListItemSubtitle = css31`
|
|
6326
|
+
color: var(--gray-500);
|
|
6327
|
+
display: block;
|
|
6328
|
+
font-size: var(--fs-xs);
|
|
6329
|
+
line-height: 1;
|
|
6330
|
+
`;
|
|
6331
|
+
var ObjectListItemInfoContainer = css31`
|
|
6332
|
+
align-items: center;
|
|
6333
|
+
display: flex;
|
|
6334
|
+
gap: var(--spacing-sm);
|
|
6335
|
+
justify-content: center;
|
|
6336
|
+
`;
|
|
6337
|
+
var ObjectListItemControlledContent = css31`
|
|
6338
|
+
display: flex;
|
|
6339
|
+
gap: var(--spacing-sm);
|
|
6340
|
+
`;
|
|
6341
|
+
var ObjectListItemUnControlledContent = css31`
|
|
6342
|
+
margin-top: var(--spacing-sm);
|
|
6343
|
+
grid-column: 1 / -1;
|
|
6344
|
+
`;
|
|
6345
|
+
|
|
6346
|
+
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
6258
6347
|
import { jsx as jsx59, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
|
|
6348
|
+
var ObjectSearchListItem = ({
|
|
6349
|
+
id,
|
|
6350
|
+
title,
|
|
6351
|
+
contentType,
|
|
6352
|
+
image,
|
|
6353
|
+
imageUrl,
|
|
6354
|
+
popoverData,
|
|
6355
|
+
onSelect,
|
|
6356
|
+
isMulti,
|
|
6357
|
+
disabled,
|
|
6358
|
+
children
|
|
6359
|
+
}) => {
|
|
6360
|
+
const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
|
|
6361
|
+
const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
|
|
6362
|
+
const handleSelectItem = () => {
|
|
6363
|
+
var _a;
|
|
6364
|
+
const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
|
|
6365
|
+
const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
|
|
6366
|
+
if (isMulti === true || globalIsMulti) {
|
|
6367
|
+
return onSelectItem(selectedItem);
|
|
6368
|
+
}
|
|
6369
|
+
return onSelectItem([selectedItem]);
|
|
6370
|
+
};
|
|
6371
|
+
const selected = selectedListItems.some((item) => item.id === id);
|
|
6372
|
+
return /* @__PURE__ */ jsxs34(
|
|
6373
|
+
"div",
|
|
6374
|
+
{
|
|
6375
|
+
role: "listitem",
|
|
6376
|
+
css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
|
|
6377
|
+
"data-testid": "list-item",
|
|
6378
|
+
children: [
|
|
6379
|
+
/* @__PURE__ */ jsxs34(
|
|
6380
|
+
"div",
|
|
6381
|
+
{
|
|
6382
|
+
role: "button",
|
|
6383
|
+
onClick: handleSelectItem,
|
|
6384
|
+
css: ObjectListItemControlledContent,
|
|
6385
|
+
"aria-disabled": disabled,
|
|
6386
|
+
children: [
|
|
6387
|
+
!imageUrl ? null : /* @__PURE__ */ jsx59("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
|
|
6388
|
+
!image || imageUrl ? null : /* @__PURE__ */ jsx59("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
|
|
6389
|
+
/* @__PURE__ */ jsxs34("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
|
|
6390
|
+
!contentType ? null : /* @__PURE__ */ jsx59("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
|
|
6391
|
+
/* @__PURE__ */ jsx59("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
|
|
6392
|
+
] })
|
|
6393
|
+
]
|
|
6394
|
+
}
|
|
6395
|
+
),
|
|
6396
|
+
/* @__PURE__ */ jsxs34("div", { css: ObjectListItemInfoContainer, children: [
|
|
6397
|
+
selected ? /* @__PURE__ */ jsx59(Chip, { text: "selected", size: "xs" }) : null,
|
|
6398
|
+
!popoverData ? null : /* @__PURE__ */ jsx59(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
|
|
6399
|
+
] }),
|
|
6400
|
+
!children ? null : /* @__PURE__ */ jsx59("div", { css: ObjectListItemUnControlledContent, children })
|
|
6401
|
+
]
|
|
6402
|
+
}
|
|
6403
|
+
);
|
|
6404
|
+
};
|
|
6405
|
+
var ObjectSearchListItemLoadingSkeleton = () => {
|
|
6406
|
+
return /* @__PURE__ */ jsx59("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
|
|
6407
|
+
};
|
|
6408
|
+
|
|
6409
|
+
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6410
|
+
import { jsx as jsx60, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
|
|
6259
6411
|
var ObjectSearchContainer = ({
|
|
6260
6412
|
label,
|
|
6261
6413
|
enableDynamicInputToResultId,
|
|
@@ -6267,21 +6419,22 @@ var ObjectSearchContainer = ({
|
|
|
6267
6419
|
const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
|
|
6268
6420
|
const { flatVariables } = useVariables(true);
|
|
6269
6421
|
const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
|
|
6270
|
-
const
|
|
6422
|
+
const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx60(
|
|
6423
|
+
ScrollableList,
|
|
6424
|
+
{
|
|
6425
|
+
role: "list",
|
|
6426
|
+
css: css32`
|
|
6427
|
+
> div {
|
|
6428
|
+
transition: max-height var(--duration-slow) var(--timing-ease-out);
|
|
6429
|
+
max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
|
|
6430
|
+
}
|
|
6431
|
+
`,
|
|
6432
|
+
children: /* @__PURE__ */ jsx60(DefaultResultList, {})
|
|
6433
|
+
}
|
|
6434
|
+
);
|
|
6435
|
+
const body = /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
|
|
6271
6436
|
searchFilters,
|
|
6272
|
-
|
|
6273
|
-
ScrollableList,
|
|
6274
|
-
{
|
|
6275
|
-
role: "list",
|
|
6276
|
-
css: css31`
|
|
6277
|
-
> div {
|
|
6278
|
-
transition: max-height var(--duration-slow) var(--timing-ease-out);
|
|
6279
|
-
max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
|
|
6280
|
-
}
|
|
6281
|
-
`,
|
|
6282
|
-
children: resultList
|
|
6283
|
-
}
|
|
6284
|
-
)
|
|
6437
|
+
listItems
|
|
6285
6438
|
] });
|
|
6286
6439
|
const handleSelectedVariableChange = (selectedValue) => {
|
|
6287
6440
|
var _a2;
|
|
@@ -6310,8 +6463,8 @@ var ObjectSearchContainer = ({
|
|
|
6310
6463
|
}
|
|
6311
6464
|
]);
|
|
6312
6465
|
};
|
|
6313
|
-
return /* @__PURE__ */
|
|
6314
|
-
/* @__PURE__ */
|
|
6466
|
+
return /* @__PURE__ */ jsx60(IconsProvider, { children: /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
|
|
6467
|
+
/* @__PURE__ */ jsx60(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx60(
|
|
6315
6468
|
InputVariables,
|
|
6316
6469
|
{
|
|
6317
6470
|
label,
|
|
@@ -6329,14 +6482,25 @@ var ObjectSearchContainer = ({
|
|
|
6329
6482
|
children
|
|
6330
6483
|
] }) });
|
|
6331
6484
|
};
|
|
6485
|
+
var DefaultResultList = () => {
|
|
6486
|
+
var _a;
|
|
6487
|
+
const { list } = useObjectSearchContext();
|
|
6488
|
+
if (!list.items) {
|
|
6489
|
+
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ jsx60(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
6490
|
+
}
|
|
6491
|
+
if (list.items.length === 0) {
|
|
6492
|
+
return /* @__PURE__ */ jsx60(Callout5, { type: "info", children: "No results were found" });
|
|
6493
|
+
}
|
|
6494
|
+
return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx60(ObjectSearchListItem, { ...item }, item.id));
|
|
6495
|
+
};
|
|
6332
6496
|
|
|
6333
6497
|
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6334
6498
|
import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
|
|
6335
6499
|
import { useMemo as useMemo15, useState as useState16 } from "react";
|
|
6336
6500
|
|
|
6337
6501
|
// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
|
|
6338
|
-
import { css as
|
|
6339
|
-
var ObjectSearchFilterContainerLabel =
|
|
6502
|
+
import { css as css33 } from "@emotion/react";
|
|
6503
|
+
var ObjectSearchFilterContainerLabel = css33`
|
|
6340
6504
|
align-items: center;
|
|
6341
6505
|
display: flex;
|
|
6342
6506
|
font-size: var(--fs-sm);
|
|
@@ -6344,18 +6508,18 @@ var ObjectSearchFilterContainerLabel = css32`
|
|
|
6344
6508
|
line-height: 1rem;
|
|
6345
6509
|
margin-bottom: var(--spacing-sm);
|
|
6346
6510
|
`;
|
|
6347
|
-
var ObjectSearchFilterContainer =
|
|
6511
|
+
var ObjectSearchFilterContainer = css33`
|
|
6348
6512
|
display: grid;
|
|
6349
6513
|
gap: var(--spacing-base);
|
|
6350
6514
|
`;
|
|
6351
|
-
var ObjectSearchFilterGrid = (gridColumns) =>
|
|
6515
|
+
var ObjectSearchFilterGrid = (gridColumns) => css33`
|
|
6352
6516
|
display: grid;
|
|
6353
6517
|
grid-template-columns: ${gridColumns};
|
|
6354
6518
|
gap: var(--spacing-base);
|
|
6355
6519
|
`;
|
|
6356
6520
|
|
|
6357
6521
|
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6358
|
-
import { jsx as
|
|
6522
|
+
import { jsx as jsx61, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
|
|
6359
6523
|
var ObjectSearchFilter = ({
|
|
6360
6524
|
requireContentType,
|
|
6361
6525
|
typeSelectorAllTypesOptionText = "All content types",
|
|
@@ -6364,10 +6528,11 @@ var ObjectSearchFilter = ({
|
|
|
6364
6528
|
selectLabel = "Content Type Select",
|
|
6365
6529
|
selectOptions
|
|
6366
6530
|
}) => {
|
|
6531
|
+
var _a, _b;
|
|
6367
6532
|
const { query, onSetQuery } = useObjectSearchContext();
|
|
6368
6533
|
const [searchState, setSearchState] = useState16({
|
|
6369
|
-
contentType: "",
|
|
6370
|
-
keyword: ""
|
|
6534
|
+
contentType: (_a = query.contentType) != null ? _a : "",
|
|
6535
|
+
keyword: (_b = query.keyword) != null ? _b : ""
|
|
6371
6536
|
});
|
|
6372
6537
|
const handleFilterChange = (value) => {
|
|
6373
6538
|
setSearchState((prev) => {
|
|
@@ -6382,13 +6547,13 @@ var ObjectSearchFilter = ({
|
|
|
6382
6547
|
return [
|
|
6383
6548
|
...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
|
|
6384
6549
|
...selectOptions ? selectOptions.map((option) => {
|
|
6385
|
-
var
|
|
6386
|
-
return { name: option == null ? void 0 : option.name, label: (
|
|
6550
|
+
var _a2;
|
|
6551
|
+
return { name: option == null ? void 0 : option.name, label: (_a2 = option.label) != null ? _a2 : option == null ? void 0 : option.name, id: option.id };
|
|
6387
6552
|
}) : []
|
|
6388
6553
|
];
|
|
6389
6554
|
}, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
|
|
6390
6555
|
const shouldRenderSelect = memoizedSelectOptions.length > 0;
|
|
6391
|
-
return /* @__PURE__ */
|
|
6556
|
+
return /* @__PURE__ */ jsxs36(
|
|
6392
6557
|
"fieldset",
|
|
6393
6558
|
{
|
|
6394
6559
|
css: [
|
|
@@ -6396,7 +6561,7 @@ var ObjectSearchFilter = ({
|
|
|
6396
6561
|
ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
|
|
6397
6562
|
],
|
|
6398
6563
|
children: [
|
|
6399
|
-
memoizedSelectOptions.length ? /* @__PURE__ */
|
|
6564
|
+
memoizedSelectOptions.length ? /* @__PURE__ */ jsx61(
|
|
6400
6565
|
InputSelect6,
|
|
6401
6566
|
{
|
|
6402
6567
|
label: selectLabel,
|
|
@@ -6406,7 +6571,7 @@ var ObjectSearchFilter = ({
|
|
|
6406
6571
|
value: query.contentType
|
|
6407
6572
|
}
|
|
6408
6573
|
) : null,
|
|
6409
|
-
/* @__PURE__ */
|
|
6574
|
+
/* @__PURE__ */ jsx61(
|
|
6410
6575
|
InputKeywordSearch2,
|
|
6411
6576
|
{
|
|
6412
6577
|
inputFieldName: searchInputName,
|
|
@@ -6423,154 +6588,14 @@ var ObjectSearchFilter = ({
|
|
|
6423
6588
|
};
|
|
6424
6589
|
|
|
6425
6590
|
// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
|
|
6426
|
-
import { jsx as
|
|
6591
|
+
import { jsx as jsx62, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
|
|
6427
6592
|
var ObjectSearchFilterContainer2 = ({ label, children }) => {
|
|
6428
|
-
return /* @__PURE__ */
|
|
6429
|
-
label ? /* @__PURE__ */
|
|
6430
|
-
/* @__PURE__ */
|
|
6593
|
+
return /* @__PURE__ */ jsxs37("div", { children: [
|
|
6594
|
+
label ? /* @__PURE__ */ jsx62("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
|
|
6595
|
+
/* @__PURE__ */ jsx62("div", { css: ObjectSearchFilterContainer, children })
|
|
6431
6596
|
] });
|
|
6432
6597
|
};
|
|
6433
6598
|
|
|
6434
|
-
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
6435
|
-
import { Chip, Popover } from "@uniformdev/design-system";
|
|
6436
|
-
|
|
6437
|
-
// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
|
|
6438
|
-
import { css as css33 } from "@emotion/react";
|
|
6439
|
-
import { skeletonLoading } from "@uniformdev/design-system";
|
|
6440
|
-
var ObjectListItemContainer = css33`
|
|
6441
|
-
align-items: center;
|
|
6442
|
-
border: 1px solid var(--gray-300);
|
|
6443
|
-
border-radius: var(--rounded-base);
|
|
6444
|
-
background: var(--white);
|
|
6445
|
-
display: grid;
|
|
6446
|
-
grid-template-columns: 1fr auto;
|
|
6447
|
-
padding: var(--spacing-sm);
|
|
6448
|
-
`;
|
|
6449
|
-
var ObjectListItemContainerDisabled = css33`
|
|
6450
|
-
opacity: var(--opacity-50);
|
|
6451
|
-
pointer-events: none;
|
|
6452
|
-
`;
|
|
6453
|
-
var ObjectListItemLoading = css33`
|
|
6454
|
-
animation: ${skeletonLoading} 1s linear infinite alternate;
|
|
6455
|
-
border-color: transparent;
|
|
6456
|
-
min-height: 42px;
|
|
6457
|
-
position: relative;
|
|
6458
|
-
|
|
6459
|
-
&:before,
|
|
6460
|
-
&:after {
|
|
6461
|
-
background: var(--gray-200);
|
|
6462
|
-
content: '';
|
|
6463
|
-
display: block;
|
|
6464
|
-
height: 1rem;
|
|
6465
|
-
}
|
|
6466
|
-
|
|
6467
|
-
&:before {
|
|
6468
|
-
border-radius: var(--rounded-base);
|
|
6469
|
-
width: 10rem;
|
|
6470
|
-
}
|
|
6471
|
-
|
|
6472
|
-
&:after {
|
|
6473
|
-
border-radius: var(--rounded-full);
|
|
6474
|
-
width: 1rem;
|
|
6475
|
-
}
|
|
6476
|
-
`;
|
|
6477
|
-
var ObjectListItemHeadingGroup = css33`
|
|
6478
|
-
align-items: center;
|
|
6479
|
-
display: grid;
|
|
6480
|
-
`;
|
|
6481
|
-
var ObjectListItemThumbnail = css33`
|
|
6482
|
-
width: 30px;
|
|
6483
|
-
object-fit: contain;
|
|
6484
|
-
`;
|
|
6485
|
-
var ObjectListItemTitle = css33`
|
|
6486
|
-
color: var(--brand-secondary-1);
|
|
6487
|
-
display: block;
|
|
6488
|
-
font-size: var(--fs-sm);
|
|
6489
|
-
`;
|
|
6490
|
-
var ObjectListItemSubtitle = css33`
|
|
6491
|
-
color: var(--gray-500);
|
|
6492
|
-
display: block;
|
|
6493
|
-
font-size: var(--fs-xs);
|
|
6494
|
-
line-height: 1;
|
|
6495
|
-
`;
|
|
6496
|
-
var ObjectListItemInfoContainer = css33`
|
|
6497
|
-
align-items: center;
|
|
6498
|
-
display: flex;
|
|
6499
|
-
gap: var(--spacing-sm);
|
|
6500
|
-
justify-content: center;
|
|
6501
|
-
`;
|
|
6502
|
-
var ObjectListItemControlledContent = css33`
|
|
6503
|
-
display: flex;
|
|
6504
|
-
gap: var(--spacing-sm);
|
|
6505
|
-
`;
|
|
6506
|
-
var ObjectListItemUnControlledContent = css33`
|
|
6507
|
-
margin-top: var(--spacing-sm);
|
|
6508
|
-
grid-column: 1 / -1;
|
|
6509
|
-
`;
|
|
6510
|
-
|
|
6511
|
-
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
6512
|
-
import { jsx as jsx62, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
|
|
6513
|
-
var ObjectSearchListItem = ({
|
|
6514
|
-
id,
|
|
6515
|
-
title,
|
|
6516
|
-
contentType,
|
|
6517
|
-
image,
|
|
6518
|
-
imageUrl,
|
|
6519
|
-
popoverData,
|
|
6520
|
-
onSelect,
|
|
6521
|
-
isMulti = false,
|
|
6522
|
-
disabled,
|
|
6523
|
-
children
|
|
6524
|
-
}) => {
|
|
6525
|
-
const { onSelectItem, selectedListItems } = useObjectSearchContext();
|
|
6526
|
-
const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
|
|
6527
|
-
const handleSelectItem = () => {
|
|
6528
|
-
var _a;
|
|
6529
|
-
const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
|
|
6530
|
-
const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
|
|
6531
|
-
if (isMulti) {
|
|
6532
|
-
return onSelectItem(selectedItem);
|
|
6533
|
-
}
|
|
6534
|
-
return onSelectItem([selectedItem]);
|
|
6535
|
-
};
|
|
6536
|
-
const selected = selectedListItems.some((item) => item.id === id);
|
|
6537
|
-
return /* @__PURE__ */ jsxs37(
|
|
6538
|
-
"div",
|
|
6539
|
-
{
|
|
6540
|
-
role: "listitem",
|
|
6541
|
-
css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
|
|
6542
|
-
"data-testid": "list-item",
|
|
6543
|
-
children: [
|
|
6544
|
-
/* @__PURE__ */ jsxs37(
|
|
6545
|
-
"div",
|
|
6546
|
-
{
|
|
6547
|
-
role: "button",
|
|
6548
|
-
onClick: handleSelectItem,
|
|
6549
|
-
css: ObjectListItemControlledContent,
|
|
6550
|
-
"aria-disabled": disabled,
|
|
6551
|
-
children: [
|
|
6552
|
-
!imageUrl ? null : /* @__PURE__ */ jsx62("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
|
|
6553
|
-
!image || imageUrl ? null : /* @__PURE__ */ jsx62("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
|
|
6554
|
-
/* @__PURE__ */ jsxs37("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
|
|
6555
|
-
!contentType ? null : /* @__PURE__ */ jsx62("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
|
|
6556
|
-
/* @__PURE__ */ jsx62("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
|
|
6557
|
-
] })
|
|
6558
|
-
]
|
|
6559
|
-
}
|
|
6560
|
-
),
|
|
6561
|
-
/* @__PURE__ */ jsxs37("div", { css: ObjectListItemInfoContainer, children: [
|
|
6562
|
-
selected ? /* @__PURE__ */ jsx62(Chip, { text: "selected", size: "xs" }) : null,
|
|
6563
|
-
!popoverData ? null : /* @__PURE__ */ jsx62(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
|
|
6564
|
-
] }),
|
|
6565
|
-
!children ? null : /* @__PURE__ */ jsx62("div", { css: ObjectListItemUnControlledContent, children })
|
|
6566
|
-
]
|
|
6567
|
-
}
|
|
6568
|
-
);
|
|
6569
|
-
};
|
|
6570
|
-
var ObjectSearchListItemLoadingSkeleton = () => {
|
|
6571
|
-
return /* @__PURE__ */ jsx62("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
|
|
6572
|
-
};
|
|
6573
|
-
|
|
6574
6599
|
// src/components/ObjectSearch/ObjectSearchResultItem.tsx
|
|
6575
6600
|
import { Badge, Button as Button4, Popover as Popover2 } from "@uniformdev/design-system";
|
|
6576
6601
|
import { format as timeagoFormat } from "timeago.js";
|
|
@@ -6718,13 +6743,13 @@ var ObjectSearchResultItem = ({
|
|
|
6718
6743
|
onSelectItem({ id, title: id });
|
|
6719
6744
|
onRemove == null ? void 0 : onRemove();
|
|
6720
6745
|
};
|
|
6721
|
-
return /* @__PURE__ */ jsxs39("div", { css: ObjectSearchResultItemContainer, children: [
|
|
6746
|
+
return /* @__PURE__ */ jsxs39("div", { css: ObjectSearchResultItemContainer, "data-testid": "search-result-item", children: [
|
|
6722
6747
|
disableDnD ? null : /* @__PURE__ */ jsx64("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
|
|
6723
6748
|
/* @__PURE__ */ jsx64("div", { children: /* @__PURE__ */ jsxs39("div", { css: ObjectSearchContentContainer, children: [
|
|
6724
6749
|
!imageUrl ? null : /* @__PURE__ */ jsx64("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
|
|
6725
6750
|
/* @__PURE__ */ jsxs39("div", { children: [
|
|
6726
|
-
/* @__PURE__ */ jsx64("span", { css: ObjectSearchResultItemSubtitle, children: formatedContentType }),
|
|
6727
|
-
/* @__PURE__ */ jsxs39("span", { role: "heading", css: ObjectSearchResultItemTitle, children: [
|
|
6751
|
+
/* @__PURE__ */ jsx64("span", { css: ObjectSearchResultItemSubtitle, "data-testid": "sub-title", children: formatedContentType }),
|
|
6752
|
+
/* @__PURE__ */ jsxs39("span", { role: "heading", css: ObjectSearchResultItemTitle, "data-testid": "title", children: [
|
|
6728
6753
|
title != null ? title : name,
|
|
6729
6754
|
!popoverData ? null : /* @__PURE__ */ jsx64(Popover2, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
|
|
6730
6755
|
] }),
|
|
@@ -6894,14 +6919,14 @@ var QueryFilter = ({
|
|
|
6894
6919
|
],
|
|
6895
6920
|
children
|
|
6896
6921
|
}) => {
|
|
6897
|
-
var _a, _b, _c, _d;
|
|
6922
|
+
var _a, _b, _c, _d, _e, _f;
|
|
6898
6923
|
const { query, onSetQuery } = useObjectSearchContext();
|
|
6899
6924
|
const [queryState, setQueryState] = useState17({
|
|
6900
|
-
contentType: "",
|
|
6901
|
-
keyword: "",
|
|
6925
|
+
contentType: (_a = query.contentType) != null ? _a : "",
|
|
6926
|
+
keyword: (_b = query.contentType) != null ? _b : "",
|
|
6902
6927
|
count: countValue != null ? countValue : 5,
|
|
6903
|
-
sortBy: (
|
|
6904
|
-
sortOrder: (
|
|
6928
|
+
sortBy: (_c = sortOptions[0].id) != null ? _c : "",
|
|
6929
|
+
sortOrder: (_d = sortOrderOptions[0].id) != null ? _d : ""
|
|
6905
6930
|
});
|
|
6906
6931
|
const handleFilterChange = (value) => {
|
|
6907
6932
|
setQueryState((prev) => ({ ...prev, ...value }));
|
|
@@ -6917,7 +6942,7 @@ var QueryFilter = ({
|
|
|
6917
6942
|
InputVariables,
|
|
6918
6943
|
{
|
|
6919
6944
|
label: searchInputLabel,
|
|
6920
|
-
value: (
|
|
6945
|
+
value: (_e = queryState.keyword) != null ? _e : "",
|
|
6921
6946
|
onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
|
|
6922
6947
|
disableInlineMenu: true,
|
|
6923
6948
|
id: "qf_searchText",
|
|
@@ -6941,7 +6966,7 @@ var QueryFilter = ({
|
|
|
6941
6966
|
{
|
|
6942
6967
|
label: contentTypeLabel,
|
|
6943
6968
|
id: "qf_contentType",
|
|
6944
|
-
value: (
|
|
6969
|
+
value: (_f = queryState.contentType) != null ? _f : "",
|
|
6945
6970
|
onChange: (newType) => handleFilterChange({ contentType: newType }),
|
|
6946
6971
|
disableInlineMenu: true,
|
|
6947
6972
|
inputWhenNoVariables: /* @__PURE__ */ jsx66(
|
|
@@ -7114,7 +7139,7 @@ function createLocationValidator(setValue, validate) {
|
|
|
7114
7139
|
import {
|
|
7115
7140
|
AddListButton as AddListButton2,
|
|
7116
7141
|
Button as Button6,
|
|
7117
|
-
Callout as
|
|
7142
|
+
Callout as Callout6,
|
|
7118
7143
|
DrawerContent,
|
|
7119
7144
|
Heading,
|
|
7120
7145
|
Input as Input6,
|
|
@@ -7153,7 +7178,7 @@ export {
|
|
|
7153
7178
|
$isVariableNode,
|
|
7154
7179
|
AddListButton2 as AddListButton,
|
|
7155
7180
|
Button6 as Button,
|
|
7156
|
-
|
|
7181
|
+
Callout6 as Callout,
|
|
7157
7182
|
ControlledValuePlugin,
|
|
7158
7183
|
DISCONNECT_VARIABLE_COMMAND,
|
|
7159
7184
|
DamSelectedItem,
|