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

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

@@ -19292,6 +19292,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
     icon,
     isOpen,
     isSelected,
+    isCurrentPage,
     label,
     linkAs,
     linkProps,
@@ -19305,6 +19306,9 @@ const SideNavigationItem = forwardRef((props, ref) => {
   const hasContent = !isEmpty(content);
   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 +19328,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 +19353,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
       })]
     }) : RawClickable({
       as: linkAs || (linkProps?.href ? 'a' : 'button'),
+      'aria-current': ariaCurrent,
       ...linkProps,
       className: element$a('link'),
       handleClick: onClick,