box-ui-elements 23.4.0-beta.21 → 23.4.0-beta.23

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/elements/content-sidebar/SidebarToggle.js

@@ -1,3 +1,8 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /**
  * 
  * @file Sidebar Toggle component
@@ -10,22 +15,35 @@ import SidebarToggleButton from '../../components/sidebar-toggle-button/SidebarT
 import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';
 const SidebarToggle = ({
   history,
-  isOpen
+  internalSidebarNavigation,
+  internalSidebarNavigationHandler,
+  isOpen,
+  routerDisabled = false
 }) => {
-  return /*#__PURE__*/React.createElement(SidebarToggleButton, {
-    "data-resin-target": SIDEBAR_NAV_TARGETS.TOGGLE,
-    "data-testid": "sidebartoggle"
-    // $FlowFixMe
-    ,
-    isOpen: isOpen,
-    onClick: event => {
-      event.preventDefault();
+  const handleToggleClick = event => {
+    event.preventDefault();
+    if (routerDisabled) {
+      // Use internal navigation handler when router is disabled
+      if (internalSidebarNavigationHandler && internalSidebarNavigation) {
+        internalSidebarNavigationHandler(_objectSpread(_objectSpread({}, internalSidebarNavigation), {}, {
+          open: !isOpen
+        }), true); // Always use replace for toggle
+      }
+    } else if (history) {
       history.replace({
         state: {
           open: !isOpen
         }
       });
     }
+  };
+  return /*#__PURE__*/React.createElement(SidebarToggleButton, {
+    "data-resin-target": SIDEBAR_NAV_TARGETS.TOGGLE,
+    "data-testid": "sidebartoggle"
+    // $FlowFixMe
+    ,
+    isOpen: isOpen,
+    onClick: handleToggleClick
   });
 };
 export { SidebarToggle as SidebarToggleComponent };

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

@@ -8,23 +8,46 @@ import * as React from 'react';
 import { withRouter, type RouterHistory } from 'react-router-dom';
 import SidebarToggleButton from '../../components/sidebar-toggle-button/SidebarToggleButton';
 import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';
+import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
 
 type Props = {
-    history: RouterHistory,
+    history?: RouterHistory,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     isOpen?: boolean,
+    routerDisabled?: boolean,
 };
 
-const SidebarToggle = ({ history, isOpen }: Props) => {
+const SidebarToggle = ({ 
+    history, 
+    internalSidebarNavigation,
+    internalSidebarNavigationHandler,
+    isOpen,
+    routerDisabled = false,
+}: Props) => {
+    const handleToggleClick = event => {
+        event.preventDefault();
+        
+        if (routerDisabled) {
+            // Use internal navigation handler when router is disabled
+            if (internalSidebarNavigationHandler && internalSidebarNavigation) {
+                internalSidebarNavigationHandler({
+                    ...internalSidebarNavigation,
+                    open: !isOpen,
+                }, true); // Always use replace for toggle
+            }
+        } else if (history) {
+            history.replace({ state: { open: !isOpen } });
+        }
+    };
+
     return (
         <SidebarToggleButton
             data-resin-target={SIDEBAR_NAV_TARGETS.TOGGLE}
             data-testid="sidebartoggle"
             // $FlowFixMe
             isOpen={isOpen}
-            onClick={event => {
-                event.preventDefault();
-                history.replace({ state: { open: !isOpen } });
-            }}
+            onClick={handleToggleClick}
         />
     );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarToggle.js","names":["React","withRouter","SidebarToggleButton","SIDEBAR_NAV_TARGETS","SidebarToggle","history","isOpen","createElement","TOGGLE","onClick","event","preventDefault","replace","state","open","SidebarToggleComponent"],"sources":["../../../src/elements/content-sidebar/SidebarToggle.js"],"sourcesContent":["/**\n * @flow strict\n * @file Sidebar Toggle component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { withRouter, type RouterHistory } from 'react-router-dom';\nimport SidebarToggleButton from '../../components/sidebar-toggle-button/SidebarToggleButton';\nimport { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';\n\ntype Props = {\n    history: RouterHistory,\n    isOpen?: boolean,\n};\n\nconst SidebarToggle = ({ history, isOpen }: Props) => {\n    return (\n        <SidebarToggleButton\n            data-resin-target={SIDEBAR_NAV_TARGETS.TOGGLE}\n            data-testid=\"sidebartoggle\"\n            // $FlowFixMe\n            isOpen={isOpen}\n            onClick={event => {\n                event.preventDefault();\n                history.replace({ state: { open: !isOpen } });\n            }}\n        />\n    );\n};\n\nexport { SidebarToggle as SidebarToggleComponent };\nexport default withRouter(SidebarToggle);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAA4B,kBAAkB;AACjE,OAAOC,mBAAmB,MAAM,4DAA4D;AAC5F,SAASC,mBAAmB,QAAQ,8BAA8B;AAOlE,MAAMC,aAAa,GAAGA,CAAC;EAAEC,OAAO;EAAEC;AAAc,CAAC,KAAK;EAClD,oBACIN,KAAA,CAAAO,aAAA,CAACL,mBAAmB;IAChB,qBAAmBC,mBAAmB,CAACK,MAAO;IAC9C,eAAY;IACZ;IAAA;IACAF,MAAM,EAAEA,MAAO;IACfG,OAAO,EAAEC,KAAK,IAAI;MACdA,KAAK,CAACC,cAAc,CAAC,CAAC;MACtBN,OAAO,CAACO,OAAO,CAAC;QAAEC,KAAK,EAAE;UAAEC,IAAI,EAAE,CAACR;QAAO;MAAE,CAAC,CAAC;IACjD;EAAE,CACL,CAAC;AAEV,CAAC;AAED,SAASF,aAAa,IAAIW,sBAAsB;AAChD,eAAed,UAAU,CAACG,aAAa,CAAC","ignoreList":[]}
+{"version":3,"file":"SidebarToggle.js","names":["React","withRouter","SidebarToggleButton","SIDEBAR_NAV_TARGETS","SidebarToggle","history","internalSidebarNavigation","internalSidebarNavigationHandler","isOpen","routerDisabled","handleToggleClick","event","preventDefault","_objectSpread","open","replace","state","createElement","TOGGLE","onClick","SidebarToggleComponent"],"sources":["../../../src/elements/content-sidebar/SidebarToggle.js"],"sourcesContent":["/**\n * @flow strict\n * @file Sidebar Toggle component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { withRouter, type RouterHistory } from 'react-router-dom';\nimport SidebarToggleButton from '../../components/sidebar-toggle-button/SidebarToggleButton';\nimport { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';\nimport type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';\n\ntype Props = {\n    history?: RouterHistory,\n    internalSidebarNavigation?: InternalSidebarNavigation,\n    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,\n    isOpen?: boolean,\n    routerDisabled?: boolean,\n};\n\nconst SidebarToggle = ({ \n    history, \n    internalSidebarNavigation,\n    internalSidebarNavigationHandler,\n    isOpen,\n    routerDisabled = false,\n}: Props) => {\n    const handleToggleClick = event => {\n        event.preventDefault();\n        \n        if (routerDisabled) {\n            // Use internal navigation handler when router is disabled\n            if (internalSidebarNavigationHandler && internalSidebarNavigation) {\n                internalSidebarNavigationHandler({\n                    ...internalSidebarNavigation,\n                    open: !isOpen,\n                }, true); // Always use replace for toggle\n            }\n        } else if (history) {\n            history.replace({ state: { open: !isOpen } });\n        }\n    };\n\n    return (\n        <SidebarToggleButton\n            data-resin-target={SIDEBAR_NAV_TARGETS.TOGGLE}\n            data-testid=\"sidebartoggle\"\n            // $FlowFixMe\n            isOpen={isOpen}\n            onClick={handleToggleClick}\n        />\n    );\n};\n\nexport { SidebarToggle as SidebarToggleComponent };\nexport default withRouter(SidebarToggle);\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAA4B,kBAAkB;AACjE,OAAOC,mBAAmB,MAAM,4DAA4D;AAC5F,SAASC,mBAAmB,QAAQ,8BAA8B;AAWlE,MAAMC,aAAa,GAAGA,CAAC;EACnBC,OAAO;EACPC,yBAAyB;EACzBC,gCAAgC;EAChCC,MAAM;EACNC,cAAc,GAAG;AACd,CAAC,KAAK;EACT,MAAMC,iBAAiB,GAAGC,KAAK,IAAI;IAC/BA,KAAK,CAACC,cAAc,CAAC,CAAC;IAEtB,IAAIH,cAAc,EAAE;MAChB;MACA,IAAIF,gCAAgC,IAAID,yBAAyB,EAAE;QAC/DC,gCAAgC,CAAAM,aAAA,CAAAA,aAAA,KACzBP,yBAAyB;UAC5BQ,IAAI,EAAE,CAACN;QAAM,IACd,IAAI,CAAC,CAAC,CAAC;MACd;IACJ,CAAC,MAAM,IAAIH,OAAO,EAAE;MAChBA,OAAO,CAACU,OAAO,CAAC;QAAEC,KAAK,EAAE;UAAEF,IAAI,EAAE,CAACN;QAAO;MAAE,CAAC,CAAC;IACjD;EACJ,CAAC;EAED,oBACIR,KAAA,CAAAiB,aAAA,CAACf,mBAAmB;IAChB,qBAAmBC,mBAAmB,CAACe,MAAO;IAC9C,eAAY;IACZ;IAAA;IACAV,MAAM,EAAEA,MAAO;IACfW,OAAO,EAAET;EAAkB,CAC9B,CAAC;AAEV,CAAC;AAED,SAASN,aAAa,IAAIgB,sBAAsB;AAChD,eAAenB,UAAU,CAACG,aAAa,CAAC","ignoreList":[]}

package/es/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.js

@@ -358,6 +358,15 @@ export const SwitchEditingTemplateInstances = {
     fileId: '416047501580',
     metadataSidebarProps: defaultMetadataSidebarProps
   },
+  parameters: {
+    msw: {
+      handlers: [...defaultMockHandlers, http.get(`/2.0/files/416047501580`, () => {
+        return HttpResponse.json(mockFileRequest.response);
+      }), http.get(`/2.0/files/416047501580/metadata`, () => {
+        return HttpResponse.json(mockMetadataInstances.response);
+      })]
+    }
+  },
   play: async ({
     canvasElement
   }) => {
@@ -563,7 +572,9 @@ export const SuggestionForNewlyCreatedTemplateInstance = {
       name: 'Autofill'
     });
     userEvent.click(autofillButton);
-    const suggestion = await canvas.findByText('4/1/2024');
+    const suggestion = await canvas.findByText('4/1/2024', {}, {
+      timeout: 5000
+    });
     expect(suggestion).toBeInTheDocument();
   }
 };