@cratis/components 0.1.19 → 1.0.4

package/dist/cjs/CommandDialog/CommandDialog.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var dialog = require('primereact/dialog');
-var button = require('primereact/button');
+var dialogs = require('@cratis/arc.react/dialogs');
+var Dialog = require('../Dialogs/Dialog.js');
 var React = require('react');
-var CommandForm = require('../CommandForm/CommandForm.js');
+var commands = require('@cratis/arc.react/commands');
 
 const CommandDialogContext = React.createContext(undefined);
 const useCommandDialogContext = () => {
@@ -14,42 +14,50 @@ const useCommandDialogContext = () => {
     }
     return context;
 };
-const CommandDialogFormContent = () => {
-    const command = CommandForm.useCommandInstance();
-    const { setCommandResult, setCommandValues, isValid, onBeforeExecute } = CommandForm.useCommandFormContext();
-    const { onSuccess: onConfirm, onCancel, confirmLabel, cancelLabel, confirmIcon, cancelIcon } = useCommandDialogContext();
+const CommandDialogWrapper = ({ header, visible, width, confirmLabel, cancelLabel, onConfirm, onCancel, onBeforeExecute, children }) => {
+    const { setCommandValues, setCommandResult, commandResult } = commands.useCommandFormContext();
+    const commandInstance = commands.useCommandInstance();
+    const isDialogValid = !commandResult || commandResult.isValid;
     const handleConfirm = async () => {
         if (onBeforeExecute) {
-            const transformedValues = onBeforeExecute(command);
+            const transformedValues = onBeforeExecute(commandInstance);
             setCommandValues(transformedValues);
         }
-        const result = await command.execute();
+        const result = await commandInstance.execute();
         if (result.isSuccess) {
             await onConfirm(result);
+            return true;
         }
         else {
             setCommandResult(result);
+            return false;
         }
     };
-    const handleCancel = () => {
-        onCancel();
+    const processChildren = (nodes) => {
+        return React.Children.map(nodes, (child) => {
+            if (!React.isValidElement(child))
+                return child;
+            const component = child.type;
+            if (component.displayName === 'CommandFormField') {
+                return jsxRuntime.jsx(commands.CommandFormFieldWrapper, { field: child });
+            }
+            const childProps = child.props;
+            if (childProps.children != null) {
+                return React.cloneElement(child, {
+                    children: processChildren(childProps.children)
+                });
+            }
+            return child;
+        });
     };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "card flex flex-wrap justify-content-center gap-3 mt-8", children: [jsxRuntime.jsx(button.Button, { label: confirmLabel, icon: confirmIcon, onClick: handleConfirm, disabled: !isValid }), jsxRuntime.jsx(button.Button, { label: cancelLabel, icon: cancelIcon, severity: 'secondary', onClick: handleCancel })] }) }));
+    const processedChildren = processChildren(children);
+    return (jsxRuntime.jsx(Dialog.Dialog, { title: header, visible: visible, width: width, onConfirm: handleConfirm, onCancel: onCancel, buttons: dialogs.DialogButtons.OkCancel, okLabel: confirmLabel, cancelLabel: cancelLabel, isValid: isDialogValid, children: jsxRuntime.jsx("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: processedChildren }) }));
 };
 const CommandDialogFieldsWrapper = (props) => {
-    React.Children.forEach(props.children, child => {
-        if (React.isValidElement(child)) {
-            const component = child.type;
-            if (component.displayName !== 'CommandFormField') {
-                throw new Error(`Only CommandFormField components are allowed as children of CommandDialog.Fields. Got: ${component.displayName || component.name || 'Unknown'}`);
-            }
-        }
-    });
-    return (jsxRuntime.jsx(CommandForm.CommandForm.Fields, { children: props.children }));
+    return (jsxRuntime.jsx(commands.CommandForm.Fields, { children: props.children }));
 };
 const CommandDialogComponent = (props) => {
-    const { command, initialValues, currentValues, visible, header, confirmLabel = 'Confirm', cancelLabel = 'Cancel', confirmIcon = 'pi pi-check', cancelIcon = 'pi pi-times', onConfirm, onCancel, onFieldValidate, onFieldChange, onBeforeExecute, children, style = { width: '50vw' }, width } = props;
-    const dialogStyle = width ? { ...style, width } : style;
+    const { command, initialValues, currentValues, visible, header, confirmLabel = 'Confirm', cancelLabel = 'Cancel', confirmIcon = 'pi pi-check', cancelIcon = 'pi pi-times', onConfirm, onCancel, onFieldValidate, onFieldChange, onBeforeExecute, children, width = '50vw', showTitles, showErrors, validateOn, validateAllFieldsOnChange, validateOnInit, autoServerValidate, autoServerValidateThrottle, fieldContainerComponent, fieldDecoratorComponent, errorDisplayComponent, tooltipComponent, errorClassName, iconAddonClassName } = props;
     const contextValue = {
         onSuccess: onConfirm,
         onCancel,
@@ -61,9 +69,12 @@ const CommandDialogComponent = (props) => {
         onFieldChange,
         onBeforeExecute
     };
-    return (jsxRuntime.jsx(dialog.Dialog, { header: header, visible: visible, style: dialogStyle, onHide: onCancel, contentStyle: { overflow: 'visible' }, children: jsxRuntime.jsx(CommandDialogContext.Provider, { value: contextValue, children: jsxRuntime.jsxs(CommandForm.CommandForm, { command: command, initialValues: initialValues, currentValues: currentValues, onFieldValidate: onFieldValidate, onFieldChange: onFieldChange, onBeforeExecute: onBeforeExecute, children: [children, jsxRuntime.jsx(CommandDialogFormContent, {})] }) }) }));
+    return (jsxRuntime.jsx(CommandDialogContext.Provider, { value: contextValue, children: jsxRuntime.jsx(commands.CommandForm, { command: command, initialValues: initialValues, currentValues: currentValues, onFieldValidate: onFieldValidate, onFieldChange: onFieldChange, onBeforeExecute: onBeforeExecute, showTitles: showTitles, showErrors: showErrors, validateOn: validateOn, validateAllFieldsOnChange: validateAllFieldsOnChange, validateOnInit: validateOnInit, autoServerValidate: autoServerValidate, autoServerValidateThrottle: autoServerValidateThrottle, fieldContainerComponent: fieldContainerComponent, fieldDecoratorComponent: fieldDecoratorComponent, errorDisplayComponent: errorDisplayComponent, tooltipComponent: tooltipComponent, errorClassName: errorClassName, iconAddonClassName: iconAddonClassName, children: jsxRuntime.jsx(CommandDialogWrapper, { header: header, visible: visible, width: width, confirmLabel: confirmLabel, cancelLabel: cancelLabel, onConfirm: onConfirm, onCancel: onCancel, onBeforeExecute: onBeforeExecute, children: children }) }) }));
 };
+const CommandDialogColumnWrapper = ({ children }) => (jsxRuntime.jsx(commands.CommandForm.Column, { children: children }));
+CommandDialogColumnWrapper.displayName = 'CommandFormColumn';
 CommandDialogComponent.Fields = CommandDialogFieldsWrapper;
+CommandDialogComponent.Column = CommandDialogColumnWrapper;
 const CommandDialog = CommandDialogComponent;
 
 exports.CommandDialog = CommandDialog;

package/dist/cjs/CommandDialog/CommandDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.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 { ICommandResult } from '@cratis/arc/commands';\nimport { Constructor } from '@cratis/fundamentals';\nimport { Dialog } from 'primereact/dialog';\nimport { Button } from 'primereact/button';\nimport React, { createContext, useContext } from 'react';\nimport { CommandForm, useCommandFormContext, BeforeExecuteCallback } from '../CommandForm/CommandForm';\nimport { useCommandInstance } from '../CommandForm/CommandForm';\n\nexport type FieldValidator<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => string | undefined;\nexport type FieldChangeCallback<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => void;\n\nexport interface CommandDialogProps<TCommand, TResponse = object> {\n    command: Constructor<TCommand>;\n    initialValues?: Partial<TCommand>;\n    currentValues?: Partial<TCommand> | undefined;\n    visible: boolean;\n    header: string;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    confirmIcon?: string;\n    cancelIcon?: string;\n    onConfirm: (result: ICommandResult<TResponse>) => void | Promise<void>;\n    onCancel: () => void;\n    onFieldValidate?: FieldValidator<TCommand>;\n    onFieldChange?: FieldChangeCallback<TCommand>;\n    onBeforeExecute?: BeforeExecuteCallback<TCommand>;\n    children?: React.ReactNode;\n    style?: React.CSSProperties;\n    width?: string;\n}\n\ninterface CommandDialogContextValue<TCommand = unknown> {\n    onSuccess: (result: ICommandResult<unknown>) => void | Promise<void>;\n    onCancel: () => void;\n    confirmLabel: string;\n    cancelLabel: string;\n    confirmIcon: string;\n    cancelIcon: string;\n    onFieldValidate?: FieldValidator<TCommand>;\n    onFieldChange?: FieldChangeCallback<TCommand>;\n    onBeforeExecute?: BeforeExecuteCallback<TCommand>;\n}\n\nconst CommandDialogContext = createContext<CommandDialogContextValue<unknown> | undefined>(undefined);\n\nexport const useCommandDialogContext = <TCommand = unknown,>() => {\n    const context = useContext(CommandDialogContext);\n    if (!context) {\n        throw new Error('useCommandDialogContext must be used within a CommandDialog');\n    }\n    return context as CommandDialogContextValue<TCommand>;\n};\n\nconst CommandDialogFormContent = <TCommand extends { execute: () => Promise<ICommandResult<unknown>> }>() => {\n    const command = useCommandInstance<TCommand>();\n    const { setCommandResult, setCommandValues, isValid, onBeforeExecute } = useCommandFormContext<TCommand>();\n    const { onSuccess: onConfirm, onCancel, confirmLabel, cancelLabel, confirmIcon, cancelIcon } = useCommandDialogContext<TCommand>();\n\n    const handleConfirm = async () => {\n        if (onBeforeExecute) {\n            const transformedValues = onBeforeExecute(command);\n            setCommandValues(transformedValues);\n        }\n        const result = await command.execute();\n        if (result.isSuccess) {\n            await onConfirm(result);\n        } else {\n            setCommandResult(result);\n        }\n    };\n\n    const handleCancel = () => {\n        onCancel();\n    };\n\n    return (\n        <>\n            <div className=\"card flex flex-wrap justify-content-center gap-3 mt-8\">\n                <Button label={confirmLabel} icon={confirmIcon} onClick={handleConfirm} disabled={!isValid} />\n                <Button label={cancelLabel} icon={cancelIcon} severity='secondary' onClick={handleCancel} />\n            </div>\n        </>\n    );\n};\n\nconst CommandDialogFieldsWrapper = (props: { children: React.ReactNode }) => {\n    React.Children.forEach(props.children, child => {\n        if (React.isValidElement(child)) {\n            const component = child.type as React.ComponentType<unknown>;\n            if (component.displayName !== 'CommandFormField') {\n                throw new Error(`Only CommandFormField components are allowed as children of CommandDialog.Fields. Got: ${component.displayName || component.name || 'Unknown'}`);\n            }\n        }\n    });\n\n    return (\n        <CommandForm.Fields>\n            {props.children}\n        </CommandForm.Fields>\n    );\n};\n\nconst CommandDialogComponent = <TCommand extends object = object, TResponse = object>(props: CommandDialogProps<TCommand, TResponse>) => {\n    const {\n        command,\n        initialValues,\n        currentValues,\n        visible,\n        header,\n        confirmLabel = 'Confirm',\n        cancelLabel = 'Cancel',\n        confirmIcon = 'pi pi-check',\n        cancelIcon = 'pi pi-times',\n        onConfirm,\n        onCancel,\n        onFieldValidate,\n        onFieldChange,\n        onBeforeExecute,\n        children,\n        style = { width: '50vw' },\n        width\n    } = props;\n\n    const dialogStyle = width ? { ...style, width } : style;\n\n    const contextValue: CommandDialogContextValue<TCommand> = {\n        onSuccess: onConfirm,\n        onCancel,\n        confirmLabel,\n        cancelLabel,\n        confirmIcon,\n        cancelIcon,\n        onFieldValidate,\n        onFieldChange,\n        onBeforeExecute\n    };\n\n    return (\n        <Dialog\n            header={header}\n            visible={visible}\n            style={dialogStyle}\n            onHide={onCancel}\n            contentStyle={{ overflow: 'visible' }}\n        >\n            <CommandDialogContext.Provider value={contextValue}>\n                <CommandForm command={command} initialValues={initialValues} currentValues={currentValues} onFieldValidate={onFieldValidate} onFieldChange={onFieldChange} onBeforeExecute={onBeforeExecute}>\n                    {children}\n                    <CommandDialogFormContent />\n                </CommandForm>\n            </CommandDialogContext.Provider>\n        </Dialog>\n    );\n};\n\nCommandDialogComponent.Fields = CommandDialogFieldsWrapper;\n\nexport const CommandDialog = CommandDialogComponent;\n"],"names":["createContext","useContext","useCommandInstance","useCommandFormContext","_jsx","_jsxs","Button","CommandForm","Dialog"],"mappings":"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"}
+{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.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 { ICommandResult } from '@cratis/arc/commands';\nimport { Constructor } from '@cratis/fundamentals';\nimport { DialogButtons } from '@cratis/arc.react/dialogs';\nimport { Dialog } from '../Dialogs/Dialog';\nimport React, { createContext, useContext } from 'react';\nimport { \n    CommandForm, \n    CommandFormFieldWrapper,\n    useCommandFormContext, \n    useCommandInstance\n} from '@cratis/arc.react/commands';\n\ntype CommandFormProps = React.ComponentProps<typeof CommandForm>;\n\n// Local type definitions\nexport type BeforeExecuteCallback<TCommand> = (values: TCommand) => TCommand;\n\nexport type FieldValidator<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => string | undefined;\nexport type FieldChangeCallback<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => void;\n\nexport interface CommandDialogProps<TCommand, TResponse = object> {\n    command: Constructor<TCommand>;\n    initialValues?: Partial<TCommand>;\n    currentValues?: Partial<TCommand> | undefined;\n    visible: boolean;\n    header: string;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    confirmIcon?: string;\n    cancelIcon?: string;\n    onConfirm: (result: ICommandResult<TResponse>) => void | Promise<void>;\n    onCancel: () => void;\n    onFieldValidate?: FieldValidator<TCommand>;\n    onFieldChange?: FieldChangeCallback<TCommand>;\n    onBeforeExecute?: BeforeExecuteCallback<TCommand>;\n    children?: React.ReactNode;\n    style?: React.CSSProperties;\n    width?: string;\n    showTitles?: boolean;\n    showErrors?: boolean;\n    validateOn?: CommandFormProps['validateOn'];\n    validateAllFieldsOnChange?: boolean;\n    validateOnInit?: boolean;\n    autoServerValidate?: boolean;\n    autoServerValidateThrottle?: number;\n    fieldContainerComponent?: CommandFormProps['fieldContainerComponent'];\n    fieldDecoratorComponent?: CommandFormProps['fieldDecoratorComponent'];\n    errorDisplayComponent?: CommandFormProps['errorDisplayComponent'];\n    tooltipComponent?: CommandFormProps['tooltipComponent'];\n    errorClassName?: string;\n    iconAddonClassName?: string;\n}\n\ninterface CommandDialogContextValue<TCommand = unknown> {\n    onSuccess: (result: ICommandResult<unknown>) => void | Promise<void>;\n    onCancel: () => void;\n    confirmLabel: string;\n    cancelLabel: string;\n    confirmIcon: string;\n    cancelIcon: string;\n    onFieldValidate?: FieldValidator<TCommand>;\n    onFieldChange?: FieldChangeCallback<TCommand>;\n    onBeforeExecute?: BeforeExecuteCallback<TCommand>;\n}\n\nconst CommandDialogContext = createContext<CommandDialogContextValue<unknown> | undefined>(undefined);\n\nexport const useCommandDialogContext = <TCommand = unknown,>() => {\n    const context = useContext(CommandDialogContext);\n    if (!context) {\n        throw new Error('useCommandDialogContext must be used within a CommandDialog');\n    }\n    return context as CommandDialogContextValue<TCommand>;\n};\n\nconst CommandDialogWrapper = <TCommand extends object>({\n    header,\n    visible,\n    width,\n    confirmLabel,\n    cancelLabel,\n    onConfirm,\n    onCancel,\n    onBeforeExecute,\n    children\n}: {\n    header: string;\n    visible: boolean;\n    width: string;\n    confirmLabel: string;\n    cancelLabel: string;\n    onConfirm: (result: ICommandResult<unknown>) => void | Promise<void>;\n    onCancel: () => void;\n    onBeforeExecute?: BeforeExecuteCallback<TCommand>;\n    children: React.ReactNode;\n}) => {\n    const { setCommandValues, setCommandResult, commandResult } = useCommandFormContext<TCommand>();\n    const commandInstance = useCommandInstance<TCommand>();\n\n    // Compute real dialog validity from commandResult.\n    // fieldValidities in CommandForm is never populated by field renderers, so\n    // the context's isValid is always vacuously true. We derive validity from\n    // the actual validation result instead:\n    // - No result yet (before any validate call) → enabled (allow first submit)\n    // - commandResult.isValid → reflects actual validation state\n    const isDialogValid = !commandResult || commandResult.isValid;\n\n    const handleConfirm = async () => {\n        if (onBeforeExecute) {\n            const transformedValues = onBeforeExecute(commandInstance);\n            setCommandValues(transformedValues);\n        }\n        const result = await (commandInstance as unknown as { execute: () => Promise<ICommandResult<unknown>> }).execute();\n        if (result.isSuccess) {\n            await onConfirm(result);\n            return true;\n        } else {\n            setCommandResult(result);\n            return false;\n        }\n    };\n\n    const processChildren = (nodes: React.ReactNode): React.ReactNode => {\n        return React.Children.map(nodes, (child) => {\n            if (!React.isValidElement(child)) return child;\n\n            const component = child.type as React.ComponentType<unknown>;\n            if (component.displayName === 'CommandFormField') {\n                type FieldElement = Parameters<typeof CommandFormFieldWrapper>[0]['field'];\n                return <CommandFormFieldWrapper field={child as unknown as FieldElement} />;\n            }\n\n            const childProps = child.props as Record<string, unknown>;\n            if (childProps.children != null) {\n                return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n                    children: processChildren(childProps.children as React.ReactNode)\n                });\n            }\n\n            return child;\n        });\n    };\n\n    const processedChildren = processChildren(children);\n\n    return (\n        <Dialog\n            title={header}\n            visible={visible}\n            width={width}\n            onConfirm={handleConfirm}\n            onCancel={onCancel}\n            buttons={DialogButtons.OkCancel}\n            okLabel={confirmLabel}\n            cancelLabel={cancelLabel}\n            isValid={isDialogValid}\n        >\n            <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>\n                {processedChildren}\n            </div>\n        </Dialog>\n    );\n};\n\nconst CommandDialogFieldsWrapper = (props: { children: React.ReactNode }) => {\n    return (\n        <CommandForm.Fields>\n            {props.children}\n        </CommandForm.Fields>\n    );\n};\n\nconst CommandDialogComponent = <TCommand extends object = object, TResponse = object>(props: CommandDialogProps<TCommand, TResponse>) => {\n    const {\n        command,\n        initialValues,\n        currentValues,\n        visible,\n        header,\n        confirmLabel = 'Confirm',\n        cancelLabel = 'Cancel',\n        confirmIcon = 'pi pi-check',\n        cancelIcon = 'pi pi-times',\n        onConfirm,\n        onCancel,\n        onFieldValidate,\n        onFieldChange,\n        onBeforeExecute,\n        children,\n        width = '50vw',\n        showTitles,\n        showErrors,\n        validateOn,\n        validateAllFieldsOnChange,\n        validateOnInit,\n        autoServerValidate,\n        autoServerValidateThrottle,\n        fieldContainerComponent,\n        fieldDecoratorComponent,\n        errorDisplayComponent,\n        tooltipComponent,\n        errorClassName,\n        iconAddonClassName\n    } = props;\n\n    const contextValue: CommandDialogContextValue<TCommand> = {\n        onSuccess: onConfirm,\n        onCancel,\n        confirmLabel,\n        cancelLabel,\n        confirmIcon,\n        cancelIcon,\n        onFieldValidate,\n        onFieldChange,\n        onBeforeExecute\n    };\n\n    return (\n        <CommandDialogContext.Provider value={contextValue}>\n            <CommandForm\n                command={command}\n                initialValues={initialValues}\n                currentValues={currentValues}\n                onFieldValidate={onFieldValidate}\n                onFieldChange={onFieldChange}\n                onBeforeExecute={onBeforeExecute}\n                showTitles={showTitles}\n                showErrors={showErrors}\n                validateOn={validateOn}\n                validateAllFieldsOnChange={validateAllFieldsOnChange}\n                validateOnInit={validateOnInit}\n                autoServerValidate={autoServerValidate}\n                autoServerValidateThrottle={autoServerValidateThrottle}\n                fieldContainerComponent={fieldContainerComponent}\n                fieldDecoratorComponent={fieldDecoratorComponent}\n                errorDisplayComponent={errorDisplayComponent}\n                tooltipComponent={tooltipComponent}\n                errorClassName={errorClassName}\n                iconAddonClassName={iconAddonClassName}>\n                <CommandDialogWrapper\n                    header={header}\n                    visible={visible}\n                    width={width}\n                    confirmLabel={confirmLabel}\n                    cancelLabel={cancelLabel}\n                    onConfirm={onConfirm}\n                    onCancel={onCancel}\n                    onBeforeExecute={onBeforeExecute}\n                >\n                    {children}\n                </CommandDialogWrapper>\n            </CommandForm>\n        </CommandDialogContext.Provider>\n    );\n};\n\nconst CommandDialogColumnWrapper = ({ children }: { children: React.ReactNode }) => (\n    <CommandForm.Column>{children}</CommandForm.Column>\n);\nCommandDialogColumnWrapper.displayName = 'CommandFormColumn';\n\nCommandDialogComponent.Fields = CommandDialogFieldsWrapper;\nCommandDialogComponent.Column = CommandDialogColumnWrapper;\n\nexport const CommandDialog = CommandDialogComponent;\n"],"names":["createContext","useContext","useCommandFormContext","useCommandInstance","_jsx","CommandFormFieldWrapper","Dialog","DialogButtons","CommandForm"],"mappings":"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"}

package/dist/cjs/CommandForm/fields/CheckboxField.js

@@ -2,9 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var checkbox = require('primereact/checkbox');
-var asCommandFormField = require('../asCommandFormField.js');
+var commands = require('@cratis/arc.react/commands');
 
-const CheckboxField = asCommandFormField.asCommandFormField((props) => (jsxRuntime.jsxs("div", { className: "flex align-items-center", children: [jsxRuntime.jsx(checkbox.Checkbox, { checked: props.value, onChange: props.onChange, invalid: props.invalid }), props.label && jsxRuntime.jsx("label", { className: "ml-2", children: props.label })] })), {
+const CheckboxField = commands.asCommandFormField((props) => (jsxRuntime.jsxs("div", { className: "flex align-items-center", children: [jsxRuntime.jsx(checkbox.Checkbox, { checked: props.value, onChange: props.onChange, invalid: props.invalid }), props.label && jsxRuntime.jsx("label", { className: "ml-2", children: props.label })] })), {
     defaultValue: false,
     extractValue: (e) => e.checked
 });

package/dist/cjs/CommandForm/fields/CheckboxField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxField.js","sources":["../../../../CommandForm/fields/CheckboxField.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 { Checkbox } from 'primereact/checkbox';\nimport React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '../asCommandFormField';\n\ninterface CheckboxFieldComponentProps extends WrappedFieldProps<boolean> {\n    label?: string;\n}\n\nexport const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(\n    (props) => (\n        <div className=\"flex align-items-center\">\n            <Checkbox\n                checked={props.value}\n                onChange={props.onChange}\n                invalid={props.invalid}\n            />\n            {props.label && <label className=\"ml-2\">{props.label}</label>}\n        </div>\n    ),\n    {\n        defaultValue: false,\n        extractValue: (e: { checked: boolean }) => e.checked\n    }\n);\n"],"names":["asCommandFormField","_jsxs","_jsx","Checkbox"],"mappings":";;;;;;AAWO,MAAM,aAAa,GAAGA,qCAAkB,CAC3C,CAAC,KAAK,MACFC,yBAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACpCC,cAAA,CAACC,iBAAQ,EAAA,EACL,OAAO,EAAE,KAAK,CAAC,KAAK,EACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CACxB,EACD,KAAK,CAAC,KAAK,IAAID,cAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,MAAM,EAAA,QAAA,EAAE,KAAK,CAAC,KAAK,EAAA,CAAS,CAAA,EAAA,CAC3D,CACT,EACD;AACI,IAAA,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,CAAC,CAAuB,KAAK,CAAC,CAAC;AAChD,CAAA;;;;"}
+{"version":3,"file":"CheckboxField.js","sources":["../../../../CommandForm/fields/CheckboxField.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 { Checkbox } from 'primereact/checkbox';\nimport React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';\n\ninterface CheckboxFieldComponentProps extends WrappedFieldProps<boolean> {\n    label?: string;\n}\n\nexport const CheckboxField = asCommandFormField<CheckboxFieldComponentProps>(\n    (props) => (\n        <div className=\"flex align-items-center\">\n            <Checkbox\n                checked={props.value}\n                onChange={props.onChange}\n                invalid={props.invalid}\n            />\n            {props.label && <label className=\"ml-2\">{props.label}</label>}\n        </div>\n    ),\n    {\n        defaultValue: false,\n        extractValue: (e: { checked: boolean }) => e.checked\n    }\n);\n"],"names":["asCommandFormField","_jsxs","_jsx","Checkbox"],"mappings":";;;;;;AAWO,MAAM,aAAa,GAAGA,2BAAkB,CAC3C,CAAC,KAAK,MACFC,yBAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACpCC,cAAA,CAACC,iBAAQ,EAAA,EACL,OAAO,EAAE,KAAK,CAAC,KAAK,EACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CACxB,EACD,KAAK,CAAC,KAAK,IAAID,cAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,MAAM,EAAA,QAAA,EAAE,KAAK,CAAC,KAAK,EAAA,CAAS,CAAA,EAAA,CAC3D,CACT,EACD;AACI,IAAA,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,CAAC,CAAuB,KAAK,CAAC,CAAC;AAChD,CAAA;;;;"}

package/dist/cjs/CommandForm/fields/DropdownField.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var asCommandFormField = require('../asCommandFormField.js');
+var dropdown = require('primereact/dropdown');
+var commands = require('@cratis/arc.react/commands');
 
-const SelectComponent = (props) => (jsxRuntime.jsxs("select", { value: props.value || '', onChange: props.onChange, required: props.required, className: `w-full p-3 rounded-md text-base ${props.invalid ? 'border border-red-500' : 'border border-gray-300'}`, children: [props.placeholder && jsxRuntime.jsx("option", { value: "", children: props.placeholder }), props.options.map((option, index) => (jsxRuntime.jsx("option", { value: String(option[props.optionIdField]), children: String(option[props.optionLabelField]) }, index)))] }));
-const SelectField = asCommandFormField.asCommandFormField(SelectComponent, {
+const DropdownField = commands.asCommandFormField((props) => (jsxRuntime.jsx(dropdown.Dropdown, { value: props.value, onChange: (e) => props.onChange(e.value), options: props.options, optionValue: props.optionValue, optionLabel: props.optionLabel, placeholder: props.placeholder, invalid: props.invalid, className: "w-full" })), {
     defaultValue: '',
-    extractValue: (e) => e.target.value
+    extractValue: (e) => e
 });
 
-exports.SelectField = SelectField;
+exports.DropdownField = DropdownField;
 //# sourceMappingURL=DropdownField.js.map

package/dist/cjs/CommandForm/fields/DropdownField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownField.js","sources":["../../../../CommandForm/fields/DropdownField.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 React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '../asCommandFormField';\n\ninterface SelectComponentProps extends WrappedFieldProps<string> {\n    options: Array<{ [key: string]: unknown }>;\n    optionIdField: string;\n    optionLabelField: string;\n    placeholder?: string;\n}\n\nconst SelectComponent = (props: SelectComponentProps) => (\n    <select\n        value={props.value || ''}\n        onChange={props.onChange}\n        required={props.required}\n        className={`w-full p-3 rounded-md text-base ${props.invalid ? 'border border-red-500' : 'border border-gray-300'}`}\n    >\n        {props.placeholder && <option value=\"\">{props.placeholder}</option>}\n        {props.options.map((option, index) => (\n            <option key={index} value={String(option[props.optionIdField])}>\n                {String(option[props.optionLabelField])}\n            </option>\n        ))}\n    </select>\n);\n\nexport const SelectField = asCommandFormField<SelectComponentProps>(\n    SelectComponent,\n    {\n        defaultValue: '',\n        extractValue: (e: React.ChangeEvent<HTMLSelectElement>) => e.target.value\n    }\n);\n"],"names":["_jsxs","_jsx","asCommandFormField"],"mappings":";;;;;AAaA,MAAM,eAAe,GAAG,CAAC,KAA2B,MAChDA,eAAA,CAAA,QAAA,EAAA,EACI,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,CAAA,gCAAA,EAAmC,KAAK,CAAC,OAAO,GAAG,uBAAuB,GAAG,wBAAwB,CAAA,CAAE,aAEjH,KAAK,CAAC,WAAW,IAAIC,cAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,EAAE,EAAA,QAAA,EAAE,KAAK,CAAC,WAAW,GAAU,EAClE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC7BA,cAAA,CAAA,QAAA,EAAA,EAAoB,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,EAAA,QAAA,EACzD,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,EAAA,EAD9B,KAAK,CAET,CACZ,CAAC,CAAA,EAAA,CACG,CACZ;AAEM,MAAM,WAAW,GAAGC,qCAAkB,CACzC,eAAe,EACf;AACI,IAAA,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,CAAC,CAAuC,KAAK,CAAC,CAAC,MAAM,CAAC;AACvE,CAAA;;;;"}
+{"version":3,"file":"DropdownField.js","sources":["../../../../CommandForm/fields/DropdownField.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 { Dropdown } from 'primereact/dropdown';\nimport React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';\n\ninterface DropdownFieldComponentProps extends WrappedFieldProps<string | number> {\n    options: Array<{ [key: string]: unknown }>;\n    optionValue: string;\n    optionLabel: string;\n    placeholder?: string;\n}\n\nexport const DropdownField = asCommandFormField<DropdownFieldComponentProps>(\n    (props) => (\n        <Dropdown\n            value={props.value}\n            onChange={(e) => props.onChange(e.value)}\n            options={props.options}\n            optionValue={props.optionValue}\n            optionLabel={props.optionLabel}\n            placeholder={props.placeholder}\n            invalid={props.invalid}\n            className=\"w-full\"\n        />\n    ),\n    {\n        defaultValue: '',\n        extractValue: (e: unknown) => e as string | number\n    }\n);\n"],"names":["asCommandFormField","_jsx","Dropdown"],"mappings":";;;;;;AAcO,MAAM,aAAa,GAAGA,2BAAkB,CAC3C,CAAC,KAAK,MACFC,cAAA,CAACC,iBAAQ,IACL,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EACxC,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAC,QAAQ,EAAA,CACpB,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK;AACjC,CAAA;;;;"}

package/dist/cjs/CommandForm/fields/InputTextField.js

@@ -2,9 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var inputtext = require('primereact/inputtext');
-var asCommandFormField = require('../asCommandFormField.js');
+var commands = require('@cratis/arc.react/commands');
 
-const InputTextField = asCommandFormField.asCommandFormField((props) => (jsxRuntime.jsx(inputtext.InputText, { type: props.type || 'text', value: props.value, onChange: props.onChange, invalid: props.invalid, placeholder: props.placeholder, className: "w-full" })), {
+const InputTextField = commands.asCommandFormField((props) => (jsxRuntime.jsx(inputtext.InputText, { type: props.type || 'text', value: props.value, onChange: props.onChange, invalid: props.invalid, placeholder: props.placeholder, className: "w-full" })), {
     defaultValue: '',
     extractValue: (e) => e.target.value
 });

package/dist/cjs/CommandForm/fields/InputTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputTextField.js","sources":["../../../../CommandForm/fields/InputTextField.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 { InputText } from 'primereact/inputtext';\nimport React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '../asCommandFormField';\n\ninterface InputTextComponentProps extends WrappedFieldProps<string> {\n    type?: 'text' | 'email' | 'password' | 'color' | 'date' | 'datetime-local' | 'time' | 'url' | 'tel' | 'search';\n    placeholder?: string;\n}\n\nexport const InputTextField = asCommandFormField<InputTextComponentProps>(\n    (props) => (\n        <InputText\n            type={props.type || 'text'}\n            value={props.value}\n            onChange={props.onChange}\n            invalid={props.invalid}\n            placeholder={props.placeholder}\n            className=\"w-full\"\n        />\n    ),\n    {\n        defaultValue: '',\n        extractValue: (e: React.ChangeEvent<HTMLInputElement>) => e.target.value\n    }\n);\n"],"names":["asCommandFormField","_jsx","InputText"],"mappings":";;;;;;AAYO,MAAM,cAAc,GAAGA,qCAAkB,CAC5C,CAAC,KAAK,MACFC,eAACC,mBAAS,EAAA,EACN,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,MAAM,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,SAAS,EAAC,QAAQ,EAAA,CACpB,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,CAAC,CAAsC,KAAK,CAAC,CAAC,MAAM,CAAC;AACtE,CAAA;;;;"}
+{"version":3,"file":"InputTextField.js","sources":["../../../../CommandForm/fields/InputTextField.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 { InputText } from 'primereact/inputtext';\nimport React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';\n\ninterface InputTextComponentProps extends WrappedFieldProps<string> {\n    type?: 'text' | 'email' | 'password' | 'color' | 'date' | 'datetime-local' | 'time' | 'url' | 'tel' | 'search';\n    placeholder?: string;\n}\n\nexport const InputTextField = asCommandFormField<InputTextComponentProps>(\n    (props) => (\n        <InputText\n            type={props.type || 'text'}\n            value={props.value}\n            onChange={props.onChange}\n            invalid={props.invalid}\n            placeholder={props.placeholder}\n            className=\"w-full\"\n        />\n    ),\n    {\n        defaultValue: '',\n        extractValue: (e: React.ChangeEvent<HTMLInputElement>) => e.target.value\n    }\n);\n"],"names":["asCommandFormField","_jsx","InputText"],"mappings":";;;;;;AAYO,MAAM,cAAc,GAAGA,2BAAkB,CAC5C,CAAC,KAAK,MACFC,eAACC,mBAAS,EAAA,EACN,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,MAAM,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,SAAS,EAAC,QAAQ,EAAA,CACpB,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,CAAC,CAAsC,KAAK,CAAC,CAAC,MAAM,CAAC;AACtE,CAAA;;;;"}

package/dist/cjs/CommandForm/fields/NumberField.js

@@ -2,9 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var inputnumber = require('primereact/inputnumber');
-var asCommandFormField = require('../asCommandFormField.js');
+var commands = require('@cratis/arc.react/commands');
 
-const NumberField = asCommandFormField.asCommandFormField((props) => (jsxRuntime.jsx(inputnumber.InputNumber, { value: props.value, onValueChange: (e) => props.onChange(e.value ?? 0), invalid: props.invalid, placeholder: props.placeholder, min: props.min, max: props.max, step: props.step, className: "w-full" })), {
+const NumberField = commands.asCommandFormField((props) => (jsxRuntime.jsx(inputnumber.InputNumber, { value: props.value, onValueChange: (e) => props.onChange(e.value ?? 0), invalid: props.invalid, placeholder: props.placeholder, min: props.min, max: props.max, step: props.step, className: "w-full" })), {
     defaultValue: 0,
     extractValue: (e) => (typeof e === 'number' ? e : 0)
 });

package/dist/cjs/CommandForm/fields/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sources":["../../../../CommandForm/fields/NumberField.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 { InputNumber } from 'primereact/inputnumber';\nimport React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '../asCommandFormField';\n\ninterface NumberFieldComponentProps extends WrappedFieldProps<number> {\n    placeholder?: string;\n    min?: number;\n    max?: number;\n    step?: number;\n}\n\nexport const NumberField = asCommandFormField<NumberFieldComponentProps>(\n    (props) => (\n        <InputNumber\n            value={props.value}\n            onValueChange={(e) => props.onChange(e.value ?? 0)}\n            invalid={props.invalid}\n            placeholder={props.placeholder}\n            min={props.min}\n            max={props.max}\n            step={props.step}\n            className=\"w-full\"\n        />\n    ),\n    {\n        defaultValue: 0,\n        extractValue: (e: unknown) => (typeof e === 'number' ? e : 0)\n    }\n);\n"],"names":["asCommandFormField","_jsx","InputNumber"],"mappings":";;;;;;AAcO,MAAM,WAAW,GAAGA,qCAAkB,CACzC,CAAC,KAAK,MACFC,cAAA,CAACC,uBAAW,IACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,EAClD,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAC,QAAQ,EAAA,CACpB,CACL,EACD;AACI,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,YAAY,EAAE,CAAC,CAAU,MAAM,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC;AAC/D,CAAA;;;;"}
+{"version":3,"file":"NumberField.js","sources":["../../../../CommandForm/fields/NumberField.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 { InputNumber } from 'primereact/inputnumber';\nimport React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';\n\ninterface NumberFieldComponentProps extends WrappedFieldProps<number> {\n    placeholder?: string;\n    min?: number;\n    max?: number;\n    step?: number;\n}\n\nexport const NumberField = asCommandFormField<NumberFieldComponentProps>(\n    (props) => (\n        <InputNumber\n            value={props.value}\n            onValueChange={(e) => props.onChange(e.value ?? 0)}\n            invalid={props.invalid}\n            placeholder={props.placeholder}\n            min={props.min}\n            max={props.max}\n            step={props.step}\n            className=\"w-full\"\n        />\n    ),\n    {\n        defaultValue: 0,\n        extractValue: (e: unknown) => (typeof e === 'number' ? e : 0)\n    }\n);\n"],"names":["asCommandFormField","_jsx","InputNumber"],"mappings":";;;;;;AAcO,MAAM,WAAW,GAAGA,2BAAkB,CACzC,CAAC,KAAK,MACFC,cAAA,CAACC,uBAAW,IACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,EAClD,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAC,QAAQ,EAAA,CACpB,CACL,EACD;AACI,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,YAAY,EAAE,CAAC,CAAU,MAAM,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC;AAC/D,CAAA;;;;"}

package/dist/cjs/CommandForm/fields/SliderField.js

@@ -1,17 +1,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var asCommandFormField = require('../asCommandFormField.js');
+var slider = require('primereact/slider');
+var commands = require('@cratis/arc.react/commands');
 
-const RangeField = asCommandFormField.asCommandFormField((props) => {
-    const min = props.min ?? 0;
-    const max = props.max ?? 100;
-    const step = props.step ?? 1;
-    return (jsxRuntime.jsxs("div", { className: "w-full flex items-center gap-4 p-3 border border-gray-300 rounded-md", children: [jsxRuntime.jsx("input", { type: "range", value: props.value, onChange: props.onChange, min: min, max: max, step: step, required: props.required, className: "flex-1" }), jsxRuntime.jsx("span", { className: "min-w-[3rem] text-right font-semibold", children: props.value })] }));
-}, {
+const SliderField = commands.asCommandFormField((props) => (jsxRuntime.jsxs("div", { className: "w-full", children: [jsxRuntime.jsx(slider.Slider, { value: props.value, onChange: (e) => props.onChange(e.value), min: props.min ?? 0, max: props.max ?? 100, step: props.step ?? 1, className: "w-full" }), jsxRuntime.jsx("div", { className: "text-center mt-2", children: jsxRuntime.jsx("span", { className: "font-semibold", children: props.value }) })] })), {
     defaultValue: 0,
-    extractValue: (e) => parseFloat(e.target.value)
+    extractValue: (e) => (typeof e === 'number' ? e : 0)
 });
 
-exports.RangeField = RangeField;
+exports.SliderField = SliderField;
 //# sourceMappingURL=SliderField.js.map

package/dist/cjs/CommandForm/fields/SliderField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderField.js","sources":["../../../../CommandForm/fields/SliderField.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 React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '../asCommandFormField';\n\ninterface RangeComponentProps extends WrappedFieldProps<number> {\n    min?: number;\n    max?: number;\n    step?: number;\n}\n\nexport const RangeField = asCommandFormField<RangeComponentProps>(\n    (props) => {\n        const min = props.min ?? 0;\n        const max = props.max ?? 100;\n        const step = props.step ?? 1;\n\n        return (\n            <div className=\"w-full flex items-center gap-4 p-3 border border-gray-300 rounded-md\">\n                <input\n                    type=\"range\"\n                    value={props.value}\n                    onChange={props.onChange}\n                    min={min}\n                    max={max}\n                    step={step}\n                    required={props.required}\n                    className=\"flex-1\"\n                />\n                <span className=\"min-w-[3rem] text-right font-semibold\">\n                    {props.value}\n                </span>\n            </div>\n        );\n    },\n    {\n        defaultValue: 0,\n        extractValue: (e: React.ChangeEvent<HTMLInputElement>) => parseFloat(e.target.value)\n    }\n);\n"],"names":["asCommandFormField","_jsxs","_jsx"],"mappings":";;;;;MAYa,UAAU,GAAGA,qCAAkB,CACxC,CAAC,KAAK,KAAI;AACN,IAAA,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC;AAC1B,IAAA,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,GAAG;AAC5B,IAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC;IAE5B,QACIC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sEAAsE,EAAA,QAAA,EAAA,CACjFC,cAAA,CAAA,OAAA,EAAA,EACI,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAC,QAAQ,EAAA,CACpB,EACFA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAClD,KAAK,CAAC,KAAK,EAAA,CACT,CAAA,EAAA,CACL;AAEd,CAAC,EACD;AACI,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,YAAY,EAAE,CAAC,CAAsC,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK;AACtF,CAAA;;;;"}
+{"version":3,"file":"SliderField.js","sources":["../../../../CommandForm/fields/SliderField.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 { Slider } from 'primereact/slider';\nimport React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';\n\ninterface SliderFieldComponentProps extends WrappedFieldProps<number> {\n    min?: number;\n    max?: number;\n    step?: number;\n}\n\nexport const SliderField = asCommandFormField<SliderFieldComponentProps>(\n    (props) => (\n        <div className=\"w-full\">\n            <Slider\n                value={props.value}\n                onChange={(e) => props.onChange(e.value)}\n                min={props.min ?? 0}\n                max={props.max ?? 100}\n                step={props.step ?? 1}\n                className=\"w-full\"\n            />\n            <div className=\"text-center mt-2\">\n                <span className=\"font-semibold\">{props.value}</span>\n            </div>\n        </div>\n    ),\n    {\n        defaultValue: 0,\n        extractValue: (e: unknown) => (typeof e === 'number' ? e : 0)\n    }\n);\n"],"names":["asCommandFormField","_jsxs","_jsx","Slider"],"mappings":";;;;;;AAaO,MAAM,WAAW,GAAGA,2BAAkB,CACzC,CAAC,KAAK,MACFC,yBAAK,SAAS,EAAC,QAAQ,EAAA,QAAA,EAAA,CACnBC,cAAA,CAACC,aAAM,EAAA,EACH,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EACxC,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,EACnB,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,GAAG,EACrB,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,EACrB,SAAS,EAAC,QAAQ,GACpB,EACFD,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kBAAkB,YAC7BA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,KAAK,CAAC,KAAK,GAAQ,EAAA,CAClD,CAAA,EAAA,CACJ,CACT,EACD;AACI,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,YAAY,EAAE,CAAC,CAAU,MAAM,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC;AAC/D,CAAA;;;;"}

package/dist/cjs/CommandForm/fields/TextAreaField.js

@@ -2,9 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var inputtextarea = require('primereact/inputtextarea');
-var asCommandFormField = require('../asCommandFormField.js');
+var commands = require('@cratis/arc.react/commands');
 
-const TextAreaField = asCommandFormField.asCommandFormField((props) => (jsxRuntime.jsx(inputtextarea.InputTextarea, { value: props.value, onChange: props.onChange, invalid: props.invalid, placeholder: props.placeholder, rows: props.rows ?? 5, cols: props.cols, className: "w-full" })), {
+const TextAreaField = commands.asCommandFormField((props) => (jsxRuntime.jsx(inputtextarea.InputTextarea, { value: props.value, onChange: props.onChange, invalid: props.invalid, placeholder: props.placeholder, rows: props.rows ?? 5, cols: props.cols, className: "w-full" })), {
     defaultValue: '',
     extractValue: (e) => e.target.value
 });

package/dist/cjs/CommandForm/fields/TextAreaField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaField.js","sources":["../../../../CommandForm/fields/TextAreaField.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 { InputTextarea } from 'primereact/inputtextarea';\nimport React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '../asCommandFormField';\n\ninterface TextAreaFieldComponentProps extends WrappedFieldProps<string> {\n    placeholder?: string;\n    rows?: number;\n    cols?: number;\n}\n\nexport const TextAreaField = asCommandFormField<TextAreaFieldComponentProps>(\n    (props) => (\n        <InputTextarea\n            value={props.value}\n            onChange={props.onChange}\n            invalid={props.invalid}\n            placeholder={props.placeholder}\n            rows={props.rows ?? 5}\n            cols={props.cols}\n            className=\"w-full\"\n        />\n    ),\n    {\n        defaultValue: '',\n        extractValue: (e: React.ChangeEvent<HTMLTextAreaElement>) => e.target.value\n    }\n);\n"],"names":["asCommandFormField","_jsx","InputTextarea"],"mappings":";;;;;;AAaO,MAAM,aAAa,GAAGA,qCAAkB,CAC3C,CAAC,KAAK,MACFC,cAAA,CAACC,2BAAa,EAAA,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,EACrB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAC,QAAQ,EAAA,CACpB,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,CAAC,CAAyC,KAAK,CAAC,CAAC,MAAM,CAAC;AACzE,CAAA;;;;"}
+{"version":3,"file":"TextAreaField.js","sources":["../../../../CommandForm/fields/TextAreaField.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 { InputTextarea } from 'primereact/inputtextarea';\nimport React from 'react';\nimport { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';\n\ninterface TextAreaFieldComponentProps extends WrappedFieldProps<string> {\n    placeholder?: string;\n    rows?: number;\n    cols?: number;\n}\n\nexport const TextAreaField = asCommandFormField<TextAreaFieldComponentProps>(\n    (props) => (\n        <InputTextarea\n            value={props.value}\n            onChange={props.onChange}\n            invalid={props.invalid}\n            placeholder={props.placeholder}\n            rows={props.rows ?? 5}\n            cols={props.cols}\n            className=\"w-full\"\n        />\n    ),\n    {\n        defaultValue: '',\n        extractValue: (e: React.ChangeEvent<HTMLTextAreaElement>) => e.target.value\n    }\n);\n"],"names":["asCommandFormField","_jsx","InputTextarea"],"mappings":";;;;;;AAaO,MAAM,aAAa,GAAGA,2BAAkB,CAC3C,CAAC,KAAK,MACFC,cAAA,CAACC,2BAAa,EAAA,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,EACrB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAC,QAAQ,EAAA,CACpB,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,CAAC,CAAyC,KAAK,CAAC,CAAC,MAAM,CAAC;AACzE,CAAA;;;;"}

package/dist/cjs/CommandForm/index.js

@@ -1,10 +1,6 @@
 'use strict';
 
-var CommandForm = require('./CommandForm.js');
-var CommandFormField = require('./CommandFormField.js');
-var ValidationMessage = require('./ValidationMessage.js');
-var CommandFormFields = require('./CommandFormFields.js');
-var asCommandFormField = require('./asCommandFormField.js');
+var commands = require('@cratis/arc.react/commands');
 var InputTextField = require('./fields/InputTextField.js');
 var NumberField = require('./fields/NumberField.js');
 var CheckboxField = require('./fields/CheckboxField.js');
@@ -14,18 +10,42 @@ var SliderField = require('./fields/SliderField.js');
 
 
 
-exports.CommandForm = CommandForm.CommandForm;
-exports.useCommandFormContext = CommandForm.useCommandFormContext;
-exports.useCommandInstance = CommandForm.useCommandInstance;
-exports.useSetCommandResult = CommandForm.useSetCommandResult;
-exports.CommandFormField = CommandFormField.CommandFormField;
-exports.ValidationMessage = ValidationMessage.ValidationMessage;
-exports.CommandFormFields = CommandFormFields.CommandFormFields;
-exports.asCommandFormField = asCommandFormField.asCommandFormField;
+Object.defineProperty(exports, "CommandForm", {
+    enumerable: true,
+    get: function () { return commands.CommandForm; }
+});
+Object.defineProperty(exports, "CommandFormField", {
+    enumerable: true,
+    get: function () { return commands.CommandFormField; }
+});
+Object.defineProperty(exports, "CommandFormFields", {
+    enumerable: true,
+    get: function () { return commands.CommandFormFields; }
+});
+Object.defineProperty(exports, "ValidationMessage", {
+    enumerable: true,
+    get: function () { return commands.ValidationMessage; }
+});
+Object.defineProperty(exports, "asCommandFormField", {
+    enumerable: true,
+    get: function () { return commands.asCommandFormField; }
+});
+Object.defineProperty(exports, "useCommandFormContext", {
+    enumerable: true,
+    get: function () { return commands.useCommandFormContext; }
+});
+Object.defineProperty(exports, "useCommandInstance", {
+    enumerable: true,
+    get: function () { return commands.useCommandInstance; }
+});
+Object.defineProperty(exports, "useSetCommandResult", {
+    enumerable: true,
+    get: function () { return commands.useSetCommandResult; }
+});
 exports.InputTextField = InputTextField.InputTextField;
 exports.NumberField = NumberField.NumberField;
 exports.CheckboxField = CheckboxField.CheckboxField;
 exports.TextAreaField = TextAreaField.TextAreaField;
-exports.SelectField = DropdownField.SelectField;
-exports.RangeField = SliderField.RangeField;
+exports.DropdownField = DropdownField.DropdownField;
+exports.SliderField = SliderField.SliderField;
 //# sourceMappingURL=index.js.map

package/dist/cjs/CommandForm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/DataTables/DataTableForObservableQuery.js

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var datatable = require('primereact/datatable');
+var paginator = require('primereact/paginator');
 var queries = require('@cratis/arc/queries');
 var queries$1 = require('@cratis/arc.react/queries');
 var React = require('react');
@@ -9,8 +10,59 @@ var React = require('react');
 const paging = new queries.Paging(0, 20);
 const DataTableForObservableQuery = (props) => {
     const [filters, setFilters] = React.useState(props.defaultFilters ?? {});
+    const [filteredTotal, setFilteredTotal] = React.useState(undefined);
     const [result, , setPage] = queries$1.useObservableQueryWithPaging(props.query, paging, props.queryArguments);
-    return (jsxRuntime.jsx(datatable.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 = React.useRef(null);
+    const [tableHeight, setTableHeight] = React.useState(600);
+    const timeoutRef = React.useRef(undefined);
+    const isClientFiltering = props.clientFiltering === true;
+    const totalRecords = isClientFiltering && filteredTotal !== undefined ? filteredTotal : result.paging.totalItems;
+    React.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 (jsxRuntime.jsxs("div", { ref: containerRef, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            border: '1px solid var(--surface-border)',
+            borderRadius: 'var(--border-radius)',
+            overflow: 'hidden'
+        }, children: [jsxRuntime.jsx("div", { style: { height: `${tableHeight}px`, overflow: 'hidden' }, children: jsxRuntime.jsx(datatable.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 && (jsxRuntime.jsx("div", { style: { borderTop: '1px solid var(--surface-border)' }, children: jsxRuntime.jsx(paginator.Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page) }) }))] }));
 };
 
 exports.DataTableForObservableQuery = DataTableForObservableQuery;

package/dist/cjs/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":["Paging","useState","useObservableQueryWithPaging","_jsx","DataTable"],"mappings":";;;;;;;;AA6DA,MAAM,MAAM,GAAG,IAAIA,cAAM,CAAC,CAAC,EAAE,EAAE,CAAC;AAOzB,MAAM,2BAA2B,GAAG,CAAiH,KAAsE,KAAI;AAClO,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAsB,KAAK,CAAC,cAAc,IAAI,EAAE,CAAC;IACvF,MAAM,CAAC,MAAM,IAAI,OAAO,CAAC,GAAGC,sCAA4B,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC;AAEnG,IAAA,QACIC,cAAA,CAACC,mBAAS,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":["Paging","useState","useObservableQueryWithPaging","useRef","useEffect","_jsxs","_jsx","DataTable","Paginator"],"mappings":"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"}

package/dist/cjs/DataTables/DataTableForQuery.js

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var datatable = require('primereact/datatable');
+var paginator = require('primereact/paginator');
 var queries = require('@cratis/arc/queries');
 var queries$1 = require('@cratis/arc.react/queries');
 var React = require('react');
@@ -9,8 +10,25 @@ var React = require('react');
 const paging = new queries.Paging(0, 20);
 const DataTableForQuery = (props) => {
     const [filters, setFilters] = React.useState(props.defaultFilters ?? {});
+    const [filteredTotal, setFilteredTotal] = React.useState(undefined);
     const [result, , , setPage] = queries$1.useQueryWithPaging(props.query, paging, props.queryArguments);
-    return (jsxRuntime.jsx(datatable.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 = React.useRef(null);
+    const isClientFiltering = props.clientFiltering === true;
+    const totalRecords = isClientFiltering && filteredTotal !== undefined ? filteredTotal : result.paging.totalItems;
+    return (jsxRuntime.jsxs("div", { ref: containerRef, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            border: '1px solid var(--surface-border)',
+            borderRadius: 'var(--border-radius)',
+            overflow: 'hidden'
+        }, children: [jsxRuntime.jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'auto' }, children: jsxRuntime.jsx(datatable.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 && (jsxRuntime.jsx("div", { style: { borderTop: '1px solid var(--surface-border)', flexShrink: 0 }, children: jsxRuntime.jsx(paginator.Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page) }) }))] }));
 };
 
 exports.DataTableForQuery = DataTableForQuery;