@oracle/oraclejet-preact 15.0.4 → 15.0.5

package/cjs/Link-0cc7311f.js

@@ -1,27 +0,0 @@
-/* @oracle/oraclejet-preact: 15.0.4 */
-'use strict';
-
-var jsxRuntime = require('preact/jsx-runtime');
-require('./utils/UNSAFE_classNames.js');
-var hooks_UNSAFE_usePress = require('./hooks/UNSAFE_usePress.js');
-var hooks_UNSAFE_useComponentTheme = require('./hooks/UNSAFE_useComponentTheme.js');
-var hooks_UNSAFE_useInteractionStyle = require('./hooks/UNSAFE_useInteractionStyle.js');
-var UNSAFE_Link_themes_redwood_LinkTheme = require('./UNSAFE_Link/themes/redwood/LinkTheme.js');
-var classNames = require('./classNames-15680036.js');
-
-const noop = () => { };
-function Link({ href, variant, placement, target, 'aria-describedby': ariaDescribedBy, 'aria-label': accessibleLabel, 'aria-labelledby': ariaLabelledBy, children, onClick }) {
-    const { interactionProps, applyPseudoHoverStyle, applyHoverStyle } = hooks_UNSAFE_useInteractionStyle.useInteractionStyle();
-    const { classes } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_Link_themes_redwood_LinkTheme.LinkRedwoodTheme, {
-        needsEventsHover: applyHoverStyle ? 'isNeedsEventsHover' : 'notNeedsEventsHover',
-        pseudoHover: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover',
-        variant,
-        placement
-    });
-    const linkClasses = classNames.classNames([classes]);
-    const { pressProps } = hooks_UNSAFE_usePress.usePress(onClick ?? noop);
-    return (jsxRuntime.jsx("a", { href: href, "aria-describedby": ariaDescribedBy, "aria-label": accessibleLabel, "aria-labelledby": ariaLabelledBy, target: target, ...pressProps, ...interactionProps, class: linkClasses, children: children }));
-}
-
-exports.Link = Link;
-//# sourceMappingURL=Link-0cc7311f.js.map

package/cjs/Link-0cc7311f.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Link-0cc7311f.js","sources":["../../src/UNSAFE_Link/Link.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren } from 'preact';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { usePress } from '../hooks/UNSAFE_usePress';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { LinkVariantOptions } from './themes/LinkStyles.css';\nimport { useInteractionStyle } from '../hooks/UNSAFE_useInteractionStyle';\nimport { LinkRedwoodTheme } from './themes/redwood/LinkTheme';\n\ntype Props = {\n  /**\n   * Sets the URL that the hyperlink points to.\n   */\n  href: string;\n\n  /**\n   * Sets the variant. The default value of this property is theme driven.\n   */\n  variant?: 'standard' | 'primary' | 'secondary';\n\n  /**\n   * Sets the placement.\n   */\n  placement?: 'standalone' | 'embedded';\n\n  /**\n   * Sets the target.\n   */\n  target?: string;\n\n  /**\n   * Specifies id for element (or elements) that describes the object.\n   */\n  'aria-describedby'?: string;\n\n  /**\n   * A label to be used for accessibility purposes.\n   */\n  'aria-label'?: string;\n\n  /**\n   * One or more ids (separated by spaces) of elements that label the Link.\n   */\n  'aria-labelledby'?: string;\n\n  /**\n   * Triggered when a link is clicked, whether by keyboard, mouse, or touch events.\n   */\n  onClick?: (event: Event) => void;\n\n  /**\n   * Specifies the children\n   */\n  children?: ComponentChildren;\n};\n\nconst noop = () => {};\n\nexport function Link({\n  href,\n  variant,\n  placement,\n  target,\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': accessibleLabel,\n  'aria-labelledby': ariaLabelledBy,\n  children,\n  onClick\n}: Props) {\n  const { interactionProps, applyPseudoHoverStyle, applyHoverStyle } = useInteractionStyle();\n  const { classes } = useComponentTheme<LinkVariantOptions>(LinkRedwoodTheme, {\n    needsEventsHover: applyHoverStyle ? 'isNeedsEventsHover' : 'notNeedsEventsHover',\n    pseudoHover: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover',\n    variant,\n    placement\n  });\n  const linkClasses = classNames([classes]);\n  const { pressProps } = usePress(onClick ?? noop);\n  return (\n    <a\n      href={href}\n      aria-describedby={ariaDescribedBy}\n      aria-label={accessibleLabel}\n      aria-labelledby={ariaLabelledBy}\n      target={target}\n      {...pressProps}\n      {...interactionProps}\n      class={linkClasses}>\n      {children}\n    </a>\n  );\n}\n"],"names":["useInteractionStyle","useComponentTheme","LinkRedwoodTheme","classNames","usePress","_jsx"],"mappings":";;;;;;;;;;;AA8DA,MAAM,IAAI,GAAG,MAAK,GAAG,CAAC;AAEhB,SAAU,IAAI,CAAC,EACnB,IAAI,EACJ,OAAO,EACP,SAAS,EACT,MAAM,EACN,kBAAkB,EAAE,eAAe,EACnC,YAAY,EAAE,eAAe,EAC7B,iBAAiB,EAAE,cAAc,EACjC,QAAQ,EACR,OAAO,EACD,EAAA;IACN,MAAM,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,eAAe,EAAE,GAAGA,oDAAmB,EAAE,CAAC;AAC3F,IAAA,MAAM,EAAE,OAAO,EAAE,GAAGC,gDAAiB,CAAqBC,qDAAgB,EAAE;QAC1E,gBAAgB,EAAE,eAAe,GAAG,oBAAoB,GAAG,qBAAqB;QAChF,WAAW,EAAE,qBAAqB,GAAG,eAAe,GAAG,gBAAgB;QACvE,OAAO;QACP,SAAS;AACV,KAAA,CAAC,CAAC;IACH,MAAM,WAAW,GAAGC,qBAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1C,MAAM,EAAE,UAAU,EAAE,GAAGC,8BAAQ,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC;IACjD,QACEC,cACE,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,IAAI,EACQ,kBAAA,EAAA,eAAe,EACrB,YAAA,EAAA,eAAe,EACV,iBAAA,EAAA,cAAc,EAC/B,MAAM,EAAE,MAAM,EACV,GAAA,UAAU,EACV,GAAA,gBAAgB,EACpB,KAAK,EAAE,WAAW,EACjB,QAAA,EAAA,QAAQ,EACP,CAAA,EACJ;AACJ;;;;"}

package/cjs/List-22088681.js

@@ -1,576 +0,0 @@
-/* @oracle/oraclejet-preact: 15.0.4 */
-'use strict';
-
-var jsxRuntime = require('preact/jsx-runtime');
-var hooks = require('preact/hooks');
-require('./utils/UNSAFE_classNames.js');
-var utils_UNSAFE_mergeProps = require('./utils/UNSAFE_mergeProps.js');
-var utils_UNSAFE_keys = require('./utils/UNSAFE_keys.js');
-require('./PRIVATE_LoadMoreCollection.js');
-require('./PRIVATE_VirtualizedCollection.js');
-var compat = require('preact/compat');
-var hooks_UNSAFE_useTabbableMode = require('./hooks/UNSAFE_useTabbableMode.js');
-require('./UNSAFE_FocusTrap.js');
-var hooks_UNSAFE_useId = require('./hooks/UNSAFE_useId.js');
-var hooks_UNSAFE_useInteractionStyle = require('./hooks/UNSAFE_useInteractionStyle.js');
-var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
-require('./utils/UNSAFE_interpolations/flexitem.js');
-var PRIVATE_List_themes_ListStyles_css = require('./PRIVATE_List/themes/ListStyles.css.js');
-var classNames = require('./classNames-15680036.js');
-var flexitem = require('./flexitem-31f3a60b.js');
-var FocusTrap = require('./FocusTrap-781b3956.js');
-var hooks_PRIVATE_useSelection = require('./hooks/PRIVATE_useSelection.js');
-var hooks_PRIVATE_useCurrentKey = require('./hooks/PRIVATE_useCurrentKey.js');
-var hooks_PRIVATE_useCollectionFocusRing = require('./hooks/PRIVATE_useCollectionFocusRing.js');
-var hooks_PRIVATE_useTabbableModeSet = require('./hooks/PRIVATE_useTabbableModeSet.js');
-var hooks_PRIVATE_useItemAction = require('./hooks/PRIVATE_useItemAction.js');
-var SkeletonContainer = require('./SkeletonContainer-d0a77392.js');
-require('./UNSAFE_Skeleton.js');
-require('./UNSAFE_Flex.js');
-var utils_PRIVATE_collectionUtils = require('./utils/PRIVATE_collectionUtils.js');
-var UNSAFE_Selector = require('./UNSAFE_Selector.js');
-var hooks_PRIVATE_useCollectionGestureContext = require('./hooks/PRIVATE_useCollectionGestureContext.js');
-var VirtualizedCollection = require('./VirtualizedCollection-fb74da87.js');
-var LoadMoreCollection = require('./LoadMoreCollection-bdba5c2b.js');
-var Flex = require('./Flex-fb25b0b4.js');
-var Skeleton = require('./Skeleton-2a20b9c4.js');
-
-/**
- * @license
- * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
- * The Universal Permissive License (UPL), Version 1.0
- * as shown at https://oss.oracle.com/licenses/upl/
- * @ignore
- */
-/**
- * List Roles need to be kept in matching sets, this module encapsulates the sets
- *
- * @param ariaRole
- * @returns matching, valid set of roles
- */
-const getListViewRoles = (ariaRole) => {
-    switch (ariaRole) {
-        case 'listbox':
-            return { list: 'listbox', item: 'presentation', cell: 'option' };
-        case 'treegrid':
-            return { list: 'treegrid', item: 'row', cell: 'gridcell' };
-        default:
-            return { list: 'grid', item: 'row', cell: 'gridcell' };
-    }
-};
-
-// default style class for items in ListView
-const ITEM_STYLE_CLASS = 'oj-c-listview-item';
-const ITEM_SELECTOR = '.' + ITEM_STYLE_CLASS;
-/**
- * The internal component used to render a single item in ListView.
- */
-function ListViewItem({ children, itemKey, itemIndex, itemDepth, isFocused, isFocusRingVisible, isActive, isGridlineVisible, isSelected, isTopGridlineVisible = false, isTabbable = false, role, selectionMode, suggestion, currentItemVariant }) {
-    const rootRef = hooks.useRef(null);
-    const roles = hooks.useMemo(() => getListViewRoles(role), [role]);
-    // some roles come with related aria attributes which need to be set
-    const cellRoleAttributes = roles.cell === 'option'
-        ? {
-            role: roles.cell,
-            'aria-posinset': itemIndex + 1,
-            'aria-setsize': -1
-        }
-        : {
-            role: roles.cell
-        };
-    // don't bubble Arrow Up and Down events to parent when in isTabbable mode
-    // this bubbling causes the outer CollectionFocus ring to change index while in the isTabbable mode.
-    const handleKeyDown = (event) => {
-        if (isTabbable && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-            event.stopPropagation();
-        }
-    };
-    const { interactionProps, applyActiveStyle, applyHoverStyle, applyPseudoHoverStyle } = hooks_UNSAFE_useInteractionStyle.useInteractionStyle();
-    const variantClasses = PRIVATE_List_themes_ListStyles_css.listItemMultiVariantStyles({
-        selectable: isSelectable(selectionMode, isSelected) ? 'isSelectable' : 'notSelectable',
-        selected: isSelected ? 'isSelected' : 'notSelected',
-        selectedSingle: isSelected && selectionMode === 'single' ? 'isSelectedSingle' : 'notSelectedSingle',
-        needsEventsHover: applyHoverStyle ? 'isNeedsEventsHover' : 'notNeedsEventsHover',
-        pseudoHover: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover',
-        active: applyActiveStyle || isActive ? 'isActive' : 'notActive',
-        focusHighlight: currentItemVariant === 'highlight' && isFocused ? 'isFocusHighlight' : 'notFocusHighlight',
-        focusRingVisible: isFocusRingVisible && isFocused ? 'isFocusRingVisible' : 'notFocusRingVisible',
-        gridlineTop: isTopGridlineVisible ? 'visible' : 'hidden',
-        gridlineBottom: isGridlineVisible ||
-            (suggestion === 'end' && !isGridlineVisible && (!isSelected || selectionMode !== 'single'))
-            ? 'visible'
-            : 'hidden'
-    });
-    const classes = classNames.classNames([ITEM_STYLE_CLASS, variantClasses]);
-    const styleInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations([
-        ...Object.values(flexitem.flexitemInterpolations)
-    ]);
-    const { class: cls, ...cellStyles } = styleInterpolations({
-        flex: '1 1 auto',
-        alignSelf: 'center'
-    });
-    const cellClasses = classNames.classNames([
-        cls,
-        selectionMode === 'multiple' && PRIVATE_List_themes_ListStyles_css.listItemStyles.checkboxContainer
-    ]);
-    // todo: use translated text for selector
-    // note cannot put focus on gridcell div since JAWS will not read the aria-rowindex
-    // correctly, so unfortunately needed another div
-    return (jsxRuntime.jsx("div", { "aria-rowindex": itemIndex + 1, "aria-level": itemDepth, "data-oj-key": itemKey, class: classes, ref: rootRef, role: roles.item, ...(suggestion && { 'data-oj-suggestion': true }), ...(typeof itemKey === 'number' && { 'data-oj-key-type': 'number' }), ...interactionProps, children: jsxRuntime.jsx("div", { id: hooks_UNSAFE_useId.useId(), style: cellStyles, class: cellClasses, "aria-posinset": itemIndex + 1, "aria-setsize": -1, onKeyDown: handleKeyDown, "aria-colindex": 1, "aria-selected": selectionMode !== 'none' ? isSelected : undefined, ...cellRoleAttributes, children: jsxRuntime.jsx(hooks_UNSAFE_useTabbableMode.TabbableModeContext.Provider, { value: { isTabbable }, children: jsxRuntime.jsx(FocusTrap.FocusTrap, { isDisabled: !isTabbable, restoreFocusRef: false, children: children }) }) }) }));
-}
-/**
- * Helper method to determine whether item is selectable
- * @returns true if item is selectable (show hover effect), false otherwise
- */
-const isSelectable = (selectionMode, isItemSelected) => {
-    return selectionMode !== 'none' && (selectionMode === 'multiple' || !isItemSelected);
-};
-const MemoizeListViewItem = compat.memo(ListViewItem, (prev, next) => {
-    if (prev && next) {
-        return (prev.itemKey === next.itemKey &&
-            prev.itemIndex === next.itemIndex &&
-            prev.itemData === next.itemData &&
-            prev.isFocused === next.isFocused &&
-            prev.isFocusRingVisible === next.isFocusRingVisible &&
-            prev.isSelected === next.isSelected &&
-            prev.isTabbable === next.isTabbable &&
-            prev.isActive === next.isActive &&
-            prev.suggestion === next.suggestion);
-    }
-    return false;
-});
-
-/**
- * @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
- */
-/**
- * Hook to detect and handle when the current key has been removed
- * and try to find the next available current key.
- * TODO: put in its own private module as we should be able to share
- * between other Collection components.
- * @param dataState
- * @param currentKey
- * @param onChange
- */
-function useHandleRemoveCurrentKey(dataState, currentKey, onChange) {
-    const prevDataState = hooks.useRef();
-    hooks.useEffect(() => {
-        const oldDataState = prevDataState.current;
-        if (currentKey &&
-            onChange &&
-            oldDataState &&
-            dataState &&
-            oldDataState.offset === dataState.offset &&
-            oldDataState !== dataState) {
-            const newKeys = dataState.data.map((dataMetadata) => {
-                return dataMetadata.metadata.key;
-            });
-            // first check if currentKey exists in new data, if it is then we
-            // don't need to do anything
-            if (newKeys.indexOf(currentKey) === -1) {
-                const oldKeys = oldDataState?.data.map((dataMetadata) => {
-                    return dataMetadata.metadata.key;
-                });
-                // figure out what the new currentKey should be
-                let index = oldKeys.indexOf(currentKey);
-                if (index > -1) {
-                    const backward = index === oldKeys.length - 1;
-                    while (index >= 0 && index < oldKeys.length) {
-                        index = backward ? index - 1 : index + 1;
-                        const newCurrentKey = oldKeys[index];
-                        if (newKeys.indexOf(newCurrentKey) > -1) {
-                            onChange({ value: newCurrentKey });
-                            break;
-                        }
-                    }
-                }
-            }
-        }
-        // update previous DataState
-        prevDataState.current = dataState;
-    }, [dataState, currentKey, onChange]);
-}
-
-const SPARKLE_STYLE_CLASS = 'oj-collection-sparkle';
-/**
- * A sparkle component for smart suggestion indicator in ListView
- * @param sparkleHeight the height of sparkle
- */
-function Sparkle({ sparkleHeight }) {
-    if (sparkleHeight <= 0) {
-        return null;
-    }
-    const height = sparkleHeight + 'px';
-    const sparkleClasses = classNames.classNames([PRIVATE_List_themes_ListStyles_css.sparkleStyles.base]);
-    const containerClasses = classNames.classNames([PRIVATE_List_themes_ListStyles_css.sparkleStyles.container, SPARKLE_STYLE_CLASS]);
-    return (jsxRuntime.jsx("div", { class: containerClasses, children: jsxRuntime.jsx("div", { class: sparkleClasses, style: { height } }) }, "sparkle"));
-}
-/**
- * A helper function that finds the data with suggestions, and
- * returns the corresponding keys
- * @param dataState
- */
-const findSuggestions = (data, count) => {
-    if (count === 0) {
-        return null;
-    }
-    const suggestionsData = data.slice(0, count);
-    return suggestionsData.reduce((suggestions, value, index) => {
-        const key = value.metadata.key;
-        if (index === count - 1) {
-            suggestions.set(key, 'end');
-        }
-        else {
-            suggestions.set(key, true);
-        }
-        return suggestions;
-    }, new Map());
-};
-
-/**
- * Component that renders items as a flat list.
- * In order to maximize performance, only items that are visible in the viewport are rendered.
- */
-function List({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, allowTabbableMode = true, children, currentKey, data, gridlines, loadingIndicator = defaultLoadingIndicator, onCurrentKeyChange, onLoadRange, onSelectionChange, onItemAction, rangeExtractor, role = 'grid', selectedKeys = emptyKeys, selectionMode = 'none', viewportConfig, currentItemVariant = 'none', promotedSection, isVirtualized = true, customItemRenderer, eventHandlers, scrollToVisibleOffset }) {
-    const rootRef = hooks.useRef(null);
-    const listRoles = hooks.useMemo(() => getListViewRoles(role), [role]);
-    // tracking the anchor key which is used for shift+click selection
-    const anchorKey = hooks.useRef();
-    // tracking pending selection/current key that is not in current data
-    const pendingSelection = hooks.useRef();
-    const pendingCurrentKey = hooks.useRef();
-    const [active, setActive] = hooks.useState(false);
-    // tracking sparkle height
-    const [sparkleHeight, setSparkleHeight] = hooks.useState(0);
-    const showGridline = (index) => {
-        // show bottom gridlines for each item, and for the last item if specified
-        return (gridlines?.item === 'visible' &&
-            (index + 1 !== data?.totalSize || gridlines?.bottom === 'visible'));
-    };
-    const showGridlineTop = () => {
-        // show the top gridline for the first item
-        return gridlines?.item === 'visible' && gridlines?.top === 'visible';
-    };
-    const ariaMultiSelectable = selectionMode === 'none' ? undefined : selectionMode === 'multiple';
-    const ariaRowCount = data === null ? undefined : data.sizePrecision === 'exact' ? data.totalSize : -1;
-    const classes = classNames.classNames([PRIVATE_List_themes_ListStyles_css.listStyles.base]);
-    // find out whether the current key was there before in prev render
-    // and adjust current key as needed.  This should be run before other
-    // useEffect(s) that could also alter current key.
-    useHandleRemoveCurrentKey(data, currentKey, onCurrentKeyChange);
-    const { currentKeyProps } = hooks_PRIVATE_useCurrentKey.useCurrentKey((element) => utils_PRIVATE_collectionUtils.keyExtractor(element, ITEM_SELECTOR), selectionMode !== 'multiple', utils_PRIVATE_collectionUtils.getPrevNextKey(rootRef.current, currentKey, true, ITEM_SELECTOR), utils_PRIVATE_collectionUtils.getPrevNextKey(rootRef.current, currentKey, false, ITEM_SELECTOR), undefined, undefined, currentKey, onCurrentKeyChange);
-    const listViewContains = (elem) => {
-        return !!rootRef.current?.contains(elem);
-    };
-    const [showFocusRing, focusRingProps] = hooks_PRIVATE_useCollectionFocusRing.useCollectionFocusRing(listViewContains, [
-        'ArrowUp',
-        'ArrowDown'
-    ]);
-    let pendingFocusRingChange = false;
-    const [isCurrentTabbableKey, tabbableModeProps] = hooks_PRIVATE_useTabbableModeSet.useTabbableModeSet(listViewContains, (element) => {
-        // we don't want List to go into Tabbable mode when user clicks on expander
-        return isExpander(element) ? null : utils_PRIVATE_collectionUtils.keyExtractor(element, ITEM_SELECTOR);
-    }, currentKey, 
-    // handle clean-up on disabling of the mode
-    (target, isKeyboardEvent) => {
-        if (listViewContains(target)) {
-            // delay focus reset for keyboard disable so focus is reset to ListView after the FocusTrap blur lifecycle completes.
-            // pointer initiated changes will fire the onBlur organically and delaying the focus, just generates an unwanted second blur
-            if (isKeyboardEvent) {
-                // do not show a focus ring during this timeOut
-                pendingFocusRingChange = true;
-                setTimeout(() => {
-                    rootRef.current?.focus();
-                }, 0);
-            }
-            else {
-                rootRef.current?.focus();
-            }
-        }
-        // otherwise target is not in list (including body, which target should be null in that case)
-    }, 
-    // set currentKey when mode is enabled
-    (key) => {
-        onCurrentKeyChange && onCurrentKeyChange({ value: key });
-    });
-    hooks.useEffect(() => {
-        if (currentKey != null && rootRef.current) {
-            const elem = utils_PRIVATE_collectionUtils.findElementByKey(rootRef.current, currentKey, ITEM_SELECTOR);
-            if (elem) {
-                const activeDescendant = rootRef.current.getAttribute('aria-activedescendant');
-                const cell = elem.querySelector(`[role=${listRoles.cell}]`);
-                if (cell && activeDescendant !== cell.id) {
-                    // update aria-activedescendant for screenreader
-                    rootRef.current.setAttribute('aria-activedescendant', cell.id);
-                    const scroller = viewportConfig?.scroller();
-                    const offset = scrollToVisibleOffset ? scrollToVisibleOffset(rootRef.current) : 0;
-                    // make sure item is visible
-                    scrollToVisible(elem, scroller != null ? scroller : rootRef.current, offset);
-                }
-            }
-        }
-        // listen to data because the current item would re-render when the virtualizer
-        // is fetching data or updating the data, i.e. the id of current item would be updated,
-        // so the currentKey itself couldn't guarantee the root has latest aria-activedescendant
-    }, [currentKey, data, listRoles.cell, viewportConfig]);
-    const handleSelectionChange = hooks.useCallback((detail) => {
-        if (onSelectionChange) {
-            if (detail.value.all === false && detail.value.keys.size > 0) {
-                // the last key selected by a user gesture is the anchor key
-                anchorKey.current = Array.from(detail.value.keys.values()).pop();
-            }
-            onSelectionChange(detail);
-        }
-    }, [anchorKey, onSelectionChange]);
-    const handleSelectionRangeChange = hooks.useCallback((detail) => {
-        if (data && onSelectionChange) {
-            const value = handleSelectionRange(detail, data);
-            if (Array.isArray(value)) {
-                onSelectionChange({ value: { all: false, keys: new Set(value) }, target: null });
-            }
-            else {
-                pendingSelection.current = {
-                    detail: detail,
-                    range: { offset: data.offset, count: data.data.length }
-                };
-                onLoadRange(value);
-            }
-        }
-    }, [data, onSelectionChange, onLoadRange]);
-    const handleInitialFocus = hooks.useCallback(() => {
-        if (rootRef.current &&
-            onCurrentKeyChange &&
-            (!allowTabbableMode || isCurrentTabbableKey(undefined))) {
-            const firstKey = pendingCurrentKey.current || utils_PRIVATE_collectionUtils.getFirstVisibleKey(rootRef.current, ITEM_SELECTOR);
-            if (utils_UNSAFE_keys.isKeyDefined(firstKey)) {
-                onCurrentKeyChange({ value: firstKey });
-            }
-        }
-    }, [allowTabbableMode, onCurrentKeyChange, isCurrentTabbableKey]);
-    /**
-     * Used by allowTabbableMode = false, to prevent focus from getting onto checkboxes on click
-     * @param event
-     */
-    const handleSelectorFocusCapture = hooks.useCallback((event) => {
-        const key = utils_PRIVATE_collectionUtils.keyExtractor(event.target, ITEM_SELECTOR);
-        if (key && event.relatedTarget?.getAttribute('type') === 'checkbox') {
-            rootRef.current?.focus();
-            if (onCurrentKeyChange && key) {
-                onCurrentKeyChange({ value: key });
-            }
-        }
-    }, [onCurrentKeyChange]);
-    const handleFocus = hooks.useCallback((event) => {
-        if (isExpander(event.target)) {
-            rootRef.current?.focus();
-            const key = utils_PRIVATE_collectionUtils.keyExtractor(event.target, ITEM_SELECTOR);
-            if (onCurrentKeyChange && key) {
-                onCurrentKeyChange({ value: key });
-            }
-            return;
-        }
-        !utils_UNSAFE_keys.isKeyDefined(currentKey) && onCurrentKeyChange && handleInitialFocus();
-        !allowTabbableMode && handleSelectorFocusCapture(event);
-    }, [
-        allowTabbableMode,
-        currentKey,
-        handleInitialFocus,
-        handleSelectorFocusCapture,
-        onCurrentKeyChange
-    ]);
-    const value = hooks_PRIVATE_useCollectionGestureContext.useCollectionGestureContext();
-    const { selectionProps } = hooks_PRIVATE_useSelection.useSelection((element) => {
-        if (element === rootRef.current) {
-            return currentKey === undefined ? null : currentKey;
-        }
-        return utils_PRIVATE_collectionUtils.keyExtractor(element, ITEM_SELECTOR);
-    }, selectedKeys, selectionMode, false, 'replace', value === 'embedded', handleSelectionChange, anchorKey.current, currentKey, (currentKey, isPrev) => utils_PRIVATE_collectionUtils.getPrevNextKey(rootRef.current, currentKey, isPrev, ITEM_SELECTOR), undefined, (key) => {
-        if (rootRef.current) {
-            const elem = utils_PRIVATE_collectionUtils.findElementByKey(rootRef.current, key, ITEM_SELECTOR);
-            if (elem) {
-                const scroller = viewportConfig?.scroller();
-                const offset = scrollToVisibleOffset ? scrollToVisibleOffset(rootRef.current) : 0;
-                scrollToVisible(elem, scroller != null ? scroller : rootRef.current, offset);
-            }
-        }
-    }, handleSelectionRangeChange);
-    if (data && pendingSelection.current !== undefined && onSelectionChange) {
-        const keys = handleSelectionRange(pendingSelection.current.detail, data);
-        if (Array.isArray(keys)) {
-            onSelectionChange({ value: { all: false, keys: new Set(keys) }, target: null });
-        }
-        const range = pendingSelection.current
-            ? pendingSelection.current.range
-            : { offset: data.offset, count: data.data.length };
-        data = adjustDataState(data, range);
-        pendingSelection.current = undefined;
-        onLoadRange(range);
-    }
-    const suggestions = hooks.useMemo(() => data && promotedSection && findSuggestions(data.data, promotedSection.count), [data, promotedSection]);
-    // TODO: check suggestions before Sparkle would cause a scrolling issue
-    const sparkleIndicator = jsxRuntime.jsx(Sparkle, { sparkleHeight: sparkleHeight });
-    const itemActionProps = hooks_PRIVATE_useItemAction.useItemAction(currentKey, data, onItemAction, ITEM_SELECTOR, value === 'embedded');
-    hooks.useEffect(() => {
-        // update sparkleHeight only when we have suggestions
-        // avoid unnecessary iterating through elements
-        if (suggestions) {
-            const placeholder = rootRef.current?.querySelector('.' + VirtualizedCollection.PLACEHOLDER_STYLE_CLASS);
-            let height = placeholder?.offsetHeight || 0;
-            const suggestionItems = rootRef.current?.querySelectorAll('[data-oj-suggestion]');
-            suggestionItems?.forEach((item) => (height += item.offsetHeight));
-            setSparkleHeight(height);
-        }
-    }, [suggestions]);
-    // returns an ListItemContext based on ItemContext (added metadata and selector)
-    const getItemContext = hooks.useCallback((context) => {
-        const selectorRenderer = selectionMode === 'multiple'
-            ? () => (jsxRuntime.jsx(UNSAFE_Selector.Selector, { onChange: handleSelectionChange, rowKey: context.data.metadata.key, selectedKeys: selectedKeys }))
-            : undefined;
-        return {
-            index: context.index,
-            data: context.data.data,
-            metadata: context.data.metadata,
-            selector: selectorRenderer
-        };
-    }, [selectionMode, selectedKeys, handleSelectionChange]);
-    const ItemComponent = isVirtualized ? ListViewItem : MemoizeListViewItem;
-    const childrenComponent = (context) => {
-        const listItemContext = getItemContext(context);
-        const suggestion = suggestions?.get(listItemContext.metadata.key);
-        const isTabbable = allowTabbableMode && isCurrentTabbableKey(listItemContext.metadata.key);
-        const isFocused = currentKey === listItemContext.metadata.key && !isTabbable;
-        const isActive = isFocused && active;
-        const isSelected = utils_UNSAFE_keys.containsKey(selectedKeys, listItemContext.metadata.key);
-        const isFocusRingVisible = isFocused && showFocusRing && !pendingFocusRingChange;
-        const listItemFunc = (context, otherProps) => (jsxRuntime.jsx(ItemComponent, { isFocused: isFocused, isFocusRingVisible: isFocusRingVisible, isActive: isActive, isGridlineVisible: showGridline(listItemContext.index), isSelected: isSelected, isTabbable: allowTabbableMode && isCurrentTabbableKey(listItemContext.metadata.key), itemIndex: listItemContext.index, itemKey: listItemContext.metadata.key, itemData: listItemContext.data, role: role, selectionMode: selectionMode, currentItemVariant: currentItemVariant, ...(suggestion && { suggestion }), ...(listItemContext.index === 0 && { isTopGridlineVisible: showGridlineTop() }), ...otherProps, children: children(context) }, listItemContext.metadata.key));
-        // if customItemRenderer is specified (ExpandableList and GroupedList)
-        // create a custom context with additional info including a function
-        // that helps create the default item component
-        if (customItemRenderer) {
-            const customRendererContext = {
-                listItemContext,
-                isFocused,
-                isFocusRingVisible,
-                isSelected,
-                isTabbable,
-                isActive,
-                defaultListItem: listItemFunc
-            };
-            return customItemRenderer(customRendererContext);
-        }
-        return listItemFunc(listItemContext);
-    };
-    viewportConfig = getViewportConfig(rootRef, viewportConfig);
-    /**
-     * Need to track pointer down element to set currentItem when initial focus happens
-     */
-    const handlePointerDown = hooks.useCallback((event) => {
-        const key = utils_PRIVATE_collectionUtils.keyExtractor(event.target, ITEM_SELECTOR);
-        if (utils_UNSAFE_keys.isKeyDefined(key))
-            pendingCurrentKey.current = key;
-    }, []);
-    const handleKeyDown = hooks.useCallback((event) => {
-        if (event.key === ' ' && currentKey && selectionMode !== 'none') {
-            setActive(true);
-        }
-    }, [currentKey, selectionMode, setActive]);
-    const handleKeyUp = hooks.useCallback(() => {
-        setActive(false);
-    }, [setActive]);
-    // if data is not specified, listview should show loading indicator
-    // todo: replace placeholder with actual SkeletonContainer component (Ash is working on)
-    return (jsxRuntime.jsx("div", { ...utils_UNSAFE_mergeProps.mergeProps(allowTabbableMode ? tabbableModeProps : {}, currentKeyProps, focusRingProps, selectionProps, itemActionProps, {
-            onFocus: handleFocus,
-            onPointerDown: handlePointerDown,
-            onKeyDown: handleKeyDown,
-            onKeyUp: handleKeyUp
-        }, eventHandlers !== undefined ? eventHandlers : {}), role: role, "aria-rowcount": ariaRowCount, "aria-colcount": 1, ref: rootRef, class: classes, tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-multiselectable": ariaMultiSelectable, children: data == null ? (loadingIndicator) : isVirtualized ? (jsxRuntime.jsx(VirtualizedCollection.VirtualizedCollection, { data: data, itemSelector: ITEM_SELECTOR, loadMoreIndicator: defaultLoadMoreIndicator, onLoadRange: onLoadRange, rangeExtractor: rangeExtractor, suggestions: sparkleIndicator, viewportConfig: viewportConfig, children: childrenComponent })) : (jsxRuntime.jsx(LoadMoreCollection.LoadMoreCollection, { data: data.data, loadMoreIndicator: defaultLoadMoreIndicator, hasMore: data.sizePrecision === 'atLeast' && data.data.length <= data.totalSize, onLoadMore: () => {
-                data && onLoadRange({ offset: 0, count: data.data.length + 25 });
-            }, suggestions: sparkleIndicator, viewportConfig: viewportConfig, children: childrenComponent })) }));
-}
-const isExpander = (elem) => {
-    if (elem.parentElement && elem.parentElement.classList.contains('oj-listview-expander')) {
-        return true;
-    }
-    return false;
-};
-/**
- * A helper function to make sure specified elem is visible in the specified container
- */
-const scrollToVisible = (elem, scroller, offset) => {
-    if (elem && scroller) {
-        if (elem.scrollIntoViewIfNeeded) {
-            // for Safari, we'll need the non-standard scrollIntoViewIfNeeded
-            elem.scrollIntoViewIfNeeded();
-        }
-        else {
-            elem.scrollIntoView({ block: 'nearest' });
-        }
-        if (offset > 0) {
-            const scrollerBounds = scroller.getBoundingClientRect();
-            const elemBounds = elem.getBoundingClientRect();
-            const diff = scrollerBounds.top + offset - elemBounds.top;
-            if (diff > 0) {
-                scroller.scrollTop = scroller.scrollTop - diff;
-            }
-        }
-    }
-};
-const getViewportConfig = (rootRef, config) => {
-    return (config ?? {
-        scroller: () => {
-            return rootRef.current;
-        }
-    });
-};
-const emptyKeys = { all: false, keys: new Set() };
-const handleSelectionRange = (detail, dataState) => {
-    const keys = dataState.data.map((value) => {
-        return value.metadata.key;
-    });
-    const startIndex = keys.indexOf(detail.value.start);
-    const endIndex = keys.indexOf(detail.value.end);
-    const minIndex = Math.min(startIndex, endIndex);
-    const maxIndex = Math.max(startIndex, endIndex);
-    if (minIndex === -1) {
-        // return a range to fetch so we can find all the keys, maxIndex should not be -1
-        return { offset: 0, count: dataState.totalSize };
-    }
-    else {
-        // range of keys are in the current viewport, return them
-        return keys.slice(minIndex, maxIndex + 1);
-    }
-};
-const defaultLoadingIndicator = (jsxRuntime.jsx(SkeletonContainer.SkeletonContainer, { minimumCount: 25, children: () => {
-        return (jsxRuntime.jsx(Flex.Flex, { height: "12x", align: "center", children: jsxRuntime.jsx(Skeleton.Skeleton, { height: "4x" }) }));
-    } }));
-const defaultLoadMoreIndicator = (jsxRuntime.jsx("div", { class: LoadMoreCollection.LOADMORE_STYLE_CLASS, children: jsxRuntime.jsx(SkeletonContainer.SkeletonContainer, { minimumCount: 3, children: () => {
-            return (jsxRuntime.jsx(Flex.Flex, { height: "12x", align: "center", children: jsxRuntime.jsx(Skeleton.Skeleton, { height: "4x" }) }));
-        } }) }));
-/**
- * Adjust the DataState as needed if it contains more than needed for the specified range
- */
-const adjustDataState = (dataState, range) => {
-    if (range) {
-        // prevent range offset from being larger than the data state
-        const safeRangeOffset = Math.min(range.offset, dataState.offset + dataState.totalSize);
-        const diff = safeRangeOffset - dataState.offset;
-        if (diff > 0) {
-            dataState = {
-                offset: safeRangeOffset,
-                data: dataState.data.slice(diff, diff + range.count),
-                totalSize: dataState.totalSize,
-                sizePrecision: dataState.sizePrecision
-            };
-        }
-    }
-    return dataState;
-};
-
-exports.ITEM_STYLE_CLASS = ITEM_STYLE_CLASS;
-exports.List = List;
-//# sourceMappingURL=List-22088681.js.map