@longline/aqua-ui 1.0.150 → 1.0.151

package/controls/ListView/Table.js

@@ -78,6 +78,7 @@ var TableBase = function (_a) {
             setTime(Math.random());
         });
         resizeObserver.observe(auxRef.current);
+        resizeObserver.observe(innerRef.current);
         return function () { return resizeObserver.disconnect(); };
     }, []);
     // If desired, scroll newly selected item into view.

package/inputs/MonthRange/Body.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Current value.
+     */
+    value: [Date, Date] | null;
+    /**
+     * Is control currently open?
+     */
+    open: boolean;
+    /**
+     * Is control transparent? This affects the position at which
+     * this Body opens.
+     */
+    transparent?: boolean;
+    /**
+     * Fired when a new range is selected.
+     */
+    onSelect: (value: [Date, Date]) => void;
+    styles: any;
+    attributes: any;
+}
+declare const Body: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<IProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, never>> & string & Omit<React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>, keyof React.Component<any, {}, any>>;
+export { Body };

package/inputs/MonthRange/Body.js

@@ -0,0 +1,101 @@
+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);
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { Calendar } from './Calendar';
+var BodyBase = React.forwardRef(function (props, ref) {
+    var valueToDate = function (index) {
+        if (props.value == null || !Array.isArray(props.value) || props.value.length != 2)
+            return null;
+        return props.value[index];
+    };
+    var getStartYear = function () {
+        var dStart = valueToDate(0);
+        if (dStart)
+            return dStart.getFullYear();
+        return (new Date()).getFullYear();
+    };
+    var getEndYear = function () {
+        var dStart = valueToDate(0);
+        var dEnd = valueToDate(1);
+        if (dStart == null)
+            return (new Date()).getFullYear() + 1;
+        if (dEnd) {
+            if (dEnd.getFullYear() <= dStart.getFullYear())
+                return dStart.getFullYear() + 1;
+            return dEnd.getFullYear();
+        }
+        return dStart.getFullYear() + 1;
+    };
+    // start and end are the currently selected start and end dates.
+    var _a = React.useState(valueToDate(0)), start = _a[0], setStart = _a[1];
+    var _b = React.useState(valueToDate(1)), end = _b[0], setEnd = _b[1];
+    // startYear and endYear are the years currently shown in the calendars.
+    var _c = React.useState(getStartYear()), startYear = _c[0], setStartYear = _c[1];
+    var _d = React.useState(getEndYear()), endYear = _d[0], setEndYear = _d[1];
+    React.useEffect(function () {
+        setStart(valueToDate(0));
+        setEnd(valueToDate(1));
+        setStartYear(getStartYear());
+        setEndYear(getEndYear());
+    }, [props.open]);
+    var handleChangeStartYear = function (year) {
+        setStartYear(year);
+        if (endYear <= year)
+            setEndYear(year + 1);
+    };
+    var handleChangeEndYear = function (year) {
+        setEndYear(year);
+        if (startYear >= year)
+            setStartYear(year - 1);
+    };
+    var handleSelectMonth = function (month, year) {
+        // No start date yet?
+        if (!start) {
+            var start_1 = new Date(year, month, 1);
+            setStart(start_1);
+            props.onSelect([start_1, start_1]);
+        }
+        // There is already a start date?
+        else if (!end) {
+            var newStart = start;
+            var newEnd = new Date(year, month + 1, 0); // Get last day of month
+            // Swap start/end if necessary.
+            if (newStart > newEnd) {
+                var temp = newStart;
+                newStart = newEnd;
+                newEnd = temp;
+            }
+            setStart(newStart);
+            setEnd(newEnd);
+            props.onSelect([newStart, newEnd]);
+        }
+        // There are both start and end dates. Clear and set start.
+        else {
+            setStart(new Date(year, month, 1));
+            setEnd(null);
+            props.onSelect([start, start]);
+        }
+    };
+    return (React.createElement("div", __assign({ style: props.styles.popper }, props.attributes.popper, { className: props.className, tabIndex: -1, ref: ref, onMouseDown: function (e) { return e.stopPropagation(); } }),
+        React.createElement(Calendars, null,
+            React.createElement(Calendar, { year: startYear, start: start, end: end, onChangeYear: handleChangeStartYear, onMonth: handleSelectMonth }),
+            React.createElement(Calendar, { year: endYear, start: start, end: end, onChangeYear: handleChangeEndYear, onMonth: handleSelectMonth }))));
+});
+var Calendars = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+var Body = styled(BodyBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  z-index: 9999 !important;\n  box-sizing:     border-box;\n  overflow-y:     hidden;\n  outline:        none;\n\n  background-color: ", ";\n  border-radius: ", "px;\n  color: ", ";\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  box-sizing:     border-box;\n  overflow-y:     hidden;\n  outline:        none;\n\n  background-color: ", ";\n  border-radius: ", "px;\n  color: ", ";\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.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[3]; }, 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; }); });
+export { Body };
+var templateObject_1, templateObject_2, templateObject_3;

package/inputs/MonthRange/Calendar.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** Calendar year */
+    year: number;
+    /** Selected start date */
+    start: Date;
+    /** Selected end date */
+    end: Date;
+    /** Fired when calendar changes year */
+    onChangeYear: (year: number) => void;
+    /** Fired when month is clicked. */
+    onMonth: (month: number, year: number) => void;
+}
+declare const Calendar: (props: IProps) => React.JSX.Element;
+export { Calendar };

package/inputs/MonthRange/Calendar.js

@@ -0,0 +1,45 @@
+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);
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { YearSelector } from './YearSelector';
+var CalendarBase = function (props) {
+    var getMonthName = function (index) {
+        return ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][index % 12];
+    };
+    return (React.createElement("div", { className: props.className },
+        React.createElement(YearSelector, { year: props.year, onChange: props.onChangeYear }),
+        React.createElement(Months, null, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(function (month) {
+            var $start = props.start && props.start.getFullYear() == props.year && props.start.getMonth() == month;
+            var $end = props.end && props.end.getFullYear() == props.year && props.end.getMonth() == month;
+            var $between = props.start && props.start.getFullYear() * 12 + props.start.getMonth() < props.year * 12 + month &&
+                props.end && props.end.getFullYear() * 12 + props.end.getMonth() > props.year * 12 + month;
+            var $length = (props.start && props.end) ?
+                (props.end.getFullYear() * 12 + props.end.getMonth()) - (props.start.getFullYear() * 12 + props.start.getMonth())
+                : 0;
+            return (React.createElement(Month, { key: month, "$start": $start, "$end": $end, "$between": $between, "$length": $length, onClick: function () { return props.onMonth(month, props.year); } }, getMonthName(month)));
+        }))));
+};
+var CalendarStyled = styled(CalendarBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 12px 16px 12px 16px;\n  user-select: none;\n"], ["\n  padding: 12px 16px 12px 16px;\n  user-select: none;\n"])));
+var Months = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(4, 40px);\n  grid-template-rows: repeat(3, 40px);\n  row-gap: 4px;\n"], ["\n  display: grid;\n  grid-template-columns: repeat(4, 40px);\n  grid-template-rows: repeat(3, 40px);\n  row-gap: 4px;\n"])));
+var Month = styled.div.attrs(function (p) {
+    return {
+        r: "50%" // Border radius one-time definition
+    };
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n\n  // Set backgrounds and border radii.\n  // Note: $between is neither start nor end, but between them.\n  ", "\n  ", "  \n  ", "\n  ", "\n\n  // Hover effect only on unselected months.\n  ", "\n"], ["\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: ", ";\n\n  // Set backgrounds and border radii.\n  // Note: $between is neither start nor end, but between them.\n  ", "\n  ", "  \n  ", "\n  ", "\n\n  // Hover effect only on unselected months.\n  ", "\n"])), function (p) { return p.r; }, function (p) { return (p.$between || p.$start || p.$end) && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n  "], ["\n    background-color: ", ";\n    color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[30]; }, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.$between && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    border-radius: 0px;\n  "], ["\n    border-radius: 0px;\n  "]))); }, function (p) { return p.$start && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n  "], ["\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n  "])), p.r, p.r, p.$length ? 0 : p.r, p.$length ? 0 : p.r); }, function (p) { return p.$end && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";    \n  "], ["\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";    \n  "])), p.r, p.r, p.$length ? 0 : p.r, p.$length ? 0 : p.r); }, function (p) { return (!p.$between && !p.$start && !p.$end) && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    &:hover {\n      background-color: rgb(from ", " r g b / 30%);\n    }\n  "], ["\n    &:hover {\n      background-color: rgb(from ", " r g b / 30%);\n    }\n  "])), function (p) { return p.theme.colors.primary[1]; }); });
+var Calendar = function (props) { return React.createElement(CalendarStyled, __assign({}, props)); };
+export { Calendar };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/inputs/MonthRange/MonthRange.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Input name for use in forms.
+     */
+    name?: string;
+    /**
+     * Current MonthRange value.
+     */
+    value?: [Date, Date] | null;
+    /**
+     * Marks MonthRange as disabled. Disabled MonthRanges cannot be interacted with.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Removes input border and makes background transparent. This is useful
+     * for placing an input in a `Field`.
+     * @default false
+     */
+    transparent?: boolean;
+    /**
+     * A MonthRange can be in a ghost state, where content is being loaded.
+     * @default false
+     */
+    ghost?: boolean;
+    /**
+     * A fluid `MonthRange` takes up all available horizontal space available to it.
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * A `MonthRange` can show an error state.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * If set, MonthRange's value can be cleared.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * The `MonthRange` opening direction can be either `up` or `down`.
+     * @default down
+     */
+    direction?: 'up' | 'down';
+    /**
+     * Optional placeholder text.
+     */
+    placeholder?: React.ReactNode;
+    /**
+     * If set, month count is displayed in selector.
+     * @default false
+     */
+    count?: boolean;
+    /**
+     * Listeners are notified whenever the user interacts with the `MonthRange`.
+     */
+    onChange?: (value: [Date, Date] | null) => void;
+    /**
+     * Listeners are notified when the `MonthRange` receives focus.
+     */
+    onFocus?: () => void;
+}
+/**
+ * A `MonthRange` allows a selection of a time period, measured in months.
+ */
+declare const MonthRange: ({ direction, disabled, transparent, fluid, error, clearable, count, ...props }: IProps) => React.JSX.Element;
+export { MonthRange, IProps };

package/inputs/MonthRange/MonthRange.js

@@ -0,0 +1,111 @@
+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 styled, { css } from 'styled-components';
+import { createPortal } from 'react-dom';
+import { usePopper } from 'react-popper';
+import { Selector } from './Selector';
+import { Body } from './Body';
+var MonthRangeBase = function (props) {
+    var wrapperRef = React.useRef(null);
+    var bodyRef = React.useRef(null);
+    var _a = React.useState(props.value), value = _a[0], setValue = _a[1];
+    var _b = React.useState(false), open = _b[0], setOpen = _b[1];
+    // Add (and remove) document-wide event listener for mousedown.
+    React.useEffect(function () {
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () { return document.removeEventListener('mousedown', handleClickOutside); };
+    }, []);
+    //
+    // Handle document-wide mousedown event by closing the Selector.
+    // (This only happens if there actually is a Selector).
+    //
+    var handleClickOutside = function (e) {
+        var elem = e.target;
+        if (wrapperRef.current && bodyRef.current && !wrapperRef.current.contains(elem) && !bodyRef.current.contains(elem)) {
+            setOpen(false);
+        }
+    };
+    // Open the dropdown.
+    var doOpen = function () {
+        setOpen(true);
+    };
+    var handleToggle = function () {
+        if (!open) {
+            doOpen();
+            // Update popper position.
+            if (update)
+                update();
+        }
+        else {
+            setOpen(false);
+        }
+    };
+    var handleSelect = function (newValue) {
+        setValue(newValue);
+        if (props.onChange)
+            props.onChange(newValue);
+    };
+    var handleKeyDown = function (e) {
+        if (props.disabled)
+            return;
+        if (props.ghost)
+            return;
+        if (e.key == ' ' && !open)
+            doOpen();
+        if (e.key == 'Escape' && open)
+            setOpen(false);
+    };
+    var _c = usePopper(wrapperRef.current, bodyRef.current, {
+        placement: props.direction == 'down' ? 'bottom-start' : 'top-start',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [0, props.transparent ? 30 : 8],
+                },
+            }
+        ]
+    }), styles = _c.styles, attributes = _c.attributes, update = _c.update;
+    return (React.createElement("div", { tabIndex: -1, className: props.className, onKeyDown: handleKeyDown, ref: wrapperRef },
+        React.createElement(Selector, { value: value, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, error: props.error, clearable: props.clearable, placeholder: props.placeholder, count: props.count, onClear: (!props.disabled && props.clearable && value != null) ? function () { return handleSelect(null); } : null, onCalendar: handleToggle }),
+        createPortal(React.createElement(Body, { ref: bodyRef, value: value, open: open, transparent: props.transparent, onSelect: handleSelect, styles: styles, attributes: attributes }), document.body)));
+};
+var MonthRangeStyled = styled(MonthRangeBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  // MonthRange has a minimum width.\n  width: 250px;\n  // A fluid MonthRange occupies full horizontal width.\n  ", "  \n"], ["\n  position: relative;\n  // MonthRange has a minimum width.\n  width: 250px;\n  // A fluid MonthRange occupies full horizontal width.\n  ", "  \n"
+    /**
+     * A `MonthRange` allows a selection of a time period, measured in months.
+     */
+])), function (p) { return p.fluid && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); });
+/**
+ * A `MonthRange` allows a selection of a time period, measured in months.
+ */
+var MonthRange = function (_a) {
+    var _b = _a.direction, direction = _b === void 0 ? 'down' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.transparent, transparent = _d === void 0 ? false : _d, _e = _a.fluid, fluid = _e === void 0 ? false : _e, _f = _a.error, error = _f === void 0 ? false : _f, _g = _a.clearable, clearable = _g === void 0 ? false : _g, _h = _a.count, count = _h === void 0 ? false : _h, props = __rest(_a, ["direction", "disabled", "transparent", "fluid", "error", "clearable", "count"]);
+    return React.createElement(MonthRangeStyled, __assign({ direction: direction, disabled: disabled, transparent: transparent, fluid: fluid, error: error, clearable: clearable, count: count }, props));
+};
+export { MonthRange };
+var templateObject_1, templateObject_2;

package/inputs/MonthRange/Selector.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Current input value.
+     */
+    value: [Date, Date];
+    /**
+     * Marks input as disabled. Disabled inputs cannot be interacted with.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Removes input border and makes background transparent. This is useful
+     * for placing an input in a `Field`.
+     * @default false
+     */
+    transparent?: boolean;
+    /**
+     * Is DateInput ghosted?
+     * @default false
+     */
+    ghost?: boolean;
+    /**
+     * An input can show an error state.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * If set, Input's value can be cleared.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Optional placeholder text.
+     */
+    placeholder?: React.ReactNode;
+    /**
+     * If set, month count is displayed in selector.
+     * @default false
+     */
+    count?: boolean;
+    onClear?: () => void;
+    onCalendar: () => void;
+}
+declare const Selector: (props: IProps) => React.JSX.Element;
+export { Selector };

package/inputs/MonthRange/Selector.js

@@ -0,0 +1,61 @@
+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, useTheme } from 'styled-components';
+import { InputWrapper } from '../Input/InputWrapper';
+import { SVG } from '../../svg';
+import { DateTime } from '../../formatters/DateTime';
+var Selector = function (props) {
+    var theme = useTheme();
+    var hasValue = function () {
+        if (props.value == null || !Array.isArray(props.value) || props.value.length != 2)
+            return false;
+        if (props.value[0] == null || props.value[1] == null)
+            return false;
+        return true;
+    };
+    var monthsDiff = function (d1, d2) {
+        return (d2.getFullYear() * 12 + d2.getMonth()) - (d1.getFullYear() * 12 + d1.getMonth()) + 1;
+    };
+    var renderDates = function () {
+        // No selection?
+        if (!hasValue())
+            return React.createElement(React.Fragment, null,
+                props.placeholder,
+                "\u00A0");
+        // Same year?
+        if (props.value[0].getFullYear() == props.value[1].getFullYear()) {
+            // Same month?
+            if (props.value[0].getMonth() == props.value[1].getMonth()) {
+                return React.createElement(React.Fragment, null,
+                    React.createElement(DateTime, { type: "custom", format: "MMM yyyy", value: props.value[0] }));
+            }
+            else {
+                return React.createElement(React.Fragment, null,
+                    React.createElement(DateTime, { type: "custom", format: "MMM", value: props.value[0] }),
+                    " - ",
+                    React.createElement(DateTime, { type: "custom", format: "MMM yyyy", value: props.value[1] }),
+                    props.count && React.createElement("span", null,
+                        " (",
+                        monthsDiff(props.value[0], props.value[1]),
+                        "m)"));
+            }
+        }
+        // Different years:
+        return React.createElement(React.Fragment, null,
+            React.createElement(DateTime, { type: "custom", format: "MMM yyyy", value: props.value[0] }),
+            " - ",
+            React.createElement(DateTime, { type: "custom", format: "MMM yyyy", value: props.value[1] }),
+            props.count && React.createElement("span", null,
+                " (",
+                monthsDiff(props.value[0], props.value[1]),
+                "m)"));
+    };
+    return (React.createElement(InputWrapper, { fluid: true, error: props.error, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, onClear: (props.clearable && hasValue()) ? props.onClear : null, onClick: props.onCalendar, icon: { url: SVG.Icons.Calendar, color: theme.colors.primary[3] }, iconPosition: 'right' },
+        React.createElement(Selection, { "$placeholder": !hasValue() }, renderDates())));
+};
+var Selection = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  outline: none;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  white-space: nowrap;\n  ", "  \n"], ["\n  width: 100%;\n  outline: none;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  white-space: nowrap;\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]; }); });
+export { Selector };
+var templateObject_1, templateObject_2;

package/inputs/MonthRange/YearSelector.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** Current year */
+    year: number;
+    /** Fired when year is changed. */
+    onChange: (year: number) => void;
+}
+declare const YearSelector: (props: IProps) => React.JSX.Element;
+export { YearSelector };

package/inputs/MonthRange/YearSelector.js

@@ -0,0 +1,38 @@
+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);
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { Icon } from '../../controls/Icon';
+import { SVG } from '../../svg';
+var YearSelectorBase = function (props) {
+    var handleChangeYear = function (newYear) {
+        if (newYear < 0 || newYear > 9999)
+            return;
+        props.onChange(newYear);
+    };
+    return (React.createElement("div", { className: props.className },
+        React.createElement(Year, null, props.year),
+        React.createElement(Button, null,
+            React.createElement(Icon, { url: SVG.Icons.Chevron, size: 'large', onClick: function () { return handleChangeYear(props.year - 1); } })),
+        React.createElement(Button, null,
+            React.createElement(Icon, { url: SVG.Icons.Chevron, size: 'large', rotated: 180, onClick: function () { return handleChangeYear(props.year + 1); } }))));
+};
+var Year = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font: ", ";\n  font-weight: 700;\n  user-select: none;\n  padding-left: 8px;\n"], ["\n  font: ", ";\n  font-weight: 700;\n  user-select: none;\n  padding-left: 8px;\n"])), function (p) { return p.theme.font.labelSmall; });
+var Button = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color ease-in-out ", "ms;\n  border-radius: ", "px;\n  svg {\n    fill: ", ";\n  }\n  &:hover {\n    background-color: rgb(from ", " r g b / 30%);\n    svg {\n      fill: ", ";\n    }  \n  }\n"], ["\n  width: 28px;\n  height: 28px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: background-color ease-in-out ", "ms;\n  border-radius: ", "px;\n  svg {\n    fill: ", ";\n  }\n  &:hover {\n    background-color: rgb(from ", " r g b / 30%);\n    svg {\n      fill: ", ";\n    }  \n  }\n"])), function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.neutral[10]; });
+var YearSelectorStyled = styled(YearSelectorBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 1fr 32px 32px;\n  align-items: center;\n"], ["\n  display: grid;\n  grid-template-columns: 1fr 32px 32px;\n  align-items: center;\n"])));
+var YearSelector = function (props) { return React.createElement(YearSelectorStyled, __assign({}, props)); };
+export { YearSelector };
+var templateObject_1, templateObject_2, templateObject_3;

package/inputs/MonthRange/index.d.ts

@@ -0,0 +1 @@
+export * from './MonthRange';

package/inputs/MonthRange/index.js

@@ -0,0 +1 @@
+export * from './MonthRange';

package/package.json

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