dotdata_widgets 0.1.4 → 0.1.6

package/lib/components/accordion/Accordion.js

@@ -31,7 +31,7 @@ exports.AccordionHeader = AccordionHeader;
 // eslint-disable-next-line @typescript-eslint/ban-types
 const AccordionDetails = ({ children, }) => react_1.default.createElement(react_1.default.Fragment, null, children);
 exports.AccordionDetails = AccordionDetails;
-exports.Accordion = (0, react_1.forwardRef)(({ children, expandedDetailsStyle, collapsedDetailsStyle, expandedHeaderStyle, collapsedHeaderStyle, toggleStyle, initialState, }, ref) => {
+exports.Accordion = (0, react_1.forwardRef)(({ children, initialState, className }, ref) => {
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(() => initialState ?? false);
     const components = react_1.default.Children.toArray(children).filter(react_1.default.isValidElement);
     const Header = components.find(child => child?.type === exports.AccordionHeader);
@@ -41,12 +41,11 @@ exports.Accordion = (0, react_1.forwardRef)(({ children, expandedDetailsStyle, c
             setIsExpanded(false);
         },
     }));
-    return (react_1.default.createElement("div", { className: `dotdata-accordion ${isExpanded
-            ? 'dotdata-accordion-expanded'
-            : 'dotdata-accordion-collapsed'}` },
-        react_1.default.createElement("div", { style: isExpanded ? expandedHeaderStyle : collapsedHeaderStyle, className: "dotdata-accordion-header" },
-            react_1.default.createElement("div", { className: `dotdata-accordion-header-toggle ${isExpanded ? 'expanded' : ''}`, style: toggleStyle, onClick: () => setIsExpanded(!isExpanded) }, "\u25B6"),
+    const accordionClasses = (defaultClassNames) => `${defaultClassNames} ${isExpanded ? 'expanded' : 'collapsed'}`;
+    return (react_1.default.createElement("div", { className: accordionClasses(`dotdata-accordion ${className ?? ''}`) },
+        react_1.default.createElement("div", { className: accordionClasses('dotdata-accordion-header') },
+            react_1.default.createElement("div", { className: accordionClasses('dotdata-accordion-header-toggle'), onClick: () => setIsExpanded(!isExpanded) }, "\u25B6"),
             Header),
-        isExpanded && (react_1.default.createElement("div", { style: isExpanded ? expandedDetailsStyle : collapsedDetailsStyle, className: "dotdata-accordion-details" }, Details))));
+        isExpanded && (react_1.default.createElement("div", { className: accordionClasses('dotdata-accordion-details') }, Details))));
 });
 //# sourceMappingURL=Accordion.js.map

package/lib/feature/feature-explanation/FeatureExplanation.js

@@ -13,8 +13,8 @@ const DataSlotExplanationBlock_1 = require("./components/DataSlotExplanationBloc
 const TopicExplanationBlock_1 = require("./components/TopicExplanationBlock");
 const TextWithDataSlotContextExplanationBlock_1 = require("./components/TextWithDataSlotContextExplanationBlock");
 const UnknownExplanationBlock_1 = require("./components/UnknownExplanationBlock");
-const FeatureExplanation = ({ explanationBlocks, }) => {
-    return (react_1.default.createElement("div", { style: { display: 'flex' } }, explanationBlocks.map(block => {
+const FeatureExplanationInternal = ({ explanationBlocks, }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null, explanationBlocks.map(block => {
         if (feature_explanation_1.FeatureExplanationBlock.isTextExplanationBlock(block)) {
             return react_1.default.createElement(TextExplanationBlock_1.TextExplanationBlock, { ...block });
         }
@@ -34,7 +34,7 @@ const FeatureExplanation = ({ explanationBlocks, }) => {
             return react_1.default.createElement(TopicExplanationBlock_1.TopicExplanationBlock, { ...block });
         }
         else if (feature_explanation_1.FeatureExplanationBlock.isOperatorExplanationBlock(block)) {
-            return (react_1.default.createElement(exports.FeatureExplanation, { explanationBlocks: block.tokens.map(token => ({
+            return (react_1.default.createElement(FeatureExplanationInternal, { explanationBlocks: block.tokens.map(token => ({
                     ...token,
                     pathType: block.type,
                 })) }));
@@ -44,5 +44,9 @@ const FeatureExplanation = ({ explanationBlocks, }) => {
         }
     })));
 };
+const FeatureExplanation = ({ explanationBlocks, }) => {
+    return (react_1.default.createElement("span", { style: { whiteSpace: 'nowrap' } },
+        react_1.default.createElement(FeatureExplanationInternal, { explanationBlocks: explanationBlocks })));
+};
 exports.FeatureExplanation = FeatureExplanation;
 //# sourceMappingURL=FeatureExplanation.js.map

package/lib/feature/feature-explanation/components/ColoredExplanationBlock.js

@@ -24,13 +24,7 @@ const ColoredExplanationBlock = ({ block, children }) => {
             fontWeight = '500';
         }
     }
-    return (react_1.default.createElement("span", { style: {
-            color: color,
-            fontWeight,
-            display: 'inline-block',
-            wordBreak: 'break-word',
-            whiteSpace: 'pre',
-        } }, children));
+    return react_1.default.createElement("span", { style: { color, fontWeight } }, children);
 };
 exports.ColoredExplanationBlock = ColoredExplanationBlock;
 //# sourceMappingURL=ColoredExplanationBlock.js.map

package/lib/feature/feature-explanation/components/ColumnExplanationBlock.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnExplanationBlock = void 0;
 const react_1 = __importDefault(require("react"));
 const ColoredExplanationBlock_1 = require("./ColoredExplanationBlock");
-const ColumnExplanationBlock = block => (react_1.default.createElement(ColoredExplanationBlock_1.ColoredExplanationBlock, { block: block },
-    react_1.default.createElement("span", { className: "column-name" }, block.columnName)));
+const ColumnExplanationBlock = block => (react_1.default.createElement(ColoredExplanationBlock_1.ColoredExplanationBlock, { block: block }, block.columnName));
 exports.ColumnExplanationBlock = ColumnExplanationBlock;
 //# sourceMappingURL=ColumnExplanationBlock.js.map

package/lib/feature/feature-explanation/components/DataSlotExplanationBlock.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataSlotExplanationBlock = void 0;
 const react_1 = __importDefault(require("react"));
 const ColoredExplanationBlock_1 = require("./ColoredExplanationBlock");
-const DataSlotExplanationBlock = block => (react_1.default.createElement(ColoredExplanationBlock_1.ColoredExplanationBlock, { block: block },
-    react_1.default.createElement("span", { className: "sa-data-slot-name" }, block.dataSlotName)));
+const DataSlotExplanationBlock = block => (react_1.default.createElement(ColoredExplanationBlock_1.ColoredExplanationBlock, { block: block }, block.dataSlotName));
 exports.DataSlotExplanationBlock = DataSlotExplanationBlock;
 //# sourceMappingURL=DataSlotExplanationBlock.js.map

package/lib/feature/feature-explanation/components/TextExplanationBlock.js

@@ -5,6 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextExplanationBlock = void 0;
 const react_1 = __importDefault(require("react"));
-const TextExplanationBlock = ({ text, }) => react_1.default.createElement("span", { style: { whiteSpace: 'pre' } }, text);
+const TextExplanationBlock = ({ text, }) => {
+    return react_1.default.createElement(react_1.default.Fragment, null, text);
+};
 exports.TextExplanationBlock = TextExplanationBlock;
 //# sourceMappingURL=TextExplanationBlock.js.map

package/lib/feature/feature-likes/feature-likes.js

@@ -5,34 +5,40 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeatureLikes = exports.FeatureLike = void 0;
 const react_1 = __importDefault(require("react"));
+const ThumbUpAlt_1 = __importDefault(require("@mui/icons-material/ThumbUpAlt"));
+const ThumbDownAlt_1 = __importDefault(require("@mui/icons-material/ThumbDownAlt"));
 const ThumbUpOffAlt_1 = __importDefault(require("@mui/icons-material/ThumbUpOffAlt"));
 const ThumbDownOffAlt_1 = __importDefault(require("@mui/icons-material/ThumbDownOffAlt"));
+const material_1 = require("@mui/material");
 var FeatureLike;
 (function (FeatureLike) {
     FeatureLike[FeatureLike["Neutral"] = 0] = "Neutral";
     FeatureLike[FeatureLike["Liked"] = 1] = "Liked";
     FeatureLike[FeatureLike["Disliked"] = 2] = "Disliked";
 })(FeatureLike = exports.FeatureLike || (exports.FeatureLike = {}));
+const neutralStyle = {
+    cursor: 'pointer',
+    fontSize: '18px',
+    color: 'var(  --c-grey-600)',
+};
+const likedStyle = {
+    cursor: 'pointer',
+    fontSize: '18px',
+    color: 'var( --c-green-600)',
+};
+const dislikedStyle = {
+    cursor: 'pointer',
+    fontSize: '18px',
+    color: 'var(--c-red-600)',
+};
 const FeatureLikes = ({ liked, toggleIsLiked, toggleIsDisliked }) => {
     return (react_1.default.createElement("span", { style: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
         } },
-        react_1.default.createElement(ThumbUpOffAlt_1.default, { onClick: toggleIsLiked, sx: {
-                cursor: 'pointer',
-                fontSize: '18px',
-                color: liked === FeatureLike.Liked
-                    ? 'var( --c-green-600)'
-                    : 'var(  --c-grey-600)',
-            } }),
-        react_1.default.createElement(ThumbDownOffAlt_1.default, { onClick: toggleIsDisliked, sx: {
-                cursor: 'pointer',
-                fontSize: '18px',
-                color: liked === FeatureLike.Disliked
-                    ? 'var(--c-red-600)'
-                    : 'var(  --c-grey-600)',
-            } })));
+        react_1.default.createElement(material_1.IconButton, { color: "primary", size: "small", onClick: toggleIsLiked }, [FeatureLike.Neutral, FeatureLike.Disliked].includes(liked) ? (react_1.default.createElement(ThumbUpOffAlt_1.default, { sx: neutralStyle })) : (react_1.default.createElement(ThumbUpAlt_1.default, { sx: likedStyle }))),
+        react_1.default.createElement(material_1.IconButton, { color: "primary", size: "small", onClick: toggleIsDisliked }, [FeatureLike.Neutral, FeatureLike.Liked].includes(liked) ? (react_1.default.createElement(ThumbDownOffAlt_1.default, { sx: neutralStyle })) : (react_1.default.createElement(ThumbDownAlt_1.default, { sx: dislikedStyle })))));
 };
 exports.FeatureLikes = FeatureLikes;
 //# sourceMappingURL=feature-likes.js.map

package/lib/feature-descriptor/domains-descriptions-tree/components/column-tree-item.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.ColumnTreeItem = void 0;
+const react_1 = __importDefault(require("react"));
+const TreeItem_1 = __importDefault(require("@mui/lab/TreeItem"));
+const descriptions_tree_item_1 = require("./descriptions-tree-item");
+const tree_item_label_1 = require("./tree-item-label");
+const ColumnTreeItem = ({ column }) => {
+    return column.descriptions.length === 1 ? (react_1.default.createElement(descriptions_tree_item_1.DescriptionsTreeItem, { descriptions: column.descriptions })) : (react_1.default.createElement(TreeItem_1.default, { nodeId: column.nodeId, label: react_1.default.createElement(tree_item_label_1.TreeItemLabel, { label: column.summary, nodeId: column.nodeId, managedDescriptions: column.descriptions }) },
+        react_1.default.createElement(descriptions_tree_item_1.DescriptionsTreeItem, { descriptions: column.descriptions })));
+};
+exports.ColumnTreeItem = ColumnTreeItem;
+//# sourceMappingURL=column-tree-item.js.map

package/lib/feature-descriptor/domains-descriptions-tree/components/descriptions-tree-item.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DescriptionsTreeItem = void 0;
+const react_1 = __importDefault(require("react"));
+const react_virtual_1 = require("@tanstack/react-virtual");
+const material_1 = require("@mui/material");
+const tree_item_label_1 = require("./tree-item-label");
+const feature_descriptor_domain_1 = require("../../../models/feature-descriptor-domain");
+const listLeftIndentation = '31px';
+const DescriptionsVirtualList = ({ descriptions, }) => {
+    const parentRef = react_1.default.useRef(null);
+    const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: descriptions.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => 25,
+        overscan: 5,
+    });
+    return (react_1.default.createElement("div", { ref: parentRef, style: {
+            height: `${Math.min(25 * descriptions.length, 500)}px`,
+            overflowY: 'auto',
+            overflowX: 'hidden',
+        } },
+        react_1.default.createElement("div", { style: {
+                height: `${rowVirtualizer.getTotalSize()}px`,
+                position: 'relative',
+            } }, rowVirtualizer.getVirtualItems().map(virtualRow => (react_1.default.createElement("div", { key: virtualRow.index, style: {
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                left: listLeftIndentation,
+                height: `${virtualRow.size}px`,
+                transform: `translateY(${virtualRow.start}px)`,
+            } },
+            react_1.default.createElement(tree_item_label_1.TreeItemLabel, { label: descriptions[virtualRow.index].description, nodeId: descriptions[virtualRow.index].nodeId, managedDescriptions: [descriptions[virtualRow.index]] })))))));
+};
+const DescriptionsList = ({ descriptions }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null, descriptions.map(description => (react_1.default.createElement(tree_item_label_1.TreeItemLabel, { key: feature_descriptor_domain_1.DomainsDescriptionId.toString(description.id), label: description.description, nodeId: description.nodeId, managedDescriptions: [description] })))));
+};
+const DescriptionsTreeItem = ({ descriptions, }) => {
+    const [isVirtualListVisible, setIsVirtualListVisible] = react_1.default.useState(() => false);
+    const [limitedDescriptions] = react_1.default.useState(() => descriptions.length < 6 ? descriptions : descriptions.slice(0, 3));
+    const isWithShowMore = descriptions.length >= 6;
+    return isVirtualListVisible ? (react_1.default.createElement(DescriptionsVirtualList, { descriptions: descriptions })) : (react_1.default.createElement("div", { style: { marginLeft: listLeftIndentation } },
+        react_1.default.createElement(DescriptionsList, { descriptions: limitedDescriptions }),
+        isWithShowMore ? (react_1.default.createElement(material_1.Button, { sx: { textTransform: 'lowercase', display: 'block' }, size: "small", onClick: () => setIsVirtualListVisible(true) }, "more")) : null));
+};
+exports.DescriptionsTreeItem = DescriptionsTreeItem;
+//# sourceMappingURL=descriptions-tree-item.js.map

package/lib/feature-descriptor/domains-descriptions-tree/components/index.js

@@ -0,0 +1,18 @@
+"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 __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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./type-tree-item"), exports);
+//# sourceMappingURL=index.js.map

package/lib/feature-descriptor/domains-descriptions-tree/components/tree-item-label.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeItemLabel = void 0;
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const _utils_1 = require("../../../utils");
+const feature_descriptor_domain_1 = require("../../../models/feature-descriptor-domain");
+const context_1 = require("../context");
+var SelectionIndicator;
+(function (SelectionIndicator) {
+    SelectionIndicator["Checked"] = "checked";
+    SelectionIndicator["Unchecked"] = "unchecked";
+    SelectionIndicator["Indeterminate"] = "indeterminate";
+})(SelectionIndicator || (SelectionIndicator = {}));
+const TreeItemLabel = props => {
+    const { selectable } = (0, context_1.useDomainsDescriptionsTreeConfig)();
+    const [selectedTreeItems, { toggleTreeItemSelection }] = (0, context_1.useDomainsDescriptionsTreeItemSelection)();
+    const [selectedDomainDescriptionsIds, { toggleSelection }] = (0, context_1.useDomainsDescriptionsSelectionContext)();
+    const managedDescriptionIds = react_1.default.useMemo(() => feature_descriptor_domain_1.DomainsDescriptionId.listToMap(props.managedDescriptions.map((0, _utils_1.extractProperty)('id'))), []);
+    const checked = react_1.default.useMemo(() => getSelectionState(managedDescriptionIds, selectedDomainDescriptionsIds), [/*props.managedDescriptions,*/ selectedDomainDescriptionsIds]);
+    function isSelected() {
+        return (0, _utils_1.isSet)(selectedTreeItems[props.nodeId]);
+    }
+    return (react_1.default.createElement(material_1.FormControlLabel, { className: `text-ellipsis selection-indicator ${isSelected() ? 'selected' : ''}`, sx: { display: 'block', paddingLeft: selectable ? 'initial' : '10px' }, control: selectable ? (react_1.default.createElement(material_1.Checkbox, { sx: { paddingBlock: '2px' }, checked: checked === SelectionIndicator.Checked, indeterminate: checked === SelectionIndicator.Indeterminate, onClick: event => {
+                event.stopPropagation();
+                const checked = event.target.checked;
+                toggleSelection(checked, props.managedDescriptions.map((0, _utils_1.extractProperty)('id')));
+            } })) : (react_1.default.createElement(react_1.default.Fragment, null)), label: props.label, onClick: event => {
+            toggleTreeItemSelection(props.nodeId, props.managedDescriptions.flatMap((0, _utils_1.extractProperty)('domains')));
+            event.stopPropagation();
+            event.preventDefault();
+        } }));
+};
+exports.TreeItemLabel = TreeItemLabel;
+function getSelectionState(managedDescriptionIds, selectedIds) {
+    const managedNotSelectedIds = Array.from(managedDescriptionIds.keys()).filter(id => !selectedIds.has(id)).length;
+    const areAllChecked = managedNotSelectedIds === 0;
+    const areAllUnselected = managedNotSelectedIds === managedDescriptionIds.size;
+    return areAllChecked
+        ? SelectionIndicator.Checked
+        : areAllUnselected
+            ? SelectionIndicator.Unchecked
+            : SelectionIndicator.Indeterminate;
+}
+//# sourceMappingURL=tree-item-label.js.map

package/lib/feature-descriptor/domains-descriptions-tree/components/type-tree-item.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypeTreeItem = void 0;
+const react_1 = __importDefault(require("react"));
+const TreeItem_1 = __importDefault(require("@mui/lab/TreeItem"));
+const _utils_1 = require("../../../utils");
+const column_tree_item_1 = require("./column-tree-item");
+const tree_item_label_1 = require("./tree-item-label");
+const TypeTreeItem = ({ type }) => {
+    return type.columns.length === 1 ? (react_1.default.createElement(column_tree_item_1.ColumnTreeItem, { column: type.columns[0] })) : (react_1.default.createElement(TreeItem_1.default, { nodeId: type.nodeId, classes: {
+            focused: 'tree-item-focused',
+            selected: 'tree-item-focused',
+        }, label: react_1.default.createElement(tree_item_label_1.TreeItemLabel, { label: type.summary, nodeId: type.nodeId, managedDescriptions: type.columns.flatMap((0, _utils_1.extractProperty)('descriptions')) }) }, type.columns.map((column, idx) => (react_1.default.createElement(column_tree_item_1.ColumnTreeItem, { key: column.nodeId, column: column })))));
+};
+exports.TypeTreeItem = TypeTreeItem;
+//# sourceMappingURL=type-tree-item.js.map

package/lib/feature-descriptor/domains-descriptions-tree/config/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DomainsDescriptionsTreeConfig = void 0;
+var DomainsDescriptionsTreeConfig;
+(function (DomainsDescriptionsTreeConfig) {
+    DomainsDescriptionsTreeConfig.DEFAULT = {
+        selectable: true,
+    };
+})(DomainsDescriptionsTreeConfig = exports.DomainsDescriptionsTreeConfig || (exports.DomainsDescriptionsTreeConfig = {}));
+//# sourceMappingURL=index.js.map

package/lib/feature-descriptor/domains-descriptions-tree/context/domains-descriptions-selection-context.js

@@ -0,0 +1,54 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DomainsDescriptionsSelectionContextProvider = exports.useDomainsDescriptionsSelectionContext = exports.DomainsDescriptionsSelectionContext = void 0;
+const React = __importStar(require("react"));
+const feature_descriptor_domain_1 = require("../../../models/feature-descriptor-domain");
+exports.DomainsDescriptionsSelectionContext = React.createContext(undefined);
+function useDomainsDescriptionsSelectionContext() {
+    const context = React.useContext(exports.DomainsDescriptionsSelectionContext);
+    if (context === undefined) {
+        throw new Error('useDomainsDescriptionsSelectionContext must be used within a DomainsDescriptionsSelectionContext');
+    }
+    return context;
+}
+exports.useDomainsDescriptionsSelectionContext = useDomainsDescriptionsSelectionContext;
+function DomainsDescriptionsSelectionContextProvider(props) {
+    const selectedDomainDescriptionsIds = React.useMemo(() => feature_descriptor_domain_1.DomainsDescriptionId.listToMap(props.selectedDomainDescriptionIds), [props.selectedDomainDescriptionIds]);
+    function toggleSelection(check, ids) {
+        ids.forEach(id => {
+            if (check) {
+                selectedDomainDescriptionsIds.set(feature_descriptor_domain_1.DomainsDescriptionId.toString(id), id);
+            }
+            else {
+                selectedDomainDescriptionsIds.delete(feature_descriptor_domain_1.DomainsDescriptionId.toString(id));
+            }
+        });
+        props.setSelectedDomainDescriptionIds(Array.from(selectedDomainDescriptionsIds.values()));
+    }
+    return (React.createElement(exports.DomainsDescriptionsSelectionContext.Provider, { value: [selectedDomainDescriptionsIds, { toggleSelection }], ...props }));
+}
+exports.DomainsDescriptionsSelectionContextProvider = DomainsDescriptionsSelectionContextProvider;
+//# sourceMappingURL=domains-descriptions-selection-context.js.map

package/lib/feature-descriptor/domains-descriptions-tree/context/domains-descriptions-tree-config-context.js

@@ -0,0 +1,42 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DomainsDescriptionsTreeConfigContextProvider = exports.useDomainsDescriptionsTreeConfig = exports.DomainsDescriptionsTreeConfigContext = void 0;
+const React = __importStar(require("react"));
+const config_1 = require("../config");
+exports.DomainsDescriptionsTreeConfigContext = React.createContext(config_1.DomainsDescriptionsTreeConfig.DEFAULT);
+function useDomainsDescriptionsTreeConfig() {
+    const context = React.useContext(exports.DomainsDescriptionsTreeConfigContext);
+    if (context === undefined) {
+        throw new Error('useDomainsDescriptionsTreeConfig must be used within a DomainsDescriptionsTreeConfigContext');
+    }
+    return context;
+}
+exports.useDomainsDescriptionsTreeConfig = useDomainsDescriptionsTreeConfig;
+function DomainsDescriptionsTreeConfigContextProvider(props) {
+    return (React.createElement(exports.DomainsDescriptionsTreeConfigContext.Provider, { value: props.configuration ?? config_1.DomainsDescriptionsTreeConfig.DEFAULT, ...props }));
+}
+exports.DomainsDescriptionsTreeConfigContextProvider = DomainsDescriptionsTreeConfigContextProvider;
+//# sourceMappingURL=domains-descriptions-tree-config-context.js.map

package/lib/feature-descriptor/domains-descriptions-tree/context/domains-descriptions-tree-item-selection-context.js

@@ -0,0 +1,56 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DomainsDescriptionsTreeItemSelectionContextProvider = exports.useDomainsDescriptionsTreeItemSelection = exports.DomainsDescriptionsTreeItemSelectionContext = void 0;
+const lodash_1 = require("lodash");
+const React = __importStar(require("react"));
+const _utils_1 = require("../../../utils");
+exports.DomainsDescriptionsTreeItemSelectionContext = React.createContext(undefined);
+function useDomainsDescriptionsTreeItemSelection() {
+    const context = React.useContext(exports.DomainsDescriptionsTreeItemSelectionContext);
+    if (context === undefined) {
+        throw new Error('useDomainsDescriptionsTreeItemSelection must be used within a DomainsDescriptionsTreeItemSelectionContext');
+    }
+    return context;
+}
+exports.useDomainsDescriptionsTreeItemSelection = useDomainsDescriptionsTreeItemSelection;
+function DomainsDescriptionsTreeItemSelectionContextProvider(props) {
+    const [selectedTreeItems, setSelectedTreeItems] = React.useState(() => ({}));
+    function toggleTreeItemSelection(nodeId, domains) {
+        if ((0, _utils_1.isSet)(selectedTreeItems[nodeId])) {
+            const { [nodeId]: _remove, ...rest } = selectedTreeItems;
+            setSelectedTreeItems(rest);
+        }
+        else {
+            setSelectedTreeItems({
+                ...selectedTreeItems,
+                [nodeId]: (0, lodash_1.uniqBy)(domains, JSON.stringify),
+            });
+        }
+    }
+    return (React.createElement(exports.DomainsDescriptionsTreeItemSelectionContext.Provider, { value: [selectedTreeItems, { toggleTreeItemSelection }], ...props }));
+}
+exports.DomainsDescriptionsTreeItemSelectionContextProvider = DomainsDescriptionsTreeItemSelectionContextProvider;
+//# sourceMappingURL=domains-descriptions-tree-item-selection-context.js.map

package/lib/feature-descriptor/domains-descriptions-tree/context/index.js

@@ -0,0 +1,20 @@
+"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 __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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./domains-descriptions-tree-item-selection-context"), exports);
+__exportStar(require("./domains-descriptions-tree-config-context"), exports);
+__exportStar(require("./domains-descriptions-selection-context"), exports);
+//# sourceMappingURL=index.js.map

package/lib/feature-descriptor/domains-descriptions-tree/domains-descriptions-tree.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DomainsDescriptionsTree = exports.FeatureDomainDescriptionsTreeHeader = void 0;
+const lodash_1 = require("lodash");
+const react_1 = __importDefault(require("react"));
+const TreeView_1 = __importDefault(require("@mui/lab/TreeView"));
+const material_1 = require("@mui/material");
+const UnfoldLess_1 = __importDefault(require("@mui/icons-material/UnfoldLess"));
+const UnfoldMore_1 = __importDefault(require("@mui/icons-material/UnfoldMore"));
+const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+const ChevronRight_1 = __importDefault(require("@mui/icons-material/ChevronRight"));
+const _utils_1 = require("../../utils");
+const components_1 = require("./components");
+const ToggleIcon = (props) => props.allNodeIds.length === props.expandedNodes.length ? (react_1.default.createElement(UnfoldLess_1.default, { sx: { marginRight: '-10px' } })) : (react_1.default.createElement(UnfoldMore_1.default, { sx: { marginRight: '-10px' } }));
+const FeatureDomainDescriptionsTreeHeader = (props) => react_1.default.createElement(react_1.default.Fragment, null, props.children);
+exports.FeatureDomainDescriptionsTreeHeader = FeatureDomainDescriptionsTreeHeader;
+const DomainsDescriptionsTree = ({ descriptionsTree, children }) => {
+    const [allNodeIds, setAllNodeIds] = react_1.default.useState(() => getAllNodeIds(descriptionsTree));
+    const [expandedNodes, setExpandedNodes] = react_1.default.useState(() => []);
+    react_1.default.useEffect(() => {
+        setAllNodeIds(getAllNodeIds(descriptionsTree));
+    }, [descriptionsTree]);
+    return (react_1.default.createElement("div", { className: "domains-descriptions-tree" },
+        react_1.default.createElement("div", { className: "domains-descriptions-tree-header" },
+            react_1.default.createElement(material_1.Button, { className: "toggle-all-nodes-btn", variant: "outlined", startIcon: react_1.default.createElement(ToggleIcon, { allNodeIds: allNodeIds, expandedNodes: expandedNodes }), onClick: () => setExpandedNodes((0, lodash_1.isEmpty)(expandedNodes) ? allNodeIds : []) }),
+            react_1.default.Children.toArray(children)
+                .filter(react_1.default.isValidElement)
+                .filter(child => child?.type === exports.FeatureDomainDescriptionsTreeHeader)),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(TreeView_1.default, { defaultCollapseIcon: react_1.default.createElement(ExpandMore_1.default, null), defaultExpandIcon: react_1.default.createElement(ChevronRight_1.default, null), disabledItemsFocusable: false, multiSelect: true, expanded: expandedNodes, onNodeToggle: (_, nodeIds) => setExpandedNodes(nodeIds) }, descriptionsTree.types.map(type => (react_1.default.createElement(components_1.TypeTreeItem, { key: type.nodeId, type: type })))))));
+};
+exports.DomainsDescriptionsTree = DomainsDescriptionsTree;
+function getAllNodeIds(tree) {
+    return tree.types
+        .map(({ columns, nodeId }, typeIdx) => [
+        nodeId,
+        columns.map((0, _utils_1.extractProperty)('nodeId')),
+    ])
+        .flat(2);
+}
+//# sourceMappingURL=domains-descriptions-tree.js.map

package/lib/feature-descriptor/domains-descriptions-tree/index.js

@@ -0,0 +1,21 @@
+"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 __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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./domains-descriptions-tree"), exports);
+__exportStar(require("./models"), exports);
+__exportStar(require("./context"), exports);
+__exportStar(require("./utils"), exports);
+//# sourceMappingURL=index.js.map

package/lib/feature-descriptor/domains-descriptions-tree/models/domains-descriptions-tree.model.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DescriptionsTree = void 0;
+const _utils_1 = require("../../../utils");
+var DescriptionsTree;
+(function (DescriptionsTree) {
+    function appendGroupId(groups, prefix) {
+        const id = DescriptionsTree.createGroupId(prefix);
+        return {
+            types: groups.types.map((type, typeIdx) => {
+                return {
+                    nodeId: id({ typeIdx }),
+                    summary: type.summary,
+                    columns: type.columns.map((column, columnIdx) => ({
+                        nodeId: id({ typeIdx, columnIdx }),
+                        summary: column.summary,
+                        descriptions: column.descriptions.map((description, descriptionIdx) => ({
+                            ...description,
+                            nodeId: id({ typeIdx, columnIdx, descriptionIdx }),
+                        })),
+                    })),
+                };
+            }),
+        };
+    }
+    DescriptionsTree.appendGroupId = appendGroupId;
+    function createGroupId(prefix) {
+        return (props) => [
+            (0, _utils_1.isSet)(prefix) && `${prefix}_`,
+            (0, _utils_1.isSet)(props.typeIdx) && `t${props.typeIdx}`,
+            (0, _utils_1.isSet)(props.columnIdx) && `c${props.columnIdx}`,
+            (0, _utils_1.isSet)(props.descriptionIdx) && `d${props.descriptionIdx}`,
+        ].join('');
+    }
+    DescriptionsTree.createGroupId = createGroupId;
+})(DescriptionsTree = exports.DescriptionsTree || (exports.DescriptionsTree = {}));
+//# sourceMappingURL=domains-descriptions-tree.model.js.map