@longline/aqua-ui 1.0.269 → 1.0.271

package/controls/Chip/Chip.js

@@ -29,7 +29,7 @@ import styled, { css } from 'styled-components';
 import { SVG } from '../../svg';
 var ChipBase = function (props) {
     var handleKeyDown = function (e) {
-        // A disable chip doesn't listen to the keyboard.
+        // A disabled chip doesn't listen to the keyboard.
         if (props.disabled)
             return;
         // Pressing Delete or Backspace fires the onClick event.
@@ -44,7 +44,7 @@ var ChipBase = function (props) {
             React.createElement("svg", null,
                 React.createElement("use", { xlinkHref: SVG.Icons.Cross })))));
 };
-var ChipStyled = styled(ChipBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  & + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  span.inner {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > button {\n    border: none;\n    background: transparent;\n    outline: none;\n    padding: none;\n    margin: none;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  & > button {\n    svg {\n      transition: fill ", "ms ease-in-out,\n                  background-color ", "ms ease-in-out;\n      fill: ", ";\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      padding: 2px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  &:focus {\n    outline: solid 2px ", ";;\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & button > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > button svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"], ["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  & + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  span.inner {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > button {\n    border: none;\n    background: transparent;\n    outline: none;\n    padding: none;\n    margin: none;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  & > button {\n    svg {\n      transition: fill ", "ms ease-in-out,\n                  background-color ", "ms ease-in-out;\n      fill: ", ";\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      padding: 2px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  &:focus {\n    outline: solid 2px ", ";;\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & button > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > button svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"
+var ChipStyled = styled(ChipBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  & + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  span.inner {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > button {\n    border: none;\n    background: transparent;\n    outline: none;\n    padding: none;\n    margin: none;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  & > button {\n    svg {\n      transition: fill ", "ms ease-in-out,\n                  background-color ", "ms ease-in-out;\n      fill: ", ";\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      padding: 2px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & button > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > button svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"], ["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  & + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  span.inner {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > button {\n    border: none;\n    background: transparent;\n    outline: none;\n    padding: none;\n    margin: none;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  & > button {\n    svg {\n      transition: fill ", "ms ease-in-out,\n                  background-color ", "ms ease-in-out;\n      fill: ", ";\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      padding: 2px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & button > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > button svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"
     /**
      * A set of `Chip` instances show consecutive user inputs and are individually
      * deselected. The "X" on a `Chip` is clickable. A `Chip` can have keyboard focus:

package/inputs/Dropdown/Dropdown.js

@@ -77,11 +77,12 @@ import { usePopper } from 'react-popper';
 // Other controls
 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';
 import { useOutsideClose } from '../../hooks/useOutsideClose';
+import { Selector } from '../Selector';
 var sameWidth = {
     name: "sameWidth",
     enabled: true,
@@ -284,21 +285,17 @@ var DropdownBase = function (props) {
             e.stopPropagation();
         // Is this a multiple-selection dropdown?
         if (props.multiple) {
-            var array = value;
-            if (array == null)
-                array = [];
+            var array = Array.isArray(value) ? value : [];
             // Compare the new item with the existing selection items
             // using deep comparision.
             var newItem_1 = JSON.stringify(item);
             if (array.find(function (x) { return JSON.stringify(x) == newItem_1; })) {
-                // Item already in selection. Just re-set the
-                // existing selection.
-                updateValueAndClose(array);
+                // Item already in selection. Remove it from the selection.
+                updateValue(__spreadArray([], array.filter(function (x) { return x !== item; }), true));
             }
             else {
                 // Item not in selection. Add it.
-                array.push(item);
-                updateValueAndClose(array);
+                updateValue(__spreadArray(__spreadArray([], array, true), [item], false));
             }
         }
         // Not a multiple-selection dropdown. Simply
@@ -345,9 +342,11 @@ 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 (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)));
-            })));
+            return (React.createElement(ListRow, { active: index == activeIndex, key: index + 1, gap: props.gap, onClick: function (e) { return handleClick(e, row); } },
+                props.multiple && React.createElement(Selector, { locked: true, checked: Array.isArray(value) && value.find(function (x) { return JSON.stringify(x) == JSON.stringify(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)));
+                })));
         });
     };
     // Determine label:
@@ -395,7 +394,7 @@ 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(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),
+        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)));
 };
 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 → Selection.d.ts}

@@ -23,5 +23,5 @@ interface IProps {
     /** Fired when clear icon is clicked. */
     onClear?: () => void;
 }
-declare const Selector: (props: IProps) => React.JSX.Element;
-export { Selector };
+declare const Selection: (props: IProps) => React.JSX.Element;
+export { Selection };

package/inputs/Dropdown/Selection.js

@@ -0,0 +1,16 @@
+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, { css } from 'styled-components';
+// Helpers
+import { SVG } from '../../svg';
+import { InputWrapper } from '../Input/InputWrapper';
+var Selection = 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(Inner, { tabIndex: -1, "$multiple": props.multiple, "$placeholder": props.placeholder }, props.children)));
+};
+var Inner = 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 { Selection };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/inputs/Selector/ISelectorProps.d.ts

@@ -11,6 +11,11 @@ interface ISelectorProps {
      * Is this a radio button?
      */
     radio?: boolean;
+    /**
+     * A locked `Selector` cannot be interacted with. This is similar do
+     * `disabled`, but a `locked` Selector doesn't change its appearance.
+     */
+    locked?: boolean;
     /**
      * A disabled `Selector` cannot be interacted with.
      * @default false

package/inputs/Selector/Selector.js

@@ -68,7 +68,7 @@ var SelectorStyled = styled(SelectorBase)(templateObject_2 || (templateObject_2
     /**
      * A Selector can be used to create either a HTML checkbox or a HTML radio button.
      */
-])), function (p) { return p.disabled ? 'none' : 'all'; }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: #aaa;\n    "], ["\n      color: #aaa;\n    "]))); });
+])), function (p) { return (p.disabled || p.locked) ? 'none' : 'all'; }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: #aaa;\n    "], ["\n      color: #aaa;\n    "]))); });
 /**
  * A Selector can be used to create either a HTML checkbox or a HTML radio button.
  */

package/package.json

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

package/inputs/Dropdown/Selector.js

@@ -1,16 +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, { css } from 'styled-components';
-// Helpers
-import { SVG } from '../../svg';
-import { InputWrapper } from '../Input/InputWrapper';
-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_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, templateObject_4;