@longline/aqua-ui 1.0.280 → 1.0.281

package/containers/List/List.js

@@ -22,7 +22,7 @@ var List = React.forwardRef(function (props, ref) {
     return React.createElement(ListStyled, { className: props.className, tabIndex: -1, "$count": React.Children.count(props.children), "$maxItems": props.maxItems, "$contract": props.contract, "$tall": props.tall },
         props.onSearch &&
             React.createElement(SearchBox, { onClick: function (e) { return e.stopPropagation(); } },
-                React.createElement(Input, { noTabIndex: true, icon: SVG.Icons.Search, placeholder: props.placeholder, clearable: true, value: props.search, transparent: true, fluid: true, type: "text", onChange: props.onSearch })),
+                React.createElement(Input, { icon: SVG.Icons.Search, placeholder: props.placeholder, clearable: true, value: props.search, transparent: true, fluid: true, type: "text", onChange: props.onSearch })),
         React.createElement(Inner, { ref: ref, tabIndex: -1 },
             React.createElement(OverlayScrollbarsComponent, { defer: true, className: "scroller", options: { scrollbars: { theme: 'os-theme-dark', autoHide: 'leave' } }, style: {
                     position: "absolute",

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, onMouseDown: function (e) { return e.stopPropagation(); } }),
+    return (React.createElement("div", __assign({ style: props.styles.popper }, props.attributes.popper, { className: "".concat(props.className, " dropdown-panel"), 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.d.ts

@@ -117,7 +117,7 @@ interface IDropdownProps {
  * A `Dropdown` is a replacement for `<select>` (select). It opens upwards or
  * downwards depending on its position in the viewport. Its selection and
  * dropdown items are formatted using a formatting function. A Dropdown can
- * also take an `onSearch` callback, which tells provides its subscriber with
+ * also take an `onSearch` callback, which provides its subscriber with
  * a search query in order to provide the `Dropdown` with new items.
  *
  * ```jsx

package/inputs/Dropdown/Dropdown.js

@@ -137,6 +137,8 @@ var DropdownBase = function (props) {
     // Close the dropdown.
     var doClose = function () {
         setOpen(false);
+        // Focus was on popper; restore focus to Dropdown.
+        wrapperRef.current.focus();
         // When the dropdown is closed, an onClose event may be fired.
         // It is fired 300ms after dropdown closure to give the close
         // animation a chance to run, before any changes are made
@@ -228,8 +230,6 @@ var DropdownBase = function (props) {
     // A key was pressed while the selector had focus.
     // 
     var handleKeyDown = function (e) {
-        if (!wrapperRef.current.contains(document.activeElement))
-            return;
         if (props.disabled || props.ghost)
             return;
         var key = e.key;
@@ -245,12 +245,6 @@ var DropdownBase = function (props) {
                 return;
             doClose();
         }
-        if (key == ' ') {
-            e.stopPropagation();
-            if (open)
-                return;
-            doOpen();
-        }
         if (key == 'ArrowUp') {
             e.stopPropagation();
             e.preventDefault();
@@ -261,6 +255,20 @@ var DropdownBase = function (props) {
             e.preventDefault();
             selectNextItem();
         }
+        // The keys after this check won't have any effect if onSearch has
+        // focus.
+        if (!wrapperRef.current.contains(document.activeElement))
+            return;
+        if (key == ' ') {
+            e.stopPropagation();
+            if (open)
+                return;
+            doOpen();
+        }
+        if (key == 'Delete' && props.clearable === true) {
+            e.stopPropagation();
+            handleClear();
+        }
         // Is a letter or a digit pressed?
         if (key.length == 1 && key.match(/[a-z0-9]/i)) {
             e.stopPropagation();
@@ -399,7 +407,6 @@ var DropdownBase = function (props) {
     var handleClickDropdown = function () {
         wrapperRef.current.children[0].click();
     };
-    var children = getBodyChildren();
     var _d = usePopper(wrapperRef.current, bodyRef.current, {
         placement: props.direction == 'down' ? 'bottom' : 'top',
         modifiers: [
@@ -414,14 +421,14 @@ var DropdownBase = function (props) {
     }), 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(Selection, { 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)));
+        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 }, getBodyChildren()), 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"
+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 all available 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 all available horizontal width. \n  ", "  \n  outline: none;\n  user-select: none;\n  font: ", ";\n  color: ", ";\n"
     /**
      * A `Dropdown` is a replacement for `<select>` (select). It opens upwards or
      * downwards depending on its position in the viewport. Its selection and
      * dropdown items are formatted using a formatting function. A Dropdown can
-     * also take an `onSearch` callback, which tells provides its subscriber with
+     * also take an `onSearch` callback, which provides its subscriber with
      * a search query in order to provide the `Dropdown` with new items.
      *
      * ```jsx
@@ -439,7 +446,7 @@ var DropdownStyled = styled(DropdownBase)(templateObject_2 || (templateObject_2
  * A `Dropdown` is a replacement for `<select>` (select). It opens upwards or
  * downwards depending on its position in the viewport. Its selection and
  * dropdown items are formatted using a formatting function. A Dropdown can
- * also take an `onSearch` callback, which tells provides its subscriber with
+ * also take an `onSearch` callback, which provides its subscriber with
  * a search query in order to provide the `Dropdown` with new items.
  *
  * ```jsx
@@ -454,7 +461,7 @@ var DropdownStyled = styled(DropdownBase)(templateObject_2 || (templateObject_2
  */
 var Dropdown = function (_a) {
     var _b = _a.direction, direction = _b === void 0 ? 'down' : _b, _c = _a.fluid, fluid = _c === void 0 ? false : _c, _d = _a.clearable, clearable = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.transparent, transparent = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.multiple, multiple = _h === void 0 ? false : _h, _j = _a.resetOnOpen, resetOnOpen = _j === void 0 ? false : _j, _k = _a.gap, gap = _k === void 0 ? 16 : _k, _l = _a.maxItems, maxItems = _l === void 0 ? 6 : _l, _m = _a.tall, tall = _m === void 0 ? false : _m, _o = _a.label, label = _o === void 0 ? function (item) { return item; } : _o, _p = _a.match, match = _p === void 0 ? 'json' : _p, props = __rest(_a, ["direction", "fluid", "clearable", "disabled", "transparent", "error", "multiple", "resetOnOpen", "gap", "maxItems", "tall", "label", "match"]);
-    return React.createElement(DropdownStyled, __assign({ direction: direction, fluid: fluid, clearable: clearable, disabled: disabled, transparent: transparent, error: error, multiple: multiple, resetOnOpen: resetOnOpen, gap: gap, maxItems: maxItems, tall: tall, label: label, match: match }, props));
+    return (React.createElement(DropdownStyled, __assign({ direction: direction, fluid: fluid, clearable: clearable, disabled: disabled, transparent: transparent, error: error, multiple: multiple, resetOnOpen: resetOnOpen, gap: gap, maxItems: maxItems, tall: tall, label: label, match: match }, props)));
 };
 Dropdown.displayName = 'Dropdown';
 /**

package/package.json

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