@longline/aqua-ui 1.0.342 → 1.0.344
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/controls/Chip/Chip.d.ts +8 -0
- package/controls/Chip/Chip.js +10 -4
- package/inputs/Input/Input.d.ts +7 -0
- package/inputs/Input/Input.js +1 -1
- package/inputs/Input/InputWrapper.d.ts +7 -0
- package/inputs/Input/InputWrapper.js +2 -2
- package/inputs/Slider/Slider.d.ts +2 -1
- package/package.json +1 -1
package/controls/Chip/Chip.d.ts
CHANGED
|
@@ -19,6 +19,14 @@ interface IChipProps extends ITestable {
|
|
|
19
19
|
* omit the parameter.
|
|
20
20
|
*/
|
|
21
21
|
onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Optional: makes the chip's **content** (everything but the X button)
|
|
24
|
+
* interactive. Triggered when the content is clicked, or when Enter/Space is
|
|
25
|
+
* pressed while the `Chip` has focus — use it for an "edit this chip" action
|
|
26
|
+
* that is distinct from removal (the X button / Delete / Backspace still call
|
|
27
|
+
* `onClick`). When omitted the content is inert, as before.
|
|
28
|
+
*/
|
|
29
|
+
onContentClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
|
|
22
30
|
/**
|
|
23
31
|
* Accessible label for the remove button.
|
|
24
32
|
* @default "Remove chip"
|
package/controls/Chip/Chip.js
CHANGED
|
@@ -38,14 +38,20 @@ var ChipBase = function (props) {
|
|
|
38
38
|
e.stopPropagation();
|
|
39
39
|
props.onClick(e);
|
|
40
40
|
}
|
|
41
|
+
// When the content is interactive, Enter/Space activate it (edit action).
|
|
42
|
+
if (props.onContentClick && (e.key === 'Enter' || e.key === ' ')) {
|
|
43
|
+
e.preventDefault();
|
|
44
|
+
e.stopPropagation();
|
|
45
|
+
props.onContentClick(e);
|
|
46
|
+
}
|
|
41
47
|
};
|
|
42
48
|
return (React.createElement("div", { "data-testid": props['data-testid'] || "Chip", className: props.className, style: props.style, tabIndex: 0, onKeyDown: handleKeyDown, "aria-disabled": props.disabled },
|
|
43
|
-
React.createElement("span", { className: "inner" }, props.children),
|
|
49
|
+
React.createElement("span", { className: "inner", role: props.onContentClick ? "button" : undefined, onClick: props.onContentClick && !props.disabled ? props.onContentClick : undefined }, props.children),
|
|
44
50
|
React.createElement("button", { type: "button", tabIndex: -1, onClick: props.onClick, "aria-label": props.removeLabel, disabled: props.disabled, "aria-disabled": props.disabled },
|
|
45
51
|
React.createElement("svg", null,
|
|
46
52
|
React.createElement("use", { xlinkHref: SVG.Icons.Cross })))));
|
|
47
53
|
};
|
|
48
|
-
var ChipStyled = styled(ChipBase)(
|
|
54
|
+
var ChipStyled = styled(ChipBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n // Dimensions:\n min-width: 80px;\n max-width: 150px;\n width: auto;\n height: 24px;\n padding: 0 3px 0 12px;\n\n // Appearance:\n background-color: ", ";\n border: none;\n color: ", ";\n border-radius: 12px;\n user-select: none;\n outline: none;\n\n display: inline-flex;\n align-items: center;\n gap: 4px; // Gap between content and \"X\".\n margin-right: 2px; \n\n // Spacing from previous Chip.\n & + & {\n margin-left: 2px;\n }\n\n font: ", ";\n\n span.inner {\n flex: 1;\n overflow-x: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n // Inert by default; interactive (clickable \"edit\" target) when onContentClick\n // is supplied \u2014 then it accepts pointer events and shows a pointer cursor.\n pointer-events: ", ";\n ", "\n }\n\n & > button {\n border: none;\n background: transparent;\n outline: none;\n padding: 0;\n margin: 0;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n svg {\n transition: fill ", "ms ease-in-out,\n background-color ", "ms ease-in-out;\n fill: ", ";\n box-sizing: border-box;\n width: 18px;\n height: 18px;\n padding: 2px;\n border-radius: 50%;\n cursor: pointer;\n }\n }\n\n &:focus {\n outline: solid 2px ", ";\n }\n\n // When Chip is hovered, svg is colored.\n &:hover {\n & button > svg {\n background-color: ", ";\n fill: ", ";\n }\n }\n\n & > button svg:active {\n background-color: ", ";\n fill: ", ";\n }\n\n ", "\n"], ["\n // Dimensions:\n min-width: 80px;\n max-width: 150px;\n width: auto;\n height: 24px;\n padding: 0 3px 0 12px;\n\n // Appearance:\n background-color: ", ";\n border: none;\n color: ", ";\n border-radius: 12px;\n user-select: none;\n outline: none;\n\n display: inline-flex;\n align-items: center;\n gap: 4px; // Gap between content and \"X\".\n margin-right: 2px; \n\n // Spacing from previous Chip.\n & + & {\n margin-left: 2px;\n }\n\n font: ", ";\n\n span.inner {\n flex: 1;\n overflow-x: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n // Inert by default; interactive (clickable \"edit\" target) when onContentClick\n // is supplied \u2014 then it accepts pointer events and shows a pointer cursor.\n pointer-events: ", ";\n ", "\n }\n\n & > button {\n border: none;\n background: transparent;\n outline: none;\n padding: 0;\n margin: 0;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n svg {\n transition: fill ", "ms ease-in-out,\n background-color ", "ms ease-in-out;\n fill: ", ";\n box-sizing: border-box;\n width: 18px;\n height: 18px;\n padding: 2px;\n border-radius: 50%;\n cursor: pointer;\n }\n }\n\n &:focus {\n outline: solid 2px ", ";\n }\n\n // When Chip is hovered, svg is colored.\n &:hover {\n & button > svg {\n background-color: ", ";\n fill: ", ";\n }\n }\n\n & > button svg:active {\n background-color: ", ";\n fill: ", ";\n }\n\n ", "\n"
|
|
49
55
|
/**
|
|
50
56
|
* A compact element representing a user input, selection, or filter that can be removed.
|
|
51
57
|
*
|
|
@@ -87,7 +93,7 @@ var ChipStyled = styled(ChipBase)(templateObject_2 || (templateObject_2 = __make
|
|
|
87
93
|
* Adjacent `Chip` siblings are automatically spaced with a small gap.
|
|
88
94
|
* No additional margin styling is needed when placing chips side by side.
|
|
89
95
|
*/
|
|
90
|
-
])), function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.labelSmall; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(
|
|
96
|
+
])), function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.labelSmall; }, function (p) { return p.onContentClick ? 'auto' : 'none'; }, function (p) { return p.onContentClick && !p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: pointer;\n &:hover { text-decoration: underline; }\n "], ["\n cursor: pointer;\n &:hover { text-decoration: underline; }\n "]))); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n pointer-events: none;\n cursor: auto;\n background-color: ", ";\n color: ", ";\n & > button svg {\n fill: ", ";\n }\n "], ["\n pointer-events: none;\n cursor: auto;\n background-color: ", ";\n color: ", ";\n & > button svg {\n fill: ", ";\n }\n "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }); });
|
|
91
97
|
/**
|
|
92
98
|
* A compact element representing a user input, selection, or filter that can be removed.
|
|
93
99
|
*
|
|
@@ -135,4 +141,4 @@ var Chip = function (_a) {
|
|
|
135
141
|
};
|
|
136
142
|
Chip.displayName = "Chip";
|
|
137
143
|
export { Chip };
|
|
138
|
-
var templateObject_1, templateObject_2;
|
|
144
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
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;
|