@longline/aqua-ui 1.0.0

package/inputs/Dropdown/Dropdown.js

@@ -0,0 +1,446 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import AwesomeDebouncePromise from 'awesome-debounce-promise';
+// Other controls
+import { Column } from './Column';
+import { Body } from './Body';
+import { Selector } from './Selector';
+import { Selection } from './Selection';
+import { ListRow } from '../../containers/List/ListRow';
+import { ListCell } from '../../containers/List';
+var DropdownBase = function (props) {
+    // Current value. Keeps track of current value without waiting for new 
+    // value from form, in case there is no form parent.
+    var _a = React.useState(props.value), value = _a[0], setValue = _a[1];
+    // Ref to wrapper:
+    var wrapperRef = React.useRef(null);
+    // Ref to scrollable body content:
+    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];
+    // A mousedown event listener is attached to the document. When the document
+    // is clicked anywhere but this Dropdown, the Dropdown closes.
+    React.useEffect(function () {
+        // Listen for document-wide mousedown/keydown events when Dropdown mounts.
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            // Clean up document-wide mousedown/keydown events when Dropdown unmounts.
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    // When value props changes, change local state value also.
+    React.useEffect(function () {
+        setValue(props.value);
+    }, [props.value]);
+    // Handle document-wide mousedown event by closing the Dropdown.
+    var handleClickOutside = function (event) {
+        var elem = event.target;
+        if (wrapperRef.current && !wrapperRef.current.contains(elem)) {
+            doClose();
+        }
+    };
+    var findScrollingParentRecursive = function (node) {
+        var overflowY = window.getComputedStyle(node).overflowY;
+        if (overflowY == 'scroll' || overflowY == 'auto')
+            return node;
+        if (node.parentElement)
+            return findScrollingParentRecursive(node.parentElement);
+        return null;
+    };
+    // Return my nearest parent that's scrolling (frames are not supported). If
+    // no parent is found, null is returned.
+    var findScrollingParent = function () {
+        return findScrollingParentRecursive(wrapperRef.current.parentElement);
+    };
+    // Returns true if the input is in the lower half of its scrolling parent.
+    // (if direction == parent), or in the lower half of the viewport if no 
+    // scrolling parent is found.
+    var isInLowerViewport = function () {
+        var scrollingParent = findScrollingParent();
+        if (scrollingParent == null || props.direction !== 'parent') {
+            return wrapperRef.current.getBoundingClientRect().top > window.innerHeight / 2;
+        }
+        else {
+            var myY = wrapperRef.current.getBoundingClientRect().top;
+            var containerY = scrollingParent.getBoundingClientRect().top;
+            var containerHeight = scrollingParent.getBoundingClientRect().height;
+            var offset = myY - containerY;
+            return offset > containerHeight / 2;
+        }
+    };
+    // Open the dropdown.
+    var doOpen = function () {
+        // Is the Dropdown below the middle of the viewport?
+        var below = isInLowerViewport();
+        // Set opening direction.
+        if (props.direction === 'down')
+            setUpwards(false);
+        else if (props.direction === 'up')
+            setUpwards(true);
+        else
+            setUpwards(below);
+        setOpen(true);
+        // If reset on open is specified, then the search query is reset whenever the
+        // dropdown opens or reopens.
+        if (props.resetOnOpen)
+            setSearch(null);
+        // If a search box is present, move focus to it:
+        if (props.onSearch) {
+            var input = wrapperRef.current.querySelector('input');
+            input.focus();
+            // In IE/Chrome, body content scrolls up a little when setting focus
+            // to search input. Scroll it back to top.
+            wrapperRef.current.children[1].scrollTop = 0;
+        }
+    };
+    // Close the dropdown.
+    var doClose = function () {
+        setOpen(false);
+        // 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
+        // to the dropdown's contents.
+        if (props.onClose) {
+            setTimeout(props.onClose, 300);
+        }
+    };
+    // The selector was clicked, open the Dropdown, or close
+    // it if it was open.
+    var handleSelectorClicked = function () {
+        // Disabled or ghosted input cannot be clicked.
+        if (props.disabled || props.ghost)
+            return;
+        if (open) {
+            doClose();
+        }
+        else {
+            doOpen();
+        }
+    };
+    //
+    // Given a single character, find the first data item that starts with
+    // that character. If such an item is found, it is made the current selection.
+    // 
+    // Data items are compared by converting them to strings. If a data item is
+    // an object, all its keys are converted to strings and compared.
+    // 
+    var selectItemByCharacter = function (c) {
+        c = c.toLowerCase();
+        // Go through all (non-null) data records:
+        var idx = props.data.filter(function (r) { return r != null; }).findIndex(function (row) {
+            // Build a list of strings contained in the data row:
+            var strings = [];
+            // If data row is an object, convert all its keys to string.
+            if (typeof row === 'object' && row != null) {
+                for (var p in row)
+                    strings.push(row[p].toString());
+                // If data row is not an object, just convert its value to a string.
+            }
+            else {
+                strings.push(row.toString());
+            }
+            return strings.find(function (s) { return s.length > 0 && s.charAt(0).toLowerCase() == c; });
+        });
+        // Was a matching row found?
+        if (idx != -1) {
+            handleClick(props.data[idx]);
+        }
+    };
+    var selectPreviousItem = function () {
+        var prevIndex = props.data.indexOf(value) - 1;
+        if (prevIndex < 0)
+            prevIndex = 0;
+        if (props.data.length <= prevIndex)
+            return;
+        updateValue(props.data[prevIndex]);
+        bodyRef.current.children[prevIndex].scrollIntoView({ block: 'start', inline: 'nearest' });
+    };
+    var selectNextItem = function () {
+        var nextIndex = props.data.indexOf(value) + 1;
+        if (props.data.length <= nextIndex)
+            return;
+        updateValue(props.data[nextIndex]);
+        bodyRef.current.children[nextIndex].scrollIntoView({ block: 'end', inline: 'nearest' });
+    };
+    //
+    // A key was pressed while the selector had focus.
+    // 
+    var handleKeyDown = function (e) {
+        if (document.activeElement != wrapperRef.current)
+            return;
+        if (props.disabled || props.ghost)
+            return;
+        var key = e.key;
+        if (key == 'Escape' || key == 'Tab') {
+            e.stopPropagation();
+            if (!open)
+                return;
+            doClose();
+        }
+        if (key == 'Enter') {
+            e.stopPropagation();
+            if (!open)
+                return;
+            doClose();
+        }
+        if (key == ' ') {
+            e.stopPropagation();
+            if (open)
+                return;
+            doOpen();
+        }
+        if (key == 'ArrowUp') {
+            e.stopPropagation();
+            selectPreviousItem();
+        }
+        if (key == 'ArrowDown') {
+            e.stopPropagation();
+            selectNextItem();
+        }
+        // Is a letter or a digit pressed?
+        if (key.length == 1 && key.match(/[a-z0-9]/i)) {
+            e.stopPropagation();
+            selectItemByCharacter(key);
+        }
+        // Any other key's propagation is not stopped (most importantly
+        // the TAB key to navigate to the next control).
+    };
+    var updateValue = function (item) {
+        setValue(item);
+        if (props.onChange) {
+            props.onChange(item);
+        }
+    };
+    var updateValueAndClose = function (item) {
+        doClose();
+        updateValue(item);
+    };
+    // An item was clicked. Close Dropdown and call onChange.
+    var handleClick = function (item) {
+        // Is this a multiple-selection dropdown?
+        if (props.multiple) {
+            var array = value;
+            if (array == null)
+                array = [];
+            // 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);
+            }
+            else {
+                // Item not in selection. Add it.
+                array.push(item);
+                updateValueAndClose(array);
+            }
+        }
+        // Not a multiple-selection dropdown. Simply
+        // set the selection to the new item.
+        else {
+            updateValueAndClose(item);
+        }
+    };
+    // Remove item from selection.
+    var handleDelete = function (item) {
+        // Find item in value array:
+        var array = value;
+        var toDelete = JSON.stringify(item);
+        var index = array.findIndex(function (x) { return JSON.stringify(x) == toDelete; });
+        // Remove item from selection:
+        array.splice(index, 1);
+        // Set new selection:
+        updateValueAndClose(__spreadArray([], array, true));
+    };
+    var handleClear = function () {
+        if (props.multiple) {
+            updateValueAndClose([]);
+        }
+        else {
+            updateValueAndClose(null);
+        }
+    };
+    // Search is debounced by 350ms:
+    var doSearch = function (value) { return props.onSearch(value); };
+    var doSearchBebounced = AwesomeDebouncePromise(doSearch, 350);
+    var handleSearch = function (value) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setSearch(value);
+            doSearchBebounced(value);
+            return [2 /*return*/];
+        });
+    }); };
+    // Determine body rows:
+    var getBodyChildren = function () {
+        var columns = React.Children.map(props.children, function (child) {
+            // Only Column children are considered:
+            if (child.type && child.type === Column)
+                return child;
+        });
+        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(ListCell, { key: index, width: child.props.width, align: child.props.align }, row !== null && child.props.children(row)));
+            })));
+        });
+    };
+    // Determine label:
+    // By default, we use the placeholder.
+    var label = props.placeholder;
+    var showPlaceholder = true;
+    // Single-selection dropdowns:
+    // If the Dropdown has a value, format it and use as label.
+    if (!props.multiple) {
+        if (value !== null && value !== undefined) {
+            label = props.label(value);
+            showPlaceholder = false;
+        }
+    }
+    // Multiple-selection dropdowns:
+    if (props.multiple) {
+        // Warn if value is not an array, and not null:
+        if (!Array.isArray(value) && value !== null && value !== undefined) {
+            console.error("In a multiple-selection checkbox, value should be an array.");
+        }
+        // Is the value not the empty array, and not null?
+        if (value != null && value.length > 0) {
+            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));
+            });
+        }
+    }
+    // If Dropdown is clicked, then click Selector.
+    var handleClickDropdown = function () {
+        wrapperRef.current.children[0].click();
+    };
+    var children = getBodyChildren();
+    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(Body, { ref: bodyRef, upwards: upwards, open: open, transparent: props.transparent, maxItems: props.maxItems, onSearch: props.onSearch ? handleSearch : null, search: search, tall: props.tall }, children)));
+};
+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"
+    /**
+     * 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
+     * a search query in order to provide the `Dropdown` with new items.
+     *
+     * ```jsx
+     * <Dropdown
+     *   data={[{id: 1, name: 'One'}, {id: 2, name: 'Two'}, {id: 3, name: 'Three'}]}
+     *   label={(item: any) => item.name}
+     *   placeholder="Select one"
+     * >
+     *   <Dropdown.Column>{(item: any) => item.name}</Dropdown.Column>
+     * </Dropdown>
+     * ```
+     */
+])), function (p) { return p.fluid && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[30]; });
+/**
+ * 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
+ * a search query in order to provide the `Dropdown` with new items.
+ *
+ * ```jsx
+ * <Dropdown
+ *   data={[{id: 1, name: 'One'}, {id: 2, name: 'Two'}, {id: 3, name: 'Three'}]}
+ *   label={(item: any) => item.name}
+ *   placeholder="Select one"
+ * >
+ *   <Dropdown.Column>{(item: any) => item.name}</Dropdown.Column>
+ * </Dropdown>
+ * ```
+ */
+var Dropdown = function (_a) {
+    var _b = _a.direction, direction = _b === void 0 ? 'none' : _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, props = __rest(_a, ["direction", "fluid", "clearable", "disabled", "transparent", "error", "multiple", "resetOnOpen", "gap", "maxItems", "tall", "label"]);
+    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 }, props));
+};
+/**
+ * A Dropdown.Column's child is an item formatter function. A column can
+ * optionally take a weight and an alignment.
+ */
+Dropdown.Column = Column;
+export { Dropdown };
+var templateObject_1, templateObject_2;

package/inputs/Dropdown/Selection.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 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

@@ -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 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;

package/inputs/Dropdown/Selector.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /** Dropdown currently disabled? */
+    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? */
+    ghost?: boolean;
+    /** Is this label a placeholder? Then it will be lighter in color. */
+    placeholder?: boolean;
+    /** Error state? */
+    error?: boolean;
+    /** Multiple selection? This will result in smaller padding to accommodate <Selection> items. */
+    multiple?: boolean;
+    /** Fired when selector is clicked. */
+    onClick: () => void;
+    /** Fired when clear icon is clicked. */
+    onClear?: () => void;
+}
+declare const Selector: (props: IProps) => React.JSX.Element;
+export { Selector };

package/inputs/Dropdown/Selector.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 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: calc(100% - 50px) !important;\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: calc(100% - 50px) !important;\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;"]))); });
+export { Selector };
+var templateObject_1, templateObject_2, templateObject_3;

package/inputs/Editor/Editor.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Editor name.
+     */
+    name?: string;
+    /**
+     * Current Editor value.
+     */
+    value?: any;
+    /**
+     * A fluid Editor takes up all available horizontal space available to it.
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * An Editor can show an error state.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Marks Editor as disabled. Disabled editors cannot be interacted with.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Removes Editor border and makes background transparent. This is useful
+     * for placing an editor in a `Field`.
+     * @default false
+     */
+    transparent?: boolean;
+    /**
+     * An Editor can be in a ghost state, where content is being loaded.
+     * @default false
+     */
+    ghost?: boolean;
+    /**
+     * Listeners are notified whenever the user interacts with the Editor.
+     */
+    onChange?: (value: any) => void;
+}
+declare const Editor: ({ fluid, error, disabled, transparent, ghost, ...props }: IProps) => React.JSX.Element;
+export { Editor };

package/inputs/Editor/Editor.js

@@ -0,0 +1,60 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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 { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import styled from 'styled-components';
+import { MenuBar } from './menu/MenuBar';
+import { InputWrapper } from '../Input/InputWrapper';
+// define your extension array
+var extensions = [StarterKit];
+var EditorBase = function (props) {
+    var handleUpdate = function (p) {
+        if (props.onChange)
+            props.onChange(p.editor.getHTML());
+    };
+    var editor = useEditor({
+        extensions: extensions,
+        content: props.value,
+        injectCSS: false,
+        onUpdate: handleUpdate
+    });
+    React.useEffect(function () {
+        editor.commands.setContent(props.value, true, { preserveWhitespace: "full" });
+    }, [props.value]);
+    return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent },
+        React.createElement("div", { className: props.className },
+            React.createElement(MenuBar, { editor: editor }),
+            React.createElement(EditorContent, { editor: editor }))));
+};
+var EditorStyled = styled(EditorBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position:         relative;\n  box-sizing:       border-box;\n  width:            100%;\n\n  .tiptap {\n    border: none;\n    outline: none;\n    // Define colors for placeholder text.\n    ::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n    // Define colors for selected text.\n    ::selection {\n      background-color: ", ";\n      color: ", ";\n    }      \n  }\n\n  // Content styles:\n  .tiptap {\n    code {\n      background-color: ", ";\n      color: ", ";\n      outline: solid 1px ", ";\n      border-radius: 4px;\n      padding: 0 4px 0px 4px;\n    }\n\n    pre {\n      background-color: ", ";\n      border-radius: 4px;\n      color: ", ";\n      outline: solid 1px ", ";\n      padding: 8px 12px 8px 12px;\n      code {\n        background-color: transparent;\n        outline: none;\n        border-radius: none;\n        padding: 0 0 0 0;\n      }\n    }\n  }\n"], ["\n  position:         relative;\n  box-sizing:       border-box;\n  width:            100%;\n\n  .tiptap {\n    border: none;\n    outline: none;\n    // Define colors for placeholder text.\n    ::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n    // Define colors for selected text.\n    ::selection {\n      background-color: ", ";\n      color: ", ";\n    }      \n  }\n\n  // Content styles:\n  .tiptap {\n    code {\n      background-color: ", ";\n      color: ", ";\n      outline: solid 1px ", ";\n      border-radius: 4px;\n      padding: 0 4px 0px 4px;\n    }\n\n    pre {\n      background-color: ", ";\n      border-radius: 4px;\n      color: ", ";\n      outline: solid 1px ", ";\n      padding: 8px 12px 8px 12px;\n      code {\n        background-color: transparent;\n        outline: none;\n        border-radius: none;\n        padding: 0 0 0 0;\n      }\n    }\n  }\n"])), function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; });
+var Editor = function (_a) {
+    var _b = _a.fluid, fluid = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.transparent, transparent = _e === void 0 ? false : _e, _f = _a.ghost, ghost = _f === void 0 ? false : _f, props = __rest(_a, ["fluid", "error", "disabled", "transparent", "ghost"]);
+    return React.createElement(EditorStyled, __assign({ fluid: fluid, error: error, disabled: disabled, transparent: transparent, ghost: ghost }, props));
+};
+export { Editor };
+var templateObject_1;

package/inputs/Editor/buttons/BoldButton.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Editor } from '@tiptap/react';
+interface IProps {
+    editor: Editor;
+}
+declare const BoldButton: (props: IProps) => React.JSX.Element;
+export { BoldButton };

package/inputs/Editor/buttons/BoldButton.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { MenuButton } from '../menu/MenuButton';
+import { SVG } from '../../../svg';
+var BoldButton = function (props) {
+    return (React.createElement(MenuButton, { editor: props.editor, hint: "Bold", keys: ["Ctrl", "B"], onClick: function () { return props.editor.chain().focus().toggleBold().run(); }, disabled: !props.editor.can().chain().focus().toggleBold().run(), active: props.editor.isActive('bold'), icon: SVG.Editor.Bold }));
+};
+export { BoldButton };