@longline/aqua-ui 1.0.338 → 1.0.340

package/inputs/Editor/menu/MenuButton.js

@@ -46,7 +46,7 @@ var MenuButtonBase = function (props) {
             }
         ]
     }), styles = _a.styles, attributes = _a.attributes, update = _a.update;
-    return (React.createElement("button", { className: props.className, disabled: props.disabled, onClick: props.onClick, ref: buttonRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+    return (React.createElement("button", { className: props.className, disabled: props.disabled, onClick: props.onClick, ref: buttonRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-label": typeof props.hint === 'string' ? props.hint : undefined },
         React.createElement(Icon, __assign({}, (typeof props.icon === 'string' ? { url: props.icon } : props.icon))),
         buttonRef.current && createPortal(React.createElement(MenuButtonHint, { keys: props.keys, ref: hintRef, styles: styles, attributes: attributes }, props.hint), buttonRef.current)));
 };

package/inputs/Input/Clear.js

@@ -6,7 +6,7 @@ var Clear = function (props) {
     var theme = useTheme();
     var handleClick = function (e) {
         // Stop propagation, or color/date controls will open on click.
-        e.stopPropagation();
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
         props.onClick();
     };
     return (React.createElement(Icon, { size: 17, url: SVG.Icons.Cross, circle: true, color: theme.colors.primary[3], onClick: handleClick }));

package/inputs/Input/Input.d.ts

@@ -129,6 +129,11 @@ interface IInputProps extends ITestable {
      * Listeners are notified when the Input receives focus.
      */
     onFocus?: () => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 declare const Input: {
     (props: IInputProps): React.JSX.Element;

package/inputs/Input/Input.js

@@ -35,8 +35,9 @@ var InputBase = function (props) {
     };
     // When input is cleared, its value is set to NULL.
     var handleClear = function () {
+        var _a;
         setValue("");
-        inputRef.current.focus();
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         if (props.onChange) {
             props.onChange(null);
         }
@@ -57,8 +58,9 @@ var InputBase = function (props) {
     }, []);
     // Handle hotkey check.
     var handleKeyDown = function (e) {
+        var _a, _b;
         // If not the hotkey, then abort.
-        if (e.key.toLowerCase() != props.hotKey.toLowerCase())
+        if (!props.hotKey || e.key.toLowerCase() != props.hotKey.toLowerCase())
             return;
         // Check modifier keys:
         if (props.hotKeyCtrl && !e.ctrlKey)
@@ -68,13 +70,13 @@ var InputBase = function (props) {
         if (props.hotKeyShift && !e.shiftKey)
             return;
         // It's our key. Focus the input.
-        inputRef.current.focus();
-        inputRef.current.select();
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.select();
     };
-    return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, icon: props.icon, iconPosition: props.iconPosition, onClear: (props.clearable && props.value) ? handleClear : null, onToggleReveal: props.revealable ? handleToggleReveal : null, revealed: revealed, unit: props.unit },
+    return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, icon: props.icon, iconPosition: props.iconPosition, onClear: (props.clearable && props.value) ? handleClear : undefined, onToggleReveal: props.revealable ? handleToggleReveal : undefined, revealed: revealed, unit: props.unit, style: props.style },
         React.createElement("input", { "data-testid": props['data-testid'] || "Input", className: props.className, ref: inputRef, tabIndex: props.noTabIndex ? -1 : 0, value: value, placeholder: props.placeholder, disabled: props.disabled, type: props.type == 'password' ? (revealed ? 'text' : 'password') : props.type, maxLength: props.maxLength, autoComplete: props.autocomplete, onChange: handleChange, onFocus: props.onFocus })));
 };
-var InputStyled = styled(InputBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  outline: solid 3px rebeccapurple;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\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\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  ", "\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"], ["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  outline: solid 3px rebeccapurple;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\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\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  ", "\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), p.theme.colors.neutral[50]); });
+var InputStyled = styled(InputBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\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\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  ", "\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"], ["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\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\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  ", "\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), p.theme.colors.neutral[50]); });
 var Input = function (props) { return React.createElement(InputStyled, __assign({}, props)); };
 Input.displayName = 'Input';
 export { Input };

package/inputs/Input/InputWrapper.d.ts

@@ -18,6 +18,8 @@ interface IProps extends ITestable {
      */
     iconPosition?: 'left' | 'right';
     unit?: React.ReactNode;
+    /** Optional inline styles applied to the wrapper's outer element. */
+    style?: React.CSSProperties;
     onClear?: () => void;
     onClick?: () => void;
     revealed?: boolean;

package/inputs/Input/InputWrapper.js

@@ -42,7 +42,7 @@ var InputWrapperBase = function (props) {
     else if (props.icon != null) {
         icon = (React.createElement(Icon, __assign({ size: 17, color: (_a = props.icon.color) !== null && _a !== void 0 ? _a : theme.colors.primary[3] }, props.icon)));
     }
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "InputWrapper", className: props.className, onClick: props.onClick },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "InputWrapper", className: props.className, style: props.style, onClick: props.onClick },
         props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, zIndex: 100 } }),
         icon && !props.ghost && props.iconPosition == 'left' && icon,
         React.createElement(Content, null, props.children),

package/inputs/Input/Reveal.js

@@ -6,7 +6,7 @@ var Reveal = function (props) {
     var theme = useTheme();
     var handleClick = function (e) {
         // Stop propagation, or color/date controls will open on click.
-        e.stopPropagation();
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
         props.onClick();
     };
     return (React.createElement(Icon, { size: 17, url: props.revealed ? SVG.Icons.EyeClosed : SVG.Icons.Eye, color: theme.colors.primary[3], onClick: handleClick }));

package/inputs/MonthRange/Body.d.ts

@@ -23,6 +23,6 @@ interface IProps {
     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>;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never>> & string & Omit<React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>, keyof React.Component<any, {}, any>>;
 export { Body };

package/inputs/MonthRange/Calendar.d.ts

@@ -5,9 +5,9 @@ interface IProps {
     /** Calendar year */
     year: number;
     /** Selected start date */
-    start: Date;
+    start: Date | null;
     /** Selected end date */
-    end: Date;
+    end: Date | null;
     /** Fired when calendar changes year */
     onChangeYear: (year: number) => void;
     /** Fired when month is clicked. */

package/inputs/MonthRange/Calendar.js

@@ -23,10 +23,10 @@ var CalendarBase = function (props) {
     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 $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;
@@ -35,11 +35,8 @@ var CalendarBase = function (props) {
 };
 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 RADIUS = "50%";
+var Month = styled.div(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"])), RADIUS, 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  "])), RADIUS, RADIUS, p.$length ? 0 : RADIUS, p.$length ? 0 : RADIUS); }, 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  "])), RADIUS, RADIUS, p.$length ? 0 : RADIUS, p.$length ? 0 : RADIUS); }, 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

@@ -61,9 +61,15 @@ interface IMonthRangeProps extends ITestable {
      */
     onChange?: (value: [Date, Date] | null) => void;
     /**
-     * Listeners are notified when the `MonthRange` receives focus.
+     * Listeners are notified when the `MonthRange` receives focus (from outside
+     * the component; internal focus moves do not re-fire it).
      */
     onFocus?: () => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A `MonthRange` allows a selection of a time period, measured in months.

package/inputs/MonthRange/MonthRange.js

@@ -32,10 +32,11 @@ import { Selector } from './Selector';
 import { Body } from './Body';
 import { useOutsideClose } from '../../hooks/useOutsideClose';
 var MonthRangeBase = function (props) {
+    var _a;
     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];
+    var _b = React.useState((_a = props.value) !== null && _a !== void 0 ? _a : null), value = _b[0], setValue = _b[1];
+    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
     useOutsideClose({
         open: open,
         refs: [wrapperRef, bodyRef],
@@ -69,7 +70,14 @@ var MonthRangeBase = function (props) {
         if (e.key == 'Escape' && open)
             setOpen(false);
     };
-    var _c = usePopper(wrapperRef.current, bodyRef.current, {
+    var handleFocus = function (e) {
+        if (!props.onFocus)
+            return;
+        // Only notify when focus enters from outside the component.
+        if (!e.currentTarget.contains(e.relatedTarget))
+            props.onFocus();
+    };
+    var _d = usePopper(wrapperRef.current, bodyRef.current, {
         placement: props.direction == 'down' ? 'bottom-start' : 'top-start',
         modifiers: [
             {
@@ -79,9 +87,9 @@ var MonthRangeBase = function (props) {
                 },
             }
         ]
-    }), styles = _c.styles, attributes = _c.attributes, update = _c.update;
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "MonthRange", 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 }),
+    }), styles = _d.styles, attributes = _d.attributes, update = _d.update;
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "MonthRange", tabIndex: -1, className: props.className, style: props.style, onKeyDown: handleKeyDown, onFocus: handleFocus, 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); } : undefined, 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"

package/inputs/MonthRange/Selector.d.ts

@@ -5,7 +5,7 @@ interface IProps {
     /**
      * Current input value.
      */
-    value: [Date, Date];
+    value: [Date, Date] | null;
     /**
      * Marks input as disabled. Disabled inputs cannot be interacted with.
      * @default false

package/inputs/MonthRange/Selector.js

@@ -20,40 +20,41 @@ var Selector = function (props) {
         return (d2.getFullYear() * 12 + d2.getMonth()) - (d1.getFullYear() * 12 + d1.getMonth()) + 1;
     };
     var renderDates = function () {
+        var value = props.value;
         // No selection?
-        if (!hasValue())
+        if (value == null || !Array.isArray(value) || value.length != 2 || value[0] == null || value[1] == null)
             return React.createElement(React.Fragment, null,
                 props.placeholder,
                 "\u00A0");
         // Same year?
-        if (props.value[0].getFullYear() == props.value[1].getFullYear()) {
+        if (value[0].getFullYear() == value[1].getFullYear()) {
             // Same month?
-            if (props.value[0].getMonth() == props.value[1].getMonth()) {
+            if (value[0].getMonth() == value[1].getMonth()) {
                 return React.createElement(React.Fragment, null,
-                    React.createElement(DateTimeFormatter, { type: "month", value: props.value[0] }));
+                    React.createElement(DateTimeFormatter, { type: "month", value: value[0] }));
             }
             else {
                 return React.createElement(React.Fragment, null,
-                    React.createElement(DateTimeFormatter, { type: "month", value: props.value[0] }),
+                    React.createElement(DateTimeFormatter, { type: "month", value: value[0] }),
                     " - ",
-                    React.createElement(DateTimeFormatter, { type: "month", value: props.value[1] }),
+                    React.createElement(DateTimeFormatter, { type: "month", value: value[1] }),
                     props.count && React.createElement("span", null,
                         " (",
-                        monthsDiff(props.value[0], props.value[1]),
+                        monthsDiff(value[0], value[1]),
                         "m)"));
             }
         }
         // Different years:
         return React.createElement(React.Fragment, null,
-            React.createElement(DateTimeFormatter, { type: "month", value: props.value[0] }),
+            React.createElement(DateTimeFormatter, { type: "month", value: value[0] }),
             " - ",
-            React.createElement(DateTimeFormatter, { type: "month", value: props.value[1] }),
+            React.createElement(DateTimeFormatter, { type: "month", value: value[1] }),
             props.count && React.createElement("span", null,
                 " (",
-                monthsDiff(props.value[0], props.value[1]),
+                monthsDiff(value[0], 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' },
+    return (React.createElement(InputWrapper, { fluid: true, error: props.error, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, onClear: (props.clearable && hasValue()) ? props.onClear : undefined, 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]; }); });

package/inputs/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { ITestable } from '../../Types';
+interface IPhoneInputProps extends ITestable {
+    /** @ignore */
+    className?: string;
+    /**
+     * Field name, for use in forms.
+     */
+    name?: string;
+    /**
+     * Current value in E.164 format, e.g. `"+351123456789"`.
+     */
+    value?: string;
+    /**
+     * Notified with the assembled E.164 string whenever the country or number
+     * changes. Receives `''` when the field is cleared.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Country selected for new/empty values, and the country restored when the
+     * field is cleared (ISO 3166-1 alpha-2, e.g. `"GB"`). A country is always
+     * selected, which is why there is no country placeholder.
+     * @default US
+     */
+    defaultCountry?: string;
+    /**
+     * Placeholder shown in the phone-number field when it is empty. The country
+     * field needs no placeholder, as a country is always selected.
+     */
+    placeholder?: string;
+    /**
+     * If set, the phone-number field shows a clear button that empties the
+     * number and resets the country to the default.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Marks the control as disabled. Disabled controls cannot be interacted with.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Shows the control in an error state.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * A fluid control takes up all horizontal space available to it.
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Removes borders and makes the background transparent. Useful when placing
+     * the control inside a `Field`.
+     * @default false
+     */
+    transparent?: boolean;
+    /**
+     * Shows the control in a ghost state, where content is being loaded.
+     * @default false
+     */
+    ghost?: boolean;
+    /**
+     * Locale code for country-name display and sorting (e.g. `"pt"`, `"es"`).
+     * @default en
+     */
+    locale?: string;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * A phone-number input: a searchable country dropdown that supplies the
+ * international dialing prefix, beside a free-text field for the rest of the
+ * number. The value is a single E.164 string (`"+351123456789"`) — the prefix
+ * is never stored separately.
+ *
+ * A country is always selected (default US, configurable via `defaultCountry`),
+ * so there is no country placeholder to translate; the `placeholder` prop
+ * applies to the number field. It satisfies the `Form.Field` control contract (`value` +
+ * `onChange(value)`), so a surrounding `Form.Field` validates the assembled
+ * E.164 string.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <PhoneInput value="+351123456789" onChange={setPhone} clearable/>
+ * ```
+ */
+declare const PhoneInput: {
+    (props: IPhoneInputProps): React.JSX.Element;
+    displayName: string;
+};
+export { PhoneInput };
+export type { IPhoneInputProps };

package/inputs/PhoneInput/PhoneInput.js

@@ -0,0 +1,113 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 from 'styled-components';
+import { Dropdown } from '../Dropdown';
+import { Input } from '../Input';
+import { CountryFormatter } from '../../formatters/CountryFormatter';
+import { Countries } from '../../formatters/CountryFormatter/Countries';
+import { DIAL_BY_ISO, parseE164, assembleE164, digitsOnly } from '../../helper/phoneNumber';
+var ALL_ISO = Object.keys(DIAL_BY_ISO);
+var nameOf = function (iso) { var _a; return (_a = Countries[iso]) !== null && _a !== void 0 ? _a : iso; };
+var strip = function (s) { return s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase(); };
+/**
+ * A phone-number input: a searchable country dropdown that supplies the
+ * international dialing prefix, beside a free-text field for the rest of the
+ * number. The value is a single E.164 string (`"+351123456789"`) — the prefix
+ * is never stored separately.
+ *
+ * A country is always selected (default US, configurable via `defaultCountry`),
+ * so there is no country placeholder to translate; the `placeholder` prop
+ * applies to the number field. It satisfies the `Form.Field` control contract (`value` +
+ * `onChange(value)`), so a surrounding `Form.Field` validates the assembled
+ * E.164 string.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <PhoneInput value="+351123456789" onChange={setPhone} clearable/>
+ * ```
+ */
+var PhoneInput = function (props) {
+    var value = props.value, onChange = props.onChange, _a = props.defaultCountry, defaultCountry = _a === void 0 ? 'US' : _a, clearable = props.clearable, locale = props.locale, placeholder = props.placeholder, disabled = props.disabled, error = props.error, fluid = props.fluid, transparent = props.transparent, ghost = props.ghost, className = props.className, name = props.name, style = props.style;
+    var _b = React.useState(function () { var _a; return (_a = parseE164(value).iso) !== null && _a !== void 0 ? _a : defaultCountry; }), iso = _b[0], setIso = _b[1];
+    var _c = React.useState(function () { return parseE164(value).national; }), national = _c[0], setNational = _c[1];
+    var _d = React.useState(''), query = _d[0], setQuery = _d[1];
+    // Re-sync from an externally-set value (initial load, form reset). During
+    // normal typing the parent value matches our assembled output, so this no-ops
+    // and won't fight the user.
+    React.useEffect(function () {
+        if ((value !== null && value !== void 0 ? value : '') !== assembleE164(iso, national)) {
+            var parsed = parseE164(value);
+            if (parsed.iso)
+                setIso(parsed.iso);
+            setNational(parsed.national);
+        }
+    }, [value]);
+    var sortedIso = React.useMemo(function () { return __spreadArray([], ALL_ISO, true).sort(function (a, b) { return nameOf(a).localeCompare(nameOf(b)); }); }, []);
+    var data = React.useMemo(function () {
+        var q = strip(query);
+        if (!q)
+            return sortedIso;
+        var qDigits = digitsOnly(query);
+        return sortedIso.filter(function (c) { return strip(nameOf(c)).includes(q) || (qDigits !== '' && DIAL_BY_ISO[c].startsWith(qDigits)); });
+    }, [query, sortedIso]);
+    var handleCountry = function (next) {
+        var nextIso = next !== null && next !== void 0 ? next : defaultCountry;
+        setIso(nextIso);
+        onChange === null || onChange === void 0 ? void 0 : onChange(assembleE164(nextIso, national));
+    };
+    var handleNational = function (next) {
+        // The Input's clear button emits null (typing only ever emits a string).
+        // Treat it as "clear the whole control": empty the number and reset the
+        // country to the default.
+        if (next === null) {
+            setIso(defaultCountry);
+            setNational('');
+            onChange === null || onChange === void 0 ? void 0 : onChange('');
+            return;
+        }
+        var digits = digitsOnly(next);
+        setNational(digits);
+        onChange === null || onChange === void 0 ? void 0 : onChange(assembleE164(iso, digits));
+    };
+    return (
+    // Stop clicks bubbling to the Form.Field box wrapper. That wrapper routes
+    // any click to the first child with tabIndex=0 (the Dropdown), which would
+    // otherwise hijack clicks on the number field and force the dropdown open.
+    React.createElement(Wrapper, { "$fluid": fluid, className: className, style: style, "data-testid": props['data-testid'] || "PhoneInput", onClick: function (e) { return e.stopPropagation(); } },
+        React.createElement(Prefix, null,
+            React.createElement(Dropdown, { data: data, value: iso, onChange: handleCountry, onSearch: setQuery, disabled: disabled, error: error, ghost: ghost, transparent: transparent, fluid: true, maxItems: 8, label: function (c) { return (React.createElement(Selected, null,
+                    React.createElement(SelectedCountry, null,
+                        React.createElement(CountryFormatter, { type: "both", value: c, locale: locale })),
+                    React.createElement(Code, null,
+                        "+",
+                        DIAL_BY_ISO[c]))); } },
+                React.createElement(Dropdown.Column, null, function (c) { return (React.createElement(CountryFormatter, { type: "both", value: c, locale: locale })); }),
+                React.createElement(Dropdown.Column, { width: "40px", align: "right" }, function (c) { return (React.createElement(Code, null,
+                    "+",
+                    DIAL_BY_ISO[c])); }))),
+        React.createElement(Number, null,
+            React.createElement(Input, { name: name, value: national, onChange: handleNational, disabled: disabled, error: error, ghost: ghost, transparent: transparent, fluid: true, clearable: clearable, type: "text", autocomplete: "off", placeholder: placeholder }))));
+};
+PhoneInput.displayName = 'PhoneInput';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  width: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  width: ", ";\n"])), function (p) { return (p.$fluid ? '100%' : 'auto'); });
+var Prefix = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  width: 220px;\n"], ["\n  flex: 0 0 auto;\n  width: 220px;\n"])));
+var Number = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  min-width: 0;\n"], ["\n  flex: 1 1 auto;\n  min-width: 0;\n"])));
+var Selected = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  white-space: nowrap;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  white-space: nowrap;\n"])));
+/* Lets the country name ellipsize so the dialing code stays visible. */
+var SelectedCountry = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-width: 0;\n  overflow: hidden;\n"], ["\n  min-width: 0;\n  overflow: hidden;\n"])));
+var Code = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  opacity: 0.7;\n"], ["\n  flex: 0 0 auto;\n  opacity: 0.7;\n"])));
+export { PhoneInput };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/inputs/PhoneInput/index.d.ts

@@ -0,0 +1,2 @@
+export { PhoneInput } from './PhoneInput';
+export type { IPhoneInputProps } from './PhoneInput';

package/inputs/PhoneInput/index.js

@@ -0,0 +1 @@
+export { PhoneInput } from './PhoneInput';

package/inputs/Selector/Selector.d.ts

@@ -26,6 +26,11 @@ interface IProps extends ISelectorProps, ITestable {
      * If set, checkbox has a dark label.
      */
     dark?: boolean;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * A Selector can be used to create either a HTML checkbox or a HTML radio button.

package/inputs/Selector/Selector.js

@@ -30,9 +30,12 @@ import { Checkbox } from './widgets/Checkbox';
 import { Toggle } from './widgets/Toggle';
 import { Circle } from './widgets/Circle';
 var SelectorBase = function (props) {
+    // Holds a boolean for checkboxes, or the selected value for radios.
     var _a = React.useState(props.checked), checked = _a[0], setChecked = _a[1];
     var inputRef = React.useRef(null);
     React.useEffect(function () {
+        if (!inputRef.current)
+            return;
         if (props.indeterminate === true)
             inputRef.current.indeterminate = true;
         if (props.indeterminate === false)
@@ -61,7 +64,7 @@ var SelectorBase = function (props) {
             default: return React.createElement(Checkbox, __assign({}, otherProps));
         }
     };
-    return (React.createElement("label", { "data-testid": props['data-testid'] || "Selector", className: props.className },
+    return (React.createElement("label", { "data-testid": props['data-testid'] || "Selector", className: props.className, style: props.style },
         React.createElement("input", { ref: inputRef, name: props.name, type: props.radio ? "radio" : "checkbox", value: props.value === null ? undefined : props.value, checked: checked === null ? false : checked, disabled: props.disabled, onChange: handleChange }),
         getWidget(),
         React.createElement("span", null, props.label)));