aefis-core-ui 3.0.0-rc110 → 3.0.0-rc113

package/dist/index.d.ts

@@ -131,7 +131,8 @@ import Widget from "./components/Widget/Widget";
 import TextTransition from "./components/TextTransition/TextTransition";
 import SurveyComments from "./components/SurveyComments/SurveyComments";
 import IconButton from "./components/IconButton/IconButton";
+import FilterPanelWithTextSearch from "./components/FilterPanelWithTextSearch/FilterPanelWithTextSearch";
 import { useSelectFormState } from "./components/DynamicForm/store";
 import { useSetFormState } from "./components/DynamicForm/store";
 import useReadOnly from "./components/DynamicForm/hooks/useReadOnly/useReadOnly";
-export { EditableDatatable, UnstableDataTable, UnstableRichDataTable, Actions, ActionButtons, ActionMenuButton, Alert, AppToolbar, AssessmentPerformanceChart, AvatarBox, AvatarTitle, Breadcrumbs, BusinessObjectHeader, BusinessObject, businessObjectColor, businessObjectConfiguration, businessObjectIcon, businessObjectIconName, BusinessObjectCard, BusinessObjectCardSectionTitle, BusinessObjectCardEmptySection, BusinessObjectCardSection, BusinessObjectPanel, BusinessObjectPanelHeader, BusinessObjectPanelSection, BusinessObjectPanelSectionTitle, BusinessObjectPicker, BusinessObjectStatus, BusinessObjectStatusButton, Collapsible, CollapsibleProvider, useCollapsibleState, CollapsibleContent, CollapsibleContentContainer, CollapsibleContentButton, CollapsibleContentButtonContainer, withStatusButtonDataSource, BusinessObjectTable, Button, Footer, Chip, ChipList, ContactForm, ContentBox, ContentBoxHeader, CoreProvider, createEvent, createStore, CurriculumChart, dataSourceManager, getConfiguration, setDataSourceConfiguration, registerDataSource, registerDataSources, useDataSourceQuery, useDataSourceInfiniteQuery, useDataSourceMutation, filterSortData, getBaseUrl, getDataSourceUrl, DataTable, DateTitle, DynamicForm, DatePicker, DisplayInFrame, DocViewer, Drawer, EditableText, FilterPanel, FilterPanelFilterChips, FilterPanelMapFilters, FullPageViewer, http, Icon, Image, IsometricImage, List, ListItem, ListItemGroup, MenuButton, ModalDialog, Navigation, NavigationDrawer, Notification, OutcomeSpace, outcomeSpaceColor, outcomeSpaceTypeFromSource, PanelDrawer, ProgressChart, RichDataTable, RubricDistributionChart, RubricScoreSlider, RubricLegend, SaveModal, ScrollToTopButton, ScrollingContainer, SentimentScale, SkeletonContent, StatBoxes, StatRow, StatusMessage, SvgImage, SwipeableTabPanel, SwipeableTabPanelContent, TabPanels, template, TextBuilder, TextBuilderStore, Timeline, TitleAndActionHeader, TitleAndActionHeaderFilterButton, TitleAndDescription, useComponentWillMount, useDataSourceUrl, useDebounceCallback, useNotify, UserAvatar, WizardPanel, WizardCompletedItemList, useRefDimensions, createComponentEvent, DynamicFormBusinessObjectPickerField, UnstableScrollingContainer, UnstableAvatarTitle, Widget, TextTransition, SurveyComments, IconButton };
+export { EditableDatatable, UnstableDataTable, UnstableRichDataTable, Actions, ActionButtons, ActionMenuButton, Alert, AppToolbar, AssessmentPerformanceChart, AvatarBox, AvatarTitle, Breadcrumbs, BusinessObjectHeader, BusinessObject, businessObjectColor, businessObjectConfiguration, businessObjectIcon, businessObjectIconName, BusinessObjectCard, BusinessObjectCardSectionTitle, BusinessObjectCardEmptySection, BusinessObjectCardSection, BusinessObjectPanel, BusinessObjectPanelHeader, BusinessObjectPanelSection, BusinessObjectPanelSectionTitle, BusinessObjectPicker, BusinessObjectStatus, BusinessObjectStatusButton, Collapsible, CollapsibleProvider, useCollapsibleState, CollapsibleContent, CollapsibleContentContainer, CollapsibleContentButton, CollapsibleContentButtonContainer, withStatusButtonDataSource, BusinessObjectTable, Button, Footer, Chip, ChipList, ContactForm, ContentBox, ContentBoxHeader, CoreProvider, createEvent, createStore, CurriculumChart, dataSourceManager, getConfiguration, setDataSourceConfiguration, registerDataSource, registerDataSources, useDataSourceQuery, useDataSourceInfiniteQuery, useDataSourceMutation, filterSortData, getBaseUrl, getDataSourceUrl, DataTable, DateTitle, DynamicForm, DatePicker, DisplayInFrame, DocViewer, Drawer, EditableText, FilterPanel, FilterPanelFilterChips, FilterPanelMapFilters, FullPageViewer, http, Icon, Image, IsometricImage, List, ListItem, ListItemGroup, MenuButton, ModalDialog, Navigation, NavigationDrawer, Notification, OutcomeSpace, outcomeSpaceColor, outcomeSpaceTypeFromSource, PanelDrawer, ProgressChart, RichDataTable, RubricDistributionChart, RubricScoreSlider, RubricLegend, SaveModal, ScrollToTopButton, ScrollingContainer, SentimentScale, SkeletonContent, StatBoxes, StatRow, StatusMessage, SvgImage, SwipeableTabPanel, SwipeableTabPanelContent, TabPanels, template, TextBuilder, TextBuilderStore, Timeline, TitleAndActionHeader, TitleAndActionHeaderFilterButton, TitleAndDescription, useComponentWillMount, useDataSourceUrl, useDebounceCallback, useNotify, UserAvatar, WizardPanel, WizardCompletedItemList, useRefDimensions, createComponentEvent, DynamicFormBusinessObjectPickerField, UnstableScrollingContainer, UnstableAvatarTitle, Widget, TextTransition, SurveyComments, IconButton, FilterPanelWithTextSearch };

package/dist/index.modern.js

@@ -81,6 +81,7 @@ import produce from 'immer';
 import { Scrollbars } from 'react-custom-scrollbars-2';
 import { useGridApiRef, DataGridPro } from '@mui/x-data-grid-pro/';
 import { GridColumnMenu, GridFooterContainer, GridPagination, GridActionsCellItem, GridRowModes } from '@mui/x-data-grid-pro';
+import { Search as Search$3 } from '@mui/icons-material';
 import { MuiForm5 } from '@rjsf/material-ui';
 import isEmpty from 'lodash/isEmpty';
 import compose from 'lodash/fp/compose';
@@ -7646,7 +7647,7 @@ const Chip = ({
           color: colors["default"]
         }
       },
-      children: /*#__PURE__*/jsx(Cancel, {
+      children: /*#__PURE__*/jsx(Close, {
         sx: {
           color: colors["dark"]
         }
@@ -13261,7 +13262,8 @@ const FilterPanel = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     addFilter: filter => addFilter(filter),
     getFilters: () => filters,
     getSort: () => sort,
-    resetFilters: () => handleResetFilters()
+    resetFilters: () => handleResetFilters(),
+    setSearch: keyword => handleSearchChange(keyword)
   }));
   const handleButtonClick = event => {
     if (menuPosition) {
@@ -13288,7 +13290,14 @@ const FilterPanel = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const handleSearchChange = keyword => {
     if (panelSearch.includes(keyword)) return;
     setPanelSearch([...panelSearch, keyword]);
-    addFilter({
+
+    // addFilter({
+    // 	index: -1,
+    // 	type: "keyword",
+    // 	id: keyword,
+    // 	data: { id: keyword, name: keyword }
+    // });
+    const searchFilter = {
       index: -1,
       type: "keyword",
       id: keyword,
@@ -13296,7 +13305,13 @@ const FilterPanel = /*#__PURE__*/React__default.forwardRef((props, ref) => {
         id: keyword,
         name: keyword
       }
-    });
+    };
+    if (filters) {
+      const newFilterArray = !filters.find(i => i.type === searchFilter.type && i.data.id === searchFilter.data.id) ? [...filters, searchFilter] : removeFilter(searchFilter);
+      setFilters(newFilterArray);
+      //TODO: maybe we can put onChange to under if statement.
+      !onApplyFilters && (onChange == null ? void 0 : onChange(mapFilters(newFilterArray), newFilterArray));
+    }
     if (onSearchChange && !onApplyFilters) {
       const newSearch = getSearchFilter(filters);
       newSearch.push(keyword);
@@ -25796,7 +25811,7 @@ const FilterChips = ({
           variant: "chip",
           size: "small",
           displayOptions: {
-            hasIcon: filter.type !== "keyword"
+            hasIcon: false
           },
           type: filter.type || "businessObject",
           template: filter.template,
@@ -25874,7 +25889,7 @@ const FilterChipRow = _ref => {
       alignItems: "center"
     },
     children: /*#__PURE__*/jsxs(Box$2, {
-      sx: {
+      sx: _extends({
         borderBottom: "1px solid #e0e0e0",
         borderTop: "1px solid #e0e0e0",
         width: "100%",
@@ -25882,7 +25897,7 @@ const FilterChipRow = _ref => {
         alignItems: "center",
         pl: 1,
         pr: 1
-      },
+      }, props.filterChipsContainerSx || {}),
       children: [/*#__PURE__*/jsx(Box$2, {
         sx: {
           flexGrow: 1,
@@ -25908,7 +25923,8 @@ const FilterChipRow = _ref => {
 };
 FilterChipRow.propTypes = {
   onResetFiltersClick: PropTypes.func,
-  IconButtonProps: PropTypes.object
+  IconButtonProps: PropTypes.object,
+  filterChipsContainerSx: PropTypes.object
 };
 
 const _excluded$8 = ["status", "data", "isFetching", "fetchNextPage", "hasNextPage", "refetch"];
@@ -25951,7 +25967,7 @@ const initialFilterState = {
   sortQueryParams: null
 };
 const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref) {
-  var _props$saveFilterName, _props$filterPanelCon, _props$data, _props$rowActions, _props$dataTableProps, _props$dataTableProps2, _ref2, _data$headers$records, _data$headers, _data$pages2, _data$pages2$;
+  var _props$saveFilterName, _props$filterPanelCon, _filterPanelState$fil2, _props$data, _props$rowActions, _props$dataTableProps, _props$dataTableProps2, _ref2, _data$headers$records, _data$headers, _data$pages2, _data$pages2$;
   const didMount = useDidMount();
   const DataTableRef = useRef();
   const saveFilterName = props == null ? void 0 : (_props$saveFilterName = props.saveFilterName) == null ? void 0 : _props$saveFilterName.split == null ? void 0 : _props$saveFilterName.split(".");
@@ -26351,119 +26367,136 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
       exportOptions: props.exportOptions || defaultExportOptions,
       isLoading: getFiltersQuery.status === "loading",
       actions: props.actions && props.actions.length > 0 || props.addAction ? updateActions(props.actions, handleDrawerOpen, enableTableRowAction, selectedRowCount, Add) : undefined,
-      onFilterClick: isFilterPanelEnabled ? handleFilterClick : undefined,
+      onFilterClick: isFilterPanelEnabled && !props.showTextSearch ? handleFilterClick : undefined,
       hasFilters: isFilterSelected,
       disableFilterButton: isFetching,
-      slots: _extends({}, props.showBottomFilters && {
-        bottomPart: () => {
-          return /*#__PURE__*/jsx(AnimatePresence, {
-            children: isFilterSelected && /*#__PURE__*/jsx(motion.div, {
-              initial: {
-                opacity: 1,
-                height: 0
-              },
-              animate: {
-                opacity: 1,
-                height: "auto",
-                transition: {
-                  height: {
-                    duration: 0.4
-                  },
-                  opacity: {
-                    duration: 0.25,
-                    delay: 0.15
-                  }
-                }
-              },
-              exit: {
-                opacity: 0,
-                height: 0,
-                transition: {
-                  height: {
-                    duration: 0.4
-                  },
-                  opacity: {
-                    duration: 0.25
-                  }
-                }
-              },
-              transition: {
-                duration: 0.2
-              },
-              children: /*#__PURE__*/jsx(FilterChipRow, {
-                sort: filterPanelState.sort,
-                onSortDelete: sortItem => {
-                  var _filterPanelRef$curre;
-                  (_filterPanelRef$curre = filterPanelRef.current) == null ? void 0 : _filterPanelRef$curre.removeSort == null ? void 0 : _filterPanelRef$curre.removeSort(sortItem);
-                  const filteredSort = filterPanelState.sort.filter(f => f.label !== sortItem.label);
-                  const newFilterPanelState = _extends({}, filterPanelState, {
-                    sort: filteredSort,
-                    sortCount: filteredSort.length || 0,
-                    sortQueryParams: mapSort(filteredSort)
-                  });
-                  setFilterPanelState(newFilterPanelState);
-                  sendFilterToServer(newFilterPanelState);
-                },
-                filters: filterPanelState.filterArray,
-                onFilterDelete: filter => {
-                  var _filterPanelRef$curre2;
-                  const removedFilterArray = filterPanelState.filterArray.filter(i => i.index !== filter.index || filter.id !== i.id);
-                  let search = filterPanelState.searchText;
-                  if ((filter == null ? void 0 : filter.type) === "keyword") {
-                    search = filterPanelState.searchText.filter(s => s !== filter.id);
-                  }
-                  const newFilterPanelState = _extends({}, filterPanelState, {
-                    filterCount: removedFilterArray.length,
-                    filter: mapFilters(removedFilterArray),
-                    filterArray: removedFilterArray,
-                    searchText: search
-                  });
-                  setFilterPanelState(newFilterPanelState);
-                  (_filterPanelRef$curre2 = filterPanelRef.current) == null ? void 0 : _filterPanelRef$curre2.removeFilter == null ? void 0 : _filterPanelRef$curre2.removeFilter(filter);
-                  sendFilterToServer(newFilterPanelState);
-                },
-                onResetFiltersClick: filter => {
-                  var _filterPanelRef$curre3;
-                  setFilterPanelState(initialFilterState);
-                  (_filterPanelRef$curre3 = filterPanelRef.current) == null ? void 0 : _filterPanelRef$curre3.resetFilters();
-                  sendFilterToServer(initialFilterState);
-                }
-              })
-            }, "filterPanelFilter")
-          });
-        }
-      }, props.showTextSearch && {
-        titleRightEndAdornment: () => {
-          return /*#__PURE__*/jsx(Box$2, {
-            sx: {
-              pl: 2,
-              width: "20ch",
-              transition: "width .2s",
-              "&:focus-within": {
-                width: "30ch"
-              }
-            },
-            children: /*#__PURE__*/jsx(TextSearch$1, {
-              inputRef: textfieldRef,
-              InputProps: {
-                startAdornment: /*#__PURE__*/jsx(InputAdornment, {
-                  position: "start",
-                  children: /*#__PURE__*/jsx(Search, {
-                    color: "textSecondary"
-                  })
-                })
-              },
-              onChange: handleBottomTextSearch,
-              placeholder: "Type to search",
-              sx: {
-                width: "100%"
-              }
+      menu: props.headerMenu
+    }, props.titleAndActionHeaderProps)), props.showTextSearch && /*#__PURE__*/jsxs(Box$2, {
+      sx: _extends({
+        display: "flex",
+        gap: 2
+      }, filterPanelState.filterArray.length === 0 && {
+        mb: 1
+      }),
+      inputRef: textfieldRef,
+      children: [/*#__PURE__*/jsx(TextSearch$1, {
+        InputProps: {
+          startAdornment: /*#__PURE__*/jsx(InputAdornment, {
+            position: "start",
+            children: /*#__PURE__*/jsx(Search, {
+              color: "textSecondary"
             })
-          });
+          })
+        },
+        onChange: searchText => {
+          handleBottomTextSearch(searchText);
+        },
+        placeholder: "Type to search",
+        sx: {
+          width: "100%"
         }
-      }),
-      menu: props.headerMenu
-    }, props.titleAndActionHeaderProps)), /*#__PURE__*/jsx(DataTable, _extends({}, props, {
+      }), /*#__PURE__*/jsx(Button, {
+        color: "primary",
+        variant: "outlined",
+        onClick: () => {
+          handleFilterClick();
+        },
+        children: /*#__PURE__*/jsxs(Box$2, {
+          sx: {
+            display: "inline-flex",
+            gap: 1
+          },
+          children: [/*#__PURE__*/jsx(Badge$1, {
+            variant: "dot",
+            badgeContent: "99",
+            color: "secondary",
+            anchorOrigin: {
+              vertical: "top",
+              horizontal: "right"
+            },
+            invisible: (filterPanelState == null ? void 0 : (_filterPanelState$fil2 = filterPanelState.filterArray) == null ? void 0 : _filterPanelState$fil2.length) == 0,
+            children: /*#__PURE__*/jsx(FilterList, {})
+          }), "Filter"]
+        })
+      })]
+    }), props.showBottomFilters && /*#__PURE__*/jsx(AnimatePresence, {
+      children: isFilterSelected && /*#__PURE__*/jsx(motion.div, {
+        initial: {
+          opacity: 1,
+          height: 0
+        },
+        animate: {
+          opacity: 1,
+          height: "auto",
+          transition: {
+            height: {
+              duration: 0.4
+            },
+            opacity: {
+              duration: 0.25,
+              delay: 0.15
+            }
+          }
+        },
+        exit: {
+          opacity: 0,
+          height: 0,
+          transition: {
+            height: {
+              duration: 0.4
+            },
+            opacity: {
+              duration: 0.25
+            }
+          }
+        },
+        transition: {
+          duration: 0.2
+        },
+        children: /*#__PURE__*/jsx(FilterChipRow, {
+          filterChipsContainerSx: {
+            borderTop: "none"
+          },
+          sort: filterPanelState.sort,
+          onSortDelete: sortItem => {
+            var _filterPanelRef$curre;
+            (_filterPanelRef$curre = filterPanelRef.current) == null ? void 0 : _filterPanelRef$curre.removeSort == null ? void 0 : _filterPanelRef$curre.removeSort(sortItem);
+            const filteredSort = filterPanelState.sort.filter(f => f.label !== sortItem.label);
+            const newFilterPanelState = _extends({}, filterPanelState, {
+              sort: filteredSort,
+              sortCount: filteredSort.length || 0,
+              sortQueryParams: mapSort(filteredSort)
+            });
+            setFilterPanelState(newFilterPanelState);
+            sendFilterToServer(newFilterPanelState);
+          },
+          filters: filterPanelState.filterArray,
+          onFilterDelete: filter => {
+            var _filterPanelRef$curre2;
+            const removedFilterArray = filterPanelState.filterArray.filter(i => i.index !== filter.index || filter.id !== i.id);
+            let search = filterPanelState.searchText;
+            if ((filter == null ? void 0 : filter.type) === "keyword") {
+              search = filterPanelState.searchText.filter(s => s !== filter.id);
+            }
+            const newFilterPanelState = _extends({}, filterPanelState, {
+              filterCount: removedFilterArray.length,
+              filter: mapFilters(removedFilterArray),
+              filterArray: removedFilterArray,
+              searchText: search
+            });
+            setFilterPanelState(newFilterPanelState);
+            (_filterPanelRef$curre2 = filterPanelRef.current) == null ? void 0 : _filterPanelRef$curre2.removeFilter == null ? void 0 : _filterPanelRef$curre2.removeFilter(filter);
+            sendFilterToServer(newFilterPanelState);
+          },
+          onResetFiltersClick: filter => {
+            var _filterPanelRef$curre3;
+            setFilterPanelState(initialFilterState);
+            (_filterPanelRef$curre3 = filterPanelRef.current) == null ? void 0 : _filterPanelRef$curre3.resetFilters();
+            sendFilterToServer(initialFilterState);
+          }
+        })
+      }, "filterPanelFilter")
+    }), /*#__PURE__*/jsx(DataTable, _extends({}, props, {
       tableRef: DataTableRef,
       name: props.name,
       columns: updateColumnDefaults(props.columns),
@@ -26757,6 +26790,158 @@ Widget.propTypes = {
   children: PropTypes.any
 };
 
+const FILTER_ROW_ANIMATE = {
+  initial: {
+    opacity: 0,
+    height: 0
+  },
+  animate: {
+    opacity: 1,
+    height: "auto",
+    transition: {
+      height: {
+        duration: 0.4
+      },
+      opacity: {
+        duration: 0.1,
+        delay: 0.15
+      }
+    }
+  },
+  exit: {
+    opacity: 0,
+    height: 0,
+    transition: {
+      height: {
+        duration: 0.4
+      },
+      opacity: {
+        duration: 0.1
+      }
+    }
+  }
+};
+const FilterPanelWithTextSearch = ({
+  drawerProps,
+  filterPanelProps,
+  textSearchProps
+}) => {
+  const [drawerState, setDrawerState] = useState({
+    open: false
+  });
+  const [filters, setFilters] = useState([]);
+  const filterPanelRef = useRef();
+  return /*#__PURE__*/jsxs(Box$2, {
+    children: [/*#__PURE__*/jsxs(Box$2, {
+      sx: {
+        display: "flex",
+        gap: 2
+      },
+      children: [/*#__PURE__*/jsx(TextSearch$1, _extends({
+        InputProps: {
+          startAdornment: /*#__PURE__*/jsx(InputAdornment, {
+            position: "start",
+            children: /*#__PURE__*/jsx(Search$3, {
+              color: "textSecondary"
+            })
+          })
+        },
+        onChange: searchText => {
+          var _filterPanelRef$curre;
+          filterPanelRef == null ? void 0 : (_filterPanelRef$curre = filterPanelRef.current) == null ? void 0 : _filterPanelRef$curre.setSearch(searchText);
+        },
+        placeholder: "Type to search",
+        sx: {
+          width: "100%"
+        }
+      }, textSearchProps)), /*#__PURE__*/jsx(Button, {
+        color: "primary",
+        variant: "outlined",
+        onClick: () => {
+          setDrawerState(prev => _extends({}, prev, {
+            open: true
+          }));
+        },
+        children: /*#__PURE__*/jsxs(Box$2, {
+          sx: {
+            display: "inline-flex",
+            gap: 1
+          },
+          children: [/*#__PURE__*/jsx(Badge$1, {
+            variant: "dot",
+            badgeContent: "99",
+            color: "secondary",
+            anchorOrigin: {
+              vertical: "top",
+              horizontal: "right"
+            },
+            invisible: !(filters != null && filters.length),
+            children: /*#__PURE__*/jsx(FilterList, {})
+          }), "Filter"]
+        })
+      })]
+    }), /*#__PURE__*/jsx(Box$2, {
+      children: /*#__PURE__*/jsx(AnimatePresence, {
+        children: (filters == null ? void 0 : filters.length) > 0 && /*#__PURE__*/jsx(motion.div, {
+          initial: FILTER_ROW_ANIMATE.initial,
+          animate: FILTER_ROW_ANIMATE.animate,
+          exit: FILTER_ROW_ANIMATE.exit,
+          transition: {
+            duration: 0.2
+          },
+          children: /*#__PURE__*/jsx(FilterChipRow, {
+            filterChipsContainerSx: _extends({
+              borderTop: "none",
+              py: 1
+            }, filters.length > 5 && {
+              py: 1
+            }),
+            filters: filters,
+            onFilterDelete: filter => {
+              var _filterPanelRef$curre2;
+              filterPanelRef == null ? void 0 : (_filterPanelRef$curre2 = filterPanelRef.current) == null ? void 0 : _filterPanelRef$curre2.removeFilter(filter);
+            },
+            onResetFiltersClick: () => {
+              var _filterPanelRef$curre3;
+              return filterPanelRef == null ? void 0 : (_filterPanelRef$curre3 = filterPanelRef.current) == null ? void 0 : _filterPanelRef$curre3.resetFilters();
+            }
+          })
+        }, "filterPanelFilter")
+      })
+    }), /*#__PURE__*/jsx(Drawer$1, _extends({
+      title: "Filter",
+      drawerType: "temporary",
+      formatContent: false,
+      headerDivider: false,
+      open: drawerState.open
+    }, drawerProps, {
+      handleDrawerClose: () => {
+        setDrawerState(prev => _extends({}, prev, {
+          open: false
+        }));
+        drawerProps == null ? void 0 : drawerProps.handleDrawerClose == null ? void 0 : drawerProps.handleDrawerClose();
+      },
+      children: /*#__PURE__*/jsx(Box$2, {
+        sx: {
+          p: 2
+        },
+        children: /*#__PURE__*/jsx(FilterPanel, _extends({}, filterPanelProps, {
+          ref: filterPanelRef,
+          onChange: (mappedFilters, filters) => {
+            setFilters(filters);
+            filterPanelProps == null ? void 0 : filterPanelProps.onChange == null ? void 0 : filterPanelProps.onChange(mappedFilters, filters);
+          }
+        }))
+      })
+    }))]
+  });
+};
+FilterPanelWithTextSearch.propTypes = {
+  filterPanelProps: FilterPanel.propTypes,
+  drawerProps: Drawer$1.propTypes,
+  textSearchProps: TextSearch$1.propTypes
+};
+
 const moreThan = ruleValue => ({
   fieldValue
 }) => {
@@ -32268,5 +32453,5 @@ const DynamicFormHooks = {
   useReadOnly
 };
 
-export { ActionButtons, ActionMenuButton, Actions$1 as Actions, Alert, AppToolbar, AssessmentPerformanceChart, AvatarBox, AvatarTitle$1 as AvatarTitle, Breadcrumbs$1 as Breadcrumbs, BusinessObject, BusinessObjectCard, EmptyCardSection as BusinessObjectCardEmptySection, CardSection as BusinessObjectCardSection, CardSectionTitle as BusinessObjectCardSectionTitle, BusinessObjectHeader, BusinessObjectPanel, Header$1 as BusinessObjectPanelHeader, Section as BusinessObjectPanelSection, SectionTitle as BusinessObjectPanelSectionTitle, BusinessObjectPicker$1 as BusinessObjectPicker, BusinessObjectStatus, BusinessObjectStatusButton, BusinessObjectTable, Button, Chip, ChipList, Collapsible, CollapsibleContent, CollapsibleContentButton, CollapsibleContentButtonContainer, CollapsibleContentContainer, CollapsibleProvider, ContactForm, ContentBox, ContentBoxHeader, CoreProvider, CurriculumChart, DataTable$1 as DataTable, DatePickerBase as DatePicker, DateTitle, DisplayInFrame, DocViewer, Drawer$1 as Drawer, DynamicForm$1 as DynamicForm, BusinessObjectPickerField$1 as DynamicFormBusinessObjectPickerField, DynamicFormHooks, EditableDatatable, EditableText, FilterPanel, FilterChips$3 as FilterPanelFilterChips, mapFilters as FilterPanelMapFilters, Footer, FullPageViewer, Icon$1 as Icon, IconButton, Image$1 as Image, IsometricImage, List, ListItem, ListItemGroup, MenuButton, ModalDialog, Navigation, NavigationDrawer, Notification, OutcomeSpace, PanelDrawer, ProgressChart, RichDataTable$1 as RichDataTable, RubricDistributionChart, RubricLegend, RubricScoreSlider, SaveModal, ScrollToTopButton, ScrollingContainer$1 as ScrollingContainer, SentimentScale, SkeletonContent, StatBoxes, StatRow, StatusMessage, SurveyComments, SvgImage, SwipeableTabPanel, Content as SwipeableTabPanelContent, TabPanels, TextBuilder$1 as TextBuilder, store as TextBuilderStore, TextTransition, Timeline, TitleAndActionHeader, FilterButton as TitleAndActionHeaderFilterButton, TitleAndDescription, AvatarTitle as UnstableAvatarTitle, DataTable as UnstableDataTable, RichDataTable as UnstableRichDataTable, ScrollingContainer as UnstableScrollingContainer, UserAvatar, Widget, CompletedItemList as WizardCompletedItemList, WizardPanel, businessObjectColor, businessObjectConfiguration, businessObjectIcon, businessObjectIconName, createComponentEvent, createEvent, createComponentStore as createStore, dataSourceManager, filterSortData, getBaseUrl, getConfiguration, getDataSourceUrl, http, outcomeSpaceColor, outcomeSpaceTypeFromSource, registerDataSource, registerDataSources, setDataSourceConfiguration, template, useCollapsibleState, useComponentWillMount, useDataSourceInfiniteQuery, useDataSourceMutation, useDataSourceQuery, useDataSourceUrl, useDebounceCallback, useNotify, useRefDimensions, withStatusButtonDataSource };
+export { ActionButtons, ActionMenuButton, Actions$1 as Actions, Alert, AppToolbar, AssessmentPerformanceChart, AvatarBox, AvatarTitle$1 as AvatarTitle, Breadcrumbs$1 as Breadcrumbs, BusinessObject, BusinessObjectCard, EmptyCardSection as BusinessObjectCardEmptySection, CardSection as BusinessObjectCardSection, CardSectionTitle as BusinessObjectCardSectionTitle, BusinessObjectHeader, BusinessObjectPanel, Header$1 as BusinessObjectPanelHeader, Section as BusinessObjectPanelSection, SectionTitle as BusinessObjectPanelSectionTitle, BusinessObjectPicker$1 as BusinessObjectPicker, BusinessObjectStatus, BusinessObjectStatusButton, BusinessObjectTable, Button, Chip, ChipList, Collapsible, CollapsibleContent, CollapsibleContentButton, CollapsibleContentButtonContainer, CollapsibleContentContainer, CollapsibleProvider, ContactForm, ContentBox, ContentBoxHeader, CoreProvider, CurriculumChart, DataTable$1 as DataTable, DatePickerBase as DatePicker, DateTitle, DisplayInFrame, DocViewer, Drawer$1 as Drawer, DynamicForm$1 as DynamicForm, BusinessObjectPickerField$1 as DynamicFormBusinessObjectPickerField, DynamicFormHooks, EditableDatatable, EditableText, FilterPanel, FilterChips$3 as FilterPanelFilterChips, mapFilters as FilterPanelMapFilters, FilterPanelWithTextSearch, Footer, FullPageViewer, Icon$1 as Icon, IconButton, Image$1 as Image, IsometricImage, List, ListItem, ListItemGroup, MenuButton, ModalDialog, Navigation, NavigationDrawer, Notification, OutcomeSpace, PanelDrawer, ProgressChart, RichDataTable$1 as RichDataTable, RubricDistributionChart, RubricLegend, RubricScoreSlider, SaveModal, ScrollToTopButton, ScrollingContainer$1 as ScrollingContainer, SentimentScale, SkeletonContent, StatBoxes, StatRow, StatusMessage, SurveyComments, SvgImage, SwipeableTabPanel, Content as SwipeableTabPanelContent, TabPanels, TextBuilder$1 as TextBuilder, store as TextBuilderStore, TextTransition, Timeline, TitleAndActionHeader, FilterButton as TitleAndActionHeaderFilterButton, TitleAndDescription, AvatarTitle as UnstableAvatarTitle, DataTable as UnstableDataTable, RichDataTable as UnstableRichDataTable, ScrollingContainer as UnstableScrollingContainer, UserAvatar, Widget, CompletedItemList as WizardCompletedItemList, WizardPanel, businessObjectColor, businessObjectConfiguration, businessObjectIcon, businessObjectIconName, createComponentEvent, createEvent, createComponentStore as createStore, dataSourceManager, filterSortData, getBaseUrl, getConfiguration, getDataSourceUrl, http, outcomeSpaceColor, outcomeSpaceTypeFromSource, registerDataSource, registerDataSources, setDataSourceConfiguration, template, useCollapsibleState, useComponentWillMount, useDataSourceInfiniteQuery, useDataSourceMutation, useDataSourceQuery, useDataSourceUrl, useDebounceCallback, useNotify, useRefDimensions, withStatusButtonDataSource };
 //# sourceMappingURL=index.modern.js.map