@uniformdev/mesh-sdk-react 19.80.1-alpha.126 → 19.80.1-alpha.170
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 +9 -2
- package/dist/index.d.ts +9 -2
- package/dist/index.esm.js +204 -182
- package/dist/index.js +209 -187
- package/dist/index.mjs +204 -182
- package/package.json +7 -7
package/dist/index.js
CHANGED
|
@@ -6278,9 +6278,9 @@ var DataRefreshButton = ({
|
|
|
6278
6278
|
};
|
|
6279
6279
|
|
|
6280
6280
|
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6281
|
-
var
|
|
6281
|
+
var import_react66 = require("@emotion/react");
|
|
6282
6282
|
var import_canvas8 = require("@uniformdev/canvas");
|
|
6283
|
-
var
|
|
6283
|
+
var import_design_system35 = require("@uniformdev/design-system");
|
|
6284
6284
|
|
|
6285
6285
|
// src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
|
|
6286
6286
|
var import_canvas7 = require("@uniformdev/canvas");
|
|
@@ -6298,12 +6298,19 @@ var ObjectSearchContext = (0, import_react64.createContext)({
|
|
|
6298
6298
|
},
|
|
6299
6299
|
selectedListItems: [],
|
|
6300
6300
|
onRemoveAllSelectedItems: () => {
|
|
6301
|
-
}
|
|
6301
|
+
},
|
|
6302
|
+
isMulti: false
|
|
6302
6303
|
});
|
|
6303
|
-
var ObjectSearchProvider = ({
|
|
6304
|
+
var ObjectSearchProvider = ({
|
|
6305
|
+
currentlySelectedItems,
|
|
6306
|
+
isMulti = false,
|
|
6307
|
+
children,
|
|
6308
|
+
defaultQuery
|
|
6309
|
+
}) => {
|
|
6304
6310
|
const [query, setQuery] = (0, import_react64.useState)({
|
|
6305
6311
|
contentType: "",
|
|
6306
|
-
keyword: ""
|
|
6312
|
+
keyword: "",
|
|
6313
|
+
...defaultQuery
|
|
6307
6314
|
});
|
|
6308
6315
|
const { flatVariables } = useVariables(true);
|
|
6309
6316
|
const querySearchDeferred = (0, import_react64.useDeferredValue)(query);
|
|
@@ -6354,6 +6361,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
|
|
|
6354
6361
|
selectedListItems: selectedItems,
|
|
6355
6362
|
onRemoveAllSelectedItems,
|
|
6356
6363
|
list,
|
|
6364
|
+
isMulti,
|
|
6357
6365
|
onSetList
|
|
6358
6366
|
}),
|
|
6359
6367
|
[
|
|
@@ -6364,6 +6372,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
|
|
|
6364
6372
|
selectedItems,
|
|
6365
6373
|
onRemoveAllSelectedItems,
|
|
6366
6374
|
list,
|
|
6375
|
+
isMulti,
|
|
6367
6376
|
onSetList
|
|
6368
6377
|
]
|
|
6369
6378
|
);
|
|
@@ -6384,8 +6393,148 @@ function bindQuery(query, inputs) {
|
|
|
6384
6393
|
return result;
|
|
6385
6394
|
}
|
|
6386
6395
|
|
|
6387
|
-
// src/components/ObjectSearch/
|
|
6396
|
+
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
6397
|
+
var import_design_system34 = require("@uniformdev/design-system");
|
|
6398
|
+
|
|
6399
|
+
// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
|
|
6400
|
+
var import_react65 = require("@emotion/react");
|
|
6401
|
+
var import_design_system33 = require("@uniformdev/design-system");
|
|
6402
|
+
var ObjectListItemContainer = import_react65.css`
|
|
6403
|
+
align-items: center;
|
|
6404
|
+
border: 1px solid var(--gray-300);
|
|
6405
|
+
border-radius: var(--rounded-base);
|
|
6406
|
+
background: var(--white);
|
|
6407
|
+
display: grid;
|
|
6408
|
+
grid-template-columns: 1fr auto;
|
|
6409
|
+
padding: var(--spacing-sm);
|
|
6410
|
+
`;
|
|
6411
|
+
var ObjectListItemContainerDisabled = import_react65.css`
|
|
6412
|
+
opacity: var(--opacity-50);
|
|
6413
|
+
pointer-events: none;
|
|
6414
|
+
`;
|
|
6415
|
+
var ObjectListItemLoading = import_react65.css`
|
|
6416
|
+
animation: ${import_design_system33.skeletonLoading} 1s linear infinite alternate;
|
|
6417
|
+
border-color: transparent;
|
|
6418
|
+
min-height: 42px;
|
|
6419
|
+
position: relative;
|
|
6420
|
+
|
|
6421
|
+
&:before,
|
|
6422
|
+
&:after {
|
|
6423
|
+
background: var(--gray-200);
|
|
6424
|
+
content: '';
|
|
6425
|
+
display: block;
|
|
6426
|
+
height: 1rem;
|
|
6427
|
+
}
|
|
6428
|
+
|
|
6429
|
+
&:before {
|
|
6430
|
+
border-radius: var(--rounded-base);
|
|
6431
|
+
width: 10rem;
|
|
6432
|
+
}
|
|
6433
|
+
|
|
6434
|
+
&:after {
|
|
6435
|
+
border-radius: var(--rounded-full);
|
|
6436
|
+
width: 1rem;
|
|
6437
|
+
}
|
|
6438
|
+
`;
|
|
6439
|
+
var ObjectListItemHeadingGroup = import_react65.css`
|
|
6440
|
+
align-items: center;
|
|
6441
|
+
display: grid;
|
|
6442
|
+
`;
|
|
6443
|
+
var ObjectListItemThumbnail = import_react65.css`
|
|
6444
|
+
width: 30px;
|
|
6445
|
+
object-fit: contain;
|
|
6446
|
+
`;
|
|
6447
|
+
var ObjectListItemTitle = import_react65.css`
|
|
6448
|
+
color: var(--brand-secondary-1);
|
|
6449
|
+
display: block;
|
|
6450
|
+
font-size: var(--fs-sm);
|
|
6451
|
+
`;
|
|
6452
|
+
var ObjectListItemSubtitle = import_react65.css`
|
|
6453
|
+
color: var(--gray-500);
|
|
6454
|
+
display: block;
|
|
6455
|
+
font-size: var(--fs-xs);
|
|
6456
|
+
line-height: 1;
|
|
6457
|
+
`;
|
|
6458
|
+
var ObjectListItemInfoContainer = import_react65.css`
|
|
6459
|
+
align-items: center;
|
|
6460
|
+
display: flex;
|
|
6461
|
+
gap: var(--spacing-sm);
|
|
6462
|
+
justify-content: center;
|
|
6463
|
+
`;
|
|
6464
|
+
var ObjectListItemControlledContent = import_react65.css`
|
|
6465
|
+
display: flex;
|
|
6466
|
+
gap: var(--spacing-sm);
|
|
6467
|
+
`;
|
|
6468
|
+
var ObjectListItemUnControlledContent = import_react65.css`
|
|
6469
|
+
margin-top: var(--spacing-sm);
|
|
6470
|
+
grid-column: 1 / -1;
|
|
6471
|
+
`;
|
|
6472
|
+
|
|
6473
|
+
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
6388
6474
|
var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
|
|
6475
|
+
var ObjectSearchListItem = ({
|
|
6476
|
+
id,
|
|
6477
|
+
title,
|
|
6478
|
+
contentType,
|
|
6479
|
+
image,
|
|
6480
|
+
imageUrl,
|
|
6481
|
+
popoverData,
|
|
6482
|
+
onSelect,
|
|
6483
|
+
isMulti,
|
|
6484
|
+
disabled,
|
|
6485
|
+
children
|
|
6486
|
+
}) => {
|
|
6487
|
+
const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
|
|
6488
|
+
const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
|
|
6489
|
+
const handleSelectItem = () => {
|
|
6490
|
+
var _a;
|
|
6491
|
+
const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
|
|
6492
|
+
const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
|
|
6493
|
+
if (isMulti === true || globalIsMulti) {
|
|
6494
|
+
return onSelectItem(selectedItem);
|
|
6495
|
+
}
|
|
6496
|
+
return onSelectItem([selectedItem]);
|
|
6497
|
+
};
|
|
6498
|
+
const selected = selectedListItems.some((item) => item.id === id);
|
|
6499
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
|
|
6500
|
+
"div",
|
|
6501
|
+
{
|
|
6502
|
+
role: "listitem",
|
|
6503
|
+
css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
|
|
6504
|
+
"data-testid": "list-item",
|
|
6505
|
+
children: [
|
|
6506
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
|
|
6507
|
+
"div",
|
|
6508
|
+
{
|
|
6509
|
+
role: "button",
|
|
6510
|
+
onClick: handleSelectItem,
|
|
6511
|
+
css: ObjectListItemControlledContent,
|
|
6512
|
+
"aria-disabled": disabled,
|
|
6513
|
+
children: [
|
|
6514
|
+
!imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
|
|
6515
|
+
!image || imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
|
|
6516
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
|
|
6517
|
+
!contentType ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
|
|
6518
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
|
|
6519
|
+
] })
|
|
6520
|
+
]
|
|
6521
|
+
}
|
|
6522
|
+
),
|
|
6523
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { css: ObjectListItemInfoContainer, children: [
|
|
6524
|
+
selected ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system34.Chip, { text: "selected", size: "xs" }) : null,
|
|
6525
|
+
!popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system34.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
|
|
6526
|
+
] }),
|
|
6527
|
+
!children ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { css: ObjectListItemUnControlledContent, children })
|
|
6528
|
+
]
|
|
6529
|
+
}
|
|
6530
|
+
);
|
|
6531
|
+
};
|
|
6532
|
+
var ObjectSearchListItemLoadingSkeleton = () => {
|
|
6533
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
|
|
6534
|
+
};
|
|
6535
|
+
|
|
6536
|
+
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6537
|
+
var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
|
|
6389
6538
|
var ObjectSearchContainer = ({
|
|
6390
6539
|
label,
|
|
6391
6540
|
enableDynamicInputToResultId,
|
|
@@ -6397,19 +6546,20 @@ var ObjectSearchContainer = ({
|
|
|
6397
6546
|
const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
|
|
6398
6547
|
const { flatVariables } = useVariables(true);
|
|
6399
6548
|
const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
|
|
6400
|
-
const
|
|
6549
|
+
const listItems = resultList != null ? resultList : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DefaultResultList, {});
|
|
6550
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_design_system35.VerticalRhythm, { children: [
|
|
6401
6551
|
searchFilters,
|
|
6402
|
-
|
|
6403
|
-
|
|
6552
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
|
|
6553
|
+
import_design_system35.ScrollableList,
|
|
6404
6554
|
{
|
|
6405
6555
|
role: "list",
|
|
6406
|
-
css:
|
|
6407
|
-
|
|
6408
|
-
|
|
6409
|
-
|
|
6410
|
-
|
|
6411
|
-
|
|
6412
|
-
children:
|
|
6556
|
+
css: import_react66.css`
|
|
6557
|
+
> div {
|
|
6558
|
+
transition: max-height var(--duration-slow) var(--timing-ease-out);
|
|
6559
|
+
max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
|
|
6560
|
+
}
|
|
6561
|
+
`,
|
|
6562
|
+
children: listItems
|
|
6413
6563
|
}
|
|
6414
6564
|
)
|
|
6415
6565
|
] });
|
|
@@ -6440,8 +6590,8 @@ var ObjectSearchContainer = ({
|
|
|
6440
6590
|
}
|
|
6441
6591
|
]);
|
|
6442
6592
|
};
|
|
6443
|
-
return /* @__PURE__ */ (0,
|
|
6444
|
-
/* @__PURE__ */ (0,
|
|
6593
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_design_system35.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_design_system35.VerticalRhythm, { children: [
|
|
6594
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_design_system35.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
|
|
6445
6595
|
InputVariables,
|
|
6446
6596
|
{
|
|
6447
6597
|
label,
|
|
@@ -6459,14 +6609,25 @@ var ObjectSearchContainer = ({
|
|
|
6459
6609
|
children
|
|
6460
6610
|
] }) });
|
|
6461
6611
|
};
|
|
6612
|
+
var DefaultResultList = () => {
|
|
6613
|
+
var _a;
|
|
6614
|
+
const { list } = useObjectSearchContext();
|
|
6615
|
+
if (!list.items) {
|
|
6616
|
+
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
6617
|
+
}
|
|
6618
|
+
if (list.items.length === 0) {
|
|
6619
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_design_system35.Callout, { type: "info", children: "No results were found" });
|
|
6620
|
+
}
|
|
6621
|
+
return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ObjectSearchListItem, { ...item }, item.id));
|
|
6622
|
+
};
|
|
6462
6623
|
|
|
6463
6624
|
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6464
|
-
var
|
|
6465
|
-
var
|
|
6625
|
+
var import_design_system36 = require("@uniformdev/design-system");
|
|
6626
|
+
var import_react68 = require("react");
|
|
6466
6627
|
|
|
6467
6628
|
// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
|
|
6468
|
-
var
|
|
6469
|
-
var ObjectSearchFilterContainerLabel =
|
|
6629
|
+
var import_react67 = require("@emotion/react");
|
|
6630
|
+
var ObjectSearchFilterContainerLabel = import_react67.css`
|
|
6470
6631
|
align-items: center;
|
|
6471
6632
|
display: flex;
|
|
6472
6633
|
font-size: var(--fs-sm);
|
|
@@ -6474,18 +6635,18 @@ var ObjectSearchFilterContainerLabel = import_react66.css`
|
|
|
6474
6635
|
line-height: 1rem;
|
|
6475
6636
|
margin-bottom: var(--spacing-sm);
|
|
6476
6637
|
`;
|
|
6477
|
-
var ObjectSearchFilterContainer =
|
|
6638
|
+
var ObjectSearchFilterContainer = import_react67.css`
|
|
6478
6639
|
display: grid;
|
|
6479
6640
|
gap: var(--spacing-base);
|
|
6480
6641
|
`;
|
|
6481
|
-
var ObjectSearchFilterGrid = (gridColumns) =>
|
|
6642
|
+
var ObjectSearchFilterGrid = (gridColumns) => import_react67.css`
|
|
6482
6643
|
display: grid;
|
|
6483
6644
|
grid-template-columns: ${gridColumns};
|
|
6484
6645
|
gap: var(--spacing-base);
|
|
6485
6646
|
`;
|
|
6486
6647
|
|
|
6487
6648
|
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6488
|
-
var
|
|
6649
|
+
var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
|
|
6489
6650
|
var ObjectSearchFilter = ({
|
|
6490
6651
|
requireContentType,
|
|
6491
6652
|
typeSelectorAllTypesOptionText = "All content types",
|
|
@@ -6494,10 +6655,11 @@ var ObjectSearchFilter = ({
|
|
|
6494
6655
|
selectLabel = "Content Type Select",
|
|
6495
6656
|
selectOptions
|
|
6496
6657
|
}) => {
|
|
6658
|
+
var _a, _b;
|
|
6497
6659
|
const { query, onSetQuery } = useObjectSearchContext();
|
|
6498
|
-
const [searchState, setSearchState] = (0,
|
|
6499
|
-
contentType: "",
|
|
6500
|
-
keyword: ""
|
|
6660
|
+
const [searchState, setSearchState] = (0, import_react68.useState)({
|
|
6661
|
+
contentType: (_a = query.contentType) != null ? _a : "",
|
|
6662
|
+
keyword: (_b = query.keyword) != null ? _b : ""
|
|
6501
6663
|
});
|
|
6502
6664
|
const handleFilterChange = (value) => {
|
|
6503
6665
|
setSearchState((prev) => {
|
|
@@ -6505,20 +6667,20 @@ var ObjectSearchFilter = ({
|
|
|
6505
6667
|
});
|
|
6506
6668
|
onSetQuery({ ...query, ...value });
|
|
6507
6669
|
};
|
|
6508
|
-
const memoizedSelectOptions = (0,
|
|
6670
|
+
const memoizedSelectOptions = (0, import_react68.useMemo)(() => {
|
|
6509
6671
|
if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
|
|
6510
6672
|
return [];
|
|
6511
6673
|
}
|
|
6512
6674
|
return [
|
|
6513
6675
|
...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
|
|
6514
6676
|
...selectOptions ? selectOptions.map((option) => {
|
|
6515
|
-
var
|
|
6516
|
-
return { name: option == null ? void 0 : option.name, label: (
|
|
6677
|
+
var _a2;
|
|
6678
|
+
return { name: option == null ? void 0 : option.name, label: (_a2 = option.label) != null ? _a2 : option == null ? void 0 : option.name, id: option.id };
|
|
6517
6679
|
}) : []
|
|
6518
6680
|
];
|
|
6519
6681
|
}, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
|
|
6520
6682
|
const shouldRenderSelect = memoizedSelectOptions.length > 0;
|
|
6521
|
-
return /* @__PURE__ */ (0,
|
|
6683
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
|
|
6522
6684
|
"fieldset",
|
|
6523
6685
|
{
|
|
6524
6686
|
css: [
|
|
@@ -6526,8 +6688,8 @@ var ObjectSearchFilter = ({
|
|
|
6526
6688
|
ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
|
|
6527
6689
|
],
|
|
6528
6690
|
children: [
|
|
6529
|
-
memoizedSelectOptions.length ? /* @__PURE__ */ (0,
|
|
6530
|
-
|
|
6691
|
+
memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
6692
|
+
import_design_system36.InputSelect,
|
|
6531
6693
|
{
|
|
6532
6694
|
label: selectLabel,
|
|
6533
6695
|
showLabel: false,
|
|
@@ -6536,8 +6698,8 @@ var ObjectSearchFilter = ({
|
|
|
6536
6698
|
value: query.contentType
|
|
6537
6699
|
}
|
|
6538
6700
|
) : null,
|
|
6539
|
-
/* @__PURE__ */ (0,
|
|
6540
|
-
|
|
6701
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
6702
|
+
import_design_system36.InputKeywordSearch,
|
|
6541
6703
|
{
|
|
6542
6704
|
inputFieldName: searchInputName,
|
|
6543
6705
|
placeholder: searchInputPlaceholderText,
|
|
@@ -6553,154 +6715,14 @@ var ObjectSearchFilter = ({
|
|
|
6553
6715
|
};
|
|
6554
6716
|
|
|
6555
6717
|
// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
|
|
6556
|
-
var
|
|
6718
|
+
var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
|
|
6557
6719
|
var ObjectSearchFilterContainer2 = ({ label, children }) => {
|
|
6558
|
-
return /* @__PURE__ */ (0,
|
|
6559
|
-
label ? /* @__PURE__ */ (0,
|
|
6560
|
-
/* @__PURE__ */ (0,
|
|
6720
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { children: [
|
|
6721
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
|
|
6722
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { css: ObjectSearchFilterContainer, children })
|
|
6561
6723
|
] });
|
|
6562
6724
|
};
|
|
6563
6725
|
|
|
6564
|
-
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
6565
|
-
var import_design_system36 = require("@uniformdev/design-system");
|
|
6566
|
-
|
|
6567
|
-
// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
|
|
6568
|
-
var import_react68 = require("@emotion/react");
|
|
6569
|
-
var import_design_system35 = require("@uniformdev/design-system");
|
|
6570
|
-
var ObjectListItemContainer = import_react68.css`
|
|
6571
|
-
align-items: center;
|
|
6572
|
-
border: 1px solid var(--gray-300);
|
|
6573
|
-
border-radius: var(--rounded-base);
|
|
6574
|
-
background: var(--white);
|
|
6575
|
-
display: grid;
|
|
6576
|
-
grid-template-columns: 1fr auto;
|
|
6577
|
-
padding: var(--spacing-sm);
|
|
6578
|
-
`;
|
|
6579
|
-
var ObjectListItemContainerDisabled = import_react68.css`
|
|
6580
|
-
opacity: var(--opacity-50);
|
|
6581
|
-
pointer-events: none;
|
|
6582
|
-
`;
|
|
6583
|
-
var ObjectListItemLoading = import_react68.css`
|
|
6584
|
-
animation: ${import_design_system35.skeletonLoading} 1s linear infinite alternate;
|
|
6585
|
-
border-color: transparent;
|
|
6586
|
-
min-height: 42px;
|
|
6587
|
-
position: relative;
|
|
6588
|
-
|
|
6589
|
-
&:before,
|
|
6590
|
-
&:after {
|
|
6591
|
-
background: var(--gray-200);
|
|
6592
|
-
content: '';
|
|
6593
|
-
display: block;
|
|
6594
|
-
height: 1rem;
|
|
6595
|
-
}
|
|
6596
|
-
|
|
6597
|
-
&:before {
|
|
6598
|
-
border-radius: var(--rounded-base);
|
|
6599
|
-
width: 10rem;
|
|
6600
|
-
}
|
|
6601
|
-
|
|
6602
|
-
&:after {
|
|
6603
|
-
border-radius: var(--rounded-full);
|
|
6604
|
-
width: 1rem;
|
|
6605
|
-
}
|
|
6606
|
-
`;
|
|
6607
|
-
var ObjectListItemHeadingGroup = import_react68.css`
|
|
6608
|
-
align-items: center;
|
|
6609
|
-
display: grid;
|
|
6610
|
-
`;
|
|
6611
|
-
var ObjectListItemThumbnail = import_react68.css`
|
|
6612
|
-
width: 30px;
|
|
6613
|
-
object-fit: contain;
|
|
6614
|
-
`;
|
|
6615
|
-
var ObjectListItemTitle = import_react68.css`
|
|
6616
|
-
color: var(--brand-secondary-1);
|
|
6617
|
-
display: block;
|
|
6618
|
-
font-size: var(--fs-sm);
|
|
6619
|
-
`;
|
|
6620
|
-
var ObjectListItemSubtitle = import_react68.css`
|
|
6621
|
-
color: var(--gray-500);
|
|
6622
|
-
display: block;
|
|
6623
|
-
font-size: var(--fs-xs);
|
|
6624
|
-
line-height: 1;
|
|
6625
|
-
`;
|
|
6626
|
-
var ObjectListItemInfoContainer = import_react68.css`
|
|
6627
|
-
align-items: center;
|
|
6628
|
-
display: flex;
|
|
6629
|
-
gap: var(--spacing-sm);
|
|
6630
|
-
justify-content: center;
|
|
6631
|
-
`;
|
|
6632
|
-
var ObjectListItemControlledContent = import_react68.css`
|
|
6633
|
-
display: flex;
|
|
6634
|
-
gap: var(--spacing-sm);
|
|
6635
|
-
`;
|
|
6636
|
-
var ObjectListItemUnControlledContent = import_react68.css`
|
|
6637
|
-
margin-top: var(--spacing-sm);
|
|
6638
|
-
grid-column: 1 / -1;
|
|
6639
|
-
`;
|
|
6640
|
-
|
|
6641
|
-
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
6642
|
-
var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
|
|
6643
|
-
var ObjectSearchListItem = ({
|
|
6644
|
-
id,
|
|
6645
|
-
title,
|
|
6646
|
-
contentType,
|
|
6647
|
-
image,
|
|
6648
|
-
imageUrl,
|
|
6649
|
-
popoverData,
|
|
6650
|
-
onSelect,
|
|
6651
|
-
isMulti = false,
|
|
6652
|
-
disabled,
|
|
6653
|
-
children
|
|
6654
|
-
}) => {
|
|
6655
|
-
const { onSelectItem, selectedListItems } = useObjectSearchContext();
|
|
6656
|
-
const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
|
|
6657
|
-
const handleSelectItem = () => {
|
|
6658
|
-
var _a;
|
|
6659
|
-
const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
|
|
6660
|
-
const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
|
|
6661
|
-
if (isMulti) {
|
|
6662
|
-
return onSelectItem(selectedItem);
|
|
6663
|
-
}
|
|
6664
|
-
return onSelectItem([selectedItem]);
|
|
6665
|
-
};
|
|
6666
|
-
const selected = selectedListItems.some((item) => item.id === id);
|
|
6667
|
-
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
|
|
6668
|
-
"div",
|
|
6669
|
-
{
|
|
6670
|
-
role: "listitem",
|
|
6671
|
-
css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
|
|
6672
|
-
"data-testid": "list-item",
|
|
6673
|
-
children: [
|
|
6674
|
-
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
|
|
6675
|
-
"div",
|
|
6676
|
-
{
|
|
6677
|
-
role: "button",
|
|
6678
|
-
onClick: handleSelectItem,
|
|
6679
|
-
css: ObjectListItemControlledContent,
|
|
6680
|
-
"aria-disabled": disabled,
|
|
6681
|
-
children: [
|
|
6682
|
-
!imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
|
|
6683
|
-
!image || imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
|
|
6684
|
-
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
|
|
6685
|
-
!contentType ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
|
|
6686
|
-
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
|
|
6687
|
-
] })
|
|
6688
|
-
]
|
|
6689
|
-
}
|
|
6690
|
-
),
|
|
6691
|
-
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectListItemInfoContainer, children: [
|
|
6692
|
-
selected ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system36.Chip, { text: "selected", size: "xs" }) : null,
|
|
6693
|
-
!popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system36.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
|
|
6694
|
-
] }),
|
|
6695
|
-
!children ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { css: ObjectListItemUnControlledContent, children })
|
|
6696
|
-
]
|
|
6697
|
-
}
|
|
6698
|
-
);
|
|
6699
|
-
};
|
|
6700
|
-
var ObjectSearchListItemLoadingSkeleton = () => {
|
|
6701
|
-
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
|
|
6702
|
-
};
|
|
6703
|
-
|
|
6704
6726
|
// src/components/ObjectSearch/ObjectSearchResultItem.tsx
|
|
6705
6727
|
var import_design_system38 = require("@uniformdev/design-system");
|
|
6706
6728
|
var import_timeago3 = require("timeago.js");
|
|
@@ -7024,14 +7046,14 @@ var QueryFilter = ({
|
|
|
7024
7046
|
],
|
|
7025
7047
|
children
|
|
7026
7048
|
}) => {
|
|
7027
|
-
var _a, _b, _c, _d;
|
|
7049
|
+
var _a, _b, _c, _d, _e, _f;
|
|
7028
7050
|
const { query, onSetQuery } = useObjectSearchContext();
|
|
7029
7051
|
const [queryState, setQueryState] = (0, import_react72.useState)({
|
|
7030
|
-
contentType: "",
|
|
7031
|
-
keyword: "",
|
|
7052
|
+
contentType: (_a = query.contentType) != null ? _a : "",
|
|
7053
|
+
keyword: (_b = query.contentType) != null ? _b : "",
|
|
7032
7054
|
count: countValue != null ? countValue : 5,
|
|
7033
|
-
sortBy: (
|
|
7034
|
-
sortOrder: (
|
|
7055
|
+
sortBy: (_c = sortOptions[0].id) != null ? _c : "",
|
|
7056
|
+
sortOrder: (_d = sortOrderOptions[0].id) != null ? _d : ""
|
|
7035
7057
|
});
|
|
7036
7058
|
const handleFilterChange = (value) => {
|
|
7037
7059
|
setQueryState((prev) => ({ ...prev, ...value }));
|
|
@@ -7047,7 +7069,7 @@ var QueryFilter = ({
|
|
|
7047
7069
|
InputVariables,
|
|
7048
7070
|
{
|
|
7049
7071
|
label: searchInputLabel,
|
|
7050
|
-
value: (
|
|
7072
|
+
value: (_e = queryState.keyword) != null ? _e : "",
|
|
7051
7073
|
onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
|
|
7052
7074
|
disableInlineMenu: true,
|
|
7053
7075
|
id: "qf_searchText",
|
|
@@ -7071,7 +7093,7 @@ var QueryFilter = ({
|
|
|
7071
7093
|
{
|
|
7072
7094
|
label: contentTypeLabel,
|
|
7073
7095
|
id: "qf_contentType",
|
|
7074
|
-
value: (
|
|
7096
|
+
value: (_f = queryState.contentType) != null ? _f : "",
|
|
7075
7097
|
onChange: (newType) => handleFilterChange({ contentType: newType }),
|
|
7076
7098
|
disableInlineMenu: true,
|
|
7077
7099
|
inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|