@oracle/oraclejet-preact 14.0.5 → 14.0.7

package/amd/{List-f2a1fc9f.js.map → List-26b59d92.js.map}

@@ -1 +1 @@
-{"version":3,"file":"List-f2a1fc9f.js","sources":["../../src/PRIVATE_List/ListRoles.ts","../../src/PRIVATE_List/ListItem.tsx","../../src/PRIVATE_List/SkeletonContainer.tsx","../../src/PRIVATE_List/List.tsx"],"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 */\n\nimport { Roles } from '../UNSAFE_ListView';\n\n/**\n * List Roles need to be kept in matching sets, this module encapsulates the sets\n *\n * @param ariaRole\n * @returns matching, valid set of roles\n */\n\nconst getListViewRoles = (ariaRole: Roles) => {\n  switch (ariaRole) {\n    case 'listbox':\n      return { list: 'listbox', item: 'presentation', cell: 'option' };\n    case 'treegrid':\n      return { list: 'treegrid', item: 'row', cell: 'gridcell' };\n    default:\n      return { list: 'grid', item: 'row', cell: 'gridcell' };\n  }\n};\n\nexport { getListViewRoles };\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 { useRef, useMemo } from 'preact/hooks';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { TabbableModeContext } from '../hooks/UNSAFE_useTabbableMode';\nimport { SelectionMode, CurrentItemVariant } from '../UNSAFE_Collection';\nimport { FocusTrap } from '../UNSAFE_FocusTrap';\nimport { useId } from '../hooks/UNSAFE_useId';\nimport { Roles } from '../UNSAFE_ListView';\nimport { getListViewRoles } from './ListRoles';\n\n// default style class for items in ListView\nexport const ITEM_STYLE_CLASS = 'oj-listview-item';\nexport const ITEM_SELECTOR = '.' + ITEM_STYLE_CLASS;\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 100%',\n    backgroundRepeat: 'no-repeat',\n    borderTop: '1px solid transparent'\n  }}`,\n  gridlines: cssProps`${{\n    backgroundSize: '100% 1px'\n  }}`,\n  gridlineTop: cssProps`${{\n    backgroundImage: `linear-gradient(var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color),var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color)),\n      linear-gradient(var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color),var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color))`,\n    backgroundPosition: '0 100%, 0 -1px',\n    backgroundSize: '100% 1px, 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  suggestionEnd: cssProps`${{\n    backgroundSize: '100% 1px'\n  }}`,\n  highlight: cssProps`${{\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover);'\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\nconst cellStyles = {\n  base: cssProps`${{\n    flexGrow: '1'\n  }}`,\n  checkboxContainer: cssProps`${{\n    display: 'flex'\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  isFocused: boolean;\n  isFocusRingVisible: boolean;\n  isGridlineVisible: boolean;\n  isSelected: boolean;\n  isTopGridlineVisible?: boolean;\n  isTabbable?: boolean;\n  role: Roles;\n  selectionMode: SelectionMode;\n  suggestion?: 'end' | true;\n  currentItemVariant?: CurrentItemVariant;\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  isFocused,\n  isFocusRingVisible,\n  isGridlineVisible,\n  isSelected,\n  isTopGridlineVisible = false,\n  isTabbable = false,\n  role,\n  selectionMode,\n  suggestion,\n  currentItemVariant\n}: Props<K>) {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const roles = useMemo(() => getListViewRoles(role), [role]);\n\n  // some roles come with related aria attributes which need to be set\n  const cellRoleAttributes =\n    roles.cell === 'option'\n      ? {\n          role: roles.cell,\n          'aria-posinset': itemIndex + 1,\n          'aria-setsize': -1\n        }\n      : {\n          role: roles.cell\n        };\n\n  // don't bubble Arrow Up and Down events to parent when in isTabbable mode\n  // this bubbling causes the outer CollectionFocus ring to change index while in the isTabbable mode.\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (isTabbable && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {\n      event.stopPropagation();\n    }\n  };\n\n  const classes = classNames([\n    styles.base,\n    ITEM_STYLE_CLASS,\n    isFocused && isFocusRingVisible && styles.focused,\n    isGridlineVisible && styles.gridlines,\n    isTopGridlineVisible && styles.gridlineTop,\n    isSelectable(selectionMode, isSelected) && !isSelected && styles.selectable,\n    isSelected && styles.selected,\n    isSelected && selectionMode === 'single' && styles.selectedSingle,\n    suggestion === 'end' &&\n      !isGridlineVisible &&\n      !(isSelected && selectionMode === 'single') &&\n      styles.suggestionEnd,\n    currentItemVariant === 'highlight' && isFocused && !isSelected && styles.highlight\n  ]);\n\n  const cellClasses = classNames([\n    cellStyles.base,\n    selectionMode === 'multiple' && cellStyles.checkboxContainer\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      aria-rowindex={itemIndex + 1}\n      data-oj-key={itemKey}\n      class={classes}\n      ref={rootRef}\n      role={roles.item}\n      {...(suggestion && { 'data-oj-suggestion': true })}\n      {...(typeof itemKey === 'number' && { 'data-oj-key-type': 'number' })}>\n      <div\n        id={useId()}\n        class={cellClasses}\n        aria-posinset={itemIndex + 1}\n        aria-setsize={-1}\n        onKeyDown={handleKeyDown}\n        aria-colindex={1}\n        aria-selected={selectionMode !== 'none' ? isSelected : undefined}\n        {...cellRoleAttributes}>\n        <TabbableModeContext.Provider value={{ isTabbable }}>\n          <FocusTrap isDisabled={!isTabbable} restoreFocusRef={false}>\n            {children}\n          </FocusTrap>\n        </TabbableModeContext.Provider>\n      </div>\n    </div>\n  );\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 * @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 = 1 }: 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 { 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 { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { containsKey, Keys, isKeyDefined } from '../utils/UNSAFE_keys';\nimport { DataState, ItemContext, Metadata, Range, SelectionDetail } from '../UNSAFE_Collection';\nimport { LoadMoreCollection } from '../UNSAFE_LoadMoreCollection/LoadMoreCollection';\nimport { VirtualizedCollection, PLACEHOLDER_STYLE_CLASS } from '../PRIVATE_VirtualizedCollection';\nimport { ViewportConfig } from '../hooks/UNSAFE_useViewportIntersect';\nimport { ListViewItem, ITEM_SELECTOR } from './ListItem';\nimport { SelectionRangeDetail, useSelection } from '../hooks/PRIVATE_useSelection';\nimport { useCurrentKey } from '../hooks/PRIVATE_useCurrentKey';\nimport { useCollectionFocusRing } from '../hooks/PRIVATE_useCollectionFocusRing';\nimport { useTabbableModeSet } from '../hooks/PRIVATE_useTabbableModeSet';\nimport { useItemAction } from '../hooks/PRIVATE_useItemAction';\nimport { SkeletonContainer } from './SkeletonContainer';\nimport { Skeleton } from '../UNSAFE_Skeleton';\nimport { Flex } from '../UNSAFE_Flex';\nimport {\n  getFirstVisibleKey,\n  getPrevNextKey,\n  findElementByKey,\n  keyExtractor\n} from '../utils/PRIVATE_collectionUtils';\nimport { Selector } from '../UNSAFE_Selector';\nimport { Props } from '../UNSAFE_ListView';\nimport { getListViewRoles } from './ListRoles';\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: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-1x)',\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\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 List<K extends string | number, D>({\n  accessibleSummary,\n  allowTabbableMode = true,\n  children,\n  currentKey,\n  data,\n  gridlines,\n  loadingIndicator = defaultLoadingIndicator,\n  onCurrentKeyChange,\n  onLoadRange,\n  onSelectionChange,\n  onItemAction,\n  rangeExtractor,\n  role = 'grid',\n  selectedKeys = emptyKeys as Keys<K>,\n  selectionMode = 'none',\n  viewportConfig,\n  currentItemVariant = 'none',\n  isVirtualized = true\n}: Props<K, D>) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRoles = useMemo(() => getListViewRoles(role), [role]);\n\n  // tracking the anchor key which is used for shift+click selection\n  const anchorKey = useRef<K | undefined>();\n\n  // tracking pending selection/current key that is not in current data\n  const pendingSelection = useRef<{ detail: SelectionRangeDetail<K>; range: Range }>();\n  const pendingCurrentKey = useRef<K>();\n\n  // tracking sparkle height\n  const [sparkleHeight, setSparkleHeight] = useState<number>(0);\n\n  const showGridline = (index: number) => {\n    // show bottom gridlines for each item, and for the last item if specified\n    return (\n      gridlines?.item === 'visible' &&\n      (index + 1 !== data?.totalSize || gridlines?.bottom === 'visible')\n    );\n  };\n\n  const showGridlineTop = () => {\n    // show the top gridline for the first item\n    return gridlines?.item === 'visible' && gridlines?.top === 'visible';\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    (element) => keyExtractor(element, ITEM_SELECTOR),\n    getPrevNextKey(rootRef.current, currentKey, true, ITEM_SELECTOR),\n    getPrevNextKey(rootRef.current, currentKey, false, ITEM_SELECTOR),\n    currentKey,\n    onCurrentKeyChange\n  );\n\n  const listViewContains = (elem: Element | null) => {\n    return !!rootRef.current?.contains(elem);\n  };\n\n  const [showFocusRing, focusRingProps] = useCollectionFocusRing(listViewContains, [\n    'ArrowUp',\n    'ArrowDown'\n  ]);\n\n  let pendingFocusRingChange = false;\n  const [isCurrentTabbableKey, tabbableModeProps] = useTabbableModeSet(\n    listViewContains,\n    (element) => keyExtractor(element, ITEM_SELECTOR) as K,\n    currentKey,\n    // handle clean-up on disabling of the mode\n    (target: EventTarget | null, isKeyboardEvent) => {\n      if (target === null || listViewContains(target as Element)) {\n        // delay focus reset for keyboard disable so focus is reset to ListView after the FocusTrap blur lifecycle completes.\n        // pointer initiated changes will fire the onBlur organically and delaying the focus, just generates an unwanted second blur\n        if (isKeyboardEvent) {\n          // do not show a focus ring during this timeOut\n          pendingFocusRingChange = true;\n          setTimeout(() => {\n            rootRef.current?.focus();\n          }, 0);\n        } else {\n          rootRef.current?.focus();\n        }\n      }\n    },\n    // set currentKey when mode is enabled\n    (key: K) => {\n      onCurrentKeyChange && onCurrentKeyChange({ value: key });\n    }\n  );\n\n  useEffect(() => {\n    if (currentKey != null && rootRef.current) {\n      const elem = findElementByKey(rootRef.current, currentKey, ITEM_SELECTOR);\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=${listRoles.cell}]`);\n        // update aria-activedescendant for screenreader\n        if (cell) {\n          rootRef.current.setAttribute('aria-activedescendant', cell.id);\n        }\n      }\n    }\n    // listen to data because the current item would re-render when the virtualizer\n    // is fetching data or updating the data, i.e. the id of current item would be updated,\n    // so the currentKey itself couldn't guarantee the root has latest aria-activedescendant\n  }, [currentKey, data, listRoles.cell, viewportConfig]);\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.values()).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) }, target: null });\n        } else {\n          pendingSelection.current = {\n            detail: detail,\n            range: { offset: data.offset, count: data.data.length }\n          };\n          onLoadRange(value);\n        }\n      }\n    },\n    [data, onSelectionChange, onLoadRange]\n  );\n\n  const handleInitialFocus = useCallback(() => {\n    if (\n      rootRef.current &&\n      onCurrentKeyChange &&\n      (!allowTabbableMode || isCurrentTabbableKey(undefined))\n    ) {\n      const firstKey =\n        pendingCurrentKey.current || (getFirstVisibleKey(rootRef.current, ITEM_SELECTOR) as K);\n      if (isKeyDefined(firstKey)) {\n        onCurrentKeyChange({ value: firstKey });\n      }\n    }\n  }, [allowTabbableMode, onCurrentKeyChange, isCurrentTabbableKey]);\n\n  /**\n   * Used by allowTabbableMode = false, to prevent focus from getting onto checkboxes on click\n   * @param event\n   */\n  const handleSelectorFocusCapture = useCallback(\n    (event: FocusEvent) => {\n      const key = keyExtractor(event.target as HTMLElement, ITEM_SELECTOR);\n      if (key && (event.relatedTarget as HTMLElement)?.getAttribute('type') === 'checkbox') {\n        rootRef.current?.focus();\n        if (onCurrentKeyChange && key) {\n          onCurrentKeyChange({ value: key as K });\n        }\n      }\n    },\n    [onCurrentKeyChange]\n  );\n\n  const handleFocus = useCallback(\n    (event: FocusEvent) => {\n      !isKeyDefined(currentKey) && onCurrentKeyChange && handleInitialFocus();\n      !allowTabbableMode && handleSelectorFocusCapture(event);\n    },\n    [\n      allowTabbableMode,\n      currentKey,\n      handleInitialFocus,\n      handleSelectorFocusCapture,\n      onCurrentKeyChange\n    ]\n  );\n\n  const { selectionProps } = useSelection(\n    (element: HTMLElement) => {\n      if (element === rootRef.current) {\n        return currentKey === undefined ? null : currentKey;\n      }\n      return keyExtractor(element, ITEM_SELECTOR) 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, ITEM_SELECTOR),\n    (key: K) => {\n      if (rootRef.current) {\n        const elem = findElementByKey(rootRef.current, key, ITEM_SELECTOR);\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 !== undefined && onSelectionChange) {\n    const keys = handleSelectionRange(pendingSelection.current.detail, data);\n    if (Array.isArray(keys)) {\n      onSelectionChange({ value: { all: false, keys: new Set(keys) }, target: null });\n    }\n    const range = pendingSelection.current\n      ? pendingSelection.current.range\n      : { offset: data.offset, count: data.data.length };\n    data = adjustDataState(data, range);\n    pendingSelection.current = undefined;\n    onLoadRange(range);\n  }\n\n  const suggestions = useMemo(() => findSuggestions(data), [data]);\n\n  // TODO: check suggestions before Sparkle would cause a scrolling issue\n  const sparkleIndicator = <Sparkle sparkleHeight={sparkleHeight}></Sparkle>;\n\n  const itemActionProps = useItemAction(currentKey, data, onItemAction, ITEM_SELECTOR);\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 || 0;\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  // returns an ListItemContext based on ItemContext (added metadata and selector)\n  const getItemContext = useCallback(\n    (context: ItemContext<{ data: D; metadata: Metadata<K> }>) => {\n      const selectorRenderer =\n        selectionMode === 'multiple'\n          ? () => (\n              <Selector\n                onChange={handleSelectionChange}\n                rowKey={context.data.metadata.key}\n                selectedKeys={selectedKeys}></Selector>\n            )\n          : undefined;\n\n      return {\n        index: context.index,\n        data: context.data.data,\n        metadata: context.data.metadata,\n        selector: selectorRenderer\n      };\n    },\n    [selectionMode, selectedKeys, handleSelectionChange]\n  );\n\n  const childrenComponent = (context: ItemContext<{ data: D; metadata: Metadata<K> }>) => {\n    const listItemContext = getItemContext(context);\n    const suggestion = suggestions?.get(listItemContext.metadata.key);\n    const isTabbable = allowTabbableMode && isCurrentTabbableKey(listItemContext.metadata.key);\n    const isFocused = currentKey === listItemContext.metadata.key && !isTabbable;\n    const isSelected = containsKey(selectedKeys, listItemContext.metadata.key);\n    return (\n      <ListViewItem\n        key={listItemContext.metadata.key}\n        isFocused={isFocused}\n        isFocusRingVisible={showFocusRing && !pendingFocusRingChange}\n        isGridlineVisible={showGridline(listItemContext.index)}\n        isSelected={isSelected}\n        isTabbable={allowTabbableMode && isCurrentTabbableKey(listItemContext.metadata.key)}\n        itemIndex={listItemContext.index}\n        itemKey={listItemContext.metadata.key}\n        role={role}\n        selectionMode={selectionMode}\n        currentItemVariant={currentItemVariant}\n        {...(suggestion && { suggestion })}\n        {...(listItemContext.index === 0 && { isTopGridlineVisible: showGridlineTop() })}>\n        {children(listItemContext)}\n      </ListViewItem>\n    );\n  };\n\n  viewportConfig = getViewportConfig(rootRef, viewportConfig);\n  const collectionComponent = isVirtualized ? (\n    <VirtualizedCollection\n      data={data}\n      itemSelector={ITEM_SELECTOR}\n      loadMoreIndicator={defaultLoadMoreIndicator}\n      onLoadRange={onLoadRange}\n      rangeExtractor={rangeExtractor}\n      suggestions={sparkleIndicator}\n      viewportConfig={viewportConfig}>\n      {childrenComponent}\n    </VirtualizedCollection>\n  ) : (\n    <LoadMoreCollection\n      data={data}\n      loadMoreIndicator={defaultLoadMoreIndicator}\n      onLoadRange={onLoadRange}\n      suggestions={sparkleIndicator}\n      viewportConfig={viewportConfig}>\n      {childrenComponent}\n    </LoadMoreCollection>\n  );\n\n  /**\n   * Need to track pointer down element to set currentItem when initial focus happens\n   */\n  const handlePointerDown = useCallback((event: PointerEvent) => {\n    const key = keyExtractor(event.target as HTMLElement, ITEM_SELECTOR);\n    if (isKeyDefined(key)) pendingCurrentKey.current = key as K;\n  }, []);\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(\n        allowTabbableMode ? tabbableModeProps : {},\n        currentKeyProps,\n        focusRingProps,\n        selectionProps,\n        itemActionProps,\n        { onFocus: handleFocus, onPointerDown: handlePointerDown }\n      )}\n      role={role}\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 ? loadingIndicator : collectionComponent}\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 * 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\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 so we can find all the keys, maxIndex should not be -1\n    return { offset: 0, count: dataState.totalSize };\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\nconst defaultLoadingIndicator = (\n  <SkeletonContainer minimumCount={25}>\n    {() => {\n      return (\n        <Flex height=\"12x\" align=\"center\">\n          <Skeleton height=\"4x\" />\n        </Flex>\n      );\n    }}\n  </SkeletonContainer>\n);\n\nconst defaultLoadMoreIndicator = (\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/**\n * Adjust the DataState as needed if it contains more than needed for the specified range\n */\nconst adjustDataState = <K, D>(dataState: DataState<K, D>, range: Range | null) => {\n  if (range) {\n    // prevent range offset from being larger than the data state\n    const safeRangeOffset = Math.min(range.offset, dataState.offset + dataState.totalSize);\n    const diff = safeRangeOffset - dataState.offset;\n    if (diff > 0) {\n      dataState = {\n        offset: safeRangeOffset,\n        data: dataState.data.slice(diff, diff + range.count),\n        totalSize: dataState.totalSize,\n        sizePrecision: dataState.sizePrecision\n      };\n    }\n  }\n  return dataState;\n};\n"],"names":["getListViewRoles","ariaRole","list","item","cell","ITEM_STYLE_CLASS","ITEM_SELECTOR","styles","cellStyles","ListViewItem","children","itemKey","itemIndex","isFocused","isFocusRingVisible","isGridlineVisible","isSelected","isTopGridlineVisible","isTabbable","role","selectionMode","suggestion","currentItemVariant","rootRef","useRef","roles","useMemo","cellRoleAttributes","event","key","isSelectable","isItemSelected","containerStyle","SkeletonContainer","minimumCount","sparkleStyles","findSuggestions","dataState","count","getSuggestionsCount","data","value","metadata","index","suggestions","set","Map","findIndex","scrollToVisible","elem","scroller","scrollerBounds","getBoundingClientRect","elemBounds","bottom","scrollTop","top","getViewportConfig","config","emptyKeys","all","keys","Set","handleSelectionRange","detail","startIndex","indexOf","start","endIndex","end","minIndex","Sparkle","sparkleHeight","height","defaultLoadingIndicator","_jsx","jsx","Object","assign","defaultLoadMoreIndicator","adjustDataState","range","safeRangeOffset","Math","min","offset","totalSize","diff","slice","accessibleSummary","allowTabbableMode","currentKey","gridlines","loadingIndicator","onCurrentKeyChange","onLoadRange","onSelectionChange","onItemAction","rangeExtractor","selectedKeys","viewportConfig","isVirtualized","listRoles","anchorKey","pendingSelection","pendingCurrentKey","ariaMultiSelectable","undefined","ariaRowCount","sizePrecision","listViewContains","_a","current","contains","target","isKeyboardEvent","focus","findElementByKey","querySelector","handleSelectionChange","useCallback","size","Array","from","values","pop","handleSelectionRangeChange","isArray","length","handleInitialFocus","firstKey","getFirstVisibleKey","isKeyDefined","handleSelectorFocusCapture","relatedTarget","getAttribute","_b","handleFocus","element","keyExtractor","isPrev","getPrevNextKey","itemActionProps","useItemAction","placeholder","PLACEHOLDER_STYLE_CLASS","offsetHeight","getItemContext","context","selectorRenderer","selector","childrenComponent","listItemContext","get","isCurrentTabbableKey","containsKey","collectionComponent","VirtualizedCollection","itemSelector","loadMoreIndicator","sparkleIndicator","LoadMoreCollection","handlePointerDown","mergeProps","tabbableModeProps","currentKeyProps","focusRingProps","selectionProps","onFocus","onPointerDown","ref","class","classes","tabIndex"],"mappings":"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"}
+{"version":3,"file":"List-26b59d92.js","sources":["../../src/PRIVATE_List/ListRoles.ts","../../src/PRIVATE_List/ListItem.tsx","../../src/PRIVATE_List/SkeletonContainer.tsx","../../src/PRIVATE_List/List.tsx"],"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 */\n\nimport { Roles } from '../UNSAFE_ListView';\n\n/**\n * List Roles need to be kept in matching sets, this module encapsulates the sets\n *\n * @param ariaRole\n * @returns matching, valid set of roles\n */\n\nconst getListViewRoles = (ariaRole: Roles) => {\n  switch (ariaRole) {\n    case 'listbox':\n      return { list: 'listbox', item: 'presentation', cell: 'option' };\n    case 'treegrid':\n      return { list: 'treegrid', item: 'row', cell: 'gridcell' };\n    default:\n      return { list: 'grid', item: 'row', cell: 'gridcell' };\n  }\n};\n\nexport { getListViewRoles };\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 { useRef, useMemo } from 'preact/hooks';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { TabbableModeContext } from '../hooks/UNSAFE_useTabbableMode';\nimport { SelectionMode, CurrentItemVariant } from '../UNSAFE_Collection';\nimport { FocusTrap } from '../UNSAFE_FocusTrap';\nimport { useId } from '../hooks/UNSAFE_useId';\nimport { Roles } from '../UNSAFE_ListView';\nimport { getListViewRoles } from './ListRoles';\n\n// default style class for items in ListView\nexport const ITEM_STYLE_CLASS = 'oj-listview-item';\nexport const ITEM_SELECTOR = '.' + ITEM_STYLE_CLASS;\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 100%',\n    backgroundRepeat: 'no-repeat',\n    borderTop: '1px solid transparent'\n  }}`,\n  gridlines: cssProps`${{\n    backgroundSize: '100% 1px'\n  }}`,\n  gridlineTop: cssProps`${{\n    backgroundImage: `linear-gradient(var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color),var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color)),\n      linear-gradient(var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color),var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color))`,\n    backgroundPosition: '0 100%, 0 -1px',\n    backgroundSize: '100% 1px, 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  suggestionEnd: cssProps`${{\n    backgroundSize: '100% 1px'\n  }}`,\n  highlight: cssProps`${{\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover);'\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\nconst cellStyles = {\n  base: cssProps`${{\n    flexGrow: '1'\n  }}`,\n  checkboxContainer: cssProps`${{\n    display: 'flex'\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  isFocused: boolean;\n  isFocusRingVisible: boolean;\n  isGridlineVisible: boolean;\n  isSelected: boolean;\n  isTopGridlineVisible?: boolean;\n  isTabbable?: boolean;\n  role: Roles;\n  selectionMode: SelectionMode;\n  suggestion?: 'end' | true;\n  currentItemVariant?: CurrentItemVariant;\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  isFocused,\n  isFocusRingVisible,\n  isGridlineVisible,\n  isSelected,\n  isTopGridlineVisible = false,\n  isTabbable = false,\n  role,\n  selectionMode,\n  suggestion,\n  currentItemVariant\n}: Props<K>) {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const roles = useMemo(() => getListViewRoles(role), [role]);\n\n  // some roles come with related aria attributes which need to be set\n  const cellRoleAttributes =\n    roles.cell === 'option'\n      ? {\n          role: roles.cell,\n          'aria-posinset': itemIndex + 1,\n          'aria-setsize': -1\n        }\n      : {\n          role: roles.cell\n        };\n\n  // don't bubble Arrow Up and Down events to parent when in isTabbable mode\n  // this bubbling causes the outer CollectionFocus ring to change index while in the isTabbable mode.\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (isTabbable && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {\n      event.stopPropagation();\n    }\n  };\n\n  const classes = classNames([\n    styles.base,\n    ITEM_STYLE_CLASS,\n    isFocused && isFocusRingVisible && styles.focused,\n    isGridlineVisible && styles.gridlines,\n    isTopGridlineVisible && styles.gridlineTop,\n    isSelectable(selectionMode, isSelected) && !isSelected && styles.selectable,\n    isSelected && styles.selected,\n    isSelected && selectionMode === 'single' && styles.selectedSingle,\n    suggestion === 'end' &&\n      !isGridlineVisible &&\n      !(isSelected && selectionMode === 'single') &&\n      styles.suggestionEnd,\n    currentItemVariant === 'highlight' && isFocused && !isSelected && styles.highlight\n  ]);\n\n  const cellClasses = classNames([\n    cellStyles.base,\n    selectionMode === 'multiple' && cellStyles.checkboxContainer\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      aria-rowindex={itemIndex + 1}\n      data-oj-key={itemKey}\n      class={classes}\n      ref={rootRef}\n      role={roles.item}\n      {...(suggestion && { 'data-oj-suggestion': true })}\n      {...(typeof itemKey === 'number' && { 'data-oj-key-type': 'number' })}>\n      <div\n        id={useId()}\n        class={cellClasses}\n        aria-posinset={itemIndex + 1}\n        aria-setsize={-1}\n        onKeyDown={handleKeyDown}\n        aria-colindex={1}\n        aria-selected={selectionMode !== 'none' ? isSelected : undefined}\n        {...cellRoleAttributes}>\n        <TabbableModeContext.Provider value={{ isTabbable }}>\n          <FocusTrap isDisabled={!isTabbable} restoreFocusRef={false}>\n            {children}\n          </FocusTrap>\n        </TabbableModeContext.Provider>\n      </div>\n    </div>\n  );\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 * @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 = 1 }: 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 { 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 { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { containsKey, Keys, isKeyDefined } from '../utils/UNSAFE_keys';\nimport { DataState, ItemContext, Metadata, Range, SelectionDetail } from '../UNSAFE_Collection';\nimport { LoadMoreCollection } from '../UNSAFE_LoadMoreCollection/LoadMoreCollection';\nimport { VirtualizedCollection, PLACEHOLDER_STYLE_CLASS } from '../PRIVATE_VirtualizedCollection';\nimport { ViewportConfig } from '../hooks/UNSAFE_useViewportIntersect';\nimport { ListViewItem, ITEM_SELECTOR } from './ListItem';\nimport { SelectionRangeDetail, useSelection } from '../hooks/PRIVATE_useSelection';\nimport { useCurrentKey } from '../hooks/PRIVATE_useCurrentKey';\nimport { useCollectionFocusRing } from '../hooks/PRIVATE_useCollectionFocusRing';\nimport { useTabbableModeSet } from '../hooks/PRIVATE_useTabbableModeSet';\nimport { useItemAction } from '../hooks/PRIVATE_useItemAction';\nimport { SkeletonContainer } from './SkeletonContainer';\nimport { Skeleton } from '../UNSAFE_Skeleton';\nimport { Flex } from '../UNSAFE_Flex';\nimport {\n  getFirstVisibleKey,\n  getPrevNextKey,\n  findElementByKey,\n  keyExtractor\n} from '../utils/PRIVATE_collectionUtils';\nimport { Selector } from '../UNSAFE_Selector';\nimport { Props } from '../UNSAFE_ListView';\nimport { getListViewRoles } from './ListRoles';\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: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-1x)',\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\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 List<K extends string | number, D>({\n  accessibleSummary,\n  allowTabbableMode = true,\n  children,\n  currentKey,\n  data,\n  gridlines,\n  loadingIndicator = defaultLoadingIndicator,\n  onCurrentKeyChange,\n  onLoadRange,\n  onSelectionChange,\n  onItemAction,\n  rangeExtractor,\n  role = 'grid',\n  selectedKeys = emptyKeys as Keys<K>,\n  selectionMode = 'none',\n  viewportConfig,\n  currentItemVariant = 'none',\n  isVirtualized = true\n}: Props<K, D>) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRoles = useMemo(() => getListViewRoles(role), [role]);\n\n  // tracking the anchor key which is used for shift+click selection\n  const anchorKey = useRef<K | undefined>();\n\n  // tracking pending selection/current key that is not in current data\n  const pendingSelection = useRef<{ detail: SelectionRangeDetail<K>; range: Range }>();\n  const pendingCurrentKey = useRef<K>();\n\n  // tracking sparkle height\n  const [sparkleHeight, setSparkleHeight] = useState<number>(0);\n\n  const showGridline = (index: number) => {\n    // show bottom gridlines for each item, and for the last item if specified\n    return (\n      gridlines?.item === 'visible' &&\n      (index + 1 !== data?.totalSize || gridlines?.bottom === 'visible')\n    );\n  };\n\n  const showGridlineTop = () => {\n    // show the top gridline for the first item\n    return gridlines?.item === 'visible' && gridlines?.top === 'visible';\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    (element) => keyExtractor(element, ITEM_SELECTOR),\n    getPrevNextKey(rootRef.current, currentKey, true, ITEM_SELECTOR),\n    getPrevNextKey(rootRef.current, currentKey, false, ITEM_SELECTOR),\n    currentKey,\n    onCurrentKeyChange\n  );\n\n  const listViewContains = (elem: Element | null) => {\n    return !!rootRef.current?.contains(elem);\n  };\n\n  const [showFocusRing, focusRingProps] = useCollectionFocusRing(listViewContains, [\n    'ArrowUp',\n    'ArrowDown'\n  ]);\n\n  let pendingFocusRingChange = false;\n  const [isCurrentTabbableKey, tabbableModeProps] = useTabbableModeSet(\n    listViewContains,\n    (element) => keyExtractor(element, ITEM_SELECTOR) as K,\n    currentKey,\n    // handle clean-up on disabling of the mode\n    (target: EventTarget | null, isKeyboardEvent) => {\n      if (target === null || listViewContains(target as Element)) {\n        // delay focus reset for keyboard disable so focus is reset to ListView after the FocusTrap blur lifecycle completes.\n        // pointer initiated changes will fire the onBlur organically and delaying the focus, just generates an unwanted second blur\n        if (isKeyboardEvent) {\n          // do not show a focus ring during this timeOut\n          pendingFocusRingChange = true;\n          setTimeout(() => {\n            rootRef.current?.focus();\n          }, 0);\n        } else {\n          rootRef.current?.focus();\n        }\n      }\n    },\n    // set currentKey when mode is enabled\n    (key: K) => {\n      onCurrentKeyChange && onCurrentKeyChange({ value: key });\n    }\n  );\n\n  useEffect(() => {\n    if (currentKey != null && rootRef.current) {\n      const elem = findElementByKey(rootRef.current, currentKey, ITEM_SELECTOR);\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=${listRoles.cell}]`);\n        // update aria-activedescendant for screenreader\n        if (cell) {\n          rootRef.current.setAttribute('aria-activedescendant', cell.id);\n        }\n      }\n    }\n    // listen to data because the current item would re-render when the virtualizer\n    // is fetching data or updating the data, i.e. the id of current item would be updated,\n    // so the currentKey itself couldn't guarantee the root has latest aria-activedescendant\n  }, [currentKey, data, listRoles.cell, viewportConfig]);\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.values()).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) }, target: null });\n        } else {\n          pendingSelection.current = {\n            detail: detail,\n            range: { offset: data.offset, count: data.data.length }\n          };\n          onLoadRange(value);\n        }\n      }\n    },\n    [data, onSelectionChange, onLoadRange]\n  );\n\n  const handleInitialFocus = useCallback(() => {\n    if (\n      rootRef.current &&\n      onCurrentKeyChange &&\n      (!allowTabbableMode || isCurrentTabbableKey(undefined))\n    ) {\n      const firstKey =\n        pendingCurrentKey.current || (getFirstVisibleKey(rootRef.current, ITEM_SELECTOR) as K);\n      if (isKeyDefined(firstKey)) {\n        onCurrentKeyChange({ value: firstKey });\n      }\n    }\n  }, [allowTabbableMode, onCurrentKeyChange, isCurrentTabbableKey]);\n\n  /**\n   * Used by allowTabbableMode = false, to prevent focus from getting onto checkboxes on click\n   * @param event\n   */\n  const handleSelectorFocusCapture = useCallback(\n    (event: FocusEvent) => {\n      const key = keyExtractor(event.target as HTMLElement, ITEM_SELECTOR);\n      if (key && (event.relatedTarget as HTMLElement)?.getAttribute('type') === 'checkbox') {\n        rootRef.current?.focus();\n        if (onCurrentKeyChange && key) {\n          onCurrentKeyChange({ value: key as K });\n        }\n      }\n    },\n    [onCurrentKeyChange]\n  );\n\n  const handleFocus = useCallback(\n    (event: FocusEvent) => {\n      !isKeyDefined(currentKey) && onCurrentKeyChange && handleInitialFocus();\n      !allowTabbableMode && handleSelectorFocusCapture(event);\n    },\n    [\n      allowTabbableMode,\n      currentKey,\n      handleInitialFocus,\n      handleSelectorFocusCapture,\n      onCurrentKeyChange\n    ]\n  );\n\n  const { selectionProps } = useSelection(\n    (element: HTMLElement) => {\n      if (element === rootRef.current) {\n        return currentKey === undefined ? null : currentKey;\n      }\n      return keyExtractor(element, ITEM_SELECTOR) 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, ITEM_SELECTOR),\n    (key: K) => {\n      if (rootRef.current) {\n        const elem = findElementByKey(rootRef.current, key, ITEM_SELECTOR);\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 !== undefined && onSelectionChange) {\n    const keys = handleSelectionRange(pendingSelection.current.detail, data);\n    if (Array.isArray(keys)) {\n      onSelectionChange({ value: { all: false, keys: new Set(keys) }, target: null });\n    }\n    const range = pendingSelection.current\n      ? pendingSelection.current.range\n      : { offset: data.offset, count: data.data.length };\n    data = adjustDataState(data, range);\n    pendingSelection.current = undefined;\n    onLoadRange(range);\n  }\n\n  const suggestions = useMemo(() => findSuggestions(data), [data]);\n\n  // TODO: check suggestions before Sparkle would cause a scrolling issue\n  const sparkleIndicator = <Sparkle sparkleHeight={sparkleHeight}></Sparkle>;\n\n  const itemActionProps = useItemAction(currentKey, data, onItemAction, ITEM_SELECTOR);\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 || 0;\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  // returns an ListItemContext based on ItemContext (added metadata and selector)\n  const getItemContext = useCallback(\n    (context: ItemContext<{ data: D; metadata: Metadata<K> }>) => {\n      const selectorRenderer =\n        selectionMode === 'multiple'\n          ? () => (\n              <Selector\n                onChange={handleSelectionChange}\n                rowKey={context.data.metadata.key}\n                selectedKeys={selectedKeys}></Selector>\n            )\n          : undefined;\n\n      return {\n        index: context.index,\n        data: context.data.data,\n        metadata: context.data.metadata,\n        selector: selectorRenderer\n      };\n    },\n    [selectionMode, selectedKeys, handleSelectionChange]\n  );\n\n  const childrenComponent = (context: ItemContext<{ data: D; metadata: Metadata<K> }>) => {\n    const listItemContext = getItemContext(context);\n    const suggestion = suggestions?.get(listItemContext.metadata.key);\n    const isTabbable = allowTabbableMode && isCurrentTabbableKey(listItemContext.metadata.key);\n    const isFocused = currentKey === listItemContext.metadata.key && !isTabbable;\n    const isSelected = containsKey(selectedKeys, listItemContext.metadata.key);\n    return (\n      <ListViewItem\n        key={listItemContext.metadata.key}\n        isFocused={isFocused}\n        isFocusRingVisible={showFocusRing && !pendingFocusRingChange}\n        isGridlineVisible={showGridline(listItemContext.index)}\n        isSelected={isSelected}\n        isTabbable={allowTabbableMode && isCurrentTabbableKey(listItemContext.metadata.key)}\n        itemIndex={listItemContext.index}\n        itemKey={listItemContext.metadata.key}\n        role={role}\n        selectionMode={selectionMode}\n        currentItemVariant={currentItemVariant}\n        {...(suggestion && { suggestion })}\n        {...(listItemContext.index === 0 && { isTopGridlineVisible: showGridlineTop() })}>\n        {children(listItemContext)}\n      </ListViewItem>\n    );\n  };\n\n  viewportConfig = getViewportConfig(rootRef, viewportConfig);\n  const collectionComponent = isVirtualized ? (\n    <VirtualizedCollection\n      data={data}\n      itemSelector={ITEM_SELECTOR}\n      loadMoreIndicator={defaultLoadMoreIndicator}\n      onLoadRange={onLoadRange}\n      rangeExtractor={rangeExtractor}\n      suggestions={sparkleIndicator}\n      viewportConfig={viewportConfig}>\n      {childrenComponent}\n    </VirtualizedCollection>\n  ) : (\n    <LoadMoreCollection\n      data={data}\n      loadMoreIndicator={defaultLoadMoreIndicator}\n      onLoadRange={onLoadRange}\n      suggestions={sparkleIndicator}\n      viewportConfig={viewportConfig}>\n      {childrenComponent}\n    </LoadMoreCollection>\n  );\n\n  /**\n   * Need to track pointer down element to set currentItem when initial focus happens\n   */\n  const handlePointerDown = useCallback((event: PointerEvent) => {\n    const key = keyExtractor(event.target as HTMLElement, ITEM_SELECTOR);\n    if (isKeyDefined(key)) pendingCurrentKey.current = key as K;\n  }, []);\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(\n        allowTabbableMode ? tabbableModeProps : {},\n        currentKeyProps,\n        focusRingProps,\n        selectionProps,\n        itemActionProps,\n        { onFocus: handleFocus, onPointerDown: handlePointerDown }\n      )}\n      role={role}\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 ? loadingIndicator : collectionComponent}\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 * 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\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 so we can find all the keys, maxIndex should not be -1\n    return { offset: 0, count: dataState.totalSize };\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\nconst defaultLoadingIndicator = (\n  <SkeletonContainer minimumCount={25}>\n    {() => {\n      return (\n        <Flex height=\"12x\" align=\"center\">\n          <Skeleton height=\"4x\" />\n        </Flex>\n      );\n    }}\n  </SkeletonContainer>\n);\n\nconst defaultLoadMoreIndicator = (\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/**\n * Adjust the DataState as needed if it contains more than needed for the specified range\n */\nconst adjustDataState = <K, D>(dataState: DataState<K, D>, range: Range | null) => {\n  if (range) {\n    // prevent range offset from being larger than the data state\n    const safeRangeOffset = Math.min(range.offset, dataState.offset + dataState.totalSize);\n    const diff = safeRangeOffset - dataState.offset;\n    if (diff > 0) {\n      dataState = {\n        offset: safeRangeOffset,\n        data: dataState.data.slice(diff, diff + range.count),\n        totalSize: dataState.totalSize,\n        sizePrecision: dataState.sizePrecision\n      };\n    }\n  }\n  return dataState;\n};\n"],"names":["ITEM_STYLE_CLASS","ITEM_SELECTOR","styles","cellStyles","ListViewItem","children","itemKey","itemIndex","isFocused","isFocusRingVisible","isGridlineVisible","isSelected","isTopGridlineVisible","isTabbable","role","selectionMode","suggestion","currentItemVariant","rootRef","useRef","roles","useMemo","getListViewRoles","cellRoleAttributes","cell","handleKeyDown","event","key","base","focused","selectedSingle","suggestionEnd","checkboxContainer","isSelectable","isItemSelected","containerStyle","timerValue","SkeletonContainer","minimumCount","sparkleStyles","List","accessibleSummary","allowTabbableMode","currentKey","data","gridlines","loadingIndicator","defaultLoadingIndicator","onCurrentKeyChange","onLoadRange","onSelectionChange","onItemAction","rangeExtractor","selectedKeys","emptyKeys","viewportConfig","isVirtualized","listRoles","anchorKey","pendingSelection","pendingCurrentKey","showGridline","index","ariaMultiSelectable","undefined","ariaRowCount","sizePrecision","totalSize","listViewContains","elem","_a","current","contains","target","isKeyboardEvent","focus","findElementByKey","scrollToVisible","scroller","querySelector","handleSelectionChange","useCallback","detail","value","all","keys","size","Array","from","values","pop","handleSelectionRangeChange","isArray","range","offset","count","length","handleInitialFocus","firstKey","getFirstVisibleKey","isKeyDefined","handleSelectorFocusCapture","relatedTarget","getAttribute","_b","handleFocus","element","keyExtractor","isPrev","getPrevNextKey","handleSelectionRange","adjustDataState","suggestions","findSuggestions","itemActionProps","useItemAction","placeholder","PLACEHOLDER_STYLE_CLASS","height","offsetHeight","getItemContext","context","selectorRenderer","metadata","selector","childrenComponent","listItemContext","get","isCurrentTabbableKey","containsKey","getViewportConfig","collectionComponent","_jsx","VirtualizedCollection","Object","assign","itemSelector","loadMoreIndicator","defaultLoadMoreIndicator","sparkleIndicator","LoadMoreCollection","handlePointerDown","mergeProps","tabbableModeProps","currentKeyProps","focusRingProps","selectionProps","onFocus","onPointerDown","ref","class","classes","tabIndex","dataState","getSuggestionsCount","set","Map","findIndex","scrollerBounds","getBoundingClientRect","elemBounds","bottom","scrollTop","top","config","Set","startIndex","indexOf","start","endIndex","end","minIndex","Sparkle","sparkleHeight","safeRangeOffset","Math","min","diff","slice"],"mappings":";;;IAAA;;;;;;IAMG;IAIH;;;;;IAKG;IAEH,MAAM,gBAAgB,GAAG,CAAC,QAAe,KAAI;IAC3C,IAAA,QAAQ,QAAQ;IACd,QAAA,KAAK,SAAS;IACZ,YAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;IACnE,QAAA,KAAK,UAAU;IACb,YAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;IAC7D,QAAA;IACE,YAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;IAC1D,KAAA;IACH,CAAC;;ICPD,MAAAA,gBAAA,GAAA,kBAAA,CAAA;IACA,MAAAC,aAAA,GAAA,GAAA,GAAAD,gBAAA,CAAA;IAEA,MAAAE,QAAA,GAAA;YAAA,aAAA;iBAAA,kBAAA;mBAAA,oBAAA;kBAAA,mBAAA;gBAAA,iBAAA;sBAAA,uBAAA;qBAAA,uBAAA;iBAAA,mBAAA;;IAAA,CAAA,CAAA;IAgDA,MAAAC,UAAA,GAAA;YAAA,aAAA;;IAAA,CAAA,CAAA;IA4BA;;IAEG;;IACH,SAAAC,YAAA,CAAA;MAAAC,QAAA;MAAAC,OAAA;MAAAC,SAAA;MAAAC,SAAA;MAAAC,kBAAA;MAAAC,iBAAA;MAAAC,UAAA;IAAAC,EAAAA,oBAAA,GAAA,KAAA;IAAAC,EAAAA,UAAA,GAAA,KAAA;MAAAC,IAAA;MAAAC,aAAA;MAAAC,UAAA;IAAAC,EAAAA,kBAAAA;IAAA,CAAA,EAAA;IAeE,EAAA,MAAAC,OAAA,GAAAC,YAAA,CAAA,IAAA,CAAA,CAAA;IAEA,EAAA,MAAAC,KAAA,GAAAC,aAAA,CAAA,MAAAC,gBAAA,CAAAR,IAAA,CAAA,EAAA,CAAAA,IAAA,CAAA,CAAA,CAjBF;;IAoBE,EAAA,MAAAS,kBAAA,GAAAH,KAAA,CAAAI,IAAA,KAAA,QAAA,GAEI;wBAAA;sCAAA;;IAAA,GAFJ,GAOI;;IAAA,GAPJ,CApBF;;;MAiCE,MAAAC,aAAA,GAAAC,KAAA,IAAA;IACE,IAAA,IAAAb,UAAA,KAAAa,KAAA,CAAAC,GAAA,KAAA,WAAA,IAAAD,KAAA,CAAAC,GAAA,KAAA,SAAA,CAAA,EAAA;;IAEC,KAAA;OAHH,CAAA;;6CAOEzB,QAAA,CAAA0B,wBAEApB,SAAA,IAAAC,kBAAA,IAAAP,QAAA,CAAA2B,gNAKAlB,UAAA,IAAAI,aAAA,KAAA,QAAA,IAAAb,QAAA,CAAA4B,gBACAd,UAAA,KAAA,KAAA,IACE,CAAAN,iBADF,IAEE,EAAAC,UAAA,IAAAI,aAAA,KAAA,QAAA,CAFF,IAGEb,QAAA,CAAA6B;iDAKF5B,UAAA,CAAAyB,MACAb,aAAA,KAAA,UAAA,IAAAZ,UAAA,CAAA6B,oBAzDJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAyFA,CAAA;IAEA;;;IAGG;;IACH,MAAAC,YAAA,GAAA,CAAAlB,aAAA,EAAAmB,cAAA,KAAA;MACE,OAAAnB,aAAA,KAAA,MAAA,KAAAA,aAAA,KAAA,UAAA,IAAA,CAAAmB,cAAA,CAAA,CAAA;IACF,CAFA;;IC7KA,MAAAC,cAAA,GAAA;;IAAA,CAAA,CAAA;IAQA;;IAEI;;IACJ,MAAAC,UAAA,GAAA,EAAA,CAAA;IAEA;;;;IAII;;IACJ,SAAAC,iBAAA,CAAA;MAAAhC,QAAA;IAAAiC,EAAAA,YAAA,GAAA,CAAA;IAAA,CAAA,EAAA;;;;;;;;;;;;;;IAeA;;ICpBA,MAAApC,MAAA,GAAA;;IAAA,CAAA,CAAA;IAWA,MAAAqC,aAAA,GAAA;YAAA,aAAA;;IAAA,CAAA,CAAA;IAgBA;;;IAGG;;IACH,SAAAC,IAAA,CAAA;MAAAC,iBAAA;IAAAC,EAAAA,iBAAA,GAAA,IAAA;MAAArC,QAAA;MAAAsC,UAAA;MAAAC,IAAA;MAAAC,SAAA;IAAAC,EAAAA,gBAAA,GAAAC,uBAAA;MAAAC,kBAAA;MAAAC,WAAA;MAAAC,iBAAA;MAAAC,YAAA;MAAAC,cAAA;IAAAtC,EAAAA,IAAA,GAAA,MAAA;IAAAuC,EAAAA,YAAA,GAAAC,SAAA;IAAAvC,EAAAA,aAAA,GAAA,MAAA;MAAAwC,cAAA;IAAAtC,EAAAA,kBAAA,GAAA,MAAA;IAAAuC,EAAAA,aAAA,GAAA,IAAA;IAAA,CAAA,EAAA;IAoBE,EAAA,MAAAtC,OAAA,GAAAC,YAAA,CAAA,IAAA,CAAA,CAAA;IACA,EAAA,MAAAsC,SAAA,GAAApC,aAAA,CAAA,MAAAC,gBAAA,CAAAR,IAAA,CAAA,EAAA,CAAAA,IAAA,CAAA,CAAA,CArBF;;IAwBE,EAAA,MAAA4C,SAAA,GAAAvC,YAAA,EAAA,CAxBF;;MA2BE,MAAAwC,gBAAA,GAAAxC,YAAA,EAAA,CAAA;IACA,EAAA,MAAAyC,iBAAA,GAAAzC,YAAA,EAAA,CA5BF;;;;MAiCE,MAAA0C,YAAA,GAAAC,KAAA,IAAA;;;OAAA,CAAA;;;;;;;MAaA,MAAAC,mBAAA,GAAAhD,aAAA,KAAA,MAAA,GAAAiD,SAAA,GAAAjD,aAAA,KAAA,UAAA,CAAA;IACA,EAAA,MAAAkD,YAAA,GAAArB,IAAA,KAAA,IAAA,GAAAoB,SAAA,GAAApB,IAAA,CAAAsB,aAAA,KAAA,OAAA,GAAAtB,IAAA,CAAAuB,SAAA,GAAA,CAAA,CAAA,CAAA;;;;;;MAaA,MAAAC,gBAAA,GAAAC,IAAA,IAAA;;;QACE,OAAA,CAAA,EAAA,CAAAC,EAAA,GAAApD,OAAA,CAAAqD,OAAA,MAAA,IAAA,IAAAD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAE,QAAA,CAAAH,IAAA,CAAA,CAAA,CAAA;OADF,CAAA;;;;;MAeE,CAAAI,MAAA,EAAAC,eAAA,KAAA;;;;;;IAII,MAAA,IAAAA,eAAA,EAAA;;;;;;IAII,UAAA,CAAAJ,EAAA,GAAApD,OAAA,CAAAqD,OAAA,MAAA,IAAA,IAAAD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAK,KAAA,EAAA,CAAA;;IAEH,OAND,MAMO;IACL,QAAA,CAAAL,EAAA,GAAApD,OAAA,CAAAqD,OAAA,MAAA,IAAA,IAAAD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAK,KAAA,EAAA,CAAA;IACD,OAAA;IACF,KAAA;;;;;;IAKH;;IAIA,IAAA,IAAAhC,UAAA,IAAA,IAAA,IAAAzB,OAAA,CAAAqD,OAAA,EAAA;UACE,MAAAF,IAAA,GAAAO,8CAAA,CAAA1D,OAAA,CAAAqD,OAAA,EAAA5B,UAAA,EAAA1C,aAAA,CAAA,CAAA;;IACA,MAAA,IAAAoE,IAAA,EAAA;uHAAA;;IAGEQ,QAAAA,eAAA,CAAAR,IAAA,EAAAS,QAAA,IAAA,IAAA,GAAAA,QAAA,GAAA5D,OAAA,CAAAqD,OAAA,CAAA,CAAA;IACA,QAAA,MAAA/C,IAAA,GAAA6C,IAAA,CAAAU,aAAA,CAAA,CAAAtB,MAAAA,EAAAA,SAAA,CAAAjC,IAAA,CAAA,CAAA,CAAA,CAAA,CAJF;;IAME,QAAA,IAAAA,IAAA,EAAA;;IAEC,SAAA;IACF,OAAA;IACF;;;;IAIH,KAAA,CAAAmB,UAAA,EAAAC,IAAA,EAAAa,SAAA,CAAAjC,IAAA,EAAA+B,cAAA;IAEA,EAAA,MAAAyB,qBAAA,GAAAC,iBAAA,CAAAC,MAAA,IAAA;IAEI,IAAA,IAAAhC,iBAAA,EAAA;IACE,MAAA,IAAAgC,MAAA,CAAAC,KAAA,CAAAC,GAAA,KAAA,KAAA,IAAAF,MAAA,CAAAC,KAAA,CAAAE,IAAA,CAAAC,IAAA,GAAA,CAAA,EAAA;;IAEE5B,QAAAA,SAAA,CAAAa,OAAA,GAAAgB,KAAA,CAAAC,IAAA,CAAAN,MAAA,CAAAC,KAAA,CAAAE,IAAA,CAAAI,MAAA,EAAA,CAAA,CAAAC,GAAA,EAAA,CAAA;IACD,OAAA;;;IAEF,KAAA;IACH,GATF,EASE,CAAAhC,SAAA,EAAAR,iBAAA,CATF,CAAA,CAAA;IAaA,EAAA,MAAAyC,0BAAA,GAAAV,iBAAA,CAAAC,MAAA,IAAA;;;;IAIM,MAAA,IAAAK,KAAA,CAAAK,OAAA,CAAAT,KAAA,CAAA,EAAA;;;;;;;;IAEC,OAFD,MAEO;;IAEHD,UAAAA,MAAA,EAAAA;IACAW,UAAAA,KAAA,EAAA;gBAAAC,MAAA,EAAAlD,IAAA,CAAAkD,MAAA;IAAAC,YAAAA,KAAA,EAAAnD,IAAA,CAAAA,IAAA,CAAAoD,MAAAA;IAAA,WAAA;;;IAGH,OAAA;IACF,KAAA;OAbL,wCAAA,CAAA,CAAA;IAkBA,EAAA,MAAAC,kBAAA,GAAAhB,iBAAA,CAAA,MAAA;;IAMI,MAAA,MAAAiB,QAAA,GAAAtC,iBAAA,CAAAW,OAAA,IAAA4B,gDAAA,CAAAjF,OAAA,CAAAqD,OAAA,EAAAtE,aAAA,CAAA,CAAA;;IAEA,MAAA,IAAAmG,8BAAA,CAAAF,QAAA,CAAA,EAAA;IACElD,QAAAA,kBAAA,CAAA;IAAAmC,UAAAA,KAAA,EAAAe,QAAAA;IAAA,SAAA,CAAA,CAAA;IACD,OAAA;IACF,KAAA;OAXH,+DAAA,CAAA,CAAA;IAcA;;;IAGG;;IACH,EAAA,MAAAG,0BAAA,GAAApB,iBAAA,CAAAvD,KAAA,IAAA;;;;;IAGI,IAAA,IAAAC,GAAA,IAAA,CAAA,CAAA2C,EAAA,GAAA5C,KAAA,CAAA4E,aAAA,MAAA,IAAA,IAAAhC,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAiC,YAAA,CAAA,MAAA,CAAA,MAAA,UAAA,EAAA;IACE,MAAA,CAAAC,EAAA,GAAAtF,OAAA,CAAAqD,OAAA,MAAA,IAAA,IAAAiC,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAA7B,KAAA,EAAA,CAAA;;;IAEE3B,QAAAA,kBAAA,CAAA;IAAAmC,UAAAA,KAAA,EAAAxD,GAAAA;IAAA,SAAA,CAAA,CAAA;IACD,OAAA;IACF,KAAA;IACH,GATF,EASE,CAAAqB,kBAAA,CATF,CAAA,CAAA;IAaA,EAAA,MAAAyD,WAAA,GAAAxB,iBAAA,CAAAvD,KAAA,IAAA;;IAGI,IAAA,CAAAgB,iBAAA,IAAA2D,0BAAA,CAAA3E,KAAA,CAAA,CAAA;IACF,GAJF,EAIE,kBAAA,YAAA,oBAAA,4BAAA,oBAAA,CAJF,CAAA,CAAA;;;;IAgBI,IAAA,IAAAgF,OAAA,KAAAxF,OAAA,CAAAqD,OAAA,EAAA;;IAEC,KAAA;;IACD,IAAA,OAAAoC,0CAAA,CAAAD,OAAA,EAAAzG,aAAA,CAAA,CAAA;IACF,KAAAoD,cAAAtC,eAAA,OAAA,WAAAiE,uBAAAtB,SAAA,CAAAa,SAAA5B,YAAA,CAAAA,UAAA,EAAAiE,MAAA,KAAAC,4CAAA,CAAA3F,OAAA,CAAAqD,OAAA,EAAA5B,UAAA,EAAAiE,MAAA,EAAA3G,aAAA,GAAA0B,GAAA,IAAA;;UAYI,MAAA0C,IAAA,GAAAO,8CAAA,CAAA1D,OAAA,CAAAqD,OAAA,EAAA5C,GAAA,EAAA1B,aAAA,CAAA,CAAA;;IACA,MAAA,IAAAoE,IAAA,EAAA;;IAEEQ,QAAAA,eAAA,CAAAR,IAAA,EAAAS,QAAA,IAAA,IAAA,GAAAA,QAAA,GAAA5D,OAAA,CAAAqD,OAAA,CAAA,CAAA;IACD,OAAA;IACF,KAAA;;;;QAMH,MAAAc,IAAA,GAAAyB,oBAAA,CAAAnD,gBAAA,CAAAY,OAAA,CAAAW,MAAA,EAAAtC,IAAA,CAAA,CAAA;;IACA,IAAA,IAAA2C,KAAA,CAAAK,OAAA,CAAAP,IAAA,CAAA,EAAA;;;;;;;;IAEC,KAAA;;QACD,MAAAQ,KAAA,GAAAlC,gBAAA,CAAAY,OAAA,GACEZ,gBAAA,CAAAY,OAAA,CAAAsB,KADF,GAEE;UAAAC,MAAA,EAAAlD,IAAA,CAAAkD,MAAA;IAAAC,MAAAA,KAAA,EAAAnD,IAAA,CAAAA,IAAA,CAAAoD,MAAAA;SAFF,CAAA;IAGApD,IAAAA,IAAA,GAAAmE,eAAA,CAAAnE,IAAA,EAAAiD,KAAA,CAAA,CAAA;QACAlC,gBAAA,CAAAY,OAAA,GAAAP,SAAA,CAAA;;IAED,GAAA;;IAED,EAAA,MAAAgD,WAAA,GAAA3F,aAAA,CAAA,MAAA4F,eAAA,CAAArE,IAAA,CAAA,EAAA,CAAAA,IAAA,CAAA,CAAA,CAxOF;;;;;;MA6OE,MAAAsE,eAAA,GAAAC,yCAAA,CAAAxE,UAAA,EAAAC,IAAA,EAAAO,YAAA,EAAAlD,aAAA,CAAA,CAAA;;;;;;IAKE,IAAA,IAAA+G,WAAA,EAAA;UACE,MAAAI,WAAA,GAAA,CAAA9C,EAAA,GAAApD,OAAA,CAAAqD,OAAA,MAAA,IAAA,IAAAD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,EAAA,CAAAS,aAAA,CAAA,GAAAsC,GAAAA,6CAAA,CAAA,CAAA;IAGA,MAAA,IAAAC,MAAA,GAAA,CAAAF,WAAA,KAAA,IAAA,IAAAA,WAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,WAAA,CAAAG,YAAA,KAAA,CAAA,CAAA;;;;IAID,KAAA;IACH,KAAA,CAAAP,WAAA,GA3PF;;IA8PE,EAAA,MAAAQ,cAAA,GAAAvC,iBAAA,CAAAwC,OAAA,IAAA;QAEI,MAAAC,gBAAA,GAAA3G,aAAA,KAAA,UAAA;;;;UAAA,YAAA,CAAA;;;IAYE6B,MAAAA,IAAA,EAAA6E,OAAA,CAAA7E,IAAA,CAAAA;IACA+E,MAAAA,QAAA,EAAAF,OAAA,CAAA7E,IAAA,CAAA+E;IACAC,MAAAA,QAAA,EAAAF,gBAAAA;;OAhBN,sDAAA,CAAA,CAAA;;MAsBA,MAAAG,iBAAA,GAAAJ,OAAA,IAAA;IACE,IAAA,MAAAK,eAAA,GAAAN,cAAA,CAAAC,OAAA,CAAA,CAAA;QACA,MAAAzG,UAAA,GAAAgG,WAAA,KAAA,IAAA,IAAAA,WAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,WAAA,CAAAe,GAAA,CAAAD,eAAA,CAAAH,QAAA,CAAAhG,GAAA,CAAA,CAAA;QACA,MAAAd,UAAA,GAAA6B,iBAAA,IAAAsF,oBAAA,CAAAF,eAAA,CAAAH,QAAA,CAAAhG,GAAA,CAAA,CAAA;QACA,MAAAnB,SAAA,GAAAmC,UAAA,KAAAmF,eAAA,CAAAH,QAAA,CAAAhG,GAAA,IAAA,CAAAd,UAAA,CAAA;QACA,MAAAF,UAAA,GAAAsH,6BAAA,CAAA5E,YAAA,EAAAyE,eAAA,CAAAH,QAAA,CAAAhG,GAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;OALF,CAAA;;IA0BA4B,EAAAA,cAAA,GAAA2E,iBAAA,CAAAhH,OAAA,EAAAqC,cAAA,CAAA,CAAA;MACA,MAAA4E,mBAAA,GAAA3E,aAAA,GAAA4E,cAAA,CAAAC,2CAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;IAAA3F,IAAAA,IAAA,EAAAA,IAAA;IAAA4F,IAAAA,YAAA,EAAAvI,aAAA;IAAAwI,IAAAA,iBAAA,EAAAC,wBAAA;IAAAzF,IAAAA,WAAA,EAAAA,WAAA;IAAAG,IAAAA,cAAA,EAAAA,cAAA;IAAA4D,IAAAA,WAAA,EAAA2B,gBAAA;IAAApF,IAAAA,cAAA,EAAAA,cAAAA;IAAA,GAAA,EAAA;IAAAlD,IAAAA,QAAA,EAAAwH,iBAAAA;OAAA,CAAA,CAAA,GAAAO,cAAA,CAAAQ,qCAAA,EAAAN,MAAA,CAAAC,MAAA,CAAA;IAAA3F,IAAAA,IAAA,EAAAA,IAAA;IAAA6F,IAAAA,iBAAA,EAAAC,wBAAA;IAAAzF,IAAAA,WAAA,EAAAA,WAAA;IAAA+D,IAAAA,WAAA,EAAA2B,gBAAA;IAAApF,IAAAA,cAAA,EAAAA,cAAAA;IAAA,GAAA,EAAA;IAAAlD,IAAAA,QAAA,EAAAwH,iBAAAA;IAAA,GAAA,CAAA,CAAA,CAAA;IAsBA;;IAEG;;IACH,EAAA,MAAAgB,iBAAA,GAAA5D,iBAAA,CAAAvD,KAAA,IAAA;;iDAEyBkC,iBAAA,CAAAW,OAAA,GAAA5C,GAAA,CAAA;OAFzB,IAAA,CAAA,CAxUF;;;MA+UE,OAAAyG,cAAA,CAAA,KAAA,EAAAE,MAAA,CAAAC,MAAA,CAAA,EAAA,EAAAO,kCAAA,CAAApG,iBAAA,GAAAqG,iBAAA,GAAA,EAAA,EAAAC,eAAA,EAAAC,cAAA,EAAAC,cAAA,EAAAhC,eAAA,EAAA;IAAAiC,IAAAA,OAAA,EAAA1C,WAAA;IAAA2C,IAAAA,aAAA,EAAAP,iBAAAA;IAAA,GAAA,CAAA,EAAA;IAAA/H,IAAAA,IAAA,EAAAA,IAAA;IAAA,IAAA,eAAA,EAAAmD,YAAA;IAAA,IAAA,eAAA,EAAA,CAAA;IAAAoF,IAAAA,GAAA,EAAAnI,OAAA;IAAAoI,IAAAA,KAAA,EAAAC,OAAA;IAAAC,IAAAA,QAAA,EAAA,CAAA;IAAA,IAAA,YAAA,EAAA/G,iBAAA;QAAA,sBAAAsB,EAAAA,mBAAAA;IAAA,GAAA,EAAA;IAAA1D,IAAAA,QAAA,EAAAuC,IAAA,IAAA,IAAA,GAAAE,gBAAA,GAAAqF,mBAAAA;IAAA,GAAA,CAAA,CAAA,CAAA;IAqBF,CAAA;IAEA;;;;IAIG;;IACH,MAAAlB,eAAA,GAAAwC,SAAA,IAAA;;IAEE,EAAA,MAAA1D,KAAA,GAAA2D,mBAAA,CAAA9G,IAAA,CAAA,CAAA;;;IAEE,IAAA,OAAA,IAAA,CAAA;IACD,GAAA;;;;IAIC,IAAA,MAAAjB,GAAA,GAAAwD,KAAA,CAAAwC,QAAA,CAAAhG,GAAA,CAAA;;IAEA,IAAA,IAAAmC,KAAA,KAAAiC,KAAA,GAAA,CAAA,EAAA;IACEiB,MAAAA,WAAA,CAAA2C,GAAA,CAAAhI,GAAA,EAAA,KAAA,CAAA,CAAA;IACD,KAFD,MAEO;IACLqF,MAAAA,WAAA,CAAA2C,GAAA,CAAAhI,GAAA,EAAA,IAAA,CAAA,CAAA;IACD,KAAA;;IAED,IAAA,OAAAqF,WAAA,CAAA;IACF,KAAA,IAAA4C,GAAA;IACF,CAnBA,CAAA;IAqBA;;;IAGG;;;IACH,MAAAF,mBAAA,GAAA9G,IAAA,IAAA;;IAEI,IAAA,OAAA,CAAA,CAAA;IACD,GAAA;;IAED,EAAA,MAAAkB,KAAA,GAAAlB,IAAA,CAAAiH,SAAA,CAAA1E,KAAA,IAAA,CAAAA,KAAA,CAAAwC,QAAA,CAAA3G,UAAA,CAAA,CAAA;IACA,EAAA,OAAA8C,KAAA,KAAA,CAAA,CAAA,GAAA,CAAA,GAAAA,KAAA,CAAA;IACF,CAPA,CAAA;IASA;;IAEG;;;IACH,MAAAe,eAAA,GAAA,CAAAR,IAAA,EAAAS,QAAA,KAAA;;IAEI,IAAA,MAAAgF,cAAA,GAAAhF,QAAA,CAAAiF,qBAAA,EAAA,CAAA;IACA,IAAA,MAAAC,UAAA,GAAA3F,IAAA,CAAA0F,qBAAA,EAAA,CAAA;;IACA,IAAA,IAAAC,UAAA,CAAAC,MAAA,GAAAH,cAAA,CAAAG,MAAA,EAAA;IACEnF,MAAAA,QAAA,CAAAoF,SAAA,GAAApF,QAAA,CAAAoF,SAAA,IAAAF,UAAA,CAAAC,MAAA,GAAAH,cAAA,CAAAG,MAAA,CAAA,CAAA;SADF,MAEO,IAAAD,UAAA,CAAAG,GAAA,GAAAL,cAAA,CAAAK,GAAA,EAAA;IACLrF,MAAAA,QAAA,CAAAoF,SAAA,GAAApF,QAAA,CAAAoF,SAAA,IAAAJ,cAAA,CAAAK,GAAA,GAAAH,UAAA,CAAAG,GAAA,CAAA,CAAA;IACD,KAAA;IACF,GAAA;IACH,CAVA,CAAA;;IAYA,MAAAjC,iBAAA,GAAA,CAAAhH,OAAA,EAAAkJ,MAAA,KAAA;MACE,OAAAA,MAAA,KAAA,IAAA,IAAAA,MAAA,KAAA,KAAA,CAAA,GAAAA,MAAA,GAAA;;;;OAAA,CAAA;IAOF,CARA,CAAA;;IAUA,MAAA9G,SAAA,GAAA;IAAA8B,EAAAA,GAAA,EAAA,KAAA;MAAAC,IAAA,EAAA,IAAAgF,GAAA,EAAA;IAAA,CAAA,CAAA;;IAEA,MAAAvD,oBAAA,GAAA,CAAA5B,MAAA,EAAAuE,SAAA,KAAA;;IAKI,IAAA,OAAAtE,KAAA,CAAAwC,QAAA,CAAAhG,GAAA,CAAA;IACF;MACA,MAAA2I,UAAA,GAAAjF,IAAA,CAAAkF,OAAA,CAAArF,MAAA,CAAAC,KAAA,CAAAqF,KAAA,CAAA,CAAA;MACA,MAAAC,QAAA,GAAApF,IAAA,CAAAkF,OAAA,CAAArF,MAAA,CAAAC,KAAA,CAAAuF,GAAA,CAAA,CAAA;;;;IAGA,EAAA,IAAAC,QAAA,KAAA,CAAA,CAAA,EAAA;;;;;;IAGC,GAHD,MAGO;;;IAGN,GAAA;IACH,CAlBA,CAAA;IAoBA;;;IAGG;;;IACH,SAAAC,OAAA,CAAA;IAAAC,EAAAA,aAAAA;IAAA,CAAA,EAAA;;IAEI,IAAA,OAAA,IAAA,CAAA;IACD,GAAA;;IAED,EAAA,MAAAvD,MAAA,GAAAuD,aAAA,GAAA,IAAA,CAAA;;;;;;;;;;;;;IASF,CAAA;;IAEA,MAAA9H,uBAAA,GAAAqF,cAAA,CAAA/F,iBAAA,EAAAiG,MAAA,CAAAC,MAAA,CAAA;IAAAjG,EAAAA,YAAA,EAAA,EAAA;IAAA,CAAA,EAAA;IAAAjC,EAAAA,QAAA,EAAA,MAAA;;;;;;;;;;IAAA,CAAA,CAAA,CAAA,CAAA;;IAYA,MAAAqI,wBAAA,GAAAN,cAAA,CAAA/F,iBAAA,EAAAiG,MAAA,CAAAC,MAAA,CAAA;IAAAjG,EAAAA,YAAA,EAAA,CAAA;IAAA,CAAA,EAAA;IAAAjC,EAAAA,QAAA,EAAA,MAAA;;;;;;;;;;IAAA,CAAA,CAAA,CAAA,CAAA;IAYA;;IAEG;;;IACH,MAAA0G,eAAA,GAAA,CAAA0C,SAAA,EAAA5D,KAAA,KAAA;IACE,EAAA,IAAAA,KAAA,EAAA;;IAEE,IAAA,MAAAiF,eAAA,GAAAC,IAAA,CAAAC,GAAA,CAAAnF,KAAA,CAAAC,MAAA,EAAA2D,SAAA,CAAA3D,MAAA,GAAA2D,SAAA,CAAAtF,SAAA,CAAA,CAAA;IACA,IAAA,MAAA8G,IAAA,GAAAH,eAAA,GAAArB,SAAA,CAAA3D,MAAA,CAAA;;;IAEE2D,MAAAA,SAAA,GAAA;IACE3D,QAAAA,MAAA,EAAAgF,eADF;IAEElI,QAAAA,IAAA,EAAA6G,SAAA,CAAA7G,IAAA,CAAAsI,KAAA,CAAAD,IAAA,EAAAA,IAAA,GAAApF,KAAA,CAAAE,KAAA,CAFF;0CAAA;;WAAA,CAAA;IAMD,KAAA;IACF,GAAA;;IACD,EAAA,OAAA0D,SAAA,CAAA;IACF,CAfA;;;;;;;;;;;;"}

package/amd/ListItemTextLayout-f6a3d721.js

@@ -0,0 +1,211 @@
+/* @oracle/oraclejet-preact: 14.0.7 */
+define(['exports', 'preact/jsx-runtime', 'module', './UNSAFE_Grid', './utils/UNSAFE_classNames', './classNames-027de734', './UNSAFE_Text', './hooks/UNSAFE_useTabbableMode', './Text-de291c3f'], (function (exports, jsxRuntime, linaria, UNSAFE_Grid, utils_UNSAFE_classNames, classNames, UNSAFE_Text, hooks_UNSAFE_useTabbableMode, Text) { 'use strict';
+
+    const childrenStyles = "childrenStyles-j0wim5"; // TODO: revisit idea of negative margin when selector has a proper API for handling spacing
+    // Jira: JET-54543
+    // negative margin added to selector
+
+    const selectorStyles = "selectorStyles-ntfwd2"; // most content will be vertically centered
+
+    const centerVerticalStyles = "centerVerticalStyles-t54b3n"; // extra spacing is needed between meta, trailing, and action components
+
+    const leftPaddingStyles = "leftPaddingStyles-ma65i0"; // the central text area displays overline, primary, secondary, and tertiary in a column
+
+    const flexColumnStyles$1 = "flexColumnStyles-nk05rh"; // "extra" components in row 1 and the link in row 2 are justified on the righthand side of the list item layout
+
+    const flexRowStyles = "flexRowStyles-vxfw11";
+    const rightJustifyStyles = "rightJustifyStyles-1xyj7w3";
+    const rowAlignStyles = "rowAlignStyles-bkfgvw";
+    function ListItemLayout({
+      children,
+      selector,
+      leading,
+      primary,
+      secondary,
+      tertiary,
+      overline,
+      metadata,
+      trailing,
+      action,
+      quaternary,
+      navigation
+    }) {
+      // generate grid skeleton, adding cells based on which props are defined
+      const {
+        columnsTemplate,
+        firstCell,
+        secondCell,
+        lastCell,
+        hasSecondRow
+      } = getColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation); // if ListItemLayout component has a child (ListItemTextLayout) then render that instead of individual props
+
+      const textArea = children ? jsxRuntime.jsx("div", Object.assign({
+        className: childrenStyles
+      }, {
+        children: children
+      })) : jsxRuntime.jsxs("div", Object.assign({
+        className: flexColumnStyles$1
+      }, {
+        children: [jsxRuntime.jsx("div", {
+          children: overline
+        }), jsxRuntime.jsx("div", {
+          children: primary
+        }), jsxRuntime.jsx("div", {
+          children: secondary
+        }), jsxRuntime.jsx("div", {
+          children: tertiary
+        })]
+      })); // a second row is needed when quaternary or navigation are defined
+
+      const secondRow = hasSecondRow ? [firstCell && jsxRuntime.jsx("span", {
+        children: " "
+      }), secondCell && jsxRuntime.jsx("span", {
+        children: " "
+      }), jsxRuntime.jsx("div", Object.assign({
+        className: rowAlignStyles
+      }, {
+        children: quaternary
+      })), lastCell && jsxRuntime.jsx("div", Object.assign({
+        className: rightJustifyStyles
+      }, {
+        children: navigation
+      }))] : null;
+      return jsxRuntime.jsxs(UNSAFE_Grid.Grid, Object.assign({
+        gap: "4x",
+        gridTemplateColumns: columnsTemplate
+      }, {
+        children: [firstCell, secondCell, jsxRuntime.jsx("div", Object.assign({
+          className: centerVerticalStyles
+        }, {
+          children: textArea
+        })), lastCell, secondRow]
+      }));
+    }
+
+    function getColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation) {
+      const columnsTemplateBuilder = [];
+      let firstCell = null;
+
+      if (selector) {
+        columnsTemplateBuilder.push('auto');
+        firstCell = jsxRuntime.jsx("div", Object.assign({
+          className: selectorStyles
+        }, {
+          children: selector
+        }));
+      }
+
+      let secondCell = null;
+
+      if (leading) {
+        columnsTemplateBuilder.push('auto');
+        secondCell = jsxRuntime.jsx("div", Object.assign({
+          className: centerVerticalStyles
+        }, {
+          children: leading
+        }));
+      }
+
+      columnsTemplateBuilder.push('1fr'); // Text area always gets 1 full fraction of allotted space
+
+      let lastCell = null;
+
+      if (metadata || trailing || action || navigation) {
+        columnsTemplateBuilder.push('auto');
+        lastCell = jsxRuntime.jsxs("div", Object.assign({
+          className: flexRowStyles
+        }, {
+          children: [jsxRuntime.jsx("div", Object.assign({
+            className: classNames.classNames([centerVerticalStyles, metadata ? leftPaddingStyles : ''])
+          }, {
+            children: metadata
+          })), jsxRuntime.jsx("div", Object.assign({
+            className: classNames.classNames([centerVerticalStyles, trailing ? leftPaddingStyles : ''])
+          }, {
+            children: trailing
+          })), jsxRuntime.jsx("div", Object.assign({
+            className: classNames.classNames([centerVerticalStyles, action ? leftPaddingStyles : ''])
+          }, {
+            children: action
+          }))]
+        }));
+      }
+
+      const columnsTemplate = columnsTemplateBuilder.join(' ');
+      const hasSecondRow = quaternary || navigation ? true : false;
+      return {
+        columnsTemplate,
+        firstCell,
+        secondCell,
+        lastCell,
+        hasSecondRow
+      };
+    }
+
+    const textVariants = {
+        primary: 'primary',
+        secondary: 'primary',
+        tertiary: 'secondary',
+        quaternary: 'secondary',
+        overline: 'secondary',
+        metadata: 'secondary'
+    };
+    const textSizes = {
+        primary: 'md',
+        secondary: 'sm',
+        tertiary: 'xs',
+        quaternary: 'sm',
+        overline: 'xs',
+        metadata: 'sm'
+    };
+    const textLineClamps = {
+        primary: undefined,
+        secondary: 2,
+        tertiary: 2,
+        quaternary: 2,
+        overline: 1,
+        metadata: 1
+    };
+    function ListItemText({ children, variant }) {
+        const { isTabbable } = hooks_UNSAFE_useTabbableMode.useTabbableMode();
+        const textContent = (jsxRuntime.jsx(Text.Text, Object.assign({ variant: textVariants[variant], size: textSizes[variant], lineClamp: textLineClamps[variant] }, { children: children })));
+        return isTabbable ? jsxRuntime.jsx("div", Object.assign({ tabIndex: 0 }, { children: textContent })) : textContent;
+    }
+
+    const flexColumnStyles = "flexColumnStyles-1rcc2xu";
+    function ListItemTextLayout({
+      primary,
+      secondary,
+      tertiary,
+      overline
+    }) {
+      return jsxRuntime.jsxs("div", Object.assign({
+        className: flexColumnStyles
+      }, {
+        children: [jsxRuntime.jsx(ListItemText, Object.assign({
+          variant: "overline"
+        }, {
+          children: overline
+        })), jsxRuntime.jsx(ListItemText, Object.assign({
+          variant: "primary"
+        }, {
+          children: primary
+        })), jsxRuntime.jsx(ListItemText, Object.assign({
+          variant: "secondary"
+        }, {
+          children: secondary
+        })), jsxRuntime.jsx(ListItemText, Object.assign({
+          variant: "tertiary"
+        }, {
+          children: tertiary
+        }))]
+      }));
+    }
+
+    exports.ListItemLayout = ListItemLayout;
+    exports.ListItemText = ListItemText;
+    exports.ListItemTextLayout = ListItemTextLayout;
+
+}));
+/*  */
+//# sourceMappingURL=ListItemTextLayout-f6a3d721.js.map

package/amd/{ListItemTextLayout-60e39a4b.js.map → ListItemTextLayout-f6a3d721.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ListItemTextLayout-60e39a4b.js","sources":["../../src/UNSAFE_ListItemLayout/ListItemLayout.tsx","../../src/UNSAFE_ListItemLayout/ListItemText.tsx","../../src/UNSAFE_ListItemLayout/ListItemTextLayout.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, JSX } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { Grid } from '../UNSAFE_Grid';\nimport { classNames } from '../utils/UNSAFE_classNames';\n\ntype IntrinsicProps = Pick<JSX.HTMLAttributes<HTMLDivElement>, 'children'>;\ntype Props = {\n  children?: ComponentChildren;\n  /**\n   * The centermost element that should display more important data.\n   */\n  primary?: ComponentChildren;\n  /**\n   * Render Selector component in the leftmost column of the grid.\n   */\n  selector?: ComponentChildren;\n  /**\n   * Visual element to the left of the primary section.\n   * Supports image, avatar, badge, initials, or icon.\n   */\n  leading?: ComponentChildren;\n  /**\n   * A section that is rendered above the primary line.\n   */\n  overline?: ComponentChildren;\n  /**\n   * A section below the primary line.\n   */\n  secondary?: ComponentChildren;\n  /**\n   * Another section below secondary.\n   */\n  tertiary?: ComponentChildren;\n  /**\n   * Provides information about other data.\n   * Some examples of basic metadata are author, date created, date modified, file size, abbreviations, etc.\n   */\n  metadata?: ComponentChildren;\n  /**\n   * Visual element to the right of the primary section and metadata.\n   * Example components are image, avatar, badge, initials, or icon.\n   */\n  trailing?: ComponentChildren;\n  /**\n   * The action prop displays either one primary action or one or more secondary actions.\n   * A common example is using Toolbar.\n   */\n  action?: ComponentChildren;\n  /**\n   * Additional section separated with a space between itself and tertiary.\n   */\n  quaternary?: ComponentChildren;\n  /**\n   * Navigation should normally be used for linking away from the layout.\n   */\n  navigation?: ComponentChildren;\n} & IntrinsicProps;\n\nconst childrenStyles = cssProps`${{\n  /* @ts-ignore */\n  '& > *': {\n    marginTop: '0 !important',\n    marginBottom: '0 !important',\n    marginLeft: '0 !important',\n    marginRight: '0 !important'\n  }\n}}`;\n\n// TODO: revisit idea of negative margin when selector has a proper API for handling spacing\n// Jira: JET-54543\n// negative margin added to selector\nconst selectorStyles = cssProps`${{\n  alignSelf: 'center',\n  margin: '-0.875rem -0.875rem'\n}}`;\n\n// most content will be vertically centered\nconst centerVerticalStyles = cssProps`${{\n  alignSelf: 'center',\n  minWidth: 0\n}}`;\n\n// extra spacing is needed between meta, trailing, and action components\nconst leftPaddingStyles = cssProps`${{\n  paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x)'\n}}`;\n\n// the central text area displays overline, primary, secondary, and tertiary in a column\nconst flexColumnStyles = cssProps`${{\n  display: 'flex',\n  flexDirection: 'column'\n}}`;\n\n// \"extra\" components in row 1 and the link in row 2 are justified on the righthand side of the list item layout\nconst flexRowStyles = cssProps`${{\n  display: 'flex',\n  flexDirection: 'row',\n  justifyContent: 'right',\n  alignSelf: 'center'\n}}`;\n\nconst rightJustifyStyles = cssProps`${{\n  display: 'flex',\n  flexDirection: 'row',\n  justifyContent: 'right'\n}}`;\n\nconst rowAlignStyles = cssProps`${{\n  alignSelf: 'end'\n}}`;\n\nexport function ListItemLayout({\n  children,\n  selector,\n  leading,\n  primary,\n  secondary,\n  tertiary,\n  overline,\n  metadata,\n  trailing,\n  action,\n  quaternary,\n  navigation\n}: Props) {\n  // generate grid skeleton, adding cells based on which props are defined\n  const { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow } = getColumnsTemplate(\n    selector,\n    leading,\n    metadata,\n    trailing,\n    action,\n    quaternary,\n    navigation\n  );\n\n  // if ListItemLayout component has a child (ListItemTextLayout) then render that instead of individual props\n  const textArea = children ? (\n    <div className={childrenStyles}>{children}</div>\n  ) : (\n    <div className={flexColumnStyles}>\n      <div>{overline}</div>\n      <div>{primary}</div>\n      <div>{secondary}</div>\n      <div>{tertiary}</div>\n    </div>\n  );\n\n  // a second row is needed when quaternary or navigation are defined\n  const secondRow = hasSecondRow\n    ? [\n        firstCell && <span> </span>,\n        secondCell && <span> </span>,\n        <div className={rowAlignStyles}>{quaternary}</div>,\n        lastCell && <div className={rightJustifyStyles}>{navigation}</div>\n      ]\n    : null;\n\n  return (\n    <Grid gap=\"4x\" gridTemplateColumns={columnsTemplate}>\n      {firstCell}\n      {secondCell}\n      <div className={centerVerticalStyles}>{textArea}</div>\n      {lastCell}\n      {secondRow}\n    </Grid>\n  );\n}\n\nfunction getColumnsTemplate(\n  selector: ComponentChildren,\n  leading: ComponentChildren,\n  metadata: ComponentChildren,\n  trailing: ComponentChildren,\n  action: ComponentChildren,\n  quaternary: ComponentChildren,\n  navigation: ComponentChildren\n) {\n  const columnsTemplateBuilder = [];\n\n  let firstCell = null;\n  if (selector) {\n    columnsTemplateBuilder.push('auto');\n    firstCell = <div className={selectorStyles}>{selector}</div>;\n  }\n\n  let secondCell = null;\n  if (leading) {\n    columnsTemplateBuilder.push('auto');\n    secondCell = <div className={centerVerticalStyles}>{leading}</div>;\n  }\n\n  columnsTemplateBuilder.push('1fr'); // Text area always gets 1 full fraction of allotted space\n\n  let lastCell = null;\n  if (metadata || trailing || action || navigation) {\n    columnsTemplateBuilder.push('auto');\n    lastCell = (\n      <div className={flexRowStyles}>\n        <div className={classNames([centerVerticalStyles, metadata ? leftPaddingStyles : ''])}>\n          {metadata}\n        </div>\n        <div className={classNames([centerVerticalStyles, trailing ? leftPaddingStyles : ''])}>\n          {trailing}\n        </div>\n        <div className={classNames([centerVerticalStyles, action ? leftPaddingStyles : ''])}>\n          {action}\n        </div>\n      </div>\n    );\n  }\n\n  const columnsTemplate = columnsTemplateBuilder.join(' ');\n  const hasSecondRow = quaternary || navigation ? true : false;\n\n  return { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow };\n}\n","/**\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 { JSX, ComponentProps } from 'preact';\nimport { Text } from '../UNSAFE_Text';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\n\ntype IntrinsicProps = Pick<JSX.HTMLAttributes<HTMLDivElement>, 'children'>;\ntype Props = {\n  children?: string;\n  /**\n   * Name of the text slot which determines styling\n   */\n  variant: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'overline' | 'metadata';\n} & IntrinsicProps;\n\nconst textVariants: Record<Props['variant'], ComponentProps<typeof Text>['variant']> = {\n  primary: 'primary',\n  secondary: 'primary',\n  tertiary: 'secondary',\n  quaternary: 'secondary',\n  overline: 'secondary',\n  metadata: 'secondary'\n};\n\nconst textSizes: Record<Props['variant'], ComponentProps<typeof Text>['size']> = {\n  primary: 'md',\n  secondary: 'sm',\n  tertiary: 'xs',\n  quaternary: 'sm',\n  overline: 'xs',\n  metadata: 'sm'\n};\n\nconst textLineClamps: Record<Props['variant'], ComponentProps<typeof Text>['lineClamp']> = {\n  primary: undefined,\n  secondary: 2,\n  tertiary: 2,\n  quaternary: 2,\n  overline: 1,\n  metadata: 1\n};\n\nexport function ListItemText({ children, variant }: Props) {\n  const { isTabbable } = useTabbableMode();\n\n  const textContent = (\n    <Text\n      variant={textVariants[variant]}\n      size={textSizes[variant]}\n      lineClamp={textLineClamps[variant]}>\n      {children}\n    </Text>\n  );\n\n  return isTabbable ? <div tabIndex={0}>{textContent}</div> : textContent;\n}\n","/**\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 { JSX } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { ListItemText } from './ListItemText';\n\ntype IntrinsicProps = JSX.HTMLAttributes<HTMLDivElement>;\ntype Props = {\n  /**\n   * The primary prop takes a simple string that will be formatted and placed in the center of the text area.\n   */\n  primary?: string;\n  /**\n   * The secondary prop takes a simple string that will be formatted and placed below the primary text.\n   */\n  secondary?: string;\n  /**\n   * The tertiary prop takes a simple string that will be formatted and placed below the secondary text.\n   */\n  tertiary?: string;\n  /**\n   * The overline prop takes a simple string that will be formatted and placed above the primary text.\n   */\n  overline?: string;\n} & IntrinsicProps;\n\nconst flexColumnStyles = cssProps`${{\n  display: 'flex',\n  flexDirection: 'column'\n}}`;\n\nexport function ListItemTextLayout({ primary, secondary, tertiary, overline }: Props) {\n  return (\n    <div className={flexColumnStyles}>\n      <ListItemText variant=\"overline\">{overline}</ListItemText>\n      <ListItemText variant=\"primary\">{primary}</ListItemText>\n      <ListItemText variant=\"secondary\">{secondary}</ListItemText>\n      <ListItemText variant=\"tertiary\">{tertiary}</ListItemText>\n    </div>\n  );\n}\n"],"names":["selectorStyles","centerVerticalStyles","leftPaddingStyles","flexRowStyles","textVariants","primary","secondary","tertiary","quaternary","overline","metadata","textSizes","textLineClamps","undefined","ListItemText","children","variant","isTabbable","useTabbableMode","textContent","_jsx","Text","Object","assign","size","lineClamp","tabIndex","selector","leading","trailing","action","navigation","columnsTemplate","firstCell","secondCell","lastCell","hasSecondRow","columnsTemplateBuilder","push","_jsxs","jsxs","className","jsx","classNames","getColumnsTemplate","textArea","Grid","gap","gridTemplateColumns","secondRow"],"mappings":"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"}
+{"version":3,"file":"ListItemTextLayout-f6a3d721.js","sources":["../../src/UNSAFE_ListItemLayout/ListItemLayout.tsx","../../src/UNSAFE_ListItemLayout/ListItemText.tsx","../../src/UNSAFE_ListItemLayout/ListItemTextLayout.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, JSX } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { Grid } from '../UNSAFE_Grid';\nimport { classNames } from '../utils/UNSAFE_classNames';\n\ntype IntrinsicProps = Pick<JSX.HTMLAttributes<HTMLDivElement>, 'children'>;\ntype Props = {\n  children?: ComponentChildren;\n  /**\n   * The centermost element that should display more important data.\n   */\n  primary?: ComponentChildren;\n  /**\n   * Render Selector component in the leftmost column of the grid.\n   */\n  selector?: ComponentChildren;\n  /**\n   * Visual element to the left of the primary section.\n   * Supports image, avatar, badge, initials, or icon.\n   */\n  leading?: ComponentChildren;\n  /**\n   * A section that is rendered above the primary line.\n   */\n  overline?: ComponentChildren;\n  /**\n   * A section below the primary line.\n   */\n  secondary?: ComponentChildren;\n  /**\n   * Another section below secondary.\n   */\n  tertiary?: ComponentChildren;\n  /**\n   * Provides information about other data.\n   * Some examples of basic metadata are author, date created, date modified, file size, abbreviations, etc.\n   */\n  metadata?: ComponentChildren;\n  /**\n   * Visual element to the right of the primary section and metadata.\n   * Example components are image, avatar, badge, initials, or icon.\n   */\n  trailing?: ComponentChildren;\n  /**\n   * The action prop displays either one primary action or one or more secondary actions.\n   * A common example is using Toolbar.\n   */\n  action?: ComponentChildren;\n  /**\n   * Additional section separated with a space between itself and tertiary.\n   */\n  quaternary?: ComponentChildren;\n  /**\n   * Navigation should normally be used for linking away from the layout.\n   */\n  navigation?: ComponentChildren;\n} & IntrinsicProps;\n\nconst childrenStyles = cssProps`${{\n  /* @ts-ignore */\n  '& > *': {\n    marginTop: '0 !important',\n    marginBottom: '0 !important',\n    marginLeft: '0 !important',\n    marginRight: '0 !important'\n  }\n}}`;\n\n// TODO: revisit idea of negative margin when selector has a proper API for handling spacing\n// Jira: JET-54543\n// negative margin added to selector\nconst selectorStyles = cssProps`${{\n  alignSelf: 'center',\n  margin: '-0.875rem -0.875rem'\n}}`;\n\n// most content will be vertically centered\nconst centerVerticalStyles = cssProps`${{\n  alignSelf: 'center',\n  minWidth: 0\n}}`;\n\n// extra spacing is needed between meta, trailing, and action components\nconst leftPaddingStyles = cssProps`${{\n  paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x)'\n}}`;\n\n// the central text area displays overline, primary, secondary, and tertiary in a column\nconst flexColumnStyles = cssProps`${{\n  display: 'flex',\n  flexDirection: 'column'\n}}`;\n\n// \"extra\" components in row 1 and the link in row 2 are justified on the righthand side of the list item layout\nconst flexRowStyles = cssProps`${{\n  display: 'flex',\n  flexDirection: 'row',\n  justifyContent: 'right',\n  alignSelf: 'center'\n}}`;\n\nconst rightJustifyStyles = cssProps`${{\n  display: 'flex',\n  flexDirection: 'row',\n  justifyContent: 'right'\n}}`;\n\nconst rowAlignStyles = cssProps`${{\n  alignSelf: 'end'\n}}`;\n\nexport function ListItemLayout({\n  children,\n  selector,\n  leading,\n  primary,\n  secondary,\n  tertiary,\n  overline,\n  metadata,\n  trailing,\n  action,\n  quaternary,\n  navigation\n}: Props) {\n  // generate grid skeleton, adding cells based on which props are defined\n  const { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow } = getColumnsTemplate(\n    selector,\n    leading,\n    metadata,\n    trailing,\n    action,\n    quaternary,\n    navigation\n  );\n\n  // if ListItemLayout component has a child (ListItemTextLayout) then render that instead of individual props\n  const textArea = children ? (\n    <div className={childrenStyles}>{children}</div>\n  ) : (\n    <div className={flexColumnStyles}>\n      <div>{overline}</div>\n      <div>{primary}</div>\n      <div>{secondary}</div>\n      <div>{tertiary}</div>\n    </div>\n  );\n\n  // a second row is needed when quaternary or navigation are defined\n  const secondRow = hasSecondRow\n    ? [\n        firstCell && <span> </span>,\n        secondCell && <span> </span>,\n        <div className={rowAlignStyles}>{quaternary}</div>,\n        lastCell && <div className={rightJustifyStyles}>{navigation}</div>\n      ]\n    : null;\n\n  return (\n    <Grid gap=\"4x\" gridTemplateColumns={columnsTemplate}>\n      {firstCell}\n      {secondCell}\n      <div className={centerVerticalStyles}>{textArea}</div>\n      {lastCell}\n      {secondRow}\n    </Grid>\n  );\n}\n\nfunction getColumnsTemplate(\n  selector: ComponentChildren,\n  leading: ComponentChildren,\n  metadata: ComponentChildren,\n  trailing: ComponentChildren,\n  action: ComponentChildren,\n  quaternary: ComponentChildren,\n  navigation: ComponentChildren\n) {\n  const columnsTemplateBuilder = [];\n\n  let firstCell = null;\n  if (selector) {\n    columnsTemplateBuilder.push('auto');\n    firstCell = <div className={selectorStyles}>{selector}</div>;\n  }\n\n  let secondCell = null;\n  if (leading) {\n    columnsTemplateBuilder.push('auto');\n    secondCell = <div className={centerVerticalStyles}>{leading}</div>;\n  }\n\n  columnsTemplateBuilder.push('1fr'); // Text area always gets 1 full fraction of allotted space\n\n  let lastCell = null;\n  if (metadata || trailing || action || navigation) {\n    columnsTemplateBuilder.push('auto');\n    lastCell = (\n      <div className={flexRowStyles}>\n        <div className={classNames([centerVerticalStyles, metadata ? leftPaddingStyles : ''])}>\n          {metadata}\n        </div>\n        <div className={classNames([centerVerticalStyles, trailing ? leftPaddingStyles : ''])}>\n          {trailing}\n        </div>\n        <div className={classNames([centerVerticalStyles, action ? leftPaddingStyles : ''])}>\n          {action}\n        </div>\n      </div>\n    );\n  }\n\n  const columnsTemplate = columnsTemplateBuilder.join(' ');\n  const hasSecondRow = quaternary || navigation ? true : false;\n\n  return { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow };\n}\n","/**\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 { JSX, ComponentProps } from 'preact';\nimport { Text } from '../UNSAFE_Text';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\n\ntype IntrinsicProps = Pick<JSX.HTMLAttributes<HTMLDivElement>, 'children'>;\ntype Props = {\n  children?: string;\n  /**\n   * Name of the text slot which determines styling\n   */\n  variant: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'overline' | 'metadata';\n} & IntrinsicProps;\n\nconst textVariants: Record<Props['variant'], ComponentProps<typeof Text>['variant']> = {\n  primary: 'primary',\n  secondary: 'primary',\n  tertiary: 'secondary',\n  quaternary: 'secondary',\n  overline: 'secondary',\n  metadata: 'secondary'\n};\n\nconst textSizes: Record<Props['variant'], ComponentProps<typeof Text>['size']> = {\n  primary: 'md',\n  secondary: 'sm',\n  tertiary: 'xs',\n  quaternary: 'sm',\n  overline: 'xs',\n  metadata: 'sm'\n};\n\nconst textLineClamps: Record<Props['variant'], ComponentProps<typeof Text>['lineClamp']> = {\n  primary: undefined,\n  secondary: 2,\n  tertiary: 2,\n  quaternary: 2,\n  overline: 1,\n  metadata: 1\n};\n\nexport function ListItemText({ children, variant }: Props) {\n  const { isTabbable } = useTabbableMode();\n\n  const textContent = (\n    <Text\n      variant={textVariants[variant]}\n      size={textSizes[variant]}\n      lineClamp={textLineClamps[variant]}>\n      {children}\n    </Text>\n  );\n\n  return isTabbable ? <div tabIndex={0}>{textContent}</div> : textContent;\n}\n","/**\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 { JSX } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { ListItemText } from './ListItemText';\n\ntype IntrinsicProps = JSX.HTMLAttributes<HTMLDivElement>;\ntype Props = {\n  /**\n   * The primary prop takes a simple string that will be formatted and placed in the center of the text area.\n   */\n  primary?: string;\n  /**\n   * The secondary prop takes a simple string that will be formatted and placed below the primary text.\n   */\n  secondary?: string;\n  /**\n   * The tertiary prop takes a simple string that will be formatted and placed below the secondary text.\n   */\n  tertiary?: string;\n  /**\n   * The overline prop takes a simple string that will be formatted and placed above the primary text.\n   */\n  overline?: string;\n} & IntrinsicProps;\n\nconst flexColumnStyles = cssProps`${{\n  display: 'flex',\n  flexDirection: 'column'\n}}`;\n\nexport function ListItemTextLayout({ primary, secondary, tertiary, overline }: Props) {\n  return (\n    <div className={flexColumnStyles}>\n      <ListItemText variant=\"overline\">{overline}</ListItemText>\n      <ListItemText variant=\"primary\">{primary}</ListItemText>\n      <ListItemText variant=\"secondary\">{secondary}</ListItemText>\n      <ListItemText variant=\"tertiary\">{tertiary}</ListItemText>\n    </div>\n  );\n}\n"],"names":["childrenStyles","selectorStyles","centerVerticalStyles","leftPaddingStyles","flexColumnStyles","flexRowStyles","rightJustifyStyles","rowAlignStyles","ListItemLayout","children","selector","leading","primary","secondary","tertiary","overline","metadata","trailing","action","quaternary","navigation","columnsTemplate","firstCell","secondCell","lastCell","hasSecondRow","getColumnsTemplate","textArea","_jsx","Object","assign","className","_jsxs","Grid","gap","gridTemplateColumns","secondRow","columnsTemplateBuilder","push","classNames","useTabbableMode","Text","ListItemTextLayout"],"mappings":";;;IAiEA,MAAAA,cAAA,GAAA,uBAAA;IAWA;IACA;;IACA,MAAAC,cAAA,GAAA,uBAAA;;IAMA,MAAAC,oBAAA,GAAA,6BAAA;;IAMA,MAAAC,iBAAA,GAAA,0BAAA;;IAKA,MAAAC,kBAAA,GAAA,yBAAA;;IAMA,MAAAC,aAAA,GAAA,sBAAA,CAAA;IAOA,MAAAC,kBAAA,GAAA,4BAAA,CAAA;IAMA,MAAAC,cAAA,GAAA,uBAAA,CAAA;IAIA,SAAAC,cAAA,CAAA;MAAAC,QAAA;MAAAC,QAAA;MAAAC,OAAA;MAAAC,OAAA;MAAAC,SAAA;MAAAC,QAAA;MAAAC,QAAA;MAAAC,QAAA;MAAAC,QAAA;MAAAC,MAAA;MAAAC,UAAA;IAAAC,EAAAA,UAAAA;IAAA,CAAA,EAAA;;MAeE,MAAA;QAAAC,eAAA;QAAAC,SAAA;QAAAC,UAAA;QAAAC,QAAA;IAAAC,IAAAA,YAAAA;IAAA,GAAA,GAAAC,kBAAA,CAAAhB,QAAA,EAAAC,OAAA,EAAAK,QAAA,EAAAC,QAAA,EAAAC,MAAA,EAAAC,UAAA,EAAAC,UAAA,CAAA,CAfF;;MA0BE,MAAAO,QAAA,GAAAlB,QAAA,GAAAmB,cAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;IAAAC,IAAAA,SAAA,EAAA/B,cAAAA;IAAA,GAAA,EAAA;IAAAS,IAAAA,QAAA,EAAAA,QAAAA;OAAA,CAAA,CAAA,GAAAuB,eAAA,CAAA,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAA;IAAAC,IAAAA,SAAA,EAAA3B,kBAAAA;IAAA,GAAA,EAAA;IAAAK,IAAAA,QAAA,EAAA,CAAAmB,cAAA,CAAA,KAAA,EAAA;IAAAnB,MAAAA,QAAA,EAAAM,QAAAA;IAAA,KAAA,CAAA,EAAAa,cAAA,CAAA,KAAA,EAAA;IAAAnB,MAAAA,QAAA,EAAAG,OAAAA;IAAA,KAAA,CAAA,EAAAgB,cAAA,CAAA,KAAA,EAAA;IAAAnB,MAAAA,QAAA,EAAAI,SAAAA;IAAA,KAAA,CAAA,EAAAe,cAAA,CAAA,KAAA,EAAA;IAAAnB,MAAAA,QAAA,EAAAK,QAAAA;IAAA,KAAA,CAAA,CAAA;OAAA,CAAA,CAAA,CA1BF;;uCAuCI,CACIQ,SAAA,IAAAM,cAAA,CAAA,MAAA,EAAA;IAAAnB,IAAAA,QAAA,EAAA,GAAA;IAAA,GAAA,CADJ,EAEIc,UAAA,IAAAK,cAAA,CAAA,MAAA,EAAA;IAAAnB,IAAAA,QAAA,EAAA,GAAA;OAAA,CAFJ,EAGImB,cAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;IAAAC,IAAAA,SAAA,EAAAxB,cAAAA;IAAA,GAAA,EAAA;IAAAE,IAAAA,QAAA,EAAAU,UAAAA;IAAA,GAAA,CAAA,CAHJ,EAIIK,QAAA,IAAAI,cAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;IAAAC,IAAAA,SAAA,EAAAzB,kBAAAA;IAAA,GAAA,EAAA;IAAAG,IAAAA,QAAA,EAAAW,UAAAA;IAAA,GAAA,CAAA,CAJJ;IAQF,EAAA,OAAAY,eAAA,CAAAC,gBAAA,EAAAJ,MAAA,CAAAC,MAAA,CAAA;IAAAI,IAAAA,GAAA,EAAA,IAAA;IAAAC,IAAAA,mBAAA,EAAAd,eAAAA;IAAA,GAAA,EAAA;IAAAZ,IAAAA,QAAA,EAAA,CAAAa,SAAA,EAAAC,UAAA,EAAAK,cAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;IAAAC,MAAAA,SAAA,EAAA7B,oBAAAA;IAAA,KAAA,EAAA;IAAAO,MAAAA,QAAA,EAAAkB,QAAAA;IAAA,KAAA,CAAA,CAAA,EAAAH,QAAA,EAAAY,SAAA,CAAA;IAAA,GAAA,CAAA,CAAA,CAAA;IASF,CAAA;;IAEA,SAAAV,kBAAA,CAAAhB,QAAA,EAAAC,OAAA,EAAAK,QAAA,EAAAC,QAAA,EAAAC,MAAA,EAAAC,UAAA,EAAAC,UAAA,EAAA;;;;IAYE,EAAA,IAAAV,QAAA,EAAA;QACE2B,sBAAA,CAAAC,IAAA,CAAA,MAAA,CAAA,CAAA;;;;;;IAED,GAAA;;;;IAGD,EAAA,IAAA3B,OAAA,EAAA;QACE0B,sBAAA,CAAAC,IAAA,CAAA,MAAA,CAAA,CAAA;;;;;;IAED,GAAA;;IAEDD,EAAAA,sBAAA,CAAAC,IAAA,CAAA,KAAA,EAvBF;;;;IA0BE,EAAA,IAAAtB,QAAA,IAAAC,QAAA,IAAAC,MAAA,IAAAE,UAAA,EAAA;QACEiB,sBAAA,CAAAC,IAAA,CAAA,MAAA,CAAA,CAAA;QACAd,QAAA,GAAAQ,eAAA,CAAA,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAA;IAAAC,MAAAA,SAAA,EAAA1B,aAAAA;IAAA,KAAA,EAAA;UAAAI,QAAA,EAAA,CAAAmB,cAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;YAAAC,SAAA,EAAAQ,qBAAA,CAAA,CAAArC,oBAAA,EAAAc,QAAA,GAAAb,iBAAA,GAAA,EAAA,CAAA,CAAA;IAAA,OAAA,EAAA;IAAAM,QAAAA,QAAA,EAAAO,QAAAA;WAAA,CAAA,CAAA,EAAAY,cAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;YAAAC,SAAA,EAAAQ,qBAAA,CAAA,CAAArC,oBAAA,EAAAe,QAAA,GAAAd,iBAAA,GAAA,EAAA,CAAA,CAAA;IAAA,OAAA,EAAA;IAAAM,QAAAA,QAAA,EAAAQ,QAAAA;WAAA,CAAA,CAAA,EAAAW,cAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;YAAAC,SAAA,EAAAQ,qBAAA,CAAA,CAAArC,oBAAA,EAAAgB,MAAA,GAAAf,iBAAA,GAAA,EAAA,CAAA,CAAA;IAAA,OAAA,EAAA;IAAAM,QAAAA,QAAA,EAAAS,MAAAA;IAAA,OAAA,CAAA,CAAA,CAAA;IAAA,KAAA,CAAA,CAAA,CAAA;IAaD,GAAA;;;MAGD,MAAAO,YAAA,GAAAN,UAAA,IAAAC,UAAA,GAAA,IAAA,GAAA,KAAA,CAAA;;;;;;;;IAGF;;IC3MA,MAAM,YAAY,GAAqE;IACrF,IAAA,OAAO,EAAE,SAAS;IAClB,IAAA,SAAS,EAAE,SAAS;IACpB,IAAA,QAAQ,EAAE,WAAW;IACrB,IAAA,UAAU,EAAE,WAAW;IACvB,IAAA,QAAQ,EAAE,WAAW;IACrB,IAAA,QAAQ,EAAE,WAAW;KACtB,CAAC;IAEF,MAAM,SAAS,GAAkE;IAC/E,IAAA,OAAO,EAAE,IAAI;IACb,IAAA,SAAS,EAAE,IAAI;IACf,IAAA,QAAQ,EAAE,IAAI;IACd,IAAA,UAAU,EAAE,IAAI;IAChB,IAAA,QAAQ,EAAE,IAAI;IACd,IAAA,QAAQ,EAAE,IAAI;KACf,CAAC;IAEF,MAAM,cAAc,GAAuE;IACzF,IAAA,OAAO,EAAE,SAAS;IAClB,IAAA,SAAS,EAAE,CAAC;IACZ,IAAA,QAAQ,EAAE,CAAC;IACX,IAAA,UAAU,EAAE,CAAC;IACb,IAAA,QAAQ,EAAE,CAAC;IACX,IAAA,QAAQ,EAAE,CAAC;KACZ,CAAC;aAEc,YAAY,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAS,EAAA;IACvD,IAAA,MAAM,EAAE,UAAU,EAAE,GAAGoB,4CAAe,EAAE,CAAC;IAEzC,IAAA,MAAM,WAAW,IACfZ,cAAA,CAACa,SAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EACH,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,EAC9B,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,EACxB,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC,EAAA,EAAA,EAAA,QAAA,EACjC,QAAQ,EAAA,CAAA,CACJ,CACR,CAAC;IAEF,IAAA,OAAO,UAAU,GAAGb,sCAAK,QAAQ,EAAE,CAAC,EAAA,EAAA,EAAA,QAAA,EAAG,WAAW,EAAO,CAAA,CAAA,GAAG,WAAW,CAAC;IAC1E;;IC7BA,MAAAxB,gBAAA,GAAA,0BAAA,CAAA;IAKA,SAAAsC,kBAAA,CAAA;MAAA9B,OAAA;MAAAC,SAAA;MAAAC,QAAA;IAAAC,EAAAA,QAAAA;IAAA,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;IASA;;;;;;;;;;;;;"}

package/amd/ListView-3b9a3235.js

@@ -0,0 +1,16 @@
+/* @oracle/oraclejet-preact: 14.0.7 */
+define(['exports', 'preact/jsx-runtime', './PRIVATE_List', './List-26b59d92'], (function (exports, jsxRuntime, PRIVATE_List, List) { 'use strict';
+
+    /**
+     * Component that renders items as a flat list.
+     * This component is nom-virtualized and renders all rows provided in the data prop.
+     */
+    function ListView(props) {
+        return (jsxRuntime.jsx(List.List, Object.assign({ isVirtualized: false }, props, { children: props.children })));
+    }
+
+    exports.ListView = ListView;
+
+}));
+/*  */
+//# sourceMappingURL=ListView-3b9a3235.js.map

package/amd/{ListView-9ed346bf.js.map → ListView-3b9a3235.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ListView-9ed346bf.js","sources":["../../src/UNSAFE_ListView/ListView.tsx"],"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 { List } from '../PRIVATE_List';\nimport { ListProps } from './List.types';\n\n/**\n * Props for the ListView Component\n */\nexport type Props<K, D> = Pick<\n  ListProps<K, D>,\n  | 'accessibleSummary'\n  | 'children'\n  | 'currentKey'\n  | 'currentItemVariant'\n  | 'data'\n  | 'gridlines'\n  | 'onCurrentKeyChange'\n  | 'onItemAction'\n  | 'onLoadRange'\n  | 'onSelectionChange'\n  | 'selectedKeys'\n  | 'selectionMode'\n  | 'viewportConfig'\n>;\n\n/**\n * Component that renders items as a flat list.\n * This component is nom-virtualized and renders all rows provided in the data prop.\n */\nexport function ListView<K extends string | number, D>(props: Props<K, D>) {\n  return (\n    <List isVirtualized={false} {...props}>\n      {props.children}\n    </List>\n  );\n}\n"],"names":["props","_jsx","jsx","List","Object","assign","isVirtualized","children"],"mappings":"qHAkCM,SAAiDA,GACrD,OACEC,EAAAC,IAACC,EAAIA,KAAAC,OAAAC,OAAA,CAACC,eAAe,GAAWN,YAC7BA,EAAMO"}
+{"version":3,"file":"ListView-3b9a3235.js","sources":["../../src/UNSAFE_ListView/ListView.tsx"],"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 { List } from '../PRIVATE_List';\nimport { ListProps } from './List.types';\n\n/**\n * Props for the ListView Component\n */\nexport type Props<K, D> = Pick<\n  ListProps<K, D>,\n  | 'accessibleSummary'\n  | 'children'\n  | 'currentKey'\n  | 'currentItemVariant'\n  | 'data'\n  | 'gridlines'\n  | 'onCurrentKeyChange'\n  | 'onItemAction'\n  | 'onLoadRange'\n  | 'onSelectionChange'\n  | 'selectedKeys'\n  | 'selectionMode'\n  | 'viewportConfig'\n>;\n\n/**\n * Component that renders items as a flat list.\n * This component is nom-virtualized and renders all rows provided in the data prop.\n */\nexport function ListView<K extends string | number, D>(props: Props<K, D>) {\n  return (\n    <List isVirtualized={false} {...props}>\n      {props.children}\n    </List>\n  );\n}\n"],"names":["_jsx","List"],"mappings":";;;IA8BA;;;IAGG;IACG,SAAU,QAAQ,CAA+B,KAAkB,EAAA;IACvE,IAAA,QACEA,cAAA,CAACC,SAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,aAAa,EAAE,KAAK,EAAM,EAAA,KAAK,cAClC,KAAK,CAAC,QAAQ,EAAA,CAAA,CACV,EACP;IACJ;;;;;;;;;;;"}

package/amd/LoadMoreCollection-b7513141.js

@@ -0,0 +1,63 @@
+/* @oracle/oraclejet-preact: 14.0.7 */
+define(['exports', 'preact/jsx-runtime', 'preact/hooks', './PRIVATE_Collection', './hooks/UNSAFE_useViewportIntersect', './Collection-55b75a82'], (function (exports, jsxRuntime, hooks, PRIVATE_Collection, hooks_UNSAFE_useViewportIntersect, Collection) { 'use strict';
+
+    const isDataStateValid = (dataState) => {
+        return dataState && dataState.data && dataState.offset >= 0 && dataState.totalSize >= 0;
+    };
+    const DEFAULT_MARGIN = 1;
+    const DEFAULT_FETCH_SIZE = 25;
+    const LOADMORE_STYLE_CLASS = 'oj-collection-loadmore';
+    const LOAD_MORE_SELECTOR = `.${LOADMORE_STYLE_CLASS}`;
+    /**
+     * Component that only render items in the specified viewport.
+     * @param props
+     */
+    function LoadMoreCollection({ data, children, viewportConfig, onLoadRange, loadMoreIndicator, suggestions }) {
+        const rootRef = hooks.useRef(null);
+        const fetchSizeRef = hooks.useRef(-1);
+        // detect if viewport has changed and it needs to re-render based on a new range
+        hooks_UNSAFE_useViewportIntersect.useViewportIntersect(viewportConfig, DEFAULT_MARGIN, LOAD_MORE_SELECTOR, () => {
+            if (data) {
+                if (fetchSizeRef.current == null || fetchSizeRef.current <= 0) {
+                    fetchSizeRef.current = data.totalSize;
+                }
+                const fetchSize = fetchSizeRef.current && fetchSizeRef.current > 0
+                    ? fetchSizeRef.current
+                    : DEFAULT_FETCH_SIZE;
+                onLoadRange({
+                    offset: 0,
+                    count: data.totalSize + fetchSize
+                });
+            }
+        });
+        // override itemRenderer to adjust the index
+        const _getItemRenderer = (startIndex) => {
+            // returns a new render function
+            return (context) => {
+                const itemContext = {
+                    index: startIndex + context.index,
+                    data: context.data
+                };
+                return children(itemContext);
+            };
+        };
+        // if DataState is invalid (including not specified), just render blank
+        if (!data || !isDataStateValid(data)) {
+            return jsxRuntime.jsx("div", { ref: rootRef });
+        }
+        const dataState = data;
+        const rangeData = dataState.data;
+        const offset = dataState.offset;
+        const endIndex = offset + rangeData.length;
+        const itemCount = dataState.totalSize;
+        const renderLoadMore = loadMoreIndicator && dataState.sizePrecision === 'atLeast' && endIndex <= itemCount;
+        // might need to support elementType prop in the future to allow customization of what
+        // type of element to render for the root
+        return (jsxRuntime.jsxs("div", Object.assign({ ref: rootRef }, { children: [suggestions, jsxRuntime.jsx(Collection.Collection, Object.assign({ items: rangeData }, { children: _getItemRenderer(offset) })), renderLoadMore && jsxRuntime.jsx("div", Object.assign({ class: LOADMORE_STYLE_CLASS }, { children: loadMoreIndicator }))] })));
+    }
+
+    exports.LoadMoreCollection = LoadMoreCollection;
+
+}));
+/*  */
+//# sourceMappingURL=LoadMoreCollection-b7513141.js.map