@eztrak/shared 0.16.1 → 0.16.3

package/dist/components/index.js

@@ -1577,15 +1577,49 @@ function ToolTip({
 
 // src/components/sidebar/Sidebar.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
+function getItemTooltip(item) {
+  return item.tooltip || item.name;
+}
+function getTooltipPlacement(item, collapsed) {
+  return item.tooltipPlacement || (collapsed ? "right" : "top");
+}
+function isItemActive(pathname, link) {
+  if (!link || link === "#") return false;
+  return pathname === link || pathname.startsWith(`${link}/`);
+}
+function SidebarItemLabel({
+  name,
+  collapsed,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "span",
+    {
+      className: cn(
+        className,
+        collapsed && "block w-full text-center text-[10px] font-medium leading-tight line-clamp-2 wrap-break-word"
+      ),
+      children: name
+    }
+  );
+}
+function SidebarItemIcon({
+  icon,
+  className
+}) {
+  if (!icon) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("inline-flex shrink-0", className), "aria-hidden": "true", children: icon });
+}
 function Sidebar({
   className,
-  sideCollapseWidth = "w-20",
+  sideCollapseWidth = "w-24",
   sidebarWidth = "w-48",
   header,
   children,
   footer,
   items = [],
   logoUrl = "",
+  logoRouteUrl = "",
   logoAltText = "Logo",
   collapseButtonText = "\u2B05\uFE0F Collapse",
   expandButtonText = "\u27A1\uFE0F",
@@ -1598,29 +1632,68 @@ function Sidebar({
 }) {
   const location = (0, import_react_router_dom6.useLocation)();
   const [collapsed, setCollapsed] = (0, import_react8.useState)(isCollapsed);
-  const [, setActiveLink] = (0, import_react8.useState)(location.pathname);
-  const [subItemsCollapsed, setSubItemsCollapsed] = (0, import_react8.useState)({});
+  const [openGroups, setOpenGroups] = (0, import_react8.useState)({});
+  const onCollapseChangeRef = (0, import_react8.useRef)(onCollapseChange);
+  onCollapseChangeRef.current = onCollapseChange;
   (0, import_react8.useEffect)(() => {
-    if (onCollapseChange) {
-      onCollapseChange(collapsed);
-    }
-  }, [collapsed, onCollapseChange]);
+    setCollapsed(isCollapsed);
+  }, [isCollapsed]);
   (0, import_react8.useEffect)(() => {
-    setActiveLink(location.pathname);
-  }, [location]);
+    onCollapseChangeRef.current?.(collapsed);
+  }, [collapsed]);
   const toggleGroup = (group) => {
-    setSubItemsCollapsed((prevState) => ({
+    setOpenGroups((prevState) => ({
       ...prevState,
       [group]: !prevState[group]
     }));
   };
-  const isActive = (link) => {
-    return location.pathname.startsWith(link);
+  const itemLayoutClass = (active, itemClassName) => cn(
+    "flex cursor-pointer",
+    classNames?.navItem,
+    collapsed && "w-full flex-col items-center justify-center gap-0.5 px-1 py-2 my-1 !mx-0 max-w-full min-w-0 box-border text-center min-h-11",
+    active && "active",
+    itemClassName
+  );
+  const renderLink = (item, key) => {
+    const active = isItemActive(location.pathname, item.link);
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "max-w-full min-w-0", "data-sidebar-item": item.name, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      ToolTip,
+      {
+        text: getItemTooltip(item),
+        placement: getTooltipPlacement(item, collapsed),
+        delayShow: 150,
+        className: "block max-w-full min-w-0",
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          import_react_router_dom6.Link,
+          {
+            to: item.link || "#",
+            className: itemLayoutClass(active, item.itemClassName),
+            "aria-current": active ? "page" : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SidebarItemIcon, { icon: item.icon, className: classNames?.navItemText }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                SidebarItemLabel,
+                {
+                  name: item.name,
+                  collapsed,
+                  className: classNames?.navItemText
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) }, key);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
-      className: `flex flex-col h-screen overflow-hidden ${collapsed ? `${sideCollapseWidth} justify-center items-center collapsed` : `${sidebarWidth}`} transition-all duration-100 ${className ?? ""}`,
+      className: cn(
+        "flex flex-col h-screen overflow-hidden",
+        collapsed ? `${sideCollapseWidth} items-stretch collapsed` : sidebarWidth,
+        "transition-[width] duration-200 ease-in-out motion-reduce:transition-none",
+        className
+      ),
       ...rest,
       children: [
         logoUrl && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -1630,134 +1703,206 @@ function Sidebar({
               "flex items-center justify-center h-16 border-b border-gray-300",
               classNames.logoSection
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: logoUrl, alt: logoAltText, className: "h-10" })
+            children: logoRouteUrl ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              import_react_router_dom6.Link,
+              {
+                to: logoRouteUrl,
+                className: "sidebar-logo-link inline-flex items-center justify-center",
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: logoUrl, alt: logoAltText, className: "h-10" })
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: logoUrl, alt: logoAltText, className: "h-10" })
           }
         ),
-        header && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center justify-between p-4 border-b border-gray-300", children: header }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { className: cn("flex-grow", classNames.navSection), children: items.map((item, index) => {
-          if (item.subItems) {
-            return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-              "div",
-              {
-                className: `my-2 ${item?.subItems && "has-sub-items"}`,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                    "div",
-                    {
-                      onClick: () => toggleGroup(item.name),
-                      "data-sidebar-item": item.name,
-                      "data-tooltip-id": item.name,
-                      className: `flex cursor-pointer dropdown-title-wrapper ${classNames?.navItem ?? ""}`,
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                          ToolTip,
-                          {
-                            text: item.tooltip || item.name,
-                            placement: item.tooltipPlacement || "top",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-2", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: classNames?.navItemText, children: item.icon }),
-                              !collapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: classNames?.navItemText, children: item.name })
-                            ] })
-                          }
-                        ),
-                        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                          "span",
-                          {
-                            className: `transform transition-transform ${subItemsCollapsed[item.name] ? "rotate-180" : "rotate-0"}`,
-                            children: itemDropdownIcon
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  subItemsCollapsed[item.name] && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("collapse-btn-wrapper", classNames.subItem), children: item.subItems.map((subItem, subIndex) => {
-                    if (subItem.component) {
-                      const SubItemComponent = subItem.component;
-                      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SubItemComponent, {}, `${index}-${subIndex}`);
-                    }
-                    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                      "div",
-                      {
-                        className: "w-full",
-                        "data-sidebar-item": subItem.name,
-                        "data-tooltip-id": subItem.name,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                          ToolTip,
-                          {
-                            text: item.tooltip || item.name,
-                            placement: item.tooltipPlacement || "top",
-                            className: "block w-full",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                              import_react_router_dom6.Link,
-                              {
-                                to: subItem.link || "#",
-                                className: `flex ${classNames?.navItem ?? ""} ${isActive(subItem?.link ?? "") ? "active" : ""} ${item?.itemClassName}`,
-                                onClick: () => subItem.link && setActiveLink(subItem.link || ""),
-                                title: subItem.tooltip || subItem.name,
-                                children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                                    "span",
-                                    {
-                                      className: classNames.navItemText ?? "text-orange-600",
-                                      children: subItem.icon
-                                    }
+        header && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center justify-between p-4 border-b border-gray-300 shrink-0", children: header }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "nav",
+          {
+            "aria-label": "Sidebar",
+            className: cn(
+              "grow min-h-0 min-w-0 w-full",
+              classNames.navSection
+            ),
+            children: items.map((item, index) => {
+              if (item.subItems) {
+                const groupOpen = Boolean(openGroups[item.name]);
+                const groupId = `sidebar-group-${index}`;
+                return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  "div",
+                  {
+                    "data-sidebar-item": item.name,
+                    className: cn(
+                      "has-sub-items max-w-full min-w-0 flex flex-col",
+                      collapsed ? "my-1" : "my-2"
+                    ),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        ToolTip,
+                        {
+                          text: getItemTooltip(item),
+                          placement: getTooltipPlacement(item, collapsed),
+                          delayShow: 150,
+                          className: "flex flex-col w-full max-w-full min-w-0",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => toggleGroup(item.name),
+                              "data-sidebar-item": item.name,
+                              "aria-expanded": groupOpen,
+                              "aria-controls": groupId,
+                              className: cn(
+                                itemLayoutClass(false, item.itemClassName),
+                                !collapsed && "dropdown-title-wrapper",
+                                "relative appearance-none border-0 bg-transparent [font:inherit]"
+                              ),
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                                  "span",
+                                  {
+                                    className: cn(
+                                      "flex items-center min-w-0",
+                                      collapsed ? "flex-col gap-0.5 w-full" : "space-x-2 flex-1"
+                                    ),
+                                    children: [
+                                      collapsed ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "inline-flex w-3 shrink-0", "aria-hidden": "true" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                          SidebarItemIcon,
+                                          {
+                                            icon: item.icon,
+                                            className: classNames?.navItemText
+                                          }
+                                        ),
+                                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                          "span",
+                                          {
+                                            className: cn(
+                                              "sidebar-group-caret inline-flex w-3 shrink-0 items-center justify-center text-current [&>svg]:h-3 [&>svg]:w-3 transition-transform duration-200 motion-reduce:transition-none",
+                                              groupOpen ? "rotate-180" : "rotate-0"
+                                            ),
+                                            "aria-hidden": "true",
+                                            children: itemDropdownIcon
+                                          }
+                                        )
+                                      ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center space-x-2 min-w-0 flex-1", children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                          SidebarItemIcon,
+                                          {
+                                            icon: item.icon,
+                                            className: classNames?.navItemText
+                                          }
+                                        ),
+                                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                          SidebarItemLabel,
+                                          {
+                                            name: item.name,
+                                            collapsed: false,
+                                            className: classNames?.navItemText
+                                          }
+                                        )
+                                      ] }),
+                                      collapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                        SidebarItemLabel,
+                                        {
+                                          name: item.name,
+                                          collapsed: true,
+                                          className: classNames?.navItemText
+                                        }
+                                      )
+                                    ]
+                                  }
+                                ),
+                                !collapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                  "span",
+                                  {
+                                    className: cn(
+                                      "transform transition-transform duration-200 motion-reduce:transition-none",
+                                      groupOpen ? "rotate-180" : "rotate-0"
+                                    ),
+                                    "aria-hidden": "true",
+                                    children: itemDropdownIcon
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        }
+                      ),
+                      groupOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        "div",
+                        {
+                          id: groupId,
+                          role: "group",
+                          "aria-label": item.name,
+                          className: cn(
+                            collapsed ? "sidebar-sub-panel flex flex-col items-center max-w-full min-w-0 box-border" : "collapse-btn-wrapper",
+                            classNames.subItem
+                          ),
+                          children: item.subItems.map((subItem, subIndex) => {
+                            if (subItem.component) {
+                              const SubItemComponent = subItem.component;
+                              return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                                "div",
+                                {
+                                  className: cn(
+                                    "min-w-0 max-w-full",
+                                    collapsed && "flex flex-col items-center text-center"
                                   ),
-                                  !collapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: classNames.navItemText, children: subItem.name })
-                                ]
-                              }
-                            )
-                          }
-                        )
-                      },
-                      `${index}-${subIndex}`
-                    );
-                  }) })
-                ]
-              },
-              index
-            );
+                                  "data-sidebar-item": subItem.name,
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SubItemComponent, {}),
+                                    collapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                                      SidebarItemLabel,
+                                      {
+                                        name: subItem.name,
+                                        collapsed: true,
+                                        className: classNames?.navItemText
+                                      }
+                                    )
+                                  ]
+                                },
+                                `${index}-${subIndex}`
+                              );
+                            }
+                            return renderLink(subItem, `${index}-${subIndex}`);
+                          })
+                        }
+                      )
+                    ]
+                  },
+                  index
+                );
+              }
+              if (item.component) {
+                const ItemComponent = item.component;
+                return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ItemComponent, {}, index);
+              }
+              return renderLink(item, String(index));
+            })
           }
-          if (item.component) {
-            const ItemComponent = item.component;
-            return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ItemComponent, {}, index);
+        ),
+        children != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "div",
+          {
+            className: cn(
+              "sidebar-chrome w-full shrink-0",
+              collapsed && "flex flex-col items-center"
+            ),
+            children
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            "div",
-            {
-              className: "w-full",
-              "data-sidebar-item": item.name,
-              "data-tooltip-id": item.name,
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                ToolTip,
-                {
-                  text: item.tooltip || item.name,
-                  placement: item.tooltipPlacement || "top",
-                  className: "block w-full",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                    import_react_router_dom6.Link,
-                    {
-                      to: item.link || "#",
-                      className: `flex ${classNames?.navItem ?? ""} ${isActive(item.link || "") ? "active" : ""} ${item?.itemClassName}`,
-                      onClick: () => setActiveLink(item.link || ""),
-                      title: item.tooltip || item.name,
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: classNames.navItemText ?? "text-orange-600", children: item.icon }),
-                        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: classNames.navItemText, children: item.name })
-                      ]
-                    }
-                  )
-                }
-              )
-            },
-            index
-          );
-        }) }),
-        children,
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "button",
           {
+            type: "button",
             onClick: () => setCollapsed(!collapsed),
-            className: cn("", classNames.collapseButton) ?? "p-4 border-t border-gray-300",
+            "aria-expanded": !collapsed,
+            "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+            className: cn(
+              "shrink-0 border-t border-gray-300",
+              classNames.collapseButton,
+              collapsed && "flex items-center justify-center"
+            ),
             children: collapsed ? expandButtonText : collapseButtonText
           }
         ),