@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 CHANGED
@@ -1524,7 +1524,7 @@ const getAvatarInitials = (name) => {
1524
1524
  * <Avatar src="/me.jpg" name="Me" onClick={() => openProfile()} ariaLabel="Open profile" />
1525
1525
  * ```
1526
1526
  */
1527
- const Avatar = ({ src, name, initials, size = 'md', shape = 'circle', color = 'primary', onClick, ariaLabel, }) => {
1527
+ const Avatar = ({ src, name, initials, size = 'md', shape = 'circle', color = 'primary', onClick, ariaLabel, ref, id, 'aria-haspopup': ariaHasPopup, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, }) => {
1528
1528
  const [imageError, setImageError] = React.useState(false);
1529
1529
  const isInteractive = Boolean(onClick);
1530
1530
  const resolvedInitials = initials ?? (name ? getAvatarInitials(name) : undefined);
@@ -1543,9 +1543,9 @@ const Avatar = ({ src, name, initials, size = 'md', shape = 'circle', color = 'p
1543
1543
  ? jsxRuntime.jsx("span", { "aria-hidden": true, children: resolvedInitials })
1544
1544
  : null);
1545
1545
  if (isInteractive) {
1546
- return (jsxRuntime.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 }));
1546
+ return (jsxRuntime.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 }));
1547
1547
  }
1548
- return (jsxRuntime.jsx("div", { role: 'img', "aria-label": resolvedAriaLabel, title: resolvedAriaLabel, className: AVATAR_STYLES.root({ size, shape, color, isInteractive: false }), children: avatarContent }));
1548
+ return (jsxRuntime.jsx("div", { ref: ref, id: id, role: 'img', "aria-label": resolvedAriaLabel, title: resolvedAriaLabel, className: AVATAR_STYLES.root({ size, shape, color, isInteractive: false }), children: avatarContent }));
1549
1549
  };
1550
1550
  Avatar.displayName = 'Avatar';
1551
1551
 
@@ -5433,11 +5433,11 @@ const HEADER_STYLES = theme.createStyles((theme) => ({
5433
5433
  * (logo, site title, navigation). Screen-readers expose it as the
5434
5434
  * `banner` landmark when it is a direct child of `<body>`.
5435
5435
  *
5436
- * @example <Header px="md" py="sm" alignItems="center" gap="sm">…</Header>
5436
+ * @example <Header px="sm" py="xs" alignItems="center" gap="sm">…</Header>
5437
5437
  * @example <Header withBorder>…</Header>
5438
5438
  */
5439
- const Header = ({ ref, style, className, children, withBorder = true, display = 'flex', ...props }) => {
5440
- const { styleProps, restProps } = extractBoxStyleProps({ display, ...props });
5439
+ const Header = ({ ref, style, className, children, withBorder = true, display = 'flex', px = 'sm', py = 'xs', ...props }) => {
5440
+ const { styleProps, restProps } = extractBoxStyleProps({ display, px, py, ...props });
5441
5441
  const generatedClassName = BOX_STYLES.root(styleProps);
5442
5442
  return (jsxRuntime.jsx("header", { ref: ref, className: theme.cx(generatedClassName, withBorder && HEADER_STYLES.withBorder(), className), style: style, ...restProps, children: children }));
5443
5443
  };