@cratis/components 0.1.19 → 1.0.3

package/dist/esm/DataTables/DataTableForObservableQuery.js

@@ -1,14 +1,66 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { DataTable } from 'primereact/datatable';
+import { Paginator } from 'primereact/paginator';
 import { Paging } from '@cratis/arc/queries';
 import { useObservableQueryWithPaging } from '@cratis/arc.react/queries';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 
 const paging = new Paging(0, 20);
 const DataTableForObservableQuery = (props) => {
     const [filters, setFilters] = useState(props.defaultFilters ?? {});
+    const [filteredTotal, setFilteredTotal] = useState(undefined);
     const [result, , setPage] = useObservableQueryWithPaging(props.query, paging, props.queryArguments);
-    return (jsx(DataTable, { value: result.data, lazy: true, rows: paging.pageSize, totalRecords: result.paging.totalItems, paginator: true, alwaysShowPaginator: false, first: result.paging.page * paging.pageSize, onPage: (e) => setPage(e.page ?? 0), scrollable: true, scrollHeight: 'flex', selectionMode: 'single', selection: props.selection, onSelectionChange: props.onSelectionChange, dataKey: props.dataKey, filters: filters, filterDisplay: 'menu', onFilter: (e) => setFilters(e.filters), globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, children: props.children }));
+    const containerRef = useRef(null);
+    const [tableHeight, setTableHeight] = useState(600);
+    const timeoutRef = useRef(undefined);
+    const isClientFiltering = props.clientFiltering === true;
+    const totalRecords = isClientFiltering && filteredTotal !== undefined ? filteredTotal : result.paging.totalItems;
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            timeoutRef.current = setTimeout(() => {
+                for (const entry of entries) {
+                    const containerHeight = entry.contentRect.height;
+                    if (containerHeight > 0) {
+                        const paginatorHeight = result.paging.totalItems > 0 ? 56 : 0;
+                        const calculatedHeight = containerHeight - paginatorHeight - 2;
+                        const newHeight = Math.max(calculatedHeight, 200);
+                        setTableHeight(prevHeight => {
+                            if (Math.abs(newHeight - prevHeight) > 5) {
+                                return newHeight;
+                            }
+                            return prevHeight;
+                        });
+                    }
+                }
+            }, 10);
+        });
+        resizeObserver.observe(containerRef.current);
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            resizeObserver.disconnect();
+        };
+    }, [result.paging.totalItems]);
+    return (jsxs("div", { ref: containerRef, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            border: '1px solid var(--surface-border)',
+            borderRadius: 'var(--border-radius)',
+            overflow: 'hidden'
+        }, children: [jsx("div", { style: { height: `${tableHeight}px`, overflow: 'hidden' }, children: jsx(DataTable, { value: result.data, lazy: !isClientFiltering, rows: paging.pageSize, totalRecords: totalRecords, scrollable: true, scrollHeight: '100%', selectionMode: 'single', selection: props.selection, onSelectionChange: props.onSelectionChange, dataKey: props.dataKey, filters: filters, filterDisplay: 'menu', onFilter: (e) => {
+                        setFilters(e.filters);
+                        if (isClientFiltering) {
+                            const filteredValue = e.filteredValue;
+                            setFilteredTotal(filteredValue ? filteredValue.length : undefined);
+                        }
+                    }, globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, children: props.children }) }), result.paging.totalItems > 0 && (jsx("div", { style: { borderTop: '1px solid var(--surface-border)' }, children: jsx(Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page) }) }))] }));
 };
 
 export { DataTableForObservableQuery };

package/dist/esm/DataTables/DataTableForObservableQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForObservableQuery.js","sources":["../../../DataTables/DataTableForObservableQuery.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { DataTable, DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';\nimport { Constructor } from '@cratis/fundamentals';\nimport { IObservableQueryFor, Paging } from '@cratis/arc/queries';\nimport { useObservableQueryWithPaging } from '@cratis/arc.react/queries';\nimport { ReactNode, useState } from 'react';\n\n \n\n/**\n * Props for the DataTableForQuery component\n */\nexport interface DataTableForObservableQueryProps<TQuery extends IObservableQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object> {\n    /**\n     * Children to render\n     */\n    children?: ReactNode;\n\n    /**\n     * The type of query to use\n     */\n    query: Constructor<TQuery>;\n\n    /**\n     * Optional arguments to pass to the query\n     */\n    queryArguments?: TArguments;\n\n    /**\n     * The message to show when there is no data\n     */\n    emptyMessage: string;\n\n    /**\n     * The key to use for the data\n     */\n    dataKey?: string | undefined;\n\n    /**\n     * The current selection.\n     */\n    selection?: TDataType | undefined | null;\n\n    /**\n     * Callback for when the selection changes\n     */\n    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TDataType[]>): void;\n\n    /**\n     * Fields to use for global filtering\n     */\n    globalFilterFields?: string[] | undefined;\n\n    /**\n     * Default filters to use\n     */\n    defaultFilters?: DataTableFilterMeta;\n}\n\nconst paging = new Paging(0, 20);\n\n/**\n * Represents a DataTable for a query.\n * @param props Props for the component\n * @returns Function to render the DataTableForQuery component\n */\nexport const DataTableForObservableQuery = <TQuery extends IObservableQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForObservableQueryProps<TQuery, TDataType, TArguments>) => {\n    const [filters, setFilters] = useState<DataTableFilterMeta>(props.defaultFilters ?? {});\n    const [result, , setPage] = useObservableQueryWithPaging(props.query, paging, props.queryArguments);\n\n    return (\n        <DataTable\n            value={result.data as unknown as object[]}\n            lazy\n            rows={paging.pageSize}\n            totalRecords={result.paging.totalItems}\n            paginator\n            alwaysShowPaginator={false}\n            first={result.paging.page * paging.pageSize}\n            onPage={(e) => setPage(e.page ?? 0)}\n            scrollable\n            scrollHeight={'flex'}\n            selectionMode='single'\n            selection={props.selection}\n            onSelectionChange={props.onSelectionChange}\n            dataKey={props.dataKey}\n            filters={filters}\n            filterDisplay='menu'\n            onFilter={(e) => setFilters(e.filters)}\n            globalFilterFields={props.globalFilterFields}\n            emptyMessage={props.emptyMessage}>\n            {props.children}\n        </DataTable>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AA6DA,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;AAOzB,MAAM,2BAA2B,GAAG,CAAiH,KAAsE,KAAI;AAClO,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAsB,KAAK,CAAC,cAAc,IAAI,EAAE,CAAC;IACvF,MAAM,CAAC,MAAM,IAAI,OAAO,CAAC,GAAG,4BAA4B,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC;AAEnG,IAAA,QACIA,GAAA,CAAC,SAAS,EAAA,EACN,KAAK,EAAE,MAAM,CAAC,IAA2B,EACzC,IAAI,EAAA,IAAA,EACJ,IAAI,EAAE,MAAM,CAAC,QAAQ,EACrB,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,EACtC,SAAS,EAAA,IAAA,EACT,mBAAmB,EAAE,KAAK,EAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAC3C,MAAM,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EACnC,UAAU,EAAA,IAAA,EACV,YAAY,EAAE,MAAM,EACpB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAC,MAAM,EACpB,QAAQ,EAAE,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,EACtC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAC5C,YAAY,EAAE,KAAK,CAAC,YAAY,EAAA,QAAA,EAC/B,KAAK,CAAC,QAAQ,EAAA,CACP;AAEpB;;;;"}
+{"version":3,"file":"DataTableForObservableQuery.js","sources":["../../../DataTables/DataTableForObservableQuery.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { DataTable, DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';\nimport { Paginator } from 'primereact/paginator';\nimport { Constructor } from '@cratis/fundamentals';\nimport { IObservableQueryFor, Paging } from '@cratis/arc/queries';\nimport { useObservableQueryWithPaging } from '@cratis/arc.react/queries';\nimport { ReactNode, useState, useRef, useEffect } from 'react';\n\n/**\n * Props for the DataTableForQuery component\n */\nexport interface DataTableForObservableQueryProps<TQuery extends IObservableQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object> {\n    /**\n     * Children to render\n     */\n    children?: ReactNode;\n\n    /**\n     * The type of query to use\n     */\n    query: Constructor<TQuery>;\n\n    /**\n     * Optional arguments to pass to the query\n     */\n    queryArguments?: TArguments;\n\n    /**\n     * The message to show when there is no data\n     */\n    emptyMessage: string;\n\n    /**\n     * The key to use for the data\n     */\n    dataKey?: string | undefined;\n\n    /**\n     * The current selection.\n     */\n    selection?: TDataType | undefined | null;\n\n    /**\n     * Callback for when the selection changes\n     */\n    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TDataType[]>): void;\n\n    /**\n     * Fields to use for global filtering\n     */\n    globalFilterFields?: string[] | undefined;\n\n    /**\n     * Default filters to use\n     */\n    defaultFilters?: DataTableFilterMeta;\n\n    /**\n     * Enable client-side filtering for the data table\n     */\n    clientFiltering?: boolean;\n}\n\nconst paging = new Paging(0, 20);\n\n/**\n * Represents a DataTable for a query.\n * @param props Props for the component\n * @returns Function to render the DataTableForQuery component\n */\nexport const DataTableForObservableQuery = <TQuery extends IObservableQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForObservableQueryProps<TQuery, TDataType, TArguments>) => {\n    const [filters, setFilters] = useState<DataTableFilterMeta>(props.defaultFilters ?? {});\n    const [filteredTotal, setFilteredTotal] = useState<number | undefined>(undefined);\n    const [result, , setPage] = useObservableQueryWithPaging(props.query, paging, props.queryArguments);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [tableHeight, setTableHeight] = useState<number>(600);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n    const isClientFiltering = props.clientFiltering === true;\n    const totalRecords = isClientFiltering && filteredTotal !== undefined ? filteredTotal : result.paging.totalItems;\n\n    useEffect(() => {\n        if (!containerRef.current) return;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current);\n            }\n\n            timeoutRef.current = setTimeout(() => {\n                for (const entry of entries) {\n                    const containerHeight = entry.contentRect.height;\n                    if (containerHeight > 0) {\n                        const paginatorHeight = result.paging.totalItems > 0 ? 56 : 0;\n                        const calculatedHeight = containerHeight - paginatorHeight - 2;\n                        const newHeight = Math.max(calculatedHeight, 200);\n\n                        setTableHeight(prevHeight => {\n                            if (Math.abs(newHeight - prevHeight) > 5) {\n                                return newHeight;\n                            }\n                            return prevHeight;\n                        });\n                    }\n                }\n            }, 10);\n        });\n\n        resizeObserver.observe(containerRef.current);\n\n        return () => {\n            if (timeoutRef.current) {\n                clearTimeout(timeoutRef.current);\n            }\n            resizeObserver.disconnect();\n        };\n    }, [result.paging.totalItems]);\n\n    return (\n        <div\n            ref={containerRef}\n            style={{\n                display: 'flex',\n                flexDirection: 'column',\n                height: '100%',\n                border: '1px solid var(--surface-border)',\n                borderRadius: 'var(--border-radius)',\n                overflow: 'hidden'\n            }}>\n            <div style={{ height: `${tableHeight}px`, overflow: 'hidden' }}>\n                <DataTable\n                    value={result.data as unknown as object[]}\n                    lazy={!isClientFiltering}\n                    rows={paging.pageSize}\n                    totalRecords={totalRecords}\n                    scrollable\n                    scrollHeight='100%'\n                    selectionMode='single'\n                    selection={props.selection}\n                    onSelectionChange={props.onSelectionChange}\n                    dataKey={props.dataKey}\n                    filters={filters}\n                    filterDisplay='menu'\n                    onFilter={(e) => {\n                        setFilters(e.filters);\n                        if (isClientFiltering) {\n                            const filteredValue = e.filteredValue as unknown[] | undefined;\n                            setFilteredTotal(filteredValue ? filteredValue.length : undefined);\n                        }\n                    }}\n                    globalFilterFields={props.globalFilterFields}\n                    emptyMessage={props.emptyMessage}>\n                    {props.children}\n                </DataTable>\n            </div>\n            {result.paging.totalItems > 0 && (\n                <div style={{ borderTop: '1px solid var(--surface-border)' }}>\n                    <Paginator\n                        first={result.paging.page * paging.pageSize}\n                        rows={paging.pageSize}\n                        totalRecords={result.paging.totalItems}\n                        onPageChange={(e) => setPage(e.page)}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/DataTables/DataTableForObservableQuery.stories.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ComponentType<Record<string, never>> | undefined;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+import { Meta, StoryObj } from '@storybook/react';
+import { DataTableForObservableQuery } from './DataTableForObservableQuery';
+declare const meta: Meta<typeof DataTableForObservableQuery>;
+export default meta;
+type Story = StoryObj<typeof DataTableForObservableQuery>;
+export declare const Default: Story;
+export declare const WithSelection: Story;
 //# sourceMappingURL=DataTableForObservableQuery.stories.d.ts.map

package/dist/esm/DataTables/DataTableForObservableQuery.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForObservableQuery.stories.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForObservableQuery.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;AAI1B,wBAAyF;AAEzF,eAAO,MAAM,OAAO,+CAA4E,CAAC"}
+{"version":3,"file":"DataTableForObservableQuery.stories.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForObservableQuery.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAK5E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,2BAA2B,CAGlD,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAmD1D,eAAO,MAAM,OAAO,EAAE,KAoCrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA0C3B,CAAC"}

package/dist/esm/DataTables/DataTableForObservableQuery.stories.js

@@ -1,6 +1,56 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as Comp from './DataTableForObservableQuery';
-const Component = Comp.default || Object.values(Comp)[0];
-export default { title: 'DataTables/DataTableForObservableQuery', component: Component };
-export const Default = () => (Component ? _jsx(Component, {}) : _jsx("div", { children: "Unable to render component" }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DataTableForObservableQuery } from './DataTableForObservableQuery';
+import { Column } from 'primereact/column';
+import { ObservableQueryFor } from '@cratis/arc/queries';
+const meta = {
+    title: 'DataTables/DataTableForObservableQuery',
+    component: DataTableForObservableQuery,
+};
+export default meta;
+class TasksQuery extends ObservableQueryFor {
+    route = '/api/tasks';
+    routeTemplate = '/api/tasks';
+    defaultValue = { id: 0, title: '', status: 'todo', priority: 'low', assignee: '' };
+    parameterDescriptors = [];
+    get requiredRequestParameters() {
+        return [];
+    }
+    constructor() {
+        super(Object, false);
+    }
+}
+const getStatusColor = (status) => {
+    switch (status) {
+        case 'done':
+            return 'text-green-600';
+        case 'in-progress':
+            return 'text-blue-600';
+        case 'todo':
+            return 'text-gray-600';
+        default:
+            return '';
+    }
+};
+const getPriorityColor = (priority) => {
+    switch (priority) {
+        case 'high':
+            return 'text-red-600 font-bold';
+        case 'medium':
+            return 'text-orange-600';
+        case 'low':
+            return 'text-gray-600';
+        default:
+            return '';
+    }
+};
+export const Default = {
+    render: () => (_jsx("div", { className: "p-4", children: _jsxs(DataTableForObservableQuery, { query: TasksQuery, emptyMessage: "No tasks found", dataKey: "id", children: [_jsx(Column, { field: "id", header: "ID", sortable: true, style: { width: '10%' } }), _jsx(Column, { field: "title", header: "Task Title", sortable: true, style: { width: '35%' } }), _jsx(Column, { field: "status", header: "Status", sortable: true, style: { width: '20%' }, body: (rowData) => (_jsx("span", { className: getStatusColor(rowData.status), children: rowData.status })) }), _jsx(Column, { field: "priority", header: "Priority", sortable: true, style: { width: '15%' }, body: (rowData) => (_jsx("span", { className: getPriorityColor(rowData.priority), children: rowData.priority })) }), _jsx(Column, { field: "assignee", header: "Assignee", sortable: true, style: { width: '20%' } })] }) }))
+};
+export const WithSelection = {
+    render: () => {
+        const [selectedTask, setSelectedTask] = useState();
+        return (_jsxs("div", { className: "p-4", children: [_jsxs(DataTableForObservableQuery, { query: TasksQuery, emptyMessage: "No tasks found", dataKey: "id", selection: selectedTask, onSelectionChange: (e) => setSelectedTask(e.value), children: [_jsx(Column, { selectionMode: "single", headerStyle: { width: '3rem' } }), _jsx(Column, { field: "id", header: "ID", sortable: true, style: { width: '10%' } }), _jsx(Column, { field: "title", header: "Task Title", sortable: true, style: { width: '35%' } }), _jsx(Column, { field: "status", header: "Status", sortable: true, style: { width: '20%' }, body: (rowData) => (_jsx("span", { className: getStatusColor(rowData.status), children: rowData.status })) }), _jsx(Column, { field: "assignee", header: "Assignee", sortable: true, style: { width: '20%' } })] }), selectedTask && (_jsxs("div", { className: "mt-4 p-4 border rounded", children: [_jsx("h3", { className: "font-bold mb-2", children: "Selected Task:" }), _jsxs("p", { children: [_jsx("strong", { children: "Title:" }), " ", selectedTask.title] }), _jsxs("p", { children: [_jsx("strong", { children: "Status:" }), " ", selectedTask.status] }), _jsxs("p", { children: [_jsx("strong", { children: "Priority:" }), " ", selectedTask.priority] }), _jsxs("p", { children: [_jsx("strong", { children: "Assignee:" }), " ", selectedTask.assignee] })] }))] }));
+    }
+};
 //# sourceMappingURL=DataTableForObservableQuery.stories.js.map

package/dist/esm/DataTables/DataTableForObservableQuery.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForObservableQuery.stories.js","sourceRoot":"","sources":["../../../DataTables/DataTableForObservableQuery.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,IAAI,MAAM,+BAA+B,CAAC;AACtD,MAAM,SAAS,GAA4D,IAAgC,CAAC,OAA4E,IAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAuE,CAAC;AAE1R,eAAe,EAAE,KAAK,EAAE,wCAAwC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAEzF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,uDAAqC,CAAC,CAAC"}
+{"version":3,"file":"DataTableForObservableQuery.stories.js","sourceRoot":"","sources":["../../../DataTables/DataTableForObservableQuery.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/DataTables/DataTableForQuery.d.ts

@@ -12,6 +12,7 @@ export interface DataTableForQueryProps<TQuery extends IQueryFor<TDataType, TArg
     onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TDataType[]>): void;
     globalFilterFields?: string[] | undefined;
     defaultFilters?: DataTableFilterMeta;
+    clientFiltering?: boolean;
 }
 export declare const DataTableForQuery: <TQuery extends IQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForQueryProps<TQuery, TDataType, TArguments>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DataTableForQuery.d.ts.map

package/dist/esm/DataTables/DataTableForQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForQuery.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForQuery.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,mBAAmB,EAAE,mCAAmC,EAAE,MAAM,sBAAsB,CAAC;AAC3G,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAU,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAO5C,MAAM,WAAW,sBAAsB,CAAC,MAAM,SAAS,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM;IAIxI,QAAQ,CAAC,EAAE,SAAS,CAAC;IAKrB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAK3B,cAAc,CAAC,EAAE,UAAU,CAAC;IAK5B,YAAY,EAAE,MAAM,CAAC;IAKrB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAK7B,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IAKzC,iBAAiB,CAAC,CAAC,KAAK,EAAE,mCAAmC,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC;IAKlF,kBAAkB,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAK1C,cAAc,CAAC,EAAE,mBAAmB,CAAC;CACxC;AASD,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM,EAAE,OAAO,sBAAsB,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,4CA4BnM,CAAC"}
+{"version":3,"file":"DataTableForQuery.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForQuery.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,mBAAmB,EAAE,mCAAmC,EAAE,MAAM,sBAAsB,CAAC;AAE3G,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAU,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AAKpD,MAAM,WAAW,sBAAsB,CAAC,MAAM,SAAS,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM;IAIxI,QAAQ,CAAC,EAAE,SAAS,CAAC;IAKrB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAK3B,cAAc,CAAC,EAAE,UAAU,CAAC;IAK5B,YAAY,EAAE,MAAM,CAAC;IAKrB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAK7B,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IAKzC,iBAAiB,CAAC,CAAC,KAAK,EAAE,mCAAmC,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC;IAKlF,kBAAkB,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAK1C,cAAc,CAAC,EAAE,mBAAmB,CAAC;IAKrC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AASD,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM,EAAE,OAAO,sBAAsB,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,4CAyDnM,CAAC"}

package/dist/esm/DataTables/DataTableForQuery.js

@@ -1,14 +1,32 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { DataTable } from 'primereact/datatable';
+import { Paginator } from 'primereact/paginator';
 import { Paging } from '@cratis/arc/queries';
 import { useQueryWithPaging } from '@cratis/arc.react/queries';
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 
 const paging = new Paging(0, 20);
 const DataTableForQuery = (props) => {
     const [filters, setFilters] = useState(props.defaultFilters ?? {});
+    const [filteredTotal, setFilteredTotal] = useState(undefined);
     const [result, , , setPage] = useQueryWithPaging(props.query, paging, props.queryArguments);
-    return (jsx(DataTable, { value: result.data, lazy: true, rows: paging.pageSize, totalRecords: result.paging.totalItems, paginator: true, alwaysShowPaginator: false, first: result.paging.page * paging.pageSize, onPage: (e) => setPage(e.page ?? 0), scrollable: true, scrollHeight: 'flex', selectionMode: 'single', selection: props.selection, onSelectionChange: props.onSelectionChange, dataKey: props.dataKey, filters: filters, filterDisplay: 'menu', onFilter: (e) => setFilters(e.filters), globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, children: props.children }));
+    const containerRef = useRef(null);
+    const isClientFiltering = props.clientFiltering === true;
+    const totalRecords = isClientFiltering && filteredTotal !== undefined ? filteredTotal : result.paging.totalItems;
+    return (jsxs("div", { ref: containerRef, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            border: '1px solid var(--surface-border)',
+            borderRadius: 'var(--border-radius)',
+            overflow: 'hidden'
+        }, children: [jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'auto' }, children: jsx(DataTable, { value: result.data, lazy: !isClientFiltering, rows: paging.pageSize, totalRecords: totalRecords, selectionMode: 'single', selection: props.selection, onSelectionChange: props.onSelectionChange, dataKey: props.dataKey, filters: filters, filterDisplay: 'menu', onFilter: (e) => {
+                        setFilters(e.filters);
+                        if (isClientFiltering) {
+                            const filteredValue = e.filteredValue;
+                            setFilteredTotal(filteredValue ? filteredValue.length : undefined);
+                        }
+                    }, globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, style: { minWidth: '100%' }, children: props.children }) }), result.paging.totalItems > 0 && (jsx("div", { style: { borderTop: '1px solid var(--surface-border)', flexShrink: 0 }, children: jsx(Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page) }) }))] }));
 };
 
 export { DataTableForQuery };

package/dist/esm/DataTables/DataTableForQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForQuery.js","sources":["../../../DataTables/DataTableForQuery.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { DataTable, DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';\nimport { Constructor } from '@cratis/fundamentals';\nimport { IQueryFor, Paging } from '@cratis/arc/queries';\nimport { useQueryWithPaging } from '@cratis/arc.react/queries';\nimport { ReactNode, useState } from 'react';\n\n \n\n/**\n * Props for the DataTableForQuery component\n */\nexport interface DataTableForQueryProps<TQuery extends IQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object> {\n    /**\n     * Children to render\n     */\n    children?: ReactNode;\n\n    /**\n     * The type of query to use\n     */\n    query: Constructor<TQuery>;\n\n    /**\n     * Optional Arguments to pass to the query\n     */\n    queryArguments?: TArguments;\n\n    /**\n     * The message to show when there is no data\n     */\n    emptyMessage: string;\n\n    /**\n     * The key to use for the data\n     */\n    dataKey?: string | undefined;\n\n    /**\n     * The current selection.\n     */\n    selection?: TDataType | undefined | null;\n\n    /**\n     * Callback for when the selection changes\n     */\n    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TDataType[]>): void;\n\n    /**\n     * Fields to use for global filtering\n     */\n    globalFilterFields?: string[] | undefined;\n\n    /**\n     * Default filters to use\n     */\n    defaultFilters?: DataTableFilterMeta;\n}\n\nconst paging = new Paging(0, 20);\n\n/**\n * Represents a DataTable for a query.\n * @param props Props for the component\n * @returns Function to render the DataTableForQuery component\n */\nexport const DataTableForQuery = <TQuery extends IQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForQueryProps<TQuery, TDataType, TArguments>) => {\n    const [filters, setFilters] = useState<DataTableFilterMeta>(props.defaultFilters ?? {});\n    const [result, , , setPage] = useQueryWithPaging(props.query, paging, props.queryArguments);\n\n    return (\n        <DataTable\n            value={result.data as unknown as object[]}\n            lazy\n            rows={paging.pageSize}\n            totalRecords={result.paging.totalItems}\n            paginator\n            alwaysShowPaginator={false}\n            first={result.paging.page * paging.pageSize}\n            onPage={(e) => setPage(e.page ?? 0)}\n            scrollable\n            scrollHeight={'flex'}\n            selectionMode='single'\n            selection={props.selection}\n            onSelectionChange={props.onSelectionChange}\n            dataKey={props.dataKey}\n            filters={filters}\n            filterDisplay='menu'\n            onFilter={(e) => setFilters(e.filters)}\n            globalFilterFields={props.globalFilterFields}\n            emptyMessage={props.emptyMessage} >\n            {props.children}\n        </DataTable >\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AA6DA,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;AAOzB,MAAM,iBAAiB,GAAG,CAAuG,KAA4D,KAAI;AACpM,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAsB,KAAK,CAAC,cAAc,IAAI,EAAE,CAAC;IACvF,MAAM,CAAC,MAAM,MAAM,OAAO,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC;AAE3F,IAAA,QACIA,GAAA,CAAC,SAAS,EAAA,EACN,KAAK,EAAE,MAAM,CAAC,IAA2B,EACzC,IAAI,EAAA,IAAA,EACJ,IAAI,EAAE,MAAM,CAAC,QAAQ,EACrB,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,EACtC,SAAS,EAAA,IAAA,EACT,mBAAmB,EAAE,KAAK,EAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAC3C,MAAM,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EACnC,UAAU,EAAA,IAAA,EACV,YAAY,EAAE,MAAM,EACpB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAC,MAAM,EACpB,QAAQ,EAAE,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,EACtC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAC5C,YAAY,EAAE,KAAK,CAAC,YAAY,EAAA,QAAA,EAC/B,KAAK,CAAC,QAAQ,EAAA,CACN;AAErB;;;;"}
+{"version":3,"file":"DataTableForQuery.js","sources":["../../../DataTables/DataTableForQuery.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { DataTable, DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';\nimport { Paginator } from 'primereact/paginator';\nimport { Constructor } from '@cratis/fundamentals';\nimport { IQueryFor, Paging } from '@cratis/arc/queries';\nimport { useQueryWithPaging } from '@cratis/arc.react/queries';\nimport { ReactNode, useState, useRef } from 'react';\n\n/**\n * Props for the DataTableForQuery component\n */\nexport interface DataTableForQueryProps<TQuery extends IQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object> {\n    /**\n     * Children to render\n     */\n    children?: ReactNode;\n\n    /**\n     * The type of query to use\n     */\n    query: Constructor<TQuery>;\n\n    /**\n     * Optional Arguments to pass to the query\n     */\n    queryArguments?: TArguments;\n\n    /**\n     * The message to show when there is no data\n     */\n    emptyMessage: string;\n\n    /**\n     * The key to use for the data\n     */\n    dataKey?: string | undefined;\n\n    /**\n     * The current selection.\n     */\n    selection?: TDataType | undefined | null;\n\n    /**\n     * Callback for when the selection changes\n     */\n    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TDataType[]>): void;\n\n    /**\n     * Fields to use for global filtering\n     */\n    globalFilterFields?: string[] | undefined;\n\n    /**\n     * Default filters to use\n     */\n    defaultFilters?: DataTableFilterMeta;\n\n    /**\n     * Enable client-side filtering for the data table\n     */\n    clientFiltering?: boolean;\n}\n\nconst paging = new Paging(0, 20);\n\n/**\n * Represents a DataTable for a query.\n * @param props Props for the component\n * @returns Function to render the DataTableForQuery component\n */\nexport const DataTableForQuery = <TQuery extends IQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForQueryProps<TQuery, TDataType, TArguments>) => {\n    const [filters, setFilters] = useState<DataTableFilterMeta>(props.defaultFilters ?? {});\n    const [filteredTotal, setFilteredTotal] = useState<number | undefined>(undefined);\n    const [result, , , setPage] = useQueryWithPaging(props.query, paging, props.queryArguments);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const isClientFiltering = props.clientFiltering === true;\n    const totalRecords = isClientFiltering && filteredTotal !== undefined ? filteredTotal : result.paging.totalItems;\n\n    return (\n        <div\n            ref={containerRef}\n            style={{\n                display: 'flex',\n                flexDirection: 'column',\n                height: '100%',\n                border: '1px solid var(--surface-border)',\n                borderRadius: 'var(--border-radius)',\n                overflow: 'hidden'\n            }}>\n            <div style={{ flex: 1, minHeight: 0, overflow: 'auto' }}>\n                <DataTable\n                    value={result.data as unknown as object[]}\n                    lazy={!isClientFiltering}\n                    rows={paging.pageSize}\n                    totalRecords={totalRecords}\n                    selectionMode='single'\n                    selection={props.selection}\n                    onSelectionChange={props.onSelectionChange}\n                    dataKey={props.dataKey}\n                    filters={filters}\n                    filterDisplay='menu'\n                    onFilter={(e) => {\n                        setFilters(e.filters);\n                        if (isClientFiltering) {\n                            const filteredValue = e.filteredValue as unknown[] | undefined;\n                            setFilteredTotal(filteredValue ? filteredValue.length : undefined);\n                        }\n                    }}\n                    globalFilterFields={props.globalFilterFields}\n                    emptyMessage={props.emptyMessage}\n                    style={{ minWidth: '100%' }}>\n                    {props.children}\n                </DataTable>\n            </div>\n\n            {result.paging.totalItems > 0 && (\n                <div style={{ borderTop: '1px solid var(--surface-border)', flexShrink: 0 }}>\n                    <Paginator\n                        first={result.paging.page * paging.pageSize}\n                        rows={paging.pageSize}\n                        totalRecords={result.paging.totalItems}\n                        onPageChange={(e) => setPage(e.page)}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAiEA,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;AAOzB,MAAM,iBAAiB,GAAG,CAAuG,KAA4D,KAAI;AACpM,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAsB,KAAK,CAAC,cAAc,IAAI,EAAE,CAAC;IACvF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC;IACjF,MAAM,CAAC,MAAM,MAAM,OAAO,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC;AAC3F,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,iBAAiB,GAAG,KAAK,CAAC,eAAe,KAAK,IAAI;AACxD,IAAA,MAAM,YAAY,GAAG,iBAAiB,IAAI,aAAa,KAAK,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU;AAEhH,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;AACH,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,MAAM,EAAE,iCAAiC;AACzC,YAAA,YAAY,EAAE,sBAAsB;AACpC,YAAA,QAAQ,EAAE;AACb,SAAA,EAAA,QAAA,EAAA,CACDC,aAAK,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAA,QAAA,EACnDA,GAAA,CAAC,SAAS,EAAA,EACN,KAAK,EAAE,MAAM,CAAC,IAA2B,EACzC,IAAI,EAAE,CAAC,iBAAiB,EACxB,IAAI,EAAE,MAAM,CAAC,QAAQ,EACrB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAC,MAAM,EACpB,QAAQ,EAAE,CAAC,CAAC,KAAI;AACZ,wBAAA,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC;wBACrB,IAAI,iBAAiB,EAAE;AACnB,4BAAA,MAAM,aAAa,GAAG,CAAC,CAAC,aAAsC;AAC9D,4BAAA,gBAAgB,CAAC,aAAa,GAAG,aAAa,CAAC,MAAM,GAAG,SAAS,CAAC;wBACtE;oBACJ,CAAC,EACD,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAC5C,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAA,QAAA,EAC1B,KAAK,CAAC,QAAQ,EAAA,CACP,EAAA,CACV,EAEL,MAAM,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,KACzBA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,SAAS,EAAE,iCAAiC,EAAE,UAAU,EAAE,CAAC,EAAE,YACvEA,GAAA,CAAC,SAAS,IACN,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAC3C,IAAI,EAAE,MAAM,CAAC,QAAQ,EACrB,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,EACtC,YAAY,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GACtC,EAAA,CACA,CACT,CAAA,EAAA,CACC;AAEd;;;;"}

package/dist/esm/DataTables/DataTableForQuery.stories.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ComponentType<Record<string, never>> | undefined;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+import { Meta, StoryObj } from '@storybook/react';
+import { DataTableForQuery } from './DataTableForQuery';
+declare const meta: Meta<typeof DataTableForQuery>;
+export default meta;
+type Story = StoryObj<typeof DataTableForQuery>;
+export declare const Default: Story;
+export declare const WithSelection: Story;
 //# sourceMappingURL=DataTableForQuery.stories.d.ts.map

package/dist/esm/DataTables/DataTableForQuery.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForQuery.stories.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForQuery.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;AAI1B,wBAA+E;AAE/E,eAAO,MAAM,OAAO,+CAA4E,CAAC"}
+{"version":3,"file":"DataTableForQuery.stories.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForQuery.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAKxD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAGxC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAyBhD,eAAO,MAAM,OAAO,EAAE,KAgCrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsC3B,CAAC"}

package/dist/esm/DataTables/DataTableForQuery.stories.js

@@ -1,6 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as Comp from './DataTableForQuery';
-const Component = Comp.default || Object.values(Comp)[0];
-export default { title: 'DataTables/DataTableForQuery', component: Component };
-export const Default = () => (Component ? _jsx(Component, {}) : _jsx("div", { children: "Unable to render component" }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DataTableForQuery } from './DataTableForQuery';
+import { Column } from 'primereact/column';
+import { QueryFor } from '@cratis/arc/queries';
+const meta = {
+    title: 'DataTables/DataTableForQuery',
+    component: DataTableForQuery,
+};
+export default meta;
+class ProductsQuery extends QueryFor {
+    route = '/api/products';
+    routeTemplate = '/api/products';
+    defaultValue = { id: 0, name: '', category: '', price: 0, inStock: false };
+    parameterDescriptors = [];
+    get requiredRequestParameters() {
+        return [];
+    }
+    constructor() {
+        super(Object, false);
+    }
+}
+export const Default = {
+    render: () => (_jsx("div", { className: "p-4", children: _jsxs(DataTableForQuery, { query: ProductsQuery, emptyMessage: "No products found", dataKey: "id", children: [_jsx(Column, { field: "id", header: "ID", sortable: true, style: { width: '10%' } }), _jsx(Column, { field: "name", header: "Product Name", sortable: true, style: { width: '30%' } }), _jsx(Column, { field: "category", header: "Category", sortable: true, style: { width: '20%' } }), _jsx(Column, { field: "price", header: "Price", sortable: true, style: { width: '20%' }, body: (rowData) => `$${rowData.price.toFixed(2)}` }), _jsx(Column, { field: "inStock", header: "In Stock", sortable: true, style: { width: '20%' }, body: (rowData) => (_jsx("span", { className: rowData.inStock ? 'text-green-600' : 'text-red-600', children: rowData.inStock ? 'Yes' : 'No' })) })] }) }))
+};
+export const WithSelection = {
+    render: () => {
+        const [selectedProduct, setSelectedProduct] = useState();
+        return (_jsxs("div", { className: "p-4", children: [_jsxs(DataTableForQuery, { query: ProductsQuery, emptyMessage: "No products found", dataKey: "id", selection: selectedProduct, onSelectionChange: (e) => setSelectedProduct(e.value), children: [_jsx(Column, { selectionMode: "single", headerStyle: { width: '3rem' } }), _jsx(Column, { field: "id", header: "ID", sortable: true, style: { width: '10%' } }), _jsx(Column, { field: "name", header: "Product Name", sortable: true, style: { width: '30%' } }), _jsx(Column, { field: "category", header: "Category", sortable: true, style: { width: '20%' } }), _jsx(Column, { field: "price", header: "Price", sortable: true, style: { width: '20%' }, body: (rowData) => `$${rowData.price.toFixed(2)}` })] }), selectedProduct && (_jsxs("div", { className: "mt-4 p-4 border rounded", children: [_jsx("h3", { className: "font-bold mb-2", children: "Selected Product:" }), _jsxs("p", { children: [_jsx("strong", { children: "Name:" }), " ", selectedProduct.name] }), _jsxs("p", { children: [_jsx("strong", { children: "Category:" }), " ", selectedProduct.category] }), _jsxs("p", { children: [_jsx("strong", { children: "Price:" }), " $", selectedProduct.price.toFixed(2)] }), _jsxs("p", { children: [_jsx("strong", { children: "In Stock:" }), " ", selectedProduct.inStock ? 'Yes' : 'No'] })] }))] }));
+    }
+};
 //# sourceMappingURL=DataTableForQuery.stories.js.map

package/dist/esm/DataTables/DataTableForQuery.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForQuery.stories.js","sourceRoot":"","sources":["../../../DataTables/DataTableForQuery.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,IAAI,MAAM,qBAAqB,CAAC;AAC5C,MAAM,SAAS,GAA4D,IAAgC,CAAC,OAA4E,IAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAuE,CAAC;AAE1R,eAAe,EAAE,KAAK,EAAE,8BAA8B,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAE/E,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,uDAAqC,CAAC,CAAC"}
+{"version":3,"file":"DataTableForQuery.stories.js","sourceRoot":"","sources":["../../../DataTables/DataTableForQuery.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/Dialogs/BusyIndicatorDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BusyIndicatorDialog.d.ts","sourceRoot":"","sources":["../../../Dialogs/BusyIndicatorDialog.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAGvE,eAAO,MAAM,mBAAmB,GAAI,OAAO,0BAA0B,4CAkBpE,CAAC"}
+{"version":3,"file":"BusyIndicatorDialog.d.ts","sourceRoot":"","sources":["../../../Dialogs/BusyIndicatorDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAIvE,eAAO,MAAM,mBAAmB,GAAI,OAAO,0BAA0B,4CAcpE,CAAC"}

package/dist/esm/Dialogs/BusyIndicatorDialog.js

@@ -1,10 +1,9 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { Dialog } from 'primereact/dialog';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { ProgressSpinner } from 'primereact/progressspinner';
+import { Dialog } from './Dialog.js';
 
 const BusyIndicatorDialog = (props) => {
-    const headerElement = (jsx("div", { className: "inline-flex align-items-center justify-content-center gap-2", children: jsx("span", { className: "font-bold white-space-nowrap", children: props.title }) }));
-    return (jsx(Fragment, { children: jsxs(Dialog, { header: headerElement, modal: true, visible: true, onHide: () => undefined, children: [jsx(ProgressSpinner, {}), jsx("p", { className: "m-0", children: props.message })] }) }));
+    return (jsxs(Dialog, { title: props.title, visible: true, onCancel: () => undefined, buttons: null, children: [jsx(ProgressSpinner, {}), jsx("p", { className: "m-0", children: props.message })] }));
 };
 
 export { BusyIndicatorDialog };

package/dist/esm/Dialogs/BusyIndicatorDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"BusyIndicatorDialog.js","sources":["../../../Dialogs/BusyIndicatorDialog.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Dialog } from 'primereact/dialog';\nimport { BusyIndicatorDialogRequest } from '@cratis/arc.react/dialogs';\nimport { ProgressSpinner } from 'primereact/progressspinner';\n\nexport const BusyIndicatorDialog = (props: BusyIndicatorDialogRequest) => {\n\n    const headerElement = (\n        <div className=\"inline-flex align-items-center justify-content-center gap-2\">\n            <span className=\"font-bold white-space-nowrap\">{props.title}</span>\n        </div>\n    );\n\n    return (\n        <>\n            <Dialog header={headerElement} modal visible={true} onHide={() => undefined}>\n                <ProgressSpinner />\n                <p className=\"m-0\">\n                    {props.message}\n                </p>\n            </Dialog>\n        </>\n    );\n};\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":";;;;AAOO,MAAM,mBAAmB,GAAG,CAAC,KAAiC,KAAI;AAErE,IAAA,MAAM,aAAa,IACfA,aAAK,SAAS,EAAC,6DAA6D,EAAA,QAAA,EACxEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,8BAA8B,YAAE,KAAK,CAAC,KAAK,EAAA,CAAQ,EAAA,CACjE,CACT;AAED,IAAA,QACIA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EACIC,IAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,aAAa,EAAE,KAAK,QAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAS,aACvEF,GAAA,CAAC,eAAe,EAAA,EAAA,CAAG,EACnBA,WAAG,SAAS,EAAC,KAAK,EAAA,QAAA,EACb,KAAK,CAAC,OAAO,GACd,CAAA,EAAA,CACC,EAAA,CACV;AAEX;;;;"}
+{"version":3,"file":"BusyIndicatorDialog.js","sources":["../../../Dialogs/BusyIndicatorDialog.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { BusyIndicatorDialogRequest } from '@cratis/arc.react/dialogs';\nimport { ProgressSpinner } from 'primereact/progressspinner';\nimport { Dialog } from './Dialog';\n\nexport const BusyIndicatorDialog = (props: BusyIndicatorDialogRequest) => {\n    return (\n        <Dialog \n            title={props.title} \n            visible={true} \n            onCancel={() => undefined}\n            buttons={null}\n        >\n            <ProgressSpinner />\n            <p className=\"m-0\">\n                {props.message}\n            </p>\n        </Dialog>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAOO,MAAM,mBAAmB,GAAG,CAAC,KAAiC,KAAI;AACrE,IAAA,QACIA,IAAA,CAAC,MAAM,IACH,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,MAAM,SAAS,EACzB,OAAO,EAAE,IAAI,EAAA,QAAA,EAAA,CAEbC,IAAC,eAAe,EAAA,EAAA,CAAG,EACnBA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,KAAK,YACb,KAAK,CAAC,OAAO,EAAA,CACd,CAAA,EAAA,CACC;AAEjB;;;;"}

package/dist/esm/Dialogs/ConfirmationDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../Dialogs/ConfirmationDialog.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,kBAAkB,+CAkE9B,CAAC"}
+{"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../Dialogs/ConfirmationDialog.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,kBAAkB,+CAmB9B,CAAC"}

package/dist/esm/Dialogs/ConfirmationDialog.js

@@ -1,30 +1,13 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { Dialog } from 'primereact/dialog';
-import { useDialogContext, DialogResult, DialogButtons } from '@cratis/arc.react/dialogs';
-import { Button } from 'primereact/button';
+import { jsx } from 'react/jsx-runtime';
+import { useDialogContext } from '@cratis/arc.react/dialogs';
+import { Dialog } from './Dialog.js';
 
 const ConfirmationDialog = () => {
     const { request, closeDialog } = useDialogContext();
-    const headerElement = (jsx("div", { className: "inline-flex align-items-center justify-content-center gap-2", children: jsx("span", { className: "font-bold white-space-nowrap", children: request.title }) }));
-    const okFooter = (jsx(Fragment, { children: jsx(Button, { label: "Ok", icon: "pi pi-check", onClick: () => closeDialog(DialogResult.Ok), autoFocus: true }) }));
-    const okCancelFooter = (jsxs(Fragment, { children: [jsx(Button, { label: "Ok", icon: "pi pi-check", onClick: () => closeDialog(DialogResult.Ok), autoFocus: true }), jsx(Button, { label: "Cancel", icon: "pi pi-times", severity: 'secondary', onClick: () => closeDialog(DialogResult.Cancelled) })] }));
-    const yesNoFooter = (jsxs(Fragment, { children: [jsx(Button, { label: "Yes", icon: "pi pi-check", onClick: () => closeDialog(DialogResult.Yes), autoFocus: true }), jsx(Button, { label: "No", icon: "pi pi-times", severity: 'secondary', onClick: () => closeDialog(DialogResult.No) })] }));
-    const yesNoCancelFooter = (jsxs(Fragment, { children: [jsx(Button, { label: "Yes", icon: "pi pi-check", onClick: () => closeDialog(DialogResult.Yes), autoFocus: true }), jsx(Button, { label: "No", icon: "pi pi-times", severity: 'secondary', onClick: () => closeDialog(DialogResult.No) })] }));
-    const getFooterInterior = () => {
-        switch (request.buttons) {
-            case DialogButtons.Ok:
-                return okFooter;
-            case DialogButtons.OkCancel:
-                return okCancelFooter;
-            case DialogButtons.YesNo:
-                return yesNoFooter;
-            case DialogButtons.YesNoCancel:
-                return yesNoCancelFooter;
-        }
-        return (jsx(Fragment, {}));
+    const handleClose = (result) => {
+        closeDialog(result);
     };
-    const footer = (jsx("div", { className: "card flex flex-wrap justify-content-center gap-3", children: getFooterInterior() }));
-    return (jsx(Fragment, { children: jsx(Dialog, { header: headerElement, modal: true, footer: footer, onHide: () => closeDialog(DialogResult.Cancelled), visible: true, children: jsx("p", { className: "m-0", children: request.message }) }) }));
+    return (jsx(Dialog, { title: request.title, visible: true, onClose: handleClose, buttons: request.buttons, children: jsx("p", { className: "m-0", children: request.message }) }));
 };
 
 export { ConfirmationDialog };

package/dist/esm/Dialogs/ConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationDialog.js","sources":["../../../Dialogs/ConfirmationDialog.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Dialog } from 'primereact/dialog';\nimport { DialogButtons, ConfirmationDialogRequest } from '@cratis/arc.react/dialogs';\nimport { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';\nimport { Button } from 'primereact/button';\n\nexport const ConfirmationDialog = () => {\n    const { request, closeDialog } = useDialogContext<ConfirmationDialogRequest>();\n\n    const headerElement = (\n        <div className=\"inline-flex align-items-center justify-content-center gap-2\">\n            <span className=\"font-bold white-space-nowrap\">{request.title}</span>\n        </div>\n    );\n\n    const okFooter = (\n        <>\n            <Button label=\"Ok\" icon=\"pi pi-check\" onClick={() => closeDialog(DialogResult.Ok)} autoFocus />\n        </>\n    );\n\n    const okCancelFooter = (\n        <>\n            <Button label=\"Ok\" icon=\"pi pi-check\" onClick={() => closeDialog(DialogResult.Ok)} autoFocus />\n            <Button label=\"Cancel\" icon=\"pi pi-times\" severity='secondary' onClick={() => closeDialog(DialogResult.Cancelled)} />\n        </>\n    );\n\n    const yesNoFooter = (\n        <>\n            <Button label=\"Yes\" icon=\"pi pi-check\" onClick={() => closeDialog(DialogResult.Yes)} autoFocus />\n            <Button label=\"No\" icon=\"pi pi-times\" severity='secondary' onClick={() => closeDialog(DialogResult.No)} />\n        </>\n    );\n\n    const yesNoCancelFooter = (\n        <>\n            <Button label=\"Yes\" icon=\"pi pi-check\" onClick={() => closeDialog(DialogResult.Yes)} autoFocus />\n            <Button label=\"No\" icon=\"pi pi-times\" severity='secondary' onClick={() => closeDialog(DialogResult.No)} />\n        </>\n    );\n\n    const getFooterInterior = () => {\n        switch (request.buttons) {\n            case DialogButtons.Ok:\n                return okFooter;\n            case DialogButtons.OkCancel:\n                return okCancelFooter;\n            case DialogButtons.YesNo:\n                return yesNoFooter;\n            case DialogButtons.YesNoCancel:\n                return yesNoCancelFooter;\n        }\n\n        return (<></>);\n    };\n\n    const footer = (\n        <div className=\"card flex flex-wrap justify-content-center gap-3\">\n            {getFooterInterior()}\n        </div>\n    );\n\n    return (\n        <>\n            <Dialog header={headerElement} modal footer={footer} onHide={() => closeDialog(DialogResult.Cancelled)} visible={true}>\n                <p className=\"m-0\">\n                    {request.message}\n                </p>\n            </Dialog>\n        </>\n    );\n};\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}
+{"version":3,"file":"ConfirmationDialog.js","sources":["../../../Dialogs/ConfirmationDialog.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ConfirmationDialogRequest } from '@cratis/arc.react/dialogs';\nimport { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';\nimport { Dialog } from './Dialog';\n\nexport const ConfirmationDialog = () => {\n    const { request, closeDialog } = useDialogContext<ConfirmationDialogRequest>();\n\n    const handleClose = (result: DialogResult) => {\n        closeDialog(result);\n    };\n\n    return (\n        <Dialog \n            title={request.title}\n            visible={true}\n            onClose={handleClose}\n            buttons={request.buttons}\n        >\n            <p className=\"m-0\">\n                {request.message}\n            </p>\n        </Dialog>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;AAOO,MAAM,kBAAkB,GAAG,MAAK;IACnC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,gBAAgB,EAA6B;AAE9E,IAAA,MAAM,WAAW,GAAG,CAAC,MAAoB,KAAI;QACzC,WAAW,CAAC,MAAM,CAAC;AACvB,IAAA,CAAC;AAED,IAAA,QACIA,GAAA,CAAC,MAAM,EAAA,EACH,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,CAAC,OAAO,EAAA,QAAA,EAExBA,WAAG,SAAS,EAAC,KAAK,EAAA,QAAA,EACb,OAAO,CAAC,OAAO,EAAA,CAChB,EAAA,CACC;AAEjB;;;;"}

package/dist/esm/Dialogs/Dialog.d.ts

@@ -0,0 +1,23 @@
+import { DialogResult, DialogButtons } from '@cratis/arc.react/dialogs';
+import { ReactNode } from 'react';
+export type CloseDialog = (result: DialogResult) => boolean | void | Promise<boolean> | Promise<void>;
+export type ConfirmCallback = () => boolean | void | Promise<boolean> | Promise<void>;
+export type CancelCallback = () => boolean | void | Promise<boolean> | Promise<void>;
+export interface DialogProps {
+    title: string;
+    visible?: boolean;
+    onClose?: CloseDialog;
+    onConfirm?: ConfirmCallback;
+    onCancel?: CancelCallback;
+    buttons?: DialogButtons | ReactNode;
+    children: ReactNode;
+    width?: string;
+    resizable?: boolean;
+    isValid?: boolean;
+    okLabel?: string;
+    cancelLabel?: string;
+    yesLabel?: string;
+    noLabel?: string;
+}
+export declare const Dialog: ({ title, visible, onClose, onConfirm, onCancel, buttons, children, width, resizable, isValid, okLabel, cancelLabel, yesLabel, noLabel }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/esm/Dialogs/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../Dialogs/Dialog.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAoB,MAAM,2BAA2B,CAAC;AAC1F,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,YAAY,KAAK,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AACtG,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AACtF,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAErF,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,GAAI,yIAepB,WAAW,4CA8Gb,CAAC"}

package/dist/esm/Dialogs/Dialog.js

@@ -0,0 +1,64 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Dialog as Dialog$1 } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+import { useDialogContext, DialogResult, DialogButtons } from '@cratis/arc.react/dialogs';
+
+const Dialog = ({ title, visible = true, onClose, onConfirm, onCancel, buttons = DialogButtons.OkCancel, children, width = '450px', resizable = false, isValid, okLabel = 'Ok', cancelLabel = 'Cancel', yesLabel = 'Yes', noLabel = 'No' }) => {
+    let contextCloseDialog;
+    try {
+        const context = useDialogContext();
+        contextCloseDialog = context?.closeDialog;
+    }
+    catch {
+        contextCloseDialog = undefined;
+    }
+    const isDialogValid = isValid !== false;
+    const headerElement = (jsx("div", { className: "inline-flex align-items-center justify-content-center gap-2", children: jsx("span", { className: "font-bold white-space-nowrap", children: title }) }));
+    const handleClose = async (result) => {
+        let closeResult = true;
+        if (result === DialogResult.Ok || result === DialogResult.Yes) {
+            if (onConfirm) {
+                closeResult = await onConfirm();
+            }
+            else if (onClose) {
+                closeResult = await onClose(result);
+            }
+        }
+        else {
+            if (onCancel) {
+                closeResult = await onCancel();
+            }
+            else if (onClose) {
+                closeResult = await onClose(result);
+            }
+        }
+        if (closeResult !== false) {
+            contextCloseDialog?.(result);
+        }
+    };
+    const okFooter = (jsx(Fragment, { children: jsx(Button, { label: okLabel, icon: "pi pi-check", onClick: () => handleClose(DialogResult.Ok), disabled: !isDialogValid, autoFocus: true }) }));
+    const okCancelFooter = (jsxs(Fragment, { children: [jsx(Button, { label: okLabel, icon: "pi pi-check", onClick: () => handleClose(DialogResult.Ok), disabled: !isDialogValid, autoFocus: true }), jsx(Button, { label: cancelLabel, icon: "pi pi-times", outlined: true, onClick: () => handleClose(DialogResult.Cancelled) })] }));
+    const yesNoFooter = (jsxs(Fragment, { children: [jsx(Button, { label: yesLabel, icon: "pi pi-check", onClick: () => handleClose(DialogResult.Yes), disabled: !isDialogValid, autoFocus: true }), jsx(Button, { label: noLabel, icon: "pi pi-times", outlined: true, onClick: () => handleClose(DialogResult.No) })] }));
+    const yesNoCancelFooter = (jsxs(Fragment, { children: [jsx(Button, { label: yesLabel, icon: "pi pi-check", onClick: () => handleClose(DialogResult.Yes), disabled: !isDialogValid, autoFocus: true }), jsx(Button, { label: noLabel, icon: "pi pi-times", outlined: true, onClick: () => handleClose(DialogResult.No) }), jsx(Button, { label: cancelLabel, icon: "pi pi-times", outlined: true, onClick: () => handleClose(DialogResult.Cancelled) })] }));
+    const getFooterInterior = () => {
+        if (typeof buttons !== 'number') {
+            return buttons;
+        }
+        switch (buttons) {
+            case DialogButtons.Ok:
+                return okFooter;
+            case DialogButtons.OkCancel:
+                return okCancelFooter;
+            case DialogButtons.YesNo:
+                return yesNoFooter;
+            case DialogButtons.YesNoCancel:
+                return yesNoCancelFooter;
+        }
+        return (jsx(Fragment, {}));
+    };
+    const footer = (jsx("div", { className: "flex flex-wrap justify-content-start gap-3", children: getFooterInterior() }));
+    return (jsx(Dialog$1, { header: headerElement, modal: true, footer: footer, onHide: typeof buttons === 'number' ? () => handleClose(DialogResult.Cancelled) : () => { }, visible: visible, style: { width }, resizable: resizable, closable: typeof buttons === 'number', children: children }));
+};
+
+export { Dialog };
+//# sourceMappingURL=Dialog.js.map