@scaleflex/widget-common 4.4.0 → 4.5.0

package/lib/ColorPickerModal/index.js

@@ -0,0 +1,103 @@
+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, useRef } from 'react';
+import { ColorPicker, Modal, ModalContent, ModalTitle } from '@scaleflex/ui/core';
+import ColorPickerIcon from '@scaleflex/icons/color-picker';
+import Styled from './ColorPickerModal.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ColorPickerModal(_ref) {
+  var _ref$defaultColor = _ref.defaultColor,
+    defaultColor = _ref$defaultColor === void 0 ? '' : _ref$defaultColor,
+    _ref$colors = _ref.colors,
+    colors = _ref$colors === void 0 ? [] : _ref$colors,
+    onChange = _ref.onChange,
+    onTmpChooseColor = _ref.onTmpChooseColor,
+    open = _ref.open,
+    onClose = _ref.onClose,
+    _ref$i18n = _ref.i18n,
+    i18n = _ref$i18n === void 0 ? function () {} : _ref$i18n,
+    _ref$modalTitleLabel = _ref.modalTitleLabel,
+    modalTitleLabel = _ref$modalTitleLabel === void 0 ? i18n('colorPickerModalTitle') : _ref$modalTitleLabel,
+    _ref$cancelButtonLabe = _ref.cancelButtonLabel,
+    cancelButtonLabel = _ref$cancelButtonLabe === void 0 ? i18n('mutualizedCancelButtonLabel') : _ref$cancelButtonLabe,
+    _ref$saveButtonLabel = _ref.saveButtonLabel,
+    saveButtonLabel = _ref$saveButtonLabel === void 0 ? i18n('mutualizedApplyButtonLabel') : _ref$saveButtonLabel,
+    showTransparentColor = _ref.showTransparentColor,
+    hidePinIcon = _ref.hidePinIcon;
+  var initialColor = useRef(defaultColor);
+  var _useState = useState(defaultColor),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState(colors),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pinnedColors = _useState4[0],
+    setPinnedColors = _useState4[1];
+  if (!open) {
+    return null;
+  }
+  var handleSave = function handleSave() {
+    onChange(value);
+    if (typeof onClose === 'function') {
+      onClose();
+    }
+  };
+  var handleClose = function handleClose(event) {
+    var shouldResetColor = initialColor.current !== value && typeof onTmpChooseColor === 'function';
+    if (shouldResetColor) {
+      onChange(initialColor.current);
+    }
+    if (typeof onClose === 'function') {
+      onClose(event);
+    }
+  };
+  var onColorChange = function onColorChange(hexColor, rgbColor, colorPickerPinnedColors) {
+    if (typeof onTmpChooseColor === 'function') {
+      onTmpChooseColor(hexColor);
+    }
+    setValue(hexColor);
+    setPinnedColors(colorPickerPinnedColors);
+  };
+  return /*#__PURE__*/_jsxs(Modal, {
+    onClose: handleClose,
+    open: open,
+    fullWidth: true,
+    style: {
+      maxWidth: 350
+    },
+    children: [/*#__PURE__*/_jsx(ModalTitle, {
+      onClose: handleClose,
+      primary: modalTitleLabel,
+      icon: /*#__PURE__*/_jsx(ColorPickerIcon, {
+        size: 29
+      }),
+      iconShadow: true,
+      variant: "with-icon"
+    }), /*#__PURE__*/_jsx(ModalContent, {
+      children: /*#__PURE__*/_jsx(Styled.ColorPickerWrap, {
+        children: /*#__PURE__*/_jsx(ColorPicker, {
+          defaultColor: defaultColor,
+          pinnedColors: pinnedColors,
+          onChange: onColorChange,
+          showTransparentColor: showTransparentColor,
+          hidePinIcon: hidePinIcon
+        })
+      })
+    }), /*#__PURE__*/_jsxs(Styled.ModalActions, {
+      children: [/*#__PURE__*/_jsx(Styled.ModalButton, {
+        color: "basic",
+        onClick: handleClose,
+        children: cancelButtonLabel
+      }), /*#__PURE__*/_jsx(Styled.ModalButton, {
+        color: "primary",
+        onClick: handleSave,
+        children: saveButtonLabel
+      })]
+    })]
+  });
+}
+export default ColorPickerModal;

package/lib/DatePicker/MyDatePicker.js

@@ -0,0 +1,350 @@
+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, useRef } from 'react';
+import { InputAndLabel } from '@scaleflex/widget-common';
+import getDateString from '@scaleflex/widget-utils/lib/getDateString';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var oneDay = 60 * 60 * 24 * 1000;
+var todayTimestamp = Date.now() - Date.now() % oneDay + new Date().getTimezoneOffset() * 1000 * 60;
+var MyDatePicker = function MyDatePicker(props) {
+  var _useState = useState(function () {
+      return new Date().getFullYear();
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    year = _useState2[0],
+    setYear = _useState2[1];
+  var _useState3 = useState(function () {
+      return new Date().getMonth();
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    month = _useState4[0],
+    setMonth = _useState4[1];
+  var _useState5 = useState(function () {
+      return todayTimestamp;
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedDay = _useState6[0],
+    setSelectedDay = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showDatePicker = _useState8[0],
+    setShowDatePicker = _useState8[1];
+  var _useState9 = useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    menuHeight = _useState10[0],
+    setMenuHeight = _useState10[1];
+  var wrapper = useRef();
+  var inputRef = useRef();
+  var iconRef = useRef();
+  var datePickerRef = useRef();
+  var getDayDetails = function getDayDetails(args) {
+    var daysMap = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    var date = args.index - args.firstDay;
+    var day = args.index % 7;
+    var prevMonth = args.month - 1;
+    var prevYear = args.year;
+    if (prevMonth < 0) {
+      prevMonth = 11;
+      prevYear--;
+    }
+    var prevMonthNumberOfDays = getNumberOfDays(prevYear, prevMonth);
+    var _date = (date < 0 ? prevMonthNumberOfDays + date : date % args.numberOfDays) + 1;
+    var month = date < 0 ? -1 : date >= args.numberOfDays ? 1 : 0;
+    var timestamp = new Date(args.year, args.month, _date).getTime();
+    return {
+      date: _date,
+      day: day,
+      month: month,
+      timestamp: timestamp,
+      dayString: daysMap[day]
+    };
+  };
+  var getNumberOfDays = function getNumberOfDays(year, month) {
+    return 40 - new Date(year, month, 40).getDate();
+  };
+  var getMonthDetails = function getMonthDetails(year, month) {
+    var firstDay = new Date(year, month).getDay();
+    var numberOfDays = getNumberOfDays(year, month);
+    var monthArray = [];
+    var rows = 6;
+    var currentDay = null;
+    var index = 0;
+    var cols = 7;
+    for (var row = 0; row < rows; row++) {
+      for (var col = 0; col < cols; col++) {
+        currentDay = getDayDetails({
+          index: index,
+          numberOfDays: numberOfDays,
+          firstDay: firstDay,
+          year: year,
+          month: month
+        });
+        monthArray.push(currentDay);
+        index++;
+      }
+    }
+    return monthArray;
+  };
+  var _useState11 = useState(function () {
+      return getMonthDetails(year, month);
+    }),
+    _useState12 = _slicedToArray(_useState11, 2),
+    monthDetails = _useState12[0],
+    setMonthDetails = _useState12[1];
+  useEffect(function () {
+    setDateToInput(selectedDay);
+  }, []);
+  useEffect(function () {
+    getMenuHeight();
+  }, [showDatePicker]);
+  useEffect(function () {
+    setDateToInput(selectedDay.timestamp);
+  }, [selectedDay]);
+  useEffect(function () {
+    var closeDatePicker = function closeDatePicker(e) {
+      var _iconRef$current, _datePickerRef$curren;
+      if (!((_iconRef$current = iconRef.current) !== null && _iconRef$current !== void 0 && _iconRef$current.contains(e.target)) && !((_datePickerRef$curren = datePickerRef.current) !== null && _datePickerRef$curren !== void 0 && _datePickerRef$curren.contains(e.target))) {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowDatePicker(false);
+      }
+    };
+    document.addEventListener('click', closeDatePicker);
+    return function () {
+      document.removeEventListener('click', closeDatePicker);
+    };
+  }, []);
+  var getMenuHeight = function getMenuHeight() {
+    var _document$querySelect, _document$querySelect2;
+    var height = (_document$querySelect = document.querySelector('.filerobot-common-datePicker-container')) === null || _document$querySelect === void 0 ? void 0 : (_document$querySelect2 = _document$querySelect.getBoundingClientRect()) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.height;
+    setMenuHeight(height);
+  };
+  var getMenuPosition = function getMenuPosition() {
+    return menuHeight + props.top >= props.containerHeight ? {
+      bottom: 45
+    } : {
+      top: 45
+    };
+  };
+  var showADatePicker = function showADatePicker(e) {
+    props.getParentPosition(e);
+    e.preventDefault();
+    e.stopPropagation();
+    setShowDatePicker(!showDatePicker);
+  };
+  var isCurrentDay = function isCurrentDay(day) {
+    return day.timestamp === todayTimestamp;
+  };
+  var isSelectedDay = function isSelectedDay(day) {
+    return day.timestamp === selectedDay;
+  };
+  var getDateFromDateString = function getDateFromDateString(dateValue) {
+    var _ref;
+    console.log('hey', dateValue);
+    var dateData = (_ref = typeof dateValue === 'string' ? dateValue === null || dateValue === void 0 ? void 0 : dateValue.split('-') : dateValue) === null || _ref === void 0 ? void 0 : _ref.map(function (d) {
+      return parseInt(d, 10);
+    });
+    if (!dateData || dateData.length < 3) {
+      return null;
+    }
+    var year = dateData[0];
+    var month = dateData[1];
+    var date = dateData[2];
+    return {
+      year: year,
+      month: month,
+      date: date
+    };
+  };
+  var getMonthStr = function getMonthStr(month) {
+    var monthMap = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    return monthMap[Math.max(Math.min(11, month), 0)] || 'Month';
+  };
+  var getDateStringFromTimestamp = function getDateStringFromTimestamp(timestamp) {
+    var dateObject = new Date(timestamp);
+    var month = dateObject.getMonth() + 1;
+    var date = dateObject.getDate();
+    return dateObject.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date);
+  };
+  var setDate = function setDate(dateData) {
+    var selectedDay = new Date(dateData.year, dateData.month - 1, dateData.date).getTime();
+    setSelectedDay(selectedDay);
+    if (props.onChange) {
+      props.onChange({}, getDateString('ymd', '-', selectedDay));
+    }
+  };
+  var updateDateFromInput = function updateDateFromInput(e) {
+    if (!inputRef.current.value) {
+      return;
+    }
+    var dateData = getDateFromDateString(inputRef.current.value);
+    if (dateData !== null) {
+      setDate(dateData);
+      setYear(dateData.year);
+      setMonth(dateData.month - 1);
+      setMonthDetails(getMonthDetails(dateData.year, dateData.month - 1));
+    }
+  };
+  var setDateToInput = function setDateToInput(timestamp) {
+    var dateString = getDateStringFromTimestamp(timestamp);
+
+    // if no update from external value update internally
+    if (inputRef && !props.onChange) {
+      inputRef.current.value = dateString;
+    }
+  };
+  var onDateClick = function onDateClick(day) {
+    setSelectedDay(day.timestamp);
+    if (props.onChange) {
+      props.onChange({}, getDateStringFromTimestamp(day.timestamp));
+    }
+  };
+  var setNewYear = function setNewYear(offset) {
+    var newYear = year + offset;
+    setYear(newYear);
+    setMonthDetails(getMonthDetails(newYear, month));
+  };
+  var setNewMonth = function setNewMonth(offset) {
+    var newYear = year;
+    var newMonth = month + offset;
+    if (month === -1) {
+      newMonth = 11;
+      newYear--;
+    } else if (month === 12) {
+      newMonth = 0;
+      newYear++;
+    }
+    setYear(newYear);
+    setMonth(newMonth);
+    setMonthDetails(getMonthDetails(newYear, newMonth));
+  };
+  var renderCalendar = function renderCalendar() {
+    var days = monthDetails.map(function (day, index) {
+      return /*#__PURE__*/_jsx("div", {
+        className: "filerobot-common-datePicker-calendar-day".concat(day.month !== 0 ? ' disabled' : '') + (isCurrentDay(day) ? ' highlight' : '') + (isSelectedDay(day) ? ' highlight-green' : ''),
+        children: /*#__PURE__*/_jsx("div", {
+          className: "filerobot-common-datePicker-calendar-day-container",
+          children: /*#__PURE__*/_jsx("span", {
+            onClick: function onClick() {
+              return onDateClick(day);
+            },
+            children: day.date
+          })
+        })
+      }, index);
+    });
+    return /*#__PURE__*/_jsxs("div", {
+      className: "filerobot-common-datePicker-calendar",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "filerobot-common-datePicker-calendar-head",
+        children: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(function (d, i) {
+          return /*#__PURE__*/_jsx("div", {
+            className: "filerobot-common-datePicker-calendar-head-name",
+            children: d
+          }, i);
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "filerobot-common-datePicker-calendar-body",
+        children: days
+      })]
+    });
+  };
+  var showLabel = typeof props.showLabel === 'boolean' ? props.showLabel : true;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "filerobot-common-datePicker ".concat(props.classes ? "".concat(props.classes) : ''),
+      style: props.isFilterOptions ? {
+        position: 'unset'
+      } : {},
+      ref: wrapper,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "filerobot-common-datePicker-input",
+        children: /*#__PURE__*/_jsx(InputAndLabel, {
+          item: "date",
+          type: "date",
+          value: props.value,
+          onChange: updateDateFromInput,
+          onClick: showADatePicker,
+          ref: inputRef,
+          innerRef: iconRef,
+          icon: props.icon,
+          i18n: props.i18n,
+          isFilterOptions: props.isFilterOptions,
+          showLabel: showLabel
+        })
+      }), showDatePicker ? /*#__PURE__*/_jsxs("div", {
+        className: "filerobot-common-datePicker-container",
+        style: props.isFilterOptions ? {
+          bottom: 99,
+          left: 10
+        } : getMenuPosition(),
+        ref: datePickerRef,
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "filerobot-common-datePicker-container-head",
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "filerobot-common-datePicker-container-head-button",
+            children: /*#__PURE__*/_jsx("div", {
+              className: "filerobot-common-datePicker-container-head-button-inner",
+              onClick: function onClick() {
+                return setNewYear(-1);
+              },
+              children: /*#__PURE__*/_jsx("span", {
+                className: "mdpchbi-left-arrows"
+              })
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: "filerobot-common-datePicker-container-head-button",
+            children: /*#__PURE__*/_jsx("div", {
+              className: "filerobot-common-datePicker-container-head-button-inner",
+              onClick: function onClick() {
+                return setNewMonth(-1);
+              },
+              children: /*#__PURE__*/_jsx("span", {
+                className: "mdpchbi-left-arrow"
+              })
+            })
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "filerobot-common-datePicker-container-head-body",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "filerobot-common-datePicker-container-head-body-year",
+              children: year
+            }), /*#__PURE__*/_jsx("div", {
+              className: "filerobot-common-datePicker-container-head-body-month",
+              children: getMonthStr(month)
+            })]
+          }), /*#__PURE__*/_jsx("div", {
+            className: "filerobot-common-datePicker-container-head-button",
+            children: /*#__PURE__*/_jsx("div", {
+              className: "filerobot-common-datePicker-container-head-button-inner",
+              onClick: function onClick() {
+                return setNewMonth(1);
+              },
+              children: /*#__PURE__*/_jsx("span", {
+                className: "mdpchbi-right-arrow"
+              })
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: "filerobot-common-datePicker-container-head-button",
+            onClick: function onClick() {
+              return setNewYear(1);
+            },
+            children: /*#__PURE__*/_jsx("div", {
+              className: "filerobot-common-datePicker-container-head-button-inner",
+              children: /*#__PURE__*/_jsx("span", {
+                className: "mdpchbi-right-arrows"
+              })
+            })
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: "filerobot-common-datePicker-container-body",
+          children: renderCalendar()
+        })]
+      }) : '']
+    })
+  });
+};
+export default MyDatePicker;

package/lib/DatePicker/index.js

@@ -0,0 +1 @@
+export { default as DatePicker } from './MyDatePicker';

package/lib/DropFilesWindow.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 = ["color", "i18n", "classes", "dropFileHint", "onMount", "visible"];
+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 { useEffect } from 'react';
+import { Upload } from '@scaleflex/icons';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { PC } from './';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var DropFilesWindow = function DropFilesWindow(_ref) {
+  var _theme$palette;
+  var color = _ref.color,
+    i18n = _ref.i18n,
+    classes = _ref.classes,
+    dropFileHint = _ref.dropFileHint,
+    onMount = _ref.onMount,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var iconProps = {
+    color: color || (theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette[PC.AccentPrimary])
+  };
+  useEffect(function () {
+    if (typeof onMount === 'function') {
+      onMount();
+    }
+  }, []);
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: "filerobot-common-DropFilesHereHint".concat(visible ? ' filerobot-common-DropFilesHereHint-visible' : '').concat(classes ? " ".concat(classes) : '')
+  }, props), {}, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "filerobot-common-DropFilesHereHint-inner",
+      children: [/*#__PURE__*/_jsx(Upload, _objectSpread(_objectSpread({}, iconProps), {}, {
+        size: 50
+      })), dropFileHint]
+    })
+  }));
+};
+export default DropFilesWindow;

package/lib/FilterItem/FilterItem.styled.js

@@ -0,0 +1,42 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { PC } from '@scaleflex/widget-common';
+import styled from 'styled-components';
+import { Button as SfxButton } from '@scaleflex/ui/core';
+var Button = styled(SfxButton)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  border: 1px solid ", ";\n  transition: all 100ms ease-out;\n  background: ", ";\n  max-width: 300px;\n\n  .SfxButton-Label {\n    font-weight: 400;\n  }\n\n  .SfxButton-EndIcon {\n    margin: auto 0;\n    margin-left: 8px;\n    transition: all 100ms ease-out;\n\n    ", "\n\n    ", "\n  }\n\n  ", "\n\n  &:hover:not(:disabled) {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    user-select: none;\n  }\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.TextPrimary];
+}, function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return palette[PC.BorderPrimaryStateless];
+}, function (_ref3) {
+  var open = _ref3.open,
+    palette = _ref3.theme.palette;
+  return open ? palette[PC.Accent_0_5_Opacity] : 'transparent';
+}, function (_ref4) {
+  var open = _ref4.open,
+    palette = _ref4.theme.palette;
+  return open && "\n      transform: rotate(180deg);\n      color: ".concat(palette[PC.IconsPrimary], "\n    ");
+}, function (_ref5) {
+  var active = _ref5.active,
+    open = _ref5.open,
+    palette = _ref5.theme.palette;
+  return open && active && "\n      transform: rotate(180deg);\n      color: ".concat(palette[PC.AccentStateless], "\n    ");
+}, function (_ref6) {
+  var active = _ref6.active,
+    open = _ref6.open,
+    palette = _ref6.theme.palette;
+  return active && "\n    color: ".concat(palette[PC.AccentStateless], ";\n    border-color: ").concat(!open ? palette[PC.AccentStateless] : palette[PC.BorderPrimaryStateless], ";\n  ");
+}, function (_ref7) {
+  var palette = _ref7.theme.palette;
+  return palette[PC.AccentStateless];
+}, function (_ref8) {
+  var palette = _ref8.theme.palette;
+  return palette[PC.AccentStateless];
+});
+var Count = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n"])));
+var Styled = {
+  Button: Button,
+  Count: Count
+};
+export default Styled;

package/lib/FilterItem/index.js

@@ -0,0 +1,48 @@
+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", "onClick", "open", "name", "active", "count", "style"];
+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 { ArrowBottom } from '@scaleflex/icons';
+import { EllipsedText } from '@scaleflex/ui/core';
+import Styled from './FilterItem.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var FilterItem = function FilterItem(_ref) {
+  var _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    onClick = _ref.onClick,
+    open = _ref.open,
+    name = _ref.name,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 0 : _ref$count,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Styled.Button, _objectSpread(_objectSpread({
+    className: "filerobot-Common-Filters-FilterItem",
+    active: active,
+    open: open,
+    color: "secondary",
+    size: "sm",
+    onClick: onClick,
+    name: name,
+    endIcon: /*#__PURE__*/_jsx(ArrowBottom, {
+      size: 11
+    }),
+    style: style
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsxs(EllipsedText, {
+      maxLinesCount: 1,
+      children: [label, Boolean(count) && /*#__PURE__*/_jsxs(Styled.Count, {
+        children: [" (", count, ")"]
+      })]
+    })
+  }));
+};
+export default FilterItem;

package/lib/FilterPopup/FilterPopup.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 styled, { keyframes } from 'styled-components';
+import { PC } from '@scaleflex/widget-common';
+var fadeInOutAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% { opacity: 0; transform: scale(0.9); }\n  50% { opacity: 1; transform: scale(1.05); }\n  100% { opacity: 1; transform: scale(1); }\n"])));
+var PopupWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: 0px 2px 6px ", ";\n  border-radius: 4px;\n  overflow: hidden;\n  transform-origin: top left;\n  opacity: 0;\n  margin-top: 4px;\n  margin-left: -5px;\n  transform: scale(0.9);\n  animation: ", " 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.BackgroundStateless];
+}, function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return palette[PC.LargeShadow];
+}, fadeInOutAnimation);
+var Styled = {
+  PopupWrapper: PopupWrapper
+};
+export default Styled;