@oracle/oraclejet-preact 15.0.5 → 15.1.0

package/es/UNSAFE_TagCloud.js

@@ -1,10 +1,10 @@
-/* @oracle/oraclejet-preact: 15.0.5 */
+/* @oracle/oraclejet-preact: 15.1.0 */
 import { jsx, jsxs } from 'preact/jsx-runtime';
 import './utils/UNSAFE_classNames.js';
-import { g as getContrastingTextColor, _ as _lightenColor } from './ColorUtils-31ae632b.js';
-import { i as intersects, g as getUnion, a as getRandomId } from './LayoutUtils-90cd369e.js';
+import { g as getContrastingTextColor } from './ColorUtils-c44be3a5.js';
+import { i as intersects, g as getUnion, a as getRandomId } from './LayoutUtils-b145e71d.js';
 import { styles, baseStyles } from './UNSAFE_TagCloud/themes/TagCloudStyles.css.js';
-import { c as classNames } from './classNames-18f43a95.js';
+import { c as classNames } from './classNames-8e9a56f7.js';
 import { useState, useRef, useLayoutEffect } from 'preact/hooks';
 import { useUser } from './hooks/UNSAFE_useUser.js';
 import { TrackResizeContainer } from './PRIVATE_TrackResizeContainer.js';
@@ -13,8 +13,9 @@ import { mergeProps } from './utils/UNSAFE_mergeProps.js';
 import { useTranslationBundle } from './hooks/UNSAFE_useTranslationBundle.js';
 import { useTextDimensions } from './hooks/PRIVATE_useTextDimensions.js';
 import { useSelection } from './hooks/PRIVATE_useVizSelection.js';
+import { sizeToCSS } from './utils/UNSAFE_size.js';
 import './TagCloudStyles.styles.css';
-import './index-a38e9f91.js';
+import './index-894ec59d.js';
 import 'preact';
 import './Common.js';
 import './Common/themes.js';
@@ -25,41 +26,41 @@ import './hooks/PRIVATE_useSize.js';
 import './hooks/PRIVATE_useResizeObserver.js';
 import './hooks/UNSAFE_useId.js';
 import './UNSAFE_Floating.js';
-import './Floating-a2206cf2.js';
-import './index-e4ac4b86.js';
+import './Floating-dde6f65d.js';
+import './index-6e5d9f82.js';
 import './utils/PRIVATE_floatingUtils.js';
 import './utils/PRIVATE_refUtils.js';
 import './hooks/UNSAFE_useOutsideClick.js';
 import './utils/UNSAFE_arrayUtils.js';
 import './hooks/UNSAFE_useComponentTheme.js';
 import './utils/UNSAFE_logger.js';
-import './_curry1-fc319d6c.js';
-import './_curry2-e0a1a531.js';
-import './utils-a17e06e7.js';
+import './_curry1-2f73ee67.js';
+import './_curry2-dccb0aa0.js';
+import './utils-0d18f201.js';
 import './UNSAFE_Floating/themes/redwood/FloatingTheme.js';
 import './UNSAFE_Floating/themes/FloatingStyles.css.js';
 import './FloatingStyles.styles.css';
 import './UNSAFE_Floating/themes/redwood/FloatingBaseTheme.css.js';
 import './UNSAFE_Floating/themes/redwood/FloatingBaseTheme.styles.css';
 import './UNSAFE_Floating/themes/redwood/FloatingVariants.css.js';
-import './vanilla-extract-recipes-createRuntimeFn.esm-5aebfaed.js';
-import './vanilla-extract-dynamic.esm-827a2f5c.js';
+import './vanilla-extract-recipes-createRuntimeFn.esm-d0903b01.js';
+import './vanilla-extract-dynamic.esm-4c25ea5a.js';
 import './UNSAFE_Floating/themes/FloatingContract.css.js';
 import './UNSAFE_Layer.js';
-import './useThemeInterpolations-7faeb581.js';
+import './useThemeInterpolations-befd4733.js';
 import './hooks/UNSAFE_useColorScheme.js';
 import './hooks/UNSAFE_useScale.js';
 import './utils/UNSAFE_interpolations/theme.js';
 import './UNSAFE_Theme.js';
 import './utils/UNSAFE_mergeInterpolations.js';
-import './_curry3-bd288324.js';
-import './_has-fe97a930.js';
+import './_curry3-091727f8.js';
+import './_has-973092fa.js';
 import './hooks/UNSAFE_useHover.js';
 import './hooks/UNSAFE_useToggle.js';
 import './hooks/UNSAFE_useFocus.js';
 import './hooks/UNSAFE_useTouch.js';
 import './hooks/UNSAFE_useAnimation.js';
-import './useAnimation-144569a6.js';
+import './useAnimation-77c6543f.js';
 import './hooks/UNSAFE_useThemeInterpolations.js';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentTheme.js';
 import './hooks/UNSAFE_useTooltip/themes/TooltipContentStyles.css.js';
@@ -67,12 +68,78 @@ import './TooltipContentStyles.styles.css';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.css.js';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
-import './TooltipContentVariants.styles.css';
+import './TooltipContentVariants.styles2.css';
 import './utils/PRIVATE_clientHints.js';
-import './clientHints-e3b82309.js';
+import './clientHints-3936573c.js';
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Returns the item based on item info in a tag cloud.
+ * @param itemInfo
+ * @param items
+ * @returns
+ */
+function getItem(itemInfo, items) {
+    const { idx } = itemInfo;
+    return items[idx];
+}
+function getItemPadding(height) {
+    return height != null ? 0.15 * height : 0;
+}
+/**
+ * Returns the next item's info in a tag cloud.
+ * @param itemInfo
+ * @param items
+ * @returns
+ */
+function getNextItemInfo(itemInfo, items) {
+    let idx = itemInfo.idx;
+    idx = Math.min(items.length - 1, idx + 1);
+    return { idx, id: items[idx].id };
+}
+/**
+ * Returns the previous item's info in a tag cloud.
+ * @param itemInfo
+ * @param items
+ * @returns
+ */
+function getPrevItemInfo(itemInfo, items) {
+    let idx = itemInfo.idx;
+    idx = Math.max(0, idx - 1);
+    return { idx, id: items[idx].id };
+}
+/**
+ * Returns utils functions for navigation in a tag cloud.
+ * @param items
+ * @returns
+ */
+function getTagCloudNavUtils(items) {
+    return {
+        getItem: (itemInfo) => {
+            return getItem(itemInfo, items);
+        },
+        getDetailFromInfo: (itemInfo) => {
+            if (!itemInfo) {
+                return { id: undefined };
+            }
+            const item = getItem(itemInfo, items);
+            return { id: item.id };
+        },
+        getPrevItemInfo: (itemInfo) => {
+            return getPrevItemInfo(itemInfo, items);
+        },
+        getNextItemInfo: (itemInfo) => {
+            return getNextItemInfo(itemInfo, items);
+        }
+    };
+}
 
-const HOVER_OPACITY = 0.35;
-const HOVER_SELECTED_OPACITY = 0.65;
 const BOTTOM_PADDING = 20;
 const DEFAULT_FONT_SIZE = 12;
 /**
@@ -173,7 +240,13 @@ function getCloudLayout(items, tagcloudW, tagcloudH, isRTL, getTextDimensions) {
                 sinCache[lookup] = Math.sin(step * thetaStep);
             const _x = xrStep * step * cosCache[lookup];
             const _y = yrStep * step * sinCache[lookup];
-            const tagCloudDiv = { x: _x, y: _y, w: tagDimensions.width, h: tagDimensions.height }; // this needs to change
+            const padding = getItemPadding(tagDimensions.height);
+            const tagCloudDiv = {
+                x: _x,
+                y: _y,
+                w: tagDimensions.width + 2 * padding,
+                h: tagDimensions.height + 2 * padding
+            }; // this needs to change
             placed = true;
             if (lastCollisionIndex !== -1) {
                 if (intersects(positions[lastCollisionIndex], tagCloudDiv)) {
@@ -279,7 +352,12 @@ function getRectangleLayout(items, tagcloudW, tagcloudH, isRTL, getTextDimension
         maxWidth = Math.max(maxWidth, tagDimensions.width);
         maxHeight = Math.max(maxHeight, tagDimensions.height);
         maxFontSize = Math.max(maxFontSize, tag.fontSize);
-        arDims.push({ w: tagDimensions.width, h: tagDimensions.height });
+        arDims.push({
+            w: tagDimensions.width,
+            h: tagDimensions.height,
+            x: tagDimensions.x,
+            y: tagDimensions.y
+        });
     }
     // Iteratively calculate the ideal font scale
     let minScale = 0;
@@ -332,15 +410,13 @@ function getRectangleLayout(items, tagcloudW, tagcloudH, isRTL, getTextDimension
             const fontSize = tagLine.fontSize;
             const tagItemFontSize = fontSize * scale;
             tagLine.fontSize = tagItemFontSize;
-            const tagDimensions = getTextDimensions(tagLine.label, {
-                fontSize: tagLine.fontSize + 'px'
-            });
-            tagLine.y = tagCloudY + bottomY + tagDimensions.y - BOTTOM_PADDING;
+            const tagDimensionsWidth = arDims[m].w * scale;
+            tagLine.y = tagCloudY + bottomY + arDims[m].y * scale - BOTTOM_PADDING;
             if (justified && m === lineEnd - 1 && m !== lineStart) {
                 if (!isRTL)
-                    tagLine.x = tagCloudX + tagcloudW - tagDimensions.width - margin;
+                    tagLine.x = tagCloudX + tagcloudW - tagDimensionsWidth - margin;
                 else
-                    tagLine.x = tagCloudX + tagDimensions.width + margin - tagcloudW;
+                    tagLine.x = tagCloudX + tagDimensionsWidth + margin - tagcloudW;
                 // alignRight(tagLine);
             }
             else {
@@ -354,7 +430,7 @@ function getRectangleLayout(items, tagcloudW, tagcloudH, isRTL, getTextDimension
                     curX -= arDims[m].w * scale + hPadding;
                 }
             }
-            tagWordData.push({ ...tagLine, w: tagDimensions.width, h: tagDimensions.height });
+            tagWordData.push({ ...tagLine, w: tagDimensionsWidth, h: arDims[m].h * scale });
         }
     }
     return tagWordData;
@@ -432,15 +508,15 @@ function getAriaProps(translations, hasData, accessibleLabel) {
  * @param accessibleLabel { string } The aria-label set by the app.
  * @returns The aria props.
  */
-function getItemAriaProps(supportsSelection, translations, isSelected, accessibleLabel) {
+function getItemAriaProps(supportsSelection, translations, isSelected, accessibleLabel, role) {
     const selectionAriaLabel = !supportsSelection
         ? ''
         : isSelected
             ? translations?.dataVisualization_stateSelected()
             : translations?.dataVisualization_stateUnselected();
     return {
-        'aria-label': `${accessibleLabel || ''}. ${selectionAriaLabel}`,
-        role: 'img'
+        'aria-label': [accessibleLabel, selectionAriaLabel].filter(Boolean).join('. ') || undefined,
+        role: role || 'img'
     };
 }
 /**
@@ -468,21 +544,11 @@ function getItemProps(item, itemIdx, supportsSelection, isReadOnly, hoveredItem,
         let color, backgroundColor, backgroundImage;
         if (isSelected) {
             backgroundColor = item.color;
-            // isCurrent ? hover selected : selected
-            color = getContrastingTextColor(_lightenColor(backgroundColor, isCurrent ? HOVER_SELECTED_OPACITY : 1));
-            backgroundImage = isCurrent
-                ? `linear-gradient(rgba(255,255,255, ${1 - HOVER_SELECTED_OPACITY}), rgba(255,255,255, ${1 - HOVER_SELECTED_OPACITY}))`
-                : 'none';
-        }
-        else if (isCurrent && supportsSelection) {
-            // hovered and selection supported
-            backgroundColor = item.color;
-            backgroundImage = `linear-gradient(rgba(255,255,255, ${1 - HOVER_OPACITY}), rgba(255,255,255, ${1 - HOVER_OPACITY}))`;
-            color = getContrastingTextColor(_lightenColor(backgroundColor, isCurrent ? HOVER_OPACITY : 1));
+            color = getContrastingTextColor(backgroundColor);
         }
-        else {
+        // hovered and selection supported
+        else
             color = item.color;
-        }
         style = {
             color,
             backgroundColor,
@@ -576,79 +642,17 @@ const TagCloudItem = (props) => {
         isNotDimmed ? '' : dimmedItemStyle,
         props.supportsAction || props.supportsSelection ? interactiveCursorStyle : ''
     ]);
-    const itemAriaProps = getItemAriaProps(!!props.supportsSelection, props.translations, props.isSelected, props.accessibleLabel);
+    const itemAriaProps = getItemAriaProps(!!props.supportsSelection, props.translations, props.isSelected, props.accessibleLabel, props.role);
+    const padding = getItemPadding(props.h);
     return (jsx("div", { class: itemClasses, "data-id": `${props.id}`, "data-idx": props.itemIdx, style: {
             ...props.style,
-            transform: `translate(${props.x}px,${props.y}px)`,
-            fontSize: props.fontSize
+            transform: `translate(${(props.x || 0) - padding}px,${(props.y || 0) - padding}px)`,
+            fontSize: props.fontSize,
+            padding: `${padding}px`,
+            lineHeight: props.fontSize + 'px'
         }, id: props.activeId, ...itemAriaProps, children: props.label }));
 };
 
-/**
- * @license
- * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
- * The Universal Permissive License (UPL), Version 1.0
- * as shown at https://oss.oracle.com/licenses/upl/
- * @ignore
- */
-/**
- * Returns the item based on item info in a tag cloud.
- * @param itemInfo
- * @param items
- * @returns
- */
-function getItem(itemInfo, items) {
-    const { idx } = itemInfo;
-    return items[idx];
-}
-/**
- * Returns the next item's info in a tag cloud.
- * @param itemInfo
- * @param items
- * @returns
- */
-function getNextItemInfo(itemInfo, items) {
-    let idx = itemInfo.idx;
-    idx = Math.min(items.length - 1, idx + 1);
-    return { idx, id: items[idx].id };
-}
-/**
- * Returns the previous item's info in a tag cloud.
- * @param itemInfo
- * @param items
- * @returns
- */
-function getPrevItemInfo(itemInfo, items) {
-    let idx = itemInfo.idx;
-    idx = Math.max(0, idx - 1);
-    return { idx, id: items[idx].id };
-}
-/**
- * Returns utils functions for navigation in a tag cloud.
- * @param items
- * @returns
- */
-function getTagCloudNavUtils(items) {
-    return {
-        getItem: (itemInfo) => {
-            return getItem(itemInfo, items);
-        },
-        getDetailFromInfo: (itemInfo) => {
-            if (!itemInfo) {
-                return { id: undefined };
-            }
-            const item = getItem(itemInfo, items);
-            return { id: item.id };
-        },
-        getPrevItemInfo: (itemInfo) => {
-            return getPrevItemInfo(itemInfo, items);
-        },
-        getNextItemInfo: (itemInfo) => {
-            return getNextItemInfo(itemInfo, items);
-        }
-    };
-}
-
 function useEvents(isInteractive, getDetailFromInfo, getPrevItemInfo, getNextItemInfo, onItemAction, onInput) {
     const [focusedItemInfo, setfocusedItemInfo] = useState({ idx: 0 });
     const [hoveredItemInfo, sethoveredItemInfo] = useState();
@@ -860,15 +864,15 @@ const useTagCloudDatatip = ({ text, rootRef, focusedItemRef, focusedItemInfo })
 };
 
 /**
- * Tag clouds are used to display text data with the importance of each tag shown with font size or color.
+ * Tag clouds are used to display text data with the importance of each tag shown with font size and/or color.
  */
-function TagCloud({ items, onItemAction, onItemInput, ...props }) {
+function TagCloud({ selectionMode = 'none', layout = 'cloud', height = '112x', width = '100%', items, onItemAction, onItemInput, ...props }) {
     const rootRef = useRef(null);
     const focusedItemRef = useRef(null);
     const translations = useTranslationBundle('@oracle/oraclejet-preact');
     const filteredItems = items.filter((i) => !props.hiddenIds?.includes(i.id));
     const hasData = filteredItems && filteredItems.length !== 0;
-    const supportsSelection = !!(props.selectionMode && props.selectionMode !== 'none');
+    const supportsSelection = !!(selectionMode && selectionMode !== 'none');
     const supportsAction = onItemAction != null;
     const isReadOnly = supportsAction && onItemInput === null;
     const ariaProps = getAriaProps(translations, hasData, props.accessibleLabel);
@@ -890,19 +894,19 @@ function TagCloud({ items, onItemAction, onItemInput, ...props }) {
     const selectionProps = useSelection({
         idExtracter,
         selection: props.selectedIds,
-        selectionMode: props.selectionMode,
+        selectionMode: selectionMode,
         onChange: props.onSelectionChange
     });
     const mergedProps = mergeProps(eventsProps, datatipProps, selectionProps);
     const { direction } = useUser();
-    return (jsx(TrackResizeContainer, { width: props.width, height: props.height, children: (width, height) => {
+    return (jsx(TrackResizeContainer, { width: sizeToCSS(width) || width || '0px', height: sizeToCSS(height) || height || '0px', children: (width, height) => {
             const { textMeasureContent, getTextDimensions } = useTextDimensions();
             const [layoutTags, setLayoutTags] = useState([]);
             useLayoutEffect(() => {
                 if (!getTextDimensions || !hasData)
                     return;
-                setLayoutTags(getLayout(props.layout, filteredItems, width, height, direction === 'rtl', getTextDimensions));
-            }, [props.layout, filteredItems, width, height, direction, getTextDimensions]);
+                setLayoutTags(getLayout(layout, filteredItems, width, height, direction === 'rtl', getTextDimensions));
+            }, [layout, filteredItems, width, height, direction, getTextDimensions]);
             return (jsxs("div", { ref: rootRef, tabIndex: isReadOnly ? undefined : 0, style: { width, height }, class: baseStyles, ...ariaProps, ...mergedProps, children: [layoutTags.map((item, itemIndex) => {
                         const itemProps = getItemProps(item, itemIndex, supportsSelection, isReadOnly, hoveredItemInfo, props.selectedIds, focusedItemInfo, props.highlightedIds, eventsProps['aria-activedescendant']);
                         const isFocusedItem = focusedItemInfo.idx === itemIndex;