@uniformdev/mesh-sdk-react 18.30.1-alpha.15 → 18.30.1-alpha.17

package/dist/index.d.ts

@@ -598,7 +598,8 @@ type EntrySearchFilterProps = {
     /** sets the select input options */
     selectOptions: Array<{
         id: string;
-        name: string;
+        name?: string;
+        label: string;
     }>;
     /** sets the search input name value
      * @default 'searchText'
@@ -631,9 +632,12 @@ type SearchQueryProps = {
     /** sets the content type in the search context */
     contentType: string | undefined;
     /** sets the keyword search in the search context */
-    keywordSearch?: string;
+    keyword?: string;
+};
+type SelectedItemExtendedProps = {
+    [key: string]: unknown;
 };
-type SelectedItemProps = {
+type SelectedItemProps<TProps extends SelectedItemExtendedProps = SelectedItemExtendedProps> = {
     /** sets the id value */
     id: string;
     /** sets the title value */
@@ -669,7 +673,7 @@ type SelectedItemProps = {
     metadata?: Record<string, string>;
     /** allows for child react elements to be nested in the popover */
     popoverData?: ReactNode;
-};
+} & TProps;
 type ItemsProp = Array<SelectedItemProps & Record<string, unknown>>;
 type ItemListProps<TList extends ItemsProp = ItemsProp> = {
     items?: TList;
@@ -832,6 +836,7 @@ type QueryFilterSearchProps = {
 type QuertFilterSelectionOptionProps = Array<{
     id: string;
     name: string;
+    label: string;
 }>;
 type QueryFilterProps<TSelectOptions extends QuertFilterSelectionOptionProps = QuertFilterSelectionOptionProps> = {
     /** sets the query filter title
@@ -870,6 +875,14 @@ type QueryFilterProps<TSelectOptions extends QuertFilterSelectionOptionProps = Q
     sortOrderLabel?: string;
     /** sets the sort order select options value */
     sortOrderOptions: TSelectOptions;
+    /** sets the search input name value
+     * @default 'searchText'
+     */
+    searchInputName?: string;
+    /** sets the search input placeholder text
+     * @default 'Enter keyword to narrow your results'
+     */
+    searchInputPlaceholderText?: string;
     /** allows for additional child components, for example more input components */
     children?: ReactNode;
 };
@@ -877,7 +890,7 @@ type QueryFilterProps<TSelectOptions extends QuertFilterSelectionOptionProps = Q
  * @description An opinionated multi query filter UI component, best used for querying product data or more complex scenarios
  * @example <QueryFilter contentTypeOptions={[{ id: 'id', name: 'name' }]} sortOptions={[{ id: 'id', name: 'name' }]} sortOrderOptions={[{ id: 'id', name: 'name' }]} />
  */
-declare const QueryFilter: ({ requireContentType, queryFilterTitle, contentTypeLabel, typeSelectorAllTypesOptionText, contentTypeOptions, countLabel, countValue, sortLabel, sortOptions, sortOrderLabel, sortOrderOptions, children, }: QueryFilterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const QueryFilter: ({ requireContentType, queryFilterTitle, contentTypeLabel, typeSelectorAllTypesOptionText, contentTypeOptions, searchInputName, searchInputPlaceholderText, countLabel, countValue, sortLabel, sortOptions, sortOrderLabel, sortOrderOptions, children, }: QueryFilterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type MeshAppProps = {
     loadingComponent?: React__default.ComponentType;

package/dist/index.esm.js

@@ -3965,7 +3965,7 @@ var EntrySearchContext = createContext5({
   },
   query: {
     contentType: "",
-    keywordSearch: ""
+    keyword: ""
   },
   list: {},
   onSetList: () => {
@@ -3977,7 +3977,7 @@ var EntrySearchContext = createContext5({
 var EntrySearchProvider = ({ currentlySelectedItems, children }) => {
   const [query, setQuery] = useState9({
     contentType: "",
-    keywordSearch: ""
+    keyword: ""
   });
   const querySearchDeferred = useDeferredValue(query);
   const [selectedItems, setSelectedItems] = useState9(currentlySelectedItems != null ? currentlySelectedItems : []);
@@ -4068,7 +4068,7 @@ var EntrySearchFilter = ({
   const { query, onSetQuery } = useEntrySearchContext();
   const [searchState, setSearchState] = useState10({
     contentType: "any",
-    keywordSearch: ""
+    keyword: ""
   });
   const handleFilterChange = (value) => {
     setSearchState((prev) => {
@@ -4086,7 +4086,8 @@ var EntrySearchFilter = ({
         options: [
           ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
           ...selectOptions ? selectOptions.map((option) => {
-            return { value: option.id, label: option.name };
+            var _a;
+            return { name: option == null ? void 0 : option.name, label: (_a = option.label) != null ? _a : option == null ? void 0 : option.name, id: option.id };
           }) : []
         ],
         value: searchState.contentType
@@ -4097,10 +4098,10 @@ var EntrySearchFilter = ({
       {
         inputFieldName: searchInputName,
         placeholder: searchInputPlaceholderText,
-        onSearchTextChanged: (e) => handleFilterChange({ keywordSearch: e }),
+        onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
         disabledFieldSubmission: true,
-        onClear: () => handleFilterChange({ keywordSearch: "" }),
-        value: searchState.keywordSearch
+        onClear: () => handleFilterChange({ keyword: "" }),
+        value: searchState.keyword
       }
     )
   ] });
@@ -4488,7 +4489,7 @@ var EntrySearchResultList = ({
 };
 
 // src/components/EntrySearch/QueryFilter.tsx
-import { Input as Input7, InputSelect as InputSelect7 } from "@uniformdev/design-system";
+import { Input as Input7, InputKeywordSearch as InputKeywordSearch3, InputSelect as InputSelect7 } from "@uniformdev/design-system";
 import { useEffect as useEffect7, useState as useState11 } from "react";
 import { jsx as jsx53, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var QueryFilter = ({
@@ -4497,6 +4498,8 @@ var QueryFilter = ({
   contentTypeLabel = "Filter by content type",
   typeSelectorAllTypesOptionText = "All content types",
   contentTypeOptions,
+  searchInputName = "searchText",
+  searchInputPlaceholderText = "Enter keyword to narrow your results",
   countLabel = "Count",
   countValue = 5,
   sortLabel = "Sort",
@@ -4505,11 +4508,13 @@ var QueryFilter = ({
   sortOrderOptions = [
     {
       name: "Ascending",
-      id: "asc"
+      id: "asc",
+      label: "Ascending"
     },
     {
       name: "Descending",
-      id: "desc"
+      id: "desc",
+      label: "Descending"
     }
   ],
   children
@@ -4518,6 +4523,7 @@ var QueryFilter = ({
   const { query, onSetQuery } = useEntrySearchContext();
   const [queryState, setQueryState] = useState11({
     contentType: "",
+    keyword: "",
     count: countValue != null ? countValue : 5,
     sortBy: (_a = sortOptions[0].id) != null ? _a : "",
     sortOrder: (_b = sortOrderOptions[0].id) != null ? _b : ""
@@ -4532,15 +4538,17 @@ var QueryFilter = ({
   return /* @__PURE__ */ jsxs33("fieldset", { children: [
     /* @__PURE__ */ jsx53("span", { css: EntrySearchFilterContainerLabel, children: queryFilterTitle }),
     /* @__PURE__ */ jsxs33("div", { css: EntrySearchFilterContainer, children: [
-      /* @__PURE__ */ jsxs33("div", { css: EntrySearchFilterGrid("1fr minmax(100px, 0.2fr)"), children: [
+      /* @__PURE__ */ jsxs33("div", { css: EntrySearchFilterGrid("0.5fr 1fr"), children: [
         /* @__PURE__ */ jsx53(
           InputSelect7,
           {
             label: contentTypeLabel,
+            showLabel: false,
             options: [
-              ...!requireContentType ? [{ value: "", label: typeSelectorAllTypesOptionText }] : [],
+              ...!requireContentType ? [{ id: "", label: typeSelectorAllTypesOptionText }] : [],
               ...contentTypeOptions ? contentTypeOptions.map((option) => {
-                return { value: option.id, label: option.name };
+                var _a2;
+                return { id: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
               }) : []
             ],
             onChange: (e) => handleFilterChange({ contentType: e.target.value }),
@@ -4548,17 +4556,18 @@ var QueryFilter = ({
           }
         ),
         /* @__PURE__ */ jsx53(
-          Input7,
+          InputKeywordSearch3,
           {
-            label: countLabel,
-            type: "number",
-            onChange: (e) => handleFilterChange({ count: e.target.value }),
-            defaultValue: countValue,
-            value: queryState.count
+            inputFieldName: searchInputName,
+            placeholder: searchInputPlaceholderText,
+            onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+            disabledFieldSubmission: true,
+            onClear: () => handleFilterChange({ keyword: "" }),
+            value: queryState.keyword
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs33("div", { css: EntrySearchFilterGrid("repeat(2, 1fr)"), children: [
+      /* @__PURE__ */ jsxs33("div", { css: EntrySearchFilterGrid("repeat(2, 1fr) 0.5fr"), children: [
         /* @__PURE__ */ jsx53(
           InputSelect7,
           {
@@ -4566,10 +4575,11 @@ var QueryFilter = ({
             options: [
               {
                 label: "Select a sort",
-                value: ""
+                id: ""
               },
               ...sortOptions ? sortOptions.map((option) => {
-                return { value: option.id, label: option.name };
+                var _a2;
+                return { id: option.id, name: option.name, label: (_a2 = option.label) != null ? _a2 : option.name };
               }) : []
             ],
             onChange: (e) => handleFilterChange({ sortBy: e.target.value }),
@@ -4582,12 +4592,23 @@ var QueryFilter = ({
             label: sortOrderLabel,
             options: [
               ...sortOrderOptions ? sortOrderOptions.map((option) => {
-                return { value: option.id, label: option.name };
+                var _a2;
+                return { value: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
               }) : []
             ],
             onChange: (e) => handleFilterChange({ sortOrder: e.target.value }),
             value: queryState.sortOrder
           }
+        ),
+        /* @__PURE__ */ jsx53(
+          Input7,
+          {
+            label: countLabel,
+            type: "number",
+            onChange: (e) => handleFilterChange({ count: e.target.value }),
+            defaultValue: countValue,
+            value: queryState.count
+          }
         )
       ] }),
       children
@@ -4687,10 +4708,10 @@ import {
   Heading,
   Input as Input8,
   InputComboBox,
-  InputKeywordSearch as InputKeywordSearch3,
+  InputKeywordSearch as InputKeywordSearch4,
   InputSelect as InputSelect8,
   InputToggle,
-  InputKeywordSearch as InputKeywordSearch4,
+  InputKeywordSearch as InputKeywordSearch5,
   Label,
   LoadingIndicator as LoadingIndicator4,
   LoadingOverlay as LoadingOverlay2,
@@ -4743,11 +4764,11 @@ export {
   icons_exports as Icons,
   Input8 as Input,
   InputComboBox,
-  InputKeywordSearch3 as InputKeywordSearch,
+  InputKeywordSearch4 as InputKeywordSearch,
   InputSelect8 as InputSelect,
   InputToggle,
   InputVariables,
-  InputKeywordSearch4 as KeywordSearchInput,
+  InputKeywordSearch5 as KeywordSearchInput,
   Label,
   LinkButton,
   LoadingIndicator4 as LoadingIndicator,

package/dist/index.js

@@ -4120,7 +4120,7 @@ var EntrySearchContext = (0, import_react40.createContext)({
   },
   query: {
     contentType: "",
-    keywordSearch: ""
+    keyword: ""
   },
   list: {},
   onSetList: () => {
@@ -4132,7 +4132,7 @@ var EntrySearchContext = (0, import_react40.createContext)({
 var EntrySearchProvider = ({ currentlySelectedItems, children }) => {
   const [query, setQuery] = (0, import_react40.useState)({
     contentType: "",
-    keywordSearch: ""
+    keyword: ""
   });
   const querySearchDeferred = (0, import_react40.useDeferredValue)(query);
   const [selectedItems, setSelectedItems] = (0, import_react40.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
@@ -4223,7 +4223,7 @@ var EntrySearchFilter = ({
   const { query, onSetQuery } = useEntrySearchContext();
   const [searchState, setSearchState] = (0, import_react42.useState)({
     contentType: "any",
-    keywordSearch: ""
+    keyword: ""
   });
   const handleFilterChange = (value) => {
     setSearchState((prev) => {
@@ -4241,7 +4241,8 @@ var EntrySearchFilter = ({
         options: [
           ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
           ...selectOptions ? selectOptions.map((option) => {
-            return { value: option.id, label: option.name };
+            var _a;
+            return { name: option == null ? void 0 : option.name, label: (_a = option.label) != null ? _a : option == null ? void 0 : option.name, id: option.id };
           }) : []
         ],
         value: searchState.contentType
@@ -4252,10 +4253,10 @@ var EntrySearchFilter = ({
       {
         inputFieldName: searchInputName,
         placeholder: searchInputPlaceholderText,
-        onSearchTextChanged: (e) => handleFilterChange({ keywordSearch: e }),
+        onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
         disabledFieldSubmission: true,
-        onClear: () => handleFilterChange({ keywordSearch: "" }),
-        value: searchState.keywordSearch
+        onClear: () => handleFilterChange({ keyword: "" }),
+        value: searchState.keyword
       }
     )
   ] });
@@ -4652,6 +4653,8 @@ var QueryFilter = ({
   contentTypeLabel = "Filter by content type",
   typeSelectorAllTypesOptionText = "All content types",
   contentTypeOptions,
+  searchInputName = "searchText",
+  searchInputPlaceholderText = "Enter keyword to narrow your results",
   countLabel = "Count",
   countValue = 5,
   sortLabel = "Sort",
@@ -4660,11 +4663,13 @@ var QueryFilter = ({
   sortOrderOptions = [
     {
       name: "Ascending",
-      id: "asc"
+      id: "asc",
+      label: "Ascending"
     },
     {
       name: "Descending",
-      id: "desc"
+      id: "desc",
+      label: "Descending"
     }
   ],
   children
@@ -4673,6 +4678,7 @@ var QueryFilter = ({
   const { query, onSetQuery } = useEntrySearchContext();
   const [queryState, setQueryState] = (0, import_react47.useState)({
     contentType: "",
+    keyword: "",
     count: countValue != null ? countValue : 5,
     sortBy: (_a = sortOptions[0].id) != null ? _a : "",
     sortOrder: (_b = sortOrderOptions[0].id) != null ? _b : ""
@@ -4687,15 +4693,17 @@ var QueryFilter = ({
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("fieldset", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { css: EntrySearchFilterContainerLabel, children: queryFilterTitle }),
     /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { css: EntrySearchFilterContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { css: EntrySearchFilterGrid("1fr minmax(100px, 0.2fr)"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { css: EntrySearchFilterGrid("0.5fr 1fr"), children: [
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           import_design_system31.InputSelect,
           {
             label: contentTypeLabel,
+            showLabel: false,
             options: [
-              ...!requireContentType ? [{ value: "", label: typeSelectorAllTypesOptionText }] : [],
+              ...!requireContentType ? [{ id: "", label: typeSelectorAllTypesOptionText }] : [],
               ...contentTypeOptions ? contentTypeOptions.map((option) => {
-                return { value: option.id, label: option.name };
+                var _a2;
+                return { id: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
               }) : []
             ],
             onChange: (e) => handleFilterChange({ contentType: e.target.value }),
@@ -4703,17 +4711,18 @@ var QueryFilter = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          import_design_system31.Input,
+          import_design_system31.InputKeywordSearch,
           {
-            label: countLabel,
-            type: "number",
-            onChange: (e) => handleFilterChange({ count: e.target.value }),
-            defaultValue: countValue,
-            value: queryState.count
+            inputFieldName: searchInputName,
+            placeholder: searchInputPlaceholderText,
+            onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+            disabledFieldSubmission: true,
+            onClear: () => handleFilterChange({ keyword: "" }),
+            value: queryState.keyword
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { css: EntrySearchFilterGrid("repeat(2, 1fr)"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { css: EntrySearchFilterGrid("repeat(2, 1fr) 0.5fr"), children: [
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           import_design_system31.InputSelect,
           {
@@ -4721,10 +4730,11 @@ var QueryFilter = ({
             options: [
               {
                 label: "Select a sort",
-                value: ""
+                id: ""
               },
               ...sortOptions ? sortOptions.map((option) => {
-                return { value: option.id, label: option.name };
+                var _a2;
+                return { id: option.id, name: option.name, label: (_a2 = option.label) != null ? _a2 : option.name };
               }) : []
             ],
             onChange: (e) => handleFilterChange({ sortBy: e.target.value }),
@@ -4737,12 +4747,23 @@ var QueryFilter = ({
             label: sortOrderLabel,
             options: [
               ...sortOrderOptions ? sortOrderOptions.map((option) => {
-                return { value: option.id, label: option.name };
+                var _a2;
+                return { value: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
               }) : []
             ],
             onChange: (e) => handleFilterChange({ sortOrder: e.target.value }),
             value: queryState.sortOrder
           }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          import_design_system31.Input,
+          {
+            label: countLabel,
+            type: "number",
+            onChange: (e) => handleFilterChange({ count: e.target.value }),
+            defaultValue: countValue,
+            value: queryState.count
+          }
         )
       ] }),
       children

package/dist/index.mjs

@@ -3965,7 +3965,7 @@ var EntrySearchContext = createContext5({
   },
   query: {
     contentType: "",
-    keywordSearch: ""
+    keyword: ""
   },
   list: {},
   onSetList: () => {
@@ -3977,7 +3977,7 @@ var EntrySearchContext = createContext5({
 var EntrySearchProvider = ({ currentlySelectedItems, children }) => {
   const [query, setQuery] = useState9({
     contentType: "",
-    keywordSearch: ""
+    keyword: ""
   });
   const querySearchDeferred = useDeferredValue(query);
   const [selectedItems, setSelectedItems] = useState9(currentlySelectedItems != null ? currentlySelectedItems : []);
@@ -4068,7 +4068,7 @@ var EntrySearchFilter = ({
   const { query, onSetQuery } = useEntrySearchContext();
   const [searchState, setSearchState] = useState10({
     contentType: "any",
-    keywordSearch: ""
+    keyword: ""
   });
   const handleFilterChange = (value) => {
     setSearchState((prev) => {
@@ -4086,7 +4086,8 @@ var EntrySearchFilter = ({
         options: [
           ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
           ...selectOptions ? selectOptions.map((option) => {
-            return { value: option.id, label: option.name };
+            var _a;
+            return { name: option == null ? void 0 : option.name, label: (_a = option.label) != null ? _a : option == null ? void 0 : option.name, id: option.id };
           }) : []
         ],
         value: searchState.contentType
@@ -4097,10 +4098,10 @@ var EntrySearchFilter = ({
       {
         inputFieldName: searchInputName,
         placeholder: searchInputPlaceholderText,
-        onSearchTextChanged: (e) => handleFilterChange({ keywordSearch: e }),
+        onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
         disabledFieldSubmission: true,
-        onClear: () => handleFilterChange({ keywordSearch: "" }),
-        value: searchState.keywordSearch
+        onClear: () => handleFilterChange({ keyword: "" }),
+        value: searchState.keyword
       }
     )
   ] });
@@ -4488,7 +4489,7 @@ var EntrySearchResultList = ({
 };
 
 // src/components/EntrySearch/QueryFilter.tsx
-import { Input as Input7, InputSelect as InputSelect7 } from "@uniformdev/design-system";
+import { Input as Input7, InputKeywordSearch as InputKeywordSearch3, InputSelect as InputSelect7 } from "@uniformdev/design-system";
 import { useEffect as useEffect7, useState as useState11 } from "react";
 import { jsx as jsx53, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var QueryFilter = ({
@@ -4497,6 +4498,8 @@ var QueryFilter = ({
   contentTypeLabel = "Filter by content type",
   typeSelectorAllTypesOptionText = "All content types",
   contentTypeOptions,
+  searchInputName = "searchText",
+  searchInputPlaceholderText = "Enter keyword to narrow your results",
   countLabel = "Count",
   countValue = 5,
   sortLabel = "Sort",
@@ -4505,11 +4508,13 @@ var QueryFilter = ({
   sortOrderOptions = [
     {
       name: "Ascending",
-      id: "asc"
+      id: "asc",
+      label: "Ascending"
     },
     {
       name: "Descending",
-      id: "desc"
+      id: "desc",
+      label: "Descending"
     }
   ],
   children
@@ -4518,6 +4523,7 @@ var QueryFilter = ({
   const { query, onSetQuery } = useEntrySearchContext();
   const [queryState, setQueryState] = useState11({
     contentType: "",
+    keyword: "",
     count: countValue != null ? countValue : 5,
     sortBy: (_a = sortOptions[0].id) != null ? _a : "",
     sortOrder: (_b = sortOrderOptions[0].id) != null ? _b : ""
@@ -4532,15 +4538,17 @@ var QueryFilter = ({
   return /* @__PURE__ */ jsxs33("fieldset", { children: [
     /* @__PURE__ */ jsx53("span", { css: EntrySearchFilterContainerLabel, children: queryFilterTitle }),
     /* @__PURE__ */ jsxs33("div", { css: EntrySearchFilterContainer, children: [
-      /* @__PURE__ */ jsxs33("div", { css: EntrySearchFilterGrid("1fr minmax(100px, 0.2fr)"), children: [
+      /* @__PURE__ */ jsxs33("div", { css: EntrySearchFilterGrid("0.5fr 1fr"), children: [
         /* @__PURE__ */ jsx53(
           InputSelect7,
           {
             label: contentTypeLabel,
+            showLabel: false,
             options: [
-              ...!requireContentType ? [{ value: "", label: typeSelectorAllTypesOptionText }] : [],
+              ...!requireContentType ? [{ id: "", label: typeSelectorAllTypesOptionText }] : [],
               ...contentTypeOptions ? contentTypeOptions.map((option) => {
-                return { value: option.id, label: option.name };
+                var _a2;
+                return { id: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
               }) : []
             ],
             onChange: (e) => handleFilterChange({ contentType: e.target.value }),
@@ -4548,17 +4556,18 @@ var QueryFilter = ({
           }
         ),
         /* @__PURE__ */ jsx53(
-          Input7,
+          InputKeywordSearch3,
           {
-            label: countLabel,
-            type: "number",
-            onChange: (e) => handleFilterChange({ count: e.target.value }),
-            defaultValue: countValue,
-            value: queryState.count
+            inputFieldName: searchInputName,
+            placeholder: searchInputPlaceholderText,
+            onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+            disabledFieldSubmission: true,
+            onClear: () => handleFilterChange({ keyword: "" }),
+            value: queryState.keyword
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs33("div", { css: EntrySearchFilterGrid("repeat(2, 1fr)"), children: [
+      /* @__PURE__ */ jsxs33("div", { css: EntrySearchFilterGrid("repeat(2, 1fr) 0.5fr"), children: [
         /* @__PURE__ */ jsx53(
           InputSelect7,
           {
@@ -4566,10 +4575,11 @@ var QueryFilter = ({
             options: [
               {
                 label: "Select a sort",
-                value: ""
+                id: ""
               },
               ...sortOptions ? sortOptions.map((option) => {
-                return { value: option.id, label: option.name };
+                var _a2;
+                return { id: option.id, name: option.name, label: (_a2 = option.label) != null ? _a2 : option.name };
               }) : []
             ],
             onChange: (e) => handleFilterChange({ sortBy: e.target.value }),
@@ -4582,12 +4592,23 @@ var QueryFilter = ({
             label: sortOrderLabel,
             options: [
               ...sortOrderOptions ? sortOrderOptions.map((option) => {
-                return { value: option.id, label: option.name };
+                var _a2;
+                return { value: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
               }) : []
             ],
             onChange: (e) => handleFilterChange({ sortOrder: e.target.value }),
             value: queryState.sortOrder
           }
+        ),
+        /* @__PURE__ */ jsx53(
+          Input7,
+          {
+            label: countLabel,
+            type: "number",
+            onChange: (e) => handleFilterChange({ count: e.target.value }),
+            defaultValue: countValue,
+            value: queryState.count
+          }
         )
       ] }),
       children
@@ -4687,10 +4708,10 @@ import {
   Heading,
   Input as Input8,
   InputComboBox,
-  InputKeywordSearch as InputKeywordSearch3,
+  InputKeywordSearch as InputKeywordSearch4,
   InputSelect as InputSelect8,
   InputToggle,
-  InputKeywordSearch as InputKeywordSearch4,
+  InputKeywordSearch as InputKeywordSearch5,
   Label,
   LoadingIndicator as LoadingIndicator4,
   LoadingOverlay as LoadingOverlay2,
@@ -4743,11 +4764,11 @@ export {
   icons_exports as Icons,
   Input8 as Input,
   InputComboBox,
-  InputKeywordSearch3 as InputKeywordSearch,
+  InputKeywordSearch4 as InputKeywordSearch,
   InputSelect8 as InputSelect,
   InputToggle,
   InputVariables,
-  InputKeywordSearch4 as KeywordSearchInput,
+  InputKeywordSearch5 as KeywordSearchInput,
   Label,
   LinkButton,
   LoadingIndicator4 as LoadingIndicator,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "18.30.1-alpha.15+d985383e0",
+  "version": "18.30.1-alpha.17+2d6d08805",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -43,8 +43,8 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/design-system": "18.30.1-alpha.15+d985383e0",
-    "@uniformdev/mesh-sdk": "18.30.1-alpha.15+d985383e0",
+    "@uniformdev/design-system": "18.30.1-alpha.17+2d6d08805",
+    "@uniformdev/mesh-sdk": "18.30.1-alpha.17+2d6d08805",
     "formik": "^2.2.9",
     "react-beautiful-dnd": "13.1.1",
     "react-icons": "4.8.0",
@@ -73,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d985383e09e6f498197945f05ab5a43e0bc61eb2"
+  "gitHead": "2d6d0880575669784931c6481be92847ac55f141"
 }