@scaleflex/widget-explorer 4.4.0 → 4.5.0

package/lib/components/BulkEditPanel/BulkEditPanel.styled.js

@@ -0,0 +1,62 @@
+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 { PC, FV } from '@scaleflex/widget-common';
+import { Button, IconButton } from '@scaleflex/ui/core';
+import styled, { css } from 'styled-components';
+var PanelWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  position: relative;\n"])));
+var PanelHeader = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid;\n  border-color: ", ";\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.BordersSecondary];
+});
+var PanelTitle = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0;\n  ", ";\n  color: ", ";\n"])), function (_ref2) {
+  var typography = _ref2.theme.typography;
+  return typography.font[FV.LabelLargeUp];
+}, function (_ref3) {
+  var palette = _ref3.theme.palette;
+  return palette[PC.TextPrimary];
+});
+var PanelBody = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  //65px for the modal header, 96px for modal footer\n  height: ", ";\n  display: flex;\n  width: 100%;\n\n  .SfxDrawer-persistent {\n    width: 302px;\n    transition: all 150ms ease-in-out;\n    position: static;\n    top: 0;\n    left: ", ";\n    z-index: 120;\n    height: 100%;\n\n    ", "\n  }\n"])), function (_ref4) {
+  var $isOnUpload = _ref4.$isOnUpload;
+  return $isOnUpload ? 'calc(100% - 64px - 96px)' : 'calc(100% - 64px)';
+}, function (_ref5) {
+  var isOpen = _ref5.isOpen;
+  return isOpen ? 0 : '-305px';
+}, function (_ref6) {
+  var breakpoints = _ref6.theme.breakpoints;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      ", " & {\n        position: absolute;\n      }\n\n      ", " & {\n        position: absolute;\n      }\n\n      ", " & {\n        position: absolute;\n      }\n\n      ", " {\n        position: absolute;\n      }\n    "])), breakpoints.classes.lg, breakpoints.classes.md, breakpoints.classes.sm, breakpoints.down('xl'));
+});
+var ModalFooter = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 96px;\n  padding: 24px;\n  border-top: 1px solid;\n  border-color: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  column-gap: 12px;\n"])), function (_ref7) {
+  var palette = _ref7.theme.palette;
+  return palette[PC.BordersSecondary];
+});
+var BurgerButton = styled(IconButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  max-height: 40px;\n\n  svg path {\n    fill: ", ";\n  }\n\n  ", "\n\n"])), function (_ref8) {
+  var palette = _ref8.theme.palette;
+  return palette[PC.TextSecondary];
+}, function (_ref9) {
+  var breakpoints = _ref9.theme.breakpoints;
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      visibility: hidden;\n      opacity: 0;\n      pointer-events: none;\n\n    ", " {\n      visibility: visible;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    ", " & {\n      visibility: visible;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    ", " & {\n      visibility: visible;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    ", " & {\n      visibility: visible;\n      opacity: 1;\n      pointer-events: all;\n    }\n  "])), breakpoints.down('xl'), breakpoints.classes.lg, breakpoints.classes.md, breakpoints.classes.sm);
+});
+var CloseButton = styled(IconButton)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\n"])));
+var Overlay = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: absolute;\n  display: none;\n  background: ", ";\n  width: 100%;\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 110;\n  transition: opacity 100ms ease-out, visibility 100ms ease-out;\n\n  ", "\n\n  ", "\n"])), function (_ref10) {
+  var palette = _ref10.theme.palette;
+  return palette[PC.Extra_0_3_Overlay];
+}, function (_ref11) {
+  var isOpen = _ref11.isOpen;
+  return isOpen ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    opacity: 1;\n    visibility: visible;\n  "]))) : css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    opacity: 0;\n    visibility: hidden;\n  "])));
+}, function (_ref12) {
+  var breakpoints = _ref12.theme.breakpoints;
+  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    ", " {\n        display: block;\n      }\n\n      ", " & {\n        display: block;\n      }\n\n      ", " & {\n        display: block;\n      }\n\n      ", " & {\n        display: block;\n      }\n  "])), breakpoints.down('xl'), breakpoints.classes.lg, breakpoints.classes.md, breakpoints.classes.sm);
+});
+var FooterButton = styled(Button)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  &:nth-of-type(2) {\n    margin-left: auto;\n  }\n"])));
+var Styled = {
+  BurgerButton: BurgerButton,
+  PanelWrapper: PanelWrapper,
+  PanelHeader: PanelHeader,
+  PanelTitle: PanelTitle,
+  PanelBody: PanelBody,
+  ModalFooter: ModalFooter,
+  CloseButton: CloseButton,
+  Overlay: Overlay,
+  FooterButton: FooterButton
+};
+export default Styled;

package/lib/components/BulkEditPanel/BulkEditPanel.utils.js

@@ -0,0 +1,55 @@
+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 _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 _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 { BULK_EDIT_GENERAL_IDS, BULK_EDIT_METADATA_ID } from '@scaleflex/widget-utils/lib/constants';
+import { generateTabI18nKey } from './components/Tabs/tabs.utils';
+var generateModalTitleI18nKey = function generateModalTitleI18nKey(isOnUpload, activeSidebarItem) {
+  if (isOnUpload) {
+    return generateTabI18nKey('metadataFillTitle');
+  }
+  if (activeSidebarItem.name === BULK_EDIT_METADATA_ID) {
+    return generateTabI18nKey('metadataTitle');
+  }
+  return generateTabI18nKey('title');
+};
+var getMetadataFirstFieldAndGroup = function getMetadataFirstFieldAndGroup() {
+  var metadataGroups = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var _metadataGroups = _slicedToArray(metadataGroups, 1),
+    _metadataGroups$ = _metadataGroups[0],
+    firstGroup = _metadataGroups$ === void 0 ? {} : _metadataGroups$;
+  var _ref = firstGroup.fields || [],
+    _ref2 = _slicedToArray(_ref, 1),
+    firstField = _ref2[0];
+  return {
+    field: firstField,
+    group: firstGroup
+  };
+};
+var trimmedLowerCase = function trimmedLowerCase() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return value.toLowerCase().trim();
+};
+var getDefaultSidebarTab = function getDefaultSidebarTab(_ref3) {
+  var defaultConfiguredTab = _ref3.defaultConfiguredTab,
+    isOnUpload = _ref3.isOnUpload;
+  if (_typeof(defaultConfiguredTab) === 'object' && defaultConfiguredTab) {
+    return _objectSpread(_objectSpread({}, defaultConfiguredTab), {}, {
+      name: BULK_EDIT_METADATA_ID
+    });
+  }
+  var fallbackDefaultTab = typeof defaultConfiguredTab === 'string' && defaultConfiguredTab || (isOnUpload ? BULK_EDIT_GENERAL_IDS.TITLE : BULK_EDIT_GENERAL_IDS.TAGS);
+  return {
+    name: fallbackDefaultTab,
+    key: fallbackDefaultTab.toLowerCase()
+  };
+};
+export { generateModalTitleI18nKey, getMetadataFirstFieldAndGroup, trimmedLowerCase, getDefaultSidebarTab };

package/lib/components/BulkEditPanel/components/AssetsList/AssetsList.constants.js

@@ -0,0 +1,29 @@
+import { generateTabI18nKey } from '../Tabs/tabs.utils';
+var TABLE_HEADER_IDS = {
+  NAME: 'name',
+  SIZE: 'size'
+};
+var SORT_BY_OPTIONS = {
+  NAME: 'name'
+};
+var STATIC_TABLE_HEADER = [{
+  key: TABLE_HEADER_IDS.NAME,
+  labelI18nKey: generateTabI18nKey('nameTableCell'),
+  width: '25%',
+  withCheckbox: true,
+  sortBy: SORT_BY_OPTIONS.NAME
+}, {
+  key: TABLE_HEADER_IDS.SIZE,
+  labelI18nKey: generateTabI18nKey('sizeTableCell'),
+  width: '20%'
+}];
+var SORT_ORDERS = {
+  ASC: 'asc',
+  DSC: 'dsc'
+};
+var PREIVEW_MODAL_STATUS = {
+  OPEN: 'open',
+  KEEP: 'keep',
+  CLOSE: 'close'
+};
+export { STATIC_TABLE_HEADER, SORT_ORDERS, SORT_BY_OPTIONS, PREIVEW_MODAL_STATUS };

package/lib/components/BulkEditPanel/components/AssetsList/AssetsList.js

@@ -0,0 +1,148 @@
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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 { useMemo, useState, useCallback, useEffect } from 'react';
+import { Table, TableContainer } from '@scaleflex/ui/core';
+import Styled from './AssetsList.styled';
+import getActiveColumn from './Columns/getActiveColumn';
+import TableBody from './TableBody';
+import TableHeader from './TableHeader';
+import { SORT_ORDERS } from './AssetsList.constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var AssetsList = function AssetsList(_ref) {
+  var _selectedAssets$tabId;
+  var lastCellLabel = _ref.lastCellLabel,
+    tabId = _ref.tabId,
+    activeSidebarItem = _ref.activeSidebarItem,
+    tagsDetails = _ref.tagsDetails,
+    assets = _ref.assets,
+    isOnUpload = _ref.isOnUpload,
+    activeMetadataValue = _ref.activeMetadataValue,
+    metadataEmptyAssetsValues = _ref.metadataEmptyAssetsValues,
+    fetchedFiles = _ref.fetchedFiles,
+    setFetchedFiles = _ref.setFetchedFiles,
+    textFieldsDetails = _ref.textFieldsDetails,
+    noImgTransformations = _ref.noImgTransformations,
+    setTextFieldsDetails = _ref.setTextFieldsDetails,
+    tabSelectedAssets = _ref.tabSelectedAssets,
+    changedMetadataFields = _ref.changedMetadataFields,
+    selectedAssets = _ref.selectedAssets,
+    setSelectedAssets = _ref.setSelectedAssets,
+    fileCustomMetadataGroups = _ref.fileCustomMetadataGroups;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    sortOrder = _useState2[0],
+    setSortOrder = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sortBy = _useState4[0],
+    setSortBy = _useState4[1];
+  var currentSelectionByUuid = useMemo(function () {
+    return assets.map(function (_ref2) {
+      var uuid = _ref2.uuid;
+      return uuid;
+    });
+  }, [assets, tabId, selectedAssets]);
+  var isAllSelected = currentSelectionByUuid.length === ((_selectedAssets$tabId = selectedAssets[tabId]) === null || _selectedAssets$tabId === void 0 ? void 0 : _selectedAssets$tabId.length);
+  var activeColumn = getActiveColumn(activeSidebarItem);
+  var ActiveColumnElement = activeColumn === null || activeColumn === void 0 ? void 0 : activeColumn.Component;
+  var handleSelectAsset = function handleSelectAsset(event, file) {
+    var _nextSelectedAssets$t;
+    var checked = event.target.checked;
+    var nextSelectedAssets = _objectSpread({}, selectedAssets);
+    nextSelectedAssets[tabId] = (_nextSelectedAssets$t = nextSelectedAssets[tabId]) !== null && _nextSelectedAssets$t !== void 0 ? _nextSelectedAssets$t : [];
+    if (checked) {
+      nextSelectedAssets[tabId].push(file.uuid);
+    } else {
+      var indexOfAsset = nextSelectedAssets[tabId].indexOf(file.uuid);
+      nextSelectedAssets[tabId].splice(indexOfAsset, 1);
+    }
+    setSelectedAssets(nextSelectedAssets);
+  };
+  var handleToggleSelectAll = useCallback(function (event) {
+    var _nextSelectedAssets$t2;
+    var checked = event.target.checked;
+    var nextSelectedAssets = _objectSpread({}, selectedAssets);
+    nextSelectedAssets[tabId] = (_nextSelectedAssets$t2 = nextSelectedAssets[tabId]) !== null && _nextSelectedAssets$t2 !== void 0 ? _nextSelectedAssets$t2 : [];
+    if (checked) {
+      nextSelectedAssets[tabId] = currentSelectionByUuid;
+    } else {
+      nextSelectedAssets[tabId] = [];
+    }
+    setSelectedAssets(nextSelectedAssets);
+  }, [selectedAssets, currentSelectionByUuid, tabId]);
+  var handleSort = useCallback(function (nextSortBy) {
+    var nextSortOrder = sortOrder === SORT_ORDERS.DSC || sortBy !== nextSortBy ? SORT_ORDERS.ASC : SORT_ORDERS.DSC;
+    setSortOrder(nextSortOrder);
+    setSortBy(nextSortBy);
+  }, [assets, sortOrder, sortBy]);
+  var sortedFiles = useMemo(function () {
+    var nextFiles = _toConsumableArray(assets);
+    if (!sortBy || !sortOrder) return nextFiles;
+    nextFiles.sort(function (a, b) {
+      if (sortOrder === SORT_ORDERS.DSC) {
+        return a[sortBy] < b[sortBy] ? -1 : 1;
+      }
+      if (sortOrder === SORT_ORDERS.ASC) {
+        return a[sortBy] < b[sortBy] ? 1 : -1;
+      }
+      return 0;
+    });
+    return nextFiles;
+  }, [assets, sortOrder, sortBy]);
+  useEffect(function () {
+    if (tabSelectedAssets.length === 0) {
+      handleToggleSelectAll({
+        target: {
+          checked: true
+        }
+      });
+    }
+  }, [tabId]);
+  return /*#__PURE__*/_jsx(Styled.AssetsListWrapper, {
+    children: /*#__PURE__*/_jsx(TableContainer, {
+      children: /*#__PURE__*/_jsxs(Table, {
+        children: [/*#__PURE__*/_jsx(TableHeader, {
+          isAllSelected: isAllSelected,
+          tabSelectedAssets: tabSelectedAssets,
+          lastCellLabel: lastCellLabel,
+          sortBy: sortBy,
+          sortOrder: sortOrder,
+          handleToggleSelectAll: handleToggleSelectAll,
+          handleSort: handleSort
+        }), /*#__PURE__*/_jsx(TableBody, {
+          activeMetadataValue: activeMetadataValue,
+          tabSelectedAssets: tabSelectedAssets,
+          activeSidebarItem: activeSidebarItem,
+          changedMetadataFields: changedMetadataFields,
+          sortedFiles: sortedFiles,
+          tagsDetails: tagsDetails,
+          isOnUpload: isOnUpload,
+          fileCustomMetadataGroups: fileCustomMetadataGroups,
+          metadataEmptyAssetsValues: metadataEmptyAssetsValues,
+          fetchedFiles: fetchedFiles,
+          setFetchedFiles: setFetchedFiles,
+          textFieldsDetails: textFieldsDetails,
+          handleSelectAsset: handleSelectAsset,
+          ActiveColumnElement: ActiveColumnElement,
+          setTextFieldsDetails: setTextFieldsDetails,
+          noImgTransformations: noImgTransformations
+        })]
+      })
+    })
+  });
+};
+export default AssetsList;

package/lib/components/BulkEditPanel/components/AssetsList/AssetsList.styled.js

@@ -0,0 +1,81 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { FV, PC } from '@scaleflex/widget-common';
+import { ArrowDown } from '@scaleflex/icons';
+import { CheckBox, TableBody as SfxTableBody, TableCell as SfxTableCell, TableRow as SfxTableRow } from '@scaleflex/ui/core';
+import styled, { css } from 'styled-components';
+var AssetsListWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  height: 100%;\n\n  .SfxTableContainer-root {\n    overflow: auto;\n    height: 100%;\n  }\n\n  .SfxTableHead-root .SfxTableCell-root {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    background-color: ", ";\n  }\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.BackgroundStateless];
+});
+var TableBody = styled(SfxTableBody)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .SfxTableRow-root:last-child td {\n    border-bottom: 0;\n  }\n"])));
+var TableCell = styled(SfxTableCell)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .SfxTagField-tagInputFieldWrapper,\n  .SfxTextarea-root {\n    width: 100%;\n    height: 100px;\n  }\n"])));
+var ActionCellWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  .filerobot-common-ItemIcon {\n    height: 52px;\n    max-width: 72px;\n    max-height: 52px;\n    flex-shrink: 0;\n  }\n\n  .filerobot-common-ItemIcon-listIcon {\n    max-height: none;\n  }\n"])));
+var Checkbox = styled(CheckBox)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-right: 20px;\n"])));
+var TitleWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  column-gap: 8px;\n  cursor: pointer;\n"])));
+var TableRow = styled(SfxTableRow)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  transition: all 150ms ease-out;\n\n  &:hover{\n    background-color: ", ";\n\n    .filerobot-bulkEdit-edit-button-wrapper {\n      opacity: 1;\n      visibility: visible;\n      pointer-events: all;\n    }\n\n    .SfxTableCell-root {\n      border-bottom: 1px solid ", " !important;\n    }\n  }\n"])), function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return palette[PC.BackgroundHover];
+}, function (_ref3) {
+  var palette = _ref3.theme.palette;
+  return palette[PC.BordersSecondary];
+});
+var Title = styled.p(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: 0;\n  max-width: 150px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  ", "\n"])), function (_ref4) {
+  var $sortable = _ref4.$sortable,
+    $active = _ref4.$active,
+    palette = _ref4.theme.palette;
+  return $sortable && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    transition: all 150ms ease-out;\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n  "])), $active ? palette[PC.AccentPrimaryActive] : palette[PC.TextSecondary], function (_ref5) {
+    var palette = _ref5.theme.palette;
+    return palette[PC.AccentPrimaryActive];
+  });
+});
+var SortArrow = styled(ArrowDown)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  transition: all 150ms ease-out;\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n\n  transform: ", ";\n\n  ", "\n"])), function (_ref6) {
+  var palette = _ref6.theme.palette;
+  return palette[PC.IconsPlaceholder];
+}, function (_ref7) {
+  var palette = _ref7.theme.palette;
+  return palette[PC.AccentPrimaryActive];
+}, function (_ref8) {
+  var $fliped = _ref8.$fliped;
+  return $fliped ? 'rotate(0)' : 'rotate(180deg)';
+}, function (_ref9) {
+  var $active = _ref9.$active;
+  return $active && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (_ref10) {
+    var palette = _ref10.theme.palette;
+    return palette[PC.AccentPrimaryActive];
+  });
+});
+var FileName = styled.p(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin: 0;\n  margin-left: 20px;\n  max-width: 250px;\n\n  ", ";\n  color: ", ";\n"])), function (_ref11) {
+  var typography = _ref11.theme.typography;
+  return typography.font[FV.LabelMedium];
+}, function (_ref12) {
+  var palette = _ref12.theme.palette;
+  return palette[PC.TextPrimary];
+});
+var FileInfoWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  label,\n  span {\n    ", ";\n    color: ", ";\n    cursor: default;\n  }\n"])), function (_ref13) {
+  var typography = _ref13.theme.typography;
+  return typography.font[FV.InputMd];
+}, function (_ref14) {
+  var palette = _ref14.theme.palette;
+  return palette[PC.IconsSecondary];
+});
+var CellLabel = styled.p(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 90%;\n"])));
+var ImagePreviewWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 70px;\n  height: 52px;\n  border: 1px solid rgba(204,214,222,1);\n  border-radius: 2px;\n"])));
+var TagFieldWrapper = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  .SfxTagField-tagFieldBottom {\n    display: none !important;\n  }\n"])));
+var Styled = {
+  AssetsListWrapper: AssetsListWrapper,
+  TagFieldWrapper: TagFieldWrapper,
+  TableCell: TableCell,
+  SortArrow: SortArrow,
+  TableBody: TableBody,
+  ActionCellWrapper: ActionCellWrapper,
+  Title: Title,
+  Checkbox: Checkbox,
+  FileName: FileName,
+  FileInfoWrapper: FileInfoWrapper,
+  CellLabel: CellLabel,
+  TitleWrapper: TitleWrapper,
+  ImagePreviewWrapper: ImagePreviewWrapper,
+  TableRow: TableRow
+};
+export default Styled;

package/lib/components/BulkEditPanel/components/AssetsList/Columns/Columns.styled.js

@@ -0,0 +1,99 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { FV, PC } from '@scaleflex/widget-common';
+import { IconButton, InputGroup } from '@scaleflex/ui/core';
+import styled, { css } from 'styled-components';
+var ExtraTagsWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  transition: min-height 150ms cubic-bezier(0.075, 0.82, 0.165, 1);\n  min-height: ", ";\n"])), function (_ref) {
+  var $isOpen = _ref.$isOpen;
+  return $isOpen ? '120px' : '40px';
+});
+var TagsWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px 4px;\n  min-width: 200px;\n  position: relative;\n  min-height: ", ";\n"])), function (_ref2) {
+  var $showMinHeight = _ref2.$showMinHeight;
+  return $showMinHeight ? '40px' : 0;
+});
+var ExistTag = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0;\n  border-radius: 2px;\n  padding: 0 6px;\n  transition: all 150ms ease-out;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 250px;\n\n  ", "\n"])), function (_ref3) {
+  var hasNewValue = _ref3.hasNewValue,
+    remove = _ref3.remove,
+    replace = _ref3.replace,
+    _ref3$theme = _ref3.theme,
+    typography = _ref3$theme.typography,
+    palette = _ref3$theme.palette;
+  return hasNewValue && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", ";\n\n    ", "\n  "])), typography.font[FV.LabelLarge], (remove || replace) && "\n      color: ".concat(palette[remove ? PC.Error : PC.BordersButton], ";\n      background-color: ").concat(palette[remove ? PC.BackgroundRed : PC.BackgroundActive], ";\n    "));
+});
+var ExistTagChip = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0;\n  border-radius: 4px;\n  padding: 5px 12px;\n  transition: all 150ms ease-out;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 150px;\n  border: 1px solid;\n  border-color: ", ";\n  background-color: ", ";\n  color: ", ";\n  ", ";\n"])), function (_ref4) {
+  var palette = _ref4.theme.palette;
+  return palette[PC.BorderPrimaryStateless];
+}, function (_ref5) {
+  var palette = _ref5.theme.palette;
+  return palette[PC.BackgroundActive];
+}, function (_ref6) {
+  var palette = _ref6.theme.palette;
+  return palette[PC.TextPrimary];
+}, function (_ref7) {
+  var typography = _ref7.theme.typography;
+  return typography.font[FV.LabelMedium];
+});
+var AddedTagChip = styled(ExistTagChip)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-color: ", ";\n  color: ", ";\n"])), function (_ref8) {
+  var palette = _ref8.theme.palette;
+  return palette[PC.BackgroundGreen];
+}, function (_ref9) {
+  var palette = _ref9.theme.palette;
+  return palette[PC.BackgroundGreenMedium];
+}, function (_ref10) {
+  var palette = _ref10.theme.palette;
+  return palette[PC.Green];
+});
+var RemovedTagChip = styled(ExistTagChip)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-color: ", ";\n  color: ", ";\n"])), function (_ref11) {
+  var palette = _ref11.theme.palette;
+  return palette[PC.BackgroundRed];
+}, function (_ref12) {
+  var palette = _ref12.theme.palette;
+  return palette[PC.Error_0_28_Opacity];
+}, function (_ref13) {
+  var palette = _ref13.theme.palette;
+  return palette[PC.Error];
+});
+var AddedTag = styled.p(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0 6px;\n  border-radius: 2px;\n  transition: all 150ms ease-out;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 250px;\n\n  ", ";\n  color: ", ";\n  background-color: ", ";\n"])), function (_ref14) {
+  var typography = _ref14.theme.typography;
+  return typography.font[FV.LabelLarge];
+}, function (_ref15) {
+  var palette = _ref15.theme.palette;
+  return palette[PC.TextPrimary];
+}, function (_ref16) {
+  var palette = _ref16.theme.palette;
+  return palette[PC.BackgroundGreenMedium];
+});
+var EmptyValuePlaceholder = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n"])), function (_ref17) {
+  var palette = _ref17.theme.palette;
+  return palette[PC.TextPlaceholder];
+}, function (_ref18) {
+  var typography = _ref18.theme.typography;
+  return typography.font[FV.LabelMedium];
+});
+var FloatyButtonWrapper = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n  background: linear-gradient(270deg, #F9FBFC 1.56%, #F9FBFC 52.4%, rgba(249, 251, 252, 0.53) 76.04%, rgba(249, 251, 252, 0) 100%);\n  width: 168px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  visibility: hidden;\n  opacity: 0;\n  pointer-events: none;\n  transition: all 100ms ease-out;\n"])));
+var FloatyEditButton = styled(IconButton)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n\n  .filerobot-common-Spinner {\n    margin: 0;\n  }\n"])), function (_ref19) {
+  var $loading = _ref19.$loading;
+  return $loading && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    pointer-events: none;\n  "])));
+});
+var FieldWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  row-gap: 12px;\n\n  .SfxDate-picker-root {\n    width: 100%;\n  }\n\n  .SfxTagField-tagFieldBottom {\n    display: none;\n  }\n\n  .SfxTagField-listWrapper {\n    max-height: 56px;\n    min-height: auto;\n    overflow: auto;\n  }\n"])));
+var FieldActionsWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  column-gap: 12px;\n\n  ", "\n"])), function (_ref20) {
+  var $disableCross = _ref20.$disableCross;
+  return $disableCross && css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    .SfxIconButton-root {\n      pointer-events: none;\n    }\n  "])));
+});
+var TextInput = styled(InputGroup)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+var Styled = {
+  TagsWrapper: TagsWrapper,
+  ExistTag: ExistTag,
+  AddedTag: AddedTag,
+  ExistTagChip: ExistTagChip,
+  AddedTagChip: AddedTagChip,
+  RemovedTagChip: RemovedTagChip,
+  EmptyValuePlaceholder: EmptyValuePlaceholder,
+  FloatyButtonWrapper: FloatyButtonWrapper,
+  FloatyEditButton: FloatyEditButton,
+  FieldWrapper: FieldWrapper,
+  FieldActionsWrapper: FieldActionsWrapper,
+  ExtraTagsWrapper: ExtraTagsWrapper,
+  TextInput: TextInput
+};
+export default Styled;