@oracle/oraclejet-preact 18.1.5 → 18.1.6

package/es/Checkbox-74259575.js

@@ -0,0 +1,104 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsxs, jsx } from 'preact/jsx-runtime';
+import { forwardRef, useRef, useCallback, useImperativeHandle } from 'preact/compat';
+import './logger-c92f309c.js';
+import './TabbableModeContext-7d8ad946.js';
+import 'preact/hooks';
+import { u as useId } from './useId-03dbfdf0.js';
+import './LayerHost-8b98d97d.js';
+import './UserAssistanceStyles.styles.css';
+import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.styles.css';
+import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js';
+import { a as InlineUserAssistance } from './InlineUserAssistance-65ca8810.js';
+import './Flex-2d9ebee9.js';
+import './MessageBannerStyles.styles.css';
+import './UNSAFE_MessageBanner/themes/redwood/MessageBannerBaseTheme.styles.css';
+import './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js';
+import 'preact';
+import './TooltipContentStyles.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
+import './tooltipUtils-35655bd6.js';
+import './IconStyle.styles.css';
+import './IconButton-19fcf0a8.js';
+import './MessageStyles.styles.css';
+import './MessageFormattingUtils-34c9b1aa.js';
+import './TransitionGroup-5fd80dc9.js';
+import './MessagesContext-76544845.js';
+import './HiddenAccessibleStyles.styles.css';
+import './ComponentMessageStyles.styles.css';
+import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageBaseTheme.styles.css';
+import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js';
+import './FormFieldContext-68eb5946.js';
+import './Popup-f6774b40.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 './InputGroupContext-20bdbd6e.js';
+import './UNSAFE_Popup/themes/redwood/PopupBaseTheme.styles.css';
+import './UNSAFE_Popup/themes/redwood/PopupVariants.css.js';
+import './FormContext-4d71f9c7.js';
+import { u as useFormContext } from './useFormContext-875cacd7.js';
+import { C as CheckboxRadioContext } from './CheckboxRadioContext-fe425383.js';
+import { C as CheckboxControl } from './CheckboxControl-c3c34028.js';
+
+/**
+ * Checkbox is a single standalone checkbox control. It represents a boolean value.
+ */
+const Checkbox = forwardRef(({ 'aria-describedby': ariaDescribedBy, assistiveText, columnSpan, helpSourceLink, helpSourceText, isDisabled: propIsDisabled, isReadonly: propIsReadonly, isRequired = false, messages, onCommit, userAssistanceDensity: propUserAssistanceDensity, value: propValue, testId, children }, ref = null) => {
+    const { isDisabled: isFormDisabled, isReadonly: isFormReadonly, userAssistanceDensity: formUserAssistanceDensity } = useFormContext();
+    const checkboxRef = useRef(null);
+    const id = useId();
+    const UAtestId = testId ? `${testId}-inline-user-assistance` : undefined;
+    // default to FormContext values if component properties are not specified
+    const isDisabled = propIsDisabled ?? isFormDisabled;
+    const isReadonly = propIsReadonly ?? isFormReadonly;
+    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;
+    // we still render <InlineUserAssistance/> if density is 'efficient' or 'compact' to save space,
+    // even though we don't render user assistance for disabled or readonly fields
+    const hasBottomUserAssistance = !isDisabled && !isReadonly;
+    const bottomUaId = hasBottomUserAssistance ? `${id}-bottom-ua` : undefined;
+    const onChangeHandler = useCallback((e) => {
+        // return early on keyup if key isn't spacebar
+        const { key } = e;
+        const hasKey = key !== undefined;
+        if (hasKey && key !== ' ') {
+            return;
+        }
+        const input = e.target;
+        // While mouse clicking StyledCheckbox results in toggling the checked state on an input element, spacebar key events do not.
+        // If it is a spacebar key event, we will return the toggled value of its current state.
+        const value = hasKey ? !input.checked : input.checked;
+        const previousValue = !!propValue;
+        if (previousValue !== value) {
+            onCommit({
+                value,
+                previousValue
+            });
+        }
+    }, [onCommit, propValue]);
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            !isDisabled && checkboxRef.current?.focus();
+        },
+        blur: () => {
+            const activeElement = document.activeElement;
+            checkboxRef.current === activeElement && activeElement.blur();
+        }
+    }));
+    // TODO fix issue with tooltip and link in label
+    // 
+    return (jsxs(CheckboxRadioContext.Provider, { value: { isFocusRingShown: !isDisabled }, children: [jsx(CheckboxControl, { ...(hasBottomUserAssistance
+                    ? {
+                        onChange: onChangeHandler,
+                        onKeyUp: onChangeHandler
+                    }
+                    : {}), "aria-describedby": ariaDescribedBy, assistiveText: assistiveText, columnSpan: columnSpan, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, isChecked: propValue, isDisabled: isDisabled, isReadonly: isReadonly, isRequired: isRequired, ref: checkboxRef, children: children }), hasBottomUserAssistance ? (jsx(InlineUserAssistance, { id: bottomUaId, isRequiredShown: !!isRequired && !propValue, requiredAlignment: "start", messages: messages, userAssistanceDensity: userAssistanceDensity === 'reflow' ? 'reflow' : 'efficient', testId: UAtestId })) : userAssistanceDensity === 'reflow' ? undefined : (
+            /* save space for user assistance if density is 'efficient' or 'compact', even though we don't
+               render user assistance for disabled or readonly fields */
+            jsx(InlineUserAssistance, { userAssistanceDensity: "efficient", testId: UAtestId }))] }));
+});
+
+export { Checkbox as C };
+//# sourceMappingURL=Checkbox-74259575.js.map

package/es/Checkbox-74259575.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox-74259575.js","sources":["../../src/UNSAFE_Checkbox/Checkbox.tsx"],"sourcesContent":["import { ComponentChildren, ComponentProps, Ref } from 'preact';\nimport { forwardRef, useCallback, useImperativeHandle, useRef } from 'preact/compat';\n\nimport { InlineUserAssistance, UserAssistanceDensityType } from '#UNSAFE_UserAssistance';\nimport { useFormContext } from '#hooks/UNSAFE_useFormContext';\nimport { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { FocusableHandle } from '#hooks/UNSAFE_useFocusableTextField';\nimport { CheckboxControl } from '#PRIVATE_CheckboxControl';\nimport { useId } from '#hooks/UNSAFE_useId';\nimport { CheckboxRadioContext } from '#PRIVATE_CheckboxRadioField/CheckboxRadioContext';\nimport { AriaAttributesSignalExcluded } from '#utils/UNSAFE_attributeUtils';\nimport { LayoutColumnSpan } from '#utils/UNSAFE_styles/Layout';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\n\ntype InlineUserAssistanceProps = ComponentProps<typeof InlineUserAssistance>;\n\ntype Props = {\n  /**\n   * The ID of an element (or space separated IDs of multiple elements) that\n   * describes the input.\n   */\n  'aria-describedby'?: AriaAttributesSignalExcluded['aria-describedby'];\n  /**\n   * Text to provide the user with additional information.\n   */\n  assistiveText?: InlineUserAssistanceProps['assistiveText'];\n  /**\n   * Content associated with checkbox. This can be a label or a block of text.\n   */\n  children: ComponentChildren;\n  /**\n   * Specifies how many columns to span in a FormLayout with direction === 'row'\n   */\n  columnSpan?: LayoutColumnSpan;\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 whether the checkbox requires a selection to be made.\n   */\n  isRequired?: boolean;\n  /**\n   * Specifies if the checkbox is read-only.\n   */\n  isReadonly?: boolean;\n  /**\n   * Specifies if the checkbox is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Messages to show on screen that are associated with the component.\n   */\n  messages?: InlineUserAssistanceProps['messages'];\n  /**\n   * Callback invoked each time the user changes checkbox selection.\n   */\n  onCommit: (detail: ValueUpdateDetail<boolean>) => void;\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   * Value of the checkbox.\n   */\n  value?: boolean;\n} & TestIdProps;\n\n/**\n * Checkbox is a single standalone checkbox control. It represents a boolean value.\n */\nexport const Checkbox = forwardRef(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      assistiveText,\n      columnSpan,\n      helpSourceLink,\n      helpSourceText,\n      isDisabled: propIsDisabled,\n      isReadonly: propIsReadonly,\n      isRequired = false,\n      messages,\n      onCommit,\n      userAssistanceDensity: propUserAssistanceDensity,\n      value: propValue,\n      testId,\n      children\n    }: Props,\n    ref: Ref<FocusableHandle> = null\n  ) => {\n    const {\n      isDisabled: isFormDisabled,\n      isReadonly: isFormReadonly,\n      userAssistanceDensity: formUserAssistanceDensity\n    } = useFormContext();\n\n    const checkboxRef = useRef<HTMLInputElement>(null);\n    const id = useId();\n    const UAtestId = testId ? `${testId}-inline-user-assistance` : undefined;\n\n    // default to FormContext values if component properties are not specified\n    const isDisabled = propIsDisabled ?? isFormDisabled;\n    const isReadonly = propIsReadonly ?? isFormReadonly;\n    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;\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 or readonly fields\n    const hasBottomUserAssistance = !isDisabled && !isReadonly;\n    const bottomUaId = hasBottomUserAssistance ? `${id}-bottom-ua` : undefined;\n\n    const onChangeHandler = useCallback(\n      (e: Event) => {\n        // return early on keyup if key isn't spacebar\n        const { key } = e as KeyboardEvent;\n        const hasKey = key !== undefined;\n\n        if (hasKey && key !== ' ') {\n          return;\n        }\n\n        const input = e.target as HTMLInputElement;\n        // While mouse clicking StyledCheckbox results in toggling the checked state on an input element, spacebar key events do not.\n        // If it is a spacebar key event, we will return the toggled value of its current state.\n        const value = hasKey ? !input.checked : input.checked;\n        const previousValue = !!propValue;\n\n        if (previousValue !== value) {\n          onCommit({\n            value,\n            previousValue\n          });\n        }\n      },\n      [onCommit, propValue]\n    );\n\n    useImperativeHandle(ref, () => ({\n      focus: () => {\n        !isDisabled && checkboxRef.current?.focus();\n      },\n      blur: () => {\n        const activeElement = document.activeElement as HTMLElement;\n        checkboxRef.current === activeElement && activeElement.blur();\n      }\n    }));\n\n    // TODO fix issue with tooltip and link in label\n    // \n\n    return (\n      <CheckboxRadioContext.Provider value={{ isFocusRingShown: !isDisabled }}>\n        <CheckboxControl\n          {...(hasBottomUserAssistance\n            ? {\n                onChange: onChangeHandler,\n                onKeyUp: onChangeHandler\n              }\n            : {})}\n          aria-describedby={ariaDescribedBy}\n          assistiveText={assistiveText}\n          columnSpan={columnSpan}\n          helpSourceLink={helpSourceLink}\n          helpSourceText={helpSourceText}\n          isChecked={propValue}\n          isDisabled={isDisabled}\n          isReadonly={isReadonly}\n          isRequired={isRequired}\n          ref={checkboxRef}>\n          {children}\n        </CheckboxControl>\n        {hasBottomUserAssistance ? (\n          <InlineUserAssistance\n            id={bottomUaId}\n            isRequiredShown={!!isRequired && !propValue}\n            requiredAlignment=\"start\"\n            messages={messages}\n            userAssistanceDensity={userAssistanceDensity === 'reflow' ? 'reflow' : 'efficient'}\n            testId={UAtestId}\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 or readonly fields */\n          <InlineUserAssistance userAssistanceDensity=\"efficient\" testId={UAtestId} />\n        )}\n      </CheckboxRadioContext.Provider>\n    );\n  }\n);\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/es/CheckboxControl-c3c34028.js

@@ -0,0 +1,109 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { forwardRef, useRef, createRef, useEffect } from 'preact/compat';
+import { u as useCheckboxRadioContext } from './CheckboxRadioContext-fe425383.js';
+import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { u as useFocus } from './useFocus-38c95977.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import './TabbableModeContext-7d8ad946.js';
+import { u as useTabbableMode } from './useTabbableMode-a3a351d0.js';
+import { u as useTranslationBundle } from './useTranslationBundle-2df40edf.js';
+import './UserAssistanceStyles.styles.css';
+import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.styles.css';
+import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js';
+import 'preact/hooks';
+import './Flex-2d9ebee9.js';
+import './MessageBannerStyles.styles.css';
+import './UNSAFE_MessageBanner/themes/redwood/MessageBannerBaseTheme.styles.css';
+import './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js';
+import 'preact';
+import { u as useId } from './useId-03dbfdf0.js';
+import './LayerHost-8b98d97d.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-35655bd6.js';
+import './IconStyle.styles.css';
+import './IconButton-19fcf0a8.js';
+import './MessageStyles.styles.css';
+import './MessageFormattingUtils-34c9b1aa.js';
+import './logger-c92f309c.js';
+import './TransitionGroup-5fd80dc9.js';
+import './MessagesContext-76544845.js';
+import './ComponentMessageStyles.styles.css';
+import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageBaseTheme.styles.css';
+import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js';
+import './FormContext-4d71f9c7.js';
+import './FormFieldContext-68eb5946.js';
+import './InputGroupContext-20bdbd6e.js';
+import './Popup-f6774b40.js';
+import './UNSAFE_Separator/themes/SeparatorStyles.css.js';
+import { u as useFocusWithin } from './useFocusWithin-30b1e2d8.js';
+import './LabelStyles.styles.css';
+import './UNSAFE_Label/themes/redwood/LabelBaseTheme.styles.css';
+import './UNSAFE_Label/themes/redwood/LabelVariants.css.js';
+import { I as IconUserAssistance } from './IconUserAssistance-d9bc82d4.js';
+import { S as StyledCheckbox } from './StyledCheckbox-4451bc4a.js';
+import { CheckboxRedwoodTheme } from './UNSAFE_Checkbox/themes/redwood/CheckboxTheme.js';
+import { u as useActive } from './useActive-fb6d4d52.js';
+import { m as merge } from './stringUtils-16f617bc.js';
+import { l as layoutSpanStyles } from './LayoutStyles.css-8a60c28c.js';
+
+/**
+ * CheckboxControl is an internal subcomponent used by both Checkbox and CheckboxItem.
+ * It handles styling, placement of label, assistive text, and accessibility text for both parent components.
+ * onCommit handling is handled in the parent components.
+ */
+const CheckboxControl = forwardRef(({ 'aria-describedby': ariaDescribedBy, name, value, children, isChecked, isDisabled, isReadonly, isRequired, onChange, onKeyUp, assistiveText, helpSourceLink, helpSourceText, columnSpan = 1 }, ref = null) => {
+    // hooks
+    const id = useId();
+    const childWrapperRef = useRef(null);
+    const { isTabbable } = useTabbableMode();
+    const { isActive, activeProps } = useActive();
+    const { isFocusRingShown } = useCheckboxRadioContext();
+    const labelRef = createRef();
+    const { isFocus, focusProps: { onFocus, onBlur } } = useFocus();
+    // styling
+    const { classes: checkboxClasses, styles: { valueLabelStyle, checkboxSpanStyle } } = useComponentTheme(CheckboxRedwoodTheme, {
+        disabled: isDisabled ? 'isDisabled' : 'notDisabled',
+        focused: isFocus && isFocusRingShown ? 'isFocused' : 'notFocused'
+    });
+    // help available
+    const hasUserAssistive = !isDisabled && !isReadonly && !!(assistiveText || helpSourceLink);
+    const helpAvailableId = hasUserAssistive ? `${id}-help-available` : undefined;
+    const uaId = hasUserAssistive ? `${id}-icon-ua` : undefined;
+    const { formControl_helpAvailable } = useTranslationBundle('@oracle/oraclejet-preact');
+    const helpAvailableString = formControl_helpAvailable();
+    const userAssistiveHelp = hasUserAssistive ? (jsx(HiddenAccessible, { id: helpAvailableId, children: helpAvailableString })) : undefined;
+    // prevent auto scrolling
+    const onKeyDown = (event) => {
+        const { key } = event;
+        if (!isReadonly && key !== undefined && key === ' ') {
+            event.preventDefault();
+        }
+    };
+    // we want to prevent mouseDown on Links to set active
+    const onMouseDownHandler = (e) => {
+        // check to see if the target is within an <a> tag and the tag is within the label
+        const closestAnchor = e.target.closest('a');
+        closestAnchor && childWrapperRef.current?.contains(closestAnchor)
+            ? e.stopPropagation()
+            : activeProps['onMouseDown']?.(e);
+    };
+    // don't allow key down to set active state
+    delete activeProps['onKeyDown'];
+    const { focusProps, isFocused: isFocusedWithin } = useFocusWithin();
+    // JET-70100 - ensure checkbox is scrolled into view when focused and focus ring is shown
+    useEffect(() => {
+        if (isFocus && isFocusRingShown) {
+            labelRef?.current?.scrollIntoView({ block: 'nearest' });
+        }
+    }, [isFocus, isFocusRingShown, labelRef]);
+    // The top level element needs the column span class on it.
+    const classes = layoutSpanStyles.layoutSpanColumn[columnSpan];
+    return (jsxs("label", { ref: labelRef, class: classNames([checkboxClasses, classes]), children: [jsx("span", { class: checkboxSpanStyle, ...activeProps, children: jsx(StyledCheckbox, { "aria-describedby": merge([ariaDescribedBy, helpAvailableId]), name: name, value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onKeyUp: onKeyUp, onKeyDown: onKeyDown, isActive: isActive, isChecked: isChecked ? 'checked' : 'unchecked', isDisabled: isDisabled, isReadonly: isReadonly, isRequired: isRequired, ref: ref }) }), userAssistiveHelp, jsxs("span", { class: valueLabelStyle, children: [jsx("span", { ...activeProps, ...focusProps, onMouseDown: onMouseDownHandler, ref: childWrapperRef, children: children }), hasUserAssistive && (jsx(IconUserAssistance, { assistiveText: assistiveText, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, isTabbable: isTabbable && (isFocus || isFocusedWithin), id: uaId }))] })] }));
+});
+
+export { CheckboxControl as C };
+//# sourceMappingURL=CheckboxControl-c3c34028.js.map

package/es/CheckboxControl-c3c34028.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxControl-c3c34028.js","sources":["../../src/PRIVATE_CheckboxControl/CheckboxControl.tsx"],"sourcesContent":["import { ComponentChild, ComponentProps, Ref } from 'preact';\nimport { forwardRef, createRef, useEffect, useRef } from 'preact/compat';\n\nimport { useCheckboxRadioContext } from '../PRIVATE_CheckboxRadioField/CheckboxRadioContext';\nimport { HiddenAccessible } from '../UNSAFE_HiddenAccessible';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { useFocus } from '../hooks/UNSAFE_useFocus';\nimport { IconUserAssistance, InlineUserAssistance } from '../UNSAFE_UserAssistance';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\nimport { useId } from '../hooks/UNSAFE_useId';\nimport { StyledCheckbox } from '../PRIVATE_StyledCheckbox';\nimport { CheckboxRedwoodTheme } from '../UNSAFE_Checkbox/themes/redwood/CheckboxTheme';\nimport { useActive } from '../hooks/UNSAFE_useActive';\nimport {\n  CheckboxVariantOptions,\n  CheckboxStyles\n} from '../UNSAFE_Checkbox/themes/CheckboxStyles.css';\nimport { merge } from '#utils/UNSAFE_stringUtils';\nimport { useFocusWithin } from '#hooks/UNSAFE_useFocusWithin';\nimport { LayoutColumnSpan, layoutSpanStyles } from '#utils/UNSAFE_styles/Layout';\nimport { classNames } from '#utils/UNSAFE_classNames';\n\ntype InlineUserAssistanceProps = ComponentProps<typeof InlineUserAssistance>;\ntype StyledCheckboxProps = ComponentProps<typeof StyledCheckbox>;\n\ntype CheckboxControlProps = Pick<\n  StyledCheckboxProps,\n  | 'aria-describedby'\n  | 'name'\n  | 'value'\n  | 'onChange'\n  | 'onKeyUp'\n  | 'isReadonly'\n  | 'isDisabled'\n  | 'isRequired'\n> &\n  Pick<InlineUserAssistanceProps, 'assistiveText' | 'helpSourceLink' | 'helpSourceText'> & {\n    /**\n     * Text that describes the checkbox value.\n     */\n    children: ComponentChild;\n    /**\n     * Specifies how many columns to span in a FormLayout with direction === 'row'\n     */\n    columnSpan?: LayoutColumnSpan;\n    /**\n     * Whether the input element is checked.\n     */\n    isChecked?: boolean;\n  };\n\n/**\n * CheckboxControl is an internal subcomponent used by both Checkbox and CheckboxItem.\n * It handles styling, placement of label, assistive text, and accessibility text for both parent components.\n * onCommit handling is handled in the parent components.\n */\nconst CheckboxControl = forwardRef(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      name,\n      value,\n      children,\n      isChecked,\n      isDisabled,\n      isReadonly,\n      isRequired,\n      onChange,\n      onKeyUp,\n      assistiveText,\n      helpSourceLink,\n      helpSourceText,\n      columnSpan = 1\n    }: CheckboxControlProps,\n    ref: Ref<HTMLInputElement> = null\n  ) => {\n    // hooks\n    const id = useId();\n    const childWrapperRef = useRef<HTMLSpanElement>(null);\n    const { isTabbable } = useTabbableMode();\n    const { isActive, activeProps } = useActive();\n    const { isFocusRingShown } = useCheckboxRadioContext();\n    const labelRef = createRef<HTMLLabelElement>();\n    const {\n      isFocus,\n      focusProps: { onFocus, onBlur }\n    } = useFocus();\n\n    // styling\n    const {\n      classes: checkboxClasses,\n      styles: { valueLabelStyle, checkboxSpanStyle }\n    } = useComponentTheme<CheckboxVariantOptions, CheckboxStyles>(CheckboxRedwoodTheme, {\n      disabled: isDisabled ? 'isDisabled' : 'notDisabled',\n      focused: isFocus && isFocusRingShown ? 'isFocused' : 'notFocused'\n    });\n\n    // help available\n    const hasUserAssistive = !isDisabled && !isReadonly && !!(assistiveText || helpSourceLink);\n    const helpAvailableId = hasUserAssistive ? `${id}-help-available` : undefined;\n    const uaId = hasUserAssistive ? `${id}-icon-ua` : undefined;\n    const { formControl_helpAvailable } = useTranslationBundle<BundleType>(\n      '@oracle/oraclejet-preact'\n    );\n    const helpAvailableString = formControl_helpAvailable();\n    const userAssistiveHelp = hasUserAssistive ? (\n      <HiddenAccessible id={helpAvailableId}>{helpAvailableString}</HiddenAccessible>\n    ) : undefined;\n\n    // prevent auto scrolling\n    const onKeyDown = (event: KeyboardEvent) => {\n      const { key } = event;\n      if (!isReadonly && key !== undefined && key === ' ') {\n        event.preventDefault();\n      }\n    };\n\n    // we want to prevent mouseDown on Links to set active\n    const onMouseDownHandler = (e: Event) => {\n      // check to see if the target is within an <a> tag and the tag is within the label\n      const closestAnchor = (e.target as Element).closest('a');\n      closestAnchor && childWrapperRef.current?.contains(closestAnchor)\n        ? e.stopPropagation()\n        : activeProps['onMouseDown']?.(e);\n    };\n\n    // don't allow key down to set active state\n    delete activeProps['onKeyDown'];\n    const { focusProps, isFocused: isFocusedWithin } = useFocusWithin();\n\n    // JET-70100 - ensure checkbox is scrolled into view when focused and focus ring is shown\n    useEffect(() => {\n      if (isFocus && isFocusRingShown) {\n        labelRef?.current?.scrollIntoView({ block: 'nearest' });\n      }\n    }, [isFocus, isFocusRingShown, labelRef]);\n\n    // The top level element needs the column span class on it.\n    const classes = layoutSpanStyles.layoutSpanColumn[columnSpan];\n\n    return (\n      <label ref={labelRef} class={classNames([checkboxClasses, classes])}>\n        <span class={checkboxSpanStyle} {...activeProps}>\n          <StyledCheckbox\n            aria-describedby={merge([ariaDescribedBy, helpAvailableId])}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onBlur={onBlur}\n            onFocus={onFocus}\n            onKeyUp={onKeyUp}\n            onKeyDown={onKeyDown}\n            isActive={isActive}\n            isChecked={isChecked ? 'checked' : 'unchecked'}\n            isDisabled={isDisabled}\n            isReadonly={isReadonly}\n            isRequired={isRequired}\n            ref={ref}\n          />\n        </span>\n        {userAssistiveHelp}\n        <span class={valueLabelStyle}>\n          <span\n            {...activeProps}\n            {...focusProps}\n            onMouseDown={onMouseDownHandler}\n            ref={childWrapperRef}>\n            {children}\n          </span>\n          {hasUserAssistive && (\n            <IconUserAssistance\n              assistiveText={assistiveText}\n              helpSourceLink={helpSourceLink}\n              helpSourceText={helpSourceText}\n              isTabbable={isTabbable && (isFocus || isFocusedWithin)}\n              id={uaId}\n            />\n          )}\n        </span>\n      </label>\n    );\n  }\n);\n\nexport { CheckboxControl };\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/es/CheckboxRadioField-294463ba.js

@@ -0,0 +1,183 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
+import { forwardRef, useRef, useImperativeHandle } from 'preact/compat';
+import { u as useCollectionFocusRing } from './useCollectionFocusRing-de20f4fc.js';
+import { u as useTranslationBundle } from './useTranslationBundle-2df40edf.js';
+import { F as Flex } from './Flex-2d9ebee9.js';
+import { L as Label } from './Label-25eba25e.js';
+import { I as InlineHelp } from './InlineHelp-da344cfa.js';
+import './logger-c92f309c.js';
+import './TabbableModeContext-7d8ad946.js';
+import 'preact/hooks';
+import './UserAssistanceStyles.styles.css';
+import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.styles.css';
+import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js';
+import { I as InlineUserAssistanceContainer, a as InlineUserAssistance } from './InlineUserAssistance-65ca8810.js';
+import './MessageBannerStyles.styles.css';
+import './UNSAFE_MessageBanner/themes/redwood/MessageBannerBaseTheme.styles.css';
+import './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js';
+import 'preact';
+import { x as xUnits } from './utils-a4102e03.js';
+import { u as useTestId } from './useTestId-474ac6ca.js';
+import './LayerHost-8b98d97d.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-35655bd6.js';
+import './IconStyle.styles.css';
+import './IconButton-19fcf0a8.js';
+import './MessageStyles.styles.css';
+import './MessageFormattingUtils-34c9b1aa.js';
+import './TransitionGroup-5fd80dc9.js';
+import './MessagesContext-76544845.js';
+import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
+import './ComponentMessageStyles.styles.css';
+import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageBaseTheme.styles.css';
+import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js';
+import './FormFieldContext-68eb5946.js';
+import './Popup-f6774b40.js';
+import './UNSAFE_Separator/themes/SeparatorStyles.css.js';
+import './LabelStyles.styles.css';
+import './UNSAFE_Label/themes/redwood/LabelBaseTheme.styles.css';
+import './UNSAFE_Label/themes/redwood/LabelVariants.css.js';
+import './UNSAFE_Popup/themes/redwood/PopupBaseTheme.styles.css';
+import './UNSAFE_Popup/themes/redwood/PopupVariants.css.js';
+import { u as useCheckboxRadioField, t as topUAContainerStyles } from './CheckboxRadioFieldStyles.css-cf673ef0.js';
+import { C as CheckboxRadioContext } from './CheckboxRadioContext-fe425383.js';
+import { l as layoutSpanStyles } from './LayoutStyles.css-8a60c28c.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import './FormContext-4d71f9c7.js';
+import { u as useFormContext } from './useFormContext-875cacd7.js';
+import { u as useFormFieldContext } from './useFormFieldContext-626574fd.js';
+import { s as sizeToCSS } from './size-18139a3a.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { RadioRedwoodTheme } from './UNSAFE_RadioItem/themes/redwood/RadioTheme.js';
+import { LabelRedwoodTheme } from './UNSAFE_Label/themes/redwood/LabelTheme.js';
+import { FormLayoutRedwoodTheme } from './UNSAFE_TextField/themes/redwood/FormLayoutTheme.js';
+import { CheckboxRedwoodTheme } from './UNSAFE_Checkbox/themes/redwood/CheckboxTheme.js';
+import { l as labelSlotStyles, a as labelInnerStyles, S as StyledLabelValueLayout } from './StyledLabelValueLayout-5b9a731a.js';
+import './CheckboxRadioLabelValueLayoutStyles.styles.css';
+
+var checkboxRadioLabelInnerStyles = {startRadioSetWithoutTopUA:'CheckboxRadioLabelValueLayoutStyles_checkboxRadioLabelInnerStyles_startRadioSetWithoutTopUA__6098ei0',insideRadioSet:'CheckboxRadioLabelValueLayoutStyles_checkboxRadioLabelInnerStyles_insideRadioSet__6098ei1',startCheckboxSetWithoutTopUA:'CheckboxRadioLabelValueLayoutStyles_checkboxRadioLabelInnerStyles_startCheckboxSetWithoutTopUA__6098ei2',insideCheckboxSet:'CheckboxRadioLabelValueLayoutStyles_checkboxRadioLabelInnerStyles_insideCheckboxSet__6098ei3'};
+
+/**
+ * A layout component for rendering a label and value pair, used in form components
+ * such as CheckboxSet and RadioSet.
+ */
+const CheckboxRadioLabelValueLayout = ({ label, labelEdge, children, parentComponentVariant, labelStartWidth = '33%', hasTopUserAssistance = false }) => {
+    const { baseTheme: radioTheme } = useComponentTheme(RadioRedwoodTheme);
+    const { baseTheme: checkboxTheme } = useComponentTheme(CheckboxRedwoodTheme);
+    const { baseTheme: labelTheme } = useComponentTheme(LabelRedwoodTheme);
+    const { baseTheme: formLayoutTheme } = useComponentTheme(FormLayoutRedwoodTheme);
+    const isRadio = parentComponentVariant === 'radioSet';
+    const isCheckbox = parentComponentVariant === 'checkboxSet';
+    const isStart = labelEdge === 'start';
+    const isTop = labelEdge === 'top' || labelEdge === 'inside'; // 'inside' needs to pick up all 'top' styles.
+    const isInside = labelEdge === 'inside';
+    const width = sizeToCSS(labelStartWidth);
+    const valueWidth = `calc(100% - ${width})`;
+    const labelStyles = isStart
+        ? { flexBasis: width, width: width, maxWidth: width }
+        : {};
+    const valueStyles = isStart
+        ? { flexBasis: valueWidth, width: valueWidth, maxWidth: valueWidth }
+        : {};
+    const { isFormLayout, isReadonly: isFormReadonly, labelWrapping } = useFormContext();
+    const { isReadonly } = useFormFieldContext();
+    const isPureReadonly = (isFormLayout && isFormReadonly) || (!isFormLayout && isReadonly);
+    const labelStyleClasses = classNames([
+        formLayoutTheme,
+        labelSlotStyles.base,
+        isStart && labelSlotStyles.start,
+        isTop && labelSlotStyles.top,
+        isTop && hasTopUserAssistance && labelSlotStyles.topAndTopUA,
+        isTop && isPureReadonly && labelSlotStyles.topPureReadonly
+    ]);
+    const labelInnerClasses = classNames([
+        isRadio && radioTheme,
+        isCheckbox && checkboxTheme,
+        labelTheme,
+        formLayoutTheme,
+        labelInnerStyles.base,
+        isStart && labelInnerStyles.start,
+        isRadio && isInside && checkboxRadioLabelInnerStyles.insideRadioSet,
+        isCheckbox && isInside && checkboxRadioLabelInnerStyles.insideCheckboxSet,
+        isRadio &&
+            isStart &&
+            !hasTopUserAssistance &&
+            checkboxRadioLabelInnerStyles.startRadioSetWithoutTopUA,
+        isCheckbox &&
+            isStart &&
+            !hasTopUserAssistance &&
+            checkboxRadioLabelInnerStyles.startCheckboxSetWithoutTopUA,
+        labelWrapping === 'truncate' && labelInnerStyles.noWrap
+    ]);
+    return (jsx(StyledLabelValueLayout
+    // For readonly start aligned labels, we want the div that is the parent of the label to
+    // stretch to the height of the value content, including the end content (InputSensitiveText)
+    , { 
+        // For readonly start aligned labels, we want the div that is the parent of the label to
+        // stretch to the height of the value content, including the end content (InputSensitiveText)
+        flexAlign: isReadonly && isStart ? 'stretch' : 'start', labelStyleClasses: labelStyleClasses, labelStyles: labelStyles, labelInnerClasses: labelInnerClasses, label: label, valueStyles: valueStyles, children: children }));
+};
+
+const CheckboxRadioField = forwardRef(({ 'aria-describedby': ariaDescribedBy, assistiveText, baseId, direction = 'column', columnSpan = 1, hasValue, helpSourceLink, helpSourceText, isDisabled, isReadonly, isRequired, label, labelEdge, labelStartWidth = '33%', parentComponentVariant, messages, userAssistanceDensity, role, children, testId }, ref = null) => {
+    const testIdProps = useTestId(testId);
+    const UAtestId = `${testId}-inline-user-assistance`;
+    const UAtestIdTop = testId ? `${UAtestId}-top` : undefined;
+    const UAtestIdBottom = testId ? `${UAtestId}-bottom` : undefined;
+    const hasTopUserAssistance = !isDisabled && !isReadonly && (!!assistiveText || !!helpSourceLink);
+    // we still render <InlineUserAssistance/> if density is 'efficient' or 'compact' to save space,
+    // even though we don't render user assistance for disabled or readonly fields
+    const hasBottomUserAssistance = !isDisabled && !isReadonly;
+    const groupRef = useRef(null);
+    const { groupProps, labelProps, topUserAssistanceProps, bottomUserAssistanceProps, readonlyId } = useCheckboxRadioField({
+        ariaDescribedBy,
+        baseId,
+        isRequired,
+        isReadonly,
+        isDisabled,
+        label,
+        labelEdge,
+        messages,
+        hasValue,
+        hasTopUserAssistance,
+        hasBottomUserAssistance,
+        parentComponentVariant
+    });
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const readonlyLabel = translations.formControl_readOnly();
+    const isRadioSet = parentComponentVariant === 'radioSet';
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            if (!isDisabled) {
+                const inputChildren = groupRef.current?.querySelectorAll('input') ?? [];
+                const selectedChild = Array.from(inputChildren).find((child) => child.checked);
+                if (selectedChild) {
+                    selectedChild.focus();
+                }
+                else {
+                    inputChildren[0].focus();
+                }
+            }
+        },
+        blur: () => {
+            if (groupRef.current?.contains(document.activeElement)) {
+                document.activeElement.blur();
+            }
+        }
+    }));
+    // the props from the hook are used for focus management on the radioset variant to allow for arrow navigation
+    // while checkboxset uses tabbing
+    const [isFocusRingShown, focusRingProps] = useCollectionFocusRing(groupRef, isRadioSet ? ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'] : ['Tab']);
+    const content = (jsxs(Fragment, { children: [hasTopUserAssistance && (jsx("div", { id: `${baseId}-top-ua-container`, class: labelEdge === 'start' ? topUAContainerStyles.start : topUAContainerStyles.top, children: jsx(InlineUserAssistanceContainer, { ...topUserAssistanceProps, testId: UAtestIdTop, children: jsx(InlineHelp, { assistiveText: assistiveText, sourceLink: helpSourceLink, sourceText: helpSourceText }) }) })), jsx(Flex, { direction: direction, ...(direction === 'row' && { gap: [0, xUnits(8)], wrap: 'wrap' }), children: jsx(CheckboxRadioContext.Provider, { value: { isFocusRingShown }, children: children }) }), hasBottomUserAssistance ? (jsx(InlineUserAssistance, { ...bottomUserAssistanceProps, requiredAlignment: "start", messages: messages, userAssistanceDensity: userAssistanceDensity === 'reflow' ? 'reflow' : 'efficient', testId: UAtestIdBottom })) : userAssistanceDensity === 'reflow' ? undefined : (
+            /* save space for user assistance if density is 'efficient' or 'compact', even though we don't
+               render user assistance for disabled or readonly fields */
+            jsx(InlineUserAssistance, { id: bottomUserAssistanceProps?.id, userAssistanceDensity: "efficient", testId: UAtestIdBottom }))] }));
+    // The top level element needs the column span class on it.
+    const classes = layoutSpanStyles.layoutSpanColumn[columnSpan];
+    return (jsxs("div", { role: role, ref: groupRef, class: classes, ...groupProps, ...focusRingProps, ...testIdProps, children: [labelEdge === 'none' ? (content) : (jsx(CheckboxRadioLabelValueLayout, { parentComponentVariant: parentComponentVariant, hasTopUserAssistance: hasTopUserAssistance, label: jsx(Label, { ...labelProps, variant: labelEdge, userAssistanceDensity: "efficient", parentComponentVariant: parentComponentVariant, children: label }), labelEdge: labelEdge, labelStartWidth: labelStartWidth, children: content })), isReadonly && (jsx(HiddenAccessible, { id: readonlyId, isHidden: true, children: readonlyLabel }))] }));
+});
+
+export { CheckboxRadioField as C };
+//# sourceMappingURL=CheckboxRadioField-294463ba.js.map

package/es/CheckboxRadioField-294463ba.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxRadioField-294463ba.js","sources":["../../src/PRIVATE_CheckboxRadioField/CheckboxRadioLabelValueLayout.tsx","../../src/PRIVATE_CheckboxRadioField/CheckboxRadioField.tsx"],"sourcesContent":["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 { sizeToCSS, Size } from '#utils/UNSAFE_size';\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 {\n  labelSlotStyles,\n  labelInnerStyles\n} from '#UNSAFE_LabelValueLayout/LabelValueLayoutStyles.css';\nimport { StyledLabelValueLayout } from '#UNSAFE_LabelValueLayout/StyledLabelValueLayout';\nimport { checkboxRadioLabelInnerStyles } from './CheckboxRadioLabelValueLayoutStyles.css';\n\ntype Props = {\n  /**\n   * Defines how the label is going to be positioned. For CheckboxSet or RadioSet the start, top and inside values are supported.\n   */\n  labelEdge?: 'start' | 'top' | 'inside';\n  /**\n   * Specifies if the parent component is a CheckboxSet or RadioSet\n   */\n  parentComponentVariant: 'radioSet' | 'checkboxSet';\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   * 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 CheckboxSet and RadioSet.\n */\nexport const CheckboxRadioLabelValueLayout = ({\n  label,\n  labelEdge,\n  children,\n  parentComponentVariant,\n  labelStartWidth = '33%',\n  hasTopUserAssistance = 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\n  const isRadio = parentComponentVariant === 'radioSet';\n  const isCheckbox = parentComponentVariant === 'checkboxSet';\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  const width = sizeToCSS(labelStartWidth);\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, labelWrapping } = 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    isRadio && radioTheme,\n    isCheckbox && checkboxTheme,\n    labelTheme,\n    formLayoutTheme,\n    labelInnerStyles.base,\n    isStart && labelInnerStyles.start,\n    isRadio && isInside && checkboxRadioLabelInnerStyles.insideRadioSet,\n    isCheckbox && isInside && checkboxRadioLabelInnerStyles.insideCheckboxSet,\n    isRadio &&\n      isStart &&\n      !hasTopUserAssistance &&\n      checkboxRadioLabelInnerStyles.startRadioSetWithoutTopUA,\n    isCheckbox &&\n      isStart &&\n      !hasTopUserAssistance &&\n      checkboxRadioLabelInnerStyles.startCheckboxSetWithoutTopUA,\n    labelWrapping === 'truncate' && labelInnerStyles.noWrap\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 { ComponentChildren, ComponentProps, Ref } from 'preact';\nimport { forwardRef, useImperativeHandle, useRef } from 'preact/compat';\n\nimport { FocusableHandle } from '#hooks/UNSAFE_useFocusableTextField';\nimport { useCollectionFocusRing } from '#hooks/PRIVATE_useCollectionFocusRing';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { FlexboxProps } from '#utils/UNSAFE_interpolations/flexbox';\nimport { Size } from '#utils/UNSAFE_size';\nimport { BundleType } from '#resources/nls/bundle';\nimport { Flex } from '#UNSAFE_Flex';\nimport { Label } from '#UNSAFE_Label';\nimport {\n  InlineHelp,\n  InlineUserAssistance,\n  InlineUserAssistanceContainer,\n  UserAssistanceDensityType\n} from '#UNSAFE_UserAssistance';\nimport { useCheckboxRadioField } from './useCheckboxRadioField';\nimport { HiddenAccessible } from '#UNSAFE_HiddenAccessible';\nimport { xUnits } from '#UNSAFE_Theme';\nimport { topUAContainerStyles } from './CheckboxRadioFieldStyles.css';\nimport { CheckboxRadioContext } from './CheckboxRadioContext';\nimport { layoutSpanStyles, LayoutColumnSpan } from '#utils/UNSAFE_styles/Layout';\nimport { type TestIdProps, useTestId } from '#hooks/UNSAFE_useTestId';\nimport { CheckboxRadioLabelValueLayout } from './CheckboxRadioLabelValueLayout';\nimport { AriaAttributesSignalExcluded } from '#utils/UNSAFE_attributeUtils';\n\ntype InlineUserAssistanceProps = ComponentProps<typeof InlineUserAssistance>;\n\ntype AriaProps = Pick<AriaAttributesSignalExcluded, '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     * <RadioItem /> or <CheckboxItem />\n     */\n    children: ComponentChildren;\n    /**\n     * Specifies how many columns to span in a FormLayout with direction === 'row'\n     */\n    columnSpan?: LayoutColumnSpan;\n    /**\n     * layout direction of the children elements\n     */\n    direction?: FlexboxProps['direction'];\n    /**\n     * Value of the radio 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 radio group is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Specifies if the radio group is read-only.\n     */\n    isReadonly?: boolean;\n    /**\n     * Specifies whether the radio group requires a selection to be made.\n     */\n    isRequired?: boolean;\n    /**\n     * Label text for the group of radio buttons.\n     */\n    label: string;\n    /**\n     * Specifies where the label is positioned relative to the field.\n     */\n    labelEdge?: 'none' | 'top' | 'start' | 'inside';\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    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    parentComponentVariant: 'radioSet' | 'checkboxSet';\n  };\n\nexport const CheckboxRadioField = forwardRef(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      assistiveText,\n      baseId,\n      direction = 'column',\n      columnSpan = 1,\n      hasValue,\n      helpSourceLink,\n      helpSourceText,\n      isDisabled,\n      isReadonly,\n      isRequired,\n      label,\n      labelEdge,\n      labelStartWidth = '33%',\n      parentComponentVariant,\n      messages,\n      userAssistanceDensity,\n      role,\n      children,\n      testId\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 or readonly fields\n    const hasBottomUserAssistance = !isDisabled && !isReadonly;\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\n    });\n\n    const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n    const readonlyLabel = translations.formControl_readOnly();\n    const isRadioSet = parentComponentVariant === 'radioSet';\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      isRadioSet ? ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'] : ['Tab']\n    );\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        <Flex\n          direction={direction}\n          {...(direction === 'row' && { gap: [0, xUnits(8) as Size], wrap: 'wrap' })}>\n          <CheckboxRadioContext.Provider value={{ isFocusRingShown }}>\n            {children}\n          </CheckboxRadioContext.Provider>\n        </Flex>\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 or readonly 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        role={role}\n        ref={groupRef}\n        class={classes}\n        {...groupProps}\n        {...focusRingProps}\n        {...testIdProps}>\n        {labelEdge === 'none' ? (\n          content\n        ) : (\n          <CheckboxRadioLabelValueLayout\n            parentComponentVariant={parentComponentVariant}\n            hasTopUserAssistance={hasTopUserAssistance}\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          </CheckboxRadioLabelValueLayout>\n        )}\n        {isReadonly && (\n          <HiddenAccessible id={readonlyId} isHidden={true}>\n            {readonlyLabel}\n          </HiddenAccessible>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/es/CheckboxSetContext-1be56556.js

@@ -0,0 +1,9 @@
+/* @oracle/oraclejet-preact: undefined */
+import { createContext } from 'preact';
+import { useContext } from 'preact/hooks';
+
+const CheckboxSetContext = createContext({});
+const useCheckboxSetContext = () => useContext(CheckboxSetContext);
+
+export { CheckboxSetContext as C, useCheckboxSetContext as u };
+//# sourceMappingURL=CheckboxSetContext-1be56556.js.map

package/es/CheckboxSetContext-1be56556.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxSetContext-1be56556.js","sources":["../../src/UNSAFE_CheckboxSet/CheckboxSetContext.ts"],"sourcesContent":["import { createContext } from 'preact';\nimport { useContext } from 'preact/hooks';\n\nimport { ValueUpdateDetail } from '../utils/UNSAFE_valueUpdateDetail';\n\ntype CheckboxSetContextValue = {\n  name: string;\n  value?: Set<string | number>;\n  onCommit?: (detail: ValueUpdateDetail<Set<string | number>>) => void;\n};\n\nconst CheckboxSetContext = createContext<CheckboxSetContextValue>({} as CheckboxSetContextValue);\nconst useCheckboxSetContext = () => useContext(CheckboxSetContext);\n\nexport { CheckboxSetContext, useCheckboxSetContext };\n"],"names":[],"mappings":";;;;AAWA,MAAM,kBAAkB,GAAG,aAAa,CAA0B,EAA6B,EAAE;AAC3F,MAAA,qBAAqB,GAAG,MAAM,UAAU,CAAC,kBAAkB;;;;"}

package/es/CheckboxStyles.styles.css

@@ -26,4 +26,10 @@
   padding-block-start: calc((var(--rowHeight__1qyga5a2) - var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-line-height) * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-font-size) + 1px) * 0.5);
   padding-block-end: calc((var(--rowHeight__1qyga5a2) - var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-line-height) * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-font-size) - 1px) * 0.5);
   font-size: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-font-size);
+}
+.CheckboxStyles_valueLabelStyle__13w91qj2 .LinkBaseTheme_baseTheme__eahcnn0 {
+  margin-top: calc(-1 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, 0.25rem));
+}
+.oj-scale-sm .CheckboxStyles_valueLabelStyle__13w91qj2 .LinkBaseTheme_baseTheme__eahcnn0, :root.oj-scale-sm .CheckboxStyles_valueLabelStyle__13w91qj2 .LinkBaseTheme_baseTheme__eahcnn0 {
+  margin-top: -5px;
 }

package/es/Chip-8fd813ce.js

@@ -7,7 +7,7 @@ import { u as useTabbableMode } from './useTabbableMode-a3a351d0.js';
 import { multiVariantStyles } from './UNSAFE_Chip/themes/ChipStyles.css.js';
 import { u as useInteractionStyle } from './useInteractionStyle-52222fdd.js';
 import { m as mergeProps } from './mergeProps-88ea8306.js';
-import { u as useTestId } from './useTestId-9b504481.js';
+import { u as useTestId } from './useTestId-474ac6ca.js';
 
 function Chip({ isSelected, isDisabled, 'aria-label': accessibleLabel, children, testId, onToggle }) {
     const handleAction = useCallback(() => {

package/es/ClearIcon-acca9670.js

@@ -0,0 +1,21 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { u as useTranslationBundle } from './useTranslationBundle-2df40edf.js';
+import { I as IconButton } from './IconButton-19fcf0a8.js';
+import { S as SvgDeleteCircleS } from './DeleteCircleS-bef046a9.js';
+import { T as TabbableModeContext } from './TabbableModeContext-7d8ad946.js';
+import 'preact/hooks';
+
+/**
+ * ClearIcon is used to clear an input value.
+ * @param onClick Callback for clearing value when button is clicked
+ * @param testId ID used for testing purposes
+ */
+function ClearIcon({ onClick, testId }) {
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const clearStr = translations.formControl_clear();
+    return (jsx(TabbableModeContext.Provider, { value: { isTabbable: false }, children: jsx("div", { "aria-hidden": "true", children: jsx(IconButton, { variant: "ghost", size: "sm", onAction: onClick, tooltip: clearStr, testId: testId, children: jsx(SvgDeleteCircleS, {}) }) }) }));
+}
+
+export { ClearIcon as C };
+//# sourceMappingURL=ClearIcon-acca9670.js.map

package/es/ClearIcon-acca9670.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearIcon-acca9670.js","sources":["../../src/PRIVATE_ClearIcon/ClearIcon.tsx"],"sourcesContent":["import type { BundleType } from '#resources/nls/bundle';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { IconButton } from '#UNSAFE_IconButton';\nimport type { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { DeleteIcon } from '#PRIVATE_ThemedIcons/DeleteIcon';\nimport { TabbableModeContext } from '#hooks/UNSAFE_useTabbableMode';\n\ntype Props = {\n  onClick?: () => void;\n} & TestIdProps;\n\n/**\n * ClearIcon is used to clear an input value.\n * @param onClick Callback for clearing value when button is clicked\n * @param testId ID used for testing purposes\n */\nexport function ClearIcon({ onClick, testId }: Props) {\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const clearStr = translations.formControl_clear();\n\n  return (\n    <TabbableModeContext.Provider value={{ isTabbable: false }}>\n      <div aria-hidden=\"true\">\n        <IconButton variant=\"ghost\" size=\"sm\" onAction={onClick} tooltip={clearStr} testId={testId}>\n          <DeleteIcon />\n        </IconButton>\n      </div>\n    </TabbableModeContext.Provider>\n  );\n}\n"],"names":["_jsx","DeleteIcon"],"mappings":";;;;;;;;AAWA;;;;AAIG;SACa,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAS,EAAA;AAClD,IAAA,MAAM,YAAY,GAAG,oBAAoB,CAAa,0BAA0B,CAAC,CAAC;AAClF,IAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,iBAAiB,EAAE,CAAC;IAElD,QACEA,IAAC,mBAAmB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,YACxDA,GAAiB,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,MAAM,YACrBA,GAAC,CAAA,UAAU,EAAC,EAAA,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,YACxFA,GAAC,CAAAC,gBAAU,KAAG,EACH,CAAA,EAAA,CACT,EACuB,CAAA,EAC/B;AACJ;;;;"}

package/es/CollapseIcon-152e59b4.js

@@ -1,7 +1,7 @@
 /* @oracle/oraclejet-preact: undefined */
 import { jsx } from 'preact/jsx-runtime';
 import { S as SvgChevronLeft, a as SvgChevronRight } from './ChevronRight-ab5d3191.js';
-import { w as withDirectionIcon } from './withDirectionIcon-19a1d777.js';
+import { w as withDirectionIcon } from './withDirectionIcon-fe0b69a7.js';
 
 const CollapseIcon = (props) => {
     const Component = withDirectionIcon(SvgChevronRight, SvgChevronLeft);

package/es/Collapsible-4dddc4f7.js

@@ -7,14 +7,14 @@ import { c as classNames } from './classNames-4e12b00d.js';
 import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
 import './TabbableModeContext-7d8ad946.js';
 import { u as useTabbableMode } from './useTabbableMode-a3a351d0.js';
-import { F as Flex } from './Flex-ce31b351.js';
+import { F as Flex } from './Flex-2d9ebee9.js';
 import { S as Separator } from './Separator-93c70737.js';
 import { S as SvgChevronDown } from './ChevronDown-1b2ca616.js';
 import { C as CollapseIcon } from './CollapseIcon-152e59b4.js';
 import { S as SvgChevronUp } from './ChevronUp-cedb5c92.js';
 import { CollapsibleRedwoodTheme } from './UNSAFE_Collapsible/themes/redwood/CollapsibleTheme.js';
 import { u as useAnimation } from './useAnimation-a5eb7604.js';
-import { u as useTestId } from './useTestId-9b504481.js';
+import { u as useTestId } from './useTestId-474ac6ca.js';
 
 /**
  * Header icon subcomponent