@canonical/maas-react-components 2.4.0 → 2.6.0

package/dist/src/lib/sections/Layout/Layout.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement, ReactNode } from 'react';
+type LayoutProps = {
+    className?: string;
+    children: ReactNode;
+    pageTitle: string;
+    view: "settings" | "table";
+    isSecondaryNavVisible: boolean;
+    navigation: ReactNode;
+    secondaryNavigation: ReactNode;
+    statusBar?: ReactNode;
+};
+export declare const Layout: {
+    ({ className, children, pageTitle, view, isSecondaryNavVisible, navigation, secondaryNavigation, statusBar, }: LayoutProps): ReactElement;
+    Skeleton: ({ view, }: {
+        view: "settings" | "table";
+    }) => ReactElement;
+};
+export {};

package/dist/src/lib/sections/Layout/Layout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/sections/Layout/components/DocumentTitle/DocumentTitle.d.ts

@@ -0,0 +1,4 @@
+declare const DocumentTitle: ({ children }: {
+    children: string[] | string;
+}) => null;
+export default DocumentTitle;

package/dist/src/lib/sections/Layout/index.d.ts

@@ -0,0 +1 @@
+export { Layout } from './Layout';

package/dist/src/lib/sections/SidePanel/SidePanel.d.ts

@@ -34,4 +34,9 @@ import { ReactElement } from 'react';
  * openSidePanel({ component: EditForm, title: "Edit item", size: "wide" });
  * ```
  */
-export declare const SidePanel: () => ReactElement;
+export declare const SidePanel: {
+    (): ReactElement;
+    Skeleton: ({ hasTitle }: {
+        hasTitle?: boolean;
+    }) => ReactElement;
+};

package/dist/src/lib/sections/SidePanel/SidePanel.stories.d.ts

@@ -8,3 +8,5 @@ export declare const Default: Story;
 export declare const NarrowSize: Story;
 export declare const WideSize: Story;
 export declare const LargeSize: Story;
+export declare const Skeleton: Story;
+export declare const SkeletonWithTitle: Story;

package/dist/src/lib/sections/SidePanel/utils.d.ts

@@ -0,0 +1,22 @@
+import { ComponentType } from 'react';
+/**
+ * Lazily loads a side panel component wrapped in its own Suspense boundary.
+ * Define the panel at module scope in the file that opens it and pass it
+ * straight to `openSidePanel`:
+ *
+ * @example
+ * const AddUser = lazySidePanel(() => import("./UserAddForm"));
+ * // ...
+ * openSidePanel({ component: AddUser, title: "Add user" });
+ *
+ * The `<SidePanel />` component from `@canonical/maas-react-components` renders
+ * the panel component directly, so a bare `React.lazy` panel would suspend the
+ * whole `<SidePanel />` on first open. That remounts `<SidePanel />`, and on
+ * remount its internal "close on navigation" effect runs and immediately closes
+ * the panel that was just opened. Giving each panel its own Suspense boundary
+ * keeps `<SidePanel />` mounted (and open) while the chunk loads, and shows the
+ * spinner inside the panel.
+ */
+export declare const lazyLoadSidePanel: (loader: () => Promise<{
+    default: ComponentType;
+}>, showSkeletonTitle?: boolean) => ComponentType;

package/dist/src/lib/sections/index.d.ts

@@ -1,6 +1,7 @@
 export * from './ContentSection';
 export * from './FormSection';
 export * from './InputGroup';
+export * from './Layout';
 export * from './MainToolbar';
 export * from './Navigation';
 export * from './SidePanel';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@canonical/maas-react-components",
   "description": "React components for use in MAAS UI projects.",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/canonical/maas-react-components.git"
@@ -92,6 +92,12 @@
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.8"
   },
+  "overrides": {
+    "@canonical/react-components": {
+      "@types/react": "$@types/react",
+      "@types/react-dom": "$@types/react-dom"
+    }
+  },
   "peerDependencies": {
     "@canonical/react-components": "^4.5.0",
     "@tanstack/react-table": "^8.15.3",