@oracle/oraclejet-preact 18.1.5 → 18.1.6

package/es/IconToggleButton-94cbea2b.js

@@ -0,0 +1,43 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsxs, jsx } from 'preact/jsx-runtime';
+import { Fragment } from 'preact';
+import { forwardRef } from 'preact/compat';
+import { useRef, useImperativeHandle } from 'preact/hooks';
+import { B as BaseButton } from './BaseButton-61f6baa8.js';
+import { u as useToggleAction } from './useToggleAction-fc0f5399.js';
+import { u as useTooltip } from './useTooltip-138c94ee.js';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import './logger-c92f309c.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 { a as toggleStyling } from './toggleButtonUtils-75e3d781.js';
+import { p as processGlobals } from './buttonUtils-be059939.js';
+import { T as ToggleButtonLabel } from './ToggleButtonLabel-bd186454.js';
+
+/**
+ * IconToggleButtons direct users to toggle a state with
+ * a single tap, click, or keystroke.
+ */
+const IconToggleButton = forwardRef(({ children, variant = 'outlined', size = 'md', isDisabled = false, tooltip, accessibleLabel, isSelected = false, onToggle, testId, 'aria-describedby': ariaDescribedBy, width, ...props }, ref) => {
+    const { globalEventProps } = processGlobals(props);
+    const buttonRef = useRef(null);
+    useImperativeHandle(ref, () => buttonRef.current, [buttonRef]);
+    const { triggerProps } = useToggleAction({
+        isDisabled: isDisabled,
+        onToggle: onToggle
+    });
+    const { tooltipContent, tooltipProps } = useTooltip({
+        text: tooltip ?? accessibleLabel,
+        isDisabled: isDisabled
+    });
+    const styling = toggleStyling('auto', isSelected, false, false, variant === 'outlined', undefined, undefined, true, true);
+    const ariaProps = { 'aria-describedby': ariaDescribedBy };
+    return (jsxs(Fragment, { children: [jsx(BaseButton, { ...mergeProps(tooltipProps, triggerProps, globalEventProps, ariaProps), variant: variant, isDisabled: isDisabled, size: size, width: width, "aria-pressed": isSelected, styling: styling, ref: buttonRef, "aria-label": accessibleLabel ?? tooltip, testId: testId, children: jsx(ToggleButtonLabel, { onAction: () => onToggle?.({ value: isSelected }), isDisabled: isDisabled, display: 'icons', startIcon: children }) }), tooltipContent] }));
+});
+IconToggleButton.displayName = 'IconToggleButton';
+
+export { IconToggleButton as I };
+//# sourceMappingURL=IconToggleButton-94cbea2b.js.map

package/es/IconToggleButton-94cbea2b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconToggleButton-94cbea2b.js","sources":["../../src/UNSAFE_IconToggleButton/IconToggleButton.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChild, Fragment } from 'preact';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { useRef, useImperativeHandle } from 'preact/hooks';\n\nimport { BaseButton } from '#UNSAFE_BaseButton';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { useToggleAction, ToggleDetail } from '#hooks/UNSAFE_useToggleAction';\nimport { useTooltip } from '#hooks/UNSAFE_useTooltip';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\nimport { toggleStyling, processGlobals } from '#utils/UNSAFE_buttonUtils';\nimport { ToggleButtonLabel } from '#UNSAFE_ToggleButtonLabel';\nimport type { ButtonIntrinsicProps } from '#utils/UNSAFE_buttonUtils';\n\ntype WidthProps = Pick<DimensionProps, 'width'>;\n\nexport type IconToggleButtonProps = ButtonIntrinsicProps &\n  WidthProps &\n  TestIdProps & {\n    /**\n     * Specifies the icon for the button.   This should not vary depending on state.\n     */\n    children?: ComponentChild;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The ID of an element (or space separated IDs of multiple elements) that\n     * describes the button.\n     */\n    'aria-describedby'?: string;\n\n    /**\n     * Specifies if the toggle button is selected\n     */\n    isSelected?: boolean;\n\n    /**\n     * Property that triggers a callback immediately when toggle happens and value of isSelected property should be updated\n     */\n    onToggle?: (details: ToggleDetail) => void;\n\n    /**\n     * Indicates in what states the button has chrome (background and border).\n     *     \"borderless\"': \"Borderless buttons are a more prominent variation. Borderless\n     * buttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n     * solid buttons. Outlined buttons are useful for secondary actions.\",\n     */\n    variant?: 'borderless' | 'outlined';\n\n    /**\n     * The size indicates how large the button is rendered: \"sm\", \"md\" (default), \"lg\".\n     */\n    size?: 'sm' | 'md' | 'lg';\n  };\n\n/**\n * Note that either an accessibleLabel or tooltip must be specified.\n */\ntype VariationAccessibleLabelProps =\n  | {\n      /**\n       * accessibleLabel - the aria label\n       */\n      accessibleLabel: string;\n\n      /**\n       * tooltip - overrides the accessibleLabel for the tooltip\n       */\n      tooltip?: string;\n    }\n  | {\n      accessibleLabel?: string;\n\n      tooltip: string;\n    };\n\n/**\n * IconToggleButtons direct users to toggle a state with\n * a single tap, click, or keystroke.\n */\nexport const IconToggleButton = forwardRef(\n  (\n    {\n      children,\n      variant = 'outlined',\n      size = 'md',\n      isDisabled = false,\n      tooltip,\n      accessibleLabel,\n      isSelected = false,\n      onToggle,\n      testId,\n      'aria-describedby': ariaDescribedBy,\n      width,\n      ...props\n    }: IconToggleButtonProps & VariationAccessibleLabelProps & TestIdProps,\n    ref?: ForwardedRef<HTMLButtonElement>\n  ) => {\n    const { globalEventProps } = processGlobals(props);\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    useImperativeHandle(ref!, () => buttonRef.current!, [buttonRef]);\n\n    const { triggerProps } = useToggleAction({\n      isDisabled: isDisabled,\n      onToggle: onToggle\n    });\n\n    const { tooltipContent, tooltipProps } = useTooltip({\n      text: tooltip ?? accessibleLabel,\n      isDisabled: isDisabled\n    });\n\n    const styling = toggleStyling(\n      'auto',\n      isSelected,\n      false,\n      false,\n      variant === 'outlined',\n      undefined,\n      undefined,\n      true,\n      true\n    );\n\n    const ariaProps = { 'aria-describedby': ariaDescribedBy };\n\n    return (\n      <Fragment>\n        <BaseButton\n          {...mergeProps(tooltipProps, triggerProps, globalEventProps, ariaProps)}\n          variant={variant}\n          isDisabled={isDisabled}\n          size={size}\n          width={width}\n          aria-pressed={isSelected}\n          styling={styling}\n          ref={buttonRef}\n          aria-label={accessibleLabel ?? tooltip}\n          testId={testId}>\n          <ToggleButtonLabel\n            onAction={() => onToggle?.({ value: isSelected })}\n            isDisabled={isDisabled}\n            display={'icons'}\n            startIcon={children}></ToggleButtonLabel>\n        </BaseButton>\n        {tooltipContent}\n      </Fragment>\n    );\n  }\n);\n\nIconToggleButton.displayName = 'IconToggleButton';\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAwFA;;;AAGG;MACU,gBAAgB,GAAG,UAAU,CACxC,CACE,EACE,QAAQ,EACR,OAAO,GAAG,UAAU,EACpB,IAAI,GAAG,IAAI,EACX,UAAU,GAAG,KAAK,EAClB,OAAO,EACP,eAAe,EACf,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,MAAM,EACN,kBAAkB,EAAE,eAAe,EACnC,KAAK,EACL,GAAG,KAAK,EAC4D,EACtE,GAAqC,KACnC;IACF,MAAM,EAAE,gBAAgB,EAAE,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEnD,IAAA,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;AAClD,IAAA,mBAAmB,CAAC,GAAI,EAAE,MAAM,SAAS,CAAC,OAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAEjE,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC;AACvC,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC;QAClD,IAAI,EAAE,OAAO,IAAI,eAAe;AAChC,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,aAAa,CAC3B,MAAM,EACN,UAAU,EACV,KAAK,EACL,KAAK,EACL,OAAO,KAAK,UAAU,EACtB,SAAS,EACT,SAAS,EACT,IAAI,EACJ,IAAI,CACL,CAAC;AAEF,IAAA,MAAM,SAAS,GAAG,EAAE,kBAAkB,EAAE,eAAe,EAAE,CAAC;AAE1D,IAAA,QACEA,IAAC,CAAA,QAAQ,eACPC,GAAC,CAAA,UAAU,OACL,UAAU,CAAC,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,SAAS,CAAC,EACvE,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EAAA,cAAA,EACE,UAAU,EACxB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,SAAS,EACF,YAAA,EAAA,eAAe,IAAI,OAAO,EACtC,MAAM,EAAE,MAAM,YACdA,GAAC,CAAA,iBAAiB,IAChB,QAAQ,EAAE,MAAM,QAAQ,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EACjD,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,QAAQ,EAAsB,CAAA,EAAA,CAChC,EACZ,cAAc,CAAA,EAAA,CACN,EACX;AACJ,CAAC,EACD;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/es/IconUserAssistance-d9bc82d4.js

@@ -0,0 +1,73 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsxs, Fragment, jsx } from 'preact/jsx-runtime';
+import { useRef, useCallback } from 'preact/hooks';
+import { u as useTranslationBundle } from './useTranslationBundle-2df40edf.js';
+import { S as SvgHelp } from './Help-ccf80cd6.js';
+import { P as Popup } from './Popup-f6774b40.js';
+import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
+import { I as InlineHelp } from './InlineHelp-da344cfa.js';
+import { iconUserAssistancePopupFocus, iconUserAssistanceIcon } from './UNSAFE_UserAssistance/themes/UserAssistanceStyles.css.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { PopupRedwoodTheme } from './UNSAFE_Popup/themes/redwood/PopupTheme.js';
+import { u as useToggle } from './useToggle-8b7fcefe.js';
+
+/**
+ * Created to match icon user assistance spec for use with radio option, pending design review
+ * of inline UA assistance.
+ */
+const IconUserAssistance = ({ assistiveText, helpSourceLink, helpSourceText, isTabbable = true, id }) => {
+    const { bool: isOpen, setFalse: setIsOpenFalse, toggle } = useToggle(false);
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const userAssistance_learnMoreStr = translations.userAssistance_learnMore();
+    const sourceText = helpSourceLink && (helpSourceText || userAssistance_learnMoreStr);
+    const helpForRadioString = translations.radio_helpForRadio();
+    const helpStringId = `${id}-help-string`;
+    const anchorRef = useRef(null);
+    const handleOutsideClick = useCallback((event) => {
+        const target = event?.target;
+        // We need to filter out anchor click events, because anchor is responsible for the toggling
+        if ((target instanceof Element || target instanceof Document) &&
+            !anchorRef.current?.contains(target) &&
+            isOpen) {
+            setIsOpenFalse();
+        }
+    }, [isOpen, setIsOpenFalse]);
+    const handleLinkEvent = useCallback((e) => {
+        // if it's a key event that is not "enter", return early
+        const { key } = e;
+        if (key && key !== 'Enter') {
+            return;
+        }
+        // We want to close the pop up if a link is triggered with mouse or keyboard
+        const { tagName } = e.target;
+        if (tagName?.toLowerCase() === 'a') {
+            setIsOpenFalse();
+            // we want to refocus to the help icon after the browser has launched the link
+            // prematurely doing so prevents keyboard events from firing
+            setTimeout(() => anchorRef.current?.focus());
+        }
+    }, [setIsOpenFalse]);
+    const handleOnKeyDown = useCallback((e) => {
+        // allow user to close popup without having to focus it
+        if (['Tab', 'Escape'].includes(e.code) && isOpen) {
+            setIsOpenFalse();
+        }
+        // toggle and prevent scroll jump
+        if (['Space', 'Enter'].includes(e.code)) {
+            e.preventDefault();
+            toggle();
+        }
+    }, [isOpen, setIsOpenFalse, toggle]);
+    const onClickHandler = useCallback((e) => {
+        e.preventDefault();
+        toggle();
+    }, [toggle]);
+    // We are referencing popup vars, so we need to bring in the baseTheme for popup
+    const { baseTheme: popupBaseTheme } = useComponentTheme(PopupRedwoodTheme);
+    const iconUserAssistanceClasses = classNames([popupBaseTheme, iconUserAssistancePopupFocus]);
+    return helpSourceLink || assistiveText ? (jsxs(Fragment, { children: [jsx("span", { onKeyDown: handleOnKeyDown, onClick: onClickHandler, role: "link", "aria-describedby": helpStringId, "aria-haspopup": "dialog", ref: anchorRef, tabIndex: isTabbable ? 0 : -1, class: iconUserAssistanceIcon, id: `${id}-help-icon`, children: jsx(SvgHelp, {}) }), jsx(HiddenAccessible, { id: helpStringId, isHidden: true, children: helpForRadioString }), jsx(Popup, { placement: "top", isOpen: isOpen, anchorRef: anchorRef, onClose: setIsOpenFalse, onClickOutside: handleOutsideClick, shiftOptions: { mainAxis: true, crossAxis: false }, maxWidth: '296px', children: jsx("div", { id: id, tabIndex: 0, class: iconUserAssistanceClasses, onMouseUp: handleLinkEvent, onKeyDown: handleLinkEvent, children: jsx(InlineHelp, { assistiveText: assistiveText, sourceLink: helpSourceLink, sourceText: sourceText }) }) })] })) : null;
+};
+
+export { IconUserAssistance as I };
+//# sourceMappingURL=IconUserAssistance-d9bc82d4.js.map

package/es/IconUserAssistance-d9bc82d4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconUserAssistance-d9bc82d4.js","sources":["../../src/UNSAFE_UserAssistance/IconUserAssistance.tsx"],"sourcesContent":["import { useCallback, useRef } from 'preact/hooks';\n\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '#resources/nls/bundle';\n\nimport { HelpIcon } from '#PRIVATE_ThemedIcons/HelpIcon';\nimport { Popup } from '#UNSAFE_Popup';\nimport { HiddenAccessible } from '#UNSAFE_HiddenAccessible';\nimport { InlineHelp } from './InlineHelp';\nimport {\n  iconUserAssistanceIcon,\n  iconUserAssistancePopupFocus\n} from './themes/UserAssistanceStyles.css';\nimport { useComponentTheme } from '#hooks/UNSAFE_useComponentTheme';\nimport { classNames } from '#utils/UNSAFE_classNames';\nimport { PopupRedwoodTheme } from '#UNSAFE_Popup/themes/redwood/PopupTheme';\nimport { useToggle } from '#hooks/UNSAFE_useToggle';\n\ntype Props = {\n  /**\n   * Text to provide guidance to help the user understand what data to enter.\n   */\n  assistiveText?: string;\n  /**\n   * Help source URL associated with the component.\n   */\n  helpSourceLink?: string;\n  /**\n   * Custom text to be rendered for the `helpSourceLink`. \"Learn more\" will be used if no custom text is provided.\n   */\n  helpSourceText?: string;\n  /**\n   * Whether the trigger element is in tab sequence\n   */\n  isTabbable?: boolean;\n  /**\n   * ID of the pop up content that can be used for aria-describedby\n   */\n  id?: string;\n};\n\n/**\n * Created to match icon user assistance spec for use with radio option, pending design review\n * of inline UA assistance.\n */\nconst IconUserAssistance = ({\n  assistiveText,\n  helpSourceLink,\n  helpSourceText,\n  isTabbable = true,\n  id\n}: Props) => {\n  const { bool: isOpen, setFalse: setIsOpenFalse, toggle } = useToggle(false);\n\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const userAssistance_learnMoreStr = translations.userAssistance_learnMore();\n  const sourceText = helpSourceLink && (helpSourceText || userAssistance_learnMoreStr);\n  const helpForRadioString = translations.radio_helpForRadio();\n  const helpStringId = `${id}-help-string`;\n  const anchorRef = useRef<HTMLSpanElement>(null);\n\n  const handleOutsideClick = useCallback(\n    (event: MouseEvent) => {\n      const target = event?.target;\n      // We need to filter out anchor click events, because anchor is responsible for the toggling\n      if (\n        (target instanceof Element || target instanceof Document) &&\n        !anchorRef.current?.contains(target) &&\n        isOpen\n      ) {\n        setIsOpenFalse();\n      }\n    },\n    [isOpen, setIsOpenFalse]\n  );\n\n  const handleLinkEvent = useCallback(\n    (e: Event) => {\n      // if it's a key event that is not \"enter\", return early\n      const { key } = e as KeyboardEvent;\n      if (key && key !== 'Enter') {\n        return;\n      }\n\n      // We want to close the pop up if a link is triggered with mouse or keyboard\n      const { tagName } = e.target as Element;\n\n      if (tagName?.toLowerCase() === 'a') {\n        setIsOpenFalse();\n\n        // we want to refocus to the help icon after the browser has launched the link\n        // prematurely doing so prevents keyboard events from firing\n        setTimeout(() => anchorRef.current?.focus());\n      }\n    },\n    [setIsOpenFalse]\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      // allow user to close popup without having to focus it\n      if (['Tab', 'Escape'].includes(e.code) && isOpen) {\n        setIsOpenFalse();\n      }\n\n      // toggle and prevent scroll jump\n      if (['Space', 'Enter'].includes(e.code)) {\n        e.preventDefault();\n        toggle();\n      }\n    },\n    [isOpen, setIsOpenFalse, toggle]\n  );\n\n  const onClickHandler = useCallback(\n    (e: Event) => {\n      e.preventDefault();\n      toggle();\n    },\n    [toggle]\n  );\n\n  // We are referencing popup vars, so we need to bring in the baseTheme for popup\n  const { baseTheme: popupBaseTheme } = useComponentTheme(PopupRedwoodTheme);\n  const iconUserAssistanceClasses = classNames([popupBaseTheme, iconUserAssistancePopupFocus]);\n\n  return helpSourceLink || assistiveText ? (\n    <>\n      <span\n        onKeyDown={handleOnKeyDown}\n        onClick={onClickHandler}\n        role=\"link\"\n        aria-describedby={helpStringId}\n        aria-haspopup=\"dialog\"\n        ref={anchorRef}\n        tabIndex={isTabbable ? 0 : -1}\n        class={iconUserAssistanceIcon}\n        id={`${id}-help-icon`}>\n        <HelpIcon />\n      </span>\n      <HiddenAccessible id={helpStringId} isHidden={true}>\n        {helpForRadioString}\n      </HiddenAccessible>\n      <Popup\n        placement=\"top\"\n        isOpen={isOpen}\n        anchorRef={anchorRef}\n        onClose={setIsOpenFalse}\n        onClickOutside={handleOutsideClick}\n        shiftOptions={{ mainAxis: true, crossAxis: false }}\n        maxWidth={'296px'}>\n        <div\n          id={id}\n          tabIndex={0}\n          class={iconUserAssistanceClasses}\n          onMouseUp={handleLinkEvent}\n          onKeyDown={handleLinkEvent}>\n          <InlineHelp\n            assistiveText={assistiveText}\n            sourceLink={helpSourceLink}\n            sourceText={sourceText}\n          />\n        </div>\n      </Popup>\n    </>\n  ) : null;\n};\n\nexport { IconUserAssistance };\n"],"names":["_jsxs","_Fragment","_jsx","HelpIcon"],"mappings":"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"}

package/es/Indexer-18ec7af3.js

@@ -2,21 +2,21 @@
 import { jsx, jsxs } from 'preact/jsx-runtime';
 import { Fragment, createRef } from 'preact';
 import { useRef, useState, useCallback, useEffect } from 'preact/hooks';
-import { F as Flex } from './Flex-ce31b351.js';
+import { F as Flex } from './Flex-2d9ebee9.js';
 import { m as mergeProps } from './mergeProps-88ea8306.js';
 import { u as useSingleSelection } from './useSingleSelection-405a3d03.js';
-import { u as useCurrentKey } from './useCurrentKey-7287061f.js';
+import { u as useCurrentKey } from './useCurrentKey-b8e62707.js';
 import { u as useCollectionFocusRing } from './useCollectionFocusRing-de20f4fc.js';
 import { m as getPrevNextKey, k as keyExtractor, p as isMobile } from './collectionUtils-8a9d80a3.js';
 import { u as useId } from './useId-03dbfdf0.js';
-import { u as useTranslationBundle } from './useTranslationBundle-09302c20.js';
+import { u as useTranslationBundle } from './useTranslationBundle-2df40edf.js';
 import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
 import { C as Collection } from './Collection-c4f2f3ea.js';
 import { c as classNames } from './classNames-4e12b00d.js';
 import { forwardRef } from 'preact/compat';
 import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
 import { IndexerRedwoodTheme } from './UNSAFE_Indexer/themes/redwood/IndexerTheme.js';
-import { u as useTestId } from './useTestId-9b504481.js';
+import { u as useTestId } from './useTestId-474ac6ca.js';
 
 /**
  * The others section variable that application could use

package/es/InlineHelpSource-5ed4bb7d.js

@@ -4,7 +4,7 @@ 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 { u as useTranslationBundle } from './useTranslationBundle-09302c20.js';
+import { u as useTranslationBundle } from './useTranslationBundle-2df40edf.js';
 import { UserAssistanceRedwoodTheme } from './UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme.js';
 
 function InlineHelpSource({ children, source }) {

package/es/InlineUserAssistance-65ca8810.js

@@ -0,0 +1,81 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import './logger-c92f309c.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 './LayerHost-8b98d97d.js';
+import 'preact/compat';
+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 './UserAssistanceStyles.styles.css';
+import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.styles.css';
+import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js';
+import { C as ComponentMessageContainer } from './ComponentMessageContainer-13005c12.js';
+import './FormContext-4d71f9c7.js';
+import { u as useFormContext } from './useFormContext-875cacd7.js';
+import './FormFieldContext-68eb5946.js';
+import { u as useFormFieldContext } from './useFormFieldContext-626574fd.js';
+import { I as InlineHelp } from './InlineHelp-da344cfa.js';
+import { u as useTranslationBundle } from './useTranslationBundle-2df40edf.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { UserAssistanceRedwoodTheme } from './UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import './InputGroupContext-20bdbd6e.js';
+import { u as useInputGroupContext } from './useInputGroupContext-1d19411e.js';
+import { u as useTestId } from './useTestId-474ac6ca.js';
+
+function InlineRequired({ align = 'end', hasHelp = false, hasMessages = false }) {
+    const { classes } = useComponentTheme(UserAssistanceRedwoodTheme, {
+        align,
+        visible: hasHelp || hasMessages ? 'hide' : 'show' // TODO: fix typing so that options autocomplete
+    });
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const requiredStr = translations.userAssistance_required();
+    return jsx("div", { class: classes, children: requiredStr });
+}
+
+// defaults to type='reflow'. If this is within an oj-form-layout, the o-f-l
+// will pass down its type which defaults to 'efficient' (TODO).
+function InlineUserAssistanceContainer({ variant = 'reflow', children, id, testId }) {
+    const { classes, styles: { inlineContainerBaseStyles } } = useComponentTheme(UserAssistanceRedwoodTheme, {
+        container: variant
+    });
+    const testIdProps = useTestId(testId);
+    // we want to suppress the display of messages if it's in a group context
+    const inputGroupContext = useInputGroupContext();
+    if (inputGroupContext !== null)
+        return null;
+    const content = (jsx("div", { class: classNames([classes, inlineContainerBaseStyles]), id: id, ...testIdProps, children: children }));
+    return content;
+}
+
+// This has the precedence rules for the user assistance.
+function InlineUserAssistance({ assistiveText, fieldLabel, helpSourceLink, helpSourceText, id, isRequiredShown, requiredAlignment, messages = [], userAssistanceDensity, testId }) {
+    const { isReadonly: isFormReadonly } = useFormContext();
+    const needsUserAssistanceIfNoContent = userAssistanceDensity === 'efficient' && isFormReadonly === false;
+    const { isFocused } = useFormFieldContext();
+    const uaInlineContent = messages.length > 0 ? (jsx(ComponentMessageContainer, { fieldLabel: fieldLabel, messages: messages })) : (assistiveText || helpSourceLink) && isFocused ? (jsx(InlineHelp, { assistiveText: assistiveText, sourceLink: helpSourceLink, sourceText: helpSourceText })) : isRequiredShown ? (jsx(InlineRequired, { align: requiredAlignment })) : null;
+    // when reflow we do not render unless it has content.
+    // when efficient we render regardless of if it has content.
+    // TODO: Get the userAssistanceDensity value from the FormContext
+    return uaInlineContent || needsUserAssistanceIfNoContent ? (jsx(InlineUserAssistanceContainer, { id: id, variant: userAssistanceDensity, testId: testId, children: uaInlineContent })) : null;
+}
+
+export { InlineUserAssistanceContainer as I, InlineUserAssistance as a, InlineRequired as b };
+//# sourceMappingURL=InlineUserAssistance-65ca8810.js.map

package/es/InlineUserAssistance-65ca8810.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineUserAssistance-65ca8810.js","sources":["../../src/UNSAFE_UserAssistance/InlineRequired.tsx","../../src/UNSAFE_UserAssistance/InlineUserAssistanceContainer.tsx","../../src/UNSAFE_UserAssistance/InlineUserAssistance.tsx"],"sourcesContent":["import { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { UserAssistanceVariantOptions } from './themes/UserAssistanceStyles.css';\nimport { UserAssistanceRedwoodTheme } from './themes/redwood/UserAssistanceTheme';\n\ntype Props = {\n  align?: 'start' | 'end';\n  hasMessages?: boolean;\n  hasHelp?: boolean;\n};\n\nexport function InlineRequired({ align = 'end', hasHelp = false, hasMessages = false }: Props) {\n  const { classes } = useComponentTheme<UserAssistanceVariantOptions>(UserAssistanceRedwoodTheme, {\n    align,\n    visible: hasHelp || hasMessages ? 'hide' : 'show' // TODO: fix typing so that options autocomplete\n  });\n\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const requiredStr = translations.userAssistance_required();\n\n  return <div class={classes}>{requiredStr}</div>;\n}\n","import { ComponentChildren } from 'preact';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { UserAssistanceDensityType } from './InlineUserAssistance';\nimport {\n  UserAssistanceStyles,\n  UserAssistanceVariantOptions\n} from './themes/UserAssistanceStyles.css';\nimport { useInputGroupContext } from '../hooks/UNSAFE_useInputGroupContext';\nimport { UserAssistanceRedwoodTheme } from './themes/redwood/UserAssistanceTheme';\nimport { TestIdProps, useTestId } from '#hooks/UNSAFE_useTestId';\n\ntype Props = {\n  id?: string;\n  children?: ComponentChildren;\n  variant?: UserAssistanceDensityType;\n} & TestIdProps;\n\n// defaults to type='reflow'. If this is within an oj-form-layout, the o-f-l\n// will pass down its type which defaults to 'efficient' (TODO).\nexport function InlineUserAssistanceContainer({ variant = 'reflow', children, id, testId }: Props) {\n  const {\n    classes,\n    styles: { inlineContainerBaseStyles }\n  } = useComponentTheme<UserAssistanceVariantOptions, UserAssistanceStyles>(\n    UserAssistanceRedwoodTheme,\n    {\n      container: variant\n    }\n  );\n\n  const testIdProps = useTestId(testId);\n\n  // we want to suppress the display of messages if it's in a group context\n  const inputGroupContext = useInputGroupContext();\n  if (inputGroupContext !== null) return null;\n\n  const content = (\n    <div class={classNames([classes, inlineContainerBaseStyles])} id={id} {...testIdProps}>\n      {children}\n    </div>\n  );\n\n  return content;\n}\n","import { ComponentProps } from 'preact';\nimport { ComponentMessageItem, ComponentMessageContainer } from '../UNSAFE_ComponentMessage';\nimport { useFormContext } from '../hooks/UNSAFE_useFormContext';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { InlineHelp } from './InlineHelp';\nimport { InlineRequired } from './InlineRequired';\nimport { InlineUserAssistanceContainer } from './InlineUserAssistanceContainer';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\n\nexport type UserAssistanceDensityType = 'reflow' | 'efficient';\n\ntype Props = {\n  assistiveText?: string;\n  fieldLabel?: string;\n  helpSourceLink?: string;\n  helpSourceText?: string;\n  id?: string;\n  isRequiredShown?: boolean;\n  requiredAlignment?: ComponentProps<typeof InlineRequired>['align'];\n  messages?: ComponentMessageItem[];\n  userAssistanceDensity?: UserAssistanceDensityType;\n} & TestIdProps;\n\n// This has the precedence rules for the user assistance.\nexport function InlineUserAssistance({\n  assistiveText,\n  fieldLabel,\n  helpSourceLink,\n  helpSourceText,\n  id,\n  isRequiredShown,\n  requiredAlignment,\n  messages = [],\n  userAssistanceDensity,\n  testId\n}: Props) {\n  const { isReadonly: isFormReadonly } = useFormContext();\n  const needsUserAssistanceIfNoContent =\n    userAssistanceDensity === 'efficient' && isFormReadonly === false;\n  const { isFocused } = useFormFieldContext();\n  const uaInlineContent =\n    messages.length > 0 ? (\n      <ComponentMessageContainer fieldLabel={fieldLabel} messages={messages} />\n    ) : (assistiveText || helpSourceLink) && isFocused ? (\n      <InlineHelp\n        assistiveText={assistiveText}\n        sourceLink={helpSourceLink}\n        sourceText={helpSourceText}\n      />\n    ) : isRequiredShown ? (\n      <InlineRequired align={requiredAlignment} />\n    ) : null;\n\n  // when reflow we do not render unless it has content.\n  // when efficient we render regardless of if it has content.\n  // TODO: Get the userAssistanceDensity value from the FormContext\n  return uaInlineContent || needsUserAssistanceIfNoContent ? (\n    <InlineUserAssistanceContainer id={id} variant={userAssistanceDensity} testId={testId}>\n      {uaInlineContent}\n    </InlineUserAssistanceContainer>\n  ) : null;\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYgB,SAAA,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,WAAW,GAAG,KAAK,EAAS,EAAA;AAC3F,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAA+B,0BAA0B,EAAE;QAC9F,KAAK;AACL,QAAA,OAAO,EAAE,OAAO,IAAI,WAAW,GAAG,MAAM,GAAG,MAAM;AAClD,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,YAAY,GAAG,oBAAoB,CAAa,0BAA0B,CAAC,CAAC;AAClF,IAAA,MAAM,WAAW,GAAG,YAAY,CAAC,uBAAuB,EAAE,CAAC;AAE3D,IAAA,OAAOA,aAAK,KAAK,EAAE,OAAO,EAAG,QAAA,EAAA,WAAW,GAAO,CAAC;AAClD;;ACJA;AACA;AACgB,SAAA,6BAA6B,CAAC,EAAE,OAAO,GAAG,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAS,EAAA;AAC/F,IAAA,MAAM,EACJ,OAAO,EACP,MAAM,EAAE,EAAE,yBAAyB,EAAE,EACtC,GAAG,iBAAiB,CACnB,0BAA0B,EAC1B;AACE,QAAA,SAAS,EAAE,OAAO;AACnB,KAAA,CACF,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;;AAGtC,IAAA,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;IACjD,IAAI,iBAAiB,KAAK,IAAI;AAAE,QAAA,OAAO,IAAI,CAAC;IAE5C,MAAM,OAAO,IACXA,GAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,UAAU,CAAC,CAAC,OAAO,EAAE,yBAAyB,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAA,GAAM,WAAW,EAClF,QAAA,EAAA,QAAQ,EACL,CAAA,CACP,CAAC;AAEF,IAAA,OAAO,OAAO,CAAC;AACjB;;ACrBA;AACM,SAAU,oBAAoB,CAAC,EACnC,aAAa,EACb,UAAU,EACV,cAAc,EACd,cAAc,EACd,EAAE,EACF,eAAe,EACf,iBAAiB,EACjB,QAAQ,GAAG,EAAE,EACb,qBAAqB,EACrB,MAAM,EACA,EAAA;IACN,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC;IACxD,MAAM,8BAA8B,GAClC,qBAAqB,KAAK,WAAW,IAAI,cAAc,KAAK,KAAK,CAAC;AACpE,IAAA,MAAM,EAAE,SAAS,EAAE,GAAG,mBAAmB,EAAE,CAAC;AAC5C,IAAA,MAAM,eAAe,GACnB,QAAQ,CAAC,MAAM,GAAG,CAAC,IACjBA,GAAA,CAAC,yBAAyB,EAAA,EAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,IACvE,CAAC,aAAa,IAAI,cAAc,KAAK,SAAS,IAChDA,GAAA,CAAC,UAAU,EAAA,EACT,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,cAAc,EAC1B,UAAU,EAAE,cAAc,EAAA,CAC1B,IACA,eAAe,IACjBA,GAAA,CAAC,cAAc,EAAC,EAAA,KAAK,EAAE,iBAAiB,GAAI,IAC1C,IAAI,CAAC;;;;AAKX,IAAA,OAAO,eAAe,IAAI,8BAA8B,IACtDA,GAAA,CAAC,6BAA6B,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,MAAM,EAAE,MAAM,EAAA,QAAA,EAClF,eAAe,EAAA,CACc,IAC9B,IAAI,CAAC;AACX;;;;"}