@plurid/plurid-ui-components-react 0.0.0-10 → 0.0.0-13

package/distribution/index.js

@@ -1038,7 +1038,9 @@ const Textline = React.forwardRef(((properties, reference) => {
     }, React__default["default"].createElement("input", {
         type: _type,
         value: text,
-        onChange: atChange,
+        onChange: event => {
+            atChange(event, event.target.value);
+        },
         onKeyDown: handleKeyDown,
         onFocus: atFocus,
         onBlur: atBlur,
@@ -1107,6 +1109,7 @@ const StyledDropdownList = styled__default["default"].div`
     }
 }};
     color: ${props => props.theme.colorPrimary};
+    position: absolute;
     left: ${props => {
     if (props.left) {
         return "0px";
@@ -1118,10 +1121,20 @@ const StyledDropdownList = styled__default["default"].div`
         return "auto";
     }
     return "0px";
+}};
+    top: ${props => {
+    if (props.listTop) {
+        return props.listTop;
+    }
+    return "25px";
 }};
     height: ${props => {
     if (props.heightItems) {
-        return props.heightItems * 2 + "rem";
+        const value = props.heightItems * 2 + "rem";
+        if (props.heightBeyond) {
+            return `calc(${value} + 1rem)`;
+        }
+        return value;
     }
     return "initial";
 }};
@@ -1150,8 +1163,6 @@ const StyledDropdownList = styled__default["default"].div`
     return "initial";
 }};
 
-    position: absolute;
-    top: 25px;
     border-radius: 10px;
     min-width: 60px;
 
@@ -1233,7 +1244,7 @@ const StyledFilterUpdate = styled__default["default"].div`
 `;
 
 const Dropdown = properties => {
-    const {selected: selected, selectables: selectables, atSelect: atSelect, left: left, kind: kind, 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 {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 ? themes.plurid : themeProperty : generalThemeProperty;
     const _interactionTheme = interactionThemeProperty === undefined ? themeProperty === undefined ? themes.plurid : themeProperty : interactionThemeProperty;
     const _level = level !== null && level !== void 0 ? level : 0;
@@ -1330,7 +1341,6 @@ const Dropdown = properties => {
     }), [ themeProperty, generalThemeProperty, interactionThemeProperty ]);
     React.useEffect((() => {
         const scrollTo = index => {
-            console.log(itemsReferences.current[index].current);
             if (itemsReferences.current[index].current) {
                 itemsReferences.current[index].current.scrollIntoView({
                     behavior: "smooth",
@@ -1406,8 +1416,10 @@ const Dropdown = properties => {
     }, typeof selected === "string" ? selected : selected.value), showList && React__default["default"].createElement(StyledDropdownList, {
         theme: interactionTheme,
         left: left,
+        listTop: listTop,
         level: _level,
         heightItems: heightItems && filterable && filteredSelectables.length < heightItems ? filteredSelectables.length + 1 : heightItems,
+        heightBeyond: filteredSelectables.length > (heightItems || 0),
         width: width
     }, React__default["default"].createElement("ul", null, filterable && React__default["default"].createElement("li", {
         style: {