@scaleflex/widget-explorer 4.4.0 → 4.5.0

package/lib/components/FileWindowPanel/FileTabs/FileTabButtons.js

@@ -0,0 +1,98 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState } from 'react';
+import { TooltipV2 } from '@scaleflex/ui/core';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import { useTheme, useMediaQuery } from '@scaleflex/ui/theme/hooks';
+import isFunction from '@scaleflex/widget-utils/lib/isFunction';
+import Styled from './FileTabs.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var FileTabButtons = function FileTabButtons(_ref) {
+  var visibleTabs = _ref.visibleTabs,
+    activeTabId = _ref.activeTabId,
+    setActiveTabId = _ref.setActiveTabId,
+    i18n = _ref.i18n,
+    isTabsHidden = _ref.isTabsHidden,
+    isFileLoading = _ref.isFileLoading,
+    alertUnsavedChangesFirst = _ref.alertUnsavedChangesFirst,
+    hasUnsavedChangesRef = _ref.hasUnsavedChangesRef,
+    cancelEditing = _ref.cancelEditing,
+    isPublicFile = _ref.isPublicFile;
+  var theme = useTheme();
+  var isScreenSmallSize = useMediaQuery(theme.breakpoints.down('lg'));
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isCollapsed = _useState2[0],
+    setIsCollapsed = _useState2[1];
+  useUpdateEffect(function () {
+    setIsCollapsed(false);
+  }, [isScreenSmallSize]);
+  if (isFileLoading) {
+    return /*#__PURE__*/_jsx(Styled.TabsButtonsWrapper, {
+      $isCollapsed: isCollapsed,
+      children: /*#__PURE__*/_jsx(Styled.TabBarSkeleton, {})
+    });
+  }
+  var onSelectTab = function onSelectTab(tabId) {
+    alertUnsavedChangesFirst(function () {
+      cancelEditing();
+      setActiveTabId(tabId);
+    });
+    if (!hasUnsavedChangesRef.current) {
+      setActiveTabId(tabId);
+    }
+  };
+  var renderTabButton = function renderTabButton(_ref2) {
+    var id = _ref2.id,
+      i18nStr = _ref2.i18nStr,
+      disabledI18nKey = _ref2.disabledI18nKey,
+      Icon = _ref2.iconComponent,
+      disable = _ref2.disable;
+    var isDisabled = isFunction(disable) ? disable({
+      isPublicFile: isPublicFile
+    }) : false;
+    var tooltipI18nKey = isDisabled && disabledI18nKey || i18nStr;
+    return /*#__PURE__*/_jsx(Styled.TooltipV2, {
+      title: i18n(tooltipI18nKey),
+      position: "left",
+      size: "lg",
+      arrow: false,
+      hide: !isCollapsed && !isDisabled,
+      children: /*#__PURE__*/_jsxs(Styled.TabButton, {
+        isActive: activeTabId === id,
+        $isCollapsed: isCollapsed,
+        onClick: isDisabled ? undefined : function () {
+          return onSelectTab(id);
+        },
+        isTabsHidden: isTabsHidden,
+        isDisabled: isDisabled,
+        children: [/*#__PURE__*/_jsx(Icon, {
+          color: "currentColor"
+        }), !isCollapsed && i18n(i18nStr)]
+      }, id)
+    }, id);
+  };
+  return /*#__PURE__*/_jsxs(Styled.TabsButtonsWrapper, {
+    $isCollapsed: isCollapsed,
+    children: [visibleTabs.map(renderTabButton), /*#__PURE__*/_jsx(TooltipV2, {
+      title: isCollapsed ? i18n('fileWindowShowLabelTooltip') : i18n('fileWindowHideLabelTooltip'),
+      position: "top",
+      size: "md",
+      children: /*#__PURE__*/_jsxs(Styled.CollapseButton, {
+        onClick: function onClick() {
+          return setIsCollapsed(!isCollapsed);
+        },
+        children: [/*#__PURE__*/_jsx(Styled.RightArrow, {
+          $isCollapsed: isCollapsed
+        }), /*#__PURE__*/_jsx(Styled.LeftArrow, {
+          $isCollapsed: isCollapsed
+        })]
+      })
+    })]
+  });
+};
+export default FileTabButtons;

package/lib/components/FileWindowPanel/FileTabs/FileTabs.constants.js

@@ -0,0 +1,50 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Info, Metadata as SfxMetadataIcon, Variations } from '@scaleflex/icons';
+import { FILE_WINDOW_TAB_IDS } from '@scaleflex/widget-utils/lib/constants';
+import GeneralTab from './GeneralTab';
+import MetadataTab from './MetadataTab';
+import VariationsTab from './VariationsTab';
+export var TABS_COMPONENTS = _defineProperty(_defineProperty(_defineProperty({}, FILE_WINDOW_TAB_IDS.GENERAL, GeneralTab), FILE_WINDOW_TAB_IDS.METADATA, MetadataTab), FILE_WINDOW_TAB_IDS.VARIATIONS, VariationsTab);
+export var PRE_UPLOAD_TABS = [{
+  id: FILE_WINDOW_TAB_IDS.GENERAL,
+  i18nStr: 'explorerFileWindowGeneralTabLabel',
+  iconComponent: Info
+}, {
+  id: FILE_WINDOW_TAB_IDS.METADATA,
+  i18nStr: 'explorerFileWindowMetadataTabLabel',
+  iconComponent: SfxMetadataIcon,
+  hide: function hide(_ref) {
+    var hideMetadataTab = _ref.hideMetadataTab;
+    return hideMetadataTab;
+  }
+}];
+export var ALL_TABS = [{
+  id: FILE_WINDOW_TAB_IDS.GENERAL,
+  i18nStr: 'explorerFileWindowGeneralTabLabel',
+  iconComponent: Info
+  // hide: (args) => false
+}, {
+  id: FILE_WINDOW_TAB_IDS.METADATA,
+  i18nStr: 'explorerFileWindowMetadataTabLabel',
+  iconComponent: SfxMetadataIcon,
+  hide: function hide(_ref2) {
+    var hideMetadataTab = _ref2.hideMetadataTab;
+    return hideMetadataTab;
+  }
+}, {
+  id: FILE_WINDOW_TAB_IDS.VARIATIONS,
+  i18nStr: 'explorerFileWindowVariationsTabLabel',
+  iconComponent: Variations,
+  hide: function hide(_ref3) {
+    var hideVariationsTab = _ref3.hideVariationsTab;
+    return hideVariationsTab;
+  },
+  disable: function disable(_ref4) {
+    var isPublicFile = _ref4.isPublicFile;
+    return !isPublicFile;
+  },
+  disabledI18nKey: 'explorerFileWindowVariationsTabDisabledDesc'
+}];

package/lib/components/FileWindowPanel/FileTabs/FileTabs.styled.js

@@ -0,0 +1,99 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css } from 'styled-components';
+import { Skeleton, TooltipV2 as SfxTooltip, EllipsedText } from '@scaleflex/ui/core';
+import { FV, PC, PSH } from '@scaleflex/widget-common';
+import { ArrowLeftOutline as SfxArrow } from '@scaleflex/icons';
+var getContainerHeight = function getContainerHeight(isCommentsTab, isVariantsOpened) {
+  if (isVariantsOpened) {
+    return '28%';
+  }
+  if (isCommentsTab) {
+    return '39%';
+  }
+  return '50%';
+};
+var containerSmallerScreenMixin = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --container-height: ", ";\n  width: 100%;\n  min-height: var(--container-height);\n  max-height: var(--container-height);\n  flex-grow: 1;\n  position: relative;\n  tr { display: table-row; }\n  td {\n    display: table-cell;\n    max-width: 500px; // max width of the table cell to not break UI\n  }\n\n  tr > td:first-child {\n    padding-right: 16px;\n  }\n"])), function (_ref) {
+  var isCommentsTab = _ref.isCommentsTab,
+    isVariantsOpened = _ref.isVariantsOpened;
+  return getContainerHeight(isCommentsTab, isVariantsOpened);
+});
+var Container = styled.div(function (_ref2) {
+  var theme = _ref2.theme,
+    showTabs = _ref2.showTabs;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  box-shadow: ", ";\n  display: flex;\n  width: ", "px;\n\n  ", " {\n    ", "\n    flex-direction: column-reverse;\n  }\n\n  ", " & {\n    ", "\n  }\n\n  ", " & {\n    ", "\n  }\n"])), theme.palette[PC.BackgroundStateless], theme.shadows[PSH.RightPanelMd], showTabs ? 592 : 500, theme.breakpoints.down('lg'), containerSmallerScreenMixin, theme.breakpoints.classes.md, containerSmallerScreenMixin, theme.breakpoints.classes.sm, containerSmallerScreenMixin);
+});
+var ActiveTabWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n  overflow-y: auto;\n\n  ", " {\n    max-width: 100%;\n  }\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.breakpoints.down('lg');
+});
+var CloseBtn = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 8px;\n  border-radius: 4px;\n  &:hover {\n    background: ", ";\n  }\n  &:active {\n    background: ", ";\n  }\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.palette[PC.ActiveSecondaryHover];
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.palette[PC.BackgroundActive];
+});
+var TabsButtonsWrapper = styled.div(function (_ref6) {
+  var theme = _ref6.theme,
+    $isCollapsed = _ref6.$isCollapsed;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  width: ", ";\n  flex-shrink: 0;\n  border-right: 1px solid ", ";\n  transition: all 150ms ease-out;\n\n  ", "{\n    .SfxTooltipV2-root {\n      display: none;\n    }\n  }\n\n  ", " {\n    position: relative;\n    z-index: 2000;\n    flex-direction: row;\n    width: 100%;\n    box-shadow: 0px -4px 8px 0px rgba(208, 215, 220, 0.22);\n  }\n"])), $isCollapsed ? '68px' : '92px', theme.palette[PC.BordersSecondary], !$isCollapsed, theme.breakpoints.down('lg'));
+});
+var TabButton = styled.div(function (_ref7) {
+  var theme = _ref7.theme,
+    $isCollapsed = _ref7.$isCollapsed,
+    isActive = _ref7.isActive,
+    isTabsHidden = _ref7.isTabsHidden,
+    isDisabled = _ref7.isDisabled;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n  width: 100%;\n  height: 100%;\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  cursor: pointer;\n  max-height: ", ";\n  color: ", ";\n  background: ", ";\n  transition: all 150ms ease-out;\n\n  svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  ", "\n\n  ", " {\n    gap: 3px;\n    width: 109px;\n    height: 65px;\n\n    ", "\n  }\n\n  ", "\n"])), theme.typography.font[FV.TextSmall], $isCollapsed ? '68px' : '80px', theme.palette[isActive ? PC.AccentStateless : PC.TextSecondary], isActive && theme.palette[PC.BackgroundActive], !isActive && !isDisabled && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    svg {\n      color: ", ";\n    }\n  "])), theme.palette[PC.BackgroundHover], theme.palette[PC.AccentPrimaryHover], theme.palette[PC.AccentPrimaryHover], theme.palette[PC.IconsPrimary]), theme.breakpoints.down('lg'), isTabsHidden && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      display: none;\n    "]))), isDisabled && "\n    color: ".concat(theme.palette[PC.ButtonDisabledText], ";\n    cursor: default;\n\n    svg {\n      color: ").concat(theme.palette[PC.ButtonDisabledText], ";\n    }\n  "));
+});
+var TabBarSkeleton = styled(Skeleton)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 92px;\n  height: 100%;\n  border-right: 1px solid ", ";\n\n  ", " {\n    width: 100%;\n    height: 65px;\n    border-top: 1px solid ", ";\n  }\n"])), function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.palette[PC.BordersSecondary];
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.breakpoints.down('lg');
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.palette[PC.BordersSecondary];
+});
+var CollapseButton = styled.div(function (_ref11) {
+  var theme = _ref11.theme;
+  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 44px;\n  height: 44px;\n  overflow: hidden;\n  margin: auto 0 8px 0;\n  cursor: pointer;\n\n  &:hover {\n    background: ", ";\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  transition: all 150ms ease-out;\n\n  ", " {\n    display: none;\n  }\n"])), theme.palette[PC.BackgroundHover], theme.palette[PC.IconsPrimary], theme.breakpoints.down('lg'));
+});
+var TooltipV2 = styled(SfxTooltip)(function (_ref12) {
+  var _ref12$theme = _ref12.theme,
+    palette = _ref12$theme.palette,
+    shadows = _ref12$theme.shadows,
+    typography = _ref12$theme.typography;
+  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  background: ", ";\n  box-shadow:  ", ";\n  padding: 8px 12px;\n\n  .SfxTooltipV2-content {\n    ", ";\n  }\n"])), palette[PC.BackgroundHover], shadows[PSH.ShadowXl], typography.font[FV.ButtonLg]);
+});
+var RightArrow = styled(SfxArrow)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  width: 11px;\n  height: 11px;\n  color: ", ";\n  transform: ", ";\n  transition: all 150ms ease-out;\n"])), function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.palette[PC.IconsSecondary];
+}, function (_ref14) {
+  var $isCollapsed = _ref14.$isCollapsed;
+  return $isCollapsed ? 'rotate(0deg)' : 'rotate(180deg)';
+});
+var LeftArrow = styled(SfxArrow)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  width: 11px;\n  height: 11px;\n  color: ", ";\n  transform: ", ";\n  transition: all 150ms ease-out;\n"])), function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.palette[PC.IconsSecondary];
+}, function (_ref16) {
+  var $isCollapsed = _ref16.$isCollapsed;
+  return $isCollapsed ? 'rotate(180deg)' : 'rotate(0deg)';
+});
+var EllipsedTextAutoWidth = styled(EllipsedText)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  width: auto;\n"])));
+var Styled = {
+  Container: Container,
+  CloseBtn: CloseBtn,
+  TabsButtonsWrapper: TabsButtonsWrapper,
+  TabButton: TabButton,
+  TooltipV2: TooltipV2,
+  ActiveTabWrapper: ActiveTabWrapper,
+  TabBarSkeleton: TabBarSkeleton,
+  CollapseButton: CollapseButton,
+  RightArrow: RightArrow,
+  LeftArrow: LeftArrow,
+  EllipsedTextAutoWidth: EllipsedTextAutoWidth
+};
+export default Styled;

package/lib/components/FileWindowPanel/FileTabs/FileTabsList.js

@@ -0,0 +1,91 @@
+import { useEffect, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import isSvg from '@scaleflex/widget-utils/lib/isSvg';
+import isImage from '@scaleflex/widget-utils/lib/isImage';
+import { PLUGINS_IDS, FILE_WINDOW_TAB_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { selectIsUserAuth } from '@scaleflex/widget-core/lib/slices/user.slice';
+import { isVisibilityPublic } from '@scaleflex/widget-utils/lib/visibility';
+import { ALL_TABS, PRE_UPLOAD_TABS } from './FileTabs.constants';
+import { selectMetadataModel } from '../../../slices/metadata.slice';
+import { useExplorer } from '../../../hooks';
+import FileTabButtons from './FileTabButtons';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FileTabsList = function FileTabsList(_ref) {
+  var isPreUpload = _ref.isPreUpload,
+    originalFile = _ref.originalFile,
+    activeTabId = _ref.activeTabId,
+    setActiveTabId = _ref.setActiveTabId,
+    isTabsHidden = _ref.isTabsHidden,
+    alertUnsavedChangesFirst = _ref.alertUnsavedChangesFirst,
+    hasUnsavedChangesRef = _ref.hasUnsavedChangesRef,
+    isFileLoading = _ref.isFileLoading,
+    setIsTabsHidden = _ref.setIsTabsHidden,
+    editFileDetailsProps = _ref.editFileDetailsProps;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    opts = _useExplorer.opts,
+    filerobot = _useExplorer.filerobot;
+  var _ref2 = editFileDetailsProps || {},
+    isEditing = _ref2.isEditing,
+    cancelEditing = _ref2.cancelEditing;
+  var isUserAuth = useSelector(selectIsUserAuth);
+  var metadataModel = useSelector(selectMetadataModel);
+  var isFastToken = opts.isFastToken,
+    hideVariationsTabOpts = opts.hideVariationsTab,
+    hideMetadataTabOpts = opts.hideMetadataTab;
+  var isSvgImage = isSvg(originalFile);
+  var isImageFile = isImage(originalFile);
+  var approvalPlugin = filerobot.getPlugin(PLUGINS_IDS.APPROVALS);
+  var showDetailsTabContent = isEditing;
+  var hideVariationsTab = hideVariationsTabOpts || isPreUpload || isFastToken || isSvgImage || !isImageFile;
+  var hideMetadataTab = hideMetadataTabOpts || Object.keys(metadataModel).length === 0;
+  var visibleTabs = useMemo(function () {
+    if (isPreUpload) {
+      return PRE_UPLOAD_TABS.filter(function (_ref3) {
+        var hide = _ref3.hide;
+        return !(hide !== null && hide !== void 0 && hide({
+          hideMetadataTab: hideMetadataTab
+        }));
+      });
+    } else {
+      return ALL_TABS.filter(function (_ref4) {
+        var hide = _ref4.hide,
+          id = _ref4.id;
+        var isVisible = !(hide !== null && hide !== void 0 && hide({
+          isFastToken: isFastToken,
+          isUserAuth: isUserAuth,
+          hideVariationsTab: hideVariationsTab,
+          hideMetadataTab: hideMetadataTab
+        }));
+        if (id === FILE_WINDOW_TAB_IDS.APPROVALS) {
+          return (approvalPlugin === null || approvalPlugin === void 0 ? void 0 : approvalPlugin.isEnabled()) && isVisible;
+        }
+        return isVisible;
+      });
+    }
+  }, [isFastToken, isUserAuth, isPreUpload, hideVariationsTab, hideMetadataTab]);
+  useEffect(function () {
+    var visibleTabsIds = visibleTabs.map(function (tab) {
+      return tab.id;
+    });
+    if (!isUserAuth && activeTabId === FILE_WINDOW_TAB_IDS.COMMENTS || !visibleTabsIds.includes(activeTabId)) {
+      setActiveTabId(visibleTabs[0].id);
+    }
+  }, [isUserAuth, visibleTabs]);
+  useEffect(function () {
+    setIsTabsHidden(showDetailsTabContent);
+  }, [showDetailsTabContent]);
+  return /*#__PURE__*/_jsx(FileTabButtons, {
+    visibleTabs: visibleTabs,
+    activeTabId: activeTabId,
+    setActiveTabId: setActiveTabId,
+    i18n: i18n,
+    isTabsHidden: isTabsHidden,
+    alertUnsavedChangesFirst: alertUnsavedChangesFirst,
+    hasUnsavedChangesRef: hasUnsavedChangesRef,
+    isFileLoading: isFileLoading,
+    cancelEditing: cancelEditing,
+    isPublicFile: isVisibilityPublic(originalFile === null || originalFile === void 0 ? void 0 : originalFile.visibility)
+  });
+};
+export default FileTabsList;

package/lib/components/FileWindowPanel/FileTabs/GeneralTab/EditableField.js

@@ -0,0 +1,78 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import MetaDataField from '@scaleflex/widget-common/lib/MetaData/MetaDataField';
+import getJsonParsedValue from '@scaleflex/widget-utils/lib/getJsonParsedValue';
+import isSvg from '@scaleflex/widget-utils/lib/isSvg';
+import isImage from '@scaleflex/widget-utils/lib/isImage';
+import { selectFileWindow } from '../../../../slices/panels.slice';
+import { useExplorerI18n } from '../../../../hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+var EditableField = function EditableField(_ref) {
+  var _editedDetails$key;
+  var field = _ref.field,
+    isEditing = _ref.isEditing,
+    file = _ref.file,
+    editedDetails = _ref.editedDetails,
+    onChange = _ref.onChange,
+    generateTags = _ref.generateTags,
+    generateDescription = _ref.generateDescription,
+    isLoading = _ref.isLoading,
+    isDescriptionLoading = _ref.isDescriptionLoading,
+    allTags = _ref.allTags,
+    enableAIDescription = _ref.enableAIDescription,
+    tagsFieldMaxWidth = _ref.tagsFieldMaxWidth,
+    size = _ref.size,
+    metaRegionalFilters = _ref.metaRegionalFilters,
+    metaRegionalGroups = _ref.metaRegionalGroups,
+    iconPrimaryColor = _ref.iconPrimaryColor,
+    checkUserPermissions = _ref.checkUserPermissions,
+    metaErrors = _ref.metaErrors,
+    isShowGenerateTagsBtn = _ref.isShowGenerateTagsBtn,
+    activeTabId = _ref.activeTabId;
+  var i18n = useExplorerI18n();
+  var renameItemFromContextMenu = useSelector(function (state) {
+    return selectFileWindow(state).enableRename;
+  });
+  var _useState = useState(!(file !== null && file !== void 0 && file.uuid) || isSvg(file) || !isImage(file)),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDescribeBtnHidden = _useState2[0],
+    setIsDescribeBtnHidden = _useState2[1];
+  var key = field.key,
+    value = field.value;
+  return /*#__PURE__*/_jsx(MetaDataField, {
+    i18n: i18n,
+    isEditing: isEditing,
+    item: file,
+    field: field,
+    onChange: onChange,
+    allTags: allTags,
+    size: size,
+    checkUserPermissions: checkUserPermissions,
+    iconPrimaryColor: iconPrimaryColor,
+    isLoading: isLoading,
+    generateTags: generateTags,
+    isShowGenerateBtn: isShowGenerateTagsBtn,
+    metaRegionalFilters: metaRegionalFilters,
+    metaRegionalGroups: metaRegionalGroups,
+    generateDescription: generateDescription,
+    isDescriptionLoading: isDescriptionLoading,
+    enableAIDescription: enableAIDescription,
+    tagsFieldMaxWidth: tagsFieldMaxWidth,
+    renameItemFromContextMenu: renameItemFromContextMenu,
+    isDescribeBtnHidden: isDescribeBtnHidden,
+    value: getJsonParsedValue((_editedDetails$key = editedDetails[key]) !== null && _editedDetails$key !== void 0 ? _editedDetails$key : value),
+    setIsDescribeBtnHidden: setIsDescribeBtnHidden,
+    error: metaErrors[key],
+    activeTabId: activeTabId,
+    fullWidthTags: true,
+    disableOnEnter: true,
+    isMetadataGeneralSection: true
+  });
+};
+export default EditableField;

package/lib/components/FileWindowPanel/FileTabs/GeneralTab/FieldLabel.js

@@ -0,0 +1,40 @@
+import { EllipsedText, TooltipV2 } from '@scaleflex/ui/core';
+import { InfoOutline } from '@scaleflex/icons';
+import StyledGeneralTab from './GeneralTab.styled';
+import { NON_CENTERED_FIELD_TYPES } from './GeneralTab.constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var FieldLabel = function FieldLabel(_ref) {
+  var field = _ref.field,
+    smallerFont = _ref.smallerFont,
+    isEditing = _ref.isEditing;
+  var title = field.title,
+    type = field.type,
+    labelIconTooltip = field.labelIconTooltip;
+  return /*#__PURE__*/_jsx(StyledGeneralTab.TblFieldLabel, {
+    smallerFont: smallerFont,
+    title: title,
+    fieldType: type,
+    children: /*#__PURE__*/_jsxs(StyledGeneralTab.TblFieldLabelContent, {
+      withTopMargin: isEditing && NON_CENTERED_FIELD_TYPES.includes(type),
+      children: [/*#__PURE__*/_jsx(EllipsedText, {
+        maxLinesCount: 2,
+        tooltipProps: {
+          size: 'sm'
+        },
+        children: /*#__PURE__*/_jsx(StyledGeneralTab.TblFieldTitle, {
+          smallerFont: smallerFont,
+          children: title
+        })
+      }), labelIconTooltip && /*#__PURE__*/_jsx(TooltipV2, {
+        position: "top",
+        size: "md",
+        title: field.labelIconTooltip,
+        arrow: true,
+        children: /*#__PURE__*/_jsx(InfoOutline, {
+          size: smallerFont ? 12 : 14
+        })
+      })]
+    })
+  });
+};
+export default FieldLabel;

package/lib/components/FileWindowPanel/FileTabs/GeneralTab/FieldRow.js

@@ -0,0 +1,57 @@
+import { TooltipV2 } from '@scaleflex/ui/core';
+import { InfoOutline } from '@scaleflex/icons';
+import FieldValue from './FieldValue';
+import StyledGeneralTab from './GeneralTab.styled';
+import StyledFileTabs from '../FileTabs.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var FieldRow = function FieldRow(_ref) {
+  var field = _ref.field,
+    editedDetails = _ref.editedDetails,
+    renderField = _ref.renderField,
+    isEditing = _ref.isEditing,
+    smallerFont = _ref.smallerFont,
+    file = _ref.file;
+  var title = field.title,
+    labelIconTooltip = field.labelIconTooltip,
+    type = field.type;
+  return /*#__PURE__*/_jsxs(StyledGeneralTab.TblFieldRow, {
+    children: [/*#__PURE__*/_jsx(StyledGeneralTab.TblFieldLabel, {
+      smallerFont: smallerFont,
+      title: title,
+      fieldType: type,
+      children: /*#__PURE__*/_jsxs(StyledGeneralTab.TblFieldLabelContent, {
+        withTopMargin: isEditing,
+        children: [/*#__PURE__*/_jsx(StyledFileTabs.EllipsedTextAutoWidth, {
+          maxLinesCount: 2,
+          tooltipProps: {
+            size: 'sm'
+          },
+          children: /*#__PURE__*/_jsx(StyledGeneralTab.TblFieldTitle, {
+            smallerFont: smallerFont,
+            children: title
+          })
+        }), labelIconTooltip && /*#__PURE__*/_jsx(TooltipV2, {
+          position: "top",
+          size: "md",
+          title: labelIconTooltip,
+          arrow: true,
+          children: /*#__PURE__*/_jsx(InfoOutline, {
+            size: smallerFont ? 12 : 14
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(StyledGeneralTab.TblFieldValue, {
+      smallerFont: smallerFont,
+      children: typeof renderField === 'function' ? renderField(field) : /*#__PURE__*/_jsx(StyledGeneralTab.ValueWrapper, {
+        smallerFont: smallerFont,
+        children: /*#__PURE__*/_jsx(FieldValue, {
+          file: file,
+          field: field,
+          editedDetails: editedDetails,
+          smallerFont: smallerFont
+        })
+      })
+    })]
+  });
+};
+export default FieldRow;

package/lib/components/FileWindowPanel/FileTabs/GeneralTab/FieldValue.js

@@ -0,0 +1,20 @@
+import FieldWithTooltip from './FieldWithTooltip';
+import StyledGeneralTab from './GeneralTab.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FieldValue = function FieldValue(_ref) {
+  var _editedDetails$field$;
+  var field = _ref.field,
+    file = _ref.file,
+    editedDetails = _ref.editedDetails,
+    smallerFont = _ref.smallerFont;
+  return /*#__PURE__*/_jsx(StyledGeneralTab.ValueWrapper, {
+    smallerFont: smallerFont,
+    children: /*#__PURE__*/_jsx(FieldWithTooltip, {
+      file: file,
+      field: field,
+      smallerFont: smallerFont,
+      value: (_editedDetails$field$ = editedDetails[field.key]) !== null && _editedDetails$field$ !== void 0 ? _editedDetails$field$ : field.value
+    })
+  });
+};
+export default FieldValue;

package/lib/components/FileWindowPanel/FileTabs/GeneralTab/FieldWithTooltip.js

@@ -0,0 +1,29 @@
+import { TooltipV2 } from '@scaleflex/ui/core';
+import FileMetadataFieldValue from '../../../common/FileMetadataFieldValue';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FieldWithTooltip = function FieldWithTooltip(_ref) {
+  var file = _ref.file,
+    field = _ref.field,
+    smallerFont = _ref.smallerFont;
+  var valueTooltip = field.valueTooltip;
+  if (valueTooltip) {
+    return /*#__PURE__*/_jsx(TooltipV2, {
+      position: "top",
+      size: "md",
+      title: valueTooltip,
+      arrow: true,
+      children: /*#__PURE__*/_jsx("span", {
+        children: /*#__PURE__*/_jsx(FileMetadataFieldValue, {
+          file: file,
+          field: field
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(FileMetadataFieldValue, {
+    file: file,
+    field: field,
+    smallerFont: smallerFont
+  });
+};
+export default FieldWithTooltip;