@scaleflex/widget-explorer 0.0.1

package/lib/components/Drawer/Drawer.styled.js

@@ -0,0 +1,45 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css } from 'styled-components';
+import { PC, PSH } from '@scaleflex/widget-common';
+import { IconButton } from '@scaleflex/ui/core';
+var resizerBoxShadowMixin = function resizerBoxShadowMixin(_ref) {
+  var position = _ref.position,
+    noResizerShadow = _ref.noResizerShadow,
+    _ref$theme = _ref.theme,
+    shadows = _ref$theme.shadows,
+    breakpoints = _ref$theme.breakpoints;
+  if (noResizerShadow) return;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    box-shadow: ", ";\n\n  ", " {\n    box-shadow: ", ";\n  }\n\n  ", " & {\n    box-shadow: ", ";\n  }\n\n  ", " & {\n    box-shadow: ", ";\n  }\n  "])), position === 'left' ? shadows[PSH.LeftPanelMd] : shadows[PSH.RightPanelMd], breakpoints.down('lg'), position === 'left' ? shadows[PSH.LeftPanelSm] : shadows[PSH.RightPanelSm], breakpoints.classes.md, position === 'left' ? shadows[PSH.LeftPanelSm] : shadows[PSH.RightPanelSm], breakpoints.classes.sm, position === 'left' ? shadows[PSH.LeftPanelSm] : shadows[PSH.RightPanelSm]);
+};
+var Resizer = styled.div(function (_ref2) {
+  var $size = _ref2.$size,
+    disableResizer = _ref2.disableResizer,
+    shouldApplyTopPadding = _ref2.shouldApplyTopPadding,
+    noTopMargin = _ref2.noTopMargin,
+    noBorderRadius = _ref2.noBorderRadius;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: stretch;\n  flex-flow: row nowrap;\n  z-index: 1200;\n  border-radius: ", ";\n  margin-top: ", ";\n  padding-bottom: 0px;\n  width: ", ";\n  flex-grow: ", ";\n  transition: padding-top 0.2s ease-in-out, margin-left 0.2s ease-out;\n  ", "\n  ", "\n"])), noBorderRadius ? 0 : '4px', noTopMargin ? 0 : '12px', $size !== 0 && !disableResizer && 'auto', $size !== 0 && !disableResizer && 0, shouldApplyTopPadding && 'padding-top: 38px;', resizerBoxShadowMixin);
+});
+var ResizerHandler = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  cursor: col-resize;\n  width: 12px;\n  height: 50px;\n\n  & > span {\n    display: inline-block;\n    overflow: hidden;\n    font-size: 12px;\n    font-weight: bold;\n    font-family: sans-serif;\n    letter-spacing: 1px;\n    color: #b3b3b3;\n    text-shadow: 1px 0 1px rgb(90, 90, 90);\n    line-height: 4px;\n  }\n"])));
+var ResizerBar = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  cursor: col-resize;\n  width: 2px;\n  background: transparent;\n  display: flex;\n  z-index: 1250;\n  align-items: center ;\n  align-content: center ;\n  justify-content: center;\n  margin: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_ref3) {
+  var position = _ref3.position;
+  return position === 'right' ? '0 0 0 4px;' : '0 4px 0 0';
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.palette[PC.AccentStateless];
+});
+var NavWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  min-width: 276px;\n  max-width: 500px;\n  height: 100%;\n"])));
+var NavContent = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+var CloseButton = styled(IconButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 14px;\n  top: 26px;\n  z-index: 1000;\n\n  ", "\n"])), function (_ref5) {
+  var isLeftPosition = _ref5.isLeftPosition;
+  return isLeftPosition && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    rotate: 180deg;\n  "])));
+});
+var Styled = {
+  Resizer: Resizer,
+  ResizerHandler: ResizerHandler,
+  ResizerBar: ResizerBar,
+  NavWrapper: NavWrapper,
+  NavContent: NavContent,
+  CloseButton: CloseButton
+};
+export default Styled;

package/lib/components/Drawer/Drawer.utils.js

@@ -0,0 +1,163 @@
+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); }
+var findInArray = function findInArray(array, callback) {
+  for (var i = 0, length = array.length; i < length; i++) {
+    if (callback.apply(callback, [array[i], i, array])) return array[i];
+  }
+};
+var isNum = function isNum(num) {
+  return typeof num === 'number' && !isNaN(num);
+};
+var addClassName = function addClassName(el, className) {
+  if (el.classList) {
+    el.classList.add(className);
+  } else {
+    if (!el.className.match(new RegExp("(?:^|\\s)".concat(className, "(?!\\S)")))) {
+      el.className += " ".concat(className);
+    }
+  }
+};
+var removeClassName = function removeClassName(el, className) {
+  if (el.classList) {
+    el.classList.remove(className);
+  } else {
+    el.className = el.className.replace(new RegExp("(?:^|\\s)".concat(className, "(?!\\S)"), 'g'), '');
+  }
+};
+var findDOMNode = function findDOMNode(node) {
+  if (!node) {
+    throw new Error('Unmounted during event!');
+  }
+  return node;
+};
+export var createCoreData = function createCoreData(_ref) {
+  var node = _ref.node,
+    lastPositions = _ref.lastPositions,
+    x = _ref.x,
+    y = _ref.y;
+  var isStart = !isNum(lastPositions.x);
+  if (isStart) {
+    // If this is our first move, use the x and y as last coords.
+    return {
+      node: node,
+      deltaX: 0,
+      deltaY: 0,
+      lastX: x,
+      lastY: y,
+      x: x,
+      y: y
+    };
+  } else {
+    // Otherwise calculate proper values.
+    return {
+      node: node,
+      deltaX: x - lastPositions.x,
+      deltaY: y - lastPositions.y,
+      lastX: lastPositions.x,
+      lastY: lastPositions.y,
+      x: x,
+      y: y
+    };
+  }
+};
+export var getControlPosition = function getControlPosition(e, touchIdentifier, draggableCore) {
+  var touchObj = typeof touchIdentifier === 'number' ? getTouch(e, touchIdentifier) : null;
+  if (typeof touchIdentifier === 'number' && !touchObj) return null; // not the right touch
+  var node = findDOMNode(draggableCore);
+  // User can provide an offsetParent if desired.
+  var offsetParent = draggableCore.offsetParent || node.offsetParent || node.ownerDocument.body;
+  return offsetXYFromParent(touchObj || e, offsetParent, 1);
+};
+export var addEvent = function addEvent(el, event, handler, inputOptions) {
+  if (!el) return;
+  var options = _objectSpread({
+    capture: true
+  }, inputOptions);
+  if (el.addEventListener) {
+    el.addEventListener(event, handler, options);
+  } else if (el.attachEvent) {
+    el.attachEvent('on' + event, handler);
+  } else {
+    el['on' + event] = handler;
+  }
+};
+export var removeEvent = function removeEvent(el, event, handler, inputOptions) {
+  if (!el) return;
+  var options = _objectSpread({
+    capture: true
+  }, inputOptions);
+  if (el.removeEventListener) {
+    el.removeEventListener(event, handler, options);
+  } else if (el.detachEvent) {
+    el.detachEvent('on' + event, handler);
+  } else {
+    el['on' + event] = null;
+  }
+};
+export var getTouchIdentifier = function getTouchIdentifier(e) {
+  if (e.targetTouches && e.targetTouches[0]) return e.targetTouches[0].identifier;
+  if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier;
+};
+export var getTouch = function getTouch(e, identifier) {
+  return e.targetTouches && findInArray(e.targetTouches, function (t) {
+    return identifier === t.identifier;
+  }) || e.changedTouches && findInArray(e.changedTouches, function (t) {
+    return identifier === t.identifier;
+  });
+};
+export var addUserSelectStyles = function addUserSelectStyles(doc) {
+  if (!doc) return;
+  var styleEl = doc.getElementById('style-el');
+  if (!styleEl) {
+    styleEl = doc.createElement('style');
+    styleEl.type = 'text/css';
+    styleEl.id = 'style-el';
+    styleEl.innerHTML = '.filerobot-transparent-selection *::-moz-selection {all: inherit;}\n';
+    styleEl.innerHTML += '.filerobot-transparent-selection *::selection {all: inherit;}\n';
+    doc.getElementsByTagName('head')[0].appendChild(styleEl);
+  }
+  if (doc.body) addClassName(doc.body, 'filerobot-transparent-selection');
+};
+export var removeUserSelectStyles = function removeUserSelectStyles(doc) {
+  if (!doc) return;
+  try {
+    if (doc.body) removeClassName(doc.body, 'filerobot-transparent-selection');
+    if (doc.selection) {
+      doc.selection.empty();
+    } else {
+      var selection = (doc.defaultView || window).getSelection();
+      if (selection && selection.type !== 'Caret') {
+        selection.removeAllRanges();
+      }
+    }
+  } catch (e) {
+    // probably IE
+  }
+};
+export var offsetXYFromParent = function offsetXYFromParent(evt, offsetParent, scale) {
+  var isBody = offsetParent === offsetParent.ownerDocument.body;
+  var offsetParentRect = isBody ? {
+    left: 0,
+    top: 0
+  } : offsetParent.getBoundingClientRect();
+  var x = (evt.clientX + offsetParent.scrollLeft - offsetParentRect.left) / scale;
+  var y = (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / scale;
+  return {
+    x: x,
+    y: y
+  };
+};
+export var isResizerOverlappedWithOtherElement = function isResizerOverlappedWithOtherElement(resizerCoords, resizerAttributeId) {
+  var _ref2 = resizerCoords || {},
+    x = _ref2.x,
+    y = _ref2.y;
+  if (!x && x !== 0 || !y || y !== 0) {
+    return false;
+  }
+  var foundElement = document.elementFromPoint(x, y);
+  return !foundElement.hasAttribute(resizerAttributeId);
+};

package/lib/components/Drawer/Resizer.js

@@ -0,0 +1,141 @@
+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, Children } from 'react';
+import { useSelector } from 'react-redux';
+import ResizerCore from './ResizerCore';
+import Styled from './Drawer.styled';
+import { selectIsActionBarHidden } from '../../slices/panels.slice';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Resizer = function Resizer(_ref) {
+  var direction = _ref.direction,
+    children = _ref.children,
+    position = _ref.position,
+    noTopMargin = _ref.noTopMargin,
+    noBorderRadius = _ref.noBorderRadius,
+    minWidth = _ref.minWidth,
+    defaultWidth = _ref.defaultWidth,
+    resizerStyle = _ref.resizerStyle,
+    maxWidth = _ref.maxWidth,
+    disableResizer = _ref.disableResizer,
+    noResizerShadow = _ref.noResizerShadow,
+    onResize = _ref.onResize;
+  var _useState = useState(defaultWidth),
+    _useState2 = _slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var sizeRef = useRef(size);
+  var contentRef = useRef();
+  var wrapperRef = useRef();
+  var isActionBarHidden = useSelector(selectIsActionBarHidden);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    shouldApplyTopPadding = _useState4[0],
+    setShouldApplyTopPadding = _useState4[1];
+  useEffect(function () {
+    if (!defaultWidth) {
+      var _content = contentRef.current;
+      var actualContent = _content.children[0];
+      var initialSize = isHorizontal() ? actualContent === null || actualContent === void 0 ? void 0 : actualContent.offsetWidth : actualContent === null || actualContent === void 0 ? void 0 : actualContent.offsetHeight;
+      setSize(initialSize);
+      sizeRef.current = initialSize;
+      validateSize();
+    }
+  }, []);
+  useEffect(function () {
+    if (wrapperRef.current && !isActionBarHidden) {
+      setTimeout(function () {
+        var _wrapperRef$current, _document$elementFrom;
+        var _ref2 = ((_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.getBoundingClientRect()) || {},
+          _ref2$x = _ref2.x,
+          x = _ref2$x === void 0 ? 0 : _ref2$x,
+          _ref2$y = _ref2.y,
+          y = _ref2$y === void 0 ? 0 : _ref2$y;
+        var isToolbarShownOverPanel = ((_document$elementFrom = document.elementFromPoint(x, y)) === null || _document$elementFrom === void 0 ? void 0 : _document$elementFrom.role) === 'toolbar';
+        setShouldApplyTopPadding(isToolbarShownOverPanel);
+      }, 300); // === 250ms (transition of action bar opening, we need to apply the logic after that time to make sure action bar is toggled) + 50ms (safety timeout)
+    } else {
+      setShouldApplyTopPadding(false);
+    }
+  }, [isActionBarHidden]);
+  var isHorizontal = function isHorizontal() {
+    return direction === 'w' || direction === 'e';
+  };
+  var validateSize = function validateSize() {
+    var content = contentRef.current;
+    var wrapper = wrapperRef.current;
+    var actualContent = content.children[0];
+    var containerParent = wrapper.parentElement;
+    var minSize = isHorizontal() ? actualContent.scrollWidth : actualContent.scrollHeight;
+    var margins = isHorizontal() ? (actualContent === null || actualContent === void 0 ? void 0 : actualContent.getBoundingClientRect().width) - (actualContent === null || actualContent === void 0 ? void 0 : actualContent.offsetWidth) : (actualContent === null || actualContent === void 0 ? void 0 : actualContent.getBoundingClientRect().height) - (actualContent === null || actualContent === void 0 ? void 0 : actualContent.offsetHeight);
+    minSize += margins;
+    if (size !== minSize) {
+      setSize(minSize);
+      sizeRef.current = minSize;
+    } else {
+      var overflow = isHorizontal() ? containerParent.scrollWidth - containerParent.clientWidth : containerParent.scrollHeight - containerParent.clientHeight;
+      if (overflow) {
+        var overflowSize = isHorizontal() ? (actualContent === null || actualContent === void 0 ? void 0 : actualContent.clientWidth) - overflow : (actualContent === null || actualContent === void 0 ? void 0 : actualContent.clientHeight) - overflow;
+        setSize(overflowSize);
+        sizeRef.current = overflowSize;
+      }
+    }
+  };
+  var handleDrag = function handleDrag(e, ui) {
+    var factor = direction === 'e' ? -1 : 1;
+    var delta = isHorizontal() ? ui.deltaX : ui.deltaY;
+    var newSize = Math.max(10, sizeRef.current - delta * factor);
+    if (newSize >= minWidth && newSize <= maxWidth) {
+      sizeRef.current = newSize;
+      onResize === null || onResize === void 0 ? void 0 : onResize(newSize);
+      setSize(newSize);
+    }
+  };
+  var handleDragEnd = function handleDragEnd() {
+    validateSize();
+  };
+  var content = [/*#__PURE__*/_jsx("div", {
+    ref: contentRef,
+    style: {
+      width: size + 'px',
+      maxWidth: maxWidth,
+      minWidth: minWidth
+    },
+    children: Children.only(children)
+  }, "content")];
+  var handle = /*#__PURE__*/_jsx(ResizerCore, {
+    onDrag: handleDrag,
+    onStop: handleDragEnd,
+    children: /*#__PURE__*/_jsx(Styled.ResizerBar, {
+      position: position,
+      children: /*#__PURE__*/_jsx(Styled.ResizerHandler, {
+        children: /*#__PURE__*/_jsx("span", {})
+      })
+    })
+  }, "handle");
+  var main = [/*#__PURE__*/_jsx(Styled.Resizer, {
+    ref: wrapperRef,
+    position: position,
+    className: "filerobot-Explorer-Resizer",
+    $size: size,
+    style: resizerStyle,
+    noTopMargin: noTopMargin,
+    noBorderRadius: noBorderRadius,
+    disableResizer: disableResizer,
+    noResizerShadow: noResizerShadow,
+    shouldApplyTopPadding: shouldApplyTopPadding,
+    children: content
+  }, "main")];
+  if (!disableResizer) {
+    if (direction === 'w') {
+      main.unshift(handle);
+    } else {
+      main.push(handle);
+    }
+  }
+  return main;
+};
+export default Resizer;

package/lib/components/Drawer/ResizerCore.js

@@ -0,0 +1,213 @@
+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; }
+/**
+ * Borrows heavily from and inspired by react-draggable https://github.com/react-grid-layout/react-draggable,
+ * basically a stripped-down version of it. Using only the core functionalities and using what we need from it
+ */
+
+import { useState, useEffect, cloneElement, useRef, Children } from 'react';
+import { createCoreData, getControlPosition, addEvent, removeEvent, addUserSelectStyles, getTouchIdentifier, removeUserSelectStyles } from './Drawer.utils';
+var eventsFor = {
+  touch: {
+    start: 'touchstart',
+    move: 'touchmove',
+    stop: 'touchend'
+  },
+  mouse: {
+    start: 'mousedown',
+    move: 'mousemove',
+    stop: 'mouseup'
+  }
+};
+
+// Default to mouse events.
+var dragEventFor = eventsFor.mouse;
+var animationRequestID = null;
+var ResizerCore = function ResizerCore(props) {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    touchIdentifier = _useState2[0],
+    setTouchIdentifier = _useState2[1];
+  var mounted = useRef(false);
+  var resizerRef = useRef();
+  var draggingRef = useRef(false);
+  var lastXRef = useRef(NaN);
+  var lastYRef = useRef(NaN);
+  useEffect(function () {
+    mounted.current = true;
+    // Touch handlers must be added with {passive: false} to be cancelable.
+    // https://developers.google.com/web/updates/2017/01/scrolling-intervention
+    var thisNode = findDOMNode();
+    if (thisNode) {
+      addEvent(thisNode, eventsFor.touch.start, onTouchStart, {
+        passive: false
+      });
+    }
+    return function () {
+      mounted.current = false;
+      // Remove any leftover event handlers. Remove both touch and mouse handlers in case
+      // some browser quirk caused a touch event to fire during a mouse move, or vice versa.
+      var thisNode = findDOMNode();
+      if (thisNode) {
+        var ownerDocument = thisNode.ownerDocument;
+        removeEvent(ownerDocument, eventsFor.mouse.move, handleDrag);
+        removeEvent(ownerDocument, eventsFor.touch.move, handleDrag);
+        removeEvent(ownerDocument, eventsFor.mouse.stop, _handleDragStop);
+        removeEvent(ownerDocument, eventsFor.touch.stop, _handleDragStop);
+        removeEvent(thisNode, eventsFor.touch.start, onTouchStart, {
+          passive: false
+        });
+        removeUserSelectStyles(ownerDocument);
+      }
+    };
+  }, []);
+
+  // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
+  // the underlying DOM node ourselves. See the README for more information.
+  var findDOMNode = function findDOMNode() {
+    return resizerRef.current;
+  };
+  var handleDragStart = function handleDragStart(e) {
+    // Make it possible to attach event handlers on top of this one.
+    if (props.onMouseDown) {
+      props.onMouseDown(e);
+    }
+
+    // Get nodes. Be sure to grab relative document (could be iframed)
+    var thisNode = findDOMNode();
+    if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {
+      throw new Error('not mounted on DragStart!');
+    }
+    var ownerDocument = thisNode.ownerDocument;
+
+    // Prevent scrolling on mobile devices, like ipad/iphone.
+    // Important that this is after handle/cancel.
+    if (e.type === 'touchstart') e.preventDefault();
+
+    // Set touch identifier in component state if this is a touch event. This allows us to
+    // distinguish between individual touches on multitouch screens by identifying which
+    // touchpoint was set to this element.
+    var touchIdentifier = getTouchIdentifier(e);
+    setTouchIdentifier(touchIdentifier);
+    // Get the current drag point from the event. This is used as the offset.
+    var position = getControlPosition(e, touchIdentifier, resizerRef.current);
+    var x = position.x,
+      y = position.y;
+
+    // Create an event object with all the data parents need to make a decision here.
+
+    if (mounted.current === false) return;
+
+    // Add a style to the body to disable user-select. This prevents text from
+    // being selected all over the page.
+    addUserSelectStyles(ownerDocument);
+
+    // Initiate dragging. Set the current x and y as offsets
+    // so we know how much we've moved during the drag. This allows us
+    // to drag elements around even if they have been moved, without issue.
+    lastXRef.current = x;
+    lastYRef.current = y;
+    draggingRef.current = true;
+
+    // Add events to the document directly so we catch when the user's mouse/touch moves outside of
+    // this element. We use different events depending on whether or not we have detected that this
+    // is a touch-capable device.
+    addEvent(ownerDocument, dragEventFor.move, handleDrag);
+    addEvent(ownerDocument, dragEventFor.stop, _handleDragStop);
+  };
+  var handleDrag = function handleDrag(e) {
+    if (animationRequestID) {
+      window.cancelAnimationFrame(animationRequestID);
+    }
+    animationRequestID = window.requestAnimationFrame(function () {
+      var position = getControlPosition(e, touchIdentifier, resizerRef.current);
+      if (position == null) return;
+      var x = position.x,
+        y = position.y;
+      var coreEvent = createCoreData({
+        node: resizerRef.current,
+        lastPositions: {
+          x: lastXRef.current,
+          y: lastYRef.current
+        },
+        x: x,
+        y: y
+      });
+
+      // Call event handler
+      var shouldUpdate = props.onDrag(e, coreEvent);
+      if (shouldUpdate === false || mounted.current === false) return;
+      lastXRef.current = x;
+      lastYRef.current = y;
+      animationRequestID = null;
+    });
+    // Get the current drag point from the event. This is used as the offset.
+  };
+  var _handleDragStop = function handleDragStop(e) {
+    if (!draggingRef.current) return;
+    var position = getControlPosition(e, touchIdentifier, resizerRef.current);
+    if (position == null) return;
+    var x = position.x,
+      y = position.y;
+    var coreEvent = createCoreData({
+      node: resizerRef.current,
+      lastPositions: {
+        x: lastXRef.current,
+        y: lastYRef.current
+      },
+      x: x,
+      y: y
+    });
+
+    // Call event handler
+    var shouldContinue = props.onStop(e, coreEvent);
+    if (shouldContinue === false || mounted.current === false) return false;
+    var thisNode = findDOMNode();
+    if (thisNode) {
+      // Remove user-select hack
+      removeUserSelectStyles(thisNode.ownerDocument);
+    }
+
+    // Reset the el.
+    lastXRef.current = NaN;
+    lastYRef.current = NaN;
+    draggingRef.current = false;
+    if (thisNode) {
+      // Remove event handlers
+      removeEvent(thisNode.ownerDocument, dragEventFor.move, handleDrag);
+      removeEvent(thisNode.ownerDocument, dragEventFor.stop, _handleDragStop);
+    }
+  };
+  var onMouseDown = function onMouseDown(e) {
+    dragEventFor = eventsFor.mouse; // on touchscreen laptops we could switch back to mouse
+
+    return handleDragStart(e);
+  };
+  var onMouseUp = function onMouseUp(e) {
+    dragEventFor = eventsFor.mouse;
+    return _handleDragStop(e);
+  };
+
+  // Same as onMouseDown (start drag), but now consider this a touch device.
+  var onTouchStart = function onTouchStart(e) {
+    // We're on a touch device now, so change the event handlers
+    dragEventFor = eventsFor.touch;
+    return handleDragStart(e);
+  };
+  var onTouchEnd = function onTouchEnd(e) {
+    // We're on a touch device now, so change the event handlers
+    dragEventFor = eventsFor.touch;
+    return _handleDragStop(e);
+  };
+  return /*#__PURE__*/cloneElement(Children.only(props.children), {
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onTouchEnd: onTouchEnd,
+    ref: resizerRef
+  });
+};
+export default ResizerCore;

package/lib/components/Drawer/index.js

@@ -0,0 +1,68 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useRef, memo } from 'react';
+import { SidebarRight } from '@scaleflex/icons';
+import Resizer from './Resizer';
+import Styled from './Drawer.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Drawer = function Drawer(_ref) {
+  var style = _ref.style,
+    closeFn = _ref.closeFn,
+    position = _ref.position,
+    direction = _ref.direction,
+    _ref$noTopMargin = _ref.noTopMargin,
+    noTopMargin = _ref$noTopMargin === void 0 ? true : _ref$noTopMargin,
+    children = _ref.children,
+    disableResizer = _ref.disableResizer,
+    _ref$showCloseIcon = _ref.showCloseIcon,
+    showCloseIcon = _ref$showCloseIcon === void 0 ? true : _ref$showCloseIcon,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 276 : _ref$minWidth,
+    _ref$defaultWidth = _ref.defaultWidth,
+    defaultWidth = _ref$defaultWidth === void 0 ? 276 : _ref$defaultWidth,
+    resizerStyle = _ref.resizerStyle,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 500 : _ref$maxWidth,
+    noBorderRadius = _ref.noBorderRadius,
+    noResizerShadow = _ref.noResizerShadow,
+    onResize = _ref.onResize;
+  var wrapperRef = useRef(null);
+  var isLeftPosition = position === 'left';
+  return /*#__PURE__*/_jsx(Resizer, {
+    direction: direction,
+    position: position,
+    minWidth: minWidth,
+    defaultWidth: defaultWidth,
+    resizerStyle: resizerStyle,
+    maxWidth: maxWidth,
+    disableResizer: disableResizer,
+    noTopMargin: noTopMargin,
+    noBorderRadius: noBorderRadius,
+    noResizerShadow: noResizerShadow,
+    onResize: onResize,
+    children: /*#__PURE__*/_jsx(Styled.NavWrapper, {
+      className: "filerobot-ProviderBrowserItem-SideNav-wrapper",
+      style: style,
+      ref: wrapperRef,
+      children: /*#__PURE__*/_jsxs(Styled.NavContent, {
+        className: "filerobot-ProviderBrowserItem-SideNav-content",
+        "data-testid": "sidebar",
+        children: [showCloseIcon && /*#__PURE__*/_jsx(Styled.CloseButton, {
+          size: "lg",
+          color: "basic",
+          onClick: typeof closeFn === 'function' && closeFn,
+          isLeftPosition: isLeftPosition,
+          "data-testid": "sidebar-close-btn",
+          children: function children(props) {
+            return /*#__PURE__*/_jsx(SidebarRight, _objectSpread({}, props));
+          }
+        }), children]
+      })
+    })
+  });
+};
+export default /*#__PURE__*/memo(Drawer);

package/lib/components/EmptyViewPlaceholder/EmptyViewPlaceholder.styled.js

@@ -0,0 +1,39 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css } from 'styled-components';
+import { FV, PC } from '@scaleflex/widget-common';
+import { NoFiles } from '@scaleflex/icons';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  gap: 24px;\n"])), function (_ref) {
+  var isSmallScreen = _ref.isSmallScreen;
+  return isSmallScreen ? 'height: 100%;' : 'padding-top: 150px;';
+});
+var TextsWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n"])));
+var Title = styled.h3(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0;\n  ", ";\n  color: ", ";\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.typography.font[FV.LabelExtraLargeEmphasis];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.palette[PC.TextSecondary];
+});
+var Hint = styled.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 0;\n  ", ";\n  color: ", ";\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.typography.font[FV.TextLarge];
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.palette[PC.TextSecondary];
+});
+var NoFilesIcon = styled(NoFiles)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n\n  ", "\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.palette[PC.IconsPlaceholder];
+}, function (_ref7) {
+  var $isSearchOrFiltersApplied = _ref7.$isSearchOrFiltersApplied;
+  return !$isSearchOrFiltersApplied && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 150px;\n    height: 112px;\n  "])));
+});
+var Styled = {
+  Wrapper: Wrapper,
+  TextsWrapper: TextsWrapper,
+  Title: Title,
+  Hint: Hint,
+  NoFilesIcon: NoFilesIcon
+};
+export default Styled;