@solostylist/image-editor 1.0.20 → 1.0.22

package/lib/components/app/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":";AAubA,wBAAyB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":";AA8aA,wBAAyB"}

package/lib/components/app/index.js

@@ -9,14 +9,14 @@ import { SFlexBox } from '@solostylist/ui-kit/s-flex-box';
 import SFileDropzone from '@solostylist/ui-kit/s-file-dropzone';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { Box, CircularProgress } from '@mui/material';
-import { HIDE_LOADER, RESET, SET_FEEDBACK, SET_ORIGINAL_IMAGE, SET_SHOWN_TABS_MENU, SHOW_LOADER, UPDATE_STATE } from "../../actions";
+import { HIDE_LOADER, RESET, SET_ORIGINAL_IMAGE, SET_SHOWN_TABS_MENU, SHOW_LOADER, UPDATE_STATE } from "../../actions";
 import FeedbackPopup from "../feedback-popup";
 import MainCanvas from "../main-canvas";
 import Tabs from "../tabs";
 import STabsDrawer from "../tabs-drawer";
 import ToolsBar from "../tools-bar";
 import Topbar from "../topbar";
-import { usePhoneScreen, useResizeObserver, useStore, useTransformedImgData } from "../../hooks";
+import { useFeedbackHandler, usePhoneScreen, useResizeObserver, useStore, useTransformedImgData } from "../../hooks";
 import useUpdateEffect from "../../hooks/use-update-effect";
 import { ROOT_CONTAINER_CLASS_NAME } from "../../utils/constants";
 import filterStrToClass from "../../utils/filter-str-to-class";
@@ -47,7 +47,8 @@ var App = function App() {
     toolbarHeight = config.toolbarHeight,
     rootSx = config.rootSx,
     rootClassName = config.rootClassName,
-    renderEmptyState = config.renderEmptyState;
+    renderEmptyState = config.renderEmptyState,
+    dropzoneAccept = config.dropzoneAccept;
   var showTabsDrawer = window.matchMedia('(max-width: 760px)').matches;
   var _useResizeObserver = useResizeObserver(),
     _useResizeObserver2 = _slicedToArray(_useResizeObserver, 2),
@@ -61,6 +62,8 @@ var App = function App() {
     rootSize = _useState2[0],
     setRootSize = _useState2[1];
   var isPhoneScreen = usePhoneScreen();
+  var _useFeedbackHandler = useFeedbackHandler(),
+    handleError = _useFeedbackHandler.handleError;
   var pluginRootRef = useRef(null);
   var uploadInputRef = useRef(null);
   var imageBeingLoadedSrc = useRef(null);
@@ -74,17 +77,6 @@ var App = function App() {
       }
     });
   }, []);
-  var setError = useCallback(function (newError) {
-    dispatch({
-      type: SET_FEEDBACK,
-      payload: {
-        feedback: {
-          message: typeof newError === 'string' ? newError : newError.message,
-          duration: 0
-        }
-      }
-    });
-  }, []);
   var loadAndSetOriginalImage = function loadAndSetOriginalImage(imgToLoad) {
     return new Promise(function (resolve) {
       var imgSrc = imgToLoad instanceof HTMLImageElement ? imgToLoad === null || imgToLoad === void 0 ? void 0 : imgToLoad.src : imgToLoad;
@@ -105,7 +97,11 @@ var App = function App() {
       imageBeingLoadedSrc.current = imgSrc;
       setTimeout(function () {
         if (typeof imgToLoad === 'string') {
-          loadImage(imgToLoad, defaultSavedImageName, noCrossOrigin).then(setNewOriginalImage)["catch"](setError)["finally"](triggerResolve);
+          loadImage(imgToLoad, defaultSavedImageName, noCrossOrigin).then(setNewOriginalImage)["catch"](function (error) {
+            return handleError(error, t('invalidImageError'), {
+              persistent: true
+            });
+          })["finally"](triggerResolve);
         } else if (imgToLoad instanceof HTMLImageElement) {
           if (!imgToLoad.title && defaultSavedImageName) {
             imgToLoad.title = defaultSavedImageName;
@@ -120,7 +116,9 @@ var App = function App() {
           setNewOriginalImage(imgToLoad);
           triggerResolve();
         } else {
-          setError(t('invalidImageError'));
+          handleError(t('invalidImageError'), t('invalidImageError'), {
+            persistent: true
+          });
           triggerResolve();
         }
       }, 0);
@@ -188,9 +186,7 @@ var App = function App() {
           maxWidth: 600
         },
         children: _jsx(SFileDropzone, {
-          accept: {
-            'image/*': []
-          },
+          accept: dropzoneAccept,
           maxFiles: 1,
           multiple: false,
           onDrop: function onDrop(acceptedFiles) {
@@ -352,7 +348,7 @@ var App = function App() {
     ref: pluginRootRef,
     className: rootClassName ? "".concat(ROOT_CONTAINER_CLASS_NAME, " ").concat(rootClassName) : ROOT_CONTAINER_CLASS_NAME,
     sx: _objectSpread({
-      backgroundColor: 'var(--s-palette-background-default, var(--working-background))',
+      backgroundColor: 'var(--working-background, var(--s-palette-background-default))',
       backgroundImage: 'radial-gradient(circle at 1px 1px, var(--s-palette-divider) 1px, transparent 0)',
       backgroundSize: '12px 12px',
       flexDirection: 'column',

package/lib/components/feedback-popup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/feedback-popup/index.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAiB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAkBlE,UAAU,kBAAkB;IAC1B,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B;AAED,QAAA,MAAM,aAAa,GAAI,mBAEpB,kBAAkB,mDA+BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/feedback-popup/index.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAiB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAoBlE,UAAU,kBAAkB;IAC1B,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B;AAED,QAAA,MAAM,aAAa,GAAI,mBAEpB,kBAAkB,mDA+BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/feedback-popup/index.js

@@ -9,7 +9,7 @@ var defaultAnchorOrigin = {
   horizontal: 'center',
   vertical: 'bottom'
 };
-var ERROR_TO_SEVERITY = _defineProperty(_defineProperty({}, FEEDBACK_STATUSES.ERROR, 'error'), FEEDBACK_STATUSES.WARNING, 'warning');
+var ERROR_TO_SEVERITY = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, FEEDBACK_STATUSES.SUCCESS, 'success'), FEEDBACK_STATUSES.INFO, 'info'), FEEDBACK_STATUSES.ERROR, 'error'), FEEDBACK_STATUSES.WARNING, 'warning');
 var FeedbackPopup = function FeedbackPopup(_ref) {
   var _feedback$duration, _feedback$status;
   var _ref$anchorOrigin = _ref.anchorOrigin,

package/lib/components/main-canvas/image-context-menu.d.ts

@@ -0,0 +1,13 @@
+interface ImageContextMenuProps {
+    anchorPosition: {
+        top: number;
+        left: number;
+    } | null;
+    isActionPending?: boolean;
+    onClose: () => void;
+    onCopy: () => void;
+    onDownload: () => void;
+}
+declare const ImageContextMenu: ({ anchorPosition, isActionPending, onClose, onCopy, onDownload, }: ImageContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageContextMenu;
+//# sourceMappingURL=image-context-menu.d.ts.map

package/lib/components/main-canvas/image-context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-context-menu.d.ts","sourceRoot":"","sources":["../../../src/components/main-canvas/image-context-menu.tsx"],"names":[],"mappings":"AAMA,UAAU,qBAAqB;IAC7B,cAAc,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,GAAI,mEAMvB,qBAAqB,4CAmGvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/main-canvas/image-context-menu.js

@@ -0,0 +1,108 @@
+import ContentCopyOutlined from '@mui/icons-material/ContentCopyOutlined';
+import DownloadOutlined from '@mui/icons-material/DownloadOutlined';
+import { ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
+import { useStore } from "../../hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ImageContextMenu = function ImageContextMenu(_ref) {
+  var anchorPosition = _ref.anchorPosition,
+    _ref$isActionPending = _ref.isActionPending,
+    isActionPending = _ref$isActionPending === void 0 ? false : _ref$isActionPending,
+    onClose = _ref.onClose,
+    onCopy = _ref.onCopy,
+    onDownload = _ref.onDownload;
+  var _useStore = useStore(),
+    t = _useStore.t;
+  return _jsxs(Menu, {
+    open: Boolean(anchorPosition),
+    onClose: onClose,
+    onContextMenu: function onContextMenu(event) {
+      return event.preventDefault();
+    },
+    anchorReference: "anchorPosition",
+    anchorPosition: anchorPosition !== null && anchorPosition !== void 0 ? anchorPosition : undefined,
+    slotProps: {
+      paper: {
+        sx: {
+          overflow: 'hidden',
+          borderRadius: 'var(--s-shape-borderRadius, 8px)',
+          border: '1px solid',
+          borderColor: 'divider',
+          backgroundColor: 'var(--s-palette-background-paper)',
+          boxShadow: 'var(--s-palette-baseShadow)',
+          mt: 0.5,
+          '& .MuiList-root': {
+            py: 0.5
+          }
+        }
+      }
+    },
+    children: [_jsxs(MenuItem, {
+      onClick: onCopy,
+      disabled: isActionPending,
+      sx: {
+        minHeight: 44,
+        px: 1.5,
+        py: 1,
+        gap: 1,
+        color: 'var(--s-palette-text-primary)',
+        '&:hover': {
+          backgroundColor: 'var(--s-palette-action-hover)'
+        }
+      },
+      children: [_jsx(ListItemIcon, {
+        sx: {
+          minWidth: 28,
+          color: 'var(--s-palette-text-primary)'
+        },
+        children: _jsx(ContentCopyOutlined, {
+          fontSize: "small"
+        })
+      }), _jsx(ListItemText, {
+        primary: t('copyImage'),
+        slotProps: {
+          primary: {
+            sx: {
+              fontSize: 14,
+              fontWeight: 500,
+              color: 'var(--s-palette-text-primary)'
+            }
+          }
+        }
+      })]
+    }), _jsxs(MenuItem, {
+      onClick: onDownload,
+      disabled: isActionPending,
+      sx: {
+        minHeight: 44,
+        px: 1.5,
+        py: 1,
+        gap: 1,
+        color: 'var(--s-palette-text-primary)',
+        '&:hover': {
+          backgroundColor: 'var(--s-palette-action-hover)'
+        }
+      },
+      children: [_jsx(ListItemIcon, {
+        sx: {
+          minWidth: 28,
+          color: 'var(--s-palette-text-primary)'
+        },
+        children: _jsx(DownloadOutlined, {
+          fontSize: "small"
+        })
+      }), _jsx(ListItemText, {
+        primary: t('download'),
+        slotProps: {
+          primary: {
+            sx: {
+              fontSize: 14,
+              fontWeight: 500,
+              color: 'var(--s-palette-text-primary)'
+            }
+          }
+        }
+      })]
+    })]
+  });
+};
+export default ImageContextMenu;

package/lib/components/main-canvas/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/main-canvas/index.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,UAAU,+CA+Gf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/main-canvas/index.tsx"],"names":[],"mappings":"AAeA,QAAA,MAAM,UAAU,+CAwMf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/main-canvas/index.js

@@ -1,16 +1,33 @@
-import { useCallback, useEffect, useRef } from 'react';
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { SET_CANVAS_SIZE } from "../../actions";
 import { DesignLayer, TransformersLayer } from "../layers";
 import NodeControls from "../node-controls";
 import { AppProviderOverridenValue } from "../../context";
-import { useStore } from "../../hooks";
+import { useFeedbackHandler, useStore, useTransformedImgData } from "../../hooks";
+import { copyImageDataToClipboard, downloadImageData } from "../../utils/file";
 import CanvasNode from "./canvas-node";
+import ImageContextMenu from "./image-context-menu";
 import OriginalPreviewLayer from "./original-preview-layer";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var MainCanvas = function MainCanvas() {
   var providedAppContext = useStore();
   var canvasContainerRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorPosition = _useState2[0],
+    setAnchorPosition = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isContextActionPending = _useState4[0],
+    setIsContextActionPending = _useState4[1];
+  var transformImgFn = useTransformedImgData();
+  var _useFeedbackHandler = useFeedbackHandler(),
+    handleError = _useFeedbackHandler.handleError,
+    handleSuccess = _useFeedbackHandler.handleSuccess;
   var contextRef = useRef(providedAppContext);
   useEffect(function () {
     contextRef.current = providedAppContext;
@@ -55,7 +72,10 @@ var MainCanvas = function MainCanvas() {
     cropTopOffset = _providedAppContext$c.cropTopOffset,
     defaultToolId = _providedAppContext$c.defaultToolId,
     toolId = providedAppContext.toolId,
-    originalImage = providedAppContext.originalImage;
+    originalImage = providedAppContext.originalImage,
+    isLoadingGlobally = providedAppContext.isLoadingGlobally,
+    textIdOfEditableContent = providedAppContext.textIdOfEditableContent,
+    t = providedAppContext.t;
   var lastToolIdRef = useRef(toolId !== null && toolId !== void 0 ? toolId : null);
   useEffect(function () {
     if (toolId) {
@@ -69,6 +89,60 @@ var MainCanvas = function MainCanvas() {
     }
   }, [originalImage, defaultToolId, toolId]);
   var cropOffset = cropTopOffset !== null && cropTopOffset !== void 0 ? cropTopOffset : 56;
+  var handleCloseContextMenu = useCallback(function () {
+    setAnchorPosition(null);
+  }, []);
+  var handleCanvasContextMenu = useCallback(function (event) {
+    var target = event.target;
+    if (!originalImage || isLoadingGlobally || isContextActionPending || textIdOfEditableContent || target.tagName.toLowerCase() !== 'canvas') {
+      return;
+    }
+    event.preventDefault();
+    setAnchorPosition({
+      top: event.clientY + 2,
+      left: event.clientX + 2
+    });
+  }, [isContextActionPending, isLoadingGlobally, originalImage, textIdOfEditableContent]);
+  var runContextAction = useCallback(function () {
+    var _ref3 = _asyncToGenerator(_regeneratorRuntime.mark(function _callee(action, successMessage, errorMessage) {
+      var transformedData, _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            handleCloseContextMenu();
+            setIsContextActionPending(true);
+            _context.prev = 1;
+            transformedData = transformImgFn(undefined, false, false, false);
+            _context.next = 2;
+            return action(transformedData.imageData);
+          case 2:
+            handleSuccess(successMessage);
+            _context.next = 4;
+            break;
+          case 3:
+            _context.prev = 3;
+            _t = _context["catch"](1);
+            handleError(_t, errorMessage);
+          case 4:
+            _context.prev = 4;
+            setIsContextActionPending(false);
+            return _context.finish(4);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 3, 4, 5]]);
+    }));
+    return function (_x, _x2, _x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [handleCloseContextMenu, handleError, handleSuccess, transformImgFn]);
+  var handleCopyImage = useCallback(function () {
+    void runContextAction(copyImageDataToClipboard, t('copySuccess'), t('copyFailed'));
+  }, [runContextAction, t]);
+  var handleDownloadImage = useCallback(function () {
+    void runContextAction(downloadImageData, t('downloadSuccess'), t('downloadFailed'));
+  }, [runContextAction, t]);
   return _jsx(Box, {
     height: canvasAreaHeight !== null && canvasAreaHeight !== void 0 ? canvasAreaHeight : '100%',
     minHeight: 0,
@@ -84,6 +158,7 @@ var MainCanvas = function MainCanvas() {
       position: "relative",
       flexGrow: 1,
       ref: canvasContainerRef,
+      onContextMenu: handleCanvasContextMenu,
       width: '100%',
       children: [!providedAppContext.textIdOfEditableContent && !providedAppContext.isShowOriginalImage && _jsx(NodeControls, {}), _jsx(CanvasNode, {
         children: _jsx(AppProviderOverridenValue, {
@@ -92,6 +167,12 @@ var MainCanvas = function MainCanvas() {
             children: [_jsx(DesignLayer, {}), _jsx(TransformersLayer, {})]
           })
         })
+      }), _jsx(ImageContextMenu, {
+        anchorPosition: anchorPosition,
+        isActionPending: isContextActionPending,
+        onClose: handleCloseContextMenu,
+        onCopy: handleCopyImage,
+        onDownload: handleDownloadImage
       })]
     })
   });

package/lib/components/tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.tsx"],"names":[],"mappings":"AAmBA,UAAU,SAAS;IACjB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,QAAA,MAAM,IAAI,GAAI,oBAAoB,SAAS,mDAiM1C,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.tsx"],"names":[],"mappings":"AAeA,UAAU,SAAS;IACjB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,QAAA,MAAM,IAAI,GAAI,oBAAoB,SAAS,mDAkL1C,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/tabs/index.js

@@ -4,12 +4,15 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import { Box, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { SIconButton } from '@solostylist/ui-kit/s-icon-button';
+import { SNavItems } from '@solostylist/ui-kit/s-nav-item';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { SELECT_TAB } from "../../actions";
 import { useStore } from "../../hooks";
 import { AVAILABLE_TABS } from "./tabs.constants";
+import { buildTabNavItems } from "./nav-items";
+import { createTabNavLink } from "./tab-nav-link";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var Tabs = function Tabs(_ref) {
   var toggleMainMenu = _ref.toggleMainMenu;
@@ -35,6 +38,9 @@ var Tabs = function Tabs(_ref) {
     });
     toggleMainMenu === null || toggleMainMenu === void 0 || toggleMainMenu(false);
   }, [dispatch, toggleMainMenu]);
+  var TabNavLink = useMemo(function () {
+    return createTabNavLink(selectTab);
+  }, [selectTab]);
   var chosenTabsConfig = useMemo(function () {
     var tabs = [];
     var tabsIdsArray = Array.isArray(tabsIds) ? tabsIds : Object.keys(tabsIds !== null && tabsIds !== void 0 ? tabsIds : {});
@@ -52,6 +58,9 @@ var Tabs = function Tabs(_ref) {
       return Boolean(tab);
     });
   }, [tabsIds]);
+  var navItems = useMemo(function () {
+    return buildTabNavItems(chosenTabsConfig, t);
+  }, [chosenTabsConfig, t]);
   useEffect(function () {
     var width = open ? 240 : 64;
     document.documentElement.style.setProperty('--s-image-editor-tabs-width', "".concat(width, "px"));
@@ -98,7 +107,7 @@ var Tabs = function Tabs(_ref) {
           });
         },
         sx: {
-          marginLeft: open ? 'auto' : '0',
+          marginLeft: open ? 'auto' : 0.5,
           width: 32,
           height: 32
         },
@@ -114,94 +123,56 @@ var Tabs = function Tabs(_ref) {
         overflowX: 'hidden',
         flex: 1
       },
-      children: _jsx(Box, {
+      children: _jsxs(Box, {
         sx: {
-          p: '8px',
+          p: 1,
           display: 'flex',
           flexDirection: 'column'
         },
-        children: chosenTabsConfig.map(function (tab) {
+        children: [!open && chosenTabsConfig.map(function (tab) {
           var Icon = tab.icon;
           var isActive = currentTabId === tab.id;
-          if (!open) {
-            return _jsx(SIconButton, {
-              onClick: function onClick() {
-                return selectTab(tab.id);
-              },
-              tooltipOptions: {
-                title: t(tab.labelKey),
-                placement: 'right'
-              },
-              sx: _objectSpread(_objectSpread({
-                width: '40px',
-                height: '40px',
-                mb: '4px',
-                borderRadius: '8px',
-                color: isActive ? 'var(--s-palette-text-primary)' : 'var(--s-palette-text-secondary)'
-              }, isActive && {
-                bgcolor: 'var(--s-palette-action-selected)'
-              }), {}, {
-                '&:hover': {
-                  bgcolor: isActive ? 'var(--s-palette-action-selected)' : 'var(--s-palette-action-hover)'
-                }
-              }),
-              children: _jsx(Icon, {
-                sx: {
-                  fontSize: '18px',
-                  color: 'inherit'
-                }
-              })
-            }, tab.id);
-          }
-          return _jsx(ListItem, {
-            disablePadding: true,
-            sx: {
-              mb: 0.5
+          return _jsx(SIconButton, {
+            onClick: function onClick() {
+              return selectTab(tab.id);
             },
-            children: _jsxs(ListItemButton, {
-              selected: isActive,
-              onClick: function onClick() {
-                return selectTab(tab.id);
-              },
+            tooltipOptions: {
+              title: t(tab.labelKey),
+              placement: 'right'
+            },
+            sx: _objectSpread(_objectSpread({
+              width: '40px',
+              height: '40px',
+              minWidth: '40px',
+              minHeight: '40px',
+              mb: '4px',
+              mx: 'auto',
+              p: 0,
+              borderRadius: '8px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: isActive ? 'var(--s-palette-text-primary)' : 'var(--s-palette-text-secondary)'
+            }, isActive && {
+              bgcolor: 'var(--s-palette-action-selected)'
+            }), {}, {
+              '&:hover': {
+                bgcolor: isActive ? 'var(--s-palette-action-selected)' : 'var(--s-palette-action-hover)'
+              }
+            }),
+            children: _jsx(Icon, {
               sx: {
-                py: 0.75,
-                px: 1.5,
-                gap: 1.5,
-                borderRadius: 1,
-                minHeight: '40px',
-                backgroundColor: isActive ? 'var(--s-palette-action-selected) !important' : 'transparent',
-                color: isActive ? 'var(--s-palette-text-primary)' : 'var(--s-palette-text-secondary)',
-                '&:hover': {
-                  bgcolor: isActive ? 'var(--s-palette-action-selected)' : 'var(--s-palette-action-hover)',
-                  color: 'var(--s-palette-text-primary)'
-                }
-              },
-              children: [_jsx(ListItemIcon, {
-                sx: {
-                  minWidth: 'auto',
-                  color: 'inherit'
-                },
-                children: _jsx(Icon, {
-                  sx: {
-                    fontSize: '20px',
-                    color: 'inherit'
-                  }
-                })
-              }), _jsx(ListItemText, {
-                primary: _jsx(Typography, {
-                  variant: "body2",
-                  noWrap: true,
-                  sx: {
-                    color: 'inherit',
-                    fontWeight: 500,
-                    lineHeight: '28px'
-                  },
-                  children: t(tab.labelKey)
-                })
-              })]
+                fontSize: '18px',
+                color: 'inherit',
+                display: 'block'
+              }
             })
           }, tab.id);
-        })
+        }), open && _jsx(SNavItems, {
+          pathname: currentTabId,
+          items: navItems,
+          component: TabNavLink
+        })]
       })
     })]
   });

package/lib/components/tabs/nav-items.d.ts

@@ -0,0 +1,6 @@
+import type { SNavItemConfig } from '@solostylist/ui-kit/s-nav-item';
+import type { TabConfig } from './tabs.constants';
+type TranslateFn = (key: string) => string;
+export declare const buildTabNavItems: (tabs: TabConfig[], t: TranslateFn) => SNavItemConfig[];
+export {};
+//# sourceMappingURL=nav-items.d.ts.map

package/lib/components/tabs/nav-items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-items.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/nav-items.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,KAAK,WAAW,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAE3C,eAAO,MAAM,gBAAgB,GAC3B,MAAM,SAAS,EAAE,EACjB,GAAG,WAAW,KACb,cAAc,EAmBb,CAAC"}

package/lib/components/tabs/nav-items.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export var buildTabNavItems = function buildTabNavItems(tabs, t) {
+  return tabs.map(function (tab) {
+    var Icon = tab.icon;
+    return {
+      key: tab.id,
+      title: t(tab.labelKey),
+      href: tab.id,
+      icon: function icon(active) {
+        return _jsx(Icon, {
+          sx: {
+            fontSize: '20px',
+            color: active ? 'var(--s-palette-text-primary)' : 'var(--s-palette-text-secondary)'
+          }
+        });
+      }
+    };
+  });
+};

package/lib/components/tabs/tab-nav-link.d.ts

@@ -0,0 +1,5 @@
+import { AnchorHTMLAttributes } from 'react';
+export declare const createTabNavLink: (onSelect: (href: string) => void) => import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+    onSelect?: (href: string) => void;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=tab-nav-link.d.ts.map

package/lib/components/tabs/tab-nav-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-nav-link.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab-nav-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAMzD,eAAO,MAAM,gBAAgB,GAAI,UAAU,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;eAHpD,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;qDA0BlC,CAAC"}

package/lib/components/tabs/tab-nav-link.js

@@ -0,0 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["href", "onClick"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var createTabNavLink = function createTabNavLink(onSelect) {
+  var Component = forwardRef(function TabNavLinkComponent(_ref, ref) {
+    var href = _ref.href,
+      _onClick = _ref.onClick,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return _jsx("a", _objectSpread(_objectSpread({}, props), {}, {
+      ref: ref,
+      href: href,
+      onClick: function onClick(event) {
+        event.preventDefault();
+        _onClick === null || _onClick === void 0 || _onClick(event);
+        if (href) {
+          onSelect(href);
+        }
+      }
+    }));
+  });
+  Component.displayName = 'TabNavLink';
+  return Component;
+};

package/lib/components/tools/image/image-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-options.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/image/image-options.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,YAAY,+CAuLjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"image-options.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/image/image-options.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,YAAY,+CAwLjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/tools/image/image-options.js

@@ -153,7 +153,8 @@ var ImageOptions = function ImageOptions() {
       ref: uploadImgsInput,
       onChange: isLoading ? undefined : importImages,
       disabled: isLoading,
-      multiple: true
+      multiple: true,
+      accept: imageConfig.acceptedImageTypes
     }), isGalleryEnabled && _jsx(ImagesGallery, {
       gallery: imageConfig.gallery,
       onSelect: importImgFromGallery,

package/lib/components/tools/watermark/watermark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"watermark.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/watermark/watermark.tsx"],"names":[],"mappings":"AAwBA,QAAA,MAAM,SAAS,+CAmQd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"watermark.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/watermark/watermark.tsx"],"names":[],"mappings":"AAwBA,QAAA,MAAM,SAAS,+CAuQd,CAAC;AAEF,eAAe,SAAS,CAAC"}