@canonical/react-components 2.6.1 → 2.7.1

package/dist/components/EventQueue/EventQueue.d.ts

@@ -10,38 +10,6 @@ export interface EventQueue<T> {
     set: (operationId: string, onSuccess: (event: T) => void, onFailure: (msg: string) => void, onFinish?: () => void) => void;
     remove: (operationId: string) => void;
 }
-/**
- * This provides an event queue system for managing callbacks associated with
- * asynchronous operations (e.g., API calls) in an application.
- *
- * It allows components to register success, failure,
- * and optional finish handlers for a given operation ID, and later retrieve or remove them.
- *
- * This is useful for handling side effects when dealing
- * with multiple operations that need to be tracked and updated independently.
- *
- * The `createEventQueue` function should be used to create a single provider and context that are shared throughout your application.
- * The returned `EventQueueProvider` and `useEventQueue` hook should be exported
- * from a shared module and reused across the app to ensure a single
- * context instance is used.
- *
- * Usage pattern:
- * // eventQueue.ts
- * export const { EventQueueProvider, useEventQueue } = createEventQueue<EventType>();
- *
- * // App.tsx
- * import { EventQueueProvider } from "./eventQueue";
- * ...
- * <EventQueueProvider>
- *   <App />
- * </EventQueueProvider>
- *
- * // In any other component
- * import { useEventQueue } from "./eventQueue";
- * ...
- * const eventQueue = useEventQueue();
- * eventQueue.set(operationId, onSuccess, onFailure);
- */
 export declare function createEventQueue<T>(): {
     EventQueueProvider: FC<{
         children: ReactNode;

package/dist/components/EventQueue/EventQueue.js

@@ -7,39 +7,6 @@ exports.createEventQueue = createEventQueue;
 var _react = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * This provides an event queue system for managing callbacks associated with
- * asynchronous operations (e.g., API calls) in an application.
- *
- * It allows components to register success, failure,
- * and optional finish handlers for a given operation ID, and later retrieve or remove them.
- *
- * This is useful for handling side effects when dealing
- * with multiple operations that need to be tracked and updated independently.
- *
- * The `createEventQueue` function should be used to create a single provider and context that are shared throughout your application.
- * The returned `EventQueueProvider` and `useEventQueue` hook should be exported
- * from a shared module and reused across the app to ensure a single
- * context instance is used.
- *
- * Usage pattern:
- * // eventQueue.ts
- * export const { EventQueueProvider, useEventQueue } = createEventQueue<EventType>();
- *
- * // App.tsx
- * import { EventQueueProvider } from "./eventQueue";
- * ...
- * <EventQueueProvider>
- *   <App />
- * </EventQueueProvider>
- *
- * // In any other component
- * import { useEventQueue } from "./eventQueue";
- * ...
- * const eventQueue = useEventQueue();
- * eventQueue.set(operationId, onSuccess, onFailure);
- */
-
 function createEventQueue() {
   const EventQueueContext = /*#__PURE__*/(0, _react.createContext)(undefined);
   const eventQueue = new Map();

package/dist/components/EventQueue/EventQueue.stories.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+declare const EventQueueProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+declare const meta: Meta<typeof EventQueueProvider>;
+export default meta;
+type Story = StoryObj<typeof EventQueueProvider>;
+export declare const Default: Story;

package/dist/components/EventQueue/EventQueue.stories.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _EventQueue = require("./EventQueue");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const {
+  EventQueueProvider,
+  useEventQueue
+} = (0, _EventQueue.createEventQueue)();
+const meta = {
+  title: "Components/EventQueue",
+  component: EventQueueProvider,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "\nThis provides an event queue system for managing callbacks associated with\nasynchronous operations (e.g., API calls) in an application.\n\nIt allows components to register success, failure,\nand optional finish handlers for a given operation ID, and later retrieve or remove them.\n\nThis is useful for handling side effects when dealing\nwith multiple operations that need to be tracked and updated independently.\n\nThe `createEventQueue` function should be used to create a single provider and context that are shared throughout your application.\nThe returned `EventQueueProvider` and `useEventQueue` hook should be exported\nfrom a shared module and reused across the app to ensure a single\ncontext instance is used.\n\n**Usage pattern:**\n\n```tsx\n// eventQueue.ts\nexport const { EventQueueProvider, useEventQueue } = createEventQueue<EventType>();\n\n// App.tsx\nimport { EventQueueProvider } from \"./eventQueue\";\n\n<EventQueueProvider>\n  <App />\n</EventQueueProvider>\n\n// In any other component\nimport { useEventQueue } from \"./eventQueue\";\n\nconst eventQueue = useEventQueue();\neventQueue.set(operationId, onSuccess, onFailure);\n```"
+      }
+    }
+  },
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(EventQueueProvider, null, /*#__PURE__*/_react.default.createElement(Story, null))]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => {
+    const EventQueueDemo = () => {
+      const queue = useEventQueue();
+      const operationId = "storybook-op-id";
+      const [logs, setLogs] = (0, _react.useState)([]);
+      const [isRegistered, setIsRegistered] = (0, _react.useState)(false);
+      const appendLog = msg => setLogs(prev => [...prev, msg]);
+
+      // This simulates the code that is executed when the asynchronous operation starts
+      const register = () => {
+        queue.set(operationId, event => appendLog("Success: ".concat(event.message)), msg => appendLog("Failure: ".concat(msg)), () => appendLog("Finished"));
+        appendLog("Registered callbacks");
+        setIsRegistered(true);
+      };
+
+      // This simulates the code that is executed when the asynchronous operation succeeds
+      const triggerSuccess = () => {
+        const event = queue.get(operationId);
+        if (event) {
+          var _event$onFinish;
+          event.onSuccess({
+            message: "This was successful!"
+          });
+          (_event$onFinish = event.onFinish) === null || _event$onFinish === void 0 || _event$onFinish.call(event);
+          queue.remove(operationId);
+          setIsRegistered(false);
+        }
+      };
+
+      // This simulates the code that is executed when the asynchronous operation fails
+      const triggerFailure = () => {
+        const event = queue.get(operationId);
+        if (event) {
+          var _event$onFinish2;
+          event.onFailure("Something failed!");
+          (_event$onFinish2 = event.onFinish) === null || _event$onFinish2 === void 0 || _event$onFinish2.call(event);
+          queue.remove(operationId);
+          setIsRegistered(false);
+        }
+      };
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          marginBottom: "0.5rem",
+          display: "flex"
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: register,
+        disabled: isRegistered
+      }, "Register Callbacks"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: triggerSuccess,
+        disabled: !isRegistered
+      }, "Trigger Success"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: triggerFailure,
+        disabled: !isRegistered
+      }, "Trigger Failure")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, "Logs:"), /*#__PURE__*/_react.default.createElement("ul", null, logs.map((log, index) => /*#__PURE__*/_react.default.createElement("li", {
+        key: index
+      }, log)))));
+    };
+    return /*#__PURE__*/_react.default.createElement(EventQueueDemo, null);
+  }
+};

package/dist/components/TablePagination/TablePagination.scss

@@ -36,7 +36,7 @@
   .pagination-input {
     margin: 0 $spv--small 0 $spv--large;
     min-width: 0;
-    width: 3rem;
+    width: 4rem;
   }
 
   .pagination-select {

package/dist/esm/components/EventQueue/EventQueue.d.ts

@@ -10,38 +10,6 @@ export interface EventQueue<T> {
     set: (operationId: string, onSuccess: (event: T) => void, onFailure: (msg: string) => void, onFinish?: () => void) => void;
     remove: (operationId: string) => void;
 }
-/**
- * This provides an event queue system for managing callbacks associated with
- * asynchronous operations (e.g., API calls) in an application.
- *
- * It allows components to register success, failure,
- * and optional finish handlers for a given operation ID, and later retrieve or remove them.
- *
- * This is useful for handling side effects when dealing
- * with multiple operations that need to be tracked and updated independently.
- *
- * The `createEventQueue` function should be used to create a single provider and context that are shared throughout your application.
- * The returned `EventQueueProvider` and `useEventQueue` hook should be exported
- * from a shared module and reused across the app to ensure a single
- * context instance is used.
- *
- * Usage pattern:
- * // eventQueue.ts
- * export const { EventQueueProvider, useEventQueue } = createEventQueue<EventType>();
- *
- * // App.tsx
- * import { EventQueueProvider } from "./eventQueue";
- * ...
- * <EventQueueProvider>
- *   <App />
- * </EventQueueProvider>
- *
- * // In any other component
- * import { useEventQueue } from "./eventQueue";
- * ...
- * const eventQueue = useEventQueue();
- * eventQueue.set(operationId, onSuccess, onFailure);
- */
 export declare function createEventQueue<T>(): {
     EventQueueProvider: FC<{
         children: ReactNode;

package/dist/esm/components/EventQueue/EventQueue.js

@@ -1,38 +1,5 @@
 import { createContext, useContext } from "react";
 import React from "react";
-/**
- * This provides an event queue system for managing callbacks associated with
- * asynchronous operations (e.g., API calls) in an application.
- *
- * It allows components to register success, failure,
- * and optional finish handlers for a given operation ID, and later retrieve or remove them.
- *
- * This is useful for handling side effects when dealing
- * with multiple operations that need to be tracked and updated independently.
- *
- * The `createEventQueue` function should be used to create a single provider and context that are shared throughout your application.
- * The returned `EventQueueProvider` and `useEventQueue` hook should be exported
- * from a shared module and reused across the app to ensure a single
- * context instance is used.
- *
- * Usage pattern:
- * // eventQueue.ts
- * export const { EventQueueProvider, useEventQueue } = createEventQueue<EventType>();
- *
- * // App.tsx
- * import { EventQueueProvider } from "./eventQueue";
- * ...
- * <EventQueueProvider>
- *   <App />
- * </EventQueueProvider>
- *
- * // In any other component
- * import { useEventQueue } from "./eventQueue";
- * ...
- * const eventQueue = useEventQueue();
- * eventQueue.set(operationId, onSuccess, onFailure);
- */
-
 export function createEventQueue() {
   var EventQueueContext = /*#__PURE__*/createContext(undefined);
   var eventQueue = new Map();

package/dist/esm/components/EventQueue/EventQueue.stories.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+declare const EventQueueProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+declare const meta: Meta<typeof EventQueueProvider>;
+export default meta;
+type Story = StoryObj<typeof EventQueueProvider>;
+export declare const Default: Story;

package/dist/esm/components/EventQueue/EventQueue.stories.js

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import { createEventQueue } from "./EventQueue";
+import Button from "../Button/Button";
+var {
+  EventQueueProvider,
+  useEventQueue
+} = createEventQueue();
+var meta = {
+  title: "Components/EventQueue",
+  component: EventQueueProvider,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "\nThis provides an event queue system for managing callbacks associated with\nasynchronous operations (e.g., API calls) in an application.\n\nIt allows components to register success, failure,\nand optional finish handlers for a given operation ID, and later retrieve or remove them.\n\nThis is useful for handling side effects when dealing\nwith multiple operations that need to be tracked and updated independently.\n\nThe `createEventQueue` function should be used to create a single provider and context that are shared throughout your application.\nThe returned `EventQueueProvider` and `useEventQueue` hook should be exported\nfrom a shared module and reused across the app to ensure a single\ncontext instance is used.\n\n**Usage pattern:**\n\n```tsx\n// eventQueue.ts\nexport const { EventQueueProvider, useEventQueue } = createEventQueue<EventType>();\n\n// App.tsx\nimport { EventQueueProvider } from \"./eventQueue\";\n\n<EventQueueProvider>\n  <App />\n</EventQueueProvider>\n\n// In any other component\nimport { useEventQueue } from \"./eventQueue\";\n\nconst eventQueue = useEventQueue();\neventQueue.set(operationId, onSuccess, onFailure);\n```"
+      }
+    }
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement(EventQueueProvider, null, /*#__PURE__*/React.createElement(Story, null))]
+};
+export default meta;
+export var Default = {
+  render: () => {
+    var EventQueueDemo = () => {
+      var queue = useEventQueue();
+      var operationId = "storybook-op-id";
+      var [logs, setLogs] = useState([]);
+      var [isRegistered, setIsRegistered] = useState(false);
+      var appendLog = msg => setLogs(prev => [...prev, msg]);
+
+      // This simulates the code that is executed when the asynchronous operation starts
+      var register = () => {
+        queue.set(operationId, event => appendLog("Success: ".concat(event.message)), msg => appendLog("Failure: ".concat(msg)), () => appendLog("Finished"));
+        appendLog("Registered callbacks");
+        setIsRegistered(true);
+      };
+
+      // This simulates the code that is executed when the asynchronous operation succeeds
+      var triggerSuccess = () => {
+        var event = queue.get(operationId);
+        if (event) {
+          var _event$onFinish;
+          event.onSuccess({
+            message: "This was successful!"
+          });
+          (_event$onFinish = event.onFinish) === null || _event$onFinish === void 0 || _event$onFinish.call(event);
+          queue.remove(operationId);
+          setIsRegistered(false);
+        }
+      };
+
+      // This simulates the code that is executed when the asynchronous operation fails
+      var triggerFailure = () => {
+        var event = queue.get(operationId);
+        if (event) {
+          var _event$onFinish2;
+          event.onFailure("Something failed!");
+          (_event$onFinish2 = event.onFinish) === null || _event$onFinish2 === void 0 || _event$onFinish2.call(event);
+          queue.remove(operationId);
+          setIsRegistered(false);
+        }
+      };
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginBottom: "0.5rem",
+          display: "flex"
+        }
+      }, /*#__PURE__*/React.createElement(Button, {
+        onClick: register,
+        disabled: isRegistered
+      }, "Register Callbacks"), /*#__PURE__*/React.createElement(Button, {
+        onClick: triggerSuccess,
+        disabled: !isRegistered
+      }, "Trigger Success"), /*#__PURE__*/React.createElement(Button, {
+        onClick: triggerFailure,
+        disabled: !isRegistered
+      }, "Trigger Failure")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Logs:"), /*#__PURE__*/React.createElement("ul", null, logs.map((log, index) => /*#__PURE__*/React.createElement("li", {
+        key: index
+      }, log)))));
+    };
+    return /*#__PURE__*/React.createElement(EventQueueDemo, null);
+  }
+};

package/dist/esm/components/TablePagination/TablePagination.scss

@@ -36,7 +36,7 @@
   .pagination-input {
     margin: 0 $spv--small 0 $spv--large;
     min-width: 0;
-    width: 3rem;
+    width: 4rem;
   }
 
   .pagination-select {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.6.1",
+  "version": "2.7.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -93,7 +93,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.23.0",
+    "vanilla-framework": "4.24.1",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },