@reltio/components 1.4.701 → 1.4.702

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

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Chip_1 = __importDefault(require("@material-ui/core/Chip"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importDefault(require("react"));
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var react_redux_1 = require("react-redux");
+var styles_1 = require("./styles");
+var ExpandedValueTooltip_1 = __importDefault(require("../../../ExpandedValueTooltip/ExpandedValueTooltip"));
+var FilterChip = function (_a) {
+    var filterOption = _a.filterOption, filterValue = _a.filterValue, onDelete = _a.onDelete, dataTypeDefinition = _a.dataTypeDefinition;
+    var canFilterAcceptValues = mdm_sdk_1.checkIfOptionHasValues(filterOption.value);
+    var optionLabel = filterOption.label + (canFilterAcceptValues ? ': ' : '');
+    var styles = styles_1.useStyles();
+    var attributePresentations = react_redux_1.useSelector(mdm_module_1.default.selectors.getAttributePresentations);
+    var formatValue = mdm_sdk_1.formatDataTypeValue({ attributePresentations: attributePresentations, dataTypeDefinition: dataTypeDefinition });
+    var convertedValue = mdm_sdk_1.mapFilterValue(formatValue, filterValue);
+    var filterLabel = canFilterAcceptValues ? mdm_sdk_1.getFilterValueLabel(filterOption.value, convertedValue) : '';
+    return (react_1.default.createElement(Chip_1.default, { label: react_1.default.createElement(ExpandedValueTooltip_1.default, { value: optionLabel + filterLabel },
+            react_1.default.createElement("div", { className: styles['filter-chip__label'] },
+                react_1.default.createElement("span", { className: styles['filter-chip__option-label'] }, optionLabel),
+                filterLabel)), classes: {
+            root: styles['filter-chip'],
+            label: styles['filter-chip__label']
+        }, onDelete: onDelete }));
+};
+FilterChip.propTypes = {
+    filterValue: mdm_sdk_1.FilterValueType,
+    filterOption: prop_types_1.default.shape({
+        value: prop_types_1.default.string,
+        label: prop_types_1.default.string
+    }),
+    onDelete: prop_types_1.default.func,
+    dataTypeDefinition: prop_types_1.default.object
+};
+exports.default = FilterChip;

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = exports.COLUMN_FILTER_HEIGHT = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.COLUMN_FILTER_HEIGHT = 40;
+exports.useStyles = styles_1.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/components/BasicTableView/ColumnFilter/helpers.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mdmFilterToColumnFilter = exports.columnFilterToMdmFilter = void 0;
+var columnFilterToMdmFilter = function (columnData, columnFilter) {
+    if (columnFilter === void 0) { columnFilter = {}; }
+    return ({
+        fieldName: columnData.id,
+        filter: columnFilter.filter,
+        values: [columnFilter.value],
+        type: columnData.dataTypeDefinition.type
+    });
+};
+exports.columnFilterToMdmFilter = columnFilterToMdmFilter;
+var mdmFilterToColumnFilter = function (_a) {
+    var filter = _a.filter, values = _a.values;
+    return ({ filter: filter, value: values[0] });
+};
+exports.mdmFilterToColumnFilter = mdmFilterToColumnFilter;

package/components/BasicTableView/ColumnFilter/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = exports.COLUMN_FILTER_HEIGHT = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.COLUMN_FILTER_HEIGHT = 40;
+exports.useStyles = styles_1.makeStyles({
+    columnFilter: {
+        backgroundColor: 'rgba(0,0,0,0.03)',
+        display: 'flex',
+        height: exports.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/components/BasicTableView/RowCellAutoSizer/RowCellAutoSizer.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
+var RootRef_1 = __importDefault(require("@material-ui/core/RootRef"));
+var hooks_1 = require("../../../hooks");
+var RowCellAutoSizer = function (_a) {
+    var onChangeHeight = _a.onChangeHeight, cell = _a.children, cellProps = __rest(_a, ["onChangeHeight", "children"]);
+    var cellRef = react_1.useRef(null);
+    var rowValue = cellProps.rowValue, rowIndex = cellProps.rowIndex, columnData = cellProps.columnData, cellIndex = cellProps.cellIndex;
+    var changeCellHeight = onChangeHeight({ rowIndex: rowIndex, cellIndex: cellIndex, columnData: columnData });
+    var adjustCellHeight = function () { return cellRef.current && changeCellHeight(cellRef.current.clientHeight); };
+    hooks_1.useDidUpdateEffect(adjustCellHeight, [rowValue.rawValue]);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: adjustCellHeight }),
+        react_1.default.createElement(RootRef_1.default, { rootRef: cellRef }, cell)));
+};
+RowCellAutoSizer.propTypes = {
+    onChangeHeight: prop_types_1.default.func,
+    children: prop_types_1.default.node
+};
+exports.default = RowCellAutoSizer;

package/components/BasicTableView/index.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapseRowButton = exports.RowCellAutoSizer = exports.basicTableViewState = exports.columnFilterToMdmFilter = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.BasicTablePagination = exports.FilterButton = exports.ColumnsSettings = exports.withFilterAtBottom = exports.BasicTableContext = exports.withTableContext = exports.BasicTable = void 0;
+var BasicTable_1 = require("./BasicTable/BasicTable");
+Object.defineProperty(exports, "BasicTable", { enumerable: true, get: function () { return __importDefault(BasicTable_1).default; } });
+var withTableContext_1 = require("./BasicTable/HOCs/withTableContext");
+Object.defineProperty(exports, "withTableContext", { enumerable: true, get: function () { return __importDefault(withTableContext_1).default; } });
+var TableContext_1 = require("./BasicTable/contexts/TableContext");
+Object.defineProperty(exports, "BasicTableContext", { enumerable: true, get: function () { return TableContext_1.TableContext; } });
+var withFilterAtBottom_1 = require("./BasicTable/HOCs/withFilterAtBottom");
+Object.defineProperty(exports, "withFilterAtBottom", { enumerable: true, get: function () { return __importDefault(withFilterAtBottom_1).default; } });
+var ColumnsSettings_1 = require("./BasicTableHeader/ColumnsSettings/ColumnsSettings");
+Object.defineProperty(exports, "ColumnsSettings", { enumerable: true, get: function () { return __importDefault(ColumnsSettings_1).default; } });
+var FilterButton_1 = require("./BasicTableHeader/FilterButton/FilterButton");
+Object.defineProperty(exports, "FilterButton", { enumerable: true, get: function () { return __importDefault(FilterButton_1).default; } });
+var BasicTablePagination_1 = require("./BasicTablePagination/BasicTablePagination");
+Object.defineProperty(exports, "BasicTablePagination", { enumerable: true, get: function () { return __importDefault(BasicTablePagination_1).default; } });
+__exportStar(require("./BasicTable/cell-value-renderers"), exports);
+var defaultGetRowCellHeight_1 = require("./BasicTable/helpers/defaultGetRowCellHeight");
+Object.defineProperty(exports, "defaultGetRowCellHeight", { enumerable: true, get: function () { return __importDefault(defaultGetRowCellHeight_1).default; } });
+var defaultRenderRowCell_1 = require("./BasicTable/helpers/defaultRenderRowCell");
+Object.defineProperty(exports, "defaultRenderRowCell", { enumerable: true, get: function () { return __importDefault(defaultRenderRowCell_1).default; } });
+var helpers_1 = require("./ColumnFilter/helpers");
+Object.defineProperty(exports, "columnFilterToMdmFilter", { enumerable: true, get: function () { return helpers_1.columnFilterToMdmFilter; } });
+var basicTableViewState_1 = require("./viewState/basicTableViewState");
+Object.defineProperty(exports, "basicTableViewState", { enumerable: true, get: function () { return __importDefault(basicTableViewState_1).default; } });
+var RowCellAutoSizer_1 = require("./RowCellAutoSizer/RowCellAutoSizer");
+Object.defineProperty(exports, "RowCellAutoSizer", { enumerable: true, get: function () { return __importDefault(RowCellAutoSizer_1).default; } });
+var CollapseRowButton_1 = require("./CollapseRowButton/CollapseRowButton");
+Object.defineProperty(exports, "CollapseRowButton", { enumerable: true, get: function () { return __importDefault(CollapseRowButton_1).default; } });
+__exportStar(require("./BasicTable/hooks"), exports);
+__exportStar(require("./BasicTable/contexts"), exports);

package/components/BasicTableView/viewState/basicTableViewState.js

@@ -0,0 +1,82 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reducer = exports.changeVisibleColumns = exports.actions = void 0;
+var ramda_1 = require("ramda");
+var core_1 = require("../../../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';
+exports.actions = {
+    changeColumns: core_1.createStandardAction(CHANGE_COLUMNS),
+    toggleFilters: core_1.createStandardAction(TOGGLE_FILTERS),
+    changeFilter: core_1.createStandardAction(CHANGE_FILTER),
+    toggleSort: core_1.createStandardAction(TOGGLE_SORT),
+    changePage: core_1.createStandardAction(CHANGE_PAGE),
+    changeRowsPerPage: core_1.createStandardAction(CHANGE_ROWS_PER_PAGE)
+};
+var changeVisibleColumns = function (state, nextVisibleColumns) {
+    var removedColumns = ramda_1.difference(state.visibleColumns, nextVisibleColumns);
+    var isRemovedColumn = function (columnId) { return removedColumns.includes(columnId); };
+    return ramda_1.evolve({
+        visibleColumns: ramda_1.always(nextVisibleColumns),
+        sorting: ramda_1.when(function (sorting) { return isRemovedColumn(sorting.field); }, function () {
+            var nextSortField = nextVisibleColumns[0];
+            return { field: nextSortField, order: 'asc' };
+        }),
+        filters: function (filters) {
+            return ramda_1.keys(filters).reduce(function (acc, columnId) { return (isRemovedColumn(columnId) ? ramda_1.dissoc(columnId, acc) : acc); }, filters);
+        }
+    }, state);
+};
+exports.changeVisibleColumns = changeVisibleColumns;
+var reducer = function (state, action) {
+    switch (action.type) {
+        case CHANGE_COLUMNS: {
+            var columnIds = action.payload;
+            return exports.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 ramda_1.evolve({ filters: filter ? ramda_1.assoc(columnId, filter) : ramda_1.dissoc(columnId), page: ramda_1.always(0) }, state);
+        }
+        case TOGGLE_SORT: {
+            var nextSortField = action.payload;
+            var prevSortField = ramda_1.path(['sorting', 'field'], state);
+            var prevSortOrder = ramda_1.path(['sorting', 'order'], state);
+            return __assign(__assign({}, state), { sorting: {
+                    field: nextSortField,
+                    order: core_1.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;
+    }
+};
+exports.reducer = reducer;
+exports.default = {
+    reducer: exports.reducer,
+    actions: exports.actions,
+    changeVisibleColumns: exports.changeVisibleColumns
+};

package/components/BasicView/BasicView.js

@@ -0,0 +1,61 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Paper_1 = __importDefault(require("@material-ui/core/Paper"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importStar(require("react"));
+var styles_1 = require("./styles");
+var BasicView = react_1.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, otherProps = __rest(_a, ["children", "className"]);
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Paper_1.default, __assign({ ref: ref, className: className, classes: { root: styles['basic-view__paper'] } }, otherProps), children));
+});
+BasicView.displayName = 'BasicView';
+BasicView.propTypes = {
+    children: prop_types_1.default.node,
+    className: prop_types_1.default.string
+};
+exports.default = BasicView;

package/components/BasicView/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    'basic-view__paper': {
+        display: 'flex',
+        flexDirection: 'column',
+        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)',
+        borderRadius: '3px',
+        backgroundColor: '#FFFFFF'
+    }
+});

package/components/BasicViewContent/BasicViewContent.js

@@ -0,0 +1,36 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var styles_1 = require("./styles");
+var BasicViewContent = function (_a) {
+    var children = _a.children, className = _a.className, otherProps = __rest(_a, ["children", "className"]);
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement("div", __assign({ className: classnames_1.default(styles['basic-view-content'], className) }, otherProps), children));
+};
+exports.default = BasicViewContent;

package/components/BasicViewContent/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    'basic-view-content': {
+        flex: '1 1 auto',
+        padding: '0 24px 24px',
+        '&:first-child': {
+            paddingTop: '24px'
+        }
+    }
+});

package/components/BasicViewHeader/BasicViewHeader.js

@@ -0,0 +1,39 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Toolbar_1 = __importDefault(require("@material-ui/core/Toolbar"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var styles_1 = require("./styles");
+var BasicViewHeader = function (_a) {
+    var title = _a.title, _b = _a.children, children = _b === void 0 ? null : _b, _c = _a.classes, classes = _c === void 0 ? {} : _c, otherProps = __rest(_a, ["title", "children", "classes"]);
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Toolbar_1.default, __assign({ className: classes.root, classes: { root: styles.toolbar } }, otherProps),
+        react_1.default.createElement(Typography_1.default, { className: classes.title, classes: { root: styles.title }, variant: "h6" }, title),
+        children));
+};
+exports.default = BasicViewHeader;

package/components/BasicViewHeader/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    toolbar: {
+        minHeight: '48px',
+        padding: '8px 24px',
+        lineHeight: '28px'
+    },
+    title: {
+        fontSize: '18px',
+        fontWeight: 'normal',
+        lineHeight: 'inherit',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    }
+});

package/components/ClickAwayProvider/ClickAwayProvider.js

@@ -0,0 +1,22 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ClickAwayListener_1 = __importDefault(require("@material-ui/core/ClickAwayListener"));
+var ClickAwayProvider = function (props) {
+    return react_1.default.createElement(ClickAwayListener_1.default, __assign({ mouseEvent: "onMouseDown" }, props));
+};
+exports.default = ClickAwayProvider;

package/components/CollaborationItem/Avatar/Avatar.js

@@ -0,0 +1,39 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Avatar_1 = __importDefault(require("@material-ui/core/Avatar"));
+var utils_1 = require("../utils");
+var styles_1 = require("./styles");
+var Avatar = function (_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement(Avatar_1.default, __assign({}, props, { className: classnames_1.default(styles.root, className) }), utils_1.getAbbreviationFromUserName(children)));
+};
+exports.Avatar = Avatar;

package/components/CollaborationItem/Avatar/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    root: {
+        width: '32px',
+        height: '32px',
+        fontSize: '12px',
+        color: theme.palette.text.secondary,
+        backgroundColor: 'rgba(144, 164, 174, 0.2)'
+    }
+}); });

package/components/CollaborationItem/CollaborationItem.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollaborationItem = void 0;
+var react_1 = __importStar(require("react"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Comment_1 = require("./Comment/Comment");
+var RepliedComment_1 = require("./RepliedComment/RepliedComment");
+var SendMessageArea_1 = require("./SendMessageArea/SendMessageArea");
+var styles_1 = require("./styles");
+var CollaborationItem = function (_a) {
+    var uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, classes = _a.classes, popperRef = _a.popperRef, messagesRef = _a.messagesRef, comment = _a.comment;
+    var inputRef = react_1.useRef();
+    var styles = styles_1.useStyles({ classes: classes });
+    var handleReply = function () {
+        inputRef.current.focus();
+    };
+    var sendMessageArea = (react_1.default.createElement(SendMessageArea_1.SendMessageArea, { className: styles.sendMessageArea, inputRef: inputRef, popperRef: popperRef, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, comment: comment }));
+    return (react_1.default.createElement(Box_1.default, { className: styles.root },
+        comment && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: styles.messages, ref: messagesRef },
+                react_1.default.createElement(Comment_1.Comment, { comment: comment, uri: uri, onReply: handleReply, className: styles.comment }),
+                react_1.default.createElement(Box_1.default, { className: styles.replies }, comment.replies.map(function (reply) { return (react_1.default.createElement(RepliedComment_1.RepliedComment, { key: reply.replyId, className: styles.repliedComment, reply: reply })); }))),
+            sendMessageArea)),
+        !comment && sendMessageArea));
+};
+exports.CollaborationItem = CollaborationItem;