box-ui-elements 23.4.0 → 23.5.0-beta.1

package/es/elements/common/routing/index.js

@@ -1,3 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export { default as withRouterAndRef } from './withRouterAndRef';
+export { default as withRouterIfEnabled } from './withRouterIfEnabled';
 //# sourceMappingURL=index.js.map

package/es/elements/common/routing/index.js.flow

@@ -1,2 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
+// @flow
 export { default as withRouterAndRef } from './withRouterAndRef';
+export { default as withRouterIfEnabled } from './withRouterIfEnabled';

package/es/elements/common/routing/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","withRouterAndRef"],"sources":["../../../../src/elements/common/routing/index.js"],"sourcesContent":["// eslint-disable-next-line import/prefer-default-export\nexport { default as withRouterAndRef } from './withRouterAndRef';\n"],"mappings":"AAAA;AACA,SAASA,OAAO,IAAIC,gBAAgB,QAAQ,oBAAoB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","withRouterAndRef","withRouterIfEnabled"],"sources":["../../../../src/elements/common/routing/index.js"],"sourcesContent":["// @flow\nexport { default as withRouterAndRef } from './withRouterAndRef';\nexport { default as withRouterIfEnabled } from './withRouterIfEnabled';\n"],"mappings":"AACA,SAASA,OAAO,IAAIC,gBAAgB,QAAQ,oBAAoB;AAChE,SAASD,OAAO,IAAIE,mBAAmB,QAAQ,uBAAuB","ignoreList":[]}

package/es/elements/common/routing/withRouterIfEnabled.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { withRouter } from 'react-router-dom';
+import { isFeatureEnabled } from '../feature-checking';
+export default function withRouterIfEnabled(Wrapped) {
+  const WrappedWithRouter = withRouter(Wrapped);
+  const WithRouterIfEnabled = props => {
+    const routerDisabled = props?.routerDisabled === true || isFeatureEnabled(props?.features, 'routerDisabled.value');
+    const Component = routerDisabled ? Wrapped : WrappedWithRouter;
+    return /*#__PURE__*/React.createElement(Component, props);
+  };
+  const name = Wrapped.displayName || Wrapped.name || 'Component';
+  WithRouterIfEnabled.displayName = `withRouterIfEnabled(${name})`;
+  return WithRouterIfEnabled;
+}
+//# sourceMappingURL=withRouterIfEnabled.js.map

package/es/elements/common/routing/withRouterIfEnabled.js.flow

@@ -0,0 +1,24 @@
+// @flow
+import * as React from 'react';
+import { withRouter } from 'react-router-dom';
+import { isFeatureEnabled } from '../feature-checking';
+
+export default function withRouterIfEnabled(Wrapped: React.ComponentType<any>) {
+
+    const WrappedWithRouter = withRouter(Wrapped);
+
+    const WithRouterIfEnabled = (props: any) => {
+        const routerDisabled =
+            props?.routerDisabled === true || isFeatureEnabled(props?.features, 'routerDisabled.value');
+            
+        const Component = routerDisabled ? Wrapped : WrappedWithRouter;
+
+        return <Component {...props} />;
+    };
+
+    const name = Wrapped.displayName || Wrapped.name || 'Component';
+    WithRouterIfEnabled.displayName = `withRouterIfEnabled(${name})`;
+
+    return WithRouterIfEnabled;
+}
+

package/es/elements/common/routing/withRouterIfEnabled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withRouterIfEnabled.js","names":["React","withRouter","isFeatureEnabled","withRouterIfEnabled","Wrapped","WrappedWithRouter","WithRouterIfEnabled","props","routerDisabled","features","Component","createElement","name","displayName"],"sources":["../../../../src/elements/common/routing/withRouterIfEnabled.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport { withRouter } from 'react-router-dom';\nimport { isFeatureEnabled } from '../feature-checking';\n\nexport default function withRouterIfEnabled(Wrapped: React.ComponentType<any>) {\n\n    const WrappedWithRouter = withRouter(Wrapped);\n\n    const WithRouterIfEnabled = (props: any) => {\n        const routerDisabled =\n            props?.routerDisabled === true || isFeatureEnabled(props?.features, 'routerDisabled.value');\n            \n        const Component = routerDisabled ? Wrapped : WrappedWithRouter;\n\n        return <Component {...props} />;\n    };\n\n    const name = Wrapped.displayName || Wrapped.name || 'Component';\n    WithRouterIfEnabled.displayName = `withRouterIfEnabled(${name})`;\n\n    return WithRouterIfEnabled;\n}\n\n"],"mappings":"AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,eAAe,SAASC,mBAAmBA,CAACC,OAAiC,EAAE;EAE3E,MAAMC,iBAAiB,GAAGJ,UAAU,CAACG,OAAO,CAAC;EAE7C,MAAME,mBAAmB,GAAIC,KAAU,IAAK;IACxC,MAAMC,cAAc,GAChBD,KAAK,EAAEC,cAAc,KAAK,IAAI,IAAIN,gBAAgB,CAACK,KAAK,EAAEE,QAAQ,EAAE,sBAAsB,CAAC;IAE/F,MAAMC,SAAS,GAAGF,cAAc,GAAGJ,OAAO,GAAGC,iBAAiB;IAE9D,oBAAOL,KAAA,CAAAW,aAAA,CAACD,SAAS,EAAKH,KAAQ,CAAC;EACnC,CAAC;EAED,MAAMK,IAAI,GAAGR,OAAO,CAACS,WAAW,IAAIT,OAAO,CAACQ,IAAI,IAAI,WAAW;EAC/DN,mBAAmB,CAACO,WAAW,GAAG,uBAAuBD,IAAI,GAAG;EAEhE,OAAON,mBAAmB;AAC9B","ignoreList":[]}

package/es/elements/content-explorer/MetadataViewContainer.js

@@ -9,6 +9,37 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import * as React from 'react';
 import { MetadataView } from '@box/metadata-view';
+
+// Public-friendly version of MetadataFormFieldValue from @box/metadata-filter
+// (string[] for enum type, range/float objects stay the same)
+
+function transformInitialFilterValuesToInternal(publicValues) {
+  if (!publicValues) return undefined;
+  return Object.entries(publicValues).reduce((acc, [key, {
+    value
+  }]) => {
+    acc[key] = Array.isArray(value) ? {
+      value: {
+        enum: value
+      }
+    } : {
+      value
+    };
+    return acc;
+  }, {});
+}
+function transformInternalFieldsToPublic(fields) {
+  return Object.entries(fields).reduce((acc, [key, {
+    value
+  }]) => {
+    acc[key] = 'enum' in value && Array.isArray(value.enum) ? {
+      value: value.enum
+    } : {
+      value: value
+    };
+    return acc;
+  }, {});
+}
 const MetadataViewContainer = _ref => {
   let {
       actionBarProps,
@@ -20,6 +51,10 @@ const MetadataViewContainer = _ref => {
   const {
     items = []
   } = currentCollection;
+  const {
+    initialFilterValues: initialFilterValuesProp,
+    onFilterSubmit: onFilterSubmitProp
+  } = actionBarProps ?? {};
   const filterGroups = React.useMemo(() => [{
     toggleable: true,
     filters: metadataTemplate?.fields?.map(field => {
@@ -34,10 +69,25 @@ const MetadataViewContainer = _ref => {
       };
     }) || []
   }], [metadataTemplate]);
-  return /*#__PURE__*/React.createElement(MetadataView, _extends({
-    actionBarProps: _objectSpread(_objectSpread({}, actionBarProps), {}, {
+
+  // Transform initial filter values to internal field format
+  const initialFilterValues = React.useMemo(() => transformInitialFilterValuesToInternal(initialFilterValuesProp), [initialFilterValuesProp]);
+
+  // Transform field values to public-friendly format
+  const onFilterSubmit = React.useCallback(fields => {
+    if (!onFilterSubmitProp) return;
+    const transformed = transformInternalFieldsToPublic(fields);
+    onFilterSubmitProp(transformed);
+  }, [onFilterSubmitProp]);
+  const transformedActionBarProps = React.useMemo(() => {
+    return _objectSpread(_objectSpread({}, actionBarProps), {}, {
+      initialFilterValues,
+      onFilterSubmit,
       filterGroups
-    }),
+    });
+  }, [actionBarProps, initialFilterValues, onFilterSubmit, filterGroups]);
+  return /*#__PURE__*/React.createElement(MetadataView, _extends({
+    actionBarProps: transformedActionBarProps,
     columns: columns,
     items: items
   }, rest));

package/es/elements/content-explorer/MetadataViewContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetadataViewContainer.js","names":["React","MetadataView","MetadataViewContainer","_ref","actionBarProps","columns","currentCollection","metadataTemplate","rest","_objectWithoutProperties","_excluded","items","filterGroups","useMemo","toggleable","filters","fields","map","field","id","key","name","displayName","fieldType","type","options","shouldRenderChip","createElement","_extends","_objectSpread"],"sources":["../../../src/elements/content-explorer/MetadataViewContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MetadataView, type MetadataViewProps } from '@box/metadata-view';\nimport type { MetadataTemplate } from '../../common/types/metadata';\nimport type { Collection } from '../../common/types/core';\n\nexport interface MetadataViewContainerProps extends Omit<MetadataViewProps, 'items'> {\n    currentCollection: Collection;\n    metadataTemplate: MetadataTemplate;\n}\n\nconst MetadataViewContainer = ({\n    actionBarProps,\n    columns,\n    currentCollection,\n    metadataTemplate,\n    ...rest\n}: MetadataViewContainerProps) => {\n    const { items = [] } = currentCollection;\n\n    const filterGroups = React.useMemo(\n        () => [\n            {\n                toggleable: true,\n                filters:\n                    metadataTemplate?.fields?.map(field => {\n                        return {\n                            id: `${field.key}-filter`,\n                            name: field.displayName,\n                            fieldType: field.type,\n                            options: field.options?.map(({ key }) => key) || [],\n                            shouldRenderChip: true,\n                        };\n                    }) || [],\n            },\n        ],\n        [metadataTemplate],\n    );\n\n    return (\n        <MetadataView\n            actionBarProps={{\n                ...actionBarProps,\n                filterGroups,\n            }}\n            columns={columns}\n            items={items}\n            {...rest}\n        />\n    );\n};\n\nexport default MetadataViewContainer;\n"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAgC,oBAAoB;AASzE,MAAMC,qBAAqB,GAAGC,IAAA,IAMI;EAAA,IANH;MAC3BC,cAAc;MACdC,OAAO;MACPC,iBAAiB;MACjBC;IAEwB,CAAC,GAAAJ,IAAA;IADtBK,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAEP,MAAM;IAAEC,KAAK,GAAG;EAAG,CAAC,GAAGL,iBAAiB;EAExC,MAAMM,YAAY,GAAGZ,KAAK,CAACa,OAAO,CAC9B,MAAM,CACF;IACIC,UAAU,EAAE,IAAI;IAChBC,OAAO,EACHR,gBAAgB,EAAES,MAAM,EAAEC,GAAG,CAACC,KAAK,IAAI;MACnC,OAAO;QACHC,EAAE,EAAE,GAAGD,KAAK,CAACE,GAAG,SAAS;QACzBC,IAAI,EAAEH,KAAK,CAACI,WAAW;QACvBC,SAAS,EAAEL,KAAK,CAACM,IAAI;QACrBC,OAAO,EAAEP,KAAK,CAACO,OAAO,EAAER,GAAG,CAAC,CAAC;UAAEG;QAAI,CAAC,KAAKA,GAAG,CAAC,IAAI,EAAE;QACnDM,gBAAgB,EAAE;MACtB,CAAC;IACL,CAAC,CAAC,IAAI;EACd,CAAC,CACJ,EACD,CAACnB,gBAAgB,CACrB,CAAC;EAED,oBACIP,KAAA,CAAA2B,aAAA,CAAC1B,YAAY,EAAA2B,QAAA;IACTxB,cAAc,EAAAyB,aAAA,CAAAA,aAAA,KACPzB,cAAc;MACjBQ;IAAY,EACd;IACFP,OAAO,EAAEA,OAAQ;IACjBM,KAAK,EAAEA;EAAM,GACTH,IAAI,CACX,CAAC;AAEV,CAAC;AAED,eAAeN,qBAAqB","ignoreList":[]}
+{"version":3,"file":"MetadataViewContainer.js","names":["React","MetadataView","transformInitialFilterValuesToInternal","publicValues","undefined","Object","entries","reduce","acc","key","value","Array","isArray","enum","transformInternalFieldsToPublic","fields","MetadataViewContainer","_ref","actionBarProps","columns","currentCollection","metadataTemplate","rest","_objectWithoutProperties","_excluded","items","initialFilterValues","initialFilterValuesProp","onFilterSubmit","onFilterSubmitProp","filterGroups","useMemo","toggleable","filters","map","field","id","name","displayName","fieldType","type","options","shouldRenderChip","useCallback","transformed","transformedActionBarProps","_objectSpread","createElement","_extends"],"sources":["../../../src/elements/content-explorer/MetadataViewContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { EnumType, FloatType, MetadataFormFieldValue, RangeType } from '@box/metadata-filter';\nimport { MetadataView, type MetadataViewProps } from '@box/metadata-view';\n\nimport type { Collection } from '../../common/types/core';\nimport type { MetadataTemplate } from '../../common/types/metadata';\n\n// Public-friendly version of MetadataFormFieldValue from @box/metadata-filter\n// (string[] for enum type, range/float objects stay the same)\ntype EnumToStringArray<T> = T extends EnumType ? string[] : T;\ntype ExternalMetadataFormFieldValue = EnumToStringArray<MetadataFormFieldValue>;\n\ntype ExternalFilterValues = Record<\n    string,\n    {\n        value: ExternalMetadataFormFieldValue;\n    }\n>;\n\ntype ActionBarProps = Omit<\n    MetadataViewProps['actionBarProps'],\n    'initialFilterValues' | 'onFilterSubmit' | 'filterGroups'\n> & {\n    initialFilterValues?: ExternalFilterValues;\n    onFilterSubmit?: (filterValues: ExternalFilterValues) => void;\n};\n\nfunction transformInitialFilterValuesToInternal(\n    publicValues?: ExternalFilterValues,\n): Record<string, { value: MetadataFormFieldValue }> | undefined {\n    if (!publicValues) return undefined;\n\n    return Object.entries(publicValues).reduce<Record<string, { value: MetadataFormFieldValue }>>(\n        (acc, [key, { value }]) => {\n            acc[key] = Array.isArray(value) ? { value: { enum: value } } : { value };\n            return acc;\n        },\n        {},\n    );\n}\n\nfunction transformInternalFieldsToPublic(\n    fields: Record<string, { value: MetadataFormFieldValue }>,\n): ExternalFilterValues {\n    return Object.entries(fields).reduce<ExternalFilterValues>((acc, [key, { value }]) => {\n        acc[key] =\n            'enum' in value && Array.isArray(value.enum)\n                ? { value: value.enum }\n                : { value: value as RangeType | FloatType };\n        return acc;\n    }, {});\n}\n\nexport interface MetadataViewContainerProps extends Omit<MetadataViewProps, 'items' | 'actionBarProps'> {\n    actionBarProps?: ActionBarProps;\n    currentCollection: Collection;\n    metadataTemplate: MetadataTemplate;\n}\n\nconst MetadataViewContainer = ({\n    actionBarProps,\n    columns,\n    currentCollection,\n    metadataTemplate,\n    ...rest\n}: MetadataViewContainerProps) => {\n    const { items = [] } = currentCollection;\n    const { initialFilterValues: initialFilterValuesProp, onFilterSubmit: onFilterSubmitProp } = actionBarProps ?? {};\n\n    const filterGroups = React.useMemo(\n        () => [\n            {\n                toggleable: true,\n                filters:\n                    metadataTemplate?.fields?.map(field => {\n                        return {\n                            id: `${field.key}-filter`,\n                            name: field.displayName,\n                            fieldType: field.type,\n                            options: field.options?.map(({ key }) => key) || [],\n                            shouldRenderChip: true,\n                        };\n                    }) || [],\n            },\n        ],\n        [metadataTemplate],\n    );\n\n    // Transform initial filter values to internal field format\n    const initialFilterValues = React.useMemo(\n        () => transformInitialFilterValuesToInternal(initialFilterValuesProp),\n        [initialFilterValuesProp],\n    );\n\n    // Transform field values to public-friendly format\n    const onFilterSubmit = React.useCallback(\n        (fields: Record<string, { value: MetadataFormFieldValue }>) => {\n            if (!onFilterSubmitProp) return;\n            const transformed = transformInternalFieldsToPublic(fields);\n            onFilterSubmitProp(transformed);\n        },\n        [onFilterSubmitProp],\n    );\n\n    const transformedActionBarProps = React.useMemo(() => {\n        return {\n            ...actionBarProps,\n            initialFilterValues,\n            onFilterSubmit,\n            filterGroups,\n        };\n    }, [actionBarProps, initialFilterValues, onFilterSubmit, filterGroups]);\n\n    return <MetadataView actionBarProps={transformedActionBarProps} columns={columns} items={items} {...rest} />;\n};\n\nexport default MetadataViewContainer;\n"],"mappings":"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","ignoreList":[]}

package/es/elements/content-explorer/stories/tests/MetadataView-visual.stories.js

@@ -4,9 +4,9 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { http, HttpResponse } from 'msw';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';
 import { Sign } from '@box/blueprint-web-assets/icons/Line';
-import { expect, userEvent, waitFor, within } from 'storybook/test';
 import noop from 'lodash/noop';
 import ContentExplorer from '../../ContentExplorer';
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
@@ -136,6 +136,46 @@ export const metadataViewV2WithCustomActions = {
     userEvent.click(ellipsesButton);
   }
 };
+const initialFilterActionBarProps = {
+  initialFilterValues: {
+    'industry-filter': {
+      value: ['Legal']
+    },
+    'mimetype-filter': {
+      value: ['boxnoteType', 'documentType', 'threedType']
+    },
+    'role-filter': {
+      value: ['Developer', 'Business Owner', 'Marketing']
+    }
+  }
+};
+export const metadataViewV2WithInitialFilterValues = {
+  args: _objectSpread(_objectSpread({}, metadataViewV2ElementProps), {}, {
+    metadataViewProps: {
+      columns,
+      actionBarProps: initialFilterActionBarProps
+    }
+  }),
+  play: async ({
+    canvas
+  }) => {
+    // Wait for chips to update with initial values
+    await waitFor(() => {
+      expect(canvas.getByRole('button', {
+        name: /Industry/i
+      })).toHaveTextContent(/\(1\)/);
+    });
+    // Other chips should reflect initialized values
+    const contactRoleChip = canvas.getByRole('button', {
+      name: /Contact Role/i
+    });
+    expect(contactRoleChip).toHaveTextContent(/\(3\)/);
+    const fileTypeChip = canvas.getByRole('button', {
+      name: /Box Note/i
+    });
+    expect(fileTypeChip).toHaveTextContent(/\+2/);
+  }
+};
 const meta = {
   title: 'Elements/ContentExplorer/tests/MetadataView/visual',
   component: ContentExplorer,

package/es/elements/content-explorer/stories/tests/MetadataView-visual.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetadataView-visual.stories.js","names":["http","HttpResponse","Download","SignMeOthers","Sign","expect","userEvent","waitFor","within","noop","ContentExplorer","DEFAULT_HOSTNAME_API","mockMetadata","mockSchema","scope","templateScope","templateKey","metadataScopeAndKey","metadataFieldNamePrefix","metadataQuery","from","ancestor_folder_id","sort_by","field_key","fields","key","direction","map","field","fieldsToShow","canEdit","displayName","columns","textValue","id","type","allowSorting","minWidth","maxWidth","defaultView","metadataView","args","metadataViewV2ElementProps","metadataViewProps","features","contentExplorer","metadataViewV2","metadataViewV2WithCustomActions","_objectSpread","tableProps","isSelectAllEnabled","itemActionMenuProps","actions","label","onClick","icon","subMenuTrigger","subMenuActions","play","canvas","getByRole","name","toBeInTheDocument","firstRow","ellipsesButton","click","meta","title","component","global","FEATURE_FLAGS","rootFolderId","FOLDER_ID","token","TOKEN","parameters","msw","handlers","post","json","get"],"sources":["../../../../../src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx"],"sourcesContent":["import { http, HttpResponse } from 'msw';\nimport type { Meta, StoryObj } from '@storybook/react';\nimport { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';\nimport { Sign } from '@box/blueprint-web-assets/icons/Line';\nimport { expect, userEvent, waitFor, within } from 'storybook/test';\nimport noop from 'lodash/noop';\nimport ContentExplorer from '../../ContentExplorer';\nimport { DEFAULT_HOSTNAME_API } from '../../../../constants';\nimport { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';\n\n// The intent behind relying on mockMetadata is to allow a developer to paste in their own metadata template schema for use with live API calls.\nconst { scope: templateScope, templateKey } = mockSchema;\n\nconst metadataScopeAndKey = `${templateScope}.${templateKey}`;\nconst metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;\n\n// This is the body of the metadata query API call.\n// https://developer.box.com/guides/metadata/queries/syntax/\nconst metadataQuery = {\n    from: metadataScopeAndKey,\n    ancestor_folder_id: '0',\n    sort_by: [\n        {\n            field_key: `${metadataFieldNamePrefix}.${mockSchema.fields[0].key}`, // Default to sorting by the first field in the schema\n            direction: 'asc',\n        },\n    ],\n    fields: [\n        // Default to returning all fields in the metadata template schema, and name as a standalone (non-metadata) field\n        ...mockSchema.fields.map(field => `${metadataFieldNamePrefix}.${field.key}`),\n        'name',\n    ],\n};\n\n// Used for metadata view v1\nconst fieldsToShow = [\n    { key: `${metadataFieldNamePrefix}.name`, canEdit: false, displayName: 'Alias' },\n    { key: `${metadataFieldNamePrefix}.industry`, canEdit: true },\n    { key: `${metadataFieldNamePrefix}.last_contacted_at`, canEdit: true },\n    { key: `${metadataFieldNamePrefix}.role`, canEdit: true },\n];\n\n// Used for metadata view v2\nconst columns = [\n    {\n        // Always include the name column\n        textValue: 'Name',\n        id: 'name',\n        type: 'string',\n        allowSorting: true,\n        minWidth: 150,\n        maxWidth: 150,\n    },\n    ...mockSchema.fields.map(field => ({\n        textValue: field.displayName,\n        id: `${metadataFieldNamePrefix}.${field.key}`,\n        type: field.type,\n        allowSorting: true,\n        minWidth: 150,\n        maxWidth: 150,\n    })),\n];\n\n// Switches ContentExplorer to use Metadata View over standard, folder-based view.\nconst defaultView = 'metadata';\n\ntype Story = StoryObj<typeof ContentExplorer>;\n\nexport const metadataView: Story = {\n    args: {\n        metadataQuery,\n        fieldsToShow,\n        defaultView,\n    },\n};\n\nconst metadataViewV2ElementProps = {\n    metadataViewProps: {\n        columns,\n    },\n    metadataQuery,\n    fieldsToShow,\n    defaultView,\n    features: {\n        contentExplorer: {\n            metadataViewV2: true,\n        },\n    },\n};\n\nexport const metadataViewV2: Story = {\n    args: metadataViewV2ElementProps,\n};\n\nexport const metadataViewV2WithCustomActions: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            tableProps: {\n                isSelectAllEnabled: true,\n            },\n            itemActionMenuProps: {\n                actions: [\n                    {\n                        label: 'Download',\n                        onClick: noop,\n                        icon: Download,\n                    },\n                ],\n                subMenuTrigger: {\n                    label: 'Sign',\n                    icon: Sign,\n                },\n                subMenuActions: [\n                    {\n                        label: 'Request Signature',\n                        onClick: noop,\n                        icon: SignMeOthers,\n                    },\n                ],\n            },\n        },\n    },\n    play: async ({ canvas }) => {\n        await waitFor(() => {\n            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();\n        });\n\n        const firstRow = canvas.getByRole('row', { name: /Child 2/i });\n        const ellipsesButton = within(firstRow).getByRole('button', { name: 'Action menu' });\n        userEvent.click(ellipsesButton);\n    },\n};\n\nconst meta: Meta<typeof ContentExplorer> = {\n    title: 'Elements/ContentExplorer/tests/MetadataView/visual',\n    component: ContentExplorer,\n    args: {\n        features: global.FEATURE_FLAGS,\n        rootFolderId: global.FOLDER_ID,\n        token: global.TOKEN,\n    },\n    parameters: {\n        msw: {\n            handlers: [\n                http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, () => {\n                    return HttpResponse.json(mockMetadata);\n                }),\n                http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {\n                    return HttpResponse.json(mockSchema);\n                }),\n            ],\n        },\n    },\n};\n\nexport default meta;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MetadataView-visual.stories.js","names":["http","HttpResponse","expect","userEvent","waitFor","within","Download","SignMeOthers","Sign","noop","ContentExplorer","DEFAULT_HOSTNAME_API","mockMetadata","mockSchema","scope","templateScope","templateKey","metadataScopeAndKey","metadataFieldNamePrefix","metadataQuery","from","ancestor_folder_id","sort_by","field_key","fields","key","direction","map","field","fieldsToShow","canEdit","displayName","columns","textValue","id","type","allowSorting","minWidth","maxWidth","defaultView","metadataView","args","metadataViewV2ElementProps","metadataViewProps","features","contentExplorer","metadataViewV2","metadataViewV2WithCustomActions","_objectSpread","tableProps","isSelectAllEnabled","itemActionMenuProps","actions","label","onClick","icon","subMenuTrigger","subMenuActions","play","canvas","getByRole","name","toBeInTheDocument","firstRow","ellipsesButton","click","initialFilterActionBarProps","initialFilterValues","value","metadataViewV2WithInitialFilterValues","actionBarProps","toHaveTextContent","contactRoleChip","fileTypeChip","meta","title","component","global","FEATURE_FLAGS","rootFolderId","FOLDER_ID","token","TOKEN","parameters","msw","handlers","post","json","get"],"sources":["../../../../../src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\nimport { http, HttpResponse } from 'msw';\nimport { expect, userEvent, waitFor, within } from 'storybook/test';\nimport { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';\nimport { Sign } from '@box/blueprint-web-assets/icons/Line';\nimport noop from 'lodash/noop';\n\nimport ContentExplorer from '../../ContentExplorer';\nimport { DEFAULT_HOSTNAME_API } from '../../../../constants';\nimport { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';\n\n// The intent behind relying on mockMetadata is to allow a developer to paste in their own metadata template schema for use with live API calls.\nconst { scope: templateScope, templateKey } = mockSchema;\n\nconst metadataScopeAndKey = `${templateScope}.${templateKey}`;\nconst metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;\n\n// This is the body of the metadata query API call.\n// https://developer.box.com/guides/metadata/queries/syntax/\nconst metadataQuery = {\n    from: metadataScopeAndKey,\n    ancestor_folder_id: '0',\n    sort_by: [\n        {\n            field_key: `${metadataFieldNamePrefix}.${mockSchema.fields[0].key}`, // Default to sorting by the first field in the schema\n            direction: 'asc',\n        },\n    ],\n    fields: [\n        // Default to returning all fields in the metadata template schema, and name as a standalone (non-metadata) field\n        ...mockSchema.fields.map(field => `${metadataFieldNamePrefix}.${field.key}`),\n        'name',\n    ],\n};\n\n// Used for metadata view v1\nconst fieldsToShow = [\n    { key: `${metadataFieldNamePrefix}.name`, canEdit: false, displayName: 'Alias' },\n    { key: `${metadataFieldNamePrefix}.industry`, canEdit: true },\n    { key: `${metadataFieldNamePrefix}.last_contacted_at`, canEdit: true },\n    { key: `${metadataFieldNamePrefix}.role`, canEdit: true },\n];\n\n// Used for metadata view v2\nconst columns = [\n    {\n        // Always include the name column\n        textValue: 'Name',\n        id: 'name',\n        type: 'string',\n        allowSorting: true,\n        minWidth: 150,\n        maxWidth: 150,\n    },\n    ...mockSchema.fields.map(field => ({\n        textValue: field.displayName,\n        id: `${metadataFieldNamePrefix}.${field.key}`,\n        type: field.type,\n        allowSorting: true,\n        minWidth: 150,\n        maxWidth: 150,\n    })),\n];\n\n// Switches ContentExplorer to use Metadata View over standard, folder-based view.\nconst defaultView = 'metadata';\n\ntype Story = StoryObj<typeof ContentExplorer>;\n\nexport const metadataView: Story = {\n    args: {\n        metadataQuery,\n        fieldsToShow,\n        defaultView,\n    },\n};\n\nconst metadataViewV2ElementProps = {\n    metadataViewProps: {\n        columns,\n    },\n    metadataQuery,\n    fieldsToShow,\n    defaultView,\n    features: {\n        contentExplorer: {\n            metadataViewV2: true,\n        },\n    },\n};\n\nexport const metadataViewV2: Story = {\n    args: metadataViewV2ElementProps,\n};\n\nexport const metadataViewV2WithCustomActions: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            tableProps: {\n                isSelectAllEnabled: true,\n            },\n            itemActionMenuProps: {\n                actions: [\n                    {\n                        label: 'Download',\n                        onClick: noop,\n                        icon: Download,\n                    },\n                ],\n                subMenuTrigger: {\n                    label: 'Sign',\n                    icon: Sign,\n                },\n                subMenuActions: [\n                    {\n                        label: 'Request Signature',\n                        onClick: noop,\n                        icon: SignMeOthers,\n                    },\n                ],\n            },\n        },\n    },\n    play: async ({ canvas }) => {\n        await waitFor(() => {\n            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();\n        });\n        const firstRow = canvas.getByRole('row', { name: /Child 2/i });\n        const ellipsesButton = within(firstRow).getByRole('button', { name: 'Action menu' });\n        userEvent.click(ellipsesButton);\n    },\n};\n\nconst initialFilterActionBarProps = {\n    initialFilterValues: {\n        'industry-filter': { value: ['Legal'] },\n        'mimetype-filter': { value: ['boxnoteType', 'documentType', 'threedType'] },\n        'role-filter': { value: ['Developer', 'Business Owner', 'Marketing'] },\n    },\n};\n\nexport const metadataViewV2WithInitialFilterValues: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            actionBarProps: initialFilterActionBarProps,\n        },\n    },\n    play: async ({ canvas }) => {\n        // Wait for chips to update with initial values\n        await waitFor(() => {\n            expect(canvas.getByRole('button', { name: /Industry/i })).toHaveTextContent(/\\(1\\)/);\n        });\n        // Other chips should reflect initialized values\n        const contactRoleChip = canvas.getByRole('button', { name: /Contact Role/i });\n        expect(contactRoleChip).toHaveTextContent(/\\(3\\)/);\n\n        const fileTypeChip = canvas.getByRole('button', { name: /Box Note/i });\n        expect(fileTypeChip).toHaveTextContent(/\\+2/);\n    },\n};\n\nconst meta: Meta<typeof ContentExplorer> = {\n    title: 'Elements/ContentExplorer/tests/MetadataView/visual',\n    component: ContentExplorer,\n    args: {\n        features: global.FEATURE_FLAGS,\n        rootFolderId: global.FOLDER_ID,\n        token: global.TOKEN,\n    },\n    parameters: {\n        msw: {\n            handlers: [\n                http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, () => {\n                    return HttpResponse.json(mockMetadata);\n                }),\n                http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {\n                    return HttpResponse.json(mockSchema);\n                }),\n            ],\n        },\n    },\n};\n\nexport default meta;\n"],"mappings":"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","ignoreList":[]}

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

@@ -4,7 +4,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import * as React from 'react';
-import { withRouter } from 'react-router-dom';
+import { withRouterIfEnabled } from '../common/routing';
 import AddTaskMenu from './AddTaskMenu';
 import TaskModal from './TaskModal';
 import { TASK_TYPE_APPROVAL } from '../../constants';
@@ -32,7 +32,7 @@ class AddTaskButton extends React.Component {
         internalSidebarNavigationHandler(_objectSpread(_objectSpread({}, internalSidebarNavigation), {}, {
           open: true
         }), true);
-      } else {
+      } else if (history) {
         history.replace({
           state: {
             open: true
@@ -94,5 +94,5 @@ _defineProperty(AddTaskButton, "defaultProps", {
   isDisabled: false
 });
 export { AddTaskButton as AddTaskButtonComponent };
-export default withRouter(AddTaskButton);
+export default withRouterIfEnabled(AddTaskButton);
 //# sourceMappingURL=AddTaskButton.js.map

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

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import { withRouter, type RouterHistory } from 'react-router-dom';
+import { type RouterHistory } from 'react-router-dom';
+import { withRouterIfEnabled } from '../common/routing';
 
 import AddTaskMenu from './AddTaskMenu';
 import TaskModal from './TaskModal';
@@ -11,7 +12,7 @@ import type { ElementsXhrError } from '../../common/types/api';
 import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
 
 type Props = {|
-    history: RouterHistory,
+    history?: RouterHistory,
     internalSidebarNavigation?: InternalSidebarNavigation,
     internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     isDisabled: boolean,
@@ -54,7 +55,7 @@ class AddTaskButton extends React.Component<Props, State> {
                 },
                 true,
             );
-        } else {
+        } else if (history) {
             history.replace({ state: { open: true } });
         }
 
@@ -103,4 +104,4 @@ class AddTaskButton extends React.Component<Props, State> {
 }
 
 export { AddTaskButton as AddTaskButtonComponent };
-export default withRouter(AddTaskButton);
+export default withRouterIfEnabled(AddTaskButton);

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

@@ -1 +1 @@
-{"version":3,"file":"AddTaskButton.js","names":["React","withRouter","AddTaskMenu","TaskModal","TASK_TYPE_APPROVAL","AddTaskButton","Component","constructor","args","_defineProperty","createRef","error","isTaskFormOpen","taskType","history","internalSidebarNavigation","internalSidebarNavigationHandler","routerDisabled","props","_objectSpread","open","replace","state","setState","onTaskModalClose","buttonRef","current","focus","e","element","render","isDisabled","taskFormProps","createElement","Fragment","onMenuItemClick","handleClickMenuItem","setAddTaskButtonRef","onSubmitError","handleSubmitError","onSubmitSuccess","handleModalClose","onModalClose","AddTaskButtonComponent"],"sources":["../../../src/elements/content-sidebar/AddTaskButton.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport { withRouter, type RouterHistory } from 'react-router-dom';\n\nimport AddTaskMenu from './AddTaskMenu';\nimport TaskModal from './TaskModal';\nimport { TASK_TYPE_APPROVAL } from '../../constants';\nimport type { TaskFormProps } from './activity-feed/task-form/TaskForm';\nimport type { TaskType } from '../../common/types/tasks';\nimport type { ElementsXhrError } from '../../common/types/api';\nimport type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';\n\ntype Props = {|\n    history: RouterHistory,\n    internalSidebarNavigation?: InternalSidebarNavigation,\n    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,\n    isDisabled: boolean,\n    onTaskModalClose: () => void,\n    routerDisabled?: boolean,\n    taskFormProps: TaskFormProps,\n|};\n\ntype State = {\n    error: ?ElementsXhrError,\n    isTaskFormOpen: boolean,\n    taskType: TaskType,\n};\n\nclass AddTaskButton extends React.Component<Props, State> {\n    buttonRef = React.createRef<HTMLButtonElement>();\n\n    state = {\n        error: null,\n        isTaskFormOpen: false,\n        taskType: TASK_TYPE_APPROVAL,\n    };\n\n    static defaultProps = {\n        isDisabled: false,\n    };\n\n    /*\n    1. Pushing the open state into history keeps the sidebar open upon resize and refresh\n    2. Preventing the sidebar from closing keeps the task modal open upon edit and resize\n    */\n    handleClickMenuItem = (taskType: TaskType) => {\n        const { history, internalSidebarNavigation, internalSidebarNavigationHandler, routerDisabled } = this.props;\n\n        if (routerDisabled && internalSidebarNavigationHandler) {\n            internalSidebarNavigationHandler(\n                {\n                    ...internalSidebarNavigation,\n                    open: true,\n                },\n                true,\n            );\n        } else {\n            history.replace({ state: { open: true } });\n        }\n\n        this.setState({ isTaskFormOpen: true, taskType });\n    };\n\n    handleModalClose = () => {\n        const { onTaskModalClose } = this.props;\n        this.setState({ isTaskFormOpen: false, error: null }, () => {\n            if (this.buttonRef.current) {\n                this.buttonRef.current.focus();\n            }\n        });\n        onTaskModalClose();\n    };\n\n    handleSubmitError = (e: ElementsXhrError) => this.setState({ error: e });\n\n    setAddTaskButtonRef = (element: HTMLButtonElement) => {\n        this.buttonRef.current = element;\n    };\n\n    render() {\n        const { isDisabled, taskFormProps } = this.props;\n        const { isTaskFormOpen, taskType, error } = this.state;\n\n        return (\n            <>\n                <AddTaskMenu\n                    isDisabled={isDisabled}\n                    onMenuItemClick={this.handleClickMenuItem}\n                    setAddTaskButtonRef={this.setAddTaskButtonRef}\n                />\n                <TaskModal\n                    error={error}\n                    onSubmitError={this.handleSubmitError}\n                    onSubmitSuccess={this.handleModalClose}\n                    onModalClose={this.handleModalClose}\n                    isTaskFormOpen={isTaskFormOpen}\n                    taskFormProps={taskFormProps}\n                    taskType={taskType}\n                />\n            </>\n        );\n    }\n}\n\nexport { AddTaskButton as AddTaskButtonComponent };\nexport default withRouter(AddTaskButton);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AddTaskButton.js","names":["React","withRouterIfEnabled","AddTaskMenu","TaskModal","TASK_TYPE_APPROVAL","AddTaskButton","Component","constructor","args","_defineProperty","createRef","error","isTaskFormOpen","taskType","history","internalSidebarNavigation","internalSidebarNavigationHandler","routerDisabled","props","_objectSpread","open","replace","state","setState","onTaskModalClose","buttonRef","current","focus","e","element","render","isDisabled","taskFormProps","createElement","Fragment","onMenuItemClick","handleClickMenuItem","setAddTaskButtonRef","onSubmitError","handleSubmitError","onSubmitSuccess","handleModalClose","onModalClose","AddTaskButtonComponent"],"sources":["../../../src/elements/content-sidebar/AddTaskButton.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport { type RouterHistory } from 'react-router-dom';\nimport { withRouterIfEnabled } from '../common/routing';\n\nimport AddTaskMenu from './AddTaskMenu';\nimport TaskModal from './TaskModal';\nimport { TASK_TYPE_APPROVAL } from '../../constants';\nimport type { TaskFormProps } from './activity-feed/task-form/TaskForm';\nimport type { TaskType } from '../../common/types/tasks';\nimport type { ElementsXhrError } from '../../common/types/api';\nimport type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';\n\ntype Props = {|\n    history?: RouterHistory,\n    internalSidebarNavigation?: InternalSidebarNavigation,\n    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,\n    isDisabled: boolean,\n    onTaskModalClose: () => void,\n    routerDisabled?: boolean,\n    taskFormProps: TaskFormProps,\n|};\n\ntype State = {\n    error: ?ElementsXhrError,\n    isTaskFormOpen: boolean,\n    taskType: TaskType,\n};\n\nclass AddTaskButton extends React.Component<Props, State> {\n    buttonRef = React.createRef<HTMLButtonElement>();\n\n    state = {\n        error: null,\n        isTaskFormOpen: false,\n        taskType: TASK_TYPE_APPROVAL,\n    };\n\n    static defaultProps = {\n        isDisabled: false,\n    };\n\n    /*\n    1. Pushing the open state into history keeps the sidebar open upon resize and refresh\n    2. Preventing the sidebar from closing keeps the task modal open upon edit and resize\n    */\n    handleClickMenuItem = (taskType: TaskType) => {\n        const { history, internalSidebarNavigation, internalSidebarNavigationHandler, routerDisabled } = this.props;\n\n        if (routerDisabled && internalSidebarNavigationHandler) {\n            internalSidebarNavigationHandler(\n                {\n                    ...internalSidebarNavigation,\n                    open: true,\n                },\n                true,\n            );\n        } else if (history) {\n            history.replace({ state: { open: true } });\n        }\n\n        this.setState({ isTaskFormOpen: true, taskType });\n    };\n\n    handleModalClose = () => {\n        const { onTaskModalClose } = this.props;\n        this.setState({ isTaskFormOpen: false, error: null }, () => {\n            if (this.buttonRef.current) {\n                this.buttonRef.current.focus();\n            }\n        });\n        onTaskModalClose();\n    };\n\n    handleSubmitError = (e: ElementsXhrError) => this.setState({ error: e });\n\n    setAddTaskButtonRef = (element: HTMLButtonElement) => {\n        this.buttonRef.current = element;\n    };\n\n    render() {\n        const { isDisabled, taskFormProps } = this.props;\n        const { isTaskFormOpen, taskType, error } = this.state;\n\n        return (\n            <>\n                <AddTaskMenu\n                    isDisabled={isDisabled}\n                    onMenuItemClick={this.handleClickMenuItem}\n                    setAddTaskButtonRef={this.setAddTaskButtonRef}\n                />\n                <TaskModal\n                    error={error}\n                    onSubmitError={this.handleSubmitError}\n                    onSubmitSuccess={this.handleModalClose}\n                    onModalClose={this.handleModalClose}\n                    isTaskFormOpen={isTaskFormOpen}\n                    taskFormProps={taskFormProps}\n                    taskType={taskType}\n                />\n            </>\n        );\n    }\n}\n\nexport { AddTaskButton as AddTaskButtonComponent };\nexport default withRouterIfEnabled(AddTaskButton);\n"],"mappings":"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","ignoreList":[]}

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

@@ -10,7 +10,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  */
 
 import * as React from 'react';
-import { withRouter } from 'react-router-dom';
+import { withRouterIfEnabled } from '../common/routing';
 import SidebarToggleButton from '../../components/sidebar-toggle-button/SidebarToggleButton';
 import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';
 const SidebarToggle = ({
@@ -47,5 +47,5 @@ const SidebarToggle = ({
   });
 };
 export { SidebarToggle as SidebarToggleComponent };
-export default withRouter(SidebarToggle);
+export default withRouterIfEnabled(SidebarToggle);
 //# sourceMappingURL=SidebarToggle.js.map

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

@@ -5,7 +5,8 @@
  */
 
 import * as React from 'react';
-import { withRouter, type RouterHistory } from 'react-router-dom';
+import { type RouterHistory } from 'react-router-dom';
+import { withRouterIfEnabled } from '../common/routing';
 import SidebarToggleButton from '../../components/sidebar-toggle-button/SidebarToggleButton';
 import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';
 import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
@@ -53,4 +54,4 @@ const SidebarToggle = ({
 };
 
 export { SidebarToggle as SidebarToggleComponent };
-export default withRouter(SidebarToggle);
+export default withRouterIfEnabled(SidebarToggle);

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

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

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

@@ -15,7 +15,7 @@ import flow from 'lodash/flow';
 import getProp from 'lodash/get';
 import merge from 'lodash/merge';
 import noop from 'lodash/noop';
-import { generatePath, withRouter } from 'react-router-dom';
+import { generatePath } from 'react-router-dom';
 import { withFeatureConsumer, isFeatureEnabled } from '../../common/feature-checking';
 import API from '../../../api';
 import { FIELD_METADATA_ARCHIVE } from '../../../constants';
@@ -25,6 +25,7 @@ import StaticVersionsSidebar from './StaticVersionSidebar';
 import VersionsSidebar from './VersionsSidebar';
 import VersionsSidebarAPI from './VersionsSidebarAPI';
 import { withAPIContext } from '../../common/api-context';
+import { withRouterIfEnabled } from '../../common/routing';
 import { ViewType } from '../../common/types/SidebarNavigation';
 class VersionsSidebarContainer extends React.Component {
   constructor(...args) {
@@ -189,7 +190,7 @@ class VersionsSidebarContainer extends React.Component {
           delete navigationUpdate.versionId;
         }
         internalSidebarNavigationHandler(navigationUpdate);
-      } else {
+      } else if (history) {
         history.push(generatePath(match.path, _objectSpread(_objectSpread({}, match.params), {}, {
           versionId
         })));
@@ -293,5 +294,5 @@ _defineProperty(VersionsSidebarContainer, "defaultProps", {
   parentName: ViewType.DETAILS
 });
 export { VersionsSidebarContainer as VersionsSidebarContainerComponent };
-export default flow([withRouter, withAPIContext, withFeatureConsumer])(VersionsSidebarContainer);
+export default flow([withRouterIfEnabled, withAPIContext, withFeatureConsumer])(VersionsSidebarContainer);
 //# sourceMappingURL=VersionsSidebarContainer.js.map

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

@@ -9,7 +9,7 @@ import flow from 'lodash/flow';
 import getProp from 'lodash/get';
 import merge from 'lodash/merge';
 import noop from 'lodash/noop';
-import { generatePath, withRouter } from 'react-router-dom';
+import { generatePath } from 'react-router-dom';
 import type { Match, RouterHistory } from 'react-router-dom';
 import type { MessageDescriptor } from 'react-intl';
 import { withFeatureConsumer, isFeatureEnabled } from '../../common/feature-checking';
@@ -21,6 +21,7 @@ import StaticVersionsSidebar from './StaticVersionSidebar';
 import VersionsSidebar from './VersionsSidebar';
 import VersionsSidebarAPI from './VersionsSidebarAPI';
 import { withAPIContext } from '../../common/api-context';
+import { withRouterIfEnabled } from '../../common/routing';
 import type { FeatureConfig } from '../../common/feature-checking';
 import type { VersionActionCallback, VersionChangeCallback, SidebarLoadCallback } from './flowTypes';
 import type { BoxItemVersion, BoxItem, FileVersions } from '../../../common/types/core';
@@ -36,7 +37,7 @@ type Props = {
     features: FeatureConfig,
     fileId: string,
     hasSidebarInitialized?: boolean,
-    history: RouterHistory,
+    history?: RouterHistory,
     internalSidebarNavigation?: InternalSidebarNavigation,
     internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     match: Match,
@@ -283,7 +284,7 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
                 delete navigationUpdate.versionId;
             }
             internalSidebarNavigationHandler(navigationUpdate);
-        } else {
+        } else if (history) {
             history.push(generatePath(match.path, { ...match.params, versionId }));
         }
     };
@@ -349,4 +350,4 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
 
 export type VersionsSidebarProps = Props;
 export { VersionsSidebarContainer as VersionsSidebarContainerComponent };
-export default flow([withRouter, withAPIContext, withFeatureConsumer])(VersionsSidebarContainer);
+export default flow([withRouterIfEnabled, withAPIContext, withFeatureConsumer])(VersionsSidebarContainer);