@canonical/react-components 2.3.0 → 2.4.0

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

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from "react";
+import React from "react";
+export interface EventCallback<T> {
+    onSuccess: (event: T) => void;
+    onFailure: (msg: string) => void;
+    onFinish?: () => void;
+}
+export interface EventQueue<T> {
+    get: (operationId: string) => EventCallback<T> | undefined;
+    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;
+    }>;
+    useEventQueue: () => EventQueue<T>;
+    EventQueueContext: React.Context<EventQueue<T>>;
+};

package/dist/components/EventQueue/EventQueue.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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();
+  const EventQueueProvider = _ref => {
+    let {
+      children
+    } = _ref;
+    return /*#__PURE__*/_react.default.createElement(EventQueueContext.Provider, {
+      value: {
+        get: operationId => eventQueue.get(operationId),
+        set: (operationId, onSuccess, onFailure, onFinish) => eventQueue.set(operationId, {
+          onSuccess,
+          onFailure,
+          onFinish
+        }),
+        remove: operationId => eventQueue.delete(operationId)
+      }
+    }, children);
+  };
+  const useEventQueue = () => {
+    const context = (0, _react.useContext)(EventQueueContext);
+    if (!context) {
+      throw new Error("useEventQueue must be used within an EventQueueProvider");
+    }
+    return context;
+  };
+  return {
+    EventQueueProvider,
+    useEventQueue,
+    EventQueueContext
+  };
+}

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

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

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

@@ -0,0 +1,2 @@
+export { createEventQueue } from "./EventQueue";
+export type { EventCallback, EventQueue } from "./EventQueue";

package/dist/components/EventQueue/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "createEventQueue", {
+  enumerable: true,
+  get: function () {
+    return _EventQueue.createEventQueue;
+  }
+});
+var _EventQueue = require("./EventQueue");

package/dist/components/Notifications/ToastNotification/Animate.js

@@ -46,6 +46,7 @@ const Animate = _ref => {
         element.style.display = "none";
       };
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [show, removeState]);
   if (removeState) {
     return null;

package/dist/components/Notifications/ToastNotification/Toast.scss

@@ -1,6 +1,3 @@
-@import "vanilla-framework/scss/settings";
-@import "vanilla-framework/scss/build";
-
 .toast-animate {
   position: relative;
   z-index: 101;
@@ -13,21 +10,21 @@
   position: absolute;
   right: 0;
 
-  @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
+  @media screen and (min-width: 620px) and (max-width: 1036px) {
     width: 500px;
   }
 
-  @media screen and (min-width: $breakpoint-large) {
+  @media screen and (min-width: 1036px) {
     width: 600px;
   }
 }
 
 .toast-notification {
-  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 15%);
+  box-shadow: 0 0 2rem 0.5rem rgb(0 0 0 / 15%);
   overflow: hidden;
   z-index: 101;
 
-  @media screen and (max-width: $breakpoint-small) {
+  @media screen and (max-width: 620px) {
     left: 0;
     margin: 1.5rem auto;
     max-width: 400px;
@@ -37,7 +34,7 @@
 
 .toast-notification-list {
   background-color: white;
-  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 22%);
+  box-shadow: 0 0 2rem 0.5rem rgb(0 0 0 / 22%);
   max-height: calc(100vh - 4.5rem);
   overflow: auto;
   padding: 0 0.5rem;
@@ -66,7 +63,7 @@
       .dismiss-text {
         align-items: center;
         display: flex;
-        gap: $sph--x-small;
+        gap: 0.25rem;
       }
     }
 
@@ -77,9 +74,9 @@
         align-items: center;
         border: none;
         display: flex;
-        gap: $sph--x-small;
+        gap: 0.25rem;
         justify-content: center;
-        margin-right: $sph--small !important;
+        margin-right: 0.5rem !important;
         padding: calc(0.4rem - 1px);
 
         /* stylelint-disable max-nesting-depth */
@@ -88,17 +85,11 @@
           padding: 0;
           text-align: center;
         }
-
-        /* stylelint-disable-next-line selector-class-pattern */
-        .p-icon--info--notification {
-          @extend %icon;
-          @include vf-icon-info-coloured-themed;
-        }
         /* stylelint-enable max-nesting-depth */
       }
     }
 
-    @media screen and (max-width: $breakpoint-small) {
+    @media screen and (max-width: 620px) {
       align-items: flex-start;
       flex-direction: column;
       gap: 0.5rem;
@@ -106,7 +97,7 @@
     }
   }
 
-  @media screen and (max-width: $breakpoint-small) {
+  @media screen and (max-width: 620px) {
     bottom: 2rem;
     left: 0;
     margin: 1.5rem auto;

package/dist/components/Notifications/ToastNotification/ToastNotification.stories.js

@@ -35,6 +35,7 @@ const PreloadedList = () => {
     toastNotify.info("Your changes are syncing in the background");
     toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
     toastNotify.toggleListView();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {

package/dist/components/Notifications/ToastNotification/ToastNotificationList.d.ts

@@ -7,7 +7,7 @@ export type FilterTypes = ValueOf<typeof NotificationSeverity>;
 export declare const severityOrder: readonly ["positive", "caution", "negative", "information"];
 export declare const iconLookup: {
     readonly positive: "success";
-    readonly information: "info--notification";
+    readonly information: "information";
     readonly caution: "warning";
     readonly negative: "error";
 };

package/dist/components/Notifications/ToastNotification/ToastNotificationList.js

@@ -20,8 +20,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const severityOrder = exports.severityOrder = ["positive", "caution", "negative", "information"];
 const iconLookup = exports.iconLookup = {
   positive: _Icon.ICONS.success,
-  // custom name for info icon to override default color from vanilla
-  information: "info--notification",
+  information: _Icon.ICONS.information,
   caution: _Icon.ICONS.warning,
   negative: _Icon.ICONS.error
 };
@@ -39,6 +38,7 @@ const ToastNotificationList = _ref => {
   const preferReducedMotion = (0, _hooks.usePrefersReducedMotion)();
   (0, _react.useLayoutEffect)(() => {
     adjustScrollPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [notifications]);
 
   // this layout effect is used to maintain scroll position of the

package/dist/components/Notifications/ToastNotification/ToastNotificationProvider.js

@@ -103,6 +103,7 @@ const ToastNotificationProvider = _ref => {
         clearTimeout(notificationTimer);
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const showNotificationWithDelay = () => {
     setNotificationTimer(prevTimer => {

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

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from "react";
+import React from "react";
+export interface EventCallback<T> {
+    onSuccess: (event: T) => void;
+    onFailure: (msg: string) => void;
+    onFinish?: () => void;
+}
+export interface EventQueue<T> {
+    get: (operationId: string) => EventCallback<T> | undefined;
+    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;
+    }>;
+    useEventQueue: () => EventQueue<T>;
+    EventQueueContext: React.Context<EventQueue<T>>;
+};

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

@@ -0,0 +1,67 @@
+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();
+  var EventQueueProvider = _ref => {
+    var {
+      children
+    } = _ref;
+    return /*#__PURE__*/React.createElement(EventQueueContext.Provider, {
+      value: {
+        get: operationId => eventQueue.get(operationId),
+        set: (operationId, onSuccess, onFailure, onFinish) => eventQueue.set(operationId, {
+          onSuccess,
+          onFailure,
+          onFinish
+        }),
+        remove: operationId => eventQueue.delete(operationId)
+      }
+    }, children);
+  };
+  var useEventQueue = () => {
+    var context = useContext(EventQueueContext);
+    if (!context) {
+      throw new Error("useEventQueue must be used within an EventQueueProvider");
+    }
+    return context;
+  };
+  return {
+    EventQueueProvider,
+    useEventQueue,
+    EventQueueContext
+  };
+}

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

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

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

@@ -0,0 +1,2 @@
+export { createEventQueue } from "./EventQueue";
+export type { EventCallback, EventQueue } from "./EventQueue";

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

@@ -0,0 +1 @@
+export { createEventQueue } from "./EventQueue";

package/dist/esm/components/Notifications/ToastNotification/Animate.js

@@ -39,6 +39,7 @@ var Animate = _ref => {
         element.style.display = "none";
       };
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [show, removeState]);
   if (removeState) {
     return null;

package/dist/esm/components/Notifications/ToastNotification/Toast.scss

@@ -1,6 +1,3 @@
-@import "vanilla-framework/scss/settings";
-@import "vanilla-framework/scss/build";
-
 .toast-animate {
   position: relative;
   z-index: 101;
@@ -13,21 +10,21 @@
   position: absolute;
   right: 0;
 
-  @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
+  @media screen and (min-width: 620px) and (max-width: 1036px) {
     width: 500px;
   }
 
-  @media screen and (min-width: $breakpoint-large) {
+  @media screen and (min-width: 1036px) {
     width: 600px;
   }
 }
 
 .toast-notification {
-  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 15%);
+  box-shadow: 0 0 2rem 0.5rem rgb(0 0 0 / 15%);
   overflow: hidden;
   z-index: 101;
 
-  @media screen and (max-width: $breakpoint-small) {
+  @media screen and (max-width: 620px) {
     left: 0;
     margin: 1.5rem auto;
     max-width: 400px;
@@ -37,7 +34,7 @@
 
 .toast-notification-list {
   background-color: white;
-  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 22%);
+  box-shadow: 0 0 2rem 0.5rem rgb(0 0 0 / 22%);
   max-height: calc(100vh - 4.5rem);
   overflow: auto;
   padding: 0 0.5rem;
@@ -66,7 +63,7 @@
       .dismiss-text {
         align-items: center;
         display: flex;
-        gap: $sph--x-small;
+        gap: 0.25rem;
       }
     }
 
@@ -77,9 +74,9 @@
         align-items: center;
         border: none;
         display: flex;
-        gap: $sph--x-small;
+        gap: 0.25rem;
         justify-content: center;
-        margin-right: $sph--small !important;
+        margin-right: 0.5rem !important;
         padding: calc(0.4rem - 1px);
 
         /* stylelint-disable max-nesting-depth */
@@ -88,17 +85,11 @@
           padding: 0;
           text-align: center;
         }
-
-        /* stylelint-disable-next-line selector-class-pattern */
-        .p-icon--info--notification {
-          @extend %icon;
-          @include vf-icon-info-coloured-themed;
-        }
         /* stylelint-enable max-nesting-depth */
       }
     }
 
-    @media screen and (max-width: $breakpoint-small) {
+    @media screen and (max-width: 620px) {
       align-items: flex-start;
       flex-direction: column;
       gap: 0.5rem;
@@ -106,7 +97,7 @@
     }
   }
 
-  @media screen and (max-width: $breakpoint-small) {
+  @media screen and (max-width: 620px) {
     bottom: 2rem;
     left: 0;
     margin: 1.5rem auto;

package/dist/esm/components/Notifications/ToastNotification/ToastNotification.stories.js

@@ -26,6 +26,7 @@ var PreloadedList = () => {
     toastNotify.info("Your changes are syncing in the background");
     toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
     toastNotify.toggleListView();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     style: {

package/dist/esm/components/Notifications/ToastNotification/ToastNotificationList.d.ts

@@ -7,7 +7,7 @@ export type FilterTypes = ValueOf<typeof NotificationSeverity>;
 export declare const severityOrder: readonly ["positive", "caution", "negative", "information"];
 export declare const iconLookup: {
     readonly positive: "success";
-    readonly information: "info--notification";
+    readonly information: "information";
     readonly caution: "warning";
     readonly negative: "error";
 };

package/dist/esm/components/Notifications/ToastNotification/ToastNotificationList.js

@@ -13,8 +13,7 @@ import "./Toast.scss";
 export var severityOrder = ["positive", "caution", "negative", "information"];
 export var iconLookup = {
   positive: ICONS.success,
-  // custom name for info icon to override default color from vanilla
-  information: "info--notification",
+  information: ICONS.information,
   caution: ICONS.warning,
   negative: ICONS.error
 };
@@ -32,6 +31,7 @@ var ToastNotificationList = _ref => {
   var preferReducedMotion = usePrefersReducedMotion();
   useLayoutEffect(() => {
     adjustScrollPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [notifications]);
 
   // this layout effect is used to maintain scroll position of the

package/dist/esm/components/Notifications/ToastNotification/ToastNotificationProvider.js

@@ -100,6 +100,7 @@ var ToastNotificationProvider = _ref => {
         clearTimeout(notificationTimer);
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var showNotificationWithDelay = () => {
     setNotificationTimer(prevTimer => {

package/dist/esm/index.d.ts

@@ -21,6 +21,7 @@ export { default as ConfirmationModal } from "./components/ConfirmationModal";
 export { default as ContextualMenu } from "./components/ContextualMenu";
 export { default as DoughnutChart } from "./components/DoughnutChart";
 export { default as EmptyState } from "./components/EmptyState";
+export { createEventQueue } from "./components/EventQueue";
 export { default as Field } from "./components/Field";
 export { default as Form } from "./components/Form";
 export { default as FormikField } from "./components/FormikField";
@@ -92,6 +93,7 @@ export type { ConfirmationModalProps } from "./components/ConfirmationModal";
 export type { ContextualMenuProps, ContextualMenuDropdownProps, MenuLink, Position, } from "./components/ContextualMenu";
 export type { DoughnutChartProps, Segment } from "./components/DoughnutChart";
 export type { EmptyStateProps } from "./components/EmptyState";
+export type { EventCallback, EventQueue } from "./components/EventQueue";
 export type { FieldProps } from "./components/Field";
 export type { FormProps } from "./components/Form";
 export type { FormikFieldProps } from "./components/FormikField";

package/dist/esm/index.js

@@ -21,6 +21,7 @@ export { default as ConfirmationModal } from "./components/ConfirmationModal";
 export { default as ContextualMenu } from "./components/ContextualMenu";
 export { default as DoughnutChart } from "./components/DoughnutChart";
 export { default as EmptyState } from "./components/EmptyState";
+export { createEventQueue } from "./components/EventQueue";
 export { default as Field } from "./components/Field";
 export { default as Form } from "./components/Form";
 export { default as FormikField } from "./components/FormikField";

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as ConfirmationModal } from "./components/ConfirmationModal";
 export { default as ContextualMenu } from "./components/ContextualMenu";
 export { default as DoughnutChart } from "./components/DoughnutChart";
 export { default as EmptyState } from "./components/EmptyState";
+export { createEventQueue } from "./components/EventQueue";
 export { default as Field } from "./components/Field";
 export { default as Form } from "./components/Form";
 export { default as FormikField } from "./components/FormikField";
@@ -92,6 +93,7 @@ export type { ConfirmationModalProps } from "./components/ConfirmationModal";
 export type { ContextualMenuProps, ContextualMenuDropdownProps, MenuLink, Position, } from "./components/ContextualMenu";
 export type { DoughnutChartProps, Segment } from "./components/DoughnutChart";
 export type { EmptyStateProps } from "./components/EmptyState";
+export type { EventCallback, EventQueue } from "./components/EventQueue";
 export type { FieldProps } from "./components/Field";
 export type { FormProps } from "./components/Form";
 export type { FormikFieldProps } from "./components/FormikField";

package/dist/index.js

@@ -29,6 +29,7 @@ var _exportNames = {
   ContextualMenu: true,
   DoughnutChart: true,
   EmptyState: true,
+  createEventQueue: true,
   Field: true,
   Form: true,
   FormikField: true,
@@ -584,6 +585,12 @@ Object.defineProperty(exports, "Tooltip", {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "createEventQueue", {
+  enumerable: true,
+  get: function () {
+    return _EventQueue.createEventQueue;
+  }
+});
 Object.defineProperty(exports, "failure", {
   enumerable: true,
   get: function () {
@@ -721,6 +728,7 @@ var _ConfirmationModal = _interopRequireDefault(require("./components/Confirmati
 var _ContextualMenu = _interopRequireDefault(require("./components/ContextualMenu"));
 var _DoughnutChart = _interopRequireDefault(require("./components/DoughnutChart"));
 var _EmptyState = _interopRequireDefault(require("./components/EmptyState"));
+var _EventQueue = require("./components/EventQueue");
 var _Field = _interopRequireDefault(require("./components/Field"));
 var _Form = _interopRequireDefault(require("./components/Form"));
 var _FormikField = _interopRequireDefault(require("./components/FormikField"));

package/package.json

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