box-ui-elements 23.4.0-beta.20 → 23.4.0-beta.22

package/es/elements/content-sidebar/SidebarNavButton.js

@@ -18,13 +18,62 @@ const SidebarNavButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     'data-testid': dataTestId,
     children,
     elementId = '',
+    internalSidebarNavigation,
+    internalSidebarNavigationHandler,
     isDisabled,
     isOpen,
     onClick = noop,
+    routerDisabled = false,
     sidebarView,
     tooltip
   } = props;
   const sidebarPath = `/${sidebarView}`;
+  const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
+  if (routerDisabled) {
+    // Mimic router behavior using internalSidebarNavigation
+    const isMatch = !!internalSidebarNavigation && internalSidebarNavigation.sidebar === sidebarView;
+    const isActiveValue = isMatch && !!isOpen;
+
+    // Mimic isExactMatch: true when no extra navigation parameters are present
+    const hasExtraParams = internalSidebarNavigation && (internalSidebarNavigation.versionId || internalSidebarNavigation.activeFeedEntryType || internalSidebarNavigation.activeFeedEntryId || internalSidebarNavigation.fileVersionId);
+    const isExactMatch = isMatch && !hasExtraParams;
+    const handleNavButtonClick = event => {
+      onClick(sidebarView);
+
+      // Mimic router navigation behavior
+      if (internalSidebarNavigationHandler && !event.defaultPrevented && isLeftClick(event)) {
+        const replace = isExactMatch;
+        internalSidebarNavigationHandler({
+          sidebar: sidebarView,
+          open: true
+        }, replace);
+      }
+    };
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      position: "middle-left",
+      text: tooltip,
+      isTabbable: false
+    }, /*#__PURE__*/React.createElement(Button, {
+      accessibleWhenDisabled: true,
+      "aria-controls": `${id}-content`,
+      "aria-label": tooltip,
+      "aria-selected": isActiveValue,
+      className: classNames('bcs-NavButton', {
+        'bcs-is-selected': isActiveValue,
+        'bdl-is-disabled': isDisabled
+      }),
+      "data-resin-target": dataResinTarget,
+      "data-testid": dataTestId,
+      ref: ref,
+      id: id,
+      disabled: isDisabled,
+      onClick: handleNavButtonClick,
+      role: "tab",
+      tabIndex: isActiveValue ? '0' : '-1',
+      type: "button",
+      variant: "tertiary"
+    }, children));
+  }
   return /*#__PURE__*/React.createElement(Route, {
     path: sidebarPath
   }, ({
@@ -34,7 +83,6 @@ const SidebarNavButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     const isMatch = !!match;
     const isActiveValue = isMatch && !!isOpen;
     const isExactMatch = isMatch && match.isExact;
-    const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
     const handleNavButtonClick = event => {
       onClick(sidebarView);
       if (!event.defaultPrevented && isLeftClick(event)) {

package/es/elements/content-sidebar/SidebarNavButton.js.flow

@@ -11,6 +11,7 @@ import classNames from 'classnames';
 import { Button } from '@box/blueprint-web';
 import Tooltip from '../../components/tooltip/Tooltip';
 import { isLeftClick } from '../../utils/dom';
+import type { InternalSidebarNavigation, InternalSidebarNavigationHandler, ViewTypeValues } from '../common/types/SidebarNavigation';
 import './SidebarNavButton.scss';
 
 type Props = {
@@ -18,10 +19,13 @@ type Props = {
     'data-testid'?: string,
     children: React.Node,
     elementId?: string,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     isDisabled?: boolean,
     isOpen?: boolean,
-    onClick?: (sidebarView: string) => void,
-    sidebarView: string,
+    onClick?: (sidebarView: ViewTypeValues) => void,
+    routerDisabled?: boolean,
+    sidebarView: ViewTypeValues,
     tooltip: React.Node,
 };
 
@@ -31,13 +35,72 @@ const SidebarNavButton = React.forwardRef<Props, React.Ref<any>>((props: Props,
         'data-testid': dataTestId,
         children,
         elementId = '',
+        internalSidebarNavigation,
+        internalSidebarNavigationHandler,
         isDisabled,
         isOpen,
         onClick = noop,
+        routerDisabled = false,
         sidebarView,
         tooltip,
     } = props;
     const sidebarPath = `/${sidebarView}`;
+    const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
+
+    if (routerDisabled) {
+        // Mimic router behavior using internalSidebarNavigation
+        const isMatch = !!internalSidebarNavigation && internalSidebarNavigation.sidebar === sidebarView;
+        const isActiveValue = isMatch && !!isOpen;
+        
+        // Mimic isExactMatch: true when no extra navigation parameters are present
+        const hasExtraParams = internalSidebarNavigation && (
+            internalSidebarNavigation.versionId ||
+            internalSidebarNavigation.activeFeedEntryType ||
+            internalSidebarNavigation.activeFeedEntryId ||
+            internalSidebarNavigation.fileVersionId
+        );
+        const isExactMatch = isMatch && !hasExtraParams;
+        
+        const handleNavButtonClick = event => {
+            onClick(sidebarView);
+            
+            // Mimic router navigation behavior
+            if (internalSidebarNavigationHandler && !event.defaultPrevented && isLeftClick(event)) {
+                const replace = isExactMatch;
+                internalSidebarNavigationHandler({
+                    sidebar: sidebarView,
+                    open: true,
+                }, replace);
+            }
+        };
+
+        return (
+            <Tooltip position="middle-left" text={tooltip} isTabbable={false}>
+                <Button
+                    accessibleWhenDisabled={true}
+                    aria-controls={`${id}-content`}
+                    aria-label={tooltip}
+                    aria-selected={isActiveValue}
+                    className={classNames('bcs-NavButton', {
+                        'bcs-is-selected': isActiveValue,
+                        'bdl-is-disabled': isDisabled,
+                    })}
+                    data-resin-target={dataResinTarget}
+                    data-testid={dataTestId}
+                    ref={ref}
+                    id={id}
+                    disabled={isDisabled}
+                    onClick={handleNavButtonClick}
+                    role="tab"
+                    tabIndex={isActiveValue ? '0' : '-1'}
+                    type="button"
+                    variant="tertiary"
+                >
+                    {children}
+                </Button>
+            </Tooltip>
+        );
+    }
 
     return (
         <Route path={sidebarPath}>
@@ -45,7 +108,6 @@ const SidebarNavButton = React.forwardRef<Props, React.Ref<any>>((props: Props,
                 const isMatch = !!match;
                 const isActiveValue = isMatch && !!isOpen;
                 const isExactMatch = isMatch && match.isExact;
-                const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
 
                 const handleNavButtonClick = event => {
                     onClick(sidebarView);

package/es/elements/content-sidebar/SidebarNavButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarNavButton.js","names":["React","Route","noop","classNames","Button","Tooltip","isLeftClick","SidebarNavButton","forwardRef","props","ref","dataResinTarget","dataTestId","children","elementId","isDisabled","isOpen","onClick","sidebarView","tooltip","sidebarPath","createElement","path","match","history","isMatch","isActiveValue","isExactMatch","isExact","id","handleNavButtonClick","event","defaultPrevented","method","replace","push","pathname","state","open","position","text","isTabbable","accessibleWhenDisabled","className","disabled","role","tabIndex","type","variant"],"sources":["../../../src/elements/content-sidebar/SidebarNavButton.js"],"sourcesContent":["/**\n * @flow\n * @file Preview sidebar nav button component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { Route } from 'react-router-dom';\nimport noop from 'lodash/noop';\nimport classNames from 'classnames';\nimport { Button } from '@box/blueprint-web';\nimport Tooltip from '../../components/tooltip/Tooltip';\nimport { isLeftClick } from '../../utils/dom';\nimport './SidebarNavButton.scss';\n\ntype Props = {\n    'data-resin-target'?: string,\n    'data-testid'?: string,\n    children: React.Node,\n    elementId?: string,\n    isDisabled?: boolean,\n    isOpen?: boolean,\n    onClick?: (sidebarView: string) => void,\n    sidebarView: string,\n    tooltip: React.Node,\n};\n\nconst SidebarNavButton = React.forwardRef<Props, React.Ref<any>>((props: Props, ref: React.Ref<any>) => {\n    const {\n        'data-resin-target': dataResinTarget,\n        'data-testid': dataTestId,\n        children,\n        elementId = '',\n        isDisabled,\n        isOpen,\n        onClick = noop,\n        sidebarView,\n        tooltip,\n    } = props;\n    const sidebarPath = `/${sidebarView}`;\n\n    return (\n        <Route path={sidebarPath}>\n            {({ match, history }) => {\n                const isMatch = !!match;\n                const isActiveValue = isMatch && !!isOpen;\n                const isExactMatch = isMatch && match.isExact;\n                const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;\n\n                const handleNavButtonClick = event => {\n                    onClick(sidebarView);\n\n                    if (!event.defaultPrevented && isLeftClick(event)) {\n                        const method = isExactMatch ? history.replace : history.push;\n                        method({\n                            pathname: sidebarPath,\n                            state: { open: true },\n                        });\n                    }\n                };\n\n                return (\n                    <Tooltip position=\"middle-left\" text={tooltip} isTabbable={false}>\n                        <Button\n                            accessibleWhenDisabled={true}\n                            aria-controls={`${id}-content`}\n                            aria-label={tooltip}\n                            aria-selected={isActiveValue}\n                            className={classNames('bcs-NavButton', {\n                                'bcs-is-selected': isActiveValue,\n                                'bdl-is-disabled': isDisabled,\n                            })}\n                            data-resin-target={dataResinTarget}\n                            data-testid={dataTestId}\n                            ref={ref}\n                            id={id}\n                            disabled={isDisabled}\n                            onClick={handleNavButtonClick}\n                            role=\"tab\"\n                            tabIndex={isActiveValue ? '0' : '-1'}\n                            type=\"button\"\n                            variant=\"tertiary\"\n                        >\n                            {children}\n                        </Button>\n                    </Tooltip>\n                );\n            }}\n        </Route>\n    );\n});\n\nexport default SidebarNavButton;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,kBAAkB;AACxC,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,OAAOC,OAAO,MAAM,kCAAkC;AACtD,SAASC,WAAW,QAAQ,iBAAiB;AAC7C,OAAO,yBAAyB;AAchC,MAAMC,gBAAgB,gBAAGP,KAAK,CAACQ,UAAU,CAAwB,CAACC,KAAY,EAAEC,GAAmB,KAAK;EACpG,MAAM;IACF,mBAAmB,EAAEC,eAAe;IACpC,aAAa,EAAEC,UAAU;IACzBC,QAAQ;IACRC,SAAS,GAAG,EAAE;IACdC,UAAU;IACVC,MAAM;IACNC,OAAO,GAAGf,IAAI;IACdgB,WAAW;IACXC;EACJ,CAAC,GAAGV,KAAK;EACT,MAAMW,WAAW,GAAG,IAAIF,WAAW,EAAE;EAErC,oBACIlB,KAAA,CAAAqB,aAAA,CAACpB,KAAK;IAACqB,IAAI,EAAEF;EAAY,GACpB,CAAC;IAAEG,KAAK;IAAEC;EAAQ,CAAC,KAAK;IACrB,MAAMC,OAAO,GAAG,CAAC,CAACF,KAAK;IACvB,MAAMG,aAAa,GAAGD,OAAO,IAAI,CAAC,CAACT,MAAM;IACzC,MAAMW,YAAY,GAAGF,OAAO,IAAIF,KAAK,CAACK,OAAO;IAC7C,MAAMC,EAAE,GAAG,GAAGf,SAAS,GAAGA,SAAS,KAAK,EAAE,GAAG,EAAE,GAAG,GAAG,GAAGI,WAAW,EAAE;IAErE,MAAMY,oBAAoB,GAAGC,KAAK,IAAI;MAClCd,OAAO,CAACC,WAAW,CAAC;MAEpB,IAAI,CAACa,KAAK,CAACC,gBAAgB,IAAI1B,WAAW,CAACyB,KAAK,CAAC,EAAE;QAC/C,MAAME,MAAM,GAAGN,YAAY,GAAGH,OAAO,CAACU,OAAO,GAAGV,OAAO,CAACW,IAAI;QAC5DF,MAAM,CAAC;UACHG,QAAQ,EAAEhB,WAAW;UACrBiB,KAAK,EAAE;YAAEC,IAAI,EAAE;UAAK;QACxB,CAAC,CAAC;MACN;IACJ,CAAC;IAED,oBACItC,KAAA,CAAAqB,aAAA,CAAChB,OAAO;MAACkC,QAAQ,EAAC,aAAa;MAACC,IAAI,EAAErB,OAAQ;MAACsB,UAAU,EAAE;IAAM,gBAC7DzC,KAAA,CAAAqB,aAAA,CAACjB,MAAM;MACHsC,sBAAsB,EAAE,IAAK;MAC7B,iBAAe,GAAGb,EAAE,UAAW;MAC/B,cAAYV,OAAQ;MACpB,iBAAeO,aAAc;MAC7BiB,SAAS,EAAExC,UAAU,CAAC,eAAe,EAAE;QACnC,iBAAiB,EAAEuB,aAAa;QAChC,iBAAiB,EAAEX;MACvB,CAAC,CAAE;MACH,qBAAmBJ,eAAgB;MACnC,eAAaC,UAAW;MACxBF,GAAG,EAAEA,GAAI;MACTmB,EAAE,EAAEA,EAAG;MACPe,QAAQ,EAAE7B,UAAW;MACrBE,OAAO,EAAEa,oBAAqB;MAC9Be,IAAI,EAAC,KAAK;MACVC,QAAQ,EAAEpB,aAAa,GAAG,GAAG,GAAG,IAAK;MACrCqB,IAAI,EAAC,QAAQ;MACbC,OAAO,EAAC;IAAU,GAEjBnC,QACG,CACH,CAAC;EAElB,CACG,CAAC;AAEhB,CAAC,CAAC;AAEF,eAAeN,gBAAgB","ignoreList":[]}
+{"version":3,"file":"SidebarNavButton.js","names":["React","Route","noop","classNames","Button","Tooltip","isLeftClick","SidebarNavButton","forwardRef","props","ref","dataResinTarget","dataTestId","children","elementId","internalSidebarNavigation","internalSidebarNavigationHandler","isDisabled","isOpen","onClick","routerDisabled","sidebarView","tooltip","sidebarPath","id","isMatch","sidebar","isActiveValue","hasExtraParams","versionId","activeFeedEntryType","activeFeedEntryId","fileVersionId","isExactMatch","handleNavButtonClick","event","defaultPrevented","replace","open","createElement","position","text","isTabbable","accessibleWhenDisabled","className","disabled","role","tabIndex","type","variant","path","match","history","isExact","method","push","pathname","state"],"sources":["../../../src/elements/content-sidebar/SidebarNavButton.js"],"sourcesContent":["/**\n * @flow\n * @file Preview sidebar nav button component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { Route } from 'react-router-dom';\nimport noop from 'lodash/noop';\nimport classNames from 'classnames';\nimport { Button } from '@box/blueprint-web';\nimport Tooltip from '../../components/tooltip/Tooltip';\nimport { isLeftClick } from '../../utils/dom';\nimport type { InternalSidebarNavigation, InternalSidebarNavigationHandler, ViewTypeValues } from '../common/types/SidebarNavigation';\nimport './SidebarNavButton.scss';\n\ntype Props = {\n    'data-resin-target'?: string,\n    'data-testid'?: string,\n    children: React.Node,\n    elementId?: string,\n    internalSidebarNavigation?: InternalSidebarNavigation,\n    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,\n    isDisabled?: boolean,\n    isOpen?: boolean,\n    onClick?: (sidebarView: ViewTypeValues) => void,\n    routerDisabled?: boolean,\n    sidebarView: ViewTypeValues,\n    tooltip: React.Node,\n};\n\nconst SidebarNavButton = React.forwardRef<Props, React.Ref<any>>((props: Props, ref: React.Ref<any>) => {\n    const {\n        'data-resin-target': dataResinTarget,\n        'data-testid': dataTestId,\n        children,\n        elementId = '',\n        internalSidebarNavigation,\n        internalSidebarNavigationHandler,\n        isDisabled,\n        isOpen,\n        onClick = noop,\n        routerDisabled = false,\n        sidebarView,\n        tooltip,\n    } = props;\n    const sidebarPath = `/${sidebarView}`;\n    const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;\n\n    if (routerDisabled) {\n        // Mimic router behavior using internalSidebarNavigation\n        const isMatch = !!internalSidebarNavigation && internalSidebarNavigation.sidebar === sidebarView;\n        const isActiveValue = isMatch && !!isOpen;\n        \n        // Mimic isExactMatch: true when no extra navigation parameters are present\n        const hasExtraParams = internalSidebarNavigation && (\n            internalSidebarNavigation.versionId ||\n            internalSidebarNavigation.activeFeedEntryType ||\n            internalSidebarNavigation.activeFeedEntryId ||\n            internalSidebarNavigation.fileVersionId\n        );\n        const isExactMatch = isMatch && !hasExtraParams;\n        \n        const handleNavButtonClick = event => {\n            onClick(sidebarView);\n            \n            // Mimic router navigation behavior\n            if (internalSidebarNavigationHandler && !event.defaultPrevented && isLeftClick(event)) {\n                const replace = isExactMatch;\n                internalSidebarNavigationHandler({\n                    sidebar: sidebarView,\n                    open: true,\n                }, replace);\n            }\n        };\n\n        return (\n            <Tooltip position=\"middle-left\" text={tooltip} isTabbable={false}>\n                <Button\n                    accessibleWhenDisabled={true}\n                    aria-controls={`${id}-content`}\n                    aria-label={tooltip}\n                    aria-selected={isActiveValue}\n                    className={classNames('bcs-NavButton', {\n                        'bcs-is-selected': isActiveValue,\n                        'bdl-is-disabled': isDisabled,\n                    })}\n                    data-resin-target={dataResinTarget}\n                    data-testid={dataTestId}\n                    ref={ref}\n                    id={id}\n                    disabled={isDisabled}\n                    onClick={handleNavButtonClick}\n                    role=\"tab\"\n                    tabIndex={isActiveValue ? '0' : '-1'}\n                    type=\"button\"\n                    variant=\"tertiary\"\n                >\n                    {children}\n                </Button>\n            </Tooltip>\n        );\n    }\n\n    return (\n        <Route path={sidebarPath}>\n            {({ match, history }) => {\n                const isMatch = !!match;\n                const isActiveValue = isMatch && !!isOpen;\n                const isExactMatch = isMatch && match.isExact;\n\n                const handleNavButtonClick = event => {\n                    onClick(sidebarView);\n\n                    if (!event.defaultPrevented && isLeftClick(event)) {\n                        const method = isExactMatch ? history.replace : history.push;\n                        method({\n                            pathname: sidebarPath,\n                            state: { open: true },\n                        });\n                    }\n                };\n\n                return (\n                    <Tooltip position=\"middle-left\" text={tooltip} isTabbable={false}>\n                        <Button\n                            accessibleWhenDisabled={true}\n                            aria-controls={`${id}-content`}\n                            aria-label={tooltip}\n                            aria-selected={isActiveValue}\n                            className={classNames('bcs-NavButton', {\n                                'bcs-is-selected': isActiveValue,\n                                'bdl-is-disabled': isDisabled,\n                            })}\n                            data-resin-target={dataResinTarget}\n                            data-testid={dataTestId}\n                            ref={ref}\n                            id={id}\n                            disabled={isDisabled}\n                            onClick={handleNavButtonClick}\n                            role=\"tab\"\n                            tabIndex={isActiveValue ? '0' : '-1'}\n                            type=\"button\"\n                            variant=\"tertiary\"\n                        >\n                            {children}\n                        </Button>\n                    </Tooltip>\n                );\n            }}\n        </Route>\n    );\n});\n\nexport default SidebarNavButton;\n"],"mappings":"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","ignoreList":[]}

package/es/features/header-flyout/styles/HeaderFlyout.scss

@@ -12,6 +12,13 @@
 .header-flyout-overlay {
     width: $flyout-list-width;
     height: $flyout-list-height;
+    animation: bdl-open-flyout-animation 0.3s cubic-bezier(0.32, 0, 0.33, 1.3);
+    animation-fill-mode: both;
+    transform-origin: top right;
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+    }
 
     .overlay {
         @include bdl-Overlay-container;
@@ -27,6 +34,18 @@
     }
 }
 
+@keyframes bdl-open-flyout-animation {
+    from {
+        opacity: 0;
+        transform: translateY(-10px) scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
 .header-flyout-list-container {
     .flyout-list-container-body {
         // the overall height, minus the top and bottom padding
@@ -102,6 +121,8 @@
         }
 
         .header-flyout-overlay {
+            animation: none;
+
             .header-flyout-title {
                 padding-bottom: 0;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.4.0-beta.20",
+    "version": "23.4.0-beta.22",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/elements/content-sidebar/SidebarNavButton.js

@@ -11,6 +11,7 @@ import classNames from 'classnames';
 import { Button } from '@box/blueprint-web';
 import Tooltip from '../../components/tooltip/Tooltip';
 import { isLeftClick } from '../../utils/dom';
+import type { InternalSidebarNavigation, InternalSidebarNavigationHandler, ViewTypeValues } from '../common/types/SidebarNavigation';
 import './SidebarNavButton.scss';
 
 type Props = {
@@ -18,10 +19,13 @@ type Props = {
     'data-testid'?: string,
     children: React.Node,
     elementId?: string,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     isDisabled?: boolean,
     isOpen?: boolean,
-    onClick?: (sidebarView: string) => void,
-    sidebarView: string,
+    onClick?: (sidebarView: ViewTypeValues) => void,
+    routerDisabled?: boolean,
+    sidebarView: ViewTypeValues,
     tooltip: React.Node,
 };
 
@@ -31,13 +35,72 @@ const SidebarNavButton = React.forwardRef<Props, React.Ref<any>>((props: Props,
         'data-testid': dataTestId,
         children,
         elementId = '',
+        internalSidebarNavigation,
+        internalSidebarNavigationHandler,
         isDisabled,
         isOpen,
         onClick = noop,
+        routerDisabled = false,
         sidebarView,
         tooltip,
     } = props;
     const sidebarPath = `/${sidebarView}`;
+    const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
+
+    if (routerDisabled) {
+        // Mimic router behavior using internalSidebarNavigation
+        const isMatch = !!internalSidebarNavigation && internalSidebarNavigation.sidebar === sidebarView;
+        const isActiveValue = isMatch && !!isOpen;
+        
+        // Mimic isExactMatch: true when no extra navigation parameters are present
+        const hasExtraParams = internalSidebarNavigation && (
+            internalSidebarNavigation.versionId ||
+            internalSidebarNavigation.activeFeedEntryType ||
+            internalSidebarNavigation.activeFeedEntryId ||
+            internalSidebarNavigation.fileVersionId
+        );
+        const isExactMatch = isMatch && !hasExtraParams;
+        
+        const handleNavButtonClick = event => {
+            onClick(sidebarView);
+            
+            // Mimic router navigation behavior
+            if (internalSidebarNavigationHandler && !event.defaultPrevented && isLeftClick(event)) {
+                const replace = isExactMatch;
+                internalSidebarNavigationHandler({
+                    sidebar: sidebarView,
+                    open: true,
+                }, replace);
+            }
+        };
+
+        return (
+            <Tooltip position="middle-left" text={tooltip} isTabbable={false}>
+                <Button
+                    accessibleWhenDisabled={true}
+                    aria-controls={`${id}-content`}
+                    aria-label={tooltip}
+                    aria-selected={isActiveValue}
+                    className={classNames('bcs-NavButton', {
+                        'bcs-is-selected': isActiveValue,
+                        'bdl-is-disabled': isDisabled,
+                    })}
+                    data-resin-target={dataResinTarget}
+                    data-testid={dataTestId}
+                    ref={ref}
+                    id={id}
+                    disabled={isDisabled}
+                    onClick={handleNavButtonClick}
+                    role="tab"
+                    tabIndex={isActiveValue ? '0' : '-1'}
+                    type="button"
+                    variant="tertiary"
+                >
+                    {children}
+                </Button>
+            </Tooltip>
+        );
+    }
 
     return (
         <Route path={sidebarPath}>
@@ -45,7 +108,6 @@ const SidebarNavButton = React.forwardRef<Props, React.Ref<any>>((props: Props,
                 const isMatch = !!match;
                 const isActiveValue = isMatch && !!isOpen;
                 const isExactMatch = isMatch && match.isExact;
-                const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
 
                 const handleNavButtonClick = event => {
                     onClick(sidebarView);

package/src/elements/content-sidebar/__tests__/SidebarNavButton.test.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { MemoryRouter, Router } from 'react-router-dom';
+// Using fireEvent for all click interactions instead of userEvent because 
+// userEvent.pointer with right-click doesn't reliably trigger onClick handlers
 import { render, screen, fireEvent } from '../../../test-utils/testing-library';
 import SidebarNavButton from '../SidebarNavButton';
 
@@ -197,7 +199,7 @@ describe('elements/content-sidebar/SidebarNavButton', () => {
             renderWithRouter({ onClick: mockOnClick }, mockHistoryWithDifferentPath);
 
             const button = screen.getByText('Activity');
-            fireEvent.click(button, { button: 0 });
+            fireEvent.click(button);
 
             expect(mockOnClick).toBeCalledWith('activity');
             expect(mockHistoryPush).toBeCalledWith({
@@ -213,7 +215,7 @@ describe('elements/content-sidebar/SidebarNavButton', () => {
             renderWithRouter({ onClick: mockOnClick });
 
             const button = screen.getByText('Activity');
-            fireEvent.click(button, { button: 0 });
+            fireEvent.click(button);
 
             expect(mockOnClick).toBeCalledWith('activity');
             expect(mockHistoryReplace).toBeCalledWith({
@@ -243,7 +245,6 @@ describe('elements/content-sidebar/SidebarNavButton', () => {
 
             const button = screen.getByText('Activity');
 
-            // Prevent default on the button click
             button.addEventListener('click', e => e.preventDefault());
             fireEvent.click(button, { button: 0 });
 
@@ -253,3 +254,154 @@ describe('elements/content-sidebar/SidebarNavButton', () => {
         });
     });
 });
+
+describe('elements/content-sidebar/SidebarNavButton - Router Disabled', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const defaultProps = {
+        routerDisabled: true,
+        tooltip: 'foo',
+        sidebarView: 'activity',
+        internalSidebarNavigation: { sidebar: 'skills' },
+    };
+
+    const renderWithoutRouter = ({ children = 'test button', ref, ...props }) =>
+        render(
+            <SidebarNavButton ref={ref} {...defaultProps} {...props}>
+                {children}
+            </SidebarNavButton>,
+        );
+
+    test('should render nav button properly', () => {
+        renderWithoutRouter({});
+        const button = screen.getByRole('tab');
+
+        expect(button).toHaveAttribute('aria-label', 'foo');
+        expect(button).toHaveAttribute('aria-selected', 'false');
+        expect(button).toHaveAttribute('aria-controls', 'activity-content');
+        expect(button).toHaveAttribute('role', 'tab');
+        expect(button).toHaveAttribute('tabindex', '-1');
+        expect(button).toHaveAttribute('type', 'button');
+        expect(button).toHaveAttribute('id', 'activity');
+        expect(button).toHaveClass('bcs-NavButton');
+        expect(button).not.toHaveClass('bcs-is-selected');
+        expect(button).toHaveTextContent('test button');
+    });
+
+    test.each`
+        internalSidebarNavigation                        | expected
+        ${null}                                         | ${false}
+        ${undefined}                                    | ${false}
+        ${{ sidebar: 'skills' }}                        | ${false}
+        ${{ sidebar: 'activity' }}                      | ${true}
+        ${{ sidebar: 'activity', versionId: '123' }}    | ${true}
+    `('should reflect active state ($expected) correctly based on internal navigation', ({ expected, internalSidebarNavigation }) => {
+        renderWithoutRouter({
+            internalSidebarNavigation,
+            isOpen: true,
+        });
+        const button = screen.getByRole('tab');
+
+        if (expected) {
+            expect(button).toHaveClass('bcs-is-selected');
+            expect(button).toHaveAttribute('aria-selected', 'true');
+            expect(button).toHaveAttribute('tabindex', '0');
+        } else {
+            expect(button).not.toHaveClass('bcs-is-selected');
+            expect(button).toHaveAttribute('aria-selected', 'false');
+            expect(button).toHaveAttribute('tabindex', '-1');
+        }
+    });
+
+    test('should call onClick with sidebarView when clicked', () => {
+        const mockOnClick = jest.fn();
+        const mockSidebarView = 'activity';
+
+        renderWithoutRouter({
+            onClick: mockOnClick,
+            sidebarView: mockSidebarView,
+        });
+        const button = screen.getByRole('tab');
+
+        fireEvent.click(button);
+        expect(mockOnClick).toBeCalledWith(mockSidebarView);
+    });
+
+    describe('navigation on click', () => {
+        const mockInternalSidebarNavigationHandler = jest.fn();
+
+        test('calls onClick handler and internalSidebarNavigationHandler with replace=false when not exact match', () => {
+            const mockOnClick = jest.fn();
+
+            renderWithoutRouter({
+                onClick: mockOnClick,
+                internalSidebarNavigation: { sidebar: 'activity', versionId: '123' },
+                internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+            });
+
+            const button = screen.getByRole('tab');
+            fireEvent.click(button);
+
+            expect(mockOnClick).toBeCalledWith('activity');
+            expect(mockInternalSidebarNavigationHandler).toBeCalledWith({
+                sidebar: 'activity',
+                open: true,
+            }, false);
+        });
+
+        test('calls internalSidebarNavigationHandler with replace=true when exact match', () => {
+            const mockOnClick = jest.fn();
+
+            renderWithoutRouter({
+                onClick: mockOnClick,
+                internalSidebarNavigation: { sidebar: 'activity' },
+                internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+            });
+
+            const button = screen.getByRole('tab');
+            fireEvent.click(button);
+
+            expect(mockOnClick).toBeCalledWith('activity');
+            expect(mockInternalSidebarNavigationHandler).toBeCalledWith({
+                sidebar: 'activity',
+                open: true,
+            }, true);
+        });
+
+        test('does not call internalSidebarNavigationHandler on right click', () => {
+            const mockOnClick = jest.fn();
+
+            renderWithoutRouter({
+                onClick: mockOnClick,
+                internalSidebarNavigation: { sidebar: 'activity' },
+                internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+            });
+
+            const button = screen.getByRole('tab');
+            fireEvent.click(button, { button: 1 });
+
+            expect(mockOnClick).toBeCalledWith('activity');
+            expect(mockInternalSidebarNavigationHandler).not.toBeCalled();
+        });
+
+        test('does not call internalSidebarNavigationHandler on prevented event', () => {
+            const mockOnClick = jest.fn();
+
+            renderWithoutRouter({
+                onClick: mockOnClick,
+                internalSidebarNavigation: { sidebar: 'activity' },
+                internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+            });
+
+            const button = screen.getByRole('tab');
+
+            button.addEventListener('click', e => e.preventDefault());
+            fireEvent.click(button, { button: 0 });
+
+            expect(mockOnClick).toBeCalledWith('activity');
+            expect(mockInternalSidebarNavigationHandler).not.toBeCalled();
+        });
+    });
+});

package/src/features/header-flyout/styles/HeaderFlyout.scss

@@ -12,6 +12,13 @@
 .header-flyout-overlay {
     width: $flyout-list-width;
     height: $flyout-list-height;
+    animation: bdl-open-flyout-animation 0.3s cubic-bezier(0.32, 0, 0.33, 1.3);
+    animation-fill-mode: both;
+    transform-origin: top right;
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+    }
 
     .overlay {
         @include bdl-Overlay-container;
@@ -27,6 +34,18 @@
     }
 }
 
+@keyframes bdl-open-flyout-animation {
+    from {
+        opacity: 0;
+        transform: translateY(-10px) scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
 .header-flyout-list-container {
     .flyout-list-container-body {
         // the overall height, minus the top and bottom padding
@@ -102,6 +121,8 @@
         }
 
         .header-flyout-overlay {
+            animation: none;
+
             .header-flyout-title {
                 padding-bottom: 0;
             }