@mirohq/design-system-textarea 1.2.37 → 1.3.0

package/dist/main.js

@@ -5,6 +5,7 @@ var React = require('react');
 var designSystemUtils = require('@mirohq/design-system-utils');
 var designSystemBaseForm = require('@mirohq/design-system-base-form');
 var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
+var designSystemUseImeSafeKeyDown = require('@mirohq/design-system-use-ime-safe-key-down');
 var interactions = require('@react-aria/interactions');
 var utils = require('@react-aria/utils');
 var designSystemStitches = require('@mirohq/design-system-stitches');
@@ -86,8 +87,18 @@ const Textarea = React.forwardRef(
       setDisabled,
       setAriaDisabled
     } = designSystemBaseForm.useFormFieldContext();
+    const {
+      onKeyDown: externalOnKeyDown,
+      onCompositionStart: externalOnCompositionStart,
+      onCompositionEnd: externalOnCompositionEnd,
+      ...restWithoutKeyboardHandlers
+    } = restProps;
+    const imeSafeProps = designSystemUseImeSafeKeyDown.useImeSafeKeyDown((event) => {
+      externalOnKeyDown == null ? void 0 : externalOnKeyDown(event);
+    });
     const elementProps = designSystemUseAriaDisabled.useAriaDisabled({
-      ...restProps,
+      ...restWithoutKeyboardHandlers,
+      onKeyDown: imeSafeProps.onKeyDown,
       ariaDisabled
     });
     React.useEffect(() => {
@@ -156,7 +167,18 @@ const Textarea = React.forwardRef(
           {
             "data-focused": designSystemUtils.booleanishAttrValue(focused),
             "data-hovered": designSystemUtils.booleanishAttrValue(hovered),
-            ...utils.mergeProps(elementProps, hoverProps),
+            ...utils.mergeProps(
+              elementProps,
+              hoverProps,
+              {
+                onCompositionStart: imeSafeProps.onCompositionStart,
+                onCompositionEnd: imeSafeProps.onCompositionEnd
+              },
+              {
+                onCompositionStart: externalOnCompositionStart,
+                onCompositionEnd: externalOnCompositionEnd
+              }
+            ),
             id: id != null ? id : formElementId,
             valid: valid != null ? valid : formFieldValid,
             readOnly,

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/textarea.styled.tsx","../src/textarea.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { textFieldStyles } from '@mirohq/design-system-base-text-field'\n\nconst disabledAndReadonlySelectors =\n  ':read-only, :disabled, [aria-disabled=\"true\"]'\n\nexport const StyledContainer = styled('div', {\n  position: 'relative',\n  width: '100%',\n})\n\nexport const StyledTextarea = styled(Primitive.textarea, {\n  all: 'unset',\n  display: 'block',\n  height: 'max-content',\n  maxWidth: '100%',\n  minHeight: 'inherit',\n  padding: '$100 $150',\n  overflowWrap: 'break-word',\n  whiteSpace: 'pre-wrap',\n  resize: 'auto',\n\n  ...textFieldStyles.variants.idle,\n\n  '&:read-only': textFieldStyles.variants.readOnly,\n\n  '&:disabled, &[aria-disabled=\"true\"]': {\n    ...textFieldStyles.variants.disabled,\n    ...textFieldStyles.base.disabled,\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})`]: {\n    _hover: textFieldStyles.variants.hovered,\n  },\n\n  ...focus.css(textFieldStyles.variants.focused),\n\n  [`&:not(${disabledAndReadonlySelectors})::placeholder`]: {\n    color: textFieldStyles.base.placeholder.color,\n  },\n\n  variants: {\n    valid: {\n      true: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...textFieldStyles.variants.valid.idle,\n        },\n      },\n      false: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...textFieldStyles.variants.invalid.idle,\n        },\n      },\n    },\n  },\n})\n\nexport type StyledTextareaProps = ComponentPropsWithRef<typeof StyledTextarea>\n","import React, { useState, useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport {\n  mergeRefs,\n  booleanishAttrValue,\n  stringAttrValue,\n} from '@mirohq/design-system-utils'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\nimport type { FormElementProps } from '@mirohq/design-system-base-form'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\n\nimport { StyledTextarea, StyledContainer } from './textarea.styled'\nimport type { StyledTextareaProps } from './textarea.styled'\n\nexport interface TextareaProps\n  extends FormElementProps,\n    Omit<StyledTextareaProps, keyof FormElementProps> {}\n\nexport const Textarea = React.forwardRef<\n  ElementRef<typeof StyledTextarea>,\n  TextareaProps\n>(\n  (\n    {\n      id,\n      onFocus,\n      onBlur,\n      disabled,\n      'aria-describedby': ariaDescribedBy,\n      'aria-disabled': ariaDisabled,\n      'aria-invalid': ariaInvalid,\n      readOnly,\n      required,\n      placeholder,\n      valid,\n      css,\n      // @ts-expect-error className required when extending the component with styled()\n      className,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const textareaRef = React.useRef<HTMLTextAreaElement>(null)\n    const {\n      formElementId,\n      valid: formFieldValid,\n      ariaDescribedBy: formFieldContextDescribedBy,\n      ariaInvalid: formFieldAriaInvalid,\n      formElementRef,\n      setRequired,\n      setReadOnly,\n      setDisabled,\n      setAriaDisabled,\n    } = useFormFieldContext<HTMLTextAreaElement>()\n\n    const elementProps = useAriaDisabled({\n      ...restProps,\n      ariaDisabled,\n    })\n\n    useEffect(() => {\n      setRequired?.(required)\n      setReadOnly?.(readOnly)\n      setDisabled?.(disabled)\n      setAriaDisabled?.(ariaDisabled)\n    }, [\n      disabled,\n      ariaDisabled,\n      readOnly,\n      required,\n      setRequired,\n      setReadOnly,\n      setDisabled,\n      setAriaDisabled,\n    ])\n\n    const [focused, setFocused] = useState(false)\n    const { hoverProps, isHovered: hovered } = useHover({})\n\n    const onFocusHandler = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setFocused(true)\n        onFocus?.(e)\n      },\n      [setFocused, onFocus]\n    )\n    const onBlurHandler = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setFocused(false)\n        onBlur?.(e)\n      },\n      [setFocused, onBlur]\n    )\n\n    const {\n      overflow,\n      resize,\n      caretColor,\n      lineHeight,\n      letterSpacing,\n      textIndent,\n      whiteSpace,\n      wordWrap,\n      direction,\n      tabSize,\n      ...containerCss\n    } = css ?? {}\n\n    const textareaCss = {\n      overflow,\n      resize,\n      caretColor,\n      lineHeight,\n      letterSpacing,\n      textIndent,\n      whiteSpace,\n      wordWrap,\n      direction,\n      tabSize,\n    }\n\n    return (\n      <StyledContainer\n        css={containerCss}\n        // @ts-expect-error className required when extending the component with styled()\n        className={className}\n      >\n        <StyledTextarea\n          data-focused={booleanishAttrValue(focused)}\n          data-hovered={booleanishAttrValue(hovered)}\n          {...mergeProps(elementProps, hoverProps)}\n          id={id ?? formElementId}\n          valid={valid ?? formFieldValid}\n          readOnly={readOnly}\n          aria-describedby={stringAttrValue(\n            ariaDescribedBy,\n            formFieldContextDescribedBy\n          )}\n          aria-invalid={ariaInvalid ?? formFieldAriaInvalid}\n          disabled={disabled === true || undefined}\n          required={required === true || undefined}\n          placeholder={placeholder}\n          onFocus={onFocusHandler}\n          onBlur={onBlurHandler}\n          data-form-element='textarea'\n          ref={mergeRefs([textareaRef, formElementRef, forwardRef])}\n          css={textareaCss}\n        />\n      </StyledContainer>\n    )\n  }\n)\n"],"names":["styled","Primitive","textFieldStyles","focus","useFormFieldContext","useAriaDisabled","useEffect","useState","useHover","jsx","booleanishAttrValue","mergeProps","stringAttrValue","mergeRefs"],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,4BAAA,GACJ,+CAAA;AAEK,MAAM,eAAA,GAAkBA,4BAAO,KAAA,EAAO;AAAA,EAC3C,QAAA,EAAU,UAAA;AAAA,EACV,KAAA,EAAO;AACT,CAAC,CAAA;AAEM,MAAM,cAAA,GAAiBA,2BAAA,CAAOC,+BAAA,CAAU,QAAA,EAAU;AAAA,EACvD,GAAA,EAAK,OAAA;AAAA,EACL,OAAA,EAAS,OAAA;AAAA,EACT,MAAA,EAAQ,aAAA;AAAA,EACR,QAAA,EAAU,MAAA;AAAA,EACV,SAAA,EAAW,SAAA;AAAA,EACX,OAAA,EAAS,WAAA;AAAA,EACT,YAAA,EAAc,YAAA;AAAA,EACd,UAAA,EAAY,UAAA;AAAA,EACZ,MAAA,EAAQ,MAAA;AAAA,EAER,GAAGC,0CAAgB,QAAA,CAAS,IAAA;AAAA,EAE5B,aAAA,EAAeA,0CAAgB,QAAA,CAAS,QAAA;AAAA,EAExC,qCAAA,EAAuC;AAAA,IACrC,GAAGA,0CAAgB,QAAA,CAAS,QAAA;AAAA,IAC5B,GAAGA,0CAAgB,IAAA,CAAK;AAAA,GAC1B;AAAA,EAEA,CAAC,QAAA,CAAS,MAAA,CAAA,4BAAA,EAA4B,GAAA,CAAG,GAAG;AAAA,IAC1C,MAAA,EAAQA,0CAAgB,QAAA,CAAS;AAAA,GACnC;AAAA,EAEA,GAAGC,wBAAA,CAAM,GAAA,CAAID,yCAAA,CAAgB,SAAS,OAAO,CAAA;AAAA,EAE7C,CAAC,QAAA,CAAS,MAAA,CAAA,4BAAA,EAA4B,gBAAA,CAAgB,GAAG;AAAA,IACvD,KAAA,EAAOA,yCAAA,CAAgB,IAAA,CAAK,WAAA,CAAY;AAAA,GAC1C;AAAA,EAEA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,IAAA,EAAM;AAAA,QACJ,CAAC,QAAA,CAAS,MAAA,CAAA,4BAAA,EAA4B,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,yCAAA,CAAgB,QAAA,CAAS,KAAA,CAAM;AAAA;AACpC,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,CAAC,QAAA,CAAS,MAAA,CAAA,4BAAA,EAA4B,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,yCAAA,CAAgB,QAAA,CAAS,OAAA,CAAQ;AAAA;AACtC;AACF;AACF;AAEJ,CAAC,CAAA;;ACtCM,MAAM,WAAW,KAAA,CAAM,UAAA;AAAA,EAI5B,CACE;AAAA,IACE,EAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,kBAAA,EAAoB,eAAA;AAAA,IACpB,eAAA,EAAiB,YAAA;AAAA,IACjB,cAAA,EAAgB,WAAA;AAAA,IAChB,QAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAA;AAAA;AAAA,IAEA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,UAAA,KACG;AACH,IAAA,MAAM,WAAA,GAAc,KAAA,CAAM,MAAA,CAA4B,IAAI,CAAA;AAC1D,IAAA,MAAM;AAAA,MACJ,aAAA;AAAA,MACA,KAAA,EAAO,cAAA;AAAA,MACP,eAAA,EAAiB,2BAAA;AAAA,MACjB,WAAA,EAAa,oBAAA;AAAA,MACb,cAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA,QACEE,wCAAA,EAAyC;AAE7C,IAAA,MAAM,eAAeC,2CAAA,CAAgB;AAAA,MACnC,GAAG,SAAA;AAAA,MACH;AAAA,KACD,CAAA;AAED,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,QAAA,CAAA;AACd,MAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,QAAA,CAAA;AACd,MAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,QAAA,CAAA;AACd,MAAA,eAAA,IAAA,IAAA,GAAA,MAAA,GAAA,eAAA,CAAkB,YAAA,CAAA;AAAA,IACpB,CAAA,EAAG;AAAA,MACD,QAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,SAAA,EAAW,SAAQ,GAAIC,qBAAA,CAAS,EAAE,CAAA;AAEtD,IAAA,MAAM,iBAAiB,KAAA,CAAM,WAAA;AAAA,MAC3B,CAAC,CAAA,KAA6C;AAC5C,QAAA,UAAA,CAAW,IAAI,CAAA;AACf,QAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,CAAA,CAAA;AAAA,MACZ,CAAA;AAAA,MACA,CAAC,YAAY,OAAO;AAAA,KACtB;AACA,IAAA,MAAM,gBAAgB,KAAA,CAAM,WAAA;AAAA,MAC1B,CAAC,CAAA,KAA6C;AAC5C,QAAA,UAAA,CAAW,KAAK,CAAA;AAChB,QAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,CAAA,CAAA;AAAA,MACX,CAAA;AAAA,MACA,CAAC,YAAY,MAAM;AAAA,KACrB;AAEA,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,oBAAO,EAAC;AAEZ,IAAA,MAAM,WAAA,GAAc;AAAA,MAClB,QAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,uBACEC,cAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,YAAA;AAAA,QAEL,SAAA;AAAA,QAEA,QAAA,kBAAAA,cAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,cAAA,EAAcC,sCAAoB,OAAO,CAAA;AAAA,YACzC,cAAA,EAAcA,sCAAoB,OAAO,CAAA;AAAA,YACxC,GAAGC,gBAAA,CAAW,YAAA,EAAc,UAAU,CAAA;AAAA,YACvC,IAAI,EAAA,IAAA,IAAA,GAAA,EAAA,GAAM,aAAA;AAAA,YACV,OAAO,KAAA,IAAA,IAAA,GAAA,KAAA,GAAS,cAAA;AAAA,YAChB,QAAA;AAAA,YACA,kBAAA,EAAkBC,iCAAA;AAAA,cAChB,eAAA;AAAA,cACA;AAAA,aACF;AAAA,YACA,gBAAc,WAAA,IAAA,IAAA,GAAA,WAAA,GAAe,oBAAA;AAAA,YAC7B,QAAA,EAAU,aAAa,IAAA,IAAQ,MAAA;AAAA,YAC/B,QAAA,EAAU,aAAa,IAAA,IAAQ,MAAA;AAAA,YAC/B,WAAA;AAAA,YACA,OAAA,EAAS,cAAA;AAAA,YACT,MAAA,EAAQ,aAAA;AAAA,YACR,mBAAA,EAAkB,UAAA;AAAA,YAClB,KAAKC,2BAAA,CAAU,CAAC,WAAA,EAAa,cAAA,EAAgB,UAAU,CAAC,CAAA;AAAA,YACxD,GAAA,EAAK;AAAA;AAAA;AACP;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"main.js","sources":["../src/textarea.styled.tsx","../src/textarea.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { textFieldStyles } from '@mirohq/design-system-base-text-field'\n\nconst disabledAndReadonlySelectors =\n  ':read-only, :disabled, [aria-disabled=\"true\"]'\n\nexport const StyledContainer = styled('div', {\n  position: 'relative',\n  width: '100%',\n})\n\nexport const StyledTextarea = styled(Primitive.textarea, {\n  all: 'unset',\n  display: 'block',\n  height: 'max-content',\n  maxWidth: '100%',\n  minHeight: 'inherit',\n  padding: '$100 $150',\n  overflowWrap: 'break-word',\n  whiteSpace: 'pre-wrap',\n  resize: 'auto',\n\n  ...textFieldStyles.variants.idle,\n\n  '&:read-only': textFieldStyles.variants.readOnly,\n\n  '&:disabled, &[aria-disabled=\"true\"]': {\n    ...textFieldStyles.variants.disabled,\n    ...textFieldStyles.base.disabled,\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})`]: {\n    _hover: textFieldStyles.variants.hovered,\n  },\n\n  ...focus.css(textFieldStyles.variants.focused),\n\n  [`&:not(${disabledAndReadonlySelectors})::placeholder`]: {\n    color: textFieldStyles.base.placeholder.color,\n  },\n\n  variants: {\n    valid: {\n      true: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...textFieldStyles.variants.valid.idle,\n        },\n      },\n      false: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...textFieldStyles.variants.invalid.idle,\n        },\n      },\n    },\n  },\n})\n\nexport type StyledTextareaProps = ComponentPropsWithRef<typeof StyledTextarea>\n","import React, { useState, useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport {\n  mergeRefs,\n  booleanishAttrValue,\n  stringAttrValue,\n} from '@mirohq/design-system-utils'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\nimport type { FormElementProps } from '@mirohq/design-system-base-form'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { useImeSafeKeyDown } from '@mirohq/design-system-use-ime-safe-key-down'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\n\nimport { StyledTextarea, StyledContainer } from './textarea.styled'\nimport type { StyledTextareaProps } from './textarea.styled'\n\nexport interface TextareaProps\n  extends FormElementProps,\n    Omit<StyledTextareaProps, keyof FormElementProps> {}\n\nexport const Textarea = React.forwardRef<\n  ElementRef<typeof StyledTextarea>,\n  TextareaProps\n>(\n  (\n    {\n      id,\n      onFocus,\n      onBlur,\n      disabled,\n      'aria-describedby': ariaDescribedBy,\n      'aria-disabled': ariaDisabled,\n      'aria-invalid': ariaInvalid,\n      readOnly,\n      required,\n      placeholder,\n      valid,\n      css,\n      // @ts-expect-error className required when extending the component with styled()\n      className,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const textareaRef = React.useRef<HTMLTextAreaElement>(null)\n    const {\n      formElementId,\n      valid: formFieldValid,\n      ariaDescribedBy: formFieldContextDescribedBy,\n      ariaInvalid: formFieldAriaInvalid,\n      formElementRef,\n      setRequired,\n      setReadOnly,\n      setDisabled,\n      setAriaDisabled,\n    } = useFormFieldContext<HTMLTextAreaElement>()\n\n    const {\n      onKeyDown: externalOnKeyDown,\n      onCompositionStart: externalOnCompositionStart,\n      onCompositionEnd: externalOnCompositionEnd,\n      ...restWithoutKeyboardHandlers\n    } = restProps\n\n    const imeSafeProps = useImeSafeKeyDown<HTMLTextAreaElement>(event => {\n      externalOnKeyDown?.(event)\n    })\n\n    const elementProps = useAriaDisabled({\n      ...restWithoutKeyboardHandlers,\n      onKeyDown: imeSafeProps.onKeyDown,\n      ariaDisabled,\n    })\n\n    useEffect(() => {\n      setRequired?.(required)\n      setReadOnly?.(readOnly)\n      setDisabled?.(disabled)\n      setAriaDisabled?.(ariaDisabled)\n    }, [\n      disabled,\n      ariaDisabled,\n      readOnly,\n      required,\n      setRequired,\n      setReadOnly,\n      setDisabled,\n      setAriaDisabled,\n    ])\n\n    const [focused, setFocused] = useState(false)\n    const { hoverProps, isHovered: hovered } = useHover({})\n\n    const onFocusHandler = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setFocused(true)\n        onFocus?.(e)\n      },\n      [setFocused, onFocus]\n    )\n    const onBlurHandler = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setFocused(false)\n        onBlur?.(e)\n      },\n      [setFocused, onBlur]\n    )\n\n    const {\n      overflow,\n      resize,\n      caretColor,\n      lineHeight,\n      letterSpacing,\n      textIndent,\n      whiteSpace,\n      wordWrap,\n      direction,\n      tabSize,\n      ...containerCss\n    } = css ?? {}\n\n    const textareaCss = {\n      overflow,\n      resize,\n      caretColor,\n      lineHeight,\n      letterSpacing,\n      textIndent,\n      whiteSpace,\n      wordWrap,\n      direction,\n      tabSize,\n    }\n\n    return (\n      <StyledContainer\n        css={containerCss}\n        // @ts-expect-error className required when extending the component with styled()\n        className={className}\n      >\n        <StyledTextarea\n          data-focused={booleanishAttrValue(focused)}\n          data-hovered={booleanishAttrValue(hovered)}\n          // mergeProps chains event handlers: each composition event fires\n          // the hook's internal handler (to maintain the isComposing ref) AND\n          // the external one supplied by the consumer. Both are required.\n          {...mergeProps(\n            elementProps,\n            hoverProps,\n            {\n              onCompositionStart: imeSafeProps.onCompositionStart,\n              onCompositionEnd: imeSafeProps.onCompositionEnd,\n            },\n            {\n              onCompositionStart: externalOnCompositionStart,\n              onCompositionEnd: externalOnCompositionEnd,\n            }\n          )}\n          id={id ?? formElementId}\n          valid={valid ?? formFieldValid}\n          readOnly={readOnly}\n          aria-describedby={stringAttrValue(\n            ariaDescribedBy,\n            formFieldContextDescribedBy\n          )}\n          aria-invalid={ariaInvalid ?? formFieldAriaInvalid}\n          disabled={disabled === true || undefined}\n          required={required === true || undefined}\n          placeholder={placeholder}\n          onFocus={onFocusHandler}\n          onBlur={onBlurHandler}\n          data-form-element='textarea'\n          ref={mergeRefs([textareaRef, formElementRef, forwardRef])}\n          css={textareaCss}\n        />\n      </StyledContainer>\n    )\n  }\n)\n"],"names":["styled","Primitive","textFieldStyles","focus","useFormFieldContext","useImeSafeKeyDown","useAriaDisabled","useEffect","useState","useHover","jsx","booleanishAttrValue","mergeProps","stringAttrValue","mergeRefs"],"mappings":"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"}

package/dist/module.js

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { mergeRefs, stringAttrValue, booleanishAttrValue } from '@mirohq/design-system-utils';
 import { useFormFieldContext } from '@mirohq/design-system-base-form';
 import { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled';
+import { useImeSafeKeyDown } from '@mirohq/design-system-use-ime-safe-key-down';
 import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { styled } from '@mirohq/design-system-stitches';
@@ -84,8 +85,18 @@ const Textarea = React.forwardRef(
       setDisabled,
       setAriaDisabled
     } = useFormFieldContext();
+    const {
+      onKeyDown: externalOnKeyDown,
+      onCompositionStart: externalOnCompositionStart,
+      onCompositionEnd: externalOnCompositionEnd,
+      ...restWithoutKeyboardHandlers
+    } = restProps;
+    const imeSafeProps = useImeSafeKeyDown((event) => {
+      externalOnKeyDown == null ? void 0 : externalOnKeyDown(event);
+    });
     const elementProps = useAriaDisabled({
-      ...restProps,
+      ...restWithoutKeyboardHandlers,
+      onKeyDown: imeSafeProps.onKeyDown,
       ariaDisabled
     });
     useEffect(() => {
@@ -154,7 +165,18 @@ const Textarea = React.forwardRef(
           {
             "data-focused": booleanishAttrValue(focused),
             "data-hovered": booleanishAttrValue(hovered),
-            ...mergeProps(elementProps, hoverProps),
+            ...mergeProps(
+              elementProps,
+              hoverProps,
+              {
+                onCompositionStart: imeSafeProps.onCompositionStart,
+                onCompositionEnd: imeSafeProps.onCompositionEnd
+              },
+              {
+                onCompositionStart: externalOnCompositionStart,
+                onCompositionEnd: externalOnCompositionEnd
+              }
+            ),
             id: id != null ? id : formElementId,
             valid: valid != null ? valid : formFieldValid,
             readOnly,

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/textarea.styled.tsx","../src/textarea.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { textFieldStyles } from '@mirohq/design-system-base-text-field'\n\nconst disabledAndReadonlySelectors =\n  ':read-only, :disabled, [aria-disabled=\"true\"]'\n\nexport const StyledContainer = styled('div', {\n  position: 'relative',\n  width: '100%',\n})\n\nexport const StyledTextarea = styled(Primitive.textarea, {\n  all: 'unset',\n  display: 'block',\n  height: 'max-content',\n  maxWidth: '100%',\n  minHeight: 'inherit',\n  padding: '$100 $150',\n  overflowWrap: 'break-word',\n  whiteSpace: 'pre-wrap',\n  resize: 'auto',\n\n  ...textFieldStyles.variants.idle,\n\n  '&:read-only': textFieldStyles.variants.readOnly,\n\n  '&:disabled, &[aria-disabled=\"true\"]': {\n    ...textFieldStyles.variants.disabled,\n    ...textFieldStyles.base.disabled,\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})`]: {\n    _hover: textFieldStyles.variants.hovered,\n  },\n\n  ...focus.css(textFieldStyles.variants.focused),\n\n  [`&:not(${disabledAndReadonlySelectors})::placeholder`]: {\n    color: textFieldStyles.base.placeholder.color,\n  },\n\n  variants: {\n    valid: {\n      true: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...textFieldStyles.variants.valid.idle,\n        },\n      },\n      false: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...textFieldStyles.variants.invalid.idle,\n        },\n      },\n    },\n  },\n})\n\nexport type StyledTextareaProps = ComponentPropsWithRef<typeof StyledTextarea>\n","import React, { useState, useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport {\n  mergeRefs,\n  booleanishAttrValue,\n  stringAttrValue,\n} from '@mirohq/design-system-utils'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\nimport type { FormElementProps } from '@mirohq/design-system-base-form'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\n\nimport { StyledTextarea, StyledContainer } from './textarea.styled'\nimport type { StyledTextareaProps } from './textarea.styled'\n\nexport interface TextareaProps\n  extends FormElementProps,\n    Omit<StyledTextareaProps, keyof FormElementProps> {}\n\nexport const Textarea = React.forwardRef<\n  ElementRef<typeof StyledTextarea>,\n  TextareaProps\n>(\n  (\n    {\n      id,\n      onFocus,\n      onBlur,\n      disabled,\n      'aria-describedby': ariaDescribedBy,\n      'aria-disabled': ariaDisabled,\n      'aria-invalid': ariaInvalid,\n      readOnly,\n      required,\n      placeholder,\n      valid,\n      css,\n      // @ts-expect-error className required when extending the component with styled()\n      className,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const textareaRef = React.useRef<HTMLTextAreaElement>(null)\n    const {\n      formElementId,\n      valid: formFieldValid,\n      ariaDescribedBy: formFieldContextDescribedBy,\n      ariaInvalid: formFieldAriaInvalid,\n      formElementRef,\n      setRequired,\n      setReadOnly,\n      setDisabled,\n      setAriaDisabled,\n    } = useFormFieldContext<HTMLTextAreaElement>()\n\n    const elementProps = useAriaDisabled({\n      ...restProps,\n      ariaDisabled,\n    })\n\n    useEffect(() => {\n      setRequired?.(required)\n      setReadOnly?.(readOnly)\n      setDisabled?.(disabled)\n      setAriaDisabled?.(ariaDisabled)\n    }, [\n      disabled,\n      ariaDisabled,\n      readOnly,\n      required,\n      setRequired,\n      setReadOnly,\n      setDisabled,\n      setAriaDisabled,\n    ])\n\n    const [focused, setFocused] = useState(false)\n    const { hoverProps, isHovered: hovered } = useHover({})\n\n    const onFocusHandler = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setFocused(true)\n        onFocus?.(e)\n      },\n      [setFocused, onFocus]\n    )\n    const onBlurHandler = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setFocused(false)\n        onBlur?.(e)\n      },\n      [setFocused, onBlur]\n    )\n\n    const {\n      overflow,\n      resize,\n      caretColor,\n      lineHeight,\n      letterSpacing,\n      textIndent,\n      whiteSpace,\n      wordWrap,\n      direction,\n      tabSize,\n      ...containerCss\n    } = css ?? {}\n\n    const textareaCss = {\n      overflow,\n      resize,\n      caretColor,\n      lineHeight,\n      letterSpacing,\n      textIndent,\n      whiteSpace,\n      wordWrap,\n      direction,\n      tabSize,\n    }\n\n    return (\n      <StyledContainer\n        css={containerCss}\n        // @ts-expect-error className required when extending the component with styled()\n        className={className}\n      >\n        <StyledTextarea\n          data-focused={booleanishAttrValue(focused)}\n          data-hovered={booleanishAttrValue(hovered)}\n          {...mergeProps(elementProps, hoverProps)}\n          id={id ?? formElementId}\n          valid={valid ?? formFieldValid}\n          readOnly={readOnly}\n          aria-describedby={stringAttrValue(\n            ariaDescribedBy,\n            formFieldContextDescribedBy\n          )}\n          aria-invalid={ariaInvalid ?? formFieldAriaInvalid}\n          disabled={disabled === true || undefined}\n          required={required === true || undefined}\n          placeholder={placeholder}\n          onFocus={onFocusHandler}\n          onBlur={onBlurHandler}\n          data-form-element='textarea'\n          ref={mergeRefs([textareaRef, formElementRef, forwardRef])}\n          css={textareaCss}\n        />\n      </StyledContainer>\n    )\n  }\n)\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/textarea.styled.tsx","../src/textarea.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { textFieldStyles } from '@mirohq/design-system-base-text-field'\n\nconst disabledAndReadonlySelectors =\n  ':read-only, :disabled, [aria-disabled=\"true\"]'\n\nexport const StyledContainer = styled('div', {\n  position: 'relative',\n  width: '100%',\n})\n\nexport const StyledTextarea = styled(Primitive.textarea, {\n  all: 'unset',\n  display: 'block',\n  height: 'max-content',\n  maxWidth: '100%',\n  minHeight: 'inherit',\n  padding: '$100 $150',\n  overflowWrap: 'break-word',\n  whiteSpace: 'pre-wrap',\n  resize: 'auto',\n\n  ...textFieldStyles.variants.idle,\n\n  '&:read-only': textFieldStyles.variants.readOnly,\n\n  '&:disabled, &[aria-disabled=\"true\"]': {\n    ...textFieldStyles.variants.disabled,\n    ...textFieldStyles.base.disabled,\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})`]: {\n    _hover: textFieldStyles.variants.hovered,\n  },\n\n  ...focus.css(textFieldStyles.variants.focused),\n\n  [`&:not(${disabledAndReadonlySelectors})::placeholder`]: {\n    color: textFieldStyles.base.placeholder.color,\n  },\n\n  variants: {\n    valid: {\n      true: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...textFieldStyles.variants.valid.idle,\n        },\n      },\n      false: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...textFieldStyles.variants.invalid.idle,\n        },\n      },\n    },\n  },\n})\n\nexport type StyledTextareaProps = ComponentPropsWithRef<typeof StyledTextarea>\n","import React, { useState, useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport {\n  mergeRefs,\n  booleanishAttrValue,\n  stringAttrValue,\n} from '@mirohq/design-system-utils'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\nimport type { FormElementProps } from '@mirohq/design-system-base-form'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { useImeSafeKeyDown } from '@mirohq/design-system-use-ime-safe-key-down'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\n\nimport { StyledTextarea, StyledContainer } from './textarea.styled'\nimport type { StyledTextareaProps } from './textarea.styled'\n\nexport interface TextareaProps\n  extends FormElementProps,\n    Omit<StyledTextareaProps, keyof FormElementProps> {}\n\nexport const Textarea = React.forwardRef<\n  ElementRef<typeof StyledTextarea>,\n  TextareaProps\n>(\n  (\n    {\n      id,\n      onFocus,\n      onBlur,\n      disabled,\n      'aria-describedby': ariaDescribedBy,\n      'aria-disabled': ariaDisabled,\n      'aria-invalid': ariaInvalid,\n      readOnly,\n      required,\n      placeholder,\n      valid,\n      css,\n      // @ts-expect-error className required when extending the component with styled()\n      className,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const textareaRef = React.useRef<HTMLTextAreaElement>(null)\n    const {\n      formElementId,\n      valid: formFieldValid,\n      ariaDescribedBy: formFieldContextDescribedBy,\n      ariaInvalid: formFieldAriaInvalid,\n      formElementRef,\n      setRequired,\n      setReadOnly,\n      setDisabled,\n      setAriaDisabled,\n    } = useFormFieldContext<HTMLTextAreaElement>()\n\n    const {\n      onKeyDown: externalOnKeyDown,\n      onCompositionStart: externalOnCompositionStart,\n      onCompositionEnd: externalOnCompositionEnd,\n      ...restWithoutKeyboardHandlers\n    } = restProps\n\n    const imeSafeProps = useImeSafeKeyDown<HTMLTextAreaElement>(event => {\n      externalOnKeyDown?.(event)\n    })\n\n    const elementProps = useAriaDisabled({\n      ...restWithoutKeyboardHandlers,\n      onKeyDown: imeSafeProps.onKeyDown,\n      ariaDisabled,\n    })\n\n    useEffect(() => {\n      setRequired?.(required)\n      setReadOnly?.(readOnly)\n      setDisabled?.(disabled)\n      setAriaDisabled?.(ariaDisabled)\n    }, [\n      disabled,\n      ariaDisabled,\n      readOnly,\n      required,\n      setRequired,\n      setReadOnly,\n      setDisabled,\n      setAriaDisabled,\n    ])\n\n    const [focused, setFocused] = useState(false)\n    const { hoverProps, isHovered: hovered } = useHover({})\n\n    const onFocusHandler = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setFocused(true)\n        onFocus?.(e)\n      },\n      [setFocused, onFocus]\n    )\n    const onBlurHandler = React.useCallback(\n      (e: React.FocusEvent<HTMLTextAreaElement>) => {\n        setFocused(false)\n        onBlur?.(e)\n      },\n      [setFocused, onBlur]\n    )\n\n    const {\n      overflow,\n      resize,\n      caretColor,\n      lineHeight,\n      letterSpacing,\n      textIndent,\n      whiteSpace,\n      wordWrap,\n      direction,\n      tabSize,\n      ...containerCss\n    } = css ?? {}\n\n    const textareaCss = {\n      overflow,\n      resize,\n      caretColor,\n      lineHeight,\n      letterSpacing,\n      textIndent,\n      whiteSpace,\n      wordWrap,\n      direction,\n      tabSize,\n    }\n\n    return (\n      <StyledContainer\n        css={containerCss}\n        // @ts-expect-error className required when extending the component with styled()\n        className={className}\n      >\n        <StyledTextarea\n          data-focused={booleanishAttrValue(focused)}\n          data-hovered={booleanishAttrValue(hovered)}\n          // mergeProps chains event handlers: each composition event fires\n          // the hook's internal handler (to maintain the isComposing ref) AND\n          // the external one supplied by the consumer. Both are required.\n          {...mergeProps(\n            elementProps,\n            hoverProps,\n            {\n              onCompositionStart: imeSafeProps.onCompositionStart,\n              onCompositionEnd: imeSafeProps.onCompositionEnd,\n            },\n            {\n              onCompositionStart: externalOnCompositionStart,\n              onCompositionEnd: externalOnCompositionEnd,\n            }\n          )}\n          id={id ?? formElementId}\n          valid={valid ?? formFieldValid}\n          readOnly={readOnly}\n          aria-describedby={stringAttrValue(\n            ariaDescribedBy,\n            formFieldContextDescribedBy\n          )}\n          aria-invalid={ariaInvalid ?? formFieldAriaInvalid}\n          disabled={disabled === true || undefined}\n          required={required === true || undefined}\n          placeholder={placeholder}\n          onFocus={onFocusHandler}\n          onBlur={onBlurHandler}\n          data-form-element='textarea'\n          ref={mergeRefs([textareaRef, formElementRef, forwardRef])}\n          css={textareaCss}\n        />\n      </StyledContainer>\n    )\n  }\n)\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-textarea",
-  "version": "1.2.37",
+  "version": "1.3.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -33,8 +33,9 @@
     "@mirohq/design-system-primitive": "^2.2.1",
     "@mirohq/design-system-stitches": "^3.3.29",
     "@mirohq/design-system-styles": "^3.2.29",
-    "@mirohq/design-system-use-aria-disabled": "^1.1.4",
-    "@mirohq/design-system-utils": "^1.3.0"
+    "@mirohq/design-system-use-ime-safe-key-down": "^1.0.0",
+    "@mirohq/design-system-utils": "^1.3.0",
+    "@mirohq/design-system-use-aria-disabled": "^1.1.4"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",