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

var jsxRuntime = require('preact/jsx-runtime');
var compat = require('preact/compat');
var useCollectionFocusRing = require('./useCollectionFocusRing-8e16f3d9.js');
var useTranslationBundle = require('./useTranslationBundle-38c0edae.js');
var Flex = require('./Flex-da9f223a.js');
var Label = require('./Label-c51bd5de.js');
var InlineHelp = require('./InlineHelp-7c4897d2.js');
require('./logger-2b636482.js');
require('./TabbableModeContext-e99d527e.js');
require('preact/hooks');


require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js');
var InlineUserAssistance = require('./InlineUserAssistance-6c6d3250.js');


require('./UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js');
require('preact');
var utils = require('./utils-606327d1.js');
var useTestId = require('./useTestId-32c35bff.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('./TransitionGroup-b239d98f.js');
require('./MessagesContext-4e939750.js');
var HiddenAccessible = require('./HiddenAccessible-087eb49a.js');


require('./UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js');
require('./FormFieldContext-8418dc68.js');
require('./Popup-17440baa.js');
require('./UNSAFE_Separator/themes/SeparatorStyles.css.js');


require('./UNSAFE_Label/themes/redwood/LabelVariants.css.js');

require('./UNSAFE_Popup/themes/redwood/PopupVariants.css.js');
var CheckboxRadioFieldStyles_css = require('./CheckboxRadioFieldStyles.css-7d820452.js');
var CheckboxRadioContext = require('./CheckboxRadioContext-3b134bd1.js');
var LayoutStyles_css = require('./LayoutStyles.css-73ce5266.js');
var classNames = require('./classNames-c14c6ef3.js');
require('./FormContext-9452bd30.js');
var useFormContext = require('./useFormContext-4c3091dc.js');
var useFormFieldContext = require('./useFormFieldContext-20f419ef.js');
var size = require('./size-0056ef1a.js');
var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
var UNSAFE_RadioItem_themes_redwood_RadioTheme = require('./UNSAFE_RadioItem/themes/redwood/RadioTheme.js');
var UNSAFE_Label_themes_redwood_LabelTheme = require('./UNSAFE_Label/themes/redwood/LabelTheme.js');
var UNSAFE_TextField_themes_redwood_FormLayoutTheme = require('./UNSAFE_TextField/themes/redwood/FormLayoutTheme.js');
var UNSAFE_Checkbox_themes_redwood_CheckboxTheme = require('./UNSAFE_Checkbox/themes/redwood/CheckboxTheme.js');
var StyledLabelValueLayout = require('./StyledLabelValueLayout-5198483a.js');


var checkboxRadioLabelInnerStyles = {startRadioSetWithoutTopUA:'CheckboxRadioLabelValueLayoutStyles_checkboxRadioLabelInnerStyles_startRadioSetWithoutTopUA__6098ei0',insideRadioSet:'CheckboxRadioLabelValueLayoutStyles_checkboxRadioLabelInnerStyles_insideRadioSet__6098ei1',startCheckboxSetWithoutTopUA:'CheckboxRadioLabelValueLayoutStyles_checkboxRadioLabelInnerStyles_startCheckboxSetWithoutTopUA__6098ei2',insideCheckboxSet:'CheckboxRadioLabelValueLayoutStyles_checkboxRadioLabelInnerStyles_insideCheckboxSet__6098ei3'};

/**
 * A layout component for rendering a label and value pair, used in form components
 * such as CheckboxSet and RadioSet.
 */
const CheckboxRadioLabelValueLayout = ({ label, labelEdge, children, parentComponentVariant, labelStartWidth = '33%', hasTopUserAssistance = false }) => {
    const { baseTheme: radioTheme } = useComponentTheme.useComponentTheme(UNSAFE_RadioItem_themes_redwood_RadioTheme.RadioRedwoodTheme);
    const { baseTheme: checkboxTheme } = useComponentTheme.useComponentTheme(UNSAFE_Checkbox_themes_redwood_CheckboxTheme.CheckboxRedwoodTheme);
    const { baseTheme: labelTheme } = useComponentTheme.useComponentTheme(UNSAFE_Label_themes_redwood_LabelTheme.LabelRedwoodTheme);
    const { baseTheme: formLayoutTheme } = useComponentTheme.useComponentTheme(UNSAFE_TextField_themes_redwood_FormLayoutTheme.FormLayoutRedwoodTheme);
    const isRadio = parentComponentVariant === 'radioSet';
    const isCheckbox = parentComponentVariant === 'checkboxSet';
    const isStart = labelEdge === 'start';
    const isTop = labelEdge === 'top' || labelEdge === 'inside'; // 'inside' needs to pick up all 'top' styles.
    const isInside = labelEdge === 'inside';
    const width = size.sizeToCSS(labelStartWidth);
    const valueWidth = `calc(100% - ${width})`;
    const labelStyles = isStart
        ? { flexBasis: width, width: width, maxWidth: width }
        : {};
    const valueStyles = isStart
        ? { flexBasis: valueWidth, width: valueWidth, maxWidth: valueWidth }
        : {};
    const { isFormLayout, isReadonly: isFormReadonly, labelWrapping } = useFormContext.useFormContext();
    const { isReadonly } = useFormFieldContext.useFormFieldContext();
    const isPureReadonly = (isFormLayout && isFormReadonly) || (!isFormLayout && isReadonly);
    const labelStyleClasses = classNames.classNames([
        formLayoutTheme,
        StyledLabelValueLayout.labelSlotStyles.base,
        isStart && StyledLabelValueLayout.labelSlotStyles.start,
        isTop && StyledLabelValueLayout.labelSlotStyles.top,
        isTop && hasTopUserAssistance && StyledLabelValueLayout.labelSlotStyles.topAndTopUA,
        isTop && isPureReadonly && StyledLabelValueLayout.labelSlotStyles.topPureReadonly
    ]);
    const labelInnerClasses = classNames.classNames([
        isRadio && radioTheme,
        isCheckbox && checkboxTheme,
        labelTheme,
        formLayoutTheme,
        StyledLabelValueLayout.labelInnerStyles.base,
        isStart && StyledLabelValueLayout.labelInnerStyles.start,
        isRadio && isInside && checkboxRadioLabelInnerStyles.insideRadioSet,
        isCheckbox && isInside && checkboxRadioLabelInnerStyles.insideCheckboxSet,
        isRadio &&
            isStart &&
            !hasTopUserAssistance &&
            checkboxRadioLabelInnerStyles.startRadioSetWithoutTopUA,
        isCheckbox &&
            isStart &&
            !hasTopUserAssistance &&
            checkboxRadioLabelInnerStyles.startCheckboxSetWithoutTopUA,
        labelWrapping === 'truncate' && StyledLabelValueLayout.labelInnerStyles.noWrap
    ]);
    return (jsxRuntime.jsx(StyledLabelValueLayout.StyledLabelValueLayout
    // For readonly start aligned labels, we want the div that is the parent of the label to
    // stretch to the height of the value content, including the end content (InputSensitiveText)
    , { 
        // For readonly start aligned labels, we want the div that is the parent of the label to
        // stretch to the height of the value content, including the end content (InputSensitiveText)
        flexAlign: isReadonly && isStart ? 'stretch' : 'start', labelStyleClasses: labelStyleClasses, labelStyles: labelStyles, labelInnerClasses: labelInnerClasses, label: label, valueStyles: valueStyles, children: children }));
};

const CheckboxRadioField = compat.forwardRef(({ 'aria-describedby': ariaDescribedBy, assistiveText, baseId, direction = 'column', columnSpan = 1, hasValue, helpSourceLink, helpSourceText, isDisabled, isReadonly, isRequired, label, labelEdge, labelStartWidth = '33%', parentComponentVariant, messages, userAssistanceDensity, role, children, testId }, ref = null) => {
    const testIdProps = useTestId.useTestId(testId);
    const UAtestId = `${testId}-inline-user-assistance`;
    const UAtestIdTop = testId ? `${UAtestId}-top` : undefined;
    const UAtestIdBottom = testId ? `${UAtestId}-bottom` : undefined;
    const hasTopUserAssistance = !isDisabled && !isReadonly && (!!assistiveText || !!helpSourceLink);
    // we still render <InlineUserAssistance/> if density is 'efficient' or 'compact' to save space,
    // even though we don't render user assistance for disabled or readonly fields
    const hasBottomUserAssistance = !isDisabled && !isReadonly;
    const groupRef = compat.useRef(null);
    const { groupProps, labelProps, topUserAssistanceProps, bottomUserAssistanceProps, readonlyId } = CheckboxRadioFieldStyles_css.useCheckboxRadioField({
        ariaDescribedBy,
        baseId,
        isRequired,
        isReadonly,
        isDisabled,
        label,
        labelEdge,
        messages,
        hasValue,
        hasTopUserAssistance,
        hasBottomUserAssistance,
        parentComponentVariant
    });
    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
    const readonlyLabel = translations.formControl_readOnly();
    const isRadioSet = parentComponentVariant === 'radioSet';
    compat.useImperativeHandle(ref, () => ({
        focus: () => {
            if (!isDisabled) {
                const inputChildren = groupRef.current?.querySelectorAll('input') ?? [];
                const selectedChild = Array.from(inputChildren).find((child) => child.checked);
                if (selectedChild) {
                    selectedChild.focus();
                }
                else {
                    inputChildren[0].focus();
                }
            }
        },
        blur: () => {
            if (groupRef.current?.contains(document.activeElement)) {
                document.activeElement.blur();
            }
        }
    }));
    // the props from the hook are used for focus management on the radioset variant to allow for arrow navigation
    // while checkboxset uses tabbing
    const [isFocusRingShown, focusRingProps] = useCollectionFocusRing.useCollectionFocusRing(groupRef, isRadioSet ? ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'] : ['Tab']);
    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasTopUserAssistance && (jsxRuntime.jsx("div", { id: `${baseId}-top-ua-container`, class: labelEdge === 'start' ? CheckboxRadioFieldStyles_css.topUAContainerStyles.start : CheckboxRadioFieldStyles_css.topUAContainerStyles.top, children: jsxRuntime.jsx(InlineUserAssistance.InlineUserAssistanceContainer, { ...topUserAssistanceProps, testId: UAtestIdTop, children: jsxRuntime.jsx(InlineHelp.InlineHelp, { assistiveText: assistiveText, sourceLink: helpSourceLink, sourceText: helpSourceText }) }) })), jsxRuntime.jsx(Flex.Flex, { direction: direction, ...(direction === 'row' && { gap: [0, utils.xUnits(8)], wrap: 'wrap' }), children: jsxRuntime.jsx(CheckboxRadioContext.CheckboxRadioContext.Provider, { value: { isFocusRingShown }, children: children }) }), hasBottomUserAssistance ? (jsxRuntime.jsx(InlineUserAssistance.InlineUserAssistance, { ...bottomUserAssistanceProps, requiredAlignment: "start", messages: messages, userAssistanceDensity: userAssistanceDensity === 'reflow' ? 'reflow' : 'efficient', testId: UAtestIdBottom })) : userAssistanceDensity === 'reflow' ? undefined : (
            /* save space for user assistance if density is 'efficient' or 'compact', even though we don't
               render user assistance for disabled or readonly fields */
            jsxRuntime.jsx(InlineUserAssistance.InlineUserAssistance, { id: bottomUserAssistanceProps?.id, userAssistanceDensity: "efficient", testId: UAtestIdBottom }))] }));
    // The top level element needs the column span class on it.
    const classes = LayoutStyles_css.layoutSpanStyles.layoutSpanColumn[columnSpan];
    return (jsxRuntime.jsxs("div", { role: role, ref: groupRef, class: classes, ...groupProps, ...focusRingProps, ...testIdProps, children: [labelEdge === 'none' ? (content) : (jsxRuntime.jsx(CheckboxRadioLabelValueLayout, { parentComponentVariant: parentComponentVariant, hasTopUserAssistance: hasTopUserAssistance, label: jsxRuntime.jsx(Label.Label, { ...labelProps, variant: labelEdge, userAssistanceDensity: "efficient", parentComponentVariant: parentComponentVariant, children: label }), labelEdge: labelEdge, labelStartWidth: labelStartWidth, children: content })), isReadonly && (jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { id: readonlyId, isHidden: true, children: readonlyLabel }))] }));
});

exports.CheckboxRadioField = CheckboxRadioField;
//# sourceMappingURL=CheckboxRadioField-1bb0d57d.js.map
