Bump the minor-updates group across 1 directory with 20 updates

Bumps the minor-updates group with 17 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [dedoc/scramble](https://github.com/dedoc/scramble) | `0.12.36` | `0.13.43` |
| [flowframe/laravel-trend](https://github.com/Flowframe/laravel-trend) | `0.4.0` | `0.5.0` |
| [gotenberg/gotenberg-php](https://github.com/gotenberg/gotenberg-php) | `2.21.0` | `2.25.0` |
| [laravel/fortify](https://github.com/laravel/fortify) | `1.37.2` | `1.39.0` |
| [laravel/octane](https://github.com/laravel/octane) | `2.17.4` | `2.19.1` |
| [laravel/passport](https://github.com/laravel/passport) | `13.7.5` | `13.8.0` |
| [league/flysystem-aws-s3-v3](https://github.com/thephpleague/flysystem-aws-s3-v3) | `3.34.0` | `3.35.3` |
| [league/iso3166](https://github.com/alcohol/iso3166) | `4.4.0` | `4.5.0` |
| [owen-it/laravel-auditing](https://github.com/owen-it/laravel-auditing) | `14.0.3` | `14.0.6` |
| [spatie/temporary-directory](https://github.com/spatie/temporary-directory) | `2.3.1` | `2.4.0` |
| [tightenco/ziggy](https://github.com/tighten/ziggy) | `2.6.2` | `2.6.4` |
| [fumeapp/modeltyper](https://github.com/fumeapp/modeltyper) | `3.10.0` | `3.13.0` |
| [larastan/larastan](https://github.com/larastan/larastan) | `3.9.6` | `3.12.0` |
| [laravel/pint](https://github.com/laravel/pint) | `1.29.1` | `1.32.1` |
| [laravel/sail](https://github.com/laravel/sail) | `1.60.0` | `1.67.0` |
| [laravel/telescope](https://github.com/laravel/telescope) | `5.20.0` | `5.24.0` |
| [nunomaduro/collision](https://github.com/nunomaduro/collision) | `8.9.4` | `8.9.5` |



Updates `dedoc/scramble` from 0.12.36 to 0.13.43
- [Release notes](https://github.com/dedoc/scramble/releases)
- [Commits](https://github.com/dedoc/scramble/compare/v0.12.36...0.13.43)

Updates `flowframe/laravel-trend` from 0.4.0 to 0.5.0
- [Release notes](https://github.com/Flowframe/laravel-trend/releases)
- [Changelog](https://github.com/Flowframe/laravel-trend/blob/master/CHANGELOG.md)
- [Commits](https://github.com/Flowframe/laravel-trend/compare/v0.4.0...v0.5.0)

Updates `gotenberg/gotenberg-php` from 2.21.0 to 2.25.0
- [Release notes](https://github.com/gotenberg/gotenberg-php/releases)
- [Commits](https://github.com/gotenberg/gotenberg-php/compare/v2.21.0...v2.25.0)

Updates `guzzlehttp/guzzle` from 7.10.3 to 7.15.5
- [Release notes](https://github.com/guzzle/guzzle/releases)
- [Changelog](https://github.com/guzzle/guzzle/blob/7.15.5/CHANGELOG.md)
- [Commits](https://github.com/guzzle/guzzle/compare/7.10.3...7.15.5)

Updates `laravel/fortify` from 1.37.2 to 1.39.0
- [Release notes](https://github.com/laravel/fortify/releases)
- [Changelog](https://github.com/laravel/fortify/blob/1.x/CHANGELOG.md)
- [Commits](https://github.com/laravel/fortify/compare/v1.37.2...v1.39.0)

Updates `laravel/framework` from 12.60.2 to 12.69.2
- [Release notes](https://github.com/laravel/framework/releases)
- [Changelog](https://github.com/laravel/framework/blob/13.x/CHANGELOG.md)
- [Commits](https://github.com/laravel/framework/compare/v12.60.2...v12.69.2)

Updates `laravel/octane` from 2.17.4 to 2.19.1
- [Release notes](https://github.com/laravel/octane/releases)
- [Changelog](https://github.com/laravel/octane/blob/2.x/CHANGELOG.md)
- [Commits](https://github.com/laravel/octane/compare/v2.17.4...v2.19.1)

Updates `laravel/passport` from 13.7.5 to 13.8.0
- [Release notes](https://github.com/laravel/passport/releases)
- [Changelog](https://github.com/laravel/passport/blob/13.x/CHANGELOG.md)
- [Commits](https://github.com/laravel/passport/compare/v13.7.5...v13.8.0)

Updates `league/flysystem-aws-s3-v3` from 3.34.0 to 3.35.3
- [Commits](https://github.com/thephpleague/flysystem-aws-s3-v3/compare/3.34.0...3.35.3)

Updates `league/iso3166` from 4.4.0 to 4.5.0
- [Release notes](https://github.com/alcohol/iso3166/releases)
- [Changelog](https://github.com/alcohol/iso3166/blob/main/CHANGELOG.md)
- [Commits](https://github.com/alcohol/iso3166/compare/4.4.0...4.5.0)

Updates `owen-it/laravel-auditing` from 14.0.3 to 14.0.6
- [Release notes](https://github.com/owen-it/laravel-auditing/releases)
- [Changelog](https://github.com/owen-it/laravel-auditing/blob/master/CHANGELOG.md)
- [Commits](https://github.com/owen-it/laravel-auditing/compare/v14.0.3...v14.0.6)

Updates `spatie/temporary-directory` from 2.3.1 to 2.4.0
- [Release notes](https://github.com/spatie/temporary-directory/releases)
- [Changelog](https://github.com/spatie/temporary-directory/blob/main/CHANGELOG.md)
- [Commits](https://github.com/spatie/temporary-directory/compare/2.3.1...2.4.0)

Updates `tightenco/ziggy` from 2.6.2 to 2.6.4
- [Release notes](https://github.com/tighten/ziggy/releases)
- [Changelog](https://github.com/tighten/ziggy/blob/2.x/CHANGELOG.md)
- [Commits](https://github.com/tighten/ziggy/compare/v2.6.2...v2.6.4)

Updates `fumeapp/modeltyper` from 3.10.0 to 3.13.0
- [Release notes](https://github.com/fumeapp/modeltyper/releases)
- [Commits](https://github.com/fumeapp/modeltyper/compare/v3.10.0...v3.13.0)

Updates `larastan/larastan` from 3.9.6 to 3.12.0
- [Release notes](https://github.com/larastan/larastan/releases)
- [Changelog](https://github.com/larastan/larastan/blob/3.x/RELEASE.md)
- [Commits](https://github.com/larastan/larastan/compare/v3.9.6...v3.12.0)

Updates `laravel/pint` from 1.29.1 to 1.32.1
- [Release notes](https://github.com/laravel/pint/releases)
- [Changelog](https://github.com/laravel/pint/blob/main/CHANGELOG.md)
- [Commits](https://github.com/laravel/pint/compare/v1.29.1...v1.32.1)

Updates `laravel/sail` from 1.60.0 to 1.67.0
- [Release notes](https://github.com/laravel/sail/releases)
- [Changelog](https://github.com/laravel/sail/blob/1.x/CHANGELOG.md)
- [Commits](https://github.com/laravel/sail/compare/v1.60.0...v1.67.0)

Updates `laravel/telescope` from 5.20.0 to 5.24.0
- [Release notes](https://github.com/laravel/telescope/releases)
- [Changelog](https://github.com/laravel/telescope/blob/5.x/CHANGELOG.md)
- [Commits](https://github.com/laravel/telescope/compare/v5.20.0...v5.24.0)

Updates `mockery/mockery` from 1.6.12 to 1.6.15
- [Release notes](https://github.com/mockery/mockery/releases)
- [Changelog](https://github.com/mockery/mockery/blob/1.6.x/CHANGELOG.md)
- [Commits](https://github.com/mockery/mockery/compare/1.6.12...1.6.15)

Updates `nunomaduro/collision` from 8.9.4 to 8.9.5
- [Commits](https://github.com/nunomaduro/collision/compare/v8.9.4...v8.9.5)

---
updated-dependencies:
- dependency-name: dedoc/scramble
  dependency-version: 0.13.43
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: flowframe/laravel-trend
  dependency-version: 0.5.0
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: gotenberg/gotenberg-php
  dependency-version: 2.25.0
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: guzzlehttp/guzzle
  dependency-version: 7.15.5
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: laravel/fortify
  dependency-version: 1.39.0
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: laravel/framework
  dependency-version: 12.69.2
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: laravel/octane
  dependency-version: 2.19.1
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: laravel/passport
  dependency-version: 13.8.0
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: league/flysystem-aws-s3-v3
  dependency-version: 3.35.3
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: league/iso3166
  dependency-version: 4.5.0
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: owen-it/laravel-auditing
  dependency-version: 14.0.6
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: minor-updates
- dependency-name: spatie/temporary-directory
  dependency-version: 2.4.0
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: tightenco/ziggy
  dependency-version: 2.6.4
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: minor-updates
- dependency-name: fumeapp/modeltyper
  dependency-version: 3.13.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: larastan/larastan
  dependency-version: 3.12.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: laravel/pint
  dependency-version: 1.32.1
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: laravel/sail
  dependency-version: 1.67.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: laravel/telescope
  dependency-version: 5.24.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: minor-updates
- dependency-name: mockery/mockery
  dependency-version: 1.6.15
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: minor-updates
- dependency-name: nunomaduro/collision
  dependency-version: 8.9.5
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: minor-updates
...

Signed-off-by: dependabot[bot] <support@github.com>

composer.json

@@ -9,9 +9,9 @@
         "ext-zip": "*",
         "brick/money": "^0.10.0",
         "datomatic/laravel-enum-helper": "^2.0.0",
-        "dedoc/scramble": "^0.12.2",
+        "dedoc/scramble": "^0.13.43",
         "filament/filament": "^3.2",
-        "flowframe/laravel-trend": "^0.4.0",
+        "flowframe/laravel-trend": "^0.5.0",
         "gotenberg/gotenberg-php": "^2.8",
         "guzzlehttp/guzzle": "^7.2",
         "inertiajs/inertia-laravel": "^2.0.3",

e2e/time.spec.ts

@@ -1579,57 +1579,6 @@ test('test that project selection works in create modal', async ({ page, ctx })
     expect(createBody.data.project_id).not.toBeNull();
 });
 
-test('test that ctrl+enter submits the create modal after selecting a project via keyboard', async ({
-    page,
-    ctx,
-}) => {
-    // Regression test for https://github.com/solidtime-io/solidtime/issues/1238
-    const projectName = 'Keyboard Submit Project ' + Math.floor(1 + Math.random() * 10000);
-    await createProjectViaApi(ctx, { name: projectName });
-
-    await goToTimeOverview(page);
-
-    await page.getByRole('button', { name: 'Time entry actions' }).click();
-    await page.getByRole('menuitem', { name: 'Manual time entry' }).click();
-    await expect(page.getByRole('dialog')).toBeVisible();
-    // The menu that opened the modal animates out and only then hands focus back to its
-    // own trigger.
-    await expect(page.locator('[role="menu"]')).toHaveCount(0);
-
-    // Fill the description, then move to the project dropdown and select a project purely via keyboard
-    const description = page.getByRole('dialog').getByRole('textbox', { name: 'Description' });
-    await description.fill('Keyboard submit test');
-    await description.press('Tab');
-    await expect(
-        page.getByRole('dialog').getByRole('button', { name: 'No Project' })
-    ).toBeFocused();
-    await page.keyboard.press('Enter');
-    await page.getByTestId('client_dropdown_search').fill(projectName);
-    await expect(page.getByRole('option', { name: projectName })).toBeVisible();
-    await page.keyboard.press('Enter');
-    const projectTrigger = page.getByRole('dialog').getByRole('button', { name: projectName });
-    await expect(projectTrigger).toBeVisible();
-    // The trigger label updates on the next tick, but the dropdown keeps focus until its
-    // exit animation has finished and reka-ui hands focus back to the trigger.
-    await expect(projectTrigger).toBeFocused();
-
-    // Ctrl+Enter must submit even though focus is no longer on the description input
-    const [createResponse] = await Promise.all([
-        page.waitForResponse(
-            (response) => response.url().includes('/time-entries') && response.status() === 201
-        ),
-        page.keyboard.press('Control+Enter'),
-    ]);
-    const createBody = await createResponse.json();
-    expect(createBody.data.description).toBe('Keyboard submit test');
-    expect(createBody.data.project_id).not.toBeNull();
-    await expect(page.getByRole('dialog')).toBeHidden();
-    const newTimeEntry = page.locator('[data-testid="time_entry_row"]').first();
-    await expect(newTimeEntry.getByTestId('time_entry_description').first()).toHaveValue(
-        'Keyboard submit test'
-    );
-});
-
 test('test that tag selection works in create modal', async ({ page }) => {
     await goToTimeOverview(page);
 

extensions/manifest.json

@@ -9,6 +9,6 @@
     },
     "Invoicing": {
         "repository": "solidtime-io/extension-invoicing",
-        "ref": "v0.0.5"
+        "ref": "v0.0.6"
     }
 }

package-lock.json

@@ -8564,7 +8564,7 @@
         },
         "resources/js/packages/ui": {
             "name": "@solidtime/ui",
-            "version": "0.0.22",
+            "version": "0.0.23",
             "license": "AGPL-3.0",
             "devDependencies": {
                 "@types/chroma-js": "^3.1.2",

resources/js/Components/Common/Client/ClientCreateModal.vue

@@ -28,7 +28,7 @@ useFocus(clientNameInput, { initialValue: true });
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Create Client </span>

resources/js/Components/Common/Client/ClientEditModal.vue

@@ -30,7 +30,7 @@ useFocus(clientNameInput, { initialValue: true });
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Update Client </span>

resources/js/Components/Common/Client/ClientTable.vue

@@ -7,7 +7,7 @@ import { type Client } from '@/packages/api/src';
 import ClientTableRow from '@/Components/Common/Client/ClientTableRow.vue';
 import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
 import ClientTableHeading from '@/Components/Common/Client/ClientTableHeading.vue';
-import Pagination from '@/Components/Common/Pagination.vue';
+import Pagination from '@/packages/ui/src/Pagination.vue';
 import { canCreateClients } from '@/utils/permissions';
 import { useProjectsQuery } from '@/utils/useProjectsQuery';
 import {

resources/js/Components/Common/Member/MemberEditModal.vue

@@ -136,7 +136,7 @@ const roleDescription = computed(() => {
         v-model:show="showOwnershipTransferConfirmModal"
         :member-name="member.name"
         @submit="submit"></MemberOwnershipTransferConfirmModal>
-    <DialogModal closeable :show="show" @close="show = false" @submit="saveWithChecks()">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Update Member </span>

resources/js/Components/Common/Member/MemberInviteModal.vue

@@ -78,7 +78,7 @@ useFocus(clientNameInput, { initialValue: true });
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Invite Member </span>

resources/js/Components/Common/Project/ProjectEditModal.vue

@@ -79,7 +79,7 @@ async function submitBillableRate() {
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Edit Project {{ props.originalProject.name }} </span>

resources/js/Components/Common/Project/ProjectTable.vue

@@ -6,7 +6,7 @@ import { computed, ref, watch } from 'vue';
 import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
 import ProjectTableHeading from '@/Components/Common/Project/ProjectTableHeading.vue';
 import ProjectTableRow from '@/Components/Common/Project/ProjectTableRow.vue';
-import Pagination from '@/Components/Common/Pagination.vue';
+import Pagination from '@/packages/ui/src/Pagination.vue';
 import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
 
 export type SortColumn =

resources/js/Components/Common/ProjectMember/ProjectMemberCreateModal.vue

@@ -38,7 +38,7 @@ useFocus(projectNameInput, { initialValue: true });
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span>Add Project Member</span>

resources/js/Components/Common/ProjectMember/ProjectMemberEditModal.vue

@@ -63,7 +63,7 @@ useFocus(projectNameInput, { initialValue: true });
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span>Edit Project Member</span>

resources/js/Components/Common/Report/ReportCreateModal.vue

@@ -79,7 +79,7 @@ async function submit() {
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Create Report </span>

resources/js/Components/Common/Report/ReportEditModal.vue

@@ -96,7 +96,7 @@ async function submit() {
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Create Report </span>

resources/js/Components/Common/Tag/TagEditModal.vue

@@ -36,7 +36,7 @@ useFocus(tagNameInput, { initialValue: true });
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Update Tag </span>

resources/js/Components/Common/Task/TaskCreateModal.vue

@@ -50,7 +50,7 @@ useFocus(taskNameInput, { initialValue: true });
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Create Task </span>

resources/js/Components/Common/Task/TaskEditModal.vue

@@ -35,7 +35,7 @@ useFocus(taskNameInput, { initialValue: true });
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Update Task </span>

resources/js/Components/Dashboard/ActivityGraphCard.vue

@@ -63,7 +63,7 @@ const max = computed(() => {
 });
 
 const backgroundColor = useCssVariable('--theme-color-card-background');
-const borderColor = useCssVariable('--color-border');
+const borderColor = useCssVariable('--color-border-secondary');
 const labelColor = useCssVariable('--color-text-secondary');
 const chartColorRaw = useCssVariable('--theme-color-chart');
 

resources/js/Components/Timesheet/BreakPlacementModal.vue

@@ -179,7 +179,7 @@ async function submit() {
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="emit('cancel')" @submit="submit">
+    <DialogModal closeable :show="show" @close="emit('cancel')">
         <template #title>
             <div class="flex items-center space-x-2">
                 <Coffee class="w-5 h-5 text-text-secondary" />

resources/js/Pages/ReportingDetailed.vue

@@ -9,7 +9,7 @@ import {
     ArrowDownTrayIcon,
     LockClosedIcon,
 } from '@heroicons/vue/20/solid';
-import Pagination from '@/Components/Common/Pagination.vue';
+import Pagination from '@/packages/ui/src/Pagination.vue';
 import {
     DropdownMenu,
     DropdownMenuContent,

resources/js/packages/ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@solidtime/ui",
-    "version": "0.0.22",
+    "version": "0.0.23",
     "description": "Package containing the solidtime ui components",
     "main": "./dist/solidtime-ui-lib.umd.cjs",
     "module": "./dist/solidtime-ui-lib.js",

resources/js/packages/ui/src/CommandPalette/CommandPalette.vue

@@ -11,6 +11,7 @@ import {
     CommandShortcut,
 } from '../command';
 import { cn } from '../utils/cn';
+import { useDialogFocusRestore } from '../utils/useDialogFocusRestore';
 import type {
     CommandPaletteCommand,
     CommandPaletteGroup,
@@ -36,6 +37,8 @@ const emit = defineEmits<{
     select: [command: CommandPaletteCommand | EntitySearchResult];
 }>();
 
+const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
+
 // Non-empty groups for rendering
 const nonEmptyGroups = computed(() => props.groups.filter((g) => g.commands.length > 0));
 
@@ -71,7 +74,9 @@ watch(open, (isOpen) => {
                     )
                 ">
                 <DialogContent
-                    class="pointer-events-auto bg-default-background w-full max-w-lg border border-border-tertiary shadow-lg sm:rounded-lg outline-none overflow-hidden p-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95">
+                    class="pointer-events-auto bg-default-background w-full max-w-lg border border-border-tertiary shadow-lg sm:rounded-lg outline-none overflow-hidden p-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+                    @open-auto-focus="onOpenAutoFocus"
+                    @close-auto-focus="onCloseAutoFocus">
                     <CommandRoot
                         v-model:search-term="searchTerm"
                         class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">

resources/js/packages/ui/src/DialogModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Modal from './Modal.vue';
 
-const emit = defineEmits(['close', 'submit']);
+const emit = defineEmits(['close']);
 
 defineProps({
     show: {
@@ -24,12 +24,7 @@ const close = () => {
 </script>
 
 <template>
-    <Modal
+    <Modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
-        :show="show"
-        :max-width="maxWidth"
-        :closeable="closeable"
-        @close="close"
-        @submit="emit('submit')">
         <div class="px-4 lg:px-6 py-4">
             <div class="text-lg font-medium text-text-primary" role="heading">
                 <slot name="title" />

resources/js/packages/ui/src/Modal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Dialog, DialogContent, DialogFooter } from './dialog/index';
-import { computed, nextTick } from 'vue';
+import { computed } from 'vue';
 
 const props = defineProps({
     show: {
@@ -17,7 +17,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['close', 'submit']);
+const emit = defineEmits(['close']);
 
 const close = () => {
     if (props.closeable) {
@@ -25,25 +25,6 @@ const close = () => {
     }
 };
 
-// Ctrl+Enter (Cmd+Enter on macOS) submits the modal from any focused element inside it.
-// Handled in the capture phase so child elements (buttons, dropdown triggers, inputs with
-// their own Enter handlers) never see the keystroke and cannot open or double-submit.
-async function onKeydownCapture(event: KeyboardEvent) {
-    if (event.key !== 'Enter' || !(event.ctrlKey || event.metaKey) || event.isComposing) {
-        return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    // Inputs like the time and duration fields commit their value on blur, so blur first
-    // and let the resulting model updates settle before submitting.
-    const active = document.activeElement;
-    if (active instanceof HTMLElement) {
-        active.blur();
-    }
-    await nextTick();
-    emit('submit');
-}
-
 const maxWidthClass = computed(() => {
     return {
         sm: 'sm:max-w-sm',
@@ -58,7 +39,7 @@ const maxWidthClass = computed(() => {
 <template>
     <Dialog :open="show" @update:open="close">
         <DialogContent :class="maxWidthClass">
-            <div class="min-w-0" @keydown.capture="onKeydownCapture">
+            <div class="min-w-0">
                 <slot />
             </div>
 

resources/js/packages/ui/src/Pagination.vue

@@ -16,8 +16,8 @@ import {
     ChevronRightIcon,
     EllipsisHorizontalIcon,
 } from '@heroicons/vue/20/solid';
-import { buttonVariants } from '@/packages/ui/src';
+import { buttonVariants } from './Buttons/index';
-import { cn } from '@/lib/utils';
+import { cn } from './utils/cn';
 import { computed, watch } from 'vue';
 
 const page = defineModel<number>('page', { default: 1 });

resources/js/packages/ui/src/Project/ProjectCreateModal.vue

@@ -72,7 +72,7 @@ const currentClientName = computed(() => {
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Create Project </span>

resources/js/packages/ui/src/Tag/TagCreateModal.vue

@@ -30,7 +30,7 @@ useFocus(tagNameInput, { initialValue: true });
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Create Tags </span>

resources/js/packages/ui/src/TimeEntry/BreakCreateModal.vue

@@ -78,7 +78,7 @@ async function submit() {
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex items-center space-x-2 text-amber-600 dark:text-amber-400">
                 <Coffee class="w-5 h-5" />

resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue

@@ -126,7 +126,7 @@ const billableProxy = computed({
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Create manual time entry </span>

resources/js/packages/ui/src/TimeEntry/TimeEntryEditModal.vue

@@ -164,7 +164,7 @@ const typeProxy = computed({
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Edit time entry </span>

resources/js/packages/ui/src/TimeEntry/TimeEntryMassUpdateModal.vue

@@ -16,7 +16,6 @@ import {
 } from '@/packages/api/src';
 import { Checkbox } from '@/packages/ui/src';
 import { TagIcon, ExclamationTriangleIcon } from '@heroicons/vue/20/solid';
-import { XMarkIcon } from '@heroicons/vue/16/solid';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..';
 import { Button } from '@/packages/ui/src/Buttons';
 import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
@@ -61,13 +60,6 @@ const projectId = ref<string | null>(null);
 const billable = ref<boolean | undefined>(undefined);
 const selectedTags = ref<string[]>([]);
 
-// Clearing the project puts both fields back to "leave unchanged", the same state the form
-// returns to after a successful submit.
-function resetProject() {
-    projectId.value = null;
-    taskId.value = undefined;
-}
-
 const timeEntryBillable = computed({
     get: () => {
         if (billable.value === undefined) {
@@ -155,7 +147,7 @@ const showBreakWarning = computed(
 </script>
 
 <template>
-    <DialogModal closeable :show="show" @close="show = false" @submit="submit">
+    <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
                 <span> Update {{ timeEntries.length }} time entries </span>
@@ -190,59 +182,42 @@ const showBreakWarning = computed(
                 </Field>
                 <Field>
                     <FieldLabel for="project">Project</FieldLabel>
-                    <div class="flex items-center gap-1 min-w-0">
+                    <TimeTrackerProjectTaskDropdown
-                        <!-- the dropdown declares its own `class` prop, which goes to the
+                        v-model:project="projectId"
-                             trigger button, so the growing has to happen on a wrapper -->
+                        v-model:task="taskId"
-                        <div class="flex-1 min-w-0">
+                        variant="input"
-                            <TimeTrackerProjectTaskDropdown
+                        align="start"
-                                v-model:project="projectId"
+                        size="default"
-                                v-model:task="taskId"
+                        :clients
-                                variant="input"
+                        :create-project
-                                align="start"
+                        :create-client
-                                size="default"
+                        :currency="currency"
-                                :clients
+                        :organization-billable-rate="organizationBillableRate"
-                                :create-project
+                        :can-create-project
-                                :create-client
+                        empty-placeholder="Select project..."
-                                :currency="currency"
+                        allow-reset
-                                :organization-billable-rate="organizationBillableRate"
+                        :enable-estimated-time
-                                :can-create-project
+                        :projects="projects"
-                                empty-placeholder="Select project..."
+                        :tasks="tasks"></TimeTrackerProjectTaskDropdown>
-                                :enable-estimated-time
-                                :projects="projects"
-                                :tasks="tasks"></TimeTrackerProjectTaskDropdown>
-                        </div>
-                        <button
-                            v-if="projectId !== null"
-                            type="button"
-                            data-testid="project_reset_button"
-                            class="p-1 rounded hover:bg-quaternary text-text-tertiary hover:text-text-primary"
-                            @click="resetProject">
-                            <XMarkIcon class="w-4 h-4" />
-                        </button>
-                    </div>
                 </Field>
                 <Field>
                     <FieldLabel>Tag</FieldLabel>
-                    <div class="flex items-center space-x-5">
+                    <div class="flex space-x-5">
-                        <!-- the dropdown root is `min-w-0`, so as a flex item it would shrink
+                        <TagDropdown
-                             below its trigger and let the button overflow into the checkbox -->
+                            v-model="selectedTags"
-                        <div class="shrink-0">
+                            :create-tag
-                            <TagDropdown
+                            :tags="tags"
-                                v-model="selectedTags"
+                            :show-no-tag-option="false">
-                                :create-tag
+                            <template #trigger>
-                                :tags="tags"
+                                <Button variant="input" :disabled="removeAllTags">
-                                :show-no-tag-option="false">
+                                    <TagIcon class="h-4 text-icon-default" />
-                                <template #trigger>
+                                    <span v-if="selectedTags.length > 0">
-                                    <Button variant="input" :disabled="removeAllTags">
+                                        Set {{ selectedTags.length }} tags
-                                        <TagIcon class="h-4 text-icon-default" />
+                                    </span>
-                                        <span v-if="selectedTags.length > 0">
+                                    <span v-else>Select Tags...</span>
-                                            Set {{ selectedTags.length }} tags
+                                </Button>
-                                        </span>
+                            </template>
-                                        <span v-else>Select Tags...</span>
+                        </TagDropdown>
-                                    </Button>
-                                </template>
-                            </TagDropdown>
-                        </div>
                         <Field orientation="horizontal">
                             <Checkbox id="no_tags" v-model:checked="removeAllTags"></Checkbox>
                             <FieldLabel for="no_tags">Remove all tags</FieldLabel>

resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue

@@ -12,7 +12,7 @@ import type {
     Client,
 } from '@/packages/api/src';
 
-import { PlusCircleIcon, MinusIcon } from '@heroicons/vue/16/solid';
+import { PlusCircleIcon, MinusIcon, XMarkIcon } from '@heroicons/vue/16/solid';
 import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
 import { twMerge } from 'tailwind-merge';
 import { Button } from '@/packages/ui/src/Buttons';
@@ -58,6 +58,7 @@ const props = withDefaults(
         createClient: (client: CreateClientBody) => Promise<Client | undefined>;
         currency: string;
         emptyPlaceholder?: string;
+        allowReset?: boolean;
         noProjectValue?: string | null;
         enableEstimatedTime: boolean;
         organizationBillableRate: number | null;
@@ -69,6 +70,7 @@ const props = withDefaults(
     }>(),
     {
         emptyPlaceholder: 'No Project',
+        allowReset: false,
         noProjectValue: NO_PROJECT_ID,
         variant: 'ghost',
         align: 'center',
@@ -556,6 +558,12 @@ function selectProject(projectId: string) {
     emit('changed', project.value, task.value);
 }
 
+function resetProject() {
+    project.value = null;
+    task.value = null;
+    emit('changed', project.value, task.value);
+}
+
 const showCreateProject = ref(false);
 </script>
 
@@ -563,28 +571,40 @@ const showCreateProject = ref(false);
     <Dropdown v-model="open" :close-on-content-click="false" :align="props.align">
         <template #trigger>
             <slot name="trigger">
-                <Button
+                <div class="flex items-center gap-1">
-                    :variant="props.variant"
+                    <Button
-                    :size="props.size"
+                        :variant="props.variant"
-                    :class="twMerge('w-full justify-start overflow-hidden', props.class)">
+                        :size="props.size"
-                    <div
+                        :class="twMerge('w-full justify-start overflow-hidden', props.class)">
-                        class="w-2.5 h-2.5 rounded-full shrink-0"
+                        <div
-                        :style="{ backgroundColor: selectedProjectColor }"></div>
+                            class="w-2.5 h-2.5 rounded-full shrink-0"
-                    <span class="truncate shrink-[1] text-text-primary">{{
+                            :style="{ backgroundColor: selectedProjectColor }"></div>
-                        selectedProjectName
+                        <span class="truncate shrink-[1] text-text-primary">{{
-                    }}</span>
+                            selectedProjectName
-                    <template v-if="currentTask">
+                        }}</span>
-                        <ChevronRightIcon class="!size-3 text-text-primary shrink-0 -mx-1" />
+                        <template v-if="currentTask">
-                        <span class="truncate shrink-[100]">{{ currentTask.name }}</span>
+                            <ChevronRightIcon class="!size-3 text-text-primary shrink-0 -mx-1" />
-                    </template>
+                            <span class="truncate shrink-[100]">{{ currentTask.name }}</span>
-                    <template v-if="selectedClientName">
+                        </template>
-                        <span class="dark:text-text-tertiary text-text-quaternary shrink-0">•</span>
+                        <template v-if="selectedClientName">
-                        <span
+                            <span class="dark:text-text-tertiary text-text-quaternary shrink-0"
-                            class="truncate shrink-[200] dark:text-text-tertiary text-text-quaternary"
+                                >•</span
-                            >{{ selectedClientName }}</span
+                            >
-                        >
+                            <span
-                    </template>
+                                class="truncate shrink-[200] dark:text-text-tertiary text-text-quaternary"
-                </Button>
+                                >{{ selectedClientName }}</span
+                            >
+                        </template>
+                    </Button>
+                    <button
+                        v-if="allowReset && project !== null"
+                        type="button"
+                        data-testid="project_reset_button"
+                        class="p-1 rounded hover:bg-quaternary text-text-tertiary hover:text-text-primary"
+                        @click.stop="resetProject">
+                        <XMarkIcon class="w-4 h-4" />
+                    </button>
+                </div>
             </slot>
         </template>
         <template #content>

resources/js/packages/ui/src/dialog/DialogContent.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { cn } from '../utils/cn';
+import { useDialogFocusRestore } from '../utils/useDialogFocusRestore';
 import {
     DialogContent,
     type DialogContentEmits,
@@ -20,6 +21,10 @@ const delegatedProps = computed(() => {
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+// Forwarded consumer listeners run first, so a consumer can still take over
+// by calling preventDefault() on close-auto-focus.
+const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
 </script>
 
 <template>
@@ -36,7 +41,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
                             'my-3 md:my-14 xl:my-24 bg-default-background grid w-full max-w-lg border border-border-tertiary shadow-lg duration-200 rounded-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
                             props.class
                         )
-                    ">
+                    "
+                    @open-auto-focus="onOpenAutoFocus"
+                    @close-auto-focus="onCloseAutoFocus">
                     <slot />
                 </DialogContent>
             </div>

resources/js/packages/ui/src/dialog/DialogScrollContent.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { cn } from '../utils/cn';
+import { useDialogFocusRestore } from '../utils/useDialogFocusRestore';
 import { X } from '@lucide/vue';
 import {
     DialogClose,
@@ -22,6 +23,10 @@ const delegatedProps = computed(() => {
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+// Forwarded consumer listeners run first, so a consumer can still take over
+// by calling preventDefault() on close-auto-focus.
+const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
 </script>
 
 <template>
@@ -36,6 +41,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
                     )
                 "
                 v-bind="forwarded"
+                @open-auto-focus="onOpenAutoFocus"
+                @close-auto-focus="onCloseAutoFocus"
                 @pointer-down-outside="
                     (event) => {
                         const originalEvent = event.detail.originalEvent;

resources/js/packages/ui/src/index.ts

@@ -32,6 +32,7 @@ import InputLabel from './Input/InputLabel.vue';
 import TextInput from './Input/TextInput.vue';
 import LoadingSpinner from './LoadingSpinner.vue';
 import Modal from './Modal.vue';
+import Pagination from './Pagination.vue';
 import ProjectBadge from './Project/ProjectBadge.vue';
 import TimeEntryCreateModal from './TimeEntry/TimeEntryCreateModal.vue';
 import TimeEntryEditModal from './TimeEntry/TimeEntryEditModal.vue';
@@ -257,6 +258,7 @@ export {
     NumberFieldDecrement,
     NumberFieldIncrement,
     NumberFieldInput,
+    Pagination,
     Popover,
     PopoverAnchor,
     PopoverContent,

resources/js/packages/ui/src/utils/useDialogFocusRestore.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it, vi } from 'vitest';
+import { useDialogFocusRestore } from './useDialogFocusRestore';
+
+function closeEvent() {
+    return new CustomEvent('focusScope.autoFocusOnUnmount', { cancelable: true });
+}
+
+describe('useDialogFocusRestore', () => {
+    it('restores focus to the element focused when the dialog opened', () => {
+        vi.useFakeTimers();
+        const button = document.createElement('button');
+        document.body.appendChild(button);
+        button.focus();
+
+        const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
+        onOpenAutoFocus();
+        button.blur();
+
+        const event = closeEvent();
+        onCloseAutoFocus(event);
+        expect(event.defaultPrevented).toBe(true);
+        vi.runAllTimers();
+        expect(document.activeElement).toBe(button);
+
+        button.remove();
+        vi.useRealTimers();
+    });
+
+    it('focuses nothing when the dialog was opened with nothing focused', () => {
+        vi.useFakeTimers();
+        const stale = document.createElement('button');
+        document.body.appendChild(stale);
+        const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
+
+        // First open from the button, then close
+        stale.focus();
+        onOpenAutoFocus();
+        onCloseAutoFocus(closeEvent());
+        vi.runAllTimers();
+        stale.blur();
+
+        // Second open from the body must not refocus the stale button
+        onOpenAutoFocus();
+        const event = closeEvent();
+        onCloseAutoFocus(event);
+        expect(event.defaultPrevented).toBe(true);
+        vi.runAllTimers();
+        expect(document.activeElement).toBe(document.body);
+
+        stale.remove();
+        vi.useRealTimers();
+    });
+
+    it('does not restore focus to an element that was removed', () => {
+        vi.useFakeTimers();
+        const button = document.createElement('button');
+        document.body.appendChild(button);
+        button.focus();
+        const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
+        onOpenAutoFocus();
+        button.remove();
+
+        onCloseAutoFocus(closeEvent());
+        vi.runAllTimers();
+        expect(document.activeElement).toBe(document.body);
+        vi.useRealTimers();
+    });
+
+    it('leaves control to a consumer that already prevented the event', () => {
+        vi.useFakeTimers();
+        const button = document.createElement('button');
+        document.body.appendChild(button);
+        button.focus();
+        const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
+        onOpenAutoFocus();
+        button.blur();
+
+        const event = closeEvent();
+        event.preventDefault();
+        onCloseAutoFocus(event);
+        vi.runAllTimers();
+        expect(document.activeElement).toBe(document.body);
+
+        button.remove();
+        vi.useRealTimers();
+    });
+});

resources/js/packages/ui/src/utils/useDialogFocusRestore.ts

@@ -0,0 +1,41 @@
+/**
+ * Restores focus to the element that was focused when a dialog opened.
+ *
+ * reka-ui remembers the active element at content mount as the dialog's
+ * "trigger" (only when it is not the body) and refocuses it on every close,
+ * but it never clears that value. A dialog opened while nothing is focused
+ * (e.g. the command palette via Cmd+K from the body) therefore refocuses
+ * whatever triggered a *previous* open. Bind these handlers to
+ * `DialogContent`'s `open-auto-focus` / `close-auto-focus` events to restore
+ * exactly the previously focused element, or nothing.
+ *
+ * A consumer handler that already called `preventDefault()` on
+ * `close-auto-focus` keeps control; this composable then does nothing.
+ */
+export function useDialogFocusRestore() {
+    let previouslyFocused: HTMLElement | null = null;
+
+    function onOpenAutoFocus() {
+        const active = document.activeElement;
+        previouslyFocused =
+            active instanceof HTMLElement && active !== document.body ? active : null;
+    }
+
+    function onCloseAutoFocus(event: Event) {
+        const target = previouslyFocused;
+        previouslyFocused = null;
+        if (event.defaultPrevented) {
+            return;
+        }
+        // Prevents both FocusScope's default restore and reka-ui's trigger refocus
+        event.preventDefault();
+        // Same tick reka-ui uses, so the dialog content is fully gone first
+        setTimeout(() => {
+            if (target?.isConnected) {
+                target.focus({ preventScroll: true });
+            }
+        }, 0);
+    }
+
+    return { onOpenAutoFocus, onCloseAutoFocus };
+}