@oracle/oraclejet-preact 15.1.7 → 15.1.8

package/cjs/Spacer-f762a49b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer-f762a49b.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":["dimensionInterpolations","flexitemInterpolations","mergeInterpolations","_jsx"],"mappings":";;;;;;;;;AAiBA,MAAM,cAAc,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAACA,8DAAuB,CAAC,EAAEC,+BAAsB,CAAC,IAAI,CAAC,CAAC;AAEhG,MAAM,mBAAmB,GAAGC,oDAAmB,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,OAAOC,cAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAA,CAAQ,CAAC;AAChD;;;;"}

package/cjs/SplitMenuButton-effb532d.js

@@ -0,0 +1,175 @@
+/* @oracle/oraclejet-preact: 15.1.8 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+require('./UNSAFE_ButtonLayout.js');
+var PRIVATE_ThemedIcons_NavDownIcon = require('./PRIVATE_ThemedIcons/NavDownIcon.js');
+require('./UNSAFE_Menu.js');
+require('./UNSAFE_BaseButton.js');
+require('./utils/UNSAFE_classNames.js');
+var hooks_UNSAFE_useTabbableMode = require('./hooks/UNSAFE_useTabbableMode.js');
+var utils_UNSAFE_interpolations_dimensions = require('./utils/UNSAFE_interpolations/dimensions.js');
+var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
+
+var compat = require('preact/compat');
+var hooks = require('preact/hooks');
+var classNames = require('./classNames-77604693.js');
+var BaseButton = require('./BaseButton-cd7e2adf.js');
+var ButtonLayout = require('./ButtonLayout-6e49462a.js');
+var Menu = require('./Menu-58adcec2.js');
+
+const compStyles = {
+  divider: "xxr1p5",
+  disabledDivider: "xtdtl4",
+  icon: "_1ow3lem",
+  root: "_1diwspc",
+  childrenMargins: "_1rxlwcc"
+};
+const menuButtonStyling = ['embedded', 'min', 'noBorderRadiusStart'];
+const menuButtonActiveStyling = [...menuButtonStyling, 'active'];
+const actionbuttonStyling = ['embedded', 'fill', 'noBorderRadiusEnd'];
+const actionButtonActiveStyling = [...actionbuttonStyling, 'active'];
+const interpolations = [...Object.values(utils_UNSAFE_interpolations_dimensions.dimensionInterpolations)];
+const styleInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations(interpolations);
+/**
+ * A SplitMenuButton is a combined action and menu button.
+ */
+const SplitMenuButton = compat.forwardRef(({
+  children,
+  label = '',
+  variant = 'outlined',
+  isDisabled = false,
+  size = 'md',
+  onAction,
+  ...props
+}, ref) => {
+  const [isMenuOpen, setIsMenuOpen] = hooks.useState(false);
+  const [isActive, setIsActive] = hooks.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 = hooks.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 = hooks.useCallback(event => {
+    if (event.key === ' ' || event.key === 'Enter') {
+      !isDisabled && onAction && onAction();
+      setIsActive(false);
+    }
+  }, [isDisabled, onAction, setIsActive]);
+  const onBlur = hooks.useCallback(() => {
+    setIsActive(false);
+  }, [setIsActive]);
+  const _ref = hooks.useRef(null);
+  hooks.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.classNames([compStyles.divider, isDisabled && compStyles.disabledDivider]);
+  const rootStyles = classNames.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 jsxRuntime.jsx(BaseButton.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: jsxRuntime.jsxs(hooks_UNSAFE_useTabbableMode.TabbableModeContext.Provider, {
+        value: {
+          isTabbable: false
+        },
+        children: [jsxRuntime.jsx(BaseButton.BaseButton, {
+          elementDetails: {
+            type: 'span'
+          },
+          variant: variant,
+          styling: getActionButtonStyling(isActive),
+          size: size,
+          isDisabled: isDisabled,
+          "aria-hidden": true,
+          onAction: onAction,
+          children: label
+        }), jsxRuntime.jsx("div", {
+          class: `${dividerStyles}`
+        }), jsxRuntime.jsx(BaseButton.BaseButton, {
+          elementDetails: {
+            type: 'span'
+          },
+          variant: variant,
+          styling: getMenuButtonStyling(isMenuOpen),
+          size: size,
+          isDisabled: isDisabled,
+          "aria-hidden": true,
+          onAction: menuHandler,
+          children: jsxRuntime.jsx(ButtonLayout.ButtonLayout, {
+            display: "icons",
+            startIcon: jsxRuntime.jsx(PRIVATE_ThemedIcons_NavDownIcon.NavDownIcon, {}),
+            size: size,
+            styling: "embedded"
+          })
+        })]
+      })
+    });
+  };
+  if (isDisabled) {
+    return jsxRuntime.jsx("span", {
+      role: "toolbar",
+      class: `${rootStyles} ${cls}`,
+      style: styles,
+      children: rootButton()
+    });
+  } else {
+    return jsxRuntime.jsxs("span", {
+      role: "toolbar",
+      class: `${rootStyles} ${cls}`,
+      style: styles,
+      onKeyDown: !isDisabled && onKeyDown,
+      onKeyUp: onKeyUp,
+      onBlur: onBlur,
+      children: [rootButton(), jsxRuntime.jsx(Menu.Menu, {
+        anchorRef: _ref,
+        isOpen: isMenuOpen,
+        onClose: handleClose,
+        children: jsxRuntime.jsx("span", {
+          className: compStyles.childrenMargins,
+          children: children
+        })
+      })]
+    });
+  }
+});
+function getMenuButtonStyling(isActive) {
+  return isActive ? menuButtonActiveStyling : menuButtonStyling;
+}
+function getActionButtonStyling(isActive) {
+  return isActive ? actionButtonActiveStyling : actionbuttonStyling;
+}
+
+exports.SplitMenuButton = SplitMenuButton;
+//# sourceMappingURL=SplitMenuButton-effb532d.js.map

package/cjs/SplitMenuButton-effb532d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitMenuButton-effb532d.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/cjs/Subheading-b44ee49b.js

@@ -0,0 +1,40 @@
+/* @oracle/oraclejet-preact: 15.1.8 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var utils_UNSAFE_arrayUtils = require('./utils/UNSAFE_arrayUtils.js');
+var UNSAFE_Subheading_themes_SubheadingStyles_css = require('./UNSAFE_Subheading/themes/SubheadingStyles.css.js');
+
+const subheadingElementTypes = utils_UNSAFE_arrayUtils.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 = UNSAFE_Subheading_themes_SubheadingStyles_css.multiVariantStyles({ size, variant });
+    return (jsxRuntime.jsx(Component, { className: classes, id: id, children: children }));
+};
+
+exports.Subheading = Subheading;
+exports.sizeOptions = sizeOptions;
+exports.subheadingElementTypes = subheadingElementTypes;
+//# sourceMappingURL=Subheading-b44ee49b.js.map

package/cjs/Subheading-b44ee49b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Subheading-b44ee49b.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":["stringLiteralArray","multiVariantStyles","_jsx"],"mappings":";;;;;;;AAIO,MAAM,sBAAsB,GAAGA,0CAAkB,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,GAAGC,gEAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;AACtD,IAAA,QACEC,cAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAA,QAAA,EAClC,QAAQ,EAAA,CACC,EACZ;AACJ;;;;;;"}

package/cjs/Submenu-97fa426b.js

@@ -0,0 +1,157 @@
+/* @oracle/oraclejet-preact: 15.1.8 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var compat = require('preact/compat');
+var PRIVATE_ThemedIcons_DirectionalExpandArrowIcon = require('./PRIVATE_ThemedIcons/DirectionalExpandArrowIcon.js');
+var hooks_UNSAFE_useId = require('./hooks/UNSAFE_useId.js');
+var MenuItem = require('./MenuItem-7ec3e7f2.js');
+var Menu = require('./Menu-58adcec2.js');
+var hooks = require('preact/hooks');
+var PRIVATE_ThemedIcons_DirectionalCollapseArrowIcon = require('./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 = hooks_UNSAFE_useId.useId();
+    const preProcessedMenuItemID = hooks_UNSAFE_useId.useId();
+    //MenuItem id
+    const menuItemId = compat.useMemo(() => `oj-menu-item-${preProcessedMenuItemID}`, [preProcessedMenuItemID]);
+    const { changeKey, currentKey } = MenuItem.useMenuContainerContext();
+    const submenuMenuItemRef = compat.useRef(null);
+    const dropdownSubmenuRef = compat.useRef(null);
+    const [isOpen, setIsOpen] = compat.useState(false);
+    const [currentFocus, setCurrentFocus] = compat.useState('none');
+    compat.useEffect(() => {
+        if (menuItemId !== currentKey) {
+            setIsOpen(false);
+        }
+    }, [currentKey, menuItemId]);
+    //This function is used when pressing submenuitem and hovering over it
+    const openSubmenuAction = compat.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 = compat.useRef({
+        recentClose: false,
+        pendingUnhover: false
+    });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem.BaseMenuItem, { id: menuItemId, submenuId: submenuId, ref: submenuMenuItemRef, label: label, endIcon: jsxRuntime.jsx(PRIVATE_ThemedIcons_DirectionalExpandArrowIcon.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 ? (jsxRuntime.jsx(Menu.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 = hooks_UNSAFE_useId.useId();
+    const submenuItemId = hooks_UNSAFE_useId.useId();
+    const submenuTitleId = hooks_UNSAFE_useId.useId();
+    const submenuMenuItemRef = hooks.useRef(null);
+    const [isOpen, setIsOpen] = hooks.useState(false);
+    const [initialFocus, setInitialFocus] = hooks.useState('menu');
+    const { menuContainerRef, changeKey } = MenuItem.useMenuContainerContext();
+    /* We have to wrap opening display change inside a useEffect to avoid flashy effect when opening submenu*/
+    hooks.useEffect(() => {
+        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 = hooks.useCallback(() => {
+        setIsOpen(true);
+        setInitialFocus('secondItem');
+    }, []);
+    const openSubmenuAction = hooks.useCallback((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 = hooks.useCallback(() => {
+        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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem.BaseMenuItem, { id: submenuItemId, submenuId: submenuId, ref: submenuMenuItemRef, label: label, endIcon: jsxRuntime.jsx(PRIVATE_ThemedIcons_DirectionalExpandArrowIcon.DirectionalExpandArrowIcon, {}), type: "submenu", role: "menuitem", onAction: openSubmenuAction, openSubmenu: openSubmenuDirectional, isSubmenuOpen: isOpen }), !isOpen ? null : (jsxRuntime.jsxs(Menu.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: [jsxRuntime.jsx(MenuItem.BaseMenuItem, { id: submenuTitleId, menuItemLabelWeight: "bold", role: "menuitem", type: "submenu", startIcon: jsxRuntime.jsx(PRIVATE_ThemedIcons_DirectionalCollapseArrowIcon.DirectionalCollapseArrowIcon, {}), onAction: closeSubmenuPressingTitleItem, label: label }), children] }))] }));
+};
+
+/*Submenu behaves differently depending the device */
+const Submenu = ({ label, children }) => {
+    const { isMobile } = MenuItem.useMenuContext();
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsx(SheetSubmenu, { label: label, children: children })) : (jsxRuntime.jsx(DropdownSubmenu, { label: label, children: children })) }));
+};
+
+exports.Submenu = Submenu;
+//# sourceMappingURL=Submenu-97fa426b.js.map

package/cjs/Submenu-97fa426b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Submenu-97fa426b.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":["useId","useMemo","useMenuContainerContext","useRef","useState","useEffect","useCallback","_jsxs","_Fragment","_jsx","BaseMenuItem","DirectionalExpandArrowIcon","DropdownMenu","SheetMenu","DirectionalCollapseArrowIcon","useMenuContext"],"mappings":"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"}

package/cjs/TabBarItem-ccc74a2b.js

@@ -0,0 +1,142 @@
+/* @oracle/oraclejet-preact: 15.1.8 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var utils_PRIVATE_collectionUtils = require('./utils/PRIVATE_collectionUtils.js');
+var utils_UNSAFE_mergeProps = require('./utils/UNSAFE_mergeProps.js');
+require('./utils/UNSAFE_classNames.js');
+var hooks_PRIVATE_useCollectionFocusRing = require('./hooks/PRIVATE_useCollectionFocusRing.js');
+var hooks_PRIVATE_useCurrentKey = require('./hooks/PRIVATE_useCurrentKey.js');
+require('./UNSAFE_Flex.js');
+var hooks_UNSAFE_useUser = require('./hooks/UNSAFE_useUser.js');
+var UNSAFE_TabBar_themes_TabBarStyles_css = require('./UNSAFE_TabBar/themes/TabBarStyles.css.js');
+var classNames = require('./classNames-77604693.js');
+var Flex = require('./Flex-f27857c8.js');
+var hooks_UNSAFE_usePress = require('./hooks/UNSAFE_usePress.js');
+require('./UNSAFE_Text.js');
+var preact = require('preact');
+var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
+require('./utils/UNSAFE_interpolations/flexitem.js');
+var hooks_UNSAFE_useComponentTheme = require('./hooks/UNSAFE_useComponentTheme.js');
+var UNSAFE_TabBar_themes_redwood_TabBarItemTheme = require('./UNSAFE_TabBar/themes/redwood/TabBarItemTheme.js');
+var flexitem = require('./flexitem-8e1c7595.js');
+var Text = require('./Text-92525679.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
+ */
+/**
+ * Context used to pass TabBar information without having to pass it to TabBar children props.
+ * We want to communicate information down to any interested TabBar item children.
+ */
+const TabBarContext = preact.createContext(null);
+
+function TabBar({ children, layout = 'stretch', selection, onSelectionChange }) {
+    const rootRef = hooks.useRef(null);
+    const isFirstItemRendered = hooks.useRef(false);
+    const [currentKey, setCurrentKey] = hooks.useState(selection);
+    const [showFocusRing, focusRingProps] = hooks_PRIVATE_useCollectionFocusRing.useCollectionFocusRing((elem) => {
+        return !!rootRef.current?.contains(elem);
+    }, ['ArrowRight', 'ArrowLeft']);
+    const ITEM_SELECTOR = '.' + 'oj-c-tabbar-item';
+    const { currentKeyProps } = hooks_PRIVATE_useCurrentKey.useCurrentKey((element) => utils_PRIVATE_collectionUtils.keyExtractor(element, ITEM_SELECTOR), false, undefined, undefined, utils_PRIVATE_collectionUtils.getPrevNextKey(rootRef.current, currentKey, true, ITEM_SELECTOR), utils_PRIVATE_collectionUtils.getPrevNextKey(rootRef.current, currentKey, false, ITEM_SELECTOR), currentKey, (detail) => setCurrentKey(detail.value));
+    //If selection is undefined the currentKey would be undefined in that case keyboard
+    //navigation using useCurrentKey is not possible as it expects a valid currentKey
+    const { direction } = hooks_UNSAFE_useUser.useUser();
+    const isRtl = direction === 'rtl';
+    const onKeyDown = hooks.useCallback((event) => {
+        if (currentKey === undefined) {
+            if (event.key === 'ArrowRight' || (!isRtl && event.key === 'ArrowLeft')) {
+                const targetKey = event.target.getAttribute('data-oj-key');
+                if (targetKey) {
+                    const nextKey = utils_PRIVATE_collectionUtils.getPrevNextKey(rootRef.current, targetKey, false, ITEM_SELECTOR)();
+                    if (nextKey !== null) {
+                        setCurrentKey(nextKey);
+                    }
+                }
+            }
+        }
+    }, [currentKey]);
+    const onKeyDownProps = { onKeyDown };
+    hooks.useEffect(() => {
+        isFirstItemRendered.current = false;
+    });
+    const isActiveElement = hooks.useCallback(() => {
+        return !!rootRef?.current?.contains(document.activeElement);
+    }, []);
+    const tabBarClass = classNames.classNames([UNSAFE_TabBar_themes_TabBarStyles_css.styles.tabBarBase]);
+    return (jsxRuntime.jsx(TabBarContext.Provider, { value: {
+            selection,
+            onSelectionChange,
+            currentKey,
+            showFocusRing,
+            layout,
+            isActiveElement,
+            isFirstItemRendered
+        }, children: jsxRuntime.jsx("div", { class: tabBarClass, role: 'tablist', ref: rootRef, tabIndex: children ? -1 : 0, "aria-multiselectable": false, ...utils_UNSAFE_mergeProps.mergeProps(onKeyDownProps, currentKeyProps, focusRingProps), children: jsxRuntime.jsx(Flex.Flex, { direction: "row", gap: "8x", children: children }) }) }));
+}
+
+/**
+ * @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 TabBarContext
+ *
+ * @returns The value of TabBarContext provider
+ */
+function useTabBarContext() {
+    return hooks.useContext(TabBarContext);
+}
+
+const ITEM_STYLE_CLASS = 'oj-c-tabbar-item';
+function TabBarItem({ itemKey, label, startContent, endContent }) {
+    const tabBarItemRef = hooks.useRef(null);
+    const { onSelectionChange, selection, currentKey, showFocusRing, layout, isActiveElement, isFirstItemRendered } = useTabBarContext();
+    const isCurrent = currentKey === itemKey;
+    let tabIndex = isCurrent ? 0 : -1;
+    //If currentKey is undefined, in order to tab to a TabBarItem, the first TabBarItem should set its tabindex to 0
+    if (currentKey === undefined && isFirstItemRendered && !isFirstItemRendered.current) {
+        tabIndex = 0;
+        isFirstItemRendered.current = true;
+    }
+    //Selection
+    const handlePress = () => {
+        onSelectionChange?.({ value: itemKey });
+    };
+    const { pressProps } = hooks_UNSAFE_usePress.usePress(handlePress);
+    const isSelected = selection === itemKey;
+    hooks.useLayoutEffect(() => {
+        if (isActiveElement?.() && isCurrent) {
+            tabBarItemRef?.current?.focus();
+        }
+    }, [isCurrent, isActiveElement]);
+    const { classes, styles: { tabBarItemStartContent, tabBarItemEndContent } } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_TabBar_themes_redwood_TabBarItemTheme.TabBarItemRedwoodTheme, {
+        selection: isSelected ? 'isSelected' : 'notSelected',
+        current: isCurrent ? 'isCurrent' : 'notCurrent',
+        focusRing: showFocusRing ? 'showFocusRing' : 'noFocusRing'
+    });
+    const tabBarItem = classNames.classNames([classes, ITEM_STYLE_CLASS]);
+    const tabBarItemStartContentClasses = classNames.classNames([tabBarItemStartContent]);
+    const tabBarItemEndContentClasses = classNames.classNames([tabBarItemEndContent]);
+    //instead of specifying flex: '1 0 auto' in cssProps var
+    const styleInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations([
+        ...Object.values(flexitem.flexitemInterpolations)
+    ]);
+    const flexDimensions = styleInterpolations({
+        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'
+    });
+    return (jsxRuntime.jsx("div", { "data-oj-key": itemKey, class: tabBarItem, role: "tab", ref: tabBarItemRef, ...pressProps, "aria-selected": isSelected, tabIndex: tabIndex, style: flexDimensions, children: jsxRuntime.jsxs(Flex.Flex, { height: "11x", minWidth: "14x", direction: "row", gap: "2x", align: "center", justify: "center", flex: "1 1 auto", children: [startContent && jsxRuntime.jsx("span", { class: tabBarItemStartContentClasses, children: startContent }), label && (jsxRuntime.jsx(Text.Text, { size: "md", weight: "semiBold", children: label })), endContent && jsxRuntime.jsx("span", { class: tabBarItemEndContentClasses, children: endContent })] }) }));
+}
+
+exports.TabBar = TabBar;
+exports.TabBarItem = TabBarItem;
+//# sourceMappingURL=TabBarItem-ccc74a2b.js.map