@databiosphere/findable-ui 43.0.0 → 44.0.0

package/lib/config/entities.d.ts

@@ -4,6 +4,7 @@ import { JSXElementConstructor, ReactNode } from "react";
 import { AzulSummaryResponse } from "../apis/azul/common/entities";
 import { CategoryConfig } from "../common/categories/config/types";
 import { DataDictionaryAnnotation, DataDictionaryConfig, SelectedFilter } from "../common/entities";
+import { FilterSortConfig } from "../common/filters/sort/config/types";
 import { FooterProps } from "../components/Layout/components/Footer/footer";
 import { HeaderProps } from "../components/Layout/components/Header/header";
 import { ExploreMode } from "../hooks/useExploreMode/types";
@@ -305,6 +306,7 @@ export interface SiteConfig {
     export?: ExportConfig;
     exportsRequireAuth?: boolean;
     exportToTerraUrl?: string;
+    filterSort?: FilterSortConfig;
     gitHubUrl?: string;
     layout: {
         floating?: FloatingConfig;

package/lib/hooks/useCategoryFilter.d.ts

@@ -1,7 +1,8 @@
 import { CategoryConfig } from "../common/categories/config/types";
 import { Category } from "../common/categories/models/types";
 import { CategoryView, VIEW_KIND } from "../common/categories/views/types";
-import { CategoryKey, CategoryValueKey, ClearAll, Filters, SelectCategoryValue, SelectCategoryValueView } from "../common/entities";
+import { CategoryKey, CategoryValueKey, ClearAll, Filters, SelectCategoryValue } from "../common/entities";
+import { FILTER_SORT } from "../common/filters/sort/config/types";
 /**
  * State backing filter functionality and calculations. Converted to view model for display.
  */
@@ -15,9 +16,10 @@ export type OnFilterFn = (categoryKey: CategoryKey | ClearAll, selectedCategoryV
  * @param categories - Categories, category value and their counts with the current filter applied.
  * @param categoryConfigs - Category configs indicating accept list as well as label configuration.
  * @param filterState - Current set of selected category and category values.
+ * @param filterSort - Sort configuration (ALPHA or COUNT).
  * @returns Array of category view objects.
  */
-export declare function buildCategoryViews(categories: Category[], categoryConfigs: CategoryConfig[] | undefined, filterState: FilterState): CategoryView[];
+export declare function buildCategoryViews(categories: Category[], categoryConfigs: CategoryConfig[] | undefined, filterState: FilterState, filterSort: FILTER_SORT): CategoryView[];
 /**
  * Build new set of selected filters on de/select of filter.
  * @param filterState - Current set of selected category and category values.
@@ -34,10 +36,3 @@ export declare function buildNextFilterState(filterState: FilterState, categoryK
  * @returns original select category value.
  */
 export declare function getSelectCategoryValue(selectCategoryValue: SelectCategoryValue): SelectCategoryValue;
-/**
- * Sort category value views by key, ascending.
- * @param cvv0 - First category value view to compare.
- * @param cvv1 - Second category value view to compare.
- * @returns Number indicating sort precedence of cv0 vs cv1.
- */
-export declare function sortCategoryValueViews(cvv0: SelectCategoryValueView, cvv1: SelectCategoryValueView): number;

package/lib/hooks/useCategoryFilter.js

@@ -5,6 +5,7 @@ import { buildNextSelectFilterState } from "../common/categories/models/select/u
 import { buildRangeCategoryView } from "../common/categories/views/range/utils";
 import { VIEW_KIND } from "../common/categories/views/types";
 import { COLLATOR_CASE_INSENSITIVE } from "../common/constants";
+import { sortCategoryValueViews } from "../common/filters/sort/models/utils";
 /**
  * Build the view-specific model of the given category value.
  * @param categoryValue - The category value to build a view model of.
@@ -46,9 +47,10 @@ function buildCategoryView(selectCategory, selectCategoryValueViews, categoryCon
  * @param categories - Categories, category value and their counts with the current filter applied.
  * @param categoryConfigs - Category configs indicating accept list as well as label configuration.
  * @param filterState - Current set of selected category and category values.
+ * @param filterSort - Sort configuration (ALPHA or COUNT).
  * @returns Array of category view objects.
  */
-export function buildCategoryViews(categories, categoryConfigs, filterState) {
+export function buildCategoryViews(categories, categoryConfigs, filterState, filterSort) {
     if (!categories || !categoryConfigs) {
         return [];
     }
@@ -64,7 +66,8 @@ export function buildCategoryViews(categories, categoryConfigs, filterState) {
         }
         // Build view model for single or multiselect categories.
         const categoryValueViews = category.values.map((categoryValue) => buildCategoryValueView(categoryValue, categorySelectedFilter));
-        categoryValueViews.sort(sortCategoryValueViews);
+        // Sort category value views based on filter sort configuration.
+        sortCategoryValueViews(categoryValueViews, filterSort);
         // Build category view model.
         return buildCategoryView(category, categoryValueViews, categoryConfigs);
     });
@@ -156,19 +159,6 @@ function isCategoryValueSelected(categoryValueKey, categorySelectedFilter) {
 function isCategoryAcceptListed(category, categoryConfigs) {
     return categoryConfigs.some((categoryConfig) => categoryConfig.key === category.key);
 }
-/**
- * Sort category value views by key, ascending.
- * @param cvv0 - First category value view to compare.
- * @param cvv1 - Second category value view to compare.
- * @returns Number indicating sort precedence of cv0 vs cv1.
- */
-export function sortCategoryValueViews(cvv0, cvv1) {
-    return !cvv0.label
-        ? 1
-        : !cvv1.label
-            ? -1
-            : COLLATOR_CASE_INSENSITIVE.compare(cvv0.label, cvv1.label);
-}
 /**
  * Sort category views by display label, ascending.
  * @param c0 - First category view to compare.

package/lib/providers/exploreState/actions/updateFilterSort/action.d.ts

@@ -0,0 +1,10 @@
+import { ExploreState } from "../../../exploreState";
+import { UpdateFilterSortPayload } from "./types";
+/**
+ * Reducer function to handle the "update filter sort" action.
+ * Updates the filter sort in the state for the current entity.
+ * @param state - Explore State.
+ * @param payload - Payload.
+ * @returns explore state.
+ */
+export declare function updateFilterSortAction(state: ExploreState, payload: UpdateFilterSortPayload): ExploreState;

package/lib/providers/exploreState/actions/updateFilterSort/action.js

@@ -0,0 +1,21 @@
+import { updateEntityStateByCategoryGroupConfigKey } from "../../utils";
+import { sortCategoryViews } from "./utils";
+/**
+ * Reducer function to handle the "update filter sort" action.
+ * Updates the filter sort in the state for the current entity.
+ * @param state - Explore State.
+ * @param payload - Payload.
+ * @returns explore state.
+ */
+export function updateFilterSortAction(state, payload) {
+    const filterSort = payload;
+    // Sort the category views based on the new filter sort.
+    const categoryViews = sortCategoryViews(state, filterSort);
+    // Update entity state by category group config key
+    updateEntityStateByCategoryGroupConfigKey(state, { categoryViews });
+    return {
+        ...state,
+        categoryViews,
+        filterSort,
+    };
+}

package/lib/providers/exploreState/actions/updateFilterSort/dispatch.d.ts

@@ -0,0 +1,7 @@
+import { UpdateFilterSortAction, UpdateFilterSortPayload } from "./types";
+/**
+ * Action creator for updating filter sort in the state.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export declare function updateFilterSort(payload: UpdateFilterSortPayload): UpdateFilterSortAction;

package/lib/providers/exploreState/actions/updateFilterSort/dispatch.js

@@ -0,0 +1,12 @@
+import { ExploreActionKind } from "../../../exploreState";
+/**
+ * Action creator for updating filter sort in the state.
+ * @param payload - Payload.
+ * @returns Action with payload and action type.
+ */
+export function updateFilterSort(payload) {
+    return {
+        payload,
+        type: ExploreActionKind.UpdateFilterSort,
+    };
+}

package/lib/providers/exploreState/actions/updateFilterSort/types.d.ts

@@ -0,0 +1,7 @@
+import { FILTER_SORT } from "../../../../common/filters/sort/config/types";
+import { ExploreActionKind } from "../../../exploreState";
+export type UpdateFilterSortAction = {
+    payload: UpdateFilterSortPayload;
+    type: ExploreActionKind.UpdateFilterSort;
+};
+export type UpdateFilterSortPayload = FILTER_SORT;

package/lib/providers/exploreState/actions/updateFilterSort/types.js

@@ -0,0 +1 @@
+export {};

package/lib/providers/exploreState/actions/updateFilterSort/utils.d.ts

@@ -0,0 +1,10 @@
+import { CategoryView } from "../../../../common/categories/views/types";
+import { FILTER_SORT } from "../../../../common/filters/sort/config/types";
+import { ExploreState } from "../../../exploreState";
+/**
+ * Sorts the category views for the current entity type, based on the filter sort.
+ * @param state - Explore state.
+ * @param filterSort - Filter sort.
+ * @returns Sorted category views.
+ */
+export declare function sortCategoryViews(state: ExploreState, filterSort: FILTER_SORT): CategoryView[];

package/lib/providers/exploreState/actions/updateFilterSort/utils.js

@@ -0,0 +1,22 @@
+import { isRangeCategory } from "../../../../common/categories/models/range/typeGuards";
+import { sortCategoryValueViews } from "../../../../common/filters/sort/models/utils";
+/**
+ * Sorts the category views for the current entity type, based on the filter sort.
+ * @param state - Explore state.
+ * @param filterSort - Filter sort.
+ * @returns Sorted category views.
+ */
+export function sortCategoryViews(state, filterSort) {
+    return [...state.categoryViews].map((categoryView) => {
+        // Skip range categories.
+        if (isRangeCategory(categoryView))
+            return categoryView;
+        // Use structural clone for select categories that need sorting.
+        const nextCategoryView = {
+            ...categoryView,
+            values: [...categoryView.values],
+        };
+        sortCategoryValueViews(nextCategoryView.values, filterSort);
+        return nextCategoryView;
+    });
+}

package/lib/providers/exploreState/initializer/constants.js

@@ -1,3 +1,4 @@
+import { FILTER_SORT } from "../../../common/filters/sort/config/types";
 import { SELECT_CATEGORY_KEY } from "../constants";
 export const DEFAULT_CATEGORY_GROUP_SAVED_FILTERS = {
     categoryConfigs: [
@@ -27,6 +28,7 @@ export const INITIAL_STATE = {
     entityStateByCategoryGroupConfigKey: new Map(),
     featureFlagState: undefined,
     filterCount: 0,
+    filterSort: FILTER_SORT.ALPHA,
     filterState: [],
     listItems: [],
     loading: true,

package/lib/providers/exploreState/initializer/utils.js

@@ -1,3 +1,4 @@
+import { getFilterSortType } from "../../../common/filters/sort/config/utils";
 import { getInitialColumnVisibilityState } from "../../../components/TableCreator/options/initialState/columnVisibility";
 import { SELECT_CATEGORY_KEY } from "../constants";
 import { buildNextEntities } from "../entities/state";
@@ -237,6 +238,7 @@ export function initReducerArguments(config, entityListType, decodedFilterParam,
         entityStateByCategoryGroupConfigKey,
         featureFlagState: decodedFeatureFlagParam,
         filterCount: getFilterCount(filterState),
+        filterSort: getFilterSortType(config),
         filterState,
         tabValue: entityListType,
     };

package/lib/providers/exploreState.d.ts

@@ -2,10 +2,12 @@ import React, { Dispatch, ReactNode } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
 import { CategoryView } from "../common/categories/views/types";
 import { SelectedFilter } from "../common/entities";
+import { FILTER_SORT } from "../common/filters/sort/config/types";
 import { RowPreviewState } from "../components/Table/features/RowPreview/entities";
 import { CategoryGroup, SiteConfig } from "../config/entities";
 import { ClearMetaAction } from "./exploreState/actions/clearMeta/types";
 import { StateToUrlAction } from "./exploreState/actions/stateToUrl/types";
+import { UpdateFilterSortAction } from "./exploreState/actions/updateFilterSort/types";
 import { UpdateGroupingAction } from "./exploreState/actions/updateGrouping/types";
 import { UpdateColumnVisibilityAction } from "./exploreState/actions/updateVisibility/types";
 import { UrlToStateAction } from "./exploreState/actions/urlToState/types";
@@ -32,6 +34,7 @@ export type ExploreState = {
     entityStateByCategoryGroupConfigKey: EntityStateByCategoryGroupConfigKey;
     featureFlagState: FeatureFlagState;
     filterCount: number;
+    filterSort: FILTER_SORT;
     filterState: SelectedFilter[];
     listItems: ListItems;
     loading: boolean;
@@ -114,6 +117,7 @@ export declare enum ExploreActionKind {
     UpdateEntityFilters = "UPDATE_ENTITY_FILTERS",
     UpdateEntityViewAccess = "UPDATE_ENTITY_VIEW_ACCESS",
     UpdateFilter = "UPDATE_FILTER",
+    UpdateFilterSort = "UPDATE_FILTER_SORT",
     UpdateGrouping = "UPDATE_GROUPING",
     UpdateRowPreview = "UPDATE_ROW_PREVIEW",
     UpdateRowSelection = "UPDATE_ROW_SELECTION",
@@ -123,7 +127,7 @@ export declare enum ExploreActionKind {
 /**
  * Explore action.
  */
-export type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | ClearMetaAction | PaginateTableAction | PatchExploreResponseAction | ProcessExploreResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | StateToUrlAction | UpdateColumnVisibilityAction | UpdateEntityFiltersAction | UpdateEntityViewAccessAction | UpdateFilterAction | UpdateGroupingAction | UpdateRowPreviewAction | UpdateRowSelectionAction | UpdateSortingAction | UrlToStateAction;
+export type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | ClearMetaAction | PaginateTableAction | PatchExploreResponseAction | ProcessExploreResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | StateToUrlAction | UpdateColumnVisibilityAction | UpdateEntityFiltersAction | UpdateEntityViewAccessAction | UpdateFilterAction | UpdateFilterSortAction | UpdateGroupingAction | UpdateRowPreviewAction | UpdateRowSelectionAction | UpdateSortingAction | UrlToStateAction;
 /**
  * Apply saved filter action.
  */

package/lib/providers/exploreState.js

@@ -6,6 +6,7 @@ import { useConfig } from "../hooks/useConfig";
 import { useURLFilterParams } from "../hooks/useURLFilterParams";
 import { clearMetaAction } from "./exploreState/actions/clearMeta/action";
 import { stateToUrlAction } from "./exploreState/actions/stateToUrl/action";
+import { updateFilterSortAction } from "./exploreState/actions/updateFilterSort/action";
 import { updateGroupingAction } from "./exploreState/actions/updateGrouping/action";
 import { updateColumnVisibilityAction } from "./exploreState/actions/updateVisibility/action";
 import { urlToStateAction } from "./exploreState/actions/urlToState/action";
@@ -77,6 +78,7 @@ export var ExploreActionKind;
     ExploreActionKind["UpdateEntityFilters"] = "UPDATE_ENTITY_FILTERS";
     ExploreActionKind["UpdateEntityViewAccess"] = "UPDATE_ENTITY_VIEW_ACCESS";
     ExploreActionKind["UpdateFilter"] = "UPDATE_FILTER";
+    ExploreActionKind["UpdateFilterSort"] = "UPDATE_FILTER_SORT";
     ExploreActionKind["UpdateGrouping"] = "UPDATE_GROUPING";
     ExploreActionKind["UpdateRowPreview"] = "UPDATE_ROW_PREVIEW";
     ExploreActionKind["UpdateRowSelection"] = "UPDATE_ROW_SELECTION";
@@ -192,7 +194,7 @@ function exploreReducer(state, action, exploreContext) {
                 ? buildCategoryViews([
                     ...payload.selectCategories,
                     ...entityState.savedSelectCategories, // "savedFilter" select categories are built from config at reducer initialization.
-                ], entityState.categoryConfigs, [...state.filterState, ...entityState.savedFilterState])
+                ], entityState.categoryConfigs, [...state.filterState, ...entityState.savedFilterState], state.filterSort)
                 : state.categoryViews;
             const rowPreview = entityPageState.rowPreview;
             updateEntityStateByCategoryGroupConfigKey(state, {
@@ -328,6 +330,12 @@ function exploreReducer(state, action, exploreContext) {
                 rowPreview,
             };
         }
+        /**
+         * Update filter sort
+         */
+        case ExploreActionKind.UpdateFilterSort: {
+            return updateFilterSortAction(state, payload);
+        }
         /**
          * Update grouping
          **/

package/lib/tests/testIds.d.ts

@@ -9,6 +9,8 @@ export declare const TEST_IDS: {
     FILTER_ITEM: string;
     FILTER_POPOVER: string;
     FILTER_RANGE: string;
+    FILTER_SORT_BUTTON: string;
+    FILTER_SORT_MENU: string;
     FILTER_TERM: string;
     SEARCH_ALL_FILTERS: string;
     SIDEBAR: string;

package/lib/tests/testIds.js

@@ -9,6 +9,8 @@ export const TEST_IDS = {
     FILTER_ITEM: "filter-item",
     FILTER_POPOVER: "filter-popover",
     FILTER_RANGE: "filter-range",
+    FILTER_SORT_BUTTON: "filter-sort-button",
+    FILTER_SORT_MENU: "filter-sort-menu",
     FILTER_TERM: "filter-term",
     SEARCH_ALL_FILTERS: "search-all-filters",
     SIDEBAR: "sidebar",

package/lib/views/ExploreView/exploreView.js

@@ -1,8 +1,10 @@
+import { Stack } from "@mui/material";
 import React, { useEffect, useMemo } from "react";
 import { track } from "../../common/analytics/analytics";
 import { EVENT_NAME, EVENT_PARAM } from "../../common/analytics/entities";
 import { DrawerProvider } from "../../components/common/Drawer/provider/provider";
 import { ClearAllFilters } from "../../components/Filter/components/ClearAllFilters/clearAllFilters";
+import { FilterSort } from "../../components/Filter/components/controls/Controls/components/FilterSort/filterSort";
 import { Filters, } from "../../components/Filter/components/Filters/filters";
 import { SearchAllFilters } from "../../components/Filter/components/SearchAllFilters/searchAllFilters";
 import { SURFACE_TYPE } from "../../components/Filter/components/surfaces/types";
@@ -21,6 +23,7 @@ import { stateToUrl } from "../../providers/exploreState/actions/stateToUrl/disp
 import { urlToState } from "../../providers/exploreState/actions/urlToState/dispatch";
 import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
 import { TEST_IDS } from "../../tests/testIds";
+import { useUpdateFilterSort } from "./hooks/UseUpdateFilterSort/hook";
 import { buildStateSyncManagerContext } from "./utils";
 export const ExploreView = (props) => {
     const { mdDown } = useBreakpoint();
@@ -32,6 +35,7 @@ export const ExploreView = (props) => {
     useEntityList(props); // Fetch entities.
     const { entityListType } = props;
     const categoryFilters = useMemo(() => buildCategoryFilters(categoryViews, categoryGroups), [categoryGroups, categoryViews]);
+    const { enabled: filterSortEnabled, filterSort, onFilterSortChange, } = useUpdateFilterSort();
     /**
      * State sync manager.
      * Handles state synchronization between the explore state and the URL.
@@ -98,7 +102,9 @@ export const ExploreView = (props) => {
         categoryViews && !!categoryViews.length && (React.createElement(Sidebar, null,
             React.createElement(SidebarTools, { "data-testid": TEST_IDS.FILTER_CONTROLS },
                 React.createElement(SidebarLabel, { label: "Filters" }),
-                React.createElement(ClearAllFilters, null),
+                React.createElement(Stack, { direction: "row", gap: 4 },
+                    React.createElement(ClearAllFilters, null),
+                    React.createElement(FilterSort, { enabled: filterSortEnabled, filterSort: filterSort, onFilterSortChange: onFilterSortChange })),
                 React.createElement(SearchAllFilters, { categoryViews: categoryViews, onFilter: onFilterChange.bind(null, true), surfaceType: mdDown ? SURFACE_TYPE.POPPER_DRAWER : SURFACE_TYPE.POPPER_MENU })),
             React.createElement(Filters, { categoryFilters: categoryFilters, onFilter: onFilterChange.bind(null, false), surfaceType: mdDown ? SURFACE_TYPE.DRAWER : SURFACE_TYPE.MENU, trackFilterOpened: trackingConfig?.trackFilterOpened }))),
         React.createElement(IndexView, { className: props.className, categoryFilters: categoryFilters, entityListType: entityListType, entityName: label, loading: loading })));

package/lib/views/ExploreView/hooks/UseUpdateFilterSort/hook.d.ts

@@ -0,0 +1,2 @@
+import { UseUpdateFilterSort } from "./types";
+export declare const useUpdateFilterSort: () => UseUpdateFilterSort;

package/lib/views/ExploreView/hooks/UseUpdateFilterSort/hook.js

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import { useConfig } from "../../../../hooks/useConfig";
+import { useExploreState } from "../../../../hooks/useExploreState";
+import { updateFilterSort } from "../../../../providers/exploreState/actions/updateFilterSort/dispatch";
+export const useUpdateFilterSort = () => {
+    const { config } = useConfig();
+    const { exploreDispatch, exploreState } = useExploreState();
+    const { filterSort } = exploreState;
+    const enabled = Boolean(config.filterSort?.sortBy);
+    const onFilterSortChange = useCallback((filterSort) => exploreDispatch(updateFilterSort(filterSort)), [exploreDispatch]);
+    return { enabled, filterSort, onFilterSortChange };
+};

package/lib/views/ExploreView/hooks/UseUpdateFilterSort/types.d.ts

@@ -0,0 +1,6 @@
+import { FILTER_SORT } from "../../../../common/filters/sort/config/types";
+export interface UseUpdateFilterSort {
+    enabled: boolean;
+    filterSort: FILTER_SORT;
+    onFilterSortChange: (filterSort: FILTER_SORT) => void;
+}

package/lib/views/ExploreView/hooks/UseUpdateFilterSort/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "43.0.0",
+  "version": "44.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/common/filters/sort/config/types.ts

@@ -0,0 +1,14 @@
+/**
+ * Filter sort options.
+ */
+export enum FILTER_SORT {
+  ALPHA = "ALPHA",
+  COUNT = "COUNT",
+}
+
+/**
+ * Filter sort configuration for site config.
+ */
+export interface FilterSortConfig {
+  sortBy?: FILTER_SORT;
+}

package/src/common/filters/sort/config/utils.ts

@@ -0,0 +1,11 @@
+import { SiteConfig } from "../../../../config/entities";
+import { FILTER_SORT } from "./types";
+
+/**
+ * Returns the default filter sort type "ALPHA" or "COUNT" from config or ALPHA as fallback.
+ * @param config - Filter sort configuration.
+ * @returns default filter sort type.
+ */
+export function getFilterSortType(config?: SiteConfig): FILTER_SORT {
+  return config?.filterSort?.sortBy ?? FILTER_SORT.ALPHA;
+}

package/src/common/filters/sort/models/utils.ts

@@ -0,0 +1,57 @@
+import { COLLATOR_CASE_INSENSITIVE } from "../../../constants";
+import { SelectCategoryValueView } from "../../../entities";
+import { FILTER_SORT } from "../config/types";
+
+/**
+ * Sort category value views based on filter sort configuration.
+ * Uses function selection pattern for efficiency.
+ * @param categoryValueViews - Array of category value views to sort.
+ * @param filterSort - Sort configuration (ALPHA or COUNT).
+ */
+export function sortCategoryValueViews(
+  categoryValueViews: SelectCategoryValueView[],
+  filterSort: FILTER_SORT
+): void {
+  const sortFn =
+    filterSort === FILTER_SORT.ALPHA
+      ? sortCategoryValueViewsAlpha
+      : sortCategoryValueViewsCount;
+
+  categoryValueViews.sort(sortFn);
+}
+
+/**
+ * Sort category value views alphabetically.
+ * @param cvv0 - First category value view to compare.
+ * @param cvv1 - Second category value view to compare.
+ * @returns Number indicating sort precedence of cvv0 vs cvv1.
+ */
+
+export function sortCategoryValueViewsAlpha(
+  cvv0: SelectCategoryValueView,
+  cvv1: SelectCategoryValueView
+): number {
+  // Handle empty labels.
+  if (!cvv0.label) return 1;
+  if (!cvv1.label) return -1;
+
+  return COLLATOR_CASE_INSENSITIVE.compare(cvv0.label, cvv1.label);
+}
+
+/**
+ * Sort category value views by count (descending), then alphabetically.
+ * @param cvv0 - First category value view to compare.
+ * @param cvv1 - Second category value view to compare.
+ * @returns Number indicating sort precedence of cvv0 vs cvv1.
+ */
+export function sortCategoryValueViewsCount(
+  cvv0: SelectCategoryValueView,
+  cvv1: SelectCategoryValueView
+): number {
+  // Sort by count descending, then alphabetically.
+  const countDiff = cvv1.count - cvv0.count;
+
+  if (countDiff !== 0) return countDiff;
+
+  return sortCategoryValueViewsAlpha(cvv0, cvv1);
+}

package/src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter.tsx

@@ -8,6 +8,7 @@ import {
   ClearAll,
 } from "../../../../../../common/entities";
 import { updater } from "../../../../../Table/components/TableFeatures/ColumnFilter/utils";
+import { useUpdateFilterSort } from "./hooks/UseUpdateFilterSort/hook";
 import { ColumnFiltersAdapterProps } from "./types";
 import { buildColumnFilters, getColumnFiltersCount } from "./utils";
 
@@ -15,7 +16,13 @@ export const ColumnFiltersAdapter = <T extends RowData>({
   renderSurface,
   table,
 }: ColumnFiltersAdapterProps<T>): JSX.Element | null => {
-  const categoryFilters = buildColumnFilters(table);
+  const {
+    enabled: filterSortEnabled,
+    filterSort,
+    onFilterSortChange,
+  } = useUpdateFilterSort(table);
+
+  const categoryFilters = buildColumnFilters(table, filterSort);
   const count = getColumnFiltersCount(table);
 
   const onFilter = useCallback(
@@ -50,6 +57,9 @@ export const ColumnFiltersAdapter = <T extends RowData>({
   return renderSurface({
     categoryFilters,
     count,
+    filterSort,
+    filterSortEnabled,
     onFilter,
+    onFilterSortChange,
   });
 };

package/src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/hooks/UseUpdateFilterSort/hook.ts

@@ -0,0 +1,22 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { useCallback, useMemo, useState } from "react";
+import { FILTER_SORT } from "../../../../../../../../common/filters/sort/config/types";
+import { UseUpdateFilterSort } from "./types";
+import { initFilterSort, isFilterSortEnabled } from "./utils";
+
+export const useUpdateFilterSort = <T extends RowData>(
+  table: Table<T>
+): UseUpdateFilterSort => {
+  const [filterSort, setFilterSort] = useState<FILTER_SORT>(
+    initFilterSort(table)
+  );
+
+  const enabled = useMemo(() => isFilterSortEnabled(table), [table]);
+
+  const onFilterSortChange = useCallback(
+    (value: FILTER_SORT) => setFilterSort(value),
+    []
+  );
+
+  return { enabled, filterSort, onFilterSortChange };
+};

package/src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/hooks/UseUpdateFilterSort/types.ts

@@ -0,0 +1,7 @@
+import { FILTER_SORT } from "../../../../../../../../common/filters/sort/config/types";
+
+export interface UseUpdateFilterSort {
+  enabled: boolean;
+  filterSort: FILTER_SORT;
+  onFilterSortChange: (filterSort: FILTER_SORT) => void;
+}

package/src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/hooks/UseUpdateFilterSort/utils.ts

@@ -0,0 +1,33 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { FILTER_SORT } from "../../../../../../../../common/filters/sort/config/types";
+import { ColumnFiltersTableMeta } from "../../types";
+
+/**
+ * Returns the default filter sort type "ALPHA" or "COUNT" from table meta or ALPHA as fallback.
+ * @param table - Table.
+ * @returns default filter sort type.
+ */
+export function initFilterSort<T extends RowData>(
+  table: Table<T>
+): FILTER_SORT {
+  const { options } = table;
+  const { meta = {} } = options;
+  const { filterSort } = meta as ColumnFiltersTableMeta<T>;
+
+  return filterSort || FILTER_SORT.ALPHA;
+}
+
+/**
+ * Returns true if filter sort is enabled.
+ * @param table - Table.
+ * @returns true if filter sort is enabled.
+ */
+export function isFilterSortEnabled<T extends RowData>(
+  table: Table<T>
+): boolean {
+  const { options } = table;
+  const { meta = {} } = options;
+  const { filterSort } = meta as ColumnFiltersTableMeta<T>;
+
+  return Boolean(filterSort);
+}

package/src/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/types.ts

@@ -3,6 +3,7 @@ import {
   Table,
   TableMeta as TanStackTableMeta,
 } from "@tanstack/react-table";
+import { FILTER_SORT } from "../../../../../../common/filters/sort/config/types";
 import { CategoryGroup } from "../../../../../../config/entities";
 import { SurfaceProps } from "../../../surfaces/types";
 
@@ -13,4 +14,5 @@ export interface ColumnFiltersAdapterProps<T extends RowData> {
 export interface ColumnFiltersTableMeta<T extends RowData>
   extends TanStackTableMeta<T> {
   categoryGroups?: CategoryGroup[];
+  filterSort?: FILTER_SORT;
 }