@scaleflex/widget-common 4.4.0 → 4.5.1

package/lib/MetaData/MetaDataFieldTypes/MetadataGeoPointField/index.js

@@ -0,0 +1,135 @@
+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 = ["onChange", "value", "size", "i18n", "showDistanceField", "disabled", "placeholder"];
+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; }
+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 } from 'react';
+import { InputGroup } from '@scaleflex/ui/core';
+import getGeoPointValidationErrors from '@scaleflex/widget-utils/lib/metadata/getGeoPointValidationErrors';
+import getMetadataFieldGeoPointValue from '@scaleflex/widget-utils/lib/metadata/getMetadataFieldGeoPointValue';
+import { GEO_POINT_FIELDS } from './constants';
+import Styled from './MetadataGeoPointField.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var LONGITUDE = GEO_POINT_FIELDS.LONGITUDE,
+  LATITUDE = GEO_POINT_FIELDS.LATITUDE,
+  DISTANCE = GEO_POINT_FIELDS.DISTANCE;
+var MetadataGeoPointField = function MetadataGeoPointField(_ref) {
+  var onChange = _ref.onChange,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    i18n = _ref.i18n,
+    _ref$showDistanceFiel = _ref.showDistanceField,
+    showDistanceField = _ref$showDistanceFiel === void 0 ? false : _ref$showDistanceFiel,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    placeholder = _ref.placeholder,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    error = _useState2[0],
+    setError = _useState2[1];
+  var getGeoPointPlaceholder = function getGeoPointPlaceholder(type) {
+    if (!placeholder) return '';
+    if (typeof placeholder === 'string') {
+      return placeholder;
+    }
+    return placeholder[type];
+  };
+  var _ref2 = getMetadataFieldGeoPointValue(value, showDistanceField) || {},
+    latitude = _ref2.latitude,
+    longitude = _ref2.longitude,
+    distance = _ref2.distance;
+  var getGeoPoint = function getGeoPoint(newLatitude, newLongitude) {
+    return "(".concat(newLatitude, ",").concat(newLongitude, ")");
+  };
+  var handleChange = function handleChange(newValue) {
+    var _newValue$LATITUDE, _newValue$LONGITUDE, _newValue$DISTANCE;
+    var newLatitude = (_newValue$LATITUDE = newValue[LATITUDE]) !== null && _newValue$LATITUDE !== void 0 ? _newValue$LATITUDE : latitude;
+    var newLongitude = (_newValue$LONGITUDE = newValue[LONGITUDE]) !== null && _newValue$LONGITUDE !== void 0 ? _newValue$LONGITUDE : longitude;
+    var newDistance = (_newValue$DISTANCE = newValue[DISTANCE]) !== null && _newValue$DISTANCE !== void 0 ? _newValue$DISTANCE : distance;
+    var geoPoint = getGeoPoint(newLatitude, newLongitude);
+    var newGeoPoint = showDistanceField && newDistance ? "~".concat(geoPoint, "..").concat(newDistance) : geoPoint;
+    var geoPointErrors = getGeoPointValidationErrors({
+      geoPoint: newGeoPoint,
+      showDistanceField: showDistanceField
+    });
+    setError(geoPointErrors);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newGeoPoint, geoPointErrors);
+  };
+  return /*#__PURE__*/_jsxs(Styled.InputWrapper, {
+    children: [/*#__PURE__*/_jsx("div", {
+      "data-valid": !(error !== null && error !== void 0 && error[LATITUDE]),
+      children: /*#__PURE__*/_jsx(InputGroup, _objectSpread(_objectSpread({
+        size: size,
+        fullWidth: true,
+        value: latitude,
+        onChange: function onChange(_ref3) {
+          var target = _ref3.target;
+          return handleChange(_defineProperty({}, LATITUDE, target.value));
+        },
+        inputProps: {
+          type: 'number',
+          step: 'any'
+        },
+        hint: i18n(error === null || error === void 0 ? void 0 : error[LATITUDE]),
+        placeholder: getGeoPointPlaceholder(LATITUDE),
+        disabled: disabled
+      }, rest), {}, {
+        error: !!(error !== null && error !== void 0 && error[LATITUDE])
+      }))
+    }), /*#__PURE__*/_jsx("div", {
+      "data-valid": !(error !== null && error !== void 0 && error[LONGITUDE]),
+      children: /*#__PURE__*/_jsx(InputGroup, _objectSpread(_objectSpread({
+        size: size,
+        fullWidth: true,
+        value: longitude,
+        onChange: function onChange(_ref4) {
+          var target = _ref4.target;
+          return handleChange(_defineProperty({}, LONGITUDE, target.value));
+        },
+        inputProps: {
+          type: 'number',
+          step: 'any'
+        },
+        hint: i18n(error === null || error === void 0 ? void 0 : error[LONGITUDE]),
+        placeholder: getGeoPointPlaceholder(LONGITUDE),
+        disabled: disabled
+      }, rest), {}, {
+        error: !!(error !== null && error !== void 0 && error[LONGITUDE])
+      }))
+    }), showDistanceField && /*#__PURE__*/_jsx("div", {
+      "data-valid": !(error !== null && error !== void 0 && error[DISTANCE]),
+      children: /*#__PURE__*/_jsx(InputGroup, _objectSpread(_objectSpread({
+        size: size,
+        fullWidth: true,
+        value: distance,
+        onChange: function onChange(_ref5) {
+          var target = _ref5.target;
+          return handleChange(_defineProperty({}, DISTANCE, target.value));
+        },
+        inputProps: {
+          type: 'number',
+          step: 'any'
+        },
+        placeholder: getGeoPointPlaceholder(DISTANCE),
+        hint: i18n(error === null || error === void 0 ? void 0 : error[DISTANCE]),
+        disabled: disabled
+      }, rest), {}, {
+        error: !!(error !== null && error !== void 0 && error[DISTANCE])
+      }))
+    })]
+  });
+};
+export default MetadataGeoPointField;

package/lib/MetaData/MetaDataFieldTypes/index.js

@@ -0,0 +1,9 @@
+export { default as MetaDataFieldTextType } from './MetaDataFieldTextType';
+export { default as MetaDataFieldNumericType } from './MetaDataFieldNumericType';
+export { default as MetaDataFieldTextareaType } from './MetaDataFieldTextareaType';
+export { default as MetaDataFieldSelectType } from './MetaDataFieldSelectType';
+export { default as MetaDataFieldDateType } from './MetaDataFieldDateType';
+export { default as MetaDataFieldTagsType } from './MetaDataFieldTagsType';
+export { default as MetaDataFieldBooleanType } from './MetaDataFieldBooleanType';
+export { default as MetadataFieldUriType } from './MetadataFieldUriType';
+export { default as MetadataGeoPointField } from './MetadataGeoPointField';

package/lib/MetaData/MetaDataFieldTypes.hooks.js

@@ -0,0 +1,53 @@
+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 _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 _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 _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; }
+import { useMemo } from 'react';
+import { IS_OPERATOR_OPTIONS } from '@scaleflex/widget-explorer/lib/components/Filters/Filters.constants';
+import { FILTER_CONDITIONS } from '@scaleflex/widget-utils/lib/constants';
+var useMetaDataSortedOptions = function useMetaDataSortedOptions(_ref) {
+  var field = _ref.field,
+    value = _ref.value,
+    multiple = _ref.multiple,
+    i18n = _ref.i18n;
+  var _field$possible_value = field.possible_values,
+    options = _field$possible_value === void 0 ? [] : _field$possible_value,
+    condition = field.condition;
+  var sortedOptions = useMemo(function () {
+    var sOptions = (options || []).map(function (_ref2) {
+      var label = _ref2.label,
+        uniqValue = _ref2.internal_unique_value,
+        i18nKey = _ref2.i18nKey;
+      return {
+        id: uniqValue,
+        label: i18n(i18nKey) || label || uniqValue
+      };
+    });
+    sOptions.sort(function (a, b) {
+      return ((a === null || a === void 0 ? void 0 : a.label) || '').localeCompare(b === null || b === void 0 ? void 0 : b.label);
+    });
+    return condition === FILTER_CONDITIONS.IS ? [].concat(_toConsumableArray(IS_OPERATOR_OPTIONS.map(function (_ref3) {
+      var id = _ref3.id,
+        label = _ref3.label,
+        i18nKey = _ref3.i18nKey;
+      return {
+        id: id,
+        label: i18n(i18nKey) || label
+      };
+    })), _toConsumableArray(sOptions)) : sOptions;
+  }, [options, condition]);
+  var getValue = function getValue() {
+    if (!value.length) {
+      if (multiple) return [];
+      return '';
+    }
+    return value;
+  };
+  return {
+    sortedOptions: sortedOptions,
+    getValue: getValue
+  };
+};
+export { useMetaDataSortedOptions };

package/lib/OverlayCard/OverlayCard.styled.js

@@ -0,0 +1,8 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 1005;\n  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.1);\n  background-color: #ffffff;\n  overflow: hidden;\n  // For Safari, otherwise there is no border-radius in OverlayCard.\n  border-radius: 5px;\n"])));
+var Styled = {
+  Wrapper: Wrapper
+};
+export default Styled;

package/lib/OverlayCard/index.js

@@ -0,0 +1,28 @@
+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 = ["children", "panelType", "ref"];
+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 Styled from './OverlayCard.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var OverlayCard = function OverlayCard(_ref) {
+  var children = _ref.children,
+    _ref$panelType = _ref.panelType,
+    panelType = _ref$panelType === void 0 ? 'FileCard' : _ref$panelType,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Styled.Wrapper, _objectSpread(_objectSpread({
+    ref: ref,
+    className: "filerobot-Explorer-OverlayCard filerobot-common-OverlayCard"
+    // TODO: Replace the FileCard with OverlayCard/FileWindow or the proper name in the future.
+    ,
+    "data-filerobot-paneltype": panelType || 'FileCard'
+  }, rest), {}, {
+    children: children
+  }));
+};
+export default OverlayCard;

package/lib/PoweredBy.js

@@ -0,0 +1,12 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var PoweredBy = function PoweredBy(_ref) {
+  var normalText = _ref.normalText,
+    strongText = _ref.strongText;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "filerobot-common-PoweredBy-label",
+    children: [normalText || 'Powered by', /*#__PURE__*/_jsxs("strong", {
+      children: [" ", strongText]
+    })]
+  });
+};
+export default PoweredBy;

package/lib/Radiobox.js

@@ -0,0 +1,63 @@
+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 = ["classes", "checked", "children", "label", "onChange", "hint", "labelStyle", "color", "iconPrimaryColor"];
+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 { QuestionMarkOutline } from '@scaleflex/icons';
+import { TooltipV2, Radio } from '@scaleflex/ui/core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Radiobox = function Radiobox(_ref) {
+  var classes = _ref.classes,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    children = _ref.children,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    hint = _ref.hint,
+    labelStyle = _ref.labelStyle,
+    color = _ref.color,
+    iconPrimaryColor = _ref.iconPrimaryColor,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs("label", {
+    className: "filerobot-common-Radio-wrapper",
+    onClick: function onClick() {
+      if (typeof onChange === 'function') {
+        onChange();
+      }
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "filerobot-common-Radio".concat(classes ? " ".concat(classes) : ''),
+      role: "radiobox",
+      children: /*#__PURE__*/_jsx(Radio, _objectSpread({
+        size: "md",
+        style: {
+          color: color,
+          display: 'flex'
+        },
+        checked: checked,
+        onChange: function onChange() {}
+      }, rest))
+    }), label && /*#__PURE__*/_jsx("div", {
+      className: "filerobot-common-Radio-label",
+      style: labelStyle,
+      children: label
+    }), hint && /*#__PURE__*/_jsx(TooltipV2, {
+      arrow: true,
+      position: "top",
+      size: "sm",
+      title: hint,
+      children: /*#__PURE__*/_jsx(QuestionMarkOutline, {
+        size: 12,
+        color: iconPrimaryColor,
+        style: {
+          marginLeft: 4
+        }
+      })
+    })]
+  });
+};
+export default Radiobox;

package/lib/RegionalVariantsFilters/RegionalVariantFilters.styled.js

@@ -0,0 +1,17 @@
+var _templateObject, _templateObject2, _templateObject3;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+import { PC } from '@scaleflex/widget-common';
+import { Button as SfxButton, Menu as SfxMenu } from '@scaleflex/ui/core';
+var Button = styled(SfxButton)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .SfxButton-Label {\n    font-weight: 400;\n  }\n\n  .SfxButton-StartIcon {\n    margin-right: 4px;\n  }\n\n  .arrow-wrapper {\n    margin-left: 6px;\n  }\n"])));
+var Menu = styled(SfxMenu)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  row-gap: 10px;\n  max-height: 400px;\n  width: 250px;\n  background-color: ", ";\n\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.BackgroundStateless];
+});
+var IconImage = styled.img(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: none;\n  width: 100%;\n  max-height: 12px;\n  max-width: 12px;\n  margin-right: 4px;\n"])));
+var Styled = {
+  Button: Button,
+  Menu: Menu,
+  IconImage: IconImage
+};
+export default Styled;

package/lib/RegionalVariantsFilters/index.js

@@ -0,0 +1,160 @@
+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 { useState, useEffect, useMemo } from 'react';
+import PT from 'prop-types';
+import Styled from './RegionalVariantFilters.styled';
+import { SelectGroup, MenuItem, Label, IconButton } from '@scaleflex/ui/core';
+import { ultrafastPrefix } from '@scaleflex/widget-utils/lib/getItemIcon';
+import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
+import { ArrowBottom, LanguagesOutline } from '@scaleflex/icons';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var RegionalVariantFilters = function RegionalVariantFilters(_ref) {
+  var metaDataGroups = _ref.metaDataGroups,
+    _ref$iconOnly = _ref.iconOnly,
+    iconOnly = _ref$iconOnly === void 0 ? false : _ref$iconOnly,
+    iconColor = _ref.iconColor,
+    _ref$iconSize = _ref.iconSize,
+    iconSize = _ref$iconSize === void 0 ? 12 : _ref$iconSize,
+    btnClassName = _ref.btnClassName,
+    groups = _ref.groups,
+    filters = _ref.filters,
+    onChangeFilters = _ref.onChangeFilters,
+    i18n = _ref.i18n,
+    _ref$hideGroupWithout = _ref.hideGroupWithoutRegionalValue,
+    hideGroupWithoutRegionalValue = _ref$hideGroupWithout === void 0 ? false : _ref$hideGroupWithout;
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  var open = Boolean(anchorEl);
+  var handleClick = function handleClick(event) {
+    return setAnchorEl(event.currentTarget);
+  };
+  var handleClose = function handleClose() {
+    return setAnchorEl(undefined);
+  };
+  var filteredGroups = useMemo(function () {
+    var newFilteredGroups = (groups || []).filter(function (group) {
+      var _group$variants;
+      return (group === null || group === void 0 ? void 0 : (_group$variants = group.variants) === null || _group$variants === void 0 ? void 0 : _group$variants.length) > 1 && (!hideGroupWithoutRegionalValue || typeof filters[group.uuid] !== 'undefined');
+    }); // Don't show filters with one option or doesn't have value in the filters prop object
+
+    if (metaDataGroups) {
+      var usedRegVarGroupsSet = new Set();
+      (metaDataGroups || []).forEach(function (metaGroup) {
+        ((metaGroup === null || metaGroup === void 0 ? void 0 : metaGroup.fields) || []).forEach(function (metaField) {
+          if (metaField !== null && metaField !== void 0 && metaField.regional_variants_group_uuid) {
+            usedRegVarGroupsSet.add(metaField.regional_variants_group_uuid);
+          }
+        });
+      });
+      newFilteredGroups = newFilteredGroups.filter(function (group) {
+        return usedRegVarGroupsSet.has(group.uuid);
+      }); // Don't show filters that are not used in meta model
+    }
+    return newFilteredGroups;
+  }, [groups, metaDataGroups, filters, hideGroupWithoutRegionalValue]);
+  useEffect(function () {
+    var handleScroll = function handleScroll() {
+      if (open) {
+        handleClose();
+      }
+    };
+    window.addEventListener('scroll', handleScroll);
+    return function () {
+      return window.removeEventListener('scroll', handleScroll);
+    };
+  }, [open]);
+  if (!filteredGroups.length) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [iconOnly ? /*#__PURE__*/_jsx(IconButton, {
+      size: "md",
+      color: "basic",
+      onClick: handleClick,
+      onContextMenu: ignoreEvent,
+      children: function children(iconProps) {
+        return /*#__PURE__*/_jsx(LanguagesOutline, _objectSpread(_objectSpread({}, iconProps), {}, {
+          size: 18
+        }));
+      }
+    }) : /*#__PURE__*/_jsxs(Styled.Button, {
+      onClick: handleClick,
+      color: "link-secondary",
+      size: "md",
+      onContextMenu: ignoreEvent,
+      startIcon: function startIcon(iconProps) {
+        return /*#__PURE__*/_jsx(LanguagesOutline, _objectSpread(_objectSpread({}, iconProps), {}, {
+          size: iconSize,
+          color: iconColor
+        }));
+      },
+      className: btnClassName,
+      open: open,
+      children: [i18n('itemsCardRegionalSettingsButton'), /*#__PURE__*/_jsx("span", {
+        className: "arrow-wrapper",
+        children: /*#__PURE__*/_jsx(ArrowBottom, {
+          size: 12,
+          style: {
+            transform: open ? 'rotate(180deg)' : null
+          }
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Styled.Menu, {
+      anchorEl: anchorEl,
+      open: open,
+      onClose: handleClose,
+      onContextMenu: ignoreEvent,
+      enableOverlay: true,
+      position: "bottom-end",
+      children: open && filteredGroups.map(function (group) {
+        return /*#__PURE__*/_jsx(SelectGroup, {
+          size: "md",
+          fullWidth: true,
+          label: /*#__PURE__*/_jsx(Label, {
+            icon: (group === null || group === void 0 ? void 0 : group.icon) && /*#__PURE__*/_jsx(Styled.IconImage, {
+              src: "".concat(ultrafastPrefix).concat(group.icon),
+              onLoad: function onLoad(_ref2) {
+                var target = _ref2.target;
+                target.style.display = 'block';
+              }
+            }),
+            children: group.label
+          }),
+          value: (filters === null || filters === void 0 ? void 0 : filters[group.uuid]) || '',
+          onChange: function onChange(newValue) {
+            onChangeFilters(_objectSpread(_objectSpread({}, filters), {}, _defineProperty({}, group.uuid, newValue)));
+            handleClose();
+          },
+          SelectProps: {
+            fullWidth: true
+          },
+          children: (group.variants || []).map(function (_ref3) {
+            var key = _ref3.api_value,
+              label = _ref3.label;
+            return /*#__PURE__*/_jsx(MenuItem, {
+              value: key,
+              fullWidth: true,
+              children: label
+            }, key);
+          })
+        }, group.uuid);
+      })
+    })]
+  });
+};
+RegionalVariantFilters.propTypes = {
+  metaDataGroups: PT.arrayOf(PT.object)
+};
+export default RegionalVariantFilters;

package/lib/SVGUrlToElement.js

@@ -0,0 +1,73 @@
+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 { useEffect, useRef, useState } from 'react';
+import provideSvgStrWithCurrColor from '@scaleflex/widget-utils/lib/provideSvgStrWithCurrColor';
+import { Spinner } from './';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var domParser = new DOMParser();
+var SVGUrlToElement = function SVGUrlToElement(_ref) {
+  var url = _ref.url,
+    errorMsg = _ref.errorMsg,
+    className = _ref.className,
+    onLoad = _ref.onLoad;
+  var elementRef = useRef();
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFailed = _useState4[0],
+    setIsFailed = _useState4[1];
+  useEffect(function () {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url);
+    xhr.responseType = 'text';
+    xhr.onload = function () {
+      setIsLoading(false);
+      if (elementRef.current) {
+        var svgElementStringified = provideSvgStrWithCurrColor(xhr.response);
+        var svgHtmlElem = domParser.parseFromString(svgElementStringified, 'image/svg+xml').documentElement;
+        svgHtmlElem.querySelectorAll('script').forEach(function (s) {
+          s.remove();
+        });
+        elementRef.current.parentNode.replaceChild(svgHtmlElem, elementRef.current);
+        if (typeof onLoad === 'function') {
+          onLoad(svgElementStringified, svgHtmlElem);
+        }
+        if (className) {
+          svgHtmlElem.classList.add(className);
+        }
+        elementRef.current = svgHtmlElem;
+      } else {
+        setIsFailed(true);
+      }
+    };
+    xhr.onerror = function () {
+      setIsLoading(false);
+      setIsFailed(true);
+    };
+    xhr.send();
+    return function () {
+      xhr.abort();
+    };
+  }, [url]);
+  useEffect(function () {
+    var isNotFirstRender = !isLoading && !isFailed && elementRef.current;
+    if (isNotFirstRender) {
+      elementRef.current.removeAttribute('class');
+      elementRef.current.classList.add(className);
+    }
+  }, [className]);
+  return /*#__PURE__*/_jsxs("span", {
+    ref: elementRef,
+    children: [isLoading && /*#__PURE__*/_jsx(Spinner, {
+      fillContainer: true
+    }), isFailed && errorMsg]
+  });
+};
+export default SVGUrlToElement;