@reltio/components 1.4.2079 → 1.4.2080

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';

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

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: React.ComponentType<{
+    [x: string]: unknown;
+}>;
+export default _default;

package/cjs/SegmentsTable/components/BarHeadCellRenderer/BarHeadCellRenderer.js

@@ -0,0 +1,17 @@
+"use strict";
+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 ramda_1 = require("ramda");
+var withTableContext_1 = require("../../../HOCs/withTableContext");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var BarHeadCellRenderer_module_css_1 = __importDefault(require("./BarHeadCellRenderer.module.css"));
+var BarHeadCellRenderer = function (_a) {
+    var maxCount = _a.maxCount;
+    return (react_1.default.createElement("div", { className: BarHeadCellRenderer_module_css_1.default.container },
+        react_1.default.createElement("div", { className: BarHeadCellRenderer_module_css_1.default.startNumber }, "0"),
+        react_1.default.createElement("div", { className: BarHeadCellRenderer_module_css_1.default.endNumber }, (0, mdm_sdk_1.formatNumberAsMetric)(maxCount, 9999))));
+};
+exports.default = (0, withTableContext_1.withTableContext)((0, ramda_1.pick)(['maxCount']))(BarHeadCellRenderer);

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

@@ -0,0 +1,9 @@
+const styles = {"container":"BarHeadCellRenderer-container---WESc","startNumber":"BarHeadCellRenderer-startNumber--i2DZ-","endNumber":"BarHeadCellRenderer-endNumber--RRTTn"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.BarHeadCellRenderer-container---WESc{align-items:flex-end;box-sizing:border-box;color:var(--mui-palette-text-secondary);display:flex;font-size:12px;height:100%;justify-content:space-between;padding:0 16px 6px;position:relative}.BarHeadCellRenderer-startNumber--i2DZ-:after{left:16px}.BarHeadCellRenderer-endNumber--RRTTn:after,.BarHeadCellRenderer-startNumber--i2DZ-:after{background-color:rgba(0,0,0,.5);bottom:0;content:"";height:4px;position:absolute;width:1px}.BarHeadCellRenderer-endNumber--RRTTn:after{right:16px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

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

@@ -0,0 +1 @@
+export { default as BarHeadCellRenderer } from './BarHeadCellRenderer';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarHeadCellRenderer = void 0;
+var BarHeadCellRenderer_1 = require("./BarHeadCellRenderer");
+Object.defineProperty(exports, "BarHeadCellRenderer", { enumerable: true, get: function () { return __importDefault(BarHeadCellRenderer_1).default; } });

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

@@ -0,0 +1,9 @@
+import React from 'react';
+type HeadCellRendererProps = {
+    className?: string;
+    headCellData: {
+        label: string;
+    };
+};
+export declare const HeadCellRenderer: ({ className, headCellData, ...otherProps }: HeadCellRendererProps) => React.JSX.Element;
+export {};

package/cjs/SegmentsTable/components/HeadCellRenderer/HeadCellRenderer.js

@@ -0,0 +1,40 @@
+"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.HeadCellRenderer = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var DefaultHeadCellRenderer_1 = __importDefault(require("react-components/dist/Table/DefaultHeadCellRenderer/DefaultHeadCellRenderer"));
+var ExpandedValueTooltip_1 = require("../../../ExpandedValueTooltip");
+var HeadCellRenderer_module_css_1 = __importDefault(require("./HeadCellRenderer.module.css"));
+var HeadCellRenderer = function (_a) {
+    var className = _a.className, headCellData = _a.headCellData, otherProps = __rest(_a, ["className", "headCellData"]);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(HeadCellRenderer_module_css_1.default.headCell, className) },
+        react_1.default.createElement(DefaultHeadCellRenderer_1.default, __assign({}, otherProps, { headCellData: __assign(__assign({}, headCellData), { label: (react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: headCellData.label },
+                    react_1.default.createElement("div", { className: HeadCellRenderer_module_css_1.default.headLabel }, headCellData.label))) }) }))));
+};
+exports.HeadCellRenderer = HeadCellRenderer;

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

@@ -0,0 +1,9 @@
+const styles = {"headCell":"HeadCellRenderer-headCell--8wzZ7","headLabel":"HeadCellRenderer-headLabel--egn2j"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.HeadCellRenderer-headCell--8wzZ7{align-items:center;display:flex;height:100%}.HeadCellRenderer-headCell--8wzZ7>div{padding:0 16px 0 22px;width:100%}.HeadCellRenderer-headCell--8wzZ7>div>span{justify-content:flex-end;width:100%}.HeadCellRenderer-headLabel--egn2j{color:var(--mui-palette-text-primary);font-size:12px;font-weight:500;line-height:16px;overflow:hidden;white-space:nowrap}.HeadCellRenderer-headLabel--egn2j: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/components/HeadCellRenderer/index.d.ts

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

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

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

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

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