@oracle/oraclejet-preact 20.0.3 → 20.1.0

package/es/usePrefixSuffix-95fc00fd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrefixSuffix-95fc00fd.js","sources":["../../src/hooks/UNSAFE_usePrefixSuffix/usePrefixSuffix.tsx"],"sourcesContent":["import { merge } from '@oracle/oraclejet-internal-utilities/stringUtils';\nimport { useUser } from '../UNSAFE_useUser';\n\ntype Props = {\n  baseId: string;\n  hasEndContent?: boolean;\n  hasInsideLabel?: boolean;\n  hasStartContent?: boolean;\n  hasValue?: boolean;\n  isDisabled?: boolean;\n  isFocused?: boolean;\n  labelId?: string;\n  prefix?: string;\n  suffix?: string;\n  value?: string;\n};\n\ntype PrefixSuffixVariant = 'prefix' | 'suffix';\n\n// returns the prefix and/or suffix components\n// if the condition in which they should be shown is met.\nexport const usePrefixSuffix = ({\n  baseId,\n  hasEndContent,\n  hasInsideLabel,\n  hasStartContent,\n  hasValue,\n  isDisabled,\n  isFocused,\n  labelId,\n  prefix,\n  suffix,\n  value\n}: Props) => {\n  const { direction } = useUser();\n  // for accessibility, if you have a prefix, then you must have a prefixId\n  const prefixId = `${baseId}-prefix`;\n  const suffixId = `${baseId}-suffix`;\n  const hasPrefixText = prefix !== undefined && prefix !== '';\n  const hasSuffixText = suffix !== undefined && suffix !== '';\n  const shouldRenderPrefix = hasPrefixText && !isDisabled && (hasValue || isFocused);\n  const shouldRenderSuffix = hasSuffixText && !isDisabled && (hasValue || isFocused);\n\n  // get value and prefix/suffix if available and return as plain text.\n  const valuePrefixSuffix =\n    hasPrefixText || hasSuffixText ? getText(direction, hasValue, prefix, suffix, value) : value;\n  // get aria-labelledby if there is a prefix or suffix text\n  const ariaLabelledBy =\n    hasPrefixText || hasSuffixText\n      ? merge([labelId, hasPrefixText ? prefixId : undefined, hasSuffixText ? suffixId : undefined])\n      : undefined;\n  const prefixProps = {\n    id: prefixId,\n    hasEndContent,\n    hasInsideLabel,\n    hasStartContent,\n    isDisabled,\n    isFocused,\n    text: prefix ?? '',\n    variant: 'prefix' as PrefixSuffixVariant\n  };\n  const suffixProps = {\n    id: suffixId,\n    hasInsideLabel,\n    isDisabled,\n    isFocused,\n    text: suffix ?? '',\n    variant: 'suffix' as PrefixSuffixVariant\n  };\n\n  return {\n    shouldRenderPrefix,\n    shouldRenderSuffix,\n    prefixProps,\n    suffixProps,\n    valuePrefixSuffix,\n    ariaLabelledBy\n  };\n};\n\n/**\n * Returns the value to render in plain text, taking into account the prefix and suffix\n * and reading direction. Do not add a prefix/suffix if the component doesn't have a value.\n * @returns string | undefined\n */\nfunction getText(\n  direction: 'ltr' | 'rtl',\n  hasValue?: boolean,\n  prefix?: string,\n  suffix?: string,\n  value?: string\n) {\n  // Do not add a prefix/suffix if the component doesn't have a value.\n  if (!hasValue) {\n    return value;\n  }\n  // TODO: direction is 'ltr' even though the storybook is rtl.\n  // Test this when the storybook bug is fixed. ?src=confmacro\n  const isLTR = direction === 'ltr';\n  const plainPrefix = prefix === undefined ? `` : isLTR ? `${prefix} ` : ` ${prefix}`;\n  const plainSuffix = suffix === undefined ? `` : isLTR ? ` ${suffix}` : `${suffix} `;\n\n  const ltrPlainText = `${plainPrefix}${value}${plainSuffix}`;\n  const rtlPlainText = `${plainSuffix}${value}${plainPrefix}`;\n  return isLTR ? ltrPlainText : rtlPlainText;\n}\n"],"names":["merge"],"mappings":";;;;AAmBA;AACA;AACO,MAAM,eAAe,GAAG,CAAC,EAC9B,MAAM,EACN,aAAa,EACb,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,KAAK,EACC,KAAI;AACV,IAAA,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAC;;AAEhC,IAAA,MAAM,QAAQ,GAAG,CAAG,EAAA,MAAM,SAAS,CAAC;AACpC,IAAA,MAAM,QAAQ,GAAG,CAAG,EAAA,MAAM,SAAS,CAAC;IACpC,MAAM,aAAa,GAAG,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,EAAE,CAAC;IAC5D,MAAM,aAAa,GAAG,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,EAAE,CAAC;AAC5D,IAAA,MAAM,kBAAkB,GAAG,aAAa,IAAI,CAAC,UAAU,KAAK,QAAQ,IAAI,SAAS,CAAC,CAAC;AACnF,IAAA,MAAM,kBAAkB,GAAG,aAAa,IAAI,CAAC,UAAU,KAAK,QAAQ,IAAI,SAAS,CAAC,CAAC;;IAGnF,MAAM,iBAAiB,GACrB,aAAa,IAAI,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC;;AAE/F,IAAA,MAAM,cAAc,GAClB,aAAa,IAAI,aAAa;UAC1BA,CAAK,CAAC,CAAC,OAAO,EAAE,aAAa,GAAG,QAAQ,GAAG,SAAS,EAAE,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC;UAC5F,SAAS,CAAC;AAChB,IAAA,MAAM,WAAW,GAAG;AAClB,QAAA,EAAE,EAAE,QAAQ;QACZ,aAAa;QACb,cAAc;QACd,eAAe;QACf,UAAU;QACV,SAAS;QACT,IAAI,EAAE,MAAM,IAAI,EAAE;AAClB,QAAA,OAAO,EAAE,QAA+B;KACzC,CAAC;AACF,IAAA,MAAM,WAAW,GAAG;AAClB,QAAA,EAAE,EAAE,QAAQ;QACZ,cAAc;QACd,UAAU;QACV,SAAS;QACT,IAAI,EAAE,MAAM,IAAI,EAAE;AAClB,QAAA,OAAO,EAAE,QAA+B;KACzC,CAAC;IAEF,OAAO;QACL,kBAAkB;QAClB,kBAAkB;QAClB,WAAW;QACX,WAAW;QACX,iBAAiB;QACjB,cAAc;KACf,CAAC;AACJ,EAAE;AAEF;;;;AAIG;AACH,SAAS,OAAO,CACd,SAAwB,EACxB,QAAkB,EAClB,MAAe,EACf,MAAe,EACf,KAAc,EAAA;;IAGd,IAAI,CAAC,QAAQ,EAAE;AACb,QAAA,OAAO,KAAK,CAAC;KACd;;;AAGD,IAAA,MAAM,KAAK,GAAG,SAAS,KAAK,KAAK,CAAC;IAClC,MAAM,WAAW,GAAG,MAAM,KAAK,SAAS,GAAG,CAAE,CAAA,GAAG,KAAK,GAAG,CAAA,EAAG,MAAM,CAAA,CAAA,CAAG,GAAG,CAAA,CAAA,EAAI,MAAM,CAAA,CAAE,CAAC;IACpF,MAAM,WAAW,GAAG,MAAM,KAAK,SAAS,GAAG,CAAE,CAAA,GAAG,KAAK,GAAG,CAAA,CAAA,EAAI,MAAM,CAAA,CAAE,GAAG,CAAA,EAAG,MAAM,CAAA,CAAA,CAAG,CAAC;IAEpF,MAAM,YAAY,GAAG,CAAG,EAAA,WAAW,GAAG,KAAK,CAAA,EAAG,WAAW,CAAA,CAAE,CAAC;IAC5D,MAAM,YAAY,GAAG,CAAG,EAAA,WAAW,GAAG,KAAK,CAAA,EAAG,WAAW,CAAA,CAAE,CAAC;IAC5D,OAAO,KAAK,GAAG,YAAY,GAAG,YAAY,CAAC;AAC7C;;;;"}

package/es/useRadioFocusManager-d9eecfb4.js

@@ -0,0 +1,108 @@
+/* @oracle/oraclejet-preact: undefined */
+import { useRef, useCallback, useEffect } from 'preact/hooks';
+import { u as useUser } from './useUser-e543b73c.js';
+import { g as getClientHints } from './clientHints-a42b510c.js';
+
+/**
+ * A hook to manage focus for readonly radio elements within a container. In Safari,
+ * the manager will not wrap focus from first and last element when navigating with arrow keys,
+ * while other browsers will. While in Safari and RTL mode, it will also match the behavior of
+ * useCollectionFocusRing by not reversing the left/right arrow key behavior.
+ *
+ * Manager will automatically reset whenever containerRef or children change. However, it will
+ * retain the current focus index if it does not exceed the number of focusable elements.
+ * In that case, it will reset to the last element.
+ *
+ * @param containerRef - A ref to the container element that holds the radio elements.
+ * @param children - The children within the container.
+ * @returns An object with methods to manage focus among the radio elements.
+ */
+const useRadioFocusManager = (containerRef, children) => {
+    // array of focusable elements
+    const focusableElementsRef = useRef([]);
+    // current index
+    const focusIndexRef = useRef(0);
+    // determine if the direction is RTL for arrow key handling
+    const isRtl = useUser().direction === 'rtl';
+    const isSafari = getClientHints().browser === 'safari';
+    // move focus to the next radio element
+    const focusNext = useCallback(() => {
+        const elements = focusableElementsRef.current;
+        if (!elements.length)
+            return;
+        const curr = focusIndexRef.current;
+        // clamp on Safari to match arrow key behavior in useCollectionFocusRing, wrap elsewhere
+        const nextIndex = isSafari
+            ? Math.min(curr + 1, elements.length - 1)
+            : (curr + 1) % elements.length;
+        focusIndexRef.current = nextIndex;
+        elements[nextIndex]?.focus();
+    }, [isSafari]);
+    // move focus to the previous radio element
+    const focusPrevious = useCallback(() => {
+        const elements = focusableElementsRef.current;
+        if (!elements.length)
+            return;
+        const curr = focusIndexRef.current;
+        // clamp on Safari to match arrow key behavior in useCollectionFocusRing, wrap elsewhere
+        const prevIndex = isSafari
+            ? Math.max(curr - 1, 0)
+            : (curr - 1 + elements.length) % elements.length;
+        focusIndexRef.current = prevIndex;
+        elements[prevIndex]?.focus();
+    }, [isSafari]);
+    // explicitly set the focus index
+    const setFocusIndex = useCallback((index) => {
+        focusIndexRef.current = index;
+    }, []);
+    // reset focus to the element indicated by the current index, mainly for testing purposes
+    const resetFocus = useCallback(() => {
+        const elements = focusableElementsRef.current;
+        if (!elements.length)
+            return;
+        elements[focusIndexRef.current].focus();
+    }, []);
+    // handle ArrowUp/Down/Left/Right key presses to navigate radios
+    const handleArrowKeyPress = useCallback((event) => {
+        const { key } = event;
+        const handler = {
+            ArrowDown: focusNext,
+            ArrowUp: focusPrevious,
+            ArrowRight: isRtl && !isSafari ? focusPrevious : focusNext,
+            ArrowLeft: isRtl && !isSafari ? focusNext : focusPrevious
+        };
+        const action = handler[key];
+        if (action) {
+            event.preventDefault();
+            action();
+        }
+    }, [focusNext, focusPrevious, isRtl, isSafari]);
+    const resetManager = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        const elements = containerRef.current.querySelectorAll('[data-checked]');
+        focusableElementsRef.current = Array.from(elements);
+        // reset index to last item if previous index is greater than the new items
+        if (focusIndexRef.current >= focusableElementsRef.current.length) {
+            setFocusIndex(focusableElementsRef.current.length - 1);
+        }
+    }, [containerRef, setFocusIndex]);
+    // reset the manager whenever children change
+    useEffect(() => {
+        const container = containerRef?.current;
+        if (!container)
+            return;
+        resetManager();
+    }, [resetManager, children, containerRef]);
+    return {
+        focusNext,
+        focusPrevious,
+        resetFocus,
+        setFocusIndex,
+        focusIndex: focusIndexRef.current,
+        handleArrowKeyPress
+    };
+};
+
+export { useRadioFocusManager as u };
+//# sourceMappingURL=useRadioFocusManager-d9eecfb4.js.map

package/es/useRadioFocusManager-d9eecfb4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRadioFocusManager-d9eecfb4.js","sources":["../../src/hooks/PRIVATE_useRadioFocusManager/useRadioFocusManager.ts"],"sourcesContent":["import type { ComponentChildren, RefObject } from 'preact';\nimport { useCallback, useEffect, useRef } from 'preact/hooks';\nimport { useUser } from '#hooks/UNSAFE_useUser';\nimport { getClientHints } from '#utils/PRIVATE_clientHints';\n\n/**\n * A hook to manage focus for readonly radio elements within a container. In Safari,\n * the manager will not wrap focus from first and last element when navigating with arrow keys,\n * while other browsers will. While in Safari and RTL mode, it will also match the behavior of\n * useCollectionFocusRing by not reversing the left/right arrow key behavior.\n *\n * Manager will automatically reset whenever containerRef or children change. However, it will\n * retain the current focus index if it does not exceed the number of focusable elements.\n * In that case, it will reset to the last element.\n *\n * @param containerRef - A ref to the container element that holds the radio elements.\n * @param children - The children within the container.\n * @returns An object with methods to manage focus among the radio elements.\n */\nconst useRadioFocusManager = (\n  containerRef: RefObject<HTMLDivElement | null>,\n  children: ComponentChildren\n) => {\n  // array of focusable elements\n  const focusableElementsRef = useRef<HTMLElement[]>([]);\n\n  // current index\n  const focusIndexRef = useRef(0);\n\n  // determine if the direction is RTL for arrow key handling\n  const isRtl = useUser().direction === 'rtl';\n  const isSafari = getClientHints().browser === 'safari';\n\n  // move focus to the next radio element\n  const focusNext = useCallback(() => {\n    const elements = focusableElementsRef.current;\n    if (!elements.length) return;\n\n    const curr = focusIndexRef.current;\n    // clamp on Safari to match arrow key behavior in useCollectionFocusRing, wrap elsewhere\n    const nextIndex = isSafari\n      ? Math.min(curr + 1, elements.length - 1)\n      : (curr + 1) % elements.length;\n\n    focusIndexRef.current = nextIndex;\n    elements[nextIndex]?.focus();\n  }, [isSafari]);\n\n  // move focus to the previous radio element\n  const focusPrevious = useCallback(() => {\n    const elements = focusableElementsRef.current;\n    if (!elements.length) return;\n\n    const curr = focusIndexRef.current;\n    // clamp on Safari to match arrow key behavior in useCollectionFocusRing, wrap elsewhere\n    const prevIndex = isSafari\n      ? Math.max(curr - 1, 0)\n      : (curr - 1 + elements.length) % elements.length;\n\n    focusIndexRef.current = prevIndex;\n    elements[prevIndex]?.focus();\n  }, [isSafari]);\n\n  // explicitly set the focus index\n  const setFocusIndex = useCallback((index: number) => {\n    focusIndexRef.current = index;\n  }, []);\n\n  // reset focus to the element indicated by the current index, mainly for testing purposes\n  const resetFocus = useCallback(() => {\n    const elements = focusableElementsRef.current;\n    if (!elements.length) return;\n    elements[focusIndexRef.current].focus();\n  }, []);\n\n  // handle ArrowUp/Down/Left/Right key presses to navigate radios\n  const handleArrowKeyPress = useCallback(\n    (event: KeyboardEvent) => {\n      const { key } = event;\n\n      const handler: Record<string, (() => void) | undefined> = {\n        ArrowDown: focusNext,\n        ArrowUp: focusPrevious,\n        ArrowRight: isRtl && !isSafari ? focusPrevious : focusNext,\n        ArrowLeft: isRtl && !isSafari ? focusNext : focusPrevious\n      };\n\n      const action = handler[key];\n      if (action) {\n        event.preventDefault();\n        action();\n      }\n    },\n    [focusNext, focusPrevious, isRtl, isSafari]\n  );\n\n  const resetManager = useCallback(() => {\n    if (!containerRef.current) return;\n    const elements = containerRef.current.querySelectorAll(\n      '[data-checked]'\n    ) as NodeListOf<HTMLElement>;\n    focusableElementsRef.current = Array.from(elements);\n\n    // reset index to last item if previous index is greater than the new items\n    if (focusIndexRef.current >= focusableElementsRef.current.length) {\n      setFocusIndex(focusableElementsRef.current.length - 1);\n    }\n  }, [containerRef, setFocusIndex]);\n\n  // reset the manager whenever children change\n  useEffect(() => {\n    const container = containerRef?.current;\n    if (!container) return;\n    resetManager();\n  }, [resetManager, children, containerRef]);\n\n  return {\n    focusNext,\n    focusPrevious,\n    resetFocus,\n    setFocusIndex,\n    focusIndex: focusIndexRef.current,\n    handleArrowKeyPress\n  };\n};\n\nexport { useRadioFocusManager };\n"],"names":[],"mappings":"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"}

package/es/useReorderableItem-06bd7a7b.js

@@ -0,0 +1,296 @@
+/* @oracle/oraclejet-preact: undefined */
+import { useRef, useState, useCallback, useEffect } from 'preact/hooks';
+import { u as useId } from './useId-03dbfdf0.js';
+import { u as useUser } from './useUser-e543b73c.js';
+import { u as useTranslationBundle } from './useTranslationBundle-bc6e0896.js';
+import { g as getClientHints } from './clientHints-a42b510c.js';
+import { c as getItemKeysArray, a as getKey } from './collectionUtils-5313629f.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import { c as createDragImage } from './dndUtils-deb68797.js';
+import { styles } from './hooks/PRIVATE_useReorderable/themes/ReorderableItemStyles.css.js';
+import { i as isKeyDefined } from './keys-49c92dbb.js';
+
+/**
+ * Implements keyboard reorder behavior for list-like components, e.g. TabBar, ListView, CardView
+ */
+function useReorderable(options) {
+    const { onReorder, rootRef, itemSelector, isDisabled, columns } = options;
+    const currentItemKey = useRef();
+    const { direction } = useUser();
+    const isRtl = direction === 'rtl';
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const reorderInstructionsId = 'reorderable_' + useId();
+    const { deviceType, platform } = getClientHints();
+    const keyPressed = platform === 'windows' ? translations.accControlKey() : translations.accCommandKey();
+    const reorderInstructions = deviceType === 'phone' || deviceType === 'tablet'
+        ? ''
+        : translations.accReorderInstructions({
+            keyPressed: keyPressed
+        });
+    const [reorderStatus, setReorderStatus] = useState('');
+    const onKeyDown = useCallback((e) => {
+        const keyHandlers = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+        if ((e.metaKey || e.ctrlKey) &&
+            e.shiftKey &&
+            keyHandlers.includes(e.key) &&
+            onReorder &&
+            rootRef.current) {
+            if (e.metaKey) {
+                e.preventDefault();
+            }
+            const itemKeysArray = getItemKeysArray(rootRef.current, itemSelector);
+            const newArray = [...itemKeysArray];
+            const lastIndex = newArray.length - 1;
+            const currentItemIndex = newArray.indexOf(currentItemKey.current);
+            // get reference item index and reordered keys
+            const referenceItemIndex = getReferenceItemIndex(e.key, isRtl, currentItemIndex, lastIndex, columns);
+            if (referenceItemIndex !== undefined && currentItemIndex !== referenceItemIndex) {
+                const referenceKey = newArray[referenceItemIndex]?.toString();
+                newArray.splice(currentItemIndex, 1);
+                newArray.splice(referenceItemIndex, 0, currentItemKey.current);
+                onReorder?.({
+                    reorderedKeys: newArray,
+                    itemKeys: [currentItemKey.current],
+                    // If the dragged items were dropped at the very beginning, the referenceKey will be null.
+                    referenceKey: referenceItemIndex === 0 ? null : newArray[referenceItemIndex - 1]
+                });
+                // set acc status
+                const isPrev = e.key === 'ArrowLeft' || e.key === 'ArrowUp' ? true : false;
+                const position = isPrev
+                    ? translations.accPositionBefore()
+                    : translations.accPositionAfter();
+                const itemKeyString = currentItemKey?.current?.toString();
+                if (referenceKey && position && itemKeyString) {
+                    setReorderStatus(translations.accAnnounceMovedKey({
+                        itemKey: itemKeyString,
+                        position: position,
+                        referenceKey: referenceKey
+                    }));
+                }
+            }
+        }
+    }, [currentItemKey, onReorder, columns, isRtl, itemSelector, rootRef, translations]);
+    const eventProps = isDisabled ? {} : { onKeyDown };
+    return {
+        reorderProps: eventProps,
+        reorderContext: {
+            currentItemKey
+        },
+        reorderInstructionsId,
+        reorderInstructions,
+        reorderStatus
+    };
+}
+/**
+ * A helper function to get referenceItemIndex during keyboard reordering
+ *
+ * @param eventKey the arrow event keys
+ * @param isRtl whether RTL is enabled
+ * @param currentItemIndex the index of current item
+ * @param lastIndex the last index
+ * @param columns optional param to specify the number of columns, for keyboard reordering by arrow up/down keys.
+ */
+const getReferenceItemIndex = (eventKey, isRtl, currentItemIndex, lastIndex, columns) => {
+    const leftDropIndex = currentItemIndex > 0 ? currentItemIndex - 1 : 0;
+    const rightDropIndex = currentItemIndex < lastIndex ? currentItemIndex + 1 : lastIndex;
+    switch (eventKey) {
+        case 'ArrowLeft':
+            return isRtl ? rightDropIndex : leftDropIndex;
+        case 'ArrowRight':
+            return isRtl ? leftDropIndex : rightDropIndex;
+        case 'ArrowUp':
+            if (columns) {
+                // if the current item is at the top row, arrow up should not move anywhere
+                return currentItemIndex < columns ? currentItemIndex : currentItemIndex - columns;
+            }
+        case 'ArrowDown':
+            if (columns) {
+                // if the current item is at the bottom row, arrow down should not move anywhere
+                return currentItemIndex > lastIndex - columns
+                    ? currentItemIndex
+                    : currentItemIndex + columns;
+            }
+        default:
+            return undefined;
+    }
+};
+
+/**
+ * Implements mouse reorder behavior for list-like components, e.g. TabBar, ListView, CardView
+ */
+function useReorderableItem(options) {
+    const { isDisabled, dragKey, setDragKey, onReorder, ref, rootRef, itemStyles, getItem, setTransferData, itemSelector, isVertical } = options;
+    const [itemKey, setItemKey] = useState(undefined);
+    // This is used to set the current itemKey and that in turn sets isDragged class. It needs to be updated everytime dragKey changes because otherwise itemKey will be the previously draggedKey
+    useEffect(() => {
+        if (ref.current) {
+            const item = getItem();
+            const key = item != null ? getKey(item) : undefined;
+            setItemKey(key);
+        }
+    }, [dragKey]);
+    const [position, setPosition] = useState();
+    const pendingPositionRef = useRef();
+    const dragImgRef = useRef(undefined);
+    const itemDraggerClasses = classNames([styles.itemDragger, itemStyles.itemDragger]);
+    const { direction } = useUser();
+    const isRtl = direction === 'rtl';
+    /**
+     * Drag start handler
+     * The data-oj-draggable attribute need to be required and set to true to the target element. This
+     * attribute is used to identify which element can act as drag handles during the drag and drop process.
+     */
+    const handleDragStart = useCallback((e) => {
+        const item = getItem();
+        let targetElement = e.target;
+        const currentDragKey = item != null ? getKey(item) : undefined;
+        let dragHandle;
+        while (targetElement) {
+            //data-oj-draggable attribute is only to use to draggable element
+            if (targetElement.hasAttribute('data-oj-draggable')) {
+                dragHandle = targetElement;
+                break;
+            }
+            else if (targetElement === item) {
+                break;
+            }
+            targetElement = targetElement.parentElement;
+        }
+        if (!dragHandle) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else {
+            if (ref?.current && setDragKey) {
+                dragImgRef.current = createDragImage(ref.current, itemDraggerClasses);
+                if (ref.current !== dragHandle) {
+                    e?.dataTransfer?.setDragImage(dragImgRef.current, dragHandle.offsetLeft + dragHandle.offsetWidth / 2, dragHandle.offsetTop + dragHandle.offsetHeight / 2);
+                }
+                else {
+                    e?.dataTransfer?.setDragImage(dragImgRef.current, dragHandle.offsetWidth / 2, dragHandle.offsetHeight / 2);
+                }
+                setTransferData(e);
+                setDragKey(currentDragKey);
+            }
+        }
+    }, [getItem, setTransferData, itemDraggerClasses, ref, setDragKey]);
+    const handleDragOver = useCallback((e) => {
+        if (isKeyDefined(dragKey)) {
+            e.preventDefault();
+        }
+    }, [dragKey]);
+    //Once drag is over, reset styling of dragged item to it's original styling
+    const handleDragEnd = useCallback(() => {
+        setDragKey?.(undefined);
+        document.body.removeChild(dragImgRef.current);
+    }, [setDragKey]);
+    // detect drop target position on the overlay divs and render drop target
+    const handleDragEnterBeforeZone = () => {
+        setPosition('before');
+        pendingPositionRef.current = 'before';
+    };
+    const handleDragLeaveBeforeZone = () => {
+        if (pendingPositionRef.current === 'before') {
+            setPosition(undefined);
+        }
+    };
+    const handleDragEnterAfterZone = () => {
+        setPosition('after');
+        pendingPositionRef.current = 'after';
+    };
+    const handleDragLeaveAfterZone = () => {
+        if (pendingPositionRef.current === 'after') {
+            setPosition(undefined);
+        }
+    };
+    const handleDrop = useCallback(() => {
+        if (rootRef?.current) {
+            const item = getItem();
+            const currentDropKey = item != null ? getKey(item) : undefined;
+            const reference = currentDropKey;
+            const itemKeys = getItemKeysArray(rootRef.current, itemSelector);
+            let insertPos;
+            const newArray = [...itemKeys];
+            const dragIndex = newArray.indexOf(dragKey);
+            if (reference != null) {
+                const dropIndex = newArray.indexOf(reference);
+                if (dragIndex != null && dropIndex != null && dragIndex != dropIndex) {
+                    if (!isRtl) {
+                        if (dragIndex < dropIndex) {
+                            insertPos = position === 'before' ? dropIndex - 1 : dropIndex;
+                        }
+                        else {
+                            insertPos = position === 'before' ? dropIndex : dropIndex + 1;
+                        }
+                    }
+                    else {
+                        if (dragIndex < dropIndex) {
+                            insertPos = position === 'before' ? dropIndex : dropIndex - 1;
+                        }
+                        else {
+                            insertPos = position === 'before' ? dropIndex + 1 : dropIndex;
+                        }
+                    }
+                }
+            }
+            if (insertPos !== undefined && dragIndex !== insertPos) {
+                const sourceData = itemKeys[dragIndex];
+                newArray.splice(dragIndex, 1);
+                newArray.splice(insertPos, 0, sourceData);
+                onReorder?.({
+                    reorderedKeys: newArray,
+                    itemKeys: [dragKey],
+                    // If the dragged items were dropped at the very beginning, the referenceKey will be null.
+                    referenceKey: insertPos === 0 ? null : newArray[insertPos - 1]
+                });
+                setPosition(undefined);
+                setDragKey?.(undefined);
+            }
+        }
+    }, [dragKey, position, getItem, isRtl, itemSelector, onReorder, rootRef, setDragKey]);
+    if (isDisabled) {
+        return {};
+    }
+    //change dragged item visual to appear disable
+    const isDragged = itemKey != null && itemKey === dragKey;
+    const dndItemClasses = classNames([styles.itemDnd, isDragged && styles.itemDragged]);
+    const itemOverlayClassesBefore = classNames([
+        itemStyles.itemOverlayFront,
+        isVertical ? styles.itemOverlayVertical : styles.itemOverlay,
+        position === 'before' && styles.itemOverlayBefore,
+        position === 'before' && isRtl && styles.itemOverlayBeforeRtl
+    ]);
+    const itemOverlayClassesAfter = classNames([
+        itemStyles.itemOverlayFront,
+        itemStyles.itemOverlayRear,
+        isVertical ? styles.itemOverlayVertical : styles.itemOverlay,
+        position === 'after' && styles.itemOverlayAfter,
+        position === 'after' && isRtl && styles.itemOverlayAfterRtl
+    ]);
+    return {
+        rootProps: mergeProps({
+            ref: ref,
+            onDragStart: handleDragStart,
+            onDragEnd: handleDragEnd,
+            onDragOver: handleDragOver,
+            onDrop: handleDrop,
+            isDisabled: isDisabled,
+            class: dndItemClasses
+        }),
+        isDragged: isDragged,
+        overlayZoneBeforeProps: mergeProps({
+            onDragEnter: handleDragEnterBeforeZone,
+            onDragLeave: handleDragLeaveBeforeZone,
+            class: itemOverlayClassesBefore
+        }),
+        overlayZoneAfterProps: mergeProps({
+            onDragEnter: handleDragEnterAfterZone,
+            onDragLeave: handleDragLeaveAfterZone,
+            class: itemOverlayClassesAfter
+        })
+    };
+}
+
+export { useReorderableItem as a, useReorderable as u };
+//# sourceMappingURL=useReorderableItem-06bd7a7b.js.map

package/es/useReorderableItem-06bd7a7b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReorderableItem-06bd7a7b.js","sources":["../../src/hooks/PRIVATE_useReorderable/useReorderable.ts","../../src/hooks/PRIVATE_useReorderable/useReorderableItem.ts"],"sourcesContent":["import type { RefObject } from 'preact';\nimport { useRef, useCallback, useState } from 'preact/hooks';\nimport { useId } from '#hooks/UNSAFE_useId';\nimport { useUser } from '#hooks/UNSAFE_useUser';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { getClientHints } from '#utils/PRIVATE_clientHints';\nimport { getItemKeysArray } from '#utils/PRIVATE_collectionUtils';\nimport { BundleType } from '#resources/nls/bundle';\nimport { ReorderProps } from '#UNSAFE_Collection/Reorderable.types';\n\ntype useReorderableProps<K> = ReorderProps<K> & {\n  rootRef: RefObject<HTMLDivElement>;\n  itemSelector: string;\n  isDisabled?: boolean;\n  columns?: number;\n};\n\n/**\n * Implements keyboard reorder behavior for list-like components, e.g. TabBar, ListView, CardView\n */\nexport function useReorderable<K extends string | number>(options: useReorderableProps<K>) {\n  const { onReorder, rootRef, itemSelector, isDisabled, columns } = options;\n\n  const currentItemKey = useRef<K | undefined>();\n  const { direction } = useUser();\n  const isRtl = direction === 'rtl';\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const reorderInstructionsId = 'reorderable_' + useId();\n  const { deviceType, platform } = getClientHints();\n  const keyPressed =\n    platform === 'windows' ? translations.accControlKey() : translations.accCommandKey();\n  const reorderInstructions =\n    deviceType === 'phone' || deviceType === 'tablet'\n      ? ''\n      : translations.accReorderInstructions({\n          keyPressed: keyPressed\n        });\n  const [reorderStatus, setReorderStatus] = useState<string | undefined>('');\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      const keyHandlers = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];\n      if (\n        (e.metaKey || e.ctrlKey) &&\n        e.shiftKey &&\n        keyHandlers.includes(e.key) &&\n        onReorder &&\n        rootRef.current\n      ) {\n        if (e.metaKey) {\n          e.preventDefault();\n        }\n        const itemKeysArray = getItemKeysArray(rootRef.current, itemSelector);\n        const newArray = [...itemKeysArray];\n        const lastIndex = newArray.length - 1;\n        const currentItemIndex = newArray.indexOf(currentItemKey.current);\n        // get reference item index and reordered keys\n        const referenceItemIndex = getReferenceItemIndex(\n          e.key,\n          isRtl,\n          currentItemIndex,\n          lastIndex,\n          columns\n        );\n        if (referenceItemIndex !== undefined && currentItemIndex !== referenceItemIndex) {\n          const referenceKey = newArray[referenceItemIndex]?.toString();\n          newArray.splice(currentItemIndex, 1);\n          newArray.splice(referenceItemIndex as number, 0, currentItemKey.current);\n          onReorder?.({\n            reorderedKeys: newArray as K[],\n            itemKeys: [currentItemKey.current as K],\n            // If the dragged items were dropped at the very beginning, the referenceKey will be null.\n            referenceKey: referenceItemIndex === 0 ? null : (newArray[referenceItemIndex - 1] as K)\n          });\n          // set acc status\n          const isPrev = e.key === 'ArrowLeft' || e.key === 'ArrowUp' ? true : false;\n          const position = isPrev\n            ? translations.accPositionBefore()\n            : translations.accPositionAfter();\n          const itemKeyString = currentItemKey?.current?.toString();\n          if (referenceKey && position && itemKeyString) {\n            setReorderStatus(\n              translations.accAnnounceMovedKey({\n                itemKey: itemKeyString,\n                position: position,\n                referenceKey: referenceKey\n              })\n            );\n          }\n        }\n      }\n    },\n    [currentItemKey, onReorder, columns, isRtl, itemSelector, rootRef, translations]\n  );\n\n  const eventProps = isDisabled ? {} : { onKeyDown };\n\n  return {\n    reorderProps: eventProps,\n    reorderContext: {\n      currentItemKey\n    },\n    reorderInstructionsId,\n    reorderInstructions,\n    reorderStatus\n  } as const;\n}\n\n/**\n * A helper function to get referenceItemIndex during keyboard reordering\n *\n * @param eventKey the arrow event keys\n * @param isRtl whether RTL is enabled\n * @param currentItemIndex the index of current item\n * @param lastIndex the last index\n * @param columns optional param to specify the number of columns, for keyboard reordering by arrow up/down keys.\n */\nconst getReferenceItemIndex = (\n  eventKey: string,\n  isRtl: boolean,\n  currentItemIndex: number,\n  lastIndex: number,\n  columns?: number\n) => {\n  const leftDropIndex = currentItemIndex > 0 ? currentItemIndex - 1 : 0;\n  const rightDropIndex = currentItemIndex < lastIndex ? currentItemIndex + 1 : lastIndex;\n  switch (eventKey) {\n    case 'ArrowLeft':\n      return isRtl ? rightDropIndex : leftDropIndex;\n    case 'ArrowRight':\n      return isRtl ? leftDropIndex : rightDropIndex;\n    case 'ArrowUp':\n      if (columns) {\n        // if the current item is at the top row, arrow up should not move anywhere\n        return currentItemIndex < columns ? currentItemIndex : currentItemIndex - columns;\n      }\n    case 'ArrowDown':\n      if (columns) {\n        // if the current item is at the bottom row, arrow down should not move anywhere\n        return currentItemIndex > lastIndex - columns\n          ? currentItemIndex\n          : currentItemIndex + columns;\n      }\n    default:\n      return undefined;\n  }\n};\n","import type { RefObject } from 'preact';\nimport { useState, useRef, useCallback, useEffect } from 'preact/hooks';\nimport { classNames } from '#utils/UNSAFE_classNames';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\nimport { createDragImage } from '#utils/PRIVATE_dndUtils';\nimport { getKey, getItemKeysArray } from '#utils/PRIVATE_collectionUtils';\nimport { useUser } from '#hooks/UNSAFE_useUser';\nimport { ReorderableItemProps } from '#UNSAFE_Collection/Reorderable.types';\nimport { styles } from './themes/ReorderableItemStyles.css';\nimport { isKeyDefined } from '#utils/UNSAFE_keys';\n\nexport type useReorderableOptions<K extends string | number> = Omit<\n  ReorderableItemProps<K>,\n  'children'\n> & {\n  isDisabled: boolean;\n  ref: RefObject<HTMLDivElement>;\n  getItem: () => Element | null | undefined; // a function to get the reorderable item\n  setTransferData: (event: DragEvent) => void; // a function to set the transfer data and type\n  itemStyles: {\n    // component specific style for two overlay divs, e.g. component has different gap sizes\n    itemOverlayFront: string;\n    itemOverlayRear: string;\n    itemDragger?: string; // component specific style for drag image\n  };\n  itemSelector: string;\n  isVertical?: boolean; // used when the component is vertical and has one column, e.g. ListView\n};\n\n/**\n * Implements mouse reorder behavior for list-like components, e.g. TabBar, ListView, CardView\n */\nexport function useReorderableItem<K extends string | number>(options: useReorderableOptions<K>) {\n  const {\n    isDisabled,\n    dragKey,\n    setDragKey,\n    onReorder,\n    ref,\n    rootRef,\n    itemStyles,\n    getItem,\n    setTransferData,\n    itemSelector,\n    isVertical\n  } = options;\n\n  const [itemKey, setItemKey] = useState<K | undefined>(undefined);\n\n  // This is used to set the current itemKey and that in turn sets isDragged class. It needs to be updated everytime dragKey changes because otherwise itemKey will be the previously draggedKey\n  useEffect(() => {\n    if (ref.current) {\n      const item = getItem();\n      const key = item != null ? (getKey(item as HTMLElement) as K) : undefined;\n      setItemKey(key);\n    }\n  }, [dragKey]);\n\n  const [position, setPosition] = useState<'before' | 'after' | undefined>();\n  const pendingPositionRef = useRef<typeof position>();\n  const dragImgRef = useRef<HTMLElement | undefined>(undefined);\n\n  const itemDraggerClasses = classNames([styles.itemDragger, itemStyles.itemDragger]);\n\n  const { direction } = useUser();\n  const isRtl = direction === 'rtl';\n\n  /**\n   * Drag start handler\n   * The data-oj-draggable attribute need to be required and set to true to the target element. This\n   * attribute is used to identify which element can act as drag handles during the drag and drop process.\n   */\n  const handleDragStart = useCallback(\n    (e: DragEvent) => {\n      const item = getItem();\n      let targetElement: HTMLElement | null = e.target as HTMLElement;\n      const currentDragKey = item != null ? (getKey(item as HTMLElement) as K) : undefined;\n\n      let dragHandle;\n      while (targetElement) {\n        //data-oj-draggable attribute is only to use to draggable element\n        if (targetElement.hasAttribute('data-oj-draggable')) {\n          dragHandle = targetElement;\n          break;\n        } else if (targetElement === item) {\n          break;\n        }\n        targetElement = targetElement.parentElement;\n      }\n\n      if (!dragHandle) {\n        e.preventDefault();\n        e.stopPropagation();\n      } else {\n        if (ref?.current && setDragKey) {\n          dragImgRef.current = createDragImage(ref.current, itemDraggerClasses);\n          if (ref.current !== dragHandle) {\n            e?.dataTransfer?.setDragImage(\n              dragImgRef.current,\n              dragHandle.offsetLeft + dragHandle.offsetWidth / 2,\n              dragHandle.offsetTop + dragHandle.offsetHeight / 2\n            );\n          } else {\n            e?.dataTransfer?.setDragImage(\n              dragImgRef.current,\n              dragHandle.offsetWidth / 2,\n              dragHandle.offsetHeight / 2\n            );\n          }\n          setTransferData(e);\n          setDragKey(currentDragKey as K);\n        }\n      }\n    },\n    [getItem, setTransferData, itemDraggerClasses, ref, setDragKey]\n  );\n\n  const handleDragOver = useCallback(\n    (e: DragEvent) => {\n      if (isKeyDefined(dragKey)) {\n        e.preventDefault();\n      }\n    },\n    [dragKey]\n  );\n\n  //Once drag is over, reset styling of dragged item to it's original styling\n  const handleDragEnd = useCallback(() => {\n    setDragKey?.(undefined);\n    document.body.removeChild(dragImgRef.current as HTMLElement);\n  }, [setDragKey]);\n\n  // detect drop target position on the overlay divs and render drop target\n  const handleDragEnterBeforeZone = () => {\n    setPosition('before');\n    pendingPositionRef.current = 'before';\n  };\n\n  const handleDragLeaveBeforeZone = () => {\n    if (pendingPositionRef.current === 'before') {\n      setPosition(undefined);\n    }\n  };\n\n  const handleDragEnterAfterZone = () => {\n    setPosition('after');\n    pendingPositionRef.current = 'after';\n  };\n\n  const handleDragLeaveAfterZone = () => {\n    if (pendingPositionRef.current === 'after') {\n      setPosition(undefined);\n    }\n  };\n\n  const handleDrop = useCallback(() => {\n    if (rootRef?.current) {\n      const item = getItem();\n      const currentDropKey = item != null ? (getKey(item as HTMLElement) as K) : undefined;\n      const reference = currentDropKey;\n      const itemKeys = getItemKeysArray(rootRef.current, itemSelector);\n      let insertPos;\n      const newArray = [...itemKeys];\n      const dragIndex = newArray.indexOf(dragKey);\n      if (reference != null) {\n        const dropIndex = newArray.indexOf(reference);\n        if (dragIndex != null && dropIndex != null && dragIndex != dropIndex) {\n          if (!isRtl) {\n            if (dragIndex < dropIndex) {\n              insertPos = position === 'before' ? dropIndex - 1 : dropIndex;\n            } else {\n              insertPos = position === 'before' ? dropIndex : dropIndex + 1;\n            }\n          } else {\n            if (dragIndex < dropIndex) {\n              insertPos = position === 'before' ? dropIndex : dropIndex - 1;\n            } else {\n              insertPos = position === 'before' ? dropIndex + 1 : dropIndex;\n            }\n          }\n        }\n      }\n      if (insertPos !== undefined && dragIndex !== insertPos) {\n        const sourceData = itemKeys[dragIndex];\n        newArray.splice(dragIndex, 1);\n        newArray.splice(insertPos as number, 0, sourceData);\n        onReorder?.({\n          reorderedKeys: newArray as K[],\n          itemKeys: [dragKey as K],\n          // If the dragged items were dropped at the very beginning, the referenceKey will be null.\n          referenceKey: insertPos === 0 ? null : (newArray[insertPos - 1] as K)\n        });\n        setPosition(undefined);\n        setDragKey?.(undefined);\n      }\n    }\n  }, [dragKey, position, getItem, isRtl, itemSelector, onReorder, rootRef, setDragKey]);\n\n  if (isDisabled) {\n    return {};\n  }\n\n  //change dragged item visual to appear disable\n  const isDragged = itemKey != null && itemKey === dragKey;\n\n  const dndItemClasses = classNames([styles.itemDnd, isDragged && styles.itemDragged]);\n\n  const itemOverlayClassesBefore = classNames([\n    itemStyles.itemOverlayFront,\n    isVertical ? styles.itemOverlayVertical : styles.itemOverlay,\n    position === 'before' && styles.itemOverlayBefore,\n    position === 'before' && isRtl && styles.itemOverlayBeforeRtl\n  ]);\n  const itemOverlayClassesAfter = classNames([\n    itemStyles.itemOverlayFront,\n    itemStyles.itemOverlayRear,\n    isVertical ? styles.itemOverlayVertical : styles.itemOverlay,\n    position === 'after' && styles.itemOverlayAfter,\n    position === 'after' && isRtl && styles.itemOverlayAfterRtl\n  ]);\n\n  return {\n    rootProps: mergeProps({\n      ref: ref,\n      onDragStart: handleDragStart,\n      onDragEnd: handleDragEnd,\n      onDragOver: handleDragOver,\n      onDrop: handleDrop,\n      isDisabled: isDisabled,\n      class: dndItemClasses\n    }),\n    isDragged: isDragged,\n    overlayZoneBeforeProps: mergeProps({\n      onDragEnter: handleDragEnterBeforeZone,\n      onDragLeave: handleDragLeaveBeforeZone,\n      class: itemOverlayClassesBefore\n    }),\n    overlayZoneAfterProps: mergeProps({\n      onDragEnter: handleDragEnterAfterZone,\n      onDragLeave: handleDragLeaveAfterZone,\n      class: itemOverlayClassesAfter\n    })\n  } as const;\n}\n"],"names":[],"mappings":"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"}

package/es/useRovingTabIndexContainer-c0356f5d.js

@@ -0,0 +1,106 @@
+/* @oracle/oraclejet-preact: undefined */
+import { useRef, useState, useEffect } from 'preact/hooks';
+import { u as useUser } from './useUser-e543b73c.js';
+import { g as getClientHints } from './clientHints-a42b510c.js';
+
+/**
+ * Utility hook for setting up roving tab indexes on children of the consuming parent container
+ * For more details: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
+ * @param isDisabled boolean flag to communicate disabled state of consumer
+ * @returns id of currently focused element, and props to be spread onto the consuming element
+ */
+const useRovingTabIndexContainer = (isDisabled, containerChildren) => {
+    const rootRef = useRef(null);
+    const { direction } = useUser();
+    const isRtl = direction === 'rtl';
+    const [focusedId, setFocusedId] = useState(undefined);
+    const [isShiftTabbing, setIsShiftTabbing] = useState(false); // shift tabbing is tracked in order to toggle wrapper out of the tab order
+    const clientHints = getClientHints();
+    const [hasFocusableItems, setHasFocusableItems] = useState(false);
+    const getRovingItems = () => {
+        return rootRef.current
+            ? Array.from(rootRef.current.querySelectorAll('[data-oj-roving-tabindex-item]'))
+            : [];
+    };
+    const handleKeyDown = (e) => {
+        if (e.code === 'ArrowRight' || e.code === 'ArrowLeft') {
+            const items = getRovingItems();
+            if (items.length === 0)
+                return;
+            const nextItem = getNextItem(items, e.code, focusedId, isRtl);
+            nextItem.focus();
+        }
+        else if (e.shiftKey && e.code === 'Tab') {
+            setIsShiftTabbing(true);
+        }
+    };
+    // In Safari 16 and earlier, clicking on an HTML button element does not trigger a focus(in) event,
+    // and as such our handleFocus logic does not kick in and our focusedId state is never updated.
+    // To work around this, we manually update the focusedId in response to mouse downs. This has been fixed in Safari 17.
+    // This fix can be removed once Safari 18 is released.
+    const handleMouseDown = (e) => {
+        const rovingItemId = getRovingItemId(e.target, true);
+        if (rovingItemId) {
+            setFocusedId(rovingItemId);
+        }
+    };
+    const handleFocus = (e) => {
+        if (e.target !== e.currentTarget) {
+            //focus has moved to one of the roving items
+            if (e.target) {
+                setFocusedId(getRovingItemId(e.target));
+            }
+        }
+        else {
+            //focus has moved to the container, and has to be passed onto the eligble item to receive focus
+            const items = getRovingItems();
+            if (items.length === 0)
+                return;
+            setHasFocusableItems(items.length > 0);
+            const currentIndex = getCurrentRovingIndex(items, focusedId);
+            items[currentIndex].focus();
+        }
+    };
+    useEffect(() => {
+        if (!rootRef.current)
+            return;
+        const items = getRovingItems();
+        setHasFocusableItems(items.length > 0);
+    }, [containerChildren]);
+    const rovingTabIndexContainerProps = {
+        ref: rootRef,
+        onBlur: () => setIsShiftTabbing(false),
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        ...(clientHints.browser === 'safari' && { onMouseDown: handleMouseDown }), // mouseDown handler needed for Safari 16
+        tabIndex: isShiftTabbing || isDisabled || !hasFocusableItems ? undefined : 0 // tab index is needed on the container in order to pass focus to the first child
+    };
+    return { focusedId, rovingTabIndexContainerProps };
+};
+const getRovingItemId = (item, useClosest = false) => {
+    if (useClosest) {
+        const ancestor = item.closest('data-oj-roving-tabindex-item');
+        if (ancestor) {
+            item = ancestor;
+        }
+    }
+    return item.getAttribute('data-oj-roving-tabindex-item') || undefined;
+};
+const getCurrentRovingIndex = (items, focusedId) => {
+    const currentIndex = items.findIndex((item) => getRovingItemId(item) === focusedId);
+    return currentIndex === -1 ? 0 : currentIndex;
+};
+const getNextItem = (items, eventCode, focusedId, isRtl) => {
+    const currentIndex = getCurrentRovingIndex(items, focusedId);
+    let nextIndex = -1;
+    if ((!isRtl && eventCode === 'ArrowRight') || (isRtl && eventCode === 'ArrowLeft')) {
+        nextIndex = currentIndex === items.length - 1 ? 0 : currentIndex + 1;
+    }
+    if ((!isRtl && eventCode === 'ArrowLeft') || (isRtl && eventCode === 'ArrowRight')) {
+        nextIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1;
+    }
+    return items[nextIndex];
+};
+
+export { useRovingTabIndexContainer as u };
+//# sourceMappingURL=useRovingTabIndexContainer-c0356f5d.js.map

package/es/useRovingTabIndexContainer-c0356f5d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRovingTabIndexContainer-c0356f5d.js","sources":["../../src/hooks/PRIVATE_useRovingTabIndexContainer/useRovingTabIndexContainer.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'preact/hooks';\nimport { useUser } from '../UNSAFE_useUser';\nimport { getClientHints } from '../../utils/PRIVATE_clientHints';\nimport type { ComponentChildren } from 'preact';\n\n/**\n * Utility hook for setting up roving tab indexes on children of the consuming parent container\n * For more details: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n * @param isDisabled boolean flag to communicate disabled state of consumer\n * @returns id of currently focused element, and props to be spread onto the consuming element\n */\nconst useRovingTabIndexContainer = (\n  isDisabled?: boolean,\n  containerChildren?: ComponentChildren\n) => {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const { direction } = useUser();\n  const isRtl = direction === 'rtl';\n  const [focusedId, setFocusedId] = useState<string | undefined>(undefined);\n  const [isShiftTabbing, setIsShiftTabbing] = useState(false); // shift tabbing is tracked in order to toggle wrapper out of the tab order\n  const clientHints = getClientHints();\n  const [hasFocusableItems, setHasFocusableItems] = useState(false);\n\n  const getRovingItems = () => {\n    return rootRef.current\n      ? Array.from(rootRef.current.querySelectorAll<HTMLElement>('[data-oj-roving-tabindex-item]'))\n      : [];\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.code === 'ArrowRight' || e.code === 'ArrowLeft') {\n      const items = getRovingItems();\n      if (items.length === 0) return;\n      const nextItem = getNextItem(items, e.code, focusedId, isRtl);\n      nextItem.focus();\n    } else if (e.shiftKey && e.code === 'Tab') {\n      setIsShiftTabbing(true);\n    }\n  };\n\n  // In Safari 16 and earlier, clicking on an HTML button element does not trigger a focus(in) event,\n  // and as such our handleFocus logic does not kick in and our focusedId state is never updated.\n  // To work around this, we manually update the focusedId in response to mouse downs. This has been fixed in Safari 17.\n  // This fix can be removed once Safari 18 is released.\n  const handleMouseDown = (e: MouseEvent) => {\n    const rovingItemId = getRovingItemId(e.target as HTMLElement, true);\n    if (rovingItemId) {\n      setFocusedId(rovingItemId);\n    }\n  };\n\n  const handleFocus = (e: FocusEvent) => {\n    if (e.target !== e.currentTarget) {\n      //focus has moved to one of the roving items\n      if (e.target) {\n        setFocusedId(getRovingItemId(e.target as HTMLElement));\n      }\n    } else {\n      //focus has moved to the container, and has to be passed onto the eligble item to receive focus\n      const items = getRovingItems();\n      if (items.length === 0) return;\n      setHasFocusableItems(items.length > 0);\n      const currentIndex = getCurrentRovingIndex(items, focusedId);\n      items[currentIndex].focus();\n    }\n  };\n\n  useEffect(() => {\n    if (!rootRef.current) return;\n\n    const items = getRovingItems();\n    setHasFocusableItems(items.length > 0);\n  }, [containerChildren]);\n\n  const rovingTabIndexContainerProps = {\n    ref: rootRef,\n    onBlur: () => setIsShiftTabbing(false),\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n    ...(clientHints.browser === 'safari' && { onMouseDown: handleMouseDown }), // mouseDown handler needed for Safari 16\n    tabIndex: isShiftTabbing || isDisabled || !hasFocusableItems ? undefined : 0 // tab index is needed on the container in order to pass focus to the first child\n  };\n\n  return { focusedId, rovingTabIndexContainerProps };\n};\n\nconst getRovingItemId = (item: Element, useClosest = false) => {\n  if (useClosest) {\n    const ancestor = item.closest('data-oj-roving-tabindex-item');\n    if (ancestor) {\n      item = ancestor;\n    }\n  }\n\n  return item.getAttribute('data-oj-roving-tabindex-item') || undefined;\n};\n\nconst getCurrentRovingIndex = (items: HTMLElement[], focusedId: string | undefined) => {\n  const currentIndex = items.findIndex((item) => getRovingItemId(item) === focusedId);\n  return currentIndex === -1 ? 0 : currentIndex;\n};\n\nconst getNextItem = (\n  items: HTMLElement[],\n  eventCode: string,\n  focusedId: string | undefined,\n  isRtl: boolean\n) => {\n  const currentIndex = getCurrentRovingIndex(items, focusedId);\n  let nextIndex = -1;\n  if ((!isRtl && eventCode === 'ArrowRight') || (isRtl && eventCode === 'ArrowLeft')) {\n    nextIndex = currentIndex === items.length - 1 ? 0 : currentIndex + 1;\n  }\n  if ((!isRtl && eventCode === 'ArrowLeft') || (isRtl && eventCode === 'ArrowRight')) {\n    nextIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1;\n  }\n  return items[nextIndex];\n};\n\nexport { useRovingTabIndexContainer };\n"],"names":[],"mappings":"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"}

package/es/useScale-93490e54.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 useScale() {
+    return useContext(EnvironmentContext).scale;
+}
+
+export { useScale as u };
+//# sourceMappingURL=useScale-93490e54.js.map

package/es/useScale-93490e54.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScale-93490e54.js","sources":["../../src/hooks/UNSAFE_useScale/useScale.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 useScale() {\n  return useContext(EnvironmentContext).scale;\n}\n"],"names":[],"mappings":";;;;;;AAAA;;;;;;AAMG;SAIa,QAAQ,GAAA;AACtB,IAAA,OAAO,UAAU,CAAC,kBAAkB,CAAC,CAAC,KAAK,CAAC;AAC9C;;;;"}