@oracle/oraclejet-preact 15.1.1 → 15.1.2

package/cjs/ButtonLayout-648ecbd5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLayout-648ecbd5.js","sources":["../../src/UNSAFE_ButtonLayout/ButtonLayout.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, ComponentProps } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { BaseButton } from '../UNSAFE_BaseButton';\nimport { Text } from '../UNSAFE_Text';\n\nexport type ButtonDisplay = 'icons' | 'label' | 'all';\n\nexport type Props = {\n  /**\n   *The default slot is the button's text label. The oj-c-button element accepts plain text or DOM nodes as children for the default slot.\"\n   */\n  children?: ComponentChildren;\n\n  /**\n   *The suffix is appended to the text label, used for menu buttons.\n   */\n  suffix?: string;\n\n  /**\n   * The startIcon is the button's start icon.\n   */\n  startIcon?: ComponentChildren;\n\n  /**\n   * The endIcon is the button's end icon.\n   */\n  endIcon?: ComponentChildren;\n\n  /**\n   * Styling can be used for customizing icon layout by limiting padding (\"embedded\")\n   */\n  styling?: 'default' | 'embedded';\n\n  /**\n   * The size indicates how large the button is rendered.\n   */\n  size?: ComponentProps<typeof BaseButton>['size'];\n\n  /**\n   * Display indicates whether the label, the icons, or all elements should be rendered by the button.\n   */\n  display?: ButtonDisplay;\n};\n\nexport const compStyles = {\n  text: cssProps`\n    ${{\n      overflowX: 'hidden',\n      overflowY: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      display: 'inline-block'\n    }}\n  `,\n  suffix: cssProps`\n    ${{\n      fontWeight: '300',\n      overflowX: 'hidden',\n      overflowY: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-1x)',\n      display: 'inline-flex'\n    }}\n  `,\n\n  icon: cssProps`\n    ${{\n      display: 'inline-flex',\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-size)',\n      fontWeight: 'normal',\n      marginTop: 0,\n      marginBottom: 0\n    }}\n  `,\n\n  startText: cssProps`\n    ${{\n      marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-to-edge-padding)'\n    }}\n  `,\n\n  endText: cssProps`\n    ${{\n      marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-text-to-edge-padding)'\n    }}\n  `,\n\n  startIcon: cssProps`\n  ${{\n    marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding)',\n    marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding)'\n  }}\n`,\n\n  startIconWhenBothIconsOnly: cssProps`\n  ${{\n    marginInlineEnd: 0,\n    marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding)'\n  }}\n  `,\n\n  endIcon: cssProps`\n  ${{\n    marginInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding)',\n    marginInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding)'\n  }}\n`,\n\n  label: cssProps`\n    ${{\n      cursor: 'inherit',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '100%',\n      height: '100%'\n    }}\n  `\n};\n\nconst isNullOrUndefined = (\n  value: ComponentChildren | null | undefined\n): value is null | undefined => {\n  return value === null || value === undefined;\n};\n\nexport function ButtonLayout({\n  size = 'md',\n  display = 'all',\n  styling = 'default',\n  ...props\n}: Props) {\n  const showIcons = display === 'all' || display === 'icons';\n  const showText = display === 'all' || display === 'label';\n  const labelClass = compStyles.label;\n  const isOnlyIcon = props.startIcon && (display === 'icons' || !props.children) && !props.endIcon;\n  const isEmbedded = styling === 'embedded';\n  const textStartIcon = !isNullOrUndefined(props.startIcon) && display === 'all';\n  const textEndIcon = !isNullOrUndefined(props.endIcon) && display === 'all';\n  const isTwoIcons = !isNullOrUndefined(props.startIcon) && !isNullOrUndefined(props.endIcon);\n  const isTwoIconsOnly = isTwoIcons && display === 'icons';\n\n  const endIconClass = `${compStyles.icon} oj-c-button-layout-${size} ${compStyles.endIcon}`;\n  const startIconStyles = classNames([\n    compStyles.icon,\n    isEmbedded ? `oj-c-button-layout-embedded-${size}` : `oj-c-button-layout-${size}`,\n    !isOnlyIcon && compStyles.startIcon,\n    isTwoIconsOnly && compStyles.startIconWhenBothIconsOnly\n  ]);\n  const textStyles = classNames([\n    compStyles.text,\n    textStartIcon && !props.suffix && !isTwoIcons && compStyles.endText,\n    textEndIcon && !isTwoIcons && compStyles.startText\n  ]);\n  const suffixStyles = classNames([\n    compStyles.suffix,\n    textStartIcon && !isTwoIcons && compStyles.endText\n  ]);\n\n  return (\n    <span class={labelClass}>\n      {showIcons && props.startIcon && <span class={startIconStyles}>{props.startIcon}</span>}\n      {showText && props.children && <span class={textStyles}> {props.children} </span>}\n      {showText && props.suffix && (\n        <span class={suffixStyles}>\n          <Text truncation={'ellipsis'} weight={'inherit'}>\n            {props.suffix}\n          </Text>\n        </span>\n      )}\n      {showIcons && props.endIcon && <span class={endIconClass}>{props.endIcon}</span>}\n    </span>\n  );\n}\n"],"names":["compStyles","isNullOrUndefined","value","undefined","ButtonLayout","size","display","styling","props","labelClass","label","isEmbedded","textStartIcon","startIcon","textEndIcon","endIcon","isTwoIcons","isTwoIconsOnly","endIconClass","icon","isOnlyIcon","text","startText","suffix","endText","_jsxs","class","children","showIcons","_jsx","startIconStyles","showText","textStyles","suffixStyles","Text","truncation","weight"],"mappings":";;;;;;;;;;AAoDA,MAAAA,UAAA,GAAA;QASG,QAAA;UAWA,UAAA;QAUA,QAAA;aAMA,QAAA;WAMA,UAAA;aAOF,SAAA;8BAOE,QAAA;WAOF,UAAA;;;AAcD,MAAAC,iBAAA,GAAAC,KAAA,IAAA;AAGE,EAAA,OAAAA,KAAA,KAAA,IAAA,IAAAA,KAAA,KAAAC,SAAA,CAAA;AACF,CAAA,CAAA;AAEA,SAAAC,YAAAA,CAAA;AAAAC,EAAAA,IAAA,GAAA,IAAA;AAAAC,EAAAA,OAAA,GAAA,KAAA;AAAAC,EAAAA,OAAA,GAAA,SAAA;EAAA,GAAAC,KAAAA;AAAA,CAAA,EAAA;;;AAQE,EAAA,MAAAC,UAAA,GAAAT,UAAA,CAAAU,KAAA,CAAA;;AAEA,EAAA,MAAAC,UAAA,GAAAJ,OAAA,KAAA,UAAA,CAAA;AACA,EAAA,MAAAK,aAAA,GAAA,CAAAX,iBAAA,CAAAO,KAAA,CAAAK,SAAA,CAAA,IAAAP,OAAA,KAAA,KAAA,CAAA;AACA,EAAA,MAAAQ,WAAA,GAAA,CAAAb,iBAAA,CAAAO,KAAA,CAAAO,OAAA,CAAA,IAAAT,OAAA,KAAA,KAAA,CAAA;AACA,EAAA,MAAAU,UAAA,GAAA,CAAAf,iBAAA,CAAAO,KAAA,CAAAK,SAAA,CAAA,IAAA,CAAAZ,iBAAA,CAAAO,KAAA,CAAAO,OAAA,CAAA,CAAA;AACA,EAAA,MAAAE,cAAA,GAAAD,UAAA,IAAAV,OAAA,KAAA,OAAA,CAAA;AAEA,EAAA,MAAAY,YAAA,GAAA,CAAAlB,EAAAA,UAAA,CAAAmB,IAAA,CAAAd,oBAAAA,EAAAA,IAAA,CAAAL,CAAAA,EAAAA,UAAA,CAAAe,OAAA,CAAA,CAAA,CAAA;iDAEEf,UAAA,CAAAmB,IAAA,qFAEA,CAAAC,UAAA,IAAApB,UAAA,CAAAa,SAAA,0DAED,CAAA,CAAA;4CAECb,UAAA,CAAAqB,IAAA,uEAEAP,WAAA,IAAA,CAAAE,UAAA,IAAAhB,UAAA,CAAAsB,SAAA,CACD,CAAA,CAAA;8CAECtB,UAAA,CAAAuB,MAAA,EACAX,aAAA,IAAA,CAAAI,UAAA,IAAAhB,UAAA,CAAAwB,OAAA,CACD,CAAA,CAAA;EAED,OAAAC,eAAA,CAAA,MAAA,EAAA;AAAAC,IAAAA,KAAA,EAAAjB,UAAA;IAAAkB,QAAA,EAAA,CAAAC,SAAA,IAAApB,KAAA,CAAAK,SAAA,IAAAgB,cAAA,CAAA,MAAA,EAAA;AAAAH,MAAAA,KAAA,EAAAI,eAAA;MAAAH,QAAA,EAAAnB,KAAA,CAAAK,SAAAA;KAAA,CAAA,EAAAkB,QAAA,IAAAvB,KAAA,CAAAmB,QAAA,IAAAF,eAAA,CAAA,MAAA,EAAA;AAAAC,MAAAA,KAAA,EAAAM,UAAA;MAAAL,QAAA,EAAA,CAAA,GAAA,EAAAnB,KAAA,CAAAmB,QAAA,EAAA,GAAA,CAAA;KAAA,CAAA,EAAAI,QAAA,IAAAvB,KAAA,CAAAe,MAAA,IAAAM,cAAA,CAAA,MAAA,EAAA;AAAAH,MAAAA,KAAA,EAAAO,YAAA;AAAAN,MAAAA,QAAA,EAAAE,cAAA,CAAAK,SAAA,EAAA;AAAAC,QAAAA,UAAA,EAAA,UAAA;AAAAC,QAAAA,MAAA,EAAA,SAAA;QAAAT,QAAA,EAAAnB,KAAA,CAAAe,MAAAA;OAAA,CAAA;KAAA,CAAA,EAAAK,SAAA,IAAApB,KAAA,CAAAO,OAAA,IAAAc,cAAA,CAAA,MAAA,EAAA;AAAAH,MAAAA,KAAA,EAAAR,YAAA;MAAAS,QAAA,EAAAnB,KAAA,CAAAO,OAAAA;AAAA,KAAA,CAAA,CAAA;AAAA,GAAA,CAAA,CAAA;AAcF;;;;"}

package/cjs/CardGrid-73fa1977.js

@@ -0,0 +1,430 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var utils_UNSAFE_mergeProps = require('./utils/UNSAFE_mergeProps.js');
+var utils_UNSAFE_keys = require('./utils/UNSAFE_keys.js');
+var utils_PRIVATE_collectionUtils = require('./utils/PRIVATE_collectionUtils.js');
+var hooks_UNSAFE_useId = require('./hooks/UNSAFE_useId.js');
+var hooks_PRIVATE_useCurrentKey = require('./hooks/PRIVATE_useCurrentKey.js');
+var hooks_PRIVATE_useCollectionFocusRing = require('./hooks/PRIVATE_useCollectionFocusRing.js');
+var hooks_PRIVATE_useTabbableModeSet = require('./hooks/PRIVATE_useTabbableModeSet.js');
+var hooks_PRIVATE_useSelection = require('./hooks/PRIVATE_useSelection.js');
+var UNSAFE_Grid = require('./UNSAFE_Grid.js');
+var UNSAFE_Selector = require('./UNSAFE_Selector.js');
+require('./UNSAFE_Skeleton.js');
+var SkeletonContainer = require('./SkeletonContainer-dbb3ab5e.js');
+require('./PRIVATE_LoadMoreCollection.js');
+var compat = require('preact/compat');
+require('./utils/UNSAFE_classNames.js');
+var utils_PRIVATE_refUtils = require('./utils/PRIVATE_refUtils.js');
+require('./hooks/UNSAFE_useAnimation.js');
+var hooks_UNSAFE_useTabbableMode = require('./hooks/UNSAFE_useTabbableMode.js');
+require('./UNSAFE_FocusTrap.js');
+var UNSAFE_CardGrid_themes_CardGridStyles_css = require('./UNSAFE_CardGrid/themes/CardGridStyles.css.js');
+var classNames = require('./classNames-d619a292.js');
+var useAnimation = require('./useAnimation-802f3cdb.js');
+var FocusTrap = require('./FocusTrap-2209a89f.js');
+var LoadMoreCollection = require('./LoadMoreCollection-78b142a9.js');
+var Skeleton = require('./Skeleton-506420e5.js');
+
+const ITEM_STYLE_CLASS = 'oj-cardgrid-item';
+const ITEM_SELECTOR = '.' + ITEM_STYLE_CLASS;
+/**
+ * The internal component used to render a single item in CardGrid.
+ */
+function CardGridItem({ children, itemKey, itemIndex, isTabbable, isFocused, isFocusRingVisible, isSelected, selectionMode, initialAnimation, setCardDimension }) {
+    const rootRef = hooks.useRef(null);
+    const variantClasses = UNSAFE_CardGrid_themes_CardGridStyles_css.multiVariantStyles({
+        itemFocused: isFocused && isFocusRingVisible ? 'isItemFocused' : 'isNotItemFocused',
+        itemInitialOpacity: initialAnimation ? 'isTransparent' : 'isNotTransparent'
+    });
+    const classes = classNames.classNames([ITEM_STYLE_CLASS, UNSAFE_CardGrid_themes_CardGridStyles_css.styles.itemStyle, variantClasses]);
+    // don't bubble Arrow Up/Down/Left/Right events to parent when in isTabbable mode
+    // this bubbling causes the outer CollectionFocus ring to change index while in the isTabbable mode.
+    const handleKeyDown = (event) => {
+        if (isTabbable &&
+            (event.key === 'ArrowDown' ||
+                event.key === 'ArrowUp' ||
+                event.key === 'ArrowLeft' ||
+                event.key === 'ArrowRight')) {
+            event.stopPropagation();
+        }
+    };
+    hooks.useLayoutEffect(() => {
+        const firstCard = rootRef.current?.firstElementChild;
+        if (setCardDimension && firstCard) {
+            setCardDimension({ width: firstCard.offsetWidth, height: firstCard.offsetHeight });
+        }
+    }, []);
+    // todo: issue track in JET-57681, we currently have two useAnimation() because the opacity and
+    // slide up/down have different durations, and the current API couldn't handle this case, we will
+    // update this once the API is updated
+    // animation for slide up/down
+    const { nodeRef: nodeRefSlide } = useAnimation.useAnimation(initialAnimation || 'none', animationConfigSlide(itemIndex));
+    // animation for opacity change
+    const { nodeRef: nodeRefOpacity } = useAnimation.useAnimation((initialAnimation && 'opacity') || 'none', animationConfigOpacity(itemIndex));
+    const itemRefs = hooks.useMemo(() => utils_PRIVATE_refUtils.mergeRefs(rootRef, nodeRefSlide, nodeRefOpacity), 
+    // spot an issue when we click the cards during animation is processing, the cards would not finish
+    // the current animations and stay as what it is, e.g. leave itself as half transparent.
+    // add initialAnimation to the dependency to prevent this issue.
+    [rootRef, nodeRefSlide, nodeRefOpacity, initialAnimation]);
+    return (jsxRuntime.jsx("div", { id: hooks_UNSAFE_useId.useId(), ref: itemRefs, class: classes, role: "gridcell", "data-oj-key": itemKey, onKeyDown: handleKeyDown, "aria-selected": selectionMode === 'none' ? undefined : isSelected, ...(typeof itemKey === 'number' && { 'data-oj-key-type': 'number' }), children: jsxRuntime.jsx(hooks_UNSAFE_useTabbableMode.TabbableModeContext.Provider, { value: { isTabbable }, children: jsxRuntime.jsx(FocusTrap.FocusTrap, { isDisabled: !isTabbable, restoreFocusRef: false, children: children }) }) }));
+}
+const animationConfigSlide = (index) => {
+    return {
+        animationStates: {
+            slideUp: {
+                from: {
+                    translateY: '50px'
+                },
+                to: {
+                    translateY: '0px'
+                },
+                options: {
+                    duration: 300,
+                    delay: index * 50,
+                    easing: [0, 0, 0.2, 1]
+                }
+            },
+            slideDown: {
+                from: {
+                    translateY: '-50px'
+                },
+                to: {
+                    translateY: '0'
+                },
+                options: {
+                    duration: 300,
+                    delay: index * 50,
+                    easing: [0, 0, 0.2, 1]
+                }
+            }
+        },
+        isAnimatedOnMount: true
+    };
+};
+const animationConfigOpacity = (index) => {
+    return {
+        animationStates: {
+            opacity: {
+                from: {
+                    opacity: 0
+                },
+                to: {
+                    opacity: 1
+                },
+                options: {
+                    duration: 150,
+                    delay: index * 50,
+                    easing: 'linear'
+                }
+            }
+        },
+        isAnimatedOnMount: true
+    };
+};
+const MemoizeCardGridItem = compat.memo(CardGridItem, (prev, next) => {
+    if (prev && next) {
+        return (prev.itemKey === next.itemKey &&
+            prev.itemIndex === next.itemIndex &&
+            prev.itemData === next.itemData &&
+            prev.isTabbable === next.isTabbable &&
+            prev.isFocused === next.isFocused &&
+            prev.isFocusRingVisible === next.isFocusRingVisible &&
+            prev.isSelected === next.isSelected &&
+            prev.initialAnimation === next.initialAnimation);
+    }
+    return false;
+});
+
+function CardGrid({ children, data, onLoadMore = () => { }, hasMore = false, getRowKey, currentKey, onCurrentKeyChange, selectionMode = 'none', selectedKeys = emptyKeys, onSelectionChange, viewportConfig, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, initialAnimation = 'slideUp', gutterSize = 'sm' }) {
+    const rootRef = hooks.useRef(null);
+    // tracking the anchor key which is used for shift+click selection
+    const anchorKey = hooks.useRef();
+    // tracking pending current key in pointer down event
+    const pendingCurrentKey = hooks.useRef();
+    const isInitialAnimation = hooks.useRef(true);
+    const [colCount, setColCount] = hooks.useState(0);
+    const [cardDimension, setCardDimension] = hooks.useState({ width: 0, height: 0 });
+    const gutterSizePX = gutterSizeMappings[gutterSize];
+    const gap = `${gutterSizePX / 4}x`;
+    const gridTemplateColumns = cardDimension.width
+        ? `repeat(auto-fit, ${cardDimension.width}px)`
+        : undefined;
+    const gridProps = { gap, gridTemplateColumns };
+    const ariaMultiSelectable = selectionMode === 'none' ? undefined : selectionMode === 'multiple';
+    const ariaRowcount = hasMore || !data || colCount === 0 ? -1 : Math.ceil(data?.length / colCount);
+    /*****************************************************************************************/
+    /********************************* cardWidth and colCount ********************************/
+    /*****************************************************************************************/
+    // cards are fully rendered for the first time, only when cardWidth and colCount have defined and non-zero values
+    // for the first time, so the initial animation should not happen until this render.
+    hooks.useEffect(() => {
+        if (cardDimension.width && colCount) {
+            isInitialAnimation.current = false;
+        }
+    }, [cardDimension.width && colCount]);
+    const handleColCount = hooks.useCallback((rootWidth) => {
+        const newColCount = getColCount(gutterSizePX, cardDimension.width || DEFAULT_SKELETON_WIDTH, rootWidth);
+        if (newColCount > 0) {
+            setColCount(newColCount);
+        }
+    }, [gutterSizePX, cardDimension.width]);
+    hooks.useEffect(() => {
+        const root = rootRef?.current;
+        if (root) {
+            handleColCount(root.offsetWidth);
+        }
+    }, [handleColCount]);
+    const handleResize = hooks.useCallback((entries) => {
+        for (const entry of entries) {
+            // update colCount during resize
+            handleColCount(entry.contentRect.width);
+        }
+    }, [handleColCount]);
+    /**
+     * Set up resize observer and update the colCount, to ensure keyboard navigation is correct
+     * after the resize
+     */
+    hooks.useEffect(() => {
+        const root = rootRef.current;
+        if (root) {
+            const resizeObserver = new ResizeObserver((entries) => {
+                handleResize(entries);
+            });
+            resizeObserver.observe(root);
+            return () => {
+                resizeObserver.unobserve(root);
+            };
+        }
+        return undefined;
+    }, [handleResize]);
+    /*****************************************************************************************/
+    /************************************* Tabbable Mode *************************************/
+    /*****************************************************************************************/
+    const cardGridContains = (elem) => {
+        return !!rootRef.current?.contains(elem);
+    };
+    let pendingFocusRingChange = false;
+    const [isCurrentTabbableKey, tabbableModeProps] = hooks_PRIVATE_useTabbableModeSet.useTabbableModeSet(cardGridContains, (element) => {
+        return utils_PRIVATE_collectionUtils.keyExtractor(element, ITEM_SELECTOR);
+    }, currentKey, 
+    // handle clean-up on disabling of the mode
+    (target, isKeyboardEvent) => {
+        if (cardGridContains(target)) {
+            // delay focus reset for keyboard disable so focus is reset to CardGrid after the FocusTrap blur lifecycle completes.
+            // pointer initiated changes will fire the onBlur organically and delaying the focus, just generates an unwanted second blur
+            if (isKeyboardEvent) {
+                // do not show a focus ring during this timeOut
+                pendingFocusRingChange = true;
+                setTimeout(() => {
+                    rootRef.current?.focus();
+                }, 0);
+            }
+            else {
+                rootRef.current?.focus();
+            }
+        }
+        // otherwise target is not in list (including body, which target should be null in that case)
+    }, 
+    // set currentKey when mode is enabled
+    (key) => {
+        onCurrentKeyChange && onCurrentKeyChange({ value: key });
+    });
+    /*****************************************************************************************/
+    /********************************* Current Key and Focus *********************************/
+    /*****************************************************************************************/
+    const { currentKeyProps } = hooks_PRIVATE_useCurrentKey.useCurrentKey((element) => utils_PRIVATE_collectionUtils.keyExtractor(element, ITEM_SELECTOR), selectionMode !== 'multiple', 
+    // init a function every time to make sure we pass in the latest colCount.current,
+    // otherwise the new key might be wrong after resize
+    () => utils_PRIVATE_collectionUtils.getPrevNextKeyByCount(data, getRowKey, currentKey, -colCount), () => utils_PRIVATE_collectionUtils.getPrevNextKeyByCount(data, getRowKey, currentKey, colCount), () => utils_PRIVATE_collectionUtils.getPrevNextKeyByCount(data, getRowKey, currentKey, -1), () => utils_PRIVATE_collectionUtils.getPrevNextKeyByCount(data, getRowKey, currentKey, 1), currentKey, onCurrentKeyChange);
+    const [showFocusRing, focusRingProps] = hooks_PRIVATE_useCollectionFocusRing.useCollectionFocusRing(cardGridContains, [
+        'ArrowUp',
+        'ArrowDown',
+        'ArrowLeft',
+        'ArrowRight'
+    ]);
+    const handleInitialFocus = () => {
+        if (!utils_UNSAFE_keys.isKeyDefined(currentKey) &&
+            onCurrentKeyChange &&
+            isCurrentTabbableKey(undefined) &&
+            rootRef.current) {
+            const firstKey = pendingCurrentKey.current || utils_PRIVATE_collectionUtils.getFirstVisibleKey(rootRef.current, ITEM_SELECTOR);
+            if (utils_UNSAFE_keys.isKeyDefined(firstKey)) {
+                onCurrentKeyChange({ value: firstKey });
+            }
+        }
+    };
+    /**
+     * Need to track pointer down element to set currentItem when initial focus happens
+     */
+    const handlePointerDown = (event) => {
+        const key = utils_PRIVATE_collectionUtils.keyExtractor(event.target, ITEM_SELECTOR);
+        if (utils_UNSAFE_keys.isKeyDefined(key)) {
+            pendingCurrentKey.current = key;
+        }
+    };
+    hooks.useEffect(() => {
+        if (currentKey != null && rootRef.current) {
+            const elem = utils_PRIVATE_collectionUtils.findElementByKey(rootRef.current, currentKey, ITEM_SELECTOR);
+            if (elem) {
+                // make sure item is visible
+                elem.scrollIntoView({ block: 'nearest' });
+                const cell = elem.closest(`[role=gridcell]`);
+                if (cell) {
+                    // update aria-activedescendant for screen reader
+                    rootRef.current.setAttribute('aria-activedescendant', cell.id);
+                }
+            }
+        }
+        // listen to data because the current item would re-render when data is updated, i.e. the id
+        // of current item would be updated, so the currentKey itself couldn't guarantee the root has
+        // the latest aria-activedescendant
+    }, [currentKey, data]);
+    /*****************************************************************************************/
+    /*************************************** Selection ***************************************/
+    /*****************************************************************************************/
+    const handleSelectionChange = hooks.useCallback((detail) => {
+        if (onSelectionChange) {
+            if (detail.value.all === false && detail.value.keys.size > 0) {
+                // the last key selected by a user gesture is the anchor key
+                anchorKey.current = Array.from(detail.value.keys.values()).pop();
+            }
+            onSelectionChange(detail);
+        }
+    }, [anchorKey, onSelectionChange]);
+    const handleSelectionRangeChange = hooks.useCallback((detail) => {
+        if (data && onSelectionChange) {
+            const value = utils_PRIVATE_collectionUtils.handleSelectionRange(detail, data, getRowKey);
+            // for non-virtualized CardGrid, value should always be an array
+            if (Array.isArray(value)) {
+                onSelectionChange({ value: { all: false, keys: new Set(value) }, target: null });
+            }
+        }
+    }, [data, onSelectionChange, onLoadMore]);
+    const { selectionProps } = hooks_PRIVATE_useSelection.useSelection((element) => {
+        if (element === rootRef.current) {
+            return currentKey === undefined ? null : currentKey;
+        }
+        return utils_PRIVATE_collectionUtils.keyExtractor(element, ITEM_SELECTOR);
+    }, selectedKeys, selectionMode, false, 'replace', false, handleSelectionChange, anchorKey.current, currentKey, (currentKey, isPrev) => () => utils_PRIVATE_collectionUtils.getPrevNextKeyByCount(data, getRowKey, currentKey, isPrev ? -colCount : colCount), (currentKey, isPrev) => () => utils_PRIVATE_collectionUtils.getPrevNextKeyByCount(data, getRowKey, currentKey, isPrev ? -1 : 1), (key) => {
+        if (rootRef.current) {
+            const elem = utils_PRIVATE_collectionUtils.findElementByKey(rootRef.current, key, ITEM_SELECTOR);
+            if (elem) {
+                elem.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }, handleSelectionRangeChange);
+    /*****************************************************************************************/
+    /************************************ Child Component ************************************/
+    /*****************************************************************************************/
+    const getItemContext = hooks.useCallback((context) => {
+        const key = getRowKey(context.data);
+        const selectorRenderer = selectionMode === 'multiple'
+            ? () => (jsxRuntime.jsx(UNSAFE_Selector.Selector, { onChange: onSelectionChange, rowKey: key, selectedKeys: selectedKeys }))
+            : undefined;
+        return {
+            index: context.index,
+            data: context.data,
+            metadata: { key: key },
+            selector: selectorRenderer,
+            isSelected: utils_UNSAFE_keys.containsKey(selectedKeys, key)
+        };
+    }, [selectionMode, selectedKeys, onSelectionChange]);
+    const childrenComponent = (context) => {
+        const cardItemContext = getItemContext(context);
+        const isTabbable = isCurrentTabbableKey(cardItemContext.metadata.key);
+        const isFocused = currentKey === cardItemContext.metadata.key && !isTabbable;
+        const isFocusRingVisible = isFocused && showFocusRing && !pendingFocusRingChange;
+        const isSelected = cardItemContext.isSelected;
+        const cardGridFunc = (context) => (jsxRuntime.jsx(MemoizeCardGridItem, { itemKey: cardItemContext.metadata.key, itemIndex: cardItemContext.index, itemData: cardItemContext.data, isTabbable: isTabbable, isFocused: isFocused, isFocusRingVisible: isFocusRingVisible, isSelected: isSelected, selectionMode: selectionMode, ...(isInitialAnimation.current && { initialAnimation }), ...(context.index === 0 && { setCardDimension }), children: children(context) }, cardItemContext.metadata.key));
+        return cardGridFunc(cardItemContext);
+    };
+    // todo: issue track in JET-57952, need a way to show the skeletons in keyboard navigation
+    const skeletons = findDefaultLoadMoreIndicator(gridProps, data?.length || 0, colCount, cardDimension.height);
+    viewportConfig = utils_PRIVATE_collectionUtils.getViewportConfig(rootRef, viewportConfig);
+    const collectionComponent = (jsxRuntime.jsx("div", { role: "row", children: jsxRuntime.jsx(UNSAFE_Grid.Grid, { ...gridProps, children: jsxRuntime.jsx(LoadMoreCollection.LoadMoreCollection, { data: data, hasMore: hasMore, onLoadMore: onLoadMore, loadMoreIndicator: skeletons, loadMoreThreshold: gutterSizePX + 4, viewportConfig: viewportConfig, children: childrenComponent }) }) }));
+    return (jsxRuntime.jsx("div", { ...utils_UNSAFE_mergeProps.mergeProps(tabbableModeProps, currentKeyProps, focusRingProps, selectionProps, {
+            onFocus: handleInitialFocus,
+            onPointerDown: handlePointerDown
+        }), ref: rootRef, role: "grid", class: UNSAFE_CardGrid_themes_CardGridStyles_css.styles.baseStyle, tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-multiselectable": ariaMultiSelectable, "aria-rowcount": ariaRowcount, "aria-colcount": colCount, children: data == null ? defaultLoadingIndicator(gridProps) : collectionComponent }));
+}
+const emptyKeys = { all: false, keys: new Set() };
+/**
+ * A mapping of gutterSize to concrete size that can be passed into Grid component
+ * (specifically, in the format of `${number}x`)
+ */
+const gutterSizeMappings = {
+    xs: 12,
+    sm: 16,
+    md: 24,
+    lg: 48,
+    xl: 64
+};
+// these are arbitrary values by now, might update them with definite values in the future
+const DEFAULT_SKELETON_NUMBER = 25;
+const DEFAULT_SKELETON_WIDTH = 260;
+const DEFAULT_SKELETON_HEIGHT = 300;
+/**
+ * A function that returns an array of skeletons based on count
+ * @param count the number of skeletons
+ */
+const getSkeletonsByCount = (count, isUnique, height) => [...Array(count)].map(() => (
+// this map function keeps generating the same copy of skeletons with same keys even with useId() hook,
+// so combine id with time to make the key unique. create unique skeletons if needed, otherwise the
+// animations won't start at the same time
+jsxRuntime.jsx(SkeletonContainer.SkeletonContainer, { minimumCount: 1, children: () => {
+        return jsxRuntime.jsx(Skeleton.Skeleton, { height: `calc(${height || DEFAULT_SKELETON_HEIGHT}px)` });
+    } }, isUnique && hooks_UNSAFE_useId.useId() + new Date().getTime())));
+/**
+ * The default loading indicator will display 25 card skeletons
+ * @param gridProps the Grid props
+ */
+const defaultLoadingIndicator = (gridProps) => (jsxRuntime.jsx(UNSAFE_Grid.Grid, { ...gridProps, children: getSkeletonsByCount(DEFAULT_SKELETON_NUMBER) }));
+/**
+ * A function that will return the load more skeletons based on the number of columns and items, and return
+ * the corresponding number of columns that is used to layout the skeletons.
+ * @param gridProps the Grid props
+ * @param totalCount the number of all items
+ * @param colCount the number of columns in a row
+ */
+const findDefaultLoadMoreIndicator = (gridProps, totalCount, colCount, skeletonHeight) => {
+    // if the number of columns is unknown, return nothing
+    if (!colCount) {
+        return undefined;
+    }
+    const skeletonGridProps = { ...gridProps };
+    if (colCount && !totalCount) {
+        skeletonGridProps.gridTemplateColumns = `repeat(auto-fit, ${DEFAULT_SKELETON_WIDTH}px)`;
+    }
+    const skeletons = [];
+    const gridColumns = [];
+    const firstCount = colCount - (totalCount % colCount);
+    if (firstCount > 0) {
+        const firstSkeletons = getSkeletonsByCount(firstCount, true, skeletonHeight);
+        skeletons.push(firstSkeletons);
+        gridColumns.push(firstCount);
+    }
+    const secondCount = colCount;
+    if (firstCount < secondCount) {
+        const secondSkeletons = getSkeletonsByCount(secondCount, true, skeletonHeight);
+        skeletons.push(secondSkeletons);
+        gridColumns.push(secondCount);
+    }
+    // only apply LOADMORE_STYLE_CLASS on the first row, to avoid onLoadMore
+    // get called multiple times
+    const skeletonRows = skeletons.map((s, i) => (jsxRuntime.jsx("div", { ...(i == 0 && { class: LoadMoreCollection.LOADMORE_STYLE_CLASS }), style: { gridColumn: `span ${gridColumns[i]}` }, children: jsxRuntime.jsx(UNSAFE_Grid.Grid, { ...skeletonGridProps, children: s }) })));
+    return skeletonRows;
+};
+const getColCount = (gapWidth, cardWidth, rootWidth) => {
+    if (!cardWidth || !rootWidth)
+        return 0;
+    // if we have n cards, we have n-1 gaps
+    const colCount = Math.floor((rootWidth + gapWidth) / (gapWidth + cardWidth));
+    return colCount;
+};
+
+exports.CardGrid = CardGrid;
+//# sourceMappingURL=CardGrid-73fa1977.js.map

package/cjs/CardGrid-73fa1977.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardGrid-73fa1977.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":["useRef","multiVariantStyles","classNames","styles","useLayoutEffect","useAnimation","useMemo","mergeRefs","_jsx","useId","TabbableModeContext","FocusTrap","memo","useState","useEffect","useCallback","useTabbableModeSet","keyExtractor","useCurrentKey","getPrevNextKeyByCount","useCollectionFocusRing","isKeyDefined","getFirstVisibleKey","findElementByKey","handleSelectionRange","useSelection","Selector","containsKey","getViewportConfig","Grid","LoadMoreCollection","mergeProps","SkeletonContainer","Skeleton","LOADMORE_STYLE_CLASS"],"mappings":"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"}

package/cjs/CheckboxRadioContext-3ff9908f.js

@@ -0,0 +1,19 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var preact = require('preact');
+var hooks = require('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 = preact.createContext({});
+const useCheckboxRadioContext = () => hooks.useContext(CheckboxRadioContext);
+
+exports.CheckboxRadioContext = CheckboxRadioContext;
+exports.useCheckboxRadioContext = useCheckboxRadioContext;
+//# sourceMappingURL=CheckboxRadioContext-3ff9908f.js.map

package/cjs/CheckboxRadioContext-3ff9908f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxRadioContext-3ff9908f.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":["createContext","useContext"],"mappings":";;;;;;AAAA;;;;;;AAMG;AASH,MAAM,oBAAoB,GAAGA,oBAAa,CACxC,EAA+B,EAC/B;AACI,MAAA,uBAAuB,GAAG,MAAMC,gBAAU,CAAC,oBAAoB;;;;;"}

package/cjs/Chip-61eaa3fe.js

@@ -0,0 +1,30 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks_UNSAFE_useActionable = require('./hooks/UNSAFE_useActionable.js');
+var hooks = require('preact/hooks');
+var hooks_UNSAFE_useTabbableMode = require('./hooks/UNSAFE_useTabbableMode.js');
+var UNSAFE_Chip_themes_ChipStyles_css = require('./UNSAFE_Chip/themes/ChipStyles.css.js');
+var hooks_UNSAFE_useInteractionStyle = require('./hooks/UNSAFE_useInteractionStyle.js');
+var utils_UNSAFE_mergeProps = require('./utils/UNSAFE_mergeProps.js');
+
+function Chip({ isSelected, isDisabled, 'aria-label': accessibleLabel, children, onToggle }) {
+    const handleAction = hooks.useCallback(() => {
+        onToggle?.({ previousValue: isSelected, value: !isSelected });
+    }, [isSelected, onToggle]);
+    const { actionableProps } = hooks_UNSAFE_useActionable.useActionable(handleAction);
+    const { interactionProps, applyActiveStyle, applyHoverStyle, applyPseudoHoverStyle } = hooks_UNSAFE_useInteractionStyle.useInteractionStyle();
+    const mergedProps = utils_UNSAFE_mergeProps.mergeProps(actionableProps, interactionProps);
+    const classes = UNSAFE_Chip_themes_ChipStyles_css.multiVariantStyles({
+        disabled: isDisabled ? 'isDisabled' : 'notDisabled',
+        hover: applyHoverStyle && !isDisabled && !isSelected ? 'isHover' : 'notHover',
+        pseudoHover: applyPseudoHoverStyle && !isDisabled && !isSelected ? 'isPseudoHover' : 'notPseudoHover',
+        active: isSelected || applyActiveStyle ? 'isActive' : 'notActive'
+    });
+    const { isTabbable } = hooks_UNSAFE_useTabbableMode.useTabbableMode();
+    return isDisabled ? (jsxRuntime.jsx("div", { class: classes, children: children })) : (jsxRuntime.jsx("div", { ...mergedProps, class: classes, tabIndex: isTabbable ? 0 : -1, "aria-label": accessibleLabel, role: "switch", "aria-checked": isSelected ? 'true' : 'false', children: children }));
+}
+
+exports.Chip = Chip;
+//# sourceMappingURL=Chip-61eaa3fe.js.map

package/cjs/Chip-61eaa3fe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip-61eaa3fe.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":["useCallback","useActionable","useInteractionStyle","mergeProps","multiVariantStyles","useTabbableMode","_jsx"],"mappings":";;;;;;;;;;;AAqCgB,SAAA,IAAI,CAAC,EACnB,UAAU,EACV,UAAU,EACV,YAAY,EAAE,eAAe,EAC7B,QAAQ,EACR,QAAQ,EACF,EAAA;AACN,IAAA,MAAM,YAAY,GAAGA,iBAAW,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,GAAGC,wCAAa,CAAC,YAAY,CAAC,CAAC;AACxD,IAAA,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,EAAE,qBAAqB,EAAE,GAClFC,oDAAmB,EAAE,CAAC;IAExB,MAAM,WAAW,GAAGC,kCAAU,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IAElE,MAAM,OAAO,GAAGC,oDAAkB,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,GAAGC,4CAAe,EAAE,CAAC;IAEzC,OAAO,UAAU,IACfC,cAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EAAG,QAAA,EAAA,QAAQ,EAAO,CAAA,KAErCA,cAAA,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;;;;"}