@canonical/react-components 2.6.0 → 2.7.0

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/PasswordToggle/PasswordToggle.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import type { InputHTMLAttributes, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
+import "./PasswordToggle.scss";
 export declare enum Label {
     Hide = "Hide",
     Show = "Show"

package/dist/components/PasswordToggle/PasswordToggle.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Field = _interopRequireDefault(require("../Field"));
 var _Label = _interopRequireDefault(require("../Label"));
+require("./PasswordToggle.scss");
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -64,6 +65,17 @@ const PasswordToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     success: success,
     validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "password-toggle"
+  }, /*#__PURE__*/_react.default.createElement("input", _extends({
+    "aria-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
+    className: (0, _classnames.default)("p-form-validation__input", className),
+    id: passwordToggleId,
+    readOnly: readOnly,
+    ref: ref,
+    type: isPassword ? "password" : "text"
+  }, inputProps)), /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form-password-toggle"
   }, /*#__PURE__*/_react.default.createElement(_Label.default, {
     forId: passwordToggleId,
@@ -80,15 +92,6 @@ const PasswordToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     className: "p-form-password-toggle__label"
   }, isPassword ? Label.Show : Label.Hide), /*#__PURE__*/_react.default.createElement("i", {
     className: isPassword ? "p-icon--show" : "p-icon--hide"
-  }))), /*#__PURE__*/_react.default.createElement("input", _extends({
-    "aria-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
-    "aria-errormessage": hasError ? validationId : null,
-    "aria-invalid": hasError,
-    className: (0, _classnames.default)("p-form-validation__input", className),
-    id: passwordToggleId,
-    readOnly: readOnly,
-    ref: ref,
-    type: isPassword ? "password" : "text"
-  }, inputProps)));
+  })))));
 });
 var _default = exports.default = PasswordToggle;

package/dist/components/PasswordToggle/PasswordToggle.scss

@@ -0,0 +1,4 @@
+.password-toggle {
+  display: flex;
+  flex-direction: column-reverse;
+}

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/PasswordToggle/PasswordToggle.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import type { InputHTMLAttributes, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
+import "./PasswordToggle.scss";
 export declare enum Label {
     Hide = "Hide",
     Show = "Show"

package/dist/esm/components/PasswordToggle/PasswordToggle.js

@@ -7,6 +7,7 @@ import React, { useId, useState } from "react";
 import Button from "../Button";
 import Field from "../Field";
 import VanillaLabel from "../Label";
+import "./PasswordToggle.scss";
 export var Label = /*#__PURE__*/function (Label) {
   Label["Hide"] = "Hide";
   Label["Show"] = "Show";
@@ -60,6 +61,17 @@ var PasswordToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     success: success,
     validationId: validationId
   }, /*#__PURE__*/React.createElement("div", {
+    className: "password-toggle"
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    "aria-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
+    className: classNames("p-form-validation__input", className),
+    id: passwordToggleId,
+    readOnly: readOnly,
+    ref: ref,
+    type: isPassword ? "password" : "text"
+  }, inputProps)), /*#__PURE__*/React.createElement("div", {
     className: "p-form-password-toggle"
   }, /*#__PURE__*/React.createElement(VanillaLabel, {
     forId: passwordToggleId,
@@ -76,15 +88,6 @@ var PasswordToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: "p-form-password-toggle__label"
   }, isPassword ? Label.Show : Label.Hide), /*#__PURE__*/React.createElement("i", {
     className: isPassword ? "p-icon--show" : "p-icon--hide"
-  }))), /*#__PURE__*/React.createElement("input", _extends({
-    "aria-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
-    "aria-errormessage": hasError ? validationId : null,
-    "aria-invalid": hasError,
-    className: classNames("p-form-validation__input", className),
-    id: passwordToggleId,
-    readOnly: readOnly,
-    ref: ref,
-    type: isPassword ? "password" : "text"
-  }, inputProps)));
+  })))));
 });
 export default PasswordToggle;

package/dist/esm/components/PasswordToggle/PasswordToggle.scss

@@ -0,0 +1,4 @@
+.password-toggle {
+  display: flex;
+  flex-direction: column-reverse;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {