/* @oracle/oraclejet-preact: undefined */
'use strict';

var jsxRuntime = require('preact/jsx-runtime');
var preact = require('preact');
var size = require('./size-0056ef1a.js');
var useTooltip = require('./useTooltip-cf4a15f3.js');
require('preact/hooks');
require('./logger-2b636482.js');
require('./LayerHost-8ec73638.js');
require('preact/compat');


require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
require('./tooltipUtils-d461919d.js');
var UNSAFE_Icon_themes_IconStyle_css = require('./UNSAFE_Icon/themes/IconStyle.css.js');

/**
 * The Icon component enables you to define your own custom icon components. It renders as an <svg /> element and accepts SVG children content.
 */
const Icon = ({ size: size$1 = '1em', color = 'currentColor', accessibleLabel = '', viewBox = 'none', children }) => (jsxRuntime.jsx(Svg, { height: "1em", width: "1em", viewBox: viewBox, accessibleLabel: accessibleLabel, class: UNSAFE_Icon_themes_IconStyle_css.styles[color], style: { fontSize: size$1 === '1em' ? size$1 : `${size.sizeToCSS(size$1)}` }, children: children }));
const Svg = ({ accessibleLabel, ...otherProps }) => accessibleLabel ? (jsxRuntime.jsx(SemanticSvg, { accessibleLabel: accessibleLabel, ...otherProps })) : (jsxRuntime.jsx(DecorativeSvg, { ...otherProps }));
const DecorativeSvg = (props) => jsxRuntime.jsx("svg", { ...props });
const SemanticSvg = ({ accessibleLabel, children, ...props }) => {
    // See JET-56791.
    // We want the same effect as specifying a SVG <title> element for showing a tooltip.
    // When <title> is used, the SVG is not keyboard focusable by default, and the tooltip only shows up
    // on mouse hover. Typically any accessibility requirements beyond this should be handled by making the parent
    // element accessible. This was the approved behavior by APO, and is consistent with the behavior of icons
    // from other libraries.
    //
    // We need to use useTooltip for displaying the tooltip, but it appears spreading the onFocus and onBlur event
    // handlers generated by the useTooltip hook onto the <svg> causes it to become keyboard focusable*.
    // To fix this we need to omit spreading the onFocus and onBlur event handlers from the tooltipProps.
    //
    // *Most browsers implement the SVG 1.1 spec. There's also a SVG 1.2 Tiny spec that's not
    // fully implemented in most browsers.
    // The non-draft version of SVG 1.1 doesn't document the focus conditions and behavior AFAICT.
    // However it appears browsers implemented the same behavior as the focusable="auto" behavior as described
    // in SVG 1.2 Tiny: https://www.w3.org/TR/SVGTiny12/interact.html#focus
    // In particular, it states that if the SVG element has focus related event listeners registered on it, then it becomes focusable.
    // The spec mentions focusin and focusout event handlers, but not focus event handlers. The reality is
    // that having a focus event handler registered also causes the <svg> to become focusable (tested on Chrome), and that's
    // probably because a focus event always precedes a focusin event.
    // Note also setting focusable="false", or setting tabindex="-1" on the <svg> to prevent it from becoming focusable
    // doesn't work based on my testing, and that's most probably because the focusable and tabindex attributes are not part
    // of the SVG 1.1 spec.
    const { tooltipContent, tooltipProps: { onFocus, onBlur, ...restTooltipProps } } = useTooltip.useTooltip({
        text: accessibleLabel,
        anchor: {
            x: 'element',
            y: 'element'
        }
    });
    return (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx("svg", { role: "img", ...props, ...restTooltipProps, "aria-label": accessibleLabel, children: children }), tooltipContent] }));
};

exports.Icon = Icon;
//# sourceMappingURL=Icon-6baa1a6f.js.map
