@aurora-ds/components 1.7.14 → 1.7.16
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/index.js +6 -6
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +6 -6
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +26 -1
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -1504,7 +1504,7 @@ const getAvatarInitials = (name) => {
|
|
|
1504
1504
|
* <Avatar src="/me.jpg" name="Me" onClick={() => openProfile()} ariaLabel="Open profile" />
|
|
1505
1505
|
* ```
|
|
1506
1506
|
*/
|
|
1507
|
-
const Avatar = ({ src, name, initials, size = 'md', shape = 'circle', color = 'primary', onClick, ariaLabel, }) => {
|
|
1507
|
+
const Avatar = ({ src, name, initials, size = 'md', shape = 'circle', color = 'primary', onClick, ariaLabel, ref, id, 'aria-haspopup': ariaHasPopup, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, }) => {
|
|
1508
1508
|
const [imageError, setImageError] = useState(false);
|
|
1509
1509
|
const isInteractive = Boolean(onClick);
|
|
1510
1510
|
const resolvedInitials = initials ?? (name ? getAvatarInitials(name) : undefined);
|
|
@@ -1523,9 +1523,9 @@ const Avatar = ({ src, name, initials, size = 'md', shape = 'circle', color = 'p
|
|
|
1523
1523
|
? jsx("span", { "aria-hidden": true, children: resolvedInitials })
|
|
1524
1524
|
: null);
|
|
1525
1525
|
if (isInteractive) {
|
|
1526
|
-
return (jsx("div", { role: 'button', tabIndex: 0, "aria-label": resolvedAriaLabel, title: resolvedAriaLabel, className: AVATAR_STYLES.root({ size, shape, color, isInteractive: true }), onClick: onClick, onKeyDown: handleKeyDown, children: avatarContent }));
|
|
1526
|
+
return (jsx("div", { ref: ref, id: id, role: 'button', tabIndex: 0, "aria-label": resolvedAriaLabel, "aria-haspopup": ariaHasPopup, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, title: resolvedAriaLabel, className: AVATAR_STYLES.root({ size, shape, color, isInteractive: true }), onClick: onClick, onKeyDown: handleKeyDown, children: avatarContent }));
|
|
1527
1527
|
}
|
|
1528
|
-
return (jsx("div", { role: 'img', "aria-label": resolvedAriaLabel, title: resolvedAriaLabel, className: AVATAR_STYLES.root({ size, shape, color, isInteractive: false }), children: avatarContent }));
|
|
1528
|
+
return (jsx("div", { ref: ref, id: id, role: 'img', "aria-label": resolvedAriaLabel, title: resolvedAriaLabel, className: AVATAR_STYLES.root({ size, shape, color, isInteractive: false }), children: avatarContent }));
|
|
1529
1529
|
};
|
|
1530
1530
|
Avatar.displayName = 'Avatar';
|
|
1531
1531
|
|
|
@@ -5413,11 +5413,11 @@ const HEADER_STYLES = createStyles((theme) => ({
|
|
|
5413
5413
|
* (logo, site title, navigation). Screen-readers expose it as the
|
|
5414
5414
|
* `banner` landmark when it is a direct child of `<body>`.
|
|
5415
5415
|
*
|
|
5416
|
-
* @example <Header px="
|
|
5416
|
+
* @example <Header px="sm" py="xs" alignItems="center" gap="sm">…</Header>
|
|
5417
5417
|
* @example <Header withBorder>…</Header>
|
|
5418
5418
|
*/
|
|
5419
|
-
const Header = ({ ref, style, className, children, withBorder = true, display = 'flex', ...props }) => {
|
|
5420
|
-
const { styleProps, restProps } = extractBoxStyleProps({ display, ...props });
|
|
5419
|
+
const Header = ({ ref, style, className, children, withBorder = true, display = 'flex', px = 'sm', py = 'xs', ...props }) => {
|
|
5420
|
+
const { styleProps, restProps } = extractBoxStyleProps({ display, px, py, ...props });
|
|
5421
5421
|
const generatedClassName = BOX_STYLES.root(styleProps);
|
|
5422
5422
|
return (jsx("header", { ref: ref, className: cx(generatedClassName, withBorder && HEADER_STYLES.withBorder(), className), style: style, ...restProps, children: children }));
|
|
5423
5423
|
};
|