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

package/es/elements/common/types/{SidebarNavigation.flow.js.flow → SidebarNavigation.js.flow}

@@ -1,5 +1,8 @@
 /* @flow */
 
+// flow version is simplified compared to Type Script due to difficult to resolve problems with Union Types
+// Type Script works better with Union Types
+
 export const ViewType = Object.freeze({
     BOXAI: 'boxai',
     SKILLS: 'skills',
@@ -18,30 +21,13 @@ export const FeedEntryType = Object.freeze({
 export type ViewTypeValues = $Values<typeof ViewType>;
 export type FeedEntryTypeValues = $Values<typeof FeedEntryType>;
 
-type VersionSidebarView = {
-    sidebar: 'activity' | 'details',
-    versionId: string,
-};
-
-export type ActivityAnnotationsSidebarView = {
-    sidebar: 'activity',
-    activeFeedEntryType: 'annotations',
-    fileVersionId: string,
-    activeFeedEntryId: string,
+export type SidebarNavigation = {
+    sidebar: ViewTypeValues,
+    versionId?: string,
+    activeFeedEntryType?: FeedEntryTypeValues,
+    activeFeedEntryId?: string,
+    fileVersionId?: string,
 };
-type ActivityCommentsSidebarView = {
-    sidebar: 'activity',
-    activeFeedEntryType: 'comments' | 'tasks',
-    activeFeedEntryId: string,
-};
-
-export type SidebarNavigation =
-    | {|
-          sidebar: ViewTypeValues,
-      |}
-    | VersionSidebarView
-    | ActivityCommentsSidebarView
-    | ActivityAnnotationsSidebarView;
 
 export type InternalSidebarNavigation = SidebarNavigation & {
     open: boolean,

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

@@ -7,11 +7,14 @@
 import * as React from 'react';
 import VersionsList from './VersionsList';
 import type { BoxItemVersion } from '../../../common/types/core';
+import type { InternalSidebarNavigation } from '../../common/types/SidebarNavigation';
 import './VersionsGroup.scss';
 
 type Props = {
     fileId: string,
     heading: string,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    routerDisabled?: boolean,
     versionCount: number,
     versionLimit: number,
     versions: Array<BoxItemVersion>,

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

@@ -1 +1 @@
-{"version":3,"file":"VersionsGroup.js","names":["React","VersionsList","VersionsGroup","_ref","heading","rest","_objectWithoutProperties","_excluded","createElement","className"],"sources":["../../../../src/elements/content-sidebar/versions/VersionsGroup.js"],"sourcesContent":["/**\n * @flow\n * @file Versions Group component\n * @author Box\n */\n\nimport * as React from 'react';\nimport VersionsList from './VersionsList';\nimport type { BoxItemVersion } from '../../../common/types/core';\nimport './VersionsGroup.scss';\n\ntype Props = {\n    fileId: string,\n    heading: string,\n    versionCount: number,\n    versionLimit: number,\n    versions: Array<BoxItemVersion>,\n};\n\nconst VersionsGroup = ({ heading, ...rest }: Props) => {\n    return (\n        <section className=\"bcs-VersionsGroup\">\n            <h4 className=\"bcs-VersionsGroup-heading\">{heading}</h4>\n            <VersionsList {...rest} />\n        </section>\n    );\n};\n\nexport default VersionsGroup;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,YAAY,MAAM,gBAAgB;AAEzC,OAAO,sBAAsB;AAU7B,MAAMC,aAAa,GAAGC,IAAA,IAAiC;EAAA,IAAhC;MAAEC;IAAwB,CAAC,GAAAD,IAAA;IAAbE,IAAI,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACrC,oBACIP,KAAA,CAAAQ,aAAA;IAASC,SAAS,EAAC;EAAmB,gBAClCT,KAAA,CAAAQ,aAAA;IAAIC,SAAS,EAAC;EAA2B,GAAEL,OAAY,CAAC,eACxDJ,KAAA,CAAAQ,aAAA,CAACP,YAAY,EAAKI,IAAO,CACpB,CAAC;AAElB,CAAC;AAED,eAAeH,aAAa","ignoreList":[]}
+{"version":3,"file":"VersionsGroup.js","names":["React","VersionsList","VersionsGroup","_ref","heading","rest","_objectWithoutProperties","_excluded","createElement","className"],"sources":["../../../../src/elements/content-sidebar/versions/VersionsGroup.js"],"sourcesContent":["/**\n * @flow\n * @file Versions Group component\n * @author Box\n */\n\nimport * as React from 'react';\nimport VersionsList from './VersionsList';\nimport type { BoxItemVersion } from '../../../common/types/core';\nimport type { InternalSidebarNavigation } from '../../common/types/SidebarNavigation';\nimport './VersionsGroup.scss';\n\ntype Props = {\n    fileId: string,\n    heading: string,\n    internalSidebarNavigation?: InternalSidebarNavigation,\n    routerDisabled?: boolean,\n    versionCount: number,\n    versionLimit: number,\n    versions: Array<BoxItemVersion>,\n};\n\nconst VersionsGroup = ({ heading, ...rest }: Props) => {\n    return (\n        <section className=\"bcs-VersionsGroup\">\n            <h4 className=\"bcs-VersionsGroup-heading\">{heading}</h4>\n            <VersionsList {...rest} />\n        </section>\n    );\n};\n\nexport default VersionsGroup;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,YAAY,MAAM,gBAAgB;AAGzC,OAAO,sBAAsB;AAY7B,MAAMC,aAAa,GAAGC,IAAA,IAAiC;EAAA,IAAhC;MAAEC;IAAwB,CAAC,GAAAD,IAAA;IAAbE,IAAI,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACrC,oBACIP,KAAA,CAAAQ,aAAA;IAASC,SAAS,EAAC;EAAmB,gBAClCT,KAAA,CAAAQ,aAAA;IAAIC,SAAS,EAAC;EAA2B,GAAEL,OAAY,CAAC,eACxDJ,KAAA,CAAAQ,aAAA,CAACP,YAAY,EAAKI,IAAO,CACpB,CAAC;AAElB,CAAC;AAED,eAAeH,aAAa","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-const _excluded = ["currentId", "versions"];
+const _excluded = ["currentId", "internalSidebarNavigation", "routerDisabled", "versions"];
 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); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
@@ -15,15 +15,17 @@ import './VersionsList.scss';
 const VersionsList = _ref => {
   let {
       currentId,
+      internalSidebarNavigation,
+      routerDisabled = false,
       versions
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("ul", {
-    className: "bcs-VersionsList"
-  }, versions.map(version => /*#__PURE__*/React.createElement("li", {
-    className: "bcs-VersionsList-item",
-    key: version.id
-  }, /*#__PURE__*/React.createElement(Route, {
+  const renderVersionItemWithoutRouter = version => /*#__PURE__*/React.createElement(VersionsItem, _extends({
+    isCurrent: currentId === version.id,
+    isSelected: internalSidebarNavigation?.versionId === version.id,
+    version: version
+  }, rest));
+  const renderVersionItemWithRouter = version => /*#__PURE__*/React.createElement(Route, {
     render: ({
       match
     }) => /*#__PURE__*/React.createElement(VersionsItem, _extends({
@@ -31,7 +33,13 @@ const VersionsList = _ref => {
       isSelected: match.params.versionId === version.id,
       version: version
     }, rest))
-  }))));
+  });
+  return /*#__PURE__*/React.createElement("ul", {
+    className: "bcs-VersionsList"
+  }, versions.map(version => /*#__PURE__*/React.createElement("li", {
+    className: "bcs-VersionsList-item",
+    key: version.id
+  }, routerDisabled ? renderVersionItemWithoutRouter(version) : renderVersionItemWithRouter(version))));
 };
 export default VersionsList;
 //# sourceMappingURL=VersionsList.js.map

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

@@ -8,33 +8,51 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import VersionsItem from './VersionsItem';
 import type { BoxItemVersion } from '../../../common/types/core';
+import type { InternalSidebarNavigation } from '../../common/types/SidebarNavigation';
 import './VersionsList.scss';
 
 type Props = {
     currentId?: string,
     fileId: string,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    routerDisabled?: boolean,
     versionCount: number,
     versionLimit: number,
     versions: Array<BoxItemVersion>,
 };
 
-const VersionsList = ({ currentId, versions, ...rest }: Props) => (
-    <ul className="bcs-VersionsList">
-        {versions.map(version => (
-            <li className="bcs-VersionsList-item" key={version.id}>
-                <Route
-                    render={({ match }) => (
-                        <VersionsItem
-                            isCurrent={currentId === version.id}
-                            isSelected={match.params.versionId === version.id}
-                            version={version}
-                            {...rest}
-                        />
-                    )}
+const VersionsList = ({ currentId, internalSidebarNavigation, routerDisabled = false, versions, ...rest }: Props) => {
+    const renderVersionItemWithoutRouter = (version: BoxItemVersion) => (
+        <VersionsItem
+            isCurrent={currentId === version.id}
+            isSelected={internalSidebarNavigation?.versionId === version.id}
+            version={version}
+            {...rest}
+        />
+    );
+
+    const renderVersionItemWithRouter = (version: BoxItemVersion) => (
+        <Route
+            render={({ match }) => (
+                <VersionsItem
+                    isCurrent={currentId === version.id}
+                    isSelected={match.params.versionId === version.id}
+                    version={version}
+                    {...rest}
                 />
-            </li>
-        ))}
-    </ul>
-);
+            )}
+        />
+    );
+
+    return (
+        <ul className="bcs-VersionsList">
+            {versions.map(version => (
+                <li className="bcs-VersionsList-item" key={version.id}>
+                    {routerDisabled ? renderVersionItemWithoutRouter(version) : renderVersionItemWithRouter(version)}
+                </li>
+            ))}
+        </ul>
+    );
+};
 
 export default VersionsList;

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

@@ -1 +1 @@
-{"version":3,"file":"VersionsList.js","names":["React","Route","VersionsItem","VersionsList","_ref","currentId","versions","rest","_objectWithoutProperties","_excluded","createElement","className","map","version","key","id","render","match","_extends","isCurrent","isSelected","params","versionId"],"sources":["../../../../src/elements/content-sidebar/versions/VersionsList.js"],"sourcesContent":["/**\n * @flow\n * @file Versions List component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { Route } from 'react-router-dom';\nimport VersionsItem from './VersionsItem';\nimport type { BoxItemVersion } from '../../../common/types/core';\nimport './VersionsList.scss';\n\ntype Props = {\n    currentId?: string,\n    fileId: string,\n    versionCount: number,\n    versionLimit: number,\n    versions: Array<BoxItemVersion>,\n};\n\nconst VersionsList = ({ currentId, versions, ...rest }: Props) => (\n    <ul className=\"bcs-VersionsList\">\n        {versions.map(version => (\n            <li className=\"bcs-VersionsList-item\" key={version.id}>\n                <Route\n                    render={({ match }) => (\n                        <VersionsItem\n                            isCurrent={currentId === version.id}\n                            isSelected={match.params.versionId === version.id}\n                            version={version}\n                            {...rest}\n                        />\n                    )}\n                />\n            </li>\n        ))}\n    </ul>\n);\n\nexport default VersionsList;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,kBAAkB;AACxC,OAAOC,YAAY,MAAM,gBAAgB;AAEzC,OAAO,qBAAqB;AAU5B,MAAMC,YAAY,GAAGC,IAAA;EAAA,IAAC;MAAEC,SAAS;MAAEC;IAAyB,CAAC,GAAAF,IAAA;IAAbG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAAA,oBAChDT,KAAA,CAAAU,aAAA;IAAIC,SAAS,EAAC;EAAkB,GAC3BL,QAAQ,CAACM,GAAG,CAACC,OAAO,iBACjBb,KAAA,CAAAU,aAAA;IAAIC,SAAS,EAAC,uBAAuB;IAACG,GAAG,EAAED,OAAO,CAACE;EAAG,gBAClDf,KAAA,CAAAU,aAAA,CAACT,KAAK;IACFe,MAAM,EAAEA,CAAC;MAAEC;IAAM,CAAC,kBACdjB,KAAA,CAAAU,aAAA,CAACR,YAAY,EAAAgB,QAAA;MACTC,SAAS,EAAEd,SAAS,KAAKQ,OAAO,CAACE,EAAG;MACpCK,UAAU,EAAEH,KAAK,CAACI,MAAM,CAACC,SAAS,KAAKT,OAAO,CAACE,EAAG;MAClDF,OAAO,EAAEA;IAAQ,GACbN,IAAI,CACX;EACH,CACL,CACD,CACP,CACD,CAAC;AAAA,CACR;AAED,eAAeJ,YAAY","ignoreList":[]}
+{"version":3,"file":"VersionsList.js","names":["React","Route","VersionsItem","VersionsList","_ref","currentId","internalSidebarNavigation","routerDisabled","versions","rest","_objectWithoutProperties","_excluded","renderVersionItemWithoutRouter","version","createElement","_extends","isCurrent","id","isSelected","versionId","renderVersionItemWithRouter","render","match","params","className","map","key"],"sources":["../../../../src/elements/content-sidebar/versions/VersionsList.js"],"sourcesContent":["/**\n * @flow\n * @file Versions List component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { Route } from 'react-router-dom';\nimport VersionsItem from './VersionsItem';\nimport type { BoxItemVersion } from '../../../common/types/core';\nimport type { InternalSidebarNavigation } from '../../common/types/SidebarNavigation';\nimport './VersionsList.scss';\n\ntype Props = {\n    currentId?: string,\n    fileId: string,\n    internalSidebarNavigation?: InternalSidebarNavigation,\n    routerDisabled?: boolean,\n    versionCount: number,\n    versionLimit: number,\n    versions: Array<BoxItemVersion>,\n};\n\nconst VersionsList = ({ currentId, internalSidebarNavigation, routerDisabled = false, versions, ...rest }: Props) => {\n    const renderVersionItemWithoutRouter = (version: BoxItemVersion) => (\n        <VersionsItem\n            isCurrent={currentId === version.id}\n            isSelected={internalSidebarNavigation?.versionId === version.id}\n            version={version}\n            {...rest}\n        />\n    );\n\n    const renderVersionItemWithRouter = (version: BoxItemVersion) => (\n        <Route\n            render={({ match }) => (\n                <VersionsItem\n                    isCurrent={currentId === version.id}\n                    isSelected={match.params.versionId === version.id}\n                    version={version}\n                    {...rest}\n                />\n            )}\n        />\n    );\n\n    return (\n        <ul className=\"bcs-VersionsList\">\n            {versions.map(version => (\n                <li className=\"bcs-VersionsList-item\" key={version.id}>\n                    {routerDisabled ? renderVersionItemWithoutRouter(version) : renderVersionItemWithRouter(version)}\n                </li>\n            ))}\n        </ul>\n    );\n};\n\nexport default VersionsList;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,kBAAkB;AACxC,OAAOC,YAAY,MAAM,gBAAgB;AAGzC,OAAO,qBAAqB;AAY5B,MAAMC,YAAY,GAAGC,IAAA,IAAgG;EAAA,IAA/F;MAAEC,SAAS;MAAEC,yBAAyB;MAAEC,cAAc,GAAG,KAAK;MAAEC;IAAyB,CAAC,GAAAJ,IAAA;IAAbK,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EACnG,MAAMC,8BAA8B,GAAIC,OAAuB,iBAC3Db,KAAA,CAAAc,aAAA,CAACZ,YAAY,EAAAa,QAAA;IACTC,SAAS,EAAEX,SAAS,KAAKQ,OAAO,CAACI,EAAG;IACpCC,UAAU,EAAEZ,yBAAyB,EAAEa,SAAS,KAAKN,OAAO,CAACI,EAAG;IAChEJ,OAAO,EAAEA;EAAQ,GACbJ,IAAI,CACX,CACJ;EAED,MAAMW,2BAA2B,GAAIP,OAAuB,iBACxDb,KAAA,CAAAc,aAAA,CAACb,KAAK;IACFoB,MAAM,EAAEA,CAAC;MAAEC;IAAM,CAAC,kBACdtB,KAAA,CAAAc,aAAA,CAACZ,YAAY,EAAAa,QAAA;MACTC,SAAS,EAAEX,SAAS,KAAKQ,OAAO,CAACI,EAAG;MACpCC,UAAU,EAAEI,KAAK,CAACC,MAAM,CAACJ,SAAS,KAAKN,OAAO,CAACI,EAAG;MAClDJ,OAAO,EAAEA;IAAQ,GACbJ,IAAI,CACX;EACH,CACL,CACJ;EAED,oBACIT,KAAA,CAAAc,aAAA;IAAIU,SAAS,EAAC;EAAkB,GAC3BhB,QAAQ,CAACiB,GAAG,CAACZ,OAAO,iBACjBb,KAAA,CAAAc,aAAA;IAAIU,SAAS,EAAC,uBAAuB;IAACE,GAAG,EAAEb,OAAO,CAACI;EAAG,GACjDV,cAAc,GAAGK,8BAA8B,CAACC,OAAO,CAAC,GAAGO,2BAA2B,CAACP,OAAO,CAC/F,CACP,CACD,CAAC;AAEb,CAAC;AAED,eAAeV,YAAY","ignoreList":[]}

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

@@ -11,11 +11,14 @@ import * as util from '../../../utils/datetime';
 import messages from './messages';
 import VersionsGroup from './VersionsGroup';
 import type { BoxItemVersion } from '../../../common/types/core';
+import type { InternalSidebarNavigation } from '../../common/types/SidebarNavigation';
 import './VersionsMenu.scss';
 
 type Props = {
     fileId: string,
     intl: any,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    routerDisabled?: boolean,
     versionCount: number,
     versionLimit: number,
     versions: Array<BoxItemVersion>,

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

@@ -1 +1 @@
-{"version":3,"file":"VersionsMenu.js","names":["React","last","injectIntl","util","messages","VersionsGroup","getHeading","intl","version","created_at","createdAt","currentDate","Date","currentDay","getDay","currentSunday","getDate","createdAtDate","convertToDate","heading","isToday","formatMessage","versionsToday","isYesterday","versionsYesterday","isCurrentYear","formatDate","year","isCurrentMonth","month","versionsThisMonth","versionsPriorWeek","weekday","VersionsMenu","memo","_ref","versions","rest","_objectWithoutProperties","_excluded","id","currentId","versionGroups","reduce","groups","currentGroup","groupHeading","push","groupVersions","createElement","className","map","key","_extends"],"sources":["../../../../src/elements/content-sidebar/versions/VersionsMenu.js"],"sourcesContent":["/**\n * @flow\n * @file Versions Menu component\n * @author Box\n */\n\nimport * as React from 'react';\nimport last from 'lodash/last';\nimport { injectIntl } from 'react-intl';\nimport * as util from '../../../utils/datetime';\nimport messages from './messages';\nimport VersionsGroup from './VersionsGroup';\nimport type { BoxItemVersion } from '../../../common/types/core';\nimport './VersionsMenu.scss';\n\ntype Props = {\n    fileId: string,\n    intl: any,\n    versionCount: number,\n    versionLimit: number,\n    versions: Array<BoxItemVersion>,\n};\n\ntype VersionGroups = Array<{ groupHeading: string, groupVersions: Array<BoxItemVersion> }>;\n\nconst getHeading = ({ intl, version }: { intl: any, version: BoxItemVersion }): string => {\n    const { created_at: createdAt } = version;\n    const currentDate = new Date();\n    const currentDay = currentDate.getDay();\n    const currentSunday = currentDate.getDate() - currentDay;\n    const createdAtDate = util.convertToDate(createdAt);\n    let heading;\n\n    if (util.isToday(createdAtDate)) {\n        heading = intl.formatMessage(messages.versionsToday); // Today\n    } else if (util.isYesterday(createdAtDate)) {\n        heading = intl.formatMessage(messages.versionsYesterday); // Yesterday\n    } else if (!util.isCurrentYear(createdAtDate)) {\n        heading = intl.formatDate(createdAt, { year: 'numeric' }); // 2018\n    } else if (!util.isCurrentMonth(createdAtDate)) {\n        heading = intl.formatDate(createdAt, { month: 'long' }); // January\n    } else if (createdAtDate.getDate() <= currentSunday - 7) {\n        heading = intl.formatMessage(messages.versionsThisMonth); // This Month\n    } else if (createdAtDate.getDate() <= currentSunday) {\n        heading = intl.formatMessage(messages.versionsPriorWeek); // Last Week\n    } else {\n        heading = intl.formatDate(createdAt, { weekday: 'long' }); // Monday\n    }\n\n    return heading;\n};\n\nconst VersionsMenu = React.memo<Props>(({ intl, versions, ...rest }: Props) => {\n    const { id: currentId } = versions[0] || {};\n\n    // Build an ordered set of groups with headings based on the original order of the versions array\n    const versionGroups = versions.reduce((groups: VersionGroups, version: BoxItemVersion): VersionGroups => {\n        const currentGroup = last(groups);\n        const groupHeading = getHeading({ intl, version });\n\n        // Push a new group if there are no groups or if the heading has changed\n        if (!currentGroup || currentGroup.groupHeading !== groupHeading) {\n            groups.push({\n                groupHeading,\n                groupVersions: [],\n            });\n        }\n\n        // Push the sorted version to the newest group's versions collection\n        last(groups).groupVersions.push(version);\n        return groups;\n    }, []);\n\n    return (\n        <ul className=\"bcs-VersionsMenu\">\n            {versionGroups.map(({ groupHeading, groupVersions }) => (\n                <li className=\"bcs-VersionsMenu-item\" key={groupHeading}>\n                    <VersionsGroup currentId={currentId} heading={groupHeading} versions={groupVersions} {...rest} />\n                </li>\n            ))}\n        </ul>\n    );\n});\n\nexport default injectIntl(VersionsMenu);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VersionsMenu.js","names":["React","last","injectIntl","util","messages","VersionsGroup","getHeading","intl","version","created_at","createdAt","currentDate","Date","currentDay","getDay","currentSunday","getDate","createdAtDate","convertToDate","heading","isToday","formatMessage","versionsToday","isYesterday","versionsYesterday","isCurrentYear","formatDate","year","isCurrentMonth","month","versionsThisMonth","versionsPriorWeek","weekday","VersionsMenu","memo","_ref","versions","rest","_objectWithoutProperties","_excluded","id","currentId","versionGroups","reduce","groups","currentGroup","groupHeading","push","groupVersions","createElement","className","map","key","_extends"],"sources":["../../../../src/elements/content-sidebar/versions/VersionsMenu.js"],"sourcesContent":["/**\n * @flow\n * @file Versions Menu component\n * @author Box\n */\n\nimport * as React from 'react';\nimport last from 'lodash/last';\nimport { injectIntl } from 'react-intl';\nimport * as util from '../../../utils/datetime';\nimport messages from './messages';\nimport VersionsGroup from './VersionsGroup';\nimport type { BoxItemVersion } from '../../../common/types/core';\nimport type { InternalSidebarNavigation } from '../../common/types/SidebarNavigation';\nimport './VersionsMenu.scss';\n\ntype Props = {\n    fileId: string,\n    intl: any,\n    internalSidebarNavigation?: InternalSidebarNavigation,\n    routerDisabled?: boolean,\n    versionCount: number,\n    versionLimit: number,\n    versions: Array<BoxItemVersion>,\n};\n\ntype VersionGroups = Array<{ groupHeading: string, groupVersions: Array<BoxItemVersion> }>;\n\nconst getHeading = ({ intl, version }: { intl: any, version: BoxItemVersion }): string => {\n    const { created_at: createdAt } = version;\n    const currentDate = new Date();\n    const currentDay = currentDate.getDay();\n    const currentSunday = currentDate.getDate() - currentDay;\n    const createdAtDate = util.convertToDate(createdAt);\n    let heading;\n\n    if (util.isToday(createdAtDate)) {\n        heading = intl.formatMessage(messages.versionsToday); // Today\n    } else if (util.isYesterday(createdAtDate)) {\n        heading = intl.formatMessage(messages.versionsYesterday); // Yesterday\n    } else if (!util.isCurrentYear(createdAtDate)) {\n        heading = intl.formatDate(createdAt, { year: 'numeric' }); // 2018\n    } else if (!util.isCurrentMonth(createdAtDate)) {\n        heading = intl.formatDate(createdAt, { month: 'long' }); // January\n    } else if (createdAtDate.getDate() <= currentSunday - 7) {\n        heading = intl.formatMessage(messages.versionsThisMonth); // This Month\n    } else if (createdAtDate.getDate() <= currentSunday) {\n        heading = intl.formatMessage(messages.versionsPriorWeek); // Last Week\n    } else {\n        heading = intl.formatDate(createdAt, { weekday: 'long' }); // Monday\n    }\n\n    return heading;\n};\n\nconst VersionsMenu = React.memo<Props>(({ intl, versions, ...rest }: Props) => {\n    const { id: currentId } = versions[0] || {};\n\n    // Build an ordered set of groups with headings based on the original order of the versions array\n    const versionGroups = versions.reduce((groups: VersionGroups, version: BoxItemVersion): VersionGroups => {\n        const currentGroup = last(groups);\n        const groupHeading = getHeading({ intl, version });\n\n        // Push a new group if there are no groups or if the heading has changed\n        if (!currentGroup || currentGroup.groupHeading !== groupHeading) {\n            groups.push({\n                groupHeading,\n                groupVersions: [],\n            });\n        }\n\n        // Push the sorted version to the newest group's versions collection\n        last(groups).groupVersions.push(version);\n        return groups;\n    }, []);\n\n    return (\n        <ul className=\"bcs-VersionsMenu\">\n            {versionGroups.map(({ groupHeading, groupVersions }) => (\n                <li className=\"bcs-VersionsMenu-item\" key={groupHeading}>\n                    <VersionsGroup currentId={currentId} heading={groupHeading} versions={groupVersions} {...rest} />\n                </li>\n            ))}\n        </ul>\n    );\n});\n\nexport default injectIntl(VersionsMenu);\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.4.0-beta.17",
+    "version": "23.4.0-beta.18",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -137,7 +137,7 @@
         "@box/frontend": "^11.0.1",
         "@box/item-icon": "^0.9.83",
         "@box/languages": "^1.0.0",
-        "@box/metadata-editor": "^0.112.0",
+        "@box/metadata-editor": "^0.115.0",
         "@box/react-virtualized": "9.22.3-rc-box.9",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@chromatic-com/storybook": "^1.6.1",
@@ -306,7 +306,7 @@
         "@box/cldr-data": ">=34.2.0",
         "@box/combobox-with-api": "^0.34.9",
         "@box/item-icon": "^0.9.83",
-        "@box/metadata-editor": "^0.112.0",
+        "@box/metadata-editor": "^0.115.0",
         "@box/react-virtualized": "9.22.3-rc-box.9",
         "@hapi/address": "^2.1.4",
         "axios": "^0.30.0",

package/src/elements/common/types/{SidebarNavigation.flow.js → SidebarNavigation.js.flow}

@@ -1,5 +1,8 @@
 /* @flow */
 
+// flow version is simplified compared to Type Script due to difficult to resolve problems with Union Types
+// Type Script works better with Union Types
+
 export const ViewType = Object.freeze({
     BOXAI: 'boxai',
     SKILLS: 'skills',
@@ -18,30 +21,13 @@ export const FeedEntryType = Object.freeze({
 export type ViewTypeValues = $Values<typeof ViewType>;
 export type FeedEntryTypeValues = $Values<typeof FeedEntryType>;
 
-type VersionSidebarView = {
-    sidebar: 'activity' | 'details',
-    versionId: string,
-};
-
-export type ActivityAnnotationsSidebarView = {
-    sidebar: 'activity',
-    activeFeedEntryType: 'annotations',
-    fileVersionId: string,
-    activeFeedEntryId: string,
+export type SidebarNavigation = {
+    sidebar: ViewTypeValues,
+    versionId?: string,
+    activeFeedEntryType?: FeedEntryTypeValues,
+    activeFeedEntryId?: string,
+    fileVersionId?: string,
 };
-type ActivityCommentsSidebarView = {
-    sidebar: 'activity',
-    activeFeedEntryType: 'comments' | 'tasks',
-    activeFeedEntryId: string,
-};
-
-export type SidebarNavigation =
-    | {|
-          sidebar: ViewTypeValues,
-      |}
-    | VersionSidebarView
-    | ActivityCommentsSidebarView
-    | ActivityAnnotationsSidebarView;
 
 export type InternalSidebarNavigation = SidebarNavigation & {
     open: boolean,

package/src/elements/content-sidebar/versions/VersionsGroup.js

@@ -7,11 +7,14 @@
 import * as React from 'react';
 import VersionsList from './VersionsList';
 import type { BoxItemVersion } from '../../../common/types/core';
+import type { InternalSidebarNavigation } from '../../common/types/SidebarNavigation';
 import './VersionsGroup.scss';
 
 type Props = {
     fileId: string,
     heading: string,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    routerDisabled?: boolean,
     versionCount: number,
     versionLimit: number,
     versions: Array<BoxItemVersion>,

package/src/elements/content-sidebar/versions/VersionsList.js

@@ -8,33 +8,51 @@ import * as React from 'react';
 import { Route } from 'react-router-dom';
 import VersionsItem from './VersionsItem';
 import type { BoxItemVersion } from '../../../common/types/core';
+import type { InternalSidebarNavigation } from '../../common/types/SidebarNavigation';
 import './VersionsList.scss';
 
 type Props = {
     currentId?: string,
     fileId: string,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    routerDisabled?: boolean,
     versionCount: number,
     versionLimit: number,
     versions: Array<BoxItemVersion>,
 };
 
-const VersionsList = ({ currentId, versions, ...rest }: Props) => (
-    <ul className="bcs-VersionsList">
-        {versions.map(version => (
-            <li className="bcs-VersionsList-item" key={version.id}>
-                <Route
-                    render={({ match }) => (
-                        <VersionsItem
-                            isCurrent={currentId === version.id}
-                            isSelected={match.params.versionId === version.id}
-                            version={version}
-                            {...rest}
-                        />
-                    )}
+const VersionsList = ({ currentId, internalSidebarNavigation, routerDisabled = false, versions, ...rest }: Props) => {
+    const renderVersionItemWithoutRouter = (version: BoxItemVersion) => (
+        <VersionsItem
+            isCurrent={currentId === version.id}
+            isSelected={internalSidebarNavigation?.versionId === version.id}
+            version={version}
+            {...rest}
+        />
+    );
+
+    const renderVersionItemWithRouter = (version: BoxItemVersion) => (
+        <Route
+            render={({ match }) => (
+                <VersionsItem
+                    isCurrent={currentId === version.id}
+                    isSelected={match.params.versionId === version.id}
+                    version={version}
+                    {...rest}
                 />
-            </li>
-        ))}
-    </ul>
-);
+            )}
+        />
+    );
+
+    return (
+        <ul className="bcs-VersionsList">
+            {versions.map(version => (
+                <li className="bcs-VersionsList-item" key={version.id}>
+                    {routerDisabled ? renderVersionItemWithoutRouter(version) : renderVersionItemWithRouter(version)}
+                </li>
+            ))}
+        </ul>
+    );
+};
 
 export default VersionsList;

package/src/elements/content-sidebar/versions/VersionsMenu.js

@@ -11,11 +11,14 @@ import * as util from '../../../utils/datetime';
 import messages from './messages';
 import VersionsGroup from './VersionsGroup';
 import type { BoxItemVersion } from '../../../common/types/core';
+import type { InternalSidebarNavigation } from '../../common/types/SidebarNavigation';
 import './VersionsMenu.scss';
 
 type Props = {
     fileId: string,
     intl: any,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    routerDisabled?: boolean,
     versionCount: number,
     versionLimit: number,
     versions: Array<BoxItemVersion>,

package/src/elements/content-sidebar/versions/__tests__/VersionsList.test.js

@@ -1,23 +1,148 @@
 import * as React from 'react';
-import { shallow } from 'enzyme/build';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { render, screen } from '../../../../test-utils/testing-library';
 import VersionsList from '../VersionsList';
 
+jest.mock('../VersionsItem', () => {
+    const MockVersionsItem = jest.fn(({ isCurrent, isSelected, version, fileId, versionCount, versionLimit }) => (
+        <div data-testid={`versions-item-${version.id}`}>
+            <span>Version {version.id}</span>
+            {isCurrent && <span>Current</span>}
+            {isSelected && <span>Selected</span>}
+            {fileId && <span>FileID: {fileId}</span>}
+            {versionCount && <span>VersionCount: {versionCount}</span>}
+            {versionLimit && <span>VersionLimit: {versionLimit}</span>}
+        </div>
+    ));
+    return MockVersionsItem;
+});
+
 describe('elements/content-sidebar/versions/VersionsList', () => {
-    const getWrapper = (props = {}) => shallow(<VersionsList {...props} />);
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const renderComponent = (props = {}, routePath = '/activity/versions/12345') => {
+        if (props.routerDisabled) {
+            return render(<VersionsList {...props} />);
+        }
+
+        return render(
+            <MemoryRouter initialEntries={[routePath]}>
+                <Route path="/:sidebar(activity|details)/versions/:versionId?">
+                    <VersionsList {...props} />
+                </Route>
+            </MemoryRouter>,
+        );
+    };
 
     describe('render', () => {
-        test.each`
-            versions
-            ${[]}
-            ${[{ id: '12345' }]}
-            ${[{ id: '12345' }, { id: '45678' }]}
-        `('should match its snapshot', ({ versions }) => {
-            const match = {
-                params: { versionId: '12345' },
-                path: '/versions/:versionId',
+        test('should render empty list when no versions provided', () => {
+            renderComponent({ versions: [] });
+            const list = screen.getByRole('list');
+            const listItems = screen.queryAllByRole('listitem');
+
+            expect(list).toBeInTheDocument();
+            expect(listItems).toHaveLength(0);
+        });
+
+        test('should render single version item', () => {
+            const versions = [{ id: '12345' }];
+            renderComponent({ versions });
+            const list = screen.getByRole('list');
+            const listItems = screen.getAllByRole('listitem');
+
+            expect(list).toBeInTheDocument();
+            expect(listItems).toHaveLength(1);
+            expect(screen.getByText('Version 12345')).toBeInTheDocument();
+        });
+
+        test('should render multiple version items', () => {
+            const versions = [{ id: '12345' }, { id: '45678' }];
+            renderComponent({ versions });
+            const list = screen.getByRole('list');
+            const listItems = screen.getAllByRole('listitem');
+
+            expect(list).toBeInTheDocument();
+            expect(listItems).toHaveLength(2);
+            expect(screen.getByText('Version 12345')).toBeInTheDocument();
+            expect(screen.getByText('Version 45678')).toBeInTheDocument();
+        });
+
+        test('should pass correct isCurrent prop based on currentId', () => {
+            const versions = [{ id: '12345' }, { id: '67890' }];
+            const currentId = '12345';
+            renderComponent({ versions, currentId, routerDisabled: true });
+
+            // Version 12345 should be marked as current
+            const version12345Container = screen.getByTestId('versions-item-12345');
+            expect(version12345Container).toBeInTheDocument();
+            expect(screen.getByText('Current')).toBeInTheDocument();
+
+            // Only one "Current" text should exist
+            expect(screen.getAllByText('Current')).toHaveLength(1);
+        });
+
+        test('should use router selection when routerDisabled is false', () => {
+            const versions = [{ id: '12345' }, { id: '67890' }];
+            renderComponent({ versions, routerDisabled: false }, '/activity/versions/12345');
+
+            // Version 12345 should be marked as selected based on route
+            const version12345Container = screen.getByTestId('versions-item-12345');
+            expect(version12345Container).toBeInTheDocument();
+            expect(version12345Container).toHaveTextContent('Selected');
+            expect(screen.getAllByText('Selected')).toHaveLength(1);
+        });
+
+        test('should use internalSidebarNavigation selection when routerDisabled is true', () => {
+            const versions = [{ id: '12345' }, { id: '67890' }];
+            const internalSidebarNavigation = { versionId: '67890', open: true };
+
+            renderComponent({
+                versions,
+                routerDisabled: true,
+                internalSidebarNavigation,
+            });
+
+            // Version 67890 should be marked as selected based on internal navigation
+            const version67890Container = screen.getByTestId('versions-item-67890');
+            expect(version67890Container).toBeInTheDocument();
+            expect(version67890Container).toHaveTextContent('Selected');
+            expect(screen.getAllByText('Selected')).toHaveLength(1);
+        });
+
+        test('should handle no selection when internalSidebarNavigation is not provided', () => {
+            const versions = [{ id: '12345' }, { id: '67890' }];
+
+            renderComponent({ versions, routerDisabled: true });
+
+            // No version should be selected
+            expect(screen.queryByText('Selected')).not.toBeInTheDocument();
+        });
+
+        test('should render items with correct version IDs', () => {
+            const versions = [{ id: 'version-abc' }, { id: 'version-xyz' }];
+
+            renderComponent({ versions, routerDisabled: true });
+
+            expect(screen.getByText('Version version-abc')).toBeInTheDocument();
+            expect(screen.getByText('Version version-xyz')).toBeInTheDocument();
+        });
+
+        test('should pass down other props to VersionsItem', () => {
+            const versions = [{ id: '12345' }];
+            const props = {
+                versions,
+                fileId: 'f_123',
+                versionCount: 10,
+                versionLimit: 100,
+                routerDisabled: true,
             };
-            const wrapper = getWrapper({ match, versions });
-            expect(wrapper).toMatchSnapshot();
+            renderComponent(props);
+
+            expect(screen.getByText('FileID: f_123')).toBeInTheDocument();
+            expect(screen.getByText('VersionCount: 10')).toBeInTheDocument();
+            expect(screen.getByText('VersionLimit: 100')).toBeInTheDocument();
         });
     });
 });