@xenide-io/the-old-ui-theme 0.9.14 → 0.9.15
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.
- package/dist/suite.d.mts +0 -2
- package/dist/suite.d.ts +0 -2
- package/dist/suite.js +228 -239
- package/dist/suite.mjs +97 -108
- package/package.json +1 -1
- package/src/suite/components/suite-notification-bell.test.tsx +75 -1
- package/src/suite/components/suite-notification-bell.tsx +13 -4
- package/src/suite/lib/suite-notifications.tsx +1 -23
package/dist/suite.mjs
CHANGED
|
@@ -1028,6 +1028,7 @@ function AppSwitcher({
|
|
|
1028
1028
|
}
|
|
1029
1029
|
|
|
1030
1030
|
// src/suite/components/suite-notification-bell.tsx
|
|
1031
|
+
import { useState as useState3 } from "react";
|
|
1031
1032
|
import { Bell } from "iconoir-react";
|
|
1032
1033
|
|
|
1033
1034
|
// src/suite/lib/suite-notifications.tsx
|
|
@@ -1167,7 +1168,6 @@ function SuiteNotificationsProvider({
|
|
|
1167
1168
|
const router = useRouter();
|
|
1168
1169
|
const [notifications, setNotifications] = useState2([]);
|
|
1169
1170
|
const [unreadCount, setUnreadCount] = useState2(0);
|
|
1170
|
-
const [open, setOpen] = useState2(false);
|
|
1171
1171
|
const load = useCallback(async () => {
|
|
1172
1172
|
try {
|
|
1173
1173
|
const data = await fetchNotifications();
|
|
@@ -1228,16 +1228,8 @@ function SuiteNotificationsProvider({
|
|
|
1228
1228
|
document.removeEventListener("visibilitychange", onVisibilityChange);
|
|
1229
1229
|
};
|
|
1230
1230
|
}, [enabled, load, pollMs, cacheKey]);
|
|
1231
|
-
const setOpenAndRefresh = useCallback(
|
|
1232
|
-
(next) => {
|
|
1233
|
-
setOpen(next);
|
|
1234
|
-
if (next) void load();
|
|
1235
|
-
},
|
|
1236
|
-
[load]
|
|
1237
|
-
);
|
|
1238
1231
|
const select = useCallback(
|
|
1239
1232
|
(notification) => {
|
|
1240
|
-
setOpen(false);
|
|
1241
1233
|
if (!notification.read_at) {
|
|
1242
1234
|
setNotifications(
|
|
1243
1235
|
(prev) => prev.map(
|
|
@@ -1310,21 +1302,11 @@ function SuiteNotificationsProvider({
|
|
|
1310
1302
|
() => ({
|
|
1311
1303
|
notifications,
|
|
1312
1304
|
unreadCount,
|
|
1313
|
-
open,
|
|
1314
|
-
setOpen: setOpenAndRefresh,
|
|
1315
1305
|
refresh: () => void load(),
|
|
1316
1306
|
select,
|
|
1317
1307
|
markAllRead
|
|
1318
1308
|
}),
|
|
1319
|
-
[
|
|
1320
|
-
notifications,
|
|
1321
|
-
unreadCount,
|
|
1322
|
-
open,
|
|
1323
|
-
setOpenAndRefresh,
|
|
1324
|
-
load,
|
|
1325
|
-
select,
|
|
1326
|
-
markAllRead
|
|
1327
|
-
]
|
|
1309
|
+
[notifications, unreadCount, load, select, markAllRead]
|
|
1328
1310
|
);
|
|
1329
1311
|
return /* @__PURE__ */ jsx6(SuiteNotificationsContext.Provider, { value, children });
|
|
1330
1312
|
}
|
|
@@ -1351,11 +1333,15 @@ function SuiteNotificationBell({
|
|
|
1351
1333
|
const {
|
|
1352
1334
|
notifications,
|
|
1353
1335
|
unreadCount: unread,
|
|
1354
|
-
|
|
1355
|
-
setOpen,
|
|
1336
|
+
refresh,
|
|
1356
1337
|
select,
|
|
1357
1338
|
markAllRead
|
|
1358
1339
|
} = useSuiteNotifications();
|
|
1340
|
+
const [open, setOpen] = useState3(false);
|
|
1341
|
+
const onOpenChange = (next) => {
|
|
1342
|
+
setOpen(next);
|
|
1343
|
+
if (next) refresh();
|
|
1344
|
+
};
|
|
1359
1345
|
return /* @__PURE__ */ jsxs6(
|
|
1360
1346
|
DropdownMenu2,
|
|
1361
1347
|
{
|
|
@@ -1365,7 +1351,7 @@ function SuiteNotificationBell({
|
|
|
1365
1351
|
align: "end",
|
|
1366
1352
|
panelClassName: "w-80 overflow-hidden p-0",
|
|
1367
1353
|
open,
|
|
1368
|
-
onOpenChange
|
|
1354
|
+
onOpenChange,
|
|
1369
1355
|
trigger: /* @__PURE__ */ jsx7("span", { className: "relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: /* @__PURE__ */ jsxs6("span", { className: "relative inline-flex h-5 w-5", children: [
|
|
1370
1356
|
/* @__PURE__ */ jsx7(Bell, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": true }),
|
|
1371
1357
|
unread > 0 ? /* @__PURE__ */ jsx7("span", { className: "pointer-events-none absolute -right-2 -top-2 z-[1] flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-[var(--ph-on-accent)] ring-2 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
|
|
@@ -1390,7 +1376,10 @@ function SuiteNotificationBell({
|
|
|
1390
1376
|
{
|
|
1391
1377
|
id: `${dataTest}-item-${n.id}`,
|
|
1392
1378
|
"data-test": `${dataTest}-item-${n.id}`,
|
|
1393
|
-
onClick: () =>
|
|
1379
|
+
onClick: () => {
|
|
1380
|
+
setOpen(false);
|
|
1381
|
+
select(n);
|
|
1382
|
+
},
|
|
1394
1383
|
className: "flex w-full flex-col gap-0.5 px-3 py-2 text-left transition hover:bg-ph-muted",
|
|
1395
1384
|
children: [
|
|
1396
1385
|
/* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
|
|
@@ -1419,7 +1408,7 @@ function SuiteNotificationBell({
|
|
|
1419
1408
|
}
|
|
1420
1409
|
|
|
1421
1410
|
// src/suite/components/command-palette-host.tsx
|
|
1422
|
-
import { useEffect as useEffect2, useState as
|
|
1411
|
+
import { useEffect as useEffect2, useState as useState4 } from "react";
|
|
1423
1412
|
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
1424
1413
|
function isEditableTarget() {
|
|
1425
1414
|
if (typeof document === "undefined") return false;
|
|
@@ -1440,7 +1429,7 @@ function CommandPaletteHost({
|
|
|
1440
1429
|
inputDataTest,
|
|
1441
1430
|
commandPalette: CommandPalette
|
|
1442
1431
|
}) {
|
|
1443
|
-
const [open, setOpen] =
|
|
1432
|
+
const [open, setOpen] = useState4(false);
|
|
1444
1433
|
useEffect2(() => {
|
|
1445
1434
|
const onKey = (e) => {
|
|
1446
1435
|
if (!((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k")) return;
|
|
@@ -1468,9 +1457,9 @@ function CommandPaletteHost({
|
|
|
1468
1457
|
}
|
|
1469
1458
|
|
|
1470
1459
|
// src/suite/lib/use-idle-mount.ts
|
|
1471
|
-
import { useEffect as useEffect3, useState as
|
|
1460
|
+
import { useEffect as useEffect3, useState as useState5 } from "react";
|
|
1472
1461
|
function useIdleMount(timeoutMs = 1200) {
|
|
1473
|
-
const [ready, setReady] =
|
|
1462
|
+
const [ready, setReady] = useState5(false);
|
|
1474
1463
|
useEffect3(() => {
|
|
1475
1464
|
let timeoutId = 0;
|
|
1476
1465
|
let idleId = 0;
|
|
@@ -1495,7 +1484,7 @@ function DeferredChrome({ children }) {
|
|
|
1495
1484
|
|
|
1496
1485
|
// src/suite/components/suite-mobile-drawer.tsx
|
|
1497
1486
|
import * as Dialog from "@radix-ui/react-dialog";
|
|
1498
|
-
import { useEffect as useEffect4, useState as
|
|
1487
|
+
import { useEffect as useEffect4, useState as useState6 } from "react";
|
|
1499
1488
|
import { Xmark as X } from "iconoir-react";
|
|
1500
1489
|
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1501
1490
|
function SuiteMobileDrawer({
|
|
@@ -1517,8 +1506,8 @@ function SuiteMobileDrawer({
|
|
|
1517
1506
|
closeButtonDataTest,
|
|
1518
1507
|
panelClassName
|
|
1519
1508
|
}) {
|
|
1520
|
-
const [rendered, setRendered] =
|
|
1521
|
-
const [shown, setShown] =
|
|
1509
|
+
const [rendered, setRendered] = useState6(open);
|
|
1510
|
+
const [shown, setShown] = useState6(open);
|
|
1522
1511
|
useEffect4(() => {
|
|
1523
1512
|
if (open) {
|
|
1524
1513
|
queueMicrotask(() => setRendered(true));
|
|
@@ -1658,7 +1647,7 @@ function SuiteMobileHeader({
|
|
|
1658
1647
|
import {
|
|
1659
1648
|
useEffect as useEffect5,
|
|
1660
1649
|
useRef,
|
|
1661
|
-
useState as
|
|
1650
|
+
useState as useState7
|
|
1662
1651
|
} from "react";
|
|
1663
1652
|
import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1664
1653
|
function SuiteBreadcrumbs({ items, className }) {
|
|
@@ -1739,7 +1728,7 @@ function SuitePageHeader({
|
|
|
1739
1728
|
sticky = true
|
|
1740
1729
|
}) {
|
|
1741
1730
|
const headerRef = useRef(null);
|
|
1742
|
-
const [stuck, setStuck] =
|
|
1731
|
+
const [stuck, setStuck] = useState7(false);
|
|
1743
1732
|
useEffect5(() => {
|
|
1744
1733
|
if (!sticky) return;
|
|
1745
1734
|
if (typeof IntersectionObserver === "undefined") return;
|
|
@@ -2231,7 +2220,7 @@ import {
|
|
|
2231
2220
|
useEffect as useEffect6,
|
|
2232
2221
|
useMemo as useMemo2,
|
|
2233
2222
|
useRef as useRef2,
|
|
2234
|
-
useState as
|
|
2223
|
+
useState as useState8
|
|
2235
2224
|
} from "react";
|
|
2236
2225
|
|
|
2237
2226
|
// src/suite/lib/cookies.ts
|
|
@@ -2348,7 +2337,7 @@ function SuiteThemeProvider({
|
|
|
2348
2337
|
config,
|
|
2349
2338
|
children
|
|
2350
2339
|
}) {
|
|
2351
|
-
const [state, setState] =
|
|
2340
|
+
const [state, setState] = useState8(() => {
|
|
2352
2341
|
const theme = readStoredTheme(config.storageKey);
|
|
2353
2342
|
if (typeof document === "undefined") {
|
|
2354
2343
|
return { theme, resolvedTheme: config.fallbackTheme };
|
|
@@ -2467,7 +2456,7 @@ import {
|
|
|
2467
2456
|
useId,
|
|
2468
2457
|
useLayoutEffect,
|
|
2469
2458
|
useRef as useRef3,
|
|
2470
|
-
useState as
|
|
2459
|
+
useState as useState9
|
|
2471
2460
|
} from "react";
|
|
2472
2461
|
import {
|
|
2473
2462
|
ArrowDown,
|
|
@@ -2569,8 +2558,8 @@ function SuiteAiPanel({
|
|
|
2569
2558
|
isWaitingForReply = false
|
|
2570
2559
|
}) {
|
|
2571
2560
|
const inputId = useId();
|
|
2572
|
-
const [uncontrolledOpen, setUncontrolledOpen] =
|
|
2573
|
-
const [resolvingId, setResolvingId] =
|
|
2561
|
+
const [uncontrolledOpen, setUncontrolledOpen] = useState9(false);
|
|
2562
|
+
const [resolvingId, setResolvingId] = useState9("");
|
|
2574
2563
|
const open = openProp != null ? openProp : uncontrolledOpen;
|
|
2575
2564
|
const setOpen = useCallback3(
|
|
2576
2565
|
(next) => {
|
|
@@ -2580,19 +2569,19 @@ function SuiteAiPanel({
|
|
|
2580
2569
|
},
|
|
2581
2570
|
[onOpenChange, openProp]
|
|
2582
2571
|
);
|
|
2583
|
-
const [prompt, setPrompt] =
|
|
2584
|
-
const [messages, setMessages] =
|
|
2585
|
-
const [loading, setLoading] =
|
|
2586
|
-
const [hydrating, setHydrating] =
|
|
2587
|
-
const [error, setError] =
|
|
2588
|
-
const [atBottom, setAtBottom] =
|
|
2572
|
+
const [prompt, setPrompt] = useState9("");
|
|
2573
|
+
const [messages, setMessages] = useState9([]);
|
|
2574
|
+
const [loading, setLoading] = useState9(false);
|
|
2575
|
+
const [hydrating, setHydrating] = useState9(false);
|
|
2576
|
+
const [error, setError] = useState9("");
|
|
2577
|
+
const [atBottom, setAtBottom] = useState9(true);
|
|
2589
2578
|
const scrollerRef = useRef3(null);
|
|
2590
2579
|
const textareaRef = useRef3(null);
|
|
2591
2580
|
const abortRef = useRef3(null);
|
|
2592
2581
|
const pendingPromptRef = useRef3(null);
|
|
2593
|
-
const [editingIndex, setEditingIndex] =
|
|
2594
|
-
const [editDraft, setEditDraft] =
|
|
2595
|
-
const [copiedIndex, setCopiedIndex] =
|
|
2582
|
+
const [editingIndex, setEditingIndex] = useState9(null);
|
|
2583
|
+
const [editDraft, setEditDraft] = useState9("");
|
|
2584
|
+
const [copiedIndex, setCopiedIndex] = useState9(null);
|
|
2596
2585
|
const waiting = loading || isWaitingForReply;
|
|
2597
2586
|
useEffect7(() => {
|
|
2598
2587
|
function onOpen(event) {
|
|
@@ -3198,7 +3187,7 @@ function SuiteAiPanel({
|
|
|
3198
3187
|
}
|
|
3199
3188
|
|
|
3200
3189
|
// src/suite/components/workspace-switcher.tsx
|
|
3201
|
-
import { useState as
|
|
3190
|
+
import { useState as useState10 } from "react";
|
|
3202
3191
|
import { Building, Check as Check2, NavArrowDown } from "iconoir-react";
|
|
3203
3192
|
import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
3204
3193
|
function SuiteWorkspaceSwitcher({
|
|
@@ -3216,7 +3205,7 @@ function SuiteWorkspaceSwitcher({
|
|
|
3216
3205
|
footer
|
|
3217
3206
|
}) {
|
|
3218
3207
|
var _a2;
|
|
3219
|
-
const [open, setOpen] =
|
|
3208
|
+
const [open, setOpen] = useState10(false);
|
|
3220
3209
|
const sections = (_a2 = groups == null ? void 0 : groups.filter((group) => group.workspaces.length > 0)) != null ? _a2 : workspaces.length > 0 ? [{ id: "workspaces", label: "Switch workspace", workspaces }] : [];
|
|
3221
3210
|
return /* @__PURE__ */ jsx19(
|
|
3222
3211
|
DropdownMenu2,
|
|
@@ -3364,7 +3353,7 @@ function SuiteIcon({
|
|
|
3364
3353
|
import {
|
|
3365
3354
|
useCallback as useCallback4,
|
|
3366
3355
|
useLayoutEffect as useLayoutEffect2,
|
|
3367
|
-
useState as
|
|
3356
|
+
useState as useState11
|
|
3368
3357
|
} from "react";
|
|
3369
3358
|
var SIDEBAR_RAIL_WIDTH = 56;
|
|
3370
3359
|
var SIDEBAR_COLLAPSE_THRESHOLD = 80;
|
|
@@ -3450,8 +3439,8 @@ function resetSuiteSidebarWidth() {
|
|
|
3450
3439
|
}
|
|
3451
3440
|
function useSidebarWidth(storageKey = SUITE_SIDEBAR_WIDTH_KEY, defaultWidth = SIDEBAR_DEFAULT_WIDTH) {
|
|
3452
3441
|
const fallbackWidth = snapWidth(clampWidth(defaultWidth));
|
|
3453
|
-
const [width, setWidth] =
|
|
3454
|
-
const [narrowViewport, setNarrowViewport] =
|
|
3442
|
+
const [width, setWidth] = useState11(fallbackWidth);
|
|
3443
|
+
const [narrowViewport, setNarrowViewport] = useState11(false);
|
|
3455
3444
|
const collapsed = narrowViewport || width <= SIDEBAR_COLLAPSE_THRESHOLD;
|
|
3456
3445
|
useLayoutEffect2(() => {
|
|
3457
3446
|
const sync = () => {
|
|
@@ -4109,7 +4098,7 @@ import {
|
|
|
4109
4098
|
useEffect as useEffect9,
|
|
4110
4099
|
useMemo as useMemo3,
|
|
4111
4100
|
useRef as useRef4,
|
|
4112
|
-
useState as
|
|
4101
|
+
useState as useState12
|
|
4113
4102
|
} from "react";
|
|
4114
4103
|
import {
|
|
4115
4104
|
Bridge3d,
|
|
@@ -4199,12 +4188,12 @@ function SuiteIntegrationPicker({
|
|
|
4199
4188
|
description = "Connect an app to this workspace securely.",
|
|
4200
4189
|
dataTest = "suite-integration-picker"
|
|
4201
4190
|
}) {
|
|
4202
|
-
const [query, setQuery] =
|
|
4203
|
-
const [category, setCategory] =
|
|
4204
|
-
const [categoryQuery, setCategoryQuery] =
|
|
4205
|
-
const [categoryMenuOpen, setCategoryMenuOpen] =
|
|
4206
|
-
const [expanded, setExpanded] =
|
|
4207
|
-
const [bridgeOnlyInternal, setBridgeOnlyInternal] =
|
|
4191
|
+
const [query, setQuery] = useState12("");
|
|
4192
|
+
const [category, setCategory] = useState12("all");
|
|
4193
|
+
const [categoryQuery, setCategoryQuery] = useState12("");
|
|
4194
|
+
const [categoryMenuOpen, setCategoryMenuOpen] = useState12(false);
|
|
4195
|
+
const [expanded, setExpanded] = useState12(null);
|
|
4196
|
+
const [bridgeOnlyInternal, setBridgeOnlyInternal] = useState12(false);
|
|
4208
4197
|
const categoryMenuRef = useRef4(null);
|
|
4209
4198
|
const categoryTriggerRef = useRef4(null);
|
|
4210
4199
|
const categorySearchRef = useRef4(null);
|
|
@@ -4217,16 +4206,16 @@ function SuiteIntegrationPicker({
|
|
|
4217
4206
|
const loadMoreInFlightRef = useRef4(false);
|
|
4218
4207
|
const sentinelVisibleRef = useRef4(false);
|
|
4219
4208
|
const authRequestRef = useRef4(0);
|
|
4220
|
-
const [methodItem, setMethodItem] =
|
|
4221
|
-
const [authItem, setAuthItem] =
|
|
4222
|
-
const [authValues, setAuthValues] =
|
|
4223
|
-
const [authLoading, setAuthLoading] =
|
|
4224
|
-
const [authSubmitting, setAuthSubmitting] =
|
|
4225
|
-
const [authError, setAuthError] =
|
|
4226
|
-
const [connectionError, setConnectionError] =
|
|
4227
|
-
const [itemToDisconnect, setItemToDisconnect] =
|
|
4228
|
-
const [disconnecting, setDisconnecting] =
|
|
4229
|
-
const [disconnectError, setDisconnectError] =
|
|
4209
|
+
const [methodItem, setMethodItem] = useState12(null);
|
|
4210
|
+
const [authItem, setAuthItem] = useState12(null);
|
|
4211
|
+
const [authValues, setAuthValues] = useState12({});
|
|
4212
|
+
const [authLoading, setAuthLoading] = useState12(false);
|
|
4213
|
+
const [authSubmitting, setAuthSubmitting] = useState12(false);
|
|
4214
|
+
const [authError, setAuthError] = useState12(null);
|
|
4215
|
+
const [connectionError, setConnectionError] = useState12(null);
|
|
4216
|
+
const [itemToDisconnect, setItemToDisconnect] = useState12(null);
|
|
4217
|
+
const [disconnecting, setDisconnecting] = useState12(false);
|
|
4218
|
+
const [disconnectError, setDisconnectError] = useState12(null);
|
|
4230
4219
|
const itemCategories = useMemo3(
|
|
4231
4220
|
() => Array.from(
|
|
4232
4221
|
new Set(items.flatMap((item) => {
|
|
@@ -4918,7 +4907,7 @@ function SuiteIntegrationPicker({
|
|
|
4918
4907
|
}
|
|
4919
4908
|
|
|
4920
4909
|
// src/suite/components/suite-integration-rules.tsx
|
|
4921
|
-
import { useState as
|
|
4910
|
+
import { useState as useState13 } from "react";
|
|
4922
4911
|
import { Plus, Xmark as Xmark2 } from "iconoir-react";
|
|
4923
4912
|
import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
4924
4913
|
var ACTION_LABELS = {
|
|
@@ -4950,18 +4939,18 @@ function SuiteIntegrationRules({
|
|
|
4950
4939
|
onRefresh,
|
|
4951
4940
|
dataTest = "integration-rules"
|
|
4952
4941
|
}) {
|
|
4953
|
-
const [formOpen, setFormOpen] =
|
|
4954
|
-
const [name, setName] =
|
|
4955
|
-
const [trigger, setTrigger] =
|
|
4956
|
-
const [actionType, setActionType] =
|
|
4957
|
-
const [projectId, setProjectId] =
|
|
4958
|
-
const [minutes, setMinutes] =
|
|
4959
|
-
const [priority, setPriority] =
|
|
4960
|
-
const [submitting, setSubmitting] =
|
|
4961
|
-
const [formError, setFormError] =
|
|
4962
|
-
const [busyId, setBusyId] =
|
|
4963
|
-
const [ruleToDelete, setRuleToDelete] =
|
|
4964
|
-
const [deleteError, setDeleteError] =
|
|
4942
|
+
const [formOpen, setFormOpen] = useState13(false);
|
|
4943
|
+
const [name, setName] = useState13("");
|
|
4944
|
+
const [trigger, setTrigger] = useState13("");
|
|
4945
|
+
const [actionType, setActionType] = useState13("create_tides_task");
|
|
4946
|
+
const [projectId, setProjectId] = useState13("");
|
|
4947
|
+
const [minutes, setMinutes] = useState13("");
|
|
4948
|
+
const [priority, setPriority] = useState13("low");
|
|
4949
|
+
const [submitting, setSubmitting] = useState13(false);
|
|
4950
|
+
const [formError, setFormError] = useState13(null);
|
|
4951
|
+
const [busyId, setBusyId] = useState13(null);
|
|
4952
|
+
const [ruleToDelete, setRuleToDelete] = useState13(null);
|
|
4953
|
+
const [deleteError, setDeleteError] = useState13(null);
|
|
4965
4954
|
const needsProject = actionType === "create_tides_task" || actionType === "draft_time_entry";
|
|
4966
4955
|
async function submitForm(event) {
|
|
4967
4956
|
event.preventDefault();
|
|
@@ -5320,7 +5309,7 @@ import {
|
|
|
5320
5309
|
useEffect as useEffect11,
|
|
5321
5310
|
useMemo as useMemo5,
|
|
5322
5311
|
useRef as useRef6,
|
|
5323
|
-
useState as
|
|
5312
|
+
useState as useState15
|
|
5324
5313
|
} from "react";
|
|
5325
5314
|
import {
|
|
5326
5315
|
ArrowLeft,
|
|
@@ -5439,7 +5428,7 @@ import {
|
|
|
5439
5428
|
useEffect as useEffect10,
|
|
5440
5429
|
useMemo as useMemo4,
|
|
5441
5430
|
useRef as useRef5,
|
|
5442
|
-
useState as
|
|
5431
|
+
useState as useState14
|
|
5443
5432
|
} from "react";
|
|
5444
5433
|
import { Filter as Filter2, FilterList, NavArrowDown as NavArrowDown3, Search as Search2 } from "iconoir-react";
|
|
5445
5434
|
import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
@@ -5491,19 +5480,19 @@ function SuitePaletteLibrary({
|
|
|
5491
5480
|
onPick
|
|
5492
5481
|
}) {
|
|
5493
5482
|
var _a2, _b;
|
|
5494
|
-
const [collections, setCollections] =
|
|
5495
|
-
const [typeFilter, setTypeFilter] =
|
|
5496
|
-
const [collectionFilter, setCollectionFilter] =
|
|
5497
|
-
const [libraryOpen, setLibraryOpen] =
|
|
5498
|
-
const [libraryQuery, setLibraryQuery] =
|
|
5483
|
+
const [collections, setCollections] = useState14([]);
|
|
5484
|
+
const [typeFilter, setTypeFilter] = useState14("all");
|
|
5485
|
+
const [collectionFilter, setCollectionFilter] = useState14("");
|
|
5486
|
+
const [libraryOpen, setLibraryOpen] = useState14(false);
|
|
5487
|
+
const [libraryQuery, setLibraryQuery] = useState14("");
|
|
5499
5488
|
const libraryRef = useRef5(null);
|
|
5500
|
-
const [icons, setIcons] =
|
|
5501
|
-
const [total, setTotal] =
|
|
5502
|
-
const [page, setPage] =
|
|
5503
|
-
const [query, setQuery] =
|
|
5504
|
-
const [loading, setLoading] =
|
|
5505
|
-
const [loadingMore, setLoadingMore] =
|
|
5506
|
-
const [error, setError] =
|
|
5489
|
+
const [icons, setIcons] = useState14([]);
|
|
5490
|
+
const [total, setTotal] = useState14(0);
|
|
5491
|
+
const [page, setPage] = useState14(1);
|
|
5492
|
+
const [query, setQuery] = useState14("");
|
|
5493
|
+
const [loading, setLoading] = useState14(true);
|
|
5494
|
+
const [loadingMore, setLoadingMore] = useState14(false);
|
|
5495
|
+
const [error, setError] = useState14(null);
|
|
5507
5496
|
const requestId = useRef5(0);
|
|
5508
5497
|
const libraryOptions = useMemo4(() => {
|
|
5509
5498
|
const list = collections.filter(
|
|
@@ -5913,22 +5902,22 @@ function SuiteClientsProjectsDirectory({
|
|
|
5913
5902
|
dataTest = "suite-clients-projects-directory"
|
|
5914
5903
|
}) {
|
|
5915
5904
|
var _a2;
|
|
5916
|
-
const [query, setQuery] =
|
|
5917
|
-
const [selectedClientId, setSelectedClientId] =
|
|
5918
|
-
const [mobileDetail, setMobileDetail] =
|
|
5919
|
-
const [editing, setEditing] =
|
|
5920
|
-
const [draft, setDraft] =
|
|
5905
|
+
const [query, setQuery] = useState15("");
|
|
5906
|
+
const [selectedClientId, setSelectedClientId] = useState15(null);
|
|
5907
|
+
const [mobileDetail, setMobileDetail] = useState15(false);
|
|
5908
|
+
const [editing, setEditing] = useState15(null);
|
|
5909
|
+
const [draft, setDraft] = useState15({
|
|
5921
5910
|
name: "",
|
|
5922
5911
|
icon: DEFAULT_ICON,
|
|
5923
5912
|
color: DEFAULT_COLOR
|
|
5924
5913
|
});
|
|
5925
|
-
const [draftClientId, setDraftClientId] =
|
|
5926
|
-
const [preview, setPreview] =
|
|
5927
|
-
const [libraryOpen, setLibraryOpen] =
|
|
5928
|
-
const [draftArchived, setDraftArchived] =
|
|
5929
|
-
const [confirming, setConfirming] =
|
|
5930
|
-
const [saving, setSaving] =
|
|
5931
|
-
const [mutationError, setMutationError] =
|
|
5914
|
+
const [draftClientId, setDraftClientId] = useState15(null);
|
|
5915
|
+
const [preview, setPreview] = useState15(null);
|
|
5916
|
+
const [libraryOpen, setLibraryOpen] = useState15(false);
|
|
5917
|
+
const [draftArchived, setDraftArchived] = useState15(false);
|
|
5918
|
+
const [confirming, setConfirming] = useState15(null);
|
|
5919
|
+
const [saving, setSaving] = useState15(false);
|
|
5920
|
+
const [mutationError, setMutationError] = useState15(null);
|
|
5932
5921
|
const clientButtonRefs = useRef6({});
|
|
5933
5922
|
const backToClientsRef = useRef6(null);
|
|
5934
5923
|
const mobileFocusTarget = useRef6(null);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xenide-io/the-old-ui-theme",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.15",
|
|
4
4
|
"description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
|
|
5
5
|
"author": "Xenide",
|
|
6
6
|
"license": "MIT",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { cleanup, render, waitFor } from "@testing-library/react";
|
|
1
|
+
import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
|
|
2
2
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
3
3
|
|
|
4
4
|
vi.mock("next/navigation", () => ({
|
|
@@ -48,4 +48,78 @@ describe("SuiteNotificationBell", () => {
|
|
|
48
48
|
expect(badge.parentElement?.className).toContain("h-5");
|
|
49
49
|
expect(badge.parentElement?.className).toContain("w-5");
|
|
50
50
|
});
|
|
51
|
+
|
|
52
|
+
it("keeps each responsive bell dropdown open state independent", () => {
|
|
53
|
+
render(
|
|
54
|
+
<SuiteNotificationsProvider
|
|
55
|
+
fetchNotifications={async () => ({
|
|
56
|
+
notifications: [],
|
|
57
|
+
unread_count: 0,
|
|
58
|
+
})}
|
|
59
|
+
markRead={async () => undefined}
|
|
60
|
+
markAllRead={async () => undefined}
|
|
61
|
+
cacheKey={null}
|
|
62
|
+
>
|
|
63
|
+
<SuiteNotificationBell
|
|
64
|
+
dataTest="desktop-notifications"
|
|
65
|
+
dropdownMenu={({
|
|
66
|
+
trigger,
|
|
67
|
+
children,
|
|
68
|
+
open,
|
|
69
|
+
onOpenChange,
|
|
70
|
+
triggerId,
|
|
71
|
+
}) => (
|
|
72
|
+
<div>
|
|
73
|
+
<button
|
|
74
|
+
id={triggerId}
|
|
75
|
+
type="button"
|
|
76
|
+
onClick={() => onOpenChange?.(!open)}
|
|
77
|
+
>
|
|
78
|
+
{trigger}
|
|
79
|
+
</button>
|
|
80
|
+
{open ? (
|
|
81
|
+
<div data-test={`${triggerId}-panel`}>{children}</div>
|
|
82
|
+
) : null}
|
|
83
|
+
</div>
|
|
84
|
+
)}
|
|
85
|
+
/>
|
|
86
|
+
<SuiteNotificationBell
|
|
87
|
+
dataTest="mobile-notifications"
|
|
88
|
+
dropdownMenu={({
|
|
89
|
+
trigger,
|
|
90
|
+
children,
|
|
91
|
+
open,
|
|
92
|
+
onOpenChange,
|
|
93
|
+
triggerId,
|
|
94
|
+
}) => (
|
|
95
|
+
<div>
|
|
96
|
+
<button
|
|
97
|
+
id={triggerId}
|
|
98
|
+
type="button"
|
|
99
|
+
onClick={() => onOpenChange?.(!open)}
|
|
100
|
+
>
|
|
101
|
+
{trigger}
|
|
102
|
+
</button>
|
|
103
|
+
{open ? (
|
|
104
|
+
<div data-test={`${triggerId}-panel`}>{children}</div>
|
|
105
|
+
) : null}
|
|
106
|
+
</div>
|
|
107
|
+
)}
|
|
108
|
+
/>
|
|
109
|
+
</SuiteNotificationsProvider>,
|
|
110
|
+
);
|
|
111
|
+
|
|
112
|
+
fireEvent.click(document.getElementById("desktop-notifications-trigger")!);
|
|
113
|
+
|
|
114
|
+
expect(
|
|
115
|
+
document.querySelector(
|
|
116
|
+
'[data-test="desktop-notifications-trigger-panel"]',
|
|
117
|
+
),
|
|
118
|
+
).not.toBeNull();
|
|
119
|
+
expect(
|
|
120
|
+
document.querySelector(
|
|
121
|
+
'[data-test="mobile-notifications-trigger-panel"]',
|
|
122
|
+
),
|
|
123
|
+
).toBeNull();
|
|
124
|
+
});
|
|
51
125
|
});
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
+
import { useState } from "react";
|
|
3
4
|
import { Bell } from "iconoir-react";
|
|
4
5
|
|
|
5
6
|
import type { SuiteDropdownMenuComponent } from "../lib/injected";
|
|
@@ -41,11 +42,16 @@ export function SuiteNotificationBell({
|
|
|
41
42
|
const {
|
|
42
43
|
notifications,
|
|
43
44
|
unreadCount: unread,
|
|
44
|
-
|
|
45
|
-
setOpen,
|
|
45
|
+
refresh,
|
|
46
46
|
select,
|
|
47
47
|
markAllRead,
|
|
48
48
|
} = useSuiteNotifications();
|
|
49
|
+
const [open, setOpen] = useState(false);
|
|
50
|
+
|
|
51
|
+
const onOpenChange = (next: boolean) => {
|
|
52
|
+
setOpen(next);
|
|
53
|
+
if (next) refresh();
|
|
54
|
+
};
|
|
49
55
|
|
|
50
56
|
return (
|
|
51
57
|
<DropdownMenu
|
|
@@ -57,7 +63,7 @@ export function SuiteNotificationBell({
|
|
|
57
63
|
align="end"
|
|
58
64
|
panelClassName="w-80 overflow-hidden p-0"
|
|
59
65
|
open={open}
|
|
60
|
-
onOpenChange={
|
|
66
|
+
onOpenChange={onOpenChange}
|
|
61
67
|
trigger={
|
|
62
68
|
<span className="relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
|
|
63
69
|
<span className="relative inline-flex h-5 w-5">
|
|
@@ -96,7 +102,10 @@ export function SuiteNotificationBell({
|
|
|
96
102
|
key={n.id}
|
|
97
103
|
id={`${dataTest}-item-${n.id}`}
|
|
98
104
|
data-test={`${dataTest}-item-${n.id}`}
|
|
99
|
-
onClick={() =>
|
|
105
|
+
onClick={() => {
|
|
106
|
+
setOpen(false);
|
|
107
|
+
select(n);
|
|
108
|
+
}}
|
|
100
109
|
className="flex w-full flex-col gap-0.5 px-3 py-2 text-left transition hover:bg-ph-muted"
|
|
101
110
|
>
|
|
102
111
|
<span className="flex items-center gap-2">
|
|
@@ -39,8 +39,6 @@ export interface SuiteNotificationsResponse {
|
|
|
39
39
|
export interface SuiteNotificationsContextValue {
|
|
40
40
|
notifications: SuiteNotification[];
|
|
41
41
|
unreadCount: number;
|
|
42
|
-
open: boolean;
|
|
43
|
-
setOpen: (open: boolean) => void;
|
|
44
42
|
refresh: () => void;
|
|
45
43
|
select: (notification: SuiteNotification) => void;
|
|
46
44
|
markAllRead: () => void;
|
|
@@ -96,7 +94,6 @@ export function SuiteNotificationsProvider({
|
|
|
96
94
|
const router = useRouter();
|
|
97
95
|
const [notifications, setNotifications] = useState<SuiteNotification[]>([]);
|
|
98
96
|
const [unreadCount, setUnreadCount] = useState(0);
|
|
99
|
-
const [open, setOpen] = useState(false);
|
|
100
97
|
|
|
101
98
|
const load = useCallback(async () => {
|
|
102
99
|
try {
|
|
@@ -168,17 +165,8 @@ export function SuiteNotificationsProvider({
|
|
|
168
165
|
};
|
|
169
166
|
}, [enabled, load, pollMs, cacheKey]);
|
|
170
167
|
|
|
171
|
-
const setOpenAndRefresh = useCallback(
|
|
172
|
-
(next: boolean) => {
|
|
173
|
-
setOpen(next);
|
|
174
|
-
if (next) void load();
|
|
175
|
-
},
|
|
176
|
-
[load],
|
|
177
|
-
);
|
|
178
|
-
|
|
179
168
|
const select = useCallback(
|
|
180
169
|
(notification: SuiteNotification) => {
|
|
181
|
-
setOpen(false);
|
|
182
170
|
if (!notification.read_at) {
|
|
183
171
|
setNotifications((prev) =>
|
|
184
172
|
prev.map((item) =>
|
|
@@ -257,21 +245,11 @@ export function SuiteNotificationsProvider({
|
|
|
257
245
|
() => ({
|
|
258
246
|
notifications,
|
|
259
247
|
unreadCount,
|
|
260
|
-
open,
|
|
261
|
-
setOpen: setOpenAndRefresh,
|
|
262
248
|
refresh: () => void load(),
|
|
263
249
|
select,
|
|
264
250
|
markAllRead,
|
|
265
251
|
}),
|
|
266
|
-
[
|
|
267
|
-
notifications,
|
|
268
|
-
unreadCount,
|
|
269
|
-
open,
|
|
270
|
-
setOpenAndRefresh,
|
|
271
|
-
load,
|
|
272
|
-
select,
|
|
273
|
-
markAllRead,
|
|
274
|
-
],
|
|
252
|
+
[notifications, unreadCount, load, select, markAllRead],
|
|
275
253
|
);
|
|
276
254
|
|
|
277
255
|
return (
|