@oracle/oraclejet-preact 14.0.0

package/es/PRIVATE_List.js

@@ -0,0 +1,732 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { jsx } from 'preact/jsx-runtime';
+import { useRef, useMemo, useState, useEffect, useCallback } from 'preact/hooks';
+import "./PRIVATE_List.css";
+import { classNames } from './utils/UNSAFE_classNames.js';
+import { mergeProps } from './utils/UNSAFE_mergeProps.js';
+import { isKeyDefined, containsKey } from './utils/UNSAFE_keys.js';
+import { L as LoadMoreCollection } from './LoadMoreCollection-5d3b319f.js';
+import { PLACEHOLDER_STYLE_CLASS, VirtualizedCollection } from './PRIVATE_VirtualizedCollection.js';
+import { TabbableModeContext } from './hooks/UNSAFE_useTabbableMode.js';
+import { FocusTrap } from './UNSAFE_FocusTrap.js';
+import { useId } from './hooks/UNSAFE_useId.js';
+import { useSelection } from './hooks/PRIVATE_useSelection.js';
+import { useCurrentKey } from './hooks/PRIVATE_useCurrentKey.js';
+import { useCollectionFocusRing } from './hooks/PRIVATE_useCollectionFocusRing.js';
+import { useTabbableModeSet } from './hooks/PRIVATE_useTabbableModeSet.js';
+import { useItemAction } from './hooks/PRIVATE_useItemAction.js';
+import { Skeleton } from './UNSAFE_Skeleton.js';
+import { Flex } from './UNSAFE_Flex.js';
+import { keyExtractor, getPrevNextKey, findElementByKey, getFirstVisibleKey } from './utils/PRIVATE_collectionUtils.js';
+import { Selector } from './UNSAFE_Selector.js';
+import './PRIVATE_Collection.js';
+import 'preact';
+import './hooks/UNSAFE_useViewportIntersect.js';
+import './utils/UNSAFE_arrayUtils.js';
+import 'preact/compat';
+import './utils/PRIVATE_tabbableUtils.js';
+import './_curry1-d822c6e1.js';
+import './_curry2-50442f66.js';
+import './_curry3-ddab9fe1.js';
+import './tslib.es6-8b94ba02.js';
+import './utils/UNSAFE_interpolations/dimensions.js';
+import './utils/UNSAFE_size.js';
+import './utils/UNSAFE_mergeInterpolations.js';
+import './_has-c4aaaf43.js';
+import './utils/UNSAFE_interpolations/borders.js';
+import './utils/UNSAFE_interpolations/boxalignment.js';
+import './keys-fed67954.js';
+import './utils/UNSAFE_interpolations/flexbox.js';
+import './utils/UNSAFE_interpolations/flexitem.js';
+import './UNSAFE_ThemedIcons.js';
+import './UNSAFE_Icons.js';
+import './UNSAFE_Icon.js';
+import './hooks/UNSAFE_useTooltip.js';
+import './UNSAFE_Floating.js';
+import './index-14bba6f7.js';
+import './hooks/UNSAFE_useUser.js';
+import './UNSAFE_Environment.js';
+import './UNSAFE_Layer.js';
+import './utils/PRIVATE_floatingUtils.js';
+import './utils/PRIVATE_refUtils.js';
+import './hooks/UNSAFE_useOutsideClick.js';
+import './hooks/UNSAFE_useHover.js';
+import './hooks/UNSAFE_useToggle.js';
+import './hooks/UNSAFE_useFocus.js';
+import './hooks/UNSAFE_useTouch.js';
+import './hooks/UNSAFE_useAnimation.js';
+import './hooks/UNSAFE_useTheme.js';
+import './hooks/UNSAFE_useTranslationBundle.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' };
+    }
+};
+
+const ITEM_STYLE_CLASS = 'oj-listview-item';
+const ITEM_SELECTOR = '.' + ITEM_STYLE_CLASS;
+const styles$1 = {
+  base: "_1wn6f50",
+  gridlines: "_1dc6pox",
+  gridlineTop: "nnr2us",
+  selectable: "_4uelk0",
+  selected: "_10mlafw",
+  selectedSingle: "q0skrr",
+  suggestionEnd: "_1y1oej7",
+  highlight: "nqkbzw",
+  focused: "_8n57a5"
+};
+const cellStyles = {
+  base: "_18oorz8",
+  checkboxContainer: "_152l2dq"
+};
+/**
+ * The internal component used to render a single item in ListView.
+ */
+
+function ListViewItem({
+  children,
+  itemKey,
+  itemIndex,
+  isFocused,
+  isFocusRingVisible,
+  isGridlineVisible,
+  isSelected,
+  isTopGridlineVisible = false,
+  isTabbable = false,
+  role,
+  selectionMode,
+  suggestion,
+  currentItemVariant
+}) {
+  const rootRef = useRef(null);
+  const roles = 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 classes = classNames([styles$1.base, ITEM_STYLE_CLASS, isFocused && isFocusRingVisible && styles$1.focused, isGridlineVisible && styles$1.gridlines, isTopGridlineVisible && styles$1.gridlineTop, isSelectable(selectionMode, isSelected) && !isSelected && styles$1.selectable, isSelected && styles$1.selected, isSelected && selectionMode === 'single' && styles$1.selectedSingle, suggestion === 'end' && !isGridlineVisible && !(isSelected && selectionMode === 'single') && styles$1.suggestionEnd, currentItemVariant === 'highlight' && isFocused && !isSelected && styles$1.highlight]);
+  const cellClasses = classNames([cellStyles.base, selectionMode === 'multiple' && cellStyles.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 jsx("div", Object.assign({
+    "aria-rowindex": itemIndex + 1,
+    "data-oj-key": itemKey,
+    class: classes,
+    ref: rootRef,
+    role: roles.item
+  }, suggestion && {
+    'data-oj-suggestion': true
+  }, typeof itemKey === 'number' && {
+    'data-oj-key-type': 'number'
+  }, {
+    children: jsx("div", Object.assign({
+      id: useId(),
+      class: cellClasses,
+      "aria-posinset": itemIndex + 1,
+      "aria-setsize": -1,
+      onKeyDown: handleKeyDown,
+      "aria-colindex": 1,
+      "aria-selected": selectionMode !== 'none' ? isSelected : undefined
+    }, cellRoleAttributes, {
+      children: jsx(TabbableModeContext.Provider, Object.assign({
+        value: {
+          isTabbable
+        }
+      }, {
+        children: jsx(FocusTrap, Object.assign({
+          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 containerStyle = {
+  base: "_1ddtev8"
+};
+/**
+ * Allows to specify the time delay for rendering the component
+ **/
+
+const timerValue = 50;
+/**
+ * SkeletonContainer renders 'minimumCount' number of skeletons
+ * of the variant specified from its child element - Skeleton's prop after
+ * 'timerValue' ms delay
+ **/
+
+function SkeletonContainer({
+  children,
+  minimumCount = 1
+}) {
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setIsVisible(true);
+    }, timerValue);
+  }, []);
+  const containerClasses = classNames([containerStyle.base]);
+  return isVisible && children ? jsx("div", Object.assign({
+    class: containerClasses,
+    role: "presentation"
+  }, {
+    children: [...Array(minimumCount)].map((_element, index) => children(index))
+  })) : null;
+}
+
+const styles = {
+  base: "_125rbix"
+};
+const sparkleStyles = {
+  base: "_1pkto0e",
+  container: "ga0mug"
+};
+/**
+ * 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({
+  accessibleSummary,
+  allowTabbableMode = true,
+  children,
+  currentKey,
+  data,
+  gridlines,
+  loadingIndicator = defaultLoadingIndicator,
+  onCurrentKeyChange,
+  onLoadRange,
+  onSelectionChange,
+  onItemAction,
+  rangeExtractor,
+  role = 'grid',
+  selectedKeys = emptyKeys,
+  selectionMode = 'none',
+  viewportConfig,
+  currentItemVariant = 'none',
+  isVirtualized = true
+}) {
+  const rootRef = useRef(null);
+  const listRoles = useMemo(() => getListViewRoles(role), [role]); // tracking the anchor key which is used for shift+click selection
+
+  const anchorKey = useRef(); // tracking pending selection/current key that is not in current data
+
+  const pendingSelection = useRef();
+  const pendingCurrentKey = useRef(); // tracking sparkle height
+
+  const [sparkleHeight, setSparkleHeight] = useState(0);
+
+  const showGridline = index => {
+    // show bottom gridlines for each item, and for the last item if specified
+    return (gridlines === null || gridlines === void 0 ? void 0 : gridlines.item) === 'visible' && (index + 1 !== (data === null || data === void 0 ? void 0 : data.totalSize) || (gridlines === null || gridlines === void 0 ? void 0 : gridlines.bottom) === 'visible');
+  };
+
+  const showGridlineTop = () => {
+    // show the top gridline for the first item
+    return (gridlines === null || gridlines === void 0 ? void 0 : gridlines.item) === 'visible' && (gridlines === null || gridlines === void 0 ? void 0 : gridlines.top) === 'visible';
+  };
+
+  const ariaMultiSelectable = selectionMode === 'none' ? undefined : selectionMode === 'multiple';
+  const ariaRowCount = data === null ? undefined : data.sizePrecision === 'exact' ? data.totalSize : -1;
+  const classes = classNames([styles.base]);
+  const {
+    currentKeyProps
+  } = useCurrentKey(element => keyExtractor(element, ITEM_SELECTOR), getPrevNextKey(rootRef.current, currentKey, true, ITEM_SELECTOR), getPrevNextKey(rootRef.current, currentKey, false, ITEM_SELECTOR), currentKey, onCurrentKeyChange);
+
+  const listViewContains = elem => {
+    var _a;
+
+    return !!((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(elem));
+  };
+
+  const [showFocusRing, focusRingProps] = useCollectionFocusRing(listViewContains, ['ArrowUp', 'ArrowDown']);
+  let pendingFocusRingChange = false;
+  const [isCurrentTabbableKey, tabbableModeProps] = useTabbableModeSet(listViewContains, element => keyExtractor(element, ITEM_SELECTOR), currentKey, // handle clean-up on disabling of the mode
+  (target, isKeyboardEvent) => {
+    var _a;
+
+    if (target === null || 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(() => {
+          var _a;
+
+          (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 0);
+      } else {
+        (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }
+    }
+  }, // set currentKey when mode is enabled
+  key => {
+    onCurrentKeyChange && onCurrentKeyChange({
+      value: key
+    });
+  });
+  useEffect(() => {
+    if (currentKey != null && rootRef.current) {
+      const elem = findElementByKey(rootRef.current, currentKey, ITEM_SELECTOR);
+
+      if (elem) {
+        const scroller = viewportConfig === null || viewportConfig === void 0 ? void 0 : viewportConfig.scroller(); // make sure item is visible
+
+        scrollToVisible(elem, scroller != null ? scroller : rootRef.current);
+        const cell = elem.querySelector(`[role=${listRoles.cell}]`); // update aria-activedescendant for screenreader
+
+        if (cell) {
+          rootRef.current.setAttribute('aria-activedescendant', cell.id);
+        }
+      }
+    } // 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 = 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 = 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 = useCallback(() => {
+    if (rootRef.current && onCurrentKeyChange && (!allowTabbableMode || isCurrentTabbableKey(undefined))) {
+      const firstKey = pendingCurrentKey.current || getFirstVisibleKey(rootRef.current, ITEM_SELECTOR);
+
+      if (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 = useCallback(event => {
+    var _a, _b;
+
+    const key = keyExtractor(event.target, ITEM_SELECTOR);
+
+    if (key && ((_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('type')) === 'checkbox') {
+      (_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+
+      if (onCurrentKeyChange && key) {
+        onCurrentKeyChange({
+          value: key
+        });
+      }
+    }
+  }, [onCurrentKeyChange]);
+  const handleFocus = useCallback(event => {
+    !isKeyDefined(currentKey) && onCurrentKeyChange && handleInitialFocus();
+    !allowTabbableMode && handleSelectorFocusCapture(event);
+  }, [allowTabbableMode, currentKey, handleInitialFocus, handleSelectorFocusCapture, onCurrentKeyChange]);
+  const {
+    selectionProps
+  } = useSelection(element => {
+    if (element === rootRef.current) {
+      return currentKey === undefined ? null : currentKey;
+    }
+
+    return keyExtractor(element, ITEM_SELECTOR);
+  }, selectedKeys, selectionMode, false, 'replace', handleSelectionChange, anchorKey.current, currentKey, (currentKey, isPrev) => getPrevNextKey(rootRef.current, currentKey, isPrev, ITEM_SELECTOR), key => {
+    if (rootRef.current) {
+      const elem = findElementByKey(rootRef.current, key, ITEM_SELECTOR);
+
+      if (elem) {
+        const scroller = viewportConfig === null || viewportConfig === void 0 ? void 0 : viewportConfig.scroller();
+        scrollToVisible(elem, scroller != null ? scroller : rootRef.current);
+      }
+    }
+  }, 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 = useMemo(() => findSuggestions(data), [data]); // TODO: check suggestions before Sparkle would cause a scrolling issue
+
+  const sparkleIndicator = jsx(Sparkle, {
+    sparkleHeight: sparkleHeight
+  });
+
+  const itemActionProps = useItemAction(currentKey, data, onItemAction, ITEM_SELECTOR);
+  useEffect(() => {
+    var _a, _b; // update sparkleHeight only when we have suggestions
+    // avoid unnecessary iterating through elements
+
+
+    if (suggestions) {
+      const placeholder = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.' + PLACEHOLDER_STYLE_CLASS);
+      let height = (placeholder === null || placeholder === void 0 ? void 0 : placeholder.offsetHeight) || 0;
+      const suggestionItems = (_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll('[data-oj-suggestion]');
+      suggestionItems === null || suggestionItems === void 0 ? void 0 : suggestionItems.forEach(item => height += item.offsetHeight);
+      setSparkleHeight(height);
+    }
+  }, [suggestions]); // returns an ListItemContext based on ItemContext (added metadata and selector)
+
+  const getItemContext = useCallback(context => {
+    const selectorRenderer = selectionMode === 'multiple' ? () => jsx(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 childrenComponent = context => {
+    const listItemContext = getItemContext(context);
+    const suggestion = suggestions === null || suggestions === void 0 ? void 0 : suggestions.get(listItemContext.metadata.key);
+    const isTabbable = allowTabbableMode && isCurrentTabbableKey(listItemContext.metadata.key);
+    const isFocused = currentKey === listItemContext.metadata.key && !isTabbable;
+    const isSelected = containsKey(selectedKeys, listItemContext.metadata.key);
+    return jsx(ListViewItem, Object.assign({
+      isFocused: isFocused,
+      isFocusRingVisible: showFocusRing && !pendingFocusRingChange,
+      isGridlineVisible: showGridline(listItemContext.index),
+      isSelected: isSelected,
+      isTabbable: allowTabbableMode && isCurrentTabbableKey(listItemContext.metadata.key),
+      itemIndex: listItemContext.index,
+      itemKey: listItemContext.metadata.key,
+      role: role,
+      selectionMode: selectionMode,
+      currentItemVariant: currentItemVariant
+    }, suggestion && {
+      suggestion
+    }, listItemContext.index === 0 && {
+      isTopGridlineVisible: showGridlineTop()
+    }, {
+      children: children(listItemContext)
+    }), listItemContext.metadata.key);
+  };
+
+  viewportConfig = getViewportConfig(rootRef, viewportConfig);
+  const collectionComponent = isVirtualized ? jsx(VirtualizedCollection, Object.assign({
+    data: data,
+    itemSelector: ITEM_SELECTOR,
+    loadMoreIndicator: defaultLoadMoreIndicator,
+    onLoadRange: onLoadRange,
+    rangeExtractor: rangeExtractor,
+    suggestions: sparkleIndicator,
+    viewportConfig: viewportConfig
+  }, {
+    children: childrenComponent
+  })) : jsx(LoadMoreCollection, Object.assign({
+    data: data,
+    loadMoreIndicator: defaultLoadMoreIndicator,
+    onLoadRange: onLoadRange,
+    suggestions: sparkleIndicator,
+    viewportConfig: viewportConfig
+  }, {
+    children: childrenComponent
+  }));
+  /**
+   * Need to track pointer down element to set currentItem when initial focus happens
+   */
+
+  const handlePointerDown = useCallback(event => {
+    const key = keyExtractor(event.target, ITEM_SELECTOR);
+    if (isKeyDefined(key)) pendingCurrentKey.current = key;
+  }, []); // if data is not specified, listview should show loading indicator
+  // todo: replace placeholder with actual SkeletonContainer component (Ash is working on)
+
+  return jsx("div", Object.assign({}, mergeProps(allowTabbableMode ? tabbableModeProps : {}, currentKeyProps, focusRingProps, selectionProps, itemActionProps, {
+    onFocus: handleFocus,
+    onPointerDown: handlePointerDown
+  }), {
+    role: role,
+    "aria-rowcount": ariaRowCount,
+    "aria-colcount": 1,
+    ref: rootRef,
+    class: classes,
+    tabIndex: 0,
+    "aria-label": accessibleSummary,
+    "aria-multiselectable": ariaMultiSelectable
+  }, {
+    children: data == null ? loadingIndicator : collectionComponent
+  }));
+}
+/**
+ * A helper function that finds the data with suggestions, and
+ * returns the corresponding keys
+ * @param dataState
+ */
+
+const findSuggestions = dataState => {
+  const data = dataState === null || dataState === void 0 ? void 0 : dataState.data;
+  const count = getSuggestionsCount(data);
+
+  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());
+};
+/**
+ * A helper function that finds the number of suggestions
+ * @param data
+ */
+
+
+const getSuggestionsCount = data => {
+  if (!data) {
+    return 0;
+  }
+
+  const index = data.findIndex(value => !value.metadata.suggestion);
+  return index === -1 ? 0 : index;
+};
+/**
+ * A helper function to make sure specified elem is visible in the specified container
+ */
+
+
+const scrollToVisible = (elem, scroller) => {
+  if (elem && scroller) {
+    const scrollerBounds = scroller.getBoundingClientRect();
+    const elemBounds = elem.getBoundingClientRect();
+
+    if (elemBounds.bottom > scrollerBounds.bottom) {
+      scroller.scrollTop = scroller.scrollTop + (elemBounds.bottom - scrollerBounds.bottom);
+    } else if (elemBounds.top < scrollerBounds.top) {
+      scroller.scrollTop = scroller.scrollTop - (scrollerBounds.top - elemBounds.top);
+    }
+  }
+};
+
+const getViewportConfig = (rootRef, config) => {
+  return config !== null && config !== void 0 ? 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);
+  }
+};
+/**
+ * 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([sparkleStyles.base]);
+  const containerClasses = classNames([sparkleStyles.container]);
+  return jsx("div", Object.assign({
+    class: containerClasses
+  }, {
+    children: jsx("div", {
+      class: sparkleClasses,
+      style: {
+        height
+      }
+    })
+  }), "sparkle");
+}
+
+const defaultLoadingIndicator = jsx(SkeletonContainer, Object.assign({
+  minimumCount: 25
+}, {
+  children: () => {
+    return jsx(Flex, Object.assign({
+      height: "12x",
+      align: "center"
+    }, {
+      children: jsx(Skeleton, {
+        height: "4x"
+      })
+    }));
+  }
+}));
+
+const defaultLoadMoreIndicator = jsx(SkeletonContainer, Object.assign({
+  minimumCount: 3
+}, {
+  children: () => {
+    return jsx(Flex, Object.assign({
+      height: "12x",
+      align: "center"
+    }, {
+      children: jsx(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;
+};
+
+/**
+ * @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
+ */
+
+export { List, SkeletonContainer };
+/*  */
+//# sourceMappingURL=PRIVATE_List.js.map