@awsui/components-react/button-group/file-input-item.js

On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { forwardRef, useState } from 'react';
import clsx from 'clsx';
import InternalFileInput from '../file-input/internal.js';
import Tooltip from '../internal/components/tooltip/index.js';
import { fireCancelableEvent } from '../internal/events/index.js';
import testUtilStyles from './test-classes/styles.css.js';
const FileInputItem = forwardRef(({ item, showTooltip, onTooltipDismiss, onFilesChange }, ref) => {
    const [files, setFiles] = useState([]);
    const containerRef = React.useRef(null);
    const canShowTooltip = Boolean(showTooltip);
    return (React.createElement("div", { ref: containerRef },
        React.createElement(InternalFileInput, { className: clsx(testUtilStyles['button-group-item']), ref: ref, variant: "icon", ariaLabel: item.text, accept: item.accept, multiple: item.multiple, value: files, onChange: event => {
                fireCancelableEvent(onFilesChange, { id: item.id, files: event.detail.value });
                setFiles(event.detail.value);
            }, "data-testid": item.id, __inputNativeAttributes: {
                'data-itemid': item.id,
            }, __inputClassName: testUtilStyles.item }),
        canShowTooltip && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']), onDismiss: onTooltipDismiss }))));
});
export default FileInputItem;
//# sourceMappingURL=file-input-item.js.map