@uniformdev/mesh-sdk-react 19.51.1-alpha.10 → 19.53.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.mts CHANGED
@@ -1178,8 +1178,8 @@ type ObjectSearchFilterProps = {
1178
1178
  * @default 'Content Type Select'
1179
1179
  */
1180
1180
  selectLabel?: string;
1181
- /** sets the select input options */
1182
- selectOptions: Array<{
1181
+ /** sets the select input options, if empty - only keyword search field will be rendered */
1182
+ selectOptions?: Array<{
1183
1183
  id: string;
1184
1184
  name?: string;
1185
1185
  label: string;
@@ -1195,7 +1195,7 @@ type ObjectSearchFilterProps = {
1195
1195
  };
1196
1196
  /**
1197
1197
  * @description Object search filter is an opinionated filter that has pre-defined query and setQuery functions
1198
- * that can be extended with custom fuctions
1198
+ * that can be extended with custom functions
1199
1199
  * @example <ObjectSearchFilter selectOptions={[{ id: 'id value', name: 'name value'}]} /> */
1200
1200
  declare const ObjectSearchFilter: ({ requireContentType, typeSelectorAllTypesOptionText, searchInputName, searchInputPlaceholderText, selectLabel, selectOptions, }: ObjectSearchFilterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
1201
1201
 
@@ -1300,7 +1300,8 @@ declare function useObjectSearchContext<TExtraSearchFilters = unknown, TExtraIte
1300
1300
  type ObjectSearchListItemProps = SelectedItemProps & {
1301
1301
  /** sets the content type value, this is normally used for subtitles e.g. Kitchens */
1302
1302
  contentType?: string | string[];
1303
- /** sets image parameters */
1303
+ /** sets image parameters
1304
+ * @deprecated Please use imageUrl to make it compatible with */
1304
1305
  image?: {
1305
1306
  /** sets the src valuue */
1306
1307
  src: string;
@@ -1315,6 +1316,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
1315
1316
  */
1316
1317
  height?: number;
1317
1318
  };
1319
+ imageUrl?: string;
1318
1320
  /** sets the function call on the role="button" wrapping element */
1319
1321
  onSelect?: (data?: Record<string, unknown>) => void;
1320
1322
  /** allows child components within the popover data */
@@ -1331,7 +1333,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
1331
1333
  /**
1332
1334
  * @description entry search list item is an opinionated UI component best used for initial retrieved results
1333
1335
  * @example <ObjectSearchListItem id="my-result-item" title="title" popoverData={<p>some data info</p>}><div>example of uncontrolled content</div></ObjectSearchListItem> */
1334
- declare const ObjectSearchListItem: ({ id, title, contentType, image, popoverData, onSelect, isMulti, disabled, children, }: ObjectSearchListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
1336
+ declare const ObjectSearchListItem: ({ id, title, contentType, image, imageUrl, popoverData, onSelect, isMulti, disabled, children, }: ObjectSearchListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
1335
1337
  /**
1336
1338
  * An opinionated loading skeleton component best used with ObjectSearchListItem
1337
1339
  * @example <ObjectSearchListItemLoadingSkeleton />
package/dist/index.d.ts CHANGED
@@ -1178,8 +1178,8 @@ type ObjectSearchFilterProps = {
1178
1178
  * @default 'Content Type Select'
1179
1179
  */
1180
1180
  selectLabel?: string;
1181
- /** sets the select input options */
1182
- selectOptions: Array<{
1181
+ /** sets the select input options, if empty - only keyword search field will be rendered */
1182
+ selectOptions?: Array<{
1183
1183
  id: string;
1184
1184
  name?: string;
1185
1185
  label: string;
@@ -1195,7 +1195,7 @@ type ObjectSearchFilterProps = {
1195
1195
  };
1196
1196
  /**
1197
1197
  * @description Object search filter is an opinionated filter that has pre-defined query and setQuery functions
1198
- * that can be extended with custom fuctions
1198
+ * that can be extended with custom functions
1199
1199
  * @example <ObjectSearchFilter selectOptions={[{ id: 'id value', name: 'name value'}]} /> */
1200
1200
  declare const ObjectSearchFilter: ({ requireContentType, typeSelectorAllTypesOptionText, searchInputName, searchInputPlaceholderText, selectLabel, selectOptions, }: ObjectSearchFilterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
1201
1201
 
@@ -1300,7 +1300,8 @@ declare function useObjectSearchContext<TExtraSearchFilters = unknown, TExtraIte
1300
1300
  type ObjectSearchListItemProps = SelectedItemProps & {
1301
1301
  /** sets the content type value, this is normally used for subtitles e.g. Kitchens */
1302
1302
  contentType?: string | string[];
1303
- /** sets image parameters */
1303
+ /** sets image parameters
1304
+ * @deprecated Please use imageUrl to make it compatible with */
1304
1305
  image?: {
1305
1306
  /** sets the src valuue */
1306
1307
  src: string;
@@ -1315,6 +1316,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
1315
1316
  */
1316
1317
  height?: number;
1317
1318
  };
1319
+ imageUrl?: string;
1318
1320
  /** sets the function call on the role="button" wrapping element */
1319
1321
  onSelect?: (data?: Record<string, unknown>) => void;
1320
1322
  /** allows child components within the popover data */
@@ -1331,7 +1333,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
1331
1333
  /**
1332
1334
  * @description entry search list item is an opinionated UI component best used for initial retrieved results
1333
1335
  * @example <ObjectSearchListItem id="my-result-item" title="title" popoverData={<p>some data info</p>}><div>example of uncontrolled content</div></ObjectSearchListItem> */
1334
- declare const ObjectSearchListItem: ({ id, title, contentType, image, popoverData, onSelect, isMulti, disabled, children, }: ObjectSearchListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
1336
+ declare const ObjectSearchListItem: ({ id, title, contentType, image, imageUrl, popoverData, onSelect, isMulti, disabled, children, }: ObjectSearchListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
1335
1337
  /**
1336
1338
  * An opinionated loading skeleton component best used with ObjectSearchListItem
1337
1339
  * @example <ObjectSearchListItemLoadingSkeleton />
package/dist/index.esm.js CHANGED
@@ -6287,7 +6287,7 @@ var ObjectSearchContainer = ({
6287
6287
 
6288
6288
  // src/components/ObjectSearch/ObjectSearchFilter.tsx
6289
6289
  import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
6290
- import { useState as useState16 } from "react";
6290
+ import { useMemo as useMemo15, useState as useState16 } from "react";
6291
6291
 
6292
6292
  // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
6293
6293
  import { css as css32 } from "@emotion/react";
@@ -6303,9 +6303,6 @@ var ObjectSearchFilterContainer = css32`
6303
6303
  display: grid;
6304
6304
  gap: var(--spacing-base);
6305
6305
  `;
6306
- var ObjectSearchFilterDropdownAndTextSearch = css32`
6307
- grid-template-columns: 0.5fr 1fr;
6308
- `;
6309
6306
  var ObjectSearchFilterGrid = (gridColumns) => css32`
6310
6307
  display: grid;
6311
6308
  grid-template-columns: ${gridColumns};
@@ -6333,35 +6330,51 @@ var ObjectSearchFilter = ({
6333
6330
  });
6334
6331
  onSetQuery({ ...query, ...value });
6335
6332
  };
6336
- return /* @__PURE__ */ jsxs35("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
6337
- /* @__PURE__ */ jsx60(
6338
- InputSelect6,
6339
- {
6340
- label: selectLabel,
6341
- showLabel: false,
6342
- onChange: (e) => handleFilterChange({ contentType: e.target.value }),
6343
- options: [
6344
- ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
6345
- ...selectOptions ? selectOptions.map((option) => {
6346
- var _a;
6347
- return { name: option == null ? void 0 : option.name, label: (_a = option.label) != null ? _a : option == null ? void 0 : option.name, id: option.id };
6348
- }) : []
6349
- ],
6350
- value: query.contentType
6351
- }
6352
- ),
6353
- /* @__PURE__ */ jsx60(
6354
- InputKeywordSearch2,
6355
- {
6356
- inputFieldName: searchInputName,
6357
- placeholder: searchInputPlaceholderText,
6358
- onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
6359
- disabledFieldSubmission: true,
6360
- onClear: () => handleFilterChange({ keyword: "" }),
6361
- value: searchState.keyword
6362
- }
6363
- )
6364
- ] });
6333
+ const memoizedSelectOptions = useMemo15(() => {
6334
+ if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
6335
+ return [];
6336
+ }
6337
+ return [
6338
+ ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
6339
+ ...selectOptions ? selectOptions.map((option) => {
6340
+ var _a;
6341
+ return { name: option == null ? void 0 : option.name, label: (_a = option.label) != null ? _a : option == null ? void 0 : option.name, id: option.id };
6342
+ }) : []
6343
+ ];
6344
+ }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
6345
+ const shouldRenderSelect = memoizedSelectOptions.length > 0;
6346
+ return /* @__PURE__ */ jsxs35(
6347
+ "fieldset",
6348
+ {
6349
+ css: [
6350
+ ObjectSearchFilterContainer,
6351
+ ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
6352
+ ],
6353
+ children: [
6354
+ memoizedSelectOptions.length ? /* @__PURE__ */ jsx60(
6355
+ InputSelect6,
6356
+ {
6357
+ label: selectLabel,
6358
+ showLabel: false,
6359
+ onChange: (e) => handleFilterChange({ contentType: e.target.value }),
6360
+ options: memoizedSelectOptions,
6361
+ value: query.contentType
6362
+ }
6363
+ ) : null,
6364
+ /* @__PURE__ */ jsx60(
6365
+ InputKeywordSearch2,
6366
+ {
6367
+ inputFieldName: searchInputName,
6368
+ placeholder: searchInputPlaceholderText,
6369
+ onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
6370
+ disabledFieldSubmission: true,
6371
+ onClear: () => handleFilterChange({ keyword: "" }),
6372
+ value: searchState.keyword
6373
+ }
6374
+ )
6375
+ ]
6376
+ }
6377
+ );
6365
6378
  };
6366
6379
 
6367
6380
  // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
@@ -6420,6 +6433,10 @@ var ObjectListItemHeadingGroup = css33`
6420
6433
  align-items: center;
6421
6434
  display: grid;
6422
6435
  `;
6436
+ var ObjectListItemThumbnail = css33`
6437
+ width: 30px;
6438
+ object-fit: contain;
6439
+ `;
6423
6440
  var ObjectListItemTitle = css33`
6424
6441
  color: var(--brand-secondary-1);
6425
6442
  display: block;
@@ -6453,6 +6470,7 @@ var ObjectSearchListItem = ({
6453
6470
  title,
6454
6471
  contentType,
6455
6472
  image,
6473
+ imageUrl,
6456
6474
  popoverData,
6457
6475
  onSelect,
6458
6476
  isMulti = false,
@@ -6464,7 +6482,7 @@ var ObjectSearchListItem = ({
6464
6482
  const handleSelectItem = () => {
6465
6483
  var _a;
6466
6484
  const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
6467
- const selectedItem = { id, title, contentType, image, popoverData, ...extraData };
6485
+ const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
6468
6486
  if (isMulti) {
6469
6487
  return onSelectItem(selectedItem);
6470
6488
  }
@@ -6485,7 +6503,8 @@ var ObjectSearchListItem = ({
6485
6503
  css: ObjectListItemControlledContent,
6486
6504
  "aria-disabled": disabled,
6487
6505
  children: [
6488
- !image ? null : /* @__PURE__ */ jsx62("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
6506
+ !imageUrl ? null : /* @__PURE__ */ jsx62("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
6507
+ !image || imageUrl ? null : /* @__PURE__ */ jsx62("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
6489
6508
  /* @__PURE__ */ jsxs37("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
6490
6509
  !contentType ? null : /* @__PURE__ */ jsx62("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
6491
6510
  /* @__PURE__ */ jsx62("span", { css: ObjectListItemTitle, children: title })
@@ -6985,7 +7004,7 @@ var QueryFilter = ({
6985
7004
  };
6986
7005
 
6987
7006
  // src/components/ParamTypeDynamicDataProvider.tsx
6988
- import { useEffect as useEffect17, useMemo as useMemo15, useRef as useRef15 } from "react";
7007
+ import { useEffect as useEffect17, useMemo as useMemo16, useRef as useRef15 } from "react";
6989
7008
  import { jsx as jsx67 } from "@emotion/react/jsx-runtime";
6990
7009
  function ParamTypeDynamicDataProvider(props) {
6991
7010
  const { children } = props;
@@ -6994,7 +7013,7 @@ function ParamTypeDynamicDataProvider(props) {
6994
7013
  } = useMeshLocation("paramType");
6995
7014
  const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
6996
7015
  const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
6997
- const variables = useMemo15(
7016
+ const variables = useMemo16(
6998
7017
  () => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
6999
7018
  [dynamicInputsAsVariables, connectedDataAsVariables]
7000
7019
  );
package/dist/index.js CHANGED
@@ -6434,9 +6434,6 @@ var ObjectSearchFilterContainer = import_react66.css`
6434
6434
  display: grid;
6435
6435
  gap: var(--spacing-base);
6436
6436
  `;
6437
- var ObjectSearchFilterDropdownAndTextSearch = import_react66.css`
6438
- grid-template-columns: 0.5fr 1fr;
6439
- `;
6440
6437
  var ObjectSearchFilterGrid = (gridColumns) => import_react66.css`
6441
6438
  display: grid;
6442
6439
  grid-template-columns: ${gridColumns};
@@ -6464,35 +6461,51 @@ var ObjectSearchFilter = ({
6464
6461
  });
6465
6462
  onSetQuery({ ...query, ...value });
6466
6463
  };
6467
- return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
6468
- /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
6469
- import_design_system33.InputSelect,
6470
- {
6471
- label: selectLabel,
6472
- showLabel: false,
6473
- onChange: (e) => handleFilterChange({ contentType: e.target.value }),
6474
- options: [
6475
- ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
6476
- ...selectOptions ? selectOptions.map((option) => {
6477
- var _a;
6478
- return { name: option == null ? void 0 : option.name, label: (_a = option.label) != null ? _a : option == null ? void 0 : option.name, id: option.id };
6479
- }) : []
6480
- ],
6481
- value: query.contentType
6482
- }
6483
- ),
6484
- /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
6485
- import_design_system33.InputKeywordSearch,
6486
- {
6487
- inputFieldName: searchInputName,
6488
- placeholder: searchInputPlaceholderText,
6489
- onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
6490
- disabledFieldSubmission: true,
6491
- onClear: () => handleFilterChange({ keyword: "" }),
6492
- value: searchState.keyword
6493
- }
6494
- )
6495
- ] });
6464
+ const memoizedSelectOptions = (0, import_react67.useMemo)(() => {
6465
+ if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
6466
+ return [];
6467
+ }
6468
+ return [
6469
+ ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
6470
+ ...selectOptions ? selectOptions.map((option) => {
6471
+ var _a;
6472
+ return { name: option == null ? void 0 : option.name, label: (_a = option.label) != null ? _a : option == null ? void 0 : option.name, id: option.id };
6473
+ }) : []
6474
+ ];
6475
+ }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
6476
+ const shouldRenderSelect = memoizedSelectOptions.length > 0;
6477
+ return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
6478
+ "fieldset",
6479
+ {
6480
+ css: [
6481
+ ObjectSearchFilterContainer,
6482
+ ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
6483
+ ],
6484
+ children: [
6485
+ memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
6486
+ import_design_system33.InputSelect,
6487
+ {
6488
+ label: selectLabel,
6489
+ showLabel: false,
6490
+ onChange: (e) => handleFilterChange({ contentType: e.target.value }),
6491
+ options: memoizedSelectOptions,
6492
+ value: query.contentType
6493
+ }
6494
+ ) : null,
6495
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
6496
+ import_design_system33.InputKeywordSearch,
6497
+ {
6498
+ inputFieldName: searchInputName,
6499
+ placeholder: searchInputPlaceholderText,
6500
+ onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
6501
+ disabledFieldSubmission: true,
6502
+ onClear: () => handleFilterChange({ keyword: "" }),
6503
+ value: searchState.keyword
6504
+ }
6505
+ )
6506
+ ]
6507
+ }
6508
+ );
6496
6509
  };
6497
6510
 
6498
6511
  // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
@@ -6551,6 +6564,10 @@ var ObjectListItemHeadingGroup = import_react68.css`
6551
6564
  align-items: center;
6552
6565
  display: grid;
6553
6566
  `;
6567
+ var ObjectListItemThumbnail = import_react68.css`
6568
+ width: 30px;
6569
+ object-fit: contain;
6570
+ `;
6554
6571
  var ObjectListItemTitle = import_react68.css`
6555
6572
  color: var(--brand-secondary-1);
6556
6573
  display: block;
@@ -6584,6 +6601,7 @@ var ObjectSearchListItem = ({
6584
6601
  title,
6585
6602
  contentType,
6586
6603
  image,
6604
+ imageUrl,
6587
6605
  popoverData,
6588
6606
  onSelect,
6589
6607
  isMulti = false,
@@ -6595,7 +6613,7 @@ var ObjectSearchListItem = ({
6595
6613
  const handleSelectItem = () => {
6596
6614
  var _a;
6597
6615
  const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
6598
- const selectedItem = { id, title, contentType, image, popoverData, ...extraData };
6616
+ const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
6599
6617
  if (isMulti) {
6600
6618
  return onSelectItem(selectedItem);
6601
6619
  }
@@ -6616,7 +6634,8 @@ var ObjectSearchListItem = ({
6616
6634
  css: ObjectListItemControlledContent,
6617
6635
  "aria-disabled": disabled,
6618
6636
  children: [
6619
- !image ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
6637
+ !imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
6638
+ !image || imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
6620
6639
  /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
6621
6640
  !contentType ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
6622
6641
  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: ObjectListItemTitle, children: title })
package/dist/index.mjs CHANGED
@@ -6287,7 +6287,7 @@ var ObjectSearchContainer = ({
6287
6287
 
6288
6288
  // src/components/ObjectSearch/ObjectSearchFilter.tsx
6289
6289
  import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
6290
- import { useState as useState16 } from "react";
6290
+ import { useMemo as useMemo15, useState as useState16 } from "react";
6291
6291
 
6292
6292
  // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
6293
6293
  import { css as css32 } from "@emotion/react";
@@ -6303,9 +6303,6 @@ var ObjectSearchFilterContainer = css32`
6303
6303
  display: grid;
6304
6304
  gap: var(--spacing-base);
6305
6305
  `;
6306
- var ObjectSearchFilterDropdownAndTextSearch = css32`
6307
- grid-template-columns: 0.5fr 1fr;
6308
- `;
6309
6306
  var ObjectSearchFilterGrid = (gridColumns) => css32`
6310
6307
  display: grid;
6311
6308
  grid-template-columns: ${gridColumns};
@@ -6333,35 +6330,51 @@ var ObjectSearchFilter = ({
6333
6330
  });
6334
6331
  onSetQuery({ ...query, ...value });
6335
6332
  };
6336
- return /* @__PURE__ */ jsxs35("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
6337
- /* @__PURE__ */ jsx60(
6338
- InputSelect6,
6339
- {
6340
- label: selectLabel,
6341
- showLabel: false,
6342
- onChange: (e) => handleFilterChange({ contentType: e.target.value }),
6343
- options: [
6344
- ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
6345
- ...selectOptions ? selectOptions.map((option) => {
6346
- var _a;
6347
- return { name: option == null ? void 0 : option.name, label: (_a = option.label) != null ? _a : option == null ? void 0 : option.name, id: option.id };
6348
- }) : []
6349
- ],
6350
- value: query.contentType
6351
- }
6352
- ),
6353
- /* @__PURE__ */ jsx60(
6354
- InputKeywordSearch2,
6355
- {
6356
- inputFieldName: searchInputName,
6357
- placeholder: searchInputPlaceholderText,
6358
- onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
6359
- disabledFieldSubmission: true,
6360
- onClear: () => handleFilterChange({ keyword: "" }),
6361
- value: searchState.keyword
6362
- }
6363
- )
6364
- ] });
6333
+ const memoizedSelectOptions = useMemo15(() => {
6334
+ if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
6335
+ return [];
6336
+ }
6337
+ return [
6338
+ ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
6339
+ ...selectOptions ? selectOptions.map((option) => {
6340
+ var _a;
6341
+ return { name: option == null ? void 0 : option.name, label: (_a = option.label) != null ? _a : option == null ? void 0 : option.name, id: option.id };
6342
+ }) : []
6343
+ ];
6344
+ }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
6345
+ const shouldRenderSelect = memoizedSelectOptions.length > 0;
6346
+ return /* @__PURE__ */ jsxs35(
6347
+ "fieldset",
6348
+ {
6349
+ css: [
6350
+ ObjectSearchFilterContainer,
6351
+ ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
6352
+ ],
6353
+ children: [
6354
+ memoizedSelectOptions.length ? /* @__PURE__ */ jsx60(
6355
+ InputSelect6,
6356
+ {
6357
+ label: selectLabel,
6358
+ showLabel: false,
6359
+ onChange: (e) => handleFilterChange({ contentType: e.target.value }),
6360
+ options: memoizedSelectOptions,
6361
+ value: query.contentType
6362
+ }
6363
+ ) : null,
6364
+ /* @__PURE__ */ jsx60(
6365
+ InputKeywordSearch2,
6366
+ {
6367
+ inputFieldName: searchInputName,
6368
+ placeholder: searchInputPlaceholderText,
6369
+ onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
6370
+ disabledFieldSubmission: true,
6371
+ onClear: () => handleFilterChange({ keyword: "" }),
6372
+ value: searchState.keyword
6373
+ }
6374
+ )
6375
+ ]
6376
+ }
6377
+ );
6365
6378
  };
6366
6379
 
6367
6380
  // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
@@ -6420,6 +6433,10 @@ var ObjectListItemHeadingGroup = css33`
6420
6433
  align-items: center;
6421
6434
  display: grid;
6422
6435
  `;
6436
+ var ObjectListItemThumbnail = css33`
6437
+ width: 30px;
6438
+ object-fit: contain;
6439
+ `;
6423
6440
  var ObjectListItemTitle = css33`
6424
6441
  color: var(--brand-secondary-1);
6425
6442
  display: block;
@@ -6453,6 +6470,7 @@ var ObjectSearchListItem = ({
6453
6470
  title,
6454
6471
  contentType,
6455
6472
  image,
6473
+ imageUrl,
6456
6474
  popoverData,
6457
6475
  onSelect,
6458
6476
  isMulti = false,
@@ -6464,7 +6482,7 @@ var ObjectSearchListItem = ({
6464
6482
  const handleSelectItem = () => {
6465
6483
  var _a;
6466
6484
  const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
6467
- const selectedItem = { id, title, contentType, image, popoverData, ...extraData };
6485
+ const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
6468
6486
  if (isMulti) {
6469
6487
  return onSelectItem(selectedItem);
6470
6488
  }
@@ -6485,7 +6503,8 @@ var ObjectSearchListItem = ({
6485
6503
  css: ObjectListItemControlledContent,
6486
6504
  "aria-disabled": disabled,
6487
6505
  children: [
6488
- !image ? null : /* @__PURE__ */ jsx62("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
6506
+ !imageUrl ? null : /* @__PURE__ */ jsx62("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
6507
+ !image || imageUrl ? null : /* @__PURE__ */ jsx62("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
6489
6508
  /* @__PURE__ */ jsxs37("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
6490
6509
  !contentType ? null : /* @__PURE__ */ jsx62("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
6491
6510
  /* @__PURE__ */ jsx62("span", { css: ObjectListItemTitle, children: title })
@@ -6985,7 +7004,7 @@ var QueryFilter = ({
6985
7004
  };
6986
7005
 
6987
7006
  // src/components/ParamTypeDynamicDataProvider.tsx
6988
- import { useEffect as useEffect17, useMemo as useMemo15, useRef as useRef15 } from "react";
7007
+ import { useEffect as useEffect17, useMemo as useMemo16, useRef as useRef15 } from "react";
6989
7008
  import { jsx as jsx67 } from "@emotion/react/jsx-runtime";
6990
7009
  function ParamTypeDynamicDataProvider(props) {
6991
7010
  const { children } = props;
@@ -6994,7 +7013,7 @@ function ParamTypeDynamicDataProvider(props) {
6994
7013
  } = useMeshLocation("paramType");
6995
7014
  const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
6996
7015
  const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
6997
- const variables = useMemo15(
7016
+ const variables = useMemo16(
6998
7017
  () => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
6999
7018
  [dynamicInputsAsVariables, connectedDataAsVariables]
7000
7019
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniformdev/mesh-sdk-react",
3
- "version": "19.51.1-alpha.10+ee32ab8b6",
3
+ "version": "19.53.0",
4
4
  "description": "Uniform Mesh Framework SDK for React",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "./dist/index.js",
@@ -50,9 +50,9 @@
50
50
  "@lexical/selection": "^0.12.0",
51
51
  "@lexical/utils": "^0.12.0",
52
52
  "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v4.10.1/react-icons-all-files-4.10.1.tgz",
53
- "@uniformdev/canvas": "19.51.1-alpha.10+ee32ab8b6",
54
- "@uniformdev/design-system": "19.51.1-alpha.10+ee32ab8b6",
55
- "@uniformdev/mesh-sdk": "19.51.1-alpha.10+ee32ab8b6",
53
+ "@uniformdev/canvas": "19.53.0",
54
+ "@uniformdev/design-system": "19.53.0",
55
+ "@uniformdev/mesh-sdk": "19.53.0",
56
56
  "dequal": "^2.0.3",
57
57
  "lexical": "^0.12.0",
58
58
  "mitt": "^3.0.0",
@@ -86,5 +86,5 @@
86
86
  "publishConfig": {
87
87
  "access": "public"
88
88
  },
89
- "gitHead": "ee32ab8b66da53e39f0714b708d5cd2ec49592bd"
89
+ "gitHead": "2f5a368ac31888a37da39c0e449b29b94c35c591"
90
90
  }