@uniformdev/mesh-sdk-react 19.114.0 → 19.114.1-alpha.7

package/dist/index.d.mts

@@ -1459,12 +1459,16 @@ type QueryFilterSearchProps = {
     /** sets the sortOrder filter value */
     sortOrder: string;
 };
-type QuertFilterSelectionOptionProps = Array<{
+type QueryFilterSelectionOptionProps = Array<{
     id: string;
     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'
      */

package/dist/index.d.ts

@@ -1459,12 +1459,16 @@ type QueryFilterSearchProps = {
     /** sets the sortOrder filter value */
     sortOrder: string;
 };
-type QuertFilterSelectionOptionProps = Array<{
+type QueryFilterSelectionOptionProps = Array<{
     id: string;
     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'
      */

package/dist/index.esm.js

@@ -6515,7 +6515,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 +6589,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
           }
         )
       ]
@@ -6920,7 +6920,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 = ({
@@ -6955,10 +6955,10 @@ var QueryFilter = ({
   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: countValue,
+    sortBy: (_c = query.sortBy) != null ? _c : "",
+    sortOrder: (_d = query.sortOrder) != null ? _d : ""
   });
   const handleFilterChange = (value) => {
     setQueryState((prev) => ({ ...prev, ...value }));
@@ -6966,7 +6966,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: [
@@ -6979,15 +6979,15 @@ var QueryFilter = ({
           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
             }
           )
         }
@@ -7007,13 +7007,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
               }
@@ -7058,16 +7053,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 +7075,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 +7180,7 @@ import {
   Heading,
   Input as Input6,
   InputComboBox,
-  InputKeywordSearch as InputKeywordSearch4,
+  InputKeywordSearch as InputKeywordSearch2,
   InputSelect as InputSelect8,
   InputToggle,
   Label,
@@ -7252,7 +7234,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

@@ -6721,14 +6721,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
           }
         )
       ]
@@ -7087,10 +7087,10 @@ var QueryFilter = ({
   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: countValue,
+    sortBy: (_c = query.sortBy) != null ? _c : "",
+    sortOrder: (_d = query.sortOrder) != null ? _d : ""
   });
   const handleFilterChange = (value) => {
     setQueryState((prev) => ({ ...prev, ...value }));
@@ -7098,7 +7098,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: [
@@ -7111,15 +7111,15 @@ var QueryFilter = ({
           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
             }
           )
         }
@@ -7139,13 +7139,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
               }
@@ -7190,16 +7185,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 +7207,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

@@ -6515,7 +6515,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 +6589,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
           }
         )
       ]
@@ -6920,7 +6920,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 = ({
@@ -6955,10 +6955,10 @@ var QueryFilter = ({
   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: countValue,
+    sortBy: (_c = query.sortBy) != null ? _c : "",
+    sortOrder: (_d = query.sortOrder) != null ? _d : ""
   });
   const handleFilterChange = (value) => {
     setQueryState((prev) => ({ ...prev, ...value }));
@@ -6966,7 +6966,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: [
@@ -6979,15 +6979,15 @@ var QueryFilter = ({
           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
             }
           )
         }
@@ -7007,13 +7007,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
               }
@@ -7058,16 +7053,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 +7075,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 +7180,7 @@ import {
   Heading,
   Input as Input6,
   InputComboBox,
-  InputKeywordSearch as InputKeywordSearch4,
+  InputKeywordSearch as InputKeywordSearch2,
   InputSelect as InputSelect8,
   InputToggle,
   Label,
@@ -7252,7 +7234,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.114.0",
+  "version": "19.114.1-alpha.7+205e9240f9",
   "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.114.0",
-    "@uniformdev/design-system": "19.114.0",
-    "@uniformdev/mesh-sdk": "19.114.0",
+    "@uniformdev/canvas": "19.114.1-alpha.7+205e9240f9",
+    "@uniformdev/design-system": "19.114.1-alpha.7+205e9240f9",
+    "@uniformdev/mesh-sdk": "19.114.1-alpha.7+205e9240f9",
     "dequal": "^2.0.3",
     "lexical": "^0.12.0",
     "mitt": "^3.0.0",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c9d4260a191785215cdca52c78f869be809f6e06"
+  "gitHead": "205e9240f95b7c75d2cdaefb5588c56b8c1e9368"
 }