/* @oracle/oraclejet-preact: undefined */
'use strict';

var jsxRuntime = require('preact/jsx-runtime');
var compat = require('preact/compat');
var hooks = require('preact/hooks');
var ColorSwatch = require('./ColorSwatch-cddebd6b.js');
var swatchData = require('./swatchData-17c1d335.js');
var Flex = require('./Flex-3a257bc3.js');
var useTestId = require('./useTestId-4f53d561.js');
var dimensions = require('./dimensions-6101ca1f.js');
var padding = require('./padding-ba041f6a.js');
var colors = require('./colors-f3ce979a.js');
var aria = require('./aria-889aedd0.js');
var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
var resources_nls_en_bundle = require('./resources/nls/en/bundle.js');
var SwatchFlexView = require('./SwatchFlexView-35c68cf1.js');

const interpolations = [
    ...Object.values(dimensions.dimensionInterpolations),
    ...Object.values(colors.colorInterpolations),
    ...Object.values(aria.ariaInterpolations),
    ...Object.values(padding.paddingInterpolations)
];
const mergedInterpolations = mergeInterpolations.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 = compat.forwardRef(({ value, swatchSize = 'sm', palette, onCommit, testId, ...props }, focusHandleRef) => {
    const { class: mergedClasses, ariaLabel, ariaLabelledBy, ...mergedStyles } = mergedInterpolations(props);
    const rootRef = hooks.useRef(null);
    const testIdProps = useTestId.useTestId(testId);
    const colorPaletteTranslated = resources_nls_en_bundle["default"].accColorPalette();
    const [current, setCurrent] = compat.useState(undefined);
    const [selected, setSelected] = compat.useState({
        all: false,
        keys: new Set([value ?? undefined])
    });
    compat.useEffect(() => {
        setSelected({
            all: false,
            keys: new Set([swatchData.parseColorValue(value ?? undefined)])
        });
    }, [value]);
    compat.useEffect(() => { }, [selected]); // redraw when selection occurs
    const getRowKey = (data) => {
        return data;
    };
    //Allows to call focus on rootRef without having to expose it
    compat.useImperativeHandle(focusHandleRef, () => ({
        focus: () => {
            if (rootRef.current) {
                rootRef.current.focus();
            }
        },
        blur: () => {
            if (rootRef.current) {
                rootRef.current.blur();
            }
        }
    }));
    const dropdownStyle = {
        width: '100%',
        height: '100%'
    };
    return (jsxRuntime.jsx("div", { "aria-labelledby": ariaLabelledBy, className: mergedClasses, style: dropdownStyle, ...testIdProps, ...mergedStyles, children: jsxRuntime.jsx(Flex.Flex, { align: "center", children: jsxRuntime.jsx(SwatchFlexView.SwatchFlexView, { ref: rootRef, "aria-label": ariaLabel ? ariaLabel : colorPaletteTranslated, focusBehavior: "content", data: palette ? swatchData.convertPalette(swatchData.sortPalette(palette)) : null, getRowKey: getRowKey, currentKey: current, onCurrentKeyChange: (detail) => {
                    setCurrent(detail.value);
                }, selectedKeys: selected, children: (context) => (jsxRuntime.jsx(ColorSwatch.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';

exports.ColorPalette = ColorPalette;
//# sourceMappingURL=ColorPalette-b14114d8.js.map
