import { InputHTMLAttributes } from 'react';
import type { FormMessage } from '@instructure/ui-form-field/latest';
import type { OtherHTMLAttributes } from '@instructure/shared-types';
import type { PlacementPropValues, PositionConstraint, PositionMountNode } from '@instructure/ui-position';
import type { WithDeterministicIdProps } from '@instructure/ui-react-utils';
import { Renderable } from '@instructure/shared-types';
import type { Moment } from 'moment-timezone';
type PropKeys = keyof TimeSelectOwnProps;
type AllowedPropKeys = Readonly<Array<PropKeys>>;
type TimeSelectProps = TimeSelectOwnProps & OtherHTMLAttributes<TimeSelectOwnProps, InputHTMLAttributes<TimeSelectOwnProps & Element>> & WithDeterministicIdProps;
type TimeSelectOwnProps = {
    /**
     * The form field label.
     */
    renderLabel: Renderable;
    /**
     * Whether to default to the first option when `defaultValue` hasn't been specified.
     */
    defaultToFirstOption?: boolean;
    /**
     * An ISO 8601 formatted date string representing the current selected value. If defined,
     * the component will act controlled and will not manage its own state.
     */
    value?: string;
    /**
     * An ISO 8601 formatted date string to use if `value` isn't provided.
     */
    defaultValue?: string;
    /**
     * The id of the text input. One is generated if not supplied.
     */
    id?: string;
    /**
     * The format to use when displaying the possible and currently selected options.
     * This component currently rounds seconds down to the minute.
     * Defaults to `LT`, which is localized time without seconds, e.g. "16:45" or
     * "4:45 PM"
     *
     * See [moment](https://momentjs.com/docs/#/displaying/format/) for the list
     * of available formats.
     */
    format?: string;
    /**
     * The number of minutes to increment by when generating the allowable options.
     */
    step?: 5 | 10 | 15 | 20 | 30 | 60;
    /**
     * Specifies if interaction with the input is enabled, disabled, or readonly.
     * When "disabled", the input changes visibly to indicate that it cannot
     * receive user interactions. When "readonly" the input still cannot receive
     * user interactions, but it keeps the same styles as if it were enabled.
     */
    interaction?: 'enabled' | 'disabled' | 'readonly';
    /**
     * Html placeholder text to display when the input has no value. This should
     * be hint text, not a label replacement.
     */
    placeholder?: string;
    isRequired?: boolean;
    /**
     * Whether the input is rendered inline with other elements or if it
     * is rendered as a block level element.
     */
    isInline?: boolean;
    /**
     * The width of the text input.
     */
    width?: string;
    /**
     * The max width the options list can be before option text wraps. If not
     * set, the list will only display as wide as the text input.
     */
    optionsMaxWidth?: string;
    /**
     * The number of options that should be visible before having to scroll.
     */
    visibleOptionsCount?: number;
    /**
     * Displays messages and validation for the input. It should be an array of
     * objects with the following shape:
     * `{
     *     text: ReactNode,
     *     type: One of: ['newError', 'error', 'hint', 'success', 'screenreader-only']
     * }`
     */
    messages?: FormMessage[];
    /**
     * The placement of the options list.
     */
    placement?: PlacementPropValues;
    /**
     * The parent in which to constrain the placement.
     */
    constrain?: PositionConstraint;
    /**
     * An element or a function returning an element to use mount the options
     * list to in the DOM (defaults to `document.body`)
     */
    mountNode?: PositionMountNode;
    /**
     * Callback fired when a new option is selected. This can happen in the
     * following ways:
     * 1. User clicks/presses enter on an option in the dropdown and focuses away
     * 2. User enters a valid time manually and focuses away
     * @param event - the event object
     * @param data - additional data containing the value and the input string
     */
    onChange?: (event: React.SyntheticEvent, data: {
        value: string;
        inputText: string;
    }) => void;
    /**
     * Callback fired when text input receives focus.
     */
    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * Callback fired when text input loses focus.
     */
    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * Callback fired when the options list is shown.
     */
    onShowOptions?: (event: React.SyntheticEvent) => void;
    /**
     * Callback fired when the options list is hidden.
     */
    onHideOptions?: (event: React.SyntheticEvent) => void;
    /**
     * A ref to the html `input` element.
     */
    inputRef?: (inputElement: HTMLInputElement | null) => void;
    /**
     * A ref to the html `ul` element.
     */
    listRef?: (listElement: HTMLUListElement | null) => void;
    /**
     * Content to display in the list when no options are available.
     */
    renderEmptyOption?: Renderable;
    /**
     * Content to display before the text input. This will commonly be an icon.
     */
    renderBeforeInput?: Renderable;
    /**
     * Content to display after the text input. This content will replace the
     * default arrow icons.
     */
    renderAfterInput?: Renderable;
    /**
     * A standard language identifier.
     *
     * See [moment.js i18n](https://momentjs.com/docs/#/i18n/) for more details.
     *
     * This property can also be set via a context property and if both are set then the component property takes
     * precedence over the context property.
     *
     * The web browser's locale will be used if no value is set via a component property or a context
     * property.
     */
    locale?: string;
    /**
     * A timezone identifier in the format: Area/Location
     *
     * See [List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) for the list
     * of possible options.
     *
     * This property can also be set via a context property and if both are set then the component property takes
     * precedence over the context property.
     *
     * The web browser's timezone will be used if no value is set via a component property or a context
     * property.
     */
    timezone?: string;
    /**
     * Whether to allow the user to enter non-step divisible values in the input field.
     * Note that even if this is set to `false` one can enter non-step divisible values programatically.
     * The user will need to enter the value exactly (except for lower/uppercase) as specified by the `format` prop  for
     * it to be accepted.
     *
     * Default is `false`
     */
    allowNonStepInput?: boolean;
    /**
     * Callback fired when text input value changes.
     */
    onInputChange?: (
    /**
     * The raw HTML input event
     */
    event: React.ChangeEvent<HTMLInputElement>, 
    /**
     * The text value in the input field.
     */
    value: string, 
    /**
     * Current value as ISO datetime string, undefined it its a non-valid value.
     */
    valueAsISOString?: string) => void;
    /**
     * Whether to allow for the user to clear the selected option in the input field.
     * If `false`, the input field will return the last selected option after the input is cleared and loses focus.
     */
    allowClearingSelection?: boolean;
};
declare const allowedProps: AllowedPropKeys;
type TimeSelectOptions = {
    id: string;
    value: Moment;
    label: string;
};
type TimeSelectState = {
    /**
     * The current value in the input field, not necessarily a valid time
     */
    inputValue: string;
    /**
     * All possible options. Filtered down because if `allowNonStepInput` is true
     * it'd be 24*60 options and filtered by user input.
     */
    options: TimeSelectOptions[];
    /**
     * The options shown in the options list.
     */
    filteredOptions: TimeSelectOptions[];
    /**
     * Whether to show the options list.
     */
    isShowingOptions: boolean;
    /**
     * The highlighted option in the dropdown e.g. by hovering,
     * not necessarily selected
     */
    highlightedOptionId?: string;
    /**
     * The ID of the selected option in the options list dropdown
     */
    selectedOptionId?: string;
    /**
     * fire onChange event when the popup closes?
     */
    fireChangeOnBlur?: TimeSelectOptions;
    /**
     * Whether to selected option is cleared
     */
    isInputCleared: boolean;
};
export type { TimeSelectProps, TimeSelectState, TimeSelectOptions };
export { allowedProps };
//# sourceMappingURL=props.d.ts.map