@oracle/oraclejet-preact 20.1.4 → 20.1.5

package/es/useDatatip-e65b4013.js

@@ -0,0 +1,94 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { L as Layer } from './Layer-6c27170e.js';
+import 'preact/compat';
+import './LayerHost-3cf255a6.js';
+import { F as Floating } from './Floating-0a11107a.js';
+import { useRef, useState } from 'preact/hooks';
+import { styles } from './hooks/PRIVATE_useDatatip/themes/useDatatip.css.js';
+import { u as useId } from './useId-03dbfdf0.js';
+import { D as DATATIP_OFFSET } from './datatipUtils-0a36125e.js';
+import { u as useVisHover } from './useVisHover-d7a0b2f3.js';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+
+/**
+ * The hook to support custom datatip in visualization components.
+ */
+function useDatatip({ content, placement = 'top-end-corner', offset, borderColor, defaultContainer = 'enabled', anchor, touchResponse, isDisabled }) {
+    const uniqueIdRef = useRef(useId());
+    const [coords, setCoords] = useState({ x: 0, y: 0 });
+    const offsetValue = offset || { mainAxis: DATATIP_OFFSET, crossAxis: -1 * DATATIP_OFFSET };
+    const [isVisible, setIsVisible] = useState(false);
+    const targetRef = useRef(null);
+    const toggleTimeoutRef = useRef();
+    const onHover = (event) => {
+        setCoords({ x: event.clientX, y: event.clientY });
+        setIsVisible(true);
+    };
+    const onHoverEnter = (event, currentTarget) => {
+        if (event.pointerType === 'touch' ||
+            event.eventPhase === Event.AT_TARGET ||
+            event.eventPhase === Event.BUBBLING_PHASE) {
+            setCoords({ x: event.clientX, y: event.clientY });
+            targetRef.current = currentTarget;
+            setIsVisible(true);
+        }
+    };
+    const onHoverLeave = () => {
+        toggleTimeoutRef.current = setTimeout(() => {
+            setIsVisible(false);
+        }, 20);
+    };
+    const hoverHandlers = useVisHover(onHover, onHoverEnter, onHoverLeave, touchResponse);
+    const onFocus = (event) => {
+        if (event.eventPhase === Event.AT_TARGET || event.eventPhase === Event.BUBBLING_PHASE) {
+            targetRef.current = event.target;
+            setIsVisible(true);
+        }
+    };
+    const onBlur = () => {
+        setIsVisible(false);
+    };
+    const onContentPointerEnter = () => {
+        clearTimeout(toggleTimeoutRef.current);
+    };
+    const onKeyUp = (event) => {
+        if (event.code === 'ArrowUp' ||
+            event.code === 'ArrowDown' ||
+            event.code === 'ArrowRight' ||
+            event.code === 'ArrowLeft' ||
+            event.code === 'Tab') {
+            setIsVisible(true);
+        }
+    };
+    const onKeyDown = (event) => {
+        if (event.code === 'Escape') {
+            event.preventDefault();
+            setIsVisible(false);
+        }
+    };
+    const anchorRef = anchor === 'element' ? targetRef : { current: coords };
+    const datatipContent = isVisible && !!content && !isDisabled ? (jsx(Layer, { children: jsx(Floating, { anchorRef: anchorRef, placement: placement, offsetValue: offsetValue, flipOptions: {
+                crossAxis: anchor === 'pointer' ? true : false,
+                mainAxis: anchor === 'pointer' ? true : false
+            }, shiftOptions: { crossAxis: true, mainAxis: true }, children: jsx("div", { role: "tooltip", id: uniqueIdRef.current, className: classNames([
+                    styles.visDatatipStyle,
+                    defaultContainer === 'enabled' ? styles.borderEnabled : undefined
+                ]), style: defaultContainer === 'enabled' ? { borderColor } : undefined, onPointerEnter: onContentPointerEnter, onPointerLeave: onHoverLeave, children: content }) }) })) : null;
+    return {
+        datatipContent,
+        datatipProps: {
+            'aria-describedby': datatipContent !== null ? uniqueIdRef.current : undefined,
+            ...mergeProps(hoverHandlers, {
+                onKeyUp,
+                onKeyDown,
+                onFocus,
+                onBlur
+            })
+        }
+    };
+}
+
+export { useDatatip as u };
+//# sourceMappingURL=useDatatip-e65b4013.js.map

package/es/useDatatip-e65b4013.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDatatip-e65b4013.js","sources":["../../src/hooks/PRIVATE_useDatatip/useDatatip.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\nimport { ComponentChildren } from 'preact';\nimport { Layer } from '#UNSAFE_Layer';\nimport { Floating, Placement } from '#UNSAFE_Floating';\nimport { useRef, useState } from 'preact/hooks';\nimport { styles } from './themes/useDatatip.css';\nimport { useId } from '#hooks/UNSAFE_useId';\nimport { Property } from 'csstype';\nimport { DATATIP_OFFSET } from '#utils/UNSAFE_visUtils/datatipUtils';\nimport { useVisHover } from '#hooks/PRIVATE_useVisHover';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\nimport { classNames } from '#utils/UNSAFE_classNames';\nexport type { Dimension } from '#utils/UNSAFE_visTypes/common';\n\ntype DatatipProps = {\n  /**\n   * The datatip content.\n   */\n  content?: ComponentChildren;\n\n  /**\n   * Whether the datatip is anchored to pointer or element.\n   *\n   */\n  anchor: 'element' | 'pointer';\n\n  /**\n   * The offset from the anchor element or pointer.\n   */\n  offset?: {\n    mainAxis?: number;\n    crossAxis?: number;\n  };\n\n  /**\n   * The border color of the datatip.\n   */\n  borderColor?: Property.BorderColor;\n\n  /**\n   * The placement of datatip from anchor point.\n   */\n  placement?: Placement;\n\n  /**\n   * The touch response value.\n   */\n  touchResponse: 'touchStart' | 'touchHold';\n\n  /**\n   * Whether datatip is disabled\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Whether the datatip default border is enabled.\n   */\n  defaultContainer?: 'enabled' | 'disabled';\n};\n\n/**\n * The hook to support custom datatip in visualization components.\n */\nexport function useDatatip({\n  content,\n  placement = 'top-end-corner',\n  offset,\n  borderColor,\n  defaultContainer = 'enabled',\n  anchor,\n  touchResponse,\n  isDisabled\n}: DatatipProps) {\n  const uniqueIdRef = useRef<string>(useId());\n  const [coords, setCoords] = useState({ x: 0, y: 0 });\n  const offsetValue = offset || { mainAxis: DATATIP_OFFSET, crossAxis: -1 * DATATIP_OFFSET };\n  const [isVisible, setIsVisible] = useState(false);\n\n  const targetRef = useRef<HTMLElement | null>(null);\n  const toggleTimeoutRef = useRef<ReturnType<typeof setTimeout>>();\n\n  const onHover = (event: PointerEvent) => {\n    setCoords({ x: event.clientX, y: event.clientY });\n    setIsVisible(true);\n  };\n\n  const onHoverEnter = (event: PointerEvent, currentTarget: HTMLElement) => {\n    if (\n      event.pointerType === 'touch' ||\n      event.eventPhase === Event.AT_TARGET ||\n      event.eventPhase === Event.BUBBLING_PHASE\n    ) {\n      setCoords({ x: event.clientX, y: event.clientY });\n      targetRef.current = currentTarget;\n      setIsVisible(true);\n    }\n  };\n\n  const onHoverLeave = () => {\n    toggleTimeoutRef.current = setTimeout(() => {\n      setIsVisible(false);\n    }, 20);\n  };\n\n  const hoverHandlers = useVisHover(onHover, onHoverEnter, onHoverLeave, touchResponse);\n\n  const onFocus = (event: FocusEvent) => {\n    if (event.eventPhase === Event.AT_TARGET || event.eventPhase === Event.BUBBLING_PHASE) {\n      targetRef.current = event.target as HTMLElement;\n      setIsVisible(true);\n    }\n  };\n\n  const onBlur = () => {\n    setIsVisible(false);\n  };\n\n  const onContentPointerEnter = () => {\n    clearTimeout(toggleTimeoutRef.current);\n  };\n\n  const onKeyUp = (event: KeyboardEvent) => {\n    if (\n      event.code === 'ArrowUp' ||\n      event.code === 'ArrowDown' ||\n      event.code === 'ArrowRight' ||\n      event.code === 'ArrowLeft' ||\n      event.code === 'Tab'\n    ) {\n      setIsVisible(true);\n    }\n  };\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === 'Escape') {\n      event.preventDefault();\n      setIsVisible(false);\n    }\n  };\n\n  const anchorRef = anchor === 'element' ? targetRef : { current: coords };\n  const datatipContent =\n    isVisible && !!content && !isDisabled ? (\n      <Layer>\n        <Floating\n          anchorRef={anchorRef}\n          placement={placement}\n          offsetValue={offsetValue}\n          flipOptions={{\n            crossAxis: anchor === 'pointer' ? true : false,\n            mainAxis: anchor === 'pointer' ? true : false\n          }}\n          shiftOptions={{ crossAxis: true, mainAxis: true }}>\n          <div\n            role=\"tooltip\"\n            id={uniqueIdRef.current}\n            className={classNames([\n              styles.visDatatipStyle,\n              defaultContainer === 'enabled' ? styles.borderEnabled : undefined\n            ])}\n            style={defaultContainer === 'enabled' ? { borderColor } : undefined}\n            onPointerEnter={onContentPointerEnter}\n            onPointerLeave={onHoverLeave}>\n            {content}\n          </div>\n        </Floating>\n      </Layer>\n    ) : null;\n\n  return {\n    datatipContent,\n    datatipProps: {\n      'aria-describedby': datatipContent !== null ? uniqueIdRef.current : undefined,\n      ...mergeProps(hoverHandlers, {\n        onKeyUp,\n        onKeyDown,\n        onFocus,\n        onBlur\n      })\n    }\n  };\n}\n"],"names":["_jsx"],"mappings":"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"}

package/es/useDensity-969273f3.js

@@ -0,0 +1,19 @@
+/* @oracle/oraclejet-preact: undefined */
+import { useContext } from 'preact/hooks';
+import { E as EnvironmentContext } from './LayerHost-3cf255a6.js';
+import 'preact/jsx-runtime';
+import 'preact/compat';
+
+/**
+ * @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
+ */
+function useDensity() {
+    return useContext(EnvironmentContext).density;
+}
+
+export { useDensity as u };
+//# sourceMappingURL=useDensity-969273f3.js.map

package/es/useDensity-969273f3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDensity-969273f3.js","sources":["../../src/hooks/UNSAFE_useDensity/useDensity.ts"],"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 */\nimport { useContext } from 'preact/hooks';\nimport { EnvironmentContext } from '../../UNSAFE_Environment';\n\nexport function useDensity() {\n  return useContext(EnvironmentContext).density;\n}\n"],"names":[],"mappings":";;;;;;AAAA;;;;;;AAMG;SAIa,UAAU,GAAA;AACxB,IAAA,OAAO,UAAU,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC;AAChD;;;;"}

package/es/useDetectHorizontalOverflow-5895bc5a.js

@@ -0,0 +1,158 @@
+/* @oracle/oraclejet-preact: undefined */
+import { useState, useRef, useLayoutEffect, useCallback } from 'preact/hooks';
+import { u as useResizeObserver } from './useResizeObserver-13641643.js';
+import { g as getTabWidths } from './tabBarUtils-71bd0da1.js';
+
+//The minimum width of the overflowtabbaritem, it can be rendered with width greater than this based on available width
+const MORE_ITEM_WIDTH = 48;
+/**
+ * Implements overflow detection and calculation
+ */
+function useDetectHorizontalOverflow({ rootRef, keysArray, isTruncationDisabled = true }) {
+    const [visibleItemKeys, setVisibleItemKeys] = useState();
+    const [overflowItemKeys, setOverflowingItemKeys] = useState();
+    const trailingContentWidths = useRef(new Map());
+    const [tabMaxWidth, setTabMaxWidth] = useState();
+    // This state var is to only re-trigger the layout effect. Using it locally will not give the latest updated value hence we use current suffix vars
+    const [tabBarWidth, setTabBarWidth] = useState(0);
+    const isAllItemsTruncatedMax = useRef(false);
+    const isAllItemsTruncatedFinal = useRef(false);
+    const tabDimensions = useRef();
+    useLayoutEffect(() => {
+        // On initial render, tabBarWidth is 0 until ResizeObserver invokes its callback.
+        // Read the mounted TabBar's width so overflow can be calculated before that callback.
+        // A TabBar that is initially hidden can still measure as 0; ResizeObserver recalculates
+        // overflow when it becomes visible.
+        const tabBarWidthCurrent = rootRef?.current?.clientWidth;
+        const tabBarScrollWidthCurrent = rootRef?.current?.scrollWidth;
+        if (rootRef.current &&
+            keysArray &&
+            keysArray.length > 0 &&
+            tabBarWidthCurrent &&
+            tabBarWidthCurrent > 0) {
+            //Set tabBarWidth if not the current value
+            if (tabBarWidth !== tabBarWidthCurrent) {
+                setTabBarWidth(tabBarWidthCurrent);
+            }
+            if (tabMaxWidth === undefined) {
+                const isOverflow = tabBarWidthCurrent > 0 && tabBarWidthCurrent < tabBarScrollWidthCurrent;
+                //If there is no overflow maxWidth should be its prevState, prevState may also be undefined if truncation is disabled.
+                if (!isOverflow) {
+                    setTabMaxWidth((prevState) => {
+                        return prevState;
+                    });
+                }
+                else {
+                    //We need to calculate maxWidth only if truncation threshold limit is not reached
+                    if (!isAllItemsTruncatedMax.current) {
+                        const tabWidths = getTabWidths(rootRef.current, trailingContentWidths, isTruncationDisabled, tabBarWidthCurrent, isAllItemsTruncatedMax?.current, keysArray);
+                        //If all items have reached max treshold of truncation then we set it to true
+                        if (tabWidths.every((item) => item.hasReachedLimit)) {
+                            isAllItemsTruncatedMax.current = true;
+                        }
+                        tabDimensions.current = tabWidths;
+                    }
+                    //If all items have reached max treshold of truncation then we do not have update tabDimensions are maxWidth cannot go lesser than 96px.
+                    else {
+                        tabDimensions.current = tabDimensions.current?.map((item) => ({
+                            ...item
+                        }));
+                    }
+                }
+                //Set calculated maxWidths
+                if (!isTruncationDisabled) {
+                    const tabMaxWidthMap = new Map(tabDimensions.current?.map((tab) => [tab.key, (tab.maxWidth + 'px')]));
+                    setTabMaxWidth(tabMaxWidthMap);
+                }
+                //Overflow calculation
+                if (tabBarWidthCurrent < tabBarScrollWidthCurrent) {
+                    const arr = tabDimensions.current?.map((item) => item.cumulativeWidth);
+                    const lastIndex = arr.length - 1;
+                    //In addition to scrollWidth we check if the cumulative width of last item is greater than rootRef clientwidth
+                    if (arr && tabBarWidthCurrent < arr[lastIndex]) {
+                        // Reserve space for the More item before finding the last tab that fits.
+                        const availableWidth = tabBarWidthCurrent - MORE_ITEM_WIDTH;
+                        const closestIndex = searchClosest(arr, availableWidth);
+                        if (closestIndex != null) {
+                            // `closestIndex` is the last visible item index; `slice` takes an exclusive end index.
+                            const visibleItemCount = closestIndex + 1;
+                            setVisibleItemKeys(keysArray.slice(0, visibleItemCount));
+                            setOverflowingItemKeys(keysArray?.slice(visibleItemCount));
+                            //Once OverflowTabBarItem is rendered, i.e overflowItemKeys move into overflow menu then space is available, which can be re-dsitributed to truncated visible items. We also check if these visible items have already gone through this calculation otherwise we skip it to avoid infinite loop.
+                            if (visibleItemCount > 1 &&
+                                !isAllItemsTruncatedFinal.current &&
+                                !isTruncationDisabled) {
+                                const tabWidthsAfterOverflow = getTabWidths(rootRef.current, trailingContentWidths, isTruncationDisabled, tabBarWidthCurrent, isAllItemsTruncatedMax?.current);
+                                const tabMaxWidthMapAfterOverflow = new Map(tabWidthsAfterOverflow.map((tab) => [tab.key, (tab.maxWidth + 'px')]));
+                                //Flag to indicate that final truncation calculation has occured
+                                isAllItemsTruncatedFinal.current = true;
+                                setTabMaxWidth(tabMaxWidthMapAfterOverflow);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }, [keysArray, rootRef, tabBarWidth, tabMaxWidth, isTruncationDisabled]);
+    const updateTabBarWidth = useCallback((entry) => {
+        const rectWidth = Math.ceil(entry.contentRect.width);
+        // Sometimes entry.contentRect.width maybe a decimal value so we need to get absolute value
+        if (Math.abs(tabBarWidth - entry.contentRect.width) > 1) {
+            setTabBarWidth(entry.contentRect.width);
+            if (tabMaxWidth !== undefined && !isAllItemsTruncatedMax.current) {
+                setTabMaxWidth(undefined);
+            }
+            //Once there is change in the container width and there is no overflow we render all items as visible.
+            if (rectWidth >= rootRef.current?.scrollWidth) {
+                setVisibleItemKeys(keysArray);
+                setOverflowingItemKeys([]);
+            }
+            isAllItemsTruncatedFinal.current = false;
+        }
+    }, [tabBarWidth, tabMaxWidth, rootRef, keysArray]);
+    useResizeObserver(rootRef, updateTabBarWidth);
+    return shouldRenderAllTabs(visibleItemKeys, overflowItemKeys, keysArray)
+        ? {
+            visibleItemKeys: keysArray,
+            overflowItemKeys,
+            maxWidths: tabMaxWidth
+        }
+        : {
+            visibleItemKeys,
+            overflowItemKeys,
+            maxWidths: tabMaxWidth
+        };
+}
+//If the overflow + visible keys or their quantity are not the same as keysArray then we first render all the keys as visible
+const shouldRenderAllTabs = (visibleItemKeys, overflowItemKeys, keysArray) => {
+    if (visibleItemKeys == null)
+        return true;
+    else if (visibleItemKeys && overflowItemKeys && keysArray) {
+        const combinedArray = [...visibleItemKeys, ...overflowItemKeys];
+        const isNotEqual = combinedArray.length !== keysArray.length ||
+            JSON.stringify(keysArray) !== JSON.stringify(combinedArray);
+        return isNotEqual;
+    }
+    else
+        return false;
+};
+// Returns the index of the largest cumulative width that fits the available width.
+// The caller reserves the More-item width before calling this function.
+const searchClosest = (arr, availableWidth) => {
+    if (arr == null || availableWidth == null) {
+        return null;
+    }
+    let closestIndex = -1;
+    for (let index = 0; index < arr.length; index++) {
+        if (arr[index] <= availableWidth) {
+            closestIndex = index;
+        }
+        else {
+            break;
+        }
+    }
+    return closestIndex;
+};
+
+export { useDetectHorizontalOverflow as u };
+//# sourceMappingURL=useDetectHorizontalOverflow-5895bc5a.js.map

package/es/useDetectHorizontalOverflow-5895bc5a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDetectHorizontalOverflow-5895bc5a.js","sources":["../../src/hooks/PRIVATE_useDetectHorizontalOverflow/useDetectHorizontalOverflow.ts"],"sourcesContent":["import { RefObject } from 'preact';\nimport { useState, useLayoutEffect, useRef, StateUpdater, useCallback } from 'preact/hooks';\nimport { useResizeObserver } from '../../hooks/UNSAFE_useResizeObserver';\nimport { Size } from '../../utils/UNSAFE_size';\nimport { getTabWidths } from '../../utils/PRIVATE_tabBarUtils';\nimport type { TrailingContentInfo } from '../../utils/PRIVATE_tabBarUtils';\n\ntype TabDimensions<K extends string | number> = {\n  key: K;\n  maxWidth: number;\n  nonTextWidth?: number;\n  needsTruncation?: boolean;\n  cumulativeWidth?: number;\n};\n\n//The minimum width of the overflowtabbaritem, it can be rendered with width greater than this based on available width\nconst MORE_ITEM_WIDTH = 48;\n\nexport type useDetectOverflowProps<K extends string | number> = {\n  rootRef: RefObject<HTMLDivElement>;\n  keysArray: (K | undefined)[];\n  isTruncationDisabled?: boolean;\n};\n\n/**\n * Implements overflow detection and calculation\n */\nexport function useDetectHorizontalOverflow<K extends string | number>({\n  rootRef,\n  keysArray,\n  isTruncationDisabled = true\n}: useDetectOverflowProps<K>) {\n  const [visibleItemKeys, setVisibleItemKeys] = useState<(K | undefined)[]>();\n  const [overflowItemKeys, setOverflowingItemKeys] = useState<(K | undefined)[]>();\n  const trailingContentWidths = useRef(new Map<K, TrailingContentInfo>());\n  const [tabMaxWidth, setTabMaxWidth] = useState<Map<K, Size>>();\n  // This state var is to only re-trigger the layout effect. Using it locally will not give the latest updated value hence we use current suffix vars\n  const [tabBarWidth, setTabBarWidth] = useState<number>(0);\n  const isAllItemsTruncatedMax = useRef<boolean>(false);\n  const isAllItemsTruncatedFinal = useRef<boolean>(false);\n  const tabDimensions = useRef<TabDimensions<K>[]>();\n\n  useLayoutEffect(() => {\n    // On initial render, tabBarWidth is 0 until ResizeObserver invokes its callback.\n    // Read the mounted TabBar's width so overflow can be calculated before that callback.\n    // A TabBar that is initially hidden can still measure as 0; ResizeObserver recalculates\n    // overflow when it becomes visible.\n    const tabBarWidthCurrent = rootRef?.current?.clientWidth;\n    const tabBarScrollWidthCurrent = rootRef?.current?.scrollWidth;\n    if (\n      rootRef.current &&\n      keysArray &&\n      keysArray.length > 0 &&\n      tabBarWidthCurrent &&\n      tabBarWidthCurrent > 0\n    ) {\n      //Set tabBarWidth if not the current value\n      if (tabBarWidth !== tabBarWidthCurrent) {\n        setTabBarWidth(tabBarWidthCurrent);\n      }\n\n      if (tabMaxWidth === undefined) {\n        const isOverflow = tabBarWidthCurrent > 0 && tabBarWidthCurrent < tabBarScrollWidthCurrent!;\n\n        //If there is no overflow maxWidth should be its prevState, prevState may also be undefined if truncation is disabled.\n        if (!isOverflow) {\n          setTabMaxWidth((prevState) => {\n            return prevState;\n          });\n        } else {\n          //We need to calculate maxWidth only if truncation threshold limit is not reached\n          if (!isAllItemsTruncatedMax.current) {\n            const tabWidths = getTabWidths(\n              rootRef.current,\n              trailingContentWidths,\n              isTruncationDisabled,\n              tabBarWidthCurrent,\n              isAllItemsTruncatedMax?.current,\n              keysArray as K[]\n            );\n            //If all items have reached max treshold of truncation then we set it to true\n            if (tabWidths.every((item) => item.hasReachedLimit)) {\n              isAllItemsTruncatedMax.current = true;\n            }\n            tabDimensions.current = tabWidths as any;\n          }\n          //If all items have reached max treshold of truncation then we do not have update tabDimensions are maxWidth cannot go lesser than 96px.\n          else {\n            tabDimensions.current = tabDimensions.current?.map((item) => ({\n              ...item\n            }));\n          }\n        }\n\n        //Set calculated maxWidths\n        if (!isTruncationDisabled) {\n          const tabMaxWidthMap = new Map(\n            tabDimensions.current?.map((tab) => [tab.key, (tab.maxWidth + 'px') as Size])\n          );\n          setTabMaxWidth(tabMaxWidthMap);\n        }\n        //Overflow calculation\n        if (tabBarWidthCurrent < tabBarScrollWidthCurrent!) {\n          const arr = tabDimensions.current?.map((item) => item.cumulativeWidth) as number[];\n          const lastIndex = arr.length - 1;\n          //In addition to scrollWidth we check if the cumulative width of last item is greater than rootRef clientwidth\n          if (arr && tabBarWidthCurrent < arr[lastIndex]) {\n            // Reserve space for the More item before finding the last tab that fits.\n            const availableWidth = tabBarWidthCurrent - MORE_ITEM_WIDTH;\n            const closestIndex = searchClosest(arr, availableWidth);\n            if (closestIndex != null) {\n              // `closestIndex` is the last visible item index; `slice` takes an exclusive end index.\n              const visibleItemCount = closestIndex + 1;\n              setVisibleItemKeys(keysArray.slice(0, visibleItemCount));\n              setOverflowingItemKeys(keysArray?.slice(visibleItemCount));\n              //Once OverflowTabBarItem is rendered, i.e overflowItemKeys move into overflow menu then space is available, which can be re-dsitributed to truncated visible items. We also check if these visible items have already gone through this calculation otherwise we skip it to avoid infinite loop.\n              if (\n                visibleItemCount > 1 &&\n                !isAllItemsTruncatedFinal.current &&\n                !isTruncationDisabled\n              ) {\n                const tabWidthsAfterOverflow = getTabWidths(\n                  rootRef.current,\n                  trailingContentWidths,\n                  isTruncationDisabled,\n                  tabBarWidthCurrent,\n                  isAllItemsTruncatedMax?.current\n                );\n                const tabMaxWidthMapAfterOverflow = new Map(\n                  tabWidthsAfterOverflow.map((tab) => [tab.key, (tab.maxWidth + 'px') as Size])\n                );\n                //Flag to indicate that final truncation calculation has occured\n                isAllItemsTruncatedFinal.current = true;\n                setTabMaxWidth(tabMaxWidthMapAfterOverflow);\n              }\n            }\n          }\n        }\n      }\n    }\n  }, [keysArray, rootRef, tabBarWidth, tabMaxWidth, isTruncationDisabled]);\n\n  const updateTabBarWidth = useCallback(\n    (entry: { contentRect: { width: StateUpdater<number> } }) => {\n      const rectWidth = Math.ceil(entry.contentRect.width as number);\n      // Sometimes entry.contentRect.width maybe a decimal value so we need to get absolute value\n      if (Math.abs(tabBarWidth - (entry.contentRect.width as number)) > 1) {\n        setTabBarWidth(entry.contentRect.width);\n        if (tabMaxWidth !== undefined && !isAllItemsTruncatedMax.current) {\n          setTabMaxWidth(undefined);\n        }\n        //Once there is change in the container width and there is no overflow we render all items as visible.\n        if (rectWidth >= rootRef.current?.scrollWidth!) {\n          setVisibleItemKeys(keysArray);\n          setOverflowingItemKeys([]);\n        }\n        isAllItemsTruncatedFinal.current = false;\n      }\n    },\n    [tabBarWidth, tabMaxWidth, rootRef, keysArray]\n  );\n\n  useResizeObserver(rootRef, updateTabBarWidth);\n\n  return shouldRenderAllTabs(visibleItemKeys, overflowItemKeys, keysArray)\n    ? {\n        visibleItemKeys: keysArray,\n        overflowItemKeys,\n        maxWidths: tabMaxWidth\n      }\n    : {\n        visibleItemKeys,\n        overflowItemKeys,\n        maxWidths: tabMaxWidth\n      };\n}\n\n//If the overflow + visible keys or their quantity are not the same as keysArray then we first render all the keys as visible\nconst shouldRenderAllTabs = <K extends string | number>(\n  visibleItemKeys: (K | undefined)[] | undefined,\n  overflowItemKeys: (K | undefined)[] | undefined,\n  keysArray: (K | undefined)[]\n) => {\n  if (visibleItemKeys == null) return true;\n  else if (visibleItemKeys && overflowItemKeys && keysArray) {\n    const combinedArray = [...visibleItemKeys, ...overflowItemKeys];\n    const isNotEqual =\n      combinedArray.length !== keysArray.length ||\n      JSON.stringify(keysArray) !== JSON.stringify(combinedArray);\n    return isNotEqual;\n  } else return false;\n};\n\n// Returns the index of the largest cumulative width that fits the available width.\n// The caller reserves the More-item width before calling this function.\nconst searchClosest = (\n  arr: number[] | undefined,\n  availableWidth: number | undefined | null\n): number | null => {\n  if (arr == null || availableWidth == null) {\n    return null;\n  }\n\n  let closestIndex = -1;\n\n  for (let index = 0; index < arr.length; index++) {\n    if (arr[index] <= availableWidth) {\n      closestIndex = index;\n    } else {\n      break;\n    }\n  }\n\n  return closestIndex;\n};\n"],"names":[],"mappings":"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"}

package/es/useDisplayValue-614a904f.js

@@ -13,14 +13,14 @@ import './FormContext-55fb8000.js';
 import './FormFieldContext-47ca0c20.js';
 import { u as useFormFieldContext } from './useFormFieldContext-daf7a676.js';
 import './TabbableModeContext-7d8ad946.js';
-import { u as useTranslationBundle } from './useTranslationBundle-4822502f.js';
+import { u as useTranslationBundle } from './useTranslationBundle-bc6e0896.js';
 import './textAlign-ad252afa.js';
 import './FormControlUtilsStyles.styles.css';
 import './ReadonlyTextFieldInputStyles.styles.css';
 import './UNSAFE_TextField/themes/redwood/ReadonlyTextFieldInputVariants.css.js';
 import { T as TextField } from './TextField-9aba3df3.js';
 import './LiveRegionStyles.styles.css';
-import './LayerHost-7931b424.js';
+import './LayerHost-3cf255a6.js';
 import './UNSAFE_TextField/themes/TextFieldStyles.css.js';
 import './SkeletonStyles.styles.css';
 import './TextFieldLoadingStyles.styles.css';
@@ -28,20 +28,20 @@ import './TextFieldStyles.styles.css';
 import './UNSAFE_TextField/themes/redwood/TextFieldBaseTheme.styles.css';
 import './UNSAFE_TextField/themes/redwood/TextFieldVariants.css.js';
 import { a as DropdownArrow, r as renderItemText } from './useSelectCommon-34b231da.js';
-import { L as LiveRegion } from './LiveRegion-cebac18d.js';
+import { L as LiveRegion } from './LiveRegion-2e8830ae.js';
 import './LabelValueLayoutStyles.styles.css';
 import './LabelStyles.styles.css';
 import './UNSAFE_Label/themes/redwood/LabelBaseTheme.styles.css';
 import './UNSAFE_Label/themes/redwood/LabelVariants.css.js';
 import './UNSAFE_TextField/themes/FormLayoutStyles.css.js';
 import './UNSAFE_TextField/themes/redwood/FormLayoutBaseTheme.styles.css';
-import './Flex-03129963.js';
+import './Flex-fc483125.js';
 import './LayoutStyles.styles.css';
 import './InputGroupContext-20bdbd6e.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-7825620d.js';
+import './tooltipUtils-1e5f592e.js';
 
 function SelectSingleField({ children, hasInsideLabel, isBackButtonShown, isClearButtonShown, isDropdownArrowShown, onBackButtonClick, onClearButtonClick, onDropdownArrowClick, ...passThroughTextFieldProps }) {
     const translations = useTranslationBundle('@oracle/oraclejet-preact');

package/es/useExpandCollapse-51f9bb4b.js

@@ -0,0 +1,70 @@
+/* @oracle/oraclejet-preact: undefined */
+import { useCallback } from 'preact/hooks';
+import { u as useUser } from './useUser-e543b73c.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
+ */
+/**
+ * A hook that handles mouse and keyboard gesture that toggles the expanded state.
+ * @param keyExtractor
+ * @param expanded
+ * @param onToggle
+ * @returns
+ */
+function useExpandCollapse(keyExtractor, isExpanded, onToggle, allowArrowKeysOnly) {
+    const { direction } = useUser();
+    const onClick = useCallback((event) => {
+        if (allowArrowKeysOnly !== true && onToggle) {
+            handleToggle(event, keyExtractor, onToggle);
+        }
+    }, [keyExtractor, onToggle, allowArrowKeysOnly]);
+    const onKeyUp = useCallback((event) => {
+        if (allowArrowKeysOnly !== true && (event.key === 'Enter' || event.key === ' ')) {
+            handleToggle(event, keyExtractor, onToggle);
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            const isRtl = direction === 'rtl';
+            const isLeftArrow = event.key === 'ArrowLeft' && !isRtl;
+            handleArrowKey(isLeftArrow, event.target, isExpanded, keyExtractor, onToggle);
+            // arrow key might cause it to scroll horizontally
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, [keyExtractor, onToggle, isExpanded, direction, allowArrowKeysOnly]);
+    // prevent default (propagation) for keyDown to prevent scrolling the container
+    const onKeyDown = useCallback((event) => {
+        if (allowArrowKeysOnly !== true && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            event.preventDefault();
+        }
+    }, [allowArrowKeysOnly]);
+    return onToggle ? { onClick, onKeyDown, onKeyUp } : {};
+}
+const handleArrowKey = (isLeftArrow, target, isExpanded, keyExtractor, onToggle) => {
+    const itemKey = keyExtractor(target);
+    if (onToggle && itemKey) {
+        const contains = isExpanded(itemKey);
+        if ((isLeftArrow && contains) || (!isLeftArrow && !contains)) {
+            onToggle({ value: itemKey });
+        }
+    }
+};
+const handleToggle = (event, keyExtractor, onToggle) => {
+    const itemKey = keyExtractor(event.target);
+    if (onToggle && itemKey) {
+        onToggle({ value: itemKey });
+        if (event.type === 'click') {
+            event.stopPropagation();
+        }
+    }
+};
+
+export { useExpandCollapse as u };
+//# sourceMappingURL=useExpandCollapse-51f9bb4b.js.map

package/es/useExpandCollapse-51f9bb4b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExpandCollapse-51f9bb4b.js","sources":["../../src/hooks/PRIVATE_useListCommon/useExpandCollapse.ts"],"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 */\nimport { useCallback } from 'preact/hooks';\nimport { ToggleDetail } from '#UNSAFE_Collection';\nimport { useUser } from '#hooks/UNSAFE_useUser';\n\n/**\n * A hook that handles mouse and keyboard gesture that toggles the expanded state.\n * @param keyExtractor\n * @param expanded\n * @param onToggle\n * @returns\n */\nexport function useExpandCollapse<K>(\n  keyExtractor: (element: HTMLElement) => K | null,\n  isExpanded: (key: K) => boolean,\n  onToggle?: (detail: ToggleDetail<K>) => void,\n  allowArrowKeysOnly?: boolean\n) {\n  const { direction } = useUser();\n\n  const onClick = useCallback(\n    (event: MouseEvent) => {\n      if (allowArrowKeysOnly !== true && onToggle) {\n        handleToggle(event, keyExtractor, onToggle);\n      }\n    },\n    [keyExtractor, onToggle, allowArrowKeysOnly]\n  );\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent) => {\n      if (allowArrowKeysOnly !== true && (event.key === 'Enter' || event.key === ' ')) {\n        handleToggle(event, keyExtractor, onToggle);\n      } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n        const isRtl = direction === 'rtl';\n        const isLeftArrow = event.key === 'ArrowLeft' && !isRtl;\n        handleArrowKey(\n          isLeftArrow,\n          event.target as HTMLElement,\n          isExpanded,\n          keyExtractor,\n          onToggle\n        );\n        // arrow key might cause it to scroll horizontally\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [keyExtractor, onToggle, isExpanded, direction, allowArrowKeysOnly]\n  );\n\n  // prevent default (propagation) for keyDown to prevent scrolling the container\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (allowArrowKeysOnly !== true && (event.key === 'Enter' || event.key === ' ')) {\n        event.preventDefault();\n      } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n        event.preventDefault();\n      }\n    },\n    [allowArrowKeysOnly]\n  );\n\n  return onToggle ? { onClick, onKeyDown, onKeyUp } : {};\n}\n\nconst handleArrowKey = <K>(\n  isLeftArrow: boolean,\n  target: HTMLElement,\n  isExpanded: (key: K) => boolean,\n  keyExtractor: (element: HTMLElement) => K | null,\n  onToggle?: (detail: ToggleDetail<K>) => void\n) => {\n  const itemKey = keyExtractor(target);\n  if (onToggle && itemKey) {\n    const contains = isExpanded(itemKey);\n    if ((isLeftArrow && contains) || (!isLeftArrow && !contains)) {\n      onToggle({ value: itemKey });\n    }\n  }\n};\n\nconst handleToggle = <K>(\n  event: Event,\n  keyExtractor: (element: HTMLElement) => K | null,\n  onToggle?: (detail: ToggleDetail<K>) => void\n) => {\n  const itemKey = keyExtractor(event.target as HTMLElement);\n  if (onToggle && itemKey) {\n    onToggle({ value: itemKey });\n    if (event.type === 'click') {\n      event.stopPropagation();\n    }\n  }\n};\n"],"names":[],"mappings":";;;;AAAA;;;;;;AAMG;AAKH;;;;;;AAMG;AACG,SAAU,iBAAiB,CAC/B,YAAgD,EAChD,UAA+B,EAC/B,QAA4C,EAC5C,kBAA4B,EAAA;AAE5B,IAAA,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAC;AAEhC,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAAiB,KAAI;AACpB,QAAA,IAAI,kBAAkB,KAAK,IAAI,IAAI,QAAQ,EAAE;AAC3C,YAAA,YAAY,CAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;SAC7C;KACF,EACD,CAAC,YAAY,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CAC7C,CAAC;AAEF,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAAoB,KAAI;AACvB,QAAA,IAAI,kBAAkB,KAAK,IAAI,KAAK,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE;AAC/E,YAAA,YAAY,CAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;SAC7C;AAAM,aAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;AAClE,YAAA,MAAM,KAAK,GAAG,SAAS,KAAK,KAAK,CAAC;YAClC,MAAM,WAAW,GAAG,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC;AACxD,YAAA,cAAc,CACZ,WAAW,EACX,KAAK,CAAC,MAAqB,EAC3B,UAAU,EACV,YAAY,EACZ,QAAQ,CACT,CAAC;;YAEF,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;AACH,KAAC,EACD,CAAC,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,kBAAkB,CAAC,CACpE,CAAC;;AAGF,IAAA,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,KAAoB,KAAI;AACvB,QAAA,IAAI,kBAAkB,KAAK,IAAI,KAAK,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE;YAC/E,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;AAAM,aAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;YAClE,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;AACH,KAAC,EACD,CAAC,kBAAkB,CAAC,CACrB,CAAC;AAEF,IAAA,OAAO,QAAQ,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;AACzD,CAAC;AAED,MAAM,cAAc,GAAG,CACrB,WAAoB,EACpB,MAAmB,EACnB,UAA+B,EAC/B,YAAgD,EAChD,QAA4C,KAC1C;AACF,IAAA,MAAM,OAAO,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;AACrC,IAAA,IAAI,QAAQ,IAAI,OAAO,EAAE;AACvB,QAAA,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;AACrC,QAAA,IAAI,CAAC,WAAW,IAAI,QAAQ,MAAM,CAAC,WAAW,IAAI,CAAC,QAAQ,CAAC,EAAE;AAC5D,YAAA,QAAQ,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;SAC9B;KACF;AACH,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,KAAY,EACZ,YAAgD,EAChD,QAA4C,KAC1C;IACF,MAAM,OAAO,GAAG,YAAY,CAAC,KAAK,CAAC,MAAqB,CAAC,CAAC;AAC1D,IAAA,IAAI,QAAQ,IAAI,OAAO,EAAE;AACvB,QAAA,QAAQ,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;AAC7B,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YAC1B,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;KACF;AACH,CAAC;;;;"}