@longline/aqua-ui 1.0.113 → 1.0.115

package/containers/List/ListRow.d.ts

@@ -9,7 +9,7 @@ interface IProps {
     /** An `active` row will be highlighted. */
     active?: boolean;
     /** Triggered when row is clicked. */
-    onClick?: () => void;
+    onClick?: (e?: React.MouseEvent) => void;
 }
 declare const ListRow: (props: IProps) => React.JSX.Element;
 export { ListRow };

package/containers/List/ListRow.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var ListRowBase = function (props) {
-    return (React.createElement("div", { className: props.className, onClick: props.onClick }, props.children));
+    return (React.createElement("div", { className: props.className, onClick: function (e) { return props.onClick(e); } }, props.children));
 };
 var ListRowStyled = styled(ListRowBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: 16px;\n  padding-right: 16px;\n  min-height: 42px;\n  user-select: none;\n  outline: none;\n  color: ", ";\n\n  // Entire row is clickable:\n  cursor: ", ";\n\n  // Cells are flex-aligned:\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: ", "px;\n\n  // Background color on hover:\n  &:hover {\n    background-color: ", ";\n  }\n\n  // Background color on pressed:\n  ", "\n\n  ", "\n"], ["\n  padding-left: 16px;\n  padding-right: 16px;\n  min-height: 42px;\n  user-select: none;\n  outline: none;\n  color: ", ";\n\n  // Entire row is clickable:\n  cursor: ", ";\n\n  // Cells are flex-aligned:\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: ", "px;\n\n  // Background color on hover:\n  &:hover {\n    background-color: ", ";\n  }\n\n  // Background color on pressed:\n  ", "\n\n  ", "\n"])), function (p) { return p.theme.colors.neutral[30]; }, function (p) { return p.onClick ? 'pointer' : 'auto'; }, function (p) { return p.gap; }, function (p) { return p.theme.colors.neutral[95]; }, function (p) { return p.onClick && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &:active {\n      background-color: rgb(from ", " r g b / 65%) !important;\n      color: ", ";\n    }\n  "], ["\n    &:active {\n      background-color: rgb(from ", " r g b / 65%) !important;\n      color: ", ";\n    }\n  "])), function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: rgb(from ", " r g b / 45%) !important;\n    color: ", ";\n  "], ["\n    background-color: rgb(from ", " r g b / 45%) !important;\n    color: ", ";\n  "])), function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }); });
 var ListRow = function (props) { return React.createElement(ListRowStyled, __assign({}, props)); };

package/inputs/DateInput/DateInput.js

@@ -73,6 +73,9 @@ var DateInputBase = function (props) {
     var handleToggle = function () {
         if (!open) {
             doOpen();
+            // Update popper position.
+            if (update)
+                update();
         }
         else {
             setOpen(false);
@@ -104,7 +107,7 @@ var DateInputBase = function (props) {
                 },
             }
         ]
-    }), styles = _c.styles, attributes = _c.attributes;
+    }), styles = _c.styles, attributes = _c.attributes, update = _c.update;
     return (React.createElement("div", { tabIndex: -1, className: props.className, onKeyDown: handleKeyDown, ref: wrapperRef },
         React.createElement(Selector, { value: value, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, error: props.error, clearable: props.clearable, noTabIndex: props.noTabIndex, onChange: handleChange, onClear: (!props.disabled && props.clearable && value != null) ? function () { return handleChange(null); } : null, onCalendar: handleToggle }),
         createPortal(React.createElement(Body, { ref: bodyRef, value: value, open: open, transparent: props.transparent, nofuture: props.nofuture, onSelect: handleSelect, styles: styles, attributes: attributes }), document.body)));

package/inputs/Dropdown/Dropdown.js

@@ -134,6 +134,9 @@ var DropdownBase = function (props) {
     // Open the dropdown.
     var doOpen = function () {
         setOpen(true);
+        // Update popper.
+        if (update)
+            update();
         // If reset on open is specified, then the search query is reset whenever the
         // dropdown opens or reopens.
         if (props.resetOnOpen)
@@ -199,7 +202,7 @@ var DropdownBase = function (props) {
         });
         // Was a matching row found?
         if (idx != -1) {
-            handleClick((props.data || [])[idx]);
+            handleClick(null, (props.data || [])[idx]);
         }
     };
     var selectPreviousItem = function () {
@@ -278,7 +281,9 @@ var DropdownBase = function (props) {
         updateValue(item);
     };
     // An item was clicked. Close Dropdown and call onChange.
-    var handleClick = function (item) {
+    var handleClick = function (e, item) {
+        if (e)
+            e.stopPropagation();
         // Is this a multiple-selection dropdown?
         if (props.multiple) {
             var array = value;
@@ -342,7 +347,7 @@ var DropdownBase = function (props) {
         });
         var activeIndex = (props.data || []).indexOf(value);
         return (props.data || []).map(function (row, index) {
-            return (React.createElement(ListRow, { active: index == activeIndex, key: index + 1, gap: props.gap, onClick: function () { return handleClick(row); } }, columns.map(function (child, index) {
+            return (React.createElement(ListRow, { active: index == activeIndex, key: index + 1, gap: props.gap, onClick: function (e) { return handleClick(e, row); } }, columns.map(function (child, index) {
                 return (React.createElement(ListCell, { key: index, width: child.props.width, align: child.props.align }, row !== null && child.props.children(row)));
             })));
         });
@@ -390,7 +395,7 @@ var DropdownBase = function (props) {
             },
             sameWidth
         ]
-    }), styles = _e.styles, attributes = _e.attributes;
+    }), styles = _e.styles, attributes = _e.attributes, update = _e.update;
     return (React.createElement("div", { className: props.className, tabIndex: props.disabled ? -1 : 0, ref: wrapperRef, onKeyDown: handleKeyDown, onClick: handleClickDropdown },
         React.createElement(Selector, { open: open, error: props.error, disabled: props.disabled, upwards: upwards, transparent: props.transparent, ghost: props.ghost, multiple: props.multiple, onClick: handleSelectorClicked, onClear: (props.clearable && !showPlaceholder) ? handleClear : null, placeholder: showPlaceholder }, label),
         createPortal(React.createElement(Body, { ref: bodyRef, open: open, transparent: props.transparent, maxItems: props.maxItems, onSearch: props.onSearch ? handleSearch : null, search: search, tall: props.tall, minBodyWidth: props.minBodyWidth, styles: styles, attributes: attributes }, children), document.body)));

package/modules/Filter/Filter.js

@@ -53,9 +53,12 @@ var FilterBase = function (props) {
                 },
             }
         ]
-    }), styles = _b.styles, attributes = _b.attributes;
+    }), styles = _b.styles, attributes = _b.attributes, update = _b.update;
     var toggleOpen = function () {
         setOpen(!open);
+        // Update popper.
+        if (update)
+            update();
     };
     return (React.createElement("div", { className: props.className },
         React.createElement(FilterButton, { ref: buttonRef, active: props.active, open: open, onClick: toggleOpen }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.113",
+  "version": "1.0.115",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",