define(["require", "exports", "react", "@fluentui/react", "@fluentui/react/lib/Button", "@fluentui/react-hooks"], function (require, exports, React, react_1, Button_1, react_hooks_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.CalendarButtonExample = void 0;
    var CalendarButtonExample = function () {
        var _a = React.useState(), selectedDate = _a[0], setSelectedDate = _a[1];
        var _b = react_hooks_1.useBoolean(false), showCalendar = _b[0], _c = _b[1], toggleShowCalendar = _c.toggle, hideCalendar = _c.setFalse;
        var buttonContainerRef = React.useRef(null);
        var onSelectDate = React.useCallback(function (date, dateRangeArray) {
            setSelectedDate(date);
            hideCalendar();
        }, [hideCalendar]);
        return (React.createElement("div", null,
            React.createElement("div", { ref: buttonContainerRef },
                React.createElement(Button_1.DefaultButton, { onClick: toggleShowCalendar, text: !selectedDate ? 'Click for Calendar' : selectedDate.toLocaleDateString() })),
            showCalendar && (React.createElement(react_1.Callout, { isBeakVisible: false, gapSpace: 0, doNotLayer: false, target: buttonContainerRef, directionalHint: react_1.DirectionalHint.bottomLeftEdge, onDismiss: hideCalendar, setInitialFocus: true },
                React.createElement(react_1.FocusTrapZone, { isClickableOutsideFocusTrap: true },
                    React.createElement(react_1.Calendar, { onSelectDate: onSelectDate, onDismiss: hideCalendar, isMonthPickerVisible: true, value: selectedDate, highlightCurrentMonth: true, isDayPickerVisible: true, showGoToToday: true }))))));
    };
    exports.CalendarButtonExample = CalendarButtonExample;
});
//# sourceMappingURL=Calendar.Button.Example.js.map