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

var jsxRuntime = require('preact/jsx-runtime');
var compat = require('preact/compat');
var CheckboxRadioContext = require('./CheckboxRadioContext-3b134bd1.js');
var HiddenAccessible = require('./HiddenAccessible-087eb49a.js');
var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
var useFocus = require('./useFocus-1b288fb9.js');
var classNames = require('./classNames-c14c6ef3.js');
require('./TabbableModeContext-e99d527e.js');
var useTabbableMode = require('./useTabbableMode-5c8fd9e5.js');
var useTranslationBundle = require('./useTranslationBundle-38c0edae.js');


require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js');
require('preact/hooks');
require('./Flex-da9f223a.js');


require('./UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js');
require('preact');
var useId = require('./useId-6c0eeb27.js');
require('./LayerHost-8ec73638.js');


require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
require('./tooltipUtils-d461919d.js');

require('./IconButton-fad4e4b2.js');

require('./MessageFormattingUtils-42d84399.js');
require('./logger-2b636482.js');
require('./TransitionGroup-b239d98f.js');
require('./MessagesContext-4e939750.js');


require('./UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js');
require('./FormContext-9452bd30.js');
require('./FormFieldContext-8418dc68.js');
require('./InputGroupContext-05f2a46f.js');
require('./Popup-17440baa.js');
require('./UNSAFE_Separator/themes/SeparatorStyles.css.js');
var useFocusWithin = require('./useFocusWithin-eb7f956a.js');


require('./UNSAFE_Label/themes/redwood/LabelVariants.css.js');
var IconUserAssistance = require('./IconUserAssistance-f247ab50.js');
var StyledCheckbox = require('./StyledCheckbox-a78cdad7.js');
var UNSAFE_Checkbox_themes_redwood_CheckboxTheme = require('./UNSAFE_Checkbox/themes/redwood/CheckboxTheme.js');
var useActive = require('./useActive-6770f917.js');
var stringUtils = require('./stringUtils-4e4a6b2b.js');
var LayoutStyles_css = require('./LayoutStyles.css-73ce5266.js');

/**
 * CheckboxControl is an internal subcomponent used by both Checkbox and CheckboxItem.
 * It handles styling, placement of label, assistive text, and accessibility text for both parent components.
 * onCommit handling is handled in the parent components.
 */
const CheckboxControl = compat.forwardRef(({ 'aria-describedby': ariaDescribedBy, name, value, children, isChecked, isDisabled, isReadonly, isRequired, onChange, onKeyUp, assistiveText, helpSourceLink, helpSourceText, columnSpan = 1 }, ref = null) => {
    // hooks
    const id = useId.useId();
    const childWrapperRef = compat.useRef(null);
    const { isTabbable } = useTabbableMode.useTabbableMode();
    const { isActive, activeProps } = useActive.useActive();
    const { isFocusRingShown } = CheckboxRadioContext.useCheckboxRadioContext();
    const labelRef = compat.createRef();
    const { isFocus, focusProps: { onFocus, onBlur } } = useFocus.useFocus();
    // styling
    const { classes: checkboxClasses, styles: { valueLabelStyle, checkboxSpanStyle } } = useComponentTheme.useComponentTheme(UNSAFE_Checkbox_themes_redwood_CheckboxTheme.CheckboxRedwoodTheme, {
        disabled: isDisabled ? 'isDisabled' : 'notDisabled',
        focused: isFocus && isFocusRingShown ? 'isFocused' : 'notFocused'
    });
    // help available
    const hasUserAssistive = !isDisabled && !isReadonly && !!(assistiveText || helpSourceLink);
    const helpAvailableId = hasUserAssistive ? `${id}-help-available` : undefined;
    const uaId = hasUserAssistive ? `${id}-icon-ua` : undefined;
    const { formControl_helpAvailable } = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
    const helpAvailableString = formControl_helpAvailable();
    const userAssistiveHelp = hasUserAssistive ? (jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { id: helpAvailableId, children: helpAvailableString })) : undefined;
    // prevent auto scrolling
    const onKeyDown = (event) => {
        const { key } = event;
        if (!isReadonly && key !== undefined && key === ' ') {
            event.preventDefault();
        }
    };
    // we want to prevent mouseDown on Links to set active
    const onMouseDownHandler = (e) => {
        // check to see if the target is within an <a> tag and the tag is within the label
        const closestAnchor = e.target.closest('a');
        closestAnchor && childWrapperRef.current?.contains(closestAnchor)
            ? e.stopPropagation()
            : activeProps['onMouseDown']?.(e);
    };
    // don't allow key down to set active state
    delete activeProps['onKeyDown'];
    const { focusProps, isFocused: isFocusedWithin } = useFocusWithin.useFocusWithin();
    // JET-70100 - ensure checkbox is scrolled into view when focused and focus ring is shown
    compat.useEffect(() => {
        if (isFocus && isFocusRingShown) {
            labelRef?.current?.scrollIntoView({ block: 'nearest' });
        }
    }, [isFocus, isFocusRingShown, labelRef]);
    // The top level element needs the column span class on it.
    const classes = LayoutStyles_css.layoutSpanStyles.layoutSpanColumn[columnSpan];
    return (jsxRuntime.jsxs("label", { ref: labelRef, class: classNames.classNames([checkboxClasses, classes]), children: [jsxRuntime.jsx("span", { class: checkboxSpanStyle, ...activeProps, children: jsxRuntime.jsx(StyledCheckbox.StyledCheckbox, { "aria-describedby": stringUtils.merge([ariaDescribedBy, helpAvailableId]), name: name, value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onKeyUp: onKeyUp, onKeyDown: onKeyDown, isActive: isActive, isChecked: isChecked ? 'checked' : 'unchecked', isDisabled: isDisabled, isReadonly: isReadonly, isRequired: isRequired, ref: ref }) }), userAssistiveHelp, jsxRuntime.jsxs("span", { class: valueLabelStyle, children: [jsxRuntime.jsx("span", { ...activeProps, ...focusProps, onMouseDown: onMouseDownHandler, ref: childWrapperRef, children: children }), hasUserAssistive && (jsxRuntime.jsx(IconUserAssistance.IconUserAssistance, { assistiveText: assistiveText, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, isTabbable: isTabbable && (isFocus || isFocusedWithin), id: uaId }))] })] }));
});

exports.CheckboxControl = CheckboxControl;
//# sourceMappingURL=CheckboxControl-697725cb.js.map
