@atlaskit/media-viewer 52.8.5 → 52.9.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/media-viewer
 
+## 52.9.0
+
+### Minor Changes
+
+- [`6e25e8bbb01c3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6e25e8bbb01c3) -
+  [ux] Adds mediaViewerExtensions prop to media-viewer/src/header and threads it through parents.
+  Allows callers to pass in additional buttons to the image / video preview'
+
 ## 52.8.5
 
 ### Patch Changes

package/dist/cjs/header.js

@@ -21,12 +21,14 @@ var _util = require("./viewers/codeViewer/util");
 var _errors = require("./errors");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var Header = exports.Header = function Header(_ref) {
+  var _extensions$headerAct;
   var _ref$isArchiveSideBar = _ref.isArchiveSideBarVisible,
     isArchiveSideBarVisible = _ref$isArchiveSideBar === void 0 ? false : _ref$isArchiveSideBar,
     extensions = _ref.extensions,
     isSidebarVisible = _ref.isSidebarVisible,
     onSidebarButtonClick = _ref.onSidebarButtonClick,
     identifier = _ref.identifier,
+    onClose = _ref.onClose,
     onSetArchiveSideBarVisible = _ref.onSetArchiveSideBarVisible,
     traceContext = _ref.traceContext;
   // States
@@ -136,7 +138,22 @@ var Header = exports.Header = function Header(_ref) {
     failed: function failed() {
       return null;
     }
-  })), /*#__PURE__*/_react.default.createElement(_styleWrappers.RightHeader, null, (extensions === null || extensions === void 0 ? void 0 : extensions.sidebar) && /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, {
+  })), /*#__PURE__*/_react.default.createElement(_styleWrappers.RightHeader, null, extensions === null || extensions === void 0 || (_extensions$headerAct = extensions.headerActions) === null || _extensions$headerAct === void 0 ? void 0 : _extensions$headerAct.map(function (action, index) {
+    if (action.isVisible && !action.isVisible(identifier)) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, {
+      key: index,
+      testId: "media-viewer-header-action-".concat(index),
+      onClick: function onClick() {
+        return action.onClick(identifier, {
+          close: onClose || function () {}
+        });
+      },
+      iconBefore: action.icon,
+      "aria-label": action.label
+    });
+  }), (extensions === null || extensions === void 0 ? void 0 : extensions.sidebar) && /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, {
     isSelected: isSidebarVisible,
     testId: "media-viewer-sidebar-button",
     onClick: onSidebarButtonClick,

package/dist/es2019/header.js

@@ -16,9 +16,11 @@ export const Header = ({
   isSidebarVisible,
   onSidebarButtonClick,
   identifier,
+  onClose,
   onSetArchiveSideBarVisible,
   traceContext
 }) => {
+  var _extensions$headerAct;
   // States
   const [item, setItem] = useState(Outcome.pending());
 
@@ -122,7 +124,20 @@ export const Header = ({
     }, /*#__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, {
+  })), /*#__PURE__*/React.createElement(RightHeader, null, extensions === null || extensions === void 0 ? void 0 : (_extensions$headerAct = extensions.headerActions) === null || _extensions$headerAct === void 0 ? void 0 : _extensions$headerAct.map((action, index) => {
+    if (action.isVisible && !action.isVisible(identifier)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(MediaButton, {
+      key: index,
+      testId: `media-viewer-header-action-${index}`,
+      onClick: () => action.onClick(identifier, {
+        close: onClose || (() => {})
+      }),
+      iconBefore: action.icon,
+      "aria-label": action.label
+    });
+  }), (extensions === null || extensions === void 0 ? void 0 : extensions.sidebar) && /*#__PURE__*/React.createElement(MediaButton, {
     isSelected: isSidebarVisible,
     testId: "media-viewer-sidebar-button",
     onClick: onSidebarButtonClick,

package/dist/esm/header.js

@@ -12,12 +12,14 @@ import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { getFormat } from './viewers/codeViewer/util';
 import { MediaViewerError } from './errors';
 export var Header = function Header(_ref) {
+  var _extensions$headerAct;
   var _ref$isArchiveSideBar = _ref.isArchiveSideBarVisible,
     isArchiveSideBarVisible = _ref$isArchiveSideBar === void 0 ? false : _ref$isArchiveSideBar,
     extensions = _ref.extensions,
     isSidebarVisible = _ref.isSidebarVisible,
     onSidebarButtonClick = _ref.onSidebarButtonClick,
     identifier = _ref.identifier,
+    onClose = _ref.onClose,
     onSetArchiveSideBarVisible = _ref.onSetArchiveSideBarVisible,
     traceContext = _ref.traceContext;
   // States
@@ -127,7 +129,22 @@ export var Header = function Header(_ref) {
     failed: function failed() {
       return null;
     }
-  })), /*#__PURE__*/React.createElement(RightHeader, null, (extensions === null || extensions === void 0 ? void 0 : extensions.sidebar) && /*#__PURE__*/React.createElement(MediaButton, {
+  })), /*#__PURE__*/React.createElement(RightHeader, null, extensions === null || extensions === void 0 || (_extensions$headerAct = extensions.headerActions) === null || _extensions$headerAct === void 0 ? void 0 : _extensions$headerAct.map(function (action, index) {
+    if (action.isVisible && !action.isVisible(identifier)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(MediaButton, {
+      key: index,
+      testId: "media-viewer-header-action-".concat(index),
+      onClick: function onClick() {
+        return action.onClick(identifier, {
+          close: onClose || function () {}
+        });
+      },
+      iconBefore: action.icon,
+      "aria-label": action.label
+    });
+  }), (extensions === null || extensions === void 0 ? void 0 : extensions.sidebar) && /*#__PURE__*/React.createElement(MediaButton, {
     isSelected: isSidebarVisible,
     testId: "media-viewer-sidebar-button",
     onClick: onSidebarButtonClick,

package/dist/types/components/types.d.ts

@@ -15,6 +15,17 @@ export interface MediaViewerExtensions {
         icon: ReactNode;
         renderer: (selectedIdentifier: Identifier, actions: MediaViewerExtensionsActions) => ReactNode;
     };
+    headerActions?: Array<{
+        /** Icon to display in the header button */
+        icon: ReactNode;
+        /** Label for the button (accessibility) */
+        label: string;
+        /** Called when the button is clicked. Receives the currently viewed item's identifier
+         * and actions (including close) to control the viewer. */
+        onClick: (selectedIdentifier: Identifier, actions: MediaViewerExtensionsActions) => void;
+        /** Optional callback to control per-item visibility. When omitted, button always shows. */
+        isVisible?: (selectedIdentifier: Identifier) => boolean;
+    }>;
 }
 export interface MediaViewerProps {
     readonly mediaClient: MediaClient;

package/dist/types/header.d.ts

@@ -14,6 +14,6 @@ export type Props = {
     readonly isArchiveSideBarVisible?: boolean;
     traceContext: MediaTraceContext;
 };
-export declare const Header: ({ isArchiveSideBarVisible, extensions, isSidebarVisible, onSidebarButtonClick, identifier, onSetArchiveSideBarVisible, traceContext, }: Props & WrappedComponentProps) => React.JSX.Element;
+export declare const Header: ({ isArchiveSideBarVisible, extensions, isSidebarVisible, onSidebarButtonClick, identifier, onClose, onSetArchiveSideBarVisible, traceContext, }: Props & WrappedComponentProps) => React.JSX.Element;
 declare const _default: React.FC<Props>;
 export default _default;

package/dist/types-ts4.5/components/types.d.ts

@@ -15,6 +15,17 @@ export interface MediaViewerExtensions {
         icon: ReactNode;
         renderer: (selectedIdentifier: Identifier, actions: MediaViewerExtensionsActions) => ReactNode;
     };
+    headerActions?: Array<{
+        /** Icon to display in the header button */
+        icon: ReactNode;
+        /** Label for the button (accessibility) */
+        label: string;
+        /** Called when the button is clicked. Receives the currently viewed item's identifier
+         * and actions (including close) to control the viewer. */
+        onClick: (selectedIdentifier: Identifier, actions: MediaViewerExtensionsActions) => void;
+        /** Optional callback to control per-item visibility. When omitted, button always shows. */
+        isVisible?: (selectedIdentifier: Identifier) => boolean;
+    }>;
 }
 export interface MediaViewerProps {
     readonly mediaClient: MediaClient;

package/dist/types-ts4.5/header.d.ts

@@ -14,6 +14,6 @@ export type Props = {
     readonly isArchiveSideBarVisible?: boolean;
     traceContext: MediaTraceContext;
 };
-export declare const Header: ({ isArchiveSideBarVisible, extensions, isSidebarVisible, onSidebarButtonClick, identifier, onSetArchiveSideBarVisible, traceContext, }: Props & WrappedComponentProps) => React.JSX.Element;
+export declare const Header: ({ isArchiveSideBarVisible, extensions, isSidebarVisible, onSidebarButtonClick, identifier, onClose, onSetArchiveSideBarVisible, traceContext, }: Props & WrappedComponentProps) => React.JSX.Element;
 declare const _default: React.FC<Props>;
 export default _default;

package/example-helpers/index.ts

@@ -176,50 +176,50 @@ export const zipWithNestedFolderItem: FileIdentifier = {
 };
 
 export const zipItemMultipleFoldersAtRoot: {
-    occurrenceKey: string;
-    mediaItemType: "file";
-    id: string;
-    collectionName?: string;
+	occurrenceKey: string;
+	mediaItemType: 'file';
+	id: string;
+	collectionName?: string;
 } = {
 	...zipItemMultipleFoldersAtRootId,
 	occurrenceKey: 'testOccurenceKey',
 };
 
 export const zipItemLargeInnerFile: {
-    occurrenceKey: string;
-    mediaItemType: "file";
-    id: string;
-    collectionName?: string;
+	occurrenceKey: string;
+	mediaItemType: 'file';
+	id: string;
+	collectionName?: string;
 } = {
 	...zipItemLargeInnerFileId,
 	occurrenceKey: 'testOccurrenceKey',
 };
 
 export const codeItem: {
-    occurrenceKey: string;
-    mediaItemType: "file";
-    id: string;
-    collectionName?: string;
+	occurrenceKey: string;
+	mediaItemType: 'file';
+	id: string;
+	collectionName?: string;
 } = {
 	...codeFileId,
 	occurrenceKey: 'testOccurrenceKey',
 };
 
 export const emailItem: {
-    occurrenceKey: string;
-    mediaItemType: "file";
-    id: string;
-    collectionName?: string;
+	occurrenceKey: string;
+	mediaItemType: 'file';
+	id: string;
+	collectionName?: string;
 } = {
 	...emailFileId,
 	occurrenceKey: 'testOccurrenceKey',
 };
 
 export const emailFailedItem: {
-    occurrenceKey: string;
-    mediaItemType: "file";
-    id: string;
-    collectionName?: string;
+	occurrenceKey: string;
+	mediaItemType: 'file';
+	id: string;
+	collectionName?: string;
 } = {
 	...emailUnsupportedFileId,
 	occurrenceKey: 'testOccurrenceKey',

package/example-helpers/svg/uploader.ts

@@ -4,10 +4,13 @@ import { type FileIdentifier } from '@atlaskit/media-client';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { type MediaClientConfig } from '@atlaskit/media-client';
 
-export const useSvgUploader = (config: MediaClientConfig, collectionName?: string): {
-    status: string;
-    identifier: FileIdentifier | undefined;
-    uploadFn: (event: SyntheticEvent<HTMLInputElement>) => Promise<void>;
+export const useSvgUploader = (
+	config: MediaClientConfig,
+	collectionName?: string,
+): {
+	status: string;
+	identifier: FileIdentifier | undefined;
+	uploadFn: (event: SyntheticEvent<HTMLInputElement>) => Promise<void>;
 } => {
 	const mediaClient = getMediaClient(config);
 	const [identifier, setIdentifier] = useState<FileIdentifier>();

package/example-helpers/svg/useSelectOptions.ts

@@ -1,14 +1,20 @@
 import { useState, useMemo, type Dispatch, type SetStateAction } from 'react';
 import { type FileIdentifier } from '@atlaskit/media-client';
 
-export const useSelectOptions = (identifiers: FileIdentifier[], fileKeys: string[]): {
-    options: {
-        label: string;
-        value: FileIdentifier;
-    }[]; defaultOption: {
-        label: string;
-        value: FileIdentifier;
-    }; identifier: FileIdentifier; setIdentifier: Dispatch<SetStateAction<FileIdentifier>>;
+export const useSelectOptions = (
+	identifiers: FileIdentifier[],
+	fileKeys: string[],
+): {
+	options: {
+		label: string;
+		value: FileIdentifier;
+	}[];
+	defaultOption: {
+		label: string;
+		value: FileIdentifier;
+	};
+	identifier: FileIdentifier;
+	setIdentifier: Dispatch<SetStateAction<FileIdentifier>>;
 } => {
 	const defaultOption = useMemo(
 		() => ({ label: fileKeys[0], value: identifiers[0] }),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "52.8.5",
+	"version": "52.9.0",
 	"description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"