@oracle/oraclejet-preact 15.0.4 → 15.0.5

package/es/SplitMenuButton-a1ffd14d.js

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

package/es/SplitMenuButton-a1ffd14d.js.map

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

package/es/Subheading-5f119663.js

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

package/es/Subheading-5f119663.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Subheading-5f119663.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 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 }: SubheadingProps) => {\n  const Component = as;\n  //@ts-ignore\n  size = size ?? headingsizeMap[Component];\n  const classes = multiVariantStyles({ size });\n  return (\n    <Component className={classes} id={id}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAIO,MAAM,sBAAsB,GAAG,kBAAkB,CAAC;IACvD,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,KAAK;IACL,MAAM;AACP,CAAA,EAAE;AA0BH,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;AAE5E,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAmB,KAAI;IACxE,MAAM,SAAS,GAAG,EAAE,CAAC;;AAErB,IAAA,IAAI,GAAG,IAAI,IAAI,cAAc,CAAC,SAAS,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,kBAAkB,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;AAC7C,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAA,QAAA,EAClC,QAAQ,EAAA,CACC,EACZ;AACJ;;;;"}

package/es/Submenu-cca2eec0.js

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

package/es/Submenu-cca2eec0.js.map

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

package/es/TabBarItem-7f2185cb.js

@@ -0,0 +1,139 @@
+/* @oracle/oraclejet-preact: 15.0.5 */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { useRef, useState, useCallback, useEffect, useContext, useLayoutEffect } from 'preact/hooks';
+import { keyExtractor, getPrevNextKey } from './utils/PRIVATE_collectionUtils.js';
+import { mergeProps } from './utils/UNSAFE_mergeProps.js';
+import './utils/UNSAFE_classNames.js';
+import { useCollectionFocusRing } from './hooks/PRIVATE_useCollectionFocusRing.js';
+import { useCurrentKey } from './hooks/PRIVATE_useCurrentKey.js';
+import './UNSAFE_Flex.js';
+import { useUser } from './hooks/UNSAFE_useUser.js';
+import { styles } from './UNSAFE_TabBar/themes/TabBarStyles.css.js';
+import { c as classNames } from './classNames-18f43a95.js';
+import { F as Flex } from './Flex-66810eb4.js';
+import { usePress } from './hooks/UNSAFE_usePress.js';
+import './UNSAFE_Text.js';
+import { createContext } from 'preact';
+import { mergeInterpolations } from './utils/UNSAFE_mergeInterpolations.js';
+import './utils/UNSAFE_interpolations/flexitem.js';
+import { useComponentTheme } from './hooks/UNSAFE_useComponentTheme.js';
+import { TabBarItemRedwoodTheme } from './UNSAFE_TabBar/themes/redwood/TabBarItemTheme.js';
+import { f as flexitemInterpolations } from './flexitem-66633b81.js';
+import { T as Text } from './Text-2d5b387b.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 = createContext(null);
+
+function TabBar({ children, layout = 'stretch', selection, onSelectionChange }) {
+    const rootRef = useRef(null);
+    const isFirstItemRendered = useRef(false);
+    const [currentKey, setCurrentKey] = useState(selection);
+    const [showFocusRing, focusRingProps] = useCollectionFocusRing((elem) => {
+        return !!rootRef.current?.contains(elem);
+    }, ['ArrowRight', 'ArrowLeft']);
+    const ITEM_SELECTOR = '.' + 'oj-c-tabbar-item';
+    const { currentKeyProps } = useCurrentKey((element) => keyExtractor(element, ITEM_SELECTOR), false, undefined, undefined, getPrevNextKey(rootRef.current, currentKey, true, ITEM_SELECTOR), 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 } = useUser();
+    const isRtl = direction === 'rtl';
+    const onKeyDown = 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 = getPrevNextKey(rootRef.current, targetKey, false, ITEM_SELECTOR)();
+                    if (nextKey !== null) {
+                        setCurrentKey(nextKey);
+                    }
+                }
+            }
+        }
+    }, [currentKey]);
+    const onKeyDownProps = { onKeyDown };
+    useEffect(() => {
+        isFirstItemRendered.current = false;
+    });
+    const isActiveElement = useCallback(() => {
+        return !!rootRef?.current?.contains(document.activeElement);
+    }, []);
+    const tabBarClass = classNames([styles.tabBarBase]);
+    return (jsx(TabBarContext.Provider, { value: {
+            selection,
+            onSelectionChange,
+            currentKey,
+            showFocusRing,
+            layout,
+            isActiveElement,
+            isFirstItemRendered
+        }, children: jsx("div", { class: tabBarClass, role: 'tablist', ref: rootRef, tabIndex: children ? -1 : 0, "aria-multiselectable": false, ...mergeProps(onKeyDownProps, currentKeyProps, focusRingProps), children: jsx(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 useContext(TabBarContext);
+}
+
+const ITEM_STYLE_CLASS = 'oj-c-tabbar-item';
+function TabBarItem({ itemKey, label, startContent, endContent }) {
+    const tabBarItemRef = 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 } = usePress(handlePress);
+    const isSelected = selection === itemKey;
+    useLayoutEffect(() => {
+        if (isActiveElement?.() && isCurrent) {
+            tabBarItemRef?.current?.focus();
+        }
+    }, [isCurrent, isActiveElement]);
+    const { classes, styles: { tabBarItemStartContent, tabBarItemEndContent } } = useComponentTheme(TabBarItemRedwoodTheme, {
+        selection: isSelected ? 'isSelected' : 'notSelected',
+        current: isCurrent ? 'isCurrent' : 'notCurrent',
+        focusRing: showFocusRing ? 'showFocusRing' : 'noFocusRing'
+    });
+    const tabBarItem = classNames([classes, ITEM_STYLE_CLASS]);
+    const tabBarItemStartContentClasses = classNames([tabBarItemStartContent]);
+    const tabBarItemEndContentClasses = classNames([tabBarItemEndContent]);
+    //instead of specifying flex: '1 0 auto' in cssProps var
+    const styleInterpolations = mergeInterpolations([
+        ...Object.values(flexitemInterpolations)
+    ]);
+    const flexDimensions = styleInterpolations({
+        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'
+    });
+    return (jsx("div", { "data-oj-key": itemKey, class: tabBarItem, role: "tab", ref: tabBarItemRef, ...pressProps, "aria-selected": isSelected, tabIndex: tabIndex, style: flexDimensions, children: jsxs(Flex, { height: "11x", minWidth: "14x", direction: "row", gap: "2x", align: "center", justify: "center", flex: "1 1 auto", children: [startContent && jsx("span", { class: tabBarItemStartContentClasses, children: startContent }), label && (jsx(Text, { size: "md", weight: "semiBold", children: label })), endContent && jsx("span", { class: tabBarItemEndContentClasses, children: endContent })] }) }));
+}
+
+export { TabBar as T, TabBarItem as a };
+//# sourceMappingURL=TabBarItem-7f2185cb.js.map

package/es/TabBarItem-7f2185cb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBarItem-7f2185cb.js","sources":["../../src/UNSAFE_TabBar/TabBarContext.ts","../../src/UNSAFE_TabBar/TabBar.tsx","../../src/UNSAFE_TabBar/useTabBarContext.ts","../../src/UNSAFE_TabBar/TabBarItem.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { createContext } from 'preact';\nimport { TabBarProps } from './TabBar';\nimport { MutableRefObject } from 'preact/compat';\n\ntype TabBarContextProps<K extends string | number> = Pick<\n  TabBarProps<K>,\n  'layout' | 'selection' | 'onSelectionChange'\n> & {\n  currentKey?: K;\n  showFocusRing: boolean;\n  isActiveElement: () => boolean;\n  isFirstItemRendered?: MutableRefObject<boolean>;\n};\n/**\n * Context used to pass TabBar information without having to pass it to TabBar children props.\n * We want to communicate information down to any interested TabBar item children.\n */\n\nconst TabBarContext = createContext<TabBarContextProps<string | number>>(null!);\n\nexport { TabBarContext };\n","import { ComponentChildren } from 'preact';\nimport { useState, useRef, useCallback, useEffect } from 'preact/hooks';\nimport { keyExtractor, getPrevNextKey } from '../utils/PRIVATE_collectionUtils';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { useCollectionFocusRing } from '../hooks/PRIVATE_useCollectionFocusRing';\nimport { useCurrentKey } from '../hooks/PRIVATE_useCurrentKey';\nimport { Flex } from '../UNSAFE_Flex';\nimport { TabBarContext } from './TabBarContext';\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport { styles } from './themes/TabBarStyles.css';\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\nexport type TabBarProps<K extends string | number> = {\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   * Key of the selected item.\n   */\n  selection?: K;\n  /**\n   * Callback function to handle when selection has changed\n   */\n  onSelectionChange?: <K extends string | number>(detail: SelectionDetail<K>) => void;\n};\n\nexport function TabBar<K extends string | number>({\n  children,\n  layout = 'stretch',\n  selection,\n  onSelectionChange\n}: TabBarProps<K>) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const isFirstItemRendered = useRef<boolean>(false);\n  const [currentKey, setCurrentKey] = useState<K | undefined>(selection);\n  const [showFocusRing, focusRingProps] = useCollectionFocusRing(\n    (elem: Element | null) => {\n      return !!rootRef.current?.contains(elem);\n    },\n    ['ArrowRight', 'ArrowLeft']\n  );\n\n  const ITEM_SELECTOR = '.' + 'oj-c-tabbar-item';\n\n  const { currentKeyProps } = useCurrentKey(\n    (element) => keyExtractor(element, ITEM_SELECTOR),\n    false,\n    undefined,\n    undefined,\n    getPrevNextKey(rootRef.current, currentKey, true, ITEM_SELECTOR),\n    getPrevNextKey(rootRef.current, currentKey, false, ITEM_SELECTOR),\n    currentKey,\n    (detail: CurrentKeyDetail<K | undefined>) => setCurrentKey(detail.value)\n  );\n\n  //If selection is undefined the currentKey would be undefined in that case keyboard\n  //navigation using useCurrentKey is not possible as it expects a valid currentKey\n  const { direction } = useUser();\n  const isRtl = direction === 'rtl';\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (currentKey === undefined) {\n        if (event.key === 'ArrowRight' || (!isRtl && event.key === 'ArrowLeft')) {\n          const targetKey = (event.target as HTMLDivElement).getAttribute('data-oj-key');\n          if (targetKey) {\n            const nextKey = getPrevNextKey(rootRef.current, targetKey, false, ITEM_SELECTOR)();\n            if (nextKey !== null) {\n              setCurrentKey(nextKey as K);\n            }\n          }\n        }\n      }\n    },\n    [currentKey]\n  );\n\n  const onKeyDownProps = { onKeyDown };\n\n  useEffect(() => {\n    isFirstItemRendered.current = false;\n  });\n\n  const isActiveElement = useCallback(() => {\n    return !!rootRef?.current?.contains(document.activeElement);\n  }, []);\n\n  const tabBarClass = classNames([styles.tabBarBase]);\n  return (\n    <TabBarContext.Provider\n      value={{\n        selection,\n        onSelectionChange,\n        currentKey,\n        showFocusRing,\n        layout,\n        isActiveElement,\n        isFirstItemRendered\n      }}>\n      <div\n        class={tabBarClass}\n        role={'tablist'}\n        ref={rootRef}\n        tabIndex={children ? -1 : 0}\n        aria-multiselectable={false}\n        {...mergeProps(onKeyDownProps, currentKeyProps, focusRingProps)}>\n        <Flex direction=\"row\" gap=\"8x\">\n          {children}\n        </Flex>\n      </div>\n    </TabBarContext.Provider>\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 { useContext } from 'preact/hooks';\nimport { TabBarContext } from './TabBarContext';\n\n/**\n * Utility hook for consuming the TabBarContext\n *\n * @returns The value of TabBarContext provider\n */\nfunction useTabBarContext() {\n  return useContext(TabBarContext);\n}\n\nexport { useTabBarContext };\n","import { ComponentChildren } from 'preact';\nimport { useRef, useLayoutEffect } from 'preact/hooks';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { usePress } from '../hooks/UNSAFE_usePress';\nimport { Text } from '../UNSAFE_Text';\nimport { Flex } from '../UNSAFE_Flex';\nimport { useTabBarContext } from './useTabBarContext';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { flexitemInterpolations } from '../utils/UNSAFE_interpolations/flexitem';\nimport type { FlexitemProps } from '../utils/UNSAFE_interpolations/flexitem';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { TabBarItemVariantOptions } from './themes/TabBarItemStyles.css';\nimport { TabBarItemRedwoodTheme } from './themes/redwood/TabBarItemTheme';\n\nexport type TabBarItemProps<K extends string | number> = {\n  /**\n   * Key of the TabBarItem\n   */\n  itemKey: K;\n  /**\n   * Label of the TabBarItem\n   */\n  label?: string;\n  /**\n   * The content to be rendered before the tab label\n   */\n  startContent?: ComponentChildren;\n  /**\n   * The content to be rendered after the tab label\n   */\n  endContent?: ComponentChildren;\n};\n\nconst ITEM_STYLE_CLASS = 'oj-c-tabbar-item';\n\nexport function TabBarItem<K extends string | number>({\n  itemKey,\n  label,\n  startContent,\n  endContent\n}: TabBarItemProps<K>) {\n  const tabBarItemRef = useRef<HTMLDivElement | null>(null);\n  const {\n    onSelectionChange,\n    selection,\n    currentKey,\n    showFocusRing,\n    layout,\n    isActiveElement,\n    isFirstItemRendered\n  } = useTabBarContext();\n\n  const isCurrent = currentKey === itemKey;\n  let tabIndex = isCurrent ? 0 : -1;\n  //If currentKey is undefined, in order to tab to a TabBarItem, the first TabBarItem should set its tabindex to 0\n  if (currentKey === undefined && isFirstItemRendered && !isFirstItemRendered.current) {\n    tabIndex = 0;\n    isFirstItemRendered.current = true;\n  }\n\n  //Selection\n  const handlePress = () => {\n    onSelectionChange?.({ value: itemKey as K });\n  };\n\n  const { pressProps } = usePress(handlePress);\n\n  const isSelected = selection === itemKey;\n\n  useLayoutEffect(() => {\n    if (isActiveElement?.() && isCurrent) {\n      tabBarItemRef?.current?.focus();\n    }\n  }, [isCurrent, isActiveElement]);\n\n  const {\n    classes,\n    styles: { tabBarItemStartContent, tabBarItemEndContent }\n  } = useComponentTheme<TabBarItemVariantOptions>(TabBarItemRedwoodTheme, {\n    selection: isSelected ? 'isSelected' : 'notSelected',\n    current: isCurrent ? 'isCurrent' : 'notCurrent',\n    focusRing: showFocusRing ? 'showFocusRing' : 'noFocusRing'\n  });\n\n  const tabBarItem = classNames([classes, ITEM_STYLE_CLASS]);\n\n  const tabBarItemStartContentClasses = classNames([tabBarItemStartContent]);\n  const tabBarItemEndContentClasses = classNames([tabBarItemEndContent]);\n\n  //instead of specifying flex: '1 0 auto' in cssProps var\n  const styleInterpolations = mergeInterpolations<FlexitemProps>([\n    ...Object.values(flexitemInterpolations)\n  ]);\n  const flexDimensions = styleInterpolations({\n    flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'\n  });\n\n  return (\n    <div\n      data-oj-key={itemKey}\n      class={tabBarItem}\n      role=\"tab\"\n      ref={tabBarItemRef}\n      {...pressProps}\n      aria-selected={isSelected}\n      tabIndex={tabIndex}\n      style={flexDimensions}>\n      <Flex\n        height=\"11x\"\n        minWidth=\"14x\"\n        direction=\"row\"\n        gap=\"2x\"\n        align=\"center\"\n        justify=\"center\"\n        flex=\"1 1 auto\">\n        {startContent && <span class={tabBarItemStartContentClasses}>{startContent}</span>}\n        {label && (\n          <Text size=\"md\" weight=\"semiBold\">\n            {label}\n          </Text>\n        )}\n        {endContent && <span class={tabBarItemEndContentClasses}>{endContent}</span>}\n      </Flex>\n    </div>\n  );\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}