@oracle/oraclejet-preact 17.1.0 → 17.1.1

package/es/MonthView-7521b583.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthView-7521b583.js","sources":["../../src/PRIVATE_MonthView/useDayCell.ts","../../src/PRIVATE_MonthView/DayCell.tsx","../../src/PRIVATE_MonthView/WeekNumberCell.tsx","../../src/PRIVATE_MonthView/MonthView.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport type { CalendarDateRequired } from '#utils/UNSAFE_calendarDateUtils';\nimport { useUser } from '#hooks/UNSAFE_useUser';\nimport { formatFullCalendarDate, toJSDate } from '#utils/UNSAFE_calendarDateUtils';\nimport { ComponentProps, useCallback } from 'preact/compat';\n\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '#resources/nls/bundle';\nimport { useFocusableCell } from '#UNSAFE_DatePicker/useFocusableCell';\nimport { useCellNavigation } from '#UNSAFE_DatePicker/useCellNavigation';\nimport { StyledDatePickerButton } from '#PRIVATE_StyledDatePickerButton';\n\ntype NavigationDirections =\n  | 'previousDay'\n  | 'nextDay'\n  | 'previousWeek'\n  | 'nextWeek'\n  | 'previousMonth'\n  | 'nextMonth'\n  | 'previousYear'\n  | 'nextYear'\n  | 'firstDayOfMonth'\n  | 'lastDayOfMonth'\n  | 'today';\n\nexport type DayFormatOptions = {\n  state: 'enabled' | 'disabled' | 'restricted';\n};\n\n// These are the properties the useDayCell hook takes.\nexport type UseDayCellProps = {\n  /**\n   * Date of the day cell. This will be formatted as a full date and put in the aria-label.\n   */\n  date: CalendarDateRequired;\n  /**\n   * A function that receives a date and returns an object specifying how to format the provided date.\n   * This function is called for each date that is rendered and this can be used to control how individual\n   * dates are rendered - disabled, restricted, or enabled.\n   * @param date The date to format\n   * @returns The format options\n   */\n  dayFormatter?: (date: CalendarDateRequired) => DayFormatOptions;\n  /**\n   * Whether the day cell is in an adjacent month, not the current month.\n   */\n  isAdjacentMonth: boolean;\n  /**\n   * Whether the day cell is disabled, like if it is out of the min/max range.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the day cell is focusable, meaning it will have tabIndex 0.\n   */\n  isFocusable: boolean;\n  /**\n   * Whether the day cell has focus.\n   */\n  isFocused: boolean;\n  /**\n   * Whether the day cell is hidden. For example, days outside of the current month are hidden by default.\n   */\n  isHidden: boolean;\n  /**\n   * Whether the day cell is readonly. It is not activeable.\n   */\n  isReadonly: boolean;\n  /**\n   * Whether the day cell looks selected.\n   */\n  isSelected: boolean;\n  /**\n   * Whether the day cell's date is today.\n   */\n  isToday: boolean;\n  /**\n   * A callback that will be invoked when the user selects the date by clicking on a day cell or selecting the enter or space key on a day cell.\n   * @param payload The payload containing the date represented by this cell.\n   */\n  onAction: (payload: { date: CalendarDateRequired }) => void;\n  /**\n   * A callback that will be invoked when the user navigates.\n   */\n  onNavigation: (detail: { direction: NavigationDirections; date: CalendarDateRequired }) => void;\n};\n\n/**\n * The useDayCell hook returns properties for an individual DayCell. The properties returned should be spread on the StyledDatePickerButton.\n * These include the event handlers for keydown and click.\n */\nexport const useDayCell = ({\n  date,\n  dayFormatter = defaultDayFormatter,\n  isAdjacentMonth,\n  isDisabled,\n  isFocusable,\n  isFocused,\n  isHidden,\n  isReadonly,\n  isSelected,\n  isToday,\n  onAction,\n  onNavigation\n}: UseDayCellProps) => {\n  const { locale } = useUser();\n\n  // apply day formatting\n  const { state } = dayFormatter(date);\n  const isDisabledFormat = state === 'disabled';\n  const isRestrictedFormat = state === 'restricted';\n\n  // Focus the day cell with isFocused true when the state updates.\n  const buttonProps = useFocusableCell({ isFocusable, isFocused });\n  // Override onAction to not call it if disabled, readonly or restricted\n  const handleAction: UseDayCellProps['onAction'] = useCallback(\n    (payload) => {\n      if (isDisabled || isReadonly || isDisabledFormat || isRestrictedFormat) return;\n      onAction(payload);\n    },\n    [isDisabled, isDisabledFormat, isReadonly, isRestrictedFormat, onAction]\n  );\n  const buttonEventHandlers = useCellNavigation({\n    navigationMap: {\n      ArrowLeft: { ltr: 'previousDay', rtl: 'nextDay' },\n      ArrowRight: { ltr: 'nextDay', rtl: 'previousDay' },\n      ArrowDown: 'nextWeek',\n      ArrowUp: 'previousWeek',\n      PageDown: 'nextMonth',\n      PageUp: 'previousMonth',\n      Home: 'firstDayOfMonth',\n      End: 'lastDayOfMonth',\n      ShiftPageDown: 'nextYear',\n      ShiftPageUp: 'previousYear',\n      CtrlAltT: 'today'\n    },\n    payload: { date },\n    onAction: handleAction,\n    onNavigation\n  });\n\n  // For accessibility, we want a full date.\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const today = translations.datePicker_today();\n  const selected = translations.datePicker_selected();\n  const restricted = translations.datePicker_restricted();\n\n  const formattedDate = formatFullCalendarDate(locale, date, 'day');\n  let ariaLabel = isToday ? `${today}, ${formattedDate}` : formattedDate;\n  ariaLabel = isRestrictedFormat ? `${ariaLabel}, ${restricted}` : ariaLabel;\n  ariaLabel = isSelected ? `${ariaLabel}, ${selected}` : ariaLabel;\n  const dayOfMonth = toJSDate(date.year, date.month, date.day).getDate().toString();\n\n  return {\n    buttonProps: {\n      'aria-label': ariaLabel,\n      ...((isHidden || isDisabled || isDisabledFormat || isRestrictedFormat) && {\n        'aria-disabled': true\n      }),\n      isActivable: !(isDisabled || isReadonly || isDisabledFormat || isRestrictedFormat),\n      isAdjacentMonth,\n      isDimmed: isDisabled || isDisabledFormat,\n      isHidden,\n      isHoverable: !(isDisabled || isReadonly || isDisabledFormat || isRestrictedFormat),\n      isReadonly,\n      isSelected,\n      isRestricted: isRestrictedFormat,\n      isToday,\n      label: dayOfMonth,\n      ...buttonProps,\n      ...buttonEventHandlers\n    } as ComponentProps<typeof StyledDatePickerButton>\n  };\n};\n\n/**\n * A default day formatter that always formats as enabled state.\n */\nconst defaultDayFormatter = () => ({ state: 'enabled' }) as DayFormatOptions;\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 */\nimport { StyledDatePickerButton } from '#PRIVATE_StyledDatePickerButton';\nimport { UseDayCellProps, useDayCell } from './useDayCell';\nimport { dayCellStyles } from './themes/DayCellStyles.css';\n\ntype PickedUseDayCellProps = Pick<\n  UseDayCellProps,\n  | 'date'\n  | 'dayFormatter'\n  | 'isAdjacentMonth'\n  | 'isDisabled'\n  | 'isFocusable'\n  | 'isFocused'\n  | 'isHidden'\n  | 'isReadonly'\n  | 'isSelected'\n  | 'isToday'\n  | 'onAction'\n  | 'onNavigation'\n>;\n\ntype DayCellProps = PickedUseDayCellProps;\n\n/**\n * The DayCell is the cell within the DatePicker's month view that contains the day in the month view.\n * This component will format the date for the aria-label.\n * The DayCell components uses the useDayCell hook to handle the user interactions with the day cell.\n */\nexport const DayCell = (props: DayCellProps) => {\n  const { buttonProps } = useDayCell(props);\n  // buttonProps, e.g., tabIndex, aria-label, onclick, onkeydown and visual states\n  return (\n    <div role=\"gridcell\" class={dayCellStyles}>\n      <StyledDatePickerButton {...buttonProps} />\n    </div>\n  );\n};\n","import { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '#resources/nls/bundle';\nimport { CalendarDateRequired, toJSDate } from '#utils/UNSAFE_calendarDateUtils';\nimport { weekNumberCellStyles, weekNumberStyles } from './themes/WeekNumberCellStyle.css'; \n\ntype Props = {\n  /**\n   * startDateOfWeek is the first date of the week row\n   */\n  startDateOfWeek: CalendarDateRequired;\n};\n\n/**\n * The ISO 8601 definition for week 01 is the week with the first Thursday of the Gregorian year (i.e. of January) in it.\n * https://en.wikipedia.org/wiki/ISO_week_date\n * @param date The first date of the week row to be used to calculate the week number\n * @returns the number of week in the year\n */\nconst calculateWeekNumber = (date: CalendarDateRequired) => {\n  const checkDate = toJSDate(date.year, date.month, date.day);\n  const dayNumber = checkDate.getUTCDay();\n\n  // For ISO week, we set the start of the week to Monday\n  if (dayNumber !== 1) {\n    checkDate.setUTCDate(checkDate.getUTCDate() + (dayNumber === 0 ? 1 : 2));\n  }\n\n  // Find Thursday (day value of 4) of this week\n  checkDate.setUTCDate(checkDate.getUTCDate() + 3);\n\n  // Create the start of the year date\n  const janFirst = toJSDate(checkDate.getUTCFullYear(), 1, 1);\n\n  return Math.floor(Math.round((checkDate.getTime() - janFirst.getTime()) / 86400000) / 7) + 1;\n};\n\n/**\n * The WeekNumberCell is the cell at the start of a week's row within the DatePicker's\n * month view that contains the week's number within the year. This displays when\n * the DatePicker's 'weekDisplay' prop is set to 'number'.\n * This component will format the week number for the aria-label.\n */\nconst WeekNumberCell = ({ startDateOfWeek }: Props) => {\n  const weekNumber = calculateWeekNumber(startDateOfWeek);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n  return (\n    <div\n      aria-label={translations.datePicker_weekNum({ NUM: String(weekNumber) })}\n      class={weekNumberCellStyles}\n      role=\"rowheader\">\n      <span class={weekNumberStyles}>{weekNumber}</span>\n    </div>\n  );\n};\n\nexport { WeekNumberCell };\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 */\nimport {\n  getWeeksInMonth,\n  getDatesInWeek,\n  getStartOfWeek,\n  getDaysOfWeekNames,\n  WeekInMonthIndex\n} from '#utils/PRIVATE_dayUtils';\nimport { ComponentProps } from 'preact/compat';\nimport {\n  CalendarDateRequired,\n  formatFullCalendarDate,\n  isDateOutOfRange\n} from '#utils/UNSAFE_calendarDateUtils';\nimport { DayCell } from './DayCell';\nimport { useUser } from '#hooks/UNSAFE_useUser';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { Grid } from '#UNSAFE_Grid';\nimport {\n  MonthViewStyles,\n  MonthViewVariantOptions\n} from '#PRIVATE_MonthView/themes/MonthViewStyles.css';\nimport { MonthViewRedwoodTheme } from '#PRIVATE_MonthView/themes/redwood/MonthViewTheme';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { monthViewScaleVars } from '#PRIVATE_MonthView/themes/MonthViewContract.css';\nimport { WeekNumberCell } from './WeekNumberCell';\n\ntype PickedDayCellProps = Pick<\n  ComponentProps<typeof DayCell>,\n  'dayFormatter' | 'onAction' | 'onNavigation'\n>;\n\ntype MonthViewProps = TestIdProps &\n  PickedDayCellProps & {\n    /**\n     * The daysOutsideMonth property affects the day cells that are outside of the current month.\n     * If set to 'hidden', then the days outside of the current month will be hidden.\n     * If set to 'selectable', then the days outside of the current month will be visible and selectable.\n     * This defaults to 'hidden'.\n     */\n    daysOutsideMonth?: 'hidden' | 'selectable';\n    /**\n     * The MonthView renders with the month of the focusableDate.\n     * The focusableDate is the only day in the MonthView that has tabIndex: 0 on it.\n     * The focusableDate doesn't have focus until the user tabs in to the Month View.\n     * The focusableDate is never undefined.\n     */\n    focusableDate: CalendarDateRequired;\n    /**\n     * If set to true, the focusableDate will be focused and you will see the focus ring. It will be\n     * false when no date has focus.\n     * @default false\n     */\n    isFocused?: boolean;\n    /**\n     * Specifies whether the component is readonly.\n     */\n    isReadonly?: boolean;\n    /**\n     * The maximum selectable date. The max must be greater than the min if they are both specified.\n     */\n    max?: CalendarDateRequired;\n    /**\n     * The minimum selectable date. The min must be less than the max if they are both specified.\n     */\n    min?: CalendarDateRequired;\n    /**\n     * The selected date of the MonthView, or undefined is there is no selected date. This\n     * is used to highlight the selected day cell if it is within the min/max range.\n     */\n    selectedDate?: CalendarDateRequired;\n    /**\n     * Today's date. This is used to highlight the Today day cell.\n     */\n    todaysDate: CalendarDateRequired;\n    /**\n     * Whether week of the year will be shown in the DatePicker. The default calculation follows the\n     * ISO 8601 definition: the first week of the year contains the first Thursday of the year.\n     * This means that some days from one year may be placed into weeks 'belonging' to another year.\n     */\n    weekDisplay?: 'none' | 'number';\n  };\n\n/**\n * A MonthView is a month interface that allows users to select a single date. The MonthView is the week day header\n * abbreviations and the days of the month. A MonthView is used inside of a DatePicker\n * along with the DatePickerHeader and the MonthGridView and YearGridView.\n */\nexport const MonthView = ({\n  dayFormatter,\n  daysOutsideMonth = 'hidden',\n  isReadonly = false,\n  max,\n  min,\n  onAction,\n  onNavigation,\n  selectedDate,\n  focusableDate,\n  isFocused = false,\n  testId,\n  todaysDate,\n  weekDisplay = 'none'\n}: MonthViewProps) => {\n  const { locale } = useUser();\n  const weeksInMonth = getWeeksInMonth(focusableDate.year, focusableDate.month, locale);\n  const { baseTheme, styles } = useComponentTheme<MonthViewVariantOptions, MonthViewStyles>(\n    MonthViewRedwoodTheme,\n    {}\n  );\n  const isWeekNumberDisplayed = weekDisplay === 'number';\n  const gridTemplateColumns = `repeat(${isWeekNumberDisplayed ? 8 : 7}, 1fr)`;\n\n  const renderMonthViewHeaderRow = () => {\n    const weekDays = getDaysOfWeekNames(locale, 'short');\n\n    return (\n      <Grid\n        role=\"row\"\n        aria-hidden=\"true\"\n        gridTemplateColumns={gridTemplateColumns}\n        gap={monthViewScaleVars.columnGap}>\n        {isWeekNumberDisplayed && <div role=\"presentation\" />}\n        {weekDays.map((day) => (\n          <div role=\"columnheader\" class={styles.dayOfTheWeek}>\n            <span>{day}</span>\n          </div>\n        ))}\n      </Grid>\n    );\n  };\n\n  const renderMonthView = () => {\n    const calendarGrid: JSX.Element[] = [];\n\n    for (let weekIndex = 0; weekIndex < weeksInMonth; weekIndex++) {\n      const startDateOfWeek = getStartOfWeek(focusableDate.year, focusableDate.month, 1, locale);\n\n      const weekDates = getDatesInWeek(\n        weekIndex as WeekInMonthIndex,\n        startDateOfWeek.year,\n        startDateOfWeek.month,\n        startDateOfWeek.day\n      );\n\n      const weekCells = weekDates.map((dayCellDate) => {\n        // This figures out the visual state of the DayCell.\n        const isDisabled = isDateOutOfRange(dayCellDate, min, max);\n\n        // Even if the selected date is out of range, the UX design shows it as selected.\n        const isSelected = selectedDate ? isSameDate(dayCellDate, selectedDate) : false;\n        const isToday = isSameDate(dayCellDate, todaysDate);\n        const isFocusable = isSameDate(dayCellDate, focusableDate);\n        const isAdjacentMonth = isOutOfMonth(dayCellDate, focusableDate);\n        const isHidden = isAdjacentMonth && daysOutsideMonth === 'hidden';\n\n        return (\n          <DayCell\n            key={`${dayCellDate.year}-${dayCellDate.month}-${dayCellDate.day}`}\n            date={dayCellDate}\n            dayFormatter={dayFormatter}\n            isAdjacentMonth={isAdjacentMonth}\n            isDisabled={isDisabled}\n            isFocusable={isFocusable}\n            isFocused={isFocusable && isFocused}\n            isHidden={isHidden}\n            isReadonly={isReadonly}\n            isSelected={isSelected}\n            isToday={isToday}\n            onAction={onAction}\n            onNavigation={onNavigation}></DayCell>\n        );\n      });\n\n      calendarGrid.push(\n        <Grid\n          key={weekIndex}\n          role=\"row\"\n          gridTemplateColumns={gridTemplateColumns}\n          gap={monthViewScaleVars.columnGap}>\n          {isWeekNumberDisplayed && <WeekNumberCell startDateOfWeek={weekDates[0]} />}\n          {weekCells}\n        </Grid>\n      );\n    }\n\n    return calendarGrid;\n  };\n\n  const monthViewAriaLabel = formatFullCalendarDate(locale, focusableDate, 'month');\n  return (\n    <div class={baseTheme}>\n      <Grid\n        gap={monthViewScaleVars.rowGap}\n        aria-label={monthViewAriaLabel}\n        role=\"grid\"\n        testId={testId}>\n        {renderMonthViewHeaderRow()}\n        {renderMonthView()}\n      </Grid>\n    </div>\n  );\n};\n\nfunction isSameDate(date1: CalendarDateRequired, date2: CalendarDateRequired) {\n  return date1.year === date2.year && date1.month === date2.month && date1.day === date2.day;\n}\n\nfunction isOutOfMonth(date1: CalendarDateRequired, currentMonthDate: CalendarDateRequired) {\n  return date1.month !== currentMonthDate.month;\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/es/NavigationList-d8f472fe.js

@@ -0,0 +1,146 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { useState, useCallback, useRef, useEffect } from 'preact/hooks';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { u as useId } from './useId-03dbfdf0.js';
+import { navigationListStyles } from './UNSAFE_NavigationList/themes/NavigationListStyles.css.js';
+import { c as getPrevNextKeyUsingRef, k as keyExtractor, d as getFirstVisibleKey, b as getKey, f as findElementByKey } from './collectionUtils-d72c7c40.js';
+import { u as useCollectionFocusRing } from './useCollectionFocusRing-d0c80397.js';
+import { u as useCurrentKey } from './useCurrentKey-76e7d7b1.js';
+import { forwardRef, useImperativeHandle } from 'preact/compat';
+import { u as useTestId } from './useTestId-3bc3958c.js';
+import { N as NavigationListContext } from './useNavigationListItem-31226722.js';
+
+/*TODO: JET-58534. Create a hook to share some logic between navlist and tabbar. Hook will be used inside this one. */
+function useNavigationList({ containerRef, selection, onRemove, onSelectionChange, children }) {
+    const ITEM_SELECTOR = '[role="tab"]';
+    const REMOVAL_ICON_SELECTOR = '[data-oj-navigationlist-item-remove-icon]';
+    const [currentKey, setCurrentKey] = useState(selection);
+    const onCurrentKeyChange = useCallback((detail) => {
+        setCurrentKey(detail.value);
+    }, []);
+    const { currentKeyProps } = useCurrentKey((element) => onRemove
+        ? extractOnlyItemKey(element, ITEM_SELECTOR, REMOVAL_ICON_SELECTOR)
+        : keyExtractor(element, ITEM_SELECTOR), false, getPrevNextKeyUsingRef(containerRef, currentKey, true, ITEM_SELECTOR), getPrevNextKeyUsingRef(containerRef, currentKey, false, ITEM_SELECTOR), undefined, undefined, currentKey, onCurrentKeyChange);
+    const [showFocusRing, focusRingProps] = useCollectionFocusRing(containerRef, [
+        'Home',
+        'End',
+        'ArrowUp',
+        'ArrowDown'
+    ]);
+    const onFocus = useCallback(() => {
+        if (containerRef.current && currentKey === undefined) {
+            const key = getFirstVisibleKey(containerRef.current, ITEM_SELECTOR);
+            if (key) {
+                setCurrentKey(key);
+            }
+        }
+    }, [currentKey, containerRef]);
+    const onFocusProps = { onFocus };
+    const prevNavItems = useRef();
+    useEffect(() => {
+        if (containerRef.current) {
+            const navListItemKeys = Array.from(containerRef.current.querySelectorAll(ITEM_SELECTOR), (elem) => getKey(elem));
+            if (currentKey != null && navListItemKeys.indexOf(currentKey) !== -1) {
+                const navListItem = findElementByKey(containerRef.current, currentKey, ITEM_SELECTOR);
+                if (navListItem.scrollIntoViewIfNeeded) {
+                    // for some browsers, we'll need the non-standard scrollIntoViewIfNeeded
+                    navListItem.scrollIntoViewIfNeeded();
+                }
+                else {
+                    navListItem.scrollIntoView({ block: 'nearest' });
+                }
+            }
+            else {
+                if (currentKey && navListItemKeys.indexOf(currentKey) === -1) {
+                    prevNavItems.current
+                        ? setCurrentKey(findNextCurrentKey(currentKey, navListItemKeys, prevNavItems.current))
+                        : setCurrentKey(navListItemKeys[0]);
+                }
+                prevNavItems.current = navListItemKeys;
+            }
+        }
+    }, [children, currentKey, containerRef]);
+    const onKeyDown = useCallback((event) => {
+        if ((event.key === 'Home' || event.key === 'End') && containerRef.current && currentKey) {
+            const navListItemKey = Array.from(containerRef.current.querySelectorAll(ITEM_SELECTOR), (elem) => getKey(elem));
+            onCurrentKeyChange?.({
+                value: navListItemKey[event.key === 'Home' ? 0 : navListItemKey.length - 1]
+            });
+        }
+        if (currentKey && event.key === 'Enter') {
+            onSelectionChange?.({
+                value: currentKey,
+                reason: 'keyboard'
+            });
+        }
+        if (currentKey && event.key === 'Delete') {
+            onRemove?.({ value: currentKey });
+        }
+    }, [currentKey, onSelectionChange, onRemove, onCurrentKeyChange, containerRef]);
+    return {
+        showFocusRing,
+        currentKey,
+        onCurrentKeyChange,
+        onKeyDown,
+        containerHandlers: mergeProps(focusRingProps, currentKeyProps, onFocusProps)
+    };
+}
+const extractOnlyItemKey = (element, itemSelector, itemEliminator) => {
+    const navigationListItem = element.closest(itemSelector);
+    const removeButton = element.closest(itemEliminator);
+    return navigationListItem?.contains(removeButton) ? null : keyExtractor(element, itemSelector);
+};
+const findNextCurrentKey = (currentKey, currNavs, prevNavs) => {
+    const index = prevNavs.indexOf(currentKey);
+    if (index > 0) {
+        const nextIndex = index === prevNavs.length - 1 ? index - 1 : index + 1;
+        const nextKey = prevNavs[nextIndex];
+        if (currNavs.indexOf(nextKey) !== -1) {
+            return nextKey;
+        }
+    }
+    // update current key to be the first one if we can't find a suitable next key
+    return currNavs[0];
+};
+
+const NavigationList = forwardRef(({ children, selection, onSelectionChange, onRemove, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelLedBy, testId }, ref) => {
+    const containerRef = useRef(null);
+    const { showFocusRing, currentKey, onCurrentKeyChange, containerHandlers, onKeyDown } = useNavigationList({
+        containerRef: containerRef,
+        selection,
+        onRemove,
+        onSelectionChange,
+        children
+    });
+    const eventProps = { onKeyDown };
+    const navigationListClass = classNames([navigationListStyles.uListStyle]);
+    const navigationListItemPrefix = useId() + '_';
+    const testIdProps = useTestId(testId);
+    //Allows to call focus on rootRef without having to expose it
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            if (containerRef.current) {
+                containerRef.current.focus();
+            }
+        },
+        blur: () => {
+            if (containerRef.current) {
+                containerRef.current.focus();
+            }
+        }
+    }));
+    return (jsx("ul", { "aria-label": ariaLabel, "aria-labelledby": ariaLabelLedBy, role: "tablist", ref: containerRef, "aria-orientation": 'vertical', tabIndex: 0, "aria-activedescendant": currentKey ? navigationListItemPrefix + currentKey : '', ...mergeProps(eventProps, containerHandlers), ...testIdProps, class: navigationListClass, children: jsx(NavigationListContext.Provider, { value: {
+                selection,
+                onSelectionChange,
+                onCurrentKeyChange,
+                currentKey,
+                showFocusRing,
+                navigationListItemPrefix,
+                onRemove
+            }, children: children }) }));
+});
+
+export { NavigationList as N };
+//# sourceMappingURL=NavigationList-d8f472fe.js.map

package/es/NavigationList-d8f472fe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationList-d8f472fe.js","sources":["../../src/UNSAFE_NavigationList/useNavigationList.ts","../../src/UNSAFE_NavigationList/NavigationList.tsx"],"sourcesContent":["import { useState, useCallback, MutableRef, useRef, useEffect } from 'preact/hooks';\nimport {\n  keyExtractor,\n  getFirstVisibleKey,\n  getKey,\n  getPrevNextKeyUsingRef,\n  findElementByKey\n} from '../utils/PRIVATE_collectionUtils';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { useCollectionFocusRing } from '../hooks/PRIVATE_useCollectionFocusRing';\nimport { useCurrentKey } from '../hooks/PRIVATE_useCurrentKey';\nimport { NavigationListContextProps } from '../UNSAFE_NavigationListCommon';\n\nimport { ComponentChildren } from 'preact';\n\n/**\n * type for payload of current key change event handler\n */\ntype CurrentKeyDetail<K> = {\n  value: K;\n};\n/**\n * type for payload of selection change event handler\n */\ntype SelectionDetail<K> = {\n  value: K;\n  reason: 'pointer' | 'keyboard';\n};\n/**\n * type for payload of remove event handler\n */\ntype RemoveDetail<K> = {\n  value: K;\n};\n\n/*TODO: JET-58534. Create a hook to share some logic between navlist and tabbar. Hook will be used inside this one. */\nexport function useNavigationList<K extends string | number>({\n  containerRef,\n  selection,\n  onRemove,\n  onSelectionChange,\n  children\n}: {\n  containerRef: MutableRef<HTMLUListElement>;\n  selection?: K;\n  onRemove?: <K extends string | number>(detail: RemoveDetail<K>) => void;\n  onSelectionChange?: <K extends string | number>(detail: SelectionDetail<K>) => void;\n  children: ComponentChildren;\n}) {\n  const ITEM_SELECTOR = '[role=\"tab\"]';\n  const REMOVAL_ICON_SELECTOR = '[data-oj-navigationlist-item-remove-icon]';\n  const [currentKey, setCurrentKey] = useState<K | undefined>(selection);\n\n  const onCurrentKeyChange = useCallback((detail: CurrentKeyDetail<K | undefined>) => {\n    setCurrentKey(detail.value);\n  }, []) as NavigationListContextProps<K>['onCurrentKeyChange'];\n\n  const { currentKeyProps } = useCurrentKey(\n    (element) =>\n      onRemove\n        ? (extractOnlyItemKey(element, ITEM_SELECTOR, REMOVAL_ICON_SELECTOR) as K)\n        : keyExtractor(element, ITEM_SELECTOR),\n    false,\n    getPrevNextKeyUsingRef(containerRef, currentKey, true, ITEM_SELECTOR),\n    getPrevNextKeyUsingRef(containerRef, currentKey, false, ITEM_SELECTOR),\n    undefined,\n    undefined,\n    currentKey,\n    onCurrentKeyChange\n  );\n\n  const [showFocusRing, focusRingProps] = useCollectionFocusRing(containerRef, [\n    'Home',\n    'End',\n    'ArrowUp',\n    'ArrowDown'\n  ]);\n\n  const onFocus = useCallback(() => {\n    if (containerRef.current && currentKey === undefined) {\n      const key = getFirstVisibleKey(containerRef.current, ITEM_SELECTOR);\n      if (key) {\n        setCurrentKey(key as K);\n      }\n    }\n  }, [currentKey, containerRef]);\n\n  const onFocusProps = { onFocus };\n  const prevNavItems = useRef<K[]>();\n\n  useEffect(() => {\n    if (containerRef.current) {\n      const navListItemKeys = Array.from(\n        containerRef.current.querySelectorAll(ITEM_SELECTOR),\n        (elem) => getKey(elem as HTMLElement) as K\n      );\n      if (currentKey != null && navListItemKeys.indexOf(currentKey) !== -1) {\n        const navListItem = findElementByKey(\n          containerRef.current,\n          currentKey,\n          ITEM_SELECTOR\n        ) as any;\n        if (navListItem.scrollIntoViewIfNeeded) {\n          // for some browsers, we'll need the non-standard scrollIntoViewIfNeeded\n          navListItem.scrollIntoViewIfNeeded();\n        } else {\n          navListItem.scrollIntoView({ block: 'nearest' });\n        }\n      } else {\n        if (currentKey && navListItemKeys.indexOf(currentKey) === -1) {\n          prevNavItems.current\n            ? setCurrentKey(findNextCurrentKey(currentKey, navListItemKeys, prevNavItems.current))\n            : setCurrentKey(navListItemKeys[0] as K);\n        }\n        prevNavItems.current = navListItemKeys;\n      }\n    }\n  }, [children, currentKey, containerRef]);\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if ((event.key === 'Home' || event.key === 'End') && containerRef.current && currentKey) {\n        const navListItemKey = Array.from(\n          containerRef.current.querySelectorAll(ITEM_SELECTOR),\n          (elem) => getKey(elem as HTMLElement) as K\n        );\n        onCurrentKeyChange?.({\n          value: navListItemKey[event.key === 'Home' ? 0 : navListItemKey.length - 1] as K\n        });\n      }\n      if (currentKey && event.key === 'Enter') {\n        onSelectionChange?.({\n          value: currentKey as K,\n          reason: 'keyboard'\n        });\n      }\n      if (currentKey && event.key === 'Delete') {\n        onRemove?.({ value: currentKey as K });\n      }\n    },\n    [currentKey, onSelectionChange, onRemove, onCurrentKeyChange, containerRef]\n  );\n\n  return {\n    showFocusRing,\n    currentKey,\n    onCurrentKeyChange,\n    onKeyDown,\n    containerHandlers: mergeProps(focusRingProps, currentKeyProps, onFocusProps)\n  };\n}\n\nconst extractOnlyItemKey = (element: HTMLElement, itemSelector: string, itemEliminator: string) => {\n  const navigationListItem = element.closest(itemSelector);\n  const removeButton = element.closest(itemEliminator);\n  return navigationListItem?.contains(removeButton) ? null : keyExtractor(element, itemSelector);\n};\n\nconst findNextCurrentKey = <K>(currentKey: K, currNavs: K[], prevNavs: K[]) => {\n  const index = prevNavs.indexOf(currentKey);\n  if (index > 0) {\n    const nextIndex = index === prevNavs.length - 1 ? index - 1 : index + 1;\n    const nextKey = prevNavs[nextIndex];\n    if (currNavs.indexOf(nextKey) !== -1) {\n      return nextKey;\n    }\n  }\n  // update current key to be the first one if we can't find a suitable next key\n  return currNavs[0];\n};\n","import { Ref } from 'preact';\nimport { MutableRef, useRef } from 'preact/hooks';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { useId } from '../hooks/UNSAFE_useId';\nimport { navigationListStyles } from './themes/NavigationListStyles.css';\nimport { useNavigationList } from './useNavigationList';\nimport { forwardRef, useImperativeHandle } from 'preact/compat';\nimport { useTestId, TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { NavigationListProps, NavigationListContext } from '../UNSAFE_NavigationListCommon';\nexport { RemovableNavigationListItem } from '../UNSAFE_NavigationListCommon';\n\nexport type FocusableHandle = {\n  focus: () => void;\n  blur: () => void;\n};\n\nexport const NavigationList = forwardRef(\n  <K extends string | number>(\n    {\n      children,\n      selection,\n      onSelectionChange,\n      onRemove,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelLedBy,\n      testId\n    }: NavigationListProps<K> & TestIdProps,\n    ref?: Ref<FocusableHandle>\n  ) => {\n    const containerRef = useRef<HTMLUListElement>(null);\n\n    const { showFocusRing, currentKey, onCurrentKeyChange, containerHandlers, onKeyDown } =\n      useNavigationList({\n        containerRef: containerRef as MutableRef<HTMLUListElement>,\n        selection,\n        onRemove,\n        onSelectionChange,\n        children\n      });\n\n    const eventProps = { onKeyDown };\n    const navigationListClass = classNames([navigationListStyles.uListStyle]);\n    const navigationListItemPrefix = useId() + '_';\n    const testIdProps = useTestId(testId);\n\n    //Allows to call focus on rootRef without having to expose it\n    useImperativeHandle(ref!, () => ({\n      focus: () => {\n        if (containerRef.current) {\n          containerRef.current.focus();\n        }\n      },\n      blur: () => {\n        if (containerRef.current) {\n          containerRef.current.focus();\n        }\n      }\n    }));\n\n    return (\n      <ul\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelLedBy}\n        role=\"tablist\"\n        ref={containerRef}\n        aria-orientation={'vertical'}\n        tabIndex={0}\n        aria-activedescendant={currentKey ? navigationListItemPrefix + currentKey : ''}\n        {...mergeProps(eventProps, containerHandlers)}\n        {...testIdProps}\n        class={navigationListClass}>\n        <NavigationListContext.Provider\n          value={{\n            selection,\n            onSelectionChange,\n            onCurrentKeyChange,\n            currentKey,\n            showFocusRing,\n            navigationListItemPrefix,\n            onRemove\n          }}>\n          {children}\n        </NavigationListContext.Provider>\n      </ul>\n    );\n  }\n);\n"],"names":["_jsx"],"mappings":"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"}

package/es/NavigationListItem-20ff5d75.js

@@ -0,0 +1,10 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { B as BaseNavigationListItem } from './BaseNavigationListItem-d2a00c8f.js';
+
+function NavigationListItem({ itemKey, label, badge, metadata, severity }) {
+    return (jsx(BaseNavigationListItem, { itemKey: itemKey, label: label, badge: badge, metadata: metadata, severity: severity }));
+}
+
+export { NavigationListItem as N };
+//# sourceMappingURL=NavigationListItem-20ff5d75.js.map

package/es/NavigationListItem-20ff5d75.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationListItem-20ff5d75.js","sources":["../../src/UNSAFE_NavigationList/NavigationListItem.tsx"],"sourcesContent":["import {\n  BaseNavigationListItem,\n  BaseNavigationListItemProps\n} from '../UNSAFE_NavigationListCommon/BaseNavigationListItem';\n\nexport type NavigationListItemProps<K extends string | number> = Omit<\n  BaseNavigationListItemProps<K>,\n  'removeIcon'\n>;\n\nexport function NavigationListItem<K extends string | number>({\n  itemKey,\n  label,\n  badge,\n  metadata,\n  severity\n}: NavigationListItemProps<K>) {\n  return (\n    <BaseNavigationListItem\n      itemKey={itemKey}\n      label={label}\n      badge={badge}\n      metadata={metadata}\n      severity={severity}\n    />\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;AAUgB,SAAA,kBAAkB,CAA4B,EAC5D,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACmB,EAAA;IAC3B,QACEA,GAAC,CAAA,sBAAsB,EACrB,EAAA,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,CAAA,EACF;AACJ;;;;"}

package/es/NumberInputText-eca11601.js

@@ -9,14 +9,14 @@ import { F as FormFieldContext } from './FormFieldContext-68eb5946.js';
 import { u as useTextField } from './useTextField-f57cfb8d.js';
 import { L as Label } from './Label-ab276ca9.js';
 import { P as PrefixSuffix } from './PrefixSuffix-73361db2.js';
-import { u as usePrefixSuffix } from './usePrefixSuffix-995d4cda.js';
+import { u as usePrefixSuffix } from './usePrefixSuffix-435a9c59.js';
 import { g as getClientHints } from './clientHints-c76a913b.js';
 import { T as TextFieldInput } from './TextFieldInput-84280715.js';
 import './ObfuscatedTextFieldInputStyles.styles.css';
 import { R as ReadonlyTextFieldInput } from './ReadonlyTextFieldInput-a15badb6.js';
 import { R as ReadonlyTextField } from './StyledTextField-9df27ab4.js';
 import { T as TextField } from './TextField-d4b4661d.js';
-import './LayerHost-7a2149f5.js';
+import './LayerHost-15b42a3e.js';
 import './LiveRegionStyles.styles.css';
 import './logger-c92f309c.js';
 import { T as TabbableModeContext } from './TabbableModeContext-7d8ad946.js';
@@ -29,10 +29,10 @@ import { m as mergeProps } from './mergeProps-88ea8306.js';
 import './TooltipContentStyles.styles.css';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
-import './tooltipUtils-06c93436.js';
+import './tooltipUtils-1131b3ca.js';
 import 'preact';
 import './IconStyle.styles.css';
-import './Popup-7cc4028b.js';
+import './Popup-8becd87a.js';
 import './LabelStyles.styles.css';
 import './UNSAFE_Label/themes/redwood/LabelBaseTheme.styles.css';
 import './UNSAFE_Label/themes/redwood/LabelVariants.css.js';
@@ -46,8 +46,8 @@ import { S as SvgChevronUp } from './ChevronUp-96451348.js';
 import { S as SvgMinus } from './Minus-54288a2c.js';
 import { S as SvgPlus } from './Plus-fea15bf2.js';
 import { I as IconButton } from './IconButton-451a225c.js';
-import { u as useTranslationBundle } from './useTranslationBundle-6da03e52.js';
-import { G as Grid } from './Grid-c2385b22.js';
+import { u as useTranslationBundle } from './useTranslationBundle-98df6291.js';
+import { G as Grid } from './Grid-7fd29a9e.js';
 import { u as useSpinning } from './useSpinning-c2c54c7c.js';
 import { u as useSelectableTextField } from './useSelectableTextField-949184a5.js';
 

package/es/OverflowTabBar-5f7698bb.js

@@ -0,0 +1,78 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { createRef } from 'preact';
+import { useRef, useState, useCallback, useMemo } from 'preact/hooks';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { T as TabBar } from './TabBar-dd778e55.js';
+import { styles } from './UNSAFE_OverflowTabBar/themes/OverflowTabBarStyles.css.js';
+import { u as useDetectHorizontalOverflow } from './useDetectHorizontalOverflow-b1690000.js';
+import { f as findElementByKey } from './collectionUtils-d72c7c40.js';
+import { R as RemovableTabBarItem } from './RemovableTabBarItem-16d04210.js';
+import { T as TabBarItem } from './TabBarItem-ba695c75.js';
+import { O as OverflowTabBarItem } from './OverflowTabBarItem-c0ef2c6b.js';
+
+/**
+ * OverflowTabBar handles the rendering of overflowing tab items.
+ */
+function OverflowTabBar({ items, layout = 'stretch', display = 'standard', size = 'md', edge = 'top', selection, onSelect, onRemove, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, testId }) {
+    const displayStackProps = {
+        display: display
+    };
+    const displayNonStackProps = {
+        display: display,
+        size: size
+    };
+    const itemSelector = '[role="tab"]';
+    const displayProps = display === 'stacked' ? displayStackProps : displayNonStackProps;
+    const rootRef = useRef(null);
+    const tabBarRef = createRef();
+    const [isDropDownOpen, setIsDropDownOpen] = useState(false);
+    const isOutsideMouseDown = 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 = 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 = useMemo(() => items.map((item) => item.itemKey), [items]);
+    const getWidth = useCallback((itemKey) => {
+        const elem = findElementByKey(rootRef.current, itemKey, itemSelector);
+        const isLastKey = itemKey === keysArray[keysArray.length - 1];
+        //If it is lastKey we need not account for gap after it
+        const gapBetweenItems = !isLastKey ? 32 : 0;
+        return elem ? elem.getBoundingClientRect().width + gapBetweenItems : 0;
+    }, [keysArray]);
+    const { visibleItemKeys, overflowItemKeys } = useDetectHorizontalOverflow({
+        rootRef,
+        getWidth,
+        keysArray
+    });
+    const overflowTabBarClass = classNames([styles.overflowTabBarBase]);
+    return (jsx("div", { ref: rootRef, class: overflowTabBarClass, children: jsxs(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 ? (jsx(RemovableTabBarItem, { itemKey: item.itemKey, label: item.label, icon: item.icon, badge: item.badge, metadata: item.metadata, severity: item.severity, "aria-controls": item.tabPanelId })) : (jsx(TabBarItem, { itemKey: item.itemKey, label: item.label, icon: item.icon, badge: item.badge, metadata: item.metadata, severity: item.severity, "aria-controls": item.tabPanelId }))), overflowItemKeys != null && overflowItemKeys.length > 0 && (jsx(OverflowTabBarItem, { isOpen: isDropDownOpen, onClose: handleClose, overflowItemKey: overflowItemKey, overflowItems: items.filter((item) => overflowItemKeys?.includes(item.itemKey)) }))] }) }));
+}
+
+export { OverflowTabBar as O };
+//# sourceMappingURL=OverflowTabBar-5f7698bb.js.map

package/es/OverflowTabBar-5f7698bb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowTabBar-5f7698bb.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';\nimport { findElementByKey } from '../utils/PRIVATE_collectionUtils';\n\ntype OverflowTabBarProps<K extends string | number> = {\n  /**\n   * An array of data to render individual tabs\n   */\n  items: Item<K>[];\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  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  const itemSelector = '[role=\"tab\"]';\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 getWidth = useCallback(\n    <K extends string | number>(itemKey: K | undefined) => {\n      const elem = findElementByKey(rootRef.current as HTMLElement, itemKey as K, itemSelector);\n      const isLastKey = itemKey === (keysArray[keysArray.length - 1] as string | number);\n      //If it is lastKey we need not account for gap after it\n      const gapBetweenItems = !isLastKey ? 32 : 0;\n      return elem! ? elem.getBoundingClientRect().width + gapBetweenItems : 0;\n    },\n    [keysArray]\n  );\n\n  const { visibleItemKeys, overflowItemKeys } = useDetectHorizontalOverflow({\n    rootRef,\n    getWidth,\n    keysArray\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                />\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                />\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":["_jsx","_jsxs"],"mappings":"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"}

package/es/OverflowTabBarItem-c0ef2c6b.js

@@ -0,0 +1,87 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
+import { createRef } from 'preact';
+import { useRef, useCallback } from 'preact/hooks';
+import { u as useTranslationBundle } from './useTranslationBundle-98df6291.js';
+import { g as getClientHints } from './clientHints-c76a913b.js';
+import { m as mergeInterpolations } from './mergeInterpolations-e2db2a66.js';
+import { f as flexitemInterpolations } from './flexitem-7b7f7920.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { N as NavigationList } from './NavigationList-d8f472fe.js';
+import { N as NavigationListItem } from './NavigationListItem-20ff5d75.js';
+import { I as Icon } from './Icon-4171c0d7.js';
+import { u as useTabBarContext } from './useTabBarContext-0071d2a7.js';
+import { D as Dropdown } from './Dropdown-f45f823c.js';
+import { S as Sheet } from './Sheet-f7117b12.js';
+import { B as BaseTabBarItem } from './TabBarItem-ba695c75.js';
+import { styles } from './UNSAFE_TabBarCommon/themes/OverflowTabBarItemStyles.css.js';
+import { R as RemovableNavigationListItem } from './RemovableNavigationListItem-1675a880.js';
+
+const SvgOverflowH = (props) => (jsx(Icon, { viewBox: "0 0 24 24", ...props, children: jsx("g", { fill: "none", children: 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();
+    const isPointerSelection = useRef(false);
+    const overflowTabBarItemRef = useRef(null);
+    const navigationListRef = createRef();
+    const handleSelectionChange = useCallback((detail) => {
+        if (detail.reason === 'pointer') {
+            isPointerSelection.current = true;
+        }
+        onSelect?.({ value: detail.value });
+        onClose?.({ reason: 'itemAction' });
+    }, [onSelect, onClose]);
+    const handleDropdownClose = useCallback((e) => {
+        onClose?.({ reason: e.reason });
+    }, [onClose]);
+    const handleSheetClose = 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('@oracle/oraclejet-preact');
+    const isSelected = selection !== undefined && overflowContainsKey(selection);
+    //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'
+    });
+    const navContainerClasses = classNames([styles.navContainerBase]);
+    const navContainerRef = useRef(null);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            navigationListRef.current?.focus();
+        }
+    }, [navigationListRef]);
+    const getNavigationList = useCallback(() => {
+        return (jsx("div", { onKeyDown: handleKeyDown, tabIndex: 0, ref: navContainerRef, class: navContainerClasses, children: jsx(NavigationList, { ref: navigationListRef, selection: selection, onSelectionChange: handleSelectionChange, onRemove: onRemove, children: overflowItems?.map((item) => item.isRemovable ? (jsx(RemovableNavigationListItem, { itemKey: item.itemKey, label: item.label, badge: item.badge, metadata: item.metadata, severity: item.severity })) : (jsx(NavigationListItem, { itemKey: item.itemKey, label: item.label, badge: item.badge, metadata: item.metadata, severity: item.severity }))) }) }));
+    }, [
+        handleKeyDown,
+        navContainerClasses,
+        navigationListRef,
+        selection,
+        handleSelectionChange,
+        onRemove,
+        overflowItems
+    ]);
+    return (jsxs(Fragment, { children: [overflowItems && overflowItems.length > 0 && (jsx("div", { ref: overflowTabBarItemRef, style: flexDimensions, children: jsx(BaseTabBarItem, { "aria-controls": currentPanelId, itemKey: overflowItemKey, label: translations.overflowItemLabel(), icon: icon ? icon : jsx(SvgOverflowH, {}), badge: badge, showFocusRingOverride: focusRingRequirement, selectionOverride: isSelected, displayOverride: 'icons', "aria-haspopup": true }) })), getIsMobile() ? (jsx(Sheet, { isOpen: isOpen, onClose: handleSheetClose, children: getNavigationList() })) : (jsx(Dropdown, { initialFocus: "firstFocusable", isOpen: isOpen, onClose: handleDropdownClose, placement: isEdgeBottom ? 'top-end' : 'bottom-end', anchorRef: overflowTabBarItemRef, children: getNavigationList() }))] }));
+}
+const getIsMobile = () => {
+    const { deviceType } = getClientHints();
+    return deviceType === 'phone';
+};
+
+export { OverflowTabBarItem as O };
+//# sourceMappingURL=OverflowTabBarItem-c0ef2c6b.js.map

package/es/OverflowTabBarItem-c0ef2c6b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowTabBarItem-c0ef2c6b.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","_jsxs","_Fragment","OverflowH"],"mappings":"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"}

package/es/PRIVATE_BaseCardView.js

@@ -8,14 +8,14 @@ import './mergeProps-88ea8306.js';
 import './keys-df361af9.js';
 import './collectionUtils-d72c7c40.js';
 import './clientHints-c76a913b.js';
-import './useCurrentKey-55123e83.js';
-import './useUser-bca8cf2d.js';
-import './LayerHost-7a2149f5.js';
+import './useCurrentKey-76e7d7b1.js';
+import './useUser-a15426fc.js';
+import './LayerHost-15b42a3e.js';
 import './Common/themes/redwood/theme.js';
 import './Common/themes/themeContract.css.js';
 import './useCollectionFocusRing-d0c80397.js';
 import './useTabbableModeSet-37cd3452.js';
-import './useSelection-7c94a24f.js';
+import './useSelection-1e1e89df.js';
 import './textSelectionUtils-a6554a42.js';
 import './DragAndDropStyles.styles.css';
 import './useReorderableContext-67ba58f7.js';
@@ -31,8 +31,8 @@ import './size-88f26574.js';
 import './utils-d65cb4fb.js';
 import './colorUtils-16eb823f.js';
 import './_curry1-25297e59.js';
-import './useTooltip-e258ea41.js';
-import './useTooltipControlled-50d5dac9.js';
+import './useTooltip-227887ea.js';
+import './useTooltipControlled-7ccb5919.js';
 import './useId-03dbfdf0.js';
 import './useHover-19340c22.js';
 import './useToggle-8b7fcefe.js';
@@ -41,10 +41,10 @@ import './useTouch-4828df25.js';
 import './useAnimation-fe9990dc.js';
 import './useComponentTheme-d2f9e47f.js';
 import './logger-c92f309c.js';
-import './useTestId-af32a9eb.js';
-import './useThemeInterpolations-4f6cc83c.js';
-import './useColorScheme-f69d53b5.js';
-import './useScale-3b323ab2.js';
+import './useTestId-3bc3958c.js';
+import './useThemeInterpolations-41ac870d.js';
+import './useColorScheme-d8a80e2b.js';
+import './useScale-c86ecc6e.js';
 import './theme-63551f30.js';
 import './Theme-e6dec6db.js';
 import './mergeInterpolations-e2db2a66.js';
@@ -60,16 +60,16 @@ import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.css.js'
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
 import './TooltipContentVariants.styles.css';
-import './tooltipUtils-06c93436.js';
-import './EnvironmentProvider-a3819bde.js';
-import './LayerManager-be34be40.js';
-import './Floating-aebc0f85.js';
-import './useFloating-c9278755.js';
+import './tooltipUtils-1131b3ca.js';
+import './EnvironmentProvider-0fc2fd0c.js';
+import './LayerManager-af39e736.js';
+import './Floating-f9bbd276.js';
+import './useFloating-d60cc8b4.js';
 import './positionUtils-1ec41fd0.js';
 import './refUtils-b9d8d91a.js';
-import './useOutsideClick-388c62bd.js';
+import './useOutsideClick-725542a2.js';
 import './arrayUtils-35a58161.js';
-import './Layer-915d986a.js';
+import './Layer-71fc666f.js';
 import './UNSAFE_Layer/themes/LayerStyles.css.js';
 import './LayerStyles.styles.css';
 import './UNSAFE_Floating/themes/redwood/FloatingTheme.js';
@@ -116,16 +116,16 @@ import './FocusTracker-a6c7f00f.js';
 import './PRIVATE_FocusTracker/themes/FocusTrackerStyles.css.js';
 import './FocusTrackerStyles.styles.css';
 import './useReorderableItem-c715c504.js';
-import './useTranslationBundle-6da03e52.js';
+import './useTranslationBundle-98df6291.js';
 import './dndUtils-deb68797.js';
 import './hooks/PRIVATE_useReorderable/themes/ReorderableItemStyles.css.js';
-import './Grid-c2385b22.js';
+import './Grid-7fd29a9e.js';
 import './grid-65aa641c.js';
 import './boxalignment-7d41dd5e.js';
 import './boxalignment.styles.css';
 import './vanilla-extract-sprinkles-createRuntimeSprinkles.esm-2d655d37.js';
 import './GridStyles.styles.css';
-import './Flex-2d51e914.js';
+import './Flex-8696b27b.js';
 import './dimensions-e4b8a67e.js';
 import './flexbox-529f25da.js';
 import './flexbox.styles.css';