@osdk/react-components 0.12.0 → 0.13.0

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

@@ -1 +1 @@
-{"version":3,"file":"FormFieldApi.js","names":["EMPTY_RANGE"],"sources":["FormFieldApi.ts"],"sourcesContent":["/*\n * Copyright 2026 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  Osdk,\n} from \"@osdk/api\";\nimport type React from \"react\";\n\nexport type PortalContainer =\n  | HTMLElement\n  | ShadowRoot\n  | null\n  | React.RefObject<HTMLElement | ShadowRoot | null>;\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   */\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   * Accepts plain text or rich content (e.g. JSX with links or formatting).\n   * Rendered as a tooltip icon next to the label by default, or below the\n   * label when helperTextPlacement is \"bottom\".\n   */\n  helperText?: React.ReactNode;\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 customize error messages when a built-in validation rule fails.\n   * Receives a discriminated union with the constraint data (e.g., the min value\n   * that was exceeded) so the message can reference the threshold.\n   *\n   * Return a string to override the default message, or `undefined` to keep it.\n   */\n  onValidationError?: (error: ValidationError) => string | undefined;\n\n  /**\n   * Additional function to validate the field.\n   *\n   * Return `undefined` if valid, or an error message string if invalid.\n   */\n  validate?: (value: FieldValueType<Q, K>) => Promise<string | undefined>;\n\n  /**\n   * The component props for the form field.\n   * Excludes runtime props (value, onChange) which are managed by ActionForm.\n   */\n  fieldComponentProps: Omit<\n    FormFieldPropsByType[\n      ValidFormFieldForPropertyType<\n        FieldDescriptorType<Q, K>\n      >\n    ],\n    FormManagedProps<\n      ValidFormFieldForPropertyType<FieldDescriptorType<Q, K>>\n    >\n  >;\n}\n\n/**\n * A discriminated union describing which validation rule failed and the\n * constraint data the user needs to build a meaningful error message.\n */\nexport type ValidationError =\n  | { type: \"required\" }\n  | { type: \"min\"; min: number | Date }\n  | { type: \"max\"; max: number | Date }\n  | { type: \"minLength\"; minLength: number }\n  | { type: \"maxLength\"; maxLength: number }\n  | { type: \"maxSize\"; maxSize: number }\n  | { type: \"validate\"; message: string };\n\n/**\n * Maps field types to their corresponding props\n */\nexport interface FormFieldPropsByType {\n  DATE_RANGE_INPUT: DateRangeInputFieldProps;\n  DATETIME_PICKER: DatetimePickerFieldProps;\n  DROPDOWN: DropdownFieldProps<unknown, boolean>;\n  FILE_PICKER: FilePickerProps;\n  NUMBER_INPUT: NumberInputFieldProps;\n  OBJECT_SELECT: ObjectSelectFieldProps<ObjectTypeDefinition>;\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  /**\n   * Formats a Date for display in the input field when not editing.\n   * When typing, the input shows the parsable format (YYYY-MM-DD or YYYY-MM-DD HH:mm).\n   * Provide a matching `parseDate` if using a custom format.\n   */\n  formatDate?: (date: Date) => string;\n\n  /**\n   * Parses a user-typed string back into a Date.\n   * Must be the inverse of `formatDate` — if `formatDate(d)` produces string `s`,\n   * then `parseDate(s)` must return an equivalent Date.\n   * When omitted, defaults to parsing \"YYYY-MM-DD\" (date-only) or \"YYYY-MM-DD HH:mm\" (with time).\n   */\n  parseDate?: (text: string) => Date | undefined;\n\n  /**\n   * Ref forwarded to the portal container element.\n   * Used to track portaled content for click-outside detection.\n   */\n  portalRef?: React.Ref<HTMLDivElement>;\n\n  /**\n   * Element that receives the date picker portal. Use this when rendering\n   * inside modal dialogs so popovers stay in the dialog's stacking and focus\n   * context instead of being appended directly to document.body.\n   */\n  portalContainer?: PortalContainer;\n}\n\n/**\n * A date range represented as a start/end tuple.\n * Either element may be `null` when the range is partially selected.\n */\nexport type DateRange = readonly [Date | null, Date | null];\n\n/** Default empty range — both bounds are null. */\nexport const EMPTY_RANGE: DateRange = [null, null];\n\n/**\n * Date range input field props.\n *\n * Renders two text inputs (start / end) with a shared calendar popover\n * that supports range selection.\n */\nexport interface DateRangeInputFieldProps\n  extends BaseFormFieldProps<DateRange>\n{\n  /** The earliest selectable date. */\n  min?: Date;\n\n  /** The latest selectable date. */\n  max?: Date;\n\n  /** Whether to show time pickers for both dates. */\n  showTime?: boolean;\n\n  /** Placeholder text for the start date input. */\n  placeholderStart?: string;\n\n  /** Placeholder text for the end date input. */\n  placeholderEnd?: string;\n\n  /** Whether to allow start and end on the same day. @default true */\n  allowSingleDayRange?: boolean;\n\n  /** Formats a Date for display. Defaults to \"YYYY-MM-DD\". */\n  formatDate?: (date: Date) => string;\n\n  /** Parses a user-typed string back into a Date. */\n  parseDate?: (text: string) => Date | undefined;\n\n  /**\n   * Element that receives the date range picker portal. Use this when rendering\n   * inside modal dialogs so popovers stay in the dialog's stacking and focus\n   * context instead of being appended directly to document.body.\n   */\n  portalContainer?: PortalContainer;\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  /**\n   * Ref forwarded to the portal container element.\n   * Used to track portaled content for click-outside detection.\n   */\n  portalRef?: React.Ref<HTMLDivElement>;\n\n  /**\n   * Element that receives the dropdown portal. Use this when rendering inside\n   * modal dialogs so popups stay in the dialog's stacking and focus context\n   * instead of being appended directly to document.body.\n   */\n  portalContainer?: PortalContainer;\n\n  /**\n   * Controlled search input value. Must be provided together with `onQueryChange`.\n   */\n  query?: string;\n\n  /**\n   * Callback when the search input value changes.\n   * Can be used standalone as an event listener or together with `query`\n   * for fully controlled search state.\n   */\n  onQueryChange?: (query: string) => void;\n\n  /**\n   * When true, disables the combobox's built-in client-side filtering.\n   * Use when items are already filtered server-side (e.g. via `onQueryChange`).\n   *\n   * @default false\n   */\n  disableClientSideFiltering?: boolean;\n\n  /**\n   * Status message rendered below the search input and above the item list\n   * inside the popup. Use for loading/error/empty messages.\n   */\n  popupStatus?: React.ReactNode;\n\n  /**\n   * A React node to render after the item list.\n   * Use for infinite scroll sentinels, \"load more\" buttons, etc.\n   */\n  trailingItem?: React.ReactNode;\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   * The text displayed when no file is selected.\n   *\n   * @default \"No file chosen\"\n   */\n  text?: string;\n\n  /**\n   * The text displayed on the browse button.\n   *\n   * @default \"Browse\"\n   */\n  buttonText?: string;\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  placeholder?: string;\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 BaseFormFieldProps<number> {\n  /**\n   * Minimum allowed value.\n   */\n  min?: number;\n\n  /**\n   * Maximum allowed value.\n   */\n  max?: number;\n\n  /**\n   * Step increment for the input. Used by the stepper buttons and ArrowUp/ArrowDown keyboard stepping.\n   *\n   * @default 1\n   */\n  step?: number;\n\n  /**\n   * Placeholder text shown when the input is empty.\n   */\n  placeholder?: string;\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   * Values are compared by reference equality (`===`). When options contain\n   * non-primitive values, pass the same object references for `value` and\n   * the corresponding option entry.\n   */\n  options: Option<V>[];\n\n  /**\n   * Controls the layout direction of the radio buttons.\n   *\n   * - `\"vertical\"` (default): options are stacked in a column\n   * - `\"horizontal\"`: options are laid out in a row, wrapping when needed\n   */\n  orientation?: \"horizontal\" | \"vertical\";\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 Pick<BaseFormFieldProps<ObjectSet<T>>, \"id\" | \"value\">\n{\n  /**\n   * Message displayed when no object set is provided.\n   *\n   * @default \"Object set is not defined\"\n   */\n  emptyMessage?: string;\n}\n\n/**\n * Object select field props for selecting object instances from the ontology.\n * Used for action parameters that accept a single object or multiple objects.\n *\n * Extends DropdownFieldProps with props that ObjectSelectField\n * manages internally (items, search, filtering) omitted from the public surface.\n */\nexport interface ObjectSelectFieldProps<\n  Q extends ObjectTypeDefinition = ObjectTypeDefinition,\n> extends\n  Omit<\n    DropdownFieldProps<Osdk.Instance<Q>>,\n    | \"items\"\n    | \"itemToStringLabel\"\n    | \"itemToKey\"\n    | \"isItemEqual\"\n    | \"isSearchable\"\n    | \"query\"\n    | \"onQueryChange\"\n    | \"disableClientSideFiltering\"\n    | \"renderItemList\"\n  >\n{\n  /**\n   * The object type definition to search within.\n   */\n  objectType: Q;\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 validation error message for this field, if any.\n   * When set, the field should display a visual error state.\n   */\n  error?: string;\n\n  /**\n   * The value of the form field\n   */\n  value: V | null;\n\n  /**\n   * The default value of the form field.\n   */\n  defaultValue?: V;\n\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  | \"DATE_RANGE_INPUT\"\n  | \"DATETIME_PICKER\"\n  | \"DROPDOWN\"\n  | \"FILE_PICKER\"\n  | \"NUMBER_INPUT\"\n  | \"OBJECT_SELECT\"\n  | \"OBJECT_SET\"\n  | \"RADIO_BUTTONS\"\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 * Props managed by form state infrastructure (FieldBridge / RHF).\n * Fields with onChange participate in form state → value and onChange are managed\n * externally. Read-only fields (no onChange, e.g. ObjectSetField) keep value in\n * fieldComponentProps so it bypasses form state cloning.\n */\ntype FormManagedProps<K extends FieldComponent> = \"onChange\" extends\n  keyof FormFieldPropsByType[K] ? \"value\" | \"onChange\"\n  : \"onChange\";\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    isRequired?: boolean;\n    placeholder?: string;\n    helperText?: React.ReactNode;\n    helperTextPlacement?: \"bottom\" | \"tooltip\";\n    validate?: (value: unknown) => Promise<string | undefined>;\n    onValidationError?: (error: ValidationError) => string | undefined;\n    fieldComponentProps: Omit<FormFieldPropsByType[K], FormManagedProps<K>>;\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 { type: \"objectSet\" } ? \"OBJECT_SET\"\n    : P extends { type: \"object\" } ? \"OBJECT_SELECT\"\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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAoBA;AACA;AACA;;AAuFA;AACA;AACA;AACA;;AAUA;AACA;AACA;;AAeA;AACA;AACA;AACA;AACA;;AA2DA;AACA;AACA;AACA;;AAGA;AACA,OAAO,MAAMA,WAAsB,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;;AAElD;AACA;AACA;AACA;AACA;AACA;;AAoCA;AACA;AACA;;AAwHA;AACA;AACA;;AAqCA;AACA;AACA;;AAyBA;AACA;AACA;;AAoBA;AACA;AACA;;AAMA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;;AAuBA;AACA;AACA;;AAkDA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;;AAgBA;AACA;AACA;;AAMA;AACA;AACA;;AAcA;AACA;AACA;AACA;;AAoBA;AACA;AACA;AACA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAiBA;AACA;AACA","ignoreList":[]}
+{"version":3,"file":"FormFieldApi.js","names":["EMPTY_RANGE"],"sources":["FormFieldApi.ts"],"sourcesContent":["/*\n * Copyright 2026 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  Osdk,\n} from \"@osdk/api\";\nimport type React from \"react\";\n\nexport type PortalContainer =\n  | HTMLElement\n  | ShadowRoot\n  | null\n  | React.RefObject<HTMLElement | ShadowRoot | null>;\n\n/**\n * A form field definition specifies configuration for a single field.\n * Implemented as a distributed mapped type so `fieldComponent` narrows\n * `fieldComponentProps` to the matching component prop type.\n */\nexport type FormFieldDefinition<\n  Q extends ActionDefinition<unknown>,\n  K extends FieldKey<Q> = FieldKey<Q>,\n> = K extends unknown ? {\n    // Distribute over each field key so a field's key, value type, and allowed\n    // components stay correlated when K is the default union of all keys.\n    [C in ValidFormFieldForPropertyType<FieldDescriptorType<Q, K>>]: {\n      /**\n       * The field's unique key\n       */\n      fieldKey: K;\n\n      /**\n       * Display label for the field\n       */\n      label: string;\n\n      /**\n       * Default value of the field\n       */\n      defaultValue?: FieldValueType<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       * Accepts plain text or rich content (e.g. JSX with links or formatting).\n       * Rendered as a tooltip icon next to the label by default, or below the\n       * label when helperTextPlacement is \"bottom\".\n       */\n      helperText?: React.ReactNode;\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 customize error messages when a built-in validation rule fails.\n       * Receives a discriminated union with the constraint data (e.g., the min value\n       * that was exceeded) so the message can reference the threshold.\n       *\n       * Return a string to override the default message, or `undefined` to keep it.\n       */\n      onValidationError?: (error: ValidationError) => string | undefined;\n\n      /**\n       * Additional function to validate the field.\n       *\n       * Return `undefined` if valid, or an error message string if invalid.\n       */\n      validate?: (\n        value: FieldValueType<Q, K>,\n      ) => Promise<string | undefined>;\n\n      /**\n       * The form field component type to render\n       */\n      fieldComponent: C;\n\n      /**\n       * The component props for the form field.\n       * Excludes runtime props (value, onChange) which are managed by ActionForm.\n       */\n      fieldComponentProps: Omit<\n        FormFieldPropsByType[C],\n        FormManagedProps<C>\n      >;\n    };\n  }[ValidFormFieldForPropertyType<FieldDescriptorType<Q, K>>]\n  : never;\n\n/**\n * A discriminated union describing which validation rule failed and the\n * constraint data the user needs to build a meaningful error message.\n */\nexport type ValidationError =\n  | { type: \"required\" }\n  | { type: \"min\"; min: number | Date }\n  | { type: \"max\"; max: number | Date }\n  | { type: \"minLength\"; minLength: number }\n  | { type: \"maxLength\"; maxLength: number }\n  | { type: \"maxSize\"; maxSize: number }\n  | { type: \"validate\"; message: string };\n\n/**\n * Maps field types to their corresponding props\n */\nexport interface FormFieldPropsByType {\n  DATE_RANGE_INPUT: DateRangeInputFieldProps;\n  DATETIME_PICKER: DatetimePickerFieldProps;\n  DROPDOWN: DropdownFieldProps<unknown, boolean>;\n  FILE_PICKER: FilePickerProps;\n  NUMBER_INPUT: NumberInputFieldProps;\n  OBJECT_SELECT: ObjectSelectFieldProps<ObjectTypeDefinition>;\n  OBJECT_SET: ObjectSetFieldProps<ObjectTypeDefinition>;\n  RADIO_BUTTONS: RadioButtonsFieldProps<unknown>;\n  SWITCH: SwitchFieldProps;\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  /**\n   * Formats a Date for display in the input field when not editing.\n   * When typing, the input shows the parsable format (YYYY-MM-DD or YYYY-MM-DD HH:mm).\n   * Provide a matching `parseDate` if using a custom format.\n   */\n  formatDate?: (date: Date) => string;\n\n  /**\n   * Parses a user-typed string back into a Date.\n   * Must be the inverse of `formatDate` — if `formatDate(d)` produces string `s`,\n   * then `parseDate(s)` must return an equivalent Date.\n   * When omitted, defaults to parsing \"YYYY-MM-DD\" (date-only) or \"YYYY-MM-DD HH:mm\" (with time).\n   */\n  parseDate?: (text: string) => Date | undefined;\n\n  /**\n   * Ref forwarded to the portal container element.\n   * Used to track portaled content for click-outside detection.\n   */\n  portalRef?: React.Ref<HTMLDivElement>;\n\n  /**\n   * Element that receives the date picker portal. Use this when rendering\n   * inside modal dialogs so popovers stay in the dialog's stacking and focus\n   * context instead of being appended directly to document.body.\n   */\n  portalContainer?: PortalContainer;\n}\n\n/**\n * A date range represented as a start/end tuple.\n * Either element may be `null` when the range is partially selected.\n */\nexport type DateRange = readonly [Date | null, Date | null];\n\n/** Default empty range — both bounds are null. */\nexport const EMPTY_RANGE: DateRange = [null, null];\n\n/**\n * Date range input field props.\n *\n * Renders two text inputs (start / end) with a shared calendar popover\n * that supports range selection.\n */\nexport interface DateRangeInputFieldProps\n  extends BaseFormFieldProps<DateRange>\n{\n  /** The earliest selectable date. */\n  min?: Date;\n\n  /** The latest selectable date. */\n  max?: Date;\n\n  /** Whether to show time pickers for both dates. */\n  showTime?: boolean;\n\n  /** Placeholder text for the start date input. */\n  placeholderStart?: string;\n\n  /** Placeholder text for the end date input. */\n  placeholderEnd?: string;\n\n  /** Whether to allow start and end on the same day. @default true */\n  allowSingleDayRange?: boolean;\n\n  /** Formats a Date for display. Defaults to \"YYYY-MM-DD\". */\n  formatDate?: (date: Date) => string;\n\n  /** Parses a user-typed string back into a Date. */\n  parseDate?: (text: string) => Date | undefined;\n\n  /**\n   * Element that receives the date range picker portal. Use this when rendering\n   * inside modal dialogs so popovers stay in the dialog's stacking and focus\n   * context instead of being appended directly to document.body.\n   */\n  portalContainer?: PortalContainer;\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  /**\n   * Ref forwarded to the portal container element.\n   * Used to track portaled content for click-outside detection.\n   */\n  portalRef?: React.Ref<HTMLDivElement>;\n\n  /**\n   * Element that receives the dropdown portal. Use this when rendering inside\n   * modal dialogs so popups stay in the dialog's stacking and focus context\n   * instead of being appended directly to document.body.\n   */\n  portalContainer?: PortalContainer;\n\n  /**\n   * Controlled search input value. Must be provided together with `onQueryChange`.\n   */\n  query?: string;\n\n  /**\n   * Callback when the search input value changes.\n   * Can be used standalone as an event listener or together with `query`\n   * for fully controlled search state.\n   */\n  onQueryChange?: (query: string) => void;\n\n  /**\n   * When true, disables the combobox's built-in client-side filtering.\n   * Use when items are already filtered server-side (e.g. via `onQueryChange`).\n   *\n   * @default false\n   */\n  disableClientSideFiltering?: boolean;\n\n  /**\n   * Status message rendered below the search input and above the item list\n   * inside the popup. Use for loading/error/empty messages.\n   */\n  popupStatus?: React.ReactNode;\n\n  /**\n   * A React node to render after the item list.\n   * Use for infinite scroll sentinels, \"load more\" buttons, etc.\n   */\n  trailingItem?: React.ReactNode;\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   * The text displayed when no file is selected.\n   *\n   * @default \"No file chosen\"\n   */\n  text?: string;\n\n  /**\n   * The text displayed on the browse button.\n   *\n   * @default \"Browse\"\n   */\n  buttonText?: string;\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  placeholder?: string;\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 BaseFormFieldProps<number> {\n  /**\n   * Minimum allowed value.\n   */\n  min?: number;\n\n  /**\n   * Maximum allowed value.\n   */\n  max?: number;\n\n  /**\n   * Step increment for the input. Used by the stepper buttons and ArrowUp/ArrowDown keyboard stepping.\n   *\n   * @default 1\n   */\n  step?: number;\n\n  /**\n   * Placeholder text shown when the input is empty.\n   */\n  placeholder?: string;\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   * Values are compared by reference equality (`===`). When options contain\n   * non-primitive values, pass the same object references for `value` and\n   * the corresponding option entry.\n   */\n  options: Option<V>[];\n\n  /**\n   * Controls the layout direction of the radio buttons.\n   *\n   * - `\"vertical\"` (default): options are stacked in a column\n   * - `\"horizontal\"`: options are laid out in a row, wrapping when needed\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\n/**\n * Switch field props for boolean values.\n */\nexport type SwitchFieldProps = BaseFormFieldProps<boolean>;\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 Pick<BaseFormFieldProps<ObjectSet<T>>, \"id\" | \"value\">\n{\n  /**\n   * Message displayed when no object set is provided.\n   *\n   * @default \"Object set is not defined\"\n   */\n  emptyMessage?: string;\n}\n\n/**\n * Object select field props for selecting object instances from the ontology.\n * Used for action parameters that accept a single object or multiple objects.\n *\n * Extends DropdownFieldProps with props that ObjectSelectField\n * manages internally (items, search, filtering) omitted from the public surface.\n */\nexport interface ObjectSelectFieldProps<\n  Q extends ObjectTypeDefinition = ObjectTypeDefinition,\n> extends\n  Omit<\n    DropdownFieldProps<Osdk.Instance<Q>>,\n    | \"items\"\n    | \"itemToStringLabel\"\n    | \"itemToKey\"\n    | \"isItemEqual\"\n    | \"isSearchable\"\n    | \"query\"\n    | \"onQueryChange\"\n    | \"disableClientSideFiltering\"\n    | \"renderItemList\"\n  >\n{\n  /**\n   * The object type definition to search within.\n   */\n  objectType: Q;\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 validation error message for this field, if any.\n   * When set, the field should display a visual error state.\n   */\n  error?: string;\n\n  /**\n   * The value of the form field\n   */\n  value: V | null;\n\n  /**\n   * The default value of the form field.\n   */\n  defaultValue?: V;\n\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  | \"DATE_RANGE_INPUT\"\n  | \"DATETIME_PICKER\"\n  | \"DROPDOWN\"\n  | \"FILE_PICKER\"\n  | \"NUMBER_INPUT\"\n  | \"OBJECT_SELECT\"\n  | \"OBJECT_SET\"\n  | \"RADIO_BUTTONS\"\n  | \"SWITCH\"\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 * Props managed by form state infrastructure (FieldBridge / RHF).\n * Fields with onChange participate in form state → value and onChange are managed\n * externally. Read-only fields (no onChange, e.g. ObjectSetField) keep value in\n * fieldComponentProps so it bypasses form state cloning.\n */\ntype FormManagedProps<K extends FieldComponent> = \"onChange\" extends\n  keyof FormFieldPropsByType[K] ? \"value\" | \"onChange\"\n  : \"onChange\";\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    isRequired?: boolean;\n    placeholder?: string;\n    helperText?: React.ReactNode;\n    helperTextPlacement?: \"bottom\" | \"tooltip\";\n    validate?: (value: unknown) => Promise<string | undefined>;\n    onValidationError?: (error: ValidationError) => string | undefined;\n    fieldComponentProps: Omit<FormFieldPropsByType[K], FormManagedProps<K>>;\n  };\n}[FieldComponent];\n\n/**\n * Gets valid form field types for a given property type\n */\nexport type ValidFormFieldForPropertyType<P extends FieldDescriptorType> =\n  | \"CUSTOM\"\n  | (P extends { type: \"objectSet\" } ? \"OBJECT_SET\"\n    : P extends { type: \"object\" } ? \"OBJECT_SELECT\"\n    : P extends \"mediaReference\" | \"attachment\" ? \"FILE_PICKER\"\n    : P extends \"boolean\" ? \"RADIO_BUTTONS\" | \"DROPDOWN\" | \"SWITCH\"\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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAoBA;AACA;AACA;AACA;AACA;;AAwFA;AACA;AACA;AACA;;AAUA;AACA;AACA;;AAgBA;AACA;AACA;AACA;AACA;;AA2DA;AACA;AACA;AACA;;AAGA;AACA,OAAO,MAAMA,WAAsB,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;;AAElD;AACA;AACA;AACA;AACA;AACA;;AAoCA;AACA;AACA;;AAwHA;AACA;AACA;;AAqCA;AACA;AACA;;AAyBA;AACA;AACA;;AAoBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;;AAuBA;AACA;AACA;;AAkDA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;;AAgBA;AACA;AACA;;AAMA;AACA;AACA;;AAeA;AACA;AACA;AACA;;AAoBA;AACA;AACA;AACA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAiBA;AACA;AACA","ignoreList":[]}

package/build/esm/action-form/FormHeader.module.css

@@ -17,8 +17,8 @@
 .osdkFormHeader {
   margin: 0;
   padding-block: var(--osdk-form-header-block-padding);
-  padding-inline: var(--osdk-form-header-inline-padding);
-  border-bottom: var(--osdk-surface-border-width) solid
+  padding-inline: var(--osdk-form-content-padding-inline);
+  border-block-end: var(--osdk-surface-border-width) solid
     var(--osdk-form-header-border-color);
   font-size: var(--osdk-form-header-font-size);
   font-weight: var(--osdk-form-header-font-weight);

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

@@ -16,8 +16,10 @@
 
 import { ChevronLeft, ChevronRight } from "@blueprintjs/icons";
 import classnames from "classnames";
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { DayPicker } from "react-day-picker";
+import { ActionButton } from "../../base-components/action-button/ActionButton.js";
+import { isDateInRange } from "../../shared/dateUtils.js";
 import { buildDisabledMatchers, DEFAULT_FROM_YEAR, DEFAULT_TO_YEAR } from "./calendarShared.js";
 import styles from "./DateCalendar.module.css";
 export const CLASS_NAMES = {
@@ -63,22 +65,51 @@ export const CALENDAR_COMPONENTS = {
 export default function DateCalendar({
   dateSelected,
   onSelect,
+  onClear,
+  month,
+  onMonthChange,
   min,
   max,
-  footer
+  footer,
+  todayButtonText = "Today",
+  clearButtonText = "Clear"
 }) {
   const disabled = useMemo(() => buildDisabledMatchers(min, max), [min, max]);
   const fromYear = min != null ? min.getFullYear() : DEFAULT_FROM_YEAR;
   const toYear = max != null ? max.getFullYear() : DEFAULT_TO_YEAR;
+  const today = getLocalToday();
+  const isTodaySelectable = isDateInRange(today, min, max);
+  const handleTodayClick = useCallback(() => {
+    if (!isTodaySelectable) {
+      return;
+    }
+    onSelect(getLocalToday());
+  }, [isTodaySelectable, onSelect]);
+  const calendarFooter = /*#__PURE__*/React.createElement(React.Fragment, null, footer != null && /*#__PURE__*/React.createElement("div", {
+    className: styles.calendarTimeFooter
+  }, footer), /*#__PURE__*/React.createElement("div", {
+    className: styles.calendarActionBar
+  }, /*#__PURE__*/React.createElement(ActionButton, {
+    type: "button",
+    appearance: "minimal",
+    disabled: !isTodaySelectable,
+    onClick: handleTodayClick
+  }, todayButtonText), onClear != null && /*#__PURE__*/React.createElement(ActionButton, {
+    type: "button",
+    appearance: "minimal",
+    onClick: onClear
+  }, clearButtonText)));
   return /*#__PURE__*/React.createElement(DayPicker, {
     mode: "single",
     selected: dateSelected,
     onSelect: onSelect,
+    month: month,
+    onMonthChange: onMonthChange,
     disabled: disabled,
     defaultMonth: dateSelected,
     classNames: CLASS_NAMES,
     components: CALENDAR_COMPONENTS,
-    footer: footer
+    footer: calendarFooter
     // Render month/year as dropdown selects + prev/next arrows,
     // so users can jump directly to any month/year without paging.
     ,
@@ -91,4 +122,11 @@ export default function DateCalendar({
     fixedWeeks: true
   });
 }
+function getLocalToday() {
+  const today = new Date();
+  // Date-only picker actions should match calendar-day selection, which emits
+  // local midnight rather than the current wall-clock time.
+  today.setHours(0, 0, 0, 0);
+  return today;
+}
 //# sourceMappingURL=DateCalendar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateCalendar.js","names":["ChevronLeft","ChevronRight","classnames","React","useMemo","DayPicker","buildDisabledMatchers","DEFAULT_FROM_YEAR","DEFAULT_TO_YEAR","styles","CLASS_NAMES","root","calendar","months","calendarMonths","table","calendarMonthGrid","head_cell","calendarWeekday","cell","calendarDay","day","calendarDayButton","day_selected","calendarSelected","day_today","calendarToday","day_outside","calendarOutside","day_disabled","calendarDisabled","day_hidden","calendarHidden","nav","calendarNav","nav_button_previous","calendarNavButton","calendarNavPrev","nav_button_next","calendarNavNext","caption","calendarMonthCaption","caption_label","calendarVhidden","caption_dropdowns","calendarCaptionDropdowns","dropdown","calendarDropdown","dropdown_month","dropdown_year","nav_icon","calendarChevron","vhidden","tfoot","calendarFooter","NAV_ICON_SIZE","IconLeft","createElement","size","IconRight","CALENDAR_COMPONENTS","DateCalendar","dateSelected","onSelect","min","max","footer","disabled","fromYear","getFullYear","toYear","mode","selected","defaultMonth","classNames","components","captionLayout","showOutsideDays","fixedWeeks"],"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 { ChevronLeft, ChevronRight } from \"@blueprintjs/icons\";\nimport classnames from \"classnames\";\nimport React, { useMemo } from \"react\";\nimport type { ClassNames } from \"react-day-picker\";\nimport { DayPicker } from \"react-day-picker\";\nimport {\n  buildDisabledMatchers,\n  DEFAULT_FROM_YEAR,\n  DEFAULT_TO_YEAR,\n} from \"./calendarShared.js\";\nimport styles from \"./DateCalendar.module.css\";\n\nexport const CLASS_NAMES: ClassNames = {\n  root: styles.calendar,\n  months: styles.calendarMonths,\n  table: styles.calendarMonthGrid,\n  head_cell: styles.calendarWeekday,\n  cell: styles.calendarDay,\n  day: styles.calendarDayButton,\n  day_selected: styles.calendarSelected,\n  day_today: styles.calendarToday,\n  day_outside: styles.calendarOutside,\n  day_disabled: styles.calendarDisabled,\n  day_hidden: styles.calendarHidden,\n  nav: styles.calendarNav,\n  nav_button_previous: classnames(\n    styles.calendarNavButton,\n    styles.calendarNavPrev,\n  ),\n  nav_button_next: classnames(styles.calendarNavButton, styles.calendarNavNext),\n  caption: styles.calendarMonthCaption,\n  caption_label: styles.calendarVhidden,\n  caption_dropdowns: styles.calendarCaptionDropdowns,\n  dropdown: styles.calendarDropdown,\n  dropdown_month: styles.calendarDropdown,\n  dropdown_year: styles.calendarDropdown,\n  nav_icon: styles.calendarChevron,\n  vhidden: styles.calendarVhidden,\n  tfoot: styles.calendarFooter,\n};\n\nconst NAV_ICON_SIZE = 12;\n\nfunction IconLeft(): React.ReactElement {\n  return <ChevronLeft size={NAV_ICON_SIZE} />;\n}\n\nfunction IconRight(): React.ReactElement {\n  return <ChevronRight size={NAV_ICON_SIZE} />;\n}\n\nexport const CALENDAR_COMPONENTS: {\n  IconLeft: () => React.ReactElement;\n  IconRight: () => React.ReactElement;\n} = { IconLeft, IconRight };\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(() => buildDisabledMatchers(min, max), [min, max]);\n\n  const fromYear = min != null ? min.getFullYear() : DEFAULT_FROM_YEAR;\n  const toYear = max != null ? max.getFullYear() : DEFAULT_TO_YEAR;\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      components={CALENDAR_COMPONENTS}\n      footer={footer}\n      // Render month/year as dropdown selects + prev/next arrows,\n      // so users can jump directly to any month/year without paging.\n      captionLayout=\"dropdown-buttons\"\n      fromYear={fromYear}\n      toYear={toYear}\n      showOutsideDays={true}\n      // Always render 6 rows so the calendar height doesn't jump between months.\n      fixedWeeks={true}\n    />\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DateCalendar.js","names":["ChevronLeft","ChevronRight","classnames","React","useCallback","useMemo","DayPicker","ActionButton","isDateInRange","buildDisabledMatchers","DEFAULT_FROM_YEAR","DEFAULT_TO_YEAR","styles","CLASS_NAMES","root","calendar","months","calendarMonths","table","calendarMonthGrid","head_cell","calendarWeekday","cell","calendarDay","day","calendarDayButton","day_selected","calendarSelected","day_today","calendarToday","day_outside","calendarOutside","day_disabled","calendarDisabled","day_hidden","calendarHidden","nav","calendarNav","nav_button_previous","calendarNavButton","calendarNavPrev","nav_button_next","calendarNavNext","caption","calendarMonthCaption","caption_label","calendarVhidden","caption_dropdowns","calendarCaptionDropdowns","dropdown","calendarDropdown","dropdown_month","dropdown_year","nav_icon","calendarChevron","vhidden","tfoot","calendarFooter","NAV_ICON_SIZE","IconLeft","createElement","size","IconRight","CALENDAR_COMPONENTS","DateCalendar","dateSelected","onSelect","onClear","month","onMonthChange","min","max","footer","todayButtonText","clearButtonText","disabled","fromYear","getFullYear","toYear","today","getLocalToday","isTodaySelectable","handleTodayClick","Fragment","className","calendarTimeFooter","calendarActionBar","type","appearance","onClick","mode","selected","defaultMonth","classNames","components","captionLayout","showOutsideDays","fixedWeeks","Date","setHours"],"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 { ChevronLeft, ChevronRight } from \"@blueprintjs/icons\";\nimport classnames from \"classnames\";\nimport React, { useCallback, useMemo } from \"react\";\nimport type { ClassNames } from \"react-day-picker\";\nimport { DayPicker } from \"react-day-picker\";\nimport { ActionButton } from \"../../base-components/action-button/ActionButton.js\";\nimport { isDateInRange } from \"../../shared/dateUtils.js\";\nimport {\n  buildDisabledMatchers,\n  DEFAULT_FROM_YEAR,\n  DEFAULT_TO_YEAR,\n} from \"./calendarShared.js\";\nimport styles from \"./DateCalendar.module.css\";\n\nexport const CLASS_NAMES: ClassNames = {\n  root: styles.calendar,\n  months: styles.calendarMonths,\n  table: styles.calendarMonthGrid,\n  head_cell: styles.calendarWeekday,\n  cell: styles.calendarDay,\n  day: styles.calendarDayButton,\n  day_selected: styles.calendarSelected,\n  day_today: styles.calendarToday,\n  day_outside: styles.calendarOutside,\n  day_disabled: styles.calendarDisabled,\n  day_hidden: styles.calendarHidden,\n  nav: styles.calendarNav,\n  nav_button_previous: classnames(\n    styles.calendarNavButton,\n    styles.calendarNavPrev,\n  ),\n  nav_button_next: classnames(styles.calendarNavButton, styles.calendarNavNext),\n  caption: styles.calendarMonthCaption,\n  caption_label: styles.calendarVhidden,\n  caption_dropdowns: styles.calendarCaptionDropdowns,\n  dropdown: styles.calendarDropdown,\n  dropdown_month: styles.calendarDropdown,\n  dropdown_year: styles.calendarDropdown,\n  nav_icon: styles.calendarChevron,\n  vhidden: styles.calendarVhidden,\n  tfoot: styles.calendarFooter,\n};\n\nconst NAV_ICON_SIZE = 12;\n\nfunction IconLeft(): React.ReactElement {\n  return <ChevronLeft size={NAV_ICON_SIZE} />;\n}\n\nfunction IconRight(): React.ReactElement {\n  return <ChevronRight size={NAV_ICON_SIZE} />;\n}\n\nexport const CALENDAR_COMPONENTS: {\n  IconLeft: () => React.ReactElement;\n  IconRight: () => React.ReactElement;\n} = { IconLeft, IconRight };\n\nexport interface DateCalendarProps {\n  dateSelected: Date | undefined;\n  onSelect: (date: Date | undefined) => void;\n  onClear?: () => void;\n  month?: Date;\n  onMonthChange?: (month: Date) => void;\n  min?: Date;\n  max?: Date;\n  footer?: React.ReactNode;\n  todayButtonText?: string;\n  clearButtonText?: string;\n}\n\nexport default function DateCalendar({\n  dateSelected,\n  onSelect,\n  onClear,\n  month,\n  onMonthChange,\n  min,\n  max,\n  footer,\n  todayButtonText = \"Today\",\n  clearButtonText = \"Clear\",\n}: DateCalendarProps): React.ReactElement {\n  const disabled = useMemo(() => buildDisabledMatchers(min, max), [min, max]);\n\n  const fromYear = min != null ? min.getFullYear() : DEFAULT_FROM_YEAR;\n  const toYear = max != null ? max.getFullYear() : DEFAULT_TO_YEAR;\n  const today = getLocalToday();\n  const isTodaySelectable = isDateInRange(today, min, max);\n  const handleTodayClick = useCallback(() => {\n    if (!isTodaySelectable) {\n      return;\n    }\n    onSelect(getLocalToday());\n  }, [isTodaySelectable, onSelect]);\n\n  const calendarFooter = (\n    <>\n      {footer != null && (\n        <div className={styles.calendarTimeFooter}>{footer}</div>\n      )}\n      <div className={styles.calendarActionBar}>\n        <ActionButton\n          type=\"button\"\n          appearance=\"minimal\"\n          disabled={!isTodaySelectable}\n          onClick={handleTodayClick}\n        >\n          {todayButtonText}\n        </ActionButton>\n        {onClear != null && (\n          <ActionButton\n            type=\"button\"\n            appearance=\"minimal\"\n            onClick={onClear}\n          >\n            {clearButtonText}\n          </ActionButton>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <DayPicker\n      mode=\"single\"\n      selected={dateSelected}\n      onSelect={onSelect}\n      month={month}\n      onMonthChange={onMonthChange}\n      disabled={disabled}\n      defaultMonth={dateSelected}\n      classNames={CLASS_NAMES}\n      components={CALENDAR_COMPONENTS}\n      footer={calendarFooter}\n      // Render month/year as dropdown selects + prev/next arrows,\n      // so users can jump directly to any month/year without paging.\n      captionLayout=\"dropdown-buttons\"\n      fromYear={fromYear}\n      toYear={toYear}\n      showOutsideDays={true}\n      // Always render 6 rows so the calendar height doesn't jump between months.\n      fixedWeeks={true}\n    />\n  );\n}\n\nfunction getLocalToday(): Date {\n  const today = new Date();\n  // Date-only picker actions should match calendar-day selection, which emits\n  // local midnight rather than the current wall-clock time.\n  today.setHours(0, 0, 0, 0);\n  return today;\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -28,6 +28,7 @@
 }
 
 .calendarDay {
+  position: relative;
   padding: var(--osdk-datetime-calendar-gap);
   text-align: center;
 }
@@ -112,18 +113,46 @@
   }
 }
 
+/* Day buttons are inset by cell padding; paint the range on the table cell too
+   so the range spans horizontal gaps while staying the same height as a day. */
+.calendarDay:has(.calendarRangeStart)::before,
+.calendarDay:has(.calendarRangeMiddle)::before,
+.calendarDay:has(.calendarRangeEnd)::before {
+  content: "";
+  position: absolute;
+  inset-block: var(--osdk-datetime-calendar-gap);
+  background: var(--osdk-datetime-calendar-range-middle-bg);
+  pointer-events: none;
+}
+
+.calendarDay:has(.calendarRangeStart)::before {
+  inset-inline-start: 50%;
+  inset-inline-end: 0;
+}
 
-/* Range-middle needs .calendarDayButton prefix to match specificity of
-   .calendarDayButton.calendarSelected (rdp applies both to range-middle days). */
+.calendarDay:has(.calendarRangeMiddle)::before {
+  inset-inline: 0;
+}
+
+.calendarDay:has(.calendarRangeEnd)::before {
+  inset-inline-start: 0;
+  inset-inline-end: 50%;
+}
+
+.calendarDay:has(.calendarRangeStart.calendarRangeEnd)::before {
+  content: none;
+}
+
+/* The table cell owns the translucent range fill. Keeping the middle button
+   transparent avoids alpha-stacking the same token over itself. */
 .calendarDayButton.calendarRangeMiddle {
-  background: var(--osdk-datetime-calendar-range-middle-bg);
+  background: transparent;
   color: var(--osdk-datetime-calendar-day-color);
   border-radius: 0;
 
   &:hover {
-    background: var(--osdk-datetime-calendar-range-middle-bg);
+    background: transparent;
     color: var(--osdk-datetime-calendar-day-hover-color);
-    filter: brightness(0.95);
   }
 
   &:active {
@@ -131,6 +160,14 @@
   }
 }
 
+.calendarRangeFooter {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: var(--osdk-datetime-calendar-months-gap);
+  justify-items: center;
+  padding-block-start: var(--osdk-time-picker-padding-top);
+}
+
 .calendarHidden {
   visibility: hidden;
 }
@@ -213,6 +250,9 @@
 
 /* Month/year selects — borderless, matching caption text weight */
 .calendarDropdown {
+  /* Native selects otherwise reserve room for the longest option, which makes
+     the month caret drift away from short month names like "May". */
+  field-sizing: content;
   font-family: var(--osdk-datetime-calendar-font-family);
   font-size: var(--osdk-datetime-calendar-caption-font-size);
   font-weight: var(--osdk-datetime-calendar-caption-font-weight);
@@ -230,10 +270,19 @@
 }
 
 
-/* Footer — content rendered inside DayPicker's <tfoot> (constrained by the table). */
-.calendarFooter {
-  padding-top: var(--osdk-time-picker-padding-top);
-  margin-top: var(--osdk-time-picker-margin-top);
-  border-top: var(--osdk-time-picker-border-top);
+.calendarTimeFooter {
+  display: flex;
+  justify-content: center;
+  padding-block-start: var(--osdk-time-picker-padding-top);
 }
 
+.calendarActionBar {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--osdk-surface-spacing);
+  padding-block-start: var(--osdk-time-picker-padding-top);
+  padding-inline: var(--osdk-datetime-popover-padding);
+  margin-block-start: var(--osdk-time-picker-margin-top);
+  margin-inline: calc(var(--osdk-datetime-popover-padding) * -1);
+  border-block-start: var(--osdk-time-picker-border-top);
+}

package/build/esm/action-form/fields/DateRangeCalendar.js

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import classnames from "classnames";
 import React, { useMemo } from "react";
 import { DayPicker } from "react-day-picker";
 import { buildDisabledMatchers, DEFAULT_FROM_YEAR, DEFAULT_TO_YEAR } from "./calendarShared.js";
@@ -21,9 +22,9 @@ import { CALENDAR_COMPONENTS, CLASS_NAMES as BASE_CLASS_NAMES } from "./DateCale
 import styles from "./DateCalendar.module.css";
 const CLASS_NAMES = {
   ...BASE_CLASS_NAMES,
-  day_range_start: styles.calendarRangeEndpoint,
+  day_range_start: classnames(styles.calendarRangeEndpoint, styles.calendarRangeStart),
   day_range_middle: styles.calendarRangeMiddle,
-  day_range_end: styles.calendarRangeEndpoint
+  day_range_end: classnames(styles.calendarRangeEndpoint, styles.calendarRangeEnd)
 };
 export default function DateRangeCalendar({
   selected,
@@ -35,7 +36,10 @@ export default function DateRangeCalendar({
   const disabled = useMemo(() => buildDisabledMatchers(min, max), [min, max]);
   const fromYear = min != null ? min.getFullYear() : DEFAULT_FROM_YEAR;
   const toYear = max != null ? max.getFullYear() : DEFAULT_TO_YEAR;
-  return /*#__PURE__*/React.createElement(DayPicker, {
+  const calendarFooter = footer == null ? undefined : /*#__PURE__*/React.createElement("div", {
+    className: styles.calendarRangeFooter
+  }, footer);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DayPicker, {
     mode: "range",
     selected: selected,
     onSelect: onSelect,
@@ -43,12 +47,11 @@ export default function DateRangeCalendar({
     defaultMonth: selected?.from,
     classNames: CLASS_NAMES,
     components: CALENDAR_COMPONENTS,
-    footer: footer,
     captionLayout: "dropdown-buttons",
     fromYear: fromYear,
     toYear: toYear,
     numberOfMonths: 2,
     pagedNavigation: true
-  });
+  }), calendarFooter);
 }
 //# sourceMappingURL=DateRangeCalendar.js.map

package/build/esm/action-form/fields/DateRangeCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeCalendar.js","names":["React","useMemo","DayPicker","buildDisabledMatchers","DEFAULT_FROM_YEAR","DEFAULT_TO_YEAR","CALENDAR_COMPONENTS","CLASS_NAMES","BASE_CLASS_NAMES","styles","day_range_start","calendarRangeEndpoint","day_range_middle","calendarRangeMiddle","day_range_end","DateRangeCalendar","selected","onSelect","min","max","footer","disabled","fromYear","getFullYear","toYear","createElement","mode","defaultMonth","from","classNames","components","captionLayout","numberOfMonths","pagedNavigation"],"sources":["DateRangeCalendar.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  DateRange as RdpDateRange,\n  SelectRangeEventHandler,\n} from \"react-day-picker\";\nimport { DayPicker } from \"react-day-picker\";\nimport {\n  buildDisabledMatchers,\n  DEFAULT_FROM_YEAR,\n  DEFAULT_TO_YEAR,\n} from \"./calendarShared.js\";\nimport {\n  CALENDAR_COMPONENTS,\n  CLASS_NAMES as BASE_CLASS_NAMES,\n} from \"./DateCalendar.js\";\nimport styles from \"./DateCalendar.module.css\";\n\nconst CLASS_NAMES: ClassNames = {\n  ...BASE_CLASS_NAMES,\n  day_range_start: styles.calendarRangeEndpoint,\n  day_range_middle: styles.calendarRangeMiddle,\n  day_range_end: styles.calendarRangeEndpoint,\n};\n\nexport interface DateRangeCalendarProps {\n  selected: RdpDateRange | undefined;\n  onSelect: SelectRangeEventHandler;\n  min?: Date;\n  max?: Date;\n  footer?: React.ReactNode;\n}\n\nexport default function DateRangeCalendar({\n  selected,\n  onSelect,\n  min,\n  max,\n  footer,\n}: DateRangeCalendarProps): React.ReactElement {\n  const disabled = useMemo(() => buildDisabledMatchers(min, max), [min, max]);\n\n  const fromYear = min != null ? min.getFullYear() : DEFAULT_FROM_YEAR;\n  const toYear = max != null ? max.getFullYear() : DEFAULT_TO_YEAR;\n\n  return (\n    <DayPicker\n      mode=\"range\"\n      selected={selected}\n      onSelect={onSelect}\n      disabled={disabled}\n      defaultMonth={selected?.from}\n      classNames={CLASS_NAMES}\n      components={CALENDAR_COMPONENTS}\n      footer={footer}\n      captionLayout=\"dropdown-buttons\"\n      fromYear={fromYear}\n      toYear={toYear}\n      numberOfMonths={2}\n      pagedNavigation={true}\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;AAMtC,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SACEC,qBAAqB,EACrBC,iBAAiB,EACjBC,eAAe,QACV,qBAAqB;AAC5B,SACEC,mBAAmB,EACnBC,WAAW,IAAIC,gBAAgB,QAC1B,mBAAmB;AAC1B,OAAOC,MAAM,MAAM,2BAA2B;AAE9C,MAAMF,WAAuB,GAAG;EAC9B,GAAGC,gBAAgB;EACnBE,eAAe,EAAED,MAAM,CAACE,qBAAqB;EAC7CC,gBAAgB,EAAEH,MAAM,CAACI,mBAAmB;EAC5CC,aAAa,EAAEL,MAAM,CAACE;AACxB,CAAC;AAUD,eAAe,SAASI,iBAAiBA,CAAC;EACxCC,QAAQ;EACRC,QAAQ;EACRC,GAAG;EACHC,GAAG;EACHC;AACsB,CAAC,EAAsB;EAC7C,MAAMC,QAAQ,GAAGpB,OAAO,CAAC,MAAME,qBAAqB,CAACe,GAAG,EAAEC,GAAG,CAAC,EAAE,CAACD,GAAG,EAAEC,GAAG,CAAC,CAAC;EAE3E,MAAMG,QAAQ,GAAGJ,GAAG,IAAI,IAAI,GAAGA,GAAG,CAACK,WAAW,CAAC,CAAC,GAAGnB,iBAAiB;EACpE,MAAMoB,MAAM,GAAGL,GAAG,IAAI,IAAI,GAAGA,GAAG,CAACI,WAAW,CAAC,CAAC,GAAGlB,eAAe;EAEhE,oBACEL,KAAA,CAAAyB,aAAA,CAACvB,SAAS;IACRwB,IAAI,EAAC,OAAO;IACZV,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBI,QAAQ,EAAEA,QAAS;IACnBM,YAAY,EAAEX,QAAQ,EAAEY,IAAK;IAC7BC,UAAU,EAAEtB,WAAY;IACxBuB,UAAU,EAAExB,mBAAoB;IAChCc,MAAM,EAAEA,MAAO;IACfW,aAAa,EAAC,kBAAkB;IAChCT,QAAQ,EAAEA,QAAS;IACnBE,MAAM,EAAEA,MAAO;IACfQ,cAAc,EAAE,CAAE;IAClBC,eAAe,EAAE;EAAK,CACvB,CAAC;AAEN","ignoreList":[]}
+{"version":3,"file":"DateRangeCalendar.js","names":["classnames","React","useMemo","DayPicker","buildDisabledMatchers","DEFAULT_FROM_YEAR","DEFAULT_TO_YEAR","CALENDAR_COMPONENTS","CLASS_NAMES","BASE_CLASS_NAMES","styles","day_range_start","calendarRangeEndpoint","calendarRangeStart","day_range_middle","calendarRangeMiddle","day_range_end","calendarRangeEnd","DateRangeCalendar","selected","onSelect","min","max","footer","disabled","fromYear","getFullYear","toYear","calendarFooter","undefined","createElement","className","calendarRangeFooter","Fragment","mode","defaultMonth","from","classNames","components","captionLayout","numberOfMonths","pagedNavigation"],"sources":["DateRangeCalendar.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 classnames from \"classnames\";\nimport React, { useMemo } from \"react\";\nimport type {\n  ClassNames,\n  DateRange as RdpDateRange,\n  SelectRangeEventHandler,\n} from \"react-day-picker\";\nimport { DayPicker } from \"react-day-picker\";\nimport {\n  buildDisabledMatchers,\n  DEFAULT_FROM_YEAR,\n  DEFAULT_TO_YEAR,\n} from \"./calendarShared.js\";\nimport {\n  CALENDAR_COMPONENTS,\n  CLASS_NAMES as BASE_CLASS_NAMES,\n} from \"./DateCalendar.js\";\nimport styles from \"./DateCalendar.module.css\";\n\nconst CLASS_NAMES: ClassNames = {\n  ...BASE_CLASS_NAMES,\n  day_range_start: classnames(\n    styles.calendarRangeEndpoint,\n    styles.calendarRangeStart,\n  ),\n  day_range_middle: styles.calendarRangeMiddle,\n  day_range_end: classnames(\n    styles.calendarRangeEndpoint,\n    styles.calendarRangeEnd,\n  ),\n};\n\nexport interface DateRangeCalendarProps {\n  selected: RdpDateRange | undefined;\n  onSelect: SelectRangeEventHandler;\n  min?: Date;\n  max?: Date;\n  footer?: React.ReactNode;\n}\n\nexport default function DateRangeCalendar({\n  selected,\n  onSelect,\n  min,\n  max,\n  footer,\n}: DateRangeCalendarProps): React.ReactElement {\n  const disabled = useMemo(() => buildDisabledMatchers(min, max), [min, max]);\n\n  const fromYear = min != null ? min.getFullYear() : DEFAULT_FROM_YEAR;\n  const toYear = max != null ? max.getFullYear() : DEFAULT_TO_YEAR;\n  const calendarFooter = footer == null\n    ? undefined\n    : <div className={styles.calendarRangeFooter}>{footer}</div>;\n\n  return (\n    <>\n      <DayPicker\n        mode=\"range\"\n        selected={selected}\n        onSelect={onSelect}\n        disabled={disabled}\n        defaultMonth={selected?.from}\n        classNames={CLASS_NAMES}\n        components={CALENDAR_COMPONENTS}\n        captionLayout=\"dropdown-buttons\"\n        fromYear={fromYear}\n        toYear={toYear}\n        numberOfMonths={2}\n        pagedNavigation={true}\n      />\n      {calendarFooter}\n    </>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAMtC,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SACEC,qBAAqB,EACrBC,iBAAiB,EACjBC,eAAe,QACV,qBAAqB;AAC5B,SACEC,mBAAmB,EACnBC,WAAW,IAAIC,gBAAgB,QAC1B,mBAAmB;AAC1B,OAAOC,MAAM,MAAM,2BAA2B;AAE9C,MAAMF,WAAuB,GAAG;EAC9B,GAAGC,gBAAgB;EACnBE,eAAe,EAAEX,UAAU,CACzBU,MAAM,CAACE,qBAAqB,EAC5BF,MAAM,CAACG,kBACT,CAAC;EACDC,gBAAgB,EAAEJ,MAAM,CAACK,mBAAmB;EAC5CC,aAAa,EAAEhB,UAAU,CACvBU,MAAM,CAACE,qBAAqB,EAC5BF,MAAM,CAACO,gBACT;AACF,CAAC;AAUD,eAAe,SAASC,iBAAiBA,CAAC;EACxCC,QAAQ;EACRC,QAAQ;EACRC,GAAG;EACHC,GAAG;EACHC;AACsB,CAAC,EAAsB;EAC7C,MAAMC,QAAQ,GAAGtB,OAAO,CAAC,MAAME,qBAAqB,CAACiB,GAAG,EAAEC,GAAG,CAAC,EAAE,CAACD,GAAG,EAAEC,GAAG,CAAC,CAAC;EAE3E,MAAMG,QAAQ,GAAGJ,GAAG,IAAI,IAAI,GAAGA,GAAG,CAACK,WAAW,CAAC,CAAC,GAAGrB,iBAAiB;EACpE,MAAMsB,MAAM,GAAGL,GAAG,IAAI,IAAI,GAAGA,GAAG,CAACI,WAAW,CAAC,CAAC,GAAGpB,eAAe;EAChE,MAAMsB,cAAc,GAAGL,MAAM,IAAI,IAAI,GACjCM,SAAS,gBACT5B,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAErB,MAAM,CAACsB;EAAoB,GAAET,MAAY,CAAC;EAE9D,oBACEtB,KAAA,CAAA6B,aAAA,CAAA7B,KAAA,CAAAgC,QAAA,qBACEhC,KAAA,CAAA6B,aAAA,CAAC3B,SAAS;IACR+B,IAAI,EAAC,OAAO;IACZf,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBI,QAAQ,EAAEA,QAAS;IACnBW,YAAY,EAAEhB,QAAQ,EAAEiB,IAAK;IAC7BC,UAAU,EAAE7B,WAAY;IACxB8B,UAAU,EAAE/B,mBAAoB;IAChCgC,aAAa,EAAC,kBAAkB;IAChCd,QAAQ,EAAEA,QAAS;IACnBE,MAAM,EAAEA,MAAO;IACfa,cAAc,EAAE,CAAE;IAClBC,eAAe,EAAE;EAAK,CACvB,CAAC,EACDb,cACD,CAAC;AAEP","ignoreList":[]}