@atlaskit/media-viewer 52.8.4 → 52.9.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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
+
+- Updated dependencies
+
 ## 52.8.4
 
 ### 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/NativeMediaPreview.tsx

@@ -22,7 +22,7 @@ export const NativeMediaPreview = ({
 	identifier,
 	mediaClient,
 	onClick,
-}: NativeMediaViewerProps) => {
+}: NativeMediaViewerProps): React.JSX.Element => {
 	const [url, setUrl] = useState('dataURI' in identifier ? identifier.dataURI : '');
 	const [isPreviewUnavailable, setIsPreviewUnavailable] = useState(false);
 

package/example-helpers/centeredForm.tsx

@@ -8,7 +8,7 @@ const centeredFormStyles = xcss({
 	margin: 'auto',
 });
 
-export const CenteredForm = ({ children }: { children: ReactNode }) => (
+export const CenteredForm = ({ children }: { children: ReactNode }): React.JSX.Element => (
 	<Stack alignInline="center" alignBlock="center" grow="fill" xcss={centeredFormStyles}>
 		<Box>{children}</Box>
 	</Stack>

package/example-helpers/index.ts

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

package/example-helpers/styles.ts

@@ -1,27 +1,27 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
+import { css, type SerializedStyles } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const containerStyles = css({
+export const containerStyles: SerializedStyles = css({
 	display: 'flex',
 	flexDirection: 'row',
 	flexWrap: 'wrap',
 });
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const groupStyles = css({
+export const groupStyles: SerializedStyles = css({
 	width: '250px',
 	padding: token('space.250', '20px'),
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const buttonListStyles = css({
+export const buttonListStyles: SerializedStyles = css({
 	paddingLeft: 0,
 	listStyle: 'none',
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const mVSidebarStyles = css({
+export const mVSidebarStyles: SerializedStyles = css({
 	height: 'calc(100vh - 64px)',
 	padding: token('space.400', '32px'),
 	overflow: 'auto',
@@ -38,7 +38,7 @@ export const mVSidebarStyles = css({
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const mVSidebarHeaderStyles = css({
+export const mVSidebarHeaderStyles: SerializedStyles = css({
 	display: 'flex',
 	width: '100%',
 	justifyContent: 'space-between',

package/example-helpers/svg/delayApiResponses.ts

@@ -6,7 +6,7 @@ type Endpoints = Partial<Record<keyof MediaApi, number>>;
 export const delayApiResponses = (
 	mediaApi: MediaApi,
 	{ getImage, getItems, getFileBinary }: Endpoints,
-) => {
+): void => {
 	const baseGetImage = mediaApi.getImage;
 	mediaApi.getImage = async (...params) => {
 		await sleep(getImage);

package/example-helpers/svg/toggle.tsx

@@ -32,7 +32,7 @@ export const ToggleBox = ({
 	label: string;
 	centered?: boolean;
 	onChange: (val: boolean) => void;
-}) => {
+}): React.JSX.Element => {
 	const [id] = useState(makeid());
 
 	return (

package/example-helpers/svg/uploader.ts

@@ -4,12 +4,19 @@ 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) => {
+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>();
 	const [status, setStatus] = useState<string>('');
 
-	const uploadFn = async (event: SyntheticEvent<HTMLInputElement>) => {
+	const uploadFn = async (event: SyntheticEvent<HTMLInputElement>): Promise<void> => {
 		if (!event.currentTarget.files || !event.currentTarget.files.length) {
 			return;
 		}

package/example-helpers/svg/useSelectOptions.ts

@@ -1,7 +1,21 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, type Dispatch, type SetStateAction } from 'react';
 import { type FileIdentifier } from '@atlaskit/media-client';
 
-export const useSelectOptions = (identifiers: FileIdentifier[], fileKeys: string[]) => {
+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] }),
 		[identifiers, fileKeys],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "52.8.4",
+	"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/"
@@ -54,7 +54,7 @@
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^22.0.0",
 		"@atlaskit/tokens": "^11.1.0",
-		"@atlaskit/tooltip": "^20.14.0",
+		"@atlaskit/tooltip": "^21.0.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/language": "6.10.8",