@longline/aqua-ui 1.0.115 → 1.0.117

package/inputs/Dropdown/Body.js

@@ -17,7 +17,7 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { List } from '../../containers/List';
 var BodyBase = React.forwardRef(function (props, ref) {
-    return (React.createElement("div", __assign({ style: props.styles.popper }, props.attributes.popper, { className: "".concat(props.className), tabIndex: -1, ref: ref }),
+    return (React.createElement("div", __assign({ style: props.styles.popper }, props.attributes.popper, { className: "".concat(props.className), tabIndex: -1, ref: ref, onMouseDown: function (e) { return e.stopPropagation(); } }),
         React.createElement(List, { tall: props.tall, maxItems: props.maxItems, contract: true, onSearch: props.onSearch }, props.children)));
 });
 var Body = styled(BodyBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  z-index: 9999 !important;\n  outline: none;\n  box-sizing:     border-box;\n  visibility: ", ";\n  font: ", ";\n\n  // Width:\n  ", "\n  \n  transition: opacity ", "ms ease-in-out,\n              max-height 0ms linear ", "ms;\n  max-height: 0;\n  opacity: 0;\n  ", "\n"], ["\n  z-index: 9999 !important;\n  outline: none;\n  box-sizing:     border-box;\n  visibility: ", ";\n  font: ", ";\n\n  // Width:\n  ", "\n  \n  transition: opacity ", "ms ease-in-out,\n              max-height 0ms linear ", "ms;\n  max-height: 0;\n  opacity: 0;\n  ", "\n"])), function (p) { return p.open ? 'visible' : 'hidden'; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.minBodyWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    min-width: ", "px;\n  "], ["\n    min-width: ", "px;\n  "])), p.minBodyWidth); }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.open && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    transition: opacity ", "ms ease-in,\n                max-height 0ms linear;\n    max-height: 1000px;\n    opacity: 1;\n  "], ["\n    transition: opacity ", "ms ease-in,\n                max-height 0ms linear;\n    max-height: 1000px;\n    opacity: 1;\n  "])), function (p) { return p.theme.animation.duration; }); });

package/inputs/Dropdown/Dropdown.js

@@ -105,11 +105,8 @@ var DropdownBase = function (props) {
     var bodyRef = React.useRef(null);
     // Is dropdown currently open?
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
-    // Does the Dropdown open upwards? This happens when it is on the lower half 
-    // of the viewport. 
-    var _c = React.useState(false), upwards = _c[0], setUpwards = _c[1];
     // Current search query.
-    var _d = React.useState(null), search = _d[0], setSearch = _d[1];
+    var _c = React.useState(null), search = _c[0], setSearch = _c[1];
     // A mousedown event listener is attached to the document. When the document
     // is clicked anywhere but this Dropdown, the Dropdown closes.
     React.useEffect(function () {
@@ -384,7 +381,7 @@ var DropdownBase = function (props) {
         wrapperRef.current.children[0].click();
     };
     var children = getBodyChildren();
-    var _e = usePopper(wrapperRef.current, bodyRef.current, {
+    var _d = usePopper(wrapperRef.current, bodyRef.current, {
         placement: props.direction == 'down' ? 'bottom' : 'top',
         modifiers: [
             {
@@ -395,9 +392,9 @@ var DropdownBase = function (props) {
             },
             sameWidth
         ]
-    }), styles = _e.styles, attributes = _e.attributes, update = _e.update;
+    }), styles = _d.styles, attributes = _d.attributes, update = _d.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),
+        React.createElement(Selector, { open: open, error: props.error, disabled: props.disabled, 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)));
 };
 var DropdownStyled = styled(DropdownBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  // Dropdown has a minimum width. \n  width: 250px;\n  // A fluid Dropdown occupies full horizontal width. \n  ", "  \n  outline: none;\n  user-select: none;\n  font: ", ";\n  color: ", ";\n"], ["\n  position: relative;\n  // Dropdown has a minimum width. \n  width: 250px;\n  // A fluid Dropdown occupies full horizontal width. \n  ", "  \n  outline: none;\n  user-select: none;\n  font: ", ";\n  color: ", ";\n"

package/inputs/Dropdown/Selector.d.ts

@@ -8,8 +8,6 @@ interface IProps {
     disabled?: boolean;
     /** Is the Dropdown currently open? */
     open: boolean;
-    /** A Dropbox can open upwards, which affects its styles. */
-    upwards: boolean;
     /** Is the Dropdown transparent, i.e. without a border? */
     transparent?: boolean;
     /** Is the Dropdown ghosted? */

package/modules/Filter/Filter.d.ts

@@ -6,11 +6,16 @@ interface IProps {
     children?: React.ReactNode;
     /** Is filter in an active state? Is any filtering current active? */
     active?: boolean;
+    /**
+     * Pane width in pixels.
+     * @default 250
+     */
+    width?: number;
 }
 /**
  * A `Filter` is a combination of a filter button and a panel. The panel is
  * shown as a React portal in order to rise above all other content and not
  * be clipped.
  */
-declare const Filter: (props: IProps) => React.JSX.Element;
+declare const Filter: ({ width, ...props }: IProps) => React.JSX.Element;
 export { Filter };

package/modules/Filter/Filter.js

@@ -13,6 +13,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import * as React from 'react';
 import styled from 'styled-components';
 import { createPortal } from 'react-dom';
@@ -62,21 +73,24 @@ var FilterBase = function (props) {
     };
     return (React.createElement("div", { className: props.className },
         React.createElement(FilterButton, { ref: buttonRef, active: props.active, open: open, onClick: toggleOpen }),
-        createPortal(React.createElement(Pane, __assign({ "$open": open, style: styles.popper }, attributes.popper, { ref: paneRef }),
+        createPortal(React.createElement(Pane, __assign({ "$open": open, "$width": props.width, style: styles.popper }, attributes.popper, { ref: paneRef }),
             React.createElement(GlassPane, { padded: true, bordered: true }, props.children)), document.body)));
 };
-var Pane = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  min-width: 200px;\n  z-index: 2500;\n"], ["\n  display: ", ";\n  min-width: 200px;\n  z-index: 2500;\n"
+var Pane = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  width: ", "px;\n  z-index: 2500;\n"], ["\n  display: ", ";\n  width: ", "px;\n  z-index: 2500;\n"
     /**
      * A `Filter` is a combination of a filter button and a panel. The panel is
      * shown as a React portal in order to rise above all other content and not
      * be clipped.
      */
-])), function (p) { return p.$open ? 'block' : 'none'; });
+])), function (p) { return p.$open ? 'block' : 'none'; }, function (p) { return p.$width; });
 /**
  * A `Filter` is a combination of a filter button and a panel. The panel is
  * shown as a React portal in order to rise above all other content and not
  * be clipped.
  */
-var Filter = function (props) { return React.createElement(FilterBase, __assign({}, props)); };
+var Filter = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? 250 : _b, props = __rest(_a, ["width"]);
+    return React.createElement(FilterBase, __assign({ width: width }, props));
+};
 export { Filter };
 var templateObject_1;

package/package.json

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