@oracle/oraclejet-preact 14.0.0

package/cjs/Skeleton-fac3589c.js

@@ -0,0 +1,47 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-d7adde1f.js');
+var jsxRuntime = require('preact/jsx-runtime');
+
+require('./utils/UNSAFE_classNames.js');
+var utils_UNSAFE_interpolations_dimensions = require('./utils/UNSAFE_interpolations/dimensions.js');
+var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
+var utils_UNSAFE_interpolations_borders = require('./utils/UNSAFE_interpolations/borders.js');
+var utils_UNSAFE_arrayUtils = require('./utils/UNSAFE_arrayUtils.js');
+var classNames = require('./classNames-825d80d7.js');
+
+const dimensions = utils_UNSAFE_arrayUtils.stringLiteralArray(['height', 'width']);
+const border = utils_UNSAFE_arrayUtils.stringLiteralArray(['borderRadius']); // Create an array [dimensionInterpolations['height'], dimensionInterpolations['width']]
+
+const skeletonDimensionInterpolation = Array.from(dimensions, x => utils_UNSAFE_interpolations_dimensions.dimensionInterpolations[x]);
+const borderRadiusInterpolation = Array.from(border, x => utils_UNSAFE_interpolations_borders.borderInterpolations[x]);
+const interpolations = [...Object.values(borderRadiusInterpolation), ...Object.values(skeletonDimensionInterpolation)];
+const SkeletonInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations(interpolations);
+/* Styling for skeleton main (loop) animation */
+
+const animationSkeletonStyle = {
+  base: "odibww"
+};
+/**
+ * Skeleton component allows the appropriate skeleton to be rendered based on the
+ * property values
+ **/
+
+function Skeleton(_a) {
+  var props = tslib_es6.__rest(_a, []);
+
+  const skeletonDimensions = SkeletonInterpolations(Object.assign({
+    width: '100%',
+    borderRadius: 0
+  }, props));
+  const itemClasses = classNames.classNames([animationSkeletonStyle.base]);
+  return jsxRuntime.jsx("div", {
+    style: skeletonDimensions,
+    class: itemClasses
+  });
+}
+
+exports.Skeleton = Skeleton;
+/*  */
+//# sourceMappingURL=Skeleton-fac3589c.js.map

package/cjs/Skeleton-fac3589c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton-fac3589c.js","sources":["../../src/UNSAFE_Skeleton/Skeleton.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 { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { borderInterpolations } from '../utils/UNSAFE_interpolations/borders';\nimport type { BorderProps } from '../utils/UNSAFE_interpolations/borders';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\nimport { WithRequired } from '../utils/UNSAFE_typeUtils';\n\nconst dimensions = stringLiteralArray(['height', 'width']);\ntype Dimension = typeof dimensions[number];\nconst border = stringLiteralArray(['borderRadius']);\ntype BorderRadius = typeof border[number];\n\n// This component has some StyleInterpolationProps. Those are the height and width properties of the SkeletonProps.\ntype StyleInterpolationProps = Pick<DimensionProps, Dimension>;\n// This component has some BorderRadiusProps, which is the borderRadius property of the SkeletonProps.\ntype BorderRadiusProps = Pick<BorderProps, BorderRadius>;\n//This type has StyleInterpolationProps and BorderRadiusProps with the height prop made required.\ntype SkeletonProps = WithRequired<StyleInterpolationProps, 'height'> & BorderRadiusProps;\n\n// Create an array [dimensionInterpolations['height'], dimensionInterpolations['width']]\nconst skeletonDimensionInterpolation = Array.from(dimensions, (x) => dimensionInterpolations[x]);\nconst borderRadiusInterpolation = Array.from(border, (x) => borderInterpolations[x]);\nconst interpolations = [\n  ...Object.values(borderRadiusInterpolation),\n  ...Object.values(skeletonDimensionInterpolation)\n];\n\nconst SkeletonInterpolations = mergeInterpolations<SkeletonProps>(interpolations);\n\n/* Styling for skeleton main (loop) animation */\nconst animationSkeletonStyle = {\n  base: cssProps`${{\n    animationName: 'var(--oj-c-PRIVATE-DO-NOT-USE-private-preact-skeleton-animation-name)',\n    animationIterationCount: 'infinite',\n    animationDirection: 'alternate',\n    animationDuration: '1.5s'\n  }}`\n};\n\n/**\n * Skeleton component allows the appropriate skeleton to be rendered based on the\n * property values\n **/\nexport function Skeleton({ ...props }: SkeletonProps) {\n  const skeletonDimensions = SkeletonInterpolations({ width: '100%', borderRadius: 0, ...props });\n  const itemClasses = classNames([animationSkeletonStyle.base]);\n  return <div style={skeletonDimensions} class={itemClasses} />;\n}\n"],"names":["dimensions","stringLiteralArray","border","skeletonDimensionInterpolation","Array","from","x","dimensionInterpolations","borderRadiusInterpolation","borderInterpolations","interpolations","Object","values","SkeletonInterpolations","mergeInterpolations","animationSkeletonStyle","Skeleton","_a","skeletonDimensions","assign","width","borderRadius","props"],"mappings":";;;;;;;;;;;;;AAiBA,MAAAA,UAAA,GAAAC,0CAAA,CAAA,CAAA,QAAA,EAAA,OAAA,CAAA,CAAA,CAAA;AAEA,MAAAC,MAAA,GAAAD,0CAAA,CAAA,CAAA,cAAA,CAAA,CAAA;;AAWA,MAAAE,8BAAA,GAAAC,KAAA,CAAAC,IAAA,CAAAL,UAAA,EAAAM,CAAA,IAAAC,8DAAA,CAAAD,CAAA,CAAA,CAAA,CAAA;AACA,MAAAE,yBAAA,GAAAJ,KAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,CAAA,IAAAG,wDAAA,CAAAH,CAAA,CAAA,CAAA,CAAA;AACA,MAAAI,cAAA,GAAA,CACE,GAAAC,MAAA,CAAAC,MAAA,CAAAJ,yBAAA,CADF,EAEE,GAAAG,MAAA,CAAAC,MAAA,CAAAT,8BAAA,CAFF,CAAA,CAAA;AAKA,MAAAU,sBAAA,GAAAC,oDAAA,CAAAJ,cAAA,CAAA,CAAA;AAEA;;AACA,MAAAK,sBAAA,GAAA;;AAAA,CAAA,CAAA;AASA;;;AAGI;;AACJ,SAAAC,QAAA,CAAAC,EAAA,EAAA;;;AACE,EAAA,MAAAC,kBAAA,GAAAL,sBAAA,CAAAF,MAAA,CAAAQ,MAAA,CAAA;AAAAC,IAAAA,KAAA,EAAA,MAAA;AAAAC,IAAAA,YAAA,EAAA,CAAA;GAAA,EAAAC,KAAA,CAAA,CAAA,CAAA;;;;;;AAGF;;;;;;;"}

package/cjs/Spacer-a28e691d.js

@@ -0,0 +1,21 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-d7adde1f.js');
+var jsxRuntime = require('preact/jsx-runtime');
+var utils_UNSAFE_interpolations_dimensions = require('./utils/UNSAFE_interpolations/dimensions.js');
+var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
+require('./utils/UNSAFE_interpolations/flexitem.js');
+var flexitem = require('./flexitem-8d661117.js');
+
+const interpolations = [...Object.values(utils_UNSAFE_interpolations_dimensions.dimensionInterpolations), flexitem.flexitemInterpolations.flex];
+const styleInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations(interpolations);
+const Spacer = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const _b = styleInterpolations(props), { class: cls } = _b, styles = tslib_es6.__rest(_b, ["class"]);
+    return jsxRuntime.jsx("div", { class: cls, style: styles });
+};
+
+exports.Spacer = Spacer;
+/*  */
+//# sourceMappingURL=Spacer-a28e691d.js.map

package/cjs/Spacer-a28e691d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer-a28e691d.js","sources":["../../src/UNSAFE_Spacer/Spacer.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 { dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { flexitemInterpolations } from '../utils/UNSAFE_interpolations/flexitem';\nimport type { FlexitemProps } from '../utils/UNSAFE_interpolations/flexitem';\n\ntype StyleProps = DimensionProps & Pick<FlexitemProps, 'flex'>;\n\ntype Props = StyleProps;\n\nconst interpolations = [...Object.values(dimensionInterpolations), flexitemInterpolations.flex];\n\nconst styleInterpolations = mergeInterpolations<Props>(interpolations);\n\nexport const Spacer = ({ ...props }: Props) => {\n  const { class: cls, ...styles } = styleInterpolations(props);\n  return <div class={cls} style={styles}></div>;\n};\n"],"names":["dimensionInterpolations","flexitemInterpolations","mergeInterpolations","__rest","_jsx"],"mappings":";;;;;;;;;;AAiBA,MAAM,cAAc,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAACA,8DAAuB,CAAC,EAAEC,+BAAsB,CAAC,IAAI,CAAC,CAAC;AAEhG,MAAM,mBAAmB,GAAGC,oDAAmB,CAAQ,cAAc,CAAC,CAAC;AAE1D,MAAA,MAAM,GAAG,CAAC,EAAmB,KAAI;QAAlB,KAAK,GAAAC,gBAAA,CAAA,EAAA,EAAV,EAAY,CAAF,CAAA;AAC/B,IAAA,MAAM,KAA4B,mBAAmB,CAAC,KAAK,CAAC,EAAtD,EAAE,KAAK,EAAE,GAAG,OAA0C,EAArC,MAAM,GAAvBA,gBAAA,CAAA,EAAA,EAAA,CAAA,OAAA,CAAyB,CAA6B,CAAC;IAC7D,OAAOC,cAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAA,CAAQ,CAAC;AAChD;;;;;;;"}

package/cjs/SplitMenuButton-bfe4f72b.js

@@ -0,0 +1,201 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-d7adde1f.js');
+var jsxRuntime = require('preact/jsx-runtime');
+require('./UNSAFE_Button.js');
+require('./index-ed6e3090.js');
+require('./UNSAFE_Menu.js');
+require('./UNSAFE_BaseButton.js');
+require('./utils/UNSAFE_classNames.js');
+var hooks_UNSAFE_useTabbableMode = require('./hooks/UNSAFE_useTabbableMode.js');
+var utils_UNSAFE_interpolations_dimensions = require('./utils/UNSAFE_interpolations/dimensions.js');
+var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
+
+var compat = require('preact/compat');
+var hooks = require('preact/hooks');
+var classNames = require('./classNames-825d80d7.js');
+var BaseButton = require('./BaseButton-82e1ea19.js');
+var Button = require('./Button-b68878ba.js');
+var UNSAFE_Icons = require('./index-5304d101.js');
+var Menu = require('./Menu-5a37d850.js');
+
+const compStyles = {
+  divider: "_1us9kq3",
+  disabledDivider: "_1mdpqzm",
+  icon: "_1f5bh1d",
+  root: "k2asxk",
+  childrenMargins: "_14ffsem"
+};
+const menuButtonStyling = ['embedded', 'min', 'noBorderRadiusStart'];
+const menuButtonActiveStyling = [...menuButtonStyling, 'active'];
+const actionbuttonStyling = ['embedded', 'fill', 'noBorderRadiusEnd'];
+const actionButtonActiveStyling = [...actionbuttonStyling, 'active'];
+const interpolations = [...Object.values(utils_UNSAFE_interpolations_dimensions.dimensionInterpolations)];
+const styleInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations(interpolations);
+/**
+ * A SplitMenuButton is a combined action and menu button.
+ */
+
+const SplitMenuButton = compat.forwardRef((_a, ref) => {
+  var {
+    children,
+    label = '',
+    variant = 'outlined',
+    isDisabled = false,
+    size = 'md',
+    onAction
+  } = _a,
+      props = tslib_es6.__rest(_a, ["children", "label", "variant", "isDisabled", "size", "onAction"]);
+
+  const [isMenuOpen, setIsMenuOpen] = hooks.useState(false);
+  const [isActive, setIsActive] = hooks.useState(false);
+
+  const _b = styleInterpolations(props),
+        {
+    class: cls
+  } = _b,
+        styles = tslib_es6.__rest(_b, ["class"]); // SPACE or ENTER on root area invokes action, as does CLICK/TAP on LEFT SIDE ACTION AREA
+  // DOWN ARROW invokes menu, as does CLICK/TAP on RIGHT SIDE MENU AREA
+
+
+  const onKeyDown = hooks.useCallback(event => {
+    if (event.key === ' ' || event.key === 'Enter') {
+      setIsActive(true);
+    } else if (event.key == 'ArrowDown') {
+      !isDisabled && setIsMenuOpen(menuOpen => !menuOpen); // Prevent page scroll for down arrow, user definitely wanted to show menu in this case.
+      // Don't prevent other keypress defaults, as user may want to hold SPACE down to scroll page.
+
+      event.preventDefault();
+    }
+  }, [isDisabled, setIsMenuOpen, setIsActive]);
+  const onKeyUp = hooks.useCallback(event => {
+    if (event.key === ' ' || event.key === 'Enter') {
+      !isDisabled && onAction && onAction();
+      setIsActive(false);
+    }
+  }, [isDisabled, onAction, setIsActive]);
+  const onBlur = hooks.useCallback(() => {
+    setIsActive(false);
+  }, [setIsActive]);
+
+  const _ref = hooks.useRef(null);
+
+  hooks.useImperativeHandle(ref, () => _ref.current, [_ref]);
+
+  const menuHandler = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  const handleClose = e => {
+    var _a;
+
+    if (e.reason === 'cancel' || 'focusLoss') {
+      (_a = _ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+
+    setIsMenuOpen(false);
+  };
+
+  const dividerStyles = classNames.classNames([compStyles.divider, isDisabled && compStyles.disabledDivider]);
+  const rootStyles = classNames.classNames([compStyles.root]); // Using Span for top button allows us to avoid :hover state rendering by
+  // taking advantage of :enabled not on spans
+
+  const rootButton = () => {
+    return jsxRuntime.jsx(BaseButton.BaseButton, Object.assign({
+      elementDetails: {
+        type: 'span'
+      },
+      ref: _ref,
+      isDisabled: isDisabled,
+      styling: ['container', 'min'],
+      variant: variant,
+      size: size,
+      accessibleLabel: label,
+      ariaRoledescription: "split menu button, press down arrow to invoke menu",
+      ariaExpanded: isMenuOpen
+    }, {
+      children: jsxRuntime.jsxs(hooks_UNSAFE_useTabbableMode.TabbableModeContext.Provider, Object.assign({
+        value: {
+          isTabbable: false
+        }
+      }, {
+        children: [jsxRuntime.jsx(BaseButton.BaseButton, Object.assign({
+          elementDetails: {
+            type: 'span'
+          },
+          variant: variant,
+          styling: getActionButtonStyling(isActive),
+          size: size,
+          isDisabled: isDisabled,
+          ariaHidden: true,
+          onAction: onAction
+        }, {
+          children: label
+        })), jsxRuntime.jsx("div", {
+          class: `${dividerStyles}`
+        }), jsxRuntime.jsx(BaseButton.BaseButton, Object.assign({
+          elementDetails: {
+            type: 'span'
+          },
+          variant: variant,
+          styling: getMenuButtonStyling(isMenuOpen),
+          size: size,
+          isDisabled: isDisabled,
+          ariaHidden: true,
+          onAction: menuHandler
+        }, {
+          children: jsxRuntime.jsx(Button.ButtonLayout, {
+            display: "icons",
+            startIcon: jsxRuntime.jsx(UNSAFE_Icons.SvgIcoNavDown, {}),
+            size: size,
+            styling: "embedded"
+          })
+        }))]
+      }))
+    }));
+  };
+
+  if (isDisabled) {
+    return jsxRuntime.jsx("span", Object.assign({
+      role: "toolbar",
+      class: `${rootStyles} ${cls}`,
+      style: styles
+    }, {
+      children: rootButton()
+    }));
+  } else {
+    return jsxRuntime.jsxs("span", Object.assign({
+      role: "toolbar",
+      class: `${rootStyles} ${cls}`,
+      style: styles,
+      onKeyDown: !isDisabled && onKeyDown,
+      onKeyUp: onKeyUp,
+      onBlur: onBlur
+    }, {
+      children: [rootButton(), jsxRuntime.jsx(Menu.Menu, Object.assign({
+        anchorRef: _ref,
+        isOpen: isMenuOpen,
+        onClose: handleClose
+      }, {
+        children: jsxRuntime.jsx("span", Object.assign({
+          className: compStyles.childrenMargins
+        }, {
+          children: children
+        }))
+      }))]
+    }));
+  }
+});
+
+function getMenuButtonStyling(isActive) {
+  return isActive ? menuButtonActiveStyling : menuButtonStyling;
+}
+
+function getActionButtonStyling(isActive) {
+  return isActive ? actionButtonActiveStyling : actionbuttonStyling;
+}
+
+exports.SplitMenuButton = SplitMenuButton;
+/*  */
+//# sourceMappingURL=SplitMenuButton-bfe4f72b.js.map

package/cjs/SplitMenuButton-bfe4f72b.js.map

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

package/cjs/Text-ebbac0b0.js

@@ -0,0 +1,103 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-d7adde1f.js');
+var jsxRuntime = require('preact/jsx-runtime');
+
+var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
+
+const styles = {
+  base: "_1tbnjf2",
+  lineClamp: "_1o1bbar",
+  truncation: {
+    none: '',
+    clip: "_1xewbhi",
+    ellipsis: "slmufz"
+  },
+  variant: {
+    primary: "_2ejax6",
+    secondary: "pgwisc",
+    disabled: "_1sial1g",
+    danger: "_1h9yuej",
+    warning: "_11dxlyv",
+    success: "_1w6k7n4",
+    inherit: "_6ofuzi"
+  },
+  size: {
+    '2xs': "wz1mim",
+    xs: "_1t8bwcw",
+    sm: "_1payb3g",
+    md: "u4yds1",
+    lg: "_1rhx76u",
+    xl: "p8c7qh",
+    inherit: "_1vdnn54"
+  },
+  weight: {
+    normal: "f5fgff",
+    semiBold: "bp775k",
+    bold: "_13prmkr",
+    inherit: "aza71r"
+  },
+  hyphens: {
+    auto: "_4p3rl4",
+    none: "_2dp6sy"
+  }
+};
+const interpolations = [() => ({
+  class: styles.base
+}), ({
+  size = 'inherit'
+}) => ({
+  class: styles.size[size]
+}), ({
+  weight = 'inherit'
+}) => ({
+  class: styles.weight[weight]
+}), ({
+  variant = 'inherit'
+}) => ({
+  class: styles.variant[variant]
+}), ({
+  hyphens = 'auto'
+}) => ({
+  class: styles.hyphens[hyphens]
+}), ({
+  truncation = 'none'
+}) => ({
+  class: styles.truncation[truncation]
+}), ({
+  lineClamp
+}) => !lineClamp ? {} : {
+  class: styles.lineClamp,
+  webkitLineClamp: lineClamp
+}];
+const styleInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations(interpolations);
+const childrenStyles = "d5anr4";
+function Text(_a) {
+  var {
+    children
+  } = _a,
+      props = tslib_es6.__rest(_a, ["children"]);
+
+  const _b = styleInterpolations(props),
+        {
+    class: cls
+  } = _b,
+        styles = tslib_es6.__rest(_b, ["class"]);
+
+  return jsxRuntime.jsx("span", Object.assign({
+    class: cls,
+    style: styles,
+    id: props.id
+  }, {
+    children: jsxRuntime.jsx("span", Object.assign({
+      className: childrenStyles
+    }, {
+      children: children
+    }))
+  }));
+}
+
+exports.Text = Text;
+/*  */
+//# sourceMappingURL=Text-ebbac0b0.js.map

package/cjs/Text-ebbac0b0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text-ebbac0b0.js","sources":["../../src/UNSAFE_Text/Text.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 { cssProps } from '@oracle/oraclejet-cssprops';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\n\ntype StylePropsWithOutTruncate = {\n  /**\n   * Specifies text color. If set as \"inherit\", takes text color from its parent element.\n   */\n  variant?: 'primary' | 'secondary' | 'disabled' | 'danger' | 'warning' | 'success' | 'inherit';\n\n  /**\n   * Specifies font size and line height. If set as \"inherit\", takes font size and line height from its parent element.\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inherit';\n\n  /**\n   * Specifies the font weight. If set as \"inherit\", takes font weight from its parent element.\n   */\n  weight?: 'normal' | 'semiBold' | 'bold' | 'inherit';\n\n  /**\n   * Specifies if hyphens should be included when handling long words with no spaces.\n   */\n  hyphens?: 'auto' | 'none';\n};\ntype TruncateProps =\n  | {\n      /**\n       * Truncates text at a specific number of lines and then displays an ellipsis (…) at the end of the last line. Parent of the element needs to have a specific width so text starts overflowing and produce a truncation.\n       */\n      lineClamp?: number;\n      /**\n       * Determines text behavior when text is truncated. Be aware of setting either lineClamp or truncation. Setting both props would produce a type error. In most cases, lineClamp=1 tries to put the ellipsis at the end of a \"word\". On the other hand, using truncation=\"ellipsis\" will show as much as possible text, then put the ellipsis at the end.\n       */\n      truncation?: never;\n    }\n  | {\n      lineClamp?: never;\n      truncation?: 'none' | 'clip' | 'ellipsis';\n    };\ntype AdditionalProps = {\n  /**\n   * Specifies the text id\n   */\n  id?: string;\n\n  /**\n   * Specifies the children.\n   */\n  children?: string;\n};\ntype Props = StylePropsWithOutTruncate & TruncateProps & AdditionalProps;\n\nconst styles = {\n  base: cssProps`${{\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    overflowWrap: 'anywhere',\n    display: 'inline'\n  }}`,\n  lineClamp: cssProps`${{\n    display: '-webkit-box',\n    WebkitBoxOrient: 'vertical'\n  }}`,\n  truncation: {\n    none: '',\n    clip: cssProps`${{\n      textOverflow: 'clip',\n      whiteSpace: 'nowrap',\n      width: '100%',\n      display: 'inline-block'\n    }}`,\n    ellipsis: cssProps`${{\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      width: '100%',\n      display: 'inline-block'\n    }}`\n  },\n  variant: {\n    primary: cssProps`${{\n      color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary)'\n    }}`,\n    secondary: cssProps`${{\n      color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary)'\n    }}`,\n    disabled: cssProps`${{\n      color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled)'\n    }}`,\n    danger: cssProps`${{\n      color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-3)'\n    }}`,\n    warning: cssProps`${{\n      color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-3)'\n    }}`,\n    success: cssProps`${{\n      color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-success-3)'\n    }}`,\n    inherit: cssProps`${{\n      color: 'inherit'\n    }}`\n  },\n  size: {\n    '2xs': cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-2xs-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-2xs-line-height)'\n    }}`,\n    xs: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-xs-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-xs-line-height)'\n    }}`,\n    sm: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-sm-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-sm-line-height)'\n    }}`,\n    md: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height)'\n    }}`,\n    lg: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-lg-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-lg-line-height)'\n    }}`,\n    xl: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-xl-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-xl-line-height)'\n    }}`,\n    inherit: cssProps`${{\n      fontSize: 'inherit',\n      lineHeight: 'inherit'\n    }}`\n  },\n  weight: {\n    normal: cssProps`${{\n      fontWeight: 'normal'\n    }}`,\n    semiBold: cssProps`${{\n      fontWeight: '600'\n    }}`,\n    bold: cssProps`${{\n      fontWeight: '700'\n    }}`,\n    inherit: cssProps`${{\n      fontWeight: 'inherit'\n    }}`\n  },\n  hyphens: {\n    auto: cssProps`${{\n      hyphens: 'auto'\n    }}`,\n    none: cssProps`${{\n      hyphens: 'none'\n    }}`\n  }\n};\nconst interpolations = [\n  () => ({ class: styles.base }),\n  ({ size = 'inherit' }: Pick<StylePropsWithOutTruncate, 'size'>) => ({\n    class: styles.size[size]\n  }),\n  ({ weight = 'inherit' }: Pick<StylePropsWithOutTruncate, 'weight'>) => ({\n    class: styles.weight[weight]\n  }),\n  ({ variant = 'inherit' }: Pick<StylePropsWithOutTruncate, 'variant'>) => ({\n    class: styles.variant[variant]\n  }),\n  ({ hyphens = 'auto' }: Pick<StylePropsWithOutTruncate, 'hyphens'>) => ({\n    class: styles.hyphens[hyphens]\n  }),\n  ({ truncation = 'none' }: Pick<TruncateProps, 'truncation'>) => ({\n    class: styles.truncation[truncation]\n  }),\n  ({ lineClamp }: Pick<TruncateProps, 'lineClamp'>) =>\n    !lineClamp ? {} : { class: styles.lineClamp, webkitLineClamp: lineClamp }\n];\nconst styleInterpolations = mergeInterpolations<Omit<Props, 'children'>>(interpolations);\nconst childrenStyles = cssProps`${{\n  /* @ts-ignore */\n  '& > *': {\n    marginTop: '0 !important',\n    marginBottom: '0 !important',\n    marginLeft: '0 !important',\n    marginRight: '0 !important'\n  }\n}}`;\n\nexport function Text({ children, ...props }: Props) {\n  const { class: cls, ...styles } = styleInterpolations(props);\n  return (\n    <span class={cls} style={styles} id={props.id}>\n      <span className={childrenStyles}>{children}</span>\n    </span>\n  );\n}\n"],"names":["styles","truncation","none","variant","size","weight","hyphens","interpolations","class","styleInterpolations","mergeInterpolations","childrenStyles","Text","_a","children","props","__rest","_b","cls"],"mappings":";;;;;;;;AA2DA,MAAAA,MAAA,GAAA;QAAA,UAAA;aAAA,UAAA;AAWEC,EAAAA,UAAA,EAAA;AACEC,IAAAA,IAAA,EAAA,EADF;UAAA,UAAA;;GAXF;AA0BEC,EAAAA,OAAA,EAAA;aAAA,SAAA;eAAA,QAAA;cAAA,UAAA;YAAA,UAAA;aAAA,UAAA;aAAA,UAAA;;GA1BF;AAiDEC,EAAAA,IAAA,EAAA;SAAA,EAAA,QAAA;QAAA,UAAA;QAAA,UAAA;QAAA,QAAA;QAAA,UAAA;QAAA,QAAA;;GAjDF;AA+EEC,EAAAA,MAAA,EAAA;YAAA,QAAA;cAAA,QAAA;UAAA,UAAA;;GA/EF;AA6FEC,EAAAA,OAAA,EAAA;UAAA,SAAA;;AAAA,GAAA;AA7FF,CAAA,CAAA;AAsGA,MAAAC,cAAA,GAAA;;EAAA;;;AAGIC,EAAAA,KAAA,EAAAR,MAAA,CAAAI,IAAA,CAAAA,IAAA,CAAA;EAHJ;;;AAMII,EAAAA,KAAA,EAAAR,MAAA,CAAAK,MAAA,CAAAA,MAAA,CAAA;EANJ;;;AASIG,EAAAA,KAAA,EAAAR,MAAA,CAAAG,OAAA,CAAAA,OAAA,CAAA;EATJ;;;AAYIK,EAAAA,KAAA,EAAAR,MAAA,CAAAM,OAAA,CAAAA,OAAA,CAAA;EAZJ;;;AAeIE,EAAAA,KAAA,EAAAR,MAAA,CAAAC,UAAA,CAAAA,UAAA,CAAA;EAfJ;;;;;CAAA,CAAA,CAAA;AAoBA,MAAAQ,mBAAA,GAAAC,oDAAA,CAAAH,cAAA,CAAA,CAAA;AACA,MAAAI,cAAA,GAAA,QAAA,CAAA;AAUA,SAAAC,IAAA,CAAAC,EAAA,EAAA;EAAqB,IAAA;AAAAC,IAAAA,QAAAA;AAAA,GAAA,GAAAD,EAAA;MAAAE,KAAA,GAAAC,gBAAA,CAAAH,EAAA,EAAA,CAAA,UAAA,CAAA,CAAA,CAAA;;AACnB,EAAA,MAAAI,EAAA,GAAAR,mBAAA,CAAAM,KAAA,CAAA;QAAA;AAAAP,IAAAA,KAAA,EAAAU,GAAAA;AAAA,GAAA,GAAAD,EAAA;QAAAjB,MAAA,GAAAgB,gBAAA,CAAAC,EAAA,EAAA,CAAA,OAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;AAMF;;;;;;;"}

package/cjs/TextArea-fed51a13.js

@@ -0,0 +1,151 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var compat = require('preact/compat');
+var hooks_UNSAFE_useFormContext = require('./hooks/UNSAFE_useFormContext.js');
+var hooks_UNSAFE_useFormFieldContext = require('./hooks/UNSAFE_useFormFieldContext.js');
+var hooks_UNSAFE_useFocusableTextField = require('./hooks/UNSAFE_useFocusableTextField.js');
+var UNSAFE_Label = require('./UNSAFE_Label.js');
+var UNSAFE_TextField = require('./UNSAFE_TextField.js');
+var hooks_UNSAFE_useTextField = require('./hooks/UNSAFE_useTextField.js');
+var UNSAFE_UserAssistance = require('./UNSAFE_UserAssistance.js');
+var hooks_UNSAFE_useLengthFilter = require('./hooks/UNSAFE_useLengthFilter.js');
+
+require('./utils/UNSAFE_classNames.js');
+var hooks = require('preact/hooks');
+var hooks_UNSAFE_usePress = require('./hooks/UNSAFE_usePress.js');
+var classNames = require('./classNames-825d80d7.js');
+var hooks_UNSAFE_useCurrentValueReducer = require('./hooks/UNSAFE_useCurrentValueReducer.js');
+var ReadonlyTextFieldInput = require('./ReadonlyTextFieldInput-2eac69c6.js');
+var TextFieldInput = require('./TextFieldInput-5cadbc52.js');
+
+const rootStyles = {
+  base: "_1usktc8"
+};
+const remainingTextStyles = {
+  hide: "_1gur7sg"
+}; // the spans surrounding the {valueLength}, / and {maxlength}  need to be display: inline-block
+// so that the order is flipped horizontally in RTL.
+
+const spanStyles = "f6ts6d";
+
+const noop = () => {};
+
+function MaxLengthCounter({
+  maxLength,
+  valueLength = 0,
+  onClick
+}) {
+  const {
+    isFocused
+  } = hooks_UNSAFE_useFormFieldContext.useFormFieldContext(); // We don't want mousedown on this component to do anything, so prevent the default behavior.
+
+  const killEvent = hooks.useCallback(event => {
+    event.preventDefault();
+  }, []);
+  const textClasses = classNames.classNames([!isFocused && remainingTextStyles.hide]);
+  const {
+    pressProps
+  } = hooks_UNSAFE_usePress.usePress(onClick !== null && onClick !== void 0 ? onClick : noop);
+  return jsxRuntime.jsx("div", Object.assign({
+    class: rootStyles.base,
+    onMouseDown: killEvent
+  }, pressProps, {
+    children: jsxRuntime.jsxs("span", Object.assign({
+      class: textClasses
+    }, {
+      children: [jsxRuntime.jsx("span", Object.assign({
+        class: spanStyles
+      }, {
+        children: valueLength
+      })), jsxRuntime.jsx("span", Object.assign({
+        class: spanStyles
+      }, {
+        children: "/"
+      })), jsxRuntime.jsx("span", Object.assign({
+        class: spanStyles
+      }, {
+        children: maxLength
+      }))]
+    }))
+  }));
+}
+
+const TextArea = compat.forwardRef(({ ariaDescribedBy, assistiveText, autoComplete = 'off', autoFocus = false, 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 }, ref) => {
+    const { currentCommitValue, dispatch } = hooks_UNSAFE_useCurrentValueReducer.useCurrentValueReducer({ value });
+    const onInputAndDispatch = compat.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 === null || onInput === void 0 ? void 0 : onInput(detail);
+    }, [onInput]);
+    const onCommitAndDispatch = compat.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 === null || onCommit === void 0 ? void 0 : onCommit(detail);
+    }, [onCommit]);
+    const { isDisabled: isFormDisabled, isReadonly: isFormReadonly, labelEdge: formLabelEdge, labelStartWidth: formLabelStartWidth, textAlign: formTextAlign, userAssistanceDensity: formUserAssistanceDensity } = hooks_UNSAFE_useFormContext.useFormContext();
+    // default to FormContext values if component properties are not specified
+    const isDisabled = propIsDisabled !== null && propIsDisabled !== void 0 ? propIsDisabled : isFormDisabled;
+    const isReadonly = propIsReadonly !== null && propIsReadonly !== void 0 ? propIsReadonly : isFormReadonly;
+    const labelEdge = propLabelEdge !== null && propLabelEdge !== void 0 ? propLabelEdge : formLabelEdge;
+    const labelStartWidth = propLabelStartWidth !== null && propLabelStartWidth !== void 0 ? propLabelStartWidth : formLabelStartWidth;
+    const textAlign = propTextAlign !== null && propTextAlign !== void 0 ? propTextAlign : formTextAlign;
+    const userAssistanceDensity = propUserAssistanceDensity !== null && propUserAssistanceDensity !== void 0 ? propUserAssistanceDensity : formUserAssistanceDensity;
+    const { enabledElementRef, readonlyElementRef, focusProps, isFocused } = hooks_UNSAFE_useFocusableTextField.useFocusableTextField({ isDisabled, isReadonly, ref });
+    const { formFieldContext, inputProps, labelProps, textFieldProps, userAssistanceProps } = hooks_UNSAFE_useTextField.useTextField({
+        ariaDescribedBy,
+        contentVariant: 'textarea',
+        isDisabled,
+        isFocused,
+        isReadonly,
+        labelEdge,
+        messages,
+        styleVariant: variant,
+        value
+    });
+    // Handle length filter for user-typed inputs and controlled inputs
+    const { isMaxLengthExceeded, valueLength, onFilteredInput } = hooks_UNSAFE_useLengthFilter.useLengthFilter({
+        maxLength,
+        maxLengthUnit,
+        value,
+        onInput: onInputAndDispatch,
+        onCommit: onCommitAndDispatch
+    });
+    const labelComp = labelEdge !== 'none' ? jsxRuntime.jsx(UNSAFE_Label.Label, Object.assign({}, 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 inlineUserAssistance = isDisabled || isReadonly ? (
+    // save space for user assistance if density is 'efficient', even though we don't
+    // render user assistance for disabled or readonly fields
+    userAssistanceDensity !== 'efficient' ? undefined : (jsxRuntime.jsx(UNSAFE_UserAssistance.InlineUserAssistance, Object.assign({ userAssistanceDensity: userAssistanceDensity }, userAssistanceProps)))) : (jsxRuntime.jsx(UNSAFE_UserAssistance.InlineUserAssistance, Object.assign({ assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, messages: messages, isRequiredShown: isRequiredShown, userAssistanceDensity: userAssistanceDensity }, userAssistanceProps)));
+    if (isReadonly) {
+        // TODO: We need to conditionally render the readonly innerReadonlyField as a textarea or div
+        //  also, the div will need to use white-space: pre-wrap so that the text will wrap like textarea
+        //  see JET-50636
+        return (jsxRuntime.jsx(hooks_UNSAFE_useFormFieldContext.FormFieldContext.Provider, Object.assign({ value: formFieldContext }, { children: jsxRuntime.jsx(UNSAFE_TextField.ReadonlyTextField, Object.assign({ role: "presentation", inlineUserAssistance: inlineUserAssistance, variant: "textarea" }, fieldLabelProps, { children: jsxRuntime.jsx(ReadonlyTextFieldInput.ReadonlyTextFieldInput, { ariaDescribedBy: ariaDescribedBy, ariaLabel: ariaLabel, ariaLabelledBy: labelProps.id, as: "textarea", elementRef: readonlyElementRef, rows: rows, autoFocus: autoFocus, textAlign: textAlign, value: value, variant: "textarea", hasInsideLabel: label !== undefined && labelEdge === 'inside' }) })) })));
+    }
+    const onClickCounter = compat.useCallback(() => {
+        var _a, _b;
+        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
+        (_a = enabledElementRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(len, len);
+        // Clicking the counter should put the focus on the input field
+        (_b = enabledElementRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+    }, []);
+    const mainContent = (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(TextFieldInput.TextFieldInput, Object.assign({ as: "textarea", ariaLabel: ariaLabel, autoComplete: autoComplete, autoFocus: autoFocus, currentCommitValue: currentCommitValue, 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' && maxLength !== undefined && (jsxRuntime.jsx(MaxLengthCounter, Object.assign({}, { maxLength, valueLength, parentHasFocus: isFocused, onClick: onClickCounter }))), maxLength !== undefined && (jsxRuntime.jsx(UNSAFE_TextField.MaxLengthLiveRegion, Object.assign({}, { isMaxLengthExceeded, maxLength, valueLength })))] }));
+    return (jsxRuntime.jsx(hooks_UNSAFE_useFormFieldContext.FormFieldContext.Provider, Object.assign({ value: formFieldContext }, { children: jsxRuntime.jsx(UNSAFE_TextField.TextField, Object.assign({ mainContent: mainContent, inlineUserAssistance: inlineUserAssistance, onBlur: focusProps === null || focusProps === void 0 ? void 0 : focusProps.onfocusout, onFocus: focusProps === null || focusProps === void 0 ? void 0 : focusProps.onfocusin, resize: resize }, textFieldProps, fieldLabelProps)) })));
+});
+
+exports.MaxLengthCounter = MaxLengthCounter;
+exports.TextArea = TextArea;
+/*  */
+//# sourceMappingURL=TextArea-fed51a13.js.map