@oracle/oraclejet-preact 19.0.1 → 19.0.2

package/es/BaseButton-93d2f16c.js

@@ -0,0 +1,83 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { forwardRef } from 'preact/compat';
+import { u as useHover } from './useHover-85077adb.js';
+import { u as useActive } from './useActive-fb6d4d52.js';
+import { u as useColorScheme } from './useColorScheme-14c5c7ab.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { d as dimensionInterpolations } from './dimensions-ddde0eee.js';
+import { m as mergeInterpolations } from './mergeInterpolations-30cd9a69.js';
+import { g as getClientHints } from './clientHints-a42b510c.js';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import { BaseButtonRedwoodTheme } from './UNSAFE_BaseButton/themes/redwood/BaseButtonTheme.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { B as BareButton } from './BareButton-2df3f3eb.js';
+import { p as processGlobals } from './buttonUtils-55fb1df7.js';
+
+const interpolations = [...Object.values(dimensionInterpolations)];
+const styleInterpolations = mergeInterpolations(interpolations);
+const clientHints = getClientHints();
+// :active only works on IOS devices if a touch handler exists
+const iosProps = clientHints.platform === 'ios' ? { ontouchstart: function () { } } : {};
+const isHybrid = getClientHints().hoverSupport === 'events';
+const BaseButton = forwardRef(({ variant, isReadOnly = false, isDisabled = false, isRepeat = false, isClick, size, onAction, elementDetails = { type: 'button', buttonType: 'button' }, styling = ['default'], edge = 'none', testId, ...props }, ref) => {
+    const isStyled = (name) => {
+        return styling.indexOf(name) > -1;
+    };
+    const { globalEventProps, ariaProps } = processGlobals(props);
+    const { hoverProps, isHover } = useHover({ isDisabled: !isHybrid });
+    const { activeProps, isActive } = useActive({ isDisabled: isReadOnly });
+    const { class: cls, ...styles } = styleInterpolations({
+        ...props,
+        ...globalEventProps
+    });
+    const ElementType = elementDetails.type;
+    const isSpan = ElementType == 'span';
+    const colorScheme = useColorScheme();
+    const { variantClasses } = useComponentTheme(BaseButtonRedwoodTheme, {
+        size,
+        variant,
+        unstyled: isStyled('unstyled') ? 'isUnstyled' : 'notUnstyled',
+        embedded: isStyled('embedded') ? 'isEmbedded' : 'notEmbedded',
+        container: isStyled('container') ? 'isContainer' : 'notContainer',
+        noBorderRadiusStart: isStyled('noBorderRadiusStart')
+            ? 'isNoBorderRadiusStart'
+            : 'notNoBorderRadiusStart',
+        noBorderRadiusEnd: isStyled('noBorderRadiusEnd')
+            ? 'isNoBorderRadiusEnd'
+            : 'notNoBorderRadiusEnd',
+        noBorderStart: isStyled('noBorderStart') ? 'isNoBorderStart' : 'notNoBorderStart',
+        noBorderEnd: isStyled('noBorderEnd') ? 'isNoBorderEnd' : 'notNoBorderEnd',
+        activeStyle: isStyled('active') ? 'isActiveStyle' : 'notActiveStyle',
+        selectedStyle: isStyled('selected') ? 'isSelectedStyle' : 'notSelectedStyle',
+        buttonSetItem: isStyled('buttonSetItem') ? 'isButtonSetItem' : 'notButtonSetItem',
+        trailingItem: isStyled('trailingItem') ? 'isTrailingItem' : 'notTrailingItem',
+        fill: isStyled('fill') ? 'isFill' : 'notFill',
+        min: isStyled('min') ? 'isMin' : 'notMin',
+        disabled: isDisabled ? 'isDisabled' : 'notDisabled',
+        edge,
+        hybrid: isHybrid ? 'isHybrid' : 'notHybrid',
+        active: isActive ? 'isActive' : 'notActive',
+        hover: isHover ? 'isHover' : 'notHover',
+        span: isSpan ? 'isSpan' : 'notSpan',
+        widthEqual: isStyled('widthEqual') ? 'isWidthEqual' : 'notWidthEqual',
+        widthAuto: isStyled('widthAuto') ? 'isWidthAuto' : 'notWidthAuto',
+        hiddenLabel: isStyled('hiddenLabel') ? 'isHidden' : 'notHidden',
+        noHoverActive: isStyled('noHoverActive') ? 'isNoHoverActive' : 'notNoHoverActive',
+        newStackingContext: isStyled('newStackingContext')
+            ? 'isNewStackingContext'
+            : 'notNewStackingContext',
+        colorScheme
+    });
+    const legacyGlobals = {
+        autofocus: props.autofocus,
+        title: props.title
+    };
+    const mergedProps = mergeProps(iosProps, ariaProps, hoverProps, isStyled('container') ? {} : activeProps, globalEventProps, legacyGlobals);
+    const wrapperClasses = classNames([cls, variantClasses]);
+    return (jsx(BareButton, { ref: ref, isDisabled: isDisabled || isReadOnly, isClick: isClick, classNames: wrapperClasses, style: styles, testId: testId, onAction: onAction, autofocus: props['autofocus'], elementDetails: elementDetails, isRepeat: isRepeat, ...ariaProps, ...mergedProps, children: props.children }));
+});
+BaseButton.displayName = 'BaseButton';
+
+export { BaseButton as B };
+//# sourceMappingURL=BaseButton-93d2f16c.js.map

package/es/BaseButton-93d2f16c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton-93d2f16c.js","sources":["../../src/UNSAFE_BaseButton/BaseButton.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Vers.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';\nimport { useHover } from '../hooks/UNSAFE_useHover';\nimport { useActive } from '../hooks/UNSAFE_useActive';\nimport { useColorScheme } from '../hooks/UNSAFE_useColorScheme';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { BaseButtonVariantOptions } from './themes/BaseButtonStyles.css';\nimport { BaseButtonRedwoodTheme } from './themes/redwood/BaseButtonTheme';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { BareButton } from '#/UNSAFE_BareButton';\nimport { TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { processGlobals } from '../utils/UNSAFE_buttonUtils';\nimport type { ButtonIntrinsicProps, ButtonIntrinsicAriaProps } from '../utils/UNSAFE_buttonUtils';\n\nexport type ActionDetail = {\n  reason: 'pointer' | 'keyboard';\n};\n\ntype BaseButtonElementDetails =\n  | {\n      type: 'button';\n      buttonType?: 'button' | 'submit';\n      isFocusable?: never;\n      isLabel?: never;\n      isSwitch?: boolean;\n    }\n  | {\n      type: 'a';\n      buttonType?: never;\n      href: string;\n      target?: string;\n      rel?: string;\n      isFocusable?: never;\n      isLabel?: never;\n      isSwitch?: never;\n    }\n  | {\n      type: 'span';\n      buttonType?: never;\n      isFocusable?: boolean;\n      isLabel?: boolean;\n      isSwitch?: boolean;\n    };\n\nexport type StylingOptions =\n  | 'default'\n  | 'min'\n  | 'embedded'\n  | 'container'\n  | 'unstyled'\n  | 'fill'\n  | 'noBorderRadiusEnd'\n  | 'noBorderRadiusStart'\n  | 'noBorderEnd'\n  | 'noBorderStart'\n  | 'active'\n  | 'selected'\n  | 'buttonSetItem'\n  | 'trailingItem'\n  | 'widthEqual'\n  | 'hiddenLabel'\n  | 'noHoverActive'\n  | 'widthAuto'\n  | 'newStackingContext';\n\nexport type Props = ButtonIntrinsicProps &\n  ButtonIntrinsicAriaProps &\n  DimensionProps &\n  TestIdProps & {\n    /**\n     *The default slot is the button's text label. The oj-c-base-button element accepts plain text or DOM nodes as children for the default slot.\"\n     */\n    children?: ComponentChildren;\n\n    /**\n     * Specifies that the button be read-only.\n     */\n    isReadOnly?: boolean;\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     * Specifies if Button should use only a click handler, not keyup/down, ptr up/down\n     */\n    isClick?: boolean;\n\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?: 'ghost' | 'borderless' | 'outlined' | 'solid' | 'callToAction' | 'danger';\n\n    /**\n     * The size indicates how large the button is rendered: 'xs', \"sm\", \"md\" (default), \"lg\".\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: \"bottom\" or \"none\" (default).\n     */\n    edge?: 'none' | 'bottom';\n\n    /**\n     * Styling can be used for customizing buttons by removing label padding (\"min\") or\n     * removing all styling (\"unstyled\").\n     */\n    styling?: StylingOptions[];\n\n    /**\n     * Triggered when a button is clicked, whether by keyboard, mouse, or touch events.\n     */\n    onAction?: (details: ActionDetail) => void;\n\n    /**\n     * Indicate element type and associated details\n     */\n    elementDetails?: BaseButtonElementDetails;\n  };\n\ntype ButtonHandle = ElementRef<typeof BareButton>;\n\nconst interpolations = [...Object.values(dimensionInterpolations)];\nconst styleInterpolations = mergeInterpolations<Props>(interpolations);\n\nconst clientHints = getClientHints();\n// :active only works on IOS devices if a touch handler exists\nconst iosProps = clientHints.platform === 'ios' ? { ontouchstart: function () {} } : {};\nconst isHybrid = getClientHints().hoverSupport === 'events';\n\nexport const BaseButton = forwardRef(\n  (\n    {\n      variant,\n      isReadOnly = false,\n      isDisabled = false,\n      isRepeat = false,\n      isClick,\n      size,\n      onAction,\n      elementDetails = { type: 'button', buttonType: 'button' },\n      styling = ['default'],\n      edge = 'none',\n      testId,\n      ...props\n    }: Props,\n    ref: Ref<ButtonHandle>\n  ) => {\n    const isStyled = (name: StylingOptions) => {\n      return styling.indexOf(name) > -1;\n    };\n    const { globalEventProps, ariaProps } = processGlobals(props);\n    const { hoverProps, isHover } = useHover({ isDisabled: !isHybrid });\n    const { activeProps, isActive } = useActive({ isDisabled: isReadOnly });\n    const { class: cls, ...styles } = styleInterpolations({\n      ...props,\n      ...globalEventProps\n    });\n\n    const ElementType = elementDetails.type;\n    const isSpan = ElementType == 'span';\n    const colorScheme = useColorScheme();\n\n    const { variantClasses } = useComponentTheme<BaseButtonVariantOptions>(BaseButtonRedwoodTheme, {\n      size,\n      variant,\n      unstyled: isStyled('unstyled') ? 'isUnstyled' : 'notUnstyled',\n      embedded: isStyled('embedded') ? 'isEmbedded' : 'notEmbedded',\n      container: isStyled('container') ? 'isContainer' : 'notContainer',\n      noBorderRadiusStart: isStyled('noBorderRadiusStart')\n        ? 'isNoBorderRadiusStart'\n        : 'notNoBorderRadiusStart',\n      noBorderRadiusEnd: isStyled('noBorderRadiusEnd')\n        ? 'isNoBorderRadiusEnd'\n        : 'notNoBorderRadiusEnd',\n      noBorderStart: isStyled('noBorderStart') ? 'isNoBorderStart' : 'notNoBorderStart',\n      noBorderEnd: isStyled('noBorderEnd') ? 'isNoBorderEnd' : 'notNoBorderEnd',\n      activeStyle: isStyled('active') ? 'isActiveStyle' : 'notActiveStyle',\n      selectedStyle: isStyled('selected') ? 'isSelectedStyle' : 'notSelectedStyle',\n      buttonSetItem: isStyled('buttonSetItem') ? 'isButtonSetItem' : 'notButtonSetItem',\n      trailingItem: isStyled('trailingItem') ? 'isTrailingItem' : 'notTrailingItem',\n      fill: isStyled('fill') ? 'isFill' : 'notFill',\n      min: isStyled('min') ? 'isMin' : 'notMin',\n      disabled: isDisabled ? 'isDisabled' : 'notDisabled',\n      edge,\n      hybrid: isHybrid ? 'isHybrid' : 'notHybrid',\n      active: isActive ? 'isActive' : 'notActive',\n      hover: isHover ? 'isHover' : 'notHover',\n      span: isSpan ? 'isSpan' : 'notSpan',\n      widthEqual: isStyled('widthEqual') ? 'isWidthEqual' : 'notWidthEqual',\n      widthAuto: isStyled('widthAuto') ? 'isWidthAuto' : 'notWidthAuto',\n      hiddenLabel: isStyled('hiddenLabel') ? 'isHidden' : 'notHidden',\n      noHoverActive: isStyled('noHoverActive') ? 'isNoHoverActive' : 'notNoHoverActive',\n      newStackingContext: isStyled('newStackingContext')\n        ? 'isNewStackingContext'\n        : 'notNewStackingContext',\n      colorScheme\n    });\n\n    const legacyGlobals = {\n      autofocus: props.autofocus,\n      title: props.title\n    };\n\n    const mergedProps = mergeProps(\n      iosProps,\n      ariaProps,\n      hoverProps,\n      isStyled('container') ? {} : activeProps,\n      globalEventProps,\n      legacyGlobals\n    );\n\n    const wrapperClasses = classNames([cls, variantClasses]);\n\n    return (\n      <BareButton\n        ref={ref}\n        isDisabled={isDisabled || isReadOnly}\n        isClick={isClick}\n        classNames={wrapperClasses}\n        style={styles}\n        testId={testId}\n        onAction={onAction}\n        autofocus={props['autofocus']}\n        elementDetails={elementDetails}\n        isRepeat={isRepeat}\n        {...ariaProps}\n        {...mergedProps}>\n        {props.children}\n      </BareButton>\n    );\n  }\n);\n\nBaseButton.displayName = 'BaseButton';\n"],"names":["_jsx"],"mappings":"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"}

package/es/BaseCardView-8bf692bc.js

@@ -8,8 +8,8 @@ import { i as isKeyDefined, c as containsKey } from './keys-49c92dbb.js';
 import { I as ITEM_SELECTOR, e as compareListItemContext, h as dragToScroll, i as handleSelectionRange, k as keyExtractor, f as findElementByKey, j as getViewportConfig, l as getPrevNextKeyByCount } from './collectionUtils-893f2808.js';
 import { R as ReorderableContext } from './ReorderableContext-0daeea89.js';
 import { a as useNavigation } from './useNavigation-cd59ca08.js';
-import './LayerHost-12489cef.js';
-import { u as useSelection } from './useSelection-c405739d.js';
+import './LayerHost-a54158ef.js';
+import { u as useSelection } from './useSelection-5a661630.js';
 import './DragAndDropStyles.styles.css';
 import './ReorderableItemStyles.styles.css';
 import { S as Selector } from './Selector-1ceeaf0a.js';
@@ -25,11 +25,11 @@ import { u as useAnimation } from './useAnimation-a5eb7604.js';
 import { u as useResizeObserver } from './useResizeObserver-13641643.js';
 import { T as TabbableModeContext } from './TabbableModeContext-7d8ad946.js';
 import { F as FocusTrap } from './FocusTrap-9f37aa41.js';
-import { u as useUser } from './useUser-df8ae011.js';
-import { a as useReorderableItem, u as useReorderable } from './useReorderableItem-26d8f85b.js';
+import { u as useUser } from './useUser-2decb9ed.js';
+import { a as useReorderableItem, u as useReorderable } from './useReorderableItem-5dc7f226.js';
 import { u as useReorderableContext } from './useReorderableContext-79b1c941.js';
-import { G as Grid } from './Grid-5d56c8aa.js';
-import { F as Flex } from './Flex-5befe411.js';
+import { G as Grid } from './Grid-caf06064.js';
+import { F as Flex } from './Flex-97b023db.js';
 import { cardViewVars } from './PRIVATE_BaseCardView/themes/BaseCardViewContract.css.js';
 import { S as Skeleton } from './Skeleton-a06f4f74.js';
 import './PRIVATE_BaseCardView/themes/redwood/BaseCardViewBaseTheme.styles.css';

package/es/BaseRichSelection-533f2231.js

@@ -0,0 +1,343 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
+import { forwardRef, useRef, useState, useImperativeHandle, useMemo } from 'preact/compat';
+import './FormContext-55fb8000.js';
+import { u as useFormContext } from './useFormContext-bb9dc478.js';
+import { F as FormFieldContext } from './FormFieldContext-47ca0c20.js';
+import 'preact/hooks';
+import { u as useFormFieldContextProps } from './useFormFieldContextProps-31bbc12f.js';
+import { toChildArray } from 'preact';
+import { u as useCollectionFocusRing } from './useCollectionFocusRing-71cdd52c.js';
+import { u as useTranslationBundle } from './useTranslationBundle-38db1e3c.js';
+import { L as Label } from './Label-17e1d221.js';
+import { I as InlineHelp } from './InlineHelp-8293a502.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-af01b717.js';
+import './Flex-97b023db.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-7f8e69e7.js';
+import './LayerHost-a54158ef.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-a4b02dcc.js';
+import './IconStyle.styles.css';
+import './IconButton-e7787aeb.js';
+import './MessageStyles.styles.css';
+import './MessageFormattingUtils-cdb25115.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-8962c960.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-23f5791b.js';
+import { C as CheckboxRadioContext } from './CheckboxRadioContext-fe425383.js';
+import { l as layoutSpanStyles } from './LayoutStyles.css-6b02421a.js';
+import { G as Grid } from './Grid-caf06064.js';
+import { m as mergeRefs } from './refUtils-76275c69.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-cebbf701.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { u as useFormFieldContext } from './useFormFieldContext-daf7a676.js';
+import { l as labelSlotStyles, a as labelInnerStyles, S as StyledLabelValueLayout } from './StyledLabelValueLayout-24b10baa.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 { c as computeStartLabelWidth } from './formControlUtils-4ec34117.js';
+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 = ({ columnSpan = 1, 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';
+    // JET-68190 - labelStartWidth needs to take columnSpan into account
+    const width = 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();
+    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 fields
+    const hasBottomUserAssistance = !isDisabled;
+    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' && !hasTopUserAssistance ? (
+            // the first child is the one that will set the startData
+            jsx(RichSelectionStartContext.Provider, { value: { setStartData, isFirst: index === 0 }, children: child })) : (child);
+        });
+    }, [children, hasTopUserAssistance, 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 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, { columnSpan: columnSpan, 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-533f2231.js.map

package/es/BaseRichSelection-533f2231.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseRichSelection-533f2231.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":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/es/BaseSwatchView-96d72c6c.js

@@ -8,7 +8,7 @@ import { T as TabbableModeContext } from './TabbableModeContext-7d8ad946.js';
 import { u as useTabbableMode } from './useTabbableMode-a2fdbb06.js';
 import { i as isKeyDefined } from './keys-49c92dbb.js';
 import { e as compareListItemContext, f as findElementByKey, j as getViewportConfig, k as keyExtractor, I as ITEM_SELECTOR, l as getPrevNextKeyByCount, b as getFirstVisibleKey } from './collectionUtils-893f2808.js';
-import { u as useCurrentKey } from './useCurrentKey-7c652655.js';
+import { u as useCurrentKey } from './useCurrentKey-5a845f38.js';
 import { u as useCollectionFocusRing } from './useCollectionFocusRing-71cdd52c.js';
 import { u as useTabbableModeSet } from './useTabbableModeSet-274065a0.js';
 import { u as useSwatchSelection } from './useSwatchSelection-9395722d.js';
@@ -20,7 +20,7 @@ import { a as allTabbableElements } from './tabbableUtils-ce19b388.js';
 import { u as useId } from './useId-03dbfdf0.js';
 import { u as useResizeObserver } from './useResizeObserver-13641643.js';
 import { F as FocusTrap } from './FocusTrap-9f37aa41.js';
-import { F as Flex } from './Flex-5befe411.js';
+import { F as Flex } from './Flex-97b023db.js';
 
 /**
  * The internal component used to render a single item in SwatchView.