TimePicker

An accessible dropdown menu for the common dropdown menu button design pattern. `TimePicker` uses roving `tabIndex` for focus management.

    View Source@fluidtruck/core

Props#

export interface UseTimePickerProps extends UsePopperProps, FormControlOptions, UseDisclosureProps {
  /**
   * If `true`, the first enabled TimePicker item will receive focus and be selected
   * when the TimePicker opens.
   *
   * @default true
   */
  autoSelect?: boolean;
  /**
   * If `true`, the TimePicker will close when you click outside
   * the TimePicker list
   *
   * @default true
   */
  closeOnBlur?: boolean;
  /**
   * If `true`, the TimePicker will close when a TimePicker item is
   * clicked
   *
   * @default true
   */
  closeOnSelect?: boolean;
  /**
   * The defaultValue if no value. Current hour if not disabled, else first available.
   *  @default 'current hour'
   */
  defaultValue?: TimeValueType;
  /**
   * Is Disabled boolean
   *  @default 'false'
   */
  isDisabled?: boolean;
  /**
   * has error, adds invalid to input
   */
  isInvalid?: boolean;
  /**
   * Performance 🚀:
   * If `true`, the TimePickerItem rendering will be deferred
   * until the TimePicker is open.
   */
  isLazy?: boolean;
  name?: string;
  /**
   * function gets called whenever the item is clicked
   */
  onChange?: (value: TimeValueType) => void;
  /**
   * The placeholder of the TimePicker in controlled mode
   *   @default 'current time'
   */
  placeholder?: string;
  /**
   * The `ref` of the input for focus management
   */
  ref: React.Ref<HTMLElement> | React.RefCallback<HTMLElement>;
  /**
   * unavailable hours to disable time-picker-item
   */
  unavailable?: Array<Number>;
  /**
   * The value of the TimePicker in controlled mode
   *   @default 'current hour'
   */
  value?: TimeValueType;
}