@zextras/carbonio-ui-preview 1.2.2 → 1.2.4

package/lib/preview/FocusWithin.js

@@ -1,72 +1,42 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 /*
  * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-var react_1 = __importStar(require("react"));
-var last_1 = __importDefault(require("lodash/last"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var FocusContainer = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\toutline: none;\n\t& > * {\n\t\toutline: none;\n\t}\n"], ["\n\toutline: none;\n\t& > * {\n\t\toutline: none;\n\t}\n"])));
-var FocusWithin = function (_a) {
-    var children = _a.children, _b = _a.returnFocus, returnFocus = _b === void 0 ? true : _b;
-    var contentRef = (0, react_1.useRef)(null);
-    var startSentinelRef = (0, react_1.useRef)(null);
-    var endSentinelRef = (0, react_1.useRef)(null);
-    var onStartSentinelFocus = (0, react_1.useCallback)(function () {
+import React, { useCallback, useEffect, useRef } from 'react';
+import { last } from 'lodash';
+import styles from './FocusWithin.module.css';
+/**
+ * Utility component which keeps the focus within its content, allowing the user to use the keyboard to
+ * move across interactive elements, without exiting from the content area
+ */
+const FocusWithin = ({ children, returnFocus = true }) => {
+    const contentRef = useRef(null);
+    const startSentinelRef = useRef(null);
+    const endSentinelRef = useRef(null);
+    const onStartSentinelFocus = useCallback(() => {
         if (contentRef.current) {
-            var node = (0, last_1.default)(contentRef.current.querySelectorAll('[tabindex]'));
+            const node = last(contentRef.current.querySelectorAll('[tabindex]'));
             node === null || node === void 0 ? void 0 : node.focus();
         }
     }, []);
-    var onEndSentinelFocus = (0, react_1.useCallback)(function () {
+    const onEndSentinelFocus = useCallback(() => {
         if (contentRef.current) {
-            var node = contentRef.current.querySelector('[tabindex]');
+            const node = contentRef.current.querySelector('[tabindex]');
             node === null || node === void 0 ? void 0 : node.focus();
         }
     }, []);
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         var _a, _b, _c, _d, _e;
-        var documentElement = (_b = (_a = window.top) === null || _a === void 0 ? void 0 : _a.document) !== null && _b !== void 0 ? _b : document;
-        var focusedElement = documentElement.activeElement;
+        const documentElement = (_b = (_a = window.top) === null || _a === void 0 ? void 0 : _a.document) !== null && _b !== void 0 ? _b : document;
+        const focusedElement = documentElement.activeElement;
         (_c = contentRef.current) === null || _c === void 0 ? void 0 : _c.focus();
         (_d = startSentinelRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('focus', onStartSentinelFocus);
         (_e = endSentinelRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('focus', onEndSentinelFocus);
-        var startSentinelRefSave = startSentinelRef.current;
-        var endSentinelRefSave = endSentinelRef.current;
-        return function () {
+        const startSentinelRefSave = startSentinelRef.current;
+        const endSentinelRefSave = endSentinelRef.current;
+        return () => {
             startSentinelRefSave === null || startSentinelRefSave === void 0 ? void 0 : startSentinelRefSave.removeEventListener('focus', onStartSentinelFocus);
             endSentinelRefSave === null || endSentinelRefSave === void 0 ? void 0 : endSentinelRefSave.removeEventListener('focus', onEndSentinelFocus);
             // return focus to previous initial element
@@ -75,11 +45,10 @@ var FocusWithin = function (_a) {
             }
         };
     }, [onStartSentinelFocus, onEndSentinelFocus, returnFocus]);
-    return (react_1.default.createElement(FocusContainer, null,
-        react_1.default.createElement("span", { tabIndex: 0, ref: startSentinelRef }),
-        react_1.default.createElement("div", { tabIndex: -1, ref: contentRef }, children),
-        react_1.default.createElement("span", { tabIndex: 0, ref: endSentinelRef })));
+    return (React.createElement("span", { className: styles.focusContainer },
+        React.createElement("span", { tabIndex: 0, ref: startSentinelRef }),
+        React.createElement("div", { tabIndex: -1, ref: contentRef }, children),
+        React.createElement("span", { tabIndex: 0, ref: endSentinelRef })));
 };
-exports.default = FocusWithin;
-var templateObject_1;
+export default FocusWithin;
 //# sourceMappingURL=FocusWithin.js.map

package/lib/preview/FocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"file":"FocusWithin.js","sourceRoot":"","sources":["../../src/preview/FocusWithin.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wDAAwD;AACxD;;;;GAIG;AACH,6CAA8D;AAE9D,qDAA+B;AAC/B,wEAAuC;AAEvC,IAAM,cAAc,GAAG,2BAAM,CAAC,IAAI,6HAAA,0DAKjC,IAAA,CAAC;AAOF,IAAM,WAAW,GAAG,UAAC,EAAqD;QAAnD,QAAQ,cAAA,EAAE,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA;IAClD,IAAM,UAAU,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACvD,IAAM,gBAAgB,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAC7D,IAAM,cAAc,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAE3D,IAAM,oBAAoB,GAAG,IAAA,mBAAW,EAAC;QACxC,IAAI,UAAU,CAAC,OAAO,EAAE;YACvB,IAAM,IAAI,GAAG,IAAA,cAAI,EAAC,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAc,YAAY,CAAC,CAAC,CAAC;YAClF,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,CAAC;SACd;IACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,kBAAkB,GAAG,IAAA,mBAAW,EAAC;QACtC,IAAI,UAAU,CAAC,OAAO,EAAE;YACvB,IAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC,aAAa,CAAc,YAAY,CAAC,CAAC;YACzE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,CAAC;SACd;IACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC;;QACT,IAAM,eAAe,GAAG,MAAA,MAAA,MAAM,CAAC,GAAG,0CAAE,QAAQ,mCAAI,QAAQ,CAAC;QACzD,IAAM,cAAc,GAAG,eAAe,CAAC,aAA4B,CAAC;QAEpE,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC5B,MAAA,gBAAgB,CAAC,OAAO,0CAAE,gBAAgB,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAC;QAC1E,MAAA,cAAc,CAAC,OAAO,0CAAE,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QACtE,IAAM,oBAAoB,GAAG,gBAAgB,CAAC,OAAO,CAAC;QACtD,IAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,CAAC;QAElD,OAAO;YACN,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,mBAAmB,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAC;YACzE,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;YACrE,2CAA2C;YAC3C,IAAI,cAAc,IAAI,WAAW,EAAE;gBAClC,cAAc,CAAC,KAAK,EAAE,CAAC;aACvB;QACF,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,kBAAkB,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5D,OAAO,CACN,8BAAC,cAAc;QACd,wCAAM,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,gBAAgB,GAAI;QAC5C,uCAAK,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,IAChC,QAAQ,CACJ;QACN,wCAAM,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,cAAc,GAAI,CAC1B,CACjB,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC"}
+{"version":3,"file":"FocusWithin.js","sourceRoot":"","sources":["../../src/preview/FocusWithin.tsx"],"names":[],"mappings":"AAAA,wDAAwD;AACxD;;;;GAIG;AACH,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAQ9C;;;GAGG;AACH,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,GAAG,IAAI,EAAuB,EAAqB,EAAE;IAChG,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,gBAAgB,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC7D,MAAM,cAAc,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAE3D,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACxB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAc,YAAY,CAAC,CAAC,CAAC;YAClF,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,CAAC;QACf,CAAC;IACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3C,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACxB,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC,aAAa,CAAc,YAAY,CAAC,CAAC;YACzE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,CAAC;QACf,CAAC;IACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;;QACd,MAAM,eAAe,GAAG,MAAA,MAAA,MAAM,CAAC,GAAG,0CAAE,QAAQ,mCAAI,QAAQ,CAAC;QACzD,MAAM,cAAc,GAAG,eAAe,CAAC,aAA4B,CAAC;QAEpE,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC5B,MAAA,gBAAgB,CAAC,OAAO,0CAAE,gBAAgB,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAC;QAC1E,MAAA,cAAc,CAAC,OAAO,0CAAE,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QACtE,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,OAAO,CAAC;QACtD,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,CAAC;QAElD,OAAO,GAAS,EAAE;YACjB,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,mBAAmB,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAC;YACzE,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;YACrE,2CAA2C;YAC3C,IAAI,cAAc,IAAI,WAAW,EAAE,CAAC;gBACnC,cAAc,CAAC,KAAK,EAAE,CAAC;YACxB,CAAC;QACF,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,kBAAkB,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5D,OAAO,CACN,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc;QACrC,8BAAM,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,gBAAgB,GAAI;QAC5C,6BAAK,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,IAChC,QAAQ,CACJ;QACN,8BAAM,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,cAAc,GAAI,CACpC,CACP,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/preview/FocusWithin.module.css

@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.focusContainer {
+    outline: none;
+}
+
+.focusContainer > * {
+    outline: none;
+}

package/lib/preview/Header.d.ts

@@ -1,22 +1,54 @@
 import React from 'react';
-import { Tooltip } from '@zextras/carbonio-design-system';
+import { Theme, TooltipProps } from '@zextras/carbonio-design-system';
 export interface HeaderAction {
     /** id used as key */
     id: string;
     /** Action called on click */
     onClick: (ev: React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
     /** Icon from the theme */
-    icon: string;
+    icon: keyof Theme['icons'];
     /** Label to show as tooltip for the action */
     tooltipLabel?: string;
-    tooltipPlacement?: React.ComponentPropsWithRef<typeof Tooltip>['placement'];
+    /** Define the placement of the tooltip for the action */
+    tooltipPlacement?: TooltipProps['placement'];
     /** Disabled status for the action */
     disabled?: boolean;
 }
 export interface HeaderProps {
     /** Left Action for the preview */
     closeAction?: HeaderAction;
-    /** Actions for the preview */
+    /**
+     * Actions for the preview.
+     *
+     * Note: by default the actions does not prevent the default behavior nor the propagation of the
+     * event. This means that a click on an action will cause a click on the preview overlay too, resulting
+     * in the preview to close.
+     *
+     * To prevent the preview to close when an action is clicked, the onClick callback should invoke the
+     * preventDefault on the event received.
+     *
+     * @example
+     * ```ts
+     * const actions = [
+     * 	{
+     *  	id: 'do-action-and-close-preview',
+     *   	icon: 'Airplane',
+     *   	onClick: (e: React.MouseEvent<HTMLButtonElement> | KeyboardEvent): void => {
+     *   		// do action
+     *   		// do NOT prevent default
+     *   	}
+     * 	},
+     * 	{
+     *  	id: 'do-action-and-leave-preview-open',
+     *    icon: 'Activity',
+     *    onClick: (e: React.MouseEvent<HTMLButtonElement> | KeyboardEvent): void => {
+     *      // do action
+     *      // prevent default to tell the preview to not close
+     *      e.preventDefault();
+     * 	}
+     * ]
+     * ```
+     */
     actions: HeaderAction[];
     /** Extension of the file, shown as info */
     extension: string;
@@ -25,5 +57,6 @@ export interface HeaderProps {
     /** Size of the file, shown as info */
     size: string;
 }
+/** Preview header, shows the file information and the actions */
 declare const Header: React.VFC<HeaderProps>;
 export default Header;

package/lib/preview/Header.js

@@ -1,44 +1,23 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
 /*
  * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-var react_1 = __importDefault(require("react"));
-var carbonio_design_system_1 = require("@zextras/carbonio-design-system");
-var map_1 = __importDefault(require("lodash/map"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var HeaderContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tpadding: 1rem;\n"], ["\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tpadding: 1rem;\n"])));
-var LeftContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tgap: 0.5rem;\n"], ["\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tgap: 0.5rem;\n"])));
-var RightContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tgap: 0.5rem;\n"], ["\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tgap: 0.5rem;\n"])));
-var InfoContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\twidth: fit-content;\n\t& div {\n\t\tline-height: 1.5;\n\t}\n"], ["\n\twidth: fit-content;\n\t& div {\n\t\tline-height: 1.5;\n\t}\n"])));
-var UpperCaseText = (0, styled_components_1.default)(carbonio_design_system_1.Text)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\ttext-transform: uppercase;\n"], ["\n\ttext-transform: uppercase;\n"])));
-var Header = function (_a) {
-    var closeAction = _a.closeAction, actions = _a.actions, filename = _a.filename, extension = _a.extension, size = _a.size;
-    return (react_1.default.createElement(HeaderContainer, null,
-        react_1.default.createElement(LeftContainer, null,
-            closeAction && (react_1.default.createElement(carbonio_design_system_1.Tooltip, { label: closeAction.tooltipLabel, disabled: !closeAction.tooltipLabel, key: closeAction.id, placement: closeAction.tooltipPlacement },
-                react_1.default.createElement(carbonio_design_system_1.IconButton, { onClick: closeAction.onClick, icon: closeAction.icon, size: "medium", backgroundColor: "transparent", iconColor: "gray6" }))),
-            react_1.default.createElement(InfoContainer, null,
-                react_1.default.createElement(carbonio_design_system_1.Text, { size: "small", color: "gray6" }, filename),
-                react_1.default.createElement(UpperCaseText, { size: "small", color: "gray6" },
-                    extension,
-                    extension && size && react_1.default.createElement(react_1.default.Fragment, null, " \u00B7 "),
-                    size))),
-        react_1.default.createElement(RightContainer, null, (0, map_1.default)(actions, function (_a) {
-            var id = _a.id, onClick = _a.onClick, disabled = _a.disabled, icon = _a.icon, tooltipLabel = _a.tooltipLabel, tooltipPlacement = _a.tooltipPlacement;
-            return (react_1.default.createElement(carbonio_design_system_1.Tooltip, { label: tooltipLabel, disabled: !tooltipLabel, key: id, placement: tooltipPlacement },
-                react_1.default.createElement(carbonio_design_system_1.IconButton, { onClick: onClick, disabled: disabled, icon: icon, size: "medium", backgroundColor: "transparent", iconColor: "gray6" })));
-        }))));
-};
-exports.default = Header;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+import React from 'react';
+import { IconButton, Text, Tooltip } from '@zextras/carbonio-design-system';
+import styles from './Header.module.css';
+/** Preview header, shows the file information and the actions */
+const Header = ({ closeAction, actions, filename, extension, size }) => (React.createElement("div", { className: styles.headerContainer },
+    React.createElement("div", { className: styles.leftContainer },
+        closeAction ? (React.createElement(Tooltip, { label: closeAction.tooltipLabel, disabled: !closeAction.tooltipLabel, key: closeAction.id, placement: closeAction.tooltipPlacement },
+            React.createElement(IconButton, { onClick: closeAction.onClick, icon: closeAction.icon, size: "medium", backgroundColor: "transparent", iconColor: "gray6" }))) : null,
+        React.createElement("div", { className: styles.infoContainer },
+            React.createElement(Text, { size: "small", color: "gray6" }, filename),
+            React.createElement(Text, { size: "small", color: "gray6", className: styles.upperCase },
+                extension,
+                extension && size ? React.createElement(React.Fragment, null, " \u00B7 ") : null,
+                size))),
+    React.createElement("div", { className: styles.rightContainer }, actions.map(({ id, onClick, disabled, icon, tooltipLabel, tooltipPlacement }) => (React.createElement(Tooltip, { label: tooltipLabel, disabled: !tooltipLabel, key: id, placement: tooltipPlacement },
+        React.createElement(IconButton, { onClick: onClick, disabled: disabled, icon: icon, size: "medium", backgroundColor: "transparent", iconColor: "gray6" })))))));
+export default Header;
 //# sourceMappingURL=Header.js.map

package/lib/preview/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/preview/Header.tsx"],"names":[],"mappings":";;;;;;;;;AAAA;;;;GAIG;AACH,gDAA0B;AAE1B,0EAA4E;AAC5E,mDAA6B;AAC7B,wEAAuC;AAEvC,IAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,8IAAA,2EAIjC,IAAA,CAAC;AAEF,IAAM,aAAa,GAAG,2BAAM,CAAC,GAAG,iKAAA,8FAK/B,IAAA,CAAC;AAEF,IAAM,cAAc,GAAG,2BAAM,CAAC,GAAG,+JAAA,4FAKhC,IAAA,CAAC;AAEF,IAAM,aAAa,GAAG,2BAAM,CAAC,GAAG,qIAAA,kEAK/B,IAAA,CAAC;AAEF,IAAM,aAAa,GAAG,IAAA,2BAAM,EAAC,6BAAI,CAAC,qGAAA,kCAEjC,IAAA,CAAC;AA6BF,IAAM,MAAM,GAA2B,UAAC,EAAmD;QAAjD,WAAW,iBAAA,EAAE,OAAO,aAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA;IAAO,OAAA,CAC/F,8BAAC,eAAe;QACf,8BAAC,aAAa;YACZ,WAAW,IAAI,CACf,8BAAC,gCAAO,IACP,KAAK,EAAE,WAAW,CAAC,YAAY,EAC/B,QAAQ,EAAE,CAAC,WAAW,CAAC,YAAY,EACnC,GAAG,EAAE,WAAW,CAAC,EAAE,EACnB,SAAS,EAAE,WAAW,CAAC,gBAAgB;gBAEvC,8BAAC,mCAAU,IACV,OAAO,EAAE,WAAW,CAAC,OAAO,EAC5B,IAAI,EAAE,WAAW,CAAC,IAAI,EACtB,IAAI,EAAC,QAAQ,EACb,eAAe,EAAC,aAAa,EAC7B,SAAS,EAAC,OAAO,GAChB,CACO,CACV;YACD,8BAAC,aAAa;gBACb,8BAAC,6BAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,IAC9B,QAAQ,CACH;gBACP,8BAAC,aAAa,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO;oBACvC,SAAS;oBACT,SAAS,IAAI,IAAI,IAAI,yEAAe;oBACpC,IAAI,CACU,CACD,CACD;QAChB,8BAAC,cAAc,QACb,IAAA,aAAG,EAAC,OAAO,EAAE,UAAC,EAA+D;gBAA7D,EAAE,QAAA,EAAE,OAAO,aAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,YAAY,kBAAA,EAAE,gBAAgB,sBAAA;YAAO,OAAA,CAClF,8BAAC,gCAAO,IACP,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,CAAC,YAAY,EACvB,GAAG,EAAE,EAAE,EACP,SAAS,EAAE,gBAAgB;gBAE3B,8BAAC,mCAAU,IACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,EACb,eAAe,EAAC,aAAa,EAC7B,SAAS,EAAC,OAAO,GAChB,CACO,CACV;QAhBkF,CAgBlF,CAAC,CACc,CACA,CAClB;AAlD+F,CAkD/F,CAAC;AAEF,kBAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/preview/Header.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAS,OAAO,EAAgB,MAAM,iCAAiC,CAAC;AAEjG,OAAO,MAAM,MAAM,qBAAqB,CAAC;AA6DzC,iEAAiE;AACjE,MAAM,MAAM,GAA2B,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAC/F,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe;IACrC,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa;QAClC,WAAW,CAAC,CAAC,CAAC,CACd,oBAAC,OAAO,IACP,KAAK,EAAE,WAAW,CAAC,YAAY,EAC/B,QAAQ,EAAE,CAAC,WAAW,CAAC,YAAY,EACnC,GAAG,EAAE,WAAW,CAAC,EAAE,EACnB,SAAS,EAAE,WAAW,CAAC,gBAAgB;YAEvC,oBAAC,UAAU,IACV,OAAO,EAAE,WAAW,CAAC,OAAO,EAC5B,IAAI,EAAE,WAAW,CAAC,IAAI,EACtB,IAAI,EAAC,QAAQ,EACb,eAAe,EAAC,aAAa,EAC7B,SAAS,EAAC,OAAO,GAChB,CACO,CACV,CAAC,CAAC,CAAC,IAAI;QACR,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa;YACnC,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,IAC9B,QAAQ,CACH;YACP,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS;gBAC1D,SAAS;gBACT,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,qDAAe,CAAC,CAAC,CAAC,IAAI;gBAC1C,IAAI,CACC,CACF,CACD;IACN,6BAAK,SAAS,EAAE,MAAM,CAAC,cAAc,IACnC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CACjF,oBAAC,OAAO,IACP,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,CAAC,YAAY,EACvB,GAAG,EAAE,EAAE,EACP,SAAS,EAAE,gBAAgB;QAE3B,oBAAC,UAAU,IACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,EACb,eAAe,EAAC,aAAa,EAC7B,SAAS,EAAC,OAAO,GAChB,CACO,CACV,CAAC,CACG,CACD,CACN,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/preview/Header.module.css

@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.headerContainer {
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+}
+
+.leftContainer {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.rightContainer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.upperCase {
+    text-transform: uppercase;
+}
+
+.infoContainer {
+    width: fit-content;
+}
+
+.infoContainer div {
+    line-height: 1.5;
+}

package/lib/preview/ImagePreview.d.ts

@@ -1,50 +1,10 @@
 import React from 'react';
-import { HeaderAction, HeaderProps } from './Header';
-import { type MakeOptional } from '../utils/type-utils';
-type ImagePreviewProps = Partial<Omit<HeaderProps, 'closeAction'>> & {
-    /** Left Action for the preview */
-    closeAction?: MakeOptional<HeaderAction, 'onClick'>;
-    /**
-     * HTML node where to insert the Portal's children.
-     * The default value is 'window.top.document'.
-     * */
-    container?: Element;
-    /** Flag to disable the Portal implementation */
-    disablePortal?: boolean;
-    /** Flag to show or hide Portal's content */
-    show: boolean;
-    /** preview img source */
+import { type PreviewNavigatorProps } from './PreviewNavigator.js';
+export interface ImagePreviewProps extends Omit<PreviewNavigatorProps, 'onOverlayClick'> {
+    /** Preview img source */
     src: string | File | Blob;
-    /** Callback to hide the preview */
-    onClose: (e: React.SyntheticEvent | KeyboardEvent) => void;
-    /** Alternative text for image */
+    /** Alternative text for the image */
     alt?: string;
-    /** Callback  */
-    onNextPreview?: (e: React.SyntheticEvent | KeyboardEvent) => void;
-    /** Callback  */
-    onPreviousPreview?: (e: React.SyntheticEvent | KeyboardEvent) => void;
-};
-declare const ImagePreview: React.ForwardRefExoticComponent<Partial<Omit<HeaderProps, "closeAction">> & {
-    /** Left Action for the preview */
-    closeAction?: MakeOptional<HeaderAction, "onClick"> | undefined;
-    /**
-     * HTML node where to insert the Portal's children.
-     * The default value is 'window.top.document'.
-     * */
-    container?: Element | undefined;
-    /** Flag to disable the Portal implementation */
-    disablePortal?: boolean | undefined;
-    /** Flag to show or hide Portal's content */
-    show: boolean;
-    /** preview img source */
-    src: string | File | Blob;
-    /** Callback to hide the preview */
-    onClose: (e: React.SyntheticEvent | KeyboardEvent) => void;
-    /** Alternative text for image */
-    alt?: string | undefined;
-    /** Callback  */
-    onNextPreview?: ((e: React.SyntheticEvent | KeyboardEvent) => void) | undefined;
-    /** Callback  */
-    onPreviousPreview?: ((e: React.SyntheticEvent | KeyboardEvent) => void) | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export { ImagePreview, ImagePreviewProps };
+}
+/** Main component for rendering the preview of an image */
+export declare const ImagePreview: React.ForwardRefExoticComponent<ImagePreviewProps & React.RefAttributes<HTMLDivElement>>;

package/lib/preview/ImagePreview.js

@@ -1,80 +1,16 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImagePreview = void 0;
 /*
  * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-var react_1 = __importStar(require("react"));
-var carbonio_design_system_1 = require("@zextras/carbonio-design-system");
-var styled_components_1 = __importDefault(require("styled-components"));
-var FocusWithin_1 = __importDefault(require("./FocusWithin"));
-var Header_1 = __importDefault(require("./Header"));
-var StyledComponents_1 = require("./StyledComponents");
-var Overlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\theight: 100vh;\n\tmax-height: 100vh;\n\twidth: 100%;\n\tmax-width: 100%;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbackground-color: rgba(0, 0, 0, 0.8);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tz-index: 1003;\n"], ["\n\theight: 100vh;\n\tmax-height: 100vh;\n\twidth: 100%;\n\tmax-width: 100%;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbackground-color: rgba(0, 0, 0, 0.8);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tz-index: 1003;\n"])));
-var ExternalContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\theight: 100vh;\n\tmax-height: 100vh;\n\twidth: 100vw;\n\tmax-width: 100vw;\n\tdisplay: flex;\n\tflex-direction: column;\n\tposition: relative;\n"], ["\n\theight: 100vh;\n\tmax-height: 100vh;\n\twidth: 100vw;\n\tmax-width: 100vw;\n\tdisplay: flex;\n\tflex-direction: column;\n\tposition: relative;\n"])));
-var MiddleContainer = (0, styled_components_1.default)(carbonio_design_system_1.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tflex-grow: 1;\n"], ["\n\tflex-grow: 1;\n"])));
-var Image = styled_components_1.default.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tmax-height: 100%;\n\tmax-width: 100%;\n\tmin-height: 0;\n\tmin-width: 0;\n\talign-self: center;\n\tfilter: drop-shadow(0px 5px 14px rgba(0, 0, 0, 0.35));\n\tborder-radius: 0.25rem;\n"], ["\n\tmax-height: 100%;\n\tmax-width: 100%;\n\tmin-height: 0;\n\tmin-width: 0;\n\talign-self: center;\n\tfilter: drop-shadow(0px 5px 14px rgba(0, 0, 0, 0.35));\n\tborder-radius: 0.25rem;\n"])));
-var PreviewContainer = styled_components_1.default.div.attrs({
-    $paddingVertical: '2rem',
-    $paddingHorizontal: '1rem',
-    $gap: '0.5rem'
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tdisplay: flex;\n\tmax-width: 100%;\n\tmax-height: calc(100vh - ", " * 2);\n\tflex-direction: column;\n\tgap: ", ";\n\tjustify-content: center;\n\talign-items: center;\n\toverflow: hidden;\n\tpadding: ", ";\n\toutline: none;\n\tflex-grow: 1;\n"], ["\n\tdisplay: flex;\n\tmax-width: 100%;\n\tmax-height: calc(100vh - ", " * 2);\n\tflex-direction: column;\n\tgap: ", ";\n\tjustify-content: center;\n\talign-items: center;\n\toverflow: hidden;\n\tpadding: ", ";\n\toutline: none;\n\tflex-grow: 1;\n"])), function (_a) {
-    var $paddingVertical = _a.$paddingVertical;
-    return $paddingVertical;
-}, function (_a) {
-    var $gap = _a.$gap;
-    return $gap;
-}, function (_a) {
-    var $paddingVertical = _a.$paddingVertical, $paddingHorizontal = _a.$paddingHorizontal;
-    return "".concat($paddingVertical, " ").concat($paddingHorizontal);
-});
-var ImagePreview = react_1.default.forwardRef(function PreviewFn(_a, ref) {
-    var src = _a.src, show = _a.show, container = _a.container, disablePortal = _a.disablePortal, _b = _a.extension, extension = _b === void 0 ? '' : _b, _c = _a.filename, filename = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? '' : _d, _e = _a.actions, actions = _e === void 0 ? [] : _e, closeAction = _a.closeAction, onClose = _a.onClose, alt = _a.alt, onNextPreview = _a.onNextPreview, onPreviousPreview = _a.onPreviousPreview;
-    var _f = (0, react_1.useState)(undefined), computedSrc = _f[0], setComputedSrc = _f[1];
-    (0, react_1.useEffect)(function () {
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCombinedRefs } from '@zextras/carbonio-design-system';
+import styles from './ImagePreview.module.css';
+import { PreviewNavigator } from './PreviewNavigator.js';
+/** Main component for rendering the preview of an image */
+export const ImagePreview = React.forwardRef(function PreviewFn({ src, show, container, disablePortal, extension = '', filename = '', size = '', actions = [], closeAction, onClose, alt, onNextPreview, onPreviousPreview }, ref) {
+    const [computedSrc, setComputedSrc] = useState(undefined);
+    useEffect(() => {
         if (typeof src === 'string') {
             setComputedSrc(src);
         }
@@ -82,15 +18,9 @@ var ImagePreview = react_1.default.forwardRef(function PreviewFn(_a, ref) {
             setComputedSrc(URL.createObjectURL(src));
         }
     }, [src, setComputedSrc]);
-    var previewRef = (0, carbonio_design_system_1.useCombinedRefs)(ref);
-    var imageRef = (0, react_1.useRef)(null);
-    var $closeAction = (0, react_1.useMemo)(function () {
-        if (closeAction) {
-            return __assign({ onClick: onClose }, closeAction);
-        }
-        return closeAction;
-    }, [closeAction, onClose]);
-    var eventListener = (0, react_1.useCallback)(function (event) {
+    const previewRef = useCombinedRefs(ref);
+    const imageRef = useRef(null);
+    const eventListener = useCallback((event) => {
         if (event.key === 'Escape') {
             onClose(event);
         }
@@ -101,15 +31,15 @@ var ImagePreview = react_1.default.forwardRef(function PreviewFn(_a, ref) {
             onPreviousPreview(event);
         }
     }, [onClose, onNextPreview, onPreviousPreview]);
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         if (show) {
             document.addEventListener('keydown', eventListener);
         }
-        return function () {
+        return () => {
             document.removeEventListener('keydown', eventListener);
         };
     }, [eventListener, show]);
-    var onOverlayClick = (0, react_1.useCallback)(function (event) {
+    const onOverlayClick = useCallback((event) => {
         // TODO: stop propagation or not?
         event.stopPropagation();
         previewRef.current &&
@@ -118,17 +48,8 @@ var ImagePreview = react_1.default.forwardRef(function PreviewFn(_a, ref) {
                 !previewRef.current.contains(event.target)) &&
             onClose(event);
     }, [onClose, previewRef]);
-    return (react_1.default.createElement(carbonio_design_system_1.Portal, { show: show, disablePortal: disablePortal, container: container },
-        react_1.default.createElement(Overlay, { onClick: onOverlayClick },
-            react_1.default.createElement(FocusWithin_1.default, null,
-                react_1.default.createElement(ExternalContainer, null,
-                    react_1.default.createElement(Header_1.default, { actions: actions, filename: filename, extension: extension, size: size, closeAction: $closeAction }),
-                    react_1.default.createElement(MiddleContainer, { orientation: "horizontal", crossAlignment: "unset", minHeight: 0 },
-                        onPreviousPreview && (react_1.default.createElement(StyledComponents_1.AbsoluteLeftIconButton, { icon: "ArrowBackOutline", size: "medium", backgroundColor: "gray0", iconColor: "gray6", borderRadius: "round", onClick: onPreviousPreview })),
-                        react_1.default.createElement(PreviewContainer, { ref: previewRef },
-                            react_1.default.createElement(Image, { alt: alt !== null && alt !== void 0 ? alt : filename, src: computedSrc, onError: function (error) { return console.error('TODO handle error', error); }, ref: imageRef })),
-                        onNextPreview && (react_1.default.createElement(StyledComponents_1.AbsoluteRightIconButton, { icon: "ArrowForwardOutline", size: "medium", backgroundColor: "gray0", iconColor: "gray6", borderRadius: "round", onClick: onNextPreview }))))))));
+    return (React.createElement(PreviewNavigator, { onPreviousPreview: onPreviousPreview, onNextPreview: onNextPreview, container: container, disablePortal: disablePortal, extension: extension, show: show, filename: filename, actions: actions, size: size, onOverlayClick: onOverlayClick, closeAction: closeAction, onClose: onClose },
+        React.createElement("div", { ref: previewRef, className: styles.previewContainer },
+            React.createElement("img", { alt: alt !== null && alt !== void 0 ? alt : filename, src: computedSrc, onError: (error) => console.error('TODO handle error', error), ref: imageRef, className: styles.image }))));
 });
-exports.ImagePreview = ImagePreview;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 //# sourceMappingURL=ImagePreview.js.map

package/lib/preview/ImagePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../src/preview/ImagePreview.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../src/preview/ImagePreview.tsx"],"names":[],"mappings":"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"}

package/lib/preview/ImagePreview.module.css

@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.image {
+	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: 0.25rem;
+}
+
+.previewContainer {
+	display: flex;
+	max-width: 100%;
+	max-height: calc(100vh - 2rem * 2);
+	flex-direction: column;
+	gap: 0.5rem;
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+	padding: 2rem 1rem;
+	outline: none;
+	flex-grow: 1;
+}

package/lib/preview/Navigator.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export interface NavigatorProps {
     children: React.ReactElement | React.ReactElement[];
 }
+/** Container for the current preview actions (zoom, page) */
 export declare const Navigator: ({ children }: NavigatorProps) => React.JSX.Element;