@longline/aqua-ui 1.0.341 → 1.0.342

package/inputs/Input/Input.d.ts

@@ -129,14 +129,21 @@ interface IInputProps extends ITestable {
      * Listeners are notified when the Input receives focus.
      */
     onFocus?: () => void;
+    /**
+     * Key handler on the underlying input, e.g. for ↑/↓/Enter navigation when the
+     * Input drives a choice list. Receives the raw keyboard event.
+     */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Focus the input on mount.
+     * @default false
+     */
+    autoFocus?: boolean;
     /**
      * 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;
-    displayName: string;
-};
+declare const Input: React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<HTMLInputElement>>;
 export { Input, IInputProps };

package/inputs/Input/Input.js

@@ -16,9 +16,18 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { InputWrapper } from './InputWrapper';
-var InputBase = function (props) {
+var InputBase = React.forwardRef(function (props, forwardedRef) {
     var _a;
     var inputRef = React.useRef(null);
+    // Attach the underlying input to both the internal ref (hotkey/clear focus) and
+    // any ref a consumer forwarded (e.g. to focus the input programmatically).
+    var setRefs = function (el) {
+        inputRef.current = el;
+        if (typeof forwardedRef === 'function')
+            forwardedRef(el);
+        else if (forwardedRef)
+            forwardedRef.current = el;
+    };
     // Current value:
     var _b = React.useState((_a = props.value) !== null && _a !== void 0 ? _a : ""), value = _b[0], setValue = _b[1];
     var _c = React.useState(false), revealed = _c[0], setRevealed = _c[1];
@@ -74,10 +83,11 @@ var InputBase = function (props) {
         (_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 : 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 })));
-};
+        React.createElement("input", { "data-testid": props['data-testid'] || "Input", className: props.className, ref: setRefs, 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, autoFocus: props.autoFocus, onChange: handleChange, onKeyDown: props.onKeyDown, onFocus: props.onFocus })));
+});
+InputBase.displayName = 'InputBase';
 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)); };
+var Input = React.forwardRef(function (props, ref) { return React.createElement(InputStyled, __assign({ ref: ref }, props)); });
 Input.displayName = 'Input';
 export { Input };
 var templateObject_1, templateObject_2;

package/package.json

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