jcicl 0.0.42 → 0.0.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +2 -1
  2. package/base/ScrollContainer/ScrollContainer.d.ts +1 -1
  3. package/base/ScrollContainer/ScrollContainer.js +3 -3
  4. package/package.json +1 -1
  5. package/supercomposite/AppHeader/AppHeader.d.ts +1 -0
  6. package/supercomposite/AppHeader/AppHeader.js +13 -13
  7. package/supercomposite/Nav/Nav.js +29 -20
  8. package/templates/AppContainer/AppContainer.d.ts +1 -0
  9. package/templates/AppContainer/AppContainer.js +20 -19
package/README.md CHANGED
@@ -19,7 +19,7 @@ import Nav, { NavProps } from 'jcicl/supercomposite/Nav';
19
19
  const Component: React.FC<ButtonProps> = ({ ...buttonProps }) => <Button {...buttonProps}>Johnson County Button</Button>;
20
20
  ```
21
21
 
22
- ### Adding the fonts
22
+ ### Adding the fonts and scrollbar styles
23
23
 
24
24
  In your project entry point (most likely `main.tsx`), add:
25
25
 
@@ -29,6 +29,7 @@ import '@fontsource/roboto/400.css';
29
29
  import '@fontsource/roboto/500.css';
30
30
  import '@fontsource/roboto/700.css';
31
31
  import '@fontsource/material-icons';
32
+ import 'overlayscrollbars/overlayscrollbars.css';
32
33
  ```
33
34
 
34
35
  Alternatively, add to project root `index.html` `<head />`:
package/base/ScrollContainer/ScrollContainer.d.ts CHANGED
@@ -2,7 +2,7 @@ export interface ScrollContainerProps {
2
2
  width?: string;
3
3
  height?: string;
4
4
  direction?: 'vertical' | 'horizontal' | 'all';
5
- style?: React.CSSProperties;
5
+ styles?: React.CSSProperties;
6
6
  }
7
7
  declare const ScrollContainer: React.FC<ScrollContainerProps & {
8
8
  children: React.ReactNode;
package/base/ScrollContainer/ScrollContainer.js CHANGED
@@ -1370,7 +1370,7 @@ const Bs = () => {
1370
1370
  children: t,
1371
1371
  width: n,
1372
1372
  height: e,
1373
- style: o,
1373
+ styles: o,
1374
1374
  direction: s = "vertical"
1375
1375
  }) => {
1376
1376
  const a = { style: {
@@ -1383,11 +1383,11 @@ const Bs = () => {
1383
1383
  y: s === "all" || s === "vertical" ? "scroll" : "hidden"
1384
1384
  },
1385
1385
  scrollbars: {
1386
- autoHide: "never",
1386
+ autoHide: "leave",
1387
1387
  autoHideDelay: 29
1388
1388
  }
1389
1389
  } };
1390
- return /* @__PURE__ */ zo(Zs, { defer: !0, ...a, children: t });
1390
+ return /* @__PURE__ */ zo(Zs, { ...a, children: t });
1391
1391
  };
1392
1392
  export {
1393
1393
  Js as default
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "jcicl",
3
3
  "private": false,
4
- "version": "0.0.42",
4
+ "version": "0.0.44",
5
5
  "description": "Component library for the websites of Johnson County Iowa",
6
6
  "license": "MIT",
7
7
  "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",
package/supercomposite/AppHeader/AppHeader.d.ts CHANGED
@@ -2,6 +2,7 @@ export interface AppHeaderProps {
2
2
  loggedIn?: boolean;
3
3
  onLogin?: () => void;
4
4
  onUserMenuClick?: () => void;
5
+ navWidth?: number;
5
6
  }
6
7
  declare const AppHeader: React.FC<AppHeaderProps>;
7
8
  export default AppHeader;
package/supercomposite/AppHeader/AppHeader.js CHANGED
@@ -1,31 +1,31 @@
1
- import { jsxs as i, jsx as t } from "react/jsx-runtime";
1
+ import { jsxs as s, jsx as t } from "react/jsx-runtime";
2
2
  import { useState as a } from "react";
3
3
  import { n } from "../../.chunks/emotion-styled.browser.esm.js";
4
4
  import e from "../../theme.js";
5
- import { l as s } from "../../.chunks/jocologo.js";
5
+ import { l as c } from "../../.chunks/jocologo.js";
6
6
  import { Input as m } from "../../base/Input/Input.js";
7
- import { Button as c } from "../../base/Button/Button.js";
7
+ import { Button as p } from "../../base/Button/Button.js";
8
8
  import d from "../../base/Avatar/Avatar.js";
9
- const l = n("div")({
9
+ const l = n("div")(({ navWidth: o }) => ({
10
10
  display: "grid",
11
11
  flexDirection: "row",
12
12
  padding: "4px 16px",
13
13
  backgroundColor: "transparent",
14
14
  alignItems: "center",
15
15
  justifyContent: "space-between",
16
- gridTemplateColumns: `minmax(${e.constants.navDefaultWidth + e.constants.actionsPaneWidth}px, 1fr) 2fr 1fr`
17
- }), p = n("img")({
16
+ gridTemplateColumns: `minmax(${o + e.constants.actionsPaneWidth}px, 1fr) 2fr 1fr`
17
+ })), f = n("img")({
18
18
  width: "36px"
19
- }), f = n("div")({}), g = n("div")({
19
+ }), g = n("div")({}), u = n("div")({
20
20
  justifySelf: "end"
21
- }), y = () => {
22
- const [r, o] = a(!1);
23
- return /* @__PURE__ */ i(l, { children: [
24
- /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(p, { src: s }) }),
21
+ }), k = ({ navWidth: o = e.constants.navDefaultWidth }) => {
22
+ const [i, r] = a(!1);
23
+ return /* @__PURE__ */ s(l, { ...{ navWidth: o }, children: [
24
+ /* @__PURE__ */ t(g, { children: /* @__PURE__ */ t(f, { src: c }) }),
25
25
  /* @__PURE__ */ t(m, { placeholder: "Search..." }),
26
- /* @__PURE__ */ t(g, { children: r ? /* @__PURE__ */ t(d, { onClick: () => o(!1) }) : /* @__PURE__ */ t(c, { onClick: () => o(!0), children: "Log In" }) })
26
+ /* @__PURE__ */ t(u, { children: i ? /* @__PURE__ */ t(d, { onClick: () => r(!1) }) : /* @__PURE__ */ t(p, { onClick: () => r(!0), children: "Log In" }) })
27
27
  ] });
28
28
  };
29
29
  export {
30
- y as default
30
+ k as default
31
31
  };
package/supercomposite/Nav/Nav.js CHANGED
@@ -1,16 +1,17 @@
1
- import { jsx as r, jsxs as u } from "react/jsx-runtime";
2
- import { useState as x } from "react";
3
- import { n as s, i as h } from "../../.chunks/emotion-styled.browser.esm.js";
1
+ import { jsx as i, jsxs as h } from "react/jsx-runtime";
2
+ import { useState as u } from "react";
3
+ import { n as a, i as x } from "../../.chunks/emotion-styled.browser.esm.js";
4
4
  import o from "../../theme.js";
5
5
  import g from "../../base/ScrollContainer/ScrollContainer.js";
6
- import { B as v } from "../../.chunks/ButtonBase.js";
7
- const C = s(v, {
8
- shouldForwardProp: (t) => h(t)
6
+ import { B as C } from "../../.chunks/ButtonBase.js";
7
+ const k = a(C, {
8
+ shouldForwardProp: (t) => x(t)
9
9
  })(({ active: t }) => ({
10
10
  display: "flex",
11
11
  flexDirection: "column",
12
12
  alignItems: "center",
13
13
  justifyContent: "center",
14
+ width: "100%",
14
15
  padding: "0 8px 8px 8px",
15
16
  transition: "313ms all ease-in-out",
16
17
  backgroundColor: t ? o.colors.sunlight : "transparent",
@@ -38,7 +39,7 @@ const C = s(v, {
38
39
  color: o.colors.darkGreen,
39
40
  textAlign: "center"
40
41
  }
41
- })), k = s("div")(({ navWidth: t }) => ({
42
+ })), v = a("div")(({ navWidth: t }) => ({
42
43
  display: "flex",
43
44
  flexDirection: "column",
44
45
  backgroundColor: "transparent",
@@ -48,21 +49,29 @@ const C = s(v, {
48
49
  flexShrink: 0,
49
50
  gap: "1rem",
50
51
  width: t
51
- })), H = ({
52
+ })), D = ({
52
53
  navItems: t,
53
- activeRoute: i,
54
- navWidth: a = `${o.constants.navDefaultWidth}px`
54
+ activeRoute: s,
55
+ navWidth: e = `${o.constants.navDefaultWidth}px`
55
56
  }) => {
56
- const [l, c] = x(""), d = (e, n) => {
57
- c(e), n();
58
- }, p = { navWidth: a };
59
- return /* @__PURE__ */ r(g, { style: { maxHeight: `calc(100vh - ${o.constants.appHeaderHeight}px - 8px)` }, children: /* @__PURE__ */ r(k, { ...p, children: t.map(({ icon: e, label: n = "", onClick: m = () => {
60
- }, ...f }) => /* @__PURE__ */ u(C, { ...f, active: i ? i === n : l === n, onClick: () => d(n, m), children: [
61
- e,
62
- /* @__PURE__ */ r("span", { children: n })
63
- ] }, n)) }) });
57
+ const [l, c] = u(""), d = (r, n) => {
58
+ c(r), n();
59
+ }, p = { navWidth: e };
60
+ return /* @__PURE__ */ i(
61
+ g,
62
+ {
63
+ height: `calc(100vh - ${o.constants.appHeaderHeight}px - 8px)`,
64
+ width: e,
65
+ styles: { minWidth: e },
66
+ children: /* @__PURE__ */ i(v, { ...p, children: t.map(({ icon: r, label: n = "", onClick: m = () => {
67
+ }, ...f }) => /* @__PURE__ */ h(k, { ...f, active: s ? s === n : l === n, onClick: () => d(n, m), children: [
68
+ r,
69
+ /* @__PURE__ */ i("span", { children: n })
70
+ ] }, n)) })
71
+ }
72
+ );
64
73
  };
65
74
  export {
66
- H as Nav,
67
- H as default
75
+ D as Nav,
76
+ D as default
68
77
  };
package/templates/AppContainer/AppContainer.d.ts CHANGED
@@ -5,6 +5,7 @@ export interface AppContainerProps {
5
5
  navProps: NavProps;
6
6
  appHeaderProps?: AppHeaderProps;
7
7
  actionsPanelContent?: React.ReactNode;
8
+ navWidth?: number;
8
9
  }
9
10
  declare const AppContainer: React.FC<PropsWithChildren<AppContainerProps>>;
10
11
  export default AppContainer;
package/templates/AppContainer/AppContainer.js CHANGED
@@ -1,10 +1,10 @@
1
- import { jsxs as n, jsx as e } from "react/jsx-runtime";
2
- import l from "../../supercomposite/AppHeader/AppHeader.js";
3
- import { Nav as s } from "../../supercomposite/Nav/Nav.js";
4
- import c from "../../base/ScrollContainer/ScrollContainer.js";
5
- import { n as d } from "../../.chunks/emotion-styled.browser.esm.js";
1
+ import { jsxs as a, jsx as e } from "react/jsx-runtime";
2
+ import x from "../../supercomposite/AppHeader/AppHeader.js";
3
+ import { Nav as f } from "../../supercomposite/Nav/Nav.js";
4
+ import m from "../../base/ScrollContainer/ScrollContainer.js";
5
+ import { n as t } from "../../.chunks/emotion-styled.browser.esm.js";
6
6
  import o from "../../theme.js";
7
- const x = d("div")({
7
+ const h = t("div")({
8
8
  display: "flex",
9
9
  flexDirection: "column",
10
10
  width: "100%",
@@ -13,7 +13,7 @@ const x = d("div")({
13
13
  height: "100vh",
14
14
  fontFamily: "Roboto, sans-serif",
15
15
  overflow: "hidden"
16
- }), m = d("div")({
16
+ }), g = t("div")({
17
17
  display: "flex",
18
18
  flexDirection: "row",
19
19
  justifyContent: "flex-start",
@@ -22,7 +22,7 @@ const x = d("div")({
22
22
  padding: "4px 2px",
23
23
  paddingLeft: 0,
24
24
  height: `calc(100% - ${o.constants.appHeaderHeight}px - 8px)`
25
- }), h = d("div")(({ withActionsPanel: r }) => ({
25
+ }), u = t("div")(({ withActionsPanel: r }) => ({
26
26
  display: "flex",
27
27
  flexDirection: "column",
28
28
  opacity: r ? 1 : 0,
@@ -39,7 +39,7 @@ const x = d("div")({
39
39
  ...!r && {
40
40
  border: "none"
41
41
  }
42
- })), f = d("div")(({ withActionsPanel: r }) => ({
42
+ })), b = t("div")(({ withActionsPanel: r }) => ({
43
43
  display: "flex",
44
44
  backgroundColor: o.colors.whiteGreen,
45
45
  borderRadius: "4px",
@@ -52,22 +52,23 @@ const x = d("div")({
52
52
  h1: {
53
53
  margin: 0
54
54
  }
55
- })), C = ({
55
+ })), D = ({
56
56
  navProps: r,
57
57
  appHeaderProps: p,
58
58
  actionsPanelContent: i,
59
- children: a
59
+ navWidth: d = o.constants.navDefaultWidth,
60
+ children: l
60
61
  }) => {
61
- const t = i != null;
62
- return /* @__PURE__ */ n(x, { children: [
63
- /* @__PURE__ */ e(l, { ...p }),
64
- /* @__PURE__ */ n(m, { children: [
65
- /* @__PURE__ */ e(s, { ...r }),
66
- /* @__PURE__ */ e(h, { withActionsPanel: t, children: /* @__PURE__ */ e(c, { height: "calc(100% - 2px - 2rem)", children: i && i }) }),
67
- /* @__PURE__ */ e(f, { withActionsPanel: t, children: a })
62
+ const n = i != null, s = { ...p, navWidth: d }, c = { ...r, navWidth: `${d}px` };
63
+ return /* @__PURE__ */ a(h, { children: [
64
+ /* @__PURE__ */ e(x, { ...s }),
65
+ /* @__PURE__ */ a(g, { children: [
66
+ /* @__PURE__ */ e(f, { ...c }),
67
+ /* @__PURE__ */ e(u, { withActionsPanel: n, children: /* @__PURE__ */ e(m, { children: i && i }) }),
68
+ /* @__PURE__ */ e(b, { withActionsPanel: n, children: l })
68
69
  ] })
69
70
  ] });
70
71
  };
71
72
  export {
72
- C as default
73
+ D as default
73
74
  };