@oracle/oraclejet 13.0.0 → 13.0.1

package/dist/js/libs/oraclejet-preact/cjs/Link-b8603b8a.js

@@ -0,0 +1,44 @@
+/* @oracle/oraclejet-preact: 13.0.1 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+
+require('./utils/UNSAFE_classNames.js');
+var hooks_UNSAFE_usePress = require('./hooks/UNSAFE_usePress.js');
+var classNames = require('./classNames-386ffafc.js');
+
+const styles = {
+  default: "d84zyna",
+  primary: "pbavu3n",
+  secondary: "s8zm58y",
+  standalone: "sf2d2uo",
+  embedded: "enzr2k5"
+};
+
+const noop = () => {};
+
+function Link({
+  href,
+  variant = 'default',
+  placement = 'standalone',
+  target,
+  children,
+  onClick
+}) {
+  const linkClass = classNames.classNames([styles.default, styles[placement], variant !== 'default' && styles[variant]]);
+  const {
+    pressProps
+  } = hooks_UNSAFE_usePress.usePress(onClick !== null && onClick !== void 0 ? onClick : noop);
+  return jsxRuntime.jsx("a", Object.assign({
+    href: href,
+    target: target
+  }, pressProps, {
+    class: linkClass
+  }, {
+    children: children
+  }));
+}
+
+exports.Link = Link;
+/*  */
+//# sourceMappingURL=Link-b8603b8a.js.map

package/dist/js/libs/oraclejet-preact/cjs/Link-b8603b8a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link-b8603b8a.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 { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { usePress } from '../hooks/UNSAFE_usePress';\n\ntype Props = {\n  /**\n   * Sets the URL that the hyperlink points to.\n   */\n  href: string;\n\n  /**\n   * Sets the variant.\n   */\n  variant?: 'default' | '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   * 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 styles = {\n  default: cssProps`${{\n    display: 'inline-block',\n    color: 'var(--oj-c-link-text-color)',\n    textDecorationColor: 'var(--oj-c-link-text-color)',\n    textDecorationThickness: '1px',\n    textUnderlineOffset: 'var(--oj-c-link-text-underline-offset)',\n    cursor: 'var( --oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable)',\n    '&:visited': { color: '--oj-c-link-text-color-visited' },\n    '&:active': { color: '--oj-c-link-text-color-active' },\n    '&:focus-visible': {\n      outlineColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)',\n      outlineStyle: 'dotted',\n      outlineWidth: '1px',\n      outlineOffset: '1px'\n    }\n  }}`,\n  primary: cssProps`${{\n    '--oj-c-link-text-color': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary)',\n    '--oj-c-link-text-color-visited': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary)',\n    '--oj-c-link-text-color-active': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary)'\n  }}`,\n  secondary: cssProps`${{\n    '--oj-c-link-text-color': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary)',\n    '--oj-c-link-text-color-visited': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary)',\n    '--oj-c-link-text-color-active': 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary)'\n  }}`,\n  standalone: cssProps`${{\n    textDecorationLine: 'var(--oj-c-link-standalone-text-decoration)',\n    '&:hover': { textDecorationLine: 'var(--oj-c-link-standalone-text-decoration-hover)' },\n    '&:active': { textDecorationLine: 'var(--oj-c-link-standalone-text-decoration-hover)' }\n  }}`,\n  embedded: cssProps`${{\n    textDecorationLine: 'var(--oj-c-link-embedded-text-decoration)',\n    '&:hover': { textDecorationLine: 'var(--oj-c-link-embedded-text-decoration-hover)' },\n    '&:active': { textDecorationLine: 'var(--oj-c-link-embedded-text-decoration-hover)' }\n  }}`\n};\n\nconst noop = () => {};\n\nexport function Link({\n  href,\n  variant = 'default',\n  placement = 'standalone',\n  target,\n  children,\n  onClick\n}: Props) {\n  const linkClass = classNames([\n    styles.default,\n    styles[placement],\n    variant !== 'default' && styles[variant]\n  ]);\n  const { pressProps } = usePress(onClick ?? noop);\n  return (\n    <a href={href} target={target} {...pressProps} class={linkClass}>\n      {children}\n    </a>\n  );\n}\n"],"names":["styles","noop","Link","href","variant","placement","target","children","onClick","default","pressProps","usePress","_jsx","Object","assign","class","linkClass"],"mappings":";;;;;;;;;AA4CA,MAAAA,MAAA,GAAA;WAAA,SAAA;WAAA,SAAA;aAAA,SAAA;cAAA,SAAA;;AAAA,CAAA,CAAA;;AAuCA,MAAAC,IAAA,GAAA,MAAA,EAAA,CAAA;;AAEA,SAAAC,IAAA,CAAA;EAAAC,IAAA;AAAAC,EAAAA,OAAA,GAAA,SAAA;AAAAC,EAAAA,SAAA,GAAA,YAAA;EAAAC,MAAA;EAAAC,QAAA;AAAAC,EAAAA,OAAAA;AAAA,CAAA,EAAA;2CASIR,MAAA,CAAAS,4BAEAL,OAAA,KAAA,SAAA,IAAAJ,MAAA,CAAAI,OAAA;EAEF,MAAA;AAAAM,IAAAA,UAAAA;AAAA,GAAA,GAAAC,8BAAA,CAAAH,OAAA,KAAA,IAAA,IAAAA,OAAA,KAAA,KAAA,CAAA,GAAAA,OAAA,GAAAP,IAAA,CAAA,CAAA;AACA,EAAA,OAAAW,cAAA,CAAA,GAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAAX,IAAAA,IAAA,EAAAA,IAAA;AAAAG,IAAAA,MAAA,EAAAA,MAAAA;GAAA,EAAAI,UAAA,EAAA;AAAAK,IAAAA,KAAA,EAAAC,SAAAA;AAAA,GAAA,EAAA;AAAAT,IAAAA,QAAA,EAAAA,QAAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAKF;;;;;;;"}

package/dist/js/libs/oraclejet-preact/cjs/ListView-35b383ae.js

@@ -0,0 +1,571 @@
+/* @oracle/oraclejet-preact: 13.0.1 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+
+require('./utils/UNSAFE_classNames.js');
+var utils_UNSAFE_arrayUtils = require('./utils/UNSAFE_arrayUtils.js');
+var utils_UNSAFE_mergeProps = require('./utils/UNSAFE_mergeProps.js');
+var utils_UNSAFE_keys = require('./utils/UNSAFE_keys.js');
+require('./UNSAFE_VirtualizedCollection.js');
+var UNSAFE_Selector = require('./UNSAFE_Selector.js');
+var hooks_UNSAFE_useId = require('./hooks/UNSAFE_useId.js');
+var classNames = require('./classNames-386ffafc.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');
+require('./UNSAFE_Skeleton.js');
+require('./UNSAFE_Flex.js');
+var Flex = require('./Flex-4a772ee3.js');
+var Skeleton = require('./Skeleton-5fe7b99d.js');
+var VirtualizedCollection = require('./VirtualizedCollection-677d6650.js');
+
+const ITEM_STYLE_CLASS = 'oj-listview-item';
+const styles$1 = {
+  base: "bvntlxs",
+  gridlines: "gktvhyj",
+  selectable: "s1xqyijx",
+  selected: "s1664glh",
+  selectedSingle: "s1g33zwe",
+  // TODO: revisit later to prevent double lines when implementing gridlines feature
+  suggestionEnd: "sz4hzft"
+};
+const cellStyles = {
+  base: "b1sxv8rj",
+  checkboxContainer: "c1w05clj",
+  focused: "f2pds8n"
+};
+/**
+ * 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);
+};
+/**
+ * The internal component used to render a single item in ListView.
+ */
+
+
+function ListViewItem({
+  children,
+  itemKey,
+  itemIndex,
+  currentKey,
+  isFocusRingVisible,
+  isGridlineVisible,
+  suggestion,
+  selectedKeys,
+  selectionMode,
+  onSelectionChange
+}) {
+  const rootRef = hooks.useRef(null);
+  const isFocused = currentKey == itemKey;
+  const isSelected = utils_UNSAFE_keys.containsKey(selectedKeys, itemKey);
+  const classes = classNames.classNames([styles$1.base, ITEM_STYLE_CLASS, isGridlineVisible && styles$1.gridlines, isSelectable(selectionMode, isSelected) && !isSelected && styles$1.selectable, isSelected && styles$1.selected, isSelected && selectionMode === 'single' && styles$1.selectedSingle, suggestion === 'end' && !(isSelected && selectionMode === 'single') && styles$1.suggestionEnd]);
+  const cellClasses = classNames.classNames([cellStyles.base, selectionMode === 'multiple' && cellStyles.checkboxContainer, isFocused && isFocusRingVisible && cellStyles.focused]); // 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", Object.assign({
+    role: "presentation",
+    "aria-rowindex": itemIndex + 1,
+    "data-oj-key": itemKey,
+    "data-oj-suggestion": !!suggestion,
+    class: classes,
+    ref: rootRef
+  }, typeof itemKey === 'number' && {
+    'data-oj-key-type': 'number'
+  }, {
+    children: jsxRuntime.jsxs("div", Object.assign({
+      id: hooks_UNSAFE_useId.useId(),
+      class: cellClasses,
+      role: "option",
+      "aria-posinset": itemIndex + 1,
+      "aria-setsize": -1,
+      "aria-colindex": 1,
+      "aria-selected": selectionMode !== 'none' ? isSelected : undefined
+    }, {
+      children: [selectionMode === 'multiple' && jsxRuntime.jsx(UNSAFE_Selector.Selector, {
+        rowKey: itemKey,
+        selectedKeys: selectedKeys,
+        onChange: onSelectionChange
+      }), children]
+    }))
+  }), itemKey);
+}
+
+const containerStyle = {
+  base: "b1e4zkxl"
+};
+/**
+ * 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 = 3
+}) {
+  const [isVisible, setIsVisible] = hooks.useState(false);
+  hooks.useEffect(() => {
+    setTimeout(() => {
+      setIsVisible(true);
+    }, timerValue);
+  }, []);
+  const containerClasses = classNames.classNames([containerStyle.base]);
+  return isVisible && children ? jsxRuntime.jsx("div", Object.assign({
+    class: containerClasses,
+    role: "presentation"
+  }, {
+    children: [...Array(minimumCount)].map((_element, index) => children(index))
+  })) : null;
+}
+
+/**
+ * Type for gridlines
+ */
+
+const gridlinesValues = utils_UNSAFE_arrayUtils.stringLiteralArray(['visible', 'hidden']);
+const styles = {
+  base: "bry7agl"
+};
+const sparkleStyles = {
+  base: "b1nulapo",
+  container: "c1vo4hpw"
+};
+
+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, maxIndex should not be -1
+    return {
+      offset: 0,
+      count: dataState.offset + keys.length
+    };
+  } 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.classNames([sparkleStyles.base]);
+  const containerClasses = classNames.classNames([sparkleStyles.container]);
+  return jsxRuntime.jsx("div", Object.assign({
+    class: containerClasses
+  }, {
+    children: jsxRuntime.jsx("div", {
+      class: sparkleClasses,
+      style: {
+        height
+      }
+    })
+  }), "sparkle");
+}
+/**
+ * Component that renders items as a flat list.
+ * In order to maximize performance, only items that are visible in the viewport are rendered.
+ */
+
+function ListView({
+  accessibleSummary,
+  data,
+  children,
+  currentKey,
+  gridlines = 'hidden',
+  selectedKeys = emptyKeys,
+  selectionMode = 'none',
+  onCurrentKeyChange,
+  onLoadRange,
+  onSelectionChange,
+  viewportConfig
+}) {
+  const rootRef = hooks.useRef(null); // tracking the anchor key which is used for shift+click selection
+
+  const anchorKey = hooks.useRef(); // tracking
+
+  const pendingSelection = hooks.useRef(); // tracking sparkle height
+
+  const [sparkleHeight, setSparkleHeight] = hooks.useState(0);
+
+  const showGridline = index => {
+    // gridlines are positioned at the top so never show it for the first item
+    return gridlines === 'visible' && index > 0;
+  };
+
+  const ariaMultiSelectable = selectionMode === 'none' ? undefined : selectionMode === 'multiple';
+  const ariaRowCount = data === null ? undefined : data.sizePrecision === 'exact' ? data.totalSize : -1;
+  const classes = classNames.classNames([styles.base]);
+  const {
+    currentKeyProps
+  } = hooks_PRIVATE_useCurrentKey.useCurrentKey(keyExtractor, getPrevNextKey(rootRef.current, currentKey, true), getPrevNextKey(rootRef.current, currentKey, false), currentKey, onCurrentKeyChange);
+  const handleInitialFocus = hooks.useCallback(() => {
+    if (rootRef.current && onCurrentKeyChange) {
+      const firstKey = getFirstVisibleKey(rootRef.current);
+
+      if (utils_UNSAFE_keys.isKeyDefined(firstKey)) {
+        onCurrentKeyChange({
+          value: firstKey
+        });
+      }
+    }
+  }, [currentKey, onCurrentKeyChange]);
+  const focusHandler = !utils_UNSAFE_keys.isKeyDefined(currentKey) && onCurrentKeyChange ? {
+    onFocus: handleInitialFocus
+  } : {};
+  const [showFocusRing, focusRingProps] = hooks_PRIVATE_useCollectionFocusRing.useCollectionFocusRing(elem => {
+    var _a;
+
+    return !!((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(elem));
+  }, ['ArrowUp', 'ArrowDown']);
+  hooks.useEffect(() => {
+    if (currentKey != null && rootRef.current) {
+      const elem = findElementByKey(rootRef.current, currentKey);
+
+      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=option]'); // update aria-activedescendant for screenreader
+
+        if (cell) {
+          rootRef.current.setAttribute('aria-activedescendant', cell.id);
+        }
+      }
+    }
+  }, [currentKey]);
+  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).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)
+          }
+        });
+      } else {
+        pendingSelection.current = detail;
+        onLoadRange(value);
+      }
+    }
+  }, [data, onSelectionChange, pendingSelection, onLoadRange]);
+  const {
+    selectionProps
+  } = hooks_PRIVATE_useSelection.useSelection(event => {
+    if (event.target === rootRef.current) {
+      return currentKey === undefined ? null : currentKey;
+    }
+
+    return keyExtractor(event);
+  }, selectedKeys, selectionMode, false, 'replace', handleSelectionChange, anchorKey.current, currentKey, (currentKey, isPrev) => getPrevNextKey(rootRef.current, currentKey, isPrev), key => {
+    if (rootRef.current) {
+      const elem = findElementByKey(rootRef.current, key);
+
+      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 && onSelectionChange) {
+    const keys = handleSelectionRange(pendingSelection.current, data);
+
+    if (Array.isArray(keys)) {
+      onSelectionChange({
+        value: {
+          all: false,
+          keys: new Set(keys)
+        }
+      });
+      pendingSelection.current = undefined;
+    }
+  }
+
+  const loadMoreIndicator = jsxRuntime.jsx(SkeletonContainer, Object.assign({
+    minimumCount: 3
+  }, {
+    children: () => {
+      return jsxRuntime.jsx(Flex.Flex, Object.assign({
+        height: "12x",
+        align: "center"
+      }, {
+        children: jsxRuntime.jsx(Skeleton.Skeleton, {
+          height: "4x"
+        })
+      }));
+    }
+  }));
+
+  const suggestions = hooks.useMemo(() => findSuggestions(data), [data === null || data === void 0 ? void 0 : data.data]); // TODO: check suggestions before Sparkle would cause a scrolling issue
+
+  const sparkleIndicator = jsxRuntime.jsx(Sparkle, {
+    sparkleHeight: sparkleHeight
+  });
+
+  hooks.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('.' + VirtualizedCollection.PLACEHOLDER_STYLE_CLASS);
+      let height = placeholder.offsetHeight;
+      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]); // 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", Object.assign({}, utils_UNSAFE_mergeProps.mergeProps(currentKeyProps, selectionProps, focusRingProps, focusHandler), {
+    role: "listbox",
+    "aria-rowcount": ariaRowCount,
+    "aria-colcount": 1,
+    ref: rootRef,
+    class: classes,
+    tabIndex: 0,
+    "aria-label": accessibleSummary,
+    "aria-multiselectable": ariaMultiSelectable
+  }, {
+    children: data == null ? jsxRuntime.jsx(SkeletonContainer, {
+      children: () => {
+        return jsxRuntime.jsx(Flex.Flex, Object.assign({
+          height: "12x",
+          align: "center"
+        }, {
+          children: jsxRuntime.jsx(Skeleton.Skeleton, {
+            height: "4x"
+          })
+        }));
+      }
+    }) : jsxRuntime.jsx(VirtualizedCollection.VirtualizedCollection, Object.assign({
+      data: data,
+      onLoadRange: onLoadRange,
+      itemSelector: '.' + ITEM_STYLE_CLASS,
+      viewportConfig: getViewportConfig(rootRef, viewportConfig),
+      loadMoreIndicator: loadMoreIndicator,
+      suggestions: sparkleIndicator
+    }, {
+      children: context => {
+        const suggestion = suggestions === null || suggestions === void 0 ? void 0 : suggestions.get(context.metadata.key);
+        return jsxRuntime.jsx(ListViewItem, Object.assign({
+          itemIndex: context.index,
+          itemKey: context.metadata.key,
+          currentKey: currentKey,
+          isFocusRingVisible: showFocusRing,
+          isGridlineVisible: showGridline(context.index),
+          selectedKeys: selectedKeys,
+          selectionMode: selectionMode,
+          onSelectionChange: handleSelectionChange
+        }, suggestion && {
+          suggestion
+        }, {
+          children: children(context)
+        }));
+      }
+    }))
+  }));
+}
+/**
+ * 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;
+};
+/**
+ * Returns the key from the item element
+ */
+
+
+const getKey = item => {
+  return item.dataset['ojKeyType'] === 'number' ? Number(item.dataset['ojKey']) : item.dataset['ojKey'];
+};
+/**
+ * A helper function to find the element with the specified key.
+ * Returns null if the element with key is not found.
+ */
+
+
+const findElementByKey = (root, key) => {
+  if (root) {
+    const items = root.querySelectorAll('.' + ITEM_STYLE_CLASS);
+
+    for (let i = 0; i < items.length; i++) {
+      const thisKey = getKey(items[i]);
+
+      if (key == thisKey) {
+        return items[i];
+      }
+    }
+  }
+
+  return null;
+};
+/**
+ * A helper function that return the key of the first available item.
+ */
+
+
+const getFirstVisibleKey = root => {
+  if (root) {
+    const firstItem = root.querySelector('.' + ITEM_STYLE_CLASS);
+
+    if (firstItem) {
+      const key = getKey(firstItem);
+      return key;
+    }
+  }
+
+  return null;
+};
+/**
+ * A helper function that returns the key of the previous or the next item
+ * given the specified current key
+ */
+
+
+const getPrevNextKey = (root, currentKey, isPrev) => {
+  return () => {
+    if (utils_UNSAFE_keys.isKeyDefined(currentKey) && root) {
+      const currItem = findElementByKey(root, currentKey);
+
+      if (currItem) {
+        const nextItem = isPrev ? currItem.previousElementSibling : currItem.nextElementSibling;
+
+        if (nextItem) {
+          return getKey(nextItem);
+        }
+      }
+
+      return getFirstVisibleKey(root);
+    }
+
+    return null;
+  };
+};
+/**
+ * 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);
+    }
+  }
+};
+/**
+ * A helper function to get the key from an event
+ */
+
+
+const keyExtractor = event => {
+  const elem = event.target;
+  const item = elem.closest('.' + ITEM_STYLE_CLASS);
+
+  if (item) {
+    const key = getKey(item);
+    return key === undefined ? null : key;
+  }
+
+  return null;
+};
+
+exports.ListView = ListView;
+/*  */
+//# sourceMappingURL=ListView-35b383ae.js.map