@uniformdev/mesh-sdk-react 20.49.3 → 20.49.4-alpha.102

package/dist/index.d.mts

@@ -1742,6 +1742,8 @@ type SearchAndFilterProviderProps = {
     onResetFilterValues?: () => void;
     /** the total number of results */
     totalResults?: number;
+    /** whether data is currently loading */
+    isLoading?: boolean;
     /** the filter mapper function */
     filterMapper?: FilterMapper;
     /** sets child components giving access to useSearchAndFilter context */
@@ -1776,6 +1778,8 @@ type SearchAndFilterContextProps = {
     filterMapper?: FilterMapper;
     /** the total number of results */
     totalResults?: number;
+    /** whether data is currently loading */
+    isLoading?: boolean;
     /** Allow to bind dynamic inputs to the search term */
     allowBindingSearchTerm?: boolean;
 };
@@ -1784,7 +1788,7 @@ declare const SearchAndFilterContext: React$1.Context<SearchAndFilterContextProp
  * Search and filter provider
  * @example <SearchAndFilterProvider filters={filters} filterOptions={filterOptions} onSearchChange={onSearchChange} onChange={onChange}>Children</SearchAndFilterProvider>
  * */
-declare const SearchAndFilterProvider: ({ filters, filterOptions, filterVisible, alwaysVisible, defaultSearchTerm, onSearchChange, onChange, resetFilterValues, onResetFilterValues, totalResults, filterMapper, children, allowBindingSearchTerm, }: SearchAndFilterProviderProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SearchAndFilterProvider: ({ filters, filterOptions, filterVisible, alwaysVisible, defaultSearchTerm, onSearchChange, onChange, resetFilterValues, onResetFilterValues, totalResults, isLoading, filterMapper, children, allowBindingSearchTerm, }: SearchAndFilterProviderProps) => _emotion_react_jsx_runtime.JSX.Element;
 /** Search and filter hook
  * @example const { searchTerm, setSearchTerm, filterVisibility, setFilterVisibility, filters, setFilters, handleAddFilter, handleResetFilters, handleDeleteFilter, filterOptions, validFilterQuery } = useSearchAndFilter();
  */
@@ -1815,6 +1819,8 @@ declare const useSearchAndFilter: () => {
     filterMapper?: FilterMapper;
     /** the total number of results */
     totalResults?: number;
+    /** whether data is currently loading */
+    isLoading?: boolean;
     /** Allow to bind dynamic inputs to the search term */
     allowBindingSearchTerm?: boolean;
 };
@@ -1830,6 +1836,8 @@ type SearchAndFilterProps = Omit<SearchAndFilterProviderProps, 'children'> & {
     viewSwitchControls?: React$1.ReactNode;
     /** The number of total results */
     totalResults?: number;
+    /** Whether data is currently loading */
+    isLoading?: boolean;
     /** The results container view
      * @default '<SearchAndFilterResultContainer />'
      */
@@ -1847,7 +1855,7 @@ type SearchAndFilterProps = Omit<SearchAndFilterProviderProps, 'children'> & {
  * Search and filter component
  * @example <SearchAndFilter filters={filters} filterOptions={filterOptions} onChange={onChange} onSearchChange={onSearchChange} onSearchReset={onSearchReset} totalResults={totalResults} />
  * */
-declare const SearchAndFilter: ({ filters, filterOptions, filterVisible, filterControls, viewSwitchControls, resultsContainerView, filterMapper, additionalFiltersContainer, onChange, defaultSearchTerm, onSearchChange, totalResults, allowBindingSearchTerm, resetFilterValues, onResetFilterValues, }: SearchAndFilterProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SearchAndFilter: ({ filters, filterOptions, filterVisible, filterControls, viewSwitchControls, resultsContainerView, filterMapper, additionalFiltersContainer, onChange, defaultSearchTerm, onSearchChange, totalResults, isLoading, allowBindingSearchTerm, resetFilterValues, onResetFilterValues, }: SearchAndFilterProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type FilterItemsProps = {
     /** The text for the add button */

package/dist/index.d.ts

@@ -1742,6 +1742,8 @@ type SearchAndFilterProviderProps = {
     onResetFilterValues?: () => void;
     /** the total number of results */
     totalResults?: number;
+    /** whether data is currently loading */
+    isLoading?: boolean;
     /** the filter mapper function */
     filterMapper?: FilterMapper;
     /** sets child components giving access to useSearchAndFilter context */
@@ -1776,6 +1778,8 @@ type SearchAndFilterContextProps = {
     filterMapper?: FilterMapper;
     /** the total number of results */
     totalResults?: number;
+    /** whether data is currently loading */
+    isLoading?: boolean;
     /** Allow to bind dynamic inputs to the search term */
     allowBindingSearchTerm?: boolean;
 };
@@ -1784,7 +1788,7 @@ declare const SearchAndFilterContext: React$1.Context<SearchAndFilterContextProp
  * Search and filter provider
  * @example <SearchAndFilterProvider filters={filters} filterOptions={filterOptions} onSearchChange={onSearchChange} onChange={onChange}>Children</SearchAndFilterProvider>
  * */
-declare const SearchAndFilterProvider: ({ filters, filterOptions, filterVisible, alwaysVisible, defaultSearchTerm, onSearchChange, onChange, resetFilterValues, onResetFilterValues, totalResults, filterMapper, children, allowBindingSearchTerm, }: SearchAndFilterProviderProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SearchAndFilterProvider: ({ filters, filterOptions, filterVisible, alwaysVisible, defaultSearchTerm, onSearchChange, onChange, resetFilterValues, onResetFilterValues, totalResults, isLoading, filterMapper, children, allowBindingSearchTerm, }: SearchAndFilterProviderProps) => _emotion_react_jsx_runtime.JSX.Element;
 /** Search and filter hook
  * @example const { searchTerm, setSearchTerm, filterVisibility, setFilterVisibility, filters, setFilters, handleAddFilter, handleResetFilters, handleDeleteFilter, filterOptions, validFilterQuery } = useSearchAndFilter();
  */
@@ -1815,6 +1819,8 @@ declare const useSearchAndFilter: () => {
     filterMapper?: FilterMapper;
     /** the total number of results */
     totalResults?: number;
+    /** whether data is currently loading */
+    isLoading?: boolean;
     /** Allow to bind dynamic inputs to the search term */
     allowBindingSearchTerm?: boolean;
 };
@@ -1830,6 +1836,8 @@ type SearchAndFilterProps = Omit<SearchAndFilterProviderProps, 'children'> & {
     viewSwitchControls?: React$1.ReactNode;
     /** The number of total results */
     totalResults?: number;
+    /** Whether data is currently loading */
+    isLoading?: boolean;
     /** The results container view
      * @default '<SearchAndFilterResultContainer />'
      */
@@ -1847,7 +1855,7 @@ type SearchAndFilterProps = Omit<SearchAndFilterProviderProps, 'children'> & {
  * Search and filter component
  * @example <SearchAndFilter filters={filters} filterOptions={filterOptions} onChange={onChange} onSearchChange={onSearchChange} onSearchReset={onSearchReset} totalResults={totalResults} />
  * */
-declare const SearchAndFilter: ({ filters, filterOptions, filterVisible, filterControls, viewSwitchControls, resultsContainerView, filterMapper, additionalFiltersContainer, onChange, defaultSearchTerm, onSearchChange, totalResults, allowBindingSearchTerm, resetFilterValues, onResetFilterValues, }: SearchAndFilterProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SearchAndFilter: ({ filters, filterOptions, filterVisible, filterControls, viewSwitchControls, resultsContainerView, filterMapper, additionalFiltersContainer, onChange, defaultSearchTerm, onSearchChange, totalResults, isLoading, allowBindingSearchTerm, resetFilterValues, onResetFilterValues, }: SearchAndFilterProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type FilterItemsProps = {
     /** The text for the add button */

package/dist/index.esm.js

@@ -1886,8 +1886,11 @@ var input = css4`
 var inputCompact = css4`
   border: 1px solid var(--white);
   padding-block: var(--spacing-sm);
-  min-height: 39px;
   font-size: var(--fs-sm);
+
+  && {
+    min-height: 39px;
+  }
 `;
 var inputDisabled = css4`
   cursor: not-allowed;
@@ -6100,14 +6103,16 @@ var ConditionalInputRowEmpty = css21`
   flex-wrap: nowrap;
 `;
 var SearchInput = css21`
-  max-height: 40px;
-  min-height: unset;
+  && {
+    max-height: 40px;
+    min-height: unset;
+  }
 `;
 var BindableKeywordSearchInputStyles = css21`
   position: relative;
   width: 100%;
 
-  & [data-lexical-editor='true'] {
+  && [data-lexical-editor='true'] {
     padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
     font-size: var(--fs-sm);
     border-radius: var(--rounded-full);
@@ -6424,6 +6429,7 @@ var SearchAndFilterContext = createContext6({
   validFilterQuery: [],
   filterMapper: {},
   totalResults: 0,
+  isLoading: false,
   allowBindingSearchTerm: false
 });
 var SearchAndFilterProvider = ({
@@ -6437,6 +6443,7 @@ var SearchAndFilterProvider = ({
   resetFilterValues = [{ field: "", operator: "", value: "" }],
   onResetFilterValues,
   totalResults,
+  isLoading,
   filterMapper: filterMapper2 = filterMapper,
   children,
   allowBindingSearchTerm
@@ -6512,6 +6519,7 @@ var SearchAndFilterProvider = ({
         filterOptions,
         validFilterQuery,
         totalResults,
+        isLoading,
         filterMapper: filterMapper2,
         allowBindingSearchTerm
       },
@@ -7040,7 +7048,7 @@ var SearchAndFilterResultContainer = ({
   onHandleClear,
   hideClearButton
 }) => {
-  const { searchTerm, totalResults, filters, handleResetFilters, setSearchTerm } = useSearchAndFilter();
+  const { searchTerm, totalResults, filters, handleResetFilters, setSearchTerm, isLoading } = useSearchAndFilter();
   const emptyFilters = filters.length === 0 || filters.every((filter) => !filter.value);
   const getTextValue = ({
     defaultPropText,
@@ -7071,7 +7079,7 @@ var SearchAndFilterResultContainer = ({
     filterText: "No results match the selected filters",
     fallbackText: "No matching results found"
   });
-  if (totalResults && totalResults > 0) {
+  if (isLoading || totalResults === void 0 || totalResults > 0) {
     return null;
   }
   const handleClearSearch = () => {
@@ -7122,6 +7130,7 @@ var SearchAndFilter = ({
   defaultSearchTerm,
   onSearchChange,
   totalResults,
+  isLoading,
   allowBindingSearchTerm = false,
   resetFilterValues = [],
   onResetFilterValues
@@ -7136,6 +7145,7 @@ var SearchAndFilter = ({
       defaultSearchTerm,
       onSearchChange,
       totalResults,
+      isLoading,
       resetFilterValues,
       filterMapper: filterMapper2,
       allowBindingSearchTerm,
@@ -7267,8 +7277,10 @@ var ConditionalInputRow2 = css22`
   }
 `;
 var SearchInput2 = css22`
-  max-height: 40px;
-  min-height: unset;
+  && {
+    max-height: 40px;
+    min-height: unset;
+  }
 `;
 var FilterButton3 = css22`
   align-items: center;

package/dist/index.js

@@ -2026,8 +2026,11 @@ var input = import_react18.css`
 var inputCompact = import_react18.css`
   border: 1px solid var(--white);
   padding-block: var(--spacing-sm);
-  min-height: 39px;
   font-size: var(--fs-sm);
+
+  && {
+    min-height: 39px;
+  }
 `;
 var inputDisabled = import_react18.css`
   cursor: not-allowed;
@@ -6170,14 +6173,16 @@ var ConditionalInputRowEmpty = import_react63.css`
   flex-wrap: nowrap;
 `;
 var SearchInput = import_react63.css`
-  max-height: 40px;
-  min-height: unset;
+  && {
+    max-height: 40px;
+    min-height: unset;
+  }
 `;
 var BindableKeywordSearchInputStyles = import_react63.css`
   position: relative;
   width: 100%;
 
-  & [data-lexical-editor='true'] {
+  && [data-lexical-editor='true'] {
     padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
     font-size: var(--fs-sm);
     border-radius: var(--rounded-full);
@@ -6486,6 +6491,7 @@ var SearchAndFilterContext = (0, import_react64.createContext)({
   validFilterQuery: [],
   filterMapper: {},
   totalResults: 0,
+  isLoading: false,
   allowBindingSearchTerm: false
 });
 var SearchAndFilterProvider = ({
@@ -6499,6 +6505,7 @@ var SearchAndFilterProvider = ({
   resetFilterValues = [{ field: "", operator: "", value: "" }],
   onResetFilterValues,
   totalResults,
+  isLoading,
   filterMapper: filterMapper2 = filterMapper,
   children,
   allowBindingSearchTerm
@@ -6574,6 +6581,7 @@ var SearchAndFilterProvider = ({
         filterOptions,
         validFilterQuery,
         totalResults,
+        isLoading,
         filterMapper: filterMapper2,
         allowBindingSearchTerm
       },
@@ -7102,7 +7110,7 @@ var SearchAndFilterResultContainer = ({
   onHandleClear,
   hideClearButton
 }) => {
-  const { searchTerm, totalResults, filters, handleResetFilters, setSearchTerm } = useSearchAndFilter();
+  const { searchTerm, totalResults, filters, handleResetFilters, setSearchTerm, isLoading } = useSearchAndFilter();
   const emptyFilters = filters.length === 0 || filters.every((filter) => !filter.value);
   const getTextValue = ({
     defaultPropText,
@@ -7133,7 +7141,7 @@ var SearchAndFilterResultContainer = ({
     filterText: "No results match the selected filters",
     fallbackText: "No matching results found"
   });
-  if (totalResults && totalResults > 0) {
+  if (isLoading || totalResults === void 0 || totalResults > 0) {
     return null;
   }
   const handleClearSearch = () => {
@@ -7184,6 +7192,7 @@ var SearchAndFilter = ({
   defaultSearchTerm,
   onSearchChange,
   totalResults,
+  isLoading,
   allowBindingSearchTerm = false,
   resetFilterValues = [],
   onResetFilterValues
@@ -7198,6 +7207,7 @@ var SearchAndFilter = ({
       defaultSearchTerm,
       onSearchChange,
       totalResults,
+      isLoading,
       resetFilterValues,
       filterMapper: filterMapper2,
       allowBindingSearchTerm,
@@ -7329,8 +7339,10 @@ var ConditionalInputRow2 = import_react69.css`
   }
 `;
 var SearchInput2 = import_react69.css`
-  max-height: 40px;
-  min-height: unset;
+  && {
+    max-height: 40px;
+    min-height: unset;
+  }
 `;
 var FilterButton3 = import_react69.css`
   align-items: center;

package/dist/index.mjs

@@ -1886,8 +1886,11 @@ var input = css4`
 var inputCompact = css4`
   border: 1px solid var(--white);
   padding-block: var(--spacing-sm);
-  min-height: 39px;
   font-size: var(--fs-sm);
+
+  && {
+    min-height: 39px;
+  }
 `;
 var inputDisabled = css4`
   cursor: not-allowed;
@@ -6100,14 +6103,16 @@ var ConditionalInputRowEmpty = css21`
   flex-wrap: nowrap;
 `;
 var SearchInput = css21`
-  max-height: 40px;
-  min-height: unset;
+  && {
+    max-height: 40px;
+    min-height: unset;
+  }
 `;
 var BindableKeywordSearchInputStyles = css21`
   position: relative;
   width: 100%;
 
-  & [data-lexical-editor='true'] {
+  && [data-lexical-editor='true'] {
     padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
     font-size: var(--fs-sm);
     border-radius: var(--rounded-full);
@@ -6424,6 +6429,7 @@ var SearchAndFilterContext = createContext6({
   validFilterQuery: [],
   filterMapper: {},
   totalResults: 0,
+  isLoading: false,
   allowBindingSearchTerm: false
 });
 var SearchAndFilterProvider = ({
@@ -6437,6 +6443,7 @@ var SearchAndFilterProvider = ({
   resetFilterValues = [{ field: "", operator: "", value: "" }],
   onResetFilterValues,
   totalResults,
+  isLoading,
   filterMapper: filterMapper2 = filterMapper,
   children,
   allowBindingSearchTerm
@@ -6512,6 +6519,7 @@ var SearchAndFilterProvider = ({
         filterOptions,
         validFilterQuery,
         totalResults,
+        isLoading,
         filterMapper: filterMapper2,
         allowBindingSearchTerm
       },
@@ -7040,7 +7048,7 @@ var SearchAndFilterResultContainer = ({
   onHandleClear,
   hideClearButton
 }) => {
-  const { searchTerm, totalResults, filters, handleResetFilters, setSearchTerm } = useSearchAndFilter();
+  const { searchTerm, totalResults, filters, handleResetFilters, setSearchTerm, isLoading } = useSearchAndFilter();
   const emptyFilters = filters.length === 0 || filters.every((filter) => !filter.value);
   const getTextValue = ({
     defaultPropText,
@@ -7071,7 +7079,7 @@ var SearchAndFilterResultContainer = ({
     filterText: "No results match the selected filters",
     fallbackText: "No matching results found"
   });
-  if (totalResults && totalResults > 0) {
+  if (isLoading || totalResults === void 0 || totalResults > 0) {
     return null;
   }
   const handleClearSearch = () => {
@@ -7122,6 +7130,7 @@ var SearchAndFilter = ({
   defaultSearchTerm,
   onSearchChange,
   totalResults,
+  isLoading,
   allowBindingSearchTerm = false,
   resetFilterValues = [],
   onResetFilterValues
@@ -7136,6 +7145,7 @@ var SearchAndFilter = ({
       defaultSearchTerm,
       onSearchChange,
       totalResults,
+      isLoading,
       resetFilterValues,
       filterMapper: filterMapper2,
       allowBindingSearchTerm,
@@ -7267,8 +7277,10 @@ var ConditionalInputRow2 = css22`
   }
 `;
 var SearchInput2 = css22`
-  max-height: 40px;
-  min-height: unset;
+  && {
+    max-height: 40px;
+    min-height: unset;
+  }
 `;
 var FilterButton3 = css22`
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "20.49.3",
+  "version": "20.49.4-alpha.102+140d1a56b4",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -51,10 +51,10 @@
     "@lexical/selection": "0.39.0",
     "@lexical/utils": "0.39.0",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v5.5.0/react-icons-all-files-5.5.0.tgz",
-    "@uniformdev/canvas": "20.49.3",
-    "@uniformdev/design-system": "20.49.3",
-    "@uniformdev/mesh-sdk": "20.49.3",
-    "@uniformdev/richtext": "20.49.3",
+    "@uniformdev/canvas": "20.49.4-alpha.102+140d1a56b4",
+    "@uniformdev/design-system": "20.49.4-alpha.102+140d1a56b4",
+    "@uniformdev/mesh-sdk": "20.49.4-alpha.102+140d1a56b4",
+    "@uniformdev/richtext": "20.49.4-alpha.102+140d1a56b4",
     "dequal": "^2.0.3",
     "lexical": "0.39.0",
     "mitt": "3.0.1",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a6424635c7b318f5039e4d9c4d5a2ec72125af46"
+  "gitHead": "140d1a56b4b45021216a166bcaf7ebe629681b0b"
 }