@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.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 import_canvas = require("@uniformdev/canvas");
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, import_canvas.parseVariableExpression)(serialized != null ? serialized : "", (token, type) => {
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 import_canvas3 = require("@uniformdev/canvas");
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 import_canvas2 = require("@uniformdev/canvas");
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, import_canvas2.createVariableReference)(value));
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, import_canvas2.createVariableReference)(reference));
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, import_canvas3.createVariableReference)(this.reference);
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 import_canvas4 = require("@uniformdev/canvas");
4289
+ var import_canvas5 = require("@uniformdev/canvas");
4287
4290
  function hasReferencedVariables(value) {
4288
4291
  let result = false;
4289
- (0, import_canvas4.parseVariableExpression)(value, (token, type) => {
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 import_canvas5 = require("@uniformdev/canvas");
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, import_canvas5.createVariableReference)(node.reference));
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 import_canvas6 = require("@uniformdev/canvas");
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, import_canvas6.bindVariablesToObject)({
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 import_react65 = require("@emotion/react");
6282
- var import_canvas8 = require("@uniformdev/canvas");
6283
- var import_design_system33 = require("@uniformdev/design-system");
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 import_canvas7 = require("@uniformdev/canvas");
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 = ({ currentlySelectedItems, children }) => {
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, import_canvas7.bindVariablesToObject)({
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/ObjectSearchContainer.tsx
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 body = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_design_system33.VerticalRhythm, { children: [
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
- !resultList ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
6403
- import_design_system33.ScrollableList,
6554
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
6555
+ import_design_system35.ScrollableList,
6404
6556
  {
6405
6557
  role: "list",
6406
- css: import_react65.css`
6407
- > div {
6408
- transition: max-height var(--duration-slow) var(--timing-ease-out);
6409
- max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
6410
- }
6411
- `,
6412
- children: resultList
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, import_canvas8.bindVariables)({
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, import_jsx_runtime59.jsx)(import_design_system33.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_design_system33.VerticalRhythm, { children: [
6444
- /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system33.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
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 import_design_system34 = require("@uniformdev/design-system");
6465
- var import_react67 = require("react");
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 import_react66 = require("@emotion/react");
6469
- var ObjectSearchFilterContainerLabel = import_react66.css`
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 = import_react66.css`
6640
+ var ObjectSearchFilterContainer = import_react67.css`
6478
6641
  display: grid;
6479
6642
  gap: var(--spacing-base);
6480
6643
  `;
6481
- var ObjectSearchFilterGrid = (gridColumns) => import_react66.css`
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 import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
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, import_react67.useState)({
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, import_react67.useMemo)(() => {
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, import_jsx_runtime60.jsxs)(
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, import_jsx_runtime60.jsx)(
6530
- import_design_system34.InputSelect,
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, import_jsx_runtime60.jsx)(
6540
- import_design_system34.InputKeywordSearch,
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 import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
6719
+ var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
6557
6720
  var ObjectSearchFilterContainer2 = ({ label, children }) => {
6558
- return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { children: [
6559
- label ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
6560
- /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { css: ObjectSearchFilterContainer, children })
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");