box-ui-elements 23.4.0-beta.30 → 23.4.0-beta.31

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

@@ -38,10 +38,13 @@ const SidebarNav = ({
   hasMetadata,
   hasSkills,
   hasDocGen = false,
+  internalSidebarNavigation,
+  internalSidebarNavigationHandler,
   intl,
   isOpen,
   onNavigate,
   onPanelChange = noop,
+  routerDisabled,
   signSidebarProps
 }) => {
   const {
@@ -69,8 +72,11 @@ const SidebarNav = ({
     className: "bcs-SidebarNav-tabs"
   }, /*#__PURE__*/React.createElement(SidebarNavTablist, {
     elementId: elementId,
+    internalSidebarNavigation: internalSidebarNavigation,
+    internalSidebarNavigationHandler: internalSidebarNavigationHandler,
     isOpen: isOpen,
-    onNavigate: onNavigate
+    onNavigate: onNavigate,
+    routerDisabled: routerDisabled
   }, hasBoxAI && /*#__PURE__*/React.createElement(SidebarNavButton, {
     "data-resin-target": SIDEBAR_NAV_TARGETS.BOXAI,
     "data-target-id": "SidebarNavButton-boxAI",
@@ -121,6 +127,7 @@ const SidebarNav = ({
   })), hasDocGen && /*#__PURE__*/React.createElement(SidebarNavButton, {
     "data-resin-target": SIDEBAR_NAV_TARGETS.DOCGEN,
     "data-target-id": "SidebarNavButton-docGen",
+    "data-testid": "sidebardocgen",
     onClick: handleSidebarNavButtonClick,
     sidebarView: SIDEBAR_VIEW_DOCGEN,
     tooltip: intl.formatMessage(messages.sidebarDocGenTooltip)
@@ -129,14 +136,18 @@ const SidebarNav = ({
   }))), hasBoxSign && /*#__PURE__*/React.createElement("div", {
     className: "bcs-SidebarNav-secondary"
   }, /*#__PURE__*/React.createElement(SidebarNavSign, signSidebarProps)), hasAdditionalTabs && /*#__PURE__*/React.createElement("div", {
-    className: "bcs-SidebarNav-overflow"
+    className: "bcs-SidebarNav-overflow",
+    "data-testid": "additional-tabs-overflow"
   }, /*#__PURE__*/React.createElement(AdditionalTabs, {
     key: fileId,
     tabs: additionalTabs
   }))), /*#__PURE__*/React.createElement("div", {
     className: "bcs-SidebarNav-footer"
   }, /*#__PURE__*/React.createElement(SidebarToggle, {
-    isOpen: isOpen
+    internalSidebarNavigation: internalSidebarNavigation,
+    internalSidebarNavigationHandler: internalSidebarNavigationHandler,
+    isOpen: isOpen,
+    routerDisabled: routerDisabled
   })));
 };
 export default injectIntl(SidebarNav);

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

@@ -35,6 +35,7 @@ import {
 } from '../../constants';
 import { useFeatureConfig } from '../common/feature-checking';
 import type { NavigateOptions, AdditionalSidebarTab } from './flowTypes';
+import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
 import './SidebarNav.scss';
 import type { SignSidebarProps } from './SidebarNavSign';
 
@@ -49,10 +50,13 @@ type Props = {
     hasDocGen?: boolean,
     hasMetadata: boolean,
     hasSkills: boolean,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     intl: IntlShape,
     isOpen?: boolean,
     onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,
     onPanelChange?: (name: string, isInitialState: boolean) => void,
+    routerDisabled?: boolean,
     signSidebarProps: SignSidebarProps,
 };
 
@@ -67,10 +71,13 @@ const SidebarNav = ({
     hasMetadata,
     hasSkills,
     hasDocGen = false,
+    internalSidebarNavigation,
+    internalSidebarNavigationHandler,
     intl,
     isOpen,
     onNavigate,
     onPanelChange = noop,
+    routerDisabled,
     signSidebarProps,
 }: Props) => {
     const { enabled: hasBoxSign } = signSidebarProps || {};
@@ -91,7 +98,14 @@ const SidebarNav = ({
     return (
         <div className="bcs-SidebarNav" aria-label={intl.formatMessage(messages.sidebarNavLabel)}>
             <div className="bcs-SidebarNav-tabs">
-                <SidebarNavTablist elementId={elementId} isOpen={isOpen} onNavigate={onNavigate}>
+                <SidebarNavTablist
+                    elementId={elementId}
+                    internalSidebarNavigation={internalSidebarNavigation}
+                    internalSidebarNavigationHandler={internalSidebarNavigationHandler}
+                    isOpen={isOpen}
+                    onNavigate={onNavigate}
+                    routerDisabled={routerDisabled}
+                >
                     {hasBoxAI && (
                         <SidebarNavButton
                             data-resin-target={SIDEBAR_NAV_TARGETS.BOXAI}
@@ -161,6 +175,7 @@ const SidebarNav = ({
                         <SidebarNavButton
                             data-resin-target={SIDEBAR_NAV_TARGETS.DOCGEN}
                             data-target-id="SidebarNavButton-docGen"
+                            data-testid="sidebardocgen"
                             onClick={handleSidebarNavButtonClick}
                             sidebarView={SIDEBAR_VIEW_DOCGEN}
                             tooltip={intl.formatMessage(messages.sidebarDocGenTooltip)}
@@ -177,13 +192,18 @@ const SidebarNav = ({
                 )}
 
                 {hasAdditionalTabs && (
-                    <div className="bcs-SidebarNav-overflow">
+                    <div className="bcs-SidebarNav-overflow" data-testid="additional-tabs-overflow">
                         <AdditionalTabs key={fileId} tabs={additionalTabs} />
                     </div>
                 )}
             </div>
             <div className="bcs-SidebarNav-footer">
-                <SidebarToggle isOpen={isOpen} />
+                <SidebarToggle
+                    internalSidebarNavigation={internalSidebarNavigation}
+                    internalSidebarNavigationHandler={internalSidebarNavigationHandler}
+                    isOpen={isOpen}
+                    routerDisabled={routerDisabled}
+                />
             </div>
         </div>
     );

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarNav.js","names":["React","injectIntl","noop","BoxAiLogo","Size6","usePromptFocus","AdditionalTabs","DocGenIcon","IconChatRound","IconDocInfo","IconMagicWand","IconMetadataThick","SidebarNavButton","SidebarNavSign","SidebarNavTablist","SidebarToggle","messages","SIDEBAR_NAV_TARGETS","SIDEBAR_VIEW_ACTIVITY","SIDEBAR_VIEW_BOXAI","SIDEBAR_VIEW_DETAILS","SIDEBAR_VIEW_DOCGEN","SIDEBAR_VIEW_METADATA","SIDEBAR_VIEW_SKILLS","useFeatureConfig","SidebarNav","additionalTabs","elementId","fileId","hasActivity","hasAdditionalTabs","hasBoxAI","hasDetails","hasMetadata","hasSkills","hasDocGen","intl","isOpen","onNavigate","onPanelChange","signSidebarProps","enabled","hasBoxSign","disabledTooltip","boxAIDisabledTooltip","showOnlyNavButton","showOnlyBoxAINavButton","focusPrompt","handleSidebarNavButtonClick","sidebarview","createElement","className","formatMessage","sidebarNavLabel","BOXAI","isDisabled","onClick","sidebarView","tooltip","sidebarBoxAITitle","height","width","ACTIVITY","sidebarActivityTitle","DETAILS","sidebarDetailsTitle","SKILLS","sidebarSkillsTitle","METADATA","sidebarMetadataTitle","DOCGEN","sidebarDocGenTooltip","key","tabs"],"sources":["../../../src/elements/content-sidebar/SidebarNav.js"],"sourcesContent":["/**\n * @flow\n * @file Preview sidebar nav component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { injectIntl } from 'react-intl';\nimport type { IntlShape } from 'react-intl';\nimport noop from 'lodash/noop';\n// $FlowFixMe\nimport { BoxAiLogo } from '@box/blueprint-web-assets/icons/Logo';\n// $FlowFixMe\nimport { Size6 } from '@box/blueprint-web-assets/tokens/tokens';\nimport { usePromptFocus } from '@box/box-ai-content-answers';\nimport AdditionalTabs from './additional-tabs';\nimport DocGenIcon from '../../icon/fill/DocGenIcon';\nimport IconChatRound from '../../icons/general/IconChatRound';\nimport IconDocInfo from '../../icons/general/IconDocInfo';\nimport IconMagicWand from '../../icons/general/IconMagicWand';\nimport IconMetadataThick from '../../icons/general/IconMetadataThick';\nimport SidebarNavButton from './SidebarNavButton';\nimport SidebarNavSign from './SidebarNavSign';\nimport SidebarNavTablist from './SidebarNavTablist';\nimport SidebarToggle from './SidebarToggle';\nimport messages from '../common/messages';\nimport { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';\nimport {\n    SIDEBAR_VIEW_ACTIVITY,\n    SIDEBAR_VIEW_BOXAI,\n    SIDEBAR_VIEW_DETAILS,\n    SIDEBAR_VIEW_DOCGEN,\n    SIDEBAR_VIEW_METADATA,\n    SIDEBAR_VIEW_SKILLS,\n} from '../../constants';\nimport { useFeatureConfig } from '../common/feature-checking';\nimport type { NavigateOptions, AdditionalSidebarTab } from './flowTypes';\nimport './SidebarNav.scss';\nimport type { SignSidebarProps } from './SidebarNavSign';\n\ntype Props = {\n    additionalTabs?: Array<AdditionalSidebarTab>,\n    elementId: string,\n    fileId: string,\n    hasActivity: boolean,\n    hasAdditionalTabs: boolean,\n    hasBoxAI: boolean,\n    hasDetails: boolean,\n    hasDocGen?: boolean,\n    hasMetadata: boolean,\n    hasSkills: boolean,\n    intl: IntlShape,\n    isOpen?: boolean,\n    onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,\n    onPanelChange?: (name: string, isInitialState: boolean) => void,\n    signSidebarProps: SignSidebarProps,\n};\n\nconst SidebarNav = ({\n    additionalTabs,\n    elementId,\n    fileId,\n    hasActivity,\n    hasAdditionalTabs,\n    hasBoxAI,\n    hasDetails,\n    hasMetadata,\n    hasSkills,\n    hasDocGen = false,\n    intl,\n    isOpen,\n    onNavigate,\n    onPanelChange = noop,\n    signSidebarProps,\n}: Props) => {\n    const { enabled: hasBoxSign } = signSidebarProps || {};\n    const { disabledTooltip: boxAIDisabledTooltip, showOnlyNavButton: showOnlyBoxAINavButton } =\n        useFeatureConfig('boxai.sidebar');\n\n    const { focusPrompt } = usePromptFocus('.be.bcs');\n\n    const handleSidebarNavButtonClick = (sidebarview: string) => {\n        onPanelChange(sidebarview, false);\n\n        // If the Box AI sidebar is enabled, focus the Box AI sidebar prompt\n        if (sidebarview === SIDEBAR_VIEW_BOXAI) {\n            focusPrompt();\n        }\n    };\n\n    return (\n        <div className=\"bcs-SidebarNav\" aria-label={intl.formatMessage(messages.sidebarNavLabel)}>\n            <div className=\"bcs-SidebarNav-tabs\">\n                <SidebarNavTablist elementId={elementId} isOpen={isOpen} onNavigate={onNavigate}>\n                    {hasBoxAI && (\n                        <SidebarNavButton\n                            data-resin-target={SIDEBAR_NAV_TARGETS.BOXAI}\n                            data-target-id=\"SidebarNavButton-boxAI\"\n                            data-testid=\"sidebarboxai\"\n                            isDisabled={showOnlyBoxAINavButton}\n                            onClick={handleSidebarNavButtonClick}\n                            sidebarView={SIDEBAR_VIEW_BOXAI}\n                            tooltip={\n                                showOnlyBoxAINavButton\n                                    ? boxAIDisabledTooltip\n                                    : intl.formatMessage(messages.sidebarBoxAITitle)\n                            }\n                        >\n                            <BoxAiLogo height={Size6} width={Size6} />\n                        </SidebarNavButton>\n                    )}\n                    {hasActivity && (\n                        <SidebarNavButton\n                            data-resin-target={SIDEBAR_NAV_TARGETS.ACTIVITY}\n                            data-target-id=\"SidebarNavButton-activity\"\n                            data-testid=\"sidebaractivity\"\n                            onClick={handleSidebarNavButtonClick}\n                            sidebarView={SIDEBAR_VIEW_ACTIVITY}\n                            tooltip={intl.formatMessage(messages.sidebarActivityTitle)}\n                        >\n                            <IconChatRound className=\"bcs-SidebarNav-icon\" />\n                        </SidebarNavButton>\n                    )}\n                    {hasDetails && (\n                        <SidebarNavButton\n                            data-resin-target={SIDEBAR_NAV_TARGETS.DETAILS}\n                            data-target-id=\"SidebarNavButton-details\"\n                            data-testid=\"sidebardetails\"\n                            onClick={handleSidebarNavButtonClick}\n                            sidebarView={SIDEBAR_VIEW_DETAILS}\n                            tooltip={intl.formatMessage(messages.sidebarDetailsTitle)}\n                        >\n                            <IconDocInfo className=\"bcs-SidebarNav-icon\" />\n                        </SidebarNavButton>\n                    )}\n                    {hasSkills && (\n                        <SidebarNavButton\n                            data-resin-target={SIDEBAR_NAV_TARGETS.SKILLS}\n                            data-target-id=\"SidebarNavButton-skills\"\n                            data-testid=\"sidebarskills\"\n                            onClick={handleSidebarNavButtonClick}\n                            sidebarView={SIDEBAR_VIEW_SKILLS}\n                            tooltip={intl.formatMessage(messages.sidebarSkillsTitle)}\n                        >\n                            <IconMagicWand className=\"bcs-SidebarNav-icon\" />\n                        </SidebarNavButton>\n                    )}\n                    {hasMetadata && (\n                        <SidebarNavButton\n                            data-resin-target={SIDEBAR_NAV_TARGETS.METADATA}\n                            data-target-id=\"SidebarNavButton-metadata\"\n                            data-testid=\"sidebarmetadata\"\n                            onClick={handleSidebarNavButtonClick}\n                            sidebarView={SIDEBAR_VIEW_METADATA}\n                            tooltip={intl.formatMessage(messages.sidebarMetadataTitle)}\n                        >\n                            <IconMetadataThick className=\"bcs-SidebarNav-icon\" />\n                        </SidebarNavButton>\n                    )}\n                    {hasDocGen && (\n                        <SidebarNavButton\n                            data-resin-target={SIDEBAR_NAV_TARGETS.DOCGEN}\n                            data-target-id=\"SidebarNavButton-docGen\"\n                            onClick={handleSidebarNavButtonClick}\n                            sidebarView={SIDEBAR_VIEW_DOCGEN}\n                            tooltip={intl.formatMessage(messages.sidebarDocGenTooltip)}\n                        >\n                            <DocGenIcon className=\"bcs-SidebarNav-icon\" />\n                        </SidebarNavButton>\n                    )}\n                </SidebarNavTablist>\n\n                {hasBoxSign && (\n                    <div className=\"bcs-SidebarNav-secondary\">\n                        <SidebarNavSign {...signSidebarProps} />\n                    </div>\n                )}\n\n                {hasAdditionalTabs && (\n                    <div className=\"bcs-SidebarNav-overflow\">\n                        <AdditionalTabs key={fileId} tabs={additionalTabs} />\n                    </div>\n                )}\n            </div>\n            <div className=\"bcs-SidebarNav-footer\">\n                <SidebarToggle isOpen={isOpen} />\n            </div>\n        </div>\n    );\n};\nexport default injectIntl(SidebarNav);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SidebarNav.js","names":["React","injectIntl","noop","BoxAiLogo","Size6","usePromptFocus","AdditionalTabs","DocGenIcon","IconChatRound","IconDocInfo","IconMagicWand","IconMetadataThick","SidebarNavButton","SidebarNavSign","SidebarNavTablist","SidebarToggle","messages","SIDEBAR_NAV_TARGETS","SIDEBAR_VIEW_ACTIVITY","SIDEBAR_VIEW_BOXAI","SIDEBAR_VIEW_DETAILS","SIDEBAR_VIEW_DOCGEN","SIDEBAR_VIEW_METADATA","SIDEBAR_VIEW_SKILLS","useFeatureConfig","SidebarNav","additionalTabs","elementId","fileId","hasActivity","hasAdditionalTabs","hasBoxAI","hasDetails","hasMetadata","hasSkills","hasDocGen","internalSidebarNavigation","internalSidebarNavigationHandler","intl","isOpen","onNavigate","onPanelChange","routerDisabled","signSidebarProps","enabled","hasBoxSign","disabledTooltip","boxAIDisabledTooltip","showOnlyNavButton","showOnlyBoxAINavButton","focusPrompt","handleSidebarNavButtonClick","sidebarview","createElement","className","formatMessage","sidebarNavLabel","BOXAI","isDisabled","onClick","sidebarView","tooltip","sidebarBoxAITitle","height","width","ACTIVITY","sidebarActivityTitle","DETAILS","sidebarDetailsTitle","SKILLS","sidebarSkillsTitle","METADATA","sidebarMetadataTitle","DOCGEN","sidebarDocGenTooltip","key","tabs"],"sources":["../../../src/elements/content-sidebar/SidebarNav.js"],"sourcesContent":["/**\n * @flow\n * @file Preview sidebar nav component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { injectIntl } from 'react-intl';\nimport type { IntlShape } from 'react-intl';\nimport noop from 'lodash/noop';\n// $FlowFixMe\nimport { BoxAiLogo } from '@box/blueprint-web-assets/icons/Logo';\n// $FlowFixMe\nimport { Size6 } from '@box/blueprint-web-assets/tokens/tokens';\nimport { usePromptFocus } from '@box/box-ai-content-answers';\nimport AdditionalTabs from './additional-tabs';\nimport DocGenIcon from '../../icon/fill/DocGenIcon';\nimport IconChatRound from '../../icons/general/IconChatRound';\nimport IconDocInfo from '../../icons/general/IconDocInfo';\nimport IconMagicWand from '../../icons/general/IconMagicWand';\nimport IconMetadataThick from '../../icons/general/IconMetadataThick';\nimport SidebarNavButton from './SidebarNavButton';\nimport SidebarNavSign from './SidebarNavSign';\nimport SidebarNavTablist from './SidebarNavTablist';\nimport SidebarToggle from './SidebarToggle';\nimport messages from '../common/messages';\nimport { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';\nimport {\n    SIDEBAR_VIEW_ACTIVITY,\n    SIDEBAR_VIEW_BOXAI,\n    SIDEBAR_VIEW_DETAILS,\n    SIDEBAR_VIEW_DOCGEN,\n    SIDEBAR_VIEW_METADATA,\n    SIDEBAR_VIEW_SKILLS,\n} from '../../constants';\nimport { useFeatureConfig } from '../common/feature-checking';\nimport type { NavigateOptions, AdditionalSidebarTab } from './flowTypes';\nimport type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';\nimport './SidebarNav.scss';\nimport type { SignSidebarProps } from './SidebarNavSign';\n\ntype Props = {\n    additionalTabs?: Array<AdditionalSidebarTab>,\n    elementId: string,\n    fileId: string,\n    hasActivity: boolean,\n    hasAdditionalTabs: boolean,\n    hasBoxAI: boolean,\n    hasDetails: boolean,\n    hasDocGen?: boolean,\n    hasMetadata: boolean,\n    hasSkills: boolean,\n    internalSidebarNavigation?: InternalSidebarNavigation,\n    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,\n    intl: IntlShape,\n    isOpen?: boolean,\n    onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,\n    onPanelChange?: (name: string, isInitialState: boolean) => void,\n    routerDisabled?: boolean,\n    signSidebarProps: SignSidebarProps,\n};\n\nconst SidebarNav = ({\n    additionalTabs,\n    elementId,\n    fileId,\n    hasActivity,\n    hasAdditionalTabs,\n    hasBoxAI,\n    hasDetails,\n    hasMetadata,\n    hasSkills,\n    hasDocGen = false,\n    internalSidebarNavigation,\n    internalSidebarNavigationHandler,\n    intl,\n    isOpen,\n    onNavigate,\n    onPanelChange = noop,\n    routerDisabled,\n    signSidebarProps,\n}: Props) => {\n    const { enabled: hasBoxSign } = signSidebarProps || {};\n    const { disabledTooltip: boxAIDisabledTooltip, showOnlyNavButton: showOnlyBoxAINavButton } =\n        useFeatureConfig('boxai.sidebar');\n\n    const { focusPrompt } = usePromptFocus('.be.bcs');\n\n    const handleSidebarNavButtonClick = (sidebarview: string) => {\n        onPanelChange(sidebarview, false);\n\n        // If the Box AI sidebar is enabled, focus the Box AI sidebar prompt\n        if (sidebarview === SIDEBAR_VIEW_BOXAI) {\n            focusPrompt();\n        }\n    };\n\n    return (\n        <div className=\"bcs-SidebarNav\" aria-label={intl.formatMessage(messages.sidebarNavLabel)}>\n            <div className=\"bcs-SidebarNav-tabs\">\n                <SidebarNavTablist\n                    elementId={elementId}\n                    internalSidebarNavigation={internalSidebarNavigation}\n                    internalSidebarNavigationHandler={internalSidebarNavigationHandler}\n                    isOpen={isOpen}\n                    onNavigate={onNavigate}\n                    routerDisabled={routerDisabled}\n                >\n                    {hasBoxAI && (\n                        <SidebarNavButton\n                            data-resin-target={SIDEBAR_NAV_TARGETS.BOXAI}\n                            data-target-id=\"SidebarNavButton-boxAI\"\n                            data-testid=\"sidebarboxai\"\n                            isDisabled={showOnlyBoxAINavButton}\n                            onClick={handleSidebarNavButtonClick}\n                            sidebarView={SIDEBAR_VIEW_BOXAI}\n                            tooltip={\n                                showOnlyBoxAINavButton\n                                    ? boxAIDisabledTooltip\n                                    : intl.formatMessage(messages.sidebarBoxAITitle)\n                            }\n                        >\n                            <BoxAiLogo height={Size6} width={Size6} />\n                        </SidebarNavButton>\n                    )}\n                    {hasActivity && (\n                        <SidebarNavButton\n                            data-resin-target={SIDEBAR_NAV_TARGETS.ACTIVITY}\n                            data-target-id=\"SidebarNavButton-activity\"\n                            data-testid=\"sidebaractivity\"\n                            onClick={handleSidebarNavButtonClick}\n                            sidebarView={SIDEBAR_VIEW_ACTIVITY}\n                            tooltip={intl.formatMessage(messages.sidebarActivityTitle)}\n                        >\n                            <IconChatRound className=\"bcs-SidebarNav-icon\" />\n                        </SidebarNavButton>\n                    )}\n                    {hasDetails && (\n                        <SidebarNavButton\n                            data-resin-target={SIDEBAR_NAV_TARGETS.DETAILS}\n                            data-target-id=\"SidebarNavButton-details\"\n                            data-testid=\"sidebardetails\"\n                            onClick={handleSidebarNavButtonClick}\n                            sidebarView={SIDEBAR_VIEW_DETAILS}\n                            tooltip={intl.formatMessage(messages.sidebarDetailsTitle)}\n                        >\n                            <IconDocInfo className=\"bcs-SidebarNav-icon\" />\n                        </SidebarNavButton>\n                    )}\n                    {hasSkills && (\n                        <SidebarNavButton\n                            data-resin-target={SIDEBAR_NAV_TARGETS.SKILLS}\n                            data-target-id=\"SidebarNavButton-skills\"\n                            data-testid=\"sidebarskills\"\n                            onClick={handleSidebarNavButtonClick}\n                            sidebarView={SIDEBAR_VIEW_SKILLS}\n                            tooltip={intl.formatMessage(messages.sidebarSkillsTitle)}\n                        >\n                            <IconMagicWand className=\"bcs-SidebarNav-icon\" />\n                        </SidebarNavButton>\n                    )}\n                    {hasMetadata && (\n                        <SidebarNavButton\n                            data-resin-target={SIDEBAR_NAV_TARGETS.METADATA}\n                            data-target-id=\"SidebarNavButton-metadata\"\n                            data-testid=\"sidebarmetadata\"\n                            onClick={handleSidebarNavButtonClick}\n                            sidebarView={SIDEBAR_VIEW_METADATA}\n                            tooltip={intl.formatMessage(messages.sidebarMetadataTitle)}\n                        >\n                            <IconMetadataThick className=\"bcs-SidebarNav-icon\" />\n                        </SidebarNavButton>\n                    )}\n                    {hasDocGen && (\n                        <SidebarNavButton\n                            data-resin-target={SIDEBAR_NAV_TARGETS.DOCGEN}\n                            data-target-id=\"SidebarNavButton-docGen\"\n                            data-testid=\"sidebardocgen\"\n                            onClick={handleSidebarNavButtonClick}\n                            sidebarView={SIDEBAR_VIEW_DOCGEN}\n                            tooltip={intl.formatMessage(messages.sidebarDocGenTooltip)}\n                        >\n                            <DocGenIcon className=\"bcs-SidebarNav-icon\" />\n                        </SidebarNavButton>\n                    )}\n                </SidebarNavTablist>\n\n                {hasBoxSign && (\n                    <div className=\"bcs-SidebarNav-secondary\">\n                        <SidebarNavSign {...signSidebarProps} />\n                    </div>\n                )}\n\n                {hasAdditionalTabs && (\n                    <div className=\"bcs-SidebarNav-overflow\" data-testid=\"additional-tabs-overflow\">\n                        <AdditionalTabs key={fileId} tabs={additionalTabs} />\n                    </div>\n                )}\n            </div>\n            <div className=\"bcs-SidebarNav-footer\">\n                <SidebarToggle\n                    internalSidebarNavigation={internalSidebarNavigation}\n                    internalSidebarNavigationHandler={internalSidebarNavigationHandler}\n                    isOpen={isOpen}\n                    routerDisabled={routerDisabled}\n                />\n            </div>\n        </div>\n    );\n};\nexport default injectIntl(SidebarNav);\n"],"mappings":"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","ignoreList":[]}

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

@@ -16,13 +16,18 @@ const SidebarNavTablist = ({
   children,
   history,
   elementId,
+  internalSidebarNavigation,
+  internalSidebarNavigationHandler,
   isOpen,
-  onNavigate
+  onNavigate,
+  routerDisabled = false
 }) => {
   const refs = [];
-  const tablist = React.Children.map(children, child => child && `/${child.props.sidebarView}`);
-  const handleKeyDown = event => {
-    const currentIndex = tablist.indexOf(history.location.pathname);
+  const tablist = React.Children.map(children, child => child && child.props.sidebarView);
+  const handleKeyDownWithRouter = event => {
+    if (!history) return;
+    const currentPath = history.location.pathname.replace('/', '');
+    const currentIndex = tablist.indexOf(currentPath);
     const {
       length
     } = tablist;
@@ -30,26 +35,50 @@ const SidebarNavTablist = ({
     switch (event.key) {
       case KEYS.arrowUp:
         nextIndex = (currentIndex - 1 + length) % length;
-        history.push(tablist[nextIndex]);
-        if (refs.length > 0) {
-          refs[nextIndex].focus();
-        }
-        event.stopPropagation();
-        event.preventDefault();
         break;
       case KEYS.arrowDown:
         nextIndex = (currentIndex + 1) % length;
-        history.push(tablist[nextIndex]);
-        if (refs.length > 0) {
-          refs[nextIndex].focus();
-        }
-        event.stopPropagation();
-        event.preventDefault();
         break;
       default:
+        return;
+    }
+    const nextTab = tablist[nextIndex];
+    history.push(`/${nextTab}`);
+    if (refs.length > nextIndex) {
+      refs[nextIndex].focus();
+    }
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  const handleKeyDownWithoutRouter = event => {
+    if (!internalSidebarNavigationHandler) return;
+    const currentTab = internalSidebarNavigation?.sidebar;
+    const currentIndex = tablist.indexOf(currentTab);
+    const {
+      length
+    } = tablist;
+    let nextIndex = currentIndex;
+    switch (event.key) {
+      case KEYS.arrowUp:
+        nextIndex = (currentIndex - 1 + length) % length;
+        break;
+      case KEYS.arrowDown:
+        nextIndex = (currentIndex + 1) % length;
         break;
+      default:
+        return;
+    }
+    const nextTab = tablist[nextIndex];
+    internalSidebarNavigationHandler({
+      sidebar: nextTab
+    });
+    if (refs.length > nextIndex) {
+      refs[nextIndex].focus();
     }
+    event.stopPropagation();
+    event.preventDefault();
   };
+  const handleKeyDown = routerDisabled ? handleKeyDownWithoutRouter : handleKeyDownWithRouter;
   return /*#__PURE__*/React.createElement("div", {
     "aria-orientation": "vertical",
     className: "bcs-SidebarNav-main",
@@ -62,13 +91,25 @@ const SidebarNavTablist = ({
     }
     return /*#__PURE__*/React.cloneElement(tab, _objectSpread({
       elementId,
+      internalSidebarNavigation,
+      internalSidebarNavigationHandler,
       isOpen,
       onNavigate,
+      routerDisabled,
       ref: ref => {
         refs.push(ref);
       }
     }, tab.props));
   }));
 };
-export default withRouter(SidebarNavTablist);
+
+// Conditionally wrap with withRouter only when router is not disabled
+const SidebarNavTablistWithRouter = withRouter(SidebarNavTablist);
+const SidebarNavTablistWrapper = props => {
+  if (props.routerDisabled) {
+    return /*#__PURE__*/React.createElement(SidebarNavTablist, props);
+  }
+  return /*#__PURE__*/React.createElement(SidebarNavTablistWithRouter, props);
+};
+export default SidebarNavTablistWrapper;
 //# sourceMappingURL=SidebarNavTablist.js.map

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

@@ -9,50 +9,96 @@ import type { RouterHistory } from 'react-router-dom';
 import { withRouter } from 'react-router-dom';
 import { KEYS } from '../../constants';
 import type { NavigateOptions } from './flowTypes';
+import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
 
 type Props = {
     children: React.Node,
     elementId: string,
-    history: RouterHistory,
+    history?: RouterHistory,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     isOpen?: boolean,
     onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,
+    routerDisabled?: boolean,
 };
 
-const SidebarNavTablist = ({ children, history, elementId, isOpen, onNavigate }: Props) => {
+const SidebarNavTablist = ({
+    children,
+    history,
+    elementId,
+    internalSidebarNavigation,
+    internalSidebarNavigationHandler,
+    isOpen,
+    onNavigate,
+    routerDisabled = false,
+}: Props) => {
     const refs = [];
-    const tablist = React.Children.map(children, child => child && `/${child.props.sidebarView}`);
-    const handleKeyDown = (event: SyntheticKeyboardEvent<>): void => {
-        const currentIndex = tablist.indexOf(history.location.pathname);
+    const tablist = React.Children.map(children, child => child && child.props.sidebarView);
+
+    const handleKeyDownWithRouter = (event: SyntheticKeyboardEvent<>): void => {
+        if (!history) return;
+
+        const currentPath = history.location.pathname.replace('/', '');
+        const currentIndex = tablist.indexOf(currentPath);
         const { length } = tablist;
         let nextIndex = currentIndex;
+
         switch (event.key) {
             case KEYS.arrowUp:
                 nextIndex = (currentIndex - 1 + length) % length;
-
-                history.push(tablist[nextIndex]);
-                if (refs.length > 0) {
-                    refs[nextIndex].focus();
-                }
-
-                event.stopPropagation();
-                event.preventDefault();
                 break;
             case KEYS.arrowDown:
                 nextIndex = (currentIndex + 1) % length;
+                break;
+            default:
+                return;
+        }
 
-                history.push(tablist[nextIndex]);
-                if (refs.length > 0) {
-                    refs[nextIndex].focus();
-                }
+        const nextTab = tablist[nextIndex];
+        history.push(`/${nextTab}`);
+
+        if (refs.length > nextIndex) {
+            refs[nextIndex].focus();
+        }
+
+        event.stopPropagation();
+        event.preventDefault();
+    };
+
+    const handleKeyDownWithoutRouter = (event: SyntheticKeyboardEvent<>): void => {
+        if (!internalSidebarNavigationHandler) return;
 
-                event.stopPropagation();
-                event.preventDefault();
+        const currentTab = internalSidebarNavigation?.sidebar;
+        const currentIndex = tablist.indexOf(currentTab);
+        const { length } = tablist;
+        let nextIndex = currentIndex;
+
+        switch (event.key) {
+            case KEYS.arrowUp:
+                nextIndex = (currentIndex - 1 + length) % length;
                 break;
-            default:
+            case KEYS.arrowDown:
+                nextIndex = (currentIndex + 1) % length;
                 break;
+            default:
+                return;
         }
+
+        const nextTab = tablist[nextIndex];
+        internalSidebarNavigationHandler({
+            sidebar: nextTab,
+        });
+
+        if (refs.length > nextIndex) {
+            refs[nextIndex].focus();
+        }
+
+        event.stopPropagation();
+        event.preventDefault();
     };
 
+    const handleKeyDown = routerDisabled ? handleKeyDownWithoutRouter : handleKeyDownWithRouter;
+
     return (
         <div
             aria-orientation="vertical"
@@ -68,8 +114,11 @@ const SidebarNavTablist = ({ children, history, elementId, isOpen, onNavigate }:
 
                 return React.cloneElement(tab, {
                     elementId,
+                    internalSidebarNavigation,
+                    internalSidebarNavigationHandler,
                     isOpen,
                     onNavigate,
+                    routerDisabled,
                     ref: ref => {
                         refs.push(ref);
                     },
@@ -80,4 +129,14 @@ const SidebarNavTablist = ({ children, history, elementId, isOpen, onNavigate }:
     );
 };
 
-export default withRouter(SidebarNavTablist);
+// Conditionally wrap with withRouter only when router is not disabled
+const SidebarNavTablistWithRouter = withRouter(SidebarNavTablist);
+
+const SidebarNavTablistWrapper = (props: Props) => {
+    if (props.routerDisabled) {
+        return <SidebarNavTablist {...props} />;
+    }
+    return <SidebarNavTablistWithRouter {...props} />;
+};
+
+export default SidebarNavTablistWrapper;

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarNavTablist.js","names":["React","withRouter","KEYS","SidebarNavTablist","children","history","elementId","isOpen","onNavigate","refs","tablist","Children","map","child","props","sidebarView","handleKeyDown","event","currentIndex","indexOf","location","pathname","length","nextIndex","key","arrowUp","push","focus","stopPropagation","preventDefault","arrowDown","createElement","className","role","tabIndex","onKeyDown","tab","cloneElement","_objectSpread","ref"],"sources":["../../../src/elements/content-sidebar/SidebarNavTablist.js"],"sourcesContent":["/**\n * @flow\n * @file Content Sidebar nav tablist Component\n * @author Box\n */\n\nimport * as React from 'react';\nimport type { RouterHistory } from 'react-router-dom';\nimport { withRouter } from 'react-router-dom';\nimport { KEYS } from '../../constants';\nimport type { NavigateOptions } from './flowTypes';\n\ntype Props = {\n    children: React.Node,\n    elementId: string,\n    history: RouterHistory,\n    isOpen?: boolean,\n    onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,\n};\n\nconst SidebarNavTablist = ({ children, history, elementId, isOpen, onNavigate }: Props) => {\n    const refs = [];\n    const tablist = React.Children.map(children, child => child && `/${child.props.sidebarView}`);\n    const handleKeyDown = (event: SyntheticKeyboardEvent<>): void => {\n        const currentIndex = tablist.indexOf(history.location.pathname);\n        const { length } = tablist;\n        let nextIndex = currentIndex;\n        switch (event.key) {\n            case KEYS.arrowUp:\n                nextIndex = (currentIndex - 1 + length) % length;\n\n                history.push(tablist[nextIndex]);\n                if (refs.length > 0) {\n                    refs[nextIndex].focus();\n                }\n\n                event.stopPropagation();\n                event.preventDefault();\n                break;\n            case KEYS.arrowDown:\n                nextIndex = (currentIndex + 1) % length;\n\n                history.push(tablist[nextIndex]);\n                if (refs.length > 0) {\n                    refs[nextIndex].focus();\n                }\n\n                event.stopPropagation();\n                event.preventDefault();\n                break;\n            default:\n                break;\n        }\n    };\n\n    return (\n        <div\n            aria-orientation=\"vertical\"\n            className=\"bcs-SidebarNav-main\"\n            role=\"tablist\"\n            tabIndex=\"0\"\n            onKeyDown={handleKeyDown}\n        >\n            {React.Children.map(children, tab => {\n                if (!tab) {\n                    return null;\n                }\n\n                return React.cloneElement(tab, {\n                    elementId,\n                    isOpen,\n                    onNavigate,\n                    ref: ref => {\n                        refs.push(ref);\n                    },\n                    ...tab.props,\n                });\n            })}\n        </div>\n    );\n};\n\nexport default withRouter(SidebarNavTablist);\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,IAAI,QAAQ,iBAAiB;AAWtC,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,OAAO;EAAEC,SAAS;EAAEC,MAAM;EAAEC;AAAkB,CAAC,KAAK;EACvF,MAAMC,IAAI,GAAG,EAAE;EACf,MAAMC,OAAO,GAAGV,KAAK,CAACW,QAAQ,CAACC,GAAG,CAACR,QAAQ,EAAES,KAAK,IAAIA,KAAK,IAAI,IAAIA,KAAK,CAACC,KAAK,CAACC,WAAW,EAAE,CAAC;EAC7F,MAAMC,aAAa,GAAIC,KAA+B,IAAW;IAC7D,MAAMC,YAAY,GAAGR,OAAO,CAACS,OAAO,CAACd,OAAO,CAACe,QAAQ,CAACC,QAAQ,CAAC;IAC/D,MAAM;MAAEC;IAAO,CAAC,GAAGZ,OAAO;IAC1B,IAAIa,SAAS,GAAGL,YAAY;IAC5B,QAAQD,KAAK,CAACO,GAAG;MACb,KAAKtB,IAAI,CAACuB,OAAO;QACbF,SAAS,GAAG,CAACL,YAAY,GAAG,CAAC,GAAGI,MAAM,IAAIA,MAAM;QAEhDjB,OAAO,CAACqB,IAAI,CAAChB,OAAO,CAACa,SAAS,CAAC,CAAC;QAChC,IAAId,IAAI,CAACa,MAAM,GAAG,CAAC,EAAE;UACjBb,IAAI,CAACc,SAAS,CAAC,CAACI,KAAK,CAAC,CAAC;QAC3B;QAEAV,KAAK,CAACW,eAAe,CAAC,CAAC;QACvBX,KAAK,CAACY,cAAc,CAAC,CAAC;QACtB;MACJ,KAAK3B,IAAI,CAAC4B,SAAS;QACfP,SAAS,GAAG,CAACL,YAAY,GAAG,CAAC,IAAII,MAAM;QAEvCjB,OAAO,CAACqB,IAAI,CAAChB,OAAO,CAACa,SAAS,CAAC,CAAC;QAChC,IAAId,IAAI,CAACa,MAAM,GAAG,CAAC,EAAE;UACjBb,IAAI,CAACc,SAAS,CAAC,CAACI,KAAK,CAAC,CAAC;QAC3B;QAEAV,KAAK,CAACW,eAAe,CAAC,CAAC;QACvBX,KAAK,CAACY,cAAc,CAAC,CAAC;QACtB;MACJ;QACI;IACR;EACJ,CAAC;EAED,oBACI7B,KAAA,CAAA+B,aAAA;IACI,oBAAiB,UAAU;IAC3BC,SAAS,EAAC,qBAAqB;IAC/BC,IAAI,EAAC,SAAS;IACdC,QAAQ,EAAC,GAAG;IACZC,SAAS,EAAEnB;EAAc,GAExBhB,KAAK,CAACW,QAAQ,CAACC,GAAG,CAACR,QAAQ,EAAEgC,GAAG,IAAI;IACjC,IAAI,CAACA,GAAG,EAAE;MACN,OAAO,IAAI;IACf;IAEA,oBAAOpC,KAAK,CAACqC,YAAY,CAACD,GAAG,EAAAE,aAAA;MACzBhC,SAAS;MACTC,MAAM;MACNC,UAAU;MACV+B,GAAG,EAAEA,GAAG,IAAI;QACR9B,IAAI,CAACiB,IAAI,CAACa,GAAG,CAAC;MAClB;IAAC,GACEH,GAAG,CAACtB,KAAK,CACf,CAAC;EACN,CAAC,CACA,CAAC;AAEd,CAAC;AAED,eAAeb,UAAU,CAACE,iBAAiB,CAAC","ignoreList":[]}
+{"version":3,"file":"SidebarNavTablist.js","names":["React","withRouter","KEYS","SidebarNavTablist","children","history","elementId","internalSidebarNavigation","internalSidebarNavigationHandler","isOpen","onNavigate","routerDisabled","refs","tablist","Children","map","child","props","sidebarView","handleKeyDownWithRouter","event","currentPath","location","pathname","replace","currentIndex","indexOf","length","nextIndex","key","arrowUp","arrowDown","nextTab","push","focus","stopPropagation","preventDefault","handleKeyDownWithoutRouter","currentTab","sidebar","handleKeyDown","createElement","className","role","tabIndex","onKeyDown","tab","cloneElement","_objectSpread","ref","SidebarNavTablistWithRouter","SidebarNavTablistWrapper"],"sources":["../../../src/elements/content-sidebar/SidebarNavTablist.js"],"sourcesContent":["/**\n * @flow\n * @file Content Sidebar nav tablist Component\n * @author Box\n */\n\nimport * as React from 'react';\nimport type { RouterHistory } from 'react-router-dom';\nimport { withRouter } from 'react-router-dom';\nimport { KEYS } from '../../constants';\nimport type { NavigateOptions } from './flowTypes';\nimport type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';\n\ntype Props = {\n    children: React.Node,\n    elementId: string,\n    history?: RouterHistory,\n    internalSidebarNavigation?: InternalSidebarNavigation,\n    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,\n    isOpen?: boolean,\n    onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,\n    routerDisabled?: boolean,\n};\n\nconst SidebarNavTablist = ({\n    children,\n    history,\n    elementId,\n    internalSidebarNavigation,\n    internalSidebarNavigationHandler,\n    isOpen,\n    onNavigate,\n    routerDisabled = false,\n}: Props) => {\n    const refs = [];\n    const tablist = React.Children.map(children, child => child && child.props.sidebarView);\n\n    const handleKeyDownWithRouter = (event: SyntheticKeyboardEvent<>): void => {\n        if (!history) return;\n\n        const currentPath = history.location.pathname.replace('/', '');\n        const currentIndex = tablist.indexOf(currentPath);\n        const { length } = tablist;\n        let nextIndex = currentIndex;\n\n        switch (event.key) {\n            case KEYS.arrowUp:\n                nextIndex = (currentIndex - 1 + length) % length;\n                break;\n            case KEYS.arrowDown:\n                nextIndex = (currentIndex + 1) % length;\n                break;\n            default:\n                return;\n        }\n\n        const nextTab = tablist[nextIndex];\n        history.push(`/${nextTab}`);\n\n        if (refs.length > nextIndex) {\n            refs[nextIndex].focus();\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const handleKeyDownWithoutRouter = (event: SyntheticKeyboardEvent<>): void => {\n        if (!internalSidebarNavigationHandler) return;\n\n        const currentTab = internalSidebarNavigation?.sidebar;\n        const currentIndex = tablist.indexOf(currentTab);\n        const { length } = tablist;\n        let nextIndex = currentIndex;\n\n        switch (event.key) {\n            case KEYS.arrowUp:\n                nextIndex = (currentIndex - 1 + length) % length;\n                break;\n            case KEYS.arrowDown:\n                nextIndex = (currentIndex + 1) % length;\n                break;\n            default:\n                return;\n        }\n\n        const nextTab = tablist[nextIndex];\n        internalSidebarNavigationHandler({\n            sidebar: nextTab,\n        });\n\n        if (refs.length > nextIndex) {\n            refs[nextIndex].focus();\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const handleKeyDown = routerDisabled ? handleKeyDownWithoutRouter : handleKeyDownWithRouter;\n\n    return (\n        <div\n            aria-orientation=\"vertical\"\n            className=\"bcs-SidebarNav-main\"\n            role=\"tablist\"\n            tabIndex=\"0\"\n            onKeyDown={handleKeyDown}\n        >\n            {React.Children.map(children, tab => {\n                if (!tab) {\n                    return null;\n                }\n\n                return React.cloneElement(tab, {\n                    elementId,\n                    internalSidebarNavigation,\n                    internalSidebarNavigationHandler,\n                    isOpen,\n                    onNavigate,\n                    routerDisabled,\n                    ref: ref => {\n                        refs.push(ref);\n                    },\n                    ...tab.props,\n                });\n            })}\n        </div>\n    );\n};\n\n// Conditionally wrap with withRouter only when router is not disabled\nconst SidebarNavTablistWithRouter = withRouter(SidebarNavTablist);\n\nconst SidebarNavTablistWrapper = (props: Props) => {\n    if (props.routerDisabled) {\n        return <SidebarNavTablist {...props} />;\n    }\n    return <SidebarNavTablistWithRouter {...props} />;\n};\n\nexport default SidebarNavTablistWrapper;\n"],"mappings":"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","ignoreList":[]}

package/es/features/metadata-instance-editor/CascadePolicy.js

@@ -1,6 +1,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { InlineNotice } from '@box/blueprint-web';
 import { BoxAiAgentSelector } from '@box/box-ai-agent-selector';
 // $FlowFixMe
 import BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';
@@ -29,16 +30,22 @@ const CascadePolicy = ({
   isCascadingOverwritten,
   isCustomMetadata,
   isAIFolderExtractionEnabled,
-  isExistingAIExtractionCascadePolicy,
+  isExistingCascadePolicy,
   onAIFolderExtractionToggle,
   onCascadeToggle,
   onCascadeModeChange,
   shouldShowCascadeOptions
 }) => {
+  const {
+    formatMessage
+  } = useIntl();
   const readOnlyState = isCascadingEnabled ? /*#__PURE__*/React.createElement("div", {
     className: "metadata-cascade-notice"
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.metadataCascadePolicyEnabledInfo)) : null;
-  return canEdit ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return canEdit ? /*#__PURE__*/React.createElement(React.Fragment, null, isExistingCascadePolicy && /*#__PURE__*/React.createElement(InlineNotice, {
+    variant: "info",
+    variantIconAriaLabel: formatMessage(messages.cascadePolicyOptionsDisabledNoticeIconAriaLabel)
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cascadePolicyOptionsDisabledNotice)), /*#__PURE__*/React.createElement("div", {
     className: "metadata-cascade-editor"
   }, /*#__PURE__*/React.createElement("div", {
     className: "metadata-cascade-enable",
@@ -67,9 +74,11 @@ const CascadePolicy = ({
     onChange: e => onCascadeModeChange(e.target.value === 'overwrite'),
     value: isCascadingOverwritten ? 'overwrite' : 'skip'
   }, /*#__PURE__*/React.createElement(RadioButton, {
+    isDisabled: isExistingCascadePolicy,
     label: /*#__PURE__*/React.createElement(FormattedMessage, messages.cascadePolicySkipMode),
     value: "skip"
   }), /*#__PURE__*/React.createElement(RadioButton, {
+    isDisabled: isExistingCascadePolicy,
     label: /*#__PURE__*/React.createElement(FormattedMessage, messages.cascadePolicyOverwriteMode),
     value: "overwrite"
   })))), shouldShowCascadeOptions && canUseAIFolderExtraction && /*#__PURE__*/React.createElement("div", {
@@ -86,7 +95,7 @@ const CascadePolicy = ({
   }, messages.enableAIAutofill)), /*#__PURE__*/React.createElement(Toggle, {
     className: "metadata-cascade-toggle",
     isOn: isAIFolderExtractionEnabled,
-    isDisabled: isExistingAIExtractionCascadePolicy,
+    isDisabled: isExistingCascadePolicy,
     label: "",
     onChange: e => onAIFolderExtractionToggle(e.target.checked)
   })), /*#__PURE__*/React.createElement("div", {
@@ -99,6 +108,7 @@ const CascadePolicy = ({
     className: "metadata-cascade-ai-agent-selector"
   }, /*#__PURE__*/React.createElement(BoxAiAgentSelector, {
     agents: agents,
+    disabled: isExistingCascadePolicy,
     onErrorAction: () => {},
     requestState: "success",
     selectedAgent: agents[0],

package/es/features/metadata-instance-editor/CascadePolicy.js.flow

@@ -1,7 +1,8 @@
 // @flow
 import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 
+import { InlineNotice } from '@box/blueprint-web';
 import { BoxAiAgentSelector } from '@box/box-ai-agent-selector';
 // $FlowFixMe
 import BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';
@@ -37,7 +38,7 @@ type Props = {
     isCascadingEnabled: boolean,
     isCascadingOverwritten: boolean,
     isCustomMetadata: boolean,
-    isExistingAIExtractionCascadePolicy: boolean,
+    isExistingCascadePolicy: boolean,
     onAIFolderExtractionToggle: (value: boolean) => void,
     onCascadeModeChange: (value: boolean) => void,
     onCascadeToggle: (value: boolean) => void,
@@ -52,12 +53,14 @@ const CascadePolicy = ({
     isCascadingOverwritten,
     isCustomMetadata,
     isAIFolderExtractionEnabled,
-    isExistingAIExtractionCascadePolicy,
+    isExistingCascadePolicy,
     onAIFolderExtractionToggle,
     onCascadeToggle,
     onCascadeModeChange,
     shouldShowCascadeOptions,
 }: Props) => {
+    const { formatMessage } = useIntl();
+
     const readOnlyState = isCascadingEnabled ? (
         <div className="metadata-cascade-notice">
             <FormattedMessage {...messages.metadataCascadePolicyEnabledInfo} />
@@ -66,6 +69,14 @@ const CascadePolicy = ({
 
     return canEdit ? (
         <>
+            {isExistingCascadePolicy && (
+                <InlineNotice
+                    variant="info"
+                    variantIconAriaLabel={formatMessage(messages.cascadePolicyOptionsDisabledNoticeIconAriaLabel)}
+                >
+                    <FormattedMessage {...messages.cascadePolicyOptionsDisabledNotice} />
+                </InlineNotice>
+            )}
             <div className="metadata-cascade-editor">
                 <div className="metadata-cascade-enable" data-testid="metadata-cascade-enable">
                     <div>
@@ -113,10 +124,12 @@ const CascadePolicy = ({
                             value={isCascadingOverwritten ? 'overwrite' : 'skip'}
                         >
                             <RadioButton
+                                isDisabled={isExistingCascadePolicy}
                                 label={<FormattedMessage {...messages.cascadePolicySkipMode} />}
                                 value="skip"
                             />
                             <RadioButton
+                                isDisabled={isExistingCascadePolicy}
                                 label={<FormattedMessage {...messages.cascadePolicyOverwriteMode} />}
                                 value="overwrite"
                             />
@@ -133,7 +146,7 @@ const CascadePolicy = ({
                             <Toggle
                                 className="metadata-cascade-toggle"
                                 isOn={isAIFolderExtractionEnabled}
-                                isDisabled={isExistingAIExtractionCascadePolicy}
+                                isDisabled={isExistingCascadePolicy}
                                 label=""
                                 onChange={e => onAIFolderExtractionToggle(e.target.checked)}
                             />
@@ -149,6 +162,7 @@ const CascadePolicy = ({
                             <div className="metadata-cascade-ai-agent-selector">
                                 <BoxAiAgentSelector
                                     agents={agents}
+                                    disabled={isExistingCascadePolicy}
                                     onErrorAction={() => {}}
                                     requestState="success"
                                     selectedAgent={agents[0]}