@databiosphere/findable-ui 2.2.0 → 3.0.0

package/lib/components/common/IconButton/iconButton.styles.d.ts

@@ -1,4 +1,37 @@
 /// <reference types="react" />
+interface Props {
+    open: boolean;
+}
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: "inherit" | "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | "inkLight" | "ink" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: "large" | "medium" | "small" | "xsmall" | "xxsmall" | "xlarge" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Props, {}, {}>;
 export declare const IconButtonPrimary: import("@emotion/styled").StyledComponent<import("./iconButton").IconButtonProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -14,3 +47,4 @@ export declare const CloseDrawerIconButton: import("@emotion/styled").StyledComp
 }, {}, {}>;
 export declare const IconButtonSocials: import("@mui/material").ExtendButtonBase<import("@mui/material").IconButtonTypeMap<{}, "button">>;
 export declare const IconButtonSocialsFooter: import("@mui/material").ExtendButtonBase<import("@mui/material").IconButtonTypeMap<{}, "button">>;
+export {};

package/lib/components/common/IconButton/iconButton.styles.js

@@ -1,12 +1,38 @@
 "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.IconButtonSocialsFooter = exports.IconButtonSocials = exports.CloseDrawerIconButton = exports.MockIconButtonPrimary = exports.IconButtonSecondary = exports.IconButtonPrimary = void 0;
+exports.IconButtonSocialsFooter = exports.IconButtonSocials = exports.CloseDrawerIconButton = exports.MockIconButtonPrimary = exports.IconButtonSecondary = exports.IconButtonPrimary = exports.Button = void 0;
+const react_1 = require("@emotion/react");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const material_1 = require("@mui/material");
+const colors_1 = require("../../../styles/common/mixins/colors");
 const iconButton_1 = require("./iconButton");
+exports.Button = (0, styled_1.default)(material_1.IconButton, {
+    shouldForwardProp: (prop) => prop !== "open",
+}) `
+  ${(_a) => {
+    var { open } = _a, props = __rest(_a, ["open"]);
+    return open &&
+        (0, react_1.css) `
+      &.MuiIconButton-root {
+        background-color: ${(0, colors_1.smokeLightest)(props)};
+      }
+    `;
+}}
+`;
 // Primary icon button.
 exports.IconButtonPrimary = (0, styled_1.default)(iconButton_1.IconButton) `
   background-color: ${({ theme }) => theme.palette.primary.main};

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

@@ -37,7 +37,7 @@ export declare const Tab: import("@emotion/styled").StyledComponent<{
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "label" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
+}, "label" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "icon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "wrapped" | "iconPosition"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export {};

package/lib/config/entities.d.ts

@@ -209,8 +209,10 @@ export interface ListConfig<T = any> {
 export interface ListViewConfig {
     disablePagination?: boolean;
     enableDownload?: boolean;
+    enableRowSelection?: boolean;
     listHero?: ComponentsConfig;
     relatedView?: RelatedViewConfig;
+    rowSelectionView?: ComponentsConfig;
     subTitleHero?: ComponentsConfig;
 }
 /**

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

@@ -1,9 +1,12 @@
-import { ColumnSort } from "@tanstack/react-table";
+import { ColumnSort, RowSelectionState } from "@tanstack/react-table";
+import { VisibilityState } from "@tanstack/table-core/src/features/Visibility";
 import { CategoryValueKey, SelectCategory, SelectCategoryView, SelectedFilter } from "../../common/entities";
 import { CategoryConfig, CategoryGroup, CategoryGroupConfig, EntityPath, SavedFilter } from "../../config/entities";
 export interface EntityPageState {
     categoryGroupConfigKey: CategoryGroupConfigKey;
-    columnsVisibility: Record<string, boolean>;
+    columnsVisibility: VisibilityState;
+    enableRowSelection: boolean;
+    rowSelection: RowSelectionState;
     sorting: ColumnSort[];
 }
 export interface EntityPageStateMapper {
@@ -23,4 +26,5 @@ export declare type CategoryGroupConfigKey = CategoryGroupConfig["key"];
 export interface EntityStateSavedFilter extends Omit<SavedFilter, "sort"> {
     sorting?: ColumnSort[];
 }
+export declare type ListItem = any;
 export declare type SavedFilterByCategoryValueKey = Map<CategoryValueKey, EntityStateSavedFilter>;

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

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initReducerArguments = void 0;
 const utils_1 = require("../../../components/Table/common/utils");
+const constants_1 = require("../../../components/TableCreator/common/constants");
 const utils_2 = require("../../../config/utils");
-const constants_1 = require("../constants");
+const constants_2 = require("../constants");
 const utils_3 = require("../utils");
-const constants_2 = require("./constants");
+const constants_3 = require("./constants");
 /**
  * Builds category groups from the given category group config (adds the saved filters category to the category groups).
  * @param categoryGroupConfig - Category group config.
@@ -18,7 +19,7 @@ function buildCategoryGroups(categoryGroupConfig) {
     const clonedCategoryGroups = [...categoryGroups];
     const savedFiltersCategoryGroup = {
         categoryConfigs: [
-            { key: constants_1.SELECT_CATEGORY_KEY.SAVED_FILTERS, label: "Saved Filters" },
+            { key: constants_2.SELECT_CATEGORY_KEY.SAVED_FILTERS, label: "Saved Filters" },
         ],
     };
     clonedCategoryGroups.unshift(savedFiltersCategoryGroup);
@@ -34,7 +35,7 @@ function buildSavedSelectCategories(savedFilters) {
         return [];
     return [
         {
-            key: constants_1.SELECT_CATEGORY_KEY.SAVED_FILTERS,
+            key: constants_2.SELECT_CATEGORY_KEY.SAVED_FILTERS,
             label: "",
             values: savedFilters.map(({ title }) => ({
                 count: 1,
@@ -99,6 +100,15 @@ function initCategoryGroups(entityStateByCategoryGroupConfigKey, categoryGroupCo
     var _a;
     return (_a = entityStateByCategoryGroupConfigKey.get(categoryGroupConfigKey)) === null || _a === void 0 ? void 0 : _a.categoryGroups;
 }
+/**
+ * Initializes column visibility for the given entity.
+ * @param entityConfig - Entity config.
+ * @returns column visibility.
+ */
+function initColumnVisibility(entityConfig) {
+    const { list: { columns }, listView: { enableRowSelection = false } = {}, } = entityConfig;
+    return Object.assign({ [constants_1.ACCESSOR_KEYS.SELECT]: enableRowSelection }, (0, utils_1.getInitialTableColumnVisibility)(columns));
+}
 /**
  * Initializes entity page state.
  * @param config - Site config.
@@ -106,9 +116,12 @@ function initCategoryGroups(entityStateByCategoryGroupConfigKey, categoryGroupCo
  */
 function initEntityPageState(config) {
     return config.entities.reduce((acc, entity) => {
+        var _a;
         return Object.assign(Object.assign({}, acc), { [entity.route]: {
                 categoryGroupConfigKey: initCategoryGroupConfigKey(config, entity),
-                columnsVisibility: (0, utils_1.getInitialTableColumnVisibility)(entity.list.columns),
+                columnsVisibility: initColumnVisibility(entity),
+                enableRowSelection: Boolean((_a = entity.listView) === null || _a === void 0 ? void 0 : _a.enableRowSelection),
+                rowSelection: {},
                 sorting: (0, utils_2.getDefaultSorting)(entity),
             } });
     }, {});
@@ -132,7 +145,7 @@ function initEntityStateByCategoryGroupConfigKey(config, categoryGroupConfigKey,
         const categoryGroups = buildCategoryGroups(categoryGroupConfig);
         const savedSelectCategories = buildSavedSelectCategories(savedFilters);
         const savedFilterByCategoryValueKey = buildSavedFilterByCategoryValueKey(savedFilters);
-        entityStateByCategoryGroupConfigKey.set(key, Object.assign(Object.assign({}, constants_2.DEFAULT_ENTITY_STATE), { categoryConfigs: flattenCategoryGroups(categoryGroups), categoryGroups, filterState: key === categoryGroupConfigKey ? filterState : [], savedFilterByCategoryValueKey,
+        entityStateByCategoryGroupConfigKey.set(key, Object.assign(Object.assign({}, constants_3.DEFAULT_ENTITY_STATE), { categoryConfigs: flattenCategoryGroups(categoryGroups), categoryGroups, filterState: key === categoryGroupConfigKey ? filterState : [], savedFilterByCategoryValueKey,
             savedSelectCategories }));
     }
     return entityStateByCategoryGroupConfigKey;
@@ -168,7 +181,7 @@ function initReducerArguments(config, entityListType, decodedFilterParam, decode
     const categoryGroupConfigKey = (0, utils_3.getEntityCategoryGroupConfigKey)(entityListType, entityPageState);
     const entityStateByCategoryGroupConfigKey = initEntityStateByCategoryGroupConfigKey(config, categoryGroupConfigKey, filterState);
     const categoryGroups = initCategoryGroups(entityStateByCategoryGroupConfigKey, categoryGroupConfigKey);
-    return Object.assign(Object.assign({}, constants_2.INITIAL_STATE), { catalogState: decodedCatalogParam, categoryGroups,
+    return Object.assign(Object.assign({}, constants_3.INITIAL_STATE), { catalogState: decodedCatalogParam, categoryGroups,
         entityPageState,
         entityStateByCategoryGroupConfigKey, featureFlagState: decodedFeatureFlagParam, filterCount: (0, utils_3.getFilterCount)(filterState), filterState, tabValue: entityListType });
 }

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

@@ -1,6 +1,7 @@
-import { ColumnSort } from "@tanstack/react-table";
+import { ColumnSort, RowSelectionState, VisibilityState } from "@tanstack/react-table";
 import { CategoryKey, CategoryValueKey, PaginationDirectionType, SelectCategory } from "../../../common/entities";
 import { ENTITY_VIEW, ListItems, PaginationResponse, RelatedListItems } from "../../exploreState";
+import { ListItem } from "../entities";
 /**
  * Apply saved filter payload.
  */
@@ -9,6 +10,17 @@ export interface ApplySavedFilterPayload {
     selected: boolean;
     selectedValue: CategoryValueKey;
 }
+/**
+ * Paginate table payload.
+ */
+export declare type PaginateTablePayload = PaginationDirectionType;
+/**
+ * Patch explore response payload.
+ */
+export interface PatchExploreResponsePayload {
+    listItemKey: keyof ListItem;
+    updatedListItems: ListItems;
+}
 /**
  * Process explore response payload.
  */
@@ -24,10 +36,6 @@ export interface ProcessExploreResponsePayload {
 export interface ProcessRelatedResponsePayload {
     relatedListItems: RelatedListItems;
 }
-/**
- * Paginate table payload.
- */
-export declare type PaginateTablePayload = PaginationDirectionType;
 /**
  * Reset explore response payload.
  */
@@ -39,7 +47,13 @@ export declare type ToggleEntityViewPayload = ENTITY_VIEW;
 /**
  * Update column visibility payload.
  */
-export declare type UpdateColumnVisibilityPayload = Record<string, boolean>;
+export declare type UpdateColumnVisibilityPayload = VisibilityState;
+/**
+ * Update entity view access payload.
+ */
+export interface UpdateEntityViewAccessPayload {
+    canEdit: boolean;
+}
 /**
  * Update filter payload.
  */
@@ -48,6 +62,10 @@ export interface UpdateFilterPayload {
     selected: boolean;
     selectedValue: CategoryValueKey;
 }
+/**
+ * Update row selection payload.
+ */
+export declare type UpdateRowSelectionPayload = RowSelectionState;
 /**
  * Update sorting payload.
  */

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

@@ -1,7 +1,7 @@
 import { ColumnSort } from "@tanstack/react-table";
 import { CategoryKey, CategoryValueKey, SelectedFilter } from "../../common/entities";
-import { ExploreState, PaginationState } from "../exploreState";
-import { CategoryGroupConfigKey, EntityPageState, EntityPageStateMapper, EntityState, EntityStateSavedFilter } from "./entities";
+import { ExploreState, ListItems, PaginationState } from "../exploreState";
+import { CategoryGroupConfigKey, EntityPageState, EntityPageStateMapper, EntityState, EntityStateSavedFilter, ListItem } from "./entities";
 /**
  * Returns the entity state saved filter state for the given category key.
  * @param categoryKey - Category key.
@@ -53,12 +53,26 @@ export declare function getEntityStateSavedSorting(state: ExploreState, selected
  * @returns filter count.
  */
 export declare function getFilterCount(filterState: SelectedFilter[]): number;
+/**
+ * Returns list items with updated list items patched.
+ * @param listItems - List items.
+ * @param updatedListItems - List items to patch.
+ * @param listItemKey - List item key identifier to map list items.
+ * @returns list items with updated list items patched.
+ */
+export declare function patchEntityListItems(listItems: ListItems, updatedListItems: ListItems, listItemKey: keyof ListItem): ListItems;
 /**
  * Resets pagination.
  * @param paginationState - Pagination state.
  * @returns a reset pagination state.
  */
 export declare function resetPage(paginationState: PaginationState): PaginationState;
+/**
+ * Resets row selection for the current entity and entities that share the same category group config key.
+ * @param state - Explore state.
+ * @returns entity page state mapper with row selection reset.
+ */
+export declare function resetRowSelection(state: ExploreState): EntityPageStateMapper;
 /**
  * Updates entity page state for the given entity path.
  * @param entityPath - Entity path.
@@ -82,3 +96,11 @@ export declare function updateEntityPageStateSorting(state: ExploreState, sortin
  * @returns updated entity state by category group config key.
  */
 export declare function updateEntityStateByCategoryGroupConfigKey(state: ExploreState, nextEntityState: Partial<EntityState>): 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.
+ * @param state - Explore state.
+ * @param canEdit - User has edit access.
+ * @returns new entity page state mapper with updated column visibility and row selection state.
+ */
+export declare function updateSelectColumnVisibility(state: ExploreState, canEdit: boolean): EntityPageStateMapper;

package/lib/providers/exploreState/utils.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateEntityStateByCategoryGroupConfigKey = exports.updateEntityPageStateSorting = exports.updateEntityPageState = exports.resetPage = exports.getFilterCount = exports.getEntityStateSavedSorting = exports.getEntityStateSavedFilter = exports.getEntityState = exports.getEntityCategoryGroupConfigKey = exports.buildNextSavedFilterState = exports.buildEntityStateSavedFilterState = void 0;
-const constants_1 = require("./initializer/constants");
+exports.updateSelectColumnVisibility = exports.updateEntityStateByCategoryGroupConfigKey = exports.updateEntityPageStateSorting = exports.updateEntityPageState = exports.resetRowSelection = exports.resetPage = exports.patchEntityListItems = exports.getFilterCount = exports.getEntityStateSavedSorting = exports.getEntityStateSavedFilter = exports.getEntityState = exports.getEntityCategoryGroupConfigKey = exports.buildNextSavedFilterState = exports.buildEntityStateSavedFilterState = void 0;
+const constants_1 = require("../../components/TableCreator/common/constants");
+const constants_2 = require("./initializer/constants");
 /**
  * Returns the entity state saved filter state for the given category key.
  * @param categoryKey - Category key.
@@ -47,7 +48,7 @@ exports.getEntityCategoryGroupConfigKey = getEntityCategoryGroupConfigKey;
  */
 function getEntityState(state, categoryGroupConfigKey = getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState)) {
     return (state.entityStateByCategoryGroupConfigKey.get(categoryGroupConfigKey) ||
-        constants_1.DEFAULT_ENTITY_STATE);
+        constants_2.DEFAULT_ENTITY_STATE);
 }
 exports.getEntityState = getEntityState;
 /**
@@ -85,6 +86,23 @@ function getFilterCount(filterState) {
     return filterState.reduce((acc, filter) => acc + filter.value.length, 0);
 }
 exports.getFilterCount = getFilterCount;
+/**
+ * Returns list items with updated list items patched.
+ * @param listItems - List items.
+ * @param updatedListItems - List items to patch.
+ * @param listItemKey - List item key identifier to map list items.
+ * @returns list items with updated list items patched.
+ */
+function patchEntityListItems(listItems, updatedListItems, listItemKey) {
+    if (!listItems || !updatedListItems)
+        return listItems;
+    const listItemById = new Map(listItems.map((listItem) => [listItem[listItemKey], listItem]));
+    updatedListItems.forEach((listItem) => {
+        listItemById.set(listItem[listItemKey], listItem);
+    });
+    return [...listItemById.values()];
+}
+exports.patchEntityListItems = patchEntityListItems;
 /**
  * Resets pagination.
  * @param paginationState - Pagination state.
@@ -97,6 +115,21 @@ function resetPage(paginationState) {
     return nextPaginationState;
 }
 exports.resetPage = resetPage;
+/**
+ * Resets row selection for the current entity and entities that share the same category group config key.
+ * @param state - Explore state.
+ * @returns entity page state mapper with row selection reset.
+ */
+function resetRowSelection(state) {
+    const 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: {} }) });
+        }
+        return Object.assign(Object.assign({}, acc), { [entityPath]: entityPageState });
+    }, {});
+}
+exports.resetRowSelection = resetRowSelection;
 /**
  * Sets entity state for the given category group config key.
  * @param categoryGroupConfigKey - Category group config key.
@@ -150,3 +183,19 @@ function updateEntityStateByCategoryGroupConfigKey(state, nextEntityState) {
     }
 }
 exports.updateEntityStateByCategoryGroupConfigKey = updateEntityStateByCategoryGroupConfigKey;
+/**
+ *  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.
+ * @param state - Explore state.
+ * @param canEdit - User has edit access.
+ * @returns new entity page state mapper with updated column visibility and row selection state.
+ */
+function updateSelectColumnVisibility(state, canEdit) {
+    return Object.entries(state.entityPageState).reduce((acc, [entityPath, entityPageState]) => {
+        if (entityPageState.enableRowSelection) {
+            return Object.assign(Object.assign({}, acc), { [entityPath]: Object.assign(Object.assign({}, entityPageState), { columnsVisibility: Object.assign(Object.assign({}, entityPageState.columnsVisibility), { [constants_1.ACCESSOR_KEYS.SELECT]: canEdit }), rowSelection: {} }) });
+        }
+        return Object.assign(Object.assign({}, acc), { [entityPath]: entityPageState });
+    }, {});
+}
+exports.updateSelectColumnVisibility = updateSelectColumnVisibility;

package/lib/providers/exploreState.d.ts

@@ -2,8 +2,8 @@ import React, { Dispatch, ReactNode } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
 import { SelectCategoryView, SelectedFilter } from "../common/entities";
 import { CategoryGroup, SiteConfig } from "../config/entities";
-import { EntityPageStateMapper, EntityStateByCategoryGroupConfigKey } from "./exploreState/entities";
-import { ApplySavedFilterPayload, PaginateTablePayload, ProcessExploreResponsePayload, ProcessRelatedResponsePayload, ResetExploreResponsePayload, ToggleEntityViewPayload, UpdateColumnVisibilityPayload, UpdateFilterPayload, UpdateSortingPayload } from "./exploreState/payloads/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";
 export declare type CatalogState = string | undefined;
 /**
  * Entity view.
@@ -50,7 +50,7 @@ export declare type FeatureFlagState = string | undefined;
 /**
  * List items.
  */
-export declare type ListItems = any[] | undefined;
+export declare type ListItems = ListItem[] | undefined;
 /**
  * Pagination index.
  */
@@ -106,6 +106,7 @@ export declare enum ExploreActionKind {
     ApplySavedFilter = "APPLY_SAVED_FILTER",
     ClearFilters = "CLEAR_FILTERS",
     PaginateTable = "PAGINATE_TABLE",
+    PatchExploreResponse = "PATCH_EXPLORE_RESPONSE",
     ProcessExploreResponse = "PROCESS_EXPLORE_RESPONSE",
     ProcessRelatedResponse = "PROCESS_RELATED_RESPONSE",
     ResetExploreResponse = "RESET_EXPLORE_RESPONSE",
@@ -113,13 +114,15 @@ export declare enum ExploreActionKind {
     SelectEntityType = "SELECT_ENTITY_TYPE",
     ToggleEntityView = "TOGGLE_ENTITY_VIEW",
     UpdateColumnVisibility = "UPDATE_COLUMN_VISIBILITY",
+    UpdateEntityViewAccess = "UPDATE_ENTITY_VIEW_ACCESS",
     UpdateFilter = "UPDATE_FILTER",
+    UpdateRowSelection = "UPDATE_ROW_SELECTION",
     UpdateSorting = "UPDATE_SORTING"
 }
 /**
  * Explore action.
  */
-export declare type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | PaginateTableAction | ProcessExploreResponseAction | ProcessRelatedResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | ToggleEntityViewAction | UpdateColumnVisibilityAction | UpdateFilterAction | UpdateSortingAction;
+export declare type ExploreAction = ApplySavedFilterAction | ClearFiltersAction | PaginateTableAction | PatchExploreResponseAction | ProcessExploreResponseAction | ProcessRelatedResponseAction | ResetExploreResponseAction | ResetStateAction | SelectEntityTypeAction | ToggleEntityViewAction | UpdateColumnVisibilityAction | UpdateEntityViewAccessAction | UpdateFilterAction | UpdateRowSelectionAction | UpdateSortingAction;
 /**
  * Apply saved filter action.
  */
@@ -141,6 +144,13 @@ declare type PaginateTableAction = {
     payload: PaginateTablePayload;
     type: ExploreActionKind.PaginateTable;
 };
+/**
+ * Patch explore response action.
+ */
+declare type PatchExploreResponseAction = {
+    payload: PatchExploreResponsePayload;
+    type: ExploreActionKind.PatchExploreResponse;
+};
 /**
  * Process explore response action.
  */
@@ -177,7 +187,7 @@ declare type SelectEntityTypeAction = {
     type: ExploreActionKind.SelectEntityType;
 };
 /**
- * Toggle entity view.
+ * Toggle entity view action.
  */
 declare type ToggleEntityViewAction = {
     payload: ToggleEntityViewPayload;
@@ -190,6 +200,13 @@ declare type UpdateColumnVisibilityAction = {
     payload: UpdateColumnVisibilityPayload;
     type: ExploreActionKind.UpdateColumnVisibility;
 };
+/**
+ * Update entity view access action.
+ */
+declare type UpdateEntityViewAccessAction = {
+    payload: UpdateEntityViewAccessPayload;
+    type: ExploreActionKind.UpdateEntityViewAccess;
+};
 /**
  * Update filter action.
  */
@@ -197,6 +214,13 @@ declare type UpdateFilterAction = {
     payload: UpdateFilterPayload;
     type: ExploreActionKind.UpdateFilter;
 };
+/**
+ * Update row selection action.
+ */
+declare type UpdateRowSelectionAction = {
+    payload: UpdateRowSelectionPayload;
+    type: ExploreActionKind.UpdateRowSelection;
+};
 /**
  * Update sorting action.
  */

package/lib/providers/exploreState.js

@@ -96,6 +96,7 @@ var ExploreActionKind;
     ExploreActionKind["ApplySavedFilter"] = "APPLY_SAVED_FILTER";
     ExploreActionKind["ClearFilters"] = "CLEAR_FILTERS";
     ExploreActionKind["PaginateTable"] = "PAGINATE_TABLE";
+    ExploreActionKind["PatchExploreResponse"] = "PATCH_EXPLORE_RESPONSE";
     ExploreActionKind["ProcessExploreResponse"] = "PROCESS_EXPLORE_RESPONSE";
     ExploreActionKind["ProcessRelatedResponse"] = "PROCESS_RELATED_RESPONSE";
     ExploreActionKind["ResetExploreResponse"] = "RESET_EXPLORE_RESPONSE";
@@ -103,7 +104,9 @@ var ExploreActionKind;
     ExploreActionKind["SelectEntityType"] = "SELECT_ENTITY_TYPE";
     ExploreActionKind["ToggleEntityView"] = "TOGGLE_ENTITY_VIEW";
     ExploreActionKind["UpdateColumnVisibility"] = "UPDATE_COLUMN_VISIBILITY";
+    ExploreActionKind["UpdateEntityViewAccess"] = "UPDATE_ENTITY_VIEW_ACCESS";
     ExploreActionKind["UpdateFilter"] = "UPDATE_FILTER";
+    ExploreActionKind["UpdateRowSelection"] = "UPDATE_ROW_SELECTION";
     ExploreActionKind["UpdateSorting"] = "UPDATE_SORTING";
 })(ExploreActionKind = exports.ExploreActionKind || (exports.ExploreActionKind = {}));
 /**
@@ -159,6 +162,12 @@ function exploreReducer(state, action, exploreContext) {
             }
             return Object.assign(Object.assign({}, state), { paginationState: nextPaginationState });
         }
+        /**
+         * Patch explore response
+         */
+        case ExploreActionKind.PatchExploreResponse: {
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowSelection: {} }), listItems: (0, utils_2.patchEntityListItems)(state.listItems, payload.updatedListItems, payload.listItemKey) });
+        }
         /**
          * Process explore response
          **/
@@ -209,6 +218,18 @@ function exploreReducer(state, action, exploreContext) {
         case ExploreActionKind.ToggleEntityView: {
             return Object.assign(Object.assign({}, state), { isRelatedView: payload === ENTITY_VIEW.RELATED, listView: payload });
         }
+        /**
+         * Update column visibility
+         **/
+        case ExploreActionKind.UpdateColumnVisibility: {
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { columnsVisibility: payload }) });
+        }
+        /**
+         * Update entity view access
+         **/
+        case ExploreActionKind.UpdateEntityViewAccess: {
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateSelectColumnVisibility)(state, payload.canEdit) });
+        }
         /**
          * Update filter
          **/
@@ -219,7 +240,13 @@ function exploreReducer(state, action, exploreContext) {
                 filterState,
                 savedFilterState,
             });
-            return Object.assign(Object.assign({}, state), { filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.resetRowSelection)(state), filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
+        }
+        /**
+         * Update row selection
+         */
+        case ExploreActionKind.UpdateRowSelection: {
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowSelection: payload }) });
         }
         /**
          * Update sorting
@@ -227,12 +254,6 @@ function exploreReducer(state, action, exploreContext) {
         case ExploreActionKind.UpdateSorting: {
             return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { sorting: payload }), paginationState: (0, utils_2.resetPage)(state.paginationState) });
         }
-        /**
-         * Update column visibility
-         **/
-        case ExploreActionKind.UpdateColumnVisibility: {
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { columnsVisibility: payload }) });
-        }
         default:
             return state;
     }

package/lib/theme/common/components.js

@@ -1198,6 +1198,10 @@ const MuiTableCell = (theme) => {
         styleOverrides: {
             body: Object.assign({}, theme.typography[typography_1.TEXT_BODY_400]),
             head: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_500]), { padding: "20px" }),
+            paddingCheckbox: {
+                paddingRight: 0,
+                width: "unset",
+            },
             root: {
                 padding: "18px 20px",
             },

package/lib/views/ExploreView/exploreView.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 import { AzulEntitiesStaticResponse } from "../../apis/azul/common/entities";
-export declare type ExploreViewProps = AzulEntitiesStaticResponse;
+export interface ExploreViewProps extends AzulEntitiesStaticResponse {
+    className?: string;
+}
 export declare const ExploreView: (props: ExploreViewProps) => JSX.Element;

package/lib/views/ExploreView/exploreView.js

@@ -157,7 +157,7 @@ const ExploreView = (props) => {
                 react_1.default.createElement(clearAllFilters_1.ClearAllFilters, null),
                 react_1.default.createElement(searchAllFilters_1.SearchAllFilters, { categoryViews: categoryViews, drawerOpen: isDrawerOpen, onFilter: onFilterChange.bind(null, true) })),
             react_1.default.createElement(filters_1.Filters, { categoryFilters: categoryFilters, closeAncestor: onCloseDrawer, disabled: isRelatedView, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig === null || trackingConfig === void 0 ? void 0 : trackingConfig.trackFilterOpened }))),
-        react_1.default.createElement(index_1.Index, { List: renderList(exploreState, entityConfig, entityListType), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (react_1.default.createElement(sidebarButton_1.SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: react_1.default.createElement(tabs_1.Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabValue }), title: explorerTitle })));
+        react_1.default.createElement(index_1.Index, { className: props.className, List: renderList(exploreState, entityConfig, entityListType), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (react_1.default.createElement(sidebarButton_1.SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: react_1.default.createElement(tabs_1.Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabValue }), title: explorerTitle })));
 };
 exports.ExploreView = ExploreView;
 /**
@@ -206,7 +206,7 @@ function renderComponent(componentsConfig, response) {
  */
 function renderList(exploreState, entityConfig, entityListType) {
     const { isRelatedView, listItems, loading, paginationState, relatedListItems, tabValue, } = exploreState;
-    const { list, listView } = entityConfig;
+    const { getId: getRowId, list, listView } = entityConfig;
     const { columns: columnsConfig, defaultSort } = list;
     if (!exploreState || !tabValue) {
         return react_1.default.createElement(react_1.default.Fragment, null); //TODO: return the loading UI component
@@ -216,7 +216,7 @@ function renderList(exploreState, entityConfig, entityListType) {
         // loads with the previous tabs data on the first render after switching tabs. (or similar)
         return react_1.default.createElement(react_1.default.Fragment, null);
     }
-    return (react_1.default.createElement(tableCreator_1.TableCreator, { columns: columnsConfig, defaultSort: defaultSort, items: isRelatedView && relatedListItems ? relatedListItems : listItems !== null && listItems !== void 0 ? listItems : [], listView: listView, loading: loading, pages: paginationState.pages, pageSize: paginationState.pageSize, pagination: undefined, total: paginationState.rows }));
+    return (react_1.default.createElement(tableCreator_1.TableCreator, { columns: columnsConfig, defaultSort: defaultSort, getRowId: getRowId, items: isRelatedView && relatedListItems ? relatedListItems : listItems !== null && listItems !== void 0 ? listItems : [], listView: listView, loading: loading, pages: paginationState.pages, pageSize: paginationState.pageSize, pagination: undefined, total: paginationState.rows }));
 }
 /**
  * Renders Summaries component when all the following requirements are fulfilled:

package/package.json

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