kiban-design-system 1.0.258-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: {
@@ -18254,7 +18262,10 @@ const Item$3 = ({ label, isDisabled, icon, onClick, isActive, subNavigationItems
     const anchorMarkup = (jsxs(AnchorComponent, Object.assign({}, anchorProps, { target: isExternal ? '_blank' : undefined, onClick: handleClick }, { children: [iconMarkup, labelMarkup] }), void 0));
     const tooltipAnchorMarkup = isCollapsed ? (jsx(AlphaTooltip, Object.assign({ content: label, position: 'right' }, { children: anchorMarkup }), void 0)) : null;
     const classNames = cssClassName(COMPONENT_NAME$p, isDisabled && 'isDisabled', isActive && 'isActive', truncateText && 'isTruncated', (isCollapsed !== undefined ? isCollapsed : collapsed) && 'isCollapsed');
-    return (jsx(motion.li, Object.assign({ layout: true, className: classNames }, { children: tooltipAnchorMarkup || anchorMarkup }), void 0));
+    return (jsx(motion.li, Object.assign({ layout: true, className: classNames, transition: {
+            duration: 0.3,
+            ease: [0.4, 0, 0.2, 1],
+        } }, { children: tooltipAnchorMarkup || anchorMarkup }), void 0));
 };
 
 const COMPONENT_NAME$o = 'AlphaSideMenu__Section';
@@ -18262,7 +18273,10 @@ const Section$1 = ({ items, fill, title, isCollapsed: isCollapsedProp, areSubNav
     const { collapsed } = useContext(SideMenuContext);
     const isCollapsed = isCollapsedProp !== undefined ? isCollapsedProp : collapsed;
     const titleClassNames = cssClassName(`${COMPONENT_NAME$o}__TitleWrapper`, (isCollapsed !== undefined ? isCollapsed : collapsed) && 'isCollapsed');
-    const titleMarkup = title ? (jsx(motion.div, Object.assign({ layout: true, className: titleClassNames }, { children: jsx(motion.span, Object.assign({ animate: {
+    const titleMarkup = title ? (jsx(motion.div, Object.assign({ layout: true, className: titleClassNames, transition: {
+            duration: 0.3,
+            ease: [0.4, 0, 0.2, 1],
+        } }, { children: jsx(motion.span, Object.assign({ animate: {
                 opacity: isCollapsed ? 0 : 1,
             }, layout: true }, { children: title }), void 0) }), void 0)) : null;
     const renderItem = (item, index) => {
@@ -18271,7 +18285,10 @@ const Section$1 = ({ items, fill, title, isCollapsed: isCollapsedProp, areSubNav
     };
     const itemsMarkup = items && items.length > 0 ? (jsx("ul", Object.assign({ className: `${COMPONENT_NAME$o}__Items` }, { children: items.map(renderItem) }), void 0)) : null;
     const classNames = cssClassName(COMPONENT_NAME$o, fill && 'isFill');
-    return (jsxs(motion.div, Object.assign({ className: classNames, layout: true }, { children: [titleMarkup, itemsMarkup] }), void 0));
+    return (jsxs(motion.div, Object.assign({ className: classNames, layout: true, transition: {
+            duration: 0.3,
+            ease: [0.4, 0, 0.2, 1],
+        } }, { children: [titleMarkup, itemsMarkup] }), void 0));
 };
 
 const COMPONENT_NAME$n = 'AlphaSideMenu__Tier';
@@ -18288,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);
@@ -18321,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;