@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.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
- open,
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: setOpen,
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: () => select(n),
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 useState3 } from "react";
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] = useState3(false);
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 useState4 } from "react";
1460
+ import { useEffect as useEffect3, useState as useState5 } from "react";
1472
1461
  function useIdleMount(timeoutMs = 1200) {
1473
- const [ready, setReady] = useState4(false);
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 useState5 } from "react";
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] = useState5(open);
1521
- const [shown, setShown] = useState5(open);
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 useState6
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] = useState6(false);
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 useState7
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] = useState7(() => {
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 useState8
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] = useState8(false);
2573
- const [resolvingId, setResolvingId] = useState8("");
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] = useState8("");
2584
- const [messages, setMessages] = useState8([]);
2585
- const [loading, setLoading] = useState8(false);
2586
- const [hydrating, setHydrating] = useState8(false);
2587
- const [error, setError] = useState8("");
2588
- const [atBottom, setAtBottom] = useState8(true);
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] = useState8(null);
2594
- const [editDraft, setEditDraft] = useState8("");
2595
- const [copiedIndex, setCopiedIndex] = useState8(null);
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 useState9 } from "react";
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] = useState9(false);
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 useState10
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] = useState10(fallbackWidth);
3454
- const [narrowViewport, setNarrowViewport] = useState10(false);
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 useState11
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] = useState11("");
4203
- const [category, setCategory] = useState11("all");
4204
- const [categoryQuery, setCategoryQuery] = useState11("");
4205
- const [categoryMenuOpen, setCategoryMenuOpen] = useState11(false);
4206
- const [expanded, setExpanded] = useState11(null);
4207
- const [bridgeOnlyInternal, setBridgeOnlyInternal] = useState11(false);
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] = useState11(null);
4221
- const [authItem, setAuthItem] = useState11(null);
4222
- const [authValues, setAuthValues] = useState11({});
4223
- const [authLoading, setAuthLoading] = useState11(false);
4224
- const [authSubmitting, setAuthSubmitting] = useState11(false);
4225
- const [authError, setAuthError] = useState11(null);
4226
- const [connectionError, setConnectionError] = useState11(null);
4227
- const [itemToDisconnect, setItemToDisconnect] = useState11(null);
4228
- const [disconnecting, setDisconnecting] = useState11(false);
4229
- const [disconnectError, setDisconnectError] = useState11(null);
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 useState12 } from "react";
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] = useState12(false);
4954
- const [name, setName] = useState12("");
4955
- const [trigger, setTrigger] = useState12("");
4956
- const [actionType, setActionType] = useState12("create_tides_task");
4957
- const [projectId, setProjectId] = useState12("");
4958
- const [minutes, setMinutes] = useState12("");
4959
- const [priority, setPriority] = useState12("low");
4960
- const [submitting, setSubmitting] = useState12(false);
4961
- const [formError, setFormError] = useState12(null);
4962
- const [busyId, setBusyId] = useState12(null);
4963
- const [ruleToDelete, setRuleToDelete] = useState12(null);
4964
- const [deleteError, setDeleteError] = useState12(null);
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 useState14
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 useState13
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] = useState13([]);
5495
- const [typeFilter, setTypeFilter] = useState13("all");
5496
- const [collectionFilter, setCollectionFilter] = useState13("");
5497
- const [libraryOpen, setLibraryOpen] = useState13(false);
5498
- const [libraryQuery, setLibraryQuery] = useState13("");
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] = useState13([]);
5501
- const [total, setTotal] = useState13(0);
5502
- const [page, setPage] = useState13(1);
5503
- const [query, setQuery] = useState13("");
5504
- const [loading, setLoading] = useState13(true);
5505
- const [loadingMore, setLoadingMore] = useState13(false);
5506
- const [error, setError] = useState13(null);
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] = useState14("");
5917
- const [selectedClientId, setSelectedClientId] = useState14(null);
5918
- const [mobileDetail, setMobileDetail] = useState14(false);
5919
- const [editing, setEditing] = useState14(null);
5920
- const [draft, setDraft] = useState14({
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] = useState14(null);
5926
- const [preview, setPreview] = useState14(null);
5927
- const [libraryOpen, setLibraryOpen] = useState14(false);
5928
- const [draftArchived, setDraftArchived] = useState14(false);
5929
- const [confirming, setConfirming] = useState14(null);
5930
- const [saving, setSaving] = useState14(false);
5931
- const [mutationError, setMutationError] = useState14(null);
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.14",
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
- open,
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={setOpen}
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={() => select(n)}
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 (