@oracle/oraclejet-preact 15.1.1 → 15.1.3

package/es/CardGrid-b1011eff.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardGrid-b1011eff.js","sources":["../../src/UNSAFE_CardGrid/CardGridItem.tsx","../../src/UNSAFE_CardGrid/CardGrid.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 { ComponentChildren } from 'preact';\nimport { memo } from 'preact/compat';\nimport { useRef, useLayoutEffect, useMemo, StateUpdater } from 'preact/hooks';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { mergeRefs } from '../utils/PRIVATE_refUtils';\nimport { useId } from '../hooks/UNSAFE_useId';\nimport { useAnimation, UseAnimationConfig } from '../hooks/UNSAFE_useAnimation';\nimport { TabbableModeContext } from '../hooks/UNSAFE_useTabbableMode';\nimport { FocusTrap } from '../UNSAFE_FocusTrap';\nimport { SelectionMode } from '../UNSAFE_Collection';\nimport { multiVariantStyles, styles } from './themes/CardGridStyles.css';\n\nexport const ITEM_STYLE_CLASS = 'oj-cardgrid-item';\nexport const ITEM_SELECTOR = '.' + ITEM_STYLE_CLASS;\n\n/**\n * Props for the CardGridItem Component\n */\nexport type Props<K, D> = {\n  children: ComponentChildren;\n  itemKey: K;\n  itemIndex: number;\n  itemData: D;\n  isTabbable: boolean;\n  isFocused: boolean;\n  isFocusRingVisible: boolean;\n  isSelected: boolean;\n  selectionMode: SelectionMode;\n  initialAnimation?: 'slideUp' | 'slideDown';\n  setCardDimension?: StateUpdater<{ width: number; height: number }>;\n};\n\n/**\n * The internal component used to render a single item in CardGrid.\n */\nexport function CardGridItem<K extends string | number, D>({\n  children,\n  itemKey,\n  itemIndex,\n  isTabbable,\n  isFocused,\n  isFocusRingVisible,\n  isSelected,\n  selectionMode,\n  initialAnimation,\n  setCardDimension\n}: Props<K, D>) {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const variantClasses = multiVariantStyles({\n    itemFocused: isFocused && isFocusRingVisible ? 'isItemFocused' : 'isNotItemFocused',\n    itemInitialOpacity: initialAnimation ? 'isTransparent' : 'isNotTransparent'\n  });\n  const classes = classNames([ITEM_STYLE_CLASS, styles.itemStyle, variantClasses]);\n\n  // don't bubble Arrow Up/Down/Left/Right 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 (\n      isTabbable &&\n      (event.key === 'ArrowDown' ||\n        event.key === 'ArrowUp' ||\n        event.key === 'ArrowLeft' ||\n        event.key === 'ArrowRight')\n    ) {\n      event.stopPropagation();\n    }\n  };\n\n  useLayoutEffect(() => {\n    const firstCard = rootRef.current?.firstElementChild as HTMLElement;\n    if (setCardDimension && firstCard) {\n      setCardDimension({ width: firstCard.offsetWidth, height: firstCard.offsetHeight });\n    }\n  }, []);\n\n  // todo: issue track in JET-57681, we currently have two useAnimation() because the opacity and\n  // slide up/down have different durations, and the current API couldn't handle this case, we will\n  // update this once the API is updated\n\n  // animation for slide up/down\n  const { nodeRef: nodeRefSlide } = useAnimation<'slideUp' | 'slideDown' | 'none', HTMLDivElement>(\n    initialAnimation || 'none',\n    animationConfigSlide(itemIndex)\n  );\n  // animation for opacity change\n  const { nodeRef: nodeRefOpacity } = useAnimation<'opacity' | 'none', HTMLDivElement>(\n    (initialAnimation && 'opacity') || 'none',\n    animationConfigOpacity(itemIndex)\n  );\n\n  const itemRefs = useMemo(\n    () => mergeRefs(rootRef, nodeRefSlide, nodeRefOpacity),\n    // spot an issue when we click the cards during animation is processing, the cards would not finish\n    // the current animations and stay as what it is, e.g. leave itself as half transparent.\n    // add initialAnimation to the dependency to prevent this issue.\n    [rootRef, nodeRefSlide, nodeRefOpacity, initialAnimation]\n  );\n\n  return (\n    <div\n      id={useId()}\n      ref={itemRefs}\n      class={classes}\n      role=\"gridcell\"\n      data-oj-key={itemKey}\n      onKeyDown={handleKeyDown}\n      aria-selected={selectionMode === 'none' ? undefined : isSelected}\n      {...(typeof itemKey === 'number' && { 'data-oj-key-type': 'number' })}>\n      <TabbableModeContext.Provider value={{ isTabbable }}>\n        <FocusTrap isDisabled={!isTabbable} restoreFocusRef={false}>\n          {children}\n        </FocusTrap>\n      </TabbableModeContext.Provider>\n    </div>\n  );\n}\n\nconst animationConfigSlide = (\n  index: number\n): UseAnimationConfig<'slideUp' | 'slideDown' | 'none', HTMLDivElement> => {\n  return {\n    animationStates: {\n      slideUp: {\n        from: {\n          translateY: '50px'\n        },\n        to: {\n          translateY: '0px'\n        },\n        options: {\n          duration: 300,\n          delay: index * 50,\n          easing: [0, 0, 0.2, 1]\n        }\n      },\n      slideDown: {\n        from: {\n          translateY: '-50px'\n        },\n        to: {\n          translateY: '0'\n        },\n        options: {\n          duration: 300,\n          delay: index * 50,\n          easing: [0, 0, 0.2, 1]\n        }\n      }\n    },\n    isAnimatedOnMount: true\n  };\n};\n\nconst animationConfigOpacity = (\n  index: number\n): UseAnimationConfig<'opacity' | 'none', HTMLDivElement> => {\n  return {\n    animationStates: {\n      opacity: {\n        from: {\n          opacity: 0\n        },\n        to: {\n          opacity: 1\n        },\n        options: {\n          duration: 150,\n          delay: index * 50,\n          easing: 'linear'\n        }\n      }\n    },\n    isAnimatedOnMount: true\n  };\n};\n\nexport const MemoizeCardGridItem = memo(\n  CardGridItem,\n  <K, D>(prev: Props<K, D>, next: Props<K, D>) => {\n    if (prev && next) {\n      return (\n        prev.itemKey === next.itemKey &&\n        prev.itemIndex === next.itemIndex &&\n        prev.itemData === next.itemData &&\n        prev.isTabbable === next.isTabbable &&\n        prev.isFocused === next.isFocused &&\n        prev.isFocusRingVisible === next.isFocusRingVisible &&\n        prev.isSelected === next.isSelected &&\n        prev.initialAnimation === next.initialAnimation\n      );\n    }\n    return false;\n  }\n);\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren } from 'preact';\nimport { useRef, useCallback, useEffect, useState } from 'preact/hooks';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { containsKey, Keys, isKeyDefined } from '../utils/UNSAFE_keys';\nimport { Size } from '../utils/UNSAFE_size';\nimport {\n  getPrevNextKeyByCount,\n  getFirstVisibleKey,\n  getViewportConfig,\n  findElementByKey,\n  keyExtractor,\n  handleSelectionRange\n} from '../utils/PRIVATE_collectionUtils';\nimport { useId } from '../hooks/UNSAFE_useId';\nimport { useCurrentKey } from '../hooks/PRIVATE_useCurrentKey';\nimport { useCollectionFocusRing } from '../hooks/PRIVATE_useCollectionFocusRing';\nimport { useTabbableModeSet } from '../hooks/PRIVATE_useTabbableModeSet';\nimport { useSelection, SelectionRangeDetail } from '../hooks/PRIVATE_useSelection';\nimport { ViewportConfig } from '../hooks/UNSAFE_useViewportIntersect';\nimport {\n  ItemContext,\n  ListItemContext,\n  CurrentKeyDetail,\n  SelectionDetail,\n  SelectionMode\n} from '../UNSAFE_Collection';\nimport { Grid } from '../UNSAFE_Grid';\nimport { Selector } from '../UNSAFE_Selector';\nimport { Skeleton } from '../UNSAFE_Skeleton';\nimport { SkeletonContainer } from '../PRIVATE_List/SkeletonContainer';\nimport { LoadMoreCollection, LOADMORE_STYLE_CLASS } from '../PRIVATE_LoadMoreCollection';\nimport { MemoizeCardGridItem, ITEM_SELECTOR } from './CardGridItem';\nimport { styles } from './themes/CardGridStyles.css';\n\n/**\n * Props for the GradGrid Component, which consist of some props from ListView\n */\ntype CardGridProps<K, D> = {\n  /**\n   * An array of shaped data that provide information to this CardGrid.\n   * If the value is null, then CardGrid will show loading indicator until the value is set.\n   */\n  data: D[] | null;\n  /**\n   * Callback function to handle when viewport has changed, including the case\n   * where user scrolls to the end of the component and there are more items to load.\n   */\n  onLoadMore?: () => void;\n  /**\n   * A boolean that indicates whether there are still more data to load.\n   */\n  hasMore?: boolean;\n  /**\n   * A callback function to get the key for a given row\n   */\n  getRowKey: (data: D) => K;\n  /**\n   * A function to render each item\n   */\n  children: (context: ListItemContext<K, D>) => ComponentChildren;\n  /**\n   * The key of the item that currently have keyboard focus. Ignored if the current item is not\n   * currently in the viewport.\n   */\n  currentKey?: K;\n  /**\n   * Callback function to handle when current focused item has changed.  The function should\n   * update the currentKey prop with a new current key.\n   */\n  onCurrentKeyChange?: (detail: CurrentKeyDetail<K>) => void;\n  /**\n   * The type of selection behavior that is enabled on the CardGrid. This property controls the number\n   * of selections that can be made via selection gestures at any given time.\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * The keys of the current selected items in the CardGrid.\n   */\n  selectedKeys?: Keys<K>;\n  /**\n   * Callback function to handle when selection has changed.  The function should update\n   * the selectedKeys prop with a new set of selected keys.\n   */\n  onSelectionChange?: (detail: SelectionDetail<K>) => void;\n  /**\n   * The ViewportConfig currently contains only one property which allows application to specify what the scroller element should be.\n   * If not specified, then the root element of CardGrid itself will be the scroller element.\n   */\n  viewportConfig?: ViewportConfig;\n  /**\n   * An aria-label which defines a string value that labels this CardGrid.\n   * Either aria-label or aria-labelledby should be specified in order to make CardGrid accessible.\n   */\n  'aria-label'?: string;\n  /**\n   * An aria-labelledby which identifies the element(s) that labels this CardGrid.\n   * Either aria-label or aria-labelledby should be specified in order to make CardGrid accessible.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Specify animation when cards are initially rendered.\n   */\n  initialAnimation?: 'slideUp' | 'slideDown';\n  /**\n   * Size of the gutter between columns.\n   */\n  gutterSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n};\n\nexport function CardGrid<K extends string | number, D>({\n  children,\n  data,\n  onLoadMore = () => {},\n  hasMore = false,\n  getRowKey,\n  currentKey,\n  onCurrentKeyChange,\n  selectionMode = 'none',\n  selectedKeys = emptyKeys as Keys<K>,\n  onSelectionChange,\n  viewportConfig,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  initialAnimation = 'slideUp',\n  gutterSize = 'sm'\n}: CardGridProps<K, D>) {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  // tracking the anchor key which is used for shift+click selection\n  const anchorKey = useRef<K | undefined>();\n  // tracking pending current key in pointer down event\n  const pendingCurrentKey = useRef<K>();\n\n  const isInitialAnimation = useRef(true);\n  const [colCount, setColCount] = useState(0);\n  const [cardDimension, setCardDimension] = useState({ width: 0, height: 0 });\n\n  const gutterSizePX = gutterSizeMappings[gutterSize];\n  const gap = `${gutterSizePX / 4}x` as Size;\n  const gridTemplateColumns = cardDimension.width\n    ? `repeat(auto-fit, ${cardDimension.width}px)`\n    : undefined;\n  const gridProps = { gap, gridTemplateColumns };\n\n  const ariaMultiSelectable = selectionMode === 'none' ? undefined : selectionMode === 'multiple';\n  const ariaRowcount = hasMore || !data || colCount === 0 ? -1 : Math.ceil(data?.length / colCount);\n\n  /*****************************************************************************************/\n  /********************************* cardWidth and colCount ********************************/\n  /*****************************************************************************************/\n\n  // cards are fully rendered for the first time, only when cardWidth and colCount have defined and non-zero values\n  // for the first time, so the initial animation should not happen until this render.\n  useEffect(() => {\n    if (cardDimension.width && colCount) {\n      isInitialAnimation.current = false;\n    }\n  }, [cardDimension.width && colCount]);\n\n  const handleColCount = useCallback(\n    (rootWidth: number) => {\n      const newColCount = getColCount(\n        gutterSizePX,\n        cardDimension.width || DEFAULT_SKELETON_WIDTH,\n        rootWidth\n      );\n      if (newColCount > 0) {\n        setColCount(newColCount);\n      }\n    },\n    [gutterSizePX, cardDimension.width]\n  );\n\n  useEffect(() => {\n    const root = rootRef?.current;\n    if (root) {\n      handleColCount(root.offsetWidth);\n    }\n  }, [handleColCount]);\n\n  const handleResize = useCallback(\n    (entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        // update colCount during resize\n        handleColCount(entry.contentRect.width);\n      }\n    },\n    [handleColCount]\n  );\n\n  /**\n   * Set up resize observer and update the colCount, to ensure keyboard navigation is correct\n   * after the resize\n   */\n  useEffect(() => {\n    const root = rootRef.current;\n    if (root) {\n      const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n        handleResize(entries);\n      });\n      resizeObserver.observe(root);\n      return () => {\n        resizeObserver.unobserve(root);\n      };\n    }\n    return undefined;\n  }, [handleResize]);\n\n  /*****************************************************************************************/\n  /************************************* Tabbable Mode *************************************/\n  /*****************************************************************************************/\n\n  const cardGridContains = (elem: Element | null) => {\n    return !!rootRef.current?.contains(elem);\n  };\n\n  let pendingFocusRingChange = false;\n  const [isCurrentTabbableKey, tabbableModeProps] = useTabbableModeSet(\n    cardGridContains,\n    (element) => {\n      return keyExtractor(element, ITEM_SELECTOR) as K;\n    },\n    currentKey,\n    // handle clean-up on disabling of the mode\n    (target: EventTarget | null, isKeyboardEvent) => {\n      if (cardGridContains(target as Element)) {\n        // delay focus reset for keyboard disable so focus is reset to CardGrid 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      // otherwise target is not in list (including body, which target should be null in that case)\n    },\n    // set currentKey when mode is enabled\n    (key: K) => {\n      onCurrentKeyChange && onCurrentKeyChange({ value: key });\n    }\n  );\n\n  /*****************************************************************************************/\n  /********************************* Current Key and Focus *********************************/\n  /*****************************************************************************************/\n\n  const { currentKeyProps } = useCurrentKey(\n    (element) => keyExtractor(element, ITEM_SELECTOR),\n    selectionMode !== 'multiple',\n    // init a function every time to make sure we pass in the latest colCount.current,\n    // otherwise the new key might be wrong after resize\n    () => getPrevNextKeyByCount(data, getRowKey, currentKey, -colCount),\n    () => getPrevNextKeyByCount(data, getRowKey, currentKey, colCount),\n    () => getPrevNextKeyByCount(data, getRowKey, currentKey, -1),\n    () => getPrevNextKeyByCount(data, getRowKey, currentKey, 1),\n    currentKey,\n    onCurrentKeyChange\n  );\n\n  const [showFocusRing, focusRingProps] = useCollectionFocusRing(cardGridContains, [\n    'ArrowUp',\n    'ArrowDown',\n    'ArrowLeft',\n    'ArrowRight'\n  ]);\n\n  const handleInitialFocus = () => {\n    if (\n      !isKeyDefined(currentKey) &&\n      onCurrentKeyChange &&\n      isCurrentTabbableKey(undefined) &&\n      rootRef.current\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  };\n\n  /**\n   * Need to track pointer down element to set currentItem when initial focus happens\n   */\n  const handlePointerDown = (event: PointerEvent) => {\n    const key = keyExtractor(event.target as HTMLElement, ITEM_SELECTOR);\n    if (isKeyDefined(key)) {\n      pendingCurrentKey.current = key as K;\n    }\n  };\n\n  useEffect(() => {\n    if (currentKey != null && rootRef.current) {\n      const elem = findElementByKey(rootRef.current, currentKey, ITEM_SELECTOR);\n      if (elem) {\n        // make sure item is visible\n        elem.scrollIntoView({ block: 'nearest' });\n        const cell = elem.closest(`[role=gridcell]`);\n        if (cell) {\n          // update aria-activedescendant for screen reader\n          rootRef.current.setAttribute('aria-activedescendant', cell.id);\n        }\n      }\n    }\n    // listen to data because the current item would re-render when data is updated, i.e. the id\n    // of current item would be updated, so the currentKey itself couldn't guarantee the root has\n    // the latest aria-activedescendant\n  }, [currentKey, data]);\n\n  /*****************************************************************************************/\n  /*************************************** Selection ***************************************/\n  /*****************************************************************************************/\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, getRowKey);\n        // for non-virtualized CardGrid, value should always be an array\n        if (Array.isArray(value)) {\n          onSelectionChange({ value: { all: false, keys: new Set(value) }, target: null });\n        }\n      }\n    },\n    [data, onSelectionChange, onLoadMore]\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    false,\n    handleSelectionChange,\n    anchorKey.current,\n    currentKey,\n    (currentKey: K | undefined, isPrev: boolean) => () =>\n      getPrevNextKeyByCount(data, getRowKey, currentKey, isPrev ? -colCount : colCount),\n    (currentKey: K | undefined, isPrev: boolean) => () =>\n      getPrevNextKeyByCount(data, getRowKey, currentKey, isPrev ? -1 : 1),\n    (key: K) => {\n      if (rootRef.current) {\n        const elem = findElementByKey(rootRef.current, key, ITEM_SELECTOR);\n        if (elem) {\n          elem.scrollIntoView({ block: 'nearest' });\n        }\n      }\n    },\n    handleSelectionRangeChange\n  );\n\n  /*****************************************************************************************/\n  /************************************ Child Component ************************************/\n  /*****************************************************************************************/\n\n  const getItemContext = useCallback(\n    (context: ItemContext<D>) => {\n      const key = getRowKey(context.data);\n      const selectorRenderer =\n        selectionMode === 'multiple'\n          ? () => (\n              <Selector\n                onChange={onSelectionChange}\n                rowKey={key}\n                selectedKeys={selectedKeys}></Selector>\n            )\n          : undefined;\n\n      return {\n        index: context.index,\n        data: context.data,\n        metadata: { key: key },\n        selector: selectorRenderer,\n        isSelected: containsKey(selectedKeys, key)\n      };\n    },\n    [selectionMode, selectedKeys, onSelectionChange]\n  );\n\n  const childrenComponent = (context: ItemContext<D>) => {\n    const cardItemContext = getItemContext(context);\n    const isTabbable = isCurrentTabbableKey(cardItemContext.metadata.key);\n    const isFocused = currentKey === cardItemContext.metadata.key && !isTabbable;\n    const isFocusRingVisible = isFocused && showFocusRing && !pendingFocusRingChange;\n    const isSelected = cardItemContext.isSelected;\n    const cardGridFunc = (context: ListItemContext<K, D>) => (\n      <MemoizeCardGridItem\n        key={cardItemContext.metadata.key}\n        itemKey={cardItemContext.metadata.key}\n        itemIndex={cardItemContext.index}\n        itemData={cardItemContext.data}\n        isTabbable={isTabbable}\n        isFocused={isFocused}\n        isFocusRingVisible={isFocusRingVisible}\n        isSelected={isSelected}\n        selectionMode={selectionMode}\n        {...(isInitialAnimation.current && { initialAnimation })}\n        {...(context.index === 0 && { setCardDimension })}>\n        {children(context)}\n      </MemoizeCardGridItem>\n    );\n    return cardGridFunc(cardItemContext);\n  };\n\n  // todo: issue track in JET-57952, need a way to show the skeletons in keyboard navigation\n  const skeletons = findDefaultLoadMoreIndicator(\n    gridProps,\n    data?.length || 0,\n    colCount,\n    cardDimension.height\n  );\n\n  viewportConfig = getViewportConfig(rootRef, viewportConfig);\n  const collectionComponent = (\n    <div role=\"row\">\n      <Grid {...gridProps}>\n        <LoadMoreCollection\n          data={data}\n          hasMore={hasMore}\n          onLoadMore={onLoadMore}\n          loadMoreIndicator={skeletons}\n          loadMoreThreshold={gutterSizePX + 4} // gap size + padding\n          viewportConfig={viewportConfig}>\n          {childrenComponent}\n        </LoadMoreCollection>\n      </Grid>\n    </div>\n  );\n\n  return (\n    <div\n      {...mergeProps(tabbableModeProps, currentKeyProps, focusRingProps, selectionProps, {\n        onFocus: handleInitialFocus,\n        onPointerDown: handlePointerDown\n      })}\n      ref={rootRef}\n      role=\"grid\"\n      class={styles.baseStyle}\n      tabIndex={0}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-multiselectable={ariaMultiSelectable}\n      aria-rowcount={ariaRowcount}\n      aria-colcount={colCount}>\n      {data == null ? defaultLoadingIndicator(gridProps) : collectionComponent}\n    </div>\n  );\n}\n\nconst emptyKeys = { all: false, keys: new Set() };\n\n/**\n * A mapping of gutterSize to concrete size that can be passed into Grid component\n * (specifically, in the format of `${number}x`)\n */\nconst gutterSizeMappings: Record<string, number> = {\n  xs: 12,\n  sm: 16,\n  md: 24,\n  lg: 48,\n  xl: 64\n};\n\n// these are arbitrary values by now, might update them with definite values in the future\nconst DEFAULT_SKELETON_NUMBER = 25;\nconst DEFAULT_SKELETON_WIDTH = 260;\nconst DEFAULT_SKELETON_HEIGHT = 300;\n\n/**\n * A function that returns an array of skeletons based on count\n * @param count the number of skeletons\n */\nconst getSkeletonsByCount = (count: number, isUnique?: boolean, height?: number) =>\n  [...Array(count)].map(() => (\n    // this map function keeps generating the same copy of skeletons with same keys even with useId() hook,\n    // so combine id with time to make the key unique. create unique skeletons if needed, otherwise the\n    // animations won't start at the same time\n    <SkeletonContainer key={isUnique && useId() + new Date().getTime()} minimumCount={1}>\n      {() => {\n        return <Skeleton height={`calc(${height || DEFAULT_SKELETON_HEIGHT}px)` as Size} />;\n      }}\n    </SkeletonContainer>\n  ));\n\n/**\n * The default loading indicator will display 25 card skeletons\n * @param gridProps the Grid props\n */\nconst defaultLoadingIndicator = (gridProps: any) => (\n  <Grid {...gridProps}>{getSkeletonsByCount(DEFAULT_SKELETON_NUMBER)}</Grid>\n);\n\n/**\n * A function that will return the load more skeletons based on the number of columns and items, and return\n * the corresponding number of columns that is used to layout the skeletons.\n * @param gridProps the Grid props\n * @param totalCount the number of all items\n * @param colCount the number of columns in a row\n */\nconst findDefaultLoadMoreIndicator = (\n  gridProps: any,\n  totalCount: number,\n  colCount: number,\n  skeletonHeight: number\n): ComponentChildren => {\n  // if the number of columns is unknown, return nothing\n  if (!colCount) {\n    return undefined;\n  }\n\n  const skeletonGridProps = { ...gridProps };\n  if (colCount && !totalCount) {\n    skeletonGridProps.gridTemplateColumns = `repeat(auto-fit, ${DEFAULT_SKELETON_WIDTH}px)`;\n  }\n\n  const skeletons = [];\n  const gridColumns: number[] = [];\n\n  const firstCount = colCount - (totalCount % colCount);\n  if (firstCount > 0) {\n    const firstSkeletons = getSkeletonsByCount(firstCount, true, skeletonHeight);\n    skeletons.push(firstSkeletons);\n    gridColumns.push(firstCount);\n  }\n  const secondCount = colCount;\n  if (firstCount < secondCount) {\n    const secondSkeletons = getSkeletonsByCount(secondCount, true, skeletonHeight);\n    skeletons.push(secondSkeletons);\n    gridColumns.push(secondCount);\n  }\n\n  // only apply LOADMORE_STYLE_CLASS on the first row, to avoid onLoadMore\n  // get called multiple times\n  const skeletonRows = skeletons.map((s, i) => (\n    <div\n      {...(i == 0 && { class: LOADMORE_STYLE_CLASS })}\n      style={{ gridColumn: `span ${gridColumns[i]}` }}>\n      <Grid {...skeletonGridProps}>{s}</Grid>\n    </div>\n  ));\n  return skeletonRows;\n};\n\nconst getColCount = (gapWidth: number, cardWidth?: number, rootWidth?: number) => {\n  if (!cardWidth || !rootWidth) return 0;\n\n  // if we have n cards, we have n-1 gaps\n  const colCount = Math.floor((rootWidth + gapWidth) / (gapWidth + cardWidth));\n  return colCount;\n};\n"],"names":["_jsx"],"mappings":"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"}

package/es/CheckboxRadioContext-eaa6cc0c.js

@@ -0,0 +1,16 @@
+/* @oracle/oraclejet-preact: 15.1.3 */
+import { createContext } from 'preact';
+import { useContext } from 'preact/hooks';
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+const CheckboxRadioContext = createContext({});
+const useCheckboxRadioContext = () => useContext(CheckboxRadioContext);
+
+export { CheckboxRadioContext as C, useCheckboxRadioContext as u };
+//# sourceMappingURL=CheckboxRadioContext-eaa6cc0c.js.map

package/es/CheckboxRadioContext-eaa6cc0c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxRadioContext-eaa6cc0c.js","sources":["../../src/PRIVATE_CheckboxRadioField/CheckboxRadioContext.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 */\n\nimport { createContext } from 'preact';\nimport { useContext } from 'preact/hooks';\n\ntype CheckboxRadioContextValue = {\n  isFocusRingShown?: boolean;\n};\n\nconst CheckboxRadioContext = createContext<CheckboxRadioContextValue>(\n  {} as CheckboxRadioContextValue\n);\nconst useCheckboxRadioContext = () => useContext(CheckboxRadioContext);\n\nexport { CheckboxRadioContext, useCheckboxRadioContext };\n"],"names":[],"mappings":";;;;AAAA;;;;;;AAMG;AASH,MAAM,oBAAoB,GAAG,aAAa,CACxC,EAA+B,EAC/B;AACI,MAAA,uBAAuB,GAAG,MAAM,UAAU,CAAC,oBAAoB;;;;"}

package/es/Chip-9fb9c9f9.js

@@ -0,0 +1,28 @@
+/* @oracle/oraclejet-preact: 15.1.3 */
+import { jsx } from 'preact/jsx-runtime';
+import { useActionable } from './hooks/UNSAFE_useActionable.js';
+import { useCallback } from 'preact/hooks';
+import { useTabbableMode } from './hooks/UNSAFE_useTabbableMode.js';
+import { multiVariantStyles } from './UNSAFE_Chip/themes/ChipStyles.css.js';
+import { useInteractionStyle } from './hooks/UNSAFE_useInteractionStyle.js';
+import { mergeProps } from './utils/UNSAFE_mergeProps.js';
+
+function Chip({ isSelected, isDisabled, 'aria-label': accessibleLabel, children, onToggle }) {
+    const handleAction = useCallback(() => {
+        onToggle?.({ previousValue: isSelected, value: !isSelected });
+    }, [isSelected, onToggle]);
+    const { actionableProps } = useActionable(handleAction);
+    const { interactionProps, applyActiveStyle, applyHoverStyle, applyPseudoHoverStyle } = useInteractionStyle();
+    const mergedProps = mergeProps(actionableProps, interactionProps);
+    const classes = multiVariantStyles({
+        disabled: isDisabled ? 'isDisabled' : 'notDisabled',
+        hover: applyHoverStyle && !isDisabled && !isSelected ? 'isHover' : 'notHover',
+        pseudoHover: applyPseudoHoverStyle && !isDisabled && !isSelected ? 'isPseudoHover' : 'notPseudoHover',
+        active: isSelected || applyActiveStyle ? 'isActive' : 'notActive'
+    });
+    const { isTabbable } = useTabbableMode();
+    return isDisabled ? (jsx("div", { class: classes, children: children })) : (jsx("div", { ...mergedProps, class: classes, tabIndex: isTabbable ? 0 : -1, "aria-label": accessibleLabel, role: "switch", "aria-checked": isSelected ? 'true' : 'false', children: children }));
+}
+
+export { Chip as C };
+//# sourceMappingURL=Chip-9fb9c9f9.js.map

package/es/Chip-9fb9c9f9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip-9fb9c9f9.js","sources":["../../src/UNSAFE_Chip/Chip.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 { useActionable } from '../hooks/UNSAFE_useActionable';\nimport { useCallback } from 'preact/hooks';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\nimport { multiVariantStyles } from './themes/ChipStyles.css';\nimport { useInteractionStyle } from '../hooks/UNSAFE_useInteractionStyle';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\n\ntype SelectedChangeDetail = { previousValue?: boolean; value?: boolean };\n\ntype Props = {\n  /**\n   * Specifies if the chip component is selected.\n   */\n  isSelected?: boolean;\n  /**\n   * Disables the component.\n   */\n  isDisabled?: boolean;\n  /**\n   * Specifies some screen reader text.\n   */\n  'aria-label'?: string;\n  children: string;\n  /**\n   * Triggered when a chip is clickable, whether by keyboard, mouse, or touch events.\n   */\n  onToggle?: (detail: SelectedChangeDetail) => void;\n  //\n};\n\nexport function Chip({\n  isSelected,\n  isDisabled,\n  'aria-label': accessibleLabel,\n  children,\n  onToggle\n}: Props) {\n  const handleAction = useCallback(() => {\n    onToggle?.({ previousValue: isSelected, value: !isSelected });\n  }, [isSelected, onToggle]);\n  const { actionableProps } = useActionable(handleAction);\n  const { interactionProps, applyActiveStyle, applyHoverStyle, applyPseudoHoverStyle } =\n    useInteractionStyle();\n\n  const mergedProps = mergeProps(actionableProps, interactionProps);\n\n  const classes = multiVariantStyles({\n    disabled: isDisabled ? 'isDisabled' : 'notDisabled',\n    hover: applyHoverStyle && !isDisabled && !isSelected ? 'isHover' : 'notHover',\n    pseudoHover:\n      applyPseudoHoverStyle && !isDisabled && !isSelected ? 'isPseudoHover' : 'notPseudoHover',\n    active: isSelected || applyActiveStyle ? 'isActive' : 'notActive'\n  });\n\n  const { isTabbable } = useTabbableMode();\n\n  return isDisabled ? (\n    <div class={classes}>{children}</div>\n  ) : (\n    <div\n      {...mergedProps}\n      class={classes}\n      tabIndex={isTabbable ? 0 : -1}\n      aria-label={accessibleLabel}\n      role=\"switch\"\n      aria-checked={isSelected ? 'true' : 'false'}>\n      {children}\n    </div>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAqCgB,SAAA,IAAI,CAAC,EACnB,UAAU,EACV,UAAU,EACV,YAAY,EAAE,eAAe,EAC7B,QAAQ,EACR,QAAQ,EACF,EAAA;AACN,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAK;AACpC,QAAA,QAAQ,GAAG,EAAE,aAAa,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,UAAU,EAAE,CAAC,CAAC;AAChE,KAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC3B,MAAM,EAAE,eAAe,EAAE,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;AACxD,IAAA,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,EAAE,qBAAqB,EAAE,GAClF,mBAAmB,EAAE,CAAC;IAExB,MAAM,WAAW,GAAG,UAAU,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IAElE,MAAM,OAAO,GAAG,kBAAkB,CAAC;QACjC,QAAQ,EAAE,UAAU,GAAG,YAAY,GAAG,aAAa;AACnD,QAAA,KAAK,EAAE,eAAe,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,GAAG,SAAS,GAAG,UAAU;AAC7E,QAAA,WAAW,EACT,qBAAqB,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,GAAG,eAAe,GAAG,gBAAgB;QAC1F,MAAM,EAAE,UAAU,IAAI,gBAAgB,GAAG,UAAU,GAAG,WAAW;AAClE,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IAEzC,OAAO,UAAU,IACfA,GAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EAAG,QAAA,EAAA,QAAQ,EAAO,CAAA,KAErCA,GAAA,CAAA,KAAA,EAAA,EAAA,GACM,WAAW,EACf,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC,EAAA,YAAA,EACjB,eAAe,EAC3B,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,UAAU,GAAG,MAAM,GAAG,OAAO,EAC1C,QAAA,EAAA,QAAQ,EACL,CAAA,CACP,CAAC;AACJ;;;;"}

package/es/ClearIcon-6388629b.js

@@ -0,0 +1,22 @@
+/* @oracle/oraclejet-preact: 15.1.3 */
+import { jsx } from 'preact/jsx-runtime';
+import { useCallback } from 'preact/hooks';
+import { usePress } from './hooks/UNSAFE_usePress.js';
+import { useTranslationBundle } from './hooks/UNSAFE_useTranslationBundle.js';
+import './ClearIconStyles.styles.css';
+
+var clearIconStyles = 'ClearIconStyles_clearIconStyles__8wwy0m0';
+
+const noop = () => { };
+function ClearIcon({ onClick }) {
+    const killEvent = useCallback((event) => {
+        event.preventDefault();
+    }, []);
+    const { pressProps } = usePress(onClick ?? noop);
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const clearStr = translations.formControl_clear();
+    return (jsx("span", { "aria-hidden": "true", class: clearIconStyles, tabIndex: -1, onMouseDown: killEvent, title: clearStr, ...pressProps, children: jsx("svg", { height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "m12 1c6.065 0 11 4.935 11 11s-4.935 11-11 11-11-4.935-11-11 4.935-11 11-11zm3.4979817 6-3.4979817 3.498-3.49798173-3.498-1.50201827 1.50201827 3.498 3.49798173-3.498 3.4979817 1.50201827 1.5020183 3.49798173-3.498 3.4979817 3.498 1.5020183-1.5020183-3.498-3.4979817 3.498-3.49798173z", fill: "#100f0e", "fill-rule": "evenodd" }) }) }));
+}
+
+export { ClearIcon as C };
+//# sourceMappingURL=ClearIcon-6388629b.js.map

package/es/ClearIcon-6388629b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearIcon-6388629b.js","sources":["../../src/UNSAFE_InputText/ClearIcon.tsx"],"sourcesContent":["import { useCallback } from 'preact/hooks';\nimport { usePress } from '../hooks/UNSAFE_usePress';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport { clearIconStyles } from './ClearIconStyles.css';\n\ntype Props = {\n  onClick?: () => void;\n};\n\nconst noop = () => {};\n\nexport function ClearIcon({ onClick }: Props) {\n  const killEvent = useCallback((event: Event) => {\n    event.preventDefault();\n  }, []);\n  const { pressProps } = usePress(onClick ?? noop);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const clearStr = translations.formControl_clear();\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      class={clearIconStyles}\n      tabIndex={-1}\n      onMouseDown={killEvent}\n      title={clearStr}\n      {...pressProps}>\n      <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"m12 1c6.065 0 11 4.935 11 11s-4.935 11-11 11-11-4.935-11-11 4.935-11 11-11zm3.4979817 6-3.4979817 3.498-3.49798173-3.498-1.50201827 1.50201827 3.498 3.49798173-3.498 3.4979817 1.50201827 1.5020183 3.49798173-3.498 3.4979817 3.498 1.5020183-1.5020183-3.498-3.4979817 3.498-3.49798173z\"\n          fill=\"#100f0e\"\n          fill-rule=\"evenodd\"\n        />\n      </svg>\n    </span>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAUA,MAAM,IAAI,GAAG,MAAK,GAAG,CAAC;AAEN,SAAA,SAAS,CAAC,EAAE,OAAO,EAAS,EAAA;AAC1C,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,KAAY,KAAI;QAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC;AACjD,IAAA,MAAM,YAAY,GAAG,oBAAoB,CAAa,0BAA0B,CAAC,CAAC;AAClF,IAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,iBAAiB,EAAE,CAAC;IAElD,QACEA,GACc,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,MAAM,EAClB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,CAAC,CAAC,EACZ,WAAW,EAAE,SAAS,EACtB,KAAK,EAAE,QAAQ,EAAA,GACX,UAAU,EAAA,QAAA,EACdA,GAAK,CAAA,KAAA,EAAA,EAAA,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAC,4BAA4B,EAChF,QAAA,EAAAA,GAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,6RAA6R,EAC/R,IAAI,EAAC,SAAS,EACJ,WAAA,EAAA,SAAS,EACnB,CAAA,EAAA,CACE,EACD,CAAA,EACP;AACJ;;;;"}

package/es/Collapsible-0c18414d.js

@@ -0,0 +1,199 @@
+/* @oracle/oraclejet-preact: 15.1.3 */
+import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'preact/hooks';
+import { useId } from './hooks/UNSAFE_useId.js';
+import { Fragment } from 'preact';
+import './utils/UNSAFE_classNames.js';
+import { useComponentTheme } from './hooks/UNSAFE_useComponentTheme.js';
+import './UNSAFE_Flex.js';
+import './UNSAFE_Divider.js';
+import './PRIVATE_ThemedIcons/ExpandIcon.js';
+import { CollapseIcon } from './PRIVATE_ThemedIcons/CollapseIcon.js';
+import './PRIVATE_ThemedIcons/CollapseUpIcon.js';
+import { S as SvgChevronDown } from './index-7e62fa17.js';
+import { S as SvgChevronUp } from './index-51b9804e.js';
+import { usePress } from './hooks/UNSAFE_usePress.js';
+import { CollapsibleRedwoodTheme } from './UNSAFE_Collapsible/themes/redwood/CollapsibleTheme.js';
+import { c as classNames } from './classNames-bd44965c.js';
+import { F as Flex } from './Flex-200101e3.js';
+import { D as Divider } from './Divider-4810243f.js';
+import './hooks/UNSAFE_useAnimation.js';
+import { u as useAnimation } from './useAnimation-f6453e4b.js';
+
+/**
+ * Header icon subcomponent
+ */
+const CollapsibleHeaderIcon = ({ isExpanded, isDisabled, iconPosition }) => {
+    const color = isDisabled ? 'disabled' : 'primary';
+    const startIcon = iconPosition === 'start' && isExpanded ? SvgChevronDown : CollapseIcon;
+    const endIcon = iconPosition === 'end' && isExpanded ? SvgChevronUp : SvgChevronDown;
+    const Icon = iconPosition === 'start' ? startIcon : endIcon;
+    return jsx(Icon, { size: "6x", color: color });
+};
+
+/**
+ * Header subcomponent
+ */
+const CollapsibleHeader = ({ children, id, contentId, isDisabled, isExpanded, iconPosition, variant = 'basic', toggleHandler, accessibleLabel, accessibleLabelId }) => {
+    const [hasFocus, setFocus] = useState(false);
+    const isMouseDown = useRef(false);
+    const { classes, styles } = useComponentTheme(CollapsibleRedwoodTheme, {
+        disabled: isDisabled ? 'isDisabled' : 'notDisabled',
+        divider: variant === 'horizontal-rule' ? 'hasDivider' : 'noDivider',
+        focused: hasFocus ? 'isFocused' : 'notFocused'
+    });
+    const childrenClasses = classNames([
+        styles.headerChildrenStyle,
+        iconPosition === 'end' && styles.iconEndStyle,
+        iconPosition === 'start' && styles.iconStartStyle
+    ]);
+    const pressHandler = useCallback((event) => {
+        toggleHandler(event.target);
+        // if the header has focus highlight and the toggle was caused by a pointer action,
+        // remove focus highlight from the header div
+        // the test environment may not support PointerEvent, make sure it is supported
+        if (hasFocus) {
+            const hasPointerEvent = window && 'PointerEvent' in window;
+            if ((hasPointerEvent && event instanceof PointerEvent) || event instanceof MouseEvent) {
+                setFocus(false);
+            }
+        }
+    }, [toggleHandler]);
+    const { pressProps } = usePress(pressHandler, {
+        isDisabled,
+        isRepeat: false
+    });
+    // if focused, we want to render the focus highlight on the collapsible header div
+    const onFocus = useCallback((event) => {
+        if (event.type === 'focusin' && !isMouseDown.current) {
+            setFocus(true);
+        }
+        else {
+            setFocus(false);
+        }
+    }, []);
+    const mouseDownHandler = () => {
+        isMouseDown.current = true;
+    };
+    const mouseUpHandler = () => {
+        isMouseDown.current = false;
+    };
+    // Resolve accessible label. By default, the expand button is labelled by the header content.
+    // If accessibleLabel or accessibleLabeleId is specified, they get used instead.
+    const ariaLabelProp = accessibleLabel
+        ? { 'aria-label': accessibleLabel }
+        : accessibleLabelId
+            ? { 'aria-labelledby': accessibleLabelId }
+            : { 'aria-labelledby': id };
+    const getHeader = () => (jsxs(Fragment, { children: [iconPosition === 'end' && jsx("div", { className: childrenClasses, children: children }), jsx("div", { tabIndex: 0, role: 'button', "aria-controls": contentId, "aria-expanded": isExpanded, onFocus: onFocus, onBlur: onFocus, onMouseDown: mouseDownHandler, onMouseUp: mouseUpHandler, className: styles.chevronStyle, ...ariaLabelProp, children: jsx(CollapsibleHeaderIcon, { iconPosition: iconPosition, isExpanded: isExpanded, isDisabled: isDisabled }) }), iconPosition === 'start' && jsx("div", { className: childrenClasses, children: children })] }));
+    return (jsxs(Fragment$1, { children: [jsx("div", { id: id, className: classes, ...pressProps, children: jsx(Flex, { align: "center", justify: iconPosition === 'start' ? 'start' : 'between', children: getHeader() }) }), variant === 'horizontal-rule' && jsx(Divider, {})] }));
+};
+
+const CollapsibleContent = ({ children, id, isExpanded, onTransitionEnd }) => {
+    const [state, setState] = useState(isExpanded ? 'expanding' : 'unmounted');
+    const { styles } = useComponentTheme(CollapsibleRedwoodTheme);
+    /**
+     * 1. On initial render, Preact sets style.maxHeight field to 0 or 'none'.
+     * 2. During expanding animation, useAnimation hook uses WAAPI to animate the maxHeight out
+     *    to the expanded value.
+     * 3. On subsequent re-renders, Preact does never updates the style.maxHeight value
+     *    because even though we are telling Preact that maxHeight should be 0 or 'none', Preact
+     *    considers the maxHeight value is 0 or 'none' as it is not aware that we changed this value
+     *    in step 2. So from Preact's perspective there is no difference.
+     */
+    const contentInitialStyle = useRef({
+        overflowY: 'hidden',
+        maxHeight: isExpanded ? 'none' : '0'
+    });
+    useEffect(() => {
+        // Ignore state update on initial render
+        if (state === 'unmounted' && !isExpanded) {
+            return;
+        }
+        setState(isExpanded ? 'expanding' : 'collapsing');
+    }, [isExpanded, state]);
+    const { nodeRef } = useAnimation(state, {
+        animationStates,
+        onAnimationEnd: ({ animationState }) => {
+            if (animationState === 'collapsing') {
+                setState('unmounted');
+            }
+            onTransitionEnd?.();
+        }
+    });
+    return (jsx("div", { className: styles.contentChildrenStyle, ref: nodeRef, id: id, tabIndex: -1, style: contentInitialStyle.current, "aria-hidden": !isExpanded || undefined, children: state !== 'unmounted' && children }));
+};
+/**
+ * The transition from collapsed to expanded works as follows:
+ * 1. When the component is initially rendered in the collapsed state, we
+ *    explicitly set maxHeight and overflowY from "to" configuration.
+ * 2. When the expanded prop changes from false to true, we first mount the content children.
+ * 3. Once this is mounted we trigger an animation updating animationState value of useAnimationHook.
+ * 4. Configuration is represented inside hook. Passed config depends if previous animation was completed or not.
+ *    We could check that based on node.style.maxHeight.
+ *
+ * The transition from expanded to collapsed is similar:
+ * 1. We trigger an animation updating animationState value of useAnimationHook.
+ * 2. Once animation is completed, with the help of end config,we set max-Height as 'none'.
+ *    This will allow us to keep adding content.
+ * 3. Once this is done, onAnimationEnd is called(as 'from collapsed to expanded"). Here, content children are unmouunted.
+ */
+const animationStates = {
+    expanding: (node) => ({
+        to: {
+            maxHeight: `${node.scrollHeight}px`
+        },
+        options: {
+            duration: 400
+        },
+        end: {
+            maxHeight: 'none'
+        }
+    }),
+    collapsing: (node) => ({
+        ...(node.style.maxHeight === 'none' && {
+            from: {
+                maxHeight: `${node.scrollHeight}px`
+            }
+        }),
+        to: {
+            maxHeight: '0'
+        },
+        options: {
+            duration: 400
+        }
+    })
+};
+
+/**
+ * A collapsible displays a header that can be expanded to show its content.
+ */
+const Collapsible = ({ header, children, isDisabled = false, isExpanded = false, iconPosition = 'start', variant = 'basic', onToggle, onTransitionEnd, 'aria-label': accessibleLabel, 'aria-labelledby': accessibleLabelId }) => {
+    const uniqueID = useId();
+    const headerId = `oj-collapsible-header-${uniqueID}`;
+    const contentId = `oj-collapsible-content-${uniqueID}`;
+    /**
+     * Function handling toggle and invoking callback for collapsing/expanding
+     */
+    const toggleHandler = useCallback((target) => {
+        if (isDisabled) {
+            return;
+        }
+        onToggle?.({
+            value: !isExpanded,
+            target
+        });
+    }, [isDisabled, onToggle, isExpanded]);
+    /**
+     * Function that is triggerd when animation ends
+     */
+    const transitionEndHandler = useCallback(() => {
+        onTransitionEnd?.({
+            value: isExpanded
+        });
+    }, [onTransitionEnd, isExpanded]);
+    return (jsxs(Fragment$1, { children: [jsx(CollapsibleHeader, { id: headerId, contentId: contentId, toggleHandler: toggleHandler, isDisabled: isDisabled, isExpanded: isExpanded, iconPosition: iconPosition, variant: variant, accessibleLabel: accessibleLabel, accessibleLabelId: accessibleLabelId, children: header }), jsx(CollapsibleContent, { id: contentId, isExpanded: isExpanded, onTransitionEnd: transitionEndHandler, children: children })] }));
+};
+
+export { Collapsible as C };
+//# sourceMappingURL=Collapsible-0c18414d.js.map

package/es/Collapsible-0c18414d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible-0c18414d.js","sources":["../../src/UNSAFE_Collapsible/CollapsibleHeaderIcon.tsx","../../src/UNSAFE_Collapsible/CollapsibleHeader.tsx","../../src/UNSAFE_Collapsible/CollapsibleContent.tsx","../../src/UNSAFE_Collapsible/Collapsible.tsx"],"sourcesContent":["import { ExpandIcon } from '../PRIVATE_ThemedIcons/ExpandIcon';\nimport { CollapseIcon } from '../PRIVATE_ThemedIcons/CollapseIcon';\nimport { CollapseUpIcon } from '../PRIVATE_ThemedIcons/CollapseUpIcon';\n\ntype IconProps = {\n  isExpanded: boolean;\n  isDisabled?: boolean;\n  iconPosition?: 'start' | 'end';\n};\n\n/**\n * Header icon subcomponent\n */\nexport const CollapsibleHeaderIcon = ({ isExpanded, isDisabled, iconPosition }: IconProps) => {\n  const color = isDisabled ? 'disabled' : 'primary';\n  const startIcon = iconPosition === 'start' && isExpanded ? ExpandIcon : CollapseIcon;\n  const endIcon = iconPosition === 'end' && isExpanded ? CollapseUpIcon : ExpandIcon;\n  const Icon = iconPosition === 'start' ? startIcon : endIcon;\n\n  return <Icon size=\"6x\" color={color} />;\n};\n","import { Fragment } from 'preact';\nimport { useCallback, useState, useRef } from 'preact/hooks';\n\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { CollapsibleVariantOptions, CollapsibleStyles } from './themes/CollapsibleStyles.css';\n\nimport { Flex } from '../UNSAFE_Flex';\nimport { Divider } from '../UNSAFE_Divider';\nimport { CollapsibleHeaderIcon } from './CollapsibleHeaderIcon';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\nimport { usePress } from '../hooks/UNSAFE_usePress';\nimport { CollapsibleRedwoodTheme } from './themes/redwood/CollapsibleTheme';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'id' | 'children'>;\n\ntype HeaderProps = IntrinsicProps & {\n  id: string;\n  contentId: string;\n  isDisabled: boolean;\n  isExpanded: boolean;\n  iconPosition?: 'start' | 'end';\n  variant?: 'basic' | 'horizontal-rule';\n  toggleHandler: (target: EventTarget | null) => void;\n  accessibleLabel?: string;\n  accessibleLabelId?: string;\n};\n\n/**\n * Header subcomponent\n */\n\nexport const CollapsibleHeader = ({\n  children,\n  id,\n  contentId,\n  isDisabled,\n  isExpanded,\n  iconPosition,\n  variant = 'basic',\n  toggleHandler,\n  accessibleLabel,\n  accessibleLabelId\n}: HeaderProps) => {\n  const [hasFocus, setFocus] = useState<boolean>(false);\n  const isMouseDown = useRef<boolean>(false);\n\n  const { classes, styles } = useComponentTheme<CollapsibleVariantOptions, CollapsibleStyles>(\n    CollapsibleRedwoodTheme,\n    {\n      disabled: isDisabled ? 'isDisabled' : 'notDisabled',\n      divider: variant === 'horizontal-rule' ? 'hasDivider' : 'noDivider',\n      focused: hasFocus ? 'isFocused' : 'notFocused'\n    }\n  );\n\n  const childrenClasses = classNames([\n    styles.headerChildrenStyle,\n    iconPosition === 'end' && styles.iconEndStyle,\n    iconPosition === 'start' && styles.iconStartStyle\n  ]);\n\n  const pressHandler = useCallback(\n    (event: Event) => {\n      toggleHandler(event.target);\n      // if the header has focus highlight and the toggle was caused by a pointer action,\n      // remove focus highlight from the header div\n      // the test environment may not support PointerEvent, make sure it is supported\n      if (hasFocus) {\n        const hasPointerEvent = window && 'PointerEvent' in window;\n        if ((hasPointerEvent && event instanceof PointerEvent) || event instanceof MouseEvent) {\n          setFocus(false);\n        }\n      }\n    },\n    [toggleHandler]\n  );\n\n  const { pressProps } = usePress(pressHandler, {\n    isDisabled,\n    isRepeat: false\n  });\n\n  // if focused, we want to render the focus highlight on the collapsible header div\n  const onFocus = useCallback((event: Event) => {\n    if (event.type === 'focusin' && !isMouseDown.current) {\n      setFocus(true);\n    } else {\n      setFocus(false);\n    }\n  }, []);\n\n  const mouseDownHandler = () => {\n    isMouseDown.current = true;\n  };\n\n  const mouseUpHandler = () => {\n    isMouseDown.current = false;\n  };\n\n  // Resolve accessible label. By default, the expand button is labelled by the header content.\n  // If accessibleLabel or accessibleLabeleId is specified, they get used instead.\n  const ariaLabelProp = accessibleLabel\n    ? { 'aria-label': accessibleLabel }\n    : accessibleLabelId\n    ? { 'aria-labelledby': accessibleLabelId }\n    : { 'aria-labelledby': id };\n\n  const getHeader = () => (\n    <Fragment>\n      {iconPosition === 'end' && <div className={childrenClasses}>{children}</div>}\n      <div\n        tabIndex={0}\n        role={'button'}\n        aria-controls={contentId}\n        aria-expanded={isExpanded}\n        onFocus={onFocus}\n        onBlur={onFocus}\n        onMouseDown={mouseDownHandler}\n        onMouseUp={mouseUpHandler}\n        className={styles.chevronStyle}\n        {...ariaLabelProp}>\n        <CollapsibleHeaderIcon\n          iconPosition={iconPosition}\n          isExpanded={isExpanded}\n          isDisabled={isDisabled}\n        />\n      </div>\n      {iconPosition === 'start' && <div className={childrenClasses}>{children}</div>}\n    </Fragment>\n  );\n\n  return (\n    <>\n      <div id={id} className={classes} {...pressProps}>\n        <Flex align=\"center\" justify={iconPosition === 'start' ? 'start' : 'between'}>\n          {getHeader()}\n        </Flex>\n      </div>\n      {variant === 'horizontal-rule' && <Divider />}\n    </>\n  );\n};\n","import { JSX } from 'preact';\nimport { useState, useEffect, useRef } from 'preact/hooks';\nimport { useAnimation, UseAnimationConfig } from '../hooks/UNSAFE_useAnimation';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { CollapsibleStyles } from './themes/CollapsibleStyles.css';\n\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\nimport { CollapsibleRedwoodTheme } from './themes/redwood/CollapsibleTheme';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children'>;\n\ntype ContentProps = IntrinsicProps & {\n  id: string;\n  isExpanded: boolean;\n  onTransitionEnd: () => void;\n};\n\n/**\n * The 'collapsing' and 'expanding' states are related to the animation. The 'unmounted' state\n * is used for conditional rendering. In this state, the Collapsible content is completely removed\n * from the DOM. The 'unmounted' state is set either as an initial state or when collapsing\n * animation ends.\n */\ntype Status = 'collapsing' | 'expanding' | 'unmounted';\n\nexport const CollapsibleContent = ({ children, id, isExpanded, onTransitionEnd }: ContentProps) => {\n  const [state, setState] = useState<Status>(isExpanded ? 'expanding' : 'unmounted');\n\n  const { styles } = useComponentTheme<never, CollapsibleStyles>(CollapsibleRedwoodTheme);\n\n  /**\n   * 1. On initial render, Preact sets style.maxHeight field to 0 or 'none'.\n   * 2. During expanding animation, useAnimation hook uses WAAPI to animate the maxHeight out\n   *    to the expanded value.\n   * 3. On subsequent re-renders, Preact does never updates the style.maxHeight value\n   *    because even though we are telling Preact that maxHeight should be 0 or 'none', Preact\n   *    considers the maxHeight value is 0 or 'none' as it is not aware that we changed this value\n   *    in step 2. So from Preact's perspective there is no difference.\n   */\n  const contentInitialStyle = useRef<JSX.CSSProperties>({\n    overflowY: 'hidden',\n    maxHeight: isExpanded ? 'none' : '0'\n  });\n\n  useEffect(() => {\n    // Ignore state update on initial render\n    if (state === 'unmounted' && !isExpanded) {\n      return;\n    }\n    setState(isExpanded ? 'expanding' : 'collapsing');\n  }, [isExpanded, state]);\n\n  const { nodeRef } = useAnimation<Status, HTMLDivElement>(state, {\n    animationStates,\n    onAnimationEnd: ({ animationState }) => {\n      if (animationState === 'collapsing') {\n        setState('unmounted');\n      }\n      onTransitionEnd?.();\n    }\n  });\n\n  return (\n    <div\n      className={styles.contentChildrenStyle}\n      ref={nodeRef}\n      id={id}\n      tabIndex={-1}\n      style={contentInitialStyle.current}\n      aria-hidden={!isExpanded || undefined}>\n      {state !== 'unmounted' && children}\n    </div>\n  );\n};\n\n/**\n * The transition from collapsed to expanded works as follows:\n * 1. When the component is initially rendered in the collapsed state, we\n *    explicitly set maxHeight and overflowY from \"to\" configuration.\n * 2. When the expanded prop changes from false to true, we first mount the content children.\n * 3. Once this is mounted we trigger an animation updating animationState value of useAnimationHook.\n * 4. Configuration is represented inside hook. Passed config depends if previous animation was completed or not.\n *    We could check that based on node.style.maxHeight.\n *\n * The transition from expanded to collapsed is similar:\n * 1. We trigger an animation updating animationState value of useAnimationHook.\n * 2. Once animation is completed, with the help of end config,we set max-Height as 'none'.\n *    This will allow us to keep adding content.\n * 3. Once this is done, onAnimationEnd is called(as 'from collapsed to expanded\"). Here, content children are unmouunted.\n */\nconst animationStates: UseAnimationConfig<Status, HTMLDivElement>['animationStates'] = {\n  expanding: (node) => ({\n    to: {\n      maxHeight: `${node.scrollHeight}px`\n    },\n    options: {\n      duration: 400\n    },\n    end: {\n      maxHeight: 'none'\n    }\n  }),\n  collapsing: (node) => ({\n    ...(node.style.maxHeight === 'none' && {\n      from: {\n        maxHeight: `${node.scrollHeight}px`\n      }\n    }),\n    to: {\n      maxHeight: '0'\n    },\n    options: {\n      duration: 400\n    }\n  })\n};\n","import { ComponentChildren } from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport { useId } from '../hooks/UNSAFE_useId';\nimport { CollapsibleHeader } from './CollapsibleHeader';\nimport { CollapsibleContent } from './CollapsibleContent';\n\ntype Props = {\n  /**\n   * Collapsible's header. If not specified, the header contains only an open/close icon. Note that the header text is required for JET collapsible for accessibility purposes.\n   */\n  header?: ComponentChildren;\n\n  /**\n   * The content node to be collapsed\n   */\n  children?: ComponentChildren;\n\n  /**\n   * Disables the collapsible if set to true\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Specifies if the content is expanded\n   */\n  isExpanded?: boolean;\n\n  /**\n   * Changes chevron icon placement at the end of the collapsible header\n   */\n  iconPosition?: 'start' | 'end';\n\n  /**\n   * Controls the header display which con include a divider below the collapsible header\n   */\n  variant?: 'basic' | 'horizontal-rule';\n\n  /**\n   * Property that triggers a callback immediately when toggle happens and value of expanded property should be updated\n   */\n  onToggle?: (details: ToggleDetail) => void;\n\n  /**\n   * Property that triggers a callback after toggle animation is done\n   */\n  onTransitionEnd?: (details: TransitionEnd) => void;\n\n  /**\n   * An alternative accessible label. By default, the header content is used as Collapsible's accessible label.\n   * If required, the user can set a custom 'accessibleLabel' value.\n   */\n  'aria-label'?: string;\n\n  /**\n   * An alternative accessible label id. By default, the header content is used as Collapsible's accessible label.\n   * If required, the user can specify an element id within the header to be used as the accessible label.\n   * If both 'accessibleLabel' and 'accessibilityId' are specified, the 'accessibleLabelId' is ignored.\n   */\n  'aria-labelledby'?: string;\n};\n\ntype ToggleDetail = TransitionEnd & {\n  target: EventTarget | null;\n};\n\ntype TransitionEnd = {\n  value: boolean;\n};\n\n/**\n * A collapsible displays a header that can be expanded to show its content.\n */\n\nexport const Collapsible = ({\n  header,\n  children,\n  isDisabled = false,\n  isExpanded = false,\n  iconPosition = 'start',\n  variant = 'basic',\n  onToggle,\n  onTransitionEnd,\n  'aria-label': accessibleLabel,\n  'aria-labelledby': accessibleLabelId\n}: Props) => {\n  const uniqueID = useId();\n  const headerId = `oj-collapsible-header-${uniqueID}`;\n  const contentId = `oj-collapsible-content-${uniqueID}`;\n\n  /**\n   * Function handling toggle and invoking callback for collapsing/expanding\n   */\n  const toggleHandler = useCallback(\n    (target: EventTarget | null) => {\n      if (isDisabled) {\n        return;\n      }\n      onToggle?.({\n        value: !isExpanded,\n        target\n      });\n    },\n    [isDisabled, onToggle, isExpanded]\n  );\n\n  /**\n   * Function that is triggerd when animation ends\n   */\n  const transitionEndHandler = useCallback(() => {\n    onTransitionEnd?.({\n      value: isExpanded\n    });\n  }, [onTransitionEnd, isExpanded]);\n\n  return (\n    <>\n      <CollapsibleHeader\n        id={headerId}\n        contentId={contentId}\n        toggleHandler={toggleHandler}\n        isDisabled={isDisabled}\n        isExpanded={isExpanded}\n        iconPosition={iconPosition}\n        variant={variant}\n        accessibleLabel={accessibleLabel}\n        accessibleLabelId={accessibleLabelId}>\n        {header}\n      </CollapsibleHeader>\n      <CollapsibleContent\n        id={contentId}\n        isExpanded={isExpanded}\n        onTransitionEnd={transitionEndHandler}>\n        {children}\n      </CollapsibleContent>\n    </>\n  );\n};\n"],"names":["ExpandIcon","CollapseUpIcon","_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAUA;;AAEG;AACI,MAAM,qBAAqB,GAAG,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAa,KAAI;IAC3F,MAAM,KAAK,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAClD,IAAA,MAAM,SAAS,GAAG,YAAY,KAAK,OAAO,IAAI,UAAU,GAAGA,cAAU,GAAG,YAAY,CAAC;AACrF,IAAA,MAAM,OAAO,GAAG,YAAY,KAAK,KAAK,IAAI,UAAU,GAAGC,YAAc,GAAGD,cAAU,CAAC;AACnF,IAAA,MAAM,IAAI,GAAG,YAAY,KAAK,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IAE5D,OAAOE,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,KAAK,EAAA,CAAI,CAAC;AAC1C,CAAC;;ACQD;;AAEG;AAEI,MAAM,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,EAAE,EACF,SAAS,EACT,UAAU,EACV,UAAU,EACV,YAAY,EACZ,OAAO,GAAG,OAAO,EACjB,aAAa,EACb,eAAe,EACf,iBAAiB,EACL,KAAI;IAChB,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;AACtD,IAAA,MAAM,WAAW,GAAG,MAAM,CAAU,KAAK,CAAC,CAAC;IAE3C,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,iBAAiB,CAC3C,uBAAuB,EACvB;QACE,QAAQ,EAAE,UAAU,GAAG,YAAY,GAAG,aAAa;QACnD,OAAO,EAAE,OAAO,KAAK,iBAAiB,GAAG,YAAY,GAAG,WAAW;QACnE,OAAO,EAAE,QAAQ,GAAG,WAAW,GAAG,YAAY;AAC/C,KAAA,CACF,CAAC;IAEF,MAAM,eAAe,GAAG,UAAU,CAAC;AACjC,QAAA,MAAM,CAAC,mBAAmB;AAC1B,QAAA,YAAY,KAAK,KAAK,IAAI,MAAM,CAAC,YAAY;AAC7C,QAAA,YAAY,KAAK,OAAO,IAAI,MAAM,CAAC,cAAc;AAClD,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAY,KAAI;AACf,QAAA,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;;;;AAI5B,QAAA,IAAI,QAAQ,EAAE;AACZ,YAAA,MAAM,eAAe,GAAG,MAAM,IAAI,cAAc,IAAI,MAAM,CAAC;YAC3D,IAAI,CAAC,eAAe,IAAI,KAAK,YAAY,YAAY,KAAK,KAAK,YAAY,UAAU,EAAE;gBACrF,QAAQ,CAAC,KAAK,CAAC,CAAC;AACjB,aAAA;AACF,SAAA;AACH,KAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;AAEF,IAAA,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,YAAY,EAAE;QAC5C,UAAU;AACV,QAAA,QAAQ,EAAE,KAAK;AAChB,KAAA,CAAC,CAAC;;AAGH,IAAA,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,KAAY,KAAI;QAC3C,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACpD,QAAQ,CAAC,IAAI,CAAC,CAAC;AAChB,SAAA;AAAM,aAAA;YACL,QAAQ,CAAC,KAAK,CAAC,CAAC;AACjB,SAAA;KACF,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,MAAK;AAC5B,QAAA,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;AAC7B,KAAC,CAAC;IAEF,MAAM,cAAc,GAAG,MAAK;AAC1B,QAAA,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;AAC9B,KAAC,CAAC;;;IAIF,MAAM,aAAa,GAAG,eAAe;AACnC,UAAE,EAAE,YAAY,EAAE,eAAe,EAAE;AACnC,UAAE,iBAAiB;AACnB,cAAE,EAAE,iBAAiB,EAAE,iBAAiB,EAAE;AAC1C,cAAE,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAAC;AAE9B,IAAA,MAAM,SAAS,GAAG,OAChBC,KAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACN,YAAY,KAAK,KAAK,IAAID,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,eAAe,EAAA,QAAA,EAAG,QAAQ,EAAO,CAAA,EAC5EA,GACE,CAAA,KAAA,EAAA,EAAA,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,QAAQ,mBACC,SAAS,EAAA,eAAA,EACT,UAAU,EACzB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,OAAO,EACf,WAAW,EAAE,gBAAgB,EAC7B,SAAS,EAAE,cAAc,EACzB,SAAS,EAAE,MAAM,CAAC,YAAY,KAC1B,aAAa,EAAA,QAAA,EACjBA,IAAC,qBAAqB,EAAA,EACpB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,EACE,CAAA,EACL,YAAY,KAAK,OAAO,IAAIA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,eAAe,EAAA,QAAA,EAAG,QAAQ,EAAO,CAAA,CAAA,EAAA,CACrE,CACZ,CAAC;IAEF,QACEC,8BACED,GAAK,CAAA,KAAA,EAAA,EAAA,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAA,GAAM,UAAU,EAC7C,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAC,EAAA,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAY,KAAK,OAAO,GAAG,OAAO,GAAG,SAAS,EACzE,QAAA,EAAA,SAAS,EAAE,EAAA,CACP,GACH,EACL,OAAO,KAAK,iBAAiB,IAAIA,IAAC,OAAO,EAAA,EAAA,CAAG,CAC5C,EAAA,CAAA,EACH;AACJ,CAAC;;ACrHM,MAAM,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,eAAe,EAAgB,KAAI;AAChG,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,UAAU,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;IAEnF,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,CAA2B,uBAAuB,CAAC,CAAC;AAExF;;;;;;;;AAQG;IACH,MAAM,mBAAmB,GAAG,MAAM,CAAoB;AACpD,QAAA,SAAS,EAAE,QAAQ;QACnB,SAAS,EAAE,UAAU,GAAG,MAAM,GAAG,GAAG;AACrC,KAAA,CAAC,CAAC;IAEH,SAAS,CAAC,MAAK;;AAEb,QAAA,IAAI,KAAK,KAAK,WAAW,IAAI,CAAC,UAAU,EAAE;YACxC,OAAO;AACR,SAAA;QACD,QAAQ,CAAC,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC,CAAC;AACpD,KAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;AAExB,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,YAAY,CAAyB,KAAK,EAAE;QAC9D,eAAe;AACf,QAAA,cAAc,EAAE,CAAC,EAAE,cAAc,EAAE,KAAI;YACrC,IAAI,cAAc,KAAK,YAAY,EAAE;gBACnC,QAAQ,CAAC,WAAW,CAAC,CAAC;AACvB,aAAA;YACD,eAAe,IAAI,CAAC;SACrB;AACF,KAAA,CAAC,CAAC;AAEH,IAAA,QACEA,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,oBAAoB,EACtC,GAAG,EAAE,OAAO,EACZ,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE,mBAAmB,CAAC,OAAO,EAAA,aAAA,EACrB,CAAC,UAAU,IAAI,SAAS,EAAA,QAAA,EACpC,KAAK,KAAK,WAAW,IAAI,QAAQ,EAAA,CAC9B,EACN;AACJ,CAAC,CAAC;AAEF;;;;;;;;;;;;;;AAcG;AACH,MAAM,eAAe,GAAkE;AACrF,IAAA,SAAS,EAAE,CAAC,IAAI,MAAM;AACpB,QAAA,EAAE,EAAE;AACF,YAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAC,YAAY,CAAI,EAAA,CAAA;AACpC,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,QAAQ,EAAE,GAAG;AACd,SAAA;AACD,QAAA,GAAG,EAAE;AACH,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA;KACF,CAAC;AACF,IAAA,UAAU,EAAE,CAAC,IAAI,MAAM;QACrB,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,MAAM,IAAI;AACrC,YAAA,IAAI,EAAE;AACJ,gBAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAC,YAAY,CAAI,EAAA,CAAA;AACpC,aAAA;SACF,CAAC;AACF,QAAA,EAAE,EAAE;AACF,YAAA,SAAS,EAAE,GAAG;AACf,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,QAAQ,EAAE,GAAG;AACd,SAAA;KACF,CAAC;CACH;;AC9CD;;AAEG;AAEU,MAAA,WAAW,GAAG,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,YAAY,GAAG,OAAO,EACtB,OAAO,GAAG,OAAO,EACjB,QAAQ,EACR,eAAe,EACf,YAAY,EAAE,eAAe,EAC7B,iBAAiB,EAAE,iBAAiB,EAC9B,KAAI;AACV,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE,CAAC;AACzB,IAAA,MAAM,QAAQ,GAAG,CAAyB,sBAAA,EAAA,QAAQ,EAAE,CAAC;AACrD,IAAA,MAAM,SAAS,GAAG,CAA0B,uBAAA,EAAA,QAAQ,EAAE,CAAC;AAEvD;;AAEG;AACH,IAAA,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,MAA0B,KAAI;AAC7B,QAAA,IAAI,UAAU,EAAE;YACd,OAAO;AACR,SAAA;AACD,QAAA,QAAQ,GAAG;YACT,KAAK,EAAE,CAAC,UAAU;YAClB,MAAM;AACP,SAAA,CAAC,CAAC;KACJ,EACD,CAAC,UAAU,EAAE,QAAQ,EAAE,UAAU,CAAC,CACnC,CAAC;AAEF;;AAEG;AACH,IAAA,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAK;AAC5C,QAAA,eAAe,GAAG;AAChB,YAAA,KAAK,EAAE,UAAU;AAClB,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC;AAElC,IAAA,QACEC,IAAA,CAAAC,UAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAC,CAAA,iBAAiB,EAChB,EAAA,EAAE,EAAE,QAAQ,EACZ,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAChC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EACnC,MAAM,EAAA,CACW,EACpBA,GAAA,CAAC,kBAAkB,EACjB,EAAA,EAAE,EAAE,SAAS,EACb,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,oBAAoB,EACpC,QAAA,EAAA,QAAQ,EACU,CAAA,CAAA,EAAA,CACpB,EACH;AACJ;;;;"}

package/es/Collection-7e0fe4fb.js

@@ -0,0 +1,16 @@
+/* @oracle/oraclejet-preact: 15.1.3 */
+import { jsx } from 'preact/jsx-runtime';
+import { Fragment } from 'preact';
+
+/**
+ * Component that renders an array of data.
+ */
+function Collection({ items, children }) {
+    return (jsx(Fragment, { children: items.map((data, index) => {
+            const ctx = { index, data };
+            return children(ctx);
+        }) }));
+}
+
+export { Collection as C };
+//# sourceMappingURL=Collection-7e0fe4fb.js.map

package/es/Collection-7e0fe4fb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collection-7e0fe4fb.js","sources":["../../src/PRIVATE_Collection/Collection.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 { ComponentChildren, Fragment } from 'preact';\nimport { ItemContext } from '../UNSAFE_Collection';\n\n/**\n * Props for the Collection Component\n */\nexport type Props<D> = {\n  /**\n   * An array of data\n   */\n  items: D[];\n  /**\n   * A function to render each item\n   */\n  children: (context: ItemContext<D>) => ComponentChildren;\n};\n\n/**\n * Component that renders an array of data.\n */\nexport function Collection<D>({ items, children }: Props<D>) {\n  return (\n    <Fragment>\n      {items.map((data: D, index: number) => {\n        const ctx = { index, data };\n        return children(ctx);\n      })}\n    </Fragment>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;AAwBA;;AAEG;SACa,UAAU,CAAI,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAA;AACzD,IAAA,QACEA,GAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAO,EAAE,KAAa,KAAI;AACpC,YAAA,MAAM,GAAG,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAC5B,YAAA,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;SACtB,CAAC,EACO,CAAA,EACX;AACJ;;;;"}