jcicl 0.0.128 → 0.0.132

package/AppHeader/AppHeader.d.ts

@@ -1,4 +1,4 @@
-import { AvatarProps } from '../../../../../../../../../src/components/base/Avatar';
+import { IconProps } from '../../../../../../../../../src/components/base/Icon';
 import { TemplateThemeProps } from '../../../../../../../../../src/components/theme';
 export interface CustomLogoProps {
     logoSrc: string;
@@ -12,11 +12,14 @@ export interface AppHeaderProps {
     onLogout?: () => void;
     onUserMenuClick?: () => void;
     onHamburgerMenuClick?: () => void;
+    onSearch?: () => void;
     logoProps: CustomLogoProps;
     iconColor: string;
     isMobile?: boolean;
     themeProps: Pick<TemplateThemeProps, 'shadowSecondary' | 'iconPrimary' | 'borderPrimary' | 'shadowTertiary'>;
-    avatarColors?: AvatarProps;
+    iconColors?: IconProps;
+    userName?: string;
+    userSettingsEnabled?: boolean;
 }
 declare const AppHeader: React.FC<AppHeaderProps>;
 export default AppHeader;

package/AppHeader/AppHeader.js

@@ -1,56 +1,56 @@
-import { jsx as n, jsxs as x } from "react/jsx-runtime";
-import * as S from "react";
-import V, { useState as w, useLayoutEffect as B } from "react";
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+import * as k from "react";
+import G, { useState as $, useLayoutEffect as J } from "react";
 import { n as h } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as b } from "../.chunks/emotion-react.browser.esm.js";
-import { I as W } from "../.chunks/Input.js";
-import { Button as k } from "../Button/Button.js";
-import E from "../Avatar/Avatar.js";
-import q from "../WithLabel/WithLabel.js";
-import { c as T } from "../.chunks/createSvgIcon.js";
-const D = V[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], G = (e) => {
-  const t = S.useRef(e);
-  return S.useEffect(() => {
-    t.current = e;
-  }), t;
+import { c as m } from "../.chunks/emotion-react.browser.esm.js";
+import { Search as M } from "../Search/Search.js";
+import { Button as E } from "../Button/Button.js";
+import H from "../Icon/Icon.js";
+import K from "../WithLabel/WithLabel.js";
+import { c as j } from "../.chunks/createSvgIcon.js";
+const N = G[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], Q = (e) => {
+  const n = k.useRef(e);
+  return k.useEffect(() => {
+    n.current = e;
+  }), n;
 };
-function J() {
+function X() {
 }
-function K(e, t, l = {}) {
-  const c = Q(l.polyfill), a = G(t);
-  return D(() => {
+function Y(e, n, l = {}) {
+  const c = ee(l.polyfill), u = Q(n);
+  return N(() => {
     let i = !1;
     const d = e && "current" in e ? e.current : e;
-    if (!d) return J;
+    if (!d) return X;
     function r(o, s) {
-      i || a.current(o, s);
+      i || u.current(o, s);
     }
     return c.subscribe(d, r), () => {
       i = !0, c.unsubscribe(d, r);
     };
-  }, [e, c, a]), c.observer;
+  }, [e, c, u]), c.observer;
 }
-function N(e) {
-  let t = !1, l = [];
-  const c = /* @__PURE__ */ new Map(), a = new (e || window.ResizeObserver)((i, d) => {
+function Z(e) {
+  let n = !1, l = [];
+  const c = /* @__PURE__ */ new Map(), u = new (e || window.ResizeObserver)((i, d) => {
     l = l.concat(i);
     function r() {
       const o = /* @__PURE__ */ new Set();
       for (let s = 0; s < l.length; s++) {
         if (o.has(l[s].target)) continue;
         o.add(l[s].target);
-        const u = c.get(l[s].target);
-        u == null || u.forEach((p) => p(l[s], d));
+        const a = c.get(l[s].target);
+        a == null || a.forEach((w) => w(l[s], d));
       }
-      l = [], t = !1;
+      l = [], n = !1;
     }
-    t || window.requestAnimationFrame(r), t = !0;
+    n || window.requestAnimationFrame(r), n = !0;
   });
   return {
-    observer: a,
+    observer: u,
     subscribe(i, d) {
       var r;
-      a.observe(i);
+      u.observe(i);
       const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
       o.push(d), c.set(i, o);
     },
@@ -58,7 +58,7 @@ function N(e) {
       var r;
       const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
       if (o.length === 1) {
-        a.unobserve(i), c.delete(i);
+        u.unobserve(i), c.delete(i);
         return;
       }
       const s = o.indexOf(d);
@@ -66,12 +66,14 @@ function N(e) {
     }
   };
 }
-let C;
-const Q = (e) => C || (C = N(e)), X = T(/* @__PURE__ */ n("path", {
+let y;
+const ee = (e) => y || (y = Z(e)), te = j(/* @__PURE__ */ t("path", {
   d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
-}), "Menu"), M = h("div")(
-  ({ mobile: e, shadowSecondary: t }) => ({
-    ...b`
+}), "Menu"), I = j(/* @__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"
+}), "PersonOutlineOutlined"), L = h("div")(
+  ({ mobile: e, shadowSecondary: n }) => ({
+    ...m`
       z-index: 1313;
       display: flex;
       flex-direction: row;
@@ -80,38 +82,38 @@ const Q = (e) => C || (C = N(e)), X = T(/* @__PURE__ */ n("path", {
       align-items: center;
       justify-content: space-between;
       gap: ${e ? "8px" : "1.5rem"};
-      box-shadow: ${e && t};
+      box-shadow: ${e && n};
     `
   })
-), O = h("img")(({ width: e }) => ({
+), R = h("img")(({ width: e }) => ({
   width: `${e}px`
-})), I = h("div")(({ height: e }) => ({
-  ...b`
+})), _ = h("div")(({ height: e }) => ({
+  ...m`
     display: flex;
     gap: 1rem;
     height: ${e}px;
   `
-})), Y = h("div")(({ width: e, loggedIn: t }) => ({
-  ...b`
+})), ne = h("div")(({ width: e, loggedIn: n }) => ({
+  ...m`
     width: ${e}px;
     display: flex;
     justify-content: center;
     align-items: flex-end;
-    flex-direction: ${t ? "column" : "column-reverse"};
+    flex-direction: ${n ? "column" : "column-reverse"};
     flex-shrink: 0;
     * {
       white-space: nowrap;
     }
   `
-})), L = h("div")(({ visible: e }) => ({
-  ...b`
+})), P = h("div")(({ visible: e }) => ({
+  ...m`
     z-index: ${e ? 1 : 0};
     opacity: ${e ? 1 : 0};
     pointer-events: ${e ? "auto" : "none"};
     position: ${e ? "relative" : "absolute"};
   `
-})), R = h("div")(() => ({
-  ...b`
+})), A = h("div")(() => ({
+  ...m`
     display: flex;
     width: 1360px;
     max-width: 100%;
@@ -119,48 +121,66 @@ const Q = (e) => C || (C = N(e)), X = T(/* @__PURE__ */ n("path", {
       width: 100%;
     }
   `
-})), le = ({
+})), fe = ({
   isMobile: e,
-  loggedIn: t,
+  loggedIn: n,
   logoProps: l,
   iconColor: c,
-  themeProps: a,
+  themeProps: u,
   hamburgerMenu: i,
-  avatarColors: d,
-  onHamburgerMenuClick: r,
-  onUserMenuClick: o,
-  onLogin: s
+  iconColors: d,
+  userName: r = "User",
+  userSettingsEnabled: o,
+  onHamburgerMenuClick: s,
+  onUserMenuClick: a,
+  onLogin: w,
+  onSearch: z = () => {
+  }
 }) => {
-  const [u, p] = w(0), [f, _] = w(null), [v, A] = w(null), { logoSrc: $, logoWidth: y, logoHeight: g } = l, { shadowSecondary: H, shadowTertiary: j, iconPrimary: P, borderPrimary: F } = a, z = { shadowTertiary: j, borderColor: F, borderFocusColor: P };
-  B(() => {
-    f && f.clientWidth > u && p(f.clientWidth), v && v.clientWidth > u && p(v.clientWidth);
+  const [b, C] = $(0), [f, V] = $(null), [v, F] = $(null), { logoSrc: O, logoWidth: S, logoHeight: g } = l, { shadowSecondary: U, shadowTertiary: B, iconPrimary: q, borderPrimary: T } = u, W = { shadowTertiary: B, borderColor: T, borderFocusColor: q };
+  J(() => {
+    f && f.clientWidth > b && C(f.clientWidth), v && v.clientWidth > b && C(v.clientWidth);
   }, [f, v]);
-  const U = (m) => {
-    m != null && m.clientWidth && m.clientWidth > u && p(m.clientWidth);
+  const D = (p) => {
+    p != null && p.clientWidth && p.clientWidth > b && C(p.clientWidth);
   };
-  return K(f, () => U(f)), e ? /* @__PURE__ */ x(M, { mobile: !0, shadowSecondary: H, children: [
-    /* @__PURE__ */ n(I, { height: g, children: /* @__PURE__ */ n(O, { src: $, height: `${g}px`, width: y }) }),
-    /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(W, { ...z, placeholder: "Search..." }) }),
-    /* @__PURE__ */ n(E, { ...d, onClick: o })
-  ] }) : /* @__PURE__ */ x(M, { children: [
-    /* @__PURE__ */ x(I, { height: g, children: [
-      /* @__PURE__ */ n(O, { src: $, height: `${g}px`, width: y }),
-      i && /* @__PURE__ */ n(k, { variant: "icon", onClick: r, color: c, children: /* @__PURE__ */ n(X, {}) })
+  return Y(f, () => D(f)), e ? /* @__PURE__ */ x(L, { mobile: !0, shadowSecondary: U, children: [
+    /* @__PURE__ */ t(_, { height: g, children: /* @__PURE__ */ t(R, { src: O, height: `${g}px`, width: S }) }),
+    /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(M, { onSearch: z, ...W, placeholder: "Search..." }) }),
+    /* @__PURE__ */ t(
+      H,
+      {
+        icon: /* @__PURE__ */ t(I, {}),
+        ...d,
+        onClick: o ? a : void 0
+      }
+    )
+  ] }) : /* @__PURE__ */ x(L, { children: [
+    /* @__PURE__ */ x(_, { height: g, children: [
+      /* @__PURE__ */ t(R, { src: O, height: `${g}px`, width: S }),
+      i && /* @__PURE__ */ t(E, { variant: "icon", onClick: s, color: c, children: /* @__PURE__ */ t(te, {}) })
     ] }),
-    /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(W, { ...z, placeholder: "Search..." }) }),
-    /* @__PURE__ */ x(Y, { width: u, loggedIn: !!t, children: [
-      /* @__PURE__ */ n(L, { visible: !!t, ref: _, children: /* @__PURE__ */ n(
-        q,
+    /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(M, { onSearch: z, ...W, placeholder: "Search..." }) }),
+    /* @__PURE__ */ x(ne, { width: b, loggedIn: !!n, children: [
+      /* @__PURE__ */ t(P, { visible: !!n, ref: V, children: /* @__PURE__ */ t(
+        K,
         {
           id: "accountMenuContainer",
-          component: /* @__PURE__ */ n(E, { ...d, onClick: o }),
-          label: "Welcome, User"
+          component: /* @__PURE__ */ t(
+            H,
+            {
+              icon: /* @__PURE__ */ t(I, {}),
+              ...d,
+              onClick: o ? a : void 0
+            }
+          ),
+          label: `Hi, ${r}!`
         }
       ) }),
-      /* @__PURE__ */ n(L, { visible: !t, ref: A, children: /* @__PURE__ */ n(k, { id: "loginButtonContainer", onClick: s, children: "Log In" }) })
+      /* @__PURE__ */ t(P, { visible: !n, ref: F, children: /* @__PURE__ */ t(E, { id: "loginButtonContainer", onClick: w, children: "Log In" }) })
     ] })
   ] });
 };
 export {
-  le as default
+  fe as default
 };

package/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps as MuiButtonProps } from '@mui/material/Button/Button';
 export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size' | 'color'> {
-    variant?: 1 | 2 | 'unstyled' | 'icon';
+    variant?: 1 | 2 | 'unstyled' | 'icon' | 'bibi' | 'bibiOutlined' | 'bibiInverse';
     size?: number;
     color?: string;
     highlightColor?: string;