@tuturuuu/ui 0.32.0 → 0.34.0

package/src/components/ui/text-editor/task-item-checkbox-view.tsx

@@ -3,7 +3,8 @@
 import type { NodeViewProps } from '@tiptap/react';
 import { NodeViewContent } from '@tiptap/react';
 import { cn } from '@tuturuuu/utils/format';
-import { useCallback, useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useMemo, useSyncExternalStore } from 'react';
 import { DraggableNodeContainer } from './draggable-node-container';
 import {
   areAllMentionedTasksCompleted,
@@ -14,16 +15,31 @@ import {
   type TriStateChecked,
   useMentionedTaskStatuses,
 } from './task-item-checkbox';
+import { TaskItemStatusPicker } from './task-item-status-picker';
 
 export function TaskItemCheckboxContent({
   node,
   getPos,
   editor,
 }: NodeViewProps) {
-  const [manualOverride, setManualOverride] = useState<TriStateChecked | null>(
-    null
+  const t = useTranslations('common.checklist');
+  const subscribe = useCallback(
+    (notify: () => void) => {
+      // setEditable emits update without changing the document/node view.
+      editor.on('update', notify);
+      editor.on('transaction', notify);
+      return () => {
+        editor.off('update', notify);
+        editor.off('transaction', notify);
+      };
+    },
+    [editor]
+  );
+  const isEditable = useSyncExternalStore(
+    subscribe,
+    () => editor.isEditable,
+    () => false
   );
-
   const taskMentionIds = useMemo(() => {
     return extractTaskMentionIds(node);
   }, [node]);
@@ -40,187 +56,185 @@ export function TaskItemCheckboxContent({
 
   const checkboxState = useMemo((): TriStateChecked => {
     return resolveCheckboxState({
-      manualOverride,
+      manualOverride: null,
       nodeChecked: node.attrs.checked,
       allMentionedTasksCompleted,
     });
-  }, [manualOverride, node.attrs.checked, allMentionedTasksCompleted]);
+  }, [node.attrs.checked, allMentionedTasksCompleted]);
 
   const isChecked = checkboxState === true;
   const isIndeterminate = checkboxState === 'indeterminate';
 
-  const handleCheckboxCycle = useCallback(() => {
-    if (!editor.isEditable) return;
-
-    const pos = getPos();
-    if (typeof pos !== 'number') return;
-
-    const nextState = getNextTriState(checkboxState);
-
-    setManualOverride(nextState);
-
-    editor.commands.command(({ tr }) => {
-      tr.setNodeMarkup(pos, undefined, {
-        ...node.attrs,
-        checked: nextState,
+  const setCheckboxState = useCallback(
+    (
+      checked: TriStateChecked | ((current: TriStateChecked) => TriStateChecked)
+    ) => {
+      if (!editor.isEditable) return;
+      const pos = getPos();
+      if (typeof pos !== 'number') return;
+      editor.commands.command(({ tr }) => {
+        const currentNode = tr.doc.nodeAt(pos);
+        if (currentNode?.type.name !== 'taskItem') return false;
+        // Node view props can lag behind a transaction (e.g. a picker click).
+        // Cycle from the document so rapid clicks never repeat a stale state.
+        const current = resolveCheckboxState({
+          manualOverride: null,
+          nodeChecked: currentNode.attrs.checked,
+          allMentionedTasksCompleted,
+        });
+        tr.setNodeMarkup(pos, undefined, {
+          ...currentNode.attrs,
+          checked: typeof checked === 'function' ? checked(current) : checked,
+        });
+        return true;
       });
-      return true;
-    });
-  }, [editor, getPos, node.attrs, checkboxState]);
-
-  const handleCheckboxPointerDown = useCallback(
-    (event: React.PointerEvent<HTMLButtonElement>) => {
-      if (!event.isPrimary || event.button !== 0) return;
-      event.preventDefault();
-      event.stopPropagation();
-      handleCheckboxCycle();
-    },
-    [handleCheckboxCycle]
-  );
-
-  const handleCheckboxKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLButtonElement>) => {
-      if (event.key !== 'Enter' && event.key !== ' ') return;
-      event.preventDefault();
-      event.stopPropagation();
-      handleCheckboxCycle();
     },
-    [handleCheckboxCycle]
+    [editor, getPos, allMentionedTasksCompleted]
   );
 
   return (
-    <div className="flex items-start gap-2">
+    <div className="flex min-w-0 flex-1 items-start gap-2">
       <div
         className="task-list-checkbox-label flex shrink-0 select-none pt-2.5"
         contentEditable={false}
       >
-        {/* biome-ignore lint/a11y/useSemanticElements: a button avoids native checkbox state changes while ProseMirror owns the tri-state document update */}
-        <button
-          type="button"
-          role="checkbox"
-          aria-label="Task item status"
-          aria-checked={isIndeterminate ? 'mixed' : isChecked}
-          aria-disabled={!editor.isEditable}
-          onPointerDown={handleCheckboxPointerDown}
-          onKeyDown={handleCheckboxKeyDown}
-          className={cn(
-            'task-list-checkbox flex size-5 items-center justify-center',
-            'cursor-pointer rounded-md border-2 bg-background',
-            'transition-[color,background-color,border-color,box-shadow,transform] duration-150 active:scale-95',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 focus-visible:ring-offset-2',
-            !editor.isEditable && 'cursor-default opacity-70',
-            !completedTaskColor && [
-              'border-input',
-              'hover:scale-105 hover:border-dynamic-gray hover:bg-dynamic-gray/10',
-              'focus-visible:border-dynamic-gray',
-              isChecked &&
-                'border-dynamic-green bg-dynamic-green/20 hover:border-dynamic-green hover:bg-dynamic-green/10 focus-visible:border-dynamic-green focus-visible:ring-dynamic-green/30',
-              isIndeterminate &&
-                'border-dynamic-orange bg-dynamic-orange/20 hover:border-dynamic-orange hover:bg-dynamic-orange/10 focus-visible:border-dynamic-orange focus-visible:ring-dynamic-orange/30',
-            ],
-            completedTaskColor === 'red' && [
-              'border-dynamic-red/50',
-              'hover:scale-105 hover:border-dynamic-red hover:bg-dynamic-red/10',
-              'focus:border-dynamic-red focus:outline-none focus:ring-2 focus:ring-dynamic-red/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-red bg-dynamic-red/20',
-            ],
-            completedTaskColor === 'orange' && [
-              'border-dynamic-orange/50',
-              'hover:scale-105 hover:border-dynamic-orange hover:bg-dynamic-orange/10',
-              'focus:border-dynamic-orange focus:outline-none focus:ring-2 focus:ring-dynamic-orange/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-orange bg-dynamic-orange/20',
-            ],
-            completedTaskColor === 'yellow' && [
-              'border-dynamic-yellow/50',
-              'hover:scale-105 hover:border-dynamic-yellow hover:bg-dynamic-yellow/10',
-              'focus:border-dynamic-yellow focus:outline-none focus:ring-2 focus:ring-dynamic-yellow/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-yellow bg-dynamic-yellow/20',
-            ],
-            completedTaskColor === 'green' && [
-              'border-dynamic-green/50',
-              'hover:scale-105 hover:border-dynamic-green hover:bg-dynamic-green/10',
-              'focus:border-dynamic-green focus:outline-none focus:ring-2 focus:ring-dynamic-green/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-green bg-dynamic-green/20',
-            ],
-            completedTaskColor === 'cyan' && [
-              'border-dynamic-cyan/50',
-              'hover:scale-105 hover:border-dynamic-cyan hover:bg-dynamic-cyan/10',
-              'focus:border-dynamic-cyan focus:outline-none focus:ring-2 focus:ring-dynamic-cyan/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-cyan bg-dynamic-cyan/20',
-            ],
-            completedTaskColor === 'blue' && [
-              'border-dynamic-blue/50',
-              'hover:scale-105 hover:border-dynamic-blue hover:bg-dynamic-blue/10',
-              'focus:border-dynamic-blue focus:outline-none focus:ring-2 focus:ring-dynamic-blue/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-blue bg-dynamic-blue/20',
-            ],
-            completedTaskColor === 'purple' && [
-              'border-dynamic-purple/50',
-              'hover:scale-105 hover:border-dynamic-purple hover:bg-dynamic-purple/10',
-              'focus:border-dynamic-purple focus:outline-none focus:ring-2 focus:ring-dynamic-purple/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-purple bg-dynamic-purple/20',
-            ],
-            completedTaskColor === 'pink' && [
-              'border-dynamic-pink/50',
-              'hover:scale-105 hover:border-dynamic-pink hover:bg-dynamic-pink/10',
-              'focus:border-dynamic-pink focus:outline-none focus:ring-2 focus:ring-dynamic-pink/30 focus:ring-offset-2',
-              (isChecked || isIndeterminate) &&
-                'border-dynamic-pink bg-dynamic-pink/20',
-            ]
-          )}
+        <TaskItemStatusPicker
+          state={checkboxState}
+          disabled={!isEditable}
+          onSelect={setCheckboxState}
         >
-          {isChecked && (
-            <svg
-              className={cn(
-                'h-3.5 w-3.5',
-                completedTaskColor ? 'text-foreground' : 'text-dynamic-green'
-              )}
-              viewBox="0 0 16 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-            >
-              <path
-                d="M4 8l2.5 2.5L12 5"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          )}
-          {isIndeterminate && (
-            <svg
-              className={cn(
-                'h-3.5 w-3.5',
-                completedTaskColor ? 'text-foreground' : 'text-dynamic-orange'
-              )}
-              viewBox="0 0 16 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-            >
-              <path
-                d="M4 8h8"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-              />
-            </svg>
-          )}
-        </button>
+          {/* biome-ignore lint/a11y/useSemanticElements: a button avoids native checkbox state changes while ProseMirror owns the tri-state document update */}
+          <button
+            type="button"
+            role="checkbox"
+            aria-label={t('status')}
+            aria-keyshortcuts="ArrowDown"
+            aria-checked={isIndeterminate ? 'mixed' : isChecked}
+            aria-disabled={!isEditable}
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={(event) => {
+              event.stopPropagation();
+              setCheckboxState(getNextTriState);
+            }}
+            className={cn(
+              'task-list-checkbox flex size-5 items-center justify-center',
+              'cursor-pointer rounded-md border-2 bg-background',
+              'transition-[color,background-color,border-color,box-shadow,transform] duration-150 active:scale-95',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 focus-visible:ring-offset-2',
+              !isEditable && 'cursor-default opacity-70',
+              !completedTaskColor && [
+                'border-muted-foreground/50',
+                'hover:scale-105 hover:border-dynamic-gray hover:bg-dynamic-gray/10',
+                'focus-visible:border-dynamic-gray',
+                isChecked &&
+                  'border-dynamic-green bg-dynamic-green/20 hover:border-dynamic-green hover:bg-dynamic-green/10 focus-visible:border-dynamic-green focus-visible:ring-dynamic-green/30',
+                isIndeterminate &&
+                  'border-dynamic-orange bg-dynamic-orange/20 hover:border-dynamic-orange hover:bg-dynamic-orange/10 focus-visible:border-dynamic-orange focus-visible:ring-dynamic-orange/30',
+              ],
+              completedTaskColor === 'red' && [
+                'border-dynamic-red/50',
+                'hover:scale-105 hover:border-dynamic-red hover:bg-dynamic-red/10',
+                'focus:border-dynamic-red focus:outline-none focus:ring-2 focus:ring-dynamic-red/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-red bg-dynamic-red/20',
+              ],
+              completedTaskColor === 'orange' && [
+                'border-dynamic-orange/50',
+                'hover:scale-105 hover:border-dynamic-orange hover:bg-dynamic-orange/10',
+                'focus:border-dynamic-orange focus:outline-none focus:ring-2 focus:ring-dynamic-orange/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-orange bg-dynamic-orange/20',
+              ],
+              completedTaskColor === 'yellow' && [
+                'border-dynamic-yellow/50',
+                'hover:scale-105 hover:border-dynamic-yellow hover:bg-dynamic-yellow/10',
+                'focus:border-dynamic-yellow focus:outline-none focus:ring-2 focus:ring-dynamic-yellow/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-yellow bg-dynamic-yellow/20',
+              ],
+              completedTaskColor === 'green' && [
+                'border-dynamic-green/50',
+                'hover:scale-105 hover:border-dynamic-green hover:bg-dynamic-green/10',
+                'focus:border-dynamic-green focus:outline-none focus:ring-2 focus:ring-dynamic-green/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-green bg-dynamic-green/20',
+              ],
+              completedTaskColor === 'cyan' && [
+                'border-dynamic-cyan/50',
+                'hover:scale-105 hover:border-dynamic-cyan hover:bg-dynamic-cyan/10',
+                'focus:border-dynamic-cyan focus:outline-none focus:ring-2 focus:ring-dynamic-cyan/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-cyan bg-dynamic-cyan/20',
+              ],
+              completedTaskColor === 'blue' && [
+                'border-dynamic-blue/50',
+                'hover:scale-105 hover:border-dynamic-blue hover:bg-dynamic-blue/10',
+                'focus:border-dynamic-blue focus:outline-none focus:ring-2 focus:ring-dynamic-blue/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-blue bg-dynamic-blue/20',
+              ],
+              completedTaskColor === 'purple' && [
+                'border-dynamic-purple/50',
+                'hover:scale-105 hover:border-dynamic-purple hover:bg-dynamic-purple/10',
+                'focus:border-dynamic-purple focus:outline-none focus:ring-2 focus:ring-dynamic-purple/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-purple bg-dynamic-purple/20',
+              ],
+              completedTaskColor === 'pink' && [
+                'border-dynamic-pink/50',
+                'hover:scale-105 hover:border-dynamic-pink hover:bg-dynamic-pink/10',
+                'focus:border-dynamic-pink focus:outline-none focus:ring-2 focus:ring-dynamic-pink/30 focus:ring-offset-2',
+                (isChecked || isIndeterminate) &&
+                  'border-dynamic-pink bg-dynamic-pink/20',
+              ]
+            )}
+          >
+            {isChecked && (
+              <svg
+                className={cn(
+                  'h-3.5 w-3.5',
+                  completedTaskColor ? 'text-foreground' : 'text-dynamic-green'
+                )}
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path
+                  d="M4 8l2.5 2.5L12 5"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            )}
+            {isIndeterminate && (
+              <svg
+                className={cn(
+                  'h-3.5 w-3.5',
+                  completedTaskColor ? 'text-foreground' : 'text-dynamic-orange'
+                )}
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path
+                  d="M4 8h8"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                />
+              </svg>
+            )}
+          </button>
+        </TaskItemStatusPicker>
       </div>
 
       <NodeViewContent
         className={cn(
-          'transition-opacity duration-150',
+          'min-w-0 flex-1 cursor-text caret-foreground transition-opacity duration-150',
           isChecked && 'task-content-faded'
         )}
       />

package/src/components/ui/text-editor/task-item-status-picker.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { Check, Minus, Square } from '@tuturuuu/icons';
+import { useTranslations } from 'next-intl';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import { Popover, PopoverAnchor, PopoverContent } from '../popover';
+import type { TriStateChecked } from './task-item-checkbox';
+
+export function TaskItemStatusPicker({
+  children,
+  state,
+  disabled,
+  onSelect,
+}: {
+  children: ReactNode;
+  state: TriStateChecked;
+  disabled: boolean;
+  onSelect: (state: TriStateChecked) => void;
+}) {
+  const t = useTranslations('common.checklist');
+  const [open, setOpen] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const keyboardOpen = useRef(false);
+  const anchor = useRef<HTMLDivElement>(null);
+  const cancelTimer = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  useEffect(() => {
+    if (!disabled) return;
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+    keyboardOpen.current = false;
+    setOpen(false);
+  }, [disabled]);
+  const closeSoon = () => {
+    cancelTimer();
+    if (keyboardOpen.current) return;
+    timer.current = setTimeout(() => setOpen(false), 200);
+  };
+  const options = [
+    { value: false, label: t('unchecked'), Icon: Square },
+    { value: 'indeterminate', label: t('in_progress'), Icon: Minus },
+    { value: true, label: t('completed'), Icon: Check },
+  ] as const;
+
+  return (
+    <Popover open={open && !disabled} onOpenChange={setOpen}>
+      <PopoverAnchor asChild>
+        <div
+          ref={anchor}
+          onPointerEnter={(event) => {
+            if (disabled || event.pointerType === 'touch') return;
+            cancelTimer();
+            keyboardOpen.current = false;
+            timer.current = setTimeout(() => setOpen(true), 500);
+          }}
+          onContextMenu={(event) => {
+            if (disabled) return;
+            event.preventDefault();
+            cancelTimer();
+            keyboardOpen.current = true;
+            setOpen(true);
+          }}
+          onPointerLeave={closeSoon}
+          onKeyDown={(event) => {
+            if (disabled || event.key !== 'ArrowDown') return;
+            event.preventDefault();
+            event.stopPropagation();
+            cancelTimer();
+            keyboardOpen.current = true;
+            setOpen(true);
+          }}
+        >
+          {children}
+        </div>
+      </PopoverAnchor>
+      <PopoverContent
+        side="top"
+        align="start"
+        sideOffset={6}
+        className="w-auto max-w-[calc(100vw-2rem)] p-1"
+        contentEditable={false}
+        aria-label={t('status')}
+        onPointerEnter={cancelTimer}
+        onPointerLeave={closeSoon}
+        onFocusCapture={cancelTimer}
+        onInteractOutside={() => {
+          keyboardOpen.current = false;
+          cancelTimer();
+        }}
+        onOpenAutoFocus={(event) => {
+          if (!keyboardOpen.current) event.preventDefault();
+        }}
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+          if (keyboardOpen.current)
+            anchor.current?.querySelector('button')?.focus();
+        }}
+      >
+        <div className="flex items-center gap-0.5">
+          {options.map(({ value, label, Icon }) => (
+            <button
+              key={String(value)}
+              type="button"
+              aria-label={label}
+              aria-pressed={state === value}
+              className="flex min-h-9 items-center gap-1.5 rounded-sm px-2 text-muted-foreground text-xs hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-accent aria-pressed:text-accent-foreground"
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => {
+                onSelect(value);
+                cancelTimer();
+                setOpen(false);
+              }}
+            >
+              <Icon className="size-3.5 shrink-0" />
+              {label}
+            </button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/hooks/__tests__/use-calendar-sync.test.tsx

@@ -50,7 +50,7 @@ function renderCalendarSync({
     </QueryClientProvider>
   );
 
-  return renderHook(() => useCalendarSync(), { wrapper });
+  return { ...renderHook(() => useCalendarSync(), { wrapper }), queryClient };
 }
 
 function mockCalendarFetch(
@@ -570,3 +570,22 @@ describe('CalendarSyncProvider optimistic visible events', () => {
     });
   });
 });
+
+it('refetches invalidated event ranges even while the local range cache is fresh', async () => {
+  const fetchMock = mockCalendarFetch([createEvent('before')]);
+  vi.stubGlobal('fetch', fetchMock);
+  const { result, queryClient } = renderCalendarSync();
+  act(() => result.current.setDates(createWeekDates('2026-06-22')));
+  await waitFor(() =>
+    expect(result.current.events.map((event) => event.id)).toEqual(['before'])
+  );
+  fetchMock.mockImplementation(mockCalendarFetch([createEvent('after')]));
+  await act(() =>
+    queryClient.invalidateQueries({
+      queryKey: ['databaseCalendarEvents', 'workspace-1'],
+    })
+  );
+  await waitFor(() =>
+    expect(result.current.events.map((event) => event.id)).toEqual(['after'])
+  );
+});