react-dialogger 1.1.141 → 1.1.142

package/components/DialogContent.js

@@ -64,7 +64,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_draggable_1 = __importDefault(require("react-draggable"));
 var _helpers_1 = require("../helpers/index.js");
 var React = __importStar(require("react"));
-var _icons_1 = require("../icons/index.js");
 var notistack_1 = require("notistack");
 var _1 = require("./");
 var react_1 = require("react");
@@ -73,6 +72,7 @@ var _context_1 = require("../context/index.js");
 var appLogger_1 = require("../helpers/appLogger");
 var PlusIcon_1 = __importDefault(require("../icons/PlusIcon"));
 var MinusIcon_1 = __importDefault(require("../icons/MinusIcon"));
+var go_1 = require("react-icons/go");
 var DialogContent = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var firstUpdate = React.useRef(true);
@@ -81,9 +81,10 @@ var DialogContent = function (props) {
     var baseOptions = dialogOptions.base;
     var _l = React.useState(false), fullscreenMode = _l[0], setFullscreenMode = _l[1];
     var _m = React.useState(null), rect = _m[0], setRect = _m[1];
+    var _o = React.useState(!!(baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.resizeable)), showResizeHint = _o[0], setShowResizeHint = _o[1];
     var bounds = ((_a = dialog.dialogOptions.base) === null || _a === void 0 ? void 0 : _a.memoBounds) ? (0, _helpers_1.getDialogBounds)(dialog.dialogOptions.base.id) : null;
     var domZIndex = window.getComputedStyle(dialog.getDom()).zIndex;
-    var _o = React.useState(((_b = bounds === null || bounds === void 0 ? void 0 : bounds.scale) !== null && _b !== void 0 ? _b : ((_c = dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.scale) !== null && _c !== void 0 ? _c : 1))), zoom = _o[0], setZoom = _o[1];
+    var _p = React.useState(((_b = bounds === null || bounds === void 0 ? void 0 : bounds.scale) !== null && _b !== void 0 ? _b : ((_c = dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.scale) !== null && _c !== void 0 ? _c : 1))), zoom = _p[0], setZoom = _p[1];
     var positionSelector = function () {
         var _a;
         var _b;
@@ -123,6 +124,13 @@ var DialogContent = function (props) {
             (0, jumper_animate_1.jumperAnimate)(dialogRef.current);
         }
     }, []);
+    // Resize hint — auto-hide after animation completes (3.2s lifecycle)
+    (0, react_1.useEffect)(function () {
+        if (!showResizeHint)
+            return;
+        var t = setTimeout(function () { return setShowResizeHint(false); }, 3200);
+        return function () { return clearTimeout(t); };
+    }, []);
     // Set Rect
     (0, react_1.useEffect)(function () {
         setRect(positionSelector());
@@ -220,6 +228,6 @@ var DialogContent = function (props) {
                                                 setTimeout(function () {
                                                     event.clientX;
                                                 });
-                                            }, children: (0, jsx_runtime_1.jsx)(MinusIcon_1.default, { size: 22 }) })] }), (0, jsx_runtime_1.jsxs)("span", { className: 'dialog-zoom-label', children: [(Math.round(zoom * 100)), "%"] })] }), (dialog.props.header || dialogOptions.slot.header) && ((0, jsx_runtime_1.jsx)(_1.DialogContentHeader, { ref: headerRef, header: dialog.props.header, bounds: bounds })), (0, jsx_runtime_1.jsx)(_1.DialogContentBody, { ref: bodyRef, body: body }), (0, jsx_runtime_1.jsx)(_1.DialogContentFooter, { ref: footerRef }), (baseOptions.resizeable) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-n", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('n') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-s", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('s') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-e", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('e') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-w", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('w') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-nw", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('nw') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-ne", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('ne') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-sw", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('sw') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-se", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('se'), children: (0, jsx_runtime_1.jsx)(_icons_1.ResizeIcon, { color: '#286e94' }) })] })] }) }) });
+                                            }, children: (0, jsx_runtime_1.jsx)(MinusIcon_1.default, { size: 22 }) })] }), (0, jsx_runtime_1.jsxs)("span", { className: 'dialog-zoom-label', children: [(Math.round(zoom * 100)), "%"] })] }), (dialog.props.header || dialogOptions.slot.header) && ((0, jsx_runtime_1.jsx)(_1.DialogContentHeader, { ref: headerRef, header: dialog.props.header, bounds: bounds })), (0, jsx_runtime_1.jsx)(_1.DialogContentBody, { ref: bodyRef, body: body }), (0, jsx_runtime_1.jsx)(_1.DialogContentFooter, { ref: footerRef }), (baseOptions.resizeable && showResizeHint) && ((0, jsx_runtime_1.jsxs)("div", { className: "resize-hint-overlay", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("div", { className: "rh rh-n", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowUp, { size: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: "rh rh-ne", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowUpRight, { size: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: "rh rh-e", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowRight, { size: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: "rh rh-se", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowDownRight, { size: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: "rh rh-s", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowDown, { size: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: "rh rh-sw", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowDownLeft, { size: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: "rh rh-w", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowLeft, { size: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: "rh rh-nw", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowUpLeft, { size: 16 }) })] })), (baseOptions.resizeable) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-n", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('n') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-s", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('s') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-e", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('e') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-w", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('w') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-nw", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('nw') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-ne", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('ne') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-sw", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('sw') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-se", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('se') })] })] }) }) });
 };
 exports.DialogContent = DialogContent;

package/helpers/Resizeable.js

@@ -75,7 +75,13 @@ var Resizeable = /** @class */ (function () {
             // CSS position = visual position minus Draggable's transform offset
             _this._startCssLeft = rect.left - translate.x;
             _this._startCssTop = rect.top - translate.y;
-            _this._container.current.classList.add('no-select-on-resize');
+            // Pin absolute position immediately so justify-self / margin centering
+            // cannot shift the left/top edge while we resize from the right or bottom.
+            var container = _this._container.current;
+            container.style.position = 'absolute';
+            container.style.left = _this._startCssLeft + 'px';
+            container.style.top = _this._startCssTop + 'px';
+            container.classList.add('no-select-on-resize');
             _this.init();
         }; };
         this.resizeHandleMouseMove = function (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.141",
+  "version": "1.1.142",
   "description": "This package is a continuation of the react-araci package. Due to an error, react-araci was removed, and it has been decided to continue under the new package name react-dialogger",
   "main": "index.js",
   "author": "Sueleyman Topaloglu",
@@ -12,7 +12,8 @@
     "notistack": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.6"
+    "react-draggable": "^4.4.6",
+    "react-icons": "^5.6.0"
   },
   "maintainers": [
     {

package/styles/dialog.css

@@ -322,6 +322,64 @@
   flex: 0;
   overflow: hidden;
 }
+.dialog-main .resize-hint-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 500;
+  animation: resizeHintFade 3.2s ease-in-out forwards;
+}
+.dialog-main .rh {
+  position: absolute;
+  pointer-events: none;
+}
+.dialog-main .rh.rh-n {
+  top: 8px;
+  left: 50%;
+  translate: -50% 0;
+  animation: rhBounce-n 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh.rh-s {
+  bottom: 8px;
+  left: 50%;
+  translate: -50% 0;
+  animation: rhBounce-s 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh.rh-e {
+  right: 8px;
+  top: 50%;
+  translate: 0 -50%;
+  animation: rhBounce-e 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh.rh-w {
+  left: 8px;
+  top: 50%;
+  translate: 0 -50%;
+  animation: rhBounce-w 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh.rh-nw {
+  top: 8px;
+  left: 8px;
+  animation: rhBounce-nw 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh.rh-ne {
+  top: 8px;
+  right: 8px;
+  animation: rhBounce-ne 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh.rh-sw {
+  bottom: 8px;
+  left: 8px;
+  animation: rhBounce-sw 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh.rh-se {
+  bottom: 8px;
+  right: 8px;
+  animation: rhBounce-se 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh svg {
+  color: rgba(40, 110, 148, 0.85);
+}
 .dialog-main .resize-handle {
   position: absolute;
   user-select: none;
@@ -391,6 +449,60 @@
   bottom: 0;
 }
 
+@keyframes resizeHintFade {
+  0% {
+    opacity: 0;
+  }
+  12% {
+    opacity: 1;
+  }
+  78% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes rhBounce-n {
+  to {
+    transform: translateY(-5px);
+  }
+}
+@keyframes rhBounce-s {
+  to {
+    transform: translateY(5px);
+  }
+}
+@keyframes rhBounce-e {
+  to {
+    transform: translateX(5px);
+  }
+}
+@keyframes rhBounce-w {
+  to {
+    transform: translateX(-5px);
+  }
+}
+@keyframes rhBounce-nw {
+  to {
+    transform: translate(-4px, -4px);
+  }
+}
+@keyframes rhBounce-ne {
+  to {
+    transform: translate(4px, -4px);
+  }
+}
+@keyframes rhBounce-sw {
+  to {
+    transform: translate(-4px, 4px);
+  }
+}
+@keyframes rhBounce-se {
+  to {
+    transform: translate(4px, 4px);
+  }
+}
 .fullscreen {
   -webkit-transform: inherit !important;
   -moz-transform: inherit !important;