@canonical/maas-react-components 2.5.0 → 2.7.0

package/dist/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/sections/Layout/components/DocumentTitle/DocumentTitle.d.ts

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

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

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

package/dist/{src/lib/sections → 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/dist/testing/expectTooltipOnHover.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Asserts that hovering an element reveals a tooltip with the given text.
+ */
+export declare const expectTooltipOnHover: (element: Element | null, tooltipText: string | RegExp) => Promise<void>;

package/dist/testing/index.d.ts

@@ -0,0 +1,8 @@
+export { expectTooltipOnHover } from './expectTooltipOnHover';
+export { mockIsPending } from './mockIsPending';
+export { mockSidePanel } from './mockSidePanel';
+export { renderHookWithProviders } from './renderHookWithProviders';
+export { renderWithProviders } from './renderWithProviders';
+export { setupMockServer } from './setupMockServer';
+export { spyOnMutation } from './spyOnMutation';
+export { waitForLoading } from './waitForLoading';

package/dist/testing/index.es.js

@@ -0,0 +1,129 @@
+import { screen as c, renderHook as v, render as h } from "@testing-library/react";
+import u from "@testing-library/user-event";
+import { vi as t } from "vitest";
+import { jsx as l } from "react/jsx-runtime";
+import { QueryClient as f, QueryClientProvider as y } from "@tanstack/react-query";
+import { c as k } from "../QueryInput-D7uXzKgr.mjs";
+import "@canonical/react-components";
+import "react";
+import "classnames";
+import "react-dropzone";
+import "@tanstack/react-table";
+import { createMemoryRouter as d, RouterProvider as m } from "react-router";
+import { setupServer as P } from "msw/node";
+const V = async (r, e) => {
+  if (expect(
+    c.queryByRole("tooltip", { name: e })
+  ).not.toBeInTheDocument(), !r)
+    throw new Error("expectTooltipOnHover: the element was null or undefined");
+  await u.hover(r), r.querySelector("i") && await u.hover(r.querySelector("i")), await t.waitFor(
+    () => expect(c.getAllByRole("tooltip", { name: e })).toHaveLength(
+      1
+    )
+  );
+}, F = () => {
+  t.doMock("@tanstack/react-query", async () => ({
+    ...await t.importActual("@tanstack/react-query"),
+    useQuery: t.fn().mockReturnValueOnce({
+      data: null,
+      isPending: !0,
+      failureReason: void 0,
+      isFetched: !1
+    })
+  })), afterEach(() => {
+    t.doUnmock("@tanstack/react-query");
+  });
+}, W = async () => {
+  const r = t.spyOn(
+    await import("../@canonical/maas-react-components.es.js"),
+    // the library's own barrel export
+    "useSidePanel"
+  ), e = t.fn(), a = t.fn();
+  let n = !1;
+  const i = () => ({
+    isOpen: n,
+    title: "",
+    size: "regular",
+    component: null,
+    props: {},
+    openSidePanel: e,
+    closeSidePanel: a,
+    setSidePanelSize: t.fn()
+  });
+  return beforeEach(() => {
+    t.clearAllMocks(), n = !1, e.mockImplementation(() => {
+      n = !0, r.mockReturnValue(i());
+    }), a.mockImplementation(() => {
+      n = !1, r.mockReturnValue(i());
+    }), r.mockReturnValue(i());
+  }), { mockOpen: e, mockClose: a };
+}, b = (r, e) => {
+  const a = new f({
+    defaultOptions: { queries: { retry: !1, staleTime: 1 / 0 } }
+  }), n = e == null ? void 0 : e.AdditionalProviders;
+  return {
+    result: v(r, {
+      wrapper: ({ children: i }) => /* @__PURE__ */ l(y, { client: a, children: /* @__PURE__ */ l(k, { children: n ? /* @__PURE__ */ l(n, { children: i }) : i }) })
+    }).result,
+    queryClient: a
+  };
+}, L = (r, e) => {
+  const a = new f({
+    defaultOptions: { queries: { retry: !1, staleTime: 1 / 0 } }
+  }), n = d(
+    [{ path: (e == null ? void 0 : e.pattern) ?? "*", element: r }],
+    { initialEntries: (e == null ? void 0 : e.initialEntries) || ["/"] }
+  ), i = e == null ? void 0 : e.AdditionalProviders, s = h(/* @__PURE__ */ l(m, { router: n }), {
+    wrapper: ({ children: o }) => /* @__PURE__ */ l(y, { client: a, children: /* @__PURE__ */ l(k, { children: i ? /* @__PURE__ */ l(i, { children: o }) : o }) }),
+    ...e
+  });
+  return { result: s, rerender: (o) => {
+    const p = d(
+      [{ path: (e == null ? void 0 : e.pattern) ?? "*", element: o }],
+      { initialEntries: (e == null ? void 0 : e.initialEntries) || ["/"] }
+    );
+    return s.rerender(/* @__PURE__ */ l(m, { router: p }));
+  }, router: n };
+}, Q = (r, e, ...a) => {
+  r.setConfig({ baseUrl: e });
+  const n = P(...a);
+  return beforeAll(() => {
+    n.listen({ onUnhandledRequest: "error" });
+  }), afterEach(() => {
+    n.resetHandlers();
+  }), afterAll(() => {
+    n.close();
+  }), n;
+}, U = (r, e) => {
+  const a = t.fn();
+  return t.spyOn(r, e).mockImplementation(() => ({
+    mutate: a,
+    mutateAsync: t.fn(),
+    data: void 0,
+    variables: void 0,
+    error: null,
+    isError: !1,
+    isPending: !1,
+    isIdle: !0,
+    isSuccess: !1,
+    status: "idle",
+    reset: t.fn()
+  })), afterEach(() => {
+    t.clearAllMocks();
+  }), a;
+}, z = async (r = "Loading", e) => await t.waitFor(
+  () => expect(
+    c.queryByText(new RegExp(r, "i"))
+  ).not.toBeInTheDocument(),
+  e
+);
+export {
+  V as expectTooltipOnHover,
+  F as mockIsPending,
+  W as mockSidePanel,
+  b as renderHookWithProviders,
+  L as renderWithProviders,
+  Q as setupMockServer,
+  U as spyOnMutation,
+  z as waitForLoading
+};

package/dist/testing/mockIsPending.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Spies on `useQuery` from `@tanstack/react-query` to return a pending state
+ * for the first call in each test. Uses `vi.spyOn` (via `vi.doMock`) rather
+ * than mocking the return value directly, since the module is already loaded.
+ */
+export declare const mockIsPending: () => void;

package/dist/testing/mockSidePanel.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Mocks the `useSidePanel` hook, returning `mockOpen`/`mockClose` spies.
+ */
+export declare const mockSidePanel: () => Promise<{
+    mockOpen: import('vitest').Mock<(...args: any[]) => any>;
+    mockClose: import('vitest').Mock<(...args: any[]) => any>;
+}>;

package/dist/testing/renderHookWithProviders.d.ts

@@ -0,0 +1,24 @@
+import { ComponentType, ReactNode } from 'react';
+import { QueryClient } from '@tanstack/react-query';
+/**
+ * Renders a hook with all test-relevant providers (query client and side
+ * panel).
+ *
+ * Any project-specific providers (e.g. a Redux `Provider`, a WebSocket
+ * context, etc.) should be supplied via the `AdditionalProviders` option -
+ * this library has no dependency on Redux or any other state management
+ * library.
+ *
+ * @typeParam T - The return type of the hook.
+ */
+export declare const renderHookWithProviders: <T>(hook: () => T, options?: Partial<{
+    initialEntries: string[];
+    AdditionalProviders: ComponentType<{
+        children: ReactNode;
+    }>;
+}>) => {
+    result: {
+        current: T;
+    };
+    queryClient: QueryClient;
+};

package/dist/testing/renderWithProviders.d.ts

@@ -0,0 +1,32 @@
+import { ComponentType, ReactNode } from 'react';
+import { InitialEntry } from '@remix-run/router';
+import { RenderOptions, RenderResult } from '@testing-library/react';
+import { createMemoryRouter } from 'react-router';
+/** The router instance returned by `createMemoryRouter` / `createBrowserRouter`. */
+type DataRouter = ReturnType<typeof createMemoryRouter>;
+/**
+ * Renders a component with all test-relevant providers (query client, side
+ * panel, and router).
+ *
+ * Any project-specific providers (e.g. a Redux `Provider`, a WebSocket
+ * context, etc.) should be supplied via the `AdditionalProviders` option -
+ * this library has no dependency on Redux or any other state management
+ * library.
+ *
+ * @param ui       - The component to render.
+ * @param options  - Rendering options including router entries and an
+ *                   `AdditionalProviders` wrapper for project-specific
+ *                   providers (e.g. a Redux `Provider`, WebSocketProvider).
+ */
+export declare const renderWithProviders: (ui: ReactNode, options?: Omit<RenderOptions, "wrapper"> & Partial<{
+    initialEntries: InitialEntry[];
+    pattern: string;
+    AdditionalProviders: ComponentType<{
+        children: ReactNode;
+    }>;
+}>) => {
+    result: RenderResult;
+    router: DataRouter;
+    rerender: (ui: ReactNode) => void;
+};
+export {};

package/dist/testing/setupMockServer.d.ts

@@ -0,0 +1,13 @@
+import { RequestHandler } from 'msw';
+/**
+ * Sets up an MSW mock server for use in tests.
+ *
+ * @param client  - The Hey-API client instance (from `@/app/apiclient/client.gen` in maas-ui).
+ * @param baseUrl - The base URL to configure on the client.
+ * @param handlers - MSW request handlers.
+ */
+export declare const setupMockServer: (client: {
+    setConfig: (config: {
+        baseUrl: string;
+    }) => void;
+}, baseUrl: string, ...handlers: RequestHandler[]) => import('msw/node').SetupServer;

package/dist/testing/spyOnMutation.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Spies on a given mutation hook to observe the mutate function.
+ *
+ * @param obj        - The module object that contains the hook.
+ * @param methodName - The name of the mutation hook to spy on.
+ * @returns A mock `mutate` function that can be observed with `expect`.
+ */
+export declare const spyOnMutation: (obj: unknown, methodName: string) => import('vitest').Mock<(...args: any[]) => any>;

package/dist/testing/waitForLoading.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Waits until the loading text is no longer present in the document.
+ *
+ * @param loadingText - Text to query for. Defaults to "Loading".
+ * @param options     - Optional `vi.waitFor` options (`interval`, `timeout`).
+ */
+export declare const waitForLoading: (loadingText?: string, options?: {
+    interval?: number;
+    timeout?: number;
+}) => Promise<void>;

package/dist/utils/formatBytes/formatBytes.test.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@canonical/maas-react-components",
   "description": "React components for use in MAAS UI projects.",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/canonical/maas-react-components.git"
@@ -10,14 +10,19 @@
     "url": "https://github.com/canonical/maas-react-components/issues"
   },
   "homepage": "https://github.com/canonical/maas-react-components#readme",
-  "main": "./dist/@canonical/maas-react-components.umd.js",
+  "main": "./dist/@canonical/maas-react-components.es.js",
   "module": "./dist/@canonical/maas-react-components.es.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/@canonical/maas-react-components.es.js",
-      "require": "./dist/@canonical/maas-react-components.umd.js"
+      "default": "./dist/@canonical/maas-react-components.es.js"
+    },
+    "./testing": {
+      "types": "./dist/testing/index.d.ts",
+      "import": "./dist/testing/index.es.js",
+      "default": "./dist/testing/index.es.js"
     },
     "./dist/style.css": {
       "import": "./dist/style.css",
@@ -27,6 +32,13 @@
   "files": [
     "dist"
   ],
+  "typesVersions": {
+    "*": {
+      "testing": [
+        "./dist/testing/index.d.ts"
+      ]
+    }
+  },
   "license": "AGPL-3.0",
   "scripts": {
     "build": "tsc && vite build",
@@ -48,6 +60,7 @@
   "devDependencies": {
     "@commitlint/cli": "^19.0.0",
     "@commitlint/config-conventional": "^19.0.0",
+    "@remix-run/router": "^1.23.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-a11y": "^8.6.12",
@@ -58,10 +71,11 @@
     "@storybook/react": "^8.6.12",
     "@storybook/react-vite": "^8.6.12",
     "@storybook/theming": "^8.6.12",
+    "@tanstack/react-query": "^5.100.11",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/react-dom": "19.1.3",
+    "@types/react-dom": "^19.1.3",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-react": "^4.1.0",
@@ -77,6 +91,7 @@
     "eslint-plugin-storybook": "^0.12.0",
     "eslint-plugin-unused-imports": "^3.2.0",
     "jsdom": "^26.0.0",
+    "msw": "^2.14.6",
     "plop": "^4.0.0",
     "prettier": "^3.5.3",
     "prop-types": "^15.8.1",
@@ -92,17 +107,40 @@
     "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-query": "^5.100.11",
     "@tanstack/react-table": "^8.15.3",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.0.0",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.3",
     "classnames": "^2.3.2",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-dropzone": "14.3.8",
-    "react-router": "^6.0.0",
-    "react-router-dom": "^6.0.0",
-    "vanilla-framework": "^4.10.0"
+    "msw": "^2.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-dropzone": "^14.3.8",
+    "react-router": ">=6.0.0",
+    "vitest": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@testing-library/react": {
+      "optional": true
+    },
+    "@testing-library/user-event": {
+      "optional": true
+    },
+    "msw": {
+      "optional": true
+    },
+    "vitest": {
+      "optional": true
+    }
   }
 }