@scaleflex/widget-common 4.4.0 → 4.5.0

package/lib/FilterPopup/index.js

@@ -0,0 +1,85 @@
+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 { useEffect, useRef } from 'react';
+import { Popper } from '@scaleflex/ui/core';
+import Styled from './FilterPopup.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var SFX_CLASSES = {
+  POPPER: 'SfxPopper-wrapper',
+  BUTTON_LABEL: 'SfxButton-Label',
+  FILTER_ITEM: 'filerobot-Common-Filters-FilterItem',
+  TOOLTIP: 'SfxTooltipV2-root',
+  TOOLTIP_CONTENT: 'SfxEllipsed-tooltip-content',
+  CLEAR_BUTTON: 'SfxButton-Label'
+};
+var FilterPopup = function FilterPopup(_ref) {
+  var open = _ref.open,
+    anchor = _ref.anchor,
+    children = _ref.children,
+    onRequestClose = _ref.onRequestClose,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 1200 : _ref$zIndex;
+  var popupRef = useRef(null);
+  useEffect(function () {
+    /**
+     * The popups created by components such as SFX DatePicker, Calendar, Select, etc.,
+     * are appended directly to the DOM root element (body element).
+     * Therefore, we cannot directly access these popups from within the filter Popover.
+     *
+     * To handle outside clicks, we need to:
+     * 1. Check if the click happened inside our popup (referenced by popupRef).
+     * 2. Check if the click happened inside any of the dynamically created poppers
+     *    (identified by the class name specified in SFX_CLASSES.POPPER).
+     * 3. Check if the click happened on a filter item (identified by the class name specified in SFX_CLASSES.FILTER_ITEM).
+     *
+     * If the click did not occur within any of these elements, we trigger the onRequestClose callback.
+     */
+    var handleClickOutside = function handleClickOutside(event) {
+      if (!popupRef.current) return;
+      var isInsidePopup = popupRef.current.contains(event.target);
+      var isFilterItem = event.target.closest(".".concat(SFX_CLASSES.FILTER_ITEM));
+      var isClearButton = event.target.closest(".".concat(SFX_CLASSES.CLEAR_BUTTON));
+      var isInsidePopperWrapper = [].concat(_toConsumableArray(document.querySelectorAll(".".concat(SFX_CLASSES.POPPER))), _toConsumableArray(document.querySelectorAll(".".concat(SFX_CLASSES.POPPER))), _toConsumableArray(document.querySelectorAll(".".concat(SFX_CLASSES.TOOLTIP))), _toConsumableArray(document.querySelectorAll(".".concat(SFX_CLASSES.TOOLTIP_CONTENT)))).some(function (wrapper) {
+        return wrapper.contains(event.target);
+      });
+      if (!isInsidePopup && !isInsidePopperWrapper && !isFilterItem && !isClearButton) {
+        onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose(event);
+      }
+    };
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [open, onRequestClose]);
+  return /*#__PURE__*/_jsx(Popper, {
+    className: "filerobot-common-popup",
+    open: open,
+    zIndex: zIndex,
+    anchorEl: anchor,
+    position: "bottom-start",
+    popperOptions: {
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [5, 0]
+        }
+      }, {
+        name: 'preventOverflow',
+        options: {
+          padding: 24
+        }
+      }]
+    },
+    children: /*#__PURE__*/_jsx(Styled.PopupWrapper, {
+      ref: popupRef,
+      children: children
+    })
+  });
+};
+export default FilterPopup;

package/lib/FormControl.js

@@ -0,0 +1,25 @@
+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", "error", "withHelperText", "inline"];
+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 { jsx as _jsx } from "react/jsx-runtime";
+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; }
+var FormControl = function FormControl(_ref) {
+  var classes = _ref.classes,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$withHelperText = _ref.withHelperText,
+    withHelperText = _ref$withHelperText === void 0 ? false : _ref$withHelperText,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var classBase = 'filerobot-common-FormControl';
+  return /*#__PURE__*/_jsx("div", _objectSpread({
+    className: "".concat(classBase).concat(error ? " ".concat(classBase, "-error") : '').concat(withHelperText ? " ".concat(classBase, "-with-hint") : '').concat(inline ? " ".concat(classBase, "-inline") : '').concat(classes ? " ".concat(classes) : '')
+  }, rest));
+};
+export default FormControl;

package/lib/FormGroup.js

@@ -0,0 +1,18 @@
+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"];
+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 { jsx as _jsx } from "react/jsx-runtime";
+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; }
+var FormGroup = function FormGroup(_ref) {
+  var classes = _ref.classes,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("div", _objectSpread({
+    className: "filerobot-common-FormGroup".concat(classes ? " ".concat(classes) : '')
+  }, rest));
+};
+export default FormGroup;

package/lib/FormHelperText.js

@@ -0,0 +1,29 @@
+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", "size", "noMargin"];
+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 { jsx as _jsx } from "react/jsx-runtime";
+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; }
+var baseClassName = 'filerobot-common-FormHelperText';
+
+/**
+ * @param {object} props
+ * @param {('small'|'medium')} [props.size='small']
+ * @param {boolean} [props.noMargin=false]
+ */
+var FormHelperText = function FormHelperText(_ref) {
+  var classes = _ref.classes,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    _ref$noMargin = _ref.noMargin,
+    noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("div", _objectSpread({
+    className: "".concat(baseClassName).concat(size ? " ".concat(baseClassName, "-").concat(size) : '').concat(noMargin ? " ".concat(baseClassName, "-no-margin") : '').concat(classes ? " ".concat(classes) : '')
+  }, rest));
+};
+export default FormHelperText;

package/lib/IconLabeledButton.js

@@ -0,0 +1,32 @@
+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 = ["icon", "label", "size", "classes"];
+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 BaseButton from './BaseButton';
+
+/*
+* @size = small/medium/large/fullWidth
+*/
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default (function (_ref) {
+  var icon = _ref.icon,
+    label = _ref.label,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    classes = _ref.classes,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(BaseButton, _objectSpread(_objectSpread({
+    size: size,
+    classes: "filerobot-common-LabeledIconButton".concat(classes ? " ".concat(classes) : '')
+  }, props), {}, {
+    children: [icon, label && /*#__PURE__*/_jsx("span", {
+      className: "filerobot-common-LabeledIconButton-label",
+      children: label
+    })]
+  }));
+});

package/lib/Image/Image.styled.js

@@ -0,0 +1,16 @@
+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, { css, keyframes } from 'styled-components';
+import { PC } from '../Typography';
+var pulseKeyframe = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.4;\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])));
+var Image = styled.img(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var isLoading = _ref.isLoading;
+  return isLoading && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    animation: ", " 1.5s ease-in-out 0.5s infinite;\n    width: 100%;\n    height: 100%;\n  "])), function (_ref2) {
+    var theme = _ref2.theme;
+    return theme.palette[PC.BordersSecondary];
+  }, pulseKeyframe);
+});
+var Styled = {
+  Image: Image
+};
+export default Styled;

package/lib/Image/index.js

@@ -0,0 +1,95 @@
+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 = ["onLoad", "onError", "isDraggable", "src", "applyFallback", "firstFallbackSrc", "finalFallbackSrc", "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 _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 Styled from './Image.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Image = function Image(_ref) {
+  var onLoad = _ref.onLoad,
+    onError = _ref.onError,
+    _ref$isDraggable = _ref.isDraggable,
+    isDraggable = _ref$isDraggable === void 0 ? false : _ref$isDraggable,
+    src = _ref.src,
+    _ref$applyFallback = _ref.applyFallback,
+    applyFallback = _ref$applyFallback === void 0 ? false : _ref$applyFallback,
+    firstFallbackSrc = _ref.firstFallbackSrc,
+    finalFallbackSrc = _ref.finalFallbackSrc,
+    ref = _ref.ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  if (!src) {
+    return null;
+  }
+  var handleOnImgLoad = function handleOnImgLoad(event) {
+    if (typeof onLoad === 'function') {
+      onLoad(event.currentTarget);
+    }
+    setIsLoading(false);
+  };
+  var getFallbackSrc = function getFallbackSrc(fallbackSrc, imgElement) {
+    return typeof fallbackSrc === 'function' ? fallbackSrc(imgElement) : fallbackSrc;
+  };
+  var triggerImageFallbacks = function triggerImageFallbacks(imgElement) {
+    if (!applyFallback || !imgElement) {
+      return false;
+    }
+    var fallbackAttempts = parseInt(imgElement.dataset.fallbackAttempts) || 0;
+    if (fallbackAttempts >= 2) {
+      return false;
+    }
+    var imgSrcFirstFallback = getFallbackSrc(firstFallbackSrc, imgElement);
+    if (imgSrcFirstFallback === src) {
+      fallbackAttempts += 1;
+    }
+    var isFirstFallbackFailed = fallbackAttempts > 0;
+    imgElement.dataset.fallbackAttempts = fallbackAttempts + 1;
+    if (isFirstFallbackFailed && !finalFallbackSrc) {
+      return false;
+    }
+    if (isFirstFallbackFailed) {
+      var imgSrcFinalFallback = getFallbackSrc(finalFallbackSrc, imgElement);
+      if (imgSrcFinalFallback === src || imgSrcFirstFallback === imgSrcFinalFallback) {
+        return false;
+      }
+      imgElement.src = imgSrcFinalFallback;
+    } else {
+      imgElement.src = imgSrcFirstFallback;
+    }
+    return true;
+  };
+  var handleOnImgError = function handleOnImgError(event) {
+    var isFallbackAttemptsRemaining = triggerImageFallbacks(event.currentTarget);
+    if (isFallbackAttemptsRemaining) {
+      return;
+    }
+    if (typeof onError === 'function') {
+      onError(event.currentTarget);
+    }
+    setIsLoading(false);
+  };
+  return /*#__PURE__*/_jsx(Styled.Image, _objectSpread(_objectSpread({
+    src: src
+  }, props), {}, {
+    ref: ref,
+    isLoading: isLoading,
+    onError: handleOnImgError,
+    onLoad: handleOnImgLoad,
+    draggable: isDraggable
+  }));
+};
+export default Image;

package/lib/ImagePreview/ImagePreview.styled.js

@@ -0,0 +1,19 @@
+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 '../Typography';
+var ImageOverlayWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  background-color: ", ";\n  z-index: 2;\n  display: none;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette[PC.Extra_0_3_Overlay];
+});
+var ImagePreviewWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  overflow: hidden;\n\n  .filerobot-common-ItemIcon-img {\n    z-index: 1;\n    object-fit: ", ";\n    width: 100%;\n    height: 100%;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  &:hover ", " {\n    display: block;\n  }\n"])), function (_ref2) {
+  var isIconTypeDetected = _ref2.isIconTypeDetected;
+  return isIconTypeDetected ? 'none' : 'contain';
+}, ImageOverlayWrapper);
+var AssetTypeIcon = styled.img(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  object-fit: none;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n"])));
+var Styled = {
+  AssetTypeIcon: AssetTypeIcon,
+  ImagePreviewWrapper: ImagePreviewWrapper,
+  ImageOverlayWrapper: ImageOverlayWrapper
+};
+export default Styled;

package/lib/ImagePreview/index.js

@@ -0,0 +1,198 @@
+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 { useRef, useState } from 'react';
+import { FILE_TYPES_AND_ICONS as ICONS, FILE_TYPES_ICON_PATH } from '@scaleflex/widget-utils/lib/constants';
+import LinkHelper from '@scaleflex/widget-utils/lib/LinkHelper';
+import clsx from '@scaleflex/widget-utils/lib/clsx';
+import getFormattedPreviewUrl from '@scaleflex/widget-utils/lib/getFormattedPreviewUrl';
+import getFileDefaultIcon from '@scaleflex/widget-utils/lib/getFileDefaultIcon';
+import Styled from './ImagePreview.styled';
+import { Image } from '../';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_IMAGE_SIZE = 250;
+var ImagePreview = function ImagePreview(_ref) {
+  var srcUrl = _ref.srcUrl,
+    extension = _ref.extension,
+    size = _ref.size,
+    onDoubleClick = _ref.onDoubleClick,
+    parentIsList = _ref.parentIsList,
+    containerClassName = _ref.containerClassName,
+    onMouseLeave = _ref.onMouseLeave,
+    onMouseOver = _ref.onMouseOver,
+    onMouseEnter = _ref.onMouseEnter,
+    noImgTransformations = _ref.noImgTransformations,
+    isDevEnv = _ref.isDevEnv,
+    container = _ref.container,
+    className = _ref.className,
+    containerRef = _ref.containerRef,
+    lazyloading = _ref.lazyloading,
+    isLargeSizePreview = _ref.isLargeSizePreview,
+    isTransparencySupported = _ref.isTransparencySupported,
+    _ref$isFileDetailsPre = _ref.isFileDetailsPreview,
+    isFileDetailsPreview = _ref$isFileDetailsPre === void 0 ? false : _ref$isFileDetailsPre,
+    thumbnailUrl = _ref.thumbnailUrl,
+    previewUrl = _ref.previewUrl,
+    renderImageOverlayContent = _ref.renderImageOverlayContent,
+    _ref$isSmallSizePrevi = _ref.isSmallSizePreview,
+    isSmallSizePreview = _ref$isSmallSizePrevi === void 0 ? false : _ref$isSmallSizePrevi,
+    children = _ref.children,
+    _ref$isRemoteUpload = _ref.isRemoteUpload,
+    isRemoteUpload = _ref$isRemoteUpload === void 0 ? false : _ref$isRemoteUpload,
+    file = _ref.file,
+    _ref$defaultIconWidth = _ref.defaultIconWidth,
+    defaultIconWidth = _ref$defaultIconWidth === void 0 ? 500 : _ref$defaultIconWidth,
+    _ref$defaultIconHeigh = _ref.defaultIconHeight,
+    defaultIconHeight = _ref$defaultIconHeigh === void 0 ? 375 : _ref$defaultIconHeigh,
+    _ref$defaultIconMargi = _ref.defaultIconMargin,
+    defaultIconMargin = _ref$defaultIconMargi === void 0 ? 30 : _ref$defaultIconMargi;
+  var _containerRef = useRef();
+  var isFallbackSrcTypeIconRef = useRef(false);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isImageLoaded = _useState2[0],
+    setIsImageLoaded = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isImgLoadFailed = _useState4[0],
+    setIsImgLoadFailed = _useState4[1];
+
+  // thumbnailUrl is url to be used with small size images, i.e preview images, if not then there then we shall use previewUrl then src url
+  var imgPreviewUrl = !isLargeSizePreview && thumbnailUrl || previewUrl || srcUrl;
+  if (imgPreviewUrl === null) return null;
+  var isFileTypeIcon = imgPreviewUrl.includes(FILE_TYPES_ICON_PATH);
+  var getAppendedLink = function getAppendedLink(_ref2) {
+    var url = _ref2.url,
+      searchParams = _ref2.searchParams;
+    return new LinkHelper({
+      href: url || ''
+    }).appendSearchParams(searchParams);
+  };
+  var getFormattedUrl = function getFormattedUrl(url) {
+    return getFormattedPreviewUrl({
+      url: url,
+      isDevEnv: isDevEnv,
+      containerToken: container
+    });
+  };
+  var getFinalFallbackSrc = function getFinalFallbackSrc() {
+    var fileDefaultIconSrc = getFileDefaultIcon(file);
+    isFallbackSrcTypeIconRef.current = fileDefaultIconSrc.includes(FILE_TYPES_ICON_PATH);
+    return fileDefaultIconSrc;
+  };
+
+  // TODO(Dima): check if we can apply transformations by using ultrafast link or some other solutions how we can resize image on the fly from 3ed part sources
+  var getPreparedImgSrc = function getPreparedImgSrc(src) {
+    var fileTypeIconSearchParam = isFileTypeIcon ? {
+      func: 'fit',
+      h: defaultIconHeight,
+      margin: "".concat(defaultIconMargin, "p")
+    } : {};
+    var fileWidthSearchParam = {
+      w: isFileTypeIcon ? defaultIconWidth : Math.floor(DEFAULT_IMAGE_SIZE * devicePixelRatio)
+    };
+    var largeImgSearchParam = isLargeImagePreview(extension, size) && {
+      ci_preview: 1
+    };
+    if (noImgTransformations) {
+      return getFormattedUrl(src || imgPreviewUrl);
+    }
+    if (!isLargeSizePreview && thumbnailUrl && !src) {
+      return getAppendedLink({
+        url: getFormattedUrl(thumbnailUrl),
+        searchParams: _objectSpread({}, fileTypeIconSearchParam)
+      });
+    }
+    if (previewUrl && !src) {
+      return getAppendedLink({
+        url: getFormattedUrl(previewUrl),
+        searchParams: _objectSpread(_objectSpread({}, isLargeSizePreview ? {} : fileWidthSearchParam), fileTypeIconSearchParam)
+      });
+    }
+    return getAppendedLink({
+      url: getFormattedUrl(src || srcUrl),
+      searchParams: _objectSpread(_objectSpread(_objectSpread({}, fileWidthSearchParam), fileTypeIconSearchParam), largeImgSearchParam)
+    });
+  };
+  var assetTypeIconFormattedUrl = getAppendedLink({
+    url: ICONS[(extension || '').toLowerCase()] || ICONS._default || '',
+    searchParams: {
+      w: defaultIconWidth,
+      func: 'fit',
+      h: defaultIconHeight
+    }
+  });
+  if (localStorage.getItem('debug_previews') === '1') {
+    var imageSrc = getPreparedImgSrc();
+    var formattedPreviewUrl = getFormattedUrl(imgPreviewUrl);
+    console.log({
+      imageSrc: imageSrc,
+      formattedPreviewUrl: formattedPreviewUrl,
+      assetTypeIconFormattedUrl: assetTypeIconFormattedUrl
+    });
+  }
+  var isIconTypeDetected = (isFileTypeIcon || isFallbackSrcTypeIconRef.current) && !isSmallSizePreview;
+  return /*#__PURE__*/_jsxs(Styled.ImagePreviewWrapper, {
+    onMouseOver: onMouseOver,
+    onMouseLeave: onMouseLeave,
+    onMouseEnter: onMouseEnter,
+    isListIcon: Boolean(parentIsList),
+    isIconTypeDetected: isIconTypeDetected,
+    className: clsx(_objectSpread({
+      'filerobot-common-ItemIcon': true
+    }, containerClassName ? _defineProperty({}, containerClassName, true) : {})),
+    ref: containerRef || _containerRef,
+    children: [Boolean(isImgLoadFailed) && /*#__PURE__*/_jsx(Styled.AssetTypeIcon, {
+      src: assetTypeIconFormattedUrl
+    }), !isImgLoadFailed && /*#__PURE__*/_jsx(Image, {
+      loading: lazyloading ? 'lazy' : 'eager',
+      className: className ? "".concat(className, " filerobot-common-ItemIcon-img") : 'filerobot-common-ItemIcon-img',
+      src: getPreparedImgSrc(),
+      onLoad: function onLoad() {
+        return setIsImageLoaded(true);
+      },
+      onError: function onError() {
+        return setIsImgLoadFailed(true);
+      },
+      onDoubleClick: onDoubleClick,
+      style: isImageLoaded && isTransparencySupported && !isIconTypeDetected ? {
+        backgroundImage: "url(".concat(ICONS.chess_bg, ")"),
+        width: 'auto',
+        height: 'auto',
+        margin: isFileDetailsPreview ? 'auto' : ''
+      } : {},
+      firstFallbackSrc: function firstFallbackSrc() {
+        var _file$url;
+        return getPreparedImgSrc(file === null || file === void 0 ? void 0 : (_file$url = file.url) === null || _file$url === void 0 ? void 0 : _file$url.cdn);
+      },
+      finalFallbackSrc: getFinalFallbackSrc,
+      applyFallback: true
+    }), typeof renderImageOverlayContent === 'function' && /*#__PURE__*/_jsx(Styled.ImageOverlayWrapper, {
+      children: renderImageOverlayContent()
+    }), children]
+  });
+};
+function isLargeImagePreview(extension, size) {
+  switch (extension) {
+    case 'png':
+      return size > 20971520;
+    // if png more than 20Mb
+    case 'jpg':
+    case 'jpeg':
+    case 'webp':
+      return size > 10485760;
+    // if jpg or webp more than 10Mb
+    default:
+      return false;
+  }
+}
+export default ImagePreview;

package/lib/InputAndLabel.js

@@ -0,0 +1,77 @@
+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 = ["item", "type", "value", "style", "iconStyle", "classes", "innerRef", "icon", "onClick", "i18n", "isFilterOptions", "showLabel", "name", "error", "placeholder", "ref"];
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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; }
+var InputAndLabel = function InputAndLabel(_ref) {
+  var _ref$item = _ref.item,
+    item = _ref$item === void 0 ? {} : _ref$item,
+    type = _ref.type,
+    value = _ref.value,
+    style = _ref.style,
+    iconStyle = _ref.iconStyle,
+    classes = _ref.classes,
+    innerRef = _ref.innerRef,
+    icon = _ref.icon,
+    onClick = _ref.onClick,
+    i18n = _ref.i18n,
+    isFilterOptions = _ref.isFilterOptions,
+    _ref$showLabel = _ref.showLabel,
+    showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
+    name = _ref.name,
+    error = _ref.error,
+    placeholder = _ref.placeholder,
+    ref = _ref.ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var isSavePinModal = props.id === 'filerobotNewPinModalInput';
+  var inputStyle = {
+    paddingRight: type === 'time' ? 0 : undefined,
+    width: isFilterOptions ? '100%' : undefined,
+    padding: isFilterOptions ? '7px' : undefined,
+    borderRadius: isSavePinModal && 4
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "filerobot-common-inputAndLabel".concat(classes ? " ".concat(classes) : ''),
+    style: isFilterOptions ? {
+      marginBottom: 0
+    } : _objectSpread(_objectSpread({}, style), {}, {
+      marginBottom: 0
+    }),
+    children: [showLabel && /*#__PURE__*/_jsx("div", {
+      className: "filerobot-common-inputAndLabel-input-header",
+      style: {
+        margin: isSavePinModal && 0
+      },
+      children: /*#__PURE__*/_jsx("label", {
+        className: "filerobot-common-inputAndLabel-header-links-label",
+        children: /*#__PURE__*/_jsx("span", {
+          children: i18n(item.name || name || item)
+        })
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "filerobot-common-inputAndLabel-input-text-wrapper  ".concat(icon ? 'filerobot-common-inputAndLabel-input-text-wrapper-disable-icon' : ''),
+      children: [/*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({
+        type: type,
+        value: value,
+        className: "filerobot-common-inputAndLabel-input-text",
+        style: _objectSpread({}, inputStyle),
+        onClick: onClick
+      }, props), {}, {
+        ref: ref,
+        placeholder: placeholder
+      })), icon && !isFilterOptions && /*#__PURE__*/_jsx("div", {
+        ref: innerRef,
+        className: "filerobot-common-inputAndLabel-input-icon",
+        style: _objectSpread({}, iconStyle),
+        onClick: onClick,
+        children: icon
+      })]
+    })]
+  }, props.key);
+};
+export default InputAndLabel;

package/lib/InputGroupTime.js

@@ -0,0 +1,6 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { InputGroup } from '@scaleflex/ui/core';
+import styled from 'styled-components';
+var InputGroupTime = styled(InputGroup)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  *::-webkit-calendar-picker-indicator {\n    width: 16px;\n    height: 16px;\n    filter: invert(65%);\n  }\n"])));
+export default InputGroupTime;