/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { jsx as _jsx } from "react/jsx-runtime";
import styled from '@essex/styled-components';
import { DirectionalHint, FocusTrapCallout, TextField } from '@fluentui/react';
import { memo, useCallback } from 'react';
/**
 * Renders the callout with a field to rename the table (and autofocus to the input)
 */ export const RenameCallout = /*#__PURE__*/ memo(function RenameCallout({ onSend , onChange , editedName , name  }) {
    const validateKeyEvent = useCallback((e)=>{
        if (e.key === 'Enter') return onSend(editedName);
        if (e.key === 'Escape') {
            onSend(name);
        }
    }, [
        onSend,
        name,
        editedName
    ]);
    return /*#__PURE__*/ _jsx(FocusCallout, {
        target: "#editName",
        directionalHint: DirectionalHint.topCenter,
        onDismiss: ()=>onSend(name),
        children: /*#__PURE__*/ _jsx(TextField, {
            value: editedName,
            onKeyDown: validateKeyEvent,
            onChange: onChange,
            underlined: true
        })
    });
});
const FocusCallout = styled(FocusTrapCallout)`
	width: 320;
	max-width: 90%;
	padding: 10px;
`;
