@uniformdev/mesh-sdk-react 19.87.0 → 19.88.1-alpha.7
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 +6 -2
- package/dist/index.d.ts +6 -2
- package/dist/index.esm.js +195 -172
- package/dist/index.js +217 -194
- package/dist/index.mjs +195 -172
- package/package.json +5 -5
package/dist/index.js
CHANGED
|
@@ -2856,13 +2856,14 @@ function useConnectedDataAsVariables(connectedData) {
|
|
|
2856
2856
|
}
|
|
2857
2857
|
|
|
2858
2858
|
// src/hooks/useDynamicInputsAsVariables.tsx
|
|
2859
|
+
var import_canvas = require("@uniformdev/canvas");
|
|
2859
2860
|
var import_react26 = require("react");
|
|
2860
2861
|
var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
|
|
2861
2862
|
function useDynamicInputsAsVariables(dynamicInputs) {
|
|
2862
2863
|
return (0, import_react26.useMemo)(() => {
|
|
2863
2864
|
const result = Object.entries(dynamicInputs).reduce(
|
|
2864
2865
|
(acc, [name, input3]) => {
|
|
2865
|
-
const source = `from ${input3.type === "path" ? "URL path" : "query string"}`;
|
|
2866
|
+
const source = `from ${name === import_canvas.LOCALE_DYNAMIC_INPUT_NAME ? "current locale" : input3.type === "path" ? "URL path" : "query string"}`;
|
|
2866
2867
|
acc[name] = {
|
|
2867
2868
|
readOnly: true,
|
|
2868
2869
|
type: input3.type,
|
|
@@ -2981,11 +2982,11 @@ var import_lite = require("dequal/lite");
|
|
|
2981
2982
|
var import_react30 = require("react");
|
|
2982
2983
|
|
|
2983
2984
|
// src/components/Variables/util/deserializeVariablesEditorState.ts
|
|
2984
|
-
var
|
|
2985
|
+
var import_canvas2 = require("@uniformdev/canvas");
|
|
2985
2986
|
var import_lexical = require("lexical");
|
|
2986
2987
|
function deserializeVariablesEditorState(serialized) {
|
|
2987
2988
|
const result = [];
|
|
2988
|
-
(0,
|
|
2989
|
+
(0, import_canvas2.parseVariableExpression)(serialized != null ? serialized : "", (token, type) => {
|
|
2989
2990
|
if (type === "text") {
|
|
2990
2991
|
const node = {
|
|
2991
2992
|
type: import_lexical.TextNode.getType(),
|
|
@@ -3112,7 +3113,7 @@ var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerCont
|
|
|
3112
3113
|
var import_useLexicalNodeSelection = require("@lexical/react/useLexicalNodeSelection");
|
|
3113
3114
|
var import_selection = require("@lexical/selection");
|
|
3114
3115
|
var import_utils2 = require("@lexical/utils");
|
|
3115
|
-
var
|
|
3116
|
+
var import_canvas4 = require("@uniformdev/canvas");
|
|
3116
3117
|
var import_design_system18 = require("@uniformdev/design-system");
|
|
3117
3118
|
var import_lexical4 = require("lexical");
|
|
3118
3119
|
var import_react39 = require("react");
|
|
@@ -3132,6 +3133,7 @@ function VariableChip({
|
|
|
3132
3133
|
tooltip,
|
|
3133
3134
|
reference,
|
|
3134
3135
|
onClick,
|
|
3136
|
+
clickToEdit,
|
|
3135
3137
|
isFresh,
|
|
3136
3138
|
selected,
|
|
3137
3139
|
disabled
|
|
@@ -3139,7 +3141,7 @@ function VariableChip({
|
|
|
3139
3141
|
const hasClickEvent = !!onClick;
|
|
3140
3142
|
const referenceIsValidFr = isFresh ? true : referenceIsValid;
|
|
3141
3143
|
const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? import_react31.Fragment : UndefinedVariableReference;
|
|
3142
|
-
const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent ? "Click to edit" : void 0;
|
|
3144
|
+
const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
|
|
3143
3145
|
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
3144
3146
|
import_design_system15.MultilineChip,
|
|
3145
3147
|
{
|
|
@@ -3186,7 +3188,7 @@ var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerCont
|
|
|
3186
3188
|
var import_LexicalTypeaheadMenuPlugin = require("@lexical/react/LexicalTypeaheadMenuPlugin");
|
|
3187
3189
|
var import_utils = require("@lexical/utils");
|
|
3188
3190
|
var import_AiFillPlusCircle = require("@react-icons/all-files/ai/AiFillPlusCircle");
|
|
3189
|
-
var
|
|
3191
|
+
var import_canvas3 = require("@uniformdev/canvas");
|
|
3190
3192
|
var import_design_system17 = require("@uniformdev/design-system");
|
|
3191
3193
|
var import_lite2 = require("dequal/lite");
|
|
3192
3194
|
var import_lexical3 = require("lexical");
|
|
@@ -3660,7 +3662,7 @@ function useVariablesMenu({
|
|
|
3660
3662
|
var _a;
|
|
3661
3663
|
const targetVariable = variables[value];
|
|
3662
3664
|
if (overwriteExistingValue) {
|
|
3663
|
-
setVariablesEditorValue(editor, (0,
|
|
3665
|
+
setVariablesEditorValue(editor, (0, import_canvas3.createVariableReference)(value));
|
|
3664
3666
|
return true;
|
|
3665
3667
|
}
|
|
3666
3668
|
const variableNode = $createVariableNode(value, {
|
|
@@ -3830,7 +3832,7 @@ function VariablesPlugin({
|
|
|
3830
3832
|
if (!disableVariables) {
|
|
3831
3833
|
const targetVariable = variablesRef.current.variables[reference];
|
|
3832
3834
|
if (overwriteExistingValue) {
|
|
3833
|
-
setVariablesEditorValue(editor, (0,
|
|
3835
|
+
setVariablesEditorValue(editor, (0, import_canvas3.createVariableReference)(reference));
|
|
3834
3836
|
return true;
|
|
3835
3837
|
}
|
|
3836
3838
|
const variableNode = $createVariableNode(reference, {
|
|
@@ -4030,7 +4032,7 @@ var VariableNode = class _VariableNode extends import_lexical4.DecoratorNode {
|
|
|
4030
4032
|
* (albeit it won't get the fancy chip-node)
|
|
4031
4033
|
*/
|
|
4032
4034
|
getTextContent() {
|
|
4033
|
-
return (0,
|
|
4035
|
+
return (0, import_canvas4.createVariableReference)(this.reference);
|
|
4034
4036
|
}
|
|
4035
4037
|
/** Creates the DOM wrapper that hosts the node */
|
|
4036
4038
|
createDOM() {
|
|
@@ -4146,6 +4148,7 @@ function VariableNodeComponent({
|
|
|
4146
4148
|
displayName: state.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system18.LoadingIndicator, { size: "sm" }) : state.displayName,
|
|
4147
4149
|
selected: isSelected,
|
|
4148
4150
|
disabled: readOnly,
|
|
4151
|
+
clickToEdit: state.hasClickEvent,
|
|
4149
4152
|
onClick: state.hasClickEvent ? () => {
|
|
4150
4153
|
setSelected(!isSelected);
|
|
4151
4154
|
editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
|
|
@@ -4283,10 +4286,10 @@ var React10 = __toESM(require("react"));
|
|
|
4283
4286
|
var import_react42 = require("react");
|
|
4284
4287
|
|
|
4285
4288
|
// src/components/Variables/util/hasReferencedVariables.ts
|
|
4286
|
-
var
|
|
4289
|
+
var import_canvas5 = require("@uniformdev/canvas");
|
|
4287
4290
|
function hasReferencedVariables(value) {
|
|
4288
4291
|
let result = false;
|
|
4289
|
-
(0,
|
|
4292
|
+
(0, import_canvas5.parseVariableExpression)(value, (token, type) => {
|
|
4290
4293
|
if (type === "variable") {
|
|
4291
4294
|
result = true;
|
|
4292
4295
|
return false;
|
|
@@ -4572,7 +4575,7 @@ function SingleLineTextPlugin() {
|
|
|
4572
4575
|
}
|
|
4573
4576
|
|
|
4574
4577
|
// src/components/Variables/util/serializeVariablesEditorState.ts
|
|
4575
|
-
var
|
|
4578
|
+
var import_canvas6 = require("@uniformdev/canvas");
|
|
4576
4579
|
var import_lexical8 = require("lexical");
|
|
4577
4580
|
|
|
4578
4581
|
// src/components/Variables/util/variableExpression.ts
|
|
@@ -4591,7 +4594,7 @@ function serializeRecursive(node, buffer) {
|
|
|
4591
4594
|
buffer.push(node.text.replace(variablePrefix, "\\${"));
|
|
4592
4595
|
}
|
|
4593
4596
|
if (node.type === VariableNode.getType()) {
|
|
4594
|
-
buffer.push((0,
|
|
4597
|
+
buffer.push((0, import_canvas6.createVariableReference)(node.reference));
|
|
4595
4598
|
}
|
|
4596
4599
|
if (node.type === import_lexical8.LineBreakNode.getType()) {
|
|
4597
4600
|
buffer.push("\n");
|
|
@@ -4637,6 +4640,7 @@ function VariablesComposer(props) {
|
|
|
4637
4640
|
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
4638
4641
|
import_LexicalOnChangePlugin.OnChangePlugin,
|
|
4639
4642
|
{
|
|
4643
|
+
ignoreSelectionChange: true,
|
|
4640
4644
|
onChange: (state) => {
|
|
4641
4645
|
editorState.current = state;
|
|
4642
4646
|
if (updateTimeout.current) {
|
|
@@ -4910,7 +4914,7 @@ function InputVariablesOverlayMenu({
|
|
|
4910
4914
|
|
|
4911
4915
|
// src/components/Variables/ParameterConnectionIndicator.tsx
|
|
4912
4916
|
var import_CgUsbC2 = require("@react-icons/all-files/cg/CgUsbC");
|
|
4913
|
-
var
|
|
4917
|
+
var import_canvas7 = require("@uniformdev/canvas");
|
|
4914
4918
|
var import_design_system22 = require("@uniformdev/design-system");
|
|
4915
4919
|
var import_react51 = require("react");
|
|
4916
4920
|
|
|
@@ -5015,7 +5019,7 @@ function ParameterConnectionIndicator({
|
|
|
5015
5019
|
}) {
|
|
5016
5020
|
const hasVariablesInValue = (0, import_react51.useMemo)(() => {
|
|
5017
5021
|
let result = false;
|
|
5018
|
-
(0,
|
|
5022
|
+
(0, import_canvas7.bindVariablesToObject)({
|
|
5019
5023
|
value,
|
|
5020
5024
|
variables: {},
|
|
5021
5025
|
handleBinding: () => {
|
|
@@ -6278,12 +6282,12 @@ var DataRefreshButton = ({
|
|
|
6278
6282
|
};
|
|
6279
6283
|
|
|
6280
6284
|
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6281
|
-
var
|
|
6282
|
-
var
|
|
6283
|
-
var
|
|
6285
|
+
var import_react66 = require("@emotion/react");
|
|
6286
|
+
var import_canvas9 = require("@uniformdev/canvas");
|
|
6287
|
+
var import_design_system35 = require("@uniformdev/design-system");
|
|
6284
6288
|
|
|
6285
6289
|
// src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
|
|
6286
|
-
var
|
|
6290
|
+
var import_canvas8 = require("@uniformdev/canvas");
|
|
6287
6291
|
var import_react64 = require("react");
|
|
6288
6292
|
var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
|
|
6289
6293
|
var ObjectSearchContext = (0, import_react64.createContext)({
|
|
@@ -6298,9 +6302,14 @@ var ObjectSearchContext = (0, import_react64.createContext)({
|
|
|
6298
6302
|
},
|
|
6299
6303
|
selectedListItems: [],
|
|
6300
6304
|
onRemoveAllSelectedItems: () => {
|
|
6301
|
-
}
|
|
6305
|
+
},
|
|
6306
|
+
isMulti: false
|
|
6302
6307
|
});
|
|
6303
|
-
var ObjectSearchProvider = ({
|
|
6308
|
+
var ObjectSearchProvider = ({
|
|
6309
|
+
currentlySelectedItems,
|
|
6310
|
+
isMulti = false,
|
|
6311
|
+
children
|
|
6312
|
+
}) => {
|
|
6304
6313
|
const [query, setQuery] = (0, import_react64.useState)({
|
|
6305
6314
|
contentType: "",
|
|
6306
6315
|
keyword: ""
|
|
@@ -6354,6 +6363,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
|
|
|
6354
6363
|
selectedListItems: selectedItems,
|
|
6355
6364
|
onRemoveAllSelectedItems,
|
|
6356
6365
|
list,
|
|
6366
|
+
isMulti,
|
|
6357
6367
|
onSetList
|
|
6358
6368
|
}),
|
|
6359
6369
|
[
|
|
@@ -6364,6 +6374,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
|
|
|
6364
6374
|
selectedItems,
|
|
6365
6375
|
onRemoveAllSelectedItems,
|
|
6366
6376
|
list,
|
|
6377
|
+
isMulti,
|
|
6367
6378
|
onSetList
|
|
6368
6379
|
]
|
|
6369
6380
|
);
|
|
@@ -6373,7 +6384,7 @@ function useObjectSearchContext() {
|
|
|
6373
6384
|
return (0, import_react64.useContext)(ObjectSearchContext);
|
|
6374
6385
|
}
|
|
6375
6386
|
function bindQuery(query, inputs) {
|
|
6376
|
-
const { result, errors } = (0,
|
|
6387
|
+
const { result, errors } = (0, import_canvas8.bindVariablesToObject)({
|
|
6377
6388
|
value: query,
|
|
6378
6389
|
variables: inputs,
|
|
6379
6390
|
errorPrefix: "Dynamic input"
|
|
@@ -6384,8 +6395,148 @@ function bindQuery(query, inputs) {
|
|
|
6384
6395
|
return result;
|
|
6385
6396
|
}
|
|
6386
6397
|
|
|
6387
|
-
// src/components/ObjectSearch/
|
|
6398
|
+
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
6399
|
+
var import_design_system34 = require("@uniformdev/design-system");
|
|
6400
|
+
|
|
6401
|
+
// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
|
|
6402
|
+
var import_react65 = require("@emotion/react");
|
|
6403
|
+
var import_design_system33 = require("@uniformdev/design-system");
|
|
6404
|
+
var ObjectListItemContainer = import_react65.css`
|
|
6405
|
+
align-items: center;
|
|
6406
|
+
border: 1px solid var(--gray-300);
|
|
6407
|
+
border-radius: var(--rounded-base);
|
|
6408
|
+
background: var(--white);
|
|
6409
|
+
display: grid;
|
|
6410
|
+
grid-template-columns: 1fr auto;
|
|
6411
|
+
padding: var(--spacing-sm);
|
|
6412
|
+
`;
|
|
6413
|
+
var ObjectListItemContainerDisabled = import_react65.css`
|
|
6414
|
+
opacity: var(--opacity-50);
|
|
6415
|
+
pointer-events: none;
|
|
6416
|
+
`;
|
|
6417
|
+
var ObjectListItemLoading = import_react65.css`
|
|
6418
|
+
animation: ${import_design_system33.skeletonLoading} 1s linear infinite alternate;
|
|
6419
|
+
border-color: transparent;
|
|
6420
|
+
min-height: 42px;
|
|
6421
|
+
position: relative;
|
|
6422
|
+
|
|
6423
|
+
&:before,
|
|
6424
|
+
&:after {
|
|
6425
|
+
background: var(--gray-200);
|
|
6426
|
+
content: '';
|
|
6427
|
+
display: block;
|
|
6428
|
+
height: 1rem;
|
|
6429
|
+
}
|
|
6430
|
+
|
|
6431
|
+
&:before {
|
|
6432
|
+
border-radius: var(--rounded-base);
|
|
6433
|
+
width: 10rem;
|
|
6434
|
+
}
|
|
6435
|
+
|
|
6436
|
+
&:after {
|
|
6437
|
+
border-radius: var(--rounded-full);
|
|
6438
|
+
width: 1rem;
|
|
6439
|
+
}
|
|
6440
|
+
`;
|
|
6441
|
+
var ObjectListItemHeadingGroup = import_react65.css`
|
|
6442
|
+
align-items: center;
|
|
6443
|
+
display: grid;
|
|
6444
|
+
`;
|
|
6445
|
+
var ObjectListItemThumbnail = import_react65.css`
|
|
6446
|
+
width: 30px;
|
|
6447
|
+
object-fit: contain;
|
|
6448
|
+
`;
|
|
6449
|
+
var ObjectListItemTitle = import_react65.css`
|
|
6450
|
+
color: var(--brand-secondary-1);
|
|
6451
|
+
display: block;
|
|
6452
|
+
font-size: var(--fs-sm);
|
|
6453
|
+
`;
|
|
6454
|
+
var ObjectListItemSubtitle = import_react65.css`
|
|
6455
|
+
color: var(--gray-500);
|
|
6456
|
+
display: block;
|
|
6457
|
+
font-size: var(--fs-xs);
|
|
6458
|
+
line-height: 1;
|
|
6459
|
+
`;
|
|
6460
|
+
var ObjectListItemInfoContainer = import_react65.css`
|
|
6461
|
+
align-items: center;
|
|
6462
|
+
display: flex;
|
|
6463
|
+
gap: var(--spacing-sm);
|
|
6464
|
+
justify-content: center;
|
|
6465
|
+
`;
|
|
6466
|
+
var ObjectListItemControlledContent = import_react65.css`
|
|
6467
|
+
display: flex;
|
|
6468
|
+
gap: var(--spacing-sm);
|
|
6469
|
+
`;
|
|
6470
|
+
var ObjectListItemUnControlledContent = import_react65.css`
|
|
6471
|
+
margin-top: var(--spacing-sm);
|
|
6472
|
+
grid-column: 1 / -1;
|
|
6473
|
+
`;
|
|
6474
|
+
|
|
6475
|
+
// src/components/ObjectSearch/ObjectSearchListItem.tsx
|
|
6388
6476
|
var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
|
|
6477
|
+
var ObjectSearchListItem = ({
|
|
6478
|
+
id,
|
|
6479
|
+
title,
|
|
6480
|
+
contentType,
|
|
6481
|
+
image,
|
|
6482
|
+
imageUrl,
|
|
6483
|
+
popoverData,
|
|
6484
|
+
onSelect,
|
|
6485
|
+
isMulti,
|
|
6486
|
+
disabled,
|
|
6487
|
+
children
|
|
6488
|
+
}) => {
|
|
6489
|
+
const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
|
|
6490
|
+
const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
|
|
6491
|
+
const handleSelectItem = () => {
|
|
6492
|
+
var _a;
|
|
6493
|
+
const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
|
|
6494
|
+
const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
|
|
6495
|
+
if (isMulti === true || globalIsMulti) {
|
|
6496
|
+
return onSelectItem(selectedItem);
|
|
6497
|
+
}
|
|
6498
|
+
return onSelectItem([selectedItem]);
|
|
6499
|
+
};
|
|
6500
|
+
const selected = selectedListItems.some((item) => item.id === id);
|
|
6501
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
|
|
6502
|
+
"div",
|
|
6503
|
+
{
|
|
6504
|
+
role: "listitem",
|
|
6505
|
+
css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
|
|
6506
|
+
"data-testid": "list-item",
|
|
6507
|
+
children: [
|
|
6508
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
|
|
6509
|
+
"div",
|
|
6510
|
+
{
|
|
6511
|
+
role: "button",
|
|
6512
|
+
onClick: handleSelectItem,
|
|
6513
|
+
css: ObjectListItemControlledContent,
|
|
6514
|
+
"aria-disabled": disabled,
|
|
6515
|
+
children: [
|
|
6516
|
+
!imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
|
|
6517
|
+
!image || imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
|
|
6518
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
|
|
6519
|
+
!contentType ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
|
|
6520
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
|
|
6521
|
+
] })
|
|
6522
|
+
]
|
|
6523
|
+
}
|
|
6524
|
+
),
|
|
6525
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { css: ObjectListItemInfoContainer, children: [
|
|
6526
|
+
selected ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system34.Chip, { text: "selected", size: "xs" }) : null,
|
|
6527
|
+
!popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system34.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
|
|
6528
|
+
] }),
|
|
6529
|
+
!children ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { css: ObjectListItemUnControlledContent, children })
|
|
6530
|
+
]
|
|
6531
|
+
}
|
|
6532
|
+
);
|
|
6533
|
+
};
|
|
6534
|
+
var ObjectSearchListItemLoadingSkeleton = () => {
|
|
6535
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
|
|
6536
|
+
};
|
|
6537
|
+
|
|
6538
|
+
// src/components/ObjectSearch/ObjectSearchContainer.tsx
|
|
6539
|
+
var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
|
|
6389
6540
|
var ObjectSearchContainer = ({
|
|
6390
6541
|
label,
|
|
6391
6542
|
enableDynamicInputToResultId,
|
|
@@ -6397,19 +6548,20 @@ var ObjectSearchContainer = ({
|
|
|
6397
6548
|
const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
|
|
6398
6549
|
const { flatVariables } = useVariables(true);
|
|
6399
6550
|
const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
|
|
6400
|
-
const
|
|
6551
|
+
const listItems = resultList != null ? resultList : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DefaultResultList, {});
|
|
6552
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_design_system35.VerticalRhythm, { children: [
|
|
6401
6553
|
searchFilters,
|
|
6402
|
-
|
|
6403
|
-
|
|
6554
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
|
|
6555
|
+
import_design_system35.ScrollableList,
|
|
6404
6556
|
{
|
|
6405
6557
|
role: "list",
|
|
6406
|
-
css:
|
|
6407
|
-
|
|
6408
|
-
|
|
6409
|
-
|
|
6410
|
-
|
|
6411
|
-
|
|
6412
|
-
children:
|
|
6558
|
+
css: import_react66.css`
|
|
6559
|
+
> div {
|
|
6560
|
+
transition: max-height var(--duration-slow) var(--timing-ease-out);
|
|
6561
|
+
max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
|
|
6562
|
+
}
|
|
6563
|
+
`,
|
|
6564
|
+
children: listItems
|
|
6413
6565
|
}
|
|
6414
6566
|
)
|
|
6415
6567
|
] });
|
|
@@ -6419,7 +6571,7 @@ var ObjectSearchContainer = ({
|
|
|
6419
6571
|
onSelectItem([]);
|
|
6420
6572
|
return;
|
|
6421
6573
|
}
|
|
6422
|
-
const { result, errors } = (0,
|
|
6574
|
+
const { result, errors } = (0, import_canvas9.bindVariables)({
|
|
6423
6575
|
value: selectedValue,
|
|
6424
6576
|
variables: flatVariables,
|
|
6425
6577
|
errorPrefix: "Dynamic input"
|
|
@@ -6440,8 +6592,8 @@ var ObjectSearchContainer = ({
|
|
|
6440
6592
|
}
|
|
6441
6593
|
]);
|
|
6442
6594
|
};
|
|
6443
|
-
return /* @__PURE__ */ (0,
|
|
6444
|
-
/* @__PURE__ */ (0,
|
|
6595
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_design_system35.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_design_system35.VerticalRhythm, { children: [
|
|
6596
|
+
/* @__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
6597
|
InputVariables,
|
|
6446
6598
|
{
|
|
6447
6599
|
label,
|
|
@@ -6459,14 +6611,25 @@ var ObjectSearchContainer = ({
|
|
|
6459
6611
|
children
|
|
6460
6612
|
] }) });
|
|
6461
6613
|
};
|
|
6614
|
+
var DefaultResultList = () => {
|
|
6615
|
+
var _a;
|
|
6616
|
+
const { list } = useObjectSearchContext();
|
|
6617
|
+
if (!list.items) {
|
|
6618
|
+
return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ObjectSearchListItemLoadingSkeleton, {}, i));
|
|
6619
|
+
}
|
|
6620
|
+
if (list.items.length === 0) {
|
|
6621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_design_system35.Callout, { type: "info", children: "No results were found" });
|
|
6622
|
+
}
|
|
6623
|
+
return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ObjectSearchListItem, { ...item }, item.id));
|
|
6624
|
+
};
|
|
6462
6625
|
|
|
6463
6626
|
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6464
|
-
var
|
|
6465
|
-
var
|
|
6627
|
+
var import_design_system36 = require("@uniformdev/design-system");
|
|
6628
|
+
var import_react68 = require("react");
|
|
6466
6629
|
|
|
6467
6630
|
// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
|
|
6468
|
-
var
|
|
6469
|
-
var ObjectSearchFilterContainerLabel =
|
|
6631
|
+
var import_react67 = require("@emotion/react");
|
|
6632
|
+
var ObjectSearchFilterContainerLabel = import_react67.css`
|
|
6470
6633
|
align-items: center;
|
|
6471
6634
|
display: flex;
|
|
6472
6635
|
font-size: var(--fs-sm);
|
|
@@ -6474,18 +6637,18 @@ var ObjectSearchFilterContainerLabel = import_react66.css`
|
|
|
6474
6637
|
line-height: 1rem;
|
|
6475
6638
|
margin-bottom: var(--spacing-sm);
|
|
6476
6639
|
`;
|
|
6477
|
-
var ObjectSearchFilterContainer =
|
|
6640
|
+
var ObjectSearchFilterContainer = import_react67.css`
|
|
6478
6641
|
display: grid;
|
|
6479
6642
|
gap: var(--spacing-base);
|
|
6480
6643
|
`;
|
|
6481
|
-
var ObjectSearchFilterGrid = (gridColumns) =>
|
|
6644
|
+
var ObjectSearchFilterGrid = (gridColumns) => import_react67.css`
|
|
6482
6645
|
display: grid;
|
|
6483
6646
|
grid-template-columns: ${gridColumns};
|
|
6484
6647
|
gap: var(--spacing-base);
|
|
6485
6648
|
`;
|
|
6486
6649
|
|
|
6487
6650
|
// src/components/ObjectSearch/ObjectSearchFilter.tsx
|
|
6488
|
-
var
|
|
6651
|
+
var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
|
|
6489
6652
|
var ObjectSearchFilter = ({
|
|
6490
6653
|
requireContentType,
|
|
6491
6654
|
typeSelectorAllTypesOptionText = "All content types",
|
|
@@ -6495,7 +6658,7 @@ var ObjectSearchFilter = ({
|
|
|
6495
6658
|
selectOptions
|
|
6496
6659
|
}) => {
|
|
6497
6660
|
const { query, onSetQuery } = useObjectSearchContext();
|
|
6498
|
-
const [searchState, setSearchState] = (0,
|
|
6661
|
+
const [searchState, setSearchState] = (0, import_react68.useState)({
|
|
6499
6662
|
contentType: "",
|
|
6500
6663
|
keyword: ""
|
|
6501
6664
|
});
|
|
@@ -6505,7 +6668,7 @@ var ObjectSearchFilter = ({
|
|
|
6505
6668
|
});
|
|
6506
6669
|
onSetQuery({ ...query, ...value });
|
|
6507
6670
|
};
|
|
6508
|
-
const memoizedSelectOptions = (0,
|
|
6671
|
+
const memoizedSelectOptions = (0, import_react68.useMemo)(() => {
|
|
6509
6672
|
if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
|
|
6510
6673
|
return [];
|
|
6511
6674
|
}
|
|
@@ -6518,7 +6681,7 @@ var ObjectSearchFilter = ({
|
|
|
6518
6681
|
];
|
|
6519
6682
|
}, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
|
|
6520
6683
|
const shouldRenderSelect = memoizedSelectOptions.length > 0;
|
|
6521
|
-
return /* @__PURE__ */ (0,
|
|
6684
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
|
|
6522
6685
|
"fieldset",
|
|
6523
6686
|
{
|
|
6524
6687
|
css: [
|
|
@@ -6526,8 +6689,8 @@ var ObjectSearchFilter = ({
|
|
|
6526
6689
|
ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
|
|
6527
6690
|
],
|
|
6528
6691
|
children: [
|
|
6529
|
-
memoizedSelectOptions.length ? /* @__PURE__ */ (0,
|
|
6530
|
-
|
|
6692
|
+
memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
6693
|
+
import_design_system36.InputSelect,
|
|
6531
6694
|
{
|
|
6532
6695
|
label: selectLabel,
|
|
6533
6696
|
showLabel: false,
|
|
@@ -6536,8 +6699,8 @@ var ObjectSearchFilter = ({
|
|
|
6536
6699
|
value: query.contentType
|
|
6537
6700
|
}
|
|
6538
6701
|
) : null,
|
|
6539
|
-
/* @__PURE__ */ (0,
|
|
6540
|
-
|
|
6702
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
6703
|
+
import_design_system36.InputKeywordSearch,
|
|
6541
6704
|
{
|
|
6542
6705
|
inputFieldName: searchInputName,
|
|
6543
6706
|
placeholder: searchInputPlaceholderText,
|
|
@@ -6553,154 +6716,14 @@ var ObjectSearchFilter = ({
|
|
|
6553
6716
|
};
|
|
6554
6717
|
|
|
6555
6718
|
// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
|
|
6556
|
-
var
|
|
6719
|
+
var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
|
|
6557
6720
|
var ObjectSearchFilterContainer2 = ({ label, children }) => {
|
|
6558
|
-
return /* @__PURE__ */ (0,
|
|
6559
|
-
label ? /* @__PURE__ */ (0,
|
|
6560
|
-
/* @__PURE__ */ (0,
|
|
6721
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { children: [
|
|
6722
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
|
|
6723
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { css: ObjectSearchFilterContainer, children })
|
|
6561
6724
|
] });
|
|
6562
6725
|
};
|
|
6563
6726
|
|
|
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
6727
|
// src/components/ObjectSearch/ObjectSearchResultItem.tsx
|
|
6705
6728
|
var import_design_system38 = require("@uniformdev/design-system");
|
|
6706
6729
|
var import_timeago3 = require("timeago.js");
|