pne-ui 4.0.8 → 4.0.9

package/esm/src/component/fab/PneFloatingActionButtons.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import EditIcon from '@mui/icons-material/Edit';
+import { Box, Divider, Fab, ListItemIcon, ListItemText, Menu, MenuItem, Stack, Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { DEFAULT_BREAKPOINTS } from '../../common/responsive/breakpoints';
+import { useBreakpoint } from '../responsive/useBreakpoint';
+const isContentItem = (item) => 'kind' in item && item.kind === 'content';
+const isDividerItem = (item) => 'kind' in item && item.kind === 'divider';
+const isActionItem = (item) => !isContentItem(item) && !isDividerItem(item);
+/**
+ * Floating action menu:
+ * - on mobile: actions/content rendered inside a Menu
+ * - on desktop: actions rendered as floating Fabs stacked above the trigger; Menu still opens for content/banner
+ * Actions array may include content blocks (`{ kind: 'content', node: <...> }`) to embed custom UI.
+ */
+export function PneFloatingActionButtons({ actions, breakpoints = DEFAULT_BREAKPOINTS, mobileBreakpoint = 800, position, fabLabel, fabIcon = React.createElement(EditIcon, null), className, bannerText, }) {
+    const { t } = useTranslation();
+    const breakpoint = useBreakpoint({ breakpoints });
+    const isMobile = breakpoint < mobileBreakpoint;
+    const resolvedFabLabel = fabLabel ?? t('pne.fab.actions', { defaultValue: 'Actions' });
+    const resolvedFabActionLabel = t('pne.fab.action', { defaultValue: 'Action' });
+    const scrollTopLabel = t('pne.fab.scrollToTop', { defaultValue: 'Scroll to top' });
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [showScrollTop, setShowScrollTop] = useState(false);
+    const handleOpen = (event) => setAnchorEl(event.currentTarget);
+    const handleClose = () => setAnchorEl(null);
+    const handleAction = (action) => {
+        handleClose();
+        action.onClick();
+    };
+    const handleScrollTop = () => {
+        if (typeof window === 'undefined')
+            return;
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+    const renderMenuItems = (items) => items.map(item => isContentItem(item) ? (React.createElement(Box, { key: item.id }, item.node)) : isDividerItem(item) ? (React.createElement(Divider, { key: item.id, component: 'li', role: 'presentation', sx: { my: 2 } })) : isActionItem(item) ? (React.createElement(MenuItem, { key: item.id, disabled: item.disabled, onClick: () => handleAction(item), sx: { fontSize: '0.875rem', display: 'flex', alignItems: 'center', gap: 1 } },
+        React.createElement(ListItemText, { slotProps: { primary: { sx: { fontSize: '0.875rem' } } }, sx: { flex: 1 } }, item.label),
+        item.icon ? (React.createElement(Box, { component: 'span', sx: { display: 'inline-flex', color: 'inherit', lineHeight: 0 } }, item.icon)) : null)) : null);
+    // Desktop: actions can be shown independently in menu and floating stack.
+    const menuItems = actions.filter(item => !isActionItem(item) || item.showInMenu !== false);
+    const actionItems = isMobile ? [] : actions.filter(isActionItem).filter(item => item.showInFabStack !== false);
+    const fabSx = isMobile ? { opacity: 0.85 } : { opacity: 0.3 };
+    const stackSx = isMobile ? undefined : { '&:hover .pne-fab': { opacity: 0.85 } };
+    const baseOffset = isMobile ? 16 : 24;
+    const bottomOffset = position?.bottom ?? baseOffset;
+    const rightOffset = position?.right ?? baseOffset;
+    const containerSx = {
+        bottom: `calc(${bottomOffset}px + env(safe-area-inset-bottom, 0px))`,
+        right: `calc(${rightOffset}px + env(safe-area-inset-right, 0px))`,
+    };
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        let frameId = null;
+        const update = () => {
+            frameId = null;
+            const offset = window.scrollY ?? document.documentElement.scrollTop ?? 0;
+            setShowScrollTop(offset > 16);
+        };
+        update();
+        const handleScroll = () => {
+            if (frameId !== null)
+                return;
+            frameId = window.requestAnimationFrame(update);
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            if (frameId !== null) {
+                window.cancelAnimationFrame(frameId);
+            }
+        };
+    }, []);
+    return (React.createElement(Box, { className: className, sx: {
+            position: 'fixed',
+            zIndex: 1300,
+            ...containerSx,
+        } },
+        React.createElement(Stack, { spacing: 1, sx: {
+                alignItems: 'flex-end',
+                ...(stackSx ?? {}),
+            } },
+            showScrollTop ? (React.createElement(Tooltip, { title: isMobile ? '' : scrollTopLabel, placement: 'left', disableInteractive: true },
+                React.createElement("span", null,
+                    React.createElement(Fab, { className: 'pne-fab', color: 'primary', size: 'small', onClick: handleScrollTop, "aria-label": scrollTopLabel, sx: fabSx },
+                        React.createElement(ArrowUpwardIcon, { fontSize: 'small' }))))) : null,
+            !isMobile
+                ? actionItems.map(item => {
+                    const title = item.tooltip ??
+                        (typeof item.label === 'string' ? item.label : typeof resolvedFabLabel === 'string' ? resolvedFabLabel : resolvedFabActionLabel);
+                    return (React.createElement(Tooltip, { key: item.id, title: title, placement: 'left', disableInteractive: true },
+                        React.createElement("span", null,
+                            React.createElement(Fab, { className: 'pne-fab', color: 'primary', size: 'small', onClick: () => handleAction(item), "aria-label": typeof title === 'string' ? title : resolvedFabActionLabel, sx: fabSx }, item.icon ?? (typeof item.label === 'string' ? item.label.charAt(0) : fabIcon)))));
+                })
+                : null,
+            React.createElement(Tooltip, { title: isMobile ? '' : resolvedFabLabel, disableInteractive: true },
+                React.createElement(Fab, { className: 'pne-fab', color: 'primary', size: 'small', onClick: handleOpen, "aria-label": typeof resolvedFabLabel === 'string' ? resolvedFabLabel : t('pne.fab.actions', { defaultValue: 'Actions' }), sx: fabSx }, fabIcon))),
+        React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, anchorOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: { list: { sx: { py: 0 } } } },
+            renderMenuItems(menuItems),
+            bannerText ? (React.createElement(MenuItem, { disabled: true, sx: {
+                    pointerEvents: 'none',
+                    bgcolor: theme => theme.palette.primary.main,
+                    color: theme => theme.palette.primary.contrastText,
+                    '&.Mui-disabled': { opacity: 1 },
+                    minHeight: 60,
+                } },
+                React.createElement(ListItemIcon, { sx: { minWidth: 36, color: 'inherit' } }, fabIcon),
+                React.createElement(ListItemText, { slotProps: {
+                        primary: {
+                            sx: {
+                                fontWeight: 600,
+                                fontSize: '20px',
+                            },
+                        },
+                    } }, bannerText))) : null)));
+}
+export default PneFloatingActionButtons;
+//# sourceMappingURL=PneFloatingActionButtons.js.map

package/esm/src/component/fab/PneFloatingActionButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PneFloatingActionButtons.js","sourceRoot":"","sources":["../../../../src/component/fab/PneFloatingActionButtons.tsx"],"names":[],"mappings":"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"}

package/esm/src/component/non-abstract-entity-selector/AbstractEntitySelectModal.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TFunction } from 'react-i18next';
+import { AbstractEntitySelectorProp, IMappedUnmappedList } from './AbstractEntitySelector';
+interface IProps<T extends AbstractEntitySelectorProp> {
+    open: boolean;
+    onClose: () => void;
+    mappedList: T[];
+    unMappedList: T[];
+    handleSave: (list: IMappedUnmappedList<T>) => void;
+    title: string;
+    subTitle?: string;
+    loading?: boolean;
+    disableMoving?: 'ADDED' | 'AVAILABLE' | undefined;
+    optionRenderer?: TFunction;
+    textRepresentation?: 'ID' | 'NAME' | undefined;
+    textRepresentationValue?: string;
+}
+export declare const AbstractEntitySelectModal: <T extends AbstractEntitySelectorProp>(props: IProps<T>) => React.JSX.Element;
+export {};

package/esm/src/component/non-abstract-entity-selector/AbstractEntitySelectModal.js

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Stack } from '@mui/material';
+import { AbstractEntitySelector } from './AbstractEntitySelector';
+import PneButton from '../PneButton';
+import PneModal from "../PneModal";
+export const AbstractEntitySelectModal = (props) => {
+    const { open, onClose, mappedList, unMappedList, handleSave, title, subTitle, loading = false, disableMoving, optionRenderer, textRepresentation, textRepresentationValue } = props;
+    const { t } = useTranslation();
+    const autoHeight = () => {
+        if (mappedList?.length > unMappedList?.length) {
+            return mappedList.length <= 10
+                ? mappedList.length == 1
+                    ? `calc((${mappedList?.length + 1} * 32px) + 36px)`
+                    : `calc((${mappedList?.length} * 32px) + 36px)`
+                : `calc(400px + 40px + 16px)`;
+        }
+        else {
+            return unMappedList?.length <= 10
+                ? unMappedList?.length == 1
+                    ? `calc((${unMappedList?.length + 1} * 32px) + 36px)`
+                    : `calc((${unMappedList?.length} * 32px) + 36px)`
+                : `calc(320px + 36px)`;
+        }
+    };
+    const [localUnMappedList, setLocalUnMappedList] = useState(unMappedList);
+    const [localMappedList, setLocalMappedList] = useState(mappedList);
+    const handleChange = (mappedList, unMappedList) => {
+        setLocalMappedList(mappedList);
+        setLocalUnMappedList(unMappedList);
+    };
+    const entitySelectorOptions = {
+        list: unMappedList,
+        selected: mappedList,
+        height: autoHeight(),
+        disableMoving,
+        optionRenderer,
+        textRepresentation,
+        textRepresentationValue,
+        onChange: handleChange,
+        actionBlock: (React.createElement(Stack, { direction: 'row', sx: {
+                marginTop: '16px',
+                gap: 2,
+            } },
+            React.createElement(PneButton, { variant: 'outlined', onClick: () => onClose(), fullWidth: true }, t('cancel')),
+            React.createElement(PneButton, { variant: 'contained', onClick: () => {
+                    handleSave({
+                        mapped: localMappedList,
+                        unmapped: localUnMappedList
+                    });
+                }, fullWidth: true }, t('save')))),
+    };
+    return (React.createElement(PneModal, { open: open, onClose: onClose, title: title, subtitle: subTitle, containerSx: {
+            width: {
+                xs: 'clamp(360px, calc(100vw - 32px), 600px)',
+                sm: '600px'
+            },
+            minWidth: 0,
+            maxWidth: '600px',
+            height: 'auto'
+        } },
+        React.createElement(AbstractEntitySelector, { ...entitySelectorOptions })));
+};
+//# sourceMappingURL=AbstractEntitySelectModal.js.map

package/esm/src/component/non-abstract-entity-selector/AbstractEntitySelectModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AbstractEntitySelectModal.js","sourceRoot":"","sources":["../../../../src/component/non-abstract-entity-selector/AbstractEntitySelectModal.tsx"],"names":[],"mappings":"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"}

package/esm/src/component/non-abstract-entity-selector/AbstractEntitySelector.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TFunction } from 'react-i18next';
+import { AbstractEntity, Country, IMappedAbstractEntity } from '../../common';
+export type ProcessorPaymentApparatus = {
+    id: number;
+    name: string;
+    mapped: boolean;
+};
+export declare const isProcessorPaymentApparatus: (value: unknown) => value is ProcessorPaymentApparatus;
+export interface IAbstractEntityOptions<T> {
+    reset?: boolean;
+    list: T[];
+    selected: T[];
+    height?: string;
+    disableMoving?: 'ADDED' | 'AVAILABLE' | undefined;
+    optionRenderer?: TFunction;
+    textRepresentation?: 'ID' | 'NAME' | undefined;
+    textRepresentationValue?: string;
+    onChange: (mappedList: T[], unMappedList: T[]) => void;
+    actionBlock?: React.ReactNode;
+}
+export type AbstractEntitySelectorProp = string | IMappedAbstractEntity | AbstractEntity | Country | ProcessorPaymentApparatus;
+export interface IMappedUnmappedList<T extends AbstractEntitySelectorProp> {
+    mapped: T[];
+    unmapped: T[];
+}
+export declare const AbstractEntitySelector: <T extends AbstractEntitySelectorProp>(props: React.PropsWithChildren<IAbstractEntityOptions<T>>) => React.JSX.Element;

package/esm/src/component/non-abstract-entity-selector/AbstractEntitySelector.js

@@ -0,0 +1,382 @@
+import React, { useEffect, useState } from 'react';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import { Box, IconButton, InputAdornment, Stack } from '@mui/material';
+import { Virtuoso } from 'react-virtuoso';
+import { useTranslation } from 'react-i18next';
+import { AddedListWrapper, ColumnWrapper, Container, HeaderColumn, HeaderColumnWrapper, } from './styled';
+import ItemEntitySelector from './ItemEntitySelector';
+import { assertObject, exhaustiveCheck, isAbstractEntity, isMappedAbstractEntity, isObject } from '../../common';
+import PneTextField from '../PneTextField';
+import PneButton from '../PneButton';
+import ClearIcon from '@mui/icons-material/Clear';
+//TODO must be removed
+export const isProcessorPaymentApparatus = (value) => {
+    if (!isObject(value)) {
+        return false;
+    }
+    return 'id' in value && typeof value.id === 'number' &&
+        'name' in value && typeof value.name === 'string';
+};
+const getListEntity = (item, index) => {
+    if (typeof item === 'string') {
+        return {
+            id: index,
+            displayName: item
+        };
+    }
+    assertObject(item);
+    if (isMappedAbstractEntity(item) || isProcessorPaymentApparatus(item)) {
+        return {
+            displayName: item.name,
+            ...item
+        };
+    }
+    else if (isAbstractEntity(item)) {
+        return item;
+    }
+    exhaustiveCheck(item);
+    throw new TypeError('Incompatible types of option:\n'
+        + JSON.stringify(item, null, 4));
+};
+const checkInitialType = (item) => {
+    if (typeof item === 'string') {
+        return 'string';
+    }
+    else if (isMappedAbstractEntity(item) || isProcessorPaymentApparatus(item)) {
+        return 'mappedEntity';
+    }
+    else if (isAbstractEntity(item)) {
+        return 'abstractEntity';
+    }
+    return undefined;
+};
+export const AbstractEntitySelector = (props) => {
+    const { reset, list, selected, height, optionRenderer, disableMoving, textRepresentation, textRepresentationValue = '', onChange, actionBlock, } = props;
+    const { t } = useTranslation();
+    const [searchValue, setSearchValue] = useState('');
+    const [availableList, setAvailableList] = useState([]);
+    const [addedList, setAddedList] = useState([]);
+    const [textValue, setTextValue] = useState(textRepresentationValue);
+    const [initialType, setInitialType] = useState(undefined);
+    useEffect(() => {
+        let availArray = [];
+        const selectedArray = selected.map((item, index) => {
+            return getListEntity(item, list.length + index + 1);
+        });
+        const type = list.length > 0 ? checkInitialType(list[0]) : checkInitialType(selected[0]);
+        setInitialType(type);
+        if (list.length > 0) {
+            if (type === 'string') {
+                const uniqArray = list.filter(item => selected.indexOf(item) == -1);
+                availArray = uniqArray.map((item, index) => getListEntity(item, index + 1));
+            }
+            else {
+                availArray = list.map((item, index) => getListEntity(item, index + 1));
+            }
+        }
+        setAvailableList(availArray);
+        setAddedList(selectedArray);
+        if (textRepresentation) {
+            const array = selectedArray.map(item => {
+                return textRepresentation === 'ID' ? item.id : item.displayName;
+            }).toString();
+            setTextValue(array);
+        }
+    }, [reset]);
+    const onListChange = (item, type) => {
+        let tempAddedList;
+        switch (type) {
+            case 'ADD':
+                tempAddedList = addedList.filter(i => i.id !== item.id);
+                setAvailableList(prevState => {
+                    return [...prevState, item];
+                });
+                setAddedList(prevState => {
+                    return prevState.filter(i => i.id !== item.id);
+                });
+                if (textRepresentation) {
+                    const tempArray = tempAddedList.map(item => {
+                        if (textRepresentation === 'ID') {
+                            return item.id;
+                        }
+                        else {
+                            return item.displayName;
+                        }
+                    });
+                    setTextValue(tempArray.toString());
+                }
+                break;
+            case 'AVAILABLE':
+                tempAddedList = [...addedList, item];
+                setAvailableList(prevState => {
+                    return prevState.filter(i => i.id !== item.id);
+                });
+                setAddedList(prevState => {
+                    return [...prevState, item];
+                });
+                if (textRepresentation) {
+                    const tempArray = tempAddedList.map(item => {
+                        if (textRepresentation === 'ID') {
+                            return item.id;
+                        }
+                        else {
+                            return item.displayName;
+                        }
+                    });
+                    setTextValue(tempArray.toString());
+                }
+                break;
+            default:
+                throw new Error('Cannot be');
+        }
+    };
+    const onDragEnd = (result) => {
+        const { destination, source } = result;
+        if (!destination) {
+            return;
+        }
+        if (destination.index === source.index && destination.droppableId === source.droppableId) {
+            return;
+        }
+        if (destination.droppableId === source.droppableId) {
+            let tempAdded = [];
+            switch (destination.droppableId) {
+                case 'availableList':
+                    setAvailableList((prev) => {
+                        const temp = [...prev];
+                        const [removed] = temp.splice(source.index, 1);
+                        temp.splice(destination.index, 0, removed);
+                        return temp;
+                    });
+                    break;
+                case 'addedList':
+                    setAddedList((prev) => {
+                        const temp = [...prev];
+                        const [removed] = temp.splice(source.index, 1);
+                        temp.splice(destination.index, 0, removed);
+                        tempAdded = temp;
+                        return temp;
+                    });
+                    if (textRepresentation) {
+                        const tempArray = tempAdded.map(item => {
+                            if (textRepresentation === 'ID') {
+                                return item.id;
+                            }
+                            else {
+                                return item.displayName;
+                            }
+                        });
+                        setTextValue(tempArray.toString());
+                    }
+                    break;
+                default:
+                    return;
+            }
+        }
+        if (destination.droppableId !== result.source.droppableId) {
+            if (destination.droppableId === 'availableList') {
+                const sourceList = [...addedList];
+                const destList = [...availableList];
+                const [removed] = sourceList.splice(result.source.index, 1);
+                destList.splice(destination.index, 0, removed);
+                setAvailableList(destList);
+                setAddedList(sourceList);
+                if (textRepresentation) {
+                    const tempArray = sourceList.map(item => {
+                        if (textRepresentation === 'ID') {
+                            return item.id;
+                        }
+                        else {
+                            return item.displayName;
+                        }
+                    });
+                    setTextValue(tempArray.toString());
+                }
+            }
+            else {
+                const sourceList = [...availableList];
+                const destList = [...addedList];
+                const [removed] = sourceList.splice(result.source.index, 1);
+                destList.splice(destination.index, 0, removed);
+                setAvailableList(sourceList);
+                setAddedList(destList);
+                if (textRepresentation) {
+                    const tempArray = destList.map(item => {
+                        if (textRepresentation === 'ID') {
+                            return item.id;
+                        }
+                        else {
+                            return item.displayName;
+                        }
+                    });
+                    setTextValue(tempArray.toString());
+                }
+            }
+        }
+        onChangeParentDate();
+    };
+    const handleSelectAll = (type) => {
+        if (type === 'AVAILABLE') {
+            setAddedList(prevState => {
+                return [...prevState, ...availableList];
+            });
+            if (textRepresentation) {
+                const array = [...addedList, ...availableList].map(item => {
+                    return textRepresentation === 'ID' ? item.id : item.displayName;
+                }).toString();
+                setTextValue(array);
+            }
+            setAvailableList([]);
+        }
+        else {
+            setAvailableList(prevState => {
+                return [...prevState, ...addedList];
+            });
+            if (textRepresentation) {
+                setTextValue('');
+            }
+            setAddedList([]);
+        }
+    };
+    const handleChangeTextareaValue = (value) => {
+        if (textRepresentation === 'ID') {
+            const regex = /[\d+,*]$/;
+            if (value !== '' && !regex.test(value)) {
+                return;
+            }
+        }
+        setTextValue(value);
+        const dictionary = [...addedList, ...availableList];
+        if (value !== '') {
+            if (textRepresentation === 'ID') {
+                const tempArray = value.split(',');
+                const newAddedList = dictionary.filter(addedItem => {
+                    return tempArray.includes(String(addedItem.id));
+                });
+                const newAvailableList = dictionary.filter(addedItem => {
+                    return !tempArray.includes(String(addedItem.id));
+                });
+                setAddedList(newAddedList);
+                setAvailableList(newAvailableList);
+            }
+            else {
+                const tempArray = value.split(',');
+                const newAddedList = dictionary.filter(addedItem => {
+                    return tempArray.includes(String(addedItem.displayName));
+                });
+                const newAvailableList = dictionary.filter(addedItem => {
+                    return !tempArray.includes(String(addedItem.displayName));
+                });
+                setAddedList(newAddedList);
+                setAvailableList(newAvailableList);
+            }
+        }
+        else {
+            setAvailableList(dictionary);
+            setAddedList([]);
+        }
+    };
+    const renderOption = (option) => {
+        return optionRenderer ? optionRenderer(option) : option;
+    };
+    const onChangeParentDate = () => {
+        let mapped = [];
+        let unmapped = [];
+        if (initialType !== undefined) {
+            switch (initialType) {
+                case 'string':
+                    mapped = addedList.map(item => item.displayName);
+                    unmapped = availableList.map(item => item.displayName);
+                    break;
+                case 'mappedEntity':
+                    mapped = addedList.map(item => ({
+                        ...item,
+                        name: item.displayName
+                    }));
+                    unmapped = availableList.map(item => ({
+                        ...item,
+                        name: item.displayName
+                    }));
+                    break;
+                case 'abstractEntity':
+                    mapped = addedList;
+                    unmapped = availableList;
+                    break;
+                default:
+                    throw new Error('please check the types of lists');
+            }
+        }
+        onChange(mapped, unmapped);
+    };
+    useEffect(() => {
+        if (initialType) {
+            onChangeParentDate();
+        }
+    }, [addedList, availableList]);
+    const HeightPreservingItem = ({ children, ...props }) => {
+        return (React.createElement("div", { ...props, style: { minHeight: '32px' } }, children));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Box, { sx: { marginBottom: '20px' } },
+            React.createElement(PneTextField, { variant: 'outlined', sx: { width: '100%' }, onChange: (e) => {
+                    setSearchValue(e.target.value);
+                }, value: searchValue, label: t('search'), slotProps: {
+                    input: {
+                        endAdornment: searchValue && (React.createElement(InputAdornment, { position: "end" },
+                            React.createElement(IconButton, { onClick: e => setSearchValue(''), edge: "end" },
+                                React.createElement(ClearIcon, null)))),
+                    },
+                }, autoFocus: true })),
+        React.createElement(DragDropContext, { onDragEnd: onDragEnd },
+            React.createElement(Container, { height: height },
+                React.createElement(ColumnWrapper, null,
+                    React.createElement(AddedListWrapper, null,
+                        React.createElement(HeaderColumnWrapper, null,
+                            React.createElement(HeaderColumn, null, t('abstractSelector.available')),
+                            disableMoving !== 'AVAILABLE' && (React.createElement(PneButton, { variant: 'text', onClick: () => {
+                                    handleSelectAll('AVAILABLE');
+                                }, sx: { marginLeft: 'auto' } }, t('abstractSelector.select.all')))),
+                        React.createElement(Droppable, { droppableId: 'availableList', mode: "virtual", renderClone: (provided, _snapshot, rubric) => {
+                                return (React.createElement(ItemEntitySelector, { handleClick: () => {
+                                        if (disableMoving !== 'AVAILABLE') {
+                                            onListChange(availableList[rubric.source.index], 'AVAILABLE');
+                                        }
+                                    }, provided: provided, item: availableList[rubric.source.index], name: renderOption(availableList[rubric.source.index].displayName) }));
+                            } }, (provided) => (React.createElement(Virtuoso, { components: {
+                                Item: HeightPreservingItem,
+                            }, scrollerRef: (value) => provided.innerRef(value), data: availableList.filter(item => renderOption(item.displayName).toLowerCase().includes(searchValue.toLowerCase())), itemContent: (index, item) => {
+                                return (React.createElement(Draggable, { key: item.id, draggableId: item.id.toString(), index: index, isDragDisabled: disableMoving === 'AVAILABLE' }, (provided) => (React.createElement(ItemEntitySelector, { handleClick: () => {
+                                        if (disableMoving !== 'AVAILABLE') {
+                                            onListChange(item, 'AVAILABLE');
+                                        }
+                                    }, provided: provided, item: item, name: renderOption(item.displayName) }))));
+                            } }, provided.placeholder))))),
+                React.createElement(ColumnWrapper, null,
+                    React.createElement(AddedListWrapper, null,
+                        React.createElement(HeaderColumnWrapper, null,
+                            React.createElement(HeaderColumn, null, t('abstractSelector.added')),
+                            disableMoving !== 'ADDED' && (React.createElement(PneButton, { variant: 'text', onClick: () => {
+                                    handleSelectAll('ADDED');
+                                }, sx: { marginLeft: 'auto' } }, t('abstractSelector.select.all')))),
+                        React.createElement(Droppable, { droppableId: 'addedList', mode: "virtual", renderClone: (provided, _snapshot, rubric) => {
+                                return (React.createElement(ItemEntitySelector, { handleClick: () => {
+                                        if (disableMoving !== 'ADDED') {
+                                            onListChange(addedList[rubric.source.index], 'ADD');
+                                        }
+                                    }, provided: provided, item: addedList[rubric.source.index], name: renderOption(addedList[rubric.source.index].displayName) }));
+                            } }, (provided) => (React.createElement(Virtuoso, { components: {
+                                Item: HeightPreservingItem,
+                            }, scrollerRef: (value) => provided.innerRef(value), data: addedList, itemContent: (index, item) => {
+                                return (React.createElement(Draggable, { key: item.id, draggableId: item.id.toString(), index: index, isDragDisabled: disableMoving === 'ADDED' }, (provided) => (React.createElement(ItemEntitySelector, { handleClick: () => {
+                                        if (disableMoving !== 'ADDED') {
+                                            onListChange(item, 'ADD');
+                                        }
+                                    }, provided: provided, item: item, name: renderOption(item.displayName) }))));
+                            } }, provided.placeholder))))))),
+        textRepresentation && (React.createElement(Stack, { sx: { marginTop: '38px' } },
+            React.createElement(PneTextField, { value: textValue, onChange: (event) => {
+                    handleChangeTextareaValue(event.target.value);
+                }, multiline: true, fullWidth: true, sx: { mt: '16px' }, minRows: 3 }))),
+        actionBlock ? actionBlock : null));
+};
+//# sourceMappingURL=AbstractEntitySelector.js.map