jcicl 1.0.28 → 1.0.30

package/FormContext/createFormContext.d.ts

@@ -0,0 +1,32 @@
+import { FormContextOptions, FormContextResult, InputChangeExtension } from './types';
+/**
+ * Factory function to create a typed form context with shared functionality.
+ * Fixes the stale closure bug by computing all values inside the functional update.
+ *
+ * @template T - The type of form data this context will manage
+ * @param options - Configuration options for the form context
+ * @returns Object containing the Context and Provider
+ *
+ * @example
+ * ```tsx
+ * interface MyFormData {
+ *   name: string;
+ *   email: string;
+ *   [key: string]: unknown; // Required for FormFields compatibility
+ * }
+ *
+ * const { Context: MyFormContext, Provider: MyFormProvider } = createFormContext<MyFormData>({
+ *   name: 'MyForm',
+ *   defaultValues: { name: '', email: '' },
+ * });
+ * ```
+ */
+export declare function createFormContext<T extends Record<string, unknown>>(options: FormContextOptions<T>): FormContextResult<T>;
+/**
+ * Creates a DOB → Age autofill extension.
+ * When dateOfBirth field changes, automatically calculates and sets age.
+ *
+ * @param dobKey - The form field key for date of birth (default: 'dateOfBirth')
+ * @param ageKey - The form field key for age (default: 'age')
+ */
+export declare function createDobToAgeExtension<T extends Record<string, unknown>>(dobKey?: keyof T & string, ageKey?: keyof T & string): InputChangeExtension<T>;

package/FormContext/createFormContext.js

@@ -0,0 +1,74 @@
+import { jsx as N } from "react/jsx-runtime";
+import { createContext as w, useState as E, useEffect as P, useMemo as $ } from "react";
+import { formatPhoneNumber as C } from "../utils.js";
+function I(b) {
+  const { name: n, defaultValues: s = {}, onInputChangeExtensions: u = [], submit: m, debug: a = !1 } = b, i = w({
+    onFormInputChange: () => console.error(`Failed to update form input. ${n}FormContext not initialized`),
+    formData: s,
+    setFormData: () => console.error(`Failed to set form data. ${n}FormContext not initialized`),
+    resetForm: () => console.error(`Failed to reset form. ${n}FormContext not initialized`)
+  });
+  return { Context: i, Provider: ({ children: x }) => {
+    const [e, r] = E(s), d = (g, t, c) => {
+      r((l) => {
+        let o;
+        if (c === "checkbox")
+          o = t.target.checked;
+        else if (c === "multiDropdown") {
+          const h = t.target.value;
+          Array.isArray(h) ? o = h.map((D) => D.value) : o = [];
+        } else if (c === "phone") {
+          const [, h] = C(t.target.value);
+          o = h;
+        } else
+          o = t.target.value;
+        return o === "undefined" && (o = void 0), { ...l, [g]: o };
+      });
+      let p;
+      if (c === "checkbox")
+        p = t.target.checked;
+      else if (c === "phone") {
+        const [, l] = C(t.target.value);
+        p = l;
+      } else
+        p = t.target.value === "undefined" ? void 0 : t.target.value;
+      u.forEach((l) => {
+        l(g, p, r);
+      });
+    }, v = () => r(s);
+    P(() => {
+      a && console.log(`[${n}Form] Updated form data:`, e);
+    }, [e]);
+    const f = $(
+      () => ({
+        onFormInputChange: d,
+        formData: e,
+        setFormData: r,
+        resetForm: v,
+        ...m ? { submit: () => m(e) } : {}
+      }),
+      [e]
+    );
+    return /* @__PURE__ */ N(i.Provider, { value: f, children: x });
+  } };
+}
+function M(b = "dateOfBirth", n = "age") {
+  return (s, u, m) => {
+    if (s === b && u && typeof u == "string") {
+      const a = u.split("-");
+      if (a.length !== 3) return;
+      const i = Number(a[0]), F = Number(a[1]), x = Number(a[2]), e = /* @__PURE__ */ new Date(), r = e.getFullYear(), d = e.getMonth() + 1, v = e.getDate();
+      if (i > r || i < 1900)
+        return;
+      let f = r - i;
+      (F > d || F === d && x > v) && (f -= 1), m((g) => ({
+        ...g,
+        [n]: String(f)
+      }));
+    }
+  };
+}
+export {
+  M as createDobToAgeExtension,
+  I as createFormContext
+};

package/FormContext/index.d.ts

@@ -0,0 +1,2 @@
+export { createFormContext, createDobToAgeExtension } from './createFormContext';
+export type { FormContextProps, FormContextOptions, FormContextResult, InputChangeExtension, } from './types';

package/FormContext/index.js

@@ -0,0 +1,5 @@
+import { createDobToAgeExtension as t, createFormContext as r } from "./createFormContext.js";
+export {
+  t as createDobToAgeExtension,
+  r as createFormContext
+};

package/FormContext/types.d.ts

@@ -0,0 +1,53 @@
+import { PropsWithChildren } from 'react';
+/**
+ * Base form context properties that all form contexts share.
+ * @template T - The type of form data this context manages
+ */
+export interface FormContextProps<T extends Record<string, unknown>> {
+    /**
+     * Handler for form input changes - supports text, checkbox, multiDropdown, and phone types.
+     * Accepts any string key to maintain compatibility with FormFields component,
+     * but typed form data provides compile-time safety for direct property access.
+     */
+    onFormInputChange: (key: string, e: React.ChangeEvent<HTMLInputElement>, type?: string) => void;
+    /** Current form data state */
+    formData: T;
+    /** Direct setter for form data (use sparingly - prefer onFormInputChange) */
+    setFormData: React.Dispatch<React.SetStateAction<T>>;
+    /** Reset form to initial/empty state */
+    resetForm: () => void;
+    /** Optional submit handler (if configured in factory) */
+    submit?: () => void;
+}
+/**
+ * Extension function called after each input change.
+ * Use for side effects like auto-filling related fields (e.g., DOB → Age).
+ * @template T - The type of form data
+ */
+export type InputChangeExtension<T extends Record<string, unknown>> = (key: string, value: unknown, setFormData: React.Dispatch<React.SetStateAction<T>>) => void;
+/**
+ * Configuration options for creating a form context.
+ * @template T - The type of form data this context will manage
+ */
+export interface FormContextOptions<T extends Record<string, unknown>> {
+    /** Name for the context (used in error messages) */
+    name: string;
+    /** Default/initial values for the form */
+    defaultValues?: Partial<T>;
+    /** Extensions called after each input change (e.g., DOB→Age autofill) */
+    onInputChangeExtensions?: InputChangeExtension<T>[];
+    /** Custom submit function */
+    submit?: (formData: T) => void;
+    /** Enable debug logging of form data changes */
+    debug?: boolean;
+}
+/**
+ * Return type from createFormContext factory.
+ * @template T - The type of form data
+ */
+export interface FormContextResult<T extends Record<string, unknown>> {
+    /** The React Context object */
+    Context: React.Context<FormContextProps<T>>;
+    /** Provider component that wraps children with form state */
+    Provider: React.FC<PropsWithChildren>;
+}

package/FormContext/types.js

@@ -0,0 +1 @@
+

package/FormFields/FormFields.js

@@ -1,57 +1,57 @@
-import { jsxs as g, Fragment as j, jsx as m } from "react/jsx-runtime";
-import { FormInput as w } from "../FormInput/FormInput.js";
-import { FormSectionTitle as C, FormFieldGrid as S, FormFieldCheckboxContainer as v } from "../FormComponents/FormComponents.js";
-import z from "../theme.js";
-import { u as G } from "../.chunks/useMediaQuery.js";
-const $ = ({
-  title: p,
-  fields: s,
-  columns: x = G(`(max-width: ${z.screenSizes.tablet})`) ? 2 : 3,
-  columnsOverride: D,
-  gap: f = 21,
-  noLabel: F = !1,
-  checkboxContainer: c = !1,
-  formDefaults: n,
-  onChange: h
-}) => /* @__PURE__ */ g(j, { children: [
-  p && /* @__PURE__ */ m(C, { children: p }),
-  !c && /* @__PURE__ */ m(S, { columns: x, columnsOverride: D, gap: f, children: s.map(({ key: r, label: t, type: o, limit: l, options: u, defaultValue: i, ...e }) => {
-    const d = n[r] ? n[r] : i || (o === "multiDropdown" ? [] : "");
-    return /* @__PURE__ */ m(
-      w,
+import { jsxs as f, Fragment as D, jsx as n } from "react/jsx-runtime";
+import { FormInput as p } from "../FormInput/FormInput.js";
+import { FormSectionTitle as g, FormFieldGrid as j, FormFieldCheckboxContainer as C } from "../FormComponents/FormComponents.js";
+import S from "../theme.js";
+import { u as z } from "../.chunks/useMediaQuery.js";
+const V = ({
+  title: a,
+  fields: h,
+  columns: v = z(`(max-width: ${S.screenSizes.tablet})`) ? 2 : 3,
+  columnsOverride: w,
+  gap: b = 21,
+  noLabel: s = !1,
+  checkboxContainer: F = !1,
+  formDefaults: c,
+  onChange: x
+}) => /* @__PURE__ */ f(D, { children: [
+  a && /* @__PURE__ */ n(g, { children: a }),
+  !F && /* @__PURE__ */ n(j, { columns: v, columnsOverride: w, gap: b, children: h.map(({ key: r, label: e, type: o, limit: d, options: l, defaultValue: i, ...u }) => {
+    const m = c[r] !== void 0 ? c[r] : i !== void 0 ? i : o === "multiDropdown" ? [] : o === "checkbox" ? !1 : "";
+    return /* @__PURE__ */ n(
+      p,
       {
-        onChange: (a) => h(r, a, o),
-        label: t,
+        onChange: (t) => x(r, t, o),
+        label: e,
         type: o,
-        limit: l,
-        value: d,
-        noLabel: F,
-        options: u,
+        limit: d,
+        ...o === "checkbox" ? { checked: !!m } : { value: m },
+        noLabel: s,
+        options: l,
         multiple: o === "multiDropdown",
-        ...e
+        ...u
       },
       r
     );
   }) }),
-  c && /* @__PURE__ */ m(v, { children: s.map(({ key: r, label: t, type: o, limit: l, options: u, defaultValue: i, ...e }) => {
-    const d = n[r] ? n[r] : i || (o === "multiDropdown" ? [] : "");
-    return /* @__PURE__ */ m(
-      w,
+  F && /* @__PURE__ */ n(C, { children: h.map(({ key: r, label: e, type: o, limit: d, options: l, defaultValue: i, ...u }) => {
+    const m = c[r] !== void 0 ? c[r] : i !== void 0 ? i : o === "multiDropdown" ? [] : o === "checkbox" ? !1 : "";
+    return /* @__PURE__ */ n(
+      p,
       {
-        onChange: (a) => h(r, a, o),
-        label: t,
+        onChange: (t) => x(r, t, o),
+        label: e,
         type: o,
-        limit: l,
-        defaultValue: d,
-        noLabel: F,
-        options: u,
+        limit: d,
+        ...o === "checkbox" ? { checked: !!m } : { defaultValue: m },
+        noLabel: s,
+        options: l,
         multiple: o === "multiDropdown",
-        ...e
+        ...u
       },
       r
     );
   }) })
 ] });
 export {
-  $ as default
+  V as default
 };

package/LabeledDropdown/LabeledDropdown.js

@@ -2694,8 +2694,8 @@ const Et = ["colon", "borderFocusColor", "minWidth", "noLabel"], zt = Yo("div",
           {
             options: a,
             onChange: (m, w) => (
-              // @ts-ignore
-              h && h({ ...m, target: { ...m.target, value: `${w == null ? void 0 : w.value}` || "" } })
+              // @ts-ignore - Fix: Use nullish coalescing to avoid "undefined" string
+              h && h({ ...m, target: { ...m.target, value: (w == null ? void 0 : w.value) ?? "" } })
             ),
             ...P,
             renderInput: (m) => /* @__PURE__ */ T(zo, { ...m })

package/Toast/index.d.ts

@@ -1,3 +1,4 @@
 export { default, type ToastProps } from './Toast';
 export { Toaster, type ToastItem } from './Toaster';
 export { handleDismissToast, showToast, saveToastForRedirect, showSavedToast } from './ToastHelpers';
+export { useToast } from './useToast';

package/Toast/index.js

@@ -1,11 +1,13 @@
 import { default as e } from "./Toast.js";
-import { Toaster as a } from "./Toaster.js";
-import { handleDismissToast as T, saveToastForRedirect as d, showSavedToast as f, showToast as m } from "./ToastHelpers.js";
+import { Toaster as r } from "./Toaster.js";
+import { handleDismissToast as T, saveToastForRedirect as f, showSavedToast as m, showToast as d } from "./ToastHelpers.js";
+import { useToast as x } from "./useToast.js";
 export {
-  a as Toaster,
+  r as Toaster,
   e as default,
   T as handleDismissToast,
-  d as saveToastForRedirect,
-  f as showSavedToast,
-  m as showToast
+  f as saveToastForRedirect,
+  m as showSavedToast,
+  d as showToast,
+  x as useToast
 };

package/Toast/useToast.d.ts

@@ -0,0 +1,23 @@
+import { ToastProps } from './Toast';
+import { ToastItem } from './Toaster';
+/**
+ * Hook for managing toast notifications.
+ * Encapsulates toast state management and provides a simple API.
+ *
+ * @example
+ * ```tsx
+ * const { toasts, toast, dismissToast } = useToast();
+ *
+ * // Show a toast
+ * toast({ type: 'success', message: 'Saved!', duration: 3000 });
+ *
+ * // In render
+ * <Toaster toastQueue={toasts} onDismiss={dismissToast} />
+ * ```
+ */
+export declare const useToast: () => {
+    toasts: ToastItem[];
+    toast: (toastProps: ToastProps) => void;
+    dismissToast: (id: number) => void;
+};
+export default useToast;

package/Toast/useToast.js

@@ -0,0 +1,10 @@
+import { useState as a } from "react";
+import { handleDismissToast as e, showToast as i } from "./ToastHelpers.js";
+const c = () => {
+  const [o, t] = a([]);
+  return { toasts: o, toast: (s) => i(s, t), dismissToast: (s) => e(s, t) };
+};
+export {
+  c as default,
+  c as useToast
+};

package/index.d.ts

@@ -9,6 +9,7 @@ export { default as LabeledValue } from './LabeledValue';
 export { default as ListButton } from './ListButton';
 export { default as Loading } from './Loading';
 export { default as ScrollContainer } from './ScrollContainer';
+export * from './FormContext';
 export { default as Accordion } from './Accordion';
 export { default as ErrorBoundary } from './ErrorBoundary';
 export { default as InfoCard } from './InfoCard';

package/index.js

@@ -1,52 +1,55 @@
-import { AvatarWithImage as t } from "./AvatarWithImage/AvatarWithImage.js";
+import { AvatarWithImage as e } from "./AvatarWithImage/AvatarWithImage.js";
 import { Button as a } from "./Button/Button.js";
 import { Divider as p } from "./Divider/Divider.js";
-import { Flex as x } from "./Flex/Flex.js";
-import { Grid as l } from "./Grid/Grid.js";
+import { Flex as m } from "./Flex/Flex.js";
+import { Grid as n } from "./Grid/Grid.js";
 import { default as i } from "./Icon/Icon.js";
 import { Input as s } from "./Input/Input.js";
-import { LabeledValue as I } from "./LabeledValue/LabeledValue.js";
-import { default as b } from "./ListButton/ListButton.js";
+import { LabeledValue as c } from "./LabeledValue/LabeledValue.js";
+import { default as I } from "./ListButton/ListButton.js";
 import { default as g } from "./Loading/Loading.js";
-import { default as C } from "./ScrollContainer/ScrollContainer.js";
-import { Accordion as v } from "./Accordion/Accordion.js";
-import { default as E } from "./ErrorBoundary/ErrorBoundary.js";
+import { default as B } from "./ScrollContainer/ScrollContainer.js";
+import { createDobToAgeExtension as v, createFormContext as E } from "./FormContext/createFormContext.js";
+import { Accordion as D } from "./Accordion/Accordion.js";
+import { default as S } from "./ErrorBoundary/ErrorBoundary.js";
 import { InfoCard as y } from "./InfoCard/InfoCard.js";
-import { LabeledInput as F } from "./LabeledInput/LabeledInput.js";
-import { default as H } from "./List/List.js";
-import { default as T } from "./LogoLoop/LogoLoop.js";
-import { SiteBanner as j } from "./SiteBanner/SiteBanner.js";
-import { Tooltip as q } from "./Tooltip/Tooltip.js";
-import { default as z } from "./WithLabel/WithLabel.js";
-import { default as K } from "./WithLoading/WithLoading.js";
-import { A as O } from "./.chunks/AppHeader.js";
-import { EditableInfoCard as Q } from "./EditableInfoCard/EditableInfoCard.js";
-import { Nav as U } from "./Nav/Nav.js";
-import { default as Y } from "./AppContainer/AppContainer.js";
+import { LabeledInput as H } from "./LabeledInput/LabeledInput.js";
+import { default as V } from "./List/List.js";
+import { default as k } from "./LogoLoop/LogoLoop.js";
+import { SiteBanner as w } from "./SiteBanner/SiteBanner.js";
+import { Tooltip as J } from "./Tooltip/Tooltip.js";
+import { default as M } from "./WithLabel/WithLabel.js";
+import { default as P } from "./WithLoading/WithLoading.js";
+import { A as R } from "./.chunks/AppHeader.js";
+import { EditableInfoCard as X } from "./EditableInfoCard/EditableInfoCard.js";
+import { Nav as Z } from "./Nav/Nav.js";
+import { default as $ } from "./AppContainer/AppContainer.js";
 export {
-  v as Accordion,
-  Y as AppContainer,
-  O as AppHeader,
-  t as AvatarWithImage,
+  D as Accordion,
+  $ as AppContainer,
+  R as AppHeader,
+  e as AvatarWithImage,
   a as Button,
   p as Divider,
-  Q as EditableInfoCard,
-  E as ErrorBoundary,
-  x as Flex,
-  l as Grid,
+  X as EditableInfoCard,
+  S as ErrorBoundary,
+  m as Flex,
+  n as Grid,
   i as Icon,
   y as InfoCard,
   s as Input,
-  F as LabeledInput,
-  I as LabeledValue,
-  H as List,
-  b as ListButton,
+  H as LabeledInput,
+  c as LabeledValue,
+  V as List,
+  I as ListButton,
   g as Loading,
-  T as LogoLoop,
-  U as Nav,
-  C as ScrollContainer,
-  j as SiteBanner,
-  q as Tooltip,
-  z as WithLabel,
-  K as WithLoading
+  k as LogoLoop,
+  Z as Nav,
+  B as ScrollContainer,
+  w as SiteBanner,
+  J as Tooltip,
+  M as WithLabel,
+  P as WithLoading,
+  v as createDobToAgeExtension,
+  E as createFormContext
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "Component library for the websites of Johnson County Iowa",
   "license": "MIT",
   "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",