@atlaskit/media-viewer 48.1.7 → 48.2.0

package/dist/es2019/item-viewer.js

@@ -64,7 +64,7 @@ export class ItemViewerBase extends React.Component {
       item.whenSuccessful(fileItem => {
         if (isFileStateItem(fileItem)) {
           const fileAttributes = getFileAttributes(fileItem);
-          fireAnalytics(createLoadSucceededEvent(fileAttributes, this.traceContext), this.props);
+          fireAnalytics(createLoadSucceededEvent(fileAttributes, this.traceContext), this.props.createAnalyticsEvent);
           succeedMediaFileUfoExperience({
             fileAttributes,
             fileStateFlags: this.fileStateFlags
@@ -80,7 +80,7 @@ export class ItemViewerBase extends React.Component {
     _defineProperty(this, "onExternalImgSuccess", () => {
       fireAnalytics(createLoadSucceededEvent({
         fileId: 'external-image'
-      }), this.props);
+      }), this.props.createAnalyticsEvent);
       succeedMediaFileUfoExperience({
         fileAttributes: {
           fileId: 'external-image'
@@ -270,7 +270,8 @@ export class ItemViewerBase extends React.Component {
   init(props) {
     const {
       mediaClient,
-      identifier
+      identifier,
+      createAnalyticsEvent
     } = props;
     if (isExternalImageIdentifier(identifier)) {
       // external images do not need to talk to our backend,
@@ -284,7 +285,7 @@ export class ItemViewerBase extends React.Component {
     const {
       id
     } = identifier;
-    fireAnalytics(createCommencedEvent(id, this.traceContext), this.props);
+    fireAnalytics(createCommencedEvent(id, this.traceContext), createAnalyticsEvent);
     startMediaFileUfoExperience();
     this.subscription = mediaClient.file.getFileState(id, {
       collectionName: identifier.collectionName

package/dist/es2019/media-viewer.js

@@ -22,20 +22,22 @@ export class MediaViewerComponent extends React.Component {
       isSidebarVisible: false
     });
     _defineProperty(this, "onShortcutClosed", () => {
-      fireAnalytics(createClosedEvent('escKey'), this.props);
       const {
-        onClose
+        onClose,
+        createAnalyticsEvent
       } = this.props;
+      fireAnalytics(createClosedEvent('escKey'), createAnalyticsEvent);
       if (onClose) {
         onClose();
       }
     });
     _defineProperty(this, "onContentClose", (_e, analyticsEvent) => {
       const {
-        onClose
+        onClose,
+        createAnalyticsEvent
       } = this.props;
       if (analyticsEvent && analyticsEvent.payload && analyticsEvent.payload.actionSubject === 'button') {
-        fireAnalytics(createClosedEvent('button'), this.props);
+        fireAnalytics(createClosedEvent('button'), createAnalyticsEvent);
       }
       if (onClose) {
         onClose();
@@ -70,7 +72,7 @@ export class MediaViewerComponent extends React.Component {
     });
   }
   UNSAFE_componentWillMount() {
-    fireAnalytics(createModalEvent(), this.props);
+    fireAnalytics(createModalEvent(), this.props.createAnalyticsEvent);
     start('MediaViewer.SessionDuration');
   }
   get defaultSelectedItem() {
@@ -100,7 +102,7 @@ export class MediaViewerComponent extends React.Component {
       "data-testid": "media-viewer-popup",
       className: mediaViewerPopupClass
     }, /*#__PURE__*/React.createElement(Shortcut, {
-      keyCode: 27,
+      code: 'Escape',
       handler: this.onShortcutClosed
     }), /*#__PURE__*/React.createElement(Content, {
       isSidebarVisible: isSidebarVisible,

package/dist/es2019/navigation.js

@@ -18,14 +18,15 @@ export class NavigationBase extends Component {
     return () => {
       const {
         onChange,
-        items
+        items,
+        createAnalyticsEvent
       } = this.props;
       const {
         selectedIndex
       } = this;
       const newItem = direction === 'next' ? items[selectedIndex + 1] : items[selectedIndex - 1];
       if (newItem) {
-        fireAnalytics(createNavigatedEvent(direction, source, newItem), this.props);
+        fireAnalytics(createNavigatedEvent(direction, source, newItem), createAnalyticsEvent);
         onChange(newItem);
       }
     };
@@ -57,7 +58,7 @@ export class NavigationBase extends Component {
     }, isLeftVisible ? /*#__PURE__*/React.createElement(Arrow, {
       className: hideControlsClassName
     }, /*#__PURE__*/React.createElement(Shortcut, {
-      keyCode: 37,
+      code: 'ArrowLeft',
       handler: prev('keyboard')
     }), /*#__PURE__*/React.createElement(Button, {
       testId: prevNavButtonId,
@@ -75,7 +76,7 @@ export class NavigationBase extends Component {
     })) : null), /*#__PURE__*/React.createElement(RightWrapper, null, isRightVisible ? /*#__PURE__*/React.createElement(Arrow, {
       className: hideControlsClassName
     }, /*#__PURE__*/React.createElement(Shortcut, {
-      keyCode: 39,
+      code: 'ArrowRight',
       handler: next('keyboard')
     }), /*#__PURE__*/React.createElement(Button, {
       testId: nextNavButtonId,

package/dist/es2019/styleWrappers.js

@@ -5,6 +5,7 @@ import { forwardRef, useMemo } from 'react';
 import { arrowStyles, arrowsWrapperStyles, audioCoverStyles, audioPlayerStyles, audioStyles, baselineExtendStyles, blanketStyles, closeButtonWrapperStyles, contentWrapperStyles, customAudioPlayerWrapperStyles, customVideoPlayerWrapperStyles, defaultCoverWrapperStyles, downloadButtonWrapperStyles, errorImageStyles, errorMessageWrapperStyles, formattedMessageWrapperStyles, hdIconGroupWrapperStyles, hdIconWrapperStyles, headerStyles, headerWrapperStyles, imageWrapperStyles, imgStyles, leftHeaderStyles, leftWrapperStyles, listWrapperStyles, medatadataTextWrapperStyles, metadataFileNameStyles, metadataIconWrapperStyles, metadataSubTextStyles, metadataWrapperStyles, pdfWrapperStyles, rightHeaderStyles, rightWrapperStyles, sidebarWrapperStyles, spinnerWrapperStyles, videoStyles, zoomControlsWrapperStyles, zoomLevelIndicatorStyles, zoomWrapperStyles } from './styles';
 import { TouchScrollable } from 'react-scrolllock';
 import { useMergeRefs } from 'use-callback-ref';
+// We are keeping this data-testid since JIRA is still using it in their codebase to perform checks. Before removing this, we need to ensure this 'media-viewer-popup' test id is not being used anywhere else in other codebases
 export const Blanket = ({
   'data-testid': datatestId,
   className,

package/dist/es2019/v2/header-v2.js

@@ -0,0 +1,138 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { isExternalImageIdentifier, isErrorFileState } from '@atlaskit/media-client';
+import { hideControlsClassName, messages, toHumanReadableMediaSize, MediaButton } from '@atlaskit/media-ui';
+import { getLanguageType, getExtension, isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
+import { Outcome } from '../domain';
+import { Header as HeaderWrapper, LeftHeader, RightHeader, MetadataWrapper, MetadataSubText, MedatadataTextWrapper, MetadataIconWrapper, MetadataFileName, FormattedMessageWrapper } from '../styleWrappers';
+import { ToolbarDownloadButton, DisabledToolbarDownloadButton } from '../download';
+import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
+import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
+import { getFormat } from '../viewers/codeViewer/util';
+import { MediaViewerError } from '../errors';
+export const HeaderV2 = ({
+  isArchiveSideBarVisible = false,
+  extensions,
+  isSidebarVisible,
+  onSidebarButtonClick,
+  identifier,
+  onSetArchiveSideBarVisible
+}) => {
+  // States
+  const [item, setItem] = useState(Outcome.pending());
+
+  // Refs and Hooks
+  const mediaClient = useMediaClient();
+  const {
+    id,
+    collectionName,
+    occurrenceKey
+  } = identifier;
+  const {
+    fileState
+  } = useFileState(id, {
+    collectionName,
+    occurrenceKey
+  });
+  const onSetArchiveSideBarVisibleRef = useRef(onSetArchiveSideBarVisible);
+  onSetArchiveSideBarVisibleRef.current = onSetArchiveSideBarVisible;
+
+  // previous values
+  useEffect(() => {
+    if (isExternalImageIdentifier(identifier)) {
+      const {
+        name = identifier.dataURI
+      } = identifier;
+
+      // Simulate a processing file state to render right metadata
+      const fileState = {
+        status: 'processing',
+        id: name,
+        mediaType: 'image',
+        mimeType: 'image/',
+        name,
+        representations: {},
+        size: 0
+      };
+      setItem(Outcome.successful(fileState));
+      return;
+    }
+    if (!fileState) {
+      return;
+    }
+    if (fileState.status !== 'error') {
+      var _onSetArchiveSideBarV;
+      (_onSetArchiveSideBarV = onSetArchiveSideBarVisibleRef.current) === null || _onSetArchiveSideBarV === void 0 ? void 0 : _onSetArchiveSideBarV.call(onSetArchiveSideBarVisibleRef, !isErrorFileState(fileState) && fileState.mediaType === 'archive');
+      setItem(Outcome.successful(fileState));
+    } else {
+      const error = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
+      setItem(Outcome.failed(new MediaViewerError('header-fetch-metadata', error)));
+    }
+  }, [fileState, identifier]);
+  const renderFileTypeText = item => {
+    // render appropriate header if its a code/email item and the feature flag is enabled
+    if (isCodeViewerItem(item.name, item.mimeType)) {
+      // gather language and extension
+      // i.e test.py would have a language of 'python' and an extension of 'py'
+      const language = getLanguageType(item.name, item.mimeType);
+      const ext = getExtension(item.name);
+
+      // specific cases for if we want a certain word translated in other languages
+      switch (ext) {
+        case 'msg':
+          return /*#__PURE__*/React.createElement(FormattedMessage, messages.email);
+        case 'txt':
+          return /*#__PURE__*/React.createElement(FormattedMessage, messages.text);
+      }
+
+      // no need for translations in other languages
+      return /*#__PURE__*/React.createElement(React.Fragment, null, getFormat(language || 'unknown', ext));
+    }
+    const {
+      mediaType
+    } = item;
+    const mediaTypeTranslationMap = {
+      doc: messages.document,
+      audio: messages.audio,
+      video: messages.video,
+      image: messages.image,
+      archive: messages.archive,
+      unknown: messages.unknown
+    };
+    const message = mediaTypeTranslationMap[mediaType || 'unknown'];
+
+    // Defaulting to unknown again since backend has more mediaTypes than the current supported ones
+    return /*#__PURE__*/React.createElement(FormattedMessage, message || messages.unknown);
+  };
+  return /*#__PURE__*/React.createElement(HeaderWrapper, {
+    isArchiveSideBarVisible: isArchiveSideBarVisible,
+    className: hideControlsClassName
+  }, /*#__PURE__*/React.createElement(LeftHeader, null, item.match({
+    successful: item => !isErrorFileState(item) && /*#__PURE__*/React.createElement(MetadataWrapper, null, /*#__PURE__*/React.createElement(MetadataIconWrapper, null, /*#__PURE__*/React.createElement(MimeTypeIcon, {
+      testId: 'media-viewer-file-type-icon',
+      mediaType: item.mediaType,
+      mimeType: item.mimeType,
+      name: item.name
+    })), /*#__PURE__*/React.createElement(MedatadataTextWrapper, null, /*#__PURE__*/React.createElement(MetadataFileName, {
+      "data-testid": "media-viewer-file-name"
+    }, item.name || /*#__PURE__*/React.createElement(FormattedMessage, messages.unknown)), /*#__PURE__*/React.createElement(MetadataSubText, {
+      "data-testid": "media-viewer-file-metadata-text"
+    }, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, renderFileTypeText(item)), item.size ? ' · ' + toHumanReadableMediaSize(item.size) : ''))),
+    pending: () => null,
+    failed: () => null
+  })), /*#__PURE__*/React.createElement(RightHeader, null, (extensions === null || extensions === void 0 ? void 0 : extensions.sidebar) && /*#__PURE__*/React.createElement(MediaButton, {
+    isSelected: isSidebarVisible,
+    testId: "media-viewer-sidebar-button",
+    onClick: onSidebarButtonClick,
+    iconBefore: extensions.sidebar.icon
+  }), item.match({
+    pending: () => DisabledToolbarDownloadButton,
+    failed: () => DisabledToolbarDownloadButton,
+    successful: item => /*#__PURE__*/React.createElement(ToolbarDownloadButton, {
+      state: item,
+      identifier: identifier,
+      mediaClient: mediaClient
+    })
+  })));
+};
+export default injectIntl(HeaderV2);

package/dist/es2019/v2/item-viewer-v2.js

@@ -0,0 +1,269 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import Loadable from 'react-loadable';
+import { isExternalImageIdentifier, isFileIdentifier } from '@atlaskit/media-client';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui';
+import { isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
+import { useFileState, useMediaClient, MediaFileStateError } from '@atlaskit/media-client-react';
+import { Outcome } from '../domain';
+import { Spinner } from '../loading';
+import ErrorMessage from '../errorMessage';
+import { MediaViewerError } from '../errors';
+import { ErrorViewDownloadButton } from '../download';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createCommencedEvent } from '../analytics/events/operational/commenced';
+import { createLoadSucceededEvent } from '../analytics/events/operational/loadSucceeded';
+import { fireAnalytics, getFileAttributes } from '../analytics';
+import { InteractiveImg } from '../viewers/image/interactive-img';
+import ArchiveViewerLoader from '../viewers/archiveSidebar/archiveViewerLoader';
+import { getRandomHex } from '@atlaskit/media-common';
+import { startMediaFileUfoExperience, succeedMediaFileUfoExperience } from '../analytics/ufoExperiences';
+const ImageViewer = Loadable({
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'../viewers/image').then(mod => mod.ImageViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+const VideoViewer = Loadable({
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_videoViewer" */'../viewers/video').then(mod => mod.VideoViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+const AudioViewer = Loadable({
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_audioViewer" */'../viewers/audio').then(mod => mod.AudioViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+const DocViewer = Loadable({
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_docViewer" */'../viewers/doc').then(mod => mod.DocViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+const CodeViewer = Loadable({
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_codeViewer" */'../viewers/codeViewer').then(mod => mod.CodeViewer),
+  loading: () => /*#__PURE__*/React.createElement(Spinner, null)
+});
+// Consts
+export const isExternalImageItem = fileItem => fileItem === 'external-image';
+export const isFileStateItem = fileItem => !isExternalImageItem(fileItem);
+export const MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER = 10 * 1024 * 1024;
+export const ItemViewerV2Base = ({
+  identifier,
+  showControls,
+  onClose,
+  previewCount,
+  contextId,
+  createAnalyticsEvent
+}) => {
+  // States and Refs
+  const [item, setItem] = useState(Outcome.pending());
+  const traceContext = useRef({
+    traceId: getRandomHex(8)
+  });
+  const fileStateFlagsRef = useRef({
+    wasStatusUploading: false,
+    wasStatusProcessing: false
+  });
+  const createAnalyticsEventRef = useRef(createAnalyticsEvent);
+  createAnalyticsEventRef.current = createAnalyticsEvent;
+
+  // Hooks
+  const mediaClient = useMediaClient();
+  const {
+    fileState
+  } = useFileState(isExternalImageIdentifier(identifier) ? '' : identifier.id, {
+    collectionName: isExternalImageIdentifier(identifier) ? '' : identifier.collectionName,
+    skipRemote: isExternalImageIdentifier(identifier)
+  });
+  const renderDownloadButton = useCallback((fileState, error) => {
+    const collectionName = isFileIdentifier(identifier) ? identifier.collectionName : undefined;
+    return /*#__PURE__*/React.createElement(ErrorViewDownloadButton, {
+      fileState: fileState,
+      mediaClient: mediaClient,
+      error: error,
+      collectionName: collectionName
+    });
+  }, [mediaClient, identifier]);
+
+  // Did mount
+
+  useEffect(() => {
+    if (isExternalImageIdentifier(identifier)) {
+      // external images do not need to talk to our backend,
+      // so therefore no need for media-client subscriptions.
+      // just set a successful outcome of type "external-image".
+      setItem(Outcome.successful('external-image'));
+      return;
+    }
+    fireAnalytics(createCommencedEvent(identifier === null || identifier === void 0 ? void 0 : identifier.id, traceContext.current), createAnalyticsEventRef.current);
+    startMediaFileUfoExperience();
+
+    // File Subscription
+
+    if (fileState) {
+      const {
+        status
+      } = fileState;
+      if (fileState.status !== 'error') {
+        // updateFileStateFlag
+
+        if (status === 'processing') {
+          fileStateFlagsRef.current.wasStatusProcessing = true;
+        } else if (status === 'uploading') {
+          fileStateFlagsRef.current.wasStatusUploading = true;
+        }
+        setItem(Outcome.successful(fileState));
+      } else {
+        const e = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
+        setItem(Outcome.failed(new MediaViewerError('itemviewer-fetch-metadata', e)));
+      }
+    }
+  }, [fileState, identifier]);
+  const onSuccess = useCallback(() => {
+    item.whenSuccessful(fileItem => {
+      if (isFileStateItem(fileItem)) {
+        const fileAttributes = getFileAttributes(fileItem);
+        fireAnalytics(createLoadSucceededEvent(fileAttributes, traceContext.current), createAnalyticsEventRef.current);
+        succeedMediaFileUfoExperience({
+          fileAttributes,
+          fileStateFlags: fileStateFlagsRef.current
+        });
+      }
+    });
+  }, [item]);
+  const onLoadFail = useCallback(mediaViewerError => {
+    setItem(Outcome.failed(mediaViewerError));
+  }, []);
+  const renderError = useCallback((error, fileItem) => {
+    if (fileItem) {
+      let fileState;
+      if (fileItem === 'external-image') {
+        // external image error outcome
+        fileState = {
+          id: 'external-image',
+          status: 'error'
+        };
+      } else {
+        // FileState error outcome
+        fileState = fileItem;
+      }
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
+        error: error,
+        fileState: fileState,
+        fileStateFlags: fileStateFlagsRef.current,
+        traceContext: traceContext.current
+      }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file)), renderDownloadButton(fileState, error));
+    } else {
+      return /*#__PURE__*/React.createElement(ErrorMessage, {
+        fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
+        error: error,
+        fileStateFlags: fileStateFlagsRef.current
+      });
+    }
+  }, [identifier, renderDownloadButton, traceContext]);
+  return item.match({
+    successful: fileItem => {
+      if (fileItem === 'external-image') {
+        // render an external image
+        const {
+          dataURI
+        } = identifier;
+        return /*#__PURE__*/React.createElement(InteractiveImg, {
+          src: dataURI,
+          onLoad: () => {
+            fireAnalytics(createLoadSucceededEvent({
+              fileId: 'external-image'
+            }), createAnalyticsEventRef.current);
+            succeedMediaFileUfoExperience({
+              fileAttributes: {
+                fileId: 'external-image'
+              },
+              fileStateFlags: fileStateFlagsRef.current
+            });
+          },
+          onError: () => {
+            setItem(Outcome.failed(new MediaViewerError('imageviewer-external-onerror')));
+          }
+        });
+      } else {
+        // render a FileState fetched through media-client
+        switch (fileItem.status) {
+          case 'processed':
+          case 'uploading':
+          case 'processing':
+            // TODO: renderItem
+            const collectionName = isFileIdentifier(identifier) ? identifier.collectionName : undefined;
+            const viewerProps = {
+              mediaClient,
+              item: fileItem,
+              collectionName,
+              onClose,
+              previewCount
+            };
+
+            // TODO: fix all of the item errors
+
+            if (isCodeViewerItem(fileItem.name, fileItem.mimeType)) {
+              //Render error message if code file has size over 10MB.
+              //Required by https://product-fabric.atlassian.net/browse/MEX-1788
+              if (fileItem.size > MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
+                return renderError(new MediaViewerError('codeviewer-file-size-exceeds'), fileItem);
+              }
+              return /*#__PURE__*/React.createElement(CodeViewer, _extends({
+                onSuccess: onSuccess,
+                onError: onLoadFail
+              }, viewerProps));
+            }
+            const {
+              mediaType
+            } = fileItem;
+            switch (mediaType) {
+              case 'image':
+                return /*#__PURE__*/React.createElement(ImageViewer, _extends({
+                  onLoad: onSuccess,
+                  onError: onLoadFail,
+                  contextId: contextId,
+                  traceContext: traceContext.current
+                }, viewerProps));
+              case 'audio':
+                return /*#__PURE__*/React.createElement(AudioViewer, _extends({
+                  showControls: showControls,
+                  onCanPlay: onSuccess,
+                  onError: onLoadFail
+                }, viewerProps));
+              case 'video':
+                return /*#__PURE__*/React.createElement(VideoViewer, _extends({
+                  showControls: showControls,
+                  onCanPlay: onSuccess,
+                  onError: onLoadFail
+                }, viewerProps));
+              case 'doc':
+                return /*#__PURE__*/React.createElement(DocViewer, _extends({
+                  onSuccess: onSuccess,
+                  onError: onLoadFail
+                }, viewerProps));
+              case 'archive':
+                return /*#__PURE__*/React.createElement(ArchiveViewerLoader, _extends({
+                  onSuccess: onSuccess,
+                  onError: onLoadFail
+                }, viewerProps));
+            }
+            return renderError(new MediaViewerError('unsupported'), fileItem);
+          case 'failed-processing':
+            return renderError(new MediaViewerError('itemviewer-file-failed-processing-status'), fileItem);
+          case 'error':
+            return renderError(new MediaViewerError('itemviewer-file-error-status'), fileItem);
+        }
+      }
+    },
+    pending: () => /*#__PURE__*/React.createElement(Spinner, null),
+    failed: error => renderError(error, item.data)
+  });
+};
+const ViewerWithKey = props => {
+  const {
+    identifier
+  } = props;
+  const key = isFileIdentifier(identifier) ? identifier.id : identifier.dataURI;
+  return /*#__PURE__*/React.createElement(ItemViewerV2Base, _extends({}, props, {
+    key: key
+  }));
+};
+export const ItemViewerV2 = withAnalyticsEvents()(ViewerWithKey);

package/dist/es2019/v2/list-v2.js

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { hideControlsClassName } from '@atlaskit/media-ui';
+import { ItemViewerV2 } from './item-viewer-v2';
+import { HeaderWrapper, ListWrapper } from '../styleWrappers';
+import { Navigation } from '../navigation';
+import HeaderV2 from './header-v2';
+export const ListV2 = ({
+  defaultSelectedItem,
+  onClose,
+  showControls,
+  extensions,
+  onSidebarButtonClick,
+  contextId,
+  featureFlags,
+  isSidebarVisible,
+  onNavigationChange,
+  items
+}) => {
+  const [selectedItem, setSelectedItem] = useState(defaultSelectedItem);
+  const [previewCount, setPreviewCount] = useState(0);
+  const [isArchiveSideBarVisible, setIsArchiveSideBarVisible] = useState(false);
+  return /*#__PURE__*/React.createElement(ListWrapper, null, /*#__PURE__*/React.createElement(HeaderWrapper, {
+    className: hideControlsClassName,
+    isArchiveSideBarVisible: isArchiveSideBarVisible
+  }, /*#__PURE__*/React.createElement(HeaderV2, {
+    identifier: selectedItem,
+    onClose: onClose,
+    extensions: extensions,
+    onSidebarButtonClick: onSidebarButtonClick,
+    isSidebarVisible: isSidebarVisible,
+    isArchiveSideBarVisible: isArchiveSideBarVisible,
+    featureFlags: featureFlags,
+    onSetArchiveSideBarVisible: setIsArchiveSideBarVisible
+  })), /*#__PURE__*/React.createElement(ItemViewerV2, {
+    identifier: selectedItem,
+    showControls: showControls,
+    onClose: onClose,
+    previewCount: previewCount,
+    contextId: contextId,
+    featureFlags: featureFlags
+  }), /*#__PURE__*/React.createElement(Navigation, {
+    items: items,
+    selectedItem: selectedItem,
+    onChange: selectedItem => {
+      onNavigationChange === null || onNavigationChange === void 0 ? void 0 : onNavigationChange(selectedItem);
+      showControls === null || showControls === void 0 ? void 0 : showControls();
+      setSelectedItem(selectedItem);
+      setPreviewCount(previewCount + 1);
+    },
+    isArchiveSideBarVisible: isArchiveSideBarVisible
+  }));
+};