@revikornmann/muka-ui 0.13.0 → 0.15.0
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/dist/cjs/components/ChatMessage/ChatMessage.css +13 -17
- package/dist/cjs/components/ChatMessage/ChatMessage.js +12 -15
- package/dist/cjs/components/ChatMessage/ChatMessage.js.map +1 -1
- package/dist/cjs/components/Input/Input.js +8 -6
- package/dist/cjs/components/Input/Input.js.map +1 -1
- package/dist/cjs/components/LicensePlateInput/LicensePlateInput.js +10 -5
- package/dist/cjs/components/LicensePlateInput/LicensePlateInput.js.map +1 -1
- package/dist/cjs/components/NumberInput/NumberInput.js +6 -4
- package/dist/cjs/components/NumberInput/NumberInput.js.map +1 -1
- package/dist/cjs/components/SearchInput/SearchInput.js +15 -5
- package/dist/cjs/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/cjs/components/Textarea/Textarea.js +5 -4
- package/dist/cjs/components/Textarea/Textarea.js.map +1 -1
- package/dist/cjs/utils/accessibility.js +14 -0
- package/dist/cjs/utils/accessibility.js.map +1 -1
- package/dist/esm/components/ChatMessage/ChatMessage.css +13 -17
- package/dist/esm/components/ChatMessage/ChatMessage.js +12 -15
- package/dist/esm/components/ChatMessage/ChatMessage.js.map +1 -1
- package/dist/esm/components/Input/Input.js +8 -6
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/LicensePlateInput/LicensePlateInput.js +10 -5
- package/dist/esm/components/LicensePlateInput/LicensePlateInput.js.map +1 -1
- package/dist/esm/components/NumberInput/NumberInput.js +6 -4
- package/dist/esm/components/NumberInput/NumberInput.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +15 -5
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Textarea/Textarea.js +5 -4
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/utils/accessibility.js +13 -0
- package/dist/esm/utils/accessibility.js.map +1 -1
- package/dist/styles/components/ChatMessage.css +13 -17
- package/dist/styles/index.css +1157 -1161
- package/dist/styles/muka-dark.css +1157 -1161
- package/dist/styles/muka-light.css +1157 -1161
- package/dist/styles/wireframe-dark.css +1157 -1161
- package/dist/styles/wireframe-light.css +1157 -1161
- package/dist/types/components/ChatMessage/ChatMessage.d.ts +7 -10
- package/dist/types/components/ChatMessage/ChatMessage.d.ts.map +1 -1
- package/dist/types/components/Input/Input.d.ts +4 -2
- package/dist/types/components/Input/Input.d.ts.map +1 -1
- package/dist/types/components/LicensePlateInput/LicensePlateInput.d.ts +2 -2
- package/dist/types/components/LicensePlateInput/LicensePlateInput.d.ts.map +1 -1
- package/dist/types/components/NumberInput/NumberInput.d.ts +2 -2
- package/dist/types/components/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/types/components/SearchInput/SearchInput.d.ts +2 -2
- package/dist/types/components/SearchInput/SearchInput.d.ts.map +1 -1
- package/dist/types/components/Textarea/Textarea.d.ts +2 -2
- package/dist/types/components/Textarea/Textarea.d.ts.map +1 -1
- package/dist/types/utils/accessibility.d.ts +10 -0
- package/dist/types/utils/accessibility.d.ts.map +1 -1
- package/package.json +2 -1
|
@@ -22,11 +22,6 @@
|
|
|
22
22
|
grid-template-areas: 'rail bubble';
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
.muka-chat-message--own.muka-chat-message--has-avatar .muka-chat-message__row {
|
|
26
|
-
grid-template-columns: minmax(0, 1fr) auto;
|
|
27
|
-
grid-template-areas: 'bubble rail';
|
|
28
|
-
}
|
|
29
|
-
|
|
30
25
|
.muka-chat-message__rail {
|
|
31
26
|
grid-area: rail;
|
|
32
27
|
/* Sits on the bubble's baseline (Figma 5355:44091) */
|
|
@@ -61,6 +56,12 @@
|
|
|
61
56
|
|
|
62
57
|
.muka-chat-message__bubble {
|
|
63
58
|
grid-area: bubble;
|
|
59
|
+
/*
|
|
60
|
+
* Width follows the content: a single line hugs, and once the text wraps the
|
|
61
|
+
* bubble fills to the shared max width. Robust to string or rich children —
|
|
62
|
+
* no length measuring needed (Figma `Text length` on 5355:44091).
|
|
63
|
+
*/
|
|
64
|
+
width: fit-content;
|
|
64
65
|
max-width: var(--chatbubble-max-width);
|
|
65
66
|
position: relative;
|
|
66
67
|
display: flex;
|
|
@@ -73,18 +74,11 @@
|
|
|
73
74
|
word-break: break-word;
|
|
74
75
|
}
|
|
75
76
|
|
|
76
|
-
/*
|
|
77
|
-
|
|
78
|
-
* content, long ones fill the row up to the shared max width.
|
|
79
|
-
*/
|
|
80
|
-
.muka-chat-message--long .muka-chat-message__bubble {
|
|
77
|
+
/* Media, an embed or an action stack always run the full bubble width. */
|
|
78
|
+
.muka-chat-message--has-blocks .muka-chat-message__bubble {
|
|
81
79
|
width: 100%;
|
|
82
80
|
}
|
|
83
81
|
|
|
84
|
-
.muka-chat-message--short .muka-chat-message__bubble {
|
|
85
|
-
width: fit-content;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
82
|
.muka-chat-message--own .muka-chat-message__bubble {
|
|
89
83
|
justify-self: end;
|
|
90
84
|
}
|
|
@@ -262,10 +256,12 @@
|
|
|
262
256
|
}
|
|
263
257
|
|
|
264
258
|
/*
|
|
265
|
-
*
|
|
266
|
-
*
|
|
259
|
+
* When the last block in the body is media, an embed or an action stack (not
|
|
260
|
+
* trailing text), it runs the full width, so reserve a line below for the inset
|
|
261
|
+
* timestamp. A message that ends in text clears the corner inline instead (see
|
|
262
|
+
* `__message` padding-right above), so it needs no extra bottom space.
|
|
267
263
|
*/
|
|
268
|
-
.muka-chat-message--has-timestamp.muka-chat-message--
|
|
264
|
+
.muka-chat-message--has-timestamp.muka-chat-message--trailing-block .muka-chat-message__body {
|
|
269
265
|
padding-bottom: var(--text-body-xs-regular-lineHeight);
|
|
270
266
|
}
|
|
271
267
|
|
|
@@ -10,11 +10,6 @@ const Menu_1 = require("../Menu");
|
|
|
10
10
|
const ActionSheet_1 = require("../ActionSheet");
|
|
11
11
|
const useLongPress_1 = require("../../utils/useLongPress");
|
|
12
12
|
require("./ChatMessage.css");
|
|
13
|
-
/**
|
|
14
|
-
* Messages at or below this many characters hug their content; longer ones fill
|
|
15
|
-
* the available width (Figma `Text length` axis on `5355:44091`).
|
|
16
|
-
*/
|
|
17
|
-
const SHORT_MESSAGE_MAX_LENGTH = 100;
|
|
18
13
|
/**
|
|
19
14
|
* Set by `ChatMessageStack` so its children inherit the author without every
|
|
20
15
|
* message repeating it. Exported for the stack; not part of the public API.
|
|
@@ -32,7 +27,7 @@ exports.ChatMessageVariantContext = (0, react_1.createContext)(null);
|
|
|
32
27
|
* live behind one options menu: a dropdown revealed on hover on pointer
|
|
33
28
|
* devices, and a bottom sheet opened by long-pressing the bubble on touch.
|
|
34
29
|
*/
|
|
35
|
-
const ChatMessage = ({ variant, children,
|
|
30
|
+
const ChatMessage = ({ variant, children, avatar, reserveAvatar = false, author, authorMeta, badge, timestamp, media, embed, onEmbedCopy, embedCopyLabel = 'Copy', actionStack, onCopy, copyLabel = 'Copy', onFeedback, feedback = null, feedbackUpLabel = 'Helpful', feedbackDownLabel = 'Not helpful', onRefresh, refreshLabel = 'Regenerate', menuItems, menuLabel = 'Message options', menuCancelLabel = 'Cancel', className = '', }) => {
|
|
36
31
|
const [menuOpen, setMenuOpen] = (0, react_1.useState)(false);
|
|
37
32
|
const [sheetOpen, setSheetOpen] = (0, react_1.useState)(false);
|
|
38
33
|
// The trigger is revealed on hover, so focus must not linger on it after a
|
|
@@ -45,13 +40,15 @@ const ChatMessage = ({ variant, children, length = 'auto', avatar, reserveAvatar
|
|
|
45
40
|
// The visibility badge hangs off the author line, so it goes when the author does.
|
|
46
41
|
const showBadge = Boolean(author && badge);
|
|
47
42
|
const hasHeader = Boolean(author || authorMeta || showBadge);
|
|
48
|
-
|
|
43
|
+
// `own` never shows an avatar, so it never reserves the rail either.
|
|
44
|
+
const hasRail = resolvedVariant !== 'own' && Boolean(avatar || reserveAvatar);
|
|
49
45
|
const hasBlocks = Boolean(media || embed || actionStack);
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
46
|
+
// The inset timestamp needs a clear bottom-right corner. When the last block
|
|
47
|
+
// in the body is text it reserves that space inline (see `__message`
|
|
48
|
+
// padding-right); when it is media/embed/action-stack, the body reserves a
|
|
49
|
+
// line below instead. Render order is media → text → embed → action-stack.
|
|
50
|
+
const hasText = typeof children === 'string' ? children.trim().length > 0 : Boolean(children);
|
|
51
|
+
const trailingBlock = Boolean(actionStack || embed || (media && !hasText));
|
|
55
52
|
const items = (0, react_1.useMemo)(() => {
|
|
56
53
|
const resolved = [];
|
|
57
54
|
if (onCopy) {
|
|
@@ -107,11 +104,11 @@ const ChatMessage = ({ variant, children, length = 'auto', avatar, reserveAvatar
|
|
|
107
104
|
const classes = [
|
|
108
105
|
'muka-chat-message',
|
|
109
106
|
`muka-chat-message--${resolvedVariant}`,
|
|
110
|
-
`muka-chat-message--${resolvedLength}`,
|
|
111
107
|
hasRail && 'muka-chat-message--has-avatar',
|
|
112
108
|
hasMenu && 'muka-chat-message--has-menu',
|
|
113
109
|
timestamp && 'muka-chat-message--has-timestamp',
|
|
114
110
|
hasBlocks && 'muka-chat-message--has-blocks',
|
|
111
|
+
trailingBlock && 'muka-chat-message--trailing-block',
|
|
115
112
|
menuOpen && 'muka-chat-message--menu-open',
|
|
116
113
|
!hasHeader && 'muka-chat-message--no-header',
|
|
117
114
|
className,
|
|
@@ -121,14 +118,14 @@ const ChatMessage = ({ variant, children, length = 'auto', avatar, reserveAvatar
|
|
|
121
118
|
// Grouped messages set `reserveAvatar` to keep the rail — and so the bubbles —
|
|
122
119
|
// aligned with the one message in the stack that draws the avatar.
|
|
123
120
|
const rail = hasRail ? ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message__rail", children: avatar })) : null;
|
|
124
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: classes, "data-variant": resolvedVariant,
|
|
121
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: classes, "data-variant": resolvedVariant, children: [(0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-message__row", children: [rail, (0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-message__bubble", ...(hasMenu ? longPress : {}), children: [hasHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-message__header", children: [author && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-message__author", children: author })), authorMeta && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-message__author-meta", children: authorMeta })), showBadge && (0, jsx_runtime_1.jsx)("span", { className: "muka-chat-message__badge", children: badge })] })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-message__body", children: [media && (0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message__media", children: media }), (0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message__message", children: children }), embed && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-chat-message__embed", children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message__embed-content", children: embed }), onEmbedCopy && ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message__embed-copy", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "muted", size: "md", iconOnly: true, type: "button", "aria-label": embedCopyLabel, onClick: onEmbedCopy, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "file-copy", size: "sm" }) }) }))] })), actionStack && ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message__action-stack", children: actionStack }))] }), timestamp && ((0, jsx_runtime_1.jsx)("span", { className: "muka-chat-message__timestamp muka-chat-message__timestamp--inset", children: timestamp })), hasMenu && ((0, jsx_runtime_1.jsx)("div", { className: "muka-chat-message__menu", children: (0, jsx_runtime_1.jsxs)(Menu_1.Menu, { open: menuOpen, onOpenChange: setMenuOpen, children: [(0, jsx_runtime_1.jsx)(Menu_1.MenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "sm", iconOnly: true, type: "button", "aria-label": menuLabel, onPointerDown: () => {
|
|
125
122
|
openedWithKeyboard.current = false;
|
|
126
123
|
}, onKeyDown: () => {
|
|
127
124
|
openedWithKeyboard.current = true;
|
|
128
125
|
}, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-down-s", size: "xs" }) }) }), (0, jsx_runtime_1.jsx)(Menu_1.MenuContent, { align: "end", onCloseAutoFocus: (event) => {
|
|
129
126
|
if (!openedWithKeyboard.current)
|
|
130
127
|
event.preventDefault();
|
|
131
|
-
}, children: items.map((item) => item.checked === undefined ? ((0, jsx_runtime_1.jsx)(Menu_1.MenuItem, { icon: item.icon, destructive: item.destructive, disabled: item.disabled, onSelect: item.onSelect, children: item.label }, item.id)) : ((0, jsx_runtime_1.jsx)(Menu_1.MenuCheckboxItem, { checked: item.checked, disabled: item.disabled, icon: item.icon, onCheckedChange: item.onSelect, children: item.label }, item.id))) })] }) }))] })
|
|
128
|
+
}, children: items.map((item) => item.checked === undefined ? ((0, jsx_runtime_1.jsx)(Menu_1.MenuItem, { icon: item.icon, destructive: item.destructive, disabled: item.disabled, onSelect: item.onSelect, children: item.label }, item.id)) : ((0, jsx_runtime_1.jsx)(Menu_1.MenuCheckboxItem, { checked: item.checked, disabled: item.disabled, icon: item.icon, onCheckedChange: item.onSelect, children: item.label }, item.id))) })] }) }))] })] }), hasMenu && ((0, jsx_runtime_1.jsx)(ActionSheet_1.ActionSheet, { open: sheetOpen, onOpenChange: setSheetOpen, title: menuLabel, cancel: { label: menuCancelLabel }, actions: items.map((item) => ({
|
|
132
129
|
label: item.label,
|
|
133
130
|
icon: item.icon,
|
|
134
131
|
onClick: item.onSelect,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatMessage.js","sourceRoot":"","sources":["../../../../components/ChatMessage/ChatMessage.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,iCAAoF;AACpF,sCAAmC;AACnC,kCAA+B;AAC/B,kCAAqF;AACrF,gDAA6C;AAC7C,2DAAwD;AACxD,6BAA2B;
|
|
1
|
+
{"version":3,"file":"ChatMessage.js","sourceRoot":"","sources":["../../../../components/ChatMessage/ChatMessage.tsx"],"names":[],"mappings":"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"}
|
|
@@ -37,6 +37,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
37
37
|
exports.Input = void 0;
|
|
38
38
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
39
39
|
const react_1 = __importStar(require("react"));
|
|
40
|
+
const accessibility_1 = require("../../utils/accessibility");
|
|
40
41
|
require("./Input.css");
|
|
41
42
|
/**
|
|
42
43
|
* Input Component
|
|
@@ -56,17 +57,17 @@ require("./Input.css");
|
|
|
56
57
|
* - text.input.{size}
|
|
57
58
|
* - text.label.{size}.semibold
|
|
58
59
|
*/
|
|
59
|
-
exports.Input = react_1.default.forwardRef(function Input({ value, onChange, placeholder, label, helperText, error = false, errorMessage, disabled = false, size = 'md', type = 'text', iconLeft, iconRight, fullWidth = false, className = '', name, required = false, readOnly = false, onBlur, onFocus, ...
|
|
60
|
+
exports.Input = react_1.default.forwardRef(function Input({ value, onChange, placeholder, label, helperText, error = false, errorMessage, disabled = false, size = 'md', type = 'text', iconLeft, iconRight, fullWidth = false, className = '', name, required = false, readOnly = false, onBlur, onFocus, id, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, onKeyDownCapture, ...rest }, forwardedRef) {
|
|
60
61
|
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
|
|
61
62
|
const inputRef = (0, react_1.useRef)(null);
|
|
62
63
|
const generatedId = (0, react_1.useId)();
|
|
63
|
-
const inputId = name || generatedId;
|
|
64
|
+
const inputId = id || name || generatedId;
|
|
64
65
|
const helperTextId = `${inputId}-helper`;
|
|
65
66
|
const errorMessageId = `${inputId}-error`;
|
|
66
67
|
const hasLeftIcon = Boolean(iconLeft);
|
|
67
68
|
const hasRightIcon = Boolean(iconRight);
|
|
68
69
|
const showError = error && errorMessage;
|
|
69
|
-
const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
|
|
70
|
+
const describedBy = (0, accessibility_1.mergeIds)(ariaDescribedBy, showError ? errorMessageId : helperText ? helperTextId : undefined);
|
|
70
71
|
const wrapperClasses = [
|
|
71
72
|
'muka-input',
|
|
72
73
|
fullWidth && 'muka-input--full-width',
|
|
@@ -88,7 +89,7 @@ exports.Input = react_1.default.forwardRef(function Input({ value, onChange, pla
|
|
|
88
89
|
e.preventDefault();
|
|
89
90
|
inputRef.current?.focus();
|
|
90
91
|
}
|
|
91
|
-
}, children: [hasLeftIcon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-input__icon muka-input__icon--left", "aria-hidden": "true", children: iconLeft })), (0, jsx_runtime_1.jsx)("input", { ref: (node) => {
|
|
92
|
+
}, children: [hasLeftIcon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-input__icon muka-input__icon--left", "aria-hidden": "true", children: iconLeft })), (0, jsx_runtime_1.jsx)("input", { ...rest, ref: (node) => {
|
|
92
93
|
// Keep the internal ref (used for click-to-focus) in sync while
|
|
93
94
|
// also honouring a forwarded ref from the consumer / a form lib.
|
|
94
95
|
inputRef.current = node;
|
|
@@ -97,7 +98,7 @@ exports.Input = react_1.default.forwardRef(function Input({ value, onChange, pla
|
|
|
97
98
|
else if (forwardedRef)
|
|
98
99
|
forwardedRef.current =
|
|
99
100
|
node;
|
|
100
|
-
}, id: inputId, className: "muka-input__native", type: type, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readOnly: readOnly, name: name, required: required, "aria-invalid": error || undefined, "aria-describedby": describedBy, onFocus: (e) => {
|
|
101
|
+
}, id: inputId, className: "muka-input__native", type: type, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readOnly: readOnly, name: name, required: required, "aria-invalid": ariaInvalid ?? (error || undefined), "aria-describedby": describedBy, onFocus: (e) => {
|
|
101
102
|
setIsFocused(true);
|
|
102
103
|
onFocus?.(e);
|
|
103
104
|
}, onBlur: (e) => {
|
|
@@ -107,7 +108,8 @@ exports.Input = react_1.default.forwardRef(function Input({ value, onChange, pla
|
|
|
107
108
|
if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
|
|
108
109
|
e.stopPropagation();
|
|
109
110
|
}
|
|
110
|
-
|
|
111
|
+
onKeyDownCapture?.(e);
|
|
112
|
+
} }), hasRightIcon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-input__icon muka-input__icon--right", "aria-hidden": "true", children: iconRight }))] }), showError && ((0, jsx_runtime_1.jsx)("p", { className: "muka-input__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && ((0, jsx_runtime_1.jsx)("p", { className: "muka-input__helper", id: helperTextId, children: helperText }))] }));
|
|
111
113
|
});
|
|
112
114
|
exports.default = exports.Input;
|
|
113
115
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../components/Input/Input.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,+CAAuD;AACvD,uBAAqB;
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../components/Input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -37,6 +37,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
37
37
|
exports.LicensePlateInput = void 0;
|
|
38
38
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
39
39
|
const react_1 = __importStar(require("react"));
|
|
40
|
+
const accessibility_1 = require("../../utils/accessibility");
|
|
40
41
|
require("./LicensePlateInput.css");
|
|
41
42
|
const sanitize = (raw, maxLength) => raw.toUpperCase().replace(/[^A-Z0-9-]/g, '').slice(0, maxLength);
|
|
42
43
|
/**
|
|
@@ -50,9 +51,12 @@ const sanitize = (raw, maxLength) => raw.toUpperCase().replace(/[^A-Z0-9-]/g, ''
|
|
|
50
51
|
* regulatory palette and are kept fixed across brands. Surrounding UI (helper,
|
|
51
52
|
* focus ring, error border) uses Muka semantic tokens.
|
|
52
53
|
*/
|
|
53
|
-
exports.LicensePlateInput = react_1.default.forwardRef(function LicensePlateInput({ value: controlledValue, onChange, onSubmit, placeholder = 'TIK HIER', helperText, error = false, errorMessage, disabled = false, readOnly = false, size = 'md', maxLength = 8, required = false, className = '', name, countryCode = 'NL', onBlur, onFocus,
|
|
54
|
+
exports.LicensePlateInput = react_1.default.forwardRef(function LicensePlateInput({ value: controlledValue, onChange, onSubmit, placeholder = 'TIK HIER', helperText, error = false, errorMessage, disabled = false, readOnly = false, size = 'md', maxLength = 8, required = false, className = '', name, id, countryCode = 'NL', onBlur, onFocus,
|
|
55
|
+
// Plate values are uppercase alphanumerics — browser autofill and
|
|
56
|
+
// autocorrect only get in the way. Consumers can still override.
|
|
57
|
+
autoComplete = 'off', autoCapitalize = 'characters', autoCorrect = 'off', spellCheck = false, 'aria-label': ariaLabel = 'License plate', 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, onKeyDown, ...rest }, forwardedRef) {
|
|
54
58
|
const generatedId = (0, react_1.useId)();
|
|
55
|
-
const fieldId = name || generatedId;
|
|
59
|
+
const fieldId = id || name || generatedId;
|
|
56
60
|
const helperTextId = `${fieldId}-helper`;
|
|
57
61
|
const errorMessageId = `${fieldId}-error`;
|
|
58
62
|
const isControlled = controlledValue !== undefined;
|
|
@@ -61,7 +65,7 @@ exports.LicensePlateInput = react_1.default.forwardRef(function LicensePlateInpu
|
|
|
61
65
|
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
|
|
62
66
|
const inputRef = (0, react_1.useRef)(null);
|
|
63
67
|
const showError = error && errorMessage;
|
|
64
|
-
const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
|
|
68
|
+
const describedBy = (0, accessibility_1.mergeIds)(ariaDescribedBy, showError ? errorMessageId : helperText ? helperTextId : undefined);
|
|
65
69
|
const handleChange = (e) => {
|
|
66
70
|
const sanitized = sanitize(e.target.value, maxLength);
|
|
67
71
|
if (!isControlled)
|
|
@@ -73,6 +77,7 @@ exports.LicensePlateInput = react_1.default.forwardRef(function LicensePlateInpu
|
|
|
73
77
|
e.preventDefault();
|
|
74
78
|
onSubmit(currentValue);
|
|
75
79
|
}
|
|
80
|
+
onKeyDown?.(e);
|
|
76
81
|
};
|
|
77
82
|
const wrapperClasses = [
|
|
78
83
|
'muka-license-plate-input',
|
|
@@ -97,7 +102,7 @@ exports.LicensePlateInput = react_1.default.forwardRef(function LicensePlateInpu
|
|
|
97
102
|
const cx = 12 + Math.cos(angle) * 7;
|
|
98
103
|
const cy = 12 + Math.sin(angle) * 7;
|
|
99
104
|
return (0, jsx_runtime_1.jsx)("circle", { cx: cx, cy: cy, r: 1.1, fill: "#FFCC00" }, i);
|
|
100
|
-
}) }), (0, jsx_runtime_1.jsx)("span", { className: "muka-license-plate-input__country-code", children: countryCode })] }), (0, jsx_runtime_1.jsx)("input", { ref: (node) => {
|
|
105
|
+
}) }), (0, jsx_runtime_1.jsx)("span", { className: "muka-license-plate-input__country-code", children: countryCode })] }), (0, jsx_runtime_1.jsx)("input", { ...rest, ref: (node) => {
|
|
101
106
|
inputRef.current = node;
|
|
102
107
|
if (typeof forwardedRef === 'function')
|
|
103
108
|
forwardedRef(node);
|
|
@@ -110,7 +115,7 @@ exports.LicensePlateInput = react_1.default.forwardRef(function LicensePlateInpu
|
|
|
110
115
|
}, onBlur: (e) => {
|
|
111
116
|
setIsFocused(false);
|
|
112
117
|
onBlur?.(e);
|
|
113
|
-
}, placeholder: placeholder, disabled: disabled, readOnly: readOnly, name: name, required: required, maxLength: maxLength, autoComplete:
|
|
118
|
+
}, placeholder: placeholder, disabled: disabled, readOnly: readOnly, name: name, required: required, maxLength: maxLength, autoComplete: autoComplete, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, "aria-invalid": ariaInvalid ?? (error || undefined), "aria-describedby": describedBy, "aria-label": ariaLabel })] }), showError && ((0, jsx_runtime_1.jsx)("p", { className: "muka-license-plate-input__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && ((0, jsx_runtime_1.jsx)("p", { className: "muka-license-plate-input__helper", id: helperTextId, children: helperText }))] }));
|
|
114
119
|
});
|
|
115
120
|
exports.default = exports.LicensePlateInput;
|
|
116
121
|
//# sourceMappingURL=LicensePlateInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LicensePlateInput.js","sourceRoot":"","sources":["../../../../components/LicensePlateInput/LicensePlateInput.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,+CAAuD;AACvD,mCAAiC;
|
|
1
|
+
{"version":3,"file":"LicensePlateInput.js","sourceRoot":"","sources":["../../../../components/LicensePlateInput/LicensePlateInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -37,6 +37,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
37
37
|
exports.NumberInput = void 0;
|
|
38
38
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
39
39
|
const react_1 = __importStar(require("react"));
|
|
40
|
+
const accessibility_1 = require("../../utils/accessibility");
|
|
40
41
|
require("../Input/Input.css");
|
|
41
42
|
require("./NumberInput.css");
|
|
42
43
|
/**
|
|
@@ -50,7 +51,7 @@ require("./NumberInput.css");
|
|
|
50
51
|
* - input.field.radius / padding / height
|
|
51
52
|
* - text.input.{size} / text.label.{size}.semibold
|
|
52
53
|
*/
|
|
53
|
-
exports.NumberInput = react_1.default.forwardRef(function NumberInput({ value, onChange, label, helperText, error = false, errorMessage, disabled = false, size = 'md', prefix, suffix, step, min, max, placeholder, fullWidth = false, className = '', id, name, required = false, readOnly = false, onBlur, onFocus, }, forwardedRef) {
|
|
54
|
+
exports.NumberInput = react_1.default.forwardRef(function NumberInput({ value, onChange, label, helperText, error = false, errorMessage, disabled = false, size = 'md', prefix, suffix, step, min, max, placeholder, fullWidth = false, className = '', id, name, required = false, readOnly = false, onBlur, onFocus, inputMode = 'decimal', 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, onKeyDownCapture, ...rest }, forwardedRef) {
|
|
54
55
|
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
|
|
55
56
|
const inputRef = (0, react_1.useRef)(null);
|
|
56
57
|
const generatedId = (0, react_1.useId)();
|
|
@@ -60,7 +61,7 @@ exports.NumberInput = react_1.default.forwardRef(function NumberInput({ value, o
|
|
|
60
61
|
const hasPrefix = Boolean(prefix);
|
|
61
62
|
const hasSuffix = Boolean(suffix);
|
|
62
63
|
const showError = error && errorMessage;
|
|
63
|
-
const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
|
|
64
|
+
const describedBy = (0, accessibility_1.mergeIds)(ariaDescribedBy, showError ? errorMessageId : helperText ? helperTextId : undefined);
|
|
64
65
|
const wrapperClasses = [
|
|
65
66
|
'muka-input',
|
|
66
67
|
'muka-numberinput',
|
|
@@ -82,14 +83,14 @@ exports.NumberInput = react_1.default.forwardRef(function NumberInput({ value, o
|
|
|
82
83
|
e.preventDefault();
|
|
83
84
|
inputRef.current?.focus();
|
|
84
85
|
}
|
|
85
|
-
}, children: [hasPrefix && ((0, jsx_runtime_1.jsx)("span", { className: "muka-numberinput__addon muka-numberinput__addon--prefix", children: prefix })), (0, jsx_runtime_1.jsx)("input", { ref: (node) => {
|
|
86
|
+
}, children: [hasPrefix && ((0, jsx_runtime_1.jsx)("span", { className: "muka-numberinput__addon muka-numberinput__addon--prefix", children: prefix })), (0, jsx_runtime_1.jsx)("input", { ...rest, ref: (node) => {
|
|
86
87
|
inputRef.current = node;
|
|
87
88
|
if (typeof forwardedRef === 'function')
|
|
88
89
|
forwardedRef(node);
|
|
89
90
|
else if (forwardedRef)
|
|
90
91
|
forwardedRef.current =
|
|
91
92
|
node;
|
|
92
|
-
}, id: inputId, className: "muka-input__native", type: "number", inputMode:
|
|
93
|
+
}, id: inputId, className: "muka-input__native", type: "number", inputMode: inputMode, value: Number.isFinite(value) ? value : 0, step: step, min: min, max: max, placeholder: placeholder, disabled: disabled, readOnly: readOnly, name: name, required: required, "aria-invalid": ariaInvalid ?? (error || undefined), "aria-describedby": describedBy, onChange: (e) => {
|
|
93
94
|
const parsed = e.target.valueAsNumber;
|
|
94
95
|
onChange?.(Number.isFinite(parsed) ? parsed : 0);
|
|
95
96
|
}, onFocus: (e) => {
|
|
@@ -102,6 +103,7 @@ exports.NumberInput = react_1.default.forwardRef(function NumberInput({ value, o
|
|
|
102
103
|
if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
|
|
103
104
|
e.stopPropagation();
|
|
104
105
|
}
|
|
106
|
+
onKeyDownCapture?.(e);
|
|
105
107
|
} }), hasSuffix && ((0, jsx_runtime_1.jsx)("span", { className: "muka-numberinput__addon muka-numberinput__addon--suffix", children: suffix }))] }), showError && ((0, jsx_runtime_1.jsx)("p", { className: "muka-input__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && ((0, jsx_runtime_1.jsx)("p", { className: "muka-input__helper", id: helperTextId, children: helperText }))] }));
|
|
106
108
|
});
|
|
107
109
|
exports.default = exports.NumberInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../../components/NumberInput/NumberInput.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,+CAAuD;AACvD,8BAA4B;AAC5B,6BAA2B;
|
|
1
|
+
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../../components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,7 +18,10 @@ require("./SearchInput.css");
|
|
|
18
18
|
* - Renders as `<input type="search">` inside a `<form role="search">` landmark
|
|
19
19
|
* - Clear and cancel buttons have descriptive aria-labels
|
|
20
20
|
*/
|
|
21
|
-
exports.SearchInput = (0, react_1.forwardRef)(({ value, onChange, placeholder = 'Search', clearable = true, cancellable = false, cancelLabel = 'Cancel', onCancel, onSubmit, loading = false, variant = 'default', autoFocus = false, disabled = false, size = 'md', 'aria-label': ariaLabel, className = '',
|
|
21
|
+
exports.SearchInput = (0, react_1.forwardRef)(({ value, onChange, placeholder = 'Search', clearable = true, cancellable = false, cancelLabel = 'Cancel', onCancel, onSubmit, loading = false, variant = 'default', autoFocus = false, disabled = false, size = 'md', 'aria-label': ariaLabel, className = '',
|
|
22
|
+
// Disable browser-supplied autofill/correction by default — the field
|
|
23
|
+
// renders its own clear affordance. Consumers can still override these.
|
|
24
|
+
autoComplete = 'off', autoCorrect = 'off', spellCheck = false, onKeyDown, onFocus, onBlur, ...rest }, forwardedRef) => {
|
|
22
25
|
const inputRef = (0, react_1.useRef)(null);
|
|
23
26
|
(0, react_1.useImperativeHandle)(forwardedRef, () => inputRef.current);
|
|
24
27
|
const [focused, setFocused] = (0, react_1.useState)(false);
|
|
@@ -45,6 +48,7 @@ exports.SearchInput = (0, react_1.forwardRef)(({ value, onChange, placeholder =
|
|
|
45
48
|
else if (e.key === 'Escape' && cancellable) {
|
|
46
49
|
handleCancel();
|
|
47
50
|
}
|
|
51
|
+
onKeyDown?.(e);
|
|
48
52
|
};
|
|
49
53
|
const rootClasses = [
|
|
50
54
|
'muka-search-input',
|
|
@@ -56,10 +60,16 @@ exports.SearchInput = (0, react_1.forwardRef)(({ value, onChange, placeholder =
|
|
|
56
60
|
]
|
|
57
61
|
.filter(Boolean)
|
|
58
62
|
.join(' ');
|
|
59
|
-
return ((0, jsx_runtime_1.jsxs)("form", { className: rootClasses, role: "search", onSubmit: (e) => e.preventDefault(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "muka-search-input__field", children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-search-input__leading", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "search", variant: "line", size: "md" }) }), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "search", className: "muka-search-input__input", value: value, onChange: (e) => onChange(e.target.value), onFocus: () =>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
+
return ((0, jsx_runtime_1.jsxs)("form", { className: rootClasses, role: "search", onSubmit: (e) => e.preventDefault(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "muka-search-input__field", children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-search-input__leading", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "search", variant: "line", size: "md" }) }), (0, jsx_runtime_1.jsx)("input", { ...rest, ref: inputRef, type: "search", className: "muka-search-input__input", value: value, onChange: (e) => onChange(e.target.value), onFocus: (e) => {
|
|
64
|
+
setFocused(true);
|
|
65
|
+
onFocus?.(e);
|
|
66
|
+
}, onBlur: (e) => {
|
|
67
|
+
setFocused(false);
|
|
68
|
+
onBlur?.(e);
|
|
69
|
+
}, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, autoFocus: autoFocus, "aria-label": ariaLabel || placeholder,
|
|
70
|
+
// The browser-supplied clear icon is hidden in CSS via the
|
|
71
|
+
// `-webkit-search-cancel-button` pseudo-element — we render our own.
|
|
72
|
+
autoComplete: autoComplete, autoCorrect: autoCorrect, spellCheck: spellCheck }), loading && ((0, jsx_runtime_1.jsx)("span", { className: "muka-search-input__trailing", children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "sm", variant: "subtle" }) })), showClear && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-search-input__clear", onClick: handleClear, "aria-label": "Clear search", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", variant: "line", size: "sm" }) }))] }), showCancel && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-search-input__cancel", onClick: handleCancel, children: cancelLabel }))] }));
|
|
63
73
|
});
|
|
64
74
|
exports.SearchInput.displayName = 'SearchInput';
|
|
65
75
|
exports.default = exports.SearchInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../../components/SearchInput/SearchInput.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,iCAAiF;AACjF,wCAAqC;AACrC,kCAA+B;AAC/B,6BAA2B;
|
|
1
|
+
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../../components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -37,15 +37,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
37
37
|
exports.Textarea = void 0;
|
|
38
38
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
39
39
|
const react_1 = __importStar(require("react"));
|
|
40
|
+
const accessibility_1 = require("../../utils/accessibility");
|
|
40
41
|
require("./Textarea.css");
|
|
41
|
-
exports.Textarea = react_1.default.forwardRef(function Textarea({ value, onChange, placeholder, label, helperText, error = false, errorMessage, disabled = false, readOnly = false, size = 'md', rows, resize = 'vertical', showCount = false, maxLength, className = '', name, id, required = false, onBlur, onFocus, }, forwardedRef) {
|
|
42
|
+
exports.Textarea = react_1.default.forwardRef(function Textarea({ value, onChange, placeholder, label, helperText, error = false, errorMessage, disabled = false, readOnly = false, size = 'md', rows, resize = 'vertical', showCount = false, maxLength, className = '', name, id, required = false, onBlur, onFocus, style, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...rest }, forwardedRef) {
|
|
42
43
|
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
|
|
43
44
|
const generatedId = (0, react_1.useId)();
|
|
44
45
|
const textareaId = id || name || generatedId;
|
|
45
46
|
const helperTextId = `${textareaId}-helper`;
|
|
46
47
|
const errorMessageId = `${textareaId}-error`;
|
|
47
48
|
const showError = error && errorMessage;
|
|
48
|
-
const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
|
|
49
|
+
const describedBy = (0, accessibility_1.mergeIds)(ariaDescribedBy, showError ? errorMessageId : helperText ? helperTextId : undefined);
|
|
49
50
|
const charCount = value?.length ?? 0;
|
|
50
51
|
const wrapperClasses = [
|
|
51
52
|
'muka-textarea',
|
|
@@ -58,13 +59,13 @@ exports.Textarea = react_1.default.forwardRef(function Textarea({ value, onChang
|
|
|
58
59
|
error && 'muka-textarea__field--error',
|
|
59
60
|
disabled && 'muka-textarea__field--disabled',
|
|
60
61
|
].filter(Boolean).join(' ');
|
|
61
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClasses, children: [label && ((0, jsx_runtime_1.jsxs)("label", { className: `muka-textarea__label muka-textarea__label--${size}`, htmlFor: textareaId, children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "muka-textarea__required", "aria-hidden": "true", children: " *" })] })), (0, jsx_runtime_1.jsx)("div", { className: fieldClasses, children: (0, jsx_runtime_1.jsx)("textarea", { ref: forwardedRef, id: textareaId, className: "muka-textarea__native", value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readOnly: readOnly, name: name, required: required, rows: rows, maxLength: maxLength, "aria-invalid": error || undefined, "aria-describedby": describedBy, onFocus: (e) => {
|
|
62
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClasses, children: [label && ((0, jsx_runtime_1.jsxs)("label", { className: `muka-textarea__label muka-textarea__label--${size}`, htmlFor: textareaId, children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "muka-textarea__required", "aria-hidden": "true", children: " *" })] })), (0, jsx_runtime_1.jsx)("div", { className: fieldClasses, children: (0, jsx_runtime_1.jsx)("textarea", { ...rest, ref: forwardedRef, id: textareaId, className: "muka-textarea__native", value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readOnly: readOnly, name: name, required: required, rows: rows, maxLength: maxLength, "aria-invalid": ariaInvalid ?? (error || undefined), "aria-describedby": describedBy, onFocus: (e) => {
|
|
62
63
|
setIsFocused(true);
|
|
63
64
|
onFocus?.(e);
|
|
64
65
|
}, onBlur: (e) => {
|
|
65
66
|
setIsFocused(false);
|
|
66
67
|
onBlur?.(e);
|
|
67
|
-
}, style: { resize } }) }), (0, jsx_runtime_1.jsxs)("div", { className: "muka-textarea__footer", children: [showError && ((0, jsx_runtime_1.jsx)("p", { className: "muka-textarea__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && ((0, jsx_runtime_1.jsx)("p", { className: "muka-textarea__helper", id: helperTextId, children: helperText })), showCount && ((0, jsx_runtime_1.jsxs)("span", { className: "muka-textarea__count", children: [charCount, maxLength ? `/${maxLength}` : ''] }))] })] }));
|
|
68
|
+
}, style: { resize, ...style } }) }), (0, jsx_runtime_1.jsxs)("div", { className: "muka-textarea__footer", children: [showError && ((0, jsx_runtime_1.jsx)("p", { className: "muka-textarea__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && ((0, jsx_runtime_1.jsx)("p", { className: "muka-textarea__helper", id: helperTextId, children: helperText })), showCount && ((0, jsx_runtime_1.jsxs)("span", { className: "muka-textarea__count", children: [charCount, maxLength ? `/${maxLength}` : ''] }))] })] }));
|
|
68
69
|
});
|
|
69
70
|
exports.default = exports.Textarea;
|
|
70
71
|
//# sourceMappingURL=Textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../components/Textarea/Textarea.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,+CAA+C;AAC/C,0BAAwB;
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../components/Textarea/Textarea.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,+CAA+C;AAC/C,6DAAqD;AACrD,0BAAwB;AA8CX,QAAA,QAAQ,GAAG,eAAK,CAAC,UAAU,CACtC,SAAS,QAAQ,CACf,EACE,KAAK,EACL,QAAQ,EACR,WAAW,EACX,KAAK,EACL,UAAU,EACV,KAAK,GAAG,KAAK,EACb,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,MAAM,GAAG,UAAU,EACnB,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,EAAE,EACF,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,OAAO,EACP,KAAK,EACL,kBAAkB,EAAE,eAAe,EACnC,cAAc,EAAE,WAAW,EAC3B,GAAG,IAAI,EACR,EACD,YAAY;IAEd,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,IAAA,aAAK,GAAE,CAAC;IAC5B,MAAM,UAAU,GAAG,EAAE,IAAI,IAAI,IAAI,WAAW,CAAC;IAC7C,MAAM,YAAY,GAAG,GAAG,UAAU,SAAS,CAAC;IAC5C,MAAM,cAAc,GAAG,GAAG,UAAU,QAAQ,CAAC;IAE7C,MAAM,SAAS,GAAG,KAAK,IAAI,YAAY,CAAC;IACxC,MAAM,WAAW,GAAG,IAAA,wBAAQ,EAC1B,eAAe,EACf,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CACnE,CAAC;IACF,MAAM,SAAS,GAAG,KAAK,EAAE,MAAM,IAAI,CAAC,CAAC;IAErC,MAAM,cAAc,GAAG;QACrB,eAAe;QACf,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG;QACnB,sBAAsB;QACtB,yBAAyB,IAAI,EAAE;QAC/B,SAAS,IAAI,+BAA+B;QAC5C,KAAK,IAAI,6BAA6B;QACtC,QAAQ,IAAI,gCAAgC;KAC7C,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,iCAAK,SAAS,EAAE,cAAc,aAC3B,KAAK,IAAI,CACR,mCACE,SAAS,EAAE,8CAA8C,IAAI,EAAE,EAC/D,OAAO,EAAE,UAAU,aAElB,KAAK,EACL,QAAQ,IAAI,iCAAM,SAAS,EAAC,yBAAyB,iBAAa,MAAM,mBAAU,IAC7E,CACT,EAED,gCAAK,SAAS,EAAE,YAAY,YAC1B,wCAGM,IAAI,EACR,GAAG,EAAE,YAAY,EACjB,EAAE,EAAE,UAAU,EACd,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,kBACN,WAAW,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,sBAC/B,WAAW,EAC7B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wBACb,YAAY,CAAC,IAAI,CAAC,CAAC;wBACnB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;oBACf,CAAC,EACD,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;wBACZ,YAAY,CAAC,KAAK,CAAC,CAAC;wBACpB,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;oBACd,CAAC,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,GAC3B,GACE,EAEN,iCAAK,SAAS,EAAC,uBAAuB,aACnC,SAAS,IAAI,CACZ,8BAAG,SAAS,EAAC,sBAAsB,EAAC,EAAE,EAAE,cAAc,EAAE,IAAI,EAAC,OAAO,YACjE,YAAY,GACX,CACL,EAEA,CAAC,SAAS,IAAI,UAAU,IAAI,CAC3B,8BAAG,SAAS,EAAC,uBAAuB,EAAC,EAAE,EAAE,YAAY,YAClD,UAAU,GACT,CACL,EAEA,SAAS,IAAI,CACZ,kCAAM,SAAS,EAAC,sBAAsB,aACnC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,IACvC,CACR,IACG,IACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,gBAAQ,CAAC"}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.VISUALLY_HIDDEN_CLASS = void 0;
|
|
7
7
|
exports.warnMissingA11yProp = warnMissingA11yProp;
|
|
8
|
+
exports.mergeIds = mergeIds;
|
|
8
9
|
/** CSS class for visually hidden content that remains accessible to screen readers */
|
|
9
10
|
exports.VISUALLY_HIDDEN_CLASS = 'muka-visually-hidden';
|
|
10
11
|
/**
|
|
@@ -18,4 +19,17 @@ function warnMissingA11yProp(component, condition, message) {
|
|
|
18
19
|
console.warn(`[${component}] Accessibility: ${message}`);
|
|
19
20
|
}
|
|
20
21
|
}
|
|
22
|
+
/**
|
|
23
|
+
* Merge `aria-describedby` / `aria-labelledby` id lists.
|
|
24
|
+
*
|
|
25
|
+
* Components own ids for their helper text and error message, but consumers
|
|
26
|
+
* may point the same attribute at their own element. Both need to survive, so
|
|
27
|
+
* the ids are concatenated rather than one replacing the other.
|
|
28
|
+
*
|
|
29
|
+
* Returns `undefined` when nothing is left, so the attribute is omitted.
|
|
30
|
+
*/
|
|
31
|
+
function mergeIds(...ids) {
|
|
32
|
+
const merged = ids.filter(Boolean).join(' ');
|
|
33
|
+
return merged || undefined;
|
|
34
|
+
}
|
|
21
35
|
//# sourceMappingURL=accessibility.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accessibility.js","sourceRoot":"","sources":["../../../utils/accessibility.ts"],"names":[],"mappings":";AAAA;;GAEG;;;AAWH,kDAaC;
|
|
1
|
+
{"version":3,"file":"accessibility.js","sourceRoot":"","sources":["../../../utils/accessibility.ts"],"names":[],"mappings":";AAAA;;GAEG;;;AAWH,kDAaC;AAWD,4BAKC;AAnCD,sFAAsF;AACzE,QAAA,qBAAqB,GAAG,sBAAsB,CAAC;AAE5D;;GAEG;AACH,SAAgB,mBAAmB,CACjC,SAAiB,EACjB,SAAkB,EAClB,OAAe;IAEf,sEAAsE;IACtE,MAAM,KAAK,GACT,OAAO,OAAO,KAAK,WAAW;QAC9B,OAAO,EAAE,GAAG,EAAE,QAAQ,KAAK,YAAY,CAAC;IAE1C,IAAI,KAAK,IAAI,SAAS,EAAE,CAAC;QACvB,OAAO,CAAC,IAAI,CAAC,IAAI,SAAS,oBAAoB,OAAO,EAAE,CAAC,CAAC;IAC3D,CAAC;AACH,CAAC;AAED;;;;;;;;GAQG;AACH,SAAgB,QAAQ,CACtB,GAAG,GAA6C;IAEhD,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7C,OAAO,MAAM,IAAI,SAAS,CAAC;AAC7B,CAAC"}
|