jcicl 0.0.18 → 0.0.20

package/supercomposite/Nav/subcomponents/NavItem/subcomponents/NavMenu.js

@@ -0,0 +1,432 @@
+import { jsx as r, jsxs as U, Fragment as ae } from "react/jsx-runtime";
+import { n as G } from "../../../../../.chunks/emotion-styled.browser.esm.js";
+import * as N from "react";
+import { useState as J } from "react";
+import { N as le } from "../../../../../.chunks/NavLinkButton.js";
+import { NavLinkText as pe } from "./NavLinkText.js";
+import { Divider as ce } from "../../../../../base/Divider/Divider.js";
+import { L as de, N as ue } from "../../../../../.chunks/NavLink.js";
+import { theme as K } from "../../../../../theme.js";
+import { u as he, T as fe, g as V, L as me, M as ge } from "../../../../../.chunks/Menu.js";
+import { c as Q } from "../../../../../.chunks/createSvgIcon.js";
+import { g as xe, a as ye, s as O, u as we, c as Ee, P as e, b as ze, f as be } from "../../../../../.chunks/DefaultPropsProvider.js";
+import { m as Te } from "../../../../../.chunks/memoTheme.js";
+import { b as ve, a as Ce, e as Le } from "../../../../../.chunks/TransitionGroupContext.js";
+function Se(o) {
+  return ye("MuiCollapse", o);
+}
+xe("MuiCollapse", ["root", "horizontal", "vertical", "entered", "hidden", "wrapper", "wrapperInner"]);
+const Me = (o) => {
+  const {
+    orientation: n,
+    classes: i
+  } = o, s = {
+    root: ["root", `${n}`],
+    entered: ["entered"],
+    hidden: ["hidden"],
+    wrapper: ["wrapper", `${n}`],
+    wrapperInner: ["wrapperInner", `${n}`]
+  };
+  return ze(s, Se, i);
+}, Re = O("div", {
+  name: "MuiCollapse",
+  slot: "Root",
+  overridesResolver: (o, n) => {
+    const {
+      ownerState: i
+    } = o;
+    return [n.root, n[i.orientation], i.state === "entered" && n.entered, i.state === "exited" && !i.in && i.collapsedSize === "0px" && n.hidden];
+  }
+})(Te(({
+  theme: o
+}) => ({
+  height: 0,
+  overflow: "hidden",
+  transition: o.transitions.create("height"),
+  variants: [{
+    props: {
+      orientation: "horizontal"
+    },
+    style: {
+      height: "auto",
+      width: 0,
+      transition: o.transitions.create("width")
+    }
+  }, {
+    props: {
+      state: "entered"
+    },
+    style: {
+      height: "auto",
+      overflow: "visible"
+    }
+  }, {
+    props: {
+      state: "entered",
+      orientation: "horizontal"
+    },
+    style: {
+      width: "auto"
+    }
+  }, {
+    props: ({
+      ownerState: n
+    }) => n.state === "exited" && !n.in && n.collapsedSize === "0px",
+    style: {
+      visibility: "hidden"
+    }
+  }]
+}))), Ne = O("div", {
+  name: "MuiCollapse",
+  slot: "Wrapper",
+  overridesResolver: (o, n) => n.wrapper
+})({
+  // Hack to get children with a negative margin to not falsify the height computation.
+  display: "flex",
+  width: "100%",
+  variants: [{
+    props: {
+      orientation: "horizontal"
+    },
+    style: {
+      width: "auto",
+      height: "100%"
+    }
+  }]
+}), $e = O("div", {
+  name: "MuiCollapse",
+  slot: "WrapperInner",
+  overridesResolver: (o, n) => n.wrapperInner
+})({
+  width: "100%",
+  variants: [{
+    props: {
+      orientation: "horizontal"
+    },
+    style: {
+      width: "auto",
+      height: "100%"
+    }
+  }]
+}), $ = /* @__PURE__ */ N.forwardRef(function(n, i) {
+  const s = we({
+    props: n,
+    name: "MuiCollapse"
+  }), {
+    addEndListener: l,
+    children: m,
+    className: d,
+    collapsedSize: u = "0px",
+    component: D,
+    easing: g,
+    in: w,
+    onEnter: v,
+    onEntered: C,
+    onEntering: p,
+    onExit: x,
+    onExited: X,
+    onExiting: W,
+    orientation: j = "vertical",
+    style: P,
+    timeout: h = be.standard,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent: Y = fe,
+    ...Z
+  } = s, L = {
+    ...s,
+    orientation: j,
+    collapsedSize: u
+  }, E = Me(L), A = he(), I = ve(), f = N.useRef(null), k = N.useRef(), S = typeof u == "number" ? `${u}px` : u, z = j === "horizontal", b = z ? "width" : "height", M = N.useRef(null), ee = Ce(i, M), y = (t) => (a) => {
+    if (t) {
+      const c = M.current;
+      a === void 0 ? t(c) : t(c, a);
+    }
+  }, F = () => f.current ? f.current[z ? "clientWidth" : "clientHeight"] : 0, te = y((t, a) => {
+    f.current && z && (f.current.style.position = "absolute"), t.style[b] = S, v && v(t, a);
+  }), ne = y((t, a) => {
+    const c = F();
+    f.current && z && (f.current.style.position = "");
+    const {
+      duration: T,
+      easing: R
+    } = V({
+      style: P,
+      timeout: h,
+      easing: g
+    }, {
+      mode: "enter"
+    });
+    if (h === "auto") {
+      const H = A.transitions.getAutoHeightDuration(c);
+      t.style.transitionDuration = `${H}ms`, k.current = H;
+    } else
+      t.style.transitionDuration = typeof T == "string" ? T : `${T}ms`;
+    t.style[b] = `${c}px`, t.style.transitionTimingFunction = R, p && p(t, a);
+  }), oe = y((t, a) => {
+    t.style[b] = "auto", C && C(t, a);
+  }), re = y((t) => {
+    t.style[b] = `${F()}px`, x && x(t);
+  }), ie = y(X), se = y((t) => {
+    const a = F(), {
+      duration: c,
+      easing: T
+    } = V({
+      style: P,
+      timeout: h,
+      easing: g
+    }, {
+      mode: "exit"
+    });
+    if (h === "auto") {
+      const R = A.transitions.getAutoHeightDuration(a);
+      t.style.transitionDuration = `${R}ms`, k.current = R;
+    } else
+      t.style.transitionDuration = typeof c == "string" ? c : `${c}ms`;
+    t.style[b] = S, t.style.transitionTimingFunction = T, W && W(t);
+  });
+  return /* @__PURE__ */ r(Y, {
+    in: w,
+    onEnter: te,
+    onEntered: oe,
+    onEntering: ne,
+    onExit: re,
+    onExited: ie,
+    onExiting: se,
+    addEndListener: (t) => {
+      h === "auto" && I.start(k.current || 0, t), l && l(M.current, t);
+    },
+    nodeRef: M,
+    timeout: h === "auto" ? null : h,
+    ...Z,
+    children: (t, a) => /* @__PURE__ */ r(Re, {
+      as: D,
+      className: Ee(E.root, d, {
+        entered: E.entered,
+        exited: !w && S === "0px" && E.hidden
+      }[t]),
+      style: {
+        [z ? "minWidth" : "minHeight"]: S,
+        ...P
+      },
+      ref: ee,
+      ...a,
+      // `ownerState` is set after `childProps` to override any existing `ownerState` property in `childProps`
+      // that might have been forwarded from the Transition component.
+      ownerState: {
+        ...L,
+        state: t
+      },
+      children: /* @__PURE__ */ r(Ne, {
+        ownerState: {
+          ...L,
+          state: t
+        },
+        className: E.wrapper,
+        ref: f,
+        children: /* @__PURE__ */ r($e, {
+          ownerState: {
+            ...L,
+            state: t
+          },
+          className: E.wrapperInner,
+          children: m
+        })
+      })
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && ($.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: e.func,
+  /**
+   * The content node to be collapsed.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The width (horizontal) or height (vertical) of the container when collapsed.
+   * @default '0px'
+   */
+  collapsedSize: e.oneOfType([e.number, e.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: Le,
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   */
+  easing: e.oneOfType([e.shape({
+    enter: e.string,
+    exit: e.string
+  }), e.string]),
+  /**
+   * If `true`, the component will transition in.
+   */
+  in: e.bool,
+  /**
+   * @ignore
+   */
+  onEnter: e.func,
+  /**
+   * @ignore
+   */
+  onEntered: e.func,
+  /**
+   * @ignore
+   */
+  onEntering: e.func,
+  /**
+   * @ignore
+   */
+  onExit: e.func,
+  /**
+   * @ignore
+   */
+  onExited: e.func,
+  /**
+   * @ignore
+   */
+  onExiting: e.func,
+  /**
+   * The transition orientation.
+   * @default 'vertical'
+   */
+  orientation: e.oneOf(["horizontal", "vertical"]),
+  /**
+   * @ignore
+   */
+  style: e.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   *
+   * Set to 'auto' to automatically calculate transition time based on height.
+   * @default duration.standard
+   */
+  timeout: e.oneOfType([e.oneOf(["auto"]), e.number, e.shape({
+    appear: e.number,
+    enter: e.number,
+    exit: e.number
+  })])
+});
+$ && ($.muiSupportAuto = !0);
+const B = Q(/* @__PURE__ */ r("path", {
+  d: "m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
+}), "ExpandLess"), _ = Q(/* @__PURE__ */ r("path", {
+  d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+}), "ExpandMore"), De = G(me, {
+  shouldForwardProp: (o) => o !== "collapsed"
+})(({ collapsed: o }) => ({
+  paddingLeft: o ? 0 : "2rem",
+  a: {
+    paddingLeft: o ? "3rem" : "1rem"
+  }
+})), Pe = G(ge, { shouldForwardProp: (o) => o !== "collapsed" })`
+  .MuiPaper-root {
+    background-color: ${K.colors.charcoal};
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      align-items: center;
+      padding: 0;
+      width: 100%;
+      li {
+        width: auto;
+      }
+    }
+  }
+`, q = ({
+  type: o = "link",
+  menuOrientation: n,
+  menuPosition: i,
+  collapsed: s,
+  ...l
+}) => {
+  switch (o) {
+    case "link":
+      return /* @__PURE__ */ r(ue, { ...l, menuOrientation: n });
+    case "menu":
+      return /* @__PURE__ */ r(ke, { menuOrientation: n, position: i, collapsed: s, ...l });
+    case "divider":
+      return /* @__PURE__ */ r(
+        ce,
+        {
+          color: K.colors.white,
+          opacity: 0.5,
+          spacing: 0,
+          orientation: n === "horizontal" ? "vertical" : "horizontal"
+        }
+      );
+    default:
+      return null;
+  }
+}, ke = ({
+  label: o,
+  icon: n,
+  navItems: i,
+  menuOrientation: s,
+  collapsed: l,
+  position: m
+}) => {
+  const [d, u] = J(!1), [D, g] = J(null), w = n, v = (p) => {
+    u(!d), s === "horizontal" && (g(null), g(p.currentTarget));
+  }, C = () => {
+    u(!1), g(null);
+  };
+  return /* @__PURE__ */ U(ae, { children: [
+    /* @__PURE__ */ r(de, { disablePadding: !0, children: /* @__PURE__ */ U(le, { onClick: v, menuOrientation: s, children: [
+      w && w,
+      /* @__PURE__ */ r(pe, { primary: o, collapsed: l }),
+      m !== "bottom" && (d ? /* @__PURE__ */ r(B, { sx: { marginLeft: "8px" } }) : /* @__PURE__ */ r(_, { sx: { marginLeft: "8px" } })),
+      m === "bottom" && (d ? /* @__PURE__ */ r(_, { sx: { marginLeft: "8px" } }) : /* @__PURE__ */ r(B, { sx: { marginLeft: "8px" } }))
+    ] }) }, o),
+    s === "vertical" && /* @__PURE__ */ r($, { in: d, timeout: "auto", unmountOnExit: !0, children: /* @__PURE__ */ r(De, { component: "div", disablePadding: !0, collapsed: l, children: i == null ? void 0 : i.map((p, x) => /* @__PURE__ */ r(q, { ...p, collapsed: l }, `${JSON.stringify(p)}-${x}`)) }) }),
+    s === "horizontal" && /* @__PURE__ */ r(
+      Pe,
+      {
+        anchorEl: D,
+        anchorOrigin: { horizontal: "left", vertical: m === "bottom" ? "top" : "bottom" },
+        open: d,
+        onClose: C,
+        children: i == null ? void 0 : i.map((p, x) => /* @__PURE__ */ r(
+          q,
+          {
+            ...p,
+            collapsed: l,
+            menuOrientation: s,
+            menuPosition: m
+          },
+          `${JSON.stringify(p)}-${x}`
+        ))
+      }
+    )
+  ] });
+};
+export {
+  ke as NavMenu,
+  Pe as SubMenuHorizontal,
+  De as SubMenuVertical,
+  ke as default
+};

package/supercomposite/Nav/subcomponents/NavItem/types.d.ts

@@ -0,0 +1,12 @@
+import { MenuPosition, MenuOrientation } from '../../../../../../../../../../../src/components/supercomposite/Nav/types';
+export interface NavItemProps {
+    label?: string;
+    icon?: JSX.Element;
+    iconName?: string;
+    to?: string;
+    openInNewTab?: boolean;
+    type?: 'link' | 'menu' | 'divider';
+    menuOrientation?: MenuOrientation;
+    menuPosition?: MenuPosition;
+    collapsed?: boolean;
+}

package/supercomposite/Nav/subcomponents/NavItem/types.js

@@ -0,0 +1 @@
+

package/supercomposite/Nav/types.d.ts

@@ -0,0 +1,2 @@
+export type MenuOrientation = 'vertical' | 'horizontal';
+export type MenuPosition = 'top' | 'bottom' | 'left' | 'right';

package/supercomposite/Nav/types.js

@@ -0,0 +1 @@
+

package/supercomposite/index.js

@@ -1,8 +1,8 @@
-import { A as a } from "../.chunks/AppBar.js";
-import { A as e } from "../.chunks/AppHeader.js";
-import { N as f } from "../.chunks/Nav.js";
+import { AppBar as e } from "./AppBar/AppBar.js";
+import { default as a } from "./AppHeader/AppHeader.js";
+import { Nav as t } from "./Nav/Nav.js";
 export {
-  a as AppBar,
-  e as AppHeader,
-  f as Nav
+  e as AppBar,
+  a as AppHeader,
+  t as Nav
 };

package/templates/AppContainer/AppContainer.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+import { AppHeaderProps } from '../../../../../../../../../src/components/supercomposite/AppHeader';
+import { NavProps } from '../../../../../../../../../src/components/supercomposite/CompactNav/CompactNav';
+export interface AppContainerProps {
+    navProps: NavProps;
+    appHeaderProps?: AppHeaderProps;
+    actionsPanelContent?: React.ReactNode;
+}
+declare const AppContainer: React.FC<PropsWithChildren<AppContainerProps>>;
+export default AppContainer;

package/{.chunks → templates/AppContainer}/AppContainer.js

@@ -1,8 +1,8 @@
-import { jsxs as a, jsx as i } from "react/jsx-runtime";
-import { A as s } from "./AppHeader.js";
-import { C as l } from "./CompactNav.js";
-import { n as d } from "./emotion-styled.browser.esm.js";
-import r from "../assets/theme.js";
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import n from "../../supercomposite/AppHeader/AppHeader.js";
+import { CompactNav as s } from "../../supercomposite/CompactNav/CompactNav.js";
+import { n as d } from "../../.chunks/emotion-styled.browser.esm.js";
+import { theme as r } from "../../theme.js";
 const c = d("div")({
   display: "flex",
   flexDirection: "column",
@@ -21,7 +21,7 @@ const c = d("div")({
   padding: "4px 2px",
   paddingLeft: 0,
   height: `calc(100% - ${r.constants.appHeaderHeight}px - 8px)`
-}), h = d("div")(({ withActionsPanel: o }) => ({
+}), m = d("div")(({ withActionsPanel: o }) => ({
   display: "flex",
   flexDirection: "column",
   opacity: o ? 1 : 0,
@@ -30,7 +30,7 @@ const c = d("div")({
   borderRadius: "4px",
   borderTopRightRadius: 0,
   borderBottomRightRadius: 0,
-  height: "calc(100% - 32px)",
+  height: o ? "calc(100% - 32px)" : "100%",
   padding: o ? "1rem" : 0,
   backgroundColor: r.colors.darkGreenO22,
   color: r.colors.white,
@@ -39,7 +39,7 @@ const c = d("div")({
   ...!o && {
     border: "none"
   }
-})), m = d("div")(({ withActionsPanel: o }) => ({
+})), f = d("div")(({ withActionsPanel: o }) => ({
   display: "flex",
   backgroundColor: r.colors.whiteGreen,
   borderRadius: "4px",
@@ -54,20 +54,20 @@ const c = d("div")({
   }
 })), R = ({
   navProps: o,
-  appHeaderProps: n,
+  appHeaderProps: a,
   actionsPanelContent: e,
-  children: p
+  children: l
 }) => {
   const t = e != null;
-  return /* @__PURE__ */ a(c, { children: [
-    /* @__PURE__ */ i(s, { ...n }),
-    /* @__PURE__ */ a(x, { children: [
-      /* @__PURE__ */ i(l, { ...o }),
-      /* @__PURE__ */ i(h, { withActionsPanel: t, children: e && e }),
-      /* @__PURE__ */ i(m, { withActionsPanel: t, children: p })
+  return /* @__PURE__ */ p(c, { children: [
+    /* @__PURE__ */ i(n, { ...a }),
+    /* @__PURE__ */ p(x, { children: [
+      /* @__PURE__ */ i(s, { ...o }),
+      /* @__PURE__ */ i(m, { withActionsPanel: t, children: e && e }),
+      /* @__PURE__ */ i(f, { withActionsPanel: t, children: l })
     ] })
   ] });
 };
 export {
-  R as A
+  R as default
 };

package/templates/AppContainer/index.js

@@ -1,4 +1,4 @@
-import { A as f } from "../../.chunks/AppContainer.js";
+import { default as o } from "./AppContainer.js";
 export {
-  f as default
+  o as default
 };

package/templates/BasicPage/BasicPage.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import { AppBarProps } from '../../../../../../../../../src/components/supercomposite/AppBar';
+import { NavProps } from '../../../../../../../../../src/components/supercomposite/Nav';
+export interface BasicPageProps {
+    appBarProps?: AppBarProps;
+    navProps: NavProps;
+}
+declare const BasicPage: React.FC<PropsWithChildren<BasicPageProps>>;
+export default BasicPage;

package/templates/BasicPage/BasicPage.js

@@ -0,0 +1,31 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { AppBar as s } from "../../supercomposite/AppBar/AppBar.js";
+import { Nav as p } from "../../supercomposite/Nav/Nav.js";
+import { n as a } from "../../.chunks/emotion-styled.browser.esm.js";
+import { theme as r } from "../../theme.js";
+const l = a("div")({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  position: "relative"
+}), m = a("div")({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "flex-start",
+  alignItems: "flex-start",
+  width: `calc(100% - 2rem - ${r.constants.navBarWidth}px)`,
+  marginLeft: `${r.constants.navBarWidth}px`,
+  padding: "1rem",
+  height: `calc(100% - ${r.constants.appBarHeight}px)`,
+  fontFamily: "Roboto, sans-serif",
+  h1: {
+    margin: 0
+  }
+}), g = ({ appBarProps: e, navProps: i, children: n }) => /* @__PURE__ */ o(l, { children: [
+  /* @__PURE__ */ t(s, { ...e }),
+  /* @__PURE__ */ t(p, { withAppBar: !0, ...i, anchor: "left" }),
+  /* @__PURE__ */ t(m, { children: n })
+] });
+export {
+  g as default
+};

package/templates/BasicPage/index.js

@@ -1,4 +1,4 @@
-import { B as f } from "../../.chunks/BasicPage.js";
+import { default as o } from "./BasicPage.js";
 export {
-  f as default
+  o as default
 };

package/templates/index.js

@@ -1,6 +1,6 @@
-import { A as r } from "../.chunks/AppContainer.js";
-import { B as p } from "../.chunks/BasicPage.js";
+import { default as o } from "./AppContainer/AppContainer.js";
+import { default as t } from "./BasicPage/BasicPage.js";
 export {
-  r as AppContainer,
-  p as BasicPage
+  o as AppContainer,
+  t as BasicPage
 };

package/theme.d.ts

@@ -0,0 +1 @@
+export { default as theme } from '../../../../../../../src/assets/theme';

package/{assets/theme.js → theme.js}

@@ -28,5 +28,5 @@ const e = {
   }
 };
 export {
-  e as default
+  e as theme
 };

package/.chunks/AppHeader.js

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