@oracle/oraclejet-preact 18.0.10 → 18.0.11

package/cjs/NumberInputText-aaed9edc.js

@@ -0,0 +1,211 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var compat = require('preact/compat');
+var hooks = require('preact/hooks');
+var useFocusableTextField = require('./useFocusableTextField-2c36840d.js');
+require('./FormContext-9452bd30.js');
+var useFormContext = require('./useFormContext-4c3091dc.js');
+var FormFieldContext = require('./FormFieldContext-8418dc68.js');
+var useTextField = require('./useTextField-3ce8f0d0.js');
+var Label = require('./Label-6f070293.js');
+var PrefixSuffix = require('./PrefixSuffix-dd79bd7c.js');
+var usePrefixSuffix = require('./usePrefixSuffix-1de3a724.js');
+require('./keyboardUtils-691337c0.js');
+var TextFieldInput = require('./TextFieldInput-e83921a4.js');
+
+var ReadonlyTextFieldInput = require('./ReadonlyTextFieldInput-af4ddced.js');
+var StyledTextField = require('./StyledTextField-1d94ce8e.js');
+var TextField = require('./TextField-ed48834c.js');
+require('./LayerHost-7182bfaf.js');
+
+require('./logger-2b636482.js');
+var TabbableModeContext = require('./TabbableModeContext-e99d527e.js');
+
+
+require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js');
+var InlineUserAssistance = require('./InlineUserAssistance-d32aad17.js');
+var CompactUserAssistance = require('./CompactUserAssistance-d03b06d5.js');
+var mergeProps = require('./mergeProps-e3da7237.js');
+
+
+require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
+require('./tooltipUtils-2228b0f7.js');
+require('preact');
+
+require('./Popup-3e6b37ba.js');
+
+
+require('./UNSAFE_Label/themes/redwood/LabelVariants.css.js');
+require('./InputGroupContext-05f2a46f.js');
+
+
+require('./UNSAFE_Popup/themes/redwood/PopupVariants.css.js');
+var clientHints = require('./clientHints-a0f8f4d2.js');
+var useCurrentValueReducer = require('./useCurrentValueReducer-f37ac024.js');
+var ChevronDown = require('./ChevronDown-9d92edda.js');
+var ChevronUp = require('./ChevronUp-3ce00c86.js');
+var Minus = require('./Minus-d1cb1784.js');
+var Plus = require('./Plus-ff8ff2e8.js');
+var IconButton = require('./IconButton-6f58deac.js');
+var useTranslationBundle = require('./useTranslationBundle-6b0281a9.js');
+var Grid = require('./Grid-b8fadf4a.js');
+var useSpinning = require('./useSpinning-929c5225.js');
+var useSelectableTextField = require('./useSelectableTextField-892b62db.js');
+
+/**
+ * A StepButton is used to request a "step up" or "step down" to a value in NumberInputText.
+ * @param children The children are Icons for the button
+ * @param direction The direction of the step
+ * @param isDisabled Whether the button should be disabled
+ * @param onPointerDown Handler called when pointer is down
+ * @param onPointerUp Handler called when pointer is up
+ * @param onPointerOut Handler called when pointer is out
+ * @param onPointerCancel Handler called when pointer is canceled
+ */
+function StepButton({ direction, isDisabled, children, onPointerDown, onPointerUp, onPointerOut, onPointerCancel }) {
+    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const labelIncrease = translations.inputNumber_increase();
+    const labelDecrease = translations.inputNumber_decrease();
+    const label = direction === 'increase' ? labelIncrease : labelDecrease;
+    return (jsxRuntime.jsx(TabbableModeContext.TabbableModeContext.Provider, { value: { isTabbable: false }, children: jsxRuntime.jsx("div", { "aria-hidden": "true", onPointerDown: onPointerDown, onPointerUp: onPointerUp, onPointerOut: onPointerOut, onPointerCancel: onPointerCancel, children: jsxRuntime.jsx(IconButton.IconButton, { isDisabled: isDisabled, tooltip: label, variant: "ghost", size: "sm", children: children }) }) }));
+}
+
+// TODO: Replace Steppers with Buttonset when it becomes available
+function Steppers({ children }) {
+    return (jsxRuntime.jsx(Grid.Grid, { align: "center", gap: "1x", gridTemplateColumns: "1fr 1fr", children: children }));
+}
+
+const stepperVariants = ['directional', 'quantitative'];
+const NumberInputText = compat.forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-valuemax': ariaValueMax, 'aria-valuemin': ariaValueMin, 'aria-valuenow': ariaValueNow, 'aria-valuetext': ariaValueText, assistiveText, autoComplete = 'off', autoFocus = false, columnSpan, helpSourceLink, helpSourceText, isDisabled: propIsDisabled, isReadonly: propIsReadonly, isRequired = false, isRequiredShown, isStepDownDisabled: propIsStepDownDisabled, isStepUpDisabled: propIsStepUpDisabled, hasSteppers = false, stepperVariant = 'directional', label, labelEdge: propLabelEdge, labelStartWidth: propLabelStartWidth, messages, placeholder, prefix, suffix, textAlign: propTextAlign, userAssistanceDensity: propUserAssistanceDensity, value, variant = 'default', virtualKeyboard, onInput, onCommit, onSpin, onSpinComplete, onStep, testId }, ref) => {
+    const { currentCommitValue, dispatch } = useCurrentValueReducer.useCurrentValueReducer({ value });
+    const onInputAndDispatch = hooks.useCallback((detail) => {
+        dispatch({ type: 'input', payload: detail.value });
+        onInput?.(detail);
+    }, [onInput, dispatch]);
+    const onCommitAndDispatch = hooks.useCallback((detail) => {
+        dispatch({ type: 'commit', payload: detail.value });
+        onCommit?.(detail);
+    }, [onCommit, dispatch]);
+    const { isDisabled: isFormDisabled, isReadonly: isFormReadonly, labelEdge: formLabelEdge, labelStartWidth: formLabelStartWidth, textAlign: formTextAlign, userAssistanceDensity: formUserAssistanceDensity } = useFormContext.useFormContext();
+    // default to FormContext values if component properties are not specified
+    const isDisabled = propIsDisabled ?? isFormDisabled;
+    const isReadonly = propIsReadonly ?? isFormReadonly;
+    const labelEdge = propLabelEdge ?? formLabelEdge;
+    const labelStartWidth = propLabelStartWidth ?? formLabelStartWidth;
+    const textAlign = propTextAlign ?? formTextAlign;
+    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;
+    const enabledElementRef = hooks.useRef(null);
+    const readonlyElementRef = hooks.useRef(null);
+    const { focusProps, isFocused, methods: focusMethods } = useFocusableTextField.useFocusableTextField({
+        isDisabled,
+        isReadonly,
+        enabledElementRef,
+        readonlyElementRef
+    });
+    const { methods: selectMethods } = useSelectableTextField.useSelectableTextField(enabledElementRef);
+    hooks.useImperativeHandle(ref, () => mergeProps.mergeProps(focusMethods, selectMethods), [
+        focusMethods,
+        selectMethods
+    ]);
+    const { baseId, formFieldContext, inputProps, labelProps, textFieldProps, userAssistanceProps } = useTextField.useTextField({
+        ariaDescribedBy,
+        helpSourceLink,
+        helpSourceText,
+        isDisabled,
+        isFocused,
+        isReadonly,
+        isRequiredShown,
+        labelEdge,
+        messages,
+        styleVariant: variant,
+        userAssistanceDensity,
+        value
+    });
+    // Disable the steppers if the number input is disabled.
+    const isStepDownDisabled = isDisabled || propIsStepDownDisabled;
+    const isStepUpDisabled = isDisabled || propIsStepUpDisabled;
+    // Set focus to the input when a step is requested by clicking/holding down a step button.
+    // For Arrow up/down, it already has focus so no action is needed.
+    // Note: for readonly there are no steppers, for disabled stepping is disabled, so this only
+    // applies to enabled case.
+    const handleStep = hooks.useCallback((e) => {
+        if (!isFocused) {
+            enabledElementRef.current?.focus();
+        }
+        onStep?.(e);
+    }, [onStep, isFocused, enabledElementRef]);
+    // if hasSteppers, keyboardHandlerProps will be spread onto TextFieldInput to handle
+    // stepping functionality via the arrow up or down keys.
+    // also, pointerIncreaseHandlerProps and pointerDecreaseHandlerProps will be spread to
+    // the corresponding StepButton
+    const { keyboardHandlerProps, pointerIncreaseHandlerProps, pointerDecreaseHandlerProps } = useSpinning.useSpinning({
+        isStepDownDisabled,
+        isStepUpDisabled,
+        onSpin,
+        onSpinComplete,
+        onStep: handleStep
+    });
+    const DecreaseButton = hasSteppers ? (jsxRuntime.jsx(StepButton, { direction: "decrease", isDisabled: isStepDownDisabled, ...pointerDecreaseHandlerProps, children: stepperVariant === 'directional' ? jsxRuntime.jsx(ChevronDown.SvgChevronDown, {}) : jsxRuntime.jsx(Minus.SvgMinus, {}) })) : undefined;
+    const IncreaseButton = hasSteppers ? (jsxRuntime.jsx(StepButton, { direction: "increase", isDisabled: isStepUpDisabled, ...pointerIncreaseHandlerProps, children: stepperVariant === 'directional' ? jsxRuntime.jsx(ChevronUp.SvgChevronUp, {}) : jsxRuntime.jsx(Plus.SvgPlus, {}) })) : undefined;
+    // when stepperVariant is quantitative, the decrease button is placed in the startContent slot
+    const startContent = hasSteppers && stepperVariant === 'quantitative' ? DecreaseButton : undefined;
+    // when stepperVariant is directional, both buttons are wrapped in Steppers and placed in the endContent slot
+    // if it equals quantitative, only the increase button is placed in the endContent slot
+    const endContent = hasSteppers ? (stepperVariant === 'directional' ? (jsxRuntime.jsxs(Steppers, { children: [DecreaseButton, IncreaseButton] })) : (IncreaseButton)) : undefined;
+    const hasInsideLabel = label !== undefined && labelEdge === 'inside';
+    const { shouldRenderPrefix, shouldRenderSuffix, prefixProps, suffixProps, valuePrefixSuffix, ariaLabelledBy } = usePrefixSuffix.usePrefixSuffix({
+        baseId,
+        hasEndContent: endContent !== undefined,
+        hasInsideLabel,
+        hasStartContent: startContent !== undefined,
+        hasValue: formFieldContext.hasValue,
+        isDisabled,
+        isFocused,
+        labelId: labelProps.id,
+        prefix,
+        suffix,
+        value
+    });
+    const renderedPrefix = shouldRenderPrefix ? jsxRuntime.jsx(PrefixSuffix.PrefixSuffix, { ...prefixProps }) : undefined;
+    const renderedSuffix = shouldRenderSuffix ? jsxRuntime.jsx(PrefixSuffix.PrefixSuffix, { ...suffixProps }) : undefined;
+    const labelComp = labelEdge !== 'none' ? jsxRuntime.jsx(Label.Label, { ...labelProps, children: label }) : undefined;
+    const fieldLabelProps = {
+        label: labelEdge !== 'none' ? labelComp : undefined,
+        labelEdge: labelEdge !== 'none' ? labelEdge : undefined,
+        labelStartWidth: labelEdge !== 'none' ? labelStartWidth : undefined
+    };
+    const ariaLabel = labelEdge === 'none' ? label : undefined;
+    const isInlineDensity = userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow';
+    const inlineUserAssistance = isInlineDensity ? (isDisabled || isReadonly ? (
+    // save space for user assistance if density is 'efficient', even though we don't
+    // render user assistance for disabled or readonly fields
+    userAssistanceDensity !== 'efficient' ? undefined : (jsxRuntime.jsx(InlineUserAssistance.InlineUserAssistance, { userAssistanceDensity: userAssistanceDensity, ...userAssistanceProps }))) : (jsxRuntime.jsx(InlineUserAssistance.InlineUserAssistance, { assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, messages: messages, isRequiredShown: isRequiredShown, userAssistanceDensity: userAssistanceDensity, ...userAssistanceProps }))) : undefined;
+    const anchorRef = hooks.useRef(null);
+    const compactUserAssistance = userAssistanceDensity === 'compact' ? (jsxRuntime.jsx(CompactUserAssistance.CompactUserAssistance, { anchorRef: anchorRef, messages: messages, assistiveText: assistiveText, ...userAssistanceProps })) : undefined;
+    if (isReadonly) {
+        const mainContent = (jsxRuntime.jsx(ReadonlyTextFieldInput.ReadonlyTextFieldInput, { "aria-describedby": inputProps['aria-describedby'], "aria-label": ariaLabel, "aria-labelledby": labelProps.id, as: "div", autoFocus: autoFocus, elementRef: readonlyElementRef, textAlign: textAlign, value: valuePrefixSuffix, hasEmptyLabel: label === '' && labelEdge === 'none', hasInsideLabel: hasInsideLabel }));
+        return (jsxRuntime.jsx(FormFieldContext.FormFieldContext.Provider, { value: formFieldContext, children: jsxRuntime.jsx(StyledTextField.ReadonlyTextField, { role: "presentation", columnSpan: columnSpan, compactUserAssistance: compactUserAssistance, inlineUserAssistance: inlineUserAssistance, onBlur: focusProps.onFocusOut, onFocus: focusProps.onFocusIn, ref: anchorRef, mainContent: mainContent, testId: testId, ...fieldLabelProps }) }));
+    }
+    // If ariaValueText is the same as ariaValueNow.toString, no need to show it.
+    const valueText = ariaValueNow === undefined
+        ? ariaValueText
+        : ariaValueNow.toString() !== ariaValueText
+            ? ariaValueText
+            : undefined;
+    const mainContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderedPrefix, jsxRuntime.jsx(TextFieldInput.TextFieldInput, { "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-valuemax": hasSteppers ? ariaValueMax : undefined, "aria-valuemin": hasSteppers ? ariaValueMin : undefined, "aria-valuenow": hasSteppers ? ariaValueNow : undefined, "aria-valuetext": hasSteppers ? valueText : undefined, autoComplete: autoComplete, autoFocus: autoFocus, currentCommitValue: currentCommitValue, hasEmptyLabel: label === '' && labelEdge === 'none', hasEndContent: endContent !== undefined, hasInsideLabel: hasInsideLabel, hasPrefix: renderedPrefix !== undefined, hasStartContent: startContent !== undefined, hasSuffix: renderedSuffix !== undefined, inputRef: enabledElementRef, isRequired: isRequired, placeholder: placeholder, role: hasSteppers ? 'spinbutton' : undefined, textAlign: textAlign, type: isMobile() ? virtualKeyboard : undefined, value: isDisabled ? valuePrefixSuffix : value, onCommit: onCommitAndDispatch, onInput: onInputAndDispatch, ...inputProps, ...(hasSteppers ? keyboardHandlerProps : {}) }), renderedSuffix] }));
+    return (jsxRuntime.jsx(FormFieldContext.FormFieldContext.Provider, { value: formFieldContext, children: jsxRuntime.jsx(TextField.TextField, { startContent: startContent, endContent: endContent, columnSpan: columnSpan, compactUserAssistance: compactUserAssistance, inlineUserAssistance: inlineUserAssistance, mainContent: mainContent, onBlur: focusProps.onFocusOut, onFocus: focusProps.onFocusIn, mainFieldRef: anchorRef, hasZeroStartMargin: hasSteppers && stepperVariant === 'quantitative', testId: testId, ...textFieldProps, ...fieldLabelProps }) }));
+});
+/**
+ * Helper function to determine whether the current device is a mobile device
+ * @returns true if running on a mobile device, false otherwise
+ */
+function isMobile() {
+    const deviceType = clientHints.getClientHints().deviceType;
+    return deviceType === 'phone' || deviceType === 'tablet';
+}
+
+exports.NumberInputText = NumberInputText;
+exports.stepperVariants = stepperVariants;
+//# sourceMappingURL=NumberInputText-aaed9edc.js.map

package/cjs/NumberInputText-aaed9edc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInputText-aaed9edc.js","sources":["../../src/UNSAFE_NumberInputText/StepButton.tsx","../../src/UNSAFE_NumberInputText/Steppers.tsx","../../src/UNSAFE_NumberInputText/NumberInputText.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 { ComponentChildren } from 'preact';\n\nimport { IconButton } from '#UNSAFE_IconButton';\nimport { BundleType } from '#resources/nls/bundle';\nimport { StepDirection } from '#hooks/UNSAFE_useSpinning';\nimport { TabbableModeContext } from '#hooks/UNSAFE_useTabbableMode';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\n\ntype Props = {\n  /**\n   * The children are Icons for the button.\n   */\n  children: ComponentChildren;\n\n  /**\n   * The direction of the step.\n   */\n  direction: StepDirection;\n\n  /**\n   * Whether the button is disabled.\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Pointer event down handler\n   */\n  onPointerDown?: (event: PointerEvent) => void;\n\n  /**\n   * Pointer event up handler\n   */\n  onPointerUp?: (event: PointerEvent) => void;\n\n  /**\n   * Pointer event out handler\n   */\n  onPointerOut?: (event: PointerEvent) => void;\n\n  /**\n   * Pointer event cancel handler\n   */\n  onPointerCancel?: (event: PointerEvent) => void;\n};\n\n/**\n * A StepButton is used to request a \"step up\" or \"step down\" to a value in NumberInputText.\n * @param children The children are Icons for the button\n * @param direction The direction of the step\n * @param isDisabled Whether the button should be disabled\n * @param onPointerDown Handler called when pointer is down\n * @param onPointerUp Handler called when pointer is up\n * @param onPointerOut Handler called when pointer is out\n * @param onPointerCancel Handler called when pointer is canceled\n */\nexport function StepButton({\n  direction,\n  isDisabled,\n  children,\n  onPointerDown,\n  onPointerUp,\n  onPointerOut,\n  onPointerCancel\n}: Props) {\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const labelIncrease = translations.inputNumber_increase();\n  const labelDecrease = translations.inputNumber_decrease();\n  const label = direction === 'increase' ? labelIncrease : labelDecrease;\n\n  return (\n    <TabbableModeContext.Provider value={{ isTabbable: false }}>\n      <div\n        aria-hidden=\"true\"\n        onPointerDown={onPointerDown}\n        onPointerUp={onPointerUp}\n        onPointerOut={onPointerOut}\n        onPointerCancel={onPointerCancel}>\n        <IconButton isDisabled={isDisabled} tooltip={label} variant=\"ghost\" size=\"sm\">\n          {children}\n        </IconButton>\n      </div>\n    </TabbableModeContext.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 { ComponentChildren } from 'preact';\nimport { Grid } from '../UNSAFE_Grid';\n\nexport type Props = {\n  /**\n   *The children are StepButtons.\n   */\n  children: ComponentChildren;\n};\n\n// TODO: Replace Steppers with Buttonset when it becomes available\nexport function Steppers({ children }: Props) {\n  return (\n    <Grid align=\"center\" gap=\"1x\" gridTemplateColumns=\"1fr 1fr\">\n      {children}\n    </Grid>\n  );\n}\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentProps, Ref } from 'preact';\nimport { forwardRef } from 'preact/compat';\nimport { useCallback, useImperativeHandle, useRef } from 'preact/hooks';\nimport { FocusableHandle, useFocusableTextField } from '../hooks/UNSAFE_useFocusableTextField';\nimport { useFormContext } from '../hooks/UNSAFE_useFormContext';\nimport { FormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { useTextField } from '../hooks/UNSAFE_useTextField';\nimport { Label } from '../UNSAFE_Label';\nimport { PrefixSuffix } from '../UNSAFE_PrefixSuffix';\nimport { usePrefixSuffix } from '../hooks/UNSAFE_usePrefixSuffix';\nimport {\n  ReadonlyTextField,\n  ReadonlyTextFieldInput,\n  TextField,\n  TextFieldInput\n} from '../UNSAFE_TextField';\nimport {\n  InlineUserAssistance,\n  CompactUserAssistance,\n  UserAssistanceDensityType\n} from '../UNSAFE_UserAssistance';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\nimport { Size } from '../utils/UNSAFE_size';\nimport { ValueUpdateDetail } from '../utils/UNSAFE_valueUpdateDetail';\nimport { useCurrentValueReducer } from '../hooks/UNSAFE_useCurrentValueReducer';\nimport { DecrementIcon } from '../PRIVATE_ThemedIcons/DecrementIcon';\nimport { IncrementIcon } from '../PRIVATE_ThemedIcons/IncrementIcon';\nimport { MinusIcon } from '../PRIVATE_ThemedIcons/MinusIcon';\nimport { PlusIcon } from '../PRIVATE_ThemedIcons/PlusIcon';\nimport { StepButton } from './StepButton';\nimport { Steppers } from './Steppers';\nimport { useSpinning, StepEvent } from '../hooks/UNSAFE_useSpinning';\nimport { LayoutColumnSpan } from '../utils/UNSAFE_styles/Layout';\nimport type { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { SelectableHandle, useSelectableTextField } from '#hooks/UNSAFE_useSelectableTextField';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\n\ntype TextFieldInputProps = ComponentProps<typeof TextFieldInput>;\n\ntype InlineUserAssistanceProps = ComponentProps<typeof InlineUserAssistance>;\n\ntype NumberInputTextProps = {\n  /**\n   * Controls whether the step down button is disabled.\n   */\n  isStepDownDisabled?: boolean;\n\n  /**\n   * Controls whether the step up button is disabled.\n   */\n  isStepUpDisabled?: boolean;\n\n  /**\n   * Called when a continuous step is requested (aka \"spin\")\n   * by holding down the arrow up or arrow down keys, or\n   * by pressing and holding down a step button.\n   */\n  onSpin?: (event: StepEvent) => void;\n\n  /**\n   * Called when spinning is complete and the user has\n   * released the arrow key or step button.\n   */\n  onSpinComplete?: () => void;\n\n  /**\n   * Called when a step is requested by clicking a step button\n   * or by pressing the arrow up or arrow down keys.\n   */\n  onStep?: (event: StepEvent) => void;\n};\n\ntype Props = NumberInputTextProps &\n  TestIdProps & {\n    /**+\n     * The ID of an element (or space separated IDs of multiple elements) that\n     * describes the input.\n     */\n    'aria-describedby'?: TextFieldInputProps['aria-describedby'];\n\n    /**\n     * The maximum allowed value when hasSteppers is true. Used for the aria-valuemax attribute.\n     * When hasSteppers is false, this is ignored because when there are no steppers, there is no role=\"spinbutton\",\n     * and aria-value* attributes are not valid without this role.\n     */\n    'aria-valuemax'?: TextFieldInputProps['aria-valuemax'];\n\n    /**\n     * The minimum allowed value when hasSteppers is true. Used for the aria-valuemin attribute.\n     * When hasSteppers is false, this is ignored because when there are no steppers, there is no role=\"spinbutton\",\n     * and aria-value* attributes are not valid without this role.\n     */\n    'aria-valuemin'?: TextFieldInputProps['aria-valuemin'];\n\n    /**\n     * The number value of the component when hasSteppers is true. Used for the aria-valuenow attribute.\n     * When hasSteppers is false, this is ignored because when there are no steppers, there is no role=\"spinbutton\",\n     * and aria-value* attributes are not valid without this role.\n     */\n    'aria-valuenow'?: TextFieldInputProps['aria-valuenow'];\n\n    /**\n     * The formatted value of the component when hasSteppers is true. Used for the aria-valueText\n     * attribute to provide a more human readable text alternative for\n     * aria-valuenow.\n     * When hasSteppers is false, this is ignored because when there are no steppers, there is no role=\"spinbutton\",\n     * and aria-value* attributes are not valid without this role.\n     */\n    'aria-valuetext'?: TextFieldInputProps['aria-valuetext'];\n\n    /**\n     * Text to provide guidance to help the user understand what data to enter.\n     */\n    assistiveText?: InlineUserAssistanceProps['assistiveText'];\n\n    /**\n     * Dictates component's autocomplete state.\n     * This attribute indicates whether the value of the control can be automatically completed by the browser.\n     * The common values are \"on\" and \"off\".\n     */\n    autoComplete?: TextFieldInputProps['autoComplete'];\n\n    /**\n     * Autofocus specifies whether the component will get focus when the page is loaded.\n     * If it is set to true then the associated component will get input focus when the page is loaded.\n     * Setting this property doesn't set the focus to the component: it tells the browser to focus\n     * to it when the element is inserted in the document.\n     */\n    autoFocus?: TextFieldInputProps['autoFocus'];\n\n    /**\n     * Specifies how many columns to span in a FormLayout with direction === 'row'\n     */\n    columnSpan?: LayoutColumnSpan;\n\n    /**\n     * Controls whether the step buttons are shown.\n     */\n    hasSteppers?: boolean;\n\n    /**\n     * Help source URL associated with the component.\n     */\n    helpSourceLink?: InlineUserAssistanceProps['helpSourceLink'];\n\n    /**\n     * Custom text to be rendered for the <code>helpSourceLink</code>.\n     */\n    helpSourceText?: InlineUserAssistanceProps['helpSourceText'];\n\n    /**\n     * Specifies whether the component is disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * Specifies whether the component is readonly.\n     */\n    isReadonly?: boolean;\n\n    /**\n     * Specifies for accessibility purposes whether a value is required.\n     *\n     * Setting this property to <code>false</code> means that a value is not required to be\n     * committed by the user. Setting this property to <code>true</code> means that a value\n     * is required to be committed by the user.\n     */\n    isRequired?: TextFieldInputProps['isRequired'];\n\n    /**\n     * Specifies whether to show an indicator on screen that a value is required, for example\n     * before the user has committed a value.\n     */\n    isRequiredShown?: InlineUserAssistanceProps['isRequiredShown'];\n\n    /**\n     * Specifies the label associated with the field.\n     */\n    label: string;\n\n    /**\n     * Specifies where the label is positioned relative to the field.\n     */\n    labelEdge?: 'inside' | 'start' | 'top' | 'none';\n\n    /**\n     * Specifies the width of the label when <code>labelEdge</code> is <code>\"start\"</code>.\n     */\n    labelStartWidth?: Size;\n\n    /**\n     * Messages to show on screen that are associated with the component.\n     */\n    messages?: InlineUserAssistanceProps['messages'];\n\n    /**\n     * A short hint to display before the user enters a value.\n     */\n    placeholder?: TextFieldInputProps['placeholder'];\n\n    /**\n     * The prefix displays as regular text before the input text, and inline with it.\n     * The prefix is not editable or focusable.\n     */\n    prefix?: string;\n\n    /**\n     * Variant style of step buttons.\n     * @default directional\n     */\n    stepperVariant?: (typeof stepperVariants)[number];\n\n    /**\n     * The suffix displays as regular text after the input text, and inline with it.\n     * The suffix is not editable or focusable.\n     */\n    suffix?: string;\n\n    /**\n     * Specifies how to align text within the field.\n     */\n    textAlign?: TextFieldInputProps['textAlign'];\n\n    /**\n     * Specifies the density of the user assistance presentation. It can be set to:\n     * <ul>\n     * <li><code>'efficient'</code>: Show inline and reserve space to prevent layout reflow when user\n     * assistance text is displayed.</li>\n     * <li><code>'reflow'</code>: Show inline. Layout will reflow when text is displayed.</li>\n     * <li><code>'compact'</code>: Messages, help, hints, and required will not be shown inline; they will show in a mode that keeps the screen more compact, like a popup for the messages, and a required icon to indicate Required. </li>\n     * </ul>\n     */\n    userAssistanceDensity?: UserAssistanceDensityType;\n\n    /**\n     * The current possibly formatted display value of the component.\n     */\n    value?: TextFieldInputProps['value'];\n\n    /**\n     * The style variant of the component.\n     */\n    variant?: TextFieldInputProps['variant'];\n\n    /**\n     * The type of virtual keyboard to display for entering a value on mobile browsers.\n     * This property has no effect on desktop browsers.\n     */\n    virtualKeyboard?: 'auto' | 'number' | 'text';\n\n    /**\n     * Callback invoked when the user commits the entered value by either blurring or pressing Enter.\n     */\n    onCommit?: TextFieldInputProps['onCommit'];\n\n    /**\n     * Callback invoked each time the user changes the value of the field. For example, if the user\n     * types 'abcd', this callback will be called four times with the value as 'a', 'ab', 'abc' and 'abcd'\n     * respectively.\n     */\n    onInput: TextFieldInputProps['onInput'];\n  };\n\ntype FocusSelectHandle = FocusableHandle & SelectableHandle;\n\nexport const stepperVariants = ['directional', 'quantitative'] as const;\n\nexport const NumberInputText = forwardRef(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      'aria-valuemax': ariaValueMax,\n      'aria-valuemin': ariaValueMin,\n      'aria-valuenow': ariaValueNow,\n      'aria-valuetext': ariaValueText,\n      assistiveText,\n      autoComplete = 'off',\n      autoFocus = false,\n      columnSpan,\n      helpSourceLink,\n      helpSourceText,\n      isDisabled: propIsDisabled,\n      isReadonly: propIsReadonly,\n      isRequired = false,\n      isRequiredShown,\n      isStepDownDisabled: propIsStepDownDisabled,\n      isStepUpDisabled: propIsStepUpDisabled,\n      hasSteppers = false,\n      stepperVariant = 'directional',\n      label,\n      labelEdge: propLabelEdge,\n      labelStartWidth: propLabelStartWidth,\n      messages,\n      placeholder,\n      prefix,\n      suffix,\n      textAlign: propTextAlign,\n      userAssistanceDensity: propUserAssistanceDensity,\n      value,\n      variant = 'default',\n      virtualKeyboard,\n      onInput,\n      onCommit,\n      onSpin,\n      onSpinComplete,\n      onStep,\n      testId\n    }: Props,\n    ref?: Ref<FocusSelectHandle>\n  ) => {\n    const { currentCommitValue, dispatch } = useCurrentValueReducer({ value });\n    const onInputAndDispatch = useCallback(\n      (detail: ValueUpdateDetail<string>) => {\n        dispatch({ type: 'input', payload: detail.value });\n        onInput?.(detail);\n      },\n      [onInput, dispatch]\n    );\n    const onCommitAndDispatch = useCallback(\n      (detail: ValueUpdateDetail<string>) => {\n        dispatch({ type: 'commit', payload: detail.value });\n        onCommit?.(detail);\n      },\n      [onCommit, dispatch]\n    );\n    const {\n      isDisabled: isFormDisabled,\n      isReadonly: isFormReadonly,\n      labelEdge: formLabelEdge,\n      labelStartWidth: formLabelStartWidth,\n      textAlign: formTextAlign,\n      userAssistanceDensity: formUserAssistanceDensity\n    } = useFormContext();\n    // default to FormContext values if component properties are not specified\n    const isDisabled = propIsDisabled ?? isFormDisabled;\n    const isReadonly = propIsReadonly ?? isFormReadonly;\n    const labelEdge = propLabelEdge ?? formLabelEdge;\n    const labelStartWidth = propLabelStartWidth ?? formLabelStartWidth;\n    const textAlign = propTextAlign ?? formTextAlign;\n    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;\n\n    const enabledElementRef = useRef<HTMLInputElement>(null);\n    const readonlyElementRef = useRef<HTMLDivElement>(null);\n\n    const {\n      focusProps,\n      isFocused,\n      methods: focusMethods\n    } = useFocusableTextField<HTMLInputElement, HTMLDivElement>({\n      isDisabled,\n      isReadonly,\n      enabledElementRef,\n      readonlyElementRef\n    });\n\n    const { methods: selectMethods } = useSelectableTextField<HTMLInputElement>(enabledElementRef);\n\n    useImperativeHandle(ref!, () => mergeProps(focusMethods, selectMethods), [\n      focusMethods,\n      selectMethods\n    ]);\n\n    const {\n      baseId,\n      formFieldContext,\n      inputProps,\n      labelProps,\n      textFieldProps,\n      userAssistanceProps\n    } = useTextField({\n      ariaDescribedBy,\n      helpSourceLink,\n      helpSourceText,\n      isDisabled,\n      isFocused,\n      isReadonly,\n      isRequiredShown,\n      labelEdge,\n      messages,\n      styleVariant: variant,\n      userAssistanceDensity,\n      value\n    });\n    // Disable the steppers if the number input is disabled.\n    const isStepDownDisabled = isDisabled || propIsStepDownDisabled;\n    const isStepUpDisabled = isDisabled || propIsStepUpDisabled;\n\n    // Set focus to the input when a step is requested by clicking/holding down a step button.\n    // For Arrow up/down, it already has focus so no action is needed.\n    // Note: for readonly there are no steppers, for disabled stepping is disabled, so this only\n    // applies to enabled case.\n    const handleStep = useCallback(\n      (e: StepEvent) => {\n        if (!isFocused) {\n          enabledElementRef.current?.focus();\n        }\n        onStep?.(e);\n      },\n      [onStep, isFocused, enabledElementRef]\n    );\n\n    // if hasSteppers, keyboardHandlerProps will be spread onto TextFieldInput to handle\n    // stepping functionality via the arrow up or down keys.\n    // also, pointerIncreaseHandlerProps and pointerDecreaseHandlerProps will be spread to\n    // the corresponding StepButton\n    const { keyboardHandlerProps, pointerIncreaseHandlerProps, pointerDecreaseHandlerProps } =\n      useSpinning({\n        isStepDownDisabled,\n        isStepUpDisabled,\n        onSpin,\n        onSpinComplete,\n        onStep: handleStep\n      });\n\n    const DecreaseButton = hasSteppers ? (\n      <StepButton\n        direction=\"decrease\"\n        isDisabled={isStepDownDisabled}\n        {...pointerDecreaseHandlerProps}>\n        {stepperVariant === 'directional' ? <DecrementIcon /> : <MinusIcon />}\n      </StepButton>\n    ) : undefined;\n\n    const IncreaseButton = hasSteppers ? (\n      <StepButton\n        direction=\"increase\"\n        isDisabled={isStepUpDisabled}\n        {...pointerIncreaseHandlerProps}>\n        {stepperVariant === 'directional' ? <IncrementIcon /> : <PlusIcon />}\n      </StepButton>\n    ) : undefined;\n\n    // when stepperVariant is quantitative, the decrease button is placed in the startContent slot\n    const startContent =\n      hasSteppers && stepperVariant === 'quantitative' ? DecreaseButton : undefined;\n\n    // when stepperVariant is directional, both buttons are wrapped in Steppers and placed in the endContent slot\n    // if it equals quantitative, only the increase button is placed in the endContent slot\n    const endContent = hasSteppers ? (\n      stepperVariant === 'directional' ? (\n        <Steppers>\n          {DecreaseButton}\n          {IncreaseButton}\n        </Steppers>\n      ) : (\n        IncreaseButton\n      )\n    ) : undefined;\n\n    const hasInsideLabel = label !== undefined && labelEdge === 'inside';\n\n    const {\n      shouldRenderPrefix,\n      shouldRenderSuffix,\n      prefixProps,\n      suffixProps,\n      valuePrefixSuffix,\n      ariaLabelledBy\n    } = usePrefixSuffix({\n      baseId,\n      hasEndContent: endContent !== undefined,\n      hasInsideLabel,\n      hasStartContent: startContent !== undefined,\n      hasValue: formFieldContext.hasValue,\n      isDisabled,\n      isFocused,\n      labelId: labelProps.id,\n      prefix,\n      suffix,\n      value\n    });\n\n    const renderedPrefix = shouldRenderPrefix ? <PrefixSuffix {...prefixProps} /> : undefined;\n    const renderedSuffix = shouldRenderSuffix ? <PrefixSuffix {...suffixProps} /> : undefined;\n    const labelComp = labelEdge !== 'none' ? <Label {...labelProps}>{label}</Label> : undefined;\n\n    const fieldLabelProps = {\n      label: labelEdge !== 'none' ? labelComp : undefined,\n      labelEdge: labelEdge !== 'none' ? labelEdge : undefined,\n      labelStartWidth: labelEdge !== 'none' ? labelStartWidth : undefined\n    };\n\n    const ariaLabel = labelEdge === 'none' ? label : undefined;\n    const isInlineDensity =\n      userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow';\n\n    const inlineUserAssistance = isInlineDensity ? (\n      isDisabled || isReadonly ? (\n        // save space for user assistance if density is 'efficient', even though we don't\n        // render user assistance for disabled or readonly fields\n        userAssistanceDensity !== 'efficient' ? undefined : (\n          <InlineUserAssistance\n            userAssistanceDensity={userAssistanceDensity}\n            {...userAssistanceProps}\n          />\n        )\n      ) : (\n        <InlineUserAssistance\n          assistiveText={assistiveText}\n          fieldLabel={label}\n          helpSourceLink={helpSourceLink}\n          helpSourceText={helpSourceText}\n          messages={messages}\n          isRequiredShown={isRequiredShown}\n          userAssistanceDensity={userAssistanceDensity}\n          {...userAssistanceProps}\n        />\n      )\n    ) : undefined;\n\n    const anchorRef = useRef<HTMLDivElement>(null);\n\n    const compactUserAssistance =\n      userAssistanceDensity === 'compact' ? (\n        <CompactUserAssistance\n          anchorRef={anchorRef}\n          messages={messages}\n          assistiveText={assistiveText}\n          {...userAssistanceProps}\n        />\n      ) : undefined;\n\n    if (isReadonly) {\n      const mainContent = (\n        <ReadonlyTextFieldInput\n          aria-describedby={inputProps['aria-describedby']}\n          aria-label={ariaLabel}\n          aria-labelledby={labelProps.id}\n          as=\"div\"\n          autoFocus={autoFocus}\n          elementRef={readonlyElementRef}\n          textAlign={textAlign}\n          value={valuePrefixSuffix}\n          hasEmptyLabel={label === '' && labelEdge === 'none'}\n          hasInsideLabel={hasInsideLabel}\n        />\n      );\n      return (\n        <FormFieldContext.Provider value={formFieldContext}>\n          <ReadonlyTextField\n            role=\"presentation\"\n            columnSpan={columnSpan}\n            compactUserAssistance={compactUserAssistance}\n            inlineUserAssistance={inlineUserAssistance}\n            onBlur={focusProps.onFocusOut}\n            onFocus={focusProps.onFocusIn}\n            ref={anchorRef}\n            mainContent={mainContent}\n            testId={testId}\n            {...fieldLabelProps}></ReadonlyTextField>\n        </FormFieldContext.Provider>\n      );\n    }\n\n    // If ariaValueText is the same as ariaValueNow.toString, no need to show it.\n    const valueText =\n      ariaValueNow === undefined\n        ? ariaValueText\n        : ariaValueNow.toString() !== ariaValueText\n        ? ariaValueText\n        : undefined;\n\n    const mainContent = (\n      <>\n        {renderedPrefix}\n        <TextFieldInput\n          aria-labelledby={ariaLabelledBy}\n          aria-label={ariaLabel}\n          aria-valuemax={hasSteppers ? ariaValueMax : undefined}\n          aria-valuemin={hasSteppers ? ariaValueMin : undefined}\n          aria-valuenow={hasSteppers ? ariaValueNow : undefined}\n          aria-valuetext={hasSteppers ? valueText : undefined}\n          autoComplete={autoComplete}\n          autoFocus={autoFocus}\n          currentCommitValue={currentCommitValue}\n          hasEmptyLabel={label === '' && labelEdge === 'none'}\n          hasEndContent={endContent !== undefined}\n          hasInsideLabel={hasInsideLabel}\n          hasPrefix={renderedPrefix !== undefined}\n          hasStartContent={startContent !== undefined}\n          hasSuffix={renderedSuffix !== undefined}\n          inputRef={enabledElementRef}\n          isRequired={isRequired}\n          placeholder={placeholder}\n          role={hasSteppers ? 'spinbutton' : undefined}\n          textAlign={textAlign}\n          type={isMobile() ? virtualKeyboard : undefined}\n          value={isDisabled ? valuePrefixSuffix : value}\n          onCommit={onCommitAndDispatch}\n          onInput={onInputAndDispatch}\n          {...inputProps}\n          {...(hasSteppers ? keyboardHandlerProps : {})}\n        />\n        {renderedSuffix}\n      </>\n    );\n\n    return (\n      <FormFieldContext.Provider value={formFieldContext}>\n        <TextField\n          startContent={startContent}\n          endContent={endContent}\n          columnSpan={columnSpan}\n          compactUserAssistance={compactUserAssistance}\n          inlineUserAssistance={inlineUserAssistance}\n          mainContent={mainContent}\n          onBlur={focusProps.onFocusOut}\n          onFocus={focusProps.onFocusIn}\n          mainFieldRef={anchorRef}\n          hasZeroStartMargin={hasSteppers && stepperVariant === 'quantitative'}\n          testId={testId}\n          {...textFieldProps}\n          {...fieldLabelProps}\n        />\n      </FormFieldContext.Provider>\n    );\n  }\n);\n\n/**\n * Helper function to determine whether the current device is a mobile device\n * @returns true if running on a mobile device, false otherwise\n */\nfunction isMobile() {\n  const deviceType = getClientHints().deviceType;\n  return deviceType === 'phone' || deviceType === 'tablet';\n}\n"],"names":["useTranslationBundle","_jsx","TabbableModeContext","IconButton","Grid","forwardRef","useCurrentValueReducer","useCallback","useFormContext","useRef","useFocusableTextField","useSelectableTextField","useImperativeHandle","mergeProps","useTextField","useSpinning","DecrementIcon","MinusIcon","IncrementIcon","PlusIcon","_jsxs","usePrefixSuffix","PrefixSuffix","Label","InlineUserAssistance","CompactUserAssistance","ReadonlyTextFieldInput","FormFieldContext","ReadonlyTextField","TextFieldInput","TextField","getClientHints"],"mappings":"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"}

package/cjs/OverflowTabBar-3310457e.js

@@ -0,0 +1,71 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var hooks = require('preact/hooks');
+var classNames = require('./classNames-c14c6ef3.js');
+var TabBar = require('./TabBar-bf94b95a.js');
+var UNSAFE_OverflowTabBar_themes_OverflowTabBarStyles_css = require('./UNSAFE_OverflowTabBar/themes/OverflowTabBarStyles.css.js');
+var useDetectHorizontalOverflow = require('./useDetectHorizontalOverflow-003f7c4a.js');
+var RemovableTabBarItem = require('./RemovableTabBarItem-31809ee8.js');
+var TabBarItem = require('./TabBarItem-00fcf601.js');
+var OverflowTabBarItem = require('./OverflowTabBarItem-ff9d5b73.js');
+
+/**
+ * OverflowTabBar handles the rendering of overflowing tab items.
+ */
+function OverflowTabBar({ items, layout = 'stretch', display = 'standard', size = 'md', edge = 'top', selection, truncation, onSelect, onRemove, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, testId }) {
+    const displayStackProps = {
+        display: display
+    };
+    const displayNonStackProps = {
+        display: display,
+        size: size
+    };
+    const displayProps = display === 'stacked' ? displayStackProps : displayNonStackProps;
+    const rootRef = hooks.useRef(null);
+    const tabBarRef = preact.createRef();
+    const [isDropDownOpen, setIsDropDownOpen] = hooks.useState(false);
+    const isOutsideMouseDown = hooks.useRef(false);
+    const handleClose = (e) => {
+        if (tabBarRef.current && ['itemAction', 'dismissed'].includes(e.reason)) {
+            tabBarRef?.current?.focus();
+        }
+        if (e.reason === 'outsideMousedown') {
+            isOutsideMouseDown.current = true;
+        }
+        setIsDropDownOpen(false);
+    };
+    const handleSelect = hooks.useCallback((e) => {
+        if (e.value === 'more') {
+            //If overflow item is clicked after dropdown is open, the reason is outsideMouseDown and it needs to be closed
+            if (isOutsideMouseDown.current) {
+                setIsDropDownOpen(false);
+            }
+            else {
+                setIsDropDownOpen(true);
+            }
+        }
+        else {
+            onSelect?.(e);
+        }
+        isOutsideMouseDown.current = false;
+    }, [onSelect]);
+    const overflowItemKey = 'more';
+    const keysArray = hooks.useMemo(() => items.map((item) => item.itemKey), [items]);
+    const { visibleItemKeys, overflowItemKeys, maxWidths } = useDetectHorizontalOverflow.useDetectHorizontalOverflow({
+        rootRef: tabBarRef,
+        keysArray,
+        isTruncationDisabled: !(truncation && truncation === 'progressive')
+    });
+    const overflowTabBarClass = classNames.classNames([UNSAFE_OverflowTabBar_themes_OverflowTabBarStyles_css.styles.overflowTabBarBase]);
+    return (jsxRuntime.jsx("div", { ref: rootRef, class: overflowTabBarClass, children: jsxRuntime.jsxs(TabBar.TabBar, { ref: tabBarRef, selection: selection, onSelect: handleSelect, ...displayProps, layout: layout, edge: edge, onRemove: onRemove, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, testId: testId, children: [visibleItemKeys != null &&
+                    visibleItemKeys.length > 0 &&
+                    items
+                        .filter((item) => visibleItemKeys?.includes(item.itemKey))
+                        .map((item) => item.isRemovable ? (jsxRuntime.jsx(RemovableTabBarItem.RemovableTabBarItem, { itemKey: item.itemKey, label: item.label, icon: item.icon, badge: item.badge, metadata: item.metadata, severity: item.severity, "aria-controls": item.tabPanelId, labelMaxWidth: maxWidths?.get(item.itemKey) })) : (jsxRuntime.jsx(TabBarItem.TabBarItem, { itemKey: item.itemKey, label: item.label, icon: item.icon, badge: item.badge, metadata: item.metadata, severity: item.severity, "aria-controls": item.tabPanelId, labelMaxWidth: maxWidths?.get(item.itemKey) }))), overflowItemKeys != null && overflowItemKeys.length > 0 && (jsxRuntime.jsx(OverflowTabBarItem.OverflowTabBarItem, { isOpen: isDropDownOpen, onClose: handleClose, overflowItemKey: overflowItemKey, overflowItems: items.filter((item) => overflowItemKeys?.includes(item.itemKey)) }))] }) }));
+}
+
+exports.OverflowTabBar = OverflowTabBar;
+//# sourceMappingURL=OverflowTabBar-3310457e.js.map

package/cjs/OverflowTabBar-3310457e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowTabBar-3310457e.js","sources":["../../src/UNSAFE_OverflowTabBar/OverflowTabBar.tsx"],"sourcesContent":["import { ComponentProps, createRef } from 'preact';\nimport { useCallback, useMemo, useRef, useState } from 'preact/hooks';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { OverflowTabBarItem, RemovableTabBarItem, TabBar, TabBarItem } from '../UNSAFE_TabBar';\nimport { CloseDetail, Item } from '../UNSAFE_TabBarCommon';\nimport { styles } from './themes/OverflowTabBarStyles.css';\nimport { useDetectHorizontalOverflow } from '../hooks/PRIVATE_useDetectHorizontalOverflow';\n\ntype OverflowTabBarProps<K extends string | number> = {\n  /**\n   * An array of data to render individual tabs\n   */\n  items: Item<K>[];\n  /**\n   * The truncation configuration for tab labels.\n   * 'progressive' will restrict the width of each tab label to allow all tabs to fit if enough space is not available to display all of the tabs.\n   * Labels that are truncated are displayed with ellipses. However the width of each tab label will not be truncated below a specific threshold.\n   * 'none' tabs always take up the space needed by the labels even if enough space is not available to display all of the tabs.\n   */\n  truncation?: 'none' | 'progressive';\n} & Omit<ComponentProps<typeof TabBar>, 'children' | 'aria-describedby' | 'ref'>;\n\n/**\n * OverflowTabBar handles the rendering of overflowing tab items.\n */\nexport function OverflowTabBar<K extends string | number>({\n  items,\n  layout = 'stretch',\n  display = 'standard',\n  size = 'md',\n  edge = 'top',\n  selection,\n  truncation,\n  onSelect,\n  onRemove,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  testId\n}: OverflowTabBarProps<K> & TestIdProps) {\n  const displayStackProps = {\n    display: display\n  };\n  const displayNonStackProps = {\n    display: display,\n    size: size\n  };\n\n  const displayProps = display === 'stacked' ? displayStackProps : displayNonStackProps;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const tabBarRef = createRef<HTMLDivElement>();\n\n  const [isDropDownOpen, setIsDropDownOpen] = useState<boolean>(false);\n\n  const isOutsideMouseDown = useRef<boolean>(false);\n\n  const handleClose = (e: CloseDetail) => {\n    if (tabBarRef.current && ['itemAction', 'dismissed'].includes(e.reason)) {\n      tabBarRef?.current?.focus();\n    }\n    if (e.reason === 'outsideMousedown') {\n      isOutsideMouseDown.current = true;\n    }\n    setIsDropDownOpen(false);\n  };\n\n  const handleSelect = useCallback<Required<ComponentProps<typeof TabBar>>['onSelect']>(\n    (e: { value: string | number }) => {\n      if (e.value === 'more') {\n        //If overflow item is clicked after dropdown is open, the reason is outsideMouseDown and it needs to be closed\n        if (isOutsideMouseDown.current) {\n          setIsDropDownOpen(false);\n        } else {\n          setIsDropDownOpen(true);\n        }\n      } else {\n        onSelect?.(e);\n      }\n      isOutsideMouseDown.current = false;\n    },\n    [onSelect]\n  );\n\n  const overflowItemKey = 'more' as K;\n\n  const keysArray = useMemo(() => items.map((item) => item.itemKey) as K[], [items]);\n\n  const { visibleItemKeys, overflowItemKeys, maxWidths } = useDetectHorizontalOverflow({\n    rootRef: tabBarRef,\n    keysArray,\n    isTruncationDisabled: !(truncation && truncation === 'progressive')\n  });\n\n  const overflowTabBarClass = classNames([styles.overflowTabBarBase]);\n\n  return (\n    <div ref={rootRef} class={overflowTabBarClass}>\n      <TabBar\n        ref={tabBarRef}\n        selection={selection}\n        onSelect={handleSelect}\n        {...displayProps}\n        layout={layout}\n        edge={edge}\n        onRemove={onRemove}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        testId={testId}>\n        {visibleItemKeys != null &&\n          visibleItemKeys.length > 0 &&\n          items\n            .filter((item) => visibleItemKeys?.includes(item.itemKey))\n            .map((item: Item<K>) =>\n              item.isRemovable ? (\n                <RemovableTabBarItem\n                  itemKey={item.itemKey}\n                  label={item.label}\n                  icon={item.icon}\n                  badge={item.badge}\n                  metadata={item.metadata}\n                  severity={item.severity}\n                  aria-controls={item.tabPanelId}\n                  labelMaxWidth={maxWidths?.get(item.itemKey)}\n                />\n              ) : (\n                <TabBarItem\n                  itemKey={item.itemKey}\n                  label={item.label}\n                  icon={item.icon}\n                  badge={item.badge}\n                  metadata={item.metadata}\n                  severity={item.severity}\n                  aria-controls={item.tabPanelId}\n                  labelMaxWidth={maxWidths?.get(item.itemKey)}\n                />\n              )\n            )}\n        {overflowItemKeys != null && overflowItemKeys.length > 0 && (\n          <OverflowTabBarItem\n            isOpen={isDropDownOpen}\n            onClose={handleClose}\n            overflowItemKey={overflowItemKey}\n            overflowItems={items.filter((item) => overflowItemKeys?.includes(item.itemKey))}\n          />\n        )}\n      </TabBar>\n    </div>\n  );\n}\n"],"names":["useRef","createRef","useState","useCallback","useMemo","useDetectHorizontalOverflow","classNames","styles","_jsx","_jsxs","TabBar","RemovableTabBarItem","TabBarItem","OverflowTabBarItem"],"mappings":";;;;;;;;;;;;;;AAuBA;;AAEG;SACa,cAAc,CAA4B,EACxD,KAAK,EACL,MAAM,GAAG,SAAS,EAClB,OAAO,GAAG,UAAU,EACpB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,KAAK,EACZ,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,MAAM,EAC+B,EAAA;AACrC,IAAA,MAAM,iBAAiB,GAAG;AACxB,QAAA,OAAO,EAAE,OAAO;KACjB,CAAC;AACF,IAAA,MAAM,oBAAoB,GAAG;AAC3B,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,IAAI,EAAE,IAAI;KACX,CAAC;AAEF,IAAA,MAAM,YAAY,GAAG,OAAO,KAAK,SAAS,GAAG,iBAAiB,GAAG,oBAAoB,CAAC;AACtF,IAAA,MAAM,OAAO,GAAGA,YAAM,CAAiB,IAAI,CAAC,CAAC;AAC7C,IAAA,MAAM,SAAS,GAAGC,gBAAS,EAAkB,CAAC;IAE9C,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGC,cAAQ,CAAU,KAAK,CAAC,CAAC;AAErE,IAAA,MAAM,kBAAkB,GAAGF,YAAM,CAAU,KAAK,CAAC,CAAC;AAElD,IAAA,MAAM,WAAW,GAAG,CAAC,CAAc,KAAI;AACrC,QAAA,IAAI,SAAS,CAAC,OAAO,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;AACvE,YAAA,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;SAC7B;AACD,QAAA,IAAI,CAAC,CAAC,MAAM,KAAK,kBAAkB,EAAE;AACnC,YAAA,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;SACnC;QACD,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAC3B,KAAC,CAAC;AAEF,IAAA,MAAM,YAAY,GAAGG,iBAAW,CAC9B,CAAC,CAA6B,KAAI;AAChC,QAAA,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM,EAAE;;AAEtB,YAAA,IAAI,kBAAkB,CAAC,OAAO,EAAE;gBAC9B,iBAAiB,CAAC,KAAK,CAAC,CAAC;aAC1B;iBAAM;gBACL,iBAAiB,CAAC,IAAI,CAAC,CAAC;aACzB;SACF;aAAM;AACL,YAAA,QAAQ,GAAG,CAAC,CAAC,CAAC;SACf;AACD,QAAA,kBAAkB,CAAC,OAAO,GAAG,KAAK,CAAC;AACrC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,eAAe,GAAG,MAAW,CAAC;IAEpC,MAAM,SAAS,GAAGC,aAAO,CAAC,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,CAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEnF,MAAM,EAAE,eAAe,EAAE,gBAAgB,EAAE,SAAS,EAAE,GAAGC,uDAA2B,CAAC;AACnF,QAAA,OAAO,EAAE,SAAS;QAClB,SAAS;QACT,oBAAoB,EAAE,EAAE,UAAU,IAAI,UAAU,KAAK,aAAa,CAAC;AACpE,KAAA,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAGC,qBAAU,CAAC,CAACC,4DAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEpE,QACEC,wBAAK,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAC3C,QAAA,EAAAC,eAAA,CAACC,aAAM,EACL,EAAA,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,YAAY,KAClB,YAAY,EAChB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EACN,YAAA,EAAA,SAAS,EACJ,iBAAA,EAAA,cAAc,EAC/B,MAAM,EAAE,MAAM,EAAA,QAAA,EAAA,CACb,eAAe,IAAI,IAAI;oBACtB,eAAe,CAAC,MAAM,GAAG,CAAC;oBAC1B,KAAK;AACF,yBAAA,MAAM,CAAC,CAAC,IAAI,KAAK,eAAe,EAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AACzD,yBAAA,GAAG,CAAC,CAAC,IAAa,KACjB,IAAI,CAAC,WAAW,IACdF,cAAC,CAAAG,uCAAmB,IAClB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,eAAA,EACR,IAAI,CAAC,UAAU,EAC9B,aAAa,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAA,CAC3C,KAEFH,eAACI,qBAAU,EAAA,EACT,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,UAAU,EAC9B,aAAa,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAC3C,CAAA,CACH,CACF,EACJ,gBAAgB,IAAI,IAAI,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,KACtDJ,cAAA,CAACK,qCAAkB,EACjB,EAAA,MAAM,EAAE,cAAc,EACtB,OAAO,EAAE,WAAW,EACpB,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,gBAAgB,EAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,EAAA,CAC/E,CACH,CACM,EAAA,CAAA,EAAA,CACL,EACN;AACJ;;;;"}

package/cjs/OverflowTabBarItem-ff9d5b73.js

@@ -0,0 +1,88 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var hooks = require('preact/hooks');
+var useTranslationBundle = require('./useTranslationBundle-6b0281a9.js');
+var clientHints = require('./clientHints-a0f8f4d2.js');
+var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
+var flexitem = require('./flexitem-fee13e26.js');
+var classNames = require('./classNames-c14c6ef3.js');
+var Icon = require('./Icon-c024b93c.js');
+var useTabBarContext = require('./useTabBarContext-2a6a796c.js');
+var Dropdown = require('./Dropdown-00e73e4d.js');
+var Sheet = require('./Sheet-73cb51b2.js');
+var TabBarItem = require('./TabBarItem-00fcf601.js');
+var UNSAFE_TabBarCommon_themes_OverflowTabBarItemStyles_css = require('./UNSAFE_TabBarCommon/themes/OverflowTabBarItemStyles.css.js');
+var NavigationListItem = require('./NavigationListItem-4c4e804d.js');
+var RemovableNavigationListItem = require('./RemovableNavigationListItem-1505f520.js');
+
+const SvgOverflowH = (props) => (jsxRuntime.jsx(Icon.Icon, { viewBox: "0 0 24 24", ...props, children: jsxRuntime.jsx("g", { fill: "none", children: jsxRuntime.jsx("path", { d: "M6 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm8 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm8 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0z", fill: "currentcolor" }) }) }));
+
+/**
+ * An OverflowTabBarItem renders TabBarItems in a device appropriate popup. OverflowTabBarItem is used internally in an OverflowTabBar.
+ */
+function OverflowTabBarItem({ overflowItemKey, icon, badge, overflowItems, isOpen, onClose }) {
+    const { selection, showFocusRing, isEdgeBottom, onSelect, onRemove, layout } = useTabBarContext.useTabBarContext();
+    const isPointerSelection = hooks.useRef(false);
+    const overflowTabBarItemRef = hooks.useRef(null);
+    const navigationListRef = preact.createRef();
+    const handleSelectionChange = hooks.useCallback((detail) => {
+        if (detail.reason === 'pointer') {
+            isPointerSelection.current = true;
+        }
+        onSelect?.({ value: detail.value });
+        onClose?.({ reason: 'itemAction' });
+    }, [onSelect, onClose]);
+    const handleDropdownClose = hooks.useCallback((e) => {
+        onClose?.({ reason: e.reason });
+    }, [onClose]);
+    const handleSheetClose = hooks.useCallback(() => {
+        onClose?.({ reason: 'dismissed' });
+    }, [onClose]);
+    //When NavigationList steals focus the app resets it. Not always would it be reset to
+    //parent of OverflowTabBarItem. Though currentKey would be correct, but focusRing would would not be visible
+    //Hence we check for isPointerSelection.current
+    const focusRingRequirement = showFocusRing && !isPointerSelection.current && !getIsMobile();
+    const overflowContainsKey = (searchKey) => {
+        return overflowItems?.find((item) => item.itemKey === searchKey) != null;
+    };
+    const currentPanelId = overflowItems?.find((item) => item.itemKey === selection)?.tabPanelId;
+    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const isSelected = selection !== undefined && overflowContainsKey(selection);
+    //instead of specifying flex: '1 0 auto' in cssProps var
+    const styleInterpolations = mergeInterpolations.mergeInterpolations([
+        ...Object.values(flexitem.flexitemInterpolations)
+    ]);
+    const flexDimensions = styleInterpolations({
+        flex: layout === 'stretch' ? '1 0 auto' : '0 0 auto'
+    });
+    const navContainerClasses = classNames.classNames([UNSAFE_TabBarCommon_themes_OverflowTabBarItemStyles_css.styles.navContainerBase]);
+    const navContainerRef = hooks.useRef(null);
+    const handleKeyDown = hooks.useCallback((event) => {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            navigationListRef.current?.focus();
+        }
+    }, [navigationListRef]);
+    const getNavigationList = hooks.useCallback(() => {
+        return (jsxRuntime.jsx("div", { onKeyDown: handleKeyDown, tabIndex: 0, ref: navContainerRef, class: navContainerClasses, children: jsxRuntime.jsx(NavigationListItem.NavigationList, { ref: navigationListRef, selection: selection, onSelectionChange: handleSelectionChange, onRemove: onRemove, children: overflowItems?.map((item) => item.isRemovable ? (jsxRuntime.jsx(RemovableNavigationListItem.RemovableNavigationListItem, { itemKey: item.itemKey, label: item.label, badge: item.badge, metadata: item.metadata, severity: item.severity })) : (jsxRuntime.jsx(NavigationListItem.NavigationListItem, { itemKey: item.itemKey, label: item.label, badge: item.badge, metadata: item.metadata, severity: item.severity }))) }) }));
+    }, [
+        handleKeyDown,
+        navContainerClasses,
+        navigationListRef,
+        selection,
+        handleSelectionChange,
+        onRemove,
+        overflowItems
+    ]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [overflowItems && overflowItems.length > 0 && (jsxRuntime.jsx("div", { ref: overflowTabBarItemRef, style: flexDimensions, children: jsxRuntime.jsx(TabBarItem.BaseTabBarItem, { "aria-controls": currentPanelId, itemKey: overflowItemKey, label: translations.overflowItemLabel(), icon: icon ? icon : jsxRuntime.jsx(SvgOverflowH, {}), badge: badge, showFocusRingOverride: focusRingRequirement, selectionOverride: isSelected, displayOverride: 'icons', "aria-haspopup": true }) })), getIsMobile() ? (jsxRuntime.jsx(Sheet.Sheet, { isOpen: isOpen, onClose: handleSheetClose, children: getNavigationList() })) : (jsxRuntime.jsx(Dropdown.Dropdown, { initialFocus: "firstFocusable", isOpen: isOpen, onClose: handleDropdownClose, placement: isEdgeBottom ? 'top-end' : 'bottom-end', anchorRef: overflowTabBarItemRef, children: getNavigationList() }))] }));
+}
+const getIsMobile = () => {
+    const { deviceType } = clientHints.getClientHints();
+    return deviceType === 'phone';
+};
+
+exports.OverflowTabBarItem = OverflowTabBarItem;
+//# sourceMappingURL=OverflowTabBarItem-ff9d5b73.js.map

package/cjs/OverflowTabBarItem-ff9d5b73.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowTabBarItem-ff9d5b73.js","sources":["../../src/UNSAFE_RedwoodIcons/OverflowH/OverflowH.tsx","../../src/UNSAFE_TabBarCommon/OverflowTabBarItem.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates. All rights reserved.\n * https://www.oracle.com/contracts/docs/cloud_csa_online_v062223_us_eng.pdf?download=false&er=221886\n * @ignore\n */\n// DO NOT MODIFY THIS FILE MANUALLY!\n// This file is automatically generated based on the corresponding SVG image in\n// the packages/oraclejet-preact/resources/icons folder.\nimport { ComponentProps } from 'preact';\nimport { Icon } from '../../UNSAFE_Icon';\ntype Props = Omit<ComponentProps<typeof Icon>, 'viewBox' | 'children'>;\nconst SvgOverflowH = (props: Props) => (\n  <Icon viewBox=\"0 0 24 24\" {...props}>\n    <g fill=\"none\">\n      <path\n        d=\"M6 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm8 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm8 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0z\"\n        fill=\"currentcolor\"\n      />\n    </g>\n  </Icon>\n);\nexport { SvgOverflowH as OverflowH };\n","import { ComponentChild, ComponentProps, createRef } from 'preact';\nimport { useCallback, useRef } from 'preact/hooks';\nimport type { BundleType } from '../resources/nls/bundle';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { flexitemInterpolations } from '../utils/UNSAFE_interpolations/flexitem';\nimport type { FlexitemProps } from '../utils/UNSAFE_interpolations/flexitem';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport {\n  NavigationListItem,\n  NavigationList,\n  RemovableNavigationListItem,\n  FocusableHandle\n} from '../UNSAFE_NavigationList';\nimport { OverflowH } from '../UNSAFE_RedwoodIcons/OverflowH';\nimport { useTabBarContext } from './useTabBarContext';\nimport { Dropdown } from '../UNSAFE_Dropdown';\nimport { Sheet } from '../UNSAFE_Sheet';\nimport { BaseTabBarItem } from './BaseTabBarItem';\nimport { styles } from './themes/OverflowTabBarItemStyles.css';\nimport { TabBarItem } from './TabBarItem';\n\nexport type OverflowSelectionDetail<K> = {\n  value: K;\n};\n\nexport type CloseDetail = {\n  /**\n   * dismissed represents dismissing the DropDown\n   */\n  reason: 'dismissed' | 'itemAction' | 'outsideMousedown';\n};\n\nexport type Item<K extends string | number> = Omit<\n  ComponentProps<typeof TabBarItem<K>>,\n  'testId' | 'aria-controls'\n> & {\n  isRemovable?: boolean;\n  /**\n   * Accepts the tabpanel element's ID associated with the tab item\n   **/\n  tabPanelId?: string;\n};\n\nexport type OverflowTabBarItemProps<K extends string | number> = {\n  /**\n   * Key of the TabBarItem\n   */\n  overflowItemKey: K;\n  /**\n   * Whether to open the popup\n   */\n  isOpen: boolean;\n  /**\n   * Property that triggers a callback when DropDown is supposed to be closed.\n   */\n  onClose?: (detail: CloseDetail) => void;\n  /**\n   * The icon of the OverflowTabBarItem\n   */\n  icon?: ComponentChild;\n  /**\n   * The content to be rendered inside the Badge component.\n   */\n  badge?: string;\n  /**\n   * An array of data used by NavigationList to render individual overflow items.\n   */\n  overflowItems?: Item<K>[];\n};\n\n/**\n * An OverflowTabBarItem renders TabBarItems in a device appropriate popup. OverflowTabBarItem is used internally in an OverflowTabBar.\n */\n\nexport function OverflowTabBarItem<K extends string | number>({\n  overflowItemKey,\n  icon,\n  badge,\n  overflowItems,\n  isOpen,\n  onClose\n}: OverflowTabBarItemProps<K>) {\n  const { selection, showFocusRing, isEdgeBottom, onSelect, onRemove, layout } = useTabBarContext();\n\n  const isPointerSelection = useRef<boolean>(false);\n\n  const overflowTabBarItemRef = useRef<HTMLDivElement>(null);\n  const navigationListRef = createRef<FocusableHandle>();\n\n  const handleSelectionChange = useCallback<\n    Required<ComponentProps<typeof NavigationList>>['onSelectionChange']\n  >(\n    (detail: { value: string | number; reason?: 'pointer' | 'keyboard' }) => {\n      if (detail.reason === 'pointer') {\n        isPointerSelection.current = true;\n      }\n      onSelect?.({ value: detail.value });\n      onClose?.({ reason: 'itemAction' });\n    },\n    [onSelect, onClose]\n  );\n\n  const handleDropdownClose = useCallback(\n    (e: CloseDetail) => {\n      onClose?.({ reason: e.reason });\n    },\n    [onClose]\n  );\n\n  const handleSheetClose = useCallback(() => {\n    onClose?.({ reason: 'dismissed' });\n  }, [onClose]);\n\n  //When NavigationList steals focus the app resets it. Not always would it be reset to\n  //parent of OverflowTabBarItem. Though currentKey would be correct, but focusRing would would not be visible\n  //Hence we check for isPointerSelection.current\n\n  const focusRingRequirement = showFocusRing && !isPointerSelection.current && !getIsMobile();\n\n  const overflowContainsKey = (searchKey: K) => {\n    return overflowItems?.find((item) => item.itemKey === searchKey) != null;\n  };\n\n  const currentPanelId = overflowItems?.find((item) => item.itemKey === selection)?.tabPanelId;\n\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n  const isSelected = selection !== undefined && overflowContainsKey(selection as K);\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  const navContainerClasses = classNames([styles.navContainerBase]);\n\n  const navContainerRef = useRef<HTMLDivElement>(null);\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        navigationListRef.current?.focus();\n      }\n    },\n    [navigationListRef]\n  );\n  const getNavigationList = useCallback(() => {\n    return (\n      <div onKeyDown={handleKeyDown} tabIndex={0} ref={navContainerRef} class={navContainerClasses}>\n        <NavigationList\n          ref={navigationListRef}\n          selection={selection}\n          onSelectionChange={handleSelectionChange}\n          onRemove={onRemove}>\n          {overflowItems?.map((item) =>\n            item.isRemovable ? (\n              <RemovableNavigationListItem\n                itemKey={item.itemKey}\n                label={item.label}\n                badge={item.badge}\n                metadata={item.metadata}\n                severity={item.severity}\n              />\n            ) : (\n              <NavigationListItem\n                itemKey={item.itemKey}\n                label={item.label}\n                badge={item.badge}\n                metadata={item.metadata}\n                severity={item.severity}\n              />\n            )\n          )}\n        </NavigationList>\n      </div>\n    );\n  }, [\n    handleKeyDown,\n    navContainerClasses,\n    navigationListRef,\n    selection,\n    handleSelectionChange,\n    onRemove,\n    overflowItems\n  ]);\n\n  return (\n    <>\n      {overflowItems && overflowItems.length > 0 && (\n        <div ref={overflowTabBarItemRef} style={flexDimensions}>\n          <BaseTabBarItem\n            aria-controls={currentPanelId}\n            itemKey={overflowItemKey}\n            label={translations.overflowItemLabel()}\n            icon={icon ? icon : <OverflowH />}\n            badge={badge}\n            showFocusRingOverride={focusRingRequirement}\n            selectionOverride={isSelected}\n            displayOverride={'icons'}\n            aria-haspopup={true}\n          />\n        </div>\n      )}\n      {getIsMobile() ? (\n        <Sheet isOpen={isOpen} onClose={handleSheetClose}>\n          {getNavigationList()}\n        </Sheet>\n      ) : (\n        <Dropdown\n          initialFocus=\"firstFocusable\"\n          isOpen={isOpen}\n          onClose={handleDropdownClose}\n          placement={isEdgeBottom ? 'top-end' : 'bottom-end'}\n          anchorRef={overflowTabBarItemRef}>\n          {getNavigationList()}\n        </Dropdown>\n      )}\n    </>\n  );\n}\n\nconst getIsMobile = () => {\n  const { deviceType } = getClientHints();\n  return deviceType === 'phone';\n};\n"],"names":["_jsx","Icon","useTabBarContext","useRef","createRef","useCallback","useTranslationBundle","mergeInterpolations","flexitemInterpolations","classNames","styles","NavigationList","RemovableNavigationListItem","NavigationListItem","_jsxs","_Fragment","BaseTabBarItem","OverflowH","Sheet","Dropdown","getClientHints"],"mappings":"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"}

package/cjs/PRIVATE_BaseCardView.js

@@ -12,14 +12,14 @@ require('./mergeProps-e3da7237.js');
 require('./keys-25710458.js');
 require('./collectionUtils-d9fdec19.js');
 require('./clientHints-a0f8f4d2.js');
-require('./useCurrentKey-88495da2.js');
-require('./useUser-a4bfc560.js');
-require('./LayerHost-a8c7f182.js');
+require('./useCurrentKey-d8d41864.js');
+require('./useUser-8aaad5a7.js');
+require('./LayerHost-7182bfaf.js');
 require('./Common/themes/redwood/theme.js');
 require('./Common/themes/themeContract.css.js');
 require('./useCollectionFocusRing-5af82f66.js');
 require('./useTabbableModeSet-a57413a0.js');
-require('./useSelection-228ef3ce.js');
+require('./useSelection-0dbc2f40.js');
 require('./textSelectionUtils-432ab66b.js');
 
 
@@ -35,8 +35,8 @@ require('./size-37b7af59.js');
 require('./utils-7c0b6a81.js');
 require('./colorUtils-fe6f2fbf.js');
 require('./_curry1-e8f0d7ea.js');
-require('./useTooltip-81b7b753.js');
-require('./useTooltipControlled-33832163.js');
+require('./useTooltip-ea036f82.js');
+require('./useTooltipControlled-61581889.js');
 require('./useId-6c0eeb27.js');
 require('./useHover-c099039f.js');
 require('./useToggle-3ebba7d8.js');
@@ -45,10 +45,10 @@ require('./useTouch-4dec8729.js');
 require('./useAnimation-fb11e4cc.js');
 require('./useComponentTheme-082fc8e4.js');
 require('./logger-2b636482.js');
-require('./useTestId-5e6af45d.js');
-require('./useThemeInterpolations-28ca9a13.js');
-require('./useColorScheme-ce2a88b1.js');
-require('./useScale-a681a5cb.js');
+require('./useTestId-e267a39d.js');
+require('./useThemeInterpolations-316c1636.js');
+require('./useColorScheme-e6bef5a4.js');
+require('./useScale-a47864b4.js');
 require('./theme-dfd6a9fe.js');
 require('./Theme-f06687af.js');
 require('./mergeInterpolations-6727b536.js');
@@ -57,7 +57,7 @@ require('./mergeDeepWithKey-210b024d.js');
 require('./_curry3-18677bca.js');
 require('./_curry2-c15d89cd.js');
 require('./_isObject-28636267.js');
-require('./useDensity-1f8cc921.js');
+require('./useDensity-38283c57.js');
 require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentTheme.js');
 require('./hooks/UNSAFE_useTooltip/themes/TooltipContentStyles.css.js');
 
@@ -65,16 +65,16 @@ require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.css.js
 
 require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
 
-require('./tooltipUtils-669c2ae0.js');
-require('./EnvironmentProvider-75eb79f3.js');
-require('./LayerManager-2d0b83ac.js');
-require('./Floating-56621d20.js');
-require('./useFloating-480d365a.js');
+require('./tooltipUtils-2228b0f7.js');
+require('./EnvironmentProvider-bfd5febc.js');
+require('./LayerManager-db087520.js');
+require('./Floating-3a80c067.js');
+require('./useFloating-c9e127d3.js');
 require('./positionUtils-a780137e.js');
 require('./refUtils-915b985d.js');
-require('./useOutsideClick-03a6c38c.js');
+require('./useOutsideClick-ad999b14.js');
 require('./arrayUtils-7d8dcfc3.js');
-require('./Layer-0053053a.js');
+require('./Layer-49394ca6.js');
 require('./UNSAFE_Layer/themes/LayerStyles.css.js');
 
 require('./useModal-0739a528.js');
@@ -125,18 +125,18 @@ require('./FocusTrap-bfe96498.js');
 require('./FocusTracker-3d885919.js');
 require('./PRIVATE_FocusTracker/themes/FocusTrackerStyles.css.js');
 
-require('./useReorderableItem-0dbb8843.js');
-require('./useTranslationBundle-51f4c22c.js');
+require('./useReorderableItem-5fc4d599.js');
+require('./useTranslationBundle-6b0281a9.js');
 require('./dndUtils-21d97036.js');
 require('./hooks/PRIVATE_useReorderable/themes/ReorderableItemStyles.css.js');
 require('./useReorderableContext-92514102.js');
-require('./Grid-a7316edd.js');
+require('./Grid-b8fadf4a.js');
 require('./grid-7c06084e.js');
 require('./boxalignment-5fe0cc94.js');
 
 require('./vanilla-extract-sprinkles-createRuntimeSprinkles.esm-d68f3e0f.js');
 
-require('./Flex-e7a85bef.js');
+require('./Flex-ce16a2fa.js');
 require('./dimensions-10159104.js');
 require('./flexbox-2cae9a01.js');