@longline/aqua-ui 1.0.339 → 1.0.340

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

@@ -65,6 +65,11 @@ interface IPhoneInputProps extends ITestable {
      * @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

package/inputs/PhoneInput/PhoneInput.js

@@ -40,7 +40,7 @@ var strip = function (s) { return s.normalize('NFD').replace(/[̀-ͯ]/g, '').toL
  * ```
  */
 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;
+    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];
@@ -86,7 +86,7 @@ var PhoneInput = function (props) {
     // 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, "data-testid": props['data-testid'], onClick: function (e) { return e.stopPropagation(); } },
+    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,

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

package/inputs/Slider/Slider.d.ts

@@ -4,80 +4,133 @@ interface ISliderProps extends ITestable {
     /** @ignore */
     className?: string;
     /**
-     * Current value.
+     * Current (controlled) value. Values outside `min`..`max` are clamped, and
+     * snapped to the nearest tick when `snapToTicks` is set. Changing this prop
+     * repositions the knob.
+     * @default min
      */
     value?: number;
     /**
-     * If set, `Slider` will fill all horizontal space available to it.
+     * If set, `Slider` fills all horizontal space available to it. Otherwise the
+     * control has a fixed minimum width of 200px.
      * @default false
      */
     fluid?: boolean;
     /**
-     * Minimum value.
+     * Minimum value, mapped to the left end of the track.
      * @default 0
      */
     min?: number;
     /**
-     * Maximum value.
+     * Maximum value, mapped to the right end of the track.
      * @default 100
      */
     max?: number;
     /**
-     * If set, `onChange` is called continuously while the slide is being moved.
-     * If not, `onChange` is called only when the slider is released.
+     * If set, `onChange` fires continuously while the knob is being dragged.
+     * If not, `onChange` fires only once, when the knob is released.
+     * Keyboard changes always notify regardless of this setting.
      * @default false
      */
     immediate?: boolean;
     /**
-     * Sets the value change when an arrow key is pressed. If omitted,
-     * `delta` will be 10% of the value range.
+     * Amount the value changes for a single arrow-key press. `PageUp`/`PageDown`
+     * move by three times this amount. If omitted, `delta` defaults to 10% of
+     * the value range (`max - min`). Ignored when `snapToTicks` is set, in which
+     * case each key press moves one tick.
      */
     delta?: number;
     /**
-     * Should ticks be displayed? If so, how many?
+     * Number of evenly spaced ticks to render along the track. Ticks are also
+     * used as snap points when `snapToTicks` is set. `0` or `1` disables ticks.
      * @default 0
      */
     ticks?: number;
     /**
-     * If set, ticks are hidden.
+     * If set, ticks are not rendered even when `ticks` is greater than zero.
+     * Snapping (`snapToTicks`) still uses the tick positions.
+     * @default false
      */
     hideTicks?: boolean;
     /**
-     * Should the control snap to ticks (if present)?
+     * If set, the value snaps to the nearest tick while dragging and on keyboard
+     * input. Has no effect unless `ticks` is greater than 1.
      * @default false
      */
     snapToTicks?: boolean;
     /**
-     * A disabled `Slider` cannot be interacted with.
+     * A disabled `Slider` is greyed out and cannot be interacted with.
+     * @default false
      */
     disabled?: boolean;
     /**
-     * Adds left and right padding.
+     * Adds horizontal (left and right) padding so the knob and value tooltip are
+     * not clipped at the extremes of the track.
+     * @default false
      */
     padded?: boolean;
     /**
-     * A `Slider` can be in an `error` state.
+     * Shows the `Slider` in an error state (track, fill and knob turn red).
+     * @default false
      */
     error?: boolean;
     /**
-     * Custom text color
+     * Custom color for the value label shown in the knob's teardrop. Defaults to
+     * the theme's primary color.
      */
     color?: string;
     /**
-     * An optional formatter that takes the current slider value (a number)
-     * and returns a string. This can be used to divide values by 100,
-     * for example.
+     * Optional formatter that takes the current value (a number) and returns the
+     * string shown in the knob's teardrop tooltip and exposed as the ARIA value
+     * text. Useful to add units or rescale — e.g. dividing by 100 to show a
+     * fraction, or appending `"%"` or `"px"`.
      */
     formatter?: (value: number) => string;
     /**
-     * Event is triggered when slider's value changes.
+     * Called with the new value when it changes. Fires on release by default, or
+     * continuously during a drag when `immediate` is set; keyboard changes always
+     * notify.
      */
     onChange?: (value: number) => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
- * Sliders allow users to view and select a value (or range) along a track.
- * They're ideal for adjusting settings such as volume and brightness, or for
- * applying image filters.
+ * A `Slider` lets users view and pick a single numeric value along a horizontal
+ * track by dragging the knob or using the keyboard. It's ideal for adjusting
+ * settings such as volume or brightness, or for applying image filters.
+ *
+ * The value is bounded by `min`/`max` (default `0`..`100`) and can optionally
+ * snap to evenly spaced `ticks`. A `formatter` controls how the value is
+ * rendered in the knob's tooltip. By default `onChange` fires once, on release;
+ * set `immediate` to be notified continuously while dragging.
+ *
+ * The control is keyboard-accessible: arrow keys move by `delta`,
+ * `PageUp`/`PageDown` move by three times `delta`, and `Home`/`End` jump to the
+ * minimum/maximum. It exposes the `role="slider"` ARIA contract, keeping
+ * `aria-valuenow`/`aria-valuetext` in sync as the value changes.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic, controlled
+ * <Slider value={volume} onChange={setVolume}/>
+ *
+ * // Custom range, notified while dragging
+ * <Slider min={0} max={10} value={rating} immediate onChange={setRating}/>
+ *
+ * // Ticks with snapping and a formatted tooltip
+ * <Slider
+ *   ticks={5}
+ *   snapToTicks
+ *   value={amount}
+ *   formatter={v => `${v}%`}
+ *   onChange={setAmount}
+ * />
+ * ```
  */
 declare const Slider: {
     ({ min, max, fluid, ...props }: ISliderProps): React.JSX.Element;

package/inputs/Slider/Slider.js

@@ -26,11 +26,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled, { css, keyframes } from 'styled-components';
+// Default value range, shared by the base and the export wrapper.
+var DEFAULT_MIN = 0;
+var DEFAULT_MAX = 100;
 var SliderBase = function (props) {
+    var _a, _b, _c, _d;
+    // Defaults supplied by the export wrapper below.
+    var min = (_a = props.min) !== null && _a !== void 0 ? _a : DEFAULT_MIN;
+    var max = (_b = props.max) !== null && _b !== void 0 ? _b : DEFAULT_MAX;
     // Current value. This is not the same as props.value: it is the value
     // while the knob is being dragged. Upon release, this value is called back
     // with onChange. Or continuously, if `immediate` is set.
-    var value = React.useRef(props.value);
+    var value = React.useRef((_c = props.value) !== null && _c !== void 0 ? _c : min);
+    // Reference: outer (focusable) element, used to keep ARIA value in sync.
+    var wrapperRef = React.useRef(null);
     // Reference: track body
     var trackRef = React.useRef(null);
     // Reference: track fill.
@@ -54,20 +63,29 @@ var SliderBase = function (props) {
         if (!props.ticks || props.ticks <= 1)
             return value;
         // If ticks are present, then clamp x-position to ticks:
-        var section = (props.max - props.min) / (props.ticks - 1);
-        return Math.round((value - props.min) / section) * section + props.min;
+        var section = (max - min) / (props.ticks - 1);
+        return Math.round((value - min) / section) * section + min;
     };
     //
     // Change current value. If notify is set, also call onChange.
     //
     var setValue = function (v, notify) {
-        value.current = Math.round(snapToTicks(clamp(v, props.min, props.max)));
+        value.current = Math.round(snapToTicks(clamp(v, min, max)));
         // Calculate position in 0..1 range:
-        var pos = (value.current - props.min) / (props.max - props.min);
+        var pos = (value.current - min) / (max - min);
         // Set knob position as a percentage:
-        knobRef.current.style.left = "".concat(pos * 100, "%");
-        trackFillRef.current.style.width = "".concat(pos * 100, "%");
-        tearValueRef.current.textContent = props.formatter ? props.formatter(value.current) : value.current.toString();
+        if (knobRef.current)
+            knobRef.current.style.left = "".concat(pos * 100, "%");
+        if (trackFillRef.current)
+            trackFillRef.current.style.width = "".concat(pos * 100, "%");
+        if (tearValueRef.current)
+            tearValueRef.current.textContent = props.formatter ? props.formatter(value.current) : value.current.toString();
+        // Keep the ARIA value in sync (the control updates imperatively while dragging).
+        if (wrapperRef.current) {
+            wrapperRef.current.setAttribute('aria-valuenow', String(value.current));
+            if (props.formatter)
+                wrapperRef.current.setAttribute('aria-valuetext', props.formatter(value.current));
+        }
         if (notify && props.onChange)
             props.onChange(value.current);
     };
@@ -75,17 +93,18 @@ var SliderBase = function (props) {
     var getDelta = function () {
         // If ticks are present and snapToTicks is on, then snap to ticks:
         if (props.snapToTicks && props.ticks && props.ticks > 1) {
-            return (props.max - props.min) / (props.ticks - 1);
+            return (max - min) / (props.ticks - 1);
         }
         // If a custom delta was specified, use it:
         if (props.delta)
             return props.delta;
         // If no custom delta was specified, then use 10% of value range:
-        return (props.max - props.min) / 10;
+        return (max - min) / 10;
     };
     // When the value or the range changes, reposition the knob.
     React.useEffect(function () {
-        setValue(props.value);
+        var _a;
+        setValue((_a = props.value) !== null && _a !== void 0 ? _a : min);
     }, [props.value, props.min, props.max, props.ticks, props.snapToTicks]);
     // Mouseup and mousemove and document-wide events. They are only relevant
     // when dragging is on.
@@ -98,11 +117,13 @@ var SliderBase = function (props) {
         };
     });
     var handleMouseEvent = function (clientX) {
+        if (!trackRef.current)
+            return;
         var rect = trackRef.current.getBoundingClientRect();
         // Calculate x-position in range 0..1:
         var x = clamp((clientX - rect.left) / trackRef.current.offsetWidth, 0, 1);
         // Derive value from x-position:
-        var v = Math.round((props.max - props.min) * x + props.min);
+        var v = Math.round((max - min) * x + min);
         // Set new value. If props.immediate, then call onChange immediately.
         setValue(v, props.immediate);
     };
@@ -126,6 +147,9 @@ var SliderBase = function (props) {
         }
     };
     var handleKeyDown = function (e) {
+        // Prevent the page from scrolling on keys the slider consumes.
+        if (['ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown'].includes(e.key))
+            e.preventDefault();
         switch (e.key) {
             case 'ArrowLeft':
                 setValue(value.current - getDelta(), true);
@@ -135,11 +159,11 @@ var SliderBase = function (props) {
                 break;
             // Home moves to minimum:
             case "Home":
-                setValue(props.min, true);
+                setValue(min, true);
                 break;
             // End moves to maximum.
             case "End":
-                setValue(props.max, true);
+                setValue(max, true);
                 break;
             // PageUp/PageDown take 3x size steps:
             case "PageUp":
@@ -154,7 +178,7 @@ var SliderBase = function (props) {
         // Create a number of ticks and return them.
         return Array(props.ticks).fill(0).map(function (t, idx) { return React.createElement(Tick, { key: idx }); });
     };
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "Slider", className: props.className, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, tabIndex: 0 },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Slider", className: props.className, style: props.style, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, tabIndex: 0, ref: wrapperRef, role: "slider", "aria-orientation": "horizontal", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": (_d = props.value) !== null && _d !== void 0 ? _d : min, "aria-disabled": props.disabled },
         React.createElement(Track, { ref: trackRef },
             React.createElement(TrackFill, { "$disabled": props.disabled, "$error": props.error, ref: trackFillRef }),
             props.ticks && props.hideTicks != true && renderTicks(),
@@ -179,18 +203,76 @@ var TrackFill = styled.div(templateObject_16 || (templateObject_16 = __makeTempl
 var Track = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: relative;\n  height: 4px;\n  border-radius: 2px;\n  box-sizing: border-box;\n  background-color: ", ";\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-top: 1px;\n  padding-left: 2px;\n  padding-right: 2px;\n"], ["\n  position: relative;\n  height: 4px;\n  border-radius: 2px;\n  box-sizing: border-box;\n  background-color: ", ";\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-top: 1px;\n  padding-left: 2px;\n  padding-right: 2px;\n"])), function (p) { return p.theme.colors.primary[5]; });
 var SliderStyled = styled(SliderBase)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  position: relative;\n  min-width: ", ";\n  box-sizing: border-box;\n  // Padding above and below to capture mouse-down\n  padding-top: 52px;\n  padding-bottom: 14px;\n  ", "\n  cursor: ", ";\n  user-select: none;\n  outline: none;\n  ", "\n\n  ", "\n"], ["\n  position: relative;\n  min-width: ", ";\n  box-sizing: border-box;\n  // Padding above and below to capture mouse-down\n  padding-top: 52px;\n  padding-bottom: 14px;\n  ", "\n  cursor: ", ";\n  user-select: none;\n  outline: none;\n  ", "\n\n  ", "\n"
     /**
-     * Sliders allow users to view and select a value (or range) along a track.
-     * They're ideal for adjusting settings such as volume and brightness, or for
-     * applying image filters.
+     * A `Slider` lets users view and pick a single numeric value along a horizontal
+     * track by dragging the knob or using the keyboard. It's ideal for adjusting
+     * settings such as volume or brightness, or for applying image filters.
+     *
+     * The value is bounded by `min`/`max` (default `0`..`100`) and can optionally
+     * snap to evenly spaced `ticks`. A `formatter` controls how the value is
+     * rendered in the knob's tooltip. By default `onChange` fires once, on release;
+     * set `immediate` to be notified continuously while dragging.
+     *
+     * The control is keyboard-accessible: arrow keys move by `delta`,
+     * `PageUp`/`PageDown` move by three times `delta`, and `Home`/`End` jump to the
+     * minimum/maximum. It exposes the `role="slider"` ARIA contract, keeping
+     * `aria-valuenow`/`aria-valuetext` in sync as the value changes.
+     *
+     * ## Usage
+     *
+     * ```tsx
+     * // Basic, controlled
+     * <Slider value={volume} onChange={setVolume}/>
+     *
+     * // Custom range, notified while dragging
+     * <Slider min={0} max={10} value={rating} immediate onChange={setRating}/>
+     *
+     * // Ticks with snapping and a formatted tooltip
+     * <Slider
+     *   ticks={5}
+     *   snapToTicks
+     *   value={amount}
+     *   formatter={v => `${v}%`}
+     *   onChange={setAmount}
+     * />
+     * ```
      */
 ])), function (p) { return p.fluid == true ? '100%' : '200px'; }, function (p) { return p.padded && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    padding-left: 20px;\n    padding-right: 20px;\n  "], ["\n    padding-left: 20px;\n    padding-right: 20px;\n  "]))); }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.disabled && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    pointer-events: none;\n  "], ["\n    pointer-events: none;\n  "]))); }, function (p) { return !p.disabled && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    // Focus ring:\n    &:focus ", ":before {\n      animation: ", " 2s linear infinite;\n    }\n\n    &:hover ", ":before {\n      animation: none;\n      opacity: 0.7;\n    }    \n\n    // Active focus ring:\n    &:active ", ":before {\n      animation: none;\n      opacity: 1;\n    }\n  "], ["\n    // Focus ring:\n    &:focus ", ":before {\n      animation: ", " 2s linear infinite;\n    }\n\n    &:hover ", ":before {\n      animation: none;\n      opacity: 0.7;\n    }    \n\n    // Active focus ring:\n    &:active ", ":before {\n      animation: none;\n      opacity: 1;\n    }\n  "])), Knob, Pulse, Knob, Knob); });
 /**
- * Sliders allow users to view and select a value (or range) along a track.
- * They're ideal for adjusting settings such as volume and brightness, or for
- * applying image filters.
+ * A `Slider` lets users view and pick a single numeric value along a horizontal
+ * track by dragging the knob or using the keyboard. It's ideal for adjusting
+ * settings such as volume or brightness, or for applying image filters.
+ *
+ * The value is bounded by `min`/`max` (default `0`..`100`) and can optionally
+ * snap to evenly spaced `ticks`. A `formatter` controls how the value is
+ * rendered in the knob's tooltip. By default `onChange` fires once, on release;
+ * set `immediate` to be notified continuously while dragging.
+ *
+ * The control is keyboard-accessible: arrow keys move by `delta`,
+ * `PageUp`/`PageDown` move by three times `delta`, and `Home`/`End` jump to the
+ * minimum/maximum. It exposes the `role="slider"` ARIA contract, keeping
+ * `aria-valuenow`/`aria-valuetext` in sync as the value changes.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic, controlled
+ * <Slider value={volume} onChange={setVolume}/>
+ *
+ * // Custom range, notified while dragging
+ * <Slider min={0} max={10} value={rating} immediate onChange={setRating}/>
+ *
+ * // Ticks with snapping and a formatted tooltip
+ * <Slider
+ *   ticks={5}
+ *   snapToTicks
+ *   value={amount}
+ *   formatter={v => `${v}%`}
+ *   onChange={setAmount}
+ * />
+ * ```
  */
 var Slider = function (_a) {
-    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.fluid, fluid = _d === void 0 ? false : _d, props = __rest(_a, ["min", "max", "fluid"]);
+    var _b = _a.min, min = _b === void 0 ? DEFAULT_MIN : _b, _c = _a.max, max = _c === void 0 ? DEFAULT_MAX : _c, _d = _a.fluid, fluid = _d === void 0 ? false : _d, props = __rest(_a, ["min", "max", "fluid"]);
     return React.createElement(SliderStyled, __assign({ min: min, max: max, fluid: fluid }, props));
 };
 Slider.displayName = 'Slider';

package/inputs/Textarea/Textarea.d.ts

@@ -1,10 +1,5 @@
 import * as React from 'react';
 import { ITestable } from '../../Types';
-/**
- * Textarea validates itself using the HTML validation API whenever its
- * content changes. Listeners can use onValidate to obtain the resulting
- * ValidityState.
- */
 interface ITextareaProps extends ITestable {
     /** @ignore */
     className?: string;
@@ -70,6 +65,11 @@ interface ITextareaProps extends ITestable {
      * Listeners are notified whenever the user interacts with the Textarea.
      */
     onChange?: (value: any) => void;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * `Textarea` encapsulated and styles the `<textarea>` element. Like `Input`,