@unitedstatespowersquadrons/components 1.2.6-pre.9 → 1.2.7-pre.1

package/BaseActionButton.tsx

@@ -108,7 +108,7 @@ const BaseActionButton = (props: BaseActionButtonProps) => {
         target={newTab ? "_blank" : undefined}
         title={title}
       >
-        <button className={classNames("action-button", classes.button, className)} type="button">
+        <button className={classNames("action-button", classes.button, className)} tabIndex={-1} type="button">
           {children}
         </button>
       </a>

package/Reducer/buildReducer.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useMemo } from "react";
 import { Draft, produce } from "immer";
 import { useImmerReducer } from "use-immer";
+import ActionCable, { Cable } from "actioncable";
 import { ReducerHandler } from "./types";
 
 interface InitialAppProps<AppState> {
@@ -10,10 +11,14 @@ interface InitialAppProps<AppState> {
 
 export default function buildReducer<AppState, AppAction>(
   reducer: (draft: Draft<AppState>, action: AppAction) => void,
-  handlers: ReducerHandler<AppAction>[] = []
+  handlers: ReducerHandler<AppAction>[] = [],
+  actionCableUrl?: string
 ) {
   const StateContext = createContext<AppState | null>(null);
   const DispatchContext = createContext<React.Dispatch<AppAction> | null>(null);
+  const CableContext = createContext<Cable | null>(null);
+
+  const cable = actionCableUrl ? ActionCable.createConsumer(actionCableUrl) : null;
 
   function AppProvider(props: InitialAppProps<AppState>) {
     const [providerState, dispatch] = useImmerReducer(reducer, props.initialState, (state: AppState) => {
@@ -30,9 +35,11 @@ export default function buildReducer<AppState, AppAction>(
 
     return (
       <StateContext.Provider value={providerState}>
-        <DispatchContext.Provider value={wrappedDispatch}>
-          {props.children}
-        </DispatchContext.Provider>
+        <CableContext.Provider value={cable}>
+          <DispatchContext.Provider value={wrappedDispatch}>
+            {props.children}
+          </DispatchContext.Provider>
+        </CableContext.Provider>
       </StateContext.Provider>
     );
   }

package/Styles.tsx

@@ -30,9 +30,7 @@ const colorizeButton = (color: ButtonColorName) => {
   const shadow = Colors.button.background.shadow[color];
 
   return({
-    "&:active": {
-      boxShadow: `0 0 2px 2px ${Colors.button.glow}`,
-    },
+    "&:active": { boxShadow: `0 0 2px 2px ${Colors.button.glow}` },
     "&:hover": {
       background: `linear-gradient(180deg, ${shadow} 0%, ${hover} 20%, ${hover} 80%, ${shadow} 100%) !important`,
       fontWeight: "normal",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.2.6-pre.9",
+  "version": "1.2.7-pre.1",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {
@@ -17,6 +17,8 @@
   },
   "homepage": "https://github.com/unitedstatespowersquadrons/components#readme",
   "dependencies": {
+    "@rails/actioncable": "^8.0.200",
+    "@types/actioncable": "^5.2.11",
     "classnames": "^2.5.1",
     "immer": "^10.1.1",
     "react": "^19.1.0",