@longline/aqua-ui 1.0.343 → 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/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;
|