@linzjs/lui 17.26.1-1 → 17.28.1

package/dist/lui.esm.js

@@ -2800,7 +2800,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$9 = ".LuiResizableLayout-leftPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-rightPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-leftPanelBody {\n  overflow-y: auto;\n}\n\n.LuiResizableLayout-gutterParentControl {\n  display: flex;\n  /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */\n  visibility: hidden;\n  opacity: 0;\n  position: fixed;\n  top: 50%;\n  z-index: 500;\n  margin-left: -30px;\n  /*half total control width, minus half the gutter width*/\n  transition: 0.3s all 2s ease-in;\n}\n\n.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {\n  background-color: #EAEAEA;\n  width: 32px;\n  height: 80px;\n  text-align: center;\n  display: flex;\n  align-items: center;\n}\n\n.LuiResizableLayout-gutterControlLeft {\n  border-radius: 3px 0 0 3px;\n}\n\n.LuiResizableLayout-gutterControlRight {\n  border-radius: 0 3px 3px 0;\n}\n\n.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {\n  height: auto;\n}\n\n.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {\n  background-color: #73c8e1;\n  cursor: pointer;\n}\n\n.LuiResizableLayout-gutterControl-collapsed {\n  visibility: hidden;\n}\n\n/* TODO: move the expand gutter button so it doesn't show over the scroll bar */\n.LuiResizableLayout-gutterParentControlVisible {\n  visibility: visible;\n  opacity: 1;\n}\n\n.LuiResizableLayout-grid {\n  display: grid;\n  height: 100%;\n}\n\n.LuiResizableLayout-gutterCol {\n  grid-row: 1/-1;\n  cursor: col-resize;\n  width: 16px;\n  z-index: 1;\n}\n\n.LuiResizableLayout-gutterCol-collapsed {\n  width: 4px;\n}\n\n.LuiResizableLayout-gutterCol1 {\n  grid-column: 2;\n}\n\n.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {\n  visibility: visible;\n  opacity: 1;\n  transition: 0s all 0s ease-in;\n}\n\n.LuiResizableLayout-gutterSlider {\n  width: 4px;\n  height: 100%;\n  background-color: #EAEAEA;\n  pointer-events: none;\n}\n\n.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {\n  background-color: #73c8e1;\n}";
+var css_248z$9 = ".LuiResizableLayout-leftPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-rightPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-leftPanelBody {\n  overflow-y: auto;\n}\n\n.LuiResizableLayout-gutterParentControl {\n  display: flex;\n  /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */\n  visibility: hidden;\n  opacity: 0;\n  position: fixed;\n  top: 50%;\n  z-index: 500;\n  margin-left: -30px;\n  /*half total control width, minus half the gutter width*/\n  transition: 0.3s all 2s ease-in;\n}\n\n.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {\n  background-color: #eaeaea;\n  width: 32px;\n  height: 80px;\n  text-align: center;\n  display: flex;\n  align-items: center;\n}\n\n.LuiResizableLayout-gutterControlLeft {\n  border-radius: 3px 0 0 3px;\n}\n\n.LuiResizableLayout-gutterControlRight {\n  border-radius: 0 3px 3px 0;\n}\n\n.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {\n  height: auto;\n}\n\n.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {\n  background-color: #73c8e1;\n  cursor: pointer;\n}\n\n.LuiResizableLayout-gutterControl-collapsed {\n  visibility: hidden;\n}\n\n/* TODO: move the expand gutter button so it doesn't show over the scroll bar */\n.LuiResizableLayout-gutterParentControlVisible {\n  visibility: visible;\n  opacity: 1;\n}\n\n.LuiResizableLayout-grid {\n  display: grid;\n  height: 100%;\n}\n\n.LuiResizableLayout-gutterCol {\n  grid-row: 1/-1;\n  cursor: col-resize;\n  width: 16px;\n  z-index: 1;\n}\n\n.LuiResizableLayout-gutterCol-collapsed {\n  width: 4px;\n}\n\n.LuiResizableLayout-gutterCol1 {\n  grid-column: 2;\n}\n\n.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {\n  visibility: visible;\n  opacity: 1;\n  transition: 0s all 0s ease-in;\n}\n\n.LuiResizableLayout-gutterSlider {\n  width: 4px;\n  height: 100%;\n  background-color: #eaeaea;\n  pointer-events: none;\n}\n\n.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {\n  background-color: #73c8e1;\n}";
 styleInject(css_248z$9);
 
 var GutterComponent = function (props) {
@@ -2829,7 +2829,7 @@ var SplitPanelState;
     SplitPanelState[SplitPanelState["CLOSED_RIGHT"] = 2] = "CLOSED_RIGHT";
 })(SplitPanelState || (SplitPanelState = {}));
 var LuiResizableLayout = function (props) {
-    var givenLeftRef = props.givenLeftRef, givenRightRef = props.givenRightRef, givenGridTemplateColumns = props.givenGridTemplateColumns, givenColumnMinSizes = props.givenColumnMinSizes, givenColumnSnapOffset = props.givenColumnSnapOffset, callbackOnClickLeftArrowButton = props.callbackOnClickLeftArrowButton, callbackOnClickRightArrowButton = props.callbackOnClickRightArrowButton;
+    var givenLeftRef = props.givenLeftRef, givenRightRef = props.givenRightRef, givenGridTemplateColumns = props.givenGridTemplateColumns, givenColumnMinSizes = props.givenColumnMinSizes, givenColumnSnapOffset = props.givenColumnSnapOffset, callbackOnClickLeftArrowButton = props.callbackOnClickLeftArrowButton, callbackOnClickRightArrowButton = props.callbackOnClickRightArrowButton, callbackOnDraging = props.callbackOnDraging;
     var _a = useState(givenGridTemplateColumns ? givenGridTemplateColumns : '1fr 4px 1fr'), gridTemplateColumns = _a[0], setGridTemplateColumns = _a[1];
     var _b = useState(0), leftWidth = _b[0], setLeftWidth = _b[1];
     var _c = useState(0), rightWidth = _c[0], setRightWidth = _c[1];
@@ -2838,10 +2838,10 @@ var LuiResizableLayout = function (props) {
     var defaultRightRef = useRef(null);
     var leftRef = givenLeftRef ? givenLeftRef : defaultLeftRef;
     var rightRef = givenRightRef ? givenRightRef : defaultRightRef;
-    var updateSplitStateAndNotifyParent = function (newSplitState, leftWidth, rightWidth, currentGridTemplateColumns) {
+    var updateSplitStateAndNotifyParent = function (newSplitState, leftWidth, rightWidth) {
         setSplitState(newSplitState);
         props.callbackOnSplitStateChange &&
-            props.callbackOnSplitStateChange(newSplitState, leftWidth, rightWidth, currentGridTemplateColumns);
+            props.callbackOnSplitStateChange(newSplitState, leftWidth, rightWidth);
     };
     var defaultSplitStateChecker = function (leftWidth, rightWidth) {
         if (leftWidth <= 0) {
@@ -2878,8 +2878,8 @@ var LuiResizableLayout = function (props) {
                 var rightWidth = observerRight.contentRect.width;
                 // Update split state
                 props.splitStateChecker
-                    ? updateSplitStateAndNotifyParent(props.splitStateChecker(leftWidth, rightWidth), leftWidth, rightWidth, gridTemplateColumns)
-                    : updateSplitStateAndNotifyParent(defaultSplitStateChecker(leftWidth, rightWidth), leftWidth, rightWidth, gridTemplateColumns);
+                    ? updateSplitStateAndNotifyParent(props.splitStateChecker(leftWidth, rightWidth), leftWidth, rightWidth)
+                    : updateSplitStateAndNotifyParent(defaultSplitStateChecker(leftWidth, rightWidth), leftWidth, rightWidth);
                 // update the panel widths, which will be used to passed to the leftArrow/rightArrow button call back
                 setLeftWidth(leftWidth);
                 setRightWidth(rightWidth);
@@ -2894,9 +2894,9 @@ var LuiResizableLayout = function (props) {
         return function () { return obs === null || obs === void 0 ? void 0 : obs.disconnect(); };
     }, [leftRef.current, rightRef.current]);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // @ts-ignore
     var handleDrag = function (direction, track, style) {
-        console.log("direction is ".concat(direction, ", track ").concat(track));
-        setGridTemplateColumns(style);
+        callbackOnDraging && callbackOnDraging(style);
     };
     var onLeftClickArrowButton = function (leftWidth, rightWidth) {
         callbackOnClickLeftArrowButton