@plurid/plurid-ui-components-react 0.0.0-19 → 0.0.0-20

package/distribution/index.es.js

@@ -1,12 +1,12 @@
-import React, { useRef, useState, useEffect, forwardRef } from "react";
+import React, { useRef, useState, useEffect, forwardRef, useImperativeHandle } from "react";
 
 import themes, { plurid } from "@plurid/plurid-themes";
 
-import styled, { createGlobalStyle, keyframes } from "styled-components";
+import styled, { createGlobalStyle, css, keyframes } from "styled-components";
 
 import { PluridIconReset, PluridIconObliterate, PluridIconDelete, PluridIconCopy, PluridIconInfo, PluridIconPlay, PluridIconBranch, PluridIconNewStateline, PluridIconStateShareImage, PluridIconCopyCurrentState, PluridIconCopyStateHistory, PluridIconSittings, PluridIconSpeak } from "@plurid/plurid-icons-react";
 
-import { mergeReferences, useMounted, useFalseAfterTimedTrue, createMarkup } from "@plurid/plurid-functions-react";
+import { mergeReferences, useMounted, useFalseAfterTimedTrue, useThrottledCallback, createMarkup } from "@plurid/plurid-functions-react";
 
 import { mathematics, clipboard } from "@plurid/plurid-functions";
 
@@ -148,7 +148,7 @@ const StyledLoader = styled.div`
     }
 `;
 
-const Spinner = properties => {
+const Spinner$1 = properties => {
     const {theme: theme, size: size, style: style, className: className} = properties;
     const themeValue = theme || plurid;
     const sizeValue = size || "normal";
@@ -349,7 +349,7 @@ const StyledPureButtonDiv = styled(StyledPureButton).attrs({
     box-shadow: 0px 3px 3px 0px ${({theme: theme}) => theme.boxShadowUmbraColor};
 `;
 
-const PureButton = properties => {
+const PureButton$1 = properties => {
     const {text: text, atClick: atClick, theme: themeProperty, level: levelProperty, size: sizeProperty, disabled: disabled, loading: loading, style: style, className: className} = properties;
     const theme = themeProperty || plurid;
     const level = levelProperty !== null && levelProperty !== void 0 ? levelProperty : 0;
@@ -362,7 +362,7 @@ const PureButton = properties => {
             level: level,
             size: size,
             isDisabled: disabled
-        }, React.createElement(Spinner, {
+        }, React.createElement(Spinner$1, {
             theme: theme,
             size: "small"
         }));
@@ -453,12 +453,12 @@ const StyledLinkButtonLoading = styled.div`
 
 const DEFAULT_LEVEL$1 = 0;
 
-const LinkButton = properties => {
+const LinkButton$1 = properties => {
     const {text: text, atClick: atClick, theme: themeProperty, level: levelProperty, inline: inline, disabled: disabled, loading: loading, active: active, style: style, className: className} = properties;
     const theme = themeProperty || plurid;
     const level = levelProperty !== null && levelProperty !== void 0 ? levelProperty : DEFAULT_LEVEL$1;
     if (loading) {
-        return React.createElement(StyledLinkButtonLoading, null, React.createElement(Spinner, {
+        return React.createElement(StyledLinkButtonLoading, null, React.createElement(Spinner$1, {
             size: "small",
             theme: theme
         }));
@@ -478,7 +478,7 @@ const LinkButton = properties => {
 const StyledRefreshButton = styled.div`
 `;
 
-const RefreshButton = properties => {
+const RefreshButton$1 = properties => {
     const {atClick: atClick, theme: themeProperty, text: textProperty, disabled: disabled, hideAtClick: hideAtClickProperty, hideTime: hideTimeProperty} = properties;
     const theme = themeProperty || plurid;
     const text = textProperty || "";
@@ -518,9 +518,9 @@ const RefreshButton = properties => {
 };
 
 const buttons = {
-    PureButton: PureButton,
-    LinkButton: LinkButton,
-    RefreshButton: RefreshButton
+    PureButton: PureButton$1,
+    LinkButton: LinkButton$1,
+    RefreshButton: RefreshButton$1
 };
 
 const StyledFormbutton = styled.div`
@@ -569,7 +569,7 @@ const StyledFormbuttonIcon = styled.div`
 const StyledFormbuttonText = styled.div`
 `;
 
-const Formbutton = properties => {
+const Formbutton$1 = properties => {
     const {text: text, Icon: Icon, atClick: atClick, link: link, target: target, theme: theme, devisible: devisible, level: level, iconPosition: iconPosition, inactive: inactive, hoverEffect: hoverEffectProperty, style: style, className: className} = properties;
     const _theme = theme || plurid;
     const _level = level !== null && level !== void 0 ? level : 0;
@@ -612,7 +612,7 @@ const StyledFormitem = styled.div`
     user-select: none;
 `;
 
-const Formitem = properties => {
+const Formitem$1 = properties => {
     const {theme: theme, level: level, style: style, className: className, children: children} = properties;
     const _theme = theme || plurid;
     const _level = level !== null && level !== void 0 ? level : 0;
@@ -630,7 +630,7 @@ const StyledFormLeftRight = styled.div`
     justify-content: space-between;
 `;
 
-const FormLeftRight = properties => {
+const FormLeftRight$1 = properties => {
     const {theme: theme, style: style, className: className, children: children} = properties;
     const _theme = theme || plurid;
     return React.createElement(StyledFormLeftRight, {
@@ -694,7 +694,7 @@ const StyledFormlineElement = styled.div`
     }
 `;
 
-const Formline = properties => {
+const Formline$1 = properties => {
     const {text: text, Element: Element, theme: theme, level: level, responsive: responsive, style: style, className: className, children: children} = properties;
     const _theme = theme || plurid;
     const _level = level === undefined ? 0 : level;
@@ -727,7 +727,7 @@ const StyledObliterateContainer = styled.div`
     margin: 1rem auto;
 `;
 
-const FormObliterate = properties => {
+const FormObliterate$1 = properties => {
     const {atObliterate: atObliterate, item: item, theme: theme, devisible: devisible, level: level, style: style, className: className} = properties;
     const _theme = theme || plurid;
     const _level = level !== null && level !== void 0 ? level : 0;
@@ -743,17 +743,17 @@ const FormObliterate = properties => {
         devisible: _devisible,
         style: Object.assign({}, style),
         className: className
-    }, !showObliterate && React.createElement(Formbutton, {
+    }, !showObliterate && React.createElement(Formbutton$1, {
         theme: _theme,
         text: item ? `obliterate ${item}` : "obliterate",
         Icon: PluridIconObliterate,
         atClick: () => setShowObliterate(true),
         devisible: true
-    }), showObliterate && React.createElement(StyledObliterateContainer, null, React.createElement("div", null, "remove forever?"), React.createElement(LinkButton, {
+    }), showObliterate && React.createElement(StyledObliterateContainer, null, React.createElement("div", null, "remove forever?"), React.createElement(LinkButton$1, {
         theme: _theme,
         text: "cancel",
         atClick: () => setShowObliterate(false)
-    }), React.createElement(PureButton, {
+    }), React.createElement(PureButton$1, {
         theme: _theme,
         text: "Obliterate",
         atClick: event => handleObliterate(event)
@@ -761,14 +761,14 @@ const FormObliterate = properties => {
 };
 
 const form = {
-    Formbutton: Formbutton,
-    Formitem: Formitem,
-    FormLeftRight: FormLeftRight,
-    Formline: Formline,
-    FormObliterate: FormObliterate
+    Formbutton: Formbutton$1,
+    Formitem: Formitem$1,
+    FormLeftRight: FormLeftRight$1,
+    Formline: Formline$1,
+    FormObliterate: FormObliterate$1
 };
 
-const GlobalStyles = createGlobalStyle`
+const GlobalStyles$1 = createGlobalStyle`
     *, *::after, *::before {
         box-sizing: border-box;
     }
@@ -803,7 +803,7 @@ const GlobalStyles = createGlobalStyle`
 `;
 
 const general = {
-    GlobalStyles: GlobalStyles
+    GlobalStyles: GlobalStyles$1
 };
 
 const setNativeValue = (element, value) => {
@@ -985,7 +985,7 @@ const StyledErrorLine = styled.div`
 }};
 `;
 
-const Textline = forwardRef(((properties, reference) => {
+const Textline$1 = forwardRef(((properties, reference) => {
     const {text: text, atChange: atChange, atKeyDown: atKeyDown, atFocus: atFocus, atBlur: atBlur, type: type, placeholder: placeholder, autoCapitalize: autoCapitalize, autoComplete: autoComplete, autoCorrect: autoCorrect, spellCheck: spellCheck, style: style, className: className, theme: theme, level: level, devisible: devisible, center: center, round: round, width: width, error: error, enterIconLeft: enterIconLeft, enterEmpty: enterEmpty, enterAtClick: enterAtClick, escapeClear: escapeClear, ariaLabel: ariaLabel} = properties;
     const _type = type || "text";
     const _theme = theme || plurid;
@@ -1227,7 +1227,7 @@ const StyledFilterUpdate = styled.div`
 }};
 `;
 
-const Dropdown = properties => {
+const Dropdown$1 = properties => {
     const {selected: selected, selectables: selectables, atSelect: atSelect, left: left, kind: kind, listTop: listTop, dropdownToggled: dropdownToggled, hideAtSelect: hideAtSelect, selectAtHover: selectAtHover, selectedColor: selectedColor, filterable: filterable, style: style, className: className, theme: themeProperty, generalTheme: generalThemeProperty, interactionTheme: interactionThemeProperty, level: level, heightItems: heightItems, width: width, setDropdownToggled: setDropdownToggled, filterUpdate: filterUpdate} = properties;
     const _generalTheme = generalThemeProperty === undefined ? themeProperty === undefined ? plurid : themeProperty : generalThemeProperty;
     const _interactionTheme = interactionThemeProperty === undefined ? themeProperty === undefined ? plurid : themeProperty : interactionThemeProperty;
@@ -1426,7 +1426,7 @@ const Dropdown = properties => {
                 setShowFilterUpdate(true);
             }), 5300);
         }
-    })), React.createElement(Textline, {
+    })), React.createElement(Textline$1, {
         ref: filterInput,
         theme: interactionTheme,
         text: filterValue,
@@ -1479,7 +1479,7 @@ const StyledEntityPill = styled.div`
     align-items: center;
 `;
 
-const EntityPill = properties => {
+const EntityPill$1 = properties => {
     const {id: id, remove: remove, text: text, theme: theme, style: style} = properties;
     const textValue = text || id;
     return React.createElement(StyledEntityPill, {
@@ -1502,7 +1502,7 @@ const StyledEntityPillGroup = styled.div`
     justify-content: center;
 `;
 
-const EntityPillGroup = properties => {
+const EntityPillGroup$1 = properties => {
     const {entities: entities, remove: remove, keyFix: keyFix, theme: theme, style: style, pillStyle: pillStyle} = properties;
     return React.createElement(StyledEntityPillGroup, {
         theme: theme,
@@ -1511,7 +1511,7 @@ const EntityPillGroup = properties => {
         const stringEntity = typeof entity === "string";
         const id = stringEntity ? entity : entity.id;
         const text = stringEntity ? undefined : entity.text;
-        return React.createElement(EntityPill, {
+        return React.createElement(EntityPill$1, {
             key: `entity-pill-${id}${keyFix || ""}`,
             id: id,
             text: text,
@@ -1535,7 +1535,7 @@ const StyledInputDescriptor = styled.div`
     color: ${({theme: theme}) => theme.colorPrimary};
 `;
 
-const InputDescriptor = properties => {
+const InputDescriptor$1 = properties => {
     const {name: name, show: show, theme: themeProperty, style: style, className: className} = properties;
     const theme = themeProperty || plurid;
     return React.createElement(StyledInputDescriptor, {
@@ -1573,14 +1573,14 @@ const StyledInputBox = styled.div`
 const StyledTextBox = styled.div`
 `;
 
-const InputBox = properties => {
+const InputBox$1 = properties => {
     const {text: text, name: name, atChange: atChange, theme: themeProperty, style: style, className: className, atKeyDown: atKeyDown} = properties;
     const theme = themeProperty || plurid;
     return React.createElement(StyledInputBox, {
         theme: theme,
         className: className,
         style: Object.assign({}, style)
-    }, React.createElement(InputDescriptor, {
+    }, React.createElement(InputDescriptor$1, {
         name: name,
         show: text !== "",
         theme: theme
@@ -1602,18 +1602,18 @@ const StyledInputLine = styled.div`
     width: 350px;
 `;
 
-const InputLine = properties => {
+const InputLine$1 = properties => {
     const {name: name, text: text, atChange: atChange, theme: themeProperty, type: type, error: error, textline: textline, style: style, className: className, atKeyDown: atKeyDown} = properties;
     const theme = themeProperty || plurid;
     return React.createElement(StyledInputLine, {
         theme: theme,
         style: Object.assign({}, style),
         className: className
-    }, React.createElement(InputDescriptor, {
+    }, React.createElement(InputDescriptor$1, {
         name: name,
         show: text !== "",
         theme: theme
-    }), React.createElement(Textline, Object.assign({
+    }), React.createElement(Textline$1, Object.assign({
         text: text,
         type: type,
         placeholder: name,
@@ -1742,7 +1742,7 @@ const StyledSwitchIcon = styled.div`
     }
 `;
 
-const Switch = properties => {
+const Switch$1 = properties => {
     const {checked: checked, theme: theme, level: level, round: round, exclusive: exclusive, accent: accent, Icon: Icon, atChange: atChange} = properties;
     const _theme = theme || plurid;
     const _level = level === undefined ? 0 : level;
@@ -1780,18 +1780,18 @@ const StyledInputSwitch = styled.div`
 }};
 `;
 
-const InputSwitch = properties => {
+const InputSwitch$1 = properties => {
     const {name: name, checked: checked, atChange: atChange, theme: themeProperty, compact: compact, switch: switchProperties, style: style, className: className} = properties;
     const theme = themeProperty || plurid;
     return React.createElement(StyledInputSwitch, {
         compact: compact,
         style: Object.assign({}, style),
         className: className
-    }, React.createElement(FormLeftRight, null, React.createElement("div", {
+    }, React.createElement(FormLeftRight$1, null, React.createElement("div", {
         style: {
             marginLeft: "0.9rem"
         }
-    }, name), React.createElement(Switch, Object.assign({
+    }, name), React.createElement(Switch$1, Object.assign({
         checked: checked,
         level: 2,
         exclusive: true,
@@ -1832,7 +1832,7 @@ const StyledItemsline = styled.div`
     }
 `;
 
-const Itemsline = properties => {
+const Itemsline$1 = properties => {
     const {items: items, removeItem: removeItem, theme: theme, level: level, left: left, style: style, className: className} = properties;
     const _theme = theme === undefined ? themes.plurid : theme;
     const _level = level === undefined ? 0 : level;
@@ -2093,7 +2093,7 @@ const DEFAULT_LEVEL = 0;
 
 const DEFAULT_THUMB_SIZE = "large";
 
-const Slider = properties => {
+const Slider$1 = properties => {
     const {value: value, atChange: atChange, defaultValue: defaultValue, min: min, max: max, step: step, name: name, theme: theme, level: level, thumbSize: thumbSize, width: width, valueSign: valueSign, namedValueAbove: namedValueAbove} = properties;
     const [mouseOver, setMouseOver] = useState(false);
     const _theme = theme || plurid;
@@ -2133,18 +2133,18 @@ const Slider = properties => {
 };
 
 const inputs = {
-    Dropdown: Dropdown,
-    EntityPill: EntityPill,
-    EntityPillGroup: EntityPillGroup,
-    InputBox: InputBox,
-    InputDescriptor: InputDescriptor,
-    InputLine: InputLine,
-    InputSwitch: InputSwitch,
-    Itemsline: Itemsline,
+    Dropdown: Dropdown$1,
+    EntityPill: EntityPill$1,
+    EntityPillGroup: EntityPillGroup$1,
+    InputBox: InputBox$1,
+    InputDescriptor: InputDescriptor$1,
+    InputLine: InputLine$1,
+    InputSwitch: InputSwitch$1,
+    Itemsline: Itemsline$1,
     Select: PluridSelect,
-    Slider: Slider,
-    Switch: Switch,
-    Textline: Textline
+    Slider: Slider$1,
+    Switch: Switch$1,
+    Textline: Textline$1
 };
 
 const StyledHR = styled.hr`
@@ -2156,7 +2156,7 @@ const StyledHR = styled.hr`
     background-color: ${({theme: theme}) => theme.colorPrimary};
 `;
 
-const HR = properties => {
+const HR$1 = properties => {
     const {theme: theme, style: style, className: className} = properties;
     const themeValue = theme || plurid;
     return React.createElement(StyledHR, {
@@ -2178,7 +2178,7 @@ const StyledProgressCircle = styled.div`
     }
 `;
 
-const ProgressCircle = properties => {
+const ProgressCircle$1 = properties => {
     const {progress: progress, size: size, radius: radius, stroke: stroke, theme: theme, style: style, className: className} = properties;
     const progressValue = mathematics.numbers.normalizeBetween(progress, 0, 100);
     const radiusValue = radius || 20;
@@ -2287,7 +2287,7 @@ const StyledTooltipText = styled.div`
     }
 `;
 
-const Tooltip = properties => {
+const Tooltip$1 = properties => {
     const {tool: Tool, tip: Tip, indicator: indicatorProperty, icon: iconProperty, theme: themeProperty, style: style, className: className} = properties;
     const theme = themeProperty || plurid;
     const indicator = indicatorProperty !== null && indicatorProperty !== void 0 ? indicatorProperty : true;
@@ -2334,10 +2334,10 @@ const Tooltip = properties => {
 };
 
 const markers = {
-    HR: HR,
-    ProgressCircle: ProgressCircle,
-    Spinner: Spinner,
-    Tooltip: Tooltip
+    HR: HR$1,
+    ProgressCircle: ProgressCircle$1,
+    Spinner: Spinner$1,
+    Tooltip: Tooltip$1
 };
 
 const StyledHeading1 = styled.h1`
@@ -2382,7 +2382,7 @@ const StyledHeading6 = styled.h5`
     margin: 1rem 0;
 `;
 
-const Heading = properties => {
+const Heading$1 = properties => {
     const {children: children, theme: themeProperty, type: typeProperty, style: style, className: className} = properties;
     const theme = themeProperty || plurid;
     const type = typeProperty || "h1";
@@ -2449,7 +2449,7 @@ const StyledParagraph = styled.p`
     line-height: 1.4;
 `;
 
-const Paragraph = properties => {
+const Paragraph$1 = properties => {
     const {children: children, theme: themeProperty, size: sizeProperty, fontFamily: fontFamilyProperty, style: style, className: className} = properties;
     const theme = themeProperty || plurid;
     const size = sizeProperty || "normal";
@@ -2464,8 +2464,8 @@ const Paragraph = properties => {
 };
 
 const typography = {
-    Heading: Heading,
-    Paragraph: Paragraph
+    Heading: Heading$1,
+    Paragraph: Paragraph$1
 };
 
 const StyledCopyableLine = styled.div`
@@ -2479,7 +2479,7 @@ const StyledData = styled.div`
     user-select: all;
 `;
 
-const CopyableLine = properties => {
+const CopyableLine$1 = properties => {
     const {data: data, theme: theme, viewData: viewData, copyMessage: copyMessage, copyMessageTime: copyMessageTime, style: style, className: className} = properties;
     const viewDataText = viewData || data;
     const copyMessageText = copyMessage !== null && copyMessage !== void 0 ? copyMessage : "copied";
@@ -2500,7 +2500,7 @@ const CopyableLine = properties => {
 const StyledNewPageLink = styled.a`
 `;
 
-const NewPageLink = properties => {
+const NewPageLink$1 = properties => {
     const {link: link, text: text, style: style, className: className} = properties;
     return React.createElement(StyledNewPageLink, {
         href: link,
@@ -2524,7 +2524,7 @@ const StyledScrollableLine = styled.div`
     }
 `;
 
-const ScrollableLine = properties => {
+const ScrollableLine$1 = properties => {
     const {text: text, style: style, className: className} = properties;
     return React.createElement(StyledScrollableLine, {
         style: Object.assign({}, style),
@@ -2538,7 +2538,7 @@ const StyledTextItem = styled.div`
     margin-right: 2rem;
 `;
 
-const TextItem = properties => {
+const TextItem$1 = properties => {
     const {name: name, render: render, icon: IconProperty} = properties;
     const Icon = IconProperty || PluridIconInfo;
     return React.createElement(StyledTextItem, null, React.createElement(Icon, {
@@ -2551,10 +2551,10 @@ const TextItem = properties => {
 };
 
 const varia = {
-    CopyableLine: CopyableLine,
-    NewPageLink: NewPageLink,
-    ScrollableLine: ScrollableLine,
-    TextItem: TextItem
+    CopyableLine: CopyableLine$1,
+    NewPageLink: NewPageLink$1,
+    ScrollableLine: ScrollableLine$1,
+    TextItem: TextItem$1
 };
 
 const universal = {
@@ -2567,6 +2567,256 @@ const universal = {
     varia: varia
 };
 
+const StyledEntityView = styled.div`
+    position: relative;
+    height: 100%;
+
+    button {
+        font-family: ${({theme: theme}) => theme.fontFamilySansSerif};
+    }
+`;
+
+const StyledEntityViewTop = styled.div`
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    align-items: center;
+    margin-bottom: 30px;
+`;
+
+const StyledEntityFilterLine = styled.div`
+    position: relative;
+`;
+
+const StyledEntityFilterCancel = styled.div`
+    position: absolute;
+    top: 10px;
+
+    left: ${({filterLength: filterLength}) => filterLength === "SMALL" ? "275px" : "575px"};
+`;
+
+const StyledTopButtons = styled.div`
+    text-align: right;
+`;
+
+const StyledEntityListContainer = styled.div`
+`;
+
+const StyledEntityList = styled.ul`
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    max-height: 500px;
+    overflow: auto;
+
+    background-color: ${({theme: theme}) => theme.backgroundColorSecondaryAlpha};
+    box-shadow: ${({theme: theme}) => theme.boxShadowUmbraInset};
+    opacity: ${({loading: loading}) => {
+    if (loading) {
+        return "0.5";
+    }
+    return "1";
+}};
+
+    li:first-child {
+        background-color: ${({theme: theme, header: header}) => {
+    if (header) {
+        return theme.backgroundColorTertiary;
+    }
+    return "initial";
+}};
+    }
+
+    ${({header: header}) => {
+    if (header) {
+        return;
+    }
+    return css`
+            li:hover {
+                background-color: ${({theme: theme}) => theme.backgroundColorPrimary};
+            }
+        `;
+}}
+`;
+
+const StyledEntityListItem = styled.li`
+    display: grid;
+    grid-template-columns: ${({rowTemplate: rowTemplate}) => rowTemplate};
+    grid-gap: 0.5rem;
+    padding: 0.7rem;
+    align-items: center;
+    min-height: 45px;
+    word-break: break-all;
+`;
+
+const StyledActionButton = styled.div`
+    width: 200px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+`;
+
+const StyledNoRows = styled.div`
+    margin: 20px 0;
+    text-align: center;
+`;
+
+const createSearchTerms = (rows, fields) => rows.map((entity => {
+    const {id: id} = entity;
+    const data = [];
+    for (const field of fields) {
+        const term = entity[field];
+        if (term && typeof term === "string") {
+            data.push(term.toLowerCase().trim());
+        }
+    }
+    return {
+        id: id,
+        data: data
+    };
+}));
+
+const {buttons: {PureButton: PluridPureButton}, inputs: {Textline: PluridTextline}, markers: {Spinner: PluridSpinner}} = universal;
+
+const EntityView = forwardRef(((properties, reference) => {
+    const {entities: entities, searchFields: searchFields, generalTheme: generalTheme, interactionTheme: interactionTheme, rowsHeader: rowsHeader, rowTemplate: rowTemplate, noRows: noRows, abstractRowRenderer: abstractRowRenderer, actionButtonText: actionButtonText, placeholderText: placeholderText, scrollThrottleTime: scrollThrottleTimeProperty, loading: loading, rowRenderFields: rowRenderFields, rowRenderMethods: rowRenderMethods, actionButtonClick: actionButtonClick, filterUpdate: filterUpdate, refresh: refresh, actionScrollBottom: actionScrollBottom} = properties;
+    const placeholder = placeholderText || "search";
+    const scrollThrottleTime = scrollThrottleTimeProperty !== null && scrollThrottleTimeProperty !== void 0 ? scrollThrottleTimeProperty : 1e3;
+    const bottomTimeout = useRef();
+    const entityList = useRef(null);
+    const [searchTerms, setSearchTerms] = useState(createSearchTerms(entities, searchFields));
+    const [filteredRows, setFilteredRows] = useState(entities.map((entity => abstractRowRenderer(rowRenderFields || [], entity, rowRenderMethods || {}))));
+    const [searchValue, setSearchValue] = useState("");
+    const [filterLength, setFilterLength] = useState("SMALL");
+    const [refreshClicked, setRefreshClicked] = useState(false);
+    const handleScroll = useThrottledCallback((() => {
+        const element = entityList.current;
+        if (!element) {
+            return;
+        }
+        const scrolledAmount = element.scrollTop + element.getBoundingClientRect().height;
+        const bottomReached = scrolledAmount >= element.scrollHeight;
+        if (bottomReached && actionScrollBottom && entities) {
+            actionScrollBottom(entities);
+        }
+    }), scrollThrottleTime);
+    const clearFilterValue = () => {
+        setSearchValue("");
+        if (filterUpdate) {
+            filterUpdate("");
+        }
+    };
+    useEffect((() => {
+        setFilteredRows(entities.map((entity => abstractRowRenderer(rowRenderFields || [], entity, rowRenderMethods || {}))));
+        setSearchTerms(createSearchTerms(entities, searchFields));
+    }), [ entities.length, JSON.stringify(entities) ]);
+    useEffect((() => {
+        if (refreshClicked) {
+            setTimeout((() => {
+                setRefreshClicked(false);
+            }), 1500);
+        }
+    }), [ refreshClicked ]);
+    useEffect((() => {
+        bottomTimeout.current = setTimeout((() => {
+            if (entityList.current && actionScrollBottom) {
+                entityList.current.addEventListener("scroll", handleScroll);
+            }
+        }), 100);
+        return () => {
+            if (bottomTimeout.current) {
+                clearTimeout(bottomTimeout.current);
+            }
+            if (entityList.current && actionScrollBottom) {
+                entityList.current.removeEventListener("scroll", handleScroll);
+            }
+        };
+    }), [ entities ]);
+    useEffect((() => {
+        if (searchValue.length <= 30) {
+            if (filterLength !== "SMALL") {
+                setFilterLength("SMALL");
+            }
+        } else {
+            if (filterLength !== "LARGE") {
+                setFilterLength("LARGE");
+            }
+        }
+    }), [ searchValue ]);
+    useImperativeHandle(reference, (() => ({
+        resetFilterValue() {
+            clearFilterValue();
+        },
+        getSearchTerms() {
+            return searchTerms;
+        }
+    })), [ JSON.stringify(searchTerms) ]);
+    return React.createElement(StyledEntityView, {
+        theme: generalTheme
+    }, !!loading && React.createElement(PluridSpinner, {
+        theme: generalTheme
+    }), React.createElement(StyledEntityViewTop, null, React.createElement(StyledEntityFilterLine, null, React.createElement(PluridTextline, {
+        text: searchValue,
+        placeholder: placeholder,
+        atChange: event => {
+            const {value: value} = event.target;
+            setSearchValue(value);
+            if (filterUpdate) {
+                filterUpdate(value);
+            }
+        },
+        atKeyDown: event => {
+            if (event.key === "Escape") {
+                clearFilterValue();
+            }
+        },
+        theme: interactionTheme,
+        spellCheck: false,
+        autoCapitalize: "false",
+        autoComplete: "false",
+        autoCorrect: "false",
+        level: 2,
+        style: {
+            width: filterLength === "SMALL" ? "300px" : "600px",
+            paddingRight: "2rem"
+        }
+    }), searchValue && React.createElement(StyledEntityFilterCancel, {
+        filterLength: filterLength
+    }, React.createElement(PluridIconDelete, {
+        atClick: () => {
+            clearFilterValue();
+        }
+    }))), React.createElement(StyledTopButtons, null, refresh && !refreshClicked && React.createElement(PluridIconReset, {
+        atClick: () => {
+            setRefreshClicked(true);
+            refresh();
+        },
+        theme: generalTheme
+    }))), filteredRows.length === 0 && React.createElement(StyledNoRows, null, noRows), filteredRows.length !== 0 && React.createElement(StyledEntityListContainer, {
+        theme: generalTheme
+    }, React.createElement(StyledEntityList, {
+        theme: generalTheme,
+        header: true
+    }, React.createElement(StyledEntityListItem, {
+        rowTemplate: rowTemplate
+    }, rowsHeader)), React.createElement(StyledEntityList, {
+        theme: generalTheme,
+        ref: entityList,
+        loading: loading
+    }, filteredRows.map((row => React.createElement(StyledEntityListItem, {
+        key: Math.random() + "",
+        rowTemplate: rowTemplate
+    }, row))))), actionButtonText && React.createElement(StyledActionButton, null, React.createElement(PluridPureButton, {
+        text: actionButtonText,
+        atClick: () => actionButtonClick ? actionButtonClick() : undefined,
+        theme: interactionTheme,
+        level: 2
+    })));
+}));
+
+const containers = {
+    EntityView: EntityView
+};
+
 const Head = properties => {
     var _a, _b, _c, _d;
     const {Helmet: Helmet, defaults: defaults, children: children, stateHead: stateHead} = properties;
@@ -3701,11 +3951,16 @@ const toolbars = {
 };
 
 const pluridal = {
+    containers: containers,
     head: head,
     notifications: notifications,
     sitting: sitting,
     toolbars: toolbars
 };
 
-export { pluridal, universal };
+var index = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, universal.buttons), universal.form), universal.general), universal.inputs), universal.markers), universal.typography), universal.varia), pluridal.containers), pluridal.head), pluridal.notifications), pluridal.sitting), pluridal.toolbars);
+
+const {buttons: {LinkButton: LinkButton, PureButton: PureButton, RefreshButton: RefreshButton}, form: {FormLeftRight: FormLeftRight, FormObliterate: FormObliterate, Formbutton: Formbutton, Formitem: Formitem, Formline: Formline}, general: {GlobalStyles: GlobalStyles}, inputs: {Dropdown: Dropdown, EntityPill: EntityPill, EntityPillGroup: EntityPillGroup, InputBox: InputBox, InputDescriptor: InputDescriptor, InputLine: InputLine, InputSwitch: InputSwitch, Itemsline: Itemsline, Select: Select, Slider: Slider, Switch: Switch, Textline: Textline}, markers: {HR: HR, ProgressCircle: ProgressCircle, Spinner: Spinner, Tooltip: Tooltip}, typography: {Heading: Heading, Paragraph: Paragraph}, varia: {CopyableLine: CopyableLine, NewPageLink: NewPageLink, ScrollableLine: ScrollableLine, TextItem: TextItem}} = universal;
+
+export { CopyableLine, Dropdown, EntityPill, EntityPillGroup, FormLeftRight, FormObliterate, Formbutton, Formitem, Formline, GlobalStyles, HR, Heading, InputBox, InputDescriptor, InputLine, InputSwitch, Itemsline, LinkButton, NewPageLink, Paragraph, ProgressCircle, PureButton, RefreshButton, ScrollableLine, Select, Slider, Spinner, Switch, TextItem, Textline, Tooltip, index as default, pluridal, universal };
 //# sourceMappingURL=index.es.js.map