@databiosphere/findable-ui 43.0.0 → 44.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "43.0.0"
+  ".": "44.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [44.0.0](https://github.com/DataBiosphere/findable-ui/compare/v43.0.0...v44.0.0) (2025-08-28)
+
+
+### ⚠ BREAKING CHANGES
+
+* configure default filter sort ([#640](https://github.com/DataBiosphere/findable-ui/issues/640)) (#643)
+
+### Features
+
+* configure default filter sort ([#640](https://github.com/DataBiosphere/findable-ui/issues/640)) ([#643](https://github.com/DataBiosphere/findable-ui/issues/643)) ([63be8d1](https://github.com/DataBiosphere/findable-ui/commit/63be8d1bb87e3a473385bd45f5196d1125cfb5ed))
+* configure filter sort for tanstack column filtering ([#647](https://github.com/DataBiosphere/findable-ui/issues/647)) ([#648](https://github.com/DataBiosphere/findable-ui/issues/648)) ([c653a19](https://github.com/DataBiosphere/findable-ui/commit/c653a19ec4abd19a7aceafee6414d46f381c7544))
+* create filter sort component ([#641](https://github.com/DataBiosphere/findable-ui/issues/641)) ([#644](https://github.com/DataBiosphere/findable-ui/issues/644)) ([7f80b7c](https://github.com/DataBiosphere/findable-ui/commit/7f80b7c2b76224cc3d6da7a435b678567bbb41c9))
+* update filter sort ([#642](https://github.com/DataBiosphere/findable-ui/issues/642)) ([#645](https://github.com/DataBiosphere/findable-ui/issues/645)) ([e7470b5](https://github.com/DataBiosphere/findable-ui/commit/e7470b50d2c19e674c73e1de533559e2032516e6))
+
 ## [43.0.0](https://github.com/DataBiosphere/findable-ui/compare/v42.1.0...v43.0.0) (2025-08-19)
 
 

package/lib/common/filters/sort/config/types.d.ts

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

package/lib/common/filters/sort/config/types.js

@@ -0,0 +1,8 @@
+/**
+ * Filter sort options.
+ */
+export var FILTER_SORT;
+(function (FILTER_SORT) {
+    FILTER_SORT["ALPHA"] = "ALPHA";
+    FILTER_SORT["COUNT"] = "COUNT";
+})(FILTER_SORT || (FILTER_SORT = {}));

package/lib/common/filters/sort/config/utils.d.ts

@@ -0,0 +1,8 @@
+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 declare function getFilterSortType(config?: SiteConfig): FILTER_SORT;

package/lib/common/filters/sort/config/utils.js

@@ -0,0 +1,9 @@
+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) {
+    return config?.filterSort?.sortBy ?? FILTER_SORT.ALPHA;
+}

package/lib/common/filters/sort/models/utils.d.ts

@@ -0,0 +1,23 @@
+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 declare function sortCategoryValueViews(categoryValueViews: SelectCategoryValueView[], filterSort: FILTER_SORT): void;
+/**
+ * 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 declare function sortCategoryValueViewsAlpha(cvv0: SelectCategoryValueView, cvv1: SelectCategoryValueView): number;
+/**
+ * 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 declare function sortCategoryValueViewsCount(cvv0: SelectCategoryValueView, cvv1: SelectCategoryValueView): number;

package/lib/common/filters/sort/models/utils.js

@@ -0,0 +1,41 @@
+import { COLLATOR_CASE_INSENSITIVE } from "../../../constants";
+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, filterSort) {
+    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, cvv1) {
+    // 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, cvv1) {
+    // Sort by count descending, then alphabetically.
+    const countDiff = cvv1.count - cvv0.count;
+    if (countDiff !== 0)
+        return countDiff;
+    return sortCategoryValueViewsAlpha(cvv0, cvv1);
+}

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter.js

@@ -2,9 +2,11 @@ import { useCallback } from "react";
 import { VIEW_KIND } from "../../../../../../common/categories/views/types";
 import { CLEAR_ALL, } from "../../../../../../common/entities";
 import { updater } from "../../../../../Table/components/TableFeatures/ColumnFilter/utils";
+import { useUpdateFilterSort } from "./hooks/UseUpdateFilterSort/hook";
 import { buildColumnFilters, getColumnFiltersCount } from "./utils";
 export const ColumnFiltersAdapter = ({ renderSurface, table, }) => {
-    const categoryFilters = buildColumnFilters(table);
+    const { enabled: filterSortEnabled, filterSort, onFilterSortChange, } = useUpdateFilterSort(table);
+    const categoryFilters = buildColumnFilters(table, filterSort);
     const count = getColumnFiltersCount(table);
     const onFilter = useCallback((categoryKey, selectedCategoryValue, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars -- `selected` is not required by TanStack adapter.
@@ -28,6 +30,9 @@ export const ColumnFiltersAdapter = ({ renderSurface, table, }) => {
     return renderSurface({
         categoryFilters,
         count,
+        filterSort,
+        filterSortEnabled,
         onFilter,
+        onFilterSortChange,
     });
 };

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

@@ -0,0 +1,3 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { UseUpdateFilterSort } from "./types";
+export declare const useUpdateFilterSort: <T extends RowData>(table: Table<T>) => UseUpdateFilterSort;

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/hooks/UseUpdateFilterSort/hook.js

@@ -0,0 +1,8 @@
+import { useCallback, useMemo, useState } from "react";
+import { initFilterSort, isFilterSortEnabled } from "./utils";
+export const useUpdateFilterSort = (table) => {
+    const [filterSort, setFilterSort] = useState(initFilterSort(table));
+    const enabled = useMemo(() => isFilterSortEnabled(table), [table]);
+    const onFilterSortChange = useCallback((value) => setFilterSort(value), []);
+    return { enabled, filterSort, onFilterSortChange };
+};

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/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/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/hooks/UseUpdateFilterSort/types.js

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

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

@@ -0,0 +1,14 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { FILTER_SORT } from "../../../../../../../../common/filters/sort/config/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 declare function initFilterSort<T extends RowData>(table: Table<T>): FILTER_SORT;
+/**
+ * Returns true if filter sort is enabled.
+ * @param table - Table.
+ * @returns true if filter sort is enabled.
+ */
+export declare function isFilterSortEnabled<T extends RowData>(table: Table<T>): boolean;

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/hooks/UseUpdateFilterSort/utils.js

@@ -0,0 +1,23 @@
+import { FILTER_SORT } from "../../../../../../../../common/filters/sort/config/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(table) {
+    const { options } = table;
+    const { meta = {} } = options;
+    const { filterSort } = meta;
+    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(table) {
+    const { options } = table;
+    const { meta = {} } = options;
+    const { filterSort } = meta;
+    return Boolean(filterSort);
+}

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/types.d.ts

@@ -1,4 +1,5 @@
 import { RowData, 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";
 export interface ColumnFiltersAdapterProps<T extends RowData> {
@@ -7,4 +8,5 @@ export interface ColumnFiltersAdapterProps<T extends RowData> {
 }
 export interface ColumnFiltersTableMeta<T extends RowData> extends TanStackTableMeta<T> {
     categoryGroups?: CategoryGroup[];
+    filterSort?: FILTER_SORT;
 }

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/utils.d.ts

@@ -1,11 +1,13 @@
 import { RowData, Table } from "@tanstack/react-table";
+import { FILTER_SORT } from "../../../../../../common/filters/sort/config/types";
 import { SurfaceProps } from "../../../surfaces/types";
 /**
  * Adapter for TanStack table column filters to category filters.
  * @param table - Table.
+ * @param filterSort - Filter sort.
  * @returns Category filters.
  */
-export declare function buildColumnFilters<T extends RowData>(table: Table<T>): SurfaceProps["categoryFilters"];
+export declare function buildColumnFilters<T extends RowData>(table: Table<T>, filterSort?: FILTER_SORT): SurfaceProps["categoryFilters"];
 /**
  * Adapter for TanStack table column filters to selected count.
  * @param table - Table.

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/utils.js

@@ -1,6 +1,7 @@
 import { isRangeCategoryConfig } from "../../../../../../common/categories/config/range/typeGuards";
+import { FILTER_SORT } from "../../../../../../common/filters/sort/config/types";
+import { sortCategoryValueViews } from "../../../../../../common/filters/sort/models/utils";
 import { getColumnHeader } from "../../../../../Table/common/utils";
-import { getSortedFacetedValues } from "../../../../../Table/featureOptions/facetedColumn/utils";
 /**
  * Adapter for TanStack table to category configs.
  * @param table - Table.
@@ -15,12 +16,13 @@ function buildCategoryConfigs(table) {
 /**
  * Adapter for TanStack table to category filters.
  * @param table - Table.
+ * @param filterSort - Filter sort.
  * @param categoryGroups - Category groups.
  * @returns Category filters.
  */
-function buildCategoryFilters(table, categoryGroups) {
+function buildCategoryFilters(table, filterSort, categoryGroups) {
     return categoryGroups.reduce((acc, categoryGroup) => {
-        const categoryFilter = mapCategoryFilter(table, categoryGroup);
+        const categoryFilter = mapCategoryFilter(table, filterSort, categoryGroup);
         if (categoryFilter)
             acc.push(categoryFilter);
         return acc;
@@ -29,9 +31,10 @@ function buildCategoryFilters(table, categoryGroups) {
 /**
  * Adapter for TanStack table column filters to category filters.
  * @param table - Table.
+ * @param filterSort - Filter sort.
  * @returns Category filters.
  */
-export function buildColumnFilters(table) {
+export function buildColumnFilters(table, filterSort = FILTER_SORT.ALPHA) {
     const { options } = table;
     const { meta = {} } = options;
     const { categoryGroups } = meta;
@@ -39,10 +42,12 @@ export function buildColumnFilters(table) {
         // Build single category group with all (filterable) columns.
         const categoryConfigs = buildCategoryConfigs(table);
         // Build category filters from single category group.
-        return buildCategoryFilters(table, [{ categoryConfigs, label: "" }]);
+        return buildCategoryFilters(table, filterSort, [
+            { categoryConfigs, label: "" },
+        ]);
     }
     // Build category filters from category groups.
-    return buildCategoryFilters(table, categoryGroups);
+    return buildCategoryFilters(table, filterSort, categoryGroups);
 }
 /**
  * Adapter for TanStack table column filters to selected count.
@@ -68,10 +73,11 @@ function mapCategoryConfig(column) {
 /**
  * Adapter for TanStack table to category filter.
  * @param table - Table.
+ * @param filterSort - Filter sort.
  * @param categoryGroup - Category group.
  * @returns Category filter.
  */
-function mapCategoryFilter(table, categoryGroup) {
+function mapCategoryFilter(table, filterSort, categoryGroup) {
     const { categoryConfigs, label } = categoryGroup;
     const categoryViews = categoryConfigs.reduce((acc, categoryConfig) => {
         const column = table.getColumn(categoryConfig.key);
@@ -86,7 +92,7 @@ function mapCategoryFilter(table, categoryGroup) {
         }
         else {
             // Build select category view.
-            categoryView = mapColumnToSelectCategoryView(column, categoryConfig);
+            categoryView = mapColumnToSelectCategoryView(column, filterSort, categoryConfig);
         }
         return [...acc, categoryView];
     }, []);
@@ -120,13 +126,14 @@ function mapColumnToRangeCategoryView(column, categoryConfig) {
 /**
  * Adapter for TanStack column to select category view.
  * @param column - Column.
+ * @param filterSort - Filter sort.
  * @param categoryConfig - Category config.
  * @returns Select category view.
  */
-function mapColumnToSelectCategoryView(column, categoryConfig) {
+function mapColumnToSelectCategoryView(column, filterSort, categoryConfig) {
     const facetedUniqueValues = column.getFacetedUniqueValues();
     const isDisabled = facetedUniqueValues.size === 0;
-    const values = mapColumnToSelectCategoryValueView(column);
+    const values = mapColumnToSelectCategoryValueView(column, filterSort);
     return {
         annotation: undefined,
         enableChartView: false,
@@ -140,23 +147,24 @@ function mapColumnToSelectCategoryView(column, categoryConfig) {
 /**
  * Adapter for TanStack column to select category value view.
  * @param column - Column.
+ * @param filterSort - Filter sort.
  * @returns Select category value view.
  */
-function mapColumnToSelectCategoryValueView(column) {
+function mapColumnToSelectCategoryValueView(column, filterSort) {
     // Get the faceted unique values and sort them.
     const facetedUniqueValues = column.getFacetedUniqueValues();
-    const sortedFacetsValues = getSortedFacetedValues(facetedUniqueValues);
     // Selected values for the column.
     const filterValue = (column.getFilterValue() || []);
     // Build the select category values.
-    const selectCategoryValues = [];
-    for (const [label, count] of sortedFacetsValues) {
-        selectCategoryValues.push({
+    const categoryValueViews = [];
+    for (const [label, count] of [...facetedUniqueValues]) {
+        categoryValueViews.push({
             count,
             key: String(label),
             label: String(label),
             selected: filterValue.includes(label),
         });
     }
-    return selectCategoryValues;
+    sortCategoryValueViews(categoryValueViews, filterSort);
+    return categoryValueViews;
 }

package/lib/components/Filter/components/controls/Controls/components/FilterSort/constants.d.ts

@@ -0,0 +1,5 @@
+import { ListItemTextProps, MenuProps, SvgIconProps } from "@mui/material";
+export declare const LIST_ITEM_BUTTON_TEXT_PROPS: ListItemTextProps;
+export declare const LIST_ITEM_TEXT_PROPS: ListItemTextProps;
+export declare const MENU_PROPS: Omit<MenuProps, "anchorEl" | "onClose" | "open">;
+export declare const SVG_ICON_PROPS: SvgIconProps;

package/lib/components/Filter/components/controls/Controls/components/FilterSort/constants.js

@@ -0,0 +1,17 @@
+import { SVG_ICON_PROPS as MUI_SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+export const LIST_ITEM_BUTTON_TEXT_PROPS = {
+    slotProps: { primary: { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_400 } },
+};
+export const LIST_ITEM_TEXT_PROPS = {
+    slotProps: { primary: { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_500 } },
+};
+export const MENU_PROPS = {
+    anchorOrigin: { horizontal: "left", vertical: "bottom" },
+    marginThreshold: 8,
+    slotProps: { paper: { variant: "menu" } },
+    transformOrigin: { horizontal: "left", vertical: "top" },
+};
+export const SVG_ICON_PROPS = {
+    fontSize: MUI_SVG_ICON_PROPS.FONT_SIZE.SMALL,
+};

package/lib/components/Filter/components/controls/Controls/components/FilterSort/filterSort.d.ts

@@ -0,0 +1,2 @@
+import { FilterSortProps } from "./types";
+export declare const FilterSort: ({ enabled, filterSort, onFilterSortChange, }: FilterSortProps) => JSX.Element | null;

package/lib/components/Filter/components/controls/Controls/components/FilterSort/filterSort.js

@@ -0,0 +1,28 @@
+import { SettingsOutlined } from "@mui/icons-material";
+import { ListItem, ListItemButton, ListItemText, Radio } from "@mui/material";
+import React, { Fragment } from "react";
+import { FILTER_SORT } from "../../../../../../../common/filters/sort/config/types";
+import { ICON_BUTTON_PROPS } from "../../../../../../../styles/common/mui/iconButton";
+import { TEST_IDS } from "../../../../../../../tests/testIds";
+import { RadioCheckedIcon } from "../../../../../../common/CustomIcon/components/RadioCheckedIcon/radioCheckedIcon";
+import { RadioUncheckedIcon } from "../../../../../../common/CustomIcon/components/RadioUncheckedIcon/radioUncheckedIcon";
+import { useMenu } from "../../../../../../common/Menu/hooks/useMenu";
+import { LIST_ITEM_BUTTON_TEXT_PROPS, LIST_ITEM_TEXT_PROPS, MENU_PROPS, SVG_ICON_PROPS, } from "./constants";
+import { StyledIconButton, StyledMenu } from "./filterSort.styles";
+export const FilterSort = ({ enabled = false, filterSort = FILTER_SORT.ALPHA, onFilterSortChange, }) => {
+    const { anchorEl, onClose, onOpen, open } = useMenu();
+    if (!enabled || !onFilterSortChange)
+        return null;
+    return (React.createElement(Fragment, null,
+        React.createElement(StyledIconButton, { color: ICON_BUTTON_PROPS.COLOR.INK_LIGHT, "data-testid": TEST_IDS.FILTER_SORT_BUTTON, onClick: onOpen, open: open },
+            React.createElement(SettingsOutlined, { ...SVG_ICON_PROPS })),
+        React.createElement(StyledMenu, { ...MENU_PROPS, anchorEl: anchorEl, "data-testid": TEST_IDS.FILTER_SORT_MENU, onClose: onClose, open: open },
+            React.createElement(ListItem, null,
+                React.createElement(ListItemText, { ...LIST_ITEM_TEXT_PROPS }, "Sort Filter Values By")),
+            React.createElement(ListItemButton, { onClick: () => onFilterSortChange(FILTER_SORT.ALPHA) },
+                React.createElement(Radio, { checked: filterSort === FILTER_SORT.ALPHA, checkedIcon: React.createElement(RadioCheckedIcon, { ...SVG_ICON_PROPS }), icon: React.createElement(RadioUncheckedIcon, { ...SVG_ICON_PROPS }) }),
+                React.createElement(ListItemText, { ...LIST_ITEM_BUTTON_TEXT_PROPS }, "Alphabetical")),
+            React.createElement(ListItemButton, { onClick: () => onFilterSortChange(FILTER_SORT.COUNT) },
+                React.createElement(Radio, { checked: filterSort === FILTER_SORT.COUNT, checkedIcon: React.createElement(RadioCheckedIcon, { ...SVG_ICON_PROPS }), icon: React.createElement(RadioUncheckedIcon, { ...SVG_ICON_PROPS }) }),
+                React.createElement(ListItemText, { ...LIST_ITEM_BUTTON_TEXT_PROPS }, "By Count (Descending)")))));
+};

package/lib/components/Filter/components/controls/Controls/components/FilterSort/filterSort.styles.d.ts

@@ -0,0 +1,9 @@
+import { MenuProps } from "@mui/material";
+export declare const StyledIconButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style" | "size" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator"> & {
+    theme?: import("@emotion/react").Theme;
+} & Pick<MenuProps, "open">, {}, {}>;
+export declare const StyledMenu: import("@emotion/styled").StyledComponent<MenuProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Filter/components/controls/Controls/components/FilterSort/filterSort.styles.js

@@ -0,0 +1,25 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { IconButton, Menu, menuClasses, paperClasses, } from "@mui/material";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+import { MuiListItemButtonRoot } from "../../../../FilterList/filterList.styles";
+export const StyledIconButton = styled(IconButton) `
+  align-self: center;
+  padding: 0;
+
+  ${({ open }) => open &&
+    css `
+      color: ${PALETTE.INK_MAIN};
+    `}
+`;
+export const StyledMenu = styled(Menu) `
+  .${paperClasses.root} {
+    margin: 4px 0;
+    max-width: 300px;
+    width: 100%;
+
+    .${menuClasses.list} {
+      ${MuiListItemButtonRoot}
+    }
+  }
+`;

package/lib/components/Filter/components/controls/Controls/components/FilterSort/stories/filterSort.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FilterSort } from "../filterSort";
+declare const meta: Meta<typeof FilterSort>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DEFAULT: Story;

package/lib/components/Filter/components/controls/Controls/components/FilterSort/stories/filterSort.stories.js

@@ -0,0 +1,9 @@
+import { FILTER_SORT } from "../../../../../../../../common/filters/sort/config/types";
+import { FilterSort } from "../filterSort";
+const meta = {
+    component: FilterSort,
+};
+export default meta;
+export const DEFAULT = {
+    args: { enabled: true, filterSort: FILTER_SORT.ALPHA },
+};

package/lib/components/Filter/components/controls/Controls/components/FilterSort/types.d.ts

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

package/lib/components/Filter/components/controls/Controls/components/FilterSort/types.js

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

package/lib/components/Filter/components/controls/Controls/controls.d.ts

@@ -1,6 +1,5 @@
-import { BaseComponentProps } from "../../../../types";
-import { SurfaceProps } from "../../surfaces/types";
+import { ControlsProps } from "./types";
 /**
  * Renders filter title and "Clear All" button.
  */
-export declare const Controls: ({ className, onFilter, }: BaseComponentProps & Pick<SurfaceProps, "onFilter">) => JSX.Element | null;
+export declare const Controls: ({ className, filterSort, filterSortEnabled, onFilter, onFilterSortChange, }: ControlsProps) => JSX.Element | null;

package/lib/components/Filter/components/controls/Controls/controls.js

@@ -3,12 +3,14 @@ import React from "react";
 import { CLEAR_ALL } from "../../../../../common/entities";
 import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 import { BUTTON_PROPS } from "../../../../common/Button/constants";
+import { FilterSort } from "./components/FilterSort/filterSort";
 import { StyledGrid } from "./controls.styles";
 /**
  * Renders filter title and "Clear All" button.
  */
-export const Controls = ({ className, onFilter, }) => {
+export const Controls = ({ className, filterSort, filterSortEnabled = false, onFilter, onFilterSortChange, }) => {
     return (React.createElement(StyledGrid, { className: className, container: true },
         React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500 }, "Filters"),
-        React.createElement(MButton, { ...BUTTON_PROPS.PRIMARY_TEXT, onClick: () => onFilter(CLEAR_ALL, undefined, false) }, "Clear All")));
+        React.createElement(MButton, { ...BUTTON_PROPS.PRIMARY_TEXT, onClick: () => onFilter(CLEAR_ALL, undefined, false) }, "Clear All"),
+        React.createElement(FilterSort, { enabled: filterSortEnabled, filterSort: filterSort, onFilterSortChange: onFilterSortChange })));
 };

package/lib/components/Filter/components/controls/Controls/controls.styles.js

@@ -2,7 +2,8 @@ import styled from "@emotion/styled";
 import { Grid } from "@mui/material";
 export const StyledGrid = styled(Grid) `
   display: grid;
-  gap: 8px 0;
+  gap: 8px 16px;
+  grid-auto-flow: column;
   grid-template-columns: 1fr auto;
   margin: 8px 0;
   padding: 0 16px;

package/lib/components/Filter/components/controls/Controls/types.d.ts

@@ -0,0 +1,6 @@
+import { BaseComponentProps } from "../../../../types";
+import { SurfaceProps } from "../../surfaces/types";
+import { FilterSortProps } from "./components/FilterSort/types";
+export interface ControlsProps extends BaseComponentProps, Pick<SurfaceProps, "onFilter">, Omit<FilterSortProps, "enabled"> {
+    filterSortEnabled?: boolean;
+}

package/lib/components/Filter/components/controls/Controls/types.js

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

package/lib/components/Filter/components/surfaces/types.d.ts

@@ -1,8 +1,10 @@
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { CategoryFilter } from "../Filters/filters";
-export interface SurfaceProps {
+import { FilterSortProps } from "../controls/Controls/components/FilterSort/types";
+export interface SurfaceProps extends Omit<FilterSortProps, "enabled"> {
     categoryFilters: CategoryFilter[];
     count?: number;
+    filterSortEnabled: boolean;
     onFilter: OnFilterFn;
 }
 export declare enum SURFACE_TYPE {

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/hooks/UsePlotOptions/hook.js

@@ -1,12 +1,12 @@
 import { useMemo } from "react";
+import { sortCategoryValueViewsCount } from "../../../../../../../../../../../common/filters/sort/models/utils";
 import { getPlotOptions } from "../../barX/plot";
 import { getCategoryTotalCount } from "../../barX/utils";
-import { sortByCountThenLabel } from "../../utils";
 export const usePlotOptions = (selectCategoryValueViews, width, barCount) => {
     // Organise the select category value views (sort and slice) for chart display.
     const data = selectCategoryValueViews
         // Sort the category values by count and label.
-        .sort(sortByCountThenLabel)
+        .sort(sortCategoryValueViewsCount)
         // Slice the category values to the number of bars to display.
         .slice(0, barCount);
     // Build the plot options.

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/utils.d.ts

@@ -6,10 +6,3 @@ import { SelectCategoryValueView } from "../../../../../../../../../common/entit
  * @returns Button text.
  */
 export declare function renderButtonText(maxBarCount: number | undefined, selectCategoryValueViews: SelectCategoryValueView[]): string;
-/**
- * Sorts category value views by count in descending order, then label in ascending order.
- * @param a - First category value view.
- * @param b - Second category value view.
- * @returns Sorted category value views.
- */
-export declare function sortByCountThenLabel(a: SelectCategoryValueView, b: SelectCategoryValueView): number;

package/lib/components/Index/components/EntityView/components/views/ChartView/components/Chart/utils.js

@@ -1,4 +1,3 @@
-import { sortCategoryValueViews } from "../../../../../../../../../hooks/useCategoryFilter";
 /**
  * Renders the button text for the chart.
  * @param maxBarCount - Maximum number of bars to display.
@@ -13,13 +12,3 @@ export function renderButtonText(maxBarCount, selectCategoryValueViews) {
     const count = totalBars - maxBarCount;
     return `Show ${count} additional results`;
 }
-/**
- * Sorts category value views by count in descending order, then label in ascending order.
- * @param a - First category value view.
- * @param b - Second category value view.
- * @returns Sorted category value views.
- */
-export function sortByCountThenLabel(a, b) {
-    const compare = b.count - a.count;
-    return compare === 0 ? sortCategoryValueViews(a, b) : compare;
-}