@databiosphere/findable-ui 29.0.2 → 30.0.0

package/lib/components/Table/components/TableCell/components/LinkCell/linkCell.js

@@ -0,0 +1,21 @@
+import { Link as MLink, Typography } from "@mui/material";
+import React from "react";
+import { isValidUrl } from "../../../../../../common/utils";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
+import { isClientSideNavigation } from "../../../../../Links/common/utils";
+import { getComponent, getRelAttribute, getTargetAttribute } from "./utils";
+export const LinkCell = ({ getValue, }) => {
+    const props = getValue();
+    if (!props)
+        return null;
+    const { children, className, color, href = "", rel, target, underline, ...linkProps } = props;
+    // Determine if the href should use client-side navigation.
+    const isClientSide = isClientSideNavigation(href);
+    // Determine if the href is valid.
+    const isValid = isClientSide || isValidUrl(href);
+    // If the href is invalid, return a Typography component.
+    if (!isValid)
+        return (React.createElement(Typography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INHERIT, component: "span", variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...linkProps }, children));
+    // If the href is valid, return a Link component.
+    return (React.createElement(MLink, { className: className, color: color, component: getComponent(href, isClientSide), href: href, rel: getRelAttribute(rel, isClientSide), target: getTargetAttribute(target, isClientSide), underline: underline, ...linkProps }, children));
+};

package/lib/components/Table/components/TableCell/components/LinkCell/stories/args.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from "react";
+import { LinkCell } from "../linkCell";
+export declare const CLIENT_SIDE_ARGS: Partial<ComponentProps<typeof LinkCell>>;
+export declare const EXTERNAL_ARGS: Partial<ComponentProps<typeof LinkCell>>;
+export declare const INVALID_ARGS: Partial<ComponentProps<typeof LinkCell>>;
+export declare const WITH_CUSTOM_STYLE_ARGS: Partial<ComponentProps<typeof LinkCell>>;

package/lib/components/Table/components/TableCell/components/LinkCell/stories/args.js

@@ -0,0 +1,27 @@
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+export const CLIENT_SIDE_ARGS = {
+    getValue: (() => ({
+        children: "Explore",
+        href: "/",
+    })),
+};
+export const EXTERNAL_ARGS = {
+    getValue: (() => ({
+        children: "Explore",
+        href: "https://www.example.com",
+    })),
+};
+export const INVALID_ARGS = {
+    getValue: (() => ({
+        children: "Explore",
+    })),
+};
+export const WITH_CUSTOM_STYLE_ARGS = {
+    getValue: (() => ({
+        children: "Explore",
+        color: "success",
+        href: "/",
+        underline: "none",
+        variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400,
+    })),
+};

package/lib/components/Table/components/TableCell/components/LinkCell/stories/linkCell.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { LinkCell } from "../linkCell";
+declare const meta: Meta<typeof LinkCell>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ClientSide: Story;
+export declare const External: Story;
+export declare const Invalid: Story;
+export declare const WithCustomStyle: Story;

package/lib/components/Table/components/TableCell/components/LinkCell/stories/linkCell.stories.js

@@ -0,0 +1,18 @@
+import { LinkCell } from "../linkCell";
+import { CLIENT_SIDE_ARGS, EXTERNAL_ARGS, INVALID_ARGS, WITH_CUSTOM_STYLE_ARGS, } from "./args";
+const meta = {
+    component: LinkCell,
+};
+export default meta;
+export const ClientSide = {
+    args: CLIENT_SIDE_ARGS,
+};
+export const External = {
+    args: EXTERNAL_ARGS,
+};
+export const Invalid = {
+    args: INVALID_ARGS,
+};
+export const WithCustomStyle = {
+    args: WITH_CUSTOM_STYLE_ARGS,
+};

package/lib/components/Table/components/TableCell/components/LinkCell/stories/types.d.ts

@@ -0,0 +1,3 @@
+import { LinkProps } from "@mui/material";
+import { CellContext, RowData } from "@tanstack/react-table";
+export type GetValue = CellContext<RowData, LinkProps>["getValue"];

package/lib/components/Table/components/TableCell/components/LinkCell/stories/types.js

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

package/lib/components/Table/components/TableCell/components/LinkCell/utils.d.ts

@@ -0,0 +1,22 @@
+import { ElementType } from "react";
+/**
+ * Returns the component to use for a link based on the given href and client-side navigation flag.
+ * @param href - The href attribute to use.
+ * @param isClientSide - Whether the link is a client-side navigation.
+ * @returns The component to use for the link.
+ */
+export declare function getComponent(href: string, isClientSide: boolean): ElementType;
+/**
+ * Returns the rel attribute for a link based on the given rel and client-side navigation flag.
+ * @param rel - The rel attribute to use.
+ * @param isClientSideNavigation - Whether the link is a client-side navigation.
+ * @returns The rel attribute for the link.
+ */
+export declare function getRelAttribute(rel: string | undefined, isClientSideNavigation: boolean): string;
+/**
+ * Returns the target attribute for a link based on the given target and client-side navigation flag.
+ * @param target - The target attribute to use.
+ * @param isClientSideNavigation - Whether the link is a client-side navigation.
+ * @returns The target attribute for the link.
+ */
+export declare function getTargetAttribute(target: string | undefined, isClientSideNavigation: boolean): string;

package/lib/components/Table/components/TableCell/components/LinkCell/utils.js

@@ -0,0 +1,45 @@
+import Link from "next/link";
+import { isValidUrl } from "../../../../../../common/utils";
+import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../Links/common/entities";
+import { assertAnchorRelAttribute, assertAnchorTargetAttribute, } from "../../../../../common/Link/typeGuards";
+/**
+ * Returns the component to use for a link based on the given href and client-side navigation flag.
+ * @param href - The href attribute to use.
+ * @param isClientSide - Whether the link is a client-side navigation.
+ * @returns The component to use for the link.
+ */
+export function getComponent(href, isClientSide) {
+    if (isClientSide)
+        return Link; // Use Next/Link for client-side navigation.
+    if (isValidUrl(href))
+        return "a"; // Use anchor tag for external links.
+    return "span"; // Use span for invalid links.
+}
+/**
+ * Returns the rel attribute for a link based on the given rel and client-side navigation flag.
+ * @param rel - The rel attribute to use.
+ * @param isClientSideNavigation - Whether the link is a client-side navigation.
+ * @returns The rel attribute for the link.
+ */
+export function getRelAttribute(rel, isClientSideNavigation) {
+    if (rel) {
+        assertAnchorRelAttribute(rel);
+        return rel;
+    }
+    return isClientSideNavigation
+        ? REL_ATTRIBUTE.NO_OPENER
+        : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER;
+}
+/**
+ * Returns the target attribute for a link based on the given target and client-side navigation flag.
+ * @param target - The target attribute to use.
+ * @param isClientSideNavigation - Whether the link is a client-side navigation.
+ * @returns The target attribute for the link.
+ */
+export function getTargetAttribute(target, isClientSideNavigation) {
+    if (target) {
+        assertAnchorTargetAttribute(target);
+        return target;
+    }
+    return isClientSideNavigation ? ANCHOR_TARGET.SELF : ANCHOR_TARGET.BLANK;
+}

package/lib/components/Table/featureOptions/facetedColumn/getFacetedMinMaxValues.d.ts

@@ -0,0 +1,8 @@
+import { RowData, Table } from "@tanstack/react-table";
+/**
+ * Returns an array of two numbers, the minimum and maximum values for the column, or undefined if the column does not exist or has no values.
+ * Customized version of the default getFacetedMinMaxValues function from tanstack table handling mixed null and possible NaN values.
+ * See https://tanstack.com/table/v8/docs/api/features/column-faceting#getfacetedminmaxvalues.
+ * @returns An array of two numbers, the minimum and maximum values for the column, or undefined if the column does not exist or has no values.
+ */
+export declare function getFacetedMinMaxValues<TData extends RowData>(): (table: Table<TData>, columnId: string) => () => undefined | [number, number];

package/lib/components/Table/featureOptions/facetedColumn/getFacetedMinMaxValues.js

@@ -0,0 +1,46 @@
+import { getMemoOptions, memo } from "@tanstack/react-table";
+/**
+ * Returns an array of two numbers, the minimum and maximum values for the column, or undefined if the column does not exist or has no values.
+ * Customized version of the default getFacetedMinMaxValues function from tanstack table handling mixed null and possible NaN values.
+ * See https://tanstack.com/table/v8/docs/api/features/column-faceting#getfacetedminmaxvalues.
+ * @returns An array of two numbers, the minimum and maximum values for the column, or undefined if the column does not exist or has no values.
+ */
+export function getFacetedMinMaxValues() {
+    // eslint-disable-next-line sonarjs/cognitive-complexity -- Customized copy of tanstack table function.
+    return (table, columnId) => memo(() => [table.getColumn(columnId)?.getFacetedRowModel()], (facetedRowModel) => {
+        if (!facetedRowModel)
+            return undefined;
+        // Initialize with the smallest and largest possible numbers.
+        const facetedMinMaxValues = [Infinity, -Infinity];
+        for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
+            const values = facetedRowModel.flatRows[i].getUniqueValues(columnId);
+            for (let j = 0; j < values.length; j++) {
+                const value = values[j];
+                // Convert value to a number.
+                const numericValue = Number(value);
+                // Skip null and NaN values.
+                if (value === null || isNaN(numericValue))
+                    continue;
+                if (numericValue < facetedMinMaxValues[0]) {
+                    facetedMinMaxValues[0] = numericValue;
+                }
+                if (numericValue > facetedMinMaxValues[1]) {
+                    facetedMinMaxValues[1] = numericValue;
+                }
+            }
+        }
+        // Return undefined if all values are null or NaN.
+        if (facetedMinMaxValues[0] === Infinity &&
+            facetedMinMaxValues[1] === -Infinity) {
+            return undefined;
+        }
+        // Normalize -0 to 0.
+        if (Object.is(facetedMinMaxValues[0], -0)) {
+            facetedMinMaxValues[0] = 0;
+        }
+        if (Object.is(facetedMinMaxValues[1], -0)) {
+            facetedMinMaxValues[1] = 0;
+        }
+        return facetedMinMaxValues;
+    }, getMemoOptions(table.options, "debugTable", "getFacetedMinMaxValues"));
+}

package/lib/components/common/Link/typeGuards.d.ts

@@ -0,0 +1,13 @@
+import { ANCHOR_TARGET, REL_ATTRIBUTE } from "../../Links/common/entities";
+/**
+ * Asserts that the given value is a valid REL_ATTRIBUTE.
+ * @param value - Value to assert.
+ * @throws Error if the value is not a valid REL_ATTRIBUTE.
+ */
+export declare function assertAnchorRelAttribute(value: string): asserts value is REL_ATTRIBUTE;
+/**
+ * Asserts that the given value is a valid ANCHOR_TARGET.
+ * @param value - Value to assert.
+ * @throws Error if the value is not a valid ANCHOR_TARGET.
+ */
+export declare function assertAnchorTargetAttribute(value: string): asserts value is ANCHOR_TARGET;

package/lib/components/common/Link/typeGuards.js

@@ -0,0 +1,21 @@
+import { ANCHOR_TARGET, REL_ATTRIBUTE } from "../../Links/common/entities";
+/**
+ * Asserts that the given value is a valid REL_ATTRIBUTE.
+ * @param value - Value to assert.
+ * @throws Error if the value is not a valid REL_ATTRIBUTE.
+ */
+export function assertAnchorRelAttribute(value) {
+    if (!Object.values(REL_ATTRIBUTE).includes(value)) {
+        throw new Error(`Expecting rel attribute: ${value} to be one of ${Object.values(REL_ATTRIBUTE)}`);
+    }
+}
+/**
+ * Asserts that the given value is a valid ANCHOR_TARGET.
+ * @param value - Value to assert.
+ * @throws Error if the value is not a valid ANCHOR_TARGET.
+ */
+export function assertAnchorTargetAttribute(value) {
+    if (!Object.values(ANCHOR_TARGET).includes(value)) {
+        throw new Error(`Expecting anchor target: ${value} to be one of ${Object.values(ANCHOR_TARGET)}`);
+    }
+}

package/lib/config/entities.d.ts

@@ -1,7 +1,8 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
 import { CellContext, ColumnDef, ColumnMeta, ColumnSort, GroupingState, RowData, Table, TableOptions } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
-import { DataDictionaryAnnotation, DataDictionaryConfig, SelectCategoryValueView, SelectedFilter } from "../common/entities";
+import { CategoryConfig } from "../common/categories/config/types";
+import { DataDictionaryAnnotation, DataDictionaryConfig, SelectedFilter } from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
 import { FooterProps } from "../components/Layout/components/Footer/footer";
 import { HeaderProps } from "../components/Layout/components/Header/header";
@@ -66,16 +67,6 @@ export interface CategoryGroup {
     categoryConfigs: CategoryConfig[];
     label?: string;
 }
-/**
- * Model of category configured in site config.
- */
-export interface CategoryConfig {
-    annotation?: DataDictionaryAnnotation;
-    enableChartView?: boolean;
-    key: string;
-    label: string;
-    mapSelectCategoryValue?: (selectCategoryValue: SelectCategoryValueView) => SelectCategoryValueView;
-}
 /**
  * Column configuration.
  * TanStack ColumnDef properties not currently supported include:

package/lib/hooks/useCategoryFilter.d.ts

@@ -1,21 +1,15 @@
-import { CategoryKey, CategoryValueKey, Filters, SelectCategory, SelectCategoryValue, SelectCategoryView } from "../common/entities";
-import { CategoryConfig } from "../config/entities";
+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, Filters, SelectCategoryValue } from "../common/entities";
 /**
  * State backing filter functionality and calculations. Converted to view model for display.
  */
 export type FilterState = Filters;
-/**
- * Shape of return value from this useCategoryFilter hook.
- */
-export interface FilterInstance {
-    categories: SelectCategoryView[];
-    filter: FilterState;
-    onFilter: OnFilterFn;
-}
 /**
  * Function invoked when selected state of a category value is toggled or range is selected.
  */
-export type OnFilterFn = (categoryKey: CategoryKey, selectedCategoryValue: CategoryValueKey, selected: boolean, categorySection?: string, searchTerm?: string) => void;
+export type OnFilterFn = (categoryKey: CategoryKey, selectedCategoryValue: CategoryValueKey, selected: boolean, categorySection?: string, viewKind?: VIEW_KIND, searchTerm?: string) => void;
 /**
  * Build view-specific models from filter state, to facilitate easy rendering.
  * @param categories - Categories, category value and their counts with the current filter applied.
@@ -23,16 +17,17 @@ export type OnFilterFn = (categoryKey: CategoryKey, selectedCategoryValue: Categ
  * @param filterState - Current set of selected category and category values.
  * @returns Array of category view objects.
  */
-export declare function buildCategoryViews(categories: SelectCategory[], categoryConfigs: CategoryConfig[] | undefined, filterState: FilterState): SelectCategoryView[];
+export declare function buildCategoryViews(categories: Category[], categoryConfigs: CategoryConfig[] | undefined, filterState: FilterState): CategoryView[];
 /**
  * Build new set of selected filters on de/select of filter.
  * @param filterState - Current set of selected category and category values.
  * @param categoryKey - Key of category that has been de/selected.
  * @param selectedValue - Key of category value that has been de/selected
  * @param selected - True if value is selected, false if de-selected.
+ * @param viewKind - View kind.
  * @returns New filter state generated from the current set of selected values and the newly selected value.
  */
-export declare function buildNextFilterState(filterState: FilterState, categoryKey: CategoryKey, selectedValue: CategoryValueKey, selected: boolean): FilterState;
+export declare function buildNextFilterState(filterState: FilterState, categoryKey: CategoryKey, selectedValue: CategoryValueKey, selected: boolean, viewKind?: VIEW_KIND): FilterState;
 /**
  * Default function returning select category value, unmodified.
  * @param selectCategoryValue - Select category value.

package/lib/hooks/useCategoryFilter.js

@@ -1,3 +1,9 @@
+import { findSelectCategoryConfig } from "../common/categories/config/utils";
+import { isRangeCategory } from "../common/categories/models/range/typeGuards";
+import { buildNextRangeFilterState } from "../common/categories/models/range/utils";
+import { buildNextSelectFilterState } from "../common/categories/models/select/utils";
+import { buildRangeCategoryView } from "../common/categories/views/range/utils";
+import { VIEW_KIND } from "../common/categories/views/types";
 import { COLLATOR_CASE_INSENSITIVE } from "../common/constants";
 /**
  * Build the view-specific model of the given category value.
@@ -17,22 +23,22 @@ function buildCategoryValueView(categoryValue, categorySelectedFilter) {
     };
 }
 /**
- * Build the view-specific model of the given category, including the category label pulled from the config.
- * @param category - The category to build a view model of.
- * @param categoryValueViews - Set of category value view models for the given category.
+ * Build the view-specific model of the given select category, including the category label pulled from the config.
+ * @param selectCategory - The select category to build a view model of.
+ * @param selectCategoryValueViews - Set of select category value view models for the given category.
  * @param categoryConfigs - Category configs indicating accept list as well as label configuration.
- * @returns Full built category value view, ready for display.
+ * @returns Full built select category view, ready for display.
  */
-function buildCategoryView(category, categoryValueViews, categoryConfigs) {
-    const categoryConfig = findCategoryConfig(category.key, categoryConfigs);
-    const mapSelectCategoryValue = categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
+function buildCategoryView(selectCategory, selectCategoryValueViews, categoryConfigs) {
+    const selectCategoryConfig = findSelectCategoryConfig(selectCategory.key, categoryConfigs);
+    const mapSelectCategoryValue = selectCategoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
     return {
-        annotation: categoryConfig?.annotation,
-        enableChartView: categoryConfig?.enableChartView,
+        annotation: selectCategoryConfig?.annotation,
+        enableChartView: selectCategoryConfig?.enableChartView,
         isDisabled: false,
-        key: category.key,
-        label: getCategoryLabel(category.key, categoryConfig),
-        values: categoryValueViews.map(mapSelectCategoryValue),
+        key: selectCategory.key,
+        label: getCategoryLabel(selectCategory.key, selectCategoryConfig),
+        values: selectCategoryValueViews.map(mapSelectCategoryValue),
     };
 }
 /**
@@ -52,7 +58,11 @@ export function buildCategoryViews(categories, categoryConfigs, filterState) {
     const views = acceptListCategories.map((category) => {
         // Get the set of selected values for this category, if any.
         const categorySelectedFilter = getCategorySelectedFilter(category.key, filterState);
-        // Build view models for each category value in this category and sort alpha.
+        // Build view model for range categories.
+        if (isRangeCategory(category)) {
+            return buildRangeCategoryView(category, categoryConfigs, categorySelectedFilter);
+        }
+        // Build view model for single or multiselect categories.
         const categoryValueViews = category.values.map((categoryValue) => buildCategoryValueView(categoryValue, categorySelectedFilter));
         categoryValueViews.sort(sortCategoryValueViews);
         // Build category view model.
@@ -68,9 +78,10 @@ export function buildCategoryViews(categories, categoryConfigs, filterState) {
  * @param categoryKey - Key of category that has been de/selected.
  * @param selectedValue - Key of category value that has been de/selected
  * @param selected - True if value is selected, false if de-selected.
+ * @param viewKind - View kind.
  * @returns New filter state generated from the current set of selected values and the newly selected value.
  */
-export function buildNextFilterState(filterState, categoryKey, selectedValue, selected) {
+export function buildNextFilterState(filterState, categoryKey, selectedValue, selected, viewKind) {
     // Check if the selected category already has selected values.
     const categorySelectedFilter = getCategorySelectedFilter(categoryKey, filterState);
     // Create a copy of the current filter state. Remove the selected filter for the selected category, if any.
@@ -80,13 +91,14 @@ export function buildNextFilterState(filterState, categoryKey, selectedValue, se
         categoryKey,
         value: categorySelectedFilter ? [...categorySelectedFilter.value] : [],
     };
-    // Handle case where category value is selected.
-    if (selected) {
-        nextCategorySelectedFilter.value.push(selectedValue);
+    // Build next filter state for category.
+    if (viewKind === VIEW_KIND.RANGE) {
+        // Handle range category.
+        buildNextRangeFilterState(nextCategorySelectedFilter, selectedValue, selected);
     }
-    // Otherwise, category value has been de-selected; remove the selected value from the selected set of values.
     else {
-        nextCategorySelectedFilter.value = nextCategorySelectedFilter.value.filter((value) => value !== selectedValue);
+        // Handle select category.
+        buildNextSelectFilterState(nextCategorySelectedFilter, selectedValue, selected);
     }
     // Add the new selected filter for this category to the set of selected filters, if there are selected values for it.
     if (nextCategorySelectedFilter.value.length) {
@@ -123,15 +135,6 @@ function getCategoryLabel(key, categoryConfig) {
 export function getSelectCategoryValue(selectCategoryValue) {
     return selectCategoryValue;
 }
-/**
- * Returns the category config for the given category config key.
- * @param key - Category config key.
- * @param categoryConfigs - Category configs.
- * @returns category config.
- */
-function findCategoryConfig(key, categoryConfigs) {
-    return categoryConfigs.find((categoryConfig) => categoryConfig.key === key);
-}
 /**
  * Determine if given category value is selected.
  * @param categoryValueKey - The key of the category value to check if selected in the filter state.

package/lib/providers/exploreState/entities.d.ts

@@ -1,7 +1,9 @@
 import { ColumnSort, GroupingState, RowSelectionState, VisibilityState } from "@tanstack/react-table";
-import { CategoryValueKey, SelectCategory, SelectCategoryView, SelectedFilter } from "../../common/entities";
+import { CategoryConfig } from "../../common/categories/config/types";
+import { CategoryView } from "../../common/categories/views/types";
+import { CategoryValueKey, SelectCategory, SelectedFilter } from "../../common/entities";
 import { RowPreviewState } from "../../components/Table/features/RowPreview/entities";
-import { CategoryConfig, CategoryGroup, CategoryGroupConfig, EntityPath, SavedFilter } from "../../config/entities";
+import { CategoryGroup, CategoryGroupConfig, EntityPath, SavedFilter } from "../../config/entities";
 export interface EntityPageState {
     categoryGroupConfigKey: CategoryGroupConfigKey;
     columnVisibility: VisibilityState;
@@ -17,7 +19,7 @@ export interface EntityPageStateMapper {
 export interface EntityState {
     categoryConfigs?: CategoryConfig[];
     categoryGroups?: CategoryGroup[];
-    categoryViews: SelectCategoryView[];
+    categoryViews: CategoryView[];
     filterState: SelectedFilter[];
     savedFilterByCategoryValueKey?: SavedFilterByCategoryValueKey;
     savedFilterState: SelectedFilter[];

package/lib/providers/exploreState/payloads/entities.d.ts

@@ -1,5 +1,7 @@
 import { ColumnSort, GroupingState, RowSelectionState } from "@tanstack/react-table";
-import { CategoryKey, CategoryValueKey, PaginationDirectionType, SelectCategory, SelectedFilter } from "../../../common/entities";
+import { Category } from "../../../common/categories/models/types";
+import { VIEW_KIND } from "../../../common/categories/views/types";
+import { CategoryKey, CategoryValueKey, PaginationDirectionType, SelectedFilter } from "../../../common/entities";
 import { RowPreviewState } from "../../../components/Table/features/RowPreview/entities";
 import { ListItems, PaginationResponse } from "../../exploreState";
 import { ListItem } from "../entities";
@@ -10,6 +12,7 @@ export interface ApplySavedFilterPayload {
     categoryKey: CategoryKey;
     selected: boolean;
     selectedValue: CategoryValueKey;
+    viewKind?: VIEW_KIND;
 }
 /**
  * Paginate table payload.
@@ -29,7 +32,7 @@ export interface ProcessExploreResponsePayload {
     listItems: ListItems;
     loading: boolean;
     paginationResponse: PaginationResponse;
-    selectCategories?: SelectCategory[];
+    selectCategories?: Category[];
 }
 /**
  * Reset explore response payload.
@@ -57,6 +60,7 @@ export interface UpdateFilterPayload {
     categoryKey: CategoryKey;
     selected: boolean;
     selectedValue: CategoryValueKey;
+    viewKind?: VIEW_KIND;
 }
 /**
  * Update row preview payload.

package/lib/providers/exploreState.d.ts

@@ -1,6 +1,7 @@
 import React, { Dispatch, ReactNode } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
-import { SelectCategoryView, SelectedFilter } from "../common/entities";
+import { CategoryView } from "../common/categories/views/types";
+import { SelectedFilter } from "../common/entities";
 import { RowPreviewState } from "../components/Table/features/RowPreview/entities";
 import { CategoryGroup, SiteConfig } from "../config/entities";
 import { UpdateGroupingAction } from "./exploreState/actions/updateGrouping/types";
@@ -21,7 +22,7 @@ export interface ExploreContext {
 export type ExploreState = {
     catalogState: CatalogState;
     categoryGroups?: CategoryGroup[];
-    categoryViews: SelectCategoryView[];
+    categoryViews: CategoryView[];
     entityPageState: EntityPageStateMapper;
     entityStateByCategoryGroupConfigKey: EntityStateByCategoryGroupConfigKey;
     featureFlagState: FeatureFlagState;

package/lib/providers/exploreState.js

@@ -277,7 +277,7 @@ function exploreReducer(state, action, exploreContext) {
          * Update filter
          **/
         case ExploreActionKind.UpdateFilter: {
-            const filterState = buildNextFilterState(state.filterState, payload.categoryKey, payload.selectedValue, payload.selected);
+            const filterState = buildNextFilterState(state.filterState, payload.categoryKey, payload.selectedValue, payload.selected, payload.viewKind);
             const rowPreview = closeRowPreview(state.rowPreview);
             const rowSelection = {};
             const savedFilterState = []; // Clear saved filter state.

package/lib/tests/utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Retrieves a button by its name.
+ * @param name - The name of the button.
+ * @returns The button element.
+ */
+export declare function getButton<T extends HTMLElement = HTMLElement>(name: string | RegExp): T;
+/**
+ * Retrieves an input element by its label text.
+ * @param text - The label text of the input element.
+ * @returns The input element.
+ */
+export declare function getLabelText<T extends HTMLElement = HTMLElement>(text: string): T;
+/**
+ * Returns regex that matches the start of the given text.
+ * @param text - Text to match.
+ * @returns RegExp.
+ */
+export declare function getStartsWithRegex(text: string): RegExp;
+/**
+ * Retrieves an element by its text content.
+ * @param text - The text content of the element.
+ * @returns The element.
+ */
+export declare function getText<T extends HTMLElement = HTMLElement>(text: string | RegExp): T;

package/lib/tests/utils.js

@@ -0,0 +1,34 @@
+import { screen } from "@testing-library/react";
+import { escapeRegExp } from "../common/utils";
+/**
+ * Retrieves a button by its name.
+ * @param name - The name of the button.
+ * @returns The button element.
+ */
+export function getButton(name) {
+    return screen.getByRole("button", { name });
+}
+/**
+ * Retrieves an input element by its label text.
+ * @param text - The label text of the input element.
+ * @returns The input element.
+ */
+export function getLabelText(text) {
+    return screen.getByLabelText(text);
+}
+/**
+ * Returns regex that matches the start of the given text.
+ * @param text - Text to match.
+ * @returns RegExp.
+ */
+export function getStartsWithRegex(text) {
+    return new RegExp(`^${escapeRegExp(text)}`);
+}
+/**
+ * Retrieves an element by its text content.
+ * @param text - The text content of the element.
+ * @returns The element.
+ */
+export function getText(text) {
+    return screen.getByText(text);
+}

package/lib/theme/common/components.js

@@ -388,6 +388,14 @@ export const MuiChip = (theme) => {
             },
             label: {
                 ...theme.typography[TEXT_BODY_SMALL_400],
+                variants: [
+                    {
+                        props: { variant: "status" },
+                        style: {
+                            ...theme.typography[TEXT_BODY_SMALL_500],
+                        },
+                    },
+                ],
             },
         },
         variants: [
@@ -467,13 +475,18 @@ export const MuiChip = (theme) => {
             {
                 props: { variant: "status" },
                 style: {
-                    ...theme.typography[TEXT_BODY_SMALL_500],
                     boxShadow: `0 0 0 2px ${PALETTE.COMMON_WHITE}`,
                     height: 20,
                     maxWidth: "fit-content",
                     minWidth: 0,
                 },
             },
+            {
+                props: { color: "default", variant: "status" },
+                style: {
+                    color: PALETTE.INK_LIGHT,
+                },
+            },
         ],
     };
 };
@@ -858,6 +871,11 @@ export const MuiLink = {
             textDecorationSkipInk: "none",
             textUnderlinePosition: "from-font",
         },
+        underlineNone: {
+            "&:hover": {
+                textDecoration: "none",
+            },
+        },
     },
 };
 /**