From 1677e3dad7905b9fcb93bf1fcb1bf833d5a5dafe Mon Sep 17 00:00:00 2001
From: alanv <alanv@labkey.com>
Date: Tue, 8 Sep 2026 21:44:14 -0500
Subject: [PATCH 1/5] AutoForm: Add support for Date inputs

---
 .../src/internal/components/AutoForm.tsx      | 51 +++++++++++++------
 .../src/internal/components/DateInput.tsx     |  2 +-
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/internal/components/AutoForm.tsx b/packages/components/src/internal/components/AutoForm.tsx
index efb64025bc..4967ee538f 100644
--- a/packages/components/src/internal/components/AutoForm.tsx
+++ b/packages/components/src/internal/components/AutoForm.tsx
@@ -5,6 +5,7 @@
 import React, { ChangeEvent, FC, useCallback } from 'react';
 
 import { HelpIcon } from './HelpIcon';
+import { DateInput } from './DateInput';
 
 const INPUT_CLASSES = {
     checkbox: 'form-check',
@@ -34,7 +35,7 @@ export interface Field<T = any> {
     label: string;
     name: string;
     // Options are used in Select and Radio fields.
-    options?: Array<Option<T>>;
+    options?: Option<T>[];
     placeholder?: string;
     required?: boolean;
     type: string;
@@ -48,16 +49,16 @@ export interface FormSchema {
 }
 
 export interface FieldClassProps {
+    // className for the div that wraps each field component
+    fieldWrapperCls?: string;
     // A map of input types to classNames (see INPUT_CLASSES for the default values)
     inputClasses?: Record<string, string>;
     // className for the div that wraps each input element
     inputWrapperCls?: string;
-    // className for the the label element
+    // className for the label element
     labelCls?: string;
     // className for the div that wraps the label element
     labelWrapperCls?: string;
-    // className for the div that wraps each field component
-    fieldWrapperCls?: string;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -85,7 +86,7 @@ const Label: FC<LabelProps> = ({ cls, field, id, wrapperCls }) => {
         if (helpTextHref) {
             helpLink = (
                 <p>
-                    <a href={helpTextHref} target="_blank" rel="noopener noreferrer">
+                    <a href={helpTextHref} rel="noopener noreferrer" target="_blank">
                         More info
                     </a>
                 </p>
@@ -119,10 +120,10 @@ const TextInput: FC<AutoFormFieldProps> = ({ field, id, inputClasses, onChange,
             className={className}
             id={id}
             name={name}
+            onChange={_onChange}
             placeholder={placeholder}
             type="text"
             value={_value}
-            onChange={_onChange}
         />
     );
 };
@@ -139,11 +140,11 @@ const NumberInput: FC<AutoFormFieldProps> = ({ field, id, inputClasses, onChange
             id={id}
             inputMode="numeric"
             name={name}
+            onChange={_onChange}
             pattern="[0-9]*"
             placeholder={placeholder}
             type="text"
             value={_value}
-            onChange={_onChange}
         />
     );
 };
@@ -156,7 +157,7 @@ const TextareaInput: FC<AutoFormFieldProps> = ({ field, id, inputClasses, onChan
     );
     const className = inputClasses.textarea ?? '';
     const _value = value === null || value === undefined ? '' : value;
-    return <textarea className={className} id={id} name={field.name} value={_value} onChange={_onChange} />;
+    return <textarea className={className} id={id} name={field.name} onChange={_onChange} value={_value} />;
 };
 TextareaInput.displayName = 'TextareaInput';
 
@@ -168,12 +169,12 @@ const CheckboxInput: FC<AutoFormFieldProps> = ({ field, id, inputClasses, onChan
     const className = inputClasses.checkbox ?? '';
     return (
         <input
+            checked={value === true}
             className={className}
             id={id}
             name={field.name}
-            type="checkbox"
             onChange={_onChange}
-            checked={value === true}
+            type="checkbox"
         />
     );
 };
@@ -192,7 +193,7 @@ const SelectInput: FC<AutoFormFieldProps> = ({ field, id, inputClasses, onChange
     const className = inputClasses.select ?? '';
     const hasPlaceholder = placeholder !== null && placeholder !== undefined;
     return (
-        <select className={className} id={id} name={name} value={_value} onChange={_onChange}>
+        <select className={className} id={id} name={name} onChange={_onChange} value={_value}>
             {hasPlaceholder && <option value="">{placeholder}</option>}
             {options.map(option => (
                 <option key={option.value} value={option.value}>
@@ -213,11 +214,11 @@ const RadioInput: FC<AutoFormFieldProps> = ({ field, inputClasses, onChange, val
             {options.map(option => (
                 <label className={className} key={option.value}>
                     <input
+                        checked={value === option.value}
                         name={name}
-                        type="radio"
                         onChange={_onChange}
+                        type="radio"
                         value={option.value}
-                        checked={value === option.value}
                     />
                     {option.label}
                 </label>
@@ -227,12 +228,29 @@ const RadioInput: FC<AutoFormFieldProps> = ({ field, inputClasses, onChange, val
 };
 RadioInput.displayName = 'RadioInput';
 
+/**
+ * A Date input component for AutoForm. Currently only supported by our Client, the server is not aware of this input
+ * type. Expects a Date object as the value, sends a Date object to the onChange callback. Does not use id or
+ * inputClasses props from AutoFormFieldProps because our underlying DateInput component does not support overriding the
+ * id or input className.
+ */
+const AutoFormDateInput: FC<AutoFormFieldProps<Date>> = ({ field, onChange, value }) => {
+    const { name, placeholder } = field;
+    const onDateChange = useCallback((date: Date) => onChange(name, date), [name, onChange]);
+    return (
+        <div className="auto-form-date-input">
+            <DateInput name={name} onChange={onDateChange} placeholderText={placeholder} selected={value} />
+        </div>
+    );
+};
+AutoFormDateInput.displayName = 'AutoFormDateInput';
+
 const AutoFormField: FC<AutoFormFieldProps> = props => {
     const { field, id, inputWrapperCls, labelCls, labelWrapperCls, fieldWrapperCls } = props;
     const { type } = field;
     return (
         <div className={'auto-form-field ' + fieldWrapperCls}>
-            <Label cls={labelCls} wrapperCls={labelWrapperCls} field={field} id={id} />
+            <Label cls={labelCls} field={field} id={id} wrapperCls={labelWrapperCls} />
             <div className={inputWrapperCls}>
                 {type === 'text' && <TextInput {...props} />}
                 {type === 'textarea' && <TextareaInput {...props} />}
@@ -240,6 +258,7 @@ const AutoFormField: FC<AutoFormFieldProps> = props => {
                 {type === 'checkbox' && <CheckboxInput {...props} />}
                 {type === 'select' && <SelectInput {...props} />}
                 {type === 'radio' && <RadioInput {...props} />}
+                {type === 'datetime' && <AutoFormDateInput {...props} />}
             </div>
         </div>
     );
@@ -280,15 +299,15 @@ export const AutoForm: FC<Props> = props => {
         <div className={'auto-form ' + wrapperCls}>
             {formSchema.fields.map(field => (
                 <AutoFormField
-                    key={field.name}
                     field={field}
+                    fieldWrapperCls={fieldWrapperCls}
                     id={`auto-form-${field.name}`}
                     inputClasses={inputClasses}
                     inputWrapperCls={inputWrapperCls}
+                    key={field.name}
                     labelCls={labelCls}
                     labelWrapperCls={labelWrapperCls}
                     onChange={onChange}
-                    fieldWrapperCls={fieldWrapperCls}
                     value={values[field.name]}
                 />
             ))}
diff --git a/packages/components/src/internal/components/DateInput.tsx b/packages/components/src/internal/components/DateInput.tsx
index 65777bf77c..e619670299 100644
--- a/packages/components/src/internal/components/DateInput.tsx
+++ b/packages/components/src/internal/components/DateInput.tsx
@@ -16,7 +16,7 @@ export interface DateInputProps {
 
 export const DateInput: FC<DateInputProps & DatePickerProps> = memo(props => {
     const { container, dateFormat, onSelect, timeFormat, ...pickerProps } = props;
-    const [id] = useState(() => generateId('date-input-'))
+    const [id] = useState(() => generateId('date-input-'));
 
     const input = useRef<DatePicker>(undefined);
     const formats = useMemo(() => {

From 8d7bd66e7fc07acc1754a9d1479adcbd54a20d7c Mon Sep 17 00:00:00 2001
From: alanv <alanv@labkey.com>
Date: Tue, 8 Sep 2026 21:46:53 -0500
Subject: [PATCH 2/5] QueryModel: improve types for QueryModel.queryParameters
 QueryInfo: add namedParameters

---
 packages/components/src/index.ts                       |  7 ++++---
 packages/components/src/internal/models.ts             |  2 ++
 packages/components/src/public/QueryInfo.ts            |  9 +++++++++
 .../components/src/public/QueryModel/QueryModel.ts     | 10 ++++++----
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index b55d9f6060..09c58cfc23 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1939,6 +1939,7 @@ export type { MenuSectionItem } from './internal/DropdownSection';
 export type { UseTimeout } from './internal/hooks';
 export type { ModalProps } from './internal/Modal';
 export type { AddEntitiesComplete, ModalRendererProps } from './internal/ModalRenderFactory';
+export type { Primitive } from './internal/models';
 export type { TriggerType } from './internal/OverlayTrigger';
 export type { ISelectRowsResult } from './internal/query/api';
 export type {
@@ -1968,13 +1969,13 @@ export type { UseRequestHandler } from './internal/util/RequestHandler';
 export type { InjectedRouteLeaveProps, WrappedRouteLeaveProps } from './internal/util/RouteLeave';
 export type { QueryParams } from './internal/util/URL';
 export type { FileSizeLimitProps } from './public/files/models';
-export type { ImportTemplate } from './public/QueryInfo';
+export type { ImportTemplate, NamedParameter } from './public/QueryInfo';
 export type { EditableDetailPanelProps } from './public/QueryModel/EditableDetailPanel';
 export type { Action, ActionValue } from './public/QueryModel/grid/actions/Action';
-export type { QueryConfig } from './public/QueryModel/QueryModel';
+export type { QueryConfig, QueryParameters } from './public/QueryModel/QueryModel';
 export type { QueryModelLoader } from './public/QueryModel/QueryModelLoader';
-export type { TabbedGridPanelProps } from './public/QueryModel/TabbedGridPanel';
 
+export type { TabbedGridPanelProps } from './public/QueryModel/TabbedGridPanel';
 //  Due to babel-loader & typescript babel plugins we need to export/import types separately. The babel plugins require
 //  the typescript compiler option "isolatedModules", which do not export types from modules, so types must be exported
 //  separately.
diff --git a/packages/components/src/internal/models.ts b/packages/components/src/internal/models.ts
index 197259a0eb..66f40b3ef3 100644
--- a/packages/components/src/internal/models.ts
+++ b/packages/components/src/internal/models.ts
@@ -12,3 +12,5 @@ export function createGridModelId(gridId: string, schemaQuery: SchemaQuery, keyV
 
     return parts.join('|').toLowerCase();
 }
+
+export type Primitive = boolean | null | number | string | undefined;
diff --git a/packages/components/src/public/QueryInfo.ts b/packages/components/src/public/QueryInfo.ts
index ee876054f7..1652441955 100644
--- a/packages/components/src/public/QueryInfo.ts
+++ b/packages/components/src/public/QueryInfo.ts
@@ -22,6 +22,13 @@ export enum QueryInfoStatus {
     unknown,
 }
 
+export interface NamedParameter {
+    defaultValue: boolean | number | string;
+    isRequired: boolean;
+    jdbcType: string;
+    name: string;
+}
+
 const QUERY_INFO_DEFAULTS = {
     disabledSystemFields: undefined,
     // canEdit: false,
@@ -41,6 +48,7 @@ const QUERY_INFO_DEFAULTS = {
     lastAction: undefined,
     // lastUpdate: undefined,
     name: undefined,
+    namedParameters: [],
     pkCols: [],
     schemaName: undefined,
     status: QueryInfoStatus.unknown,
@@ -96,6 +104,7 @@ export class QueryInfo {
     declare lastAction: LastActionStatus;
     // declare lastUpdate: Date;
     declare name: string;
+    declare namedParameters: NamedParameter[];
     declare pkCols: string[];
     declare plural: string;
     declare queryLabel: string;
diff --git a/packages/components/src/public/QueryModel/QueryModel.ts b/packages/components/src/public/QueryModel/QueryModel.ts
index a942435e5f..59c167366b 100644
--- a/packages/components/src/public/QueryModel/QueryModel.ts
+++ b/packages/components/src/public/QueryModel/QueryModel.ts
@@ -20,6 +20,9 @@ import { caseInsensitive } from '../../internal/util/utils';
 import { naturalSortByProperty } from '../sort';
 import { PaginationData } from '../../internal/components/pagination/Pagination';
 import { SelectRowsMessage, SelectRowsOptions } from '../../internal/query/selectRows';
+import { Primitive } from '../../internal/models';
+
+export type QueryParameters = Record<string, Primitive>;
 
 export function flattenValuesFromRow(
     row: any,
@@ -186,8 +189,7 @@ export interface QueryConfig {
     /**
      * Query parameters used as input to a parameterized query.
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    queryParameters?: Record<string, any>;
+    readonly queryParameters?: QueryParameters;
     /**
      * Array of column names to be explicitly included in the column list in the [[QueryModel]] data load.
      */
@@ -332,8 +334,8 @@ export class QueryModel {
     /**
      * Query parameters used as input to a parameterized query.
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    readonly queryParameters?: Record<string, any>;
+
+    readonly queryParameters?: QueryParameters;
     /**
      * Array of column names to be explicitly included from the column list in the QueryModel data load.
      */

From 5ab8e5e57052f2f66d39cabbdda47eb3c18bef8c Mon Sep 17 00:00:00 2001
From: alanv <alanv@labkey.com>
Date: Wed, 9 Sep 2026 10:46:55 -0500
Subject: [PATCH 3/5] AutoForm.tsx: rename AutoFormDateInput to DateTimeInput,
 pass dateFormat and showTimeSelect AutoForm.test.tsx - add tests

---
 .../src/internal/components/AutoForm.test.tsx | 66 +++++++++++++++++++
 .../src/internal/components/AutoForm.tsx      | 18 +++--
 2 files changed, 79 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/internal/components/AutoForm.test.tsx b/packages/components/src/internal/components/AutoForm.test.tsx
index 6c3b8d137c..6f93898efd 100644
--- a/packages/components/src/internal/components/AutoForm.test.tsx
+++ b/packages/components/src/internal/components/AutoForm.test.tsx
@@ -34,6 +34,13 @@ describe('AutoForm', () => {
             });
         } else if (field.type === 'checkbox') {
             expect(fieldEl.querySelectorAll('input[type="checkbox"]').length).toEqual(1);
+        } else if (field.type === 'datetime') {
+            expect(fieldEl.querySelectorAll('.auto-form-date-input').length).toEqual(1);
+            const input = fieldEl.querySelector('.react-datepicker__input-container input');
+            expect(input.getAttribute('name')).toEqual(field.name);
+            if (field.placeholder) {
+                expect(input.getAttribute('placeholder')).toEqual(field.placeholder);
+            }
         } else if (field.type === 'select') {
             expect(fieldEl.querySelectorAll('select').length).toEqual(1);
             const expectedOptions = field.placeholder ? field.options.length + 1 : field.options.length;
@@ -122,6 +129,17 @@ describe('AutoForm', () => {
                     ],
                     type: 'radio',
                 },
+                {
+                    label: 'datetime field',
+                    name: 'datetimeField',
+                    type: 'datetime',
+                },
+                {
+                    label: 'datetime field w/ placeholder',
+                    name: 'datetimeFieldPlaceholder',
+                    placeholder: 'datetime placeholder',
+                    type: 'datetime',
+                },
             ],
         };
         render(<AutoForm formSchema={formSchema} onChange={jest.fn()} values={{}} />);
@@ -160,6 +178,11 @@ describe('AutoForm', () => {
                     name: 'checkboxField',
                     type: 'checkbox',
                 },
+                {
+                    label: 'datetime field',
+                    name: 'datetimeField',
+                    type: 'datetime',
+                },
             ],
         };
 
@@ -173,5 +196,48 @@ describe('AutoForm', () => {
         expect(onChange).toHaveBeenLastCalledWith('radioField', 'option2');
         await userEvent.selectOptions(document.querySelectorAll('select')[0], 'option2');
         expect(onChange).toHaveBeenLastCalledWith('selectField', 'option2');
+        await userEvent.click(document.querySelectorAll('input[type="checkbox"]')[0]);
+        expect(onChange).toHaveBeenLastCalledWith('checkboxField', true);
+        await userEvent.type(
+            document.querySelector('.auto-form-date-input .react-datepicker__input-container input'),
+            '2024-03-15 13:45'
+        );
+        expect(onChange).toHaveBeenLastCalledWith('datetimeField', new Date(2024, 2, 15, 13, 45));
+    });
+
+    test('datetime value formatting', () => {
+        const formSchema: FormSchema = {
+            fields: [
+                {
+                    label: 'datetime field',
+                    name: 'datetimeField',
+                    type: 'datetime',
+                },
+            ],
+        };
+        render(
+            <AutoForm
+                formSchema={formSchema}
+                onChange={jest.fn()}
+                values={{ datetimeField: new Date(2024, 2, 15, 13, 45) }}
+            />
+        );
+        // DateTimeInput formats with the container dateTimeFormat, which is yyyy-MM-dd HH:mm in tests.
+        expect(document.querySelector('.react-datepicker__input-container input')).toHaveValue('2024-03-15 13:45');
+    });
+
+    test('datetime time select', async () => {
+        const formSchema: FormSchema = {
+            fields: [
+                {
+                    label: 'datetime field',
+                    name: 'datetimeField',
+                    type: 'datetime',
+                },
+            ],
+        };
+        render(<AutoForm formSchema={formSchema} onChange={jest.fn()} values={{}} />);
+        await userEvent.click(document.querySelector('.react-datepicker__input-container input'));
+        expect(document.querySelectorAll('.react-datepicker__time-container')).toHaveLength(1);
     });
 });
diff --git a/packages/components/src/internal/components/AutoForm.tsx b/packages/components/src/internal/components/AutoForm.tsx
index 4967ee538f..2f83c1097a 100644
--- a/packages/components/src/internal/components/AutoForm.tsx
+++ b/packages/components/src/internal/components/AutoForm.tsx
@@ -6,6 +6,7 @@ import React, { ChangeEvent, FC, useCallback } from 'react';
 
 import { HelpIcon } from './HelpIcon';
 import { DateInput } from './DateInput';
+import { getDateFNSDateTimeFormat } from '../util/Date';
 
 const INPUT_CLASSES = {
     checkbox: 'form-check',
@@ -229,21 +230,28 @@ const RadioInput: FC<AutoFormFieldProps> = ({ field, inputClasses, onChange, val
 RadioInput.displayName = 'RadioInput';
 
 /**
- * A Date input component for AutoForm. Currently only supported by our Client, the server is not aware of this input
+ * A DateTime input component for AutoForm. Currently only supported by our Client, the server is not aware of this input
  * type. Expects a Date object as the value, sends a Date object to the onChange callback. Does not use id or
  * inputClasses props from AutoFormFieldProps because our underlying DateInput component does not support overriding the
  * id or input className.
  */
-const AutoFormDateInput: FC<AutoFormFieldProps<Date>> = ({ field, onChange, value }) => {
+const DateTimeInput: FC<AutoFormFieldProps<Date>> = ({ field, onChange, value }) => {
     const { name, placeholder } = field;
     const onDateChange = useCallback((date: Date) => onChange(name, date), [name, onChange]);
     return (
         <div className="auto-form-date-input">
-            <DateInput name={name} onChange={onDateChange} placeholderText={placeholder} selected={value} />
+            <DateInput
+                dateFormat={getDateFNSDateTimeFormat()}
+                name={name}
+                onChange={onDateChange}
+                placeholderText={placeholder}
+                selected={value}
+                showTimeSelect
+            />
         </div>
     );
 };
-AutoFormDateInput.displayName = 'AutoFormDateInput';
+DateTimeInput.displayName = 'DateTimeInput';
 
 const AutoFormField: FC<AutoFormFieldProps> = props => {
     const { field, id, inputWrapperCls, labelCls, labelWrapperCls, fieldWrapperCls } = props;
@@ -258,7 +266,7 @@ const AutoFormField: FC<AutoFormFieldProps> = props => {
                 {type === 'checkbox' && <CheckboxInput {...props} />}
                 {type === 'select' && <SelectInput {...props} />}
                 {type === 'radio' && <RadioInput {...props} />}
-                {type === 'datetime' && <AutoFormDateInput {...props} />}
+                {type === 'datetime' && <DateTimeInput {...props} />}
             </div>
         </div>
     );

From 4d27b37fdfd79a99710cd99cd88f35ca08a1163d Mon Sep 17 00:00:00 2001
From: alanv <alanv@labkey.com>
Date: Wed, 9 Sep 2026 12:34:34 -0500
Subject: [PATCH 4/5] cleanup

---
 packages/components/src/public/QueryModel/QueryModel.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/public/QueryModel/QueryModel.ts b/packages/components/src/public/QueryModel/QueryModel.ts
index 59c167366b..6f97e984dc 100644
--- a/packages/components/src/public/QueryModel/QueryModel.ts
+++ b/packages/components/src/public/QueryModel/QueryModel.ts
@@ -334,7 +334,6 @@ export class QueryModel {
     /**
      * Query parameters used as input to a parameterized query.
      */
-
     readonly queryParameters?: QueryParameters;
     /**
      * Array of column names to be explicitly included from the column list in the QueryModel data load.

From 011d5c988bc87999d610342ecd580b0085e030ae Mon Sep 17 00:00:00 2001
From: alanv <alanv@labkey.com>
Date: Mon, 14 Sep 2026 12:29:47 -0500
Subject: [PATCH 5/5] Prep for release

---
 packages/components/package-lock.json | 4 ++--
 packages/components/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index b598634bd1..6315b95c4e 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.62.3",
+  "version": "7.63.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.62.3",
+      "version": "7.63.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 369d870bea..da14da5daf 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.62.3",
+  "version": "7.63.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [