support filters

Author: XingY

packages/components/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.13.0-fb-mvtc.6",
+  "version": "7.13.0-fb-mvtc.11",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [
@@ -50,7 +50,7 @@
   "homepage": "https://github.com/LabKey/labkey-ui-components#readme",
   "dependencies": {
     "@hello-pangea/dnd": "18.0.1",
-    "@labkey/api": "1.45.0-fb-mvtc.2",
+    "@labkey/api": "1.45.0-fb-mvtc.4",
     "@testing-library/dom": "~10.4.1",
     "@testing-library/jest-dom": "~6.9.1",
     "@testing-library/react": "~16.3.0",

packages/components/package.json

@@ -215,12 +215,12 @@ export const FilterFacetedSelector: FC<Props> = memo(props => {
                 fieldKey,
                 value,
                 checked,
-                fieldFilters?.[0], // choose values applies only to the first filter
+                fieldFilters?.[0] ?? (multiChoices ? Filter.create(fieldKey, [], Filter.Types.ARRAY_CONTAINS_ALL) : null), // choose values applies only to the first filter
                 uncheckOthers
             );
             onFieldFilterUpdate([newFilter], 0);
         },
-        [disabled, allShown, fieldDistinctValues, fieldKey, fieldFilters, onFieldFilterUpdate]
+        [disabled, allShown, fieldDistinctValues, fieldKey, fieldFilters, onFieldFilterUpdate, multiChoices]
     );
 
     const filteredFieldDistinctValues = useMemo(() => {
@@ -250,12 +250,15 @@ export const FilterFacetedSelector: FC<Props> = memo(props => {
             if (!newActiveFilterType) return newFilters;
 
             const filterType = resolveFilterType(newActiveFilterType?.value, field);
+            let updatedFilterValues = fieldFilters[0]?.getValue();
+            if (updatedFilterValues && multiChoices && !filterType.isMultiValued())
+                updatedFilterValues = null;
 
-            newFilters = [Filter.create(fieldKey, fieldFilters[0]?.getValue(), filterType), null];
+            newFilters = [Filter.create(fieldKey, updatedFilterValues, filterType), null];
 
             onFieldFilterUpdate(newFilters, 0);
         },
-        [onFieldFilterUpdate, filterOptions, field, fieldFilters, fieldKey]
+        [onFieldFilterUpdate, filterOptions, field, fieldFilters, fieldKey, multiChoices]
     );
 
     if (!fieldDistinctValues || allShown === undefined) return <LoadingSpinner />;
@@ -275,7 +278,7 @@ export const FilterFacetedSelector: FC<Props> = memo(props => {
                         options={filterOptions}
                         placeholder="Select a filter type..."
                         required={true}
-                        value={fieldFilters?.[0]?.getFilterType()?.getURLSuffix() || ''}
+                        value={fieldFilters?.[0]?.getFilterType()?.getURLSuffix() || 'arraycontainsall'}
                     />
                 }
                 {(fieldDistinctValues?.length > showSearchLength || searchStr) && (

packages/components/src/internal/components/search/FilterFacetedSelector.tsx

@@ -294,10 +294,12 @@ export function getUpdateFilterExpressionFilter(
 
 // this util is only for string field type
 export function getCheckedFilterValues(filter: Filter.IFilter, allValues: string[], multiChoices?: string[]): string[] {
-    if (!filter && !allValues) return [];
+    if (!filter && (!allValues || multiChoices?.length > 0)) return [];
 
     if (filter?.getFilterType().getURLSuffix().indexOf('array') === 0) {
-        return filter.getValue() ?? [];
+        const checked = filter.getValue() ?? [];
+        if (checked.length === multiChoices?.length) return allValues;
+        return checked;
     }
 
     const filterUrlSuffix = filter?.getFilterType()?.getURLSuffix();