/* @oracle/oraclejet-preact: undefined */
import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
import { forwardRef, useRef, useImperativeHandle } from 'preact/compat';
import { u as useCollectionFocusRing } from './useCollectionFocusRing-de20f4fc.js';
import { u as useTranslationBundle } from './useTranslationBundle-09302c20.js';
import { F as Flex } from './Flex-ce31b351.js';
import { L as Label } from './Label-25eba25e.js';
import { I as InlineHelp } from './InlineHelp-da344cfa.js';
import './logger-c92f309c.js';
import './TabbableModeContext-7d8ad946.js';
import 'preact/hooks';
import './UserAssistanceStyles.styles.css';
import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.styles.css';
import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js';
import { I as InlineUserAssistanceContainer, a as InlineUserAssistance } from './InlineUserAssistance-65ca8810.js';
import './MessageBannerStyles.styles.css';
import './UNSAFE_MessageBanner/themes/redwood/MessageBannerBaseTheme.styles.css';
import './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js';
import 'preact';
import { x as xUnits } from './utils-a4102e03.js';
import { u as useTestId } from './useTestId-9b504481.js';
import './LayerHost-e6402730.js';
import './TooltipContentStyles.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
import './tooltipUtils-768450a7.js';
import './IconStyle.styles.css';
import './IconButton-19fcf0a8.js';
import './MessageStyles.styles.css';
import './MessageFormattingUtils-34c9b1aa.js';
import './TransitionGroup-5fd80dc9.js';
import './MessagesContext-76544845.js';
import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
import './ComponentMessageStyles.styles.css';
import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageBaseTheme.styles.css';
import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js';
import './FormFieldContext-68eb5946.js';
import './Popup-d8bf7f4d.js';
import './UNSAFE_Separator/themes/SeparatorStyles.css.js';
import './LabelStyles.styles.css';
import './UNSAFE_Label/themes/redwood/LabelBaseTheme.styles.css';
import './UNSAFE_Label/themes/redwood/LabelVariants.css.js';
import './UNSAFE_Popup/themes/redwood/PopupBaseTheme.styles.css';
import './UNSAFE_Popup/themes/redwood/PopupVariants.css.js';
import { u as useCheckboxRadioField, t as topUAContainerStyles } from './CheckboxRadioFieldStyles.css-cf673ef0.js';
import { C as CheckboxRadioContext } from './CheckboxRadioContext-fe425383.js';
import { l as layoutSpanStyles } from './LayoutStyles.css-8a60c28c.js';
import { c as classNames } from './classNames-4e12b00d.js';
import './FormContext-4d71f9c7.js';
import { u as useFormContext } from './useFormContext-875cacd7.js';
import { u as useFormFieldContext } from './useFormFieldContext-626574fd.js';
import { s as sizeToCSS } from './size-18139a3a.js';
import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
import { RadioRedwoodTheme } from './UNSAFE_RadioItem/themes/redwood/RadioTheme.js';
import { LabelRedwoodTheme } from './UNSAFE_Label/themes/redwood/LabelTheme.js';
import { FormLayoutRedwoodTheme } from './UNSAFE_TextField/themes/redwood/FormLayoutTheme.js';
import { CheckboxRedwoodTheme } from './UNSAFE_Checkbox/themes/redwood/CheckboxTheme.js';
import { l as labelSlotStyles, a as labelInnerStyles, S as StyledLabelValueLayout } from './StyledLabelValueLayout-d4881d3b.js';
import './CheckboxRadioLabelValueLayoutStyles.styles.css';

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(RadioRedwoodTheme);
    const { baseTheme: checkboxTheme } = useComponentTheme(CheckboxRedwoodTheme);
    const { baseTheme: labelTheme } = useComponentTheme(LabelRedwoodTheme);
    const { baseTheme: formLayoutTheme } = useComponentTheme(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 = 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();
    const { isReadonly } = useFormFieldContext();
    const isPureReadonly = (isFormLayout && isFormReadonly) || (!isFormLayout && isReadonly);
    const labelStyleClasses = classNames([
        formLayoutTheme,
        labelSlotStyles.base,
        isStart && labelSlotStyles.start,
        isTop && labelSlotStyles.top,
        isTop && hasTopUserAssistance && labelSlotStyles.topAndTopUA,
        isTop && isPureReadonly && labelSlotStyles.topPureReadonly
    ]);
    const labelInnerClasses = classNames([
        isRadio && radioTheme,
        isCheckbox && checkboxTheme,
        labelTheme,
        formLayoutTheme,
        labelInnerStyles.base,
        isStart && labelInnerStyles.start,
        isRadio && isInside && checkboxRadioLabelInnerStyles.insideRadioSet,
        isCheckbox && isInside && checkboxRadioLabelInnerStyles.insideCheckboxSet,
        isRadio &&
            isStart &&
            !hasTopUserAssistance &&
            checkboxRadioLabelInnerStyles.startRadioSetWithoutTopUA,
        isCheckbox &&
            isStart &&
            !hasTopUserAssistance &&
            checkboxRadioLabelInnerStyles.startCheckboxSetWithoutTopUA,
        labelWrapping === 'truncate' && labelInnerStyles.noWrap
    ]);
    return (jsx(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 = 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(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 = useRef(null);
    const { groupProps, labelProps, topUserAssistanceProps, bottomUserAssistanceProps, readonlyId } = useCheckboxRadioField({
        ariaDescribedBy,
        baseId,
        isRequired,
        isReadonly,
        isDisabled,
        label,
        labelEdge,
        messages,
        hasValue,
        hasTopUserAssistance,
        hasBottomUserAssistance,
        parentComponentVariant
    });
    const translations = useTranslationBundle('@oracle/oraclejet-preact');
    const readonlyLabel = translations.formControl_readOnly();
    const isRadioSet = parentComponentVariant === 'radioSet';
    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(groupRef, isRadioSet ? ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'] : ['Tab']);
    const content = (jsxs(Fragment, { children: [hasTopUserAssistance && (jsx("div", { id: `${baseId}-top-ua-container`, class: labelEdge === 'start' ? topUAContainerStyles.start : topUAContainerStyles.top, children: jsx(InlineUserAssistanceContainer, { ...topUserAssistanceProps, testId: UAtestIdTop, children: jsx(InlineHelp, { assistiveText: assistiveText, sourceLink: helpSourceLink, sourceText: helpSourceText }) }) })), jsx(Flex, { direction: direction, ...(direction === 'row' && { gap: [0, xUnits(8)], wrap: 'wrap' }), children: jsx(CheckboxRadioContext.Provider, { value: { isFocusRingShown }, children: children }) }), hasBottomUserAssistance ? (jsx(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 */
            jsx(InlineUserAssistance, { id: bottomUserAssistanceProps?.id, userAssistanceDensity: "efficient", testId: UAtestIdBottom }))] }));
    // The top level element needs the column span class on it.
    const classes = layoutSpanStyles.layoutSpanColumn[columnSpan];
    return (jsxs("div", { role: role, ref: groupRef, class: classes, ...groupProps, ...focusRingProps, ...testIdProps, children: [labelEdge === 'none' ? (content) : (jsx(CheckboxRadioLabelValueLayout, { parentComponentVariant: parentComponentVariant, hasTopUserAssistance: hasTopUserAssistance, label: jsx(Label, { ...labelProps, variant: labelEdge, userAssistanceDensity: "efficient", parentComponentVariant: parentComponentVariant, children: label }), labelEdge: labelEdge, labelStartWidth: labelStartWidth, children: content })), isReadonly && (jsx(HiddenAccessible, { id: readonlyId, isHidden: true, children: readonlyLabel }))] }));
});

export { CheckboxRadioField as C };
//# sourceMappingURL=CheckboxRadioField-294463ba.js.map
