@uniformdev/mesh-sdk-react 19.27.1-alpha.3 → 19.29.0

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.ts CHANGED
@@ -9,7 +9,7 @@ export * from '@uniformdev/mesh-sdk';
9
9
  import { DataVariableDefinition, DataResourceVariables, DataType } from '@uniformdev/canvas';
10
10
  import { Emitter } from 'mitt';
11
11
  import { BadgeThemeProps, InputSelectProps } from '@uniformdev/design-system';
12
- export { AddListButton, AddListButtonProps, Button, ButtonProps, Callout, CalloutProps, Heading, HeadingProps, Input, InputComboBox, InputComboBoxProps, InputKeywordSearch, InputProps, InputSelect, InputToggle, InputToggleProps, Label, LabelProps, LoadingIndicator, LoadingOverlay, Menu, MenuItem, MenuItemProps, MenuProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, ScrollableList, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, Switch, SwitchProps, Textarea, TextareaProps, Theme, ThemeProps, useParameterShell } from '@uniformdev/design-system';
12
+ export { AddListButton, AddListButtonProps, Button, ButtonProps, Callout, CalloutProps, DrawerContent, Heading, HeadingProps, Input, InputComboBox, InputComboBoxProps, InputKeywordSearch, InputProps, InputSelect, InputToggle, InputToggleProps, Label, LabelProps, LoadingIndicator, LoadingOverlay, Menu, MenuItem, MenuItemProps, MenuProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, ScrollableList, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, Switch, SwitchProps, Textarea, TextareaProps, Theme, ThemeProps, useParameterShell } from '@uniformdev/design-system';
13
13
 
14
14
  declare const SvgCaution: (props: SVGProps<SVGSVGElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
15
15
 
@@ -802,6 +802,8 @@ type SelectedItemProps<TExtraProps = unknown> = {
802
802
  metadata?: Record<string, string>;
803
803
  /** allows for child react elements to be nested in the popover */
804
804
  popoverData?: ReactNode;
805
+ /** disable or enable drag and drop functionality */
806
+ disableDnD?: boolean;
805
807
  } & TExtraProps;
806
808
  type ItemListProps<TListItemExtraProps = unknown> = {
807
809
  items?: Array<SelectedItemProps<TListItemExtraProps>>;
package/dist/index.esm.js CHANGED
@@ -5186,6 +5186,7 @@ var DataRefreshButton = ({
5186
5186
 
5187
5187
  // src/components/ObjectSearch/ObjectSearchContainer.tsx
5188
5188
  init_emotion_jsx_shim();
5189
+ import { css as css29 } from "@emotion/react";
5189
5190
 
5190
5191
  // ../canvas/dist/index.mjs
5191
5192
  init_emotion_jsx_shim();
@@ -6472,7 +6473,19 @@ var ObjectSearchContainer = ({
6472
6473
  const { flatVariables } = useVariables(true);
6473
6474
  const body = /* @__PURE__ */ jsxs30(VerticalRhythm, { children: [
6474
6475
  searchFilters,
6475
- !resultList ? null : /* @__PURE__ */ jsx53(ScrollableList, { role: "list", children: resultList })
6476
+ !resultList ? null : /* @__PURE__ */ jsx53(
6477
+ ScrollableList,
6478
+ {
6479
+ role: "list",
6480
+ css: css29`
6481
+ > div {
6482
+ transition: max-height var(--duration-slow) var(--timing-ease-out);
6483
+ max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
6484
+ }
6485
+ `,
6486
+ children: resultList
6487
+ }
6488
+ )
6476
6489
  ] });
6477
6490
  const handleSelectedVariableChange = (selectedValue) => {
6478
6491
  var _a2;
@@ -6523,8 +6536,8 @@ import { useState as useState15 } from "react";
6523
6536
 
6524
6537
  // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
6525
6538
  init_emotion_jsx_shim();
6526
- import { css as css29 } from "@emotion/react";
6527
- var ObjectSearchFilterContainerLabel = css29`
6539
+ import { css as css30 } from "@emotion/react";
6540
+ var ObjectSearchFilterContainerLabel = css30`
6528
6541
  align-items: center;
6529
6542
  display: flex;
6530
6543
  font-size: var(--fs-sm);
@@ -6532,14 +6545,14 @@ var ObjectSearchFilterContainerLabel = css29`
6532
6545
  line-height: 1rem;
6533
6546
  margin-bottom: var(--spacing-sm);
6534
6547
  `;
6535
- var ObjectSearchFilterContainer = css29`
6548
+ var ObjectSearchFilterContainer = css30`
6536
6549
  display: grid;
6537
6550
  gap: var(--spacing-base);
6538
6551
  `;
6539
- var ObjectSearchFilterDropdownAndTextSearch = css29`
6552
+ var ObjectSearchFilterDropdownAndTextSearch = css30`
6540
6553
  grid-template-columns: 0.5fr 1fr;
6541
6554
  `;
6542
- var ObjectSearchFilterGrid = (gridColumns) => css29`
6555
+ var ObjectSearchFilterGrid = (gridColumns) => css30`
6543
6556
  display: grid;
6544
6557
  grid-template-columns: ${gridColumns};
6545
6558
  gap: var(--spacing-base);
@@ -6609,26 +6622,22 @@ var ObjectSearchFilterContainer2 = ({ label, children }) => {
6609
6622
 
6610
6623
  // src/components/ObjectSearch/ObjectSearchListItem.tsx
6611
6624
  init_emotion_jsx_shim();
6612
- import { Popover } from "@uniformdev/design-system";
6625
+ import { Chip as Chip2, Popover } from "@uniformdev/design-system";
6613
6626
 
6614
6627
  // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
6615
6628
  init_emotion_jsx_shim();
6616
- import { css as css30 } from "@emotion/react";
6629
+ import { css as css31 } from "@emotion/react";
6617
6630
  import { skeletonLoading } from "@uniformdev/design-system";
6618
- var ObjectListItemContainer = css30`
6631
+ var ObjectListItemContainer = css31`
6619
6632
  align-items: center;
6620
6633
  border: 1px solid var(--gray-300);
6621
6634
  border-radius: var(--rounded-base);
6622
6635
  background: var(--white);
6623
6636
  display: grid;
6624
- grid-template-columns: 1fr 32px;
6637
+ grid-template-columns: 1fr auto;
6625
6638
  padding: var(--spacing-sm);
6626
-
6627
- &[hidden] {
6628
- display: none;
6629
- }
6630
6639
  `;
6631
- var ObjectListItemLoading = css30`
6640
+ var ObjectListItemLoading = css31`
6632
6641
  animation: ${skeletonLoading} 1s linear infinite alternate;
6633
6642
  border-color: transparent;
6634
6643
  min-height: 42px;
@@ -6652,31 +6661,32 @@ var ObjectListItemLoading = css30`
6652
6661
  width: 1rem;
6653
6662
  }
6654
6663
  `;
6655
- var ObjectListItemHeadingGroup = css30`
6664
+ var ObjectListItemHeadingGroup = css31`
6656
6665
  align-items: center;
6657
6666
  display: grid;
6658
6667
  `;
6659
- var ObjectListItemTitle = css30`
6668
+ var ObjectListItemTitle = css31`
6660
6669
  color: var(--brand-secondary-1);
6661
6670
  display: block;
6662
6671
  font-size: var(--fs-sm);
6663
6672
  `;
6664
- var ObjectListItemSubtitle = css30`
6673
+ var ObjectListItemSubtitle = css31`
6665
6674
  color: var(--gray-500);
6666
6675
  display: block;
6667
6676
  font-size: var(--fs-xs);
6668
6677
  line-height: 1;
6669
6678
  `;
6670
- var ObjectListItemInfoContainer = css30`
6679
+ var ObjectListItemInfoContainer = css31`
6671
6680
  align-items: center;
6672
6681
  display: flex;
6682
+ gap: var(--spacing-sm);
6673
6683
  justify-content: center;
6674
6684
  `;
6675
- var ObjectListItemControlledContent = css30`
6685
+ var ObjectListItemControlledContent = css31`
6676
6686
  display: flex;
6677
6687
  gap: var(--spacing-sm);
6678
6688
  `;
6679
- var ObjectListItemUnControlledContent = css30`
6689
+ var ObjectListItemUnControlledContent = css31`
6680
6690
  margin-top: var(--spacing-sm);
6681
6691
  grid-column: 1 / -1;
6682
6692
  `;
@@ -6704,8 +6714,8 @@ var ObjectSearchListItem = ({
6704
6714
  }
6705
6715
  return onSelectItem([selectedItem]);
6706
6716
  };
6707
- const hideWhenInSelectedList = selectedListItems.some((item) => item.id === id);
6708
- return /* @__PURE__ */ jsxs33("div", { role: "listitem", hidden: hideWhenInSelectedList, css: ObjectListItemContainer, children: [
6717
+ const selected = selectedListItems.some((item) => item.id === id);
6718
+ return /* @__PURE__ */ jsxs33("div", { role: "listitem", css: ObjectListItemContainer, children: [
6709
6719
  /* @__PURE__ */ jsxs33("div", { role: "button", onClick: handleSelectItem, css: ObjectListItemControlledContent, children: [
6710
6720
  !image ? null : /* @__PURE__ */ jsx56("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
6711
6721
  /* @__PURE__ */ jsxs33("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
@@ -6713,7 +6723,10 @@ var ObjectSearchListItem = ({
6713
6723
  /* @__PURE__ */ jsx56("span", { css: ObjectListItemTitle, children: title })
6714
6724
  ] })
6715
6725
  ] }),
6716
- !popoverData ? null : /* @__PURE__ */ jsx56("div", { css: ObjectListItemInfoContainer, children: /* @__PURE__ */ jsx56(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData }) }),
6726
+ !popoverData ? null : /* @__PURE__ */ jsxs33("div", { css: ObjectListItemInfoContainer, children: [
6727
+ selected ? /* @__PURE__ */ jsx56(Chip2, { text: "selected", size: "xs" }) : null,
6728
+ /* @__PURE__ */ jsx56(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
6729
+ ] }),
6717
6730
  !children ? null : /* @__PURE__ */ jsx56("div", { css: ObjectListItemUnControlledContent, children })
6718
6731
  ] });
6719
6732
  };
@@ -6731,9 +6744,9 @@ init_emotion_jsx_shim();
6731
6744
 
6732
6745
  // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
6733
6746
  init_emotion_jsx_shim();
6734
- import { css as css31 } from "@emotion/react";
6747
+ import { css as css32 } from "@emotion/react";
6735
6748
  import { button as button2 } from "@uniformdev/design-system";
6736
- var ButtonStyles = css31`
6749
+ var ButtonStyles = css32`
6737
6750
  ${button2}
6738
6751
  background: transparent;
6739
6752
  border: 1px solid var(--brand-secondary-1);
@@ -6760,7 +6773,7 @@ var ButtonStyles = css31`
6760
6773
  text-decoration: none;
6761
6774
  }
6762
6775
  `;
6763
- var ButtonIcon = css31`
6776
+ var ButtonIcon = css32`
6764
6777
  width: 1rem;
6765
6778
  height: 1rem;
6766
6779
  `;
@@ -6790,8 +6803,8 @@ var LinkButton = ({
6790
6803
 
6791
6804
  // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
6792
6805
  init_emotion_jsx_shim();
6793
- import { css as css32 } from "@emotion/react";
6794
- var ObjectSearchResultItemContainer = css32`
6806
+ import { css as css33 } from "@emotion/react";
6807
+ var ObjectSearchResultItemContainer = css33`
6795
6808
  align-items: center;
6796
6809
  border: 1px solid var(--gray-300);
6797
6810
  border-radius: var(--rounded-base);
@@ -6807,7 +6820,7 @@ var ObjectSearchResultItemContainer = css32`
6807
6820
  }
6808
6821
  }
6809
6822
  `;
6810
- var ObjectSearchDragHandle = css32`
6823
+ var ObjectSearchDragHandle = css33`
6811
6824
  border-left: 2px dotted var(--gray-300);
6812
6825
  border-right: 2px dotted var(--gray-300);
6813
6826
  position: absolute;
@@ -6816,35 +6829,35 @@ var ObjectSearchDragHandle = css32`
6816
6829
  transition: opacity var(--duration-fast) var(--timing-ease-out);
6817
6830
  opacity: 0;
6818
6831
  `;
6819
- var ObjectSearchResultItemSubtitle = css32`
6832
+ var ObjectSearchResultItemSubtitle = css33`
6820
6833
  color: var(--gray-500);
6821
6834
  display: block;
6822
6835
  font-size: var(--fs-xs);
6823
6836
  line-height: 1;
6824
6837
  `;
6825
- var ObjectSearchResultItemTitle = css32`
6838
+ var ObjectSearchResultItemTitle = css33`
6826
6839
  align-items: center;
6827
6840
  color: var(--brand-secondary-1);
6828
6841
  display: flex;
6829
6842
  gap: var(--spacing-xs);
6830
6843
  `;
6831
- var ObjectSearchResultItemTimeStamp = css32`
6844
+ var ObjectSearchResultItemTimeStamp = css33`
6832
6845
  color: var(--gray-500);
6833
6846
  font-size: var(--fs-xs);
6834
6847
  `;
6835
- var ObjectSearchAuthorStateGroup = css32`
6848
+ var ObjectSearchAuthorStateGroup = css33`
6836
6849
  align-items: center;
6837
6850
  display: flex;
6838
6851
  gap: var(--spacing-sm);
6839
6852
  `;
6840
- var ObjectSearchUpdateGroup = css32`
6853
+ var ObjectSearchUpdateGroup = css33`
6841
6854
  display: grid;
6842
6855
  `;
6843
- var ObjectSearchContentContainer = css32`
6856
+ var ObjectSearchContentContainer = css33`
6844
6857
  display: flex;
6845
6858
  gap: var(--spacing-base);
6846
6859
  `;
6847
- var ObjectSearchImage = css32`
6860
+ var ObjectSearchImage = css33`
6848
6861
  width: 56px;
6849
6862
  object-fit: contain;
6850
6863
  `;
@@ -6914,22 +6927,26 @@ import { DragDropContext as DragDropContext3, Draggable as Draggable3, Droppable
6914
6927
 
6915
6928
  // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
6916
6929
  init_emotion_jsx_shim();
6917
- import { css as css33 } from "@emotion/react";
6918
- var ObjectSearchResultListContainer = css33`
6930
+ import { css as css34 } from "@emotion/react";
6931
+ var ObjectSearchResultListContainer = css34`
6919
6932
  align-items: center;
6920
6933
  display: flex;
6921
6934
  gap: var(--spacing-sm);
6922
6935
  justify-content: space-between;
6923
6936
  `;
6924
- var ObjectSearchDragContainer = css33`
6937
+ var ObjectSearchDragContainer = css34`
6925
6938
  margin: 0 0 var(--spacing-sm);
6926
6939
  `;
6927
- var ObjectSearchResultListCounterContainer = css33`
6940
+ var ObjectSearchContainerDragging = css34`
6941
+ box-shadow: var(--shadow-base);
6942
+ opacity: var(--opacity-50);
6943
+ `;
6944
+ var ObjectSearchResultListCounterContainer = css34`
6928
6945
  align-items: center;
6929
6946
  display: flex;
6930
6947
  gap: var(--spacing-sm);
6931
6948
  `;
6932
- var ObjectSearchResultListTitle = css33`
6949
+ var ObjectSearchResultListTitle = css34`
6933
6950
  font-weight: var(--fw-bold);
6934
6951
  line-height: 1;
6935
6952
  `;
@@ -6942,7 +6959,7 @@ function ObjectSearchResultList({
6942
6959
  onRemoveAllSelected,
6943
6960
  hideRemoveButton = false,
6944
6961
  additionalButtons,
6945
- renderResultComponent = (value) => /* @__PURE__ */ jsx59(ObjectSearchResultItem, { ...value, disableDnD }),
6962
+ renderResultComponent = (value) => /* @__PURE__ */ jsx59(ObjectSearchResultItem, { ...value }),
6946
6963
  multiSelectId,
6947
6964
  disableDnD = false,
6948
6965
  whenNothingSelected = null
@@ -6985,18 +7002,31 @@ function ObjectSearchResultList({
6985
7002
  ] }),
6986
7003
  !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ jsx59(DragDropContext3, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx59(Droppable3, { droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs36("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
6987
7004
  selectedListItems.map((item, i2) => {
6988
- const renderListItem = renderResultComponent(item);
6989
- return /* @__PURE__ */ jsx59(Draggable3, { draggableId: item.id, index: i2, isDragDisabled: disableDnD, children: (provided2, snapshot) => /* @__PURE__ */ jsx59(
6990
- "div",
7005
+ const itemValues = selectedListItems.length === 1 ? { ...item, disableDnD: true } : { ...item, disableDnD };
7006
+ const renderListItem = renderResultComponent(itemValues);
7007
+ return /* @__PURE__ */ jsx59(
7008
+ Draggable3,
6991
7009
  {
6992
- css: ObjectSearchDragContainer,
6993
- ref: provided2.innerRef,
6994
- "data-dragging": snapshot.isDragging,
6995
- ...provided2.draggableProps,
6996
- ...provided2.dragHandleProps,
6997
- children: renderListItem
6998
- }
6999
- ) }, item.id);
7010
+ draggableId: item.id,
7011
+ index: i2,
7012
+ isDragDisabled: selectedListItems.length === 1 || disableDnD,
7013
+ children: (provided2, snapshot) => /* @__PURE__ */ jsx59(
7014
+ "div",
7015
+ {
7016
+ css: [
7017
+ ObjectSearchDragContainer,
7018
+ snapshot.isDragging ? ObjectSearchContainerDragging : void 0
7019
+ ],
7020
+ ref: provided2.innerRef,
7021
+ "data-dragging": snapshot.isDragging,
7022
+ ...provided2.draggableProps,
7023
+ ...provided2.dragHandleProps,
7024
+ children: renderListItem
7025
+ }
7026
+ )
7027
+ },
7028
+ item.id
7029
+ );
7000
7030
  }),
7001
7031
  provided.placeholder
7002
7032
  ] }) }) })
@@ -7209,6 +7239,7 @@ import {
7209
7239
  AddListButton as AddListButton2,
7210
7240
  Button as Button6,
7211
7241
  Callout as Callout5,
7242
+ DrawerContent,
7212
7243
  Heading,
7213
7244
  Input as Input6,
7214
7245
  InputComboBox,
@@ -7254,6 +7285,7 @@ export {
7254
7285
  DataTypeEditor,
7255
7286
  DefaultSearchRow,
7256
7287
  DefaultSelectedItem,
7288
+ DrawerContent,
7257
7289
  EntrySearch,
7258
7290
  Heading,
7259
7291
  icons_exports as Icons,
package/dist/index.js CHANGED
@@ -178,6 +178,7 @@ __export(src_exports, {
178
178
  DataTypeEditor: () => DataTypeEditor,
179
179
  DefaultSearchRow: () => DefaultSearchRow,
180
180
  DefaultSelectedItem: () => DefaultSelectedItem,
181
+ DrawerContent: () => import_design_system36.DrawerContent,
181
182
  EntrySearch: () => EntrySearch,
182
183
  Heading: () => import_design_system36.Heading,
183
184
  Icons: () => icons_exports,
@@ -5307,6 +5308,7 @@ var DataRefreshButton = ({
5307
5308
 
5308
5309
  // src/components/ObjectSearch/ObjectSearchContainer.tsx
5309
5310
  init_emotion_jsx_shim();
5311
+ var import_react52 = require("@emotion/react");
5310
5312
 
5311
5313
  // ../canvas/dist/index.mjs
5312
5314
  init_emotion_jsx_shim();
@@ -6586,7 +6588,19 @@ var ObjectSearchContainer = ({
6586
6588
  const { flatVariables } = useVariables(true);
6587
6589
  const body = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_design_system27.VerticalRhythm, { children: [
6588
6590
  searchFilters,
6589
- !resultList ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_design_system27.ScrollableList, { role: "list", children: resultList })
6591
+ !resultList ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
6592
+ import_design_system27.ScrollableList,
6593
+ {
6594
+ role: "list",
6595
+ css: import_react52.css`
6596
+ > div {
6597
+ transition: max-height var(--duration-slow) var(--timing-ease-out);
6598
+ max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
6599
+ }
6600
+ `,
6601
+ children: resultList
6602
+ }
6603
+ )
6590
6604
  ] });
6591
6605
  const handleSelectedVariableChange = (selectedValue) => {
6592
6606
  var _a2;
@@ -6633,12 +6647,12 @@ var ObjectSearchContainer = ({
6633
6647
  // src/components/ObjectSearch/ObjectSearchFilter.tsx
6634
6648
  init_emotion_jsx_shim();
6635
6649
  var import_design_system28 = require("@uniformdev/design-system");
6636
- var import_react53 = require("react");
6650
+ var import_react54 = require("react");
6637
6651
 
6638
6652
  // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
6639
6653
  init_emotion_jsx_shim();
6640
- var import_react52 = require("@emotion/react");
6641
- var ObjectSearchFilterContainerLabel = import_react52.css`
6654
+ var import_react53 = require("@emotion/react");
6655
+ var ObjectSearchFilterContainerLabel = import_react53.css`
6642
6656
  align-items: center;
6643
6657
  display: flex;
6644
6658
  font-size: var(--fs-sm);
@@ -6646,14 +6660,14 @@ var ObjectSearchFilterContainerLabel = import_react52.css`
6646
6660
  line-height: 1rem;
6647
6661
  margin-bottom: var(--spacing-sm);
6648
6662
  `;
6649
- var ObjectSearchFilterContainer = import_react52.css`
6663
+ var ObjectSearchFilterContainer = import_react53.css`
6650
6664
  display: grid;
6651
6665
  gap: var(--spacing-base);
6652
6666
  `;
6653
- var ObjectSearchFilterDropdownAndTextSearch = import_react52.css`
6667
+ var ObjectSearchFilterDropdownAndTextSearch = import_react53.css`
6654
6668
  grid-template-columns: 0.5fr 1fr;
6655
6669
  `;
6656
- var ObjectSearchFilterGrid = (gridColumns) => import_react52.css`
6670
+ var ObjectSearchFilterGrid = (gridColumns) => import_react53.css`
6657
6671
  display: grid;
6658
6672
  grid-template-columns: ${gridColumns};
6659
6673
  gap: var(--spacing-base);
@@ -6670,7 +6684,7 @@ var ObjectSearchFilter = ({
6670
6684
  selectOptions
6671
6685
  }) => {
6672
6686
  const { query, onSetQuery } = useObjectSearchContext();
6673
- const [searchState, setSearchState] = (0, import_react53.useState)({
6687
+ const [searchState, setSearchState] = (0, import_react54.useState)({
6674
6688
  contentType: "",
6675
6689
  keyword: ""
6676
6690
  });
@@ -6727,22 +6741,18 @@ var import_design_system30 = require("@uniformdev/design-system");
6727
6741
 
6728
6742
  // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
6729
6743
  init_emotion_jsx_shim();
6730
- var import_react54 = require("@emotion/react");
6744
+ var import_react55 = require("@emotion/react");
6731
6745
  var import_design_system29 = require("@uniformdev/design-system");
6732
- var ObjectListItemContainer = import_react54.css`
6746
+ var ObjectListItemContainer = import_react55.css`
6733
6747
  align-items: center;
6734
6748
  border: 1px solid var(--gray-300);
6735
6749
  border-radius: var(--rounded-base);
6736
6750
  background: var(--white);
6737
6751
  display: grid;
6738
- grid-template-columns: 1fr 32px;
6752
+ grid-template-columns: 1fr auto;
6739
6753
  padding: var(--spacing-sm);
6740
-
6741
- &[hidden] {
6742
- display: none;
6743
- }
6744
6754
  `;
6745
- var ObjectListItemLoading = import_react54.css`
6755
+ var ObjectListItemLoading = import_react55.css`
6746
6756
  animation: ${import_design_system29.skeletonLoading} 1s linear infinite alternate;
6747
6757
  border-color: transparent;
6748
6758
  min-height: 42px;
@@ -6766,31 +6776,32 @@ var ObjectListItemLoading = import_react54.css`
6766
6776
  width: 1rem;
6767
6777
  }
6768
6778
  `;
6769
- var ObjectListItemHeadingGroup = import_react54.css`
6779
+ var ObjectListItemHeadingGroup = import_react55.css`
6770
6780
  align-items: center;
6771
6781
  display: grid;
6772
6782
  `;
6773
- var ObjectListItemTitle = import_react54.css`
6783
+ var ObjectListItemTitle = import_react55.css`
6774
6784
  color: var(--brand-secondary-1);
6775
6785
  display: block;
6776
6786
  font-size: var(--fs-sm);
6777
6787
  `;
6778
- var ObjectListItemSubtitle = import_react54.css`
6788
+ var ObjectListItemSubtitle = import_react55.css`
6779
6789
  color: var(--gray-500);
6780
6790
  display: block;
6781
6791
  font-size: var(--fs-xs);
6782
6792
  line-height: 1;
6783
6793
  `;
6784
- var ObjectListItemInfoContainer = import_react54.css`
6794
+ var ObjectListItemInfoContainer = import_react55.css`
6785
6795
  align-items: center;
6786
6796
  display: flex;
6797
+ gap: var(--spacing-sm);
6787
6798
  justify-content: center;
6788
6799
  `;
6789
- var ObjectListItemControlledContent = import_react54.css`
6800
+ var ObjectListItemControlledContent = import_react55.css`
6790
6801
  display: flex;
6791
6802
  gap: var(--spacing-sm);
6792
6803
  `;
6793
- var ObjectListItemUnControlledContent = import_react54.css`
6804
+ var ObjectListItemUnControlledContent = import_react55.css`
6794
6805
  margin-top: var(--spacing-sm);
6795
6806
  grid-column: 1 / -1;
6796
6807
  `;
@@ -6818,8 +6829,8 @@ var ObjectSearchListItem = ({
6818
6829
  }
6819
6830
  return onSelectItem([selectedItem]);
6820
6831
  };
6821
- const hideWhenInSelectedList = selectedListItems.some((item) => item.id === id);
6822
- return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { role: "listitem", hidden: hideWhenInSelectedList, css: ObjectListItemContainer, children: [
6832
+ const selected = selectedListItems.some((item) => item.id === id);
6833
+ return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { role: "listitem", css: ObjectListItemContainer, children: [
6823
6834
  /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { role: "button", onClick: handleSelectItem, css: ObjectListItemControlledContent, children: [
6824
6835
  !image ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
6825
6836
  /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
@@ -6827,7 +6838,10 @@ var ObjectSearchListItem = ({
6827
6838
  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { css: ObjectListItemTitle, children: title })
6828
6839
  ] })
6829
6840
  ] }),
6830
- !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { css: ObjectListItemInfoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system30.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData }) }),
6841
+ !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: ObjectListItemInfoContainer, children: [
6842
+ selected ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system30.Chip, { text: "selected", size: "xs" }) : null,
6843
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system30.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
6844
+ ] }),
6831
6845
  !children ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { css: ObjectListItemUnControlledContent, children })
6832
6846
  ] });
6833
6847
  };
@@ -6845,9 +6859,9 @@ init_emotion_jsx_shim();
6845
6859
 
6846
6860
  // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
6847
6861
  init_emotion_jsx_shim();
6848
- var import_react55 = require("@emotion/react");
6862
+ var import_react56 = require("@emotion/react");
6849
6863
  var import_design_system31 = require("@uniformdev/design-system");
6850
- var ButtonStyles = import_react55.css`
6864
+ var ButtonStyles = import_react56.css`
6851
6865
  ${import_design_system31.button}
6852
6866
  background: transparent;
6853
6867
  border: 1px solid var(--brand-secondary-1);
@@ -6874,7 +6888,7 @@ var ButtonStyles = import_react55.css`
6874
6888
  text-decoration: none;
6875
6889
  }
6876
6890
  `;
6877
- var ButtonIcon = import_react55.css`
6891
+ var ButtonIcon = import_react56.css`
6878
6892
  width: 1rem;
6879
6893
  height: 1rem;
6880
6894
  `;
@@ -6904,8 +6918,8 @@ var LinkButton = ({
6904
6918
 
6905
6919
  // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
6906
6920
  init_emotion_jsx_shim();
6907
- var import_react56 = require("@emotion/react");
6908
- var ObjectSearchResultItemContainer = import_react56.css`
6921
+ var import_react57 = require("@emotion/react");
6922
+ var ObjectSearchResultItemContainer = import_react57.css`
6909
6923
  align-items: center;
6910
6924
  border: 1px solid var(--gray-300);
6911
6925
  border-radius: var(--rounded-base);
@@ -6921,7 +6935,7 @@ var ObjectSearchResultItemContainer = import_react56.css`
6921
6935
  }
6922
6936
  }
6923
6937
  `;
6924
- var ObjectSearchDragHandle = import_react56.css`
6938
+ var ObjectSearchDragHandle = import_react57.css`
6925
6939
  border-left: 2px dotted var(--gray-300);
6926
6940
  border-right: 2px dotted var(--gray-300);
6927
6941
  position: absolute;
@@ -6930,35 +6944,35 @@ var ObjectSearchDragHandle = import_react56.css`
6930
6944
  transition: opacity var(--duration-fast) var(--timing-ease-out);
6931
6945
  opacity: 0;
6932
6946
  `;
6933
- var ObjectSearchResultItemSubtitle = import_react56.css`
6947
+ var ObjectSearchResultItemSubtitle = import_react57.css`
6934
6948
  color: var(--gray-500);
6935
6949
  display: block;
6936
6950
  font-size: var(--fs-xs);
6937
6951
  line-height: 1;
6938
6952
  `;
6939
- var ObjectSearchResultItemTitle = import_react56.css`
6953
+ var ObjectSearchResultItemTitle = import_react57.css`
6940
6954
  align-items: center;
6941
6955
  color: var(--brand-secondary-1);
6942
6956
  display: flex;
6943
6957
  gap: var(--spacing-xs);
6944
6958
  `;
6945
- var ObjectSearchResultItemTimeStamp = import_react56.css`
6959
+ var ObjectSearchResultItemTimeStamp = import_react57.css`
6946
6960
  color: var(--gray-500);
6947
6961
  font-size: var(--fs-xs);
6948
6962
  `;
6949
- var ObjectSearchAuthorStateGroup = import_react56.css`
6963
+ var ObjectSearchAuthorStateGroup = import_react57.css`
6950
6964
  align-items: center;
6951
6965
  display: flex;
6952
6966
  gap: var(--spacing-sm);
6953
6967
  `;
6954
- var ObjectSearchUpdateGroup = import_react56.css`
6968
+ var ObjectSearchUpdateGroup = import_react57.css`
6955
6969
  display: grid;
6956
6970
  `;
6957
- var ObjectSearchContentContainer = import_react56.css`
6971
+ var ObjectSearchContentContainer = import_react57.css`
6958
6972
  display: flex;
6959
6973
  gap: var(--spacing-base);
6960
6974
  `;
6961
- var ObjectSearchImage = import_react56.css`
6975
+ var ObjectSearchImage = import_react57.css`
6962
6976
  width: 56px;
6963
6977
  object-fit: contain;
6964
6978
  `;
@@ -7028,22 +7042,26 @@ var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
7028
7042
 
7029
7043
  // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
7030
7044
  init_emotion_jsx_shim();
7031
- var import_react57 = require("@emotion/react");
7032
- var ObjectSearchResultListContainer = import_react57.css`
7045
+ var import_react58 = require("@emotion/react");
7046
+ var ObjectSearchResultListContainer = import_react58.css`
7033
7047
  align-items: center;
7034
7048
  display: flex;
7035
7049
  gap: var(--spacing-sm);
7036
7050
  justify-content: space-between;
7037
7051
  `;
7038
- var ObjectSearchDragContainer = import_react57.css`
7052
+ var ObjectSearchDragContainer = import_react58.css`
7039
7053
  margin: 0 0 var(--spacing-sm);
7040
7054
  `;
7041
- var ObjectSearchResultListCounterContainer = import_react57.css`
7055
+ var ObjectSearchContainerDragging = import_react58.css`
7056
+ box-shadow: var(--shadow-base);
7057
+ opacity: var(--opacity-50);
7058
+ `;
7059
+ var ObjectSearchResultListCounterContainer = import_react58.css`
7042
7060
  align-items: center;
7043
7061
  display: flex;
7044
7062
  gap: var(--spacing-sm);
7045
7063
  `;
7046
- var ObjectSearchResultListTitle = import_react57.css`
7064
+ var ObjectSearchResultListTitle = import_react58.css`
7047
7065
  font-weight: var(--fw-bold);
7048
7066
  line-height: 1;
7049
7067
  `;
@@ -7056,7 +7074,7 @@ function ObjectSearchResultList({
7056
7074
  onRemoveAllSelected,
7057
7075
  hideRemoveButton = false,
7058
7076
  additionalButtons,
7059
- renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ObjectSearchResultItem, { ...value, disableDnD }),
7077
+ renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ObjectSearchResultItem, { ...value }),
7060
7078
  multiSelectId,
7061
7079
  disableDnD = false,
7062
7080
  whenNothingSelected = null
@@ -7099,18 +7117,31 @@ function ObjectSearchResultList({
7099
7117
  ] }),
7100
7118
  !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_beautiful_dnd3.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_beautiful_dnd3.Droppable, { droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
7101
7119
  selectedListItems.map((item, i2) => {
7102
- const renderListItem = renderResultComponent(item);
7103
- return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_beautiful_dnd3.Draggable, { draggableId: item.id, index: i2, isDragDisabled: disableDnD, children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
7104
- "div",
7120
+ const itemValues = selectedListItems.length === 1 ? { ...item, disableDnD: true } : { ...item, disableDnD };
7121
+ const renderListItem = renderResultComponent(itemValues);
7122
+ return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
7123
+ import_react_beautiful_dnd3.Draggable,
7105
7124
  {
7106
- css: ObjectSearchDragContainer,
7107
- ref: provided2.innerRef,
7108
- "data-dragging": snapshot.isDragging,
7109
- ...provided2.draggableProps,
7110
- ...provided2.dragHandleProps,
7111
- children: renderListItem
7112
- }
7113
- ) }, item.id);
7125
+ draggableId: item.id,
7126
+ index: i2,
7127
+ isDragDisabled: selectedListItems.length === 1 || disableDnD,
7128
+ children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
7129
+ "div",
7130
+ {
7131
+ css: [
7132
+ ObjectSearchDragContainer,
7133
+ snapshot.isDragging ? ObjectSearchContainerDragging : void 0
7134
+ ],
7135
+ ref: provided2.innerRef,
7136
+ "data-dragging": snapshot.isDragging,
7137
+ ...provided2.draggableProps,
7138
+ ...provided2.dragHandleProps,
7139
+ children: renderListItem
7140
+ }
7141
+ )
7142
+ },
7143
+ item.id
7144
+ );
7114
7145
  }),
7115
7146
  provided.placeholder
7116
7147
  ] }) }) })
@@ -7120,7 +7151,7 @@ function ObjectSearchResultList({
7120
7151
  // src/components/ObjectSearch/QueryFilter.tsx
7121
7152
  init_emotion_jsx_shim();
7122
7153
  var import_design_system34 = require("@uniformdev/design-system");
7123
- var import_react58 = require("react");
7154
+ var import_react59 = require("react");
7124
7155
  var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
7125
7156
  var QueryFilter = ({
7126
7157
  requireContentType,
@@ -7152,7 +7183,7 @@ var QueryFilter = ({
7152
7183
  }) => {
7153
7184
  var _a, _b, _c, _d;
7154
7185
  const { query, onSetQuery } = useObjectSearchContext();
7155
- const [queryState, setQueryState] = (0, import_react58.useState)({
7186
+ const [queryState, setQueryState] = (0, import_react59.useState)({
7156
7187
  contentType: "",
7157
7188
  keyword: "",
7158
7189
  count: countValue != null ? countValue : 5,
@@ -7163,7 +7194,7 @@ var QueryFilter = ({
7163
7194
  setQueryState((prev) => ({ ...prev, ...value }));
7164
7195
  onSetQuery({ ...query, ...value });
7165
7196
  };
7166
- (0, import_react58.useEffect)(() => {
7197
+ (0, import_react59.useEffect)(() => {
7167
7198
  onSetQuery(queryState);
7168
7199
  }, [onSetQuery, queryState]);
7169
7200
  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("fieldset", { children: [
@@ -7335,6 +7366,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
7335
7366
  DataTypeEditor,
7336
7367
  DefaultSearchRow,
7337
7368
  DefaultSelectedItem,
7369
+ DrawerContent,
7338
7370
  EntrySearch,
7339
7371
  Heading,
7340
7372
  Icons,
package/dist/index.mjs CHANGED
@@ -5186,6 +5186,7 @@ var DataRefreshButton = ({
5186
5186
 
5187
5187
  // src/components/ObjectSearch/ObjectSearchContainer.tsx
5188
5188
  init_emotion_jsx_shim();
5189
+ import { css as css29 } from "@emotion/react";
5189
5190
 
5190
5191
  // ../canvas/dist/index.mjs
5191
5192
  init_emotion_jsx_shim();
@@ -6472,7 +6473,19 @@ var ObjectSearchContainer = ({
6472
6473
  const { flatVariables } = useVariables(true);
6473
6474
  const body = /* @__PURE__ */ jsxs30(VerticalRhythm, { children: [
6474
6475
  searchFilters,
6475
- !resultList ? null : /* @__PURE__ */ jsx53(ScrollableList, { role: "list", children: resultList })
6476
+ !resultList ? null : /* @__PURE__ */ jsx53(
6477
+ ScrollableList,
6478
+ {
6479
+ role: "list",
6480
+ css: css29`
6481
+ > div {
6482
+ transition: max-height var(--duration-slow) var(--timing-ease-out);
6483
+ max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
6484
+ }
6485
+ `,
6486
+ children: resultList
6487
+ }
6488
+ )
6476
6489
  ] });
6477
6490
  const handleSelectedVariableChange = (selectedValue) => {
6478
6491
  var _a2;
@@ -6523,8 +6536,8 @@ import { useState as useState15 } from "react";
6523
6536
 
6524
6537
  // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
6525
6538
  init_emotion_jsx_shim();
6526
- import { css as css29 } from "@emotion/react";
6527
- var ObjectSearchFilterContainerLabel = css29`
6539
+ import { css as css30 } from "@emotion/react";
6540
+ var ObjectSearchFilterContainerLabel = css30`
6528
6541
  align-items: center;
6529
6542
  display: flex;
6530
6543
  font-size: var(--fs-sm);
@@ -6532,14 +6545,14 @@ var ObjectSearchFilterContainerLabel = css29`
6532
6545
  line-height: 1rem;
6533
6546
  margin-bottom: var(--spacing-sm);
6534
6547
  `;
6535
- var ObjectSearchFilterContainer = css29`
6548
+ var ObjectSearchFilterContainer = css30`
6536
6549
  display: grid;
6537
6550
  gap: var(--spacing-base);
6538
6551
  `;
6539
- var ObjectSearchFilterDropdownAndTextSearch = css29`
6552
+ var ObjectSearchFilterDropdownAndTextSearch = css30`
6540
6553
  grid-template-columns: 0.5fr 1fr;
6541
6554
  `;
6542
- var ObjectSearchFilterGrid = (gridColumns) => css29`
6555
+ var ObjectSearchFilterGrid = (gridColumns) => css30`
6543
6556
  display: grid;
6544
6557
  grid-template-columns: ${gridColumns};
6545
6558
  gap: var(--spacing-base);
@@ -6609,26 +6622,22 @@ var ObjectSearchFilterContainer2 = ({ label, children }) => {
6609
6622
 
6610
6623
  // src/components/ObjectSearch/ObjectSearchListItem.tsx
6611
6624
  init_emotion_jsx_shim();
6612
- import { Popover } from "@uniformdev/design-system";
6625
+ import { Chip as Chip2, Popover } from "@uniformdev/design-system";
6613
6626
 
6614
6627
  // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
6615
6628
  init_emotion_jsx_shim();
6616
- import { css as css30 } from "@emotion/react";
6629
+ import { css as css31 } from "@emotion/react";
6617
6630
  import { skeletonLoading } from "@uniformdev/design-system";
6618
- var ObjectListItemContainer = css30`
6631
+ var ObjectListItemContainer = css31`
6619
6632
  align-items: center;
6620
6633
  border: 1px solid var(--gray-300);
6621
6634
  border-radius: var(--rounded-base);
6622
6635
  background: var(--white);
6623
6636
  display: grid;
6624
- grid-template-columns: 1fr 32px;
6637
+ grid-template-columns: 1fr auto;
6625
6638
  padding: var(--spacing-sm);
6626
-
6627
- &[hidden] {
6628
- display: none;
6629
- }
6630
6639
  `;
6631
- var ObjectListItemLoading = css30`
6640
+ var ObjectListItemLoading = css31`
6632
6641
  animation: ${skeletonLoading} 1s linear infinite alternate;
6633
6642
  border-color: transparent;
6634
6643
  min-height: 42px;
@@ -6652,31 +6661,32 @@ var ObjectListItemLoading = css30`
6652
6661
  width: 1rem;
6653
6662
  }
6654
6663
  `;
6655
- var ObjectListItemHeadingGroup = css30`
6664
+ var ObjectListItemHeadingGroup = css31`
6656
6665
  align-items: center;
6657
6666
  display: grid;
6658
6667
  `;
6659
- var ObjectListItemTitle = css30`
6668
+ var ObjectListItemTitle = css31`
6660
6669
  color: var(--brand-secondary-1);
6661
6670
  display: block;
6662
6671
  font-size: var(--fs-sm);
6663
6672
  `;
6664
- var ObjectListItemSubtitle = css30`
6673
+ var ObjectListItemSubtitle = css31`
6665
6674
  color: var(--gray-500);
6666
6675
  display: block;
6667
6676
  font-size: var(--fs-xs);
6668
6677
  line-height: 1;
6669
6678
  `;
6670
- var ObjectListItemInfoContainer = css30`
6679
+ var ObjectListItemInfoContainer = css31`
6671
6680
  align-items: center;
6672
6681
  display: flex;
6682
+ gap: var(--spacing-sm);
6673
6683
  justify-content: center;
6674
6684
  `;
6675
- var ObjectListItemControlledContent = css30`
6685
+ var ObjectListItemControlledContent = css31`
6676
6686
  display: flex;
6677
6687
  gap: var(--spacing-sm);
6678
6688
  `;
6679
- var ObjectListItemUnControlledContent = css30`
6689
+ var ObjectListItemUnControlledContent = css31`
6680
6690
  margin-top: var(--spacing-sm);
6681
6691
  grid-column: 1 / -1;
6682
6692
  `;
@@ -6704,8 +6714,8 @@ var ObjectSearchListItem = ({
6704
6714
  }
6705
6715
  return onSelectItem([selectedItem]);
6706
6716
  };
6707
- const hideWhenInSelectedList = selectedListItems.some((item) => item.id === id);
6708
- return /* @__PURE__ */ jsxs33("div", { role: "listitem", hidden: hideWhenInSelectedList, css: ObjectListItemContainer, children: [
6717
+ const selected = selectedListItems.some((item) => item.id === id);
6718
+ return /* @__PURE__ */ jsxs33("div", { role: "listitem", css: ObjectListItemContainer, children: [
6709
6719
  /* @__PURE__ */ jsxs33("div", { role: "button", onClick: handleSelectItem, css: ObjectListItemControlledContent, children: [
6710
6720
  !image ? null : /* @__PURE__ */ jsx56("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
6711
6721
  /* @__PURE__ */ jsxs33("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
@@ -6713,7 +6723,10 @@ var ObjectSearchListItem = ({
6713
6723
  /* @__PURE__ */ jsx56("span", { css: ObjectListItemTitle, children: title })
6714
6724
  ] })
6715
6725
  ] }),
6716
- !popoverData ? null : /* @__PURE__ */ jsx56("div", { css: ObjectListItemInfoContainer, children: /* @__PURE__ */ jsx56(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData }) }),
6726
+ !popoverData ? null : /* @__PURE__ */ jsxs33("div", { css: ObjectListItemInfoContainer, children: [
6727
+ selected ? /* @__PURE__ */ jsx56(Chip2, { text: "selected", size: "xs" }) : null,
6728
+ /* @__PURE__ */ jsx56(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
6729
+ ] }),
6717
6730
  !children ? null : /* @__PURE__ */ jsx56("div", { css: ObjectListItemUnControlledContent, children })
6718
6731
  ] });
6719
6732
  };
@@ -6731,9 +6744,9 @@ init_emotion_jsx_shim();
6731
6744
 
6732
6745
  // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
6733
6746
  init_emotion_jsx_shim();
6734
- import { css as css31 } from "@emotion/react";
6747
+ import { css as css32 } from "@emotion/react";
6735
6748
  import { button as button2 } from "@uniformdev/design-system";
6736
- var ButtonStyles = css31`
6749
+ var ButtonStyles = css32`
6737
6750
  ${button2}
6738
6751
  background: transparent;
6739
6752
  border: 1px solid var(--brand-secondary-1);
@@ -6760,7 +6773,7 @@ var ButtonStyles = css31`
6760
6773
  text-decoration: none;
6761
6774
  }
6762
6775
  `;
6763
- var ButtonIcon = css31`
6776
+ var ButtonIcon = css32`
6764
6777
  width: 1rem;
6765
6778
  height: 1rem;
6766
6779
  `;
@@ -6790,8 +6803,8 @@ var LinkButton = ({
6790
6803
 
6791
6804
  // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
6792
6805
  init_emotion_jsx_shim();
6793
- import { css as css32 } from "@emotion/react";
6794
- var ObjectSearchResultItemContainer = css32`
6806
+ import { css as css33 } from "@emotion/react";
6807
+ var ObjectSearchResultItemContainer = css33`
6795
6808
  align-items: center;
6796
6809
  border: 1px solid var(--gray-300);
6797
6810
  border-radius: var(--rounded-base);
@@ -6807,7 +6820,7 @@ var ObjectSearchResultItemContainer = css32`
6807
6820
  }
6808
6821
  }
6809
6822
  `;
6810
- var ObjectSearchDragHandle = css32`
6823
+ var ObjectSearchDragHandle = css33`
6811
6824
  border-left: 2px dotted var(--gray-300);
6812
6825
  border-right: 2px dotted var(--gray-300);
6813
6826
  position: absolute;
@@ -6816,35 +6829,35 @@ var ObjectSearchDragHandle = css32`
6816
6829
  transition: opacity var(--duration-fast) var(--timing-ease-out);
6817
6830
  opacity: 0;
6818
6831
  `;
6819
- var ObjectSearchResultItemSubtitle = css32`
6832
+ var ObjectSearchResultItemSubtitle = css33`
6820
6833
  color: var(--gray-500);
6821
6834
  display: block;
6822
6835
  font-size: var(--fs-xs);
6823
6836
  line-height: 1;
6824
6837
  `;
6825
- var ObjectSearchResultItemTitle = css32`
6838
+ var ObjectSearchResultItemTitle = css33`
6826
6839
  align-items: center;
6827
6840
  color: var(--brand-secondary-1);
6828
6841
  display: flex;
6829
6842
  gap: var(--spacing-xs);
6830
6843
  `;
6831
- var ObjectSearchResultItemTimeStamp = css32`
6844
+ var ObjectSearchResultItemTimeStamp = css33`
6832
6845
  color: var(--gray-500);
6833
6846
  font-size: var(--fs-xs);
6834
6847
  `;
6835
- var ObjectSearchAuthorStateGroup = css32`
6848
+ var ObjectSearchAuthorStateGroup = css33`
6836
6849
  align-items: center;
6837
6850
  display: flex;
6838
6851
  gap: var(--spacing-sm);
6839
6852
  `;
6840
- var ObjectSearchUpdateGroup = css32`
6853
+ var ObjectSearchUpdateGroup = css33`
6841
6854
  display: grid;
6842
6855
  `;
6843
- var ObjectSearchContentContainer = css32`
6856
+ var ObjectSearchContentContainer = css33`
6844
6857
  display: flex;
6845
6858
  gap: var(--spacing-base);
6846
6859
  `;
6847
- var ObjectSearchImage = css32`
6860
+ var ObjectSearchImage = css33`
6848
6861
  width: 56px;
6849
6862
  object-fit: contain;
6850
6863
  `;
@@ -6914,22 +6927,26 @@ import { DragDropContext as DragDropContext3, Draggable as Draggable3, Droppable
6914
6927
 
6915
6928
  // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
6916
6929
  init_emotion_jsx_shim();
6917
- import { css as css33 } from "@emotion/react";
6918
- var ObjectSearchResultListContainer = css33`
6930
+ import { css as css34 } from "@emotion/react";
6931
+ var ObjectSearchResultListContainer = css34`
6919
6932
  align-items: center;
6920
6933
  display: flex;
6921
6934
  gap: var(--spacing-sm);
6922
6935
  justify-content: space-between;
6923
6936
  `;
6924
- var ObjectSearchDragContainer = css33`
6937
+ var ObjectSearchDragContainer = css34`
6925
6938
  margin: 0 0 var(--spacing-sm);
6926
6939
  `;
6927
- var ObjectSearchResultListCounterContainer = css33`
6940
+ var ObjectSearchContainerDragging = css34`
6941
+ box-shadow: var(--shadow-base);
6942
+ opacity: var(--opacity-50);
6943
+ `;
6944
+ var ObjectSearchResultListCounterContainer = css34`
6928
6945
  align-items: center;
6929
6946
  display: flex;
6930
6947
  gap: var(--spacing-sm);
6931
6948
  `;
6932
- var ObjectSearchResultListTitle = css33`
6949
+ var ObjectSearchResultListTitle = css34`
6933
6950
  font-weight: var(--fw-bold);
6934
6951
  line-height: 1;
6935
6952
  `;
@@ -6942,7 +6959,7 @@ function ObjectSearchResultList({
6942
6959
  onRemoveAllSelected,
6943
6960
  hideRemoveButton = false,
6944
6961
  additionalButtons,
6945
- renderResultComponent = (value) => /* @__PURE__ */ jsx59(ObjectSearchResultItem, { ...value, disableDnD }),
6962
+ renderResultComponent = (value) => /* @__PURE__ */ jsx59(ObjectSearchResultItem, { ...value }),
6946
6963
  multiSelectId,
6947
6964
  disableDnD = false,
6948
6965
  whenNothingSelected = null
@@ -6985,18 +7002,31 @@ function ObjectSearchResultList({
6985
7002
  ] }),
6986
7003
  !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ jsx59(DragDropContext3, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx59(Droppable3, { droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs36("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
6987
7004
  selectedListItems.map((item, i2) => {
6988
- const renderListItem = renderResultComponent(item);
6989
- return /* @__PURE__ */ jsx59(Draggable3, { draggableId: item.id, index: i2, isDragDisabled: disableDnD, children: (provided2, snapshot) => /* @__PURE__ */ jsx59(
6990
- "div",
7005
+ const itemValues = selectedListItems.length === 1 ? { ...item, disableDnD: true } : { ...item, disableDnD };
7006
+ const renderListItem = renderResultComponent(itemValues);
7007
+ return /* @__PURE__ */ jsx59(
7008
+ Draggable3,
6991
7009
  {
6992
- css: ObjectSearchDragContainer,
6993
- ref: provided2.innerRef,
6994
- "data-dragging": snapshot.isDragging,
6995
- ...provided2.draggableProps,
6996
- ...provided2.dragHandleProps,
6997
- children: renderListItem
6998
- }
6999
- ) }, item.id);
7010
+ draggableId: item.id,
7011
+ index: i2,
7012
+ isDragDisabled: selectedListItems.length === 1 || disableDnD,
7013
+ children: (provided2, snapshot) => /* @__PURE__ */ jsx59(
7014
+ "div",
7015
+ {
7016
+ css: [
7017
+ ObjectSearchDragContainer,
7018
+ snapshot.isDragging ? ObjectSearchContainerDragging : void 0
7019
+ ],
7020
+ ref: provided2.innerRef,
7021
+ "data-dragging": snapshot.isDragging,
7022
+ ...provided2.draggableProps,
7023
+ ...provided2.dragHandleProps,
7024
+ children: renderListItem
7025
+ }
7026
+ )
7027
+ },
7028
+ item.id
7029
+ );
7000
7030
  }),
7001
7031
  provided.placeholder
7002
7032
  ] }) }) })
@@ -7209,6 +7239,7 @@ import {
7209
7239
  AddListButton as AddListButton2,
7210
7240
  Button as Button6,
7211
7241
  Callout as Callout5,
7242
+ DrawerContent,
7212
7243
  Heading,
7213
7244
  Input as Input6,
7214
7245
  InputComboBox,
@@ -7254,6 +7285,7 @@ export {
7254
7285
  DataTypeEditor,
7255
7286
  DefaultSearchRow,
7256
7287
  DefaultSelectedItem,
7288
+ DrawerContent,
7257
7289
  EntrySearch,
7258
7290
  Heading,
7259
7291
  icons_exports as Icons,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniformdev/mesh-sdk-react",
3
- "version": "19.27.1-alpha.3+9f5adae97",
3
+ "version": "19.29.0",
4
4
  "description": "Uniform Mesh Framework SDK for React",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "./dist/index.js",
@@ -44,10 +44,10 @@
44
44
  },
45
45
  "dependencies": {
46
46
  "@hookform/resolvers": "^3.0.1",
47
- "@lexical/react": "^0.11.0",
48
- "@uniformdev/design-system": "19.27.1-alpha.3+9f5adae97",
49
- "@uniformdev/mesh-sdk": "19.27.1-alpha.3+9f5adae97",
50
- "lexical": "^0.11.0",
47
+ "@lexical/react": "^0.11.1",
48
+ "@uniformdev/design-system": "19.29.0",
49
+ "@uniformdev/mesh-sdk": "19.29.0",
50
+ "lexical": "^0.11.1",
51
51
  "mitt": "^3.0.0",
52
52
  "react-beautiful-dnd": "13.1.1",
53
53
  "react-hook-form": "^7.43.9",
@@ -80,5 +80,5 @@
80
80
  "publishConfig": {
81
81
  "access": "public"
82
82
  },
83
- "gitHead": "9f5adae974295b306b539dea3657d728fed7f527"
83
+ "gitHead": "f8e9d5f6283fb3d72ba095c0e307907dc591ce4a"
84
84
  }