@scaleflex/widget-common 0.0.1

package/lib/MetaData/FilterMetadataFields.js

@@ -0,0 +1,115 @@
+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); }
+import { MetaDataFieldNumericType, MetaDataFieldSelectType, MetaDataFieldTagsType, MetaDataFieldTextareaType, MetaDataFieldTextType, MetaDataFieldBooleanType } from '@scaleflex/widget-common/lib/MetaData/MetaDataFieldTypes';
+import { MetaDataFieldDateType, MetadataFieldUriType } from './MetaDataFieldTypes';
+import Styled from './FilterMetadataFields.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var BOOLEAN_OPTIONS = [{
+  label: 'true',
+  internal_unique_value: 'true',
+  i18nKey: 'filterMetadataBooleanFieldTrueLabel'
+}, {
+  label: 'false',
+  internal_unique_value: 'false',
+  i18nKey: 'filterMetadataBooleanFieldFalseLabel'
+}];
+var FilterMetaDataField = function FilterMetaDataField(_ref) {
+  var _ref$onChange = _ref.onChange,
+    _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    inputRef = _ref.inputRef,
+    field = _ref.field,
+    isMetadataFilter = _ref.isMetadataFilter,
+    _ref$considerAutoHeig = _ref.considerAutoHeight,
+    considerAutoHeight = _ref$considerAutoHeig === void 0 ? false : _ref$considerAutoHeig,
+    _ref$value = _ref.value,
+    currentValue = _ref$value === void 0 ? '' : _ref$value,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {
+      width: '100%'
+    } : _ref$style,
+    _ref$extraFieldProps = _ref.extraFieldProps,
+    extraFieldProps = _ref$extraFieldProps === void 0 ? {} : _ref$extraFieldProps,
+    numberFormatLocale = _ref.numberFormatLocale,
+    i18n = _ref.i18n,
+    isFetching = _ref.isFetching,
+    onChangeSearchQuery = _ref.onChangeSearchQuery;
+  var type = field.type,
+    fieldValue = field.value;
+  var getFieldValue = function getFieldValue() {
+    return fieldValue !== null && fieldValue !== void 0 ? fieldValue : currentValue;
+  };
+  var value = getFieldValue();
+  var fieldProps = _objectSpread({
+    onChange: _onChange,
+    value: value,
+    field: field,
+    i18n: i18n,
+    size: 'sm',
+    style: style,
+    placeholder: i18n('filterMetadataSelectValue'),
+    inputRef: inputRef,
+    considerMaxWidth: false,
+    considerAutoHeight: considerAutoHeight,
+    numberFormatLocale: numberFormatLocale
+  }, extraFieldProps);
+  switch (type) {
+    case 'text':
+      return /*#__PURE__*/_jsx(MetaDataFieldTextType, _objectSpread(_objectSpread({}, fieldProps), {}, {
+        placeholder: i18n('filterMetadataAddValue')
+      }));
+    case 'numeric':
+      return /*#__PURE__*/_jsx(MetaDataFieldNumericType, _objectSpread(_objectSpread({}, fieldProps), {}, {
+        value: value,
+        placeholder: i18n('filterMetadataAddValue')
+      }));
+    case 'textarea':
+      return /*#__PURE__*/_jsx(MetaDataFieldTextareaType, _objectSpread(_objectSpread({}, fieldProps), {}, {
+        textareaProps: {
+          rows: 3
+        },
+        placeholder: i18n('filterMetadataAddValue')
+      }));
+    case 'select-one':
+      return /*#__PURE__*/_jsx(MetaDataFieldSelectType, _objectSpread({
+        showClearIcon: true,
+        placeholder: i18n('filterMetadataSelectValue')
+      }, fieldProps));
+    case 'multi-select':
+      return /*#__PURE__*/_jsx(MetaDataFieldSelectType, _objectSpread(_objectSpread({
+        placeholder: i18n('filterMetadataSelectValue')
+      }, fieldProps), {}, {
+        multiple: true
+      }));
+    case 'tags':
+      return /*#__PURE__*/_jsx(MetaDataFieldTagsType, _objectSpread(_objectSpread({}, fieldProps), {}, {
+        placeholder: !(value !== null && value !== void 0 && value.length) > 0 ? i18n('detailsTabAddTagsLabel') : '',
+        disableOnEnter: false,
+        onChangeSearchQuery: onChangeSearchQuery,
+        isFetching: isFetching,
+        isMetadataFilter: isMetadataFilter
+      }));
+    case 'date':
+      return /*#__PURE__*/_jsx(MetaDataFieldDateType, _objectSpread({}, fieldProps));
+    case 'boolean':
+      return /*#__PURE__*/_jsx(Styled.MetaDataFieldBooleanTypeWrapper, {
+        children: /*#__PURE__*/_jsx(MetaDataFieldBooleanType, _objectSpread(_objectSpread({}, fieldProps), {}, {
+          options: BOOLEAN_OPTIONS,
+          value: typeof value === 'boolean' ? value : null,
+          onChange: function onChange(value) {
+            return _onChange(JSON.parse(value));
+          }
+        }))
+      });
+    case 'attachment-uri':
+      return /*#__PURE__*/_jsx(MetadataFieldUriType, _objectSpread({}, fieldProps));
+    default:
+      return /*#__PURE__*/_jsx(MetaDataFieldSelectType, _objectSpread({
+        showClearIcon: true
+      }, fieldProps));
+  }
+};
+export default FilterMetaDataField;

package/lib/MetaData/FilterMetadataFields.styled.js

@@ -0,0 +1,16 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { Textarea as SfxTextArea, Select } from '@scaleflex/ui/core';
+import styled from 'styled-components';
+var MetaDataFieldBooleanTypeWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 280px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .SfxSelect-Container{\n    width: 100% !important;\n  }\n"])));
+var BooleanSelector = styled(Select)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: center;\n"])));
+var TextArea = styled(SfxTextArea)(function (_ref) {
+  var size = _ref.size;
+  return "\n  padding: ".concat(size === 'sm' ? '12px' : '9px 16px', ";\n");
+});
+var Styled = {
+  MetaDataFieldBooleanTypeWrapper: MetaDataFieldBooleanTypeWrapper,
+  TextArea: TextArea,
+  BooleanSelector: BooleanSelector
+};
+export default Styled;

package/lib/MetaData/MetaDataField.js

@@ -0,0 +1,246 @@
+var _excluded = ["filesMetaFields", "metadataValues", "setMetadataValues", "index", "checkUserPermissions", "isFocused", "generateTags", "generateDescription", "isLoading", "setIsFocused", "isShowGenerateBtn", "baseClassName", "values", "onChangeMetadataFilter", "field", "value", "error", "metaRegionalGroups", "iconPrimaryColor", "submitCount", "disabled", "i18n", "containerHeight", "metaRegionalFilters", "size", "isDescribeBtnHidden", "tagsFieldMaxWidth", "onChangeSearchQuery", "isFetching", "enableAIDescription", "isFilterOptions", "isMetadataGeneralSection", "allTags", "isDescriptionLoading", "setIsDescriptionLoading", "disableOnEnter", "activeTabId"];
+var _this = this;
+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; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { useState, useEffect, useMemo } from 'react';
+import { FormHint } from '@scaleflex/ui/core';
+import { FormControl } from '@scaleflex/widget-common';
+import { PERMISSIONS, FILE_WINDOW_TAB_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorer, usePrevious } from '@scaleflex/widget-explorer/lib/hooks';
+import { getMetaRegionalLanguagesGroupUuid } from '@scaleflex/widget-explorer/lib/components/metadata.adapter';
+import isFolder from '@scaleflex/widget-utils/lib/isFolder';
+import { MetaDataFieldTextType, MetaDataFieldNumericType, MetaDataFieldTextareaType, MetaDataFieldSelectType, MetaDataFieldTagsType, MetaDataFieldDateType, MetaDataFieldBooleanType, MetadataFieldUriType } from './MetaDataFieldTypes';
+import MetaDataFieldMultiSelectType from './MetaDataFieldTypes/MetaDataFieldMultiSelectType';
+import MetadataGeoPointField from './MetaDataFieldTypes/MetadataGeoPointField';
+
+// TODO: Check if we should move the place of the this component to FileCard or not.
+// TODO: Refactor this component to fit the new v3 metadata and avoid un-necessary code.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var MetaDataField = function MetaDataField(_ref) {
+  var _regionalVariants$;
+  var filesMetaFields = _ref.filesMetaFields,
+    metadataValues = _ref.metadataValues,
+    setMetadataValues = _ref.setMetadataValues,
+    index = _ref.index,
+    _ref$checkUserPermiss = _ref.checkUserPermissions,
+    checkUserPermissions = _ref$checkUserPermiss === void 0 ? function () {} : _ref$checkUserPermiss,
+    isFocused = _ref.isFocused,
+    generateTags = _ref.generateTags,
+    generateDescription = _ref.generateDescription,
+    isLoading = _ref.isLoading,
+    setIsFocused = _ref.setIsFocused,
+    isShowGenerateBtn = _ref.isShowGenerateBtn,
+    baseClassName = _ref.baseClassName,
+    values = _ref.values,
+    onChangeMetadataFilter = _ref.onChangeMetadataFilter,
+    field = _ref.field,
+    value = _ref.value,
+    error = _ref.error,
+    metaRegionalGroups = _ref.metaRegionalGroups,
+    iconPrimaryColor = _ref.iconPrimaryColor,
+    submitCount = _ref.submitCount,
+    disabled = _ref.disabled,
+    i18n = _ref.i18n,
+    containerHeight = _ref.containerHeight,
+    metaRegionalFilters = _ref.metaRegionalFilters,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    isDescribeBtnHidden = _ref.isDescribeBtnHidden,
+    tagsFieldMaxWidth = _ref.tagsFieldMaxWidth,
+    onChangeSearchQuery = _ref.onChangeSearchQuery,
+    _ref$isFetching = _ref.isFetching,
+    isFetching = _ref$isFetching === void 0 ? false : _ref$isFetching,
+    enableAIDescription = _ref.enableAIDescription,
+    isFilterOptions = _ref.isFilterOptions,
+    _ref$isMetadataGenera = _ref.isMetadataGeneralSection,
+    isMetadataGeneralSection = _ref$isMetadataGenera === void 0 ? false : _ref$isMetadataGenera,
+    allTags = _ref.allTags,
+    isDescriptionLoading = _ref.isDescriptionLoading,
+    setIsDescriptionLoading = _ref.setIsDescriptionLoading,
+    disableOnEnter = _ref.disableOnEnter,
+    activeTabId = _ref.activeTabId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useExplorer = useExplorer(),
+    _useExplorer$opts = _useExplorer.opts,
+    _useExplorer$opts2 = _useExplorer$opts === void 0 ? {} : _useExplorer$opts,
+    config = _useExplorer$opts2.config;
+  var prevProps = usePrevious({
+    field: field,
+    metaRegionalFilters: metaRegionalFilters,
+    metaRegionalGroups: metaRegionalGroups
+  });
+  var getFieldRegionalGroup = function getFieldRegionalGroup() {
+    return metaRegionalGroups === null || metaRegionalGroups === void 0 ? void 0 : metaRegionalGroups.find(function (group) {
+      return group.uuid === (field === null || field === void 0 ? void 0 : field.regional_variants_group_uuid);
+    });
+  };
+  var languagesRegVariantGroupUuid = useMemo(function () {
+    return getMetaRegionalLanguagesGroupUuid(metaRegionalGroups);
+  }, [metaRegionalGroups]);
+  var currentLanguage = useMemo(function () {
+    return (metaRegionalFilters === null || metaRegionalFilters === void 0 ? void 0 : metaRegionalFilters[languagesRegVariantGroupUuid]) || 'en';
+  }, [metaRegionalFilters, languagesRegVariantGroupUuid]);
+  var getFieldRegionalVariants = function getFieldRegionalVariants() {
+    var _getFieldRegionalGrou;
+    return (_getFieldRegionalGrou = getFieldRegionalGroup()) === null || _getFieldRegionalGrou === void 0 ? void 0 : _getFieldRegionalGrou.variants;
+  };
+  var _useState = useState(function () {
+      var _getFieldRegionalVari, _getFieldRegionalVari2;
+      return ((_getFieldRegionalVari = getFieldRegionalVariants()) === null || _getFieldRegionalVari === void 0 ? void 0 : (_getFieldRegionalVari2 = _getFieldRegionalVari[0]) === null || _getFieldRegionalVari2 === void 0 ? void 0 : _getFieldRegionalVari2.api_value) || null;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeRegionalKey = _useState2[0],
+    setActiveRegionalKey = _useState2[1];
+  useEffect(function () {
+    if ((prevProps === null || prevProps === void 0 ? void 0 : prevProps.field) !== props.field || (prevProps === null || prevProps === void 0 ? void 0 : prevProps.metaRegionalFilters) !== props.metaRegionalFilters || (prevProps === null || prevProps === void 0 ? void 0 : prevProps.metaRegionalGroups) !== props.metaRegionalGroups) {
+      initActiveRegionalKey();
+    }
+  }, [field, metaRegionalFilters, metaRegionalGroups]);
+  useEffect(function () {
+    initActiveRegionalKey();
+  }, [submitCount]);
+  var initActiveRegionalKey = function initActiveRegionalKey() {
+    var _Object$keys, _getFieldRegionalVari3, _getFieldRegionalVari4;
+    var firstErrorApiKey = _typeof(error) === 'object' ? (_Object$keys = Object.keys(error)) === null || _Object$keys === void 0 ? void 0 : _Object$keys[0] : null;
+    setActiveRegionalKey(firstErrorApiKey || (metaRegionalFilters === null || metaRegionalFilters === void 0 ? void 0 : metaRegionalFilters[field === null || field === void 0 ? void 0 : field.regional_variants_group_uuid]) || ((_getFieldRegionalVari3 = getFieldRegionalVariants()) === null || _getFieldRegionalVari3 === void 0 ? void 0 : (_getFieldRegionalVari4 = _getFieldRegionalVari3[0]) === null || _getFieldRegionalVari4 === void 0 ? void 0 : _getFieldRegionalVari4.api_value) || null);
+  };
+  useEffect(initActiveRegionalKey, []);
+  useEffect(initActiveRegionalKey, [field, metaRegionalFilters, metaRegionalGroups]);
+  var handleFieldChange = function handleFieldChange(regionalVariantFieldKey, newValue) {
+    props.onChange(newValue, field.key, regionalVariantFieldKey, field);
+  };
+  var getFieldByType = function getFieldByType() {
+    var _field$can_edit, _getFieldValue;
+    var regionalVariantKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var regionalVariantKeyValue = arguments.length > 1 ? arguments[1] : undefined;
+    var regionalVariantKeyError = arguments.length > 2 ? arguments[2] : undefined;
+    var item = props.item,
+      isEditing = props.isEditing;
+    var type = field.type,
+      key = field.key,
+      placeholder = field.placeholder;
+    var hasEditPerms = checkUserPermissions([PERMISSIONS[isFolder(item) ? 'FOLDER_META' : 'FILE_META']]);
+    var canEdit = hasEditPerms === true && (regionalVariantKey && Array.isArray(field === null || field === void 0 ? void 0 : field.can_edit) && field.can_edit.indexOf(regionalVariantKey) > -1 || ((_field$can_edit = field === null || field === void 0 ? void 0 : field.can_edit) !== null && _field$can_edit !== void 0 ? _field$can_edit : true));
+    var getFieldValue = function getFieldValue() {
+      if (regionalVariantKey) return regionalVariantKeyValue;
+      if (value !== null && value !== void 0 && value[currentLanguage]) {
+        return value[currentLanguage];
+      }
+      return value;
+    };
+    var fieldProps = {
+      onChange: handleFieldChange.bind(_this, regionalVariantKey),
+      value: (_getFieldValue = getFieldValue()) !== null && _getFieldValue !== void 0 ? _getFieldValue : '',
+      required: field === null || field === void 0 ? void 0 : field.required,
+      field: field,
+      placeholder: placeholder,
+      size: size,
+      focusOnMount: key === 'name' && isEditing && activeTabId === FILE_WINDOW_TAB_IDS.GENERAL,
+      readOnly: !canEdit,
+      disabled: !canEdit || disabled,
+      error: !!(regionalVariantKey ? regionalVariantKeyError : error),
+      // saveOnEnter: props.saveOnEnter,
+      containerHeight: containerHeight,
+      i18n: i18n,
+      activeRegionalKey: activeRegionalKey,
+      fieldKey: key,
+      numberFormatLocale: config === null || config === void 0 ? void 0 : config.numberFormatLocale
+    };
+    switch (type) {
+      case 'text':
+        return /*#__PURE__*/_jsx(MetaDataFieldTextType, _objectSpread({}, fieldProps));
+      case 'attachment-uri':
+        return /*#__PURE__*/_jsx(MetadataFieldUriType, _objectSpread({}, fieldProps));
+      case 'numeric':
+        return /*#__PURE__*/_jsx(MetaDataFieldNumericType, _objectSpread({}, fieldProps));
+      case 'geopoint':
+        return /*#__PURE__*/_jsx(MetadataGeoPointField, _objectSpread({}, fieldProps));
+      case 'textarea':
+        return /*#__PURE__*/_jsx(MetaDataFieldTextareaType, _objectSpread(_objectSpread({}, fieldProps), {}, {
+          generateDescription: generateDescription,
+          isDescriptionLoading: isDescriptionLoading,
+          setIsDescriptionLoading: setIsDescriptionLoading,
+          isDescribeBtnHidden: isDescribeBtnHidden,
+          enableAIDescription: enableAIDescription
+        }));
+      case 'select-one':
+        return /*#__PURE__*/_jsx(MetaDataFieldSelectType, _objectSpread(_objectSpread({}, fieldProps), {}, {
+          i18n: i18n,
+          isFilterOptions: isFilterOptions,
+          showClearIcon: true
+        }));
+      case 'multi-select':
+        return /*#__PURE__*/_jsx(MetaDataFieldMultiSelectType, _objectSpread(_objectSpread({}, fieldProps), {}, {
+          i18n: i18n,
+          isFilterOptions: isFilterOptions,
+          tagsFieldMaxWidth: tagsFieldMaxWidth,
+          multiple: true
+        }));
+      case 'tags':
+        return /*#__PURE__*/_jsx(MetaDataFieldTagsType, _objectSpread(_objectSpread({}, fieldProps), {}, {
+          item: item,
+          isLoading: isLoading,
+          isShowGenerateBtn: isShowGenerateBtn && checkUserPermissions([PERMISSIONS.FILE_PROCESS_AUTOTAGGING]),
+          generateTags: generateTags,
+          config: config,
+          allTags: allTags,
+          disableOnEnter: disableOnEnter,
+          tagsFieldMaxWidth: tagsFieldMaxWidth,
+          onChangeSearchQuery: onChangeSearchQuery,
+          isFetching: isFetching,
+          isMetadataGeneralSection: isMetadataGeneralSection
+        }));
+      case 'date':
+        return /*#__PURE__*/_jsx(MetaDataFieldDateType, _objectSpread({}, fieldProps));
+      case 'boolean':
+        return /*#__PURE__*/_jsx(MetaDataFieldBooleanType, _objectSpread({}, fieldProps));
+      default:
+        return /*#__PURE__*/_jsx(FormHint, {
+          children: "Field type: \"".concat(type, "\" is not supported!")
+        });
+    }
+  };
+  var renderField = function renderField(regionalVariantKey, regionalVariantKeyValue, regionalVariantKeyError) {
+    var metaRegionalHint = field.metaRegionalHint,
+      key = field.key;
+    var currentError = regionalVariantKey ? regionalVariantKeyError : error;
+    return /*#__PURE__*/_jsxs(FormControl, {
+      id: "meta-field-".concat(key),
+      error: !!currentError,
+      withHelperText: !!metaRegionalHint,
+      style: {
+        width: '100%'
+      },
+      children: [getFieldByType(regionalVariantKey, regionalVariantKeyValue, regionalVariantKeyError), (metaRegionalHint || currentError && typeof currentError === 'string') && !isFilterOptions && /*#__PURE__*/_jsx(FormHint, {
+        style: {
+          marginTop: 4
+        },
+        children: currentError || metaRegionalHint
+      })]
+    });
+  };
+  var regionalVariants = getFieldRegionalVariants();
+  if (!field.key) {
+    return /*#__PURE__*/_jsx(FormHint, {
+      children: i18n('metadataNoFieldKey')
+    });
+  }
+  if (!regionalVariants || !Array.isArray(regionalVariants)) {
+    return renderField();
+  }
+  var anActiveRegionalKey = activeRegionalKey || (regionalVariants === null || regionalVariants === void 0 ? void 0 : (_regionalVariants$ = regionalVariants[0]) === null || _regionalVariants$ === void 0 ? void 0 : _regionalVariants$.api_value);
+  return renderField(anActiveRegionalKey, (value || {})[anActiveRegionalKey], (error || {})[anActiveRegionalKey]);
+};
+export default MetaDataField;

package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldBooleanType.js

@@ -0,0 +1,36 @@
+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); }
+var _excluded = ["i18n", "onChange", "value", "size"];
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { MenuItem } from '@scaleflex/ui/core';
+import Styled from '../FilterMetadataFields.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default (function (_ref) {
+  var i18n = _ref.i18n,
+    _onChange = _ref.onChange,
+    value = _ref.value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(Styled.BooleanSelector, _objectSpread(_objectSpread({}, rest), {}, {
+    value: value,
+    onChange: function onChange(value) {
+      return _onChange(value);
+    },
+    size: size,
+    showClearIcon: true,
+    fullWidth: true,
+    children: [/*#__PURE__*/_jsx(MenuItem, {
+      value: true,
+      children: i18n('mutualizedTrueLabel')
+    }), /*#__PURE__*/_jsx(MenuItem, {
+      value: false,
+      children: i18n('mutualizedFalseLabel')
+    })]
+  }));
+});

package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldDateType.js

@@ -0,0 +1,53 @@
+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); }
+var _excluded = ["label", "hint", "onChange", "value", "i18n", "style", "size", "placeholder", "fieldKey"];
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { DatePicker } from '@scaleflex/ui/core';
+import { jsx as _jsx } from "react/jsx-runtime";
+var MetaDataFieldDateType = function MetaDataFieldDateType(_ref) {
+  var _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    _ref$hint = _ref.hint,
+    hint = _ref$hint === void 0 ? '' : _ref$hint,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    i18n = _ref.i18n,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    placeholder = _ref.placeholder,
+    fieldKey = _ref.fieldKey,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // TODO: Remove the following after having the fix,
+  // TMP-SOLUTION: for avoiding triggering onChange in the first load of the DatePicker component from sfx/ui side,
+  // we shouldn't trigger onChange in the first load, as it should take the value as the default value for the initial load.
+  // Remove the handleChange and replace it below onChange={onChange} directly after having this fixed from @sfx/ui lib.
+  var handleChange = function handleChange(newDate) {
+    if (value && newDate === value) {
+      return;
+    }
+    onChange(newDate);
+  };
+  return /*#__PURE__*/_jsx(DatePicker, _objectSpread({
+    label: label,
+    hint: hint,
+    style: style,
+    onChange: handleChange,
+    value: value,
+    fullWidth: true,
+    size: size,
+    id: fieldKey,
+    calendarStyles: {
+      position: 'relative',
+      height: 300,
+      marginBottom: 9
+    }
+  }, props));
+};
+export default MetaDataFieldDateType;

package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldMultiSelectType.js

@@ -0,0 +1,71 @@
+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); }
+var _excluded = ["i18n", "onChange", "field", "value", "multiple", "inputRef", "showClearIcon", "fromFilters", "size", "onBlur", "handleSelectMenuClose"];
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { useMetaDataSortedOptions } from '../MetaDataFieldTypes.hooks';
+import Styled from './MetaDataFieldTypes.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var MENU_PROPS = {
+  position: 'bottom-start'
+};
+export default (function (_ref) {
+  var i18n = _ref.i18n,
+    onChange = _ref.onChange,
+    field = _ref.field,
+    value = _ref.value,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? true : _ref$multiple,
+    inputRef = _ref.inputRef,
+    _ref$showClearIcon = _ref.showClearIcon,
+    showClearIcon = _ref$showClearIcon === void 0 ? false : _ref$showClearIcon,
+    _ref$fromFilters = _ref.fromFilters,
+    fromFilters = _ref$fromFilters === void 0 ? false : _ref$fromFilters,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    onBlur = _ref.onBlur,
+    handleSelectMenuClose = _ref.handleSelectMenuClose,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useMetaDataSortedOpt = useMetaDataSortedOptions({
+      field: field,
+      value: value,
+      multiple: multiple,
+      i18n: i18n
+    }),
+    sortedOptions = _useMetaDataSortedOpt.sortedOptions,
+    getValue = _useMetaDataSortedOpt.getValue;
+  var handleChange = function handleChange(valueOrEvent) {
+    if (valueOrEvent && valueOrEvent.target) {
+      var eventValue = valueOrEvent.target.value;
+      onChange(eventValue);
+    } else {
+      onChange(valueOrEvent);
+    }
+  };
+  return /*#__PURE__*/_jsx(Styled.Autocomplete, _objectSpread({
+    ref: inputRef,
+    getOptionLabel: function getOptionLabel(option) {
+      return option === null || option === void 0 ? void 0 : option.label;
+    },
+    getOptionValue: function getOptionValue(option) {
+      var _option$id;
+      return (_option$id = option === null || option === void 0 ? void 0 : option.id) !== null && _option$id !== void 0 ? _option$id : option === null || option === void 0 ? void 0 : option.i18nKey;
+    },
+    onChange: handleChange,
+    fullWidth: true,
+    value: getValue(),
+    multiple: multiple,
+    size: size,
+    showClearIcon: showClearIcon,
+    options: sortedOptions,
+    submitOnBlur: function submitOnBlur() {
+      return handleSelectMenuClose && handleSelectMenuClose(value);
+    },
+    MenuProps: MENU_PROPS,
+    smallPaddings: fromFilters && multiple && (value === null || value === void 0 ? void 0 : value.length)
+  }, rest));
+});

package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldNumericType.js

@@ -0,0 +1,45 @@
+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); }
+var _excluded = ["isFilterOptions", "selectOnly", "onChange", "containerHeight", "value", "inputRef", "size", "numberFormatLocale"];
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { Input } from '@scaleflex/ui/core';
+import { useCallback, useRef } from 'react';
+import useInputWithLocaleNumber from '../../hooks/useInputWithLocaleNumber';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function (_ref) {
+  var isFilterOptions = _ref.isFilterOptions,
+    selectOnly = _ref.selectOnly,
+    onChange = _ref.onChange,
+    containerHeight = _ref.containerHeight,
+    value = _ref.value,
+    inputRef = _ref.inputRef,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    numberFormatLocale = _ref.numberFormatLocale,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var internalInputWrapperRef = useRef();
+  var handleOnChange = useCallback(function (newValue, event) {
+    if (isFilterOptions) selectOnly(String(newValue));
+    onChange(String(newValue), event);
+  }, [onChange, selectOnly]);
+  var inputWithLocaleProps = useInputWithLocaleNumber({
+    enabled: Boolean(numberFormatLocale),
+    value: value,
+    locale: numberFormatLocale,
+    onChange: handleOnChange,
+    inputWrapperRef: inputRef || internalInputWrapperRef
+  });
+  return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
+    type: "number",
+    ref: inputRef || internalInputWrapperRef
+  }, inputWithLocaleProps), {}, {
+    background: "primary",
+    size: size,
+    fullWidth: true
+  }, rest));
+});