@mirohq/design-system-textarea 1.1.3-aria-label-icon-button.2 → 1.2.0-fix-stitches-types.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.js +4 -10
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +1 -1
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +29 -9
  6. package/package.json +8 -8
package/dist/main.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var jsxRuntime = require('react/jsx-runtime');
6
4
  var React = require('react');
7
5
  var designSystemUtils = require('@mirohq/design-system-utils');
@@ -14,10 +12,6 @@ var designSystemStyles = require('@mirohq/design-system-styles');
14
12
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
15
13
  var designSystemBaseTextField = require('@mirohq/design-system-base-text-field');
16
14
 
17
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
-
19
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
20
-
21
15
  const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"]';
22
16
  const StyledContainer = designSystemStitches.styled("div", {
23
17
  position: "relative",
@@ -61,7 +55,7 @@ const StyledTextarea = designSystemStitches.styled(designSystemPrimitive.Primiti
61
55
  }
62
56
  });
63
57
 
64
- const Textarea = React__default["default"].forwardRef(
58
+ const Textarea = React.forwardRef(
65
59
  ({
66
60
  id,
67
61
  onFocus,
@@ -79,7 +73,7 @@ const Textarea = React__default["default"].forwardRef(
79
73
  className,
80
74
  ...restProps
81
75
  }, forwardRef) => {
82
- const textareaRef = React__default["default"].useRef(null);
76
+ const textareaRef = React.useRef(null);
83
77
  const {
84
78
  formElementId,
85
79
  valid: formFieldValid,
@@ -112,14 +106,14 @@ const Textarea = React__default["default"].forwardRef(
112
106
  ]);
113
107
  const [focused, setFocused] = React.useState(false);
114
108
  const { hoverProps, isHovered: hovered } = interactions.useHover({});
115
- const onFocusHandler = React__default["default"].useCallback(
109
+ const onFocusHandler = React.useCallback(
116
110
  (e) => {
117
111
  setFocused(true);
118
112
  onFocus == null ? void 0 : onFocus(e);
119
113
  },
120
114
  [setFocused, onFocus]
121
115
  );
122
- const onBlurHandler = React__default["default"].useCallback(
116
+ const onBlurHandler = React.useCallback(
123
117
  (e) => {
124
118
  setFocused(false);
125
119
  onBlur == null ? void 0 : onBlur(e);
package/dist/main.js.map CHANGED
@@ -1 +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 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","React","useFormFieldContext","useAriaDisabled","useEffect","useState","useHover","jsx","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,MAAQ,EAAA,aAAA;AAAA,EACR,QAAU,EAAA,MAAA;AAAA,EACV,OAAS,EAAA,WAAA;AAAA,EACT,YAAc,EAAA,YAAA;AAAA,EACd,UAAY,EAAA,UAAA;AAAA,EACZ,MAAQ,EAAA,MAAA;AAAA,EAER,GAAGC,0CAAgB,QAAS,CAAA,IAAA;AAAA,EAE5B,aAAA,EAAeA,0CAAgB,QAAS,CAAA,QAAA;AAAA,EAExC,qCAAuC,EAAA;AAAA,IACrC,GAAGA,0CAAgB,QAAS,CAAA,QAAA;AAAA,IAC5B,GAAGA,0CAAgB,IAAK,CAAA,QAAA;AAAA,GAC1B;AAAA,EAEA,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,IAC1C,MAAA,EAAQA,0CAAgB,QAAS,CAAA,OAAA;AAAA,GACnC;AAAA,EAEA,GAAGC,wBAAA,CAAM,GAAI,CAAAD,yCAAA,CAAgB,SAAS,OAAO,CAAA;AAAA,EAE7C,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,gBAAA,CAAgB,GAAG;AAAA,IACvD,KAAA,EAAOA,yCAAgB,CAAA,IAAA,CAAK,WAAY,CAAA,KAAA;AAAA,GAC1C;AAAA,EAEA,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,yCAAgB,CAAA,QAAA,CAAS,KAAM,CAAA,IAAA;AAAA,SACpC;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,yCAAgB,CAAA,QAAA,CAAS,OAAQ,CAAA,IAAA;AAAA,SACtC;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACrCM,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,GAAA;AAAA;AAAA,IAEA,SAAA;AAAA,IACA,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAM,MAAA,WAAA,GAAcA,yBAAM,CAAA,MAAA,CAA4B,IAAI,CAAA,CAAA;AAC1D,IAAM,MAAA;AAAA,MACJ,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;AAEA,IAAM,MAAA;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,YAAA;AAAA,KACL,GAAI,oBAAO,EAAC,CAAA;AAEZ,IAAA,MAAM,WAAc,GAAA;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,OAAA;AAAA,KACF,CAAA;AAEA,IACE,uBAAAM,cAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,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,gBAAW,CAAA,YAAA,EAAc,UAAU,CAAA;AAAA,YACvC,IAAI,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,aAAA;AAAA,YACV,OAAO,KAAS,IAAA,IAAA,GAAA,KAAA,GAAA,cAAA;AAAA,YAChB,QAAA;AAAA,YACA,kBAAkB,EAAAC,iCAAA;AAAA,cAChB,eAAA;AAAA,cACA,2BAAA;AAAA,aACF;AAAA,YACA,gBAAc,WAAe,IAAA,IAAA,GAAA,WAAA,GAAA,oBAAA;AAAA,YAC7B,QAAA,EAAU,aAAa,IAAQ,IAAA,KAAA,CAAA;AAAA,YAC/B,QAAA,EAAU,aAAa,IAAQ,IAAA,KAAA,CAAA;AAAA,YAC/B,WAAA;AAAA,YACA,OAAS,EAAA,cAAA;AAAA,YACT,MAAQ,EAAA,aAAA;AAAA,YACR,mBAAkB,EAAA,UAAA;AAAA,YAClB,KAAKC,2BAAU,CAAA,CAAC,WAAa,EAAA,cAAA,EAAgB,UAAU,CAAC,CAAA;AAAA,YACxD,GAAK,EAAA,WAAA;AAAA,WAAA;AAAA,SACP;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}
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 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":"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"}
package/dist/module.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import React, { useEffect, useState } from 'react';
3
- import { booleanishAttrValue, stringAttrValue, mergeRefs } from '@mirohq/design-system-utils';
3
+ import { mergeRefs, stringAttrValue, booleanishAttrValue } from '@mirohq/design-system-utils';
4
4
  import { useFormFieldContext } from '@mirohq/design-system-base-form';
5
5
  import { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled';
6
6
  import { useHover } from '@react-aria/interactions';
package/dist/module.js.map CHANGED
@@ -1 +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 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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"}
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 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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"}
package/dist/types.d.ts CHANGED
@@ -1,19 +1,39 @@
1
- import * as react from 'react';
2
- import react__default, { ComponentPropsWithRef } from 'react';
1
+ import * as React from 'react';
2
+ import React__default, { ComponentPropsWithRef } from 'react';
3
3
  import { FormElementProps } from '@mirohq/design-system-base-form';
4
4
  import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
5
- import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
6
5
  import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
7
6
 
8
- declare const StyledTextarea: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"textarea">>>, "valid"> & _stitches_react_types_styled_component.TransformProps<{
9
- valid?: boolean | "false" | "true" | undefined;
10
- }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"textarea">>, {
11
- valid?: boolean | "false" | "true" | undefined;
7
+ /* Utilities */
8
+ /* ========================================================================== */
9
+
10
+ /** Returns a string with the given prefix followed by the given values. */
11
+ type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
12
+
13
+ type TransformProps<Props, Media> = {
14
+ [K in keyof Props]: (
15
+ | Props[K]
16
+ | (
17
+ & {
18
+ [KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
19
+ }
20
+ & {
21
+ [KMedia in string]: Props[K]
22
+ }
23
+ )
24
+ )
25
+ }
26
+
27
+ declare const StyledTextarea: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"textarea">>>, "valid"> & TransformProps<{
28
+ valid?: boolean | "true" | "false" | undefined;
29
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"textarea">>, {
30
+ valid?: boolean | "true" | "false" | undefined;
12
31
  }, {}>;
13
32
  type StyledTextareaProps = ComponentPropsWithRef<typeof StyledTextarea>;
14
33
 
15
34
  interface TextareaProps extends FormElementProps, Omit<StyledTextareaProps, keyof FormElementProps> {
16
35
  }
17
- declare const Textarea: react__default.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & react__default.RefAttributes<HTMLTextAreaElement>>;
36
+ declare const Textarea: React__default.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React__default.RefAttributes<HTMLTextAreaElement>>;
18
37
 
19
- export { Textarea, TextareaProps };
38
+ export { Textarea };
39
+ export type { TextareaProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-textarea",
3
- "version": "1.1.3-aria-label-icon-button.2",
3
+ "version": "1.2.0-fix-stitches-types.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -28,13 +28,13 @@
28
28
  "dependencies": {
29
29
  "@react-aria/interactions": "^3.13.0",
30
30
  "@react-aria/utils": "^3.31.0",
31
- "@mirohq/design-system-base-form": "^1.1.3-aria-label-icon-button.2",
32
- "@mirohq/design-system-base-text-field": "^1.2.1-aria-label-icon-button.2",
33
- "@mirohq/design-system-primitive": "^2.1.0",
34
- "@mirohq/design-system-stitches": "^3.1.2-aria-label-icon-button.2",
35
- "@mirohq/design-system-styles": "^3.0.1-aria-label-icon-button.2",
36
- "@mirohq/design-system-use-aria-disabled": "^1.1.1-aria-label-icon-button.2",
37
- "@mirohq/design-system-utils": "^1.2.1-aria-label-icon-button.2"
31
+ "@mirohq/design-system-base-form": "^1.2.0-fix-stitches-types.0",
32
+ "@mirohq/design-system-base-text-field": "^1.3.0-fix-stitches-types.0",
33
+ "@mirohq/design-system-primitive": "^2.2.0-fix-stitches-types.0",
34
+ "@mirohq/design-system-stitches": "^3.2.0-fix-stitches-types.0",
35
+ "@mirohq/design-system-styles": "^3.1.0-fix-stitches-types.0",
36
+ "@mirohq/design-system-use-aria-disabled": "^1.1.1",
37
+ "@mirohq/design-system-utils": "^1.2.1"
38
38
  },
39
39
  "scripts": {
40
40
  "build": "rollup -c ../../../rollup.config.js",