@oracle/oraclejet-preact 20.0.4 → 20.1.0

package/cjs/HighlightText-93f2fea0.js

@@ -0,0 +1,33 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+
+var useTestId = require('./useTestId-a8b07506.js');
+
+var highlightStyles = 'HighlightTextStyles_highlightStyles__6s5c4p0';
+
+const HIGHLIGHT_TOKEN = '__@@__';
+const HIGHLIGHT_PATTERN = `${HIGHLIGHT_TOKEN}$&${HIGHLIGHT_TOKEN}`;
+/**
+ * Renders a text string with highlighting applied to the given text to match.
+ */
+function HighlightText({ children = '', matchText = '', testId }) {
+    const testIdProps = useTestId.useTestId(testId);
+    if (matchText.length > 0 && children.length > 0) {
+        const escapedMatchText = escapeRegExp(matchText);
+        const highlightedText = children.replace(new RegExp(escapedMatchText, 'gi'), HIGHLIGHT_PATTERN);
+        const tokens = highlightedText.split(HIGHLIGHT_TOKEN);
+        const nodes = tokens.map((current, index) => index % 2 == 0 ? current : jsxRuntime.jsx("span", { class: highlightStyles, children: current }));
+        return jsxRuntime.jsx("span", { ...testIdProps, children: nodes });
+    }
+    return jsxRuntime.jsx("span", { ...testIdProps, children: children });
+}
+function escapeRegExp(str) {
+    // copied from:
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping
+    return str.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}
+
+exports.HighlightText = HighlightText;
+//# sourceMappingURL=HighlightText-93f2fea0.js.map

package/cjs/HighlightText-93f2fea0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightText-93f2fea0.js","sources":["../../src/UNSAFE_HighlightText/HighlightText.tsx"],"sourcesContent":["/**\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 { highlightStyles } from './HighlightTextStyles.css';\nimport { TestIdProps, useTestId } from '#hooks/UNSAFE_useTestId';\n\ntype Props = TestIdProps & {\n  /**\n   * The text string to apply highlighting to.\n   */\n  children?: string;\n  /**\n   * The text string to match.\n   */\n  matchText?: string;\n};\n\nconst HIGHLIGHT_TOKEN = '__@@__';\nconst HIGHLIGHT_PATTERN = `${HIGHLIGHT_TOKEN}$&${HIGHLIGHT_TOKEN}`;\n\n/**\n * Renders a text string with highlighting applied to the given text to match.\n */\nexport function HighlightText({ children = '', matchText = '', testId }: Props) {\n  const testIdProps = useTestId(testId);\n  if (matchText.length > 0 && children.length > 0) {\n    const escapedMatchText = escapeRegExp(matchText);\n    const highlightedText = children.replace(new RegExp(escapedMatchText, 'gi'), HIGHLIGHT_PATTERN);\n    const tokens = highlightedText.split(HIGHLIGHT_TOKEN);\n    const nodes = tokens.map((current, index) =>\n      index % 2 == 0 ? current : <span class={highlightStyles}>{current}</span>\n    );\n\n    return <span {...testIdProps}>{nodes}</span>;\n  }\n  return <span {...testIdProps}>{children}</span>;\n}\n\nfunction escapeRegExp(str: string) {\n  // copied from:\n  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping\n  return str.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&'); // $& means the whole matched string\n}\n"],"names":["useTestId","_jsx"],"mappings":";;;;;;;;;AAsBA,MAAM,eAAe,GAAG,QAAQ,CAAC;AACjC,MAAM,iBAAiB,GAAG,CAAA,EAAG,eAAe,CAAK,EAAA,EAAA,eAAe,EAAE,CAAC;AAEnE;;AAEG;AACa,SAAA,aAAa,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAS,EAAA;AAC5E,IAAA,MAAM,WAAW,GAAGA,mBAAS,CAAC,MAAM,CAAC,CAAC;AACtC,IAAA,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AAC/C,QAAA,MAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;AACjD,QAAA,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,EAAE,iBAAiB,CAAC,CAAC;QAChG,MAAM,MAAM,GAAG,eAAe,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;AACtD,QAAA,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,KACtC,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,OAAO,GAAGC,cAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,eAAe,EAAA,QAAA,EAAG,OAAO,EAAA,CAAQ,CAC1E,CAAC;AAEF,QAAA,OAAOA,cAAU,CAAA,MAAA,EAAA,EAAA,GAAA,WAAW,EAAG,QAAA,EAAA,KAAK,GAAQ,CAAC;KAC9C;AACD,IAAA,OAAOA,cAAU,CAAA,MAAA,EAAA,EAAA,GAAA,WAAW,EAAG,QAAA,EAAA,QAAQ,GAAQ,CAAC;AAClD,CAAC;AAED,SAAS,YAAY,CAAC,GAAW,EAAA;;;IAG/B,OAAO,GAAG,CAAC,OAAO,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;AACtD;;;;"}

package/cjs/Icon-56789beb.js

@@ -4,15 +4,15 @@
 var jsxRuntime = require('preact/jsx-runtime');
 var preact = require('preact');
 var size = require('./size-1914356b.js');
-var useTooltip = require('./useTooltip-34accecc.js');
+var useTooltip = require('./useTooltip-d1200aff.js');
 require('preact/hooks');
 require('./logger-2b636482.js');
-require('./LayerHost-3cd73603.js');
+require('./LayerHost-21391a0d.js');
 require('preact/compat');
 
 
 require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
-require('./tooltipUtils-2bc15136.js');
+require('./tooltipUtils-c554343d.js');
 var UNSAFE_Icon_themes_IconStyle_css = require('./UNSAFE_Icon/themes/IconStyle.css.js');
 var clientHints = require('./clientHints-c40c5250.js');
 

package/cjs/IconButton-7503293b.js

@@ -3,18 +3,18 @@
 
 var jsxRuntime = require('preact/jsx-runtime');
 var preact = require('preact');
-var BaseButton = require('./BaseButton-d8f96bfa.js');
+var BaseButton = require('./BaseButton-15b86552.js');
 var ButtonLabelLayout = require('./ButtonLabelLayout-c876923f.js');
 var compat = require('preact/compat');
-var useTooltip = require('./useTooltip-34accecc.js');
+var useTooltip = require('./useTooltip-d1200aff.js');
 require('preact/hooks');
 var mergeProps = require('./mergeProps-e3da7237.js');
 require('./logger-2b636482.js');
-require('./LayerHost-3cd73603.js');
+require('./LayerHost-21391a0d.js');
 
 
 require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
-require('./tooltipUtils-2bc15136.js');
+require('./tooltipUtils-c554343d.js');
 var buttonUtils = require('./buttonUtils-dff2ea3e.js');
 
 /**

package/cjs/IconSwitchButton-550d6ced.js

@@ -0,0 +1,44 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var compat = require('preact/compat');
+var BaseButton = require('./BaseButton-15b86552.js');
+var useToggleAction = require('./useToggleAction-e4f15550.js');
+var useTooltip = require('./useTooltip-d1200aff.js');
+require('preact/hooks');
+var useId = require('./useId-6c0eeb27.js');
+var mergeProps = require('./mergeProps-e3da7237.js');
+require('./logger-2b636482.js');
+require('./LayerHost-21391a0d.js');
+
+
+require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
+require('./tooltipUtils-c554343d.js');
+var toggleButtonUtils = require('./toggleButtonUtils-245111a7.js');
+var ToggleButtonLabel = require('./ToggleButtonLabel-ce19879c.js');
+
+/**
+ * A IconSwitchButton is an icon button that allows users to switch
+ * between states when pressed.  It differs from a toggle button in not
+ * providing any visual indication of the state; instead, switch the
+ * icon to provide the state indication.
+ */
+const IconSwitchButton = compat.forwardRef(({ children, tooltip, size = 'md', isDisabled = false, accessibleLabel, isSelected = false, onToggle, testId, width, 'aria-describedby': ariaDescribedBy }, ref) => {
+    const { triggerProps } = useToggleAction.useToggleAction({
+        isDisabled: isDisabled,
+        onToggle: onToggle
+    });
+    const { tooltipContent, tooltipProps } = useTooltip.useTooltip({
+        text: tooltip ?? accessibleLabel,
+        isDisabled: isDisabled
+    });
+    const styling = toggleButtonUtils.toggleStyling('auto', isSelected, true, false, false, undefined, undefined, true);
+    const ariaProps = { 'aria-describedby': ariaDescribedBy };
+    return (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(BaseButton.BaseButton, { ...mergeProps.mergeProps(tooltipProps, triggerProps, ariaProps), elementDetails: { type: 'button', isSwitch: true }, "aria-checked": isSelected, variant: "ghost", size: size, isDisabled: isDisabled, styling: styling, width: width, ref: ref, "aria-label": accessibleLabel ?? tooltip, testId: testId, children: jsxRuntime.jsx(ToggleButtonLabel.ToggleButtonLabel, { isDisabled: isDisabled, label: accessibleLabel ?? tooltip, isToggle: true, inputName: useId.useId(), inputType: 'switch', onAction: () => onToggle?.({ value: isSelected }), isSelected: isSelected, display: 'icons', startIcon: children, size: size }) }), tooltipContent] }));
+});
+IconSwitchButton.displayName = 'IconSwitchButton';
+
+exports.IconSwitchButton = IconSwitchButton;
+//# sourceMappingURL=IconSwitchButton-550d6ced.js.map

package/cjs/IconSwitchButton-550d6ced.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconSwitchButton-550d6ced.js","sources":["../../src/PRIVATE_IconSwitchButton/IconSwitchButton.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChild, Fragment } from 'preact';\nimport { forwardRef, ForwardedRef, ElementRef } from 'preact/compat';\n\nimport { BaseButton } from '#UNSAFE_BaseButton';\nimport { useToggleAction, ToggleDetail } from '#hooks/UNSAFE_useToggleAction';\nimport { useTooltip } from '#hooks/UNSAFE_useTooltip';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport type { DimensionProps } from '#utils/UNSAFE_interpolations/dimensions';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\n\nimport { toggleStyling } from '#utils/UNSAFE_buttonUtils';\nimport { useId } from '#hooks/UNSAFE_useId';\nimport { ToggleButtonLabel } from '#UNSAFE_ToggleButtonLabel';\nimport type { ToggleButtonLabelProps } from '#UNSAFE_ToggleButtonLabel/ToggleButtonLabel';\n\ntype ButtonHandle = ElementRef<typeof BaseButton>;\n\ntype WidthInterpolationProps = Pick<DimensionProps, 'width'>;\n\nexport type IconSwitchButtonProps = WidthInterpolationProps &\n  TestIdProps & {\n    /**\n     * icon - the icon for the button\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     * The size indicates how large the button is rendered: \"xs\", \"sm\", \"md\" (default), \"lg\".\n     */\n    size?: 'xs' | '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 * A IconSwitchButton is an icon button that allows users to switch\n * between states when pressed.  It differs from a toggle button in not\n * providing any visual indication of the state; instead, switch the\n * icon to provide the state indication.\n */\nexport const IconSwitchButton = forwardRef(\n  (\n    {\n      children,\n      tooltip,\n      size = 'md',\n      isDisabled = false,\n      accessibleLabel,\n      isSelected = false,\n      onToggle,\n      testId,\n      width,\n      'aria-describedby': ariaDescribedBy\n    }: IconSwitchButtonProps & VariationAccessibleLabelProps & TestIdProps,\n    ref: ForwardedRef<ButtonHandle>\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      true,\n      false,\n      false,\n      undefined,\n      undefined,\n      true\n    );\n\n    const ariaProps = { 'aria-describedby': ariaDescribedBy };\n\n    return (\n      <Fragment>\n        <BaseButton\n          {...mergeProps(tooltipProps, triggerProps, ariaProps)}\n          elementDetails={{ type: 'button', isSwitch: true }}\n          aria-checked={isSelected}\n          variant=\"ghost\"\n          size={size}\n          isDisabled={isDisabled}\n          styling={styling}\n          width={width}\n          ref={ref}\n          aria-label={accessibleLabel ?? tooltip}\n          testId={testId}>\n          <ToggleButtonLabel\n            isDisabled={isDisabled}\n            label={accessibleLabel ?? tooltip}\n            isToggle={true}\n            inputName={useId()}\n            inputType={'switch'}\n            onAction={() => onToggle?.({ value: isSelected })}\n            isSelected={isSelected}\n            display={'icons'}\n            startIcon={children}\n            size={size as ToggleButtonLabelProps['size']}\n          />\n        </BaseButton>\n        {tooltipContent}\n      </Fragment>\n    );\n  }\n);\n\nIconSwitchButton.displayName = 'IconSwitchButton';\n"],"names":["forwardRef","useToggleAction","useTooltip","toggleStyling","_jsxs","Fragment","_jsx","BaseButton","mergeProps","ToggleButtonLabel","useId"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiFA;;;;;AAKG;AACU,MAAA,gBAAgB,GAAGA,iBAAU,CACxC,CACE,EACE,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,IAAI,EACX,UAAU,GAAG,KAAK,EAClB,eAAe,EACf,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,MAAM,EACN,KAAK,EACL,kBAAkB,EAAE,eAAe,EACiC,EACtE,GAA+B,KAC7B;AACF,IAAA,MAAM,EAAE,YAAY,EAAE,GAAGC,+BAAe,CAAC;AACvC,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAGC,qBAAU,CAAC;QAClD,IAAI,EAAE,OAAO,IAAI,eAAe;AAChC,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA,CAAC,CAAC;IAEH,MAAM,OAAO,GAAGC,+BAAa,CAC3B,MAAM,EACN,UAAU,EACV,IAAI,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,IAAI,CACL,CAAC;AAEF,IAAA,MAAM,SAAS,GAAG,EAAE,kBAAkB,EAAE,eAAe,EAAE,CAAC;AAE1D,IAAA,QACEC,eAAA,CAACC,eAAQ,EAAA,EAAA,QAAA,EAAA,CACPC,cAAC,CAAAC,qBAAU,EACL,EAAA,GAAAC,qBAAU,CAAC,YAAY,EAAE,YAAY,EAAE,SAAS,CAAC,EACrD,cAAc,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAA,cAAA,EACpC,UAAU,EACxB,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EAAA,YAAA,EACI,eAAe,IAAI,OAAO,EACtC,MAAM,EAAE,MAAM,EAAA,QAAA,EACdF,cAAC,CAAAG,mCAAiB,EAChB,EAAA,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,IAAI,OAAO,EACjC,QAAQ,EAAE,IAAI,EACd,SAAS,EAAEC,WAAK,EAAE,EAClB,SAAS,EAAE,QAAQ,EACnB,QAAQ,EAAE,MAAM,QAAQ,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EACjD,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,QAAQ,EACnB,IAAI,EAAE,IAAsC,EAC5C,CAAA,EAAA,CACS,EACZ,cAAc,CACN,EAAA,CAAA,EACX;AACJ,CAAC,EACD;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/cjs/IconToggleButton-b7a72539.js

@@ -0,0 +1,43 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var compat = require('preact/compat');
+var BaseButton = require('./BaseButton-15b86552.js');
+var useToggleAction = require('./useToggleAction-e4f15550.js');
+var useTooltip = require('./useTooltip-d1200aff.js');
+require('preact/hooks');
+var mergeProps = require('./mergeProps-e3da7237.js');
+require('./logger-2b636482.js');
+require('./LayerHost-21391a0d.js');
+
+
+require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
+require('./tooltipUtils-c554343d.js');
+var toggleButtonUtils = require('./toggleButtonUtils-245111a7.js');
+var buttonUtils = require('./buttonUtils-dff2ea3e.js');
+var ToggleButtonLabel = require('./ToggleButtonLabel-ce19879c.js');
+
+/**
+ * IconToggleButtons direct users to toggle a state with
+ * a single tap, click, or keystroke.
+ */
+const IconToggleButton = compat.forwardRef(({ children, variant = 'outlined', size = 'md', isDisabled = false, tooltip, accessibleLabel, isSelected = false, onToggle, testId, 'aria-describedby': ariaDescribedBy, width, ...props }, ref) => {
+    const { globalEventProps } = buttonUtils.processGlobals(props);
+    const { triggerProps } = useToggleAction.useToggleAction({
+        isDisabled: isDisabled,
+        onToggle: onToggle
+    });
+    const { tooltipContent, tooltipProps } = useTooltip.useTooltip({
+        text: tooltip ?? accessibleLabel,
+        isDisabled: isDisabled
+    });
+    const styling = toggleButtonUtils.toggleStyling('auto', isSelected, false, false, variant === 'outlined', undefined, undefined, true, true);
+    const ariaProps = { 'aria-describedby': ariaDescribedBy };
+    return (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(BaseButton.BaseButton, { ...mergeProps.mergeProps(tooltipProps, triggerProps, globalEventProps, ariaProps), variant: variant, isDisabled: isDisabled, size: size, width: width, "aria-pressed": isSelected, styling: styling, ref: ref, "aria-label": accessibleLabel ?? tooltip, testId: testId, children: jsxRuntime.jsx(ToggleButtonLabel.ToggleButtonLabel, { onAction: () => onToggle?.({ value: isSelected }), size: size, isDisabled: isDisabled, display: 'icons', startIcon: children }) }), tooltipContent] }));
+});
+IconToggleButton.displayName = 'IconToggleButton';
+
+exports.IconToggleButton = IconToggleButton;
+//# sourceMappingURL=IconToggleButton-b7a72539.js.map

package/cjs/IconToggleButton-b7a72539.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconToggleButton-b7a72539.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, ElementRef } from 'preact/compat';\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 ButtonHandle = ElementRef<typeof BaseButton>;\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<ButtonHandle>\n  ) => {\n    const { globalEventProps } = processGlobals(props);\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={ref}\n          aria-label={accessibleLabel ?? tooltip}\n          testId={testId}>\n          <ToggleButtonLabel\n            onAction={() => onToggle?.({ value: isSelected })}\n            size={size}\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":["forwardRef","processGlobals","useToggleAction","useTooltip","toggleStyling","_jsxs","Fragment","_jsx","BaseButton","mergeProps","ToggleButtonLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyFA;;;AAGG;MACU,gBAAgB,GAAGA,iBAAU,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,GAA+B,KAC7B;IACF,MAAM,EAAE,gBAAgB,EAAE,GAAGC,0BAAc,CAAC,KAAK,CAAC,CAAC;AAEnD,IAAA,MAAM,EAAE,YAAY,EAAE,GAAGC,+BAAe,CAAC;AACvC,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAGC,qBAAU,CAAC;QAClD,IAAI,EAAE,OAAO,IAAI,eAAe;AAChC,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA,CAAC,CAAC;IAEH,MAAM,OAAO,GAAGC,+BAAa,CAC3B,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,QACEC,eAAC,CAAAC,eAAQ,eACPC,cAAC,CAAAC,qBAAU,OACLC,qBAAU,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,kBACE,UAAU,EACxB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACI,YAAA,EAAA,eAAe,IAAI,OAAO,EACtC,MAAM,EAAE,MAAM,YACdF,cAAC,CAAAG,mCAAiB,IAChB,QAAQ,EAAE,MAAM,QAAQ,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EACjD,IAAI,EAAE,IAAI,EACV,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/cjs/IconUserAssistance-848c227c.js

@@ -0,0 +1,76 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var useTranslationBundle = require('./useTranslationBundle-990e7928.js');
+var Help = require('./Help-dbc23ccd.js');
+var Popup = require('./Popup-6de390dd.js');
+var HiddenAccessible = require('./HiddenAccessible-087eb49a.js');
+var UNSAFE_UserAssistance_themes_UserAssistanceStyles_css = require('./UNSAFE_UserAssistance/themes/UserAssistanceStyles.css.js');
+var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
+var classNames = require('./classNames-c14c6ef3.js');
+var UNSAFE_Popup_themes_redwood_PopupTheme = require('./UNSAFE_Popup/themes/redwood/PopupTheme.js');
+var useToggle = require('./useToggle-3ebba7d8.js');
+var InlineHelp = require('./InlineHelp-2add2d34.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, variant = 'checkbox' }) => {
+    const { bool: isOpen, setFalse: setIsOpenFalse, toggle } = useToggle.useToggle(false);
+    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const userAssistance_learnMoreStr = translations.userAssistance_learnMore();
+    const sourceText = helpSourceLink && (helpSourceText || userAssistance_learnMoreStr);
+    const helpForRadioString = translations.radio_helpForRadio();
+    const helpForCheckboxString = translations.checkbox_helpForCheckbox();
+    const helpStringId = `${id}-help-string`;
+    const anchorRef = hooks.useRef(null);
+    const handleOutsideClick = hooks.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 = hooks.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 = hooks.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 = hooks.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.useComponentTheme(UNSAFE_Popup_themes_redwood_PopupTheme.PopupRedwoodTheme);
+    const iconUserAssistanceClasses = classNames.classNames([popupBaseTheme, UNSAFE_UserAssistance_themes_UserAssistanceStyles_css.iconUserAssistancePopup]);
+    return helpSourceLink || assistiveText ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { onKeyDown: handleOnKeyDown, onClick: onClickHandler, role: "button", "aria-labelledby": helpStringId, "aria-haspopup": "dialog", ref: anchorRef, tabIndex: isTabbable ? 0 : -1, class: UNSAFE_UserAssistance_themes_UserAssistanceStyles_css.iconUserAssistanceIcon, id: `${id}-help-icon`, children: jsxRuntime.jsx(Help.SvgHelp, {}) }), jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { id: helpStringId, isHidden: true, children: variant === 'checkbox' ? helpForCheckboxString : helpForRadioString }), jsxRuntime.jsx(Popup.Popup, { placement: "top", isOpen: isOpen, anchorRef: anchorRef, onClose: setIsOpenFalse, onClickOutside: handleOutsideClick, shiftOptions: { mainAxis: true, crossAxis: false }, maxWidth: "296px", children: jsxRuntime.jsx("div", { id: id, tabIndex: 0, class: iconUserAssistanceClasses, onMouseUp: handleLinkEvent, onKeyDown: handleLinkEvent, children: jsxRuntime.jsx(InlineHelp.InlineHelp, { assistiveText: assistiveText, sourceLink: helpSourceLink, sourceText: sourceText }) }) })] })) : null;
+};
+
+exports.IconUserAssistance = IconUserAssistance;
+//# sourceMappingURL=IconUserAssistance-848c227c.js.map

package/cjs/IconUserAssistance-848c227c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconUserAssistance-848c227c.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';\nimport { HelpIcon } from '#PRIVATE_ThemedIcons/HelpIcon';\nimport { Popup } from '#UNSAFE_Popup';\nimport { HiddenAccessible } from '#UNSAFE_HiddenAccessible';\nimport { iconUserAssistanceIcon, iconUserAssistancePopup } 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';\nimport { InlineHelp } from './InlineHelp';\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   * Variant of the component, either 'checkbox' or 'radio'. Used to determine the help text.\n   */\n  variant?: 'checkbox' | 'radio';\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  variant = 'checkbox'\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 helpForCheckboxString = translations.checkbox_helpForCheckbox();\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, iconUserAssistancePopup]);\n\n  return helpSourceLink || assistiveText ? (\n    <>\n      <span\n        onKeyDown={handleOnKeyDown}\n        onClick={onClickHandler}\n        role=\"button\"\n        aria-labelledby={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        {variant === 'checkbox' ? helpForCheckboxString : 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":["useToggle","useTranslationBundle","useRef","useCallback","useComponentTheme","PopupRedwoodTheme","classNames","iconUserAssistancePopup","_jsxs","_Fragment","_jsx","iconUserAssistanceIcon","HelpIcon","HiddenAccessible","Popup","InlineHelp"],"mappings":"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"}

package/cjs/InlineHelp-2add2d34.js

@@ -6,7 +6,7 @@ var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
 var classNames = require('./classNames-c14c6ef3.js');
 require('./TabbableModeContext-e99d527e.js');
 var useTabbableMode = require('./useTabbableMode-dbd254e8.js');
-var useTranslationBundle = require('./useTranslationBundle-12dd087d.js');
+var useTranslationBundle = require('./useTranslationBundle-990e7928.js');
 var UNSAFE_UserAssistance_themes_redwood_UserAssistanceTheme = require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme.js');
 
 const InlineHelpSource = ({ children, source }) => {

package/cjs/InlineUserAssistance-cfaa3d3e.js

@@ -4,17 +4,17 @@
 var jsxRuntime = require('preact/jsx-runtime');
 require('./logger-2b636482.js');
 require('preact/hooks');
-require('./Flex-3a257bc3.js');
+require('./Flex-ec48072d.js');
 
 
 require('./UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js');
 require('preact');
-require('./LayerHost-3cd73603.js');
+require('./LayerHost-21391a0d.js');
 require('preact/compat');
 
 
 require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
-require('./tooltipUtils-2bc15136.js');
+require('./tooltipUtils-c554343d.js');
 
 require('./IconButton-7503293b.js');
 
@@ -34,13 +34,13 @@ var useFormContext = require('./useFormContext-a794f7b6.js');
 require('./FormFieldContext-69fe83d2.js');
 var useFormFieldContext = require('./useFormFieldContext-4632eb73.js');
 var InlineHelp = require('./InlineHelp-2add2d34.js');
-var useTranslationBundle = require('./useTranslationBundle-12dd087d.js');
+var useTranslationBundle = require('./useTranslationBundle-990e7928.js');
 var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
 var UNSAFE_UserAssistance_themes_redwood_UserAssistanceTheme = require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme.js');
 var classNames = require('./classNames-c14c6ef3.js');
 require('./InputGroupContext-05f2a46f.js');
 var useInputGroupContext = require('./useInputGroupContext-4c10bd57.js');
-var useTestId = require('./useTestId-4f53d561.js');
+var useTestId = require('./useTestId-a8b07506.js');
 
 function InlineRequired({ align = 'end', hasHelp = false, hasMessages = false }) {
     const { classes } = useComponentTheme.useComponentTheme(UNSAFE_UserAssistance_themes_redwood_UserAssistanceTheme.UserAssistanceRedwoodTheme, {

package/cjs/InputDateMask-c7baadd4.js

@@ -10,9 +10,9 @@ var StyledTextField = require('./StyledTextField-7839c90d.js');
 
 var ReadonlyTextFieldInput = require('./ReadonlyTextFieldInput-60965d77.js');
 var TextField = require('./TextField-5c164264.js');
-var useTranslationBundle = require('./useTranslationBundle-12dd087d.js');
+var useTranslationBundle = require('./useTranslationBundle-990e7928.js');
 
-require('./LayerHost-3cd73603.js');
+require('./LayerHost-21391a0d.js');
 require('./UNSAFE_TextField/themes/TextFieldStyles.css.js');
 
 
@@ -30,10 +30,10 @@ var mergeProps = require('./mergeProps-e3da7237.js');
 
 
 require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
-require('./tooltipUtils-2bc15136.js');
+require('./tooltipUtils-c554343d.js');
 var preact = require('preact');
 
-require('./Popup-de16d915.js');
+require('./Popup-6de390dd.js');
 
 
 require('./UNSAFE_Label/themes/redwood/LabelVariants.css.js');
@@ -46,16 +46,16 @@ require('./FormContext-d1d05967.js');
 var useFormContext = require('./useFormContext-a794f7b6.js');
 var FormFieldContext = require('./FormFieldContext-69fe83d2.js');
 var useTextField = require('./useTextField-6ecf97b7.js');
-var useUser = require('./useUser-1295b5cb.js');
+var useUser = require('./useUser-cc045b3e.js');
 var getFormatParse = require('./getFormatParse-b70abd1a.js');
 var calendarDateUtils = require('./calendarDateUtils-c572f2d3.js');
 var maskUtils = require('./maskUtils-2f481824.js');
 var stringUtils = require('./stringUtils-3e19c8af.js');
 var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
 var useFormFieldContext = require('./useFormFieldContext-4632eb73.js');
-var Flex = require('./Flex-3a257bc3.js');
+var Flex = require('./Flex-ec48072d.js');
 var HiddenAccessible = require('./HiddenAccessible-087eb49a.js');
-var LiveRegion = require('./LiveRegion-62ce9ac7.js');
+var LiveRegion = require('./LiveRegion-60535481.js');
 var UNSAFE_TextField_themes_redwood_TextFieldInputTheme = require('./UNSAFE_TextField/themes/redwood/TextFieldInputTheme.js');
 var formControlUtils = require('./formControlUtils-596c9dc3.js');
 var classNames = require('./classNames-c14c6ef3.js');

package/cjs/Label-eb654b0e.js

@@ -10,23 +10,23 @@ require('./FormContext-d1d05967.js');
 var useFormContext = require('./useFormContext-a794f7b6.js');
 var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
 require('./TabbableModeContext-e99d527e.js');
-require('./LayerHost-3cd73603.js');
+require('./LayerHost-21391a0d.js');
 require('preact/compat');
 
 
 require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js');
-require('./Flex-3a257bc3.js');
+require('./Flex-ec48072d.js');
 
 
 require('./UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js');
 require('preact');
-var useTooltip = require('./useTooltip-34accecc.js');
-var useScale = require('./useScale-db16c2b8.js');
-var useDensity = require('./useDensity-0b9fd9ca.js');
+var useTooltip = require('./useTooltip-d1200aff.js');
+var useScale = require('./useScale-529046e3.js');
+var useDensity = require('./useDensity-2a45f4dd.js');
 
 
 require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
-require('./tooltipUtils-2bc15136.js');
+require('./tooltipUtils-c554343d.js');
 
 var clientHints = require('./clientHints-c40c5250.js');
 require('./IconButton-7503293b.js');
@@ -40,9 +40,9 @@ require('./MessagesContext-4e939750.js');
 
 require('./UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js');
 require('./InputGroupContext-05f2a46f.js');
-require('./Popup-de16d915.js');
+require('./Popup-6de390dd.js');
 require('./UNSAFE_Separator/themes/SeparatorStyles.css.js');
-var CompactLabelAssistance = require('./CompactLabelAssistance-e910bb56.js');
+var CompactLabelAssistance = require('./CompactLabelAssistance-f7b3b814.js');
 
 require('./UNSAFE_Popup/themes/redwood/PopupVariants.css.js');
 var truncationUtils = require('./truncationUtils-2d44b04b.js');

package/cjs/LabelValueLayout-d67109b3.js

@@ -7,7 +7,7 @@ require('./FormContext-d1d05967.js');
 var useFormContext = require('./useFormContext-a794f7b6.js');
 require('./FormFieldContext-69fe83d2.js');
 var useFormFieldContext = require('./useFormFieldContext-4632eb73.js');
-var StyledLabelValueLayout = require('./StyledLabelValueLayout-48da61b9.js');
+var StyledLabelValueLayout = require('./StyledLabelValueLayout-3ee66ef1.js');
 var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
 var UNSAFE_TextField_themes_redwood_TextFieldTheme = require('./UNSAFE_TextField/themes/redwood/TextFieldTheme.js');
 var UNSAFE_Label_themes_redwood_LabelTheme = require('./UNSAFE_Label/themes/redwood/LabelTheme.js');

package/cjs/Layer-06e11b9c.js

@@ -0,0 +1,94 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var compat = require('preact/compat');
+var LayerHost = require('./LayerHost-21391a0d.js');
+var classNames = require('./classNames-c14c6ef3.js');
+var UNSAFE_Layer_themes_LayerStyles_css = require('./UNSAFE_Layer/themes/LayerStyles.css.js');
+var useThemeInterpolations = require('./useThemeInterpolations-ca3ddfd9.js');
+
+const LOGICAL_PARENT = Symbol.for('oj-logical-parent');
+const Layer = ({ children, logicalParentRef, isModal = false, priority = 'popup', level = 'nearestAncestor' }) => {
+    const [layerContainer, _setLayerContainer] = compat.useState(null);
+    const layerContainerRef = compat.useRef(null);
+    const context = compat.useContext(LayerHost.LayerContext);
+    const setLayerContainer = (elem) => {
+        layerContainerRef.current = elem;
+        _setLayerContainer(elem);
+    };
+    // because the children are being rendered into a portal that is out of the flow of parent dom,
+    // we need to specify the colorScheme and scale class names here to pick up the correct CSS styles.
+    const themeClasses = useThemeInterpolations.useThemeInterpolations(logicalParentRef);
+    let priorityStyle = UNSAFE_Layer_themes_LayerStyles_css.styles.popupPriorityStyle;
+    switch (priority) {
+        case 'dialog': {
+            priorityStyle = UNSAFE_Layer_themes_LayerStyles_css.styles.dialogPriorityStyle;
+            break;
+        }
+        case 'messages': {
+            priorityStyle = UNSAFE_Layer_themes_LayerStyles_css.styles.messagesPriorityStyle;
+            break;
+        }
+        case 'tooltip': {
+            priorityStyle = UNSAFE_Layer_themes_LayerStyles_css.styles.tooltipPriorityStyle;
+            break;
+        }
+        default: {
+            priorityStyle = UNSAFE_Layer_themes_LayerStyles_css.styles.popupPriorityStyle;
+            break;
+        }
+    }
+    const classes = classNames.classNames([themeClasses, UNSAFE_Layer_themes_LayerStyles_css.baseStyle, priorityStyle]);
+    // Really need useLayoutEffect instead of useEffect here. Otherwise the re-parented
+    // content does not get re-rendered with valid ref's
+    compat.useLayoutEffect(() => {
+        const host = level === 'topLevel'
+            ? context.getRootLayerHost?.(priority)
+            : context.getLayerHost?.(priority);
+        if (!host)
+            return;
+        const doc = host.ownerDocument ?? document;
+        const layer = doc.createElement('div');
+        layer.setAttribute('data-oj-layer', isModal ? 'modal' : 'modeless');
+        if (logicalParentRef) {
+            layer[LOGICAL_PARENT] = useThemeInterpolations.toUnsafeDomElement(logicalParentRef);
+        }
+        host.appendChild(layer);
+        setLayerContainer(layer);
+        return () => {
+            if (host && layer && host.contains(layer)) {
+                delete layer[LOGICAL_PARENT];
+                host.removeChild(layer);
+            }
+            if (context.onLayerUnmount) {
+                context.onLayerUnmount(layer);
+            }
+            setLayerContainer(null);
+        };
+    }, [logicalParentRef, context, level, priority, isModal]);
+    // add the colorScheme and scale classes if there is a layerContainer
+    if (layerContainer) {
+        // use the theme interpolations to set the appropriate style classes for colorScheme and scale
+        layerContainer.className = classes;
+    }
+    const getLayerHost = compat.useCallback(() => {
+        return layerContainer;
+    }, [layerContainer]);
+    const newLayerContext = compat.useMemo(() => {
+        if (context.getLayerHost) {
+            return {
+                getRootLayerHost: context.getRootLayerHost?.bind(null, priority),
+                getLayerHost: getLayerHost.bind(null)
+            };
+        }
+        else {
+            return {};
+        }
+    }, [context.getLayerHost, context.getRootLayerHost, getLayerHost, priority]);
+    return (jsxRuntime.jsx(LayerHost.LayerContext.Provider, { value: newLayerContext, children: layerContainer && compat.createPortal(children, layerContainer) }));
+};
+
+exports.LOGICAL_PARENT = LOGICAL_PARENT;
+exports.Layer = Layer;
+//# sourceMappingURL=Layer-06e11b9c.js.map

package/cjs/Layer-06e11b9c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layer-06e11b9c.js","sources":["../../src/UNSAFE_Layer/Layer.tsx"],"sourcesContent":["import { VNode, type RefObject } from 'preact';\nimport {\n  createPortal,\n  useContext,\n  useLayoutEffect,\n  useState,\n  useRef,\n  useMemo,\n  useCallback\n} from 'preact/compat';\nimport { LayerContext, LayerContextProps, LayerLevel, LayerPriority } from './LayerContext';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { baseStyle, styles } from './themes/LayerStyles.css';\nimport { useThemeInterpolations } from '../hooks/UNSAFE_useThemeInterpolations/useThemeInterpolations';\nimport { toUnsafeDomElement } from '#utils/PRIVATE_unsafeDomRefUtils/unsafeDomRefUtils';\nimport { UnsafeDomHandle } from '#utils/UNSAFE_unsafeDomAccess';\n\nexport const LOGICAL_PARENT = Symbol.for('oj-logical-parent');\n\ntype Props = {\n  /**\n   * The content to be re-parented using Portal\n   */\n  children: VNode;\n  /**\n   * Logical parent of the re-parented content. Typically the 'launcher' associated\n   * with the popup.\n   */\n  logicalParentRef?: RefObject<Element> | RefObject<UnsafeDomHandle<Element>> | null;\n  /**\n   * Determines if this layer contains a Modal.\n   */\n  isModal?: boolean;\n  /**\n   * Determines Layer's stacking context. Components that always need to render on top of other popup\n   * elements (such as Messages) should use respective priority value. The default priority level is 'popup'.\n   */\n  priority?: LayerPriority;\n  /**\n   * Determines Layer's nesting context. By default, new layers will render in the context of a parent Layer,\n   * if it exists (nearestAncestor)). Some popup components (such as Dialog and Message) may need to set up\n   * a new nesting context as(topLevel).\n   */\n  level?: LayerLevel;\n};\n\nexport type LayerElement = HTMLElement & {\n  [LOGICAL_PARENT]?: Element | null;\n};\n\nconst Layer = ({\n  children,\n  logicalParentRef,\n  isModal = false,\n  priority = 'popup',\n  level = 'nearestAncestor'\n}: Props) => {\n  const [layerContainer, _setLayerContainer] = useState<Element | null>(null);\n  const layerContainerRef = useRef<Element | null>(null);\n\n  const context = useContext(LayerContext);\n\n  const setLayerContainer = (elem: Element | null) => {\n    layerContainerRef.current = elem;\n    _setLayerContainer(elem);\n  };\n\n  // because the children are being rendered into a portal that is out of the flow of parent dom,\n  // we need to specify the colorScheme and scale class names here to pick up the correct CSS styles.\n  const themeClasses = useThemeInterpolations(logicalParentRef);\n\n  let priorityStyle = styles.popupPriorityStyle;\n\n  switch (priority) {\n    case 'dialog': {\n      priorityStyle = styles.dialogPriorityStyle;\n      break;\n    }\n    case 'messages': {\n      priorityStyle = styles.messagesPriorityStyle;\n      break;\n    }\n    case 'tooltip': {\n      priorityStyle = styles.tooltipPriorityStyle;\n      break;\n    }\n    default: {\n      priorityStyle = styles.popupPriorityStyle;\n      break;\n    }\n  }\n\n  const classes = classNames([themeClasses, baseStyle, priorityStyle]);\n\n  // Really need useLayoutEffect instead of useEffect here. Otherwise the re-parented\n  // content does not get re-rendered with valid ref's\n  useLayoutEffect(() => {\n    const host =\n      level === 'topLevel'\n        ? context.getRootLayerHost?.(priority)\n        : context.getLayerHost?.(priority);\n\n    if (!host) return;\n    const doc = host.ownerDocument ?? document;\n    const layer: LayerElement = doc.createElement('div');\n\n    layer.setAttribute('data-oj-layer', isModal ? 'modal' : 'modeless');\n\n    if (logicalParentRef) {\n      layer[LOGICAL_PARENT] = toUnsafeDomElement(logicalParentRef);\n    }\n    host.appendChild(layer);\n    setLayerContainer(layer);\n\n    return () => {\n      if (host && layer && host.contains(layer)) {\n        delete layer[LOGICAL_PARENT];\n        host.removeChild(layer);\n      }\n      if (context.onLayerUnmount) {\n        context.onLayerUnmount(layer);\n      }\n      setLayerContainer(null);\n    };\n  }, [logicalParentRef, context, level, priority, isModal]);\n\n  // add the colorScheme and scale classes if there is a layerContainer\n  if (layerContainer) {\n    // use the theme interpolations to set the appropriate style classes for colorScheme and scale\n    layerContainer.className = classes;\n  }\n\n  const getLayerHost = useCallback(() => {\n    return layerContainer;\n  }, [layerContainer]);\n\n  const newLayerContext = useMemo(() => {\n    if (context.getLayerHost) {\n      return {\n        getRootLayerHost: context.getRootLayerHost?.bind(null, priority),\n        getLayerHost: getLayerHost.bind(null)\n      };\n    } else {\n      return {};\n    }\n  }, [context.getLayerHost, context.getRootLayerHost, getLayerHost, priority]);\n\n  return (\n    <LayerContext.Provider value={newLayerContext as LayerContextProps}>\n      {layerContainer && createPortal(children, layerContainer)}\n    </LayerContext.Provider>\n  );\n};\n\nexport default Layer;\n"],"names":["useState","useRef","useContext","LayerContext","useThemeInterpolations","styles","classNames","baseStyle","useLayoutEffect","toUnsafeDomElement","useCallback","useMemo","_jsx","createPortal"],"mappings":"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"}

package/cjs/LayerHost-21391a0d.js

@@ -0,0 +1,46 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var index = require('./index-0aa99b92.js');
+var preact = require('preact');
+var jsxRuntime = require('preact/jsx-runtime');
+var compat = require('preact/compat');
+var UNSAFE_Layer_themes_LayerHostStyles_css = require('./UNSAFE_Layer/themes/LayerHostStyles.css.js');
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Default environment created for the application
+ */
+const DefaultEnvironment = {
+    user: {
+        locale: document.documentElement.getAttribute('lang') || 'en',
+        direction: document.documentElement.getAttribute('dir')?.toLowerCase() === 'rtl' ? 'rtl' : 'ltr',
+        forcedColors: window.matchMedia?.('(forced-colors: active)')?.matches ? 'active' : 'none'
+    },
+    theme: index.o,
+    colorScheme: 'light',
+    scale: 'lg',
+    currentBgColor: undefined,
+    mode: 'production',
+    density: 'standard'
+};
+const EnvironmentContext = preact.createContext(DefaultEnvironment);
+
+const LayerContext = preact.createContext({});
+
+const LayerHost = compat.forwardRef((_props, ref) => {
+    return jsxRuntime.jsx("div", { id: "__root_layer_host", role: "presentation", ref: ref, class: UNSAFE_Layer_themes_LayerHostStyles_css.baseStyle });
+});
+LayerHost.displayName = 'Forwarded<LayerHost>';
+
+exports.DefaultEnvironment = DefaultEnvironment;
+exports.EnvironmentContext = EnvironmentContext;
+exports.LayerContext = LayerContext;
+exports.LayerHost = LayerHost;
+//# sourceMappingURL=LayerHost-21391a0d.js.map