@securancy/file-explorer 1.1.2 → 2.0.0

package/dist/components/FileExplorer.svelte

@@ -1,7 +1,7 @@
-<script context="module">export {};
+<script lang="ts" module>export {};
 </script>
 
-<script>import { createEventDispatcher, tick } from 'svelte';
+<script lang="ts">import { tick } from 'svelte';
 import FileExplorerBreadcrumb from './FileExplorerBreadcrumb.svelte';
 import FileExplorerDisplayModeSwitcher from './FileExplorerDisplayModeSwitcher.svelte';
 import { defaultTranslations, FileExplorerDisplayMode } from '../index.js';
@@ -11,37 +11,20 @@ import FileExplorerDirectory from './FileExplorerDirectory.svelte';
 import { Icon } from '@securancy/svelte-components';
 import { fade } from 'svelte/transition';
 import { pathsEqual } from '../utilities';
-export let displayMode = FileExplorerDisplayMode.Columns;
-export let filePath;
-export let documents;
-export let loading;
-export let routePrefix;
-export let canEdit;
-export let translations = defaultTranslations;
-export let getFilePreview;
-// When provided, it will use the default implementation for creating directories, otherwise it will dispatch an event
-export let createDirectory = undefined;
-// When provided, it will use the default implementation for uploading files, otherwise it will dispatch an event
-export let uploadFiles = undefined;
-// When provided, it will use the default implementation for deleting files, otherwise it will dispatch an event
-export let deleteFile = undefined;
-const dispatch = createEventDispatcher();
+let { displayMode = $bindable(FileExplorerDisplayMode.Columns), filePath, documents, refresh, routePrefix, canEdit, translations = defaultTranslations, getFilePreview, createDirectory = undefined, uploadFiles = undefined, deleteFile = undefined, search, onUploadFile, onCreateDirectory, onDeleteFile, } = $props();
 const scrollBackButtonThreshold = 200;
-let fileExplorerContentContainer;
-let showScrollBackButton = false;
+let fileExplorerContentContainer = $state();
+let showScrollBackButton = $state(false);
 // Create directory state
-let createDirectoryPath;
-let createDirectoryModalOpen = false;
+let createDirectoryPath = $state();
+let createDirectoryModalOpen = $state(false);
 // Delete item state
-let deleteFileModalOpen = false;
+let deleteFileModalOpen = $state(false);
 let deleteFileEvent;
-let deleting = false;
-let overrideFilesModalOpen = false;
-let overrideFiles = [];
+let deleting = $state(false);
+let overrideFilesModalOpen = $state(false);
+let overrideFiles = $state([]);
 let uploadFilesRequest;
-// If the route changes, always scroll to the right to show the new column
-$: if (filePath)
-    tick().then(() => scrollToRight());
 async function scrollToRight() {
     if (!fileExplorerContentContainer)
         return;
@@ -51,9 +34,13 @@ async function scrollToRight() {
     });
 }
 function handleScroll() {
+    if (!fileExplorerContentContainer)
+        return;
     showScrollBackButton = fileExplorerContentContainer.scrollLeft > scrollBackButtonThreshold;
 }
 function handleScrollBack() {
+    if (!fileExplorerContentContainer)
+        return;
     fileExplorerContentContainer.scroll({
         left: 0,
         behavior: 'smooth',
@@ -63,10 +50,10 @@ async function handleUploadFile(event) {
     // When the uploadFiles function is set, use the default implementation
     if (uploadFiles) {
         // If the user has dropped files, upload them
-        if (event.detail.files) {
+        if (event.files) {
             await uploadFilesInternal({
-                path: event.detail.path,
-                files: event.detail.files,
+                path: event.path,
+                files: event.files,
             });
         }
         else {
@@ -78,20 +65,16 @@ async function handleUploadFile(event) {
             input.addEventListener('change', async () => {
                 if (input.files) {
                     await uploadFilesInternal({
-                        path: event.detail.path,
+                        path: event.path,
                         files: input.files,
                     });
                 }
             });
         }
     }
-    else {
-        // Otherwise, dispatch an event
-        dispatch('upload-file', event.detail);
-    }
 }
 async function uploadFilesInternal(request) {
-    const filesInDirectory = Array.from(flattenedFiles($documents)).filter(x => pathsEqual(x.path, request.path));
+    const filesInDirectory = Array.from(flattenedFiles(documents ?? [])).filter(x => pathsEqual(x.path, request.path));
     const existingFiles = Array.from(request.files).filter(file => filesInDirectory.some(document => document.name === file.name));
     if (existingFiles.length > 0) {
         overrideFiles = existingFiles;
@@ -100,12 +83,12 @@ async function uploadFilesInternal(request) {
     }
     else {
         await uploadFiles(request);
-        documents.refresh();
+        refresh();
     }
 }
 async function confirmOverrideFiles() {
     await uploadFiles(uploadFilesRequest);
-    documents.refresh();
+    refresh();
     overrideFilesModalOpen = false;
     overrideFiles = [];
     uploadFilesRequest = undefined;
@@ -117,22 +100,16 @@ async function cancelOverrideFiles() {
 }
 function handleCreateDirectory(event) {
     if (createDirectory) {
-        createDirectoryPath = event.detail.path;
+        createDirectoryPath = event.path;
         // To avoid closing the modal immediately
         setTimeout(() => createDirectoryModalOpen = true);
     }
-    else {
-        dispatch('create-directory', event.detail);
-    }
 }
 function handleDeleteFile(event) {
     if (deleteFile) {
-        deleteFileEvent = event.detail;
+        deleteFileEvent = event;
         deleteFileModalOpen = true;
     }
-    else {
-        dispatch('delete-file', event.detail);
-    }
 }
 function deleteFileInternal() {
     if (deleteFile && deleteFileEvent) {
@@ -141,7 +118,7 @@ function deleteFileInternal() {
             type: 'file',
             ...deleteFileEvent,
         }).then(() => {
-            documents.refresh();
+            refresh();
             deleteFileModalOpen = false;
         }).catch((error) => {
             console.error('Failed to delete item.', error);
@@ -160,6 +137,11 @@ function* flattenedFiles(documents) {
         yield* flattenedFiles(document.children);
     }
 }
+// If the route changes, always scroll to the right to show the new column
+$effect(() => {
+    if (filePath)
+        tick().then(() => scrollToRight());
+});
 </script>
 
 <div class="file-explorer file-explorer--display-mode-{displayMode}">
@@ -167,12 +149,12 @@ function* flattenedFiles(documents) {
     <FileExplorerBreadcrumb {filePath} {routePrefix} />
     <FileExplorerDisplayModeSwitcher {translations} bind:displayMode />
   </div>
-  {#if $$slots.search}
+  {#if search}
     <div class="file-explorer__search">
-      <slot name="search" />
+      {@render search?.()}
     </div>
   {/if}
-  {#if loading}
+  {#if !documents}
     <div class="file-explorer__loader">
       <Icon class="fa-light fa-spinner-third fa-spin" />
     </div>
@@ -180,7 +162,7 @@ function* flattenedFiles(documents) {
     <div
       bind:this={fileExplorerContentContainer}
       class="file-explorer__content"
-      on:scroll={handleScroll}
+      onscroll={handleScroll}
     >
       <FileExplorerDirectory
         {canEdit}
@@ -191,13 +173,13 @@ function* flattenedFiles(documents) {
           type: 'directory',
           name: '',
           path: '',
-          children: $documents,
+          children: documents,
         }}
+        onCreateDirectory={onCreateDirectory ?? handleCreateDirectory}
+        onDeleteFile={onDeleteFile ?? handleDeleteFile}
+        onUploadFile={onUploadFile ?? handleUploadFile}
         {routePrefix}
         {translations}
-        on:create-directory={handleCreateDirectory}
-        on:delete-file={handleDeleteFile}
-        on:upload-file={handleUploadFile}
       />
     </div>
   {/if}
@@ -206,8 +188,8 @@ function* flattenedFiles(documents) {
   {#if showScrollBackButton}
     <button
       class="file-explorer__scroll-back-button"
+      onclick={handleScrollBack}
       type="button"
-      on:click={handleScrollBack}
       transition:fade|local
     >
       <Icon class="fa-light fa-chevron-left" size="large" />
@@ -215,11 +197,12 @@ function* flattenedFiles(documents) {
   {/if}
 </div>
 
-{#if createDirectory}
+{#if createDirectory && documents}
   <FileExplorerCreateDirectory
     {createDirectory}
     {createDirectoryPath}
     {documents}
+    {refresh}
     {translations}
     bind:createDirectoryModalOpen
   />
@@ -236,22 +219,23 @@ function* flattenedFiles(documents) {
     <div class="file-explorer__text--semi-bold">
       {filePath.split('/').at(-1)}?
     </div>
-    <svelte:fragment slot="footer">
+    {#snippet footer()}
       <Button
         color="soft"
         fill="clear"
-        on:click={() => deleteFileModalOpen = false}
+        onclick={() => deleteFileModalOpen = false}
       >
         {translations.cancel}
       </Button>
-      <Button color="danger" on:click={deleteFileInternal}>
+      <Button color="danger" onclick={deleteFileInternal}>
         {#if deleting}
           {translations.deleting}
         {:else}
           {translations.delete}
         {/if}
       </Button>
-    </svelte:fragment>
+
+    {/snippet}
   </Modal>
 {/if}
 
@@ -266,18 +250,18 @@ function* flattenedFiles(documents) {
     <div class="file-explorer__text file-explorer__text--semi-bold">
       {overrideFiles.map(file => file.name).join(', ')}
     </div>
-    <svelte:fragment slot="footer">
+    {#snippet footer()}
       <Button
         color="soft"
         fill="clear"
-        on:click={cancelOverrideFiles}
+        onclick={cancelOverrideFiles}
       >
         {translations.cancel}
       </Button>
-      <Button color="danger" on:click={confirmOverrideFiles}>
+      <Button color="danger" onclick={confirmOverrideFiles}>
         {translations.override}
       </Button>
-    </svelte:fragment>
+    {/snippet}
   </Modal>
 {/if}
 

package/dist/components/FileExplorer.svelte.d.ts

@@ -1,4 +1,3 @@
-import { SvelteComponentTyped } from "svelte";
 export interface UploadFileEvent {
     path: string;
     files?: FileList;
@@ -10,65 +9,24 @@ export interface DeleteFileEvent {
     path: string;
     name: string;
 }
-import type { Refreshable } from '@securancy/svelte-utilities';
-import { type CreateDirectoryRequest, FileExplorerDisplayMode, type FileItem, type FilePreview, type FileSystemItem, type UploadFilesRequest } from '../index.js';
-declare const __propDef: {
-    props: {
-        displayMode?: FileExplorerDisplayMode;
-        filePath: string;
-        documents: Refreshable<FileSystemItem[]>;
-        loading: boolean;
-        routePrefix: string;
-        canEdit: boolean | ((fileItem: FileSystemItem) => boolean);
-        translations?: {
-            cancel: string;
-            create: string;
-            createDirectory: string;
-            createDirectoryModalTitle: string;
-            createDirectoryPlaceholder: string;
-            createItemTitle: string;
-            createdAt: string;
-            creating: string;
-            delete: string;
-            deleteFile: string;
-            deleteFileConfirmation: string;
-            deleting: string;
-            directoryAlreadyExists: string;
-            displayModeLabels: {
-                columns: string;
-                index: string;
-            };
-            displayModeSwitch: string;
-            emptyDirectory: string;
-            itemTitle: (item: FileSystemItem) => string;
-            items: string;
-            modifiedAt: string;
-            override: string;
-            overrideFiles: string;
-            overrideFilesConfirmation: string;
-            previewFile: string;
-            size: string;
-            uploadFile: string;
-        };
-        getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
-        createDirectory?: ((request: CreateDirectoryRequest) => Promise<void>) | undefined;
-        uploadFiles?: ((request: UploadFilesRequest) => Promise<void>) | undefined;
-        deleteFile?: ((fileItem: FileItem) => Promise<void>) | undefined;
-    };
-    events: {
-        'upload-file': CustomEvent<UploadFileEvent>;
-        'create-directory': CustomEvent<CreateDirectoryEvent>;
-        'delete-file': CustomEvent<DeleteFileEvent>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        search: {};
-    };
-};
-export type FileExplorerProps = typeof __propDef.props;
-export type FileExplorerEvents = typeof __propDef.events;
-export type FileExplorerSlots = typeof __propDef.slots;
-export default class FileExplorer extends SvelteComponentTyped<FileExplorerProps, FileExplorerEvents, FileExplorerSlots> {
-}
-export {};
+import { type CreateDirectoryRequest, type DocumentTranslations, FileExplorerDisplayMode, type FileItem, type FilePreview, type FileSystemItem, type UploadFilesRequest } from '../index.js';
+import type { Snippet } from 'svelte';
+declare const FileExplorer: import("svelte").Component<{
+    displayMode?: FileExplorerDisplayMode;
+    filePath: string;
+    documents: FileSystemItem[] | undefined;
+    refresh: () => void;
+    routePrefix: string;
+    canEdit: boolean | ((fileItem: FileSystemItem) => boolean);
+    translations?: DocumentTranslations;
+    getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
+    createDirectory?: (request: CreateDirectoryRequest) => Promise<void>;
+    uploadFiles?: (request: UploadFilesRequest) => Promise<void>;
+    deleteFile?: (fileItem: FileItem) => Promise<void>;
+    search?: Snippet;
+    onUploadFile?: (event: UploadFileEvent) => void;
+    onCreateDirectory?: (event: CreateDirectoryEvent) => void;
+    onDeleteFile?: (event: DeleteFileEvent) => void;
+}, {}, "displayMode">;
+type FileExplorer = ReturnType<typeof FileExplorer>;
+export default FileExplorer;

package/dist/components/FileExplorerBreadcrumb.svelte

@@ -1,7 +1,6 @@
-<script>import { Icon } from '@securancy/svelte-components';
-export let filePath;
-export let routePrefix;
-$: parts = filePath.split('/');
+<script lang="ts">import { Icon } from '@securancy/svelte-components';
+let { filePath, routePrefix } = $props();
+let parts = $derived(filePath.split('/'));
 function getHref(parts, index, routePrefix) {
     const href = [
         ...routePrefix.split('/'),

package/dist/components/FileExplorerBreadcrumb.svelte.d.ts

@@ -1,17 +1,7 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        filePath: string;
-        routePrefix: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FileExplorerBreadcrumbProps = typeof __propDef.props;
-export type FileExplorerBreadcrumbEvents = typeof __propDef.events;
-export type FileExplorerBreadcrumbSlots = typeof __propDef.slots;
-export default class FileExplorerBreadcrumb extends SvelteComponentTyped<FileExplorerBreadcrumbProps, FileExplorerBreadcrumbEvents, FileExplorerBreadcrumbSlots> {
+interface Properties {
+    filePath: string;
+    routePrefix: string;
 }
-export {};
+declare const FileExplorerBreadcrumb: import("svelte").Component<Properties, {}, "">;
+type FileExplorerBreadcrumb = ReturnType<typeof FileExplorerBreadcrumb>;
+export default FileExplorerBreadcrumb;

package/dist/components/FileExplorerCreateDirectory.svelte

@@ -1,18 +1,8 @@
-<script>import { Button, FormElement, Modal } from '@securancy/svelte-components';
-export let createDirectoryPath;
-export let createDirectoryModalOpen = false;
-export let documents;
-export let createDirectory;
-export let translations;
-let request = { path: '', name: '' };
-let submitting = false;
-let input = undefined;
-$: existingFoldersInPath = getExistingFoldersInPath(createDirectoryPath, $documents);
-$: directoryAlreadyExists = existingFoldersInPath.some(x => x.name === request.name);
-$: request.path = createDirectoryPath ?? '';
-// Clear inputs when modal is opened
-$: if (input)
-    input.focus();
+<script lang="ts">import { Button, FormElement, Modal } from '@securancy/svelte-components';
+let { createDirectoryPath, createDirectoryModalOpen = $bindable(false), documents, createDirectory, translations, refresh, } = $props();
+let request = $state({ path: '', name: '' });
+let submitting = $state(false);
+let input = $state(undefined);
 async function submitFiles() {
     submitting = true;
     await createDirectory(request)
@@ -21,7 +11,7 @@ async function submitFiles() {
     }).finally(() => {
         submitting = false;
     });
-    documents.refresh();
+    refresh();
 }
 function getExistingFoldersInPath(path, documents) {
     const pathParts = path ? path.split('/') : [];
@@ -32,6 +22,13 @@ function getExistingFoldersInPath(path, documents) {
     }
     return existingFoldersInPath;
 }
+let existingFoldersInPath = $derived(getExistingFoldersInPath(createDirectoryPath, documents));
+let directoryAlreadyExists = $derived(existingFoldersInPath.some(x => x.name === request.name));
+$effect(() => {
+    request.path = createDirectoryPath ?? '';
+});
+// Clear inputs when modal is opened
+$effect(() => (input && input.focus()));
 </script>
 
 <Modal
@@ -54,17 +51,17 @@ function getExistingFoldersInPath(path, documents) {
       />
     </FormElement>
   </div>
-  <svelte:fragment slot="footer">
+  {#snippet footer()}
     <Button
       color="soft"
       fill="clear"
-      on:click={() => createDirectoryModalOpen = false}
+      onclick={() => createDirectoryModalOpen = false}
     >
       {translations.cancel}
     </Button>
     <Button
       disabled={(!request.name || request.name.length === 0) || directoryAlreadyExists || submitting}
-      on:click={submitFiles}
+      onclick={submitFiles}
     >
       {#if submitting}
         {translations.creating}
@@ -72,7 +69,8 @@ function getExistingFoldersInPath(path, documents) {
         {translations.create}
       {/if}
     </Button>
-  </svelte:fragment>
+
+  {/snippet}
 </Modal>
 
 <style>

package/dist/components/FileExplorerCreateDirectory.svelte.d.ts

@@ -1,22 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Refreshable } from '@securancy/svelte-utilities';
 import type { CreateDirectoryRequest, DocumentTranslations, FileSystemItem } from '../models/index.js';
-declare const __propDef: {
-    props: {
-        createDirectoryPath: string | undefined;
-        createDirectoryModalOpen?: boolean;
-        documents: Refreshable<FileSystemItem[]>;
-        createDirectory: (request: CreateDirectoryRequest) => Promise<void>;
-        translations: DocumentTranslations;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FileExplorerCreateDirectoryProps = typeof __propDef.props;
-export type FileExplorerCreateDirectoryEvents = typeof __propDef.events;
-export type FileExplorerCreateDirectorySlots = typeof __propDef.slots;
-export default class FileExplorerCreateDirectory extends SvelteComponentTyped<FileExplorerCreateDirectoryProps, FileExplorerCreateDirectoryEvents, FileExplorerCreateDirectorySlots> {
-}
-export {};
+declare const FileExplorerCreateDirectory: import("svelte").Component<{
+    createDirectoryPath: string | undefined;
+    createDirectoryModalOpen?: boolean;
+    documents: FileSystemItem[];
+    createDirectory: (request: CreateDirectoryRequest) => Promise<void>;
+    translations: DocumentTranslations;
+    refresh: () => void;
+}, {}, "createDirectoryModalOpen">;
+type FileExplorerCreateDirectory = ReturnType<typeof FileExplorerCreateDirectory>;
+export default FileExplorerCreateDirectory;

package/dist/components/FileExplorerDirectory.svelte

@@ -1,71 +1,53 @@
-<script>import {} from '..';
+<script lang="ts">import FileExplorerDirectory from './FileExplorerDirectory.svelte';
+import {} from '..';
 import FileExplorerDirectoryColumn from './FileExplorerDirectoryColumn.svelte';
 import FileExplorerFileDetailColumn from './FileExplorerFileDetailColumn.svelte';
 import FileExplorerDirectoryIndex from './FileExplorerDirectoryIndex.svelte';
-export let item;
-export let translations;
-export let routePrefix;
-export let currentPath;
-export let canEdit;
-export let displayMode;
-export let getFilePreview;
-$: currentPathParts = currentPath.split('/');
-$: activeFileItem = item.children.find((fileItem) => {
+import '../file-explorer.pcss';
+let { currentPath, item, canEdit, ...properties } = $props();
+let currentPathParts = $derived(currentPath.split('/'));
+let activeFileItem = $derived(item.children.find((fileItem) => {
     const parts = [
         ...fileItem.path.split('/').filter(part => part !== ''),
         fileItem.name,
     ];
     return parts.every((part, index) => currentPathParts[index] === part);
-});
+}));
 function canEditItem(item, canEdit) {
     return typeof canEdit === 'function' ? canEdit(item) : canEdit === true;
 }
 </script>
 
-{#if displayMode === 'columns'}
+{#if properties.displayMode === 'columns'}
   <FileExplorerDirectoryColumn
+    {...properties}
     {activeFileItem}
     canEdit={canEditItem(item, canEdit)}
     {item}
-    {routePrefix}
-    {translations}
-    on:upload-file
-    on:create-directory
   />
 {:else}
   <FileExplorerDirectoryIndex
+    {...properties}
     {activeFileItem}
     canEdit={canEditItem(item, canEdit)}
     {item}
-    {routePrefix}
-    {translations}
-    on:upload-file
-    on:create-directory
   />
 {/if}
 
 <!-- The component repeats itself until there is no selected item or it reaches a fileItem -->
 {#if activeFileItem}
   {#if activeFileItem.type === 'directory'}
-    <svelte:self
+    <FileExplorerDirectory
+      {...properties}
       {canEdit}
       {currentPath}
-      {displayMode}
-      {getFilePreview}
       item={activeFileItem}
-      {routePrefix}
-      {translations}
-      on:upload-file
-      on:create-directory
-      on:delete-file
     />
   {:else}
     <FileExplorerFileDetailColumn
+      {...properties}
       canEdit={canEditItem(activeFileItem, canEdit)}
       fileItem={activeFileItem}
-      {getFilePreview}
-      {translations}
-      on:delete-file
     />
   {/if}
 {/if}

package/dist/components/FileExplorerDirectory.svelte.d.ts

@@ -1,28 +1,18 @@
-import { SvelteComponentTyped } from "svelte";
-import type { FileExplorerDisplayMode, FileSystemItem } from '..';
+import FileExplorerDirectory from './FileExplorerDirectory.svelte';
+import type { CreateDirectoryEvent, DeleteFileEvent, FileExplorerDisplayMode, FileSystemItem, UploadFileEvent } from '..';
 import { type DirectoryItem, type DocumentTranslations, type FileItem, type FilePreview } from '..';
-declare const __propDef: {
-    props: {
-        item: DirectoryItem;
-        translations: DocumentTranslations;
-        routePrefix: string;
-        currentPath: string;
-        canEdit: boolean | ((fileItem: FileSystemItem) => boolean);
-        displayMode: FileExplorerDisplayMode;
-        getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
-    };
-    events: {
-        'upload-file': CustomEvent<import("..").UploadFileEvent>;
-        'create-directory': CustomEvent<import("..").CreateDirectoryEvent>;
-        'delete-file': CustomEvent<import("..").DeleteFileEvent>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FileExplorerDirectoryProps = typeof __propDef.props;
-export type FileExplorerDirectoryEvents = typeof __propDef.events;
-export type FileExplorerDirectorySlots = typeof __propDef.slots;
-export default class FileExplorerDirectory extends SvelteComponentTyped<FileExplorerDirectoryProps, FileExplorerDirectoryEvents, FileExplorerDirectorySlots> {
-}
-export {};
+import '../file-explorer.pcss';
+declare const FileExplorerDirectory: import("svelte").Component<{
+    item: DirectoryItem;
+    translations: DocumentTranslations;
+    routePrefix: string;
+    currentPath: string;
+    canEdit: boolean | ((fileItem: FileSystemItem) => boolean);
+    displayMode: FileExplorerDisplayMode;
+    getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
+    onUploadFile: (event: UploadFileEvent) => void;
+    onCreateDirectory: (event: CreateDirectoryEvent) => void;
+    onDeleteFile: (event: DeleteFileEvent) => void;
+}, {}, "">;
+type FileExplorerDirectory = ReturnType<typeof FileExplorerDirectory>;
+export default FileExplorerDirectory;

package/dist/components/FileExplorerDirectoryColumn.svelte

@@ -1,24 +1,17 @@
-<script>import { createEventDispatcher } from 'svelte';
-import {} from '..';
+<script lang="ts">import {} from '..';
 import { resize, ResizeDirections } from '@securancy/svelte-utilities';
 import { Icon, Popover, PopoverItem } from '@securancy/svelte-components';
 import { getExtension, getItemHref } from '../utilities/index.js';
 import FileIcon from './FileIcon.svelte';
 import { joinPaths } from '../utilities/index.js';
-const dispatch = createEventDispatcher();
-export let item;
-export let sticky = false;
-export let routePrefix;
-export let canEdit;
-export let translations;
-export let activeFileItem;
-let dragoverIndex = 0; // Incremented/decremented when entering/leaving a child element of the column
-let innerWidth = 0;
+let { item, sticky = false, routePrefix, canEdit, translations, activeFileItem, onUploadFile, onCreateDirectory, } = $props();
+let dragoverIndex = $state(0); // Incremented/decremented when entering/leaving a child element of the column
+let innerWidth = $state(0);
 function addItem() {
-    dispatch('upload-file', { path: joinPaths(item.path, item.name) });
+    onUploadFile({ path: joinPaths(item.path, item.name) });
 }
 function createDirectory() {
-    dispatch('create-directory', { path: joinPaths(item.path, item.name) });
+    onCreateDirectory({ path: joinPaths(item.path, item.name) });
 }
 function handleDragEnter(event) {
     event.preventDefault();
@@ -33,7 +26,7 @@ function handleDrop(event) {
     if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
         eventData.files = event.dataTransfer.files;
     }
-    dispatch('upload-file', eventData);
+    onUploadFile(eventData);
 }
 function handleDragLeave(event) {
     event.preventDefault();
@@ -54,16 +47,16 @@ function handleDragOver(event) {
 <svelte:window bind:innerWidth />
 
 <!-- ignored because users with assistive tech have an option to upload using the button -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   class="file-explorer__column"
   class:file-explorer__column--dragover={dragoverIndex > 0}
   class:file-explorer__column--sticky={sticky}
-  on:dragend={handleDragEnd}
-  on:dragenter={handleDragEnter}
-  on:dragleave={handleDragLeave}
-  on:dragover={handleDragOver}
-  on:drop={handleDrop}
+  ondragend={handleDragEnd}
+  ondragenter={handleDragEnter}
+  ondragleave={handleDragLeave}
+  ondragover={handleDragOver}
+  ondrop={handleDrop}
   use:resize={{
     disabled: innerWidth < 1024,
     directions: [ResizeDirections.East],
@@ -78,12 +71,14 @@ function handleDragOver(event) {
           {item.name === '' ? translations.items : item.name} ({item.children.length})
         </span>
         {#if canEdit}
-          <Popover placement="bottom-end" trigger="click">
-            <button slot="trigger" title={translations.createItemTitle} type="button">
-              <Icon class="fa-solid fa-add" />
-            </button>
-            <PopoverItem closeOnClick on:click={createDirectory}>{translations.createDirectory}</PopoverItem>
-            <PopoverItem closeOnClick on:click={addItem}>{translations.uploadFile}</PopoverItem>
+          <Popover placement="bottom-end" triggerOn="click">
+            {#snippet trigger()}
+              <button title={translations.createItemTitle} type="button">
+                <Icon class="fa-solid fa-add" />
+              </button>
+            {/snippet}
+            <PopoverItem closeOnClick onclick={createDirectory}>{translations.createDirectory}</PopoverItem>
+            <PopoverItem closeOnClick onclick={addItem}>{translations.uploadFile}</PopoverItem>
           </Popover>
         {/if}
       </div>

package/dist/components/FileExplorerDirectoryColumn.svelte.d.ts

@@ -1,28 +1,16 @@
-import { SvelteComponentTyped } from "svelte";
 import type { UploadFileEvent } from './FileExplorer.svelte';
 import { type DirectoryItem, type DocumentTranslations, type FileSystemItem } from '..';
 import type { CreateDirectoryEvent } from './FileExplorer.svelte';
-declare const __propDef: {
-    props: {
-        item: DirectoryItem;
-        sticky?: boolean;
-        routePrefix: string;
-        canEdit: boolean;
-        translations: DocumentTranslations;
-        activeFileItem: FileSystemItem | undefined;
-    };
-    events: {
-        'scroll-back': CustomEvent<undefined>;
-        'upload-file': CustomEvent<UploadFileEvent>;
-        'create-directory': CustomEvent<CreateDirectoryEvent>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FileExplorerDirectoryColumnProps = typeof __propDef.props;
-export type FileExplorerDirectoryColumnEvents = typeof __propDef.events;
-export type FileExplorerDirectoryColumnSlots = typeof __propDef.slots;
-export default class FileExplorerDirectoryColumn extends SvelteComponentTyped<FileExplorerDirectoryColumnProps, FileExplorerDirectoryColumnEvents, FileExplorerDirectoryColumnSlots> {
+interface Properties {
+    item: DirectoryItem;
+    sticky?: boolean;
+    routePrefix: string;
+    canEdit: boolean;
+    translations: DocumentTranslations;
+    activeFileItem: FileSystemItem | undefined;
+    onUploadFile: (event: UploadFileEvent) => void;
+    onCreateDirectory: (event: CreateDirectoryEvent) => void;
 }
-export {};
+declare const FileExplorerDirectoryColumn: import("svelte").Component<Properties, {}, "">;
+type FileExplorerDirectoryColumn = ReturnType<typeof FileExplorerDirectoryColumn>;
+export default FileExplorerDirectoryColumn;

package/dist/components/FileExplorerDirectoryIndex.svelte

@@ -1,20 +1,14 @@
-<script>import FileIcon from './FileIcon.svelte';
-import { createEventDispatcher } from 'svelte';
+<script lang="ts">import FileIcon from './FileIcon.svelte';
 import { resize, ResizeDirections } from '@securancy/svelte-utilities';
 import { Icon, Popover, PopoverItem } from '@securancy/svelte-components';
 import { getExtension, getItemHref, joinPaths } from '../utilities/index.js';
-const dispatch = createEventDispatcher();
-export let item;
-export let routePrefix;
-export let translations;
-export let canEdit;
-export let activeFileItem;
-let innerWidth = 0;
+let { item, routePrefix, translations, canEdit, activeFileItem, onUploadFile, onCreateDirectory, } = $props();
+let innerWidth = $state(0);
 function addItem() {
-    dispatch('upload-file', { path: joinPaths(item.path, item.name) });
+    onUploadFile({ path: joinPaths(item.path, item.name) });
 }
 function createDirectory() {
-    dispatch('create-directory', { path: joinPaths(item.path, item.name) });
+    onCreateDirectory({ path: joinPaths(item.path, item.name) });
 }
 </script>
 
@@ -37,12 +31,14 @@ function createDirectory() {
           </span>
           {#if canEdit}
             <div class="inline-block">
-              <Popover placement="bottom-end" trigger="click">
-                <button slot="trigger" title={translations.createItemTitle} type="button">
-                  <Icon class="fa-solid fa-add" />
-                </button>
-                <PopoverItem closeOnClick on:click={createDirectory}>{translations.createDirectory}</PopoverItem>
-                <PopoverItem closeOnClick on:click={addItem}>{translations.uploadFile}</PopoverItem>
+              <Popover placement="bottom-end" triggerOn="click">
+                {#snippet trigger()}
+                  <button title={translations.createItemTitle} type="button">
+                    <Icon class="fa-solid fa-add" />
+                  </button>
+                {/snippet}
+                <PopoverItem closeOnClick onclick={createDirectory}>{translations.createDirectory}</PopoverItem>
+                <PopoverItem closeOnClick onclick={addItem}>{translations.uploadFile}</PopoverItem>
               </Popover>
             </div>
           {/if}

package/dist/components/FileExplorerDirectoryIndex.svelte.d.ts

@@ -1,25 +1,14 @@
-import { SvelteComponentTyped } from "svelte";
 import type { DirectoryItem, DocumentTranslations, FileSystemItem } from '../index.js';
 import type { CreateDirectoryEvent, UploadFileEvent } from './FileExplorer.svelte';
-declare const __propDef: {
-    props: {
-        item: DirectoryItem;
-        routePrefix: string;
-        translations: DocumentTranslations;
-        canEdit: boolean;
-        activeFileItem: FileSystemItem | undefined;
-    };
-    events: {
-        'upload-file': CustomEvent<UploadFileEvent>;
-        'create-directory': CustomEvent<CreateDirectoryEvent>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FileExplorerDirectoryIndexProps = typeof __propDef.props;
-export type FileExplorerDirectoryIndexEvents = typeof __propDef.events;
-export type FileExplorerDirectoryIndexSlots = typeof __propDef.slots;
-export default class FileExplorerDirectoryIndex extends SvelteComponentTyped<FileExplorerDirectoryIndexProps, FileExplorerDirectoryIndexEvents, FileExplorerDirectoryIndexSlots> {
+interface Properties {
+    item: DirectoryItem;
+    routePrefix: string;
+    translations: DocumentTranslations;
+    canEdit: boolean;
+    activeFileItem: FileSystemItem | undefined;
+    onUploadFile: (event: UploadFileEvent) => void;
+    onCreateDirectory: (event: CreateDirectoryEvent) => void;
 }
-export {};
+declare const FileExplorerDirectoryIndex: import("svelte").Component<Properties, {}, "">;
+type FileExplorerDirectoryIndex = ReturnType<typeof FileExplorerDirectoryIndex>;
+export default FileExplorerDirectoryIndex;

package/dist/components/FileExplorerDisplayModeSwitcher.svelte

@@ -1,7 +1,6 @@
-<script>import { FileExplorerDisplayMode } from '../index.js';
+<script lang="ts">import { FileExplorerDisplayMode } from '../index.js';
 import { Icon } from '@securancy/svelte-components';
-export let displayMode;
-export let translations;
+let { displayMode = $bindable(), translations } = $props();
 let modes = Object.values(FileExplorerDisplayMode);
 const modeIcons = {
     columns: 'fa-columns-3',

package/dist/components/FileExplorerDisplayModeSwitcher.svelte.d.ts

@@ -1,18 +1,8 @@
-import { SvelteComponentTyped } from "svelte";
 import { type DocumentTranslations, FileExplorerDisplayMode } from '../index.js';
-declare const __propDef: {
-    props: {
-        displayMode: FileExplorerDisplayMode;
-        translations: DocumentTranslations;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FileExplorerDisplayModeSwitcherProps = typeof __propDef.props;
-export type FileExplorerDisplayModeSwitcherEvents = typeof __propDef.events;
-export type FileExplorerDisplayModeSwitcherSlots = typeof __propDef.slots;
-export default class FileExplorerDisplayModeSwitcher extends SvelteComponentTyped<FileExplorerDisplayModeSwitcherProps, FileExplorerDisplayModeSwitcherEvents, FileExplorerDisplayModeSwitcherSlots> {
+interface Properties {
+    displayMode: FileExplorerDisplayMode;
+    translations: DocumentTranslations;
 }
-export {};
+declare const FileExplorerDisplayModeSwitcher: import("svelte").Component<Properties, {}, "displayMode">;
+type FileExplorerDisplayModeSwitcher = ReturnType<typeof FileExplorerDisplayModeSwitcher>;
+export default FileExplorerDisplayModeSwitcher;

package/dist/components/FileExplorerFileDetailColumn.svelte

@@ -1,18 +1,12 @@
-<script>import { Card, Icon } from '@securancy/svelte-components';
+<script lang="ts">import { Card, Icon } from '@securancy/svelte-components';
 import FileIcon from './FileIcon.svelte';
 import { resize, ResizeDirections } from '@securancy/svelte-utilities';
 import { formatBytes, getExtension, isImage } from '../utilities/index.js';
 import { DateTime } from 'luxon';
-import { createEventDispatcher } from 'svelte';
-export let fileItem;
-export let getFilePreview;
-export let translations;
-export let canEdit;
-const dispatch = createEventDispatcher();
+let { fileItem, getFilePreview, translations, canEdit, onDeleteFile, } = $props();
 const fileDateFormat = 'cccc FF';
-let filePreview;
-let extension;
-$: refresh(fileItem);
+let filePreview = $state();
+let extension = $state('');
 async function refresh(_fileItem) {
     filePreview = await getFilePreview(_fileItem)
         .catch((error) => {
@@ -21,6 +15,9 @@ async function refresh(_fileItem) {
     });
     extension = getExtension(_fileItem.name);
 }
+$effect(() => {
+    refresh(fileItem);
+});
 </script>
 
 <div
@@ -75,7 +72,7 @@ async function refresh(_fileItem) {
         {/if}
         {#if canEdit}
           <div class="file-explorer-preview__info">
-            <button id="file-explorer-delete-file" type="button" on:click={() => dispatch('delete-file', fileItem)}>
+            <button id="file-explorer-delete-file" onclick={() => onDeleteFile(fileItem)} type="button">
               <Icon class="fa-solid fa-trash" />
             </button>
           </div>

package/dist/components/FileExplorerFileDetailColumn.svelte.d.ts

@@ -1,23 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
 import type { DocumentTranslations, FileItem, FilePreview } from '..';
 import type { DeleteFileEvent } from './FileExplorer.svelte';
-declare const __propDef: {
-    props: {
-        fileItem: FileItem;
-        getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
-        translations: DocumentTranslations;
-        canEdit: boolean;
-    };
-    events: {
-        'delete-file': CustomEvent<DeleteFileEvent>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FileExplorerFileDetailColumnProps = typeof __propDef.props;
-export type FileExplorerFileDetailColumnEvents = typeof __propDef.events;
-export type FileExplorerFileDetailColumnSlots = typeof __propDef.slots;
-export default class FileExplorerFileDetailColumn extends SvelteComponentTyped<FileExplorerFileDetailColumnProps, FileExplorerFileDetailColumnEvents, FileExplorerFileDetailColumnSlots> {
-}
-export {};
+declare const FileExplorerFileDetailColumn: import("svelte").Component<{
+    fileItem: FileItem;
+    getFilePreview: (fileItem: FileItem) => Promise<FilePreview>;
+    translations: DocumentTranslations;
+    canEdit: boolean;
+    onDeleteFile: (event: DeleteFileEvent) => void;
+}, {}, "">;
+type FileExplorerFileDetailColumn = ReturnType<typeof FileExplorerFileDetailColumn>;
+export default FileExplorerFileDetailColumn;

package/dist/components/FileIcon.svelte

@@ -1,9 +1,7 @@
-<script>import { Icon } from '@securancy/svelte-components';
+<script lang="ts">import { Icon } from '@securancy/svelte-components';
 import { imageExtensions, videoExtensions } from '../utilities/index.js';
-export let extension;
-export let size = 'default';
-let iconClass;
-$: iconClass = determineIconString(extension);
+let { extension, size = 'default' } = $props();
+let iconClass = $derived(determineIconString(extension));
 function determineIconString(_extension) {
     if (imageExtensions.includes(_extension))
         return 'fa-file-image';

package/dist/components/FileIcon.svelte.d.ts

@@ -1,17 +1,7 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        extension: string;
-        size?: "default" | "large" | "grid";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FileIconProps = typeof __propDef.props;
-export type FileIconEvents = typeof __propDef.events;
-export type FileIconSlots = typeof __propDef.slots;
-export default class FileIcon extends SvelteComponentTyped<FileIconProps, FileIconEvents, FileIconSlots> {
+interface Properties {
+    extension: string;
+    size?: 'default' | 'large' | 'grid';
 }
-export {};
+declare const FileIcon: import("svelte").Component<Properties, {}, "">;
+type FileIcon = ReturnType<typeof FileIcon>;
+export default FileIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@securancy/file-explorer",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "type": "module",
   "private": false,
   "svelte": "./dist/index.js",
@@ -18,33 +18,36 @@
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
   "devDependencies": {
-    "@faker-js/faker": "^9.0.3",
-    "@sveltejs/adapter-auto": "^3.2.5",
-    "@sveltejs/kit": "^2.7.2",
-    "@sveltejs/package": "^2.3.5",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@faker-js/faker": "^9.3.0",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.15.2",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.4",
     "@types/luxon": "^3.4.2",
     "autoprefixer": "^10.4.20",
     "luxon": "^3.5.0",
-    "postcss": "^8.4.47",
-    "postcss-custom-media": "^11.0.3",
+    "postcss": "^8.4.49",
+    "postcss-custom-media": "^11.0.5",
     "postcss-each": "^1.1.0",
     "postcss-easy-import": "^4.0.0",
     "postcss-extend": "^1.0.5",
     "postcss-for": "^2.1.1",
     "postcss-mixins": "^11.0.3",
-    "postcss-nested": "^6.2.0",
+    "postcss-nested": "^7.0.2",
     "postcss-nested-ancestors": "^3.0.0",
-    "publint": "^0.2.11",
-    "svelte": "^4.2.19",
-    "svelte-check": "^4.0.5",
+    "publint": "^0.3.0",
+    "svelte": "^5.16.6",
+    "svelte-check": "^4.1.1",
     "svelte-preprocess": "^6.0.3",
     "the-new-css-reset": "^1.11.3",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.9",
-    "@securancy/svelte-components": "4.5.2",
-    "@securancy/svelte-utilities": "2.2.1"
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
+    "@securancy/svelte-components": "5.0.0",
+    "@securancy/svelte-utilities": "2.3.0"
   },
   "scripts": {
     "dev": "vite dev",
@@ -54,6 +57,6 @@
     "preview": "vite preview",
     "package": "svelte-package && publint",
     "package-watch": "svelte-package -w",
-    "svelte-check": "svelte-check --fail-on-warnings --compiler-warnings \"css-unused-selector:ignore\""
+    "svelte-check": "svelte-check --fail-on-warnings --compiler-warnings \"css_unused_selector:ignore\""
   }
 }