@mirohq/design-system-textarea 0.2.0-forms.4 → 0.2.0-forms.5

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 +92 -36
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +95 -39
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +0 -1
  6. package/package.json +6 -5
package/dist/main.js CHANGED
@@ -7,6 +7,7 @@ var React = require('react');
7
7
  var designSystemUtils = require('@mirohq/design-system-utils');
8
8
  var designSystemBaseForm = require('@mirohq/design-system-base-form');
9
9
  var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
10
+ var interactions = require('@react-aria/interactions');
10
11
  var designSystemStitches = require('@mirohq/design-system-stitches');
11
12
  var designSystemStyles = require('@mirohq/design-system-styles');
12
13
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
@@ -35,7 +36,7 @@ const StyledTextarea = designSystemStitches.styled(designSystemPrimitive.Primiti
35
36
  color: "$text-neutrals",
36
37
  ...designSystemBaseInput.styles.variants.idle,
37
38
  "&:read-only": designSystemBaseInput.styles.variants.readOnly,
38
- '&[disabled], &[aria-disabled="true"]': {
39
+ '&:disabled, &[aria-disabled="true"]': {
39
40
  ...designSystemBaseInput.styles.variants.disabled,
40
41
  ...designSystemBaseInput.styles.base.disabled
41
42
  },
@@ -67,41 +68,96 @@ const StyledTextarea = designSystemStitches.styled(designSystemPrimitive.Primiti
67
68
  }
68
69
  });
69
70
 
70
- const Textarea = React__default["default"].forwardRef(({ label, ...restProps }, forwardRef) => {
71
- var _a, _b, _c;
72
- const textareaRef = React__default["default"].useRef(null);
73
- const elementProps = designSystemUseAriaDisabled.useAriaDisabled(restProps);
74
- const [focused, setFocused] = React__default["default"].useState(false);
75
- const onFocus = React__default["default"].useCallback(() => {
76
- setFocused(true);
77
- }, []);
78
- const onBlur = React__default["default"].useCallback(() => {
79
- setFocused(false);
80
- }, []);
81
- const inputValue = (_c = (_b = (_a = textareaRef.current) == null ? void 0 : _a.value) != null ? _b : elementProps.value) != null ? _c : elementProps.defaultValue;
82
- const isPlaceholder = (inputValue === void 0 || inputValue === "") && !focused;
83
- return /* @__PURE__ */ jsxRuntime.jsxs(StyledContainer, { children: [
84
- label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: !isPlaceholder, asChild: true, children: label }),
85
- /* @__PURE__ */ jsxRuntime.jsx(
86
- StyledTextarea,
87
- {
88
- ...elementProps,
89
- onFocus: (e) => {
90
- var _a2;
91
- onFocus();
92
- (_a2 = elementProps.onFocus) == null ? void 0 : _a2.call(elementProps, e);
93
- },
94
- onBlur: (e) => {
95
- var _a2;
96
- onBlur();
97
- (_a2 = elementProps.onBlur) == null ? void 0 : _a2.call(elementProps, e);
98
- },
99
- css: label !== void 0 ? { "&::placeholder": { opacity: 0 } } : void 0,
100
- ref: designSystemUtils.mergeRefs([textareaRef, forwardRef])
101
- }
102
- )
103
- ] });
104
- });
71
+ const Textarea = React__default["default"].forwardRef(
72
+ ({
73
+ id,
74
+ onFocus,
75
+ onBlur,
76
+ disabled,
77
+ "aria-disabled": ariaDisabled,
78
+ readOnly,
79
+ required,
80
+ placeholder,
81
+ valid,
82
+ ...restProps
83
+ }, forwardRef) => {
84
+ var _a, _b, _c;
85
+ const textareaRef = React__default["default"].useRef(null);
86
+ const {
87
+ label,
88
+ shouldUseFloatingLabel,
89
+ formElementId,
90
+ valid: formFieldValid,
91
+ ariaDescribedBy,
92
+ ariaInvalid,
93
+ formElementRef,
94
+ setRequired,
95
+ setReadOnly,
96
+ setDisabled,
97
+ setAriaDisabled
98
+ } = designSystemBaseForm.useFormFieldContext();
99
+ const elementProps = designSystemUseAriaDisabled.useAriaDisabled({
100
+ ...restProps,
101
+ ariaDisabled
102
+ });
103
+ React.useEffect(() => {
104
+ setRequired == null ? void 0 : setRequired(required);
105
+ setReadOnly == null ? void 0 : setReadOnly(readOnly);
106
+ setDisabled == null ? void 0 : setDisabled(disabled);
107
+ setAriaDisabled == null ? void 0 : setAriaDisabled(ariaDisabled);
108
+ }, [
109
+ disabled,
110
+ ariaDisabled,
111
+ readOnly,
112
+ required,
113
+ setRequired,
114
+ setReadOnly,
115
+ setDisabled,
116
+ setAriaDisabled
117
+ ]);
118
+ const [focused, setFocused] = React.useState(false);
119
+ const { hoverProps, isHovered: hovered } = interactions.useHover({});
120
+ const onFocusHandler = React__default["default"].useCallback(
121
+ (e) => {
122
+ setFocused(true);
123
+ onFocus == null ? void 0 : onFocus(e);
124
+ },
125
+ [setFocused, onFocus]
126
+ );
127
+ const onBlurHandler = React__default["default"].useCallback(
128
+ (e) => {
129
+ setFocused(false);
130
+ onBlur == null ? void 0 : onBlur(e);
131
+ },
132
+ [setFocused, onBlur]
133
+ );
134
+ const textareaValue = (_c = (_b = (_a = textareaRef.current) == null ? void 0 : _a.value) != null ? _b : elementProps.value) != null ? _c : elementProps.defaultValue;
135
+ const floatingLabel = placeholder !== void 0 || textareaValue !== void 0 && textareaValue !== "" || focused;
136
+ return /* @__PURE__ */ jsxRuntime.jsxs(StyledContainer, { children: [
137
+ shouldUseFloatingLabel && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: floatingLabel, children: label }),
138
+ /* @__PURE__ */ jsxRuntime.jsx(
139
+ StyledTextarea,
140
+ {
141
+ "data-focused": designSystemUtils.booleanishAttrValue(focused),
142
+ "data-hovered": designSystemUtils.booleanishAttrValue(hovered),
143
+ ...elementProps,
144
+ ...hoverProps,
145
+ id: id != null ? id : formElementId,
146
+ valid: valid != null ? valid : formFieldValid,
147
+ readOnly,
148
+ "aria-describedby": ariaDescribedBy,
149
+ "aria-invalid": ariaInvalid,
150
+ disabled: disabled === true || void 0,
151
+ required: required === true || void 0,
152
+ placeholder,
153
+ onFocus: onFocusHandler,
154
+ onBlur: onBlurHandler,
155
+ ref: designSystemUtils.mergeRefs([textareaRef, formElementRef, forwardRef])
156
+ }
157
+ )
158
+ ] });
159
+ }
160
+ );
105
161
 
106
162
  exports.Textarea = Textarea;
107
163
  //# sourceMappingURL=main.js.map
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 { 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 from 'react'\nimport type { ElementRef } from 'react'\nimport { mergeRefs } from '@mirohq/design-system-utils'\nimport { FloatingLabel } from '@mirohq/design-system-base-form'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\n\nimport { StyledTextarea, StyledContainer } from './textarea.styled'\nimport type { StyledTextareaProps } from './textarea.styled'\n\nexport interface TextareaProps extends StyledTextareaProps {\n /**\n * The textarea's state is indicated by border color.\n * Green border color signifies valid input, while red color denotes\n * invalid input.\n */\n valid?: StyledTextareaProps['valid']\n\n label?: React.ReactNode\n}\n\nexport const Textarea = React.forwardRef<\n ElementRef<typeof StyledTextarea>,\n TextareaProps\n>(({ label, ...restProps }, forwardRef) => {\n const textareaRef = React.useRef<HTMLTextAreaElement>(null)\n\n const elementProps = useAriaDisabled(restProps)\n\n const [focused, setFocused] = React.useState(false)\n\n const onFocus = React.useCallback(() => {\n setFocused(true)\n }, [])\n const onBlur = React.useCallback(() => {\n setFocused(false)\n }, [])\n\n const inputValue =\n textareaRef.current?.value ??\n elementProps.value ??\n elementProps.defaultValue\n const isPlaceholder =\n (inputValue === undefined || inputValue === '') && !focused\n\n return (\n <StyledContainer>\n {label !== undefined && (\n <FloatingLabel floating={!isPlaceholder} asChild>\n {label}\n </FloatingLabel>\n )}\n <StyledTextarea\n {...elementProps}\n onFocus={e => {\n onFocus()\n elementProps.onFocus?.(e)\n }}\n onBlur={e => {\n onBlur()\n elementProps.onBlur?.(e)\n }}\n css={\n label !== undefined ? { '&::placeholder': { opacity: 0 } } : undefined\n }\n ref={mergeRefs([textareaRef, forwardRef])}\n />\n </StyledContainer>\n )\n})\n"],"names":["styled","Primitive","baseInputStyles","focus","React","useAriaDisabled","FloatingLabel","jsx","_a","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 { 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 { mergeRefs, booleanishAttrValue } from '@mirohq/design-system-utils'\nimport {\n FloatingLabel,\n useFormFieldContext,\n} from '@mirohq/design-system-base-form'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { useHover } from '@react-aria/interactions'\n\nimport { StyledTextarea, StyledContainer } from './textarea.styled'\nimport type { StyledTextareaProps } from './textarea.styled'\n\nexport interface TextareaProps extends StyledTextareaProps {\n /**\n * The textarea's state is indicated by border color.\n * Green border color signifies valid input, while red color denotes\n * invalid input.\n */\n valid?: StyledTextareaProps['valid']\n}\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-disabled': ariaDisabled,\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,\n ariaInvalid,\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 {...elementProps}\n {...hoverProps}\n id={id ?? formElementId}\n valid={valid ?? formFieldValid}\n readOnly={readOnly}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\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","mergeRefs"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import React from 'react';
3
- import { mergeRefs } from '@mirohq/design-system-utils';
4
- import { FloatingLabel } from '@mirohq/design-system-base-form';
2
+ import React, { useEffect, useState } from 'react';
3
+ import { booleanishAttrValue, mergeRefs } from '@mirohq/design-system-utils';
4
+ import { useFormFieldContext, FloatingLabel } from '@mirohq/design-system-base-form';
5
5
  import { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled';
6
+ import { useHover } from '@react-aria/interactions';
6
7
  import { styled } from '@mirohq/design-system-stitches';
7
8
  import { focus } from '@mirohq/design-system-styles';
8
9
  import { Primitive } from '@mirohq/design-system-primitive';
@@ -27,7 +28,7 @@ const StyledTextarea = styled(Primitive.textarea, {
27
28
  color: "$text-neutrals",
28
29
  ...styles.variants.idle,
29
30
  "&:read-only": styles.variants.readOnly,
30
- '&[disabled], &[aria-disabled="true"]': {
31
+ '&:disabled, &[aria-disabled="true"]': {
31
32
  ...styles.variants.disabled,
32
33
  ...styles.base.disabled
33
34
  },
@@ -59,41 +60,96 @@ const StyledTextarea = styled(Primitive.textarea, {
59
60
  }
60
61
  });
61
62
 
62
- const Textarea = React.forwardRef(({ label, ...restProps }, forwardRef) => {
63
- var _a, _b, _c;
64
- const textareaRef = React.useRef(null);
65
- const elementProps = useAriaDisabled(restProps);
66
- const [focused, setFocused] = React.useState(false);
67
- const onFocus = React.useCallback(() => {
68
- setFocused(true);
69
- }, []);
70
- const onBlur = React.useCallback(() => {
71
- setFocused(false);
72
- }, []);
73
- const inputValue = (_c = (_b = (_a = textareaRef.current) == null ? void 0 : _a.value) != null ? _b : elementProps.value) != null ? _c : elementProps.defaultValue;
74
- const isPlaceholder = (inputValue === void 0 || inputValue === "") && !focused;
75
- return /* @__PURE__ */ jsxs(StyledContainer, { children: [
76
- label !== void 0 && /* @__PURE__ */ jsx(FloatingLabel, { floating: !isPlaceholder, asChild: true, children: label }),
77
- /* @__PURE__ */ jsx(
78
- StyledTextarea,
79
- {
80
- ...elementProps,
81
- onFocus: (e) => {
82
- var _a2;
83
- onFocus();
84
- (_a2 = elementProps.onFocus) == null ? void 0 : _a2.call(elementProps, e);
85
- },
86
- onBlur: (e) => {
87
- var _a2;
88
- onBlur();
89
- (_a2 = elementProps.onBlur) == null ? void 0 : _a2.call(elementProps, e);
90
- },
91
- css: label !== void 0 ? { "&::placeholder": { opacity: 0 } } : void 0,
92
- ref: mergeRefs([textareaRef, forwardRef])
93
- }
94
- )
95
- ] });
96
- });
63
+ const Textarea = React.forwardRef(
64
+ ({
65
+ id,
66
+ onFocus,
67
+ onBlur,
68
+ disabled,
69
+ "aria-disabled": ariaDisabled,
70
+ readOnly,
71
+ required,
72
+ placeholder,
73
+ valid,
74
+ ...restProps
75
+ }, forwardRef) => {
76
+ var _a, _b, _c;
77
+ const textareaRef = React.useRef(null);
78
+ const {
79
+ label,
80
+ shouldUseFloatingLabel,
81
+ formElementId,
82
+ valid: formFieldValid,
83
+ ariaDescribedBy,
84
+ ariaInvalid,
85
+ formElementRef,
86
+ setRequired,
87
+ setReadOnly,
88
+ setDisabled,
89
+ setAriaDisabled
90
+ } = useFormFieldContext();
91
+ const elementProps = useAriaDisabled({
92
+ ...restProps,
93
+ ariaDisabled
94
+ });
95
+ useEffect(() => {
96
+ setRequired == null ? void 0 : setRequired(required);
97
+ setReadOnly == null ? void 0 : setReadOnly(readOnly);
98
+ setDisabled == null ? void 0 : setDisabled(disabled);
99
+ setAriaDisabled == null ? void 0 : setAriaDisabled(ariaDisabled);
100
+ }, [
101
+ disabled,
102
+ ariaDisabled,
103
+ readOnly,
104
+ required,
105
+ setRequired,
106
+ setReadOnly,
107
+ setDisabled,
108
+ setAriaDisabled
109
+ ]);
110
+ const [focused, setFocused] = useState(false);
111
+ const { hoverProps, isHovered: hovered } = useHover({});
112
+ const onFocusHandler = React.useCallback(
113
+ (e) => {
114
+ setFocused(true);
115
+ onFocus == null ? void 0 : onFocus(e);
116
+ },
117
+ [setFocused, onFocus]
118
+ );
119
+ const onBlurHandler = React.useCallback(
120
+ (e) => {
121
+ setFocused(false);
122
+ onBlur == null ? void 0 : onBlur(e);
123
+ },
124
+ [setFocused, onBlur]
125
+ );
126
+ const textareaValue = (_c = (_b = (_a = textareaRef.current) == null ? void 0 : _a.value) != null ? _b : elementProps.value) != null ? _c : elementProps.defaultValue;
127
+ const floatingLabel = placeholder !== void 0 || textareaValue !== void 0 && textareaValue !== "" || focused;
128
+ return /* @__PURE__ */ jsxs(StyledContainer, { children: [
129
+ shouldUseFloatingLabel && /* @__PURE__ */ jsx(FloatingLabel, { floating: floatingLabel, children: label }),
130
+ /* @__PURE__ */ jsx(
131
+ StyledTextarea,
132
+ {
133
+ "data-focused": booleanishAttrValue(focused),
134
+ "data-hovered": booleanishAttrValue(hovered),
135
+ ...elementProps,
136
+ ...hoverProps,
137
+ id: id != null ? id : formElementId,
138
+ valid: valid != null ? valid : formFieldValid,
139
+ readOnly,
140
+ "aria-describedby": ariaDescribedBy,
141
+ "aria-invalid": ariaInvalid,
142
+ disabled: disabled === true || void 0,
143
+ required: required === true || void 0,
144
+ placeholder,
145
+ onFocus: onFocusHandler,
146
+ onBlur: onBlurHandler,
147
+ ref: mergeRefs([textareaRef, formElementRef, forwardRef])
148
+ }
149
+ )
150
+ ] });
151
+ }
152
+ );
97
153
 
98
154
  export { Textarea };
99
155
  //# sourceMappingURL=module.js.map
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 { 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 from 'react'\nimport type { ElementRef } from 'react'\nimport { mergeRefs } from '@mirohq/design-system-utils'\nimport { FloatingLabel } from '@mirohq/design-system-base-form'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\n\nimport { StyledTextarea, StyledContainer } from './textarea.styled'\nimport type { StyledTextareaProps } from './textarea.styled'\n\nexport interface TextareaProps extends StyledTextareaProps {\n /**\n * The textarea's state is indicated by border color.\n * Green border color signifies valid input, while red color denotes\n * invalid input.\n */\n valid?: StyledTextareaProps['valid']\n\n label?: React.ReactNode\n}\n\nexport const Textarea = React.forwardRef<\n ElementRef<typeof StyledTextarea>,\n TextareaProps\n>(({ label, ...restProps }, forwardRef) => {\n const textareaRef = React.useRef<HTMLTextAreaElement>(null)\n\n const elementProps = useAriaDisabled(restProps)\n\n const [focused, setFocused] = React.useState(false)\n\n const onFocus = React.useCallback(() => {\n setFocused(true)\n }, [])\n const onBlur = React.useCallback(() => {\n setFocused(false)\n }, [])\n\n const inputValue =\n textareaRef.current?.value ??\n elementProps.value ??\n elementProps.defaultValue\n const isPlaceholder =\n (inputValue === undefined || inputValue === '') && !focused\n\n return (\n <StyledContainer>\n {label !== undefined && (\n <FloatingLabel floating={!isPlaceholder} asChild>\n {label}\n </FloatingLabel>\n )}\n <StyledTextarea\n {...elementProps}\n onFocus={e => {\n onFocus()\n elementProps.onFocus?.(e)\n }}\n onBlur={e => {\n onBlur()\n elementProps.onBlur?.(e)\n }}\n css={\n label !== undefined ? { '&::placeholder': { opacity: 0 } } : undefined\n }\n ref={mergeRefs([textareaRef, forwardRef])}\n />\n </StyledContainer>\n )\n})\n"],"names":["baseInputStyles","_a"],"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 { 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 { mergeRefs, booleanishAttrValue } from '@mirohq/design-system-utils'\nimport {\n FloatingLabel,\n useFormFieldContext,\n} from '@mirohq/design-system-base-form'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { useHover } from '@react-aria/interactions'\n\nimport { StyledTextarea, StyledContainer } from './textarea.styled'\nimport type { StyledTextareaProps } from './textarea.styled'\n\nexport interface TextareaProps extends StyledTextareaProps {\n /**\n * The textarea's state is indicated by border color.\n * Green border color signifies valid input, while red color denotes\n * invalid input.\n */\n valid?: StyledTextareaProps['valid']\n}\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-disabled': ariaDisabled,\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,\n ariaInvalid,\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 {...elementProps}\n {...hoverProps}\n id={id ?? formElementId}\n valid={valid ?? formFieldValid}\n readOnly={readOnly}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\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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"}
package/dist/types.d.ts CHANGED
@@ -507,7 +507,6 @@ interface TextareaProps extends StyledTextareaProps {
507
507
  * invalid input.
508
508
  */
509
509
  valid?: StyledTextareaProps['valid'];
510
- label?: react__default.ReactNode;
511
510
  }
512
511
  declare const Textarea: react__default.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & react__default.RefAttributes<HTMLTextAreaElement>>;
513
512
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-textarea",
3
- "version": "0.2.0-forms.4",
3
+ "version": "0.2.0-forms.5",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,13 +26,14 @@
26
26
  "react": "^16.14 || ^17 || ^18"
27
27
  },
28
28
  "dependencies": {
29
+ "@react-aria/interactions": "^3.13.0",
29
30
  "@mirohq/design-system-base-form": "^0.1.0-forms.1",
30
- "@mirohq/design-system-base-input": "^0.1.0-forms.2",
31
31
  "@mirohq/design-system-primitive": "^1.1.2-forms.0",
32
32
  "@mirohq/design-system-stitches": "^2.6.0",
33
- "@mirohq/design-system-styles": "^1.1.19",
34
- "@mirohq/design-system-use-aria-disabled": "^0.1.0-forms.1",
35
- "@mirohq/design-system-utils": "^0.15.0-forms.1"
33
+ "@mirohq/design-system-use-aria-disabled": "^0.1.0-forms.2",
34
+ "@mirohq/design-system-base-input": "^0.1.0-forms.2",
35
+ "@mirohq/design-system-utils": "^0.15.0-forms.1",
36
+ "@mirohq/design-system-styles": "^1.1.19"
36
37
  },
37
38
  "scripts": {
38
39
  "build": "rollup -c ../../../rollup.config.js",