jcicl 0.0.43 → 0.0.45

package/base/ScrollContainer/ScrollContainer.js

@@ -1383,11 +1383,11 @@ const Bs = () => {
       y: s === "all" || s === "vertical" ? "scroll" : "hidden"
     },
     scrollbars: {
-      autoHide: "never",
+      autoHide: "leave",
       autoHideDelay: 29
     }
   } };
-  return /* @__PURE__ */ zo(Zs, { ...a, children: t });
+  return /* @__PURE__ */ zo(Zs, { defer: !0, ...a, children: t });
 };
 export {
   Js as default

package/package.json

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

package/supercomposite/AppHeader/AppHeader.d.ts

@@ -2,6 +2,7 @@ export interface AppHeaderProps {
     loggedIn?: boolean;
     onLogin?: () => void;
     onUserMenuClick?: () => void;
+    navWidth?: number;
 }
 declare const AppHeader: React.FC<AppHeaderProps>;
 export default AppHeader;

package/supercomposite/AppHeader/AppHeader.js

@@ -1,31 +1,31 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { useState as a } from "react";
 import { n } from "../../.chunks/emotion-styled.browser.esm.js";
 import e from "../../theme.js";
-import { l as s } from "../../.chunks/jocologo.js";
+import { l as c } from "../../.chunks/jocologo.js";
 import { Input as m } from "../../base/Input/Input.js";
-import { Button as c } from "../../base/Button/Button.js";
+import { Button as p } from "../../base/Button/Button.js";
 import d from "../../base/Avatar/Avatar.js";
-const l = n("div")({
+const l = n("div")(({ navWidth: o }) => ({
   display: "grid",
   flexDirection: "row",
   padding: "4px 16px",
   backgroundColor: "transparent",
   alignItems: "center",
   justifyContent: "space-between",
-  gridTemplateColumns: `minmax(${e.constants.navDefaultWidth + e.constants.actionsPaneWidth}px, 1fr) 2fr 1fr`
-}), p = n("img")({
+  gridTemplateColumns: `minmax(${o + e.constants.actionsPaneWidth}px, 1fr) 2fr 1fr`
+})), f = n("img")({
   width: "36px"
-}), f = n("div")({}), g = n("div")({
+}), g = n("div")({}), u = n("div")({
   justifySelf: "end"
-}), y = () => {
-  const [r, o] = a(!1);
-  return /* @__PURE__ */ i(l, { children: [
-    /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(p, { src: s }) }),
+}), k = ({ navWidth: o = e.constants.navDefaultWidth }) => {
+  const [i, r] = a(!1);
+  return /* @__PURE__ */ s(l, { ...{ navWidth: o }, children: [
+    /* @__PURE__ */ t(g, { children: /* @__PURE__ */ t(f, { src: c }) }),
     /* @__PURE__ */ t(m, { placeholder: "Search..." }),
-    /* @__PURE__ */ t(g, { children: r ? /* @__PURE__ */ t(d, { onClick: () => o(!1) }) : /* @__PURE__ */ t(c, { onClick: () => o(!0), children: "Log In" }) })
+    /* @__PURE__ */ t(u, { children: i ? /* @__PURE__ */ t(d, { onClick: () => r(!1) }) : /* @__PURE__ */ t(p, { onClick: () => r(!0), children: "Log In" }) })
   ] });
 };
 export {
-  y as default
+  k as default
 };

package/supercomposite/Nav/Nav.js

@@ -1,29 +1,30 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { jsx as i, jsxs as h } from "react/jsx-runtime";
 import { useState as u } from "react";
-import { n as s, i as x } from "../../.chunks/emotion-styled.browser.esm.js";
-import t from "../../theme.js";
+import { n as a, i as x } from "../../.chunks/emotion-styled.browser.esm.js";
+import o from "../../theme.js";
 import g from "../../base/ScrollContainer/ScrollContainer.js";
-import { B as v } from "../../.chunks/ButtonBase.js";
-const C = s(v, {
-  shouldForwardProp: (n) => x(n)
-})(({ active: n }) => ({
+import { B as C } from "../../.chunks/ButtonBase.js";
+const k = a(C, {
+  shouldForwardProp: (t) => x(t)
+})(({ active: t }) => ({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
+  width: "100%",
   padding: "0 8px 8px 8px",
   transition: "313ms all ease-in-out",
-  backgroundColor: n ? t.colors.sunlight : "transparent",
-  boxShadow: n ? t.boxShadow.darkGreen : "none",
+  backgroundColor: t ? o.colors.sunlight : "transparent",
+  boxShadow: t ? o.boxShadow.darkGreen : "none",
   "&:hover, :focus-visible": {
     svg: {
-      backgroundColor: t.colors.sunlight
+      backgroundColor: o.colors.sunlight
     }
   },
   svg: {
     fontSize: "2.1rem",
-    fill: t.colors.darkGreen,
-    backgroundColor: n ? t.colors.sunlight : "transparent",
+    fill: o.colors.darkGreen,
+    backgroundColor: t ? o.colors.sunlight : "transparent",
     borderRadius: "50%",
     padding: "8px",
     display: "flex",
@@ -35,10 +36,10 @@ const C = s(v, {
     fontFamily: "Roboto, sans-serif",
     fontSize: "12px",
     fontWeight: "bold",
-    color: t.colors.darkGreen,
+    color: o.colors.darkGreen,
     textAlign: "center"
   }
-})), k = s("div")(({ navWidth: n }) => ({
+})), v = a("div")(({ navWidth: t }) => ({
   display: "flex",
   flexDirection: "column",
   backgroundColor: "transparent",
@@ -47,30 +48,30 @@ const C = s(v, {
   maxHeight: "100%",
   flexShrink: 0,
   gap: "1rem",
-  width: n
-})), A = ({
-  navItems: n,
-  activeRoute: i,
-  navWidth: a = `${t.constants.navDefaultWidth}px`
+  width: t
+})), D = ({
+  navItems: t,
+  activeRoute: s,
+  navWidth: e = `${o.constants.navDefaultWidth}px`
 }) => {
-  const [l, c] = u(""), d = (e, o) => {
-    c(e), o();
-  }, p = { navWidth: a };
-  return /* @__PURE__ */ r(
+  const [l, c] = u(""), d = (r, n) => {
+    c(r), n();
+  }, p = { navWidth: e };
+  return /* @__PURE__ */ i(
     g,
     {
-      height: `calc(100vh - ${t.constants.appHeaderHeight}px - 8px)`,
-      width: `${t.constants.navDefaultWidth}px`,
-      styles: { minWidth: `${t.constants.navDefaultWidth}px` },
-      children: /* @__PURE__ */ r(k, { ...p, children: n.map(({ icon: e, label: o = "", onClick: f = () => {
-      }, ...h }) => /* @__PURE__ */ m(C, { ...h, active: i ? i === o : l === o, onClick: () => d(o, f), children: [
-        e,
-        /* @__PURE__ */ r("span", { children: o })
-      ] }, o)) })
+      height: `calc(100vh - ${o.constants.appHeaderHeight}px - 8px)`,
+      width: e,
+      styles: { minWidth: e },
+      children: /* @__PURE__ */ i(v, { ...p, children: t.map(({ icon: r, label: n = "", onClick: m = () => {
+      }, ...f }) => /* @__PURE__ */ h(k, { ...f, active: s ? s === n : l === n, onClick: () => d(n, m), children: [
+        r,
+        /* @__PURE__ */ i("span", { children: n })
+      ] }, n)) })
     }
   );
 };
 export {
-  A as Nav,
-  A as default
+  D as Nav,
+  D as default
 };

package/templates/AppContainer/AppContainer.d.ts

@@ -5,6 +5,7 @@ export interface AppContainerProps {
     navProps: NavProps;
     appHeaderProps?: AppHeaderProps;
     actionsPanelContent?: React.ReactNode;
+    navWidth?: number;
 }
 declare const AppContainer: React.FC<PropsWithChildren<AppContainerProps>>;
 export default AppContainer;

package/templates/AppContainer/AppContainer.js

@@ -1,10 +1,10 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import l from "../../supercomposite/AppHeader/AppHeader.js";
-import { Nav as s } from "../../supercomposite/Nav/Nav.js";
-import c from "../../base/ScrollContainer/ScrollContainer.js";
-import { n as d } from "../../.chunks/emotion-styled.browser.esm.js";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import x from "../../supercomposite/AppHeader/AppHeader.js";
+import { Nav as f } from "../../supercomposite/Nav/Nav.js";
+import m from "../../base/ScrollContainer/ScrollContainer.js";
+import { n as t } from "../../.chunks/emotion-styled.browser.esm.js";
 import o from "../../theme.js";
-const x = d("div")({
+const h = t("div")({
   display: "flex",
   flexDirection: "column",
   width: "100%",
@@ -13,7 +13,7 @@ const x = d("div")({
   height: "100vh",
   fontFamily: "Roboto, sans-serif",
   overflow: "hidden"
-}), m = d("div")({
+}), g = t("div")({
   display: "flex",
   flexDirection: "row",
   justifyContent: "flex-start",
@@ -22,7 +22,7 @@ const x = d("div")({
   padding: "4px 2px",
   paddingLeft: 0,
   height: `calc(100% - ${o.constants.appHeaderHeight}px - 8px)`
-}), f = d("div")(({ withActionsPanel: r }) => ({
+}), u = t("div")(({ withActionsPanel: r }) => ({
   display: "flex",
   flexDirection: "column",
   opacity: r ? 1 : 0,
@@ -39,7 +39,7 @@ const x = d("div")({
   ...!r && {
     border: "none"
   }
-})), h = d("div")(({ withActionsPanel: r }) => ({
+})), b = t("div")(({ withActionsPanel: r }) => ({
   display: "flex",
   backgroundColor: o.colors.whiteGreen,
   borderRadius: "4px",
@@ -52,22 +52,23 @@ const x = d("div")({
   h1: {
     margin: 0
   }
-})), C = ({
+})), D = ({
   navProps: r,
   appHeaderProps: p,
   actionsPanelContent: i,
-  children: a
+  navWidth: d = o.constants.navDefaultWidth,
+  children: l
 }) => {
-  const t = i != null;
-  return /* @__PURE__ */ n(x, { children: [
-    /* @__PURE__ */ e(l, { ...p }),
-    /* @__PURE__ */ n(m, { children: [
-      /* @__PURE__ */ e(s, { ...r }),
-      /* @__PURE__ */ e(f, { withActionsPanel: t, children: /* @__PURE__ */ e(c, { children: i && i }) }),
-      /* @__PURE__ */ e(h, { withActionsPanel: t, children: a })
+  const n = i != null, s = { ...p, navWidth: d }, c = { ...r, navWidth: `${d}px` };
+  return /* @__PURE__ */ a(h, { children: [
+    /* @__PURE__ */ e(x, { ...s }),
+    /* @__PURE__ */ a(g, { children: [
+      /* @__PURE__ */ e(f, { ...c }),
+      /* @__PURE__ */ e(u, { withActionsPanel: n, children: /* @__PURE__ */ e(m, { children: i && i }) }),
+      /* @__PURE__ */ e(b, { withActionsPanel: n, children: l })
     ] })
   ] });
 };
 export {
-  C as default
+  D as default
 };