box-ui-elements 23.4.0-beta.18 → 23.4.0-beta.19

package/es/elements/common/back-button/BackButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackButton.js","names":["React","classNames","FormattedMessage","IconNavigateLeft","messages","PlainButton","BackButton","_ref","className","onClick","rest","_objectWithoutProperties","_excluded","createElement","_extends","type","height","width","back"],"sources":["../../../../src/elements/common/back-button/BackButton.js"],"sourcesContent":["/**\n * @flow\n * @file Back Button component\n * @author Box\n */\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { FormattedMessage } from 'react-intl';\nimport IconNavigateLeft from '../../../icons/general/IconNavigateLeft';\nimport messages from '../messages';\nimport PlainButton from '../../../components/plain-button';\nimport './BackButton.scss';\n\ntype Props = {\n    className?: string,\n    onClick: () => void,\n};\n\nconst BackButton = ({ className, onClick, ...rest }: Props) => (\n    <PlainButton className={classNames('bdl-BackButton', className)} onClick={onClick} type=\"button\" {...rest}>\n        <IconNavigateLeft height={24} width={24} />\n        <span className=\"accessibility-hidden\">\n            <FormattedMessage {...messages.back} />\n        </span>\n    </PlainButton>\n);\n\nexport default BackButton;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,OAAOC,gBAAgB,MAAM,yCAAyC;AACtE,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,WAAW,MAAM,kCAAkC;AAC1D,OAAO,mBAAmB;AAO1B,MAAMC,UAAU,GAAGC,IAAA;EAAA,IAAC;MAAEC,SAAS;MAAEC;IAAwB,CAAC,GAAAF,IAAA;IAAbG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAAA,oBAC7CZ,KAAA,CAAAa,aAAA,CAACR,WAAW,EAAAS,QAAA;IAACN,SAAS,EAAEP,UAAU,CAAC,gBAAgB,EAAEO,SAAS,CAAE;IAACC,OAAO,EAAEA,OAAQ;IAACM,IAAI,EAAC;EAAQ,GAAKL,IAAI,gBACrGV,KAAA,CAAAa,aAAA,CAACV,gBAAgB;IAACa,MAAM,EAAE,EAAG;IAACC,KAAK,EAAE;EAAG,CAAE,CAAC,eAC3CjB,KAAA,CAAAa,aAAA;IAAML,SAAS,EAAC;EAAsB,gBAClCR,KAAA,CAAAa,aAAA,CAACX,gBAAgB,EAAKE,QAAQ,CAACc,IAAO,CACpC,CACG,CAAC;AAAA,CACjB;AAED,eAAeZ,UAAU","ignoreList":[]}

package/es/elements/common/back-button/index.js

@@ -0,0 +1,3 @@
+export { default as BackButton } from './BackButton';
+export { default } from './BackButton';
+//# sourceMappingURL=index.js.map

package/es/elements/common/{nav-button → back-button}/index.js.flow

@@ -1,2 +1,2 @@
 export { default as BackButton } from './BackButton';
-export { default } from './NavButton';
+export { default } from './BackButton';

package/es/elements/common/back-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","BackButton"],"sources":["../../../../src/elements/common/back-button/index.js"],"sourcesContent":["export { default as BackButton } from './BackButton';\nexport { default } from './BackButton';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAAU,QAAQ,cAAc;AACpD,SAASD,OAAO,QAAQ,cAAc","ignoreList":[]}

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

@@ -7,8 +7,10 @@
 import * as React from 'react';
 import { Route } from 'react-router-dom';
 import noop from 'lodash/noop';
-import NavButton from '../common/nav-button';
+import classNames from 'classnames';
+import { Button } from '@box/blueprint-web';
 import Tooltip from '../../components/tooltip/Tooltip';
+import { isLeftClick } from '../../utils/dom';
 import './SidebarNavButton.scss';
 const SidebarNavButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -23,46 +25,51 @@ const SidebarNavButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     tooltip
   } = props;
   const sidebarPath = `/${sidebarView}`;
-  const handleNavButtonClick = () => {
-    onClick(sidebarView);
-  };
   return /*#__PURE__*/React.createElement(Route, {
     path: sidebarPath
   }, ({
-    match
+    match,
+    history
   }) => {
     const isMatch = !!match;
-    const isActive = () => isMatch && !!isOpen;
-    const isActiveValue = isActive();
+    const isActiveValue = isMatch && !!isOpen;
     const isExactMatch = isMatch && match.isExact;
     const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
+    const handleNavButtonClick = event => {
+      onClick(sidebarView);
+      if (!event.defaultPrevented && isLeftClick(event)) {
+        const method = isExactMatch ? history.replace : history.push;
+        method({
+          pathname: sidebarPath,
+          state: {
+            open: true
+          }
+        });
+      }
+    };
     return /*#__PURE__*/React.createElement(Tooltip, {
       position: "middle-left",
       text: tooltip,
       isTabbable: false
-    }, /*#__PURE__*/React.createElement(NavButton, {
-      activeClassName: "bcs-is-selected",
-      "aria-selected": isActiveValue,
+    }, /*#__PURE__*/React.createElement(Button, {
+      accessibleWhenDisabled: true,
       "aria-controls": `${id}-content`,
       "aria-label": tooltip,
-      className: "bcs-NavButton",
+      "aria-selected": isActiveValue,
+      className: classNames('bcs-NavButton', {
+        'bcs-is-selected': isActiveValue,
+        'bdl-is-disabled': isDisabled
+      }),
       "data-resin-target": dataResinTarget,
       "data-testid": dataTestId,
-      getDOMRef: ref,
+      ref: ref,
       id: id,
-      isActive: isActive,
-      isDisabled: isDisabled,
+      disabled: isDisabled,
       onClick: handleNavButtonClick,
-      replace: isExactMatch,
       role: "tab",
       tabIndex: isActiveValue ? '0' : '-1',
-      to: {
-        pathname: sidebarPath,
-        state: {
-          open: true
-        }
-      },
-      type: "button"
+      type: "button",
+      variant: "tertiary"
     }, children));
   });
 });

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

@@ -7,8 +7,10 @@
 import * as React from 'react';
 import { Route } from 'react-router-dom';
 import noop from 'lodash/noop';
-import NavButton from '../common/nav-button';
+import classNames from 'classnames';
+import { Button } from '@box/blueprint-web';
 import Tooltip from '../../components/tooltip/Tooltip';
+import { isLeftClick } from '../../utils/dom';
 import './SidebarNavButton.scss';
 
 type Props = {
@@ -37,45 +39,50 @@ const SidebarNavButton = React.forwardRef<Props, React.Ref<any>>((props: Props,
     } = props;
     const sidebarPath = `/${sidebarView}`;
 
-    const handleNavButtonClick = () => {
-        onClick(sidebarView);
-    };
-
     return (
         <Route path={sidebarPath}>
-            {({ match }) => {
+            {({ match, history }) => {
                 const isMatch = !!match;
-                const isActive = () => isMatch && !!isOpen;
-                const isActiveValue = isActive();
+                const isActiveValue = isMatch && !!isOpen;
                 const isExactMatch = isMatch && match.isExact;
                 const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
 
+                const handleNavButtonClick = event => {
+                    onClick(sidebarView);
+
+                    if (!event.defaultPrevented && isLeftClick(event)) {
+                        const method = isExactMatch ? history.replace : history.push;
+                        method({
+                            pathname: sidebarPath,
+                            state: { open: true },
+                        });
+                    }
+                };
+
                 return (
                     <Tooltip position="middle-left" text={tooltip} isTabbable={false}>
-                        <NavButton
-                            activeClassName="bcs-is-selected"
-                            aria-selected={isActiveValue}
+                        <Button
+                            accessibleWhenDisabled={true}
                             aria-controls={`${id}-content`}
                             aria-label={tooltip}
-                            className="bcs-NavButton"
+                            aria-selected={isActiveValue}
+                            className={classNames('bcs-NavButton', {
+                                'bcs-is-selected': isActiveValue,
+                                'bdl-is-disabled': isDisabled,
+                            })}
                             data-resin-target={dataResinTarget}
                             data-testid={dataTestId}
-                            getDOMRef={ref}
+                            ref={ref}
                             id={id}
-                            isActive={isActive}
-                            isDisabled={isDisabled}
+                            disabled={isDisabled}
                             onClick={handleNavButtonClick}
-                            replace={isExactMatch}
                             role="tab"
                             tabIndex={isActiveValue ? '0' : '-1'}
-                            to={{
-                                pathname: sidebarPath,
-                                state: { open: true },
-                            }}
                             type="button"
+                            variant="tertiary"
                         >
                             {children}
-                        </NavButton>
+                        </Button>
                     </Tooltip>
                 );
             }}

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarNavButton.js","names":["React","Route","noop","NavButton","Tooltip","SidebarNavButton","forwardRef","props","ref","dataResinTarget","dataTestId","children","elementId","isDisabled","isOpen","onClick","sidebarView","tooltip","sidebarPath","handleNavButtonClick","createElement","path","match","isMatch","isActive","isActiveValue","isExactMatch","isExact","id","position","text","isTabbable","activeClassName","className","getDOMRef","replace","role","tabIndex","to","pathname","state","open","type"],"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 NavButton from '../common/nav-button';\nimport Tooltip from '../../components/tooltip/Tooltip';\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    const handleNavButtonClick = () => {\n        onClick(sidebarView);\n    };\n\n    return (\n        <Route path={sidebarPath}>\n            {({ match }) => {\n                const isMatch = !!match;\n                const isActive = () => isMatch && !!isOpen;\n                const isActiveValue = isActive();\n                const isExactMatch = isMatch && match.isExact;\n                const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;\n\n                return (\n                    <Tooltip position=\"middle-left\" text={tooltip} isTabbable={false}>\n                        <NavButton\n                            activeClassName=\"bcs-is-selected\"\n                            aria-selected={isActiveValue}\n                            aria-controls={`${id}-content`}\n                            aria-label={tooltip}\n                            className=\"bcs-NavButton\"\n                            data-resin-target={dataResinTarget}\n                            data-testid={dataTestId}\n                            getDOMRef={ref}\n                            id={id}\n                            isActive={isActive}\n                            isDisabled={isDisabled}\n                            onClick={handleNavButtonClick}\n                            replace={isExactMatch}\n                            role=\"tab\"\n                            tabIndex={isActiveValue ? '0' : '-1'}\n                            to={{\n                                pathname: sidebarPath,\n                                state: { open: true },\n                            }}\n                            type=\"button\"\n                        >\n                            {children}\n                        </NavButton>\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,SAAS,MAAM,sBAAsB;AAC5C,OAAOC,OAAO,MAAM,kCAAkC;AACtD,OAAO,yBAAyB;AAchC,MAAMC,gBAAgB,gBAAGL,KAAK,CAACM,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,GAAGb,IAAI;IACdc,WAAW;IACXC;EACJ,CAAC,GAAGV,KAAK;EACT,MAAMW,WAAW,GAAG,IAAIF,WAAW,EAAE;EAErC,MAAMG,oBAAoB,GAAGA,CAAA,KAAM;IAC/BJ,OAAO,CAACC,WAAW,CAAC;EACxB,CAAC;EAED,oBACIhB,KAAA,CAAAoB,aAAA,CAACnB,KAAK;IAACoB,IAAI,EAAEH;EAAY,GACpB,CAAC;IAAEI;EAAM,CAAC,KAAK;IACZ,MAAMC,OAAO,GAAG,CAAC,CAACD,KAAK;IACvB,MAAME,QAAQ,GAAGA,CAAA,KAAMD,OAAO,IAAI,CAAC,CAACT,MAAM;IAC1C,MAAMW,aAAa,GAAGD,QAAQ,CAAC,CAAC;IAChC,MAAME,YAAY,GAAGH,OAAO,IAAID,KAAK,CAACK,OAAO;IAC7C,MAAMC,EAAE,GAAG,GAAGhB,SAAS,GAAGA,SAAS,KAAK,EAAE,GAAG,EAAE,GAAG,GAAG,GAAGI,WAAW,EAAE;IAErE,oBACIhB,KAAA,CAAAoB,aAAA,CAAChB,OAAO;MAACyB,QAAQ,EAAC,aAAa;MAACC,IAAI,EAAEb,OAAQ;MAACc,UAAU,EAAE;IAAM,gBAC7D/B,KAAA,CAAAoB,aAAA,CAACjB,SAAS;MACN6B,eAAe,EAAC,iBAAiB;MACjC,iBAAeP,aAAc;MAC7B,iBAAe,GAAGG,EAAE,UAAW;MAC/B,cAAYX,OAAQ;MACpBgB,SAAS,EAAC,eAAe;MACzB,qBAAmBxB,eAAgB;MACnC,eAAaC,UAAW;MACxBwB,SAAS,EAAE1B,GAAI;MACfoB,EAAE,EAAEA,EAAG;MACPJ,QAAQ,EAAEA,QAAS;MACnBX,UAAU,EAAEA,UAAW;MACvBE,OAAO,EAAEI,oBAAqB;MAC9BgB,OAAO,EAAET,YAAa;MACtBU,IAAI,EAAC,KAAK;MACVC,QAAQ,EAAEZ,aAAa,GAAG,GAAG,GAAG,IAAK;MACrCa,EAAE,EAAE;QACAC,QAAQ,EAAErB,WAAW;QACrBsB,KAAK,EAAE;UAAEC,IAAI,EAAE;QAAK;MACxB,CAAE;MACFC,IAAI,EAAC;IAAQ,GAEZ/B,QACM,CACN,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","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":[]}

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

@@ -3,6 +3,8 @@
 
 .bcs .bcs-NavButton {
     @include bdl-SidebarNavButton;
+    
+    border-radius: 0;
 
     &::before {
         position: absolute;
@@ -21,6 +23,11 @@
         }
     }
 
+    // Style disabled buttons with proper visual feedback
+    &[aria-disabled="true"] {
+        cursor: default;
+    }
+
     &.bcs-is-selected {
         &::before {
             background-color: $blue;
@@ -30,6 +37,12 @@
             fill: $blue;
         }
     }
+    
+    // Blueprint button focus override
+    &:not(:disabled)[data-focus-visible] {
+        border-radius: var(--radius-1);
+        box-shadow: 0 0 0 var(--border-2) var(--outline-focus-on-light);
+    }
 }
 
 @include breakpoint($medium-screen) {

package/es/elements/content-sidebar/versions/StaticVersionSidebar.js

@@ -8,7 +8,7 @@ import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Route } from 'react-router-dom';
 import BoxDrive140 from '../../../illustration/BoxDrive140';
-import { BackButton } from '../../common/nav-button';
+import BackButton from '../../common/back-button';
 import PrimaryButton from '../../../components/primary-button';
 import { LoadingIndicatorWrapper } from '../../../components/loading-indicator';
 import VersionsMenu from './VersionsMenu';

package/es/elements/content-sidebar/versions/StaticVersionSidebar.js.flow

@@ -10,7 +10,7 @@ import { Route } from 'react-router-dom';
 
 import BoxDrive140 from '../../../illustration/BoxDrive140';
 
-import { BackButton } from '../../common/nav-button';
+import BackButton from '../../common/back-button';
 import PrimaryButton from '../../../components/primary-button';
 import { LoadingIndicatorWrapper } from '../../../components/loading-indicator';
 import VersionsMenu from './VersionsMenu';

package/es/elements/content-sidebar/versions/StaticVersionSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"StaticVersionSidebar.js","names":["React","FormattedMessage","Route","BoxDrive140","BackButton","PrimaryButton","LoadingIndicatorWrapper","VersionsMenu","messages","StaticVersionsSidebar","isLoading","onUpgradeClick","parentName","versionTimestamp","Date","setDate","getDate","versions","map","versionNumber","id","version_number","type","permissions","can_preview","created_at","toUTCString","modified_by","size","trashed_at","uploader_display_name","createElement","history","className","role","Fragment","onClick","push","versionsTitle","crawlerPosition","fileId","versionCount","versionLimit","versionUpgradeLink","versionUpsell","upgradeButton"],"sources":["../../../../src/elements/content-sidebar/versions/StaticVersionSidebar.js"],"sourcesContent":["/**\n * @flow\n * @file Static Versions Sidebar component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { Route } from 'react-router-dom';\n\nimport BoxDrive140 from '../../../illustration/BoxDrive140';\n\nimport { BackButton } from '../../common/nav-button';\nimport PrimaryButton from '../../../components/primary-button';\nimport { LoadingIndicatorWrapper } from '../../../components/loading-indicator';\nimport VersionsMenu from './VersionsMenu';\n\nimport messages from './messages';\n\nimport './StaticVersionsSidebar.scss';\n\ntype Props = {\n    isLoading: boolean,\n    onUpgradeClick: () => void,\n    parentName: string,\n};\n\nconst StaticVersionsSidebar = ({ isLoading, onUpgradeClick, parentName }: Props): React.Node => {\n    const versionTimestamp = new Date();\n    versionTimestamp.setDate(versionTimestamp.getDate() - 1);\n\n    const versions = ['1', '2', '3'].map(versionNumber => {\n        return {\n            id: versionNumber,\n            version_number: versionNumber,\n            type: 'file_version',\n            permissions: {\n                can_preview: true,\n            },\n            created_at: versionTimestamp.toUTCString(),\n            modified_by: null,\n            size: 1875887,\n            trashed_at: null,\n            uploader_display_name: 'John Doe',\n        };\n    });\n\n    return (\n        <Route>\n            {({ history }) => (\n                <div\n                    className=\"bcs-StaticVersionSidebar\"\n                    role=\"tabpanel\"\n                    data-resin-component=\"preview\"\n                    data-resin-feature=\"versions\"\n                >\n                    <div className=\"bcs-StaticVersionSidebar-header\">\n                        <h3 className=\"bcs-StaticVersionSidebar-title\">\n                            <>\n                                <BackButton data-resin-target=\"back\" onClick={() => history.push(`/${parentName}`)} />\n                                <FormattedMessage {...messages.versionsTitle} />\n                            </>\n                        </h3>\n                    </div>\n\n                    <div className=\"bcs-StaticVersionSidebar-content-wrapper\">\n                        <LoadingIndicatorWrapper\n                            className=\"bcs-StaticVersionSidebar-content\"\n                            crawlerPosition=\"top\"\n                            isLoading={isLoading}\n                        >\n                            <VersionsMenu versions={versions} fileId=\"1\" versionCount={3} versionLimit={3} />\n                        </LoadingIndicatorWrapper>\n                    </div>\n\n                    <div className=\"bcs-StaticVersionSidebar-upsell-wrapper\">\n                        <div className=\"bcs-StaticVersionSidebar-upsell\">\n                            <BoxDrive140 className=\"bcs-StaticVersionSidebar-upsell-icon\" />\n                            <p className=\"bcs-StaticVersionSidebar-upsell-header\">\n                                <FormattedMessage {...messages.versionUpgradeLink} />\n                            </p>\n                            <p>\n                                <FormattedMessage {...messages.versionUpsell} />\n                            </p>\n                            <PrimaryButton\n                                className=\"bcs-StaticVersionSidebar-upsell-button\"\n                                data-resin-target=\"versioning_error_upgrade_cta\"\n                                onClick={onUpgradeClick}\n                                type=\"button\"\n                            >\n                                <FormattedMessage {...messages.upgradeButton} />\n                            </PrimaryButton>\n                        </div>\n                    </div>\n                </div>\n            )}\n        </Route>\n    );\n};\n\nexport default StaticVersionsSidebar;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"StaticVersionSidebar.js","names":["React","FormattedMessage","Route","BoxDrive140","BackButton","PrimaryButton","LoadingIndicatorWrapper","VersionsMenu","messages","StaticVersionsSidebar","isLoading","onUpgradeClick","parentName","versionTimestamp","Date","setDate","getDate","versions","map","versionNumber","id","version_number","type","permissions","can_preview","created_at","toUTCString","modified_by","size","trashed_at","uploader_display_name","createElement","history","className","role","Fragment","onClick","push","versionsTitle","crawlerPosition","fileId","versionCount","versionLimit","versionUpgradeLink","versionUpsell","upgradeButton"],"sources":["../../../../src/elements/content-sidebar/versions/StaticVersionSidebar.js"],"sourcesContent":["/**\n * @flow\n * @file Static Versions Sidebar component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { Route } from 'react-router-dom';\n\nimport BoxDrive140 from '../../../illustration/BoxDrive140';\n\nimport BackButton from '../../common/back-button';\nimport PrimaryButton from '../../../components/primary-button';\nimport { LoadingIndicatorWrapper } from '../../../components/loading-indicator';\nimport VersionsMenu from './VersionsMenu';\n\nimport messages from './messages';\n\nimport './StaticVersionsSidebar.scss';\n\ntype Props = {\n    isLoading: boolean,\n    onUpgradeClick: () => void,\n    parentName: string,\n};\n\nconst StaticVersionsSidebar = ({ isLoading, onUpgradeClick, parentName }: Props): React.Node => {\n    const versionTimestamp = new Date();\n    versionTimestamp.setDate(versionTimestamp.getDate() - 1);\n\n    const versions = ['1', '2', '3'].map(versionNumber => {\n        return {\n            id: versionNumber,\n            version_number: versionNumber,\n            type: 'file_version',\n            permissions: {\n                can_preview: true,\n            },\n            created_at: versionTimestamp.toUTCString(),\n            modified_by: null,\n            size: 1875887,\n            trashed_at: null,\n            uploader_display_name: 'John Doe',\n        };\n    });\n\n    return (\n        <Route>\n            {({ history }) => (\n                <div\n                    className=\"bcs-StaticVersionSidebar\"\n                    role=\"tabpanel\"\n                    data-resin-component=\"preview\"\n                    data-resin-feature=\"versions\"\n                >\n                    <div className=\"bcs-StaticVersionSidebar-header\">\n                        <h3 className=\"bcs-StaticVersionSidebar-title\">\n                            <>\n                                <BackButton data-resin-target=\"back\" onClick={() => history.push(`/${parentName}`)} />\n                                <FormattedMessage {...messages.versionsTitle} />\n                            </>\n                        </h3>\n                    </div>\n\n                    <div className=\"bcs-StaticVersionSidebar-content-wrapper\">\n                        <LoadingIndicatorWrapper\n                            className=\"bcs-StaticVersionSidebar-content\"\n                            crawlerPosition=\"top\"\n                            isLoading={isLoading}\n                        >\n                            <VersionsMenu versions={versions} fileId=\"1\" versionCount={3} versionLimit={3} />\n                        </LoadingIndicatorWrapper>\n                    </div>\n\n                    <div className=\"bcs-StaticVersionSidebar-upsell-wrapper\">\n                        <div className=\"bcs-StaticVersionSidebar-upsell\">\n                            <BoxDrive140 className=\"bcs-StaticVersionSidebar-upsell-icon\" />\n                            <p className=\"bcs-StaticVersionSidebar-upsell-header\">\n                                <FormattedMessage {...messages.versionUpgradeLink} />\n                            </p>\n                            <p>\n                                <FormattedMessage {...messages.versionUpsell} />\n                            </p>\n                            <PrimaryButton\n                                className=\"bcs-StaticVersionSidebar-upsell-button\"\n                                data-resin-target=\"versioning_error_upgrade_cta\"\n                                onClick={onUpgradeClick}\n                                type=\"button\"\n                            >\n                                <FormattedMessage {...messages.upgradeButton} />\n                            </PrimaryButton>\n                        </div>\n                    </div>\n                </div>\n            )}\n        </Route>\n    );\n};\n\nexport default StaticVersionsSidebar;\n"],"mappings":"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","ignoreList":[]}

package/es/elements/content-sidebar/versions/VersionsSidebar.js

@@ -15,7 +15,7 @@ import InlineError from '../../../components/inline-error';
 import messages from './messages';
 import SidebarContent from '../SidebarContent';
 import VersionsMenu from './VersionsMenu';
-import { BackButton } from '../../common/nav-button';
+import BackButton from '../../common/back-button';
 import { DEFAULT_FETCH_END } from '../../../constants';
 import { LoadingIndicatorWrapper } from '../../../components/loading-indicator';
 import './VersionsSidebar.scss';

package/es/elements/content-sidebar/versions/VersionsSidebar.js.flow

@@ -12,7 +12,7 @@ import InlineError from '../../../components/inline-error';
 import messages from './messages';
 import SidebarContent from '../SidebarContent';
 import VersionsMenu from './VersionsMenu';
-import { BackButton } from '../../common/nav-button';
+import BackButton from '../../common/back-button';
 import { DEFAULT_FETCH_END } from '../../../constants';
 import { LoadingIndicatorWrapper } from '../../../components/loading-indicator';
 import type { BoxItemVersion } from '../../../common/types/core';

package/es/elements/content-sidebar/versions/VersionsSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"VersionsSidebar.js","names":["React","FormattedMessage","Route","InlineError","messages","SidebarContent","VersionsMenu","BackButton","DEFAULT_FETCH_END","LoadingIndicatorWrapper","MAX_VERSIONS","VersionsSidebar","_ref","error","isLoading","parentName","versions","rest","_objectWithoutProperties","_excluded","showLimit","length","showVersions","showEmpty","showError","createElement","history","className","title","Fragment","onClick","push","versionsTitle","crawlerPosition","versionServerError","versionsEmpty","_extends","versionMaxEntries","values","maxVersions"],"sources":["../../../../src/elements/content-sidebar/versions/VersionsSidebar.js"],"sourcesContent":["/**\n * @flow\n * @file Versions Sidebar component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { Route } from 'react-router-dom';\nimport type { MessageDescriptor } from 'react-intl';\nimport InlineError from '../../../components/inline-error';\nimport messages from './messages';\nimport SidebarContent from '../SidebarContent';\nimport VersionsMenu from './VersionsMenu';\nimport { BackButton } from '../../common/nav-button';\nimport { DEFAULT_FETCH_END } from '../../../constants';\nimport { LoadingIndicatorWrapper } from '../../../components/loading-indicator';\nimport type { BoxItemVersion } from '../../../common/types/core';\nimport './VersionsSidebar.scss';\n\nconst MAX_VERSIONS = DEFAULT_FETCH_END;\n\ntype Props = {\n    error?: MessageDescriptor,\n    fileId: string,\n    isLoading: boolean,\n    parentName: string,\n    versionCount: number,\n    versionLimit: number,\n    versions: Array<BoxItemVersion>,\n};\n\nconst VersionsSidebar = ({ error, isLoading, parentName, versions, ...rest }: Props) => {\n    const showLimit = versions.length >= MAX_VERSIONS;\n    const showVersions = !!versions.length;\n    const showEmpty = !isLoading && !showVersions;\n    const showError = !!error;\n\n    return (\n        <Route>\n            {({ history }) => (\n                <SidebarContent\n                    className=\"bcs-Versions\"\n                    data-resin-component=\"preview\"\n                    data-resin-feature=\"versions\"\n                    title={\n                        <>\n                            <BackButton data-resin-target=\"back\" onClick={() => history.push(`/${parentName}`)} />\n                            <FormattedMessage {...messages.versionsTitle} />\n                        </>\n                    }\n                >\n                    <LoadingIndicatorWrapper\n                        className=\"bcs-Versions-content\"\n                        crawlerPosition=\"top\"\n                        isLoading={isLoading}\n                    >\n                        {showError && (\n                            <InlineError title={<FormattedMessage {...messages.versionServerError} />}>\n                                <FormattedMessage {...error} />\n                            </InlineError>\n                        )}\n\n                        {showEmpty && (\n                            <div className=\"bcs-Versions-empty\">\n                                <FormattedMessage {...messages.versionsEmpty} />\n                            </div>\n                        )}\n\n                        {showVersions && (\n                            <div className=\"bcs-Versions-menu\" data-testid=\"bcs-Versions-menu\">\n                                <VersionsMenu versions={versions} {...rest} />\n                            </div>\n                        )}\n                        {showLimit && (\n                            <div className=\"bcs-Versions-maxEntries\" data-testid=\"max-versions\">\n                                <FormattedMessage\n                                    {...messages.versionMaxEntries}\n                                    values={{\n                                        maxVersions: MAX_VERSIONS,\n                                    }}\n                                />\n                            </div>\n                        )}\n                    </LoadingIndicatorWrapper>\n                </SidebarContent>\n            )}\n        </Route>\n    );\n};\n\nexport default VersionsSidebar;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VersionsSidebar.js","names":["React","FormattedMessage","Route","InlineError","messages","SidebarContent","VersionsMenu","BackButton","DEFAULT_FETCH_END","LoadingIndicatorWrapper","MAX_VERSIONS","VersionsSidebar","_ref","error","isLoading","parentName","versions","rest","_objectWithoutProperties","_excluded","showLimit","length","showVersions","showEmpty","showError","createElement","history","className","title","Fragment","onClick","push","versionsTitle","crawlerPosition","versionServerError","versionsEmpty","_extends","versionMaxEntries","values","maxVersions"],"sources":["../../../../src/elements/content-sidebar/versions/VersionsSidebar.js"],"sourcesContent":["/**\n * @flow\n * @file Versions Sidebar component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { Route } from 'react-router-dom';\nimport type { MessageDescriptor } from 'react-intl';\nimport InlineError from '../../../components/inline-error';\nimport messages from './messages';\nimport SidebarContent from '../SidebarContent';\nimport VersionsMenu from './VersionsMenu';\nimport BackButton from '../../common/back-button';\nimport { DEFAULT_FETCH_END } from '../../../constants';\nimport { LoadingIndicatorWrapper } from '../../../components/loading-indicator';\nimport type { BoxItemVersion } from '../../../common/types/core';\nimport './VersionsSidebar.scss';\n\nconst MAX_VERSIONS = DEFAULT_FETCH_END;\n\ntype Props = {\n    error?: MessageDescriptor,\n    fileId: string,\n    isLoading: boolean,\n    parentName: string,\n    versionCount: number,\n    versionLimit: number,\n    versions: Array<BoxItemVersion>,\n};\n\nconst VersionsSidebar = ({ error, isLoading, parentName, versions, ...rest }: Props) => {\n    const showLimit = versions.length >= MAX_VERSIONS;\n    const showVersions = !!versions.length;\n    const showEmpty = !isLoading && !showVersions;\n    const showError = !!error;\n\n    return (\n        <Route>\n            {({ history }) => (\n                <SidebarContent\n                    className=\"bcs-Versions\"\n                    data-resin-component=\"preview\"\n                    data-resin-feature=\"versions\"\n                    title={\n                        <>\n                            <BackButton data-resin-target=\"back\" onClick={() => history.push(`/${parentName}`)} />\n                            <FormattedMessage {...messages.versionsTitle} />\n                        </>\n                    }\n                >\n                    <LoadingIndicatorWrapper\n                        className=\"bcs-Versions-content\"\n                        crawlerPosition=\"top\"\n                        isLoading={isLoading}\n                    >\n                        {showError && (\n                            <InlineError title={<FormattedMessage {...messages.versionServerError} />}>\n                                <FormattedMessage {...error} />\n                            </InlineError>\n                        )}\n\n                        {showEmpty && (\n                            <div className=\"bcs-Versions-empty\">\n                                <FormattedMessage {...messages.versionsEmpty} />\n                            </div>\n                        )}\n\n                        {showVersions && (\n                            <div className=\"bcs-Versions-menu\" data-testid=\"bcs-Versions-menu\">\n                                <VersionsMenu versions={versions} {...rest} />\n                            </div>\n                        )}\n                        {showLimit && (\n                            <div className=\"bcs-Versions-maxEntries\" data-testid=\"max-versions\">\n                                <FormattedMessage\n                                    {...messages.versionMaxEntries}\n                                    values={{\n                                        maxVersions: MAX_VERSIONS,\n                                    }}\n                                />\n                            </div>\n                        )}\n                    </LoadingIndicatorWrapper>\n                </SidebarContent>\n            )}\n        </Route>\n    );\n};\n\nexport default VersionsSidebar;\n"],"mappings":"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","ignoreList":[]}

package/package.json

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

package/src/elements/common/{nav-button → back-button}/__tests__/BackButton.test.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { render, screen, userEvent } from '../../../../test-utils/testing-library';
 import { BackButton } from '..';
 
-describe('elements/common/nav-button/BackButton', () => {
+describe('elements/common/back-button/BackButton', () => {
     const mockOnClick = jest.fn();
 
     beforeEach(() => {

package/src/elements/common/{nav-button → back-button}/index.js

@@ -1,2 +1,2 @@
 export { default as BackButton } from './BackButton';
-export { default } from './NavButton';
+export { default } from './BackButton';

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

@@ -7,8 +7,10 @@
 import * as React from 'react';
 import { Route } from 'react-router-dom';
 import noop from 'lodash/noop';
-import NavButton from '../common/nav-button';
+import classNames from 'classnames';
+import { Button } from '@box/blueprint-web';
 import Tooltip from '../../components/tooltip/Tooltip';
+import { isLeftClick } from '../../utils/dom';
 import './SidebarNavButton.scss';
 
 type Props = {
@@ -37,45 +39,50 @@ const SidebarNavButton = React.forwardRef<Props, React.Ref<any>>((props: Props,
     } = props;
     const sidebarPath = `/${sidebarView}`;
 
-    const handleNavButtonClick = () => {
-        onClick(sidebarView);
-    };
-
     return (
         <Route path={sidebarPath}>
-            {({ match }) => {
+            {({ match, history }) => {
                 const isMatch = !!match;
-                const isActive = () => isMatch && !!isOpen;
-                const isActiveValue = isActive();
+                const isActiveValue = isMatch && !!isOpen;
                 const isExactMatch = isMatch && match.isExact;
                 const id = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
 
+                const handleNavButtonClick = event => {
+                    onClick(sidebarView);
+
+                    if (!event.defaultPrevented && isLeftClick(event)) {
+                        const method = isExactMatch ? history.replace : history.push;
+                        method({
+                            pathname: sidebarPath,
+                            state: { open: true },
+                        });
+                    }
+                };
+
                 return (
                     <Tooltip position="middle-left" text={tooltip} isTabbable={false}>
-                        <NavButton
-                            activeClassName="bcs-is-selected"
-                            aria-selected={isActiveValue}
+                        <Button
+                            accessibleWhenDisabled={true}
                             aria-controls={`${id}-content`}
                             aria-label={tooltip}
-                            className="bcs-NavButton"
+                            aria-selected={isActiveValue}
+                            className={classNames('bcs-NavButton', {
+                                'bcs-is-selected': isActiveValue,
+                                'bdl-is-disabled': isDisabled,
+                            })}
                             data-resin-target={dataResinTarget}
                             data-testid={dataTestId}
-                            getDOMRef={ref}
+                            ref={ref}
                             id={id}
-                            isActive={isActive}
-                            isDisabled={isDisabled}
+                            disabled={isDisabled}
                             onClick={handleNavButtonClick}
-                            replace={isExactMatch}
                             role="tab"
                             tabIndex={isActiveValue ? '0' : '-1'}
-                            to={{
-                                pathname: sidebarPath,
-                                state: { open: true },
-                            }}
                             type="button"
+                            variant="tertiary"
                         >
                             {children}
-                        </NavButton>
+                        </Button>
                     </Tooltip>
                 );
             }}

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

@@ -3,6 +3,8 @@
 
 .bcs .bcs-NavButton {
     @include bdl-SidebarNavButton;
+    
+    border-radius: 0;
 
     &::before {
         position: absolute;
@@ -21,6 +23,11 @@
         }
     }
 
+    // Style disabled buttons with proper visual feedback
+    &[aria-disabled="true"] {
+        cursor: default;
+    }
+
     &.bcs-is-selected {
         &::before {
             background-color: $blue;
@@ -30,6 +37,12 @@
             fill: $blue;
         }
     }
+    
+    // Blueprint button focus override
+    &:not(:disabled)[data-focus-visible] {
+        border-radius: var(--radius-1);
+        box-shadow: 0 0 0 var(--border-2) var(--outline-focus-on-light);
+    }
 }
 
 @include breakpoint($medium-screen) {