@uniformdev/mesh-sdk-react 19.79.1-alpha.13 → 19.79.1-alpha.18

package/LICENSE.txt

@@ -1,2 +1,2 @@
-© 2023 Uniform Systems, Inc. All Rights Reserved.
+© 2024 Uniform Systems, Inc. All Rights Reserved.
 See details of Uniform Systems, Inc. Master Subscription Agreement here: https://uniform.dev/eula

package/dist/index.d.mts

@@ -903,8 +903,9 @@ type VariableEditorProps<TEditorContext = unknown, TEditVariableCompletedContext
     onCancel: (context: TEditVariableCancelledContext) => void;
     context: TEditorContext | undefined;
     disableAutoFocusOnMount?: boolean;
+    showDisplayName?: boolean;
 };
-declare function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip, }: VariableEditorProps<any, unknown, EditConnectedDataResponseCancellationContext>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function VariableEditor({ variable, onSubmit, onCancel, showDisplayName, disableMeshTip, }: VariableEditorProps<any, unknown, EditConnectedDataResponseCancellationContext>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type VariablesProviderProps<TEditVariableContext = unknown, TEditVariableCompletedContext = unknown, TEditVariableCancelledContext = unknown> = React.PropsWithChildren<{
     /**
@@ -1358,11 +1359,11 @@ type ObjectSearchListItemProps = SelectedItemProps & {
     isMulti?: boolean;
     /** sets disabled state to the interactive element */
     disabled?: boolean;
-};
+} & React$1.HTMLAttributes<HTMLDivElement>;
 /**
  * @description entry search list item is an opinionated UI component best used for initial retrieved results
  * @example <ObjectSearchListItem  id="my-result-item" title="title" popoverData={<p>some data info</p>}><div>example of uncontrolled content</div></ObjectSearchListItem> */
-declare const ObjectSearchListItem: ({ id, title, contentType, image, imageUrl, popoverData, onSelect, isMulti, disabled, children, }: ObjectSearchListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ObjectSearchListItem: ({ id, title, contentType, image, imageUrl, popoverData, onSelect, isMulti, disabled, children, ...props }: ObjectSearchListItemProps & React$1.HTMLAttributes<HTMLDivElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 /**
  * An opinionated loading skeleton component best used with ObjectSearchListItem
  * @example <ObjectSearchListItemLoadingSkeleton />
@@ -1414,6 +1415,8 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
      * @default 'Selected'
      */
     resultLabelText?: string;
+    /** sets and override react node replacing the whole HTML block for the result label and counter */
+    resultLabelOverride?: ReactNode;
     /** sets the on remove button click action */
     onRemoveAllSelected?: () => void;
     /** sets the remove button text
@@ -1425,9 +1428,9 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
      */
     hideRemoveButton?: boolean;
     /** allows additional buttons to be added to the result title group */
-    additionalButtons?: React.ReactNode;
+    additionalButtons?: React__default.ReactNode;
     /** allows placing child components within the result list area */
-    renderResultComponent?: (value: TRenderComponent) => React.ReactNode;
+    renderResultComponent?: (value: TRenderComponent) => React__default.ReactNode;
     /** disable or enable drag and drop functionality
      * @default false
      */
@@ -1435,7 +1438,7 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
     /** sets the draggable id value */
     multiSelectId?: string;
     /** Rendered when nothing is selected */
-    whenNothingSelected?: React.ReactNode;
+    whenNothingSelected?: React__default.ReactNode;
     /**
      *  Special case for re-parenting the drag and drop container in case of issues with "position: fixed" and "transform:
      * You can read more about this here https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/reparenting.md
@@ -1449,7 +1452,7 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
  * maintain drag and drop functionality
  * @example <ObjectSearchResultList id="my-id" title="title" renderResultComponent={(values) => <CustomComponent {...values} />} />
  */
-declare function ObjectSearchResultList<TRenderComponent extends SelectedItemProps = SelectedItemProps>({ resultLabelText, removeButtonText, onRemoveAllSelected, hideRemoveButton, additionalButtons, renderResultComponent, multiSelectId, disableDnD, getContainerForDnDReparenting, whenNothingSelected, }: ObjectSearchResultListProps<TRenderComponent>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function ObjectSearchResultList<TRenderComponent extends SelectedItemProps = SelectedItemProps>({ resultLabelText, removeButtonText, onRemoveAllSelected, hideRemoveButton, resultLabelOverride, additionalButtons, renderResultComponent, multiSelectId, disableDnD, getContainerForDnDReparenting, whenNothingSelected, }: ObjectSearchResultListProps<TRenderComponent>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type QueryFilterSearchProps = {
     /** sets the count value */
@@ -1459,12 +1462,18 @@ type QueryFilterSearchProps = {
     /** sets the sortOrder filter value */
     sortOrder: string;
 };
-type QuertFilterSelectionOptionProps = Array<{
-    id: string;
-    name: string;
+type QueryFilterSelectionOptionProps = Array<{
+    /** @deprecated please use value instead */
+    id?: string;
+    /** @deprecated please use value or label instead */
+    name?: string;
+    /** contains id or machine values. will be used as value attribute in <option> */
+    value?: string;
+    /** Contains human-readable display name for select options.
+     *  Used as value in case value is not present <option> */
     label: string;
 }>;
-type QueryFilterProps<TSelectOptions extends QuertFilterSelectionOptionProps = QuertFilterSelectionOptionProps> = {
+type QueryFilterProps<TSelectOptions extends QueryFilterSelectionOptionProps = QueryFilterSelectionOptionProps> = {
     /** sets the query filter title
      * @default 'Configure Query'
      */
@@ -1485,10 +1494,11 @@ type QueryFilterProps<TSelectOptions extends QuertFilterSelectionOptionProps = Q
      * @default 'Count'
      */
     countLabel?: string;
-    /** sets the count value or items to show
+    /** sets the count value or items to show. As a string you can pass dynamic variables ${countFromQuery} for example
      * @default 5
+     * @deprecated please use ObjectSearchProviderProps['defaultQuery'] to pass initial count value
      */
-    countValue?: number;
+    countValue?: number | string;
     /** sets the sort label text
      * @default 'Sort'
      */

package/dist/index.d.ts

@@ -903,8 +903,9 @@ type VariableEditorProps<TEditorContext = unknown, TEditVariableCompletedContext
     onCancel: (context: TEditVariableCancelledContext) => void;
     context: TEditorContext | undefined;
     disableAutoFocusOnMount?: boolean;
+    showDisplayName?: boolean;
 };
-declare function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip, }: VariableEditorProps<any, unknown, EditConnectedDataResponseCancellationContext>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function VariableEditor({ variable, onSubmit, onCancel, showDisplayName, disableMeshTip, }: VariableEditorProps<any, unknown, EditConnectedDataResponseCancellationContext>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type VariablesProviderProps<TEditVariableContext = unknown, TEditVariableCompletedContext = unknown, TEditVariableCancelledContext = unknown> = React.PropsWithChildren<{
     /**
@@ -1358,11 +1359,11 @@ type ObjectSearchListItemProps = SelectedItemProps & {
     isMulti?: boolean;
     /** sets disabled state to the interactive element */
     disabled?: boolean;
-};
+} & React$1.HTMLAttributes<HTMLDivElement>;
 /**
  * @description entry search list item is an opinionated UI component best used for initial retrieved results
  * @example <ObjectSearchListItem  id="my-result-item" title="title" popoverData={<p>some data info</p>}><div>example of uncontrolled content</div></ObjectSearchListItem> */
-declare const ObjectSearchListItem: ({ id, title, contentType, image, imageUrl, popoverData, onSelect, isMulti, disabled, children, }: ObjectSearchListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ObjectSearchListItem: ({ id, title, contentType, image, imageUrl, popoverData, onSelect, isMulti, disabled, children, ...props }: ObjectSearchListItemProps & React$1.HTMLAttributes<HTMLDivElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 /**
  * An opinionated loading skeleton component best used with ObjectSearchListItem
  * @example <ObjectSearchListItemLoadingSkeleton />
@@ -1414,6 +1415,8 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
      * @default 'Selected'
      */
     resultLabelText?: string;
+    /** sets and override react node replacing the whole HTML block for the result label and counter */
+    resultLabelOverride?: ReactNode;
     /** sets the on remove button click action */
     onRemoveAllSelected?: () => void;
     /** sets the remove button text
@@ -1425,9 +1428,9 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
      */
     hideRemoveButton?: boolean;
     /** allows additional buttons to be added to the result title group */
-    additionalButtons?: React.ReactNode;
+    additionalButtons?: React__default.ReactNode;
     /** allows placing child components within the result list area */
-    renderResultComponent?: (value: TRenderComponent) => React.ReactNode;
+    renderResultComponent?: (value: TRenderComponent) => React__default.ReactNode;
     /** disable or enable drag and drop functionality
      * @default false
      */
@@ -1435,7 +1438,7 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
     /** sets the draggable id value */
     multiSelectId?: string;
     /** Rendered when nothing is selected */
-    whenNothingSelected?: React.ReactNode;
+    whenNothingSelected?: React__default.ReactNode;
     /**
      *  Special case for re-parenting the drag and drop container in case of issues with "position: fixed" and "transform:
      * You can read more about this here https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/reparenting.md
@@ -1449,7 +1452,7 @@ type ObjectSearchResultListProps<TRenderComponent extends SelectedItemProps = Se
  * maintain drag and drop functionality
  * @example <ObjectSearchResultList id="my-id" title="title" renderResultComponent={(values) => <CustomComponent {...values} />} />
  */
-declare function ObjectSearchResultList<TRenderComponent extends SelectedItemProps = SelectedItemProps>({ resultLabelText, removeButtonText, onRemoveAllSelected, hideRemoveButton, additionalButtons, renderResultComponent, multiSelectId, disableDnD, getContainerForDnDReparenting, whenNothingSelected, }: ObjectSearchResultListProps<TRenderComponent>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function ObjectSearchResultList<TRenderComponent extends SelectedItemProps = SelectedItemProps>({ resultLabelText, removeButtonText, onRemoveAllSelected, hideRemoveButton, resultLabelOverride, additionalButtons, renderResultComponent, multiSelectId, disableDnD, getContainerForDnDReparenting, whenNothingSelected, }: ObjectSearchResultListProps<TRenderComponent>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type QueryFilterSearchProps = {
     /** sets the count value */
@@ -1459,12 +1462,18 @@ type QueryFilterSearchProps = {
     /** sets the sortOrder filter value */
     sortOrder: string;
 };
-type QuertFilterSelectionOptionProps = Array<{
-    id: string;
-    name: string;
+type QueryFilterSelectionOptionProps = Array<{
+    /** @deprecated please use value instead */
+    id?: string;
+    /** @deprecated please use value or label instead */
+    name?: string;
+    /** contains id or machine values. will be used as value attribute in <option> */
+    value?: string;
+    /** Contains human-readable display name for select options.
+     *  Used as value in case value is not present <option> */
     label: string;
 }>;
-type QueryFilterProps<TSelectOptions extends QuertFilterSelectionOptionProps = QuertFilterSelectionOptionProps> = {
+type QueryFilterProps<TSelectOptions extends QueryFilterSelectionOptionProps = QueryFilterSelectionOptionProps> = {
     /** sets the query filter title
      * @default 'Configure Query'
      */
@@ -1485,10 +1494,11 @@ type QueryFilterProps<TSelectOptions extends QuertFilterSelectionOptionProps = Q
      * @default 'Count'
      */
     countLabel?: string;
-    /** sets the count value or items to show
+    /** sets the count value or items to show. As a string you can pass dynamic variables ${countFromQuery} for example
      * @default 5
+     * @deprecated please use ObjectSearchProviderProps['defaultQuery'] to pass initial count value
      */
-    countValue?: number;
+    countValue?: number | string;
     /** sets the sort label text
      * @default 'Sort'
      */

package/dist/index.esm.js

@@ -3099,9 +3099,10 @@ function VariableEditor({
   variable,
   onSubmit,
   onCancel,
+  showDisplayName,
   disableMeshTip
 }) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { variables } = useVariables();
   const currentVariable = variables[variable];
   const { register, handleSubmit, formState } = useForm({
@@ -3156,6 +3157,16 @@ function VariableEditor({
           }
         }
       ),
+      showDisplayName ? /* @__PURE__ */ jsx31(
+        Input2,
+        {
+          ...register("displayName"),
+          label: "Display name",
+          autoComplete: "off",
+          caption: "This is the name that will be displayed in the UI. If not provided, the name will be used.",
+          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+        }
+      ) : null,
       /* @__PURE__ */ jsx31(
         Input2,
         {
@@ -3163,7 +3174,7 @@ function VariableEditor({
           label: "Help Text",
           caption: "Appears when entering a value for this variable.",
           autoComplete: "off",
-          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+          errorMessage: (_g = formState.errors.helpText) == null ? void 0 : _g.message
         }
       ),
       /* @__PURE__ */ jsx31(
@@ -3172,7 +3183,7 @@ function VariableEditor({
           ...register("default"),
           label: "Default Value",
           autoComplete: "off",
-          errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
+          errorMessage: (_h = formState.errors.default) == null ? void 0 : _h.message
         }
       ),
       /* @__PURE__ */ jsx31(HorizontalRhythm, { justify: "space-between", children: /* @__PURE__ */ jsxs16(HorizontalRhythm, { gap: "sm", children: [
@@ -4065,32 +4076,41 @@ var menuBtn2 = css21`
   transform: translateY(-50%);
 `;
 var input = css21`
+  --input-padding: 12px var(--spacing-base) 12px var(--spacing-sm);
   appearance: none;
   background-color: var(--white);
-  border: 1px solid var(--gray-200);
+  border: 1px solid var(--gray-300);
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
-  padding-block: var(--spacing-base);
-  padding-left: var(--spacing-base);
-  padding-right: var(--spacing-lg);
-  line-height: 1.75;
+  padding: var(--input-padding);
+  min-height: 50px;
   width: 100%;
   position: relative;
   transition: background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
+    color var(--duration-fast) var(--timing-ease-out), box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
+
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
 
+  &[data-focus='true'],
   &:focus,
   &:focus-within {
-    border-color: var(--typography-base);
-    box-shadow: none;
+    border-color: var(--accent-dark-active);
+    box-shadow: var(--elevation-100);
     outline: none;
   }
 
+  &[data-disabled='true'],
   &:disabled,
   &:disabled::placeholder {
     cursor: not-allowed;
-    color: var(--gray-400);
+    color: var(--gray-300);
     border-color: var(--gray-300);
   }
 
@@ -5186,13 +5206,13 @@ function VariablesList() {
       const result = [...sorted || []];
       const [removed] = (_b = result == null ? void 0 : result.splice(res.source.index, 1)) != null ? _b : [];
       result == null ? void 0 : result.splice(res.destination.index, 0, removed);
-      const resultAsObj = result.reduce(
-        (acc, item, index) => ({
+      const resultAsObj = result.reduce((acc, item, index) => {
+        const { name, ...variableDefinition } = item;
+        return {
           ...acc,
-          [item.name]: { type: item.type, default: item.default, order: index }
-        }),
-        {}
-      );
+          [item.name]: { ...variableDefinition, order: index }
+        };
+      }, {});
       dispatch({ type: "reorder", result: resultAsObj });
       return result;
     }
@@ -6375,7 +6395,8 @@ var ObjectSearchListItem = ({
   onSelect,
   isMulti,
   disabled,
-  children
+  children,
+  ...props
 }) => {
   const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
   const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
@@ -6395,6 +6416,7 @@ var ObjectSearchListItem = ({
       role: "listitem",
       css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
       "data-testid": "list-item",
+      ...props,
       children: [
         /* @__PURE__ */ jsxs34(
           "div",
@@ -6515,7 +6537,7 @@ var DefaultResultList = () => {
 };
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
+import { DebouncedInputKeywordSearch, InputSelect as InputSelect6 } from "@uniformdev/design-system";
 import { useMemo as useMemo15, useState as useState17 } from "react";
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
@@ -6589,14 +6611,14 @@ var ObjectSearchFilter = ({
           }
         ) : null,
         /* @__PURE__ */ jsx62(
-          InputKeywordSearch2,
+          DebouncedInputKeywordSearch,
           {
             inputFieldName: searchInputName,
             placeholder: searchInputPlaceholderText,
-            onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+            onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
             disabledFieldSubmission: true,
-            onClear: () => handleFilterChange({ keyword: "" }),
-            value: searchState.keyword
+            defaultValue: searchState.keyword,
+            delay: 300
           }
         )
       ]
@@ -6829,6 +6851,7 @@ function ObjectSearchResultList({
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
+  resultLabelOverride,
   additionalButtons,
   renderResultComponent = (value) => /* @__PURE__ */ jsx66(ObjectSearchResultItem, { ...value }),
   multiSelectId,
@@ -6874,11 +6897,11 @@ function ObjectSearchResultList({
   };
   return /* @__PURE__ */ jsxs40(Fragment13, { children: [
     /* @__PURE__ */ jsxs40("div", { role: "group", css: ObjectSearchResultListContainer, children: [
-      /* @__PURE__ */ jsxs40("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+      !resultLabelOverride ? /* @__PURE__ */ jsxs40("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
         /* @__PURE__ */ jsx66("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
         !selectedListItems.length ? null : /* @__PURE__ */ jsx66(Counter, { count: selectedListItems.length })
-      ] }),
+      ] }) : resultLabelOverride,
       /* @__PURE__ */ jsxs40("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
         hideRemoveButton ? null : /* @__PURE__ */ jsx66(
@@ -6920,7 +6943,7 @@ function ObjectSearchResultList({
 }
 
 // src/components/ObjectSearch/QueryFilter.tsx
-import { Input as Input5, InputKeywordSearch as InputKeywordSearch3, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
+import { DebouncedInputKeywordSearch as DebouncedInputKeywordSearch2, Input as Input5, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
 import { useEffect as useEffect16, useState as useState18 } from "react";
 import { jsx as jsx67, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var QueryFilter = ({
@@ -6939,26 +6962,24 @@ var QueryFilter = ({
   sortOrderLabel = "Sort Order",
   sortOrderOptions = [
     {
-      name: "Ascending",
-      id: "asc",
+      value: "asc",
       label: "Ascending"
     },
     {
-      name: "Descending",
-      id: "desc",
+      value: "desc",
       label: "Descending"
     }
   ],
   children
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { query, onSetQuery } = useObjectSearchContext();
   const [queryState, setQueryState] = useState18({
     contentType: (_a = query.contentType) != null ? _a : "",
-    keyword: (_b = query.contentType) != null ? _b : "",
-    count: countValue != null ? countValue : 5,
-    sortBy: (_c = sortOptions[0].id) != null ? _c : "",
-    sortOrder: (_d = sortOrderOptions[0].id) != null ? _d : ""
+    keyword: (_b = query.keyword) != null ? _b : "",
+    count: (_c = query.count) != null ? _c : countValue,
+    sortBy: (_d = query.sortBy) != null ? _d : "",
+    sortOrder: (_e = query.sortOrder) != null ? _e : ""
   });
   const handleFilterChange = (value) => {
     setQueryState((prev) => ({ ...prev, ...value }));
@@ -6966,7 +6987,7 @@ var QueryFilter = ({
   };
   useEffect16(() => {
     onSetQuery(queryState);
-  }, [onSetQuery, queryState]);
+  }, []);
   return /* @__PURE__ */ jsxs41("fieldset", { children: [
     /* @__PURE__ */ jsx67("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
     /* @__PURE__ */ jsx67("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs41(VerticalRhythm3, { children: [
@@ -6974,20 +6995,20 @@ var QueryFilter = ({
         InputVariables,
         {
           label: searchInputLabel,
-          value: (_e = queryState.keyword) != null ? _e : "",
+          value: (_f = queryState.keyword) != null ? _f : "",
           onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
           disableInlineMenu: true,
           id: "qf_searchText",
           inputWhenNoVariables: /* @__PURE__ */ jsx67(
-            InputKeywordSearch3,
+            DebouncedInputKeywordSearch2,
             {
               id: "qf_searchText",
               inputFieldName: searchInputName,
               placeholder: searchInputPlaceholderText,
-              onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+              onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
               disabledFieldSubmission: true,
-              onClear: () => handleFilterChange({ keyword: "" }),
-              value: queryState.keyword
+              delay: 300,
+              defaultValue: queryState.keyword
             }
           )
         }
@@ -6998,7 +7019,7 @@ var QueryFilter = ({
           {
             label: contentTypeLabel,
             id: "qf_contentType",
-            value: (_f = queryState.contentType) != null ? _f : "",
+            value: (_g = queryState.contentType) != null ? _g : "",
             onChange: (newType) => handleFilterChange({ contentType: newType }),
             disableInlineMenu: true,
             inputWhenNoVariables: /* @__PURE__ */ jsx67(
@@ -7007,13 +7028,8 @@ var QueryFilter = ({
                 id: "qf_contentType",
                 label: contentTypeLabel,
                 showLabel: false,
-                options: [
-                  ...!requireContentType ? [{ id: "", label: typeSelectorAllTypesOptionText }] : [],
-                  ...contentTypeOptions ? contentTypeOptions.map((option) => {
-                    var _a2;
-                    return { id: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
-                  }) : []
-                ],
+                defaultOption: requireContentType ? void 0 : typeSelectorAllTypesOptionText,
+                options: contentTypeOptions != null ? contentTypeOptions : [],
                 onChange: (e) => handleFilterChange({ contentType: e.target.value }),
                 value: queryState.contentType
               }
@@ -7028,6 +7044,7 @@ var QueryFilter = ({
             value: queryState.count.toString(10),
             onChange: (newCount) => handleFilterChange({ count: newCount }),
             disableInlineMenu: true,
+            valueToResetTo: "5",
             inputWhenNoVariables: /* @__PURE__ */ jsx67(
               Input5,
               {
@@ -7058,16 +7075,8 @@ var QueryFilter = ({
                 label: sortLabel,
                 id: "qf_sortBy",
                 showLabel: false,
-                options: [
-                  {
-                    label: "Select a sort",
-                    id: ""
-                  },
-                  ...sortOptions ? sortOptions.map((option) => {
-                    var _a2;
-                    return { id: option.id, name: option.name, label: (_a2 = option.label) != null ? _a2 : option.name };
-                  }) : []
-                ],
+                defaultOption: "Select a sort",
+                options: sortOptions != null ? sortOptions : [],
                 onChange: (e) => handleFilterChange({ sortBy: e.target.value }),
                 value: queryState.sortBy
               }
@@ -7088,12 +7097,7 @@ var QueryFilter = ({
                 label: sortOrderLabel,
                 id: "qf_sortOrder",
                 showLabel: false,
-                options: [
-                  ...sortOrderOptions ? sortOrderOptions.map((option) => {
-                    var _a2;
-                    return { value: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
-                  }) : []
-                ],
+                options: sortOrderOptions != null ? sortOrderOptions : [],
                 onChange: (e) => handleFilterChange({ sortOrder: e.target.value }),
                 value: queryState.sortOrder
               }
@@ -7198,7 +7202,7 @@ import {
   Heading,
   Input as Input6,
   InputComboBox,
-  InputKeywordSearch as InputKeywordSearch4,
+  InputKeywordSearch as InputKeywordSearch2,
   InputSelect as InputSelect8,
   InputToggle,
   Label,
@@ -7252,7 +7256,7 @@ export {
   icons_exports as Icons,
   Input6 as Input,
   InputComboBox,
-  InputKeywordSearch4 as InputKeywordSearch,
+  InputKeywordSearch2 as InputKeywordSearch,
   InputSelect8 as InputSelect,
   InputToggle,
   InputVariables,

package/dist/index.js

@@ -3278,9 +3278,10 @@ function VariableEditor({
   variable,
   onSubmit,
   onCancel,
+  showDisplayName,
   disableMeshTip
 }) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { variables } = useVariables();
   const currentVariable = variables[variable];
   const { register, handleSubmit, formState } = (0, import_react_hook_form.useForm)({
@@ -3335,6 +3336,16 @@ function VariableEditor({
           }
         }
       ),
+      showDisplayName ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        import_design_system16.Input,
+        {
+          ...register("displayName"),
+          label: "Display name",
+          autoComplete: "off",
+          caption: "This is the name that will be displayed in the UI. If not provided, the name will be used.",
+          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+        }
+      ) : null,
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         import_design_system16.Input,
         {
@@ -3342,7 +3353,7 @@ function VariableEditor({
           label: "Help Text",
           caption: "Appears when entering a value for this variable.",
           autoComplete: "off",
-          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+          errorMessage: (_g = formState.errors.helpText) == null ? void 0 : _g.message
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
@@ -3351,7 +3362,7 @@ function VariableEditor({
           ...register("default"),
           label: "Default Value",
           autoComplete: "off",
-          errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
+          errorMessage: (_h = formState.errors.default) == null ? void 0 : _h.message
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system16.HorizontalRhythm, { justify: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_design_system16.HorizontalRhythm, { gap: "sm", children: [
@@ -4244,32 +4255,41 @@ var menuBtn2 = import_react42.css`
   transform: translateY(-50%);
 `;
 var input = import_react42.css`
+  --input-padding: 12px var(--spacing-base) 12px var(--spacing-sm);
   appearance: none;
   background-color: var(--white);
-  border: 1px solid var(--gray-200);
+  border: 1px solid var(--gray-300);
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
-  padding-block: var(--spacing-base);
-  padding-left: var(--spacing-base);
-  padding-right: var(--spacing-lg);
-  line-height: 1.75;
+  padding: var(--input-padding);
+  min-height: 50px;
   width: 100%;
   position: relative;
   transition: background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
+    color var(--duration-fast) var(--timing-ease-out), box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
+
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
 
+  &[data-focus='true'],
   &:focus,
   &:focus-within {
-    border-color: var(--typography-base);
-    box-shadow: none;
+    border-color: var(--accent-dark-active);
+    box-shadow: var(--elevation-100);
     outline: none;
   }
 
+  &[data-disabled='true'],
   &:disabled,
   &:disabled::placeholder {
     cursor: not-allowed;
-    color: var(--gray-400);
+    color: var(--gray-300);
     border-color: var(--gray-300);
   }
 
@@ -5343,13 +5363,13 @@ function VariablesList() {
       const result = [...sorted || []];
       const [removed] = (_b = result == null ? void 0 : result.splice(res.source.index, 1)) != null ? _b : [];
       result == null ? void 0 : result.splice(res.destination.index, 0, removed);
-      const resultAsObj = result.reduce(
-        (acc, item, index) => ({
+      const resultAsObj = result.reduce((acc, item, index) => {
+        const { name, ...variableDefinition } = item;
+        return {
           ...acc,
-          [item.name]: { type: item.type, default: item.default, order: index }
-        }),
-        {}
-      );
+          [item.name]: { ...variableDefinition, order: index }
+        };
+      }, {});
       dispatch({ type: "reorder", result: resultAsObj });
       return result;
     }
@@ -6507,7 +6527,8 @@ var ObjectSearchListItem = ({
   onSelect,
   isMulti,
   disabled,
-  children
+  children,
+  ...props
 }) => {
   const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
   const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
@@ -6527,6 +6548,7 @@ var ObjectSearchListItem = ({
       role: "listitem",
       css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
       "data-testid": "list-item",
+      ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
           "div",
@@ -6721,14 +6743,14 @@ var ObjectSearchFilter = ({
           }
         ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-          import_design_system36.InputKeywordSearch,
+          import_design_system36.DebouncedInputKeywordSearch,
           {
             inputFieldName: searchInputName,
             placeholder: searchInputPlaceholderText,
-            onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+            onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
             disabledFieldSubmission: true,
-            onClear: () => handleFilterChange({ keyword: "" }),
-            value: searchState.keyword
+            defaultValue: searchState.keyword,
+            delay: 300
           }
         )
       ]
@@ -6961,6 +6983,7 @@ function ObjectSearchResultList({
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
+  resultLabelOverride,
   additionalButtons,
   renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ObjectSearchResultItem, { ...value }),
   multiSelectId,
@@ -7006,11 +7029,11 @@ function ObjectSearchResultList({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "group", css: ObjectSearchResultListContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+      !resultLabelOverride ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
         /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
         !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_design_system39.Counter, { count: selectedListItems.length })
-      ] }),
+      ] }) : resultLabelOverride,
       /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
         hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
@@ -7071,26 +7094,24 @@ var QueryFilter = ({
   sortOrderLabel = "Sort Order",
   sortOrderOptions = [
     {
-      name: "Ascending",
-      id: "asc",
+      value: "asc",
       label: "Ascending"
     },
     {
-      name: "Descending",
-      id: "desc",
+      value: "desc",
       label: "Descending"
     }
   ],
   children
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { query, onSetQuery } = useObjectSearchContext();
   const [queryState, setQueryState] = (0, import_react73.useState)({
     contentType: (_a = query.contentType) != null ? _a : "",
-    keyword: (_b = query.contentType) != null ? _b : "",
-    count: countValue != null ? countValue : 5,
-    sortBy: (_c = sortOptions[0].id) != null ? _c : "",
-    sortOrder: (_d = sortOrderOptions[0].id) != null ? _d : ""
+    keyword: (_b = query.keyword) != null ? _b : "",
+    count: (_c = query.count) != null ? _c : countValue,
+    sortBy: (_d = query.sortBy) != null ? _d : "",
+    sortOrder: (_e = query.sortOrder) != null ? _e : ""
   });
   const handleFilterChange = (value) => {
     setQueryState((prev) => ({ ...prev, ...value }));
@@ -7098,7 +7119,7 @@ var QueryFilter = ({
   };
   (0, import_react73.useEffect)(() => {
     onSetQuery(queryState);
-  }, [onSetQuery, queryState]);
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("fieldset", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_design_system40.VerticalRhythm, { children: [
@@ -7106,20 +7127,20 @@ var QueryFilter = ({
         InputVariables,
         {
           label: searchInputLabel,
-          value: (_e = queryState.keyword) != null ? _e : "",
+          value: (_f = queryState.keyword) != null ? _f : "",
           onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
           disableInlineMenu: true,
           id: "qf_searchText",
           inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-            import_design_system40.InputKeywordSearch,
+            import_design_system40.DebouncedInputKeywordSearch,
             {
               id: "qf_searchText",
               inputFieldName: searchInputName,
               placeholder: searchInputPlaceholderText,
-              onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+              onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
               disabledFieldSubmission: true,
-              onClear: () => handleFilterChange({ keyword: "" }),
-              value: queryState.keyword
+              delay: 300,
+              defaultValue: queryState.keyword
             }
           )
         }
@@ -7130,7 +7151,7 @@ var QueryFilter = ({
           {
             label: contentTypeLabel,
             id: "qf_contentType",
-            value: (_f = queryState.contentType) != null ? _f : "",
+            value: (_g = queryState.contentType) != null ? _g : "",
             onChange: (newType) => handleFilterChange({ contentType: newType }),
             disableInlineMenu: true,
             inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
@@ -7139,13 +7160,8 @@ var QueryFilter = ({
                 id: "qf_contentType",
                 label: contentTypeLabel,
                 showLabel: false,
-                options: [
-                  ...!requireContentType ? [{ id: "", label: typeSelectorAllTypesOptionText }] : [],
-                  ...contentTypeOptions ? contentTypeOptions.map((option) => {
-                    var _a2;
-                    return { id: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
-                  }) : []
-                ],
+                defaultOption: requireContentType ? void 0 : typeSelectorAllTypesOptionText,
+                options: contentTypeOptions != null ? contentTypeOptions : [],
                 onChange: (e) => handleFilterChange({ contentType: e.target.value }),
                 value: queryState.contentType
               }
@@ -7160,6 +7176,7 @@ var QueryFilter = ({
             value: queryState.count.toString(10),
             onChange: (newCount) => handleFilterChange({ count: newCount }),
             disableInlineMenu: true,
+            valueToResetTo: "5",
             inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
               import_design_system40.Input,
               {
@@ -7190,16 +7207,8 @@ var QueryFilter = ({
                 label: sortLabel,
                 id: "qf_sortBy",
                 showLabel: false,
-                options: [
-                  {
-                    label: "Select a sort",
-                    id: ""
-                  },
-                  ...sortOptions ? sortOptions.map((option) => {
-                    var _a2;
-                    return { id: option.id, name: option.name, label: (_a2 = option.label) != null ? _a2 : option.name };
-                  }) : []
-                ],
+                defaultOption: "Select a sort",
+                options: sortOptions != null ? sortOptions : [],
                 onChange: (e) => handleFilterChange({ sortBy: e.target.value }),
                 value: queryState.sortBy
               }
@@ -7220,12 +7229,7 @@ var QueryFilter = ({
                 label: sortOrderLabel,
                 id: "qf_sortOrder",
                 showLabel: false,
-                options: [
-                  ...sortOrderOptions ? sortOrderOptions.map((option) => {
-                    var _a2;
-                    return { value: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
-                  }) : []
-                ],
+                options: sortOrderOptions != null ? sortOrderOptions : [],
                 onChange: (e) => handleFilterChange({ sortOrder: e.target.value }),
                 value: queryState.sortOrder
               }

package/dist/index.mjs

@@ -3099,9 +3099,10 @@ function VariableEditor({
   variable,
   onSubmit,
   onCancel,
+  showDisplayName,
   disableMeshTip
 }) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { variables } = useVariables();
   const currentVariable = variables[variable];
   const { register, handleSubmit, formState } = useForm({
@@ -3156,6 +3157,16 @@ function VariableEditor({
           }
         }
       ),
+      showDisplayName ? /* @__PURE__ */ jsx31(
+        Input2,
+        {
+          ...register("displayName"),
+          label: "Display name",
+          autoComplete: "off",
+          caption: "This is the name that will be displayed in the UI. If not provided, the name will be used.",
+          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+        }
+      ) : null,
       /* @__PURE__ */ jsx31(
         Input2,
         {
@@ -3163,7 +3174,7 @@ function VariableEditor({
           label: "Help Text",
           caption: "Appears when entering a value for this variable.",
           autoComplete: "off",
-          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+          errorMessage: (_g = formState.errors.helpText) == null ? void 0 : _g.message
         }
       ),
       /* @__PURE__ */ jsx31(
@@ -3172,7 +3183,7 @@ function VariableEditor({
           ...register("default"),
           label: "Default Value",
           autoComplete: "off",
-          errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
+          errorMessage: (_h = formState.errors.default) == null ? void 0 : _h.message
         }
       ),
       /* @__PURE__ */ jsx31(HorizontalRhythm, { justify: "space-between", children: /* @__PURE__ */ jsxs16(HorizontalRhythm, { gap: "sm", children: [
@@ -4065,32 +4076,41 @@ var menuBtn2 = css21`
   transform: translateY(-50%);
 `;
 var input = css21`
+  --input-padding: 12px var(--spacing-base) 12px var(--spacing-sm);
   appearance: none;
   background-color: var(--white);
-  border: 1px solid var(--gray-200);
+  border: 1px solid var(--gray-300);
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
-  padding-block: var(--spacing-base);
-  padding-left: var(--spacing-base);
-  padding-right: var(--spacing-lg);
-  line-height: 1.75;
+  padding: var(--input-padding);
+  min-height: 50px;
   width: 100%;
   position: relative;
   transition: background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
+    color var(--duration-fast) var(--timing-ease-out), box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
+
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
 
+  &[data-focus='true'],
   &:focus,
   &:focus-within {
-    border-color: var(--typography-base);
-    box-shadow: none;
+    border-color: var(--accent-dark-active);
+    box-shadow: var(--elevation-100);
     outline: none;
   }
 
+  &[data-disabled='true'],
   &:disabled,
   &:disabled::placeholder {
     cursor: not-allowed;
-    color: var(--gray-400);
+    color: var(--gray-300);
     border-color: var(--gray-300);
   }
 
@@ -5186,13 +5206,13 @@ function VariablesList() {
       const result = [...sorted || []];
       const [removed] = (_b = result == null ? void 0 : result.splice(res.source.index, 1)) != null ? _b : [];
       result == null ? void 0 : result.splice(res.destination.index, 0, removed);
-      const resultAsObj = result.reduce(
-        (acc, item, index) => ({
+      const resultAsObj = result.reduce((acc, item, index) => {
+        const { name, ...variableDefinition } = item;
+        return {
           ...acc,
-          [item.name]: { type: item.type, default: item.default, order: index }
-        }),
-        {}
-      );
+          [item.name]: { ...variableDefinition, order: index }
+        };
+      }, {});
       dispatch({ type: "reorder", result: resultAsObj });
       return result;
     }
@@ -6375,7 +6395,8 @@ var ObjectSearchListItem = ({
   onSelect,
   isMulti,
   disabled,
-  children
+  children,
+  ...props
 }) => {
   const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
   const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
@@ -6395,6 +6416,7 @@ var ObjectSearchListItem = ({
       role: "listitem",
       css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
       "data-testid": "list-item",
+      ...props,
       children: [
         /* @__PURE__ */ jsxs34(
           "div",
@@ -6515,7 +6537,7 @@ var DefaultResultList = () => {
 };
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
+import { DebouncedInputKeywordSearch, InputSelect as InputSelect6 } from "@uniformdev/design-system";
 import { useMemo as useMemo15, useState as useState17 } from "react";
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
@@ -6589,14 +6611,14 @@ var ObjectSearchFilter = ({
           }
         ) : null,
         /* @__PURE__ */ jsx62(
-          InputKeywordSearch2,
+          DebouncedInputKeywordSearch,
           {
             inputFieldName: searchInputName,
             placeholder: searchInputPlaceholderText,
-            onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+            onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
             disabledFieldSubmission: true,
-            onClear: () => handleFilterChange({ keyword: "" }),
-            value: searchState.keyword
+            defaultValue: searchState.keyword,
+            delay: 300
           }
         )
       ]
@@ -6829,6 +6851,7 @@ function ObjectSearchResultList({
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
+  resultLabelOverride,
   additionalButtons,
   renderResultComponent = (value) => /* @__PURE__ */ jsx66(ObjectSearchResultItem, { ...value }),
   multiSelectId,
@@ -6874,11 +6897,11 @@ function ObjectSearchResultList({
   };
   return /* @__PURE__ */ jsxs40(Fragment13, { children: [
     /* @__PURE__ */ jsxs40("div", { role: "group", css: ObjectSearchResultListContainer, children: [
-      /* @__PURE__ */ jsxs40("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+      !resultLabelOverride ? /* @__PURE__ */ jsxs40("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
         /* @__PURE__ */ jsx66("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
         !selectedListItems.length ? null : /* @__PURE__ */ jsx66(Counter, { count: selectedListItems.length })
-      ] }),
+      ] }) : resultLabelOverride,
       /* @__PURE__ */ jsxs40("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
         hideRemoveButton ? null : /* @__PURE__ */ jsx66(
@@ -6920,7 +6943,7 @@ function ObjectSearchResultList({
 }
 
 // src/components/ObjectSearch/QueryFilter.tsx
-import { Input as Input5, InputKeywordSearch as InputKeywordSearch3, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
+import { DebouncedInputKeywordSearch as DebouncedInputKeywordSearch2, Input as Input5, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
 import { useEffect as useEffect16, useState as useState18 } from "react";
 import { jsx as jsx67, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var QueryFilter = ({
@@ -6939,26 +6962,24 @@ var QueryFilter = ({
   sortOrderLabel = "Sort Order",
   sortOrderOptions = [
     {
-      name: "Ascending",
-      id: "asc",
+      value: "asc",
       label: "Ascending"
     },
     {
-      name: "Descending",
-      id: "desc",
+      value: "desc",
       label: "Descending"
     }
   ],
   children
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { query, onSetQuery } = useObjectSearchContext();
   const [queryState, setQueryState] = useState18({
     contentType: (_a = query.contentType) != null ? _a : "",
-    keyword: (_b = query.contentType) != null ? _b : "",
-    count: countValue != null ? countValue : 5,
-    sortBy: (_c = sortOptions[0].id) != null ? _c : "",
-    sortOrder: (_d = sortOrderOptions[0].id) != null ? _d : ""
+    keyword: (_b = query.keyword) != null ? _b : "",
+    count: (_c = query.count) != null ? _c : countValue,
+    sortBy: (_d = query.sortBy) != null ? _d : "",
+    sortOrder: (_e = query.sortOrder) != null ? _e : ""
   });
   const handleFilterChange = (value) => {
     setQueryState((prev) => ({ ...prev, ...value }));
@@ -6966,7 +6987,7 @@ var QueryFilter = ({
   };
   useEffect16(() => {
     onSetQuery(queryState);
-  }, [onSetQuery, queryState]);
+  }, []);
   return /* @__PURE__ */ jsxs41("fieldset", { children: [
     /* @__PURE__ */ jsx67("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
     /* @__PURE__ */ jsx67("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs41(VerticalRhythm3, { children: [
@@ -6974,20 +6995,20 @@ var QueryFilter = ({
         InputVariables,
         {
           label: searchInputLabel,
-          value: (_e = queryState.keyword) != null ? _e : "",
+          value: (_f = queryState.keyword) != null ? _f : "",
           onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
           disableInlineMenu: true,
           id: "qf_searchText",
           inputWhenNoVariables: /* @__PURE__ */ jsx67(
-            InputKeywordSearch3,
+            DebouncedInputKeywordSearch2,
             {
               id: "qf_searchText",
               inputFieldName: searchInputName,
               placeholder: searchInputPlaceholderText,
-              onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+              onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
               disabledFieldSubmission: true,
-              onClear: () => handleFilterChange({ keyword: "" }),
-              value: queryState.keyword
+              delay: 300,
+              defaultValue: queryState.keyword
             }
           )
         }
@@ -6998,7 +7019,7 @@ var QueryFilter = ({
           {
             label: contentTypeLabel,
             id: "qf_contentType",
-            value: (_f = queryState.contentType) != null ? _f : "",
+            value: (_g = queryState.contentType) != null ? _g : "",
             onChange: (newType) => handleFilterChange({ contentType: newType }),
             disableInlineMenu: true,
             inputWhenNoVariables: /* @__PURE__ */ jsx67(
@@ -7007,13 +7028,8 @@ var QueryFilter = ({
                 id: "qf_contentType",
                 label: contentTypeLabel,
                 showLabel: false,
-                options: [
-                  ...!requireContentType ? [{ id: "", label: typeSelectorAllTypesOptionText }] : [],
-                  ...contentTypeOptions ? contentTypeOptions.map((option) => {
-                    var _a2;
-                    return { id: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
-                  }) : []
-                ],
+                defaultOption: requireContentType ? void 0 : typeSelectorAllTypesOptionText,
+                options: contentTypeOptions != null ? contentTypeOptions : [],
                 onChange: (e) => handleFilterChange({ contentType: e.target.value }),
                 value: queryState.contentType
               }
@@ -7028,6 +7044,7 @@ var QueryFilter = ({
             value: queryState.count.toString(10),
             onChange: (newCount) => handleFilterChange({ count: newCount }),
             disableInlineMenu: true,
+            valueToResetTo: "5",
             inputWhenNoVariables: /* @__PURE__ */ jsx67(
               Input5,
               {
@@ -7058,16 +7075,8 @@ var QueryFilter = ({
                 label: sortLabel,
                 id: "qf_sortBy",
                 showLabel: false,
-                options: [
-                  {
-                    label: "Select a sort",
-                    id: ""
-                  },
-                  ...sortOptions ? sortOptions.map((option) => {
-                    var _a2;
-                    return { id: option.id, name: option.name, label: (_a2 = option.label) != null ? _a2 : option.name };
-                  }) : []
-                ],
+                defaultOption: "Select a sort",
+                options: sortOptions != null ? sortOptions : [],
                 onChange: (e) => handleFilterChange({ sortBy: e.target.value }),
                 value: queryState.sortBy
               }
@@ -7088,12 +7097,7 @@ var QueryFilter = ({
                 label: sortOrderLabel,
                 id: "qf_sortOrder",
                 showLabel: false,
-                options: [
-                  ...sortOrderOptions ? sortOrderOptions.map((option) => {
-                    var _a2;
-                    return { value: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
-                  }) : []
-                ],
+                options: sortOrderOptions != null ? sortOrderOptions : [],
                 onChange: (e) => handleFilterChange({ sortOrder: e.target.value }),
                 value: queryState.sortOrder
               }
@@ -7198,7 +7202,7 @@ import {
   Heading,
   Input as Input6,
   InputComboBox,
-  InputKeywordSearch as InputKeywordSearch4,
+  InputKeywordSearch as InputKeywordSearch2,
   InputSelect as InputSelect8,
   InputToggle,
   Label,
@@ -7252,7 +7256,7 @@ export {
   icons_exports as Icons,
   Input6 as Input,
   InputComboBox,
-  InputKeywordSearch4 as InputKeywordSearch,
+  InputKeywordSearch2 as InputKeywordSearch,
   InputSelect8 as InputSelect,
   InputToggle,
   InputVariables,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "19.79.1-alpha.13+608a273da",
+  "version": "19.79.1-alpha.18+12234b9350",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -50,9 +50,9 @@
     "@lexical/selection": "^0.12.0",
     "@lexical/utils": "^0.12.0",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v4.10.1/react-icons-all-files-4.10.1.tgz",
-    "@uniformdev/canvas": "19.79.1-alpha.13+608a273da",
-    "@uniformdev/design-system": "19.79.1-alpha.13+608a273da",
-    "@uniformdev/mesh-sdk": "19.79.1-alpha.13+608a273da",
+    "@uniformdev/canvas": "19.79.1-alpha.18+12234b9350",
+    "@uniformdev/design-system": "19.79.1-alpha.18+12234b9350",
+    "@uniformdev/mesh-sdk": "19.79.1-alpha.18+12234b9350",
     "dequal": "^2.0.3",
     "lexical": "^0.12.0",
     "mitt": "^3.0.0",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "608a273da87aa432f17b2c8ce15d747dadab0cd1"
+  "gitHead": "12234b9350cfa4209bc7e242701d2dc535ece19e"
 }