@luminati-io/uikit 6.3.69 → 6.3.71

package/dist/umd/uikit.development.js

@@ -42424,11 +42424,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _typography__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../typography */ "./src/typography/index.js");
 /* harmony import */ var _icon_button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../icon_button */ "./src/icon_button.js");
 /* harmony import */ var _modal_modal2__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../modal/modal2 */ "./src/modal/modal2.js");
-/* harmony import */ var _styled__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./styled */ "./src/drawer/styled.js");
+/* harmony import */ var _resizer__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./resizer */ "./src/drawer/resizer.js");
+/* harmony import */ var _styled__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./styled */ "./src/drawer/styled.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
+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; }
+
 
 
 
@@ -42468,10 +42476,28 @@ var Drawer = function Drawer(_ref) {
     classNames = _ref.classNames,
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? _constants__WEBPACK_IMPORTED_MODULE_2__.Z_INDEX.drawer : _ref$zIndex,
-    destroyOnClose = _ref.destroyOnClose;
+    destroyOnClose = _ref.destroyOnClose,
+    _ref$resizable = _ref.resizable,
+    resizable = _ref$resizable === void 0 ? false : _ref$resizable,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 512 : _ref$minWidth,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 812 : _ref$maxWidth;
+  var drawerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
   var renderCancel = !footer && !!(onCancel && cancelLabel);
   var renderOk = !footer && !!(onOk && okLabel);
   var renderFooter = !!footer || renderOk || renderCancel;
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(width),
+    _useState2 = _slicedToArray(_useState, 2),
+    drawerWidth = _useState2[0],
+    setDrawerWidth = _useState2[1];
+  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+    if (!resizable) setDrawerWidth(width);
+  }, [width, resizable]);
+  var handleWidthChange = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (newWidth) {
+    setDrawerWidth(newWidth);
+  }, []);
+
   // Motion
   var maskMotion = {
     motionName: "".concat(classNamePrefix, "-mask-motion"),
@@ -42489,8 +42515,9 @@ var Drawer = function Drawer(_ref) {
       motionDeadline: 500
     };
   };
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_styled__WEBPACK_IMPORTED_MODULE_6__.StyledDrawer, {
-    width: width,
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_styled__WEBPACK_IMPORTED_MODULE_7__.StyledDrawer, {
+    panelRef: drawerRef,
+    width: drawerWidth,
     height: height,
     open: open,
     onClose: onClose,
@@ -42507,7 +42534,16 @@ var Drawer = function Drawer(_ref) {
     maskMotion: maskMotion,
     motion: motion,
     destroyOnClose: destroyOnClose
-  }, closable && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_4__.IconButton, {
+  }, resizable && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_resizer__WEBPACK_IMPORTED_MODULE_6__.Resizer, {
+    className: "".concat(classNamePrefix, "-resizer"),
+    placement: placement,
+    zIndex: zIndex + 1,
+    minWidth: minWidth,
+    maxWidth: maxWidth,
+    currentWidth: drawerWidth,
+    onWidthChange: handleWidthChange,
+    containerRef: drawerRef
+  }), closable && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_icon_button__WEBPACK_IMPORTED_MODULE_4__.IconButton, {
     className: "".concat(classNamePrefix, "-close"),
     size: "xs",
     icon: "Close",
@@ -42564,7 +42600,10 @@ Drawer.propTypes = {
     section: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().string)
   }),
   zIndex: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
-  destroyOnClose: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool)
+  destroyOnClose: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  resizable: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().bool),
+  minWidth: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number),
+  maxWidth: (prop_types__WEBPACK_IMPORTED_MODULE_0___default().number)
 };
 
 /***/ }),
@@ -42587,6 +42626,116 @@ __webpack_require__.r(__webpack_exports__);
 /*jslint react:true*/
 
 
+/***/ }),
+
+/***/ "./src/drawer/resizer.js":
+/*!*******************************!*\
+  !*** ./src/drawer/resizer.js ***!
+  \*******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Resizer: () => (/* binding */ Resizer)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _styled__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./styled */ "./src/drawer/styled.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+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; }
+
+
+var Resizer = function Resizer(_ref) {
+  var className = _ref.className,
+    placement = _ref.placement,
+    zIndex = _ref.zIndex,
+    containerRef = _ref.containerRef,
+    onWidthChange = _ref.onWidthChange,
+    minWidth = _ref.minWidth,
+    maxWidth = _ref.maxWidth;
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isResizing = _useState2[0],
+    setIsResizing = _useState2[1];
+  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    startX = _useState4[0],
+    setStartX = _useState4[1];
+  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    startWidth = _useState6[0],
+    setStartWidth = _useState6[1];
+  var handleMouseDown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+    var _containerRef$current;
+    e.preventDefault();
+    setIsResizing(true);
+    setStartX(e.clientX);
+    setStartWidth((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth);
+  }, []);
+  var handleTouchStart = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+    var _containerRef$current2;
+    e.preventDefault();
+    setIsResizing(true);
+    setStartX(e.touches[0].clientX);
+    setStartWidth((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetWidth);
+  }, []);
+  var handleMouseMove = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+    if (!isResizing) return;
+    var delta = placement === 'right' ? startX - e.clientX : e.clientX - startX;
+    var newWidth = startWidth + delta;
+    newWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
+    onWidthChange(newWidth + 'px');
+  }, [isResizing, placement, startX, startWidth, minWidth, maxWidth, onWidthChange]);
+  var handleTouchMove = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+    if (!isResizing) return;
+    var delta = placement === 'right' ? startX - e.touches[0].clientX : e.touches[0].clientX - startX;
+    var newWidth = startWidth + delta;
+    newWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
+    onWidthChange(newWidth);
+  }, [isResizing, placement, startX, startWidth, minWidth, maxWidth, onWidthChange]);
+  var handleMouseUp = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    setIsResizing(false);
+  }, []);
+  var handleTouchEnd = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    setIsResizing(false);
+  }, []);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    if (isResizing) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.addEventListener('touchmove', handleTouchMove, {
+        passive: false
+      });
+      document.addEventListener('touchend', handleTouchEnd);
+    }
+    return function () {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('touchmove', handleTouchMove);
+      document.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, [isResizing, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_styled__WEBPACK_IMPORTED_MODULE_1__.StyledResizer, {
+    $placement: placement,
+    $zIndex: zIndex,
+    $isResizing: isResizing,
+    className: className,
+    onMouseDown: handleMouseDown,
+    onTouchStart: handleTouchStart,
+    "aria-label": "Resize drawer",
+    role: "separator"
+  });
+};
+
 /***/ }),
 
 /***/ "./src/drawer/styled.js":
@@ -42598,7 +42747,8 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   StyledDrawer: () => (/* binding */ StyledDrawer)
+/* harmony export */   StyledDrawer: () => (/* binding */ StyledDrawer),
+/* harmony export */   StyledResizer: () => (/* binding */ StyledResizer)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -42679,6 +42829,20 @@ var StyledDrawer = styled_components__WEBPACK_IMPORTED_MODULE_1___default()(Draw
 }), theme(function (t) {
   return t.color.border_secondary;
 }));
+var StyledResizer = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.withConfig({
+  displayName: "StyledResizer",
+  componentId: "sc-12ycvcn-1"
+})(["position:absolute;top:0;", " width:4px;height:100%;cursor:col-resize;z-index:", ";&::after{content:'';position:absolute;top:0;", " width:4px;height:100%;background:", ";opacity:", ";transition:opacity 0.2s;}&:hover::after{opacity:1;}"], function (p) {
+  return p.$placement == 'right' ? 'left: 0;' : 'right: 0;';
+}, function (p) {
+  return p.$zIndex;
+}, function (p) {
+  return p.$placement === 'right' ? 'left: 0px;' : 'right: 0px;';
+}, theme(function (t) {
+  return t.color.border_primary_hover;
+}), function (p) {
+  return p.$isResizing ? 1 : 0;
+});
 
 /***/ }),
 
@@ -51916,6 +52080,9 @@ var Modal2 = function Modal2(_ref) {
       }
     },
     afterClose: afterClose,
+    destroyOnHidden: destroyOnClose
+    // deprecated: https://github.com/react-component/dialog/commit/855dfe97ffc4a1dceb3659d9b9483ca57b411389
+    ,
     destroyOnClose: destroyOnClose,
     keyboard: false,
     animation: "zoom",
@@ -61370,19 +61537,12 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /*jslint react:true*/
-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; }
 
 var useLiveRef = function useLiveRef(target) {
-  var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(target);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
     ref.current = target;
-  }, [target].concat(_toConsumableArray(deps)));
+  }, [target]);
   return ref;
 };