jcicl 0.0.343 → 1.0.1

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.
@@ -0,0 +1,222 @@
1
+ import { jsx as t, jsxs as h } from "react/jsx-runtime";
2
+ import * as M from "react";
3
+ import Z, { useState as z, useLayoutEffect as T } from "react";
4
+ import { n as f } from "./emotion-styled.browser.esm.js";
5
+ import { c as b } from "./emotion-react.browser.esm.js";
6
+ import { Search as E } from "../Search/Search.js";
7
+ import { Button as H } from "../Button/Button.js";
8
+ import I from "../Icon/Icon.js";
9
+ import ee from "../WithLabel/WithLabel.js";
10
+ import { c as F } from "./createSvgIcon.js";
11
+ import L from "../theme.js";
12
+ const te = Z[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], ne = (e) => {
13
+ const n = M.useRef(e);
14
+ return M.useEffect(() => {
15
+ n.current = e;
16
+ }), n;
17
+ };
18
+ function ie() {
19
+ }
20
+ function oe(e, n, l = {}) {
21
+ const c = ce(l.polyfill), d = ne(n);
22
+ return te(() => {
23
+ let i = !1;
24
+ const a = e && "current" in e ? e.current : e;
25
+ if (!a) return ie;
26
+ function r(o, s) {
27
+ i || d.current(o, s);
28
+ }
29
+ return c.subscribe(a, r), () => {
30
+ i = !0, c.unsubscribe(a, r);
31
+ };
32
+ }, [e, c, d]), c.observer;
33
+ }
34
+ function re(e) {
35
+ let n = !1, l = [];
36
+ const c = /* @__PURE__ */ new Map(), d = new (e || window.ResizeObserver)((i, a) => {
37
+ l = l.concat(i);
38
+ function r() {
39
+ const o = /* @__PURE__ */ new Set();
40
+ for (let s = 0; s < l.length; s++) {
41
+ if (o.has(l[s].target)) continue;
42
+ o.add(l[s].target);
43
+ const m = c.get(l[s].target);
44
+ m == null || m.forEach((v) => v(l[s], a));
45
+ }
46
+ l = [], n = !1;
47
+ }
48
+ n || window.requestAnimationFrame(r), n = !0;
49
+ });
50
+ return {
51
+ observer: d,
52
+ subscribe(i, a) {
53
+ var r;
54
+ d.observe(i);
55
+ const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
56
+ o.push(a), c.set(i, o);
57
+ },
58
+ unsubscribe(i, a) {
59
+ var r;
60
+ const o = (r = c.get(i)) !== null && r !== void 0 ? r : [];
61
+ if (o.length === 1) {
62
+ d.unobserve(i), c.delete(i);
63
+ return;
64
+ }
65
+ const s = o.indexOf(a);
66
+ s !== -1 && o.splice(s, 1), c.set(i, o);
67
+ }
68
+ };
69
+ }
70
+ let S;
71
+ const ce = (e) => S || (S = re(e)), se = F(/* @__PURE__ */ t("path", {
72
+ d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
73
+ }), "Menu"), P = F(/* @__PURE__ */ t("path", {
74
+ 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"
75
+ }), "PersonOutlineOutlined"), R = f("div")(
76
+ ({ mobile: e, shadowSecondary: n }) => ({
77
+ ...b`
78
+ z-index: 1313;
79
+ display: flex;
80
+ flex-direction: row;
81
+ padding: 4px 16px;
82
+ background-color: transparent;
83
+ align-items: center;
84
+ justify-content: space-between;
85
+ gap: ${e ? "8px" : "1.5rem"};
86
+ box-shadow: ${e && n};
87
+ `
88
+ })
89
+ ), _ = f("img")(({ width: e }) => ({
90
+ width: `${e}px`
91
+ })), A = f("div")(({ height: e }) => ({
92
+ ...b`
93
+ display: flex;
94
+ gap: 1rem;
95
+ height: ${e}px;
96
+ `
97
+ })), le = f("div")(({ width: e, loggedIn: n }) => ({
98
+ ...b`
99
+ width: ${e}px;
100
+ display: flex;
101
+ justify-content: center;
102
+ align-items: flex-end;
103
+ flex-direction: ${n ? "column" : "column-reverse"};
104
+ flex-shrink: 0;
105
+ * {
106
+ white-space: nowrap;
107
+ }
108
+ `
109
+ })), j = f("div")(({ visible: e }) => ({
110
+ ...b`
111
+ z-index: ${e ? 1 : 0};
112
+ opacity: ${e ? 1 : 0};
113
+ pointer-events: ${e ? "auto" : "none"};
114
+ position: ${e ? "relative" : "absolute"};
115
+ `
116
+ })), V = f("div")(() => ({
117
+ ...b`
118
+ display: flex;
119
+ width: 1360px;
120
+ max-width: 100%;
121
+ align-items: center;
122
+ justify-content: center;
123
+ .MuiFormControl-root {
124
+ width: 100%;
125
+ }
126
+
127
+ h1 {
128
+ font-size: 32px;
129
+ line-height: 1;
130
+ margin: 0;
131
+ margin-left: calc(${L.constants.navDefaultWidth}px * 2);
132
+ }
133
+
134
+ @media screen and (max-width: ${L.screenSizes.tablet}) {
135
+ h1 {
136
+ margin: 0;
137
+ }
138
+ }
139
+ `
140
+ })), xe = ({
141
+ isMobile: e,
142
+ loggedIn: n,
143
+ logoProps: l,
144
+ iconColor: c,
145
+ themeProps: d,
146
+ hamburgerMenu: i,
147
+ iconColors: a,
148
+ userName: r = "User",
149
+ userSettingsEnabled: o,
150
+ searchFilters: s,
151
+ onHamburgerMenuClick: m,
152
+ onUserMenuClick: v,
153
+ onLogin: U,
154
+ onSearch: B = () => {
155
+ },
156
+ searchPlaceholder: q = "Search",
157
+ onInputChange: D,
158
+ headerType: g = "search",
159
+ appTitle: O
160
+ }) => {
161
+ const [x, C] = z(0), [u, G] = z(null), [w, J] = z(null), { logoSrc: W, logoWidth: k, logoHeight: $ } = l, { shadowSecondary: K, shadowTertiary: N, iconPrimary: Q, borderPrimary: X } = d, y = {
162
+ shadowTertiary: N,
163
+ borderColor: X,
164
+ borderFocusColor: Q,
165
+ filters: s,
166
+ onSearch: B,
167
+ placeholder: q,
168
+ onChange: D
169
+ };
170
+ T(() => {
171
+ u && u.clientWidth > x && C(u.clientWidth), w && w.clientWidth > x && C(w.clientWidth);
172
+ }, [u, w]);
173
+ const Y = (p) => {
174
+ p != null && p.clientWidth && p.clientWidth > x && C(p.clientWidth);
175
+ };
176
+ return oe(u, () => Y(u)), e ? /* @__PURE__ */ h(R, { mobile: !0, shadowSecondary: K, children: [
177
+ /* @__PURE__ */ t(A, { height: $, children: /* @__PURE__ */ t(_, { src: W, height: `${$}px`, width: k }) }),
178
+ /* @__PURE__ */ h(V, { children: [
179
+ g === "search" && /* @__PURE__ */ t(E, { ...y }),
180
+ g === "title" && /* @__PURE__ */ t("h1", { children: O })
181
+ ] }),
182
+ /* @__PURE__ */ t(
183
+ I,
184
+ {
185
+ icon: /* @__PURE__ */ t(P, {}),
186
+ ...a,
187
+ onClick: o ? v : void 0
188
+ }
189
+ )
190
+ ] }) : /* @__PURE__ */ h(R, { children: [
191
+ /* @__PURE__ */ h(A, { height: $, children: [
192
+ /* @__PURE__ */ t(_, { src: W, height: `${$}px`, width: k }),
193
+ i && /* @__PURE__ */ t(H, { variant: "icon", onClick: m, color: c, children: /* @__PURE__ */ t(se, {}) })
194
+ ] }),
195
+ /* @__PURE__ */ h(V, { children: [
196
+ g === "search" && /* @__PURE__ */ t(E, { ...y }),
197
+ g === "title" && /* @__PURE__ */ t("h1", { children: O })
198
+ ] }),
199
+ /* @__PURE__ */ h(le, { width: x, loggedIn: !!n, children: [
200
+ /* @__PURE__ */ t(j, { visible: !!n, ref: G, children: /* @__PURE__ */ t(
201
+ ee,
202
+ {
203
+ id: "accountMenuContainer",
204
+ component: /* @__PURE__ */ t(
205
+ I,
206
+ {
207
+ icon: /* @__PURE__ */ t(P, {}),
208
+ ...a,
209
+ onClick: o ? v : void 0
210
+ }
211
+ ),
212
+ label: `Hi, ${r}!`
213
+ }
214
+ ) }),
215
+ /* @__PURE__ */ t(j, { visible: !n, ref: J, children: /* @__PURE__ */ t(H, { id: "loginButtonContainer", onClick: U, children: "Log In" }) })
216
+ ] })
217
+ ] });
218
+ };
219
+ export {
220
+ xe as A,
221
+ P
222
+ };
@@ -6,7 +6,7 @@ import W, { Children as Oe, isValidElement as G, cloneElement as J } from "react
6
6
  import { P as e, b as E, a as fe, s as te, u as de, g as je, d as Fe } from "./DefaultPropsProvider.js";
7
7
  import { jsx as I, jsxs as $e } from "react/jsx-runtime";
8
8
  import { k as ne } from "./emotion-react.browser.esm.js";
9
- import { d as Ie, _ as Ue, e as ze, f as ue, b as _e, a as ce, c as H, r as Xe } from "./TransitionGroupContext.js";
9
+ import { d as Ie, e as Ue, _ as ze, f as ue, b as _e, a as ce, c as H, r as Xe } from "./TransitionGroupContext.js";
10
10
  import { _ as Ye } from "./emotion-styled.browser.esm.js";
11
11
  import { e as Ae } from "./elementTypeAcceptingRef.js";
12
12
  import { i as pe } from "./isFocusVisible.js";
package/.chunks/Portal.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as p from "react";
2
2
  import w from "react";
3
3
  import { r as ct, m as pt, a as ft } from "./resolveComponentProps.js";
4
- import { a as H, _ as dt, e as Et, f as B, b as mt, u as U, s as j } from "./TransitionGroupContext.js";
4
+ import { a as H, e as dt, _ as Et, f as B, b as mt, u as U, s as j } from "./TransitionGroupContext.js";
5
5
  import { P as e } from "./DefaultPropsProvider.js";
6
6
  import { a as ht } from "./useTheme.js";
7
7
  import { jsx as $ } from "react/jsx-runtime";
@@ -77,12 +77,12 @@ function L(t, e) {
77
77
  const w = p.createContext(null);
78
78
  export {
79
79
  f as T,
80
- L as _,
80
+ j as _,
81
81
  P as a,
82
82
  R as b,
83
83
  b as c,
84
84
  h as d,
85
- j as e,
85
+ L as e,
86
86
  w as f,
87
87
  _ as r,
88
88
  y as s,