@osdk/react-components 0.2.0-beta.22 → 0.2.0-beta.24

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @osdk/react-components
 
+## 0.2.0-beta.24
+
+### Minor Changes
+
+- 813f4cb: Add DatetimePickerField component
+- e4840fa: Add exclude dropdown, in-filter search, hover-reveal actions, remove button to filter list items, thread objectSet through aggregation hooks so prefiltered sets are respected, and add FilterList storybook stories and documentation
+
+### Patch Changes
+
+- Updated dependencies [46dfbec]
+  - @osdk/react@0.10.0-beta.12
+
+## 0.2.0-beta.23
+
+### Minor Changes
+
+- c35231f: add cbac css tokens and create cbac-components package
+- 5f52808: fix(pdf): fix issue with pdf viewer worker import
+- 336a013: refactor(pdf): rename BasePdfRenderer/PdfRenderer to BasePdfViewer/PdfViewer, rename downloadEnabled to enableDownload, expose internal hooks, add onDownload result callback for download success/failure
+- 07a6fdb: use SkeletonBar component in table loading cells instead of inline skeleton divs
+
+### Patch Changes
+
+- Updated dependencies [fceb4ce]
+  - @osdk/client@2.8.0-beta.27
+  - @osdk/api@2.8.0-beta.27
+  - @osdk/react@0.10.0-beta.11
+
 ## 0.2.0-beta.22
 
 ### Minor Changes

package/README.md

@@ -80,27 +80,42 @@ The components that this package will provide are:
 | Component     | Description                                                                        | Documentation                  |
 | ------------- | ---------------------------------------------------------------------------------- | ------------------------------ |
 | `ObjectTable` | Displays an Object Set as a sortable, paginated table with inline editing support  | [Guide](./docs/ObjectTable.md) |
+| `PdfViewer`   | Renders PDF documents with annotations, search, sidebar navigation, and zoom       | [Guide](./docs/PdfViewer.md)   |
 | `FilterList`  | Visualize a high-level summary of objects data to allow users to filter that data. | [Guide](./docs/FilterList.md)  |
 | `ActionForm`  | Auto-generated form for executing Ontology Actions                                 | -                              |
 
 ## Component Architecture
 
-This package follows a 2-layer architecture pattern to maximize flexibility and reusability:
+This package follows a layered architecture pattern to maximize flexibility and reusability.
 
-### Architecture Overview
+### Core layers (all components)
 
-1. **OSDK Component Layer** (e.g., `ObjectTable`)
+1. **OSDK Component Layer** (e.g., `ObjectTable`, `PdfViewer`)
    - Handles data fetching and processing using @osdk/react hooks
    - Converts OSDK types to primitive data structures
    - Manages OSDK-specific operations like filtering and actions
    - No styling or component interactions
 
-2. **Base Component Layer** (e.g., `BaseTable`)
+2. **Base Component Layer** (e.g., `BaseTable`, `BasePdfViewer`)
    - Pure component layer with no OSDK imports
    - Contains all component interactions and styling
    - Accepts primitive props like `string[]`, arrays, and objects
    - Can be reused with custom data fetching layers
 
+### Building blocks (select components)
+
+Some components also provide a **building blocks** tier — individual sub-components and hooks that can be composed into fully custom layouts. Not every component needs this; it's offered where the UI is complex enough that users may want to rearrange or replace parts of it.
+
+For example, the PDF viewer offers three levels of customization:
+
+| Tier            | What you use                                                     | What you get                                                     |
+| --------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------- |
+| Drop-in         | `PdfViewer` / `BasePdfViewer`                                    | Full viewer with toolbar, sidebar, search — zero assembly        |
+| Building blocks | `PdfViewerToolbar`, `PdfViewerSidebar`, `PdfViewerContent`, etc. | Custom layout using standard parts                               |
+| Hooks           | `usePdfViewerState` / `usePdfViewerCore` / primitive hooks       | Build entirely custom components; hooks do all the heavy lifting |
+
+See the [PdfViewer guide](./docs/PdfViewer.md) for the full API reference.
+
 ### Example: ObjectTable and BaseTable
 
 ```tsx
@@ -111,7 +126,7 @@ This package follows a 2-layer architecture pattern to maximize flexibility and
 - Manages object property metadata
 - Passes primitive data to BaseTable
 
-// BaseTable - Component layer  
+// BaseTable - Component layer
 - Pure table component with no OSDK imports
 - Handles all UI interactions (sorting, selection, editing)
 - Manages component state
@@ -131,7 +146,8 @@ When building new components:
 1. Start with the Base component focusing on interactions and styling
 2. Create the OSDK wrapper that handles data fetching and type conversion
 3. Keep the Base component API simple using primitive types
-4. Document both layers for users who want to customize
+4. For complex components, consider a building blocks tier with sub-components and hooks
+5. Document all layers for users who want to customize
 
 ## Folder Structure
 

package/build/browser/action-form/FormFieldApi.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldApi.js","names":[],"sources":["FormFieldApi.ts"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type {\n  ActionDefinition,\n  ActionMetadata,\n  ActionParam,\n  CompileTimeMetadata,\n  DataValueClientToWire,\n  ObjectSet,\n  ObjectTypeDefinition,\n} from \"@osdk/api\";\nimport type React from \"react\";\n\n/**\n * A form field definition specifies configuration for a single field\n */\nexport interface FormFieldDefinition<\n  Q extends ActionDefinition<unknown>,\n  K extends FieldKey<Q> = FieldKey<Q>,\n> {\n  /**\n   * The field's unique key\n   */\n  fieldKey: K;\n\n  /**\n   * Display label for the field\n   * If not provided, the form field will not show any label.\n   */\n  label?: string;\n\n  /**\n   * Default value of the field\n   */\n  defaultValue?: FieldValueType<Q, K>;\n\n  /**\n   * The form field component type to render\n   */\n  fieldComponent: ValidFormFieldForPropertyType<FieldDescriptorType<Q, K>>;\n\n  /**\n   * Whether the field is required\n   */\n  isRequired?: boolean;\n\n  /**\n   * Placeholder text\n   */\n  placeholder?: string;\n\n  /**\n   * Additional information to display on this field\n   * The placement of helper text depends on the value of helperTextPlacement prop\n   */\n  helperText?: string;\n\n  /**\n   * The placement of the helper text either below the field or in a tooltip\n   *\n   * @default \"tooltip\"\n   */\n  helperTextPlacement?: \"bottom\" | \"tooltip\";\n\n  /**\n   * Whether the field is disabled\n   */\n  isDisabled?: boolean;\n\n  /**\n   * A callback to return a custom error message if validation failed\n   *\n   * @param validationRule the validation rule that failed with the error message\n   * @returns the error message to display\n   */\n  onValidationError?: (error: ValidationError) => string;\n\n  /**\n   * Additional function to validate the field\n   *\n   * @param value the current field value\n   * @returns a boolean promise indicating whether the value is valid\n   */\n  validate?: (value: FieldValueType<Q, K>) => Promise<boolean>;\n\n  /**\n   * The component props for the form field\n   * Excludes runtime props (key, onChange) which are managed by ActionForm\n   */\n  fieldComponentProps?: Omit<\n    FormFieldPropsByType[\n      ValidFormFieldForPropertyType<\n        FieldDescriptorType<Q, K>\n      >\n    ],\n    \"key\" | \"onChange\"\n  >;\n}\n\ntype ValidationError = { type: ValidationRule; error: string };\n\ntype ValidationRule =\n  | \"required\"\n  | \"min\"\n  | \"max\"\n  | \"minLength\"\n  | \"maxLength\"\n  | \"pattern\"\n  | \"validate\";\n\n/**\n * Maps field types to their corresponding props\n */\nexport interface FormFieldPropsByType {\n  DATETIME_PICKER: DatetimePickerFieldProps;\n  DROPDOWN: DropdownFieldProps<unknown, boolean>;\n  FILE_PICKER: FilePickerProps;\n  NUMBER_INPUT: NumberInputFieldProps;\n  OBJECT_SET: ObjectSetFieldProps<ObjectTypeDefinition>;\n  RADIO_BUTTONS: RadioButtonsFieldProps<unknown>;\n  TEXT_AREA: TextAreaFieldProps;\n  TEXT_INPUT: TextInputFieldProps;\n  CUSTOM: CustomFieldProps<unknown>;\n}\n\n/**\n * Datetime picker field props\n */\nexport interface DatetimePickerFieldProps extends BaseFormFieldProps<Date> {\n  /**\n   * The earliest date the user can select\n   * If provided, this will be added to the field validation\n   */\n  min?: Date;\n\n  /**\n   * The latest date the user can select\n   * If provided, this will be added to the field validation\n   */\n  max?: Date;\n\n  /**\n   * Whether to show time picker\n   */\n  showTime?: boolean;\n\n  /**\n   * Function to format the date string\n   */\n  formatDate?: (date: Date) => string;\n}\n\n/**\n * Dropdown field props with selectable items\n */\nexport interface DropdownFieldProps<V, Multiple extends boolean = false>\n  extends BaseFormFieldProps<Multiple extends true ? V[] : V>\n{\n  /**\n   * Available items for the dropdown\n   */\n  items: V[];\n\n  /**\n   * Converts an item to a display string. Defaults to `String()`.\n   */\n  itemToStringLabel?: (item: V) => string;\n\n  /**\n   * Returns a unique string key for a list item. Used as the React `key`.\n   * Falls back to the item's index when not provided.\n   */\n  itemToKey?: (item: V) => string;\n\n  /**\n   * Custom equality check for item values. Defaults to `Object.is`.\n   * Required when items are objects to ensure correct selection matching.\n   */\n  isItemEqual?: (a: V, b: V) => boolean;\n\n  /**\n   * Whether the dropdown allows searching/filtering.\n   * When true, renders a Combobox with a search input.\n   * When false (default), renders a Select dropdown.\n   */\n  isSearchable?: boolean;\n\n  /**\n   * Placeholder text shown when no value is selected.\n   */\n  placeholder?: string;\n\n  /**\n   * Whether multiple values can be selected\n   */\n  isMultiple?: Multiple;\n}\n\nexport interface FilePickerProps extends BaseFormFieldProps<File | File[]> {\n  /**\n   * Whether multiple files can be selected\n   */\n  isMulti?: boolean;\n\n  /**\n   * Accepted file types (e.g., \"image/*\", \".pdf\")\n   */\n  accept?: string | string[];\n\n  /**\n   * Maximum file size in bytes\n   */\n  maxSize?: number;\n}\n\n/**\n * Text area field props\n */\nexport interface TextAreaFieldProps extends\n  BaseFormFieldProps<string>,\n  Pick<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    | \"rows\"\n    | \"wrap\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"minLength\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"maxLength\"\n  >\n{}\n\nexport interface TextInputFieldProps extends\n  BaseFormFieldProps<string>,\n  Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"minLength\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"maxLength\"\n  >\n{\n  placeholder?: string;\n}\n\n/**\n * Number input field props\n */\nexport interface NumberInputFieldProps extends\n  BaseFormFieldProps<number>,\n  Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"min\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"max\"\n    | \"step\"\n  >\n{}\n\n/**\n * Radio buttons field props\n */\nexport interface RadioButtonsFieldProps<V> extends BaseFormFieldProps<V> {\n  /**\n   * Available options for radio buttons\n   */\n  options: Option<V>[];\n}\n\n/**\n * Option interface for radio button options\n */\nexport interface Option<V> {\n  label: string;\n  value: V;\n}\n\n/**\n * Object set field displays the summary of the count of the given object set\n */\nexport interface ObjectSetFieldProps<T extends ObjectTypeDefinition>\n  extends BaseFormFieldProps<ObjectSet<T>>\n{}\n\n/**\n * Custom field props for user-defined renderers\n */\nexport interface CustomFieldProps<V> extends BaseFormFieldProps<V> {\n  /**\n   * Custom renderer function\n   */\n  customRenderer: (props: BaseFormFieldProps<V>) => React.ReactNode;\n}\n\nexport interface BaseFormFieldProps<V> {\n  /**\n   * The value of the form field\n   */\n  value: V | null;\n  /**\n   * Called when the field value changes.\n   *\n   * ActionForm internally wraps this to pass the key to `onFieldValueChange`:\n   * ```\n   * <DropdownField\n   *   {...fieldDef}\n   *   onChange={(value) => onFieldValueChange(fieldDef.key, value)}\n   * />\n   * ```\n   *\n   * @param value The new value of the form field\n   */\n  onChange?: (value: V | null) => void;\n}\n\nexport type FieldKey<Q extends ActionDefinition<unknown>> =\n  keyof ActionParameters<Q>;\n\n/**\n * Extracts parameters from an ActionDefinition\n */\nexport type ActionParameters<Q extends ActionDefinition<unknown>> =\n  CompileTimeMetadata<Q>[\"parameters\"];\n\n/**\n * Extracts the value type for a specific parameter\n *\n * TODO: Re-use `BaseType`\n */\nexport type FieldValueType<\n  Q extends ActionDefinition<unknown>,\n  K extends keyof ActionParameters<Q> = keyof ActionParameters<Q>,\n> = ActionParameters<Q>[K][\"type\"] extends\n  ActionMetadata.DataType.Object<infer T> ? ActionParam.ObjectType<T>\n  : ActionParameters<Q>[K][\"type\"] extends ActionMetadata.DataType.ObjectSet<\n    infer T\n  > ? ActionParam.ObjectSetType<T>\n  : ActionParameters<Q>[K][\"type\"] extends ActionMetadata.DataType.Struct<\n    infer T\n  > ? ActionParam.StructType<T>\n  : ActionParameters<Q>[K][\"type\"] extends keyof DataValueClientToWire\n    ? DataValueClientToWire[ActionParameters<Q>[K][\"type\"]]\n  : never;\n\n/**\n * Extracts the parameter type descriptor for a specific action parameter.\n */\nexport type FieldDescriptorType<\n  Q extends ActionDefinition<unknown> = ActionDefinition<unknown>,\n  K extends keyof ActionParameters<Q> = keyof ActionParameters<Q>,\n> = ActionParameters<Q>[K][\"type\"];\n\n/**\n * Available form field component types\n */\nexport type FieldComponent =\n  | \"DATETIME_PICKER\"\n  | \"DROPDOWN\"\n  | \"FILE_PICKER\"\n  | \"NUMBER_INPUT\"\n  | \"RADIO_BUTTONS\"\n  | \"OBJECT_SET\"\n  | \"TEXT_AREA\"\n  | \"TEXT_INPUT\"\n  | \"CUSTOM\";\n\n/**\n * Describes the data type of a form field, independent of OSDK.\n * Mirrors ActionMetadata.DataType to keep the rendering layer OSDK-agnostic.\n */\nexport type FieldType =\n  | \"boolean\"\n  | \"string\"\n  | \"integer\"\n  | \"long\"\n  | \"double\"\n  | \"datetime\"\n  | \"timestamp\"\n  | \"attachment\"\n  | \"marking\"\n  | \"mediaReference\"\n  | \"objectType\"\n  | \"geoshape\"\n  | \"geohash\"\n  | { type: \"object\"; object: string }\n  | { type: \"objectSet\"; objectSet: string }\n  | { type: \"interface\"; interface: string }\n  | { type: \"struct\"; struct: Record<string, string> };\n\n/**\n * An OSDK-agnostic field definition used by BaseForm and FormFieldRenderer.\n * Contains only the information needed to render a single field — no generics,\n * no compile-time parameter constraints.\n *\n * Implemented as a distributed mapped type: switching on `fieldComponent`\n * narrows `fieldComponentProps` to the correct props type automatically.\n */\nexport type RendererFieldDefinition = {\n  [K in FieldComponent]: {\n    fieldKey: string;\n    fieldComponent: K;\n    fieldType?: FieldType;\n    label?: string;\n    defaultValue?: unknown;\n    isRequired?: boolean;\n    placeholder?: string;\n    helperText?: string;\n    helperTextPlacement?: \"bottom\" | \"tooltip\";\n    fieldComponentProps?: Omit<FormFieldPropsByType[K], \"value\" | \"onChange\">;\n  };\n}[FieldComponent];\n\n/**\n * Gets valid form field types for a given property type\n */\nexport type ValidFormFieldForPropertyType<P extends FieldDescriptorType> =\n  P extends \"objectSet\" ? \"OBJECT_SET\"\n    : P extends \"object\" ? \"DROPDOWN\"\n    : P extends \"mediaReference\" | \"attachment\" ? \"FILE_PICKER\"\n    : P extends \"boolean\" ? \"RADIO_BUTTONS\" | \"DROPDOWN\"\n    : P extends \"string\" ? \"TEXT_INPUT\" | \"TEXT_AREA\"\n    : P extends \"datetime\" | \"timestamp\" ? \"DATETIME_PICKER\"\n    : P extends\n      | \"double\"\n      | \"integer\"\n      | \"long\"\n      | \"float\"\n      | \"short\"\n      | \"byte\"\n      | \"decimal\" ? \"NUMBER_INPUT\"\n    : never;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"FormFieldApi.js","names":[],"sources":["FormFieldApi.ts"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type {\n  ActionDefinition,\n  ActionMetadata,\n  ActionParam,\n  CompileTimeMetadata,\n  DataValueClientToWire,\n  ObjectSet,\n  ObjectTypeDefinition,\n} from \"@osdk/api\";\nimport type React from \"react\";\n\n/**\n * A form field definition specifies configuration for a single field\n */\nexport interface FormFieldDefinition<\n  Q extends ActionDefinition<unknown>,\n  K extends FieldKey<Q> = FieldKey<Q>,\n> {\n  /**\n   * The field's unique key\n   */\n  fieldKey: K;\n\n  /**\n   * Display label for the field\n   * If not provided, the form field will not show any label.\n   */\n  label?: string;\n\n  /**\n   * Default value of the field\n   */\n  defaultValue?: FieldValueType<Q, K>;\n\n  /**\n   * The form field component type to render\n   */\n  fieldComponent: ValidFormFieldForPropertyType<FieldDescriptorType<Q, K>>;\n\n  /**\n   * Whether the field is required\n   */\n  isRequired?: boolean;\n\n  /**\n   * Placeholder text\n   */\n  placeholder?: string;\n\n  /**\n   * Additional information to display on this field\n   * The placement of helper text depends on the value of helperTextPlacement prop\n   */\n  helperText?: string;\n\n  /**\n   * The placement of the helper text either below the field or in a tooltip\n   *\n   * @default \"tooltip\"\n   */\n  helperTextPlacement?: \"bottom\" | \"tooltip\";\n\n  /**\n   * Whether the field is disabled\n   */\n  isDisabled?: boolean;\n\n  /**\n   * A callback to return a custom error message if validation failed\n   *\n   * @param validationRule the validation rule that failed with the error message\n   * @returns the error message to display\n   */\n  onValidationError?: (error: ValidationError) => string;\n\n  /**\n   * Additional function to validate the field\n   *\n   * @param value the current field value\n   * @returns a boolean promise indicating whether the value is valid\n   */\n  validate?: (value: FieldValueType<Q, K>) => Promise<boolean>;\n\n  /**\n   * The component props for the form field\n   * Excludes runtime props (key, onChange) which are managed by ActionForm\n   */\n  fieldComponentProps?: Omit<\n    FormFieldPropsByType[\n      ValidFormFieldForPropertyType<\n        FieldDescriptorType<Q, K>\n      >\n    ],\n    \"key\" | \"onChange\"\n  >;\n}\n\ntype ValidationError = { type: ValidationRule; error: string };\n\ntype ValidationRule =\n  | \"required\"\n  | \"min\"\n  | \"max\"\n  | \"minLength\"\n  | \"maxLength\"\n  | \"pattern\"\n  | \"validate\";\n\n/**\n * Maps field types to their corresponding props\n */\nexport interface FormFieldPropsByType {\n  DATETIME_PICKER: DatetimePickerFieldProps;\n  DROPDOWN: DropdownFieldProps<unknown, boolean>;\n  FILE_PICKER: FilePickerProps;\n  NUMBER_INPUT: NumberInputFieldProps;\n  OBJECT_SET: ObjectSetFieldProps<ObjectTypeDefinition>;\n  RADIO_BUTTONS: RadioButtonsFieldProps<unknown>;\n  TEXT_AREA: TextAreaFieldProps;\n  TEXT_INPUT: TextInputFieldProps;\n  CUSTOM: CustomFieldProps<unknown>;\n}\n\n/**\n * Datetime picker field props.\n *\n * When `formatDate` is omitted, ISO-like format is used (YYYY-MM-DD / YYYY-MM-DD HH:mm).\n */\nexport interface DatetimePickerFieldProps extends BaseFormFieldProps<Date> {\n  /**\n   * The earliest date the user can select.\n   * If provided, this will be added to the field validation.\n   */\n  min?: Date;\n\n  /**\n   * The latest date the user can select.\n   * If provided, this will be added to the field validation.\n   */\n  max?: Date;\n\n  /**\n   * Whether to show time picker.\n   */\n  showTime?: boolean;\n\n  /**\n   * Whether to close the popover after selecting a date.\n   * @default true when `showTime` is false, false when `showTime` is true\n   */\n  closeOnSelection?: boolean;\n\n  /**\n   * Placeholder text shown when no value is selected.\n   */\n  placeholder?: string;\n\n  /** Formats a Date for display in the trigger button. */\n  formatDate?: (date: Date) => string;\n}\n\n/**\n * Dropdown field props with selectable items\n */\nexport interface DropdownFieldProps<V, Multiple extends boolean = false>\n  extends BaseFormFieldProps<Multiple extends true ? V[] : V>\n{\n  /**\n   * Available items for the dropdown\n   */\n  items: V[];\n\n  /**\n   * Converts an item to a display string. Defaults to `String()`.\n   */\n  itemToStringLabel?: (item: V) => string;\n\n  /**\n   * Returns a unique string key for a list item. Used as the React `key`.\n   * Falls back to the item's index when not provided.\n   */\n  itemToKey?: (item: V) => string;\n\n  /**\n   * Custom equality check for item values. Defaults to `Object.is`.\n   * Required when items are objects to ensure correct selection matching.\n   */\n  isItemEqual?: (a: V, b: V) => boolean;\n\n  /**\n   * Whether the dropdown allows searching/filtering.\n   * When true, renders a Combobox with a search input.\n   * When false (default), renders a Select dropdown.\n   */\n  isSearchable?: boolean;\n\n  /**\n   * Placeholder text shown when no value is selected.\n   */\n  placeholder?: string;\n\n  /**\n   * Whether multiple values can be selected\n   */\n  isMultiple?: Multiple;\n}\n\nexport interface FilePickerProps extends BaseFormFieldProps<File | File[]> {\n  /**\n   * Whether multiple files can be selected\n   */\n  isMulti?: boolean;\n\n  /**\n   * Accepted file types (e.g., \"image/*\", \".pdf\")\n   */\n  accept?: string | string[];\n\n  /**\n   * Maximum file size in bytes\n   */\n  maxSize?: number;\n}\n\n/**\n * Text area field props\n */\nexport interface TextAreaFieldProps extends\n  BaseFormFieldProps<string>,\n  Pick<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    | \"rows\"\n    | \"wrap\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"minLength\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"maxLength\"\n  >\n{}\n\nexport interface TextInputFieldProps extends\n  BaseFormFieldProps<string>,\n  Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"minLength\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"maxLength\"\n  >\n{\n  placeholder?: string;\n}\n\n/**\n * Number input field props\n */\nexport interface NumberInputFieldProps extends\n  BaseFormFieldProps<number>,\n  Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"min\"\n    /**\n     * If provided, this will be added to the field validation\n     */\n    | \"max\"\n    | \"step\"\n  >\n{}\n\n/**\n * Radio buttons field props\n */\nexport interface RadioButtonsFieldProps<V> extends BaseFormFieldProps<V> {\n  /**\n   * Available options for radio buttons\n   */\n  options: Option<V>[];\n}\n\n/**\n * Option interface for radio button options\n */\nexport interface Option<V> {\n  label: string;\n  value: V;\n}\n\n/**\n * Object set field displays the summary of the count of the given object set\n */\nexport interface ObjectSetFieldProps<T extends ObjectTypeDefinition>\n  extends BaseFormFieldProps<ObjectSet<T>>\n{}\n\n/**\n * Custom field props for user-defined renderers\n */\nexport interface CustomFieldProps<V> extends BaseFormFieldProps<V> {\n  /**\n   * Custom renderer function\n   */\n  customRenderer: (props: BaseFormFieldProps<V>) => React.ReactNode;\n}\n\nexport interface BaseFormFieldProps<V> {\n  /**\n   * The HTML `id` attribute for the field input element.\n   * Used for `<label htmlFor>` association.\n   */\n  id?: string;\n\n  /**\n   * The value of the form field\n   */\n  value: V | null;\n  /**\n   * Called when the field value changes.\n   *\n   * ActionForm internally wraps this to pass the key to `onFieldValueChange`:\n   * ```\n   * <DropdownField\n   *   {...fieldDef}\n   *   onChange={(value) => onFieldValueChange(fieldDef.key, value)}\n   * />\n   * ```\n   *\n   * @param value The new value of the form field\n   */\n  onChange?: (value: V | null) => void;\n}\n\nexport type FieldKey<Q extends ActionDefinition<unknown>> =\n  keyof ActionParameters<Q>;\n\n/**\n * Extracts parameters from an ActionDefinition\n */\nexport type ActionParameters<Q extends ActionDefinition<unknown>> =\n  CompileTimeMetadata<Q>[\"parameters\"];\n\n/**\n * Extracts the value type for a specific parameter\n *\n * TODO: Re-use `BaseType`\n */\nexport type FieldValueType<\n  Q extends ActionDefinition<unknown>,\n  K extends keyof ActionParameters<Q> = keyof ActionParameters<Q>,\n> = ActionParameters<Q>[K][\"type\"] extends\n  ActionMetadata.DataType.Object<infer T> ? ActionParam.ObjectType<T>\n  : ActionParameters<Q>[K][\"type\"] extends ActionMetadata.DataType.ObjectSet<\n    infer T\n  > ? ActionParam.ObjectSetType<T>\n  : ActionParameters<Q>[K][\"type\"] extends ActionMetadata.DataType.Struct<\n    infer T\n  > ? ActionParam.StructType<T>\n  : ActionParameters<Q>[K][\"type\"] extends keyof DataValueClientToWire\n    ? DataValueClientToWire[ActionParameters<Q>[K][\"type\"]]\n  : never;\n\n/**\n * Extracts the parameter type descriptor for a specific action parameter.\n */\nexport type FieldDescriptorType<\n  Q extends ActionDefinition<unknown> = ActionDefinition<unknown>,\n  K extends keyof ActionParameters<Q> = keyof ActionParameters<Q>,\n> = ActionParameters<Q>[K][\"type\"];\n\n/**\n * Available form field component types\n */\nexport type FieldComponent =\n  | \"DATETIME_PICKER\"\n  | \"DROPDOWN\"\n  | \"FILE_PICKER\"\n  | \"NUMBER_INPUT\"\n  | \"RADIO_BUTTONS\"\n  | \"OBJECT_SET\"\n  | \"TEXT_AREA\"\n  | \"TEXT_INPUT\"\n  | \"CUSTOM\";\n\n/**\n * Describes the data type of a form field, independent of OSDK.\n * Mirrors ActionMetadata.DataType to keep the rendering layer OSDK-agnostic.\n */\nexport type FieldType =\n  | \"boolean\"\n  | \"string\"\n  | \"integer\"\n  | \"long\"\n  | \"double\"\n  | \"datetime\"\n  | \"timestamp\"\n  | \"attachment\"\n  | \"marking\"\n  | \"mediaReference\"\n  | \"objectType\"\n  | \"geoshape\"\n  | \"geohash\"\n  | { type: \"object\"; object: string }\n  | { type: \"objectSet\"; objectSet: string }\n  | { type: \"interface\"; interface: string }\n  | { type: \"struct\"; struct: Record<string, string> };\n\n/**\n * An OSDK-agnostic field definition used by BaseForm and FormFieldRenderer.\n * Contains only the information needed to render a single field — no generics,\n * no compile-time parameter constraints.\n *\n * Implemented as a distributed mapped type: switching on `fieldComponent`\n * narrows `fieldComponentProps` to the correct props type automatically.\n */\nexport type RendererFieldDefinition = {\n  [K in FieldComponent]: {\n    fieldKey: string;\n    fieldComponent: K;\n    fieldType?: FieldType;\n    label?: string;\n    defaultValue?: unknown;\n    isRequired?: boolean;\n    placeholder?: string;\n    helperText?: string;\n    helperTextPlacement?: \"bottom\" | \"tooltip\";\n    fieldComponentProps?: Omit<FormFieldPropsByType[K], \"value\" | \"onChange\">;\n  };\n}[FieldComponent];\n\n/**\n * Gets valid form field types for a given property type\n */\nexport type ValidFormFieldForPropertyType<P extends FieldDescriptorType> =\n  P extends \"objectSet\" ? \"OBJECT_SET\"\n    : P extends \"object\" ? \"DROPDOWN\"\n    : P extends \"mediaReference\" | \"attachment\" ? \"FILE_PICKER\"\n    : P extends \"boolean\" ? \"RADIO_BUTTONS\" | \"DROPDOWN\"\n    : P extends \"string\" ? \"TEXT_INPUT\" | \"TEXT_AREA\"\n    : P extends \"datetime\" | \"timestamp\" ? \"DATETIME_PICKER\"\n    : P extends\n      | \"double\"\n      | \"integer\"\n      | \"long\"\n      | \"float\"\n      | \"short\"\n      | \"byte\"\n      | \"decimal\" ? \"NUMBER_INPUT\"\n    : never;\n"],"mappings":"","ignoreList":[]}

package/build/browser/action-form/fields/DateCalendar.js

@@ -0,0 +1,70 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useMemo } from "react";
+import { DayPicker } from "react-day-picker";
+import styles from "./DateCalendar.module.css.js";
+const CLASS_NAMES = {
+  root: styles.calendar,
+  months: styles.calendarMonths,
+  month_grid: styles.calendarMonthGrid,
+  weekday: styles.calendarWeekday,
+  day: styles.calendarDay,
+  day_button: styles.calendarDayButton,
+  selected: styles.calendarSelected,
+  today: styles.calendarToday,
+  outside: styles.calendarOutside,
+  disabled: styles.calendarDisabled,
+  hidden: styles.calendarHidden,
+  nav: styles.calendarNav,
+  button_previous: styles.calendarNavButton,
+  button_next: styles.calendarNavButton,
+  month_caption: styles.calendarMonthCaption,
+  caption_label: styles.calendarCaptionLabel,
+  chevron: styles.calendarChevron
+};
+export default function DateCalendar({
+  dateSelected,
+  onSelect,
+  min,
+  max,
+  footer
+}) {
+  const disabled = useMemo(() => {
+    const matchers = [];
+    if (min != null) {
+      matchers.push({
+        before: min
+      });
+    }
+    if (max != null) {
+      matchers.push({
+        after: max
+      });
+    }
+    return matchers;
+  }, [min, max]);
+  return /*#__PURE__*/React.createElement(DayPicker, {
+    mode: "single",
+    selected: dateSelected,
+    onSelect: onSelect,
+    disabled: disabled,
+    defaultMonth: dateSelected,
+    classNames: CLASS_NAMES,
+    footer: footer
+  });
+}
+//# sourceMappingURL=DateCalendar.js.map

package/build/browser/action-form/fields/DateCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateCalendar.js","names":["React","useMemo","DayPicker","styles","CLASS_NAMES","root","calendar","months","calendarMonths","month_grid","calendarMonthGrid","weekday","calendarWeekday","day","calendarDay","day_button","calendarDayButton","selected","calendarSelected","today","calendarToday","outside","calendarOutside","disabled","calendarDisabled","hidden","calendarHidden","nav","calendarNav","button_previous","calendarNavButton","button_next","month_caption","calendarMonthCaption","caption_label","calendarCaptionLabel","chevron","calendarChevron","DateCalendar","dateSelected","onSelect","min","max","footer","matchers","push","before","after","createElement","mode","defaultMonth","classNames"],"sources":["DateCalendar.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useMemo } from \"react\";\nimport type {\n  ClassNames,\n  DateAfter,\n  DateBefore,\n  Matcher,\n} from \"react-day-picker\";\nimport { DayPicker } from \"react-day-picker\";\nimport styles from \"./DateCalendar.module.css\";\n\nconst CLASS_NAMES: Partial<ClassNames> = {\n  root: styles.calendar,\n  months: styles.calendarMonths,\n  month_grid: styles.calendarMonthGrid,\n  weekday: styles.calendarWeekday,\n  day: styles.calendarDay,\n  day_button: styles.calendarDayButton,\n  selected: styles.calendarSelected,\n  today: styles.calendarToday,\n  outside: styles.calendarOutside,\n  disabled: styles.calendarDisabled,\n  hidden: styles.calendarHidden,\n  nav: styles.calendarNav,\n  button_previous: styles.calendarNavButton,\n  button_next: styles.calendarNavButton,\n  month_caption: styles.calendarMonthCaption,\n  caption_label: styles.calendarCaptionLabel,\n  chevron: styles.calendarChevron,\n};\n\nexport interface DateCalendarProps {\n  dateSelected: Date | undefined;\n  onSelect: (date: Date | undefined) => void;\n  min?: Date;\n  max?: Date;\n  footer?: React.ReactNode;\n}\n\nexport default function DateCalendar({\n  dateSelected,\n  onSelect,\n  min,\n  max,\n  footer,\n}: DateCalendarProps): React.ReactElement {\n  const disabled = useMemo((): Matcher[] => {\n    const matchers: Matcher[] = [];\n    if (min != null) {\n      const before: DateBefore = { before: min };\n      matchers.push(before);\n    }\n    if (max != null) {\n      const after: DateAfter = { after: max };\n      matchers.push(after);\n    }\n    return matchers;\n  }, [min, max]);\n\n  return (\n    <DayPicker\n      mode=\"single\"\n      selected={dateSelected}\n      onSelect={onSelect}\n      disabled={disabled}\n      defaultMonth={dateSelected}\n      classNames={CLASS_NAMES}\n      footer={footer}\n    />\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAOtC,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,MAAM,MAAM,2BAA2B;AAE9C,MAAMC,WAAgC,GAAG;EACvCC,IAAI,EAAEF,MAAM,CAACG,QAAQ;EACrBC,MAAM,EAAEJ,MAAM,CAACK,cAAc;EAC7BC,UAAU,EAAEN,MAAM,CAACO,iBAAiB;EACpCC,OAAO,EAAER,MAAM,CAACS,eAAe;EAC/BC,GAAG,EAAEV,MAAM,CAACW,WAAW;EACvBC,UAAU,EAAEZ,MAAM,CAACa,iBAAiB;EACpCC,QAAQ,EAAEd,MAAM,CAACe,gBAAgB;EACjCC,KAAK,EAAEhB,MAAM,CAACiB,aAAa;EAC3BC,OAAO,EAAElB,MAAM,CAACmB,eAAe;EAC/BC,QAAQ,EAAEpB,MAAM,CAACqB,gBAAgB;EACjCC,MAAM,EAAEtB,MAAM,CAACuB,cAAc;EAC7BC,GAAG,EAAExB,MAAM,CAACyB,WAAW;EACvBC,eAAe,EAAE1B,MAAM,CAAC2B,iBAAiB;EACzCC,WAAW,EAAE5B,MAAM,CAAC2B,iBAAiB;EACrCE,aAAa,EAAE7B,MAAM,CAAC8B,oBAAoB;EAC1CC,aAAa,EAAE/B,MAAM,CAACgC,oBAAoB;EAC1CC,OAAO,EAAEjC,MAAM,CAACkC;AAClB,CAAC;AAUD,eAAe,SAASC,YAAYA,CAAC;EACnCC,YAAY;EACZC,QAAQ;EACRC,GAAG;EACHC,GAAG;EACHC;AACiB,CAAC,EAAsB;EACxC,MAAMpB,QAAQ,GAAGtB,OAAO,CAAC,MAAiB;IACxC,MAAM2C,QAAmB,GAAG,EAAE;IAC9B,IAAIH,GAAG,IAAI,IAAI,EAAE;MAEfG,QAAQ,CAACC,IAAI,CADc;QAAEC,MAAM,EAAEL;MAAI,CACrB,CAAC;IACvB;IACA,IAAIC,GAAG,IAAI,IAAI,EAAE;MAEfE,QAAQ,CAACC,IAAI,CADY;QAAEE,KAAK,EAAEL;MAAI,CACnB,CAAC;IACtB;IACA,OAAOE,QAAQ;EACjB,CAAC,EAAE,CAACH,GAAG,EAAEC,GAAG,CAAC,CAAC;EAEd,oBACE1C,KAAA,CAAAgD,aAAA,CAAC9C,SAAS;IACR+C,IAAI,EAAC,QAAQ;IACbhC,QAAQ,EAAEsB,YAAa;IACvBC,QAAQ,EAAEA,QAAS;IACnBjB,QAAQ,EAAEA,QAAS;IACnB2B,YAAY,EAAEX,YAAa;IAC3BY,UAAU,EAAE/C,WAAY;IACxBuC,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN","ignoreList":[]}

package/build/browser/action-form/fields/DateCalendar.module.css

@@ -0,0 +1,136 @@
+/* DateCalendar — DayPicker classNames */
+
+.calendar {
+  position: relative;
+  width: 100%;
+  font-family: var(--osdk-datetime-calendar-font-family);
+  font-size: var(--osdk-datetime-calendar-font-size);
+}
+
+.calendarMonths {
+  display: flex;
+}
+
+.calendarMonthGrid {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.calendarWeekday {
+  padding: var(--osdk-datetime-calendar-gap);
+  font-size: var(--osdk-datetime-calendar-weekday-font-size);
+  color: var(--osdk-datetime-calendar-weekday-color);
+  text-align: center;
+  width: var(--osdk-datetime-calendar-cell-size);
+}
+
+.calendarDay {
+  padding: var(--osdk-datetime-calendar-gap);
+  text-align: center;
+}
+
+.calendarDayButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--osdk-datetime-calendar-cell-size);
+  height: var(--osdk-datetime-calendar-cell-size);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--osdk-datetime-calendar-day-border-radius);
+  font: inherit;
+  color: inherit;
+
+  &:hover {
+    background: var(--osdk-datetime-calendar-day-hover-bg);
+  }
+
+  &:active {
+    background: var(--osdk-datetime-calendar-day-active-bg);
+  }
+}
+
+.calendarSelected .calendarDayButton {
+  background: var(--osdk-datetime-calendar-selected-bg);
+  color: var(--osdk-datetime-calendar-selected-color);
+
+  &:hover {
+    background: var(--osdk-datetime-calendar-selected-hover-bg);
+  }
+}
+
+.calendarToday .calendarDayButton {
+  font-weight: var(--osdk-datetime-calendar-today-font-weight);
+}
+
+.calendarOutside .calendarDayButton {
+  color: var(--osdk-datetime-calendar-outside-color);
+}
+
+.calendarDisabled .calendarDayButton {
+  color: var(--osdk-datetime-calendar-disabled-color);
+  cursor: default;
+
+  &:hover {
+    background: transparent;
+  }
+}
+
+.calendarHidden {
+  visibility: hidden;
+}
+
+/* Calendar navigation */
+.calendarNav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  pointer-events: none;
+}
+
+.calendarNavButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--osdk-datetime-calendar-nav-button-size);
+  height: var(--osdk-datetime-calendar-nav-button-size);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--osdk-datetime-calendar-nav-button-border-radius);
+  padding: 0;
+  pointer-events: auto;
+
+  &:hover {
+    background: var(--osdk-datetime-calendar-nav-button-hover-bg);
+  }
+}
+
+.calendarMonthCaption {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--osdk-datetime-calendar-nav-button-size);
+}
+
+.calendarCaptionLabel {
+  font-size: var(--osdk-datetime-calendar-caption-font-size);
+  font-weight: var(--osdk-datetime-calendar-caption-font-weight);
+}
+
+.calendarChevron {
+  width: var(--osdk-datetime-calendar-chevron-size);
+  height: var(--osdk-datetime-calendar-chevron-size);
+  fill: currentColor;
+}
+
+/* Calendar fallback / loading */
+.calendarFallback {
+  width: var(--osdk-datetime-calendar-fallback-width);
+  height: var(--osdk-datetime-calendar-fallback-height);
+}

package/build/browser/action-form/fields/DateCalendar.module.css.js

@@ -0,0 +1,22 @@
+// CSS Module proxy for DateCalendar.module.css
+const styles = {
+  "calendar": "DateCalendar-module__calendar___l3nEo6Ad",
+  "calendarMonths": "DateCalendar-module__calendarMonths___lGxU5Qmt",
+  "calendarMonthGrid": "DateCalendar-module__calendarMonthGrid___EF09HyTt",
+  "calendarWeekday": "DateCalendar-module__calendarWeekday___vRgO02bB",
+  "calendarDay": "DateCalendar-module__calendarDay___sUMDmHH-",
+  "calendarDayButton": "DateCalendar-module__calendarDayButton___SoPcp9U0",
+  "calendarSelected": "DateCalendar-module__calendarSelected___I-1tOp-J",
+  "calendarToday": "DateCalendar-module__calendarToday___laVEjkhA",
+  "calendarOutside": "DateCalendar-module__calendarOutside___uEAuOUjF",
+  "calendarDisabled": "DateCalendar-module__calendarDisabled___4FOd5zD2",
+  "calendarHidden": "DateCalendar-module__calendarHidden___DMxoFqL0",
+  "calendarNav": "DateCalendar-module__calendarNav___jB5QsZfT",
+  "calendarNavButton": "DateCalendar-module__calendarNavButton___4x8m8Pg9",
+  "calendarMonthCaption": "DateCalendar-module__calendarMonthCaption___YpcqdHUV",
+  "calendarCaptionLabel": "DateCalendar-module__calendarCaptionLabel___v5rFCob9",
+  "calendarChevron": "DateCalendar-module__calendarChevron___YfBbSEGJ",
+  "calendarFallback": "DateCalendar-module__calendarFallback___6NTtjLx5"
+};
+
+export default styles;

package/build/browser/action-form/fields/DatetimePickerField.js

@@ -0,0 +1,98 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Input } from "@base-ui/react/input";
+import { Popover } from "@base-ui/react/popover";
+import classnames from "classnames";
+import React, { useCallback, useMemo, useState } from "react";
+import { formatDateForInput, formatDatetimeForDisplay, formatTime } from "../../shared/dateUtils.js";
+import styles from "./DatetimePickerField.module.css.js";
+import { LazyDateCalendar } from "./LazyDateCalendar.js";
+
+/** Midnight fallback so `extractTime` can reuse `formatTime` when no date is selected. */
+const DATE_ZERO = new Date(2000, 0, 1, 0, 0, 0, 0);
+function extractTime(date) {
+  return formatTime(date ?? DATE_ZERO);
+}
+export function DatetimePickerField({
+  id,
+  value,
+  onChange,
+  min,
+  max,
+  placeholder,
+  formatDate,
+  showTime = false,
+  closeOnSelection
+}) {
+  const shouldCloseOnSelection = closeOnSelection ?? !showTime;
+  const [isOpen, setIsOpen] = useState(false);
+  const formatFn = formatDate ?? (showTime ? formatDatetimeForDisplay : formatDateForInput);
+  const formattedValue = value != null ? formatFn(value) : "";
+  const handleCalendarSelect = useCallback(selected => {
+    if (selected == null) {
+      onChange?.(null);
+      return;
+    }
+    const date = new Date(selected.getTime());
+    if (showTime && value != null) {
+      date.setHours(value.getHours(), value.getMinutes());
+    }
+    onChange?.(date);
+    if (shouldCloseOnSelection) {
+      setIsOpen(false);
+    }
+  }, [onChange, showTime, value, shouldCloseOnSelection]);
+  const handleTimeChange = useCallback(timeString => {
+    const [hoursStr, minutesStr] = timeString.split(":");
+    const hours = parseInt(hoursStr ?? "0", 10);
+    const minutes = parseInt(minutesStr ?? "0", 10);
+    const base = value != null ? new Date(value.getTime()) : new Date();
+    base.setHours(hours, minutes, 0, 0);
+    onChange?.(base);
+  }, [value, onChange]);
+  const displayText = formattedValue !== "" ? formattedValue : placeholder ?? "";
+  const hasValue = formattedValue !== "";
+  const timeValue = extractTime(value);
+  const footer = useMemo(() => showTime ? /*#__PURE__*/React.createElement("div", {
+    className: styles.timeFooter
+  }, /*#__PURE__*/React.createElement(Input, {
+    type: "time",
+    value: timeValue,
+    onValueChange: handleTimeChange,
+    className: styles.timeInput,
+    "aria-label": "Time"
+  })) : undefined, [showTime, timeValue, handleTimeChange]);
+  return /*#__PURE__*/React.createElement(Popover.Root, {
+    open: isOpen,
+    onOpenChange: setIsOpen
+  }, /*#__PURE__*/React.createElement(Popover.Trigger, {
+    id: id,
+    className: classnames(styles.triggerButton, !hasValue && styles.triggerButtonPlaceholder),
+    "aria-label": hasValue ? undefined : "Select date"
+  }, displayText), /*#__PURE__*/React.createElement(Popover.Portal, null, /*#__PURE__*/React.createElement(Popover.Positioner, {
+    sideOffset: 4
+  }, /*#__PURE__*/React.createElement(Popover.Popup, {
+    className: styles.popover
+  }, /*#__PURE__*/React.createElement(LazyDateCalendar, {
+    dateSelected: value ?? undefined,
+    onSelect: handleCalendarSelect,
+    min: min,
+    max: max,
+    footer: footer
+  })))));
+}
+//# sourceMappingURL=DatetimePickerField.js.map

package/build/browser/action-form/fields/DatetimePickerField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatetimePickerField.js","names":["Input","Popover","classnames","React","useCallback","useMemo","useState","formatDateForInput","formatDatetimeForDisplay","formatTime","styles","LazyDateCalendar","DATE_ZERO","Date","extractTime","date","DatetimePickerField","id","value","onChange","min","max","placeholder","formatDate","showTime","closeOnSelection","shouldCloseOnSelection","isOpen","setIsOpen","formatFn","formattedValue","handleCalendarSelect","selected","getTime","setHours","getHours","getMinutes","handleTimeChange","timeString","hoursStr","minutesStr","split","hours","parseInt","minutes","base","displayText","hasValue","timeValue","footer","createElement","className","timeFooter","type","onValueChange","timeInput","undefined","Root","open","onOpenChange","Trigger","triggerButton","triggerButtonPlaceholder","Portal","Positioner","sideOffset","Popup","popover","dateSelected","onSelect"],"sources":["DatetimePickerField.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Input } from \"@base-ui/react/input\";\nimport { Popover } from \"@base-ui/react/popover\";\nimport classnames from \"classnames\";\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport {\n  formatDateForInput,\n  formatDatetimeForDisplay,\n  formatTime,\n} from \"../../shared/dateUtils.js\";\nimport type { DatetimePickerFieldProps } from \"../FormFieldApi.js\";\nimport styles from \"./DatetimePickerField.module.css\";\nimport { LazyDateCalendar } from \"./LazyDateCalendar.js\";\n\n/** Midnight fallback so `extractTime` can reuse `formatTime` when no date is selected. */\nconst DATE_ZERO = new Date(2000, 0, 1, 0, 0, 0, 0);\n\nfunction extractTime(date: Date | null): string {\n  return formatTime(date ?? DATE_ZERO);\n}\n\nexport function DatetimePickerField({\n  id,\n  value,\n  onChange,\n  min,\n  max,\n  placeholder,\n  formatDate,\n  showTime = false,\n  closeOnSelection,\n}: DatetimePickerFieldProps): React.ReactElement {\n  const shouldCloseOnSelection = closeOnSelection ?? !showTime;\n  const [isOpen, setIsOpen] = useState(false);\n\n  const formatFn = formatDate\n    ?? (showTime ? formatDatetimeForDisplay : formatDateForInput);\n\n  const formattedValue = value != null ? formatFn(value) : \"\";\n\n  const handleCalendarSelect = useCallback(\n    (selected: Date | undefined) => {\n      if (selected == null) {\n        onChange?.(null);\n        return;\n      }\n\n      const date = new Date(selected.getTime());\n      if (showTime && value != null) {\n        date.setHours(value.getHours(), value.getMinutes());\n      }\n\n      onChange?.(date);\n\n      if (shouldCloseOnSelection) {\n        setIsOpen(false);\n      }\n    },\n    [onChange, showTime, value, shouldCloseOnSelection],\n  );\n\n  const handleTimeChange = useCallback(\n    (timeString: string) => {\n      const [hoursStr, minutesStr] = timeString.split(\":\");\n      const hours = parseInt(hoursStr ?? \"0\", 10);\n      const minutes = parseInt(minutesStr ?? \"0\", 10);\n\n      const base = value != null ? new Date(value.getTime()) : new Date();\n      base.setHours(hours, minutes, 0, 0);\n\n      onChange?.(base);\n    },\n    [value, onChange],\n  );\n\n  const displayText = formattedValue !== \"\"\n    ? formattedValue\n    : (placeholder ?? \"\");\n  const hasValue = formattedValue !== \"\";\n\n  const timeValue = extractTime(value);\n  const footer = useMemo(\n    () =>\n      showTime\n        ? (\n          <div className={styles.timeFooter}>\n            <Input\n              type=\"time\"\n              value={timeValue}\n              onValueChange={handleTimeChange}\n              className={styles.timeInput}\n              aria-label=\"Time\"\n            />\n          </div>\n        )\n        : undefined,\n    [showTime, timeValue, handleTimeChange],\n  );\n\n  return (\n    <Popover.Root open={isOpen} onOpenChange={setIsOpen}>\n      <Popover.Trigger\n        id={id}\n        className={classnames(\n          styles.triggerButton,\n          !hasValue && styles.triggerButtonPlaceholder,\n        )}\n        aria-label={hasValue ? undefined : \"Select date\"}\n      >\n        {displayText}\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner sideOffset={4}>\n          <Popover.Popup className={styles.popover}>\n            <LazyDateCalendar\n              dateSelected={value ?? undefined}\n              onSelect={handleCalendarSelect}\n              min={min}\n              max={max}\n              footer={footer}\n            />\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/build/browser/action-form/fields/DatetimePickerField.module.css

@@ -0,0 +1,66 @@
+/* DatetimePickerField — button trigger + popover + time input */
+
+/* Trigger button — styled to look like an input */
+.triggerButton {
+  width: 100%;
+  text-align: left;
+  font-family: var(--osdk-datetime-input-font-family);
+  font-size: var(--osdk-datetime-input-font-size);
+  padding: var(--osdk-datetime-input-padding);
+  border: var(--osdk-datetime-input-border);
+  border-radius: var(--osdk-datetime-input-border-radius);
+  background: var(--osdk-datetime-input-bg);
+  color: var(--osdk-datetime-input-color);
+  cursor: pointer;
+  box-sizing: border-box;
+
+  &:focus-visible {
+    border-color: var(--osdk-datetime-input-focus-border-color);
+    outline: var(--osdk-datetime-input-focus-outline);
+    outline-offset: var(--osdk-datetime-input-focus-outline-offset);
+  }
+}
+
+.triggerButtonPlaceholder {
+  color: var(--osdk-datetime-input-placeholder-color, currentColor);
+  opacity: var(--osdk-datetime-input-placeholder-opacity);
+}
+
+/* Popover */
+.popover {
+  background: var(--osdk-datetime-popover-bg);
+  padding: var(--osdk-datetime-popover-padding);
+  z-index: var(--osdk-datetime-popover-z-index);
+  border: var(--osdk-datetime-popover-border);
+  border-radius: var(--osdk-datetime-popover-border-radius);
+}
+
+/* Time input footer — negative horizontal margin counters the popover padding
+   so the border-top spans the full width of the popover. */
+.timeFooter {
+  padding-top: var(--osdk-datetime-time-padding-top);
+  padding-left: var(--osdk-datetime-popover-padding);
+  padding-right: var(--osdk-datetime-popover-padding);
+  border-top: var(--osdk-datetime-time-border-top);
+  margin-top: var(--osdk-datetime-time-padding-top);
+  margin-left: calc(var(--osdk-datetime-popover-padding) * -1);
+  margin-right: calc(var(--osdk-datetime-popover-padding) * -1);
+}
+
+.timeInput {
+  width: 100%;
+  font-family: var(--osdk-datetime-input-font-family);
+  font-size: var(--osdk-datetime-input-font-size);
+  padding: var(--osdk-datetime-input-padding);
+  border: var(--osdk-datetime-input-border);
+  border-radius: var(--osdk-datetime-input-border-radius);
+  background: var(--osdk-datetime-input-bg);
+  color: var(--osdk-datetime-input-color);
+  box-sizing: border-box;
+
+  &:focus {
+    border-color: var(--osdk-datetime-input-focus-border-color);
+    outline: var(--osdk-datetime-input-focus-outline);
+    outline-offset: var(--osdk-datetime-input-focus-outline-offset);
+  }
+}

package/build/browser/action-form/fields/DatetimePickerField.module.css.js

@@ -0,0 +1,10 @@
+// CSS Module proxy for DatetimePickerField.module.css
+const styles = {
+  "triggerButton": "DatetimePickerField-module__triggerButton___De1vGdXb",
+  "triggerButtonPlaceholder": "DatetimePickerField-module__triggerButtonPlaceholder___-sYBtL8e",
+  "popover": "DatetimePickerField-module__popover___t7Mh7CsI",
+  "timeFooter": "DatetimePickerField-module__timeFooter___A4P-iuSf",
+  "timeInput": "DatetimePickerField-module__timeInput___Qt1b6wEt"
+};
+
+export default styles;

package/build/browser/action-form/fields/FormFieldRenderer.js

@@ -17,6 +17,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 
 import React, { memo } from "react";
 import { FormField } from "../FormField.js";
+import { DatetimePickerField } from "./DatetimePickerField.js";
 import { DropdownField } from "./DropdownField.js";
 import { TextInputField } from "./TextInputField.js";
 const EMPTY_ITEMS = [];
@@ -64,9 +65,17 @@ function renderFieldComponent(fieldDefinition, value, onChange) {
           placeholder: fieldDefinition.placeholder
         }, dropdownProps));
       }
+    case "DATETIME_PICKER":
+      return /*#__PURE__*/React.createElement(DatetimePickerField, _extends({
+        id: fieldDefinition.fieldKey,
+        placeholder: fieldDefinition.placeholder
+        // TODO: Use coerceFieldValue
+        ,
+        value: value instanceof Date ? value : null,
+        onChange: onChange
+      }, fieldDefinition.fieldComponentProps));
     case "NUMBER_INPUT":
     case "RADIO_BUTTONS":
-    case "DATETIME_PICKER":
     case "FILE_PICKER":
     case "OBJECT_SET":
     case "CUSTOM":