@mirohq/design-system-textarea 0.5.0-new-focus-keyboard.0 → 1.0.0-pdl-removing-ffs.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 +57 -69
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +59 -71
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +3 -5
  6. package/package.json +8 -9
package/dist/main.js CHANGED
@@ -9,7 +9,6 @@ var designSystemBaseForm = require('@mirohq/design-system-base-form');
9
9
  var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
10
10
  var interactions = require('@react-aria/interactions');
11
11
  var utils = require('@react-aria/utils');
12
- var designSystemExperiments = require('@mirohq/design-system-experiments');
13
12
  var designSystemStitches = require('@mirohq/design-system-stitches');
14
13
  var designSystemStyles = require('@mirohq/design-system-styles');
15
14
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
@@ -40,23 +39,14 @@ const StyledTextarea = designSystemStitches.styled(designSystemPrimitive.Primiti
40
39
  ...designSystemBaseTextField.textFieldStyles.base.disabled
41
40
  },
42
41
  ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
43
- _hover: designSystemBaseTextField.textFieldStyles.variants.hovered
42
+ _hover: designSystemBaseTextField.textFieldStyles.variants.hovered,
43
+ ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.variants.focused)
44
44
  },
45
45
  ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.variants.focused),
46
+ ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: {
47
+ color: designSystemBaseTextField.textFieldStyles.base.placeholder.color
48
+ },
46
49
  variants: {
47
- v1: {
48
- true: {
49
- ...designSystemBaseTextField.textFieldStyles.v1.idle,
50
- ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: designSystemBaseTextField.textFieldStyles.base.placeholder.v1,
51
- "&:read-only": designSystemBaseTextField.textFieldStyles.v1.readOnly
52
- },
53
- false: {
54
- "&::placeholder": {
55
- fontStyle: "italic"
56
- },
57
- ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: designSystemBaseTextField.textFieldStyles.base.placeholder.old
58
- }
59
- },
60
50
  valid: {
61
51
  true: {
62
52
  ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
@@ -69,25 +59,7 @@ const StyledTextarea = designSystemStitches.styled(designSystemPrimitive.Primiti
69
59
  }
70
60
  }
71
61
  }
72
- },
73
- compoundVariants: [
74
- {
75
- valid: false,
76
- css: {
77
- ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
78
- ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.variants.invalid.focused)
79
- }
80
- }
81
- },
82
- {
83
- valid: true,
84
- css: {
85
- ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
86
- ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.variants.valid.focused)
87
- }
88
- }
89
- }
90
- ]
62
+ }
91
63
  });
92
64
 
93
65
  const Textarea = React__default["default"].forwardRef(
@@ -108,11 +80,8 @@ const Textarea = React__default["default"].forwardRef(
108
80
  className,
109
81
  ...restProps
110
82
  }, forwardRef) => {
111
- var _a, _b, _c;
112
83
  const textareaRef = React__default["default"].useRef(null);
113
84
  const {
114
- label,
115
- shouldUseFloatingLabel,
116
85
  formElementId,
117
86
  valid: formFieldValid,
118
87
  ariaDescribedBy: formFieldContextDescribedBy,
@@ -123,7 +92,6 @@ const Textarea = React__default["default"].forwardRef(
123
92
  setDisabled,
124
93
  setAriaDisabled
125
94
  } = designSystemBaseForm.useFormFieldContext();
126
- const [v1] = designSystemExperiments.useNewDesignLanguage();
127
95
  const elementProps = designSystemUseAriaDisabled.useAriaDisabled({
128
96
  ...restProps,
129
97
  ariaDisabled
@@ -159,40 +127,60 @@ const Textarea = React__default["default"].forwardRef(
159
127
  },
160
128
  [setFocused, onBlur]
161
129
  );
162
- const textareaValue = (_c = (_b = (_a = textareaRef.current) == null ? void 0 : _a.value) != null ? _b : elementProps.value) != null ? _c : elementProps.defaultValue;
163
- const floatingLabel = placeholder !== void 0 || textareaValue !== void 0 && textareaValue !== "" || focused;
164
- return /* @__PURE__ */ jsxRuntime.jsxs(
130
+ const {
131
+ overflow,
132
+ resize,
133
+ caretColor,
134
+ lineHeight,
135
+ letterSpacing,
136
+ textIndent,
137
+ whiteSpace,
138
+ wordWrap,
139
+ direction,
140
+ tabSize,
141
+ ...containerCss
142
+ } = css != null ? css : {};
143
+ const textareaCss = {
144
+ overflow,
145
+ resize,
146
+ caretColor,
147
+ lineHeight,
148
+ letterSpacing,
149
+ textIndent,
150
+ whiteSpace,
151
+ wordWrap,
152
+ direction,
153
+ tabSize
154
+ };
155
+ return /* @__PURE__ */ jsxRuntime.jsx(
165
156
  StyledContainer,
166
157
  {
167
- css,
158
+ css: containerCss,
168
159
  className,
169
- children: [
170
- shouldUseFloatingLabel && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: floatingLabel, children: label }),
171
- /* @__PURE__ */ jsxRuntime.jsx(
172
- StyledTextarea,
173
- {
174
- v1,
175
- "data-focused": designSystemUtils.booleanishAttrValue(focused),
176
- "data-hovered": designSystemUtils.booleanishAttrValue(hovered),
177
- ...utils.mergeProps(elementProps, hoverProps),
178
- id: id != null ? id : formElementId,
179
- valid: valid != null ? valid : formFieldValid,
180
- readOnly,
181
- "aria-describedby": designSystemUtils.stringAttrValue(
182
- ariaDescribedBy,
183
- formFieldContextDescribedBy
184
- ),
185
- "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
186
- disabled: disabled === true || void 0,
187
- required: required === true || void 0,
188
- placeholder,
189
- onFocus: onFocusHandler,
190
- onBlur: onBlurHandler,
191
- "data-form-element": "textarea",
192
- ref: designSystemUtils.mergeRefs([textareaRef, formElementRef, forwardRef])
193
- }
194
- )
195
- ]
160
+ children: /* @__PURE__ */ jsxRuntime.jsx(
161
+ StyledTextarea,
162
+ {
163
+ "data-focused": designSystemUtils.booleanishAttrValue(focused),
164
+ "data-hovered": designSystemUtils.booleanishAttrValue(hovered),
165
+ ...utils.mergeProps(elementProps, hoverProps),
166
+ id: id != null ? id : formElementId,
167
+ valid: valid != null ? valid : formFieldValid,
168
+ readOnly,
169
+ "aria-describedby": designSystemUtils.stringAttrValue(
170
+ ariaDescribedBy,
171
+ formFieldContextDescribedBy
172
+ ),
173
+ "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
174
+ disabled: disabled === true || void 0,
175
+ required: required === true || void 0,
176
+ placeholder,
177
+ onFocus: onFocusHandler,
178
+ onBlur: onBlurHandler,
179
+ "data-form-element": "textarea",
180
+ ref: designSystemUtils.mergeRefs([textareaRef, formElementRef, forwardRef]),
181
+ css: textareaCss
182
+ }
183
+ )
196
184
  }
197
185
  );
198
186
  }
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 variants: {\n v1: {\n true: {\n ...textFieldStyles.v1.idle,\n\n [`&:not(${disabledAndReadonlySelectors})::placeholder`]:\n textFieldStyles.base.placeholder.v1,\n\n '&:read-only': textFieldStyles.v1.readOnly,\n },\n false: {\n '&::placeholder': {\n fontStyle: 'italic',\n },\n\n [`&:not(${disabledAndReadonlySelectors})::placeholder`]:\n textFieldStyles.base.placeholder.old,\n },\n },\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 compoundVariants: [\n {\n valid: false,\n css: {\n [`&:not(${disabledAndReadonlySelectors})`]: {\n ...focus.css(textFieldStyles.variants.invalid.focused),\n },\n },\n },\n {\n valid: true,\n css: {\n [`&:not(${disabledAndReadonlySelectors})`]: {\n ...focus.css(textFieldStyles.variants.valid.focused),\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'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\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 | 'v1'> {}\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 [v1] = useNewDesignLanguage()\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 v1={v1}\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","textFieldStyles","focus","React","useFormFieldContext","useNewDesignLanguage","useAriaDisabled","useEffect","useState","useHover","jsxs","jsx","FloatingLabel","booleanishAttrValue","mergeProps","stringAttrValue","mergeRefs"],"mappings":"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"}
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 ...focus.css(textFieldStyles.variants.focused),\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":"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"}
package/dist/module.js CHANGED
@@ -1,11 +1,10 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
1
+ import { jsx } from 'react/jsx-runtime';
2
2
  import React, { useEffect, useState } from 'react';
3
3
  import { booleanishAttrValue, stringAttrValue, mergeRefs } from '@mirohq/design-system-utils';
4
- import { useFormFieldContext, FloatingLabel } from '@mirohq/design-system-base-form';
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';
7
7
  import { mergeProps } from '@react-aria/utils';
8
- import { useNewDesignLanguage } from '@mirohq/design-system-experiments';
9
8
  import { styled } from '@mirohq/design-system-stitches';
10
9
  import { focus } from '@mirohq/design-system-styles';
11
10
  import { Primitive } from '@mirohq/design-system-primitive';
@@ -32,23 +31,14 @@ const StyledTextarea = styled(Primitive.textarea, {
32
31
  ...textFieldStyles.base.disabled
33
32
  },
34
33
  ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
35
- _hover: textFieldStyles.variants.hovered
34
+ _hover: textFieldStyles.variants.hovered,
35
+ ...focus.css(textFieldStyles.variants.focused)
36
36
  },
37
37
  ...focus.css(textFieldStyles.variants.focused),
38
+ ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: {
39
+ color: textFieldStyles.base.placeholder.color
40
+ },
38
41
  variants: {
39
- v1: {
40
- true: {
41
- ...textFieldStyles.v1.idle,
42
- ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: textFieldStyles.base.placeholder.v1,
43
- "&:read-only": textFieldStyles.v1.readOnly
44
- },
45
- false: {
46
- "&::placeholder": {
47
- fontStyle: "italic"
48
- },
49
- ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: textFieldStyles.base.placeholder.old
50
- }
51
- },
52
42
  valid: {
53
43
  true: {
54
44
  ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
@@ -61,25 +51,7 @@ const StyledTextarea = styled(Primitive.textarea, {
61
51
  }
62
52
  }
63
53
  }
64
- },
65
- compoundVariants: [
66
- {
67
- valid: false,
68
- css: {
69
- ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
70
- ...focus.css(textFieldStyles.variants.invalid.focused)
71
- }
72
- }
73
- },
74
- {
75
- valid: true,
76
- css: {
77
- ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
78
- ...focus.css(textFieldStyles.variants.valid.focused)
79
- }
80
- }
81
- }
82
- ]
54
+ }
83
55
  });
84
56
 
85
57
  const Textarea = React.forwardRef(
@@ -100,11 +72,8 @@ const Textarea = React.forwardRef(
100
72
  className,
101
73
  ...restProps
102
74
  }, forwardRef) => {
103
- var _a, _b, _c;
104
75
  const textareaRef = React.useRef(null);
105
76
  const {
106
- label,
107
- shouldUseFloatingLabel,
108
77
  formElementId,
109
78
  valid: formFieldValid,
110
79
  ariaDescribedBy: formFieldContextDescribedBy,
@@ -115,7 +84,6 @@ const Textarea = React.forwardRef(
115
84
  setDisabled,
116
85
  setAriaDisabled
117
86
  } = useFormFieldContext();
118
- const [v1] = useNewDesignLanguage();
119
87
  const elementProps = useAriaDisabled({
120
88
  ...restProps,
121
89
  ariaDisabled
@@ -151,40 +119,60 @@ const Textarea = React.forwardRef(
151
119
  },
152
120
  [setFocused, onBlur]
153
121
  );
154
- const textareaValue = (_c = (_b = (_a = textareaRef.current) == null ? void 0 : _a.value) != null ? _b : elementProps.value) != null ? _c : elementProps.defaultValue;
155
- const floatingLabel = placeholder !== void 0 || textareaValue !== void 0 && textareaValue !== "" || focused;
156
- return /* @__PURE__ */ jsxs(
122
+ const {
123
+ overflow,
124
+ resize,
125
+ caretColor,
126
+ lineHeight,
127
+ letterSpacing,
128
+ textIndent,
129
+ whiteSpace,
130
+ wordWrap,
131
+ direction,
132
+ tabSize,
133
+ ...containerCss
134
+ } = css != null ? css : {};
135
+ const textareaCss = {
136
+ overflow,
137
+ resize,
138
+ caretColor,
139
+ lineHeight,
140
+ letterSpacing,
141
+ textIndent,
142
+ whiteSpace,
143
+ wordWrap,
144
+ direction,
145
+ tabSize
146
+ };
147
+ return /* @__PURE__ */ jsx(
157
148
  StyledContainer,
158
149
  {
159
- css,
150
+ css: containerCss,
160
151
  className,
161
- children: [
162
- shouldUseFloatingLabel && /* @__PURE__ */ jsx(FloatingLabel, { floating: floatingLabel, children: label }),
163
- /* @__PURE__ */ jsx(
164
- StyledTextarea,
165
- {
166
- v1,
167
- "data-focused": booleanishAttrValue(focused),
168
- "data-hovered": booleanishAttrValue(hovered),
169
- ...mergeProps(elementProps, hoverProps),
170
- id: id != null ? id : formElementId,
171
- valid: valid != null ? valid : formFieldValid,
172
- readOnly,
173
- "aria-describedby": stringAttrValue(
174
- ariaDescribedBy,
175
- formFieldContextDescribedBy
176
- ),
177
- "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
178
- disabled: disabled === true || void 0,
179
- required: required === true || void 0,
180
- placeholder,
181
- onFocus: onFocusHandler,
182
- onBlur: onBlurHandler,
183
- "data-form-element": "textarea",
184
- ref: mergeRefs([textareaRef, formElementRef, forwardRef])
185
- }
186
- )
187
- ]
152
+ children: /* @__PURE__ */ jsx(
153
+ StyledTextarea,
154
+ {
155
+ "data-focused": booleanishAttrValue(focused),
156
+ "data-hovered": booleanishAttrValue(hovered),
157
+ ...mergeProps(elementProps, hoverProps),
158
+ id: id != null ? id : formElementId,
159
+ valid: valid != null ? valid : formFieldValid,
160
+ readOnly,
161
+ "aria-describedby": stringAttrValue(
162
+ ariaDescribedBy,
163
+ formFieldContextDescribedBy
164
+ ),
165
+ "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
166
+ disabled: disabled === true || void 0,
167
+ required: required === true || void 0,
168
+ placeholder,
169
+ onFocus: onFocusHandler,
170
+ onBlur: onBlurHandler,
171
+ "data-form-element": "textarea",
172
+ ref: mergeRefs([textareaRef, formElementRef, forwardRef]),
173
+ css: textareaCss
174
+ }
175
+ )
188
176
  }
189
177
  );
190
178
  }
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 variants: {\n v1: {\n true: {\n ...textFieldStyles.v1.idle,\n\n [`&:not(${disabledAndReadonlySelectors})::placeholder`]:\n textFieldStyles.base.placeholder.v1,\n\n '&:read-only': textFieldStyles.v1.readOnly,\n },\n false: {\n '&::placeholder': {\n fontStyle: 'italic',\n },\n\n [`&:not(${disabledAndReadonlySelectors})::placeholder`]:\n textFieldStyles.base.placeholder.old,\n },\n },\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 compoundVariants: [\n {\n valid: false,\n css: {\n [`&:not(${disabledAndReadonlySelectors})`]: {\n ...focus.css(textFieldStyles.variants.invalid.focused),\n },\n },\n },\n {\n valid: true,\n css: {\n [`&:not(${disabledAndReadonlySelectors})`]: {\n ...focus.css(textFieldStyles.variants.valid.focused),\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'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\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 | 'v1'> {}\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 [v1] = useNewDesignLanguage()\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 v1={v1}\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":[],"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 ...focus.css(textFieldStyles.variants.focused),\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
@@ -5,16 +5,14 @@ import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitiv
5
5
  import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
6
6
  import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
7
7
 
8
- declare const StyledTextarea: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"textarea">>>, "valid" | "v1"> & _stitches_react_types_styled_component.TransformProps<{
9
- v1?: boolean | "false" | "true" | undefined;
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<{
10
9
  valid?: boolean | "false" | "true" | undefined;
11
10
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"textarea">>, {
12
- v1?: boolean | "false" | "true" | undefined;
13
11
  valid?: boolean | "false" | "true" | undefined;
14
12
  }, {}>;
15
- declare type StyledTextareaProps = ComponentPropsWithRef<typeof StyledTextarea>;
13
+ type StyledTextareaProps = ComponentPropsWithRef<typeof StyledTextarea>;
16
14
 
17
- interface TextareaProps extends FormElementProps, Omit<StyledTextareaProps, keyof FormElementProps | 'v1'> {
15
+ interface TextareaProps extends FormElementProps, Omit<StyledTextareaProps, keyof FormElementProps> {
18
16
  }
19
17
  declare const Textarea: react__default.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & react__default.RefAttributes<HTMLTextAreaElement>>;
20
18
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-textarea",
3
- "version": "0.5.0-new-focus-keyboard.0",
3
+ "version": "1.0.0-pdl-removing-ffs.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -28,14 +28,13 @@
28
28
  "dependencies": {
29
29
  "@react-aria/interactions": "^3.13.0",
30
30
  "@react-aria/utils": "^3.13.0",
31
- "@mirohq/design-system-base-form": "^0.3.5-new-focus-keyboard.0",
32
- "@mirohq/design-system-experiments": "^0.2.0",
33
- "@mirohq/design-system-primitive": "^1.1.2",
34
- "@mirohq/design-system-base-text-field": "^0.3.0-new-focus-keyboard.0",
35
- "@mirohq/design-system-stitches": "^2.6.31-new-focus-keyboard.0",
36
- "@mirohq/design-system-styles": "^1.2.31-new-focus-keyboard.0",
37
- "@mirohq/design-system-utils": "^0.15.5",
38
- "@mirohq/design-system-use-aria-disabled": "^0.2.1"
31
+ "@mirohq/design-system-base-form": "^1.0.0-pdl-removing-ffs.0",
32
+ "@mirohq/design-system-base-text-field": "^1.0.0-pdl-removing-ffs.0",
33
+ "@mirohq/design-system-primitive": "^2.0.0-pdl-removing-ffs.0",
34
+ "@mirohq/design-system-stitches": "^3.0.0-pdl-removing-ffs.0",
35
+ "@mirohq/design-system-styles": "^2.0.0-pdl-removing-ffs.0",
36
+ "@mirohq/design-system-use-aria-disabled": "^1.0.0-pdl-removing-ffs.0",
37
+ "@mirohq/design-system-utils": "^1.0.0-pdl-removing-ffs.0"
39
38
  },
40
39
  "scripts": {
41
40
  "build": "rollup -c ../../../rollup.config.js",