@oracle/oraclejet-preact 19.0.0 → 19.0.2

package/cjs/BaseRichSelection-9b1ada4d.js

@@ -0,0 +1,345 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var compat = require('preact/compat');
+require('./FormContext-d1d05967.js');
+var useFormContext = require('./useFormContext-a794f7b6.js');
+var FormFieldContext = require('./FormFieldContext-69fe83d2.js');
+require('preact/hooks');
+var useFormFieldContextProps = require('./useFormFieldContextProps-0fa67f6c.js');
+var preact = require('preact');
+var useCollectionFocusRing = require('./useCollectionFocusRing-7fcfe8f7.js');
+var useTranslationBundle = require('./useTranslationBundle-24c593f4.js');
+var Label = require('./Label-670472a7.js');
+var InlineHelp = require('./InlineHelp-8097a102.js');
+require('./logger-2b636482.js');
+require('./TabbableModeContext-e99d527e.js');
+
+
+require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js');
+var InlineUserAssistance = require('./InlineUserAssistance-74680664.js');
+require('./Flex-a6d1c038.js');
+
+
+require('./UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js');
+var useTestId = require('./useTestId-15ee37d6.js');
+require('./LayerHost-f1a1533f.js');
+
+
+require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
+require('./tooltipUtils-842e04c7.js');
+
+require('./IconButton-7ebfcb64.js');
+
+require('./MessageFormattingUtils-539d75b0.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-91e33a1d.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-b526d45d.js');
+var CheckboxRadioContext = require('./CheckboxRadioContext-3b134bd1.js');
+var LayoutStyles_css = require('./LayoutStyles.css-b4025421.js');
+var Grid = require('./Grid-44ca9332.js');
+var refUtils = require('./refUtils-a9872e75.js');
+var useContainerBreakpoints = require('./useContainerBreakpoints-f1fb711a.js');
+var RichSelectionStartContext = require('./RichSelectionStartContext-3d10f9ed.js');
+var View = require('./View-251db2a6.js');
+var classNames = require('./classNames-c14c6ef3.js');
+var useFormFieldContext = require('./useFormFieldContext-4632eb73.js');
+var StyledLabelValueLayout = require('./StyledLabelValueLayout-dd89f379.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 formControlUtils = require('./formControlUtils-3a7c7b5d.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 = ({ columnSpan = 1, 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';
+    // JET-68190 - labelStartWidth needs to take columnSpan into account
+    const width = formControlUtils.computeStartLabelWidth(labelStartWidth, columnSpan);
+    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 fields
+    const hasBottomUserAssistance = !isDisabled;
+    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' && !hasTopUserAssistance ? (
+            // 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, hasTopUserAssistance, 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 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, { columnSpan: columnSpan, 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-9b1ada4d.js.map

package/cjs/BaseRichSelection-9b1ada4d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseRichSelection-9b1ada4d.js","sources":["../../src/PRIVATE_RichSelectionCommon/useRichSelectionGrid.ts","../../src/PRIVATE_RichSelectionCommon/RichLabelValueLayout.tsx","../../src/PRIVATE_RichSelectionCommon/RichSelectionField.tsx","../../src/PRIVATE_RichSelectionCommon/BaseRichSelection.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { Ref } from 'preact';\nimport { useContainerBreakpoints } from '#hooks/UNSAFE_useContainerBreakpoints';\nimport {\n  useRichSelectionContext,\n  type RichSelectionContextValue\n} from '#PRIVATE_RichSelectionCommon/RichSelectionContext';\n\nconst sizes = ['xl', 'lg', 'md', 'sm', 'xs'] as const;\n\nconst columnMatrix = {\n  xl: { xl: 6, md: 4, sm: 4 },\n  lg: { xl: 4, md: 3, sm: 3 },\n  md: { xl: 3, md: 2, sm: 2 },\n  sm: { xl: 2, md: 2, sm: 2 },\n  xs: { xl: 1, md: 1, sm: 1 }\n} as const;\n\nconst breakpointSizes = {\n  xs: '0px',\n  sm: '600px',\n  md: '768px',\n  lg: '1024px',\n  xl: '1440px'\n} as const;\n\nconst breakpointColumns = (\n  breakpoints: Record<(typeof sizes)[number], boolean>,\n  layout: RichSelectionContextValue['layout']\n) => {\n  // incrementally go from largest to smallest breakpoint\n  for (const size of sizes) {\n    if (breakpoints[size]) {\n      return columnMatrix[size][layout];\n    }\n  }\n  // defaults to xs columns if no breakpoints are true\n  return columnMatrix['xs'][layout];\n};\n/**\n * Hook to be used with rich selection items that are in a grid layout within RichSelectionField\n * @returns An object containing a ref to be placed on the container and a string\n * with the calculated grid template columns to be placed on the Grid component\n */\nconst useRichSelectionGrid = () => {\n  const context = useRichSelectionContext()!;\n  const { breakpointMatches, ref } = useContainerBreakpoints(breakpointSizes);\n\n  return {\n    ref: ref as Ref<HTMLDivElement>,\n    gridTemplateColumns:\n      context !== null ? `repeat(${breakpointColumns(breakpointMatches, context.layout)}, 1fr)` : ''\n  };\n};\n\nexport { useRichSelectionGrid };\n","import { ComponentChildren, JSX } from 'preact';\n\nimport { classNames } from '#utils/UNSAFE_classNames';\nimport { useFormContext } from '#hooks/UNSAFE_useFormContext';\nimport { useFormFieldContext } from '#hooks/UNSAFE_useFormFieldContext';\nimport { Size } from '#utils/UNSAFE_size';\nimport {\n  labelSlotStyles,\n  labelInnerStyles\n} from '../UNSAFE_LabelValueLayout/LabelValueLayoutStyles.css';\n\nimport { useComponentTheme } from '#hooks/UNSAFE_useComponentTheme';\nimport { RadioRedwoodTheme } from '#UNSAFE_RadioItem/themes/redwood/RadioTheme';\nimport { LabelRedwoodTheme } from '#UNSAFE_Label/themes/redwood/LabelTheme';\nimport { FormLayoutRedwoodTheme } from '#UNSAFE_TextField/themes/redwood/FormLayoutTheme';\nimport { CheckboxRedwoodTheme } from '#UNSAFE_Checkbox/themes/redwood/CheckboxTheme';\nimport { useRichSelectionContext } from '#PRIVATE_RichSelectionCommon/RichSelectionContext';\nimport { StyledLabelValueLayout } from '../UNSAFE_LabelValueLayout/StyledLabelValueLayout';\nimport { richLabelInnerStyles } from './RichLabelValueLayoutStyles.css';\nimport { LayoutColumnSpan } from '#utils/UNSAFE_styles/Layout';\nimport { computeStartLabelWidth } from '#utils/UNSAFE_formControlUtils';\n\ntype Props = {\n  /**\n   * Specifies how many columns to span in a FormLayout with direction === 'row'\n   */\n  columnSpan?: LayoutColumnSpan;\n  /**\n   * Defines how the label is going to be positioned. For RichCheckboxSet or RichRadioSet the start, top and inside values are supported.\n   */\n  labelEdge?: 'start' | 'top' | 'inside';\n  /**\n   * Specifies if the parent component is a RichCheckboxSet or RichRadioSet\n   */\n  parentComponentVariant: 'richRadioSet' | 'richCheckboxSet';\n  /**\n   * Specifies if there is assistive text or links at the top of the component below the label\n   */\n  hasTopUserAssistance?: boolean;\n  /**\n   * Specifies if there is secondary text for the Rich Selection Items\n   */\n  hasSecondaryText?: boolean;\n  /**\n   * Specifies if there is media for the Rich Selection Items\n   */\n  hasMedia?: boolean;\n  /**\n   * Label content of the layout\n   */\n  label?: ComponentChildren;\n  /**\n   * Defines the label width for labelEdge 'start' ('top' is always 100%)\n   */\n  labelStartWidth?: Size;\n  /**\n   * Value content of the layout\n   */\n  children: ComponentChildren;\n};\n\n/**\n * A layout component for rendering a label and value pair, used in form components\n * such as RichCheckboxSet and RichRadioSet.\n */\nexport const RichLabelValueLayout = ({\n  columnSpan = 1,\n  label,\n  labelEdge,\n  children,\n  labelStartWidth = '33%',\n  parentComponentVariant,\n  hasTopUserAssistance = false,\n  hasSecondaryText = false,\n  hasMedia = false\n}: Props) => {\n  const { baseTheme: radioTheme } = useComponentTheme(RadioRedwoodTheme);\n  const { baseTheme: checkboxTheme } = useComponentTheme(CheckboxRedwoodTheme);\n  const { baseTheme: labelTheme } = useComponentTheme(LabelRedwoodTheme);\n  const { baseTheme: formLayoutTheme } = useComponentTheme(FormLayoutRedwoodTheme);\n  const richSelectionContext = useRichSelectionContext();\n  const isRichRadio = parentComponentVariant === 'richRadioSet';\n  const isRichCheckbox = parentComponentVariant === 'richCheckboxSet';\n  const isStart = labelEdge === 'start';\n  const isTop = labelEdge === 'top' || labelEdge === 'inside'; // 'inside' needs to pick up all 'top' styles.\n  const isInside = labelEdge === 'inside';\n\n  // JET-68190 - labelStartWidth needs to take columnSpan into account\n  const width = computeStartLabelWidth(labelStartWidth, columnSpan);\n  const valueWidth = `calc(100% - ${width})`;\n\n  const labelStyles: JSX.CSSProperties = isStart\n    ? { flexBasis: width, width: width, maxWidth: width }\n    : {};\n\n  const valueStyles: JSX.CSSProperties = isStart\n    ? { flexBasis: valueWidth, width: valueWidth, maxWidth: valueWidth }\n    : {};\n\n  const { isFormLayout, isReadonly: isFormReadonly } = useFormContext();\n  const { isReadonly } = useFormFieldContext();\n  const isPureReadonly = (isFormLayout && isFormReadonly) || (!isFormLayout && isReadonly);\n\n  const labelStyleClasses = classNames([\n    formLayoutTheme,\n    labelSlotStyles.base,\n    isStart && labelSlotStyles.start,\n    isTop && labelSlotStyles.top,\n    isTop && hasTopUserAssistance && labelSlotStyles.topAndTopUA,\n    isTop && isPureReadonly && labelSlotStyles.topPureReadonly\n  ]);\n\n  const labelInnerClasses = classNames([\n    isRichRadio && radioTheme,\n    isRichCheckbox && checkboxTheme,\n    labelTheme,\n    formLayoutTheme,\n    labelInnerStyles.base,\n    isStart && labelInnerStyles.start,\n    isRichRadio && isInside && richLabelInnerStyles.insideRichRadioSet,\n    isRichCheckbox && isInside && richLabelInnerStyles.insideRichCheckboxSet,\n\n    // Rich Radioset\n    isRichRadio &&\n      isStart &&\n      !hasTopUserAssistance &&\n      richSelectionContext?.layout !== 'xl' &&\n      richLabelInnerStyles.startRichRadioSetWithoutTopUA,\n\n    isRichRadio &&\n      isStart &&\n      !hasTopUserAssistance &&\n      richSelectionContext?.layout === 'xl' &&\n      richLabelInnerStyles.startXLRichRadioSetWithoutTopUA,\n\n    isRichRadio &&\n      isStart &&\n      richSelectionContext?.layout === 'md' &&\n      !hasTopUserAssistance &&\n      !hasSecondaryText &&\n      hasMedia &&\n      richLabelInnerStyles.startMDRichRadioSetWithoutTopUAOrSecondaryText,\n\n    isRichRadio &&\n      isStart &&\n      richSelectionContext?.layout === 'md' &&\n      !hasTopUserAssistance &&\n      !hasSecondaryText &&\n      !hasMedia &&\n      richLabelInnerStyles.startMDRichRadioSetWithoutMediaTopUAOrSecondaryText,\n\n    isRichRadio &&\n      isStart &&\n      richSelectionContext?.layout === 'sm' &&\n      !hasTopUserAssistance &&\n      !hasSecondaryText &&\n      hasMedia &&\n      richLabelInnerStyles.startSMRichRadioSetWithoutTopUAOrSecondaryText,\n\n    isRichRadio &&\n      isStart &&\n      richSelectionContext?.layout === 'sm' &&\n      !hasTopUserAssistance &&\n      !hasSecondaryText &&\n      !hasMedia &&\n      richLabelInnerStyles.startSMRichRadioSetWithoutMediaTopUAOrSecondaryText,\n\n    // Rich Checkboxset\n    isRichCheckbox &&\n      isStart &&\n      !hasTopUserAssistance &&\n      richSelectionContext?.layout !== 'xl' &&\n      richLabelInnerStyles.startRichCheckboxSetWithoutTopUA,\n\n    isRichCheckbox &&\n      isStart &&\n      !hasTopUserAssistance &&\n      richSelectionContext?.layout === 'xl' &&\n      richLabelInnerStyles.startXLRichCheckboxSetWithoutTopUA,\n\n    isRichCheckbox &&\n      isStart &&\n      richSelectionContext?.layout === 'md' &&\n      !hasTopUserAssistance &&\n      !hasSecondaryText &&\n      hasMedia &&\n      richLabelInnerStyles.startMDRichCheckboxSetWithoutTopUAOrSecondaryText,\n\n    isRichCheckbox &&\n      isStart &&\n      richSelectionContext?.layout === 'md' &&\n      !hasTopUserAssistance &&\n      !hasSecondaryText &&\n      !hasMedia &&\n      richLabelInnerStyles.startMDRichCheckboxSetWithoutMediaTopUAOrSecondaryText,\n\n    isRichCheckbox &&\n      isStart &&\n      richSelectionContext?.layout === 'sm' &&\n      !hasTopUserAssistance &&\n      !hasSecondaryText &&\n      hasMedia &&\n      richLabelInnerStyles.startSMRichCheckboxSetWithoutTopUAOrSecondaryText,\n\n    isRichCheckbox &&\n      isStart &&\n      richSelectionContext?.layout === 'sm' &&\n      !hasTopUserAssistance &&\n      !hasSecondaryText &&\n      !hasMedia &&\n      richLabelInnerStyles.startSMRichCheckboxSetWithoutMediaTopUAOrSecondaryText\n  ]);\n\n  return (\n    <StyledLabelValueLayout\n      // For readonly start aligned labels, we want the div that is the parent of the label to\n      // stretch to the height of the value content, including the end content (InputSensitiveText)\n      flexAlign={isReadonly && isStart ? 'stretch' : 'start'}\n      labelStyleClasses={labelStyleClasses}\n      labelStyles={labelStyles}\n      labelInnerClasses={labelInnerClasses}\n      label={label}\n      valueStyles={valueStyles}>\n      {children}\n    </StyledLabelValueLayout>\n  );\n};\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport {\n  toChildArray,\n  type ComponentChildren,\n  type ComponentProps,\n  type Ref,\n  type JSX\n} from 'preact';\nimport { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'preact/compat';\n\nimport type { FocusableHandle } from '#hooks/UNSAFE_useFocusableTextField';\nimport { useCollectionFocusRing } from '#hooks/PRIVATE_useCollectionFocusRing';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport type { BundleType } from '#resources/nls/bundle';\nimport type { UnpackSignals } from '@oracle/oraclejet-internal-utilities/attributeUtils';\nimport { Label } from '#UNSAFE_Label';\nimport {\n  InlineHelp,\n  InlineUserAssistance,\n  InlineUserAssistanceContainer,\n  type UserAssistanceDensityType\n} from '#UNSAFE_UserAssistance';\nimport { HiddenAccessible } from '#UNSAFE_HiddenAccessible';\nimport { topUAContainerStyles } from '#PRIVATE_CheckboxRadioField/CheckboxRadioFieldStyles.css';\nimport { CheckboxRadioContext } from '#PRIVATE_CheckboxRadioField/CheckboxRadioContext';\nimport { useCheckboxRadioField } from '#PRIVATE_CheckboxRadioField/useCheckboxRadioField';\nimport { layoutSpanStyles, type LayoutColumnSpan } from '#utils/UNSAFE_styles/Layout';\nimport { type TestIdProps, useTestId } from '#hooks/UNSAFE_useTestId';\nimport { Grid } from '#UNSAFE_Grid';\nimport { mergeRefs } from '#utils/PRIVATE_refUtils';\nimport { useRichSelectionGrid } from './useRichSelectionGrid';\nimport { View } from '#UNSAFE_View';\nimport type { Size } from '#utils/UNSAFE_size';\nimport { RichSelectionStartContext } from './RichSelectionStartContext';\nimport { RichLabelValueLayout } from './RichLabelValueLayout';\n\ntype InlineUserAssistanceProps = ComponentProps<typeof InlineUserAssistance>;\n\ntype AriaProps = Pick<UnpackSignals<JSX.AriaAttributes>, 'aria-describedby'>;\n\ntype Props = TestIdProps &\n  AriaProps & {\n    /**\n     * Text to provide guidance to help the user understand what data to enter.\n     */\n    assistiveText?: InlineUserAssistanceProps['assistiveText'];\n    /**\n     * baseId, used to generate other element IDs.\n     */\n    baseId: string;\n    /**\n     * <RichSelectionItems />\n     */\n    children: ComponentChildren;\n    /**\n     * Specifies how many columns to span in a FormLayout with direction === 'row'\n     */\n    columnSpan?: LayoutColumnSpan;\n    /**\n     * Value of the option.\n     */\n    hasValue?: boolean;\n    /**\n     * Help source URL associated with the component.\n     */\n    helpSourceLink?: InlineUserAssistanceProps['helpSourceLink'];\n    /**\n     * Custom text to be rendered for the <code>helpSourceLink</code>.\n     */\n    helpSourceText?: InlineUserAssistanceProps['helpSourceText'];\n    /**\n     * Specifies if the set is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Specifies if the set is read-only.\n     */\n    isReadonly?: boolean;\n    /**\n     * Specifies whether the set requires a selection to be made.\n     */\n    isRequired?: boolean;\n    /**\n     * Label text for the set.\n     */\n    label: string;\n    /**\n     * Specifies where the label is positioned relative to the field.\n     */\n    labelEdge?: 'none' | 'top' | 'inside' | 'start';\n    /**\n     * Specifies the width of the label when <code>labelEdge</code> is <code>\"start\"</code>.\n     */\n    labelStartWidth?: Size;\n    /**\n     * Messages to show on screen that are associated with the component.\n     */\n    messages?: InlineUserAssistanceProps['messages'];\n    /**\n     * Specifies the parent field type.\n     */\n    parentComponentVariant: 'richRadioSet' | 'richCheckboxSet';\n    /**\n     * Specifies the ARIA role type.\n     */\n    role?: 'radiogroup' | 'group';\n    /**\n     * Specifies the density of the user assistance presentation.  It can be set to:\n     * <ul>\n     * <li><code>'reflow'</code>: Show inline. Layout will reflow when text is displayed.</li>\n     * <li><code>'efficient'</code>: Show inline and reserve space to prevent layout reflow when user\n     * assistance text is displayed.</li>\n     * <li><code>'compact'</code>: Show inline and reserve space to prevent layout reflow when user\n     * assistance text is displayed.</li>\n     * </ul>\n     */\n    userAssistanceDensity?: UserAssistanceDensityType;\n  };\n\n/**\n * Internal component use by rich selection components to manage focus and layout labels and messages\n */\nexport const RichSelectionField = forwardRef(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      assistiveText,\n      baseId,\n      children,\n      columnSpan = 1,\n      hasValue,\n      helpSourceLink,\n      helpSourceText,\n      isDisabled,\n      isReadonly,\n      isRequired,\n      label,\n      labelEdge,\n      labelStartWidth = '33%',\n      messages,\n      parentComponentVariant,\n      role,\n      testId,\n      userAssistanceDensity\n    }: Props,\n    ref: Ref<FocusableHandle> = null\n  ) => {\n    const testIdProps = useTestId(testId);\n    const UAtestId = `${testId}-inline-user-assistance`;\n    const UAtestIdTop = testId ? `${UAtestId}-top` : undefined;\n    const UAtestIdBottom = testId ? `${UAtestId}-bottom` : undefined;\n    const hasTopUserAssistance =\n      !isDisabled && !isReadonly && (!!assistiveText || !!helpSourceLink);\n    // we still render <InlineUserAssistance/> if density is 'efficient' or 'compact' to save space,\n    // even though we don't render user assistance for disabled fields\n    const hasBottomUserAssistance = !isDisabled;\n    const groupRef = useRef<HTMLDivElement>(null);\n\n    const {\n      groupProps,\n      labelProps,\n      topUserAssistanceProps,\n      bottomUserAssistanceProps,\n      readonlyId\n    } = useCheckboxRadioField({\n      ariaDescribedBy,\n      baseId,\n      isRequired,\n      isReadonly,\n      isDisabled,\n      label,\n      labelEdge,\n      messages,\n      hasValue,\n      hasTopUserAssistance,\n      hasBottomUserAssistance,\n      parentComponentVariant: parentComponentVariant === 'richRadioSet' ? 'radioSet' : 'checkboxSet'\n    });\n\n    const [startData, setStartData] = useState({\n      hasMedia: false,\n      hasSecondaryText: false\n    });\n    const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n    const readonlyLabel = translations.formControl_readOnly();\n\n    useImperativeHandle(ref, () => ({\n      focus: () => {\n        if (!isDisabled) {\n          const inputChildren = groupRef.current?.querySelectorAll<HTMLInputElement>('input') ?? [];\n          const selectedChild = Array.from(inputChildren).find((child) => child.checked);\n\n          if (selectedChild) {\n            selectedChild.focus();\n          } else {\n            inputChildren[0].focus();\n          }\n        }\n      },\n      blur: () => {\n        if (groupRef.current?.contains(document.activeElement)) {\n          (document.activeElement as HTMLElement).blur();\n        }\n      }\n    }));\n\n    // the props from the hook are used for focus management on the radioset variant to allow for arrow navigation\n    // while checkboxset uses tabbing\n    const [isFocusRingShown, focusRingProps] = useCollectionFocusRing(\n      groupRef,\n      parentComponentVariant === 'richRadioSet'\n        ? ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft']\n        : ['Tab']\n    );\n\n    const { gridTemplateColumns, ref: breakpointRef } = useRichSelectionGrid();\n\n    const memoizedChildren = useMemo(() => {\n      return toChildArray(children).map((child, index) => {\n        // we only need to wrap children with starting labels in context because they are the only ones\n        // that can conditionally apply min-height and set the startData\n        return labelEdge === 'start' && !hasTopUserAssistance ? (\n          // the first child is the one that will set the startData\n          <RichSelectionStartContext.Provider value={{ setStartData, isFirst: index === 0 }}>\n            {child}\n          </RichSelectionStartContext.Provider>\n        ) : (\n          child\n        );\n      });\n    }, [children, hasTopUserAssistance, labelEdge]);\n\n    const content = (\n      <>\n        {hasTopUserAssistance && (\n          <div\n            id={`${baseId}-top-ua-container`}\n            class={labelEdge === 'start' ? topUAContainerStyles.start : topUAContainerStyles.top}>\n            <InlineUserAssistanceContainer {...topUserAssistanceProps} testId={UAtestIdTop}>\n              <InlineHelp\n                assistiveText={assistiveText}\n                sourceLink={helpSourceLink}\n                sourceText={helpSourceText}\n              />\n            </InlineUserAssistanceContainer>\n          </div>\n        )}\n        <View padding={['2x', 0]} width=\"100%\">\n          <Grid gridTemplateColumns={gridTemplateColumns} gap=\"6x\" role=\"list\">\n            <CheckboxRadioContext.Provider value={{ isFocusRingShown }}>\n              {memoizedChildren}\n            </CheckboxRadioContext.Provider>\n          </Grid>\n        </View>\n        {hasBottomUserAssistance ? (\n          <InlineUserAssistance\n            {...bottomUserAssistanceProps}\n            requiredAlignment=\"start\"\n            messages={messages}\n            userAssistanceDensity={userAssistanceDensity === 'reflow' ? 'reflow' : 'efficient'}\n            testId={UAtestIdBottom}\n          />\n        ) : userAssistanceDensity === 'reflow' ? undefined : (\n          /* save space for user assistance if density is 'efficient' or 'compact', even though we don't\n             render user assistance for disabled fields */\n          <InlineUserAssistance\n            id={bottomUserAssistanceProps?.id}\n            userAssistanceDensity=\"efficient\"\n            testId={UAtestIdBottom}\n          />\n        )}\n      </>\n    );\n    // The top level element needs the column span class on it.\n    const classes = layoutSpanStyles.layoutSpanColumn[columnSpan];\n\n    return (\n      <div\n        ref={mergeRefs(groupRef, breakpointRef)}\n        class={classes}\n        role={role}\n        {...groupProps}\n        {...focusRingProps}\n        {...testIdProps}>\n        {labelEdge === 'none' ? (\n          content\n        ) : (\n          <RichLabelValueLayout\n            columnSpan={columnSpan}\n            parentComponentVariant={parentComponentVariant}\n            hasTopUserAssistance={hasTopUserAssistance}\n            hasSecondaryText={startData.hasSecondaryText}\n            hasMedia={startData.hasMedia}\n            label={\n              <Label\n                {...labelProps}\n                variant={labelEdge}\n                userAssistanceDensity=\"efficient\"\n                parentComponentVariant={parentComponentVariant}>\n                {label}\n              </Label>\n            }\n            labelEdge={labelEdge}\n            labelStartWidth={labelStartWidth}>\n            {content}\n          </RichLabelValueLayout>\n        )}\n        {isReadonly && (\n          <HiddenAccessible id={readonlyId} isHidden={true}>\n            {readonlyLabel}\n          </HiddenAccessible>\n        )}\n      </div>\n    );\n  }\n);\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport type { ComponentProps, Ref } from 'preact';\nimport { forwardRef } from 'preact/compat';\n\nimport type { FocusableHandle } from '#hooks/UNSAFE_useFocusableTextField';\nimport type { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { useFormContext } from '#hooks/UNSAFE_useFormContext';\nimport { FormFieldContext } from '#hooks/UNSAFE_useFormFieldContext';\nimport { useFormFieldContextProps } from '#hooks/UNSAFE_useFormFieldContextProps';\nimport { RichSelectionField } from './RichSelectionField';\nimport { RichSelectionContext, type RichSelectionContextValue } from './RichSelectionContext';\nimport { useMessageSeverity } from '#hooks/PRIVATE_useMessageSeverity';\nimport { Size } from '#utils/UNSAFE_size';\n\ntype RichSelectionFieldProps = ComponentProps<typeof RichSelectionField>;\n\ntype Props = TestIdProps &\n  Pick<\n    RichSelectionFieldProps,\n    | 'aria-describedby'\n    | 'assistiveText'\n    | 'baseId'\n    | 'children'\n    | 'columnSpan'\n    | 'helpSourceLink'\n    | 'helpSourceText'\n    | 'isDisabled'\n    | 'isReadonly'\n    | 'isRequired'\n    | 'label'\n    | 'messages'\n    | 'userAssistanceDensity'\n  > & {\n    /**\n     * Specifies where the label is positioned relative to the field.\n     */\n    labelEdge?: 'none' | 'top' | 'inside' | 'start';\n    /**\n     * Specifies the width of the label when <code>labelEdge</code> is <code>\"start\"</code>.\n     */\n    labelStartWidth?: Size;\n    /**\n     * Specifies the layout of the cards and media\n     */\n    layout: RichSelectionContextValue['layout'];\n  } & (\n    | {\n        selection: 'single';\n        value?: string | number;\n      }\n    | {\n        selection: 'multiple';\n        value?: Set<string | number>;\n      }\n  );\n\n/**\n * Internal component used by Rich Selection components to provide context and wrap RichSelectionField\n */\nexport const BaseRichSelection = forwardRef(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      assistiveText,\n      baseId,\n      children,\n      columnSpan,\n      helpSourceLink,\n      helpSourceText,\n      isDisabled: propIsDisabled,\n      isReadonly: propIsReadonly,\n      isRequired,\n      label,\n      labelEdge: propLabelEdge,\n      labelStartWidth: propLabelStartWidth,\n      layout,\n      messages,\n      selection,\n      testId,\n      userAssistanceDensity: propUserAssistanceDensity,\n      value\n    }: Props,\n    ref: Ref<FocusableHandle> = null\n  ) => {\n    const hasValue = value != null && (selection === 'single' || value.size > 0);\n\n    const {\n      isDisabled: isFormDisabled,\n      isReadonly: isFormReadonly,\n      labelEdge: formLabelEdge,\n      labelStartWidth: formLabelStartWidth,\n      userAssistanceDensity: formUserAssistanceDensity\n    } = useFormContext();\n\n    // default to FormContext values if component properties are not specified\n    const isDisabled = propIsDisabled ?? isFormDisabled;\n    const isReadonly = propIsReadonly ?? isFormReadonly;\n    const labelEdge = propLabelEdge ?? formLabelEdge;\n    const labelStartWidth = propLabelStartWidth ?? formLabelStartWidth;\n    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;\n\n    const formFieldContext = useFormFieldContextProps({\n      hasValue,\n      isDisabled,\n      isReadonly\n    });\n\n    // rich selection only need to be aware of error severity\n    const messageSeverity = useMessageSeverity(messages) === 'error' ? 'error' : undefined;\n\n    return (\n      <FormFieldContext.Provider value={formFieldContext}>\n        <RichSelectionContext.Provider\n          value={{\n            selection,\n            layout,\n            messageSeverity\n          }}>\n          <RichSelectionField\n            aria-describedby={ariaDescribedBy}\n            assistiveText={assistiveText}\n            baseId={baseId}\n            columnSpan={columnSpan}\n            hasValue={hasValue}\n            helpSourceLink={helpSourceLink}\n            helpSourceText={helpSourceText}\n            isDisabled={isDisabled}\n            isReadonly={isReadonly}\n            isRequired={isRequired}\n            label={label}\n            labelEdge={labelEdge}\n            labelStartWidth={labelStartWidth}\n            messages={messages}\n            parentComponentVariant={selection === 'single' ? 'richRadioSet' : 'richCheckboxSet'}\n            ref={ref}\n            role={selection === 'single' ? 'radiogroup' : 'group'}\n            testId={testId}\n            userAssistanceDensity={userAssistanceDensity}>\n            {children}\n          </RichSelectionField>\n        </RichSelectionContext.Provider>\n      </FormFieldContext.Provider>\n    );\n  }\n);\n"],"names":["useRichSelectionContext","useContainerBreakpoints","useComponentTheme","RadioRedwoodTheme","CheckboxRedwoodTheme","LabelRedwoodTheme","FormLayoutRedwoodTheme","computeStartLabelWidth","useFormContext","useFormFieldContext","classNames","labelSlotStyles","labelInnerStyles","_jsx","StyledLabelValueLayout","forwardRef","useTestId","useRef","useCheckboxRadioField","useState","useTranslationBundle","useImperativeHandle","useCollectionFocusRing","useMemo","toChildArray","RichSelectionStartContext","_jsxs","_Fragment","topUAContainerStyles","InlineUserAssistanceContainer","InlineHelp","View","Grid","CheckboxRadioContext","InlineUserAssistance","layoutSpanStyles","mergeRefs","Label","HiddenAccessible","useFormFieldContextProps","useMessageSeverity","FormFieldContext","RichSelectionContext"],"mappings":"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"}

package/cjs/Button-170bea0b.js

@@ -0,0 +1,24 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var BaseButton = require('./BaseButton-acda944a.js');
+var ButtonLabelLayout = require('./ButtonLabelLayout-8981b39a.js');
+var compat = require('preact/compat');
+
+/**
+ * A button is a pressable element that invokes an action.
+ */
+const Button = compat.forwardRef(({ variant = 'outlined', isDisabled = false, isRepeat = false, size = 'md', display = 'all', type: buttonType = 'button', endIcon, startIcon, autofocus, edge, testId, onAction, label = '', 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, width, onBlur, onFocus, onMouseEnter, onMouseLeave, onTouchEnd, onTouchStart }, ref) => {
+    const labelOnly = (!startIcon && !endIcon) || display === 'label';
+    const elementDetails = {
+        type: 'button',
+        buttonType: buttonType
+    };
+    const content = labelOnly ? (label) : (jsxRuntime.jsx(ButtonLabelLayout.ButtonLabelLayout, { display: display, startIcon: startIcon, endIcon: endIcon, size: size, children: label }));
+    return (jsxRuntime.jsx(BaseButton.BaseButton, { ref: ref, elementDetails: elementDetails, isDisabled: isDisabled, isRepeat: isRepeat, size: size, width: width, autofocus: autofocus, edge: edge, variant: variant, styling: [labelOnly ? 'default' : 'min'], onAction: onAction, "aria-label": accessibleLabel ?? label, "aria-describedby": ariaDescribedBy, onBlur: onBlur, onFocus: onFocus, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTouchEnd: onTouchEnd, onTouchStart: onTouchStart, testId: testId, children: content }));
+});
+Button.displayName = 'Button';
+
+exports.Button = Button;
+//# sourceMappingURL=Button-170bea0b.js.map

package/cjs/Button-170bea0b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-170bea0b.js","sources":["../../src/UNSAFE_Button/Button.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport type { ComponentChildren, ComponentProps, JSX } from 'preact';\nimport { BaseButton } from '../UNSAFE_BaseButton';\nimport { ButtonLabelLayout } from '../UNSAFE_ButtonLabelLayout';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { forwardRef, ForwardedRef, ElementRef } from 'preact/compat';\nimport type { UnpackSignals } from '@oracle/oraclejet-internal-utilities/attributeUtils';\nimport { TestIdProps } from '../hooks/UNSAFE_useTestId';\n\ntype ButtonHandle = ElementRef<typeof BaseButton>;\n\ntype IntrinsicProps = Pick<\n  UnpackSignals<JSX.HTMLAttributes<HTMLElement>>,\n  | 'autofocus'\n  | 'onBlur'\n  | 'onFocus'\n  | 'onMouseEnter'\n  | 'onMouseLeave'\n  | 'onTouchEnd'\n  | 'onTouchStart'\n>;\n\ntype WidthProps = Pick<DimensionProps, 'width'>;\n\ntype Props = IntrinsicProps &\n  WidthProps &\n  TestIdProps & {\n    /**\n     * The startIcon is the button's start icon.\n     */\n    startIcon?: ComponentChildren;\n\n    /**\n     * The endIcon is the button's end icon.\n     */\n    endIcon?: ComponentChildren;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * Specifies if repeated events are dispatched for key or pointer held down\n     */\n    isRepeat?: boolean;\n\n    /**\n     * Specifes the button type\n     */\n    type?: 'button' | 'submit';\n\n    /**\n     * label - button label, used for accessibility if no override\n     */\n    label?: string;\n\n    /**\n     * aria-label - override label for accessibility\n     */\n    'aria-label'?: string;\n\n    /**\n     * Indicates in what states the button has chrome (background and border).\n     *     \"ghost\": \"Ghost buttons are the least prominent variation. Ghost buttons are\n     * useful for performing low-priority tasks, such as manipulating the UI.\",\n     *     \"borderless\"': \"Borderless buttons are a more prominent variation. Borderless\n     * buttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n     * solid buttons. Outlined buttons are useful for secondary actions.\",\n     *     \"solid\"': \"Solid buttons stand out, and direct the user's attention to the\n     *  most important actions in the UI.\",\n     *     \"callToAction\"': \"A Call To Action (CTA) button guides the user to take or\n     * complete the action that is the main goal of the page or page section. There\n     * should only be one CTA button on a page at any given time.\",\n     *     \"danger\"': \"A Danger button alerts the user to a dangerous situation.\"\n     */\n    variant?: ComponentProps<typeof BaseButton>['variant'];\n\n    /**\n     * The size indicates how large the button is rendered.\n     */\n    size?: 'xs' | 'sm' | 'md' | 'lg';\n\n    /**\n     * Edge can be used to specify that the button is intended to go at the bottom of\n     * a region, stretching from left to right.\n     */\n    edge?: ComponentProps<typeof BaseButton>['edge'];\n\n    /**\n     * Triggered when a button is clicked, whether by keyboard, mouse, or touch events.\n     */\n    onAction?: () => void;\n\n    /**\n     * Display indicates whether only the label or all elements should be rendered by the button.\n     */\n    display?: 'label' | 'all';\n\n    /**\n     * The ID of an element (or space separated IDs of multiple elements) that\n     * describes the button.\n     */\n    'aria-describedby'?: string;\n  };\n/**\n * A button is a pressable element that invokes an action.\n */\nexport const Button = forwardRef(\n  (\n    {\n      variant = 'outlined',\n      isDisabled = false,\n      isRepeat = false,\n      size = 'md',\n      display = 'all',\n      type: buttonType = 'button',\n      endIcon,\n      startIcon,\n      autofocus,\n      edge,\n      testId,\n      onAction,\n      label = '',\n      'aria-label': accessibleLabel,\n      'aria-describedby': ariaDescribedBy,\n      width,\n      onBlur,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart\n    }: Props,\n    ref: ForwardedRef<ButtonHandle>\n  ) => {\n    const labelOnly = (!startIcon && !endIcon) || display === 'label';\n    const elementDetails = {\n      type: 'button' as const,\n      buttonType: buttonType\n    };\n    const content = labelOnly ? (\n      label\n    ) : (\n      <ButtonLabelLayout display={display} startIcon={startIcon} endIcon={endIcon} size={size}>\n        {label}\n      </ButtonLabelLayout>\n    );\n\n    return (\n      <BaseButton\n        ref={ref}\n        elementDetails={elementDetails}\n        isDisabled={isDisabled}\n        isRepeat={isRepeat}\n        size={size}\n        width={width}\n        autofocus={autofocus}\n        edge={edge}\n        variant={variant}\n        styling={[labelOnly ? 'default' : 'min']}\n        onAction={onAction}\n        aria-label={accessibleLabel ?? label}\n        aria-describedby={ariaDescribedBy}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onTouchEnd={onTouchEnd}\n        onTouchStart={onTouchStart}\n        testId={testId}>\n        {content}\n      </BaseButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["forwardRef","_jsx","ButtonLabelLayout","BaseButton"],"mappings":";;;;;;;;AAgHA;;AAEG;AACI,MAAM,MAAM,GAAGA,iBAAU,CAC9B,CACE,EACE,OAAO,GAAG,UAAU,EACpB,UAAU,GAAG,KAAK,EAClB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,IAAI,EAAE,UAAU,GAAG,QAAQ,EAC3B,OAAO,EACP,SAAS,EACT,SAAS,EACT,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,YAAY,EAAE,eAAe,EAC7B,kBAAkB,EAAE,eAAe,EACnC,KAAK,EACL,MAAM,EACN,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACN,EACR,GAA+B,KAC7B;AACF,IAAA,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,IAAI,CAAC,OAAO,KAAK,OAAO,KAAK,OAAO,CAAC;AAClE,IAAA,MAAM,cAAc,GAAG;AACrB,QAAA,IAAI,EAAE,QAAiB;AACvB,QAAA,UAAU,EAAE,UAAU;KACvB,CAAC;AACF,IAAA,MAAM,OAAO,GAAG,SAAS,IACvB,KAAK,KAELC,cAAA,CAACC,mCAAiB,EAAC,EAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAA,QAAA,EACpF,KAAK,EAAA,CACY,CACrB,CAAC;IAEF,QACED,eAACE,qBAAU,EAAA,EACT,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC,EACxC,QAAQ,EAAE,QAAQ,EACN,YAAA,EAAA,eAAe,IAAI,KAAK,EAAA,kBAAA,EAClB,eAAe,EACjC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,MAAM,EACb,QAAA,EAAA,OAAO,EACG,CAAA,EACb;AACJ,CAAC,EACD;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/cjs/ButtonSetButton-97ceb927.js

@@ -0,0 +1,35 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var compat = require('preact/compat');
+var BaseButton = require('./BaseButton-acda944a.js');
+var mergeProps = require('./mergeProps-e3da7237.js');
+var useButtonSetContext = require('./useButtonSetContext-a2f31c8e.js');
+var ToggleButtonLabel = require('./ToggleButtonLabel-cd470bcb.js');
+var toggleButtonUtils = require('./toggleButtonUtils-245111a7.js');
+var buttonUtils = require('./buttonUtils-dff2ea3e.js');
+
+/**
+ * Toggle buttons allow users to switch between states when pressed.
+ */
+const ButtonSetButton = compat.forwardRef(({ startIcon, endIcon, isSelected = false, onToggle, position, autofocus, testId, label, value, 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, width, ...props }, ref) => {
+    const buttonSetProps = useButtonSetContext.useButtonSetContext();
+    const { inputProps: baseInputProps, buttonSetButtonProps, globalEventProps, isDisabled } = buttonUtils.processSetButtonProps(props, buttonSetProps);
+    const inputProps = {
+        ...baseInputProps,
+        display: buttonSetProps.display ?? props.display ?? 'all'
+    };
+    const styling = toggleButtonUtils.toggleStyling(buttonSetButtonProps.layoutWidth, isSelected, false, // switch
+    true, // label
+    buttonSetButtonProps.variant === 'outlined', position, true, // hasLabel
+    false // iconOnly
+    );
+    return (jsxRuntime.jsx(BaseButton.BaseButton, { ...mergeProps.mergeProps(globalEventProps, buttonSetButtonProps), ref: ref, onAction: () => {
+            onToggle?.({ value: isSelected });
+        }, elementDetails: { type: 'span', isFocusable: false, isLabel: true }, width: buttonSetProps.width ? '100%' : width, autofocus: autofocus, styling: styling, "aria-describedby": ariaDescribedBy, testId: testId, children: jsxRuntime.jsx(ToggleButtonLabel.ToggleButtonLabel, { label: label, isSelected: isSelected, isDisabled: isDisabled, startIcon: startIcon, endIcon: endIcon, value: value, ...inputProps }) }));
+});
+ButtonSetButton.displayName = 'ButtonSetButton';
+
+exports.ButtonSetButton = ButtonSetButton;
+//# sourceMappingURL=ButtonSetButton-97ceb927.js.map

package/cjs/ButtonSetButton-97ceb927.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSetButton-97ceb927.js","sources":["../../src/UNSAFE_ButtonSetButton/ButtonSetButton.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren, Ref } from 'preact';\nimport { forwardRef, ElementRef } from 'preact/compat';\n\nimport { BaseButton } from '#UNSAFE_BaseButton';\nimport { ToggleDetail } from '#hooks/UNSAFE_useToggleAction';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport type { DimensionProps } from '#utils/UNSAFE_interpolations/dimensions';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\nimport { useButtonSetContext } from '#hooks/UNSAFE_useButtonSetContext';\nimport { ToggleButtonLabel } from '../UNSAFE_ToggleButtonLabel';\nimport {\n  toggleStyling,\n  processSetButtonProps,\n  LayoutWidths,\n  ButtonSetPosition,\n  type InputTypes,\n  type ButtonIntrinsicProps\n} from '#utils/UNSAFE_buttonUtils';\n\ntype ButtonHandle = ElementRef<typeof BaseButton>;\n\ntype WidthProps = Pick<DimensionProps, 'width'>;\n\nexport type ButtonSetButtonProps = ButtonIntrinsicProps &\n  WidthProps &\n  TestIdProps & {\n    /**\n     * The startIcon is the button's start icon. This should not vary depending on state.\n     */\n    startIcon?: ComponentChildren;\n\n    /**\n     * The endIcon is the button's end icon. This should not vary depending on state.\n     */\n    endIcon?: ComponentChildren;\n\n    /**\n     * Input type indicate if the toggle is intended as a radio or checkbox.\n     */\n    inputType?: InputTypes;\n\n    /**\n     * The name of the input group\n     */\n    inputName?: string;\n\n    /**\n     * Specifies that the buttonsetbutton element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * label - buttonsetbutton label, used for accessibility if no override\n     */\n    label?: string;\n\n    /**\n     * value - buttonsetbutton value\n     */\n    value?: string;\n\n    /**\n     * aria-label - override label for accessibility\n     */\n    'aria-label'?: string;\n\n    /**\n     * Indicates in what states the buttonsetbutton has chrome (background and border).\n     *     \"borderless\"': \"Borderless buttonsetbuttons are a more prominent variation. Borderless\n     * buttonsetbuttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttonsetbuttons are salient, but lighter weight than\n     * solid buttonsetbuttons. Outlined buttonsetbuttons are useful for secondary actions.\",\n     */\n    variant?: 'outlined' | 'borderless';\n\n    /**\n     * The size indicates how large the buttonsetbutton is rendered.\n     */\n    size?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Specifies if the toggle button is selected\n     */\n    isSelected?: boolean;\n\n    /**\n     * The position modifies the borders for usage inside a button group.\n     */\n    position?: ButtonSetPosition;\n\n    /**\n     * Property that triggers a callback immediately when toggle happens and value of isSelected property should be updated\n     */\n    onToggle?: (details: ToggleDetail) => void;\n\n    /**\n     * Display indicates whether only the label or all elements should be rendered by the buttonsetbutton.\n     */\n    display?: 'label' | 'all';\n\n    /**\n     * The ID of an element (or space separated IDs of multiple elements) that\n     * describes the buttonsetbutton.\n     */\n    'aria-describedby'?: string;\n\n    /**\n     * The layoutWidth specifies if the toggle button width fits the contents or\n     * the container.\n     */\n    layoutWidth?: LayoutWidths;\n  };\n\n/**\n * Toggle buttons allow users to switch between states when pressed.\n */\nexport const ButtonSetButton = forwardRef(\n  (\n    {\n      startIcon,\n      endIcon,\n      isSelected = false,\n      onToggle,\n      position,\n      autofocus,\n      testId,\n      label,\n      value,\n      'aria-label': accessibleLabel,\n      'aria-describedby': ariaDescribedBy,\n      width,\n      ...props\n    }: ButtonSetButtonProps,\n    ref: Ref<ButtonHandle>\n  ) => {\n    const buttonSetProps = useButtonSetContext();\n    const {\n      inputProps: baseInputProps,\n      buttonSetButtonProps,\n      globalEventProps,\n      isDisabled\n    } = processSetButtonProps(props, buttonSetProps);\n    const inputProps = {\n      ...baseInputProps,\n      display: buttonSetProps.display ?? props.display ?? 'all'\n    };\n\n    const styling = toggleStyling(\n      buttonSetButtonProps.layoutWidth,\n      isSelected,\n      false, // switch\n      true, // label\n      buttonSetButtonProps.variant === 'outlined',\n      position,\n      true, // hasLabel\n      false // iconOnly\n    );\n\n    return (\n      <BaseButton\n        {...mergeProps(globalEventProps, buttonSetButtonProps)}\n        ref={ref}\n        onAction={() => {\n          onToggle?.({ value: isSelected });\n        }}\n        elementDetails={{ type: 'span', isFocusable: false, isLabel: true }}\n        width={buttonSetProps.width ? '100%' : width}\n        autofocus={autofocus}\n        styling={styling}\n        aria-describedby={ariaDescribedBy}\n        testId={testId}>\n        <ToggleButtonLabel\n          label={label}\n          isSelected={isSelected}\n          isDisabled={isDisabled}\n          startIcon={startIcon}\n          endIcon={endIcon}\n          value={value}\n          {...inputProps}></ToggleButtonLabel>\n      </BaseButton>\n    );\n  }\n);\n\nButtonSetButton.displayName = 'ButtonSetButton';\n"],"names":["forwardRef","useButtonSetContext","processSetButtonProps","toggleStyling","_jsx","BaseButton","mergeProps","ToggleButtonLabel"],"mappings":";;;;;;;;;;;;AAwHA;;AAEG;MACU,eAAe,GAAGA,iBAAU,CACvC,CACE,EACE,SAAS,EACT,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,KAAK,EACL,KAAK,EACL,YAAY,EAAE,eAAe,EAC7B,kBAAkB,EAAE,eAAe,EACnC,KAAK,EACL,GAAG,KAAK,EACa,EACvB,GAAsB,KACpB;AACF,IAAA,MAAM,cAAc,GAAGC,uCAAmB,EAAE,CAAC;AAC7C,IAAA,MAAM,EACJ,UAAU,EAAE,cAAc,EAC1B,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACX,GAAGC,iCAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;AACjD,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,GAAG,cAAc;QACjB,OAAO,EAAE,cAAc,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK;KAC1D,CAAC;AAEF,IAAA,MAAM,OAAO,GAAGC,+BAAa,CAC3B,oBAAoB,CAAC,WAAW,EAChC,UAAU,EACV,KAAK;AACL,IAAA,IAAI;IACJ,oBAAoB,CAAC,OAAO,KAAK,UAAU,EAC3C,QAAQ,EACR,IAAI;AACJ,IAAA,KAAK;KACN,CAAC;AAEF,IAAA,QACEC,cAAC,CAAAC,qBAAU,OACLC,qBAAU,CAAC,gBAAgB,EAAE,oBAAoB,CAAC,EACtD,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,MAAK;YACb,QAAQ,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;AACpC,SAAC,EACD,cAAc,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,EACnE,KAAK,EAAE,cAAc,CAAC,KAAK,GAAG,MAAM,GAAG,KAAK,EAC5C,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EACE,kBAAA,EAAA,eAAe,EACjC,MAAM,EAAE,MAAM,EAAA,QAAA,EACdF,eAACG,mCAAiB,EAAA,EAChB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACR,GAAA,UAAU,EAAsB,CAAA,EAAA,CAC3B,EACb;AACJ,CAAC,EACD;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/cjs/ButtonSetIconButton-5bad7aa5.js

@@ -0,0 +1,40 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var compat = require('preact/compat');
+var BaseButton = require('./BaseButton-acda944a.js');
+var useTooltip = require('./useTooltip-43bfe8a3.js');
+require('preact/hooks');
+var mergeProps = require('./mergeProps-e3da7237.js');
+require('./logger-2b636482.js');
+require('./LayerHost-f1a1533f.js');
+
+
+require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
+require('./tooltipUtils-842e04c7.js');
+var useButtonSetContext = require('./useButtonSetContext-a2f31c8e.js');
+var ToggleButtonLabel = require('./ToggleButtonLabel-cd470bcb.js');
+var toggleButtonUtils = require('./toggleButtonUtils-245111a7.js');
+var buttonUtils = require('./buttonUtils-dff2ea3e.js');
+
+/**
+ * A ButtonSetIconButton is an icon button that allows users to switch
+ * between states when pressed.
+ */
+const ButtonSetIconButton = compat.forwardRef(({ children, tooltip, value, accessibleLabel, isSelected = false, onToggle, position, testId, width, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const buttonSetProps = useButtonSetContext.useButtonSetContext();
+    const { inputProps, buttonSetButtonProps, isDisabled } = buttonUtils.processSetButtonProps(props, buttonSetProps);
+    const { tooltipContent, tooltipProps } = useTooltip.useTooltip({
+        text: tooltip ?? accessibleLabel,
+        isDisabled: isDisabled
+    });
+    const styling = toggleButtonUtils.toggleStyling(buttonSetButtonProps.layoutWidth, isSelected, false, true, buttonSetButtonProps.variant === 'outlined', position, undefined, true);
+    const ariaProps = { 'aria-describedby': ariaDescribedBy };
+    return (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(BaseButton.BaseButton, { ...mergeProps.mergeProps(buttonSetButtonProps, ariaProps, tooltipProps), elementDetails: { type: 'span', isFocusable: false, isLabel: true }, onAction: () => onToggle?.({ value: isSelected }), styling: styling, width: buttonSetProps.width ? '100%' : width, ref: ref, testId: testId, children: jsxRuntime.jsx(ToggleButtonLabel.ToggleButtonLabel, { label: accessibleLabel ?? tooltip, display: 'icons', isSelected: isSelected, ...inputProps, value: value, startIcon: children }) }), tooltipContent] }));
+});
+ButtonSetIconButton.displayName = 'ButtonSetIconButton';
+
+exports.ButtonSetIconButton = ButtonSetIconButton;
+//# sourceMappingURL=ButtonSetIconButton-5bad7aa5.js.map

package/cjs/ButtonSetIconButton-5bad7aa5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSetIconButton-5bad7aa5.js","sources":["../../src/UNSAFE_ButtonSetIconButton/ButtonSetIconButton.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChild, Fragment } from 'preact';\nimport { forwardRef, ForwardedRef, ElementRef } from 'preact/compat';\n\nimport { BaseButton } from '#UNSAFE_BaseButton';\nimport { ToggleDetail } from '#hooks/UNSAFE_useToggleAction';\nimport { useTooltip } from '#hooks/UNSAFE_useTooltip';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport type { DimensionProps } from '#utils/UNSAFE_interpolations/dimensions';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\nimport { useButtonSetContext } from '#hooks/UNSAFE_useButtonSetContext';\nimport { ToggleButtonLabel } from '#UNSAFE_ToggleButtonLabel';\nimport {\n  toggleStyling,\n  processSetButtonProps,\n  ButtonSetPosition,\n  LayoutWidths,\n  type InputTypes\n} from '#utils/UNSAFE_buttonUtils';\n\ntype ButtonHandle = ElementRef<typeof BaseButton>;\n\ntype WidthInterpolationProps = Pick<DimensionProps, 'width'>;\n\nexport type ButtonSetIconButtonProps = WidthInterpolationProps &\n  TestIdProps & {\n    /**\n     * icon - the icon for the button\n     */\n    children?: ComponentChild;\n\n    /**\n     * InpuType indicate if the toggle is a radio or checkbox,\n     */\n    inputType?: InputTypes;\n\n    /**\n     * The name of the input group\n     */\n    inputName?: string;\n\n    /**\n     * The value of the input\n     */\n    value?: string;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The ID of an element (or space separated IDs of multiple elements) that\n     * describes the button.\n     */\n    'aria-describedby'?: string;\n\n    /**\n     * Specifies if the toggle button is selected\n     */\n    isSelected?: boolean;\n\n    /**\n     * Property that triggers a callback immediately when toggle happens and value of isSelected property should be updated\n     */\n    onToggle?: (details: ToggleDetail) => void;\n\n    /**\n     * Indicates in what states the button has chrome (background and border).\n     *     \"ghost\": \"Ghost buttons are the least prominent variant. Ghost buttons are\n     * useful for performing low-priority tasks, such as manipulating the UI.\",\n     *     \"borderless\"': \"Borderless buttons are a more prominent variation. Borderless\n     * buttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n     * solid buttons. Outlined buttons are useful for secondary actions.\",\n     */\n    variant?: 'ghost' | 'borderless' | 'outlined';\n\n    /**\n     * The size indicates how large the button is rendered: \"sm\", \"md\" (default), \"lg\".\n     */\n    size?: 'sm' | 'md' | 'lg';\n\n    /**\n     * The position modifies the borders for usage inside a button group.\n     */\n    position?: ButtonSetPosition;\n\n    /**\n     * The layoutWidth specifies if the toggle button width fits the contents or\n     * the container.\n     */\n    layoutWidth?: LayoutWidths;\n  };\n\n/**\n * Note that either an accessibleLabel or tooltip must be specified.\n */\ntype VariationAccessibleLabelProps =\n  | {\n      /**\n       * accessibleLabel - the aria label\n       */\n      accessibleLabel: string;\n\n      /**\n       * tooltip - overrides the accessibleLabel for the tooltip\n       */\n      tooltip?: string;\n    }\n  | {\n      accessibleLabel?: string;\n\n      tooltip: string;\n    };\n\n/**\n * A ButtonSetIconButton is an icon button that allows users to switch\n * between states when pressed.\n */\nexport const ButtonSetIconButton = forwardRef(\n  (\n    {\n      children,\n      tooltip,\n      value,\n      accessibleLabel,\n      isSelected = false,\n      onToggle,\n      position,\n      testId,\n      width,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    }: ButtonSetIconButtonProps & VariationAccessibleLabelProps & TestIdProps,\n    ref: ForwardedRef<ButtonHandle>\n  ) => {\n    const buttonSetProps = useButtonSetContext();\n    const { inputProps, buttonSetButtonProps, isDisabled } = processSetButtonProps(\n      props,\n      buttonSetProps\n    );\n\n    const { tooltipContent, tooltipProps } = useTooltip({\n      text: tooltip ?? accessibleLabel,\n      isDisabled: isDisabled\n    });\n\n    const styling = toggleStyling(\n      buttonSetButtonProps.layoutWidth,\n      isSelected,\n      false,\n      true,\n      buttonSetButtonProps.variant === 'outlined',\n      position,\n      undefined,\n      true\n    );\n\n    const ariaProps = { 'aria-describedby': ariaDescribedBy };\n\n    return (\n      <Fragment>\n        <BaseButton\n          {...mergeProps(buttonSetButtonProps, ariaProps, tooltipProps)}\n          elementDetails={{ type: 'span', isFocusable: false, isLabel: true }}\n          onAction={() => onToggle?.({ value: isSelected })}\n          styling={styling}\n          width={buttonSetProps.width ? '100%' : width}\n          ref={ref}\n          testId={testId}>\n          <ToggleButtonLabel\n            label={accessibleLabel ?? tooltip}\n            display={'icons'}\n            isSelected={isSelected}\n            {...inputProps}\n            value={value}\n            startIcon={children}></ToggleButtonLabel>\n        </BaseButton>\n        {tooltipContent}\n      </Fragment>\n    );\n  }\n);\n\nButtonSetIconButton.displayName = 'ButtonSetIconButton';\n"],"names":["forwardRef","useButtonSetContext","processSetButtonProps","useTooltip","toggleStyling","_jsxs","Fragment","_jsx","BaseButton","mergeProps","ToggleButtonLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0HA;;;AAGG;AACU,MAAA,mBAAmB,GAAGA,iBAAU,CAC3C,CACE,EACE,QAAQ,EACR,OAAO,EACP,KAAK,EACL,eAAe,EACf,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,KAAK,EACL,kBAAkB,EAAE,eAAe,EACnC,GAAG,KAAK,EAC+D,EACzE,GAA+B,KAC7B;AACF,IAAA,MAAM,cAAc,GAAGC,uCAAmB,EAAE,CAAC;AAC7C,IAAA,MAAM,EAAE,UAAU,EAAE,oBAAoB,EAAE,UAAU,EAAE,GAAGC,iCAAqB,CAC5E,KAAK,EACL,cAAc,CACf,CAAC;AAEF,IAAA,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAGC,qBAAU,CAAC;QAClD,IAAI,EAAE,OAAO,IAAI,eAAe;AAChC,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA,CAAC,CAAC;IAEH,MAAM,OAAO,GAAGC,+BAAa,CAC3B,oBAAoB,CAAC,WAAW,EAChC,UAAU,EACV,KAAK,EACL,IAAI,EACJ,oBAAoB,CAAC,OAAO,KAAK,UAAU,EAC3C,QAAQ,EACR,SAAS,EACT,IAAI,CACL,CAAC;AAEF,IAAA,MAAM,SAAS,GAAG,EAAE,kBAAkB,EAAE,eAAe,EAAE,CAAC;IAE1D,QACEC,gBAACC,eAAQ,EAAA,EAAA,QAAA,EAAA,CACPC,eAACC,qBAAU,EAAA,EAAA,GACLC,qBAAU,CAAC,oBAAoB,EAAE,SAAS,EAAE,YAAY,CAAC,EAC7D,cAAc,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,EACnE,QAAQ,EAAE,MAAM,QAAQ,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EACjD,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,CAAC,KAAK,GAAG,MAAM,GAAG,KAAK,EAC5C,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,YACdF,cAAC,CAAAG,mCAAiB,EAChB,EAAA,KAAK,EAAE,eAAe,IAAI,OAAO,EACjC,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EAClB,GAAA,UAAU,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,QAAQ,EAAA,CAAsB,GAChC,EACZ,cAAc,CACN,EAAA,CAAA,EACX;AACJ,CAAC,EACD;AAEF,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}