@databiosphere/findable-ui 3.1.0 → 4.0.0

package/lib/components/common/CustomIcon/components/AddLinkIcon/addLinkIcon.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddLinkIcon = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const AddLinkIcon = (_a) => {
+    var { fontSize = "xsmall", viewBox = "0 0 18 18" } = _a, props = __rest(_a, ["fontSize", "viewBox"]) /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */;
+    return (react_1.default.createElement(material_1.SvgIcon, Object.assign({ fontSize: fontSize, viewBox: viewBox }, props),
+        react_1.default.createElement("path", { d: "M12.8248 12.6004H11.4561C11.2811 12.6004 11.1279 12.5357 10.9967 12.4063C10.8654 12.277 10.7998 12.1166 10.7998 11.9254C10.7998 11.7504 10.8645 11.5941 10.9939 11.4566C11.1232 11.3191 11.2836 11.2504 11.4748 11.2504H12.8248V9.90039C12.8248 9.70914 12.8891 9.54883 13.0177 9.41945C13.1464 9.29008 13.3057 9.22539 13.4959 9.22539C13.686 9.22539 13.8459 9.29008 13.9755 9.41945C14.1052 9.54883 14.1701 9.70914 14.1701 9.90039V11.2504H15.5233C15.7149 11.2504 15.8756 11.3151 16.0054 11.4445C16.135 11.5738 16.1998 11.7341 16.1998 11.9254C16.1998 12.1166 16.135 12.277 16.0054 12.4063C15.8756 12.5357 15.7149 12.6004 15.5233 12.6004H14.1701V13.9504C14.1701 14.1416 14.1052 14.302 13.9755 14.4313C13.8459 14.5607 13.686 14.6254 13.4959 14.6254C13.3057 14.6254 13.1464 14.5607 13.0177 14.4313C12.8891 14.302 12.8248 14.1416 12.8248 13.9504V12.6004ZM7.4248 12.6004H5.3998C4.4038 12.6004 3.5548 12.249 2.8528 11.5461C2.1508 10.8433 1.7998 9.99333 1.7998 8.99608C1.7998 7.99895 2.1508 7.15039 2.8528 6.45039C3.5548 5.75039 4.4038 5.40039 5.3998 5.40039H7.4248C7.5998 5.40039 7.75605 5.46914 7.89355 5.60664C8.03105 5.74414 8.0998 5.90352 8.0998 6.08477C8.0998 6.26602 8.03105 6.42227 7.89355 6.55352C7.75605 6.68477 7.5998 6.75039 7.4248 6.75039H5.3998C4.7748 6.75039 4.24355 6.96914 3.80605 7.40664C3.36855 7.84414 3.1498 8.37539 3.1498 9.00039C3.1498 9.62539 3.36855 10.1566 3.80605 10.5941C4.24355 11.0316 4.7748 11.2504 5.3998 11.2504H7.4248C7.5998 11.2504 7.75605 11.3191 7.89355 11.4566C8.03105 11.5941 8.0998 11.7535 8.0998 11.9348C8.0998 12.116 8.03105 12.2723 7.89355 12.4035C7.75605 12.5348 7.5998 12.6004 7.4248 12.6004ZM6.98005 9.67539C6.78905 9.67539 6.62793 9.61108 6.49668 9.48245C6.36543 9.35383 6.2998 9.19445 6.2998 9.00433C6.2998 8.8142 6.36443 8.65352 6.49368 8.52227C6.62293 8.39102 6.78305 8.32539 6.97405 8.32539H11.0196C11.2106 8.32539 11.3717 8.3897 11.5029 8.51833C11.6342 8.64695 11.6998 8.80633 11.6998 8.99645C11.6998 9.18658 11.6352 9.34727 11.5059 9.47852C11.3767 9.60977 11.2166 9.67539 11.0256 9.67539H6.98005ZM16.1998 9.00039H14.8498C14.8498 8.37539 14.6311 7.84414 14.1936 7.40664C13.7561 6.96914 13.2248 6.75039 12.5998 6.75039H10.5561C10.3811 6.75039 10.2279 6.6857 10.0967 6.55633C9.96543 6.42695 9.8998 6.26664 9.8998 6.07539C9.8998 5.90039 9.96449 5.74414 10.0939 5.60664C10.2232 5.46914 10.3836 5.40039 10.5748 5.40039H12.5998C13.5958 5.40039 14.4448 5.75139 15.1468 6.45339C15.8488 7.15539 16.1998 8.00439 16.1998 9.00039Z", fill: "currentColor" })));
+};
+exports.AddLinkIcon = AddLinkIcon;

package/lib/components/common/CustomIcon/components/UnLinkIcon/unLinkIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CustomSVGIconProps } from "../../common/entities";
+export declare const UnLinkIcon: ({ fontSize, viewBox, ...props }: CustomSVGIconProps) => JSX.Element;

package/lib/components/common/CustomIcon/components/UnLinkIcon/unLinkIcon.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnLinkIcon = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const UnLinkIcon = (_a) => {
+    var { fontSize = "xsmall", viewBox = "0 0 18 18" } = _a, props = __rest(_a, ["fontSize", "viewBox"]) /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */;
+    return (react_1.default.createElement(material_1.SvgIcon, Object.assign({ fontSize: fontSize, viewBox: viewBox }, props),
+        react_1.default.createElement("path", { d: "M11.4561 9.52501L10.2373 8.325H11.0196C11.2123 8.325 11.3738 8.38968 11.5042 8.51905C11.6346 8.64843 11.6998 8.80875 11.6998 9C11.6998 9.11245 11.6748 9.21253 11.6248 9.30001C11.5748 9.38749 11.5123 9.46246 11.4373 9.52501H11.4561ZM14.8873 15.825C14.7498 15.9625 14.5904 16.0312 14.4092 16.0312C14.2279 16.0312 14.0685 15.9625 13.9311 15.825L2.15605 4.06874C2.01856 3.93124 1.94981 3.77187 1.94981 3.59062C1.94981 3.40937 2.01856 3.25 2.15605 3.11249C2.29355 2.97499 2.45293 2.90625 2.63418 2.90625C2.81543 2.90625 2.97481 2.97499 3.1123 3.11249L14.8873 14.8875C15.0248 15.025 15.0935 15.1812 15.0935 15.3562C15.0935 15.5313 15.0248 15.6875 14.8873 15.825ZM5.3998 12.6C4.4038 12.6 3.5548 12.249 2.8528 11.547C2.1508 10.845 1.7998 9.99598 1.7998 9C1.7998 8.20087 2.03731 7.48855 2.51231 6.86305C2.9873 6.23768 3.6623 5.74374 4.53731 5.38125L5.8498 6.75H5.41855C4.78105 6.75 4.24356 6.96874 3.80606 7.40625C3.36856 7.84375 3.1498 8.37499 3.1498 9C3.1498 9.625 3.36856 10.1563 3.80606 10.5938C4.24356 11.0313 4.77481 11.25 5.3998 11.25H7.4248C7.61605 11.25 7.77636 11.3143 7.90575 11.4429C8.03512 11.5715 8.0998 11.7309 8.0998 11.9211C8.0998 12.1112 8.03512 12.2719 7.90575 12.4031C7.77636 12.5343 7.61605 12.6 7.4248 12.6H5.3998ZM6.97274 9.67495C6.78661 9.67495 6.62793 9.61069 6.49668 9.48208C6.36543 9.35347 6.2998 9.19408 6.2998 9.00391C6.2998 8.81381 6.3645 8.65312 6.49387 8.52187C6.62325 8.39062 6.78355 8.325 6.9748 8.325H7.34981L8.68105 9.67495H6.97274ZM13.6686 11.775C13.5686 11.625 13.5342 11.4594 13.5654 11.2781C13.5966 11.0969 13.6873 10.9563 13.8373 10.8562C14.1498 10.6437 14.3967 10.375 14.5779 10.05C14.7592 9.72499 14.8498 9.37498 14.8498 9C14.8498 8.37499 14.631 7.84375 14.1935 7.40625C13.756 6.96874 13.2248 6.75 12.5998 6.75H10.5748C10.3836 6.75 10.2233 6.68568 10.0938 6.55705C9.96451 6.42844 9.8998 6.26905 9.8998 6.07893C9.8998 5.8888 9.96451 5.72812 10.0938 5.59687C10.2233 5.46563 10.3836 5.4 10.5748 5.4H12.5998C13.5958 5.4 14.4448 5.751 15.1468 6.453C15.8488 7.155 16.1998 8.00399 16.1998 9C16.1998 9.6034 16.0561 10.1667 15.7685 10.69C15.4811 11.2133 15.0873 11.6375 14.5873 11.9625C14.4373 12.0625 14.2716 12.0937 14.0904 12.0563C13.9092 12.0187 13.7685 11.925 13.6686 11.775Z", fill: "currentColor" })));
+};
+exports.UnLinkIcon = UnLinkIcon;

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

@@ -0,0 +1,7 @@
+import { CircularProgressProps as MCircularProgressProps } from "@mui/material";
+import { ElementType } from "react";
+export interface CircularProgressProps extends MCircularProgressProps {
+    className?: string;
+    Track?: ElementType<CircularProgressProps>;
+}
+export declare const CircularProgress: ({ className, value, Track, ...props }: CircularProgressProps) => JSX.Element;

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

@@ -0,0 +1,28 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgress = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const circularProgress_styles_1 = require("./circularProgress.styles");
+const circularProgressTrack_1 = require("./components/CircularProgressTrack/circularProgressTrack");
+const CircularProgress = (_a) => {
+    var { className, value, Track = circularProgressTrack_1.CircularProgressTrack } = _a, props = __rest(_a, ["className", "value", "Track"]) /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */;
+    return (react_1.default.createElement(circularProgress_styles_1.ProgressPositioner, { className: className },
+        react_1.default.createElement(Track, Object.assign({}, props)),
+        react_1.default.createElement(material_1.CircularProgress, Object.assign({ value: value }, props))));
+};
+exports.CircularProgress = CircularProgress;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ProgressPositioner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressPositioner = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.ProgressPositioner = styled_1.default.div `
+  display: flex;
+  position: relative; /* positions track */
+`;

package/lib/components/common/Progress/components/CircularProgress/components/CircularProgressTrack/circularProgressTrack.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CircularProgressProps as MCircularProgressProps } from "@mui/material";
+export interface CircularProgressTrackProps extends MCircularProgressProps {
+    className?: string;
+    track?: boolean;
+}
+export declare const CircularProgressTrack: ({ className, track, value, ...props }: CircularProgressTrackProps) => JSX.Element;

package/lib/components/common/Progress/components/CircularProgress/components/CircularProgressTrack/circularProgressTrack.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgressTrack = void 0;
+const react_1 = __importStar(require("react"));
+const circularProgressTrack_styles_1 = require("./circularProgressTrack.styles");
+const CircularProgressTrack = (_a) => {
+    var { className, track = true, value = 100 } = _a, props = __rest(_a, ["className", "track", "value"]) /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */;
+    return (react_1.default.createElement(react_1.Fragment, null, track && (react_1.default.createElement(circularProgressTrack_styles_1.CircularProgress, Object.assign({ className: className, value: value }, props)))));
+};
+exports.CircularProgressTrack = CircularProgressTrack;

package/lib/components/common/Progress/components/CircularProgress/components/CircularProgressTrack/circularProgressTrack.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const CircularProgress: import("@emotion/styled").StyledComponent<import("@mui/material").CircularProgressProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/common/Progress/components/CircularProgress/components/CircularProgressTrack/circularProgressTrack.styles.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgress = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
+const colors_1 = require("../../../../../../../styles/common/mixins/colors");
+exports.CircularProgress = (0, styled_1.default)(material_1.CircularProgress) `
+  color: ${colors_1.smokeLight};
+  left: 0;
+  position: absolute;
+  top: 0;
+  z-index: 0;
+
+  &.MuiCircularProgress-colorAlert {
+    color: ${colors_1.alertLight};
+  }
+
+  &.MuiCircularProgress-colorInfo {
+    color: ${colors_1.infoLight};
+  }
+
+  &.MuiCircularProgress-colorSuccess {
+    color: ${colors_1.successLight};
+  }
+
+  &.MuiCircularProgress-colorWarning {
+    color: ${colors_1.warningLight};
+  }
+`;

package/lib/providers/exploreState/initializer/constants.d.ts

@@ -1,5 +1,7 @@
+import { CategoryGroup } from "../../../config/entities";
 import { ExploreState, PaginationState } from "../../exploreState";
 import { EntityState } from "../entities";
+export declare const DEFAULT_CATEGORY_GROUP_SAVED_FILTERS: CategoryGroup;
 export declare const DEFAULT_ENTITY_STATE: EntityState;
 export declare const DEFAULT_PAGINATION_STATE: PaginationState;
 export declare const INITIAL_STATE: ExploreState;

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

@@ -1,6 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.INITIAL_STATE = exports.DEFAULT_PAGINATION_STATE = exports.DEFAULT_ENTITY_STATE = void 0;
+exports.INITIAL_STATE = exports.DEFAULT_PAGINATION_STATE = exports.DEFAULT_ENTITY_STATE = exports.DEFAULT_CATEGORY_GROUP_SAVED_FILTERS = void 0;
+const constants_1 = require("../constants");
+exports.DEFAULT_CATEGORY_GROUP_SAVED_FILTERS = {
+    categoryConfigs: [
+        { key: constants_1.SELECT_CATEGORY_KEY.SAVED_FILTERS, label: "Saved Filters" },
+    ],
+};
 exports.DEFAULT_ENTITY_STATE = {
     categoryViews: [],
     filterState: [],

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

@@ -16,14 +16,7 @@ function buildCategoryGroups(categoryGroupConfig) {
     const { categoryGroups, savedFilters } = categoryGroupConfig;
     if (!savedFilters)
         return categoryGroups;
-    const clonedCategoryGroups = [...categoryGroups];
-    const savedFiltersCategoryGroup = {
-        categoryConfigs: [
-            { key: constants_2.SELECT_CATEGORY_KEY.SAVED_FILTERS, label: "Saved Filters" },
-        ],
-    };
-    clonedCategoryGroups.unshift(savedFiltersCategoryGroup);
-    return clonedCategoryGroups;
+    return [constants_3.DEFAULT_CATEGORY_GROUP_SAVED_FILTERS, ...categoryGroups];
 }
 /**
  * Returns the saved filters as select categories.

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

@@ -1,5 +1,5 @@
 import { ColumnSort, RowSelectionState, VisibilityState } from "@tanstack/react-table";
-import { CategoryKey, CategoryValueKey, PaginationDirectionType, SelectCategory } from "../../../common/entities";
+import { CategoryKey, CategoryValueKey, PaginationDirectionType, SelectCategory, SelectedFilter } from "../../../common/entities";
 import { ENTITY_VIEW, ListItems, PaginationResponse, RelatedListItems } from "../../exploreState";
 import { ListItem } from "../entities";
 /**
@@ -48,6 +48,13 @@ export declare type ToggleEntityViewPayload = ENTITY_VIEW;
  * Update column visibility payload.
  */
 export declare type UpdateColumnVisibilityPayload = VisibilityState;
+/**
+ * Update entity filters payload.
+ */
+export interface UpdateEntityFiltersPayload {
+    entityListType: string;
+    filters: SelectedFilter[];
+}
 /**
  * Update entity view access payload.
  */

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

@@ -70,9 +70,10 @@ export declare function resetPage(paginationState: PaginationState): PaginationS
 /**
  * Resets row selection for the current entity and entities that share the same category group config key.
  * @param state - Explore state.
+ * @param categoryGroupConfigKey - Category group config key.
  * @returns entity page state mapper with row selection reset.
  */
-export declare function resetRowSelection(state: ExploreState): EntityPageStateMapper;
+export declare function resetRowSelection(state: ExploreState, categoryGroupConfigKey?: string): EntityPageStateMapper;
 /**
  * Updates entity page state for the given entity path.
  * @param entityPath - Entity path.
@@ -93,9 +94,10 @@ export declare function updateEntityPageStateSorting(state: ExploreState, sortin
  * Updates entity state by category group config key.
  * @param state - Explore state.
  * @param nextEntityState - Partial next entity state.
+ * @param categoryGroupConfigKey - Category group config key.
  * @returns updated entity state by category group config key.
  */
-export declare function updateEntityStateByCategoryGroupConfigKey(state: ExploreState, nextEntityState: Partial<EntityState>): void;
+export declare function updateEntityStateByCategoryGroupConfigKey(state: ExploreState, nextEntityState: Partial<EntityState>, categoryGroupConfigKey?: string): void;
 /**
  *  Updates the entity page state for each entity with row selection enabled,
  *  by updating the visibility of the "select" column based on user access and resetting row selection state.

package/lib/providers/exploreState/utils.js

@@ -118,10 +118,10 @@ exports.resetPage = resetPage;
 /**
  * Resets row selection for the current entity and entities that share the same category group config key.
  * @param state - Explore state.
+ * @param categoryGroupConfigKey - Category group config key.
  * @returns entity page state mapper with row selection reset.
  */
-function resetRowSelection(state) {
-    const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState);
+function resetRowSelection(state, categoryGroupConfigKey = getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState)) {
     return Object.entries(state.entityPageState).reduce((acc, [entityPath, entityPageState]) => {
         if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) {
             return Object.assign(Object.assign({}, acc), { [entityPath]: Object.assign(Object.assign({}, entityPageState), { rowSelection: {} }) });
@@ -173,10 +173,10 @@ exports.updateEntityPageStateSorting = updateEntityPageStateSorting;
  * Updates entity state by category group config key.
  * @param state - Explore state.
  * @param nextEntityState - Partial next entity state.
+ * @param categoryGroupConfigKey - Category group config key.
  * @returns updated entity state by category group config key.
  */
-function updateEntityStateByCategoryGroupConfigKey(state, nextEntityState) {
-    const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState);
+function updateEntityStateByCategoryGroupConfigKey(state, nextEntityState, categoryGroupConfigKey = getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState)) {
     const entityState = getEntityState(state, categoryGroupConfigKey);
     if (entityState) {
         setEntityStateByCategoryGroupConfigKey(categoryGroupConfigKey, state, Object.assign(Object.assign({}, entityState), nextEntityState));

package/lib/providers/exploreState.d.ts

@@ -3,7 +3,7 @@ import { AzulSearchIndex } from "../apis/azul/common/entities";
 import { SelectCategoryView, SelectedFilter } from "../common/entities";
 import { CategoryGroup, SiteConfig } from "../config/entities";
 import { EntityPageStateMapper, EntityStateByCategoryGroupConfigKey, ListItem } from "./exploreState/entities";
-import { ApplySavedFilterPayload, PaginateTablePayload, PatchExploreResponsePayload, ProcessExploreResponsePayload, ProcessRelatedResponsePayload, ResetExploreResponsePayload, ToggleEntityViewPayload, UpdateColumnVisibilityPayload, UpdateEntityViewAccessPayload, UpdateFilterPayload, UpdateRowSelectionPayload, UpdateSortingPayload } from "./exploreState/payloads/entities";
+import { ApplySavedFilterPayload, PaginateTablePayload, PatchExploreResponsePayload, ProcessExploreResponsePayload, ProcessRelatedResponsePayload, ResetExploreResponsePayload, ToggleEntityViewPayload, UpdateColumnVisibilityPayload, UpdateEntityFiltersPayload, UpdateEntityViewAccessPayload, UpdateFilterPayload, UpdateRowSelectionPayload, UpdateSortingPayload } from "./exploreState/payloads/entities";
 export declare type CatalogState = string | undefined;
 /**
  * Entity view.
@@ -114,6 +114,7 @@ export declare enum ExploreActionKind {
     SelectEntityType = "SELECT_ENTITY_TYPE",
     ToggleEntityView = "TOGGLE_ENTITY_VIEW",
     UpdateColumnVisibility = "UPDATE_COLUMN_VISIBILITY",
+    UpdateEntityFilters = "UPDATE_ENTITY_FILTERS",
     UpdateEntityViewAccess = "UPDATE_ENTITY_VIEW_ACCESS",
     UpdateFilter = "UPDATE_FILTER",
     UpdateRowSelection = "UPDATE_ROW_SELECTION",
@@ -122,7 +123,7 @@ export declare enum ExploreActionKind {
 /**
  * Explore action.
  */
-export declare type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | PaginateTableAction | PatchExploreResponseAction | ProcessExploreResponseAction | ProcessRelatedResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | ToggleEntityViewAction | UpdateColumnVisibilityAction | UpdateEntityViewAccessAction | UpdateFilterAction | UpdateRowSelectionAction | UpdateSortingAction;
+export declare type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | PaginateTableAction | PatchExploreResponseAction | ProcessExploreResponseAction | ProcessRelatedResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | ToggleEntityViewAction | UpdateColumnVisibilityAction | UpdateEntityFiltersAction | UpdateEntityViewAccessAction | UpdateFilterAction | UpdateRowSelectionAction | UpdateSortingAction;
 /**
  * Apply saved filter action.
  */
@@ -200,6 +201,13 @@ declare type UpdateColumnVisibilityAction = {
     payload: UpdateColumnVisibilityPayload;
     type: ExploreActionKind.UpdateColumnVisibility;
 };
+/**
+ * Update entity filters action.
+ */
+declare type UpdateEntityFiltersAction = {
+    payload: UpdateEntityFiltersPayload;
+    type: ExploreActionKind.UpdateEntityFilters;
+};
 /**
  * Update entity view access action.
  */

package/lib/providers/exploreState.js

@@ -104,6 +104,7 @@ var ExploreActionKind;
     ExploreActionKind["SelectEntityType"] = "SELECT_ENTITY_TYPE";
     ExploreActionKind["ToggleEntityView"] = "TOGGLE_ENTITY_VIEW";
     ExploreActionKind["UpdateColumnVisibility"] = "UPDATE_COLUMN_VISIBILITY";
+    ExploreActionKind["UpdateEntityFilters"] = "UPDATE_ENTITY_FILTERS";
     ExploreActionKind["UpdateEntityViewAccess"] = "UPDATE_ENTITY_VIEW_ACCESS";
     ExploreActionKind["UpdateFilter"] = "UPDATE_FILTER";
     ExploreActionKind["UpdateRowSelection"] = "UPDATE_ROW_SELECTION";
@@ -224,6 +225,18 @@ function exploreReducer(state, action, exploreContext) {
         case ExploreActionKind.UpdateColumnVisibility: {
             return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { columnsVisibility: payload }) });
         }
+        /**
+         * Update entity filters.
+         */
+        case ExploreActionKind.UpdateEntityFilters: {
+            const { entityListType, filters: filterState } = payload;
+            const categoryGroupConfigKey = (0, utils_2.getEntityCategoryGroupConfigKey)(entityListType, state.entityPageState);
+            (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
+                filterState,
+                savedFilterState: [], // Clear saved filter state.
+            }, categoryGroupConfigKey);
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.resetRowSelection)(state, categoryGroupConfigKey) });
+        }
         /**
          * Update entity view access
          **/

package/lib/styles/common/mixins/colors.d.ts

@@ -1,15 +1,13 @@
 import { CommonColors, PaletteColor } from "@mui/material/styles/createPalette";
 import { ThemeProps } from "../../../theme/theme";
+export declare const alertLight: ({ theme }: ThemeProps) => PaletteColor["light"];
 export declare const alertLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
 export declare const alertMain: ({ theme }: ThemeProps) => PaletteColor["main"];
 export declare const errorMain: ({ theme }: ThemeProps) => PaletteColor["main"];
-export declare const infoDark: ({ theme }: ThemeProps) => PaletteColor["dark"];
 export declare const infoLight: ({ theme }: ThemeProps) => PaletteColor["light"];
 export declare const infoLightest: ({ theme }: ThemeProps) => PaletteColor["lightest"];
 export declare const infoMain: ({ theme }: ThemeProps) => PaletteColor["main"];
-export declare const inkDark: ({ theme }: ThemeProps) => PaletteColor["dark"];
 export declare const inkLight: ({ theme }: ThemeProps) => PaletteColor["light"];
-export declare const inkLightest: ({ theme }: ThemeProps) => PaletteColor["lightest"];
 export declare const inkMain: ({ theme }: ThemeProps) => PaletteColor["main"];
 export declare const primaryDark: ({ theme }: ThemeProps) => PaletteColor["dark"];
 export declare const primaryMain: ({ theme }: ThemeProps) => PaletteColor["main"];
@@ -17,8 +15,10 @@ export declare const smokeDark: ({ theme }: ThemeProps) => PaletteColor["dark"];
 export declare const smokeLight: ({ theme }: ThemeProps) => PaletteColor["light"];
 export declare const smokeLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
 export declare const smokeMain: ({ theme }: ThemeProps) => PaletteColor["main"];
+export declare const successLight: ({ theme }: ThemeProps) => PaletteColor["light"];
 export declare const successLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
 export declare const successMain: ({ theme }: ThemeProps) => PaletteColor["main"];
+export declare const warningLight: ({ theme }: ThemeProps) => PaletteColor["light"];
 export declare const warningLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
 export declare const warningMain: ({ theme }: ThemeProps) => PaletteColor["main"];
 export declare const white: ({ theme }: ThemeProps) => CommonColors["white"];

package/lib/styles/common/mixins/colors.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.white = exports.warningMain = exports.warningLightest = exports.successMain = exports.successLightest = exports.smokeMain = exports.smokeLightest = exports.smokeLight = exports.smokeDark = exports.primaryMain = exports.primaryDark = exports.inkMain = exports.inkLightest = exports.inkLight = exports.inkDark = exports.infoMain = exports.infoLightest = exports.infoLight = exports.infoDark = exports.errorMain = exports.alertMain = exports.alertLightest = void 0;
+exports.white = exports.warningMain = exports.warningLightest = exports.warningLight = exports.successMain = exports.successLightest = exports.successLight = exports.smokeMain = exports.smokeLightest = exports.smokeLight = exports.smokeDark = exports.primaryMain = exports.primaryDark = exports.inkMain = exports.inkLight = exports.infoMain = exports.infoLightest = exports.infoLight = exports.errorMain = exports.alertMain = exports.alertLightest = exports.alertLight = void 0;
 // Alert
+const alertLight = ({ theme }) => theme.palette.alert.light;
+exports.alertLight = alertLight;
 const alertLightest = ({ theme, }) => theme.palette.alert.lightest;
 exports.alertLightest = alertLightest;
 const alertMain = ({ theme }) => theme.palette.alert.main;
@@ -10,8 +12,6 @@ exports.alertMain = alertMain;
 const errorMain = ({ theme }) => theme.palette.error.main;
 exports.errorMain = errorMain;
 // Info
-const infoDark = ({ theme }) => theme.palette.info.dark;
-exports.infoDark = infoDark;
 const infoLight = ({ theme }) => theme.palette.info.light;
 exports.infoLight = infoLight;
 const infoLightest = ({ theme }) => theme.palette.info.lightest;
@@ -19,12 +19,8 @@ exports.infoLightest = infoLightest;
 const infoMain = ({ theme }) => theme.palette.info.main;
 exports.infoMain = infoMain;
 // Ink
-const inkDark = ({ theme }) => theme.palette.ink.dark;
-exports.inkDark = inkDark;
 const inkLight = ({ theme }) => theme.palette.ink.light;
 exports.inkLight = inkLight;
-const inkLightest = ({ theme }) => theme.palette.ink.lightest;
-exports.inkLightest = inkLightest;
 const inkMain = ({ theme }) => theme.palette.ink.main;
 exports.inkMain = inkMain;
 // Primary
@@ -42,11 +38,15 @@ exports.smokeLightest = smokeLightest;
 const smokeMain = ({ theme }) => theme.palette.smoke.main;
 exports.smokeMain = smokeMain;
 // Success
+const successLight = ({ theme }) => theme.palette.success.light;
+exports.successLight = successLight;
 const successLightest = ({ theme, }) => theme.palette.success.lightest;
 exports.successLightest = successLightest;
 const successMain = ({ theme }) => theme.palette.success.main;
 exports.successMain = successMain;
 // Warning
+const warningLight = ({ theme }) => theme.palette.warning.light;
+exports.warningLight = warningLight;
 const warningLightest = ({ theme, }) => theme.palette.warning.lightest;
 exports.warningLightest = warningLightest;
 const warningMain = ({ theme }) => theme.palette.warning.main;

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

@@ -75,6 +75,12 @@ export declare const MuiCheckbox: (theme: Theme) => Components["MuiCheckbox"];
  * @returns MuiChip component theme styles.
  */
 export declare const MuiChip: (theme: Theme) => Components["MuiChip"];
+/**
+ * MuiCircularProgress Component
+ * @param theme - Theme.
+ * @returns MuiCircularProgress component theme styles.
+ */
+export declare const MuiCircularProgress: (theme: Theme) => Components["MuiCircularProgress"];
 /**
  * MuiCssBaseline Component
  * @param theme - Theme.

package/lib/theme/common/components.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MuiTypography = exports.MuiTooltip = exports.MuiToolbar = exports.MuiToggleButtonGroup = exports.MuiToggleButton = exports.MuiTabs = exports.MuiTableSortLabel = exports.MuiTableCell = exports.MuiTab = exports.MuiSvgIcon = exports.MuiSelect = exports.MuiRadio = exports.MuiPaper = exports.MuiOutlinedInput = exports.MuiMenuItem = exports.MuiListSubheader = exports.MuiListItemText = exports.MuiListItemButton = exports.MuiLink = exports.MuiInputBase = exports.MuiIconButton = exports.MuiFormHelperText = exports.MuiFormGroup = exports.MuiFormControlLabel = exports.MuiDrawer = exports.MuiDivider = exports.MuiDialogTitle = exports.MuiDialogContent = exports.MuiDialogActions = exports.MuiDialog = exports.MuiCssBaseline = exports.MuiChip = exports.MuiCheckbox = exports.MuiCard = exports.MuiButtonGroup = exports.MuiButtonBase = exports.MuiButton = exports.MuiBreadcrumbs = exports.MuiBackdrop = exports.MuiAppBar = exports.MuiAlertTitle = exports.MuiAlert = exports.MuiAccordionSummary = exports.MuiAccordionDetails = exports.MuiAccordion = void 0;
+exports.MuiTypography = exports.MuiTooltip = exports.MuiToolbar = exports.MuiToggleButtonGroup = exports.MuiToggleButton = exports.MuiTabs = exports.MuiTableSortLabel = exports.MuiTableCell = exports.MuiTab = exports.MuiSvgIcon = exports.MuiSelect = exports.MuiRadio = exports.MuiPaper = exports.MuiOutlinedInput = exports.MuiMenuItem = exports.MuiListSubheader = exports.MuiListItemText = exports.MuiListItemButton = exports.MuiLink = exports.MuiInputBase = exports.MuiIconButton = exports.MuiFormHelperText = exports.MuiFormGroup = exports.MuiFormControlLabel = exports.MuiDrawer = exports.MuiDivider = exports.MuiDialogTitle = exports.MuiDialogContent = exports.MuiDialogActions = exports.MuiDialog = exports.MuiCssBaseline = exports.MuiCircularProgress = exports.MuiChip = exports.MuiCheckbox = exports.MuiCard = exports.MuiButtonGroup = exports.MuiButtonBase = exports.MuiButton = exports.MuiBreadcrumbs = exports.MuiBackdrop = exports.MuiAppBar = exports.MuiAlertTitle = exports.MuiAlert = exports.MuiAccordionSummary = exports.MuiAccordionDetails = exports.MuiAccordion = void 0;
 const errorIcon_1 = require("../../components/common/CustomIcon/components/ErrorIcon/errorIcon");
 const infoIcon_1 = require("../../components/common/CustomIcon/components/InfoIcon/infoIcon");
 const successIcon_1 = require("../../components/common/CustomIcon/components/SuccessIcon/successIcon");
@@ -552,6 +552,31 @@ const MuiChip = (theme) => {
     };
 };
 exports.MuiChip = MuiChip;
+/**
+ * MuiCircularProgress Component
+ * @param theme - Theme.
+ * @returns MuiCircularProgress component theme styles.
+ */
+const MuiCircularProgress = (theme) => {
+    return {
+        styleOverrides: {
+            circle: {
+                strokeLinecap: "round",
+            },
+        },
+        variants: [
+            {
+                props: {
+                    color: "alert",
+                },
+                style: {
+                    color: theme.palette.alert.main,
+                },
+            },
+        ],
+    };
+};
+exports.MuiCircularProgress = MuiCircularProgress;
 /**
  * MuiCssBaseline Component
  * @param theme - Theme.
@@ -851,6 +876,11 @@ exports.MuiLink = {
     defaultProps: {
         underline: "hover",
     },
+    styleOverrides: {
+        root: {
+            cursor: "pointer",
+        },
+    },
 };
 /**
  * MuiListItemButton Component

package/lib/theme/theme.js

@@ -96,6 +96,7 @@ function createAppTheme(customOptions) {
         MuiCard: C.MuiCard,
         MuiCheckbox: C.MuiCheckbox(theme),
         MuiChip: C.MuiChip(theme),
+        MuiCircularProgress: C.MuiCircularProgress(theme),
         MuiCssBaseline: C.MuiCssBaseline(theme),
         MuiDialog: C.MuiDialog(theme),
         MuiDialogActions: C.MuiDialogActions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "",
   "scripts": {
     "test": "jest",

package/src/components/Detail/components/DetailViewTable/detailViewTable.tsx

@@ -8,9 +8,9 @@ import {
 } from "../../../common/Paper/paper.styles";
 import { NoResults } from "../../../NoResults/noResults";
 import { Toolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
-import { Table } from "../Table/table";
+import { Table, TableProps } from "../Table/table";
 
-interface DetailViewTableProps<T extends object> {
+interface DetailViewTableProps<T extends object> extends TableProps<T> {
   className?: string;
   columns: ColumnDef<T>[];
   gridTemplateColumns: string;
@@ -28,6 +28,7 @@ export const DetailViewTable = <T extends object>({
   noResultsTitle,
   Paper = RoundedPaper,
   tools,
+  ...tableProps
 }: DetailViewTableProps<T>): JSX.Element => {
   return items.length > 0 ? (
     <Paper className={className}>
@@ -37,6 +38,7 @@ export const DetailViewTable = <T extends object>({
           columns={columns}
           gridTemplateColumns={gridTemplateColumns}
           items={items}
+          {...tableProps}
         />
       </GridPaper>
     </Paper>

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -2,6 +2,7 @@ import { TableRow } from "@mui/material";
 import { Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { v4 as uuid4 } from "uuid";
+import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
 
 export interface CollapsableRowsProps<T> {
@@ -17,9 +18,13 @@ export const CollapsableRows = <T extends object>({
   return (
     <Fragment>
       {rows.map((row) => {
+        if (row.depth > 0) return null; // Hide sub rows.
         return (
           <TableRow key={`${uuid}${row.id}`}>
-            <CollapsableCell row={row} />
+            <CollapsableCell
+              isDisabled={isCollapsableRowDisabled(tableInstance)}
+              row={row}
+            />
           </TableRow>
         );
       })}