/* @oracle/oraclejet-preact: undefined */
import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
import { forwardRef, useRef, useState, useImperativeHandle, useMemo } from 'preact/compat';
import './FormContext-4d71f9c7.js';
import { u as useFormContext } from './useFormContext-875cacd7.js';
import { F as FormFieldContext } from './FormFieldContext-68eb5946.js';
import 'preact/hooks';
import { u as useFormFieldContextProps } from './useFormFieldContextProps-d07cd618.js';
import { toChildArray } from 'preact';
import { u as useCollectionFocusRing } from './useCollectionFocusRing-de20f4fc.js';
import { u as useTranslationBundle } from './useTranslationBundle-09302c20.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 './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 './Flex-ce31b351.js';
import './MessageBannerStyles.styles.css';
import './UNSAFE_MessageBanner/themes/redwood/MessageBannerBaseTheme.styles.css';
import './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.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 './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 { G as Grid } from './Grid-421eb560.js';
import { m as mergeRefs } from './refUtils-b9d8d91a.js';
import { u as useContainerBreakpoints } from './useContainerBreakpoints-2c61e063.js';
import { u as useRichSelectionContext, R as RichSelectionStartContext, a as RichSelectionContext } from './RichSelectionStartContext-3fc472e0.js';
import { V as View } from './View-afe98b65.js';
import { c as classNames } from './classNames-4e12b00d.js';
import { u as useFormFieldContext } from './useFormFieldContext-626574fd.js';
import { s as sizeToCSS } from './size-18139a3a.js';
import { l as labelSlotStyles, a as labelInnerStyles, S as StyledLabelValueLayout } from './StyledLabelValueLayout-d4881d3b.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 './RichLabelValueLayoutStyles.styles.css';
import { u as useMessageSeverity } from './useMessageSeverity-65295e8f.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 = useRichSelectionContext();
    const { breakpointMatches, ref } = 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(RadioRedwoodTheme);
    const { baseTheme: checkboxTheme } = useComponentTheme(CheckboxRedwoodTheme);
    const { baseTheme: labelTheme } = useComponentTheme(LabelRedwoodTheme);
    const { baseTheme: formLayoutTheme } = useComponentTheme(FormLayoutRedwoodTheme);
    const richSelectionContext = 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 = 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();
    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([
        isRichRadio && radioTheme,
        isRichCheckbox && checkboxTheme,
        labelTheme,
        formLayoutTheme,
        labelInnerStyles.base,
        isStart && 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 (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 }));
};

/**
 * Internal component use by rich selection components to manage focus and layout labels and messages
 */
const RichSelectionField = 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(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: parentComponentVariant === 'richRadioSet' ? 'radioSet' : 'checkboxSet'
    });
    const [startData, setStartData] = useState({
        hasMedia: false,
        hasSecondaryText: false
    });
    const translations = useTranslationBundle('@oracle/oraclejet-preact');
    const readonlyLabel = translations.formControl_readOnly();
    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, parentComponentVariant === 'richRadioSet'
        ? ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft']
        : ['Tab']);
    const { gridTemplateColumns, ref: breakpointRef } = useRichSelectionGrid();
    const memoizedChildren = useMemo(() => {
        return 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
            jsx(RichSelectionStartContext.Provider, { value: { setStartData, isFirst: index === 0 }, children: child })) : (child);
        });
    }, [children, labelEdge]);
    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(View, { padding: ['2x', 0], width: "100%", children: jsx(Grid, { gridTemplateColumns: gridTemplateColumns, gap: "6x", role: "list", children: jsx(CheckboxRadioContext.Provider, { value: { isFocusRingShown }, children: memoizedChildren }) }) }), 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", { ref: mergeRefs(groupRef, breakpointRef), class: classes, role: role, ...groupProps, ...focusRingProps, ...testIdProps, children: [labelEdge === 'none' ? (content) : (jsx(RichLabelValueLayout, { parentComponentVariant: parentComponentVariant, hasTopUserAssistance: hasTopUserAssistance, hasSecondaryText: startData.hasSecondaryText, hasMedia: startData.hasMedia, 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 }))] }));
});

/**
 * Internal component used by Rich Selection components to provide context and wrap RichSelectionField
 */
const BaseRichSelection = 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();
    // 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({
        hasValue,
        isDisabled,
        isReadonly
    });
    // rich selection only need to be aware of error severity
    const messageSeverity = useMessageSeverity(messages) === 'error' ? 'error' : undefined;
    return (jsx(FormFieldContext.Provider, { value: formFieldContext, children: jsx(RichSelectionContext.Provider, { value: {
                selection,
                layout,
                messageSeverity
            }, children: 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 }) }) }));
});

export { BaseRichSelection as B };
//# sourceMappingURL=BaseRichSelection-72edca7c.js.map
