"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FormFileUpload = FormFileUpload;
exports.default = void 0;
var _element = require("@wordpress/element");
var _button = _interopRequireDefault(require("../button"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * FormFileUpload is a component that allows users to select files from their local device.
 *
 * ```jsx
 * import { FormFileUpload } from '@wordpress/components';
 *
 * const MyFormFileUpload = () => (
 *   <FormFileUpload
 *     accept="image/*"
 *     onChange={ ( event ) => console.log( event.currentTarget.files ) }
 *   >
 *     Upload
 *   </FormFileUpload>
 * );
 * ```
 */
function FormFileUpload({
  accept,
  children,
  multiple = false,
  onChange,
  onClick,
  render,
  ...props
}) {
  const ref = (0, _element.useRef)(null);
  const openFileDialog = () => {
    ref.current?.click();
  };
  const ui = render ? render({
    openFileDialog
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
    onClick: openFileDialog,
    ...props,
    children: children
  });
  // @todo: Temporary fix a bug that prevents Chromium browsers from selecting ".heic" files
  // from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.
  // This can be removed once the Chromium fix is in the stable channel.
  // Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute.
  const isSafari = globalThis.window?.navigator.userAgent.includes('Safari') && !globalThis.window?.navigator.userAgent.includes('Chrome') && !globalThis.window?.navigator.userAgent.includes('Chromium');
  const compatAccept = !isSafari && !!accept?.includes('image/*') ? `${accept}, image/heic, image/heif` : accept;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "components-form-file-upload",
    children: [ui, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
      type: "file",
      ref: ref,
      multiple: multiple,
      style: {
        display: 'none'
      },
      accept: compatAccept,
      onChange: onChange,
      onClick: onClick,
      "data-testid": "form-file-upload-input"
    })]
  });
}
var _default = exports.default = FormFileUpload;
//# sourceMappingURL=index.js.map