@databiosphere/findable-ui 33.0.0 → 34.1.0

package/lib/components/Table/components/TableFeatures/ColumnFilter/types.d.ts

@@ -0,0 +1,7 @@
+import { Button, MenuProps } from "@mui/material";
+import { Column, RowData } from "@tanstack/react-table";
+import { BaseComponentProps } from "../../../../types";
+export interface ColumnFilterProps<T extends RowData> extends BaseComponentProps, Omit<MenuProps, "anchorEl" | "onClose" | "open"> {
+    Button?: typeof Button;
+    column: Column<T>;
+}

package/lib/components/Table/components/TableFeatures/ColumnFilter/types.js

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

package/lib/components/Table/components/TableFeatures/ColumnFilter/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns an updater function for column filter.
+ * @param value - Value.
+ * @returns An updater function that returns the new filter value.
+ */
+export declare function updater(value: unknown): (old: unknown[] | undefined) => unknown[] | undefined;

package/lib/components/Table/components/TableFeatures/ColumnFilter/utils.js

@@ -0,0 +1,23 @@
+/**
+ * Returns an updater function for column filter.
+ * @param value - Value.
+ * @returns An updater function that returns the new filter value.
+ */
+export function updater(value) {
+    return (old) => {
+        // If no old value, return new value.
+        if (!old)
+            return [value];
+        // If value already exists, remove it.
+        if (old.includes(value)) {
+            // Filter out the value.
+            const next = old.filter((v) => v !== value);
+            // If no values remain, return undefined.
+            if (next.length === 0)
+                return undefined;
+            return next;
+        }
+        // Otherwise, add the value.
+        return [...old, value];
+    };
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Sorts Map entries by key.
+ * @param facetedValues - Map of faceted values.
+ * @returns Sorted array of [key, value] entries.
+ */
+export declare function getSortedFacetedValues(facetedValues: Map<unknown, number>): [unknown, number][];

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

@@ -0,0 +1,9 @@
+import { COLLATOR_CASE_INSENSITIVE } from "../../../../common/constants";
+/**
+ * Sorts Map entries by key.
+ * @param facetedValues - Map of faceted values.
+ * @returns Sorted array of [key, value] entries.
+ */
+export function getSortedFacetedValues(facetedValues) {
+    return [...facetedValues].sort((a, b) => COLLATOR_CASE_INSENSITIVE.compare(String(a), String(b)));
+}

package/lib/components/common/ButtonGroup/constants.d.ts

@@ -0,0 +1,2 @@
+import { ButtonGroupProps } from "@mui/material";
+export declare const BUTTON_GROUP_PROPS: Record<string, Partial<ButtonGroupProps>>;

package/lib/components/common/ButtonGroup/constants.js

@@ -0,0 +1,11 @@
+import { BUTTON_GROUP_PROPS as MUI_BUTTON_GROUP_PROPS } from "../../../styles/common/mui/buttonGroup";
+export const BUTTON_GROUP_PROPS = {
+    PRIMARY_CONTAINED: {
+        color: MUI_BUTTON_GROUP_PROPS.COLOR.PRIMARY,
+        variant: MUI_BUTTON_GROUP_PROPS.VARIANT.CONTAINED,
+    },
+    SECONDARY_OUTLINED: {
+        color: MUI_BUTTON_GROUP_PROPS.COLOR.SECONDARY,
+        variant: MUI_BUTTON_GROUP_PROPS.VARIANT.OUTLINED,
+    },
+};

package/lib/components/common/Tabs/tabs.styles.d.ts

@@ -9,7 +9,7 @@ export declare const TabScrollFuzz: import("@emotion/styled").StyledComponent<{
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const Tab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & 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;
-}, "label" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "icon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "wrapped" | "iconPosition"> & {
+}, "label" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export {};

package/lib/mocks/@storybook/addon-actions.d.ts

@@ -0,0 +1,9 @@
+import { jest } from "@jest/globals";
+/**
+ * Mock for Storybook's @storybook/addon-actions function.
+ * The mock keeps the same function signature as the real Storybook action,
+ * does not trigger any Storybook logic, and simply returns a Jest mock function
+ * for use in tests.
+ * @returns A Jest mock function.
+ */
+export declare const action: () => jest.Mock;

package/lib/mocks/@storybook/addon-actions.js

@@ -0,0 +1,9 @@
+import { jest } from "@jest/globals";
+/**
+ * Mock for Storybook's @storybook/addon-actions function.
+ * The mock keeps the same function signature as the real Storybook action,
+ * does not trigger any Storybook logic, and simply returns a Jest mock function
+ * for use in tests.
+ * @returns A Jest mock function.
+ */
+export const action = () => jest.fn();

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

@@ -4,7 +4,7 @@ import { CategoryView } from "../../common/categories/views/types";
 import { CategoryValueKey, SelectCategory, SelectedFilter } from "../../common/entities";
 import { RowPreviewState } from "../../components/Table/features/RowPreview/entities";
 import { CategoryGroup, CategoryGroupConfig, EntityPath, SavedFilter } from "../../config/entities";
-import { META_COMMAND } from "./hooks/UseMetaCommands/types";
+import { META_COMMAND } from "../exploreStateSync/hooks/UseMetaCommands/types";
 export interface EntityPageState {
     categoryGroupConfigKey: CategoryGroupConfigKey;
     columnVisibility: VisibilityState;

package/lib/providers/exploreState.js

@@ -8,11 +8,10 @@ import { syncStateFromUrlAction } from "./exploreState/actions/syncStateFromUrl/
 import { updateGroupingAction } from "./exploreState/actions/updateGrouping/action";
 import { updateColumnVisibilityAction } from "./exploreState/actions/updateVisibility/action";
 import { useBeforePopState } from "./exploreState/hooks/UseBeforePopState/useBeforePopState";
-import { META_COMMAND } from "./exploreState/hooks/UseMetaCommands/types";
-import { useMetaCommands } from "./exploreState/hooks/UseMetaCommands/useMetaCommands";
 import { DEFAULT_PAGINATION_STATE, INITIAL_STATE, } from "./exploreState/initializer/constants";
 import { initReducerArguments } from "./exploreState/initializer/utils";
 import { buildEntityStateSavedFilterState, buildNextSavedFilterState, closeRowPreview, getEntityCategoryGroupConfigKey, getEntityState, getEntityStateSavedProperty, getFilterCount, patchEntityListItems, resetPage, updateEntityPageState, updateEntityPageStateWithCommonCategoryGroupConfigKey, updateEntityStateByCategoryGroupConfigKey, updateSelectColumnVisibility, } from "./exploreState/utils";
+import { META_COMMAND } from "./exploreStateSync/hooks/UseMetaCommands/types";
 /**
  * Explore state context for storing and using filter-related and explore state.
  */
@@ -56,8 +55,6 @@ export function ExploreStateProvider({ children, entityListType, }) {
             type: ExploreActionKind.ResetExploreResponse,
         });
     }, [exploreDispatch, token]);
-    // Meta-command related side effects.
-    useMetaCommands({ exploreDispatch, exploreState });
     // Before pop state related side effects (forward / backward navigation by browser buttons).
     useBeforePopState({ exploreDispatch, exploreState });
     return (React.createElement(ExploreStateContext.Provider, { value: exploreContextValue }, children));
@@ -118,7 +115,7 @@ function exploreReducer(state, action, exploreContext) {
                 entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(state, { grouping, rowPreview, rowSelection, sorting }),
                 filterCount: getFilterCount(filterState),
                 filterState,
-                meta: { command: META_COMMAND.NAVIGATE_TO_FILTERS },
+                meta: { command: META_COMMAND.STATE_TO_URL_PUSH },
                 paginationState: resetPage(state.paginationState),
                 rowPreview,
             };
@@ -141,7 +138,7 @@ function exploreReducer(state, action, exploreContext) {
                 entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(state, { rowPreview, rowSelection }),
                 filterCount,
                 filterState,
-                meta: { command: META_COMMAND.NAVIGATE_TO_FILTERS },
+                meta: { command: META_COMMAND.STATE_TO_URL_PUSH },
                 paginationState: resetPage(state.paginationState),
                 rowPreview,
             };
@@ -233,8 +230,11 @@ function exploreReducer(state, action, exploreContext) {
          **/
         case ExploreActionKind.SelectEntityType: {
             if (payload === state.tabValue) {
-                // Update meta to match command "REPLACE_TO_FILTERS" - facilitates navigation to filters on return back to entity from elsewhere.
-                return { ...state, meta: { command: META_COMMAND.REPLACE_TO_FILTERS } };
+                // Update meta to match command "STATE_TO_URL_REPLACE" - facilitates navigation to filters on return back to entity from elsewhere.
+                return {
+                    ...state,
+                    meta: { command: META_COMMAND.STATE_TO_URL_REPLACE },
+                };
             }
             const entityState = getEntityState(state, getEntityCategoryGroupConfigKey(payload, state.entityPageState));
             const rowPreview = closeRowPreview(state.rowPreview); // Close row preview, without updating the entity page state row preview.
@@ -246,7 +246,7 @@ function exploreReducer(state, action, exploreContext) {
                 filterState: entityState.filterState,
                 listItems: [],
                 loading: true,
-                meta: { command: META_COMMAND.REPLACE_TO_FILTERS },
+                meta: { command: META_COMMAND.STATE_TO_URL_REPLACE },
                 paginationState: { ...resetPage(state.paginationState), rows: 0 },
                 rowPreview,
                 tabValue: payload,
@@ -324,7 +324,7 @@ function exploreReducer(state, action, exploreContext) {
                 entityPageState: updateEntityPageStateWithCommonCategoryGroupConfigKey(state, { rowPreview, rowSelection }),
                 filterCount: getFilterCount(filterState),
                 filterState,
-                meta: { command: META_COMMAND.NAVIGATE_TO_FILTERS },
+                meta: { command: META_COMMAND.STATE_TO_URL_PUSH },
                 paginationState: resetPage(state.paginationState),
                 rowPreview,
             };

package/lib/providers/exploreStateSync/hooks/UseMetaCommands/handlers.d.ts

@@ -0,0 +1,10 @@
+import { NextRouter } from "next/router";
+import { ExploreQueryState } from "./types";
+/**
+ * Updates the URL query parameters based on state.
+ * Pushes or replaces the query to the router.
+ * @param state - State -- partial explore state.
+ * @param currentQuery - Query -- current.
+ * @param method - "push" or "replace".
+ */
+export declare function updateUrlFromState(state: ExploreQueryState, currentQuery: NextRouter["query"], method?: "push" | "replace"): void;

package/lib/providers/exploreStateSync/hooks/UseMetaCommands/handlers.js

@@ -0,0 +1,18 @@
+import Router from "next/router";
+import { buildQuery, stringifyQuery } from "./utils";
+/**
+ * Updates the URL query parameters based on state.
+ * Pushes or replaces the query to the router.
+ * @param state - State -- partial explore state.
+ * @param currentQuery - Query -- current.
+ * @param method - "push" or "replace".
+ */
+export function updateUrlFromState(state, currentQuery, method = "push") {
+    // Build the next query.
+    const query = buildQuery(state);
+    // Do nothing if the next query is the same as the current query.
+    if (stringifyQuery(query) === stringifyQuery(currentQuery))
+        return;
+    // Push or replace the query to the router.
+    Router[method]({ query }, undefined, { shallow: true });
+}

package/lib/providers/exploreStateSync/hooks/UseMetaCommands/hook.d.ts

@@ -0,0 +1 @@
+export declare const useMetaCommands: () => void;

package/lib/providers/exploreStateSync/hooks/UseMetaCommands/hook.js

@@ -0,0 +1,33 @@
+import { useRouter } from "next/router";
+import { useEffect, useMemo } from "react";
+import { useExploreState } from "../../../../hooks/useExploreState";
+import { clearMeta } from "../../../exploreState/actions/clearMeta/dispatch";
+import { updateUrlFromState } from "./handlers";
+import { META_COMMAND } from "./types";
+import { getQueryState } from "./utils";
+export const useMetaCommands = () => {
+    const { exploreDispatch, exploreState } = useExploreState();
+    // Router must be ready before executing any meta-command side effects.
+    const { isReady, query } = useRouter();
+    // Command.
+    const command = exploreState.meta?.command;
+    // Extract relevant state to update URL.
+    const state = useMemo(() => getQueryState(exploreState), [exploreState]);
+    useEffect(() => {
+        // Do nothing if the router is not ready.
+        if (!isReady)
+            return;
+        switch (command) {
+            case META_COMMAND.STATE_TO_URL_PUSH:
+                updateUrlFromState(state, query);
+                exploreDispatch(clearMeta());
+                break;
+            case META_COMMAND.STATE_TO_URL_REPLACE:
+                updateUrlFromState(state, query, "replace");
+                exploreDispatch(clearMeta());
+                break;
+            default:
+                break;
+        }
+    }, [command, exploreDispatch, isReady, query, state]);
+};

package/lib/providers/exploreStateSync/hooks/UseMetaCommands/types.d.ts

@@ -0,0 +1,11 @@
+import { ExploreState } from "../../../exploreState";
+export interface ExploreQueryState {
+    catalog: ExploreState["catalogState"];
+    entityListType: ExploreState["tabValue"];
+    ff: ExploreState["featureFlagState"];
+    filter: ExploreState["filterState"];
+}
+export declare enum META_COMMAND {
+    STATE_TO_URL_PUSH = "STATE_TO_URL_PUSH",
+    STATE_TO_URL_REPLACE = "STATE_TO_URL_REPLACE"
+}

package/lib/providers/exploreStateSync/hooks/UseMetaCommands/types.js

@@ -0,0 +1,5 @@
+export var META_COMMAND;
+(function (META_COMMAND) {
+    META_COMMAND["STATE_TO_URL_PUSH"] = "STATE_TO_URL_PUSH";
+    META_COMMAND["STATE_TO_URL_REPLACE"] = "STATE_TO_URL_REPLACE";
+})(META_COMMAND || (META_COMMAND = {}));

package/lib/providers/exploreStateSync/hooks/UseMetaCommands/utils.d.ts

@@ -0,0 +1,34 @@
+import { NextRouter } from "next/router";
+import { ExploreState } from "../../../exploreState";
+import { ExploreQueryState } from "./types";
+/**
+ * Builds a query object from state.
+ * State values are expected to be undefined, string, or an array.
+ * Undefined values and empty arrays are not included in the query.
+ * @param state - State -- partial explore state.
+ * @returns A query object.
+ */
+export declare function buildQuery(state: ExploreQueryState): NextRouter["query"];
+/**
+ * Extracts URL-relevant values from the ExploreState for query parameter synchronization.
+ *
+ * This function maps specific properties from the full ExploreState to the
+ * ExploreQueryState interface, which contains only the subset of state that
+ * should be synchronized with the URL.
+ *
+ * The extracted properties are:
+ * - catalog: Current catalog selection (string | undefined)
+ * - entityListType: Current active tab value (string)
+ * - ff: Feature flag state (string | undefined)
+ * - filter: Applied filters (SelectedFilter[])
+ *
+ * @param exploreState - Explore state.
+ * @returns Subset of state used for URL query parameters.
+ */
+export declare function getQueryState(exploreState: ExploreState): ExploreQueryState;
+/**
+ * Returns a sorted string representation of a query object.
+ * @param query - Query object.
+ * @returns Sorted string representation of the query object.
+ */
+export declare function stringifyQuery(query: NextRouter["query"]): string;

package/lib/providers/exploreStateSync/hooks/UseMetaCommands/utils.js

@@ -0,0 +1,59 @@
+/**
+ * Builds a query object from state.
+ * State values are expected to be undefined, string, or an array.
+ * Undefined values and empty arrays are not included in the query.
+ * @param state - State -- partial explore state.
+ * @returns A query object.
+ */
+export function buildQuery(state) {
+    const query = {};
+    for (const [key, value] of Object.entries(state)) {
+        // Handle the undefined case.
+        if (value === undefined)
+            continue;
+        // Handle the string case.
+        if (typeof value === "string") {
+            query[key] = value;
+            continue;
+        }
+        // Handle the array case.
+        if (value.length === 0)
+            continue;
+        query[key] = JSON.stringify(value);
+    }
+    return query;
+}
+/**
+ * Extracts URL-relevant values from the ExploreState for query parameter synchronization.
+ *
+ * This function maps specific properties from the full ExploreState to the
+ * ExploreQueryState interface, which contains only the subset of state that
+ * should be synchronized with the URL.
+ *
+ * The extracted properties are:
+ * - catalog: Current catalog selection (string | undefined)
+ * - entityListType: Current active tab value (string)
+ * - ff: Feature flag state (string | undefined)
+ * - filter: Applied filters (SelectedFilter[])
+ *
+ * @param exploreState - Explore state.
+ * @returns Subset of state used for URL query parameters.
+ */
+export function getQueryState(exploreState) {
+    return {
+        catalog: exploreState.catalogState,
+        entityListType: exploreState.tabValue,
+        ff: exploreState.featureFlagState,
+        filter: exploreState.filterState,
+    };
+}
+/**
+ * Returns a sorted string representation of a query object.
+ * @param query - Query object.
+ * @returns Sorted string representation of the query object.
+ */
+export function stringifyQuery(query) {
+    return JSON.stringify(Object.keys(query)
+        .sort()
+        .reduce((acc, key) => ({ ...acc, [key]: query[key] }), {}));
+}

package/lib/providers/exploreStateSync/provider.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+/**
+ * Synchronizes the ExploreView component's state with the Next.js URL.
+ *
+ * Listens for reducer meta-commands (`STATE_TO_URL_PUSH`/`STATE_TO_URL_REPLACE`)
+ * and updates the URL accordingly using router methods.
+ *
+ * Usage:
+ * ```tsx
+ * <ExploreStateProvider>
+ *   <ExploreStateSyncProvider>
+ *     <ExploreView />
+ *   </ExploreStateSyncProvider>
+ * </ExploreStateProvider>
+ * ```
+ */
+export declare function ExploreStateSyncProvider({ children, }: {
+    children: ReactNode;
+}): JSX.Element;

package/lib/providers/exploreStateSync/provider.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { useMetaCommands } from "./hooks/UseMetaCommands/hook";
+/**
+ * Synchronizes the ExploreView component's state with the Next.js URL.
+ *
+ * Listens for reducer meta-commands (`STATE_TO_URL_PUSH`/`STATE_TO_URL_REPLACE`)
+ * and updates the URL accordingly using router methods.
+ *
+ * Usage:
+ * ```tsx
+ * <ExploreStateProvider>
+ *   <ExploreStateSyncProvider>
+ *     <ExploreView />
+ *   </ExploreStateSyncProvider>
+ * </ExploreStateProvider>
+ * ```
+ */
+export function ExploreStateSyncProvider({ children, }) {
+    // Meta-command related side effects.
+    useMetaCommands();
+    return React.createElement(React.Fragment, null, children);
+}

package/lib/styles/common/mui/buttonGroup.d.ts

@@ -0,0 +1,13 @@
+import { ButtonGroupProps } from "@mui/material";
+type ButtonGroupPropsOptions = {
+    CLASSES: typeof CLASSES;
+    COLOR: typeof COLOR;
+    SIZE: typeof SIZE;
+    VARIANT: typeof VARIANT;
+};
+declare const CLASSES: Record<string, ButtonGroupProps["classes"]>;
+declare const COLOR: Record<string, ButtonGroupProps["color"]>;
+declare const SIZE: Record<string, ButtonGroupProps["size"]>;
+declare const VARIANT: Record<string, ButtonGroupProps["variant"]>;
+export declare const BUTTON_GROUP_PROPS: ButtonGroupPropsOptions;
+export {};

package/lib/styles/common/mui/buttonGroup.js

@@ -0,0 +1,34 @@
+import { buttonGroupClasses } from "@mui/material";
+const CLASSES = {
+    COLOR_PRIMARY: buttonGroupClasses.colorPrimary,
+    COLOR_SECONDARY: buttonGroupClasses.colorSecondary,
+    CONTAINED: buttonGroupClasses.contained,
+    GROUPED: buttonGroupClasses.grouped,
+    OUTLINED: buttonGroupClasses.outlined,
+    ROOT: buttonGroupClasses.root,
+};
+const COLOR = {
+    ERROR: "error",
+    INFO: "info",
+    INHERIT: "inherit",
+    PRIMARY: "primary",
+    SECONDARY: "secondary",
+    SUCCESS: "success",
+    WARNING: "warning",
+};
+const SIZE = {
+    LARGE: "large",
+    MEDIUM: "medium",
+    SMALL: "small",
+};
+const VARIANT = {
+    CONTAINED: "contained",
+    OUTLINED: "outlined",
+    TEXT: "text",
+};
+export const BUTTON_GROUP_PROPS = {
+    CLASSES,
+    COLOR,
+    SIZE,
+    VARIANT,
+};

package/lib/styles/common/mui/typography.js

@@ -3,11 +3,13 @@ const COLOR = {
     INHERIT: "inherit",
     INK_LIGHT: "ink.light",
     INK_MAIN: "ink.main",
+    PRIMARY: "primary",
 };
 const VARIANT = {
     INHERIT: "inherit",
     TEXT_BODY_400: "text-body-400",
     TEXT_BODY_400_2_LINES: "text-body-400-2lines",
+    TEXT_BODY_500: "text-body-500",
     TEXT_BODY_SMALL_400: "text-body-small-400",
     TEXT_HEADING_LARGE: "text-heading-large",
     TEXT_HEADING_SMALL: "text-heading-small",

package/lib/tests/mui/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const MUI_CLASSES: {
     ACTIVE: string;
     COMPLETED: string;
+    DISABLED: string;
     SELECTED: string;
 };

package/lib/tests/mui/constants.js

@@ -1,5 +1,6 @@
 export const MUI_CLASSES = {
     ACTIVE: "Mui-active",
     COMPLETED: "Mui-completed",
+    DISABLED: "Mui-disabled",
     SELECTED: "Mui-selected",
 };

package/lib/tests/utils.d.ts

@@ -16,6 +16,12 @@ export declare function getLabelText<T extends HTMLElement = HTMLElement>(text:
  * @returns RegExp.
  */
 export declare function getStartsWithRegex(text: string): RegExp;
+/**
+ * Retrieves an element by its role.
+ * @param role - The role of the element.
+ * @returns The element.
+ */
+export declare function getRole<T extends HTMLElement = HTMLElement>(role: string): T;
 /**
  * Retrieves an element by its text content.
  * @param text - The text content of the element.

package/lib/tests/utils.js

@@ -24,6 +24,14 @@ export function getLabelText(text) {
 export function getStartsWithRegex(text) {
     return new RegExp(`^${escapeRegExp(text)}`);
 }
+/**
+ * Retrieves an element by its role.
+ * @param role - The role of the element.
+ * @returns The element.
+ */
+export function getRole(role) {
+    return screen.getByRole(role);
+}
 /**
  * Retrieves an element by its text content.
  * @param text - The text content of the element.

package/lib/theme/common/components.d.ts

@@ -40,12 +40,6 @@ export declare const MuiButton: (theme: Theme) => Components["MuiButton"];
  * @returns MuiButtonBase component theme styles.
  */
 export declare const MuiButtonBase: (theme: Theme) => Components["MuiButtonBase"];
-/**
- * MuiButtonGroup Component
- * @param theme - Theme.
- * @returns MuiButtonGroup component theme styles.
- */
-export declare const MuiButtonGroup: (theme: Theme) => Components["MuiButtonGroup"];
 /**
  * MuiCard Component
  */

package/lib/theme/common/components.js

@@ -2,6 +2,7 @@ import { DropDownIcon } from "../../components/common/Form/components/Select/com
 import { COLOR_MIXES } from "../../styles/common/constants/colorMixes";
 import { PALETTE } from "../../styles/common/constants/palette";
 import { SHADOWS } from "../../styles/common/constants/shadows";
+import { BUTTON_PROPS } from "../../styles/common/mui/button";
 import { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import { TEXT_BODY_400, TEXT_BODY_400_2_LINES, TEXT_BODY_500, TEXT_BODY_SMALL_400, TEXT_BODY_SMALL_500, TEXT_HEADING, TEXT_HEADING_SMALL, } from "./typography";
@@ -183,6 +184,22 @@ export const MuiButton = (theme) => {
             },
             endIcon: {
                 margin: 0,
+                variants: [
+                    {
+                        props: { size: BUTTON_PROPS.SIZE.MEDIUM },
+                        style: {
+                            marginLeft: -6,
+                            marginRight: -6,
+                        },
+                    },
+                    {
+                        props: { size: BUTTON_PROPS.SIZE.SMALL },
+                        style: {
+                            marginLeft: -6,
+                            marginRight: -6,
+                        },
+                    },
+                ],
             },
             outlinedSecondary: {
                 backgroundColor: "transparent",
@@ -298,37 +315,6 @@ export const MuiButtonBase = (theme) => {
         },
     };
 };
-/**
- * MuiButtonGroup Component
- * @param theme - Theme.
- * @returns MuiButtonGroup component theme styles.
- */
-export const MuiButtonGroup = (theme) => {
-    return {
-        defaultProps: {
-            disableElevation: true,
-            disableRipple: true,
-        },
-        styleOverrides: {
-            grouped: {
-                minWidth: 0,
-                padding: "6px 8px",
-            },
-            groupedContainedPrimary: {
-                borderColor: theme.palette.primary.dark,
-                boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:hover": {
-                    boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
-                },
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:active": {
-                    boxShadow: "none",
-                },
-            },
-        },
-    };
-};
 /**
  * MuiCard Component
  */

package/lib/theme/components/index.d.ts

@@ -1,3 +1,4 @@
 export { MuiAlert } from "./muiAlert";
 export { MuiAlertTitle } from "./muiAlertTitle";
+export { MuiButtonGroup } from "./muiButtonGroup";
 export { MuiTableCell } from "./muiTableCell";

package/lib/theme/components/index.js

@@ -1,3 +1,4 @@
 export { MuiAlert } from "./muiAlert";
 export { MuiAlertTitle } from "./muiAlertTitle";
+export { MuiButtonGroup } from "./muiButtonGroup";
 export { MuiTableCell } from "./muiTableCell";

package/lib/theme/components/muiButtonGroup.d.ts

@@ -0,0 +1,2 @@
+import { Components } from "@mui/material";
+export declare const MuiButtonGroup: Components["MuiButtonGroup"];