@longline/aqua-ui 1.0.341 → 1.0.343
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/inputs/Input/Input.d.ts
CHANGED
|
@@ -34,6 +34,13 @@ interface IInputProps extends ITestable {
|
|
|
34
34
|
* @default false
|
|
35
35
|
*/
|
|
36
36
|
transparent?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* If set, the input shows a resting border in this (CSS) colour — useful when it
|
|
39
|
+
* sits on a plain background and would otherwise be invisible until focused. The
|
|
40
|
+
* hover / focus / error outline takes over on interaction, so the resting border
|
|
41
|
+
* and the interaction outline are never shown at once.
|
|
42
|
+
*/
|
|
43
|
+
borderColor?: string;
|
|
37
44
|
/**
|
|
38
45
|
* A fluid Input takes up all available horizontal space available to it.
|
|
39
46
|
* @default false
|
|
@@ -129,14 +136,21 @@ interface IInputProps extends ITestable {
|
|
|
129
136
|
* Listeners are notified when the Input receives focus.
|
|
130
137
|
*/
|
|
131
138
|
onFocus?: () => void;
|
|
139
|
+
/**
|
|
140
|
+
* Key handler on the underlying input, e.g. for ↑/↓/Enter navigation when the
|
|
141
|
+
* Input drives a choice list. Receives the raw keyboard event.
|
|
142
|
+
*/
|
|
143
|
+
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
144
|
+
/**
|
|
145
|
+
* Focus the input on mount.
|
|
146
|
+
* @default false
|
|
147
|
+
*/
|
|
148
|
+
autoFocus?: boolean;
|
|
132
149
|
/**
|
|
133
150
|
* Optional inline styles applied to the outer element, for one-off overrides
|
|
134
151
|
* of the default styling.
|
|
135
152
|
*/
|
|
136
153
|
style?: React.CSSProperties;
|
|
137
154
|
}
|
|
138
|
-
declare const Input:
|
|
139
|
-
(props: IInputProps): React.JSX.Element;
|
|
140
|
-
displayName: string;
|
|
141
|
-
};
|
|
155
|
+
declare const Input: React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
142
156
|
export { Input, IInputProps };
|
package/inputs/Input/Input.js
CHANGED
|
@@ -16,9 +16,18 @@ var __assign = (this && this.__assign) || function () {
|
|
|
16
16
|
import * as React from 'react';
|
|
17
17
|
import styled, { css } from 'styled-components';
|
|
18
18
|
import { InputWrapper } from './InputWrapper';
|
|
19
|
-
var InputBase = function (props) {
|
|
19
|
+
var InputBase = React.forwardRef(function (props, forwardedRef) {
|
|
20
20
|
var _a;
|
|
21
21
|
var inputRef = React.useRef(null);
|
|
22
|
+
// Attach the underlying input to both the internal ref (hotkey/clear focus) and
|
|
23
|
+
// any ref a consumer forwarded (e.g. to focus the input programmatically).
|
|
24
|
+
var setRefs = function (el) {
|
|
25
|
+
inputRef.current = el;
|
|
26
|
+
if (typeof forwardedRef === 'function')
|
|
27
|
+
forwardedRef(el);
|
|
28
|
+
else if (forwardedRef)
|
|
29
|
+
forwardedRef.current = el;
|
|
30
|
+
};
|
|
22
31
|
// Current value:
|
|
23
32
|
var _b = React.useState((_a = props.value) !== null && _a !== void 0 ? _a : ""), value = _b[0], setValue = _b[1];
|
|
24
33
|
var _c = React.useState(false), revealed = _c[0], setRevealed = _c[1];
|
|
@@ -73,11 +82,12 @@ var InputBase = function (props) {
|
|
|
73
82
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
74
83
|
(_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.select();
|
|
75
84
|
};
|
|
76
|
-
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 },
|
|
77
|
-
React.createElement("input", { "data-testid": props['data-testid'] || "Input", className: props.className, ref:
|
|
78
|
-
};
|
|
85
|
+
return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, borderColor: props.borderColor, 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 },
|
|
86
|
+
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 })));
|
|
87
|
+
});
|
|
88
|
+
InputBase.displayName = 'InputBase';
|
|
79
89
|
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]); });
|
|
80
|
-
var Input = function (props) { return React.createElement(InputStyled, __assign({}, props)); };
|
|
90
|
+
var Input = React.forwardRef(function (props, ref) { return React.createElement(InputStyled, __assign({ ref: ref }, props)); });
|
|
81
91
|
Input.displayName = 'Input';
|
|
82
92
|
export { Input };
|
|
83
93
|
var templateObject_1, templateObject_2;
|
|
@@ -10,6 +10,13 @@ interface IProps extends ITestable {
|
|
|
10
10
|
error?: boolean;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
transparent?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* If set, the input shows a resting border in this (CSS) colour — useful when
|
|
15
|
+
* the input sits on a plain background and would otherwise be invisible until
|
|
16
|
+
* focused. The hover / focus / error outline takes over on interaction, so the
|
|
17
|
+
* resting border and the interaction outline are never shown at once.
|
|
18
|
+
*/
|
|
19
|
+
borderColor?: string;
|
|
13
20
|
/** Icon props (optional). */
|
|
14
21
|
icon?: string | IIconProps;
|
|
15
22
|
/**
|
|
@@ -53,10 +53,10 @@ var InputWrapperBase = function (props) {
|
|
|
53
53
|
};
|
|
54
54
|
var Unit = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n sup {\n vertical-align: baseline;\n font-size: xx-small;\n line-height: normal;\n } \n"], ["\n font: ", ";\n color: ", ";\n sup {\n vertical-align: baseline;\n font-size: xx-small;\n line-height: normal;\n } \n"])), function (p) { return p.theme.font.dataLarge; }, function (p) { return p.theme.colors.primary[2]; });
|
|
55
55
|
var Content = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n flex: 1;\n overflow-x: hidden;\n"], ["\n position: relative;\n flex: 1;\n overflow-x: hidden;\n"])));
|
|
56
|
-
var InputWrapperStyled = styled(InputWrapperBase)(
|
|
56
|
+
var InputWrapperStyled = styled(InputWrapperBase)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n // Position and size:\n position: relative;\n width: 250px;\n ", "\n box-sizing: border-box;\n z-index: 0;\n ", ";\n\n // Content: \n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ", " {\n ", "\n }\n\n // Appearance:\n transition: border-color ", "ms ease;\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n padding: 7px 11px 7px 11px;\n outline: none;\n cursor: ", ";\n\n // Resting border (drawn as an outline so it never shifts layout). The hover /\n // focus / error rules below use higher-specificity selectors, so they take over\n // and this never doubles up with the interaction outline.\n ", "\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n // Focus:\n &:focus-within {\n outline: solid 2px ", ";\n }\n\n // Error\n ", "\n\n // Disabled\n ", "\n\n // Ghost\n ", "\n\n // Transparent (borderless)\n ", "\n"], ["\n // Position and size:\n position: relative;\n width: 250px;\n ", "\n box-sizing: border-box;\n z-index: 0;\n ", ";\n\n // Content: \n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ", " {\n ", "\n }\n\n // Appearance:\n transition: border-color ", "ms ease;\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n padding: 7px 11px 7px 11px;\n outline: none;\n cursor: ", ";\n\n // Resting border (drawn as an outline so it never shifts layout). The hover /\n // focus / error rules below use higher-specificity selectors, so they take over\n // and this never doubles up with the interaction outline.\n ", "\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n // Focus:\n &:focus-within {\n outline: solid 2px ", ";\n }\n\n // Error\n ", "\n\n // Disabled\n ", "\n\n // Ghost\n ", "\n\n // Transparent (borderless)\n ", "\n"])), function (p) { return p.fluid && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.flex && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["flex: 1"], ["flex: 1"]))); }, Content, function (p) { return p.flex && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 100%;\n "], ["\n height: 100%;\n "]))); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.onClick ? 'pointer' : 'auto'; }, function (p) { return p.borderColor && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n outline: solid 1px ", ";\n "], ["\n outline: solid 1px ", ";\n "])), p.borderColor); }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.error && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:focus-within {\n outline: solid 2px ", ";\n }\n &:hover {\n outline: solid 2px ", ";\n } \n box-shadow: none;\n "], ["\n outline: solid 2px ", ";\n &:focus-within {\n outline: solid 2px ", ";\n }\n &:hover {\n outline: solid 2px ", ";\n } \n box-shadow: none;\n "])), p.theme.colors.negative, p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n outline: solid 2px ", ";\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n user-select: none;\n "], ["\n outline: solid 2px ", ";\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n user-select: none;\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: transparent;\n color: transparent;\n pointer-events: none;\n user-select: none;\n ", " {\n visibility: hidden;\n }\n "], ["\n background-color: transparent;\n color: transparent;\n pointer-events: none;\n user-select: none;\n ", " {\n visibility: hidden;\n }\n "])), Content); }, function (p) { return p.transparent && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n border-width: 0px;\n outline: none !important;\n background-color: transparent;\n "], ["\n border-width: 0px;\n outline: none !important;\n background-color: transparent;\n "]))); });
|
|
57
57
|
var InputWrapper = function (_a) {
|
|
58
58
|
var _b = _a.iconPosition, iconPosition = _b === void 0 ? 'left' : _b, props = __rest(_a, ["iconPosition"]);
|
|
59
59
|
return React.createElement(InputWrapperStyled, __assign({ iconPosition: iconPosition }, props));
|
|
60
60
|
};
|
|
61
61
|
export { InputWrapper };
|
|
62
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
62
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -42,7 +42,8 @@ interface ISliderProps extends ITestable {
|
|
|
42
42
|
delta?: number;
|
|
43
43
|
/**
|
|
44
44
|
* Number of evenly spaced ticks to render along the track. Ticks are also
|
|
45
|
-
* used as snap points when `snapToTicks` is set
|
|
45
|
+
* used as snap points when `snapToTicks` is set, which needs more than one
|
|
46
|
+
* tick to have any effect. `0` renders no ticks.
|
|
46
47
|
* @default 0
|
|
47
48
|
*/
|
|
48
49
|
ticks?: number;
|