@linzjs/lui 17.26.1-1 → 17.28.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [17.28.1](https://github.com/linz/lui/compare/v17.28.0...v17.28.1) (2023-01-27)
+
+
+### Bug Fixes
+
+* dry-run semantic-release ([#826](https://github.com/linz/lui/issues/826)) ([5862a1b](https://github.com/linz/lui/commit/5862a1be0a3b1aba1060c7305bc170e07ec886c4))
+* Fixing release pipeline :tada: ([#827](https://github.com/linz/lui/issues/827)) ([208e32d](https://github.com/linz/lui/commit/208e32dbd3316c9368193d02538ea530bde9bd48))
+
+# [17.27.0](https://github.com/linz/lui/compare/v17.26.0...v17.27.0) (2023-01-20)
+
+
+### Bug Fixes
+
+* remove dry-run ([#817](https://github.com/linz/lui/issues/817)) ([763c619](https://github.com/linz/lui/commit/763c619348ac770aeb3499cb379b2ce24f66dbe4))
+
+
+### Features
+
+* Adding support for [@next](https://github.com/next) release distribution ([#815](https://github.com/linz/lui/issues/815)) ([d2808da](https://github.com/linz/lui/commit/d2808da61ee4b39dc7f65bd14579d6d54eb48779))
+
 # [17.26.0](https://github.com/linz/lui/compare/v17.25.1...v17.26.0) (2023-01-05)
 
 

package/README.md

@@ -42,7 +42,7 @@ We aim to make each component generic, extendable, accessible, and amazing.
 All styles are implemented in SCSS and compiled to plain CSS. This means any team can use the CSS. A ReactJS wrapper
 over the CSS is part of this project.
 
-There is lots to do in this project, often things will be left until there is demand. Please join the Slack channel
+There are lots of things to do in this project, often things will be left until there is demand. Please join the Slack channel
 #cop-lui.
 
 ## Documentation 

package/dist/components/LuiResizableLayout/LuiResizableLayout.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode, RefObject } from 'react';
 import { MinSizes } from 'split-grid';
-import './LuiResizableLayout.scss';
+import '../../scss/Components/LuiResizableLayout/LuiResizableLayout.scss';
 export declare enum SplitPanelState {
     OPEN = 0,
     CLOSED_LEFT = 1,
@@ -14,7 +14,8 @@ export declare const LuiResizableLayout: React.FC<{
     givenGridTemplateColumns?: string;
     givenColumnMinSizes?: MinSizes;
     givenColumnSnapOffset?: number;
-    callbackOnSplitStateChange?: (currentSplitState: SplitPanelState, leftWidth: number, rightWidth: number, gridTemplateColumns: string) => void;
+    callbackOnSplitStateChange?: (currentSplitState: SplitPanelState, leftWidth: number, rightWidth: number) => void;
+    callbackOnDraging?: (newColumnPosition: string) => void;
     splitStateChecker?: (leftWidth: number, rightWidth: number) => SplitPanelState;
     callbackOnClickLeftArrowButton?: (leftWidth: number, rightWidth: number) => void;
     callbackOnClickRightArrowButton?: (leftWidth: number, rightWidth: number) => void;

package/dist/index.js

@@ -2829,7 +2829,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) {
@@ -2858,7 +2858,7 @@ exports.SplitPanelState = void 0;
     SplitPanelState[SplitPanelState["CLOSED_RIGHT"] = 2] = "CLOSED_RIGHT";
 })(exports.SplitPanelState || (exports.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 = React.useState(givenGridTemplateColumns ? givenGridTemplateColumns : '1fr 4px 1fr'), gridTemplateColumns = _a[0], setGridTemplateColumns = _a[1];
     var _b = React.useState(0), leftWidth = _b[0], setLeftWidth = _b[1];
     var _c = React.useState(0), rightWidth = _c[0], setRightWidth = _c[1];
@@ -2867,10 +2867,10 @@ var LuiResizableLayout = function (props) {
     var defaultRightRef = React.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) {
@@ -2907,8 +2907,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);
@@ -2923,9 +2923,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