@oracle/oraclejet-preact 15.1.11 → 15.1.12

package/es/Skeleton-fe515a8b.js

@@ -0,0 +1,34 @@
+/* @oracle/oraclejet-preact: 15.1.12 */
+import { jsx } from 'preact/jsx-runtime';
+import './utils/UNSAFE_classNames.js';
+import { dimensionInterpolations } from './utils/UNSAFE_interpolations/dimensions.js';
+import { mergeInterpolations } from './utils/UNSAFE_mergeInterpolations.js';
+import { borderInterpolations } from './utils/UNSAFE_interpolations/borders.js';
+import { stringLiteralArray } from './utils/UNSAFE_arrayUtils.js';
+import { useComponentTheme } from './hooks/UNSAFE_useComponentTheme.js';
+import { SkeletonRedwoodTheme } from './UNSAFE_Skeleton/themes/redwood/SkeletonTheme.js';
+import { c as classNames } from './classNames-f31667fa.js';
+
+const dimensions = stringLiteralArray(['height', 'width']);
+const border = stringLiteralArray(['borderRadius']);
+// Create an array [dimensionInterpolations['height'], dimensionInterpolations['width']]
+const skeletonDimensionInterpolation = Array.from(dimensions, (x) => dimensionInterpolations[x]);
+const borderRadiusInterpolation = Array.from(border, (x) => borderInterpolations[x]);
+const interpolations = [
+    ...Object.values(borderRadiusInterpolation),
+    ...Object.values(skeletonDimensionInterpolation)
+];
+const SkeletonInterpolations = mergeInterpolations(interpolations);
+/**
+ * Skeleton component allows the appropriate skeleton to be rendered based on the
+ * property values
+ **/
+function Skeleton({ ...props }) {
+    const { classes: skeletonBase } = useComponentTheme(SkeletonRedwoodTheme);
+    const classes = classNames([skeletonBase]);
+    const skeletonDimensions = SkeletonInterpolations({ width: '100%', borderRadius: 0, ...props });
+    return jsx("div", { style: skeletonDimensions, class: classes });
+}
+
+export { Skeleton as S };
+//# sourceMappingURL=Skeleton-fe515a8b.js.map

package/es/Skeleton-fe515a8b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton-fe515a8b.js","sources":["../../src/UNSAFE_Skeleton/Skeleton.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 { classNames } from '../utils/UNSAFE_classNames';\nimport { dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { borderInterpolations } from '../utils/UNSAFE_interpolations/borders';\nimport type { BorderProps } from '../utils/UNSAFE_interpolations/borders';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\nimport { WithRequired } from '../utils/UNSAFE_typeUtils';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { SkeletonRedwoodTheme } from './themes/redwood/SkeletonTheme';\n\nconst dimensions = stringLiteralArray(['height', 'width']);\ntype Dimension = typeof dimensions[number];\nconst border = stringLiteralArray(['borderRadius']);\ntype BorderRadius = typeof border[number];\n\n// This component has some StyleInterpolationProps. Those are the height and width properties of the SkeletonProps.\ntype StyleInterpolationProps = Pick<DimensionProps, Dimension>;\n// This component has some BorderRadiusProps, which is the borderRadius property of the SkeletonProps.\ntype BorderRadiusProps = Pick<BorderProps, BorderRadius>;\n//This type has StyleInterpolationProps and BorderRadiusProps with the height prop made required.\ntype SkeletonProps = WithRequired<StyleInterpolationProps, 'height'> & BorderRadiusProps;\n\n// Create an array [dimensionInterpolations['height'], dimensionInterpolations['width']]\nconst skeletonDimensionInterpolation = Array.from(dimensions, (x) => dimensionInterpolations[x]);\nconst borderRadiusInterpolation = Array.from(border, (x) => borderInterpolations[x]);\nconst interpolations = [\n  ...Object.values(borderRadiusInterpolation),\n  ...Object.values(skeletonDimensionInterpolation)\n];\n\nconst SkeletonInterpolations = mergeInterpolations<SkeletonProps>(interpolations);\n/**\n * Skeleton component allows the appropriate skeleton to be rendered based on the\n * property values\n **/\nexport function Skeleton({ ...props }: SkeletonProps) {\n  const { classes: skeletonBase } = useComponentTheme(SkeletonRedwoodTheme);\n  const classes = classNames([skeletonBase]);\n\n  const skeletonDimensions = SkeletonInterpolations({ width: '100%', borderRadius: 0, ...props });\n  return <div style={skeletonDimensions} class={classes} />;\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;AAkBA,MAAM,UAAU,GAAG,kBAAkB,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AAE3D,MAAM,MAAM,GAAG,kBAAkB,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;AAUpD;AACA,MAAM,8BAA8B,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,KAAK,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;AACjG,MAAM,yBAAyB,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;AACrF,MAAM,cAAc,GAAG;AACrB,IAAA,GAAG,MAAM,CAAC,MAAM,CAAC,yBAAyB,CAAC;AAC3C,IAAA,GAAG,MAAM,CAAC,MAAM,CAAC,8BAA8B,CAAC;CACjD,CAAC;AAEF,MAAM,sBAAsB,GAAG,mBAAmB,CAAgB,cAAc,CAAC,CAAC;AAClF;;;AAGI;SACY,QAAQ,CAAC,EAAE,GAAG,KAAK,EAAiB,EAAA;IAClD,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC1E,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;AAE3C,IAAA,MAAM,kBAAkB,GAAG,sBAAsB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;IAChG,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,OAAO,EAAA,CAAI,CAAC;AAC5D;;;;"}

package/es/SkeletonContainer-3f292965.js

@@ -0,0 +1,29 @@
+/* @oracle/oraclejet-preact: 15.1.12 */
+import { jsx } from 'preact/jsx-runtime';
+import { useState, useEffect } from 'preact/hooks';
+import './utils/UNSAFE_classNames.js';
+import { skeletonStyles } from './PRIVATE_List/themes/ListStyles.css.js';
+import { c as classNames } from './classNames-f31667fa.js';
+
+/**
+ * Allows to specify the time delay for rendering the component
+ **/
+const timerValue = 50;
+/**
+ * SkeletonContainer renders 'minimumCount' number of skeletons
+ * of the variant specified from its child element - Skeleton's prop after
+ * 'timerValue' ms delay
+ **/
+function SkeletonContainer({ children, minimumCount = 1 }) {
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(() => {
+        setTimeout(() => {
+            setIsVisible(true);
+        }, timerValue);
+    }, []);
+    const containerClasses = classNames([skeletonStyles.container]);
+    return isVisible && children ? (jsx("div", { class: containerClasses, role: "presentation", children: [...Array(minimumCount)].map((_element, index) => children(index)) })) : null;
+}
+
+export { SkeletonContainer as S };
+//# sourceMappingURL=SkeletonContainer-3f292965.js.map

package/es/SkeletonContainer-3f292965.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonContainer-3f292965.js","sources":["../../src/PRIVATE_List/SkeletonContainer.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 { useState, useEffect } from 'preact/hooks';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { skeletonStyles } from './themes/ListStyles.css';\n\ntype Props = {\n  /**\n   * Allows to pass and access the properties from child elements\n   **/\n  children?: (index: number) => ComponentChildren;\n  /**\n   * Allows to specify number of skeletons to be rendered on initial load\n   **/\n  minimumCount?: number;\n};\n\n/**\n * Allows to specify the time delay for rendering the component\n **/\nconst timerValue = 50;\n\n/**\n * SkeletonContainer renders 'minimumCount' number of skeletons\n * of the variant specified from its child element - Skeleton's prop after\n * 'timerValue' ms delay\n **/\nexport function SkeletonContainer({ children, minimumCount = 1 }: Props) {\n  const [isVisible, setIsVisible] = useState(false);\n\n  useEffect(() => {\n    setTimeout(() => {\n      setIsVisible(true);\n    }, timerValue);\n  }, []);\n\n  const containerClasses = classNames([skeletonStyles.container]);\n  return isVisible && children ? (\n    <div class={containerClasses} role=\"presentation\">\n      {[...Array(minimumCount)].map((_element, index) => children(index))}\n    </div>\n  ) : null;\n}\n"],"names":["_jsx"],"mappings":";;;;;;;AAuBA;;AAEI;AACJ,MAAM,UAAU,GAAG,EAAE,CAAC;AAEtB;;;;AAII;AACE,SAAU,iBAAiB,CAAC,EAAE,QAAQ,EAAE,YAAY,GAAG,CAAC,EAAS,EAAA;IACrE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,SAAS,CAAC,MAAK;QACb,UAAU,CAAC,MAAK;YACd,YAAY,CAAC,IAAI,CAAC,CAAC;SACpB,EAAE,UAAU,CAAC,CAAC;KAChB,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,UAAU,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC;IAChE,OAAO,SAAS,IAAI,QAAQ,IAC1BA,aAAK,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAC,cAAc,EAAA,QAAA,EAC9C,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,CAAC,EAC/D,CAAA,IACJ,IAAI,CAAC;AACX;;;;"}

package/es/Spacer-bbdbe8a2.js

@@ -0,0 +1,16 @@
+/* @oracle/oraclejet-preact: 15.1.12 */
+import { jsx } from 'preact/jsx-runtime';
+import { dimensionInterpolations } from './utils/UNSAFE_interpolations/dimensions.js';
+import { mergeInterpolations } from './utils/UNSAFE_mergeInterpolations.js';
+import './utils/UNSAFE_interpolations/flexitem.js';
+import { f as flexitemInterpolations } from './flexitem-5515e3e0.js';
+
+const interpolations = [...Object.values(dimensionInterpolations), flexitemInterpolations.flex];
+const styleInterpolations = mergeInterpolations(interpolations);
+const Spacer = ({ ...props }) => {
+    const { class: cls, ...styles } = styleInterpolations(props);
+    return jsx("div", { class: cls, style: styles });
+};
+
+export { Spacer as S };
+//# sourceMappingURL=Spacer-bbdbe8a2.js.map

package/es/Spacer-bbdbe8a2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer-bbdbe8a2.js","sources":["../../src/UNSAFE_Spacer/Spacer.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 { dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { flexitemInterpolations } from '../utils/UNSAFE_interpolations/flexitem';\nimport type { FlexitemProps } from '../utils/UNSAFE_interpolations/flexitem';\n\ntype StyleProps = DimensionProps & Pick<FlexitemProps, 'flex'>;\n\ntype Props = StyleProps;\n\nconst interpolations = [...Object.values(dimensionInterpolations), flexitemInterpolations.flex];\n\nconst styleInterpolations = mergeInterpolations<Props>(interpolations);\n\nexport const Spacer = ({ ...props }: Props) => {\n  const { class: cls, ...styles } = styleInterpolations(props);\n  return <div class={cls} style={styles}></div>;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAiBA,MAAM,cAAc,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,CAAC,EAAE,sBAAsB,CAAC,IAAI,CAAC,CAAC;AAEhG,MAAM,mBAAmB,GAAG,mBAAmB,CAAQ,cAAc,CAAC,CAAC;AAE1D,MAAA,MAAM,GAAG,CAAC,EAAE,GAAG,KAAK,EAAS,KAAI;AAC5C,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC7D,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAA,CAAQ,CAAC;AAChD;;;;"}

package/es/SplitMenuButton-a6bec760.js

@@ -0,0 +1,173 @@
+/* @oracle/oraclejet-preact: 15.1.12 */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import './UNSAFE_ButtonLayout.js';
+import { NavDownIcon as SvgNavDown } from './PRIVATE_ThemedIcons/NavDownIcon.js';
+import './UNSAFE_Menu.js';
+import './UNSAFE_BaseButton.js';
+import './utils/UNSAFE_classNames.js';
+import { TabbableModeContext } from './hooks/UNSAFE_useTabbableMode.js';
+import { dimensionInterpolations } from './utils/UNSAFE_interpolations/dimensions.js';
+import { mergeInterpolations } from './utils/UNSAFE_mergeInterpolations.js';
+
+import { forwardRef } from 'preact/compat';
+import { useState, useCallback, useRef, useImperativeHandle } from 'preact/hooks';
+import { c as classNames } from './classNames-f31667fa.js';
+import { B as BaseButton } from './BaseButton-8be7acd2.js';
+import { B as ButtonLayout } from './ButtonLayout-bb311fcb.js';
+import { M as Menu } from './Menu-9f99b7f8.js';
+
+const compStyles = {
+  divider: "_1xr8g44",
+  disabledDivider: "_169igh1",
+  icon: "_1jp7ybx",
+  root: "fgkaxt",
+  childrenMargins: "_9gs9n8"
+};
+const menuButtonStyling = ['embedded', 'min', 'noBorderRadiusStart'];
+const menuButtonActiveStyling = [...menuButtonStyling, 'active'];
+const actionbuttonStyling = ['embedded', 'fill', 'noBorderRadiusEnd'];
+const actionButtonActiveStyling = [...actionbuttonStyling, 'active'];
+const interpolations = [...Object.values(dimensionInterpolations)];
+const styleInterpolations = mergeInterpolations(interpolations);
+/**
+ * A SplitMenuButton is a combined action and menu button.
+ */
+const SplitMenuButton = forwardRef(({
+  children,
+  label = '',
+  variant = 'outlined',
+  isDisabled = false,
+  size = 'md',
+  onAction,
+  ...props
+}, ref) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isActive, setIsActive] = useState(false);
+  const {
+    class: cls,
+    ...styles
+  } = styleInterpolations(props);
+  // SPACE or ENTER on root area invokes action, as does CLICK/TAP on LEFT SIDE ACTION AREA
+  // DOWN ARROW invokes menu, as does CLICK/TAP on RIGHT SIDE MENU AREA
+  const onKeyDown = useCallback(event => {
+    if (event.key === ' ' || event.key === 'Enter') {
+      setIsActive(true);
+    } else if (event.key == 'ArrowDown') {
+      !isDisabled && setIsMenuOpen(menuOpen => !menuOpen);
+      // Prevent page scroll for down arrow, user definitely wanted to show menu in this case.
+      // Don't prevent other keypress defaults, as user may want to hold SPACE down to scroll page.
+      event.preventDefault();
+    }
+  }, [isDisabled, setIsMenuOpen, setIsActive]);
+  const onKeyUp = useCallback(event => {
+    if (event.key === ' ' || event.key === 'Enter') {
+      !isDisabled && onAction && onAction();
+      setIsActive(false);
+    }
+  }, [isDisabled, onAction, setIsActive]);
+  const onBlur = useCallback(() => {
+    setIsActive(false);
+  }, [setIsActive]);
+  const _ref = useRef(null);
+  useImperativeHandle(ref, () => _ref.current, [_ref]);
+  const menuHandler = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+  const handleClose = e => {
+    //Focus has to be set on the launcher when menu is dismissed or
+    //item is "selected"
+    if (e.reason === 'dismissed' || e.reason === 'itemAction') {
+      _ref.current?.focus();
+    }
+    setIsMenuOpen(false);
+  };
+  const dividerStyles = classNames([compStyles.divider, isDisabled && compStyles.disabledDivider]);
+  const rootStyles = classNames([compStyles.root]);
+  // Using Span for top button allows us to avoid :hover state rendering by
+  // taking advantage of :enabled not on spans
+  const rootButton = () => {
+    return jsx(BaseButton, {
+      elementDetails: {
+        type: 'span'
+      },
+      ref: _ref,
+      isDisabled: isDisabled,
+      styling: ['container', 'min'],
+      variant: variant,
+      size: size,
+      "aria-label": label,
+      "aria-roledescription": "split menu button, press down arrow to invoke menu",
+      "aria-expanded": isMenuOpen,
+      children: jsxs(TabbableModeContext.Provider, {
+        value: {
+          isTabbable: false
+        },
+        children: [jsx(BaseButton, {
+          elementDetails: {
+            type: 'span'
+          },
+          variant: variant,
+          styling: getActionButtonStyling(isActive),
+          size: size,
+          isDisabled: isDisabled,
+          "aria-hidden": true,
+          onAction: onAction,
+          children: label
+        }), jsx("div", {
+          class: `${dividerStyles}`
+        }), jsx(BaseButton, {
+          elementDetails: {
+            type: 'span'
+          },
+          variant: variant,
+          styling: getMenuButtonStyling(isMenuOpen),
+          size: size,
+          isDisabled: isDisabled,
+          "aria-hidden": true,
+          onAction: menuHandler,
+          children: jsx(ButtonLayout, {
+            display: "icons",
+            startIcon: jsx(SvgNavDown, {}),
+            size: size,
+            styling: "embedded"
+          })
+        })]
+      })
+    });
+  };
+  if (isDisabled) {
+    return jsx("span", {
+      role: "toolbar",
+      class: `${rootStyles} ${cls}`,
+      style: styles,
+      children: rootButton()
+    });
+  } else {
+    return jsxs("span", {
+      role: "toolbar",
+      class: `${rootStyles} ${cls}`,
+      style: styles,
+      onKeyDown: !isDisabled && onKeyDown,
+      onKeyUp: onKeyUp,
+      onBlur: onBlur,
+      children: [rootButton(), jsx(Menu, {
+        anchorRef: _ref,
+        isOpen: isMenuOpen,
+        onClose: handleClose,
+        children: jsx("span", {
+          className: compStyles.childrenMargins,
+          children: children
+        })
+      })]
+    });
+  }
+});
+function getMenuButtonStyling(isActive) {
+  return isActive ? menuButtonActiveStyling : menuButtonStyling;
+}
+function getActionButtonStyling(isActive) {
+  return isActive ? actionButtonActiveStyling : actionbuttonStyling;
+}
+
+export { SplitMenuButton as S };
+//# sourceMappingURL=SplitMenuButton-a6bec760.js.map

package/es/SplitMenuButton-a6bec760.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitMenuButton-a6bec760.js","sources":["../../src/UNSAFE_SplitMenuButton/SplitMenuButton.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 { ButtonLayout } from '../UNSAFE_ButtonLayout';\nimport { NavDownIcon } from '../PRIVATE_ThemedIcons/NavDownIcon';\nimport { Menu } from '../UNSAFE_Menu';\n\nimport { BaseButton, StylingOptions } from '../UNSAFE_BaseButton';\n\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { TabbableModeContext } from '../hooks/UNSAFE_useTabbableMode';\nimport { dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\n\nimport { cssProps } from '@oracle/oraclejet-cssprops';\n\nimport { ComponentChildren } from 'preact';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { useCallback, useState, useRef, useImperativeHandle } from 'preact/hooks';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLElement>, 'title'>;\n\ntype WidthInterpolationProps = Pick<DimensionProps, 'width'>;\n\nexport type Props = IntrinsicProps &\n  WidthInterpolationProps & {\n    /**\n     * children - One or more MenuItems\n     */\n    children?: ComponentChildren;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The label rendered on the action side of the button.  Used\n     * to identify which child MenuItem action is invoked.\n     */\n    label?: string;\n\n    /**\n     * Indicates in what states the button has chrome (background and border).\n     *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n     * solid buttons. Outlined buttons are useful for secondary actions.\",\n     *     \"solid\"': \"Solid buttons stand out, and direct the user's attention to the\n     *  most important actions in the UI.\",\n     *     \"callToAction\"': \"A Call To Action (CTA) button guides the user to take or\n     * complete the action that is the main goal of the page or page section. There\n     * should only be one CTA button on a page at any given time.\",\n     \n     */\n    variant?: 'outlined' | 'solid' | 'callToAction';\n\n    /**\n     * The size indicates how large the button is rendered: \"sm\", \"md\" (default), \"lg\".\n     */\n    size?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Triggered when a button is clicked, whether by keyboard, mouse, or touch events.\n     */\n    onAction?: () => void;\n  };\n\nexport const compStyles = {\n  divider: cssProps`${{\n    borderTopWidth: '0px',\n    borderBottomWidth: '0px',\n    borderRightWidth: '0px',\n    borderLeftWidth: '1px',\n    borderStyle: 'solid',\n    height: '100%',\n    display: 'inline-flex',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color)'\n  }}`,\n\n  disabledDivider: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-disabled)'\n  }}`,\n\n  icon: cssProps`${{\n    display: 'contents'\n  }}`,\n\n  root: cssProps`${{\n    display: 'inline-block'\n  }}`,\n\n  childrenMargins: cssProps`${{\n    /* @ts-ignore */\n    '& > *': {\n      marginTop: '0 !important',\n      marginBottom: '0 !important',\n      marginLeft: '0 !important',\n      marginRight: '0 !important'\n    }\n  }}`\n};\n\nconst menuButtonStyling = ['embedded', 'min', 'noBorderRadiusStart'] as StylingOptions[];\nconst menuButtonActiveStyling = [...menuButtonStyling, 'active'] as StylingOptions[];\n\nconst actionbuttonStyling = ['embedded', 'fill', 'noBorderRadiusEnd'] as StylingOptions[];\nconst actionButtonActiveStyling = [...actionbuttonStyling, 'active'] as StylingOptions[];\n\nconst interpolations = [...Object.values(dimensionInterpolations)];\n\nconst styleInterpolations = mergeInterpolations<DimensionProps>(interpolations);\n\n/**\n * A SplitMenuButton is a combined action and menu button.\n */\nexport const SplitMenuButton = forwardRef(\n  (\n    {\n      children,\n      label = '',\n      variant = 'outlined',\n      isDisabled = false,\n      size = 'md',\n      onAction,\n      ...props\n    }: Props,\n    ref?: ForwardedRef<HTMLSpanElement>\n  ) => {\n    const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);\n    const [isActive, setIsActive] = useState<boolean>(false);\n    const { class: cls, ...styles } = styleInterpolations(props);\n\n    // SPACE or ENTER on root area invokes action, as does CLICK/TAP on LEFT SIDE ACTION AREA\n    // DOWN ARROW invokes menu, as does CLICK/TAP on RIGHT SIDE MENU AREA\n    const onKeyDown = useCallback(\n      (event: KeyboardEvent) => {\n        if (event.key === ' ' || event.key === 'Enter') {\n          setIsActive(true);\n        } else if (event.key == 'ArrowDown') {\n          !isDisabled && setIsMenuOpen((menuOpen: boolean) => !menuOpen);\n          // Prevent page scroll for down arrow, user definitely wanted to show menu in this case.\n          // Don't prevent other keypress defaults, as user may want to hold SPACE down to scroll page.\n          event.preventDefault();\n        }\n      },\n      [isDisabled, setIsMenuOpen, setIsActive]\n    );\n\n    const onKeyUp = useCallback(\n      (event: KeyboardEvent) => {\n        if (event.key === ' ' || event.key === 'Enter') {\n          !isDisabled && onAction && onAction();\n          setIsActive(false);\n        }\n      },\n      [isDisabled, onAction, setIsActive]\n    );\n\n    const onBlur = useCallback(() => {\n      setIsActive(false);\n    }, [setIsActive]);\n\n    const _ref = useRef<HTMLSpanElement>(null);\n    useImperativeHandle(ref!, () => _ref.current!, [_ref]);\n\n    const menuHandler = () => {\n      setIsMenuOpen(!isMenuOpen);\n    };\n\n    const handleClose = (e: any) => {\n      //Focus has to be set on the launcher when menu is dismissed or\n      //item is \"selected\"\n      if (e.reason === 'dismissed' || e.reason === 'itemAction') {\n        _ref.current?.focus();\n      }\n      setIsMenuOpen(false);\n    };\n\n    const dividerStyles = classNames([\n      compStyles.divider,\n      isDisabled && compStyles.disabledDivider\n    ]);\n\n    const rootStyles = classNames([compStyles.root]);\n\n    // Using Span for top button allows us to avoid :hover state rendering by\n    // taking advantage of :enabled not on spans\n    const rootButton = () => {\n      return (\n        <BaseButton\n          elementDetails={{ type: 'span' }}\n          ref={\n            _ref as ForwardedRef<HTMLButtonElement> &\n              ForwardedRef<HTMLAnchorElement> &\n              ForwardedRef<HTMLSpanElement>\n          }\n          isDisabled={isDisabled}\n          styling={['container', 'min']}\n          variant={variant}\n          size={size}\n          aria-label={label}\n          aria-roledescription=\"split menu button, press down arrow to invoke menu\"\n          aria-expanded={isMenuOpen}>\n          <TabbableModeContext.Provider value={{ isTabbable: false }}>\n            <BaseButton\n              elementDetails={{ type: 'span' }}\n              variant={variant}\n              styling={getActionButtonStyling(isActive)}\n              size={size}\n              isDisabled={isDisabled}\n              aria-hidden={true}\n              onAction={onAction}>\n              {label}\n            </BaseButton>\n            <div class={`${dividerStyles}`} />\n            <BaseButton\n              elementDetails={{ type: 'span' }}\n              variant={variant}\n              styling={getMenuButtonStyling(isMenuOpen)}\n              size={size}\n              isDisabled={isDisabled}\n              aria-hidden={true}\n              onAction={menuHandler}>\n              <ButtonLayout\n                display=\"icons\"\n                startIcon={<NavDownIcon />}\n                size={size}\n                styling=\"embedded\"></ButtonLayout>\n            </BaseButton>\n          </TabbableModeContext.Provider>\n        </BaseButton>\n      );\n    };\n\n    if (isDisabled) {\n      return (\n        <span role=\"toolbar\" class={`${rootStyles} ${cls}`} style={styles}>\n          {rootButton()}\n        </span>\n      );\n    } else {\n      return (\n        <span\n          role=\"toolbar\"\n          class={`${rootStyles} ${cls}`}\n          style={styles}\n          onKeyDown={!isDisabled && onKeyDown}\n          onKeyUp={onKeyUp}\n          onBlur={onBlur}>\n          {rootButton()}\n          <Menu anchorRef={_ref} isOpen={isMenuOpen} onClose={handleClose}>\n            <span className={compStyles.childrenMargins}>{children}</span>\n          </Menu>\n        </span>\n      );\n    }\n  }\n);\n\nfunction getMenuButtonStyling(isActive: boolean) {\n  return isActive ? menuButtonActiveStyling : menuButtonStyling;\n}\n\nfunction getActionButtonStyling(isActive: boolean) {\n  return isActive ? actionButtonActiveStyling : actionbuttonStyling;\n}\n"],"names":["compStyles","menuButtonStyling","menuButtonActiveStyling","actionbuttonStyling","actionButtonActiveStyling","interpolations","Object","values","dimensionInterpolations","styleInterpolations","mergeInterpolations","SplitMenuButton","forwardRef","children","label","variant","isDisabled","size","onAction","props","ref","class","cls","styles","onKeyDown","useCallback","event","key","setIsMenuOpen","menuOpen","onKeyUp","onBlur","setIsActive","_ref","useRef","useImperativeHandle","current","isMenuOpen","handleClose","e","focus","divider","_jsx","BaseButton","elementDetails","type","styling","_jsxs","TabbableModeContext","Provider","value","isTabbable","getActionButtonStyling","isActive","dividerStyles","getMenuButtonStyling","menuHandler","ButtonLayout","display","startIcon","NavDownIcon","role","rootStyles","style","rootButton","Menu","anchorRef","isOpen","onClose","className","childrenMargins"],"mappings":"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"}

package/es/Subheading-9b07248d.js

@@ -0,0 +1,36 @@
+/* @oracle/oraclejet-preact: 15.1.12 */
+import { jsx } from 'preact/jsx-runtime';
+import { stringLiteralArray } from './utils/UNSAFE_arrayUtils.js';
+import { multiVariantStyles } from './UNSAFE_Subheading/themes/SubheadingStyles.css.js';
+
+const subheadingElementTypes = stringLiteralArray([
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'div',
+    'span'
+]);
+const headingsizeMap = {
+    h1: '2xl',
+    h2: 'xl',
+    h3: 'lg',
+    h4: 'md',
+    h5: 'sm',
+    h6: 'xs',
+    div: 'md',
+    span: 'md'
+};
+const sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'inherit'];
+const Subheading = ({ children, as, size, id, variant }) => {
+    const Component = as;
+    //@ts-ignore
+    size = size ?? headingsizeMap[Component];
+    const classes = multiVariantStyles({ size, variant });
+    return (jsx(Component, { className: classes, id: id, children: children }));
+};
+
+export { Subheading as S, sizeOptions as a, subheadingElementTypes as s };
+//# sourceMappingURL=Subheading-9b07248d.js.map

package/es/Subheading-9b07248d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Subheading-9b07248d.js","sources":["../../src/UNSAFE_Subheading/Subheading.tsx"],"sourcesContent":["import { ComponentChildren } from 'preact';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\nimport { multiVariantStyles } from './themes/SubheadingStyles.css';\n\nexport const subheadingElementTypes = stringLiteralArray([\n  'h1',\n  'h2',\n  'h3',\n  'h4',\n  'h5',\n  'h6',\n  'div',\n  'span'\n]);\n\ntype ElementType = typeof subheadingElementTypes[number];\n\ntype SubheadingProps = {\n  /**\n   * Specifies the subheading tag. When a heading tag should not be used 'as' may be set to div or span, for example in collection group headers (such as list view group headers).\n   */\n  as: ElementType;\n\n  /**\n   * Specifies text color. If set as \"inherit\", takes text color from its parent element. The default value of this property is theme driven.\n   */\n  variant?: 'primary' | 'secondary' | 'disabled' | 'inherit';\n\n  /**\n   * Specifies the font size and line height. The default value of this property is theme driven.\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inherit';\n\n  /**\n   * Specifies the subheader id\n   */\n  id?: string;\n\n  /**\n   * Specifies the children\n   */\n  children: ComponentChildren;\n};\n\nconst headingsizeMap = {\n  h1: '2xl',\n  h2: 'xl',\n  h3: 'lg',\n  h4: 'md',\n  h5: 'sm',\n  h6: 'xs',\n  div: 'md',\n  span: 'md'\n};\n\nexport const sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'inherit'];\n\nexport const Subheading = ({ children, as, size, id, variant }: SubheadingProps) => {\n  const Component = as;\n  //@ts-ignore\n  size = size ?? headingsizeMap[Component];\n  const classes = multiVariantStyles({ size, variant });\n  return (\n    <Component className={classes} id={id}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAIO,MAAM,sBAAsB,GAAG,kBAAkB,CAAC;IACvD,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,KAAK;IACL,MAAM;AACP,CAAA,EAAE;AA+BH,MAAM,cAAc,GAAG;AACrB,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,IAAI,EAAE,IAAI;CACX,CAAC;MAEW,WAAW,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;AAEtE,MAAA,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAmB,KAAI;IACjF,MAAM,SAAS,GAAG,EAAE,CAAC;;AAErB,IAAA,IAAI,GAAG,IAAI,IAAI,cAAc,CAAC,SAAS,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,kBAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;AACtD,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAA,QAAA,EAClC,QAAQ,EAAA,CACC,EACZ;AACJ;;;;"}

package/es/Submenu-a9eea96f.js

@@ -0,0 +1,155 @@
+/* @oracle/oraclejet-preact: 15.1.12 */
+import { jsxs, Fragment, jsx } from 'preact/jsx-runtime';
+import { useMemo, useRef, useState, useEffect, useCallback } from 'preact/compat';
+import { DirectionalExpandArrowIcon } from './PRIVATE_ThemedIcons/DirectionalExpandArrowIcon.js';
+import { useId } from './hooks/UNSAFE_useId.js';
+import { m as useMenuContainerContext, B as BaseMenuItem, u as useMenuContext } from './MenuItem-de7ca2c3.js';
+import { D as DropdownMenu, S as SheetMenu } from './Menu-9f99b7f8.js';
+import { useRef as useRef$1, useState as useState$1, useEffect as useEffect$1, useCallback as useCallback$1 } from 'preact/hooks';
+import { DirectionalCollapseArrowIcon } from './PRIVATE_ThemedIcons/DirectionalCollapseArrowIcon.js';
+
+const DropdownSubmenu = ({ label, children }) => {
+    //Id of the submenu that will be used to connect via aria-owns, menuItem with its submenu
+    const submenuId = useId();
+    const preProcessedMenuItemID = useId();
+    //MenuItem id
+    const menuItemId = useMemo(() => `oj-menu-item-${preProcessedMenuItemID}`, [preProcessedMenuItemID]);
+    const { changeKey, currentKey } = useMenuContainerContext();
+    const submenuMenuItemRef = useRef(null);
+    const dropdownSubmenuRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [currentFocus, setCurrentFocus] = useState('none');
+    useEffect(() => {
+        if (menuItemId !== currentKey) {
+            setIsOpen(false);
+        }
+    }, [currentKey, menuItemId]);
+    //This function is used when pressing submenuitem and hovering over it
+    const openSubmenuAction = useCallback((e) => {
+        submenuMenuItemRef.current?.focus();
+        //If not click/touch we set the focus on the first item
+        setIsOpen(true);
+        if (e.type === 'keyup') {
+            setCurrentFocus('firstItem');
+        }
+        else {
+            setCurrentFocus('none');
+        }
+    }, []);
+    //TODO: There is a bug in a Icon, once that bug is solved we have to check this again. JET-56980
+    const hoverStatus = useRef({
+        recentClose: false,
+        pendingUnhover: false
+    });
+    return (jsxs(Fragment, { children: [jsx(BaseMenuItem, { id: menuItemId, submenuId: submenuId, ref: submenuMenuItemRef, label: label, endIcon: jsx(DirectionalExpandArrowIcon, {}), type: "submenu", role: "menuitem", onAction: openSubmenuAction, hoverInfo: {
+                    //Specific hover events of submenuItem
+                    hoverProps: {
+                        onMouseEnter: (e) => {
+                            openSubmenuAction(e);
+                        }
+                    },
+                    hoverStatus
+                }, 
+                //Open submenu using right/left key
+                openSubmenu: () => {
+                    setIsOpen(true);
+                    setCurrentFocus('firstItem');
+                }, submenuRef: dropdownSubmenuRef, isSubmenuOpen: isOpen }), isOpen ? (jsx(DropdownMenu, { menuLevel: "sub", menuId: submenuId, 
+                //Close submenu with left/right key
+                closeSubmenu: () => {
+                    hoverStatus.current.recentClose = true;
+                    changeKey({ key: currentKey, reason: 'keyboard' });
+                    setTimeout(() => {
+                        hoverStatus.current.recentClose = false;
+                    }, HOVER_SHIFT_TIMEOUT);
+                    setIsOpen(false);
+                    //CurrentKey can be the same as submenuItem, because of that we explicitly focus it
+                    submenuMenuItemRef.current?.focus();
+                }, 
+                /*For now we are exposing ref if this is exposed at some point we would look for other
+                  mechanisms to use this ref */
+                ref: dropdownSubmenuRef, anchorRef: submenuMenuItemRef, defaultPlacement: "end-top", currentFocus: currentFocus, offsetValue: {
+                    mainAxis: -8,
+                    crossAxis: -8
+                }, flipOptions: {
+                    crossAxis: true,
+                    mainAxis: true,
+                    fallbackPlacements: ['start-top', 'end-bottom', 'start-bottom']
+                }, children: children })) : null] }));
+};
+const HOVER_SHIFT_TIMEOUT = 100;
+
+const SheetSubmenu = ({ label, children }) => {
+    const submenuId = useId();
+    const submenuItemId = useId();
+    const submenuTitleId = useId();
+    const submenuMenuItemRef = useRef$1(null);
+    const [isOpen, setIsOpen] = useState$1(false);
+    const [initialFocus, setInitialFocus] = useState$1('menu');
+    const { menuContainerRef, changeKey } = useMenuContainerContext();
+    /* We have to wrap opening display change inside a useEffect to avoid flashy effect when opening submenu*/
+    useEffect$1(() => {
+        if (isOpen) {
+            if (menuContainerRef.current) {
+                /*Menu hidden instead of unmounted for two main reasons:
+              1. Children need to be updated even if menu is present.
+              2. We can't unmount parent since all the submenus are children of main menuContainer*/
+                menuContainerRef.current.style.display = 'none';
+            }
+        }
+    }, [isOpen, menuContainerRef]);
+    const openSubmenuDirectional = useCallback$1(() => {
+        setIsOpen(true);
+        setInitialFocus('secondItem');
+    }, []);
+    const openSubmenuAction = useCallback$1((e) => {
+        //If the submenu is open using keyboard focus has to go to second item(first is the title), if not to the menu Container
+        setIsOpen(true);
+        if (e.type === 'keyup') {
+            setInitialFocus('secondItem');
+        }
+        else {
+            setInitialFocus('menu');
+        }
+    }, []);
+    const returnFocusToSubmenuItem = useCallback$1(() => {
+        changeKey({ key: submenuItemId, reason: 'keyboard' });
+        submenuMenuItemRef.current?.focus();
+    }, [changeKey, submenuItemId, submenuMenuItemRef]);
+    /* No need to "save" these functions with useCallback */
+    const closeSubmenu = () => {
+        setIsOpen(false);
+        if (menuContainerRef.current) {
+            //Submenu is unmounted and prev menu is visible again.
+            /*Dom manipulation is kind of dirty. Have to check for new approaches. JET-57239 */
+            menuContainerRef.current.style.display = 'block';
+        }
+    };
+    const closeSubmenuPressingTitleItem = (e) => {
+        closeSubmenu();
+        //If the submenu is closed using keyboard focus has to go to submenuItem that opened submenu, if not to the menu Container
+        if (e.type === 'keyup') {
+            returnFocusToSubmenuItem();
+        }
+        else {
+            changeKey({ key: undefined, reason: 'click' });
+            menuContainerRef.current?.focus();
+        }
+    };
+    const closeDirectional = () => {
+        closeSubmenu();
+        returnFocusToSubmenuItem();
+    };
+    return (jsxs(Fragment, { children: [jsx(BaseMenuItem, { id: submenuItemId, submenuId: submenuId, ref: submenuMenuItemRef, label: label, endIcon: jsx(DirectionalExpandArrowIcon, {}), type: "submenu", role: "menuitem", onAction: openSubmenuAction, openSubmenu: openSubmenuDirectional, isSubmenuOpen: isOpen }), !isOpen ? null : (jsxs(SheetMenu, { menuId: submenuId, closeSubmenu: closeDirectional, menuLevel: "sub", anchorRef: submenuMenuItemRef, 
+                //TODO: We need to check if this initial focus is desired based on some W3C specs
+                currentFocus: initialFocus, children: [jsx(BaseMenuItem, { id: submenuTitleId, menuItemLabelWeight: "bold", role: "menuitem", type: "submenu", startIcon: jsx(DirectionalCollapseArrowIcon, {}), onAction: closeSubmenuPressingTitleItem, label: label }), children] }))] }));
+};
+
+/*Submenu behaves differently depending the device */
+const Submenu = ({ label, children }) => {
+    const { isMobile } = useMenuContext();
+    return (jsx(Fragment, { children: isMobile ? (jsx(SheetSubmenu, { label: label, children: children })) : (jsx(DropdownSubmenu, { label: label, children: children })) }));
+};
+
+export { Submenu as S };
+//# sourceMappingURL=Submenu-a9eea96f.js.map

package/es/Submenu-a9eea96f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Submenu-a9eea96f.js","sources":["../../src/UNSAFE_Menu/DropdownSubmenu.tsx","../../src/UNSAFE_Menu/SheetSubmenu.tsx","../../src/UNSAFE_Menu/Submenu.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/compat';\n\nimport { DirectionalExpandArrowIcon } from '../PRIVATE_ThemedIcons/DirectionalExpandArrowIcon';\nimport { useId } from '../hooks/UNSAFE_useId';\n\nimport { BaseMenuItem } from './MenuItem';\nimport { DropdownMenu } from './DropdownMenu';\nimport { useMenuContainerContext } from './useMenuContainerContext';\nimport { SubmenuProps } from './Submenu';\n\nexport const DropdownSubmenu = ({ label, children }: SubmenuProps) => {\n  //Id of the submenu that will be used to connect via aria-owns, menuItem with its submenu\n  const submenuId = useId();\n\n  const preProcessedMenuItemID = useId();\n  //MenuItem id\n  const menuItemId = useMemo(\n    () => `oj-menu-item-${preProcessedMenuItemID}`,\n    [preProcessedMenuItemID]\n  );\n\n  const { changeKey, currentKey } = useMenuContainerContext();\n\n  const submenuMenuItemRef = useRef<HTMLAnchorElement | null>(null);\n  const dropdownSubmenuRef = useRef<HTMLDivElement | null>(null);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const [currentFocus, setCurrentFocus] = useState<'menu' | 'firstItem' | 'none'>('none');\n\n  useEffect(() => {\n    if (menuItemId !== currentKey) {\n      setIsOpen(false);\n    }\n  }, [currentKey, menuItemId]);\n\n  //This function is used when pressing submenuitem and hovering over it\n  const openSubmenuAction = useCallback((e: Event) => {\n    submenuMenuItemRef.current?.focus();\n    //If not click/touch we set the focus on the first item\n    setIsOpen(true);\n    if (e.type === 'keyup') {\n      setCurrentFocus('firstItem');\n    } else {\n      setCurrentFocus('none');\n    }\n  }, []);\n\n  //TODO: There is a bug in a Icon, once that bug is solved we have to check this again. JET-56980\n  const hoverStatus = useRef<{ recentClose: boolean; pendingUnhover: boolean }>({\n    recentClose: false,\n    pendingUnhover: false\n  });\n\n  return (\n    <>\n      <BaseMenuItem\n        id={menuItemId}\n        submenuId={submenuId}\n        ref={submenuMenuItemRef}\n        label={label}\n        endIcon={<DirectionalExpandArrowIcon></DirectionalExpandArrowIcon>}\n        type=\"submenu\"\n        role=\"menuitem\"\n        onAction={openSubmenuAction}\n        hoverInfo={{\n          //Specific hover events of submenuItem\n          hoverProps: {\n            onMouseEnter: (e: MouseEvent) => {\n              openSubmenuAction(e);\n            }\n          },\n          hoverStatus\n        }}\n        //Open submenu using right/left key\n        openSubmenu={() => {\n          setIsOpen(true);\n          setCurrentFocus('firstItem');\n        }}\n        submenuRef={dropdownSubmenuRef}\n        isSubmenuOpen={isOpen}></BaseMenuItem>\n      {isOpen ? (\n        <DropdownMenu\n          menuLevel=\"sub\"\n          menuId={submenuId}\n          //Close submenu with left/right key\n          closeSubmenu={() => {\n            hoverStatus.current.recentClose = true;\n            changeKey({ key: currentKey, reason: 'keyboard' });\n            setTimeout(() => {\n              hoverStatus.current.recentClose = false;\n            }, HOVER_SHIFT_TIMEOUT);\n            setIsOpen(false);\n            //CurrentKey can be the same as submenuItem, because of that we explicitly focus it\n            submenuMenuItemRef.current?.focus();\n          }}\n          /*For now we are exposing ref if this is exposed at some point we would look for other\n            mechanisms to use this ref */\n          ref={dropdownSubmenuRef}\n          anchorRef={submenuMenuItemRef}\n          defaultPlacement=\"end-top\"\n          currentFocus={currentFocus}\n          offsetValue={{\n            mainAxis: -8, //TODO: need to figure out how to make this themable.\n            crossAxis: -8\n          }}\n          flipOptions={{\n            crossAxis: true,\n            mainAxis: true,\n            fallbackPlacements: ['start-top', 'end-bottom', 'start-bottom']\n          }}>\n          {children}\n        </DropdownMenu>\n      ) : null}\n    </>\n  );\n};\n\nconst HOVER_SHIFT_TIMEOUT = 100;\n","import { useCallback, useEffect, useRef, useState } from 'preact/hooks';\n\nimport { useId } from '../hooks/UNSAFE_useId';\nimport { DirectionalCollapseArrowIcon } from '../PRIVATE_ThemedIcons/DirectionalCollapseArrowIcon';\nimport { DirectionalExpandArrowIcon } from '../PRIVATE_ThemedIcons/DirectionalExpandArrowIcon';\n\nimport { BaseMenuItem } from './MenuItem';\nimport { SheetMenu } from './SheetMenu';\nimport { useMenuContainerContext } from './useMenuContainerContext';\nimport { SubmenuProps } from './Submenu';\n\nexport const SheetSubmenu = ({ label, children }: SubmenuProps) => {\n  const submenuId = useId();\n  const submenuItemId = useId();\n  const submenuTitleId = useId();\n\n  const submenuMenuItemRef = useRef<HTMLAnchorElement | null>(null);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const [initialFocus, setInitialFocus] = useState<'menu' | 'secondItem'>('menu');\n\n  const { menuContainerRef, changeKey } = useMenuContainerContext();\n  /* We have to wrap opening display change inside a useEffect to avoid flashy effect when opening submenu*/\n  useEffect(() => {\n    if (isOpen) {\n      if (menuContainerRef.current) {\n        /*Menu hidden instead of unmounted for two main reasons:\n      1. Children need to be updated even if menu is present.\n      2. We can't unmount parent since all the submenus are children of main menuContainer*/\n        menuContainerRef.current.style.display = 'none';\n      }\n    }\n  }, [isOpen, menuContainerRef]);\n\n  const openSubmenuDirectional = useCallback(() => {\n    setIsOpen(true);\n    setInitialFocus('secondItem');\n  }, []);\n\n  const openSubmenuAction = useCallback((e: Event) => {\n    //If the submenu is open using keyboard focus has to go to second item(first is the title), if not to the menu Container\n    setIsOpen(true);\n    if (e.type === 'keyup') {\n      setInitialFocus('secondItem');\n    } else {\n      setInitialFocus('menu');\n    }\n  }, []);\n\n  const returnFocusToSubmenuItem = useCallback(() => {\n    changeKey({ key: submenuItemId, reason: 'keyboard' });\n    submenuMenuItemRef.current?.focus();\n  }, [changeKey, submenuItemId, submenuMenuItemRef]);\n\n  /* No need to \"save\" these functions with useCallback */\n  const closeSubmenu = () => {\n    setIsOpen(false);\n    if (menuContainerRef.current) {\n      //Submenu is unmounted and prev menu is visible again.\n      /*Dom manipulation is kind of dirty. Have to check for new approaches. JET-57239 */\n      menuContainerRef.current.style.display = 'block';\n    }\n  };\n\n  const closeSubmenuPressingTitleItem = (e: Event) => {\n    closeSubmenu();\n    //If the submenu is closed using keyboard focus has to go to submenuItem that opened submenu, if not to the menu Container\n    if (e.type === 'keyup') {\n      returnFocusToSubmenuItem();\n    } else {\n      changeKey({ key: undefined, reason: 'click' });\n      menuContainerRef.current?.focus();\n    }\n  };\n\n  const closeDirectional = () => {\n    closeSubmenu();\n    returnFocusToSubmenuItem();\n  };\n\n  return (\n    <>\n      <BaseMenuItem\n        id={submenuItemId}\n        submenuId={submenuId}\n        ref={submenuMenuItemRef}\n        label={label}\n        endIcon={<DirectionalExpandArrowIcon></DirectionalExpandArrowIcon>}\n        type=\"submenu\"\n        role=\"menuitem\"\n        onAction={openSubmenuAction}\n        openSubmenu={openSubmenuDirectional}\n        isSubmenuOpen={isOpen}></BaseMenuItem>\n      {!isOpen ? null : (\n        <SheetMenu\n          menuId={submenuId}\n          closeSubmenu={closeDirectional}\n          menuLevel=\"sub\"\n          anchorRef={submenuMenuItemRef}\n          //TODO: We need to check if this initial focus is desired based on some W3C specs\n          currentFocus={initialFocus}>\n          <BaseMenuItem\n            id={submenuTitleId}\n            menuItemLabelWeight=\"bold\"\n            role=\"menuitem\"\n            type=\"submenu\"\n            startIcon={<DirectionalCollapseArrowIcon></DirectionalCollapseArrowIcon>}\n            onAction={closeSubmenuPressingTitleItem}\n            label={label}></BaseMenuItem>\n          {children}\n        </SheetMenu>\n      )}\n    </>\n  );\n};\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentChildren } from 'preact';\n\nimport { DropdownSubmenu } from './DropdownSubmenu';\nimport { SheetSubmenu } from './SheetSubmenu';\nimport { useMenuContext } from './useMenuContext';\n\nexport type SubmenuProps = {\n  /**\n   * Set of menu groups or menu items that submenumenu will hold.Even though you could pass other type of children,\n   * is strongly recommended to use MenuItem, menu groups or components that return this type of components\n   * since passing other type of components children produces not desirable behaviors.\n   */\n  children?: ComponentChildren;\n\n  /**\n   *  Determines submenu text.\n   */\n  label: string;\n};\n\n/*Submenu behaves differently depending the device */\nexport const Submenu = ({ label, children }: SubmenuProps) => {\n  const { isMobile } = useMenuContext();\n  return (\n    <>\n      {isMobile ? (\n        <SheetSubmenu label={label}>{children}</SheetSubmenu>\n      ) : (\n        <DropdownSubmenu label={label}>{children}</DropdownSubmenu>\n      )}\n    </>\n  );\n};\n"],"names":["_jsxs","_Fragment","_jsx","useRef","useState","useEffect","useCallback"],"mappings":"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"}