@reltio/components 1.4.1037 → 1.4.1041

package/esm/components/{EntityTypesSelector → MetadataTypesSelector}/ListLabel/helpers.js

@@ -20,7 +20,7 @@ var countOverflowItems = function (list, labelEl) {
 var findFirstOverflowItemIndex = function (list, labelEl) {
     var childNodes = labelEl.childNodes, clientLeft = labelEl.clientLeft, clientWidth = labelEl.clientWidth;
     if (childNodes.length > 0) {
-        var textNode = childNodes[0];
+        var textNode = Array.from(childNodes)[0];
         var range = document.createRange();
         range.setStart(textNode, 0);
         for (var index = 0; index < list.length; index++) {

package/esm/components/MetadataTypesSelector/ListLabel/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"listLabelContainer" | "listLabel" | "visibleItemsLabel" | "hiddenCount">;

package/esm/components/MetadataTypesSelector/MetadataTypesSelector.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TEntityType, TRelationType } from '@reltio/mdm-sdk';
+import { ListLabel } from './ListLabel/ListLabel';
+declare type ListLabelProps = React.ComponentPropsWithoutRef<typeof ListLabel>;
+declare type Classes = {
+    inputText?: string;
+    input?: string;
+    root?: string;
+    label?: string;
+};
+declare type Props = {
+    items: (TEntityType | TRelationType)[];
+    selectedItemsUris: string[];
+    onChange: (values: string[]) => void;
+    label: string;
+    dataReltioId: string;
+    selectionPopupTitle: string;
+    classes?: Classes;
+    placeholder?: string;
+    ListLabelProps?: Omit<ListLabelProps, 'list'>;
+    disabled?: boolean;
+    enableEmptyValueUnderline?: boolean;
+    single?: boolean;
+};
+export declare const MetadataTypesSelector: React.MemoExoticComponent<({ placeholder, classes, items, selectedItemsUris, onChange, ListLabelProps, disabled, enableEmptyValueUnderline, single, label, dataReltioId, selectionPopupTitle }: Props) => JSX.Element>;
+export {};

package/esm/components/MetadataTypesSelector/MetadataTypesSelector.js

@@ -0,0 +1,98 @@
+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);
+};
+import React, { useRef, useState, useCallback, useMemo, memo } from 'react';
+import classnames from 'classnames';
+import { pipe, propEq, prop } from 'ramda';
+import { utils } from '@reltio/mdm-sdk';
+import TextField from '@material-ui/core/TextField';
+import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import { ListLabel } from './ListLabel/ListLabel';
+import { SmallIconButton } from '../SmallIconButton';
+import SelectionPopup from '../SelectionPopup/SelectionPopup';
+import { useKeyboardNavigation } from '../SelectionPopup/helpers';
+import { SelectMetadataTypesList } from './SelectMetadataTypesList';
+import { useStyles } from './styles';
+var MIN_CONTAINER_WIDTH = 255;
+var LIST_HEIGHT = 245;
+var POPUP_HEIGHT = 355;
+export var MetadataTypesSelector = memo(function (_a) {
+    var _b, _c, _d, _e;
+    var placeholder = _a.placeholder, _f = _a.classes, classes = _f === void 0 ? {} : _f, items = _a.items, selectedItemsUris = _a.selectedItemsUris, onChange = _a.onChange, _g = _a.ListLabelProps, ListLabelProps = _g === void 0 ? {} : _g, disabled = _a.disabled, enableEmptyValueUnderline = _a.enableEmptyValueUnderline, single = _a.single, label = _a.label, dataReltioId = _a.dataReltioId, selectionPopupTitle = _a.selectionPopupTitle;
+    var styles = useStyles();
+    var _h = useState(false), isPopupOpen = _h[0], setIsPopupOpen = _h[1];
+    var openPopup = useCallback(function () { return setIsPopupOpen(true); }, []);
+    var closePopup = useCallback(function () { return setIsPopupOpen(false); }, []);
+    var _j = useState(''), filterText = _j[0], setFilterText = _j[1];
+    var clearFilterText = useCallback(function () { return setFilterText(''); }, []);
+    var handleClose = useCallback(pipe(clearFilterText, closePopup), [closePopup, clearFilterText]);
+    var filteredItems = items
+        .filter(function (_a) {
+        var label = _a.label;
+        return utils.strings.search(label, filterText);
+    })
+        .map(function (item, index) { return ({ item: { item: __assign(__assign({}, item), { filterText: filterText }) }, index: index }); });
+    var selectedLabels = useMemo(function () { return selectedItemsUris.map(function (uri) { return items.find(propEq('uri', uri)); }).map(prop('label')); }, [selectedItemsUris, items]);
+    var handleListItemClick = useCallback(function (item, checked) {
+        if (single) {
+            onChange(checked ? [item.uri] : []);
+            handleClose();
+        }
+        else {
+            onChange(checked
+                ? selectedItemsUris.concat(item.uri)
+                : selectedItemsUris.filter(function (uri) { return uri !== item.uri; }));
+        }
+    }, [selectedItemsUris, onChange, single, handleClose]);
+    var handleSearchOnEnter = useCallback(function (_a) {
+        var item = _a.item;
+        var checked = !selectedItemsUris.includes(item.uri);
+        handleListItemClick(item, checked);
+    }, [selectedItemsUris, handleListItemClick]);
+    var _k = useKeyboardNavigation({
+        items: filteredItems,
+        open: isPopupOpen,
+        onSelectFocusedItem: handleSearchOnEnter,
+        selectedItems: selectedItemsUris,
+        onClose: handleClose
+    }), focusIndex = _k.focusIndex, handleKeyDown = _k.handleKeyDown;
+    var rootRef = useRef();
+    var rootWidth = rootRef.current ? rootRef.current.getBoundingClientRect().width : 0;
+    var containerWidth = Math.max(rootWidth, MIN_CONTAINER_WIDTH);
+    var noTypesSelected = selectedItemsUris.length === 0;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TextField, { label: label, ref: rootRef, InputProps: {
+                startAdornment: noTypesSelected && !placeholder ? null : (React.createElement("div", { className: classnames(styles.inputText, classes.inputText) }, noTypesSelected ? (React.createElement("div", null, placeholder)) : (React.createElement(ListLabel, __assign({}, ListLabelProps, { list: selectedLabels }))))),
+                classes: {
+                    root: styles.inputRoot,
+                    input: classnames(styles.input, classes.input, (_b = {},
+                        _b[styles.emptyInput] = noTypesSelected && !placeholder,
+                        _b)),
+                    disabled: classnames(styles.disabledInput, (_c = {}, _c[styles.disabledPointer] = disabled, _c)),
+                    underline: styles.disabledUnderline
+                },
+                endAdornment: (React.createElement(SmallIconButton, { size: 'L', icon: ArrowDropDown, iconClassName: classnames(styles.icon, (_d = {},
+                        _d[styles['popup-opened-icon']] = isPopupOpen,
+                        _d)), disabled: disabled })),
+                readOnly: true,
+                disabled: true,
+                disableUnderline: noTypesSelected && !enableEmptyValueUnderline
+            }, inputProps: {
+                tabIndex: -1
+            }, InputLabelProps: {
+                classes: {
+                    root: classnames(styles.inputLabel, classes.label)
+                }
+            }, value: "", onClick: disabled ? undefined : openPopup, classes: { root: classnames(styles.root, classes.root) }, margin: "dense", variant: "filled", disabled: disabled, "data-reltio-id": dataReltioId }),
+        React.createElement(SelectionPopup, { open: isPopupOpen, anchorEl: rootRef.current, onClose: handleClose, onSearch: setFilterText, title: selectionPopupTitle, containerWidth: containerWidth, containerHeight: POPUP_HEIGHT, searchInputOnKeyDown: handleKeyDown, transformOrigin: { horizontal: 'left', vertical: 'top' }, anchorOrigin: { horizontal: 'left', vertical: 'bottom' }, PaperProps: (_e = {}, _e['data-reltio-id'] = dataReltioId + "-popup", _e) },
+            React.createElement(SelectMetadataTypesList, { items: filteredItems, onItemClick: handleListItemClick, selectedItems: selectedItemsUris, width: containerWidth, height: LIST_HEIGHT, focusIndex: focusIndex }))));
+});
+MetadataTypesSelector.displayName = 'MetadataTypesSelector';

package/esm/components/MetadataTypesSelector/SelectMetadataTypesList.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TEntityType, TRelationType } from '@reltio/mdm-sdk';
+import AttributeListItem from '../AttributeListItem/AttributeListItem';
+declare type AttributeListItemProps = React.ComponentPropsWithoutRef<typeof AttributeListItem>;
+declare type Item = {
+    item: {
+        item: TEntityType | TRelationType;
+    };
+    index: number;
+};
+declare type Props = {
+    selectedItems: string[];
+    onItemClick: AttributeListItemProps['onClick'];
+    focusIndex: number;
+    items: Item[];
+    width: number;
+    height: number;
+};
+export declare const SelectMetadataTypesList: React.MemoExoticComponent<({ selectedItems, onItemClick, focusIndex, width, height, ...otherProps }: Props) => JSX.Element>;
+export {};

package/esm/components/{EntityTypesSelector/SelectEntityTypesList.js → MetadataTypesSelector/SelectMetadataTypesList.js}

@@ -21,26 +21,20 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { memo } from 'react';
-import PropTypes from 'prop-types';
 import { always } from 'ramda';
 import AttributeListItem from '../AttributeListItem/AttributeListItem';
 import Highlighter from '../Highlighter/Highlighter';
 import VirtualGroupedList from '../VirtualGroupedList/VirtualGroupedList';
 var ITEM_HEIGHT = 32;
 var getItemSize = always(ITEM_HEIGHT);
-var SelectEntityTypesList = function (_a) {
-    var selectedEntityTypes = _a.selectedEntityTypes, onItemClick = _a.onItemClick, focusIndex = _a.focusIndex, otherProps = __rest(_a, ["selectedEntityTypes", "onItemClick", "focusIndex"]);
+export var SelectMetadataTypesList = memo(function (_a) {
+    var selectedItems = _a.selectedItems, onItemClick = _a.onItemClick, focusIndex = _a.focusIndex, width = _a.width, height = _a.height, otherProps = __rest(_a, ["selectedItems", "onItemClick", "focusIndex", "width", "height"]);
     var renderItem = function (style, _a, index) {
         var item = _a.item;
-        var isSelected = !!selectedEntityTypes.find(function (uri) { return item.uri === uri; });
+        var isSelected = !!selectedItems.find(function (uri) { return item.uri === uri; });
         var isFocused = index === focusIndex;
         return (React.createElement(AttributeListItem, { key: item.uri, onClick: onItemClick, checked: isSelected, data: item, label: React.createElement(Highlighter, { text: item.label, highlight: item.filterText }), labelInText: item.label, style: style, isFocused: isFocused, hideIcon: true, LogoIcon: item.LogoIcon }));
     };
-    return (React.createElement(VirtualGroupedList, __assign({ getItemSize: getItemSize, renderItem: renderItem, focusIndex: focusIndex, fixedTitle: false, disableHorizontalScrollbar: true }, otherProps)));
-};
-SelectEntityTypesList.propTypes = {
-    selectedEntityTypes: PropTypes.array,
-    onItemClick: PropTypes.func,
-    focusIndex: PropTypes.number
-};
-export default memo(SelectEntityTypesList);
+    return (React.createElement(VirtualGroupedList, __assign({ getItemSize: getItemSize, renderItem: renderItem, focusIndex: focusIndex, fixedTitle: false, disableHorizontalScrollbar: true, width: width, height: height }, otherProps)));
+});
+SelectMetadataTypesList.displayName = 'SelectMetadataTypesList';

package/esm/components/MetadataTypesSelector/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "input" | "root" | "inputLabel" | "inputRoot" | "inputText" | "emptyInput" | "disabledInput" | "disabledPointer" | "disabledUnderline" | "popup-opened-icon">;

package/esm/components/RelationTypesSelector/RelationTypesSelector.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TRelationType } from '@reltio/mdm-sdk';
+import { MetadataTypesSelector } from '../MetadataTypesSelector/MetadataTypesSelector';
+declare type MetadataTypesSelectorProps = React.ComponentProps<typeof MetadataTypesSelector>;
+declare type Props = {
+    relationTypes: TRelationType[];
+    selectedRelationTypes: string[];
+    enableEmptyValueUnderline?: boolean;
+    onChange: (values: string[]) => void;
+    single?: boolean;
+    placeholder?: string;
+    classes?: MetadataTypesSelectorProps['classes'];
+    ListLabelProps?: MetadataTypesSelectorProps['ListLabelProps'];
+    disabled?: boolean;
+};
+export declare const RelationTypesSelector: React.MemoExoticComponent<({ relationTypes, selectedRelationTypes, single, placeholder, enableEmptyValueUnderline, onChange, classes, ListLabelProps, disabled }: Props) => JSX.Element>;
+export {};

package/esm/components/RelationTypesSelector/RelationTypesSelector.js

@@ -0,0 +1,10 @@
+import React, { useMemo, memo } from 'react';
+import i18n from 'ui-i18n';
+import { isAvailableRelationType } from '@reltio/mdm-sdk';
+import { MetadataTypesSelector } from '../MetadataTypesSelector/MetadataTypesSelector';
+export var RelationTypesSelector = memo(function (_a) {
+    var relationTypes = _a.relationTypes, selectedRelationTypes = _a.selectedRelationTypes, single = _a.single, placeholder = _a.placeholder, enableEmptyValueUnderline = _a.enableEmptyValueUnderline, onChange = _a.onChange, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.ListLabelProps, ListLabelProps = _c === void 0 ? {} : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
+    var items = useMemo(function () { return relationTypes.filter(isAvailableRelationType); }, [relationTypes]);
+    return (React.createElement(MetadataTypesSelector, { items: items, selectedItemsUris: selectedRelationTypes, single: single, placeholder: placeholder, enableEmptyValueUnderline: enableEmptyValueUnderline, onChange: onChange, classes: classes, ListLabelProps: ListLabelProps, disabled: disabled, label: i18n.text('Relation type'), dataReltioId: "relation-type-selector", selectionPopupTitle: i18n.text('Select relation types') }));
+});
+RelationTypesSelector.displayName = 'RelationTypesSelector';

package/esm/components/SearchInput/SearchInput.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { InputProps } from '@material-ui/core/Input';
 export declare type SearchInputProps = InputProps & {
-    value: string;
+    value?: string;
     autofocus: boolean;
     onSearch: (value?: string) => void;
     rootRef?: React.MutableRefObject<HTMLInputElement>;
     height: number;
+    placeholder?: string;
 };
-declare const _default: React.MemoExoticComponent<({ value, autofocus, onSearch, rootRef, classes, height, ...otherProps }: SearchInputProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ value, autofocus, onSearch, rootRef, classes, height, placeholder, ...otherProps }: SearchInputProps) => JSX.Element>;
 export default _default;

package/esm/components/SearchInput/SearchInput.js

@@ -32,13 +32,13 @@ import { getValue, noop } from '../../core';
 import SmallIconButton from '../SmallIconButton/SmallIconButton';
 import { useStyles } from './styles';
 var SearchInput = function (_a) {
-    var value = _a.value, autofocus = _a.autofocus, _b = _a.onSearch, onSearch = _b === void 0 ? noop : _b, rootRef = _a.rootRef, _c = _a.classes, classes = _c === void 0 ? {} : _c, height = _a.height, otherProps = __rest(_a, ["value", "autofocus", "onSearch", "rootRef", "classes", "height"]);
+    var value = _a.value, autofocus = _a.autofocus, _b = _a.onSearch, onSearch = _b === void 0 ? noop : _b, rootRef = _a.rootRef, _c = _a.classes, classes = _c === void 0 ? {} : _c, height = _a.height, _d = _a.placeholder, placeholder = _d === void 0 ? i18n.text('Search') : _d, otherProps = __rest(_a, ["value", "autofocus", "onSearch", "rootRef", "classes", "height", "placeholder"]);
     var styles = useStyles({ height: height });
-    var _d = useState(''), localValue = _d[0], setLocalValue = _d[1];
+    var _e = useState(''), localValue = _e[0], setLocalValue = _e[1];
     var updateValue = pipe(tap(onSearch), setLocalValue);
     var clearValue = function () { return updateValue(''); };
     var inputValue = isNil(value) ? localValue : value;
     return (React.createElement(Input, __assign({ startAdornment: React.createElement(InputAdornment, { position: "start" },
-            React.createElement(SearchIcon, { className: styles.icon })), endAdornment: React.createElement(InputAdornment, { position: "end" }, inputValue.length > 0 && (React.createElement(SmallIconButton, { icon: CloseIcon, className: styles.clearButton, onClick: clearValue }))), autoFocus: autofocus, classes: __assign(__assign({}, classes), { input: classNames(styles.input, classes.input), root: classNames(styles.container, classes.root) }), placeholder: i18n.text('Search'), value: inputValue, onChange: pipe(getValue, updateValue), disableUnderline: true, ref: rootRef }, otherProps)));
+            React.createElement(SearchIcon, { className: styles.icon })), endAdornment: React.createElement(InputAdornment, { position: "end" }, inputValue.length > 0 && (React.createElement(SmallIconButton, { icon: CloseIcon, className: styles.clearButton, onClick: clearValue }))), autoFocus: autofocus, classes: __assign(__assign({}, classes), { input: classNames(styles.input, classes.input), root: classNames(styles.container, classes.root) }), placeholder: placeholder, value: inputValue, onChange: pipe(getValue, updateValue), disableUnderline: true, ref: rootRef }, otherProps)));
 };
 export default memo(SearchInput);

package/esm/components/SelectionPopup/SelectionPopup.d.ts

@@ -1,45 +1,18 @@
+import React from 'react';
+import { PopoverProps } from '@material-ui/core/Popover';
+declare type Props = {
+    title: string;
+    containerWidth: number;
+    containerHeight: number;
+    children: React.ReactNode;
+    PaperProps: Record<string, unknown>;
+    searchInputOnKeyDown: (event: React.KeyboardEvent) => void;
+    onSearch: (value?: string) => void;
+    className?: string;
+    hideTitle?: boolean;
+    hideSearchInput?: boolean;
+    headerPlacement?: 'top' | 'bottom';
+    searchInputRef?: React.Ref<unknown>;
+} & PopoverProps;
+declare const SelectionPopup: ({ title, className, onSearch, hideTitle, hideSearchInput, headerPlacement, containerWidth, containerHeight, searchInputOnKeyDown, children, searchInputRef, anchorOrigin, transformOrigin, ...otherProps }: Props) => JSX.Element;
 export default SelectionPopup;
-declare function SelectionPopup({ title, className, onSearch, hideTitle, hideSearchInput, headerPlacement, containerWidth, containerHeight, searchInputOnKeyDown, children, searchInputRef, ...otherProps }: {
-    [x: string]: any;
-    title: any;
-    className: any;
-    onSearch: any;
-    hideTitle: any;
-    hideSearchInput: any;
-    headerPlacement?: string;
-    containerWidth: any;
-    containerHeight: any;
-    searchInputOnKeyDown: any;
-    children: any;
-    searchInputRef: any;
-}): JSX.Element;
-declare namespace SelectionPopup {
-    namespace propTypes {
-        const className: PropTypes.Requireable<string>;
-        const title: PropTypes.Requireable<string>;
-        const headerPlacement: PropTypes.Requireable<string>;
-        const onSearch: PropTypes.Requireable<(...args: any[]) => any>;
-        const searchInputOnKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        const containerWidth: PropTypes.Requireable<number>;
-        const containerHeight: PropTypes.Requireable<number>;
-        const hideTitle: PropTypes.Requireable<boolean>;
-        const hideSearchInput: PropTypes.Requireable<boolean>;
-        const searchInputRef: PropTypes.Requireable<PropTypes.InferProps<{
-            current: PropTypes.Requireable<Element>;
-        }>>;
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }
-    namespace defaultProps {
-        namespace anchorOrigin {
-            const vertical: string;
-            const horizontal: string;
-        }
-        namespace transformOrigin {
-            const vertical_1: string;
-            export { vertical_1 as vertical };
-            const horizontal_1: string;
-            export { horizontal_1 as horizontal };
-        }
-    }
-}
-import PropTypes from "prop-types";

package/esm/components/SelectionPopup/SelectionPopup.js

@@ -21,45 +21,27 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import i18n from 'ui-i18n';
 import Popover from '@material-ui/core/Popover';
 import useStyles from './styles.js';
 import SearchInput from '../SearchInput/SearchInput';
 var SelectionPopup = function (_a) {
-    var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, _b = _a.headerPlacement, headerPlacement = _b === void 0 ? 'top' : _b, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef"]);
+    var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, _b = _a.headerPlacement, headerPlacement = _b === void 0 ? 'top' : _b, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, _c = _a.anchorOrigin, anchorOrigin = _c === void 0 ? {
+        vertical: 'top',
+        horizontal: 'right'
+    } : _c, _d = _a.transformOrigin, transformOrigin = _d === void 0 ? {
+        vertical: 'top',
+        horizontal: 'right'
+    } : _d, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin"]);
     var classes = useStyles({ containerWidth: containerWidth, containerHeight: containerHeight });
     var header = (React.createElement(React.Fragment, null,
         !hideTitle && React.createElement("div", { className: classes.header }, title),
         !hideSearchInput && (React.createElement(SearchInput, { onSearch: onSearch, autofocus: true, onKeyDown: searchInputOnKeyDown, inputRef: searchInputRef, classes: { root: classes.searchInputContainer }, placeholder: i18n.text('Search & add attributes'), height: 40 }))));
-    return (React.createElement(Popover, __assign({}, otherProps),
+    return (React.createElement(Popover, __assign({ anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, otherProps),
         React.createElement("div", { className: classnames(classes.container, className), style: { width: containerWidth } },
             headerPlacement === 'top' && header,
             React.createElement("div", { className: classes.list }, children),
             headerPlacement === 'bottom' && header)));
 };
-SelectionPopup.propTypes = {
-    className: PropTypes.string,
-    title: PropTypes.string,
-    headerPlacement: PropTypes.oneOf(['top', 'bottom']),
-    onSearch: PropTypes.func,
-    searchInputOnKeyDown: PropTypes.func,
-    containerWidth: PropTypes.number,
-    containerHeight: PropTypes.number,
-    hideTitle: PropTypes.bool,
-    hideSearchInput: PropTypes.bool,
-    searchInputRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-    children: PropTypes.node
-};
-SelectionPopup.defaultProps = {
-    anchorOrigin: {
-        vertical: 'top',
-        horizontal: 'right'
-    },
-    transformOrigin: {
-        vertical: 'top',
-        horizontal: 'right'
-    }
-};
 export default SelectionPopup;

package/esm/components/SelectionPopup/SelectionPopupPopper/SelectionPopupPopper.d.ts

@@ -1,36 +1,18 @@
+import React from 'react';
+import { PaperProps } from '@material-ui/core/Paper';
+declare type Props = {
+    open: boolean;
+    anchorEl: HTMLElement;
+    className?: string;
+    onClose: () => void;
+    containerWidth: number;
+    containerHeight: number;
+    paperProps: Omit<PaperProps, 'evelation'>;
+    listContent?: React.ReactNode;
+    externalInputField?: React.ReactNode;
+    classes?: {
+        root?: string;
+    };
+};
+declare const SelectionPopupPopper: ({ open, anchorEl, className, onClose, containerWidth, containerHeight, paperProps, listContent, externalInputField, classes }: Props) => JSX.Element;
 export default SelectionPopupPopper;
-declare function SelectionPopupPopper({ open, anchorEl, className, onClose, containerWidth, containerHeight, paperProps, listContent, externalInputField, classes }: {
-    open: any;
-    anchorEl: any;
-    className: any;
-    onClose: any;
-    containerWidth: any;
-    containerHeight: any;
-    paperProps: any;
-    listContent: any;
-    externalInputField: any;
-    classes?: {};
-}): JSX.Element;
-declare namespace SelectionPopupPopper {
-    namespace propTypes {
-        const open: PropTypes.Requireable<boolean>;
-        const anchorEl: PropTypes.Requireable<object>;
-        const className: PropTypes.Requireable<string>;
-        const onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        const containerWidth: PropTypes.Requireable<number>;
-        const containerHeight: PropTypes.Requireable<number>;
-        const paperProps: PropTypes.Requireable<object>;
-        const listContent: PropTypes.Requireable<PropTypes.ReactElementLike>;
-        const externalInputField: PropTypes.Requireable<PropTypes.ReactElementLike>;
-        const classes: PropTypes.Requireable<PropTypes.InferProps<{
-            root: PropTypes.Requireable<string>;
-        }>>;
-    }
-    namespace defaultProps {
-        namespace popoverAnchorOrigin {
-            const vertical: string;
-            const horizontal: string;
-        }
-    }
-}
-import PropTypes from "prop-types";

package/esm/components/SelectionPopup/SelectionPopupPopper/SelectionPopupPopper.js

@@ -10,7 +10,6 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import useCommonStyles from '../styles.js';
 import Popper from '../../Popper/Popper';
@@ -32,24 +31,4 @@ var SelectionPopupPopper = function (_a) {
                         React.createElement("div", { className: commonStyles.list }, listContent)))));
         })));
 };
-SelectionPopupPopper.propTypes = {
-    open: PropTypes.bool,
-    anchorEl: PropTypes.object,
-    className: PropTypes.string,
-    onClose: PropTypes.func,
-    containerWidth: PropTypes.number,
-    containerHeight: PropTypes.number,
-    paperProps: PropTypes.object,
-    listContent: PropTypes.element,
-    externalInputField: PropTypes.element,
-    classes: PropTypes.shape({
-        root: PropTypes.string
-    })
-};
-SelectionPopupPopper.defaultProps = {
-    popoverAnchorOrigin: {
-        vertical: 'top',
-        horizontal: 'right'
-    }
-};
 export default SelectionPopupPopper;

package/esm/components/SelectionPopup/helpers.d.ts

@@ -1,10 +1,24 @@
-export function useKeyboardNavigation({ items, open, onSelectFocusedItem, selectedItems, onClose }: {
-    items: any;
-    open: any;
-    onSelectFocusedItem: any;
-    selectedItems: any;
-    onClose: any;
-}): {
-    focusIndex: any;
-    handleKeyDown: (event: any) => boolean;
+import React from 'react';
+declare type Item = {
+    titleItemIndex?: number;
+    index: number;
+    item: {
+        item: Record<string, unknown>;
+        moveTo?: number;
+    };
 };
+declare type Props = {
+    items: Item[];
+    open: boolean;
+    onSelectFocusedItem: (item: {
+        item: Item['item']['item'];
+        groupData: Item['item'];
+    }) => void;
+    selectedItems: string[];
+    onClose: (event: React.KeyboardEvent) => void;
+};
+declare const useKeyboardNavigation: ({ items, open, onSelectFocusedItem, selectedItems, onClose }: Props) => {
+    focusIndex: number;
+    handleKeyDown: (event: React.KeyboardEvent) => boolean;
+};
+export { useKeyboardNavigation };

package/esm/components/attributes/PivotingAttributes/PivotingTooltip.js

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import Tooltip from '@material-ui/core/Tooltip';
-import mdm from '@reltio/mdm-module';
+import mdm, { ui as mdmModuleUi } from '@reltio/mdm-module';
 import { isNested } from '@reltio/mdm-sdk';
 import { isNil } from 'ramda';
 import { PivotingAttributeContext } from '../../../contexts';
-import { generatePivotingValue, preparePivotingAttributeValue } from './helpers';
+import { convertNestedAttributePivotingValue, convertSimpleAttributePivotingValue, generatePivotingValue, preparePivotingAttributeValue } from './helpers';
 import PivotingIcon from '../../../icons/PivotingIcon';
 import { PivotingTooltipContent } from './PivotingTooltipContent';
 import { usePivotingTooltipStyles, useStyles } from './styles';
@@ -13,6 +13,7 @@ export var PivotingTooltip = function (_a) {
     var value = _a.value, attributeType = _a.attributeType, children = _a.children, className = _a.className;
     var styles = usePivotingTooltipStyles();
     var contentStyles = useStyles();
+    var dispatch = useDispatch();
     var pivotingAttributesList = useContext(PivotingAttributeContext) || [];
     var isNestedAttribute = isNested(attributeType);
     var metadata = useSelector(mdm.selectors.getMetadata) || {};
@@ -29,8 +30,14 @@ export var PivotingTooltip = function (_a) {
         var uri = _a.uri;
         return uri === attributeType.uri;
     });
-    return isPivotingAttribute ? (React.createElement(Tooltip, { interactive: true, arrow: true, placement: "right-start", classes: styles, title: React.createElement(PivotingTooltipContent, { value: pivotingValue, attributeType: attributeType, config: pivotingAttribute.popup }) },
+    var handleSeeAllClick = function () {
+        var generatedValue = Array.isArray(pivotingValue)
+            ? convertNestedAttributePivotingValue(pivotingValue)
+            : convertSimpleAttributePivotingValue(attributeType, pivotingValue);
+        dispatch(mdmModuleUi.actions.openPivotingPerspective({ value: generatedValue, attributeType: attributeType }));
+    };
+    return isPivotingAttribute ? (React.createElement(Tooltip, { interactive: true, arrow: true, placement: "right-start", classes: styles, title: React.createElement(PivotingTooltipContent, { value: pivotingValue, attributeType: attributeType, config: pivotingAttribute.popup, onSeeAllClick: handleSeeAllClick }) },
         React.createElement("span", { className: className },
             React.createElement(PivotingIcon, { className: contentStyles.icon }),
-            React.createElement("span", { className: contentStyles.content }, children)))) : (React.createElement(React.Fragment, null, children));
+            React.createElement("span", { className: contentStyles.content, onClick: handleSeeAllClick }, children)))) : (React.createElement(React.Fragment, null, children));
 };

package/esm/components/attributes/PivotingAttributes/PivotingTooltipContent.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
-import { AttributeType } from '@reltio/mdm-sdk';
+import { AttributeType, PrimitiveValue } from '@reltio/mdm-sdk';
 import { PivotingValue } from './helpers';
 export declare type Props = {
-    value: PivotingValue[] | string | number | boolean;
+    value: PivotingValue[] | PrimitiveValue;
     attributeType: AttributeType;
     config: {
         label?: string;
         entityType?: string;
     };
+    onSeeAllClick: () => void;
 };
-export declare const PivotingTooltipContent: ({ value, attributeType, config }: Props) => JSX.Element;
+export declare const PivotingTooltipContent: ({ value, attributeType, config, onSeeAllClick }: Props) => JSX.Element;

package/esm/components/attributes/PivotingAttributes/PivotingTooltipContent.js

@@ -10,23 +10,22 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import i18n from 'ui-i18n';
-import mdm, { ui as mdmModuleUi } from '@reltio/mdm-module';
+import mdm from '@reltio/mdm-module';
 import { getEntityUriForLink, getFilteredEntities, getLabel, getTotals } from '@reltio/mdm-sdk';
 import EntityAvatar from '../../EntityAvatar/EntityAvatar';
 import EntityUriLink from '../../EntityUriLink/EntityUriLink';
-import { useStyles } from './styles';
-import { convertNestedAttributePivotingValue, convertSimpleAttributePivotingValue, getParamsFilteringEntities } from './helpers';
+import { getParamsFilteringEntities } from './helpers';
 import { useSafePromise } from '../../../hooks';
+import { useStyles } from './styles';
 var MAX_ENTITIES_PIVOTING_TOOLTIP = 6;
 export var PivotingTooltipContent = function (_a) {
-    var value = _a.value, attributeType = _a.attributeType, _b = _a.config, config = _b === void 0 ? {} : _b;
+    var value = _a.value, attributeType = _a.attributeType, _b = _a.config, config = _b === void 0 ? {} : _b, onSeeAllClick = _a.onSeeAllClick;
     var _c = useState([]), entities = _c[0], setEntities = _c[1];
     var _d = useState(0), total = _d[0], setTotal = _d[1];
     var entity = useSelector(mdm.selectors.getEntity) || {};
     var safePromise = useSafePromise();
-    var dispatch = useDispatch();
     var styles = useStyles();
     var globalSearchRequestOptions = useSelector(mdm.selectors.getGlobalSearchRequestOptions) || {};
     var entityType = config.entityType || entity.type;
@@ -45,12 +44,6 @@ export var PivotingTooltipContent = function (_a) {
             setTotal(0);
         });
     }, []);
-    var handleClickSeeAll = function () {
-        var generatedValue = Array.isArray(value)
-            ? convertNestedAttributePivotingValue(value)
-            : convertSimpleAttributePivotingValue(attributeType, value);
-        dispatch(mdmModuleUi.actions.openPivotingPerspective({ value: generatedValue, attributeType: attributeType }));
-    };
     var hasEntityTypeLabel = Boolean(config.label);
     return (React.createElement("div", { className: styles.container },
         React.createElement("div", { className: styles.header },
@@ -62,5 +55,5 @@ export var PivotingTooltipContent = function (_a) {
             React.createElement(EntityAvatar, { entity: visibleEntity, avatarClassName: styles.profileIcon }),
             React.createElement(EntityUriLink, { className: styles.entityLabel, value: getEntityUriForLink(visibleEntity) }, getLabel(visibleEntity.label)))); })),
         shouldShowSeeAllButton && (React.createElement("div", { className: styles.footer },
-            React.createElement("a", { className: styles.seeAllButton, onClick: handleClickSeeAll }, i18n.text('See all'))))));
+            React.createElement("a", { className: styles.seeAllButton, onClick: onSeeAllClick }, i18n.text('See all'))))));
 };

package/esm/components/attributes/PivotingAttributes/helpers.d.ts

@@ -1,11 +1,11 @@
-import { AttributeType, SearchFilter, Metadata, PivotingAttribute, RecordAttributesType } from '@reltio/mdm-sdk';
+import { AttributeType, SearchFilter, Metadata, PivotingAttribute, RecordAttributesType, PrimitiveValue } from '@reltio/mdm-sdk';
 export declare type PivotingValue = {
     [uri: string]: string[] | PivotingValue[];
 };
-export declare const getParamsFilteringEntities: (values: string | number | boolean | PivotingValue[], attributeType: AttributeType, entityType?: string) => SearchFilter[];
+export declare const getParamsFilteringEntities: (values: PrimitiveValue | PivotingValue[], attributeType: AttributeType, entityType?: string) => SearchFilter[];
 export declare const generatePivotingValue: (attributeType: AttributeType, value: RecordAttributesType, pivotingAttributes: PivotingAttribute[], metadata: Metadata) => PivotingValue[];
-export declare const convertSimpleAttributePivotingValue: (attrType: AttributeType, value: string | number | boolean) => {
-    [x: string]: string | number | boolean;
+export declare const convertSimpleAttributePivotingValue: (attrType: AttributeType, value: PrimitiveValue) => {
+    [x: string]: PrimitiveValue;
 }[];
 export declare const convertNestedAttributePivotingValue: (values: PivotingValue[]) => any[];
-export declare const preparePivotingAttributeValue: (value: any, attributeType: any) => any;
+export declare const preparePivotingAttributeValue: (value: PrimitiveValue, attributeType: AttributeType) => PrimitiveValue;