@reltio/components 1.4.1819 → 1.4.1821

package/cjs/DependentLookupEditor/helpers.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildLookupOptions = exports.getOptionLabel = void 0;
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var getOptionLabel = function (obj) {
+    if (!obj)
+        return '';
+    var lookupCode = obj.lookupCode, value = obj.value;
+    return (0, mdm_sdk_1.getLookupLabel)(lookupCode, value);
+};
+exports.getOptionLabel = getOptionLabel;
+var buildLookupOptions = function (lookups) {
+    return Object.entries(lookups)
+        .map(function (_a) {
+        var lookupCode = _a[0], displayName = _a[1].displayName;
+        return ({
+            lookupCode: lookupCode,
+            value: displayName
+        });
+    })
+        .sort(function (lookupA, lookupB) {
+        var labelALower = (0, exports.getOptionLabel)(lookupA).toLowerCase();
+        var labelBLower = (0, exports.getOptionLabel)(lookupB).toLowerCase();
+        return mdm_sdk_1.utils.strings.sort('asc', labelALower, labelBLower);
+    });
+};
+exports.buildLookupOptions = buildLookupOptions;

package/cjs/DependentLookupEditor/helpers.test.d.ts

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

package/cjs/DependentLookupEditor/helpers.test.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var helpers_1 = require("./helpers");
+describe('dependent lookup editor helper test', function () {
+    it('should return sorted options', function () {
+        expect((0, helpers_1.buildLookupOptions)({
+            code1: { displayName: 'cName' },
+            code2: { displayName: 'bName' },
+            code3: { displayName: 'aName' }
+        })).toEqual([
+            {
+                lookupCode: 'code3',
+                value: 'aName'
+            },
+            {
+                lookupCode: 'code2',
+                value: 'bName'
+            },
+            {
+                lookupCode: 'code1',
+                value: 'cName'
+            }
+        ]);
+    });
+});

package/cjs/DependentLookupEditor/index.d.ts

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

package/cjs/DependentLookupEditor/index.js

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

package/cjs/DependentLookupEditor/useAutopopulation.d.ts

@@ -0,0 +1,14 @@
+type Option = {
+    lookupCode: string;
+    value: string;
+};
+type Props = {
+    initialDefaultOptions: Option[];
+    isEmptyValue: boolean;
+    multiple: boolean;
+    onChange: (value: Option | Option[]) => void;
+};
+export declare const useAutopopulation: ({ initialDefaultOptions, isEmptyValue, multiple, onChange }: Props) => {
+    markAsTouched: () => void;
+};
+export {};

package/cjs/DependentLookupEditor/useAutopopulation.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutopopulation = void 0;
+var react_1 = require("react");
+var DependentLookupAutopopulationContext_1 = require("../contexts/DependentLookupAutopopulationContext");
+// Autopopulation for just added editor. Other autopopulation cases should be covered by cascadeUpdate flow.
+var useAutopopulation = function (_a) {
+    var initialDefaultOptions = _a.initialDefaultOptions, isEmptyValue = _a.isEmptyValue, multiple = _a.multiple, onChange = _a.onChange;
+    var _b = (0, react_1.useContext)(DependentLookupAutopopulationContext_1.DependentLookupAutopopulationContext) || {}, id = _b.id, isTouched = _b.isTouched, onTouch = _b.onTouch;
+    (0, react_1.useEffect)(function () {
+        if (id && initialDefaultOptions && initialDefaultOptions.length === 1 && isEmptyValue && !isTouched) {
+            onChange(multiple ? initialDefaultOptions : initialDefaultOptions[0]);
+        }
+        //eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialDefaultOptions]);
+    var markAsTouched = (0, react_1.useCallback)(function () {
+        if (id) {
+            onTouch === null || onTouch === void 0 ? void 0 : onTouch(id);
+        }
+    }, [onTouch, id]);
+    return { markAsTouched: markAsTouched };
+};
+exports.useAutopopulation = useAutopopulation;

package/cjs/DependentLookupEditor/useDefaultOptions.d.ts

@@ -0,0 +1,5 @@
+export function useDefaultOptions(loadOptions: any): {
+    defaultOptions: any[];
+    initialDefaultOptions: any;
+    isLoading: boolean;
+};

package/cjs/DependentLookupEditor/useDefaultOptions.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDefaultOptions = void 0;
+var react_1 = require("react");
+var useSafePromise_1 = require("../hooks/useSafePromise");
+var useDefaultOptions = function (loadOptions) {
+    var _a = (0, react_1.useState)([]), defaultOptions = _a[0], setDefaultOptions = _a[1];
+    var _b = (0, react_1.useState)(null), initialDefaultOptions = _b[0], setInitialDefaultOptions = _b[1];
+    var _c = (0, react_1.useState)(false), isLoading = _c[0], setIsLoading = _c[1];
+    var safePromise = (0, useSafePromise_1.useSafePromise)();
+    (0, react_1.useEffect)(function () {
+        setDefaultOptions([]);
+        setIsLoading(true);
+        safePromise(loadOptions(''))
+            .then(function (options) {
+            setDefaultOptions(options);
+            setInitialDefaultOptions(function (prevValue) { return prevValue || options; });
+            setIsLoading(false);
+        })
+            .catch(function () {
+            setIsLoading(false);
+        });
+    }, [loadOptions]); // eslint-disable-line
+    return { defaultOptions: defaultOptions, initialDefaultOptions: initialDefaultOptions, isLoading: isLoading };
+};
+exports.useDefaultOptions = useDefaultOptions;

package/cjs/DependentLookupEditor/useLookupsResolver.d.ts

@@ -0,0 +1,6 @@
+export function useLookupsResolver({ lookups, resolvedValues, resolveLookups, onLookupsResolve }: {
+    lookups: any;
+    resolvedValues: any;
+    resolveLookups: any;
+    onLookupsResolve: any;
+}): void;

package/cjs/DependentLookupEditor/useLookupsResolver.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLookupsResolver = void 0;
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var isUnresolvedLookup = function (lookupValue) { return lookupValue && lookupValue.lookupCode && !lookupValue.value; };
+var isResolvedLookupCode = (0, ramda_1.curry)(function (resolvedValues, lookupCode) {
+    return (0, ramda_1.hasPath)([lookupCode, 'displayName'], resolvedValues);
+});
+var useLookupsResolver = function (_a) {
+    var lookups = _a.lookups, resolvedValues = _a.resolvedValues, resolveLookups = _a.resolveLookups, onLookupsResolve = _a.onLookupsResolve;
+    var _b = (0, react_1.useState)([]), requestedCodes = _b[0], setRequestedCodes = _b[1];
+    (0, react_1.useEffect)(function () {
+        var _a = (0, ramda_1.pipe)(mdm_sdk_1.wrapInArrayIfNeeded, (0, ramda_1.filter)(isUnresolvedLookup), (0, ramda_1.map)((0, ramda_1.prop)('lookupCode')), (0, ramda_1.partition)(isResolvedLookupCode(resolvedValues)))(lookups), resolvedCodes = _a[0], codesToResolve = _a[1];
+        if (resolvedCodes.length > 0) {
+            var resolvedLookups = resolvedCodes.map(function (lookupCode) { return ({
+                lookupCode: lookupCode,
+                value: resolvedValues[lookupCode].displayName
+            }); });
+            onLookupsResolve(resolvedLookups);
+        }
+        var unrequestedCodes = codesToResolve.filter(function (code) { return !requestedCodes.includes(code); });
+        if (unrequestedCodes.length > 0) {
+            setRequestedCodes((0, ramda_1.pipe)((0, ramda_1.concat)(unrequestedCodes), ramda_1.uniq));
+            resolveLookups(unrequestedCodes);
+        }
+    }, [lookups, resolvedValues]); // eslint-disable-line
+};
+exports.useLookupsResolver = useLookupsResolver;

package/cjs/DependentLookupEditor/useSavingFocus.d.ts

@@ -0,0 +1 @@
+export declare const useSavingFocus: (selectRef: any, inputRef: any, disabled: boolean) => void;

package/cjs/DependentLookupEditor/useSavingFocus.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSavingFocus = void 0;
+var react_1 = require("react");
+var useSavingFocus = function (selectRef, inputRef, disabled) {
+    var _a;
+    var needFocusRef = (0, react_1.useRef)(false);
+    if (!needFocusRef.current &&
+        disabled &&
+        document.activeElement === ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('input')[0])) {
+        needFocusRef.current = true;
+    }
+    (0, react_1.useEffect)(function () {
+        var _a;
+        var handler = function () {
+            if (needFocusRef.current) {
+                needFocusRef.current = false;
+            }
+        };
+        if (!disabled && needFocusRef.current) {
+            (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            needFocusRef.current = false;
+        }
+        if (disabled && needFocusRef.current) {
+            document === null || document === void 0 ? void 0 : document.addEventListener('click', handler);
+            return function () {
+                document === null || document === void 0 ? void 0 : document.removeEventListener('click', handler);
+            };
+        }
+    }, [disabled]);
+};
+exports.useSavingFocus = useSavingFocus;

package/cjs/Drawer/Drawer.d.ts

@@ -0,0 +1,7 @@
+import { DrawerProps } from '@mui/material/Drawer';
+type Props = DrawerProps;
+export declare const Drawer: {
+    ({ open, children, ...otherProps }: Props): JSX.Element;
+    displayName: string;
+};
+export {};

package/cjs/Drawer/Drawer.js

@@ -0,0 +1,77 @@
+"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;
+    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 __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.Drawer = void 0;
+var react_1 = __importStar(require("react"));
+var Drawer_1 = __importDefault(require("@mui/material/Drawer"));
+var styles_1 = require("@mui/material/styles");
+var Drawer = function (_a) {
+    var _b = _a.open, open = _b === void 0 ? true : _b, children = _a.children, otherProps = __rest(_a, ["open", "children"]);
+    var _c = (0, react_1.useState)(open), drawerContentsVisible = _c[0], setDrawerContentVisible = _c[1];
+    var hideDelay = (0, styles_1.useTheme)().transitions.duration.leavingScreen;
+    (0, react_1.useEffect)(function () {
+        if (open !== drawerContentsVisible) {
+            if (open) {
+                // mount children before appear
+                setDrawerContentVisible(true);
+            }
+            else {
+                // unmount children only when closing transition ended
+                var timeout_1 = setTimeout(function () {
+                    setDrawerContentVisible(false);
+                }, hideDelay);
+                return function () { return clearTimeout(timeout_1); };
+            }
+        }
+    }, [open, hideDelay, drawerContentsVisible]);
+    return (react_1.default.createElement(Drawer_1.default, __assign({ open: open }, otherProps), drawerContentsVisible && children));
+};
+exports.Drawer = Drawer;
+exports.Drawer.displayName = 'Drawer';

package/cjs/Drawer/Drawer.test.d.ts

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

package/cjs/Drawer/Drawer.test.js

@@ -0,0 +1,34 @@
+"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 enzyme_1 = require("enzyme");
+var test_utils_1 = require("react-dom/test-utils");
+var Drawer_1 = require("./Drawer");
+describe('Drawer', function () {
+    it('renders children when open', function () {
+        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(Drawer_1.Drawer, { open: true, variant: "persistent" },
+            react_1.default.createElement("div", { className: "SOME_INNER_CONTENTS" })));
+        expect(wrapper.find('.SOME_INNER_CONTENTS')).toHaveLength(1);
+    });
+    it('not renders children when open === false', function () {
+        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(Drawer_1.Drawer, { open: false, variant: "persistent" },
+            react_1.default.createElement("div", { className: "SOME_INNER_CONTENTS" })));
+        expect(wrapper.find('.SOME_INNER_CONTENTS')).toHaveLength(0);
+    });
+    it('unmounts children only after timeout', function () {
+        jest.useFakeTimers();
+        var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(Drawer_1.Drawer, { open: true, variant: "persistent" },
+            react_1.default.createElement("div", { className: "SOME_INNER_CONTENTS" })));
+        expect(wrapper.find('.SOME_INNER_CONTENTS')).toHaveLength(1);
+        wrapper.setProps({ open: false });
+        expect(wrapper.find('.SOME_INNER_CONTENTS')).toHaveLength(1);
+        (0, test_utils_1.act)(function () {
+            jest.runAllTimers();
+            wrapper.update();
+            expect(wrapper.find('.SOME_INNER_CONTENTS')).toHaveLength(0);
+        });
+    });
+});

package/cjs/Drawer/index.d.ts

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

package/cjs/Drawer/index.js

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

package/cjs/DropDownEditor/DropDownEditor.d.ts

@@ -0,0 +1,15 @@
+export function DropDownEditor({ entries, classes, ...otherProps }: {
+    [x: string]: any;
+    entries: any;
+    classes?: {};
+}): JSX.Element;
+export namespace DropDownEditor {
+    namespace propTypes {
+        let classes: PropTypes.Requireable<object>;
+        let entries: PropTypes.Validator<PropTypes.InferProps<{
+            value: PropTypes.Validator<NonNullable<NonNullable<string | number | object>>>;
+            label: PropTypes.Requireable<string>;
+        }>[]>;
+    }
+}
+import PropTypes from 'prop-types';

package/cjs/DropDownEditor/DropDownEditor.js

@@ -0,0 +1,48 @@
+"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.DropDownEditor = void 0;
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var ramda_1 = require("ramda");
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+var MultipliableSelect_1 = __importDefault(require("../components/MultipliableSelect/MultipliableSelect"));
+var prop_types_2 = require("../constants/prop-types");
+var findEntryByValue = function (entries) { return function (value) { return entries.find((0, ramda_1.propEq)('value', value)); }; };
+var DropDownEditor = function (_a) {
+    var entries = _a.entries, _b = _a.classes, classes = _b === void 0 ? {} : _b, otherProps = __rest(_a, ["entries", "classes"]);
+    var menuItem = classes.menuItem, otherClasses = __rest(classes, ["menuItem"]);
+    return (react_1.default.createElement(MultipliableSelect_1.default, __assign({}, otherProps, { classes: otherClasses, getValueLabel: (0, ramda_1.pipe)(findEntryByValue(entries), (0, ramda_1.prop)('label')) }), entries.map(function (_a, index) {
+        var value = _a.value, label = _a.label;
+        return (react_1.default.createElement(MenuItem_1.default, { key: index, value: value, className: menuItem }, label || value.toString()));
+    })));
+};
+exports.DropDownEditor = DropDownEditor;
+exports.DropDownEditor.propTypes = {
+    classes: prop_types_1.default.object,
+    entries: prop_types_1.default.arrayOf(prop_types_2.DropDownEntryType).isRequired
+};

package/cjs/DropDownEditor/DropDownEditor.test.d.ts

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

package/cjs/DropDownEditor/DropDownEditor.test.js

@@ -0,0 +1,38 @@
+"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 build_1 = require("enzyme/build");
+var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+var MultipliableSelect_1 = __importDefault(require("../components/MultipliableSelect/MultipliableSelect"));
+var DropDownEditor_1 = require("./DropDownEditor");
+describe('DropDownEditor', function () {
+    it('should render MultipliableSelect with entries as options', function () {
+        var entries = [
+            { value: 'Enum1', label: '1' },
+            { value: 'Enum2', label: '2' },
+            { value: 'Enum3', label: '3' }
+        ];
+        var value = 'Enum2';
+        var wrapper = (0, build_1.shallow)(react_1.default.createElement(DropDownEditor_1.DropDownEditor, { value: value, entries: entries, classes: { menuItem: 'menuItemClassName' } }));
+        expect(wrapper.find(MultipliableSelect_1.default).prop('value')).toBe(value);
+        wrapper.find(MenuItem_1.default).forEach(function (n, i) {
+            expect(n.prop('value')).toBe(entries[i].value);
+            expect(n.prop('children')).toBe(entries[i].label);
+            expect(n.prop('className')).toBe('menuItemClassName');
+        });
+    });
+    it('should call props.onChange with new value', function () {
+        var entries = [
+            { value: 'Enum1', label: '1' },
+            { value: 'Enum2', label: '2' },
+            { value: 'Enum3', label: '3' }
+        ];
+        var onChange = jest.fn(), value = 'Enum2';
+        var wrapper = (0, build_1.shallow)(react_1.default.createElement(DropDownEditor_1.DropDownEditor, { onChange: onChange, entries: entries }));
+        wrapper.find(MultipliableSelect_1.default).simulate('change', value);
+        expect(onChange).toBeCalledWith(value);
+    });
+});

package/cjs/DropDownEditor/index.d.ts

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

package/cjs/DropDownEditor/index.js

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

package/cjs/DropDownSelector/DropDownSelector.d.ts

@@ -0,0 +1,35 @@
+export function DropDownSelector({ value, label, createLabel, getOptions, options, height, onChange, onCreate, onClear, components, textFieldInputRef, TextFieldProps, classes, ...otherProps }: {
+    [x: string]: any;
+    value: any;
+    label: any;
+    createLabel: any;
+    getOptions: any;
+    options: any;
+    height?: number;
+    onChange?: any;
+    onCreate: any;
+    onClear?: any;
+    components: any;
+    textFieldInputRef: any;
+    TextFieldProps: any;
+    classes: any;
+}): JSX.Element;
+export namespace DropDownSelector {
+    export { DropDownSelectorType as propTypes };
+}
+export namespace DropDownSelectorType {
+    let value: PropTypes.Requireable<object>;
+    let label: PropTypes.Validator<string>;
+    let getOptions: PropTypes.Requireable<(...args: any[]) => any>;
+    let options: PropTypes.Requireable<any[]>;
+    let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    let onCreate: PropTypes.Requireable<(...args: any[]) => any>;
+    let onClear: PropTypes.Requireable<(...args: any[]) => any>;
+    let createLabel: PropTypes.Requireable<string>;
+    let components: PropTypes.Requireable<object>;
+    let textFieldInputRef: PropTypes.Requireable<object>;
+    let TextFieldProps: PropTypes.Requireable<object>;
+    let height: PropTypes.Requireable<number>;
+    let classes: PropTypes.Requireable<object>;
+}
+import PropTypes from 'prop-types';

package/cjs/DropDownSelector/DropDownSelector.js

@@ -0,0 +1,102 @@
+"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;
+    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 __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.DropDownSelectorType = exports.DropDownSelector = void 0;
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ReactSelectDropdownIndicator_1 = require("../ReactSelectDropdownIndicator");
+var AsyncSelect_1 = __importDefault(require("../components/ReactSelect/AsyncSelect"));
+var Select_1 = __importDefault(require("../components/ReactSelect/Select"));
+var core_1 = require("../core");
+var Menu_1 = require("./components/Menu");
+var SingleValue_1 = require("./components/SingleValue");
+var styles_1 = require("./styles");
+var DropDownSelector = function (_a) {
+    var _b;
+    var value = _a.value, label = _a.label, createLabel = _a.createLabel, getOptions = _a.getOptions, options = _a.options, _c = _a.height, height = _c === void 0 ? 46 : _c, _d = _a.onChange, onChange = _d === void 0 ? ramda_1.identity : _d, onCreate = _a.onCreate, _e = _a.onClear, onClear = _e === void 0 ? ramda_1.identity : _e, components = _a.components, textFieldInputRef = _a.textFieldInputRef, TextFieldProps = _a.TextFieldProps, classes = _a.classes, otherProps = __rest(_a, ["value", "label", "createLabel", "getOptions", "options", "height", "onChange", "onCreate", "onClear", "components", "textFieldInputRef", "TextFieldProps", "classes"]);
+    var styles = (0, styles_1.useStyles)({ height: height });
+    var _f = (0, react_1.useState)(false), open = _f[0], setOpen = _f[1];
+    var inputRef = (0, react_1.useRef)(null);
+    var SelectComponent = getOptions ? AsyncSelect_1.default : Select_1.default;
+    var showIndicatorSeparator = (0, ramda_1.prop)('ClearIndicator', components)
+        ? {}
+        : { IndicatorSeparator: core_1.EmptyStub, ClearIndicator: core_1.EmptyStub };
+    var handleCreate = onCreate
+        ? function (value, group) {
+            onCreate(value, group);
+            setOpen(false);
+        }
+        : undefined;
+    var overloadStylesIfGroup = (0, ramda_1.prop)('Group', components) ? styles_1.overloadMenuListStyle : {};
+    var overloadStylesIfNoLabel = (0, ramda_1.isEmpty)(label) ? styles_1.withoutLabelInputStyle : {};
+    var mergedStyles = __assign(__assign(__assign({}, styles_1.customStyles), overloadStylesIfGroup), overloadStylesIfNoLabel);
+    var mergedClasses = __assign(__assign({}, styles), classes);
+    return (react_1.default.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: (0, ramda_1.defaultTo)(null, value), loadOptions: getOptions, options: options, cacheOptions: true, onChange: onChange, onCreate: handleCreate, onClear: onClear, createLabel: createLabel, classes: mergedClasses, styles: mergedStyles, components: __assign(__assign({ DropdownIndicator: ReactSelectDropdownIndicator_1.ReactSelectDropdownIndicator, LoadingIndicator: core_1.EmptyStub, SingleValue: SingleValue_1.SingleValue, Menu: Menu_1.Menu }, showIndicatorSeparator), components), menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { label: label, variant: 'filled', size: 'small', classes: __assign(__assign({}, (0, ramda_1.prop)('classes', TextFieldProps)), { root: (0, classnames_1.default)(styles.formControl, (0, ramda_1.path)(['classes', 'root'], TextFieldProps)) }), inputProps: __assign({}, (0, ramda_1.prop)('inputProps', TextFieldProps)), InputProps: __assign(__assign({}, (0, ramda_1.prop)('InputProps', TextFieldProps)), { classes: __assign(__assign({}, (0, ramda_1.path)(['InputProps', 'classes'], TextFieldProps)), { root: (0, classnames_1.default)(styles.filledInputRoot, (0, ramda_1.path)(['InputProps', 'classes', 'root'], TextFieldProps)), underline: (0, classnames_1.default)((_b = {}, _b[styles.filledInputUnderline] = (0, mdm_sdk_1.isEmptyValue)(value), _b), (0, ramda_1.path)(['InputProps', 'classes', 'underline'], TextFieldProps)), focused: (0, classnames_1.default)('focused', (0, ramda_1.path)(['InputProps', 'classes', 'focused'], TextFieldProps)) }) }), InputLabelProps: __assign(__assign({}, (0, ramda_1.prop)('InputLabelProps', TextFieldProps)), { classes: __assign(__assign({}, (0, ramda_1.path)(['InputLabelProps', 'classes'], TextFieldProps)), { root: (0, classnames_1.default)(styles.inputLabel, (0, ramda_1.path)(['InputLabelProps', 'classes', 'root'], TextFieldProps)), shrink: (0, classnames_1.default)('shrink', (0, ramda_1.path)(['InputLabelProps', 'classes', 'shrink'], TextFieldProps)) }), shrink: !(0, mdm_sdk_1.isEmptyValue)(value) ? true : undefined }), ref: textFieldInputRef || inputRef }), inputRef: textFieldInputRef || inputRef, menuIsOpen: open, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); } })));
+};
+exports.DropDownSelector = DropDownSelector;
+exports.DropDownSelectorType = {
+    value: prop_types_1.default.oneOfType([prop_types_1.default.object, prop_types_1.default.array]),
+    label: prop_types_1.default.string.isRequired,
+    getOptions: prop_types_1.default.func,
+    options: prop_types_1.default.array,
+    onChange: prop_types_1.default.func,
+    onCreate: prop_types_1.default.func,
+    onClear: prop_types_1.default.func,
+    createLabel: prop_types_1.default.string,
+    components: prop_types_1.default.object,
+    textFieldInputRef: prop_types_1.default.object,
+    TextFieldProps: prop_types_1.default.object,
+    height: prop_types_1.default.number,
+    classes: prop_types_1.default.object
+};
+exports.DropDownSelector.propTypes = exports.DropDownSelectorType;

package/cjs/DropDownSelector/DropDownSelector.test.d.ts

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