@zextras/carbonio-ui-preview 0.1.1 → 0.1.4

package/lib-esm/preview/PreviewManager.js

@@ -0,0 +1,75 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useCallback, createContext, useReducer } from 'react';
+import { PreviewWrapper } from './PreviewWrapper';
+var PreviewsManagerContext = createContext({
+    createPreview: function () { return undefined; }
+});
+var PreviewManager = function (_a) {
+    var children = _a.children;
+    var _b = useReducer(function (state, action) {
+        switch (action.type) {
+            case 'set': {
+                return __spreadArray(__spreadArray([], state, true), [action.value], false);
+            }
+            case 'empty': {
+                return [];
+            }
+            default: {
+                return state;
+            }
+        }
+    }, []), previews = _b[0], dispatchPreviews = _b[1];
+    var createPreview = useCallback(function (_a) {
+        var onClose = _a.onClose, props = __rest(_a, ["onClose"]);
+        var closePreview = function (ev) {
+            if (onClose)
+                onClose(ev);
+            dispatchPreviews({ type: 'empty' });
+        };
+        var preview = React.createElement(PreviewWrapper, __assign({ key: props.src }, props, { show: true, onClose: closePreview }));
+        dispatchPreviews({
+            type: 'set',
+            value: preview
+        });
+    }, [dispatchPreviews]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(PreviewsManagerContext.Provider, { value: { createPreview: createPreview } }, children),
+        previews));
+};
+export { PreviewsManagerContext, PreviewManager };
+//# sourceMappingURL=PreviewManager.js.map

package/lib-esm/preview/PreviewManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewManager.js","sourceRoot":"","sources":["../../src/preview/PreviewManager.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAItE,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAC;AAUvE,IAAM,sBAAsB,GAAG,aAAa,CAEzC;IACF,aAAa,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;CAC9B,CAAC,CAAC;AAEH,IAAM,cAAc,GAAa,UAAC,EAAY;QAAV,QAAQ,cAAA;IACrC,IAAA,KAA+B,UAAU,CAC9C,UACC,KAAgC,EAChC,MAAsE;QAEtE,QAAQ,MAAM,CAAC,IAAI,EAAE;YACpB,KAAK,KAAK,CAAC,CAAC;gBACX,uCAAW,KAAK,UAAE,MAAM,CAAC,KAAK,UAAE;aAChC;YACD,KAAK,OAAO,CAAC,CAAC;gBACb,OAAO,EAAE,CAAC;aACV;YACD,OAAO,CAAC,CAAC;gBACR,OAAO,KAAK,CAAC;aACb;SACD;IACF,CAAC,EACD,EAAE,CACF,EAlBM,QAAQ,QAAA,EAAE,gBAAgB,QAkBhC,CAAC;IAEF,IAAM,aAAa,GAAG,WAAW,CAChC,UAAC,EAAqB;QAAnB,IAAA,OAAO,aAAA,EAAK,KAAK,cAAnB,WAAqB,CAAF;QACnB,IAAM,YAAY,GAAmC,UAAC,EAAE;YACvD,IAAI,OAAO;gBAAE,OAAO,CAAC,EAAE,CAAC,CAAC;YACzB,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;QACrC,CAAC,CAAC;QAEF,IAAM,OAAO,GAAG,oBAAC,cAAc,aAAC,GAAG,EAAE,KAAK,CAAC,GAAG,IAAM,KAAK,IAAE,IAAI,QAAC,OAAO,EAAE,YAAY,IAAI,CAAC;QAE1F,gBAAgB,CAAC;YAChB,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,OAAO;SACd,CAAC,CAAC;IACJ,CAAC,EACD,CAAC,gBAAgB,CAAC,CAClB,CAAC;IAEF,OAAO,CACN;QACC,oBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,aAAa,eAAA,EAAE,IACvD,QAAQ,CACwB;QACjC,QAAQ,CACP,CACH,CAAC;AACH,CAAC,CAAC;AAEF,OAAO,EAAE,sBAAsB,EAAE,cAAc,EAAE,CAAC"}

package/lib-esm/preview/PreviewWrapper.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ImagePreviewProps } from './ImagePreview';
+import { PdfPreviewProps } from './PdfPreview';
+declare type PreviewsProps = ImagePreviewProps | PdfPreviewProps;
+declare type PreviewWrapperProps = PreviewsProps & {
+    previewType: 'pdf' | 'image';
+};
+declare const PreviewWrapper: React.VFC<PreviewWrapperProps>;
+export { PreviewWrapper, PreviewWrapperProps };

package/lib-esm/preview/PreviewWrapper.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React from 'react';
+import { ImagePreview } from './ImagePreview';
+import { PdfPreview } from './PdfPreview';
+var PreviewWrapper = function (_a) {
+    var previewType = _a.previewType, props = __rest(_a, ["previewType"]);
+    return previewType === 'pdf' ? React.createElement(PdfPreview, __assign({}, props)) : React.createElement(ImagePreview, __assign({}, props));
+};
+export { PreviewWrapper };
+//# sourceMappingURL=PreviewWrapper.js.map

package/lib-esm/preview/PreviewWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewWrapper.js","sourceRoot":"","sources":["../../src/preview/PreviewWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAQ3D,IAAM,cAAc,GAAmC,UAAC,EAAyB;IAAvB,IAAA,WAAW,iBAAA,EAAK,KAAK,cAAvB,eAAyB,CAAF;IAC9E,OAAA,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,oBAAC,UAAU,eAAK,KAAK,EAAI,CAAC,CAAC,CAAC,oBAAC,YAAY,eAAK,KAAK,EAAI,CAAA;CAAA,CAAC;AAEjF,OAAO,EAAE,cAAc,EAAuB,CAAA"}

package/lib-esm/utils.d.ts

@@ -0,0 +1,3 @@
+export declare type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]?: T[SubKey];
+};

package/{src/types/carbonio-design-system.d.ts → lib-esm/utils.js}

@@ -3,5 +3,5 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-declare module '@zextras/carbonio-design-system';
+export {};
+//# sourceMappingURL=utils.js.map

package/lib-esm/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG"}

package/package.json

@@ -1,14 +1,21 @@
 {
 	"name": "@zextras/carbonio-ui-preview",
-	"version": "0.1.1",
-	"description": "Preview utility for Zextras Carbonio",
-	"main": "src/index.ts",
+	"version": "0.1.4",
+	"description": "Preview ui utility for Zextras Carbonio",
+	"main": "lib/index.js",
+	"module": "lib-esm/index.js",
+	"types": "lib/index.d.ts",
 	"files": [
-		"src/*"
+		"/lib",
+		"/lib-esm"
 	],
 	"scripts": {
+		"build": "tsc",
+		"build-esm": "tsc -m es6 --outDir lib-esm",
+		"clean": "rm -rf lib",
+		"build-all": "npm run clean && npm run build && npm run build-esm",
 		"_postinstall": "is-ci || husky install",
-		"prepublishOnly": "pinst --disable",
+		"prepublishOnly": "pinst --disable && npm run build-all",
 		"postpublish": "pinst --enable",
 		"type-check": "tsc --noEmit",
 		"type-check:watch": "npm run type-check -- --watch",
@@ -19,6 +26,12 @@
 	"author": "Zextras SF Team <https://www.zextras.com/carbonio/>",
 	"license": "AGPL-3.0-only",
 	"devDependencies": {
+		"@babel/core": "7.16.0",
+		"@babel/plugin-proposal-class-properties": "7.16.0",
+		"@babel/plugin-transform-runtime": "7.16.4",
+		"@babel/preset-env": "7.16.4",
+		"@babel/preset-react": "7.16.0",
+		"@babel/preset-typescript": "7.16.0",
 		"@commitlint/cli": "14.1.0",
 		"@commitlint/config-conventional": "14.1.0",
 		"@types/lodash": "^4.14.181",
@@ -27,6 +40,9 @@
 		"@types/react-pdf": "^5.0.9",
 		"@types/styled-components": "^5.1.15",
 		"@zextras/carbonio-ui-configs": "^0.1.11",
+		"babel-jest": "27.3.1",
+		"babel-plugin-i18next-extract": "0.8.3",
+		"babel-plugin-styled-components": "2.0.1",
 		"eslint-plugin-notice": "^0.9.10",
 		"husky": "^5.2.0",
 		"is-ci": "3.0.1",
@@ -37,7 +53,7 @@
 		"react-pdf": "^5.7.1"
 	},
 	"peerDependencies": {
-		"@zextras/carbonio-design-system": "^0.2.0",
+		"@zextras/carbonio-design-system": "^0.3.0",
 		"lodash": "^4.17.21",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",

package/src/preview/ContainerWithGap.tsx

@@ -1,11 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import { Container } from '@zextras/carbonio-design-system';
-import styled from 'styled-components';
-
-export const ContainerWithGap = styled(Container)`
-	gap: ${({ gap }): string => gap};
-`;

package/src/preview/FocusWithin.tsx

@@ -1,76 +0,0 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-/*
- * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import React, { useCallback, useEffect, useRef } from 'react';
-
-import last from 'lodash/last';
-import styled from 'styled-components';
-
-const FocusContainer = styled.span`
-	outline: none;
-	& > * {
-		outline: none;
-	}
-`;
-
-interface FocusContainerProps {
-	returnFocus?: boolean;
-	children: React.ReactChild | React.ReactChildren;
-}
-
-const FocusWithin = ({ children, returnFocus = true }: FocusContainerProps): JSX.Element => {
-	const contentRef = useRef<HTMLDivElement | null>(null);
-	const startSentinelRef = useRef<HTMLDivElement | null>(null);
-	const endSentinelRef = useRef<HTMLDivElement | null>(null);
-
-	const onStartSentinelFocus = useCallback(() => {
-		if (contentRef.current) {
-			const node = last(contentRef.current.querySelectorAll<HTMLElement>('[tabindex]'));
-			node && node.focus();
-		}
-	}, []);
-
-	const onEndSentinelFocus = useCallback(() => {
-		if (contentRef.current) {
-			const node = contentRef.current.querySelector<HTMLElement>('[tabindex]');
-			node && node.focus();
-		}
-	}, []);
-
-	useEffect(() => {
-		const documentElement = window.top?.document || document;
-		const focusedElement = documentElement.activeElement as HTMLElement;
-
-		contentRef.current && contentRef.current.focus();
-		startSentinelRef.current &&
-			startSentinelRef.current.addEventListener('focus', onStartSentinelFocus);
-		endSentinelRef.current && endSentinelRef.current.addEventListener('focus', onEndSentinelFocus);
-		const startSentinelRefSave = startSentinelRef.current;
-		const endSentinelRefSave = endSentinelRef.current;
-
-		return (): void => {
-			startSentinelRefSave &&
-				startSentinelRefSave.removeEventListener('focus', onStartSentinelFocus);
-			endSentinelRefSave && endSentinelRefSave.removeEventListener('focus', onEndSentinelFocus);
-			// return focus to previous initial element
-			if (focusedElement && returnFocus) {
-				focusedElement.focus();
-			}
-		};
-	}, [onStartSentinelFocus, onEndSentinelFocus, returnFocus]);
-
-	return (
-		<FocusContainer>
-			<span tabIndex={0} ref={startSentinelRef} />
-			<div tabIndex={-1} ref={contentRef}>
-				{children}
-			</div>
-			<span tabIndex={0} ref={endSentinelRef} />
-		</FocusContainer>
-	);
-};
-
-export default FocusWithin;

package/src/preview/Header.tsx

@@ -1,122 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import React from 'react';
-
-import { IconButton, Text, Tooltip } from '@zextras/carbonio-design-system';
-import map from 'lodash/map';
-import styled from 'styled-components';
-
-const HeaderContainer = styled.div`
-	display: flex;
-	justify-content: space-between;
-	padding: 16px;
-`;
-
-const LeftContainer = styled.div`
-	display: flex;
-	justify-content: flex-start;
-	align-items: center;
-	gap: 8px;
-`;
-
-const RightContainer = styled.div`
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	gap: 8px;
-`;
-
-const InfoContainer = styled.div`
-	width: fit-content;
-	& div {
-		line-height: 1.5;
-	}
-`;
-
-const UpperCaseText = styled(Text)`
-	text-transform: uppercase;
-`;
-
-interface HeaderAction {
-	/** id used as key */
-	id: string;
-	/** Action called on click */
-	onClick?: React.ReactEventHandler;
-	/** Icon from the theme */
-	icon: string;
-	/** Label to show as tooltip for the action */
-	tooltipLabel?: string;
-	tooltipPlacement?: React.ComponentPropsWithRef<typeof Tooltip>['placement'];
-	/** Disabled status for the action */
-	disabled?: boolean;
-}
-
-export interface HeaderProps {
-	/** Left Action for the preview */
-	closeAction?: HeaderAction;
-	/** Actions for the preview */
-	actions: HeaderAction[];
-	/** Extension of the file, shown as info */
-	extension: string;
-	/** Name of the file, shown as info */
-	filename: string;
-	/** Size of the file, shown as info */
-	size: string;
-}
-
-const Header: React.VFC<HeaderProps> = ({ closeAction, actions, filename, extension, size }) => (
-	<HeaderContainer>
-		<LeftContainer>
-			{closeAction && (
-				<Tooltip
-					label={closeAction.tooltipLabel}
-					disabled={!closeAction.tooltipLabel}
-					key={closeAction.id}
-					placement={closeAction.tooltipPlacement}
-				>
-					<IconButton
-						onClick={closeAction.onClick}
-						icon={closeAction.icon}
-						size="medium"
-						backgroundColor="transparent"
-						iconColor="gray6"
-					/>
-				</Tooltip>
-			)}
-			<InfoContainer>
-				<Text size="small" color="gray6">
-					{filename}
-				</Text>
-				<UpperCaseText size="small" color="gray6">
-					{extension}
-					{extension && size && <> &middot; </>}
-					{size}
-				</UpperCaseText>
-			</InfoContainer>
-		</LeftContainer>
-		<RightContainer>
-			{map(actions, ({ id, onClick, disabled, icon, tooltipLabel, tooltipPlacement }) => (
-				<Tooltip
-					label={tooltipLabel}
-					disabled={!tooltipLabel}
-					key={id}
-					placement={tooltipPlacement}
-				>
-					<IconButton
-						onClick={onClick}
-						disabled={disabled}
-						icon={icon}
-						size="medium"
-						backgroundColor="transparent"
-						iconColor="gray6"
-					/>
-				</Tooltip>
-			))}
-		</RightContainer>
-	</HeaderContainer>
-);
-
-export default Header;

package/src/preview/ImagePreview.tsx

@@ -1,194 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import React, { useCallback, useEffect, useRef } from 'react';
-
-import { Container, Portal, useCombinedRefs } from '@zextras/carbonio-design-system';
-import styled from 'styled-components';
-
-import FocusWithin from './FocusWithin';
-import Header, { HeaderProps } from './Header';
-
-const Overlay = styled.div`
-	height: 100vh;
-	max-height: 100vh;
-	width: 100%;
-	max-width: 100%;
-	position: fixed;
-	top: 0;
-	left: 0;
-	background-color: rgba(0, 0, 0, 0.8);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	z-index: 1003;
-`;
-
-const ExternalContainer = styled.div`
-	height: 100vh;
-	max-height: 100vh;
-	width: 100vw;
-	max-width: 100vw;
-	display: flex;
-	flex-direction: column;
-	position: relative;
-`;
-
-const MiddleContainer = styled(Container)`
-	flex-grow: 1;
-`;
-
-const Image = styled.img`
-	max-height: 100%;
-	max-width: 100%;
-	min-height: 0;
-	min-width: 0;
-	align-self: center;
-	filter: drop-shadow(0px 5px 14px rgba(0, 0, 0, 0.35));
-	border-radius: 4px;
-`;
-
-const PreviewContainer = styled.div.attrs({
-	$paddingVertical: '32px',
-	$paddingHorizontal: '16px',
-	$gap: '8px'
-})`
-	display: flex;
-	max-width: 100%;
-	max-height: calc(100vh - ${({ $paddingVertical }): string => $paddingVertical} * 2);
-	flex-direction: column;
-	gap: ${({ $gap }): string => $gap};
-	justify-content: center;
-	align-items: center;
-	overflow: hidden;
-	padding: ${({ $paddingVertical, $paddingHorizontal }): string =>
-		`${$paddingVertical} ${$paddingHorizontal}`};
-	outline: none;
-	flex-grow: 1;
-`;
-
-type ImagePreviewProps = Partial<HeaderProps> & {
-	/**
-	 * HTML node where to insert the Portal's children.
-	 * The default value is 'window.top.document'.
-	 * */
-	container?: React.RefObject<HTMLElement>;
-	/** Flag to disable the Portal implementation */
-	disablePortal?: boolean;
-	/** Flag to show or hide Portal's content */
-	show: boolean;
-	/** preview img source */
-	src: string;
-	/** Callback to hide the preview */
-	onClose: (e: React.SyntheticEvent | KeyboardEvent) => void;
-	/** Alternative text for image */
-	alt?: string;
-};
-
-const ImagePreview = React.forwardRef<HTMLDivElement, ImagePreviewProps>(function PreviewFn(
-	{
-		src,
-		show,
-		container,
-		disablePortal,
-		extension = '',
-		filename = '',
-		size = '',
-		actions = [],
-		closeAction,
-		onClose,
-		alt
-	},
-	ref
-) {
-	const previewRef: React.MutableRefObject<HTMLDivElement | null> = useCombinedRefs(ref);
-	const imageRef = useRef<HTMLImageElement | null>(null);
-
-	const escapeEvent = useCallback<(e: KeyboardEvent) => void>(
-		(event) => {
-			if (event.key === 'Escape') {
-				onClose(event);
-			}
-		},
-		[onClose]
-	);
-
-	useEffect(() => {
-		if (show) {
-			document.addEventListener('keyup', escapeEvent);
-		}
-
-		return (): void => {
-			document.removeEventListener('keyup', escapeEvent);
-		};
-	}, [escapeEvent, show]);
-
-	const onOverlayClick = useCallback<React.ReactEventHandler>(
-		(event) => {
-			// TODO: stop propagation or not?
-			event.stopPropagation();
-			previewRef.current &&
-				!event.isDefaultPrevented() &&
-				(previewRef.current === event.target ||
-					!previewRef.current.contains(event.target as Node)) &&
-				onClose(event);
-		},
-		[onClose, previewRef]
-	);
-
-	return (
-		<Portal show={show} disablePortal={disablePortal} container={container}>
-			<Overlay onClick={onOverlayClick}>
-				<FocusWithin>
-					<ExternalContainer>
-						<Header
-							actions={actions}
-							filename={filename}
-							extension={extension}
-							size={size}
-							closeAction={closeAction}
-						/>
-						<MiddleContainer orientation="horizontal" crossAlignment="unset" minHeight={0}>
-							{/* TODO: uncomment when navigation between items will be implemented */}
-							{/* <Container width="fit"> */}
-							{/*	<Padding left="small" right="small"> */}
-							{/*		<IconButton */}
-							{/*			icon="ArrowBackOutline" */}
-							{/*			size="medium" */}
-							{/*			backgroundColor="gray0" */}
-							{/*			iconColor="gray6" */}
-							{/*			borderRadius="round" */}
-							{/*		/> */}
-							{/*	</Padding> */}
-							{/* </Container> */}
-							<PreviewContainer ref={previewRef}>
-								<Image
-									alt={alt ?? filename}
-									src={src}
-									onError={(): void => console.log('TODO handle error')}
-									ref={imageRef}
-								/>
-							</PreviewContainer>
-							{/* TODO: uncomment when navigation between items will be implemented */}
-							{/* <Container width="fit"> */}
-							{/*	<Padding left="small" right="small"> */}
-							{/*		<IconButton */}
-							{/*			icon="ArrowForwardOutline" */}
-							{/*			size="medium" */}
-							{/*			backgroundColor="gray0" */}
-							{/*			iconColor="gray6" */}
-							{/*			borderRadius="round" */}
-							{/*		/> */}
-							{/*	</Padding> */}
-							{/* </Container> */}
-						</MiddleContainer>
-					</ExternalContainer>
-				</FocusWithin>
-			</Overlay>
-		</Portal>
-	);
-});
-
-export { ImagePreview, ImagePreviewProps };