@linzjs/lui 17.8.1 → 17.9.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [17.9.0](https://github.com/linz/lui/compare/v17.8.1...v17.9.0) (2022-08-08)
+
+
+### Features
+
+* **LuiTabsPanel:** adding support for lazy loading content via the mode prop ([#715](https://github.com/linz/lui/issues/715)) ([55ee571](https://github.com/linz/lui/commit/55ee57105a917312fa7ab84c51d89277b9f213c7))
+
 ## [17.8.1](https://github.com/linz/lui/compare/v17.8.0...v17.8.1) (2022-08-08)
 
 

package/dist/components/LuiTabs/LuiTabsPanel/LuiTabsPanel.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+export declare type LuiTabsPanelMode = 'lazy' | 'eager';
 interface LuiTabsPanelProps {
     panel: string;
+    mode?: LuiTabsPanelMode;
 }
 export declare const LuiTabsPanel: React.FC<LuiTabsPanelProps>;
 export {};

package/dist/index.js

@@ -863,10 +863,17 @@ var LuiTabsGroup = function (props) {
     return (React__default["default"].createElement("div", { className: "LuiTabsGroup " + (props.justify ? 'LuiTabsGroup--justified' : ''), role: "tablist", "aria-label": props.ariaLabel }, props.children));
 };
 
-var LuiTabsPanel = function (props) {
+var LuiTabsPanel = function (_a) {
+    var children = _a.children, panel = _a.panel, _b = _a.mode, mode = _b === void 0 ? 'eager' : _b;
     var context = React.useContext(LuiTabsContext);
-    var active = context.activePanel === props.panel;
-    return (React__default["default"].createElement("div", { className: clsx('LuiTabsPanel', active && 'LuiTabsPanel--active'), id: props.panel + "-tab-panel", role: "tabpanel", "aria-labelledby": props.panel + "-tab" }, props.children));
+    var _c = React.useState(mode === 'eager'), shouldShow = _c[0], setShouldShow = _c[1];
+    var active = context.activePanel === panel;
+    React.useEffect(function () {
+        if (active && !shouldShow) {
+            setShouldShow(true);
+        }
+    }, [active, shouldShow]);
+    return (React__default["default"].createElement("div", { className: clsx('LuiTabsPanel', active && 'LuiTabsPanel--active'), id: panel + "-tab-panel", role: "tabpanel", "aria-labelledby": panel + "-tab" }, shouldShow ? children : null));
 };
 
 var LuiTabsPanelSwitch = function (props) {