"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePickerInputExample = void 0;
var React = require("react");
var Button_1 = require("@fluentui/react/lib-commonjs/Button");
var react_1 = require("@fluentui/react");
var styles = react_1.mergeStyleSets({
    root: { selectors: { '> *': { marginBottom: 15 } } },
    control: { maxWidth: 300, marginBottom: 15 },
});
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(react_1.DatePicker, { componentRef: datePickerRef, label: "Start date", allowTextInput: true, ariaLabel: "Select a date", value: value, onSelectDate: setValue, className: styles.control }),
        React.createElement(Button_1.DefaultButton, { "aria-label": "Clear the date input", onClick: onClick, text: "Clear" })));
};
exports.DatePickerInputExample = DatePickerInputExample;
//# sourceMappingURL=DatePicker.Input.Example.js.map