jcicl 1.0.42 → 1.0.44

package/CustomAlert/CustomAlert.js

@@ -1,10 +1,10 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { jsx as n, jsxs as h } from "react/jsx-runtime";
 import { createElement as x } from "react";
-import { n as p } from "../.chunks/emotion-styled.browser.esm.js";
+import { n as m } from "../.chunks/emotion-styled.browser.esm.js";
 import { Button as b } from "../Button/Button.js";
 import { Flex as u } from "../Flex/Flex.js";
-import a from "../theme.js";
-const g = p("div")`
+import s from "../theme.js";
+const g = m("div")`
   position: fixed;
   top: 0;
   left: 0;
@@ -12,25 +12,26 @@ const g = p("div")`
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
-  align-items: center;
+  align-items: start;
   justify-content: center;
+  padding-top: 13vh;
   z-index: 2000;
-`, C = p("div")`
+`, v = m("div")`
   padding: 16px;
-  background-color: ${a.colors.midnight};
-  color: ${a.colors.white};
+  background-color: ${s.colors.white};
+  color: ${s.colors.black};
   border-radius: 15px;
   font-size: 0.875rem;
   min-width: 300px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-`, m = ({ message: i, buttonNames: c = ["OK"], buttonProps: d = [{}], onComplete: n }) => {
-  const s = (o, t) => {
+`, p = ({ message: i, buttonNames: c = ["OK"], buttonProps: d = [{}], onComplete: e }) => {
+  const a = (o, t) => {
     const l = o ? o(t) : void 0;
-    n == null || n(l);
+    e == null || e(l);
   };
-  return /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(C, { role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ h(u, { column: !0, gap: "16px", children: [
-    /* @__PURE__ */ e(u, { column: !0, children: i }),
-    /* @__PURE__ */ e(u, { justifyContent: "flex-end", gap: "8px", children: c.map((o, t) => {
+  return /* @__PURE__ */ n(g, { children: /* @__PURE__ */ n(v, { role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ h(u, { column: !0, gap: "16px", children: [
+    /* @__PURE__ */ n(u, { column: !0, children: i }),
+    /* @__PURE__ */ n(u, { justifyContent: "flex-end", gap: "8px", children: c.map((o, t) => {
       const l = o === "Cancel" || o === "Close", r = d[t] || {};
       return /* @__PURE__ */ x(
         b,
@@ -38,25 +39,25 @@ const g = p("div")`
           ...r,
           key: t,
           variant: l && !r.variant ? "custom" : r.variant || 1,
-          onClick: (f) => s(r.onClick, f),
-          backgroundColor: l && !r.backgroundColor ? a.colors.charcoal : r.backgroundColor,
-          hoverColor: l && !r.hoverColor ? a.colors.slate : r.hoverColor
+          onClick: (f) => a(r.onClick, f),
+          backgroundColor: l && !r.backgroundColor ? s.colors.charcoal : r.backgroundColor,
+          hoverColor: l && !r.hoverColor ? s.colors.slate : r.hoverColor
         },
         o
       );
     }) })
   ] }) }) });
-}, A = ({ type: i, message: c, buttonNames: d, buttonProps: n, onComplete: s }) => {
+}, A = ({ type: i, message: c, buttonNames: d, buttonProps: e, onComplete: a }) => {
   if (i === "alert")
-    return /* @__PURE__ */ e(m, { message: c, buttonProps: [{ onClick: () => !0 }], onComplete: s });
-  let o = d, t = n;
-  return i === "confirm" && (o = ["OK", "Cancel"], t = [{ onClick: () => !0 }, { onClick: () => !1 }]), /* @__PURE__ */ e(
-    m,
+    return /* @__PURE__ */ n(p, { message: c, buttonProps: [{ onClick: () => !0 }], onComplete: a });
+  let o = d, t = e;
+  return i === "confirm" && (o = ["OK", "Cancel"], t = [{ onClick: () => !0 }, { onClick: () => !1 }]), /* @__PURE__ */ n(
+    p,
     {
       message: c,
       buttonNames: o,
       buttonProps: t,
-      onComplete: s
+      onComplete: a
     }
   );
 };

package/FormFields/FormFields.d.ts

@@ -1,10 +1,11 @@
+import { FormInputType } from '../FormInput';
 import { DropdownOption } from '../LabeledDropdown';
 import { AllInputProps } from '../FormInput/FormInput';
 export type FormField = {
     key: string;
     label?: string;
     sublabel?: string;
-    type: 'checkbox' | 'currency' | 'date' | 'dropdown' | 'email' | 'multiDropdown' | 'number' | 'phone' | 'zip' | 'radio' | 'text' | 'textarea' | 'url';
+    type: FormInputType;
     options?: DropdownOption[];
     limit?: number;
     defaultValue?: string | number;

package/FormFields/FormFields.js

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

package/FormInput/FormInput.d.ts

@@ -2,11 +2,19 @@ import { LabeledInputProps } from '../LabeledInput';
 import { LabeledCurrencyInputProps } from '../LabeledCurrencyInput';
 import { LabeledCheckboxProps } from '../LabeledCheckbox';
 import { LabeledRadioProps } from '../LabeledRadio';
-import { LabeledDropdownProps } from '../LabeledDropdown';
+import { LabeledDropdownProps, DropdownOption } from '../LabeledDropdown';
 import { LabeledTextAreaProps } from '../LabeledTextArea/LabeledTextArea';
 export type AllInputProps = LabeledInputProps & LabeledCheckboxProps & LabeledRadioProps & LabeledDropdownProps & LabeledCurrencyInputProps & LabeledTextAreaProps;
-export type FormInputProps = AllInputProps & {
-    type?: 'text' | 'dropdown' | 'date' | 'number' | 'checkbox' | 'radio' | 'textarea' | 'currency' | 'multiDropdown';
+export type FormInputType = 'checkbox' | 'currency' | 'date' | 'dropdown' | 'email' | 'multiDropdown' | 'number' | 'phone' | 'radio' | 'text' | 'textarea' | 'url' | 'zip';
+type ConflictingKeys = 'onChange' | 'options' | 'value' | 'checked' | 'defaultValue' | 'label';
+export type FormInputProps = Partial<Omit<AllInputProps, ConflictingKeys | 'type'>> & {
+    type?: FormInputType;
+    onChange?: (event: any, ...args: any[]) => void;
+    options?: DropdownOption[];
+    value?: unknown;
+    checked?: boolean;
+    defaultValue?: unknown;
+    label?: string;
 };
 export declare const FormInput: React.FC<FormInputProps>;
 export default FormInput;

package/FormInput/index.d.ts

@@ -1 +1 @@
-export { default, type FormInputProps } from './FormInput.tsx';
+export { default, type FormInputProps, type FormInputType } from './FormInput.tsx';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "1.0.42",
+  "version": "1.0.44",
   "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",