@oracle/oraclejet-preact 18.1.7 → 18.1.8

package/es/StyledLabelValueLayout-d4881d3b.js

@@ -0,0 +1,18 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsxs, jsx } from 'preact/jsx-runtime';
+import { F as Flex } from './Flex-ce31b351.js';
+import './LabelValueLayoutStyles.styles.css';
+
+var labelInnerStyles = {base:'LabelValueLayoutStyles_labelInnerStyles_base__z3rxc55',start:'LabelValueLayoutStyles_labelInnerStyles_start__z3rxc56',startNotPureReadonly:'LabelValueLayoutStyles_labelInnerStyles_startNotPureReadonly__z3rxc57',startWithoutTopFormComponentWrapperUA:'LabelValueLayoutStyles_labelInnerStyles_startWithoutTopFormComponentWrapperUA__z3rxc58',insideFormComponentWrapper:'LabelValueLayoutStyles_labelInnerStyles_insideFormComponentWrapper__z3rxc59',noWrap:'LabelValueLayoutStyles_labelInnerStyles_noWrap__z3rxc5a'};
+var labelSlotStyles = {base:'LabelValueLayoutStyles_labelSlotStyles_base__z3rxc50',start:'LabelValueLayoutStyles_labelSlotStyles_start__z3rxc51',top:'LabelValueLayoutStyles_labelSlotStyles_top__z3rxc52',topAndTopUA:'LabelValueLayoutStyles_labelSlotStyles_topAndTopUA__z3rxc53',topPureReadonly:'LabelValueLayoutStyles_labelSlotStyles_topPureReadonly__z3rxc54'};
+var valueSlotStyles = 'LabelValueLayoutStyles_valueSlotStyles__z3rxc5b';
+
+/**
+ * StyledLabelValueLayout is a styled layout component for displaying a label and its corresponding value.
+ */
+const StyledLabelValueLayout = ({ flexAlign, labelStyleClasses, labelStyles, labelInnerClasses, label, valueStyles, children }) => {
+    return (jsxs(Flex, { wrap: "wrap", align: flexAlign, children: [jsx("div", { class: labelStyleClasses, style: labelStyles, children: jsx("div", { class: labelInnerClasses, children: label }) }), jsx("div", { class: valueSlotStyles, style: valueStyles, children: children })] }));
+};
+
+export { StyledLabelValueLayout as S, labelInnerStyles as a, labelSlotStyles as l };
+//# sourceMappingURL=StyledLabelValueLayout-d4881d3b.js.map

package/es/StyledLabelValueLayout-d4881d3b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledLabelValueLayout-d4881d3b.js","sources":["../../src/UNSAFE_LabelValueLayout/StyledLabelValueLayout.tsx"],"sourcesContent":["import { Flex } from '#UNSAFE_Flex';\nimport { ComponentChildren, JSX } from 'preact';\nimport { valueSlotStyles } from './LabelValueLayoutStyles.css';\n\ntype Props = {\n  flexAlign: 'stretch' | 'start';\n  labelStyleClasses?: string;\n  labelStyles?: JSX.CSSProperties;\n  labelInnerClasses?: string;\n  label: ComponentChildren;\n  valueStyles?: JSX.CSSProperties;\n  children?: ComponentChildren;\n};\n\n/**\n * StyledLabelValueLayout is a styled layout component for displaying a label and its corresponding value.\n */\nexport const StyledLabelValueLayout = ({\n  flexAlign,\n  labelStyleClasses,\n  labelStyles,\n  labelInnerClasses,\n  label,\n  valueStyles,\n  children\n}: Props) => {\n  return (\n    <Flex wrap=\"wrap\" align={flexAlign}>\n      <div class={labelStyleClasses} style={labelStyles}>\n        <div class={labelInnerClasses}>{label}</div>\n      </div>\n      <div class={valueSlotStyles} style={valueStyles}>\n        {children}\n      </div>\n    </Flex>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAcA;;AAEG;MACU,sBAAsB,GAAG,CAAC,EACrC,SAAS,EACT,iBAAiB,EACjB,WAAW,EACX,iBAAiB,EACjB,KAAK,EACL,WAAW,EACX,QAAQ,EACF,KAAI;AACV,IAAA,QACEA,IAAC,CAAA,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,EAAA,QAAA,EAAA,CAChCC,aAAK,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,WAAW,EAAA,QAAA,EAC/CA,aAAK,KAAK,EAAE,iBAAiB,EAAG,QAAA,EAAA,KAAK,GAAO,EACxC,CAAA,EACNA,aAAK,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,WAAW,EAAA,QAAA,EAC5C,QAAQ,EACL,CAAA,CAAA,EAAA,CACD,EACP;AACJ;;;;"}

package/es/StyledTextField-6d6dd43e.js

@@ -4,7 +4,7 @@ import { LabelRedwoodTheme } from './UNSAFE_Label/themes/redwood/LabelTheme.js';
 import { L as LabelValueLayout } from './LabelValueLayout-1db91391.js';
 import { SkeletonRedwoodTheme } from './UNSAFE_Skeleton/themes/redwood/SkeletonTheme.js';
 import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
-import { u as useTestId } from './useTestId-474ac6ca.js';
+import { u as useTestId } from './useTestId-9b504481.js';
 import { c as classNames } from './classNames-4e12b00d.js';
 import { l as layoutSpanStyles } from './LayoutStyles.css-8a60c28c.js';
 import { forwardRef } from 'preact/compat';
@@ -12,10 +12,10 @@ import './FormContext-4d71f9c7.js';
 import { u as useFormContext } from './useFormContext-875cacd7.js';
 import './FormFieldContext-68eb5946.js';
 import { u as useFormFieldContext } from './useFormFieldContext-626574fd.js';
-import { F as Flex } from './Flex-2d9ebee9.js';
+import { F as Flex } from './Flex-ce31b351.js';
 import './InputGroupContext-20bdbd6e.js';
 import { u as useInputGroupContext } from './useInputGroupContext-1d19411e.js';
-import { u as useUser } from './useUser-6b2e271a.js';
+import { u as useUser } from './useUser-1cd223a9.js';
 import { TextFieldRedwoodTheme } from './UNSAFE_TextField/themes/redwood/TextFieldTheme.js';
 import { ReadonlyTextFieldRedwoodTheme } from './UNSAFE_TextField/themes/redwood/ReadonlyTextFieldTheme.js';
 import { FormLayoutRedwoodTheme } from './UNSAFE_TextField/themes/redwood/FormLayoutTheme.js';

package/es/TabBar-4d7054f7.js

@@ -0,0 +1,82 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, Fragment, jsxs } from 'preact/jsx-runtime';
+import 'preact/hooks';
+import './LayerHost-e6402730.js';
+import { forwardRef } from 'preact/compat';
+import './UNSAFE_Text/themes/TextStyles.css.js';
+import './Flex-ce31b351.js';
+import { T as TabBarContext } from './useTabBarContext-0071d2a7.js';
+import './flexitem-7b7f7920.js';
+import './dimensions-d4159ace.js';
+import './boxalignment-a90bc50d.js';
+import './logger-c92f309c.js';
+import './TabBarItemStyles.styles.css';
+import './UNSAFE_TabBarCommon/themes/redwood/TabBarItemBaseTheme.styles.css';
+import './UNSAFE_TabBarCommon/themes/redwood/TabBarItemVariants.css.js';
+import './ConveyorBeltContext-76a29c59.js';
+import './VisBusyStateContext-9ae84b1d.js';
+import 'preact';
+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 './IconStyle.styles.css';
+import './NavigationList-fb05e081.js';
+import './useNavigationListItem-a28f2c34.js';
+import './UNSAFE_NavigationList/themes/NavigationListItemStyles.css.js';
+import './UNSAFE_NavigationList/themes/redwood/NavigationListItemBaseTheme.styles.css';
+import './UNSAFE_NavigationList/themes/redwood/NavigationListItemVariants.css.js';
+import './Floating-f02677ba.js';
+import './LayerStyles.styles.css';
+import './keyboardUtils-38854729.js';
+import './tabbableUtils-6ceb767f.js';
+import './CollectionInteractionContext-7cf19abc.js';
+import './dropdownStyles.styles.css';
+import './Sheet-da412baf.js';
+import './OverflowTabBarItemStyles.styles.css';
+import { T as TabBarLayout } from './TabBarLayout-bb3f9f69.js';
+import { styles } from './UNSAFE_TabBar/themes/TabBarStyles.css.js';
+import { u as useTabBar } from './useTabBar-cbac0c2e.js';
+import { M as Menu } from './Menu-a5bf756f.js';
+import './MenuItem-54015ca3.js';
+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';
+
+/**
+ * The internal component used to render a custom context menu
+ */
+function TabBarContextMenu({ contextMenuConfig, contextMenuContext, ...menuProps }) {
+    const accessibleLabel = contextMenuConfig.accessibleLabel;
+    const menuItems = contextMenuConfig.itemsRenderer(contextMenuContext);
+    if (menuItems == null) {
+        return null;
+    }
+    return (jsx(Fragment, { children: jsx(Menu, { ...menuProps, ...(accessibleLabel && {
+                'aria-label': accessibleLabel
+            }), children: menuProps.isOpen && contextMenuConfig.itemsRenderer(contextMenuContext) }) }));
+}
+
+/**
+ * A tab bar allows navigation between different content sections.
+ */
+const TabBar = forwardRef(({ children, layout = 'stretch', display = 'standard', size = 'md', edge = 'top', selection, onSelect, onRemove, 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, contextMenuConfig }, ref) => {
+    const rootRef = ref;
+    const { rootProps, tabBarContext, menuProps, contextMenuContext } = useTabBar({
+        class: styles.tabBarBase,
+        edge: edge,
+        onRemove,
+        onSelect,
+        ref: rootRef,
+        selection,
+        size,
+        children,
+        contextMenuConfig
+    });
+    return (jsxs(Fragment, { children: [jsx(TabBarContext.Provider, { value: tabBarContext, children: jsx("div", { ...rootProps, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedBy, children: jsx(TabBarLayout, { layout: layout, display: display, children: children }) }) }), contextMenuConfig && (jsx(TabBarContextMenu, { ...menuProps, contextMenuConfig: contextMenuConfig, contextMenuContext: contextMenuContext }))] }));
+});
+
+export { TabBar as T };
+//# sourceMappingURL=TabBar-4d7054f7.js.map

package/es/TabBar-4d7054f7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar-4d7054f7.js","sources":["../../src/UNSAFE_TabBar/TabBarContextMenu.tsx","../../src/UNSAFE_TabBar/TabBar.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 */\nimport { ComponentProps } from 'preact';\nimport { Menu } from '../UNSAFE_Menu';\nimport { TabBarContextMenuConfig, TabBarItemContext } from '#UNSAFE_TabBarCommon';\n\nexport type Props<K extends string | number> = Omit<ComponentProps<typeof Menu>, 'children'> & {\n  contextMenuConfig: TabBarContextMenuConfig<K>;\n} & { contextMenuContext: TabBarItemContext<K> };\n\n/**\n * The internal component used to render a custom context menu\n */\nexport function TabBarContextMenu<K extends string | number>({\n  contextMenuConfig,\n  contextMenuContext,\n  ...menuProps\n}: Props<K>) {\n  const accessibleLabel = contextMenuConfig.accessibleLabel;\n\n  const menuItems = contextMenuConfig.itemsRenderer(contextMenuContext);\n  if (menuItems == null) {\n    return null;\n  }\n  return (\n    <>\n      <Menu\n        {...menuProps}\n        {...(accessibleLabel && {\n          'aria-label': accessibleLabel\n        })}>\n        {menuProps.isOpen && contextMenuConfig.itemsRenderer(contextMenuContext)}\n      </Menu>\n    </>\n  );\n}\n","import type { ComponentChildren, Ref, RefObject } from 'preact';\nimport { TabBarContext, TabBarLayout, TabBarContextMenuConfig } from '../UNSAFE_TabBarCommon';\nimport { styles } from './themes/TabBarStyles.css';\nimport { TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { useTabBar } from '../hooks/PRIVATE_useTabBar';\nimport { forwardRef } from 'preact/compat';\nimport { TabBarContextMenu } from './TabBarContextMenu';\nexport {\n  TabBarItem,\n  RemovableTabBarItem,\n  OverflowTabBarItem,\n  TabBarContext,\n  useTabBarContext,\n  TabBarLayout,\n  useProgressiveTruncation,\n  TabBarLinkItem\n} from '../UNSAFE_TabBarCommon';\n\n/**\n * type for payload of current key change event handler\n */\nexport type CurrentKeyDetail<K> = {\n  value: K;\n};\n\n/**\n * type for payload of selection change event handler\n */\ntype SelectionDetail<K> = {\n  value: K;\n};\n\n/**\n * type for payload of remove event handler\n */\ntype RemoveDetail<K> = {\n  value: K;\n};\n\ntype DisplayProps =\n  | {\n      /**\n       * Controls the content layout of the TabBarItem: 'standard' lays out the contents horizontally,\n       *'icons' hides the label,\n       */\n      display?: 'standard' | 'icons';\n      /**\n       *  The size indicates how tall the TabBarItem is rendered.\n       *  Note: It is not possible to specify 'size' when 'display=\"stacked\".\n       */\n      size?: 'md' | 'lg';\n    }\n  | {\n      /**\n       *'stacked' stacks the icon on top of the label.\n       * Note: It is not possible to specify 'size' when 'display=\"stacked\".\n       */\n      display?: 'stacked';\n      size?: 'never';\n    };\n\nexport type TabBarProps<K extends string | number> = DisplayProps & {\n  /**\n   * A set of TabBarItem(s) that TabBar will hold\n   */\n  children: ComponentChildren;\n  /**\n   * Whether to stretch the tab bar items to occupy available space or to condense items\n   */\n  layout?: 'stretch' | 'condense';\n  /**\n   * The position of the TabBar. Valid Values: top and bottom.\n   * 'top' is used when TabBar is placed on top of content section and the selection\n   *  indicator would be placed below the TabBarItem.\n   * 'bottom' is used when TabBar is placed on bottom of content section and the selection\n   *  indicator would be placed above the TabBarItem.\n   */\n  edge?: 'top' | 'bottom';\n  /**\n   * Key of the selected item.\n   */\n  selection?: K;\n  /**\n   * Callback function to handle when user selects a tab.\n   * The callback is also invoked when a user selects a tab that is already selected.\n   */\n  onSelect?: <K extends string | number>(detail: SelectionDetail<K>) => void;\n  /**\n   * Callback function to handle remove\n   */\n  onRemove?: <K extends string | number>(detail: RemoveDetail<K>) => void;\n  /**\n   * Accepts the ID of an element that provides instructions for interaction with the TabBar.\n   */\n  'aria-describedby'?: string;\n  /**\n   * An aria-label which defines a string value that labels this TabBar.\n   * Either aria-label or aria-labelledby should be specified in order to make TabBar accessible.\n   */\n  'aria-label'?: string;\n\n  /**\n   * An aria-labelledby which identifies the element(s) that labels this TabBar.\n   * Either aria-label or aria-labelledby should be specified in order to make TabBar accessible.\n   */\n  'aria-labelledby'?: string;\n\n  /**\n   * Configuration used to specify a context menu.\n   */\n  contextMenuConfig?: TabBarContextMenuConfig<K>;\n};\n/**\n * A tab bar allows navigation between different content sections.\n */\nexport const TabBar = forwardRef(\n  <K extends string | number>(\n    {\n      children,\n      layout = 'stretch',\n      display = 'standard',\n      size = 'md',\n      edge = 'top',\n      selection,\n      onSelect,\n      onRemove,\n      'aria-describedby': ariaDescribedBy,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      contextMenuConfig\n    }: TabBarProps<K> & TestIdProps,\n    ref?: Ref<HTMLDivElement>\n  ) => {\n    const rootRef = ref as RefObject<HTMLDivElement>;\n\n    const { rootProps, tabBarContext, menuProps, contextMenuContext } = useTabBar({\n      class: styles.tabBarBase,\n      edge: edge,\n      onRemove,\n      onSelect,\n      ref: rootRef,\n      selection,\n      size,\n      children,\n      contextMenuConfig\n    });\n\n    return (\n      <>\n        <TabBarContext.Provider value={tabBarContext}>\n          <div\n            {...rootProps}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby}\n            aria-describedby={ariaDescribedBy}>\n            <TabBarLayout layout={layout} display={display}>\n              {children}\n            </TabBarLayout>\n          </div>\n        </TabBarContext.Provider>\n        {contextMenuConfig && (\n          <TabBarContextMenu\n            {...menuProps}\n            contextMenuConfig={contextMenuConfig}\n            contextMenuContext={contextMenuContext!}\n          />\n        )}\n      </>\n    );\n  }\n);\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA;;AAEG;AACG,SAAU,iBAAiB,CAA4B,EAC3D,iBAAiB,EACjB,kBAAkB,EAClB,GAAG,SAAS,EACH,EAAA;AACT,IAAA,MAAM,eAAe,GAAG,iBAAiB,CAAC,eAAe,CAAC;IAE1D,MAAM,SAAS,GAAG,iBAAiB,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;AACtE,IAAA,IAAI,SAAS,IAAI,IAAI,EAAE;AACrB,QAAA,OAAO,IAAI,CAAC;KACb;IACD,QACEA,0BACEA,GAAC,CAAA,IAAI,OACC,SAAS,EAAA,IACR,eAAe,IAAI;AACtB,gBAAA,YAAY,EAAE,eAAe;AAC9B,aAAA,CAAC,EACD,QAAA,EAAA,SAAS,CAAC,MAAM,IAAI,iBAAiB,CAAC,aAAa,CAAC,kBAAkB,CAAC,EACnE,CAAA,EAAA,CACN,EACH;AACJ;;ACwEA;;AAEG;MACU,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,QAAQ,EACR,MAAM,GAAG,SAAS,EAClB,OAAO,GAAG,UAAU,EACpB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,KAAK,EACZ,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,kBAAkB,EAAE,eAAe,EACnC,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,iBAAiB,EACY,EAC/B,GAAyB,KACvB;IACF,MAAM,OAAO,GAAG,GAAgC,CAAC;IAEjD,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;QAC5E,KAAK,EAAE,MAAM,CAAC,UAAU;AACxB,QAAA,IAAI,EAAE,IAAI;QACV,QAAQ;QACR,QAAQ;AACR,QAAA,GAAG,EAAE,OAAO;QACZ,SAAS;QACT,IAAI;QACJ,QAAQ;QACR,iBAAiB;AAClB,KAAA,CAAC,CAAC;IAEH,QACEC,IACE,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAF,GAAA,CAAC,aAAa,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,aAAa,EAC1C,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EAAA,GACM,SAAS,EACD,YAAA,EAAA,SAAS,EACJ,iBAAA,EAAA,cAAc,EACb,kBAAA,EAAA,eAAe,EACjC,QAAA,EAAAA,GAAA,CAAC,YAAY,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAC3C,QAAA,EAAA,QAAQ,EACI,CAAA,EAAA,CACX,EACiB,CAAA,EACxB,iBAAiB,KAChBA,GAAA,CAAC,iBAAiB,EAAA,EAAA,GACZ,SAAS,EACb,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAmB,EACvC,CAAA,CACH,CACA,EAAA,CAAA,EACH;AACJ,CAAC;;;;"}

package/es/TabBarItem-b97091e4.js

@@ -3,9 +3,9 @@ import { jsxs, jsx, Fragment } from 'preact/jsx-runtime';
 import { useState, useCallback } from 'preact/hooks';
 import { c as classNames } from './classNames-4e12b00d.js';
 import { u as usePress } from './usePress-051f5adb.js';
-import { u as useUser } from './useUser-6b2e271a.js';
+import { u as useUser } from './useUser-1cd223a9.js';
 import { T as Text } from './Text-f8d4ff78.js';
-import { F as Flex } from './Flex-2d9ebee9.js';
+import { F as Flex } from './Flex-ce31b351.js';
 import { u as useTabBarContext } from './useTabBarContext-0071d2a7.js';
 import { m as mergeInterpolations } from './mergeInterpolations-e2db2a66.js';
 import { f as flexitemInterpolations } from './flexitem-7b7f7920.js';
@@ -20,7 +20,7 @@ import { S as SvgErrorS } from './ErrorS-6a705f7c.js';
 import { S as SvgInformationS } from './InformationS-820fef0c.js';
 import { S as SvgSuccessS } from './SuccessS-a7dda885.js';
 import { m as mergeProps } from './mergeProps-88ea8306.js';
-import { a as useTooltipControlled } from './useTooltip-138c94ee.js';
+import { a as useTooltipControlled } from './useTooltip-89ca3f3e.js';
 import { tabBarItemVars } from './UNSAFE_TabBarCommon/themes/TabBarItemContract.css.js';
 import { B as Badge } from './Badge-a458c469.js';
 

package/es/TabBarLayout-bb3f9f69.js

@@ -1,6 +1,6 @@
 /* @oracle/oraclejet-preact: undefined */
 import { jsx } from 'preact/jsx-runtime';
-import { F as Flex } from './Flex-2d9ebee9.js';
+import { F as Flex } from './Flex-ce31b351.js';
 import { u as useTabBarContext, T as TabBarContext } from './useTabBarContext-0071d2a7.js';
 
 /**

package/es/TabBarMixed-b8e2427c.js

@@ -0,0 +1,83 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { useRef } from 'preact/hooks';
+import { forwardRef, useImperativeHandle } from 'preact/compat';
+import './LayerHost-e6402730.js';
+import './UNSAFE_Text/themes/TextStyles.css.js';
+import './Flex-ce31b351.js';
+import { T as TabBarContext } from './useTabBarContext-0071d2a7.js';
+import './flexitem-7b7f7920.js';
+import './dimensions-d4159ace.js';
+import './boxalignment-a90bc50d.js';
+import './logger-c92f309c.js';
+import './TabBarItemStyles.styles.css';
+import './UNSAFE_TabBarCommon/themes/redwood/TabBarItemBaseTheme.styles.css';
+import './UNSAFE_TabBarCommon/themes/redwood/TabBarItemVariants.css.js';
+import './ConveyorBeltContext-76a29c59.js';
+import './VisBusyStateContext-9ae84b1d.js';
+import 'preact';
+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 './IconStyle.styles.css';
+import './NavigationList-fb05e081.js';
+import './useNavigationListItem-a28f2c34.js';
+import './UNSAFE_NavigationList/themes/NavigationListItemStyles.css.js';
+import './UNSAFE_NavigationList/themes/redwood/NavigationListItemBaseTheme.styles.css';
+import './UNSAFE_NavigationList/themes/redwood/NavigationListItemVariants.css.js';
+import './Floating-f02677ba.js';
+import './LayerStyles.styles.css';
+import './keyboardUtils-38854729.js';
+import './tabbableUtils-6ceb767f.js';
+import './CollectionInteractionContext-7cf19abc.js';
+import './dropdownStyles.styles.css';
+import './Sheet-da412baf.js';
+import './OverflowTabBarItemStyles.styles.css';
+import { styles } from './UNSAFE_TabBarMixed/themes/TabBarMixedStyles.css.js';
+import { u as useTabBar } from './useTabBar-cbac0c2e.js';
+
+/**
+ * A thin wrapper around useTabBar hook
+ */
+function useTabBarMixed(options) {
+    return useTabBar(options);
+}
+
+/**
+ * A navigation component that enables horizontal navigation between distinct content with a mixture of static and dynamic tabs.
+ *
+ * @param {TabBarMixedProps} props TabBarMixed component props.
+ * @returns {JSX.Element} TabBarMixed component element.
+ */
+const TabBarMixed = forwardRef((props, focusHandleRef) => {
+    const { children, onRemove, onSelect, selection, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby } = props;
+    const rootRef = useRef(null);
+    const { rootProps, tabBarContext } = useTabBarMixed({
+        class: styles.tabBarBase,
+        edge: 'bottom',
+        onRemove,
+        onSelect,
+        ref: rootRef,
+        selection,
+        size,
+        children
+    });
+    //Allows to call focus on rootRef without having to expose it
+    useImperativeHandle(focusHandleRef, () => ({
+        focus: () => {
+            if (rootRef.current) {
+                rootRef.current.focus();
+            }
+        },
+        blur: () => {
+            if (rootRef.current) {
+                rootRef.current.blur();
+            }
+        }
+    }));
+    return (jsx(TabBarContext.Provider, { value: tabBarContext, children: jsx("div", { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...rootProps, children: children }) }));
+});
+
+export { TabBarMixed as T };
+//# sourceMappingURL=TabBarMixed-b8e2427c.js.map

package/es/TabBarMixed-b8e2427c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBarMixed-b8e2427c.js","sources":["../../src/UNSAFE_TabBarMixed/useTabBarMixed.ts","../../src/UNSAFE_TabBarMixed/TabBarMixed.tsx"],"sourcesContent":["import type { ComponentProps, ContextType, RefObject } from 'preact';\nimport type { TabBarContext, TabBarLayout } from '../UNSAFE_TabBarCommon';\n\nimport { useTabBar } from '../hooks/PRIVATE_useTabBar';\n\ntype TabBarContextValue = ContextType<typeof TabBarContext>;\n\nexport type useTabBarOptions = {\n  class?: string;\n  display?: TabBarContextValue['display'];\n  edge?: 'bottom' | 'top';\n  onRemove?: TabBarContextValue['onRemove'];\n  onSelect?: TabBarContextValue['onSelect'];\n  ref?: RefObject<HTMLDivElement>;\n  selection?: TabBarContextValue['selection'];\n  size?: TabBarContextValue['size'];\n  children?: ComponentProps<typeof TabBarLayout>['children'];\n};\n\n/**\n * A thin wrapper around useTabBar hook\n */\nexport function useTabBarMixed(options: useTabBarOptions) {\n  return useTabBar(options);\n}\n","import type { ComponentChildren } from 'preact';\nimport { useRef } from 'preact/hooks';\nimport { Ref } from 'preact';\nimport { forwardRef, useImperativeHandle } from 'preact/compat';\nimport { TabBarContext } from '../UNSAFE_TabBarCommon';\nimport { styles } from './themes/TabBarMixedStyles.css';\nimport { useTabBarMixed as useTabBar } from './useTabBarMixed';\n\ntype UseTabBarOptions = Parameters<typeof useTabBar>[0];\n\n/**\n * Component props expected to be pased to **TabBarMixed**.\n *\n * @see {@link TabBarMixed}\n */\ntype TabBarMixedProps<K extends string | number> = {\n  /**\n   * Component children that will be rendered within the **TabBarMixed**\n   * root element.\n   *\n   * It is expected that **TabBarLayout** and **ConveyorBelt** elements are\n   * provided. The same **TabBarItem**, **RemovableTabBarItem**,\n   * and **OverflowTabBarItem** elements should also be used.\n   */\n  children?: ComponentChildren;\n  /**\n   * Callback fired when a tab item is removed.\n   */\n  onRemove?: UseTabBarOptions['onRemove'];\n  /**\n   * Callback fired when a tab item is selected.\n   */\n  onSelect?: UseTabBarOptions['onSelect'];\n  /**\n   * The item key of the selected tab item.\n   */\n  selection?: K;\n  /**\n   * The height of the the tab bar.\n   *\n   * @default \"md\"\n   */\n  size?: UseTabBarOptions['size'];\n  /**\n   * An aria-label which defines a string value that labels this TabBarMixed.\n   * Either aria-label or aria-labelledby should be specified in order to make TabBarMixed accessible.\n   */\n  'aria-label'?: string;\n\n  /**\n   * An aria-labelledby which identifies the element(s) that labels this TabBarMixed.\n   * Either aria-label or aria-labelledby should be specified in order to make TabBarMixed accessible.\n   */\n  'aria-labelledby'?: string;\n};\n\nexport type FocusableHandle = {\n  focus: () => void;\n  blur: () => void;\n};\n\n/**\n * A navigation component that enables horizontal navigation between distinct content with a mixture of static and dynamic tabs.\n *\n * @param {TabBarMixedProps} props TabBarMixed component props.\n * @returns {JSX.Element} TabBarMixed component element.\n */\nexport const TabBarMixed = forwardRef(\n  <K extends string | number>(\n    props: TabBarMixedProps<K>,\n    focusHandleRef?: Ref<FocusableHandle>\n  ) => {\n    const {\n      children,\n      onRemove,\n      onSelect,\n      selection,\n      size,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby\n    } = props;\n\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const { rootProps, tabBarContext } = useTabBar({\n      class: styles.tabBarBase,\n      edge: 'bottom',\n      onRemove,\n      onSelect,\n      ref: rootRef,\n      selection,\n      size,\n      children\n    });\n\n    //Allows to call focus on rootRef without having to expose it\n    useImperativeHandle(focusHandleRef!, () => ({\n      focus: () => {\n        if (rootRef.current) {\n          rootRef.current.focus();\n        }\n      },\n      blur: () => {\n        if (rootRef.current) {\n          rootRef.current.blur();\n        }\n      }\n    }));\n\n    return (\n      <TabBarContext.Provider value={tabBarContext}>\n        <div aria-label={ariaLabel} aria-labelledby={ariaLabelledby} {...rootProps}>\n          {children}\n        </div>\n      </TabBarContext.Provider>\n    );\n  }\n);\n"],"names":["useTabBar","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA;;AAEG;AACG,SAAU,cAAc,CAAC,OAAyB,EAAA;AACtD,IAAA,OAAO,SAAS,CAAC,OAAO,CAAC,CAAC;AAC5B;;ACqCA;;;;;AAKG;AACU,MAAA,WAAW,GAAG,UAAU,CACnC,CACE,KAA0B,EAC1B,cAAqC,KACnC;IACF,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EAClC,GAAG,KAAK,CAAC;AAEV,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAE7C,IAAA,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,GAAGA,cAAS,CAAC;QAC7C,KAAK,EAAE,MAAM,CAAC,UAAU;AACxB,QAAA,IAAI,EAAE,QAAQ;QACd,QAAQ;QACR,QAAQ;AACR,QAAA,GAAG,EAAE,OAAO;QACZ,SAAS;QACT,IAAI;QACJ,QAAQ;AACT,KAAA,CAAC,CAAC;;AAGH,IAAA,mBAAmB,CAAC,cAAe,EAAE,OAAO;QAC1C,KAAK,EAAE,MAAK;AACV,YAAA,IAAI,OAAO,CAAC,OAAO,EAAE;AACnB,gBAAA,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;aACzB;SACF;QACD,IAAI,EAAE,MAAK;AACT,YAAA,IAAI,OAAO,CAAC,OAAO,EAAE;AACnB,gBAAA,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;aACxB;SACF;AACF,KAAA,CAAC,CAAC,CAAC;IAEJ,QACEC,IAAC,aAAa,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,aAAa,EAAA,QAAA,EAC1CA,2BAAiB,SAAS,EAAA,iBAAA,EAAmB,cAAc,EAAM,GAAA,SAAS,YACvE,QAAQ,EAAA,CACL,EACiB,CAAA,EACzB;AACJ,CAAC;;;;"}

package/es/TabBarMixedSeparator-51c518a1.js

@@ -0,0 +1,19 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { V as View } from './View-afe98b65.js';
+import { styles } from './UNSAFE_TabBarMixed/themes/TabBarMixedSeparator.css.js';
+
+/**
+ * TabBarMixedSeparator is a component that renders a visual separator (displayed
+ * as a vertical line) between collections of tabs within TabBarMixed.
+ *
+ * @param {TabBarMixedSeparatorProps} props Component props for TabBarMixedSeparator.
+ * @returns {JSX.Element} Component element for TabBarMixedSeparator.
+ */
+function TabBarMixedSeparator(props) {
+    const { padding = 0 } = props;
+    return (jsx(View, { padding: [0, padding, 0, padding], children: jsx("div", { class: styles.separator, role: "presentation" }) }));
+}
+
+export { TabBarMixedSeparator as T };
+//# sourceMappingURL=TabBarMixedSeparator-51c518a1.js.map

package/es/TabBarMixedSeparator-51c518a1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBarMixedSeparator-51c518a1.js","sources":["../../src/UNSAFE_TabBarMixed/TabBarMixedSeparator.tsx"],"sourcesContent":["import { View } from '../UNSAFE_View';\nimport { styles } from './themes/TabBarMixedSeparator.css';\n\nimport type { Size } from '../utils/UNSAFE_size';\n\ntype TabBarMixedSeparatorProps = {\n  /**\n   * Padding around the visual Separator line.\n   */\n  padding?: Size;\n};\n\n/**\n * TabBarMixedSeparator is a component that renders a visual separator (displayed\n * as a vertical line) between collections of tabs within TabBarMixed.\n *\n * @param {TabBarMixedSeparatorProps} props Component props for TabBarMixedSeparator.\n * @returns {JSX.Element} Component element for TabBarMixedSeparator.\n */\nexport function TabBarMixedSeparator(props: TabBarMixedSeparatorProps) {\n  const { padding = 0 } = props;\n\n  return (\n    <View padding={[0, padding, 0, padding]}>\n      <div class={styles.separator} role=\"presentation\" />\n    </View>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;;AAYA;;;;;;AAMG;AACG,SAAU,oBAAoB,CAAC,KAAgC,EAAA;AACnE,IAAA,MAAM,EAAE,OAAO,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;AAE9B,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,EAAA,QAAA,EACrCA,GAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAC,cAAc,EAAG,CAAA,EAAA,CAC/C,EACP;AACJ;;;;"}

package/es/Table-b8c41429.js

@@ -5,10 +5,10 @@ import { memo, forwardRef } from 'preact/compat';
 import { c as classNames } from './classNames-4e12b00d.js';
 import { u as useId } from './useId-03dbfdf0.js';
 import { T as TabbableModeContext } from './TabbableModeContext-7d8ad946.js';
-import { u as useUser } from './useUser-6b2e271a.js';
+import { u as useUser } from './useUser-1cd223a9.js';
 import { Fragment } from 'preact';
 import { L as LOADMORE_STYLE_CLASS, a as LoadMoreCollection } from './LoadMoreCollection-95a49d2a.js';
-import { u as useTranslationBundle } from './useTranslationBundle-2df40edf.js';
+import { u as useTranslationBundle } from './useTranslationBundle-09302c20.js';
 import { tableSkeletonStylesHC, tableSkeletonStyles } from './PRIVATE_Table/themes/TableSkeletonStyles.css.js';
 import { d as dimensionInterpolations } from './dimensions-d4159ace.js';
 import { m as mergeInterpolations } from './mergeInterpolations-e2db2a66.js';
@@ -24,18 +24,18 @@ import { k as keyExtractor, f as findElementByKey, g as getElementContainsFunc,
 import { u as useInteractionStyle } from './useInteractionStyle-52222fdd.js';
 import { TableNoDataRedwoodTheme } from './PRIVATE_Table/themes/redwood/TableNoDataTheme.js';
 import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
-import { S as SelectorAll } from './SelectorAll-27744634.js';
+import { S as SelectorAll } from './SelectorAll-f52550a6.js';
 import { S as SvgUpParent } from './UpParent-9544bbfe.js';
 import { S as SvgDownParent } from './DownParent-9991a096.js';
 import { E as EmbeddedIconButton } from './EmbeddedIconButton-7215a912.js';
 import { M as Menu } from './Menu-a5bf756f.js';
 import './MenuItem-54015ca3.js';
 import './logger-c92f309c.js';
-import './LayerHost-8b98d97d.js';
+import './LayerHost-e6402730.js';
 import './TooltipContentStyles.styles.css';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
-import { S as SHOW_TOOLTIP_DELAY, g as getWrappedTooltipContent, H as HIDE_TOOLTIP_DELAY, a as getGlobalTooltipManager } from './tooltipUtils-35655bd6.js';
+import { S as SHOW_TOOLTIP_DELAY, g as getWrappedTooltipContent, H as HIDE_TOOLTIP_DELAY, a as getGlobalTooltipManager } from './tooltipUtils-768450a7.js';
 import './IconStyle.styles.css';
 import './SelectMenuGroupContext-b56cf5d4.js';
 import './UNSAFE_Separator/themes/SeparatorStyles.css.js';
@@ -47,14 +47,14 @@ import './CollectionInteractionContext-7cf19abc.js';
 import { u as useCollectionInteractionContext } from './useCollectionInteractionContext-3895c632.js';
 import { m as mergeProps } from './mergeProps-88ea8306.js';
 import { u as useContextMenuGesture } from './useContextMenuGesture-9b95a1bb.js';
-import { u as useColorScheme } from './useColorScheme-8e5e458d.js';
-import { u as useScale } from './useScale-1cdb639e.js';
-import { T as TooltipContent } from './useTooltip-138c94ee.js';
+import { u as useColorScheme } from './useColorScheme-c4e237ad.js';
+import { u as useScale } from './useScale-83881775.js';
+import { T as TooltipContent } from './useTooltip-89ca3f3e.js';
 import { a as allTabbableElements, g as getActiveElement, c as getBodyElement, i as isTabbableElement } from './tabbableUtils-6ceb767f.js';
 import { g as getIsSelectionPending } from './textSelectionUtils-a6554a42.js';
 import { u as useResizeObserver } from './useResizeObserver-838164c1.js';
 import { TableRedwoodTheme } from './PRIVATE_Table/themes/redwood/TableTheme.js';
-import { u as useTestId } from './useTestId-474ac6ca.js';
+import { u as useTestId } from './useTestId-9b504481.js';
 
 /**
  * The internal component used to render a single colgroup in Table.

package/es/TagCloud-0fe9b648.js

@@ -7,26 +7,26 @@ import { i as intersects, a as getUnion, c as calculateOffset } from './layoutUt
 import { c as cancelEvent } from './eventsUtils-e5fc62d5.js';
 import { g as generateAriaLabel } from './accUtils-ce2d6588.js';
 import { styles, baseStyles, dimensionStyle } from './UNSAFE_TagCloud/themes/TagCloudStyles.css.js';
-import { u as useVisEvent } from './useVisEvents-d8652100.js';
+import { u as useVisEvent } from './useVisEvents-8877743b.js';
 import { useState, useLayoutEffect, useRef, useMemo } from 'preact/hooks';
-import { u as useUser } from './useUser-6b2e271a.js';
-import { u as useDatatip } from './useDatatip-daec4346.js';
+import { u as useUser } from './useUser-1cd223a9.js';
+import { u as useDatatip } from './useDatatip-9635bc2f.js';
 import { m as mergeProps } from './mergeProps-88ea8306.js';
-import { u as useTranslationBundle } from './useTranslationBundle-2df40edf.js';
+import { u as useTranslationBundle } from './useTranslationBundle-09302c20.js';
 import { u as useTextDimensions } from './useTextDimensions-e08928cc.js';
-import { u as useSelection } from './useSelection-8be05a70.js';
-import { u as useTestId } from './useTestId-474ac6ca.js';
+import { u as useSelection } from './useSelection-0bd0618d.js';
+import { u as useTestId } from './useTestId-9b504481.js';
 import { u as useContextMenu } from './useContextMenu-3c62d9eb.js';
 import './Menu-a5bf756f.js';
 import './MenuItem-54015ca3.js';
 import 'preact';
 import './logger-c92f309c.js';
-import './LayerHost-8b98d97d.js';
+import './LayerHost-e6402730.js';
 import '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 './tooltipUtils-768450a7.js';
 import './IconStyle.styles.css';
 import './SelectMenuGroupContext-b56cf5d4.js';
 import './UNSAFE_Separator/themes/SeparatorStyles.css.js';

package/es/TextArea-a888d849.js

@@ -0,0 +1,160 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
+import { forwardRef, useCallback, useRef, useImperativeHandle } from 'preact/compat';
+import './FormContext-4d71f9c7.js';
+import { u as useFormContext } from './useFormContext-875cacd7.js';
+import { F as FormFieldContext } from './FormFieldContext-68eb5946.js';
+import 'preact/hooks';
+import { u as useFocusableTextField } from './useFocusableTextField-8fe41cd4.js';
+import { L as Label } from './Label-25eba25e.js';
+import './keyboardUtils-38854729.js';
+import { T as TextFieldInput } from './TextFieldInput-cb551f4e.js';
+import './ObfuscatedTextFieldInputStyles.styles.css';
+import { R as ReadonlyTextFieldInput } from './ReadonlyTextFieldInput-f407b86c.js';
+import { R as ReadonlyTextField } from './StyledTextField-6d6dd43e.js';
+import { T as TextField } from './TextField-500c0227.js';
+import { M as MaxLengthLiveRegion } from './MaxLengthLiveRegion-2f3d34cf.js';
+import { u as useTextField } from './useTextField-f57cfb8d.js';
+import './logger-c92f309c.js';
+import './TabbableModeContext-7d8ad946.js';
+import { u as useId } from './useId-03dbfdf0.js';
+import { u as useTranslationBundle } from './useTranslationBundle-09302c20.js';
+import './UserAssistanceStyles.styles.css';
+import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.styles.css';
+import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js';
+import { a as InlineUserAssistance } from './InlineUserAssistance-65ca8810.js';
+import { C as CompactUserAssistance } from './CompactUserAssistance-4f0ff3fc.js';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import './LayerHost-e6402730.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 'preact';
+import './IconStyle.styles.css';
+import './Popup-d8bf7f4d.js';
+import './LabelStyles.styles.css';
+import './UNSAFE_Label/themes/redwood/LabelBaseTheme.styles.css';
+import './UNSAFE_Label/themes/redwood/LabelVariants.css.js';
+import './InputGroupContext-20bdbd6e.js';
+import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
+import './UNSAFE_Popup/themes/redwood/PopupBaseTheme.styles.css';
+import './UNSAFE_Popup/themes/redwood/PopupVariants.css.js';
+import { u as useLengthFilter } from './useLengthFilter-f72f45ac.js';
+import { M as MaxLengthCounter } from './MaxLengthCounter-181b4fc9.js';
+import { u as useCurrentValueReducer } from './useCurrentValueReducer-bdf796fa.js';
+import { u as useSelectableTextField } from './useSelectableTextField-949184a5.js';
+
+/**
+ * A text area displays a field that allows a user to enter a multi-line text value.
+ */
+const TextArea = forwardRef(({ 'aria-describedby': ariaDescribedBy, assistiveText, autoComplete = 'off', autoFocus = false, columnSpan, helpSourceLink, helpSourceText, isDisabled: propIsDisabled, isReadonly: propIsReadonly, isRequired = false, isRequiredShown, label, labelEdge: propLabelEdge, labelStartWidth: propLabelStartWidth, maxLength, maxLengthCounter = 'remaining', maxLengthUnit, messages, placeholder, resize, role, rows, textAlign: propTextAlign, userAssistanceDensity: propUserAssistanceDensity, value, variant = 'default', onInput, onCommit, testId }, ref) => {
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const formControl_limitReached = maxLength
+        ? translations.formControl_limitReached({
+            CHARACTER_LIMIT: maxLength
+        })
+        : '';
+    const { currentCommitValue, dispatch } = useCurrentValueReducer({ value });
+    const onInputAndDispatch = useCallback((detail) => {
+        // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)
+        dispatch({ type: 'input', payload: detail.value });
+        onInput?.(detail);
+    }, [onInput, dispatch]);
+    const onCommitAndDispatch = useCallback((detail) => {
+        // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)
+        dispatch({ type: 'commit', payload: detail.value });
+        onCommit?.(detail);
+    }, [onCommit, dispatch]);
+    const { isDisabled: isFormDisabled, isReadonly: isFormReadonly, labelEdge: formLabelEdge, labelStartWidth: formLabelStartWidth, textAlign: formTextAlign, userAssistanceDensity: formUserAssistanceDensity } = useFormContext();
+    // default to FormContext values if component properties are not specified
+    const isDisabled = propIsDisabled ?? isFormDisabled;
+    const isReadonly = propIsReadonly ?? isFormReadonly;
+    const labelEdge = propLabelEdge ?? formLabelEdge;
+    const labelStartWidth = propLabelStartWidth ?? formLabelStartWidth;
+    const textAlign = propTextAlign ?? formTextAlign;
+    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;
+    const maxLengthDescribedByIdRef = useRef(useId());
+    // The enabledAriaDescribedBy includes the maxLengthDescribedById in addition to what was passed in to aria-describedby.
+    // We don't need to announce the max length message for readonly, as it only applies when editing the value.
+    const enabledAriaDescribedBy = ariaDescribedBy
+        ? `${ariaDescribedBy} ${maxLengthDescribedByIdRef.current}`
+        : maxLengthDescribedByIdRef.current;
+    const enabledElementRef = useRef(null);
+    const readonlyElementRef = useRef(null);
+    const { focusProps, isFocused, methods: focusMethods } = useFocusableTextField({
+        isDisabled,
+        isReadonly,
+        enabledElementRef,
+        readonlyElementRef
+    });
+    const { methods: selectMethods } = useSelectableTextField(enabledElementRef);
+    useImperativeHandle(ref, () => mergeProps(focusMethods, selectMethods), [
+        focusMethods,
+        selectMethods
+    ]);
+    // Handle length filter for user-typed inputs and controlled inputs
+    const { isMaxLengthReached, valueLength, onFilteredInput } = useLengthFilter({
+        maxLength,
+        maxLengthUnit,
+        value,
+        onInput: onInputAndDispatch,
+        onCommit: onCommitAndDispatch
+    });
+    const limitMessage = [{ detail: formControl_limitReached, severity: 'info' }];
+    const allMessages = [
+        ...(messages ?? []),
+        ...(isMaxLengthReached ? limitMessage : [])
+    ];
+    const { formFieldContext, inputProps, labelProps, textFieldProps, userAssistanceProps } = useTextField({
+        ariaDescribedBy: isReadonly || isDisabled ? ariaDescribedBy : enabledAriaDescribedBy,
+        contentVariant: 'textarea',
+        helpSourceLink,
+        helpSourceText,
+        isDisabled,
+        isFocused,
+        isReadonly,
+        isRequiredShown,
+        labelEdge,
+        messages: allMessages,
+        styleVariant: variant,
+        userAssistanceDensity,
+        value
+    });
+    const onClickCounter = useCallback(() => {
+        const elm = enabledElementRef.current;
+        // for setSelectionRange(), len needs to be a number or null.
+        const len = elm ? elm.value.length : null;
+        // Since the counter element is after the text, clicking in this
+        // should put the selection at the end of the text
+        enabledElementRef.current?.setSelectionRange(len, len);
+        // Clicking the counter should put the focus on the input field
+        enabledElementRef.current?.focus();
+    }, [enabledElementRef]);
+    const labelComp = labelEdge !== 'none' ? jsx(Label, { ...labelProps, children: label }) : undefined;
+    const fieldLabelProps = {
+        label: labelEdge !== 'none' ? labelComp : undefined,
+        labelEdge: labelEdge !== 'none' ? labelEdge : undefined,
+        labelStartWidth: labelEdge !== 'none' ? labelStartWidth : undefined
+    };
+    const ariaLabel = labelEdge === 'none' ? label : undefined;
+    const isInlineDensity = userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow';
+    const inlineUserAssistance = isInlineDensity ? (isDisabled || isReadonly ? (
+    // save space for user assistance if density is 'efficient', even though we don't
+    // render user assistance for disabled or readonly fields
+    userAssistanceDensity !== 'efficient' ? undefined : (jsx(InlineUserAssistance, { userAssistanceDensity: userAssistanceDensity, ...userAssistanceProps }))) : (jsx(InlineUserAssistance, { assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, messages: allMessages, isRequiredShown: isRequiredShown, userAssistanceDensity: userAssistanceDensity, ...userAssistanceProps }))) : undefined;
+    const anchorRef = useRef(null);
+    const compactUserAssistance = userAssistanceDensity === 'compact' ? (jsx(CompactUserAssistance, { anchorRef: anchorRef, messages: allMessages, assistiveText: assistiveText, ...userAssistanceProps })) : undefined;
+    if (isReadonly) {
+        const mainContent = (jsx(ReadonlyTextFieldInput, { "aria-describedby": inputProps['aria-describedby'], "aria-label": ariaLabel, "aria-labelledby": labelProps.id, as: "textarea", elementRef: readonlyElementRef, rows: rows, autoFocus: autoFocus, textAlign: textAlign, value: value, variant: "textarea", hasEmptyLabel: label === '' && labelEdge === 'none', hasInsideLabel: label !== undefined && labelEdge === 'inside' }));
+        return (jsx(FormFieldContext.Provider, { value: formFieldContext, children: jsx(ReadonlyTextField, { role: "presentation", columnSpan: columnSpan, compactUserAssistance: compactUserAssistance, inlineUserAssistance: inlineUserAssistance, ref: anchorRef, testId: testId, variant: "textarea", mainContent: mainContent, resize: resize, ...fieldLabelProps }) }));
+    }
+    const hasMaxLength = maxLength !== undefined;
+    const mainContent = (jsxs(Fragment, { children: [jsx(TextFieldInput, { as: "textarea", "aria-label": ariaLabel, autoComplete: autoComplete, autoFocus: autoFocus, currentCommitValue: currentCommitValue, hasEmptyLabel: label === '' && labelEdge === 'none', hasInsideLabel: labelComp !== undefined && labelEdge === 'inside', isRequired: isRequired, inputRef: enabledElementRef, onCommit: onCommitAndDispatch, onInput: onFilteredInput, placeholder: placeholder, role: role, rows: rows, textAlign: textAlign, value: value, ...inputProps }), maxLengthCounter === 'remaining' && hasMaxLength && (jsx(MaxLengthCounter, { maxLength: maxLength, valueLength: valueLength, onClick: onClickCounter })), hasMaxLength && (jsx(HiddenAccessible, { id: maxLengthDescribedByIdRef.current, isHidden: true, children: translations.formControl_maxLength({
+                    MAX_LENGTH: `${maxLength}`
+                }) })), hasMaxLength && isFocused && (jsx(MaxLengthLiveRegion, { maxLength: maxLength, valueLength: valueLength, testId: testId + '_remainingChars' }))] }));
+    return (jsx(FormFieldContext.Provider, { value: formFieldContext, children: jsx(TextField, { mainContent: mainContent, columnSpan: columnSpan, compactUserAssistance: compactUserAssistance, inlineUserAssistance: inlineUserAssistance, onBlur: focusProps?.onFocusOut, onFocus: focusProps?.onFocusIn, mainFieldRef: anchorRef, resize: resize, testId: testId, ...textFieldProps, ...fieldLabelProps }) }));
+});
+
+export { TextArea as T };
+//# sourceMappingURL=TextArea-a888d849.js.map