@mirohq/design-system-textarea 0.2.17-combobox.0 → 0.3.0

package/dist/main.js

@@ -82,6 +82,9 @@ const Textarea = React__default["default"].forwardRef(
     required,
     placeholder,
     valid,
+    css,
+    // @ts-expect-error className required when extending the component with styled()
+    className,
     ...restProps
   }, forwardRef) => {
     var _a, _b, _c;
@@ -136,31 +139,39 @@ const Textarea = React__default["default"].forwardRef(
     );
     const textareaValue = (_c = (_b = (_a = textareaRef.current) == null ? void 0 : _a.value) != null ? _b : elementProps.value) != null ? _c : elementProps.defaultValue;
     const floatingLabel = placeholder !== void 0 || textareaValue !== void 0 && textareaValue !== "" || focused;
-    return /* @__PURE__ */ jsxRuntime.jsxs(StyledContainer, { children: [
-      shouldUseFloatingLabel && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: floatingLabel, children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        StyledTextarea,
-        {
-          "data-focused": designSystemUtils.booleanishAttrValue(focused),
-          "data-hovered": designSystemUtils.booleanishAttrValue(hovered),
-          ...utils.mergeProps(elementProps, hoverProps),
-          id: id != null ? id : formElementId,
-          valid: valid != null ? valid : formFieldValid,
-          readOnly,
-          "aria-describedby": designSystemUtils.stringAttrValue(
-            ariaDescribedBy,
-            formFieldContextDescribedBy
-          ),
-          "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
-          disabled: disabled === true || void 0,
-          required: required === true || void 0,
-          placeholder,
-          onFocus: onFocusHandler,
-          onBlur: onBlurHandler,
-          ref: designSystemUtils.mergeRefs([textareaRef, formElementRef, forwardRef])
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      StyledContainer,
+      {
+        css,
+        className,
+        children: [
+          shouldUseFloatingLabel && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: floatingLabel, children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StyledTextarea,
+            {
+              "data-focused": designSystemUtils.booleanishAttrValue(focused),
+              "data-hovered": designSystemUtils.booleanishAttrValue(hovered),
+              ...utils.mergeProps(elementProps, hoverProps),
+              id: id != null ? id : formElementId,
+              valid: valid != null ? valid : formFieldValid,
+              readOnly,
+              "aria-describedby": designSystemUtils.stringAttrValue(
+                ariaDescribedBy,
+                formFieldContextDescribedBy
+              ),
+              "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
+              disabled: disabled === true || void 0,
+              required: required === true || void 0,
+              placeholder,
+              onFocus: onFocusHandler,
+              onBlur: onBlurHandler,
+              "data-form-element": "textarea",
+              ref: designSystemUtils.mergeRefs([textareaRef, formElementRef, forwardRef])
+            }
+          )
+        ]
+      }
+    );
   }
 );
 

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 { styles as baseInputStyles } from '@mirohq/design-system-base-input'\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  overflowWrap: 'break-word',\n  whiteSpace: 'pre-wrap',\n  height: 'max-content',\n  boxSizing: 'border-box',\n  maxWidth: '100%',\n  width: '100%',\n  padding: '$100 $150',\n  resize: 'auto',\n  color: '$text-neutrals',\n\n  ...baseInputStyles.variants.idle,\n\n  '&:read-only': baseInputStyles.variants.readOnly,\n\n  '&:disabled, &[aria-disabled=\"true\"]': {\n    ...baseInputStyles.variants.disabled,\n    ...baseInputStyles.base.disabled,\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})`]: {\n    _hover: baseInputStyles.variants.hovered,\n  },\n\n  ...focus.css(baseInputStyles.variants.focused),\n\n  '&::placeholder': {\n    fontStyle: 'italic',\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})::placeholder`]:\n    baseInputStyles.base.placeholder,\n\n  variants: {\n    valid: {\n      true: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...baseInputStyles.variants.valid.idle,\n\n          ...focus.css(baseInputStyles.variants.valid.focused),\n\n          _hover: baseInputStyles.variants.valid.hovered,\n        },\n      },\n      false: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...baseInputStyles.variants.invalid.idle,\n\n          ...focus.css(baseInputStyles.variants.invalid.focused),\n\n          _hover: baseInputStyles.variants.invalid.hovered,\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 {\n  FloatingLabel,\n  useFormFieldContext,\n} 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      ...restProps\n    },\n    forwardRef\n  ) => {\n    const textareaRef = React.useRef<HTMLTextAreaElement>(null)\n    const {\n      label,\n      shouldUseFloatingLabel,\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    // label\n    const textareaValue =\n      textareaRef.current?.value ??\n      elementProps.value ??\n      elementProps.defaultValue\n    const floatingLabel =\n      placeholder !== undefined ||\n      (textareaValue !== undefined && textareaValue !== '') ||\n      focused\n\n    return (\n      <StyledContainer>\n        {shouldUseFloatingLabel && (\n          <FloatingLabel floating={floatingLabel}>{label}</FloatingLabel>\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          ref={mergeRefs([textareaRef, formElementRef, forwardRef])}\n        />\n      </StyledContainer>\n    )\n  }\n)\n"],"names":["styled","Primitive","baseInputStyles","focus","React","useFormFieldContext","useAriaDisabled","useEffect","useState","useHover","jsx","FloatingLabel","booleanishAttrValue","mergeProps","stringAttrValue","mergeRefs"],"mappings":";;;;;;;;;;;;;;;;;;;;AAMA,MAAM,4BACJ,GAAA,+CAAA,CAAA;AAEW,MAAA,eAAA,GAAkBA,4BAAO,KAAO,EAAA;AAAA,EAC3C,QAAU,EAAA,UAAA;AAAA,EACV,KAAO,EAAA,MAAA;AACT,CAAC,CAAA,CAAA;AAEY,MAAA,cAAA,GAAiBA,2BAAO,CAAAC,+BAAA,CAAU,QAAU,EAAA;AAAA,EACvD,GAAK,EAAA,OAAA;AAAA,EACL,OAAS,EAAA,OAAA;AAAA,EACT,YAAc,EAAA,YAAA;AAAA,EACd,UAAY,EAAA,UAAA;AAAA,EACZ,MAAQ,EAAA,aAAA;AAAA,EACR,SAAW,EAAA,YAAA;AAAA,EACX,QAAU,EAAA,MAAA;AAAA,EACV,KAAO,EAAA,MAAA;AAAA,EACP,OAAS,EAAA,WAAA;AAAA,EACT,MAAQ,EAAA,MAAA;AAAA,EACR,KAAO,EAAA,gBAAA;AAAA,EAEP,GAAGC,6BAAgB,QAAS,CAAA,IAAA;AAAA,EAE5B,aAAA,EAAeA,6BAAgB,QAAS,CAAA,QAAA;AAAA,EAExC,qCAAuC,EAAA;AAAA,IACrC,GAAGA,6BAAgB,QAAS,CAAA,QAAA;AAAA,IAC5B,GAAGA,6BAAgB,IAAK,CAAA,QAAA;AAAA,GAC1B;AAAA,EAEA,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,IAC1C,MAAA,EAAQA,6BAAgB,QAAS,CAAA,OAAA;AAAA,GACnC;AAAA,EAEA,GAAGC,wBAAA,CAAM,GAAI,CAAAD,4BAAA,CAAgB,SAAS,OAAO,CAAA;AAAA,EAE7C,gBAAkB,EAAA;AAAA,IAChB,SAAW,EAAA,QAAA;AAAA,GACb;AAAA,EAEA,CAAC,QAAS,CAAA,MAAA,CAAA,4BAAA,EAA4B,gBAAgB,CAAA,GACpDA,6BAAgB,IAAK,CAAA,WAAA;AAAA,EAEvB,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,4BAAgB,CAAA,QAAA,CAAS,KAAM,CAAA,IAAA;AAAA,UAElC,GAAGC,wBAAM,CAAA,GAAA,CAAID,4BAAgB,CAAA,QAAA,CAAS,MAAM,OAAO,CAAA;AAAA,UAEnD,MAAA,EAAQA,4BAAgB,CAAA,QAAA,CAAS,KAAM,CAAA,OAAA;AAAA,SACzC;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,4BAAgB,CAAA,QAAA,CAAS,OAAQ,CAAA,IAAA;AAAA,UAEpC,GAAGC,wBAAM,CAAA,GAAA,CAAID,4BAAgB,CAAA,QAAA,CAAS,QAAQ,OAAO,CAAA;AAAA,UAErD,MAAA,EAAQA,4BAAgB,CAAA,QAAA,CAAS,OAAQ,CAAA,OAAA;AAAA,SAC3C;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AChDM,MAAM,WAAWE,yBAAM,CAAA,UAAA;AAAA,EAI5B,CACE;AAAA,IACE,EAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,kBAAoB,EAAA,eAAA;AAAA,IACpB,eAAiB,EAAA,YAAA;AAAA,IACjB,cAAgB,EAAA,WAAA;AAAA,IAChB,QAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AA3CP,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AA4CI,IAAM,MAAA,WAAA,GAAcA,yBAAM,CAAA,MAAA,CAA4B,IAAI,CAAA,CAAA;AAC1D,IAAM,MAAA;AAAA,MACJ,KAAA;AAAA,MACA,sBAAA;AAAA,MACA,aAAA;AAAA,MACA,KAAO,EAAA,cAAA;AAAA,MACP,eAAiB,EAAA,2BAAA;AAAA,MACjB,WAAa,EAAA,oBAAA;AAAA,MACb,cAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,QACEC,wCAAyC,EAAA,CAAA;AAE7C,IAAA,MAAM,eAAeC,2CAAgB,CAAA;AAAA,MACnC,GAAG,SAAA;AAAA,MACH,YAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAAC,eAAA,CAAU,MAAM;AACd,MAAc,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,QAAA,CAAA,CAAA;AACd,MAAc,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,QAAA,CAAA,CAAA;AACd,MAAc,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,QAAA,CAAA,CAAA;AACd,MAAkB,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAA,YAAA,CAAA,CAAA;AAAA,KACjB,EAAA;AAAA,MACD,QAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAC5C,IAAA,MAAM,EAAE,UAAY,EAAA,SAAA,EAAW,SAAY,GAAAC,qBAAA,CAAS,EAAE,CAAA,CAAA;AAEtD,IAAA,MAAM,iBAAiBL,yBAAM,CAAA,WAAA;AAAA,MAC3B,CAAC,CAA6C,KAAA;AAC5C,QAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AACf,QAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA;AAAA,OACZ;AAAA,MACA,CAAC,YAAY,OAAO,CAAA;AAAA,KACtB,CAAA;AACA,IAAA,MAAM,gBAAgBA,yBAAM,CAAA,WAAA;AAAA,MAC1B,CAAC,CAA6C,KAAA;AAC5C,QAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,QAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,CAAA,CAAA,CAAA;AAAA,OACX;AAAA,MACA,CAAC,YAAY,MAAM,CAAA;AAAA,KACrB,CAAA;AAGA,IAAM,MAAA,aAAA,GAAA,CACJ,6BAAY,OAAZ,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAqB,UAArB,IACA,GAAA,EAAA,GAAA,YAAA,CAAa,KADb,KAAA,IAAA,GAAA,EAAA,GAEA,YAAa,CAAA,YAAA,CAAA;AACf,IAAA,MAAM,gBACJ,WAAgB,KAAA,KAAA,CAAA,IACf,aAAkB,KAAA,KAAA,CAAA,IAAa,kBAAkB,EAClD,IAAA,OAAA,CAAA;AAEF,IAAA,uCACG,eACE,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,sBAAA,oBACEM,cAAA,CAAAC,kCAAA,EAAA,EAAc,QAAU,EAAA,aAAA,EAAgB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBAEjDD,cAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,cAAA,EAAcE,sCAAoB,OAAO,CAAA;AAAA,UACzC,cAAA,EAAcA,sCAAoB,OAAO,CAAA;AAAA,UACxC,GAAGC,gBAAW,CAAA,YAAA,EAAc,UAAU,CAAA;AAAA,UACvC,IAAI,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,aAAA;AAAA,UACV,OAAO,KAAS,IAAA,IAAA,GAAA,KAAA,GAAA,cAAA;AAAA,UAChB,QAAA;AAAA,UACA,kBAAkB,EAAAC,iCAAA;AAAA,YAChB,eAAA;AAAA,YACA,2BAAA;AAAA,WACF;AAAA,UACA,gBAAc,WAAe,IAAA,IAAA,GAAA,WAAA,GAAA,oBAAA;AAAA,UAC7B,QAAA,EAAU,aAAa,IAAQ,IAAA,KAAA,CAAA;AAAA,UAC/B,QAAA,EAAU,aAAa,IAAQ,IAAA,KAAA,CAAA;AAAA,UAC/B,WAAA;AAAA,UACA,OAAS,EAAA,cAAA;AAAA,UACT,MAAQ,EAAA,aAAA;AAAA,UACR,KAAKC,2BAAU,CAAA,CAAC,WAAa,EAAA,cAAA,EAAgB,UAAU,CAAC,CAAA;AAAA,SAAA;AAAA,OAC1D;AAAA,KACF,EAAA,CAAA,CAAA;AAAA,GAEJ;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 { styles as baseInputStyles } from '@mirohq/design-system-base-input'\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  overflowWrap: 'break-word',\n  whiteSpace: 'pre-wrap',\n  height: 'max-content',\n  boxSizing: 'border-box',\n  maxWidth: '100%',\n  width: '100%',\n  padding: '$100 $150',\n  resize: 'auto',\n  color: '$text-neutrals',\n\n  ...baseInputStyles.variants.idle,\n\n  '&:read-only': baseInputStyles.variants.readOnly,\n\n  '&:disabled, &[aria-disabled=\"true\"]': {\n    ...baseInputStyles.variants.disabled,\n    ...baseInputStyles.base.disabled,\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})`]: {\n    _hover: baseInputStyles.variants.hovered,\n  },\n\n  ...focus.css(baseInputStyles.variants.focused),\n\n  '&::placeholder': {\n    fontStyle: 'italic',\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})::placeholder`]:\n    baseInputStyles.base.placeholder,\n\n  variants: {\n    valid: {\n      true: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...baseInputStyles.variants.valid.idle,\n\n          ...focus.css(baseInputStyles.variants.valid.focused),\n\n          _hover: baseInputStyles.variants.valid.hovered,\n        },\n      },\n      false: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...baseInputStyles.variants.invalid.idle,\n\n          ...focus.css(baseInputStyles.variants.invalid.focused),\n\n          _hover: baseInputStyles.variants.invalid.hovered,\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 {\n  FloatingLabel,\n  useFormFieldContext,\n} 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      label,\n      shouldUseFloatingLabel,\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    // label\n    const textareaValue =\n      textareaRef.current?.value ??\n      elementProps.value ??\n      elementProps.defaultValue\n    const floatingLabel =\n      placeholder !== undefined ||\n      (textareaValue !== undefined && textareaValue !== '') ||\n      focused\n\n    return (\n      <StyledContainer\n        css={css}\n        // @ts-expect-error className required when extending the component with styled()\n        className={className}\n      >\n        {shouldUseFloatingLabel && (\n          <FloatingLabel floating={floatingLabel}>{label}</FloatingLabel>\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        />\n      </StyledContainer>\n    )\n  }\n)\n"],"names":["styled","Primitive","baseInputStyles","focus","React","useFormFieldContext","useAriaDisabled","useEffect","useState","useHover","jsxs","jsx","FloatingLabel","booleanishAttrValue","mergeProps","stringAttrValue","mergeRefs"],"mappings":"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"}

package/dist/module.js

@@ -74,6 +74,9 @@ const Textarea = React.forwardRef(
     required,
     placeholder,
     valid,
+    css,
+    // @ts-expect-error className required when extending the component with styled()
+    className,
     ...restProps
   }, forwardRef) => {
     var _a, _b, _c;
@@ -128,31 +131,39 @@ const Textarea = React.forwardRef(
     );
     const textareaValue = (_c = (_b = (_a = textareaRef.current) == null ? void 0 : _a.value) != null ? _b : elementProps.value) != null ? _c : elementProps.defaultValue;
     const floatingLabel = placeholder !== void 0 || textareaValue !== void 0 && textareaValue !== "" || focused;
-    return /* @__PURE__ */ jsxs(StyledContainer, { children: [
-      shouldUseFloatingLabel && /* @__PURE__ */ jsx(FloatingLabel, { floating: floatingLabel, children: label }),
-      /* @__PURE__ */ jsx(
-        StyledTextarea,
-        {
-          "data-focused": booleanishAttrValue(focused),
-          "data-hovered": booleanishAttrValue(hovered),
-          ...mergeProps(elementProps, hoverProps),
-          id: id != null ? id : formElementId,
-          valid: valid != null ? valid : formFieldValid,
-          readOnly,
-          "aria-describedby": stringAttrValue(
-            ariaDescribedBy,
-            formFieldContextDescribedBy
-          ),
-          "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
-          disabled: disabled === true || void 0,
-          required: required === true || void 0,
-          placeholder,
-          onFocus: onFocusHandler,
-          onBlur: onBlurHandler,
-          ref: mergeRefs([textareaRef, formElementRef, forwardRef])
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxs(
+      StyledContainer,
+      {
+        css,
+        className,
+        children: [
+          shouldUseFloatingLabel && /* @__PURE__ */ jsx(FloatingLabel, { floating: floatingLabel, children: label }),
+          /* @__PURE__ */ jsx(
+            StyledTextarea,
+            {
+              "data-focused": booleanishAttrValue(focused),
+              "data-hovered": booleanishAttrValue(hovered),
+              ...mergeProps(elementProps, hoverProps),
+              id: id != null ? id : formElementId,
+              valid: valid != null ? valid : formFieldValid,
+              readOnly,
+              "aria-describedby": stringAttrValue(
+                ariaDescribedBy,
+                formFieldContextDescribedBy
+              ),
+              "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
+              disabled: disabled === true || void 0,
+              required: required === true || void 0,
+              placeholder,
+              onFocus: onFocusHandler,
+              onBlur: onBlurHandler,
+              "data-form-element": "textarea",
+              ref: mergeRefs([textareaRef, formElementRef, forwardRef])
+            }
+          )
+        ]
+      }
+    );
   }
 );
 

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 { styles as baseInputStyles } from '@mirohq/design-system-base-input'\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  overflowWrap: 'break-word',\n  whiteSpace: 'pre-wrap',\n  height: 'max-content',\n  boxSizing: 'border-box',\n  maxWidth: '100%',\n  width: '100%',\n  padding: '$100 $150',\n  resize: 'auto',\n  color: '$text-neutrals',\n\n  ...baseInputStyles.variants.idle,\n\n  '&:read-only': baseInputStyles.variants.readOnly,\n\n  '&:disabled, &[aria-disabled=\"true\"]': {\n    ...baseInputStyles.variants.disabled,\n    ...baseInputStyles.base.disabled,\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})`]: {\n    _hover: baseInputStyles.variants.hovered,\n  },\n\n  ...focus.css(baseInputStyles.variants.focused),\n\n  '&::placeholder': {\n    fontStyle: 'italic',\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})::placeholder`]:\n    baseInputStyles.base.placeholder,\n\n  variants: {\n    valid: {\n      true: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...baseInputStyles.variants.valid.idle,\n\n          ...focus.css(baseInputStyles.variants.valid.focused),\n\n          _hover: baseInputStyles.variants.valid.hovered,\n        },\n      },\n      false: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...baseInputStyles.variants.invalid.idle,\n\n          ...focus.css(baseInputStyles.variants.invalid.focused),\n\n          _hover: baseInputStyles.variants.invalid.hovered,\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 {\n  FloatingLabel,\n  useFormFieldContext,\n} 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      ...restProps\n    },\n    forwardRef\n  ) => {\n    const textareaRef = React.useRef<HTMLTextAreaElement>(null)\n    const {\n      label,\n      shouldUseFloatingLabel,\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    // label\n    const textareaValue =\n      textareaRef.current?.value ??\n      elementProps.value ??\n      elementProps.defaultValue\n    const floatingLabel =\n      placeholder !== undefined ||\n      (textareaValue !== undefined && textareaValue !== '') ||\n      focused\n\n    return (\n      <StyledContainer>\n        {shouldUseFloatingLabel && (\n          <FloatingLabel floating={floatingLabel}>{label}</FloatingLabel>\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          ref={mergeRefs([textareaRef, formElementRef, forwardRef])}\n        />\n      </StyledContainer>\n    )\n  }\n)\n"],"names":["baseInputStyles"],"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 { styles as baseInputStyles } from '@mirohq/design-system-base-input'\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  overflowWrap: 'break-word',\n  whiteSpace: 'pre-wrap',\n  height: 'max-content',\n  boxSizing: 'border-box',\n  maxWidth: '100%',\n  width: '100%',\n  padding: '$100 $150',\n  resize: 'auto',\n  color: '$text-neutrals',\n\n  ...baseInputStyles.variants.idle,\n\n  '&:read-only': baseInputStyles.variants.readOnly,\n\n  '&:disabled, &[aria-disabled=\"true\"]': {\n    ...baseInputStyles.variants.disabled,\n    ...baseInputStyles.base.disabled,\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})`]: {\n    _hover: baseInputStyles.variants.hovered,\n  },\n\n  ...focus.css(baseInputStyles.variants.focused),\n\n  '&::placeholder': {\n    fontStyle: 'italic',\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})::placeholder`]:\n    baseInputStyles.base.placeholder,\n\n  variants: {\n    valid: {\n      true: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...baseInputStyles.variants.valid.idle,\n\n          ...focus.css(baseInputStyles.variants.valid.focused),\n\n          _hover: baseInputStyles.variants.valid.hovered,\n        },\n      },\n      false: {\n        [`&:not(${disabledAndReadonlySelectors})`]: {\n          ...baseInputStyles.variants.invalid.idle,\n\n          ...focus.css(baseInputStyles.variants.invalid.focused),\n\n          _hover: baseInputStyles.variants.invalid.hovered,\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 {\n  FloatingLabel,\n  useFormFieldContext,\n} 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      label,\n      shouldUseFloatingLabel,\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    // label\n    const textareaValue =\n      textareaRef.current?.value ??\n      elementProps.value ??\n      elementProps.defaultValue\n    const floatingLabel =\n      placeholder !== undefined ||\n      (textareaValue !== undefined && textareaValue !== '') ||\n      focused\n\n    return (\n      <StyledContainer\n        css={css}\n        // @ts-expect-error className required when extending the component with styled()\n        className={className}\n      >\n        {shouldUseFloatingLabel && (\n          <FloatingLabel floating={floatingLabel}>{label}</FloatingLabel>\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        />\n      </StyledContainer>\n    )\n  }\n)\n"],"names":["baseInputStyles"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-textarea",
-  "version": "0.2.17-combobox.0",
+  "version": "0.3.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -28,13 +28,13 @@
   "dependencies": {
     "@react-aria/interactions": "^3.13.0",
     "@react-aria/utils": "^3.13.0",
-    "@mirohq/design-system-base-form": "^0.2.12",
     "@mirohq/design-system-base-input": "^0.0.4",
     "@mirohq/design-system-primitive": "^1.1.2",
     "@mirohq/design-system-stitches": "^2.6.10",
-    "@mirohq/design-system-styles": "^1.2.10-combobox.0",
+    "@mirohq/design-system-styles": "^1.2.9",
     "@mirohq/design-system-utils": "^0.15.4",
-    "@mirohq/design-system-use-aria-disabled": "^0.1.5-combobox.0"
+    "@mirohq/design-system-base-form": "^0.2.12",
+    "@mirohq/design-system-use-aria-disabled": "^0.1.4"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",