@unitedstatespowersquadrons/components 1.2.25-2 → 1.2.26-1

package/ActionButton.tsx

@@ -63,24 +63,9 @@ interface InlineProps {
   inline?: boolean;
 }
 
-/**
- * Props for a standard link button
- */
 export interface ActionButtonHrefProps extends CoreActionButtonProps, HrefProps, InlineProps {}
-
-/**
- * Props for a link button with a form wrapper for HTTP verb requests
- */
 export interface ActionButtonMethodProps extends CoreActionButtonProps, MethodProps {}
-
-/**
- * Props for a button with a custom `onClick` handler
- */
 export interface ActionButtonOnClickProps extends CoreActionButtonProps, OnClickProps {}
-
-/**
- * Props for a button to submit a form
- */
 export interface ActionButtonFormProps extends CoreActionButtonProps, FormProps {}
 
 export type ActionButtonProps =
@@ -89,12 +74,6 @@ export type ActionButtonProps =
   | ActionButtonOnClickProps
   | ActionButtonFormProps;
 
-/**
- * Stylized button with icon and text, for handling dispatch actions, form
- * submissions, and other general links
- *
- * @category Components
- */
 const ActionButton = (props: ActionButtonProps) => {
   const { className, color, fa, grayMode, icon, id, mode, rightIcon, size, style, subtext, text, title } = props;
   const classes = useStyles();

package/Colors.tsx

@@ -126,9 +126,6 @@ const specificColors = {
   },
 };
 
-/**
- * Shared JSS color styles
- */
 const Colors = {
   ...baseColors,
   ...insigniaColors,

package/Flags/Officer.tsx

@@ -9,7 +9,7 @@ type FlagRank =
   | "PDLTC" | "PDC" | "DAIDE" | "DFLT" | "D1LT"
   | "PNFLT" | "PSTFC" | "PRC" | "PVC" | "PCC" | "NAIDE" | "NFLT";
 
-interface OfficerProps {
+interface Props {
   className?: string;
   flag?: string; // FlagRank | jobcode
   format?: "svg" | "png";
@@ -19,12 +19,7 @@ interface OfficerProps {
   size?: number | "thumb";
 }
 
-/**
- * An officer flag image
- *
- * @category Components
- */
-const OfficerFlag = (props: OfficerProps) => {
+const OfficerFlag = (props: Props) => {
   const { className, flag, format, jobcode, insignia, rank, size } = props;
 
   if (!flag && !jobcode && !rank) {

package/Flags/Signal.tsx

@@ -1,18 +1,13 @@
 import React from "react";
 
-interface SignalProps {
+interface Props {
   alt?: string;
   className?: string;
   flag: string;
   format?: "svg" | "png" | undefined;
 }
 
-/**
- * An individual signal flag image
- *
- * @category Components
- */
-const SignalFlag = (props: SignalProps) => {
+const SignalFlag = (props: Props) => {
   const { alt, className, flag, format } = props;
 
   const special = ["\uE000", "\uE001",   "\uE002",   "\uE003"];

package/Flags/Signals.tsx

@@ -14,7 +14,7 @@ type Size =
   | "vertical"
   | "center";
 
-interface SignalsProps {
+interface Props {
   className?: string;
   format?: "svg" | "png";
   orientation?: Orientation;
@@ -70,12 +70,7 @@ const useStyles = createUseStyles({
   },
 });
 
-/**
- * A colleciton of signal flag images generated from a string
- *
- * @category Components
- */
-const SignalFlags = (props: SignalsProps) => {
+const SignalFlags = (props: Props) => {
   const { className, format, orientation, size, text, title } = props;
   const classes = useStyles();
 

package/FontAwesomeIcon.tsx

@@ -17,12 +17,6 @@ const useStyles = createUseStyles({
   },
 });
 
-/**
- * A formatted FontAwesome icon placeholder `<i>` tag, which will be replaced by
- * the FontAwesome JS with the corresponding SVG
- *
- * @category Components
- */
 const FontAwesomeIcon = (props: FontAwesomeProps) => {
   const { css, fa, icon, mode, style, title } = props;
   const classes = useStyles();

package/IconButton.tsx

@@ -25,19 +25,8 @@ interface CoreIconProps extends FontAwesomeProps {
   title: string;
 }
 
-/**
- * Props for a standard link button
- */
 export interface IconButtonHrefProps extends CoreIconProps, HrefProps {}
-
-/**
- * Props for a link button with a form wrapper for HTTP verb requests
- */
 export interface IconButtonMethodProps extends CoreIconProps, MethodProps {}
-
-/**
- * Props for a button with a custom `onClick` handler
- */
 export interface IconButtonOnClickProps extends CoreIconProps, OnClickProps {}
 
 export type IconButtonProps =
@@ -45,12 +34,6 @@ export type IconButtonProps =
   | IconButtonMethodProps
   | IconButtonOnClickProps;
 
-/**
- * Stylized icon-only button, for handling dispatch actions, form submissions,
- * and other general links
- *
- * @category Components
- */
 const IconButton = (props: IconButtonProps) => {
   const { className, fa, icon, id, mode, style, title } = props;
   const classes = useStyles();

package/RailsForm.tsx

@@ -1,27 +1,26 @@
 import React from "react";
 
-interface RailsFormProps {
+interface Props {
   action: string;
   fileUpload?: boolean;
   id?: string;
-  method?: "get" | "post";
+  method?: "get" | "post" | "put" | "patch" | "delete";
   children: React.ReactNode[];
 }
 
-/**
- * A `form` tag that includes the Rails CSRF params
- *
- * @category Components
- */
-const RailsForm = (props: RailsFormProps) => {
+const RailsForm = (props: Props) => {
   const { action, children, fileUpload, id, method } = props;
 
   const token = document.querySelector("meta[name='csrf-token']");
   const csrfToken = token ? token.getAttribute("content")! : "";
 
+  const formMethod = method === "get" ? "get" : "post";
+
   return(
-    <form action={action} encType={fileUpload ? "multipart/form-data" : undefined} id={id} method={method}>
+    <form action={action} encType={fileUpload ? "multipart/form-data" : undefined} id={id} method={formMethod}>
       <input name="authenticity_token" type="hidden" value={csrfToken} />
+      {method === formMethod ||
+        <input name="_method" type="hidden" value={method} />}
       {children}
     </form>
   );

package/Reducer/buildReducer.tsx

@@ -9,13 +9,6 @@ interface InitialAppProps<AppState> {
   children: React.ReactNode;
 }
 
-/**
- * Construct the exports from a reducer
- *
- * @param reducer The specific reducer function for the component
- * @param handlers Handlers for individual dispatch actions
- * @returns { AppProvider, useAppCableSubscription, useAppDispatch, useAppState }
- */
 export default function buildReducer<AppState, AppAction>(
   reducer: (draft: Draft<AppState>, action: AppAction) => void,
   handlers: ReducerHandler<AppAction>[] = []

package/Reducer/buildUnreducibleState.tsx

@@ -5,11 +5,6 @@ interface InitialAppProps<AppState> {
   children: React.ReactNode;
 }
 
-/**
- * Construct the exports to access appState for a component without a reducer
- *
- * @returns { AppProvider, useAppState }
- */
 export default function buildUnreducibleState<AppState>() {
   const StateContext = createContext<AppState | null>(null);
 

package/Reducer/wrapDispatch.tsx

@@ -18,9 +18,10 @@ export default function wrapDispatch<
 >(
   dispatch: DispatchFunc<A>,
   appActionTypes: AppActionType<A>[],
-  handler: DispatchHandler<A>
+  handler: DispatchHandler<A>,
+  debounce?: boolean
 ): DispatchFunc<A> {
-  const updateDebounceTime = (("testEnv" in window) && window.testEnv) ? 50 : 250;
+  const updateDebounceTime =  debounce ? ((("testEnv" in window) && window.testEnv) ? 50 : 250) : 0;
 
   const updateHandler = async (action: A, signal: AbortSignal) => {
     const handlerData = handler(action);

package/SelectionIconButton.tsx

@@ -7,17 +7,12 @@ const useStyles = createUseStyles({
   icon: { cursor: "pointer" },
 });
 
-interface SelectionIconButtonProps extends Omit<IconButtonOnClickProps, "icon"> {
+interface Props extends Omit<IconButtonOnClickProps, "icon"> {
   id?: string;
   selected: boolean;
 }
 
-/**
- * Stylized icon-only button, intended for handling add/remove dispatch actions
- *
- * @category Components
- */
-const SelectionIconButton = (props: SelectionIconButtonProps) => {
+const SelectionIconButton = (props: Props) => {
   const { id, onClick, selected } = props;
   const classes = useStyles();
 

package/StripedTable/Body.tsx

@@ -6,16 +6,11 @@ const useStyles = createUseStyles({
   tbody: TableStyles.tbody,
 });
 
-interface BodyProps {
+interface Props {
   children: React.ReactNode;
 }
 
-/**
- * Table body with automatic row striping
- *
- * @category Components
- */
-const Body = (props: BodyProps) => {
+const Body = (props: Props) => {
   const { children } = props;
   const classes = useStyles();
 

package/StripedTable/Foot.tsx

@@ -6,16 +6,11 @@ const useStyles = createUseStyles({
   tfoot: TableStyles.tfoot,
 });
 
-interface FootProps {
+interface Props {
   children: React.ReactNode;
 }
 
-/**
- * Table foot with automatic row striping
- *
- * @category Components
- */
-const Head = (props: FootProps) => {
+const Head = (props: Props) => {
   const { children } = props;
   const classes = useStyles();
 

package/StripedTable/Head.tsx

@@ -6,16 +6,11 @@ const useStyles = createUseStyles({
   thead: TableStyles.thead,
 });
 
-interface HeadProps {
+interface Props {
   children: React.ReactNode;
 }
 
-/**
- * Table head with automatic row striping
- *
- * @category Components
- */
-const Head = (props: HeadProps) => {
+const Head = (props: Props) => {
   const { children } = props;
   const classes = useStyles();
 

package/StripedTable/Table.tsx

@@ -10,7 +10,7 @@ const useStyles = createUseStyles({
   tableStripedTbody: TableStyles.tableStripedTbody,
 });
 
-interface TableProps {
+interface Props {
   borderCollapse?: boolean;
   children: React.ReactNode;
   className?: string;
@@ -18,12 +18,7 @@ interface TableProps {
   stripedTbody?: boolean;
 }
 
-/**
- * Table with automatic row striping
- *
- * @category Components
- */
-const Table = (props: TableProps) => {
+const Table = (props: Props) => {
   const { borderCollapse, children, className, id, stripedTbody } = props;
   const classes = useStyles();
 

package/StripedTable/TableStyles.ts

@@ -58,9 +58,6 @@ const tableStripedTbody = {
   "& > thead": thead,
 };
 
-/**
- * Shared JSS styles for striped tables and sections
- */
 const TableStyles = { table, tableStripedTbody, tbody, tfoot, thead };
 
 export default TableStyles;

package/Styles.tsx

@@ -40,9 +40,6 @@ const colorizeButton = (color: ButtonColorName) => {
   });
 };
 
-/**
- * Shared JSS styles
- */
 const Styles = {
   bigText: { fontSize: "1.5em" },
   button: {

package/Toasts/Toast.tsx

@@ -5,7 +5,7 @@ import { DismissFunc, Toast_Status, ToastProps } from "./types";
 import FontAwesomeIcon from "../FontAwesomeIcon";
 import Styles from "../Styles";
 
-interface ToastComponentProps {
+interface Props {
   dismiss: DismissFunc;
   toast: ToastProps;
 }
@@ -26,10 +26,7 @@ const useStyles = createUseStyles({
     color: "#009900",
   },
   toast: {
-    "@media print, screen and (max-width: 1000px)": {
-      maxWidth: "100%",
-      width: "auto",
-    },
+    "@media print, screen and (max-width: 1000px)": { maxWidth: "100%" },
     animation: "fadeIn 1s",
     backgroundColor: "#EEEEEE",
     border: "thin solid white",
@@ -72,12 +69,7 @@ const useStyles = createUseStyles({
   visible: { opacity: "1" },
 });
 
-/**
- * An individual toast message
- *
- * @category Components
- */
-const Toast = (props: ToastComponentProps) => {
+const Toast = (props: Props) => {
   const classes = useStyles();
 
   const { dismiss, toast } = props;

package/Toasts/Toasts.tsx

@@ -23,9 +23,9 @@ type Props = DismissProps | DispatchProps;
 const useStyles = createUseStyles({
   toastsContainer: {
     "@media print, screen and (max-width: 1000px)": {
-      fontSize: "1.5em",
-      margin: "0.5em",
-      width: "90vw",
+      fontSize: "0.7em",
+      marginLeft: "0.5em",
+      maxWidth: "100%",
     },
     display: "flex",
     flexDirection: "column",
@@ -38,11 +38,6 @@ const useStyles = createUseStyles({
   },
 });
 
-/**
- * Container for handling toast messages
- *
- * @category Components
- */
 const Toasts = (props: Props) => {
   const { toasts } = props;
   const classes = useStyles();

package/Toasts/toastHelpers.ts

@@ -2,10 +2,6 @@ import { Draft } from "immer";
 import { Toast, ToastProps, ToastRemoveAppAction } from "./types";
 import { AppStateWithToasts, DispatchFunc } from "../";
 
-/**
- * Wrap a reducer's dispatch function to create the dismissToast function for a
- * component
- */
 export function createDismissToast(dispatch: DispatchFunc<ToastRemoveAppAction>) {
   const dismissToast = (toastId: number) => {
     dispatch({ toastId, type: "dismissToast" });
@@ -16,18 +12,12 @@ export function createDismissToast(dispatch: DispatchFunc<ToastRemoveAppAction>)
   return dismissToast;
 }
 
-/**
- * Handle toasts received from the server, or generated by an action
- */
 export function handleToasts<T extends AppStateWithToasts>(draft: Draft<T>, toasts: Toast[]) {
   if (toasts.length > 0) {
     toasts.forEach(toast => addToast(draft, toast));
   }
 }
 
-/**
- * Add a toast to the current toasts container
- */
 export function addToast<T extends AppStateWithToasts>(draft: Draft<T>, toastOptions: Toast) {
   const { body, id, status, timeout, title } = toastOptions;
 
@@ -52,9 +42,6 @@ export function addToast<T extends AppStateWithToasts>(draft: Draft<T>, toastOpt
   draft.toasts.push(toast);
 }
 
-/**
- * Remove a toast from the current toasts container
- */
 export function removeToast<T extends AppStateWithToasts>(draft: Draft<T>, toast: ToastProps) {
   const beforeToasts: ToastProps[] = [];
   const afterToasts: ToastProps[] = [];
@@ -74,10 +61,6 @@ export function removeToast<T extends AppStateWithToasts>(draft: Draft<T>, toast
   });
 }
 
-/**
- * Remove a toast from the current toasts container corresponding to a specific
- * known toastId (usually, a static toast generated by the server)
- */
 export function removeToastById<T extends AppStateWithToasts>(draft: Draft<T>, toastId: number) {
   const toast = draft.toasts.find(t => t.id === toastId);
 

package/eslint.config.mjs

@@ -249,7 +249,6 @@ export default tseslint.config(
       "app/javascript/controllers/*",
       "app/javascript/application.js",
       "app/javascript/mount.tsx",
-      "docs/*",
       "eslint.config.mjs",
     ],
   },

package/mount.tsx

@@ -28,9 +28,6 @@ const findComponent = (
   return (current as Components)[componentName];
 };
 
-/**
- * Mount React components to make them renderable in the UI
- */
 export default function mount(components: NestedComponents): void {
   document.addEventListener("DOMContentLoaded", () => {
     const mountPoints = document.querySelectorAll("[data-react-component]");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.2.25-2",
+  "version": "1.2.26-1",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {
@@ -37,7 +37,6 @@
     "eslint-plugin-import-newlines": "^1.4.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "typedoc": "^0.28.14",
     "typescript-eslint": "^8.36.0"
   }
 }

package/railsFetchJson.tsx

@@ -9,9 +9,6 @@ export const getCsrfTokenHeader = () => {
   return token ? token.getAttribute("content")! : "";
 };
 
-/**
- * Wrapper for `fetch` that includes the Rail CSRF params
- */
 const railsFetchJson = <T = object>(url: RequestInfo, options?: FetchJsonOptions) => {
   options ||= {};
   const optionHeaders = options.headers;
@@ -20,8 +17,8 @@ const railsFetchJson = <T = object>(url: RequestInfo, options?: FetchJsonOptions
     ...optionHeaders,
     Credentials: "same-origin",
     "X-CSRF-Token": getCsrfTokenHeader(),
+    "X-Exams-Client": "React-2025",
     "X-Requested-With": "XMLHttpRequest",
-    "X-USPS-Client": "React-2025",
   };
 
   const jsonPost = options.method !== "GET" && options?.bodyJson;

package/types.ts

@@ -15,9 +15,6 @@ type OnClickOrKeyboardEvent =
   | React.MouseEvent<HTMLButtonElement>
   | React.KeyboardEvent<HTMLInputElement>;
 
-/**
- * @private
- */
 export interface HrefProps {
   href: string;
   linkClassName?: string | undefined;
@@ -30,17 +27,11 @@ type HttpMethod =
   | "PATCH" | "patch"
   | "DELETE" | "delete";
 
-/**
- * @private
- */
 export interface MethodProps extends HrefProps {
   confirm?: string | undefined;
   method: HttpMethod;
 }
 
-/**
- * @private
- */
 export interface OnClickProps {
   confirm?: string | undefined;
   onClick: OnClickHandler;

package/docs/.nojekyll

@@ -1 +0,0 @@
-TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

package/docs/assets/hierarchy.js

@@ -1 +0,0 @@
-window.hierarchyData = "eJyVkrFuwyAQht/lZtIWxziWtzRS1KVqh25VBsu+yCiYq4CoQ+R378VDiqJYgoUB7uf7juMCjih4aL5lUYpNdRDg8GiwC5osb19A1dfVtiNCA1/U+vDp6MeDgJO2PTSFqgScneFTbQO6Y9uhf/4vfBrCaLi6M63nCyH4fnVNrm7VMAnYVPeUFEDC3Xw4aNM7tNyjqg/M4k4j2J5s2P6ipxFTGrsvz1WQazk7rGXksCOH2/nJX88hkE0ReZjJtikrISslZK1E8VLMZmU8ipjwxj8jxexhJu0bsMsC/B3DQH0uPkolCtRLAh92Z3R3yjWIY2kKPIcFhT25MZd/y6TAp+kPKrFfRA=="

package/docs/assets/highlight.css

@@ -1,99 +0,0 @@
-:root {
-    --light-hl-0: #AF00DB;
-    --dark-hl-0: #C586C0;
-    --light-hl-1: #000000;
-    --dark-hl-1: #D4D4D4;
-    --light-hl-2: #0000FF;
-    --dark-hl-2: #569CD6;
-    --light-hl-3: #A31515;
-    --dark-hl-3: #CE9178;
-    --light-hl-4: #795E26;
-    --dark-hl-4: #DCDCAA;
-    --light-hl-5: #001080;
-    --dark-hl-5: #9CDCFE;
-    --light-hl-6: #800000;
-    --dark-hl-6: #808080;
-    --light-hl-7: #800000;
-    --dark-hl-7: #569CD6;
-    --light-hl-8: #E50000;
-    --dark-hl-8: #9CDCFE;
-    --light-hl-9: #0000FF;
-    --dark-hl-9: #CE9178;
-    --light-hl-10: #0451A5;
-    --dark-hl-10: #9CDCFE;
-    --light-code-background: #FFFFFF;
-    --dark-code-background: #1E1E1E;
-}
-
-@media (prefers-color-scheme: light) { :root {
-    --hl-0: var(--light-hl-0);
-    --hl-1: var(--light-hl-1);
-    --hl-2: var(--light-hl-2);
-    --hl-3: var(--light-hl-3);
-    --hl-4: var(--light-hl-4);
-    --hl-5: var(--light-hl-5);
-    --hl-6: var(--light-hl-6);
-    --hl-7: var(--light-hl-7);
-    --hl-8: var(--light-hl-8);
-    --hl-9: var(--light-hl-9);
-    --hl-10: var(--light-hl-10);
-    --code-background: var(--light-code-background);
-} }
-
-@media (prefers-color-scheme: dark) { :root {
-    --hl-0: var(--dark-hl-0);
-    --hl-1: var(--dark-hl-1);
-    --hl-2: var(--dark-hl-2);
-    --hl-3: var(--dark-hl-3);
-    --hl-4: var(--dark-hl-4);
-    --hl-5: var(--dark-hl-5);
-    --hl-6: var(--dark-hl-6);
-    --hl-7: var(--dark-hl-7);
-    --hl-8: var(--dark-hl-8);
-    --hl-9: var(--dark-hl-9);
-    --hl-10: var(--dark-hl-10);
-    --code-background: var(--dark-code-background);
-} }
-
-:root[data-theme='light'] {
-    --hl-0: var(--light-hl-0);
-    --hl-1: var(--light-hl-1);
-    --hl-2: var(--light-hl-2);
-    --hl-3: var(--light-hl-3);
-    --hl-4: var(--light-hl-4);
-    --hl-5: var(--light-hl-5);
-    --hl-6: var(--light-hl-6);
-    --hl-7: var(--light-hl-7);
-    --hl-8: var(--light-hl-8);
-    --hl-9: var(--light-hl-9);
-    --hl-10: var(--light-hl-10);
-    --code-background: var(--light-code-background);
-}
-
-:root[data-theme='dark'] {
-    --hl-0: var(--dark-hl-0);
-    --hl-1: var(--dark-hl-1);
-    --hl-2: var(--dark-hl-2);
-    --hl-3: var(--dark-hl-3);
-    --hl-4: var(--dark-hl-4);
-    --hl-5: var(--dark-hl-5);
-    --hl-6: var(--dark-hl-6);
-    --hl-7: var(--dark-hl-7);
-    --hl-8: var(--dark-hl-8);
-    --hl-9: var(--dark-hl-9);
-    --hl-10: var(--dark-hl-10);
-    --code-background: var(--dark-code-background);
-}
-
-.hl-0 { color: var(--hl-0); }
-.hl-1 { color: var(--hl-1); }
-.hl-2 { color: var(--hl-2); }
-.hl-3 { color: var(--hl-3); }
-.hl-4 { color: var(--hl-4); }
-.hl-5 { color: var(--hl-5); }
-.hl-6 { color: var(--hl-6); }
-.hl-7 { color: var(--hl-7); }
-.hl-8 { color: var(--hl-8); }
-.hl-9 { color: var(--hl-9); }
-.hl-10 { color: var(--hl-10); }
-pre, code { background: var(--code-background); }