@oracle/oraclejet-preact 20.0.4 → 20.1.0

package/cjs/useSelection-0ef0ee3c.js

@@ -0,0 +1,260 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var hooks = require('preact/hooks');
+var keys = require('./keys-25710458.js');
+var useUser = require('./useUser-cc045b3e.js');
+var textSelectionUtils = require('./textSelectionUtils-57082239.js');
+
+const arrowKeys = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']);
+/**
+ * To get the event type during range selection which is triggered by either of the following gestures
+ * shift+space, shift+click, and shift+arrowKeys
+ * @param event
+ */
+const getEventType = (event) => {
+    if (event.type === 'click') {
+        return 'shiftClick';
+    }
+    else if (event.type === 'keyup' && event.key === ' ') {
+        return 'shiftSpace';
+    }
+    else if (event.type === 'keydown' && arrowKeys.has(event.key)) {
+        return 'shiftArrowKeys';
+    }
+    return undefined;
+};
+const isShiftModeSupported = (anchorKey, selectedKeys, selectionMode, isClickEvent) => {
+    return selectionMode === 'multiple' && (isClickEvent || keys.containsKey(selectedKeys, anchorKey));
+};
+const handleSelect = (event, keyExtractor, selectedKeys, selectionMode, selectionBehavior, isSelectionRequired, keyboardCursorRef, anchorKey, onChange, onRangeChange) => {
+    const itemKey = keyExtractor(event.target);
+    if (itemKey == null) {
+        return;
+    }
+    // handle shift key selection
+    if (event.shiftKey &&
+        anchorKey !== undefined &&
+        onRangeChange &&
+        isShiftModeSupported(anchorKey, selectedKeys, selectionMode, event.type === 'click')) {
+        const selected = keys.containsKey(selectedKeys, itemKey);
+        const eventType = getEventType(event);
+        if (selected && eventType === 'shiftSpace') {
+            // during shift+space, deselect the item if it's already selected
+            const keySet = keys.removeKey(selectedKeys, itemKey, isSelectionRequired);
+            onChange?.({ value: keySet, target: event.target });
+        }
+        else {
+            onRangeChange({ value: { start: anchorKey, end: itemKey }, eventType });
+        }
+        // set keyboard selection cursor in case user extends with SHIFT+ARROW
+        if (keyboardCursorRef) {
+            keyboardCursorRef.current = itemKey;
+        }
+        return;
+    }
+    const selected = keys.containsKey(selectedKeys, itemKey);
+    let keySet = selectedKeys;
+    if (!selected) {
+        if (selectionMode === 'single' ||
+            event.key === 'Enter' ||
+            (selectionBehavior === 'replace' &&
+                !(event.ctrlKey || event.metaKey || event.key === ' '))) {
+            // should only contains this item key
+            keySet = { all: false, keys: new Set([itemKey]) };
+        }
+        else {
+            // add to existing selected keys
+            keySet = keys.addKey(selectedKeys, itemKey);
+        }
+    }
+    else if (event.key !== 'Enter') {
+        // no de-select for enter key
+        if (selectionBehavior === 'toggle' ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.key === ' ') {
+            // de-select only when ctrl/meta key is pressed or selectionBehavior is
+            // explicitly set to toggle
+            keySet = keys.removeKey(selectedKeys, itemKey, isSelectionRequired);
+        }
+        else if (selectionMode === 'multiple' && (selectedKeys.all || selectedKeys.keys.size > 1)) {
+            // in this case everything should be de-selected except for this key
+            keySet = { all: false, keys: new Set([itemKey]) };
+        }
+    }
+    // only invoke callback if there is really a change
+    // note onSelectionChange should never be null here
+    if (selectedKeys != keySet && onChange) {
+        onChange({ value: keySet, target: event.target });
+        if (event.type === 'click') {
+            event.stopPropagation();
+        }
+    }
+};
+/**
+ * Hook for handling various selection mode.  This can be reuse by all Collection components.
+ * @param keyExtractor function to extract the key based on provided element
+ * @param selectedKeys the currently selected keys
+ * @param selectionMode the selection mode
+ * @param isSelectionRequired true if empty selected key is not allowed, false otherwise
+ * @param selectionBehavior the selection behavior.  If the value is 'toggle', then the key is
+ *                          added/removed from the current selected keys.  If the value is 'replace',
+ *                          then the current selected keys are cleared first before the key is added
+ *                          unless the ctrl/shift/meta key is pressed.
+ * @param onChange callback function that is invoked when selection has changed.
+ * @param anchorKey the anchor key.  Usually this is the same as current key except when shift key is pressed.
+ * @param currentKey the current key
+ * @param getVerticalPrevNextKey function to get the previous/next key in the vertical direction based on the current key
+ * @param getHorizontalPrevNextKey function to get the previous/next key in the horizontal direction based on the current key
+ * @param scrollToKey function to scroll the item with the key to be visible
+ * @param onRangeChange callback function that is invoked when the selection range has changed.
+ * @returns an event map that the consumer can register as event listeners
+ */
+function useSelection(keyExtractor, selectedKeys, selectionMode, isSelectionRequired, selectionBehavior, onChange, anchorKey, currentKey, getVerticalPrevNextKey, getHorizontalPrevNextKey, scrollToKey, onRangeChange) {
+    // ref to track the cursor for the SHIFT+ARROW keyboard selection separately than the anchor of the selection.
+    const keyboardSelectionCursor = hooks.useRef();
+    const pendingKeyboardSelectionCursor = hooks.useRef(false);
+    const isTouchPointerRef = hooks.useRef(false);
+    const onPointerDown = hooks.useCallback((event) => {
+        isTouchPointerRef.current = event.pointerType === 'touch';
+        if (event.shiftKey && selectionMode === 'multiple') {
+            //Avoid text selection on pointer down
+            event.preventDefault();
+        }
+    }, [selectionMode, isTouchPointerRef]);
+    const onClickCapture = hooks.useCallback((event) => {
+        if (!textSelectionUtils.getIsSelectionPending()) {
+            if (!event.shiftKey) {
+                // reset keyboard cursor during capture phase, because Selector doesn't propagate click event
+                keyboardSelectionCursor.current = undefined;
+                pendingKeyboardSelectionCursor.current = false;
+            }
+            else {
+                pendingKeyboardSelectionCursor.current = true;
+            }
+        }
+    }, []);
+    const onClick = hooks.useCallback((event) => {
+        if (!textSelectionUtils.getIsSelectionPending()) {
+            handleSelect(event, keyExtractor, selectedKeys, selectionMode, isTouchPointerRef.current ? 'toggle' : selectionBehavior, isSelectionRequired, keyboardSelectionCursor, currentKey, onChange, onRangeChange);
+            pendingKeyboardSelectionCursor.current = false;
+        }
+    }, [
+        keyExtractor,
+        selectedKeys,
+        selectionMode,
+        selectionBehavior,
+        isSelectionRequired,
+        keyboardSelectionCursor,
+        currentKey,
+        onChange,
+        onRangeChange
+    ]);
+    // general keyboard events listen to keyUp for a11y
+    const onKeyUp = hooks.useCallback((event) => {
+        // older browser that we don't support returns 'Spacebar' for space key
+        if (event.key === ' ') {
+            handleSelect(event, keyExtractor, selectedKeys, selectionMode, selectionBehavior, isSelectionRequired, keyboardSelectionCursor, anchorKey, onChange, event.shiftKey && event.key === ' ' ? onRangeChange : undefined);
+        }
+    }, [
+        keyExtractor,
+        selectedKeys,
+        selectionMode,
+        selectionBehavior,
+        isSelectionRequired,
+        anchorKey,
+        onChange,
+        onRangeChange
+    ]);
+    const { direction } = useUser.useUser();
+    // arrowKey events listen to keyDown so they can support holding them down
+    const onKeyDown = hooks.useCallback((event) => {
+        // prevent default (propagation) for keyDown to space bar causing container to scroll
+        if (event.key === ' ') {
+            event.preventDefault();
+            return;
+        }
+        if (pendingKeyboardSelectionCursor.current) {
+            keyboardSelectionCursor.current = undefined;
+            pendingKeyboardSelectionCursor.current = false;
+        }
+        const key = keyboardSelectionCursor.current ?? currentKey;
+        const isRtl = direction === 'rtl';
+        const keyHandlers = {
+            ArrowUp: getVerticalPrevNextKey?.(key, true),
+            ArrowDown: getVerticalPrevNextKey?.(key, false),
+            ArrowLeft: getHorizontalPrevNextKey?.(key, !isRtl),
+            ArrowRight: getHorizontalPrevNextKey?.(key, isRtl)
+        };
+        const isBothDirections = getVerticalPrevNextKey && getHorizontalPrevNextKey;
+        if (Object.keys(keyHandlers).includes(event.key)) {
+            // check ctrl/meta keys to avoid conflict gesture with reorder, and reset the range
+            if (event.shiftKey &&
+                !(event.ctrlKey || event.metaKey) &&
+                scrollToKey &&
+                selectionMode === 'multiple') {
+                //Avoid increasing range of selection text selection with arrow keys
+                event.preventDefault();
+                let keySet = selectedKeys;
+                // on first selection event, set keyboard cursor to start at currentKey
+                if (!keys.isKeyDefined(keyboardSelectionCursor.current) && keys.isKeyDefined(currentKey)) {
+                    keySet = { all: false, keys: new Set([currentKey]) };
+                }
+                const newAnchorKey = keyHandlers[event.key];
+                const cursorKey = newAnchorKey?.();
+                if (cursorKey != null) {
+                    // keep visible
+                    scrollToKey(cursorKey);
+                    // if in 2D, use range selection to extend or subtract
+                    if (isBothDirections) {
+                        if (onRangeChange && currentKey != null) {
+                            onRangeChange({
+                                value: { start: currentKey, end: cursorKey },
+                                eventType: getEventType(event)
+                            });
+                        }
+                    }
+                    else {
+                        // extend selection
+                        if (!keys.containsKey(keySet, cursorKey)) {
+                            keySet = keys.addKey(keySet, cursorKey);
+                            // subtract from selection
+                        }
+                        else if (keyboardSelectionCursor.current != null &&
+                            keyboardSelectionCursor.current !== cursorKey) {
+                            keySet = keys.removeKey(keySet, keyboardSelectionCursor.current, isSelectionRequired);
+                        }
+                        if (selectedKeys != keySet && onChange) {
+                            onChange({ value: keySet, target: event.target });
+                        }
+                    }
+                    // update selection cursor
+                    keyboardSelectionCursor.current = cursorKey;
+                }
+            }
+            else {
+                // reset keyBoard on non-shifted arrow use as this interrupts the extend mode (and would make for messy logic that doesn't align with current Jet behavior)
+                keyboardSelectionCursor.current = undefined;
+            }
+        }
+    }, [
+        selectedKeys,
+        isSelectionRequired,
+        onChange,
+        currentKey,
+        getVerticalPrevNextKey,
+        getHorizontalPrevNextKey,
+        scrollToKey,
+        direction,
+        onRangeChange,
+        selectionMode
+    ]);
+    const selectionProps = selectionMode === 'none' || onChange == null
+        ? {}
+        : { onPointerDown, onClick, onClickCapture, onKeyDown, onKeyUp };
+    return { selectionProps };
+}
+
+exports.useSelection = useSelection;
+//# sourceMappingURL=useSelection-0ef0ee3c.js.map

package/cjs/useSelection-0ef0ee3c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelection-0ef0ee3c.js","sources":["../../src/hooks/PRIVATE_useSelection/useSelection.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 type { RefObject } from 'preact';\nimport { useCallback, useRef } from 'preact/hooks';\nimport { Keys, containsKey, isKeyDefined, addKey, removeKey } from '../../utils/UNSAFE_keys';\nimport { SelectionDetail, SelectionMode } from '../../UNSAFE_Collection';\nimport { useUser } from '../UNSAFE_useUser';\nimport { getIsSelectionPending } from '#utils/PRIVATE_textSelectionUtils';\nimport { SelectionBehavior, SelectionRangeDetail } from './Selection.types';\n\nconst arrowKeys = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']);\n\n/**\n * To get the event type during range selection which is triggered by either of the following gestures\n * shift+space, shift+click, and shift+arrowKeys\n * @param event\n */\nconst getEventType = (event: MouseEvent | KeyboardEvent) => {\n  if (event.type === 'click') {\n    return 'shiftClick';\n  } else if (event.type === 'keyup' && (event as KeyboardEvent).key === ' ') {\n    return 'shiftSpace';\n  } else if (event.type === 'keydown' && arrowKeys.has((event as KeyboardEvent).key)) {\n    return 'shiftArrowKeys';\n  }\n  return undefined;\n};\n\nconst isShiftModeSupported = <K>(\n  anchorKey: K,\n  selectedKeys: Keys<K>,\n  selectionMode: SelectionMode,\n  isClickEvent: boolean\n) => {\n  return selectionMode === 'multiple' && (isClickEvent || containsKey(selectedKeys, anchorKey));\n};\n\nconst handleSelect = <K>(\n  event: MouseEvent | KeyboardEvent,\n  keyExtractor: (element: HTMLElement) => K | null,\n  selectedKeys: Keys<K>,\n  selectionMode: SelectionMode,\n  selectionBehavior: SelectionBehavior,\n  isSelectionRequired: boolean,\n  keyboardCursorRef: RefObject<K | undefined>,\n  anchorKey?: K,\n  onChange?: (detail: SelectionDetail<K>) => void,\n  onRangeChange?: (detail: SelectionRangeDetail<K>) => void\n) => {\n  const itemKey = keyExtractor(event.target as HTMLElement);\n  if (itemKey == null) {\n    return;\n  }\n\n  // handle shift key selection\n  if (\n    event.shiftKey &&\n    anchorKey !== undefined &&\n    onRangeChange &&\n    isShiftModeSupported(anchorKey, selectedKeys, selectionMode, event.type === 'click')\n  ) {\n    const selected = containsKey(selectedKeys, itemKey);\n    const eventType = getEventType(event);\n    if (selected && eventType === 'shiftSpace') {\n      // during shift+space, deselect the item if it's already selected\n      const keySet = removeKey(selectedKeys, itemKey, isSelectionRequired);\n      onChange?.({ value: keySet, target: event.target });\n    } else {\n      onRangeChange({ value: { start: anchorKey, end: itemKey }, eventType });\n    }\n    // set keyboard selection cursor in case user extends with SHIFT+ARROW\n    if (keyboardCursorRef) {\n      keyboardCursorRef.current = itemKey;\n    }\n    return;\n  }\n\n  const selected = containsKey(selectedKeys, itemKey);\n  let keySet = selectedKeys;\n  if (!selected) {\n    if (\n      selectionMode === 'single' ||\n      (event as KeyboardEvent).key === 'Enter' ||\n      (selectionBehavior === 'replace' &&\n        !(event.ctrlKey || event.metaKey || (event as KeyboardEvent).key === ' '))\n    ) {\n      // should only contains this item key\n      keySet = { all: false, keys: new Set([itemKey]) };\n    } else {\n      // add to existing selected keys\n      keySet = addKey(selectedKeys, itemKey);\n    }\n  } else if ((event as KeyboardEvent).key !== 'Enter') {\n    // no de-select for enter key\n    if (\n      selectionBehavior === 'toggle' ||\n      event.ctrlKey ||\n      event.metaKey ||\n      (event as KeyboardEvent).key === ' '\n    ) {\n      // de-select only when ctrl/meta key is pressed or selectionBehavior is\n      // explicitly set to toggle\n      keySet = removeKey(selectedKeys, itemKey, isSelectionRequired);\n    } else if (selectionMode === 'multiple' && (selectedKeys.all || selectedKeys.keys.size > 1)) {\n      // in this case everything should be de-selected except for this key\n      keySet = { all: false, keys: new Set([itemKey]) };\n    }\n  }\n\n  // only invoke callback if there is really a change\n  // note onSelectionChange should never be null here\n  if (selectedKeys != keySet && onChange) {\n    onChange({ value: keySet, target: event.target });\n    if (event.type === 'click') {\n      event.stopPropagation();\n    }\n  }\n};\n\n/**\n * Hook for handling various selection mode.  This can be reuse by all Collection components.\n * @param keyExtractor function to extract the key based on provided element\n * @param selectedKeys the currently selected keys\n * @param selectionMode the selection mode\n * @param isSelectionRequired true if empty selected key is not allowed, false otherwise\n * @param selectionBehavior the selection behavior.  If the value is 'toggle', then the key is\n *                          added/removed from the current selected keys.  If the value is 'replace',\n *                          then the current selected keys are cleared first before the key is added\n *                          unless the ctrl/shift/meta key is pressed.\n * @param onChange callback function that is invoked when selection has changed.\n * @param anchorKey the anchor key.  Usually this is the same as current key except when shift key is pressed.\n * @param currentKey the current key\n * @param getVerticalPrevNextKey function to get the previous/next key in the vertical direction based on the current key\n * @param getHorizontalPrevNextKey function to get the previous/next key in the horizontal direction based on the current key\n * @param scrollToKey function to scroll the item with the key to be visible\n * @param onRangeChange callback function that is invoked when the selection range has changed.\n * @returns an event map that the consumer can register as event listeners\n */\nexport function useSelection<K>(\n  keyExtractor: (element: HTMLElement) => K | null,\n  selectedKeys: Keys<K>,\n  selectionMode: SelectionMode,\n  isSelectionRequired: boolean,\n  selectionBehavior: SelectionBehavior,\n  onChange?: (detail: SelectionDetail<K>) => void,\n  anchorKey?: K,\n  currentKey?: K | undefined,\n  getVerticalPrevNextKey?: (currentKey: K | undefined, isPrev: boolean) => () => K | null,\n  getHorizontalPrevNextKey?: (currentKey: K | undefined, isPrev: boolean) => () => K | null,\n  scrollToKey?: (key: K) => void,\n  onRangeChange?: (detail: SelectionRangeDetail<K>) => void\n) {\n  // ref to track the cursor for the SHIFT+ARROW keyboard selection separately than the anchor of the selection.\n  const keyboardSelectionCursor = useRef<K>();\n  const pendingKeyboardSelectionCursor = useRef(false);\n\n  const isTouchPointerRef = useRef<boolean>(false);\n\n  const onPointerDown = useCallback(\n    (event: PointerEvent) => {\n      isTouchPointerRef.current = event.pointerType === 'touch';\n      if (event.shiftKey && selectionMode === 'multiple') {\n        //Avoid text selection on pointer down\n        event.preventDefault();\n      }\n    },\n    [selectionMode, isTouchPointerRef]\n  );\n\n  const onClickCapture = useCallback((event: MouseEvent) => {\n    if (!getIsSelectionPending()) {\n      if (!event.shiftKey) {\n        // reset keyboard cursor during capture phase, because Selector doesn't propagate click event\n        keyboardSelectionCursor.current = undefined;\n        pendingKeyboardSelectionCursor.current = false;\n      } else {\n        pendingKeyboardSelectionCursor.current = true;\n      }\n    }\n  }, []);\n\n  const onClick = useCallback(\n    (event: MouseEvent) => {\n      if (!getIsSelectionPending()) {\n        handleSelect<K>(\n          event,\n          keyExtractor,\n          selectedKeys,\n          selectionMode,\n          isTouchPointerRef.current ? 'toggle' : selectionBehavior,\n          isSelectionRequired,\n          keyboardSelectionCursor,\n          currentKey,\n          onChange,\n          onRangeChange\n        );\n        pendingKeyboardSelectionCursor.current = false;\n      }\n    },\n    [\n      keyExtractor,\n      selectedKeys,\n      selectionMode,\n      selectionBehavior,\n      isSelectionRequired,\n      keyboardSelectionCursor,\n      currentKey,\n      onChange,\n      onRangeChange\n    ]\n  );\n\n  // general keyboard events listen to keyUp for a11y\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent) => {\n      // older browser that we don't support returns 'Spacebar' for space key\n      if (event.key === ' ') {\n        handleSelect<K>(\n          event,\n          keyExtractor,\n          selectedKeys,\n          selectionMode,\n          selectionBehavior,\n          isSelectionRequired,\n          keyboardSelectionCursor,\n          anchorKey,\n          onChange,\n          event.shiftKey && event.key === ' ' ? onRangeChange : undefined\n        );\n      }\n    },\n    [\n      keyExtractor,\n      selectedKeys,\n      selectionMode,\n      selectionBehavior,\n      isSelectionRequired,\n      anchorKey,\n      onChange,\n      onRangeChange\n    ]\n  );\n\n  const { direction } = useUser();\n\n  // arrowKey events listen to keyDown so they can support holding them down\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      // prevent default (propagation) for keyDown to space bar causing container to scroll\n      if (event.key === ' ') {\n        event.preventDefault();\n        return;\n      }\n\n      if (pendingKeyboardSelectionCursor.current) {\n        keyboardSelectionCursor.current = undefined;\n        pendingKeyboardSelectionCursor.current = false;\n      }\n\n      const key = keyboardSelectionCursor.current ?? currentKey;\n      const isRtl = direction === 'rtl';\n\n      const keyHandlers: Record<string, (() => K | null) | undefined> = {\n        ArrowUp: getVerticalPrevNextKey?.(key, true),\n        ArrowDown: getVerticalPrevNextKey?.(key, false),\n        ArrowLeft: getHorizontalPrevNextKey?.(key, !isRtl),\n        ArrowRight: getHorizontalPrevNextKey?.(key, isRtl)\n      };\n      const isBothDirections = getVerticalPrevNextKey && getHorizontalPrevNextKey;\n      if (Object.keys(keyHandlers).includes(event.key)) {\n        // check ctrl/meta keys to avoid conflict gesture with reorder, and reset the range\n        if (\n          event.shiftKey &&\n          !(event.ctrlKey || event.metaKey) &&\n          scrollToKey &&\n          selectionMode === 'multiple'\n        ) {\n          //Avoid increasing range of selection text selection with arrow keys\n          event.preventDefault();\n          let keySet = selectedKeys;\n          // on first selection event, set keyboard cursor to start at currentKey\n          if (!isKeyDefined(keyboardSelectionCursor.current) && isKeyDefined(currentKey)) {\n            keySet = { all: false, keys: new Set([currentKey as K]) };\n          }\n          const newAnchorKey = keyHandlers[event.key];\n          const cursorKey = newAnchorKey?.();\n          if (cursorKey != null) {\n            // keep visible\n            scrollToKey(cursorKey);\n\n            // if in 2D, use range selection to extend or subtract\n            if (isBothDirections) {\n              if (onRangeChange && currentKey != null) {\n                onRangeChange({\n                  value: { start: currentKey, end: cursorKey },\n                  eventType: getEventType(event)\n                });\n              }\n            } else {\n              // extend selection\n              if (!containsKey(keySet, cursorKey)) {\n                keySet = addKey(keySet, cursorKey);\n                // subtract from selection\n              } else if (\n                keyboardSelectionCursor.current != null &&\n                keyboardSelectionCursor.current !== cursorKey\n              ) {\n                keySet = removeKey(keySet, keyboardSelectionCursor.current, isSelectionRequired);\n              }\n              if (selectedKeys != keySet && onChange) {\n                onChange({ value: keySet, target: event.target });\n              }\n            }\n            // update selection cursor\n            keyboardSelectionCursor.current = cursorKey;\n          }\n        } else {\n          // reset keyBoard on non-shifted arrow use as this interrupts the extend mode (and would make for messy logic that doesn't align with current Jet behavior)\n          keyboardSelectionCursor.current = undefined;\n        }\n      }\n    },\n    [\n      selectedKeys,\n      isSelectionRequired,\n      onChange,\n      currentKey,\n      getVerticalPrevNextKey,\n      getHorizontalPrevNextKey,\n      scrollToKey,\n      direction,\n      onRangeChange,\n      selectionMode\n    ]\n  );\n\n  const selectionProps =\n    selectionMode === 'none' || onChange == null\n      ? {}\n      : { onPointerDown, onClick, onClickCapture, onKeyDown, onKeyUp };\n  return { selectionProps };\n}\n"],"names":["containsKey","removeKey","addKey","useRef","useCallback","getIsSelectionPending","useUser","isKeyDefined"],"mappings":"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"}

package/cjs/useTabBar-114caa2f.js

@@ -0,0 +1,309 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var hooks = require('preact/hooks');
+var mergeProps = require('./mergeProps-e3da7237.js');
+var collectionUtils = require('./collectionUtils-f1d3183f.js');
+var useCollectionFocusRing = require('./useCollectionFocusRing-bed0aa16.js');
+var useCurrentKey = require('./useCurrentKey-b66cf089.js');
+var useId = require('./useId-6c0eeb27.js');
+var useReorderableContext = require('./useReorderableContext-92514102.js');
+var useContextMenuGesture = require('./useContextMenuGesture-530ef8dd.js');
+var TabBarContextMenu = require('./TabBarContextMenu-f7acee3d.js');
+var useUser = require('./useUser-cc045b3e.js');
+var useTranslationBundle = require('./useTranslationBundle-990e7928.js');
+
+const ITEM_SELECTOR = '[role="tab"]';
+const REMOVABLE_ICON_SELECTOR = '[data-oj-tabbar-item-remove-icon="true"]';
+const REMOVABLE_ITEM_ATTRIBUTE = 'data-oj-removable';
+const TOUCH_OFFSET_VALUE = 40;
+const menuPropGestureStates = {
+    mouse: {
+        initialFocus: 'menu',
+        placement: 'bottom-start',
+        offsetValue: 0
+    },
+    keyboard: {
+        initialFocus: 'firstItem',
+        placement: 'bottom-start',
+        offsetValue: 0
+    },
+    touch: {
+        initialFocus: 'menu',
+        placement: 'end',
+        offsetValue: TOUCH_OFFSET_VALUE
+    }
+};
+const initialMenuProps = {
+    isOpen: false,
+    initialFocus: 'menu',
+    placement: 'bottom-start',
+    offsetValue: 0,
+    anchorRef: { current: null }
+};
+/**
+ * Implements TabBar behavior for focus and keyboad handling
+ */
+function useTabBar(options) {
+    const { children, class: className, display, edge = 'top', selection, onSelect, onRemove, ref: userRef, size, contextMenuConfig } = options;
+    const { direction } = useUser.useUser();
+    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const internalRef = hooks.useRef(null);
+    const rootRef = userRef || internalRef;
+    const tabId = useId.useId();
+    const [currentKey, setCurrentKey] = hooks.useState(selection);
+    const [hideTooltip, setHideTooltip] = hooks.useState(false);
+    const tabItemPrefix = tabId + '_';
+    const contextMenuDescriptionId = 'contextMenu_' + useId.useId();
+    const contextMenuDescription = translations.tabbar_labelContextMenu();
+    /**
+     * A reference to the previous set of tab keys that this TabBar
+     * contains before children were re-rendered. In the event the "current" tab
+     * is removed and the "currentKey" reference is broken, we can redirect
+     * the "currentKey" to another tab based on the index of the removed tab.
+     */
+    const prevTabKeys = hooks.useRef();
+    hooks.useEffect(() => {
+        if (rootRef.current) {
+            const tabKeys = collectionUtils.getItemKeysArray(rootRef.current, ITEM_SELECTOR);
+            if (currentKey == null && tabKeys) {
+                if (selection != null && tabKeys.includes(selection)) {
+                    setCurrentKey(selection);
+                }
+                else if (tabKeys.length > 0) {
+                    setCurrentKey(tabKeys[0]);
+                }
+            }
+            if (currentKey != null && tabKeys && !tabKeys.includes(currentKey)) {
+                //If prevTabs does not exist set the first visible key as currentKey
+                prevTabKeys.current
+                    ? setCurrentKey(findNextValidKey(currentKey, tabKeys, prevTabKeys.current))
+                    : setCurrentKey(tabKeys[0]);
+            }
+            prevTabKeys.current = tabKeys;
+        }
+    }, [children, currentKey, rootRef, selection]);
+    const [showFocusRing, focusRingProps] = useCollectionFocusRing.useCollectionFocusRing(rootRef, [
+        'ArrowRight',
+        'ArrowLeft',
+        'Home',
+        'End'
+    ]);
+    const reorderableContext = useReorderableContext.useReorderableContext();
+    const { currentKeyProps } = useCurrentKey.useCurrentKey((element) => onRemove
+        ? extractOnlyItemKey(element, ITEM_SELECTOR, REMOVABLE_ICON_SELECTOR)
+        : collectionUtils.keyExtractor(element, ITEM_SELECTOR), false, false, undefined, undefined, collectionUtils.getPrevNextKeyUsingRef(rootRef, currentKey, true, ITEM_SELECTOR), collectionUtils.getPrevNextKeyUsingRef(rootRef, currentKey, false, ITEM_SELECTOR), currentKey, (detail) => {
+        const key = detail.value;
+        setCurrentKey(key);
+        setHideTooltip(false);
+    });
+    hooks.useEffect(() => {
+        if (reorderableContext) {
+            reorderableContext.currentItemKey.current = currentKey;
+        }
+    }, [currentKey, reorderableContext]);
+    const onKeyDown = (event) => {
+        if (rootRef.current && currentKey != null) {
+            if (event.key === 'Home' || event.key === 'End') {
+                const tabBarItemKey = collectionUtils.getItemKeysArray(rootRef.current, ITEM_SELECTOR);
+                event.preventDefault();
+                setCurrentKey?.(tabBarItemKey[event.key === 'Home' ? 0 : tabBarItemKey.length - 1]);
+            }
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onSelect?.({ value: currentKey });
+            }
+            if (event.key === 'Delete') {
+                const tabBarItem = collectionUtils.findElementByKey(rootRef.current, currentKey, ITEM_SELECTOR);
+                if (tabBarItem.hasAttribute(REMOVABLE_ITEM_ATTRIBUTE)) {
+                    onRemove?.({ value: currentKey });
+                }
+            }
+            if (event.key === 'Escape') {
+                setHideTooltip(true);
+            }
+        }
+    };
+    const onFocus = () => {
+        if (rootRef.current && currentKey === undefined) {
+            const key = collectionUtils.getFirstVisibleKey(rootRef.current, ITEM_SELECTOR);
+            if (key != null) {
+                setCurrentKey(key);
+            }
+        }
+    };
+    const [contextMenuContext, setContextMenuContext] = hooks.useState();
+    const [menuProps, setMenuProps] = hooks.useState(initialMenuProps);
+    const [accStatusInfo, setAccStatusInfo] = hooks.useState();
+    const { triggerProps } = useContextMenuGesture.useContextMenuGesture(({ gesture, anchor, target }) => {
+        let anchorBasedOnGesture = anchor;
+        let itemKey = currentKey;
+        if (gesture === 'keyboard') {
+            //We find the element where the position of the menu is going to be based of
+            const elem = collectionUtils.findElementByKey(rootRef.current, currentKey, ITEM_SELECTOR);
+            //We set the correct anchor
+            anchorBasedOnGesture = elem ? elem : anchor;
+        }
+        else {
+            //We search for the key using the target of the event
+            const key = collectionUtils.keyExtractor(target, ITEM_SELECTOR);
+            //On touch devices, the keyExtractor returns null because target of touch event is the entire tabbar. Hence we make use of currentkey since the context menu is always launched from selected item and its key is currentKey
+            itemKey = key != null ? key : currentKey;
+        }
+        let tabKeysArray;
+        let isRemovableItem = false;
+        const isReorderable = reorderableContext?.onReorder != null;
+        if (rootRef.current) {
+            tabKeysArray = isReorderable
+                ? collectionUtils.getItemKeysArray(rootRef.current, ITEM_SELECTOR)
+                : undefined;
+            isRemovableItem =
+                getItemAttribute(itemKey, rootRef.current, REMOVABLE_ITEM_ATTRIBUTE) != null;
+        }
+        const isRemovable = onRemove != null && isRemovableItem;
+        const defaultContext = TabBarContextMenu.getDefaultContextMenu({
+            // For default menu items the existence of REMOVABLE_ICON_SELECTOR is the indicator that it is removable because we render the default menu in touch devices not the application.
+            // Furthermore in corepack due to delegations onRemove is always defined as it is a even handler hence not a good check for isRemovable.
+            isRemovable: isRemovable,
+            handleRemove: onRemove,
+            handleReorder: isReorderable ? reorderableContext.onReorder : undefined,
+            itemKey: itemKey,
+            tabKeys: tabKeysArray,
+            direction: direction,
+            itemLabels: {
+                labelRemove: isRemovable ? translations.tabbar_labelRemove() : undefined,
+                labelMoveLeft: isReorderable ? translations.tabbar_labelMoveLeft() : undefined,
+                labelMoveRight: isReorderable ? translations.tabbar_labelMoveRight() : undefined
+            },
+            handleAccStatus: (detail) => {
+                const removeItemLabel = getItemLabel(detail.removedKey, rootRef.current);
+                const removeStatus = isRemovable && detail.removedKey
+                    ? translations.tabbar_accAnnounceRemovedKey({ itemKey: removeItemLabel })
+                    : '';
+                const destinationItemLabel = getItemLabel(detail.destinationKey, rootRef.current);
+                const reorderStatus = isReorderable && detail.destinationKey
+                    ? translations.accAnnounceMovedKey({
+                        // This acc info is for reordering using context menu hence as per spec source item key is not required.
+                        itemKey: '',
+                        position: detail.position,
+                        referenceKey: destinationItemLabel
+                    })
+                    : '';
+                setAccStatusInfo(removeStatus + reorderStatus);
+            }
+        });
+        setContextMenuContext(defaultContext);
+        setMenuProps({
+            ...menuPropGestureStates[gesture],
+            anchorRef: { current: anchorBasedOnGesture },
+            // This is set so that when no contextMenuConfig is available we need not open it. Example: Apps may choose to open only for removable items and return contextMenuConfig as undefined for non removable ones in such cases it will prevent it from opening.
+            isOpen: contextMenuConfig != null
+        });
+    }, {
+        isDisabled: !contextMenuConfig //If there is no a context menu renderer we disable the hook
+    });
+    const handleCloseContextMenu = hooks.useCallback((detail) => {
+        //Focus has to be set on the current target that was obtained
+        //during context menu gesture when menu is dismissed or item is "selected"
+        if (detail.reason === 'dismissed' || detail.reason === 'itemAction') {
+            setCurrentKey(contextMenuContext?.itemKey);
+            rootRef.current?.focus();
+        }
+        // We close the menu.The only prop that matters here is isOpen
+        setMenuProps({ ...initialMenuProps });
+    }, [rootRef, contextMenuContext?.itemKey]);
+    const eventProps = mergeProps.mergeProps({ onKeyDown, onFocus }, triggerProps);
+    return {
+        rootProps: mergeProps.mergeProps({
+            'aria-activedescendant': currentKey ? tabItemPrefix + currentKey : '',
+            'aria-multiselectable': false,
+            class: className,
+            ref: rootRef,
+            role: 'tablist',
+            tabIndex: 0
+        }, currentKeyProps, focusRingProps, eventProps),
+        tabBarContext: {
+            currentKey,
+            display,
+            isEdgeBottom: edge === 'bottom',
+            layout: 'condense',
+            onRemove,
+            onSelect,
+            showFocusRing,
+            hideTooltip,
+            selection,
+            size,
+            tabItemPrefix
+        },
+        menuProps: { ...menuProps, onClose: handleCloseContextMenu },
+        contextMenuContext,
+        contextMenuDescriptionId,
+        contextMenuDescription,
+        accStatusInfo
+    };
+}
+//useCurrentKey use click capture that captures first click, which is on remove button
+//when we remove and sets the item being removed to currentKey. So we should not allow
+//this if click is on remove button
+const extractOnlyItemKey = (element, itemSelector, itemEliminator) => {
+    const tabBarItem = element.closest(itemSelector);
+    if (tabBarItem) {
+        if (tabBarItem.hasAttribute(REMOVABLE_ITEM_ATTRIBUTE)) {
+            const removeButton = element.closest(itemEliminator);
+            if (removeButton && tabBarItem?.contains(removeButton)) {
+                return null;
+            }
+        }
+        return collectionUtils.getKey(tabBarItem);
+    }
+    return null;
+};
+const findNextValidKey = (currentKey, currTabs, prevTabs) => {
+    const index = prevTabs.indexOf(currentKey);
+    // update current key to be the first one if currentKey is invalid
+    if (index === -1) {
+        return currTabs[0];
+    }
+    let nextIndex = 0;
+    let isLastKey = false;
+    if (index === prevTabs.length - 1) {
+        nextIndex = index - 1;
+        isLastKey = true;
+    }
+    else {
+        nextIndex = index + 1;
+    }
+    while (nextIndex !== index && nextIndex > -1 && nextIndex < prevTabs.length) {
+        const nextKey = prevTabs[nextIndex];
+        if (currTabs.indexOf(nextKey) !== -1) {
+            return nextKey;
+        }
+        isLastKey ? nextIndex-- : nextIndex++;
+    }
+    // update current key to be the first one if we can't find a suitable next key
+    return currTabs[0];
+};
+// Utility that returns the value for a attribute related to the role="tab" item.
+const getItemAttribute = (itemKey, root, attribute) => {
+    const tabBarItem = collectionUtils.findElementByKey(root, itemKey, ITEM_SELECTOR);
+    if (tabBarItem) {
+        const tabBarItemAttribute = tabBarItem.hasAttribute(attribute)
+            ? tabBarItem.getAttribute(attribute)
+            : null;
+        return tabBarItemAttribute;
+    }
+    return;
+};
+// Utility that returns the visible inner text inside the role="tab" item.
+const getItemLabel = (itemKey, root) => {
+    const tabBarItem = collectionUtils.findElementByKey(root, itemKey, ITEM_SELECTOR);
+    if (tabBarItem) {
+        return tabBarItem.innerText;
+    }
+    return;
+};
+
+exports.REMOVABLE_ITEM_ATTRIBUTE = REMOVABLE_ITEM_ATTRIBUTE;
+exports.getItemAttribute = getItemAttribute;
+exports.useTabBar = useTabBar;
+//# sourceMappingURL=useTabBar-114caa2f.js.map