@oracle/oraclejet-preact 18.1.5 → 18.1.6

package/es/LineSeries-139bda1a.js

@@ -0,0 +1,109 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
+import { a as MARKER_PADDING, M as Marker } from './Marker-147d98cf.js';
+import './SvgShapesStyles.styles.css';
+import { g as getGroupCenterCoord } from './layoutUtils-5d62f2b4.js';
+import { d as getLabelPosition, e as getMarkerFillAndStroke, f as getCmdsForLine } from './useChartDnd-fc7ba21c.js';
+import { u as useTranslationBundle } from './useTranslationBundle-2df40edf.js';
+import { e as getItemAriaLabel } from './dataStyleUtils-1e980302.js';
+import { s as supportsMobileScreenReader } from './accUtils-ce2d6588.js';
+import { styles } from './PRIVATE_Chart/themes/ChartStyles.css.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { u as updateVisTextStyleProperties } from './textUtils-3ed25dd1.js';
+import { r as rgba } from './utils-a4102e03.js';
+import { colorSchemeVars } from './Common/themes/themeContract.css.js';
+
+const DEFAULT_POSITION = 'center';
+function MarkerLabel({ labelPosition, label, labelStyle, tx, ty, defaultFontSize, dataLabelEffect, isHighContrast, getTextDimensions }) {
+    let markerLabel = null;
+    const position = labelPosition ? labelPosition : DEFAULT_POSITION;
+    const { dataLabelStyle, dataLabelContrast, highContrastLabelStyle } = styles;
+    const labelString = label;
+    if (position && labelString) {
+        const markerLabelStyle = {
+            fontSize: defaultFontSize,
+            ...updateVisTextStyleProperties(labelStyle)
+        };
+        const labelDims = getTextDimensions?.(labelString, markerLabelStyle);
+        const { x, y } = getLabelPosition(position, tx, ty, labelDims);
+        markerLabel = (jsx("text", { x: x, y: y, class: classNames([
+                dataLabelStyle,
+                dataLabelEffect === 'outline' ? dataLabelContrast : '',
+                isHighContrast ? highContrastLabelStyle : ''
+            ]), style: markerLabelStyle, children: labelString }));
+    }
+    return markerLabel;
+}
+
+const MARKER_DEFAULT_SIZE = 10;
+function MarkersWithLabel({ yScale, xScale, color, seriesIndex, startIndex, endIndex, hiddenIds, selectedIds, highlightedIds, orientation, isLog, markerType, getDataItem, focusedItemIndex, hoveredItemIndex, isDrillEnabled, activeId, isSelectionEnabled, timeAxisType, isPointInsideMarquee, series, groups, defaultFontSize, dataLabelEffect, isHighContrast, isTestEnv, isDataXAxis, getTextDimensions }) {
+    const isHoriz = orientation === 'horizontal';
+    const items = [];
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    for (let groupIndex = startIndex; groupIndex < endIndex + 1; groupIndex++) {
+        const item = getDataItem(seriesIndex, groupIndex);
+        if (!item || hiddenIds?.has(item.id)) {
+            continue;
+        }
+        let x, y;
+        const itemHasValue = 'value' in item;
+        if (isDataXAxis && 'y' in item) {
+            x = xScale.transform(item.x);
+            y = yScale.transform(item.y);
+        }
+        else {
+            const value = itemHasValue ? item?.value : undefined;
+            if (value == null || (isLog && value <= 0)) {
+                continue;
+            }
+            x = isHoriz
+                ? yScale.transform(value)
+                : getGroupCenterCoord(groups[groupIndex], groupIndex, xScale, item, timeAxisType);
+            y = isHoriz
+                ? getGroupCenterCoord(groups[groupIndex], groupIndex, xScale, item, timeAxisType)
+                : yScale.transform(value);
+        }
+        const isFocused = focusedItemIndex === groupIndex;
+        const isHovered = hoveredItemIndex === groupIndex;
+        const isSelected = !!(selectedIds?.has(item.id) || isPointInsideMarquee?.(item.id, { x, y })); // TODO: tagcloud has isItemSelected we should look to leverage here
+        const isDrillable = item.drilling === 'on' || (item.drilling != 'off' && isDrillEnabled);
+        const isHighlighted = !highlightedIds || highlightedIds?.size === 0 || highlightedIds?.has(item.id); // TODO: tagcloud has isItemHighlighted we should look to leverage here
+        const { fill, stroke, outerStroke } = getMarkerFillAndStroke(!!item.isMarkerDisplayed, isSelectionEnabled, isHovered, isFocused, isSelected, color, item.markerColor);
+        const itemMarkerType = item.isMarkerDisplayed ? item.markerType || markerType : markerType;
+        const isActive = isFocused || isHovered;
+        const ariaLabel = supportsMobileScreenReader || isActive
+            ? getItemAriaLabel(translations, series.name || series.id.toString(), groups[groupIndex].name || groups[groupIndex].id, isSelectionEnabled, isSelected, isDrillable, item.accessibleLabel, itemHasValue ? item.value : undefined, item.x, 'y' in item ? item.y : undefined)
+            : undefined;
+        const dataInfo = {
+            'data-oj-series-index': seriesIndex,
+            'data-oj-group-index': groupIndex,
+            'data-oj-object': 'item',
+            id: isActive ? activeId : undefined,
+            role: ariaLabel ? 'img' : undefined,
+            'aria-label': ariaLabel,
+            'data-oj-private-item-id': isTestEnv ? item.id : undefined
+        };
+        const markerSize = (item.markerSize || MARKER_DEFAULT_SIZE) + 2 * MARKER_PADDING;
+        items.push(jsxs(Fragment, { children: [jsx(Marker, { type: itemMarkerType, tx: x, ty: y, isInteractive: isDrillable || isSelectionEnabled, scale: 1, fill: fill, stroke: stroke, outerStroke: outerStroke, width: markerSize, height: markerSize, dataInfo: dataInfo, preserveRectAspectRatio: true, styleClass: isHighlighted ? undefined : styles.dimmed }), jsx(MarkerLabel, { labelPosition: item.labelPosition, label: item.label, labelStyle: item.labelStyle, tx: x, ty: y, defaultFontSize: defaultFontSize, dataLabelEffect: dataLabelEffect, isHighContrast: isHighContrast, getTextDimensions: getTextDimensions })] }));
+    }
+    return jsx(Fragment, { children: items });
+}
+
+function LineSeries({ color, isHorizontal, lineType = 'straight', lineColor, lineStyle, lineWidth = 3, isHighlighted, lineSegmentCoords, seriesIndex }) {
+    const style = {
+        stroke: lineColor || color,
+        strokeDasharray: lineStyle === 'dotted' ? 3 : lineStyle === 'dashed' ? 6 : undefined,
+        strokeWidth: lineWidth,
+        fill: rgba(colorSchemeVars.palette.neutral[0], 0)
+    };
+    return (jsx(Fragment, { children: lineSegmentCoords.map((value) => {
+            if (value.length < 2) {
+                return;
+            }
+            const cmds = getCmdsForLine(value, lineType, isHorizontal);
+            return lineType === 'straight' ? (jsx("polyline", { points: cmds, style: style, className: isHighlighted ? undefined : styles.dimmed, "data-oj-series-index": seriesIndex, "data-oj-object": 'line' })) : (jsx("path", { d: cmds, style: style, className: isHighlighted ? undefined : styles.dimmed, "data-oj-series-index": seriesIndex, "data-oj-object": 'line' }));
+        }) }));
+}
+
+export { LineSeries as L, MarkersWithLabel as M };
+//# sourceMappingURL=LineSeries-139bda1a.js.map

package/es/LineSeries-139bda1a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineSeries-139bda1a.js","sources":["../../src/PRIVATE_Chart/MarkerLabel.tsx","../../src/PRIVATE_Chart/MarkersWithLabel.tsx","../../src/PRIVATE_LineAreaComponents/LineSeries.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 { styles } from '#PRIVATE_Chart/themes/ChartStyles.css';\nimport { VNode } from 'preact';\nimport { classNames } from '#utils/UNSAFE_classNames';\nimport { VisLabelStyle } from '#utils/UNSAFE_visTypes/common/textTypes';\nimport { updateVisTextStyleProperties } from '#utils/UNSAFE_visUtils/textUtils';\nimport { Dimension } from '#utils/UNSAFE_visTypes/common';\nimport { Font } from '#hooks/PRIVATE_useTextDimensions';\nimport { getLabelPosition } from '#utils/PRIVATE_chartUtils/utils';\n\nconst DEFAULT_POSITION = 'center';\n\ntype Props = {\n  labelPosition?: 'belowMarker' | 'aboveMarker' | 'beforeMarker' | 'afterMarker' | 'center';\n  label?: string;\n  labelStyle?: VisLabelStyle;\n  tx?: number;\n  ty?: number;\n  defaultFontSize: string;\n  dataLabelEffect: 'outline' | 'none';\n  isHighContrast: boolean;\n  getTextDimensions?: (text: string, style: Font) => Dimension;\n};\n\nexport function MarkerLabel({\n  labelPosition,\n  label,\n  labelStyle,\n  tx,\n  ty,\n  defaultFontSize,\n  dataLabelEffect,\n  isHighContrast,\n  getTextDimensions\n}: Props) {\n  let markerLabel: VNode | null = null;\n  const position = labelPosition ? labelPosition : DEFAULT_POSITION;\n  const { dataLabelStyle, dataLabelContrast, highContrastLabelStyle } = styles;\n  const labelString = label;\n\n  if (position && labelString) {\n    const markerLabelStyle = {\n      fontSize: defaultFontSize,\n      ...updateVisTextStyleProperties(labelStyle)\n    };\n\n    const labelDims = getTextDimensions?.(labelString, markerLabelStyle);\n    const { x, y } = getLabelPosition(position, tx, ty, labelDims);\n    markerLabel = (\n      <text\n        x={x}\n        y={y}\n        class={classNames([\n          dataLabelStyle,\n          dataLabelEffect === 'outline' ? dataLabelContrast : '',\n          isHighContrast ? highContrastLabelStyle : ''\n        ])}\n        style={markerLabelStyle}>\n        {labelString}\n      </text>\n    );\n  }\n  return markerLabel;\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 { ColorProps } from '#utils/UNSAFE_interpolations/colors';\nimport { LineAreaItem } from '#UNSAFE_LineAreaChart/lineAreaChart.types';\nimport { Marker, MARKER_PADDING } from '#PRIVATE_SvgShapes';\nimport { MarkerShapes } from '#utils/UNSAFE_visTypes/common';\nimport { getGroupCenterCoord } from '#utils/PRIVATE_chartUtils/layoutUtils';\nimport { ChartSeriesData, Scale, Group } from '#utils/UNSAFE_visTypes/chart';\nimport { getMarkerFillAndStroke } from '#utils/PRIVATE_chartUtils/utils';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport type { BundleType } from '#resources/nls/bundle';\nimport { getItemAriaLabel } from '#utils/PRIVATE_chartUtils/accUtils';\nimport { supportsMobileScreenReader } from '#utils/UNSAFE_visUtils';\nimport { MarkerLabel } from './MarkerLabel';\nimport { styles } from '#PRIVATE_Chart/themes/ChartStyles.css';\nimport { Dimension } from '#utils/UNSAFE_visTypes/common';\nimport { Font } from '#hooks/PRIVATE_useTextDimensions';\nimport { ScatterItem } from '#UNSAFE_ScatterChart/scatterChart.types';\n\nconst MARKER_DEFAULT_SIZE = 10;\ntype MarkersProps<K, D> = {\n  yScale: Scale;\n  xScale: Scale;\n  startIndex: number;\n  endIndex: number;\n  seriesIndex: number;\n  series: ChartSeriesData<K, D>;\n  markerType: MarkerShapes;\n  color: ColorProps['color'];\n  groups: Group[];\n  focusedItemIndex?: number;\n  isSelectionEnabled: boolean;\n  hoveredItemIndex?: number;\n  selectedIds?: Set<string | number>;\n  hiddenIds?: Set<string | number>;\n  highlightedIds?: Set<string | number>;\n  activeId?: string;\n  orientation: 'horizontal' | 'vertical';\n  isDrillEnabled: boolean;\n  isLog: boolean;\n  isPointInsideMarquee: ((id: K, point: { x: number; y: number }) => boolean) | undefined;\n  getDataItem: (seriesIndex: number, groupIndex: number) => D | undefined;\n  timeAxisType?: 'enabled' | 'skipGaps' | 'mixedFrequency';\n  defaultFontSize: string;\n  dataLabelEffect: 'outline' | 'none';\n  isHighContrast: boolean;\n  isTestEnv?: boolean;\n  isDataXAxis?: boolean;\n  getTextDimensions?: (text: string, style: Font) => Dimension;\n};\n\nexport function MarkersWithLabel<\n  K extends string | number,\n  D extends LineAreaItem<K> | ScatterItem<K>\n>({\n  yScale,\n  xScale,\n  color,\n  seriesIndex,\n  startIndex,\n  endIndex,\n  hiddenIds,\n  selectedIds,\n  highlightedIds,\n  orientation,\n  isLog,\n  markerType,\n  getDataItem,\n  focusedItemIndex,\n  hoveredItemIndex,\n  isDrillEnabled,\n  activeId,\n  isSelectionEnabled,\n  timeAxisType,\n  isPointInsideMarquee,\n  series,\n  groups,\n  defaultFontSize,\n  dataLabelEffect,\n  isHighContrast,\n  isTestEnv,\n  isDataXAxis,\n  getTextDimensions\n}: MarkersProps<K, D>) {\n  const isHoriz = orientation === 'horizontal';\n  const items = [];\n\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n  for (let groupIndex = startIndex; groupIndex < endIndex + 1; groupIndex++) {\n    const item = getDataItem(seriesIndex, groupIndex);\n    if (!item || hiddenIds?.has(item.id)) {\n      continue;\n    }\n    let x, y;\n    const itemHasValue = 'value' in item;\n    if (isDataXAxis && 'y' in item) {\n      x = xScale.transform(item.x);\n      y = yScale.transform(item.y);\n    } else {\n      const value = itemHasValue ? item?.value : undefined;\n      if (value == null || (isLog && value <= 0)) {\n        continue;\n      }\n      x = isHoriz\n        ? yScale.transform(value)\n        : getGroupCenterCoord<K, D>(groups[groupIndex], groupIndex, xScale, item, timeAxisType);\n      y = isHoriz\n        ? getGroupCenterCoord<K, D>(groups[groupIndex], groupIndex, xScale, item, timeAxisType)\n        : yScale.transform(value);\n    }\n    const isFocused = focusedItemIndex === groupIndex;\n    const isHovered = hoveredItemIndex === groupIndex;\n    const isSelected = !!(selectedIds?.has(item.id!) || isPointInsideMarquee?.(item.id, { x, y })); // TODO: tagcloud has isItemSelected we should look to leverage here\n    const isDrillable = item.drilling === 'on' || (item.drilling != 'off' && isDrillEnabled);\n    const isHighlighted =\n      !highlightedIds || highlightedIds?.size === 0 || highlightedIds?.has(item.id); // TODO: tagcloud has isItemHighlighted we should look to leverage here\n    const { fill, stroke, outerStroke } = getMarkerFillAndStroke(\n      !!item.isMarkerDisplayed,\n      isSelectionEnabled,\n      isHovered,\n      isFocused,\n      isSelected,\n      color,\n      item.markerColor\n    );\n    const itemMarkerType = item.isMarkerDisplayed ? item.markerType || markerType : markerType;\n    const isActive = isFocused || isHovered;\n    const ariaLabel =\n      supportsMobileScreenReader || isActive\n        ? getItemAriaLabel(\n            translations,\n            series.name || series.id.toString(),\n            groups[groupIndex].name || groups[groupIndex].id,\n            isSelectionEnabled,\n            isSelected,\n            isDrillable,\n            item.accessibleLabel,\n            itemHasValue ? item.value : undefined,\n            item.x,\n            'y' in item ? item.y : undefined\n          )\n        : undefined;\n\n    const dataInfo = {\n      'data-oj-series-index': seriesIndex,\n      'data-oj-group-index': groupIndex,\n      'data-oj-object': 'item',\n      id: isActive ? activeId : undefined,\n      role: ariaLabel ? 'img' : undefined,\n      'aria-label': ariaLabel,\n      'data-oj-private-item-id': isTestEnv ? item.id : undefined\n    };\n\n    const markerSize = (item.markerSize || MARKER_DEFAULT_SIZE) + 2 * MARKER_PADDING;\n    items.push(\n      <>\n        <Marker\n          type={itemMarkerType}\n          tx={x}\n          ty={y}\n          isInteractive={isDrillable || isSelectionEnabled}\n          scale={1}\n          fill={fill}\n          stroke={stroke}\n          outerStroke={outerStroke}\n          width={markerSize}\n          height={markerSize}\n          dataInfo={dataInfo}\n          preserveRectAspectRatio\n          styleClass={isHighlighted ? undefined : styles.dimmed}\n        />\n        <MarkerLabel\n          labelPosition={item.labelPosition}\n          label={item.label}\n          labelStyle={item.labelStyle}\n          tx={x}\n          ty={y}\n          defaultFontSize={defaultFontSize}\n          dataLabelEffect={dataLabelEffect}\n          isHighContrast={isHighContrast}\n          getTextDimensions={getTextDimensions}\n        />\n      </>\n    );\n  }\n  return <>{items}</>;\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 { ColorProps } from '#utils/UNSAFE_interpolations/colors';\nimport { getCmdsForLine } from '#utils/PRIVATE_chartUtils/utils';\nimport { Point } from '#utils/PRIVATE_visSVGUtils';\nimport { rgba } from '#UNSAFE_Theme';\nimport { colorSchemeVars } from '#Common/themes/themeContract.css';\nimport { styles } from '#PRIVATE_Chart/themes/ChartStyles.css';\nimport { Property } from 'csstype';\n\ntype LineSeriesProps = {\n  color: ColorProps['color'];\n  lineStyle?: 'dotted' | 'dashed' | 'solid';\n  lineColor?: Property.Color;\n  lineWidth?: number;\n  lineType?: 'straight' | 'curved';\n  isHorizontal: boolean;\n  lineSegmentCoords: Point[][];\n  isHighlighted: boolean;\n  seriesIndex: number;\n};\n\nexport function LineSeries({\n  color,\n  isHorizontal,\n  lineType = 'straight',\n  lineColor,\n  lineStyle,\n  lineWidth = 3,\n  isHighlighted,\n  lineSegmentCoords,\n  seriesIndex\n}: LineSeriesProps) {\n  const style = {\n    stroke: lineColor || color,\n    strokeDasharray: lineStyle === 'dotted' ? 3 : lineStyle === 'dashed' ? 6 : undefined,\n    strokeWidth: lineWidth,\n    fill: rgba(colorSchemeVars.palette.neutral[0], 0)\n  };\n\n  return (\n    <>\n      {lineSegmentCoords.map((value: Point[]) => {\n        if (value.length < 2) {\n          return;\n        }\n        const cmds = getCmdsForLine(value, lineType, isHorizontal);\n        return lineType === 'straight' ? (\n          <polyline\n            points={cmds}\n            style={style}\n            className={isHighlighted ? undefined : styles.dimmed}\n            data-oj-series-index={seriesIndex}\n            data-oj-object={'line'}\n          />\n        ) : (\n          <path\n            d={cmds}\n            style={style}\n            className={isHighlighted ? undefined : styles.dimmed}\n            data-oj-series-index={seriesIndex}\n            data-oj-object={'line'}\n          />\n        );\n      })}\n    </>\n  );\n}\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/es/Link-c7061441.js

@@ -0,0 +1,33 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { u as usePressClick } from './usePressClick-945cc43b.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { u as useInteractionStyle } from './useInteractionStyle-52222fdd.js';
+import { LinkRedwoodTheme } from './UNSAFE_Link/themes/redwood/LinkTheme.js';
+import './TabbableModeContext-7d8ad946.js';
+import { u as useTabbableMode } from './useTabbableMode-a3a351d0.js';
+import { u as useTestId } from './useTestId-474ac6ca.js';
+
+const noop = () => { };
+/**
+ * Link component creates a hyperlink.
+ */
+function Link({ href, variant, placement = 'standalone', target, testId, 'aria-describedby': ariaDescribedBy, 'aria-label': accessibleLabel, 'aria-labelledby': ariaLabelledBy, children, onClick, isDisabled }) {
+    const { interactionProps, applyPseudoHoverStyle, applyHoverStyle } = useInteractionStyle();
+    const { classes } = useComponentTheme(LinkRedwoodTheme, {
+        needsEventsHover: applyHoverStyle ? 'isNeedsEventsHover' : 'notNeedsEventsHover',
+        pseudoHover: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover',
+        variant,
+        placement,
+        disabled: isDisabled ? 'isDisabled' : 'notDisabled'
+    });
+    const { isTabbable } = useTabbableMode();
+    const linkClasses = classNames([classes]);
+    const { pressProps } = usePressClick(onClick ?? noop);
+    const testIdProps = useTestId(testId);
+    return (jsx("a", { tabIndex: isTabbable && !isDisabled ? 0 : -1, href: !isDisabled ? href : undefined, "aria-describedby": ariaDescribedBy, "aria-label": accessibleLabel, "aria-labelledby": ariaLabelledBy, target: target, ...(!isDisabled && pressProps), ...interactionProps, ...testIdProps, class: linkClasses, children: children }));
+}
+
+export { Link as L };
+//# sourceMappingURL=Link-c7061441.js.map

package/es/Link-c7061441.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link-c7061441.js","sources":["../../src/UNSAFE_Link/Link.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';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { usePressClick } from '#hooks/UNSAFE_usePressClick';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { LinkVariantOptions } from './themes/LinkStyles.css';\nimport { useInteractionStyle } from '../hooks/UNSAFE_useInteractionStyle';\nimport { LinkRedwoodTheme } from './themes/redwood/LinkTheme';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\nimport { useTestId, TestIdProps } from '../hooks/UNSAFE_useTestId';\ntype Props = {\n  /**\n   * Sets the URL that the hyperlink points to.\n   */\n  href: string;\n\n  /**\n   * Sets the variant. The default value of this property is theme driven.\n   */\n  variant?: 'standard' | 'primary' | 'secondary';\n\n  /**\n   * Sets the placement.\n   */\n  placement?: 'standalone' | 'embedded';\n\n  /**\n   * Sets the target.\n   */\n  target?: string;\n\n  /**\n   * Specifies id for element (or elements) that describes the object.\n   */\n  'aria-describedby'?: string;\n\n  /**\n   * A label to be used for accessibility purposes.\n   */\n  'aria-label'?: string;\n\n  /**\n   * One or more ids (separated by spaces) of elements that label the Link.\n   */\n  'aria-labelledby'?: string;\n\n  /**\n   * Triggered when a link is clicked, whether by keyboard, mouse, or touch events.\n   */\n  onClick?: (event: Event) => void;\n\n  /**\n   * Specifies the children\n   */\n  children?: ComponentChildren;\n\n  /**\n   * Specifies that the link element should be disabled.\n   */\n  isDisabled?: boolean;\n} & TestIdProps;\n\nconst noop = () => {};\n/**\n * Link component creates a hyperlink.\n */\nexport function Link({\n  href,\n  variant,\n  placement = 'standalone',\n  target,\n  testId,\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': accessibleLabel,\n  'aria-labelledby': ariaLabelledBy,\n  children,\n  onClick,\n  isDisabled\n}: Props) {\n  const { interactionProps, applyPseudoHoverStyle, applyHoverStyle } = useInteractionStyle();\n  const { classes } = useComponentTheme<LinkVariantOptions>(LinkRedwoodTheme, {\n    needsEventsHover: applyHoverStyle ? 'isNeedsEventsHover' : 'notNeedsEventsHover',\n    pseudoHover: applyPseudoHoverStyle ? 'isPseudoHover' : 'notPseudoHover',\n    variant,\n    placement,\n    disabled: isDisabled ? 'isDisabled' : 'notDisabled'\n  });\n  const { isTabbable } = useTabbableMode();\n  const linkClasses = classNames([classes]);\n  const { pressProps } = usePressClick(onClick ?? noop);\n  const testIdProps = useTestId(testId);\n  return (\n    <a\n      tabIndex={isTabbable && !isDisabled ? 0 : -1}\n      href={!isDisabled ? href : undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-label={accessibleLabel}\n      aria-labelledby={ariaLabelledBy}\n      target={target}\n      {...(!isDisabled && pressProps)}\n      {...interactionProps}\n      {...testIdProps}\n      class={linkClasses}>\n      {children}\n    </a>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;AAoEA,MAAM,IAAI,GAAG,MAAK,GAAG,CAAC;AACtB;;AAEG;AACa,SAAA,IAAI,CAAC,EACnB,IAAI,EACJ,OAAO,EACP,SAAS,GAAG,YAAY,EACxB,MAAM,EACN,MAAM,EACN,kBAAkB,EAAE,eAAe,EACnC,YAAY,EAAE,eAAe,EAC7B,iBAAiB,EAAE,cAAc,EACjC,QAAQ,EACR,OAAO,EACP,UAAU,EACJ,EAAA;IACN,MAAM,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,eAAe,EAAE,GAAG,mBAAmB,EAAE,CAAC;AAC3F,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAqB,gBAAgB,EAAE;QAC1E,gBAAgB,EAAE,eAAe,GAAG,oBAAoB,GAAG,qBAAqB;QAChF,WAAW,EAAE,qBAAqB,GAAG,eAAe,GAAG,gBAAgB;QACvE,OAAO;QACP,SAAS;QACT,QAAQ,EAAE,UAAU,GAAG,YAAY,GAAG,aAAa;AACpD,KAAA,CAAC,CAAC;AACH,IAAA,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IACzC,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1C,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC;AACtD,IAAA,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IACtC,QACEA,GACE,CAAA,GAAA,EAAA,EAAA,QAAQ,EAAE,UAAU,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC,EAC5C,IAAI,EAAE,CAAC,UAAU,GAAG,IAAI,GAAG,SAAS,EAAA,kBAAA,EAClB,eAAe,EAAA,YAAA,EACrB,eAAe,EAAA,iBAAA,EACV,cAAc,EAC/B,MAAM,EAAE,MAAM,EAAA,IACT,CAAC,UAAU,IAAI,UAAU,CAAC,EAC3B,GAAA,gBAAgB,EAChB,GAAA,WAAW,EACf,KAAK,EAAE,WAAW,EACjB,QAAA,EAAA,QAAQ,EACP,CAAA,EACJ;AACJ;;;;"}

package/es/LinkVariants.styles.css

@@ -9,11 +9,12 @@
   --textColorActive__1w21kyl7: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-secondary);
 }
 .LinkVariants_multiVariantStyles_placement_standalone__18dr6fk3 {
+  align-items: center;
   -webkit-text-decoration-line: var(--standaloneTextDecoration__1w21kyl0);
           text-decoration-line: var(--standaloneTextDecoration__1w21kyl0);
   min-height: 24px;
   min-width: 24px;
-  display: inline-block;
+  display: inline-flex;
   font-weight: var(--standaloneFontWeight__1w21kyl2);
 }
 .LinkVariants_multiVariantStyles_placement_standalone__18dr6fk3:active {

package/es/LinkVariants.styles2.css

@@ -9,11 +9,12 @@
   --textColorActive__1w21kyl7: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-secondary);
 }
 .LinkVariants_multiVariantStyles_placement_standalone__1gbyfwi3 {
+  align-items: center;
   -webkit-text-decoration-line: var(--standaloneTextDecoration__1w21kyl0);
           text-decoration-line: var(--standaloneTextDecoration__1w21kyl0);
   min-height: 24px;
   min-width: 24px;
-  display: inline-block;
+  display: inline-flex;
   font-weight: var(--standaloneFontWeight__1w21kyl2);
 }
 .LinkVariants_multiVariantStyles_placement_standalone__1gbyfwi3:active {

package/es/List-58b8d3c9.js

@@ -16,17 +16,17 @@ import { f as flexitemInterpolations } from './flexitem-7b7f7920.js';
 import { listItemMultiVariantStyles, paddingStyles, listItemStyles, skeletonStyles, sparkleStyles, listStyles } from './PRIVATE_List/themes/ListStyles.css.js';
 import { e as compareListItemContext, m as getPrevNextKey, k as keyExtractor, f as findElementByKey, d as getFirstVisibleKey } from './collectionUtils-8a9d80a3.js';
 import { S as Skeleton } from './Skeleton-7b5ff102.js';
-import { F as Flex } from './Flex-ce31b351.js';
+import { F as Flex } from './Flex-2d9ebee9.js';
 import { S as Selector } from './Selector-41618991.js';
 import { g as globalImages } from './ImageVars.css-7b3180c8.js';
-import { u as useTheme } from './useTheme-93c07059.js';
-import { u as useTestId } from './useTestId-9b504481.js';
+import { u as useTheme } from './useTheme-5aa36f52.js';
+import { u as useTestId } from './useTestId-474ac6ca.js';
 import './CollectionInteractionContext-7cf19abc.js';
 import { u as useCollectionInteractionContext } from './useCollectionInteractionContext-3895c632.js';
 import 'preact';
-import { u as useSelection } from './useSelection-649fd4f1.js';
+import { u as useSelection } from './useSelection-2d26ab04.js';
 import { u as useDropDownSelection } from './useDropDownSelection-28285b15.js';
-import { u as useCurrentKey } from './useCurrentKey-7287061f.js';
+import { u as useCurrentKey } from './useCurrentKey-b8e62707.js';
 import { u as useCollectionFocusRing } from './useCollectionFocusRing-de20f4fc.js';
 import { u as useItemAction } from './useItemAction-008b3f7d.js';
 import { u as useTabbableModeSet } from './useTabbableModeSet-de779622.js';

package/es/ListItemLayout-af86b17d.js

@@ -0,0 +1,110 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { G as Grid } from './Grid-238d8757.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { styles } from './UNSAFE_ListItemLayout/themes/ListItemLayoutStyles.css.js';
+
+// TODO: revisit idea of negative margin when selector has a proper API for handling spacing
+// Jira: JET-54543
+/**
+ * A ListItemLayout component represents a layout used for list view item elements.
+ */
+function ListItemLayout({ children, selector, leading, primary, secondary, tertiary, overline, metadata, trailing, action, quaternary, navigation, verticalAlignment = 'middle' }) {
+    // generate grid skeleton, adding cells based on which props are defined
+    const { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow } = verticalAlignment === 'top'
+        ? getOptInColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation)
+        : getColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation);
+    // extra row placed before the other rows, only used with top alignment
+    const topRow = overline && verticalAlignment === 'top'
+        ? [
+            firstCell && jsx("span", { children: " " }),
+            secondCell && jsx("span", { children: " " }),
+            jsx("div", { className: styles.topRowStyles, children: overline }),
+            lastCell && jsx("span", { children: " " })
+        ]
+        : null;
+    // if ListItemLayout component has a child (ListItemTextLayout) then render that instead of individual props
+    const textArea = children ? (jsx("div", { className: styles.childrenStyles, children: children })) : (jsxs("div", { className: styles.flexColumnStyles, children: [verticalAlignment === 'top' ? null : jsx("div", { children: overline }), jsx("div", { children: primary }), jsx("div", { children: secondary }), jsx("div", { children: tertiary })] }));
+    // a second row is needed when quaternary or navigation are defined
+    const secondRow = hasSecondRow
+        ? [
+            firstCell && jsx("span", { children: " " }),
+            secondCell && jsx("span", { children: " " }),
+            jsx("div", { className: classNames([
+                    verticalAlignment === 'top' ? styles.optInTopPaddingStyles : '',
+                    styles.rowAlignStyles
+                ]), children: quaternary }),
+            lastCell && (jsx("div", { className: classNames([
+                    verticalAlignment === 'top' ? styles.optInTopPaddingStyles : '',
+                    styles.endJustifyStyles
+                ]), children: navigation }))
+        ]
+        : null;
+    return (jsxs(Grid, { gap: verticalAlignment === 'top' ? '0x' : '4x', gridTemplateColumns: columnsTemplate, children: [topRow, firstCell, secondCell, jsx("div", { className: styles.centerVerticalStyles, children: textArea }), lastCell, secondRow] }));
+}
+function getColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation) {
+    const columnsTemplateBuilder = [];
+    let firstCell = null;
+    if (selector) {
+        columnsTemplateBuilder.push('auto');
+        firstCell = jsx("div", { className: styles.selectorStyles, children: selector });
+    }
+    let secondCell = null;
+    if (leading) {
+        columnsTemplateBuilder.push('auto');
+        secondCell = (jsx("div", { className: classNames([styles.centerVerticalStyles, styles.displayFlexStyle]), children: leading }));
+    }
+    columnsTemplateBuilder.push('1fr'); // Text area always gets 1 full fraction of allotted space
+    let lastCell = null;
+    if (metadata || trailing || action || navigation) {
+        columnsTemplateBuilder.push('auto');
+        lastCell = (jsxs("div", { className: styles.flexRowStyles, children: [jsx("div", { className: classNames([
+                        styles.centerVerticalStyles,
+                        metadata ? styles.leftPaddingStyles : ''
+                    ]), children: metadata }), jsx("div", { className: classNames([
+                        styles.centerVerticalStyles,
+                        trailing ? styles.leftPaddingStyles : ''
+                    ]), children: trailing }), jsx("div", { className: classNames([styles.centerVerticalStyles, action ? styles.actionStyles : '']), children: action })] }));
+    }
+    const columnsTemplate = columnsTemplateBuilder.join(' ');
+    const hasSecondRow = quaternary || navigation ? true : false;
+    return { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow };
+}
+function getOptInColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation) {
+    const columnsTemplateBuilder = [];
+    let firstCell = null;
+    if (selector) {
+        columnsTemplateBuilder.push('auto');
+        firstCell = jsx("div", { className: styles.optInSelectorStyles, children: selector });
+    }
+    let secondCell = null;
+    if (selector || leading) {
+        columnsTemplateBuilder.push('auto');
+        secondCell = (jsx("div", { className: classNames([
+                selector ? styles.leftPaddingStyles : '',
+                styles.topAlignStyles,
+                leading ? styles.optInRightPaddingStyles : ''
+            ]), children: leading }));
+    }
+    columnsTemplateBuilder.push('1fr'); // Text area always gets 1 full fraction of allotted space
+    let lastCell = null;
+    if (metadata || trailing || action || navigation) {
+        columnsTemplateBuilder.push('auto');
+        lastCell = (jsx("div", { className: classNames([styles.topAlignStyles]), children: jsxs("div", { className: classNames([styles.optInExtraStyles, styles.flexRowStyles]), children: [jsx("div", { className: classNames([
+                            styles.centerVerticalStyles,
+                            metadata ? styles.leftPaddingStyles : ''
+                        ]), children: metadata }), jsx("div", { className: classNames([
+                            styles.centerVerticalStyles,
+                            trailing ? styles.leftPaddingStyles : ''
+                        ]), children: trailing }), jsx("div", { className: classNames([
+                            styles.centerVerticalStyles,
+                            action ? styles.actionStyles : ''
+                        ]), children: action })] }) }));
+    }
+    const columnsTemplate = columnsTemplateBuilder.join(' ');
+    const hasSecondRow = quaternary || navigation ? true : false;
+    return { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow };
+}
+
+export { ListItemLayout as L };
+//# sourceMappingURL=ListItemLayout-af86b17d.js.map

package/es/ListItemLayout-af86b17d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemLayout-af86b17d.js","sources":["../../src/UNSAFE_ListItemLayout/ListItemLayout.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, JSX } from 'preact';\nimport { Grid } from '../UNSAFE_Grid';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { styles } from './themes/ListItemLayoutStyles.css';\n\ntype IntrinsicProps = Pick<JSX.HTMLAttributes<HTMLDivElement>, 'children'>;\ntype Props = {\n  children?: ComponentChildren;\n  /**\n   * The centermost element that should display more important data.\n   */\n  primary?: ComponentChildren;\n  /**\n   * Render Selector component in the leftmost column of the grid.\n   */\n  selector?: ComponentChildren;\n  /**\n   * Visual element to the left of the primary section.\n   * Supports image, avatar, badge, initials, or icon.\n   */\n  leading?: ComponentChildren;\n  /**\n   * A section that is rendered above the primary line.\n   */\n  overline?: ComponentChildren;\n  /**\n   * A section below the primary line.\n   */\n  secondary?: ComponentChildren;\n  /**\n   * Another section below secondary.\n   */\n  tertiary?: ComponentChildren;\n  /**\n   * Provides information about other data.\n   * Some examples of basic metadata are author, date created, date modified, file size, abbreviations, etc.\n   */\n  metadata?: ComponentChildren;\n  /**\n   * Visual element to the right of the primary section and metadata.\n   * Example components are image, avatar, badge, initials, or icon.\n   */\n  trailing?: ComponentChildren;\n  /**\n   * The action prop displays either one primary action or one or more secondary actions.\n   * A common example is using Toolbar.\n   */\n  action?: ComponentChildren;\n  /**\n   * Additional section separated with a space between itself and tertiary.\n   */\n  quaternary?: ComponentChildren;\n  /**\n   * Navigation should normally be used for linking away from the layout.\n   */\n  navigation?: ComponentChildren;\n  /**\n   * Aligns content to top of cell and moves overline to a row above primary.\n   */\n  verticalAlignment?: 'middle' | 'top';\n} & IntrinsicProps;\n\n// TODO: revisit idea of negative margin when selector has a proper API for handling spacing\n// Jira: JET-54543\n/**\n * A ListItemLayout component represents a layout used for list view item elements.\n */\nexport function ListItemLayout({\n  children,\n  selector,\n  leading,\n  primary,\n  secondary,\n  tertiary,\n  overline,\n  metadata,\n  trailing,\n  action,\n  quaternary,\n  navigation,\n  verticalAlignment = 'middle'\n}: Props) {\n  // generate grid skeleton, adding cells based on which props are defined\n  const { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow } =\n    verticalAlignment === 'top'\n      ? getOptInColumnsTemplate(\n          selector,\n          leading,\n          metadata,\n          trailing,\n          action,\n          quaternary,\n          navigation\n        )\n      : getColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation);\n\n  // extra row placed before the other rows, only used with top alignment\n  const topRow =\n    overline && verticalAlignment === 'top'\n      ? [\n          firstCell && <span> </span>,\n          secondCell && <span> </span>,\n          <div className={styles.topRowStyles}>{overline}</div>,\n          lastCell && <span> </span>\n        ]\n      : null;\n\n  // if ListItemLayout component has a child (ListItemTextLayout) then render that instead of individual props\n  const textArea = children ? (\n    <div className={styles.childrenStyles}>{children}</div>\n  ) : (\n    <div className={styles.flexColumnStyles}>\n      {verticalAlignment === 'top' ? null : <div>{overline}</div>}\n      <div>{primary}</div>\n      <div>{secondary}</div>\n      <div>{tertiary}</div>\n    </div>\n  );\n\n  // a second row is needed when quaternary or navigation are defined\n  const secondRow = hasSecondRow\n    ? [\n        firstCell && <span> </span>,\n        secondCell && <span> </span>,\n        <div\n          className={classNames([\n            verticalAlignment === 'top' ? styles.optInTopPaddingStyles : '',\n            styles.rowAlignStyles\n          ])}>\n          {quaternary}\n        </div>,\n        lastCell && (\n          <div\n            className={classNames([\n              verticalAlignment === 'top' ? styles.optInTopPaddingStyles : '',\n              styles.endJustifyStyles\n            ])}>\n            {navigation}\n          </div>\n        )\n      ]\n    : null;\n\n  return (\n    <Grid gap={verticalAlignment === 'top' ? '0x' : '4x'} gridTemplateColumns={columnsTemplate}>\n      {topRow}\n      {firstCell}\n      {secondCell}\n      <div className={styles.centerVerticalStyles}>{textArea}</div>\n      {lastCell}\n      {secondRow}\n    </Grid>\n  );\n}\n\nfunction getColumnsTemplate(\n  selector: ComponentChildren,\n  leading: ComponentChildren,\n  metadata: ComponentChildren,\n  trailing: ComponentChildren,\n  action: ComponentChildren,\n  quaternary: ComponentChildren,\n  navigation: ComponentChildren\n) {\n  const columnsTemplateBuilder = [];\n\n  let firstCell = null;\n  if (selector) {\n    columnsTemplateBuilder.push('auto');\n    firstCell = <div className={styles.selectorStyles}>{selector}</div>;\n  }\n\n  let secondCell = null;\n  if (leading) {\n    columnsTemplateBuilder.push('auto');\n    secondCell = (\n      <div className={classNames([styles.centerVerticalStyles, styles.displayFlexStyle])}>\n        {leading}\n      </div>\n    );\n  }\n\n  columnsTemplateBuilder.push('1fr'); // Text area always gets 1 full fraction of allotted space\n\n  let lastCell = null;\n  if (metadata || trailing || action || navigation) {\n    columnsTemplateBuilder.push('auto');\n    lastCell = (\n      <div className={styles.flexRowStyles}>\n        <div\n          className={classNames([\n            styles.centerVerticalStyles,\n            metadata ? styles.leftPaddingStyles : ''\n          ])}>\n          {metadata}\n        </div>\n        <div\n          className={classNames([\n            styles.centerVerticalStyles,\n            trailing ? styles.leftPaddingStyles : ''\n          ])}>\n          {trailing}\n        </div>\n        <div\n          className={classNames([styles.centerVerticalStyles, action ? styles.actionStyles : ''])}>\n          {action}\n        </div>\n      </div>\n    );\n  }\n\n  const columnsTemplate = columnsTemplateBuilder.join(' ');\n  const hasSecondRow = quaternary || navigation ? true : false;\n\n  return { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow };\n}\n\nfunction getOptInColumnsTemplate(\n  selector: ComponentChildren,\n  leading: ComponentChildren,\n  metadata: ComponentChildren,\n  trailing: ComponentChildren,\n  action: ComponentChildren,\n  quaternary: ComponentChildren,\n  navigation: ComponentChildren\n) {\n  const columnsTemplateBuilder = [];\n\n  let firstCell = null;\n  if (selector) {\n    columnsTemplateBuilder.push('auto');\n    firstCell = <div className={styles.optInSelectorStyles}>{selector}</div>;\n  }\n\n  let secondCell = null;\n  if (selector || leading) {\n    columnsTemplateBuilder.push('auto');\n    secondCell = (\n      <div\n        className={classNames([\n          selector ? styles.leftPaddingStyles : '',\n          styles.topAlignStyles,\n          leading ? styles.optInRightPaddingStyles : ''\n        ])}>\n        {leading}\n      </div>\n    );\n  }\n\n  columnsTemplateBuilder.push('1fr'); // Text area always gets 1 full fraction of allotted space\n\n  let lastCell = null;\n  if (metadata || trailing || action || navigation) {\n    columnsTemplateBuilder.push('auto');\n    lastCell = (\n      <div className={classNames([styles.topAlignStyles])}>\n        <div className={classNames([styles.optInExtraStyles, styles.flexRowStyles])}>\n          <div\n            className={classNames([\n              styles.centerVerticalStyles,\n              metadata ? styles.leftPaddingStyles : ''\n            ])}>\n            {metadata}\n          </div>\n          <div\n            className={classNames([\n              styles.centerVerticalStyles,\n              trailing ? styles.leftPaddingStyles : ''\n            ])}>\n            {trailing}\n          </div>\n          <div\n            className={classNames([\n              styles.centerVerticalStyles,\n              action ? styles.actionStyles : ''\n            ])}>\n            {action}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  const columnsTemplate = columnsTemplateBuilder.join(' ');\n  const hasSecondRow = quaternary || navigation ? true : false;\n\n  return { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow };\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAqEA;AACA;AACA;;AAEG;AACa,SAAA,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,UAAU,EACV,UAAU,EACV,iBAAiB,GAAG,QAAQ,EACtB,EAAA;;AAEN,IAAA,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,GACtE,iBAAiB,KAAK,KAAK;AACzB,UAAE,uBAAuB,CACrB,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,UAAU,EACV,UAAU,CACX;AACH,UAAE,kBAAkB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;;AAGhG,IAAA,MAAM,MAAM,GACV,QAAQ,IAAI,iBAAiB,KAAK,KAAK;AACrC,UAAE;AACE,YAAA,SAAS,IAAIA,GAAc,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,GAAA,EAAA,CAAA;AAC3B,YAAA,UAAU,IAAIA,GAAc,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,GAAA,EAAA,CAAA;AAC5B,YAAAA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAO,CAAA;AACrD,YAAA,QAAQ,IAAIA,GAAc,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,GAAA,EAAA,CAAA;AAC3B,SAAA;UACD,IAAI,CAAC;;IAGX,MAAM,QAAQ,GAAG,QAAQ,IACvBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAG,QAAA,EAAA,QAAQ,EAAO,CAAA,KAEvDC,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,gBAAgB,aACpC,iBAAiB,KAAK,KAAK,GAAG,IAAI,GAAGD,GAAM,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,QAAQ,EAAO,CAAA,EAC3DA,uBAAM,OAAO,EAAA,CAAO,EACpBA,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,SAAS,EAAA,CAAO,EACtBA,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,QAAQ,EAAA,CAAO,CACjB,EAAA,CAAA,CACP,CAAC;;IAGF,MAAM,SAAS,GAAG,YAAY;AAC5B,UAAE;AACE,YAAA,SAAS,IAAIA,GAAc,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,GAAA,EAAA,CAAA;AAC3B,YAAA,UAAU,IAAIA,GAAc,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,GAAA,EAAA,CAAA;YAC5BA,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC;oBACpB,iBAAiB,KAAK,KAAK,GAAG,MAAM,CAAC,qBAAqB,GAAG,EAAE;AAC/D,oBAAA,MAAM,CAAC,cAAc;iBACtB,CAAC,EAAA,QAAA,EACD,UAAU,EACP,CAAA;AACN,YAAA,QAAQ,KACNA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC;oBACpB,iBAAiB,KAAK,KAAK,GAAG,MAAM,CAAC,qBAAqB,GAAG,EAAE;AAC/D,oBAAA,MAAM,CAAC,gBAAgB;iBACxB,CAAC,EAAA,QAAA,EACD,UAAU,EAAA,CACP,CACP;AACF,SAAA;UACD,IAAI,CAAC;AAET,IAAA,QACEC,IAAC,CAAA,IAAI,IAAC,GAAG,EAAE,iBAAiB,KAAK,KAAK,GAAG,IAAI,GAAG,IAAI,EAAE,mBAAmB,EAAE,eAAe,aACvF,MAAM,EACN,SAAS,EACT,UAAU,EACXD,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,oBAAoB,EAAG,QAAA,EAAA,QAAQ,GAAO,EAC5D,QAAQ,EACR,SAAS,CAAA,EAAA,CACL,EACP;AACJ,CAAC;AAED,SAAS,kBAAkB,CACzB,QAA2B,EAC3B,OAA0B,EAC1B,QAA2B,EAC3B,QAA2B,EAC3B,MAAyB,EACzB,UAA6B,EAC7B,UAA6B,EAAA;IAE7B,MAAM,sBAAsB,GAAG,EAAE,CAAC;IAElC,IAAI,SAAS,GAAG,IAAI,CAAC;IACrB,IAAI,QAAQ,EAAE;AACZ,QAAA,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpC,SAAS,GAAGA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAC;KACrE;IAED,IAAI,UAAU,GAAG,IAAI,CAAC;IACtB,IAAI,OAAO,EAAE;AACX,QAAA,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpC,UAAU,IACRA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAC/E,QAAA,EAAA,OAAO,EACJ,CAAA,CACP,CAAC;KACH;AAED,IAAA,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEnC,IAAI,QAAQ,GAAG,IAAI,CAAC;IACpB,IAAI,QAAQ,IAAI,QAAQ,IAAI,MAAM,IAAI,UAAU,EAAE;AAChD,QAAA,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACpC,QAAA,QAAQ,IACNC,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAClC,QAAA,EAAA,CAAAD,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC;AACpB,wBAAA,MAAM,CAAC,oBAAoB;wBAC3B,QAAQ,GAAG,MAAM,CAAC,iBAAiB,GAAG,EAAE;qBACzC,CAAC,EAAA,QAAA,EACD,QAAQ,EACL,CAAA,EACNA,aACE,SAAS,EAAE,UAAU,CAAC;AACpB,wBAAA,MAAM,CAAC,oBAAoB;wBAC3B,QAAQ,GAAG,MAAM,CAAC,iBAAiB,GAAG,EAAE;AACzC,qBAAA,CAAC,EACD,QAAA,EAAA,QAAQ,EACL,CAAA,EACNA,aACE,SAAS,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,oBAAoB,EAAE,MAAM,GAAG,MAAM,CAAC,YAAY,GAAG,EAAE,CAAC,CAAC,EACtF,QAAA,EAAA,MAAM,EACH,CAAA,CAAA,EAAA,CACF,CACP,CAAC;KACH;IAED,MAAM,eAAe,GAAG,sBAAsB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzD,IAAA,MAAM,YAAY,GAAG,UAAU,IAAI,UAAU,GAAG,IAAI,GAAG,KAAK,CAAC;IAE7D,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC5E,CAAC;AAED,SAAS,uBAAuB,CAC9B,QAA2B,EAC3B,OAA0B,EAC1B,QAA2B,EAC3B,QAA2B,EAC3B,MAAyB,EACzB,UAA6B,EAC7B,UAA6B,EAAA;IAE7B,MAAM,sBAAsB,GAAG,EAAE,CAAC;IAElC,IAAI,SAAS,GAAG,IAAI,CAAC;IACrB,IAAI,QAAQ,EAAE;AACZ,QAAA,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpC,SAAS,GAAGA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,mBAAmB,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAC;KAC1E;IAED,IAAI,UAAU,GAAG,IAAI,CAAC;AACtB,IAAA,IAAI,QAAQ,IAAI,OAAO,EAAE;AACvB,QAAA,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACpC,QAAA,UAAU,IACRA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC;gBACpB,QAAQ,GAAG,MAAM,CAAC,iBAAiB,GAAG,EAAE;AACxC,gBAAA,MAAM,CAAC,cAAc;gBACrB,OAAO,GAAG,MAAM,CAAC,uBAAuB,GAAG,EAAE;AAC9C,aAAA,CAAC,EACD,QAAA,EAAA,OAAO,EACJ,CAAA,CACP,CAAC;KACH;AAED,IAAA,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEnC,IAAI,QAAQ,GAAG,IAAI,CAAC;IACpB,IAAI,QAAQ,IAAI,QAAQ,IAAI,MAAM,IAAI,UAAU,EAAE;AAChD,QAAA,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACpC,QAAA,QAAQ,IACNA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAA,QAAA,EACjDC,cAAK,SAAS,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,EACzE,QAAA,EAAA,CAAAD,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC;AACpB,4BAAA,MAAM,CAAC,oBAAoB;4BAC3B,QAAQ,GAAG,MAAM,CAAC,iBAAiB,GAAG,EAAE;yBACzC,CAAC,EAAA,QAAA,EACD,QAAQ,EACL,CAAA,EACNA,aACE,SAAS,EAAE,UAAU,CAAC;AACpB,4BAAA,MAAM,CAAC,oBAAoB;4BAC3B,QAAQ,GAAG,MAAM,CAAC,iBAAiB,GAAG,EAAE;yBACzC,CAAC,EAAA,QAAA,EACD,QAAQ,EACL,CAAA,EACNA,aACE,SAAS,EAAE,UAAU,CAAC;AACpB,4BAAA,MAAM,CAAC,oBAAoB;4BAC3B,MAAM,GAAG,MAAM,CAAC,YAAY,GAAG,EAAE;AAClC,yBAAA,CAAC,YACD,MAAM,EAAA,CACH,CACF,EAAA,CAAA,EAAA,CACF,CACP,CAAC;KACH;IAED,MAAM,eAAe,GAAG,sBAAsB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzD,IAAA,MAAM,YAAY,GAAG,UAAU,IAAI,UAAU,GAAG,IAAI,GAAG,KAAK,CAAC;IAE7D,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC5E;;;;"}

package/es/ListView-be2e2736.js

@@ -2,13 +2,13 @@
 import { jsxs, Fragment, jsx } from 'preact/jsx-runtime';
 import { memo, forwardRef } from 'preact/compat';
 import { useRef, useCallback, useState, useEffect, useImperativeHandle, useLayoutEffect } from 'preact/hooks';
-import './LayerHost-e6402730.js';
+import './LayerHost-8b98d97d.js';
 import './DragAndDropStyles.styles.css';
 import './ReorderableItemStyles.styles.css';
 import { R as ReorderableContext } from './ReorderableContext-0daeea89.js';
 import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
 import { a as getKey, I as ITEM_SELECTOR, f as findElementByKey, h as dragToScroll, k as keyExtractor } from './collectionUtils-8a9d80a3.js';
-import { a as useReorderableItem, u as useReorderable } from './useReorderableItem-22ea4c46.js';
+import { a as useReorderableItem, u as useReorderable } from './useReorderableItem-99a9dbce.js';
 import { c as classNames } from './classNames-4e12b00d.js';
 import { styles } from './UNSAFE_ListView/themes/ListViewStyles.css.js';
 import { i as isKeyDefined } from './keys-49c92dbb.js';
@@ -21,7 +21,7 @@ import './logger-c92f309c.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-768450a7.js';
+import './tooltipUtils-35655bd6.js';
 import './IconStyle.styles.css';
 import './SelectMenuGroupContext-b56cf5d4.js';
 import './UNSAFE_Separator/themes/SeparatorStyles.css.js';

package/es/LiveRegion-c7bf2f21.js

@@ -0,0 +1,39 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { useState, useCallback, useEffect } from 'preact/hooks';
+import './LiveRegionStyles.styles.css';
+import { u as useTestId } from './useTestId-474ac6ca.js';
+
+var offScreenStyle = 'LiveRegionStyles_offScreenStyle__1uvpdtw0';
+
+/**
+ * A helper component that renders an aria-live region
+ *
+ * TODO: Create a more centralized component that can handle aria-live region for
+ * the whole application and use context api to communicate
+ */
+function LiveRegion({ testId, atomic = 'false', children = '', timeout = 100, type = 'polite' }) {
+    const ariaLiveText = useLiveText(children, timeout);
+    const testIdProps = useTestId(testId);
+    return (jsx("span", { "aria-live": type, "aria-atomic": atomic, class: offScreenStyle, ...testIdProps, children: ariaLiveText }));
+}
+/**
+ * A custom hook for handling the aria-live region
+ *
+ * @param text The aria-live text to use
+ * @param timeout The timeout for setting the aria-live text async
+ * @returns The aria-live text
+ */
+function useLiveText(text, timeout) {
+    const [liveText, setLiveText] = useState('');
+    const updateText = useCallback(() => setLiveText(text), [text]);
+    const updateTextAsync = useCallback(() => setTimeout(updateText, timeout), [updateText, timeout]);
+    useEffect(() => {
+        const timeoutId = updateTextAsync();
+        return () => clearTimeout(timeoutId);
+    }, [updateTextAsync]);
+    return liveText;
+}
+
+export { LiveRegion as L };
+//# sourceMappingURL=LiveRegion-c7bf2f21.js.map

package/es/LiveRegion-c7bf2f21.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion-c7bf2f21.js","sources":["../../src/UNSAFE_LiveRegion/LiveRegion.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'preact/hooks';\nimport { offScreenStyle } from './LiveRegionStyles.css';\nimport { TestIdProps, useTestId } from '#hooks/UNSAFE_useTestId';\n\ntype Props = TestIdProps & {\n  /**\n   * Whether this live region is atomic\n   */\n  atomic?: 'true' | 'false';\n\n  /**\n   * The text to be read out in the live region\n   */\n  children?: string;\n\n  /**\n   * Timeout for updating the text\n   */\n  timeout?: number;\n\n  /**\n   * The value for the aria-live attribute\n   */\n  type?: 'assertive' | 'polite' | 'off';\n};\n\n/**\n * A helper component that renders an aria-live region\n *\n * TODO: Create a more centralized component that can handle aria-live region for\n * the whole application and use context api to communicate\n */\nfunction LiveRegion({\n  testId,\n  atomic = 'false',\n  children = '',\n  timeout = 100,\n  type = 'polite'\n}: Props) {\n  const ariaLiveText = useLiveText(children, timeout);\n  const testIdProps = useTestId(testId);\n\n  return (\n    <span aria-live={type} aria-atomic={atomic} class={offScreenStyle} {...testIdProps}>\n      {ariaLiveText}\n    </span>\n  );\n}\n\n/**\n * A custom hook for handling the aria-live region\n *\n * @param text The aria-live text to use\n * @param timeout The timeout for setting the aria-live text async\n * @returns The aria-live text\n */\nfunction useLiveText(text: string, timeout: number) {\n  const [liveText, setLiveText] = useState('');\n  const updateText = useCallback(() => setLiveText(text), [text]);\n  const updateTextAsync = useCallback(() => setTimeout(updateText, timeout), [updateText, timeout]);\n\n  useEffect(() => {\n    const timeoutId = updateTextAsync();\n\n    return () => clearTimeout(timeoutId);\n  }, [updateTextAsync]);\n\n  return liveText;\n}\n\nexport { LiveRegion };\n"],"names":["_jsx"],"mappings":";;;;;;;;AA0BA;;;;;AAKG;AACH,SAAS,UAAU,CAAC,EAClB,MAAM,EACN,MAAM,GAAG,OAAO,EAChB,QAAQ,GAAG,EAAE,EACb,OAAO,GAAG,GAAG,EACb,IAAI,GAAG,QAAQ,EACT,EAAA;IACN,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AACpD,IAAA,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAEtC,IAAA,QACEA,GAAA,CAAA,MAAA,EAAA,EAAA,WAAA,EAAiB,IAAI,EAAA,aAAA,EAAe,MAAM,EAAE,KAAK,EAAE,cAAc,KAAM,WAAW,EAAA,QAAA,EAC/E,YAAY,EAAA,CACR,EACP;AACJ,CAAC;AAED;;;;;;AAMG;AACH,SAAS,WAAW,CAAC,IAAY,EAAE,OAAe,EAAA;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAC7C,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAChE,MAAM,eAAe,GAAG,WAAW,CAAC,MAAM,UAAU,CAAC,UAAU,EAAE,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAElG,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;AAEpC,QAAA,OAAO,MAAM,YAAY,CAAC,SAAS,CAAC,CAAC;AACvC,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;AAEtB,IAAA,OAAO,QAAQ,CAAC;AAClB;;;;"}

package/es/MaxLengthLiveRegion-d790e55c.js

@@ -0,0 +1,23 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { u as useDebounce } from './useDebounce-fa5a80e9.js';
+import { u as useTranslationBundle } from './useTranslationBundle-2df40edf.js';
+import { L as LiveRegion } from './LiveRegion-c7bf2f21.js';
+
+const MAX_LENGTH_UPDATE_DELAY = 500;
+function MaxLengthLiveRegion({ maxLength, testId, valueLength = 0 }) {
+    // Comment copied from InputBase.js in Big JET:
+    // Only update the aria-live div when the user has paused for more than
+    // 500 milliseconds. That way, we avoid queued up aria-live messages which
+    // would be annoying and not helpful. The 500ms was agreed upon in the
+    // accessibility review meeting.
+    const debouncedRemainingChars = useDebounce(maxLength - valueLength, MAX_LENGTH_UPDATE_DELAY);
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const remainingCharsTranslatedString = translations.formControl_maxLengthRemaining({
+        CHARACTER_COUNT: `${debouncedRemainingChars}`
+    });
+    return jsx(LiveRegion, { testId: testId, children: remainingCharsTranslatedString });
+}
+
+export { MaxLengthLiveRegion as M };
+//# sourceMappingURL=MaxLengthLiveRegion-d790e55c.js.map

package/es/MaxLengthLiveRegion-d790e55c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaxLengthLiveRegion-d790e55c.js","sources":["../../src/UNSAFE_TextField/MaxLengthLiveRegion.tsx"],"sourcesContent":["import { useDebounce } from '../hooks/UNSAFE_useDebounce';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport { LiveRegion } from '../UNSAFE_LiveRegion';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\n\ntype Props = TestIdProps & {\n  maxLength: number;\n  valueLength?: number;\n};\n\nconst MAX_LENGTH_UPDATE_DELAY = 500;\n\nexport function MaxLengthLiveRegion({ maxLength, testId, valueLength = 0 }: Props) {\n  // Comment copied from InputBase.js in Big JET:\n  // Only update the aria-live div when the user has paused for more than\n  // 500 milliseconds. That way, we avoid queued up aria-live messages which\n  // would be annoying and not helpful. The 500ms was agreed upon in the\n  // accessibility review meeting.\n  const debouncedRemainingChars = useDebounce(maxLength - valueLength, MAX_LENGTH_UPDATE_DELAY);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const remainingCharsTranslatedString = translations.formControl_maxLengthRemaining({\n    CHARACTER_COUNT: `${debouncedRemainingChars}`\n  });\n\n  return <LiveRegion testId={testId}>{remainingCharsTranslatedString}</LiveRegion>;\n}\n"],"names":["_jsx"],"mappings":";;;;;;AAWA,MAAM,uBAAuB,GAAG,GAAG,CAAC;AAE9B,SAAU,mBAAmB,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,GAAG,CAAC,EAAS,EAAA;;;;;;IAM/E,MAAM,uBAAuB,GAAG,WAAW,CAAC,SAAS,GAAG,WAAW,EAAE,uBAAuB,CAAC,CAAC;AAC9F,IAAA,MAAM,YAAY,GAAG,oBAAoB,CAAa,0BAA0B,CAAC,CAAC;AAClF,IAAA,MAAM,8BAA8B,GAAG,YAAY,CAAC,8BAA8B,CAAC;QACjF,eAAe,EAAE,CAAG,EAAA,uBAAuB,CAAE,CAAA;AAC9C,KAAA,CAAC,CAAC;IAEH,OAAOA,GAAA,CAAC,UAAU,EAAC,EAAA,MAAM,EAAE,MAAM,EAAA,QAAA,EAAG,8BAA8B,EAAA,CAAc,CAAC;AACnF;;;;"}

package/es/Menu-a5bf756f.js

@@ -1,19 +1,19 @@
 /* @oracle/oraclejet-preact: undefined */
 import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
 import { forwardRef, useCallback as useCallback$1 } from 'preact/compat';
-import { D as Dropdown } from './Dropdown-60833900.js';
+import { D as Dropdown } from './Dropdown-698afbc6.js';
 import { useMemo, useCallback, useRef, useState, useEffect } from 'preact/hooks';
 import { m as mergeProps } from './mergeProps-88ea8306.js';
 import { c as classNames } from './classNames-4e12b00d.js';
-import { u as useUser } from './useUser-1cd223a9.js';
+import { u as useUser } from './useUser-6b2e271a.js';
 import { u as useMenuContext, g as getPrevNext, a as getNVisible, b as getMenuPointerDown, c as getMenuContainerMouseLeave, d as getMenuContainerFocusMethods, e as getCloseSubmenuEvent, f as getKeyboardCloseProps, M as MenuContainerContext, k as keyElemExtractor, h as getLastVisible, i as getIsMobile, j as MenuContext } from './MenuItem-54015ca3.js';
 import { menuStyles } from './UNSAFE_Menu/themes/MenuStyles.css.js';
-import { u as useTestId } from './useTestId-9b504481.js';
+import { u as useTestId } from './useTestId-474ac6ca.js';
 import { dropdownMenuStyles } from './UNSAFE_Menu/themes/DropdownMenuStyles.css.js';
-import { u as useSheetSwipe } from './Sheet-da412baf.js';
+import { u as useSheetSwipe } from './Sheet-924cfdab.js';
 import { u as useModal } from './useModal-953082f2.js';
-import { L as Layer } from './Layer-446bf21e.js';
-import './LayerHost-e6402730.js';
+import { L as Layer } from './Layer-1eb18747.js';
+import './LayerHost-8b98d97d.js';
 import { sheetMenuStyles } from './UNSAFE_Menu/themes/SheetMenuStyles.css.js';
 
 /**

package/es/MenuButton-e012a909.js

@@ -0,0 +1,61 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { B as ButtonLabelLayout } from './ButtonLabelLayout-e9f8cbc0.js';
+import { S as SvgChevronDown } from './ChevronDown-1b2ca616.js';
+import { M as Menu } from './Menu-a5bf756f.js';
+import './MenuItem-54015ca3.js';
+import { useRef, useImperativeHandle } from 'preact/hooks';
+import { Fragment } from 'preact';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import './logger-c92f309c.js';
+import './LayerHost-8b98d97d.js';
+import { forwardRef } from 'preact/compat';
+import './TooltipContentStyles.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
+import './tooltipUtils-35655bd6.js';
+import './IconStyle.styles.css';
+import './SelectMenuGroupContext-b56cf5d4.js';
+import './UNSAFE_Separator/themes/SeparatorStyles.css.js';
+import './MenuSeparatorStyles.styles.css';
+import './UNSAFE_Menu/themes/redwood/MenuSeparatorBaseTheme.styles.css';
+import './UNSAFE_Menu/themes/redwood/MenuSeparatorVariants.css.js';
+import { u as useMenuAction } from './useMenuAction-1179e27b.js';
+import { B as BaseButton } from './BaseButton-61f6baa8.js';
+
+/**
+ * A MenuButton is a combined action and menu button.
+ */
+const MenuButton = forwardRef(({ children, label, suffix, variant = 'outlined', isDisabled = false, isMenuOpen = false, onToggleMenu, size = 'md', type: buttonType = 'button', width, icon, testId, 'aria-describedby': ariaDescribedBy, onBlur, onFocus, onMouseEnter, onMouseLeave, onTouchEnd, onTouchStart }, ref) => {
+    const buttonRef = useRef(null);
+    useImperativeHandle(ref, () => buttonRef.current, [buttonRef]);
+    const { triggerProps, menuProps } = useMenuAction({
+        isDisabled: isDisabled,
+        onToggleMenu: onToggleMenu,
+        isMenuOpen: isMenuOpen,
+        anchorRef: buttonRef
+    });
+    const elementDetails = {
+        type: 'button',
+        buttonType: buttonType
+    };
+    const globalEventProps = {
+        onBlur,
+        onFocus,
+        onMouseEnter,
+        onMouseLeave,
+        onTouchEnd,
+        onTouchStart
+    };
+    const rootButton = (jsx(BaseButton, { ...mergeProps(triggerProps, globalEventProps), styling: isMenuOpen ? ['min', 'active'] : ['min'], elementDetails: elementDetails, isDisabled: isDisabled, variant: variant, width: width, size: size, ref: buttonRef, testId: testId, "aria-label": suffix ? `${label} ${suffix}` : label, "aria-describedby": ariaDescribedBy, children: jsx(ButtonLabelLayout, { display: 'all', suffix: suffix, startIcon: icon, endIcon: jsx(SvgChevronDown, {}), size: size, children: label }) }));
+    /*TODO: Remove this hardcoded offsetValue so we have dropdown offset only set on one single place.
+     Could be done via menu props or having a dropdownMenu component. JET-60595*/
+    /*TODO: Once menu expose a prop to set min width we would need to calculate offset width of button
+      so we set the correct min width since dropdown menus are 200px but if triggered element width is
+      bigger should be that size. JET-60745 */
+    return isDisabled ? (rootButton) : (jsxs(Fragment, { children: [rootButton, jsx(Menu, { ...menuProps, "aria-label": label, offsetValue: 4, children: children })] }));
+});
+MenuButton.displayName = 'MenuButton';
+
+export { MenuButton as M };
+//# sourceMappingURL=MenuButton-e012a909.js.map