@linzjs/lui 17.36.3 → 17.36.5

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [17.36.5](https://github.com/linz/lui/compare/v17.36.4...v17.36.5) (2023-02-28)
+
+
+### Bug Fixes
+
+* scroll to auto and z-index for splash modal ([#848](https://github.com/linz/lui/issues/848)) ([7a5ef79](https://github.com/linz/lui/commit/7a5ef797e76f91ced5b3647a9e171d31935ddf2e))
+
+## [17.36.4](https://github.com/linz/lui/compare/v17.36.3...v17.36.4) (2023-02-22)
+
+
+### Bug Fixes
+
+* Reference to pre-defined lui colors and shadows where applicable ([#862](https://github.com/linz/lui/issues/862)) ([38c7d3d](https://github.com/linz/lui/commit/38c7d3d2a1bcdb86f789b41358f6a6e81c3c299d))
+
 ## [17.36.3](https://github.com/linz/lui/compare/v17.36.2...v17.36.3) (2023-02-20)
 
 

package/dist/components/LuiSidePanel/LuiSidePanel.d.ts

@@ -4,5 +4,6 @@ export declare const LuiSidePanel: React.FC<React.PropsWithChildren<{
     width?: string;
     closeBtnTitleAttr?: string;
     top?: number;
+    classNames?: string;
 }>>;
 export declare const LuiSidePanelProvider: React.FC<React.PropsWithChildren<unknown>>;

package/dist/index.js

@@ -12879,7 +12879,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$a = ".LuiFloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.LuiFloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindow-window {\n  box-shadow: 0 0 10px #0071981a;\n  position: absolute;\n  background-color: #fff;\n  top: 10%;\n  left: 5%;\n  display: flex;\n  flex-direction: column;\n  border-radius: 9px;\n}\n\n.FloatingWindow-container {\n  display: flex;\n  height: calc(100% - 50px);\n  width: 100%;\n  overflow: auto;\n}\n\n.FloatingWindow-header-element {\n  flex: 0;\n}\n\n.FloatingWindow-header {\n  height: 48px;\n  line-height: 48px;\n  color: #6b6966;\n  padding: 0 8px;\n  display: flex;\n  overflow: hidden;\n  justify-content: space-between;\n  border-bottom: 2px #eaeaea solid;\n  font-size: 1em;\n  font-weight: 600;\n}\n\n.FloatingWindow-header-title-text {\n  font-size: 1em;\n  font-weight: 600;\n  overflow: hidden;\n}\n\n.FloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.FloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindowHeaderButton-button {\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  border-radius: 50%;\n  background-color: transparent;\n  color: #000;\n  display: flex;\n}\n\n.FloatingWindowHeaderButton-icon {\n  fill: #6b6966;\n}\n\n.floating-window-icon {\n  display: inline-block;\n  height: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  width: 24px;\n  fill: #6b6966;\n}";
+var css_248z$a = ".LuiFloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.LuiFloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindow-window {\n  box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;\n  position: absolute;\n  background-color: #ffffff;\n  top: 10%;\n  left: 5%;\n  display: flex;\n  flex-direction: column;\n  border-radius: 9px;\n}\n\n.FloatingWindow-container {\n  display: flex;\n  height: calc(100% - 50px);\n  width: 100%;\n  overflow: auto;\n}\n\n.FloatingWindow-header-element {\n  flex: 0;\n}\n\n.FloatingWindow-header {\n  height: 48px;\n  line-height: 48px;\n  color: #6b6966;\n  padding: 0 8px;\n  display: flex;\n  overflow: hidden;\n  justify-content: space-between;\n  border-bottom: 2px #eaeaea solid;\n  font-size: 1em;\n  font-weight: 600;\n}\n\n.FloatingWindow-header-title-text {\n  font-size: 1em;\n  font-weight: 600;\n  overflow: hidden;\n}\n\n.FloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.FloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindowHeaderButton-button {\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  border-radius: 50%;\n  background-color: transparent;\n  color: #6b6966;\n  display: flex;\n}\n\n.FloatingWindowHeaderButton-icon {\n  fill: #6b6966;\n}\n\n.floating-window-icon {\n  display: inline-block;\n  height: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  width: 24px;\n  fill: #6b6966;\n}";
 styleInject(css_248z$a);
 
 /**
@@ -47291,36 +47291,27 @@ var LuiBadge = function (props) { return (React__default["default"].createElemen
 
 var LuiSidePanelContext = React__default["default"].createContext({ setProps: function () { return undefined; } });
 var LuiSidePanel = function (_a) {
-    var children = _a.children, onClose = _a.onClose, width = _a.width, top = _a.top, closeBtnTitleAttr = _a.closeBtnTitleAttr;
+    var children = _a.children, onClose = _a.onClose, width = _a.width, top = _a.top, closeBtnTitleAttr = _a.closeBtnTitleAttr, classNames = _a.classNames;
     var setProps = React__default["default"].useContext(LuiSidePanelContext).setProps;
     React__default["default"].useEffect(function () {
-        setProps({ children: children, onClose: onClose, width: width, top: top, closeBtnTitleAttr: closeBtnTitleAttr });
+        setProps({ children: children, onClose: onClose, width: width, top: top, closeBtnTitleAttr: closeBtnTitleAttr, classNames: classNames });
         return function () {
             setProps(undefined);
         };
-    }, [setProps, children, onClose, width, top, closeBtnTitleAttr]);
+    }, [setProps, children, onClose, width, top, closeBtnTitleAttr, classNames]);
     return React__default["default"].createElement(React__default["default"].Fragment, null);
 };
 var LuiSidePanelContainer = function (props) {
-    var _a = props !== null && props !== void 0 ? props : {}, children = _a.children, onClose = _a.onClose, _b = _a.width, width = _b === void 0 ? '50%' : _b, _c = _a.top, top = _c === void 0 ? 60 : _c, _d = _a.closeBtnTitleAttr, closeBtnTitleAttr = _d === void 0 ? 'Close panel' : _d;
+    var _a = props !== null && props !== void 0 ? props : {}, children = _a.children, onClose = _a.onClose, _b = _a.width, width = _b === void 0 ? '50%' : _b, _c = _a.top, top = _c === void 0 ? 60 : _c, _d = _a.closeBtnTitleAttr, closeBtnTitleAttr = _d === void 0 ? 'Close panel' : _d, classNames = _a.classNames;
     useEscapeFunction(function () {
         if (onClose) {
             onClose();
         }
     });
     return (React__default["default"].createElement("section", { style: {
-            position: 'fixed',
-            right: 0,
-            bottom: 0,
             top: top,
-            background: 'white',
-            width: children ? width !== null && width !== void 0 ? width : '50%' : '0%',
-            transition: 'width 0.2s ease',
-            boxShadow: '-0.1em 0 0.4em rgba(0, 0, 0, 0.2)',
-            padding: 0,
-            zIndex: 3,
-            overflow: 'scroll'
-        } },
+            width: children ? width !== null && width !== void 0 ? width : '50%' : '0%'
+        }, className: clsx$1('luiSidePanel', classNames) },
         children && (React__default["default"].createElement("button", { type: "button", "data-testid": "close", title: closeBtnTitleAttr, onClick: onClose, style: {
                 color: '#5e5e61',
                 position: 'absolute',