@tuturuuu/ui 0.27.0 → 0.28.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [0.28.1](https://github.com/tutur3u/platform/compare/ui-v0.28.0...ui-v0.28.1) (2026-08-16)
+
+
+### Bug Fixes
+
+* **tasks:** preserve rich paste and responsive dialogs ([0a6c5a3](https://github.com/tutur3u/platform/commit/0a6c5a362f51b475c2e8fe984eb3569a46a878ee))
+
+## [0.28.0](https://github.com/tutur3u/platform/compare/ui-v0.27.0...ui-v0.28.0) (2026-08-15)
+
+
+### Features
+
+* **tasks:** add toggle blocks and repair editor indentation ([c0805c8](https://github.com/tutur3u/platform/commit/c0805c8cc0e26c172eb6f46582e267b084289501))
+
+
+### Bug Fixes
+
+* **contacts:** restore group tag labels ([9fbcb25](https://github.com/tutur3u/platform/commit/9fbcb25bd44fcedcfad4a463599940e9497ebc06))
+* **notifications:** prevent pre-hydration bell clicks ([6adba83](https://github.com/tutur3u/platform/commit/6adba83f3db63817cc64e332c33a6a2939e0bf83))
+* **ui:** support button slots with TypeScript 7 ([3bdc636](https://github.com/tutur3u/platform/commit/3bdc6368daf0be48719a479c63a6325d414233d6))
+
 ## [0.27.0](https://github.com/tutur3u/platform/compare/ui-v0.26.1...ui-v0.27.0) (2026-08-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.27.0",
+  "version": "0.28.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -64,6 +64,7 @@
     "@tiptap/extension-collaboration": "3.30.0",
     "@tiptap/extension-collaboration-caret": "3.30.0",
     "@tiptap/extension-color": "3.30.0",
+    "@tiptap/extension-details": "3.30.0",
     "@tiptap/extension-drag-handle": "3.30.0",
     "@tiptap/extension-drag-handle-react": "3.30.0",
     "@tiptap/extension-highlight": "3.30.0",
@@ -90,9 +91,9 @@
     "@tuturuuu/apis": "0.11.2",
     "@tuturuuu/hooks": "0.1.1",
     "@tuturuuu/icons": "0.1.0",
-    "@tuturuuu/internal-api": "0.30.0",
+    "@tuturuuu/internal-api": "0.31.0",
     "@tuturuuu/supabase": "0.5.0",
-    "@tuturuuu/utils": "0.25.0",
+    "@tuturuuu/utils": "0.25.2",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",

package/src/components/ui/button.tsx

@@ -46,15 +46,19 @@ function Button({
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : 'button';
+  const classNames = cn(buttonVariants({ variant, size, className }));
 
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
+  if (asChild) {
+    return (
+      <Slot
+        data-slot="button"
+        className={classNames}
+        {...(props as React.ComponentProps<typeof Slot>)}
+      />
+    );
+  }
+
+  return <button data-slot="button" className={classNames} {...props} />;
 }
 
 type ButtonProps = React.ComponentProps<typeof Button>;

package/src/components/ui/calendar.tsx

@@ -189,7 +189,7 @@ function Calendar({
   };
 
   return (
-    <div className="space-y-4">
+    <div className="min-w-0 space-y-4">
       <div>
         <div className="mb-4 flex items-center justify-between gap-2 border-b px-2 pb-4">
           <button
@@ -318,21 +318,21 @@ function Calendar({
             root: 'bg-transparent',
             months: 'flex flex-col',
             month:
-              'space-y-4 max-w-[calc(100vw-4rem)] text-center p-2 font-semibold shrink-0',
+              'w-full min-w-0 max-w-[calc(100vw-4rem)] shrink-0 space-y-4 p-2 text-center font-semibold',
             month_caption: 'hidden',
             nav: 'hidden',
             button_next: 'hidden',
             button_previous: 'hidden',
             month_grid: 'w-full border-collapse',
             weeks: 'flex flex-col gap-1',
-            week: 'grid grid-cols-7 gap-1 mt-2',
-            weekdays: 'grid w-full grid-cols-7 gap-1 mb-2',
+            week: 'mt-2 grid grid-cols-7 gap-0.5 @[20rem]:gap-1',
+            weekdays: 'mb-2 grid w-full grid-cols-7 gap-0.5 @[20rem]:gap-1',
             weekday:
               'text-muted-foreground rounded-md font-normal text-[0.8rem] text-center',
-            day: 'text-center text-sm p-0 relative w-9',
+            day: 'relative min-w-0 p-0 text-center text-sm',
             day_button: cn(
               buttonVariants({ variant: 'ghost' }),
-              'h-9 w-full rounded-md p-0 font-normal transition-colors duration-300',
+              'aspect-square h-auto min-h-8 w-full rounded-md p-0 font-normal transition-colors duration-300',
               'aria-selected:bg-primary aria-selected:text-primary-foreground',
               'hover:bg-accent/50 hover:text-accent-foreground',
               'hover:aria-selected:bg-primary hover:aria-selected:text-primary-foreground'

package/src/components/ui/color-picker.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ColorPicker } from './color-picker';
+
+vi.mock('../../hooks/use-dom-resolved-theme', () => ({
+  useDomResolvedTheme: () => 'light',
+}));
+
+describe('ColorPicker', () => {
+  it('renders the supplied read-only label', () => {
+    render(<ColorPicker text="Visible workspace tag" value="#123456" />);
+
+    expect(
+      screen.getByRole('button', { name: 'Visible workspace tag' })
+    ).toBeVisible();
+  });
+
+  it('keeps the icon-only control when no label is supplied', () => {
+    const { container } = render(<ColorPicker value="#123456" />);
+
+    expect(container.querySelector('button svg')).toBeTruthy();
+  });
+});

package/src/components/ui/color-picker.tsx

@@ -65,7 +65,7 @@ const ColorPicker = forwardRef<
             variant="outline"
             disabled={disabled}
           >
-            <TextIcon className="h-4 w-4" />
+            {text || <TextIcon className="h-4 w-4" />}
           </Button>
         </PopoverTrigger>
         <PopoverContent className="flex w-full flex-col items-center justify-center gap-4">

package/src/components/ui/custom/notification-popover-client.tsx

@@ -41,7 +41,7 @@ import {
   dispatchRequestOpenTask,
   waitForTaskOpenResult,
 } from '@tuturuuu/ui/lib/task-open-events';
-import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
+import { Popover, PopoverContent } from '@tuturuuu/ui/popover';
 import { toast } from '@tuturuuu/ui/sonner';
 import { cn } from '@tuturuuu/utils/format';
 import dayjs from 'dayjs';
@@ -49,6 +49,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import Link from 'next/link';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { NotificationPopoverTriggerButton } from './notification-popover-trigger';
 
 dayjs.extend(relativeTime);
 
@@ -190,24 +191,10 @@ export default function NotificationPopoverClient({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          aria-label={notificationsText}
-          title={notificationsText}
-          className="group relative flex size-10 flex-none transition-all"
-        >
-          <Bell className="h-6 w-6" />
-          {unreadCount > 0 && (
-            <div className="absolute top-1 right-2 flex h-1.5 w-1.5 flex-none items-center justify-center rounded-full bg-dynamic-red p-1 text-center font-semibold text-xs transition-all group-hover:-top-2 group-hover:-right-1 group-hover:h-5 group-hover:w-auto group-hover:px-1.5 group-hover:text-background">
-              <div className="relative opacity-0 group-hover:opacity-100">
-                {unreadCount > 99 ? '99+' : unreadCount}
-              </div>
-            </div>
-          )}
-        </Button>
-      </PopoverTrigger>
+      <NotificationPopoverTriggerButton
+        notificationsText={notificationsText}
+        unreadCount={unreadCount}
+      />
       <PopoverContent
         className="w-100 overflow-hidden rounded-xl border p-0 shadow-xl"
         align="end"

package/src/components/ui/custom/notification-popover-trigger.test.tsx

@@ -0,0 +1,37 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Popover } from '@tuturuuu/ui/popover';
+import { renderToString } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import { NotificationPopoverTriggerButton } from './notification-popover-trigger';
+
+function TriggerHarness({ unreadCount = 0 }: { unreadCount?: number }) {
+  return (
+    <Popover>
+      <NotificationPopoverTriggerButton
+        notificationsText="Notifications"
+        unreadCount={unreadCount}
+      />
+    </Popover>
+  );
+}
+
+describe('NotificationPopoverTriggerButton', () => {
+  it('disables the server-rendered trigger until event handlers are attached', () => {
+    const markup = renderToString(<TriggerHarness unreadCount={1} />);
+
+    expect(markup).toContain('disabled=""');
+  });
+
+  it('enables the trigger after hydration and opens the popover on the first click', async () => {
+    render(<TriggerHarness unreadCount={1} />);
+
+    const trigger = screen.getByRole('button', { name: 'Notifications' });
+    await waitFor(() => expect(trigger).toBeEnabled());
+    fireEvent.click(trigger);
+
+    await waitFor(() =>
+      expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    );
+  });
+});

package/src/components/ui/custom/notification-popover-trigger.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Bell } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import { PopoverTrigger } from '@tuturuuu/ui/popover';
+import { useEffect, useState } from 'react';
+
+interface NotificationPopoverTriggerProps {
+  notificationsText: string;
+  unreadCount: number;
+}
+
+export function NotificationPopoverTriggerButton({
+  notificationsText,
+  unreadCount,
+}: NotificationPopoverTriggerProps) {
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  useEffect(() => {
+    setIsHydrated(true);
+  }, []);
+
+  return (
+    <PopoverTrigger asChild>
+      <Button
+        variant="ghost"
+        size="icon"
+        aria-label={notificationsText}
+        title={notificationsText}
+        disabled={!isHydrated}
+        className="group relative flex size-10 flex-none transition-all"
+      >
+        <Bell className="h-6 w-6" />
+        {unreadCount > 0 && (
+          <div className="absolute top-1 right-2 flex h-1.5 w-1.5 flex-none items-center justify-center rounded-full bg-dynamic-red p-1 text-center font-semibold text-xs transition-all group-hover:-top-2 group-hover:-right-1 group-hover:h-5 group-hover:w-auto group-hover:px-1.5 group-hover:text-background">
+            <div className="relative opacity-0 group-hover:opacity-100">
+              {unreadCount > 99 ? '99+' : unreadCount}
+            </div>
+          </div>
+        )}
+      </Button>
+    </PopoverTrigger>
+  );
+}

package/src/components/ui/date-time-picker-layout.ts

@@ -0,0 +1,6 @@
+export const DATE_TIME_PICKER_LAYOUT_CLASS_NAMES = {
+  calendar: 'min-w-0 overflow-x-auto p-2',
+  container: '@container min-w-0 overflow-hidden',
+  layout: 'flex min-w-0 flex-col @[34rem]:flex-row',
+  time: 'flex min-w-0 flex-col gap-3 border-t p-3 @[34rem]:w-52 @[34rem]:shrink-0 @[34rem]:border-t-0 @[34rem]:border-l',
+} as const;

package/src/components/ui/date-time-picker.test.tsx

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+import { DATE_TIME_PICKER_LAYOUT_CLASS_NAMES } from './date-time-picker-layout';
+
+describe('DateTimePicker responsive layout', () => {
+  it('switches calendar and time controls from the picker container width', () => {
+    expect(DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.container).toContain(
+      '@container'
+    );
+    expect(DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.layout).toContain(
+      '@[34rem]:flex-row'
+    );
+    expect(DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.time).toContain(
+      '@[34rem]:border-l'
+    );
+    expect(DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.layout).not.toContain('sm:');
+    expect(DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.time).not.toContain('sm:');
+  });
+
+  it('contains narrow calendars instead of letting them escape the dialog', () => {
+    expect(DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.calendar).toContain('min-w-0');
+    expect(DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.calendar).toContain(
+      'overflow-x-auto'
+    );
+  });
+});

package/src/components/ui/date-time-picker.tsx

@@ -31,6 +31,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { DATE_TIME_PICKER_LAYOUT_CLASS_NAMES } from './date-time-picker-layout';
 import { Separator } from './separator';
 
 interface DateTimePickerProps {
@@ -63,7 +64,6 @@ interface DateTimePickerProps {
   };
 }
 
-// Utility to find the nearest scrollable parent
 function getScrollableParent(node: HTMLElement | null): HTMLElement | null {
   if (!node) return null;
   let parent = node.parentElement;
@@ -530,7 +530,7 @@ export function DateTimePicker({
       : undefined;
 
   const timeControl = showTimeSelect ? (
-    <div className="flex min-w-0 flex-col gap-3 border-t p-3 sm:w-52 sm:border-t-0 sm:border-l">
+    <div className={DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.time}>
       <div className="space-y-1">
         <div className="flex items-center gap-2 font-medium text-sm">
           <Clock className="h-4 w-4 text-muted-foreground" />
@@ -628,7 +628,7 @@ export function DateTimePicker({
 
   // Inline content (used both for inline mode and popover content)
   const pickerContent = (
-    <div className="overflow-hidden">
+    <div className={DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.container}>
       {date && (
         <div className="border-b bg-muted/30 px-3 py-2">
           <div className="flex min-w-0 items-center gap-2 text-sm">
@@ -646,8 +646,8 @@ export function DateTimePicker({
         </div>
       )}
 
-      <div className="flex flex-col sm:flex-row">
-        <div className="p-2">
+      <div className={DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.layout}>
+        <div className={DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.calendar}>
           <Calendar
             mode="single"
             selected={date}

package/src/components/ui/text-editor/__tests__/editor-classes.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { getRichTextEditorClasses } from '../editor-classes';
+
+describe('rich text editor classes', () => {
+  it('keeps regular and checklist nesting visibly indented', () => {
+    const classes = getRichTextEditorClasses({ readOnly: false });
+
+    expect(classes).toContain('[&_li_ul]:ml-6');
+    expect(classes).toContain('[&_li_ol]:ml-6');
+    expect(classes).toContain(
+      '[&_ul[data-type="taskList"]_ul[data-type="taskList"]]:ml-6'
+    );
+    expect(classes).not.toContain(
+      '[&_ul[data-type="taskList"]_ul[data-type="taskList"]]:ml-0'
+    );
+  });
+
+  it('styles toggle summaries by heading level and indents their body', () => {
+    const classes = getRichTextEditorClasses({ readOnly: false });
+
+    expect(classes).toContain('[&_summary[data-heading-level="1"]]:text-4xl');
+    expect(classes).toContain('[&_summary[data-heading-level="2"]]:text-3xl');
+    expect(classes).toContain('[&_summary[data-heading-level="3"]]:text-2xl');
+    expect(classes).toContain('[&_div[data-type="detailsContent"]]:border-l');
+  });
+
+  it('retains read-only interaction guards and custom classes', () => {
+    const classes = getRichTextEditorClasses({
+      className: 'task-description-editor',
+      readOnly: true,
+    });
+
+    expect(classes).toContain('task-description-editor');
+    expect(classes).toContain('[&_.task-list-checkbox]:!pointer-events-none');
+  });
+});

package/src/components/ui/text-editor/__tests__/image-extension-clipboard.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+import { __imageExtensionPrivate } from '../image-extension';
+
+describe('ImageExtension clipboard files', () => {
+  it('keeps images when screenshot clipboards advertise text and HTML', () => {
+    const imageFile = new File(['image'], 'screenshot.png', {
+      type: 'image/png',
+    });
+
+    const images = __imageExtensionPrivate.getClipboardImageFiles([
+      { type: 'text/plain', getAsFile: () => null } as DataTransferItem,
+      { type: 'text/html', getAsFile: () => null } as DataTransferItem,
+      {
+        type: 'image/png',
+        getAsFile: () => imageFile,
+      } as DataTransferItem,
+    ]);
+
+    expect(images).toEqual([imageFile]);
+  });
+});

package/src/components/ui/text-editor/__tests__/inline-task-conversion.test.tsx

@@ -19,6 +19,7 @@ function createEditorStub(): Editor {
     toggleSubscript: vi.fn(() => chain),
     toggleSuperscript: vi.fn(() => chain),
     toggleTaskListSmart: vi.fn(() => chain),
+    toggleDetailsBlock: vi.fn(() => chain),
     run: vi.fn(() => true),
   };
 
@@ -43,4 +44,33 @@ describe('inline task conversion toolbar', () => {
 
     expect(onConvertToTask).toHaveBeenCalledTimes(1);
   });
+
+  it('exposes toggle blocks and delegates the command through the editor chain', () => {
+    const editor = createEditorStub();
+    render(<FixedToolbar editor={editor} />);
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Toggle List or Heading' })
+    );
+
+    const chain = vi.mocked(editor.chain).mock.results[0]?.value as {
+      toggleDetailsBlock: ReturnType<typeof vi.fn>;
+      run: ReturnType<typeof vi.fn>;
+    };
+    expect(chain.toggleDetailsBlock).toHaveBeenCalledTimes(1);
+    expect(chain.run).toHaveBeenCalled();
+  });
+
+  it('uses the localized toggle block label when provided', () => {
+    render(
+      <FixedToolbar
+        editor={createEditorStub()}
+        toggleBlockLabel="Liste ou titre repliable"
+      />
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Liste ou titre repliable' })
+    ).toBeInTheDocument();
+  });
 });

package/src/components/ui/text-editor/__tests__/keyboard.test.ts

@@ -2,7 +2,7 @@ import { Schema } from '@tiptap/pm/model';
 import { EditorState, TextSelection } from '@tiptap/pm/state';
 import type { EditorView } from '@tiptap/pm/view';
 import { describe, expect, it, vi } from 'vitest';
-import { handlePlainEnterFallback } from '../keyboard';
+import { handleListIndentation, handlePlainEnterFallback } from '../keyboard';
 
 const schema = new Schema({
   nodes: {
@@ -15,6 +15,10 @@ const schema = new Schema({
       group: 'block',
       content: 'listItem+',
     },
+    orderedList: {
+      group: 'block',
+      content: 'listItem+',
+    },
     listItem: {
       content: 'paragraph block*',
       defining: true,
@@ -37,11 +41,19 @@ const schema = new Schema({
   marks: {},
 });
 
-function stateWithSelection(doc: ReturnType<typeof schema.node>, offset = 1) {
+function stateWithSelection(
+  doc: ReturnType<typeof schema.node>,
+  offset = 1,
+  targetText?: string
+) {
   let textStart: number | null = null;
 
   doc.descendants((node, pos) => {
-    if (textStart === null && node.isText) {
+    if (
+      textStart === null &&
+      node.isText &&
+      (!targetText || node.text === targetText)
+    ) {
       textStart = pos;
       return false;
     }
@@ -69,6 +81,19 @@ function enterEvent(overrides: Partial<KeyboardEvent> = {}) {
   } as unknown as KeyboardEvent;
 }
 
+function tabEvent(overrides: Partial<KeyboardEvent> = {}) {
+  return {
+    altKey: false,
+    ctrlKey: false,
+    key: 'Tab',
+    metaKey: false,
+    preventDefault: vi.fn(),
+    shiftKey: false,
+    stopPropagation: vi.fn(),
+    ...overrides,
+  } as unknown as KeyboardEvent;
+}
+
 function viewForState(state: EditorState) {
   let currentState = state;
   const view = {
@@ -173,4 +198,149 @@ describe('text editor keyboard handling', () => {
     expect(handlePlainEnterFallback(view, event)).toBe(false);
     expect(event.preventDefault).not.toHaveBeenCalled();
   });
+
+  it.each(['bulletList', 'orderedList'] as const)(
+    'indents and outdents a second %s item with Tab and Shift+Tab',
+    (listType) => {
+      const state = stateWithSelection(
+        schema.node('doc', null, [
+          schema.node(listType, null, [
+            schema.node('listItem', null, [
+              schema.node('paragraph', null, schema.text('first')),
+            ]),
+            schema.node('listItem', null, [
+              schema.node('paragraph', null, schema.text('second')),
+            ]),
+          ]),
+        ]),
+        1,
+        'second'
+      );
+      const { view, getState } = viewForState(state);
+      const indentEvent = tabEvent();
+
+      expect(handleListIndentation(view, indentEvent)).toBe(true);
+      expect(indentEvent.preventDefault).toHaveBeenCalledTimes(1);
+      expect(indentEvent.stopPropagation).toHaveBeenCalledTimes(1);
+      expect(getState().doc.toJSON()).toMatchObject({
+        content: [
+          {
+            type: listType,
+            content: [
+              {
+                type: 'listItem',
+                content: [
+                  { type: 'paragraph' },
+                  {
+                    type: listType,
+                    content: [{ type: 'listItem' }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      });
+
+      const outdentEvent = tabEvent({ shiftKey: true });
+      expect(handleListIndentation(view, outdentEvent)).toBe(true);
+      expect(getState().doc.child(0).childCount).toBe(2);
+    }
+  );
+
+  it('indents and outdents checklist items', () => {
+    const state = stateWithSelection(
+      schema.node('doc', null, [
+        schema.node('taskList', null, [
+          schema.node('taskItem', null, [
+            schema.node('paragraph', null, schema.text('first')),
+          ]),
+          schema.node('taskItem', null, [
+            schema.node('paragraph', null, schema.text('second')),
+          ]),
+        ]),
+      ]),
+      1,
+      'second'
+    );
+    const { view, getState } = viewForState(state);
+
+    expect(handleListIndentation(view, tabEvent())).toBe(true);
+    expect(getState().doc.toJSON()).toMatchObject({
+      content: [
+        {
+          type: 'taskList',
+          content: [
+            {
+              type: 'taskItem',
+              content: [
+                { type: 'paragraph' },
+                {
+                  type: 'taskList',
+                  content: [{ type: 'taskItem' }],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(handleListIndentation(view, tabEvent({ shiftKey: true }))).toBe(
+      true
+    );
+    expect(getState().doc.child(0).childCount).toBe(2);
+  });
+
+  it('does not consume Tab outside a list or when the first item cannot indent', () => {
+    const paragraph = viewForState(
+      stateWithSelection(
+        schema.node('doc', null, [
+          schema.node('paragraph', null, schema.text('plain')),
+        ])
+      )
+    );
+    const paragraphEvent = tabEvent();
+
+    expect(handleListIndentation(paragraph.view, paragraphEvent)).toBe(false);
+    expect(paragraphEvent.preventDefault).not.toHaveBeenCalled();
+
+    const firstItem = viewForState(
+      stateWithSelection(
+        schema.node('doc', null, [
+          schema.node('bulletList', null, [
+            schema.node('listItem', null, [
+              schema.node('paragraph', null, schema.text('only')),
+            ]),
+          ]),
+        ])
+      )
+    );
+    const firstItemEvent = tabEvent();
+
+    expect(handleListIndentation(firstItem.view, firstItemEvent)).toBe(false);
+    expect(firstItemEvent.preventDefault).not.toHaveBeenCalled();
+  });
+
+  it('does not hijack modified Tab shortcuts', () => {
+    const state = stateWithSelection(
+      schema.node('doc', null, [
+        schema.node('bulletList', null, [
+          schema.node('listItem', null, [
+            schema.node('paragraph', null, schema.text('first')),
+          ]),
+          schema.node('listItem', null, [
+            schema.node('paragraph', null, schema.text('second')),
+          ]),
+        ]),
+      ]),
+      1,
+      'second'
+    );
+    const { view } = viewForState(state);
+
+    expect(handleListIndentation(view, tabEvent({ metaKey: true }))).toBe(
+      false
+    );
+  });
 });