@reltio/components 1.4.1790 → 1.4.1824-hf

package/esm/components/BasicTableView/ColumnFilter/FilterChip/styles.js

@@ -0,0 +1,24 @@
+import { makeStyles } from '@mui/styles';
+export var COLUMN_FILTER_HEIGHT = 40;
+export var useStyles = makeStyles({
+    'filter-chip': {
+        flex: 1,
+        maxWidth: '100%',
+        overflow: 'hidden',
+        justifyContent: 'flex-start',
+        marginRight: '-8px',
+        '&, &:focus': {
+            backgroundColor: 'rgba(0,0,0,0)'
+        }
+    },
+    'filter-chip__label': {
+        color: 'rgba(0,0,0,0.87)',
+        flex: 1,
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    },
+    'filter-chip__option-label': {
+        color: 'rgba(0,0,0,0.54)'
+    }
+});

package/esm/components/BasicTableView/ColumnFilter/helpers.d.ts

@@ -0,0 +1,16 @@
+import { ColumnData, ColumnFilter } from '../types';
+declare const columnFilterToMdmFilter: (columnData: ColumnData, columnFilter?: ColumnFilter) => {
+    fieldName: string;
+    filter: string;
+    values: unknown[];
+    type: import("@reltio/mdm-sdk/src/types/data-types").default;
+};
+declare const mdmFilterToColumnFilter: ({ filter, values }: {
+    filter: any;
+    values: any;
+}) => {
+    filter: any;
+    value: any;
+};
+declare const buildColumnsFilter: (columnsData: ColumnData[], filters?: Record<string, ColumnFilter>) => string;
+export { buildColumnsFilter, columnFilterToMdmFilter, mdmFilterToColumnFilter };

package/esm/components/BasicTableView/ColumnFilter/helpers.js

@@ -0,0 +1,28 @@
+import { buildFilterQueryString, Maybe } from '@reltio/mdm-sdk';
+import { propEq } from 'ramda';
+var columnFilterToMdmFilter = function (columnData, columnFilter) {
+    if (columnFilter === void 0) { columnFilter = {}; }
+    return ({
+        fieldName: columnData.id,
+        filter: columnFilter.filter,
+        values: [columnFilter.value],
+        type: columnData.dataTypeDefinition.type
+    });
+};
+var mdmFilterToColumnFilter = function (_a) {
+    var filter = _a.filter, values = _a.values;
+    return ({ filter: filter, value: values[0] });
+};
+var buildColumnsFilter = function (columnsData, filters) {
+    return Maybe.fromNull(filters)
+        .map(function (filters) {
+        return Object.entries(filters).map(function (_a) {
+            var columnId = _a[0], columnFilter = _a[1];
+            var columnData = columnsData.find(propEq('id', columnId));
+            return columnFilterToMdmFilter(columnData, columnFilter);
+        });
+    })
+        .map(buildFilterQueryString())
+        .orSome('');
+};
+export { buildColumnsFilter, columnFilterToMdmFilter, mdmFilterToColumnFilter };

package/esm/components/BasicTableView/ColumnFilter/styles.d.ts

@@ -0,0 +1,2 @@
+export const COLUMN_FILTER_HEIGHT: 40;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"columnFilter" | "dropDownButton" | "filterMenu" | "filter-editor__option">;

package/esm/components/BasicTableView/ColumnFilter/styles.js

@@ -0,0 +1,27 @@
+import { makeStyles } from '@mui/styles';
+export var COLUMN_FILTER_HEIGHT = 40;
+export var useStyles = makeStyles({
+    columnFilter: {
+        backgroundColor: 'rgba(0,0,0,0.03)',
+        display: 'flex',
+        height: "".concat(COLUMN_FILTER_HEIGHT, "px"),
+        alignItems: 'center'
+    },
+    dropDownButton: {
+        marginLeft: 'auto',
+        padding: '6px'
+    },
+    filterMenu: {
+        marginTop: '3px',
+        borderRadius: '2px',
+        padding: '15px 20px',
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: '454px'
+    },
+    'filter-editor__option': {
+        fontSize: '13px',
+        color: 'rgba(0,0,0,0.54)'
+    }
+});

package/esm/components/BasicTableView/RowCellAutoSizer/RowCellAutoSizer.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { ColumnData, RenderRowCellProps, RowValue } from '../types';
+type OnChangeHeightProps = {
+    rowIndex: number;
+    cellIndex: number;
+    columnData: ColumnData;
+    rowValue: RowValue;
+};
+type Props = {
+    onChangeHeight: (props: OnChangeHeightProps) => (size: number) => void;
+    children: ReactNode;
+} & RenderRowCellProps;
+declare const RowCellAutoSizer: ({ onChangeHeight, children: cell, ...cellProps }: Props) => JSX.Element;
+export default RowCellAutoSizer;

package/esm/components/BasicTableView/RowCellAutoSizer/RowCellAutoSizer.js

@@ -0,0 +1,26 @@
+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;
+};
+import React, { useRef } from 'react';
+import ReactResizeDetector from 'react-resize-detector';
+import { useDidUpdateEffect } from '../../../hooks';
+var RowCellAutoSizer = function (_a) {
+    var onChangeHeight = _a.onChangeHeight, cell = _a.children, cellProps = __rest(_a, ["onChangeHeight", "children"]);
+    var cellRef = useRef();
+    var rowValue = cellProps.rowValue, rowIndex = cellProps.rowIndex, columnData = cellProps.columnData, cellIndex = cellProps.cellIndex;
+    var changeCellHeight = onChangeHeight({ rowIndex: rowIndex, cellIndex: cellIndex, columnData: columnData, rowValue: rowValue });
+    var adjustCellHeight = function () { return cellRef.current && changeCellHeight(cellRef.current.clientHeight); };
+    useDidUpdateEffect(adjustCellHeight, [rowValue.rawValue]);
+    return (React.createElement("div", { ref: cellRef },
+        React.createElement(ReactResizeDetector, { handleHeight: true, onResize: adjustCellHeight }),
+        cell));
+};
+export default RowCellAutoSizer;

package/esm/components/BasicTableView/index.d.ts

@@ -0,0 +1,20 @@
+export { default as BasicTable } from "./BasicTable/BasicTable";
+export { CellRenderer as BasicTableCellRenderer } from "./BasicTable/CellRenderer/CellRenderer";
+export { default as withTableContext } from "./BasicTable/HOCs/withTableContext";
+export { TableContext as BasicTableContext } from "./BasicTable/contexts/TableContext";
+export { RowCollapseContext as BasicTableRowCollapseContext } from "./BasicTable/contexts/RowCollapseContext";
+export { default as withFilterAtBottom } from "./BasicTable/HOCs/withFilterAtBottom";
+export { default as ColumnsSettings } from "./BasicTableHeader/ColumnsSettings/ColumnsSettings";
+export { default as FilterButton } from "./BasicTableHeader/FilterButton/FilterButton";
+export { ColumnsSettingsPopup } from "./BasicTableHeader/ColumnsSettings/ColumnsSettingsPopup";
+export { default as BasicTablePagination } from "./BasicTablePagination/BasicTablePagination";
+export * from "./BasicTable/cell-value-renderers";
+export * from "./BasicTable/hooks";
+export * from "./BasicTable/contexts";
+export * from "./types";
+export { default as defaultGetRowCellHeight } from "./BasicTable/helpers/defaultGetRowCellHeight";
+export { default as defaultRenderRowCell } from "./BasicTable/helpers/defaultRenderRowCell";
+export { default as basicTableViewState } from "./viewState/basicTableViewState";
+export { default as RowCellAutoSizer } from "./RowCellAutoSizer/RowCellAutoSizer";
+export { default as CollapseRowButton } from "./CollapseRowButton/CollapseRowButton";
+export { buildColumnsFilter, columnFilterToMdmFilter } from "./ColumnFilter/helpers";

package/esm/components/BasicTableView/index.js

@@ -0,0 +1,20 @@
+export { default as BasicTable } from './BasicTable/BasicTable';
+export { CellRenderer as BasicTableCellRenderer } from './BasicTable/CellRenderer/CellRenderer';
+export { default as withTableContext } from './BasicTable/HOCs/withTableContext';
+export { TableContext as BasicTableContext } from './BasicTable/contexts/TableContext';
+export { RowCollapseContext as BasicTableRowCollapseContext } from './BasicTable/contexts/RowCollapseContext';
+export { default as withFilterAtBottom } from './BasicTable/HOCs/withFilterAtBottom';
+export { default as ColumnsSettings } from './BasicTableHeader/ColumnsSettings/ColumnsSettings';
+export { default as FilterButton } from './BasicTableHeader/FilterButton/FilterButton';
+export { ColumnsSettingsPopup } from './BasicTableHeader/ColumnsSettings/ColumnsSettingsPopup';
+export { default as BasicTablePagination } from './BasicTablePagination/BasicTablePagination';
+export * from './BasicTable/cell-value-renderers';
+export { default as defaultGetRowCellHeight } from './BasicTable/helpers/defaultGetRowCellHeight';
+export { default as defaultRenderRowCell } from './BasicTable/helpers/defaultRenderRowCell';
+export { buildColumnsFilter, columnFilterToMdmFilter } from './ColumnFilter/helpers';
+export { default as basicTableViewState } from './viewState/basicTableViewState';
+export { default as RowCellAutoSizer } from './RowCellAutoSizer/RowCellAutoSizer';
+export { default as CollapseRowButton } from './CollapseRowButton/CollapseRowButton';
+export * from './BasicTable/hooks';
+export * from './BasicTable/contexts';
+export * from './types';

package/esm/components/BasicTableView/types/index.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import { DataTypeDefinition } from '@reltio/mdm-sdk';
+import useCollapsibleTableRows from '../BasicTable/hooks/useCollapsibleTableRows';
+export type Sorting = {
+    field: string;
+    order: 'asc' | 'desc';
+};
+export type ColumnFilter = {
+    filter: string;
+    value: unknown;
+};
+export type ColumnData = {
+    id: string;
+    label: string;
+    description?: string;
+    dataTypeDefinition?: DataTypeDefinition;
+    hideable?: boolean;
+    autoResize?: boolean;
+    initialWidth?: number;
+    minWidth?: number;
+    sortable?: boolean;
+    filterable?: boolean;
+    resizable?: boolean;
+    nestedPath?: string[];
+    headCellRenderer?: React.ElementType;
+    rowCellValueRenderer?: React.ElementType;
+    draggable?: boolean;
+    filterOptions?: Array<{
+        value: string;
+        label: string;
+        dataTypeDefinition: DataTypeDefinition;
+    }>;
+    [key: string]: unknown;
+};
+export type GroupedColumns<TColumnData = ColumnData> = {
+    id: string;
+    label: string;
+    columns: TColumnData[];
+};
+export type GroupedColumnsData<TColumnData = ColumnData> = GroupedColumns<TColumnData> | TColumnData;
+export type CollapseContext = ReturnType<typeof useCollapsibleTableRows>['collapseContextValue'];
+export type RowId = string | number;
+export type RowValue = {
+    rawValue: unknown;
+    [key: string]: unknown;
+};
+export type ElementsRowsData = Array<RowValue>;
+export type TableRowsData = Array<{
+    data: Record<string, {
+        height: number;
+        indexPath?: Array<number>;
+        nestedKey?: string;
+        rowSpan?: number;
+        values: React.ReactNode;
+    }[]>;
+    id?: RowId;
+}>;
+type RowCell = {
+    values: unknown[];
+    rowSpan: number;
+    height: number;
+};
+type GetRowCellHeightArg = {
+    columnIndex: number;
+    columnData: ColumnData;
+    rowIndex: number;
+    rowValue: RowValue;
+    cellIndex: number;
+    cell: RowCell;
+};
+export type GetRowCellHeight = ({ columnIndex, columnData, rowIndex, rowValue, cellIndex, cell }: GetRowCellHeightArg) => number;
+export type RenderRowCellProps = {
+    columnIndex: number;
+    columnData: ColumnData;
+    rowIndex: number;
+    rowValue: RowValue;
+    cellIndex: number;
+    cell: RowCell;
+    CellValueRenderer: (props: unknown) => JSX.Element;
+};
+export type RenderRowCell = ({ columnIndex, columnData, rowIndex, rowValue, cellIndex, cell, CellValueRenderer }: RenderRowCellProps) => JSX.Element;
+export {};

package/esm/components/BasicTableView/viewState/basicTableViewState.js

@@ -0,0 +1,80 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { always, assoc, difference, dissoc, evolve, keys, path, when } from 'ramda';
+import { createStandardAction, toggleSortOrder } from '../../../core';
+var CHANGE_COLUMNS = 'CHANGE_COLUMNS';
+var TOGGLE_FILTERS = 'TOGGLE_FILTERS';
+var CHANGE_FILTER = 'CHANGE_FILTER';
+var TOGGLE_SORT = 'TOGGLE_SORT';
+var CHANGE_PAGE = 'CHANGE_PAGE';
+var CHANGE_ROWS_PER_PAGE = 'CHANGE_ROWS_PER_PAGE';
+export var actions = {
+    changeColumns: createStandardAction(CHANGE_COLUMNS),
+    toggleFilters: createStandardAction(TOGGLE_FILTERS),
+    changeFilter: createStandardAction(CHANGE_FILTER),
+    toggleSort: createStandardAction(TOGGLE_SORT),
+    changePage: createStandardAction(CHANGE_PAGE),
+    changeRowsPerPage: createStandardAction(CHANGE_ROWS_PER_PAGE)
+};
+export var changeVisibleColumns = function (state, nextVisibleColumns) {
+    var removedColumns = difference(state.visibleColumns, nextVisibleColumns);
+    var isRemovedColumn = function (columnId) { return removedColumns.includes(columnId); };
+    return evolve({
+        visibleColumns: always(nextVisibleColumns),
+        sorting: when(function (sorting) {
+            if (sorting === void 0) { sorting = {}; }
+            return isRemovedColumn(sorting.field);
+        }, function () {
+            var nextSortField = nextVisibleColumns[0];
+            return { field: nextSortField, order: 'asc' };
+        }),
+        filters: function (filters) {
+            return keys(filters).reduce(function (acc, columnId) { return (isRemovedColumn(columnId) ? dissoc(columnId, acc) : acc); }, filters);
+        }
+    }, state);
+};
+export var reducer = function (state, action) {
+    switch (action.type) {
+        case CHANGE_COLUMNS: {
+            var columnIds = action.payload;
+            return changeVisibleColumns(state, columnIds);
+        }
+        case TOGGLE_FILTERS: {
+            var enableFilters = !state.filters;
+            return __assign(__assign({}, state), { filters: enableFilters ? {} : null, page: enableFilters ? state.page : 0 });
+        }
+        case CHANGE_FILTER: {
+            var _a = action.payload, columnId = _a.columnId, filter = _a.filter;
+            return evolve({ filters: filter ? assoc(columnId, filter) : dissoc(columnId), page: always(0) }, state);
+        }
+        case TOGGLE_SORT: {
+            var nextSortField = action.payload;
+            var prevSortField = path(['sorting', 'field'], state);
+            var prevSortOrder = path(['sorting', 'order'], state);
+            return __assign(__assign({}, state), { sorting: {
+                    field: nextSortField,
+                    order: toggleSortOrder(nextSortField === prevSortField ? prevSortOrder : null)
+                }, page: 0 });
+        }
+        case CHANGE_PAGE:
+            return __assign(__assign({}, state), { page: action.payload });
+        case CHANGE_ROWS_PER_PAGE:
+            return __assign(__assign({}, state), { rowsPerPage: action.payload });
+        default:
+            return state;
+    }
+};
+export default {
+    reducer: reducer,
+    actions: actions,
+    changeVisibleColumns: changeVisibleColumns
+};

package/esm/components/BasicView/BasicView.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare const BasicView: React.ForwardRefExoticComponent<Pick<{
+    children?: React.ReactNode;
+    classes?: Partial<import("@mui/material/Paper").PaperClasses>;
+    elevation?: number;
+    square?: boolean;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
+    variant?: import("@mui/types").OverridableStringUnion<"elevation" | "outlined", import("@mui/material/Paper").PaperPropsVariantOverrides>;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, "children" | "square" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "elevation" | "variant">, "id" | "hidden" | "title" | "key" | "children" | "defaultValue" | "prefix" | "results" | "slot" | "color" | "translate" | "square" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "lang" | "role" | "tabIndex" | "elevation" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "variant"> & React.RefAttributes<HTMLDivElement>>;
+export default BasicView;

package/esm/components/BasicView/BasicView.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+import React, { forwardRef } from 'react';
+import Paper from '@mui/material/Paper';
+import { useStyles } from './styles';
+var BasicView = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, otherProps = __rest(_a, ["children", "className"]);
+    var styles = useStyles();
+    return (React.createElement(Paper, __assign({ ref: ref, className: className, classes: { root: styles.basicViewPaper } }, otherProps), children));
+});
+BasicView.displayName = 'BasicView';
+export default BasicView;

package/esm/components/BasicViewContent/BasicViewContent.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+type Props = React.ComponentPropsWithoutRef<'div'>;
+declare const BasicViewContent: ({ children, className, ...otherProps }: Props) => JSX.Element;
+export default BasicViewContent;

package/esm/components/BasicViewContent/BasicViewContent.js

@@ -0,0 +1,31 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+import React from 'react';
+import classnames from 'classnames';
+import { useStyles } from './styles';
+var BasicViewContent = function (_a) {
+    var children = _a.children, className = _a.className, otherProps = __rest(_a, ["children", "className"]);
+    var styles = useStyles();
+    return (React.createElement("div", __assign({ className: classnames(styles['basic-view-content'], className) }, otherProps), children));
+};
+export default BasicViewContent;

package/esm/components/BasicViewHeader/BasicViewHeader.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ToolbarProps } from '@mui/material/Toolbar';
+type Props = ToolbarProps & {
+    title?: string;
+    classes?: Partial<Record<'root' | 'title', string>>;
+};
+declare const BasicViewHeader: ({ title, children, classes, ...otherProps }: Props) => JSX.Element;
+export default BasicViewHeader;

package/esm/components/BasicViewHeader/BasicViewHeader.js

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+import React from 'react';
+import i18n from 'ui-i18n';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import { useStyles } from './styles';
+var BasicViewHeader = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.children, children = _c === void 0 ? null : _c, _d = _a.classes, classes = _d === void 0 ? {} : _d, otherProps = __rest(_a, ["title", "children", "classes"]);
+    var styles = useStyles();
+    return (React.createElement(Toolbar, __assign({ className: classes.root, classes: { root: styles.toolbar } }, otherProps),
+        title && (React.createElement(Typography, { className: classes.title, classes: { root: styles.title }, variant: "h6" }, i18n.text(title))),
+        children));
+};
+export default BasicViewHeader;

package/esm/components/BasicViewHeader/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "toolbar">;

package/esm/components/ClickAwayProvider/ClickAwayProvider.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ClickAwayListenerProps } from '@mui/material/ClickAwayListener';
 type Props = ClickAwayListenerProps;
 declare const ClickAwayProvider: (props: Props) => JSX.Element;

package/esm/components/CollaborationItem/Avatar/Avatar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AvatarProps } from '@mui/material/Avatar';
 type Props = Omit<AvatarProps, 'children'> & {
     children: string;

package/esm/components/CollaborationItem/Comment/Comment.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Comment as CommentType } from '@reltio/mdm-sdk';
 type Props = {
     uri: string;

package/esm/components/CollaborationItem/Comment/Comment.js

@@ -4,8 +4,8 @@ import Link from '@mui/material/Link';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { DropDownMenuButton } from '../../../DropDownMenuButton';
-import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
+import DropDownMenuButton from '../../DropDownMenuButton/DropDownMenuButton';
+import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
 import { CommentTarget } from '../CommentTarget/CommentTarget';
 import { CommentContent } from '../CommentContent/CommentContent';
 import { Avatar } from '../Avatar/Avatar';

package/esm/components/CollaborationItem/Comment/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "body" | "header" | "message" | "username" | "avatar" | "buttons" | "createdAt" | "commentTarget" | "dropdownMenu">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"message" | "body" | "username" | "button" | "header" | "avatar" | "buttons" | "createdAt" | "commentTarget" | "dropdownMenu">;

package/esm/components/CollaborationItem/CommentContent/CommentContent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Comment } from '@reltio/mdm-sdk';
 type Props = {
     className?: string;

package/esm/components/CollaborationItem/CommentTarget/CommentTarget.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Comment } from '@reltio/mdm-sdk';
 type Props = {
     comment: Pick<Comment, 'objectType' | 'objectId' | 'relatedObjectUris'>;

package/esm/components/CollaborationItem/CommentTarget/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "link" | "label">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "link" | "title">;

package/esm/components/CollaborationItem/RepliedComment/RepliedComment.js

@@ -9,8 +9,8 @@ import { CommentContent } from '../CommentContent/CommentContent';
 import { createEditedReplyUri, formatDate } from '../utils';
 import { CollaborationContext, useMdmUsername } from '../../../contexts';
 import { useAutoFocus } from '../../../hooks';
-import { DropDownMenuButton } from '../../../DropDownMenuButton';
-import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
+import DropDownMenuButton from '../../DropDownMenuButton/DropDownMenuButton';
+import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
 import { SendMessageArea } from '../SendMessageArea/SendMessageArea';
 import { useStyles } from './styles';
 export var RepliedComment = function (_a) {

package/esm/components/CollaborationItem/RepliedComment/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"header" | "message" | "username" | "root" | "avatar" | "createdAt" | "marked">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"message" | "username" | "header" | "root" | "avatar" | "createdAt" | "marked">;

package/esm/components/CollaborationItem/TextFieldWithMentions/TextFieldWithMentions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MentionsInputProps } from 'react-mentions';
 type Props = Omit<MentionsInputProps, 'children' | 'onChange'> & {
     onChange?: (value: string, plainTextValue: string, mentions: string[]) => void;

package/esm/components/CollaborationItem/TextFieldWithMentions/TextFieldWithMentions.js

@@ -36,7 +36,7 @@ export var TextFieldWithMentions = function (_a) {
             return display.slice(1);
         })));
     };
-    return (React.createElement(MentionsInput, __assign({}, props, { onChange: handleChange, className: classnames(styles.root, className), suggestionsPortalHost: document.body }),
+    return (React.createElement(MentionsInput, __assign({}, props, { onChange: handleChange, className: classnames(styles.root, className) }),
         React.createElement(Mention, { trigger: "+", data: users.map(function (_a) {
                 var username = _a.username;
                 return ({ id: username, display: username });

package/esm/components/CollaborationItem/TextFieldWithMentions/styles.js

@@ -20,7 +20,6 @@ export var useStyles = makeStyles(function (theme) { return ({
         },
         '&__suggestions': {
             padding: '8px 0',
-            zIndex: '1301 !important',
             borderRadius: '4px',
             backgroundColor: '#fafafa !important',
             boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',

package/esm/components/CollaborationPopup/CollaborationPopup.js

@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography';
 import DoneIcon from '@mui/icons-material/Done';
 import { CollaborationContext } from '../../contexts';
 import { CollaborationItem } from '../CollaborationItem/CollaborationItem';
-import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
+import { SmallIconButtonWithTooltip } from '../SmallIconButton';
 import { PopupWithArrow } from '../PopupWithArrow/PopupWithArrow';
 import { useStyles } from './styles';
 export var CollaborationPopup = function (_a) {

package/esm/components/CollaborationPopup/styles.d.ts

@@ -2,5 +2,5 @@ type Props = {
     scrollWidth: number;
     hasScroll: boolean;
 };
-export declare const useStyles: (props: Props) => import("@mui/styles").ClassNameMap<"title" | "header" | "popper" | "replies" | "comment" | "counter" | "root" | "messages" | "sendMessageArea" | "headerInfo" | "resolveButton" | "collaborationItem">;
+export declare const useStyles: (props: Props) => import("@mui/styles").ClassNameMap<"replies" | "title" | "comment" | "counter" | "header" | "root" | "popper" | "messages" | "sendMessageArea" | "headerInfo" | "resolveButton" | "collaborationItem">;
 export {};

package/esm/components/CollapseButton/CollapseButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
+import { SmallIconButtonWithTooltip } from '../SmallIconButton';
 type SmallIconButtonWithTooltipProps = React.ComponentPropsWithoutRef<typeof SmallIconButtonWithTooltip>;
 type Props = Omit<SmallIconButtonWithTooltipProps, 'tooltipTitle'> & {
     isOpen?: boolean;