@canonical/maas-react-components 2.4.0 → 2.5.0

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/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.5.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/canonical/maas-react-components.git"