@lumx/react 4.24.0-next.1 → 4.24.0-next.3

package/index.d.ts

@@ -4762,6 +4762,13 @@ interface SideNavigationItemProps extends GenericProps$1, HasCloseMode$1 {
     isOpen?: boolean;
     /** Whether the component is selected or not. */
     isSelected?: boolean;
+    /**
+     * Whether the link points to the current page or not.
+     * Sets `aria-current="page"` on the link, which produces the selected style.
+     * This does not set the `--is-selected` modifier class: a link component set in `linkAs` can set the
+     * attribute by itself, and React never sees it, so the attribute is the only reliable signal.
+     */
+    isCurrentPage?: boolean;
     /** Custom react component for the link (can be used to inject react router Link). */
     linkAs?: 'a' | any;
     /** Props to pass to the link (minus those already set by the SideNavigationItem props). */

package/index.js

@@ -19244,12 +19244,11 @@ const SideNavigation = forwardRef((props, ref) => {
     theme = defaultTheme,
     ...forwardedProps
   } = props;
-  const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
   return /*#__PURE__*/jsx("ul", {
     ref: ref,
     ...forwardedProps,
     className: classNames.join(className, theme === Theme$1.dark && 'lumx-color-font-light-N', CLASSNAME$l),
-    children: content
+    children: children
   });
 });
 SideNavigation.displayName = COMPONENT_NAME$m;
@@ -19292,6 +19291,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
     icon,
     isOpen,
     isSelected,
+    isCurrentPage,
     label,
     linkAs,
     linkProps,
@@ -19301,10 +19301,12 @@ const SideNavigationItem = forwardRef((props, ref) => {
     closeMode = DEFAULT_PROPS$n.closeMode,
     ...forwardedProps
   } = props;
-  const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
-  const hasContent = !isEmpty(content);
+  const hasContent = !isEmpty(Children.toArray(children));
   const shouldSplitActions = Boolean(onActionClick);
   const showChildren = hasContent && isOpen;
+
+  // Mark the link as the current page. A link component set in `linkAs` can also set it by itself.
+  const ariaCurrent = isCurrentPage ? 'page' : undefined;
   const contentId = useId();
   const ariaProps = {};
   if (hasContent) {
@@ -19324,6 +19326,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
       className: element$a('wrapper'),
       children: [RawClickable({
         as: linkAs || (linkProps?.href ? 'a' : 'button'),
+        'aria-current': ariaCurrent,
         ...linkProps,
         className: element$a('link'),
         handleClick: onClick,
@@ -19348,6 +19351,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
       })]
     }) : RawClickable({
       as: linkAs || (linkProps?.href ? 'a' : 'button'),
+      'aria-current': ariaCurrent,
       ...linkProps,
       className: element$a('link'),
       handleClick: onClick,
@@ -19369,7 +19373,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
     }), (closeMode === 'hide' || showChildren) && /*#__PURE__*/jsx("ul", {
       className: element$a('children'),
       id: contentId,
-      children: content
+      children: children
     })]
   });
 });