@scality/data-browser-library 1.0.0-preview.11

package/dist/components/__tests__/MetadataSearch.test.js

@@ -0,0 +1,201 @@
+import { jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import user_event from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { createQueryWrapper } from "../../test/testUtils.js";
+import { MetadataSearch } from "../search/MetadataSearch.js";
+const renderMetadataSearch = (props = {}, initialEntries = [
+    "/bucket/test-bucket"
+])=>{
+    const QueryWrapper = createQueryWrapper();
+    return render(/*#__PURE__*/ jsx(QueryWrapper, {
+        children: /*#__PURE__*/ jsx(MemoryRouter, {
+            initialEntries: initialEntries,
+            children: /*#__PURE__*/ jsx(MetadataSearch, {
+                isError: false,
+                ...props
+            })
+        })
+    }));
+};
+describe("MetadataSearch", ()=>{
+    const getInput = ()=>screen.getByPlaceholderText(/Metadata Search/i);
+    it("renders search input with placeholder", ()=>{
+        renderMetadataSearch();
+        expect(getInput()).toBeInTheDocument();
+        expect(screen.getByPlaceholderText(/Metadata Search/i)).toBeInTheDocument();
+    });
+    it("renders search button", ()=>{
+        renderMetadataSearch();
+        expect(screen.getByRole("button", {
+            name: /execute metadata search/i
+        })).toBeInTheDocument();
+    });
+    it("search button is disabled when input is empty", ()=>{
+        renderMetadataSearch();
+        const searchButton = screen.getByRole("button", {
+            name: /execute metadata search/i
+        });
+        expect(searchButton).toBeDisabled();
+    });
+    it("search button is enabled when input has text", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        const searchButton = screen.getByRole("button", {
+            name: /execute metadata search/i
+        });
+        await user_event.type(input, "test query");
+        expect(searchButton).toBeEnabled();
+    });
+    it("shows search icon by default", ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        const searchIcon = input.parentElement?.querySelector('[aria-label*="Search"]');
+        expect(searchIcon).toBeInTheDocument();
+    });
+    it("shows check icon when metadata search is active", ()=>{
+        renderMetadataSearch({}, [
+            "/bucket/test-bucket?metadatasearch=test"
+        ]);
+        const input = getInput();
+        const checkIcon = input.parentElement?.querySelector('[aria-label*="Check"]');
+        expect(checkIcon).toBeInTheDocument();
+    });
+    it("shows error icon when error prop is true", ()=>{
+        renderMetadataSearch({
+            isError: true
+        });
+        const input = getInput();
+        const errorIcon = input.parentElement?.querySelector('[aria-label*="Close"]');
+        expect(errorIcon).toBeInTheDocument();
+    });
+    it("populates input with existing search query from URL", ()=>{
+        renderMetadataSearch({}, [
+            "/bucket/test-bucket?metadatasearch=existing+query"
+        ]);
+        const input = getInput();
+        expect(input).toHaveValue("existing query");
+    });
+    it("shows reset button when input has text", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        await user_event.type(input, "test query");
+        expect(screen.getByRole("button", {
+            name: /clear search input/i
+        })).toBeInTheDocument();
+    });
+    it("clears input when reset button is clicked", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        await user_event.type(input, "test query");
+        const resetButton = screen.getByRole("button", {
+            name: /clear search input/i
+        });
+        fireEvent.click(resetButton);
+        expect(input).toHaveValue("");
+    });
+    it("shows hints when input is clicked and empty", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        fireEvent.click(input);
+        await waitFor(()=>{
+            expect(screen.getByText("Suggestions")).toBeInTheDocument();
+        });
+    });
+    it("does not show hints when input has text", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        await user_event.type(input, "test");
+        fireEvent.click(input);
+        expect(screen.queryByText("Suggestions")).not.toBeInTheDocument();
+    });
+    it("hides hints when clicking outside", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        fireEvent.click(input);
+        await waitFor(()=>{
+            expect(screen.getByText("Suggestions")).toBeInTheDocument();
+        });
+        fireEvent.mouseDown(document.body);
+        await waitFor(()=>{
+            expect(screen.queryByText("Suggestions")).not.toBeInTheDocument();
+        });
+    });
+    it("displays search hint examples", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        fireEvent.click(input);
+        await waitFor(()=>{
+            expect(screen.getByText('files with extension ".pdf"')).toBeInTheDocument();
+            expect(screen.getByText("files bigger than 1MB")).toBeInTheDocument();
+            expect(screen.getByText("files tagged with color blue")).toBeInTheDocument();
+        });
+    });
+    it("applies hint to input when hint is clicked", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        fireEvent.click(input);
+        await waitFor(()=>{
+            expect(screen.getByText("Suggestions")).toBeInTheDocument();
+        });
+        const pdfHint = screen.getByText('files with extension ".pdf"');
+        fireEvent.click(pdfHint);
+        expect(input).toHaveValue("key like /pdf$/");
+        expect(screen.queryByText("Suggestions")).not.toBeInTheDocument();
+    });
+    it("focuses input after hint is selected", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        fireEvent.click(input);
+        await waitFor(()=>{
+            expect(screen.getByText("Suggestions")).toBeInTheDocument();
+        });
+        const hint = screen.getByText("files bigger than 1MB");
+        fireEvent.click(hint);
+        expect(input).toHaveFocus();
+    });
+    it("submits search when form is submitted", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        const searchButton = screen.getByRole("button", {
+            name: /execute metadata search/i
+        });
+        await user_event.type(input, "content-type=application/pdf");
+        fireEvent.click(searchButton);
+        expect(input).toHaveValue("content-type=application/pdf");
+    });
+    it("submits search when Enter key is pressed", async ()=>{
+        renderMetadataSearch();
+        const input = getInput();
+        await user_event.type(input, "key like /test$/");
+        fireEvent.submit(input.closest("form"));
+        expect(input).toHaveValue("key like /test$/");
+    });
+    it("is hidden when prefix points to a file", ()=>{
+        const { container } = renderMetadataSearch({}, [
+            "/bucket/test-bucket?prefix=folder/file.txt"
+        ]);
+        const form = container.querySelector("form");
+        expect(form).toHaveStyle({
+            visibility: "hidden"
+        });
+    });
+    it("is hidden when prefix is a folder", ()=>{
+        const { container } = renderMetadataSearch({}, [
+            "/bucket/test-bucket?prefix=folder/"
+        ]);
+        const form = container.querySelector("form");
+        expect(form).toHaveStyle({
+            visibility: "hidden"
+        });
+    });
+    it("prevents search submission when prefix points to a file", async ()=>{
+        const { container } = renderMetadataSearch({}, [
+            "/bucket/test-bucket?prefix=folder/file.txt"
+        ]);
+        const input = getInput();
+        const searchButton = container.querySelector('button[type="submit"]');
+        await user_event.type(input, "test query");
+        expect(searchButton).toBeDisabled();
+    });
+});

package/dist/components/__tests__/ObjectList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/ObjectList.test.js

@@ -0,0 +1,283 @@
+import { jsx } from "react/jsx-runtime";
+import { fireEvent, render, renderHook, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { createTestWrapper, mockOffsetSize, setupMswServer } from "../../test/testUtils.js";
+import { useListObjectVersions, useListObjects } from "../../hooks/index.js";
+import { ObjectList } from "../objects/ObjectList.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_useFeatures_js_1facdd0d__ from "../../utils/useFeatures.js";
+setupMswServer();
+const renderObjectList = (props = {})=>{
+    const Wrapper = createTestWrapper();
+    return render(/*#__PURE__*/ jsx(MemoryRouter, {
+        children: /*#__PURE__*/ jsx(Wrapper, {
+            children: /*#__PURE__*/ jsx(ObjectList, {
+                bucketName: "test-bucket",
+                prefix: "",
+                onObjectSelect: jest.fn(),
+                onPrefixChange: jest.fn(),
+                ...props
+            })
+        })
+    }));
+};
+describe("ObjectList", ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+        mockOffsetSize(800, 600);
+        jest.spyOn(__WEBPACK_EXTERNAL_MODULE__utils_useFeatures_js_1facdd0d__, "useFeatures").mockReturnValue(false);
+    });
+    afterEach(()=>{
+        jest.restoreAllMocks();
+    });
+    it("shows a table with proper headers", async ()=>{
+        renderObjectList();
+        await waitFor(()=>{
+            expect(screen.getByRole("grid")).toBeInTheDocument();
+        });
+        expect(screen.getByText("Name")).toBeInTheDocument();
+        expect(screen.getByText("Modified on")).toBeInTheDocument();
+        expect(screen.getByText("Size")).toBeInTheDocument();
+        expect(screen.getByText("Storage Location")).toBeInTheDocument();
+    });
+    it("renders content and handles interactions", async ()=>{
+        const onObjectSelect = jest.fn();
+        const onPrefixChange = jest.fn();
+        renderObjectList({
+            onObjectSelect,
+            onPrefixChange
+        });
+        await waitFor(()=>{
+            expect(screen.getByText("file1.txt")).toBeInTheDocument();
+        });
+        expect(screen.getByText("file1.txt")).toBeInTheDocument();
+        expect(screen.getByText("file2.txt")).toBeInTheDocument();
+        expect(screen.getByText("folder1/")).toBeInTheDocument();
+        fireEvent.click(screen.getByText("file1.txt"));
+        expect(onObjectSelect).toHaveBeenCalledWith(expect.objectContaining({
+            Key: "file1.txt",
+            type: "object"
+        }));
+        fireEvent.click(screen.getByText("folder1/"));
+        expect(onPrefixChange).toHaveBeenCalledWith("folder1/");
+        const rows = screen.getAllByRole("row");
+        expect(rows.length).toBe(4);
+    });
+    it("displays data formatting correctly", async ()=>{
+        renderObjectList();
+        await waitFor(()=>{
+            expect(screen.getByText("file1.txt")).toBeInTheDocument();
+        });
+        const gridElement = screen.getByRole("grid");
+        expect(gridElement).toHaveTextContent("2023");
+        const dateElements = screen.getAllByText(/2023/);
+        expect(dateElements.length).toBeGreaterThanOrEqual(2);
+        expect(screen.getByText("1 KB")).toBeInTheDocument();
+        expect(screen.getByText("512 B")).toBeInTheDocument();
+        const defaultElements = screen.getAllByText("default");
+        expect(defaultElements.length).toBeGreaterThan(0);
+        const dashes = screen.getAllByText("-");
+        expect(dashes.length).toBeGreaterThanOrEqual(2);
+    });
+    it("handles edge cases gracefully", async ()=>{
+        renderObjectList({
+            bucketName: "empty-bucket"
+        });
+        await waitFor(()=>{
+            expect(screen.getByRole("grid")).toBeInTheDocument();
+        });
+        expect(screen.getByText("Name")).toBeInTheDocument();
+        const mockOnObjectSelect = jest.fn();
+        const mockOnPrefixChange = jest.fn();
+        renderObjectList({
+            onObjectSelect: mockOnObjectSelect,
+            onPrefixChange: mockOnPrefixChange
+        });
+        await waitFor(()=>{
+            expect(screen.getByText("file1.txt")).toBeInTheDocument();
+        });
+        expect(()=>{
+            fireEvent.click(screen.getByText("file1.txt"));
+            fireEvent.click(screen.getByText("folder1/"));
+        }).not.toThrow();
+        expect(mockOnObjectSelect).toHaveBeenCalled();
+        expect(mockOnPrefixChange).toHaveBeenCalled();
+    });
+    it("handles loading states", async ()=>{
+        renderObjectList();
+        expect(screen.getByRole("grid")).toBeInTheDocument();
+        await waitFor(()=>{
+            expect(screen.getByText("file1.txt")).toBeInTheDocument();
+        });
+        expect(screen.getByText("file1.txt")).toBeInTheDocument();
+        expect(screen.getByText("file2.txt")).toBeInTheDocument();
+        expect(screen.getByText("folder1/")).toBeInTheDocument();
+    });
+    it("prevents event propagation when clicking links", async ()=>{
+        const onObjectSelect = jest.fn();
+        const onPrefixChange = jest.fn();
+        renderObjectList({
+            onObjectSelect,
+            onPrefixChange
+        });
+        await waitFor(()=>{
+            expect(screen.getByText("file1.txt")).toBeInTheDocument();
+        });
+        fireEvent.click(screen.getByText("file1.txt"));
+        expect(onObjectSelect).toHaveBeenCalledWith(expect.objectContaining({
+            Key: "file1.txt",
+            type: "object"
+        }));
+        expect(onPrefixChange).not.toHaveBeenCalled();
+    });
+    it("supports prefix-based navigation", async ()=>{
+        renderObjectList({
+            prefix: "folder1/"
+        });
+        await waitFor(()=>{
+            expect(screen.getByRole("grid")).toBeInTheDocument();
+        });
+        expect(screen.getByText("Name")).toBeInTheDocument();
+    });
+    it("displays correct icons for folders and files", async ()=>{
+        renderObjectList();
+        await waitFor(()=>{
+            expect(screen.getByText("file1.txt")).toBeInTheDocument();
+        });
+        expect(screen.getByText("file1.txt")).toBeInTheDocument();
+        expect(screen.getByText("file2.txt")).toBeInTheDocument();
+        expect(screen.getByText("folder1/")).toBeInTheDocument();
+        const nameCells = screen.getAllByRole("gridcell").filter((cell)=>cell.textContent?.includes("folder1/") || cell.textContent?.includes("file1.txt") || cell.textContent?.includes("file2.txt"));
+        expect(nameCells.length).toBe(3);
+        nameCells.forEach((cell)=>{
+            const iconElement = cell.querySelector("svg, img, i");
+            const linkElement = cell.querySelector("a");
+            expect(iconElement).toBeInTheDocument();
+            expect(linkElement).toBeInTheDocument();
+        });
+    });
+    it("integrates with MultiSelectableContent", async ()=>{
+        renderObjectList();
+        await waitFor(()=>{
+            expect(screen.getByText("file1.txt")).toBeInTheDocument();
+        });
+        expect(screen.getByRole("grid")).toBeInTheDocument();
+        const rows = screen.getAllByRole("row");
+        expect(rows.length).toBe(4);
+    });
+    it("handles infinite scroll pagination correctly", async ()=>{
+        renderObjectList({
+            bucketName: "paginated-bucket"
+        });
+        await waitFor(()=>{
+            expect(screen.getByText("file1.txt")).toBeInTheDocument();
+        });
+        expect(screen.getByText("file1.txt")).toBeInTheDocument();
+        expect(screen.getByText("file2.txt")).toBeInTheDocument();
+        expect(screen.getByText("folder1/")).toBeInTheDocument();
+        expect(screen.queryByText("file3.txt")).not.toBeInTheDocument();
+        const table = screen.getByRole("grid");
+        expect(table).toBeInTheDocument();
+        const tableContent = table.querySelector('[role="rowgroup"]') || table.querySelector('[data-testid*="multi-selectable"]');
+        expect(tableContent).toBeInTheDocument();
+        const rows = screen.getAllByRole("row");
+        expect(rows.length).toBe(4);
+        expect(()=>{
+            screen.getByText("Name");
+            screen.getByText("Modified on");
+            screen.getByText("Size");
+            screen.getByText("Storage Location");
+        }).not.toThrow();
+        expect(screen.getByText("1 KB")).toBeInTheDocument();
+        expect(screen.getByText("512 B")).toBeInTheDocument();
+    });
+    it("integrates with infinite query hook for data loading", async ()=>{
+        const { result } = renderHook(()=>useListObjects({
+                Bucket: "paginated-bucket",
+                MaxKeys: 20,
+                Delimiter: "/"
+            }), {
+            wrapper: createTestWrapper()
+        });
+        await waitFor(()=>{
+            expect(result.current.isSuccess).toBe(true);
+        });
+        expect(result.current.data).toBeDefined();
+        expect(result.current.hasNextPage).toBe(true);
+        expect(typeof result.current.fetchNextPage).toBe("function");
+        expect(result.current.isFetchingNextPage).toBe(false);
+        const firstPage = result.current.data?.pages[0];
+        expect(firstPage).toBeDefined();
+        expect(firstPage?.Contents).toHaveLength(2);
+        expect(firstPage?.CommonPrefixes).toHaveLength(1);
+        result.current.fetchNextPage();
+        await waitFor(()=>{
+            const updatedData = result.current.data;
+            expect(updatedData?.pages).toHaveLength(2);
+        });
+        const secondPage = result.current.data?.pages[1];
+        expect(secondPage).toBeDefined();
+        expect(secondPage?.Contents).toHaveLength(1);
+        expect(result.current.hasNextPage).toBe(false);
+    });
+    it("renders List Versions toggle", async ()=>{
+        renderObjectList();
+        await waitFor(()=>{
+            expect(screen.getByText("List Versions")).toBeInTheDocument();
+        });
+        const toggleLabel = screen.getByText(/list versions/i);
+        const toggle = toggleLabel.closest("label")?.querySelector('input[type="checkbox"]');
+        expect(toggle).toBeInTheDocument();
+        expect(toggle).not.toBeChecked();
+    });
+    it("shows Version ID column when toggle is enabled", async ()=>{
+        renderObjectList();
+        await waitFor(()=>{
+            expect(screen.getByText("List Versions")).toBeInTheDocument();
+        });
+        const toggleLabel = screen.getByText(/list versions/i);
+        const toggle = toggleLabel.closest("label")?.querySelector('input[type="checkbox"]');
+        fireEvent.click(toggle);
+        await waitFor(()=>{
+            expect(screen.getByText("Version ID")).toBeInTheDocument();
+        });
+    });
+    it("does not show Version ID column by default", async ()=>{
+        renderObjectList();
+        await waitFor(()=>{
+            expect(screen.getByText("Name")).toBeInTheDocument();
+        });
+        expect(screen.queryByText("Version ID")).not.toBeInTheDocument();
+    });
+    it("integrates with version listing hook", async ()=>{
+        const { result } = renderHook(()=>useListObjectVersions({
+                Bucket: "test-bucket",
+                MaxKeys: 20,
+                Delimiter: "/"
+            }), {
+            wrapper: createTestWrapper()
+        });
+        await waitFor(()=>{
+            expect(result.current.isSuccess).toBe(true);
+        });
+        expect(result.current.data).toBeDefined();
+        expect(typeof result.current.fetchNextPage).toBe("function");
+        const firstPage = result.current.data?.pages[0];
+        expect(firstPage).toBeDefined();
+    });
+    it("renders table search when metadata-search feature is disabled", async ()=>{
+        jest.spyOn(__WEBPACK_EXTERNAL_MODULE__utils_useFeatures_js_1facdd0d__, "useFeatures").mockReturnValue(false);
+        renderObjectList();
+        await waitFor(()=>{
+            expect(screen.getByRole("grid")).toBeInTheDocument();
+        });
+        expect(screen.queryByPlaceholderText(/Metadata Search/i)).not.toBeInTheDocument();
+    });
+    it("renders MetadataSearch component when metadata-search feature is enabled", async ()=>{
+        jest.spyOn(__WEBPACK_EXTERNAL_MODULE__utils_useFeatures_js_1facdd0d__, "useFeatures").mockReturnValue(true);
+        renderObjectList();
+        await waitFor(()=>{
+            expect(screen.getByRole("grid")).toBeInTheDocument();
+        });
+        expect(screen.getByPlaceholderText(/Metadata Search/i)).toBeInTheDocument();
+    });
+});

package/dist/components/__tests__/UploadButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/UploadButton.test.js

@@ -0,0 +1,144 @@
+import { jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import user_event from "@testing-library/user-event";
+import { createTestWrapper } from "../../test/testUtils.js";
+import { UploadButton } from "../objects/UploadButton.js";
+describe("UploadButton - Core Functionality", ()=>{
+    const defaultProps = {
+        bucket: "test-bucket",
+        prefix: "test-prefix"
+    };
+    const renderUploadButton = (props = {})=>{
+        const Wrapper = createTestWrapper();
+        return render(/*#__PURE__*/ jsx(Wrapper, {
+            children: /*#__PURE__*/ jsx(UploadButton, {
+                ...defaultProps,
+                ...props
+            })
+        }));
+    };
+    it("renders upload button with default label", ()=>{
+        renderUploadButton();
+        expect(screen.getByRole("button", {
+            name: /upload/i
+        })).toBeInTheDocument();
+    });
+    it("renders upload button", ()=>{
+        renderUploadButton();
+        expect(screen.getByRole("button", {
+            name: /upload/i
+        })).toBeInTheDocument();
+    });
+    it("opens modal when upload button is clicked", async ()=>{
+        renderUploadButton();
+        const uploadButton = screen.getByRole("button", {
+            name: /upload/i
+        });
+        fireEvent.click(uploadButton);
+        await waitFor(()=>{
+            expect(screen.getByText("Upload Files")).toBeInTheDocument();
+        });
+    });
+    it("closes modal when cancel button is clicked", async ()=>{
+        renderUploadButton();
+        const uploadButton = screen.getByRole("button", {
+            name: /upload/i
+        });
+        fireEvent.click(uploadButton);
+        await waitFor(()=>{
+            expect(screen.getByText("Upload Files")).toBeInTheDocument();
+        });
+        const cancelButton = screen.getByRole("button", {
+            name: /cancel/i
+        });
+        fireEvent.click(cancelButton);
+        await waitFor(()=>{
+            expect(screen.queryByText("Upload Files")).not.toBeInTheDocument();
+        });
+    });
+    it("displays empty state initially", async ()=>{
+        renderUploadButton();
+        const uploadButton = screen.getByRole("button", {
+            name: /upload/i
+        });
+        fireEvent.click(uploadButton);
+        await waitFor(()=>{
+            expect(screen.getByText("Drag and drop files and folders here")).toBeInTheDocument();
+            expect(screen.getByRole("button", {
+                name: /add files/i
+            })).toBeInTheDocument();
+        });
+    });
+    it("can add files and shows upload button enabled", async ()=>{
+        const onUploadSuccess = jest.fn();
+        renderUploadButton({
+            onUploadSuccess
+        });
+        const uploadButton = screen.getByRole("button", {
+            name: /upload/i
+        });
+        fireEvent.click(uploadButton);
+        await waitFor(()=>{
+            expect(screen.getByText("Upload Files")).toBeInTheDocument();
+        });
+        const uploadButtons = screen.getAllByRole("button", {
+            name: "Upload"
+        });
+        const modalUploadButton = uploadButtons.find((button)=>!button.querySelector("svg"));
+        expect(modalUploadButton).toBeDisabled();
+        const fileInput = screen.getByRole("presentation").querySelector('input[type="file"]');
+        const testFile = new File([
+            "test content"
+        ], "test.txt", {
+            type: "text/plain"
+        });
+        await user_event.upload(fileInput, testFile);
+        await waitFor(()=>{
+            expect(screen.getByText("test.txt")).toBeInTheDocument();
+            expect(screen.getByText("12 B")).toBeInTheDocument();
+        });
+        expect(modalUploadButton).toBeEnabled();
+    });
+    it("displays correct bucket and prefix information", ()=>{
+        const customBucket = "custom-bucket";
+        const customPrefix = "custom/prefix";
+        renderUploadButton({
+            bucket: customBucket,
+            prefix: customPrefix
+        });
+        expect(screen.getByRole("button", {
+            name: /upload/i
+        })).toBeInTheDocument();
+    });
+    it("handles different button variants", ()=>{
+        renderUploadButton({
+            variant: "primary"
+        });
+        const button = screen.getByRole("button", {
+            name: /upload/i
+        });
+        expect(button).toBeInTheDocument();
+    });
+    it("resets state when modal is closed", async ()=>{
+        renderUploadButton();
+        const uploadButton = screen.getByRole("button", {
+            name: /upload/i
+        });
+        fireEvent.click(uploadButton);
+        await waitFor(()=>{
+            expect(screen.getByText("Upload Files")).toBeInTheDocument();
+        });
+        const cancelButton = screen.getByRole("button", {
+            name: /cancel/i
+        });
+        fireEvent.click(cancelButton);
+        await waitFor(()=>{
+            expect(screen.queryByText("Upload Files")).not.toBeInTheDocument();
+        });
+        fireEvent.click(uploadButton);
+        await waitFor(()=>{
+            expect(screen.getByText("Upload Files")).toBeInTheDocument();
+            expect(screen.getByText("Drag and drop files and folders here")).toBeInTheDocument();
+        });
+    });
+});

package/dist/components/buckets/BucketCreate.d.ts

@@ -0,0 +1,49 @@
+import Joi from "joi";
+import { ObjectLockRetentionMode } from "@aws-sdk/client-s3";
+export declare const bucketErrorMessage = "Bucket names can include only lowercase letters, numbers, dots (.), and hyphens (-)";
+export declare const bucketNameValidationSchema: Joi.StringSchema<string>;
+export declare const baseBucketCreateSchema: Joi.ObjectSchema<any>;
+export type BucketCreateFormData = {
+    name: string;
+    isVersioning: boolean;
+    isObjectLockEnabled: boolean;
+    isDefaultRetentionEnabled: boolean;
+    retentionMode: ObjectLockRetentionMode;
+    retentionPeriod: number;
+    retentionPeriodFrequencyChoice: string;
+    [key: string]: unknown;
+};
+type BucketCreateProps = {
+    subTitle?: string;
+    /**
+     * Custom validation schema - if not provided, uses baseBucketCreateSchema
+     *
+     * To enable uniqueness validation, provide context with existing bucket names:
+     * ```ts
+     * const schema = baseBucketCreateSchema.append({...});
+     * <BucketCreate
+     *   validationSchema={schema}
+     *   validationContext={{ existingBuckets: ['bucket1', 'bucket2'] }}
+     * />
+     * ```
+     */
+    validationSchema?: Joi.ObjectSchema;
+    /**
+     * Validation context passed to Joi schema
+     * Use this to provide existing bucket names for uniqueness validation
+     */
+    validationContext?: {
+        existingBuckets?: string[];
+        [key: string]: unknown;
+    };
+    /** Default form values - merged with base defaults */
+    defaultValues?: Partial<BucketCreateFormData>;
+    /** Children rendered between bucket name and versioning sections */
+    children?: React.ReactNode;
+    /** Callback when form is submitted with valid data */
+    onSubmit?: (data: BucketCreateFormData) => void;
+    /** Callback when cancel is clicked */
+    onCancel?: () => void;
+};
+export declare const BucketCreate: ({ subTitle, validationSchema, validationContext, defaultValues: customDefaultValues, children, onSubmit: onSubmitProp, onCancel: onCancelProp, }: BucketCreateProps) => import("react/jsx-runtime").JSX.Element;
+export default BucketCreate;