kiban-design-system 1.0.259-alpha.0 → 1.0.260-alpha.0

package/dist/index.js

@@ -18226,15 +18226,23 @@ var motion = /*@__PURE__*/ createMotionProxy(function (Component, config) {
 const SideMenuContext = createContext({});
 
 const COMPONENT_NAME$p = 'AlphaSideMenu__Item';
-const Item$3 = ({ label, isDisabled, icon, onClick, isActive, subNavigationItems, truncateText, anchorProps, isCollapsed: isCollapsedProp, isSubNavigation, isExternal, }) => {
-    const { anchorComponent, collapsed, setCurrentTierItems } = useContext(SideMenuContext);
+const Item$3 = ({ label, isDisabled, icon, onClick, isActive: isActiveProp, subNavigationItems, truncateText, anchorProps, isCollapsed: isCollapsedProp, isSubNavigation, isExternal, isExact, url, }) => {
+    const { anchorComponent, collapsed, setCurrentTierItems, location } = useContext(SideMenuContext);
     const isCollapsed = isCollapsedProp !== undefined ? isCollapsedProp : collapsed;
     const AnchorComponent = anchorComponent || 'a';
+    const isActive = useMemo(() => {
+        if (location && url) {
+            return isExact
+                ? location.pathname === url
+                : location.pathname.includes(url);
+        }
+        return isActiveProp;
+    }, [location, isExact, isActiveProp, url]);
     useEffect(() => {
-        if (isActive && subNavigationItems) {
+        if (isActiveProp && subNavigationItems) {
             setCurrentTierItems === null || setCurrentTierItems === void 0 ? void 0 : setCurrentTierItems(subNavigationItems || [], label);
         }
-    }, [isActive]);
+    }, [isActiveProp]);
     const labelMarkup = label ? (jsx(motion.span, Object.assign({ layout: true, animate: {
             opacity: isCollapsed ? 0 : 1,
         }, transition: {
@@ -18297,7 +18305,7 @@ const Tier = ({ children, title, isCollapsed, onExpand, hasSubNavigation, collap
 };
 
 const COMPONENT_NAME$m = 'AlphaSideMenu';
-const AlphaSideMenu = ({ children, collapsed, anchorComponent, collapseExpandIcon, }) => {
+const AlphaSideMenu = ({ children, collapsed, anchorComponent, collapseExpandIcon, location, }) => {
     const [isCollapsed, setIsCollapsed] = useState(false);
     const [subNavigationTierItems, setSubNavigationTierItems] = useState([]);
     const [subNavigationTierTitle, setSubNavigationTierTitle] = useState(undefined);
@@ -18330,6 +18338,7 @@ const AlphaSideMenu = ({ children, collapsed, anchorComponent, collapseExpandIco
         anchorComponent,
         collapsed: isCollapsed,
         setCurrentTierItems: handleSetCurrentTierItems,
+        location,
     };
     const subNavigationSectionMarkup = (jsx(Section$1, { isCollapsed: false, items: subNavigationTierItems, areSubNavigationItems: true }, void 0));
     const subNavigationTierMarkup = subNavigationTierItems.length ? (jsx(Tier, Object.assign({ title: subNavigationTierTitle, isCollapsed: false }, { children: subNavigationSectionMarkup }), void 0)) : null;