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

var jsxRuntime = require('preact/jsx-runtime');
var compat = require('preact/compat');
var hooks = require('preact/hooks');
var Check = require('./Check-1a279253.js');
var CheckboxOff = require('./CheckboxOff-4655c1e3.js');
var CheckboxOn = require('./CheckboxOn-1dd681f1.js');
var CheckboxMixed = require('./CheckboxMixed-3865367b.js');
var HiddenAccessible = require('./HiddenAccessible-087eb49a.js');
var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
var UNSAFE_Checkbox_themes_CheckboxIconContract_css = require('./UNSAFE_Checkbox/themes/CheckboxIconContract.css.js');
var UNSAFE_Checkbox_themes_redwood_CheckboxIconTheme = require('./UNSAFE_Checkbox/themes/redwood/CheckboxIconTheme.js');
require('./TabbableModeContext-e99d527e.js');
var useTabbableMode = require('./useTabbableMode-5c8fd9e5.js');

require('./CollectionInteractionContext-f84ff7a1.js');
var useCollectionInteractionContext = require('./useCollectionInteractionContext-6fc0200e.js');

var hoverStyle = 'StyledCheckbox_hoverStyle__gne78f0';

/**
 * StyledCheckbox is a controlled component that displays a stylized checkbox for 'checked',
 * 'unchecked', and 'partial'. It passes intrinsic props to the native input element. This should be used
 * in conjunction with a label and be passed an onChange handler. If used within a collection use
 * 'useCollectionFocusRing', or use 'useCheckboxRadioContext' within RadioSet/CheckboxSet, to determine if you
 * should display the focus ring using keyboard navigation.
 */
const StyledCheckbox = compat.forwardRef(({ onClick, isActive, isFocusRingShown, isDisabled, isReadonly, isRequired, isChecked: propIsChecked = 'unchecked', 
// Remaining props should be intrinsic input props only. If you need additional input props exposed,
// add to the picked items from InputProps.
id, name, value, onKeyUp, onKeyDown, onChange, onFocus, onBlur, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, isHover }, ref = null) => {
    const { isTabbable } = useTabbableMode.useTabbableMode();
    const isPartial = propIsChecked === 'partial';
    const isInputChecked = propIsChecked === 'checked';
    const isChecked = isInputChecked || isPartial;
    const ariaChecked = isChecked ? (isPartial ? 'mixed' : true) : false;
    const { classes } = useComponentTheme.useComponentTheme(UNSAFE_Checkbox_themes_redwood_CheckboxIconTheme.CheckboxIconRedwoodTheme, {
        disabled: isDisabled ? 'isDisabled' : 'notDisabled',
        checked: isChecked ? 'isChecked' : 'notChecked',
        readonly: isReadonly ? 'isReadonly' : 'notReadonly',
        active: isActive ? 'isActive' : 'notActive',
        focus: isFocusRingShown ? 'isFocused' : 'notFocused',
        iconSize: '4xUnits'
    });
    // JET-67417 We need to set 'indeterminate' via javascript
    // as well as have aria-checked for AT voice over to read out properly
    hooks.useEffect(() => {
        const refObj = ref;
        if (refObj?.current) {
            refObj.current.indeterminate = isPartial;
        }
    }, [ref, isPartial]);
    const IconComp = isReadonly
        ? isChecked
            ? Check.SvgCheck
            : CheckboxOff.SvgCheckboxOff
        : isChecked
            ? isPartial
                ? CheckboxMixed.SvgCheckboxMixed
                : CheckboxOn.SvgCheckboxOn
            : CheckboxOff.SvgCheckboxOff;
    const spanClass = isHover ? classes + ' ' + hoverStyle : classes;
    // JET-65187 oatb: Interactive controls must not be nested
    // For accessibility, we want aria-hidden to be true and disabled to be true when
    // the checkbox is 'embedded' in a collection in the dropdown of a SelectMultiple component.
    const isEmbedded = useCollectionInteractionContext.useCollectionInteractionContext() === 'embedded';
    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { children: jsxRuntime.jsx("input", { ...(isReadonly ? { 'aria-readonly': true } : {}), "aria-checked": ariaChecked, ...(isEmbedded ? { 'aria-hidden': true } : {}), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-required": isRequired, ref: ref, name: name, value: value, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onBlur: onBlur, onChange: onChange, onFocus: onFocus, id: id, type: "checkbox", disabled: isDisabled || isEmbedded, checked: isInputChecked, tabIndex: isTabbable ? 0 : -1 }) }), jsxRuntime.jsx("span", { className: spanClass, "aria-hidden": "true", onClick: onClick, role: "img", children: jsxRuntime.jsx(IconComp, { size: UNSAFE_Checkbox_themes_CheckboxIconContract_css.checkboxIconVars.iconSize, color: "currentColor" }) })] }));
});

exports.StyledCheckbox = StyledCheckbox;
//# sourceMappingURL=StyledCheckbox-a78cdad7.js.map
