@scaleflex/widget-explorer 4.4.0 → 4.5.1

package/lib/components/FileWindowPanel/FileTabs/MetadataTab/CustomMetadataSection.js

@@ -0,0 +1,247 @@
+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 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; }
+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); }
+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 { Fragment, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { TableBody, TooltipV2 } from '@scaleflex/ui/core';
+import { InfoOutline } from '@scaleflex/icons';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { PC } from '@scaleflex/widget-common';
+import MetadataAttachmentsFieldType from '@scaleflex/widget-common/lib/MetaData/MetaDataFieldTypes/MetadataAttachmentsFieldType';
+// TODO: Check this MetaDataField component (and other old metadata components) to be refactored and maybe move its location.
+import MetaDataField from '@scaleflex/widget-common/lib/MetaData/MetaDataField';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import { selectMetadataRegionalFilters, selectMetadataRegionalGroups } from '../../../../slices/metadata.slice';
+import { useAssetsPicker, useExplorer, useFileMetadata, useLocateFile } from '../../../../hooks';
+import FileMetadataFieldValue from '../../../common/FileMetadataFieldValue';
+import { ATTACHMENTS_ASSETS, NON_CENTERED_FIELD_TYPES } from './MetadataTab.constants';
+import { MULTI_SELECT_FIELD_TYPE } from '../../../BulkEditPanel/components/Tabs/tabs.constants';
+import useFetchMetadataTagsBySearchQuery from '../../../../hooks/useFetchMetadataTagsBySearchQuery';
+import { fileWindowUpdated } from '../../../../slices/panels.slice';
+import { copyFileCdnLink, fetchFileByUuid } from '../../../../slices/files.slice';
+import { useDeleteModal, useDownloadConsentModal } from '../../../Modals';
+import { downloadOneFile } from '../../../../thunks/downloads.thunks';
+import StyledMetadataTab from './MetadataTab.styled';
+import StyledFileTabs from '../FileTabs.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var CustomMetadataSection = function CustomMetadataSection(_ref) {
+  var i18n = _ref.i18n,
+    checkUserPermissions = _ref.checkUserPermissions,
+    file = _ref.file,
+    isEditing = _ref.isEditing,
+    updateEditedDetails = _ref.updateEditedDetails,
+    editedDetails = _ref.editedDetails,
+    metaErrors = _ref.metaErrors,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    scrollToMetaField = _ref.scrollToMetaField,
+    _ref$tagsFieldMaxWidt = _ref.tagsFieldMaxWidth,
+    tagsFieldMaxWidth = _ref$tagsFieldMaxWidt === void 0 ? 320 : _ref$tagsFieldMaxWidt,
+    _ref$smallerFont = _ref.smallerFont,
+    smallerFont = _ref$smallerFont === void 0 ? false : _ref$smallerFont,
+    dismissMarginTop = _ref.dismissMarginTop,
+    _ref$dismissMarginBot = _ref.dismissMarginBottom,
+    dismissMarginBottom = _ref$dismissMarginBot === void 0 ? false : _ref$dismissMarginBot;
+  var dispatch = useDispatch();
+  var _useFileMetadata = useFileMetadata({
+      file: file,
+      scrollToMetaField: scrollToMetaField
+    }),
+    customMetadataGroups = _useFileMetadata.customMetadataGroups;
+  var _useState = useState(function () {
+      return customMetadataGroups.reduce(function (fields, customMetadata) {
+        return _objectSpread(_objectSpread({}, fields), {}, _defineProperty({}, customMetadata.uuid, true));
+      }, {});
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAccordionExpanded = _useState2[0],
+    setIsAccordionExpanded = _useState2[1];
+  var metaRegionalFilters = useSelector(selectMetadataRegionalFilters);
+  var metaRegionalGroups = useSelector(selectMetadataRegionalGroups);
+  var theme = useTheme();
+  var _useCore = useCore(),
+    _useCore$opts = _useCore.opts,
+    securityTemplateId = _useCore$opts.securityTemplateId,
+    container = _useCore$opts.container,
+    sassKey = _useCore$opts.sassKey;
+  var _useAssetsPicker = useAssetsPicker(),
+    openAssetsPicker = _useAssetsPicker.openAssetsPicker;
+  var _useExplorer = useExplorer(),
+    info = _useExplorer.info,
+    i18nArray = _useExplorer.i18nArray;
+  var locateFile = useLocateFile();
+  var deleteModal = useDeleteModal(true);
+  var triggerDownloadConsentModal = useDownloadConsentModal();
+  var _useFetchMetadataTags = useFetchMetadataTagsBySearchQuery(),
+    fetchSearchQueryTags = _useFetchMetadataTags.fetchSearchQueryTags,
+    isFetchingTags = _useFetchMetadataTags.isFetchingTags;
+  var iconPrimaryColor = theme.palette[PC.IconsPrimary];
+  var isAttachmentsField = function isAttachmentsField(field) {
+    return field.type === ATTACHMENTS_ASSETS;
+  };
+  var triggerAssetsPicker = function triggerAssetsPicker() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return openAssetsPicker(_objectSpread({
+      securityTemplateId: securityTemplateId,
+      container: container,
+      sassKey: sassKey,
+      theme: theme
+    }, args));
+  };
+  var copyFileLink = function copyFileLink(fileToCopy) {
+    dispatch(copyFileCdnLink(fileToCopy));
+  };
+  var _file$meta = file.meta,
+    meta = _file$meta === void 0 ? {} : _file$meta;
+  var handleToggleAccordion = function handleToggleAccordion(uuid) {
+    setIsAccordionExpanded(function (prevExpandedItems) {
+      return _objectSpread(_objectSpread({}, prevExpandedItems), {}, _defineProperty({}, uuid, !prevExpandedItems[uuid]));
+    });
+  };
+  var onChange = function onChange(value, key, regionalVariantFieldKey) {
+    var nextValue = _defineProperty({}, key, regionalVariantFieldKey ? _objectSpread(_objectSpread(_objectSpread({}, meta[key]), editedDetails[key]), {}, _defineProperty({}, regionalVariantFieldKey, value)) : value);
+    updateEditedDetails(nextValue);
+  };
+  var onChangeSearchQuery = function onChangeSearchQuery(_ref2) {
+    var debouncedSearchValue = _ref2.debouncedSearchValue,
+      cb = _ref2.cb,
+      metadataFieldCKey = _ref2.metadataFieldCKey;
+    fetchSearchQueryTags({
+      debouncedSearchValue: debouncedSearchValue,
+      cb: cb,
+      metadataFieldCKey: metadataFieldCKey
+    });
+  };
+  var getFieldVariantHint = function getFieldVariantHint(field) {
+    var metaRegionalVariant = metaRegionalGroups === null || metaRegionalGroups === void 0 ? void 0 : metaRegionalGroups.find(function (metaRegional) {
+      return (metaRegional === null || metaRegional === void 0 ? void 0 : metaRegional.uuid) === (field === null || field === void 0 ? void 0 : field.regional_variants_group_uuid);
+    });
+    if (metaRegionalVariant) {
+      var _variants$find;
+      var label = metaRegionalVariant.label,
+        uuid = metaRegionalVariant.uuid,
+        variants = metaRegionalVariant.variants;
+      var value = variants === null || variants === void 0 ? void 0 : (_variants$find = variants.find(function (variant) {
+        return (variant === null || variant === void 0 ? void 0 : variant.api_value) === metaRegionalFilters["".concat(uuid)];
+      })) === null || _variants$find === void 0 ? void 0 : _variants$find.label;
+      return "".concat(label, ": ").concat(value);
+    }
+  };
+  var renderMetadataAttachmentsField = function renderMetadataAttachmentsField(field) {
+    return /*#__PURE__*/_jsx(MetadataAttachmentsFieldType, {
+      i18n: i18n,
+      i18nArray: i18nArray,
+      isEditing: isEditing,
+      onChange: onChange,
+      editedDetails: editedDetails,
+      meta: meta,
+      openAssetsPicker: triggerAssetsPicker,
+      info: info,
+      originalFile: file,
+      locateFile: locateFile,
+      deleteModal: deleteModal,
+      triggerDownloadConsentModal: triggerDownloadConsentModal,
+      downloadOneFile: downloadOneFile,
+      fileWindowUpdated: fileWindowUpdated,
+      fetchFileByUuid: fetchFileByUuid,
+      field: field,
+      smallerFont: smallerFont,
+      copyCdnLink: copyFileLink
+    });
+  };
+  return /*#__PURE__*/_jsx(StyledMetadataTab.TableContainer, {
+    dismissFixedLayout: true,
+    dismissMarginTop: dismissMarginTop,
+    children: /*#__PURE__*/_jsx(StyledMetadataTab.Table, {
+      padding: "none",
+      size: "medium",
+      children: /*#__PURE__*/_jsx(TableBody, {
+        children: (customMetadataGroups || []).map(function (_ref3) {
+          var name = _ref3.name,
+            uuid = _ref3.uuid,
+            fields = _ref3.fields;
+          return /*#__PURE__*/_jsx(Fragment, {
+            children: /*#__PURE__*/_jsx(StyledMetadataTab.SectionAccordion, {
+              expanded: !!isAccordionExpanded[uuid],
+              label: name,
+              onClick: function onClick() {
+                return handleToggleAccordion(uuid);
+              },
+              dismissMarginBottom: dismissMarginBottom,
+              smallerFont: smallerFont,
+              children: fields.map(function (field) {
+                var _editedDetails$field$;
+                return /*#__PURE__*/_jsxs(StyledMetadataTab.TblFieldRow, {
+                  children: [/*#__PURE__*/_jsx(StyledMetadataTab.TblFieldLabel, {
+                    smallerFont: smallerFont,
+                    fieldType: field.type,
+                    colSpan: isAttachmentsField(field) ? 2 : 1,
+                    children: /*#__PURE__*/_jsxs(StyledMetadataTab.TblFieldLabelContent, {
+                      withTopMargin: isEditing && NON_CENTERED_FIELD_TYPES.includes(field.type),
+                      children: [isAttachmentsField(field) ? renderMetadataAttachmentsField(field) : /*#__PURE__*/_jsx(StyledFileTabs.EllipsedTextAutoWidth, {
+                        maxLinesCount: 2,
+                        children: /*#__PURE__*/_jsx(StyledMetadataTab.TblFieldTitle, {
+                          smallerFont: smallerFont,
+                          children: field.title
+                        })
+                      }), Boolean(field.required) && '*', Boolean(field.hint) && /*#__PURE__*/_jsx(TooltipV2, {
+                        arrow: true,
+                        position: "top",
+                        size: "md",
+                        title: field.hint,
+                        children: /*#__PURE__*/_jsx(InfoOutline, {
+                          size: smallerFont ? 12 : 14
+                        })
+                      })]
+                    })
+                  }), !isAttachmentsField(field) && /*#__PURE__*/_jsx(StyledMetadataTab.TblFieldValue, {
+                    smallerFont: smallerFont,
+                    disableMaxHeight: field.type === MULTI_SELECT_FIELD_TYPE,
+                    children: isEditing ? /*#__PURE__*/_jsx(MetaDataField, {
+                      item: file,
+                      isShowGenerateBtn: false,
+                      field: _objectSpread(_objectSpread({}, field), {}, {
+                        metaRegionalHint: getFieldVariantHint(field)
+                      }),
+                      value: (_editedDetails$field$ = editedDetails[field.key]) !== null && _editedDetails$field$ !== void 0 ? _editedDetails$field$ : meta[field.key],
+                      onChange: onChange
+                      // TODO: Apply errors for metadata fields.
+                      ,
+                      error: metaErrors[field.key],
+                      i18n: i18n,
+                      checkUserPermissions: checkUserPermissions,
+                      metaRegionalFilters: metaRegionalFilters,
+                      metaRegionalGroups: metaRegionalGroups,
+                      iconPrimaryColor: iconPrimaryColor,
+                      size: size,
+                      tagsFieldMaxWidth: tagsFieldMaxWidth,
+                      onChangeSearchQuery: onChangeSearchQuery,
+                      isFetching: isFetchingTags,
+                      disableOnEnter: false
+                    }) : /*#__PURE__*/_jsx(FileMetadataFieldValue, {
+                      file: file,
+                      field: field,
+                      fieldType: "custom"
+                    })
+                  })]
+                }, field.uuid);
+              })
+            }, uuid)
+          }, uuid);
+        })
+      })
+    })
+  });
+};
+export default CustomMetadataSection;

package/lib/components/FileWindowPanel/FileTabs/MetadataTab/EmbeddedMetadataSection.js

@@ -0,0 +1,31 @@
+// import { TableContainer, Table, TableBody, TableCell } from '@scaleflex/ui/core'
+import { TableContainer, Table, TableBody } from '@scaleflex/ui/core';
+import StyledMetadataTab from './MetadataTab.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var EmbeddedMetadataSection = function EmbeddedMetadataSection(_ref) {
+  var file = _ref.file;
+  var _file$info = file.info,
+    _file$info2 = _file$info === void 0 ? {} : _file$info,
+    _file$info2$metadata = _file$info2.metadata,
+    embeddedMetadata = _file$info2$metadata === void 0 ? {} : _file$info2$metadata;
+  var embeddedMetadataKeys = Object.keys(embeddedMetadata);
+  return /*#__PURE__*/_jsx(TableContainer, {
+    children: /*#__PURE__*/_jsx(Table, {
+      padding: "none",
+      size: "medium",
+      children: /*#__PURE__*/_jsx(TableBody, {
+        children: embeddedMetadataKeys.map(function (key) {
+          return /*#__PURE__*/_jsxs(StyledMetadataTab.TblFieldRow, {
+            children: [/*#__PURE__*/_jsx(StyledMetadataTab.TblFieldLabel, {
+              title: key,
+              children: key
+            }), /*#__PURE__*/_jsx(StyledMetadataTab.TblFieldValue, {
+              children: embeddedMetadata[key]
+            })]
+          }, key);
+        })
+      })
+    })
+  });
+};
+export default EmbeddedMetadataSection;

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

@@ -0,0 +1,2 @@
+export var NON_CENTERED_FIELD_TYPES = ['textarea', 'tags', 'multi-select'];
+export var ATTACHMENTS_ASSETS = 'attachments-assets';

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

@@ -0,0 +1,134 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
+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 { TableContainer as SfxTableContainer, Table as SfxTable, TableRow, TableCell, Button, Accordion, TagField, Divider, Skeleton } from '@scaleflex/ui/core';
+import { FV, PC, PSH } from '@scaleflex/widget-common';
+import { NON_CENTERED_FIELD_TYPES } from './MetadataTab.constants';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
+var TabSections = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 12px 24px 0;\n  overflow-y: auto;\n\n  ", "\n\n  .SfxTagField-tagInputFieldWrapper {\n    width: 100%;\n  }\n\n  .SfxAccordion-root {\n    &:not(:last-child) {\n      margin-bottom: 12px;\n    }\n  }\n"])), function (_ref) {
+  var isEditing = _ref.isEditing;
+  return isEditing && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      padding-bottom: 40px; // 40px = some spacing for being shown the whole section with no action buttons overlapping\n  "])));
+});
+var SectionAccordion = styled(Accordion)(function (_ref2) {
+  var smallerFont = _ref2.smallerFont,
+    _ref2$theme = _ref2.theme,
+    palette = _ref2$theme.palette,
+    typography = _ref2$theme.typography;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &:last-child {\n    ", "\n  }\n\n  .SfxAccordionHeader-label {\n    ", ";\n    color: ", ";\n  }\n\n  .SfxAccordionDetails-root {\n    margin: 6px 0;\n  }\n\n  .SfxAccordionHeader-root {\n    margin-top: 6px;\n  }\n\n  .SfxAccordionHeader-icon {\n    padding-left: 6px;\n  }\n\n  svg {\n    width: ", ";\n    height: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref3) {
+    var dismissMarginBottom = _ref3.dismissMarginBottom;
+    return !dismissMarginBottom ? "\n      margin-bottom: 24px;\n    " : 'margin-bottom: 12px;';
+  }, typography.font[smallerFont ? FV.TitleH5 : FV.TitleH4], palette[PC.TextPrimary], smallerFont ? '12px' : '14px', smallerFont ? '12px' : '14px', palette[PC.IconsSecondaryHover]);
+});
+var ActionsBtns = styled.div(function (_ref4) {
+  var theme = _ref4.theme;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  box-shadow: ", ";\n  padding: 10px 24px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 12px;\n  height: 60px;\n  margin-top: auto;\n\n  ", " {\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    background: ", ";\n  }\n\n  ", " & {\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    background: ", ";\n  }\n\n  ", " & {\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    background: ", ";\n  }\n"])), theme.palette[PC.BordersSecondary], theme.shadows[PSH.FooterPopup], theme.breakpoints.down('lg'), theme.palette[PC.BackgroundStateless], theme.breakpoints.classes.md, theme.palette[PC.BackgroundStateless], theme.breakpoints.classes.sm, theme.palette[PC.BackgroundStateless]);
+});
+var ActionBtn = styled(Button)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding: 8px 32px;\n  width: 120px;\n  height: 40px;\n"])));
+var TableContainer = styled(SfxTableContainer)(function (_ref5) {
+  var dismissMarginTop = _ref5.dismissMarginTop,
+    dismissFixedLayout = _ref5.dismissFixedLayout;
+  return "\n  position: relative;\n  overflow-x: visible;\n\n  ".concat(function (_ref6) {
+    var dismissMarginTop = _ref6.dismissMarginTop;
+    return !dismissMarginTop && "\n    margin-top: 12px;\n ";
+  }, "\n\n  /* We dismiss the  fixed layout if the first row's cell has colSpan cause in that case the rows will be divided 50% each, as fixed layout gets the other cells widths from first row's cells */\n  ").concat(!dismissFixedLayout && "table {\n    table-layout: fixed;\n  }\n");
+});
+var Table = styled(SfxTable)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  table-layout: auto;\n"])));
+var TblFieldRow = styled(TableRow)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  word-break: break-word;\n  vertical-align: baseline;\n\n  ", " {\n    display: block;\n  }\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.breakpoints.down('lg');
+});
+var TblFieldsHead = styled(TableRow)(function (_ref8) {
+  var _ref8$theme = _ref8.theme,
+    palette = _ref8$theme.palette,
+    typography = _ref8$theme.typography,
+    paddingTop = _ref8.paddingTop;
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  word-break: break-word;\n  color: ", ";\n\n  td {\n    border: none;\n    height: 32px;\n    padding-top: ", "px;\n    ", ";\n  }\n\n  &:first-child td {\n    padding-top: 0;\n  }\n"])), palette[PC.TextPrimary], paddingTop, typography.font[FV.TitleH6]);
+});
+var TblFieldLabel = styled(TableCell)(function (_ref9) {
+  var theme = _ref9.theme,
+    avoidSmallWidth = _ref9.smallerFont,
+    fieldType = _ref9.fieldType;
+  return "\n  ".concat(theme.typography.font[FV.LabelMedium], ";\n  color: ").concat(theme.palette[PC.TextSecondary], ";\n  padding: ").concat(avoidSmallWidth ? '6px 0' : '12px 0', ";\n  border: none;\n  width: 140px;\n  min-width: 140px;\n  height: initial;\n\n  .SfxEllipsed-root {\n    width: fit-content;\n  }\n\n  p {\n    margin: 0;\n    padding: 0;\n  }\n\n  ").concat(!NON_CENTERED_FIELD_TYPES.includes(fieldType) && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    vertical-align: middle;\n  "]))), "\n");
+});
+var TblFieldLabelContent = styled.div(function (_ref10) {
+  var withTopMargin = _ref10.withTopMargin,
+    palette = _ref10.theme.palette;
+  return "\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-top: ".concat(withTopMargin ? '9px' : '0', ";\n\n  svg {\n    flex-shrink: 0;\n    color: ").concat(palette[PC.IconsSecondary], ";\n  }\n");
+});
+var TblFieldValue = styled(TableCell)(function (_ref11) {
+  var smallerFont = _ref11.smallerFont,
+    disableMaxHeight = _ref11.disableMaxHeight,
+    theme = _ref11.theme;
+  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", ";\n  border: none;\n  padding: ", ";\n  height: initial;\n  vertical-align: middle;\n  position: relative;\n  width: 100%;\n  max-width: 300px;\n  width: 100%;\n\n  .SfxTagField-tagInputFieldWrapper {\n    /* TODO: This should be done in sfx/ui */\n    width: 100%;\n  }\n\n  .SfxDate-picker-root {\n    width: 100%;\n  }\n\n  ", " {\n    display: block;\n    padding: ", ";\n    max-width: 366px;\n  }\n\n  ", "\n"])), theme.typography.font[smallerFont ? FV.TextMedium : FV.TextLarge], smallerFont ? '6px 0 6px 12px' : '8px 0 8px 16px', theme.breakpoints.down('lg'), smallerFont ? '6px 0 6px 12px' : '8px 0 8px 16px', disableMaxHeight && "\n    .filerobot-common-FormControl > div {\n      max-height: initial;\n      min-height: initial;\n    }\n  ");
+});
+var TblFieldTitle = styled.p(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin: ", ";\n  ", ";\n"])), function (_ref12) {
+  var smallerFont = _ref12.smallerFont;
+  return smallerFont ? '6px 0' : '12px 0';
+}, function (_ref13) {
+  var theme = _ref13.theme,
+    smallerFont = _ref13.smallerFont;
+  return theme.typography.font[smallerFont ? FV.LabelSmall : FV.LabelMedium];
+});
+var TagsField = styled(TagField)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  max-height: 114px;\n  overflow-y: auto;\n"])));
+var ValueWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  position: relative;\n  color: ", ";\n  ", "\n  ", ";\n"])), function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.palette[PC.IconsPrimary];
+}, function (_ref15) {
+  var marginRight = _ref15.marginRight;
+  return marginRight && "margin-right: ".concat(marginRight, ";");
+}, function (_ref16) {
+  var theme = _ref16.theme,
+    smallerFont = _ref16.smallerFont;
+  return theme.typography.font[smallerFont ? FV.TextMedium : FV.TextLarge];
+});
+var NoValueWrapper = styled.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref17) {
+  var theme = _ref17.theme;
+  return theme.palette[PC.TextPlaceholder];
+});
+var SkeletonWrapper = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  padding-top: 18px;\n"])));
+var SkeletonRow = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: 18px;\n"])));
+var SkeletonContainer = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  margin: 0 24px;\n"])));
+var SkeletonLeftSide = styled(Skeleton)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  margin-right: 24px;\n"])));
+var SkeletonDivider = styled(Divider)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  margin: 20px 0px;\n"])));
+var DetailsSidebarNavigation = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding: 18px 24px 0;\n  align-items: center;\n  align-self: stretch;\n"])));
+var DetailsSidebarNavigationBtn = styled.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  color: ", ";\n  display: flex;\n  ", ";\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  padding: 10px;\n  border-bottom: 2px solid ", ";\n"])), function (_ref18) {
+  var theme = _ref18.theme,
+    isChecked = _ref18.isChecked,
+    $disabled = _ref18.$disabled;
+  return $disabled ? theme.palette[PC.TextPlaceholder] : isChecked ? theme.palette[PC.AccentStateless] : theme.palette[PC.TextPrimary];
+}, function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.typography.font[FV.LabelLarge];
+}, function (_ref20) {
+  var theme = _ref20.theme,
+    isChecked = _ref20.isChecked;
+  return isChecked ? theme.palette[PC.AccentStateless] : theme.palette[PC.BordersSecondary];
+});
+var EditDetailsBtnWrapper = styled.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n"])));
+var Styled = {
+  Wrapper: Wrapper,
+  TabSections: TabSections,
+  SectionAccordion: SectionAccordion,
+  Table: Table,
+  TableContainer: TableContainer,
+  TblFieldsHead: TblFieldsHead,
+  TblFieldRow: TblFieldRow,
+  TblFieldLabel: TblFieldLabel,
+  TblFieldLabelContent: TblFieldLabelContent,
+  TblFieldValue: TblFieldValue,
+  TblFieldTitle: TblFieldTitle,
+  TagsField: TagsField,
+  ActionsBtns: ActionsBtns,
+  ActionBtn: ActionBtn,
+  ValueWrapper: ValueWrapper,
+  NoValueWrapper: NoValueWrapper,
+  SkeletonDivider: SkeletonDivider,
+  SkeletonWrapper: SkeletonWrapper,
+  SkeletonContainer: SkeletonContainer,
+  SkeletonRow: SkeletonRow,
+  SkeletonLeftSide: SkeletonLeftSide,
+  DetailsSidebarNavigationBtn: DetailsSidebarNavigationBtn,
+  DetailsSidebarNavigation: DetailsSidebarNavigation,
+  EditDetailsBtnWrapper: EditDetailsBtnWrapper
+};
+export default Styled;

package/lib/components/FileWindowPanel/FileTabs/MetadataTab/MetadataTabSkeleton.js

@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+import { Skeleton } from '@scaleflex/ui/core';
+import { useTheme, useMediaQuery } from '@scaleflex/ui/theme/hooks';
+import getRandomNumber from '@scaleflex/widget-utils/lib/getRandomNumber';
+import StyledMetadataTab from './MetadataTab.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var MetadataTabSkeleton = function MetadataTabSkeleton() {
+  var theme = useTheme();
+  var downLg = useMediaQuery(theme.breakpoints.down('lg'));
+  var minSkeletonWidth = downLg ? 250 : 100;
+  var maxSkeletonWidth = downLg ? 450 : 250;
+  var randomWidthNumber = useMemo(function () {
+    return getRandomNumber(minSkeletonWidth, maxSkeletonWidth);
+  }, [minSkeletonWidth, maxSkeletonWidth]);
+  return /*#__PURE__*/_jsxs(StyledMetadataTab.SkeletonWrapper, {
+    children: [/*#__PURE__*/_jsxs(StyledMetadataTab.SkeletonContainer, {
+      children: [/*#__PURE__*/_jsx(StyledMetadataTab.SkeletonRow, {
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          width: 140,
+          height: 24
+        })
+      }), Array(8).fill().map(function (_, index) {
+        return /*#__PURE__*/_jsxs(StyledMetadataTab.SkeletonRow, {
+          children: [/*#__PURE__*/_jsx(StyledMetadataTab.SkeletonLeftSide, {
+            width: 140,
+            height: 24
+          }), /*#__PURE__*/_jsx(Skeleton, {
+            width: randomWidthNumber,
+            height: 24
+          })]
+        }, index);
+      })]
+    }), /*#__PURE__*/_jsx(StyledMetadataTab.SkeletonDivider, {}), /*#__PURE__*/_jsxs(StyledMetadataTab.SkeletonContainer, {
+      children: [/*#__PURE__*/_jsx(StyledMetadataTab.SkeletonRow, {
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          width: 140,
+          height: 24
+        })
+      }), Array(3).fill().map(function (_, index) {
+        return /*#__PURE__*/_jsxs(StyledMetadataTab.SkeletonRow, {
+          children: [/*#__PURE__*/_jsx(StyledMetadataTab.SkeletonLeftSide, {
+            width: 140,
+            height: 24
+          }), /*#__PURE__*/_jsx(Skeleton, {
+            width: randomWidthNumber,
+            height: 24
+          })]
+        }, index);
+      })]
+    }), /*#__PURE__*/_jsx(StyledMetadataTab.SkeletonDivider, {}), /*#__PURE__*/_jsxs(StyledMetadataTab.SkeletonContainer, {
+      children: [/*#__PURE__*/_jsx(StyledMetadataTab.SkeletonRow, {
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          width: 140,
+          height: 24
+        })
+      }), Array(4).fill().map(function (_, index) {
+        return /*#__PURE__*/_jsxs(StyledMetadataTab.SkeletonRow, {
+          children: [/*#__PURE__*/_jsx(StyledMetadataTab.SkeletonLeftSide, {
+            width: 140,
+            height: 24
+          }), /*#__PURE__*/_jsx(Skeleton, {
+            width: randomWidthNumber,
+            height: 24
+          })]
+        }, index);
+      })]
+    })]
+  });
+};
+export default MetadataTabSkeleton;