@longline/aqua-ui 1.0.119 → 1.0.121

package/containers/Form/Field.js

@@ -149,7 +149,7 @@ var Field = function (props) {
         if (hasError && validation)
             return React.createElement(Hint, { ghost: ghost, error: true }, validation);
         if (props.hint)
-            return React.createElement(Hint, { optional: !props.rules || !props.rules.required, ghost: ghost }, props.hint);
+            return React.createElement(Hint, { optional: !!props.rules || !props.rules.required, ghost: ghost }, props.hint);
         return null;
     };
     var dirty = form ? form.dirty : !pristine;

package/inputs/Dropdown/Dropdown.js

@@ -78,7 +78,7 @@ import { usePopper } from 'react-popper';
 import { Column } from './Column';
 import { Body } from './Body';
 import { Selector } from './Selector';
-import { Selection } from './Selection';
+import { Pill } from './Pill';
 import { ListRow } from '../../containers/List/ListRow';
 import { ListCell } from '../../containers/List';
 var sameWidth = {
@@ -210,7 +210,12 @@ var DropdownBase = function (props) {
             prevIndex = 0;
         if (props.data.length <= prevIndex)
             return;
-        updateValue(props.data[prevIndex]);
+        if (props.multiple) { // Multiple replaces entire selection with one-element array
+            updateValue([props.data[prevIndex]]);
+        }
+        else {
+            updateValue(props.data[prevIndex]);
+        }
         bodyRef.current.children[0].children[0].children[prevIndex].scrollIntoView({ block: 'start', inline: 'nearest' });
     };
     var selectNextItem = function () {
@@ -219,7 +224,12 @@ var DropdownBase = function (props) {
         var nextIndex = props.data.indexOf(value) + 1;
         if (props.data.length <= nextIndex)
             return;
-        updateValue(props.data[nextIndex]);
+        if (props.multiple) { // Multiple replaces entire selection with one-element array
+            updateValue([props.data[nextIndex]]);
+        }
+        else {
+            updateValue(props.data[nextIndex]);
+        }
         bodyRef.current.children[0].children[0].children[nextIndex].scrollIntoView({ block: 'end', inline: 'nearest' });
     };
     //
@@ -372,7 +382,7 @@ var DropdownBase = function (props) {
             showPlaceholder = false;
             // Turn value elements into Selections.
             label = value.map(function (item, index) {
-                return React.createElement(Selection, { key: index, onClick: function () { return handleDelete(item); } }, props.label(item));
+                return React.createElement(Pill, { key: index, onClick: function () { return handleDelete(item); } }, props.label(item));
             });
         }
     }

package/inputs/Dropdown/Pill.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /** Fired when selection is clicked. */
+    onClick: () => void;
+}
+declare const Pill: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { Pill };

package/inputs/Dropdown/Pill.js

@@ -0,0 +1,23 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { SVG } from '../../svg';
+var PillBase = function (props) {
+    // Handle clicks locally so that they don't propagate
+    // to the Selector, then send them on to the subscriber.
+    var handleClick = function (e) {
+        e.stopPropagation();
+        props.onClick();
+    };
+    return (React.createElement("div", { className: props.className, onClick: handleClick },
+        React.createElement(Text, null, props.children),
+        React.createElement("svg", null,
+            React.createElement("use", { xlinkHref: SVG.Icons.Cross }))));
+};
+var Text = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  text-overflow: ellipsis;  \n"], ["\n  overflow: hidden;\n  text-overflow: ellipsis;  \n"])));
+var Pill = styled(PillBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Position:\n  position: relative;\n  margin-right: 4px;\n  flex: flex-shrink;\n  min-width: 60px;\n  overflow: hidden;\n  \n  // Layout:\n  display: inline-flex;\n  height: 20px;\n  gap: 2px;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0 3px 0 8px;\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: ", ";\n  color: ", ";\n  white-space: nowrap;\n  user-select: none;\n\n  &>svg {\n    width: 14px;\n    height: 14px;    \n    min-width: 14px;\n    fill: ", ";\n    transition: \n      fill ", "ms ease,\n      background-color ", "ms ease;\n    border-radius: 50%;\n  }\n\n  transition: background-color ", "ms ease;\n  &:hover {\n    background-color:  ", ";\n    outline-offset: -1px;\n    &>svg {\n      fill: #fff;\n      background-color: ", ";\n    }\n  }\n"], ["\n  // Position:\n  position: relative;\n  margin-right: 4px;\n  flex: flex-shrink;\n  min-width: 60px;\n  overflow: hidden;\n  \n  // Layout:\n  display: inline-flex;\n  height: 20px;\n  gap: 2px;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0 3px 0 8px;\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: ", ";\n  color: ", ";\n  white-space: nowrap;\n  user-select: none;\n\n  &>svg {\n    width: 14px;\n    height: 14px;    \n    min-width: 14px;\n    fill: ", ";\n    transition: \n      fill ", "ms ease,\n      background-color ", "ms ease;\n    border-radius: 50%;\n  }\n\n  transition: background-color ", "ms ease;\n  &:hover {\n    background-color:  ", ";\n    outline-offset: -1px;\n    &>svg {\n      fill: #fff;\n      background-color: ", ";\n    }\n  }\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.font; }, function (p) { return p.theme.colors.font; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.negative; }, function (p) { return p.theme.colors.neutral[10]; });
+export { Pill };
+var templateObject_1, templateObject_2;

package/inputs/Dropdown/Selector.js

@@ -11,6 +11,6 @@ var Selector = function (props) {
     return (React.createElement(InputWrapper, { fluid: true, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, onClick: props.onClick, onClear: props.onClear, icon: props.onClear ? null : SVG.Icons.Caret, iconPosition: 'right' },
         React.createElement(Selection, { tabIndex: -1, "$multiple": props.multiple, "$placeholder": props.placeholder }, props.children)));
 };
-var Selection = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  outline: none;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  white-space: nowrap;\n  ", "  \n  // Add ellipsis to selection text:\n  ", "  \n"], ["\n  width: 100%;\n  outline: none;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  white-space: nowrap;\n  ", "  \n  // Add ellipsis to selection text:\n  ", "  \n"])), function (p) { return p.$placeholder && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: rgb(from ", " r g b / 50%);\n  "], ["\n    color: rgb(from ", " r g b / 50%);\n  "])), function (p) { return p.theme.colors.primary[3]; }); }, function (p) { return !p.$multiple && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["text-overflow: ellipsis;"], ["text-overflow: ellipsis;"]))); });
+var Selection = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  outline: none;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  white-space: nowrap;\n  ", "  \n  // Multiple selections use a flexbox for individual overflows: \n  ", "\n  // Add ellipsis to selection text:\n  ", "  \n"], ["\n  width: 100%;\n  outline: none;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  white-space: nowrap;\n  ", "  \n  // Multiple selections use a flexbox for individual overflows: \n  ", "\n  // Add ellipsis to selection text:\n  ", "  \n"])), function (p) { return p.$placeholder && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: rgb(from ", " r g b / 50%);\n  "], ["\n    color: rgb(from ", " r g b / 50%);\n  "])), function (p) { return p.theme.colors.primary[3]; }); }, function (p) { return p.$multiple && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n  "], ["\n    display: flex;\n  "]))); }, function (p) { return !p.$multiple && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["text-overflow: ellipsis;"], ["text-overflow: ellipsis;"]))); });
 export { Selector };
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/package.json

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

package/inputs/Dropdown/Selection.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    /** @ignore */
-    className?: string;
-    /** @ignore */
-    children?: React.ReactNode;
-    /** Fired when selection is clicked. */
-    onClick: () => void;
-}
-declare const Selection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
-export { Selection };

package/inputs/Dropdown/Selection.js

@@ -1,23 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { SVG } from '../../svg';
-var SelectionBase = function (props) {
-    // Handle clicks locally so that they don't propagate
-    // to the Selector, then send them on to the subscriber.
-    var handleClick = function (e) {
-        e.stopPropagation();
-        props.onClick();
-    };
-    // Item function is only called when item is not null.
-    return (React.createElement("div", { className: props.className, onClick: handleClick },
-        props.children,
-        React.createElement("svg", null,
-            React.createElement("use", { xlinkHref: SVG.Icons.Cross }))));
-};
-var Selection = styled(SelectionBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  background-color: ", ";\n  color: ", ";\n  padding: 2px 20px 2px 8px;\n  margin-right: 4px;\n  white-space: nowrap;\n  user-select: none;\n\n  &>svg {\n    position: absolute;\n    right: 5px;\n    top: 4px;\n    width: 14px;\n    height: 14px;    \n    fill: ", ";\n    transition: fill ", "ms ease;\n  }\n\n  transition: background-color ", "ms ease;\n  &:hover {\n    background-color: ", ";\n    &>svg {\n      fill: #fff;\n    }\n  }\n\n  &.item-enter {\n    opacity: 0;\n  }\n  &.item-enter-active {\n    opacity: 1;\n    transition: opacity 300ms ease-in;\n  }\n  &.item-exit {\n    opacity: 1;\n  }\n  &.item-exit-active {\n    opacity: 0;\n    transition: opacity 300ms ease-in;\n  }  \n"], ["\n  position: relative;\n  display: inline-block;\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  background-color: ", ";\n  color: ", ";\n  padding: 2px 20px 2px 8px;\n  margin-right: 4px;\n  white-space: nowrap;\n  user-select: none;\n\n  &>svg {\n    position: absolute;\n    right: 5px;\n    top: 4px;\n    width: 14px;\n    height: 14px;    \n    fill: ", ";\n    transition: fill ", "ms ease;\n  }\n\n  transition: background-color ", "ms ease;\n  &:hover {\n    background-color: ", ";\n    &>svg {\n      fill: #fff;\n    }\n  }\n\n  &.item-enter {\n    opacity: 0;\n  }\n  &.item-enter-active {\n    opacity: 1;\n    transition: opacity 300ms ease-in;\n  }\n  &.item-exit {\n    opacity: 1;\n  }\n  &.item-exit-active {\n    opacity: 0;\n    transition: opacity 300ms ease-in;\n  }  \n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.font; }, function (p) { return p.theme.colors.font; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.primary[1]; });
-export { Selection };
-var templateObject_1;