@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.d.mts
CHANGED
|
@@ -1239,6 +1239,8 @@ type SearchQueryProps<TExtraFilters = unknown> = {
|
|
|
1239
1239
|
contentType?: string;
|
|
1240
1240
|
/** sets the keyword search in the search context */
|
|
1241
1241
|
keyword?: string;
|
|
1242
|
+
/** sets the locale in the search context */
|
|
1243
|
+
locale?: string;
|
|
1242
1244
|
} & TExtraFilters;
|
|
1243
1245
|
type SelectedItemProps<TExtraProps = unknown> = {
|
|
1244
1246
|
/** sets the id value */
|
|
@@ -1309,12 +1311,16 @@ type ObjectSearchContextProps<TExtraFilters = unknown, TExtraItemProps = unknown
|
|
|
1309
1311
|
list: ItemListProps<TExtraItemProps>;
|
|
1310
1312
|
/** function that sets the list of items to state */
|
|
1311
1313
|
onSetList: (value: ItemListProps) => void;
|
|
1314
|
+
/** is multi items selection allowed or not */
|
|
1315
|
+
isMulti: boolean;
|
|
1312
1316
|
};
|
|
1313
1317
|
type ObjectSearchProviderProps = {
|
|
1314
1318
|
children: ReactNode;
|
|
1315
1319
|
currentlySelectedItems?: Array<SelectedItemProps>;
|
|
1320
|
+
isMulti?: boolean;
|
|
1321
|
+
defaultQuery?: SearchQueryProps;
|
|
1316
1322
|
};
|
|
1317
|
-
declare const ObjectSearchProvider: ({ currentlySelectedItems, children }: ObjectSearchProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
1323
|
+
declare const ObjectSearchProvider: ({ currentlySelectedItems, isMulti, children, defaultQuery, }: ObjectSearchProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
1318
1324
|
declare function useObjectSearchContext<TExtraSearchFilters = unknown, TExtraItemProps = unknown>(): ObjectSearchContextProps<TExtraSearchFilters, TExtraItemProps>;
|
|
1319
1325
|
|
|
1320
1326
|
type ObjectSearchListItemProps = SelectedItemProps & {
|
|
@@ -1323,7 +1329,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
|
|
|
1323
1329
|
/** sets image parameters
|
|
1324
1330
|
* @deprecated Please use imageUrl to make it compatible with */
|
|
1325
1331
|
image?: {
|
|
1326
|
-
/** sets the src
|
|
1332
|
+
/** sets the src value */
|
|
1327
1333
|
src: string;
|
|
1328
1334
|
/** sets the alt text value */
|
|
1329
1335
|
alt: string;
|
|
@@ -1345,6 +1351,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
|
|
|
1345
1351
|
children?: React$1.ReactNode;
|
|
1346
1352
|
/** sets whether multiple entries can be added to the results list context
|
|
1347
1353
|
* @default false
|
|
1354
|
+
* @deprecated Please use isMulti property in <ObjectSearchProvider />
|
|
1348
1355
|
*/
|
|
1349
1356
|
isMulti?: boolean;
|
|
1350
1357
|
/** sets disabled state to the interactive element */
|
package/dist/index.d.ts
CHANGED
|
@@ -1239,6 +1239,8 @@ type SearchQueryProps<TExtraFilters = unknown> = {
|
|
|
1239
1239
|
contentType?: string;
|
|
1240
1240
|
/** sets the keyword search in the search context */
|
|
1241
1241
|
keyword?: string;
|
|
1242
|
+
/** sets the locale in the search context */
|
|
1243
|
+
locale?: string;
|
|
1242
1244
|
} & TExtraFilters;
|
|
1243
1245
|
type SelectedItemProps<TExtraProps = unknown> = {
|
|
1244
1246
|
/** sets the id value */
|
|
@@ -1309,12 +1311,16 @@ type ObjectSearchContextProps<TExtraFilters = unknown, TExtraItemProps = unknown
|
|
|
1309
1311
|
list: ItemListProps<TExtraItemProps>;
|
|
1310
1312
|
/** function that sets the list of items to state */
|
|
1311
1313
|
onSetList: (value: ItemListProps) => void;
|
|
1314
|
+
/** is multi items selection allowed or not */
|
|
1315
|
+
isMulti: boolean;
|
|
1312
1316
|
};
|
|
1313
1317
|
type ObjectSearchProviderProps = {
|
|
1314
1318
|
children: ReactNode;
|
|
1315
1319
|
currentlySelectedItems?: Array<SelectedItemProps>;
|
|
1320
|
+
isMulti?: boolean;
|
|
1321
|
+
defaultQuery?: SearchQueryProps;
|
|
1316
1322
|
};
|
|
1317
|
-
declare const ObjectSearchProvider: ({ currentlySelectedItems, children }: ObjectSearchProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
1323
|
+
declare const ObjectSearchProvider: ({ currentlySelectedItems, isMulti, children, defaultQuery, }: ObjectSearchProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
1318
1324
|
declare function useObjectSearchContext<TExtraSearchFilters = unknown, TExtraItemProps = unknown>(): ObjectSearchContextProps<TExtraSearchFilters, TExtraItemProps>;
|
|
1319
1325
|
|
|
1320
1326
|
type ObjectSearchListItemProps = SelectedItemProps & {
|
|
@@ -1323,7 +1329,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
|
|
|
1323
1329
|
/** sets image parameters
|
|
1324
1330
|
* @deprecated Please use imageUrl to make it compatible with */
|
|
1325
1331
|
image?: {
|
|
1326
|
-
/** sets the src
|
|
1332
|
+
/** sets the src value */
|
|
1327
1333
|
src: string;
|
|
1328
1334
|
/** sets the alt text value */
|
|
1329
1335
|
alt: string;
|
|
@@ -1345,6 +1351,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
|
|
|
1345
1351
|
children?: React$1.ReactNode;
|
|
1346
1352
|
/** sets whether multiple entries can be added to the results list context
|
|
1347
1353
|
* @default false
|
|
1354
|
+
* @deprecated Please use isMulti property in <ObjectSearchProvider />
|
|
1348
1355
|
*/
|
|
1349
1356
|
isMulti?: boolean;
|
|
1350
1357
|
/** sets disabled state to the interactive element */
|
package/dist/index.esm.js
CHANGED
|
@@ -6140,9 +6140,9 @@ var DataRefreshButton = ({
|
|
|
6140
6140
|
};
|
|
6141
6141
|
|
|
6142
6142
|
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6143
|
-
import { css as
|
|
6143
|
+
import { css as css32 } from "@emotion/react";
|
|
6144
6144
|
import { bindVariables } from "@uniformdev/canvas";
|
|
6145
|
-
import { Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
|
|
6145
|
+
import { Callout as Callout5, Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
|
|
6146
6146
|
|
|
6147
6147
|
// src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
|
|
6148
6148
|
import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
|
|
@@ -6167,12 +6167,19 @@ var ObjectSearchContext = createContext5({
|
|
|
6167
6167
|
},
|
|
6168
6168
|
selectedListItems: [],
|
|
6169
6169
|
onRemoveAllSelectedItems: () => {
|
|
6170
|
-
}
|
|
6170
|
+
},
|
|
6171
|
+
isMulti: false
|
|
6171
6172
|
});
|
|
6172
|
-
var ObjectSearchProvider = ({
|
|
6173
|
+
var ObjectSearchProvider = ({
|
|
6174
|
+
currentlySelectedItems,
|
|
6175
|
+
isMulti = false,
|
|
6176
|
+
children,
|
|
6177
|
+
defaultQuery
|
|
6178
|
+
}) => {
|
|
6173
6179
|
const [query, setQuery] = useState15({
|
|
6174
6180
|
contentType: "",
|
|
6175
|
-
keyword: ""
|
|
6181
|
+
keyword: "",
|
|
6182
|
+
...defaultQuery
|
|
6176
6183
|
});
|
|
6177
6184
|
const { flatVariables } = useVariables(true);
|
|
6178
6185
|
const querySearchDeferred = useDeferredValue(query);
|
|
@@ -6223,6 +6230,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
|
|
|
6223
6230
|
selectedListItems: selectedItems,
|
|
6224
6231
|
onRemoveAllSelectedItems,
|
|
6225
6232
|
list,
|
|
6233
|
+
isMulti,
|
|
6226
6234
|
onSetList
|
|
6227
6235
|
}),
|
|
6228
6236
|
[
|
|
@@ -6233,6 +6241,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
|
|
|
6233
6241
|
selectedItems,
|
|
6234
6242
|
onRemoveAllSelectedItems,
|
|
6235
6243
|
list,
|
|
6244
|
+
isMulti,
|
|
6236
6245
|
onSetList
|
|
6237
6246
|
]
|
|
6238
6247
|
);
|
|
@@ -6253,8 +6262,148 @@ function bindQuery(query, inputs) {
|
|
|
6253
6262
|
return result;
|
|
6254
6263
|
}
|
|
6255
6264
|
|
|
6256
|
-
// src/components/ObjectSearch/
|
|
6265
|
+
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
6266
|
+
import { Chip, Popover } from "@uniformdev/design-system";
|
|
6267
|
+
|
|
6268
|
+
// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
|
|
6269
|
+
import { css as css31 } from "@emotion/react";
|
|
6270
|
+
import { skeletonLoading } from "@uniformdev/design-system";
|
|
6271
|
+
var ObjectListItemContainer = css31`
|
|
6272
|
+
align-items: center;
|
|
6273
|
+
border: 1px solid var(--gray-300);
|
|
6274
|
+
border-radius: var(--rounded-base);
|
|
6275
|
+
background: var(--white);
|
|
6276
|
+
display: grid;
|
|
6277
|
+
grid-template-columns: 1fr auto;
|
|
6278
|
+
padding: var(--spacing-sm);
|
|
6279
|
+
`;
|
|
6280
|
+
var ObjectListItemContainerDisabled = css31`
|
|
6281
|
+
opacity: var(--opacity-50);
|
|
6282
|
+
pointer-events: none;
|
|
6283
|
+
`;
|
|
6284
|
+
var ObjectListItemLoading = css31`
|
|
6285
|
+
animation: ${skeletonLoading} 1s linear infinite alternate;
|
|
6286
|
+
border-color: transparent;
|
|
6287
|
+
min-height: 42px;
|
|
6288
|
+
position: relative;
|
|
6289
|
+
|
|
6290
|
+
&:before,
|
|
6291
|
+
&:after {
|
|
6292
|
+
background: var(--gray-200);
|
|
6293
|
+
content: '';
|
|
6294
|
+
display: block;
|
|
6295
|
+
height: 1rem;
|
|
6296
|
+
}
|
|
6297
|
+
|
|
6298
|
+
&:before {
|
|
6299
|
+
border-radius: var(--rounded-base);
|
|
6300
|
+
width: 10rem;
|
|
6301
|
+
}
|
|
6302
|
+
|
|
6303
|
+
&:after {
|
|
6304
|
+
border-radius: var(--rounded-full);
|
|
6305
|
+
width: 1rem;
|
|
6306
|
+
}
|
|
6307
|
+
`;
|
|
6308
|
+
var ObjectListItemHeadingGroup = css31`
|
|
6309
|
+
align-items: center;
|
|
6310
|
+
display: grid;
|
|
6311
|
+
`;
|
|
6312
|
+
var ObjectListItemThumbnail = css31`
|
|
6313
|
+
width: 30px;
|
|
6314
|
+
object-fit: contain;
|
|
6315
|
+
`;
|
|
6316
|
+
var ObjectListItemTitle = css31`
|
|
6317
|
+
color: var(--brand-secondary-1);
|
|
6318
|
+
display: block;
|
|
6319
|
+
font-size: var(--fs-sm);
|
|
6320
|
+
`;
|
|
6321
|
+
var ObjectListItemSubtitle = css31`
|
|
6322
|
+
color: var(--gray-500);
|
|
6323
|
+
display: block;
|
|
6324
|
+
font-size: var(--fs-xs);
|
|
6325
|
+
line-height: 1;
|
|
6326
|
+
`;
|
|
6327
|
+
var ObjectListItemInfoContainer = css31`
|
|
6328
|
+
align-items: center;
|
|
6329
|
+
display: flex;
|
|
6330
|
+
gap: var(--spacing-sm);
|
|
6331
|
+
justify-content: center;
|
|
6332
|
+
`;
|
|
6333
|
+
var ObjectListItemControlledContent = css31`
|
|
6334
|
+
display: flex;
|
|
6335
|
+
gap: var(--spacing-sm);
|
|
6336
|
+
`;
|
|
6337
|
+
var ObjectListItemUnControlledContent = css31`
|
|
6338
|
+
margin-top: var(--spacing-sm);
|
|
6339
|
+
grid-column: 1 / -1;
|
|
6340
|
+
`;
|
|
6341
|
+
|
|
6342
|
+
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
6257
6343
|
import { jsx as jsx59, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
|
|
6344
|
+
var ObjectSearchListItem = ({
|
|
6345
|
+
id,
|
|
6346
|
+
title,
|
|
6347
|
+
contentType,
|
|
6348
|
+
image,
|
|
6349
|
+
imageUrl,
|
|
6350
|
+
popoverData,
|
|
6351
|
+
onSelect,
|
|
6352
|
+
isMulti,
|
|
6353
|
+
disabled,
|
|
6354
|
+
children
|
|
6355
|
+
}) => {
|
|
6356
|
+
const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
|
|
6357
|
+
const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
|
|
6358
|
+
const handleSelectItem = () => {
|
|
6359
|
+
var _a;
|
|
6360
|
+
const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
|
|
6361
|
+
const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
|
|
6362
|
+
if (isMulti === true || globalIsMulti) {
|
|
6363
|
+
return onSelectItem(selectedItem);
|
|
6364
|
+
}
|
|
6365
|
+
return onSelectItem([selectedItem]);
|
|
6366
|
+
};
|
|
6367
|
+
const selected = selectedListItems.some((item) => item.id === id);
|
|
6368
|
+
return /* @__PURE__ */ jsxs34(
|
|
6369
|
+
"div",
|
|
6370
|
+
{
|
|
6371
|
+
role: "listitem",
|
|
6372
|
+
css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
|
|
6373
|
+
"data-testid": "list-item",
|
|
6374
|
+
children: [
|
|
6375
|
+
/* @__PURE__ */ jsxs34(
|
|
6376
|
+
"div",
|
|
6377
|
+
{
|
|
6378
|
+
role: "button",
|
|
6379
|
+
onClick: handleSelectItem,
|
|
6380
|
+
css: ObjectListItemControlledContent,
|
|
6381
|
+
"aria-disabled": disabled,
|
|
6382
|
+
children: [
|
|
6383
|
+
!imageUrl ? null : /* @__PURE__ */ jsx59("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
|
|
6384
|
+
!image || imageUrl ? null : /* @__PURE__ */ jsx59("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
|
|
6385
|
+
/* @__PURE__ */ jsxs34("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
|
|
6386
|
+
!contentType ? null : /* @__PURE__ */ jsx59("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
|
|
6387
|
+
/* @__PURE__ */ jsx59("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
|
|
6388
|
+
] })
|
|
6389
|
+
]
|
|
6390
|
+
}
|
|
6391
|
+
),
|
|
6392
|
+
/* @__PURE__ */ jsxs34("div", { css: ObjectListItemInfoContainer, children: [
|
|
6393
|
+
selected ? /* @__PURE__ */ jsx59(Chip, { text: "selected", size: "xs" }) : null,
|
|
6394
|
+
!popoverData ? null : /* @__PURE__ */ jsx59(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
|
|
6395
|
+
] }),
|
|
6396
|
+
!children ? null : /* @__PURE__ */ jsx59("div", { css: ObjectListItemUnControlledContent, children })
|
|
6397
|
+
]
|
|
6398
|
+
}
|
|
6399
|
+
);
|
|
6400
|
+
};
|
|
6401
|
+
var ObjectSearchListItemLoadingSkeleton = () => {
|
|
6402
|
+
return /* @__PURE__ */ jsx59("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
|
|
6403
|
+
};
|
|
6404
|
+
|
|
6405
|
+
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6406
|
+
import { jsx as jsx60, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
|
|
6258
6407
|
var ObjectSearchContainer = ({
|
|
6259
6408
|
label,
|
|
6260
6409
|
enableDynamicInputToResultId,
|
|
@@ -6266,19 +6415,20 @@ var ObjectSearchContainer = ({
|
|
|
6266
6415
|
const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
|
|
6267
6416
|
const { flatVariables } = useVariables(true);
|
|
6268
6417
|
const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
|
|
6269
|
-
const
|
|
6418
|
+
const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx60(DefaultResultList, {});
|
|
6419
|
+
const body = /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
|
|
6270
6420
|
searchFilters,
|
|
6271
|
-
|
|
6421
|
+
/* @__PURE__ */ jsx60(
|
|
6272
6422
|
ScrollableList,
|
|
6273
6423
|
{
|
|
6274
6424
|
role: "list",
|
|
6275
|
-
css:
|
|
6276
|
-
|
|
6277
|
-
|
|
6278
|
-
|
|
6279
|
-
|
|
6280
|
-
|
|
6281
|
-
children:
|
|
6425
|
+
css: css32`
|
|
6426
|
+
> div {
|
|
6427
|
+
transition: max-height var(--duration-slow) var(--timing-ease-out);
|
|
6428
|
+
max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
|
|
6429
|
+
}
|
|
6430
|
+
`,
|
|
6431
|
+
children: listItems
|
|
6282
6432
|
}
|
|
6283
6433
|
)
|
|
6284
6434
|
] });
|
|
@@ -6309,8 +6459,8 @@ var ObjectSearchContainer = ({
|
|
|
6309
6459
|
}
|
|
6310
6460
|
]);
|
|
6311
6461
|
};
|
|
6312
|
-
return /* @__PURE__ */
|
|
6313
|
-
/* @__PURE__ */
|
|
6462
|
+
return /* @__PURE__ */ jsx60(IconsProvider, { children: /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
|
|
6463
|
+
/* @__PURE__ */ jsx60(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx60(
|
|
6314
6464
|
InputVariables,
|
|
6315
6465
|
{
|
|
6316
6466
|
label,
|
|
@@ -6328,14 +6478,25 @@ var ObjectSearchContainer = ({
|
|
|
6328
6478
|
children
|
|
6329
6479
|
] }) });
|
|
6330
6480
|
};
|
|
6481
|
+
var DefaultResultList = () => {
|
|
6482
|
+
var _a;
|
|
6483
|
+
const { list } = useObjectSearchContext();
|
|
6484
|
+
if (!list.items) {
|
|
6485
|
+
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ jsx60(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
6486
|
+
}
|
|
6487
|
+
if (list.items.length === 0) {
|
|
6488
|
+
return /* @__PURE__ */ jsx60(Callout5, { type: "info", children: "No results were found" });
|
|
6489
|
+
}
|
|
6490
|
+
return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx60(ObjectSearchListItem, { ...item }, item.id));
|
|
6491
|
+
};
|
|
6331
6492
|
|
|
6332
6493
|
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6333
6494
|
import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
|
|
6334
6495
|
import { useMemo as useMemo15, useState as useState16 } from "react";
|
|
6335
6496
|
|
|
6336
6497
|
// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
|
|
6337
|
-
import { css as
|
|
6338
|
-
var ObjectSearchFilterContainerLabel =
|
|
6498
|
+
import { css as css33 } from "@emotion/react";
|
|
6499
|
+
var ObjectSearchFilterContainerLabel = css33`
|
|
6339
6500
|
align-items: center;
|
|
6340
6501
|
display: flex;
|
|
6341
6502
|
font-size: var(--fs-sm);
|
|
@@ -6343,18 +6504,18 @@ var ObjectSearchFilterContainerLabel = css32`
|
|
|
6343
6504
|
line-height: 1rem;
|
|
6344
6505
|
margin-bottom: var(--spacing-sm);
|
|
6345
6506
|
`;
|
|
6346
|
-
var ObjectSearchFilterContainer =
|
|
6507
|
+
var ObjectSearchFilterContainer = css33`
|
|
6347
6508
|
display: grid;
|
|
6348
6509
|
gap: var(--spacing-base);
|
|
6349
6510
|
`;
|
|
6350
|
-
var ObjectSearchFilterGrid = (gridColumns) =>
|
|
6511
|
+
var ObjectSearchFilterGrid = (gridColumns) => css33`
|
|
6351
6512
|
display: grid;
|
|
6352
6513
|
grid-template-columns: ${gridColumns};
|
|
6353
6514
|
gap: var(--spacing-base);
|
|
6354
6515
|
`;
|
|
6355
6516
|
|
|
6356
6517
|
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6357
|
-
import { jsx as
|
|
6518
|
+
import { jsx as jsx61, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
|
|
6358
6519
|
var ObjectSearchFilter = ({
|
|
6359
6520
|
requireContentType,
|
|
6360
6521
|
typeSelectorAllTypesOptionText = "All content types",
|
|
@@ -6363,10 +6524,11 @@ var ObjectSearchFilter = ({
|
|
|
6363
6524
|
selectLabel = "Content Type Select",
|
|
6364
6525
|
selectOptions
|
|
6365
6526
|
}) => {
|
|
6527
|
+
var _a, _b;
|
|
6366
6528
|
const { query, onSetQuery } = useObjectSearchContext();
|
|
6367
6529
|
const [searchState, setSearchState] = useState16({
|
|
6368
|
-
contentType: "",
|
|
6369
|
-
keyword: ""
|
|
6530
|
+
contentType: (_a = query.contentType) != null ? _a : "",
|
|
6531
|
+
keyword: (_b = query.keyword) != null ? _b : ""
|
|
6370
6532
|
});
|
|
6371
6533
|
const handleFilterChange = (value) => {
|
|
6372
6534
|
setSearchState((prev) => {
|
|
@@ -6381,13 +6543,13 @@ var ObjectSearchFilter = ({
|
|
|
6381
6543
|
return [
|
|
6382
6544
|
...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
|
|
6383
6545
|
...selectOptions ? selectOptions.map((option) => {
|
|
6384
|
-
var
|
|
6385
|
-
return { name: option == null ? void 0 : option.name, label: (
|
|
6546
|
+
var _a2;
|
|
6547
|
+
return { name: option == null ? void 0 : option.name, label: (_a2 = option.label) != null ? _a2 : option == null ? void 0 : option.name, id: option.id };
|
|
6386
6548
|
}) : []
|
|
6387
6549
|
];
|
|
6388
6550
|
}, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
|
|
6389
6551
|
const shouldRenderSelect = memoizedSelectOptions.length > 0;
|
|
6390
|
-
return /* @__PURE__ */
|
|
6552
|
+
return /* @__PURE__ */ jsxs36(
|
|
6391
6553
|
"fieldset",
|
|
6392
6554
|
{
|
|
6393
6555
|
css: [
|
|
@@ -6395,7 +6557,7 @@ var ObjectSearchFilter = ({
|
|
|
6395
6557
|
ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
|
|
6396
6558
|
],
|
|
6397
6559
|
children: [
|
|
6398
|
-
memoizedSelectOptions.length ? /* @__PURE__ */
|
|
6560
|
+
memoizedSelectOptions.length ? /* @__PURE__ */ jsx61(
|
|
6399
6561
|
InputSelect6,
|
|
6400
6562
|
{
|
|
6401
6563
|
label: selectLabel,
|
|
@@ -6405,7 +6567,7 @@ var ObjectSearchFilter = ({
|
|
|
6405
6567
|
value: query.contentType
|
|
6406
6568
|
}
|
|
6407
6569
|
) : null,
|
|
6408
|
-
/* @__PURE__ */
|
|
6570
|
+
/* @__PURE__ */ jsx61(
|
|
6409
6571
|
InputKeywordSearch2,
|
|
6410
6572
|
{
|
|
6411
6573
|
inputFieldName: searchInputName,
|
|
@@ -6422,154 +6584,14 @@ var ObjectSearchFilter = ({
|
|
|
6422
6584
|
};
|
|
6423
6585
|
|
|
6424
6586
|
// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
|
|
6425
|
-
import { jsx as
|
|
6587
|
+
import { jsx as jsx62, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
|
|
6426
6588
|
var ObjectSearchFilterContainer2 = ({ label, children }) => {
|
|
6427
|
-
return /* @__PURE__ */
|
|
6428
|
-
label ? /* @__PURE__ */
|
|
6429
|
-
/* @__PURE__ */
|
|
6589
|
+
return /* @__PURE__ */ jsxs37("div", { children: [
|
|
6590
|
+
label ? /* @__PURE__ */ jsx62("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
|
|
6591
|
+
/* @__PURE__ */ jsx62("div", { css: ObjectSearchFilterContainer, children })
|
|
6430
6592
|
] });
|
|
6431
6593
|
};
|
|
6432
6594
|
|
|
6433
|
-
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
6434
|
-
import { Chip, Popover } from "@uniformdev/design-system";
|
|
6435
|
-
|
|
6436
|
-
// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
|
|
6437
|
-
import { css as css33 } from "@emotion/react";
|
|
6438
|
-
import { skeletonLoading } from "@uniformdev/design-system";
|
|
6439
|
-
var ObjectListItemContainer = css33`
|
|
6440
|
-
align-items: center;
|
|
6441
|
-
border: 1px solid var(--gray-300);
|
|
6442
|
-
border-radius: var(--rounded-base);
|
|
6443
|
-
background: var(--white);
|
|
6444
|
-
display: grid;
|
|
6445
|
-
grid-template-columns: 1fr auto;
|
|
6446
|
-
padding: var(--spacing-sm);
|
|
6447
|
-
`;
|
|
6448
|
-
var ObjectListItemContainerDisabled = css33`
|
|
6449
|
-
opacity: var(--opacity-50);
|
|
6450
|
-
pointer-events: none;
|
|
6451
|
-
`;
|
|
6452
|
-
var ObjectListItemLoading = css33`
|
|
6453
|
-
animation: ${skeletonLoading} 1s linear infinite alternate;
|
|
6454
|
-
border-color: transparent;
|
|
6455
|
-
min-height: 42px;
|
|
6456
|
-
position: relative;
|
|
6457
|
-
|
|
6458
|
-
&:before,
|
|
6459
|
-
&:after {
|
|
6460
|
-
background: var(--gray-200);
|
|
6461
|
-
content: '';
|
|
6462
|
-
display: block;
|
|
6463
|
-
height: 1rem;
|
|
6464
|
-
}
|
|
6465
|
-
|
|
6466
|
-
&:before {
|
|
6467
|
-
border-radius: var(--rounded-base);
|
|
6468
|
-
width: 10rem;
|
|
6469
|
-
}
|
|
6470
|
-
|
|
6471
|
-
&:after {
|
|
6472
|
-
border-radius: var(--rounded-full);
|
|
6473
|
-
width: 1rem;
|
|
6474
|
-
}
|
|
6475
|
-
`;
|
|
6476
|
-
var ObjectListItemHeadingGroup = css33`
|
|
6477
|
-
align-items: center;
|
|
6478
|
-
display: grid;
|
|
6479
|
-
`;
|
|
6480
|
-
var ObjectListItemThumbnail = css33`
|
|
6481
|
-
width: 30px;
|
|
6482
|
-
object-fit: contain;
|
|
6483
|
-
`;
|
|
6484
|
-
var ObjectListItemTitle = css33`
|
|
6485
|
-
color: var(--brand-secondary-1);
|
|
6486
|
-
display: block;
|
|
6487
|
-
font-size: var(--fs-sm);
|
|
6488
|
-
`;
|
|
6489
|
-
var ObjectListItemSubtitle = css33`
|
|
6490
|
-
color: var(--gray-500);
|
|
6491
|
-
display: block;
|
|
6492
|
-
font-size: var(--fs-xs);
|
|
6493
|
-
line-height: 1;
|
|
6494
|
-
`;
|
|
6495
|
-
var ObjectListItemInfoContainer = css33`
|
|
6496
|
-
align-items: center;
|
|
6497
|
-
display: flex;
|
|
6498
|
-
gap: var(--spacing-sm);
|
|
6499
|
-
justify-content: center;
|
|
6500
|
-
`;
|
|
6501
|
-
var ObjectListItemControlledContent = css33`
|
|
6502
|
-
display: flex;
|
|
6503
|
-
gap: var(--spacing-sm);
|
|
6504
|
-
`;
|
|
6505
|
-
var ObjectListItemUnControlledContent = css33`
|
|
6506
|
-
margin-top: var(--spacing-sm);
|
|
6507
|
-
grid-column: 1 / -1;
|
|
6508
|
-
`;
|
|
6509
|
-
|
|
6510
|
-
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
6511
|
-
import { jsx as jsx62, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
|
|
6512
|
-
var ObjectSearchListItem = ({
|
|
6513
|
-
id,
|
|
6514
|
-
title,
|
|
6515
|
-
contentType,
|
|
6516
|
-
image,
|
|
6517
|
-
imageUrl,
|
|
6518
|
-
popoverData,
|
|
6519
|
-
onSelect,
|
|
6520
|
-
isMulti = false,
|
|
6521
|
-
disabled,
|
|
6522
|
-
children
|
|
6523
|
-
}) => {
|
|
6524
|
-
const { onSelectItem, selectedListItems } = useObjectSearchContext();
|
|
6525
|
-
const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
|
|
6526
|
-
const handleSelectItem = () => {
|
|
6527
|
-
var _a;
|
|
6528
|
-
const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
|
|
6529
|
-
const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
|
|
6530
|
-
if (isMulti) {
|
|
6531
|
-
return onSelectItem(selectedItem);
|
|
6532
|
-
}
|
|
6533
|
-
return onSelectItem([selectedItem]);
|
|
6534
|
-
};
|
|
6535
|
-
const selected = selectedListItems.some((item) => item.id === id);
|
|
6536
|
-
return /* @__PURE__ */ jsxs37(
|
|
6537
|
-
"div",
|
|
6538
|
-
{
|
|
6539
|
-
role: "listitem",
|
|
6540
|
-
css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
|
|
6541
|
-
"data-testid": "list-item",
|
|
6542
|
-
children: [
|
|
6543
|
-
/* @__PURE__ */ jsxs37(
|
|
6544
|
-
"div",
|
|
6545
|
-
{
|
|
6546
|
-
role: "button",
|
|
6547
|
-
onClick: handleSelectItem,
|
|
6548
|
-
css: ObjectListItemControlledContent,
|
|
6549
|
-
"aria-disabled": disabled,
|
|
6550
|
-
children: [
|
|
6551
|
-
!imageUrl ? null : /* @__PURE__ */ jsx62("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
|
|
6552
|
-
!image || imageUrl ? null : /* @__PURE__ */ jsx62("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
|
|
6553
|
-
/* @__PURE__ */ jsxs37("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
|
|
6554
|
-
!contentType ? null : /* @__PURE__ */ jsx62("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
|
|
6555
|
-
/* @__PURE__ */ jsx62("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
|
|
6556
|
-
] })
|
|
6557
|
-
]
|
|
6558
|
-
}
|
|
6559
|
-
),
|
|
6560
|
-
/* @__PURE__ */ jsxs37("div", { css: ObjectListItemInfoContainer, children: [
|
|
6561
|
-
selected ? /* @__PURE__ */ jsx62(Chip, { text: "selected", size: "xs" }) : null,
|
|
6562
|
-
!popoverData ? null : /* @__PURE__ */ jsx62(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
|
|
6563
|
-
] }),
|
|
6564
|
-
!children ? null : /* @__PURE__ */ jsx62("div", { css: ObjectListItemUnControlledContent, children })
|
|
6565
|
-
]
|
|
6566
|
-
}
|
|
6567
|
-
);
|
|
6568
|
-
};
|
|
6569
|
-
var ObjectSearchListItemLoadingSkeleton = () => {
|
|
6570
|
-
return /* @__PURE__ */ jsx62("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
|
|
6571
|
-
};
|
|
6572
|
-
|
|
6573
6595
|
// src/components/ObjectSearch/ObjectSearchResultItem.tsx
|
|
6574
6596
|
import { Badge, Button as Button4, Popover as Popover2 } from "@uniformdev/design-system";
|
|
6575
6597
|
import { format as timeagoFormat } from "timeago.js";
|
|
@@ -6893,14 +6915,14 @@ var QueryFilter = ({
|
|
|
6893
6915
|
],
|
|
6894
6916
|
children
|
|
6895
6917
|
}) => {
|
|
6896
|
-
var _a, _b, _c, _d;
|
|
6918
|
+
var _a, _b, _c, _d, _e, _f;
|
|
6897
6919
|
const { query, onSetQuery } = useObjectSearchContext();
|
|
6898
6920
|
const [queryState, setQueryState] = useState17({
|
|
6899
|
-
contentType: "",
|
|
6900
|
-
keyword: "",
|
|
6921
|
+
contentType: (_a = query.contentType) != null ? _a : "",
|
|
6922
|
+
keyword: (_b = query.contentType) != null ? _b : "",
|
|
6901
6923
|
count: countValue != null ? countValue : 5,
|
|
6902
|
-
sortBy: (
|
|
6903
|
-
sortOrder: (
|
|
6924
|
+
sortBy: (_c = sortOptions[0].id) != null ? _c : "",
|
|
6925
|
+
sortOrder: (_d = sortOrderOptions[0].id) != null ? _d : ""
|
|
6904
6926
|
});
|
|
6905
6927
|
const handleFilterChange = (value) => {
|
|
6906
6928
|
setQueryState((prev) => ({ ...prev, ...value }));
|
|
@@ -6916,7 +6938,7 @@ var QueryFilter = ({
|
|
|
6916
6938
|
InputVariables,
|
|
6917
6939
|
{
|
|
6918
6940
|
label: searchInputLabel,
|
|
6919
|
-
value: (
|
|
6941
|
+
value: (_e = queryState.keyword) != null ? _e : "",
|
|
6920
6942
|
onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
|
|
6921
6943
|
disableInlineMenu: true,
|
|
6922
6944
|
id: "qf_searchText",
|
|
@@ -6940,7 +6962,7 @@ var QueryFilter = ({
|
|
|
6940
6962
|
{
|
|
6941
6963
|
label: contentTypeLabel,
|
|
6942
6964
|
id: "qf_contentType",
|
|
6943
|
-
value: (
|
|
6965
|
+
value: (_f = queryState.contentType) != null ? _f : "",
|
|
6944
6966
|
onChange: (newType) => handleFilterChange({ contentType: newType }),
|
|
6945
6967
|
disableInlineMenu: true,
|
|
6946
6968
|
inputWhenNoVariables: /* @__PURE__ */ jsx66(
|
|
@@ -7113,7 +7135,7 @@ function createLocationValidator(setValue, validate) {
|
|
|
7113
7135
|
import {
|
|
7114
7136
|
AddListButton as AddListButton2,
|
|
7115
7137
|
Button as Button6,
|
|
7116
|
-
Callout as
|
|
7138
|
+
Callout as Callout6,
|
|
7117
7139
|
DrawerContent,
|
|
7118
7140
|
Heading,
|
|
7119
7141
|
Input as Input6,
|
|
@@ -7152,7 +7174,7 @@ export {
|
|
|
7152
7174
|
$isVariableNode,
|
|
7153
7175
|
AddListButton2 as AddListButton,
|
|
7154
7176
|
Button6 as Button,
|
|
7155
|
-
|
|
7177
|
+
Callout6 as Callout,
|
|
7156
7178
|
ControlledValuePlugin,
|
|
7157
7179
|
DISCONNECT_VARIABLE_COMMAND,
|
|
7158
7180
|
DamSelectedItem,
|