@reltio/components 1.4.698 → 1.4.702

package/components/charts/TreeChart/TreeChart.js

@@ -0,0 +1,66 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var recharts_1 = require("recharts");
+var CustomTooltip_1 = require("../CustomTooltip/CustomTooltip");
+var styles_1 = require("./styles");
+var useClickableStyle_1 = require("../hooks/useClickableStyle");
+var nanoid_1 = __importDefault(require("nanoid"));
+var CustomizedContent = function (_a) {
+    var x = _a.x, y = _a.y, width = _a.width, height = _a.height, label = _a.label, onClick = _a.onClick, group = _a.group;
+    var styles = styles_1.useStyles();
+    var clickable = useClickableStyle_1.useClickableStyle(onClick);
+    var clipPathId = react_1.useRef(nanoid_1.default()).current;
+    var strokeWidth = 2;
+    return (react_1.default.createElement("g", { className: clickable, onClick: onClick && (function () { return onClick(group); }) },
+        react_1.default.createElement("clipPath", { id: clipPathId },
+            react_1.default.createElement("rect", { x: x + strokeWidth, y: y + strokeWidth, width: width - strokeWidth * 2, height: height - strokeWidth * 2 })),
+        react_1.default.createElement("rect", { x: x, y: y, width: width, height: height, strokeWidth: strokeWidth, className: styles.treeBlock }),
+        react_1.default.createElement(recharts_1.Text, { clipPath: "url(#" + clipPathId + ")", textAnchor: 'middle', verticalAnchor: 'middle', width: width, x: x + width / 2, y: y + height / 2, className: styles.treeLabel }, label)));
+};
+var normalizeValues = function (data) {
+    var dataTotal = data.reduce(function (acc, item) { return acc + item.value; }, 0);
+    var threshold = dataTotal / (data.length * 10);
+    return data.map(function (item) {
+        return __assign(__assign({}, item), { normalizedValue: item.value < threshold ? threshold : item.value });
+    });
+};
+var TreeChart = function (_a) {
+    var data = _a.data, width = _a.width, height = _a.height, onItemClick = _a.onItemClick;
+    return (react_1.default.createElement(recharts_1.Treemap, { dataKey: "normalizedValue", nameKey: "label", content: react_1.default.createElement(CustomizedContent, { onClick: onItemClick }), data: normalizeValues(data), width: width, animationDuration: 500, height: height },
+        react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip_1.CustomTooltip, null) })));
+};
+exports.default = TreeChart;

package/components/charts/TreeChart/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    treeBlock: {
+        fill: '#6BAED6',
+        stroke: '#fff',
+        strokeOpacity: 1
+    },
+    treeLabel: {
+        fill: 'black',
+        fontSize: '14px',
+        letterSpacing: 0
+    }
+});

package/components/charts/hooks/useClickableStyle.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClickableStyle = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var useStyles = styles_1.makeStyles({
+    clickable: {
+        cursor: 'pointer'
+    }
+});
+var useClickableStyle = function (clickable) {
+    var styles = useStyles();
+    return clickable ? styles.clickable : undefined;
+};
+exports.useClickableStyle = useClickableStyle;

package/components/charts/hooks/useTooltipState.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useTooltipState = function () {
+    var _a = react_1.useState({ active: false }), tooltipState = _a[0], setTooltipState = _a[1];
+    var showTooltip = react_1.useCallback(function (data, coordinate) {
+        setTooltipState({
+            active: true,
+            label: data.label,
+            coordinate: coordinate,
+            payload: [{ value: data.value, payload: data, name: data.label }]
+        });
+    }, []);
+    var hideTooltip = react_1.useCallback(function () {
+        setTooltipState(function (state) { return (__assign(__assign({}, state), { active: false })); });
+    }, []);
+    return { tooltipState: tooltipState, showTooltip: showTooltip, hideTooltip: hideTooltip };
+};
+exports.default = useTooltipState;

package/components/charts/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withPercents = exports.ChartsFactory = exports.TreeChart = exports.TableWithBars = exports.PieChart = exports.BarChart = void 0;
+var BarChart_1 = require("./BarChart/BarChart");
+Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return __importDefault(BarChart_1).default; } });
+var PieChart_1 = require("./PieChart/PieChart");
+Object.defineProperty(exports, "PieChart", { enumerable: true, get: function () { return __importDefault(PieChart_1).default; } });
+var TableWithBars_1 = require("./TableWithBars/TableWithBars");
+Object.defineProperty(exports, "TableWithBars", { enumerable: true, get: function () { return __importDefault(TableWithBars_1).default; } });
+var TreeChart_1 = require("./TreeChart/TreeChart");
+Object.defineProperty(exports, "TreeChart", { enumerable: true, get: function () { return __importDefault(TreeChart_1).default; } });
+var ChartsFactory_1 = require("./ChartsFactory");
+Object.defineProperty(exports, "ChartsFactory", { enumerable: true, get: function () { return __importDefault(ChartsFactory_1).default; } });
+var withPercents_1 = require("./HOCs/withPercents");
+Object.defineProperty(exports, "withPercents", { enumerable: true, get: function () { return __importDefault(withPercents_1).default; } });

package/components/charts/types/BarChartOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/charts/types/ChartData.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/charts/types/ChartProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/charts/types/LineChartOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/charts/types/TableWithBarsOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/charts/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/commonReactSelectComponents/DropdownIndicator.js

@@ -0,0 +1,38 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ArrowDropDown_1 = __importDefault(require("@material-ui/icons/ArrowDropDown"));
+var arrowIndicatorStyles_1 = require("./arrowIndicatorStyles");
+var DropdownIndicator = function (props) {
+    var _a, _b;
+    var _c = props.selectProps, classes = _c.classes, menuIsOpen = _c.menuIsOpen, isDisabled = _c.isDisabled, innerProps = props.innerProps;
+    var styles = arrowIndicatorStyles_1.useArrowIndicatorStyles();
+    return (react_1.default.createElement(ArrowDropDown_1.default, __assign({}, innerProps, { className: classnames_1.default(classes.dropdownIndicator, (_a = {}, _a[styles.expanded] = menuIsOpen, _a), (_b = {}, _b[styles.disabled] = isDisabled, _b)) })));
+};
+DropdownIndicator.propTypes = {
+    innerProps: prop_types_1.default.object.isRequired,
+    selectProps: prop_types_1.default.shape({
+        classes: prop_types_1.default.shape({
+            dropdownIndicator: prop_types_1.default.string
+        }).isRequired,
+        menuIsOpen: prop_types_1.default.bool.isRequired,
+        isDisabled: prop_types_1.default.bool
+    }).isRequired
+};
+exports.default = DropdownIndicator;

package/components/commonReactSelectComponents/DropdownIndicatorWithIconButton.js

@@ -0,0 +1,38 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var arrowIndicatorStyles_1 = require("./arrowIndicatorStyles");
+var ArrowDropDown_1 = __importDefault(require("@material-ui/icons/ArrowDropDown"));
+var SmallIconButton_1 = __importDefault(require("../SmallIconButton/SmallIconButton"));
+var DropdownIndicatorWithIconButton = function (props) {
+    var _a;
+    var _b = props.selectProps, classes = _b.classes, menuIsOpen = _b.menuIsOpen, innerProps = props.innerProps;
+    var styles = arrowIndicatorStyles_1.useArrowIndicatorStyles();
+    return (react_1.default.createElement(SmallIconButton_1.default, __assign({}, innerProps, { icon: ArrowDropDown_1.default, className: classes.dropdownIndicator, size: "L", iconClassName: classnames_1.default((_a = {}, _a[styles.expanded] = menuIsOpen, _a)) })));
+};
+DropdownIndicatorWithIconButton.propTypes = {
+    innerProps: prop_types_1.default.object.isRequired,
+    selectProps: prop_types_1.default.shape({
+        classes: prop_types_1.default.shape({
+            dropdownIndicator: prop_types_1.default.string
+        }).isRequired,
+        menuIsOpen: prop_types_1.default.bool.isRequired
+    }).isRequired
+};
+exports.default = DropdownIndicatorWithIconButton;

package/components/commonReactSelectComponents/MenuWithPopper.js

@@ -0,0 +1,79 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var ramda_1 = require("ramda");
+var nanoid_1 = __importDefault(require("nanoid"));
+var Popper_1 = __importDefault(require("../Popper/Popper"));
+var Paper_1 = __importDefault(require("@material-ui/core/Paper"));
+var menuStyles_1 = require("./menuStyles");
+var PopupBoundariesContext_1 = require("../../contexts/PopupBoundariesContext");
+var MenuWithPopper = function (props) {
+    var _a = props.selectProps, inputRef = _a.inputRef, menuIsOpen = _a.menuIsOpen, inputValue = _a.inputValue, innerRef = props.innerRef, children = props.children, innerProps = props.innerProps;
+    var _b = react_1.useState('id'), key = _b[0], setKey = _b[1];
+    react_1.useEffect(function () {
+        setKey(nanoid_1.default());
+    }, [inputValue]);
+    var styles = menuStyles_1.useMenuStyles();
+    var popupBoundariesContext = react_1.useContext(PopupBoundariesContext_1.PopupBoundariesContext);
+    var hasBoundariesElement = popupBoundariesContext && popupBoundariesContext.element;
+    return (react_1.default.createElement(Popper_1.default, { anchorEl: inputRef.current, open: menuIsOpen, className: styles.popper, key: key, modifiers: hasBoundariesElement
+            ? {
+                preventOverflow: {
+                    boundariesElement: popupBoundariesContext.element,
+                    priority: popupBoundariesContext.priority
+                }
+            }
+            : undefined, placement: "bottom" },
+        react_1.default.createElement(Paper_1.default, __assign({ ref: innerRef, style: { width: ramda_1.prop('clientWidth', inputRef.current) } }, innerProps), children)));
+};
+MenuWithPopper.propTypes = {
+    children: prop_types_1.default.oneOfType([prop_types_1.default.element, prop_types_1.default.array]).isRequired,
+    selectProps: prop_types_1.default.shape({
+        inputRef: prop_types_1.default.object.isRequired,
+        menuIsOpen: prop_types_1.default.bool.isRequired,
+        inputValue: prop_types_1.default.string
+    }).isRequired,
+    innerRef: prop_types_1.default.oneOfType([
+        prop_types_1.default.oneOf([null]),
+        prop_types_1.default.func,
+        prop_types_1.default.shape({
+            current: prop_types_1.default.any.isRequired
+        })
+    ]).isRequired,
+    innerProps: prop_types_1.default.object.isRequired
+};
+exports.default = MenuWithPopper;

package/components/commonReactSelectComponents/arrowIndicatorStyles.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useArrowIndicatorStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useArrowIndicatorStyles = styles_1.makeStyles(function (theme) { return ({
+    expanded: {
+        transform: 'rotate(180deg)'
+    },
+    disabled: {
+        color: theme.palette.text.disabled + " !important"
+    }
+}); });

package/components/commonReactSelectComponents/menuStyles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useMenuStyles = styles_1.makeStyles({
+    popper: {
+        borderRadius: '4px',
+        boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
+        backgroundColor: '#FFFFFF',
+        margin: 0,
+        zIndex: 10000
+    }
+});

package/components/editors/BooleanEditor/BooleanEditor.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Checkbox_1 = __importDefault(require("@material-ui/core/Checkbox"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("../../../core/utils");
+var ramda_1 = require("ramda");
+var BooleanEditor = function (_a) {
+    var value = _a.value, onChange = _a.onChange, otherProps = __rest(_a, ["value", "onChange"]);
+    return (react_1.default.createElement(Checkbox_1.default, __assign({}, otherProps, { checked: value, onChange: onChange && ramda_1.pipe(utils_1.getChecked, onChange) })));
+};
+BooleanEditor.propTypes = {
+    onChange: prop_types_1.default.func,
+    value: prop_types_1.default.bool
+};
+exports.default = BooleanEditor;

package/components/editors/BooleanRadioEditor/BooleanRadioEditor.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var BooleanEditor_1 = __importDefault(require("../BooleanEditor/BooleanEditor"));
+var FormControlLabel_1 = __importDefault(require("@material-ui/core/FormControlLabel"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var styles_1 = require("./styles");
+var BooleanRadioEditor = function (_a) {
+    var value = _a.value, onChange = _a.onChange;
+    var styles = styles_1.useStyles();
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(FormControlLabel_1.default, { classes: { label: styles.label }, control: react_1.default.createElement(BooleanEditor_1.default, { classes: { root: styles['checkbox_primary'] }, color: "primary", value: !ramda_1.isNil(value) && !!value, onChange: onChange }), label: ui_i18n_1.default.text('Yes') }),
+        react_1.default.createElement(FormControlLabel_1.default, { classes: { label: styles.label }, control: react_1.default.createElement(BooleanEditor_1.default, { classes: { root: styles['checkbox_primary'] }, color: "primary", value: !ramda_1.isNil(value) && !value, onChange: onChange && ramda_1.pipe(ramda_1.not, onChange) }), label: ui_i18n_1.default.text('No') })));
+};
+BooleanRadioEditor.propTypes = {
+    value: prop_types_1.default.bool,
+    onChange: prop_types_1.default.func
+};
+exports.default = BooleanRadioEditor;

package/components/editors/BooleanRadioEditor/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    checkbox_primary: {
+        color: theme.palette.divider
+    },
+    label: {
+        color: theme.palette.text.secondary
+    }
+}); });

package/components/editors/DataTypeValueEditor/DataTypeValueEditor.js

@@ -0,0 +1,54 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ramda_1 = require("ramda");
+var EditorsFactory_1 = __importDefault(require("../EditorsFactory"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var useEditorContext_1 = __importDefault(require("./useEditorContext"));
+var constants_1 = require("../constants");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var DataTypeValueEditor = function (_a) {
+    var fieldName = _a.fieldName, value = _a.value, onChange = _a.onChange, dataTypeDefinition = _a.dataTypeDefinition, _b = _a.TextFieldProps, TextFieldProps = _b === void 0 ? {} : _b, otherProps = __rest(_a, ["fieldName", "value", "onChange", "dataTypeDefinition", "TextFieldProps"]);
+    var inputStyles = constants_1.useInputStyles();
+    var editorContext = useEditorContext_1.default(fieldName, dataTypeDefinition);
+    var isEmpty = function (value) {
+        return ramda_1.is(Object, value) && ramda_1.has('value', value) ? mdm_sdk_1.isEmptyValue(value.value) : mdm_sdk_1.isEmptyValue(value);
+    };
+    TextFieldProps = ramda_1.mergeDeepLeft(TextFieldProps, __assign(__assign({}, constants_1.commonTextFieldProps), { className: inputStyles.marginDense, InputProps: {
+            disableUnderline: isEmpty(value)
+        } }));
+    return EditorsFactory_1.default.build(dataTypeDefinition.type, __assign(__assign({ onChange: onChange,
+        value: value,
+        TextFieldProps: TextFieldProps }, editorContext), otherProps));
+};
+DataTypeValueEditor.propTypes = {
+    fieldName: prop_types_1.default.string,
+    value: prop_types_1.default.any,
+    onChange: prop_types_1.default.func,
+    dataTypeDefinition: prop_types_1.default.object
+};
+exports.default = DataTypeValueEditor;

package/components/editors/DataTypeValueEditor/useEditorContext.js

@@ -0,0 +1,108 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var react_redux_1 = require("react-redux");
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var useEditorContext = function (fieldName, dataTypeDefinition) {
+    var tenant = react_redux_1.useSelector(mdm_module_1.default.selectors.getTenant);
+    var lookups = react_redux_1.useSelector(mdm_module_1.default.selectors.getLookups);
+    var attributePresentations = react_redux_1.useSelector(mdm_module_1.default.selectors.getAttributePresentations);
+    var globalSearchRequestOptions = react_redux_1.useSelector(mdm_module_1.default.selectors.getGlobalSearchRequestOptions);
+    var dispatch = react_redux_1.useDispatch();
+    var typeaheadGetSuggestion = react_1.useCallback(function (searchValue) {
+        return mdm_sdk_1.getFacetedAttributeData({
+            fieldName: fieldName,
+            searchValue: searchValue,
+            options: __assign({}, globalSearchRequestOptions)
+        }).then(function (response) { return Object.keys(response[fieldName]); });
+    }, [fieldName, globalSearchRequestOptions]);
+    var type = dataTypeDefinition.type, values = dataTypeDefinition.values, lookupCode = dataTypeDefinition.lookupCode, uri = dataTypeDefinition.uri, dependentLookupCode = dataTypeDefinition.dependentLookupCode, options = dataTypeDefinition.options;
+    switch (type) {
+        case mdm_sdk_1.DataTypes.TYPE_ENUM:
+            return { entries: values.map(function (value) { return ({ value: value }); }) };
+        case mdm_sdk_1.DataTypes.TYPE_LOOKUP:
+            return {
+                lookups: lookups,
+                lookupCode: lookupCode,
+                getLookups: function () {
+                    return mdm_sdk_1.getLookups().then(function (lookups) {
+                        dispatch(mdm_module_1.profile.lookups.actions.lookupsLoaded(lookups));
+                    });
+                }
+            };
+        case mdm_sdk_1.DataTypes.TYPE_DEPENDENT_LOOKUP:
+            return {
+                lookups: lookups,
+                lookupCode: dependentLookupCode,
+                getLookups: function (type, parents, displayNamePrefix) {
+                    return mdm_sdk_1.getDependentLookups({ type: type, parents: parents, displayNamePrefix: displayNamePrefix }).then(function (_a) {
+                        var codeValues = _a.codeValues;
+                        return ramda_1.propOr({}, type, codeValues);
+                    });
+                },
+                resolveLookups: function (type, codeValues) {
+                    var lookupsList = codeValues.map(function (codeValue) { return ({ type: type, codeValue: codeValue }); });
+                    return mdm_sdk_1.resolveLookupsList(lookupsList).then(function (response) {
+                        if (Array.isArray(response)) {
+                            var lookups_1 = response.reduce(function (acc, lookupData) { return (__assign(__assign({}, acc), lookupData[type])); }, {});
+                            dispatch(mdm_module_1.profile.lookups.actions.lookupsForTypeResolved({
+                                type: type,
+                                values: lookups_1
+                            }));
+                        }
+                    });
+                }
+            };
+        case mdm_sdk_1.DataTypes.TYPE_TYPEAHEAD:
+            return {
+                getSuggestions: typeaheadGetSuggestion
+            };
+        case mdm_sdk_1.DataTypes.TYPE_NUMBER:
+        case mdm_sdk_1.DataTypes.TYPE_FLOAT:
+        case mdm_sdk_1.DataTypes.TYPE_DOUBLE:
+        case mdm_sdk_1.DataTypes.TYPE_LONG:
+        case mdm_sdk_1.DataTypes.TYPE_INT:
+            return {
+                format: attributePresentations[uri]
+            };
+        case mdm_sdk_1.DataTypes.TYPE_FILE:
+            return { tenant: tenant };
+        case mdm_sdk_1.DataTypes.TYPE_SELECT:
+            return { entries: options };
+        default:
+            return {};
+    }
+};
+exports.default = useEditorContext;