@webiny/admin-ui 6.5.0-beta.4 → 6.5.0-beta.5

package/DataTable/DataTable.d.ts

@@ -1,5 +1,15 @@
 import React from "react";
-import type { ColumnSort, OnChangeFn, Row, SortingState, VisibilityState } from "@tanstack/react-table";
+import type { ColumnSort, ColumnVisibilityState, OnChangeFn, Row, RowData, SortingState } from "@tanstack/react-table";
+declare const features: {
+    columnResizingFeature: import("@tanstack/table-core").TableFeature;
+    columnSizingFeature: import("@tanstack/table-core").TableFeature;
+    columnVisibilityFeature: import("@tanstack/table-core").TableFeature;
+    rowSelectionFeature: import("@tanstack/table-core").TableFeature;
+    rowSortingFeature: import("@tanstack/table-core").TableFeature;
+    sortedRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
+    coreRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
+};
+type Features = typeof features;
 interface DataTableColumn<T> {
     header?: string | number | React.JSX.Element;
     cell?: (row: T) => string | number | React.JSX.Element | null;
@@ -18,13 +28,13 @@ type DataTableDefaultData = {
     id: string;
     $selectable?: boolean;
 };
-type DataTableRow<T> = Row<DataTableDefaultData & T>;
+type DataTableRow<T extends RowData> = Row<Features, DataTableDefaultData & T>;
 type DataTableSorting = SortingState;
 type DataTableColumnSort = ColumnSort;
 type OnDataTableSortingChange = OnChangeFn<DataTableSorting>;
-type DataTableColumnVisibility = VisibilityState;
+type DataTableColumnVisibility = ColumnVisibilityState;
 type OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;
-interface DataTableProps<TEntry> {
+interface DataTableProps<TEntry extends RowData> {
     /**
      * Show or hide borders.
      */
@@ -52,7 +62,7 @@ interface DataTableProps<TEntry> {
     /**
      * Callback that is called to determine if the row is selectable.
      */
-    isRowSelectable?: (row: Row<TEntry>) => boolean;
+    isRowSelectable?: (row: Row<Features, TEntry>) => boolean;
     /**
      * Render the skeleton state while data are loading.
      */
@@ -106,4 +116,4 @@ declare const DataTable: typeof DecoratableDataTable & {
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
-export { DataTable, type DataTableProps, type DataTableColumn, type DataTableColumns, type DataTableDefaultData, type DataTableRow, type DataTableSorting, type DataTableColumnSort, type OnDataTableSortingChange, type DataTableColumnVisibility, type OnDataTableColumnVisibilityChange };
+export { DataTable, type Features, type DataTableProps, type DataTableColumn, type DataTableColumns, type DataTableDefaultData, type DataTableRow, type DataTableSorting, type DataTableColumnSort, type OnDataTableSortingChange, type DataTableColumnVisibility, type OnDataTableColumnVisibilityChange };

package/DataTable/DataTable.js

@@ -1,10 +1,19 @@
 import react, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { columnResizingFeature, columnSizingFeature, columnVisibilityFeature, createCoreRowModel, createSortedRowModel, flexRender, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
 import { CheckboxPrimitive } from "../Checkbox/index.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { Table } from "../Table/index.js";
 import { ColumnSorter, ColumnsVisibility } from "./components/index.js";
 import { cn, makeDecoratable } from "../utils.js";
+const features = tableFeatures({
+    columnResizingFeature: columnResizingFeature,
+    columnSizingFeature: columnSizingFeature,
+    columnVisibilityFeature: columnVisibilityFeature,
+    rowSelectionFeature: rowSelectionFeature,
+    rowSortingFeature: rowSortingFeature,
+    sortedRowModel: createSortedRowModel(),
+    coreRowModel: createCoreRowModel()
+});
 const defineColumns = (columns, options)=>{
     const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;
     return useMemo(()=>{
@@ -20,7 +29,7 @@ const defineColumns = (columns, options)=>{
                 header: ()=>header,
                 cell: (props)=>{
                     if (cell && "function" == typeof cell) return cell(props.row.original);
-                    return props.getValue() ? String(props.getValue()) : null;
+                    else return props.getValue() ? String(props.getValue()) : null;
                 },
                 enableSorting,
                 meta: {
@@ -141,7 +150,7 @@ const DecoratableDataTable = ({ bordered, canSelectAllRows = true, columnVisibil
             ...Object.keys(newSelection).filter((x)=>!(x in rowSelection))
         ];
         if (1 === toggledRows.length && "function" == typeof onToggleRow) return void onToggleRow(data[parseInt(toggledRows[0])]);
-        if ("function" == typeof onSelectRow) {
+        else if ("function" == typeof onSelectRow) {
             const selection = Object.keys(newSelection).map((key)=>data[parseInt(key)]);
             onSelectRow(selection);
         }
@@ -158,7 +167,8 @@ const DecoratableDataTable = ({ bordered, canSelectAllRows = true, columnVisibil
         onToggleRow,
         loading
     });
-    const table = useReactTable({
+    const table = useTable({
+        features: features,
         columnResizeMode: "onChange",
         columns,
         data,
@@ -167,8 +177,6 @@ const DecoratableDataTable = ({ bordered, canSelectAllRows = true, columnVisibil
         enableRowSelection: isRowSelectable,
         enableSorting: !!onSortingChange,
         enableSortingRemoval: false,
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
         manualSorting: true,
         onColumnVisibilityChange,
         onRowSelectionChange,

package/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable/DataTable.js","sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n    Cell,\n    Column,\n    ColumnDef,\n    ColumnSort,\n    OnChangeFn,\n    Row,\n    RowSelectionState,\n    SortingState,\n    VisibilityState\n} from \"@tanstack/react-table\";\nimport {\n    flexRender,\n    getCoreRowModel,\n    getSortedRowModel,\n    useReactTable\n} from \"@tanstack/react-table\";\nimport { CheckboxPrimitive } from \"~/Checkbox/index.js\";\nimport { Skeleton } from \"~/Skeleton/index.js\";\nimport { Table } from \"~/Table/index.js\";\nimport { ColumnSorter, ColumnsVisibility } from \"./components/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ninterface DataTableColumn<T> {\n    /*\n     * Column header component.\n     */\n    header?: string | number | React.JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | React.JSX.Element | null;\n    /*\n     * Column size.\n     */\n    size?: number;\n    /*\n     * Should truncate?\n     */\n    truncate?: boolean;\n    /*\n     * Column class names.\n     */\n    className?: string;\n    /*\n     * Enable column sorting.\n     */\n    enableSorting?: boolean;\n    /*\n     * Enable column resizing.\n     */\n    enableResizing?: boolean;\n    /*\n     * Enable column visibility toggling.\n     */\n    enableHiding?: boolean;\n    /*\n     * Accessor key for the column data path.\n     */\n    accessorKey?: string;\n}\n\ntype DataTableColumns<T> = {\n    [P in keyof T]?: DataTableColumn<T>;\n};\n\ntype DataTableDefaultData = {\n    id: string;\n    /*\n     * Define if a specific row can be selected.\n     */\n    $selectable?: boolean;\n};\n\ntype DataTableRow<T> = Row<DataTableDefaultData & T>;\n\ntype DataTableSorting = SortingState;\n\ntype DataTableColumnSort = ColumnSort;\n\ntype OnDataTableSortingChange = OnChangeFn<DataTableSorting>;\n\ntype DataTableColumnVisibility = VisibilityState;\n\ntype OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;\n\ninterface DataTableProps<TEntry> {\n    /**\n     * Show or hide borders.\n     */\n    bordered?: boolean;\n    /**\n     * Controls whether \"select all\" action is allowed.\n     */\n    canSelectAllRows?: boolean;\n    /**\n     * Columns definition.\n     */\n    columns: DataTableColumns<TEntry>;\n    /**\n     * The column visibility state.\n     */\n    columnVisibility?: DataTableColumnVisibility;\n    /**\n     * Callback that receives current column visibility state.\n     */\n    onColumnVisibilityChange?: OnDataTableColumnVisibilityChange;\n    /**\n     * Data to display into DataTable body.\n     */\n    data: TEntry[];\n    /**\n     * Callback that is called to determine if the row is selectable.\n     */\n    isRowSelectable?: (row: Row<TEntry>) => boolean;\n    /**\n     * Render the skeleton state while data are loading.\n     */\n    loading?: boolean;\n    /**\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: TEntry[]) => void;\n    /**\n     * Callback that receives the toggled row.\n     */\n    onToggleRow?: (row: TEntry) => void;\n    /**\n     * Callback that receives current sorting state.\n     */\n    onSortingChange?: OnDataTableSortingChange;\n    /**\n     * Selected rows.\n     */\n    selectedRows?: TEntry[];\n    /**\n     * Sorting state.\n     */\n    sorting?: DataTableSorting;\n    /**\n     * Initial sorting state.\n     */\n    initialSorting?: DataTableSorting;\n    /**\n     * Enable sticky header.\n     */\n    stickyHeader?: boolean;\n}\n\ninterface DefineColumnsOptions<TEntry> {\n    canSelectAllRows: boolean;\n    onSelectRow?: DataTableProps<TEntry>[\"onSelectRow\"];\n    onToggleRow: DataTableProps<TEntry>[\"onToggleRow\"];\n    loading: DataTableProps<TEntry>[\"loading\"];\n}\n\nconst defineColumns = <T,>(\n    columns: DataTableProps<T>[\"columns\"],\n    options: DefineColumnsOptions<T>\n): ColumnDef<T>[] => {\n    const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;\n\n    return useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<T>[] = columnsList.map(column => {\n            const {\n                accessorKey,\n                cell,\n                className,\n                enableHiding = true,\n                enableResizing = true,\n                enableSorting = false,\n                header,\n                truncate = true,\n                id,\n                size = 100\n            } = column;\n\n            return {\n                id,\n                accessorKey: accessorKey || id,\n                header: () => header,\n                cell: props => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(props.row.original);\n                    } else {\n                        // Automatically convert any cell value to a string for rendering,\n                        // ensuring the table displays values correctly. This aligns with React's\n                        // rendering, which expects JSX, strings or null.\n                        // https://github.com/TanStack/table/issues/1042\n                        return props.getValue() ? String(props.getValue()) : null;\n                    }\n                },\n                enableSorting,\n                meta: {\n                    className,\n                    truncate\n                },\n                enableResizing,\n                size,\n                enableHiding\n            };\n        });\n\n        let columnsDefs = defaults;\n        const firstColumn = defaults[0];\n        const isSelectable = onToggleRow || onSelectRow;\n\n        if (isSelectable && firstColumn) {\n            columnsDefs = [\n                {\n                    ...firstColumn,\n                    accessorKey: firstColumn.id as string,\n                    header: props => {\n                        if (!props) {\n                            return null;\n                        }\n\n                        return (\n                            <div className={\"flex items-center gap-xl\"}>\n                                <CheckboxPrimitive\n                                    indeterminate={props.table.getIsSomeRowsSelected()}\n                                    checked={props.table.getIsAllRowsSelected()}\n                                    onChange={props.table.toggleAllPageRowsSelected}\n                                    aria-label=\"Select all\"\n                                    disabled={!canSelectAllRows}\n                                    onClick={e => e.stopPropagation()}\n                                />\n                                {firstColumn.header\n                                    ? React.createElement(firstColumn.header, props)\n                                    : null}\n                            </div>\n                        );\n                    },\n                    cell: props => {\n                        if (!props) {\n                            return null;\n                        }\n                        return (\n                            <div className={\"flex items-center gap-xl\"}>\n                                <CheckboxPrimitive\n                                    checked={props.row.getIsSelected()}\n                                    onChange={value => props.row.toggleSelected(!!value)}\n                                    disabled={!props.row.getCanSelect()}\n                                    aria-label=\"Select row\"\n                                    className={cn(!props.row.getCanSelect() ? \"invisible\" : \"\")}\n                                />\n                                {firstColumn.cell\n                                    ? React.createElement(firstColumn.cell, props)\n                                    : null}\n                            </div>\n                        );\n                    }\n                },\n                ...defaults.slice(1)\n            ];\n        }\n\n        return columnsDefs.map(column => {\n            if (loading) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton type={\"text\"} size={\"md\"} />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, onToggleRow, loading]);\n};\n\nconst typedMemo: <T>(component: T) => T = memo;\n\ninterface TableCellProps<T> {\n    cell: Cell<T, unknown>;\n    getColumnWidth: (column: Column<T>) => number;\n}\n\nconst TableCell = <T,>({ cell, getColumnWidth }: TableCellProps<T>) => {\n    const width = getColumnWidth(cell.column);\n\n    return (\n        <Table.Cell {...cell.column.columnDef.meta} style={{ width, maxWidth: width }}>\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </Table.Cell>\n    );\n};\n\nconst MemoTableCell = typedMemo(TableCell);\n\ninterface TableRowProps<T> {\n    selected: boolean;\n    cells: Cell<T, unknown>[];\n    getColumnWidth: (column: Column<T>) => number;\n}\n\nconst TableRow = <T,>({ selected, cells, getColumnWidth }: TableRowProps<T>) => {\n    return (\n        <Table.Row selected={selected}>\n            {cells.map(cell => (\n                <MemoTableCell<T> key={cell.id} cell={cell} getColumnWidth={getColumnWidth} />\n            ))}\n        </Table.Row>\n    );\n};\n\nconst MemoTableRow = typedMemo(TableRow);\n\n/**\n * Empty array must be defined outside the React component so it does not force rerendering of the DataTable\n */\nconst emptyArray = Array(10).fill({});\n\nconst DecoratableDataTable = <T extends Record<string, any> & DataTableDefaultData>({\n    bordered,\n    canSelectAllRows = true,\n    columnVisibility,\n    columns: initialColumns,\n    data: initialData,\n    initialSorting,\n    isRowSelectable,\n    loading,\n    onColumnVisibilityChange,\n    onSelectRow,\n    onSortingChange,\n    onToggleRow,\n    selectedRows = [],\n    sorting,\n    stickyHeader\n}: DataTableProps<T>) => {\n    const tableRef = useRef<HTMLDivElement>(null);\n    const [tableWidth, setTableWidth] = useState(1);\n\n    const data = loading ? emptyArray : initialData;\n\n    useEffect(() => {\n        const updateElementWidth = () => {\n            if (tableRef.current) {\n                const width = tableRef.current.clientWidth;\n                setTableWidth(width);\n            }\n        };\n\n        updateElementWidth();\n\n        window.addEventListener(\"resize\", updateElementWidth);\n\n        return () => {\n            window.removeEventListener(\"resize\", updateElementWidth);\n        };\n    }, [tableRef.current]);\n\n    const rowSelection = useMemo(() => {\n        return selectedRows.reduce<RowSelectionState>((acc, item) => {\n            const recordIndex = data.findIndex(rec => rec.id === item.id);\n            return { ...acc, [recordIndex]: true };\n        }, {});\n    }, [selectedRows, data]);\n\n    const onRowSelectionChange: OnChangeFn<RowSelectionState> = updater => {\n        const newSelection = typeof updater === \"function\" ? updater(rowSelection) : updater;\n\n        /**\n         * `@tanstack/react-table` isn't telling us what row was selected or deselected. It simply gives us\n         * the new selection state (an object with row indexes that are currently selected).\n         *\n         * To figure out what row was toggled, we need to calculate the difference between the old selection\n         * and the new selection. What we're doing here is:\n         * - find all items that were present in the previous selection, but are no longer present in the new selection\n         * - find all items that are present in the new selection, but were not present in the previous selection\n         */\n        const toggledRows = [\n            ...Object.keys(rowSelection).filter(x => !(x in newSelection)),\n            ...Object.keys(newSelection).filter(x => !(x in rowSelection))\n        ];\n\n        // If the difference is only 1 item, and `onToggleRow` is available, execute that.\n        if (toggledRows.length === 1 && typeof onToggleRow === \"function\") {\n            onToggleRow(data[parseInt(toggledRows[0])]);\n            return;\n        } else if (typeof onSelectRow === \"function\") {\n            const selection = Object.keys(newSelection).map(key => data[parseInt(key)]);\n            onSelectRow(selection);\n        }\n    };\n\n    const tableSorting = useMemo(() => {\n        if (!Array.isArray(sorting) || !sorting.length) {\n            return initialSorting;\n        }\n        return sorting;\n    }, [sorting]);\n\n    const columns = defineColumns(initialColumns, {\n        canSelectAllRows,\n        onSelectRow,\n        onToggleRow,\n        loading\n    });\n\n    const table = useReactTable<T>({\n        columnResizeMode: \"onChange\",\n        columns,\n        data,\n        enableColumnResizing: true,\n        enableHiding: !!onColumnVisibilityChange,\n        enableRowSelection: isRowSelectable,\n        enableSorting: !!onSortingChange,\n        enableSortingRemoval: false,\n        getCoreRowModel: getCoreRowModel(),\n        getSortedRowModel: getSortedRowModel(),\n        manualSorting: true,\n        onColumnVisibilityChange,\n        onRowSelectionChange,\n        onSortingChange,\n        state: {\n            columnVisibility,\n            rowSelection,\n            sorting: tableSorting\n        }\n    });\n\n    const getColumnWidth = useCallback(\n        (column: Column<T>): number => {\n            // Non-resizable columns (e.g. row-selection, actions) keep their fixed size.\n            if (!column.getCanResize()) {\n                return column.getSize();\n            }\n\n            /**\n             * Resizable columns share the space left after the fixed columns, proportionally to\n             * their own size. This makes the table always fill the full container width — even when\n             * columns are hidden — so trailing content (e.g. the columns-visibility cog) stays\n             * flush right instead of drifting left as columns are removed.\n             */\n            const visibleColumns = table.getVisibleLeafColumns();\n            const fixedTotal = visibleColumns\n                .filter(col => !col.getCanResize())\n                .reduce((total, col) => total + col.getSize(), 0);\n            const resizableTotal = visibleColumns\n                .filter(col => col.getCanResize())\n                .reduce((total, col) => total + col.getSize(), 0);\n\n            if (resizableTotal === 0) {\n                return column.getSize();\n            }\n\n            const available = Math.max(tableWidth - fixedTotal, 0);\n\n            return Math.ceil((column.getSize() * available) / resizableTotal);\n        },\n        [table, tableWidth]\n    );\n\n    /**\n     * Had to memoize the rows to avoid browser freeze.\n     */\n    const tableRows = useMemo(() => {\n        return table.getRowModel().rows;\n    }, [table, data, columns]);\n\n    return (\n        <div ref={tableRef}>\n            <Table bordered={bordered} sticky={stickyHeader}>\n                <Table.Header sticky={stickyHeader}>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <Table.Row key={headerGroup.id}>\n                            {headerGroup.headers.map((header, index) => {\n                                const isLastCell = index === headerGroup.headers.length - 1;\n                                const width = getColumnWidth(header.column);\n\n                                return (\n                                    <Table.Head\n                                        key={header.id}\n                                        {...header.column.columnDef.meta}\n                                        colSpan={header.colSpan}\n                                        style={{ width, maxWidth: width }}\n                                    >\n                                        {header.isPlaceholder ? null : (\n                                            <ColumnSorter\n                                                onClick={header.column.getToggleSortingHandler()}\n                                                sortable={header.column.getCanSort()}\n                                            >\n                                                <div\n                                                    className={cn({\n                                                        \"w-full overflow-hidden whitespace-nowrap\": true,\n                                                        truncate: !isLastCell\n                                                    })}\n                                                >\n                                                    {flexRender(\n                                                        header.column.columnDef.header,\n                                                        header.getContext()\n                                                    )}\n                                                </div>\n                                                <Table.Direction\n                                                    direction={header.column.getIsSorted() || null}\n                                                />\n                                                {isLastCell && (\n                                                    <div className={\"h-md\"}>\n                                                        <ColumnsVisibility\n                                                            columns={table.getAllColumns()}\n                                                        />\n                                                    </div>\n                                                )}\n                                            </ColumnSorter>\n                                        )}\n                                        {header.column.getCanResize() && (\n                                            <Table.Resizer\n                                                onMouseDown={header.getResizeHandler()}\n                                                onTouchStart={header.getResizeHandler()}\n                                                isResizing={header.column.getIsResizing()}\n                                            />\n                                        )}\n                                    </Table.Head>\n                                );\n                            })}\n                        </Table.Row>\n                    ))}\n                </Table.Header>\n                <Table.Body>\n                    {tableRows.map(row => {\n                        const id = row.original.id || row.id;\n                        return (\n                            <MemoTableRow<T>\n                                key={id}\n                                cells={row.getVisibleCells()}\n                                selected={row.getIsSelected()}\n                                getColumnWidth={getColumnWidth}\n                            />\n                        );\n                    })}\n                </Table.Body>\n            </Table>\n        </div>\n    );\n};\n\nconst DataTable = makeDecoratable(\"DataTable\", DecoratableDataTable);\n\nexport {\n    DataTable,\n    type DataTableProps,\n    type DataTableColumn,\n    type DataTableColumns,\n    type DataTableDefaultData,\n    type DataTableRow,\n    type DataTableSorting,\n    type DataTableColumnSort,\n    type OnDataTableSortingChange,\n    type DataTableColumnVisibility,\n    type OnDataTableColumnVisibilityChange\n};\n"],"names":["defineColumns","columns","options","canSelectAllRows","onSelectRow","onToggleRow","loading","useMemo","columnsList","Object","key","defaults","column","accessorKey","cell","className","enableHiding","enableResizing","enableSorting","header","truncate","id","size","props","String","columnsDefs","firstColumn","isSelectable","CheckboxPrimitive","e","React","value","cn","Skeleton","typedMemo","memo","TableCell","getColumnWidth","width","Table","flexRender","MemoTableCell","TableRow","selected","cells","MemoTableRow","emptyArray","Array","DecoratableDataTable","bordered","columnVisibility","initialColumns","initialData","initialSorting","isRowSelectable","onColumnVisibilityChange","onSortingChange","selectedRows","sorting","stickyHeader","tableRef","useRef","tableWidth","setTableWidth","useState","data","useEffect","updateElementWidth","window","rowSelection","acc","item","recordIndex","rec","onRowSelectionChange","updater","newSelection","toggledRows","x","parseInt","selection","tableSorting","table","useReactTable","getCoreRowModel","getSortedRowModel","useCallback","visibleColumns","fixedTotal","col","total","resizableTotal","available","Math","tableRows","headerGroup","index","isLastCell","ColumnSorter","ColumnsVisibility","row","DataTable","makeDecoratable"],"mappings":"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"}
+{"version":3,"file":"DataTable/DataTable.js","sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n    Cell,\n    Column,\n    ColumnDef,\n    ColumnSort,\n    ColumnVisibilityState,\n    OnChangeFn,\n    Row,\n    RowData,\n    RowSelectionState,\n    SortingState\n} from \"@tanstack/react-table\";\nimport {\n    columnResizingFeature,\n    columnSizingFeature,\n    columnVisibilityFeature,\n    createCoreRowModel,\n    createSortedRowModel,\n    flexRender,\n    rowSelectionFeature,\n    rowSortingFeature,\n    tableFeatures,\n    useTable\n} from \"@tanstack/react-table\";\nimport { CheckboxPrimitive } from \"~/Checkbox/index.js\";\nimport { Skeleton } from \"~/Skeleton/index.js\";\nimport { Table } from \"~/Table/index.js\";\nimport { ColumnSorter, ColumnsVisibility } from \"./components/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\nconst features = tableFeatures({\n    columnResizingFeature,\n    columnSizingFeature,\n    columnVisibilityFeature,\n    rowSelectionFeature,\n    rowSortingFeature,\n    sortedRowModel: createSortedRowModel(),\n    coreRowModel: createCoreRowModel()\n});\n\ntype Features = typeof features;\n\ninterface DataTableColumn<T> {\n    /*\n     * Column header component.\n     */\n    header?: string | number | React.JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | React.JSX.Element | null;\n    /*\n     * Column size.\n     */\n    size?: number;\n    /*\n     * Should truncate?\n     */\n    truncate?: boolean;\n    /*\n     * Column class names.\n     */\n    className?: string;\n    /*\n     * Enable column sorting.\n     */\n    enableSorting?: boolean;\n    /*\n     * Enable column resizing.\n     */\n    enableResizing?: boolean;\n    /*\n     * Enable column visibility toggling.\n     */\n    enableHiding?: boolean;\n    /*\n     * Accessor key for the column data path.\n     */\n    accessorKey?: string;\n}\n\ntype DataTableColumns<T> = {\n    [P in keyof T]?: DataTableColumn<T>;\n};\n\ntype DataTableDefaultData = {\n    id: string;\n    /*\n     * Define if a specific row can be selected.\n     */\n    $selectable?: boolean;\n};\n\ntype DataTableRow<T extends RowData> = Row<Features, DataTableDefaultData & T>;\n\ntype DataTableSorting = SortingState;\n\ntype DataTableColumnSort = ColumnSort;\n\ntype OnDataTableSortingChange = OnChangeFn<DataTableSorting>;\n\ntype DataTableColumnVisibility = ColumnVisibilityState;\n\ntype OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;\n\ninterface DataTableProps<TEntry extends RowData> {\n    /**\n     * Show or hide borders.\n     */\n    bordered?: boolean;\n    /**\n     * Controls whether \"select all\" action is allowed.\n     */\n    canSelectAllRows?: boolean;\n    /**\n     * Columns definition.\n     */\n    columns: DataTableColumns<TEntry>;\n    /**\n     * The column visibility state.\n     */\n    columnVisibility?: DataTableColumnVisibility;\n    /**\n     * Callback that receives current column visibility state.\n     */\n    onColumnVisibilityChange?: OnDataTableColumnVisibilityChange;\n    /**\n     * Data to display into DataTable body.\n     */\n    data: TEntry[];\n    /**\n     * Callback that is called to determine if the row is selectable.\n     */\n    isRowSelectable?: (row: Row<Features, TEntry>) => boolean;\n    /**\n     * Render the skeleton state while data are loading.\n     */\n    loading?: boolean;\n    /**\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: TEntry[]) => void;\n    /**\n     * Callback that receives the toggled row.\n     */\n    onToggleRow?: (row: TEntry) => void;\n    /**\n     * Callback that receives current sorting state.\n     */\n    onSortingChange?: OnDataTableSortingChange;\n    /**\n     * Selected rows.\n     */\n    selectedRows?: TEntry[];\n    /**\n     * Sorting state.\n     */\n    sorting?: DataTableSorting;\n    /**\n     * Initial sorting state.\n     */\n    initialSorting?: DataTableSorting;\n    /**\n     * Enable sticky header.\n     */\n    stickyHeader?: boolean;\n}\n\ninterface DefineColumnsOptions<TEntry extends RowData> {\n    canSelectAllRows: boolean;\n    onSelectRow?: DataTableProps<TEntry>[\"onSelectRow\"];\n    onToggleRow: DataTableProps<TEntry>[\"onToggleRow\"];\n    loading: DataTableProps<TEntry>[\"loading\"];\n}\n\nconst defineColumns = <T extends RowData>(\n    columns: DataTableProps<T>[\"columns\"],\n    options: DefineColumnsOptions<T>\n): ColumnDef<Features, T>[] => {\n    const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;\n\n    return useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<Features, T>[] = columnsList.map(column => {\n            const {\n                accessorKey,\n                cell,\n                className,\n                enableHiding = true,\n                enableResizing = true,\n                enableSorting = false,\n                header,\n                truncate = true,\n                id,\n                size = 100\n            } = column;\n\n            return {\n                id,\n                accessorKey: accessorKey || id,\n                header: () => header,\n                cell: props => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(props.row.original);\n                    } else {\n                        // Automatically convert any cell value to a string for rendering,\n                        // ensuring the table displays values correctly. This aligns with React's\n                        // rendering, which expects JSX, strings or null.\n                        // https://github.com/TanStack/table/issues/1042\n                        return props.getValue() ? String(props.getValue()) : null;\n                    }\n                },\n                enableSorting,\n                meta: {\n                    className,\n                    truncate\n                },\n                enableResizing,\n                size,\n                enableHiding\n            };\n        });\n\n        let columnsDefs = defaults;\n        const firstColumn = defaults[0];\n        const isSelectable = onToggleRow || onSelectRow;\n\n        if (isSelectable && firstColumn) {\n            columnsDefs = [\n                {\n                    ...firstColumn,\n                    accessorKey: firstColumn.id as string,\n                    header: props => {\n                        if (!props) {\n                            return null;\n                        }\n\n                        return (\n                            <div className={\"flex items-center gap-xl\"}>\n                                <CheckboxPrimitive\n                                    indeterminate={props.table.getIsSomeRowsSelected()}\n                                    checked={props.table.getIsAllRowsSelected()}\n                                    onChange={props.table.toggleAllPageRowsSelected}\n                                    aria-label=\"Select all\"\n                                    disabled={!canSelectAllRows}\n                                    onClick={e => e.stopPropagation()}\n                                />\n                                {firstColumn.header\n                                    ? React.createElement(firstColumn.header, props)\n                                    : null}\n                            </div>\n                        );\n                    },\n                    cell: props => {\n                        if (!props) {\n                            return null;\n                        }\n                        return (\n                            <div className={\"flex items-center gap-xl\"}>\n                                <CheckboxPrimitive\n                                    checked={props.row.getIsSelected()}\n                                    onChange={value => props.row.toggleSelected(!!value)}\n                                    disabled={!props.row.getCanSelect()}\n                                    aria-label=\"Select row\"\n                                    className={cn(!props.row.getCanSelect() ? \"invisible\" : \"\")}\n                                />\n                                {firstColumn.cell\n                                    ? React.createElement(firstColumn.cell, props)\n                                    : null}\n                            </div>\n                        );\n                    }\n                },\n                ...defaults.slice(1)\n            ];\n        }\n\n        return columnsDefs.map(column => {\n            if (loading) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton type={\"text\"} size={\"md\"} />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, onToggleRow, loading]);\n};\n\nconst typedMemo: <T>(component: T) => T = memo;\n\ninterface TableCellProps<T extends RowData> {\n    cell: Cell<Features, T, unknown>;\n    getColumnWidth: (column: Column<Features, T>) => number;\n}\n\nconst TableCell = <T extends RowData>({ cell, getColumnWidth }: TableCellProps<T>) => {\n    const width = getColumnWidth(cell.column);\n\n    return (\n        <Table.Cell {...cell.column.columnDef.meta} style={{ width, maxWidth: width }}>\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </Table.Cell>\n    );\n};\n\nconst MemoTableCell = typedMemo(TableCell);\n\ninterface TableRowProps<T extends RowData> {\n    selected: boolean;\n    cells: Cell<Features, T, unknown>[];\n    getColumnWidth: (column: Column<Features, T>) => number;\n}\n\nconst TableRow = <T extends RowData>({ selected, cells, getColumnWidth }: TableRowProps<T>) => {\n    return (\n        <Table.Row selected={selected}>\n            {cells.map(cell => (\n                <MemoTableCell<T> key={cell.id} cell={cell} getColumnWidth={getColumnWidth} />\n            ))}\n        </Table.Row>\n    );\n};\n\nconst MemoTableRow = typedMemo(TableRow);\n\n/**\n * Empty array must be defined outside the React component so it does not force rerendering of the DataTable\n */\nconst emptyArray = Array(10).fill({});\n\nconst DecoratableDataTable = <T extends Record<string, any> & DataTableDefaultData>({\n    bordered,\n    canSelectAllRows = true,\n    columnVisibility,\n    columns: initialColumns,\n    data: initialData,\n    initialSorting,\n    isRowSelectable,\n    loading,\n    onColumnVisibilityChange,\n    onSelectRow,\n    onSortingChange,\n    onToggleRow,\n    selectedRows = [],\n    sorting,\n    stickyHeader\n}: DataTableProps<T>) => {\n    const tableRef = useRef<HTMLDivElement>(null);\n    const [tableWidth, setTableWidth] = useState(1);\n\n    const data = loading ? emptyArray : initialData;\n\n    useEffect(() => {\n        const updateElementWidth = () => {\n            if (tableRef.current) {\n                const width = tableRef.current.clientWidth;\n                setTableWidth(width);\n            }\n        };\n\n        updateElementWidth();\n\n        window.addEventListener(\"resize\", updateElementWidth);\n\n        return () => {\n            window.removeEventListener(\"resize\", updateElementWidth);\n        };\n    }, [tableRef.current]);\n\n    const rowSelection = useMemo(() => {\n        return selectedRows.reduce<RowSelectionState>((acc, item) => {\n            const recordIndex = data.findIndex(rec => rec.id === item.id);\n            return { ...acc, [recordIndex]: true };\n        }, {});\n    }, [selectedRows, data]);\n\n    const onRowSelectionChange: OnChangeFn<RowSelectionState> = updater => {\n        const newSelection = typeof updater === \"function\" ? updater(rowSelection) : updater;\n\n        /**\n         * `@tanstack/react-table` isn't telling us what row was selected or deselected. It simply gives us\n         * the new selection state (an object with row indexes that are currently selected).\n         *\n         * To figure out what row was toggled, we need to calculate the difference between the old selection\n         * and the new selection. What we're doing here is:\n         * - find all items that were present in the previous selection, but are no longer present in the new selection\n         * - find all items that are present in the new selection, but were not present in the previous selection\n         */\n        const toggledRows = [\n            ...Object.keys(rowSelection).filter(x => !(x in newSelection)),\n            ...Object.keys(newSelection).filter(x => !(x in rowSelection))\n        ];\n\n        // If the difference is only 1 item, and `onToggleRow` is available, execute that.\n        if (toggledRows.length === 1 && typeof onToggleRow === \"function\") {\n            onToggleRow(data[parseInt(toggledRows[0])]);\n            return;\n        } else if (typeof onSelectRow === \"function\") {\n            const selection = Object.keys(newSelection).map(key => data[parseInt(key)]);\n            onSelectRow(selection);\n        }\n    };\n\n    const tableSorting = useMemo(() => {\n        if (!Array.isArray(sorting) || !sorting.length) {\n            return initialSorting;\n        }\n        return sorting;\n    }, [sorting]);\n\n    const columns = defineColumns(initialColumns, {\n        canSelectAllRows,\n        onSelectRow,\n        onToggleRow,\n        loading\n    });\n\n    const table = useTable<typeof features, T>({\n        features,\n        columnResizeMode: \"onChange\",\n        columns,\n        data,\n        enableColumnResizing: true,\n        enableHiding: !!onColumnVisibilityChange,\n        enableRowSelection: isRowSelectable,\n        enableSorting: !!onSortingChange,\n        enableSortingRemoval: false,\n        manualSorting: true,\n        onColumnVisibilityChange,\n        onRowSelectionChange,\n        onSortingChange,\n        state: {\n            columnVisibility,\n            rowSelection,\n            sorting: tableSorting\n        }\n    });\n\n    const getColumnWidth = useCallback(\n        (column: Column<Features, T>): number => {\n            // Non-resizable columns (e.g. row-selection, actions) keep their fixed size.\n            if (!column.getCanResize()) {\n                return column.getSize();\n            }\n\n            /**\n             * Resizable columns share the space left after the fixed columns, proportionally to\n             * their own size. This makes the table always fill the full container width — even when\n             * columns are hidden — so trailing content (e.g. the columns-visibility cog) stays\n             * flush right instead of drifting left as columns are removed.\n             */\n            const visibleColumns = table.getVisibleLeafColumns();\n            const fixedTotal = visibleColumns\n                .filter(col => !col.getCanResize())\n                .reduce((total, col) => total + col.getSize(), 0);\n            const resizableTotal = visibleColumns\n                .filter(col => col.getCanResize())\n                .reduce((total, col) => total + col.getSize(), 0);\n\n            if (resizableTotal === 0) {\n                return column.getSize();\n            }\n\n            const available = Math.max(tableWidth - fixedTotal, 0);\n\n            return Math.ceil((column.getSize() * available) / resizableTotal);\n        },\n        [table, tableWidth]\n    );\n\n    /**\n     * Had to memoize the rows to avoid browser freeze.\n     */\n    const tableRows = useMemo(() => {\n        return table.getRowModel().rows;\n    }, [table, data, columns]);\n\n    return (\n        <div ref={tableRef}>\n            <Table bordered={bordered} sticky={stickyHeader}>\n                <Table.Header sticky={stickyHeader}>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <Table.Row key={headerGroup.id}>\n                            {headerGroup.headers.map((header, index) => {\n                                const isLastCell = index === headerGroup.headers.length - 1;\n                                const width = getColumnWidth(header.column);\n\n                                return (\n                                    <Table.Head\n                                        key={header.id}\n                                        {...header.column.columnDef.meta}\n                                        colSpan={header.colSpan}\n                                        style={{ width, maxWidth: width }}\n                                    >\n                                        {header.isPlaceholder ? null : (\n                                            <ColumnSorter\n                                                onClick={header.column.getToggleSortingHandler()}\n                                                sortable={header.column.getCanSort()}\n                                            >\n                                                <div\n                                                    className={cn({\n                                                        \"w-full overflow-hidden whitespace-nowrap\": true,\n                                                        truncate: !isLastCell\n                                                    })}\n                                                >\n                                                    {flexRender(\n                                                        header.column.columnDef.header,\n                                                        header.getContext()\n                                                    )}\n                                                </div>\n                                                <Table.Direction\n                                                    direction={header.column.getIsSorted() || null}\n                                                />\n                                                {isLastCell && (\n                                                    <div className={\"h-md\"}>\n                                                        <ColumnsVisibility\n                                                            columns={table.getAllColumns()}\n                                                        />\n                                                    </div>\n                                                )}\n                                            </ColumnSorter>\n                                        )}\n                                        {header.column.getCanResize() && (\n                                            <Table.Resizer\n                                                onMouseDown={header.getResizeHandler()}\n                                                onTouchStart={header.getResizeHandler()}\n                                                isResizing={header.column.getIsResizing()}\n                                            />\n                                        )}\n                                    </Table.Head>\n                                );\n                            })}\n                        </Table.Row>\n                    ))}\n                </Table.Header>\n                <Table.Body>\n                    {tableRows.map(row => {\n                        const id = row.original.id || row.id;\n                        return (\n                            <MemoTableRow<T>\n                                key={id}\n                                cells={row.getVisibleCells()}\n                                selected={row.getIsSelected()}\n                                getColumnWidth={getColumnWidth}\n                            />\n                        );\n                    })}\n                </Table.Body>\n            </Table>\n        </div>\n    );\n};\n\nconst DataTable = makeDecoratable(\"DataTable\", DecoratableDataTable);\n\nexport {\n    DataTable,\n    type Features,\n    type DataTableProps,\n    type DataTableColumn,\n    type DataTableColumns,\n    type DataTableDefaultData,\n    type DataTableRow,\n    type DataTableSorting,\n    type DataTableColumnSort,\n    type OnDataTableSortingChange,\n    type DataTableColumnVisibility,\n    type OnDataTableColumnVisibilityChange\n};\n"],"names":["features","tableFeatures","columnResizingFeature","columnSizingFeature","columnVisibilityFeature","rowSelectionFeature","rowSortingFeature","createSortedRowModel","createCoreRowModel","defineColumns","columns","options","canSelectAllRows","onSelectRow","onToggleRow","loading","useMemo","columnsList","Object","key","defaults","column","accessorKey","cell","className","enableHiding","enableResizing","enableSorting","header","truncate","id","size","props","String","columnsDefs","firstColumn","isSelectable","CheckboxPrimitive","e","React","value","cn","Skeleton","typedMemo","memo","TableCell","getColumnWidth","width","Table","flexRender","MemoTableCell","TableRow","selected","cells","MemoTableRow","emptyArray","Array","DecoratableDataTable","bordered","columnVisibility","initialColumns","initialData","initialSorting","isRowSelectable","onColumnVisibilityChange","onSortingChange","selectedRows","sorting","stickyHeader","tableRef","useRef","tableWidth","setTableWidth","useState","data","useEffect","updateElementWidth","window","rowSelection","acc","item","recordIndex","rec","onRowSelectionChange","updater","newSelection","toggledRows","x","parseInt","selection","tableSorting","table","useTable","useCallback","visibleColumns","fixedTotal","col","total","resizableTotal","available","Math","tableRows","headerGroup","index","isLastCell","ColumnSorter","ColumnsVisibility","row","DataTable","makeDecoratable"],"mappings":"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"}

package/DataTable/components/ColumnsVisibility.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
-import type { Column } from "@tanstack/react-table";
-interface ColumnsVisibilityProps<T> {
-    columns: Column<T>[];
+import type { Column, RowData } from "@tanstack/react-table";
+import type { Features } from "../DataTable.js";
+interface ColumnsVisibilityProps<T extends RowData> {
+    columns: Column<Features, T>[];
 }
-export declare const ColumnsVisibility: <T>(props: ColumnsVisibilityProps<T>) => React.JSX.Element | null;
+export declare const ColumnsVisibility: <T extends RowData>(props: ColumnsVisibilityProps<T>) => React.JSX.Element | null;
 export {};

package/DataTable/components/ColumnsVisibility.js

@@ -7,14 +7,17 @@ const ColumnsVisibility = (props)=>{
     const getHeaderName = useCallback((column)=>{
         const { header } = column.columnDef;
         if ("string" == typeof header) return header;
-        if ("function" == typeof header) return header();
+        if ("function" == typeof header) {
+            const flatHeader = column.table.getFlatHeaders().find((h)=>h.column.id === column.id);
+            if (flatHeader) return header(flatHeader.getContext());
+        }
         return column.id;
     }, []);
     const options = useMemo(()=>props.columns.filter((column)=>column.getCanHide()).map((column)=>({
                 id: column.id,
                 header: getHeaderName(column),
-                onChange: column.toggleVisibility,
-                getValue: column.getIsVisible
+                onChange: (value)=>column.toggleVisibility(value),
+                getValue: ()=>column.getIsVisible()
             })), [
         props.columns
     ]);

package/DataTable/components/ColumnsVisibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable/components/ColumnsVisibility.js","sources":["../../../src/DataTable/components/ColumnsVisibility.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Checkbox } from \"~/Checkbox/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\n\ninterface ColumnsVisibilityProps<T> {\n    columns: Column<T>[];\n}\n\ninterface Option {\n    id: string;\n    header: string;\n    onChange: (value?: boolean | undefined) => void;\n    getValue: () => boolean;\n}\n\nexport const ColumnsVisibility = <T,>(props: ColumnsVisibilityProps<T>) => {\n    /**\n     * `@tanstack/react-table` does not have a simple method to return the header component.\n     * The only possible way is to use `flexRenderer`, but this is not working with the current implementation\n     * since we don't have access to the header context.\n     */\n    const getHeaderName = useCallback((column: Column<T>) => {\n        const { header } = column.columnDef;\n\n        if (typeof header === \"string\") {\n            return header;\n        }\n\n        if (typeof header === \"function\") {\n            // @ts-expect-error\n            return header();\n        }\n\n        return column.id;\n    }, []);\n\n    const options: Option[] = useMemo(() => {\n        return props.columns\n            .filter(column => column.getCanHide())\n            .map(column => {\n                return {\n                    id: column.id,\n                    header: getHeaderName(column),\n                    onChange: column.toggleVisibility,\n                    getValue: column.getIsVisible\n                };\n            });\n    }, [props.columns]);\n\n    if (options.length === 0) {\n        return null;\n    }\n\n    return (\n        <DropdownMenu\n            trigger={<IconButton icon={<SettingsIcon />} variant={\"ghost\"} size={\"xs\"} />}\n        >\n            <DropdownMenu.Label text={\"Display columns\"} />\n            {options.map(option => {\n                return (\n                    <DropdownMenu.Item\n                        key={option.id}\n                        preventClose\n                        text={\n                            <Checkbox\n                                label={option.header}\n                                onChange={option.onChange}\n                                checked={option.getValue()}\n                            />\n                        }\n                    />\n                );\n            })}\n        </DropdownMenu>\n    );\n};\n"],"names":["ColumnsVisibility","props","getHeaderName","useCallback","column","header","options","useMemo","DropdownMenu","IconButton","SettingsIcon","option","Checkbox"],"mappings":";;;;;AAkBO,MAAMA,oBAAoB,CAAKC;IAMlC,MAAMC,gBAAgBC,YAAY,CAACC;QAC/B,MAAM,EAAEC,MAAM,EAAE,GAAGD,OAAO,SAAS;QAEnC,IAAI,AAAkB,YAAlB,OAAOC,QACP,OAAOA;QAGX,IAAI,AAAkB,cAAlB,OAAOA,QAEP,OAAOA;QAGX,OAAOD,OAAO,EAAE;IACpB,GAAG,EAAE;IAEL,MAAME,UAAoBC,QAAQ,IACvBN,MAAM,OAAO,CACf,MAAM,CAACG,CAAAA,SAAUA,OAAO,UAAU,IAClC,GAAG,CAACA,CAAAA,SACM;gBACH,IAAIA,OAAO,EAAE;gBACb,QAAQF,cAAcE;gBACtB,UAAUA,OAAO,gBAAgB;gBACjC,UAAUA,OAAO,YAAY;YACjC,KAET;QAACH,MAAM,OAAO;KAAC;IAElB,IAAIK,AAAmB,MAAnBA,QAAQ,MAAM,EACd,OAAO;IAGX,OAAO,WAAP,GACI,oBAACE,cAAYA;QACT,uBAAS,oBAACC,YAAUA;YAAC,oBAAM,oBAACC,gBAAYA;YAAK,SAAS;YAAS,MAAM;;qBAErE,oBAACF,aAAa,KAAK;QAAC,MAAM;QACzBF,QAAQ,GAAG,CAACK,CAAAA,SACF,WAAP,GACI,oBAACH,aAAa,IAAI;YACd,KAAKG,OAAO,EAAE;YACd;YACA,oBACI,oBAACC,UAAQA;gBACL,OAAOD,OAAO,MAAM;gBACpB,UAAUA,OAAO,QAAQ;gBACzB,SAASA,OAAO,QAAQ;;;AAQxD"}
+{"version":3,"file":"DataTable/components/ColumnsVisibility.js","sources":["../../../src/DataTable/components/ColumnsVisibility.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Column, RowData } from \"@tanstack/react-table\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Checkbox } from \"~/Checkbox/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport type { Features } from \"../DataTable.js\";\n\ninterface ColumnsVisibilityProps<T extends RowData> {\n    columns: Column<Features, T>[];\n}\n\ninterface Option {\n    id: string;\n    header: string;\n    onChange: (value?: boolean | undefined) => void;\n    getValue: () => boolean;\n}\n\nexport const ColumnsVisibility = <T extends RowData>(props: ColumnsVisibilityProps<T>) => {\n    /**\n     * `@tanstack/react-table` does not have a simple method to return the header component.\n     * The only possible way is to use `flexRenderer`, but this is not working with the current implementation\n     * since we don't have access to the header context.\n     */\n    const getHeaderName = useCallback((column: Column<Features, T>) => {\n        const { header } = column.columnDef;\n\n        if (typeof header === \"string\") {\n            return header;\n        }\n\n        if (typeof header === \"function\") {\n            const flatHeader = column.table.getFlatHeaders().find(h => h.column.id === column.id);\n\n            if (flatHeader) {\n                return header(flatHeader.getContext());\n            }\n        }\n\n        return column.id;\n    }, []);\n\n    const options: Option[] = useMemo(() => {\n        return props.columns\n            .filter(column => column.getCanHide())\n            .map(column => {\n                return {\n                    id: column.id,\n                    header: getHeaderName(column),\n                    /**\n                     * `@tanstack/react-table` v9 puts these on the column prototype, so they\n                     * read their column off `this`. They must stay attached to the column.\n                     */\n                    onChange: value => column.toggleVisibility(value),\n                    getValue: () => column.getIsVisible()\n                };\n            });\n    }, [props.columns]);\n\n    if (options.length === 0) {\n        return null;\n    }\n\n    return (\n        <DropdownMenu\n            trigger={<IconButton icon={<SettingsIcon />} variant={\"ghost\"} size={\"xs\"} />}\n        >\n            <DropdownMenu.Label text={\"Display columns\"} />\n            {options.map(option => {\n                return (\n                    <DropdownMenu.Item\n                        key={option.id}\n                        preventClose\n                        text={\n                            <Checkbox\n                                label={option.header}\n                                onChange={option.onChange}\n                                checked={option.getValue()}\n                            />\n                        }\n                    />\n                );\n            })}\n        </DropdownMenu>\n    );\n};\n"],"names":["ColumnsVisibility","props","getHeaderName","useCallback","column","header","flatHeader","h","options","useMemo","value","DropdownMenu","IconButton","SettingsIcon","option","Checkbox"],"mappings":";;;;;AAmBO,MAAMA,oBAAoB,CAAoBC;IAMjD,MAAMC,gBAAgBC,YAAY,CAACC;QAC/B,MAAM,EAAEC,MAAM,EAAE,GAAGD,OAAO,SAAS;QAEnC,IAAI,AAAkB,YAAlB,OAAOC,QACP,OAAOA;QAGX,IAAI,AAAkB,cAAlB,OAAOA,QAAuB;YAC9B,MAAMC,aAAaF,OAAO,KAAK,CAAC,cAAc,GAAG,IAAI,CAACG,CAAAA,IAAKA,EAAE,MAAM,CAAC,EAAE,KAAKH,OAAO,EAAE;YAEpF,IAAIE,YACA,OAAOD,OAAOC,WAAW,UAAU;QAE3C;QAEA,OAAOF,OAAO,EAAE;IACpB,GAAG,EAAE;IAEL,MAAMI,UAAoBC,QAAQ,IACvBR,MAAM,OAAO,CACf,MAAM,CAACG,CAAAA,SAAUA,OAAO,UAAU,IAClC,GAAG,CAACA,CAAAA,SACM;gBACH,IAAIA,OAAO,EAAE;gBACb,QAAQF,cAAcE;gBAKtB,UAAUM,CAAAA,QAASN,OAAO,gBAAgB,CAACM;gBAC3C,UAAU,IAAMN,OAAO,YAAY;YACvC,KAET;QAACH,MAAM,OAAO;KAAC;IAElB,IAAIO,AAAmB,MAAnBA,QAAQ,MAAM,EACd,OAAO;IAGX,OAAO,WAAP,GACI,oBAACG,cAAYA;QACT,uBAAS,oBAACC,YAAUA;YAAC,oBAAM,oBAACC,gBAAYA;YAAK,SAAS;YAAS,MAAM;;qBAErE,oBAACF,aAAa,KAAK;QAAC,MAAM;QACzBH,QAAQ,GAAG,CAACM,CAAAA,SACF,WAAP,GACI,oBAACH,aAAa,IAAI;YACd,KAAKG,OAAO,EAAE;YACd;YACA,oBACI,oBAACC,UAAQA;gBACL,OAAOD,OAAO,MAAM;gBACpB,UAAUA,OAAO,QAAQ;gBACzB,SAASA,OAAO,QAAQ;;;AAQxD"}

package/FilePicker/FilePicker.stories.d.ts

@@ -22,4 +22,10 @@ export declare const CompactWithErrors: Story;
 export declare const CompactDisabled: Story;
 export declare const CompactWithValidateFunction: Story;
 export declare const CompactFullExample: Story;
+/**
+ * Reproduces the Website Builder style sidebar at its 206px value column: the preview stacks,
+ * the file name truncates in the middle so the extension and version suffix survive, and the
+ * actions spell themselves out instead of costing a fixed block of the row.
+ */
+export declare const CompactWithLongFileNameInNarrowContainer: Story;
 export declare const Documentation: Story;

package/FilePicker/FilePicker.stories.js

@@ -210,6 +210,29 @@ const CompactFullExample = {
         }
     }
 };
+const CompactWithLongFileNameInNarrowContainer = {
+    args: {
+        ...Compact.args
+    },
+    render: (args)=>{
+        const [selectedFile, setSelectedFile] = useState({
+            name: "tide-cc-statuses-2026-08-21-final-v2.png",
+            mimeType: "image/png",
+            size: 674161,
+            url: "https://picsum.photos/1200/800"
+        });
+        return /*#__PURE__*/ react.createElement("div", {
+            style: {
+                width: 206
+            }
+        }, /*#__PURE__*/ react.createElement(FilePicker, {
+            ...args,
+            value: selectedFile,
+            onSelectItem: ()=>setSelectedFile(getFile()),
+            onRemoveItem: ()=>setSelectedFile(null)
+        }));
+    }
+};
 const Documentation = {
     render: (args)=>{
         const [selectedFile, setSelectedFile] = useState(args.value);
@@ -324,6 +347,6 @@ const Documentation = {
     }
 };
 export default FilePicker_stories;
-export { AreaDisabled, AreaFullExample, AreaType, AreaWithDescription, AreaWithErrors, AreaWithLabel, AreaWithLabelRequired, AreaWithNotes, AreaWithValidateFunction, Compact, CompactDisabled, CompactFullExample, CompactWithDescription, CompactWithErrors, CompactWithLabel, CompactWithLabelRequired, CompactWithNotes, CompactWithValidateFunction, Default, Documentation };
+export { AreaDisabled, AreaFullExample, AreaType, AreaWithDescription, AreaWithErrors, AreaWithLabel, AreaWithLabelRequired, AreaWithNotes, AreaWithValidateFunction, Compact, CompactDisabled, CompactFullExample, CompactWithDescription, CompactWithErrors, CompactWithLabel, CompactWithLabelRequired, CompactWithLongFileNameInNarrowContainer, CompactWithNotes, CompactWithValidateFunction, Default, Documentation };
 
 //# sourceMappingURL=FilePicker.stories.js.map

package/FilePicker/FilePicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/FilePicker.stories.js","sources":["../../src/FilePicker/FilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { type FileItemDto, FilePicker } from \"~/FilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\n    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n    return {\n        name: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePicker> = {\n    title: \"Components/Form/FilePicker\",\n    component: FilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setSelectedFile(args.value);\n        }, [args.value]);\n\n        const handleSelect = () => {\n            setSelectedFile(getFile());\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any) => {\n            if (file) {\n                console.log(\"Editing file:\", file);\n                alert(`Editing File: ${file.name}`);\n            }\n        };\n\n        const handleRemove = () => {\n            setSelectedFile(null);\n\n            if (args.required) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !selectedFile) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFile]);\n\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={handleSelect}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Image\",\n        required: true,\n        disabled: false,\n        description: \"Select a file to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB\",\n        type: \"area\",\n        value: null,\n        validation: undefined,\n        onSelectItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the file picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        type: {\n            description: \"The visual style of the file picker\",\n            control: \"radio\",\n            options: [\"area\", \"compact\"]\n        },\n        value: {\n            description: \"The currently selected file\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description: \"Function called when a file is selected\"\n        },\n        onEditItem: {\n            description: \"Function called when a file is edited\"\n        },\n        onRemoveItem: {\n            description: \"Function called when a file is removed\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePicker","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","useEffect","handleSelect","handleEdit","file","console","handleRemove"],"mappings":"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"}
+{"version":3,"file":"FilePicker/FilePicker.stories.js","sources":["../../src/FilePicker/FilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { type FileItemDto, FilePicker } from \"~/FilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\n    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n    return {\n        name: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePicker> = {\n    title: \"Components/Form/FilePicker\",\n    component: FilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\n/**\n * Reproduces the Website Builder style sidebar at its 206px value column: the preview stacks,\n * the file name truncates in the middle so the extension and version suffix survive, and the\n * actions spell themselves out instead of costing a fixed block of the row.\n */\nexport const CompactWithLongFileNameInNarrowContainer: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState<FileItemDto | null>({\n            name: \"tide-cc-statuses-2026-08-21-final-v2.png\",\n            mimeType: \"image/png\",\n            size: 674161,\n            url: \"https://picsum.photos/1200/800\"\n        });\n\n        return (\n            <div style={{ width: 206 }}>\n                <FilePicker\n                    {...args}\n                    value={selectedFile}\n                    onSelectItem={() => setSelectedFile(getFile())}\n                    onRemoveItem={() => setSelectedFile(null)}\n                />\n            </div>\n        );\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setSelectedFile(args.value);\n        }, [args.value]);\n\n        const handleSelect = () => {\n            setSelectedFile(getFile());\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any) => {\n            if (file) {\n                console.log(\"Editing file:\", file);\n                alert(`Editing File: ${file.name}`);\n            }\n        };\n\n        const handleRemove = () => {\n            setSelectedFile(null);\n\n            if (args.required) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !selectedFile) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFile]);\n\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={handleSelect}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Image\",\n        required: true,\n        disabled: false,\n        description: \"Select a file to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB\",\n        type: \"area\",\n        value: null,\n        validation: undefined,\n        onSelectItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the file picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        type: {\n            description: \"The visual style of the file picker\",\n            control: \"radio\",\n            options: [\"area\", \"compact\"]\n        },\n        value: {\n            description: \"The currently selected file\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description: \"Function called when a file is selected\"\n        },\n        onEditItem: {\n            description: \"Function called when a file is edited\"\n        },\n        onRemoveItem: {\n            description: \"Function called when a file is removed\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePicker","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","CompactWithLongFileNameInNarrowContainer","Documentation","useEffect","handleSelect","handleEdit","file","console","handleRemove"],"mappings":"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"}

package/FilePicker/primitives/components/previews/ItemActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/ItemActions.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ReplaceIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface ItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    onReplaceItem?: () => void;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemActions = ({\n    disabled,\n    onRemoveItem,\n    onEditItem,\n    onReplaceItem,\n    small,\n    className,\n    ...props\n}: ItemActionsProps) => {\n    const iconSize = small ? \"default\" : \"lg\";\n    const buttonSize = small ? \"xs\" : \"sm\";\n\n    return (\n        <div {...props} className={cn(\"flex justify-center items-center gap-xs\", className)}>\n            {onReplaceItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<ReplaceIcon />}\n                            label={\"Replace\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onReplaceItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onEditItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<EditIcon />}\n                            label={\"Edit\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onEditItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onRemoveItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<TrashIcon />}\n                            label={\"Remove\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onRemoveItem}\n                    disabled={disabled}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { ItemActions, type ItemActionsProps };\n"],"names":["ItemActions","disabled","onRemoveItem","onEditItem","onReplaceItem","small","className","props","iconSize","buttonSize","cn","IconButton","Icon","ReplaceIcon","EditIcon","TrashIcon"],"mappings":";;;;;;;AAgBA,MAAMA,cAAc,CAAC,EACjBC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,aAAa,EACbC,KAAK,EACLC,SAAS,EACT,GAAGC,OACY;IACf,MAAMC,WAAWH,QAAQ,YAAY;IACrC,MAAMI,aAAaJ,QAAQ,OAAO;IAElC,OAAO,WAAP,GACI,oBAAC;QAAK,GAAGE,KAAK;QAAE,WAAWG,GAAG,2CAA2CJ;OACpEF,iBAAiB,WAAjBA,GACG,oBAACO,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAWA;YAClB,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAMJ;QACN,UAAUD;QACV,SAASJ;QACT,UAAUH;QAIjBE,cAAc,WAAdA,GACG,oBAACQ,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACE,yBAAQA;YACf,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAML;QACN,UAAUD;QACV,SAASL;QACT,UAAUF;QAIjBC,gBAAgB,WAAhBA,GACG,oBAACS,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACG,2BAASA;YAChB,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAMN;QACN,UAAUD;QACV,SAASN;QACT,UAAUD;;AAK9B"}
+{"version":3,"file":"FilePicker/primitives/components/previews/ItemActions.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ReplaceIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface ItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    onReplaceItem?: () => void;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemActions = ({\n    disabled,\n    onRemoveItem,\n    onEditItem,\n    onReplaceItem,\n    small,\n    className,\n    ...props\n}: ItemActionsProps) => {\n    const iconSize = small ? \"default\" : \"lg\";\n    const buttonSize = small ? \"xs\" : \"sm\";\n\n    return (\n        <div {...props} className={cn(\"flex justify-center items-center gap-xs\", className)}>\n            {/* Replace is the action a populated picker mainly exists for, and it was only ever\n                shown in the `small` layout - elsewhere it hid behind clicking the thumbnail. */}\n            {onReplaceItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<ReplaceIcon />}\n                            label={\"Replace\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onReplaceItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onEditItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<EditIcon />}\n                            label={\"Edit\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onEditItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onRemoveItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<TrashIcon />}\n                            label={\"Remove\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onRemoveItem}\n                    disabled={disabled}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { ItemActions, type ItemActionsProps };\n"],"names":["ItemActions","disabled","onRemoveItem","onEditItem","onReplaceItem","small","className","props","iconSize","buttonSize","cn","IconButton","Icon","ReplaceIcon","EditIcon","TrashIcon"],"mappings":";;;;;;;AAgBA,MAAMA,cAAc,CAAC,EACjBC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,aAAa,EACbC,KAAK,EACLC,SAAS,EACT,GAAGC,OACY;IACf,MAAMC,WAAWH,QAAQ,YAAY;IACrC,MAAMI,aAAaJ,QAAQ,OAAO;IAElC,OAAO,WAAP,GACI,oBAAC;QAAK,GAAGE,KAAK;QAAE,WAAWG,GAAG,2CAA2CJ;OAGpEF,iBAAiB,WAAjBA,GACG,oBAACO,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAWA;YAClB,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAMJ;QACN,UAAUD;QACV,SAASJ;QACT,UAAUH;QAIjBE,cAAc,WAAdA,GACG,oBAACQ,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACE,yBAAQA;YACf,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAML;QACN,UAAUD;QACV,SAASL;QACT,UAAUF;QAIjBC,gBAAgB,WAAhBA,GACG,oBAACS,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACG,2BAASA;YAChB,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAMN;QACN,UAAUD;QACV,SAASN;QACT,UAAUD;;AAK9B"}

package/FilePicker/primitives/components/previews/ItemDescription.js

@@ -7,7 +7,7 @@ const ItemDescription = ({ className, disabled, item, small, ...props })=>{
         unitSeparator: " "
     });
     return /*#__PURE__*/ react.createElement("div", {
-        className: cn("flex flex-col gap-xxs overflow-hidden flex-1 min-w-0", className),
+        className: cn("flex flex-col gap-xxs overflow-hidden min-w-0", className),
         ...props
     }, /*#__PURE__*/ react.createElement(Text, {
         size: "sm",

package/FilePicker/primitives/components/previews/ItemDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/ItemDescription.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ninterface ItemDescriptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    item: FileItemFormatted;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemDescription = ({ className, disabled, item, small, ...props }: ItemDescriptionProps) => {\n    const formattedSize = item.size && bytes.format(item.size, { unitSeparator: \" \" });\n\n    return (\n        <div\n            className={cn(\"flex flex-col gap-xxs overflow-hidden flex-1 min-w-0\", className)}\n            {...props}\n        >\n            <Text\n                size=\"sm\"\n                as=\"div\"\n                className={cn(\n                    \"truncate overflow-hidden whitespace-nowrap w-full\",\n                    disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"\n                )}\n            >\n                {item.name}\n            </Text>\n            {!small && (formattedSize || item.mimeType) && (\n                <Text\n                    size=\"sm\"\n                    className={cn(\n                        \"truncate overflow-hidden whitespace-nowrap w-full\",\n                        disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                    )}\n                >\n                    {[formattedSize, item.mimeType].filter(Boolean).join(\" - \")}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nexport { ItemDescription, type ItemDescriptionProps };\n"],"names":["ItemDescription","className","disabled","item","small","props","formattedSize","bytes","cn","Text","Boolean"],"mappings":";;;;AAYA,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,OAA6B;IACzF,MAAMC,gBAAgBH,KAAK,IAAI,IAAII,MAAM,MAAM,CAACJ,KAAK,IAAI,EAAE;QAAE,eAAe;IAAI;IAEhF,OAAO,WAAP,GACI,oBAAC;QACG,WAAWK,GAAG,wDAAwDP;QACrE,GAAGI,KAAK;qBAET,oBAACI,MAAIA;QACD,MAAK;QACL,IAAG;QACH,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxCC,KAAK,IAAI,GAEb,CAACC,SAAUE,CAAAA,iBAAiBH,KAAK,QAAO,mBACrC,oBAACM,MAAIA;QACD,MAAK;QACL,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxC;QAACI;QAAeH,KAAK,QAAQ;KAAC,CAAC,MAAM,CAACO,SAAS,IAAI,CAAC;AAKzE"}
+{"version":3,"file":"FilePicker/primitives/components/previews/ItemDescription.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ninterface ItemDescriptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    item: FileItemFormatted;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemDescription = ({ className, disabled, item, small, ...props }: ItemDescriptionProps) => {\n    const formattedSize = item.size && bytes.format(item.size, { unitSeparator: \" \" });\n\n    return (\n        <div className={cn(\"flex flex-col gap-xxs overflow-hidden min-w-0\", className)} {...props}>\n            <Text\n                size=\"sm\"\n                as=\"div\"\n                className={cn(\n                    \"truncate overflow-hidden whitespace-nowrap w-full\",\n                    disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"\n                )}\n            >\n                {item.name}\n            </Text>\n            {!small && (formattedSize || item.mimeType) && (\n                <Text\n                    size=\"sm\"\n                    className={cn(\n                        \"truncate overflow-hidden whitespace-nowrap w-full\",\n                        disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                    )}\n                >\n                    {[formattedSize, item.mimeType].filter(Boolean).join(\" - \")}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nexport { ItemDescription, type ItemDescriptionProps };\n"],"names":["ItemDescription","className","disabled","item","small","props","formattedSize","bytes","cn","Text","Boolean"],"mappings":";;;;AAYA,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,OAA6B;IACzF,MAAMC,gBAAgBH,KAAK,IAAI,IAAII,MAAM,MAAM,CAACJ,KAAK,IAAI,EAAE;QAAE,eAAe;IAAI;IAEhF,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWK,GAAG,iDAAiDP;QAAa,GAAGI,KAAK;qBACrF,oBAACI,MAAIA;QACD,MAAK;QACL,IAAG;QACH,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxCC,KAAK,IAAI,GAEb,CAACC,SAAUE,CAAAA,iBAAiBH,KAAK,QAAO,mBACrC,oBAACM,MAAIA;QACD,MAAK;QACL,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxC;QAACI;QAAeH,KAAK,QAAQ;KAAC,CAAC,MAAM,CAACO,SAAS,IAAI,CAAC;AAKzE"}

package/FilePicker/primitives/components/previews/RichItemPreview/FileType.d.ts

@@ -1,5 +1,9 @@
 import React from "react";
 import type { FileItemFormatted } from "../../../../../FilePicker/index.js";
 type FileTypeProps = Pick<FileItemFormatted, "mimeType" | "name">;
+/**
+ * The stand-in for a file that cannot be shown as a picture: an icon of its format, falling back
+ * to a generic one for anything unrecognised.
+ */
 declare const FileType: ({ mimeType, name }: FileTypeProps) => React.JSX.Element;
 export { FileType, type FileTypeProps };

package/FilePicker/primitives/components/previews/RichItemPreview/FileType.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/FileType.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/FileType.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\nimport csvThumb from \"../assets/csv.svg\";\nimport docThumb from \"../assets/doc.svg\";\nimport docxThumb from \"../assets/docx.svg\";\nimport fileThumb from \"../assets/file.svg\";\nimport pdfThumb from \"../assets/pdf.svg\";\nimport pptThumb from \"../assets/ppt.svg\";\nimport pptxThumb from \"../assets/pptx.svg\";\nimport txtThumb from \"../assets/txt.svg\";\nimport xlsThumb from \"../assets/xls.svg\";\nimport xlsxThumb from \"../assets/xlsx.svg\";\n\ntype FileTypeProps = Pick<FileItemFormatted, \"mimeType\" | \"name\">;\n\nconst FileType = ({ mimeType = \"\", name }: FileTypeProps) => {\n    const getMimeTypeSrc = (mimeType: string) => {\n        switch (mimeType) {\n            case \"text/csv\": // .csv\n                return csvThumb;\n            case \"application/msword\": // .doc\n                return docThumb;\n            case \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\": // .docx\n                return docxThumb;\n            case \"application/pdf\": // .pdf\n                return pdfThumb;\n            case \"application/vnd.ms-powerpoint\": // .ppt\n                return pptThumb;\n            case \"application/vnd.openxmlformats-officedocument.presentationml.presentation\": // .pptx\n                return pptxThumb;\n            case \"text/plain\": // .txt\n                return txtThumb;\n            case \"application/vnd.ms-excel\": // .xls\n                return xlsThumb;\n            case \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": // .xlsx\n                return xlsxThumb;\n            default:\n                return fileThumb;\n        }\n    };\n\n    return (\n        <img\n            src={getMimeTypeSrc(mimeType)}\n            alt={name}\n            className=\"size-full object-contain p-sm-extra\"\n        />\n    );\n};\n\nexport { FileType, type FileTypeProps };\n"],"names":["FileType","mimeType","name","getMimeTypeSrc","csvThumb","docThumb","docxThumb","pdfThumb","pptThumb","pptxThumb","txtThumb","xlsThumb","xlsxThumb","fileThumb"],"mappings":";;;;;;;;;;;AAgBA,MAAMA,WAAW,CAAC,EAAEC,WAAW,EAAE,EAAEC,IAAI,EAAiB;IACpD,MAAMC,iBAAiB,CAACF;QACpB,OAAQA;YACJ,KAAK;gBACD,OAAOG;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX;gBACI,OAAOC;QACf;IACJ;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,KAAKV,eAAeF;QACpB,KAAKC;QACL,WAAU;;AAGtB"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/FileType.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/FileType.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\nimport csvThumb from \"../assets/csv.svg\";\nimport docThumb from \"../assets/doc.svg\";\nimport docxThumb from \"../assets/docx.svg\";\nimport fileThumb from \"../assets/file.svg\";\nimport pdfThumb from \"../assets/pdf.svg\";\nimport pptThumb from \"../assets/ppt.svg\";\nimport pptxThumb from \"../assets/pptx.svg\";\nimport txtThumb from \"../assets/txt.svg\";\nimport xlsThumb from \"../assets/xls.svg\";\nimport xlsxThumb from \"../assets/xlsx.svg\";\n\ntype FileTypeProps = Pick<FileItemFormatted, \"mimeType\" | \"name\">;\n\n/**\n * The stand-in for a file that cannot be shown as a picture: an icon of its format, falling back\n * to a generic one for anything unrecognised.\n */\nconst FileType = ({ mimeType = \"\", name }: FileTypeProps) => {\n    const getMimeTypeSrc = (mimeType: string) => {\n        switch (mimeType) {\n            case \"text/csv\": // .csv\n                return csvThumb;\n            case \"application/msword\": // .doc\n                return docThumb;\n            case \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\": // .docx\n                return docxThumb;\n            case \"application/pdf\": // .pdf\n                return pdfThumb;\n            case \"application/vnd.ms-powerpoint\": // .ppt\n                return pptThumb;\n            case \"application/vnd.openxmlformats-officedocument.presentationml.presentation\": // .pptx\n                return pptxThumb;\n            case \"text/plain\": // .txt\n                return txtThumb;\n            case \"application/vnd.ms-excel\": // .xls\n                return xlsThumb;\n            case \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": // .xlsx\n                return xlsxThumb;\n            default:\n                return fileThumb;\n        }\n    };\n\n    return (\n        <img\n            src={getMimeTypeSrc(mimeType)}\n            alt={name}\n            className=\"size-full object-contain p-sm-extra\"\n        />\n    );\n};\n\nexport { FileType, type FileTypeProps };\n"],"names":["FileType","mimeType","name","getMimeTypeSrc","csvThumb","docThumb","docxThumb","pdfThumb","pptThumb","pptxThumb","txtThumb","xlsThumb","xlsxThumb","fileThumb"],"mappings":";;;;;;;;;;;AAoBA,MAAMA,WAAW,CAAC,EAAEC,WAAW,EAAE,EAAEC,IAAI,EAAiB;IACpD,MAAMC,iBAAiB,CAACF;QACpB,OAAQA;YACJ,KAAK;gBACD,OAAOG;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX;gBACI,OAAOC;QACf;IACJ;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,KAAKV,eAAeF;QACpB,KAAKC;QACL,WAAU;;AAGtB"}

package/FilePicker/primitives/components/previews/RichItemPreview/Placeholder.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import type { FileItemFormatted } from "../../../../../FilePicker/index.js";
 type PlaceholderProps = Pick<FileItemFormatted, "name">;
+/**
+ * Shown when the caller asks for a placeholder rather than the file's own preview.
+ */
 declare const Placeholder: ({ name }: PlaceholderProps) => React.JSX.Element;
 export { Placeholder, type PlaceholderProps };

package/FilePicker/primitives/components/previews/RichItemPreview/Placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/Placeholder.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/Placeholder.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as PlaceholderIcon } from \"@webiny/icons/image.svg\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\ntype PlaceholderProps = Pick<FileItemFormatted, \"name\">;\n\nconst Placeholder = ({ name }: PlaceholderProps) => {\n    return (\n        <div className={\"size-full flex justify-center items-center bg-transparent\"}>\n            <Icon icon={<PlaceholderIcon />} label={name} size={\"lg\"} color={\"neutral-light\"} />\n        </div>\n    );\n};\n\nexport { Placeholder, type PlaceholderProps };\n"],"names":["Placeholder","name","Icon","PlaceholderIcon"],"mappings":";;;AAOA,MAAMA,cAAc,CAAC,EAAEC,IAAI,EAAoB,GACpC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,MAAIA;QAAC,oBAAM,oBAACC,gBAAeA;QAAK,OAAOF;QAAM,MAAM;QAAM,OAAO"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/Placeholder.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/Placeholder.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as PlaceholderIcon } from \"@webiny/icons/image.svg\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\ntype PlaceholderProps = Pick<FileItemFormatted, \"name\">;\n\n/**\n * Shown when the caller asks for a placeholder rather than the file's own preview.\n */\nconst Placeholder = ({ name }: PlaceholderProps) => {\n    return (\n        <div className={\"size-full flex justify-center items-center bg-transparent\"}>\n            <Icon icon={<PlaceholderIcon />} label={name} size={\"lg\"} color={\"neutral-light\"} />\n        </div>\n    );\n};\n\nexport { Placeholder, type PlaceholderProps };\n"],"names":["Placeholder","name","Icon","PlaceholderIcon"],"mappings":";;;AAUA,MAAMA,cAAc,CAAC,EAAEC,IAAI,EAAoB,GACpC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,MAAIA;QAAC,oBAAM,oBAACC,gBAAeA;QAAK,OAAOF;QAAM,MAAM;QAAM,OAAO"}

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { RichItemThumbnail } from \"./RichItemThumbnail.js\";\nimport { ThumbnailActions } from \"./ThumbnailActions.js\";\nimport { ItemDescription } from \"../ItemDescription.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\nimport { TruncatedFileName } from \"../TruncatedFileName.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\n\ntype RichItemPreviewProps = FilePreviewDefaultProps & {\n    preview?: \"thumbnail\" | \"file-type\" | \"placeholder\";\n    /** Optional custom image renderer for the thumbnail (e.g. a cropped preview). */\n    renderImage?: (args: { url: string; name: string }) => React.ReactNode;\n};\n\nconst DecoratableRichItemPreview = ({\n    className,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem,\n    value,\n    variant,\n    preview,\n    renderImage,\n    ...props\n}: RichItemPreviewProps) => {\n    const actions = { onRemoveItem, onReplaceItem, onEditItem, disabled };\n\n    const formattedSize = value.size\n        ? bytes.format(value.size, { unitSeparator: \" \", decimalPlaces: 0 })\n        : \"\";\n    const details = [value.mimeType, formattedSize].filter(Boolean).join(\" - \");\n\n    return (\n        <div\n            data-testid=\"image-preview\"\n            className={cn(\n                \"w-full rounded-md @container\",\n                previewVariants({ variant, disabled }),\n                className\n            )}\n            {...props}\n        >\n            {/* Stacked layout for narrow containers (below 280px). */}\n            <div data-role=\"select-image\" className={\"@min-[280px]:hidden\"}>\n                <div className={\"flex flex-col gap-xs p-xs\"}>\n                    <div className={\"group relative cursor-pointer\"} onClick={onReplaceItem}>\n                        <RichItemThumbnail\n                            {...value}\n                            variant={\"banner\"}\n                            disabled={disabled}\n                            preview={preview}\n                            renderImage={renderImage}\n                        />\n                        <ThumbnailActions {...actions} />\n                    </div>\n\n                    <div className={\"flex flex-col gap-xxs min-w-0 px-xxs pb-xxs\"}>\n                        <TruncatedFileName\n                            name={value.name}\n                            className={disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"}\n                        />\n                        {details ? (\n                            <Text\n                                size=\"sm\"\n                                className={cn(\n                                    \"truncate\",\n                                    disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                                )}\n                            >\n                                {details}\n                            </Text>\n                        ) : null}\n                    </div>\n                </div>\n            </div>\n\n            {/* Side-by-side layout for wider containers (280px+). */}\n            <div\n                data-role=\"select-image\"\n                className={\"hidden @min-[280px]:flex items-center gap-sm-extra min-w-0\"}\n            >\n                <div className={\"shrink-0 cursor-pointer\"} onClick={onReplaceItem}>\n                    <RichItemThumbnail\n                        {...value}\n                        disabled={disabled}\n                        preview={preview}\n                        renderImage={renderImage}\n                    />\n                </div>\n\n                <ItemDescription\n                    item={value}\n                    disabled={disabled}\n                    onClick={onReplaceItem}\n                    className={\"grow basis-0 cursor-pointer\"}\n                />\n\n                <ItemActions {...actions} className={\"ml-auto pr-sm-extra\"} />\n            </div>\n        </div>\n    );\n};\n\nconst RichItemPreview = makeDecoratable(\"RichItemPreview\", DecoratableRichItemPreview);\n\nexport { RichItemPreview, type RichItemPreviewProps };\n"],"names":["DecoratableRichItemPreview","className","disabled","onRemoveItem","onReplaceItem","onEditItem","value","variant","preview","renderImage","props","actions","formattedSize","bytes","details","Boolean","cn","previewVariants","RichItemThumbnail","ThumbnailActions","TruncatedFileName","Text","ItemDescription","ItemActions","RichItemPreview","makeDecoratable"],"mappings":";;;;;;;;;;AAkBA,MAAMA,6BAA6B,CAAC,EAChCC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,WAAW,EACX,GAAGC,OACgB;IACnB,MAAMC,UAAU;QAAER;QAAcC;QAAeC;QAAYH;IAAS;IAEpE,MAAMU,gBAAgBN,MAAM,IAAI,GAC1BO,MAAM,MAAM,CAACP,MAAM,IAAI,EAAE;QAAE,eAAe;QAAK,eAAe;IAAE,KAChE;IACN,MAAMQ,UAAU;QAACR,MAAM,QAAQ;QAAEM;KAAc,CAAC,MAAM,CAACG,SAAS,IAAI,CAAC;IAErE,OAAO,WAAP,GACI,oBAAC;QACG,eAAY;QACZ,WAAWC,GACP,gCACAC,gBAAgB;YAAEV;YAASL;QAAS,IACpCD;QAEH,GAAGS,KAAK;qBAGT,oBAAC;QAAI,aAAU;QAAe,WAAW;qBACrC,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;QAAiC,SAASN;qBACtD,oBAACc,mBAAiBA;QACb,GAAGZ,KAAK;QACT,SAAS;QACT,UAAUJ;QACV,SAASM;QACT,aAAaC;sBAEjB,oBAACU,kBAAqBR,WAAAA,WAAAA,GAG1B,oBAAC;QAAI,WAAW;qBACZ,oBAACS,mBAAiBA;QACd,MAAMd,MAAM,IAAI;QAChB,WAAWJ,WAAW,0BAA0B;QAEnDY,UAAU,WAAVA,GACG,oBAACO,MAAIA;QACD,MAAK;QACL,WAAWL,GACP,YACAd,WAAW,0BAA0B;OAGxCY,WAEL,uBAMhB,oBAAC;QACG,aAAU;QACV,WAAW;qBAEX,oBAAC;QAAI,WAAW;QAA2B,SAASV;qBAChD,oBAACc,mBAAiBA;QACb,GAAGZ,KAAK;QACT,UAAUJ;QACV,SAASM;QACT,aAAaC;uBAIrB,oBAACa,iBAAeA;QACZ,MAAMhB;QACN,UAAUJ;QACV,SAASE;QACT,WAAW;sBAGf,oBAACmB,aAAWA;QAAE,GAAGZ,OAAO;QAAE,WAAW;;AAIrD;AAEA,MAAMa,kBAAkBC,gBAAgB,mBAAmBzB"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { RichItemThumbnail } from \"./RichItemThumbnail.js\";\nimport { ThumbnailActions } from \"./ThumbnailActions.js\";\nimport { ItemDescription } from \"../ItemDescription.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\nimport { TruncatedFileName } from \"../TruncatedFileName.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\n\ntype RichItemPreviewProps = FilePreviewDefaultProps & {\n    preview?: \"thumbnail\" | \"file-type\" | \"placeholder\";\n    /** Optional custom image renderer for the thumbnail (e.g. a cropped preview). */\n    renderImage?: (args: { url: string; name: string }) => React.ReactNode;\n};\n\nconst DecoratableRichItemPreview = ({\n    className,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem,\n    value,\n    variant,\n    preview,\n    renderImage,\n    ...props\n}: RichItemPreviewProps) => {\n    const actions = { onRemoveItem, onReplaceItem, onEditItem, disabled };\n\n    // Type and size share a line of their own beneath the name, so the name gets the full width\n    // and the two secondary facts read as one group rather than crowding it.\n    const formattedSize = value.size\n        ? bytes.format(value.size, { unitSeparator: \" \", decimalPlaces: 0 })\n        : \"\";\n    const details = [value.mimeType, formattedSize].filter(Boolean).join(\" - \");\n\n    return (\n        <div\n            data-testid=\"image-preview\"\n            className={cn(\n                \"w-full rounded-md @container\",\n                previewVariants({ variant, disabled }),\n                className\n            )}\n            {...props}\n        >\n            {/* Two layouts, chosen by the preview's own width rather than the viewport's, because\n                the same component renders in a ~200px sidebar and in a wide form field. Below\n                280px a side-by-side row cannot give the file name a readable share of the width,\n                so the thumbnail goes full width with the name and details beneath it, and the\n                actions move onto the thumbnail rather than costing a row of their own. */}\n            <div data-role=\"select-image\" className={\"@min-[280px]:hidden\"}>\n                <div className={\"flex flex-col gap-xs p-xs\"}>\n                    <div className={\"group relative cursor-pointer\"} onClick={onReplaceItem}>\n                        <RichItemThumbnail\n                            {...value}\n                            variant={\"banner\"}\n                            disabled={disabled}\n                            preview={preview}\n                            renderImage={renderImage}\n                        />\n                        <ThumbnailActions {...actions} />\n                    </div>\n\n                    <div className={\"flex flex-col gap-xxs min-w-0 px-xxs pb-xxs\"}>\n                        <TruncatedFileName\n                            name={value.name}\n                            className={disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"}\n                        />\n                        {details ? (\n                            <Text\n                                size=\"sm\"\n                                className={cn(\n                                    \"truncate\",\n                                    disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                                )}\n                            >\n                                {details}\n                            </Text>\n                        ) : null}\n                    </div>\n                </div>\n            </div>\n\n            {/* Side-by-side layout for wider containers (280px+). */}\n            <div\n                data-role=\"select-image\"\n                className={\"hidden @min-[280px]:flex items-center gap-sm-extra min-w-0\"}\n            >\n                <div className={\"shrink-0 cursor-pointer\"} onClick={onReplaceItem}>\n                    <RichItemThumbnail\n                        {...value}\n                        disabled={disabled}\n                        preview={preview}\n                        renderImage={renderImage}\n                    />\n                </div>\n\n                <ItemDescription\n                    item={value}\n                    disabled={disabled}\n                    onClick={onReplaceItem}\n                    className={\"grow basis-0 cursor-pointer\"}\n                />\n\n                <ItemActions {...actions} className={\"ml-auto pr-sm-extra\"} />\n            </div>\n        </div>\n    );\n};\n\nconst RichItemPreview = makeDecoratable(\"RichItemPreview\", DecoratableRichItemPreview);\n\nexport { RichItemPreview, type RichItemPreviewProps };\n"],"names":["DecoratableRichItemPreview","className","disabled","onRemoveItem","onReplaceItem","onEditItem","value","variant","preview","renderImage","props","actions","formattedSize","bytes","details","Boolean","cn","previewVariants","RichItemThumbnail","ThumbnailActions","TruncatedFileName","Text","ItemDescription","ItemActions","RichItemPreview","makeDecoratable"],"mappings":";;;;;;;;;;AAkBA,MAAMA,6BAA6B,CAAC,EAChCC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,WAAW,EACX,GAAGC,OACgB;IACnB,MAAMC,UAAU;QAAER;QAAcC;QAAeC;QAAYH;IAAS;IAIpE,MAAMU,gBAAgBN,MAAM,IAAI,GAC1BO,MAAM,MAAM,CAACP,MAAM,IAAI,EAAE;QAAE,eAAe;QAAK,eAAe;IAAE,KAChE;IACN,MAAMQ,UAAU;QAACR,MAAM,QAAQ;QAAEM;KAAc,CAAC,MAAM,CAACG,SAAS,IAAI,CAAC;IAErE,OAAO,WAAP,GACI,oBAAC;QACG,eAAY;QACZ,WAAWC,GACP,gCACAC,gBAAgB;YAAEV;YAASL;QAAS,IACpCD;QAEH,GAAGS,KAAK;qBAOT,oBAAC;QAAI,aAAU;QAAe,WAAW;qBACrC,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;QAAiC,SAASN;qBACtD,oBAACc,mBAAiBA;QACb,GAAGZ,KAAK;QACT,SAAS;QACT,UAAUJ;QACV,SAASM;QACT,aAAaC;sBAEjB,oBAACU,kBAAqBR,WAAAA,WAAAA,GAG1B,oBAAC;QAAI,WAAW;qBACZ,oBAACS,mBAAiBA;QACd,MAAMd,MAAM,IAAI;QAChB,WAAWJ,WAAW,0BAA0B;QAEnDY,UAAU,WAAVA,GACG,oBAACO,MAAIA;QACD,MAAK;QACL,WAAWL,GACP,YACAd,WAAW,0BAA0B;OAGxCY,WAEL,uBAMhB,oBAAC;QACG,aAAU;QACV,WAAW;qBAEX,oBAAC;QAAI,WAAW;QAA2B,SAASV;qBAChD,oBAACc,mBAAiBA;QACb,GAAGZ,KAAK;QACT,UAAUJ;QACV,SAASM;QACT,aAAaC;uBAIrB,oBAACa,iBAAeA;QACZ,MAAMhB;QACN,UAAUJ;QACV,SAASE;QACT,WAAW;sBAGf,oBAACmB,aAAWA;QAAE,GAAGZ,OAAO;QAAE,WAAW;;AAIrD;AAEA,MAAMa,kBAAkBC,gBAAgB,mBAAmBzB"}

package/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.d.ts

@@ -7,5 +7,9 @@ type ThumbnailProps = Pick<FileItemFormatted, "url" | "name"> & {
         name: string;
     }) => React.ReactNode;
 };
+/**
+ * The file's own image. `cover` fills its box and crops what does not fit, which suits the small
+ * square tile; `contain` shows the whole picture, which suits the banner.
+ */
 declare const Thumbnail: ({ url, name, fit, renderImage }: ThumbnailProps) => React.JSX.Element;
 export { Thumbnail, type ThumbnailProps };

package/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ntype ThumbnailProps = Pick<FileItemFormatted, \"url\" | \"name\"> & {\n    fit: \"cover\" | \"contain\";\n    renderImage?: (args: { url: string; name: string }) => React.ReactNode;\n};\n\nconst Thumbnail = ({ url, name, fit, renderImage }: ThumbnailProps) => {\n    const customImage = typeof renderImage === \"function\" ? renderImage({ url, name }) : false;\n\n    if (fit === \"contain\") {\n        return (\n            <div className={\"size-full p-xs bg-neutral-muted flex items-center justify-center\"}>\n                {customImage || (\n                    <img src={url} alt={name} className={\"max-h-full max-w-full rounded-xs\"} />\n                )}\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"size-full bg-neutral-muted\"}>\n            {customImage || <img src={url} alt={name} className={\"size-full object-cover\"} />}\n        </div>\n    );\n};\n\nexport { Thumbnail, type ThumbnailProps };\n"],"names":["Thumbnail","url","name","fit","renderImage","customImage"],"mappings":";AAQA,MAAMA,YAAY,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAEC,GAAG,EAAEC,WAAW,EAAkB;IAC9D,MAAMC,cAAc,AAAuB,cAAvB,OAAOD,cAA6BA,YAAY;QAAEH;QAAKC;IAAK,KAAK;IAErF,IAAIC,AAAQ,cAARA,KACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXE,eAAe,WAAfA,GACG,oBAAC;QAAI,KAAKJ;QAAK,KAAKC;QAAM,WAAW;;IAMrD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXG,eAAe,WAAfA,GAAe,oBAAC;QAAI,KAAKJ;QAAK,KAAKC;QAAM,WAAW;;AAGjE"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ntype ThumbnailProps = Pick<FileItemFormatted, \"url\" | \"name\"> & {\n    fit: \"cover\" | \"contain\";\n    renderImage?: (args: { url: string; name: string }) => React.ReactNode;\n};\n\n/**\n * The file's own image. `cover` fills its box and crops what does not fit, which suits the small\n * square tile; `contain` shows the whole picture, which suits the banner.\n */\nconst Thumbnail = ({ url, name, fit, renderImage }: ThumbnailProps) => {\n    const customImage = typeof renderImage === \"function\" ? renderImage({ url, name }) : false;\n\n    if (fit === \"contain\") {\n        return (\n            <div className={\"size-full p-xs bg-neutral-muted flex items-center justify-center\"}>\n                {/*\n                    Capping the element with max-width/max-height, rather than stretching it and\n                    letting `object-contain` letterbox the picture inside it, keeps the element box\n                    and the visible picture the same rectangle. That is what lets the corners round\n                    at all: `border-radius` clips the element, so on a letterboxed image it would\n                    trim empty space and leave the picture square.\n                */}\n                {customImage || (\n                    <img src={url} alt={name} className={\"max-h-full max-w-full rounded-xs\"} />\n                )}\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"size-full bg-neutral-muted\"}>\n            {customImage || <img src={url} alt={name} className={\"size-full object-cover\"} />}\n        </div>\n    );\n};\n\nexport { Thumbnail, type ThumbnailProps };\n"],"names":["Thumbnail","url","name","fit","renderImage","customImage"],"mappings":";AAYA,MAAMA,YAAY,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAEC,GAAG,EAAEC,WAAW,EAAkB;IAC9D,MAAMC,cAAc,AAAuB,cAAvB,OAAOD,cAA6BA,YAAY;QAAEH;QAAKC;IAAK,KAAK;IAErF,IAAIC,AAAQ,cAARA,KACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OAQXE,eAAe,WAAfA,GACG,oBAAC;QAAI,KAAKJ;QAAK,KAAKC;QAAM,WAAW;;IAMrD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXG,eAAe,WAAfA,GAAe,oBAAC;QAAI,KAAKJ;QAAK,KAAKC;QAAM,WAAW;;AAGjE"}

package/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.d.ts

@@ -6,5 +6,10 @@ interface ThumbnailActionsProps {
     disabled?: boolean;
     className?: string;
 }
+/**
+ * The file's actions laid over its thumbnail and revealed on hover, mirroring the File Manager's
+ * grid so a file offers the same affordances wherever it is shown. Requires `group` and
+ * `relative` on the element wrapping the thumbnail.
+ */
 declare const ThumbnailActions: ({ className, disabled, onEditItem, onRemoveItem, onReplaceItem }: ThumbnailActionsProps) => React.JSX.Element;
 export { ThumbnailActions, type ThumbnailActionsProps };

package/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as ReplaceIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface ActionProps {\n    icon: React.JSX.Element;\n    label: string;\n    onAction: () => void;\n    disabled?: boolean;\n}\n\nconst Action = ({ icon, label, onAction, disabled }: ActionProps) => {\n    const onClick = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation();\n            onAction();\n        },\n        [onAction]\n    );\n\n    return (\n        <Tooltip\n            content={label}\n            trigger={\n                <IconButton\n                    variant={\"tertiary\"}\n                    size={\"sm\"}\n                    icon={icon}\n                    onClick={onClick}\n                    disabled={disabled}\n                />\n            }\n        />\n    );\n};\n\ninterface ThumbnailActionsProps {\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    onReplaceItem?: () => void;\n    disabled?: boolean;\n    className?: string;\n}\n\nconst ThumbnailActions = ({\n    className,\n    disabled,\n    onEditItem,\n    onRemoveItem,\n    onReplaceItem\n}: ThumbnailActionsProps) => {\n    return (\n        <div\n            className={cn(\n                \"invisible group-hover:visible\",\n                \"flex items-center gap-xxs\",\n                \"absolute top-xs-plus right-xs-plus\",\n                className\n            )}\n        >\n            {onReplaceItem && (\n                <Action\n                    icon={<ReplaceIcon />}\n                    label={\"Replace\"}\n                    onAction={onReplaceItem}\n                    disabled={disabled}\n                />\n            )}\n            {onEditItem && (\n                <Action\n                    icon={<EditIcon />}\n                    label={\"Edit\"}\n                    onAction={onEditItem}\n                    disabled={disabled}\n                />\n            )}\n            {onRemoveItem && (\n                <Action\n                    icon={<TrashIcon />}\n                    label={\"Remove\"}\n                    onAction={onRemoveItem}\n                    disabled={disabled}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { ThumbnailActions, type ThumbnailActionsProps };\n"],"names":["Action","icon","label","onAction","disabled","onClick","useCallback","event","Tooltip","IconButton","ThumbnailActions","className","onEditItem","onRemoveItem","onReplaceItem","cn","ReplaceIcon","EditIcon","TrashIcon"],"mappings":";;;;;;;AAeA,MAAMA,SAAS,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAe;IAC5D,MAAMC,UAAUC,YACZ,CAACC;QACGA,MAAM,eAAe;QACrBJ;IACJ,GACA;QAACA;KAAS;IAGd,OAAO,WAAP,GACI,oBAACK,SAAOA;QACJ,SAASN;QACT,uBACI,oBAACO,YAAUA;YACP,SAAS;YACT,MAAM;YACN,MAAMR;YACN,SAASI;YACT,UAAUD;;;AAK9B;AAUA,MAAMM,mBAAmB,CAAC,EACtBC,SAAS,EACTP,QAAQ,EACRQ,UAAU,EACVC,YAAY,EACZC,aAAa,EACO,GACb,WAAP,GACI,oBAAC;QACG,WAAWC,GACP,iCACA,6BACA,sCACAJ;OAGHG,iBAAiB,WAAjBA,GACG,oBAACd,QAAMA;QACH,oBAAM,oBAACgB,gBAAWA;QAClB,OAAO;QACP,UAAUF;QACV,UAAUV;QAGjBQ,cAAc,WAAdA,GACG,oBAACZ,QAAMA;QACH,oBAAM,oBAACiB,yBAAQA;QACf,OAAO;QACP,UAAUL;QACV,UAAUR;QAGjBS,gBAAgB,WAAhBA,GACG,oBAACb,QAAMA;QACH,oBAAM,oBAACkB,2BAASA;QAChB,OAAO;QACP,UAAUL;QACV,UAAUT"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as ReplaceIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface ActionProps {\n    icon: React.JSX.Element;\n    label: string;\n    onAction: () => void;\n    disabled?: boolean;\n}\n\nconst Action = ({ icon, label, onAction, disabled }: ActionProps) => {\n    const onClick = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            // The thumbnail behind these opens the file manager when clicked, so without this a\n            // click on Remove would replace the file as well as remove it.\n            event.stopPropagation();\n            onAction();\n        },\n        [onAction]\n    );\n\n    return (\n        <Tooltip\n            content={label}\n            trigger={\n                <IconButton\n                    variant={\"tertiary\"}\n                    size={\"sm\"}\n                    icon={icon}\n                    onClick={onClick}\n                    disabled={disabled}\n                />\n            }\n        />\n    );\n};\n\ninterface ThumbnailActionsProps {\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    onReplaceItem?: () => void;\n    disabled?: boolean;\n    className?: string;\n}\n\n/**\n * The file's actions laid over its thumbnail and revealed on hover, mirroring the File Manager's\n * grid so a file offers the same affordances wherever it is shown. Requires `group` and\n * `relative` on the element wrapping the thumbnail.\n */\nconst ThumbnailActions = ({\n    className,\n    disabled,\n    onEditItem,\n    onRemoveItem,\n    onReplaceItem\n}: ThumbnailActionsProps) => {\n    return (\n        <div\n            className={cn(\n                \"invisible group-hover:visible\",\n                \"flex items-center gap-xxs\",\n                \"absolute top-xs-plus right-xs-plus\",\n                className\n            )}\n        >\n            {onReplaceItem && (\n                <Action\n                    icon={<ReplaceIcon />}\n                    label={\"Replace\"}\n                    onAction={onReplaceItem}\n                    disabled={disabled}\n                />\n            )}\n            {onEditItem && (\n                <Action\n                    icon={<EditIcon />}\n                    label={\"Edit\"}\n                    onAction={onEditItem}\n                    disabled={disabled}\n                />\n            )}\n            {onRemoveItem && (\n                <Action\n                    icon={<TrashIcon />}\n                    label={\"Remove\"}\n                    onAction={onRemoveItem}\n                    disabled={disabled}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { ThumbnailActions, type ThumbnailActionsProps };\n"],"names":["Action","icon","label","onAction","disabled","onClick","useCallback","event","Tooltip","IconButton","ThumbnailActions","className","onEditItem","onRemoveItem","onReplaceItem","cn","ReplaceIcon","EditIcon","TrashIcon"],"mappings":";;;;;;;AAeA,MAAMA,SAAS,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAe;IAC5D,MAAMC,UAAUC,YACZ,CAACC;QAGGA,MAAM,eAAe;QACrBJ;IACJ,GACA;QAACA;KAAS;IAGd,OAAO,WAAP,GACI,oBAACK,SAAOA;QACJ,SAASN;QACT,uBACI,oBAACO,YAAUA;YACP,SAAS;YACT,MAAM;YACN,MAAMR;YACN,SAASI;YACT,UAAUD;;;AAK9B;AAeA,MAAMM,mBAAmB,CAAC,EACtBC,SAAS,EACTP,QAAQ,EACRQ,UAAU,EACVC,YAAY,EACZC,aAAa,EACO,GACb,WAAP,GACI,oBAAC;QACG,WAAWC,GACP,iCACA,6BACA,sCACAJ;OAGHG,iBAAiB,WAAjBA,GACG,oBAACd,QAAMA;QACH,oBAAM,oBAACgB,gBAAWA;QAClB,OAAO;QACP,UAAUF;QACV,UAAUV;QAGjBQ,cAAc,WAAdA,GACG,oBAACZ,QAAMA;QACH,oBAAM,oBAACiB,yBAAQA;QACf,OAAO;QACP,UAAUL;QACV,UAAUR;QAGjBS,gBAAgB,WAAhBA,GACG,oBAACb,QAAMA;QACH,oBAAM,oBAACkB,2BAASA;QAChB,OAAO;QACP,UAAUL;QACV,UAAUT"}

package/FilePicker/primitives/components/previews/TruncatedFileName.d.ts

@@ -3,5 +3,9 @@ interface TruncatedFileNameProps {
     name: string;
     className?: string;
 }
+/**
+ * A file name that truncates in the middle, keeping the extension (and a little of the stem)
+ * visible: "tide-cc-statuses-v2.png" becomes "tide-cc-statu…-v2.png".
+ */
 declare const TruncatedFileName: ({ name, className }: TruncatedFileNameProps) => React.JSX.Element;
 export { TruncatedFileName, type TruncatedFileNameProps };

package/FilePicker/primitives/components/previews/TruncatedFileName.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/TruncatedFileName.js","sources":["../../../../../src/FilePicker/primitives/components/previews/TruncatedFileName.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn } from \"~/utils.js\";\nimport { splitFileName } from \"./fileName.js\";\n\ninterface TruncatedFileNameProps {\n    name: string;\n    className?: string;\n}\n\nconst TruncatedFileName = ({ name, className }: TruncatedFileNameProps) => {\n    const { head, tail } = splitFileName(name);\n\n    return (\n        <Text size=\"sm\" as=\"div\" className={cn(\"flex min-w-0\", className)} title={name}>\n            <span className={\"truncate\"}>{head}</span>\n            {tail ? <span className={\"shrink-0 whitespace-pre\"}>{tail}</span> : null}\n        </Text>\n    );\n};\n\nexport { TruncatedFileName, type TruncatedFileNameProps };\n"],"names":["TruncatedFileName","name","className","head","tail","splitFileName","Text","cn"],"mappings":";;;;AAUA,MAAMA,oBAAoB,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAA0B;IAClE,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC,cAAcJ;IAErC,OAAO,WAAP,GACI,oBAACK,MAAIA;QAAC,MAAK;QAAK,IAAG;QAAM,WAAWC,GAAG,gBAAgBL;QAAY,OAAOD;qBACtE,oBAAC;QAAK,WAAW;OAAaE,OAC7BC,OAAO,WAAPA,GAAO,oBAAC;QAAK,WAAW;OAA4BA,QAAe;AAGhF"}
+{"version":3,"file":"FilePicker/primitives/components/previews/TruncatedFileName.js","sources":["../../../../../src/FilePicker/primitives/components/previews/TruncatedFileName.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn } from \"~/utils.js\";\nimport { splitFileName } from \"./fileName.js\";\n\ninterface TruncatedFileNameProps {\n    name: string;\n    className?: string;\n}\n\n/**\n * A file name that truncates in the middle, keeping the extension (and a little of the stem)\n * visible: \"tide-cc-statuses-v2.png\" becomes \"tide-cc-statu…-v2.png\".\n */\nconst TruncatedFileName = ({ name, className }: TruncatedFileNameProps) => {\n    const { head, tail } = splitFileName(name);\n\n    return (\n        <Text size=\"sm\" as=\"div\" className={cn(\"flex min-w-0\", className)} title={name}>\n            <span className={\"truncate\"}>{head}</span>\n            {tail ? <span className={\"shrink-0 whitespace-pre\"}>{tail}</span> : null}\n        </Text>\n    );\n};\n\nexport { TruncatedFileName, type TruncatedFileNameProps };\n"],"names":["TruncatedFileName","name","className","head","tail","splitFileName","Text","cn"],"mappings":";;;;AAcA,MAAMA,oBAAoB,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAA0B;IAClE,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC,cAAcJ;IAErC,OAAO,WAAP,GACI,oBAACK,MAAIA;QAAC,MAAK;QAAK,IAAG;QAAM,WAAWC,GAAG,gBAAgBL;QAAY,OAAOD;qBACtE,oBAAC;QAAK,WAAW;OAAaE,OAC7BC,OAAO,WAAPA,GAAO,oBAAC;QAAK,WAAW;OAA4BA,QAAe;AAGhF"}

package/FilePicker/primitives/components/previews/fileName.d.ts

@@ -1,3 +1,11 @@
+/**
+ * Splits a file name into the part that may be truncated and the part that must stay visible.
+ *
+ * CSS can only cut the tail of a string, which is the least useful end of a file name - it hides
+ * the extension and any "-v2"/"-final" suffix, the two things that tell near-identical uploads
+ * apart. Rendering the head in a truncating element and pinning the tail after it moves the
+ * ellipsis into the middle without measuring anything.
+ */
 export declare const splitFileName: (name: string) => {
     head: string;
     tail: string;

package/FilePicker/primitives/components/previews/fileName.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/fileName.js","sources":["../../../../../src/FilePicker/primitives/components/previews/fileName.ts"],"sourcesContent":["const TAIL_STEM_CHARS = 3;\n\nexport const splitFileName = (name: string) => {\n    const dot = name.lastIndexOf(\".\");\n\n    if (dot <= 0) {\n        return { head: name, tail: \"\" };\n    }\n\n    const cut = dot - Math.min(TAIL_STEM_CHARS, dot);\n\n    if (cut <= 0) {\n        return { head: name, tail: \"\" };\n    }\n\n    const head = name.slice(0, cut);\n    const tail = name.slice(cut);\n\n    if (head.length <= tail.length) {\n        return { head: name, tail: \"\" };\n    }\n\n    return { head, tail };\n};\n"],"names":["TAIL_STEM_CHARS","splitFileName","name","dot","cut","Math","head","tail"],"mappings":"AAAA,MAAMA,kBAAkB;AAEjB,MAAMC,gBAAgB,CAACC;IAC1B,MAAMC,MAAMD,KAAK,WAAW,CAAC;IAE7B,IAAIC,OAAO,GACP,OAAO;QAAE,MAAMD;QAAM,MAAM;IAAG;IAGlC,MAAME,MAAMD,MAAME,KAAK,GAAG,CAACL,iBAAiBG;IAE5C,IAAIC,OAAO,GACP,OAAO;QAAE,MAAMF;QAAM,MAAM;IAAG;IAGlC,MAAMI,OAAOJ,KAAK,KAAK,CAAC,GAAGE;IAC3B,MAAMG,OAAOL,KAAK,KAAK,CAACE;IAExB,IAAIE,KAAK,MAAM,IAAIC,KAAK,MAAM,EAC1B,OAAO;QAAE,MAAML;QAAM,MAAM;IAAG;IAGlC,OAAO;QAAEI;QAAMC;IAAK;AACxB"}
+{"version":3,"file":"FilePicker/primitives/components/previews/fileName.js","sources":["../../../../../src/FilePicker/primitives/components/previews/fileName.ts"],"sourcesContent":["/**\n * How many characters of the stem to keep alongside the extension when a file name is too long\n * to fit. Enough to preserve a version or ordinal suffix - \"…-v2.png\" rather than \"….png\".\n */\nconst TAIL_STEM_CHARS = 3;\n\n/**\n * Splits a file name into the part that may be truncated and the part that must stay visible.\n *\n * CSS can only cut the tail of a string, which is the least useful end of a file name - it hides\n * the extension and any \"-v2\"/\"-final\" suffix, the two things that tell near-identical uploads\n * apart. Rendering the head in a truncating element and pinning the tail after it moves the\n * ellipsis into the middle without measuring anything.\n */\nexport const splitFileName = (name: string) => {\n    const dot = name.lastIndexOf(\".\");\n\n    // No extension, or a dotfile like \".gitignore\" - there is no meaningful tail to pin.\n    if (dot <= 0) {\n        return { head: name, tail: \"\" };\n    }\n\n    const cut = dot - Math.min(TAIL_STEM_CHARS, dot);\n\n    // The whole name is extension-and-a-bit; pinning all of it would defeat the truncation.\n    if (cut <= 0) {\n        return { head: name, tail: \"\" };\n    }\n\n    const head = name.slice(0, cut);\n    const tail = name.slice(cut);\n\n    // On a short name the pinned tail can end up longer than the part left to truncate\n    // (\"photo.jpeg\" would pin \"oto.jpeg\"), which reads as nonsense. Such names rarely overflow\n    // anyway, so fall back to ordinary end truncation.\n    if (head.length <= tail.length) {\n        return { head: name, tail: \"\" };\n    }\n\n    return { head, tail };\n};\n"],"names":["TAIL_STEM_CHARS","splitFileName","name","dot","cut","Math","head","tail"],"mappings":"AAIA,MAAMA,kBAAkB;AAUjB,MAAMC,gBAAgB,CAACC;IAC1B,MAAMC,MAAMD,KAAK,WAAW,CAAC;IAG7B,IAAIC,OAAO,GACP,OAAO;QAAE,MAAMD;QAAM,MAAM;IAAG;IAGlC,MAAME,MAAMD,MAAME,KAAK,GAAG,CAACL,iBAAiBG;IAG5C,IAAIC,OAAO,GACP,OAAO;QAAE,MAAMF;QAAM,MAAM;IAAG;IAGlC,MAAMI,OAAOJ,KAAK,KAAK,CAAC,GAAGE;IAC3B,MAAMG,OAAOL,KAAK,KAAK,CAACE;IAKxB,IAAIE,KAAK,MAAM,IAAIC,KAAK,MAAM,EAC1B,OAAO;QAAE,MAAML;QAAM,MAAM;IAAG;IAGlC,OAAO;QAAEI;QAAMC;IAAK;AACxB"}

package/IconPicker/domains/IconPickerIcon.js

@@ -14,7 +14,7 @@ class IconPickerIcon {
             prefix: "fas",
             name: "star"
         });
-        {
+        else {
             const values = value.split("/");
             return new IconPickerIcon({
                 prefix: values[0],

package/IconPicker/domains/IconPickerIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker/domains/IconPickerIcon.js","sources":["../../../src/IconPicker/domains/IconPickerIcon.tsx"],"sourcesContent":["import type { IconPickerIconDto } from \"./IconPickerIconDto.js\";\n\nexport class IconPickerIcon {\n    private readonly _prefix: string;\n    private readonly _name: string;\n\n    protected constructor(data: { prefix: string; name: string }) {\n        this._prefix = data.prefix;\n        this._name = data.name;\n    }\n\n    static create(data: IconPickerIconDto) {\n        return new IconPickerIcon({\n            prefix: data.prefix,\n            name: data.name\n        });\n    }\n\n    static createFromString(value?: string) {\n        if (typeof value === \"string\" && value.includes(\"/\")) {\n            const values = value.split(\"/\");\n            return new IconPickerIcon({\n                prefix: values[0],\n                name: values[1]\n            });\n        } else {\n            return new IconPickerIcon({\n                prefix: \"fas\",\n                name: \"star\"\n            });\n        }\n    }\n\n    get prefix() {\n        return this._prefix;\n    }\n\n    get name() {\n        return this._name;\n    }\n}\n"],"names":["IconPickerIcon","data","value","values"],"mappings":"AAEO,MAAMA;IAIT,YAAsBC,IAAsC,CAAE;QAC1D,IAAI,CAAC,OAAO,GAAGA,KAAK,MAAM;QAC1B,IAAI,CAAC,KAAK,GAAGA,KAAK,IAAI;IAC1B;IAEA,OAAO,OAAOA,IAAuB,EAAE;QACnC,OAAO,IAAID,eAAe;YACtB,QAAQC,KAAK,MAAM;YACnB,MAAMA,KAAK,IAAI;QACnB;IACJ;IAEA,OAAO,iBAAiBC,KAAc,EAAE;QACpC,KAAI,CAAiB,YAAjB,OAAOA,SAAsBA,MAAM,QAAQ,CAAC,IAAG,GAO/C,OAAO,IAAIF,eAAe;YACtB,QAAQ;YACR,MAAM;QACV;QAVkD;YAClD,MAAMG,SAASD,MAAM,KAAK,CAAC;YAC3B,OAAO,IAAIF,eAAe;gBACtB,QAAQG,MAAM,CAAC,EAAE;gBACjB,MAAMA,MAAM,CAAC,EAAE;YACnB;QACJ;IAMJ;IAEA,IAAI,SAAS;QACT,OAAO,IAAI,CAAC,OAAO;IACvB;IAEA,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,KAAK;IACrB;AACJ"}
+{"version":3,"file":"IconPicker/domains/IconPickerIcon.js","sources":["../../../src/IconPicker/domains/IconPickerIcon.tsx"],"sourcesContent":["import type { IconPickerIconDto } from \"./IconPickerIconDto.js\";\n\nexport class IconPickerIcon {\n    private readonly _prefix: string;\n    private readonly _name: string;\n\n    protected constructor(data: { prefix: string; name: string }) {\n        this._prefix = data.prefix;\n        this._name = data.name;\n    }\n\n    static create(data: IconPickerIconDto) {\n        return new IconPickerIcon({\n            prefix: data.prefix,\n            name: data.name\n        });\n    }\n\n    static createFromString(value?: string) {\n        if (typeof value === \"string\" && value.includes(\"/\")) {\n            const values = value.split(\"/\");\n            return new IconPickerIcon({\n                prefix: values[0],\n                name: values[1]\n            });\n        } else {\n            return new IconPickerIcon({\n                prefix: \"fas\",\n                name: \"star\"\n            });\n        }\n    }\n\n    get prefix() {\n        return this._prefix;\n    }\n\n    get name() {\n        return this._name;\n    }\n}\n"],"names":["IconPickerIcon","data","value","values"],"mappings":"AAEO,MAAMA;IAIT,YAAsBC,IAAsC,CAAE;QAC1D,IAAI,CAAC,OAAO,GAAGA,KAAK,MAAM;QAC1B,IAAI,CAAC,KAAK,GAAGA,KAAK,IAAI;IAC1B;IAEA,OAAO,OAAOA,IAAuB,EAAE;QACnC,OAAO,IAAID,eAAe;YACtB,QAAQC,KAAK,MAAM;YACnB,MAAMA,KAAK,IAAI;QACnB;IACJ;IAEA,OAAO,iBAAiBC,KAAc,EAAE;QACpC,KAAI,CAAiB,YAAjB,OAAOA,SAAsBA,MAAM,QAAQ,CAAC,IAAG,GAO/C,OAAO,IAAIF,eAAe;YACtB,QAAQ;YACR,MAAM;QACV;aAVkD;YAClD,MAAMG,SAASD,MAAM,KAAK,CAAC;YAC3B,OAAO,IAAIF,eAAe;gBACtB,QAAQG,MAAM,CAAC,EAAE;gBACjB,MAAMA,MAAM,CAAC,EAAE;YACnB;QACJ;IAMJ;IAEA,IAAI,SAAS;QACT,OAAO,IAAI,CAAC,OAAO;IACvB;IAEA,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,KAAK;IACrB;AACJ"}

package/ImageEditor/types.js

@@ -17,7 +17,7 @@ const DEFAULT_ASPECT_RATIOS = [
     {
         id: "3:4",
         label: "Portrait (3:4)",
-        ratio: 3 / 4
+        ratio: 0.75
     },
     {
         id: "9:16",

package/ImageEditor/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEditor/types.js","sources":["../../src/ImageEditor/types.ts"],"sourcesContent":["/**\n * Generic, self-contained types for the reusable image editor dialog.\n *\n * These are intentionally NOT imported from `@webiny/website-builder-sdk`:\n * `@webiny/admin-ui` is the low-level design-system layer and must not depend on\n * higher-level SDKs. The shapes are structurally identical to the SDK's\n * `WebinyImageEdit`/`WebinyImageValue`, so consumers (File Manager, Website\n * Builder) can pass values across the boundary without any mapping.\n */\n\n/** Minimal information the editor needs about the source image. */\nexport interface ImageEditorImage {\n    src: string;\n    /** Intrinsic (original) pixel width. */\n    width: number;\n    /** Intrinsic (original) pixel height. */\n    height: number;\n}\n\n/** Crop stored as the fraction (0..1) cut off from each edge of the image. */\nexport interface ImageEditorCrop {\n    top: number;\n    left: number;\n    bottom: number;\n    right: number;\n}\n\n/** Focal region in normalized (0..1) coordinates of the original image. */\nexport interface ImageEditorHotspot {\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n}\n\n/** The complete non-destructive edit produced by the dialog. */\nexport interface ImageEditorValue {\n    crop?: ImageEditorCrop;\n    hotspot?: ImageEditorHotspot;\n    alt?: string;\n    caption?: string;\n}\n\n/** A single aspect ratio used both for the crop selector and the preview strip. */\nexport interface ImageEditorAspectRatio {\n    id: string;\n    label: string;\n    /** `width / height`. */\n    ratio: number;\n}\n\n/**\n * The single source of truth for selectable aspect ratios, shared by the crop\n * shape selector and the preview-shapes dropdown so their labels stay identical.\n */\nexport const DEFAULT_ASPECT_RATIOS: ImageEditorAspectRatio[] = [\n    { id: \"1:1\", label: \"Square (1:1)\", ratio: 1 },\n    { id: \"4:3\", label: \"Landscape (4:3)\", ratio: 4 / 3 },\n    { id: \"16:9\", label: \"Widescreen (16:9)\", ratio: 16 / 9 },\n    { id: \"3:4\", label: \"Portrait (3:4)\", ratio: 3 / 4 },\n    { id: \"9:16\", label: \"Tall (9:16)\", ratio: 9 / 16 }\n];\n\n/** Preview shapes selected by default (the originally specified square / 4:3 / 16:9). */\nexport const DEFAULT_PREVIEW_RATIO_IDS = [\"1:1\", \"4:3\", \"16:9\"];\n"],"names":["DEFAULT_ASPECT_RATIOS","DEFAULT_PREVIEW_RATIO_IDS"],"mappings":"AAuDO,MAAMA,wBAAkD;IAC3D;QAAE,IAAI;QAAO,OAAO;QAAgB,OAAO;IAAE;IAC7C;QAAE,IAAI;QAAO,OAAO;QAAmB,OAAO,IAAI;IAAE;IACpD;QAAE,IAAI;QAAQ,OAAO;QAAqB,OAAO,KAAK;IAAE;IACxD;QAAE,IAAI;QAAO,OAAO;QAAkB,OAAO,IAAI;IAAE;IACnD;QAAE,IAAI;QAAQ,OAAO;QAAe,OAAO,IAAI;IAAG;CACrD;AAGM,MAAMC,4BAA4B;IAAC;IAAO;IAAO;CAAO"}
+{"version":3,"file":"ImageEditor/types.js","sources":["../../src/ImageEditor/types.ts"],"sourcesContent":["/**\n * Generic, self-contained types for the reusable image editor dialog.\n *\n * These are intentionally NOT imported from `@webiny/website-builder-sdk`:\n * `@webiny/admin-ui` is the low-level design-system layer and must not depend on\n * higher-level SDKs. The shapes are structurally identical to the SDK's\n * `WebinyImageEdit`/`WebinyImageValue`, so consumers (File Manager, Website\n * Builder) can pass values across the boundary without any mapping.\n */\n\n/** Minimal information the editor needs about the source image. */\nexport interface ImageEditorImage {\n    src: string;\n    /** Intrinsic (original) pixel width. */\n    width: number;\n    /** Intrinsic (original) pixel height. */\n    height: number;\n}\n\n/** Crop stored as the fraction (0..1) cut off from each edge of the image. */\nexport interface ImageEditorCrop {\n    top: number;\n    left: number;\n    bottom: number;\n    right: number;\n}\n\n/** Focal region in normalized (0..1) coordinates of the original image. */\nexport interface ImageEditorHotspot {\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n}\n\n/** The complete non-destructive edit produced by the dialog. */\nexport interface ImageEditorValue {\n    crop?: ImageEditorCrop;\n    hotspot?: ImageEditorHotspot;\n    alt?: string;\n    caption?: string;\n}\n\n/** A single aspect ratio used both for the crop selector and the preview strip. */\nexport interface ImageEditorAspectRatio {\n    id: string;\n    label: string;\n    /** `width / height`. */\n    ratio: number;\n}\n\n/**\n * The single source of truth for selectable aspect ratios, shared by the crop\n * shape selector and the preview-shapes dropdown so their labels stay identical.\n */\nexport const DEFAULT_ASPECT_RATIOS: ImageEditorAspectRatio[] = [\n    { id: \"1:1\", label: \"Square (1:1)\", ratio: 1 },\n    { id: \"4:3\", label: \"Landscape (4:3)\", ratio: 4 / 3 },\n    { id: \"16:9\", label: \"Widescreen (16:9)\", ratio: 16 / 9 },\n    { id: \"3:4\", label: \"Portrait (3:4)\", ratio: 3 / 4 },\n    { id: \"9:16\", label: \"Tall (9:16)\", ratio: 9 / 16 }\n];\n\n/** Preview shapes selected by default (the originally specified square / 4:3 / 16:9). */\nexport const DEFAULT_PREVIEW_RATIO_IDS = [\"1:1\", \"4:3\", \"16:9\"];\n"],"names":["DEFAULT_ASPECT_RATIOS","DEFAULT_PREVIEW_RATIO_IDS"],"mappings":"AAuDO,MAAMA,wBAAkD;IAC3D;QAAE,IAAI;QAAO,OAAO;QAAgB,OAAO;IAAE;IAC7C;QAAE,IAAI;QAAO,OAAO;QAAmB,OAAO,IAAI;IAAE;IACpD;QAAE,IAAI;QAAQ,OAAO;QAAqB,OAAO,KAAK;IAAE;IACxD;QAAE,IAAI;QAAO,OAAO;QAAkB,OAAO;IAAM;IACnD;QAAE,IAAI;QAAQ,OAAO;QAAe,OAAO,IAAI;IAAG;CACrD;AAGM,MAAMC,4BAA4B;IAAC;IAAO;IAAO;CAAO"}

package/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.test.js

@@ -372,7 +372,7 @@ describe("MultiAutoCompletePresenter", ()=>{
         ]);
         presenter.removeSelectedOption("option-2");
         expect(onValuesChange).toHaveBeenCalledWith([
-            "option-2"
+            "option-1"
         ]);
         expect(presenter.vm.optionsListVm.options).toEqual([
             {

package/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.test.js","sources":["../../../../src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.test.ts"],"sourcesContent":["import type { IMultiAutoCompletePresenter } from \"./MultiAutoCompletePresenter.js\";\nimport { MultiAutoCompletePresenter } from \"./MultiAutoCompletePresenter.js\";\nimport { MultiAutoCompleteInputPresenter } from \"./MultiAutoCompleteInputPresenter.js\";\nimport { MultiAutoCompleteSelectedOptionPresenter } from \"./MultiAutoCompleteSelectedOptionsPresenter.js\";\nimport { MultiAutoCompleteListOptionsPresenter } from \"./MultiAutoCompleteListOptionsPresenter.js\";\nimport { beforeEach, describe, expect, it, vi } from \"vitest\";\n\ndescribe(\"MultiAutoCompletePresenter\", () => {\n    let presenter: IMultiAutoCompletePresenter;\n    const onValuesChange = vi.fn();\n    const onOpenChange = vi.fn();\n    const onValuesReset = vi.fn();\n\n    beforeEach(() => {\n        const inputPresenter = new MultiAutoCompleteInputPresenter();\n        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();\n        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();\n\n        presenter = new MultiAutoCompletePresenter(\n            inputPresenter,\n            selectedOptionsPresenter,\n            optionsListPresenter\n        );\n    });\n\n    it(\"should return the compatible `vm.inputVm` based on params\", () => {\n        // `placeholder`\n        {\n            presenter.init({ placeholder: \"Custom placeholder\", onValuesChange });\n            expect(presenter.vm.inputVm.placeholder).toEqual(\"Custom placeholder\");\n        }\n\n        {\n            // default: no params\n            presenter.init({ onValuesChange });\n            expect(presenter.vm.inputVm.placeholder).toEqual(\"Start typing or select\");\n            expect(presenter.vm.inputVm.displayResetAction).toEqual(true);\n        }\n    });\n\n    it(\"should return the compatible `vm.selectedOptionsVm` based on params\", () => {\n        presenter.init({\n            options: [\"Option 1\", \"Option 2\", \"Option 3\"],\n            values: [\"Option 1\", \"Option 2\"],\n            onValuesChange\n        });\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                value: \"Option 1\",\n                label: \"Option 1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                value: \"Option 2\",\n                label: \"Option 2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n    });\n\n    it(\"should return the compatible `vm.selectedOptionsVm` with  no params\", () => {\n        presenter.init({ options: [\"Option 1\", \"Option 2\"], onValuesChange });\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);\n    });\n\n    it(\"should return the compatible `vm.optionsListVm` based on params\", () => {\n        // with `options` as string\n        {\n            presenter.init({ options: [\"Option 1\", \"Option 2\"], onValuesChange });\n            expect(presenter.vm.optionsListVm.options).toEqual([\n                {\n                    value: \"Option 1\",\n                    label: \"Option 1\",\n                    disabled: false,\n                    selected: false,\n                    separator: false,\n                    item: null\n                },\n                {\n                    value: \"Option 2\",\n                    label: \"Option 2\",\n                    disabled: false,\n                    selected: false,\n                    separator: false,\n                    item: null\n                }\n            ]);\n            expect(presenter.vm.optionsListVm.empty).toEqual(false);\n        }\n\n        // with `options` as formatted options\n        {\n            presenter.init({\n                onValuesChange,\n                options: [\n                    {\n                        value: \"option-1\",\n                        label: \"Option 1\"\n                    },\n                    {\n                        value: \"option-2\",\n                        label: \"Option 2\"\n                    },\n                    {\n                        value: \"option-3\",\n                        label: \"Option 3\",\n                        disabled: true\n                    },\n                    {\n                        value: \"option-4\",\n                        label: \"Option 4\",\n                        separator: true\n                    },\n                    {\n                        value: \"option-5\",\n                        label: \"Option 5\",\n                        item: {\n                            anyKey1: \"custom-value\",\n                            anyKey2: 2\n                        }\n                    }\n                ]\n            });\n\n            expect(presenter.vm.optionsListVm.options).toEqual([\n                {\n                    value: \"option-1\",\n                    label: \"Option 1\",\n                    disabled: false,\n                    selected: false,\n                    separator: false,\n                    item: null\n                },\n                {\n                    value: \"option-2\",\n                    label: \"Option 2\",\n                    disabled: false,\n                    selected: false, // `selected` is overwritten by the presenter\n                    separator: false,\n                    item: null\n                },\n                {\n                    value: \"option-3\",\n                    label: \"Option 3\",\n                    disabled: true,\n                    selected: false,\n                    separator: false,\n                    item: null\n                },\n                {\n                    value: \"option-4\",\n                    label: \"Option 4\",\n                    disabled: false,\n                    selected: false,\n                    separator: true,\n                    item: null\n                },\n                {\n                    value: \"option-5\",\n                    label: \"Option 5\",\n                    disabled: false,\n                    selected: false,\n                    separator: false,\n                    item: {\n                        anyKey1: \"custom-value\",\n                        anyKey2: 2\n                    }\n                }\n            ]);\n            expect(presenter.vm.optionsListVm.empty).toEqual(false);\n        }\n\n        // with `options` and `value`\n        {\n            presenter.init({\n                onValuesChange,\n                options: [\"Option 1\", \"Option 2\"],\n                values: [\"Option 1\"]\n            });\n            expect(presenter.vm.optionsListVm.options).toEqual([\n                {\n                    value: \"Option 1\",\n                    label: \"Option 1\",\n                    disabled: false,\n                    selected: true,\n                    separator: false,\n                    item: null\n                },\n                {\n                    value: \"Option 2\",\n                    label: \"Option 2\",\n                    disabled: false,\n                    selected: false,\n                    separator: false,\n                    item: null\n                }\n            ]);\n            expect(presenter.vm.optionsListVm.empty).toEqual(false);\n        }\n\n        {\n            // default: no params\n            presenter.init({ onValuesChange });\n            expect(presenter.vm.optionsListVm.options).toEqual([]);\n            expect(presenter.vm.optionsListVm.emptyMessage).toEqual(\n                \"Start typing to find an option.\"\n            );\n            expect(presenter.vm.optionsListVm.loadingMessage).toEqual(\"Loading...\");\n            expect(presenter.vm.optionsListVm.open).toEqual(false);\n            expect(presenter.vm.optionsListVm.empty).toEqual(true);\n        }\n    });\n\n    it(\"should change the `optionsListVm` and `selectedOptionsVm` when `setSelectedOption` is called\", () => {\n        presenter.init({\n            onValuesChange,\n            options: [\n                {\n                    label: \"Option 1\",\n                    value: \"option-1\"\n                },\n                {\n                    label: \"Option 2\",\n                    value: \"option-2\"\n                }\n            ]\n        });\n\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        presenter.setSelectedOption(\"option-2\");\n        expect(onValuesChange).toHaveBeenCalledWith([\"option-2\"]);\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        presenter.setSelectedOption(\"option-1\");\n        expect(onValuesChange).toHaveBeenCalledWith([\"option-2\", \"option-1\"]);\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n    });\n\n    it(\"should change the `optionsListVm` and `selectedOptionsVm` when `removeSelectedOption` is called\", () => {\n        presenter.init({\n            onValuesChange,\n            options: [\n                {\n                    label: \"Option 1\",\n                    value: \"option-1\"\n                },\n                {\n                    label: \"Option 2\",\n                    value: \"option-2\"\n                }\n            ],\n            values: [\"option-2\", \"option-1\"]\n        });\n\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        presenter.removeSelectedOption(\"option-2\");\n        expect(onValuesChange).toHaveBeenCalledWith([\"option-2\"]);\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            }\n        ]);\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        presenter.removeSelectedOption(\"option-1\");\n        expect(onValuesChange).toHaveBeenCalledWith([]);\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            }\n        ]);\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);\n    });\n\n    it(\"should set the internal `inputValue` when `setInputValue` is called\", () => {\n        presenter.init({ onValuesChange });\n\n        presenter.searchOption(\"value\");\n        expect(presenter.vm.inputVm.value).toEqual(\"value\");\n    });\n\n    it(\"should set the option as `selected` when the presenter is initialized with a value\", () => {\n        presenter.init({\n            onValuesChange,\n            values: [\"option-1\"],\n            options: [\n                {\n                    label: \"Option 1\",\n                    value: \"option-1\"\n                },\n                {\n                    label: \"Option 2\",\n                    value: \"option-2\"\n                }\n            ]\n        });\n\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            }\n        ]);\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n    });\n\n    it(\"should change the `optionListVm` and `selectedOptionsVm` when `resetSelectedOptions` is called\", () => {\n        presenter.init({\n            onValuesChange,\n            onValuesReset,\n            options: [\n                {\n                    label: \"Option 1\",\n                    value: \"option-1\"\n                },\n                {\n                    label: \"Option 2\",\n                    value: \"option-2\"\n                }\n            ]\n        });\n\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        presenter.setSelectedOption(\"option-1\");\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            }\n        ]);\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        presenter.resetSelectedOptions();\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            }\n        ]);\n        expect(presenter.vm.inputVm.value).toEqual(\"\");\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);\n\n        expect(onValuesChange).toHaveBeenCalledWith([]);\n        expect(onValuesReset).toHaveBeenCalled();\n    });\n\n    it(\"should change `listVm` and call `onOpenChange` when `setListOpenState` is called\", () => {\n        // let's open it\n        presenter.init({ onValuesChange, onOpenChange });\n        presenter.setListOpenState(true);\n        expect(presenter.vm.optionsListVm.open).toBe(true);\n        expect(onOpenChange).toHaveBeenCalledWith(true);\n\n        // let's close it\n        presenter.setListOpenState(false);\n        expect(presenter.vm.optionsListVm.open).toBe(false);\n        expect(onOpenChange).toHaveBeenCalledWith(false);\n    });\n\n    it(\"should be able to create new options if `allowFreeInput` is set to true\", () => {\n        // This feature is disabled by default\n        presenter.init({ onValuesChange });\n        presenter.searchOption(\"New Option 1\");\n        presenter.createOption(\"New Option 1\");\n        expect(presenter.vm.selectedOptionsVm.empty).toEqual(true);\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);\n    });\n\n    it(\"should not display the reset action if `displayResetAction` is set to `false` and option is selected\", () => {\n        presenter.init({\n            onValuesChange,\n            options: [\n                {\n                    label: \"Option 1\",\n                    value: \"option-1\"\n                },\n                {\n                    label: \"Option 2\",\n                    value: \"option-2\"\n                }\n            ],\n            displayResetAction: false\n        });\n\n        presenter.setSelectedOption(\"option-2\");\n        expect(onValuesChange).toHaveBeenCalledWith([\"option-2\"]);\n        // `displayResetAction` is set to `false` and option is selected\n        expect(presenter.vm.inputVm.displayResetAction).toEqual(false);\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n    });\n});\n"],"names":["describe","presenter","onValuesChange","vi","onOpenChange","onValuesReset","beforeEach","inputPresenter","MultiAutoCompleteInputPresenter","selectedOptionsPresenter","MultiAutoCompleteSelectedOptionPresenter","optionsListPresenter","MultiAutoCompleteListOptionsPresenter","MultiAutoCompletePresenter","it","expect"],"mappings":"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"}
+{"version":3,"file":"MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.test.js","sources":["../../../../src/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenter.test.ts"],"sourcesContent":["import type { IMultiAutoCompletePresenter } from \"./MultiAutoCompletePresenter.js\";\nimport { MultiAutoCompletePresenter } from \"./MultiAutoCompletePresenter.js\";\nimport { MultiAutoCompleteInputPresenter } from \"./MultiAutoCompleteInputPresenter.js\";\nimport { MultiAutoCompleteSelectedOptionPresenter } from \"./MultiAutoCompleteSelectedOptionsPresenter.js\";\nimport { MultiAutoCompleteListOptionsPresenter } from \"./MultiAutoCompleteListOptionsPresenter.js\";\nimport { beforeEach, describe, expect, it, vi } from \"vitest\";\n\ndescribe(\"MultiAutoCompletePresenter\", () => {\n    let presenter: IMultiAutoCompletePresenter;\n    const onValuesChange = vi.fn();\n    const onOpenChange = vi.fn();\n    const onValuesReset = vi.fn();\n\n    beforeEach(() => {\n        const inputPresenter = new MultiAutoCompleteInputPresenter();\n        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();\n        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();\n\n        presenter = new MultiAutoCompletePresenter(\n            inputPresenter,\n            selectedOptionsPresenter,\n            optionsListPresenter\n        );\n    });\n\n    it(\"should return the compatible `vm.inputVm` based on params\", () => {\n        // `placeholder`\n        {\n            presenter.init({ placeholder: \"Custom placeholder\", onValuesChange });\n            expect(presenter.vm.inputVm.placeholder).toEqual(\"Custom placeholder\");\n        }\n\n        {\n            // default: no params\n            presenter.init({ onValuesChange });\n            expect(presenter.vm.inputVm.placeholder).toEqual(\"Start typing or select\");\n            expect(presenter.vm.inputVm.displayResetAction).toEqual(true);\n        }\n    });\n\n    it(\"should return the compatible `vm.selectedOptionsVm` based on params\", () => {\n        presenter.init({\n            options: [\"Option 1\", \"Option 2\", \"Option 3\"],\n            values: [\"Option 1\", \"Option 2\"],\n            onValuesChange\n        });\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                value: \"Option 1\",\n                label: \"Option 1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                value: \"Option 2\",\n                label: \"Option 2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n    });\n\n    it(\"should return the compatible `vm.selectedOptionsVm` with  no params\", () => {\n        presenter.init({ options: [\"Option 1\", \"Option 2\"], onValuesChange });\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);\n    });\n\n    it(\"should return the compatible `vm.optionsListVm` based on params\", () => {\n        // with `options` as string\n        {\n            presenter.init({ options: [\"Option 1\", \"Option 2\"], onValuesChange });\n            expect(presenter.vm.optionsListVm.options).toEqual([\n                {\n                    value: \"Option 1\",\n                    label: \"Option 1\",\n                    disabled: false,\n                    selected: false,\n                    separator: false,\n                    item: null\n                },\n                {\n                    value: \"Option 2\",\n                    label: \"Option 2\",\n                    disabled: false,\n                    selected: false,\n                    separator: false,\n                    item: null\n                }\n            ]);\n            expect(presenter.vm.optionsListVm.empty).toEqual(false);\n        }\n\n        // with `options` as formatted options\n        {\n            presenter.init({\n                onValuesChange,\n                options: [\n                    {\n                        value: \"option-1\",\n                        label: \"Option 1\"\n                    },\n                    {\n                        value: \"option-2\",\n                        label: \"Option 2\"\n                    },\n                    {\n                        value: \"option-3\",\n                        label: \"Option 3\",\n                        disabled: true\n                    },\n                    {\n                        value: \"option-4\",\n                        label: \"Option 4\",\n                        separator: true\n                    },\n                    {\n                        value: \"option-5\",\n                        label: \"Option 5\",\n                        item: {\n                            anyKey1: \"custom-value\",\n                            anyKey2: 2\n                        }\n                    }\n                ]\n            });\n\n            expect(presenter.vm.optionsListVm.options).toEqual([\n                {\n                    value: \"option-1\",\n                    label: \"Option 1\",\n                    disabled: false,\n                    selected: false,\n                    separator: false,\n                    item: null\n                },\n                {\n                    value: \"option-2\",\n                    label: \"Option 2\",\n                    disabled: false,\n                    selected: false, // `selected` is overwritten by the presenter\n                    separator: false,\n                    item: null\n                },\n                {\n                    value: \"option-3\",\n                    label: \"Option 3\",\n                    disabled: true,\n                    selected: false,\n                    separator: false,\n                    item: null\n                },\n                {\n                    value: \"option-4\",\n                    label: \"Option 4\",\n                    disabled: false,\n                    selected: false,\n                    separator: true,\n                    item: null\n                },\n                {\n                    value: \"option-5\",\n                    label: \"Option 5\",\n                    disabled: false,\n                    selected: false,\n                    separator: false,\n                    item: {\n                        anyKey1: \"custom-value\",\n                        anyKey2: 2\n                    }\n                }\n            ]);\n            expect(presenter.vm.optionsListVm.empty).toEqual(false);\n        }\n\n        // with `options` and `value`\n        {\n            presenter.init({\n                onValuesChange,\n                options: [\"Option 1\", \"Option 2\"],\n                values: [\"Option 1\"]\n            });\n            expect(presenter.vm.optionsListVm.options).toEqual([\n                {\n                    value: \"Option 1\",\n                    label: \"Option 1\",\n                    disabled: false,\n                    selected: true,\n                    separator: false,\n                    item: null\n                },\n                {\n                    value: \"Option 2\",\n                    label: \"Option 2\",\n                    disabled: false,\n                    selected: false,\n                    separator: false,\n                    item: null\n                }\n            ]);\n            expect(presenter.vm.optionsListVm.empty).toEqual(false);\n        }\n\n        {\n            // default: no params\n            presenter.init({ onValuesChange });\n            expect(presenter.vm.optionsListVm.options).toEqual([]);\n            expect(presenter.vm.optionsListVm.emptyMessage).toEqual(\n                \"Start typing to find an option.\"\n            );\n            expect(presenter.vm.optionsListVm.loadingMessage).toEqual(\"Loading...\");\n            expect(presenter.vm.optionsListVm.open).toEqual(false);\n            expect(presenter.vm.optionsListVm.empty).toEqual(true);\n        }\n    });\n\n    it(\"should change the `optionsListVm` and `selectedOptionsVm` when `setSelectedOption` is called\", () => {\n        presenter.init({\n            onValuesChange,\n            options: [\n                {\n                    label: \"Option 1\",\n                    value: \"option-1\"\n                },\n                {\n                    label: \"Option 2\",\n                    value: \"option-2\"\n                }\n            ]\n        });\n\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        presenter.setSelectedOption(\"option-2\");\n        expect(onValuesChange).toHaveBeenCalledWith([\"option-2\"]);\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        presenter.setSelectedOption(\"option-1\");\n        expect(onValuesChange).toHaveBeenCalledWith([\"option-2\", \"option-1\"]);\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n    });\n\n    it(\"should change the `optionsListVm` and `selectedOptionsVm` when `removeSelectedOption` is called\", () => {\n        presenter.init({\n            onValuesChange,\n            options: [\n                {\n                    label: \"Option 1\",\n                    value: \"option-1\"\n                },\n                {\n                    label: \"Option 2\",\n                    value: \"option-2\"\n                }\n            ],\n            values: [\"option-2\", \"option-1\"]\n        });\n\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        presenter.removeSelectedOption(\"option-2\");\n        expect(onValuesChange).toHaveBeenCalledWith([\"option-1\"]);\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            }\n        ]);\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        presenter.removeSelectedOption(\"option-1\");\n        expect(onValuesChange).toHaveBeenCalledWith([]);\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            }\n        ]);\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);\n    });\n\n    it(\"should set the internal `inputValue` when `setInputValue` is called\", () => {\n        presenter.init({ onValuesChange });\n\n        presenter.searchOption(\"value\");\n        expect(presenter.vm.inputVm.value).toEqual(\"value\");\n    });\n\n    it(\"should set the option as `selected` when the presenter is initialized with a value\", () => {\n        presenter.init({\n            onValuesChange,\n            values: [\"option-1\"],\n            options: [\n                {\n                    label: \"Option 1\",\n                    value: \"option-1\"\n                },\n                {\n                    label: \"Option 2\",\n                    value: \"option-2\"\n                }\n            ]\n        });\n\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            }\n        ]);\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n    });\n\n    it(\"should change the `optionListVm` and `selectedOptionsVm` when `resetSelectedOptions` is called\", () => {\n        presenter.init({\n            onValuesChange,\n            onValuesReset,\n            options: [\n                {\n                    label: \"Option 1\",\n                    value: \"option-1\"\n                },\n                {\n                    label: \"Option 2\",\n                    value: \"option-2\"\n                }\n            ]\n        });\n\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        presenter.setSelectedOption(\"option-1\");\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            }\n        ]);\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n\n        presenter.resetSelectedOptions();\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            }\n        ]);\n        expect(presenter.vm.inputVm.value).toEqual(\"\");\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);\n\n        expect(onValuesChange).toHaveBeenCalledWith([]);\n        expect(onValuesReset).toHaveBeenCalled();\n    });\n\n    it(\"should change `listVm` and call `onOpenChange` when `setListOpenState` is called\", () => {\n        // let's open it\n        presenter.init({ onValuesChange, onOpenChange });\n        presenter.setListOpenState(true);\n        expect(presenter.vm.optionsListVm.open).toBe(true);\n        expect(onOpenChange).toHaveBeenCalledWith(true);\n\n        // let's close it\n        presenter.setListOpenState(false);\n        expect(presenter.vm.optionsListVm.open).toBe(false);\n        expect(onOpenChange).toHaveBeenCalledWith(false);\n    });\n\n    it(\"should be able to create new options if `allowFreeInput` is set to true\", () => {\n        // This feature is disabled by default\n        presenter.init({ onValuesChange });\n        presenter.searchOption(\"New Option 1\");\n        presenter.createOption(\"New Option 1\");\n        expect(presenter.vm.selectedOptionsVm.empty).toEqual(true);\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([]);\n    });\n\n    it(\"should not display the reset action if `displayResetAction` is set to `false` and option is selected\", () => {\n        presenter.init({\n            onValuesChange,\n            options: [\n                {\n                    label: \"Option 1\",\n                    value: \"option-1\"\n                },\n                {\n                    label: \"Option 2\",\n                    value: \"option-2\"\n                }\n            ],\n            displayResetAction: false\n        });\n\n        presenter.setSelectedOption(\"option-2\");\n        expect(onValuesChange).toHaveBeenCalledWith([\"option-2\"]);\n        // `displayResetAction` is set to `false` and option is selected\n        expect(presenter.vm.inputVm.displayResetAction).toEqual(false);\n        expect(presenter.vm.optionsListVm.options).toEqual([\n            {\n                label: \"Option 1\",\n                value: \"option-1\",\n                disabled: false,\n                selected: false,\n                separator: false,\n                item: null\n            },\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n        expect(presenter.vm.selectedOptionsVm.options).toEqual([\n            {\n                label: \"Option 2\",\n                value: \"option-2\",\n                disabled: false,\n                selected: true,\n                separator: false,\n                item: null\n            }\n        ]);\n    });\n});\n"],"names":["describe","presenter","onValuesChange","vi","onOpenChange","onValuesReset","beforeEach","inputPresenter","MultiAutoCompleteInputPresenter","selectedOptionsPresenter","MultiAutoCompleteSelectedOptionPresenter","optionsListPresenter","MultiAutoCompleteListOptionsPresenter","MultiAutoCompletePresenter","it","expect"],"mappings":"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"}

package/MultiAutoComplete/primitives/useMultiAutoComplete.js

@@ -40,9 +40,10 @@ const useMultiAutoComplete = (props)=>{
             const withFreeInputPresenter = new MultiAutoCompletePresenterWithFreeInput(temporaryOptionsPresenter, presenter);
             withFreeInputPresenter.init(params);
             return withFreeInputPresenter;
+        } else {
+            presenter.init(params);
+            return presenter;
         }
-        presenter.init(params);
-        return presenter;
     }, [
         props.allowFreeInput,
         props.uniqueValues

package/MultiAutoComplete/primitives/useMultiAutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiAutoComplete/primitives/useMultiAutoComplete.js","sources":["../../../src/MultiAutoComplete/primitives/useMultiAutoComplete.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { MultiAutoCompletePrimitiveProps } from \"./MultiAutoCompletePrimitive.js\";\nimport type { MultiAutoCompletePresenterParams } from \"./presenters/index.js\";\nimport {\n    MultiAutoCompleteInputPresenter,\n    MultiAutoCompleteListOptionsPresenter,\n    MultiAutoCompleteListOptionsPresenterWithUniqueValues,\n    MultiAutoCompletePresenter,\n    MultiAutoCompletePresenterWithFreeInput,\n    MultiAutoCompleteSelectedOptionPresenter\n} from \"./presenters/index.js\";\nimport { MultiAutoCompleteTemporaryOptionPresenter } from \"~/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter.js\";\n\nexport const useMultiAutoComplete = (props: MultiAutoCompletePrimitiveProps) => {\n    const params: MultiAutoCompletePresenterParams = useMemo(\n        () => ({\n            displayResetAction: props.displayResetAction,\n            emptyMessage: props.emptyMessage,\n            loadingMessage: props.loadingMessage,\n            initialMessage: props.initialMessage,\n            onOpenChange: props.onOpenChange,\n            onValueSearch: props.onValueSearch,\n            onValuesChange: props.onValuesChange,\n            onValuesReset: props.onValuesReset,\n            options: props.options,\n            placeholder: props.placeholder,\n            values: props.values\n        }),\n        [\n            props.displayResetAction,\n            props.emptyMessage,\n            props.loadingMessage,\n            props.initialMessage,\n            props.onOpenChange,\n            props.onValueSearch,\n            props.onValuesChange,\n            props.onValuesReset,\n            props.options,\n            props.placeholder,\n            props.values\n        ]\n    );\n\n    const presenter = useMemo(() => {\n        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();\n        const optionsListWithUniqueValues =\n            new MultiAutoCompleteListOptionsPresenterWithUniqueValues(optionsListPresenter);\n\n        const inputPresenter = new MultiAutoCompleteInputPresenter();\n        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();\n\n        let presenter = new MultiAutoCompletePresenter(\n            inputPresenter,\n            selectedOptionsPresenter,\n            optionsListPresenter\n        );\n\n        if (props?.uniqueValues) {\n            presenter = new MultiAutoCompletePresenter(\n                inputPresenter,\n                selectedOptionsPresenter,\n                optionsListWithUniqueValues\n            );\n        }\n\n        if (props?.allowFreeInput) {\n            const temporaryOptionsPresenter = new MultiAutoCompleteTemporaryOptionPresenter();\n            const withFreeInputPresenter = new MultiAutoCompletePresenterWithFreeInput(\n                temporaryOptionsPresenter,\n                presenter\n            );\n            withFreeInputPresenter.init(params);\n            return withFreeInputPresenter;\n        } else {\n            presenter.init(params);\n            return presenter;\n        }\n    }, [props.allowFreeInput, props.uniqueValues]);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params, presenter]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        setSelectedOption: presenter.setSelectedOption,\n        removeSelectedOption: presenter.removeSelectedOption,\n        searchOption: presenter.searchOption,\n        resetSelectedOptions: presenter.resetSelectedOptions,\n        setListOpenState: presenter.setListOpenState,\n        createOption: presenter.createOption\n    };\n};\n"],"names":["useMultiAutoComplete","props","params","useMemo","presenter","optionsListPresenter","MultiAutoCompleteListOptionsPresenter","optionsListWithUniqueValues","MultiAutoCompleteListOptionsPresenterWithUniqueValues","inputPresenter","MultiAutoCompleteInputPresenter","selectedOptionsPresenter","MultiAutoCompleteSelectedOptionPresenter","MultiAutoCompletePresenter","temporaryOptionsPresenter","MultiAutoCompleteTemporaryOptionPresenter","withFreeInputPresenter","MultiAutoCompletePresenterWithFreeInput","vm","setVm","useState","useEffect","autorun"],"mappings":";;;;AAcO,MAAMA,uBAAuB,CAACC;IACjC,MAAMC,SAA2CC,QAC7C,IAAO;YACH,oBAAoBF,MAAM,kBAAkB;YAC5C,cAAcA,MAAM,YAAY;YAChC,gBAAgBA,MAAM,cAAc;YACpC,gBAAgBA,MAAM,cAAc;YACpC,cAAcA,MAAM,YAAY;YAChC,eAAeA,MAAM,aAAa;YAClC,gBAAgBA,MAAM,cAAc;YACpC,eAAeA,MAAM,aAAa;YAClC,SAASA,MAAM,OAAO;YACtB,aAAaA,MAAM,WAAW;YAC9B,QAAQA,MAAM,MAAM;QACxB,IACA;QACIA,MAAM,kBAAkB;QACxBA,MAAM,YAAY;QAClBA,MAAM,cAAc;QACpBA,MAAM,cAAc;QACpBA,MAAM,YAAY;QAClBA,MAAM,aAAa;QACnBA,MAAM,cAAc;QACpBA,MAAM,aAAa;QACnBA,MAAM,OAAO;QACbA,MAAM,WAAW;QACjBA,MAAM,MAAM;KACf;IAGL,MAAMG,YAAYD,QAAQ;QACtB,MAAME,uBAAuB,IAAIC;QACjC,MAAMC,8BACF,IAAIC,sDAAsDH;QAE9D,MAAMI,iBAAiB,IAAIC;QAC3B,MAAMC,2BAA2B,IAAIC;QAErC,IAAIR,YAAY,IAAIS,2BAChBJ,gBACAE,0BACAN;QAGJ,IAAIJ,OAAO,cACPG,YAAY,IAAIS,2BACZJ,gBACAE,0BACAJ;QAIR,IAAIN,OAAO,gBAAgB;YACvB,MAAMa,4BAA4B,IAAIC;YACtC,MAAMC,yBAAyB,IAAIC,wCAC/BH,2BACAV;YAEJY,uBAAuB,IAAI,CAACd;YAC5B,OAAOc;QACX;QACIZ,UAAU,IAAI,CAACF;QACf,OAAOE;IAEf,GAAG;QAACH,MAAM,cAAc;QAAEA,MAAM,YAAY;KAAC;IAE7C,MAAM,CAACiB,IAAIC,MAAM,GAAGC,SAAShB,UAAU,EAAE;IAEzCiB,UAAU;QACNjB,UAAU,IAAI,CAACF;IACnB,GAAG;QAACA;QAAQE;KAAU;IAEtBiB,UAAU,IACCC,QAAQ;YACXH,MAAMf,UAAU,EAAE;QACtB,IACD;QAACA;KAAU;IAEd,OAAO;QACHc;QACA,mBAAmBd,UAAU,iBAAiB;QAC9C,sBAAsBA,UAAU,oBAAoB;QACpD,cAAcA,UAAU,YAAY;QACpC,sBAAsBA,UAAU,oBAAoB;QACpD,kBAAkBA,UAAU,gBAAgB;QAC5C,cAAcA,UAAU,YAAY;IACxC;AACJ"}
+{"version":3,"file":"MultiAutoComplete/primitives/useMultiAutoComplete.js","sources":["../../../src/MultiAutoComplete/primitives/useMultiAutoComplete.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { MultiAutoCompletePrimitiveProps } from \"./MultiAutoCompletePrimitive.js\";\nimport type { MultiAutoCompletePresenterParams } from \"./presenters/index.js\";\nimport {\n    MultiAutoCompleteInputPresenter,\n    MultiAutoCompleteListOptionsPresenter,\n    MultiAutoCompleteListOptionsPresenterWithUniqueValues,\n    MultiAutoCompletePresenter,\n    MultiAutoCompletePresenterWithFreeInput,\n    MultiAutoCompleteSelectedOptionPresenter\n} from \"./presenters/index.js\";\nimport { MultiAutoCompleteTemporaryOptionPresenter } from \"~/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter.js\";\n\nexport const useMultiAutoComplete = (props: MultiAutoCompletePrimitiveProps) => {\n    const params: MultiAutoCompletePresenterParams = useMemo(\n        () => ({\n            displayResetAction: props.displayResetAction,\n            emptyMessage: props.emptyMessage,\n            loadingMessage: props.loadingMessage,\n            initialMessage: props.initialMessage,\n            onOpenChange: props.onOpenChange,\n            onValueSearch: props.onValueSearch,\n            onValuesChange: props.onValuesChange,\n            onValuesReset: props.onValuesReset,\n            options: props.options,\n            placeholder: props.placeholder,\n            values: props.values\n        }),\n        [\n            props.displayResetAction,\n            props.emptyMessage,\n            props.loadingMessage,\n            props.initialMessage,\n            props.onOpenChange,\n            props.onValueSearch,\n            props.onValuesChange,\n            props.onValuesReset,\n            props.options,\n            props.placeholder,\n            props.values\n        ]\n    );\n\n    const presenter = useMemo(() => {\n        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();\n        const optionsListWithUniqueValues =\n            new MultiAutoCompleteListOptionsPresenterWithUniqueValues(optionsListPresenter);\n\n        const inputPresenter = new MultiAutoCompleteInputPresenter();\n        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();\n\n        let presenter = new MultiAutoCompletePresenter(\n            inputPresenter,\n            selectedOptionsPresenter,\n            optionsListPresenter\n        );\n\n        if (props?.uniqueValues) {\n            presenter = new MultiAutoCompletePresenter(\n                inputPresenter,\n                selectedOptionsPresenter,\n                optionsListWithUniqueValues\n            );\n        }\n\n        if (props?.allowFreeInput) {\n            const temporaryOptionsPresenter = new MultiAutoCompleteTemporaryOptionPresenter();\n            const withFreeInputPresenter = new MultiAutoCompletePresenterWithFreeInput(\n                temporaryOptionsPresenter,\n                presenter\n            );\n            withFreeInputPresenter.init(params);\n            return withFreeInputPresenter;\n        } else {\n            presenter.init(params);\n            return presenter;\n        }\n    }, [props.allowFreeInput, props.uniqueValues]);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params, presenter]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        setSelectedOption: presenter.setSelectedOption,\n        removeSelectedOption: presenter.removeSelectedOption,\n        searchOption: presenter.searchOption,\n        resetSelectedOptions: presenter.resetSelectedOptions,\n        setListOpenState: presenter.setListOpenState,\n        createOption: presenter.createOption\n    };\n};\n"],"names":["useMultiAutoComplete","props","params","useMemo","presenter","optionsListPresenter","MultiAutoCompleteListOptionsPresenter","optionsListWithUniqueValues","MultiAutoCompleteListOptionsPresenterWithUniqueValues","inputPresenter","MultiAutoCompleteInputPresenter","selectedOptionsPresenter","MultiAutoCompleteSelectedOptionPresenter","MultiAutoCompletePresenter","temporaryOptionsPresenter","MultiAutoCompleteTemporaryOptionPresenter","withFreeInputPresenter","MultiAutoCompletePresenterWithFreeInput","vm","setVm","useState","useEffect","autorun"],"mappings":";;;;AAcO,MAAMA,uBAAuB,CAACC;IACjC,MAAMC,SAA2CC,QAC7C,IAAO;YACH,oBAAoBF,MAAM,kBAAkB;YAC5C,cAAcA,MAAM,YAAY;YAChC,gBAAgBA,MAAM,cAAc;YACpC,gBAAgBA,MAAM,cAAc;YACpC,cAAcA,MAAM,YAAY;YAChC,eAAeA,MAAM,aAAa;YAClC,gBAAgBA,MAAM,cAAc;YACpC,eAAeA,MAAM,aAAa;YAClC,SAASA,MAAM,OAAO;YACtB,aAAaA,MAAM,WAAW;YAC9B,QAAQA,MAAM,MAAM;QACxB,IACA;QACIA,MAAM,kBAAkB;QACxBA,MAAM,YAAY;QAClBA,MAAM,cAAc;QACpBA,MAAM,cAAc;QACpBA,MAAM,YAAY;QAClBA,MAAM,aAAa;QACnBA,MAAM,cAAc;QACpBA,MAAM,aAAa;QACnBA,MAAM,OAAO;QACbA,MAAM,WAAW;QACjBA,MAAM,MAAM;KACf;IAGL,MAAMG,YAAYD,QAAQ;QACtB,MAAME,uBAAuB,IAAIC;QACjC,MAAMC,8BACF,IAAIC,sDAAsDH;QAE9D,MAAMI,iBAAiB,IAAIC;QAC3B,MAAMC,2BAA2B,IAAIC;QAErC,IAAIR,YAAY,IAAIS,2BAChBJ,gBACAE,0BACAN;QAGJ,IAAIJ,OAAO,cACPG,YAAY,IAAIS,2BACZJ,gBACAE,0BACAJ;QAIR,IAAIN,OAAO,gBAAgB;YACvB,MAAMa,4BAA4B,IAAIC;YACtC,MAAMC,yBAAyB,IAAIC,wCAC/BH,2BACAV;YAEJY,uBAAuB,IAAI,CAACd;YAC5B,OAAOc;QACX,OAAO;YACHZ,UAAU,IAAI,CAACF;YACf,OAAOE;QACX;IACJ,GAAG;QAACH,MAAM,cAAc;QAAEA,MAAM,YAAY;KAAC;IAE7C,MAAM,CAACiB,IAAIC,MAAM,GAAGC,SAAShB,UAAU,EAAE;IAEzCiB,UAAU;QACNjB,UAAU,IAAI,CAACF;IACnB,GAAG;QAACA;QAAQE;KAAU;IAEtBiB,UAAU,IACCC,QAAQ;YACXH,MAAMf,UAAU,EAAE;QACtB,IACD;QAACA;KAAU;IAEd,OAAO;QACHc;QACA,mBAAmBd,UAAU,iBAAiB;QAC9C,sBAAsBA,UAAU,oBAAoB;QACpD,cAAcA,UAAU,YAAY;QACpC,sBAAsBA,UAAU,oBAAoB;QACpD,kBAAkBA,UAAU,gBAAgB;QAC5C,cAAcA,UAAU,YAAY;IACxC;AACJ"}

package/Toast/useToast.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast/useToast.stories.js","sources":["../../src/Toast/useToast.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Toast } from \"./Toast.js\";\nimport { useToast, type ShowToastParams } from \"./useToast.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst ToastComponent = (props: ShowToastParams) => {\n    const [lastToast, setLastToast] = useState<string | number>(\"\");\n    const { showToast, hideToast, hideAllToasts } = useToast();\n    return (\n        <>\n            <Button\n                text={\"Show Toast\"}\n                onClick={() => {\n                    const toast = showToast(props);\n                    setLastToast(toast);\n                }}\n            />\n            <Button text={\"Hide latest toast\"} onClick={() => hideToast(lastToast)} />\n            <Button text={\"Hide all toasts\"} onClick={() => hideAllToasts()} />\n        </>\n    );\n};\n\nconst meta: Meta<ShowToastParams> = {\n    title: \"Components/Toast\",\n    component: ToastComponent,\n    parameters: {\n        layout: \"fullscreen\"\n    },\n    argTypes: {\n        variant: { control: \"select\", options: [\"default\", \"subtle\"] }\n    },\n    decorators: [\n        Story => (\n            <div className=\"w-full h-64 flex justify-center items-center gap-sm\">\n                <Story />\n                <Toast.Provider />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<ShowToastParams>;\n\nexport const Default: Story = {\n    args: {\n        title: \"New entry created\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    }\n};\n\nexport const WithTitleComponent: Story = {\n    args: {\n        title: <Toast.Title text={\"New entry created\"} />\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: 'Entry \"Article One\" has been successfully created'\n    }\n};\n\nexport const WithDescriptionComponent: Story = {\n    args: {\n        ...Default.args,\n        description: (\n            <Toast.Description text={'Entry \"Article One\" has been successfully created'} />\n        )\n    }\n};\n\nexport const WithActions: Story = {\n    args: {\n        ...Default.args,\n        actions: (\n            <Toast.Actions>\n                <Button\n                    key={\"action-1\"}\n                    text={\"Do the action\"}\n                    onClick={() => console.log(\"doTheAction\")}\n                />\n                <Button\n                    key={\"action-2\"}\n                    text={\"Dismiss\"}\n                    onClick={() => console.log(\"dismiss\")}\n                    variant={\"secondary\"}\n                />\n            </Toast.Actions>\n        )\n    }\n};\n\nexport const WithDescriptionAndActions: Story = {\n    args: {\n        ...Default.args,\n        description: (\n            <Toast.Description text={'Entry \"Article One\" has been successfully created'} />\n        ),\n        actions: (\n            <Toast.Actions>\n                <Button\n                    key={\"action-1\"}\n                    text={\"Do the action\"}\n                    onClick={() => console.log(\"doTheAction\")}\n                />\n                <Button\n                    key={\"action-2\"}\n                    text={\"Dismiss\"}\n                    onClick={() => console.log(\"dismiss\")}\n                    variant={\"secondary\"}\n                />\n            </Toast.Actions>\n        )\n    }\n};\n\nexport const WithCustomIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Icon icon={<SettingsIcon />} label={\"Settings\"} />\n    }\n};\n\nexport const WithInfiniteDuration: Story = {\n    args: {\n        ...Default.args,\n        duration: Infinity\n    }\n};\n\nexport const NotDismissible: Story = {\n    args: {\n        ...Default.args,\n        dismissible: false\n    }\n};\n\nexport const withCustomPosition: Story = {\n    args: {\n        ...Default.args,\n        position: \"bottom-right\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        title: \"New entry created\",\n        description: \"Entry has been successfully created\",\n        variant: \"default\",\n        position: \"top-right\",\n        duration: 6000,\n        dismissible: true,\n        actions: undefined,\n        icon: undefined\n    },\n    argTypes: {\n        title: {\n            description: \"Please refer to the 'With Title Component' example below for details.\"\n        },\n        description: {\n            description:\n                \"Please refer to the 'With Description' and 'With Description Component' examples below for details.\"\n        },\n        variant: {\n            description: \"Variant of the toast.\"\n        },\n        actions: {\n            description: \"Please refer to the 'With Actions' example below for details.\"\n        },\n        icon: {\n            description: \"Please refer to the 'With Custom Icon' example below for details.\"\n        },\n        duration: {\n            description:\n                \"Duration in milliseconds before the toast auto-dismisses. Please refer to the 'With Infinite Duration' example below for details.\",\n            control: \"number\"\n        },\n        dismissible: {\n            description: \"Please refer to the 'Not Dismissible' example below for details.\"\n        },\n        position: {\n            description: \"Please refer to the 'With Custom Position' example below for details.\",\n            control: \"select\",\n            options: [\n                \"top-left\",\n                \"top-right\",\n                \"bottom-left\",\n                \"bottom-right\",\n                \"top-center\",\n                \"bottom-center\"\n            ]\n        }\n    }\n};\n"],"names":["ToastComponent","props","lastToast","setLastToast","useState","showToast","hideToast","hideAllToasts","useToast","Button","toast","meta","Story","Toast","Default","SubtleVariant","WithTitleComponent","WithDescription","WithDescriptionComponent","WithActions","console","WithDescriptionAndActions","WithCustomIcon","Icon","SettingsIcon","WithInfiniteDuration","Infinity","NotDismissible","withCustomPosition","Documentation","undefined"],"mappings":"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"}
+{"version":3,"file":"Toast/useToast.stories.js","sources":["../../src/Toast/useToast.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Toast } from \"./Toast.js\";\nimport { useToast, type ShowToastParams } from \"./useToast.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst ToastComponent = (props: ShowToastParams) => {\n    const [lastToast, setLastToast] = useState<string | number>(\"\");\n    const { showToast, hideToast, hideAllToasts } = useToast();\n    return (\n        <>\n            <Button\n                text={\"Show Toast\"}\n                onClick={() => {\n                    const toast = showToast(props);\n                    setLastToast(toast);\n                }}\n            />\n            <Button text={\"Hide latest toast\"} onClick={() => hideToast(lastToast)} />\n            <Button text={\"Hide all toasts\"} onClick={() => hideAllToasts()} />\n        </>\n    );\n};\n\nconst meta: Meta<ShowToastParams> = {\n    title: \"Components/Toast\",\n    component: ToastComponent,\n    parameters: {\n        layout: \"fullscreen\"\n    },\n    argTypes: {\n        variant: { control: \"select\", options: [\"default\", \"subtle\"] }\n    },\n    decorators: [\n        Story => (\n            <div className=\"w-full h-64 flex justify-center items-center gap-sm\">\n                <Story />\n                <Toast.Provider />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<ShowToastParams>;\n\nexport const Default: Story = {\n    args: {\n        title: \"New entry created\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    }\n};\n\nexport const WithTitleComponent: Story = {\n    args: {\n        title: <Toast.Title text={\"New entry created\"} />\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: 'Entry \"Article One\" has been successfully created'\n    }\n};\n\nexport const WithDescriptionComponent: Story = {\n    args: {\n        ...Default.args,\n        description: (\n            <Toast.Description text={'Entry \"Article One\" has been successfully created'} />\n        )\n    }\n};\n\nexport const WithActions: Story = {\n    args: {\n        ...Default.args,\n        actions: (\n            <Toast.Actions>\n                <Button\n                    key={\"action-1\"}\n                    text={\"Do the action\"}\n                    onClick={() => console.log(\"doTheAction\")}\n                />\n                <Button\n                    key={\"action-2\"}\n                    text={\"Dismiss\"}\n                    onClick={() => console.log(\"dismiss\")}\n                    variant={\"secondary\"}\n                />\n            </Toast.Actions>\n        )\n    }\n};\n\nexport const WithDescriptionAndActions: Story = {\n    args: {\n        ...Default.args,\n        description: (\n            <Toast.Description text={'Entry \"Article One\" has been successfully created'} />\n        ),\n        actions: (\n            <Toast.Actions>\n                <Button\n                    key={\"action-1\"}\n                    text={\"Do the action\"}\n                    onClick={() => console.log(\"doTheAction\")}\n                />\n                <Button\n                    key={\"action-2\"}\n                    text={\"Dismiss\"}\n                    onClick={() => console.log(\"dismiss\")}\n                    variant={\"secondary\"}\n                />\n            </Toast.Actions>\n        )\n    }\n};\n\nexport const WithCustomIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Icon icon={<SettingsIcon />} label={\"Settings\"} />\n    }\n};\n\nexport const WithInfiniteDuration: Story = {\n    args: {\n        ...Default.args,\n        duration: Infinity\n    }\n};\n\nexport const NotDismissible: Story = {\n    args: {\n        ...Default.args,\n        dismissible: false\n    }\n};\n\nexport const withCustomPosition: Story = {\n    args: {\n        ...Default.args,\n        position: \"bottom-right\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        title: \"New entry created\",\n        description: \"Entry has been successfully created\",\n        variant: \"default\",\n        position: \"top-right\",\n        duration: 6000,\n        dismissible: true,\n        actions: undefined,\n        icon: undefined\n    },\n    argTypes: {\n        title: {\n            description: \"Please refer to the 'With Title Component' example below for details.\"\n        },\n        description: {\n            description:\n                \"Please refer to the 'With Description' and 'With Description Component' examples below for details.\"\n        },\n        variant: {\n            description: \"Variant of the toast.\"\n        },\n        actions: {\n            description: \"Please refer to the 'With Actions' example below for details.\"\n        },\n        icon: {\n            description: \"Please refer to the 'With Custom Icon' example below for details.\"\n        },\n        duration: {\n            description:\n                \"Duration in milliseconds before the toast auto-dismisses. Please refer to the 'With Infinite Duration' example below for details.\",\n            control: \"number\"\n        },\n        dismissible: {\n            description: \"Please refer to the 'Not Dismissible' example below for details.\"\n        },\n        position: {\n            description: \"Please refer to the 'With Custom Position' example below for details.\",\n            control: \"select\",\n            options: [\n                \"top-left\",\n                \"top-right\",\n                \"bottom-left\",\n                \"bottom-right\",\n                \"top-center\",\n                \"bottom-center\"\n            ]\n        }\n    }\n};\n"],"names":["ToastComponent","props","lastToast","setLastToast","useState","showToast","hideToast","hideAllToasts","useToast","Button","toast","meta","Story","Toast","Default","SubtleVariant","WithTitleComponent","WithDescription","WithDescriptionComponent","WithActions","console","WithDescriptionAndActions","WithCustomIcon","Icon","SettingsIcon","WithInfiniteDuration","Infinity","NotDismissible","withCustomPosition","Documentation","undefined"],"mappings":";;;;;;AAQA,MAAMA,iBAAiB,CAACC;IACpB,MAAM,CAACC,WAAWC,aAAa,GAAGC,SAA0B;IAC5D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,aAAa,EAAE,GAAGC;IAChD,OAAO,WAAP,GACI,wDACI,oBAACC,QAAMA;QACH,MAAM;QACN,SAAS;YACL,MAAMC,QAAQL,UAAUJ;YACxBE,aAAaO;QACjB;sBAEJ,oBAACD,QAAMA;QAAC,MAAM;QAAqB,SAAS,IAAMH,UAAUJ;sBAC5D,oBAACO,QAAMA;QAAC,MAAM;QAAmB,SAAS,IAAMF;;AAG5D;AAEA,MAAMI,OAA8B;IAChC,OAAO;IACP,WAAWX;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,SAAS;YAAE,SAAS;YAAU,SAAS;gBAAC;gBAAW;aAAS;QAAC;IACjE;IACA,YAAY;QACRY,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA,OAAAA,WAAAA,GACD,oBAACC,MAAM,QAAQ;KAG1B;AACL;AAEA,yBAAeF;AAIR,MAAMG,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,qBAA4B;IACrC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACH,MAAM,KAAK;YAAC,MAAM;;IAC9B;AACJ;AAEO,MAAMI,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,2BAAkC;IAC3C,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,aAAa,WAAb,GACI,oBAACD,MAAM,WAAW;YAAC,MAAM;;IAEjC;AACJ;AAEO,MAAMM,cAAqB;IAC9B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,SAAS,WAAT,GACI,oBAACD,MAAM,OAAO,sBACV,oBAACJ,QAAMA;YACH,KAAK;YACL,MAAM;YACN,SAAS,IAAMW,QAAQ,GAAG,CAAC;0BAE/B,oBAACX,QAAMA;YACH,KAAK;YACL,MAAM;YACN,SAAS,IAAMW,QAAQ,GAAG,CAAC;YAC3B,SAAS;;IAIzB;AACJ;AAEO,MAAMC,4BAAmC;IAC5C,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,aAAa,WAAb,GACI,oBAACD,MAAM,WAAW;YAAC,MAAM;;QAE7B,SAAS,WAAT,GACI,oBAACA,MAAM,OAAO,sBACV,oBAACJ,QAAMA;YACH,KAAK;YACL,MAAM;YACN,SAAS,IAAMW,QAAQ,GAAG,CAAC;0BAE/B,oBAACX,QAAMA;YACH,KAAK;YACL,MAAM;YACN,SAAS,IAAMW,QAAQ,GAAG,CAAC;YAC3B,SAAS;;IAIzB;AACJ;AAEO,MAAME,iBAAwB;IACjC,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACS,MAAIA;YAAC,oBAAM,oBAACC,gBAAYA;YAAK,OAAO;;IAC/C;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,UAAUY,KAAQ;IACtB;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMc,qBAA4B;IACrC,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,UAAU;IACd;AACJ;AAEO,MAAMe,gBAAuB;IAChC,MAAM;QACF,OAAO;QACP,aAAa;QACb,SAAS;QACT,UAAU;QACV,UAAU;QACV,aAAa;QACb,SAASC;QACT,MAAMA;IACV;IACA,UAAU;QACN,OAAO;YACH,aAAa;QACjB;QACA,aAAa;YACT,aACI;QACR;QACA,SAAS;YACL,aAAa;QACjB;QACA,SAAS;YACL,aAAa;QACjB;QACA,MAAM;YACF,aAAa;QACjB;QACA,UAAU;YACN,aACI;YACJ,SAAS;QACb;QACA,aAAa;YACT,aAAa;QACjB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;IACJ;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/admin-ui",
-	"version": "6.5.0-beta.4",
+	"version": "6.5.0-beta.5",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
@@ -17,55 +17,55 @@
 		"@fortawesome/react-fontawesome": "3.5.0",
 		"@minoru/react-dnd-treeview": "3.5.4",
 		"@monaco-editor/react": "4.7.0",
-		"@radix-ui/react-scroll-area": "1.2.15",
-		"@tanstack/react-table": "8.21.3",
-		"@webiny/icons": "6.5.0-beta.4",
-		"@webiny/react-composition": "6.5.0-beta.4",
-		"@webiny/utils": "6.5.0-beta.4",
+		"@radix-ui/react-scroll-area": "1.2.18",
+		"@tanstack/react-table": "9.2.4",
+		"@webiny/icons": "6.5.0-beta.5",
+		"@webiny/react-composition": "6.5.0-beta.5",
+		"@webiny/utils": "6.5.0-beta.5",
 		"bytes": "3.1.2",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",
 		"cmdk": "1.1.1",
 		"date-fns": "4.4.0",
 		"lodash": "4.18.1",
-		"minimatch": "10.2.5",
-		"mobx": "6.16.1",
+		"minimatch": "10.2.6",
+		"mobx": "7.0.5",
 		"monaco-editor": "0.53.0",
-		"radix-ui": "1.6.4",
+		"radix-ui": "1.6.7",
 		"react": "18.3.1",
 		"react-color": "2.19.3",
 		"react-custom-scrollbars": "4.2.1",
 		"react-day-picker": "10.0.1",
 		"react-dnd": "16.0.1",
 		"react-virtualized": "9.22.6",
-		"sonner": "2.0.7",
-		"tailwind-merge": "3.6.0",
+		"sonner": "2.0.8",
+		"tailwind-merge": "3.7.0",
 		"tailwindcss": "4.3.3",
 		"tw-animate-css": "1.4.0",
-		"type-fest": "5.8.0"
+		"type-fest": "5.10.0"
 	},
 	"devDependencies": {
 		"@fortawesome/free-solid-svg-icons": "7.3.1",
-		"@rsbuild/core": "2.1.7",
+		"@rsbuild/core": "2.2.10",
 		"@rsbuild/plugin-svgr": "2.0.5",
-		"@storybook/addon-a11y": "10.5.3",
-		"@storybook/addon-docs": "10.5.3",
-		"@storybook/react": "10.5.3",
+		"@storybook/addon-a11y": "10.6.0",
+		"@storybook/addon-docs": "10.6.0",
+		"@storybook/react": "10.6.0",
 		"@tailwindcss/postcss": "4.3.3",
 		"@types/react": "18.3.31",
 		"@types/react-color": "3.0.13",
 		"@types/react-custom-scrollbars": "4.0.13",
 		"@types/react-virtualized": "9.22.3",
-		"@webiny/build-tools": "6.5.0-beta.4",
-		"@webiny/project": "6.5.0-beta.4",
-		"chalk": "5.6.2",
-		"oxfmt": "0.59.0",
+		"@webiny/build-tools": "6.5.0-beta.5",
+		"@webiny/project": "6.5.0-beta.5",
+		"chalk": "6.0.1",
+		"oxfmt": "0.70.0",
 		"rimraf": "6.1.3",
-		"sass": "1.101.3",
-		"storybook": "10.5.3",
-		"storybook-react-rsbuild": "3.3.4",
+		"sass": "1.105.0",
+		"storybook": "10.6.0",
+		"storybook-react-rsbuild": "3.6.0",
 		"typescript": "7.0.2",
-		"vitest": "4.1.10"
+		"vitest": "5.0.2"
 	},
 	"publishConfig": {
 		"access": "public"