@reltio/components 1.4.1603 → 1.4.1604

package/cjs/components/activityLog/ActivityLog/items/GroupItem/styles.js

@@ -8,7 +8,8 @@ exports.useStyles = (0, styles_1.makeStyles)({
         height: '40px',
         alignItems: 'center',
         paddingTop: '10px',
-        boxSizing: 'border-box'
+        boxSizing: 'border-box',
+        paddingRight: '16px'
     },
     groupIcon: {
         marginLeft: '-5px',

package/cjs/components/activityLog/ActivityLog/styles.js

@@ -7,14 +7,15 @@ exports.useStyles = (0, styles_1.makeStyles)({
         marginLeft: '28px'
     },
     listRow: {
-        paddingLeft: '12px',
+        paddingLeft: '28px',
+        position: 'relative',
         '&::before': {
             content: '""',
             width: '2px',
             position: 'absolute',
             height: '100%',
             top: 0,
-            left: '11px',
+            left: '27px',
             backgroundColor: '#D8D8D8',
             zIndex: '-1'
         },

package/cjs/components/activityLog/ActivityLogFilter/styles.js

@@ -4,12 +4,13 @@ exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     header: {
-        width: 'auto',
         display: 'flex',
-        alignItems: 'center'
+        alignItems: 'center',
+        overflow: 'hidden',
+        flexGrow: 1
     },
     label: {
-        paddingLeft: '7px',
+        marginRight: '4px',
         fontSize: '14px'
     },
     buttonsWrapper: {

package/cjs/components/activityLog/activities/ActivityTitle/styles.js

@@ -9,8 +9,7 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         fontSize: 13,
         lineHeight: '15px',
         color: theme.palette.text.primary,
-        marginBottom: 8,
-        marginRight: 70
+        marginBottom: 8
     },
     activityType: {
         flexShrink: 0,

package/cjs/components/attributes/DescriptionIcon/DescriptionIcon.d.ts

@@ -25,7 +25,7 @@ export declare const ChipWithTooltip: React.ForwardRefExoticComponent<import("pr
     variant?: import("@mui/types").OverridableStringUnion<"filled" | "outlined", import("@mui/material/Chip").ChipPropsVariantOverrides>;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "label" | "icon" | "children" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "disabled" | "sx" | "variant" | "deleteIcon" | "avatar" | "clickable" | "onDelete" | "skipFocusWhenDisabled">>;
+}, "label" | "icon" | "children" | "size" | "color" | "disabled" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "tabIndex" | "variant" | "deleteIcon" | "avatar" | "clickable" | "onDelete" | "skipFocusWhenDisabled">>;
 type Props = {
     className?: string;
     description?: string;

package/cjs/components/attributes/OvIcon/OvIcon.d.ts

@@ -26,7 +26,7 @@ export declare const ChipWithTooltip: React.ForwardRefExoticComponent<import("pr
     variant?: import("@mui/types").OverridableStringUnion<"filled" | "outlined", import("@mui/material/Chip").ChipPropsVariantOverrides>;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "label" | "icon" | "children" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "disabled" | "sx" | "variant" | "deleteIcon" | "avatar" | "clickable" | "onDelete" | "skipFocusWhenDisabled">>;
+}, "label" | "icon" | "children" | "size" | "color" | "disabled" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "tabIndex" | "variant" | "deleteIcon" | "avatar" | "clickable" | "onDelete" | "skipFocusWhenDisabled">>;
 type ComplexWithLabel = NestedAttributeValue | ReferenceAttributeValue;
 type Props = {
     className?: string;

package/cjs/components/attributes/inline/SimpleAttributeEditor/styles.d.ts

@@ -2,5 +2,5 @@ type StylesProps = {
     color: string;
     containerWidth: number;
 };
-export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"input" | "inputMultiline" | "textField" | "paper" | "booleanEditor" | "timestampEditor" | "popoverRoot">;
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"input" | "textField" | "paper" | "inputMultiline" | "booleanEditor" | "timestampEditor" | "popoverRoot">;
 export {};

package/cjs/components/commonReactSelectComponents/arrowIndicatorStyles.d.ts

@@ -1 +1 @@
-export const useArrowIndicatorStyles: (props?: any) => import("@mui/styles").ClassNameMap<"disabled" | "expanded">;
+export const useArrowIndicatorStyles: (props?: any) => import("@mui/styles").ClassNameMap<"expanded" | "disabled">;

package/cjs/components/editors/BooleanRadioEditor/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "editors" | "isCrossedOut" | "checkboxPrimary">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "isCrossedOut" | "editors" | "checkboxPrimary">;

package/cjs/components/editors/CustomDateRangeEditor/CustomDateRangeEditor.js

@@ -33,7 +33,7 @@ var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var core_1 = require("../../../core");
 var TextField_1 = __importDefault(require("@mui/material/TextField"));
-var Menu_1 = __importDefault(require("@mui/material/Menu"));
+var Popover_1 = __importDefault(require("@mui/material/Popover"));
 var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
 var DateRangePicker_1 = __importDefault(require("../../DateRangePicker/DateRangePicker"));
 var styles_1 = require("./styles");
@@ -72,16 +72,13 @@ var CustomDateRangeEditor = function (_a) {
             }, InputLabelProps: {
                 shrink: false
             }, placeholder: ui_i18n_1.default.text("".concat(placeholder, " \u2014 ").concat(placeholder)) }),
-        react_1.default.createElement(Menu_1.default, { variant: "menu", open: open, autoFocus: false, classes: { paper: styles.paper }, anchorEl: inputRef.current, onClose: onCancel, anchorOrigin: {
+        react_1.default.createElement(Popover_1.default, { open: open, anchorEl: inputRef.current, onClose: onCancel, anchorOrigin: {
                 vertical: 'bottom',
-                horizontal: 'left'
+                horizontal: 'right'
             }, transformOrigin: {
                 vertical: 'top',
-                horizontal: 'left'
-            }, elevation: 2, MenuListProps: {
-                autoFocusItem: open,
-                style: { width: '100%' }
-            } },
-            react_1.default.createElement(DateRangePicker_1.default, { values: values, onCancel: onCancel, onApply: onApply, type: mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE }))));
+                horizontal: 'right'
+            }, elevation: 2 },
+            react_1.default.createElement(DateRangePicker_1.default, { values: values, onApply: onApply, type: mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE }))));
 };
 exports.default = CustomDateRangeEditor;

package/cjs/components/editors/CustomDateRangeEditor/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"input" | "root" | "inputRoot" | "dropdownIndicator" | "paper" | "dateOptionLabel">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"input" | "root" | "inputRoot" | "paper" | "dropdownIndicator" | "dateOptionLabel">;

package/cjs/components/editors/DateEditor/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"isCrossedOut" | "inputRoot" | "adornedEnd">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"adornedEnd" | "inputRoot" | "isCrossedOut">;

package/cjs/components/editors/DateRangeEditor/DateRangeEditor.d.ts

@@ -1,26 +1,37 @@
-/// <reference types="react" />
-import { DataTypeDefinition } from '@reltio/mdm-sdk';
+import React from 'react';
+import { DatePeriod } from '@reltio/mdm-sdk';
 import { TextFieldProps } from '@mui/material/TextField';
-import { MenuProps } from '@mui/material/Menu';
-import { Option, Values } from './helpers';
 export type DateRangeEditorProps = {
     label?: string;
-    values?: Values;
-    options?: Option[];
-    getValuesDateRange?: (value: Values) => [Date, Date];
-    onChange?: (value: Values) => void;
-    dataTypeDefinition?: DataTypeDefinition;
-    MenuProps?: Partial<MenuProps>;
+    values?: DatePeriod | string;
+    editorLabel?: string;
+    editorPlaceholder?: string;
     TextFieldProps?: TextFieldProps;
-    DateRangePickerProps?: {
-        minDate?: Date;
-        maxDate?: Date;
-    };
-    className?: string;
     classes?: {
         dropdownIndicator?: string;
         root?: string;
     };
+    className?: string;
+    isPickingDate?: boolean;
+    isMenuOpen?: boolean;
+    onMenuToggle?: () => void;
+};
+declare const _default: {
+    (props: DateRangeEditorProps & React.RefAttributes<HTMLDivElement> & {
+        values?: string | [Date, Date] | Omit<import("@reltio/mdm-sdk/src/constants/filter-values").default, "PICK_DATE">;
+        options?: import("../../../HOCs/withDateRangeSelector/helpers").Option[];
+        dataTypeDefinition?: import("@reltio/mdm-sdk").DataTypeDefinition;
+        getValuesDateRange?: (value: string | [Date, Date] | Omit<import("@reltio/mdm-sdk/src/constants/filter-values").default, "PICK_DATE">) => [Date, Date];
+        onChange?: (value: string | [Date, Date] | Omit<import("@reltio/mdm-sdk/src/constants/filter-values").default, "PICK_DATE">) => void;
+        DateRangePickerProps?: Partial<{
+            onApply: ([startDate, endDate]: [Date, Date]) => void;
+            values?: [Date, Date];
+            type?: string;
+            minDate?: Date;
+            maxDate?: Date;
+        } & React.RefAttributes<HTMLDivElement>>;
+        MenuProps?: Partial<import("@mui/material").MenuProps>;
+    }): JSX.Element;
+    displayName: string;
 };
-declare const DateRangeEditor: ({ label, values, options, getValuesDateRange, onChange, dataTypeDefinition, DateRangePickerProps, TextFieldProps, MenuProps, ...otherProps }: DateRangeEditorProps) => JSX.Element;
-export default DateRangeEditor;
+export default _default;

package/cjs/components/editors/DateRangeEditor/DateRangeEditor.js

@@ -50,81 +50,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var moment_1 = __importDefault(require("moment"));
 var ramda_1 = require("ramda");
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var TextField_1 = __importDefault(require("@mui/material/TextField"));
-var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
-var Typography_1 = __importDefault(require("@mui/material/Typography"));
-var Menu_1 = __importDefault(require("@mui/material/Menu"));
-var helpers_1 = require("./helpers");
 var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
-var DateRangePicker_1 = __importDefault(require("../../DateRangePicker/DateRangePicker"));
+var withDateRangeSelector_1 = __importDefault(require("../../../HOCs/withDateRangeSelector/withDateRangeSelector"));
 var styles_1 = require("./styles");
-var dateFormat = moment_1.default.localeData().longDateFormat('L');
-var DateRangeEditor = function (_a) {
+var DateRangeEditor = (0, react_1.forwardRef)(function (_a, ref) {
     var _b, _c;
-    var _d;
-    var label = _a.label, values = _a.values, options = _a.options, _e = _a.getValuesDateRange, getValuesDateRange = _e === void 0 ? helpers_1.convertValuesToDate : _e, _f = _a.onChange, onChange = _f === void 0 ? ramda_1.identity : _f, _g = _a.dataTypeDefinition, dataTypeDefinition = _g === void 0 ? {
-        type: mdm_sdk_1.DataTypes.TYPE_DATE
-    } : _g, DateRangePickerProps = _a.DateRangePickerProps, TextFieldProps = _a.TextFieldProps, MenuProps = _a.MenuProps, otherProps = __rest(_a, ["label", "values", "options", "getValuesDateRange", "onChange", "dataTypeDefinition", "DateRangePickerProps", "TextFieldProps", "MenuProps"]);
-    var classes = otherProps.classes;
-    var isTimestamp = dataTypeDefinition.type === mdm_sdk_1.DataTypes.TYPE_TIMESTAMP;
-    var enhancePlaceHolder = isTimestamp ? function (timeFormat) { return timeFormat.replace(/^[hH]:/, 'HH:'); } : ramda_1.identity;
-    var placeholder = isTimestamp ? (0, mdm_sdk_1.getLocaleFormat)() : dateFormat;
-    var rangeOptions = (0, react_1.useMemo)(function () {
-        return options ||
-            Object.values(mdm_sdk_1.AllDateRangeValues).map(function (option) { return ({ value: option, label: (0, mdm_sdk_1.getRangeOptionLabel)(option) }); });
-    }, [options]);
-    var inputRef = (0, react_1.useRef)(null);
-    var _h = (0, react_1.useState)(false), open = _h[0], setOpen = _h[1];
-    var _j = (0, react_1.useState)(), customValue = _j[0], setCustomValue = _j[1];
+    var label = _a.label, editorLabel = _a.editorLabel, editorPlaceholder = _a.editorPlaceholder, values = _a.values, TextFieldProps = _a.TextFieldProps, isPickingDate = _a.isPickingDate, isMenuOpen = _a.isMenuOpen, onMenuToggle = _a.onMenuToggle, otherProps = __rest(_a, ["label", "editorLabel", "editorPlaceholder", "values", "TextFieldProps", "isPickingDate", "isMenuOpen", "onMenuToggle"]);
     var styles = (0, styles_1.useStyles)();
-    var onItemClick = function (value) {
-        if (value === mdm_sdk_1.AllDateRangeValues.PICK_DATE) {
-            setCustomValue(value);
-        }
-        else {
-            setOpen(false);
-            setCustomValue(null);
-            onChange(value);
-        }
-    };
-    var handleToggle = (0, react_1.useCallback)(function () { return setOpen(function (open) { return !open; }); }, []);
-    var onCancel = function () {
-        setCustomValue(null);
-        setOpen(false);
-    };
-    var editorPlaceholder = "".concat(enhancePlaceHolder(placeholder), " \u2014 ").concat(enhancePlaceHolder(placeholder)).toUpperCase();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(TextField_1.default, __assign({}, TextFieldProps, otherProps, { label: label, value: (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.value) ||
-                ((_d = (0, helpers_1.getEditorValue)(placeholder, dataTypeDefinition, customValue || values, rangeOptions)) === null || _d === void 0 ? void 0 : _d.label), onClick: handleToggle, variant: "filled", size: "small", ref: inputRef, InputProps: __assign({ endAdornment: (react_1.default.createElement(DropdownIndicatorWithIconButton_1.default, { selectProps: {
-                        classes: {
-                            dropdownIndicator: (0, classnames_1.default)(styles.dropdownIndicator, classes === null || classes === void 0 ? void 0 : classes.dropdownIndicator)
-                        },
-                        menuIsOpen: open
-                    }, innerProps: {} })), classes: {
-                    root: (0, classnames_1.default)(styles.inputRoot, (_b = {}, _b[styles.uppercase] = !customValue && Array.isArray(values), _b)),
-                    underline: (0, classnames_1.default)((_c = {}, _c[styles.underline] = open, _c)),
-                    adornedEnd: styles.adornedEnd
-                }, disableUnderline: (0, ramda_1.isNil)(values), readOnly: true }, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps), InputLabelProps: {
-                classes: {
-                    root: open ? styles.inputLabel : undefined
-                },
-                shrink: !(0, ramda_1.isNil)(label)
-            }, placeholder: editorPlaceholder })),
-        react_1.default.createElement(Menu_1.default, __assign({ variant: "menu", open: open, autoFocus: false, classes: { paper: styles.paper }, anchorEl: inputRef.current, onClose: onCancel, anchorOrigin: {
-                vertical: 'bottom',
-                horizontal: 'left'
-            }, transformOrigin: {
-                vertical: 'top',
-                horizontal: 'left'
-            }, elevation: 2, MenuListProps: {
-                autoFocusItem: open,
-                style: {
-                    width: customValue ? '100%' : (0, ramda_1.prop)('clientWidth', inputRef.current)
-                }
-            } }, MenuProps), customValue ? (react_1.default.createElement(DateRangePicker_1.default, __assign({ values: getValuesDateRange(values), onCancel: onCancel, onApply: onItemClick, type: dataTypeDefinition.type }, DateRangePickerProps))) : (rangeOptions.map(function (option) { return (react_1.default.createElement(MenuItem_1.default, { key: option.value, value: option.value, onClick: function () { return onItemClick(option.value); }, className: styles.menuItem },
-            react_1.default.createElement(Typography_1.default, { classes: { root: styles.menuText } }, option.label))); })))));
-};
-exports.default = DateRangeEditor;
+    var classes = otherProps.classes;
+    return (react_1.default.createElement(TextField_1.default, __assign({}, TextFieldProps, otherProps, { ref: ref, label: label, value: (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.value) || editorLabel, onClick: onMenuToggle, variant: "filled", size: "small", InputProps: __assign({ endAdornment: (react_1.default.createElement(DropdownIndicatorWithIconButton_1.default, { selectProps: {
+                    classes: {
+                        dropdownIndicator: (0, classnames_1.default)(styles.dropdownIndicator, classes === null || classes === void 0 ? void 0 : classes.dropdownIndicator)
+                    },
+                    menuIsOpen: isMenuOpen
+                }, innerProps: {} })), classes: {
+                root: (0, classnames_1.default)(styles.inputRoot, (_b = {},
+                    _b[styles.uppercase] = !isPickingDate && Array.isArray(values),
+                    _b)),
+                underline: (0, classnames_1.default)((_c = {}, _c[styles.underline] = isMenuOpen, _c)),
+                adornedEnd: styles.adornedEnd
+            }, disableUnderline: (0, ramda_1.isNil)(values), readOnly: true }, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps), InputLabelProps: {
+            classes: {
+                root: isMenuOpen ? styles.inputLabel : undefined
+            },
+            shrink: !(0, ramda_1.isNil)(label)
+        }, placeholder: editorPlaceholder })));
+});
+DateRangeEditor.displayName = 'DateRangeEditor';
+exports.default = (0, withDateRangeSelector_1.default)(DateRangeEditor);

package/cjs/components/editors/DateRangeEditor/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"underline" | "uppercase" | "menuItem" | "inputRoot" | "adornedEnd" | "inputLabel" | "dropdownIndicator" | "paper" | "menuText">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"underline" | "uppercase" | "inputLabel" | "adornedEnd" | "inputRoot" | "dropdownIndicator">;

package/cjs/components/editors/DateRangeEditor/styles.js

@@ -8,18 +8,6 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         cursor: 'pointer',
         color: 'rgba(0, 0, 0, 0.54)'
     },
-    paper: {
-        minWidth: '112px'
-    },
-    menuItem: {
-        minHeight: '32px'
-    },
-    menuText: {
-        color: theme.palette.text.primary,
-        fontSize: '13px',
-        lineHeight: '15px',
-        letterSpacing: 0
-    },
     underline: {
         '&:after': {
             transform: 'scaleX(1)'

package/cjs/components/editors/TimestampEditor/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"underline" | "isCrossedOut" | "inputRoot" | "adornedEnd" | "iconButtonRoot" | "inputLabel">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"underline" | "iconButtonRoot" | "inputLabel" | "adornedEnd" | "inputRoot" | "isCrossedOut">;

package/cjs/components/history/DateRangeSelector/DateRangeSelector.js

@@ -80,7 +80,7 @@ var DateRangeSelector = function (_a) {
             setInterval(emptyInterval);
         }
     }, [value]);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, className) },
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, className), "data-reltio-id": "date-range-selector" },
         react_1.default.createElement(Typography_1.default, { className: styles.title, variant: 'subtitle1' }, ui_i18n_1.default.text('Date')),
         react_1.default.createElement("div", { className: styles.intervalContainer },
             react_1.default.createElement(SimpleDropDownSelector_1.default, { label: '', className: styles.typeInput, value: {

package/cjs/components/history/HistoryActivitySelector/HistoryActivitySelector.d.ts

@@ -4,6 +4,7 @@ type Props = {
     selectedHistoryActivityTypes: HistoryActivityType[];
     onChange: (activities: HistoryActivityType[]) => void;
     className?: string;
+    disableUnderline?: boolean;
 };
-declare const HistoryActivitySelector: ({ selectedHistoryActivityTypes, onChange, className }: Props) => JSX.Element;
+declare const HistoryActivitySelector: ({ selectedHistoryActivityTypes, onChange, className, disableUnderline }: Props) => JSX.Element;
 export default HistoryActivitySelector;

package/cjs/components/history/HistoryActivitySelector/HistoryActivitySelector.js

@@ -13,15 +13,18 @@ var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../commonRea
 var utils_1 = require("./utils");
 var styles_1 = require("./styles");
 var HistoryActivitySelector = function (_a) {
-    var selectedHistoryActivityTypes = _a.selectedHistoryActivityTypes, onChange = _a.onChange, className = _a.className;
+    var selectedHistoryActivityTypes = _a.selectedHistoryActivityTypes, onChange = _a.onChange, className = _a.className, disableUnderline = _a.disableUnderline;
     var styles = (0, styles_1.useStyles)();
     var valueToOption = function (value) { return ({ value: value, label: (0, utils_1.getHistoryActivityLabel)(value) }); };
     var prepareValues = function (values) { return values.map(valueToOption); };
     var options = prepareValues(utils_1.historyActivityOptions);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, className) },
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, className), "data-reltio-id": "history-activity-selector" },
         react_1.default.createElement(Typography_1.default, { className: styles.title, variant: 'subtitle1' }, ui_i18n_1.default.text('Activity')),
-        react_1.default.createElement(MultiSelect_1.default, { value: prepareValues(selectedHistoryActivityTypes), onChange: (0, ramda_1.pipe)((0, ramda_1.defaultTo)([]), (0, ramda_1.pluck)('value'), onChange), options: options, TextFieldProps: { classes: { root: styles.dropDownInput } }, components: {
+        react_1.default.createElement(MultiSelect_1.default, { value: prepareValues(selectedHistoryActivityTypes), onChange: (0, ramda_1.pipe)((0, ramda_1.defaultTo)([]), (0, ramda_1.pluck)('value'), onChange), options: options, TextFieldProps: {
+                InputProps: { disableUnderline: disableUnderline },
+                classes: { root: styles.dropDownInput }
+            }, components: {
                 DropdownIndicator: DropdownIndicatorWithIconButton_1.default
-            }, styles: styles_1.customStyles, classes: styles, menuPlacement: "bottom", menuPortalTarget: document.body })));
+            }, styles: styles_1.customStyles, classes: styles, menuPlacement: "bottom", menuPortalTarget: document.body, menuShouldBlockScroll: true, captureMenuScroll: false })));
 };
 exports.default = HistoryActivitySelector;

package/cjs/components/history/HistoryFilterButton/HistoryFilterButton.js

@@ -43,7 +43,10 @@ var ramda_1 = require("ramda");
 var FilterList_1 = __importDefault(require("@mui/icons-material/FilterList"));
 var Button_1 = __importDefault(require("@mui/material/Button"));
 var Popover_1 = __importDefault(require("@mui/material/Popover"));
-var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+var DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+var DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+var Divider_1 = __importDefault(require("@mui/material/Divider"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var SmallIconButton_1 = require("../../SmallIconButton");
 var UserSelector_1 = __importDefault(require("../../UserSelector/UserSelector"));
@@ -92,14 +95,16 @@ var HistoryFilterButton = function (_a) {
                 vertical: 'top',
                 horizontal: 'right'
             } },
-            react_1.default.createElement("div", { className: styles.filterContainer },
-                react_1.default.createElement(Typography_1.default, { variant: "h6" }, ui_i18n_1.default.text('Filter')),
-                react_1.default.createElement("div", { className: styles.filterContainerScrollable },
-                    react_1.default.createElement(DateRangeSelector_1.default, { value: dateRange, onChange: handlePropChange('dateRange'), className: styles.filterItem }),
-                    react_1.default.createElement(UserSelector_1.default, { selectedUsers: users, onChange: handlePropChange('users'), className: styles.filterItem }),
-                    react_1.default.createElement(HistoryActivitySelector_1.default, { selectedHistoryActivityTypes: activities, onChange: handlePropChange('activities'), className: styles.filterItem }),
-                    react_1.default.createElement(AttributeSelector_1.default, { selectedAttributes: attributes, entityType: entityType, onChange: handlePropChange('attributes'), className: styles.filterItem, title: ui_i18n_1.default.text('Attribute updated') }))),
-            react_1.default.createElement("div", { className: styles.filterControls },
+            react_1.default.createElement(DialogTitle_1.default, null, ui_i18n_1.default.text('Filter')),
+            react_1.default.createElement(DialogContent_1.default, { dividers: true, className: styles.filterContainer },
+                react_1.default.createElement(DateRangeSelector_1.default, { value: dateRange, onChange: handlePropChange('dateRange'), className: styles.filterItem }),
+                react_1.default.createElement(Divider_1.default, { light: true, className: styles.divider }),
+                react_1.default.createElement(UserSelector_1.default, { selectedUsers: users, onChange: handlePropChange('users'), className: styles.filterItem, disableUnderline: true }),
+                react_1.default.createElement(Divider_1.default, { light: true, className: styles.divider }),
+                react_1.default.createElement(HistoryActivitySelector_1.default, { selectedHistoryActivityTypes: activities, onChange: handlePropChange('activities'), className: styles.filterItem, disableUnderline: true }),
+                react_1.default.createElement(Divider_1.default, { light: true, className: styles.divider }),
+                react_1.default.createElement(AttributeSelector_1.default, { selectedAttributes: attributes, entityType: entityType, onChange: handlePropChange('attributes'), className: styles.filterItem, title: ui_i18n_1.default.text('Attribute updated'), disableUnderline: true })),
+            react_1.default.createElement(DialogActions_1.default, null,
                 react_1.default.createElement(Button_1.default, { onClick: clearAllButtonHandler, className: styles.clearButton }, ui_i18n_1.default.text('Clear all')),
                 react_1.default.createElement(Button_1.default, { onClick: togglePopup }, ui_i18n_1.default.text('Cancel')),
                 react_1.default.createElement(Button_1.default, { color: "primary", onClick: applyButtonHandler }, ui_i18n_1.default.text('Apply'))))));

package/cjs/components/history/HistoryFilterButton/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"input" | "popup" | "filterControls" | "clearButton" | "filterContainer" | "filterContainerScrollable" | "filterItem">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"input" | "popup" | "divider" | "clearButton" | "filterContainer" | "filterItem">;

package/cjs/components/history/HistoryFilterButton/styles.js

@@ -11,21 +11,13 @@ exports.useStyles = (0, styles_1.makeStyles)({
         flexDirection: 'column'
     },
     filterContainer: {
-        padding: 20,
-        height: 410,
-        display: 'flex',
-        flexDirection: 'column'
-    },
-    filterContainerScrollable: {
-        overflowY: 'auto'
+        maxHeight: '400px',
+        borderColor: 'rgba(0,0,0,0.12)'
     },
     filterItem: {
-        marginTop: 15
-    },
-    filterControls: {
-        display: 'flex',
-        padding: '10px 12px',
-        borderTop: 'solid 1px rgba(0, 0, 0, 0.12)'
+        '&:not(:last-child)': {
+            marginBottom: 12
+        }
     },
     clearButton: {
         marginRight: 'auto'
@@ -34,5 +26,8 @@ exports.useStyles = (0, styles_1.makeStyles)({
         height: '100%',
         paddingLeft: '12px',
         paddingRight: '8px'
+    },
+    divider: {
+        marginBottom: 12
     }
 });

package/cjs/components/history/HistoryGraph/HistoryCircle.d.ts

@@ -9,5 +9,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<{
     isCollapsed?: boolean;
     showCollapseIcon?: boolean;
     showLine?: boolean;
-} & React.SVGProps<SVGGElement>, "string" | "y" | "d" | "filter" | "fill" | "values" | "local" | "visibility" | "type" | "operator" | "id" | "in" | "name" | "direction" | "max" | "attributeType" | "mode" | "key" | "children" | "offset" | "method" | "path" | "end" | "radius" | "order" | "width" | "height" | "version" | "format" | "attributeName" | "origin" | "from" | "to" | "style" | "clipPath" | "mask" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "className" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "fontWeight" | "cursor" | "display" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "imageRendering" | "letterSpacing" | "opacity" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "wordSpacing" | "writingMode" | "overflow" | "textDecoration" | "azimuth" | "clip" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "accumulate" | "unicode" | "x" | "href" | "media" | "target" | "min" | "crossOrigin" | "accentHeight" | "additive" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "in2" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "numOctaves" | "orient" | "orientation" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "isDashed" | "isCollapsed" | "showCollapseIcon" | "showLine"> & React.RefAttributes<unknown>>;
+} & React.SVGProps<SVGGElement>, "string" | "y" | "d" | "filter" | "fill" | "values" | "local" | "visibility" | "type" | "operator" | "id" | "in" | "name" | "direction" | "max" | "attributeType" | "mode" | "key" | "children" | "offset" | "method" | "path" | "end" | "radius" | "order" | "width" | "height" | "version" | "format" | "attributeName" | "origin" | "from" | "to" | "style" | "clipPath" | "mask" | "color" | "cursor" | "display" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "imageRendering" | "letterSpacing" | "opacity" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "wordSpacing" | "writingMode" | "overflow" | "textDecoration" | "azimuth" | "clip" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "accumulate" | "unicode" | "x" | "alphabetic" | "hanging" | "ideographic" | "mathematical" | "className" | "viewBox" | "lang" | "media" | "min" | "target" | "role" | "tabIndex" | "crossOrigin" | "accentHeight" | "additive" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "in2" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "numOctaves" | "orient" | "orientation" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isDashed" | "isCollapsed" | "showCollapseIcon" | "showLine"> & React.RefAttributes<unknown>>;
 export default _default;