@oracle/oraclejet-preact 19.0.0 → 19.0.2

package/es/ColorPalette-765bbe22.js

@@ -0,0 +1,81 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { forwardRef, useState, useEffect, useImperativeHandle } from 'preact/compat';
+import { useRef } from 'preact/hooks';
+import { C as ColorSwatch } from './ColorSwatch-e98ed8ec.js';
+import { p as parseColorValue, c as convertPalette, s as sortPalette } from './swatchData-64959ad2.js';
+import { F as Flex } from './Flex-97b023db.js';
+import { u as useTestId } from './useTestId-7f8e69e7.js';
+import { d as dimensionInterpolations } from './dimensions-ddde0eee.js';
+import { p as paddingInterpolations } from './padding-9b3afaa2.js';
+import { c as colorInterpolations } from './colors-b6530fec.js';
+import { a as ariaInterpolations } from './aria-efa0582c.js';
+import { m as mergeInterpolations } from './mergeInterpolations-30cd9a69.js';
+import bundle from './resources/nls/en/bundle.js';
+import { S as SwatchFlexView } from './SwatchFlexView-6c94f2bd.js';
+
+const interpolations = [
+    ...Object.values(dimensionInterpolations),
+    ...Object.values(colorInterpolations),
+    ...Object.values(ariaInterpolations),
+    ...Object.values(paddingInterpolations)
+];
+const mergedInterpolations = mergeInterpolations(interpolations);
+/**
+ * A Color Palette is an interface that displays a variety of color swatches allowing
+ * users to select a color value.
+ *
+ * @param {ColorPaletteProps} props ColorPalette component props.
+ * @returns {JSX.Element} ColorPalette component element.
+ */
+const ColorPalette = forwardRef(({ value, swatchSize = 'sm', palette, onCommit, testId, ...props }, focusHandleRef) => {
+    const { class: mergedClasses, ariaLabel, ariaLabelledBy, ...mergedStyles } = mergedInterpolations(props);
+    const rootRef = useRef(null);
+    const testIdProps = useTestId(testId);
+    const colorPaletteTranslated = bundle.accColorPalette();
+    const [current, setCurrent] = useState(undefined);
+    const [selected, setSelected] = useState({
+        all: false,
+        keys: new Set([value ?? undefined])
+    });
+    useEffect(() => {
+        setSelected({
+            all: false,
+            keys: new Set([parseColorValue(value ?? undefined)])
+        });
+    }, [value]);
+    useEffect(() => { }, [selected]); // redraw when selection occurs
+    const getRowKey = (data) => {
+        return data;
+    };
+    //Allows to call focus on rootRef without having to expose it
+    useImperativeHandle(focusHandleRef, () => ({
+        focus: () => {
+            if (rootRef.current) {
+                rootRef.current.focus();
+            }
+        },
+        blur: () => {
+            if (rootRef.current) {
+                rootRef.current.blur();
+            }
+        }
+    }));
+    const dropdownStyle = {
+        width: '100%',
+        height: '100%'
+    };
+    return (jsx("div", { "aria-labelledby": ariaLabelledBy, className: mergedClasses, style: dropdownStyle, ...testIdProps, ...mergedStyles, children: jsx(Flex, { align: "center", children: jsx(SwatchFlexView, { ref: rootRef, "aria-label": ariaLabel ? ariaLabel : colorPaletteTranslated, focusBehavior: "content", data: palette ? convertPalette(sortPalette(palette)) : null, getRowKey: getRowKey, currentKey: current, onCurrentKeyChange: (detail) => {
+                    setCurrent(detail.value);
+                }, selectedKeys: selected, children: (context) => (jsx(ColorSwatch, { size: swatchSize, testId: testId + '_palette' + '_colorSwatch_' + context.data, "aria-hidden": true, value: context.data, onToggle: () => {
+                        onCommit?.({
+                            value: context.data,
+                            previousValue: selected.keys?.values().next().value
+                        });
+                        setSelected({ all: false, keys: new Set([context.data]) });
+                    }, isSelected: selected.keys?.has(context.data) })) }) }) }));
+});
+ColorPalette.displayName = 'ColorPalette';
+
+export { ColorPalette as C };
+//# sourceMappingURL=ColorPalette-765bbe22.js.map

package/es/ColorPalette-765bbe22.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPalette-765bbe22.js","sources":["../../src/UNSAFE_ColorPalette/ColorPalette.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 { useState, useEffect, forwardRef, useImperativeHandle } from 'preact/compat';\nimport { useRef } from 'preact/hooks';\nimport { Ref } from 'preact';\nimport { SwatchFlexView } from '#PRIVATE_SwatchFlexView';\nimport { ColorSwatch } from '#UNSAFE_ColorSwatch';\nimport { parseColorValue, type ColorValue } from '#utils/UNSAFE_color';\nimport { Flex } from '#UNSAFE_Flex/Flex';\nimport { Keys } from '#utils/UNSAFE_keys';\nimport { ListItemRendererContext } from '#UNSAFE_Collection';\nimport { TestIdProps, useTestId } from '../hooks/UNSAFE_useTestId';\nimport { DimensionProps, dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport { PaddingProps, paddingInterpolations } from '../utils/UNSAFE_interpolations/padding';\nimport { ColorProps, colorInterpolations } from '../utils/UNSAFE_interpolations/colors';\nimport { AriaProps, ariaInterpolations } from '../utils/UNSAFE_interpolations/aria';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { sortPalette, convertPalette } from '#utils/UNSAFE_color';\nimport type { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport translations from '#resources/nls/en/bundle';\nexport type FocusableHandle = {\n  focus: () => void;\n  blur: () => void;\n};\n\ntype StyleProps = DimensionProps & PaddingProps & ColorProps & AriaProps;\n\nexport type ColorPaletteProps = StyleProps &\n  TestIdProps & {\n    /**\n     * The selected color of the palette\n     */\n    value?: ColorValue;\n\n    /**\n     * The swatch size indicates how large the color swatches are rendered.\n     */\n    swatchSize?: 'xs' | 'sm';\n\n    /**\n     * An array of colors for the palette\n     */\n    palette?: Array<ColorValue>;\n\n    /**\n     * Invoked when a swatch is toggled\n     */\n    onCommit?: (details: ValueUpdateDetail<ColorValue>) => void;\n  };\n\nconst interpolations = [\n  ...Object.values(dimensionInterpolations),\n  ...Object.values(colorInterpolations),\n  ...Object.values(ariaInterpolations),\n  ...Object.values(paddingInterpolations)\n];\n\nconst mergedInterpolations = mergeInterpolations<ColorPaletteProps>(interpolations);\n\n/**\n * A Color Palette is an interface that displays a variety of color swatches allowing\n * users to select a color value.\n *\n * @param {ColorPaletteProps} props ColorPalette component props.\n * @returns {JSX.Element} ColorPalette component element.\n */\nexport const ColorPalette = forwardRef(\n  (\n    { value, swatchSize = 'sm', palette, onCommit, testId, ...props }: ColorPaletteProps,\n    focusHandleRef?: Ref<FocusableHandle>\n  ) => {\n    const {\n      class: mergedClasses,\n      ariaLabel,\n      ariaLabelledBy,\n      ...mergedStyles\n    } = mergedInterpolations(props);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const testIdProps = useTestId(testId);\n    const colorPaletteTranslated = translations.accColorPalette();\n\n    const [current, setCurrent] = useState<string | undefined>(undefined);\n    const [selected, setSelected] = useState<Keys<string | number>>({\n      all: false,\n      keys: new Set([(value as string) ?? undefined])\n    });\n\n    useEffect(() => {\n      setSelected({\n        all: false,\n        keys: new Set([parseColorValue(value ?? undefined)])\n      });\n    }, [value]);\n\n    useEffect(() => {}, [selected]); // redraw when selection occurs\n\n    const getRowKey = (data: unknown) => {\n      return data as string;\n    };\n\n    //Allows to call focus on rootRef without having to expose it\n    useImperativeHandle(focusHandleRef!, () => ({\n      focus: () => {\n        if (rootRef.current) {\n          rootRef.current.focus();\n        }\n      },\n      blur: () => {\n        if (rootRef.current) {\n          rootRef.current.blur();\n        }\n      }\n    }));\n\n    const dropdownStyle = {\n      width: '100%',\n      height: '100%'\n    };\n\n    return (\n      <div\n        aria-labelledby={ariaLabelledBy}\n        className={mergedClasses}\n        style={dropdownStyle}\n        {...testIdProps}\n        {...mergedStyles}>\n        <Flex align=\"center\">\n          <SwatchFlexView\n            ref={rootRef}\n            aria-label={ariaLabel ? ariaLabel : colorPaletteTranslated}\n            focusBehavior=\"content\"\n            data={palette ? convertPalette(sortPalette(palette)) : null}\n            getRowKey={getRowKey}\n            currentKey={current}\n            onCurrentKeyChange={(detail) => {\n              setCurrent(detail.value as string);\n            }}\n            selectedKeys={selected}>\n            {(context: ListItemRendererContext<string | number, unknown>) => (\n              <ColorSwatch\n                size={swatchSize}\n                testId={testId + '_palette' + '_colorSwatch_' + context.data}\n                aria-hidden={true}\n                value={context.data as ColorValue}\n                onToggle={() => {\n                  onCommit?.({\n                    value: context.data as ColorValue,\n                    previousValue: selected.keys?.values().next().value as ColorValue\n                  });\n                  setSelected({ all: false, keys: new Set([context.data as string]) });\n                }}\n                isSelected={selected.keys?.has(context.data as string)}></ColorSwatch>\n            )}\n          </SwatchFlexView>\n        </Flex>\n      </div>\n    );\n  }\n);\n\nColorPalette.displayName = 'ColorPalette';\n"],"names":["translations","_jsx"],"mappings":"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"}

package/es/ColorPicker-94212b50.js

@@ -0,0 +1,23 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { u as useTestId } from './useTestId-7f8e69e7.js';
+import { colorPickerPropVars } from './UNSAFE_ColorPicker/themes/ColorPickerContract.css.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { ColorPickerRedwoodTheme } from './UNSAFE_ColorPicker/themes/redwood/ColorPickerTheme.js';
+import { C as ColorPalette } from './ColorPalette-765bbe22.js';
+import { forwardRef } from 'preact/compat';
+import { F as Flex } from './Flex-97b023db.js';
+import { i as isMobile } from './clientUtils-71f2dbaf.js';
+
+/**
+ * A ColorPicker is a component that allows users to select a single color.
+ */
+const ColorPicker = forwardRef(({ swatchSize = 'xs', palette, height, maxWidth, value, testId, width, onCommit }, pickerRef) => {
+    // we need to render the baseTheme on the root dom element so that the CSS vars in colorPickerPropVars will be defined.
+    const { classes } = useComponentTheme(ColorPickerRedwoodTheme);
+    const testIdProps = useTestId(testId);
+    return (jsx("div", { ref: pickerRef, class: classes, ...testIdProps, children: jsx(Flex, { direction: "column", height: height === 'auto' ? undefined : isMobile() ? undefined : colorPickerPropVars.maxHeight, maxWidth: maxWidth !== undefined ? maxWidth : isMobile() ? '100%' : colorPickerPropVars.maxWidth, width: width !== undefined ? width : colorPickerPropVars.width, children: jsx(ColorPalette, { palette: palette, swatchSize: swatchSize, value: value, testId: testId ? testId + '_picker' : undefined, onCommit: onCommit }) }) }));
+});
+
+export { ColorPicker as C };
+//# sourceMappingURL=ColorPicker-94212b50.js.map

package/es/ColorPicker-94212b50.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker-94212b50.js","sources":["../../src/UNSAFE_ColorPicker/ColorPicker.tsx"],"sourcesContent":["// import { Flex } from '#UNSAFE_Flex';\nimport { useTestId, type TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport type { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { colorPickerPropVars } from './themes/ColorPickerContract.css';\nimport { useComponentTheme } from '#hooks/UNSAFE_useComponentTheme';\nimport { ColorPickerRedwoodTheme } from './themes/redwood/ColorPickerTheme';\nimport { ColorPalette } from '#UNSAFE_ColorPalette';\nimport { Size } from '#utils/UNSAFE_size';\nimport { ComponentProps } from 'preact';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { type ColorValue } from '#utils/UNSAFE_color';\nimport { Flex } from '#UNSAFE_Flex';\nimport { isMobile } from '#utils/UNSAFE_clientUtils';\n\ntype ColorPaletteProps = ComponentProps<typeof ColorPalette>;\ntype PickedPropsFromColorPalette = Pick<ColorPaletteProps, 'swatchSize' | 'palette'>;\n\ntype Props = TestIdProps &\n  PickedPropsFromColorPalette & {\n    /**\n     * The selected color\n     */\n    value?: ColorValue;\n\n    /**\n     * When property is set to \"auto\", the color picker will automatically adjust to the height of the palette.\n     * This is mainly to be used in conjunction with InputColor.\n     * <p>If not specified, defaults to the theme specified height.<br/>\n     */\n    height?: 'auto';\n\n    /**\n     * Specifies the component style maxWidth.\n     * <p>If not specified, defaults to the theme specified maxWidth.<br/>\n     * This attribute accepts values of type:<br/>\n     * 0 | `${number}${CssUnits}` | `${number}x` | `--${string}` | `var($string})` | `${number}%`</p>\n     * <p>When this component is used in composition and the component should take up 100% of the parent container's\n     * width, set maxWidth to '100%'.<br/>\n     * Because there is a theme default value for maxWidth, when setting the width property to achieve a fixed width,\n     * set the maxWidth property to the same value.</p>\n     */\n    maxWidth?: Size;\n\n    /**\n     * Specifies the component style width.\n     * <p>If not specified, defaults to '100%'.</p>\n     * <p>This attribute accepts values of type:</p>\n     * <p>0 | `${number}${CssUnits}` | `${number}x` | `--${string}`  | `var($string})` | `${number}%`</p>\n     * <br/>\n     * <p>Because there is a theme default value for maxWidth, when setting the width property to achieve a fixed width,\n     * set the maxWidth property to the same value.</p>\n     */\n    width?: Size;\n\n    /**\n     * Callback invoked when the user selects a color in the Palette. This callback is called even when the previous\n     * value and the value are the same, that is, when the user selects an already selected color.\n     * The app needs to handle this to write back the controlled 'value' property, or else no color will be shown\n     * to be selected.\n     */\n    onCommit: (detail: ValueUpdateDetail<ColorValue>) => void;\n  };\n\n/**\n * A ColorPicker is a component that allows users to select a single color.\n */\nexport const ColorPicker = forwardRef(\n  (\n    { swatchSize = 'xs', palette, height, maxWidth, value, testId, width, onCommit }: Props,\n    pickerRef?: ForwardedRef<HTMLDivElement>\n  ) => {\n    // we need to render the baseTheme on the root dom element so that the CSS vars in colorPickerPropVars will be defined.\n    const { classes } = useComponentTheme(ColorPickerRedwoodTheme);\n\n    const testIdProps = useTestId(testId);\n\n    return (\n      <div ref={pickerRef} class={classes} {...testIdProps}>\n        <Flex\n          direction=\"column\"\n          height={\n            height === 'auto' ? undefined : isMobile() ? undefined : colorPickerPropVars.maxHeight\n          }\n          maxWidth={\n            maxWidth !== undefined ? maxWidth : isMobile() ? '100%' : colorPickerPropVars.maxWidth\n          }\n          width={width !== undefined ? width : colorPickerPropVars.width}>\n          <ColorPalette\n            palette={palette}\n            swatchSize={swatchSize}\n            value={value}\n            testId={testId ? testId + '_picker' : undefined}\n            onCommit={onCommit}></ColorPalette>\n        </Flex>\n      </div>\n    );\n  }\n);\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;AA+DA;;AAEG;AACI,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAAE,UAAU,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAS,EACvF,SAAwC,KACtC;;IAEF,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,uBAAuB,CAAC,CAAC;AAE/D,IAAA,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IAEtC,QACEA,GAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAM,GAAA,WAAW,EAClD,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,QAAQ,EAClB,MAAM,EACJ,MAAM,KAAK,MAAM,GAAG,SAAS,GAAG,QAAQ,EAAE,GAAG,SAAS,GAAG,mBAAmB,CAAC,SAAS,EAExF,QAAQ,EACN,QAAQ,KAAK,SAAS,GAAG,QAAQ,GAAG,QAAQ,EAAE,GAAG,MAAM,GAAG,mBAAmB,CAAC,QAAQ,EAExF,KAAK,EAAE,KAAK,KAAK,SAAS,GAAG,KAAK,GAAG,mBAAmB,CAAC,KAAK,EAAA,QAAA,EAC9DA,GAAC,CAAA,YAAY,EACX,EAAA,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,EAC/C,QAAQ,EAAE,QAAQ,EAAiB,CAAA,EAAA,CAChC,EACH,CAAA,EACN;AACJ,CAAC;;;;"}

package/es/ColorSwatch-e98ed8ec.js

@@ -0,0 +1,127 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { Fragment } from 'preact';
+import { useCallback, useState, useEffect } from 'preact/hooks';
+import { forwardRef } from 'preact/compat';
+import { B as BareButton } from './BareButton-2df3f3eb.js';
+import { I as IconButton } from './IconButton-e7787aeb.js';
+import { u as useToggleAction } from './useToggleAction-fc0f5399.js';
+import { u as useTooltip } from './useTooltip-4c8e3803.js';
+import { u as useHover } from './useHover-85077adb.js';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import './LayerHost-a54158ef.js';
+import { u as useColorScheme } from './useColorScheme-14c5c7ab.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import './TooltipContentStyles.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
+import './tooltipUtils-a4b02dcc.js';
+import { u as useActive } from './useActive-fb6d4d52.js';
+import { g as getClientHints } from './clientHints-a42b510c.js';
+import { ColorSwatchRedwoodTheme } from './UNSAFE_ColorSwatch/themes/redwood/ColorSwatchTheme.js';
+import { p as processGlobals } from './buttonUtils-55fb1df7.js';
+import { i as isEightDigitHex, p as parseColorValue, g as getSixDigitHex } from './swatchData-64959ad2.js';
+import bundle from './resources/nls/en/bundle.js';
+import { S as SvgCheckboxCrossed } from './CheckboxCrossed-d1f25f09.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
+ */
+/**
+ * The NoFill image
+ */
+const NoFill = () => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", preserveAspectRatio: "none", width: "100%", height: "100%", children: jsx("path", { "stroke-width": "2", "vector-effect": "non-scaling-stroke", d: "M0 0L48 48" }) }));
+
+/**
+ * ColorSwatches render a color, showing focus, hover, and selection variations.
+ */
+const ColorSwatch = forwardRef(({ size = 'sm', isSelected = false, isButton = false, onToggle, isDisabled = false, isTooltipDisabled = false, testId, value, ...props }, ref) => {
+    const clientHints = getClientHints();
+    const isHybrid = clientHints.hoverSupport === 'events';
+    const valueText = value;
+    const hasValue = valueText && valueText.length;
+    const lowerValueText = hasValue ? valueText?.toLocaleLowerCase() : value;
+    const isNoFill = hasValue ? lowerValueText === 'transparent' : false;
+    const hasAlpha = value && hasValue ? isEightDigitHex(value) : false;
+    // const isSmallButton = isButton && size === 'xs'; // if used as xs button, the icon is 20x20, while the target size is 24x24
+    const selectedTranslated = bundle.vis_stateSelected();
+    const noneTranslated = bundle.labelNone();
+    const colorSwatchTranslated = bundle.accColorSwatch();
+    const { globalEventProps, ariaProps: { 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, 'aria-roledescription': ariaRoleDescription, ...swatchAriaProps } } = processGlobals(props);
+    const { hoverProps, isHover } = useHover({ isDisabled: !isHybrid });
+    const { activeProps, isActive } = useActive({ isDisabled: isDisabled });
+    // Cope with rgb or palette colors or illegal colors
+    const getHexValue = useCallback((raw) => {
+        if (raw?.toLowerCase() === 'transparent') {
+            return noneTranslated;
+        }
+        return parseColorValue(raw);
+    }, [noneTranslated]);
+    const [accessibleLabel, setAccessibleLabel] = useState(ariaLabel
+        ? ariaLabel
+        : getHexValue(value) + isSelected
+            ? ' ' + selectedTranslated
+            : '');
+    const colorScheme = useColorScheme();
+    const { classes, styles: { alphaHalfStyles, swatchStyles, buttonStyles, noFillStyles, noFillDisabledStyles, noFillHoverStyles, smallButtonContainerStyles } } = useComponentTheme(ColorSwatchRedwoodTheme, {
+        size: size,
+        selected: isSelected ? 'isSelected' : 'notSelected',
+        active: isActive ? 'isActive' : 'notActive',
+        disabled: isDisabled ? 'isDisabled' : 'notDisabled',
+        hover: isHover ? 'isHover' : 'notHover',
+        noFill: isNoFill ? 'isNoFill' : 'notNoFill',
+        hasValue: hasValue ? 'hasValue' : 'notHasValue',
+        button: isButton ? 'isButton' : 'notButton',
+        colorScheme
+    });
+    useEffect(() => {
+        if (!ariaLabel) {
+            setAccessibleLabel((isSelected ? selectedTranslated + ' ' : '') + getHexValue(value));
+        }
+    }, [isSelected, value, getHexValue, selectedTranslated, ariaLabel]);
+    const { triggerProps } = useToggleAction({
+        onToggle: onToggle
+    });
+    const { tooltipContent, tooltipProps } = useTooltip({
+        text: accessibleLabel,
+        isDisabled: isDisabled || isTooltipDisabled
+    });
+    const elementDetails = {
+        type: 'div'
+    };
+    const splitSwatch = () => {
+        return (jsxs(Fragment, { children: [jsx("div", { className: alphaHalfStyles, style: isDisabled ? {} : { backgroundColor: getSixDigitHex(value) } }), jsx("div", { className: alphaHalfStyles, style: isDisabled ? {} : { backgroundColor: value } })] }));
+    };
+    const noFill = () => {
+        return (jsx("div", { className: isDisabled ? noFillDisabledStyles : noFillStyles, children: jsx(NoFill, {}) }));
+    };
+    const valueSwatch = () => {
+        return (jsx("div", { className: classNames([
+                smallButtonContainerStyles,
+                isButton && buttonStyles,
+                !isButton && swatchStyles
+            ]), style: isNoFill || isDisabled || hasAlpha ? {} : { backgroundColor: value }, children: isNoFill ? noFill() : hasAlpha ? splitSwatch() : undefined }));
+    };
+    const noValueSwatch = () => {
+        return (jsx("div", { className: classNames([
+                !isButton && swatchStyles,
+                isDisabled ? noFillDisabledStyles : noFillHoverStyles
+            ]), children: jsx(SvgCheckboxCrossed, {}) }));
+    };
+    const swatchContents = () => {
+        return hasValue ? valueSwatch() : noValueSwatch();
+    };
+    const buttonContents = () => {
+        return (jsx(IconButton, { "aria-label": accessibleLabel, "aria-roledescription": ariaRoleDescription ?? colorSwatchTranslated, ...swatchAriaProps, isDisabled: isDisabled, ref: ref, size: "sm", testId: testId, variant: "ghost", onAction: () => onToggle?.({ value: isSelected }), children: swatchContents() }));
+    };
+    return isButton ? (buttonContents()) : (jsxs(Fragment, { children: [jsx(BareButton, { ref: ref, elementDetails: elementDetails, ...mergeProps(triggerProps, globalEventProps, hoverProps, activeProps, globalEventProps, tooltipProps), testId: testId, isDisabled: isDisabled, "aria-label": accessibleLabel, "aria-roledescription": ariaRoleDescription ?? colorSwatchTranslated, ...swatchAriaProps, classNames: classes, onAction: () => onToggle?.({ value: isSelected }), children: swatchContents() }), tooltipContent] }));
+});
+ColorSwatch.displayName = 'ColorSwatch';
+
+export { ColorSwatch as C };
+//# sourceMappingURL=ColorSwatch-e98ed8ec.js.map

package/es/ColorSwatch-e98ed8ec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch-e98ed8ec.js","sources":["../../src/UNSAFE_ColorSwatch/NoFill.tsx","../../src/UNSAFE_ColorSwatch/ColorSwatch.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 */\n\n/**\n * The NoFill image\n */\nexport const NoFill = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 48 48\"\n    preserveAspectRatio=\"none\"\n    width=\"100%\"\n    height=\"100%\">\n    <path stroke-width=\"2\" vector-effect=\"non-scaling-stroke\" d=\"M0 0L48 48\" />\n  </svg>\n);\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { Fragment, Ref } from 'preact';\nimport { useEffect, useState, useCallback } from 'preact/hooks';\nimport { forwardRef, ElementRef } from 'preact/compat';\n\nimport { BareButton } from '../UNSAFE_BareButton';\nimport { IconButton } from '../UNSAFE_IconButton';\nimport { useToggleAction, ToggleDetail } from '../hooks/UNSAFE_useToggleAction';\nimport { TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { useTooltip } from '../hooks/UNSAFE_useTooltip';\nimport { useHover } from '../hooks/UNSAFE_useHover';\nimport { useActive } from '../hooks/UNSAFE_useActive';\nimport { useColorScheme } from '../hooks/UNSAFE_useColorScheme';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { ColorSwatchVariantOptions } from './themes/ColorSwatchStyles.css';\nimport { ColorSwatchRedwoodTheme } from './themes/redwood/ColorSwatchTheme';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { NoFill } from './NoFill';\nimport { processGlobals } from '../utils/UNSAFE_buttonUtils';\nimport type { ButtonIntrinsicProps, ButtonIntrinsicAriaProps } from '../utils/UNSAFE_buttonUtils';\nimport {\n  parseColorValue,\n  type ColorValue,\n  isEightDigitHex,\n  getSixDigitHex\n} from '../utils/UNSAFE_color';\nimport translations from '#resources/nls/en/bundle';\nimport { CheckboxCrossed } from '#PRIVATE_Icons/CheckboxCrossed';\nimport { classNames } from '#utils/UNSAFE_classNames';\n\ntype SwatchHandle = ElementRef<typeof BareButton>;\n\nexport type ColorSwatchProps = Partial<ButtonIntrinsicProps> &\n  Partial<ButtonIntrinsicAriaProps> &\n  TestIdProps & {\n    /**\n     * color of the swatch\n     */\n    value?: ColorValue;\n\n    /**\n     * The size indicates how large the color swatch is rendered.\n     */\n    size?: 'xs' | 'sm';\n\n    /**\n     * Specifies if the color swatch is selected\n     */\n    isSelected?: boolean;\n\n    /**\n     * Specifies if the color swatch has role = button.  By default, the color swatch is used in a\n     * palette whereby it is not a button, but just a color swatch inside a grid cell.  However,\n     * it can be used as a stand-alone button, in which case this property should be set to true.  For\n     * example, inside inputColor, the color swatch is a button.\n     */\n    isButton?: boolean;\n\n    /**\n     * Specifies if the color swatch is disabled\n     */\n    isDisabled?: boolean;\n\n    /**\n     * Specifies if the color swatch tooltip is disabled\n     */\n    isTooltipDisabled?: 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/**\n * ColorSwatches render a color, showing focus, hover, and selection variations.\n */\nexport const ColorSwatch = forwardRef(\n  (\n    {\n      size = 'sm',\n      isSelected = false,\n      isButton = false,\n      onToggle,\n      isDisabled = false,\n      isTooltipDisabled = false,\n      testId,\n      value,\n      ...props\n    }: ColorSwatchProps,\n    ref: Ref<SwatchHandle>\n  ) => {\n    const clientHints = getClientHints();\n    const isHybrid = clientHints.hoverSupport === 'events';\n    const valueText = value as string;\n    const hasValue = valueText && valueText.length;\n    const lowerValueText = hasValue ? valueText?.toLocaleLowerCase() : value;\n    const isNoFill = hasValue ? lowerValueText === 'transparent' : false;\n    const hasAlpha = value && hasValue ? isEightDigitHex(value) : false;\n    // const isSmallButton = isButton && size === 'xs'; // if used as xs button, the icon is 20x20, while the target size is 24x24\n\n    const selectedTranslated = translations.vis_stateSelected();\n    const noneTranslated = translations.labelNone();\n    const colorSwatchTranslated = translations.accColorSwatch();\n\n    const {\n      globalEventProps,\n      ariaProps: {\n        'aria-label': ariaLabel,\n        'aria-hidden': ariaHidden,\n        'aria-roledescription': ariaRoleDescription,\n        ...swatchAriaProps\n      }\n    } = processGlobals(props);\n    const { hoverProps, isHover } = useHover({ isDisabled: !isHybrid });\n    const { activeProps, isActive } = useActive({ isDisabled: isDisabled });\n\n    // Cope with rgb or palette colors or illegal colors\n    const getHexValue = useCallback(\n      (raw?: string) => {\n        if (raw?.toLowerCase() === 'transparent') {\n          return noneTranslated;\n        }\n        return parseColorValue(raw);\n      },\n      [noneTranslated]\n    );\n\n    const [accessibleLabel, setAccessibleLabel] = useState<string>(\n      ariaLabel\n        ? ariaLabel\n        : getHexValue(value as string) + isSelected\n        ? ' ' + selectedTranslated\n        : ''\n    );\n\n    const colorScheme = useColorScheme();\n\n    const {\n      classes,\n      styles: {\n        alphaHalfStyles,\n        swatchStyles,\n        buttonStyles,\n        noFillStyles,\n        noFillDisabledStyles,\n        noFillHoverStyles,\n        smallButtonContainerStyles\n      }\n    } = useComponentTheme<ColorSwatchVariantOptions>(ColorSwatchRedwoodTheme, {\n      size: size,\n      selected: isSelected ? 'isSelected' : 'notSelected',\n      active: isActive ? 'isActive' : 'notActive',\n      disabled: isDisabled ? 'isDisabled' : 'notDisabled',\n      hover: isHover ? 'isHover' : 'notHover',\n      noFill: isNoFill ? 'isNoFill' : 'notNoFill',\n      hasValue: hasValue ? 'hasValue' : 'notHasValue',\n      button: isButton ? 'isButton' : 'notButton',\n      colorScheme\n    });\n\n    useEffect(() => {\n      if (!ariaLabel) {\n        setAccessibleLabel(\n          (isSelected ? selectedTranslated + ' ' : '') + getHexValue(value as string)\n        );\n      }\n    }, [isSelected, value, getHexValue, selectedTranslated, ariaLabel]);\n\n    const { triggerProps } = useToggleAction({\n      onToggle: onToggle\n    });\n\n    const { tooltipContent, tooltipProps } = useTooltip({\n      text: accessibleLabel,\n      isDisabled: isDisabled || isTooltipDisabled\n    });\n\n    const elementDetails = {\n      type: 'div' as const\n    };\n\n    const splitSwatch = () => {\n      return (\n        <Fragment>\n          <div\n            className={alphaHalfStyles}\n            style={isDisabled ? {} : { backgroundColor: getSixDigitHex(value!) as string }}\n          />\n          <div\n            className={alphaHalfStyles}\n            style={isDisabled ? {} : { backgroundColor: value as string }}\n          />\n        </Fragment>\n      );\n    };\n    const noFill = () => {\n      return (\n        <div className={isDisabled ? noFillDisabledStyles : noFillStyles}>\n          <NoFill />\n        </div>\n      );\n    };\n\n    const valueSwatch = () => {\n      return (\n        <div\n          className={classNames([\n            smallButtonContainerStyles,\n            isButton && buttonStyles,\n            !isButton && swatchStyles\n          ])}\n          style={isNoFill || isDisabled || hasAlpha ? {} : { backgroundColor: value as string }}>\n          {isNoFill ? noFill() : hasAlpha ? splitSwatch() : undefined}\n        </div>\n      );\n    };\n\n    const noValueSwatch = () => {\n      return (\n        <div\n          className={classNames([\n            !isButton && swatchStyles,\n            isDisabled ? noFillDisabledStyles : noFillHoverStyles\n          ])}>\n          <CheckboxCrossed />\n        </div>\n      );\n    };\n\n    const swatchContents = () => {\n      return hasValue ? valueSwatch() : noValueSwatch();\n    };\n\n    const buttonContents = () => {\n      return (\n        <IconButton\n          aria-label={accessibleLabel}\n          aria-roledescription={ariaRoleDescription ?? colorSwatchTranslated}\n          {...swatchAriaProps}\n          isDisabled={isDisabled}\n          ref={ref}\n          size=\"sm\"\n          testId={testId}\n          variant=\"ghost\"\n          onAction={() => onToggle?.({ value: isSelected })}>\n          {swatchContents()}\n        </IconButton>\n      );\n    };\n\n    return isButton ? (\n      buttonContents()\n    ) : (\n      <Fragment>\n        <BareButton\n          ref={ref}\n          elementDetails={elementDetails}\n          {...mergeProps(\n            triggerProps,\n            globalEventProps,\n            hoverProps,\n            activeProps,\n            globalEventProps,\n            tooltipProps\n          )}\n          testId={testId}\n          isDisabled={isDisabled}\n          aria-label={accessibleLabel}\n          aria-roledescription={ariaRoleDescription ?? colorSwatchTranslated}\n          {...swatchAriaProps}\n          classNames={classes}\n          onAction={() => onToggle?.({ value: isSelected })}>\n          {swatchContents()}\n        </BareButton>\n        {tooltipContent}\n      </Fragment>\n    );\n  }\n);\n\nColorSwatch.displayName = 'ColorSwatch';\n"],"names":["_jsx","translations","_jsxs","CheckboxCrossed"],"mappings":"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"}

package/es/CompactUserAssistance-308c2ad3.js

@@ -0,0 +1,47 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import 'preact/hooks';
+import './Flex-97b023db.js';
+import './MessageBannerStyles.styles.css';
+import './UNSAFE_MessageBanner/themes/redwood/MessageBannerBaseTheme.styles.css';
+import './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js';
+import 'preact';
+import './LayerHost-a54158ef.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-a4b02dcc.js';
+import './IconStyle.styles.css';
+import './IconButton-e7787aeb.js';
+import './MessageStyles.styles.css';
+import './MessageFormattingUtils-cdb25115.js';
+import './logger-c92f309c.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 { UserAssistanceRedwoodTheme } from './UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme.js';
+import { C as ComponentMessageContainer } from './ComponentMessageContainer-dc2b5f81.js';
+import './FormFieldContext-47ca0c20.js';
+import { u as useFormFieldContext } from './useFormFieldContext-daf7a676.js';
+import { P as Popup } from './Popup-8962c960.js';
+import { S as Separator } from './Separator-93c70737.js';
+import { u as usePopupFocusWithin } from './CompactLabelAssistance-89c305c6.js';
+import { dividerStyle, assistiveStyles } from './UNSAFE_UserAssistance/themes/UserAssistanceStyles.css.js';
+
+function CompactUserAssistance({ anchorRef, assistiveText, fieldLabel, id, messages = [] }) {
+    const { isInputFocused, isReadonly } = useFormFieldContext();
+    const flip = { mainAxis: true, crossAxis: false };
+    const { isFocused: isPopupFocused, popupProps } = usePopupFocusWithin();
+    const isOpen = isInputFocused === true || isPopupFocused === true;
+    const { baseTheme } = useComponentTheme(UserAssistanceRedwoodTheme);
+    const uaCompactContent = isReadonly !== true && (messages.length > 0 || assistiveText) ? (jsx(Popup, { ...popupProps, placement: "end-top-corner", isOpen: isOpen, anchorRef: anchorRef, flipOptions: flip, tail: "simple", role: "tooltip", maxWidth: '296px', children: jsxs("div", { id: id, class: baseTheme, children: [messages.length > 0 && (jsx(ComponentMessageContainer, { fieldLabel: fieldLabel, messages: messages })), messages.length > 0 && assistiveText && (jsx("span", { class: dividerStyle, children: jsx(Separator, {}) })), assistiveText && jsx("span", { class: assistiveStyles, children: assistiveText })] }) })) : null;
+    return uaCompactContent;
+}
+
+export { CompactUserAssistance as C };
+//# sourceMappingURL=CompactUserAssistance-308c2ad3.js.map

package/es/CompactUserAssistance-308c2ad3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompactUserAssistance-308c2ad3.js","sources":["../../src/UNSAFE_UserAssistance/CompactUserAssistance.tsx"],"sourcesContent":["import { RefObject } from 'preact/compat';\n\nimport { ComponentMessageContainer, ComponentMessageItem } from '../UNSAFE_ComponentMessage';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { Popup } from '../UNSAFE_Popup';\nimport { Coords } from '../UNSAFE_Floating';\nimport { Separator } from '../UNSAFE_Separator';\nimport { usePopupFocusWithin } from './usePopupFocusWithin';\nimport { assistiveStyles, dividerStyle } from './themes/UserAssistanceStyles.css';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { UserAssistanceRedwoodTheme } from './themes/redwood/UserAssistanceTheme';\n\ntype Props = {\n  anchorRef: RefObject<HTMLElement | Coords>;\n  assistiveText?: string;\n  fieldLabel?: string;\n  id?: string;\n  messages?: ComponentMessageItem[];\n};\n\nexport function CompactUserAssistance({\n  anchorRef,\n  assistiveText,\n  fieldLabel,\n  id,\n  messages = []\n}: Props) {\n  const { isInputFocused, isReadonly } = useFormFieldContext();\n  const flip = { mainAxis: true, crossAxis: false };\n  const { isFocused: isPopupFocused, popupProps } = usePopupFocusWithin();\n  const isOpen = isInputFocused === true || isPopupFocused === true;\n\n  const { baseTheme } = useComponentTheme(UserAssistanceRedwoodTheme);\n\n  const uaCompactContent =\n    isReadonly !== true && (messages.length > 0 || assistiveText) ? (\n      <Popup\n        {...popupProps}\n        placement=\"end-top-corner\"\n        isOpen={isOpen}\n        anchorRef={anchorRef}\n        flipOptions={flip}\n        tail=\"simple\"\n        role=\"tooltip\"\n        maxWidth={'296px'}>\n        <div id={id} class={baseTheme}>\n          {messages.length > 0 && (\n            <ComponentMessageContainer fieldLabel={fieldLabel} messages={messages} />\n          )}\n          {messages.length > 0 && assistiveText && (\n            <span class={dividerStyle}>\n              <Separator />\n            </span>\n          )}\n          {assistiveText && <span class={assistiveStyles}>{assistiveText}</span>}\n        </div>\n      </Popup>\n    ) : null;\n\n  return uaCompactContent;\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBgB,SAAA,qBAAqB,CAAC,EACpC,SAAS,EACT,aAAa,EACb,UAAU,EACV,EAAE,EACF,QAAQ,GAAG,EAAE,EACP,EAAA;IACN,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC7D,MAAM,IAAI,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;IAClD,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACxE,MAAM,MAAM,GAAG,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,IAAI,CAAC;IAElE,MAAM,EAAE,SAAS,EAAE,GAAG,iBAAiB,CAAC,0BAA0B,CAAC,CAAC;IAEpE,MAAM,gBAAgB,GACpB,UAAU,KAAK,IAAI,KAAK,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,aAAa,CAAC,IAC3DA,GAAA,CAAC,KAAK,EAAA,EAAA,GACA,UAAU,EACd,SAAS,EAAC,gBAAgB,EAC1B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,IAAI,EACjB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,OAAO,EAAA,QAAA,EACjBC,IAAK,CAAA,KAAA,EAAA,EAAA,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,QAAA,EAAA,CAC1B,QAAQ,CAAC,MAAM,GAAG,CAAC,KAClBD,GAAA,CAAC,yBAAyB,EAAA,EAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAC1E,EACA,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,aAAa,KACnCA,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,YAAY,EAAA,QAAA,EACvBA,GAAC,CAAA,SAAS,EAAG,EAAA,CAAA,EAAA,CACR,CACR,EACA,aAAa,IAAIA,GAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,eAAe,EAAG,QAAA,EAAA,aAAa,EAAQ,CAAA,CAAA,EAAA,CAClE,EACA,CAAA,IACN,IAAI,CAAC;AAEX,IAAA,OAAO,gBAAgB,CAAC;AAC1B;;;;"}

package/es/ComponentMessageContainer-dc2b5f81.js

@@ -0,0 +1,81 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsxs, jsx } from 'preact/jsx-runtime';
+import 'preact/hooks';
+import './Flex-97b023db.js';
+import './MessageBannerStyles.styles.css';
+import './UNSAFE_MessageBanner/themes/redwood/MessageBannerBaseTheme.styles.css';
+import './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js';
+import './logger-c92f309c.js';
+import 'preact';
+import { u as useTestId } from './useTestId-7f8e69e7.js';
+import './LayerHost-a54158ef.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-a4b02dcc.js';
+import './IconStyle.styles.css';
+import './IconButton-e7787aeb.js';
+import './MessageStyles.styles.css';
+import './MessageFormattingUtils-cdb25115.js';
+import { i as isSeverityIconNeeded, M as MessageStartIcon, a as MessageSummary, b as MessagesManager } from './MessagesManager-c46786cb.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { g as getClientHints } from './clientHints-a42b510c.js';
+import './TransitionGroup-5fd80dc9.js';
+import './MessagesContext-76544845.js';
+import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
+import { ComponentMessageRedwoodTheme } from './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageTheme.js';
+import { UserAssistanceRedwoodTheme } from './UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme.js';
+import { componentMessageContainerBase } from './UNSAFE_ComponentMessage/themes/ComponentMessageStyles.css.js';
+
+/**
+ * The component that renders an individual message for inline component messaging.
+ */
+function ComponentMessage({ detail, fieldLabel, severity = 'error', testId }) {
+    const { classes } = useComponentTheme(ComponentMessageRedwoodTheme, {
+        severity: severity ?? 'none'
+    });
+    const { baseTheme } = useComponentTheme(UserAssistanceRedwoodTheme);
+    const styleClasses = classNames([classes, baseTheme]);
+    const testIdProps = useTestId(testId);
+    // aria-live assertive works on ios VoiceOver, but not on Jaws for our non-input-element form components like checkbox-set and input-date-mask,
+    // and role='alert' works on Jaws but not ios Voiceover due to VO bug.
+    // JET-65574 error message is not read on focus in voiceover due to VoiceOver bug with role: 'alert'.
+    // JET-72375 Accessibility - Checkbox, Error message is not read by JAWS due to aria-live: 'assertive'.
+    return (jsxs("div", { class: styleClasses, ...(isIosSafari() ? { 'aria-live': 'assertive' } : { role: 'alert' }), "aria-atomic": "true", ...testIdProps, children: [fieldLabel && jsx(HiddenAccessible, { children: fieldLabel }), isSeverityIconNeeded(severity) && (jsx(MessageStartIcon, { severity: severity, testId: testId ? `${testId}-icon` : undefined, variant: "inline" })), jsx(MessageSummary, { testId: testId ? `${testId}-summary` : undefined, text: detail, variant: "inline" })] }));
+}
+/**
+ * Helper function to determine if the platform is iOS and the Browser is Safari.
+ * Exported for usage in local tests.
+ * @returns true if the platform is iOS, false otherwise
+ */
+function isIosSafari() {
+    return getClientHints().platform === 'ios' && getClientHints().browser === 'safari';
+}
+
+/**
+ * Converts the messages data into Item
+ *
+ * @param messages The messages data passed down as prop
+ * @returns The messages data as Item
+ */
+function generateMessagesData(messages) {
+    return messages.map((message, index) => {
+        return {
+            key: index,
+            data: {
+                closeAffordance: 'off',
+                severity: message.severity || 'error',
+                detail: message.detail
+            }
+        };
+    });
+}
+function ComponentMessageContainer({ fieldLabel, messages = [], testId }) {
+    const testIdProps = useTestId(testId);
+    return (jsx("div", { class: componentMessageContainerBase, ...testIdProps, children: jsx(MessagesManager, { data: generateMessagesData(messages), children: ({ item }) => (jsx(ComponentMessage, { detail: item.data.detail, fieldLabel: fieldLabel, severity: item.data.severity, testId: testId ? `${testId}-message-${item.key}` : undefined }, item.key)) }) }));
+}
+
+export { ComponentMessageContainer as C, ComponentMessage as a };
+//# sourceMappingURL=ComponentMessageContainer-dc2b5f81.js.map

package/es/ComponentMessageContainer-dc2b5f81.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentMessageContainer-dc2b5f81.js","sources":["../../src/UNSAFE_ComponentMessage/ComponentMessage.tsx","../../src/UNSAFE_ComponentMessage/ComponentMessageContainer.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 { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { isSeverityIconNeeded, MessageStartIcon, MessageSummary } from '../PRIVATE_Message';\nimport { HiddenAccessible } from '../UNSAFE_HiddenAccessible';\nimport { ComponentMessageVariantOptions } from './themes/ComponentMessageStyles.css';\nimport { ComponentMessageRedwoodTheme } from './themes/redwood/ComponentMessageTheme';\nimport { classNames } from '#utils/UNSAFE_classNames';\nimport { type TestIdProps, useTestId } from '#hooks/UNSAFE_useTestId';\nimport { UserAssistanceRedwoodTheme } from '#UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme';\nimport { getClientHints } from '#utils/PRIVATE_clientHints';\n/**\n * A type for a single component message\n */\nexport type ComponentMessageItem = {\n  summary?: string;\n  detail?: string;\n  severity?: 'confirmation' | 'error' | 'info' | 'warning';\n};\n\n/**\n * Props for the Message Component\n */\ntype Props = TestIdProps & {\n  /**\n   * The error detail text for the component message\n   */\n  detail?: ComponentMessageItem['detail'];\n\n  /**\n   * The label of the field which is showing this error\n   */\n  fieldLabel?: string;\n\n  /**\n   * The severity of the component message\n   */\n  severity?: ComponentMessageItem['severity'];\n};\n\n/**\n * The component that renders an individual message for inline component messaging.\n */\nexport function ComponentMessage({ detail, fieldLabel, severity = 'error', testId }: Props) {\n  const { classes } = useComponentTheme<ComponentMessageVariantOptions>(\n    ComponentMessageRedwoodTheme,\n    {\n      severity: severity ?? 'none'\n    }\n  );\n\n  const { baseTheme } = useComponentTheme(UserAssistanceRedwoodTheme);\n  const styleClasses = classNames([classes, baseTheme]);\n  const testIdProps = useTestId(testId);\n\n  // aria-live assertive works on ios VoiceOver, but not on Jaws for our non-input-element form components like checkbox-set and input-date-mask,\n  // and role='alert' works on Jaws but not ios Voiceover due to VO bug.\n  // JET-65574 error message is not read on focus in voiceover due to VoiceOver bug with role: 'alert'.\n  // JET-72375 Accessibility - Checkbox, Error message is not read by JAWS due to aria-live: 'assertive'.\n\n  return (\n    <div\n      class={styleClasses}\n      {...(isIosSafari() ? { 'aria-live': 'assertive' } : { role: 'alert' })}\n      aria-atomic=\"true\"\n      {...testIdProps}>\n      {fieldLabel && <HiddenAccessible>{fieldLabel}</HiddenAccessible>}\n      {isSeverityIconNeeded(severity) && (\n        <MessageStartIcon\n          severity={severity}\n          testId={testId ? `${testId}-icon` : undefined}\n          variant=\"inline\"\n        />\n      )}\n      {/* We will be using the MessageSummary component, as this aligns with the style required */}\n      <MessageSummary\n        testId={testId ? `${testId}-summary` : undefined}\n        text={detail}\n        variant=\"inline\"\n      />\n    </div>\n  );\n}\n\n/**\n * Helper function to determine if the platform is iOS and the Browser is Safari.\n * Exported for usage in local tests.\n * @returns true if the platform is iOS, false otherwise\n */\nexport function isIosSafari() {\n  return getClientHints().platform === 'ios' && getClientHints().browser === 'safari';\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 { MessagesManager } from '../PRIVATE_Message';\nimport { Item } from '../utils/UNSAFE_dataProvider';\nimport { ComponentMessage, ComponentMessageItem } from './ComponentMessage';\nimport { componentMessageContainerBase } from './themes/ComponentMessageStyles.css';\nimport { type TestIdProps, useTestId } from '#hooks/UNSAFE_useTestId';\n\n/**\n * Converts the messages data into Item\n *\n * @param messages The messages data passed down as prop\n * @returns The messages data as Item\n */\nfunction generateMessagesData(messages: ComponentMessageItem[]) {\n  return messages.map<Item<number, ComponentMessageItem>>((message, index) => {\n    return {\n      key: index,\n      data: {\n        closeAffordance: 'off',\n        severity: message.severity || 'error',\n        detail: message.detail\n      }\n    };\n  });\n}\n\n/**\n * Props for the ComponentMessaging component\n */\ntype Props = TestIdProps & {\n  /**\n   * The label of the field which is showing this error\n   */\n  fieldLabel?: string;\n\n  /**\n   * Data for the messages. This data is used for rendering each message.\n   */\n  messages?: ComponentMessageItem[];\n};\n\nexport function ComponentMessageContainer({ fieldLabel, messages = [], testId }: Props) {\n  const testIdProps = useTestId(testId);\n  return (\n    <div class={componentMessageContainerBase} {...testIdProps}>\n      <MessagesManager data={generateMessagesData(messages)}>\n        {({ item }) => (\n          <ComponentMessage\n            key={item.key}\n            detail={item.data.detail}\n            fieldLabel={fieldLabel}\n            severity={item.data.severity}\n            testId={testId ? `${testId}-message-${item.key}` : undefined}\n          />\n        )}\n      </MessagesManager>\n    </div>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}