@reltio/components 1.4.2078 → 1.4.2080

package/SimpleAttribute/IntegrationSimpleAttribute.test.js

@@ -49,11 +49,11 @@ import React from 'react';
 import { dissoc } from 'ramda';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Mode, getUnmaskedAttributeValue } from '@reltio/mdm-sdk';
+import { Mode, getUnmaskedAttributeValue, createActivity } from '@reltio/mdm-sdk';
 import { MaskedAttributesProvider } from '../contexts/MaskedAttributesContext';
 import { MdmModuleProvider } from '../contexts/MdmModuleContext';
 import { SimpleAttribute } from './SimpleAttribute';
-jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { getUnmaskedAttributeValue: jest.fn() })); });
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { getUnmaskedAttributeValue: jest.fn(), createActivity: jest.fn() })); });
 describe('masking/unmasking behaviour', function () {
     beforeAll(function () {
         getUnmaskedAttributeValue.mockResolvedValue({
@@ -67,11 +67,48 @@ describe('masking/unmasking behaviour', function () {
         attributeType: defaultAttributeType,
         attributeValue: defaultAttributeValue
     };
+    var store = {
+        entity: {
+            uri: 'entities/16U21B8f',
+            type: 'configuration/entityTypes/HCP',
+            label: 'Test Entity'
+        },
+        metadata: {
+            entityTypes: [
+                {
+                    uri: 'configuration/entityTypes/HCP',
+                    attributes: [
+                        {
+                            uri: 'configuration/entityTypes/HCP/attributes/Nested',
+                            name: 'Name',
+                            label: 'Nested',
+                            type: 'Nested',
+                            attributes: [
+                                {
+                                    uri: 'configuration/entityTypes/HCP/attributes/Nested/attributes/TextField',
+                                    label: 'Name Label',
+                                    type: 'String',
+                                    name: 'Name'
+                                }
+                            ]
+                        },
+                        {
+                            uri: 'configuration/entityTypes/HCP/attributes/RDMLookup',
+                            type: 'Reference',
+                            label: 'RDMLookup Label',
+                            name: 'RDMLookup'
+                        }
+                    ]
+                }
+            ]
+        },
+        mode: Mode.Viewing
+    };
     var setUp = function (props) {
         if (props === void 0) { props = defaultProps; }
         var Providers = function (_a) {
             var children = _a.children;
-            return (React.createElement(MdmModuleProvider, { values: { mode: Mode.Viewing } },
+            return (React.createElement(MdmModuleProvider, { values: store },
                 React.createElement(MaskedAttributesProvider, null, children)));
         };
         var user = userEvent.setup();
@@ -79,6 +116,9 @@ describe('masking/unmasking behaviour', function () {
             wrapper: Providers
         }));
     };
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
     it('should not render MaskingSwitcher if attribute should not be masked', function () {
         var attributeType = dissoc('masking', defaultAttributeType);
         var container = setUp(__assign(__assign({}, defaultProps), { attributeType: attributeType })).container;
@@ -146,7 +186,7 @@ describe('masking/unmasking behaviour', function () {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    getUnmaskedAttributeValue.mockImplementation(function () { return new Promise(function (resolve) { return (resolveGetUnmaskedAttributeValue = resolve); }); });
+                    getUnmaskedAttributeValue.mockImplementationOnce(function () { return new Promise(function (resolve) { return (resolveGetUnmaskedAttributeValue = resolve); }); });
                     _a = setUp(), container = _a.container, user = _a.user;
                     switcher = container.querySelector('.switcherWrapper');
                     return [4 /*yield*/, user.click(switcher)];
@@ -184,4 +224,69 @@ describe('masking/unmasking behaviour', function () {
         setUp({ attributeType: attributeType, attributeValue: attributeValue });
         expect(screen.getByText('**********0000')).toBeInTheDocument();
     });
+    it('should call createActivity with correct arguments when MaskingSwitcher is clicked to unmask', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var attributeType, attributeValue, _a, container, user, switcher;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    attributeType = __assign(__assign({}, defaultAttributeType), { uri: 'configuration/entityTypes/HCP/attributes/Nested/attributes/TextField' });
+                    attributeValue = __assign(__assign({}, defaultAttributeValue), { uri: 'entities/02ZRRE9/attributes/Nested/1bgW4Wj3/TextField/1bgW4nm5' });
+                    _a = setUp({ attributeType: attributeType, attributeValue: attributeValue }), container = _a.container, user = _a.user;
+                    switcher = container.querySelector('.switcherWrapper');
+                    return [4 /*yield*/, user.click(switcher)];
+                case 1:
+                    _b.sent();
+                    expect(createActivity).toHaveBeenCalledWith({
+                        label: 'ATTRIBUTE_UNMASKED',
+                        description: JSON.stringify({
+                            uri: 'entities/16U21B8f',
+                            label: 'Test Entity: Nested / Name Label - Masked value'
+                        }),
+                        items: [{ objectUri: 'entities/16U21B8f' }]
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not call createActivity if attribute is already unmasked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmaskedAttributeValue, _a, container, user, switcher;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    unmaskedAttributeValue = {
+                        value: 'Unmasked value',
+                        uri: defaultAttributeValue.uri
+                    };
+                    getUnmaskedAttributeValue.mockResolvedValue(unmaskedAttributeValue);
+                    _a = setUp(), container = _a.container, user = _a.user;
+                    switcher = container.querySelector('.switcherWrapper');
+                    return [4 /*yield*/, user.click(switcher)];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, user.click(switcher)];
+                case 2:
+                    _b.sent();
+                    expect(createActivity).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should log an error if createActivity request fails', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var consoleErrorSpy, _a, container, user, switcher;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    consoleErrorSpy = jest.spyOn(console, 'warn').mockImplementation();
+                    createActivity.mockRejectedValue(new Error('API Error'));
+                    _a = setUp(), container = _a.container, user = _a.user;
+                    switcher = container.querySelector('.switcherWrapper');
+                    return [4 /*yield*/, user.click(switcher)];
+                case 1:
+                    _b.sent();
+                    expect(consoleErrorSpy).toHaveBeenCalledWith(new Error('API Error'));
+                    consoleErrorSpy.mockRestore();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/cjs/ExpandableSearchInput/ExpandableSearchInput.d.ts

@@ -2,6 +2,9 @@ import React from 'react';
 type Props = {
     query: string;
     onChange: (value: string) => void;
+    classes?: {
+        searchButton: string;
+    };
 };
-export declare const ExpandableSearchInput: ({ query, onChange }: Props) => React.JSX.Element;
+export declare const ExpandableSearchInput: ({ query, onChange, classes }: Props) => React.JSX.Element;
 export {};

package/cjs/ExpandableSearchInput/ExpandableSearchInput.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandableSearchInput = void 0;
 var react_1 = __importStar(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
 var Close_1 = __importDefault(require("@mui/icons-material/Close"));
 var IconButton_1 = __importDefault(require("@mui/material/IconButton"));
@@ -37,18 +38,17 @@ var InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
 var Search_1 = __importDefault(require("@mui/icons-material/Search"));
 var SmallIconButton_1 = require("../SmallIconButton");
 var events_1 = require("../helpers/events");
-var styles_1 = require("./styles");
+var ExpandableSearchInput_module_css_1 = __importDefault(require("./ExpandableSearchInput.module.css"));
 var ExpandableSearchInput = function (_a) {
-    var query = _a.query, onChange = _a.onChange;
+    var query = _a.query, onChange = _a.onChange, classes = _a.classes;
     var _b = (0, react_1.useState)(query), value = _b[0], setValue = _b[1];
     var _c = (0, react_1.useState)(!!query), isOpen = _c[0], setIsOpen = _c[1];
     (0, react_1.useEffect)(function () {
         setValue(query);
     }, [query]);
-    var styles = (0, styles_1.useStyles)();
-    return isOpen ? (react_1.default.createElement(Input_1.default, { "data-reltio-id": "expandable-search-input", className: styles.input, value: value, autoFocus: true, placeholder: ui_i18n_1.default.text('Search'), disableUnderline: true, onChange: (0, ramda_1.pipe)(events_1.getValue, setValue), startAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "start" },
-            react_1.default.createElement(Search_1.default, { className: styles.startAdornment })), endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" },
-            react_1.default.createElement(SmallIconButton_1.SmallIconButton, { size: "S", icon: Close_1.default, className: styles.endAdornment, onClick: (0, ramda_1.pipe)(ramda_1.F, setIsOpen, (0, ramda_1.always)(''), (0, ramda_1.tap)(onChange), setValue) })), onKeyPress: (0, ramda_1.when)((0, ramda_1.propEq)('key', 'Enter'), (0, ramda_1.pipe)((0, ramda_1.always)(value), ramda_1.trim, onChange)) })) : (react_1.default.createElement(IconButton_1.default, { "data-reltio-id": "expandable-search-button", className: styles.searchButton, onClick: (0, ramda_1.pipe)(ramda_1.T, setIsOpen), size: "large" },
+    return isOpen ? (react_1.default.createElement(Input_1.default, { "data-reltio-id": "expandable-search-input", className: ExpandableSearchInput_module_css_1.default.input, value: value, autoFocus: true, placeholder: ui_i18n_1.default.text('Search'), disableUnderline: true, onChange: (0, ramda_1.pipe)(events_1.getValue, setValue), startAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "start" },
+            react_1.default.createElement(Search_1.default, { className: ExpandableSearchInput_module_css_1.default.startAdornment })), endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" },
+            react_1.default.createElement(SmallIconButton_1.SmallIconButton, { size: "S", icon: Close_1.default, className: ExpandableSearchInput_module_css_1.default.endAdornment, onClick: (0, ramda_1.pipe)(ramda_1.F, setIsOpen, (0, ramda_1.always)(''), (0, ramda_1.tap)(onChange), setValue) })), onKeyPress: (0, ramda_1.when)((0, ramda_1.propEq)('key', 'Enter'), (0, ramda_1.pipe)((0, ramda_1.always)(value), ramda_1.trim, onChange)) })) : (react_1.default.createElement(IconButton_1.default, { "data-reltio-id": "expandable-search-button", className: (0, classnames_1.default)(ExpandableSearchInput_module_css_1.default.searchButton, classes === null || classes === void 0 ? void 0 : classes.searchButton), onClick: (0, ramda_1.pipe)(ramda_1.T, setIsOpen), size: "large" },
         react_1.default.createElement(Search_1.default, null)));
 };
 exports.ExpandableSearchInput = ExpandableSearchInput;

package/cjs/ExpandableSearchInput/ExpandableSearchInput.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"searchButton":"ExpandableSearchInput-searchButton--Quegj","input":"ExpandableSearchInput-input--ZVai5","startAdornment":"ExpandableSearchInput-startAdornment--1qJKE","endAdornment":"ExpandableSearchInput-endAdornment--YHXxA"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ExpandableSearchInput-searchButton--Quegj{padding:8px}.ExpandableSearchInput-input--ZVai5{background:rgba(0,0,0,.03) 2px;flex:1 1;font-size:14px;margin-right:4px;max-width:350px;min-width:160px;padding:4px 0}.ExpandableSearchInput-startAdornment--1qJKE{color:rgba(0,0,0,.54);padding-left:8px}.ExpandableSearchInput-endAdornment--YHXxA{margin-right:4px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/SegmentsTable/CellRenderer.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"attribute":"SegmentsTable-attribute--xdeVk"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.SegmentsTable-attribute--xdeVk{align-items:center;color:var(--mui-palette-text-primary);display:flex;font-size:13px;font-weight:400;height:100%;line-height:15px;overflow:hidden;padding:0 16px;position:relative;white-space:nowrap}.SegmentsTable-attribute--xdeVk:after{background:linear-gradient(90deg,hsla(0,0%,100%,.2),#fff);content:"";height:100%;pointer-events:none;position:absolute;right:0;top:0;width:40px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/SegmentsTable/SegmentsTable.d.ts

@@ -0,0 +1,13 @@
+import React, { RefObject } from 'react';
+import { Segment } from '@reltio/mdm-sdk';
+import { Sorting } from '../types/basicTable';
+type Props = {
+    width: number;
+    height: number;
+    segments: Segment[];
+    basicTableRef?: RefObject<HTMLDivElement>;
+    onSort: (field: string) => void;
+    sorting?: Sorting;
+};
+export declare const SegmentsTable: ({ width, height, segments, basicTableRef, onSort, sorting }: Props) => React.JSX.Element;
+export {};

package/cjs/SegmentsTable/SegmentsTable.js

@@ -0,0 +1,100 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentsTable = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var BasicTable_1 = require("../BasicTable");
+var helpers_1 = require("./helpers");
+var HeadCellRenderer_1 = require("./components/HeadCellRenderer");
+var AttributeCellRenderer_1 = require("./components/AttributeCellRenderer");
+var LabelCellRenderer_1 = require("./components/LabelCellRenderer");
+var AudienceCountCellRenderer_1 = require("./components/AudienceCountCellRenderer");
+var BarCellRenderer_1 = require("./components/BarCellRenderer");
+var BarHeadCellRenderer_1 = require("./components/BarHeadCellRenderer");
+var SegmentsTable_module_css_1 = __importDefault(require("./SegmentsTable.module.css"));
+var SegmentsTable = function (_a) {
+    var width = _a.width, height = _a.height, segments = _a.segments, basicTableRef = _a.basicTableRef, onSort = _a.onSort, sorting = _a.sorting;
+    var containerStyle = (0, react_1.useMemo)(function () { return ({
+        width: width,
+        height: height
+    }); }, [width, height]);
+    var maxCount = (0, react_1.useMemo)(function () { return Math.max.apply(Math, segments.map(function (item) { return item.count; })); }, [segments]);
+    var headData = (0, react_1.useMemo)(function () { return [
+        {
+            id: 'label',
+            label: ui_i18n_1.default.text('Segments'),
+            resizable: false,
+            minWidth: 130,
+            sortable: true,
+            initialWidth: width * 0.34,
+            headCellRenderer: HeadCellRenderer_1.HeadCellRenderer,
+            rowCellValueRenderer: LabelCellRenderer_1.LabelCellRenderer
+        },
+        {
+            id: 'refreshedOn',
+            label: ui_i18n_1.default.text('Refreshed On'),
+            resizable: false,
+            minWidth: 160,
+            initialWidth: width * 0.18,
+            autoResize: false,
+            headCellRenderer: HeadCellRenderer_1.HeadCellRenderer,
+            rowCellValueRenderer: AttributeCellRenderer_1.AttributeCellRenderer
+        },
+        {
+            id: 'audienceCount',
+            label: ui_i18n_1.default.text('Audience Count'),
+            resizable: false,
+            minWidth: 130,
+            initialWidth: width * 0.14,
+            autoResize: false,
+            headCellRenderer: HeadCellRenderer_1.HeadCellRenderer,
+            rowCellValueRenderer: AudienceCountCellRenderer_1.AudienceCountCellRenderer
+        },
+        {
+            id: 'audienceCountBar',
+            label: '',
+            resizable: false,
+            minWidth: 130,
+            initialWidth: width * 0.34,
+            maxCount: maxCount,
+            headCellRenderer: BarHeadCellRenderer_1.BarHeadCellRenderer,
+            rowCellValueRenderer: BarCellRenderer_1.BarCellRenderer
+        }
+    ]; }, [width, maxCount]);
+    var context = (0, react_1.useMemo)(function () { return ({
+        maxCount: maxCount
+    }); }, [maxCount]);
+    var rowsData = (0, react_1.useMemo)(function () { return (0, helpers_1.getSegmentTableData)(segments); }, [segments]);
+    var handleSort = (0, react_1.useCallback)(function (field) {
+        onSort(field);
+    }, [onSort]);
+    return (react_1.default.createElement("div", { style: containerStyle, className: SegmentsTable_module_css_1.default.container },
+        react_1.default.createElement(BasicTable_1.BasicTable, { sorting: sorting, onSort: handleSort, columnsData: headData, rowsData: rowsData, headRowHeight: 48, getRowCellHeight: null, defaultColumnWidth: 100, defaultColumnMinWidth: 100, ref: basicTableRef, context: context })));
+};
+exports.SegmentsTable = SegmentsTable;

package/cjs/SegmentsTable/SegmentsTable.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"container":"SegmentsTable-container--LfVXz"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.SegmentsTable-container--LfVXz{display:flex;flex-direction:column}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/SegmentsTable/SegmentsTable.test.d.ts

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

package/cjs/SegmentsTable/SegmentsTable.test.js

@@ -0,0 +1,170 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 react_2 = require("@testing-library/react");
+var SegmentsTable_1 = require("./SegmentsTable");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var test_utils_1 = require("../test-utils");
+var mockSegments = [
+    {
+        uri: 'savedSearches/0BDCmca',
+        name: 'Test Segment 1',
+        description: '',
+        query: "filter=equals(entity.type%2C'configuration%2FentityTypes%2FHCO')",
+        type: mdm_sdk_1.SavedSearchType.SEGMENTATION,
+        isFavorite: true,
+        uiState: {
+            groups: [
+                {
+                    operator: 'and',
+                    entityType: 'configuration/entityTypes/HCO',
+                    id: 'Qvg_2OeFm7UkX19-9C2jC'
+                }
+            ]
+        },
+        createDate: 1730795566249,
+        updateDate: 1730795573955,
+        isPublic: true,
+        owner: 'test.test',
+        count: 10000
+    },
+    {
+        uri: 'savedSearches/0BXFqDH',
+        name: 'Test Segment 2',
+        description: '',
+        query: "filter=equals(entity.type%2C'configuration%2FentityTypes%2FHCO')",
+        type: mdm_sdk_1.SavedSearchType.SEGMENTATION,
+        isFavorite: false,
+        uiState: {
+            groups: [
+                {
+                    operator: 'and',
+                    entityType: 'configuration/entityTypes/HCO',
+                    id: 'SWLihLs4pRtsGpwWPXe8M'
+                }
+            ]
+        },
+        createDate: 1729868922843,
+        updateDate: 1729869197093,
+        isPublic: true,
+        owner: 'test.test',
+        count: 20000
+    }
+];
+var defaultProps = {
+    width: 1920,
+    height: 1080,
+    segments: mockSegments,
+    onSort: jest.fn()
+};
+var setUp = function (props) {
+    if (props === void 0) { props = {}; }
+    var user = user_event_1.default.setup();
+    return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(SegmentsTable_1.SegmentsTable, __assign({}, defaultProps, props))));
+};
+describe('SegmentsTable tests', function () {
+    var unmockTableSizing;
+    beforeAll(function () {
+        unmockTableSizing = (0, test_utils_1.mockBasicTableSizing)();
+    });
+    afterAll(function () {
+        unmockTableSizing();
+    });
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    it('renders table with correct columns', function () {
+        setUp();
+        expect(react_2.screen.getByText('Segments')).toBeInTheDocument();
+        expect(react_2.screen.getByText('Refreshed On')).toBeInTheDocument();
+        expect(react_2.screen.getByText('Audience Count')).toBeInTheDocument();
+    });
+    it('displays segment data correctly', function () {
+        setUp();
+        expect(react_2.screen.getByText('Test Segment 1')).toBeInTheDocument();
+        expect(react_2.screen.getByText('Test Segment 2')).toBeInTheDocument();
+        expect(react_2.screen.getByText('10.0K')).toBeInTheDocument();
+        expect(react_2.screen.getAllByText('20.0K')).toHaveLength(2);
+    });
+    it('calls onSort when clicking sortable column header', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, segmentsHeader;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    segmentsHeader = react_2.screen.getByText('Segments');
+                    return [4 /*yield*/, user.click(segmentsHeader)];
+                case 1:
+                    _a.sent();
+                    expect(defaultProps.onSort).toHaveBeenCalledWith('label');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('shows star icon for favorite segments', function () {
+        setUp();
+        var starIcons = document.querySelectorAll('.starIcon');
+        expect(starIcons[0]).toHaveClass('starIconActive');
+        expect(starIcons[1]).not.toHaveClass('starIconActive');
+    });
+    it('displays formatted dates in Refreshed On column', function () {
+        setUp();
+        expect(react_2.screen.getByText('11/05/2024 8:32 AM')).toBeInTheDocument();
+        expect(react_2.screen.getByText('10/25/2024 3:13 PM')).toBeInTheDocument();
+    });
+    it('calculates max count correctly for bar visualization', function () {
+        setUp();
+        expect(react_2.screen.getAllByText('20.0K')).toHaveLength(2);
+    });
+});

package/cjs/SegmentsTable/components/AttributeCellRenderer/AttributeCellRenderer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    value?: string;
+};
+export declare const AttributeCellRenderer: ({ value }: Props) => React.JSX.Element;
+export {};

package/cjs/SegmentsTable/components/AttributeCellRenderer/AttributeCellRenderer.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributeCellRenderer = void 0;
+var react_1 = __importDefault(require("react"));
+var ExpandedValueTooltip_1 = require("../../../ExpandedValueTooltip");
+var CellRenderer_module_css_1 = __importDefault(require("../../CellRenderer.module.css"));
+var AttributeCellRenderer = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? '' : _b;
+    return (react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: value },
+        react_1.default.createElement("div", { className: CellRenderer_module_css_1.default.attribute }, value)));
+};
+exports.AttributeCellRenderer = AttributeCellRenderer;

package/cjs/SegmentsTable/components/AttributeCellRenderer/index.d.ts

@@ -0,0 +1 @@
+export { AttributeCellRenderer } from './AttributeCellRenderer';

package/cjs/SegmentsTable/components/AttributeCellRenderer/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributeCellRenderer = void 0;
+var AttributeCellRenderer_1 = require("./AttributeCellRenderer");
+Object.defineProperty(exports, "AttributeCellRenderer", { enumerable: true, get: function () { return AttributeCellRenderer_1.AttributeCellRenderer; } });

package/cjs/SegmentsTable/components/AudienceCountCellRenderer/AudienceCountCellRenderer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    value: string;
+};
+export declare const AudienceCountCellRenderer: ({ value }: Props) => React.JSX.Element;
+export {};

package/cjs/SegmentsTable/components/AudienceCountCellRenderer/AudienceCountCellRenderer.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AudienceCountCellRenderer = void 0;
+var react_1 = __importDefault(require("react"));
+var ExpandedValueTooltip_1 = require("../../../ExpandedValueTooltip");
+var AudienceCountCellRenderer_module_css_1 = __importDefault(require("./AudienceCountCellRenderer.module.css"));
+var AudienceCountCellRenderer = function (_a) {
+    var value = _a.value;
+    return (react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: value },
+        react_1.default.createElement("div", { className: AudienceCountCellRenderer_module_css_1.default.countValue }, value)));
+};
+exports.AudienceCountCellRenderer = AudienceCountCellRenderer;

package/cjs/SegmentsTable/components/AudienceCountCellRenderer/AudienceCountCellRenderer.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"countValue":"AudienceCountCellRenderer-countValue--atqCe"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.AudienceCountCellRenderer-countValue--atqCe{align-items:center;color:var(--mui-palette-text-primary);display:flex;font-size:13px;font-weight:400;height:100%;justify-content:end;line-height:15px;overflow:hidden;padding:0 16px;white-space:nowrap}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/SegmentsTable/components/AudienceCountCellRenderer/index.d.ts

@@ -0,0 +1 @@
+export { AudienceCountCellRenderer } from './AudienceCountCellRenderer';

package/cjs/SegmentsTable/components/AudienceCountCellRenderer/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AudienceCountCellRenderer = void 0;
+var AudienceCountCellRenderer_1 = require("./AudienceCountCellRenderer");
+Object.defineProperty(exports, "AudienceCountCellRenderer", { enumerable: true, get: function () { return AudienceCountCellRenderer_1.AudienceCountCellRenderer; } });

package/cjs/SegmentsTable/components/BarCellRenderer/BarCellRenderer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type Props = {
+    value: number;
+    columnData: {
+        maxCount: number;
+    };
+};
+export declare const BarCellRenderer: ({ value, columnData }: Props) => React.JSX.Element;
+export {};

package/cjs/SegmentsTable/components/BarCellRenderer/BarCellRenderer.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarCellRenderer = void 0;
+var react_1 = __importDefault(require("react"));
+var ColorBar_1 = require("../../../ColorBar");
+var BarCellRenderer_module_css_1 = __importDefault(require("./BarCellRenderer.module.css"));
+var BarCellRenderer = function (_a) {
+    var value = _a.value, columnData = _a.columnData;
+    return (react_1.default.createElement("div", { className: BarCellRenderer_module_css_1.default.container },
+        react_1.default.createElement("div", { className: BarCellRenderer_module_css_1.default.colorBarContainer },
+            react_1.default.createElement(ColorBar_1.ColorBar, { width: value, maxWidth: columnData.maxCount }))));
+};
+exports.BarCellRenderer = BarCellRenderer;

package/cjs/SegmentsTable/components/BarCellRenderer/BarCellRenderer.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"container":"BarCellRenderer-container--AEzOK","colorBarContainer":"BarCellRenderer-colorBarContainer---yasX"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.BarCellRenderer-container--AEzOK{align-items:center;display:flex;height:100%;padding:0 16px}.BarCellRenderer-colorBarContainer---yasX{height:20px;position:relative;width:100%}.BarCellRenderer-colorBarContainer---yasX>div{background-color:#0072ce;opacity:1}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/SegmentsTable/components/BarCellRenderer/index.d.ts

@@ -0,0 +1 @@
+export { BarCellRenderer } from './BarCellRenderer';