jcicl 0.0.139 → 0.0.143

package/AppHeader/AppHeader.d.ts

@@ -14,6 +14,8 @@ export interface AppHeaderProps {
     onUserMenuClick?: () => void;
     onHamburgerMenuClick?: () => void;
     onSearch?: () => void;
+    searchPlaceholder?: string;
+    onInputChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     logoProps: CustomLogoProps;
     iconColor: string;
     isMobile?: boolean;

package/AppHeader/AppHeader.js

@@ -1,27 +1,27 @@
 import { jsx as t, jsxs as w } from "react/jsx-runtime";
 import * as W from "react";
-import J, { useState as $, useLayoutEffect as K } from "react";
+import N, { useState as $, useLayoutEffect as Q } from "react";
 import { n as f } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as m } from "../.chunks/emotion-react.browser.esm.js";
 import { Search as k } from "../Search/Search.js";
 import { Button as M } from "../Button/Button.js";
 import E from "../Icon/Icon.js";
-import N from "../WithLabel/WithLabel.js";
+import X from "../WithLabel/WithLabel.js";
 import { c as A } from "../.chunks/createSvgIcon.js";
-const Q = J[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], X = (e) => {
+const Y = N[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], Z = (e) => {
   const n = W.useRef(e);
   return W.useEffect(() => {
     n.current = e;
   }), n;
 };
-function Y() {
+function ee() {
 }
-function Z(e, n, l = {}) {
-  const c = te(l.polyfill), a = X(n);
-  return Q(() => {
+function te(e, n, l = {}) {
+  const c = ie(l.polyfill), a = Z(n);
+  return Y(() => {
     let i = !1;
     const d = e && "current" in e ? e.current : e;
-    if (!d) return Y;
+    if (!d) return ee;
     function r(o, s) {
       i || a.current(o, s);
     }
@@ -30,7 +30,7 @@ function Z(e, n, l = {}) {
     };
   }, [e, c, a]), c.observer;
 }
-function ee(e) {
+function ne(e) {
   let n = !1, l = [];
   const c = /* @__PURE__ */ new Map(), a = new (e || window.ResizeObserver)((i, d) => {
     l = l.concat(i);
@@ -67,7 +67,7 @@ function ee(e) {
   };
 }
 let y;
-const te = (e) => y || (y = ee(e)), ne = A(/* @__PURE__ */ t("path", {
+const ie = (e) => y || (y = ne(e)), oe = A(/* @__PURE__ */ t("path", {
   d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
 }), "Menu"), H = A(/* @__PURE__ */ t("path", {
   d: "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4m0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4"
@@ -93,7 +93,7 @@ const te = (e) => y || (y = ee(e)), ne = A(/* @__PURE__ */ t("path", {
     gap: 1rem;
     height: ${e}px;
   `
-})), ie = f("div")(({ width: e, loggedIn: n }) => ({
+})), re = f("div")(({ width: e, loggedIn: n }) => ({
   ...m`
     width: ${e}px;
     display: flex;
@@ -121,7 +121,7 @@ const te = (e) => y || (y = ee(e)), ne = A(/* @__PURE__ */ t("path", {
       width: 100%;
     }
   `
-})), he = ({
+})), me = ({
   isMobile: e,
   loggedIn: n,
   logoProps: l,
@@ -136,23 +136,26 @@ const te = (e) => y || (y = ee(e)), ne = A(/* @__PURE__ */ t("path", {
   onUserMenuClick: b,
   onLogin: j,
   onSearch: V = () => {
-  }
+  },
+  searchPlaceholder: F = "Search",
+  onInputChange: U
 }) => {
-  const [v, C] = $(0), [u, F] = $(null), [g, U] = $(null), { logoSrc: z, logoWidth: O, logoHeight: x } = l, { shadowSecondary: B, shadowTertiary: q, iconPrimary: T, borderPrimary: D } = a, S = {
-    shadowTertiary: q,
-    borderColor: D,
-    borderFocusColor: T,
+  const [v, C] = $(0), [u, B] = $(null), [g, q] = $(null), { logoSrc: z, logoWidth: O, logoHeight: x } = l, { shadowSecondary: T, shadowTertiary: D, iconPrimary: G, borderPrimary: J } = a, S = {
+    shadowTertiary: D,
+    borderColor: J,
+    borderFocusColor: G,
     filters: s,
     onSearch: V,
-    placeholder: "Search..."
+    placeholder: F,
+    onChange: U
   };
-  K(() => {
+  Q(() => {
     u && u.clientWidth > v && C(u.clientWidth), g && g.clientWidth > v && C(g.clientWidth);
   }, [u, g]);
-  const G = (p) => {
+  const K = (p) => {
     p != null && p.clientWidth && p.clientWidth > v && C(p.clientWidth);
   };
-  return Z(u, () => G(u)), e ? /* @__PURE__ */ w(I, { mobile: !0, shadowSecondary: B, children: [
+  return te(u, () => K(u)), e ? /* @__PURE__ */ w(I, { mobile: !0, shadowSecondary: T, children: [
     /* @__PURE__ */ t(R, { height: x, children: /* @__PURE__ */ t(L, { src: z, height: `${x}px`, width: O }) }),
     /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(k, { ...S }) }),
     /* @__PURE__ */ t(
@@ -166,12 +169,12 @@ const te = (e) => y || (y = ee(e)), ne = A(/* @__PURE__ */ t("path", {
   ] }) : /* @__PURE__ */ w(I, { children: [
     /* @__PURE__ */ w(R, { height: x, children: [
       /* @__PURE__ */ t(L, { src: z, height: `${x}px`, width: O }),
-      i && /* @__PURE__ */ t(M, { variant: "icon", onClick: h, color: c, children: /* @__PURE__ */ t(ne, {}) })
+      i && /* @__PURE__ */ t(M, { variant: "icon", onClick: h, color: c, children: /* @__PURE__ */ t(oe, {}) })
     ] }),
     /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(k, { ...S }) }),
-    /* @__PURE__ */ w(ie, { width: v, loggedIn: !!n, children: [
-      /* @__PURE__ */ t(_, { visible: !!n, ref: F, children: /* @__PURE__ */ t(
-        N,
+    /* @__PURE__ */ w(re, { width: v, loggedIn: !!n, children: [
+      /* @__PURE__ */ t(_, { visible: !!n, ref: B, children: /* @__PURE__ */ t(
+        X,
         {
           id: "accountMenuContainer",
           component: /* @__PURE__ */ t(
@@ -185,10 +188,10 @@ const te = (e) => y || (y = ee(e)), ne = A(/* @__PURE__ */ t("path", {
           label: `Hi, ${r}!`
         }
       ) }),
-      /* @__PURE__ */ t(_, { visible: !n, ref: U, children: /* @__PURE__ */ t(M, { id: "loginButtonContainer", onClick: j, children: "Log In" }) })
+      /* @__PURE__ */ t(_, { visible: !n, ref: q, children: /* @__PURE__ */ t(M, { id: "loginButtonContainer", onClick: j, children: "Log In" }) })
     ] })
   ] });
 };
 export {
-  he as default
+  me as default
 };

package/Search/Search.js

@@ -86,7 +86,7 @@ const k = m(/* @__PURE__ */ r("path", {
       border: "none"
     }
   },
-  "&.searchIcon": {
+  ".searchIcon": {
     svg: {
       padding: "2px"
     }

package/package.json

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