@databiosphere/findable-ui 31.0.0 → 32.0.1

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "31.0.0"
+  ".": "32.0.1"
 }

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [32.0.1](https://github.com/DataBiosphere/findable-ui/compare/v32.0.0...v32.0.1) (2025-05-20)
+
+
+### Bug Fixes
+
+* prevent table column def and data mismatch for client side filtering ([#484](https://github.com/DataBiosphere/findable-ui/issues/484)) ([#485](https://github.com/DataBiosphere/findable-ui/issues/485)) ([04f0ec8](https://github.com/DataBiosphere/findable-ui/commit/04f0ec8d1ac13e91c8f97d5becb58a0662f54939))
+* update explorestate provider updateentityfilters action ([#486](https://github.com/DataBiosphere/findable-ui/issues/486)) ([ae16e1c](https://github.com/DataBiosphere/findable-ui/commit/ae16e1c810d629e533f287e229d783315fa37e29))
+* update explorestate provider updateentityfilters action: update filters when tabvalue matches entitylisttype ([#486](https://github.com/DataBiosphere/findable-ui/issues/486)) ([#487](https://github.com/DataBiosphere/findable-ui/issues/487)) ([ae16e1c](https://github.com/DataBiosphere/findable-ui/commit/ae16e1c810d629e533f287e229d783315fa37e29))
+
+## [32.0.0](https://github.com/DataBiosphere/findable-ui/compare/v31.0.0...v32.0.0) (2025-05-19)
+
+
+### ⚠ BREAKING CHANGES
+
+* ove rehype-raw, rehype-react, rehype-sanitize, remark-gfm, remark-rehype from dev-dependency to peer ([#481](https://github.com/DataBiosphere/findable-ui/issues/481)) (#482)
+
+### Bug Fixes
+
+* ove rehype-raw, rehype-react, rehype-sanitize, remark-gfm, remark-rehype from dev-dependency to peer ([#481](https://github.com/DataBiosphere/findable-ui/issues/481)) ([#482](https://github.com/DataBiosphere/findable-ui/issues/482)) ([a6dfd0f](https://github.com/DataBiosphere/findable-ui/commit/a6dfd0fa5ac9fe5e8da2bf8e83ae06868f962f95))
+
 ## [31.0.0](https://github.com/DataBiosphere/findable-ui/compare/v30.0.0...v31.0.0) (2025-05-15)
 
 

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.d.ts

@@ -1,5 +1,5 @@
 import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
 export declare const Layout: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & LayoutSpacing, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.d.ts

@@ -1,9 +1,9 @@
 import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
 export declare const Layout: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & LayoutSpacing, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LayoutScroller: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.d.ts

@@ -1,5 +1,5 @@
 import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
 export declare const Layout: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & LayoutSpacing, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/DataDictionary/components/Table/components/BasicCell/basicCell.d.ts

@@ -1,3 +1,3 @@
 import { CellContext, RowData } from "@tanstack/react-table";
-import React, { ReactNode } from "react";
-export declare const BasicCell: <T extends RowData, TValue extends ReactNode = React.ReactNode>({ getValue, }: CellContext<T, TValue>) => JSX.Element | null;
+import { ReactNode } from "react";
+export declare const BasicCell: <T extends RowData, TValue extends ReactNode = ReactNode>({ getValue, }: CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/DataDictionary/dataDictionary.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const grid: import("@emotion/react").SerializedStyles;
 export declare const View: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Error/error.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const ErrorLayout: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Error: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/formStep.styles.d.ts

@@ -1,6 +1,6 @@
 export declare const SectionContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.styles.d.ts

@@ -1,16 +1,16 @@
 export declare const Section: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SectionContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SectionStatus: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SectionActions: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/manifestDownloadEntity.styles.d.ts

@@ -1,6 +1,6 @@
 export declare const SectionTitle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
 export declare const TableContainer: import("@emotion/styled").StyledComponent<import("@mui/material").TableContainerOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | 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<HTMLDivElement> | null | undefined;

package/lib/components/Filter/components/FilterRange/filterRange.styles.d.ts

@@ -1,4 +1,4 @@
 export declare const StyledForm: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;

package/lib/components/Filter/components/Filters/filters.styles.d.ts

@@ -4,10 +4,10 @@ interface Props {
 }
 export declare const Filters: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CategoryViewsLabel: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/lib/components/Filter/components/VariableSizeList/VariableSizeList.d.ts

@@ -14,4 +14,4 @@ export interface VariableSizeListProps {
     overscanCount?: ListProps["overscanCount"];
     width?: ListProps["width"];
 }
-export declare const VariableSizeList: ({ categoryKey, categorySection, height: initHeight, isFilterDrawer, itemSize, onFilter, overscanCount, matchedItems, width, }: VariableSizeListProps) => JSX.Element;
+export declare const VariableSizeList: ({ categoryKey, categorySection, height: initHeight, isFilterDrawer, itemSize, matchedItems, onFilter, overscanCount, width, }: VariableSizeListProps) => JSX.Element;

package/lib/components/Filter/components/VariableSizeList/VariableSizeList.js

@@ -14,7 +14,7 @@ function renderListItem(props) {
     const { categoryKey, categorySection, matchedItems, onFilter, onUpdateItemSizeByItemKey, } = data;
     return (React.createElement(VariableSizeListItem, { categorySection: categorySection, categoryKey: categoryKey, matchedItem: matchedItems[index], onFilter: onFilter, onUpdateItemSizeByItemKey: onUpdateItemSizeByItemKey, style: style }));
 }
-export const VariableSizeList = ({ categoryKey, categorySection, height: initHeight = MAX_LIST_HEIGHT_PX, isFilterDrawer, itemSize = LIST_ITEM_HEIGHT, onFilter, overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2, matchedItems, width = "100%", }) => {
+export const VariableSizeList = ({ categoryKey, categorySection, height: initHeight = MAX_LIST_HEIGHT_PX, isFilterDrawer, itemSize = LIST_ITEM_HEIGHT, matchedItems, onFilter, overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2, width = "100%", }) => {
     const { height: windowHeight } = useWindowResize();
     const [height, setHeight] = useState(initHeight);
     const itemSizeByItemKeyRef = useRef(new Map());

package/lib/components/Index/components/EntitiesView/components/ChartView/chartView.styles.d.ts

@@ -2,7 +2,7 @@ export declare const StyledGrid: import("@emotion/styled").StyledComponent<impor
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
 } & import("@mui/system").SystemProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | 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<HTMLDivElement> | null | undefined;
-}, ("fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "p" | "color" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign") | "sx" | keyof import("@mui/material").GridBaseProps> & {
+}, ("p" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "color" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign") | "sx" | keyof import("@mui/material").GridBaseProps> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const StyledGridPaperSection: import("@emotion/styled").StyledComponent<{

package/lib/components/Index/index.js

@@ -11,7 +11,7 @@ import { useTable } from "./table/hook";
 export const Index = ({ categoryFilters, className, entityListType, entityName, ListHero, loading, SideBarButton, SubTitleHero, Summaries, Tabs, title, }) => {
     const { onChange, viewMode, viewStatus } = useEntitiesView();
     const { dimensions } = useLayoutDimensions();
-    const { table } = useTable();
+    const { table } = useTable({ entityListType });
     return (React.createElement(IndexLayout, { className: className, marginTop: dimensions.header.height },
         React.createElement(Hero, { SideBarButton: SideBarButton, Summaries: Summaries, title: title }),
         SubTitleHero,

package/lib/components/Index/index.styles.d.ts

@@ -3,6 +3,6 @@ interface Props {
 }
 export declare const Index: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/lib/components/Index/table/hook.d.ts

@@ -1,3 +1,3 @@
 import { RowData } from "@tanstack/react-table";
-import { UseTable } from "./types";
-export declare const useTable: <T extends RowData>() => UseTable<T>;
+import { UseTable, UseTableProps } from "./types";
+export declare const useTable: <T extends RowData>({ entityListType, }: UseTableProps) => UseTable<T>;

package/lib/components/Index/table/hook.js

@@ -16,8 +16,7 @@ import { ROW_PREVIEW } from "../../Table/features/RowPreview/constants";
 import { buildBaseColumnDef } from "../../TableCreator/common/utils";
 import { useTableOptions } from "../../TableCreator/options/hook";
 import { createCell } from "./coreOptions/columns/cellFactory";
-// eslint-disable-next-line sonarjs/cognitive-complexity -- TODO fix component length / complexity
-export const useTable = () => {
+export const useTable = ({ entityListType, }) => {
     const { entityConfig } = useConfig();
     const exploreMode = useExploreMode();
     const { exploreDispatch, exploreState } = useExploreState();
@@ -141,6 +140,8 @@ export const useTable = () => {
     }, [clientFiltering, filterState, table]);
     // Process explore response - client-side filtering only.
     useEffect(() => {
+        if (entityListType !== tabValue)
+            return;
         if (!listItems || listItems.length === 0)
             return;
         if (clientFiltering) {
@@ -162,9 +163,11 @@ export const useTable = () => {
         allColumns,
         clientFiltering,
         columnFilters,
+        entityListType,
         exploreDispatch,
         listItems,
         rows,
+        tabValue,
     ]);
     return { table };
 };

package/lib/components/Index/table/types.d.ts

@@ -2,3 +2,6 @@ import { RowData, Table } from "@tanstack/react-table";
 export interface UseTable<T extends RowData> {
     table: Table<T>;
 }
+export interface UseTableProps {
+    entityListType: string;
+}

package/lib/components/Layout/components/ContentLayout/contentLayout.styles.d.ts

@@ -21,7 +21,7 @@ export declare const ContentGrid: import("@emotion/styled").StyledComponent<{
 } & GridProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const OutlineGrid: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & GridProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Positioner: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.d.ts

@@ -13,7 +13,7 @@ export declare const UserSummary: import("@emotion/styled").StyledComponent<impo
 }, {}, {}>;
 export declare const UserNames: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | 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<HTMLSpanElement> | null | undefined;
-}, "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "p" | "style" | "className" | "classes" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "p" | "style" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "className" | "classes" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const StyledAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.styles.d.ts

@@ -3,6 +3,6 @@ interface Props {
 }
 export declare const Navigation: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/lib/components/Layout/components/Main/main.styles.d.ts

@@ -3,11 +3,11 @@ interface Props {
 }
 export declare const Main: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const MainWithOffset: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;

package/lib/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.d.ts

@@ -3,6 +3,6 @@ interface Props {
 }
 export declare const SidebarPositioner: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/lib/components/Login/components/Section/components/Consent/consent.styles.d.ts

@@ -2,6 +2,6 @@ export declare const StyledGrid: import("@emotion/styled").StyledComponent<impor
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
 } & import("@mui/system").SystemProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | 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<HTMLDivElement> | null | undefined;
-}, ("fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "p" | "color" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign") | "sx" | keyof import("@mui/material").GridBaseProps> & {
+}, ("p" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "color" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign") | "sx" | keyof import("@mui/material").GridBaseProps> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/MarkdownRenderer/components/Table/table.styles.d.ts

@@ -1,4 +1,4 @@
 export declare const StyledTable: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;

package/lib/components/MarkdownRenderer/constants.d.ts

@@ -1,2 +1,2 @@
-import { Components } from "rehype-react";
-export declare const COMPONENTS: Partial<Components>;
+import { MarkdownRendererComponents } from "./types";
+export declare const COMPONENTS: MarkdownRendererComponents;

package/lib/components/MarkdownRenderer/markdownRenderer.d.ts

@@ -1,2 +1,14 @@
 import { MarkdownRendererProps } from "./types";
-export declare const MarkdownRenderer: ({ className, components, value, }: MarkdownRendererProps) => JSX.Element;
+/**
+ * Markdown Rendering - Pipeline Version Constraints
+ *
+ * next-mdx-remote and @next/mdx currently embed MDX v3. MDX v3 is compiled
+ * for the "Unified 10" tool-chain and therefore only functions with unified
+ * 10.x, remark-parse 10.x, remark-rehype 10.x and, critically, remark-gfm 3.x.
+ *
+ * Because remark-gfm 3.x is required, migrating to Unified 11 is not yet possible.
+ *
+ * rehype plug-ins are chosen from versions that still target Unified 10:
+ * rehype-raw 7.x, rehype-sanitize 5.x and rehype-react 7.x.
+ */
+export declare const MarkdownRenderer: ({ className, components: componentOptions, value, }: MarkdownRendererProps) => JSX.Element;

package/lib/components/MarkdownRenderer/markdownRenderer.js

@@ -1,9 +1,8 @@
 import { Typography } from "@mui/material";
-import React, { useEffect, useState } from "react";
-import * as production from "react/jsx-runtime";
+import React, { Fragment, createElement, useEffect, useState } from "react";
 import rehypeRaw from "rehype-raw";
 import rehypeReact from "rehype-react";
-import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import rehypeSanitize from "rehype-sanitize";
 import remarkGfm from "remark-gfm";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
@@ -11,10 +10,22 @@ import { unified } from "unified";
 import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { COMPONENTS } from "./constants";
 import { StyledContainer } from "./markdownRenderer.styles";
-export const MarkdownRenderer = ({ className, components = COMPONENTS, value, }) => {
+/**
+ * Markdown Rendering - Pipeline Version Constraints
+ *
+ * next-mdx-remote and @next/mdx currently embed MDX v3. MDX v3 is compiled
+ * for the "Unified 10" tool-chain and therefore only functions with unified
+ * 10.x, remark-parse 10.x, remark-rehype 10.x and, critically, remark-gfm 3.x.
+ *
+ * Because remark-gfm 3.x is required, migrating to Unified 11 is not yet possible.
+ *
+ * rehype plug-ins are chosen from versions that still target Unified 10:
+ * rehype-raw 7.x, rehype-sanitize 5.x and rehype-react 7.x.
+ */
+export const MarkdownRenderer = ({ className, components: componentOptions = COMPONENTS, value, }) => {
     const [element, setElement] = useState(null);
     const [error, setError] = useState(null);
-    const [componentOptions] = useState(components);
+    const [components] = useState(componentOptions);
     useEffect(() => {
         let cancelled = false;
         setError(null);
@@ -23,13 +34,13 @@ export const MarkdownRenderer = ({ className, components = COMPONENTS, value, })
             .use(remarkGfm)
             .use(remarkRehype, { allowDangerousHtml: true })
             .use(rehypeRaw)
-            .use(rehypeSanitize, defaultSchema)
-            .use(rehypeReact, { ...production, components: componentOptions });
+            .use(rehypeSanitize)
+            .use(rehypeReact, { Fragment, components, createElement });
         processor
             .process(value)
-            .then((file) => {
+            .then(({ result }) => {
             if (!cancelled)
-                setElement(file?.result);
+                setElement(result);
         })
             .catch((err) => {
             if (!cancelled)
@@ -38,7 +49,7 @@ export const MarkdownRenderer = ({ className, components = COMPONENTS, value, })
         return () => {
             cancelled = true;
         };
-    }, [componentOptions, value]);
+    }, [components, value]);
     if (error)
         return (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.ERROR, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400 }, error));
     return React.createElement(StyledContainer, { className: className }, element);

package/lib/components/MarkdownRenderer/markdownRenderer.styles.d.ts

@@ -1,4 +1,4 @@
 export declare const StyledContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/MarkdownRenderer/types.d.ts

@@ -1,6 +1,7 @@
-import { Components } from "rehype-react";
+import { ComponentType } from "react";
 import { BaseComponentProps } from "../types";
+export type MarkdownRendererComponents = Record<string, ComponentType<any>>;
 export interface MarkdownRendererProps extends BaseComponentProps {
-    components?: Partial<Components>;
+    components?: MarkdownRendererComponents;
     value: string;
 }

package/lib/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/completedIcon.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledSvgIcon: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | 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<SVGSVGElement> | null | undefined;
-}, "fontSize" | "style" | "className" | "classes" | "color" | "children" | "shapeRendering" | "sx" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & {
+}, "style" | "fontSize" | "className" | "classes" | "color" | "children" | "shapeRendering" | "sx" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/label.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | 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<HTMLSpanElement> | null | undefined;
-}, "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "p" | "style" | "className" | "classes" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "p" | "style" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "className" | "classes" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Support/components/ViewSupport/viewSupport.styles.d.ts

@@ -1,4 +1,4 @@
 export declare const Fab: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;

package/lib/components/common/AnchorLink/anchorLink.styles.d.ts

@@ -8,9 +8,9 @@ export declare const AnchorLink: import("@emotion/styled").StyledComponent<Omit<
     prefetch?: boolean | null;
     locale?: string | false;
     legacyBehavior?: boolean;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLAnchorElement>;
-    onTouchStart?: import("react").TouchEventHandler<HTMLAnchorElement>;
-    onClick?: import("react").MouseEventHandler<HTMLAnchorElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLAnchorElement>;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
 }> & {
     href: string | import("url").UrlObject;
     as?: string | import("url").UrlObject;
@@ -21,11 +21,11 @@ export declare const AnchorLink: import("@emotion/styled").StyledComponent<Omit<
     prefetch?: boolean | null;
     locale?: string | false;
     legacyBehavior?: boolean;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLAnchorElement>;
-    onTouchStart?: import("react").TouchEventHandler<HTMLAnchorElement>;
-    onClick?: import("react").MouseEventHandler<HTMLAnchorElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLAnchorElement>;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
 } & {
-    children?: import("react").ReactNode;
+    children?: React.ReactNode;
 } & import("react").RefAttributes<HTMLAnchorElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/common/Card/components/CardSecondaryTitle/cardSecondaryTitle.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const CardSecondaryTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | 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<HTMLSpanElement> | null | undefined;
-}, "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "p" | "style" | "className" | "classes" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "p" | "style" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "className" | "classes" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/common/Code/code.styles.d.ts

@@ -3,6 +3,6 @@ interface Props {
 }
 export declare const CodeBlock: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLPreElement>, HTMLPreElement>, {}>;
 export {};

package/lib/components/common/Dot/dot.styles.d.ts

@@ -1,4 +1,4 @@
 export declare const DotSeparator: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/lib/components/common/EllipsisContent/ellipsisContent.styles.d.ts

@@ -4,7 +4,7 @@ interface Props {
 }
 export declare const Content: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Button: import("@emotion/styled").StyledComponent<{
     [x: string]: any;

package/lib/components/common/Progress/components/CircularProgress/circularProgress.d.ts

@@ -4,4 +4,4 @@ export interface CircularProgressProps extends MCircularProgressProps {
     className?: string;
     Track?: ElementType<CircularProgressProps>;
 }
-export declare const CircularProgress: ({ className, value, Track, ...props }: CircularProgressProps) => JSX.Element;
+export declare const CircularProgress: ({ className, Track, value, ...props }: CircularProgressProps) => JSX.Element;

package/lib/components/common/Progress/components/CircularProgress/circularProgress.js

@@ -2,7 +2,7 @@ import { CircularProgress as MCircularProgress, } from "@mui/material";
 import React from "react";
 import { ProgressPositioner } from "./circularProgress.styles";
 import { CircularProgressTrack } from "./components/CircularProgressTrack/circularProgressTrack";
-export const CircularProgress = ({ className, value, Track = CircularProgressTrack, ...props /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */ }) => {
+export const CircularProgress = ({ className, Track = CircularProgressTrack, value, ...props /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */ }) => {
     return (React.createElement(ProgressPositioner, { className: className },
         React.createElement(Track, { ...props }),
         React.createElement(MCircularProgress, { value: value, ...props })));

package/lib/components/common/Stack/stack.d.ts

@@ -15,4 +15,4 @@ export interface StackProps {
     justifyContent?: MStackProps["justifyContent"];
     spacing?: number;
 }
-export declare const Stack: ({ children, className, direction, divider, justifyContent, alignItems, gap, spacing, }: StackProps) => JSX.Element;
+export declare const Stack: ({ alignItems, children, className, direction, divider, gap, justifyContent, spacing, }: StackProps) => JSX.Element;

package/lib/components/common/Stack/stack.js

@@ -1,5 +1,5 @@
 import { Stack as MStack } from "@mui/material";
 import React from "react";
-export const Stack = ({ children, className, direction = "column", divider = undefined, justifyContent, alignItems, gap = 0, spacing = 0, }) => {
+export const Stack = ({ alignItems, children, className, direction = "column", divider = undefined, gap = 0, justifyContent, spacing = 0, }) => {
     return (React.createElement(MStack, { className: className, direction: direction, divider: divider, justifyContent: justifyContent, alignItems: alignItems, gap: gap, spacing: spacing }, children));
 };

package/lib/components/common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook.d.ts

@@ -1,2 +1,2 @@
 import { ToggleButtonGroupProps } from "@mui/material";
-export declare const useToggleButtonGroup: <TValue extends unknown>(initialValue?: TValue | null) => ToggleButtonGroupProps;
+export declare const useToggleButtonGroup: <TValue extends ToggleButtonGroupProps["value"]>(initialValue?: TValue | null) => ToggleButtonGroupProps;

package/lib/providers/exploreState.js

@@ -262,6 +262,13 @@ function exploreReducer(state, action, exploreContext) {
                 ...state,
                 entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(state, { grouping, rowPreview, rowSelection, sorting }, categoryGroupConfigKey),
                 rowPreview: closeRowPreview(state.rowPreview),
+                ...(payload.entityListType === state.tabValue
+                    ? {
+                        filterCount: getFilterCount(filterState),
+                        filterState,
+                        paginationState: { ...resetPage(state.paginationState), rows: 0 },
+                    }
+                    : {}),
             };
         }
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "31.0.0",
+  "version": "32.0.1",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -62,11 +62,6 @@
     "jest-fetch-mock": "^3.0.3",
     "prettier": "^2.8.3",
     "prettier-plugin-organize-imports": "^3.2.2",
-    "rehype-raw": "^7.0.0",
-    "rehype-react": "^8.0.0",
-    "rehype-sanitize": "^6.0.0",
-    "remark-gfm": "^4.0.1",
-    "remark-rehype": "^11.1.2",
     "storybook": "^8.6.4",
     "ts-jest": "^29.2.5",
     "typescript": "^5.5.4"
@@ -90,6 +85,13 @@
     "react-gtm-module": "2.0.11",
     "react-idle-timer": "^5.7.2",
     "react-window": "1.8.9",
+    "rehype-raw": "^7.0.0",
+    "rehype-react": "^7.2.0",
+    "rehype-sanitize": "^5.0.1",
+    "remark-gfm": "^3.0.1",
+    "remark-parse": "^10.0.2",
+    "remark-rehype": "^10.1.0",
+    "unified": "^10.1.2",
     "uuid": "8.3.2",
     "yup": "^1.6.1"
   },

package/src/components/Filter/components/VariableSizeList/VariableSizeList.tsx

@@ -63,9 +63,9 @@ export const VariableSizeList = ({
   height: initHeight = MAX_LIST_HEIGHT_PX,
   isFilterDrawer,
   itemSize = LIST_ITEM_HEIGHT,
+  matchedItems,
   onFilter,
   overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2,
-  matchedItems,
   width = "100%",
 }: VariableSizeListProps): JSX.Element => {
   const { height: windowHeight } = useWindowResize();

package/src/components/Index/index.tsx

@@ -25,7 +25,7 @@ export const Index = ({
 }: IndexProps): JSX.Element => {
   const { onChange, viewMode, viewStatus } = useEntitiesView();
   const { dimensions } = useLayoutDimensions();
-  const { table } = useTable();
+  const { table } = useTable({ entityListType });
   return (
     <IndexLayout className={className} marginTop={dimensions.header.height}>
       <Hero SideBarButton={SideBarButton} Summaries={Summaries} title={title} />

package/src/components/Index/table/hook.ts

@@ -40,10 +40,12 @@ import { RowPreviewState } from "../../Table/features/RowPreview/entities";
 import { buildBaseColumnDef } from "../../TableCreator/common/utils";
 import { useTableOptions } from "../../TableCreator/options/hook";
 import { createCell } from "./coreOptions/columns/cellFactory";
-import { UseTable } from "./types";
+import { UseTable, UseTableProps } from "./types";
 
-// eslint-disable-next-line sonarjs/cognitive-complexity -- TODO fix component length / complexity
-export const useTable = <T extends RowData>(): UseTable<T> => {
+export const useTable = <T extends RowData>({
+  entityListType,
+}: // eslint-disable-next-line sonarjs/cognitive-complexity -- TODO fix complexity
+UseTableProps): UseTable<T> => {
   const { entityConfig } = useConfig();
   const exploreMode = useExploreMode();
   const { exploreDispatch, exploreState } = useExploreState();
@@ -209,6 +211,7 @@ export const useTable = <T extends RowData>(): UseTable<T> => {
 
   // Process explore response - client-side filtering only.
   useEffect(() => {
+    if (entityListType !== tabValue) return;
     if (!listItems || listItems.length === 0) return;
     if (clientFiltering) {
       exploreDispatch({
@@ -229,9 +232,11 @@ export const useTable = <T extends RowData>(): UseTable<T> => {
     allColumns,
     clientFiltering,
     columnFilters,
+    entityListType,
     exploreDispatch,
     listItems,
     rows,
+    tabValue,
   ]);
 
   return { table };

package/src/components/Index/table/types.ts

@@ -3,3 +3,7 @@ import { RowData, Table } from "@tanstack/react-table";
 export interface UseTable<T extends RowData> {
   table: Table<T>;
 }
+
+export interface UseTableProps {
+  entityListType: string;
+}

package/src/components/MarkdownRenderer/constants.ts

@@ -1,8 +1,8 @@
-import { Components } from "rehype-react";
 import { Anchor } from "./components/Anchor/anchor";
 import { Table } from "./components/Table/table";
+import { MarkdownRendererComponents } from "./types";
 
-export const COMPONENTS: Partial<Components> = {
+export const COMPONENTS: MarkdownRendererComponents = {
   a: Anchor,
   table: Table,
 };

package/src/components/MarkdownRenderer/markdownRenderer.tsx

@@ -1,9 +1,8 @@
 import { Typography } from "@mui/material";
-import React, { useEffect, useState } from "react";
-import * as production from "react/jsx-runtime";
+import React, { Fragment, createElement, useEffect, useState } from "react";
 import rehypeRaw from "rehype-raw";
-import rehypeReact, { Components } from "rehype-react";
-import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import rehypeReact from "rehype-react";
+import rehypeSanitize from "rehype-sanitize";
 import remarkGfm from "remark-gfm";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
@@ -11,16 +10,29 @@ import { unified } from "unified";
 import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { COMPONENTS } from "./constants";
 import { StyledContainer } from "./markdownRenderer.styles";
-import { MarkdownRendererProps } from "./types";
+import { MarkdownRendererComponents, MarkdownRendererProps } from "./types";
+
+/**
+ * Markdown Rendering - Pipeline Version Constraints
+ *
+ * next-mdx-remote and @next/mdx currently embed MDX v3. MDX v3 is compiled
+ * for the "Unified 10" tool-chain and therefore only functions with unified
+ * 10.x, remark-parse 10.x, remark-rehype 10.x and, critically, remark-gfm 3.x.
+ *
+ * Because remark-gfm 3.x is required, migrating to Unified 11 is not yet possible.
+ *
+ * rehype plug-ins are chosen from versions that still target Unified 10:
+ * rehype-raw 7.x, rehype-sanitize 5.x and rehype-react 7.x.
+ */
 
 export const MarkdownRenderer = ({
   className,
-  components = COMPONENTS,
+  components: componentOptions = COMPONENTS,
   value,
 }: MarkdownRendererProps): JSX.Element => {
   const [element, setElement] = useState<JSX.Element | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [componentOptions] = useState<Partial<Components>>(components);
+  const [components] = useState<MarkdownRendererComponents>(componentOptions);
 
   useEffect(() => {
     let cancelled = false;
@@ -31,13 +43,13 @@ export const MarkdownRenderer = ({
       .use(remarkGfm)
       .use(remarkRehype, { allowDangerousHtml: true })
       .use(rehypeRaw)
-      .use(rehypeSanitize, defaultSchema)
-      .use(rehypeReact, { ...production, components: componentOptions });
+      .use(rehypeSanitize)
+      .use(rehypeReact, { Fragment, components, createElement });
 
     processor
       .process(value)
-      .then((file) => {
-        if (!cancelled) setElement(file?.result);
+      .then(({ result }) => {
+        if (!cancelled) setElement(result);
       })
       .catch((err) => {
         if (!cancelled) setError(err.message);
@@ -46,7 +58,7 @@ export const MarkdownRenderer = ({
     return (): void => {
       cancelled = true;
     };
-  }, [componentOptions, value]);
+  }, [components, value]);
 
   if (error)
     return (

package/src/components/MarkdownRenderer/types.ts

@@ -1,7 +1,10 @@
-import { Components } from "rehype-react";
+import { ComponentType } from "react";
 import { BaseComponentProps } from "../types";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- rehype-react passes arbitrary HTML attributes to components when rendering markdown elements
+export type MarkdownRendererComponents = Record<string, ComponentType<any>>;
+
 export interface MarkdownRendererProps extends BaseComponentProps {
-  components?: Partial<Components>;
+  components?: MarkdownRendererComponents;
   value: string;
 }

package/src/components/common/Progress/components/CircularProgress/circularProgress.tsx

@@ -13,8 +13,8 @@ export interface CircularProgressProps extends MCircularProgressProps {
 
 export const CircularProgress = ({
   className,
-  value,
   Track = CircularProgressTrack,
+  value,
   ...props /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */
 }: CircularProgressProps): JSX.Element => {
   return (

package/src/components/common/Stack/stack.tsx

@@ -19,13 +19,13 @@ export interface StackProps {
 }
 
 export const Stack = ({
+  alignItems,
   children,
   className,
   direction = "column",
   divider = undefined,
-  justifyContent,
-  alignItems,
   gap = 0,
+  justifyContent,
   spacing = 0,
 }: StackProps): JSX.Element => {
   return (

package/src/providers/exploreState.tsx

@@ -620,6 +620,13 @@ function exploreReducer(
           categoryGroupConfigKey
         ),
         rowPreview: closeRowPreview(state.rowPreview),
+        ...(payload.entityListType === state.tabValue
+          ? {
+              filterCount: getFilterCount(filterState),
+              filterState,
+              paginationState: { ...resetPage(state.paginationState), rows: 0 },
+            }
+          : {}),
       };
     }
     /**

package/tests/useRequestManifest.test.ts

@@ -172,9 +172,9 @@ describe("useRequestManifest", () => {
  * @param testObject.formFacet - Form facet.
  */
 function testRequestManifest({
+  expectedMethod = METHOD.PUT,
   expectedParams = undefined,
   expectedUrl = undefined,
-  expectedMethod = METHOD.PUT,
   fileManifestFormat,
   formFacet = FORM_FACET.COMPLETE_SET,
 }: {