@oracle/oraclejet-preact 20.0.4 → 20.1.0

package/es/StyledDatePickerButton-a7782821.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledDatePickerButton-a7782821.js","sources":["../../src/PRIVATE_StyledDatePickerButton/StyledDatePickerButton.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 { multiVariantStyles } from './themes/StyledDatePickerButtonStyles.css';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { forwardRef } from 'preact/compat';\nimport type { Ref, JSX } from 'preact';\nimport type { UnpackSignals } from '@oracle/oraclejet-internal-utilities/attributeUtils';\n\ntype IntrinsicProps = Pick<UnpackSignals<JSX.HTMLAttributes<HTMLElement>>, 'onClick' | 'onKeyDown'>;\n\ntype AriaProps = {\n  'aria-label'?: UnpackSignals<JSX.AriaAttributes>['aria-label'];\n  'aria-disabled'?: UnpackSignals<JSX.AriaAttributes>['aria-disabled'];\n};\n\ntype Props = IntrinsicProps &\n  AriaProps & {\n    /**\n     * Specifies that the button appears activated when the user activates the StyledDatePickerButton.\n     * When true, adds the :active selector to the button so that it can show active styling.\n     * Combine this property with the other properties to get the styling you want.\n     */\n    isActivable?: boolean;\n    /**\n     * Specifies the styling of the button to look dimmed.\n     * Combine this property with the other properties to get the styling you want.\n     */\n    isDimmed?: boolean;\n    /**\n     * Specifies the styling of the button to look hidden, that is, visibility: hidden.\n     */\n    isHidden?: boolean;\n    /**\n     * Force a focus ring. Used for Safari to work around the :focus-visible bug.\n     */\n    isForcedFocusRing?: boolean;\n    /**\n     * Specifies that the button appears hovered when the user hovers over the StyledDatePickerButton.\n     * When true, adds the :hover selector to the button so that it can show hover styling.\n     * Combine this property with the other properties to get the styling you want.\n     */\n    isHoverable?: boolean;\n    /**\n     * Specifies the styling of the button to look like a day that is adjacent to the current month.\n     * Combine this property with the other properties to get the styling you want.\n     */\n    isAdjacentMonth?: boolean;\n    /**\n     * Specifies the role of the day cell to be 'button' when isReadonly is false, or no role when isReadonly is true.\n     * This helps the screenreader.\n     */\n    isReadonly?: boolean;\n    /**\n     * Specifies the styling of the button to look like it is restricted.\n     * Combine this property with the other properties to get the styling you want.\n     */\n    isRestricted?: boolean;\n    /**\n     * Specifies the styling of the button to look like it is selected.\n     * Combine this property with the other properties to get the styling you want.\n     */\n    isSelected?: boolean;\n    /**\n     * Specifies the styling of the button to look like it is today.\n     * Combine this property with the other properties to get the styling you want.\n     */\n    isToday?: boolean;\n    /**\n     * Specifies the label of the day button. This will be the day of the month.\n     */\n    label: string;\n    /**\n     * Specifies the tabIndex.\n     */\n    tabIndex?: 0 | -1;\n    /**\n     * Specifies the visual variant for the StyledDatePickerButton.\n     */\n    variant?: 'day' | 'month' | 'year';\n  };\n\n/**\n * StyledDatePickerButton is a controlled component that displays a stylized span for a button that goes into a DatePicker.\n */\nconst StyledDatePickerButton = forwardRef(\n  (\n    {\n      isActivable = false,\n      isReadonly = false,\n      isAdjacentMonth = false,\n      isDimmed = false,\n      isForcedFocusRing = false,\n      isHidden = false,\n      isHoverable = false,\n      isRestricted = false,\n      isSelected = false,\n      isToday = false,\n      tabIndex,\n      label,\n      variant,\n      ...props\n    }: Props,\n    ref: Ref<HTMLSpanElement> = null\n  ) => {\n    // The multiVariantStyles function is defined in StyledDatePickerButtonStyles.css.ts,\n    // using the recipe utility provided by @vanilla-extract/recipes.\n    // This function is used to merge the base styles, variants, and compound variants\n    // into a single set of styles for components based on the component's properties.\n    const variantClasses = multiVariantStyles({\n      active: isActivable ? 'isActivable' : 'notActiveable',\n      dimmed: isDimmed ? 'isDimmed' : 'notDimmed',\n      hidden: isHidden ? 'isHidden' : 'notHidden',\n      hover: isHoverable ? 'isHoverable' : 'notHoverable',\n      adjacentMonth: isAdjacentMonth ? 'isAdjacentMonth' : 'notAdjacentMonth',\n      restricted: isRestricted ? 'isRestricted' : 'notRestricted',\n      selected: isSelected ? 'isSelected' : 'notSelected',\n      today: isToday ? 'isToday' : 'notToday',\n      focusRing: isForcedFocusRing ? 'forced' : 'notForced',\n      variant\n    });\n\n    const classes = classNames([variantClasses]);\n    return (\n      <span\n        role={!isReadonly ? 'button' : undefined}\n        class={classes}\n        ref={ref}\n        tabIndex={tabIndex}\n        {...props}>\n        {label}\n      </span>\n    );\n  }\n);\n\nexport { StyledDatePickerButton };\n"],"names":["_jsx"],"mappings":";;;;;;AAuFA;;AAEG;AACG,MAAA,sBAAsB,GAAG,UAAU,CACvC,CACE,EACE,WAAW,GAAG,KAAK,EACnB,UAAU,GAAG,KAAK,EAClB,eAAe,GAAG,KAAK,EACvB,QAAQ,GAAG,KAAK,EAChB,iBAAiB,GAAG,KAAK,EACzB,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,KAAK,EACnB,YAAY,GAAG,KAAK,EACpB,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACF,EACR,GAAA,GAA4B,IAAI,KAC9B;;;;;IAKF,MAAM,cAAc,GAAG,kBAAkB,CAAC;QACxC,MAAM,EAAE,WAAW,GAAG,aAAa,GAAG,eAAe;QACrD,MAAM,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW;QAC3C,MAAM,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW;QAC3C,KAAK,EAAE,WAAW,GAAG,aAAa,GAAG,cAAc;QACnD,aAAa,EAAE,eAAe,GAAG,iBAAiB,GAAG,kBAAkB;QACvE,UAAU,EAAE,YAAY,GAAG,cAAc,GAAG,eAAe;QAC3D,QAAQ,EAAE,UAAU,GAAG,YAAY,GAAG,aAAa;QACnD,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU;QACvC,SAAS,EAAE,iBAAiB,GAAG,QAAQ,GAAG,WAAW;QACrD,OAAO;AACR,KAAA,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;AAC7C,IAAA,QACEA,GAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAE,CAAC,UAAU,GAAG,QAAQ,GAAG,SAAS,EACxC,KAAK,EAAE,OAAO,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAAA,GACd,KAAK,EAAA,QAAA,EACR,KAAK,EAAA,CACD,EACP;AACJ,CAAC;;;;"}

package/es/StyledDatePickerButtonStyles.styles.css

@@ -26,56 +26,62 @@
   outline-width: 1px;
   outline-color: var(--oj-c-border-keyboard-focus);
 }
-.StyledDatePickerButtonStyles_multiVariantStyles_hidden_isHidden__38ano7 {
+.StyledDatePickerButtonStyles_multiVariantStyles_focusRing_forced__38ano8:focus {
+  outline-style: dotted;
+  outline-offset: 1px;
+  outline-width: 1px;
+  outline-color: var(--oj-c-border-keyboard-focus);
+}
+.StyledDatePickerButtonStyles_multiVariantStyles_hidden_isHidden__38ano9 {
   visibility: hidden;
 }
-.StyledDatePickerButtonStyles_multiVariantStyles_restricted_isRestricted__38anob {
+.StyledDatePickerButtonStyles_multiVariantStyles_restricted_isRestricted__38anod {
   -webkit-text-decoration-line: line-through;
           text-decoration-line: line-through;
 }
-.StyledDatePickerButtonStyles_multiVariantStyles_variant_month__38anoi {
+.StyledDatePickerButtonStyles_multiVariantStyles_variant_month__38anok {
   min-width: calc(17 * var(--oj-c-size-units, 0.25rem));
 }
-.StyledDatePickerButtonStyles_multiVariantStyles_variant_year__38anoj {
+.StyledDatePickerButtonStyles_multiVariantStyles_variant_year__38anol {
   min-width: calc(17 * var(--oj-c-size-units, 0.25rem));
 }
-.StyledDatePickerButtonStyles_multiVariantStyles_compound_0__38anok {
+.StyledDatePickerButtonStyles_multiVariantStyles_compound_0__38anom {
   background-color: var(--oj-c-base-button-variants-borderless-base-background-color);
   border-color: var(--oj-c-base-button-variants-borderless-base-border-color);
   color: var(--oj-c-base-button-variants-borderless-base-color);
 }
-.StyledDatePickerButtonStyles_multiVariantStyles_compound_1__38anol:active {
+.StyledDatePickerButtonStyles_multiVariantStyles_compound_1__38anon:active {
   background-image: linear-gradient(var(--oj-c-base-button-variants-borderless-active-background-overlay-color),var(--oj-c-base-button-variants-borderless-active-background-overlay-color));
   border-color: transparent;
   color: var(--oj-c-text-icon-primary);
 }
-.StyledDatePickerButtonStyles_multiVariantStyles_compound_4__38anom {
+.StyledDatePickerButtonStyles_multiVariantStyles_compound_4__38anoo {
   background-color: var(--oj-c-base-button-variants-outlined-base-background-color);
   border-color: var(--oj-c-base-button-variants-outlined-base-border-color);
   color: var(--oj-c-base-button-variants-outlined-base-color);
 }
-.StyledDatePickerButtonStyles_multiVariantStyles_compound_5__38anon:active {
+.StyledDatePickerButtonStyles_multiVariantStyles_compound_5__38anop:active {
   background-image: linear-gradient(var(--oj-c-base-button-variants-outlined-active-background-overlay-color),var(--oj-c-base-button-variants-outlined-active-background-overlay-color));
   border-color: var(--oj-c-border-enabled);
   color: var(--oj-c-text-icon-primary);
 }
-.StyledDatePickerButtonStyles_multiVariantStyles_compound_8__38anoo {
+.StyledDatePickerButtonStyles_multiVariantStyles_compound_8__38anoq {
   background-color: var(--oj-c-base-button-variants-call-to-action-base-background-color);
   border-color: var(--oj-c-base-button-variants-call-to-action-base-border-color);
   color: var(--oj-c-base-button-variants-call-to-action-base-color);
   font-weight: var(--oj-c-body-md-font-weight-semibold);
 }
-.StyledDatePickerButtonStyles_multiVariantStyles_compound_9__38anop:active {
+.StyledDatePickerButtonStyles_multiVariantStyles_compound_9__38anor:active {
   background-image: linear-gradient(var(--oj-c-base-button-variants-call-to-action-active-background-overlay-color),var(--oj-c-base-button-variants-call-to-action-active-background-overlay-color));
   border-color: transparent;
   color: var(--oj-c-text-icon-inverse);
 }
-.StyledDatePickerButtonStyles_multiVariantStyles_compound_12__38anoq {
+.StyledDatePickerButtonStyles_multiVariantStyles_compound_12__38anos {
   outline-style: solid;
   outline-offset: 1px;
   outline-width: 1px;
   outline-color: var(--oj-c-border-keyboard-focus);
 }
-.StyledDatePickerButtonStyles_multiVariantStyles_compound_13__38anor {
+.StyledDatePickerButtonStyles_multiVariantStyles_compound_13__38anot {
   color: var(--oj-c-text-icon-secondary);
 }

package/es/StyledLabelValueLayout-bddfb884.js

@@ -0,0 +1,18 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsxs, jsx } from 'preact/jsx-runtime';
+import { F as Flex } from './Flex-fc483125.js';
+import './LabelValueLayoutStyles.styles.css';
+
+var labelInnerStyles = {base:'LabelValueLayoutStyles_labelInnerStyles_base__z3rxc55',start:'LabelValueLayoutStyles_labelInnerStyles_start__z3rxc56',startNotPureReadonly:'LabelValueLayoutStyles_labelInnerStyles_startNotPureReadonly__z3rxc57',startUnknownParent:'LabelValueLayoutStyles_labelInnerStyles_startUnknownParent__z3rxc58',startWithoutTopFormComponentWrapperUA:'LabelValueLayoutStyles_labelInnerStyles_startWithoutTopFormComponentWrapperUA__z3rxc59',insideFormComponentWrapper:'LabelValueLayoutStyles_labelInnerStyles_insideFormComponentWrapper__z3rxc5a',noWrap:'LabelValueLayoutStyles_labelInnerStyles_noWrap__z3rxc5b'};
+var labelSlotStyles = {base:'LabelValueLayoutStyles_labelSlotStyles_base__z3rxc50',start:'LabelValueLayoutStyles_labelSlotStyles_start__z3rxc51',top:'LabelValueLayoutStyles_labelSlotStyles_top__z3rxc52',topAndTopUA:'LabelValueLayoutStyles_labelSlotStyles_topAndTopUA__z3rxc53',topPureReadonly:'LabelValueLayoutStyles_labelSlotStyles_topPureReadonly__z3rxc54'};
+var valueSlotStyles = 'LabelValueLayoutStyles_valueSlotStyles__z3rxc5c';
+
+/**
+ * StyledLabelValueLayout is a styled layout component for displaying a label and its corresponding value.
+ */
+const StyledLabelValueLayout = ({ flexAlign, labelStyleClasses, labelStyles, labelInnerClasses, label, valueStyles, children }) => {
+    return (jsxs(Flex, { wrap: "wrap", align: flexAlign, children: [jsx("div", { class: labelStyleClasses, style: labelStyles, children: jsx("div", { class: labelInnerClasses, children: label }) }), jsx("div", { class: valueSlotStyles, style: valueStyles, children: children })] }));
+};
+
+export { StyledLabelValueLayout as S, labelInnerStyles as a, labelSlotStyles as l };
+//# sourceMappingURL=StyledLabelValueLayout-bddfb884.js.map

package/es/StyledLabelValueLayout-bddfb884.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledLabelValueLayout-bddfb884.js","sources":["../../src/UNSAFE_LabelValueLayout/StyledLabelValueLayout.tsx"],"sourcesContent":["import { Flex } from '#UNSAFE_Flex';\nimport { ComponentChildren, JSX } from 'preact';\nimport { valueSlotStyles } from './LabelValueLayoutStyles.css';\n\ntype Props = {\n  flexAlign: 'stretch' | 'start';\n  labelStyleClasses?: string;\n  labelStyles?: JSX.CSSProperties;\n  labelInnerClasses?: string;\n  label: ComponentChildren;\n  valueStyles?: JSX.CSSProperties;\n  children?: ComponentChildren;\n};\n\n/**\n * StyledLabelValueLayout is a styled layout component for displaying a label and its corresponding value.\n */\nexport const StyledLabelValueLayout = ({\n  flexAlign,\n  labelStyleClasses,\n  labelStyles,\n  labelInnerClasses,\n  label,\n  valueStyles,\n  children\n}: Props) => {\n  return (\n    <Flex wrap=\"wrap\" align={flexAlign}>\n      <div class={labelStyleClasses} style={labelStyles}>\n        <div class={labelInnerClasses}>{label}</div>\n      </div>\n      <div class={valueSlotStyles} style={valueStyles}>\n        {children}\n      </div>\n    </Flex>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAcA;;AAEG;MACU,sBAAsB,GAAG,CAAC,EACrC,SAAS,EACT,iBAAiB,EACjB,WAAW,EACX,iBAAiB,EACjB,KAAK,EACL,WAAW,EACX,QAAQ,EACF,KAAI;AACV,IAAA,QACEA,IAAC,CAAA,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,EAAA,QAAA,EAAA,CAChCC,aAAK,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,WAAW,EAAA,QAAA,EAC/CA,aAAK,KAAK,EAAE,iBAAiB,EAAG,QAAA,EAAA,KAAK,GAAO,EACxC,CAAA,EACNA,aAAK,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,WAAW,EAAA,QAAA,EAC5C,QAAQ,EACL,CAAA,CAAA,EAAA,CACD,EACP;AACJ;;;;"}

package/es/StyledSwitch-dbf29d95.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'preact/jsx-runtime';
 import { forwardRef } from 'preact/compat';
 import { useState, useCallback } from 'preact/hooks';
-import { u as useTestId } from './useTestId-f24ac480.js';
+import { u as useTestId } from './useTestId-ab1bede6.js';
 import { styles } from './PRIVATE_StyledSwitch/themes/StyledSwitchStyles.css.js';
 import './TabbableModeContext-7d8ad946.js';
 import { u as useTabbableMode } from './useTabbableMode-090ed4b5.js';
@@ -10,7 +10,7 @@ import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
 import { StyledSwitchRedwoodTheme } from './PRIVATE_StyledSwitch/themes/redwood/StyledSwitchTheme.js';
 import { c as classNames } from './classNames-4e12b00d.js';
 import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
-import { u as useTranslationBundle } from './useTranslationBundle-4822502f.js';
+import { u as useTranslationBundle } from './useTranslationBundle-bc6e0896.js';
 import { u as useId } from './useId-03dbfdf0.js';
 import { u as useActive } from './useActive-fb6d4d52.js';
 import { m as mergeProps } from './mergeProps-88ea8306.js';

package/es/StyledTextField-7605d76a.js

@@ -8,7 +8,7 @@ import { u as useFormFieldContext } from './useFormFieldContext-daf7a676.js';
 import './TabbableModeContext-7d8ad946.js';
 import { u as useTabbableMode } from './useTabbableMode-090ed4b5.js';
 import { u as useTextFieldInputHandlers } from './useTextFieldInputHandlers-8122048f.js';
-import { u as useTranslationBundle } from './useTranslationBundle-4822502f.js';
+import { u as useTranslationBundle } from './useTranslationBundle-bc6e0896.js';
 import { i as isEmbeddedVariant } from './formControlUtils-84e2af0e.js';
 import { c as classNames } from './classNames-4e12b00d.js';
 import { t as textInterpolations } from './textAlign-ad252afa.js';
@@ -20,16 +20,16 @@ import { TextFieldInputRedwoodTheme } from './UNSAFE_TextField/themes/redwood/Te
 import { LabelRedwoodTheme } from './UNSAFE_Label/themes/redwood/LabelTheme.js';
 import { L as LabelValueLayout } from './LabelValueLayout-c6b9945a.js';
 import { SkeletonRedwoodTheme } from './UNSAFE_Skeleton/themes/redwood/SkeletonTheme.js';
-import { u as useTestId } from './useTestId-f24ac480.js';
+import { u as useTestId } from './useTestId-ab1bede6.js';
 import { l as layoutSpanStyles } from './LayoutStyles.css-6b02421a.js';
 import { forwardRef } from 'preact/compat';
 import './FormContext-55fb8000.js';
 import { u as useFormContext } from './useFormContext-bb9dc478.js';
-import { F as Flex } from './Flex-03129963.js';
+import { F as Flex } from './Flex-fc483125.js';
 import './InputGroupContext-20bdbd6e.js';
 import { u as useInputGroupContext } from './useInputGroupContext-1d19411e.js';
-import { u as useTooltipControlled } from './useTooltipControlled-f2cfa454.js';
-import { u as useUser } from './useUser-06d34d19.js';
+import { u as useTooltipControlled } from './useTooltipControlled-b7f30aee.js';
+import { u as useUser } from './useUser-e543b73c.js';
 import { TextFieldRedwoodTheme } from './UNSAFE_TextField/themes/redwood/TextFieldTheme.js';
 import { ReadonlyTextFieldRedwoodTheme } from './UNSAFE_TextField/themes/redwood/ReadonlyTextFieldTheme.js';
 import { FormLayoutRedwoodTheme } from './UNSAFE_TextField/themes/redwood/FormLayoutTheme.js';

package/es/Submenu-fa7c2b4f.js

@@ -0,0 +1,247 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
+import { useContext, useMemo, useRef as useRef$1, useState as useState$1, useCallback as useCallback$1 } from 'preact/hooks';
+import { u as useId } from './useId-03dbfdf0.js';
+import { S as SvgCheck } from './Check-ac39fe00.js';
+import { S as SelectMenuGroupContext, B as BaseMenuItem, u as useMenuContainerContext, D as DropdownMenu, b as useMenuContext, c as MenuContainer } from './SelectMenuGroupContext-130a850c.js';
+import { styles } from './UNSAFE_Menu/themes/MenuItemStyles.css.js';
+import { useMemo as useMemo$1, useRef, useState, useEffect, useCallback, createPortal } from 'preact/compat';
+import { D as DirectionalExpandArrowIcon } from './DirectionalExpandArrowIcon-5bc45cad.js';
+import { s as scaleVars } from './themeContract.css-1ffed3bf.js';
+import { u as useScale } from './useScale-93490e54.js';
+import { D as DirectionalCollapseArrowIcon } from './DirectionalCollapseArrowIcon-132761da.js';
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Utility hook for consuming the MenuContext
+ *
+ * @returns The value of MenuContext provider
+ */
+function useSelectMenuGroupContext() {
+    return useContext(SelectMenuGroupContext);
+}
+
+function SelectMenuItem({ value, label, isDisabled, endIcon }) {
+    const { isMultiple, value: selectedValue, onCommit, groupKey } = useSelectMenuGroupContext();
+    const uniqueID = useId();
+    const id = useMemo(() => `oj-menu-item-${uniqueID}`, [uniqueID]);
+    const { isSelected, memoizedOnCommit } = useMemo(() => {
+        if (!isMultiple) {
+            return {
+                isSelected: selectedValue === value,
+                memoizedOnCommit: () => {
+                    onCommit?.({ value, previousValue: selectedValue });
+                }
+            };
+        }
+        return {
+            isSelected: !!selectedValue?.includes(value),
+            memoizedOnCommit: () => {
+                const proposedValue = isSelected
+                    ? selectedValue?.filter((val) => val !== value) || []
+                    : [...(selectedValue || []), value];
+                onCommit?.({ value: proposedValue, previousValue: selectedValue });
+            }
+        };
+    }, [selectedValue, value, onCommit, isMultiple]);
+    return (jsx(BaseMenuItem, { id: id, type: "select", role: isMultiple ? 'menuitemcheckbox' : 'menuitemradio', isChecked: isSelected, isDisabled: isDisabled, startIcon: isSelected ? jsx(SvgCheck, {}) : jsx("span", { class: styles.noSelectedIcon }), label: label, onAction: memoizedOnCommit, endIcon: endIcon, itemKey: `${groupKey}-${value}` }));
+}
+
+function SelectSingleMenuGroup({ value, onCommit, children, groupKey }) {
+    return (jsx(SelectMenuGroupContext.Provider, { value: { isMultiple: false, value, onCommit, groupKey }, children: children }));
+}
+
+const DropdownSubmenu = ({ label, children, startIcon, itemKey }) => {
+    //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$1(() => `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');
+    const [pxPerUnit, setPxPerUnit] = useState(DEFAULT_PX_PER_UNIT);
+    const scale = useScale();
+    useEffect(() => {
+        // Important to have scale as a posible reason for running this effect since changing scale would produce a need of updating px per unit
+        if (!scale || !scaleVars?.size?.units) {
+            setPxPerUnit(0.25 * remInPx());
+        }
+        else {
+            // We asume scale vars has the form of var(x), due to that we obtain string inside parenthesis, if not found empty string is passed
+            const cssVar = /\(([^)]+)\)/.exec(scaleVars.size.units)?.[1] || '';
+            // We try to get css var value, if this could not be obtained we use 0.25rem as fallback value
+            const valueofCSSVar = window
+                .getComputedStyle(submenuMenuItemRef.current)
+                .getPropertyValue(cssVar);
+            if (valueofCSSVar.endsWith('px')) {
+                setPxPerUnit(parseFloat(valueofCSSVar));
+            }
+            else if (valueofCSSVar.endsWith('rem')) {
+                setPxPerUnit(parseFloat(valueofCSSVar) * remInPx());
+            }
+            else {
+                setPxPerUnit(0.25 * remInPx());
+            }
+        }
+    }, [scale]);
+    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, { itemKey: itemKey, startIcon: startIcon, 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 }), jsx(DropdownMenu, { isOpen: isOpen, 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: -(2 * pxPerUnit), //TODO: need to figure out how to make this themable.
+                    crossAxis: -(2 * pxPerUnit + 1)
+                }, flipOptions: {
+                    crossAxis: true,
+                    mainAxis: true,
+                    fallbackPlacements: ['start-top', 'end-bottom', 'start-bottom']
+                }, children: children })] }));
+};
+const HOVER_SHIFT_TIMEOUT = 100;
+const DEFAULT_PX_PER_UNIT = 4;
+const remInPx = () => {
+    return parseInt(window.getComputedStyle(document.documentElement).fontSize || '16px', 10);
+};
+
+const SheetSubmenu = ({ label, children, startIcon, itemKey }) => {
+    const { isMobile } = useMenuContext();
+    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();
+    const openSubmenuDirectional = useCallback$1(() => {
+        openSubmenu();
+        setInitialFocus('secondItem');
+    }, []);
+    const openSubmenuAction = useCallback$1((e) => {
+        openSubmenu();
+        //If the submenu is open using keyboard focus has to go to second item(first is the title), if not to the menu Container
+        if (e.type === 'keyup') {
+            setInitialFocus('secondItem');
+        }
+        else {
+            if (isMobile) {
+                setInitialFocus('secondItemDueToTouch');
+            }
+            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 openSubmenu = () => {
+        /* Menu hidden instead of unmounted for two main reasons:
+          1. Children need to be updated even if menu is not present.
+          2. We can't unmount parent since all the submenus are children of main menu */
+        menuContainerRef.current.style.display = 'none';
+        setIsOpen(true);
+    };
+    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 {
+            if (isMobile) {
+                changeKey({ key: submenuItemId, reason: 'touch' });
+                // We need to add a little delay due to VO double tap producing focusing wrong item. Will be removed once animation is added for sheet submenus
+                setTimeout(() => {
+                    submenuMenuItemRef.current?.focus();
+                }, 0);
+            }
+            else {
+                changeKey({ key: undefined, reason: 'click' });
+                menuContainerRef.current?.focus();
+            }
+        }
+    };
+    const closeDirectional = () => {
+        closeSubmenu();
+        returnFocusToSubmenuItem();
+    };
+    return (jsxs(Fragment, { children: [jsx(BaseMenuItem, { itemKey: itemKey, startIcon: startIcon, id: submenuItemId, submenuId: submenuId, ref: submenuMenuItemRef, label: label, endIcon: jsx(DirectionalExpandArrowIcon, {}), type: "submenu", role: "menuitem", onAction: openSubmenuAction, openSubmenu: openSubmenuDirectional, isSubmenuOpen: isOpen }), !isOpen
+                ? null
+                : // We need to use portal to ensure all submenus are siblings so if one dissapear not every submenu dissapear
+                    createPortal(jsxs(MenuContainer, { display: "sheet", "aria-label": label, 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] }), menuContainerRef.current?.parentElement)] }));
+};
+
+/*Submenu behaves differently depending the device */
+const Submenu = (props) => {
+    const { isMobile } = useMenuContext();
+    return (jsx(Fragment, { children: isMobile ? (jsx(SheetSubmenu, { ...props })) : (jsx(DropdownSubmenu, { ...props })) }));
+};
+
+export { Submenu as S, SelectSingleMenuGroup as a, SelectMenuItem as b };
+//# sourceMappingURL=Submenu-fa7c2b4f.js.map

package/es/Submenu-fa7c2b4f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Submenu-fa7c2b4f.js","sources":["../../src/UNSAFE_Menu/useSelectMenuGroupContext.tsx","../../src/UNSAFE_Menu/SelectMenuItem.tsx","../../src/UNSAFE_Menu/SelectSingleMenuGroup.tsx","../../src/UNSAFE_Menu/DropdownSubmenu.tsx","../../src/UNSAFE_Menu/SheetSubmenu.tsx","../../src/UNSAFE_Menu/Submenu.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 { useContext } from 'preact/hooks';\nimport { SelectMenuGroupContext } from './SelectMenuGroupContext';\n\n/**\n * Utility hook for consuming the MenuContext\n *\n * @returns The value of MenuContext provider\n */\nfunction useSelectMenuGroupContext() {\n  return useContext(SelectMenuGroupContext);\n}\n\nexport { useSelectMenuGroupContext };\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';\nimport { useMemo } from 'preact/hooks';\nimport { useId } from '../hooks/UNSAFE_useId';\n\nimport { CheckIcon } from '../PRIVATE_ThemedIcons/CheckIcon';\n\nimport { BaseMenuItem } from './MenuItem';\nimport { useSelectMenuGroupContext } from './useSelectMenuGroupContext';\nimport { styles } from './themes/MenuItemStyles.css';\n\ntype SelectMenuItemProps = {\n  value: string;\n  label: string;\n  isDisabled?: boolean;\n  endIcon?: ComponentChildren;\n};\n\nexport function SelectMenuItem({ value, label, isDisabled, endIcon }: SelectMenuItemProps) {\n  const { isMultiple, value: selectedValue, onCommit, groupKey } = useSelectMenuGroupContext();\n  const uniqueID = useId();\n  const id = useMemo(() => `oj-menu-item-${uniqueID}`, [uniqueID]);\n\n  const { isSelected, memoizedOnCommit } = useMemo(() => {\n    if (!isMultiple) {\n      return {\n        isSelected: selectedValue === value,\n        memoizedOnCommit: () => {\n          onCommit?.({ value, previousValue: selectedValue });\n        }\n      };\n    }\n    return {\n      isSelected: !!selectedValue?.includes(value),\n      memoizedOnCommit: () => {\n        const proposedValue = isSelected\n          ? selectedValue?.filter((val) => val !== value) || []\n          : [...(selectedValue || []), value];\n        onCommit?.({ value: proposedValue, previousValue: selectedValue });\n      }\n    };\n  }, [selectedValue, value, onCommit, isMultiple]);\n\n  return (\n    <BaseMenuItem\n      id={id}\n      type=\"select\"\n      role={isMultiple ? 'menuitemcheckbox' : 'menuitemradio'}\n      isChecked={isSelected}\n      isDisabled={isDisabled}\n      startIcon={isSelected ? <CheckIcon /> : <span class={styles.noSelectedIcon}></span>}\n      label={label}\n      onAction={memoizedOnCommit}\n      endIcon={endIcon}\n      itemKey={`${groupKey}-${value}`}\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 { MenuValueUpdateDetail } from './menuUtils';\nimport { SelectMenuGroupContext } from './SelectMenuGroupContext';\n\ntype SelectSingleMenuGroupProps = {\n  children: ComponentChildren;\n  value?: string;\n  onCommit?: (detail: MenuValueUpdateDetail<string>) => void;\n  groupKey?: string;\n};\n\nexport function SelectSingleMenuGroup({\n  value,\n  onCommit,\n  children,\n  groupKey\n}: SelectSingleMenuGroupProps) {\n  return (\n    <SelectMenuGroupContext.Provider value={{ isMultiple: false, value, onCommit, groupKey }}>\n      {children}\n    </SelectMenuGroupContext.Provider>\n  );\n}\n","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';\nimport { scaleVars } from '@oracle/oraclejet-internal-theme-contract/themeContract.css';\nimport { useScale } from '#hooks/UNSAFE_useScale';\n\nexport const DropdownSubmenu = ({ label, children, startIcon, itemKey }: 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  const [pxPerUnit, setPxPerUnit] = useState(DEFAULT_PX_PER_UNIT);\n  const scale = useScale();\n\n  useEffect(() => {\n    // Important to have scale as a posible reason for running this effect since changing scale would produce a need of updating px per unit\n    if (!scale || !scaleVars?.size?.units) {\n      setPxPerUnit(0.25 * remInPx());\n    } else {\n      // We asume scale vars has the form of var(x), due to that we obtain string inside parenthesis, if not found empty string is passed\n      const cssVar = /\\(([^)]+)\\)/.exec(scaleVars.size.units)?.[1] || '';\n      // We try to get css var value, if this could not be obtained we use 0.25rem as fallback value\n      const valueofCSSVar = window\n        .getComputedStyle(submenuMenuItemRef.current as Element)\n        .getPropertyValue(cssVar);\n      if (valueofCSSVar.endsWith('px')) {\n        setPxPerUnit(parseFloat(valueofCSSVar));\n      } else if (valueofCSSVar.endsWith('rem')) {\n        setPxPerUnit(parseFloat(valueofCSSVar) * remInPx());\n      } else {\n        setPxPerUnit(0.25 * remInPx());\n      }\n    }\n  }, [scale]);\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        itemKey={itemKey}\n        startIcon={startIcon}\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\n      <DropdownMenu\n        isOpen={isOpen}\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: -(2 * pxPerUnit), //TODO: need to figure out how to make this themable.\n          crossAxis: -(2 * pxPerUnit + 1)\n        }}\n        flipOptions={{\n          crossAxis: true,\n          mainAxis: true,\n          fallbackPlacements: ['start-top', 'end-bottom', 'start-bottom']\n        }}>\n        {children}\n      </DropdownMenu>\n    </>\n  );\n};\n\nconst HOVER_SHIFT_TIMEOUT = 100;\nconst DEFAULT_PX_PER_UNIT = 4;\nconst remInPx = () => {\n  return parseInt(window.getComputedStyle(document.documentElement).fontSize || '16px', 10);\n};\n","import { useCallback, 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 { useMenuContainerContext } from './useMenuContainerContext';\nimport { SubmenuProps } from './Submenu';\nimport { createPortal } from 'preact/compat';\nimport { MenuContainer } from './MenuContainer';\nimport { useMenuContext } from './useMenuContext';\n\nexport const SheetSubmenu = ({ label, children, startIcon, itemKey }: SubmenuProps) => {\n  const { isMobile } = useMenuContext();\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' | 'secondItemDueToTouch'>(\n    'menu'\n  );\n\n  const { menuContainerRef, changeKey } = useMenuContainerContext();\n\n  const openSubmenuDirectional = useCallback(() => {\n    openSubmenu();\n    setInitialFocus('secondItem');\n  }, []);\n\n  const openSubmenuAction = useCallback((e: Event) => {\n    openSubmenu();\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    if (e.type === 'keyup') {\n      setInitialFocus('secondItem');\n    } else {\n      if (isMobile) {\n        setInitialFocus('secondItemDueToTouch');\n      } else {\n        setInitialFocus('menu');\n      }\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\n  const openSubmenu = () => {\n    /* Menu hidden instead of unmounted for two main reasons:\n      1. Children need to be updated even if menu is not present.\n      2. We can't unmount parent since all the submenus are children of main menu */\n    (menuContainerRef.current as HTMLElement).style.display = 'none';\n    setIsOpen(true);\n  };\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      if (isMobile) {\n        changeKey({ key: submenuItemId, reason: 'touch' });\n        // We need to add a little delay due to VO double tap producing focusing wrong item. Will be removed once animation is added for sheet submenus\n        setTimeout(() => {\n          submenuMenuItemRef.current?.focus();\n        }, 0);\n      } else {\n        changeKey({ key: undefined, reason: 'click' });\n        menuContainerRef.current?.focus();\n      }\n    }\n  };\n\n  const closeDirectional = () => {\n    closeSubmenu();\n    returnFocusToSubmenuItem();\n  };\n\n  return (\n    <>\n      <BaseMenuItem\n        itemKey={itemKey}\n        startIcon={startIcon}\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\n        ? null\n        : // We need to use portal to ensure all submenus are siblings so if one dissapear not every submenu dissapear\n          createPortal(\n            <MenuContainer\n              display=\"sheet\"\n              aria-label={label}\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            </MenuContainer>,\n            menuContainerRef.current?.parentElement as HTMLElement\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 item startIcon\n   */\n  startIcon?: ComponentChildren;\n  /**\n   *  Item key\n   */\n  itemKey?: string;\n};\n\n/*Submenu behaves differently depending the device */\nexport const Submenu = (props: SubmenuProps) => {\n  const { isMobile } = useMenuContext();\n  return (\n    <>\n      {isMobile ? (\n        <SheetSubmenu {...props}></SheetSubmenu>\n      ) : (\n        <DropdownSubmenu {...props}></DropdownSubmenu>\n      )}\n    </>\n  );\n};\n"],"names":["_jsx","CheckIcon","useMemo","_jsxs","useRef","useState","useCallback","_Fragment"],"mappings":"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"}

package/es/TabBar-fd31ca03.js

@@ -0,0 +1,69 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsxs, Fragment, jsx } from 'preact/jsx-runtime';
+import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
+import { L as LiveRegion } from './LiveRegion-2e8830ae.js';
+import 'preact/hooks';
+import './LayerHost-3cf255a6.js';
+import { forwardRef } from 'preact/compat';
+import './UNSAFE_Text/themes/TextStyles.css.js';
+import './Flex-fc483125.js';
+import { T as TabBarContext, a as TabBarLayout } from './TabBarLayout-9b67d1b6.js';
+import './flexitem-7b7f7920.js';
+import './dimensions-e4fbc23d.js';
+import './boxalignment-8980856d.js';
+import './logger-c92f309c.js';
+import './TabBarItemStyles.styles.css';
+import './UNSAFE_TabBarCommon/themes/redwood/TabBarItemBaseTheme.styles.css';
+import './UNSAFE_TabBarCommon/themes/redwood/TabBarItemVariants.css.js';
+import './BadgeStyles.styles.css';
+import './UNSAFE_Badge/themes/redwood/BadgeThemeBaseTheme.styles.css';
+import './UNSAFE_Badge/themes/redwood/BadgeVariants.css.js';
+import './ConveyorBeltContext-76a29c59.js';
+import './BusyStateContext-9ee9751d.js';
+import './TabbableModeContext-7d8ad946.js';
+import 'preact';
+import './TooltipContentStyles.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
+import './tooltipUtils-90fb656f.js';
+import './IconStyle.styles.css';
+import './BaseButton-243d200f.js';
+import './ButtonLabelLayout-1631c997.js';
+import './Floating-be4c0cb6.js';
+import './LayerStyles.styles.css';
+import './keyboardUtils-986fe923.js';
+import './tabbableUtils-c8311ec6.js';
+import './CollectionInteractionContext-7cf19abc.js';
+import './dropdownStyles.styles.css';
+import './Sheet-f9f8a4a4.js';
+import './OverflowTabBarItemStyles.styles.css';
+import { styles } from './UNSAFE_TabBar/themes/TabBarStyles.css.js';
+import { u as useTabBar } from './useTabBar-27e8c4ea.js';
+import { T as TabBarContextMenu } from './TabBarContextMenu-3bf4dc64.js';
+
+/**
+ * A tab bar allows navigation between different content sections.
+ */
+const TabBar = forwardRef(({ children, layout = 'stretch', display = 'standard', size = 'md', edge = 'top', selection, onSelect, onRemove, 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, contextMenuConfig }, ref) => {
+    const rootRef = ref;
+    const { rootProps, tabBarContext, menuProps, contextMenuContext, contextMenuDescription, contextMenuDescriptionId, accStatusInfo } = useTabBar({
+        class: styles.tabBarBase,
+        edge: edge,
+        onRemove,
+        onSelect,
+        ref: rootRef,
+        selection,
+        size,
+        children,
+        contextMenuConfig
+    });
+    const isContextMenuAvailable = contextMenuConfig != null;
+    return (jsxs(Fragment, { children: [jsx(TabBarContext.Provider, { value: tabBarContext, children: jsx("div", { ...rootProps, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-haspopup": contextMenuConfig != null ? true : false, "aria-describedby": isContextMenuAvailable && contextMenuDescriptionId
+                        ? ariaDescribedBy
+                            ? `${ariaDescribedBy} ${contextMenuDescriptionId}`
+                            : contextMenuDescriptionId
+                        : ariaDescribedBy, children: jsx(TabBarLayout, { layout: layout, display: display, children: children }) }) }), isContextMenuAvailable && contextMenuDescriptionId && (jsx("span", { id: contextMenuDescriptionId, children: jsx(HiddenAccessible, { children: contextMenuDescription }) })), isContextMenuAvailable && accStatusInfo && jsx(LiveRegion, { children: accStatusInfo }), isContextMenuAvailable && (jsx(TabBarContextMenu, { ...menuProps, contextMenuConfig: contextMenuConfig, contextMenuContext: contextMenuContext }))] }));
+});
+
+export { TabBar as T };
+//# sourceMappingURL=TabBar-fd31ca03.js.map

package/es/TabBar-fd31ca03.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar-fd31ca03.js","sources":["../../src/UNSAFE_TabBar/TabBar.tsx"],"sourcesContent":["import type { ComponentChildren, Ref, RefObject } from 'preact';\nimport { HiddenAccessible } from '../UNSAFE_HiddenAccessible';\nimport { LiveRegion } from '../UNSAFE_LiveRegion';\nimport { TabBarContext, TabBarLayout, TabBarContextMenuConfig } from '../UNSAFE_TabBarCommon';\nimport { styles } from './themes/TabBarStyles.css';\nimport { TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { useTabBar } from '../hooks/PRIVATE_useTabBar';\nimport { forwardRef } from 'preact/compat';\nimport { TabBarContextMenu } from './TabBarContextMenu';\nexport {\n  TabBarItem,\n  RemovableTabBarItem,\n  OverflowTabBarItem,\n  TabBarContext,\n  useTabBarContext,\n  TabBarLayout,\n  useProgressiveTruncation,\n  TabBarLinkItem\n} from '../UNSAFE_TabBarCommon';\n\n/**\n * type for payload of current key change event handler\n */\nexport type CurrentKeyDetail<K> = {\n  value: K;\n};\n\n/**\n * type for payload of selection change event handler\n */\ntype SelectionDetail<K> = {\n  value: K;\n};\n\n/**\n * type for payload of remove event handler\n */\ntype RemoveDetail<K> = {\n  value: K;\n};\n\ntype DisplayProps =\n  | {\n      /**\n       * Controls the content layout of the TabBarItem: 'standard' lays out the contents horizontally,\n       *'icons' hides the label,\n       */\n      display?: 'standard' | 'icons';\n      /**\n       *  The size indicates how tall the TabBarItem is rendered.\n       *  Note: It is not possible to specify 'size' when 'display=\"stacked\".\n       */\n      size?: 'md' | 'lg';\n    }\n  | {\n      /**\n       *'stacked' stacks the icon on top of the label.\n       * Note: It is not possible to specify 'size' when 'display=\"stacked\".\n       */\n      display?: 'stacked';\n      size?: 'never';\n    };\n\nexport type TabBarProps<K extends string | number> = DisplayProps & {\n  /**\n   * A set of TabBarItem(s) that TabBar will hold\n   */\n  children: ComponentChildren;\n  /**\n   * Whether to stretch the tab bar items to occupy available space or to condense items\n   */\n  layout?: 'stretch' | 'condense';\n  /**\n   * The position of the TabBar. Valid Values: top and bottom.\n   * 'top' is used when TabBar is placed on top of content section and the selection\n   *  indicator would be placed below the TabBarItem.\n   * 'bottom' is used when TabBar is placed on bottom of content section and the selection\n   *  indicator would be placed above the TabBarItem.\n   */\n  edge?: 'top' | 'bottom';\n  /**\n   * Key of the selected item.\n   */\n  selection?: K;\n  /**\n   * Callback function to handle when user selects a tab.\n   * The callback is also invoked when a user selects a tab that is already selected.\n   */\n  onSelect?: <K extends string | number>(detail: SelectionDetail<K>) => void;\n  /**\n   * Callback function to handle remove\n   */\n  onRemove?: <K extends string | number>(detail: RemoveDetail<K>) => void;\n  /**\n   * Accepts the ID of an element that provides instructions for interaction with the TabBar.\n   */\n  'aria-describedby'?: string;\n  /**\n   * An aria-label which defines a string value that labels this TabBar.\n   * Either aria-label or aria-labelledby should be specified in order to make TabBar accessible.\n   */\n  'aria-label'?: string;\n\n  /**\n   * An aria-labelledby which identifies the element(s) that labels this TabBar.\n   * Either aria-label or aria-labelledby should be specified in order to make TabBar accessible.\n   */\n  'aria-labelledby'?: string;\n\n  /**\n   * Configuration used to specify a context menu.\n   */\n  contextMenuConfig?: TabBarContextMenuConfig<K>;\n};\n/**\n * A tab bar allows navigation between different content sections.\n */\nexport const TabBar = forwardRef(\n  <K extends string | number>(\n    {\n      children,\n      layout = 'stretch',\n      display = 'standard',\n      size = 'md',\n      edge = 'top',\n      selection,\n      onSelect,\n      onRemove,\n      'aria-describedby': ariaDescribedBy,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      contextMenuConfig\n    }: TabBarProps<K> & TestIdProps,\n    ref?: Ref<HTMLDivElement>\n  ) => {\n    const rootRef = ref as RefObject<HTMLDivElement>;\n\n    const {\n      rootProps,\n      tabBarContext,\n      menuProps,\n      contextMenuContext,\n      contextMenuDescription,\n      contextMenuDescriptionId,\n      accStatusInfo\n    } = useTabBar({\n      class: styles.tabBarBase,\n      edge: edge,\n      onRemove,\n      onSelect,\n      ref: rootRef,\n      selection,\n      size,\n      children,\n      contextMenuConfig\n    });\n\n    const isContextMenuAvailable = contextMenuConfig != null;\n\n    return (\n      <>\n        <TabBarContext.Provider value={tabBarContext}>\n          <div\n            {...rootProps}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby}\n            aria-haspopup={contextMenuConfig != null ? true : false}\n            aria-describedby={\n              isContextMenuAvailable && contextMenuDescriptionId\n                ? ariaDescribedBy\n                  ? `${ariaDescribedBy} ${contextMenuDescriptionId}`\n                  : contextMenuDescriptionId\n                : ariaDescribedBy\n            }>\n            <TabBarLayout layout={layout} display={display}>\n              {children}\n            </TabBarLayout>\n          </div>\n        </TabBarContext.Provider>\n        {isContextMenuAvailable && contextMenuDescriptionId && (\n          <span id={contextMenuDescriptionId}>\n            <HiddenAccessible>{contextMenuDescription}</HiddenAccessible>\n          </span>\n        )}\n        {isContextMenuAvailable && accStatusInfo && <LiveRegion>{accStatusInfo}</LiveRegion>}\n        {isContextMenuAvailable && (\n          <TabBarContextMenu\n            {...menuProps}\n            contextMenuConfig={contextMenuConfig}\n            contextMenuContext={contextMenuContext!}\n          />\n        )}\n      </>\n    );\n  }\n);\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkHA;;AAEG;MACU,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,QAAQ,EACR,MAAM,GAAG,SAAS,EAClB,OAAO,GAAG,UAAU,EACpB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,KAAK,EACZ,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,kBAAkB,EAAE,eAAe,EACnC,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,iBAAiB,EACY,EAC/B,GAAyB,KACvB;IACF,MAAM,OAAO,GAAG,GAAgC,CAAC;AAEjD,IAAA,MAAM,EACJ,SAAS,EACT,aAAa,EACb,SAAS,EACT,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,aAAa,EACd,GAAG,SAAS,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC,UAAU;AACxB,QAAA,IAAI,EAAE,IAAI;QACV,QAAQ;QACR,QAAQ;AACR,QAAA,GAAG,EAAE,OAAO;QACZ,SAAS;QACT,IAAI;QACJ,QAAQ;QACR,iBAAiB;AAClB,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,sBAAsB,GAAG,iBAAiB,IAAI,IAAI,CAAC;AAEzD,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAC,CAAA,aAAa,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,aAAa,EAAA,QAAA,EAC1CA,GACM,CAAA,KAAA,EAAA,EAAA,GAAA,SAAS,gBACD,SAAS,EAAA,iBAAA,EACJ,cAAc,EAAA,eAAA,EAChB,iBAAiB,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK,EAErD,kBAAA,EAAA,sBAAsB,IAAI,wBAAwB;AAChD,0BAAE,eAAe;AACf,8BAAE,CAAA,EAAG,eAAe,CAAA,CAAA,EAAI,wBAAwB,CAAE,CAAA;AAClD,8BAAE,wBAAwB;AAC5B,0BAAE,eAAe,EAErB,QAAA,EAAAA,GAAA,CAAC,YAAY,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAC3C,QAAA,EAAA,QAAQ,EACI,CAAA,EAAA,CACX,EACiB,CAAA,EACxB,sBAAsB,IAAI,wBAAwB,KACjDA,GAAM,CAAA,MAAA,EAAA,EAAA,EAAE,EAAE,wBAAwB,EAChC,QAAA,EAAAA,GAAA,CAAC,gBAAgB,EAAE,EAAA,QAAA,EAAA,sBAAsB,EAAoB,CAAA,EAAA,CACxD,CACR,EACA,sBAAsB,IAAI,aAAa,IAAIA,GAAC,CAAA,UAAU,EAAE,EAAA,QAAA,EAAA,aAAa,EAAc,CAAA,EACnF,sBAAsB,KACrBA,GAAC,CAAA,iBAAiB,EACZ,EAAA,GAAA,SAAS,EACb,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAmB,EAAA,CACvC,CACH,CAAA,EAAA,CACA,EACH;AACJ,CAAC;;;;"}