@onewelcome/react-lib-components 9.4.0 → 9.5.1

package/src/components/admin/layout/LeftNav/LeftNav.tsx

@@ -34,10 +34,20 @@ export interface Props extends ComponentPropsWithRef<"nav"> {
   navigate: (path: string) => void;
   onItemClick?: (path?: string, button?: boolean) => void;
   marginTop?: string;
+  internalLinkPrefix?: string;
 }
 
 const LeftNavComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
-  { isSideMenuOpen, onScreenSizeChange, items, navigate, onItemClick, marginTop, ...rest },
+  {
+    isSideMenuOpen,
+    onScreenSizeChange,
+    items,
+    navigate,
+    onItemClick,
+    marginTop,
+    internalLinkPrefix,
+    ...rest
+  },
   ref
 ) => {
   const [isSideNavbarVisible, setIsSideNavbarVisible] = useState(isSideMenuOpen);
@@ -62,6 +72,7 @@ const LeftNavComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
           navigate={navigate}
           onItemClick={onItemClick}
           refItems={refItems}
+          internalLinkPrefix={internalLinkPrefix}
         />
       );
     });

package/src/components/admin/layout/LeftNav/LeftNavItem/ButtonLeftNavItem.tsx

@@ -37,17 +37,36 @@ export interface Props extends HTMLProps<HTMLElement> {
   refItems: UseRefItemsReturnType;
   NestedComponent: ForwardRefExoticComponent<LeftNavItemProps>;
   closeParentList?: () => void;
+  internalLinkPrefix?: string;
 }
 
 const chevronIconDataKey = { attributeKey: "chevron-icon", objectKey: "chevronIcon" };
 
 const ButtonLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
-  { item, navigate, onItemClick, refItems, NestedComponent, closeParentList },
+  {
+    item,
+    navigate,
+    onItemClick,
+    refItems,
+    NestedComponent,
+    closeParentList,
+    internalLinkPrefix = ""
+  },
   ref
 ) => {
   const [expanded, setExpanded] = useState(false);
   const isActiveParent = !!item.items?.find(menuItem => menuItem.active);
-  const { onKeyPressNavigation } = useKeyboardNavigation({ refItems, item, closeParentList });
+
+  const onExpandIconClickHandler = () => {
+    setExpanded(expanded => !expanded);
+  };
+
+  const { onKeyPressNavigation } = useKeyboardNavigation({
+    refItems,
+    item,
+    closeParentList,
+    onExpandIconClickHandler
+  });
 
   const onButtonClickHandler = (event: MouseEvent<HTMLButtonElement>) => {
     const isChevronIcon = !!(event.target as HTMLElement).dataset[chevronIconDataKey.objectKey];
@@ -62,10 +81,6 @@ const ButtonLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> =
     event.preventDefault();
   };
 
-  const onExpandIconClickHandler = () => {
-    setExpanded(expanded => !expanded);
-  };
-
   const openParentWithActiveElement = () => {
     if (isActiveParent) {
       setExpanded(true);
@@ -110,7 +125,7 @@ const ButtonLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> =
             React.cloneElement(item.iconComponent, { className: classes["menu-item-icon"] })}
           {item.path ? (
             <a
-              href={item.path}
+              href={item.path ? internalLinkPrefix + item.path : ""}
               aria-current={item.active ? "page" : false}
               className={classes["menu-item-text"]}
               onClick={onLinkClickHandler}
@@ -145,6 +160,7 @@ const ButtonLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> =
               navigate={navigate}
               onItemClick={onItemClick}
               refItems={refItems}
+              internalLinkPrefix={internalLinkPrefix}
             >
               {item.title}
             </NestedComponent>

package/src/components/admin/layout/LeftNav/LeftNavItem/LeftNavItem.interface.ts

@@ -24,4 +24,5 @@ export interface LeftNavItemProps extends HTMLProps<HTMLElement> {
   onItemClick?: (path?: string, button?: boolean) => void;
   refItems: UseRefItemsReturnType;
   closeParentList?: () => void;
+  internalLinkPrefix?: string;
 }

package/src/components/admin/layout/LeftNav/LeftNavItem/LinkLeftNavItem.tsx

@@ -27,10 +27,11 @@ export interface Props extends HTMLProps<HTMLElement> {
   onItemClick?: (path?: string, button?: boolean) => void;
   refItems: UseRefItemsReturnType;
   closeParentList?: () => void;
+  internalLinkPrefix?: string;
 }
 
 const LinkLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
-  { item, onItemClick, refItems, closeParentList, navigate },
+  { item, onItemClick, refItems, closeParentList, navigate, internalLinkPrefix = "" },
   ref
 ) => {
   const { onKeyPressNavigation } = useKeyboardNavigation({ refItems, item, closeParentList });
@@ -88,7 +89,7 @@ const LinkLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
           aria-current={item.active ? "page" : false}
           aria-disabled={item.disabled}
           className={menuItemLinkClasses.join(" ")}
-          href={item.path ?? ""}
+          href={item.path ? internalLinkPrefix + item.path : ""}
           tabIndex={tabIndex}
         >
           <div className={classes["menu-item-text-wrapper"]}>

package/src/components/admin/layout/LeftNav/LeftNavItem/useKeyboardNavigation.ts

@@ -22,11 +22,18 @@ interface Props {
   item: MenuItem;
   refItems: UseRefItemsReturnType;
   closeParentList?: () => void;
+  onExpandIconClickHandler?: () => void;
 }
 
-export const useKeyboardNavigation = ({ refItems, item, closeParentList }: Props) => {
+export const useKeyboardNavigation = ({
+  refItems,
+  item,
+  closeParentList,
+  onExpandIconClickHandler
+}: Props) => {
+  const isButtonLeftNavItem = !!onExpandIconClickHandler;
   const onKeyPressNavigation = (e: KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => {
-    if (e.code === "Escape") {
+    if (e.code === "Escape" || e.code === "ArrowLeft") {
       e.preventDefault();
       e.stopPropagation();
       closeParentList?.();
@@ -55,9 +62,13 @@ export const useKeyboardNavigation = ({ refItems, item, closeParentList }: Props
     if (e.code === "Space" || e.code === "Enter") {
       e.stopPropagation();
       e.preventDefault();
-      refItems.getNextElement(item.key, true)?.focus();
+      isButtonLeftNavItem && refItems.getNextElement(item.key, true)?.focus();
       e.currentTarget.click();
     }
+    if (e.code === "ArrowRight") {
+      onExpandIconClickHandler?.();
+      refItems.getNextElement(item.key, true)?.focus();
+    }
   };
 
   return { onKeyPressNavigation };