@longline/aqua-ui 1.0.342 → 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
|
package/inputs/Input/Input.js
CHANGED
|
@@ -82,7 +82,7 @@ var InputBase = React.forwardRef(function (props, forwardedRef) {
|
|
|
82
82
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
83
83
|
(_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.select();
|
|
84
84
|
};
|
|
85
|
-
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 },
|
|
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
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
87
|
});
|
|
88
88
|
InputBase.displayName = 'InputBase';
|
|
@@ -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;
|