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

var jsxRuntime = require('preact/jsx-runtime');
var compat = require('preact/compat');
require('./FormContext-9452bd30.js');
var useFormContext = require('./useFormContext-4c3091dc.js');
var FormFieldContext = require('./FormFieldContext-8418dc68.js');
require('preact/hooks');
var useFormFieldContextProps = require('./useFormFieldContextProps-8c04ed0f.js');
var preact = require('preact');
var useCollectionFocusRing = require('./useCollectionFocusRing-8e16f3d9.js');
var useTranslationBundle = require('./useTranslationBundle-38c0edae.js');
var Label = require('./Label-c51bd5de.js');
var InlineHelp = require('./InlineHelp-7c4897d2.js');
require('./logger-2b636482.js');
require('./TabbableModeContext-e99d527e.js');


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


require('./UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.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('./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 Grid = require('./Grid-2579fce6.js');
var refUtils = require('./refUtils-915b985d.js');
var useContainerBreakpoints = require('./useContainerBreakpoints-f1fb711a.js');
var RichSelectionStartContext = require('./RichSelectionStartContext-3d10f9ed.js');
var View = require('./View-216e5184.js');
var classNames = require('./classNames-c14c6ef3.js');
var useFormFieldContext = require('./useFormFieldContext-20f419ef.js');
var size = require('./size-0056ef1a.js');
var StyledLabelValueLayout = require('./StyledLabelValueLayout-5198483a.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 useMessageSeverity = require('./useMessageSeverity-cfc4ae9d.js');

const sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
const columnMatrix = {
    xl: { xl: 6, md: 4, sm: 4 },
    lg: { xl: 4, md: 3, sm: 3 },
    md: { xl: 3, md: 2, sm: 2 },
    sm: { xl: 2, md: 2, sm: 2 },
    xs: { xl: 1, md: 1, sm: 1 }
};
const breakpointSizes = {
    xs: '0px',
    sm: '600px',
    md: '768px',
    lg: '1024px',
    xl: '1440px'
};
const breakpointColumns = (breakpoints, layout) => {
    // incrementally go from largest to smallest breakpoint
    for (const size of sizes) {
        if (breakpoints[size]) {
            return columnMatrix[size][layout];
        }
    }
    // defaults to xs columns if no breakpoints are true
    return columnMatrix['xs'][layout];
};
/**
 * Hook to be used with rich selection items that are in a grid layout within RichSelectionField
 * @returns An object containing a ref to be placed on the container and a string
 * with the calculated grid template columns to be placed on the Grid component
 */
const useRichSelectionGrid = () => {
    const context = RichSelectionStartContext.useRichSelectionContext();
    const { breakpointMatches, ref } = useContainerBreakpoints.useContainerBreakpoints(breakpointSizes);
    return {
        ref: ref,
        gridTemplateColumns: context !== null ? `repeat(${breakpointColumns(breakpointMatches, context.layout)}, 1fr)` : ''
    };
};

var richLabelInnerStyles = {insideRichRadioSet:'RichLabelValueLayoutStyles_richLabelInnerStyles_insideRichRadioSet__3a9bpp0',startRichRadioSetWithoutTopUA:'RichLabelValueLayoutStyles_richLabelInnerStyles_startRichRadioSetWithoutTopUA__3a9bpp1',startXLRichRadioSetWithoutTopUA:'RichLabelValueLayoutStyles_richLabelInnerStyles_startXLRichRadioSetWithoutTopUA__3a9bpp2',startMDRichRadioSetWithoutTopUAOrSecondaryText:'RichLabelValueLayoutStyles_richLabelInnerStyles_startMDRichRadioSetWithoutTopUAOrSecondaryText__3a9bpp3',startMDRichRadioSetWithoutMediaTopUAOrSecondaryText:'RichLabelValueLayoutStyles_richLabelInnerStyles_startMDRichRadioSetWithoutMediaTopUAOrSecondaryText__3a9bpp4',startSMRichRadioSetWithoutTopUAOrSecondaryText:'RichLabelValueLayoutStyles_richLabelInnerStyles_startSMRichRadioSetWithoutTopUAOrSecondaryText__3a9bpp5',startSMRichRadioSetWithoutMediaTopUAOrSecondaryText:'RichLabelValueLayoutStyles_richLabelInnerStyles_startSMRichRadioSetWithoutMediaTopUAOrSecondaryText__3a9bpp6',insideRichCheckboxSet:'RichLabelValueLayoutStyles_richLabelInnerStyles_insideRichCheckboxSet__3a9bpp7',startRichCheckboxSetWithoutTopUA:'RichLabelValueLayoutStyles_richLabelInnerStyles_startRichCheckboxSetWithoutTopUA__3a9bpp8',startXLRichCheckboxSetWithoutTopUA:'RichLabelValueLayoutStyles_richLabelInnerStyles_startXLRichCheckboxSetWithoutTopUA__3a9bpp9',startMDRichCheckboxSetWithoutTopUAOrSecondaryText:'RichLabelValueLayoutStyles_richLabelInnerStyles_startMDRichCheckboxSetWithoutTopUAOrSecondaryText__3a9bppa',startMDRichCheckboxSetWithoutMediaTopUAOrSecondaryText:'RichLabelValueLayoutStyles_richLabelInnerStyles_startMDRichCheckboxSetWithoutMediaTopUAOrSecondaryText__3a9bppb',startSMRichCheckboxSetWithoutTopUAOrSecondaryText:'RichLabelValueLayoutStyles_richLabelInnerStyles_startSMRichCheckboxSetWithoutTopUAOrSecondaryText__3a9bppc',startSMRichCheckboxSetWithoutMediaTopUAOrSecondaryText:'RichLabelValueLayoutStyles_richLabelInnerStyles_startSMRichCheckboxSetWithoutMediaTopUAOrSecondaryText__3a9bppd'};

/**
 * A layout component for rendering a label and value pair, used in form components
 * such as RichCheckboxSet and RichRadioSet.
 */
const RichLabelValueLayout = ({ label, labelEdge, children, labelStartWidth = '33%', parentComponentVariant, hasTopUserAssistance = false, hasSecondaryText = false, hasMedia = 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 richSelectionContext = RichSelectionStartContext.useRichSelectionContext();
    const isRichRadio = parentComponentVariant === 'richRadioSet';
    const isRichCheckbox = parentComponentVariant === 'richCheckboxSet';
    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 } = 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([
        isRichRadio && radioTheme,
        isRichCheckbox && checkboxTheme,
        labelTheme,
        formLayoutTheme,
        StyledLabelValueLayout.labelInnerStyles.base,
        isStart && StyledLabelValueLayout.labelInnerStyles.start,
        isRichRadio && isInside && richLabelInnerStyles.insideRichRadioSet,
        isRichCheckbox && isInside && richLabelInnerStyles.insideRichCheckboxSet,
        // Rich Radioset
        isRichRadio &&
            isStart &&
            !hasTopUserAssistance &&
            richSelectionContext?.layout !== 'xl' &&
            richLabelInnerStyles.startRichRadioSetWithoutTopUA,
        isRichRadio &&
            isStart &&
            !hasTopUserAssistance &&
            richSelectionContext?.layout === 'xl' &&
            richLabelInnerStyles.startXLRichRadioSetWithoutTopUA,
        isRichRadio &&
            isStart &&
            richSelectionContext?.layout === 'md' &&
            !hasTopUserAssistance &&
            !hasSecondaryText &&
            hasMedia &&
            richLabelInnerStyles.startMDRichRadioSetWithoutTopUAOrSecondaryText,
        isRichRadio &&
            isStart &&
            richSelectionContext?.layout === 'md' &&
            !hasTopUserAssistance &&
            !hasSecondaryText &&
            !hasMedia &&
            richLabelInnerStyles.startMDRichRadioSetWithoutMediaTopUAOrSecondaryText,
        isRichRadio &&
            isStart &&
            richSelectionContext?.layout === 'sm' &&
            !hasTopUserAssistance &&
            !hasSecondaryText &&
            hasMedia &&
            richLabelInnerStyles.startSMRichRadioSetWithoutTopUAOrSecondaryText,
        isRichRadio &&
            isStart &&
            richSelectionContext?.layout === 'sm' &&
            !hasTopUserAssistance &&
            !hasSecondaryText &&
            !hasMedia &&
            richLabelInnerStyles.startSMRichRadioSetWithoutMediaTopUAOrSecondaryText,
        // Rich Checkboxset
        isRichCheckbox &&
            isStart &&
            !hasTopUserAssistance &&
            richSelectionContext?.layout !== 'xl' &&
            richLabelInnerStyles.startRichCheckboxSetWithoutTopUA,
        isRichCheckbox &&
            isStart &&
            !hasTopUserAssistance &&
            richSelectionContext?.layout === 'xl' &&
            richLabelInnerStyles.startXLRichCheckboxSetWithoutTopUA,
        isRichCheckbox &&
            isStart &&
            richSelectionContext?.layout === 'md' &&
            !hasTopUserAssistance &&
            !hasSecondaryText &&
            hasMedia &&
            richLabelInnerStyles.startMDRichCheckboxSetWithoutTopUAOrSecondaryText,
        isRichCheckbox &&
            isStart &&
            richSelectionContext?.layout === 'md' &&
            !hasTopUserAssistance &&
            !hasSecondaryText &&
            !hasMedia &&
            richLabelInnerStyles.startMDRichCheckboxSetWithoutMediaTopUAOrSecondaryText,
        isRichCheckbox &&
            isStart &&
            richSelectionContext?.layout === 'sm' &&
            !hasTopUserAssistance &&
            !hasSecondaryText &&
            hasMedia &&
            richLabelInnerStyles.startSMRichCheckboxSetWithoutTopUAOrSecondaryText,
        isRichCheckbox &&
            isStart &&
            richSelectionContext?.layout === 'sm' &&
            !hasTopUserAssistance &&
            !hasSecondaryText &&
            !hasMedia &&
            richLabelInnerStyles.startSMRichCheckboxSetWithoutMediaTopUAOrSecondaryText
    ]);
    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 }));
};

/**
 * Internal component use by rich selection components to manage focus and layout labels and messages
 */
const RichSelectionField = compat.forwardRef(({ 'aria-describedby': ariaDescribedBy, assistiveText, baseId, children, columnSpan = 1, hasValue, helpSourceLink, helpSourceText, isDisabled, isReadonly, isRequired, label, labelEdge, labelStartWidth = '33%', messages, parentComponentVariant, role, testId, userAssistanceDensity }, 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: parentComponentVariant === 'richRadioSet' ? 'radioSet' : 'checkboxSet'
    });
    const [startData, setStartData] = compat.useState({
        hasMedia: false,
        hasSecondaryText: false
    });
    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
    const readonlyLabel = translations.formControl_readOnly();
    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, parentComponentVariant === 'richRadioSet'
        ? ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft']
        : ['Tab']);
    const { gridTemplateColumns, ref: breakpointRef } = useRichSelectionGrid();
    const memoizedChildren = compat.useMemo(() => {
        return preact.toChildArray(children).map((child, index) => {
            // we only need to wrap children with starting labels in context because they are the only ones
            // that can conditionally apply min-height and set the startData
            return labelEdge === 'start' ? (
            // the first child is the one that will set the startData
            jsxRuntime.jsx(RichSelectionStartContext.RichSelectionStartContext.Provider, { value: { setStartData, isFirst: index === 0 }, children: child })) : (child);
        });
    }, [children, labelEdge]);
    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(View.View, { padding: ['2x', 0], width: "100%", children: jsxRuntime.jsx(Grid.Grid, { gridTemplateColumns: gridTemplateColumns, gap: "6x", role: "list", children: jsxRuntime.jsx(CheckboxRadioContext.CheckboxRadioContext.Provider, { value: { isFocusRingShown }, children: memoizedChildren }) }) }), 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", { ref: refUtils.mergeRefs(groupRef, breakpointRef), class: classes, role: role, ...groupProps, ...focusRingProps, ...testIdProps, children: [labelEdge === 'none' ? (content) : (jsxRuntime.jsx(RichLabelValueLayout, { parentComponentVariant: parentComponentVariant, hasTopUserAssistance: hasTopUserAssistance, hasSecondaryText: startData.hasSecondaryText, hasMedia: startData.hasMedia, 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 }))] }));
});

/**
 * Internal component used by Rich Selection components to provide context and wrap RichSelectionField
 */
const BaseRichSelection = compat.forwardRef(({ 'aria-describedby': ariaDescribedBy, assistiveText, baseId, children, columnSpan, helpSourceLink, helpSourceText, isDisabled: propIsDisabled, isReadonly: propIsReadonly, isRequired, label, labelEdge: propLabelEdge, labelStartWidth: propLabelStartWidth, layout, messages, selection, testId, userAssistanceDensity: propUserAssistanceDensity, value }, ref = null) => {
    const hasValue = value != null && (selection === 'single' || value.size > 0);
    const { isDisabled: isFormDisabled, isReadonly: isFormReadonly, labelEdge: formLabelEdge, labelStartWidth: formLabelStartWidth, userAssistanceDensity: formUserAssistanceDensity } = useFormContext.useFormContext();
    // default to FormContext values if component properties are not specified
    const isDisabled = propIsDisabled ?? isFormDisabled;
    const isReadonly = propIsReadonly ?? isFormReadonly;
    const labelEdge = propLabelEdge ?? formLabelEdge;
    const labelStartWidth = propLabelStartWidth ?? formLabelStartWidth;
    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;
    const formFieldContext = useFormFieldContextProps.useFormFieldContextProps({
        hasValue,
        isDisabled,
        isReadonly
    });
    // rich selection only need to be aware of error severity
    const messageSeverity = useMessageSeverity.useMessageSeverity(messages) === 'error' ? 'error' : undefined;
    return (jsxRuntime.jsx(FormFieldContext.FormFieldContext.Provider, { value: formFieldContext, children: jsxRuntime.jsx(RichSelectionStartContext.RichSelectionContext.Provider, { value: {
                selection,
                layout,
                messageSeverity
            }, children: jsxRuntime.jsx(RichSelectionField, { "aria-describedby": ariaDescribedBy, assistiveText: assistiveText, baseId: baseId, columnSpan: columnSpan, hasValue: hasValue, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, isDisabled: isDisabled, isReadonly: isReadonly, isRequired: isRequired, label: label, labelEdge: labelEdge, labelStartWidth: labelStartWidth, messages: messages, parentComponentVariant: selection === 'single' ? 'richRadioSet' : 'richCheckboxSet', ref: ref, role: selection === 'single' ? 'radiogroup' : 'group', testId: testId, userAssistanceDensity: userAssistanceDensity, children: children }) }) }));
});

exports.BaseRichSelection = BaseRichSelection;
//# sourceMappingURL=BaseRichSelection-07d33b2a.js.map
