import * as React from 'react';
import { DefaultButton } from '@fluentui/react/lib/Button';
import { DatePicker, mergeStyleSets } from '@fluentui/react';
var styles = mergeStyleSets({
    root: { selectors: { '> *': { marginBottom: 15 } } },
    control: { maxWidth: 300, marginBottom: 15 },
});
export var DatePickerInputExample = function () {
    var _a = React.useState(), value = _a[0], setValue = _a[1];
    var datePickerRef = React.useRef(null);
    var onClick = React.useCallback(function () {
        var _a;
        setValue(undefined);
        (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
    }, []);
    return (React.createElement("div", { className: styles.root },
        React.createElement("div", null, "Clicking the input field will open the DatePicker, and clicking the field again will dismiss the DatePicker and allow text input. When using keyboard navigation (tabbing into the field), text input is allowed by default, and pressing Enter will open the DatePicker."),
        React.createElement(DatePicker, { componentRef: datePickerRef, label: "Start date", allowTextInput: true, ariaLabel: "Select a date", value: value, onSelectDate: setValue, className: styles.control }),
        React.createElement(DefaultButton, { "aria-label": "Clear the date input", onClick: onClick, text: "Clear" })));
};
//# sourceMappingURL=DatePicker.Input.Example.js.map