@oracle/oraclejet-preact 15.1.2 → 15.1.4

package/cjs/CheckboxRadioContext-36a80daa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxRadioContext-36a80daa.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-74ba1dc7.js

@@ -0,0 +1,30 @@
+/* @oracle/oraclejet-preact: 15.1.4 */
+'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-74ba1dc7.js.map

package/cjs/Chip-74ba1dc7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip-74ba1dc7.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;;;;"}

package/cjs/ClearIcon-e29b7fa0.js

@@ -0,0 +1,24 @@
+/* @oracle/oraclejet-preact: 15.1.4 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var hooks_UNSAFE_usePress = require('./hooks/UNSAFE_usePress.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+
+
+var clearIconStyles = 'ClearIconStyles_clearIconStyles__8wwy0m0';
+
+const noop = () => { };
+function ClearIcon({ onClick }) {
+    const killEvent = hooks.useCallback((event) => {
+        event.preventDefault();
+    }, []);
+    const { pressProps } = hooks_UNSAFE_usePress.usePress(onClick ?? noop);
+    const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const clearStr = translations.formControl_clear();
+    return (jsxRuntime.jsx("span", { "aria-hidden": "true", class: clearIconStyles, tabIndex: -1, onMouseDown: killEvent, title: clearStr, ...pressProps, children: jsxRuntime.jsx("svg", { height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.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" }) }) }));
+}
+
+exports.ClearIcon = ClearIcon;
+//# sourceMappingURL=ClearIcon-e29b7fa0.js.map

package/cjs/ClearIcon-e29b7fa0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearIcon-e29b7fa0.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":["useCallback","usePress","useTranslationBundle","_jsx"],"mappings":";;;;;;;;;;;AAUA,MAAM,IAAI,GAAG,MAAK,GAAG,CAAC;AAEN,SAAA,SAAS,CAAC,EAAE,OAAO,EAAS,EAAA;AAC1C,IAAA,MAAM,SAAS,GAAGA,iBAAW,CAAC,CAAC,KAAY,KAAI;QAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,EAAE,UAAU,EAAE,GAAGC,8BAAQ,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC;AACjD,IAAA,MAAM,YAAY,GAAGC,sDAAoB,CAAa,0BAA0B,CAAC,CAAC;AAClF,IAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,iBAAiB,EAAE,CAAC;IAElD,QACEC,cACc,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,cAAK,CAAA,KAAA,EAAA,EAAA,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAC,4BAA4B,EAChF,QAAA,EAAAA,cAAA,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/cjs/Collapsible-07476b47.js

@@ -0,0 +1,201 @@
+/* @oracle/oraclejet-preact: 15.1.4 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var hooks_UNSAFE_useId = require('./hooks/UNSAFE_useId.js');
+var preact = require('preact');
+require('./utils/UNSAFE_classNames.js');
+var hooks_UNSAFE_useComponentTheme = require('./hooks/UNSAFE_useComponentTheme.js');
+require('./UNSAFE_Flex.js');
+require('./UNSAFE_Divider.js');
+require('./PRIVATE_ThemedIcons/ExpandIcon.js');
+var PRIVATE_ThemedIcons_CollapseIcon = require('./PRIVATE_ThemedIcons/CollapseIcon.js');
+require('./PRIVATE_ThemedIcons/CollapseUpIcon.js');
+var index = require('./index-dc455c90.js');
+var index$1 = require('./index-a1a37253.js');
+var hooks_UNSAFE_usePress = require('./hooks/UNSAFE_usePress.js');
+var UNSAFE_Collapsible_themes_redwood_CollapsibleTheme = require('./UNSAFE_Collapsible/themes/redwood/CollapsibleTheme.js');
+var classNames = require('./classNames-e5072f18.js');
+var Flex = require('./Flex-f78eb039.js');
+var Divider = require('./Divider-6f6ffdeb.js');
+require('./hooks/UNSAFE_useAnimation.js');
+var useAnimation = require('./useAnimation-74e653c1.js');
+
+/**
+ * Header icon subcomponent
+ */
+const CollapsibleHeaderIcon = ({ isExpanded, isDisabled, iconPosition }) => {
+    const color = isDisabled ? 'disabled' : 'primary';
+    const startIcon = iconPosition === 'start' && isExpanded ? index.SvgChevronDown : PRIVATE_ThemedIcons_CollapseIcon.CollapseIcon;
+    const endIcon = iconPosition === 'end' && isExpanded ? index$1.SvgChevronUp : index.SvgChevronDown;
+    const Icon = iconPosition === 'start' ? startIcon : endIcon;
+    return jsxRuntime.jsx(Icon, { size: "6x", color: color });
+};
+
+/**
+ * Header subcomponent
+ */
+const CollapsibleHeader = ({ children, id, contentId, isDisabled, isExpanded, iconPosition, variant = 'basic', toggleHandler, accessibleLabel, accessibleLabelId }) => {
+    const [hasFocus, setFocus] = hooks.useState(false);
+    const isMouseDown = hooks.useRef(false);
+    const { classes, styles } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_Collapsible_themes_redwood_CollapsibleTheme.CollapsibleRedwoodTheme, {
+        disabled: isDisabled ? 'isDisabled' : 'notDisabled',
+        divider: variant === 'horizontal-rule' ? 'hasDivider' : 'noDivider',
+        focused: hasFocus ? 'isFocused' : 'notFocused'
+    });
+    const childrenClasses = classNames.classNames([
+        styles.headerChildrenStyle,
+        iconPosition === 'end' && styles.iconEndStyle,
+        iconPosition === 'start' && styles.iconStartStyle
+    ]);
+    const pressHandler = hooks.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 } = hooks_UNSAFE_usePress.usePress(pressHandler, {
+        isDisabled,
+        isRepeat: false
+    });
+    // if focused, we want to render the focus highlight on the collapsible header div
+    const onFocus = hooks.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 = () => (jsxRuntime.jsxs(preact.Fragment, { children: [iconPosition === 'end' && jsxRuntime.jsx("div", { className: childrenClasses, children: children }), jsxRuntime.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: jsxRuntime.jsx(CollapsibleHeaderIcon, { iconPosition: iconPosition, isExpanded: isExpanded, isDisabled: isDisabled }) }), iconPosition === 'start' && jsxRuntime.jsx("div", { className: childrenClasses, children: children })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { id: id, className: classes, ...pressProps, children: jsxRuntime.jsx(Flex.Flex, { align: "center", justify: iconPosition === 'start' ? 'start' : 'between', children: getHeader() }) }), variant === 'horizontal-rule' && jsxRuntime.jsx(Divider.Divider, {})] }));
+};
+
+const CollapsibleContent = ({ children, id, isExpanded, onTransitionEnd }) => {
+    const [state, setState] = hooks.useState(isExpanded ? 'expanding' : 'unmounted');
+    const { styles } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_Collapsible_themes_redwood_CollapsibleTheme.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 = hooks.useRef({
+        overflowY: 'hidden',
+        maxHeight: isExpanded ? 'none' : '0'
+    });
+    hooks.useEffect(() => {
+        // Ignore state update on initial render
+        if (state === 'unmounted' && !isExpanded) {
+            return;
+        }
+        setState(isExpanded ? 'expanding' : 'collapsing');
+    }, [isExpanded, state]);
+    const { nodeRef } = useAnimation.useAnimation(state, {
+        animationStates,
+        onAnimationEnd: ({ animationState }) => {
+            if (animationState === 'collapsing') {
+                setState('unmounted');
+            }
+            onTransitionEnd?.();
+        }
+    });
+    return (jsxRuntime.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 = hooks_UNSAFE_useId.useId();
+    const headerId = `oj-collapsible-header-${uniqueID}`;
+    const contentId = `oj-collapsible-content-${uniqueID}`;
+    /**
+     * Function handling toggle and invoking callback for collapsing/expanding
+     */
+    const toggleHandler = hooks.useCallback((target) => {
+        if (isDisabled) {
+            return;
+        }
+        onToggle?.({
+            value: !isExpanded,
+            target
+        });
+    }, [isDisabled, onToggle, isExpanded]);
+    /**
+     * Function that is triggerd when animation ends
+     */
+    const transitionEndHandler = hooks.useCallback(() => {
+        onTransitionEnd?.({
+            value: isExpanded
+        });
+    }, [onTransitionEnd, isExpanded]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CollapsibleHeader, { id: headerId, contentId: contentId, toggleHandler: toggleHandler, isDisabled: isDisabled, isExpanded: isExpanded, iconPosition: iconPosition, variant: variant, accessibleLabel: accessibleLabel, accessibleLabelId: accessibleLabelId, children: header }), jsxRuntime.jsx(CollapsibleContent, { id: contentId, isExpanded: isExpanded, onTransitionEnd: transitionEndHandler, children: children })] }));
+};
+
+exports.Collapsible = Collapsible;
+//# sourceMappingURL=Collapsible-07476b47.js.map

package/cjs/Collapsible-07476b47.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible-07476b47.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","CollapseIcon","CollapseUpIcon","_jsx","useState","useRef","useComponentTheme","CollapsibleRedwoodTheme","classNames","useCallback","usePress","_jsxs","Fragment","Flex","Divider","useEffect","useAnimation","useId","_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,oBAAU,GAAGC,6CAAY,CAAC;AACrF,IAAA,MAAM,OAAO,GAAG,YAAY,KAAK,KAAK,IAAI,UAAU,GAAGC,oBAAc,GAAGF,oBAAU,CAAC;AACnF,IAAA,MAAM,IAAI,GAAG,YAAY,KAAK,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IAE5D,OAAOG,cAAA,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,GAAGC,cAAQ,CAAU,KAAK,CAAC,CAAC;AACtD,IAAA,MAAM,WAAW,GAAGC,YAAM,CAAU,KAAK,CAAC,CAAC;IAE3C,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAGC,gDAAiB,CAC3CC,0EAAuB,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,GAAGC,qBAAU,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,GAAGC,iBAAW,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,GAAGC,8BAAQ,CAAC,YAAY,EAAE;QAC5C,UAAU;AACV,QAAA,QAAQ,EAAE,KAAK;AAChB,KAAA,CAAC,CAAC;;AAGH,IAAA,MAAM,OAAO,GAAGD,iBAAW,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,OAChBE,gBAACC,eAAQ,EAAA,EAAA,QAAA,EAAA,CACN,YAAY,KAAK,KAAK,IAAIT,cAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,eAAe,EAAA,QAAA,EAAG,QAAQ,EAAO,CAAA,EAC5EA,cACE,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,eAAC,qBAAqB,EAAA,EACpB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,EACE,CAAA,EACL,YAAY,KAAK,OAAO,IAAIA,cAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,eAAe,EAAA,QAAA,EAAG,QAAQ,EAAO,CAAA,CAAA,EAAA,CACrE,CACZ,CAAC;IAEF,QACEQ,kDACER,cAAK,CAAA,KAAA,EAAA,EAAA,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAA,GAAM,UAAU,EAC7C,QAAA,EAAAA,cAAA,CAACU,SAAI,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,IAAIV,eAACW,eAAO,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,GAAGV,cAAQ,CAAS,UAAU,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;IAEnF,MAAM,EAAE,MAAM,EAAE,GAAGE,gDAAiB,CAA2BC,0EAAuB,CAAC,CAAC;AAExF;;;;;;;;AAQG;IACH,MAAM,mBAAmB,GAAGF,YAAM,CAAoB;AACpD,QAAA,SAAS,EAAE,QAAQ;QACnB,SAAS,EAAE,UAAU,GAAG,MAAM,GAAG,GAAG;AACrC,KAAA,CAAC,CAAC;IAEHU,eAAS,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,GAAGC,yBAAY,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,QACEb,cACE,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,GAAGc,wBAAK,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,GAAGR,iBAAW,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,GAAGA,iBAAW,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,QACEE,eAAA,CAAAO,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEf,cAAC,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,cAAA,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/cjs/CollapsibleVariants.styles.css

@@ -1,11 +1,11 @@
-.CollapsibleVariants_multiVariantStyles_disabled_isDisabled__z4ex2d0 {
+.CollapsibleVariants_multiVariantStyles_disabled_isDisabled__b7rfjp0 {
   cursor: auto;
   color: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-disabled);
 }
-.CollapsibleVariants_multiVariantStyles_divider_hasDivider__z4ex2d2 {
+.CollapsibleVariants_multiVariantStyles_divider_hasDivider__b7rfjp2 {
   padding-bottom: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
 }
-.CollapsibleVariants_multiVariantStyles_focused_isFocused__z4ex2d4 {
+.CollapsibleVariants_multiVariantStyles_focused_isFocused__b7rfjp4 {
   outline-style: dotted;
   outline-offset: 0px;
   outline-width: 1px;

package/cjs/CollapsibleVariants.styles2.css

@@ -1,11 +1,11 @@
-.CollapsibleVariants_multiVariantStyles_disabled_isDisabled__b7rfjp0 {
+.CollapsibleVariants_multiVariantStyles_disabled_isDisabled__z4ex2d0 {
   cursor: auto;
   color: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-disabled);
 }
-.CollapsibleVariants_multiVariantStyles_divider_hasDivider__b7rfjp2 {
+.CollapsibleVariants_multiVariantStyles_divider_hasDivider__z4ex2d2 {
   padding-bottom: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
 }
-.CollapsibleVariants_multiVariantStyles_focused_isFocused__b7rfjp4 {
+.CollapsibleVariants_multiVariantStyles_focused_isFocused__z4ex2d4 {
   outline-style: dotted;
   outline-offset: 0px;
   outline-width: 1px;

package/cjs/Collection-c891c326.js

@@ -0,0 +1,18 @@
+/* @oracle/oraclejet-preact: 15.1.4 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+
+/**
+ * Component that renders an array of data.
+ */
+function Collection({ items, children }) {
+    return (jsxRuntime.jsx(preact.Fragment, { children: items.map((data, index) => {
+            const ctx = { index, data };
+            return children(ctx);
+        }) }));
+}
+
+exports.Collection = Collection;
+//# sourceMappingURL=Collection-c891c326.js.map

package/cjs/Collection-c891c326.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collection-c891c326.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","Fragment"],"mappings":";;;;;;AAwBA;;AAEG;SACa,UAAU,CAAI,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAA;AACzD,IAAA,QACEA,cAAA,CAACC,eAAQ,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;;;;"}

package/cjs/ColorUtils-65f5e1f7.js

@@ -0,0 +1,252 @@
+/* @oracle/oraclejet-preact: 15.1.4 */
+'use strict';
+
+/**
+ *  Returns a specifed channel value from a css color specification (#, rgb(), rgba()).
+ *  If an alpha channel is requested and a # or rgb string is supplied,
+ *  an implied value of 1 is returned.
+ *  @private
+ *  @param  {String} colorString  The color string.
+ *  @return The channel value as a decimal number (between 0 and 255).
+ */
+function getRGBA(colorString) {
+    let clr = colorString;
+    // If clr is a named color, then convert into usable format
+    const namedColor = getColorFromName(clr);
+    if (namedColor)
+        clr = namedColor;
+    // Alpha support
+    // if (clr.charAt(0) === '#') return clr.length > 7 ? parseInt(clr.substring(1, 3), 16) / 255 : 1;
+    const x1 = clr.indexOf('(');
+    let ar;
+    if (x1 < 0) {
+        ar = [];
+        //: parse channels for different # formats
+        if (clr.length > 7) {
+            //  #aarrggbb format
+            ar[0] = parseInt(clr.substr(3, 2), 16);
+            ar[1] = parseInt(clr.substr(5, 2), 16);
+            ar[2] = parseInt(clr.substr(7, 2), 16);
+            ar[3] = parseInt(clr.substr(1, 2), 16) / 255;
+        }
+        else {
+            //  #rrggbb format
+            ar[0] = parseInt(clr.substr(1, 2), 16);
+            ar[1] = parseInt(clr.substr(3, 2), 16);
+            ar[2] = parseInt(clr.substr(5, 2), 16);
+            ar[3] = 1;
+        }
+    }
+    else {
+        //  rgb() or rgba() format
+        ar = clr
+            .substring(x1 + 1)
+            .match(/[^,|)]+/gm)
+            ?.map((x) => parseFloat(x));
+    }
+    return ar;
+}
+/**
+ * Returns the contrast ratio between two relative luminance values. The ratio can range from 1 to 21.
+ * Follows the formula in www.w3.org/TR/WCAG20/#contrast-ratiodef
+ * @param {number} luminance1
+ * @param {number} luminance2
+ * @return {number} The contrast ratio.
+ */
+function getContrastRatioByLuminance(luminance1, luminance2) {
+    const l1 = luminance1 + 0.05;
+    const l2 = luminance2 + 0.05;
+    return l1 > l2 ? l1 / l2 : l2 / l1;
+}
+/**
+ * Returns the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white.
+ * Follows the formula in www.w3.org/TR/WCAG20/#relativeluminancedef
+ * @param {string} color
+ * @return {number} The relative luminance of the provided color.
+ */
+function getLuminance(color) {
+    const transform = function (c) {
+        const cs = c / 255;
+        return cs < 0.03928 ? cs / 12.92 : Math.pow((cs + 0.055) / 1.055, 2.4);
+    };
+    const rgba = getRGBA(color);
+    const r = rgba?.[0];
+    const g = rgba?.[1];
+    const b = rgba?.[2];
+    return 0.2126 * transform(r) + 0.7152 * transform(g) + 0.0722 * transform(b);
+}
+/**
+ * Returns a contrasting text color for the specified background color.
+ * @param {string} backgroundColor The background color.
+ * @return {string} A constrasting color for use on text.
+ */
+function getContrastingTextColor(backgroundColor) {
+    // TODO: Retrieve from cache if it has been computed before
+    const luminance = getLuminance(backgroundColor);
+    const whiteContrast = getContrastRatioByLuminance(luminance, 1);
+    const blackContrast = getContrastRatioByLuminance(luminance, 0);
+    const textColor = whiteContrast > blackContrast ? '#FFFFFF' : '#000000';
+    return textColor;
+}
+/**
+ * colormap const
+ */
+const colorMap = {};
+colorMap['aliceblue'] = '#f0f8ff';
+colorMap['antiquewhite'] = '#faEbd7';
+colorMap['aqua'] = '#00ffff';
+colorMap['aquamarine'] = '#7fffd4';
+colorMap['azure'] = '#f0ffff';
+colorMap['beige'] = '#f5f5dc';
+colorMap['bisque'] = '#ffE4c4';
+colorMap['black'] = '#000000';
+colorMap['blanchedalmond'] = '#ffEbcd';
+colorMap['blue'] = '#0000ff';
+colorMap['blueviolet'] = '#8a2bE2';
+colorMap['brown'] = '#a52a2a';
+colorMap['burlywood'] = '#dEb887';
+colorMap['cadetblue'] = '#5f9Ea0';
+colorMap['chartreuse'] = '#7fff00';
+colorMap['chocolate'] = '#d2691E';
+colorMap['coral'] = '#ff7f50';
+colorMap['cornflowerblue'] = '#6495Ed';
+colorMap['cornsilk'] = '#fff8dc';
+colorMap['crimson'] = '#dc143c';
+colorMap['cyan'] = '#00ffff';
+colorMap['darkblue'] = '#00008b';
+colorMap['darkcyan'] = '#008b8b';
+colorMap['darkgoldenrod'] = '#b8860b';
+colorMap['darkgray'] = '#a9a9a9';
+colorMap['darkgreen'] = '#006400';
+colorMap['darkkhaki'] = '#bdb76b';
+colorMap['darkmagenta'] = '#8b008b';
+colorMap['darkolivegreen'] = '#556b2f';
+colorMap['darkorange'] = '#ff8c00';
+colorMap['darkorchid'] = '#9932cc';
+colorMap['darkred'] = '#8b0000';
+colorMap['darksalmon'] = '#E9967a';
+colorMap['darkseagreen'] = '#8fbc8f';
+colorMap['darkslateblue'] = '#483d8b';
+colorMap['darkslategray'] = '#2f4f4f';
+colorMap['darkturquoise'] = '#00cEd1';
+colorMap['darkviolet'] = '#9400d3';
+colorMap['deeppink'] = '#ff1493';
+colorMap['deepskyblue'] = '#00bfff';
+colorMap['dimgray'] = '#696969';
+colorMap['dodgerblue'] = '#1E90ff';
+colorMap['firebrick'] = '#b22222';
+colorMap['floralwhite'] = '#fffaf0';
+colorMap['forestgreen'] = '#228b22';
+colorMap['fuchsia'] = '#ff00ff';
+colorMap['gainsboro'] = '#dcdcdc';
+colorMap['ghostwhite'] = '#f8f8ff';
+colorMap['gold'] = '#ffd700';
+colorMap['goldenrod'] = '#daa520';
+colorMap['gray'] = '#808080';
+colorMap['green'] = '#008000';
+colorMap['greenyellow'] = '#adff2f';
+colorMap['honeydew'] = '#f0fff0';
+colorMap['hotpink'] = '#ff69b4';
+colorMap['indianred '] = '#cd5c5c';
+colorMap['indigo '] = '#4b0082';
+colorMap['ivory'] = '#fffff0';
+colorMap['khaki'] = '#f0E68c';
+colorMap['lavender'] = '#E6E6fa';
+colorMap['lavenderblush'] = '#fff0f5';
+colorMap['lawngreen'] = '#7cfc00';
+colorMap['lemonchiffon'] = '#fffacd';
+colorMap['lightblue'] = '#add8E6';
+colorMap['lightcoral'] = '#f08080';
+colorMap['lightcyan'] = '#E0ffff';
+colorMap['lightgoldenrodyellow'] = '#fafad2';
+colorMap['lightgray'] = '#d3d3d3';
+colorMap['lightgreen'] = '#90EE90';
+colorMap['lightpink'] = '#ffb6c1';
+colorMap['lightsalmon'] = '#ffa07a';
+colorMap['lightseagreen'] = '#20b2aa';
+colorMap['lightskyblue'] = '#87cEfa';
+colorMap['lightslategray'] = '#778899';
+colorMap['lightsteelblue'] = '#b0c4dE';
+colorMap['lightyellow'] = '#ffffE0';
+colorMap['lime'] = '#00ff00';
+colorMap['limegreen'] = '#32cd32';
+colorMap['linen'] = '#faf0E6';
+colorMap['magenta'] = '#ff00ff';
+colorMap['maroon'] = '#800000';
+colorMap['mediumaquamarine'] = '#66cdaa';
+colorMap['mediumblue'] = '#0000cd';
+colorMap['mediumorchid'] = '#ba55d3';
+colorMap['mediumpurple'] = '#9370db';
+colorMap['mediumseagreen'] = '#3cb371';
+colorMap['mediumslateblue'] = '#7b68EE';
+colorMap['mediumspringgreen'] = '#00fa9a';
+colorMap['mediumturquoise'] = '#48d1cc';
+colorMap['mediumvioletred'] = '#c71585';
+colorMap['midnightblue'] = '#191970';
+colorMap['mintcream'] = '#f5fffa';
+colorMap['mistyrose'] = '#ffE4E1';
+colorMap['moccasin'] = '#ffE4b5';
+colorMap['navajowhite'] = '#ffdEad';
+colorMap['navy'] = '#000080';
+colorMap['oldlace'] = '#fdf5E6';
+colorMap['olive'] = '#808000';
+colorMap['olivedrab'] = '#6b8E23';
+colorMap['orange'] = '#ffa500';
+colorMap['orangered'] = '#ff4500';
+colorMap['orchid'] = '#da70d6';
+colorMap['palegoldenrod'] = '#EEE8aa';
+colorMap['palegreen'] = '#98fb98';
+colorMap['paleturquoise'] = '#afEEEE';
+colorMap['palevioletred'] = '#db7093';
+colorMap['papayawhip'] = '#ffEfd5';
+colorMap['peachpuff'] = '#ffdab9';
+colorMap['peru'] = '#cd853f';
+colorMap['pink'] = '#ffc0cb';
+colorMap['plum'] = '#dda0dd';
+colorMap['powderblue'] = '#b0E0E6';
+colorMap['purple'] = '#800080';
+colorMap['rebeccapurple'] = '#663399';
+colorMap['red'] = '#ff0000';
+colorMap['rosybrown'] = '#bc8f8f';
+colorMap['royalblue'] = '#4169E1';
+colorMap['saddlebrown'] = '#8b4513';
+colorMap['salmon'] = '#fa8072';
+colorMap['sandybrown'] = '#f4a460';
+colorMap['seagreen'] = '#2E8b57';
+colorMap['seashell'] = '#fff5EE';
+colorMap['sienna'] = '#a0522d';
+colorMap['silver'] = '#c0c0c0';
+colorMap['skyblue'] = '#87cEEb';
+colorMap['slateblue'] = '#6a5acd';
+colorMap['slategray'] = '#708090';
+colorMap['snow'] = '#fffafa';
+colorMap['springgreen'] = '#00ff7f';
+colorMap['steelblue'] = '#4682b4';
+colorMap['tan'] = '#d2b48c';
+colorMap['teal'] = '#008080';
+colorMap['thistle'] = '#d8bfd8';
+colorMap['tomato'] = '#ff6347';
+colorMap['turquoise'] = '#40E0d0';
+colorMap['violet'] = '#EE82EE';
+colorMap['wheat'] = '#f5dEb3';
+colorMap['white'] = '#ffffff';
+colorMap['whitesmoke'] = '#f5f5f5';
+colorMap['yellow'] = '#ffff00';
+colorMap['yellowgreen'] = '#9acd32';
+colorMap['transparent'] = 'rgba(255,255,255,0)';
+/**
+ * Returns a color definition string from the named color.
+ * @param {String}  name  The color name.
+ * @type {String}
+ * @return  An #rrggbb color string.
+ */
+function getColorFromName(name) {
+    return colorMap[name.toLowerCase()];
+}
+
+exports.getColorFromName = getColorFromName;
+exports.getContrastRatioByLuminance = getContrastRatioByLuminance;
+exports.getContrastingTextColor = getContrastingTextColor;
+exports.getLuminance = getLuminance;
+exports.getRGBA = getRGBA;
+//# sourceMappingURL=ColorUtils-65f5e1f7.js.map