@mirohq/design-system-textarea 0.2.0-forms.2 → 0.2.0-forms.4
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.
- package/dist/main.js +17 -12
- package/dist/main.js.map +1 -1
- package/dist/module.js +16 -11
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +1 -4
- package/package.json +6 -5
package/dist/main.js
CHANGED
|
@@ -5,11 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var designSystemUtils = require('@mirohq/design-system-utils');
|
|
8
|
-
var
|
|
9
|
-
var
|
|
8
|
+
var designSystemBaseForm = require('@mirohq/design-system-base-form');
|
|
9
|
+
var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
|
|
10
10
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
11
11
|
var designSystemStyles = require('@mirohq/design-system-styles');
|
|
12
12
|
var designSystemPrimitive = require('@mirohq/design-system-primitive');
|
|
13
|
+
var designSystemBaseInput = require('@mirohq/design-system-base-input');
|
|
13
14
|
|
|
14
15
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
16
|
|
|
@@ -66,10 +67,10 @@ const StyledTextarea = designSystemStitches.styled(designSystemPrimitive.Primiti
|
|
|
66
67
|
}
|
|
67
68
|
});
|
|
68
69
|
|
|
69
|
-
const Textarea = React__default["default"].forwardRef(({
|
|
70
|
+
const Textarea = React__default["default"].forwardRef(({ label, ...restProps }, forwardRef) => {
|
|
70
71
|
var _a, _b, _c;
|
|
71
72
|
const textareaRef = React__default["default"].useRef(null);
|
|
72
|
-
const elementProps =
|
|
73
|
+
const elementProps = designSystemUseAriaDisabled.useAriaDisabled(restProps);
|
|
73
74
|
const [focused, setFocused] = React__default["default"].useState(false);
|
|
74
75
|
const onFocus = React__default["default"].useCallback(() => {
|
|
75
76
|
setFocused(true);
|
|
@@ -79,24 +80,28 @@ const Textarea = React__default["default"].forwardRef(({ "aria-disabled": ariaDi
|
|
|
79
80
|
}, []);
|
|
80
81
|
const inputValue = (_c = (_b = (_a = textareaRef.current) == null ? void 0 : _a.value) != null ? _b : elementProps.value) != null ? _c : elementProps.defaultValue;
|
|
81
82
|
const isPlaceholder = (inputValue === void 0 || inputValue === "") && !focused;
|
|
82
|
-
const focusProps = {
|
|
83
|
-
onBlur,
|
|
84
|
-
onFocus
|
|
85
|
-
};
|
|
86
83
|
return /* @__PURE__ */ jsxRuntime.jsxs(StyledContainer, { children: [
|
|
87
|
-
label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
84
|
+
label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: !isPlaceholder, asChild: true, children: label }),
|
|
88
85
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
89
86
|
StyledTextarea,
|
|
90
87
|
{
|
|
91
|
-
|
|
92
|
-
|
|
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
|
+
},
|
|
93
99
|
css: label !== void 0 ? { "&::placeholder": { opacity: 0 } } : void 0,
|
|
94
100
|
ref: designSystemUtils.mergeRefs([textareaRef, forwardRef])
|
|
95
101
|
}
|
|
96
102
|
)
|
|
97
103
|
] });
|
|
98
104
|
});
|
|
99
|
-
Textarea[designSystemBaseInput.inputSymbol] = true;
|
|
100
105
|
|
|
101
106
|
exports.Textarea = Textarea;
|
|
102
107
|
//# 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
|
|
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":";;;;;;;;;;;;;;;;;;AAMA,MAAM,4BACJ,GAAA,+CAAA,CAAA;AAEW,MAAA,eAAA,GAAkBA,4BAAO,KAAO,EAAA;AAAA,EAC3C,QAAU,EAAA,UAAA;AAAA,EACV,KAAO,EAAA,MAAA;AACT,CAAC,CAAA,CAAA;AAEY,MAAA,cAAA,GAAiBA,2BAAO,CAAAC,+BAAA,CAAU,QAAU,EAAA;AAAA,EACvD,GAAK,EAAA,OAAA;AAAA,EACL,OAAS,EAAA,OAAA;AAAA,EACT,YAAc,EAAA,YAAA;AAAA,EACd,UAAY,EAAA,UAAA;AAAA,EACZ,MAAQ,EAAA,aAAA;AAAA,EACR,SAAW,EAAA,YAAA;AAAA,EACX,QAAU,EAAA,MAAA;AAAA,EACV,KAAO,EAAA,MAAA;AAAA,EACP,OAAS,EAAA,WAAA;AAAA,EACT,MAAQ,EAAA,MAAA;AAAA,EACR,KAAO,EAAA,gBAAA;AAAA,EAEP,GAAGC,6BAAgB,QAAS,CAAA,IAAA;AAAA,EAE5B,aAAA,EAAeA,6BAAgB,QAAS,CAAA,QAAA;AAAA,EAExC,sCAAwC,EAAA;AAAA,IACtC,GAAGA,6BAAgB,QAAS,CAAA,QAAA;AAAA,IAC5B,GAAGA,6BAAgB,IAAK,CAAA,QAAA;AAAA,GAC1B;AAAA,EAEA,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,IAC1C,MAAA,EAAQA,6BAAgB,QAAS,CAAA,OAAA;AAAA,GACnC;AAAA,EAEA,GAAGC,wBAAA,CAAM,GAAI,CAAAD,4BAAA,CAAgB,SAAS,OAAO,CAAA;AAAA,EAE7C,gBAAkB,EAAA;AAAA,IAChB,SAAW,EAAA,QAAA;AAAA,GACb;AAAA,EAEA,CAAC,QAAS,CAAA,MAAA,CAAA,4BAAA,EAA4B,gBAAgB,CAAA,GACpDA,6BAAgB,IAAK,CAAA,WAAA;AAAA,EAEvB,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,4BAAgB,CAAA,QAAA,CAAS,KAAM,CAAA,IAAA;AAAA,UAElC,GAAGC,wBAAM,CAAA,GAAA,CAAID,4BAAgB,CAAA,QAAA,CAAS,MAAM,OAAO,CAAA;AAAA,UAEnD,MAAA,EAAQA,4BAAgB,CAAA,QAAA,CAAS,KAAM,CAAA,OAAA;AAAA,SACzC;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,4BAAgB,CAAA,QAAA,CAAS,OAAQ,CAAA,IAAA;AAAA,UAEpC,GAAGC,wBAAM,CAAA,GAAA,CAAID,4BAAgB,CAAA,QAAA,CAAS,QAAQ,OAAO,CAAA;AAAA,UAErD,MAAA,EAAQA,4BAAgB,CAAA,QAAA,CAAS,OAAQ,CAAA,OAAA;AAAA,SAC3C;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACnDY,MAAA,QAAA,GAAWE,0BAAM,UAG5B,CAAA,CAAC,EAAE,KAAO,EAAA,GAAG,SAAU,EAAA,EAAG,UAAe,KAAA;AAvB3C,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAwBE,EAAM,MAAA,WAAA,GAAcA,yBAAM,CAAA,MAAA,CAA4B,IAAI,CAAA,CAAA;AAE1D,EAAM,MAAA,YAAA,GAAeC,4CAAgB,SAAS,CAAA,CAAA;AAE9C,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAAD,yBAAA,CAAM,SAAS,KAAK,CAAA,CAAA;AAElD,EAAM,MAAA,OAAA,GAAUA,yBAAM,CAAA,WAAA,CAAY,MAAM;AACtC,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,GACjB,EAAG,EAAE,CAAA,CAAA;AACL,EAAM,MAAA,MAAA,GAASA,yBAAM,CAAA,WAAA,CAAY,MAAM;AACrC,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,GAClB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,UAAA,GAAA,CACJ,6BAAY,OAAZ,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAqB,UAArB,IACA,GAAA,EAAA,GAAA,YAAA,CAAa,KADb,KAAA,IAAA,GAAA,EAAA,GAEA,YAAa,CAAA,YAAA,CAAA;AACf,EAAA,MAAM,aACH,GAAA,CAAA,UAAA,KAAe,KAAa,CAAA,IAAA,UAAA,KAAe,OAAO,CAAC,OAAA,CAAA;AAEtD,EAAA,uCACG,eACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAU,KAAA,KAAA,KAAA,CAAA,mCACRE,kCAAc,EAAA,EAAA,QAAA,EAAU,CAAC,aAAe,EAAA,OAAA,EAAO,MAC7C,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,oBAEFC,cAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACJ,SAAS,CAAK,CAAA,KAAA;AArDtB,UAAAC,IAAAA,GAAAA,CAAAA;AAsDU,UAAQ,OAAA,EAAA,CAAA;AACR,UAAA,CAAAA,GAAA,GAAA,YAAA,CAAa,OAAb,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,IAAA,IAAuB,CAAA,YAAA,EAAA,CAAA,CAAA,CAAA;AAAA,SACzB;AAAA,QACA,QAAQ,CAAK,CAAA,KAAA;AAzDrB,UAAAA,IAAAA,GAAAA,CAAAA;AA0DU,UAAO,MAAA,EAAA,CAAA;AACP,UAAA,CAAAA,GAAA,GAAA,YAAA,CAAa,MAAb,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,IAAA,IAAsB,CAAA,YAAA,EAAA,CAAA,CAAA,CAAA;AAAA,SACxB;AAAA,QACA,GAAA,EACE,UAAU,KAAY,CAAA,GAAA,EAAE,kBAAkB,EAAE,OAAA,EAAS,CAAE,EAAA,EAAM,GAAA,KAAA,CAAA;AAAA,QAE/D,GAAK,EAAAC,2BAAA,CAAU,CAAC,WAAA,EAAa,UAAU,CAAC,CAAA;AAAA,OAAA;AAAA,KAC1C;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { mergeRefs } from '@mirohq/design-system-utils';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { FloatingLabel } from '@mirohq/design-system-base-form';
|
|
5
|
+
import { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled';
|
|
6
6
|
import { styled } from '@mirohq/design-system-stitches';
|
|
7
7
|
import { focus } from '@mirohq/design-system-styles';
|
|
8
8
|
import { Primitive } from '@mirohq/design-system-primitive';
|
|
9
|
+
import { styles } from '@mirohq/design-system-base-input';
|
|
9
10
|
|
|
10
11
|
const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"]';
|
|
11
12
|
const StyledContainer = styled("div", {
|
|
@@ -58,10 +59,10 @@ const StyledTextarea = styled(Primitive.textarea, {
|
|
|
58
59
|
}
|
|
59
60
|
});
|
|
60
61
|
|
|
61
|
-
const Textarea = React.forwardRef(({
|
|
62
|
+
const Textarea = React.forwardRef(({ label, ...restProps }, forwardRef) => {
|
|
62
63
|
var _a, _b, _c;
|
|
63
64
|
const textareaRef = React.useRef(null);
|
|
64
|
-
const elementProps = useAriaDisabled(restProps
|
|
65
|
+
const elementProps = useAriaDisabled(restProps);
|
|
65
66
|
const [focused, setFocused] = React.useState(false);
|
|
66
67
|
const onFocus = React.useCallback(() => {
|
|
67
68
|
setFocused(true);
|
|
@@ -71,24 +72,28 @@ const Textarea = React.forwardRef(({ "aria-disabled": ariaDisabled, label, ...re
|
|
|
71
72
|
}, []);
|
|
72
73
|
const inputValue = (_c = (_b = (_a = textareaRef.current) == null ? void 0 : _a.value) != null ? _b : elementProps.value) != null ? _c : elementProps.defaultValue;
|
|
73
74
|
const isPlaceholder = (inputValue === void 0 || inputValue === "") && !focused;
|
|
74
|
-
const focusProps = {
|
|
75
|
-
onBlur,
|
|
76
|
-
onFocus
|
|
77
|
-
};
|
|
78
75
|
return /* @__PURE__ */ jsxs(StyledContainer, { children: [
|
|
79
76
|
label !== void 0 && /* @__PURE__ */ jsx(FloatingLabel, { floating: !isPlaceholder, asChild: true, children: label }),
|
|
80
77
|
/* @__PURE__ */ jsx(
|
|
81
78
|
StyledTextarea,
|
|
82
79
|
{
|
|
83
|
-
|
|
84
|
-
|
|
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
|
+
},
|
|
85
91
|
css: label !== void 0 ? { "&::placeholder": { opacity: 0 } } : void 0,
|
|
86
92
|
ref: mergeRefs([textareaRef, forwardRef])
|
|
87
93
|
}
|
|
88
94
|
)
|
|
89
95
|
] });
|
|
90
96
|
});
|
|
91
|
-
Textarea[inputSymbol] = true;
|
|
92
97
|
|
|
93
98
|
export { Textarea };
|
|
94
99
|
//# 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
|
|
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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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import react__default, { ComponentPropsWithRef } from 'react';
|
|
3
|
-
import { inputSymbol } from '@mirohq/design-system-base-input';
|
|
4
3
|
import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
|
|
5
4
|
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
|
|
6
5
|
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
|
|
@@ -510,8 +509,6 @@ interface TextareaProps extends StyledTextareaProps {
|
|
|
510
509
|
valid?: StyledTextareaProps['valid'];
|
|
511
510
|
label?: react__default.ReactNode;
|
|
512
511
|
}
|
|
513
|
-
declare const Textarea: react__default.ForwardRefExoticComponent<TextareaProps> &
|
|
514
|
-
[inputSymbol]?: boolean | undefined;
|
|
515
|
-
};
|
|
512
|
+
declare const Textarea: react__default.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & react__default.RefAttributes<HTMLTextAreaElement>>;
|
|
516
513
|
|
|
517
514
|
export { Textarea, TextareaProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-textarea",
|
|
3
|
-
"version": "0.2.0-forms.
|
|
3
|
+
"version": "0.2.0-forms.4",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,12 +26,13 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@
|
|
29
|
+
"@mirohq/design-system-base-form": "^0.1.0-forms.1",
|
|
30
|
+
"@mirohq/design-system-base-input": "^0.1.0-forms.2",
|
|
31
|
+
"@mirohq/design-system-primitive": "^1.1.2-forms.0",
|
|
30
32
|
"@mirohq/design-system-stitches": "^2.6.0",
|
|
31
33
|
"@mirohq/design-system-styles": "^1.1.19",
|
|
32
|
-
"@mirohq/design-system-
|
|
33
|
-
"@mirohq/design-system-utils": "^0.15.0-forms.
|
|
34
|
-
"@mirohq/design-system-base-input": "^0.1.0-forms.1"
|
|
34
|
+
"@mirohq/design-system-use-aria-disabled": "^0.1.0-forms.1",
|
|
35
|
+
"@mirohq/design-system-utils": "^0.15.0-forms.1"
|
|
35
36
|
},
|
|
36
37
|
"scripts": {
|
|
37
38
|
"build": "rollup -c ../../../rollup.config.js",
|