@databricks/design-system 1.12.17 → 1.12.18

package/dist/{index-b1437d2d.js → index-DSCOuDtB.js}

@@ -1,61 +1,9 @@
-import { forwardRef, useRef, useCallback } from 'react';
-import { I as Icon, a as useDesignSystemTheme, D as DesignSystemAntDConfigProvider, h as addDebugOutlineIfEnabled, r as getValidationStateColor, g as getAnimationCss, s as safex, c as useDesignSystemEventComponentCallbacks, d as DesignSystemEventProviderComponentTypes, e as DesignSystemEventProviderAnalyticsEventTypes, p as importantify } from './Typography-ed0b1c4d.js';
+import React__default, { forwardRef, useMemo, useRef, useCallback } from 'react';
+import { I as Icon, a as useDesignSystemTheme, i as useDesignSystemSafexFlags, D as DesignSystemAntDConfigProvider, h as addDebugOutlineIfEnabled, V as getValidationStateColor, g as getAnimationCss, b as DesignSystemEventProviderAnalyticsEventTypes, at as useFormContext, c as useDesignSystemEventComponentCallbacks, d as DesignSystemEventProviderComponentTypes, r as importantify } from './Typography-CTfAhQ8V.js';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import { css } from '@emotion/react';
 import { Input as Input$2 } from 'antd';
 
-function SvgChevronLeftIcon(props) {
-  return jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "M7.083 8 10 10.947 8.958 12 5 8l3.958-4L10 5.053z",
-      clipRule: "evenodd"
-    })
-  });
-}
-const ChevronLeftIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgChevronLeftIcon
-  });
-});
-ChevronLeftIcon.displayName = 'ChevronLeftIcon';
-var ChevronLeftIcon$1 = ChevronLeftIcon;
-
-function SvgChevronRightIcon(props) {
-  return jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "M8.917 8 6 5.053 7.042 4 11 8l-3.958 4L6 10.947z",
-      clipRule: "evenodd"
-    })
-  });
-}
-const ChevronRightIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgChevronRightIcon
-  });
-});
-ChevronRightIcon.displayName = 'ChevronRightIcon';
-var ChevronRightIcon$1 = ChevronRightIcon;
-
 function SvgClockIcon(props) {
   return jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -83,33 +31,6 @@ const ClockIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
 });
 ClockIcon.displayName = 'ClockIcon';
-var ClockIcon$1 = ClockIcon;
-
-function SvgCloseSmallIcon(props) {
-  return jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "M7.064 8 4 4.936 4.936 4 8 7.064 11.063 4l.937.936L8.937 8 12 11.063l-.937.937L8 8.937 4.936 12 4 11.063z",
-      clipRule: "evenodd"
-    })
-  });
-}
-const CloseSmallIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgCloseSmallIcon
-  });
-});
-CloseSmallIcon.displayName = 'CloseSmallIcon';
-var CloseSmallIcon$1 = CloseSmallIcon;
 
 function SvgMegaphoneIcon(props) {
   return jsx("svg", {
@@ -135,35 +56,80 @@ const MegaphoneIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
 });
 MegaphoneIcon.displayName = 'MegaphoneIcon';
-var MegaphoneIcon$1 = MegaphoneIcon;
 
-function SvgPlusIcon(props) {
-  return jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    viewBox: "0 0 16 16",
-    ...props,
-    children: jsx("path", {
-      fill: "currentColor",
-      fillRule: "evenodd",
-      d: "M7.25 7.25V1h1.5v6.25H15v1.5H8.75V15h-1.5V8.75H1v-1.5z",
-      clipRule: "evenodd"
-    })
-  });
-}
-const PlusIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
-  return jsx(Icon, {
-    ref: forwardedRef,
-    ...props,
-    component: SvgPlusIcon
-  });
-});
-PlusIcon.displayName = 'PlusIcon';
-var PlusIcon$1 = PlusIcon;
+/**
+ * ES-1267895 When entering composed characters, we should not submit forms on Enter.
+ * For instance Japanese characters are composed and we should not submit forms when
+ * the user is still composing the characters.
+ *
+ * This hook provides a reusable way to invoke a callback on Enter,
+ * but not when composing characters.
+ * This can be used to invoke a form submission callback when Enter is pressed.
+ * @param callback VoidFunction to call when the Enter is pressed
+ * @param allowBasicEnter If true, the callback will be invoked when Enter is pressed without any modifiers
+ * @param allowPlatformEnter If true, the callback will be invoked when Enter is pressed with the platform modifier (CMD on Mac, CTRL on Windows)
+ * @returns Object with onKeyDown, onCompositionEnd, and onCompositionStart event handlers
+ *
+ * @example
+ * ```tsx
+ * const handleSubmit = (event: React.KeyboardEvent) => {
+ *  event.preventDefault();
+ * // Submit the form
+ * };
+ * const eventHandlers = useCallbackOnEnter({
+ *   callback: handleSubmit,
+ *   allowBasicEnter: true,
+ *   allowPlatformEnter: true,
+ * })
+ * return <input {...eventHandlers} />;
+ * ```
+ */
+const useCallbackOnEnter = _ref => {
+  let {
+    callback,
+    allowBasicEnter,
+    allowPlatformEnter
+  } = _ref;
+  const isMacOs = useMemo(() => navigator.userAgent.includes('Mac'), []);
+  // Keeping track of whether we are composing characters
+  // This is stored in a ref so that it can be accessed in the onKeyDown event handler
+  // without causing a re-renders
+  const isComposing = useRef(false);
+
+  // Handler for when the composition starts
+  const onCompositionStart = useCallback(() => {
+    isComposing.current = true;
+  }, []);
 
-const getInputGroupStyling = (clsPrefix, theme) => {
+  // Handler for when the composition ends
+  const onCompositionEnd = useCallback(() => {
+    isComposing.current = false;
+  }, []);
+
+  // Handler for when a key is pressed
+  // Used to submit the form when Enter is pressed
+  const onKeyDown = useCallback(event => {
+    // Only invoke the callback on Enter
+    if (event.key !== 'Enter') return;
+    // Do not submit on Enter if user is composing characters
+    if (isComposing.current) return;
+    // Do not submit on Enter if both are false
+    if (!allowBasicEnter && !allowPlatformEnter) return;
+    // Check if the event is a valid Enter press
+    const basicEnter = allowBasicEnter && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+    const platformEnter = allowPlatformEnter && (isMacOs ? event.metaKey : event.ctrlKey);
+    const isValidEnterPress = basicEnter || platformEnter;
+    // Submit the form if the Enter press is valid
+    if (isValidEnterPress) callback(event);
+  }, [allowBasicEnter, allowPlatformEnter, callback, isMacOs]);
+  return {
+    onKeyDown,
+    onCompositionEnd,
+    onCompositionStart
+  };
+};
+
+const getInputGroupStyling = (clsPrefix, theme, useNewShadows) => {
   const inputClass = `.${clsPrefix}-input`;
   const buttonClass = `.${clsPrefix}-btn`;
   return /*#__PURE__*/css({
@@ -182,6 +148,11 @@ const getInputGroupStyling = (clsPrefix, theme) => {
         marginRight: 0
       }
     },
+    ...(useNewShadows && {
+      [`& > ${buttonClass}`]: {
+        boxShadow: 'none !important'
+      }
+    }),
     [`& > ${buttonClass} > span`]: {
       verticalAlign: 'middle'
     },
@@ -203,10 +174,13 @@ const Group = _ref => {
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
+  const {
+    useNewShadows
+  } = useDesignSystemSafexFlags();
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(Input$2.Group, {
       ...addDebugOutlineIfEnabled(),
-      css: [getInputGroupStyling(classNamePrefix, theme), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Group;"],
+      css: [getInputGroupStyling(classNamePrefix, theme, useNewShadows), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Group;"],
       compact: compact,
       ...props,
       ...dangerouslySetAntdProps
@@ -245,12 +219,41 @@ const useCallbackOnceUntilReset = callback => {
   };
 };
 
+/**
+ * This hook provides a way to chain event handlers together.
+ * Optionally, it can stop calling the next handler if the event has been defaultPrevented.
+ * @param handlers Array of event handlers to chain together. Optional handlers are allowed for convenience.
+ * @param stopOnDefaultPrevented If true, the next handler will not be called if the event has been defaultPrevented
+ * @returns A function that will call each handler in the order they are provided
+ * @example
+ * ```tsx
+ * const onClick = useChainEventHandlers({ handlers: [onClick1, onClick2] });
+ * return <button onClick={onClick} />;
+ */
+const useChainEventHandlers = props => {
+  const {
+    handlers,
+    stopOnDefaultPrevented
+  } = props;
+  return useCallback(event => {
+    // Loop over each handler in succession
+    for (const handler of handlers) {
+      // Break if the event has been defaultPrevented and stopOnDefaultPrevented is true
+      if (stopOnDefaultPrevented && event.defaultPrevented) return;
+      // Call the handler if it exists
+      handler === null || handler === void 0 || handler(event);
+    }
+  }, [handlers, stopOnDefaultPrevented]);
+};
+
 const getInputStyles = (clsPrefix, theme, _ref, _ref2) => {
   let {
-    validationState
+    validationState,
+    type,
+    hasValue,
+    useNewShadows
   } = _ref;
   let {
-    useTransparent = false,
     useFocusWithin = false
   } = _ref2;
   const inputClass = `.${clsPrefix}-input`;
@@ -266,6 +269,7 @@ const getInputStyles = (clsPrefix, theme, _ref, _ref2) => {
     '&&': {
       lineHeight: theme.typography.lineHeightBase,
       minHeight: theme.general.heightSm,
+      borderColor: theme.colors.actionDefaultBorderDefault,
       ...(validationState && {
         borderColor: validationColor
       }),
@@ -277,14 +281,24 @@ const getInputStyles = (clsPrefix, theme, _ref, _ref2) => {
         outlineWidth: 2,
         outlineOffset: -2,
         outlineStyle: 'solid',
-        boxShadow: 'none',
+        ...(!useNewShadows && {
+          boxShadow: 'none'
+        }),
+        borderColor: 'transparent'
+      },
+      '&:focus-visible': {
+        outlineColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundDefault,
+        outlineWidth: 2,
+        outlineOffset: -2,
+        outlineStyle: 'solid',
+        ...(!useNewShadows && {
+          boxShadow: 'none'
+        }),
         borderColor: 'transparent'
       }
     },
     [`&${inputClass}, ${inputClass}`]: {
-      ...(useTransparent && {
-        backgroundColor: 'transparent'
-      }),
+      backgroundColor: 'transparent',
       '&:disabled': {
         backgroundColor: theme.colors.actionDisabledBackground,
         color: theme.colors.actionDisabledText,
@@ -295,9 +309,7 @@ const getInputStyles = (clsPrefix, theme, _ref, _ref2) => {
       }
     },
     [`&${affixClass}`]: {
-      ...(useTransparent && {
-        backgroundColor: 'transparent'
-      }),
+      backgroundColor: 'transparent',
       lineHeight: theme.typography.lineHeightBase,
       paddingTop: 5,
       paddingBottom: 5,
@@ -306,7 +318,7 @@ const getInputStyles = (clsPrefix, theme, _ref, _ref2) => {
         lineHeight: theme.typography.lineHeightBase
       },
       '&:hover': {
-        borderColor: theme.colors.actionPrimaryBackgroundHover
+        borderColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundHover
       },
       [`input.${clsPrefix}-input`]: {
         borderRadius: 0
@@ -318,7 +330,7 @@ const getInputStyles = (clsPrefix, theme, _ref, _ref2) => {
     [`&${affixClassFocused}`]: {
       boxShadow: 'none',
       [`&&, &:${focusSpecifier}`]: {
-        outlineColor: theme.colors.actionPrimaryBackgroundDefault,
+        outlineColor: validationState ? validationColor : theme.colors.actionPrimaryBackgroundDefault,
         outlineWidth: 2,
         outlineOffset: -2,
         outlineStyle: 'solid',
@@ -335,21 +347,28 @@ const getInputStyles = (clsPrefix, theme, _ref, _ref2) => {
     },
     [suffixIcon]: {
       marginLeft: theme.spacing.sm,
-      color: theme.colors.textSecondary
+      color: theme.colors.textSecondary,
+      ...(!hasValue && type === 'number' && {
+        display: 'none'
+      })
     },
     ...getAnimationCss(theme.options.enableAnimation)
   };
   return styles;
 };
-const getInputEmotionStyles = (clsPrefix, theme, _ref3, useTransparent) => {
+const getInputEmotionStyles = (clsPrefix, theme, _ref3) => {
   let {
-    validationState
+    validationState,
+    type,
+    hasValue,
+    useNewShadows
   } = _ref3;
   const styles = getInputStyles(clsPrefix, theme, {
-    validationState
-  }, {
-    useTransparent
-  });
+    validationState,
+    type,
+    hasValue,
+    useNewShadows
+  }, {});
   return /*#__PURE__*/css(importantify(styles), process.env.NODE_ENV === "production" ? "" : ";label:getInputEmotionStyles;");
 };
 const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
@@ -361,19 +380,27 @@ const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
     onChange,
     onClear,
     onFocus,
+    onPressEnter,
+    onCompositionStart,
+    onCompositionEnd,
     componentId,
-    analyticsEvents,
+    analyticsEvents = [DesignSystemEventProviderAnalyticsEventTypes.OnValueChange],
     ...props
   } = _ref4;
+  const formContext = useFormContext();
   const {
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  const useTransparent = safex('databricks.fe.designsystem.useTransparentInput', false);
+  const [hasValue, setHasValue] = React__default.useState(props.value !== undefined && props.value !== null && props.value !== '');
+  const {
+    useNewShadows
+  } = useDesignSystemSafexFlags();
+  const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
   const eventContext = useDesignSystemEventComponentCallbacks({
     componentType: DesignSystemEventProviderComponentTypes.Input,
     componentId,
-    analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnValueChange],
+    analyticsEvents: memoizedAnalyticsEvents,
     valueHasNoPii: false
   });
 
@@ -389,14 +416,37 @@ const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
     // ant-provided (X) button.
     if (!e.target.value && e.nativeEvent instanceof InputEvent === false && onClear) {
       onClear === null || onClear === void 0 || onClear();
+      setHasValue(false);
     } else {
       onChange === null || onChange === void 0 || onChange(e);
+      setHasValue(Boolean(e.target.value));
     }
   }, [onChange, onClear, sendAnalyticsEventOncePerFocus]);
   const handleFocus = useCallback(e => {
     resetSendAnalyticsEventOnFocus();
     onFocus === null || onFocus === void 0 || onFocus(e);
   }, [onFocus, resetSendAnalyticsEventOnFocus]);
+  const onFormSubmit = useCallback(e => {
+    var _formContext$formRef;
+    if (!((_formContext$formRef = formContext.formRef) !== null && _formContext$formRef !== void 0 && _formContext$formRef.current)) return;
+    e.preventDefault();
+    formContext.formRef.current.requestSubmit();
+  }, [formContext.formRef]);
+  const submitHandlers = useCallbackOnEnter({
+    callback: onFormSubmit,
+    allowBasicEnter: true,
+    allowPlatformEnter: true
+  });
+  const onPressEnterChain = useChainEventHandlers(useMemo(() => ({
+    handlers: [submitHandlers.onKeyDown, onPressEnter],
+    stopOnDefaultPrevented: false
+  }), [submitHandlers.onKeyDown, onPressEnter]));
+  const onCompositionStartChain = useChainEventHandlers(useMemo(() => ({
+    handlers: [submitHandlers.onCompositionStart, onCompositionStart]
+  }), [submitHandlers.onCompositionStart, onCompositionStart]));
+  const onCompositionEndChain = useChainEventHandlers(useMemo(() => ({
+    handlers: [submitHandlers.onCompositionEnd, onCompositionEnd]
+  }), [submitHandlers.onCompositionEnd, onCompositionEnd]));
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(Input$2, {
       ...addDebugOutlineIfEnabled(),
@@ -404,12 +454,20 @@ const Input$1 = /*#__PURE__*/forwardRef(function Input(_ref4, ref) {
       "data-validation": validationState,
       ref: ref,
       css: [getInputEmotionStyles(classNamePrefix, theme, {
-        validationState
-      }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Input;"],
+        validationState,
+        type: props.type,
+        hasValue,
+        useNewShadows
+      }), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Input;"],
       onChange: handleChange,
       onFocus: handleFocus,
+      onPressEnter: onPressEnterChain,
+      onCompositionStart: onCompositionStartChain,
+      onCompositionEnd: onCompositionEndChain,
       ...props,
-      ...dangerouslySetAntdProps
+      ...dangerouslySetAntdProps,
+      "data-component-type": DesignSystemEventProviderComponentTypes.Input,
+      "data-component-id": componentId
     })
   });
 });
@@ -426,7 +484,9 @@ const Password = /*#__PURE__*/forwardRef(function Password(_ref, ref) {
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  const useTransparent = safex('databricks.fe.designsystem.useTransparentInput', false);
+  const {
+    useNewShadows
+  } = useDesignSystemSafexFlags();
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(Input$2.Password, {
       ...addDebugOutlineIfEnabled(),
@@ -434,8 +494,9 @@ const Password = /*#__PURE__*/forwardRef(function Password(_ref, ref) {
       ref: ref,
       autoComplete: autoComplete,
       css: [getInputEmotionStyles(classNamePrefix, theme, {
-        validationState
-      }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Password;"],
+        validationState,
+        useNewShadows
+      }), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:Password;"],
       ...props,
       ...dangerouslySetAntdProps
     })
@@ -449,20 +510,28 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
     dangerouslySetAntdProps,
     dangerouslyAppendEmotionCSS,
     componentId,
-    analyticsEvents,
+    analyticsEvents = [DesignSystemEventProviderAnalyticsEventTypes.OnValueChange],
     onChange,
     onFocus,
+    onKeyDown,
+    onCompositionStart,
+    onCompositionEnd,
+    allowFormSubmitOnEnter = false,
     ...props
   } = _ref;
+  const formContext = useFormContext();
   const {
     classNamePrefix,
     theme
   } = useDesignSystemTheme();
-  const useTransparent = safex('databricks.fe.designsystem.useTransparentInput', false);
+  const {
+    useNewShadows
+  } = useDesignSystemSafexFlags();
+  const memoizedAnalyticsEvents = useMemo(() => analyticsEvents, [analyticsEvents]);
   const eventContext = useDesignSystemEventComponentCallbacks({
     componentType: DesignSystemEventProviderComponentTypes.TextArea,
     componentId,
-    analyticsEvents: analyticsEvents !== null && analyticsEvents !== void 0 ? analyticsEvents : [DesignSystemEventProviderAnalyticsEventTypes.OnValueChange],
+    analyticsEvents: memoizedAnalyticsEvents,
     valueHasNoPii: false
   });
 
@@ -479,16 +548,51 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(_ref, ref) {
     resetSendAnalyticsEventOnFocus();
     onFocus === null || onFocus === void 0 || onFocus(e);
   }, [onFocus, resetSendAnalyticsEventOnFocus]);
+
+  // Callback used to submit the parent form
+  // This is used when allowFormSubmitOnEnter is true
+  const handleSubmitForm = useCallback(event => {
+    var _formContext$formRef;
+    if (!((_formContext$formRef = formContext.formRef) !== null && _formContext$formRef !== void 0 && _formContext$formRef.current)) return;
+    event.preventDefault();
+    formContext.formRef.current.requestSubmit();
+  }, [formContext.formRef]);
+  // Event handlers for submitting the form on Enter
+  // This hook takes meta keys into account for platform-specific behavior
+  const submitHandlers = useCallbackOnEnter({
+    callback: handleSubmitForm,
+    allowBasicEnter: allowFormSubmitOnEnter,
+    // Conditionally allow form submission on Enter
+    allowPlatformEnter: true // Always allow form submission on platform Enter
+  });
+
+  // Chains the event handlers from useCallbackOnEnter together with potential event handlers from props
+  const onKeyDownChain = useChainEventHandlers(useMemo(() => ({
+    handlers: [submitHandlers.onKeyDown, onKeyDown],
+    stopOnDefaultPrevented: true // If the form is submitted, do not call the next handler
+  }), [onKeyDown, submitHandlers.onKeyDown]));
+  const onCompositionStartChain = useChainEventHandlers(useMemo(() => ({
+    handlers: [submitHandlers.onCompositionStart, onCompositionStart]
+  }), [submitHandlers.onCompositionStart, onCompositionStart]));
+  const onCompositionEndChain = useChainEventHandlers(useMemo(() => ({
+    handlers: [submitHandlers.onCompositionEnd, onCompositionEnd]
+  }), [submitHandlers.onCompositionEnd, onCompositionEnd]));
   return jsx(DesignSystemAntDConfigProvider, {
     children: jsx(Input$2.TextArea, {
       ...addDebugOutlineIfEnabled(),
       ref: ref,
       autoComplete: autoComplete,
       css: [getInputEmotionStyles(classNamePrefix, theme, {
-        validationState
-      }, useTransparent), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:TextArea;"],
+        validationState,
+        useNewShadows
+      }), dangerouslyAppendEmotionCSS, process.env.NODE_ENV === "production" ? "" : ";label:TextArea;"],
       onChange: handleChange,
       onFocus: handleFocus,
+      onKeyDown: onKeyDownChain,
+      onCompositionStart: onCompositionStartChain,
+      onCompositionEnd: onCompositionEndChain,
+      "data-component-type": DesignSystemEventProviderComponentTypes.TextArea,
+      "data-component-id": componentId,
       ...props,
       ...dangerouslySetAntdProps
     })
@@ -503,5 +607,5 @@ const InputNamespace = /* #__PURE__ */Object.assign(Input$1, {
 });
 const Input = InputNamespace;
 
-export { ChevronRightIcon$1 as C, Input as I, MegaphoneIcon$1 as M, PlusIcon$1 as P, ChevronLeftIcon$1 as a, ClockIcon$1 as b, CloseSmallIcon$1 as c, getInputStyles as g };
-//# sourceMappingURL=index-b1437d2d.js.map
+export { ClockIcon as C, Input as I, MegaphoneIcon as M, getInputStyles as g, useCallbackOnEnter as u };
+//# sourceMappingURL=index-DSCOuDtB.js.map