@oracle/oraclejet 13.1.1 → 13.1.2

package/dist/js/libs/oraclejet-preact/es/UNSAFE_ListView.js.map

@@ -1 +1 @@
-{"version":3,"file":"UNSAFE_ListView.js","sources":["../../src/UNSAFE_ListView/ListViewItem.tsx","../../src/UNSAFE_ListView/SkeletonContainer.tsx","../../src/UNSAFE_ListView/ListView.tsx","../../src/UNSAFE_ListView/index.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 { ComponentChildren } from 'preact';\nimport { useRef } from 'preact/hooks';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { Keys, containsKey } from '../utils/UNSAFE_keys';\nimport { SelectionDetail, SelectionMode } from '../UNSAFE_Collection';\nimport { Selector } from '../UNSAFE_Selector';\nimport { useId } from '../hooks/UNSAFE_useId';\n\n// default style class for items in ListView\nexport const ITEM_STYLE_CLASS = 'oj-listview-item';\n\nconst styles = {\n  base: cssProps`${{\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: 'var(--oj-collection-list-row-height)',\n    boxSizing: 'border-box',\n    backgroundImage:\n      'linear-gradient(var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color),var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color))',\n    backgroundSize: 0,\n    backgroundPosition: '0 0',\n    backgroundRepeat: 'no-repeat',\n    borderTop: '1px solid transparent'\n  }}`,\n  gridlines: cssProps`${{\n    backgroundSize: '100% 1px'\n  }}`,\n  selectable: cssProps`${{\n    '&:hover': {\n      backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover);'\n    }\n  }}`,\n  selected: cssProps`${{\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-selected)'\n  }}`,\n  selectedSingle: cssProps`${{\n    borderTop: '1px solid var(--oj-c-PRIVATE-DO-NOT-USE-core-border-color-selected)',\n    boxShadow: 'inset 0 -1px var(--oj-c-PRIVATE-DO-NOT-USE-core-border-color-selected)'\n  }}`,\n  // TODO: revisit later to prevent double lines when implementing gridlines feature\n  suggestionEnd: cssProps`${{\n    boxShadow: 'inset 0 -1px var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color)'\n  }}`\n};\n\nconst cellStyles = {\n  base: cssProps`${{\n    flexGrow: '1',\n    '&:focus': {\n      outlineStyle: 'none'\n    }\n  }}`,\n  checkboxContainer: cssProps`${{\n    display: 'flex'\n  }}`,\n  focused: cssProps`${{\n    outlineStyle: 'dotted',\n    outlineWidth: '1px',\n    outlineColor: 'var(---oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)',\n    outlineOffset: '-1px'\n  }}`\n};\n\n/**\n * Props for the ListViewItem Component\n */\nexport type Props<K> = {\n  children: ComponentChildren;\n  itemKey: K;\n  itemIndex: number;\n  currentKey?: K;\n  selectedKeys: Keys<K>;\n  selectionMode: SelectionMode;\n  isFocusRingVisible: boolean;\n  isGridlineVisible: boolean;\n  suggestion?: 'end' | true;\n  onSelectionChange?: (detail: SelectionDetail<K>) => void;\n};\n\n/**\n * Helper method to determine whether item is selectable\n * @returns true if item is selectable (show hover effect), false otherwise\n */\nconst isSelectable = (selectionMode: SelectionMode, isItemSelected: boolean) => {\n  return selectionMode !== 'none' && (selectionMode === 'multiple' || !isItemSelected);\n};\n\n/**\n * The internal component used to render a single item in ListView.\n */\nexport function ListViewItem<K extends string | number>({\n  children,\n  itemKey,\n  itemIndex,\n  currentKey,\n  isFocusRingVisible,\n  isGridlineVisible,\n  suggestion,\n  selectedKeys,\n  selectionMode,\n  onSelectionChange\n}: Props<K>) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const isFocused = currentKey == itemKey;\n  const isSelected = containsKey(selectedKeys, itemKey);\n  const classes = classNames([\n    styles.base,\n    ITEM_STYLE_CLASS,\n    isGridlineVisible && styles.gridlines,\n    isSelectable(selectionMode, isSelected) && !isSelected && styles.selectable,\n    isSelected && styles.selected,\n    isSelected && selectionMode === 'single' && styles.selectedSingle,\n    suggestion === 'end' && !(isSelected && selectionMode === 'single') && styles.suggestionEnd\n  ]);\n\n  const cellClasses = classNames([\n    cellStyles.base,\n    selectionMode === 'multiple' && cellStyles.checkboxContainer,\n    isFocused && isFocusRingVisible && cellStyles.focused\n  ]);\n\n  // todo: use translated text for selector\n  // note cannot put focus on gridcell div since JAWS will not read the aria-rowindex\n  // correctly, so unfortunately needed another div\n  return (\n    <div\n      role=\"presentation\"\n      aria-rowindex={itemIndex + 1}\n      key={itemKey}\n      data-oj-key={itemKey}\n      data-oj-suggestion={!!suggestion}\n      class={classes}\n      ref={rootRef}\n      {...(typeof itemKey === 'number' && { 'data-oj-key-type': 'number' })}>\n      <div\n        id={useId()}\n        class={cellClasses}\n        role=\"option\"\n        aria-posinset={itemIndex + 1}\n        aria-setsize={-1}\n        aria-colindex={1}\n        aria-selected={selectionMode !== 'none' ? isSelected : undefined}>\n        {selectionMode === 'multiple' && (\n          <Selector\n            rowKey={itemKey}\n            selectedKeys={selectedKeys}\n            onChange={onSelectionChange}></Selector>\n        )}\n        {children}\n      </div>\n    </div>\n  );\n}\n","/**\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 { ComponentChildren } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\n\ntype Props = {\n  /**\n   * Allows to pass and access the properties from child elements\n   **/\n  children?: (index: number) => ComponentChildren;\n  /**\n   * Allows to specify number of skeletons to be rendered on initial load\n   **/\n  minimumCount?: number;\n};\n\nconst containerStyle = {\n  base: cssProps`${{\n    height: '100%',\n    overflowX: 'hidden',\n    overflowY: 'hidden'\n  }}`\n};\n\n/**\n * Allows to specify the time delay for rendering the component\n **/\nconst timerValue = 50;\n\n/**\n * SkeletonContainer renders 'minimumCount' number of skeletons\n * of the variant specified from its child element - Skeleton's prop after\n * 'timerValue' ms delay\n **/\nexport function SkeletonContainer({ children, minimumCount = 3 }: Props) {\n  const [isVisible, setIsVisible] = useState(false);\n\n  useEffect(() => {\n    setTimeout(() => {\n      setIsVisible(true);\n    }, timerValue);\n  }, []);\n\n  const containerClasses = classNames([containerStyle.base]);\n  return isVisible && children ? (\n    <div class={containerClasses} role=\"presentation\">\n      {[...Array(minimumCount)].map((_element, index) => children(index))}\n    </div>\n  ) : null;\n}\n","/**\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 { ComponentChildren, RefObject } from 'preact';\nimport { useRef, useCallback, useEffect, useState, useMemo } from 'preact/hooks';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { Keys, isKeyDefined } from '../utils/UNSAFE_keys';\nimport {\n  CurrentKeyDetail,\n  DataState,\n  ListItemContext,\n  Metadata,\n  Range,\n  SelectionDetail,\n  SelectionMode\n} from '../UNSAFE_Collection';\nimport {\n  VirtualizedCollection,\n  ViewportConfig,\n  PLACEHOLDER_STYLE_CLASS\n} from '../UNSAFE_VirtualizedCollection';\nimport { ListViewItem, ITEM_STYLE_CLASS } from './ListViewItem';\nimport { SelectionRangeDetail, useSelection } from '../hooks/PRIVATE_useSelection';\nimport { useCurrentKey } from '../hooks/PRIVATE_useCurrentKey';\nimport { useCollectionFocusRing } from '../hooks/PRIVATE_useCollectionFocusRing';\nimport { SkeletonContainer } from './SkeletonContainer';\nimport { Skeleton } from '../UNSAFE_Skeleton';\nimport { Flex } from '../UNSAFE_Flex';\n/**\n * Type for gridlines\n */\nexport const gridlinesValues = stringLiteralArray(['visible', 'hidden']);\nexport type Gridlines = typeof gridlinesValues[number];\n\n/**\n * Props for the ListView Component\n */\nexport type Props<K, D> = {\n  /**\n   * A DataState object that provide information including data and metadata to this ListView.\n   * If the value is null, then ListView will show loading indicator until a DataState is set.\n   */\n  data: DataState<K, D> | null;\n\n  /**\n   * A function to render each item\n   */\n  children: (context: ListItemContext<K, D>) => ComponentChildren;\n\n  /**\n   * Callback function to handle when viewport has changed, including the case\n   * where user scrolls to the end of the component and there are more items to load.\n   * The function should sets a new DataState on the component for the specified range.\n   */\n  onLoadRange: (range: Range) => void;\n\n  /**\n   * A text that provides a summary of this ListView for the purpose of accessibility.\n   * This is required in order to make ListView accessible.\n   */\n  accessibleSummary: string;\n\n  /**\n   * The key of the item that currently have keyboard focus. Ignored if the current item is not\n   * currently in the viewport.\n   */\n  currentKey?: K;\n\n  /**\n   * Specifies whether the horizontal grid lines should be visible.  By default gridlines\n   * are hidden.\n   */\n  gridlines?: Gridlines;\n\n  /**\n   * The keys of the current selected items in the ListView.\n   */\n  selectedKeys?: Keys<K>;\n\n  /**\n   * The type of selection behavior that is enabled on the ListView. This property controls the number\n   * of selections that can be made via selection gestures at any given time.\n   */\n  selectionMode?: SelectionMode;\n\n  /**\n   * Callback function to handle when current focused item has changed.  The function should\n   * update the currentKey prop with a new current key.\n   */\n  onCurrentKeyChange?: (detail: CurrentKeyDetail<K>) => void;\n\n  /**\n   * Callback function to handle when selection has changed.  The function should update\n   * the selectedKeys prop with a new set of selected keys.\n   */\n  onSelectionChange?: (detail: SelectionDetail<K>) => void;\n\n  /**\n   * Viewport configuration which the application can specify the element to determine what range\n   * of data to render.\n   */\n  viewportConfig?: ViewportConfig;\n};\n\nconst styles = {\n  base: cssProps`${{\n    height: '100%',\n    userSelect: 'none',\n    overflowY: 'inherit',\n    '&:focus': {\n      outlineStyle: 'none'\n    }\n  }}`\n};\n\nconst sparkleStyles = {\n  base: cssProps`${{\n    position: 'absolute',\n    top: 0,\n    width: '4px',\n    zIndex: 1,\n    display: 'block',\n    backgroundImage: 'var(--oj-c-PRIVATE-DO-NOT-USE-collection-sparkle-img)',\n    backgroundRepeat: 'no-repeat',\n    backgroundSize: '100% 100%'\n  }}`,\n  container: cssProps`${{\n    position: 'relative'\n  }}`\n};\n\nconst getViewportConfig = (rootRef: RefObject<HTMLElement>, config?: ViewportConfig) => {\n  return (\n    config ?? {\n      scroller: () => {\n        return rootRef.current;\n      }\n    }\n  );\n};\n\nconst emptyKeys = { all: false, keys: new Set() };\n\nconst handleSelectionRange = <K, D>(\n  detail: SelectionRangeDetail<K>,\n  dataState: DataState<K, D>\n) => {\n  const keys = dataState.data.map((value: { data: D; metadata: Metadata<K> }) => {\n    return value.metadata.key;\n  });\n  const startIndex = keys.indexOf(detail.value.start);\n  const endIndex = keys.indexOf(detail.value.end);\n  const minIndex = Math.min(startIndex, endIndex);\n  const maxIndex = Math.max(startIndex, endIndex);\n  if (minIndex === -1) {\n    // return a range to fetch, maxIndex should not be -1\n    return { offset: 0, count: dataState.offset + keys.length };\n  } else {\n    // range of keys are in the current viewport, return them\n    return keys.slice(minIndex, maxIndex + 1);\n  }\n};\n\n/**\n * A sparkle component for smart suggestion indicator in ListView\n * @param sparkleHeight the height of sparkle\n */\nexport function Sparkle({ sparkleHeight }: { sparkleHeight: number }) {\n  if (sparkleHeight <= 0) {\n    return null;\n  }\n\n  const height = sparkleHeight + 'px';\n  const sparkleClasses = classNames([sparkleStyles.base]);\n  const containerClasses = classNames([sparkleStyles.container]);\n\n  return (\n    <div key=\"sparkle\" class={containerClasses}>\n      <div class={sparkleClasses} style={{ height }}></div>\n    </div>\n  );\n}\n\n/**\n * Component that renders items as a flat list.\n * In order to maximize performance, only items that are visible in the viewport are rendered.\n */\nexport function ListView<K extends string | number, D>({\n  accessibleSummary,\n  data,\n  children,\n  currentKey,\n  gridlines = 'hidden',\n  selectedKeys = emptyKeys as Keys<K>,\n  selectionMode = 'none',\n  onCurrentKeyChange,\n  onLoadRange,\n  onSelectionChange,\n  viewportConfig\n}: Props<K, D>) {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  // tracking the anchor key which is used for shift+click selection\n  const anchorKey = useRef<K | undefined>();\n\n  // tracking\n  const pendingSelection = useRef<SelectionRangeDetail<K>>();\n\n  // tracking sparkle height\n  const [sparkleHeight, setSparkleHeight] = useState<number>(0);\n\n  const showGridline = (index: number) => {\n    // gridlines are positioned at the top so never show it for the first item\n    return gridlines === 'visible' && index > 0;\n  };\n\n  const ariaMultiSelectable = selectionMode === 'none' ? undefined : selectionMode === 'multiple';\n  const ariaRowCount =\n    data === null ? undefined : data.sizePrecision === 'exact' ? data.totalSize : -1;\n\n  const classes = classNames([styles.base]);\n\n  const { currentKeyProps } = useCurrentKey(\n    keyExtractor,\n    getPrevNextKey(rootRef.current, currentKey, true),\n    getPrevNextKey(rootRef.current, currentKey, false),\n    currentKey,\n    onCurrentKeyChange\n  );\n\n  const handleInitialFocus = useCallback(() => {\n    if (rootRef.current && onCurrentKeyChange) {\n      const firstKey = getFirstVisibleKey(rootRef.current) as K;\n      if (isKeyDefined(firstKey)) {\n        onCurrentKeyChange({ value: firstKey });\n      }\n    }\n  }, [currentKey, onCurrentKeyChange]);\n\n  const focusHandler =\n    !isKeyDefined(currentKey) && onCurrentKeyChange ? { onFocus: handleInitialFocus } : {};\n\n  const [showFocusRing, focusRingProps] = useCollectionFocusRing(\n    (elem: Element | null) => {\n      return !!rootRef.current?.contains(elem);\n    },\n    ['ArrowUp', 'ArrowDown']\n  );\n\n  useEffect(() => {\n    if (currentKey != null && rootRef.current) {\n      const elem = findElementByKey(rootRef.current, currentKey);\n      if (elem) {\n        const scroller = viewportConfig?.scroller();\n        // make sure item is visible\n        scrollToVisible(elem, scroller != null ? scroller : rootRef.current);\n        const cell = elem.querySelector('[role=option]');\n        // update aria-activedescendant for screenreader\n        if (cell) {\n          rootRef.current.setAttribute('aria-activedescendant', cell.id);\n        }\n      }\n    }\n  }, [currentKey]);\n\n  const handleSelectionChange = useCallback(\n    (detail: SelectionDetail<K>) => {\n      if (onSelectionChange) {\n        if (detail.value.all === false && detail.value.keys.size > 0) {\n          // the last key selected by a user gesture is the anchor key\n          anchorKey.current = Array.from(detail.value.keys).pop();\n        }\n        onSelectionChange(detail);\n      }\n    },\n    [anchorKey, onSelectionChange]\n  );\n\n  const handleSelectionRangeChange = useCallback(\n    (detail: SelectionRangeDetail<K>) => {\n      if (data && onSelectionChange) {\n        const value = handleSelectionRange(detail, data);\n        if (Array.isArray(value)) {\n          onSelectionChange({ value: { all: false, keys: new Set(value) } });\n        } else {\n          pendingSelection.current = detail;\n          onLoadRange(value);\n        }\n      }\n    },\n    [data, onSelectionChange, pendingSelection, onLoadRange]\n  );\n\n  const { selectionProps } = useSelection(\n    (event: Event) => {\n      if (event.target === rootRef.current) {\n        return currentKey === undefined ? null : currentKey;\n      }\n      return keyExtractor(event) as K;\n    },\n    selectedKeys,\n    selectionMode,\n    false,\n    'replace',\n    handleSelectionChange,\n    anchorKey.current,\n    currentKey,\n    (currentKey: K | undefined, isPrev: boolean) =>\n      getPrevNextKey(rootRef.current, currentKey, isPrev),\n    (key: K) => {\n      if (rootRef.current) {\n        const elem = findElementByKey(rootRef.current, key);\n        if (elem) {\n          const scroller = viewportConfig?.scroller();\n          scrollToVisible(elem, scroller != null ? scroller : rootRef.current);\n        }\n      }\n    },\n    handleSelectionRangeChange\n  );\n\n  if (data && pendingSelection.current && onSelectionChange) {\n    const keys = handleSelectionRange(pendingSelection.current, data);\n    if (Array.isArray(keys)) {\n      onSelectionChange({ value: { all: false, keys: new Set(keys) } });\n      pendingSelection.current = undefined;\n    }\n  }\n\n  const loadMoreIndicator = (\n    <SkeletonContainer minimumCount={3}>\n      {() => {\n        return (\n          <Flex height=\"12x\" align=\"center\">\n            <Skeleton height=\"4x\" />\n          </Flex>\n        );\n      }}\n    </SkeletonContainer>\n  );\n\n  const suggestions = useMemo(() => findSuggestions(data), [data?.data]);\n\n  // TODO: check suggestions before Sparkle would cause a scrolling issue\n  const sparkleIndicator = <Sparkle sparkleHeight={sparkleHeight}></Sparkle>;\n\n  useEffect(() => {\n    // update sparkleHeight only when we have suggestions\n    // avoid unnecessary iterating through elements\n    if (suggestions) {\n      const placeholder = rootRef.current?.querySelector(\n        '.' + PLACEHOLDER_STYLE_CLASS\n      ) as HTMLElement;\n      let height = placeholder.offsetHeight;\n      const suggestionItems = rootRef.current?.querySelectorAll('[data-oj-suggestion]');\n      suggestionItems?.forEach((item) => (height += (item as HTMLElement).offsetHeight));\n      setSparkleHeight(height);\n    }\n  }, [suggestions]);\n\n  // if data is not specified, listview should show loading indicator\n  // todo: replace placeholder with actual SkeletonContainer component (Ash is working on)\n  return (\n    <div\n      {...mergeProps(currentKeyProps, selectionProps, focusRingProps, focusHandler)}\n      role=\"listbox\"\n      aria-rowcount={ariaRowCount}\n      aria-colcount={1}\n      ref={rootRef}\n      class={classes}\n      tabIndex={0}\n      aria-label={accessibleSummary}\n      aria-multiselectable={ariaMultiSelectable}>\n      {data == null ? (\n        <SkeletonContainer>\n          {() => {\n            return (\n              <Flex height=\"12x\" align=\"center\">\n                <Skeleton height=\"4x\" />\n              </Flex>\n            );\n          }}\n        </SkeletonContainer>\n      ) : (\n        <VirtualizedCollection\n          data={data}\n          onLoadRange={onLoadRange}\n          itemSelector={'.' + ITEM_STYLE_CLASS}\n          viewportConfig={getViewportConfig(rootRef, viewportConfig)}\n          loadMoreIndicator={loadMoreIndicator}\n          suggestions={sparkleIndicator}>\n          {(context: ListItemContext<K, D>) => {\n            const suggestion = suggestions?.get(context.metadata.key);\n            return (\n              <ListViewItem\n                itemIndex={context.index}\n                itemKey={context.metadata.key}\n                currentKey={currentKey}\n                isFocusRingVisible={showFocusRing}\n                isGridlineVisible={showGridline(context.index)}\n                selectedKeys={selectedKeys}\n                selectionMode={selectionMode}\n                onSelectionChange={handleSelectionChange}\n                {...(suggestion && { suggestion })}>\n                {children(context)}\n              </ListViewItem>\n            );\n          }}\n        </VirtualizedCollection>\n      )}\n    </div>\n  );\n}\n\n/**\n * A helper function that finds the data with suggestions, and\n * returns the corresponding keys\n * @param dataState\n */\nconst findSuggestions = <K, D>(dataState?: DataState<K, D> | null) => {\n  const data = dataState?.data;\n  const count = getSuggestionsCount(data);\n  if (count === 0) {\n    return null;\n  }\n\n  const suggestionsData = data!.slice(0, count);\n  return suggestionsData.reduce((suggestions, value, index) => {\n    const key = value.metadata.key;\n\n    if (index === count - 1) {\n      suggestions.set(key, 'end');\n    } else {\n      suggestions.set(key, true);\n    }\n\n    return suggestions;\n  }, new Map<K, 'end' | true>());\n};\n\n/**\n * A helper function that finds the number of suggestions\n * @param data\n */\nconst getSuggestionsCount = <K, D>(data?: DataState<K, D>['data']) => {\n  if (!data) {\n    return 0;\n  }\n\n  const index = data.findIndex((value) => !value.metadata.suggestion);\n  return index === -1 ? 0 : index;\n};\n\n/**\n * Returns the key from the item element\n */\nconst getKey = (item: HTMLElement) => {\n  return item.dataset['ojKeyType'] === 'number'\n    ? Number(item.dataset['ojKey'])\n    : item.dataset['ojKey'];\n};\n\n/**\n * A helper function to find the element with the specified key.\n * Returns null if the element with key is not found.\n */\nconst findElementByKey = <K extends string | number>(root: HTMLElement, key: K) => {\n  if (root) {\n    const items = root.querySelectorAll('.' + ITEM_STYLE_CLASS);\n    for (let i = 0; i < items.length; i++) {\n      const thisKey = getKey(items[i] as HTMLElement);\n      if (key == (thisKey as K)) {\n        return items[i];\n      }\n    }\n  }\n  return null;\n};\n\n/**\n * A helper function that return the key of the first available item.\n */\nconst getFirstVisibleKey = (root: HTMLElement) => {\n  if (root) {\n    const firstItem = root.querySelector('.' + ITEM_STYLE_CLASS);\n    if (firstItem) {\n      const key = getKey(firstItem as HTMLElement);\n      return key;\n    }\n  }\n  return null;\n};\n\n/**\n * A helper function that returns the key of the previous or the next item\n * given the specified current key\n */\nconst getPrevNextKey = <K extends string | number>(\n  root: HTMLElement | null,\n  currentKey: K | undefined,\n  isPrev: boolean\n) => {\n  return (): K | null => {\n    if (isKeyDefined(currentKey) && root) {\n      const currItem = findElementByKey(root, currentKey as K);\n      if (currItem) {\n        const nextItem = isPrev ? currItem.previousElementSibling : currItem.nextElementSibling;\n        if (nextItem) {\n          return getKey(nextItem as HTMLElement) as K;\n        }\n      }\n      return getFirstVisibleKey(root) as K;\n    }\n    return null;\n  };\n};\n\n/**\n * A helper function to make sure specified elem is visible in the specified container\n */\nconst scrollToVisible = (elem: Element, scroller: Element) => {\n  if (elem && scroller) {\n    const scrollerBounds = scroller.getBoundingClientRect();\n    const elemBounds = elem.getBoundingClientRect();\n    if (elemBounds.bottom > scrollerBounds.bottom) {\n      scroller.scrollTop = scroller.scrollTop + (elemBounds.bottom - scrollerBounds.bottom);\n    } else if (elemBounds.top < scrollerBounds.top) {\n      scroller.scrollTop = scroller.scrollTop - (scrollerBounds.top - elemBounds.top);\n    }\n  }\n};\n\n/**\n * A helper function to get the key from an event\n */\nconst keyExtractor = <K extends string | number>(event: Event): K | null => {\n  const elem = event.target as HTMLElement;\n  const item = elem.closest('.' + ITEM_STYLE_CLASS);\n  if (item) {\n    const key = getKey(item as HTMLElement) as K;\n    return key === undefined ? null : key;\n  }\n  return null;\n};\n","/**\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 */\n\nexport { Gridlines, ListView } from './ListView';\n"],"names":["ITEM_STYLE_CLASS","styles","cellStyles","isSelectable","selectionMode","isItemSelected","ListViewItem","children","itemKey","itemIndex","currentKey","isFocusRingVisible","isGridlineVisible","suggestion","selectedKeys","onSelectionChange","rootRef","useRef","isFocused","base","isSelected","selectedSingle","suggestionEnd","checkboxContainer","focused","containerStyle","timerValue","SkeletonContainer","minimumCount","gridlinesValues","stringLiteralArray","sparkleStyles","getViewportConfig","config","emptyKeys","all","keys","Set","handleSelectionRange","detail","dataState","value","metadata","key","startIndex","indexOf","start","endIndex","end","minIndex","offset","count","length","Sparkle","sparkleHeight","height","ListView","accessibleSummary","data","gridlines","onCurrentKeyChange","onLoadRange","viewportConfig","anchorKey","pendingSelection","showGridline","index","ariaMultiSelectable","undefined","ariaRowCount","sizePrecision","totalSize","currentKeyProps","useCurrentKey","keyExtractor","getPrevNextKey","current","handleInitialFocus","useCallback","isKeyDefined","firstKey","_a","contains","elem","scrollToVisible","scroller","cell","handleSelectionChange","size","Array","from","pop","handleSelectionRangeChange","isArray","event","target","isPrev","suggestions","placeholder","querySelector","PLACEHOLDER_STYLE_CLASS","offsetHeight","_jsx","VirtualizedCollection","Object","assign","itemSelector","loadMoreIndicator","sparkleIndicator","context","get","showFocusRing","findSuggestions","getSuggestionsCount","set","Map","findIndex","getKey","item","dataset","findElementByKey","root","i","items","getFirstVisibleKey","firstItem","currItem","nextItem","previousElementSibling","nextElementSibling","scrollerBounds","getBoundingClientRect","elemBounds","bottom","scrollTop","top"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAAA,gBAAA,GAAA,kBAAA,CAAA;AAEA,MAAAC,QAAA,GAAA;QAAA,QAAA;aAAA,SAAA;cAAA,SAAA;YAAA,SAAA;kBAAA,SAAA;;;AAAA,CAAA,CAAA;AAkCA,MAAAC,UAAA,GAAA;QAAA,SAAA;qBAAA,QAAA;;AAAA,CAAA,CAAA;AAkCA;;;AAGG;;AACH,MAAAC,YAAA,GAAA,CAAAC,aAAA,EAAAC,cAAA,KAAA;EACE,OAAAD,aAAA,KAAA,MAAA,KAAAA,aAAA,KAAA,UAAA,IAAA,CAAAC,cAAA,CAAA,CAAA;AACF,CAFA,CAAA;AAIA;;AAEG;;;AACH,SAAAC,YAAA,CAAA;EAAAC,QAAA;EAAAC,OAAA;EAAAC,SAAA;EAAAC,UAAA;EAAAC,kBAAA;EAAAC,iBAAA;EAAAC,UAAA;EAAAC,YAAA;EAAAV,aAAA;AAAAW,EAAAA,iBAAAA;AAAA,CAAA,EAAA;AAYE,EAAA,MAAAC,OAAA,GAAAC,MAAA,CAAA,IAAA,CAAA,CAAA;AACA,EAAA,MAAAC,SAAA,GAAAR,UAAA,IAAAF,OAAA,CAAA;;8BAGEP,QAAA,CAAAkB,iLAKAC,UAAA,IAAAhB,aAAA,KAAA,QAAA,IAAAH,QAAA,CAAAoB,gBACAR,UAAA,KAAA,KAAA,IAAA,EAAAO,UAAA,IAAAhB,aAAA,KAAA,QAAA,CAAA,IAAAH,QAAA,CAAAqB;kCAIApB,UAAA,CAAAiB,MACAf,aAAA,KAAA,UAAA,IAAAF,UAAA,CAAAqB,mBACAL,SAAA,IAAAP,kBAAA,IAAAT,UAAA,CAAAsB,UA5BJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA;;ACzIA,MAAAC,cAAA,GAAA;;AAAA,CAAA,CAAA;AAQA;;AAEI;;AACJ,MAAAC,UAAA,GAAA,EAAA,CAAA;AAEA;;;;AAII;;AACJ,SAAAC,iBAAA,CAAA;EAAApB,QAAA;AAAAqB,EAAAA,YAAA,GAAA,CAAA;AAAA,CAAA,EAAA;;;;;;;;;;;;;;AAeA;;ACrBA;;AAEG;;AACH,MAAAC,eAAA,GAAAC,kBAAA,CAAA,CAAA,SAAA,EAAA,QAAA,CAAA,CAAA,CAAA;AAyEA,MAAA7B,MAAA,GAAA;;AAAA,CAAA,CAAA;AAWA,MAAA8B,aAAA,GAAA;QAAA,SAAA;;AAAA,CAAA,CAAA;;AAgBA,MAAAC,iBAAA,GAAA,CAAAhB,OAAA,EAAAiB,MAAA,KAAA;EACE,OAAAA,MAAA,KAAA,IAAA,IAAAA,MAAA,KAAA,KAAA,CAAA,GAAAA,MAAA,GAAA;;;;GAAA,CAAA;AAOF,CARA,CAAA;;AAUA,MAAAC,SAAA,GAAA;AAAAC,EAAAA,GAAA,EAAA,KAAA;EAAAC,IAAA,EAAA,IAAAC,GAAA,EAAA;AAAA,CAAA,CAAA;;AAEA,MAAAC,oBAAA,GAAA,CAAAC,MAAA,EAAAC,SAAA,KAAA;;AAKI,IAAA,OAAAC,KAAA,CAAAC,QAAA,CAAAC,GAAA,CAAA;AACF;EACA,MAAAC,UAAA,GAAAR,IAAA,CAAAS,OAAA,CAAAN,MAAA,CAAAE,KAAA,CAAAK,KAAA,CAAA,CAAA;EACA,MAAAC,QAAA,GAAAX,IAAA,CAAAS,OAAA,CAAAN,MAAA,CAAAE,KAAA,CAAAO,GAAA,CAAA,CAAA;;;;AAGA,EAAA,IAAAC,QAAA,KAAA,CAAA,CAAA,EAAA;;IAEE,OAAA;AAAAC,MAAAA,MAAA,EAAA,CAAA;AAAAC,MAAAA,KAAA,EAAAX,SAAA,CAAAU,MAAA,GAAAd,IAAA,CAAAgB,MAAAA;KAAA,CAAA;AACD,GAHD,MAGO;;;AAGN,GAAA;AACH,CAlBA,CAAA;AAoBA;;;AAGG;;;AACH,SAAAC,OAAA,CAAA;AAAAC,EAAAA,aAAAA;AAAA,CAAA,EAAA;;AAEI,IAAA,OAAA,IAAA,CAAA;AACD,GAAA;;AAED,EAAA,MAAAC,MAAA,GAAAD,aAAA,GAAA,IAAA,CAAA;;;;;;;;;;;;;AASF,CAAA;AAEA;;;AAGG;;AACH,SAAAE,QAAA,CAAA;EAAAC,iBAAA;EAAAC,IAAA;EAAAnD,QAAA;EAAAG,UAAA;AAAAiD,EAAAA,SAAA,GAAA,QAAA;AAAA7C,EAAAA,YAAA,GAAAoB,SAAA;AAAA9B,EAAAA,aAAA,GAAA,MAAA;EAAAwD,kBAAA;EAAAC,WAAA;EAAA9C,iBAAA;AAAA+C,EAAAA,cAAAA;AAAA,CAAA,EAAA;AAaE,EAAA,MAAA9C,OAAA,GAAAC,MAAA,CAAA,IAAA,CAAA,CAbF;;AAgBE,EAAA,MAAA8C,SAAA,GAAA9C,MAAA,EAAA,CAhBF;;AAmBE,EAAA,MAAA+C,gBAAA,GAAA/C,MAAA,EAAA,CAnBF;;;;EAwBE,MAAAgD,YAAA,GAAAC,KAAA,IAAA;;AAEE,IAAA,OAAAP,SAAA,KAAA,SAAA,IAAAO,KAAA,GAAA,CAAA,CAAA;GAFF,CAAA;;EAKA,MAAAC,mBAAA,GAAA/D,aAAA,KAAA,MAAA,GAAAgE,SAAA,GAAAhE,aAAA,KAAA,UAAA,CAAA;AACA,EAAA,MAAAiE,YAAA,GAAAX,IAAA,KAAA,IAAA,GAAAU,SAAA,GAAAV,IAAA,CAAAY,aAAA,KAAA,OAAA,GAAAZ,IAAA,CAAAa,SAAA,GAAA,CAAA,CAAA,CAAA;;EAKA,MAAA;AAAAC,IAAAA,eAAAA;AAAA,GAAA,GAAAC,aAAA,CAAAC,YAAA,EAAAC,cAAA,CAAA3D,OAAA,CAAA4D,OAAA,EAAAlE,UAAA,EAAA,IAAA,CAAA,EAAAiE,cAAA,CAAA3D,OAAA,CAAA4D,OAAA,EAAAlE,UAAA,EAAA,KAAA,CAAA,EAAAA,UAAA,EAAAkD,kBAAA,CAAA,CAAA;AAQA,EAAA,MAAAiB,kBAAA,GAAAC,WAAA,CAAA,MAAA;AACE,IAAA,IAAA9D,OAAA,CAAA4D,OAAA,IAAAhB,kBAAA,EAAA;;;AAEE,MAAA,IAAAmB,YAAA,CAAAC,QAAA,CAAA,EAAA;AACEpB,QAAAA,kBAAA,CAAA;AAAAnB,UAAAA,KAAA,EAAAuC,QAAAA;AAAA,SAAA,CAAA,CAAA;AACD,OAAA;AACF,KAAA;AACH,GAPA,EAOA,CAAAtE,UAAA,EAAAkD,kBAAA,CAPA,CAAA,CAAA;;;;;;;IAcI,OAAA,CAAA,EAAA,CAAAqB,EAAA,GAAAjE,OAAA,CAAA4D,OAAA,MAAA,IAAA,IAAAK,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAC,QAAA,CAAAC,IAAA,CAAA,CAAA,CAAA;AACF,KAAA,CAAA,SAAA,EAAA,WAAA;;AAKA,IAAA,IAAAzE,UAAA,IAAA,IAAA,IAAAM,OAAA,CAAA4D,OAAA,EAAA;;;AAEE,MAAA,IAAAO,IAAA,EAAA;mHAAA;;AAGEC,QAAAA,eAAA,CAAAD,IAAA,EAAAE,QAAA,IAAA,IAAA,GAAAA,QAAA,GAAArE,OAAA,CAAA4D,OAAA,CAAA,CAAA;yDAHF;;AAME,QAAA,IAAAU,IAAA,EAAA;;AAEC,SAAA;AACF,OAAA;AACF,KAAA;AACH,KAAA,CAAA5E,UAAA;AAEA,EAAA,MAAA6E,qBAAA,GAAAT,WAAA,CAAAvC,MAAA,IAAA;AAEI,IAAA,IAAAxB,iBAAA,EAAA;AACE,MAAA,IAAAwB,MAAA,CAAAE,KAAA,CAAAN,GAAA,KAAA,KAAA,IAAAI,MAAA,CAAAE,KAAA,CAAAL,IAAA,CAAAoD,IAAA,GAAA,CAAA,EAAA;;AAEEzB,QAAAA,SAAA,CAAAa,OAAA,GAAAa,KAAA,CAAAC,IAAA,CAAAnD,MAAA,CAAAE,KAAA,CAAAL,IAAA,CAAA,CAAAuD,GAAA,EAAA,CAAA;AACD,OAAA;;;AAEF,KAAA;AACH,GATF,EASE,CAAA5B,SAAA,EAAAhD,iBAAA,CATF,CAAA,CAAA;AAaA,EAAA,MAAA6E,0BAAA,GAAAd,WAAA,CAAAvC,MAAA,IAAA;;;;AAIM,MAAA,IAAAkD,KAAA,CAAAI,OAAA,CAAApD,KAAA,CAAA,EAAA;AACE1B,QAAAA,iBAAA,CAAA;AAAA0B,UAAAA,KAAA,EAAA;AAAAN,YAAAA,GAAA,EAAA,KAAA;AAAAC,YAAAA,IAAA,EAAA,IAAAC,GAAA,CAAAI,KAAA,CAAA;AAAA,WAAA;AAAA,SAAA,CAAA,CAAA;AACD,OAFD,MAEO;QACLuB,gBAAA,CAAAY,OAAA,GAAArC,MAAA,CAAA;;AAED,OAAA;AACF,KAAA;GAVL,0DAAA,CAAA,CAAA;;;;AAiBI,IAAA,IAAAuD,KAAA,CAAAC,MAAA,KAAA/E,OAAA,CAAA4D,OAAA,EAAA;;AAEC,KAAA;;IACD,OAAAF,YAAA,CAAAoB,KAAA,CAAA,CAAA;AACF,KAAAhF,cAAAV,eAAA,OAAA,WAAAmF,uBAAAxB,SAAA,CAAAa,SAAAlE,YAAA,CAAAA,UAAA,EAAAsF,MAAA,KAAArB,cAAA,CAAA3D,OAAA,CAAA4D,OAAA,EAAAlE,UAAA,EAAAsF,MAAA,GAAArD,GAAA,IAAA;;;;AAaI,MAAA,IAAAwC,IAAA,EAAA;;AAEEC,QAAAA,eAAA,CAAAD,IAAA,EAAAE,QAAA,IAAA,IAAA,GAAAA,QAAA,GAAArE,OAAA,CAAA4D,OAAA,CAAA,CAAA;AACD,OAAA;AACF,KAAA;;;AAKL,EAAA,IAAAlB,IAAA,IAAAM,gBAAA,CAAAY,OAAA,IAAA7D,iBAAA,EAAA;;;AAEE,IAAA,IAAA0E,KAAA,CAAAI,OAAA,CAAAzD,IAAA,CAAA,EAAA;AACErB,MAAAA,iBAAA,CAAA;AAAA0B,QAAAA,KAAA,EAAA;AAAAN,UAAAA,GAAA,EAAA,KAAA;AAAAC,UAAAA,IAAA,EAAA,IAAAC,GAAA,CAAAD,IAAA,CAAA;AAAA,SAAA;AAAA,OAAA,CAAA,CAAA;MACA4B,gBAAA,CAAAY,OAAA,GAAAR,SAAA,CAAA;AACD,KAAA;AACF,GAAA;;;;;;;;;;;;;;;;;oHA5IH;;;;;;;;;;;AAkKI,IAAA,IAAA6B,WAAA,EAAA;MACE,MAAAC,WAAA,GAAA,CAAAjB,EAAA,GAAAjE,OAAA,CAAA4D,OAAA,MAAA,IAAA,IAAAK,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAkB,aAAA,CAAA,GAAAC,GAAAA,uBAAA,CAAA,CAAA;AAGA,MAAA,IAAA7C,MAAA,GAAA2C,WAAA,CAAAG,YAAA,CAAA;;;;AAID,KAAA;AACH,KAAA,CAAAJ,WAAA,GA3KF;;;;;;;;;;;;;;;;;;;;;;;AAkMU,OAAA;SAAAK,GAAA,CAAAC,qBAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAA/C,MAAAA,IAAA,EAAAA,IAAA;AAAAG,MAAAA,WAAA,EAAAA,WAAA;MAAA6C,YAAA,EAAA,MAAA1G,gBAAA;AAAA8D,MAAAA,cAAA,EAAA9B,iBAAA,CAAAhB,OAAA,EAAA8C,cAAA,CAAA;AAAA6C,MAAAA,iBAAA,EAAAA,iBAAA;AAAAV,MAAAA,WAAA,EAAAW,gBAAAA;AAAA,KAAA,EAAA;MAAArG,QAAA,EAAAsG,OAAA,IAAA;QAWE,MAAAhG,UAAA,GAAAoF,WAAA,KAAA,IAAA,IAAAA,WAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,WAAA,CAAAa,GAAA,CAAAD,OAAA,CAAAnE,QAAA,CAAAC,GAAA,CAAA,CAAA;AACA,QAAA,OAAA2D,GAAA,CAAAhG,YAAA,EAAAkG,MAAA,CAAAC,MAAA,CAAA;UAAAhG,SAAA,EAAAoG,OAAA,CAAA3C,KAAA;AAAA1D,UAAAA,OAAA,EAAAqG,OAAA,CAAAnE,QAAA,CAAAC,GAAA;AAAAjC,UAAAA,UAAA,EAAAA,UAAA;AAAAC,UAAAA,kBAAA,EAAAoG,aAAA;AAAAnG,UAAAA,iBAAA,EAAAqD,YAAA,CAAA4C,OAAA,CAAA3C,KAAA,CAAA;AAAApD,UAAAA,YAAA,EAAAA,YAAA;AAAAV,UAAAA,aAAA,EAAAA,aAAA;AAAAW,UAAAA,iBAAA,EAAAwE,qBAAAA;SAAA,EAAA1E,UAAA,IAAA;AAAAA,UAAAA,UAAAA;AAAA,SAAA,EAAA;UAAAN,QAAA,EAAAA,QAAA,CAAAsG,OAAA,CAAA;AAAA,SAAA,CAAA,CAAA,CAAA;AAcF,OAAA;AA1BA,KAAA,CAAA,CAAA;;AA+BV,CAAA;AAEA;;;;AAIG;;AACH,MAAAG,eAAA,GAAAxE,SAAA,IAAA;;AAEE,EAAA,MAAAW,KAAA,GAAA8D,mBAAA,CAAAvD,IAAA,CAAA,CAAA;;;AAEE,IAAA,OAAA,IAAA,CAAA;AACD,GAAA;;;;AAIC,IAAA,MAAAf,GAAA,GAAAF,KAAA,CAAAC,QAAA,CAAAC,GAAA,CAAA;;AAEA,IAAA,IAAAuB,KAAA,KAAAf,KAAA,GAAA,CAAA,EAAA;AACE8C,MAAAA,WAAA,CAAAiB,GAAA,CAAAvE,GAAA,EAAA,KAAA,CAAA,CAAA;AACD,KAFD,MAEO;AACLsD,MAAAA,WAAA,CAAAiB,GAAA,CAAAvE,GAAA,EAAA,IAAA,CAAA,CAAA;AACD,KAAA;;AAED,IAAA,OAAAsD,WAAA,CAAA;AACF,KAAA,IAAAkB,GAAA;AACF,CAnBA,CAAA;AAqBA;;;AAGG;;;AACH,MAAAF,mBAAA,GAAAvD,IAAA,IAAA;;AAEI,IAAA,OAAA,CAAA,CAAA;AACD,GAAA;;AAED,EAAA,MAAAQ,KAAA,GAAAR,IAAA,CAAA0D,SAAA,CAAA3E,KAAA,IAAA,CAAAA,KAAA,CAAAC,QAAA,CAAA7B,UAAA,CAAA,CAAA;AACA,EAAA,OAAAqD,KAAA,KAAA,CAAA,CAAA,GAAA,CAAA,GAAAA,KAAA,CAAA;AACF,CAPA,CAAA;AASA;;AAEG;;;AACH,MAAAmD,MAAA,GAAAC,IAAA,IAAA;EACE,OAAAA,IAAA,CAAAC,OAAA,CAAA,WAAA,CAAA,KAAA,QAAA,gCAAA,GAEED,IAAA,CAAAC,OAAA,CAAA,OAAA,CAFF,CAAA;AAGF,CAJA,CAAA;AAMA;;;AAGG;;;AACH,MAAAC,gBAAA,GAAA,CAAAC,IAAA,EAAA9E,GAAA,KAAA;AACE,EAAA,IAAA8E,IAAA,EAAA;;;AAEE,IAAA,KAAA,IAAAC,CAAA,GAAA,CAAA,EAAAA,CAAA,GAAAC,KAAA,CAAAvE,MAAA,EAAAsE,CAAA,EAAA,EAAA;;;;QAGI,OAAAC,KAAA,CAAAD,CAAA,CAAA,CAAA;AACD,OAAA;AACF,KAAA;AACF,GAAA;;AACD,EAAA,OAAA,IAAA,CAAA;AACF,CAXA,CAAA;AAaA;;AAEG;;;AACH,MAAAE,kBAAA,GAAAH,IAAA,IAAA;AACE,EAAA,IAAAA,IAAA,EAAA;;;AAEE,IAAA,IAAAI,SAAA,EAAA;AACE,MAAA,MAAAlF,GAAA,GAAA0E,MAAA,CAAAQ,SAAA,CAAA,CAAA;AACA,MAAA,OAAAlF,GAAA,CAAA;AACD,KAAA;AACF,GAAA;;AACD,EAAA,OAAA,IAAA,CAAA;AACF,CATA,CAAA;AAWA;;;AAGG;;;AACH,MAAAgC,cAAA,GAAA,CAAA8C,IAAA,EAAA/G,UAAA,EAAAsF,MAAA,KAAA;AAKE,EAAA,OAAA,MAAA;AACE,IAAA,IAAAjB,YAAA,CAAArE,UAAA,CAAA,IAAA+G,IAAA,EAAA;;;AAEE,MAAA,IAAAK,QAAA,EAAA;QACE,MAAAC,QAAA,GAAA/B,MAAA,GAAA8B,QAAA,CAAAE,sBAAA,GAAAF,QAAA,CAAAG,kBAAA,CAAA;;AACA,QAAA,IAAAF,QAAA,EAAA;UACE,OAAAV,MAAA,CAAAU,QAAA,CAAA,CAAA;AACD,SAAA;AACF,OAAA;;MACD,OAAAH,kBAAA,CAAAH,IAAA,CAAA,CAAA;AACD,KAAA;;AACD,IAAA,OAAA,IAAA,CAAA;GAXF,CAAA;AAaF,CAlBA,CAAA;AAoBA;;AAEG;;;AACH,MAAArC,eAAA,GAAA,CAAAD,IAAA,EAAAE,QAAA,KAAA;;AAEI,IAAA,MAAA6C,cAAA,GAAA7C,QAAA,CAAA8C,qBAAA,EAAA,CAAA;AACA,IAAA,MAAAC,UAAA,GAAAjD,IAAA,CAAAgD,qBAAA,EAAA,CAAA;;AACA,IAAA,IAAAC,UAAA,CAAAC,MAAA,GAAAH,cAAA,CAAAG,MAAA,EAAA;AACEhD,MAAAA,QAAA,CAAAiD,SAAA,GAAAjD,QAAA,CAAAiD,SAAA,IAAAF,UAAA,CAAAC,MAAA,GAAAH,cAAA,CAAAG,MAAA,CAAA,CAAA;KADF,MAEO,IAAAD,UAAA,CAAAG,GAAA,GAAAL,cAAA,CAAAK,GAAA,EAAA;AACLlD,MAAAA,QAAA,CAAAiD,SAAA,GAAAjD,QAAA,CAAAiD,SAAA,IAAAJ,cAAA,CAAAK,GAAA,GAAAH,UAAA,CAAAG,GAAA,CAAA,CAAA;AACD,KAAA;AACF,GAAA;AACH,CAVA,CAAA;AAYA;;AAEG;;;AACH,MAAA7D,YAAA,GAAAoB,KAAA,IAAA;AACE,EAAA,MAAAX,IAAA,GAAAW,KAAA,CAAAC,MAAA,CAAA;;;AAEA,EAAA,IAAAuB,IAAA,EAAA;AACE,IAAA,MAAA3E,GAAA,GAAA0E,MAAA,CAAAC,IAAA,CAAA,CAAA;;AAED,GAAA;;AACD,EAAA,OAAA,IAAA,CAAA;AACF,CARA;;AC9hBA;;;;;;AAMG;;;;;;;"}
+{"version":3,"file":"UNSAFE_ListView.js","sources":["../../src/UNSAFE_ListView/ListViewItem.tsx","../../src/UNSAFE_ListView/SkeletonContainer.tsx","../../src/UNSAFE_ListView/ListView.tsx","../../src/UNSAFE_ListView/index.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 { ComponentChildren } from 'preact';\nimport { useRef } from 'preact/hooks';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { Keys, containsKey } from '../utils/UNSAFE_keys';\nimport { SelectionDetail, SelectionMode } from '../UNSAFE_Collection';\nimport { Selector } from '../UNSAFE_Selector';\nimport { useId } from '../hooks/UNSAFE_useId';\n\n// default style class for items in ListView\nexport const ITEM_STYLE_CLASS = 'oj-listview-item';\n\nconst styles = {\n  base: cssProps`${{\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: 'var(--oj-collection-list-row-height)',\n    boxSizing: 'border-box',\n    backgroundImage:\n      'linear-gradient(var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color),var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color))',\n    backgroundSize: 0,\n    backgroundPosition: '0 0',\n    backgroundRepeat: 'no-repeat',\n    borderTop: '1px solid transparent'\n  }}`,\n  gridlines: cssProps`${{\n    backgroundSize: '100% 1px'\n  }}`,\n  selectable: cssProps`${{\n    '&:hover': {\n      backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover);'\n    }\n  }}`,\n  selected: cssProps`${{\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-selected)'\n  }}`,\n  selectedSingle: cssProps`${{\n    borderTop: '1px solid var(--oj-c-PRIVATE-DO-NOT-USE-core-border-color-selected)',\n    boxShadow: 'inset 0 -1px var(--oj-c-PRIVATE-DO-NOT-USE-core-border-color-selected)'\n  }}`,\n  // TODO: revisit later to prevent double lines when implementing gridlines feature\n  suggestionEnd: cssProps`${{\n    boxShadow: 'inset 0 -1px var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color)'\n  }}`\n};\n\nconst cellStyles = {\n  base: cssProps`${{\n    flexGrow: '1',\n    '&:focus': {\n      outlineStyle: 'none'\n    }\n  }}`,\n  checkboxContainer: cssProps`${{\n    display: 'flex'\n  }}`,\n  focused: cssProps`${{\n    outlineStyle: 'dotted',\n    outlineWidth: '1px',\n    outlineColor: 'var(---oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)',\n    outlineOffset: '-1px'\n  }}`\n};\n\n/**\n * Props for the ListViewItem Component\n */\nexport type Props<K> = {\n  children: ComponentChildren;\n  itemKey: K;\n  itemIndex: number;\n  currentKey?: K;\n  selectedKeys: Keys<K>;\n  selectionMode: SelectionMode;\n  isFocusRingVisible: boolean;\n  isGridlineVisible: boolean;\n  suggestion?: 'end' | true;\n  onSelectionChange?: (detail: SelectionDetail<K>) => void;\n};\n\n/**\n * Helper method to determine whether item is selectable\n * @returns true if item is selectable (show hover effect), false otherwise\n */\nconst isSelectable = (selectionMode: SelectionMode, isItemSelected: boolean) => {\n  return selectionMode !== 'none' && (selectionMode === 'multiple' || !isItemSelected);\n};\n\n/**\n * The internal component used to render a single item in ListView.\n */\nexport function ListViewItem<K extends string | number>({\n  children,\n  itemKey,\n  itemIndex,\n  currentKey,\n  isFocusRingVisible,\n  isGridlineVisible,\n  suggestion,\n  selectedKeys,\n  selectionMode,\n  onSelectionChange\n}: Props<K>) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const isFocused = currentKey == itemKey;\n  const isSelected = containsKey(selectedKeys, itemKey);\n  const classes = classNames([\n    styles.base,\n    ITEM_STYLE_CLASS,\n    isGridlineVisible && styles.gridlines,\n    isSelectable(selectionMode, isSelected) && !isSelected && styles.selectable,\n    isSelected && styles.selected,\n    isSelected && selectionMode === 'single' && styles.selectedSingle,\n    suggestion === 'end' && !(isSelected && selectionMode === 'single') && styles.suggestionEnd\n  ]);\n\n  const cellClasses = classNames([\n    cellStyles.base,\n    selectionMode === 'multiple' && cellStyles.checkboxContainer,\n    isFocused && isFocusRingVisible && cellStyles.focused\n  ]);\n\n  // todo: use translated text for selector\n  // note cannot put focus on gridcell div since JAWS will not read the aria-rowindex\n  // correctly, so unfortunately needed another div\n  return (\n    <div\n      role=\"presentation\"\n      aria-rowindex={itemIndex + 1}\n      key={itemKey}\n      data-oj-key={itemKey}\n      data-oj-suggestion={!!suggestion}\n      class={classes}\n      ref={rootRef}\n      {...(typeof itemKey === 'number' && { 'data-oj-key-type': 'number' })}>\n      <div\n        id={useId()}\n        class={cellClasses}\n        role=\"option\"\n        aria-posinset={itemIndex + 1}\n        aria-setsize={-1}\n        aria-colindex={1}\n        aria-selected={selectionMode !== 'none' ? isSelected : undefined}>\n        {selectionMode === 'multiple' && (\n          <Selector\n            rowKey={itemKey}\n            selectedKeys={selectedKeys}\n            onChange={onSelectionChange}></Selector>\n        )}\n        {children}\n      </div>\n    </div>\n  );\n}\n","/**\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 { ComponentChildren } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\n\ntype Props = {\n  /**\n   * Allows to pass and access the properties from child elements\n   **/\n  children?: (index: number) => ComponentChildren;\n  /**\n   * Allows to specify number of skeletons to be rendered on initial load\n   **/\n  minimumCount?: number;\n};\n\nconst containerStyle = {\n  base: cssProps`${{\n    height: '100%',\n    overflowX: 'hidden',\n    overflowY: 'hidden'\n  }}`\n};\n\n/**\n * Allows to specify the time delay for rendering the component\n **/\nconst timerValue = 50;\n\n/**\n * SkeletonContainer renders 'minimumCount' number of skeletons\n * of the variant specified from its child element - Skeleton's prop after\n * 'timerValue' ms delay\n **/\nexport function SkeletonContainer({ children, minimumCount = 3 }: Props) {\n  const [isVisible, setIsVisible] = useState(false);\n\n  useEffect(() => {\n    setTimeout(() => {\n      setIsVisible(true);\n    }, timerValue);\n  }, []);\n\n  const containerClasses = classNames([containerStyle.base]);\n  return isVisible && children ? (\n    <div class={containerClasses} role=\"presentation\">\n      {[...Array(minimumCount)].map((_element, index) => children(index))}\n    </div>\n  ) : null;\n}\n","/**\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 { ComponentChildren, RefObject } from 'preact';\nimport { useRef, useCallback, useEffect, useState, useMemo } from 'preact/hooks';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { Keys, isKeyDefined } from '../utils/UNSAFE_keys';\nimport {\n  CurrentKeyDetail,\n  DataState,\n  ListItemContext,\n  Metadata,\n  Range,\n  SelectionDetail,\n  SelectionMode\n} from '../UNSAFE_Collection';\nimport {\n  VirtualizedCollection,\n  ViewportConfig,\n  PLACEHOLDER_STYLE_CLASS\n} from '../UNSAFE_VirtualizedCollection';\nimport { ListViewItem, ITEM_STYLE_CLASS } from './ListViewItem';\nimport { SelectionRangeDetail, useSelection } from '../hooks/PRIVATE_useSelection';\nimport { useCurrentKey } from '../hooks/PRIVATE_useCurrentKey';\nimport { useCollectionFocusRing } from '../hooks/PRIVATE_useCollectionFocusRing';\nimport { SkeletonContainer } from './SkeletonContainer';\nimport { Skeleton } from '../UNSAFE_Skeleton';\nimport { Flex } from '../UNSAFE_Flex';\n/**\n * Type for gridlines\n */\nexport const gridlinesValues = stringLiteralArray(['visible', 'hidden']);\nexport type Gridlines = typeof gridlinesValues[number];\n\n/**\n * Props for the ListView Component\n */\nexport type Props<K, D> = {\n  /**\n   * A DataState object that provide information including data and metadata to this ListView.\n   * If the value is null, then ListView will show loading indicator until a DataState is set.\n   */\n  data: DataState<K, D> | null;\n\n  /**\n   * A function to render each item\n   */\n  children: (context: ListItemContext<K, D>) => ComponentChildren;\n\n  /**\n   * Callback function to handle when viewport has changed, including the case\n   * where user scrolls to the end of the component and there are more items to load.\n   * The function should sets a new DataState on the component for the specified range.\n   */\n  onLoadRange: (range: Range) => void;\n\n  /**\n   * A text that provides a summary of this ListView for the purpose of accessibility.\n   * This is required in order to make ListView accessible.\n   */\n  accessibleSummary: string;\n\n  /**\n   * The key of the item that currently have keyboard focus. Ignored if the current item is not\n   * currently in the viewport.\n   */\n  currentKey?: K;\n\n  /**\n   * Specifies whether the horizontal grid lines should be visible.  By default gridlines\n   * are hidden.\n   */\n  gridlines?: Gridlines;\n\n  /**\n   * The keys of the current selected items in the ListView.\n   */\n  selectedKeys?: Keys<K>;\n\n  /**\n   * The type of selection behavior that is enabled on the ListView. This property controls the number\n   * of selections that can be made via selection gestures at any given time.\n   */\n  selectionMode?: SelectionMode;\n\n  /**\n   * Callback function to handle when current focused item has changed.  The function should\n   * update the currentKey prop with a new current key.\n   */\n  onCurrentKeyChange?: (detail: CurrentKeyDetail<K>) => void;\n\n  /**\n   * Callback function to handle when selection has changed.  The function should update\n   * the selectedKeys prop with a new set of selected keys.\n   */\n  onSelectionChange?: (detail: SelectionDetail<K>) => void;\n\n  /**\n   * Viewport configuration which the application can specify the element to determine what range\n   * of data to render.\n   */\n  viewportConfig?: ViewportConfig;\n};\n\nconst styles = {\n  base: cssProps`${{\n    height: '100%',\n    userSelect: 'none',\n    overflowY: 'inherit',\n    '&:focus': {\n      outlineStyle: 'none'\n    }\n  }}`\n};\n\nconst sparkleStyles = {\n  base: cssProps`${{\n    position: 'absolute',\n    top: 0,\n    width: '4px',\n    zIndex: 1,\n    display: 'block',\n    backgroundImage: 'var(--oj-c-PRIVATE-DO-NOT-USE-collection-sparkle-img)',\n    backgroundRepeat: 'no-repeat',\n    backgroundSize: '100% 100%'\n  }}`,\n  container: cssProps`${{\n    position: 'relative'\n  }}`\n};\n\nconst getViewportConfig = (rootRef: RefObject<HTMLElement>, config?: ViewportConfig) => {\n  return (\n    config ?? {\n      scroller: () => {\n        return rootRef.current;\n      }\n    }\n  );\n};\n\nconst emptyKeys = { all: false, keys: new Set() };\n\nconst handleSelectionRange = <K, D>(\n  detail: SelectionRangeDetail<K>,\n  dataState: DataState<K, D>\n) => {\n  const keys = dataState.data.map((value: { data: D; metadata: Metadata<K> }) => {\n    return value.metadata.key;\n  });\n  const startIndex = keys.indexOf(detail.value.start);\n  const endIndex = keys.indexOf(detail.value.end);\n  const minIndex = Math.min(startIndex, endIndex);\n  const maxIndex = Math.max(startIndex, endIndex);\n  if (minIndex === -1) {\n    // return a range to fetch, maxIndex should not be -1\n    return { offset: 0, count: dataState.offset + keys.length };\n  } else {\n    // range of keys are in the current viewport, return them\n    return keys.slice(minIndex, maxIndex + 1);\n  }\n};\n\n/**\n * A sparkle component for smart suggestion indicator in ListView\n * @param sparkleHeight the height of sparkle\n */\nexport function Sparkle({ sparkleHeight }: { sparkleHeight: number }) {\n  if (sparkleHeight <= 0) {\n    return null;\n  }\n\n  const height = sparkleHeight + 'px';\n  const sparkleClasses = classNames([sparkleStyles.base]);\n  const containerClasses = classNames([sparkleStyles.container]);\n\n  return (\n    <div key=\"sparkle\" class={containerClasses}>\n      <div class={sparkleClasses} style={{ height }}></div>\n    </div>\n  );\n}\n\n/**\n * Component that renders items as a flat list.\n * In order to maximize performance, only items that are visible in the viewport are rendered.\n */\nexport function ListView<K extends string | number, D>({\n  accessibleSummary,\n  data,\n  children,\n  currentKey,\n  gridlines = 'hidden',\n  selectedKeys = emptyKeys as Keys<K>,\n  selectionMode = 'none',\n  onCurrentKeyChange,\n  onLoadRange,\n  onSelectionChange,\n  viewportConfig\n}: Props<K, D>) {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  // tracking the anchor key which is used for shift+click selection\n  const anchorKey = useRef<K | undefined>();\n\n  // tracking\n  const pendingSelection = useRef<SelectionRangeDetail<K>>();\n\n  // tracking sparkle height\n  const [sparkleHeight, setSparkleHeight] = useState<number>(0);\n\n  const showGridline = (index: number) => {\n    // gridlines are positioned at the top so never show it for the first item\n    return gridlines === 'visible' && index > 0;\n  };\n\n  const ariaMultiSelectable = selectionMode === 'none' ? undefined : selectionMode === 'multiple';\n  const ariaRowCount =\n    data === null ? undefined : data.sizePrecision === 'exact' ? data.totalSize : -1;\n\n  const classes = classNames([styles.base]);\n\n  const { currentKeyProps } = useCurrentKey(\n    keyExtractor,\n    getPrevNextKey(rootRef.current, currentKey, true),\n    getPrevNextKey(rootRef.current, currentKey, false),\n    currentKey,\n    onCurrentKeyChange\n  );\n\n  const handleInitialFocus = useCallback(() => {\n    if (rootRef.current && onCurrentKeyChange) {\n      const firstKey = getFirstVisibleKey(rootRef.current) as K;\n      if (isKeyDefined(firstKey)) {\n        onCurrentKeyChange({ value: firstKey });\n      }\n    }\n  }, [currentKey, onCurrentKeyChange]);\n\n  const focusHandler =\n    !isKeyDefined(currentKey) && onCurrentKeyChange ? { onFocus: handleInitialFocus } : {};\n\n  const [showFocusRing, focusRingProps] = useCollectionFocusRing(\n    (elem: Element | null) => {\n      return !!rootRef.current?.contains(elem);\n    },\n    ['ArrowUp', 'ArrowDown']\n  );\n\n  useEffect(() => {\n    if (currentKey != null && rootRef.current) {\n      const elem = findElementByKey(rootRef.current, currentKey);\n      if (elem) {\n        const scroller = viewportConfig?.scroller();\n        // make sure item is visible\n        scrollToVisible(elem, scroller != null ? scroller : rootRef.current);\n        const cell = elem.querySelector('[role=option]');\n        // update aria-activedescendant for screenreader\n        if (cell) {\n          rootRef.current.setAttribute('aria-activedescendant', cell.id);\n        }\n      }\n    }\n  }, [currentKey]);\n\n  const handleSelectionChange = useCallback(\n    (detail: SelectionDetail<K>) => {\n      if (onSelectionChange) {\n        if (detail.value.all === false && detail.value.keys.size > 0) {\n          // the last key selected by a user gesture is the anchor key\n          anchorKey.current = Array.from(detail.value.keys).pop();\n        }\n        onSelectionChange(detail);\n      }\n    },\n    [anchorKey, onSelectionChange]\n  );\n\n  const handleSelectionRangeChange = useCallback(\n    (detail: SelectionRangeDetail<K>) => {\n      if (data && onSelectionChange) {\n        const value = handleSelectionRange(detail, data);\n        if (Array.isArray(value)) {\n          onSelectionChange({ value: { all: false, keys: new Set(value) } });\n        } else {\n          pendingSelection.current = detail;\n          onLoadRange(value);\n        }\n      }\n    },\n    [data, onSelectionChange, pendingSelection, onLoadRange]\n  );\n\n  const { selectionProps } = useSelection(\n    (event: Event) => {\n      if (event.target === rootRef.current) {\n        return currentKey === undefined ? null : currentKey;\n      }\n      return keyExtractor(event) as K;\n    },\n    selectedKeys,\n    selectionMode,\n    false,\n    'replace',\n    handleSelectionChange,\n    anchorKey.current,\n    currentKey,\n    (currentKey: K | undefined, isPrev: boolean) =>\n      getPrevNextKey(rootRef.current, currentKey, isPrev),\n    (key: K) => {\n      if (rootRef.current) {\n        const elem = findElementByKey(rootRef.current, key);\n        if (elem) {\n          const scroller = viewportConfig?.scroller();\n          scrollToVisible(elem, scroller != null ? scroller : rootRef.current);\n        }\n      }\n    },\n    handleSelectionRangeChange\n  );\n\n  if (data && pendingSelection.current && onSelectionChange) {\n    const keys = handleSelectionRange(pendingSelection.current, data);\n    if (Array.isArray(keys)) {\n      onSelectionChange({ value: { all: false, keys: new Set(keys) } });\n      pendingSelection.current = undefined;\n    }\n  }\n\n  const loadMoreIndicator = (\n    <SkeletonContainer minimumCount={3}>\n      {() => {\n        return (\n          <Flex height=\"12x\" align=\"center\">\n            <Skeleton height=\"4x\" />\n          </Flex>\n        );\n      }}\n    </SkeletonContainer>\n  );\n\n  const suggestions = useMemo(() => findSuggestions(data), [data?.data]);\n\n  // TODO: check suggestions before Sparkle would cause a scrolling issue\n  const sparkleIndicator = <Sparkle sparkleHeight={sparkleHeight}></Sparkle>;\n\n  useEffect(() => {\n    // update sparkleHeight only when we have suggestions\n    // avoid unnecessary iterating through elements\n    if (suggestions) {\n      const placeholder = rootRef.current?.querySelector(\n        '.' + PLACEHOLDER_STYLE_CLASS\n      ) as HTMLElement;\n      let height = placeholder.offsetHeight;\n      const suggestionItems = rootRef.current?.querySelectorAll('[data-oj-suggestion]');\n      suggestionItems?.forEach((item) => (height += (item as HTMLElement).offsetHeight));\n      setSparkleHeight(height);\n    }\n  }, [suggestions]);\n\n  // if data is not specified, listview should show loading indicator\n  // todo: replace placeholder with actual SkeletonContainer component (Ash is working on)\n  return (\n    <div\n      {...mergeProps(currentKeyProps, selectionProps, focusRingProps, focusHandler)}\n      role=\"listbox\"\n      aria-rowcount={ariaRowCount}\n      aria-colcount={1}\n      ref={rootRef}\n      class={classes}\n      tabIndex={0}\n      aria-label={accessibleSummary}\n      aria-multiselectable={ariaMultiSelectable}>\n      {data == null ? (\n        <SkeletonContainer>\n          {() => {\n            return (\n              <Flex height=\"12x\" align=\"center\">\n                <Skeleton height=\"4x\" />\n              </Flex>\n            );\n          }}\n        </SkeletonContainer>\n      ) : (\n        <VirtualizedCollection\n          data={data}\n          onLoadRange={onLoadRange}\n          itemSelector={'.' + ITEM_STYLE_CLASS}\n          viewportConfig={getViewportConfig(rootRef, viewportConfig)}\n          loadMoreIndicator={loadMoreIndicator}\n          suggestions={sparkleIndicator}>\n          {(context: ListItemContext<K, D>) => {\n            const suggestion = suggestions?.get(context.metadata.key);\n            return (\n              <ListViewItem\n                itemIndex={context.index}\n                itemKey={context.metadata.key}\n                currentKey={currentKey}\n                isFocusRingVisible={showFocusRing}\n                isGridlineVisible={showGridline(context.index)}\n                selectedKeys={selectedKeys}\n                selectionMode={selectionMode}\n                onSelectionChange={handleSelectionChange}\n                {...(suggestion && { suggestion })}>\n                {children(context)}\n              </ListViewItem>\n            );\n          }}\n        </VirtualizedCollection>\n      )}\n    </div>\n  );\n}\n\n/**\n * A helper function that finds the data with suggestions, and\n * returns the corresponding keys\n * @param dataState\n */\nconst findSuggestions = <K, D>(dataState?: DataState<K, D> | null) => {\n  const data = dataState?.data;\n  const count = getSuggestionsCount(data);\n  if (count === 0) {\n    return null;\n  }\n\n  const suggestionsData = data!.slice(0, count);\n  return suggestionsData.reduce((suggestions, value, index) => {\n    const key = value.metadata.key;\n\n    if (index === count - 1) {\n      suggestions.set(key, 'end');\n    } else {\n      suggestions.set(key, true);\n    }\n\n    return suggestions;\n  }, new Map<K, 'end' | true>());\n};\n\n/**\n * A helper function that finds the number of suggestions\n * @param data\n */\nconst getSuggestionsCount = <K, D>(data?: DataState<K, D>['data']) => {\n  if (!data) {\n    return 0;\n  }\n\n  const index = data.findIndex((value) => !value.metadata.suggestion);\n  return index === -1 ? 0 : index;\n};\n\n/**\n * Returns the key from the item element\n */\nconst getKey = (item: HTMLElement) => {\n  return item.dataset['ojKeyType'] === 'number'\n    ? Number(item.dataset['ojKey'])\n    : item.dataset['ojKey'];\n};\n\n/**\n * A helper function to find the element with the specified key.\n * Returns null if the element with key is not found.\n */\nconst findElementByKey = <K extends string | number>(root: HTMLElement, key: K) => {\n  if (root) {\n    const items = root.querySelectorAll('.' + ITEM_STYLE_CLASS);\n    for (let i = 0; i < items.length; i++) {\n      const thisKey = getKey(items[i] as HTMLElement);\n      if (key == (thisKey as K)) {\n        return items[i];\n      }\n    }\n  }\n  return null;\n};\n\n/**\n * A helper function that return the key of the first available item.\n */\nconst getFirstVisibleKey = (root: HTMLElement) => {\n  if (root) {\n    const firstItem = root.querySelector('.' + ITEM_STYLE_CLASS);\n    if (firstItem) {\n      const key = getKey(firstItem as HTMLElement);\n      return key;\n    }\n  }\n  return null;\n};\n\n/**\n * A helper function that returns the key of the previous or the next item\n * given the specified current key\n */\nconst getPrevNextKey = <K extends string | number>(\n  root: HTMLElement | null,\n  currentKey: K | undefined,\n  isPrev: boolean\n) => {\n  return (): K | null => {\n    if (isKeyDefined(currentKey) && root) {\n      const currItem = findElementByKey(root, currentKey as K);\n      if (currItem) {\n        const nextItem = isPrev ? currItem.previousElementSibling : currItem.nextElementSibling;\n        if (nextItem) {\n          return getKey(nextItem as HTMLElement) as K;\n        }\n      }\n      return getFirstVisibleKey(root) as K;\n    }\n    return null;\n  };\n};\n\n/**\n * A helper function to make sure specified elem is visible in the specified container\n */\nconst scrollToVisible = (elem: Element, scroller: Element) => {\n  if (elem && scroller) {\n    const scrollerBounds = scroller.getBoundingClientRect();\n    const elemBounds = elem.getBoundingClientRect();\n    if (elemBounds.bottom > scrollerBounds.bottom) {\n      scroller.scrollTop = scroller.scrollTop + (elemBounds.bottom - scrollerBounds.bottom);\n    } else if (elemBounds.top < scrollerBounds.top) {\n      scroller.scrollTop = scroller.scrollTop - (scrollerBounds.top - elemBounds.top);\n    }\n  }\n};\n\n/**\n * A helper function to get the key from an event\n */\nconst keyExtractor = <K extends string | number>(event: Event): K | null => {\n  const elem = event.target as HTMLElement;\n  const item = elem.closest('.' + ITEM_STYLE_CLASS);\n  if (item) {\n    const key = getKey(item as HTMLElement) as K;\n    return key === undefined ? null : key;\n  }\n  return null;\n};\n","/**\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 */\n\nexport { Gridlines, ListView } from './ListView';\n"],"names":["ITEM_STYLE_CLASS","styles","cellStyles","isSelectable","selectionMode","isItemSelected","ListViewItem","children","itemKey","itemIndex","currentKey","isFocusRingVisible","isGridlineVisible","suggestion","selectedKeys","onSelectionChange","rootRef","useRef","isFocused","base","isSelected","selectedSingle","suggestionEnd","checkboxContainer","focused","containerStyle","timerValue","SkeletonContainer","minimumCount","gridlinesValues","stringLiteralArray","sparkleStyles","getViewportConfig","config","emptyKeys","all","keys","Set","handleSelectionRange","detail","dataState","value","metadata","key","startIndex","indexOf","start","endIndex","end","minIndex","offset","count","length","Sparkle","sparkleHeight","height","ListView","accessibleSummary","data","gridlines","onCurrentKeyChange","onLoadRange","viewportConfig","anchorKey","pendingSelection","showGridline","index","ariaMultiSelectable","undefined","ariaRowCount","sizePrecision","totalSize","currentKeyProps","useCurrentKey","keyExtractor","getPrevNextKey","current","handleInitialFocus","useCallback","isKeyDefined","firstKey","_a","contains","elem","scrollToVisible","scroller","cell","handleSelectionChange","size","Array","from","pop","handleSelectionRangeChange","isArray","event","target","isPrev","suggestions","placeholder","querySelector","PLACEHOLDER_STYLE_CLASS","offsetHeight","_jsx","VirtualizedCollection","Object","assign","itemSelector","loadMoreIndicator","sparkleIndicator","context","get","showFocusRing","findSuggestions","getSuggestionsCount","set","Map","findIndex","getKey","item","dataset","findElementByKey","root","i","items","getFirstVisibleKey","firstItem","currItem","nextItem","previousElementSibling","nextElementSibling","scrollerBounds","getBoundingClientRect","elemBounds","bottom","scrollTop","top"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAAA,gBAAA,GAAA,kBAAA,CAAA;AAEA,MAAAC,QAAA,GAAA;QAAA,QAAA;aAAA,SAAA;cAAA,QAAA;YAAA,SAAA;kBAAA,SAAA;;;AAAA,CAAA,CAAA;AAkCA,MAAAC,UAAA,GAAA;QAAA,QAAA;qBAAA,QAAA;;AAAA,CAAA,CAAA;AAkCA;;;AAGG;;AACH,MAAAC,YAAA,GAAA,CAAAC,aAAA,EAAAC,cAAA,KAAA;EACE,OAAAD,aAAA,KAAA,MAAA,KAAAA,aAAA,KAAA,UAAA,IAAA,CAAAC,cAAA,CAAA,CAAA;AACF,CAFA,CAAA;AAIA;;AAEG;;;AACH,SAAAC,YAAA,CAAA;EAAAC,QAAA;EAAAC,OAAA;EAAAC,SAAA;EAAAC,UAAA;EAAAC,kBAAA;EAAAC,iBAAA;EAAAC,UAAA;EAAAC,YAAA;EAAAV,aAAA;AAAAW,EAAAA,iBAAAA;AAAA,CAAA,EAAA;AAYE,EAAA,MAAAC,OAAA,GAAAC,MAAA,CAAA,IAAA,CAAA,CAAA;AACA,EAAA,MAAAC,SAAA,GAAAR,UAAA,IAAAF,OAAA,CAAA;;8BAGEP,QAAA,CAAAkB,iLAKAC,UAAA,IAAAhB,aAAA,KAAA,QAAA,IAAAH,QAAA,CAAAoB,gBACAR,UAAA,KAAA,KAAA,IAAA,EAAAO,UAAA,IAAAhB,aAAA,KAAA,QAAA,CAAA,IAAAH,QAAA,CAAAqB;kCAIApB,UAAA,CAAAiB,MACAf,aAAA,KAAA,UAAA,IAAAF,UAAA,CAAAqB,mBACAL,SAAA,IAAAP,kBAAA,IAAAT,UAAA,CAAAsB,UA5BJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA;;ACzIA,MAAAC,cAAA,GAAA;;AAAA,CAAA,CAAA;AAQA;;AAEI;;AACJ,MAAAC,UAAA,GAAA,EAAA,CAAA;AAEA;;;;AAII;;AACJ,SAAAC,iBAAA,CAAA;EAAApB,QAAA;AAAAqB,EAAAA,YAAA,GAAA,CAAA;AAAA,CAAA,EAAA;;;;;;;;;;;;;;AAeA;;ACrBA;;AAEG;;AACH,MAAAC,eAAA,GAAAC,kBAAA,CAAA,CAAA,SAAA,EAAA,QAAA,CAAA,CAAA,CAAA;AAyEA,MAAA7B,MAAA,GAAA;;AAAA,CAAA,CAAA;AAWA,MAAA8B,aAAA,GAAA;QAAA,SAAA;;AAAA,CAAA,CAAA;;AAgBA,MAAAC,iBAAA,GAAA,CAAAhB,OAAA,EAAAiB,MAAA,KAAA;EACE,OAAAA,MAAA,KAAA,IAAA,IAAAA,MAAA,KAAA,KAAA,CAAA,GAAAA,MAAA,GAAA;;;;GAAA,CAAA;AAOF,CARA,CAAA;;AAUA,MAAAC,SAAA,GAAA;AAAAC,EAAAA,GAAA,EAAA,KAAA;EAAAC,IAAA,EAAA,IAAAC,GAAA,EAAA;AAAA,CAAA,CAAA;;AAEA,MAAAC,oBAAA,GAAA,CAAAC,MAAA,EAAAC,SAAA,KAAA;;AAKI,IAAA,OAAAC,KAAA,CAAAC,QAAA,CAAAC,GAAA,CAAA;AACF;EACA,MAAAC,UAAA,GAAAR,IAAA,CAAAS,OAAA,CAAAN,MAAA,CAAAE,KAAA,CAAAK,KAAA,CAAA,CAAA;EACA,MAAAC,QAAA,GAAAX,IAAA,CAAAS,OAAA,CAAAN,MAAA,CAAAE,KAAA,CAAAO,GAAA,CAAA,CAAA;;;;AAGA,EAAA,IAAAC,QAAA,KAAA,CAAA,CAAA,EAAA;;IAEE,OAAA;AAAAC,MAAAA,MAAA,EAAA,CAAA;AAAAC,MAAAA,KAAA,EAAAX,SAAA,CAAAU,MAAA,GAAAd,IAAA,CAAAgB,MAAAA;KAAA,CAAA;AACD,GAHD,MAGO;;;AAGN,GAAA;AACH,CAlBA,CAAA;AAoBA;;;AAGG;;;AACH,SAAAC,OAAA,CAAA;AAAAC,EAAAA,aAAAA;AAAA,CAAA,EAAA;;AAEI,IAAA,OAAA,IAAA,CAAA;AACD,GAAA;;AAED,EAAA,MAAAC,MAAA,GAAAD,aAAA,GAAA,IAAA,CAAA;;;;;;;;;;;;;AASF,CAAA;AAEA;;;AAGG;;AACH,SAAAE,QAAA,CAAA;EAAAC,iBAAA;EAAAC,IAAA;EAAAnD,QAAA;EAAAG,UAAA;AAAAiD,EAAAA,SAAA,GAAA,QAAA;AAAA7C,EAAAA,YAAA,GAAAoB,SAAA;AAAA9B,EAAAA,aAAA,GAAA,MAAA;EAAAwD,kBAAA;EAAAC,WAAA;EAAA9C,iBAAA;AAAA+C,EAAAA,cAAAA;AAAA,CAAA,EAAA;AAaE,EAAA,MAAA9C,OAAA,GAAAC,MAAA,CAAA,IAAA,CAAA,CAbF;;AAgBE,EAAA,MAAA8C,SAAA,GAAA9C,MAAA,EAAA,CAhBF;;AAmBE,EAAA,MAAA+C,gBAAA,GAAA/C,MAAA,EAAA,CAnBF;;;;EAwBE,MAAAgD,YAAA,GAAAC,KAAA,IAAA;;AAEE,IAAA,OAAAP,SAAA,KAAA,SAAA,IAAAO,KAAA,GAAA,CAAA,CAAA;GAFF,CAAA;;EAKA,MAAAC,mBAAA,GAAA/D,aAAA,KAAA,MAAA,GAAAgE,SAAA,GAAAhE,aAAA,KAAA,UAAA,CAAA;AACA,EAAA,MAAAiE,YAAA,GAAAX,IAAA,KAAA,IAAA,GAAAU,SAAA,GAAAV,IAAA,CAAAY,aAAA,KAAA,OAAA,GAAAZ,IAAA,CAAAa,SAAA,GAAA,CAAA,CAAA,CAAA;;EAKA,MAAA;AAAAC,IAAAA,eAAAA;AAAA,GAAA,GAAAC,aAAA,CAAAC,YAAA,EAAAC,cAAA,CAAA3D,OAAA,CAAA4D,OAAA,EAAAlE,UAAA,EAAA,IAAA,CAAA,EAAAiE,cAAA,CAAA3D,OAAA,CAAA4D,OAAA,EAAAlE,UAAA,EAAA,KAAA,CAAA,EAAAA,UAAA,EAAAkD,kBAAA,CAAA,CAAA;AAQA,EAAA,MAAAiB,kBAAA,GAAAC,WAAA,CAAA,MAAA;AACE,IAAA,IAAA9D,OAAA,CAAA4D,OAAA,IAAAhB,kBAAA,EAAA;;;AAEE,MAAA,IAAAmB,YAAA,CAAAC,QAAA,CAAA,EAAA;AACEpB,QAAAA,kBAAA,CAAA;AAAAnB,UAAAA,KAAA,EAAAuC,QAAAA;AAAA,SAAA,CAAA,CAAA;AACD,OAAA;AACF,KAAA;AACH,GAPA,EAOA,CAAAtE,UAAA,EAAAkD,kBAAA,CAPA,CAAA,CAAA;;;;;;;IAcI,OAAA,CAAA,EAAA,CAAAqB,EAAA,GAAAjE,OAAA,CAAA4D,OAAA,MAAA,IAAA,IAAAK,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAC,QAAA,CAAAC,IAAA,CAAA,CAAA,CAAA;AACF,KAAA,CAAA,SAAA,EAAA,WAAA;;AAKA,IAAA,IAAAzE,UAAA,IAAA,IAAA,IAAAM,OAAA,CAAA4D,OAAA,EAAA;;;AAEE,MAAA,IAAAO,IAAA,EAAA;mHAAA;;AAGEC,QAAAA,eAAA,CAAAD,IAAA,EAAAE,QAAA,IAAA,IAAA,GAAAA,QAAA,GAAArE,OAAA,CAAA4D,OAAA,CAAA,CAAA;yDAHF;;AAME,QAAA,IAAAU,IAAA,EAAA;;AAEC,SAAA;AACF,OAAA;AACF,KAAA;AACH,KAAA,CAAA5E,UAAA;AAEA,EAAA,MAAA6E,qBAAA,GAAAT,WAAA,CAAAvC,MAAA,IAAA;AAEI,IAAA,IAAAxB,iBAAA,EAAA;AACE,MAAA,IAAAwB,MAAA,CAAAE,KAAA,CAAAN,GAAA,KAAA,KAAA,IAAAI,MAAA,CAAAE,KAAA,CAAAL,IAAA,CAAAoD,IAAA,GAAA,CAAA,EAAA;;AAEEzB,QAAAA,SAAA,CAAAa,OAAA,GAAAa,KAAA,CAAAC,IAAA,CAAAnD,MAAA,CAAAE,KAAA,CAAAL,IAAA,CAAA,CAAAuD,GAAA,EAAA,CAAA;AACD,OAAA;;;AAEF,KAAA;AACH,GATF,EASE,CAAA5B,SAAA,EAAAhD,iBAAA,CATF,CAAA,CAAA;AAaA,EAAA,MAAA6E,0BAAA,GAAAd,WAAA,CAAAvC,MAAA,IAAA;;;;AAIM,MAAA,IAAAkD,KAAA,CAAAI,OAAA,CAAApD,KAAA,CAAA,EAAA;AACE1B,QAAAA,iBAAA,CAAA;AAAA0B,UAAAA,KAAA,EAAA;AAAAN,YAAAA,GAAA,EAAA,KAAA;AAAAC,YAAAA,IAAA,EAAA,IAAAC,GAAA,CAAAI,KAAA,CAAA;AAAA,WAAA;AAAA,SAAA,CAAA,CAAA;AACD,OAFD,MAEO;QACLuB,gBAAA,CAAAY,OAAA,GAAArC,MAAA,CAAA;;AAED,OAAA;AACF,KAAA;GAVL,0DAAA,CAAA,CAAA;;;;AAiBI,IAAA,IAAAuD,KAAA,CAAAC,MAAA,KAAA/E,OAAA,CAAA4D,OAAA,EAAA;;AAEC,KAAA;;IACD,OAAAF,YAAA,CAAAoB,KAAA,CAAA,CAAA;AACF,KAAAhF,cAAAV,eAAA,OAAA,WAAAmF,uBAAAxB,SAAA,CAAAa,SAAAlE,YAAA,CAAAA,UAAA,EAAAsF,MAAA,KAAArB,cAAA,CAAA3D,OAAA,CAAA4D,OAAA,EAAAlE,UAAA,EAAAsF,MAAA,GAAArD,GAAA,IAAA;;;;AAaI,MAAA,IAAAwC,IAAA,EAAA;;AAEEC,QAAAA,eAAA,CAAAD,IAAA,EAAAE,QAAA,IAAA,IAAA,GAAAA,QAAA,GAAArE,OAAA,CAAA4D,OAAA,CAAA,CAAA;AACD,OAAA;AACF,KAAA;;;AAKL,EAAA,IAAAlB,IAAA,IAAAM,gBAAA,CAAAY,OAAA,IAAA7D,iBAAA,EAAA;;;AAEE,IAAA,IAAA0E,KAAA,CAAAI,OAAA,CAAAzD,IAAA,CAAA,EAAA;AACErB,MAAAA,iBAAA,CAAA;AAAA0B,QAAAA,KAAA,EAAA;AAAAN,UAAAA,GAAA,EAAA,KAAA;AAAAC,UAAAA,IAAA,EAAA,IAAAC,GAAA,CAAAD,IAAA,CAAA;AAAA,SAAA;AAAA,OAAA,CAAA,CAAA;MACA4B,gBAAA,CAAAY,OAAA,GAAAR,SAAA,CAAA;AACD,KAAA;AACF,GAAA;;;;;;;;;;;;;;;;;oHA5IH;;;;;;;;;;;AAkKI,IAAA,IAAA6B,WAAA,EAAA;MACE,MAAAC,WAAA,GAAA,CAAAjB,EAAA,GAAAjE,OAAA,CAAA4D,OAAA,MAAA,IAAA,IAAAK,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAkB,aAAA,CAAA,GAAAC,GAAAA,uBAAA,CAAA,CAAA;AAGA,MAAA,IAAA7C,MAAA,GAAA2C,WAAA,CAAAG,YAAA,CAAA;;;;AAID,KAAA;AACH,KAAA,CAAAJ,WAAA,GA3KF;;;;;;;;;;;;;;;;;;;;;;;AAkMU,OAAA;SAAAK,GAAA,CAAAC,qBAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAA/C,MAAAA,IAAA,EAAAA,IAAA;AAAAG,MAAAA,WAAA,EAAAA,WAAA;MAAA6C,YAAA,EAAA,MAAA1G,gBAAA;AAAA8D,MAAAA,cAAA,EAAA9B,iBAAA,CAAAhB,OAAA,EAAA8C,cAAA,CAAA;AAAA6C,MAAAA,iBAAA,EAAAA,iBAAA;AAAAV,MAAAA,WAAA,EAAAW,gBAAAA;AAAA,KAAA,EAAA;MAAArG,QAAA,EAAAsG,OAAA,IAAA;QAWE,MAAAhG,UAAA,GAAAoF,WAAA,KAAA,IAAA,IAAAA,WAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,WAAA,CAAAa,GAAA,CAAAD,OAAA,CAAAnE,QAAA,CAAAC,GAAA,CAAA,CAAA;AACA,QAAA,OAAA2D,GAAA,CAAAhG,YAAA,EAAAkG,MAAA,CAAAC,MAAA,CAAA;UAAAhG,SAAA,EAAAoG,OAAA,CAAA3C,KAAA;AAAA1D,UAAAA,OAAA,EAAAqG,OAAA,CAAAnE,QAAA,CAAAC,GAAA;AAAAjC,UAAAA,UAAA,EAAAA,UAAA;AAAAC,UAAAA,kBAAA,EAAAoG,aAAA;AAAAnG,UAAAA,iBAAA,EAAAqD,YAAA,CAAA4C,OAAA,CAAA3C,KAAA,CAAA;AAAApD,UAAAA,YAAA,EAAAA,YAAA;AAAAV,UAAAA,aAAA,EAAAA,aAAA;AAAAW,UAAAA,iBAAA,EAAAwE,qBAAAA;SAAA,EAAA1E,UAAA,IAAA;AAAAA,UAAAA,UAAAA;AAAA,SAAA,EAAA;UAAAN,QAAA,EAAAA,QAAA,CAAAsG,OAAA,CAAA;AAAA,SAAA,CAAA,CAAA,CAAA;AAcF,OAAA;AA1BA,KAAA,CAAA,CAAA;;AA+BV,CAAA;AAEA;;;;AAIG;;AACH,MAAAG,eAAA,GAAAxE,SAAA,IAAA;;AAEE,EAAA,MAAAW,KAAA,GAAA8D,mBAAA,CAAAvD,IAAA,CAAA,CAAA;;;AAEE,IAAA,OAAA,IAAA,CAAA;AACD,GAAA;;;;AAIC,IAAA,MAAAf,GAAA,GAAAF,KAAA,CAAAC,QAAA,CAAAC,GAAA,CAAA;;AAEA,IAAA,IAAAuB,KAAA,KAAAf,KAAA,GAAA,CAAA,EAAA;AACE8C,MAAAA,WAAA,CAAAiB,GAAA,CAAAvE,GAAA,EAAA,KAAA,CAAA,CAAA;AACD,KAFD,MAEO;AACLsD,MAAAA,WAAA,CAAAiB,GAAA,CAAAvE,GAAA,EAAA,IAAA,CAAA,CAAA;AACD,KAAA;;AAED,IAAA,OAAAsD,WAAA,CAAA;AACF,KAAA,IAAAkB,GAAA;AACF,CAnBA,CAAA;AAqBA;;;AAGG;;;AACH,MAAAF,mBAAA,GAAAvD,IAAA,IAAA;;AAEI,IAAA,OAAA,CAAA,CAAA;AACD,GAAA;;AAED,EAAA,MAAAQ,KAAA,GAAAR,IAAA,CAAA0D,SAAA,CAAA3E,KAAA,IAAA,CAAAA,KAAA,CAAAC,QAAA,CAAA7B,UAAA,CAAA,CAAA;AACA,EAAA,OAAAqD,KAAA,KAAA,CAAA,CAAA,GAAA,CAAA,GAAAA,KAAA,CAAA;AACF,CAPA,CAAA;AASA;;AAEG;;;AACH,MAAAmD,MAAA,GAAAC,IAAA,IAAA;EACE,OAAAA,IAAA,CAAAC,OAAA,CAAA,WAAA,CAAA,KAAA,QAAA,gCAAA,GAEED,IAAA,CAAAC,OAAA,CAAA,OAAA,CAFF,CAAA;AAGF,CAJA,CAAA;AAMA;;;AAGG;;;AACH,MAAAC,gBAAA,GAAA,CAAAC,IAAA,EAAA9E,GAAA,KAAA;AACE,EAAA,IAAA8E,IAAA,EAAA;;;AAEE,IAAA,KAAA,IAAAC,CAAA,GAAA,CAAA,EAAAA,CAAA,GAAAC,KAAA,CAAAvE,MAAA,EAAAsE,CAAA,EAAA,EAAA;;;;QAGI,OAAAC,KAAA,CAAAD,CAAA,CAAA,CAAA;AACD,OAAA;AACF,KAAA;AACF,GAAA;;AACD,EAAA,OAAA,IAAA,CAAA;AACF,CAXA,CAAA;AAaA;;AAEG;;;AACH,MAAAE,kBAAA,GAAAH,IAAA,IAAA;AACE,EAAA,IAAAA,IAAA,EAAA;;;AAEE,IAAA,IAAAI,SAAA,EAAA;AACE,MAAA,MAAAlF,GAAA,GAAA0E,MAAA,CAAAQ,SAAA,CAAA,CAAA;AACA,MAAA,OAAAlF,GAAA,CAAA;AACD,KAAA;AACF,GAAA;;AACD,EAAA,OAAA,IAAA,CAAA;AACF,CATA,CAAA;AAWA;;;AAGG;;;AACH,MAAAgC,cAAA,GAAA,CAAA8C,IAAA,EAAA/G,UAAA,EAAAsF,MAAA,KAAA;AAKE,EAAA,OAAA,MAAA;AACE,IAAA,IAAAjB,YAAA,CAAArE,UAAA,CAAA,IAAA+G,IAAA,EAAA;;;AAEE,MAAA,IAAAK,QAAA,EAAA;QACE,MAAAC,QAAA,GAAA/B,MAAA,GAAA8B,QAAA,CAAAE,sBAAA,GAAAF,QAAA,CAAAG,kBAAA,CAAA;;AACA,QAAA,IAAAF,QAAA,EAAA;UACE,OAAAV,MAAA,CAAAU,QAAA,CAAA,CAAA;AACD,SAAA;AACF,OAAA;;MACD,OAAAH,kBAAA,CAAAH,IAAA,CAAA,CAAA;AACD,KAAA;;AACD,IAAA,OAAA,IAAA,CAAA;GAXF,CAAA;AAaF,CAlBA,CAAA;AAoBA;;AAEG;;;AACH,MAAArC,eAAA,GAAA,CAAAD,IAAA,EAAAE,QAAA,KAAA;;AAEI,IAAA,MAAA6C,cAAA,GAAA7C,QAAA,CAAA8C,qBAAA,EAAA,CAAA;AACA,IAAA,MAAAC,UAAA,GAAAjD,IAAA,CAAAgD,qBAAA,EAAA,CAAA;;AACA,IAAA,IAAAC,UAAA,CAAAC,MAAA,GAAAH,cAAA,CAAAG,MAAA,EAAA;AACEhD,MAAAA,QAAA,CAAAiD,SAAA,GAAAjD,QAAA,CAAAiD,SAAA,IAAAF,UAAA,CAAAC,MAAA,GAAAH,cAAA,CAAAG,MAAA,CAAA,CAAA;KADF,MAEO,IAAAD,UAAA,CAAAG,GAAA,GAAAL,cAAA,CAAAK,GAAA,EAAA;AACLlD,MAAAA,QAAA,CAAAiD,SAAA,GAAAjD,QAAA,CAAAiD,SAAA,IAAAJ,cAAA,CAAAK,GAAA,GAAAH,UAAA,CAAAG,GAAA,CAAA,CAAA;AACD,KAAA;AACF,GAAA;AACH,CAVA,CAAA;AAYA;;AAEG;;;AACH,MAAA7D,YAAA,GAAAoB,KAAA,IAAA;AACE,EAAA,MAAAX,IAAA,GAAAW,KAAA,CAAAC,MAAA,CAAA;;;AAEA,EAAA,IAAAuB,IAAA,EAAA;AACE,IAAA,MAAA3E,GAAA,GAAA0E,MAAA,CAAAC,IAAA,CAAA,CAAA;;AAED,GAAA;;AACD,EAAA,OAAA,IAAA,CAAA;AACF,CARA;;AC9hBA;;;;;;AAMG;;;;;;;"}

package/dist/js/libs/oraclejet-preact/es/UNSAFE_LiveRegion.css

@@ -1 +1 @@
-.n3oos4{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow-x:hidden;overflow-y:hidden;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;width:1px;position:absolute;}
+._3dvvae{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow-x:hidden;overflow-y:hidden;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;width:1px;position:absolute;}

package/dist/js/libs/oraclejet-preact/es/UNSAFE_LiveRegion.js

@@ -1,9 +1,9 @@
-/* @oracle/oraclejet-preact: 13.1.1 */
+/* @oracle/oraclejet-preact: 13.1.2 */
 import { jsx } from 'preact/jsx-runtime';
 import './UNSAFE_LiveRegion.css';
 import { useState, useCallback, useEffect } from 'preact/hooks';
 
-const offScreenStyle = "n3oos4";
+const offScreenStyle = "_3dvvae";
 /**
  * A helper component that renders an aria-live region
  *

package/dist/js/libs/oraclejet-preact/es/UNSAFE_LiveRegion.js.map

@@ -1 +1 @@
-{"version":3,"file":"UNSAFE_LiveRegion.js","sources":["../../src/UNSAFE_LiveRegion/LiveRegion.tsx","../../src/UNSAFE_LiveRegion/index.ts"],"sourcesContent":["import { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\n\nconst offScreenStyle = cssProps`${{\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: '1px',\n  margin: '-1px',\n  overflowX: 'hidden',\n  overflowY: 'hidden',\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n  width: '1px',\n  position: 'absolute'\n}}`;\n\ntype Props = {\n  /**\n   * Whether this live region is atomic\n   */\n  atomic?: 'true' | 'false';\n\n  /**\n   * The text to be read out in the live region\n   */\n  children?: string;\n\n  /**\n   * Timeout for updating the text\n   */\n  timeout?: number;\n\n  /**\n   * The value for the aria-live attribute\n   */\n  type?: 'assertive' | 'polite' | 'off';\n};\n\n/**\n * A helper component that renders an aria-live region\n *\n * TODO: Create a more centralized component that can handle aria-live region for\n * the whole application and use context api to communicate\n */\nfunction LiveRegion({ atomic = 'false', children = '', timeout = 100, type = 'polite' }: Props) {\n  const ariaLiveText = useLiveText(children, timeout);\n\n  return (\n    <span aria-live={type} aria-atomic={atomic} class={offScreenStyle}>\n      {ariaLiveText}\n    </span>\n  );\n}\n\n/**\n * A custom hook for handling the aria-live region\n *\n * @param text The aria-live text to use\n * @param timeout The timeout for setting the aria-live text async\n * @returns The aria-live text\n */\nfunction useLiveText(text: string, timeout: number) {\n  const [liveText, setLiveText] = useState<string>();\n  const updateText = useCallback(() => setLiveText(text), [text]);\n  const updateTextAsync = useCallback(() => setTimeout(updateText, timeout), [updateText, timeout]);\n\n  useEffect(() => {\n    const timeoutId = updateTextAsync();\n\n    return () => clearTimeout(timeoutId);\n  }, [updateTextAsync]);\n\n  return liveText;\n}\n\nexport { LiveRegion };\n","/**\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 */\nexport { LiveRegion } from './LiveRegion';\n"],"names":["offScreenStyle","LiveRegion","atomic","children","timeout","type","_jsx","Object","assign","class","ariaLiveText","useLiveText","text","updateText","useCallback","setLiveText","timeoutId","updateTextAsync","clearTimeout","liveText"],"mappings":";;;;;AAGA,MAAAA,cAAA,GAAA,QAAA,CAAA;AAqCA;;;;;AAKG;;AACH,SAAAC,UAAA,CAAA;AAAAC,EAAAA,MAAA,GAAA,OAAA;AAAAC,EAAAA,QAAA,GAAA,EAAA;AAAAC,EAAAA,OAAA,GAAA,GAAA;AAAAC,EAAAA,IAAA,GAAA,QAAA;AAAA,CAAA,EAAA;;AAGE,EAAA,OAAAC,GAAA,CAAA,MAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAA,IAAA,WAAA,EAAAH,IAAA;AAAA,IAAA,aAAA,EAAAH,MAAA;AAAAO,IAAAA,KAAA,EAAAT,cAAAA;AAAA,GAAA,EAAA;AAAAG,IAAAA,QAAA,EAAAO,YAAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAKF,CAAA;AAEA;;;;;;AAMG;;;AACH,SAAAC,WAAA,CAAAC,IAAA,EAAAR,OAAA,EAAA;;AAEE,EAAA,MAAAS,UAAA,GAAAC,WAAA,CAAA,MAAAC,WAAA,CAAAH,IAAA,CAAA,EAAA,CAAAA,IAAA,CAAA,CAAA,CAAA;;;IAIE,MAAAI,SAAA,GAAAC,eAAA,EAAA,CAAA;AAEA,IAAA,OAAA,MAAAC,YAAA,CAAAF,SAAA,CAAA,CAAA;AACF,KAAA,CAAAC,eAAA;AAEA,EAAA,OAAAE,QAAA,CAAA;AACF;;AC3EA;;;;;;AAMG;;;;;;;"}
+{"version":3,"file":"UNSAFE_LiveRegion.js","sources":["../../src/UNSAFE_LiveRegion/LiveRegion.tsx","../../src/UNSAFE_LiveRegion/index.ts"],"sourcesContent":["import { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\n\nconst offScreenStyle = cssProps`${{\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: '1px',\n  margin: '-1px',\n  overflowX: 'hidden',\n  overflowY: 'hidden',\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n  width: '1px',\n  position: 'absolute'\n}}`;\n\ntype Props = {\n  /**\n   * Whether this live region is atomic\n   */\n  atomic?: 'true' | 'false';\n\n  /**\n   * The text to be read out in the live region\n   */\n  children?: string;\n\n  /**\n   * Timeout for updating the text\n   */\n  timeout?: number;\n\n  /**\n   * The value for the aria-live attribute\n   */\n  type?: 'assertive' | 'polite' | 'off';\n};\n\n/**\n * A helper component that renders an aria-live region\n *\n * TODO: Create a more centralized component that can handle aria-live region for\n * the whole application and use context api to communicate\n */\nfunction LiveRegion({ atomic = 'false', children = '', timeout = 100, type = 'polite' }: Props) {\n  const ariaLiveText = useLiveText(children, timeout);\n\n  return (\n    <span aria-live={type} aria-atomic={atomic} class={offScreenStyle}>\n      {ariaLiveText}\n    </span>\n  );\n}\n\n/**\n * A custom hook for handling the aria-live region\n *\n * @param text The aria-live text to use\n * @param timeout The timeout for setting the aria-live text async\n * @returns The aria-live text\n */\nfunction useLiveText(text: string, timeout: number) {\n  const [liveText, setLiveText] = useState<string>();\n  const updateText = useCallback(() => setLiveText(text), [text]);\n  const updateTextAsync = useCallback(() => setTimeout(updateText, timeout), [updateText, timeout]);\n\n  useEffect(() => {\n    const timeoutId = updateTextAsync();\n\n    return () => clearTimeout(timeoutId);\n  }, [updateTextAsync]);\n\n  return liveText;\n}\n\nexport { LiveRegion };\n","/**\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 */\nexport { LiveRegion } from './LiveRegion';\n"],"names":["offScreenStyle","LiveRegion","atomic","children","timeout","type","_jsx","Object","assign","class","ariaLiveText","useLiveText","text","updateText","useCallback","setLiveText","timeoutId","updateTextAsync","clearTimeout","liveText"],"mappings":";;;;;AAGA,MAAAA,cAAA,GAAA,SAAA,CAAA;AAqCA;;;;;AAKG;;AACH,SAAAC,UAAA,CAAA;AAAAC,EAAAA,MAAA,GAAA,OAAA;AAAAC,EAAAA,QAAA,GAAA,EAAA;AAAAC,EAAAA,OAAA,GAAA,GAAA;AAAAC,EAAAA,IAAA,GAAA,QAAA;AAAA,CAAA,EAAA;;AAGE,EAAA,OAAAC,GAAA,CAAA,MAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAA,IAAA,WAAA,EAAAH,IAAA;AAAA,IAAA,aAAA,EAAAH,MAAA;AAAAO,IAAAA,KAAA,EAAAT,cAAAA;AAAA,GAAA,EAAA;AAAAG,IAAAA,QAAA,EAAAO,YAAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAKF,CAAA;AAEA;;;;;;AAMG;;;AACH,SAAAC,WAAA,CAAAC,IAAA,EAAAR,OAAA,EAAA;;AAEE,EAAA,MAAAS,UAAA,GAAAC,WAAA,CAAA,MAAAC,WAAA,CAAAH,IAAA,CAAA,EAAA,CAAAA,IAAA,CAAA,CAAA,CAAA;;;IAIE,MAAAI,SAAA,GAAAC,eAAA,EAAA,CAAA;AAEA,IAAA,OAAA,MAAAC,YAAA,CAAAF,SAAA,CAAA,CAAA;AACF,KAAA,CAAAC,eAAA;AAEA,EAAA,OAAAE,QAAA,CAAA;AACF;;AC3EA;;;;;;AAMG;;;;;;;"}

package/dist/js/libs/oraclejet-preact/es/UNSAFE_Message.css

@@ -1,19 +1,19 @@
-._jh8fqs{margin-inline-start:0.25rem;margin-inline-end:-0.5rem;margin-top:-0.5rem;margin-bottom:-0.5rem;}
+._scg0sn{margin-inline-start:0.25rem;margin-inline-end:-0.5rem;margin-top:-0.5rem;margin-bottom:-0.5rem;}
 
-._3e1wpo{margin-top:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x);overflow-wrap:anywhere;}
-._qb4dc{font-size:var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-sm-font-size);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary);}
+._q3mn7b{margin-top:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x);overflow-wrap:anywhere;}
+._hgf940{font-size:var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-sm-font-size);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary);}
 
-._11eq7{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-background-color);border-bottom:1px solid var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color);}._11eq7:focus-visible{outline-style:dotted;outline-width:1px;outline-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color);outline-offset:1px;}
-.ooq1fv{border:1px solid var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color);border-radius:var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-lg);}
-._j7beug{line-height:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-summary-line-height);box-sizing:border-box;display:flex;flex-wrap:wrap;flex-direction:row;}@media screen and (max-width:599.9px){._j7beug{flex-direction:column;}}
-._re9q1{box-sizing:border-box;display:flex;flex-wrap:wrap;padding-top:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x);padding-bottom:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x);padding-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-core-gutter-start,var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x));padding-inline-end:var(--oj-c-PRIVATE-DO-NOT-USE-core-gutter-end,var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x));}
+._elsfr9{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-background-color);border-bottom:1px solid var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color);}._elsfr9:focus-visible{outline-style:dotted;outline-width:1px;outline-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color);outline-offset:1px;}
+._m7frfh{border:1px solid var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color);border-radius:var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-lg);}
+.ptx61a{line-height:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-summary-line-height);box-sizing:border-box;display:flex;flex-wrap:wrap;flex-direction:row;}@media screen and (max-width:599.9px){.ptx61a{flex-direction:column;}}
+.yk93za{box-sizing:border-box;display:flex;flex-wrap:wrap;padding-top:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x);padding-bottom:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x);padding-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-core-gutter-start,var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x));padding-inline-end:var(--oj-c-PRIVATE-DO-NOT-USE-core-gutter-end,var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x));}
 
-.xzntl3{flex:1;overflow-wrap:anywhere;}
-._rslxrn{font-size:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-summary-text-size);font-weight:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-summary-text-weight);color:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-summary-text-color);}
-.aba7ha{font-size:var(--oj-c-PRIVATE-DO-NOT-USE-user-assistance-inline-font-size);font-weight:400;color:var(--oj-c-PRIVATE-DO-NOT-USE-user-assistance-inline-text-color);line-height:1.333;}
+.trbkn6{margin-inline-end:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x);}
+._hrzg0a{color:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-start-icon-color);font-size:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-start-icon-size);height:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-summary-line-height);}
+._cuet0h{color:var(--oj-c-PRIVATE-DO-NOT-USE-message-inline-start-icon-color);font-size:1rem;}
 
-._1pke7{margin-inline-end:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x);}
-._giqa7d{color:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-start-icon-color);font-size:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-start-icon-size);height:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-summary-line-height);}
-.rlgai0{color:var(--oj-c-PRIVATE-DO-NOT-USE-message-inline-start-icon-color);font-size:1rem;}
+._i84r8{flex:1;overflow-wrap:anywhere;}
+._h19u3h{font-size:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-summary-text-size);font-weight:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-summary-text-weight);color:var(--oj-c-PRIVATE-DO-NOT-USE-message-banner-summary-text-color);}
+._odwhf{font-size:var(--oj-c-PRIVATE-DO-NOT-USE-user-assistance-inline-font-size);font-weight:400;color:var(--oj-c-PRIVATE-DO-NOT-USE-user-assistance-inline-text-color);line-height:1.333;}
 
-.ivqx9l{flex-shrink:0;font-size:var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-xs-font-size);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary);}
+._nyz9j{flex-shrink:0;font-size:var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-xs-font-size);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary);}

package/dist/js/libs/oraclejet-preact/es/UNSAFE_Message.js

@@ -1,4 +1,4 @@
-/* @oracle/oraclejet-preact: 13.1.1 */
+/* @oracle/oraclejet-preact: 13.1.2 */
 import { jsx, jsxs } from 'preact/jsx-runtime';
 import './UNSAFE_Message.css';
 import { Flex } from './UNSAFE_Flex.js';
@@ -13,15 +13,15 @@ import { IcoSuccessS as SvgIcoSuccessS, IcoErrorS as SvgIcoErrorS, IcoInformatio
 import { Logger } from './utils/UNSAFE_logger.js';
 import { playDefaultNotificationSound, playAudioFromURL } from './utils/UNSAFE_soundUtils.js';
 import { TransitionGroup, Transition } from './UNSAFE_TransitionGroup.js';
-import './tslib.es6-46109fc7.js';
+import './tslib.es6-5e147f4d.js';
 import './utils/UNSAFE_interpolations/dimensions.js';
 import './utils/UNSAFE_size.js';
-import './_curry1-ce9e5040.js';
+import './_curry1-69de8b60.js';
 import './utils/UNSAFE_mergeInterpolations.js';
-import './_curry2-948d8424.js';
-import './_has-eb182826.js';
+import './_curry2-e4ddc670.js';
+import './_has-f6f8e89d.js';
 import './utils/UNSAFE_interpolations/boxalignment.js';
-import './keys-380e1b44.js';
+import './keys-7b74e23f.js';
 import './utils/UNSAFE_interpolations/flexbox.js';
 import './utils/UNSAFE_interpolations/flexitem.js';
 import './UNSAFE_Icon.js';
@@ -32,7 +32,7 @@ import 'preact/compat';
 import './hooks/UNSAFE_useTheme.js';
 
 const messageCloseButtonStyles = {
-  banner: "_jh8fqs",
+  banner: "_scg0sn",
   inline: undefined
 };
 /**
@@ -170,8 +170,8 @@ function formatTimestamp(isoTime) {
 
 const messageDetailStyles = {
   // TODO: Reevaluate once the TEXT component is available (JET-46891)
-  base: "_3e1wpo",
-  banner: "_qb4dc",
+  base: "_q3mn7b",
+  banner: "_hgf940",
   inline: undefined
 };
 /**
@@ -216,10 +216,10 @@ function MessageDetail({
   }));
 }
 
-const messageStartIconStyles = "_1pke7";
+const messageStartIconStyles = "trbkn6";
 const severityIconStyles = {
-  banner: "_giqa7d",
-  inline: "rlgai0"
+  banner: "_hrzg0a",
+  inline: "_cuet0h"
 };
 const severityIcons = {
   confirmation: SvgIcoSuccessS,
@@ -258,9 +258,9 @@ function MessageStartIcon({
 
 const messageSummaryStyles = {
   // TODO: Reevaluate once the TEXT component is available (JET-46891)
-  base: "xzntl3",
-  banner: "_rslxrn",
-  inline: "aba7ha"
+  base: "_i84r8",
+  banner: "_h19u3h",
+  inline: "_odwhf"
 };
 /**
  * Summary Component for rendering the summary text of the Message
@@ -280,7 +280,7 @@ function MessageSummary({
 }
 
 const messageTimestampStyles = {
-  banner: "ivqx9l",
+  banner: "_nyz9j",
   inline: undefined
 };
 /**
@@ -433,11 +433,11 @@ function isSeverityIconNeeded(severity) {
 
 
 const messageStyles = {
-  base: "_11eq7",
-  section: "ooq1fv",
-  header: "_j7beug",
+  base: "_elsfr9",
+  section: "_m7frfh",
+  header: "ptx61a",
   // TODO: Replace with Flex and View components to handle padding and flex
-  content: "_re9q1"
+  content: "yk93za"
 };
 /**
  * A component that styles the header for the message component